@charset "utf-8";

/* Check */
.check-group { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.check-group:not(:has(.check label span)) {justify-content: center;}
.check-group .check-group-inr { display: flex; align-items: center; justify-content: flex-start; }
.inputCheck { display: inline-flex; align-items: center; position: relative; }
.inputCheck + .inputCheck {margin-left: 30px;}
.inputCheck label { display: flex; align-items: center; position: relative;  min-width: 20px; min-height: 20px; }
.inputCheck label span { display: inline-block; vertical-align: top; margin-left: 22px; font-weight: 400; font-size: 0.875rem; line-height: 20px;  letter-spacing: -0.05em; color: #0F0F0F; }
.inputCheck label:before,
.inputCheck label:after { content: ""; position: absolute; }
.inputCheck label:before { top: 4px; left: 0; width: 14px; height: 14px; margin: 0; border: 1px solid #B7B7B7; background-color: #fff; }
.inputCheck>input { position: absolute; top: 4px; left: 0; width: 14px; height: 14px; margin: 0; }
.inputCheck>input:checked+label:before { border-color: #fff; background-color: #000; }
.inputCheck>input:checked+label:after { top: 7px; left: 3px; width: 8px; height: 6px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg); }
.inputCheck>input[disabled]+label span { color: #bdbdbd; }
.inputCheck>input[disabled="disabled"]+label span { color: #bdbdbd; }
.inputCheck>input[disabled]+label:before { border: 1px solid #bdbdbd; background-color: #eee; }
.inputCheck>input[disabled="disabled"]+label:before { border: 1px solid #bdbdbd; background-color: #eee; }
.inputCheck>input[disabled]:checked+label:before { border-color: #bdbdbd; background-color: #bdbdbd; }
.inputCheck>input[disabled="disabled"]:checked+label:before { border-color: #bdbdbd; background-color: #bdbdbd; }
.inputCheck>input[disabled]:checked+label:after { border-color: #eee; }
.inputCheck>input[disabled="disabled"]:checked+label:after { border-color: #eee; }

/* datepicker */
.datepicker-group { display: flex; align-items: center; }
.datepicker { display: inline-flex; align-items: center; position: relative; width: 164px; height: 44px;  }
.datepicker input { width: 100%; height: 100%; background: #fff url(../images/icon/icon_calender.svg)no-repeat right 10px center; border: 1px solid #B7B7B7; padding: 10px;  font-size: 14px; border-radius: 8px; color: #666666; font-weight: 500;}

.datepicker + .datepicker {margin-left: 26px;}
.datepicker + .datepicker::before {content: ""; display: block; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 10px; height: 3px; background: #003B7D;}

/* Buttons */
.btn-group { display: flex; position: relative; }
.btn_center { justify-content: center; }
.btn-group .btn-group-inr { width: 100%; }
.btn-group .btn-group-inr.left { text-align: left; }
.btn-group .btn-group-inr.right { text-align: right; }
.btn-group .btn-group-inr.center { text-align: center; }
.btn-group .btn-group-inr.centerB { width: initial; position: absolute; left: 50%; transform: translateX(-50%); }
a.btn {display: inline-flex; align-items: center; justify-content: center;}

.btn-group { width: 100%; }
.btn { font-weight: 700; }
.btn + .btn { margin-left: 16px; }
.btn.size1 {width: 110px; height: 40px; font-size: 16px; line-height: 40px;}
.btn.color1 {background: #EFF1F5; color: #1C1C1C;}
.btn:disabled { background: #ECECEC; border: 1px solid #D4D4D4; color: #919191; }
.btn[disabled="disabled"] { background: #ECECEC; border: 1px solid #D4D4D4; color: #919191; pointer-events: none; cursor: not-allowed; }

.btn.size154_40 {
    width: 100%;
    max-width: 152px; 
    height: 40px;
}
.btn.size172_56 {
    width: 100%;
    max-width: 172px; 
    height: 56px;
}

.btn.outline {
    border: 1px solid #111111;
    background-color: #fff;
}
.btn.outline:hover,
.btn.outline:focus-visible {
    background-color: #E5E5E5;
}
.btn.outline.active {
    background-color: #919191;
}
.btn.fill {
    background-color: #232EA3;
    border: 1px solid #232EA3;
    color: #fff;
}
.btn.fill:hover,
.btn.fill:focus-visible {
    background-color: #4F58B5;
    border: 1px solid #1260C4;
}
.btn.fill.active {
    background-color: #0E1241;
    border: 1px solid #0E1241;
} 

/* inputText */
.inputText-group { display: flex; align-items: center; }
.inputText { display: inline-flex; align-items: center; position: relative; height: 40px; }
.inputText > input {border: 1px solid #B7B7B7; padding: 10px 12px;  width: 100%; height: 100%; font-size: 14px; line-height: 26px; letter-spacing: -0.05em;  color: #666666;}

.inputText.full {width: 100%;}
.inputText.size1 {width: 88px;}
.inputText.size2 {width: 115px;}


/* 이동영역 */
.hpUtilBox {
    position: fixed;
    bottom: 53px;
    right: 40px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.hpUtilBox.end_top {
    position: absolute;
    bottom: 400px;
}

@media screen and (max-width: 1279px) {
    .hpUtilBox.end_top {
        bottom: 568px;
    }
}

@media screen and (max-width: 767px) {
    .hpUtilBox {
        right: 16px;
        bottom: 16px;
    }
    .hpUtilBox.end_top {
        bottom: 822px;
    }
}


@media screen and (max-width: 585px) {
    .hpUtilBox.end_top {
        bottom: 852px;
    }
}
@media screen and (max-width: 435px) {
    .hpUtilBox.end_top {
        bottom: 877px;
    }
}
@media screen and (max-width: 422px) {
    .hpUtilBox.end_top {
        bottom: 905px;
    }
}
@media screen and (max-width: 411px) {
    .hpUtilBox.end_top {
        bottom: 930px;
    }
}
@media screen and (max-width: 377px) {
    .hpUtilBox.end_top {
        bottom: 960px;
    }
}
@media screen and (max-width: 373px) {
    .hpUtilBox.end_top {
        bottom: 989px;
    }
}

/* 상단으로 바로가기 */
.go_top {
    display: flex;
    width: 60px;
    height: 60px;
    padding: 12px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    gap: 6px;
    background: #2D2D2D;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
}
.go_top .top_ico {
    content: '';
    display: block;
    width: 16px;
    height: 8px;
    background-repeat: no-repeat;
    background-image: url(/static/home/images/icons/ico-top-btn-white-85d86f064ffa8f3f682a71ed0fdccc7c.svg);
    background-position: center;
    position: relative;
    top: 0;
}
.go_top .top_txt {
    overflow: hidden;
    color: #FFF;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */
}
.go_top:hover {
    background-color: #0D5A5C;
}
.go_top:hover .top_txt {
    color: #FFF;
}
.go_top.end_top {
    position: absolute;
    bottom: 254px;
}

@media screen and (max-width: 767px) {
    .go_top { 
        right: 16px;
    }
    .go_top.end_top {
        right: 16px;
    }
}


/* selectbox */
.select .selectbox .option {
    border-radius: 0;
}
.select .selectbox .option ul > li.active button {
    background: #fff;
    color: #1D1D1D;
    font-weight: 600;
}
.select .selectbox .option ul > li button:hover,
.select .selectbox .option ul > li button:focus-visible {
    background: #F5F5F5;
    text-decoration: underline;
    color: #111111;
}
.select .selectbox > button:after {
    background-image: url(../images/icon/icon_subdepbox_arrow.svg);
}


/* 서브탭 */
.tab-group {} 
.tab-group .tabBtn {}
.tab-group .tabBtn > .btn {
    display: none;
}
.tab-group .tabBtn > ul {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #707070;
    border-left: 1px solid #707070;
    box-sizing: border-box;

}
.tab-group .tabBtn > ul > li {
    border-right: 1px solid #707070;
    border-bottom: 1px solid #707070;
}
.tab-group .tabBtn > ul > li .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: initial;
    width: 100%;
    height: 51px;

}
.tab-group .tabBtn > ul > li.active .btn {
    background-color: #111111;
    color: #fff;
}
.tab-group .tabBtn > ul > li .btn:hover,
.tab-group .tabBtn > ul > li .btn:focus-visible {
    background-color: #D3D5ED;
    text-decoration: underline;
}

.tab-group .tabBtn.col-1 > ul > li {width: 100%;}
.tab-group .tabBtn.col-2 > ul > li {width: 50%;}
.tab-group .tabBtn.col-3 > ul > li {width: 33.33%;}
.tab-group .tabBtn.col-4 > ul > li {width: 25%;}
.tab-group .tabBtn.col-mul > ul > li {width: 20%;}


.tab-group .tabCont {
    margin-top: 40px;
}
.tab-group .tabCont > ul {}
.tab-group .tabCont > ul > li {
    display: none;
}
.tab-group .tabCont > ul > li.on {
    display: block;
}

@media screen and (max-width: 1279px) {

    .tab-group .tabBtn.col-4 > ul > li {width: 50%;}
    .tab-group .tabBtn.col-mul > ul > li {width: 33.33%;}

}

@media screen and (max-width: 767px) {

    .tab-group .tabBtn {
        position: relative;
        width: 100%;
        height: 48px;
    }
    .tab-group .tabBtn > ul {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .tab-group .tabBtn > ul > li {
        width: 100% !important;
        order: 2;
        display: none;
    }
    .tab-group .tabBtn > ul.open {
        z-index: 1;
    }
    .tab-group .tabBtn > ul.open > li {
        display: block;
    }
    .tab-group .tabBtn > ul > li.active {
        order: 1;
        display: block;
    }
    .tab-group .tabBtn > ul > li .btn {
        position: relative;
        background-color: #313131;
        color: #fff;
        justify-content: space-between;
        padding: 14px 12px 14px 14px;
    }
    .tab-group .tabBtn > ul > li.active .btn:after {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(../images/icon/icon_arrow_down_white.svg);
    }
    .tab-group .tabBtn > ul.open > li.active .btn:after {
        background-image: url(../images/icon/icon_arrow_up_white.svg);
    }

}