/* 샘놀이터 */
.sam .tab-wrap {margin-bottom: 0; display: flex}
.sam .tab-wrap li a{color: #888; transition: 0.2s linear}
.sam .tab-wrap li a:hover {color: var(--color-main-red); transition: 0.2s linear}
.sam .tab-wrap li a.on {color: var(--color-main-red)}
.sam .tab-wrap li + li {padding-left: 2rem}
.sam .sub-title-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 2rem 0 0;
}

.sam .sub-title-box {
    position: relative;
    width: 100%;
}

.sam .sub-title-wrap .img-box {
    background-color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    border: 1px dashed var(--color-sub-red);
    position: relative;
    z-index: 9;
}

.sam .sub-title-wrap .img-box img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.sam .sub-title-wrap .title-box {
    padding: 0.3rem 1.4rem;
    border-radius: 30px;
    background-color: var(--color-sub-red);
    color: #fff;
    padding-left: 68px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem
}

/* 같이 토론해요 */
.sam {
    margin-top: 1.6rem;
}

.debate-wrap {
    box-sizing: border-box;
    border: 1px solid var(--color-sub-red);
    border-radius: 1rem;
    overflow: hidden;
}

.debate-wrap .debate-top {
    background: var(--color-sub-red);
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
}

.debate-wrap .debate-top .state {
    background: #fff;
    padding: 0.25rem 1.5rem;
    border-radius: 2rem;
    color: var(--color-sub-red);
    font-weight: 600;
}

.debate-wrap .debate-top .period {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    margin-left: 1rem;
}

.debate-wrap .debate-body {
    box-sizing: border-box;
    padding: 2.25rem 2rem 2rem 5.5rem;
    background: url(../../img/withsam/sub/icon-question.png) 2rem 1.75rem no-repeat;
    background-size: 42px;
}

.debate-wrap .debate-body .title {
    font-family: '배민주아';
    font-size: 1.25rem;
    line-height: 1.4;

}

.debate-wrap .debate-body .con {
    margin-top: 1rem;
}

.debate-list-wrap {

}

.debate-list-top {
    background: #f8f8f8;
    padding: 1.25rem 1.5rem 1.5rem;
    position: relative;
    border-radius: 1rem;
    margin: 1.5rem 0;
}

.debate-list-top .debate_noti {
    font-weight: 600;
}

.debate-list-top .debate_txt_cnt {
    position: absolute;
    right: 1.5rem;
    top: 1.25rem;
    color: #444;
}

.debate-list-top .flex-wrap {
    display: flex;
    align-items: stretch;
    margin-top: 1rem;
}

.debate-list-top textarea {
    width: calc(100% - 110px - 1rem);
    height: 100px;
    border-radius: 10px;
    padding: 20px;
    font-size: 16px;
    background: #fff;
}

.debate-list-top #debate-write-btn {
    width: 110px;
    font-weight: 600;
    text-align: center;
    line-height: 100px;
    font-size: 1.125rem;
    margin-left: 1rem;
    border-radius: 8px;
    padding: 0;
    box-sizing: border-box;
}

.view-board .comment_list .normal .suggestion {
    position: relative;
    padding: 20px 5px 0 1.75rem;
}

.view-board .comment_list .normal .suggestion.thumbup_on {
    padding: 20px 5px 0 2rem;
}

.suggestion img {
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    /*margin-top: -2px;*/
    /*margin-right: 6px;*/
    cursor: pointer;
    position: absolute;
    left: 0;
    bottom:3px;
}

.suggestion.thumbup_off img {
    filter: grayscale(1);
}

.suggestion.thumbup_on img {
    filter: grayscale(0);
    width: 26px;
}

/* 지금 우리 교실은 */
.now-our-class .sub-title-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 2rem 0 0;
}

.now-our-class .sub-title-box {
    position: relative;
    width: 100%;
}

.now-our-class .sub-title-wrap .img-box {
    background-color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    border: 1px dashed var(--color-sub-red);
    position: relative;
    z-index: 9;
}

