/* 최근수정일 25.04.02 */

/* 2025.01.28 ldh 폰트 사이즈 및 패딩간격 */

/* 패딩 */
/* =================== */
/* pc           mobile */
/* =================== */
/* 160px        100px */
/* 130px        90px */
/* 120px        90px */
/* 110px        90px */
/* 90px         60px */
/* 80px         50px */
/* 75px         50px */
/* 70px         50px */
/* 60px         40px */
/* 50px         30px */
/* 40px         25px */
/* 35px         25px */
/* 30px         20px */
/* 26px         20px */
/* 25px         20px */
/* 20px         20px */
/* 15px         15px */
/* 10px         10px */
/* =================== */

/* 폰트 사이즈 */
/* =================== */
/* pc           mobile */
/* =================== */
/* 60px         40px */
/* 46px         24px */
/* 42px         24px */
/* 40px         24px */
/* 36px         22px */
/* 34px         22px */
/* 30px         20px */
/* 28px         20px */
/* 24px         20px */
/* 22px         18px */
/* 21px         18px */
/* 20px         16px */
/* 18px         16px */
/* 17px         16px */
/* 16px         16px */
/* 15px         15px */
/* 14px         14px */
/* 13px         13px */
/* =================== */

/* 박스 레이아웃 좌우 패딩은 무조건 15px로 잡음 */
/* 대체로 이렇게 정의했지만 예외 경우 있을 수 있습니다.*/

/*layout*/
body {min-width: 1280px}
.full_container .inner_container {max-width: 1200px; margin: 0 auto}
img {max-width: 100%}

.mo_only {display:none!important}

/*color*/
:root {
    --white: #fff;
    --black: #222;
    --light-blue: #c2d7ed;
    --light-blue2: #e9f1f9;
    --light-blue3: #d1e1f3;
    --mid-blue: #75b7ff;
    --bg-gray: #414141;
    --bg-gray2: #7f7f7f;
    --bg-gray3: #c6c6c6;
    --bg-gray4: #F5F7F8;
    --input_bg: #efefef;
    --font: #626262;
    --key-color: #004ea2;
    --key-color2: #3787dd;
    --key-color3: #668db8;
    --txt-hover: #57a8ff;
    --placeholder: #848383;
    --placeholder2: #a8a6a6;
    --line : #c9c9c9;
    --line2 : #D9DCDF;
    --line3 : #dddddd;
    --line4 : #d9d9d9;
    --icon : #4C90DA;
    --caution : #FF3C3C;
}

/*text*/
p, a{color: var(--font)}

.f_12 {font-size: 12px}
.f_13 {font-size: 13px}
.f_14 {font-size: 14px}
.f_15 {font-size: 15px}
.f_16 {font-size: 16px}
.f_17 {font-size: 17px}
.f_18 {font-size: 18px}
.f_19 {font-size: 19px}
.f_20 {font-size: 20px}
.f_21 {font-size: 21px}
.f_22 {font-size: 22px}
.f_23 {font-size: 23px}
.f_24 {font-size: 24px}
.f_26 {font-size: 26px}
.f_27 {font-size: 27px}
.f_28 {font-size: 28px}
.f_29 {font-size: 29px}
.f_31 {font-size: 31px}
.f_34 {font-size: 34px}
.f_36 {font-size: 36px}
.f_37 {font-size: 37px}
.f_40 {font-size: 40px}
.f_42 {font-size: 42px}
.f_45 {font-size: 45px}
.f_60 {font-size: 60px}
.f_62 {font-size: 62px}
.f_70 {font-size: 70px}

.fw_300 {font-weight: 300}
.fw_400 {font-weight: 400}
.fw_500 {font-weight: 500}
.fw_600 {font-weight: 600}
.fw_700 {font-weight: 700}

.txc_key {color: var(--key-color)}
.txc_key2 {color: var(--key-color2)}
.txc_bk {color: var(--black)}
.txc_mid_blue {color: var(--mid-blue)}
.txc_font {color: var(--font)}

.ls_05 {letter-spacing: -0.5px}
.ls_1 {letter-spacing: -1px}

.lh_1dot3 {line-height: 1.3}
.lh_1dot4 {line-height: 1.4}
.lh_1dot5 {line-height: 1.5}
.lh_1dot6 {line-height: 1.6}
.lh_1dot7 {line-height: 1.7}

.gmk_bold {font-family: 'Gmarket Sans TTF'; font-weight: bold}
.gmk_medi {font-family: 'Gmarket Sans TTF'; font-weight: 500}
.gmk_light {font-family: 'Gmarket Sans TTF'; font-weight: 300}

.center {text-align: center}

.word_keep {word-break: keep-all}

.notion_text {display: flex; align-items: center; gap: 0 6px}
.notion_text::before {content: ''; display: block; width: 20px; height: 20px; background: url(../img/sub/icon_notion.svg) no-repeat center / cover; flex-shrink: 0}
.notion_text.f_16 {align-items: flex-start}
.notion_text.f_16.lh_1dot7::before {margin-top: 3px}
.notion_text.line_2 {align-items: flex-start}

.caution_txt {color: var(--caution)}

.white_pre {white-space: pre-wrap}

/*icon*/
.mask,
.after_mask::after,
.before_mask::before {-webkit-mask-repeat: no-repeat; -webkit-mask-position: center}

.mask-cover,
.after-mask-cover::after,
.before-mask-cover::before {-webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: cover}

.ico-arrow,
.after-ico-arrow::after,
.before-ico-arrow::before {-webkit-mask-image: url(../img/common/arrow_icon.png)}

.ico-search,
.after-ico-search::after,
.before-ico-search::before {-webkit-mask-image: url(../img/common/sch_icon.png)}

.ico-tel,
.after-ico-tel::after,
.before-ico-tel::before {-webkit-mask-image: url(../img/common/tel_icon.png)}

.ico-notice,
.after-ico-notice::after,
.before-ico-notice::before {-webkit-mask-image: url(../img/common/notice_icon.png)}

.ico-time,
.after-ico-time::after,
.before-ico-time::before {-webkit-mask-image: url(../img/common/icon_time.png)}

.ico-plus,
.after-ico-plus::after,
.before-ico-plus::before {-webkit-mask-image: url(../img/common/icon_plus.png)}

.ico-home,
.after-ico-home::after,
.before-ico-home::before {-webkit-mask-image: url(../img/common/home_icon.svg)}

.ico-bread,
.after-ico-bread::after,
.before-ico-bread::before {-webkit-mask-image: url(../img/common/bread_icon.svg)}

.ico-check,
.after-ico-check::after,
.before-ico-check::before {-webkit-mask-image: url(../img/common/icon_chk_big.svg)}

.ico-select,
.after-ico-select::after,
.before-ico-select::before {-webkit-mask-image: url(../img/common/icon_select.svg)}

.ico-download,
.after-ico-download::after,
.before-ico-download::before {-webkit-mask-image: url(../img/common/icon_download.svg)}

.ico-close,
.after-ico-close::after,
.before-ico-close::before {-webkit-mask-image: url(../img/common/close_icon.svg)}

