@charset "UTF-8";

.contents {padding: 50px 0 100px;}

.contents .top {position: relative; padding: 0 0 12px 40px; display: -webkit-flex; display: flex; justify-content: start; align-items: center; border-bottom: 2px solid #333333;}

.contents .top .main_cate {width: 140px; margin-right: 30px; font-weight: 700; font-size: 1.625em; color: rgba(51,51,51,1);}
.contents .top .main_cate a {color: rgba(51,51,51,1);}
.contents .top .video_title {font-weight: 500; font-size: 1.375em; color: rgba(61,61,61,1); margin-right: auto;}
.contents .top .btn_area {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.contents .top .btn_area>* {width: 44px; height: 44px; border-radius: 50%; background: #C1C1C1; color: var(--white); font-size: 24px; margin-right: 10px; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.contents .top .btn_area>*:last-child {margin-right: 0;}
.contents .top .btn_area .btn-like.on {background: #FE5F75;}
.contents .top .btn_area .btn-report img {max-width: 24px;}

.contents .box {border: var(--border-solid); display: -webkit-flex; display: flex; justify-content: start; align-items: stretch; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.contents .box .top-info {width: 100%; height: 64px; padding: 9px 24px 9px 40px; display: -webkit-flex; display: flex; justify-content: start; align-items: center; border-bottom: var(--border-solid);}
.contents .box .top-info .index {width: 140px; margin-right: 30px; font-weight: 700; font-size: 1.250em; color: rgba(93,37,254,1);}
.contents .box .top-info .guide {font-weight: 200; font-size: 1.125em; margin-right: auto;}
.contents .box .top-info .btn_area {display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.contents .box .top-info .btn_area>* {margin-right: 30px;}
.contents .box .top-info .btn_area>*:last-child {margin-right: 0;}

.contents .main .tool1 {width: 100%; height: 64px; padding: 18px 50px; background: var(--white); display: -webkit-flex; display: flex; justify-content: end; align-items: center; border-bottom: var(--border-solid);}
.contents .main .tool1 button {margin-right: 24px;}
.contents .main .tool1 button:last-of-type {margin-right: 0;}
.word .main .tool1 .btn-dictionary {padding: 7px 30px; margin-left: 24px;}

/* Word 시작 */
.word .ul-word {background: var(--white)AF5;}
.word .word-item {height: 455px; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.word .word_en {text-align: center; font-weight: 700; font-size: 3.125em; margin-bottom: 24px; line-height: 1;}
.word .word_pronounce {text-align: center; font-weight: 300; font-size: 1.750em; margin-bottom: 50px; line-height: 1;}
.word .word_ko {text-align: center; font-weight: 400; font-size: 1.750em;}

.word-player {border: 0; border-top: var(--border-solid);}
/* Word 끝 */


/* 추천 영상학습 시작 */
.recommend {background: #F9F9F9; margin-top: 0; padding: 80px 0; position: relative;}
.recommend::before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;  background-image: linear-gradient(to right, rgb(112,112,112) 50%, rgba(112,112,112,0) 50%); background-position: bottom; background-size: 20px 1px; background-repeat: repeat-x;}
.recommend .title3 {margin-bottom: 30px;}
.ul-recommend {width: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.ul-recommend .item {width: calc((100% - 150px)/6); margin-right: 30px;}
.ul-recommend .item:last-child {margin-right: 0;}
.recommend_video-prev {width: 100%; height: auto; padding-bottom: 56.25%; position: relative; border: var(--border-solid); margin-bottom: 10px;}
.recommend_video-prev .thumb {display: block; width: 100%; height: 100%;}
.recommend_video-prev .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.recommend_video-prev .timer {width: 60px; height: 24px; line-height: 24px; background: rgba(0,0,0,0.8); position: absolute; bottom: 6px; left: 6px; text-align: center; font-weight: 300; font-size: 0.875em; color: rgba(255,255,255,1);}
.recommend_subject {height: 3em; text-align: left; font-weight: 500; font-size: 1.188em; color: rgba(61,61,61,1);}
/* 추천 영상학습 끝 */


/* Listening 시작 */
.listening .video_wrap {width: 100%; position: relative;}
.listening .video_wrap .video_area {width: 100%; height: auto; padding-bottom: 56.25%; position: relative;}
/* 업로드 동영상 */
/*
.listening .video_wrap .video_area>div {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.listening .video_wrap .video_area .my-video-dimensions {width: 100%; height: auto; padding-bottom: 56.25%;}
*/
/* 유튜브 동영상 */
.listening .video_wrap .video_area iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.listening .video_wrap .video_area .btn-expand {width: 40px; height: 40px; color: var(--white); position: absolute; bottom: 0; right: 0;}
.listening .video_wrap .video_area .btn-expand i {font-size: 22px;}
.listening .video_wrap .video_area .timeline_area {position: absolute; bottom: -30px; left: 0; width: 100%; display: -webkit-flex; display: flex; flex-direction: column; z-index: 1;}

.listening-player {border: 0; border-top: var(--border-solid); border-bottom: var(--border-solid);}
.player .pagination {bottom: auto;}

.ul-script_wrap {padding: 50px;}
.listening .script_wrap {width: 100%;}
/* .listening .script_wrap .script_area {display: none;} */
/* .listening .script_wrap .en-only {display: block;} */
.ul-script_wrap .ul-script .script {line-height: 1.7;}
.ul-script_wrap .ul-script .script .english {font-weight: 400; font-size: 1.625em;}
.en-ko .ul-script_wrap .ul-script .script .english {margin-bottom: 30px;}
.sub_all .en-ko .ul-script_wrap .ul-script .script .english {margin-bottom: 10px;}
.ul-script_wrap .ul-script .script .korean {font-weight: 300; font-size: 1.25em;}
.ko-only .ul-script_wrap .ul-script .script .korean {font-weight: 400; font-size: 1.625em;}

.searchBox {width: 100%; padding: 0 23px 30px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; position: relative; margin-top: 50px;}
/* .searchBox .search-inp {width: 100%; height: auto; padding: 0 28px 6px 6px; background-image: url("../img/icon/search.png"), linear-gradient(var(--white), var(--white)); background-repeat: no-repeat; background-position: right 4px center, center; border-radius: 0; border: 0; border-bottom: var(--border-solid); font-size: 1.125em;} */
.searchBox .search-inp {width: 100%; height: auto; padding: 0 28px 6px 6px; padding-right: 30px; border-radius: 0; border: 0; border-bottom: var(--border-solid); font-size: 1.125em;}
.searchBox .search-inp::placeholder {font-size: 16px;}
.btn-search {position: absolute; top: 0; right: 23px; width: 30px; height: auto; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.btn-search img {display: block;}

.sub_all .ul-script_wrap .ul-script .script::after {display: block; content: ''; width: 100%; height: 1px; background: #dfdfdf; margin: 20px 0;}
.sub_all .ul-script_wrap .ul-script .script:last-child::after {display: none;}

.sub_all .script_wrap {position: relative;}
.sub_all .scroll-top {position: fixed; bottom: 40px; right: 50px; z-index: 555; opacity: 0;}
.sub_all .btn-top {width: 50px; height: 50px; background: #AAAAAA; border-radius: 50%; font-size: 24px; color: var(--white);}
.btn-sub_all.on {background: var(--highlight); color: var(--white); border-color: transparent;}
.btn-word.on {background: var(--highlight); color: var(--white); border-color: transparent;}

.listening .word-item::after {display: block; content: ''; width: 100%; height: 1px; background: #DFDFDF; margin: 14px 0;}
.listening .word-item:last-child::after {display: none;}
.listening .word-item .word_area {width: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.listening .word_en {width: 25.4%; font-weight: 700; font-size: 1.750em;}
.listening .word_pronounce {width: 25.4%; font-weight: 300; font-size: 1.250em;}
.listening .word_pronounce.transparent {height: 1.5em; color: transparent;}
.listening .word_ko {width: 49.2%; font-weight: 400; font-size: 1.250em;}
/* Listening 끝 */


/* Speaking 시작 */
.speaking .ul-script_wrap {padding: 0; background: var(--white);}
.speaking .ul-script_wrap .swiper-slide {min-height: 560px;}
.speaking .ul-script {padding: 30px 50px; background: var(--white)AF5; border-bottom: var(--border-solid);}
.speaking .ul-script_wrap .ul-script .script .english {font-weight: 700; font-size: 1.750em; margin-bottom: 30px;}
.speaking .ul-script_wrap .ul-script .script .korean {font-weight: 300; font-size: 1.375em;}

.sp_check {position: absolute; top: -22px;}
.wave-css {position: absolute; width: 1px; height: 100%; z-index: 10; background: red; left: 0%;}
.waveCSS-arrow {position: absolute; bottom: -7px; width: 0; height: 0; left: 50%; transform: translateX(-50%); border-color: transparent transparent red transparent; border-style: solid; border-width: 7px;}
.me-wave-css {position: absolute; width: 1px; height: 100%; z-index: 10; background: blue; left: 0%;}
.me-waveCSS-arrow {position: absolute; bottom: -7px; width: 0; height: 0; left: 50%; transform: translateX(-50%); border-color: transparent transparent blue transparent; border-style: solid; border-width: 7px;}

.recorder .native {margin-bottom: 70px; padding: 54px 60px 0;}
.recorder .student {margin-bottom: 80px;}
.recorder .recorder_area .left {}
.recorder .recorder_area .center {width: 16%; text-align: center;}
.recorder .recorder_area .right {width: 72%;}

.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 .pass {border-color: #00B8F4;}
.score .fail {border-color: #f11150;}

.speaking-player {border: 0; border-top: var(--border-solid);}
/* Speaking 끝 */




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

    .recommend {padding: 80px 50px;}
    .ul-recommend .item {width: calc((100% - 120px)/5);}
    .ul-recommend .item:last-child {display: none;}
    .ul-recommend .item:nth-last-child(-n+2) {margin-right: 0;}
}

@media screen and (min-width:993px){

}

@media screen and (max-width:992px){
    .contents {padding: 40px 50px 80px;}

    .word .word-item {padding: 0 50px;}

    .recommend {margin-top: 0; padding: 40px 50px;}
    .ul-recommend .item {width: calc((100% - 90px)/4);}
    .ul-recommend .item:nth-last-child(-n+2) {display: none;}
    .ul-recommend .item:nth-last-child(-n+3) {margin-right: 0;}
    .recommend_video-prev .timer {width: 52px;}
}

@media screen and (max-width:768px){
    .contents .top {-webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0 0 12px 16px; order: 1;}
    .contents .top .main_cate {width: auto; margin-right: auto; order: 1;}
    .contents .top .video_title {width: 100%; order: 3;}
    .contents .top .btn_area {order: 2;}
    .contents .top .btn_area>* {width: 30px; height: 30px; font-size: 16px;}
    .contents .top .btn_area .btn-report img {width: 54%;}

    .contents .box {width: 100%; position: relative;}
    .contents.word .box {padding-bottom: 62px;}
    .contents.listening .box {padding-bottom: 111px;}
    .contents.speaking .box {padding-bottom: 62px;}

    .contents .box .top-info {-webkit-flex-wrap: wrap; flex-wrap: wrap; height: auto; padding: 9px 24px 9px 16px;}
    .contents .box .top-info .index {width: auto; margin-right: auto; order: 1;}
    .contents .box .top-info .guide {width: 100%; order: 3;}
    .contents .box .top-info .btn_area {order: 2;}
    
    .contents .main {width: 100%; order: 3; border-right: 0;}
    .contents .main .tool1 {width: 100%; height: auto; padding: 13px 16px; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: start;}
    .contents .main .tool1>* {margin: 5px 0;}
    .contents .main .tool1 button:nth-child(3n) {margin-right: 0;}
    .word .main .tool1 .btn-dictionary {width: 100%; margin-left: 0;}
    .word .word-item {height: 360px; padding: 0 16px;}

    .contents .aside {width: 100%; order: 2; border-bottom: var(--border-solid);}

    .ul-index {display: -webkit-flex; display: flex; justify-content: start; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 8px 10px;}
    .ul-index .item {font-size: 1.25em; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
    .ul-index .item::after {display: inline-block; content: '\f0da'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 22px; margin: 0 14px;}

    .ul-aside {position: absolute; bottom: 0; border-top: var(--border-solid);}

    .player .pagination {left: 16px;}

    .ul-script_wrap {padding: 16px;}

    .searchBox {padding: 12px 10px; margin-top: 0;}
    .searchBox .search-inp {border: var(--border-solid); border-radius: 6px; padding: 6px 32px 6px 6px; background-position: right 6px center, center;}
    .btn-search {top: 50%; transform: translateY(-50%);}

    .sub_all .ul-script_wrap .ul-script .script::after {margin: 16px 0;}

    .listening .ul-word {display: -webkit-flex; display: flex; justify-content: start; align-items: start; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .listening .word-item {width: 50%;}
    .listening .word-item .word_area {width: 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .listening .word_en {width: 100%; margin-bottom: 8px;}
    .listening .word_pronounce {width: 100%; margin-bottom: 16px;}
    .listening .word_ko {width: 100%;}


    .speaking .ul-script {padding: 20px 16px;}
    .recorder .native {padding: 54px 40px 0;}
    .recorder .student {padding: 0 40px;}
}

@media screen and (max-width:480px){
    .contents {padding: 30px 16px 60px;}

    .contents.word .box {padding-bottom: 105px;}
    .contents.listening .box {padding-bottom: 151px;}
    .contents.speaking .box {padding-bottom: 59px;}

    .contents .box .top-info {padding: 9px 16px;}
    .contents .box .top-info .index {font-size: 1.125em;}
    .contents .box .top-info .guide {font-size: 1em;}
    
    .contents .main .tool1 button {text-align: left;}

    .word .word-item {height: 320px;}

    .recommend {margin-top: 0; padding: 40px 16px;}
    .ul-recommend .item {width: calc((100% - 20px)/2); margin-right: 20px; margin-bottom: 20px;}
    .ul-recommend .item:nth-child(2n) {margin-right: 0;}
    .ul-recommend .item:nth-last-child(-n+4) {margin-bottom: 0;}

    .word_en {font-size: 2.875em; margin-bottom: 16px;}
    .word_pronounce {font-size: 1.5em; margin-bottom: 42px;}
    .word_ko {font-size: 1.5em;}

    .ul-script_wrap .ul-script .script {line-height: 1.5;}
    .ul-script_wrap .ul-script .script .english {font-size: 1.5em;}
    .ul-script_wrap .ul-script .script .korean {font-size: 1.125em;}
    .ko-only .ul-script_wrap .ul-script .script .korean {font-size: 1.5em;}

    .sub_all .scroll-top {bottom: 10px; right: 10px;}

    .listening .word-item {width: 100%;}
    .listening .word_en {font-size: 1.625em;}
    .listening .word_pronounce {font-size: 1.125em;}
    .listening .word_ko {font-size: 1.125em;}

    .contents.speaking .score .box {padding: 0;}
    .speaking .ul-script_wrap .ul-script .script .english {font-size: 1.625em;}
    .speaking .ul-script_wrap .ul-script .script .korean {font-size: 1.25em;}
    .recorder .recorder_area {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .recorder .recorder_area .center {width: 100%; margin-bottom: 30px;}
    .recorder .recorder_area .right {width: 100%;}
    .recorder .native {padding: 54px 16px 0;}
    .recorder .student {padding: 0 16px;}
}