@charset "utf-8";
/*
*   name : default
*   date : 2024. 07. 24.
*	사이트에 맞게 필요없는 항목부터 지운 뒤 변경해서 사용 요망.
*/

/* 접근성특화 */
html{scroll-behavior: smooth;}

.accessibility-wrapper{position: fixed; top:20%; left: -36rem; width: 100%; max-width: 36rem; transition: all 0.4s; z-index:100000; }
.accessibility-wrapper .menu-handle{position: absolute; right: -2rem; top: 2rem;width: 4.5rem; height: 4.5rem; background: #000; border-radius: 1rem; display: flex; align-items: center; justify-content: center;}
.accessibility-wrapper .menu-handle a{width: 100%; height: 100%; display: flex;  align-items: center; justify-content: center;}
.accessibility-wrapper .menu-handle .btn-a11y-open{flex-direction: column;}
.accessibility-wrapper .menu-handle .logo_e{display:flex;width: 4rem;height: 4rem;background: url(../img/default/logo_letsb.svg)no-repeat center center / 4rem;}
.accessibility-wrapper .menu-handle .icon{display:flex; width:2rem;height:2rem;background:url(../img/default/dubble_arrow.svg)no-repeat center center;}
.accessibility-wrapper .menu-handle .txt{color: #fff; writing-mode: vertical-lr; font-family: var(--font-sebang); font-size: 1.4rem;}
.accessibility-wrapper .menu-handle.off{display:none;}
.accessibility-wrapper .menu-handle.on{width: 6rem; height: auto; min-height:10rem; right: -5.5rem; padding: 1rem 0;}
.a11y-menu{background:var(--bg-gray02);border-radius: 3rem; padding: 4rem;box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.a11y-htitle {font-family:var(--font-sebang); font-size:2rem; margin-bottom:2.5rem;}
.a11y-menu .feature-section + .feature-section {margin-top: 2rem;}
.a11y-menu .feature-section .a11y-tit {background:#000; color:#fff; font-weight: 500; padding: 8px 15px; border-radius: 10px; margin-bottom: 18px;}
.a11y-menu .options-grid {display: flex; justify-content: space-around; align-items: flex-start; text-align: center;}
.a11y-menu .option-item { display: flex; flex-direction: column; align-items: center; flex-basis:8rem;}
.a11y-menu .label-text {font-size: 1.5rem; color: var(--color-gray); margin-top: 1rem;}
.a11y-menu .toggle-switch {position: relative; display: inline-block; width: 5.5rem; height: 3rem;}
.a11y-menu .toggle-switch input {opacity: 0; width: 0; height: 0;}
.a11y-menu .tg-slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background:var(--line-gray);  -webkit-transition: .4s; transition: .4s; border-radius: 3rem;}
.a11y-menu .tg-slider:before{position: absolute; content: ""; height: 2.4rem; width: 2.4rem; left: 3px; bottom: 3px; background: var(--color-light); -webkit-transition: .4s; transition: .4s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.a11y-menu input:checked + .tg-slider {background: #d92a2a;}
.a11y-menu input:checked + .tg-slider:before {background:#fff; -webkit-transform: translateX(2.6rem); -ms-transform: translateX(2.6rem); transform: translateX(2.6rem);}
.accessibility-wrapper.active{left:0;}
.accessibility-wrapper.active .menu-handle.off{display:flex;}
.accessibility-wrapper.active .menu-handle.on{display:none;}
#a11y-guide-line {position: fixed; top:-9999px; left: 0; right: 0; width:100%; height: 0.4rem; background: var(--color-p03); opacity: 0; pointer-events: none; z-index: 99999; transition: transform 0.08s linear, opacity 0.2s;}
html.a11y-guide #a11y-guide-line {opacity: 1;}
#a11y-mask-band {position: fixed; left: 0; right: 0; height: 20rem; box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; z-index: 99998; top: 0; transform: translateY(0); transition: opacity 0.2s;}
html.a11y-mask #a11y-mask-band {opacity: 1;}
#a11y-text-magnifier{position: fixed;top: 10px;left: 50%; max-width: 80%;padding: 0.5rem 1rem;background: #fff;border: 1px solid #000;font-size: 2rem;line-height: 1.4;font-weight: 500;color: #000;box-shadow: 0 4px 12px rgba(0,0,0,0.25);z-index: 2147483647;pointer-events: none;display: none;white-space:normal;word-break: keep-all; word-wrap:break-word;}
html.a11y-area-all header,
html.a11y-area-all nav,
html.a11y-area-all main,
html.a11y-area-all aside,
html.a11y-area-all footer,
html.a11y-area-all section,
html.a11y-area-all a,
html.a11y-area-all button{outline: 2px dashed var(--color-p03); outline-offset: 2px;}
html.a11y-area-select a:hover,
html.a11y-area-select button:hover,
html.a11y-area-select [role="button"]:hover,
html.a11y-area-select *:focus {outline: 2px solid var(--color-p03); outline-offset: 2px;}
html.a11y-grayscale {filter: grayscale(1);}
html.a11y-grayscale img,
html.a11y-grayscale video {filter: grayscale(1);}
.accessibility-wrapper.en .a11y-menu .label-text{word-break: break-all;}

@media screen and (max-width:1200px){
	.accessibility-wrapper{display:none;}	
}



/* skip navigation */
#skipNavi {height:0;}
#skipNavi .skipLink {position:absolute; top:-1000px; left:-1000px; overflow:hidden; z-index:5000;}
#skipNavi .skipLink:focus, #skipNavi .skipLink:active {top:0; left:0; width:100%; padding:10px 20px; background:#1a4bed; color:#ffffff; text-align:center;}

/* -webkit-scrollbar : scrollbar 적용하고자 하는 곳에 추가 */

::-webkit-scrollbar {width: 6px;height: 3px;}
::-webkit-scrollbar-thumb {background: rgba(0,0,0,.3); background-clip: padding-box;}
::-webkit-scrollbar-track { background: transparent;}

/* all(:root) */
:root {
	
  --font-sebang: 'SebangGothic', sans-serif;
  
  /* 브랜드 컬러 */
  --color-red: #DE363C;
  --color-dark-red: #B72126;
  --color-light-red: #FFF6F6;
  --color-green: #6FBA2C;
  --color-dark-green: #177E3F;

  /* 흑백 계열 */
  --color-black: #000000;
  --color-dark: #555555;
  --color-gray: #777777;
  --color-light: #999999;
  --color-white: #ffffff;
  
  --bg-gray:#eeeeee;
  --bg-gray01:#f3f3f3;
  --bg-gray02:#f7f7f7;
  --line-gray:#dddddd;
  
  
  /*분류포인트*/
  --color-p01:#177E3F;
  --color-p02:#6E19C9;
  --color-p03:#2F5AE9;
  --color-p04:#E0591F;
  --color-p05:#E40E8F;
  --color-p06:#505B54;
  --color-p07:#19C3C9;
  --color-p08:#FF5DAB;
  --color-p09:#6D64BE;
  --color-p10:#FFB412;
  
  
}

a:focus-visible {outline: 2px dashed #000; outline-offset: 1px;}
button:focus-visible {outline: 2px dashed #000; outline-offset: 1px;}
input[type="text"]:focus-visible {outline: 2px dashed #000; outline-offset: -2px;}
select:focus-visible {outline: 2px dashed #000; outline-offset: -2px;}
textarea:focus-visible {outline: 2px dashed #000; outline-offset: -2px;}

/* info text */
.info-ex {text-indent: -2.5rem;padding-left: 2.5rem;font-size: 1.6rem;line-height:160%;color: var(--color-red);}
.info-ex:before {content:"";display:inline-block;width:2.2rem;height:2.2rem;margin-right: 0.5rem;vertical-align:middle;text-align:center;text-indent:0;background:url(../img/default/info-ex.svg) no-repeat center center;}
.info-ex-box {border-radius: 10px;background-color:var(--bg-gray);padding:2rem 2.8rem;}

/* radio_checkbox */
.radio-group{margin-top: 2rem; display: flex; align-items: center; gap: 2rem;}
.radio-group .radio{display: flex; align-items: center; gap: 0.5rem;}
.radio-group .radio input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;}
.radio-group .checkmark{display: block; width: 20px; height: 20px; background: url(../img/default/icon_radio.svg) no-repeat; background-position: 0 0;}
.radio-group .radio input[type="radio"]:checked + .checkmark {background-position: -19px 0; }
.radio-group .radio input[type="radio"]:checked:disabled + .checkmark {background-position: -76px 0; cursor: not-allowed;}
.radio-group .radio input[type="radio"]:disabled + .checkmark {background-position: -57px 0; cursor: not-allowed;}
.radio-group .radio input[type="radio"]:focus + .checkmark {outline: 2px dashed #000; outline-offset: 2px;}

.checkbox-group{margin-top: 2rem; display: flex; align-items: center; gap: 2rem;}
.checkbox-group .check{display: flex; align-items: center; gap: 0.5rem;}
.checkbox-group .check input[type="checkbox"] {position: absolute; opacity: 0; width: 0; height: 0;}
.checkbox-group .checkmark{display: block; width: 20px; height: 20px; background: url(../img/default/icon_checkbox.svg) no-repeat; background-position: 0 0;}
.checkbox-group .check input[type="checkbox"]:checked + .checkmark {background-position: -19px 0; }
.checkbox-group .check input[type="checkbox"]:checked:disabled + .checkmark {background-position: -76px 0; cursor: not-allowed;}
.checkbox-group .check input[type="checkbox"]:disabled + .checkmark {background-position: -57px 0; cursor: not-allowed;}
.checkbox-group .check input[type="checkbox"]:focus + .checkmark {outline: 2px dashed #000; outline-offset: 2px;}


/* dropdown */
.dropdown {position: relative;}
.dropdown .arrow{width:2rem; height:2rem; background:url(../img/default/dropdown_arrow.svg)no-repeat center center; transition:all 0.2s;}
.dropdown-btn[aria-expanded="true"] .arrow{transform: rotate(180deg);}
.dropdown-list.show {display: block;}

textarea{width: 100%; resize: none; padding:1.5rem 2rem; max-height: 30rem; border: 1px solid var(--line-gray); border-radius: 0.5rem;}
.file-box {position:relative; display: flex; align-items: center; gap:1rem; flex-wrap: wrap;}
.fileLstWrap + .fileLstWrap{margin-top:1rem;}
.file-box input[type="file"] {z-index: 2;position: absolute; inset: 0; width: 9rem; height: 100%; opacity: 0; cursor: pointer;}
.file-label {z-index: 1;display: inline-block;border: 1px solid #000;padding: 0.8rem 1.5rem;background: #000;color: #fff;cursor: pointer;transition: 0.2s;}
.file-name {line-height:1.2; word-break: break-word;}
.file-box:focus-within .file-label,
.file-box input[type="file"]:focus-visible,
.file-box .file-label:focus-visible {outline: 2px dashed #000; outline-offset: 1px;}
.file-box .file-del{display:block; width:2rem; height:2rem; background:url(../img/default/icon_round_del.svg)no-repeat center center / 2rem;}


/*레이어팝업*/
.layer_popup[hidden] {display: none;}
.layer_popup {position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1.5rem;}
.layer-wrap {position: relative;width: 100%;padding: 2.5rem;max-width: 50rem;margin: 3rem auto;background-color: #fff;border-radius: 1rem;overflow-y: auto;max-height: 80vh;}
.layer-wrap .title {font-size: 1.8rem; font-weight: 600; color: #000;}
.layer-wrap .graybox{padding:1.5rem !important;}
.close-layer {position: absolute; top: 0; right: 0; cursor: pointer; background: #000 url(../img/default/icon_close.svg) no-repeat center center / 2.4rem; width: 4.5rem; height: 4.5rem; border-bottom-left-radius: 1rem;}


/* common */
.a11y, .blind {width:1px; height:1px; overflow:hidden; position:absolute; top:-9999em; left:-9999em; display:block; text-indent:-9999em; font-size:0 !important; line-height:0 !important;}
.pc_block {display:block;}
.m_block {display:none;}

/* font, weight */
.normal {font-weight:400;}
.bold {font-weight:700;}

/* list */
.dotList li {text-indent:-7px;padding-left:7px;line-height:160%;}
.dotList li + li {margin-top:1.5rem;}
.dotList li * {text-indent:0;}
.dotList li:before {content:"";display:inline-block;width:2px;height:2px;margin-right:5px;background:#222;vertical-align:middle;}

.dasList li {text-indent:-10px;padding-left:10px;line-height:160%;}
.dasList li + li {margin-top:1.5rem;}
.dasList li * {text-indent:0;}
.dasList li:before {content:"";display:inline-block;width:4px;height:1px;margin-right:6px;background:#222;vertical-align:middle;}

.dotList-rec li {padding-left:1.4rem;line-height:160%;font-size:2rem;position:relative;}
.dotList-rec li + li {margin-top:1.5rem;}
.dotList-rec li:before {content:"";display:block;width:0.4rem;height:0.4rem;margin-right:1rem;background:var(--bg-blue);position:absolute;top:0.7em;left:0;}

.dotList-circle li {padding-left:1.4rem;line-height:160%;font-size:2rem;position:relative;}
.dotList-circle li + li {margin-top:1.5rem;}
.dotList-circle li:before {content:"";display:block;width:0.5rem;height:0.5rem;background:var(--bg-blue);border-radius:50%;position:absolute;top:0.7em;left:0;}

@media screen and (max-width:768px){
	
	.dotList-rec li {font-size:1.6rem;}
	.dotList-rec li + li {margin-top:1.0rem;}
	
}



/* point_color (background) */
.point_pb_01 {background:#0067db;}
.point_pb_02 {background:#003399;}
.point_sb_01 {background:#66a3ef;}
.point_sb_02 {background:#15d886;}
.point_sb_03 {background:#78d400;}
.point_sb_04 {background:#38a500;}
.point_sb_05 {background:#f8f9fa;}

/* point_color (color) */
.point_pc_01 {color:#0067db !important;}
.point_pc_02 {color:#003399 !important;}
.point_sc_01 {color:#66a3ef !important;}
.point_sc_02 {color:#15d886 !important;}
.point_sc_03 {color:#78d400 !important;}
.point_sc_04 {color:#38a500 !important;}


/* ui-datepicker */
.datepicker {background:url(../img/Layout/ico_calendar.svg) right 1.0rem center no-repeat; background-size:18px 18px; background-color:#ffffff;}
.datepicker_Ym {background:url(../img/Layout/ico_calendar.svg) right 1.0rem center no-repeat; background-size:18px 18px; background-color:#ffffff;}
#ui-datepicker-div {box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); border:none; padding:0px; border-radius:5px; width:auto;background:#fff !important;font-family:'Pretendard',sans-serif;}
.ui-datepicker-title {font-size:16px;}
.ui-datepicker-header {background: #333 !important;border:none !important;border-radius:5px 5px 0 0 !important;padding:12px 12px 0 10px !important;color:#fff !important;}
.ui-datepicker-header select {width:43% !important;font-size:14px !important;background:url(../img/default/ico_select.svg) no-repeat right 10px center rgba(255, 255, 255, 0.2);border:none; vertical-align:middle; height:30px; margin:0 2px !important; color:#fff; border-radius:3px !important; padding:0 20px 0 10px !important;}
.ui-datepicker-header select option {color:#333;}
.ui-datepicker-month {color:#fff; margin-left:5px; vertical-align:middle;}
.ui-datepicker-calendar thead {background:#333; color:#fff;}
.ui-datepicker-calendar thead th {padding:12px; color:rgba(255, 255, 255, 0.8);font-size:13px !important;}
.ui-datepicker-calendar thead th span {color:rgba(255, 255, 255, 0.8);}
.ui-datepicker-calendar td {text-align:center;}
.ui-datepicker-calendar td a {font-size:15px;width:30px;height:30px;line-height:26px;margin:0 auto;border:none !important; background:none !important; text-align:center !important; color:#333 !important; border-radius:50%;font-weight:bold !important;text-decoration:none !important;}
.ui-datepicker-calendar td span {font-size:15px;width:30px;height:30px;line-height:26px;margin:0 auto;border:none !important; background:none !important; text-align:center !important; color:#333 !important; border-radius:50%;font-weight:bold !important;text-decoration:none !important;}
.ui-datepicker-calendar td.ui-datepicker-current-day a {background:#333 !important; color:#fff !important;}
.ui-datepicker-calendar thead th span {display:block;}
.ui-datepicker-calendar thead th:nth-child(1) {padding-left:12px;}
.ui-datepicker-calendar thead th:nth-child(7) {padding-right:12px;}
.ui-datepicker-calendar tbody tr:first-child td {padding-top:12px;}
.ui-datepicker-calendar tbody tr:last-child td {padding-bottom:5px;}
.ui-datepicker-calendar td:nth-child(7n+1) {padding-left:12px;}
.ui-datepicker-calendar td:nth-child(7n) {padding-right:12px;}
.ui-datepicker-prev {width:auto !important;height:auto !important;top:12px !important;left:7px !important;cursor:pointer;}
.ui-datepicker-next {width:auto !important;height:auto !important;top:12px !important;right:7px !important;cursor:pointer;}
.ui-datepicker-prev span {position:static !important;width:30px;height:30px;margin:0 !important;background:url(/share/cmm/img/Default/datepicker_mprev.svg) no-repeat center center !important;transition:all 0.3s;}
.ui-datepicker-next span {position:static !important;width:30px;height:30px;margin:0 !important;background:url(/share/cmm/img/Default/datepicker_mnext.svg) no-repeat center center !important;transition:all 0.3s;}
.ui-datepicker-calendar td a:hover,
.ui-datepicker-calendar td a:focus {background:#333 !important;color:#fff !important;}
.ui-datepicker-prev:hover,
.ui-datepicker-prev:focus,
.ui-datepicker-next:hover,
.ui-datepicker-next:focus {background:none !important; border:none !important;}
.ui-datepicker-buttonpane button {border:1px solid #ddd !important;color:#333 !important;font-weight:700 !important;opacity:1 !important;font-size:1.3rem;font-family:'Pretendard',sans-serif;}
.ui-datepicker-calendar td.ui-datepicker-today a {background:#f2f2f2 !important; color:#333 !important;}




@media screen and (max-width:640px){
	.dropdown-btn{min-width: 14rem; padding: 1rem 1.5rem;}

}

@media screen and (max-width:480px){
	body{word-break: break-all;}
	
	.file-label{flex: 1; text-align: center;}
	.file-name{flex: 1 1 100%;}
}