@charset "UTF-8";

:root {
    --primary: #515151;
    --purple0: #FAF9FF;
    --purple10: #DAD1FF;
    --purple30: #957EFF;
    --highlight: #5D25FE;
    --border: #E3E8EF;
    --darkgray: #3d3d3d;

    --gray90: #1E2124;
    --gray80: #33363D;
    --gray60: #58616A;
    --gray40: #8A949E;
    --gray20: #CDD1D5;
    --gray5: #F4F5F6;
    --white: #FFF;

    --green: #16B381;
    --blue: #335EEB;
    --pink: #E33AAA;

    --ai: #EEF6FD;
    --me: #F5F2FF;

    --dim: rgba(0, 0, 0, 0.50);

    /* inner */
    --inner-width: 1440px;
    --inner-padding: 0px;
    --inner-padding-l: 0px;
    --inner-padding-r: 0px;
    
    /* viewport */
    --vh: 100dvh;

    /* header */
    --header-height: 80px;
    
    /* border */
    --border-solid: 1px solid var(--border);

    /* box shadow */
    --shadow: 0 2px 10px 0 rgba(103, 110, 134, 0.1);

    /* letter spacing */
    --ls: -0.02em;
}

.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}
.mt80 {margin-top: 80px;}
.mt90 {margin-top: 90px;}
.mt100 {margin-top: 100px;}

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb70 {margin-bottom: 70px;}
.mb80 {margin-bottom: 80px;}
.mb90 {margin-bottom: 90px;}
.mb100 {margin-bottom: 100px;}
.mb200 {margin-bottom: 200px;}

.pl20 {padding-left: 20px;}
.pl40 {padding-left: 40px;}

.pr20 {padding-right: 20px;}
.pr40 {padding-right: 40px;}

.fw-t {font-weight: 100;}
.fw-el {font-weight: 200;}
.fw-l {font-weight: 300;}
.fw-r {font-weight: 400;}
.fw-m {font-weight: 500;}
.fw-sb {font-weight: 600;}
.fw-b {font-weight: 700;}
.fw-eb {font-weight: 800;}
.fw-bl {font-weight: 900;}

.modal-open, 
body:has(.backdrop.open) {overflow: hidden;}
.backdrop {
	-o-transition: background-color .1s linear;
	-moz-transition: background-color .1s linear;
	-webkit-transition: background-color .1s linear;
	transition: background-color .1s linear;
	background-color: transparent; position: fixed; inset: 0; z-index: 5555; visibility: hidden; -webkit-user-select: none; user-select: none;
}
.backdrop.open {background-color: var(--dim); visibility: visible; -webkit-user-select: auto; user-select: auto;}
.backdrop .modal-wrap {width: calc(100% - var(--inner-padding-l)*2); min-width: 440px; max-width: 760px; min-height: 296px; max-height: 95dvh; padding: 48px 24px 24px 24px; border-radius: 20px; background: var(--white); text-align: center; display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0.8px solid var(--border);}
.backdrop .modal-wrap .modal-close {width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; position: absolute; top: 12px; right: 12px; background: transparent; border: none; cursor: pointer;}
.backdrop .modal-wrap .modal-close .icon-x {width: 1.5rem; height: 1.5rem; display: block; object-fit: contain;}


.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.wrap {position: relative; width: 100%; min-height: 100%; overflow-x: clip; overflow-y: visible;}
.wrap::after {content: ''; display: block; clear: both;}

.section {position: relative; width: 100%;}

.inner {width: 100%; max-width: var(--inner-width); padding: var(--inner-padding); margin: 0 auto;}

.required {
    background-image: url("../img/icon/required.png"), linear-gradient(var(--white), var(--white)) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 20px) center, center !important;
}

input, input[type='text'], input[type='password'], input[type='submit'], input[type='search'], select, textarea {border: var(--border-solid); border-radius: 6px; padding: 0 30px; font-size: 1.125em;}
input, input[type='text'], input[type='password'], input[type='submit'], input[type='search'], select {width: 100%; height: 54px;}

select {
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
    background-image: url("../img/icon/select-down.png"), linear-gradient(var(--white), var(--white));
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) center, center;
    background-size: auto;
    padding-right: 56px;
 }
 