.ico-prev,
.after-ico-prev::after,
.before-ico-prev::before {-webkit-mask-image: url(../img/common/icon_prev.svg)}

.ico-next,
.after-ico-next::after,
.before-ico-next::before {-webkit-mask-image: url(../img/common/icon_next.svg)}

.ico-calender,
.after-ico-calender::after,
.before-ico-calender::before {-webkit-mask-image: url(../img/sub/icon_calender.svg)}

.ico-calender-fill,
.after-ico-calender-fill::after,
.before-ico-calender-fill::before {-webkit-mask-image: url(../img/common/icon_calender_fill.svg)}

.ico-retire,
.after-ico-retire::after,
.before-ico-retire::before {-webkit-mask-image: url(../img/common/icon_retire.svg)}

.after_center::after {left: 50%; top: 50%; transform: translate(-50%, -50%)}

/*padding*/
.mgt_5 {margin-top: 5px}
.mgt_10 {margin-top: 10px}
.mgt_15 {margin-top: 15px}
.mgt_20 {margin-top: 20px}
.mgt_25 {margin-top: 25px}
.mgt_30 {margin-top: 30px}
.mgt_40 {margin-top: 40px}
.mgt_50 {margin-top: 50px}
.mgt_70 {margin-top: 70px}
.mgt_80 {margin-top: 80px}

.mgb_5 {margin-bottom: 5px}
.mgb_10 {margin-bottom: 10px}
.mgb_15 {margin-bottom: 15px}
.mgb_20 {margin-bottom: 20px}
.mgb_40 {margin-bottom: 40px}
.mgb_30 {margin-bottom: 30px}
.mgb_50 {margin-bottom: 50px}
.mgb_80 {margin-bottom: 80px}

.mgl_20 {margin-left: 20px}

.mgr_5 {margin-right: 5px}
.mgr_10 {margin-right: 10px}
.mgr_15 {margin-right: 15px}

.mgtb_15 {margin: 15px 0}
.mgtb_20 {margin: 20px 0}
.mgtb_30 {margin: 30px 0}
.mgtb_40 {margin: 40px 0}
.mgtb_50 {margin: 50px 0}
.mgtb_70 {margin: 70px 0}

.pdt_0 {padding-top: 0}
.pdt_5 {padding-top: 5px}
.pdt_10 {padding-top: 10px}
.pdt_15 {padding-top: 15px}
.pdt_20 {padding-top: 20px}
.pdt_25 {padding-top: 25px}
.pdt_30 {padding-top: 30px}
.pdt_35 {padding-top: 35px}
.pdt_40 {padding-top: 40px}
.pdt_45 {padding-top: 45px}
.pdt_50 {padding-top: 50px}
.pdt_55 {padding-top: 55px}
.pdt_60 {padding-top: 60px}
.pdt_70 {padding-top: 70px}
.pdt_75 {padding-top: 75px}
.pdt_80 {padding-top: 80px}
.pdt_120 {padding-top: 120px}
.pdt_130 {padding-top: 130px}
.pdt_195 {padding-top: 195px}

.pdb_10 {padding-bottom: 10px}
.pdb_15 {padding-bottom: 15px}
.pdb_20 {padding-bottom: 20px}
.pdb_25 {padding-bottom: 25px}
.pdb_30 {padding-bottom: 30px}
.pdb_35 {padding-bottom: 35px}
.pdb_40 {padding-bottom: 40px}
.pdb_50 {padding-bottom: 50px}
.pdb_60 {padding-bottom: 60px}
.pdb_70 {padding-bottom: 70px}
.pdb_80 {padding-bottom: 80px}
.pdb_90 {padding-bottom: 90px}
.pdb_195 {padding-bottom: 195px}
.pdb_100 {padding-bottom: 100px}
.pdb_120 {padding-bottom: 120px}
.pdb_160 {padding-bottom: 160px}

.pdl_10 {padding-left: 10px}
.pdl_20 {padding-left: 20px}
.pdl_25 {padding-left: 25px}
.pdl_30 {padding-left: 30px}
.pdl_35 {padding-left: 35px}
.pdl_40 {padding-left: 40px}
.pdl_50 {padding-left: 50px}
.pdl_60 {padding-left: 60px}
.pdl_80 {padding-left: 80px}
.pdl_100 {padding-left: 100px}
.pdl_140 {padding-left: 140px}

.pdr_10 {padding-right: 10px}
.pdr_15 {padding-right: 15px}
.pdr_20 {padding-right: 20px}
.pdr_25 {padding-right: 25px}
.pdr_30 {padding-right: 30px}
.pdr_35 {padding-right: 35px}
.pdr_40 {padding-right: 40px}
.pdr_50 {padding-right: 50px}
.pdr_60 {padding-right: 60px}
.pdr_100 {padding-right: 100px}
.pdr_140 {padding-right: 140px}

.pdlr_50 {padding: 0 50px}
.pdlr_70 {padding: 0 70px}
.pdlr_125 {padding: 0 125px}
.pdlr_85 {padding: 0 85px}

.pdtb_15 {padding: 15px 0}
.pdtb_20 {padding: 20px 0}
.pdtb_30 {padding: 30px 0}
.pdtb_40 {padding: 40px 0}
.pdtb_50 {padding: 50px 0}
.pdtb_60 {padding: 60px 0}
.pdtb_80 {padding: 80px 0}
.pdtb_90 {padding: 90px 0}
.pdtb_120 {padding: 120px 0}

.pd_10 {padding: 10px}
.pd_15 {padding: 15px}
.pd_20 {padding: 20px}
.pd_25 {padding: 25px}
.pd_35 {padding: 35px}
.pd_40 {padding: 40px}
.pd_50 {padding: 50px}

/****module****/

/*module - ellipsis*/
[class*="clamp"] {width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal}
[class*="clamp"][class*="_2"]{line-clamp: 2; -webkit-line-clamp: 2}
[class*="clamp"][class*="_3"]{line-clamp: 2; -webkit-line-clamp: 3}
[class*="clamp"][class*="_single"] {white-space:nowrap; display: block}

/*module - focus*/
*:focus-visible {
    outline: 2px dashed var(--key-color2)
}

/*module - form*/

/*input*/
.input_basic_col2 {display: flex; gap:0 10px}
.input_basic_col2 > .item {}
[class*="input_basic_"][class*="wd_100pr"] .item {width: 100%}


