/* set font */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

* {
    font-family: 'Pretendard-Regular', sans-serif !important;
}

:root{
    --sf-order-yellow : #fcdb4e;
    --sf-order-yellow-light : #fef9dc;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type="number"] {-moz-appearance: textfield;}

/* main color checkbox set */
.main-checkbox {display: flex;align-items: center;gap: .5rem;}
.main-checkbox .round { position: relative; }
.main-checkbox .round label { background-color: #fff; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; height: 28px; width: 28px; display: block; }
.main-checkbox.sm .round label { height: 24px; width: 24px; }
.main-checkbox.lg .round label { height: 32px; width: 32px; }
.main-checkbox .round label:after {  border: 2px solid #fff; border-top: none; border-right: none; content: ""; height: 6px; left: 8px; opacity: 0; position: absolute; top: 9px; transform: rotate(-45deg); width: 12px; }
.main-checkbox.sm .round label:after {  height: 5px; left: 7px; opacity: 0; top: 8px; width: 10px; }
.main-checkbox.lg .round label:after {  height: 8px; left: 9px; opacity: 0; top: 10px; width: 14px; }
.main-checkbox .round input[type="checkbox"] { visibility: hidden; display: none; opacity: 0; }
.main-checkbox .round input[type="checkbox"]:checked + label { background-color: #a69688; border-color: #a69688; }
.main-checkbox .round input[type="checkbox"]:checked + label:after { opacity: 1; }

/* main color checkbox set */
.main-checkbox-ol {display: flex;align-items: center;gap: .5rem;}
.main-checkbox-ol .square { position: relative; }
.main-checkbox-ol .square label { background-color: #fff; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; height: 28px; width: 28px; display: block; }
.main-checkbox-ol.sm .square label { height: 24px; width: 24px; }
.main-checkbox-ol.lg .square label { height: 32px; width: 32px; }
.main-checkbox-ol .square label:after {  border: 2px solid #fff; border-top: none; border-right: none; content: ""; height: 6px; left: 8px; opacity: 0; position: absolute; top: 9px; transform: rotate(-45deg); width: 12px; }
.main-checkbox-ol.sm .square label:after {  height: 5px; left: 7px; opacity: 0; top: 8px; width: 10px; }
.main-checkbox-ol.lg .square label:after {  height: 8px; left: 9px; opacity: 0; top: 10px; width: 14px; }
.main-checkbox-ol .square input[type="checkbox"] { visibility: hidden; display: none; opacity: 0; }
.main-checkbox-ol .square input[type="checkbox"]:checked + label { background-color: #fcdb4e; border-color: #fff; }
.main-checkbox-ol .square input[type="checkbox"]:checked + label:after { opacity: 1; }

/* main color radio set */
.main-radio-ol {display: flex;align-items: center;gap: .5rem;}
.main-radio-ol .square { position: relative; }
.main-radio-ol .square label { background-color: #fff; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; height: 28px; width: 28px; display: block; }
.main-radio-ol.sm .square label { height: 24px; width: 24px; }
.main-radio-ol.lg .square label { height: 32px; width: 32px; }
.main-radio-ol .square label:after {  border: 2px solid #fff; border-top: none; border-right: none; content: ""; height: 6px; left: 8px; opacity: 0; position: absolute; top: 9px; transform: rotate(-45deg); width: 12px; }
.main-radio-ol.sm .square label:after {  height: 5px; left: 7px; opacity: 0; top: 8px; width: 10px; }
.main-radio-ol.lg .square label:after {  height: 8px; left: 9px; opacity: 0; top: 10px; width: 14px; }
.main-radio-ol .square input[type="radio"] { visibility: hidden; display: none; opacity: 0; }
.main-radio-ol .square input[type="radio"]:checked + label { background-color: #fcdb4e; border-color: #fff; }
.main-radio-ol .square input[type="radio"]:checked + label:after { opacity: 1; }


/*------ modal */
/* Modal 배경 */
.mypage-modal {position: fixed;z-index: 1060;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.4); /* 반투명 배경 */visibility: hidden; /* 처음에 모달은 숨겨짐 */opacity: 0; /* 투명 상태 */transition: opacity 0.3s ease, visibility 0s 0.3s; /* opacity와 visibility 트랜지션 */}
/* Modal이 보일 때 */
.mypage-modal.show {visibility: visible; /* 보이게 설정 */opacity: 1; /* 불투명 상태 */transition: opacity 0.3s ease, visibility 0s 0s; /* opacity와 visibility 트랜지션 */}
/* Modal 내용 */
.mypage-modal .modal-content {background-color: white;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;max-width: 350px;}
/* 닫기 버튼 */
.mypage-modal .close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
.mypage-modal .close:hover,
.mypage-modal .close:focus {color: black;text-decoration: none;cursor: pointer;}



/* carousel button custum set */
.flickity-button.previous {position:absolute;top: 18px;right: auto;left: 600px;opacity: 1;z-index: 0!important;}
.flickity-button.next {position:absolute;top: 18px;left: auto;right: 600px;opacity: 1;z-index: 0!important;}
.inspiro-slider:hover .flickity-button.previous, .carousel:hover .flickity-button.previous {position:absolute;top: 18px;right: auto;left: 600px;opacity: 1;}
.inspiro-slider:hover .flickity-button.next, .carousel:hover .flickity-button.next {position:absolute;top: 18px;left: auto;right: 600px;opacity: 1;}
.inspiro-slider.dots-inside .flickity-page-dots, .carousel.dots-inside .flickity-page-dots { bottom: 30px; position: absolute; }
.flickity-prev-next-button.previous:hover
,.flickity-prev-next-button.next:hover
,.flickity-prev-next-button:hover {background-color: #f5a615!important; ;}

.heading-text { margin-bottom: 0; }

/* dl init */
dl,dt,dd{margin: 0;}
/* set shadow-md */
.shadow-md{box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1) !important;}

/* header */
#mainMenu .dropdown-menu > li > a:focus,
#mainMenu .dropdown-menu > li > a:hover,
#mainMenu .dropdown-menu > li > a:active,
#mainMenu .dropdown-menu > li > span:focus,
#mainMenu .dropdown-menu > li > span:hover,
#mainMenu .dropdown-menu > li > span:active
{
    background-color: #d0cece !important;
    color: black !important;
}
#mainMenu .dropdown > li > a {
    color: white !important;
}

@media (min-width: 1480px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1480px!important;
    }
}
#header .header-inner #logo, #header #header-wrap #logo { border-bottom: 1px solid #f5f5f5; }
@media (min-width: 1480px) {
    #header .header-inner #logo {
        _width: 309px;
    }
}
ul.top-menu > li:not(.paid){
    > a {
        text-align: center;
        &:hover , &:focus {color: #e7ae02!important;}
    }
    &:hover,&:focus{
        > a{color: #e7ae02!important;}
    }
}

#mainMenu nav {
    width: 100%;
    & ul.top-menu{
        & li{
            margin: 0;
            & a { display: inline-block;width: 100%;font-weight: normal;font-size:1.25rem;text-align: center;  }
            & ul.dropdown-menu{
                border: none;width: 100%;min-width: 100%; background-color: rgba(251,245,225,.8);margin: 0;
                & li{
                    width: 100%;text-align: center;
                    & a:hover{background-color: #facd74!important;}
                }
                & li:hover{
                    background-color: #facd74!important;
                    & :first-child{
                        border-top-left-radius: 4px;border-top-right-radius: 4px;
                        a {border-top-left-radius: 4px;border-top-right-radius: 4px;}
                    }
                    & :last-child{
                        border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
                        a {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;}
                    }
                }
            }
        }
    }
}

#mainMenu:not(.menu-overlay) nav > ul > li > a > span {
    font-size: 1.25rem;
}

@media (min-width: 1480px) {
    #mainMenu nav {
        & ul.top-menu {
            display: flex;justify-content: center;
            & li {
            }
        }
    }
}

@media (max-width: 1479px) {
    #mainMenu:not(.menu-overlay) {
        max-height: 0;
        clear: both;
        display: block;
        width: 100%;
        opacity: 1;
        overflow: hidden;
        -webkit-transition: max-height 0.8s cubic-bezier(0.79, 0.14, 0.15, 0.86), opacity 0.8s cubic-bezier(0.79, 0.14, 0.15, 0.86);
        transition: max-height 0.8s cubic-bezier(0.79, 0.14, 0.15, 0.86), opacity 0.8s cubic-bezier(0.79, 0.14, 0.15, 0.86);
    }
}
@media (max-width: 1479px) {
    .mainMenu-open #header .header-inner, .mainMenu-open #header #header-wrap {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        background-color: #fff !important;
    }
}
@media (max-width: 1479px) {
    #header .header-inner, #header #header-wrap {
        height: auto;
    }
}


@media (max-width: 1479px) {
    #mainMenu-trigger {
        position: relative;
        opacity: 1;
        visibility: visible;
    }
}

@media (min-width: 1480px) {
    #header .header-inner #logo, #header #header-wrap #logo { border-bottom: none; }
    #mainMenu nav {
        width: calc(100% - 309px);display: flex;justify-content: space-between;
        & ul.top-menu:not(.sm) {
            flex-grow: 1;
            & li {
                width: 16%;
                & ul.dropdown-menu {
                    width: 133px;min-width: 133px;
                    & li {
                        width: 133px;
                    }
                }
            }
        }
        & ul.top-menu.sm {
            flex-grow: 0;
            & li a {
                font-size: .9rem;
            }
            & li.paid a span{
                display: inline-block;padding: .25rem .5rem!important;border-radius: 5px!important; background-color:#f5a615 ;color: #fff!important;font-size: .9rem!important;
            }
        }
    }
}



/* main */
.swiper {width: 100%;}
.swiper-slide {
    background-position: center;background-size: cover;width: 100%;height: 100%;
    img{display: block;width: 100%;}
}

@media (min-width: 992px) {
    .swiper-slide {width: 1480px;height: 450px;}
}

.page-desc {
    background-color: #fbf5e1;text-align: center;padding: .95rem 0;margin-bottom: 5rem;
    & h2{margin: 0}
    & p{margin: 0;font-size: 1rem}
}

._content-info-wrap{
    width: 90%; margin: 0 auto;margin-bottom: 5rem;
    & > div {gap: 3rem}
    & img {width: 100%}
    & .intro-program{
        padding: 2.5rem;border: 5px solid #dbe5f7;border-radius: 20px;position: relative;width: 30%;
        justify-content: space-evenly;margin-top: 35px;
        & > span {font-weight: bold;position: absolute;top: -24px;left: calc(50% - 75px);background-color: #b8ccef;color: #183565;display: inline-block;padding: .75rem 1.25rem;border-radius: 8px;font-size: 1.5rem}
        & > a {text-align: center;}

    }
    & .intro-ebook{
        & > span {font-size: 2rem;line-height: 2rem; font-weight: bold;text-align: center;margin-bottom: .5rem;color: #403139;}
        & > div {background-color: #f5f5f5;border-radius: 20px;padding: 2rem; gap: 1rem;}
    }
    & .intro-act{
        padding: 2.5rem;border: 5px solid #f9edf2;border-radius: 20px;position: relative;width: 30%;justify-content: space-evenly;margin-top: 35px;
        & > span {font-weight: bold;position: absolute;top: -24px;left: calc(50% - 75px);background-color: #f3dbe5;color: #663366;display: inline-block;padding: .75rem 1.25rem;border-radius: 8px;font-size: 1.5rem}
        & > a {text-align: center;}
    }
}
@media (max-width: 991.98px) {
    ._content-info-wrap {
        & div > div.intro-program {margin-top: 0!important; }
    }
}
@media (max-width: 1480px) {
    ._content-info-wrap {
        & div > div.intro-program {
            width: 100% !important;
            justify-content: start !important;
        }

        & div > div.intro-ebook {
            width: 100% !important;
            justify-content: start !important;
        }

        & div > div.intro-act {
            width: 100% !important;
            justify-content: start !important;
        }
    }
}

.age-intro-wrap{
    width: 90%; margin: 0 auto 5rem auto;
    & img {width: 100%}
}
@media (min-width: 1480px) {
    .age-intro-wrap{
        width: 1480px; margin: 0 auto 5rem auto;
    }
}
.notice-wrap{
    width: 90%; margin: 0 auto 5rem auto;
    & > div {margin-bottom: 2rem; }
    & ul{
        width: 100%; gap: 1rem; justify-content: space-between;
        & li{
            background-color: #f5f5f5; border-radius: 10px;width: 100%;
            & a{
                display: inline-block; width: 100%;padding: 4rem 0;text-align: center;
                dl dt{font-size: 1.25rem;margin-bottom: .5rem}
                dl dd{font-size: 1.5rem;padding: 0 1rem}
            }
            & a,& a:hover,& a:focus{color: #333!important;}
        }
    }

}

/* 동화 배너 */
.content-info-wrap{
    width: 90%;margin: 0 auto 5rem auto;
    & .carousel {
        & h4 {position: absolute;top: -15px;width: 250px;background-color: #fff;left: calc(50% - 125px);margin: 0}
    }
}
@media (min-width: 1480px) {
    .content-info-wrap{
        width: 1480px;margin: 0 auto 5rem auto;
        & .carousel {
            & h4 {top: -20px;}
        }
    }
}
/*사이트 설명*/
.site-intro-wrap {
    width: 90%;margin: 0 auto 5rem auto;
    & > div {
        min-height: 200px;padding: 3rem 0;border: 1px solid #183565;border-radius: 20px;
        & h4 {
            position: absolute;top: -20px;width: 250px;left: calc(50% - 125px);font-size: 24px;color: #183565;background-color: #fff;font-weight: normal;
        }
        & ul {
            display: flex;justify-content: space-around;padding: 0 .5rem;flex-wrap: wrap;gap: 1rem;
            & li {
                width:calc(50% - 1rem);
                & a img {width: 100%;}
            }
        }
    }

}
@media (min-width: 1480px) {
    .site-intro-wrap{
        width: 1480px;margin: 0 auto 5rem auto;
        & > div > h4 {
            font-size: 34px;top: -25px;
        }
        & > div > ul {
            padding: 0 2rem;
            & li{
                width:24%;
            }
        }
    }
}


@media (min-width: 1480px) {
    .page-desc {

        & p {margin: 0;font-size: 1.125rem}
    }
    ._content-info-wrap{
        width: 1480px;
        & > div {gap: 5rem}
        & .intro-ebook{
            & > div {gap: 0;}
        }
    }
    .notice-wrap{
        width: 1480px;
        & ul li { width: 25%; }
    }
}
/* 통이미지 컨텐츠 관련 */
.body-inner{
    .img-content-wrap {
        margin: 3rem auto;
        img {width: 100%;}
    }
}

@media (min-width: 1480px) {
    .body-inner{
        .img-content-wrap { width: 1000px; }
    }
}

/* footer */
ul,li{list-style: none;padding: 0;margin: 0}
footer.footer{

    padding-top: 1.5rem;border-top: 1px solid #f5f5f5;
    & > .footer-content {
        width: 100%;margin: 0 auto;

        & > div{
            gap: 2rem;
            & > div {text-align: center}
            & > div:nth-child(2) {
                width: 90%;margin: 0 auto;gap: 1rem;
                & .site-info li {text-align: left;}
                & > ul li a{ display: inline-block;width: 100%; }
                & a,& a:hover,& a:focus{color: #333!important;}
            }
        }
        & dl.cs-number{margin: 0 auto;gap:1rem;}
        & dl.cs-number dt {font-size: 2rem;line-height: 2rem;}
        & dl.cs-number dd {font-size: 4rem;line-height: 4rem;}
    }

    & .copyright-content{
        padding: 30px 0;font-size: 13px;background-color: #f1f1f3;
        & ul{width: 100%; margin: 0 auto; padding: 0;}
    }

}

@media (max-width: 1479px) {
    .footer-content {
        & dl.cs-number {width: 90%;margin: 0 auto;}
        & dl.cs-number dt {font-size: 1rem!important;line-height: 1rem!important;text-align: left;}
        & dl.cs-number dd {font-size: 1rem!important;line-height: 1rem!important;text-align: left;}
    }
}

@media (min-width: 1480px) {

    footer.footer{
        & > .footer-content {
            width: 1480px;

            & > div {
                gap: 12rem;width: auto;

                & > div {flex-grow: 0;}
                & > div:nth-child(2) {
                    gap: 2rem;
                    flex-grow: 1;
                    text-align: center;
                }
            }

        }
        & .copyright-content{
            & ul{width: 1480px;}
        }
    }

}



.ebook-sample{position: absolute;top: -70px;right:-15px;width: 60px!important;height: 60px!important; ;}
@media (min-width: 1480px) {
    .ebook-sample{position: absolute;top: -112px;right:-15px;width: 80px!important;height: 80px!important;}
}




/* 결제페이지 */
.-sec-order-wrap{
    & .card{
        width: 90%;
        padding: 0 1rem;
        & .card-header {
            padding: 3rem 0 1rem 0;
        }
        & .card-body {
            padding-left:0 ;
            padding-right:0 ;

        }

    }
    & ul.setDate{
        & li {
            cursor: pointer;padding: 1rem 2rem;background-color: var(--sf-order-yellow-light);border: var(--sf-order-yellow) 1px solid;border-radius: 10px;width: 100%;
            & .-circle-marker > span {width: 30px;height: 30px;border: 1px solid var(--sf-order-yellow);border-radius: 50%;}
            & .-order-info b{font-size: 1.2rem}
            & .-order-info span{font-size: 1.125rem}
        }
        & li.active{
            & .-circle-marker > span  > span {width: 18px;height: 18px;background-color: var(--sf-order-yellow);border-radius: 50%}
        }
    }
    & ul.setAge{
        & li {cursor: pointer;background-color: var(--sf-order-yellow-light);padding: 2rem 0;border-radius: 10px;gap: .5rem;font-size: 1.25rem}
        & li.active{background-color: var(--sf-order-yellow);}
    }

    .setMoney { color: #f4a616;font-size: 2rem;font-weight: bold }

}

.buyr-detail {
    gap: 1rem;margin-top: 1.5rem;
    & > div label {min-width: 100px;}
}

.-order-paymethod{
    gap: 1rem;
    flex-wrap: wrap;
    & li {
        width: 100%;padding: 2rem; border:1px solid var(--sf-order-yellow);border-radius: 10px;justify-content: center;
        gap: 2rem;cursor: pointer;
        & div {text-align: center;& img {height: 50px;}}
        & span {font-size: 1.5rem;text-align: center;display: flex;align-items: center;justify-content: center}
    }
}

@media (min-width: 1480px) {
    .-sec-order-wrap{
        & .card{ padding: 0 5rem; width: 60%; }
        & ul.setDate{ & li {width: calc(50% - 7px);} }
        & ul.setAge { & li {padding: 4rem 0;} }
        .-order-paymethod{
            gap: 5rem;flex-wrap: nowrap;;
            & li {
                width: 33.33333333333%;padding: 2rem; border:1px solid var(--sf-order-yellow);border-radius: 10px;justify-content: center;gap: 2rem;cursor: pointer;max-width: 290px;
                & div {text-align: center;& img {height: 182px;}}
                & span {font-size: 1.5rem;text-align: center;}
            }
        }
        .setMoney { font-size: 3rem; }
    }
}


/* 결제완료 */
#page-content{
    & .container{
        & > div {
            width: 90%;
            & .order-info{
                display: flex;gap: 4rem;flex-direction: column;
                & dl{

                    display: flex;gap: 2rem;font-size: 1.25rem;text-align: center;
                    & dt{
                        display: inline-block;
                        width: 100px;
                        font-weight: normal;

                    }
                    & dd{
                        display: inline-block;
                        width: calc(100% - 100px);
                        text-align: left;
                    }
                    & dd.paid-money{
                        color: #f5a615;
                        font-size: 2.5rem;
                    }
                }
            }
        }
    }
}
@media (min-width: 1480px) {
    #page-content{
        & .container{
            & > div {
                width: 75%;
                & .order-info{
                    margin: 5rem;
                    & dl{
                        font-size: 1.5rem;
                        & dt{width: 300px;}
                        & dd{width: calc(100% - 300px);}
                        & dd.paid-money{color: #f5a615;font-size: 2.5rem;}
                    }
                }
            }
        }
    }
}





/* 탭을 감싸는 박스 */
.mypage-tabs-wrapper {
    display: flex;
    border-bottom: 1px solid #ccc;
}

/* 탭들 */
.mypage-tabs {
    display: flex;
    cursor: pointer;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.mypage-tab {
    background-color: #f1f1f1;
    border-right: 1px solid #ccc;
    text-align: center;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.mypage-tab a{
    display: inline-block;
    padding: 10px 40px;
}

.mypage-tab:hover
,.mypage-tab:hover a {
    color: #f5a615!important;;
}

.mypage-tab.active {
    background-color: #fff;
    border-bottom: 2px solid #fff;
    font-weight: bold;
}