select::-ms-expand{
    display:none;/*for IE10,11*/
}
select.empty {font-size: 1em; color: #ACACAC;}
select option {font-size: 1.125em; color: #515151;}
select option:disabled {font-size: 1em; color: #ACACAC;}
select option:hover, select option:focus, select option:active, select option:checked {
    background: linear-gradient(#ccb9ff, #ccb9ff); 
    background-color: #ccb9ff; /* IE */
    color: var(--white);
}

input[type=checkbox] {display: none;}
input[type=checkbox] + label {cursor: pointer; font-size: 1em; font-weight: 400; color: #515151; display: -webkit-flex; display: flex; justify-content: start; align-items: center; line-height: 1;}
input[type=checkbox] + label::before {display: inline-block; content: '\f14a'; font-weight: 400; font-family: "Font Awesome 6 Free"; color: #CFCFCF; font-size: 20px; line-height: 1; margin-right: 10px;}
input[type=checkbox]:checked + label::before {display: inline-block; content: '\f14a'; font-weight: 900; font-family: "Font Awesome 6 Free"; color: var(--highlight); font-size: 20px; line-height: 1; margin-right: 10px;}

.input-radio {position: relative;}
input[type=radio] {display: none;}
input[type=radio] + label {cursor: pointer; margin-left: 22px;}
input[type=radio] + label::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; content: ''; width: 12px; height: 12px; border: 1px solid var(--highlight); border-radius: 50%; text-align: center;}
input[type=radio] + label::after {position: absolute; top: 50%; left: 3px; transform: translateY(-50%) scale(0); display: inline-block; content: ''; width: 6px; height: 6px; border: 1px solid var(--highlight); border-radius: 50%; background: var(--highlight); transition: transform 0.3s ease;}
input[type=radio]:checked + label::after {transform: translateY(-50%) scale(1);}

::placeholder {font-size: 16px; color: var(--gray40);}

.close {position: absolute; top: 12px; right: 30px; width: 40px; height: 40px;}
.close::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 30px; background: var(--highlight);}
.close::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 1px; height: 30px; background: var(--highlight);}

.popup {display: none; opacity: 0; min-width: 600px; width: auto; min-height: 650px; height: auto;}

.flex-item {-webkit-flex-shrink: 0; flex-shrink: 0;}

.scroll::-webkit-scrollbar {
    width: 29px; /* 세로 스크롤바 너비 */ 
    height: 29px; /* 가로 스크롤바 높이 */ 
    background-color: transparent;
}
.scroll::-webkit-scrollbar-thumb {width: 29px; background-color: #CCCCCC; border-radius: 14.5px; background-clip: padding-box; border: 10px solid transparent;} /* 실제 스크롤바 막대 */
.scroll::-webkit-scrollbar-track {width: 29px; border-radius: 14.5px; background-color: transparent;}


.btn {background: rgba(93,37,254,1); color: var(--white);}
.btn2 {border: 1px solid #707070; background: var(--white); color: #3D3D3D;}


.title1 {font-size: 2.875em; font-weight: 700; color: #333; text-align: center; margin-bottom: 30px; line-height: 1;}
.title2 {font-size: 2.250em; font-weight: 700; color: #333; text-align: center; margin-bottom: 30px; line-height: 1;}
.title3 {font-size: 1.625em; font-weight: 700; color: #333; text-align: left; margin-bottom: 20px; line-height: 1;}


.text1 {font-size: 1.5em; font-weight: 300; color: #3D3D3D; text-align: center;}
.text2 {font-size: 1.25em; font-weight: 300; color: #3D3D3D; text-align: center;}
.text3 {font-size: 1.125em;}


/* TV 영상 학습 공통 시작 */
.player {border: var(--border-solid); background: var(--white); position: relative; width: 100%; height: 64px;}
.player .play_area {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.player .play_area .prev, .player .play_area .next {width: 26px; height: 26px; border-radius: 50%; background: #707070; color: var(--white); display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.player .play_area .prev i, .player .play_area .next i {font-size: 14px;}
.player .pagination {width: auto; position: absolute; top: 50%; left: 50px; transform: translateY(-50%); font-weight: 500; font-size: 1.625em; letter-spacing: 1px; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.player .pagination span {margin: 0 3px;}

.player .swiper-prev, .player .swiper-next {width: 50px; height: 50px; border: 1px solid var(--highlight); border-radius: 6px; top: 50%; transform: translateY(-50%); margin-top: 0;}
.player .swiper-prev {left: auto; right: 120px;}
.player .swiper-next {left: auto; right: 50px;}
.player .swiper-prev::after {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f104";}
.player .swiper-next::after {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f105";}

.play_area .playPause {color: var(--highlight); margin: 0 30px;}
.play_area .playPause i {font-size: 40px;}

.btn-repeat {font-size: 1.125em; position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.btn-repeat .txt {margin-right: 10px;}
.btn-repeat .repeat {position: relative; font-size: 16px;}
.btn-repeat img {position: relative; display: block; max-width: 48px; line-height: 27px;}
.btn-repeat .num {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 600; font-size: 16px; line-height: 27px; color: var(--highlight);}
.btn-repeat.default .num {font-size: 14px; color: #3d3d3d;}

.btn-mp3 {font-size: 1.125em; position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.btn-mp3 .txt {margin-right: 10px;}
.btn-mp3 i {color: #3d3d3d; font-size: 14px;}

.btn-print {font-size: 1.125em; position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.btn-print .txt {margin-right: 10px;}
.btn-print i {color: #3d3d3d; font-size: 14px;}

.btn-put {font-size: 1.125em;}
.btn-put .txt {margin-right: 10px;}
.btn-put i {font-size: 14px; color: var(--highlight);}

.btn-dictionary {width: 160px; height: 40px; padding: 7px 10px; border-radius: 999px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 1.125em; color: rgba(255,255,255,1);}

.volume i {color: #CFCFCF; font-size: 12px;}

input[type=range] {margin: 0 5px;}
/* pin 시작 */
/* Chrome */
input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; cursor: pointer; width: 11px; height: 11px; border-radius: 50%; background: #515151; margin-top: -4px;}

/* Firefox */
input[type=range]::-moz-range-thumb {cursor: pointer; width: 11px; height: 11px; border-radius: 50%; background: #515151;}

/* IE */
input[type=range]::-ms-thumb {cursor: pointer; width: 11px; height: 11px; border-radius: 50%; background: #515151; border: none;}
/* //pin 끝 */


/* bar 시작 */
/* Chrome */
input[type=range]::-webkit-slider-runnable-track {width: 100px; height: 3px; cursor: pointer; background: #EBEBEB;}
input[type=range]:focus::-webkit-slider-runnable-track {background: #EBEBEB;}

/* Firefox */
input[type=range]::-moz-range-track {width: 100px; height: 3px; cursor: pointer; background: #EBEBEB;}

/* IE */
input[type=range]::-ms-track {width: 100px; height: 3px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent;}
input[type=range]::-ms-fill-lower {background: #EBEBEB; border: none;}
input[type=range]:focus::-ms-fill-lower {background: #EBEBEB;}
input[type=range]::-ms-fill-upper {background: #EBEBEB; border: none;}
input[type=range]:focus::-ms-fill-upper {background: #EBEBEB;}
/* //bar 끝 */


.re-record {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.re-record span {font-size: 1.125em; margin-right: 10px;}
.re-record i {font-size: 12px;}


.main {border-right: var(--border-solid); width: calc(100% - 234px); background: var(--white);}
.listening .main {background: var(--white)AF5;}
.aside {width: 234px;}

.index_area {width: 100%;}
.index_area>div {width: 100%; height: 64px; background: #F3F3F3; text-align: center; font-weight: 400; font-size: 1.375em; color: rgba(61,61,61,1); display: -webkit-flex; display: flex; justify-content: center; align-items: center;}

.ul-index {padding: 30px 0; border-bottom: var(--border-solid);}
.ul-index .item {text-align: center; font-weight: 300; font-size: 1.375em; color: rgba(89,89,89,1);}
.ul-index .item a {color: rgba(89,89,89,1);}
.ul-index .item::after {display: block; content: '\f0d7'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 34px; line-height: 1; margin: 16px 0;}
.ul-index .item:last-child::after {display: none;}
.ul-index .item.on a {font-weight: 600; color: var(--highlight);}

.ul-aside {padding: 30px 23px;}
.ul-aside .item {margin-bottom: 20px;}
.ul-aside .item:last-child {margin-bottom: 0;}
.ul-aside .item .btn2 {width: 100%; height: 40px; padding: 7px 10px; border-radius: 20px;}
.ul-aside .item .btn2 span {margin-right: 10px;}
.ul-aside .item .btn2 span:last-child {margin-right: 0;}

.ul-script .script {color: #A6A6A6;}
.ul-script .active .english {color: rgba(61,61,61,1);}
.ul-script .script .english .highlight {color: rgba(254,95,117,1);}
.ul-script .active .korean {color: #515151;}
/* //TV 영상 학습 공통 끝 */


/* 단어(word) 공통 시작 */
.word-player {height: 80px;}
.word-player .play_area {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* //단어(word) 공통 끝 */


/* 리스닝 공통 시작 */
progress[value] {width: 100%; height: 6px;}
progress[value]::-webkit-progress-bar {background-color: #A8A8A8; border-radius: 0;}
progress[value]::-webkit-progress-value {background-color: #FE5F75; border-radius: 0;}
progress + label {width: 100%; padding: 0 6px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

.listening-player {height: 80px;}
.listening-player .play_area {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* //리스닝 공통 끝 */


/* 스피킹 공통 시작 */
.speaking-swiper .timer {display: -webkit-flex; display: flex; justify-content: start; align-items: center; margin-bottom: 6px;}
.speaking-swiper .timer span {display: inline-block; margin-right: 6px;}
.speaking-swiper .timer span:last-child {margin-right: 0;}
.speaking-swiper .timer .icon-timer {width: 16px;}
.speaking-swiper .timer .icon-timer img {width: 100%; display: block;}
.speaking-swiper .timer .timer-item {width: 16px; height: 16px; border: 1px solid #195BFF; border-radius: 50%; color: #195BFF; font-size: 12px; text-align: center; line-height: 16px; font-weight: 700;}
.speaking-swiper .timer .start {width: 25px; height: 16px; background: #195BFF; color: var(--white); border-radius: 4px;}


.speaking-player {height: 80px;}
.speaking-player .play_area {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.speaking-player .speak {width: 50px; height: 50px; background-color: var(--highlight); border-radius: 50%; color: var(--white); font-size: 34px;}
.speaking-player .speak.active {background-color: var(--white);}
.speaking-player .speak::before {position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; transition: all 0.2s ease-in-out;}
.speaking-player .speak.effect::before {
    border: 2px solid rgb(93, 37, 254, .5);
    -o-animation: ring;
    -moz-animation: ring;
    -webkit-animation: ring;
    animation: ring;
    -o-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -o-animation-duration: 900ms;
    -moz-animation-duration: 900ms;
    -webkit-animation-duration: 900ms;
    animation-duration: 900ms;
}

@keyframes ring {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.speaking-player .play_area .speak img {width: 40%;}
.speaking-player .speak.effect img {display: inline-block;}
.speaking-player .speak.effect .voice-bar {display: none;}
.speaking-player .speak.active img {display: none;}
.speaking-player .speak.active .voice-bar {display: block;}

.voice-bar {margin: 0 auto; width: 48px; height: 100%; position: relative; display: none;}
.voice-bar span {
    position: absolute; width: 6px; height: 6px; border-radius: 50%; top: 50%; transform: translateY(-50%); transition: all .3s;
}
.voice-bar.updown span {
    -o-animation: updown;
    -moz-animation: updown;
    -webkit-animation: updown;
    animation: updown;
    -o-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -o-animation-duration: 1.2s;
    -moz-animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -o-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.voice-bar.sound span {
    -o-animation: sound;
    -moz-animation: sound;
    -webkit-animation: sound;
    animation: sound;
    -o-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -o-animation-duration: 1.2s;
    -moz-animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -o-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.voice-bar .bar1 {background: var(--highlight);}
.voice-bar .bar2 {background: #FE5F75;}
.voice-bar span:first-child {
    left: 0;
}
.voice-bar span:nth-child(2) {
    left: 14px;
    -o-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.voice-bar span:nth-child(3) {
    left: 28px;
    -o-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.voice-bar span:nth-child(4) {
    left: 42px;
    -o-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

@keyframes updown {
    0% {
        top: 50%;
    }
    50% {
        top: calc(50% + 4px);
    }
    100% {
        top: calc(50% - 4px);
    }
}

@keyframes sound {
    0%{
    height: 20px;
    border-radius: 999px;
    }
    20%{
    height: 40px;
    border-radius: 999px;
    }
    40%{
    height: 30px;
    border-radius: 999px;
    }
    60%{
    height: 40px;
    border-radius: 999px;
    }
    80%{
    height: 30px;
    border-radius: 999px;
    }
    100%{
    height: 20px;
    border-radius: 50%;
    }
}

.speaking-player .speech-bubble {
    position: absolute; bottom: -62px; left: 50%; transform: translateX(-50%); width: 132px; background: var(--highlight); border-radius: .4em; padding: 6px 20px; font-weight: 500; font-size: 16px; color: var(--white);
    -o-animation: bounce;
    -moz-animation: bounce;
    -webkit-animation: bounce;
    animation: bounce;
    -o-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -o-animation-duration: 900ms;
    -moz-animation-duration: 900ms;
    -webkit-animation-duration: 900ms;
    animation-duration: 900ms;
}
@keyframes bounce {
    0% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -5px);
    }
    100% {
        transform: translate(-50%, 0);
    }
}
.speaking-player .speech-bubble::before {content: '따라 말하세요.';}
.speaking-player .speech-bubble::after {
    content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0;
	border: 10px solid transparent;
	border-bottom-color: var(--highlight);
	border-top: 0;
	margin-left: -10px;
	margin-top: -10px;
}

.speaking-player .tab-bubble {
    position: absolute; bottom: -62px; left: 50%; transform: translateX(-50%); width: 134px; background: #eae6f7; border-radius: .4em; padding: 6px 20px; font-weight: 500; font-size: 16px; color: var(--highlight);
    -o-animation: bounce;
    -moz-animation: bounce;
    -webkit-animation: bounce;
    animation: bounce;
    -o-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -o-animation-duration: 900ms;
    -moz-animation-duration: 900ms;
    -webkit-animation-duration: 900ms;
    animation-duration: 900ms;
}
.speaking-player .tab-bubble::before {content: 'Tap to speak';}
.speaking-player .tab-bubble:after {
    content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0;
	border: 10px solid transparent;
	border-bottom-color: #eae6f7;
	border-top: 0;
	margin-left: -10px;
	margin-top: -10px;
}


.recorder {width: 100%;}
.recorder .recorder_area {width: 100%; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}
.recorder .recorder_area i {font-size: 36px;}
.recorder .native {color: #DC143C; margin-bottom: 40px; padding: 40px 60px 0;}
.recorder .student {color: var(--highlight); margin-bottom: 60px; padding: 0 60px;}
.recorder .play_area .playPause {margin: 0; color: #707070;}


.score {width: 100%; position: relative;}
.score .box {position: relative; width: 100%; height: 120px; border: 4px solid transparent; text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.score .box .icon_area {width: 76px; height: 76px; border-radius: 50%; background: var(--white); text-align: center; position: absolute; top: -38px; left: 50%; transform: translateX(-50%);}
.score .box .icon_area i {font-size: 60px; line-height: 76px;}
.score .box .score-txt {font-family: 'Orbitron'; font-weight: 900; font-size: 1.875em; letter-spacing: -0.2px; margin-right: 50px;}
.score .box .score-num {font-family: futura-pt; font-weight: 700; font-size: 2.5em; color: rgba(61,61,61,1);}

.score .pass {border-color: #00B8F4;}
.score .pass .icon_area i {color: #00B8F4;}
.score .pass .score-txt {color: rgba(0,184,244,1);}

.score .fail {border-color: #f11150;}
.score .fail .icon_area i {color: #f11150;}
.score .fail .score-txt {color: #f11150;}
/* //스피킹 공통 끝 */


/* 라이팅 공통 시작 */
.writing-player {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.writing-player .play_area {margin-right: 52px; position: absolute; top: 50%; left: 50px; transform: translateY(-50%);}
.writing-player .play_area .playPause {margin: 0;}
.writing-player .btn-repeat {position: absolute; top: 50%; right: 50px; transform: translateY(-50%);}

.btn-correct {width: 100%; max-width: 300px; height: 50px; padding: 12px 20px; border-radius: 25px; background-color: var(--highlight); font-weight: 600; font-size: 1.125em; color: rgba(255,255,255,1); margin: 0 auto;}
.btn-correct i {margin-right: 6px;}

.btn-correct.effect {
    position: relative; 
    background-image: linear-gradient(to right, #5D25FE, #FF6340);
    background-size: 400%;
    animation-name: gradients;
    animation-duration: 4s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

@keyframes gradients {
    0% {background-position-x: left;}
    50% {background-position-x: right;}
    100%  {background-position-x: left;}
}

/*
.stroke.start svg {animation: stroke 1.6s linear infinite;}
.stroke .lines {position: absolute; inset: 0; mix-blend-mode: hard-light; pointer-events: none; z-index: 1;}
.stroke .lines>div {position: absolute; inset: 0;}
.stroke .lines>div:last-child {transform: rotate(180deg);}
.stroke .lines>div svg {
    display: block;
    position: absolute;
    inset: 0;
    overflow: visible;
    fill: none;
    stroke-width: 2px;
    stroke: rgba(200, 255, 235, .5);
    width: 100%;
    height: 100%;
    stroke-dasharray: 2 10;
    stroke-dashoffset: 14;
    opacity: 0;
}
.stroke .lines>div svg:nth-child(1) {stroke: #19FFAC;}
.stroke .lines>div svg:nth-child(2) {stroke-width: 6px; filter: blur(20px);}
.stroke .lines>div svg:nth-child(3) {stroke-width: 5px; filter: blur(6px);}
.stroke .lines>div svg:nth-child(4) {stroke-width: 10px; filter: blur(56px);}
@keyframes stroke {
    30%,
    55% {
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 4;
      opacity: 0;
    }
}
*/
/* //라이팅 공통 끝 */


.swiper-button-next, .swiper-button-prev {width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 24px; color: var(--highlight);}
.swiper-button-next:after {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f054";}
.swiper-button-prev:after {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f053";}


/* 말줄임 시작 */
.ellipsis {width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ellipsis {width: calc(100% - 1em); position: relative; overflow: hidden; line-height: 1.5; max-height: 3em; margin-right: -1em; padding-right: 1em;}
    .ellipsis::before {content: '…'; position: absolute; right: 0; bottom: 0;}
    .ellipsis::after {content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: inherit;}
    .ellipsis .tit {word-break: break-all;}
}
/* //말줄임 끝 */


/* 단계 상자 시작 */
.dash-box {height: 200px; margin-right: 64px; border-radius: 20px; position: relative; text-align: center; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background-color: var(--white);}
.dash-box:last-child {margin-right: 0;}
.dash-box1 {    
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23FF7561FF' stroke-width='2' stroke-dasharray='8%2c10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dash-box2 {    
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23FFA05CFF' stroke-width='2' stroke-dasharray='8%2c10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dash-box3 {    
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23FFDD3CFF' stroke-width='2' stroke-dasharray='8%2c10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dash-box4 {    
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%2353B97DFF' stroke-width='2' stroke-dasharray='8%2c10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dash-box5 {    
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%237298E9FF' stroke-width='2' stroke-dasharray='8%2c10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dash-box6 {    
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%236266E8FF' stroke-width='2' stroke-dasharray='8%2c10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dash-box7 {    
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23A672E9FF' stroke-width='2' stroke-dasharray='8%2c10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dash-box::before {display: inline-block; content: ''; width: calc(100% + 4px); height: 204px; clip-path: inset(100px 0 0 0); border-radius: 20px; position: absolute; top: -2px; left: -2px;}
.dash-box1::before {border: 6px solid #FF7561;}
.dash-box2::before {border: 6px solid #FFA05C;}
.dash-box3::before {border: 6px solid #FFDD3C;}
.dash-box4::before {border: 6px solid #53B97D;}
.dash-box5::before {border: 6px solid #7298E9;}
.dash-box6::before {border: 6px solid #6266E8;}
.dash-box7::before {border: 6px solid #A672E9;}
.dash-box .num {width: 60px; height: 60px; border-radius: 50%; line-height: 60px; text-align: center; font-weight: bold; font-size: 1.5em; color: var(--white); position: absolute; top: -30px;}
.dash-box .num1 {background: #FF7561;}
.dash-box .num2 {background: #FFA05C;}
.dash-box .num3 {background: #FFDD3C;}
.dash-box .num4 {background: #53B97D;}
.dash-box .num5 {background: #7298E9;}
.dash-box .num6 {background: #6266E8;}
.dash-box .num7 {background: #A672E9;}
.dash-box p {position: relative; line-height: 1.7; text-align: center; font-size: 1.250em;}
.dash-box::after {display: inline-block; content: '\f054'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 20px; position: absolute; top: 50%; left: calc(100% + 25.75px); transform: translateY(-50%);}
.dash-box1::after {color: #FF8B5F;}
.dash-box2::after {color: #FFBF4C;}
.dash-box3::after {color: #A9CB5D;}
.dash-box4::after {color: #63A9B3;}
.dash-box5::after {color: #6A7FE9;}
.dash-box6::after {color: #846CE9;}
.dash-box:last-child::after {display: none;}
/* //단계 상자 끝 */


/* 교육과정 (커리큘럼) 시작 */
.curriculum .table-wrap {text-align: right;}
.curriculum .table-wrap .table-curriculum {text-align: center;}
.table-curriculum .lv1 {font-weight: 500; font-size: 1.125em; color: #3d3d3d; padding: 12px 0;}
.table-curriculum .lv2 {padding: 13px; text-align: center; font-weight: 500; font-size: 1.125em; color: var(--white); border: 0;}

.td_curriculum .td_curriculum-wrap {display: -webkit-flex; display: flex; justify-content: start; align-items: start;}
.td_curriculum .td_curriculum-wrap p {padding: 6px; text-align: left; font-weight: 700; font-size: 1em; color: rgba(81,81,81,1); letter-spacing: -0.5px;}
.td_curriculum .td_curriculum-wrap img {width: 70px;}

.table-curriculum .lv2-1 {background: #FF7561;}
.table-curriculum .lv2-2 {background: #FEA060;}
.table-curriculum .lv2-3 {background: #FFDD3C;}
.table-curriculum .lv2-4 {background: #53B97D;}
.table-curriculum .lv2-5 {background: #7298E9;}
.table-curriculum .lv2-6 {background: #6266E8;}
.table-curriculum .lv2-7 {background: #A672E9;}

.backslash {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="rgb(223,223,223)" /></svg>');}
.table-curriculum .th_backslash {padding: 12px 10px; position: relative;}
.table-curriculum .th_backslash .level {text-align: right; position: absolute; top: 12px; right: 10px;}
.table-curriculum .th_backslash .cate {text-align: left; position: absolute; bottom: 12px; left: 10px;}

.td_curriculum-lv2-1 {
    background-image: linear-gradient(to right, rgba(255, 117, 97, .1), rgba(255, 117, 97, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-1-5 {
    background-image: linear-gradient(to right, rgba(185, 135, 165, .1), rgba(185, 135, 165, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-2 {
    background-image: linear-gradient(to right, rgba(255, 160, 92, .1), rgba(255, 160, 92, .1)), linear-gradient(to right, var(--white), var(--white))
}
.td_curriculum-lv2-2-3 {
    background-image: linear-gradient(to right, rgba(255, 191, 76, .1), rgba(255, 191, 76, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-3 {
    background-image: linear-gradient(to right, rgba(255, 221, 60, .1), rgba(255, 221, 60, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-3-6 {
    background-image: linear-gradient(to right, rgba(177, 162, 146, .1), rgba(177, 162, 146, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-4 {
    background-image: linear-gradient(to right, rgba(83, 185, 125, .1), rgba(83, 185, 125, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-4-5 {
    background-image: linear-gradient(to right, rgba(99, 169, 179, .1), rgba(99, 169, 179, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-4-6 {
    background-image: linear-gradient(to right, rgba(91, 144, 179, .1), rgba(91, 144, 179, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-5 {
    background-image: linear-gradient(to right, rgba(114, 152, 233, .1), rgba(114, 152, 233, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-5-6 {
    background-image: linear-gradient(to right, rgba(106, 127, 233, .1), rgba(106, 127, 233, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-6 {
    background-image: linear-gradient(to right, rgba(98, 102, 232, .1), rgba(98, 102, 232, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-6-7 {
    background-image: linear-gradient(to right, rgba(132, 108, 233, .1), rgba(132, 108, 233, .1)), linear-gradient(to right, var(--white), var(--white));
}
.td_curriculum-lv2-7 {
    background-image: linear-gradient(to right,rgba(166, 114, 233, .1), rgba(166, 114, 233, .1)), linear-gradient(to right, var(--white), var(--white));
}
/* //교육과정 (커리큘럼) 끝 */


/* AI 첨삭 (라이팅 첨삭) 시작 */
.wrong_word {color: #FE5F75; text-decoration: line-through;}
.correct_word {color: #15B58F; background: #D9F9F0; padding: 0 2px; border-radius: 4px;}
/* //AI 첨삭 (라이팅 첨삭) 끝 */





@media screen and (min-width:993px){
    .mo-btn{display: none;}
    .popup {min-width: 600px;}
}

@media screen and (max-width:1440px){
    :root {
        --inner-padding: 0px 40px;
        --inner-padding-l: 40px;
        --inner-padding-r: 40px;
    }
}

@media screen and (max-width:992px){
    :root {
        --inner-padding: 0px 36px;
        --inner-padding-l: 36px;
        --inner-padding-r: 36px;
    }

    .mo-btn{display: flex;}
    .popup {min-width: 500px;}
    ::placeholder {font-size: 14px !important;}

    .btn-dictionary {height: auto;}

    .player, .word-player, .listening-player, .speaking-player {height: 64px;}
    .player .pagination {left: 40px;}
    .player .swiper-prev, .player .swiper-next {width: 40px; height: 40px;}
    .player .swiper-prev {right: 96px;}
    .player .swiper-next {right: 40px;}

    .main {width: calc(100% - 200px);}
    .aside {width: 200px;}

    .ul-aside .item .btn2 {height: auto;}

    .writing-player .play_area {left: 40px;}
    .writing-player .btn-repeat {right: 40px;}

    .btn-correct {height: auto;}
}

@media screen and (max-width:768px){
    :root {
        --inner-padding: 0px 32px;
        --inner-padding-l: 32px;
        --inner-padding-r: 32px;
    }

    .ul-aside {width: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 12px 10px;}

    .speaking-player .tab-bubble {top: -54px; bottom: auto;}
    .speaking-player .tab-bubble:after {top: auto; bottom: 0; border: 10px solid transparent; border-top-color: #eae6f7; border-bottom: 0; margin-left: -10px; margin-top: 0; margin-bottom: -10px;}

    .backdrop .modal-wrap {min-width: unset; padding: 48px 16px 16px 16px;}
}

@media screen and (min-width:481px) and (max-width:768px){
    .ul-aside .item {width: calc((100% - 24px)/3); margin-right: 12px; margin-bottom: 12px;}
    .ul-aside .item:nth-child(3n) {margin-right: 0;}
    .ul-aside .item:nth-last-child(-n+3) {margin-bottom: 0;}
}

@media screen and (max-width:480px){
    :root {
        --inner-padding: 0px 20px;
        --inner-padding-l: 20px;
        --inner-padding-r: 20px;
    }

    input, input[type='text'], input[type='password'], input[type='submit'], input[type='search'], select, textarea {padding: 0 16px;}
    
    .popup {min-width: calc(100% - 32px);}
    
    .title1 {font-size: 2.4em; margin-bottom: 24px;}
    .title2 {font-size: 1.9em; margin-bottom: 24px;}
    .title3 {font-size: 1.4em; margin-bottom: 14px;}

    .text1 {font-size: 1.4em;}
    .text2 {font-size: 1.15em;}
    .text3 {font-size: 1.025em;}

    .player .swiper-prev, .player .swiper-next {width: 26px; height: 26px;}
    .swiper-button-next:after, .swiper-button-prev:after {font-size: 14px;}
    .player .pagination {left: 10px; font-size: 1.375em;}
    .player .swiper-next {right: 10px;}
    .player .swiper-prev {right: 46px;}

    .play_area .playPause {margin: 0 20px;}    

    .btn-repeat .num {font-size: 14px;}
    .btn-repeat.default .num {font-size: 12px;}

    .ul-aside .item {width: calc((100% - 12px)/2); margin-right: 12px; margin-bottom: 12px;}
    .ul-aside .item:nth-child(2n) {margin-right: 0;}
    .ul-aside .item:nth-last-child(-n+2) {margin-bottom: 0;}

    .speaking-player .play_area .speak {width: 40px; height: 40px; font-size: 24px;}

    .recorder .recorder_area {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .recorder .recorder_area .left {width: 100%;}
    .recorder .play_area .playPause {position: absolute;}
    .recorder .recorder_area .right {width: 100%;}
    .recorder .native {padding: 20px 16px 0;}
    .recorder .student {padding: 0 16px;}

    .writing-player .play_area {left: 16px;}
    .writing-player .btn-repeat {right: 16px;}
}