@charset "UTF-8";

.visual {position: relative; width: 100%; background-image: url('../img/main/visual.png'); background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 128px; font-family: 'Gmarket Sans', sans-serif;}

.visual .txt-area {position: relative; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;}

/* .visual .bubble {position: absolute; top: -53.22px; right: -44px; width: 64px; font-size: 1.75rem;} */
.visual .bubble {position: absolute; top: 18.78px; right: -32px; width: 64px; font-size: 1.75rem;}
.visual .bubble img {display: block; width: 100%; height: 100%; object-fit: contain;}
.visual .bubble span {position: absolute; top: 8px; left: 50%; transform: translateX(-50%); text-align: center; font-weight: 700; color: #fff;}

.visual-txt {font-weight: 500; font-size: 1.375rem; color: #666666; margin-top: 269px; margin-bottom: 1rem;}
.visual-tit {font-weight: 700; font-size: 3.75rem; color: var(--darkgray); margin-top: 269px;}
.visual-txt + .visual-tit {margin-top: 0;}


.title1 {margin-bottom: 50px;}


.contents {background: #fff; padding-top: 100px; padding-bottom: 140px;}
.contents .content-wrap {width: 100%; margin-bottom: 80px;}
.contents .content-wrap:last-child {margin-bottom: 0;}
.contents .content-wrap .tit-area {display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 14px;}
.contents .content-wrap .tit-area .sub-tit {display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 110px; padding: 7px 20px; background: var(--tiffanyblue); border-radius: 4px; font-weight: 800; font-size: 1.25rem; color: #fff; text-align: center; margin-bottom: -1px;}
.contents .content-wrap .tit-area .txt {font-size: 1.125rem;}
.contents .content-wrap .tit-area .txt .tint {font-weight: 500; color: var(--highlight); line-height: 1.6;}
.contents .content-wrap.grade .tit-area {justify-content: space-between;}
.btn-popup {height: 2.5rem; padding: 6px 14px; border-radius: 6px; background: #fff; border: 2px solid var(--highlight); font-weight: 800; font-size: 1rem; color: var(--highlight);}
.btn-rec {margin-left: auto;}

.list-convert {display: -webkit-flex; display: flex; justify-content: end; align-items: center; gap: 6px;}
.list-convert button {width: 2.5rem; height: 2.5rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid var(--border);}
.list-convert button svg {width: 1.25rem; height: 1.25rem; fill: #707070;}
.list-convert button.active svg {fill: var(--highlight);}


.contents .content-wrap .textbook-area {width: 100%; margin-top: 30px;}
.contents .content-wrap .textbook-area .grade {width: 100%; margin-bottom: 40px;}
.contents .content-wrap .textbook-area .grade:last-child {margin-bottom: 0;}
.contents .sub-tit2 {display: flex; justify-content: start; align-items: center; gap: 12px; font-weight: 800; font-size: 1.125rem; color: var(--darkgray); margin-bottom: 12px;}
.contents .sub-tit2 i {font-size: 0.556em; color: rgba(254,71,56,1);}

.ul-textbook.gallery {display: grid;}
.ul-textbook.gallery .book-area .thumb {display: block; position: relative; width: 100%; padding-bottom: calc(100% - 2px); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px;}
.ul-textbook.gallery .book-area .thumb>img {display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: cover; border-radius: 14px;}

.ul-textbook.webzine .book-area {display: grid; grid-template-columns: 78px 1fr; grid-template-rows: calc(1.05rem + 10px) auto; gap: 12px; align-items: start; margin-bottom: 20px;}
.ul-textbook.webzine .book-area .thumb {display: block; position: relative; width: 100%; padding-bottom: calc(100% - 2px); border: 1px solid var(--border); border-radius: 14px; grid-row: 1 / span 2;}
.ul-textbook.webzine .book-area .thumb>img {display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: cover; border-radius: 14px;}

.stroke {position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px;  fill: none; stroke: var(--highlight); stroke-linecap: butt; stroke-width: 3; stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset .8s;}
.stroke:hover {stroke-linecap: round; stroke-dashoffset: 0;}
.rect:first-child {width: 100%; height: 100%; stroke: none;}
.rect:nth-child(2) {width: calc(100% - 3px); height: calc(100% - 3px); fill: none;}

.ul-textbook.gallery .book-area .thumb .lv {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; padding: 5px 14px; position: absolute; bottom: 6px; left: 6px; background: var(--highlight); color: #fff; font-size: 0.875rem; white-space: nowrap; border-radius: 6px 6px;}
.ul-textbook.webzine .book-area .thumb .lv {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; padding: 4px 10px; position: absolute; bottom: 4px; left: 4px; background: var(--highlight); color: #fff; font-size: 0.75rem; white-space: nowrap; border-radius: 4px 4px;}

.ul-textbook .thumb .learning {display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); border-radius: 14px; font-weight: 800; color: #fff;}
.ul-textbook.gallery .thumb .learning {row-gap: 24px; font-size: 1.25rem;}
.ul-textbook.webzine .thumb .learning {row-gap: 10px; font-size: 12px;}
.ul-textbook .thumb .learning .mark-continue {width: -moz-max-content; width: -webkit-max-content; width: max-content; padding: 14px 24px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; column-gap: 16px; border-radius: 999px; background: var(--highlight); font-size: 1.125rem; color: #fff;}
.ul-textbook .thumb .learning .mark-continue>span {-webkit-flex-shrink: 0; flex-shrink: 0;}
.ul-textbook.webzine .thumb .learning .mark-continue {transform: scale(0.4); margin-top: -1px;}
.ul-textbook.gallery .thumb .learning .mark-continue i {font-size: 0.875rem;}
.ul-textbook.webzine .thumb .learning .mark-continue i {font-size: 8px;}

.ul-textbook .thumb .icon-complete {position: absolute;}
.ul-textbook.gallery .thumb .icon-complete {width: 88px; top: 12px; right: 12px;}
.ul-textbook.webzine .thumb .icon-complete {width: 44px; top: 4px; right: 4px;}
.ul-textbook .thumb .icon-complete img {display: block; width: 100%; height: 100%; object-fit: contain;}

/* .ul-textbook .book-area p {width: 100%; padding: 5px 20px; background: #F5F5F5; border-radius: 4px; font-size: 1.125rem; margin-bottom: 12px;} */
.ul-textbook .book-area p {width: 100%; padding: 5px 12px; border-radius: 4px; margin-bottom: 12px;}
.ul-textbook .book-area p:last-child {margin-bottom: 0;}
.ul-textbook .book-area .series {background: #F5F5F5; font-size: 0.875rem;}
.ul-textbook .book-area .textbook-name {background: #e8f7f6; font-size: 1rem;}
.ul-textbook .book-area p span {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}


.ul-step {display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 84px; margin-top: 60px;}
.ul-step .circle {position: relative; width: 150px; height: 150px; border-radius: 50%;}

.ul-step .circle:nth-last-child(5) {background-color: rgba(0, 174, 168, .6);}
.ul-step .circle:nth-last-child(4) {background-color: rgba(0, 174, 168, .7);}
.ul-step .circle:nth-last-child(3) {background-color: rgba(0, 174, 168, .8);}
.ul-step .circle:nth-last-child(2) {background-color: rgba(0, 174, 168, .9);}
.ul-step .circle:last-child {background-color: rgba(0, 174, 168, 1);}

.ul-step .circle::before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; content: ''; width: 112%; height: 112%; border-radius: 50%;}
.ul-step .circle:nth-last-child(5)::before {border: 1px solid rgba(0, 174, 168, .6);}
.ul-step .circle:nth-last-child(4)::before {border: 1px solid rgba(0, 174, 168, .7);}
.ul-step .circle:nth-last-child(3)::before {border: 1px solid rgba(0, 174, 168, .8);}
.ul-step .circle:nth-last-child(2)::before {border: 1px solid rgba(0, 174, 168, .9);}
.ul-step .circle:last-child::before {border: 1px solid rgba(0, 174, 168, 1);}

/* 화살표 시작 */
.ul-step .circle:nth-last-child(5)::after {color: rgba(0, 174, 168, .65);}
.ul-step .circle:nth-last-child(4)::after {color: rgba(0, 174, 168, .75);}
.ul-step .circle:nth-last-child(3)::after {color: rgba(0, 174, 168, .85);}
.ul-step .circle:nth-last-child(2)::after {color: rgba(0, 174, 168, .95);}
.ul-step .circle:last-child::after {display: none;}
/* 화살표 끝 */

.ul-step .circle>* {width: 95%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.25rem; color: #fff; text-align: center; line-height: 1.7;}
.ul-step .circle small {font-size: 0.875rem; white-space: nowrap;}


.notice-area {margin-top: 30px; font-size: 1.125rem;}
.notice-area .info {margin-bottom: 40px;}
.notice-area .info.last {margin-bottom: 20px;}
.notice-area .ul-info .item {line-height: 1.6;}

.notice-area .notice {color: var(--red);}

.notice-area .btn-area {display: -webkit-flex; display: flex; justify-content: center; align-items: center; column-gap: 50px; margin-top: 120px;}
#btn_register {display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 300px; height: 50px; border-radius: 999px; background: var(--highlight); font-weight: 700; font-size: 1.5rem; color: #fff;}





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    .contents .content-wrap .tit-area .txt {margin-left: 14px;}
    .contents .sub-tit2 i {margin-right: 12px;}
    .ul-step .circle {margin-right: 84px;}
    .ul-step .circle:last-child {margin-right: 0;}
    .notice-area .btn-area .btn {margin-right: 50px;}
    .notice-area .btn-area .btn:last-child {margin-right: 0;}
}



@media screen and (max-width:1200px){
    .visual {padding-left: 50px; padding-right: 50px;}
    .contents {padding-left: 50px; padding-right: 50px;}
}

@media screen and (min-width:993px){
    .visual {height: 100vh;}
    
    .ul-textbook.gallery {grid-template-columns: repeat(4, 1fr); gap: 24px;}
    .ul-textbook.gallery .book-area:nth-child(4n-2) {transition-delay: 0.1s;}
    .ul-textbook.gallery .book-area:nth-child(4n-1) {transition-delay: 0.2s;}
    .ul-textbook.gallery .book-area:nth-child(4n) {transition-delay: 0.3s;}

    .ul-textbook.webzine {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
    .ul-textbook.webzine .book-area:nth-child(2n) {transition-delay: 0.1s;}

    .ul-step .circle::after {width: 84px; line-height: 84px;}
}

@media screen and (max-width:992px){
    .visual {height: 620px; padding-top: 100px; padding-left: 40px; padding-right: 40px;}
    /* .visual .bubble {top: -50.08px; right: -40px; width: 60px;} */
    .visual .bubble {top: 10.92px; right: -40px; width: 60px;}
    .visual .bubble span {top: 7px;}
    .visual-txt {margin-top: 154px;}
    .visual-tit {margin-top: 154px;}
    .visual-txt + .visual-tit {margin-top: 0;}
    .title1 {margin-bottom: 40px;}
    .contents {padding-top: 80px; padding-bottom: 120px; padding-left: 40px; padding-right: 40px;}
    .contents .content-wrap {margin-bottom: 60px;}
    .ul-step {gap: 58px; margin-top: 50px;}
    .ul-step .circle {width: 130px; height: 130px;}
    .ul-step .circle::after {width: 58px; line-height: 58px;}
    .notice-area .btn-area {margin-top: 100px;}



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .ul-step .circle {margin-right: 58px;}
        .ul-step .circle:last-child {margin-right: 0;}
    }
}

@media screen and (min-width:769px) and (max-width:992px){
    .ul-textbook.gallery {grid-template-columns: repeat(3, 1fr); gap: 16px;}
    .ul-textbook.gallery .book-area:nth-child(3n+2) {transition-delay: 0.1s;}
    .ul-textbook.gallery .book-area:nth-child(3n) {transition-delay: 0.2s;}
}

@media screen and (min-width:769px){
    .ul-step .circle::after {position: absolute; top: 50%; left: 100%; transform: translateY(-50%); display: block; content: '\f105'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.25rem; text-align: center;}
    .ul-step .circle:nth-child(2) {transition-delay: 0.1s;}
    .ul-step .circle:nth-child(3) {transition-delay: 0.2s;}
    .ul-step .circle:nth-child(4) {transition-delay: 0.3s;}
    .ul-step .circle:nth-child(5) {transition-delay: 0.4s;}
}

@media screen and (max-width:768px){
    .visual {height: 540px; padding-top: 90px; padding-left: 30px; padding-right: 30px;}
    /* .visual .bubble {top: -42.23px; right: -30px; width: 50px; font-size: 1.375rem;} */
    .visual .bubble {top: -1.23px; right: -30px; width: 50px; font-size: 1.375rem;}
    .visual-txt {font-size: 1.125rem;}
    .visual-tit {font-size: 2.5rem;}
    .visual-txt + .visual-tit {margin-top: 0;}
    .title1 {margin-bottom: 30px;}
    .contents {padding-left: 30px; padding-right: 30px;}
    .contents .content-wrap:not(.grade) .tit-area {flex-direction: column; align-items: start; row-gap: 30px;}
    .ul-textbook.gallery {grid-template-columns: repeat(2, 1fr); gap: 16px;}
    .ul-textbook.gallery .book-area:nth-child(2n) {transition-delay: 0.1s;}
    /* .ul-step {width: 400px; margin: 0 auto; margin-top: 40px; flex-wrap: wrap;}
    .ul-step .circle:nth-child(2) {transition-delay: 0.1s;}
    .ul-step .circle:nth-child(2)::after {top: auto; bottom: -58px; left: 50%; transform: translateX(-50%); content: '\f107';}
    .ul-step .circle:nth-child(3) {order: 4;}
    .ul-step .circle:nth-child(3)::after {content: '\f104'; left: -58px;}
    .ul-step .circle:nth-child(4) {order: 3; transition-delay: 0.1s;} */

    .ul-step {flex-direction: column;}
    .ul-step .circle::after {position: absolute; bottom: -58px; left: 50%; transform: translateX(-50%); display: block; content: '\f107'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.25rem; text-align: center;}


    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .contents .content-wrap .tit-area .txt {margin-top: 30px;}
    }
}

@media screen and (max-width:480px){
    .visual {background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, .6)), url('../img/main/visual.png'); height: 360px; padding-top: 68px; padding-left: 16px; padding-right: 16px;}
    /* .visual .bubble {top: -32.81px; right: -18px; width: 38px; font-size: 1.125rem;} */
    .visual .bubble {top: -2.81px; right: -18px; width: 38px; font-size: 1.125rem;}
    .visual .bubble span {top: 6px;}
    .visual-txt {margin-top: 110px; font-size: 1rem;}
    .visual-tit {margin-top: 110px; font-size: 2.125rem;}
    .visual-txt + .visual-tit {margin-top: 0;}
    .contents {padding-top: 60px; padding-bottom: 100px; padding-left: 16px; padding-right: 16px;}
    .contents .content-wrap {margin-bottom: 44px;}
    .contents .content-wrap .tit-area {row-gap: 16px;}
    .contents .content-wrap .textbook-area {margin-top: 16px;}
    .contents .content-wrap .textbook-area .grade {margin-bottom: 32px;}
    .ul-textbook.gallery {gap: 10px;}
    .ul-textbook.gallery .book-area .thumb {margin-bottom: 10px;}
    /* .ul-textbook.gallery .book-area p {padding: 5px 14px; margin-bottom: 10px;} */
    .ul-textbook.gallery .book-area p {margin-bottom: 10px;}
    /* .ul-step {width: auto; gap: 54px;}
    .ul-step .circle {width: 40%; height: auto; padding-bottom: 40%;}
    .ul-step .circle::after {width: 54px; line-height: 54px;}
    .ul-step .circle:nth-child(2)::after {bottom: -54px;}
    .ul-step .circle:nth-child(3)::after {left: -54px;} */



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        .contents .content-wrap .tit-area .txt {margin-top: 16px;}
        .ul-step .circle {margin-right: 54px;}
        .ul-step .circle:last-child {margin-right: 0;}
    }
}