@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 .icon-LR {width: 60px; height: 60px; display: block; object-fit: contain;}

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


.chatbot {padding: 100px 0 150px;}
.chatbot .tit {text-align: center; color: var(--dark);}
.chatbot .tit + .txt {margin-top: 20px;}
.chatbot .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: 40px 50px;}
.ul-situation>li + li {margin-top: 100px;}
.ul-situation .situation {-webkit-flex-shrink: 0; flex-shrink: 0; width: clamp(166px, 14.0625vw, 270px); color: var(--dark); white-space: pre-line;}

.ul-select-type {width: 100%; max-width: 1260px; display: -webkit-flex; display: flex; justify-content: start; align-content: start; flex-wrap: wrap; 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); 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;}
.ul-situation>li:nth-child(odd) .ul-select-type .subject {background: #00B3FF; color: #fff;}
.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; border-radius: 0 0 15px 15px;}
.ol-difficulty .btn-difficulty {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){
    .chatbot {padding-top: 10vh; padding-bottom: 15vh;}
    .chatbot .txt {margin-bottom: 8vh;}
}

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

@media screen and (min-width:1441px){
    .ul-select-type>li {width: calc((100% - 20px*3)/4);}
}

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

@media screen and (min-width:911px) and (max-width:1440px){
    .ul-select-type>li {width: calc((100% - 20px*2)/3);}
}

@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 (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 (max-width:910px){
    .ul-situation>li {flex-direction: column;}
    .ul-situation .situation {width: 100%; white-space: unset; text-align: center;}
}

@media screen and (min-width:681px) and (max-width:910px){
    .ul-select-type>li {width: calc((100% - 20px*2)/3);}
}

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

@media screen and (min-width:481px) and (max-width:680px){
    .ul-situation .situation {width: 100%; white-space: unset; text-align: center;}
    .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;}

    .ul-select-type {justify-content: center;}
    .ul-select-type>li {width: 100%; max-width: 300px;}
    .ul-select-type .subject {height: 74px;}
    .ul-select-type .ribbon {transform: scale(0.75);}
    .ul-select-type .ribbon-top-right {top: -8px; right: -8px;}
}