@charset "utf-8";.basicSlider_btn {
    position: absolute;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background-color: #a68965;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1
}

.basicSlider_btn.off {
    pointer-events: none !important
}

.basicSlider_btn.hover {
    background-color: #a1693f
}

.basicSlider_btn.next {
    background-position: 9px center;
    background-image: url(../../contents/images/button/btn_next_white.svg)
}

.basicSlider_btn.prev {
    background-position: 6px center;
    background-image: url(../../contents/images/button/btn_prev_white.svg)
}

.basicSlider_tabs {
    position: absolute;
    top: -30px;
    right: 28px;
    height: 30px;
    display: flex;
    align-items: flex-end;
    z-index: 99;
}

.basicSlider_tabs>li {
    cursor: pointer;
    font-family: YGJAL;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    padding: 6px 14px 4px;
    background-color: #cfb9a5;
    border-radius: 10px 10px 0 0
}

.basicSlider_tabs>li.hover,.basicSlider_tabs>li.on {
    background-color: #fd9f3e;
    color:#fff;
}
.green .basicSlider_tabs>li.hover, .green .basicSlider_tabs>li.on {background: #37a259}

.basicSlider_tabs>li:not(:last-of-type) {
    margin-right: 5px
}

.contentsBox.right .basicSlider_tabs {
    position: absolute;
    top: 10px;
    right: -51px;
    height: auto;
    flex-direction: column;
    align-items: flex-start
}

.contentsBox.right.intro-class .basicSlider_tabs {
    top:40px;
    right:-69px;
}

.contentsBox.right .basicSlider_tabs>li {
    position: relative;
    width: 40px;
    display: block;
    padding: 13px 10px;
    border-radius: 0 15px 15px 0;
    text-align: center;
    color: #fff;
    line-height: 1.5em;
    font-family: YGJAL;
    font-size: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.contentsBox.right .basicSlider_tabs>li:not(:last-of-type) {
    margin-bottom: 10px;
    margin-right: 0
}

.contentsBox.right .basicSlider_tabs>li.hover,.contentsBox.right .basicSlider_tabs>li.on {
    width: 68px;
    padding: 13px 13px;
    color:#fff;
}
.contentsBox.right.intro-class .basicSlider_tabs>li {
    width: 58px;
}
.contentsBox.right.intro-class .basicSlider_tabs>li.hover, .contentsBox.right.intro-class .basicSlider_tabs>li.on {
    width: 68px;
}

.contentsBox .basicSlider_slides {
    width: 100%;
    height: 100%;
    position:relative;
}

.contentsBox .basicSlider_slides>li {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 0;
    z-index: 0;
    top:0;
    left:0;
    /*overflow: hidden;*/
}
.popup_pages .contentsBox .basicSlider_slides>li {padding: 20px 20px 100px;box-sizing: border-box;}
.contentsBox .basicSlider_slides>li .mainText { font-size: 65px; text-align: center; width: 100%; height: 100%; font-family: NotoB; padding: 100px 10px; line-height: 1.5; }
.contentsBox .basicSlider_slides>li .mainText.oneLine { padding-top: 140px; }

.contentsBox .basicSlider_slides>li.on {
    display: flex;
    flex-direction: column;
    position: absolute !important;
    opacity: 1;
    z-index: 1;
}
.contentsBox.sideLeftSlider .basicSlider_slides>li, .contentsBox.sideTopSlider .basicSlider_slides>li{justify-content: center;}
/*.sideLeftSlider.images {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    height: 440px;*/
/*    gap: 10px;*/
/*    margin-top: 10px;*/
/*}*/
/*.sideLeftSlider.images .sideLeftSlider_tabs {*/
/*    padding: 0px;*/
/*}*/
/*.sideLeftSlider.images .basicSlider_slides {*/
/*    background-color: #CFB9A5;*/
/*}*/
/*.sideLeftSlider.images .basicSlider_slides .innerTab {*/
/*    padding: 0;*/
/*    left: 3px;*/
/*    top: 3px;*/
/*    width: calc(100% - 6px);*/
/*    height: calc(100% - 6px);*/
/*}*/
/*.sideLeftSlider.images .sideLeftSlider_tabs>li {*/
/*    background-color: #CFB9A5;*/
/*    border: 3px solid #CFB9A5;*/
/*    border-radius: 15px;*/
/*    padding: 0;*/
/*}*/
/*.sideLeftSlider.images .sideLeftSlider_tabs>li.on{*/
/*    border: 3px solid #FF6E0D;*/
/*}*/
/*.sideLeftSlider.images .sideLeftSlider_tabs>li:hover{*/
/*    border: 3px solid #FF6E0D;*/
/*}*/
/*.sideLeftSlider.type2 .sideLeftSlider_tabs>li{*/
/*    height: 80px;*/
/*}*/
/*.sideLeftSlider.images .sideLeftSlider_tabs.pages{*/
/*    overflow: hidden;*/
/*    justify-content: flex-start;*/
/*}*/
/*.sideLeftSlider.images .sideLeftSlider_tabs.pages>li {*/
/*    min-height: 102px;*/
/*}*/
/*.sideLeftSlider_tabs.pages .moveButtonContainer {*/
/*    top: -33px;*/
/*    bottom: auto;*/
/*    left: 78px;*/
/*    transform: translate(0, 0);*/
/*    flex-direction: column;*/
/*    gap: 445px;*/
/*}*/
/*.sideLeftSlider_tabs.pages .basicSlider_btn.prev {*/
/*    rotate: 90deg;*/
/*}*/
/*.sideLeftSlider_tabs.pages .basicSlider_btn.next {*/
/*    rotate: 90deg;*/
/*}*/
.contentsBox .basicSlider_slides>li.on.row{flex-direction: row; justify-content: space-between;}
.contentsBox .basicSlider_slides>li.on.row .how-to-box{width: 49%;}
.contentsBox .basicSlider_slides.inner {
    position: relative;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box
}
.contentsBox .basicSlider_slides>li .tabPageWrap {line-height: 1.4;}
.contentsBox .basicSlider_slides.inner.lineBox {
    height: auto
}

.contentsBox .basicSlider_slides.inner.lineBox>li {
    padding: 38px 26px;
    font-family: NotoB
}

.basicSlider_inner_tabs {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 52px 0 0;
    height: 30px
}

.basicSlider_inner_tabs>li {
    cursor: pointer;
    font-family: YGJAL;
    color: #fff;
    font-size: 15px;
    padding: 6px 14px 4px;
    border-radius: 10px 10px 0 0;
    background-color: #e7e7e7
}

.basicSlider_inner_tabs>li:not(:last-of-type) {
    margin-right: 5px
}

.basicSlider_inner_tabs>li.hover,.basicSlider_inner_tabs>li.on {
    background-color: #999
}

.basicSlider_circle_tabs {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: 1
}

.basicSlider_circle_tabs>li {
    width: 62px;
    height: 20px;
    border-radius: 30px;
    pointer-events: auto;
    background-color: #b4b4b4;
    box-sizing: border-box;
    cursor: pointer
}

.basicSlider_circle_tabs>li:not(:last-of-type) {
    margin-right: 6px
}

.basicSlider_circle_tabs>li.hover,.basicSlider_circle_tabs>li.on {
    background-color: #f60
}

.tableTab_container {
    position: relative;
    flex-grow: 1;
    display: flex;
    margin: 0 auto;
    font-family: NotoM;
    box-sizing: border-box
}

.tableTab_container .tableTab_tabs {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 210px;
    height: 100%;
    margin-right: 10px;
    border-right: 0;
    text-align: center;
    box-sizing: border-box
}

.tableTab_container .tableTab_tabs>li {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    color: #ed8d37;
    border: 3px solid #f4bb87;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: #fbe8d7
}

.tableTab_container .tableTab_tabs>li:not(:last-of-type) {
    margin-bottom: 10px
}

.tableTab_container .tableTab_tabs>li.on {
    background-color: #ed8d37;
    color: #fff
}

.tableTab_container .tableTab_slides {
    width: 100%;
    height: 100%;
    padding: 5px 20px;
    border: 3px solid #f4bb87;
    text-align: justify;
    border-radius: 0 10px 10px 0;
    background-color: #fff;
    box-sizing: border-box
}

.tableTab_container .tableTab_slides>li {
    display: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box
}

.tableTab_container .tableTab_slides>li.on {
    display: block
}

.tableTab_slides .scroll_container {
    width: 100%;
    height: 100%
}

.moveButtonContainer {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

.moveButtonContainer.order {
    position: static;
    bottom: auto;
    order: 1
}

.moveButtonContainer .basicSlider_circle_tabs {
    position: static;
    width: auto;
    margin: 0 12px
}

.moveButtonContainer .basicSlider_btn {
    position: static;
    background-size: 16px
}


/*이너탭*/


.innerBox { padding: 10px 20px; }
.innerBox.line-box { position: relative; }
/*.innerBox.line-box::before{ position: absolute; top: 0; left: 0; content: ''; display: block; width: 100%; height: 5px; background-color: #f7f7f7; border-radius: 5px; }*/

.innerButtonContainer {
    position: absolute;
    top: 60px;
    right: 0;
    /*left:50%;*/
    /*transform: translate(-50%,0);*/
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    z-index: 2;
}
.innerButtonContainer::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background-color: #f7f7f7;
    border-radius: 5px;
}
.innerButtonContainer.noLine::before {display: none;}
.howtoBox .innerButtonContainer {top:97px;}
.howtoBoxLine2 .innerButtonContainer {top:160px;}
.howtoBoxText .innerButtonContainer {top:111px;}
.howtoBoxNonText .innerButtonContainer {top:32px;}
.innerButtonContainer.order {
    position: static;
    bottom: auto;
    order: 1
}

.innerButtonContainer .innerSlider_tabs {
    position: static;
    width: auto;
    margin: 0 12px
}

.innerButtonContainer .basicSlider_btn {
    position: static;
    background-size: 16px
}



.innerSlider_tabs {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: 1
}

.innerSlider_tabs>li {
    pointer-events: auto;
    box-sizing: border-box;
    cursor: pointer;
    padding: 6px 13px 3px;
    font-family: YGJAL;
    font-size: 18px;
    color: #fff;
    background-color: #d1d1d1;
    border-radius: 9px 9px 0 0;
}


.innerSlider_tabs>li:not(:last-of-type) {
    margin-right: 6px
}

.innerSlider_tabs>li.hover,.innerSlider_tabs>li.on {
    background-color: #999999
}




/*사이드탭*/


.sideLeftSlider { display: flex; align-items: center; height: 480px; }
.sideLeftSlider.twoLine { display: flex; align-items: center; height: 460px; }
.sideLeftSlider .basicSlider_slides {
    position: relative;
    /*width: 100%;*/
    flex: 1;
    height: 100%;
    /*margin-left: -10px;*/
    background-color: #FDF3E7;
    border-radius: 15px;
    min-width: 1000px;
    /*max-width: 1000px;*/
    z-index: 3;
}

.sideLeftSlider .basicSlider_slides .innerTab {
    position: absolute;
    flex-direction: column;
    background: #fff;
    border-radius: 15px;
    left: 15px;
    top: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    padding: 15px 20px;
    font-size: 45px;
}

.sideLeftButtonContainer{width:auto; }

.sideLeftButtonContainer {
    /*position: absolute;*/
    /*top: 43px;*/
    /*right: 0;*/
    /*width: 100%;*/
    width: 190px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    z-index: 2;

}

.sideLeftButtonContainer.order {
    position: static;
    bottom: auto;
    order: 1
}

.sideLeftButtonContainer .innerSlider_tabs {
    position: static;
    width: auto;
    margin: 0 12px
}

.sideLeftButtonContainer .basicSlider_btn {
    position: static;
    background-size: 16px
}



.sideLeftSlider_tabs {
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    padding: 20px 0;
}

.sideLeftSlider_tabs>li {
    width: 100%;
    min-width: 145px;
    flex :1;
    /*min-height: 130px;*/
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    box-sizing: border-box;
    cursor: pointer;
    padding: 6px 13px 3px;
    font-family: NotoB;
    font-size: 35px;
    color: #fff;
    background-color: #CDCDCD;
    border: 7px solid #E7E7E7;
    border-radius: 9px 0 0 9px;
    margin-top: 10px;
}
.sideLeftSlider_tabs>li:nth-child(1){margin-top: 0;}


.sideLeftSlider_tabs>li:not(:last-of-type) {
    margin-right: 6px
}

.sideLeftSlider_tabs>li.hover,.sideLeftSlider_tabs>li.on {
    background-color: #F77D1A;
    border-color: #ffaa46;
}




/*상단탭*/



/*.sideTopSlider { display: flex; align-items: center; height: 480px; }*/
.sideTopSlider .basicSlider_slides {
    position: relative;
    width: 100%;
    height: 450px;
    background-color: #FDF3E7;
    border-radius: 15px;
    z-index: 3;
}

.sideTopSlider .basicSlider_slides .innerTab {
    position: absolute;
    background: #fff;
    border-radius: 15px;
    left: 15px;
    top: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    padding: 15px 20px;
    font-size: 45px;
}

.sideTopButtonContainer{width:auto; }

.sideTopButtonContainer {
    /*position: absolute;*/
    /*top: 43px;*/
    /*right: 0;*/
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;

}

.sideTopButtonContainer.order {
    position: static;
    bottom: auto;
    order: 1
}

.sideTopButtonContainer .innerSlider_tabs {
    position: static;
    width: auto;
    margin: 0 12px
}

.sideTopButtonContainer .basicSlider_btn {
    position: static;
    background-size: 16px
}



.sideTopSlider_tabs {
    width: 95%;
    display: flex;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: 1
}

.sideTopSlider_tabs>li {
    width: 100%;
    min-height: 90px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0px 13px 3px;
    font-family: NotoB;
    font-size: 35px;
    color: #fff;
    background-color: #CDCDCD;
    border: 7px solid #E7E7E7;
    border-radius: 9px 9px 0 0;
    margin-bottom: -10px;
}
.sideTopSlider_tabs>li:not(:last-of-type) {
    margin-right: 6px
}

.sideTopSlider_tabs>li.hover,.sideTopSlider_tabs>li.on {
    background-color: #F77D1A;
    border-color: #ffaa46;
}



/*이단원에서는 탭*/

.detailLearnContents .sideLeftSlider_tabs>li { min-height: 200px; border: none; font-family: YGJAL; }
.detailLearnContents .sideLeftSlider_tabs>li.on , .detailLearnContents .sideLeftSlider_tabs>li:hover{ background: #92D050; }
.detailLearnContents .orange .sideLeftSlider_tabs>li.on, .detailLearnContents .orange .sideLeftSlider_tabs>li:hover {background: #F28705;}
.detailLearnContents .sideLeftSlider .basicSlider_slides .innerTab { font-size: 50px;}
.detailLearnContents .sideLeftSlider .basicSlider_slides .innerTab.title {padding-top: 72px; }
.detailLearnContents .sideLeftSlider .basicSlider_slides h2 .dot+span { font-size: 50px; }
.detailLearnContents .sideLeftButtonContainer { z-index: 9; }

.detailLearnContents .sideLeftSlider .basicSlider_slides .innerTab .title { position: absolute; top: 0; left: 0; width: 100%; height: 75px; background: #FDF3E7; padding: 0 20px; }
.detailLearnContents .sideLeftSlider .basicSlider_slides { flex-basis: 100% !important; }