@charset "UTF-8";

#header {-webkit-flex-shrink: 0; flex-shrink: 0; height: 98px; background: var(--blue900); display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
#header .inner {position: relative; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}
#header .theme {display: -webkit-flex; display: flex; align-items: flex-end; gap: 8px; margin-right: auto;}
#header .theme .ko {color: #fff; font-family: "Danjunghae", sans-serif; font-size: 1.5rem; font-weight: 400; line-height: 100%; letter-spacing: var(--ls-title-ko);}
#header .theme .en {color: #fff; font-family: "Noto Sans", sans-serif; font-size: 1.375rem; font-weight: 453; line-height: 100%; letter-spacing: var(--ls-text-en);}
#header .theme .en + .type::before {content: ''; width: 0.125rem; height: 1.5rem; background: #fff; display: inline-block;}
#header .theme .type {display: -webkit-flex; display: flex; align-items: center; gap: 0.5rem;}

#header .subject {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: right; display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 7px;}

#header .btn-area {-webkit-flex-shrink: 0; flex-shrink: 0; display: -webkit-flex; display: flex; justify-content: end; align-items: center; gap: 22px; margin-left: auto;}
#header .btn-area>* {-webkit-flex-shrink: 0; flex-shrink: 0; width: 36px; height: 36px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; position: relative;}
#header .btn-area>* + *::before {content: ''; width: 2px; height: 26px; background: #fff; margin: 0 10px; position: absolute; top: 50%; right: 100%; transform: translateY(-50%);}
#header .btn-area svg, 
#header .btn-area img {-webkit-flex-shrink: 0; flex-shrink: 0; width: 100%; height: 100%; object-fit: contain; display: block;}
#header .btn-area .icon-close path {stroke: #fff;}
#header .btn-area i {-webkit-flex-shrink: 0; flex-shrink: 0; color: #fff; text-align: center; font-size: 24px;}


.presentation {padding: 100px 0 150px;}
.presentation .tit {text-align: center; color: var(--dark);}
.presentation .tit + .txt {margin-top: 20px;}
.presentation .txt {text-align: center; color: var(--dark); margin-bottom: 80px;}

.ul-select-type {width: 100%; max-width: 1580px; display: -webkit-flex; display: flex; justify-content: start; align-content: start; flex-wrap: wrap; gap: 34px 20px; margin: 0 auto;}
.ul-select-type>li {text-align: center; border-radius: 15px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); position: relative;}

