@charset "UTF-8";

/*-------------------------------------------------------------------
    폰트
-------------------------------------------------------------------*/
h3{display: block; margin-top: 8rem; margin-bottom: 3rem; font-size: 3rem; color: #151515; font-weight: 700; line-height: 1.4;}
h3:first-of-type{margin-top: 0;}
h3[data-color="2"]{color: #17469E;}
h4{display: block;margin-top: 3rem; margin-bottom: 2rem; font-size: 2.4rem; color: #1D1D1D; font-weight: 600; line-height: 1.4;}
h4:first-of-type{margin-top: 0;}
h5{display: block; margin-top: 2rem; margin-bottom: 1.4rem; font-size: 2rem; color: #151515; font-weight: 600; line-height: 1.4;}
h5:first-of-type{margin-top: 0;}
h6{display: block; margin-top: 1.4rem; margin-bottom: 1rem; font-size: 1.7rem; color: #2D2D2D; font-weight: 600; line-height: 1.4;}
h6:first-of-type{margin-top: 0;}

@media screen and (max-width: 1024px){
    h3{margin-top: 6rem; margin-bottom: 2.8rem; font-size: 2.6rem; }
    h4{margin-top: 2.4rem; margin-bottom: 1.6rem; font-size: 2.2rem;}
}
@media screen and (max-width: 640px){
    h3{margin-top: 5rem; margin-bottom: 2.4rem; font-size: 2.4rem; }
    h4{margin-top: 2rem; margin-bottom: 1.4rem; font-size: 2.1rem;}
}


/*-------------------------------------------------------------------
    버튼
-------------------------------------------------------------------*/
[data-skin="btn"]{
    display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 1.45rem 3.6rem; font-size: 1.8rem; font-weight: 500; background-color: #18469D; border: 1px solid #18469D; border-radius: 10rem; color: #fff;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="btn"]:hover{background-color: #fff; color: #18469D;}
/* 사이즈 */
[data-skin="btn"][data-size="s"]{padding: 0.8rem 1.6rem; font-size: 1.6rem;}
[data-skin="btn"][data-size="m"]{padding: 1.05rem 3rem;}
/* 컬러 */
[data-skin="btn"][data-color="2"]{background-color: #2D2D2D; border-color: #2D2D2D;}
[data-skin="btn"][data-color="2"]:hover{background-color: #fff; color: #2D2D2D;}
[data-skin="btn"][data-color="3"]{background-color: #fff; border-color: #DDD; color: #555;}
[data-skin="btn"][data-color="3"]:hover{background-color: #DDD;}
[data-skin="btn"][data-color="4"]{background-color: #EEE; border-color: #EEE; color: #AAA;}
[data-skin="btn"][data-color="4"]:hover{background-color: #fff;}
[data-skin="btn"][data-color="5"]{background-color: #17469E; border-color: #17469E;}
[data-skin="btn"][data-color="5"]:hover{background-color: #fff; border-color: #17469E;}
[data-skin="btn"][data-color="6"]{background-color: #FE3016; border-color: #FE3016; color: #fff;}
[data-skin="btn"][data-color="6"]:hover{background-color: #fff;color: #FE3016;}

.btn_wrap{position: relative;}
.btn_wrap .center{
    position: absolute; top: 0; left: 50%;
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
}

@media screen and (max-width: 1024px){
    [data-skin="btn"]{padding: 1.2rem 2.8rem; font-size: 1.7rem;}
    [data-skin="btn"][data-size="s"]{padding: 0.6rem 1.2rem; font-size: 1.5rem;}
    [data-skin="btn"][data-size="m"]{padding: 0.8rem 2.4rem;}
}
@media screen and (max-width: 640px){
    [data-skin="btn"]{padding: 1rem 2.4rem; font-size: 1.6rem;}
    [data-skin="btn"][data-size="s"]{padding: 0.6rem 1.2rem;}
    [data-skin="btn"][data-size="m"]{padding: 0.7rem 1.8rem;}

    .btn_wrap .center{
        position: relative; top: auto; left: auto;
        -webkit-transform: translateX(0); transform: translateX(0);
    }
}


/*-------------------------------------------------------------------
    팝업
-------------------------------------------------------------------*/
[data-skin="popup"] {
    display: none; visibility: hidden; position: absolute; top: 50%; left: 50%; z-index: 9999; width: 100vw; height: 100vh;
    transform: translate(-50%,-50%);
    -webkit-transition: visibility 0.4s linear; transition: visibility 0.4s linear;
}
body:not(#onepage) [data-skin="popup"]{position: fixed; height: 100%;}
[data-skin="popup"].on {display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; visibility: visible;}
[data-skin="popup"]:before{content: ""; display: none; position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7);}
[data-skin="popup"].on:before{display: block;}
[data-skin="popup"] >.bx{position: fixed; z-index: 1; width: auto; max-width: 100%; max-height: 100%; padding: 0 5rem;}
[data-skin="popup"] >.bx >.in{overflow-y: auto; height: auto; max-height: calc(100vh - 30rem); border-radius: 3rem;}
[data-skin="popup"] >.bx >.in >.video{display: block; width: 800px; max-width: 100%; max-height: calc(100vh - 10rem); border-radius: 3rem;}
[data-skin="popup"] >.bx >.in >.video video{display: block; width: 100%; height: auto;}
[data-skin="popup"] >.bx >.in >.video .v_stop{display: block; position: absolute; top: -9999px; left: -9999px;}
[data-skin="popup"] >.bx >.in >img{display: block; width: 800px; max-width: 100%; max-height: calc(100vh - 10rem); border-radius: 3rem 3rem 0 0;}
[data-skin="popup"] >.bx >.in >.desc{width: 800px; max-width: 100%; padding: 4rem; margin-top: -1px; background-color: #153E93; border-radius: 0 0 3rem 3rem; color: #FFF; font-size: 2rem; font-weight: 400; line-height: 1.5;}
[data-skin="popup"] >.bx .close{
    display: block; position: absolute; top: 0; left: 100%; width: 6.4rem; height: 6.4rem; border-radius: 50%; text-indent: -9999px; background-color: #fff; box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.2); cursor: pointer;
    -webkit-transform: translate(-125%,-50%); transform: translate(-125%,-50%);
}
[data-skin="popup"] >.bx .close:before{
    content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../../images/site/kor/onepage/sec04_img11.svg) no-repeat center center / 100% auto; border-radius: 50%;
    -webkit-transform: rotate(0); transform: rotate(0);
    -webkit-transition: all 0.15s linear; transition: all 0.15s linear;
}
[data-skin="popup"] >.bx .close:hover:before{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

/* 컨텐츠 팝업 */
[data-skin="popup"] >.inner{overflow: hidden; position: relative; width: 100%; max-width: 50rem; height: auto; margin: 0 3rem; border-radius: 0.8rem;}
[data-skin="popup"][data-size="l"] >.inner{max-width: calc(1440px + 4rem);}
[data-skin="popup"] >.inner >.titles{padding: 2rem 6rem 2rem 2rem; background: #17469E url(../../../images/site/kor/common/popup_img01.svg) no-repeat right bottom / auto 100%;}
[data-skin="popup"] >.inner >.titles >strong{display: block; font-size: 2.6rem; font-weight: 600; color: #fff; line-height: 1.2;}
[data-skin="popup"] >.inner >.in{padding: 2rem 2rem 4rem; background-color: #fff;}
[data-skin="popup"] >.inner >.in >.desc{overflow-y: auto; height: auto; max-height: 42.6rem;}
[data-skin="popup"][data-size="l"] >.inner >.in >.desc{max-height: 70vh;}
[data-skin="popup"] >.inner >.in >.desc::-webkit-scrollbar{width: 4px; border-radius: 10px;}
[data-skin="popup"] >.inner >.in >.desc::-webkit-scrollbar-thumb{background-color: #AAA; border-radius: 10px;}
[data-skin="popup"] >.inner >.in >.desc::-webkit-scrollbar-track{background-color: #EEE; border-radius: 10px;}

[data-skin="popup"] >.inner .close{
    display: block; position: absolute; top: 2.8rem; right: 2rem; width: 2rem; height: 2rem; background: url(../../../images/site/kor/common/popup_img02.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"] >.inner .close:hover{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

@media screen and (max-width: 640px){
    [data-skin="popup"] >.bx >.in >.desc{padding: 3rem; font-size: 1.9rem; font-weight: 400;}
}

/*-------------------------------------------------------------------
    탭
-------------------------------------------------------------------*/
[data-skin="tab"]{}
[data-skin="tab"] >.tab_cont >div{display: none;}
[data-skin="tab"] >.tab_cont >div.active{display: block;}

/* active 효과 있는 탭 */
[data-tab-btn]{display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0.8rem; }
[data-tab-btn] >li{}
[data-tab-btn] >li.active{}
[data-tab-btn] >li.active >a{}
[data-tab-btn] >li.active >a{}
[data-tab-cont]{}
[data-tab-cont] >*{display: none;}
[data-tab-cont] >*.active{display: block;}


/*-------------------------------------------------------------------
    인풋
-------------------------------------------------------------------*/
/* data-skin="input" */
[data-skin="input"]{display: block; }
[data-skin="input"] input{
    width: 100%; padding: 0 1.2rem; color: #1D1D1D; font-size: 1.5rem; line-height: 4.2rem; background-color: #fff; border: 1px solid #3C3C47; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03); border-radius: 0.8rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="input"][data-size="s"] input{line-height: 3.2rem;}
[data-skin="input"] input::placeholder{color: #7E7E87;}
/* data-skin="select" */
[data-skin="select"]{display: block;}
[data-skin="select"] select{
    width: 100%; padding: 0 30px 0 12px; color: #fff; font-size: 13px; line-height: 42px; background: #101013 url(../images/select_img01.svg) no-repeat right 10px center / 10px auto; border: 1px solid #3C3C47; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03); border-radius: 8px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="select"][data-size="s"] select{line-height: 32px;}
/* data-skin="cal" */
[data-skin="cal"]{display: block;}
[data-skin="cal"] input{
    width: 100%; padding: 0 12px 0 40px; color: #fff; font-size: 13px; line-height: 42px; background: #101013 url(../images/cal_img01.svg) no-repeat left 12px center / 16px auto; border: 1px solid #3C3C47; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03); border-radius: 8px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="cal"][data-size="s"] input{line-height: 32px;}
[data-skin="cal"] input::placeholder{color: #7E7E87;}
/* data-skin="check" */
[data-skin="check"]{display: inline-flex; position: relative;}
[data-skin="check"] input{position: absolute; opacity: 0; visibility: hidden; }
[data-skin="check"] label{display: block; position: relative; padding-left: 24px; color: #fff; cursor: pointer;}
[data-skin="check"] label:before,
[data-skin="check"] label:after{
    content: ""; display: block; position: absolute; top: 3px; left: 0; width: 16px; height: 16px; border-radius: 3px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="check"] label:before{background-color: transparent; border: 1px solid #9E9EA4;}
[data-skin="check"] input:checked + label:before{background-color: #006AF5; border-color: #006AF5;}
[data-skin="check"] label:after{opacity: 0; background: url(../images/check_img01.svg) no-repeat center center / 100% auto;}
[data-skin="check"] input:checked + label:after{opacity: 1;}

[data-skin="check"][data-type="2"]{}
[data-skin="check"][data-type="2"] label{padding-left: 0; padding-right: 40px;}
[data-skin="check"][data-type="2"] label:before,
[data-skin="check"][data-type="2"] label:after{left: auto; right: 0; border-radius: 50px;}
[data-skin="check"][data-type="2"] label:before{width: 30px; background-color: #3e474b; border-color: #3e474b;}
[data-skin="check"][data-type="2"] label:after{
    opacity: 1; top: 5.5px; right: 16px; width: 11px; height: 11px; background: #101013;
}
[data-skin="check"][data-type="2"] input:checked + label:after{right: 3px; background: #fff;}
[data-skin="check"][data-type="3"] label:before,
[data-skin="check"][data-type="3"] label:after{border-radius: 50%;}
[data-skin="check"][data-type="3"] label:after{opacity: 1; background-image: url(../images/check_img03.svg);}
[data-skin="check"][data-type="3"] input:checked + label:after{background-image: url(../images/check_img01.svg);}

/* data-skin="radio" */
[data-skin="radio"]{display: inline-flex; position: relative;}
[data-skin="radio"] input{position: absolute; opacity: 0; visibility: hidden; }
[data-skin="radio"] label{display: block; position: relative; min-height: 2.1rem; padding-left: 2.4rem; color: #fff; cursor: pointer;}
[data-skin="radio"] label:before,
[data-skin="radio"] label:after{
    content: ""; display: block; position: absolute; top: 0.3rem; left: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="radio"] label:before{background-color: transparent; border: 1px solid #fff; background-color: #fff;}
[data-skin="radio"] input:checked + label:before{border-color: #006AF5;}
[data-skin="radio"] label:after{
    background-color: #006AF5;
    -webkit-transform: scale(0); transform: scale(0);
}
[data-skin="radio"] input:checked + label:after{
    -webkit-transform: scale(0.5); transform: scale(0.5);
}

[data-skin="radio"][data-type="2"] label{padding-left: 0; padding-right: 2.2rem;}
[data-skin="radio"][data-type="2"] label:before,
[data-skin="radio"][data-type="2"] label:after{left: auto; right: 0;}

/* data-skin="textarea" */
[data-skin="textarea"]{display: block; }
[data-skin="textarea"] textarea{
    width: 100%; height: auto; padding: 12px; min-height: 93px; background-color: #101013; border: 1px solid #2C2C35; resize: none; border-radius: 8px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="textarea"] textarea::placeholder{color: #7E7E87;}

/*-------------------------------------------------------------------
    테이블
-------------------------------------------------------------------*/
table{display: table; table-layout: fixed; border-collapse: collapse; position: relative; width: 100%;}
table caption{position: absolute; top: -9999px; left: -9999px; width: 0; height: 0; font-size: 0;}

[data-skin="table"]{border-top: 2px solid #000;}
[data-skin="table"] thead{background-color: #F8F8F8;}
[data-skin="table"] thead tr{border-bottom: 1px solid #D8D8D8;}
[data-skin="table"] thead tr th{height: 5rem; padding: 1.2rem 1rem; text-align: center; font-size: 1.7rem; color: #2D2D2D; line-height: 1.4; font-weight: 600; border-right: 1px solid #D8D8D8;}
[data-skin="table"] thead tr th:last-child{border-right: 0;}
[data-skin="table"] tbody{}
[data-skin="table"] tbody tr{}
[data-skin="table"] tbody tr th,
[data-skin="table"] tbody tr td{height: 5rem; padding: 1.2rem 1rem; text-align: center; font-size: 1.6rem; color: #353535; line-height: 1.4; font-weight: 500; border-bottom: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8;}
[data-skin="table"] tbody tr *:last-child{border-right: 0;}
[data-skin="table"] tbody tr th{font-size: 1.7rem; color: #151515; line-height: 1.4; font-weight: 600; border-right: 1px solid #D8D8D8; background-color: #F8F8F8;}
[data-skin="table"] thead tr .br,
[data-skin="table"] tbody tr .br{border-right: 1px solid #D8D8D8;}

@media screen and (max-width: 800px){
    .table_scroll{}
    .table_scroll .move{overflow-x: auto;}
    .table_scroll .move [data-skin="table"]{width: 900px;}
}

@media screen and (max-width: 640px){
    .table_scroll .move [data-skin="table"]{width: 700px;}
}

table[data-type="2"]{border-top: 2px solid #000; border-bottom: 1px solid #AAA;}
table[data-type="2"] thead{background-color: #F8F8F8;}
table[data-type="2"] thead th{height: 5rem; padding: 1.2rem; border-right: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; text-align: center; color: #2D2D2D; font-size: 1.7rem; line-height: 1.4; font-weight: 600;}
table[data-type="2"] thead th:last-child{border-right: 0;}
table[data-type="2"] tbody td{height: 5rem; padding: 1.2rem; border-right: 1px solid #D8D8D8; text-align: center; color: #353535; font-size: 1.6rem; line-height: 1.4;}
table[data-type="2"] tbody td:last-child{border-right: 0;}

/* 스크롤 테이블 */
.scroll_table{overflow-x: auto; }
.scroll_table table{width: 1400px;}

/*-------------------------------------------------------------------
    리스트
-------------------------------------------------------------------*/
[data-skin="list"]{}
[data-skin="list"] >li{position: relative; text-align: left;}
[data-skin="list"] >li{position: relative; padding-left: 2rem; font-size: 1.6rem; color: #353535; line-height: 1.4;}
[data-skin="list"] >li:not(:first-child){margin-top: 0.4rem;}
[data-skin="list"] >li:before{content: ""; display: block; position: absolute; top: 0.9rem; left: 0.8rem; width: 3px; height: 3px; background-color: #353535; border-radius: 50%;}
[data-skin="list"][data-type="2"] >li:before{width: 6px; height: 1px; border-radius: 0;}