@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 .subject :is(.icon-LR, .icon-RA) {width: 3.75rem; height: 3.75rem; object-fit: contain; display: block;}

#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;}


.pronunciation {position: relative;}
.activity-type-swiper .swiper-slide {min-height: calc(var(--vh, 100dvh) - 98px); padding: 100px 0 150px; display: -webkit-flex; display: flex; flex-direction: column;}
.pronunciation .tit {text-align: center; color: var(--dark);}
.pronunciation .tit + .txt {margin-top: 20px;}
.pronunciation .txt {text-align: center; color: var(--dark); margin-bottom: 80px;}

.ul-situation {margin: 0 auto;}
.ul-situation>li {display: -webkit-flex; display: flex; justify-content: center; align-items: start; gap: 20px 50px;}
.ul-situation>li + li {margin-top: 100px;}
.ul-situation .situation {-webkit-flex-shrink: 0; flex-shrink: 0; width: 193px; color: var(--dark);}
.ul-situation .situation>p + p {margin-top: 5px;}

.ul-select-type {display: -webkit-flex; display: flex; justify-content: start; align-content: start; flex-wrap: wrap;}
:is(
    .LR, 
    .RA
) .ul-select-type {width: 100%; max-width: 1440px; padding: 0 15px; justify-content: center; gap: 34px 100px; margin: auto;}
.ul-situation .ul-select-type {width: calc(100% - 193px); max-width: 1260px; gap: 34px 20px;}

.ul-select-type>li {text-align: center; border-radius: 15px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); overflow: hidden;}
:is(
    .LR, 
    .RA
) .ul-select-type>li {width: calc((100% - 100px*2)/3);}
.ul-situation .ul-select-type>li {width: calc((100% - 20px*3)/4); max-width: 300px;}

.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; white-space: pre-line;}
.ul-select-type .subject:not(.btn-phoneme) {font-family: "Danjunghae", sans-serif; font-size: 2rem; font-weight: 400; line-height: 140%; letter-spacing: var(--ls-title-ko);}
:is(
    .RA, 
    .ul-situation>li:nth-child(odd)
) .ul-select-type .subject {background: #00B3FF; color: #fff;}
:is(
    .LR, 
    .ul-situation>li:nth-child(even)
) .ul-select-type .subject {background: #BEECFF; color: var(--dark);}

.ol-difficulty {height: 80px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; gap: 5px; background: #FFF;}
.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;}

.ul-select-type .btn-phoneme {display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.ul-select-type .btn-phoneme .phoneme {display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.ul-select-type .btn-phoneme .phoneme + .phoneme::before {content: 'vs'; font-family: "Noto Sans", sans-serif; font-weight: var(--fw-text-en); line-height: 140%; letter-spacing: var(--ls-text-en); font-stretch: var(--fst-text-en); font-size: var(--fs-text1); margin: 0 10px;}


.swiper-prev, 
.swiper-next {background: var(--highlight); top: calc((100px + 1.5rem*1.4 + 80px) + (100% - 100px - 150px - 1.5rem*1.4 - 80px)/2);}
:where(
    .swiper-prev, 
    .swiper-next, 
    .btn-prev-page, 
    .btn-next-page
)::after {color: #fff;}





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

@media screen and (max-width:1580px){
    .ul-situation, 
    :is(
        .LR, 
        .RA
    ) .ul-select-type {padding: 0 100px;}
}

@media screen and (max-width:1440px){
    :is(
        .LR, 
        .RA
    ) .ul-select-type {gap: 34px 50px;}
    :is(
        .LR, 
        .RA
    ) .ul-select-type>li {width: calc((100% - 50px*2)/3);}
}

@media screen and (max-width:1280px){
    .ul-situation .situation {width: 144px;}
    .ul-situation .ul-select-type {width: calc(100% - 144px);}
    .ul-select-type .subject {height: 96px;}
}

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

@media screen and (max-width:1024px){
    :is(
        .LR, 
        .RA
    ) .ul-select-type {gap: 34px 20px;}
    :is(
        .LR, 
        .RA, 
        .ul-situation
    ) .ul-select-type>li {width: calc((100% - 20px*2)/3);}

    .ol-difficulty {height: 70px;}
    .ol-difficulty .btn-difficulty {width: 40px; height: 40px;}
    .ol-difficulty .btn-difficulty:hover img {height: 40px;}
}

@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;}

    .ul-situation, 
    :is(
        .LR, 
        .RA
    ) .ul-select-type {padding: 0 70px;}
}

@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;}

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

    .ul-situation>li {flex-direction: column;}
    .ul-situation .situation {width: 100%;}
    .ul-situation .ul-select-type {width: 100%;}
}

@media screen and (min-width:381px) and (max-width:620px){
    :is(
        .LR, 
        .RA, 
        .ul-situation
    ) .ul-select-type>li {width: calc((100% - 20px)/2);}
}

@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;}
    
    .pronunciation .txt {margin-bottom: 6vw;}
    :is(
        .LR, 
        .RA, 
        .ul-situation
    ) .ul-select-type {gap: 20px;}
    :is(
        .LR, 
        .RA, 
    ) .ul-select-type>li {width: 100%;}
    .ul-select-type .subject {height: 74px;}
}

@media screen and (max-width:380px){
    .ul-situation .ul-select-type>li {width: 100%;}
}