/* 맛보기 리본 */
.ul-select-type .ribbon {width: 110px; height: 110px; overflow: hidden; position: absolute;}
.ul-select-type .ribbon::before, 
.ul-select-type .ribbon::after {content: ''; position: absolute; z-index: -1; display: block; border: 5px solid #eb9c09;}
.ul-select-type .ribbon span {width: 185px; padding: 14px 0; position: absolute; display: block; background-color: #ffbf00; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); color: #fff; font-size: 20px; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.2); text-transform: uppercase; text-align: center;}
.ul-select-type .ribbon-top-right {top: -10px; right: -10px;}
.ul-select-type .ribbon-top-right::before,
.ul-select-type .ribbon-top-right::after {border-top-color: transparent; border-right-color: transparent;}
.ul-select-type .ribbon-top-right::before {top: 0; left: 0;}
.ul-select-type .ribbon-top-right::after {bottom: 0; right: 0;}
.ul-select-type .ribbon-top-right span {top: 15px; left: -20px; transform: rotate(45deg);}
/* //맛보기 리본 */

.ul-select-type .subject {width: 100%; height: 120px; padding: 0 20px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; text-align: center; font-family: "Danjunghae", sans-serif; font-size: 2rem; font-weight: 400; line-height: 140%; letter-spacing: var(--ls-title-ko); white-space: pre-line; border-radius: 15px 15px 0 0;}

.ol-difficulty {height: 80px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 5px; background: #FFF; border-radius: 0 0 15px 15px;}
.ol-difficulty .btn-difficulty {-webkit-flex-shrink: 0; flex-shrink: 0; width: 50px; height: 50px; display: block; position: relative;}
.ol-difficulty .circle {width: 15px; height: 15px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;}

.ol-difficulty .rookie .circle {background: #A7ED4C;}
.ol-difficulty .semipro .circle {background: #FF3333;}
.ol-difficulty .pro .circle {background: #4C167C;}
.ol-difficulty .master .circle {background: linear-gradient(135deg, #FBF6C9 13.01%, #FBD75F 28.75%, #E8B22A 52.36%, #E8B22C 61.81%, #E8B534 67.32%, #E8B943 72.04%, #E8C05A 76.76%, #E9C460 79.91%, #EDCF71 83.06%, #F4E28E 87.78%, #FBF3A8 90.93%);}

.ol-difficulty .btn-difficulty img {width: 0px; height: 0px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all 0.3s linear;}
.ol-difficulty .btn-difficulty:hover img {width: auto; height: 50px;}





@media screen and (max-height:910px){
    .presentation {padding-top: 10vh; padding-bottom: 15vh;}
    .presentation .txt {margin-bottom: 8vh;}
}

@media screen and (max-width:1580px){
    .presentation {padding-left: 50px; padding-right: 50px;}
}

@media screen and (max-width:1440px){
    .presentation {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-l);}
}

@media screen and (min-width:1281px){
    .ul-select-type>li {width: calc((100% - 20px*4)/5);}
    :is(
        .ul-select-type>li:nth-child(-n+5), 
        .ul-select-type>li:nth-child(n+11):nth-child(-n+15)
    ) .subject {background: #00B3FF; color: #fff;}
    :is(
        .ul-select-type>li:nth-child(n+6):nth-child(-n+10), 
        .ul-select-type>li:nth-child(n+16):nth-child(-n+20)
    ) .subject {background: #BEECFF; color: var(--dark);}
}

@media screen and (max-width:1280px){
    .ul-select-type .subject {height: 96px;}
    .ul-select-type .ribbon {transform: scale(0.875); transform-origin: top right;}
    .ul-select-type .ribbon-top-right {top: -9px; right: -9px;}
}

@media screen and (min-width:851px) and (max-width:1280px){
    #header {height: 76px;}
}

@media screen and (min-width:841px) and (max-width:1280px){
    .ul-select-type>li {width: calc((100% - 20px*3)/4);}
    :is(
        .ul-select-type>li:nth-child(-n+4), 
        .ul-select-type>li:nth-child(n+9):nth-child(-n+12), 
        .ul-select-type>li:nth-child(n+17):nth-child(-n+20)
    ) .subject {background: #00B3FF; color: #fff;}
    :is(
        .ul-select-type>li:nth-child(n+5):nth-child(-n+8), 
        .ul-select-type>li:nth-child(n+13):nth-child(-n+16)
    ) .subject {background: #BEECFF; color: var(--dark);}
}

@media screen and (max-width:1024px){
    .ol-difficulty {height: 70px;}
    .ol-difficulty .btn-difficulty {width: 40px; height: 40px;}
    .ol-difficulty .btn-difficulty:hover img {height: 40px;}
}

@media screen and (min-width:621px) and (max-width:840px){
    .ul-select-type>li {width: calc((100% - 20px*2)/3);}
    :is(
        .ul-select-type>li:nth-child(-n+3), 
        .ul-select-type>li:nth-child(n+7):nth-child(-n+9), 
        .ul-select-type>li:nth-child(n+13):nth-child(-n+15)
    ) .subject {background: #00B3FF; color: #fff;}
    :is(
        .ul-select-type>li:nth-child(n+4):nth-child(-n+6), 
        .ul-select-type>li:nth-child(n+10):nth-child(-n+12), 
        .ul-select-type>li:nth-child(n+16):nth-child(-n+18)
    ) .subject {background: #BEECFF; color: var(--dark);}
}

@media screen and (max-width:850px){
    #header .inner {
        display: grid; gap: 8px 10px;
        grid-template-areas: 
        "h-theme h-btn"
        "h-subject h-btn";
    }
    #header .theme {grid-area: h-theme;}
    #header .subject {grid-area: h-subject; position: static; transform: none; justify-content: start;}
    #header .btn-area {grid-area: h-btn;}
}

@media screen and (max-width:768px){
    .ol-difficulty {height: 65px;}
    .ol-difficulty .btn-difficulty {width: 35px; height: 35px;}
    .ol-difficulty .btn-difficulty:hover img {height: 35px;}

    .presentation .txt {margin-bottom: 5vw;}
}

@media screen and (min-width:381px) and (max-width:620px){
    .ul-select-type>li {width: calc((100% - 20px)/2);}
    :is(
        .ul-select-type>li:nth-child(-n+2), 
        .ul-select-type>li:nth-child(n+5):nth-child(-n+6), 
        .ul-select-type>li:nth-child(n+9):nth-child(-n+10), 
        .ul-select-type>li:nth-child(n+13):nth-child(-n+14), 
        .ul-select-type>li:nth-child(n+17):nth-child(-n+18)
    ) .subject {background: #00B3FF; color: #fff;}
    :is(
        .ul-select-type>li:nth-child(n+3):nth-child(-n+4), 
        .ul-select-type>li:nth-child(n+7):nth-child(-n+8), 
        .ul-select-type>li:nth-child(n+11):nth-child(-n+12), 
        .ul-select-type>li:nth-child(n+15):nth-child(-n+16)
    ) .subject {background: #BEECFF; color: var(--dark);}
}

@media screen and (max-width:480px){
    #header {height: 76px;}
    #header .inner {gap: 5px 10px; padding-right: 16px;}
    #header .theme .ko {font-size: 13px;}
    #header .theme .en {font-size: 11px;}
    #header .theme .en + .type::before {width: 1px;}
    #header .subject {font-size: 25px; white-space: nowrap;}
    #header .subject .badge-stamp {width: 25px; height: 25px;}
    #header .btn-area>* {width: 30px; height: 30px;}
    #header .btn-area>* + *::before {height: 20px; margin: 0 8px;}
    #header .btn-area i {font-size: 20px;}

    .presentation .txt {margin-bottom: 6vw;}
    
    .ul-select-type {gap: 20px;}
    .ul-select-type .subject {height: 74px;}
    .ul-select-type .ribbon {transform: scale(0.75);}
    .ul-select-type .ribbon-top-right {top: -8px; right: -8px;}
}

@media screen and (max-width:380px){
    .ul-select-type {justify-content: center;}
    .ul-select-type>li {width: 100%; max-width: 300px;}
    .ul-select-type>li:nth-child(odd) .subject {background: #00B3FF; color: #fff;}
    .ul-select-type>li:nth-child(even) .subject {background: #BEECFF; color: var(--dark);}
}