/* S-ON System onCommon.css 1.0.0(25.01.01)
===========================================

1. Reset
2. Web accessibility
3. Utility
4. Component
5. ETC

===========================================
*/


@charset "utf-8";
/* 1. Reset ------------------------------------------------------------------------------------ */
* {letter-spacing: -0.06em;}
html {height: 100%; overflow-x: hidden; scroll-behavior: smooth;}
body {height: 100%;}
body, button, input, select, table, textarea {font-family: 'Pretendard', 'Noto Sans Korean', sans-serif; word-break: keep-all;}
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul, a {margin:0;padding:0}
ol, ul {list-style:none}
a {color: inherit; text-decoration: none;}
address, em, i {font-style: normal;}
img {vertical-align:top;}
button, input {border-radius:0;border:0}
button {background-color: transparent; cursor: pointer;}

/* 2. Web accessibility ------------------------------------------------------------------------------------ */
.hide {display: none !important;}
.hidden{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skipnavigation a {position: fixed; width: 0; height: 0; overflow: hidden;}
.skipnavigation a:focus {top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 30px; font-size: 16px; font-weight: 400; letter-spacing: -0.06em; opacity: 1; color: #fff; background-color: #039; z-index: 10000; border: 2px dashed #fff; outline: 0;}

/* 3. Utility ------------------------------------------------------------------------------------ */
/* 정렬 */
.al {text-align:left;}
.ac {text-align:center;}
.ar {text-align:right;}

/* 4. Component ------------------------------------------------------------------------------------ */
/* form */
fieldset {border:1px solid #efefef; margin-bottom:20px; padding:10px;}
fieldset legend {font-size:13px; padding:0px 10px; margin-left:10px;}

/* Tab */
.onTab {display: flex; border-bottom:1px solid #0E4BAC}
.onTab > li {background: #efefef; min-height: 60px; max-width: 150px; text-align:center; border-radius: 15px 15px 0px 0px;}
.onTab > li > a {display: block; height: 100%; color: #999; transition:all 0.6s; display: flex; align-items: center; padding:0px 20px;}
.onTab > li > a:hover, .onTab > li > a:focus {color: #0E4BAC;}
.onTab > li > a > span {margin: 0 auto;}
.onTab > li.on {background-color: #2D3D8F;}
.onTab > li.on a {color: #fff;}
.onTab > li.on > a:hover, .onTab > li.on > a:focus {color: #ffed4a}

.onTab.wide {justify-content: space-between;}
.onTab.wide > li {max-width:none; width:100%;}

/* accordion */
.onAccordion {margin: 20px auto;}
  .onAccordionItem { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 8px; overflow: hidden;}
    .onAccordionHeader { background: #f7f7f7; padding: 12px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
    .onAccordionHeader .toggleIcon {position: relative; width: 15px; height: 15px; flex: 0 0 15px;}
    .onAccordionHeader .toggleIcon:before {content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; transform: translate(-50%, -50%); background-color: black;}
    .onAccordionHeader .toggleIcon:after  {content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 100%; transform: translate(-50%, -50%); background-color: black;}
    .onAccordionContent { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: white; }
      .onAccordionContentIn { padding: 15px 20px; }
      .onAccordionContentIn img {max-width: 100%;}
.onAccordionItem.on .onAccordionHeader .toggleIcon:after {display: none;}
.onAccordionItem.on .onAccordionContent {overflow: auto;}

/* toggle */
.onToggle {width: 140px; line-height: 28px; border-radius: 20px; border: 1px solid #E0E0E0; color: #6A6A6A; display: flex; flex-direction: row; justify-content: space-between; box-sizing: border-box; align-items: center;}
.onToggle > li {text-align: center; border-radius: 20px; min-width: 70px;}
.onToggle > li > a, .onToggle > li > button {display: block; text-align: center; width: 100%; line-height: 28px; color: #333; transition: all 0.3s; border-radius: 20px;}
.onToggle > li.on > a, .onToggle > li.on > button {background-color: #2D3D8F; color: #fff;}

.onToggle.mini {width: 48px; border-radius: 15px; border: 1px solid #e1e1e1; box-sizing: border-box; background-color: #f7f8f9;}
.onToggle.mini.on {background-color: #fff;}
.onToggle.mini > li {display: flex; width: 100%; align-items: center; justify-content: flex-start; transition: all 0.3s; height: 16px; border-radius: 15px; min-width: auto; padding: 3px; cursor: pointer;}
.onToggle.mini > li.on {background-color: #fff;}
.onToggle.mini > li > a, .onToggle.mini > li > button {width: 18px; height: 18px; background-color: #c9c9c9; border-radius: 50%; transform: translateX(0%); transition: all 0.3s; pointer-events: none;}
.onToggle.mini > li.on > a, .onToggle.mini > li.on > button {background-color: #1f3d7b; transform: translateX(calc(100% + 4px));}    

/* input */
.onField.filter {position: relative; text-align:center; min-width: 62px; margin-right: 8px; text-align: center; line-height:30px; box-sizing: border-box; vertical-align: middle;}
.onField.filter:last-child {margin-right: 0;}
.onField.filter input[type="checkbox"] {opacity: 0; position: absolute; top: 0; left: 0; transform: translateY(0); width: 100%; height: 100%; margin: 0;}
.onField.filter input[type="checkbox"] + span {position: relative; display: inline-flex; height: 30px; line-height: 28px; padding-left: 0; min-width: 62px; margin: 0; justify-content: center; text-align: center; border-radius: 15px; border: 1px solid #CBCBCB; background-color: #ffffff; box-sizing: border-box; cursor: pointer;}
.onField.filter input[type="checkbox"] + span:before {display: none;}
.onField.filter input[type="checkbox"] + span:after {display: none;}
.onField.filter input[type="checkbox"]:checked + span {color: #ffffff; border: 1px solid #1F3D7B; background-color: #1F3D7B;}
.onField.filter input[type="checkbox"]:focus + span {outline: 2px solid #ff6308; outline-offset: 2px;}

/* .onFilter li {display: inline-block; box-sizing: border-box; min-width: 80px; border-radius: 20px; background: #898A9E; color: #fff; text-align: center; margin-right: 7px; transition: all 0.3s;}
.onFilter li:last-of-type {margin-right: 0;}
.onFilter li > a {display: block; padding: 5px 15px; line-height: 20px;}
.onFilter li:hover, .onFilter li.on {background: #488EEF; color: #fff;} */

/* modal */
.onModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.3s, visibility 0.3s; z-index: 5000; }
.onModalIn { display: flex; flex-direction: column; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; background: #fff; box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.25); max-height: 90%; z-index: 5100; max-width: 500px; }
.modalClose { font-size: 20px; }
.onModalHeader { background-color: #F7F8F9; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.onModalHeader > h3 { font-size: 20px; color: #2D3D8F; }
.onModalHeader > button {font-size: 20px;}
.onModalContent { padding: 20px; height: 100%; overflow-y: auto; }
.onModalFooter { padding: 0 20px 20px; }

.onModal.on { opacity: 1; visibility: visible; }
.onModal.noShadow { background: none; width: auto; height: auto; }

/* table */
.onTable {position: relative; width: 100%; text-align: center; border-collapse: collapse;}
.onTable:before {content: ""; position: absolute; width: 100%; top: 0; left: 0; height: 1px; background: #333; z-index: 1;}
.onTable caption {position: absolute; font-size: 0; width: 0; height: 0; text-indent: 1000px; line-height: 0; overflow: hidden;}

.onTable > thead {position: relative;}
.onTable > thead::after {content: ""; display: block; position: absolute; bottom: 0; width: 100%; height: 0; border-bottom: 1px solid #d7d7d7;}
.onTable > thead > tr > th {position: relative; padding: 12px; font-size: 14px; font-weight: 500; color: #000000; background-color: #ecf0f3;}
.onTable > thead > tr > th:after {position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; display: block; content: ""; width: 0px; height: calc(100% - 30px); border-right: 1px dashed #bbbbbb;}
.onTable > thead > tr > th:first-of-type:after {display: none;}
.onTable > tbody > tr > th {padding: 16px; font-size: 15px; font-weight: 500; text-align: left; border-bottom: 1px solid #E1E1E1; color: #000000; background-color: #F7F8F9;}
.onTable > tbody > tr > td {padding: 12px; font-size: 15px; border-bottom: 1px solid #E1E1E1; color: #333333;}

.onTable.line > thead > tr > th {background-clip: padding-box; border-right: 1px solid #d7d7d7;}
.onTable.line > thead > tr > th:after {display: none;}
.onTable.line > thead > tr > th:last-of-type {border-right: none;}
.onTable.line > tbody > tr > th,
.onTable.line > tbody > tr > td {background-clip: padding-box; border-right: 1px solid #d7d7d7;}
.onTable.line > tbody > tr > td:last-of-type {border-right: none;}

.onMust { position: relative; text-indent: 0px; padding-left: 2px; box-sizing: border-box; display: inline-block; }
.onMust::before { content: "*필수입력"; display: inline-block; left: -6px; top: -6px; position: absolute; color: #2d3d8f; width: 8px; height: 10px; overflow: hidden;}

.boardLink {color: #0E4BAC}

/* button */
[class ^= "btnS_"] {display: inline-flex; justify-content: center; align-items: center; min-width: 68px; height: 28px; padding: 0 10px; font-size: 14px; border-radius: 5px; box-sizing: border-box; transition: all 0.3s;}
[class ^= "btnM_"] {display: inline-flex; justify-content: center; align-items: center; min-width: 80px; height: 38px; padding: 0 16px; font-size: 15px; border-radius: 5px; box-sizing: border-box; transition: all 0.3s;}
[class ^= "btnL_"] {display: inline-flex; justify-content: center; align-items: center; min-width: 160px; height: 46px; padding: 0 30px; font-size: 16px; border-radius: 10px; box-sizing: border-box; transition: all 0.3s;}
[class ^= "btnS_"]:focus {outline: 2px solid #ff8600; outline-offset: 2px;}
[class ^= "btnM_"]:focus {outline: 2px solid #ff8600; outline-offset: 2px;}
[class ^= "btnL_"]:focus {outline: 2px solid #ff8600; outline-offset: 2px;}

.btnS_gray, .btnM_gray, .btnL_gray {border: 1px solid #636E81; color: #fff; background:#636E81;}
.btnS_gray:hover, .btnM_gray:hover, .btnL_gray:hover {color: #636E81; background-color: #ffffff;}

.btnS_blue, .btnM_blue, .btnL_blue {border: 1px solid #0049BE; color: #ffffff; background:#0049BE;}
.btnS_blue:hover, .btnM_blue:hover, .btnL_blue:hover {color: #0049BE; background-color: #ffffff;}

.btnS_red, .btnM_red, .btnL_red {border: 1px solid  #D90000; color: #ffffff; background: #D90000;}
.btnS_red:hover, .btnM_red:hover, .btnL_red:hover {color: #D90000; background-color: #ffffff;}

.btnS_green, .btnM_green, .btnL_green {border: 1px solid #00975F; color: #ffffff; background:#00975F;}
.btnS_green:hover, .btnM_green:hover, .btnL_green:hover {color: #00975F; background-color: #ffffff;}

.onPagingNext {border-top: 1px solid #e1e1e1; margin-top: 30px;}
.onPagingNext a {display: block; font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 55px; border-bottom: 1px solid #e1e1e1; color: #444444;}
.onPagingNext a:hover {font-weight: 500; color: #0049be;}
.onPagingNext a:focus {outline: 2px solid #ff8600; outline-offset: 2px;}
.onPagingNext a span {display: inline-block; margin: 0 12px; font-size: 15px; font-weight: 500; color: #000000;}

/* paging */
.onPaging { display: flex; align-items: center; justify-content: center; margin: 50px 0 0px;}
.onPageNumbers { display: flex; flex-wrap: wrap; justify-content: center;}
.onPagingLink { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid #ddd; background-color: #fff; color: #333; border-radius: 4px; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; margin: 2px; box-sizing: border-box;}
.onPagingLink:hover { background-color: #f5f5f5; border-color: #999; }
.onPagingLink:focus {outline: 2px solid #ff8600; outline-offset: 2px;}
.onPagingLink:disabled { background-color: #f5f5f5; color: #999; cursor: not-allowed; }
.onPagingLink.on { background-color: #007bff; color: #fff; border-color: #007bff; }


/* 검색 박스 - search bar */
.onSearch {position: relative; display: flex; justify-content: space-between; padding: 12px 24px; border-radius: 10px; background-color: #F3F3F8; margin-bottom: 40px;}
.onSearch .onSearchForm {display: flex; flex-wrap: wrap; row-gap: 10px;}
.onSearch .onSearchForm > .onField {width:100%;}
.onSearch .onField {display: flex; flex-wrap: wrap; grid-gap: 10px; position: relative; line-height: 25px; align-items: center;}
.onSearch .onField strong {padding-left:0px; color: #333; font-size:16px; min-width:130px; display: inline-block;}
.onSearch .onField:first-child strong {padding-left:0px;}
.onSearch .onField .onField strong {min-width:auto; padding-right:10px; display: flex; align-items: center;}
.onSearch .onField span {margin-right: 10px; color: #555;}
.onSearch .onField select {margin-right: 20px; border: none; background-color: #fff;}
.onSearch .onField.half .onField {flex-grow:1}
.onSearch .onField.full {justify-content:space-between; }
.onSearch .onField.full .onField {flex-grow:1; }
.onSearch .onField.full .onField input {width: 100%;}

.onSearchBtnBox {display: flex; align-items: center; margin-left: 30px; padding-left: 30px; border-left: 1px solid #CACACA; grid-gap: 10px;}
    .onSearchBtn  {display: flex; justify-content: center; align-items: center; height: 38px; font-size: 15px; font-weight: 500; text-align: center; transition: all 0.3s; border-radius: 10px; color: #ffffff; background-color: #003F9E; padding:0px 15px;}
    .onSearchBtn > i {display: inline-block; font-size: 16px;}
    .onSearchBtn.normal {background-color: #898a9e; padding:0px 13px;}
    .onSearchBtn:hover {background-color: #2196f3;}
    .onSearchBtn.normal:hover {background-color: #000;}

.onSearchBtn:focus {outline: 2px solid #e66318; outline-offset: 2px;}
.onSearch.center {justify-content: center;}
.onSearch.title .onSearchForm > .onField {padding-left:140px;}
.onSearch.title .onSearchForm > .onField strong {margin-left:-140px;}
.onSearch.title .onSearchForm > .onField.half strong {margin-left:0px;}
.onSearch.title .onSearchForm > .onField.half:first-child strong  {margin-left:-130px;}

/* form */
.onField input[type="text"],
.onField input[type="password"] {height: 40px; border-radius: 5px; text-indent:10px;}
.onField input[type="text"]:disabled, .onField input[type="password"]:disabled {background: #E3E3EF; border: none;}
.onField input[type="checkbox"] {position: absolute; width: 0; height: 0; opacity: 0;}
.onField input[type="checkbox"] + span {display: inline-block; margin-right: 12px; padding-left: 21px; color: #555;}
.onField input[type="checkbox"] + span:before {position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; content: ""; width: 17px; height: 17px; border-radius: 5px; border: 1px solid #999999; background-color: #ffffff; box-sizing: border-box;}
.onField input[type="checkbox"]:checked + span {color: #000; font-weight: 400;}
.onField input[type="checkbox"]:checked + span:before {border-color: #000000; background: url(/template/template1/assets/img/common/icon_check.svg) no-repeat center center #000000;}

.onField input[type="radio"] {position: absolute; width: 0; height: 0; opacity: 0;}
.onField input[type="radio"] + span {display: inline-block; margin-right: 12px; padding-left: 21px; color: #555;}
.onField input[type="radio"] + span:before {position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; content: ""; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #999999; background-color: #ffffff; box-sizing: border-box; transform: scale(1.1);}
.onField input[type="radio"]:checked + span {color: #000; font-weight: 400;}
.onField input[type="radio"]:checked + span:after {position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0; content: ""; width: 17px; height: 17px; border-radius: 50%; transform: scale(0.7); background-color: #000;}

.onField select {height: 36px; background: url(/template/template1/assets/img/common/selectArrow.svg) no-repeat 92% 52%; border-radius: 5px; appearance: none;}

input:focus, input[type="checkbox"]:focus + span:before, input[type="radio"]:focus + span:before, select:focus {outline: 2px solid #e66318; outline-offset: 2px;}



/* 테블릿 */
@media (min-width: 641px) and (max-width: 1300px) {

}
/* 모바일 */
@media all and (max-width: 640px) {
/* 검색 박스 - search bar */
.onSearch .onField strong {width: 100%;}
.onSearch {flex-direction: column; row-gap: 10px; padding: 12px;}
.onSearchBtnBox {margin: 0px; padding: 0px; justify-content: space-between; grid-gap: 10px; border-left:0px;}
.onSearchBtnBox .onSearchBtn {flex-grow: 1;}
.onSearchBtnBox .onSearchBtn.normal {flex-grow: 0;}
.onSearch.title .onSearchForm > .onField {padding-left:0px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; }
.onSearch.title .onSearchForm > .onField strong {margin-left:0px;}
}


@media (min-width:641px) and (max-width:800px) {
  .onPagingLink { min-width: 30px; height: 30px; }
}
@media (max-width: 640px) {
  .onPagingLink { min-width: 24px; height: 24px; padding: 4px;}
  .onPagingLink i {font-size: 10px;}
}

/* subNav */
.onSubNav { display: flex; flex-wrap: wrap;}
.onSubNav > li { position: relative; margin-right: 5px; font-size: 15px; font-weight: 400; color: #888888; display: flex; align-items: center; justify-content: flex-start; }
.onSubNav > li.onSubNavArrow {font-size: 10px;}
.onSubNav > li:last-child { font-weight: 600; color: #333;}

/* swiper */
.swiper-button-next, .swiper-button-prev {color: #fff;}
.swiper-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* summernote */
.note-editable { background-color: #fff }