@charset "utf-8";

/*
 * File : sub.css
 */


/* **************************************** *
 * COMMON
 * **************************************** */
#container {padding-top:93rem; padding-bottom:160rem;}
.article-header__text {margin-bottom:40rem;}
.article-title {font-size: 48rem; font-weight:600; }
.article-category {display:block; margin-bottom:12rem; font-size:18rem; color:#009E9A;}

/* BREADCRUMB */
.article-breadcrumbs {margin-bottom:24rem;position: relative;}
.breadcrumb {padding: 0;text-align: left;font-size: 0;display: flex;align-items: center;}
.breadcrumb li {position: relative;color: #777;padding: 0 10rem;font-size: 16rem;}
.breadcrumb li.separator {width:auto;font-size: 0;padding: 0;}
.breadcrumb li.separator:after {content: '\e91c';font-family: 'academy';font-size: 20rem;font-weight:normal;display: inline-block;}
.breadcrumb li.separator span { font-size: 0;}
.breadcrumb li:first-child {padding-left:0;}
.breadcrumb li:last-child {font-weight:600;text-decoration:underline;color:#232527}



/* **************************************** *
 * MEMBER CONFIRM 
 * **************************************** */
.member-confirm__box {padding:80rem 30rem;background:#F5F5F5;border:1rem solid #E9E9E9;display: flex;justify-content: center;}


/* **************************************** *
 * MYPAGE
 * **************************************** */
.mypage .article-header__text {display:flex; align-items:center;}
.btn-setting {border:none; padding:0; background:none; margin-left:auto;cursor:pointer;}
.btn-setting span {position:relative; font-size:18rem; padding-left:26rem;}
.btn-setting span:before {position:absolute; left:0; top:50%; transform:translateY(-50%);content: '\e903';font-family: 'academy';font-size: 20rem;font-weight:normal;color:#888;display: inline-block;}

.mypage .lecture-list {margin: -25rem -15rem -25rem;font-size: 0;}
.mypage .lecture-item {box-shadow:none;width: calc(33.33% - 30rem);margin: 25rem 15rem;display: inline-block;vertical-align:top}
.mypage .lecture-item__info {padding:18rem 0 0;}

.mypage .board-item {padding-left:0;}
.mypage .board-item .type {width:18%; text-align:center; margin:0 5rem;}
.mypage .board-item a {flex: 1;width:auto;}
.mypage .board-item a span br {display:none;}


/* **************************************** *
 * MYPAGE VIEW
 * **************************************** */
#container.mypage-view {padding-bottom:0;}
.mypage-view .article-header__inner { border-bottom:1rem solid #C7C7C7;}
.mypage-view .article-title {font-size:34rem;}

.lecture-info {display:flex; gap:60rem; margin-top:40rem;}
/* .lecture-info__img {position:relative; padding-top:26.25%;flex-shrink: 1; max-width: 600rem; width: 100%;}
.lecture-info__img img {display:block; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } */
.lecture-info__img { max-width: 600rem; width: 100%;}
.lecture-info__img img {display:block; width: 100%;}
.lecture-info video {max-width: 600rem; width: 100%;}
.lecture-info li {display:flex;gap: 20rem;font-size:18rem;line-height: 1.3;}
.lecture-info li.edu-file {align-items: center;}
.lecture-info li.progressbar-wrap {align-items: center;}
.lecture-info li + li {margin-top: 20rem;}
.lecture-info li > span {position:relative;color:#777;padding-left:10rem;width: 90rem;flex-shrink: 0;}
.lecture-info li > span:before {width:3rem;height: 14rem;background: #777;position:absolute;left:0;top: 4rem;display:block;content:'';}
.lecture-info li.edu-file p {display:flex;gap:5rem;}
.lecture-info li.edu-file a {position: relative;display: flex;align-items: center;width:320rem;padding:14rem 20rem;border:1rem solid #A0A0A0;font-size:15rem;color:#444;}
.lecture-info li.edu-file a:after {position:absolute;right: 20rem;top:50%;transform:translateY(-50%);content: '\e902';font-family: 'academy';font-size: 20rem;font-weight:normal;display: inline-block;}
.lecture-info li.edu-file a > i {display:block; margin-right:14rem;}
.lecture-info li.edu-file a > i > img {display:block;}
.lecture-info li.edu-file a > span {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-right: 30rem; padding-top:3rem;}
.lecture-info li .progressbar {width:573rem;}
.lecture-info li .progressbar-wrap .percentage {font-size:18rem; font-weight:600; margin-left:10rem; color:#009E9A;}

.progressbar-wrap {display: flex;align-items: center;}
.progressbar {position:relative; display:flex;width: 100%;height:10rem;border: 0 none;background: #E8E8E8; }
.progressbar > span {height: 100%;display: inline-block; background:#009E9A;}

.lecture-table {margin-top:58rem;}
.lecture-table .progressbar-wrap {justify-content: center;}
.lecture-table .progressbar {width:144rem; height:6rem;}
.lecture-table .progressbar > span {background:#484848;}
.lecture-table .percentage {margin-left:18rem;}
.lecture-table .btn-lecture {display: inline-block;background:#004EA1; font-size:15rem; color:#fff; text-align:center; padding:10rem 25rem;}

.recommend-lectures + .recommend-lectures {margin-top:110rem;}
.recommend-lectures-wrap {margin-top:98rem; padding:80rem 0; background:#FAFAFA}
.recommend-lectures__head {display:flex; align-items:center; margin-bottom:26rem;}
.recommend-lectures__head h3 {font-size:30rem; font-weight:600;}
.recommend-lectures__head .swiper-navigation {margin-left:auto;}
.recommend-lectures .recommend-lectures__slider {margin:0 -15rem;}
.recommend-lectures .lecture-item {width: calc(33.3% - 30rem); margin: 0 15rem;}
.recommend-lectures .lecture-item__detail .btn {padding:14rem; font-size:16rem;}

/* LECTURE POPUP */
.lecture-popup {display: flex;  justify-content: center;}
.lecture-video-section {width:100%;max-width:900rem;padding: 79rem 40rem 40rem;background:#fff;position: relative;}
.lecture-popup .mfp-close {font-size:0;right: 23rem;top: 23rem;opacity:1;}
.lecture-popup .mfp-close:before {font-family: 'academy';font-size:30rem;font-weight: normal;color: #000;content: '\e920';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.mfp-popup-open .mfp-bg {background:#000; opacity:0.5;}

.lecture-popup__head {display:flex; align-items:center;}
.lecture-popup__title {margin-bottom:30rem;}
.lecture-popup__title p {font-size:20rem}
.lecture-popup__title h2 { margin-top:8rem; font-size:28rem; font-weight:600;}
.lecture-popup__title span { display:block; margin-top:8rem; font-size:16rem; color:#A0A0A0;}
.lecture-popup__btn {flex-shrink: 0;margin-left:auto;font-size:0;}
.lecture-popup__btn > * {font-size:14rem;border:1rem solid #A0A0A0;background:#fff;padding:15rem;width:118rem;display: inline-block;text-align: center;cursor:pointer;}
.lecture-popup__btn > * + * {margin-left:14rem;}
.lecture-popup__dsec {margin-top:20rem;}

.lecture-video { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ } 
.lecture-video iframe, .lecture-video video { position: absolute; width: 100%!important; height: 100%!important; }
.lecture-video video::-webkit-media-controls-timeline {display:none !important; } 


/* 진행바 */

.lecture-note-section {display:none;width:100%;max-width:360rem;padding: 25rem 22rem 40rem; margin-left:12rem; background:#fff;position: relative;}
.lecture-popup__contents {display: flex; flex-direction: column; height:100%;}
.lecture-popup__head h2 {font-size:28rem; font-weight:600;}
.lecture-popup__head .lecture-popup__close {cursor:pointer;padding:0; width: 44px; height: 44px; line-height: 44px;background:none; border:none; font-size:0; position:absolute;right: 15rem;top: 23rem;opacity:1;}
.lecture-popup__head .lecture-popup__close:before {font-family: 'academy';font-size:30rem;font-weight: normal;color: #000;content: '\e920';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.lecture-popup__body {height:100%; margin-top:25rem;}
.lecture-popup__text {position:relative; height:100%; background:#FAFAFA; padding:24rem 20rem;}
.lecture-popup__text form {height:100%;}
.lecture-popup__text p {font-size:16rem; line-height:1.5; color:#444; }
.lecture-popup__text textarea {border:none; background:none; resize: none; width:100%; height:calc(100% - 50rem); font-size:16rem;}
.lecture-popup__text textarea::placeholder {font-size:15rem;position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; text-align:center;}
.lecture-popup__text .btn-save {cursor:pointer;position:absolute; right:14rem; bottom:14rem; width:100rem; border:none; padding:11rem; background:#009E9A; text-align:center; color:#fff; font-size:14rem;}

/* LECTURE PROBLEM */
/* .lecture-problem__popup {top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;position: fixed;overflow-y:auto; }
.lecture-problem__overlay {top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.5;}
.lecture-problem__inner {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;} */
.lecture-problem__inner {width: 480rem;margin:0 auto;}
.lecture-problem__box { position:relative;background:#fff;margin: 0 12rem;padding:60rem 40rem 40rem;z-index:100;vertical-align: middle;}
.lecture-problem__close.mfp-close {position:absolute;right: 12rem;top: 12rem;cursor:pointer;border:none;padding: 0;background:none;width: 40rem;height: 40rem;}
.lecture-problem__close:before {font-family: 'academy';font-size:20rem;font-weight: normal;color: #000;content: '\e920';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.lecture-problem__title {font-weight:600;}
.lecture-problem__title span {font-size:20rem;font-weight: 500;color:#444;margin-bottom:10rem;display: block;}
.lecture-problem__title p {font-size: 24rem;position:relative;padding-left:27rem;display: block;}
.lecture-problem__title p:before {content:'Q.';color:#0070E8;position:absolute;left:0;top: 0;}
.lecture-problem__list {margin-top: 30rem;}
.lecture-problem__list label {border: 1rem solid #BFBFBF;border-radius:12rem;background:#fff;padding: 17rem 17rem 17rem 46rem;width: 100%;display: block;}
.lecture-problem__list label + label {margin-top:8rem;}
.lecture-problem__list .custom-radio + .custom-radio {margin-left:0;}
.lecture-problem__list .custom-radio .checkmark { left:19rem; top:15rem;}
.lecture-problem__box .btn-basic {background:#009E9A;}
.lecture-problem__text {margin-top:30rem;}
.lecture-problem__text textarea.form-input {width:100%;max-width: 100%;height: 310rem;padding: 18rem 20rem;border: 1rem solid #BFBFBF;border-radius:8rem;overflow: auto;resize: none;display: block;}