@charset "UTF-8";
/*-------------------------------------------------
title       : COMMON
Author      : PLAN I
Create date : 2024-12-16
-------------------------------------------------*/
/*-------------------------------------------------------------------
    타이틀
-------------------------------------------------------------------*/
h4{display: block; margin-top: 6.4rem; margin-bottom: 2.4rem; color: #111; font-size: 2.5rem; font-weight: 700; line-height: 3rem; letter-spacing: -0.005rem;}
h5{display: block; margin-top: 2.8rem; margin-bottom: 1.6rem; color: #1B3DAA; font-size: 2.3rem; font-weight: 700; line-height: 2.7rem; letter-spacing: -0.046rem;}
h6{display: block; margin-top: 3.2rem; margin-bottom: 0.4rem; color: #111; font-size: 1.9rem; font-weight: 700; line-height: 2.3rem; letter-spacing: -0.038rem;}
strong.h_tit{display: block; margin-top: 1.6rem; margin-bottom: 1.2rem; line-height: 2rem; letter-spacing: -0.034rem; font-weight: 700;}

#contents div > h4:first-child,
#contents div > h5:first-child,
#contents div > h6:first-child{margin-top: 0;}
h4 + h5{margin-top: 1.9rem; }
h5 + h6{margin-top: 1.6rem;}
h6 + strong{display: block; margin-top: 1.6rem;}

/*-------------------------------------------------------------------
    4뎁스 탭
-------------------------------------------------------------------*/
.depth4_tab{margin-bottom: 3.2rem;}
.depth4_tab >ul{overflow: hidden; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; border: 1px solid #C8CAD0; border-radius: 1rem;}
.depth4_tab >ul >li{display: flex; flex-wrap: wrap; align-items: center; width: 100%; border-left: 1px solid #C8CAD0; }
.depth4_tab >ul >li:first-child{border-left: none;}
.depth4_tab >ul >li >a{
    display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100%; min-height: 6rem; padding: 1rem; font-size: 1.9rem; word-break: normal; color: #111; line-height: 1.22; font-weight: 600; letter-spacing: -0.038rem; background-color: #fff; text-align: center;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.depth4_tab >ul >li >a{}
.depth4_tab >ul >li >a:hover,
.depth4_tab >ul >li.active >a{background-color: #3F4B71; color: #fff;}

/*-------------------------------------------------------------------
    리스트
-------------------------------------------------------------------*/
[data-skin="list"]{overflow: hidden;}
[data-skin="list"] >li{position: relative; padding-left: 1.6rem; line-height: 1.7; letter-spacing: -0.034rem; color: #555; letter-spacing: -0.034rem;}
[data-skin="list"] >li:not(:first-child){margin-top: 0.2rem;}
[data-skin="list"] >li:before{content: ""; display: block; position: absolute; top: 1.1rem; left: 0.4rem; width: 0.4rem; height: 0.4rem; background-color: #182E6E; border-radius: 0.1rem;}
[data-skin="list"][data-type="2"] >li{padding-left: 1.2rem; font-size: 1.6rem;}
[data-skin="list"][data-type="2"] >li:before{top: 1.2rem; left: 0.2rem; width: 0.6rem; height: 1px; background-color: #555;}
/*[data-skin="list"][data-type="3"] >li{padding-left: 1.2rem; font-size: 1.6rem;}
[data-skin="list"][data-type="3"] >li:before{content: "·"; top: -0.1rem; left: 0.2rem; width: 0.6rem; height: 1.5rem; background-color: transparent;}*/
[data-skin="list"][data-type="check"]{}
[data-skin="list"][data-type="check"] >li{padding-left: 2.8rem; line-height: 1.5; color: #1d1d1d;}
[data-skin="list"][data-type="check"] >li:not(:first-child){margin-top: 0;}
[data-skin="list"][data-type="check"] >li:before{top: 0.3rem; left: 0; width: 2.4rem; height: 2.4rem; background: transparent url(../img/sub/list_img01.svg) no-repeat center center / 100% auto; border-radius: 0;}

[data-skin="list"] >li >[data-skin="list"]{margin-top: 0.8rem; margin-bottom: 0.8rem;}
[data-skin="list"] >li >strong{color: #111;}
[data-skin="list"] >li >u{display: inline-block; position: relative; padding-right: 1rem; color: #111; font-weight: 700; text-decoration: underline; text-underline-position: under;}
[data-skin="list"] >li >u:after{content: "*"; position: absolute; top: -0.2rem; right: 0;}
[data-skin="list"] >li >.under_box{width: calc(100% + 1.6rem); margin-top: 0.8rem; margin-left: -1.6rem; margin-bottom: 0.8rem; padding: 2rem 2.4rem; font-size: 1.6rem; background-color: #F7F7F8; border-radius: 0.4rem;}
[data-skin="list"] >li >[data-skin="list"] >li >.under_box{width: calc(100% + 2.8rem); font-size: 1.5rem;}

[data-skin="num_list"]{}
[data-skin="num_list"] >li{position: relative; margin-top: 0.4rem; padding-left: 2.9rem; line-height: 1.7; letter-spacing: -0.034rem; }
[data-skin="num_list"] >li >[data-skin="num_list"]{margin-top: 0.4rem;}
[data-skin="num_list"] >li:first-child{margin-top: 0;}
[data-skin="num_list"] >li >em{display: block; position: absolute; top: 0.2rem; left: 0;  width: 2.5rem; height: 2.5rem; text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 2.5rem; letter-spacing: -0.03rem; color: #fff; background-color: #3F4B71; border-radius: 50%;}
[data-skin="num_list"][data-type="2"] >li{margin-top: 0; padding-left: 0;}
[data-skin="num_list"][data-type="2"] >li:first-child{margin-top: 0;}
[data-skin="num_list"][data-type="2"] >li >em{display: inline-block; position: relative; top: auto; left: auto; width: auto; height: auto; margin-right: 0.4rem; text-align: left; font-size: inherit; font-weight: 400; line-height: 1.7; letter-spacing: -0.034rem; color: inherit; background-color: transparent; border-radius: 0;}

/*-------------------------------------------------------------------
    버튼
-------------------------------------------------------------------*/
[data-skin="btn"]{
    display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: center; min-width: 6.7rem; padding: 0.825rem 1.6rem; color: #333; font-size: 1.7rem; letter-spacing: -0.034rem; line-height: 1.5; background-color: #fff; border: 1px solid #555; border-radius: 0.8rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="btn"]:hover{background-color: #F1F2F3;}

/* 사이즈별 */
[data-skin="btn"][data-size="l"]{min-width: 9.7rem; padding: 1.225rem 1.6rem; font-size: 1.9rem; letter-spacing: -0.038rem;}

/* 컬러별 */
[data-skin="btn"][data-color="2"]{color: #fff; background-color: #333; border-color: #333;}
[data-skin="btn"][data-color="2"]:hover{background-color: #242424; border-color: #242424;}
[data-skin="btn"][data-color="3"]{color: #fff; background-color: #1B3DAA; border-color: #1B3DAA;}
[data-skin="btn"][data-color="3"]:hover{background-color: #072A9B; border-color: #072A9B;}

/* 타입별 */
[data-skin="btn"][data-type]{}
[data-skin="btn"][data-type]:after{content: ""; display: block; width: 2.5rem; height: 2.4rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
[data-skin="btn"][data-type="search"]:after{background-image: url(../img/sub/btn_search01.svg);}
[data-skin="btn"][data-color="2"][data-type="search"]:after,
[data-skin="btn"][data-color="3"][data-type="search"]:after{background-image: url(../img/sub/btn_search02.svg);}
[data-skin="btn"][data-type="down"]:after{background-image: url(../img/sub/btn_down01.svg);}
[data-skin="btn"][data-color="2"][data-type="down"]:after,
[data-skin="btn"][data-color="3"][data-type="down"]:after{background-image: url(../img/sub/btn_down02.svg);}

/*-------------------------------------------------------------------
    팁 [data-skin="tip"]
-------------------------------------------------------------------*/
[data-skin="tip"]{
    position: relative; padding-left: 2.8rem; color: #555; letter-spacing: -0.034rem; font-size: 1.7rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="tip"]:before{
    content: ""; display: block; position: absolute; top: -0.2rem; left: 0; width: 2.4rem; height: 2.4rem; background: url(../img/common/tip_img01.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
/* 만족도 */
[data-skin="tip"][data-type="satis"]:before{background-image: url(../img/common/tip_satis_img01.svg);}

/* 컬러별 */
[data-skin="tip"][data-color="2"]{color: #fff;}
[data-skin="tip"][data-color="2"]:before{background-image: url(../img/common/tip_img02.svg);}
/* a:hover [data-skin="tip"][data-color="2"]:before{background-image: url(../img/common/tip_img01.svg);} */
[data-skin="tip"][data-type="satis"][data-color="2"]:before{background-image: url(../img/common/tip_satis_img02.svg);}
/* a:hover [data-skin="tip"][data-type="satis"][data-color="2"]:before{background-image: url(../img/common/tip_satis_img01.svg);} */


/*-------------------------------------------------------------------
    인풋
-------------------------------------------------------------------*/
/* [data-skin="input"] */
[data-skin="input"]{}
[data-skin="input"] input{display: block; width: 100%; padding: 0 1.6rem; color: #8E8E8E; font-size: 1.6rem; line-height: 4.2rem; background-color: #fff; border: 1px solid #C8CAD0; border-radius: 0.8rem;}
[data-skin="input"] input[disabled],
[data-skin="input"] input[readonly]{border-color: #C8CAD0; background-color: #F7F7F8; color: #8E8E8E;}
[data-skin="input"] input::placeholder{color: #8E8E8E;}

/* [data-skin="select"] */
[data-skin="select"]{}
[data-skin="select"] select{
    display: block; width: 100%; height: 4.4rem; padding: 0 4.8rem 0 1.6rem; color: #8E8E8E; font-size: 1.6rem; background: #fff url(../img/common/select_img01.svg) no-repeat right 1.6rem center / 2.4rem auto; border: 1px solid #C8CAD0; border-radius: 0.8rem;
    -webkit-appearance:none;
    -moz-appearance:none; 
    -o-appearance:none; 
    appearance:none; 
}
[data-skin="select"] select::-ms-expand{display:none;/*for IE10,11*/}
[data-skin="select"] select::placeholder{color: #8E8E8E;}
[data-skin="select"] select:disabled,
[data-skin="select"] select:readonly{border-color: #C8CAD0; background-color: #F7F7F8; color: #8E8E8E;}

/* textarea */
[data-skin="textarea"] textarea{display: block; width: 100%; min-height: 25.6rem; padding: 1rem 1.6rem; color: #8E8E8E; resize: none; border-radius: 0.8rem;  border: 1px solid #C8CAD0;}
[data-skin="textarea"] textarea::placeholder{color: #8E8E8E;}
[data-skin="textarea"] textarea:disabled,
[data-skin="textarea"] textarea:readonly{border-color: #C8CAD0; background-color: #F7F7F8; color: #8E8E8E;}

/* 체크박스 */
[data-skin="check"]{position: relative; padding-left: 2.8rem;}
[data-skin="check"] input{position: absolute; top: 0.2rem; left: 0.2rem;}
[data-skin="check"] label{color: #555; cursor: pointer; line-height: 1.5;}
[data-skin="check"] label:before{
    content: ""; display: block; position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background-color: #fff; border: 1px solid #555; border-radius: 0.4rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="check"] label:after{
    content: ""; opacity: 0; display: block; position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background: url(../img/common/input_check.svg) no-repeat center center / 100% auto; border-radius: 0.4rem;
    transform-origin: center center;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="check"] input:checked +label:before{background-color: #1B3DAA; border-color: #1B3DAA;}
[data-skin="check"] input:checked +label:after{opacity: 1;}

/* 라디오 */
[data-skin="radio"]{position: relative; padding-left: 2.8rem;}
[data-skin="radio"] input{position: absolute; top: 0.2rem; left: 0.2rem;}
[data-skin="radio"] label{color: #555; cursor: pointer; line-height: 1.5;}
[data-skin="radio"] label:before{
    content: ""; display: block; position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background-color: #fff; border: 1px solid #555; border-radius: 50%;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="radio"] label:after{
    content: ""; display: block; position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background-color: #fff; border-radius: 50%;
    transform-origin: center center;
    -webkit-transform: scale(0); transform: scale(0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="radio"] input:checked +label:before{background-color: #1B3DAA; border-color: #1B3DAA;}
[data-skin="radio"] input:checked +label:after{
    -webkit-transform: scale(0.4); transform: scale(0.4);
}

/*-------------------------------------------------------------------
    팝업
-------------------------------------------------------------------*/
[data-skin="popup"]{
    display: none; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999; width: 100%; height: 100%; padding: 0 2rem; background-color: rgba(0,0,0,0.5);
}
[data-skin="popup"].on{display: flex;}
[data-skin="popup"] .pop_in{display: block; position: relative; width: 100%; max-width: 660px; height: auto; min-height: 25rem; max-height: calc(80vh); margin: 0 auto; padding: 9rem 5rem 4rem; background-color: #fff; border-radius: 1.2rem; }
[data-skin="popup"] .pop_in .desc{color: #111; font-size: 1.9rem;font-weight: 700; line-height: 1.5; letter-spacing: -0.038rem; text-align: center; }
[data-skin="popup"] .pop_in .btns{margin-top: 5.5rem; font-weight: 400; text-align: center;}
[data-skin="popup"] .pop_in .btns [data-skin="btn"]{min-width: 11.2rem;}
[data-skin="popup"] .pop_in .close_btn{
    display: block; position: absolute; top: 2.7rem; right: 2.7rem; width: 2.4rem; height: 2.4rem; background: url(../img/sub/popup_img01.svg) no-repeat center center / 100% auto; text-indent: -9999px;
    -webkit-transform: rotate(0); transform: rotate(0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="popup"] .pop_in .close_btn:hover{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

[data-skin="popup"][data-type="2"] .pop_in{padding:0;}
[data-skin="popup"][data-type="2"] .pop_in .tit{display:block; padding:1.775rem 6rem 1.775rem 4rem; border-radius: 1.2rem 1.2rem 0 0; background-color:#103EBF; font-size:1.9rem; color:#fff; letter-spacing: -0.02em;}
[data-skin="popup"][data-type="2"] .pop_in .con{overflow-y: auto; height: auto; max-height: calc(80vh - 4.8rem - 4.8rem - 6.4rem); padding:4.8rem 4rem;}
[data-skin="popup"][data-type="2"] .pop_in .close_btn{top: 2.2rem; background-image:url(../img/sub/popup_img02.svg)}
[data-skin="popup"][data-type="2"] .tstyle_list table{}

[data-skin="popup"][data-size="1400"] .pop_in{max-width: 1400px;} 

@media screen and (max-width:1024px){
    [data-skin="popup"][data-type="2"] .pop_in .tit{padding:1.775rem 6rem 1.775rem 3rem;}
    [data-skin="popup"][data-type="2"] .pop_in .con{max-height: calc(80vh - 3.5rem - 3.5rem - 6.4rem); padding: 3.5rem 3rem;}
}
@media screen and (max-width:640px){
    [data-skin="popup"][data-type="2"] .pop_in .tit{padding:1.775rem 6rem 1.775rem 2rem;}
    [data-skin="popup"][data-type="2"] .pop_in .con{max-height: calc(80vh - 2.5rem - 2.5rem - 6.4rem); padding: 2.5rem 2rem;}
}