.input_basic {border-radius: 6px; border: 1px solid var(--line3); padding: 0 15px; height: 44px; width: 100%}
.input_basic::placeholder {color: #bababa}
.input_basic::-webkit-input-placeholder {color: #bababa}
.input_basic::-moz-placeholder {color: #bababa}
.input_basic::-ms-input-placeholder {color: #bababa}

.input_basic.wd_200 {width: 200px}
.input_basic.wd_280 {width: 280px}
.input_basic.wd_135 {width: 135px}
.input_basic.wd_138 {width: 138px}

.input_basic:read-only {background: var(--input_bg); color: var(--placeholder2)}

.les_label + .input_basic {margin-top: 10px}

/*input datapickler*/
.input_basic.datepicker {background: var(--white) url(../img/sub/icon_calender.svg) no-repeat calc(100% - 15px) 50% / 16px; padding: 0 35px 0 15px}

/*checkbox & radio*/
.chk_wrap {display: flex; gap: 0 20px}
.chk_wrap .chk_item {position: relative; display: flex; align-items: center; gap: 0 8px}
.chk_wrap .chk_item input[type="checkbox"],
.chk_wrap .chk_item input[type="radio"] {position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0}
.chk_wrap .chk_item label {position: relative; display: flex; align-items: center; gap: 0 8px; cursor: pointer; transition: all .2s}
.chk_wrap .chk_item label::before{content:''; flex-shrink: 0; display: block; width: 18px; height: 18px; border-radius: 3px; background: var(--white); border: 1px solid var(--line4)}
.chk_wrap .chk_item input[type="radio"] + label::before {border-radius: 50%}
.chk_wrap .chk_item:hover label {color: var(--key-color)}
.chk_wrap .chk_item input[type="checkbox"]:checked + label::before {border: none; background: var(--key-color) url(../img/common/icon_chk.svg) no-repeat center / 14px}
.chk_wrap .chk_item input[type="radio"]:checked + label::before {border: 1px solid var(--key-color)}
.chk_wrap .chk_item input[type="radio"]:checked + label::after {content: ''; width: 10px; height: 10px; background: var(--key-color); display: block; border-radius: 50%; position: absolute; left: 4px; top: 50%; transform: translateY(-50%)}
.chk_wrap .chk_item input:focus-visible + label {outline: 2px dashed var(--key-color2)}

.chk_wrap.type_circle .chk_item input[type="checkbox"] + label::before {border-radius: 50%}

.chk_wrap.gap10 {gap:15px 10px}
.chk_wrap.gap20 {gap:15px 20px}
.chk_wrap.gap30 {gap:15px 30px}
.chk_wrap.grid4 {display: grid; grid-template-columns: repeat(4, 1fr)}
.chk_wrap.grid5 {display: grid; grid-template-columns: repeat(5, 1fr)}
.chk_wrap.grid9 {display: grid; grid-template-columns: repeat(8, 1fr)}
.chk_wrap[class*="grid"] .chk_item label{white-space: nowrap}

.chk_wrap.center {justify-content: center}

/*checkbox & radio box type*/
.box_chk_wrap {display: grid; gap: 4px}
.box_chk_wrap.col4 {grid-template-columns: repeat(4, 1fr)}
.box_chk_wrap.col3 {grid-template-columns: repeat(3, 1fr)}
.box_chk_wrap .box_chk {position: relative; height: 38px}
.box_chk_wrap .box_chk input[type="checkbox"],
.box_chk_wrap .box_chk input[type="radio"] {position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0}
.box_chk_wrap .box_chk label {transition: all .2s; border-radius: 5px; background: var(--bg-gray4); display: flex; align-items: center; padding-left: 48px; cursor: pointer; width: 100%; height: 100%; position: relative}
.box_chk_wrap .box_chk label::before {content: ''; display: block; width: 18px; height: 18px; background: var(--white); border: 1px solid #d9d9d9; border-radius: 50%; position: absolute; left: 20px; top: 50%; transform: translateY(-50%)}
.box_chk_wrap .box_chk label:hover,
.box_chk_wrap .box_chk input:checked + label {background: var(--mid-blue); color: var(--white)}
.box_chk_wrap .box_chk label:hover::before,
.box_chk_wrap .box_chk input:checked + label::before {border: 1px solid var(--key-color)}
.box_chk_wrap .box_chk input:checked + label::after {content: ''; display: block; width: 10px; height: 10px; background: var(--key-color); border-radius: 50%; position: absolute; left: 24px; top: 50%; transform: translateY(-50%)}

.box_chk_wrap.style_tag {display: flex; flex-wrap: wrap; gap: 4px;}
.box_chk_wrap.style_tag .box_chk label {transition: all .2s; border-radius: 5px; background: var(--bg-gray4); display: flex; align-items: center; cursor: pointer; width: 100%; height: 100%; position: relative; padding: 0 10px;}
.box_chk_wrap.style_tag .box_chk label::before{display:none;}
.box_chk_wrap.style_tag .box_chk input:checked + label::after{display:none;}
.box_chk_wrap.style_tag .box_chk label:hover {background: var(--mid-blue);}

/*select*/
.select_basic {border-radius: 6px; border: 1px solid var(--line3); height: 44px; width: 100%}
.select_basic.wd_100 {width: 100px}
.select_basic.wd_125 {width: 125px}
.select_basic.wd_130 {width: 130px}
.select_basic.wd_150 {width: 150px}
.select_basic.wd_200 {width: 200px}
.select_basic.wd_280 {width: 280px}
.select_basic select {width: 100%; border-radius: 6px; height: 100%; padding: 0 15px; border: none; appearance: none; -webkit-appearance: none; background: var(--white) url(../img/common/icon_select.svg) no-repeat calc(100% - 15px) 50% / 10px;}
.select_basic select:focus {outline: 2px dashed var(--key-color2)}

/*textarea*/
.basic_textArea {border-radius: 6px; border: 1px solid var(--line3); padding: 10px 15px; height: 100px; width: 100%; resize: none}
.basic_textArea::placeholder {color: #bababa}
.basic_textArea::-webkit-input-placeholder {color: #bababa}
.basic_textArea::-moz-placeholder {color: #bababa}
.basic_textArea::-ms-input-placeholder {color: #bababa}

.basic_textArea.h_370 {height:370px}

/*file upload*/
.filebox {position: relative; display: flex;}
.filebox label {margin:0!important;}
.filebox input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.filebox + .filebox {padding-top:10px;}
.filebox + .file_del {display:inline-block; padding-top:10px;}
.file_del + .filebox {padding-top:10px;}

/* named upload */
.filebox .upload-name {display: block; padding: 0 15px; line-height: normal; vertical-align: middle; background-color: transparent; border: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--gray50); width: calc(100% - 115px); text-overflow: ellipsis;}

/*button*/

/*버튼 감싸기*/
[class*="butn_col"] {display: flex; gap:0 10px}
[class*="butn_col"][class*="center"] {justify-content: center}
[class*="butn_col"][class*="gap_5"] {gap: 0 5px}

[class*="butn_row"] {display: flex; gap:10px 0; flex-direction: column}
[class*="butn_row"][class*="center"] {align-items: center}
[class*="butn_row"][class*="gap_5"] {gap: 5px 0}

/*버튼 스타일 기본*/
[class*="butn_style"] {text-align: center; display: block; width: 100%; transition: all .2s; cursor: pointer; height: 50px; line-height: 50px; border: none; border-radius: 6px}

/*버튼 높이 스타일*/
[class*="butn_style"][class*="round"] {border-radius:50px}
[class*="butn_style"][class*="short"] {height: 32px; line-height: 32px}
[class*="butn_style"][class*="short44"] {height: 44px; line-height: 44px}
[class*="butn_style"][class*="short"][class*="round"] {border-radius: 32px}

/*버튼 넓이 스타일*/
[class*="butn_style"][class*="wd_"] {margin-left: auto; margin-right: auto}
[class*="butn_style"][class*="wd_44"] {width: 44px}
[class*="butn_style"][class*="wd_72"] {width: 72px}
[class*="butn_style"][class*="wd_80"] {width: 80px}
[class*="butn_style"][class*="wd_85"] {width: 85px}
[class*="butn_style"][class*="wd_90"] {width: 90px}
[class*="butn_style"][class*="wd_100"] {width: 100px}
[class*="butn_style"][class*="wd_110"] {width: 110px}
[class*="butn_style"][class*="wd_120"] {width: 120px}
[class*="butn_style"][class*="wd_115"] {width: 115px}
[class*="butn_style"][class*="wd_125"] {width: 125px}
[class*="butn_style"][class*="wd_130"] {width: 130px}
[class*="butn_style"][class*="wd_135"] {width: 135px}
[class*="butn_style"][class*="wd_138"] {width: 138px}
[class*="butn_style"][class*="wd_150"] {width: 150px}
[class*="butn_style"][class*="wd_175"] {width: 175px}
[class*="butn_style"][class*="wd_180"] {width: 180px}
[class*="butn_style"][class*="wd_200"] {width: 200px}
[class*="butn_style"][class*="wd_245"] {width: 245px}
[class*="butn_col"] [class*="wd_"] {margin-left: 0; margin-right: 0}

.butn_style1 {color: var(--white); background: var(--key-color)}
.butn_style1:hover {background: var(--key-color2)}
.butn_style2 {color: var(--key-color); background: #EDF6FF; box-shadow: 0 0 0px 1px #B1CCE9}
.butn_style2:hover {background: var(--light-blue)}
.butn_style3 {color: #767676; background: #F6F6F6; box-shadow: 0 0 0px 1px #ddd}
.butn_style3:hover {background: var(--input_bg)}
.butn_style5 {color: #767678; background: #ddd}
.butn_style5:hover {background:var(--bg-gray3)}
.butn_style6 {color: var(--black); background: transparent; box-shadow: 0 0 0px 1px var(--black)}
.butn_style6:hover {background: rgba(198,198,198, 0.3)}
.butn_style7 {color: var(--black); background: #eee; box-shadow: 0 0 0px 1px #666}
.butn_style7:hover {background: rgba(198,198,198, 0.1)}
.butn_style_form {color: var(--black); background: transparent; box-shadow: 0 0 0px 1px #666; width: 100px; height: 44px; line-height: 44px; background: #eee}
.butn_style_form:hover {background: #ddd}
.butn_style_caution {color: var(--caution); background: #ffe0e0;}

/*버튼 아이콘 포함*/
[class*="butn_style"].icon::before {content:''; display: inline-block; width: 16px; height: 16px; margin-right: 5px; margin-bottom: 2px; vertical-align: middle}
.butn_style1.icon::before {background: var(--white)}
.butn_style2.icon::before {background: var(--key-color)}
.butn_style3.icon::before {background: #767676}
.butn_style5.icon::before {background: #767678}
.butn_style6.icon::before {background: var(--black)}

/*버튼 예외 스타일*/
[class*="butn_style"].wrap_butn input[type="button"],
[class*="butn_style"].wrap_butn input[type="submit"] {display: block; width: 100%; height: 100%; border: none; background: transparent; cursor: pointer; text-indent:22px; position: relative; z-index: 2}
[class*="butn_style"].wrap_butn.icon::before {position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% - 15px), -50%); z-index: 1}
[class*="butn_style"].wrap_butn.icon.y_pos2::before {transform: translate(calc(-50% - 41px), -50%)}
[class*="butn_style"].wrap_butn {position: relative}

.butn_style1.wrap_butn input[type="button"],
.butn_style1.wrap_butn input[type="submit"] {color: var(--white)}
.butn_style2.wrap_butn input[type="button"],
.butn_style2.wrap_butn input[type="submit"] {color: var(--key-color)}

[class*="butn_style"].no_center {margin-left: 0; margin-right: 0}

[class*="butn_style"].inline {display: inline-block; width: auto; padding: 0 20px}

/*icon만 있는 버튼*/
[class*="butn_style"].text_hide,
[class*="butn_style"].text_hide > * {font-size: 0}
[class*="butn_style"].icon.text_hide:before {margin:0; transform: translate(-50%, -50%); width:18px; height:18px}

[class*="butn_style"][class*="ico-retire"].icon.text_hide:before {width:18px; height:20px}


/*module - scrollbar*/
.scrollbar_style::-webkit-scrollbar-track { border-radius: 10px; background: #e8e8e8}
.scrollbar_style::-webkit-scrollbar { width: 8px; background-color: #e8e8e8; border-radius: 10px}
.scrollbar_style::-webkit-scrollbar-thumb { border-radius: 10px; background: #7a7a7a}

.scrollbar_style_wrap > *::-webkit-scrollbar-track { border-radius: 10px; background: #e8e8e8}
.scrollbar_style_wrap > *::-webkit-scrollbar { width: 8px; background-color: #e8e8e8; border-radius: 10px}
.scrollbar_style_wrap > *::-webkit-scrollbar-thumb { border-radius: 10px; background: #7a7a7a}

/*module - divider*/
.divider {width: 100%; height: 1px; background: var(--line2)}
.divider.bk {background: var(--black)}

/*module - table layout*/
[class*="tbl_style"] {border-top: 1px solid #000}
[class*="tbl_style"].top_line_no {border-top: none}
[class*="tbl_style"].top_line_normal {border-top: 1px solid var(--line2)}
[class*="tbl_style"].border {border-left: 1px solid var(--line2); border-top: 1px solid var(--line2); border-right: 1px solid var(--line2)}
[class*="tbl_style"] .tbl_inner .th {background: var(--bg-gray4)}

[class*="tbl_style"][class*="1"] .tbl_inner .row {display: grid; grid-template-columns: 200px calc(100% - 200px)}
[class*="tbl_style"][class*="1"] .tbl_inner .th {min-height: 75px; height: auto; border-bottom: 1px solid var(--line2); display: flex; justify-content: center; align-items: center}
[class*="tbl_style"][class*="1"].th_center .tbl_inner .th {justify-content: center}
[class*="tbl_style"][class*="1"] .tbl_inner .th.thin {min-height:55px}
[class*="tbl_style"][class*="1"] .tbl_inner .th > label {display: block; line-height: 1.4}
[class*="tbl_style"][class*="1"] .tbl_inner .th > label.require span {position: relative}
[class*="tbl_style"][class*="1"] .tbl_inner .th > label.require span::after {content: ''; display: block; width: 7px; height: 7px; background: url(../img/common/icon_require.svg) no-repeat center / cover; position: absolute; right: -12px; top: 5px}
[class*="tbl_style"][class*="1"] .tbl_inner .td {padding: 15px; border-bottom: 1px solid var(--line2); display: flex; align-items: center}
[class*="tbl_style"][class*="1"] .tbl_inner .td.gap {gap: 0 10px}
[class*="tbl_style"][class*="1"] .tbl_inner .td.gap6 {gap: 0 6px}
[class*="tbl_style"][class*="1"] .tbl_inner .td ul.dot {padding: 15px 0}

[class*="tbl_style"][class*="1"] .tbl_inner .row.half { grid-template-columns: 200px calc(50% - 200px) 200px calc(50% - 200px)}
[class*="tbl_style"][class*="1"] .tbl_inner .row.half_3 {grid-template-columns: 200px calc((100% - 200px) / 2) calc((100% - 200px) / 2)}
[class*="tbl_style"][class*="1"] .tbl_inner .row.half_3 .td {border-right:1px solid var(--line2)}
[class*="tbl_style"][class*="1"] .tbl_inner .row.half_3 .td:last-child {border-right:none}

[class*="tbl_style"][class*="1"].small .tbl_inner .row {display: grid; grid-template-columns: 120px calc(100% - 120px)}
[class*="tbl_style"][class*="1"].small .tbl_inner .th {min-height: 60px}
[class*="tbl_style"][class*="1"].small .tbl_inner .td {padding: 8px 15px}

/*예외 스타일*/
[class*="tbl_style"][class*="1"] .tbl_inner .th.border_none {border-bottom:none}
[class*="tbl_style"][class*="1"] .tbl_inner .td.col {flex-direction: column; align-items: flex-start}
[class*="tbl_style"][class*="1"] .tbl_inner .td ul.dot.pdl_25.pdb_25 {padding: 15px 0 25px 25px}
[class*="tbl_style"][class*="1"] .tbl_inner .row.bd_top {border-top:1px solid var(--line2)}

[class*="tbl_style"][class*="1"] .tbl_inner .td.inner_tbl {padding:0; flex-direction: column; width: 100%; align-items: flex-start}
[class*="tbl_style"][class*="1"] .tbl_inner .td.inner_tbl .row {width: 100%}
[class*="tbl_style"][class*="1"] .tbl_inner .td.inner_tbl .row .th {background: var(--input_bg)}
[class*="tbl_style"][class*="1"] .tbl_inner .td.inner_tbl .row:last-child > * {border-bottom:none}

[class*="tbl_style"][class*="1"].small .tbl_inner .td .any_flex {width:100%}


/*module - tab*/
.tab_style ul {display: grid; background: var(--bg-gray4); border-radius: 15px 15px 0 0}
.tab_style.col_2 ul{grid-template-columns: repeat(2, 1fr)}
.tab_style.col_3 ul{grid-template-columns: repeat(3, 1fr)}
.tab_style.col_4 ul{grid-template-columns: repeat(4, 1fr)}
.tab_style ul li > a {transition: all .2s; display: block; min-height: 50px; height:100%; /*line-height: 50px;*/ display: flex; justify-content: center; align-items: center; text-align: center; color: #999; position: relative; border-radius: 15px 15px 0 0; word-break: keep-all; padding:4px 8px}
.tab_style ul li > a::after {content: ''; display: block; width: 100%; height: 1px; background: var(--line2); position: absolute; left: 0; bottom: 0}
.tab_style ul li > a.on {background: var(--white); border-left: 1px solid var(--line2); border-top: 1px solid var(--line2); border-right: 1px solid var(--line2); color: var(--key-color)}
.tab_style ul li > a.on::after {background: var(--white)}
.tab_style ul li > a:hover {color: var(--key-color)}

.tab_style.type2 ul{border-radius: 40px; background: #9FA5B3; overflow: hidden}
.tab_style.type2 ul li > a::after {display: none}
.tab_style.type2 ul li > a {color: var(--white); border-radius: 40px; min-height: 40px; /*line-height: 40px*/}
.tab_style.type2 ul li > a:hover {background: rgba(255,255,255,.2)}
.tab_style.type2 ul li + li > a::before {content:''; display: block; width: 1px; height: 14px; background: rgba(0,0,0,0.15); position: absolute; left: 0; top: 50%; transform: translateY(-50%)}
.tab_style.type2 ul li > a.on {background: var(--key-color); color: var(--white); border-left: none; border-top: none; border-right: none; box-shadow: 0 0 10px 0 rgba(40, 47, 60, 0.7)}
.tab_style.type2 ul li > a.on::before {display: none}
.tab_style.type2 ul li.on + li a::before {display: none}

/*예외 스타일*/
.tab_style.sticky {position: sticky; top: 91px; z-index: 3; background: var(--white)}
.tab_style[class*="wd_"] {margin: 0 auto}
.tab_style.wd_580 {max-width: 580px}

/* 팝업 안에 있는 탭 */
.pop_scroll_area .tab_style.sticky {top:0}

/*턉모양 라디오버튼*/
.tab_style.radio_mode ul li {position:relative}
.tab_style.radio_mode ul li > input[type="radio"]{position:absolute; left:0; top:0; width: 0; height: 0; opacity: 0}
.tab_style.radio_mode ul li > input[type="radio"] + label {transition: all .2s; display: block; height: 50px; line-height: 50px; color: #999; position: relative; border-radius: 15px 15px 0 0; cursor: pointer}
.tab_style.radio_mode ul li > input[type="radio"] + label::after {content: ''; display: block; width: 100%; height: 1px; background: var(--line2); position: absolute; left: 0; bottom: 0}
.tab_style.radio_mode ul li > input[type="radio"]:checked + label {background: var(--white); border-left: 1px solid var(--line2); border-top: 1px solid var(--line2); border-right: 1px solid var(--line2); color: var(--key-color)}
.tab_style.radio_mode ul li > input[type="radio"]:checked + label::after {background: var(--white)}
.tab_style.radio_mode ul li > input[type="radio"] + label:hover {color: var(--key-color)}

/* LDH 2025.03.18 : 3depth 메뉴 갯수에 따라 탭 넓이 조절 */
.tab_style.col_2 ul.leng_2 {grid-template-columns: repeat(2, 1fr);}
.tab_style.col_3 ul.leng_2 {grid-template-columns: repeat(2, 1fr);}
.tab_style.col_4 ul.leng_2 {grid-template-columns: repeat(2, 1fr);}

.tab_style.col_2 ul.leng_3 {grid-template-columns: repeat(3, 1fr);}
.tab_style.col_3 ul.leng_3 {grid-template-columns: repeat(3, 1fr);}
.tab_style.col_4 ul.leng_3 {grid-template-columns: repeat(3, 1fr);}

.tab_style.col_2 ul.leng_5 {grid-template-columns: repeat(5, 1fr);}
.tab_style.col_3 ul.leng_5 {grid-template-columns: repeat(5, 1fr);}
.tab_style.col_4 ul.leng_5 {grid-template-columns: repeat(5, 1fr);}

.tab_style.col_2 ul.leng_6 {grid-template-columns: repeat(6, 1fr);}
.tab_style.col_3 ul.leng_6 {grid-template-columns: repeat(6, 1fr);}
.tab_style.col_4 ul.leng_6 {grid-template-columns: repeat(6, 1fr);}

.tab_style.col_2 ul.leng_8 {grid-template-columns: repeat(8, 1fr);}
.tab_style.col_3 ul.leng_8 {grid-template-columns: repeat(8, 1fr);}
.tab_style.col_4 ul.leng_8 {grid-template-columns: repeat(8, 1fr);}

.tab_style.col_2 ul.leng_9 {grid-template-columns: repeat(9, 1fr);}
.tab_style.col_3 ul.leng_9 {grid-template-columns: repeat(9, 1fr);}
.tab_style.col_4 ul.leng_9 {grid-template-columns: repeat(9, 1fr);}

.tab_style.col_2 ul.leng_10 {grid-template-columns: repeat(10, 1fr);}
.tab_style.col_3 ul.leng_10 {grid-template-columns: repeat(10, 1fr);}
.tab_style.col_4 ul.leng_10 {grid-template-columns: repeat(10, 1fr);}



/*module - list*/
ul.dot li {font-size: 15px; line-height: 1.3; padding-left: 15px; position: relative}
ul.dot li + li {margin-top: 5px}
ul.dot li::before {content: ''; display: block; width: 3px; height: 3px; background: var(--black); border-radius: 50%; position: absolute; left: 4px; top: 8px}
ul.dot li span {font-size: 14px; display: block; padding-top: 8px}
ul.dot li span.none_block {padding:0; display:inline}
ul.dot li.bg {background: var(--bg-gray4); padding: 2px 8px; margin-top: 10px}
ul.dot li.bg::before {display: none}

ul.dot.lh_1dot5 > li {line-height: 1.5}
ul.dot.lh_1dot7 > li {line-height: 1.7}
ul.dot li.f_13 {font-size: 13px; padding-left: 8px}
ul.dot li.f_13::before {top: 8px; left: 0}
ul.dot li.f_16 {font-size: 16px}
ul.dot li.f_16::before {top: 12px}
ul.dot.lh_1dot5 li.f_16::before {top: 10px}
ul.dot li.mgt_5 {margin-top: 5px}
ul.dot li.mgt_10 {margin-top: 10px}
ul.dot li.mgt_15 {margin-top: 15px}
ul.dot li.mgt_20 {margin-top: 20px}
ul.dot li span.f_16 {font-size: 16px}
ul.dot li span.pdt_0 {padding-top:0}

ul.dot .dot_inner li {padding-left: 10px}
ul.dot .dot_inner li::before {content: '-'; width: auto; height: auto; border-radius: 0; top: 0; left: 0; background:none}

ul.dot.with_tit > li {display: grid; grid-template-columns: 111px 1fr; gap: 0 8px}
ul.dot.with_tit > li span:first-child {color: #666}

/* LDH 25.04.22 ul 스타일 추가 */
ul.dot.numlist {counter-reset: number 0}
ul.dot.numlist li {padding-left:20px}
ul.dot.numlist li::before {counter-increment: number 1; content: counter(number) ') '; width: auto; height: auto; background: none; top: 0; left: 0}

/*module - popup*/
.pop {position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; transition: all .3s; visibility: hidden; opacity: 0}
.pop .pop_bg {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.1); z-index: 1}
.pop .pop_wrap {background: var(--white); position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index: 2; border-radius: 10px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.4)}
.pop .pop_wrap .close {position: absolute; display: block; right: 15px; top: 15px; width: 16px; height: 16px; background: #666; transition: all .2s}
.pop .pop_wrap .close:hover {background: var(--key-color)}
.pop .pop_wrap.alert {max-width: 300px; width: 100%}
.pop .pop_wrap.detail {max-width: 700px; width: 100%}
.pop .pop_wrap.detail.wide {max-width: 1200px}
.pop .pop_wrap.calender {max-width:320px; width: 90%}
.pop.open {visibility: visible; opacity: 1}

.pop_scroll_area {max-height: 50vh; overflow-y: auto}
.pop .pop_wrap.detail.wide .pop_scroll_area {min-height: 450px}

html.overflow_hidden {overflow: hidden}

/*module - column*/
.col_basic {display: grid}
.col_basic.col2 {grid-template-columns: repeat(2, 50%)}
.col_basic.col2.gap20 {grid-template-columns: repeat(2, calc(50% - 10px)); gap: 0 20px}
.col_basic.col2.gap40 {grid-template-columns: repeat(2, calc(50% - 20px)); gap: 0 40px}
.col_basic.col2.gap70 {grid-template-columns: repeat(2, calc(50% - 35px)); gap: 0 70px}

.col_basic.align_center > * {align-self: center}

/*module - datepicker*/
.custom_datepicker_wrap .hasDatepicker .ui-widget {font-family:'Pretendard'}
.custom_datepicker_wrap .hasDatepicker .ui-widget-content {border: none; background: transparent}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker{width: 100%; padding: 0}
.custom_datepicker_wrap .hasDatepicker .ui-widget-header {border: none; background: none; padding:15px 0; display: flex; justify-content: center; align-items: center; gap: 0 10px}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-title {font-size: 18px; font-weight: 700; margin: 0}

.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-prev, 
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-next {position: static; width: 20px; height: 20px}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-prev:hover, 
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-next:hover {background: none; border: none} 

.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-prev span, 
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-next span {position: static; margin: 0; width: 100%; height: 100%; background-image: none; background-color: #444; cursor: pointer; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: cover; transition: all .2s}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-prev:hover span,
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-next:hover span {background-color: var(--key-color2)}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-next span {-webkit-mask-image: url(../img/common/icon_next.svg)}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-prev span {-webkit-mask-image: url(../img/common/icon_prev.svg)}

.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-prev {order: 1}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-title {order: 2}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-next {order: 3}

.custom_datepicker_wrap .hasDatepicker .ui-datepicker table {font-size: 15px; margin: 0}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker th {font-weight: 600; border: 1px solid var(--line2); height: 58px; background: var(--bg-gray4); width: calc(100% / 7)}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker td {padding: 0; text-align: center; border: 1px solid var(--line2); height: 58px}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker td span, .custom_datepicker_wrap .hasDatepicker .ui-datepicker td a {border: none; background: none; text-align: center}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker td a {padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: all .2s}

.custom_datepicker_wrap .hasDatepicker .ui-datepicker .ui-datepicker-buttonpane {display: none}

.custom_datepicker_wrap .hasDatepicker .ui-datepicker td a.allDay {background: #D8EBFA}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker td a.am {background: #FAE8D0}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker td a.pm {background: #CEF1EB}
.custom_datepicker_wrap .hasDatepicker .ui-datepicker td a.night {background: #E5D6FD}

.custom_datepicker_wrap .hasDatepicker .ui-datepicker td:hover a,
.custom_datepicker_wrap .hasDatepicker .ui-datepicker td a.ui-state-active{color: var(--mid-blue); font-weight: 700}

.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker table {font-size: 14px}
.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td {height: 100px}
.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td a {align-items: center; justify-content: flex-start; padding-top: 20px; flex-direction: column}
.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td > span {display: block; width: 100%; height: 100%; padding: 20px 0 0}
.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td a span {width: 80%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; font-size: 12px; margin:15px 0 0; line-clamp: 2; -webkit-line-clamp: 2; padding: 0}

.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td a.online {background: #E9F5FF}
.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td a.offline {background: #FFEED8}
.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td a.lecture {background: #E2FAF6}

.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td:hover a,
.custom_datepicker_wrap.wide .hasDatepicker .ui-datepicker td a.ui-state-active{color: var(--mid-blue); font-weight: 700}

/*module - video conainer*/
.video_container {display: block; padding-top: 56.25%; position: relative}
.video_container iframe {position: absolute; left: 0; top: 0}

/*module - flex*/
.any_flex {display:flex; align-items: center}
.any_flex.gap_5 {gap:0 5px}
.any_flex.gap_10 {gap:0 10px}
.any_flex.gap_20 {gap:0 20px}
.any_flex.gap_30 {gap:0 30px}
.any_flex.no_align_center {align-items: flex-start}
.any_flex.bottom {align-items: flex-end}
.any_flex.space_between {justify-content: space-between}
.any_flex.justify_center {justify-content: center}

.any_flex .no_shrink {flex-shrink: 0}

/************ KYL ************/

/* common */
.dfbox {display: flex;}
.txt_green {color: #3AB44A;}
.lh_1dot8 {line-height: 1.8;}
.pdb_45 {padding-bottom: 45px}
.f_30 {font-size: 30px;}
.f_50 {font-size: 50px;}
.pdb_140 {padding-bottom: 140px;}
.mgb_65 {margin-bottom: 65px;}
.gray_txt {color: #A1A6AA; text-align: center;}
ul.dot.lh_1dot6 > li {line-height: 1.6;}
.f_46 {font-size: 46px;}
.pdb_110 {padding-bottom: 110px;}
.pdb_130 {padding-bottom: 130px;}
.pd_45 {padding: 45px;}
.pdl_15 {padding-left: 15px;}
.pdt_210 {padding-top: 210px;}
.tab_style.wd_995 {max-width: 995px;}
.tab_style.wd_362 {max-width: 362px;}
.col_basic.col2.gap30 {grid-template-columns: repeat(2, calc(50% - 30px)); gap: 0 30px}
.tab_style.col_11 ul {grid-template-columns: repeat(11, 1fr);}
.tab_style.col_10 ul {grid-template-columns: repeat(10, 1fr);}
.radio_wrapper input[type="radio"] {opacity: 0; position: absolute; width: 0; height: 0;}
.radio_wrapper label:before {content: ''; display: inline-block; width: 18px; height: 18px; border: 1px solid #D9D9D9; background-color: #fff; border-radius: 50%; position: absolute; left: 0; transition: all 0.2s ease;}
.radio_wrapper input[type="radio"]:checked + label:before {border-color: var(--key-color);}
.radio_wrapper input[type="radio"]:checked + label:after {content: ''; display: inline-block; width: 10px; height: 10px; background: var(--key-color); border-radius: 50%; position: absolute; left: 4px; top: 4px;}



/****************** Media Query ******************/

/* laptop ~ table */

@media (max-width: 1279px) {
    /* layout */
    body {min-width: auto}
    #hd, #ft {min-width:1280px}
    #wrapper .full_container .inner_container {max-width: 90%; width:100%}

    html, body {font-size: 11.5px}

    /* font */
    .f_12 {font-size: 1rem}
    .f_13 {font-size: 1.08rem}
    .f_14 {font-size: 1.17rem}
    .f_15 {font-size: 1.25rem}
    .f_16 {font-size: 1.33rem}
    .f_17 {font-size: 1.42rem}
    .f_18 {font-size: 1.5rem}
    .f_19 {font-size: 1.58rem}
    .f_20 {font-size: 1.67rem}
    .f_21 {font-size: 1.75rem}
    .f_22 {font-size: 1.83rem}
    .f_23 {font-size: 1.92rem}
    .f_24 {font-size: 2rem}
    .f_26 {font-size: 2.17rem}
    .f_27 {font-size: 2.25rem}
    .f_28 {font-size: 2.33rem}
    .f_29 {font-size: 2.42rem}
    .f_31 {font-size: 2.58rem}
    .f_30 {font-size: 2.61rem}
    .f_32 {font-size: 2.67rem}
    .f_34 {font-size: 2.83rem}
    .f_36 {font-size: 3rem}
    .f_37 {font-size: 3.08rem}
    .f_42 {font-size: 3.5rem}
    .f_40 {font-size: 3.33rem}
    .f_50 {font-size: 4.35rem}
    .f_62 {font-size: 5.17rem}
    .f_70 {font-size: 6.09rem}

    /*padding*/
    .mgt_30 {margin-top: 20px}
    .mgt_40 {margin-top: 25px}
    .mgt_50 {margin-top: 30px}
    .mgt_70 {margin-top: 50px}
    .mgt_80 {margin-top: 50px}

    .mgb_30 {margin-bottom:20px}

    .mgtb_30 {margin: 20px 0}
    .mgtb_40 {margin: 25px 0}
    .mgtb_50 {margin: 30px 0}
    .mgtb_70 {margin: 50px 0}

    .pdt_25 {padding-top: 20px}
    .pdt_30 {padding-top: 20px}
    .pdt_35 {padding-top: 25px}
    .pdt_40 {padding-top: 25px}
    .pdt_45 {padding-top: 25px}
    .pdt_50 {padding-top: 30px}
    .pdt_55 {padding-top: 35px}
    .pdt_60 {padding-top: 40px}
    .pdt_70 {padding-top: 50px}
    .pdt_75 {padding-top: 50px}
    .pdt_80 {padding-top: 50px}
    .pdt_120 {padding-top: 90px}
    .pdt_130 {padding-top: 90px}
    .pdt_195 {padding-top: 155px}

    .pdb_25 {padding-bottom: 25px}
    .pdb_30 {padding-bottom: 20px}
    .pdb_35 {padding-bottom: 25px}
    .pdb_40 {padding-bottom: 25px}
    .pdb_50 {padding-bottom: 30px}
    .pdb_60 {padding-bottom: 40px}
    .pdb_70 {padding-bottom: 50px}
    .pdb_80 {padding-bottom: 50px}
    .pdb_90 {padding-bottom: 60px}
    .pdb_195 {padding-bottom: 145px}
    .pdb_100 {padding-bottom: 90px}
    .pdb_120 {padding-bottom: 90px}
    .pdb_110 {padding-bottom: 90px}
    .pdb_160 {padding-bottom: 120px}

    .pdl_25 {padding-left: 20px}
    .pdl_30 {padding-left: 20px}
    .pdl_35 {padding-left: 25px}
    .pdl_40 {padding-left: 25px}
    .pdl_50 {padding-left: 30px}
    .pdl_60 {padding-left: 40px}
    .pdl_80 {padding-left: 50px}
    .pdl_100 {padding-left: 90px}
    .pdl_140 {padding-left: 110px}

    .pdr_25 {padding-right: 20px}
    .pdr_30 {padding-right: 20px}
    .pdr_35 {padding-right: 25px}
    .pdr_40 {padding-right: 25px}
    .pdr_50 {padding-right: 30px}
    .pdr_60 {padding-right: 40px}
    .pdr_100 {padding-right: 90px}
    .pdr_140 {padding-right: 110px}

    .pdlr_50 {padding: 0 30px}
    .pdlr_70 {padding: 0 50px}
    .pdlr_125 {padding: 0 95px}
    .pdlr_85 {padding: 0 55px}

    .pdtb_30 {padding: 20px 0}
    .pdtb_40 {padding: 25px 0}
    .pdtb_50 {padding: 30px 0}
    .pdtb_60 {padding: 40px 0}
    .pdtb_80 {padding: 50px 0}
    .pdtb_90 {padding: 90px 0}
    .pdtb_120 {padding: 90px 0}

    .pd_25 {padding: 20px}
    .pd_35 {padding: 25px}
    .pd_40 {padding: 20px}
    .pd_50 {padding: 30px}

    /* table layout */
    [class*="tbl_style"][class*="1"] .tbl_inner .row {grid-template-columns: 15.64vw calc(100% - 15.64vw)}
    [class*="tbl_style"][class*="1"] .tbl_inner .row.half {grid-template-columns: 15.64vw calc(50% - 15.64vw) 15.64vw calc(50% - 15.64vw)}
    [class*="tbl_style"][class*="1"] .tbl_inner .row.half_3 {grid-template-columns: 15.64vw calc((100% - 15.64vw) / 2) calc((100% - 15.64vw) / 2)}
}

/* table ~ mobile */

@media (max-width: 1024px) {

    /* layout */
    .mo_only {display:block!important}
    .pc_only {display:none!important}
    /* font */
    /* html, body {font-size: 11.5px} */
    .f_17 {font-size: 1.39rem}/*16px*/
    .f_18 {font-size: 1.39rem}/*16px*/
    .f_19 {font-size: 1.39rem}/*16px*/
    .f_20 {font-size: 1.39rem}/*16px*/
    .f_21 {font-size: 1.57rem}/*18px*/
    .f_22 {font-size: 1.57rem}/*18px*/
    .f_23 {font-size: 1.57rem}/*18px*/
    .f_24 {font-size: 1.74rem}/*20px*/
    .f_26 {font-size: 1.74rem}/*20px*/
    .f_27 {font-size: 1.74rem}/*20px*/
    .f_28 {font-size: 1.74rem}/*20px*/
    .f_29 {font-size: 1.74rem}/*20px*/
    .f_31 {font-size: 1.74rem}/*20px*/
    .f_30 {font-size: 1.74rem}/*20px*/
    .f_32 {font-size: 1.91rem}/*22px*/
    .f_34 {font-size: 1.91rem}/*22px*/
    .f_36 {font-size: 1.91rem}/*22px*/
    .f_37 {font-size: 1.91rem}/*22px*/
    .f_42 {font-size: 2.09rem}/*24px*/
    .f_40 {font-size: 2.09rem}/*24px*/
    .f_50 {font-size: 2.78rem}/*32px*/
    .f_62 {font-size: 3.48rem}/*40px*/
    .f_70 {font-size: 4.35rem}/*50px*/

    /* tab style */
    .tab_style ul li > a {font-size:1.22rem /*14px*/}

    /* table layout */
    [class*="tbl_style"][class*="1"] .tbl_inner .row {grid-template-columns: 100%}
    [class*="tbl_style"][class*="1"] .tbl_inner .row.half {grid-template-columns: 100%}
    [class*="tbl_style"][class*="1"] .tbl_inner .th {min-height:50px; text-align:left; justify-content:flex-start; padding:15px}
    [class*="tbl_style"][class*="1"] .tbl_inner .td {padding:10px 15px; min-height:50px}

    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_email {display:grid; grid-template-columns: 1fr 35px; gap: 10px 5px}
    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_email input[type="text"]:nth-of-type(2),
    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_email .select_basic {grid-column: 1 / 3}

    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_per .select_basic.wd_280 {width:280px}
    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_per .input_basic.wd_280 {width:280px}

    [class*="tbl_style"][class*="1"] .tbl_inner .row.hope + .row.hope .th {display: none}
    [class*="tbl_style"][class*="1"] .tbl_inner .row.half_3 {grid-template-columns: 100%}
    [class*="tbl_style"][class*="1"] .tbl_inner .row.half_3 .td {border-right: none; flex-direction: column; align-items: flex-start; gap: 10px 0}

    /* button style */
    [class*="butn_style"][class*="wd_"].submit,
    [class*="butn_style"][class*="wd_"].cancel {width:100%; height:44px; line-height:44px}

    /* 인풋 */
    .input_basic.wd_280 {width:100%}
    .input_basic.wd_200 {width:100%}

    .select_basic.wd_280 {width:100%}

    /*module - scrollbar*/
    .scrollbar_style::-webkit-scrollbar-track { border-radius: 4px}
    .scrollbar_style::-webkit-scrollbar { width: 4px; border-radius: 4px; height: 6px}
    .scrollbar_style::-webkit-scrollbar-thumb { border-radius: 4px}

    .scrollbar_style_wrap > *::-webkit-scrollbar-track { border-radius: 4px; background: #e8e8e8}
    .scrollbar_style_wrap > *::-webkit-scrollbar { width: 4px; background-color: #e8e8e8; border-radius: 4px}
    .scrollbar_style_wrap > *::-webkit-scrollbar-thumb { border-radius: 4px; background: #7a7a7a}

    /* module - tab */
    .tab_style.col_4 ul.leng_4 {grid-template-columns: repeat(3, 1fr);}

    .tab_style.col_2 ul.leng_9 {grid-template-columns: repeat(3, 1fr);}
    .tab_style.col_3 ul.leng_9 {grid-template-columns: repeat(3, 1fr);}
    .tab_style.col_4 ul.leng_9 {grid-template-columns: repeat(3, 1fr);}

    .tab_style.col_2 ul.leng_10 {grid-template-columns: repeat(3, 1fr);}
    .tab_style.col_3 ul.leng_10 {grid-template-columns: repeat(3, 1fr);}
    .tab_style.col_4 ul.leng_10 {grid-template-columns: repeat(3, 1fr);}

     .tab_style.type2 ul {border-radius: 20px;}

    /* checkbox & radio */
    .chk_wrap.grid3 {display: grid; grid-template-columns: repeat(3, 1fr); gap:10px; width:100%}

    /*module - flex*/
    .any_flex {flex-direction: column;}
    .any_flex.gap_10 {gap:10px 0}
    .any_flex.gap_20 {gap:20px 0}
    .any_flex.gap_30 {gap:30px 0}
}

/* mobile only */

@media (max-width: 768px) {
    /* table layout */
    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_address {flex-direction: column; gap: 10px 0; align-items: flex-start}
    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_address [class*="butn_style"][class*="wd_100"] {width:100%}

    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_per {flex-direction: column; gap: 10px 0; align-items: flex-start}
    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_per .input_basic.wd_280 {width:100%}
    [class*="tbl_style"][class*="1"] .tbl_inner .td.td_per .select_basic.wd_280 {width:100%}

    /* checkbox & radio */
    .chk_wrap.col {flex-direction: column; gap: 10px 0}
    .chk_wrap.grid3 {grid-template-columns: 100%; gap: 10px 0}

    /* module - popup */
    .pop .pop_wrap.detail + .pop_bg {display: none}
    .pop .pop_wrap.detail {max-width: 100%; box-shadow: none; max-height: 100%; height:100%; overflow-y: auto}
    .pop_scroll_area {max-height: 100%}
}