.now-our-class .sub-title-wrap .img-box img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.now-our-class .sub-title-wrap .title-box {
    padding: 0.3rem 1.4rem;
    border-radius: 30px;
    background-color: var(--color-sub-red);
    color: #fff;
    padding-left: 68px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem
}
.now-our-class .tab-wrap {margin-bottom: 0; display: flex; justify-content: flex-end; padding: 1rem 0}
.now-our-class .tab-wrap li a{color: #888; transition: 0.2s linear}
.now-our-class .tab-wrap li a:hover {color: var(--color-main-red); transition: 0.2s linear}
.now-our-class .tab-wrap li a.on {color: var(--color-main-red)}
.now-our-class .tab-wrap li + li {padding-left: 2rem}
.now-our-class .ourclass-list {display: flex; align-items: center; align-items: stretch; flex-wrap: wrap; gap: 20px}
.now-our-class .ourclass-list .box {position:relative;border: 1px solid #ddd; border-radius: 12px; width: calc((100% - (20px*3) ) / 4); padding: 4px; box-sizing: border-box; box-shadow: 2px 3px 5px #f1f1f1;  transition:0.2s all linear;}
.now-our-class .ourclass-list .title {font-size: 1.125rem; font-weight: 700; text-align: center; padding: .5rem 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.now-our-class .ourclass-list .box:hover {border-color: var(--color-main-red); transition:0.2s all linear;}
.now-our-class .ourclass-list .box .img-box {padding-bottom: 64%; position: relative; overflow:hidden; border-radius: 12px; border: 1px solid #ddd;}
.now-our-class .ourclass-list .box .img-box img {position: absolute; left: 50%;top: 50%; transform: translate(-50%,-50%); /*object-fit: cover;*/width: 100%;height: 100%;}
.now-our-class .ourclass-list .box .text-box {padding: 0.5rem}
.now-our-class .ourclass-list .box .text-box .dec {display: block; color: #888;  padding: 2px 0}
.now-our-class .ourclass-list .box .writer {text-align: right; font-size: 14px;  color: #666; padding: 0 0.5rem; margin-bottom: .625rem}
.now-our-class .ourclass-list .box .writer img {max-width: 24px; max-height: 24px;}
.now-our-class .ourclass-list .box .sns-zone {display: flex; justify-content: space-between; padding: .5rem;}
.now-our-class .ourclass-list .box .sns-zone .left {display: flex; gap: 10px; font-size: 15px; color: #666 ; }
.now-our-class .ourclass-list .box .sns-zone .left > div {display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer}
.now-our-class .ourclass-list .box .body {text-overflow: ellipsis;overflow: hidden;white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.3; font-size: 15px;}

/* 슬기로운 교사생활 */

@font-face {
    font-family: 'SejonghospitalBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/SejonghospitalBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
.basic_btn {position: absolute;
    right: 0;
    top: 0rem;
    font-size: 18px;
    background: var(--color-main-bg);
    box-sizing: border-box;
    border-radius: 12px;
    padding: 0.85rem 2rem 0.625rem;
    font-family: '배민주아';
    letter-spacing: -0.5px;
    transition: 0.2s all linear;
    padding-left: 4rem;
}
.basic_btn:hover {background-image: linear-gradient(to right, #ffe4e0, var(--color-sub-bg));transition: 0.2s all linear;}
.basic_btn img {vertical-align: middle;margin-right: 0.75rem; margin-top: -3px;}
.teacher-life .popBtn .basic_btn {padding-left: 2rem;}
.teacher-life .popBtn .basic_btn span {display: inline-block;}

.teacher-life .main-text {font-family: 'SejonghospitalBold'; text-align: center; padding: 2rem 0; font-size: 1.8rem; position: relative}
.teacher-life .main-text:after {position: absolute; content: ''; width: 10%; height: 2px; background: #888; left: 50%; bottom:1rem; transform: translateX(-50%)}
.teacher-life .story-list {display: flex;  margin-top: 2rem; gap: 20px; flex-wrap: wrap; position: relative;}
.teacher-life .story-list li {position:relative;width: 100%; padding: 1.5rem; border-radius: 12px; background: #f8f8f8; gap: 2rem; border: 1px solid #f8f8f8; transition: 0.2s linear; display: flex; align-items: flex-start;}
.teacher-life .story-list li:hover {border-color: var(--color-sub-red); background: #fff}
.teacher-life .story-list li .img-box {padding-bottom: 20%; position: relative; width: 30%; border: 1px solid #ddd; border-radius: 12px; overflow: hidden}
.teacher-life .story-list li img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; width: 100%; height: 100%}
.teacher-life .story-list li .text-box {width: 70%}
.teacher-life .story-list li .text-box .title{ font-size: 1.25rem; font-weight: 700; padding-bottom: 6px}
.teacher-life .story-list li .text-box .writer span {position: relative; color: #555}
.teacher-life .story-list li .text-box .writer span+span {padding-left: 15px}
.teacher-life .story-list li .text-box .writer span:first-child:after {position: absolute; content: ''; background: #666; right: -8px ;top: 50%; height: 12px; width: 1px; transform:translateY(-50%);}
.teacher-life .story-list li .text-box .body {padding-top: 1rem; line-height: 1.4; white-space: pre-wrap; }
.teacher-life .story-list li .text-box .date {padding-top: 1.5rem; color: #666}
.teacher-life .story-list li a.link {transition: 0.2s all linear; position: absolute; right:1rem; bottom: 1rem; background: url('../../img/withsam/sub/icon-more-round.png') no-repeat center; width: 30px; height: 30px; content:'';}
.teacher-life .story-list li a.link:hover {background: url('../../img/withsam/sub/icon-more-round_on.png') no-repeat center; transition: 0.2s all linear}
.teacher-life .popBtn {text-align: right; margin-top: 0.75rem;display: flex; justify-content: flex-end;}
.teacher-life .popBtn .basic_btn {position: relative;right: auto;top: auto;display: inline-block;}
.teacher-life .popBtn + .story-list {margin-top: 1rem;}



/* 슬기로운 교사생활 뷰 페이지 */
.teacher-life .story-list.view .img-box {width: 100%; padding-bottom: 56.25%; }
.teacher-life .story-list.view .img-box:after {content: ''; width: 80px; height: 80px; background: url(../../img/withsam/main/icon-play.png) center no-repeat; position: absolute; left: 50%;top: 50%;transform: translate(-50%,-50%);background-size: contain; z-index: 1;}
.teacher-life .story-list.view li{flex-direction: row-reverse; align-items: flex-start}
.teacher-life .story-list.view li a {width: 45%; transition: 0.2s all linear}
.teacher-life .story-list.view li .text-box {width: 55%}
/*teacher-life .story-list.view li a:hover .img-box:after {filter: drop-shadow(5px 5px 5px #000); transition: 0.2s all linear}*/
.teacher-life .view-board .post {display: flex; gap: 2rem; align-items: flex-start}
.teacher-life .view-board .post .img-wrap {width: 45%}
.teacher-life .view-board .post .img-box {position: relative; padding-bottom: 56.25%; height: 0; width: 100%; border-radius: 20px; overflow: hidden}
.teacher-life .view-board .post .img-box img {position: absolute;left: 50% ;transform: translate(-50%,-50%); top: 50%; height: 100%; width: 100%}
.teacher-life .view-board .post .text-box {width: 55%}
.teacher-life .view-board .post .text-box .title {font-size: 1.25rem;font-weight: 700;margin-bottom: 0.75rem;}
.teacher-life .story-list.view li:hover {border-color: #f8f8f8; background: #f8f8f8;}
.view-board .view-board-con .post + .post {padding-top: 3rem; border-top:1px solid #ddd;}
#popup_video.popup .popup_inner {width: 90%; height: auto; max-width: 1200px;}
#popup_video.popup .popup_inner .close-wrap  {background: var(--color-main-red); padding: 10px 20px; text-align: right}
.teacher-life #pager {margin-top: 3rem}

#popup_teacher .popup-close img {border-radius: 100%; border: 1px solid var(--color-sub-red); margin-top: 1rem}
#popup_teacher .pop_txt {font-size: 1.3rem; font-family: 'SejonghospitalBold'; margin-bottom: 1rem}
#popup_teacher .pop_txt .br {display: block;}
#popup_teacher .form {background: #f8f8f8; border-radius: 14px; padding: 2rem}
#popup_teacher p:not(.pop_txt) {color: #767676; margin-bottom: 1.75rem}
#popup_teacher .regist_box textarea {height: 100px}
#popup_teacher .write-board .regist_box {display: flex; align-items: flex-start; margin-top: 1rem;}
#popup_teacher .write-board .regist_box p {flex: 2}
#popup_teacher .write-board .regist_box input {flex: 8}
#popup_teacher .write-board .regist_box textarea {flex: 8}
#popup_teacher .write-board p {text-align: left}
.popup .popup_inner {width: 80%; max-width:800px;}

/* 비디오 컨트롤러 */
#popup_video.popup .popup_inner .popup_body {
    padding: 0;
}

.video_area {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.video_area video {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.video_area button {
    background-color:transparent;
    border:none;
    cursor: pointer;
}
.video_area button:hover {
    background-color:#ff7f21;
    transition:0.2s all linear;
}
.video_area .playBtn {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}
.video_area .playBtn:hover {
    background: none;
}
.playBtn img {
    width: 100%;
}
.player_controls {
    position: absolute;
    width: 100%;
    height: 12vh;
    left: 0;
    bottom: 0;
    opacity:1;
    background: linear-gradient(to bottom, transparent, #000 );
    transition:0.2s all linear;
}

.player_controls.on {
    bottom:0;
    opacity: 1;
    transition:0.2s opacity linear;
}

.player_controls.off {
    bottom: -100%;
    opacity:0;
    transition:0.5s all linear;
}

.player_controls img {
    width: 25px;
}

.player_controls > * {
    flex: 1;
}
.controlWrap {
    width: 96%;
    margin: 7vh auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.progress {
    display: flex;
    align-items: center;
}
.progress .btn_play {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    transition:0.2s all linear;
}
.progress .btn_play img {
    width: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
}
.progress .progressbar {
    flex: 10;
    position: relative;
    display: flex;
    width: 50vw;
    max-width: 250px;
    height: 7px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    flex-basis: 100%;
    transition: height 0.3s;
    cursor: pointer;
    margin: 0 1rem 0 0.5rem;
}
.progress .progress_filled {
    width: 0;
    background: #ff7f21;
    flex: 0;
    flex-basis: 0vw;
    border-radius: 10px;
}

.progress .progress_time {
    display: flex;
    color: #fff;
}
.progress .progress_time span {
    margin: 0 0.25rem;
    color: #fff;
}

input[type=range] {
    -webkit-appearance: none;
    background: rgba(255,255,255,0.3);
    width: 100px;
    margin: 0 1rem 0 0.5rem;
    border-radius: 10px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 7px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
    /*  background: rgba(255,255,255,0.3);*/
    border-radius: 10px;
}

input[type=range]::-webkit-slider-thumb{
    height: 15px;
    width: 15px;
    border-radius: 50px;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3.5px;
    box-shadow:0 0 2px rgba(0,0,0,0.3);
    background: #fff;
}

.rightWrap {
    display: flex;
    align-items: center;
    text-align: right;
    width: 225px;
}

.rightWrap .btn_volume {
    width: 30px;
    height: 30px;
    background:url('../../img/icon/icon_video_volume.svg') center no-repeat;
    background-size: 20px;
    border-radius: 5px;
    transition:0.2s all linear;
    text-indent: -99999px;
}

.rightWrap .play_fullscreen {
    width: 30px;
    height: 30px;
    line-height: 32px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: middle;
}

.rightWrap .play_fullscreen img {
    width: 18px;
    vertical-align: middle;
    margin-top: -5px;
}

.rightWrap .speedWrap {
    position: relative;
}

.rightWrap .btn_speed {
    width: 30px;
    height: 30px;
    background:url('../../img/icon/icon_video_play_speed.svg') center no-repeat;
    background-size: 20px;
    border-radius: 5px;
    transition:0.2s all linear;
    text-indent: -99999px;
    margin-right: 0.375rem;
}

.rightWrap .btn_speed.on {
    background-color: #ff7f21;
}

.rightWrap .selSpeed {
    display: block;
    opacity: 0;
    position: absolute;
    left: -0.375rem;
    bottom: 2rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    list-style: none;
    transition: 0.2s opacity linear;
    text-align: center;
    border-radius: 7px;
    padding: 0;
    overflow: hidden;
}

.rightWrap .selSpeed.active {
    opacity: 1;
    transition:0.2s opacity linear;
}

.rightWrap .selSpeed li {
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 15px;
}

.rightWrap .selSpeed li:hover, .rightWrap .selSpeed li.sel {
    color: #fff;
    background: #ff7f21;
}

#popup_video.fullscreen {

}

#popup_video.popup.fullscreen .popup_inner {
    width: 100%;
    height: 100%;
    min-height: auto;
    min-width: 100%;
    max-width: 100%;
    border-radius: 0;
}

#popup_video.popup.fullscreen .popup_inner .close-wrap {
    display: none;
}

#popup_video.popup.fullscreen .video_area {
    width: 100vw;
    height: 100vh;
}


/* 반응형 */
@media(max-width:1360px){

}

@media(max-width:1200px){

}

@media(max-width:1024px){
    #popup_teacher .write-board .regist_box {display: block}
    #popup_teacher .pop_txt {font-size: 1.1rem}
    #popup_teacher .popup_inner {width: 90%; max-width: none}
    #popup_teacher .write-board .regist_box p {margin-bottom: 0.5rem;}
    #popup_teacher .write-board .regist_box {margin-top: 1.5rem;}
}

@media(max-width:970px){
    .now-our-class .sub-title-wrap .title-box {font-size: 1rem;}
    .now-our-class .ourclass-list .box {width:calc((100% - 20px) / 2)}
    .now-our-class .ourclass-list .box .body {font-size: inherit;}

    .debate-wrap .debate-body {background-size: 36px; padding:2rem 1rem 1.75rem 4.5rem; background-position-x: 1.5rem;}
    .debate-list-top textarea {font-size: inherit;}
    .debate-list-top .flex-wrap {flex-wrap:wrap;align-items: baseline; justify-content: end;}
    .debate-list-top textarea {width:100%; height:120px;}
    .debate-list-top #debate-write-btn {width: auto; font-weight: 600; line-height: 1.6; font-size: 1rem; margin-left: 0; padding: 0.3rem 1.2rem; margin-top:1rem;}
    .debate-list-top .debate_noti {font-size: 1rem;}

    .write-board .flex-wrap {align-items: flex-start;}
    .write-board .regist_box .small_input, .write-board .regist_box textarea.small {width: calc(100% - 120px);}
}

@media(max-width:768px){
    .teacher-life .main-text {font-size: 1.5rem; word-break: keep-all}
    .teacher-life .story-list li {flex-direction: column; width: calc((100% - 20px) / 2); gap: 1rem; padding: .8rem}
    .teacher-life .story-list li .img-box {width: 100%; padding-bottom: 65%}
    .teacher-life .story-list li .text-box {width: 100%}
    .teacher-life .story-list li .text-box .title {font-size: 1.1rem; line-height: 1.3;}
    .teacher-life .story-list li .text-box .writer  {font-size: 14px}
    .teacher-life .story-list li .text-box .date {font-size: 13px; padding-top: 1rem}
    .now-our-class .ourclass-list .title {font-size: 1.1rem}
    .teacher-life .story-list.view li a {width: 100%}
    .teacher-life .story-list.view li {width: 100%; flex-direction: column; gap: 1rem; padding: 1.5rem}
    .teacher-life .story-list.view li .img-box {width: 100%}
    .teacher-life .story-list.view li .text-box {width: 100%}
    .teacher-life .story-list li .text-box .body {padding-top: 0.75rem;}
    .now-our-class .tab-wrap {padding-bottom: 0.5rem}

    .sam .sub-title-wrap .title-box {font-size: 1rem;}
    .debate-wrap {border-radius: 12px;}
    .debate-wrap .debate-body {background-size: 32px; padding: 2rem 1.5rem 1.75rem 4.25rem; background-position-y: 1.625rem;}
    .debate-wrap .debate-body .title {font-size: 1.125rem;}
    .debate-wrap .debate-body .con {margin-top:0.5rem; line-height: 1.5;}
    .debate-list-top {border-radius: 12px; padding: 1.25rem;}
    .teacher-life .view-board .post {flex-direction: column}
    .view-board .view-board-con .post + .post {padding-top: 2.5rem;}
    .teacher-life .view-board .post .img-wrap {width: 100%}
    .teacher-life .view-board .post .text-box {width: 100%}

    .write-board .regist_box .small_input, .write-board .regist_box textarea.small {width: 100%;}
    .basic_btn {padding: .3rem 1.5rem .3rem 3rem; font-size: 1rem}
    .basic_btn img {width: 25px;margin-top: 0;margin-right: 0.5rem;}
    .teacher-life .popBtn .basic_btn {padding: 0.625rem 1rem; letter-spacing: -0.75px;}

    .progress .progressbar {width: 200px;max-width: 200px;}
    .teacher-life .popBtn .basic_btn {padding: 0.625rem 1rem; letter-spacing: -0.75px;}

}

@media(max-width:640px){
    .now-our-class .sub-title-wrap .title-box, .sam .sub-title-wrap .title-box {font-size: .9rem; padding-left: 58px}
    .now-our-class .sub-title-wrap .img-box, .sam .sub-title-wrap .img-box {width: 46px; height: 46px}
    .now-our-class .sub-title-wrap .img-box img, .sam .sub-title-wrap .img-box img {max-width:26px}
    .teacher-life .story-list.view .img-box:after {width: 70px; height: 70px;}

    .debate-list-top textarea {height: 150px;}
    .debate-list-top #debate-write-btn {font-size:inherit;}

    input[type=range] {width: 80px;margin:0 0.5rem 0 0.375rem }
    .progress .progressbar {width: 150px; max-width:150px;}
    .rightWrap {width: 195px;}

}

@media(max-width:580px){

    .video_area .playBtn {width: 65px; height: 65px;}
    .progress .btn_play {width: 25px; height: 25px;}
    .progress .btn_play img {width: 12px;}
    .rightWrap .btn_speed {width: 25px; height: 25px; background-size: 17px;}
    .rightWrap .btn_volume {width: 25px; height: 25px; background-size: 16px;}
    .progress .progressbar {width: 120px; max-width: 120px;}
    input[type=range] {width: 60px;}
    .rightWrap .play_fullscreen {width: 25px; height: 25px; line-height: 26px;}
    .rightWrap .play_fullscreen img {width: 15px;}
    .rightWrap {width: 155px;}



}
@media(max-width:480px){
    .now-our-class .ourclass-list .box {width: 100%; padding: .8rem}
    .teacher-life .story-list li {width: 100%;}
    .teacher-life .story-list.view li {padding: .8rem;}
    .teacher-life .story-list.view .img-box:after {width: 60px; height: 60px;}
    .teacher-life .main-text {font-size: 1.3rem; line-height: 1.4; letter-spacing: -0.5px;}
    .teacher-life .main-text .br {display: block;}

    .debate-wrap .debate-top {padding: 0.5rem 0.75rem;}
    .debate-wrap .debate-top .period {font-size: 1rem; line-height: 30px;}
    .debate-wrap .debate-body {background-size: 26px; padding: 1.5rem 1.375rem 1.25rem 3.5rem; background-position: 1.25rem 1.25rem;}
    .debate-wrap .debate-body .con {line-height: 1.4;}
    .debate-wrap .debate-body .title {font-size: 1rem;}
    .debate-list-top .debate_noti {font-size: 15px;}
    .debate-list-top {padding:1.125rem 1rem 1rem;}
    .debate-list-top textarea {height: 180px; padding:1rem;}
    #popup_teacher .popup_inner {max-height: 86%; overflow-y: scroll;}
    #popup_teacher .pop_txt {font-size: 1rem; word-break: keep-all;}
    #popup_teacher .pop_txt .br {display: inline-block;}
    #popup_teacher .form {padding:1.75rem 1.5rem;}
    #popup_teacher p:not(.pop_txt) {margin-bottom: 1rem; letter-spacing: -0.5px;}
    #popup_teacher .regist_box textarea {height: 140px;}

    .teacher-life .popBtn {align-items: center;gap: 0.5rem;}
    .teacher-life .popBtn .basic_btn {padding: 0.75rem 1rem 0.625rem;text-align: center;word-break: keep-all;line-height: 1.2; /*width: calc((100% - 0.5rem) / 2);*/}
    .teacher-life .popBtn .basic_btn img {position: absolute;right: -1rem;top: -0.5rem;}
    /*.teacher-life .popBtn .basic_btn span {display: block; line-height: 1.2;}*/

    .popup .popup_inner {border-radius: 15px;}
    .controlWrap {margin:7.5vh auto 0;}
    #popup_video.popup .popup_inner {width: 94%;}
    .progress .progressbar {width: 80px; max-width:80px; margin: 0 0.25rem 0 0.375rem;}
    input[type=range] {width: 50px;margin:0 0.375rem 0 0.25rem;}
    .video_area .playBtn {width: 60px; height: 60px; top: 46%;}
    .rightWrap .btn_speed {margin-right: 0;}
    .rightWrap .play_fullscreen {padding: 3px 5px 0; }
    .rightWrap .play_fullscreen img {width: 16px;}
    .progress .progress_time {}
    .progress .progress_time, .progress .progress_time span {letter-spacing: -0.5px;}
    .rightWrap .selSpeed li {font-size: 13px;line-height: 1.5; padding: 0.125rem 0.5rem;}

}

@media(max-width:385px){
    .teacher-life .story-list.view .img-box:after {width: 50px; height: 50px;}

    .teacher-life .popBtn .basic_btn {padding: 0.75rem 0.75rem 0.625rem;}

    #popup_video.popup .popup_inner {width: 80px;}
}