@charset "utf-8";
/******************************************************************************************************************************/
/********************************************************* ui-service *********************************************************/
/******************************************************************************************************************************/
/* 랜딩 > 트랙 */
.scroltable-container {/*width:743px;*/overflow: auto;-ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
.scroltable-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
.scroltable-wrapper {position:relative;}
.scroltable-nav { display: none; position: absolute; width:28px; height:100%; cursor: pointer;top:0;background-color:rgba(226, 226, 226, 0.5);border:1px solid rgba(198, 198, 198, 0.5);z-index:1;}
.scroltable-nav.scroltable-nav-left { left:0;}
.scroltable-nav.scroltable-nav-left::after {content:'';opacity:0.5;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:6px;height:18px;background:url(/img/common/ico/ico_table_arrow_prev-9ac213f780c59fc9a8e454c79166793c.svg) no-repeat center / 100% auto;}
.scroltable-nav.scroltable-nav-right { left:712px;}
.scroltable-nav.scroltable-nav-right::after {content:'';opacity:0.5;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:6px;height:18px;background:url(/img/common/ico/ico_table_arrow_next-109b0652636e815657f58edd68956c3a.svg) no-repeat center / 100% auto;}

.landing-session {position:relative;}
.landing-session .type {margin-top:60px; overflow-x:auto;}
.landing-session .type:first-child{margin-top:20px;}
.landing-session .type .top {height:42px;background-color:#2C2C2C;color:#fff;padding:0 20px;display:flex;align-items:center;margin-bottom:15px;}
.landing-session .type .top > * {font-weight:bold;color:#fff;}
.landing-session .type .top .date {margin-left:20px;letter-spacing:0.04em;}

.landing-session .table {width:auto;margin-bottom:0;}
.landing-session .table th,
.landing-session .table td {padding:0;border-top:none;border-bottom:1px solid #E2E2E2;}
.landing-session .table thead th {background-color:#3FA8F4;border:0;padding:0;text-align:center;}
.landing-session .table thead th > * {color:#fff;}
.landing-session .table thead th > * {height:40px;line-height:40px;}

/* 멀티트랙 */
.landing-session .multiple thead th:first-child {width:80px;}
.landing-session .multiple tbody th .box {width:80px;min-height:260px;display:flex;align-items:center;justify-content:center;}
.landing-session .multiple tbody tr.odd th .box {min-height:90px;}
.landing-session .multiple tbody td {border-left:1px solid #E2E2E2;}
.landing-session .multiple tbody td .box {width:160px;padding:13px 10px 10px;}
.landing-session .multiple tbody tr.default > td:nth-child(2n) {background-color:#FCFCFD;}
.landing-session .multiple tbody tr.odd > td:nth-child(odd) {background-color:#FCFCFD;}
.landing-session .multiple tbody .poster th .box {min-height:70px;}

.landing-session .multiple .session {border-top:1px solid #E2E2E2;padding:13px 0 18px;}
.landing-session .multiple .session:first-child {border:none;padding-top:0;}
.landing-session .multiple .session .title {position:relative;padding-left:18px;}
.landing-session .multiple .session .title::before {content:'';display:inline-block;position:absolute;top:3px;left:0;width:13px;height:12px;background:url(/img/common/ico/ico_track_bk-6c1fb645b51c61105aa505f1c7691fc1.svg) no-repeat center / 100% auto;}
.landing-session .multiple .session .time {position:relative;padding-left:18px;}
.landing-session .multiple .session .time::before {content:'';display:inline-block;position:absolute;top:4px;left:0;width:12px;height:12px;background:url(/img/common/ico/ico_clock_gray-4f27016dff10ff89cc343e0e4a5102ca.svg) no-repeat center / 100% auto;}

.landing-session .multiple .break-time {letter-spacing:25px;min-height:85px;display:flex;align-items:center;justify-content:center;}

/* 단일트랙 */
.landing-session .single .over-scroll{overflow-x: auto;}
.landing-session .single .table {width:100%;}
.landing-session .single .table:not(:first-child) {margin-top:20px;}
.landing-session .single .normal th {background:transparent;border-bottom:1px solid #E2E2E2;}
.landing-session .single .normal th > * {color:#2C2C2C;}
.landing-session .single .normal th:not(:first-child) {border-left:1px solid #E2E2E2;}
.landing-session .single .normal th:first-child {width:182px;}

.landing-session .single td:not(:first-child) {border-left:1px solid #E2E2E2;}
.landing-session .single td:first-child {width:182px;}
.landing-session .single tbody .box {text-align:center;min-height:58px;display:flex;justify-content:center;align-items:center;padding:10px;}
.landing-session .single tbody .box a {display:block;}
.landing-session .single tbody tr:nth-child(odd) {background-color:#FCFCFD;}

/* 랜딩 > 커리큘럼 */
.landing-curriculum .wrap {padding-bottom:30px;}
.landing-curriculum .wrap:not(:first-child) {border-top:1px solid #E2E2E2;padding-top:30px;}
.landing-curriculum .top .title::before {content:'';width:20px;height:15px;background:url(/img/service/ico/ico_film-733253a548fe9e2e558f16233fdb437c.svg) no-repeat center / 100% auto;display:inline-block;}
.landing-curriculum .view {display:flex;margin-top:14px;width:100%;}
.landing-curriculum .view-thumb {width:267px;height:150px;flex-shrink:0;flex-basis:267px;background-color:#404040;border-radius:5px;position:relative;overflow:hidden;}
.landing-curriculum .view-thumb img {width:100%;vertical-align:middle;}
.landing-curriculum .view-list {padding-left:15px;width:100%;}
.landing-curriculum .view-list li {display:flex;justify-content:space-between;padding-bottom:6px;}
.landing-curriculum .view-list li:not(:first-child) {padding:6px 0;}
.landing-curriculum .view-list li > a {display:inline-block;font-weight:bold;text-decoration:underline;}
.landing-curriculum .view-list li > p {font-weight:bold;}
.landing-curriculum .view-list li.free::after {content:'무료공개';flex:0 0 60px;display:block;color:#fff;font-weight:bold;background-color:#2C2C2C;line-height:1;height:24px;line-height:24px;width:60px;border-radius:4px;font-size:12px;text-align:center;margin-left:10px;}

/* 랜딩 > 후기 */
.landing-review dl, .landing-review dl > * {padding:0;margin:0;}
.landing-review dd {margin-top:5px;display:flex;align-items:center;}
.landing-review .review-top {width:100%;height:86px;background-color:#F4F5F8;display:flex;justify-content:space-around;align-items:center;}
.landing-review .review-top .numbers {display:flex;align-items:center;}
.landing-review .review-top .score .numbers > span::after {content:'점';}
.landing-review .review-top .score .numbers .total::before {content:'/';font-weight:normal;}
.landing-review .review-top .count .numbers .ico {width:22px;height:20px;background:url(/img/service/ico/ico_review-ed9fd7954439c4dd299406485812de28.svg) no-repeat center / 100% auto;display:inline-block;margin-right:7px;}
.landing-review .review-top .count .numbers .num::after {content:'개';}

/* stars */
.landing-review .stars-area {display:inline-block;width:82px;height:14px;background:url(/img/service/ico/ico_stars-0be4bce74e18a23a98d1623ced543fbe.png) no-repeat 0 0;margin-right:6px;}
.landing-review .stars-on {display:block;width:82px;height:14px;background:url(/img/service/ico/ico_stars-0be4bce74e18a23a98d1623ced543fbe.png) no-repeat 0 0;background-position:0 -14px;overflow:hidden;}

/* list */
.landing-review {display:flex;flex-direction:column;}
.landing-review .review-list li {border-bottom:1px solid #E2E2E2;padding:20px 0;}
.landing-review .review-list li .user {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
.landing-review .btn-more {margin:20px auto 0;}

/* 랜딩 > 질문과답변 */
.landing-qna {border-top:2px solid #2C2C2C;display:flex;flex-direction:column;}
.landing-qna .qna-list li {padding:20px 0;border-bottom:1px solid #E2E2E2;}
.landing-qna .qna-list .question .text {margin-top:10px;}
.landing-qna .qna-list .reply {padding-left:20px;margin-top:20px;}
.landing-qna .qna-list .reply .text {padding-left:35px;margin-top:2px;}
.landing-qna .btn-more {margin:20px auto 0;}

/* 랜딩 > 환불정책 */
.landing-refund {border-radius:5px;background-color:#E2E2E2;width:100%;min-height:133px;padding:30px 25px;}
.landing-refund .text {margin-bottom:20px;}

/* 데이터가 비어있을 때, ver.empty */
.data-empty {min-height:110px;display:flex;justify-content:center;align-items:center;flex-direction:column;}
.data-empty > p {line-height:1.6;}

/* 새창 팝업 - 후기작성,질문작성 */
.pop-writer {overflow:hidden;}
.pop-writer .top {width:100%;height:40px;background-color:#2C2C2C;position:relative;}
.pop-writer .top .title {color:#fff;line-height:40px;}
.pop-writer .top .btn-close {position:absolute;top:50%;right:5px;transform:translateY(-50%);cursor:pointer;}
.pop-writer .mid {padding:30px 30px 0;}
.pop-writer .mid .input-stars {_border-bottom:1px solid #E2E2E2;margin-top:20px;padding-bottom:20px;}
.pop-writer .mid .ui-textarea-count {margin-top:20px;}
.pop-writer .mid .ui-textarea {height: auto !important;min-height:160px;}
.pop-writer .mid .ui-textarea:focus {border-width:2px;border-radius:2px;}
.pop-writer .bottom {padding:20px 0 10px;}

/* 후기작성 - 별 */
.input-stars {display:flex;flex-direction:column;justify-content:center;align-items:center;}
.input-stars > input[name="stars"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.input-stars .stars {display:flex;justify-content:center;align-items:center;width:fit-content;}
.input-stars .stars label {cursor:pointer;padding:0 3px;margin-bottom:0;}
.input-stars .stars + .text {margin-top:10px;}
#star-1:checked ~ .stars [for=star-1] svg,
#star-2:checked ~ .stars [for=star-1] svg,
#star-2:checked ~ .stars [for=star-2] svg,
#star-3:checked ~ .stars [for=star-1] svg,
#star-3:checked ~ .stars [for=star-2] svg,
#star-3:checked ~ .stars [for=star-3] svg,
#star-4:checked ~ .stars [for=star-1] svg,
#star-4:checked ~ .stars [for=star-2] svg,
#star-4:checked ~ .stars [for=star-3] svg,
#star-4:checked ~ .stars [for=star-4] svg,
#star-5:checked ~ .stars [for=star-1] svg,
#star-5:checked ~ .stars [for=star-2] svg,
#star-5:checked ~ .stars [for=star-3] svg,
#star-5:checked ~ .stars [for=star-4] svg,
#star-5:checked ~ .stars [for=star-5] svg {transform: scale(1);}

#star-1:checked ~ .stars [for=star-1] svg path,
#star-2:checked ~ .stars [for=star-1] svg path,
#star-2:checked ~ .stars [for=star-2] svg path,
#star-3:checked ~ .stars [for=star-1] svg path,
#star-3:checked ~ .stars [for=star-2] svg path,
#star-3:checked ~ .stars [for=star-3] svg path,
#star-4:checked ~ .stars [for=star-1] svg path,
#star-4:checked ~ .stars [for=star-2] svg path,
#star-4:checked ~ .stars [for=star-3] svg path,
#star-4:checked ~ .stars [for=star-4] svg path,
#star-5:checked ~ .stars [for=star-1] svg path,
#star-5:checked ~ .stars [for=star-2] svg path,
#star-5:checked ~ .stars [for=star-3] svg path,
#star-5:checked ~ .stars [for=star-4] svg path,
#star-5:checked ~ .stars [for=star-5] svg path {fill:#3FA8F4;stroke:#329FED;}

#star-1 ~ .stars:hover [for=star-1] svg path,
#star-2 ~ .stars:hover [for=star-1] svg path,
#star-2 ~ .stars:hover [for=star-2] svg path,
#star-3 ~ .stars:hover [for=star-1] svg path,
#star-3 ~ .stars:hover [for=star-2] svg path,
#star-3 ~ .stars:hover [for=star-3] svg path,
#star-4 ~ .stars:hover [for=star-1] svg path,
#star-4 ~ .stars:hover [for=star-2] svg path,
#star-4 ~ .stars:hover [for=star-3] svg path,
#star-4 ~ .stars:hover [for=star-4] svg path,
#star-5 ~ .stars:hover [for=star-1] svg path,
#star-5 ~ .stars:hover [for=star-2] svg path,
#star-5 ~ .stars:hover [for=star-3] svg path,
#star-5 ~ .stars:hover [for=star-4] svg path,
#star-5 ~ .stars:hover [for=star-5] svg path {fill:#3FA8F4;stroke:#329FED;}
.input-stars input ~ .stars label:hover svg path {fill:#3FA8F4 !important;}
.input-stars input ~ .stars label:hover ~ label svg path {fill:#E2E2E2 !important;stroke: #e2e2e2 !important;;}

/* 질문작성 */
.pop-writer .mid .profile-wrap {justify-content:center;margin-top:16px;}
.pop-writer .mid .profile-wrap .txt-box {flex:none;}

/* 미리보기 - 빈값 */
.preview-empty {padding:30px 0;}
.preview-empty.sm {padding:0;}
.preview-empty.thumb {height:479px;background-color:#F8F8F8;display:flex;justify-content:center;align-items:center;}

/* 미리보기 모드 */
.preview-mode {background-color:#E7F5FE;border-bottom:1px solid #3FA8F4;position:fixed;width:100%;z-index:10;}
.preview-mode .content {display:flex;justify-content:flex-start;align-items:center;height:56px;line-height:56px;}
.preview-mode .title {margin-right:20px;}
.preview-mode .title::before {content:'';display:inline-block;width:18px;height:12px;background:url(/img/service/ico/ico_eye-0bc7ca961470c5d0601948d62712e054.svg) no-repeat center / 100% auto;margin-right:7px;}

/* 미리보기 */
.preview .btnc.blue:disabled {background-color:#3FA9F5;}
.preview .btnc.black:disabled {background-color:#2c2c2c;}
.preview .btnc.blue-line:disabled {background-color:#fff;border: 1px solid #3FA9F5;}
.preview .btnc.blue-line:disabled span {color:#3FA9F5;}

/* 시청페이지 - frame*/
body.view {background-color:#000;overflow-y:hidden;}
body.offcanvas {margin-right:520px;transition:margin-right 0.24s;}
body.offcanvas-wide {margin-right:840px;transition:margin-right 0.2s;}
body.offcanvas.modal-open,
body.offcanvas-wide.modal-open {padding-right:0!important;}

.view-nav {position:fixed;top:0;right:0;width:90px;height:100vh;background-color:#fff;border-left:1px solid #E2E2E2;z-index:1002;}
.view-nav li .nav-btn {width:100%;height:99px;border-right:5px solid transparent;transition:all 0.2s;}
.view-nav li .nav-btn.active,
.view-nav li .nav-btn:active {border-right:5px solid #3FA8F4;background-color:#F8F8F8;}
.view-nav li .nav-btn:hover {background-color:#F8F8F8;}
.view-nav li .nav-btn .ico {position:relative;}
.view-nav li .nav-btn .ico svg path{transition:fill 0.2s;}
.view-nav li .nav-btn.active .ico svg path,
.view-nav li .nav-btn:active .ico svg path,
.view-nav li .nav-btn:hover .ico svg path{fill:#3FA8F4;}
.view-nav li .nav-btn .title {margin-top:6px;transition:color 0.2s;}
.view-nav li .nav-btn.active .title,
.view-nav li .nav-btn:active .title,
.view-nav li .nav-btn:hover .title {color:#3FA8F4;}
.view-nav li .nav-btn .count {position:absolute;top:-8px;left:45px;color:#fff;padding:0 5px;background-color:#FF9252;border-radius:20px;min-width:18px;height:18px;font-size:12px;}


/* 질의응답 기획변경 수정 중 */

.view-nav li .nav-btn.noti,
.view-nav li .nav-btn.noti .title{position:relative;}
.view-nav li .nav-btn.noti path{fill:#fff !important;}
.view-nav li .nav-btn.noti .title{color:#fff;}
.view-nav li .nav-btn.noti{border-right:5px solid #FF9252;}
.view-nav li .nav-btn.noti:before{content:""; width:100%; height:100%; background-color: #ff9252; position:absolute; left:0; top:0; -webkit-animation: blink-1 1.5s infinite both ease-in-out; animation: blink-1 1.5s infinite both ease-in-out;}
/* ----------------------------------------------
 * Generated by Animista on 2021-8-27 14:31:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: .9;
  }
  25%,
  75% {
    opacity: .5;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: .9;
  }
  25%,
  75% {
    opacity: .5;
  }
}

/* //질의응답 기획변경 수정 중 */



.view-nav .write-review {border-top:1px solid #E2E2E2;}
.view-nav .write-review button {width:100%;height:99px;border-right:5px solid transparent;transition:all 0.2s;}
.view-nav .write-review button:active {background-color:#F8F8F8;}
.view-nav .write-review button .title {color:#ff9252;margin-top:6px;}
.view-nav .write-review button.active .title,
.view-nav .write-review button:active .title,
.view-nav .write-review button:hover .title {color:#ff9252;font-weight:bold;}
.view-nav .write-review button.active .ico svg path,
.view-nav .write-review button:active .ico svg path,
.view-nav .write-review button:hover .ico svg path {fill:#ff9252;}

.view-frame header {height:64px;display:flex;align-items:center;width:calc(100% - 90px);position:relative;border:none;padding:0;z-index:11;background-color:transparent;padding:0 20px;border-bottom:1px solid #E2E2E2;background-color:#fff;}
.view-frame header .wrap {display:flex;justify-content:space-between;flex:1;}
.view-frame header .align-left {display:flex;align-items:center;}
/* .view-frame header .align-left .title {margin-left:20px;} */
.view-frame header .align-left .title ul {display:flex;align-items:center;}
.view-frame header .align-left .title li {width:110px;position:relative;}
.view-frame header .align-left .title li:not(:first-child) {padding-left:12px;}
.view-frame header .align-left .title li:not(:first-child)::before {content:'';display:inline-block;width:6px;height:12px;background:url(/img/service/ico/ico_arrow_right_gy2-010b716f2073ee7be25ee304ab64878b.svg) no-repeat center / 100% auto;position:absolute;left:0px;top:50%;margin-top:-6px;}
.view-frame header .align-left .title li.last {width:100%;}
.view-frame header .align-left .btn-leave {margin-right:20px;}
.view-frame header .align-right {display:flex;align-items:center;}
/* .view-frame header .align-right .time-remaining {display:flex;flex-direction:column;align-items:flex-end;margin-top:4px;}
.view-frame header .align-right .time-remaining > p {line-height:1;} */
.view-frame header .align-right .btn-group > button {margin-left:10px;}
.view-frame header .align-right .btn-group > button .complete {top:initial;top:auto;bottom:-30px;}

.view-frame header .view-title.title-wrap {width:250px!important;font-size:14px;line-height:1.3;}

.view-frame .view-footer {position:fixed;left:0;bottom:0;width:calc(100% - 80px);height:44px;background-color:#2C2C2C;display:flex;justify-content:center;align-items:center;}
.view-frame .view-footer button {display:flex;justify-content:center;align-items:center;}
.view-frame .view-footer .btn-prev {margin-right:30px;}
.view-frame .view-footer .btn-prev::before {content:'';background:url(/img/service/ico/ico_prev-bf316479f0c4fb02231f094bc5e649a4.svg) no-repeat center / 100% auto;width:6px;height:15px;display:inline-block;margin-right:7px;}
.view-frame .view-footer .btn-next::after {content:'';background:url(/img/service/ico/ico_prev-bf316479f0c4fb02231f094bc5e649a4.svg) no-repeat center / 100% auto;width:6px;height:15px;display:inline-block;transform:rotate(180deg);margin-left:7px;}
.view-frame .view-footer button span {color:#fff;}
.view-frame .view-footer button:active {opacity:0.7;}
.view-frame .view-footer button:hover span {text-decoration:underline;}
body.offcanvas .view-footer {width:calc(100% - 610px);transition:width 0.24s;}
body.offcanvas-wide .view-footer {width:calc(100% - 930px);transition:width 0.24s;}

.view-content > .part {width:520px;height:100%;overflow-y:auto;background-color:#fff;border-left:1px solid #E2E2E2;position:fixed;top:0;right:-520px;transition:right 0.24s;}
.view-content > .part-file {width:840px;height:100%;overflow-y:auto;background-color:#fff;border-left:1px solid #E2E2E2;position:fixed;top:0;right:-840px;transition:right 0.24s;}
.view-content > .part.file-content {width:840px;}

.view-content > .part > .top {display:flex;justify-content:space-between;align-items:center;padding:20px 20px 17px;position:fixed;top:0;width:520px;background:#fff;z-index:1001;}
.view-content > .part-file .top  {display:flex;justify-content:space-between;align-items:center;padding:20px 20px 17px;position:fixed;top:0;width:840px;background:#fff;z-index:1001;}
.view-content > .part-file .top .title.depth {display:flex;align-items:center;}
.view-content > .part-file .top .title.depth::before {content:'';width:8px;height:17px;background:url(/img/service/ico/ico_arrow_left_bk-6213040cf85e279ce94986e11c5f732b.svg) no-repeat center / 100% auto;display:inline-block;margin-right:8px;}
.view-content > .part-file .top .title.depth:active {opacity:0.7;}
.view-content > .part .top .btn-close,
.view-content > .part-file .top .btn-file-close {text-indent:-9999px;overflow:hidden;width:36px;height:36px;background:url(/img/service/ico/ico_nav_close-f4d8deb6cea58bf6b5d65dd2aef980fe.svg) no-repeat center / 35px 35px;}
.view-content > .part .top .btn-close:hover, .view-content > .part .top .btn-close:active, .view-content > .part-file .top > .wrap button:hover, .view-content > .part-file .top > .wrap button:active {background-color:rgba(0,0,0,0.06);}
.view-content > .part .top > .wrap,
.view-content > .part-file .top > .wrap {position:absolute;top:15px;right:20px;display:flex;justify-content:center;align-items:center;}
.view-content > .part-file .top > .wrap button:not(:first-child) {margin-left:3px;}
.view-content > .part-file .top .btn-download {text-indent:-9999px;overflow:hidden;width:36px;height:36px;background:url(/img/service/ico/ico_download_bk-9fad8601bf3f9422719f731f014c504c.svg) no-repeat center / 24px 21px;}

.view-content > .part .top .btns-layout {display:flex;margin-right:10px;}
.view-content > .part .top .btns-layout > button {width:30px;height:30px;border-radius:2px;display:flex;justify-content:center;align-items:center;}
.view-content > .part .top .btns-layout > button.active,
.view-content > .part .top .btns-layout > button:active {background-color:#F8F8F8;}
.view-content > .part .top .btns-layout > button:hover svg path,
.view-content > .part .top .btns-layout > button:active svg path,
.view-content > .part .top .btns-layout > button.active svg path,
.view-content > .part .top .btns-layout > button:hover svg rect,
.view-content > .part .top .btns-layout > button:active svg rect,
.view-content > .part .top .btns-layout > button.active svg rect {fill:#3FA8F4;}
.view-content > .part .top .btns-layout > button:not(:first-child) {margin-left:6px;}

.view-content > .part .mid {padding-top:64px;height:calc(100% - 64px);}
.view-content > .part .mid > .files {opacity:0;visibility:hidden;height:0;display:none;}
.view-content > .part .mid > .files.active {opacity:1;visibility:visible;transition:all 0.2s;display:block;}

.view-content > .part-next .top {background:transparent;padding:0;}
.view-content > .part-next .title {padding:20px 20px 17px;}
.view-content > .part-next .title.depth {padding:20px 20px 17px;background:#fff;width:520px;position:fixed;top:0;z-index:9;}
.view-content > .part-next .title.depth .depth {display:flex;align-items:center;}
.view-content > .part-next .title.depth .depth::before {content:'';width:8px;height:17px;background:url(/img/service/ico/ico_arrow_left_bk-6213040cf85e279ce94986e11c5f732b.svg) no-repeat center / 100% auto;display:inline-block;margin-right:8px;}
.view-content > .part-next .title.depth .depth:active {opacity:0.7;}
.view-content > .part-next .mid {position:relative;overflow:hidden;height:100%;}
.view-content > .part-next .mid .con {width:100%;height:100%;opacity:0;visibility:hidden;position:absolute;top:0;}
.view-content > .part-next .mid .con.scroll {overflow-y:auto;}
.view-content > .part-next .mid .con.left-side {left:-100%;transition:opacity 0.2s, visibility 0.2s,left 0.2s;}
.view-content > .part-next .mid .con.right-side {right:-100%;transition:opacity 0.2s, visibility 0.2s,right 0.2s;}
.view-content > .part-next .mid .con.active {opacity:1;visibility:visible;transition:all 0.2s;}
.view-content > .part-next .mid .con.active.left-side {left:0;}
.view-content > .part-next .mid .con.active.right-side {right:0;display:block;}

.view-content > .part-next.category > .top {background-color:#fff;}
.view-content > .part-next.category .mid {overflow-y:auto;}
.view-content > .part-next.category .mid .con {height:auto;position:absolute;top:291px;}
/* .view-content > .part-next.category .mid .con.active {display:block;} */

@media all and (-ms-high-contrast:none) {
  .view-content > .part-next.category .mid .con {top:297px;}
}

.view-frame .video-area {width:calc(100% - 90px);height:calc(100vh - 64px); position:relative;z-index:1;}
body.view.lecture .view-frame .video-area {width:calc(100% - 90px);height:calc(100vh - 108px);}

.view-frame .video-area .state-box{text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.view-frame .video-area .state-box .state-txt{line-height:1.4; text-align:center; font-size:18px; font-weight:bold; color:#fff; margin-top:25px;}
.view-frame .video-area .state-box .state-txt span{display:block; color:#fff;}

.view-frame .video-area .move-box{position:absolute; right:30px; bottom:20px;}
.view-frame .video-area .move-box > span{color:#fff; margin-right:10px;}

.view-frame .video-area video,
.view-frame .video-area iframe{width:100% !important; height:100% !important;}

.view-frame .live-container{width:100%; height:100%; position:relative;}
.view-frame .live-container .status-txt{color:#fff; position:absolute; left:20px; top:20px;}
.view-frame .live-container .ready:before{content:""; display:inline-block; width:10px; height:10px; background-color:#FE9252; border-radius:100%; margin-right:6px; position:relative; top:-2px;}
.view-frame .live-container .on-air:before{content:""; display:inline-block; width:10px; height:10px; background-color:#1DC32A; border-radius:100%; margin-right:6px; position:relative; top:-2px;}

.view-frame .live-container.ready{border:3px solid #FF9252;}
.view-frame .live-container.ready .ready{display:block;}
.view-frame .live-container.ready .on-air{display:none;}

.view-frame .live-container.on-air{border:3px solid #1DC32A;}
.view-frame .live-container.on-air .ready{display:none;}
.view-frame .live-container.on-air .on-air{display:block;}

.view-frame .recording{width:100%; color:#fff; margin-bottom:7px;}
.view-frame .recording:before{content:""; display:inline-block; width:10px; height:10px; background-color:#F8444E; border-radius:100%; margin-right:6px;
  -webkit-animation: fade-out 0.5s ease-out infinite alternate both;
  animation: fade-out 0.5s ease-out infinite alternate both;
}
.m-btn-live-group .recording{width:100%; color:#fff; margin-bottom:7px;}
.m-btn-live-group .recording:before{content:""; display:inline-block; width:10px; height:10px; background-color:#F8444E; border-radius:100%; margin-right:6px;
  -webkit-animation: fade-out 0.5s ease-out infinite alternate both;
  animation: fade-out 0.5s ease-out infinite alternate both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-11-8 13:54:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.btn-live-group{position:absolute; bottom:50px; left:50%; transform:translate(-50%, -50%);}
.btn-live-group .btnc-group{display:flex; height:70px; border:1px solid #414141; border-radius:5px; overflow: hidden;}

.btn-live-group .btn-toggle{display:block; width:80px; height:100%; background-color:rgba(40, 40, 40, .95); _border:1px solid #414141;  padding:5px 10px; padding-top:0; cursor:pointer;}
.btn-live-group .btn-toggle span{color:#fff;}
.btn-live-group .btn-toggle:before{content:""; display:block; width:100%; height:28px; margin-right:5px;}

.btn-live-group .btn-toggle.video:before{background:url(/img/service/ico/ico_video_on-2cc09c76f4dd20c5ea4f33d26cadec09.svg) no-repeat center / 45px auto;}
.btn-live-group .btn-toggle.video.active:before{background-image:url(/img/service/ico/ico_video_off-04f27b1577b9ae7d4537b9793e803466.svg)}

.btn-live-group .btn-toggle.mic:before{background:url(/img/service/ico/ico_mic_on-0560626caa1367073b331c8e4a4ce30e.svg) no-repeat center / 45px auto;}
.btn-live-group .btn-toggle.mic.active:before{background-image:url(/img/service/ico/ico_mic_off-af52acd52bbe514aeb6ff77d6ed5ab28.svg)}

.btn-live-group .btn-toggle.qna:before{background:url(/img/service/ico/ico_qna_off-27dab9cada6bb4667fa6e8263b8625de.svg) no-repeat center / 45px auto;}
.btn-live-group .btn-toggle.qna.active:before{background:url(/img/service/ico/ico_qna_on-5ef0e505a28211b197bdff54dd8f9f5b.svg) no-repeat center / 45px auto;}

.btn-live-group .btn-toggle.survey:before{background:url(/img/service/ico/ico_survey-77cd4fad1cf89f9a1b365b7f2ce98bf4.svg) no-repeat center / 45px auto;}

.btn-live-group .btn-toggle.share:before{background:url(/img/service/ico/ico_share_live-cff9e148a6dfd55a668986621caba165.svg) no-repeat center / 45px auto;}

.btn-live-group .btn-toggle.boardcast{background-color:#1DC32A; _border:1px solid #007B0A; border-radius:0 3px 3px 0;}
.btn-live-group .btn-toggle.boardcast:before{background:url(/img/service/ico/ico_boardcast_on-8a4e116b7de8ed1866511e54f4007629.svg) no-repeat center / 50px auto; position:relative; top:2px;}
.btn-live-group .btn-toggle.boardcast.active{background-color:#D00000; border:1px solid #91000F;}
.btn-live-group .btn-toggle.boardcast.active:before{background-image: url(/img/service/ico/ico_boardcast_off-b34e2b2465a3a45d0b3f2c01fdf5b34b.svg);}

.m-btn-live-group{display:none; position:absolute; bottom:50px; left:50%; transform:translate(-50%, -50%);}
.m-btn-live-group .btnc-group{display:flex; height:70px; border:1px solid #414141; border-radius:5px; overflow: hidden;}

.m-btn-live-group .btn-toggle{display:block; width:80px; height:100%; background-color:rgba(40, 40, 40, .95); _border:1px solid #414141;  padding:5px 10px; padding-top:0; cursor:pointer;}
.m-btn-live-group .btn-toggle span{color:#fff;}
.m-btn-live-group .btn-toggle:before{content:""; display:block; width:100%; height:28px; margin-right:5px;}

.m-btn-live-group .btn-toggle.video:before{background:url(/img/service/ico/ico_video_on-2cc09c76f4dd20c5ea4f33d26cadec09.svg) no-repeat center / 45px auto;}
.m-btn-live-group .btn-toggle.video.active:before{background-image:url(/img/service/ico/ico_video_off-04f27b1577b9ae7d4537b9793e803466.svg)}

.m-btn-live-group .btn-toggle.mic:before{background:url(/img/service/ico/ico_mic_on-0560626caa1367073b331c8e4a4ce30e.svg) no-repeat center / 45px auto;}
.m-btn-live-group .btn-toggle.mic.active:before{background-image:url(/img/service/ico/ico_mic_off-af52acd52bbe514aeb6ff77d6ed5ab28.svg)}

.m-btn-live-group .btn-toggle.qna:before{background:url(/img/service/ico/ico_qna_off-27dab9cada6bb4667fa6e8263b8625de.svg) no-repeat center / 45px auto;}
.m-btn-live-group .btn-toggle.qna.active:before{background:url(/img/service/ico/ico_qna_on-5ef0e505a28211b197bdff54dd8f9f5b.svg) no-repeat center / 45px auto;}

.m-btn-live-group .btn-toggle.survey:before{background:url(/img/service/ico/ico_survey-77cd4fad1cf89f9a1b365b7f2ce98bf4.svg) no-repeat center / 45px auto;}

.m-btn-live-group .btn-toggle.share:before{background:url(/img/service/ico/ico_share_live-cff9e148a6dfd55a668986621caba165.svg) no-repeat center / 45px auto;}

.m-btn-live-group .btn-toggle.boardcast{background-color:#1DC32A; _border:1px solid #007B0A; border-radius:0 3px 3px 0;}
.m-btn-live-group .btn-toggle.boardcast:before{background:url(/img/service/ico/ico_boardcast_on-8a4e116b7de8ed1866511e54f4007629.svg) no-repeat center / 50px auto; position:relative; top:2px;}
.m-btn-live-group .btn-toggle.boardcast.active{background-color:#D00000; border:1px solid #91000F;}
.m-btn-live-group .btn-toggle.boardcast.active:before{background-image: url(/img/service/ico/ico_boardcast_off-b34e2b2465a3a45d0b3f2c01fdf5b34b.svg);}


/* 스위치 */
.switch-box{display:flex; align-items: center; justify-content: space-between; width:250px; margin:0 auto; margin-top:30px;}
.btn-switch{text-align:center;}
.btn-switch .switch { position: relative; display: inline-block; width: 55px; height: 25px; margin-bottom:0;}
.btn-switch .switch input { opacity: 0; width: 0; height: 0; }
.btn-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.btn-switch .slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; border:5px solid #fff; background-color: #8E8E8E; -webkit-transition: .4s; transition: .4s; }
.btn-switch input:checked + .slider { background-color: #F8444E; }
.btn-switch input:checked + .slider:before { background-color:transparent; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); }
.btn-switch .slider.round { border-radius: 34px; }
.btn-switch .slider.round:before { border-radius: 50%; }
.btn-switch .slider.round .switch-txt{font-size:12px; color:#fff; position:absolute; top:3px; -webkit-transition: .4s; transition: .4s;}
.btn-switch .slider.round .switch-txt.on{left:10px; opacity: 0;}
.btn-switch input:checked + .slider.round .switch-txt.on{opacity: 1;}
.btn-switch .slider.round .switch-txt.off{right:8px; opacity: 1;}
.btn-switch input:checked + .slider.round .switch-txt.off{opacity: 0;}
.btn-switch .txt{font-size:14px; _color:#fff;}

/* coming */
.live-container .coming{width:100%; height:100%; background-color:#000; position:absolute; left:0; top:0; z-index: 1;}
.live-container .coming .wrap{text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.live-container .coming .wrap .subscribe{display:block; width:120px; height:48px; line-height:48px; background-color:#3FA9F5; color:#fff; border-radius:5px; margin:0 auto; cursor:pointer;}
.live-container .coming .wrap .subscribe:before{content:""; display:inline-block; width:26px; height:19px; background:url(/liveHTML/img/ico/ico_boardcast.svg) no-repeat center / 100% auto; margin-right:4px; position:relative; top:3px;}
.live-container .coming .wrap .subscribe input{position:absolute; overflow: hidden; clip: rect(0px 0px 0px 0px); margin:-1px; width:1px; height:1px;}
.live-container .coming .wrap > p{margin-top:10px;}

/* Modal - 방송하기 */
#surveyLink .modal-content{padding:20px 30px;}
#surveyLink p{letter-spacing: -1px;}
#surveyLink .form-control{border:none; border-bottom:1px solid #3FA8F4; border-radius:0; padding:0; margin-top:30px; outline:0;}
#surveyLink .form-control::placeholder{font-size:17px;color:#e2e2e2;}
#surveyLink .form-control:-ms-input-placeholder{font-size:17px;color:#e2e2e2;}
#surveyLink .form-control:focus{box-shadow: none;}
#surveyLink .form-control.error{border-bottom-color:#FF9252;}

@media (min-width: 576px){
  #broadcastStart .modal-sm{max-width:455px;}
}

.message-wrap{margin-top:2px;}
.message-wrap .message{font-size:12px;}
.message-wrap .message.error{color:#FF9252;}

/* chat */
.con-chat.participant .live-chat,
.con-chat.message .live-chat {padding-top:64px;}
.con-chat .live-chat .live-chat-mask {height:calc(100vh - 257px);border:none;margin-top:0;}
.con-chat.message .live-chat .live-chat-mask {height:calc(100vh - 283px);border:none;margin-top:0;}
.con-chat .count {border-bottom:1px solid #ddd;padding-bottom:10px;}
.con-chat.message .con-wrap-view .profile-wrap {border-bottom:1px solid #ddd;padding-bottom:10px;}
.con-chat.message .con-wrap-view .profile-wrap .name {font-size:0.875rem;font-weight:bold;}
.con-chat.participant .count {border:none;padding-bottom:0;}
.con-chat .btn-participant span {font-size:0.875rem;}

/* session */
.view-content .session-list-wrap .session-items{border-left:0;border-right:0;}

/* attachment */
.view-content .con-attachment .con-wrap-view {padding:0 10px;}
.view-content .con-attachment .con-wrap-view .attachment-area.list {padding:0 10px;}
.view-content .con-attachment .con-wrap-view .attachment-area.expanded {padding:0;}

/* attachment - list */
.attachment-area.list {width:100%;margin-top:10px;}
.attachment-area.list ul {width:100%;}
.attachment-area.list .list-item:first-child {border-top:1px solid #E2E2E2;}
.attachment-area.list .list-item {display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E2E2E2;padding:0 8px;}
.attachment-area.list .list-item > button {padding:12px 0;margin-right:10px;}
.attachment-area.list .list-item .title {text-align:left;font-size:0.875rem;}
.attachment-area.list .list-item > button > .title > .ico {display:inline-block;text-align:center;padding:1px 0;border-radius:4px;color:#fff;font-size:12px;min-width:46px;font-weight:normal;}
.attachment-area.list .list-item.video > button > .title > .ico{background-color:#D92F2F;}
.attachment-area.list .list-item.image > button > .title > .ico{background-color:#848484;}
.attachment-area.list .list-item.doc > button > .title > .ico{background-color:#3FA8F4;}
.attachment-area.list .list-item .title .index{margin-left:8px;}
.attachment-area.list .list-item .title .index:after {content:'.';}
.attachment-area.list .list-item:hover {background-color:rgba(10, 90, 255, 0.1);}
/* .attachment-area.list .list-item:hover .title,
.attachment-area.list .list-item:active .title {text-decoration:underline;} */
.attachment-area.list .btn-group .download {width:19px;height:17px;background:url(/img/service/ico/ico_download_gy-385adda662e8c2e1b4aa804296102ed8.svg) no-repeat center / 100% auto;}
.attachment-area.list .btn-group .non-file {width:17px;height:17px;background:url(/img/service/ico/ico_zoom_gy-3042f0257f8a971176b8162a8582f061.svg) no-repeat center / 100% auto;margin-left:15px;}

/* attachment - expanded */
.attachment-area.expanded {position:relative;height:100vh;padding-top:64px;z-index:11;}
.attachment-area.expanded .file-area {height:calc(100vh - 64px - 200px);text-align:center;overflow-y:auto;}
.attachment-area.expanded .file-area.vertical-center {position:relative;top:50%;transform:translateY(-50%);}
.attachment-area.expanded .file-area img {max-width:100%;vertical-align:top;}
.attachment-area.expanded .file-area .file-video {width:100%;height:100%;}
.attachment-area.expanded .file-area iframe,
.attachment-area.expanded .file-area video {width:100%;height:100%;border:0;}
.attachment-area.expanded .file-area .file-document {height:100%;padding:10px;}
.attachment-area.expanded .file-area .file-document .wrap {position:relative;top:50%;transform:translateY(-50%);}
.attachment-area.expanded .file-area .file-document .notice {margin-top:20px;}
.attachment-area.expanded .file-info {width:100%; position:absolute;bottom:0;background-color:#F8F8F8;padding:30px 20px;height:200px;overflow-y:auto;border-top:1px solid #E2E2E2;}
.attachment-area.expanded .file-info .description {margin-top:10px;}

/* vod - jstree */
.jstree-area {padding:0 20px;margin-top:0;}

/* chart */
.con-chart {padding:0 10px 0 5px;}
.con-chart .sub-txt {padding:0 0 0 17px;}
.con-chart .count-box {padding:0 19px;}

/* auth - ui component */
.auth-title .logo > a {width:220px;height:28px;display:block;}
.auth-title .logo > a img {width:100%;vertical-align:top;}
.auth-title .logo .description {margin-top:8px;}

/* login sns */
.login-sns .wrap {margin-top:8px;}
.login-sns .wrap ul {display:flex;justify-content:center;align-items:center;}
.login-sns .wrap li:not(:first-child) {margin-left:10px;}

/* 비밀번호 찾기, 회원가입 text link */
.link-auth li:not(:first-child) {margin-top:9px;}
.link-auth li {display:flex;justify-content:space-between;align-items:center;}
.link-auth li button {text-decoration:underline;}
.link-auth li button:active {opacity:0.7;}

.btnc.full {min-width:100%;}

/* 로그인 상태 유지 checkbox */
.ui-check.continue .wrap {font-size:13px;}

/* auth-top */
.auth-top .wrap {display:flex;justify-content:space-between;align-items:baseline;}
.auth-top .notice {margin-top:3px;}
.auth-top .notice span {display:block;}
.auth-top .align-right .page {display:flex;}
.auth-top .align-right .page .total:before {content:'/';}
.auth-top .align-right .page > * {font-size:0.875rem;}

/* 이용약관 */
.terms .ui-check label {margin-bottom:0;}
.terms .ui-check label span {vertical-align:top;}
.terms .li {padding:12px 15px 12px 10px;background-color:#F7F7F7;display:flex;justify-content:space-between;align-items:center;}
.terms .total .notice {margin-top:10px;line-height:1.5;}
.terms .total .notice:before {content:'-';padding-right:2px;}
.terms-list {margin-top:20px;}
.terms-list .btn-txt {line-height:1;height:auto;}
.terms-list .btn-txt:active {opacity:0.7;}
.terms-list .ui-check label .ico:after {top:2px;}
.terms-list li:not(:first-child) {margin-top:10px;}

.terms.payment{margin-top:10px;}
.terms.payment .total .li{background-color:transparent; padding-left:0;}
.terms.payment .terms-list{margin-top:0;}

/* auth-box - 환영합니다! 변경완료! */
.auth-box .text {margin-top:10px;}
.auth-box .text span {display:block;}
.auth-box .text.last {margin-top:20px;}
.auth-box .btnc-group {margin-top:30px;}

.welcome-box .user-avatar {margin:20px auto 0;width:60px;height:60px;background-color:rgba(221, 221, 221, 0.3);border-radius:10px;background-position:center;background-repeat:no-repeat;background-size:cover;}
.welcome-box .user-email {margin-top:10px;}
.welcome-box .user-name {margin-top:2px;}
.welcome-box .user-belongs-to {margin-top:8px;}

/* 업로드 프로필 이미지 */
.auth-profile .thumb {border-radius:10px;}
.auth-profile .sub-text {margin-top:0;}
.auth-profile .control {justify-content:space-between;}

/* login */
.auth.login .main-auth {padding-bottom:50px;}
.auth.login .continue {margin-top:10px;}
.auth.login .login-sns {margin-top:30px;}
.auth.login .submit-wrap {margin-top:20px;}
.auth.login .btn-submit {margin-top:5px;}
.auth.login .link-auth {margin-top:30px;}

/* terms */
.auth.terms .main-auth {padding-bottom:50px;}
.auth.terms .terms {margin-top:40px;}
.auth.terms .btn-submit {margin-top:40px;}

.terms-page .mid .text {line-height:1.6;}

/* 재발송 */
.resend .complete{display:none;font-size:13px;background-color:#E2E2E2;border-radius:3px;padding:8px;position:absolute;top:-30px;right:50%;transform:translateX(50%);white-space: nowrap;z-index:1;text-decoration:none!important;}

/* 메인 타이틀 */
.title-wrap{text-align:center;}
/* .title-wrap .title:before{content:""; display:block; width:50px; height:3px; background-color:#2C2C2C; margin:0 auto 10px;} */
.title-wrap .s-txt{margin-top:5px;}
.title-wrap .btn-txt span{font-size:13px;}
.title-wrap .btnc-group,
.title-wrap .filter-box{margin-top:8px;}
.title-wrap .filter-box{display:flex; align-items: center; justify-content: flex-end;}
.title-wrap .filter-box .form-control{width:100px;}
.title-wrap .filter-box .form-control:last-child{margin-left:10px;}

/* items list (공통) */
.items-lst {display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 -15px;}
.items-lst li {width:100%;flex-basis:277px;margin:0 15px;}
.items-lst li:nth-child(n+5) {margin-top:60px;}

.items-lst li .thumb {display:inline-block;width:100%;border-radius:10px;background-color:#F8F8F8;background-repeat:no-repeat;background-size:cover;background-position:center;transition:transform 0.2s;position:relative;overflow: hidden;}
.items-lst li .thumb:before{content:""; display:block; padding-bottom:75%;}
.items-lst li .thumb:after {content:""; position:absolute; left:0; top:0; right:0; bottom:0; background: inherit; background-size: cover; transform-origin: center;transition:transform 0.2s;}
.items-lst li .thumb:hover:after {transform: scale(1.15);}

.items-lst li .class-name {display:block;margin-top:10px;}
.items-lst li .class-name:hover{color:#2C2C2C;}
.items-lst li .title {height:44px;margin-top:5px;text-align:left;}
.items-lst li .title:hover{text-decoration: none; color:#2C2C2C;}
.items-lst li .date-column {margin-top:10px;}
.items-lst li .price {margin-top:5px;}
.items-lst li .price:after {content:'원';}
.items-lst li .price.free:after {content:'';}
.items-lst li .btnc-group-hashtag {border-top:1px solid #E2E2E2;margin-top:10px;}

.items-square li .thumb {height:auto;}
.items-square li .date-column {display:flex;justify-content:space-between;align-items:center;}
.items-square li .date-column .date {font-weight:bold;}
.items-square li .date-column .days {background-color:#3FA8F4;border-radius:3px;padding:2px 6px;}
.items-square li .date-column .days span {color:#fff;font-weight:bold;display:flex;}
.items-square li .date-column .days span:after {content:'일간';}

.items-rectangle li .thumb {height:155px;}
.items-rectangle li .date-column {display:flex;justify-content:space-between;align-items:center;}
.items-rectangle li .date-column .date {font-weight:bold;}
.items-rectangle li .date-column .days {background-color:#3FA8F4;border-radius:3px;padding:2px 6px;}
.items-rectangle li .date-column .days span {color:#fff;font-weight:bold;display:flex;}
.items-rectangle li .date-column .days span:after {content:'일간';}

.items-lst.event li{margin-top:0 !important;}
.items-lst.event li .thumb{height:228px;}
.items-lst.event li .date-column{justify-content: flex-start; margin-top:5px;}
.items-lst.event li .date-column .date{font-size:13px;}
.items-lst.event li .d-day{color:#FF9525; margin-left:6px;}


.items-lst.live .thumb{position:relative;}
.items-lst.live .thumb .live-mark{display:block;width:52px;height:26px;line-height: 26px;text-align: center;background-color: #E60000;color:#fff;border-radius:3px;position:absolute;right:10px;bottom:10px;z-index: 1;}

.items-square.class li{flex-basis:216px;max-width:216px;text-align: center;}
.items-square.class li:nth-child(n+5) {margin-top:0;}
.items-square.class li:nth-child(n+6) {margin-top:60px;}
.items-square.class li .thumb{height:auto;}
.items-square.class li .thumb:before{content:""; display:block; padding-bottom:100%;}
.items-square.class li .class-name{margin-top:5px;}
.items-square.class li .class-name:hover{text-decoration: none;}
.items-square.class li .class-name span{height:51px; text-decoration: none; white-space: normal; display:-webkit-box; overflow:hidden; text-overflow:ellipsis;
  word-wrap:break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.items-square.class .populate-column,.items-square.class .populate-column .views{display:block;}
.items-square.class .populate-column .views .txt{font-size:14px;}
.items-square.class .btn-favorit{margin-top:10px;}

/* 시청중인 강의 */
.items-lst.horizontal{padding:10px 0; margin:-10px -15px;}
.items-lst.horizontal .slick-list{padding-top:10px !important; padding-bottom:10px !important;}
.items-lst.horizontal li{display:flex; flex-basis:585px; border-radius:5px; margin-top:0 !important; overflow:hidden;
  box-shadow: 0 0 10px rgba(0,0,0,.1)!important;
}
.items-lst.horizontal li .thumb{flex-basis:242px; height:140px; border-radius:0;}
.items-lst.horizontal li .info{display:flex; flex:1 0; flex-direction: column; justify-content: space-between; padding:10px; padding-right:20px;}
.items-lst.horizontal li .time-area{display:flex; align-items: center;}
.items-lst.horizontal li .time-area .time{flex:1 0; margin-right:20px;}
.items-lst.horizontal li .time-area .btn-announced{flex-basis:100px; text-align:center; color:#fff;}
.items-lst.horizontal li .time-area .btn-announced:hover{text-decoration: none;}


.items-lst.horizontal li .progress-area{display:flex;}
.items-lst.horizontal li .progress-area .progress-rate{flex:1 0; margin-right:20px; border-bottom:3px solid #E2E2E2; position:relative;}
.items-lst.horizontal li .progress-area .progress-bar{height:3px; background-color:#3FA8F4; position:absolute; left:0; bottom:-3px;}
.items-lst.horizontal li .progress-area .btn-follow-up{flex-basis:100px; text-align:center; color:#fff;}
.items-lst.horizontal li .progress-area .btn-follow-up:hover{text-decoration: none;}
.items-lst.horizontal .slick-list{padding:10px 0;}
.items-lst.horizontal .slick-prev, .items-lst.horizontal .slick-next{top:50%;}

/* slick - custom */
.slick-list, .slick-track{min-width:100%;}
.items-lst.slick-4, .items-lst.slick-5{position:relative;}
/* .items-lst.slick-4 li, .items-lst.slick-5 li{margin-top:0 !important;} */
/* .items-lst.slick-4 li .thumb, .items-lst.slick-5 li .thumb{pointer-events: none;} */

.slick-prev{background:url(/img/service/ico/ico_slick_left-ec8081911d994cf3a51f2a92ef624dda.svg) no-repeat center / 11.36px 20.73px; left:0;}
.slick-next{background:url(/img/service/ico/ico_slick_right-ed4f3db11a81d87e50b729ce8a15e9c5.svg) no-repeat center / 11.36px 20.73px; right:0;}
.slick-prev, .slick-next{width:28px; height:60px; font-size:0; background-color:#fff; box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; border-radius:4px; outline: none; position:absolute; top:40%; transform:translateY(-50%); z-index: 1; cursor:pointer;}

.slick-dots{display:flex; align-items: center; justify-content: center; width:100%; margin-top:20px;}
.slick-dots li{display:inline-block; flex-basis:10px; height:10px; margin:0 3px; padding:0;}
.slick-dots li button{display:block; width:10px; height:10px; line-height: 0; font-size:0; background-color:#C6C6C6; color:transparent; border:none; border-radius:100%; outline: none; cursor:pointer;}
.slick-dots li.slick-active button{background-color:#3FA8F4;}

/* stars */
.items-lst li .populate-column {display:flex;justify-content:flex-start;align-items:center;margin-top:5px;}
.items-lst li .rating, .items-lst li .likes, .items-lst li .views {display:flex;justify-content:flex-start;align-items:center;}
.items-lst li .rating .stars-area {display:inline-block;width:72px;height:11px;background:url(/img/service/ico/ico_stars_2-49eed290699c9cfc14e542fb90c22b90.png) no-repeat 0 0;margin-right:4px;}
.items-lst li .rating .stars-on {display:block;width:72px;height:11px;background:url(/img/service/ico/ico_stars_2-49eed290699c9cfc14e542fb90c22b90.png) no-repeat 0 0;background-position:0 -11px;overflow:hidden;}
.items-lst li .likes {margin-left:10px;}
.items-lst li .likes .heart {width:10px;height:9px;background:url(/img/service/ico/ico_heart-fbe0aa45d983662f45ff5addea4d0a0c.png) no-repeat 0 0;margin-right:4px;}
.items-lst li .views .viewer{width:12px;height:10.4px;background:url(/img/service/ico/ico_viewer-df29eb15d6937b3280e84aa38fa011e0.svg) no-repeat 0 0;margin-right:4px;}
.items-lst.vod li .views .viewer{width:10px;height:12px;background:url(/img/common/ico/ico_play-d7eb582ff1d1770bea37e8215cd96690.svg) no-repeat 0 0;margin-right:4px;}

/* 나의 질문 */
.toggle-lst.my-qna .toggle-head .title {width:514px;}
.toggle-lst.my-qna .toggle-head .link {width:100px;text-decoration:underline;margin-left:20px;}
.toggle-lst.my-qna .toggle-body .answer .info {margin-right:67px;}
.toggle-lst.my-qna .toggle-body .answer .profile-wrap {min-width:155px;}
.toggle-lst.my-qna .toggle-body .answer .profile-wrap .name {width:120px;}
.toggle-lst.my-qna .toggle-body .answer .date {max-width:86px;}

/* 랜딩 > 세션 > 펼쳐보기 */
.wrapper.webinar #secondArticle .landing-title {justify-content:space-between;align-items:flex-start;}
.wrapper.webinar #secondArticle .landing-title .sub-txt span {display:block;}
.wrapper.webinar .btn-spread-all {display:flex;align-items:center;justify-content:center;}
.wrapper.webinar .btn-spread-all::before {content:'';display:block;background:url(/img/service/ico/ico_spread-bed232a3bb6887bbebaf1b25fa578acc.svg) no-repeat center / 100% auto;width:17px;height:12px;margin-right:4px;}

/* 펼쳐보기 > 세션 table */
.pop-spread-session {position:relative;padding:30px 30px;}
.pop-spread-session .session li .info {margin:40px 0 10px;}
.pop-spread-session .info {display:flex;}
.pop-spread-session .info .day {position:relative;padding-left:18px;}
.pop-spread-session .info .day::before {content:'◆';margin-right:4px;line-height:1.4;position:absolute;top:0;left:0;}
.pop-spread-session .info .date {margin-left:14px;}
/* .pop-spread-session .type {overflow-x:auto;} */

.pop-spread-session .table {width:auto;margin-bottom:0;}
.pop-spread-session .table th,
.pop-spread-session .table td {padding:0;border-top:none;border-bottom:1px solid #E2E2E2;}
.pop-spread-session .table thead th {background-color:#3FA8F4;border:0;padding:0;text-align:center;}
.pop-spread-session .table thead th > * {color:#fff;}
.pop-spread-session .table thead th > * {height:40px;line-height:40px;}

/* 멀티트랙 */
.pop-spread-session .multiple thead th:first-child {width:80px;}
.pop-spread-session .multiple tbody th .box {width:80px;min-height:260px;display:flex;align-items:center;justify-content:center;}
.pop-spread-session .multiple tbody tr.odd th .box {min-height:90px;}
.pop-spread-session .multiple tbody td {border-left:1px solid #E2E2E2;}
.pop-spread-session .multiple tbody td .box {width:160px;padding:13px 10px 10px;}
.pop-spread-session .multiple tbody tr.default > td:nth-child(2n) {background-color:#FCFCFD;}
.pop-spread-session .multiple tbody tr.odd > td:nth-child(odd) {background-color:#FCFCFD;}
.pop-spread-session .multiple tbody .poster th .box {min-height:70px;}

.pop-spread-session .multiple .session {border-top:1px solid #E2E2E2;padding:13px 0 18px;}
.pop-spread-session .multiple .session:first-child {border:none;padding-top:0;}
.pop-spread-session .multiple .session .title {position:relative;padding-left:18px;}
.pop-spread-session .multiple .session .title::before {content:'';display:inline-block;position:absolute;top:3px;left:0;width:13px;height:12px;background:url(/img/common/ico/ico_track_bk-6c1fb645b51c61105aa505f1c7691fc1.svg) no-repeat center / 100% auto;}
.pop-spread-session .multiple .session .time {position:relative;padding-left:18px;}
.pop-spread-session .multiple .session .time::before {content:'';display:inline-block;position:absolute;top:4px;left:0;width:12px;height:12px;background:url(/img/common/ico/ico_clock_gray-4f27016dff10ff89cc343e0e4a5102ca.svg) no-repeat center / 100% auto;}

.pop-spread-session .multiple .break-time {letter-spacing:25px;min-height:85px;display:flex;align-items:center;justify-content:center;}

/* 단일트랙 */
.pop-spread-session .single .table {width:744px;}
.pop-spread-session .single .table:not(:first-child) {margin-top:20px;}
.pop-spread-session .single .normal th {background:transparent;border-bottom:1px solid #E2E2E2;}
.pop-spread-session .single .normal th > * {color:#2C2C2C;}
.pop-spread-session .single .normal th:not(:first-child) {border-left:1px solid #E2E2E2;}
.pop-spread-session .single .normal th:first-child {width:182px;}

.pop-spread-session .single td:not(:first-child) {border-left:1px solid #E2E2E2;}
.pop-spread-session .single td:first-child {width:182px;}
.pop-spread-session .single tbody .box {text-align:center;min-height:58px;display:flex;justify-content:center;align-items:center;padding:10px;}
.pop-spread-session .single tbody .box a {display:block;}
.pop-spread-session .single tbody tr:nth-child(odd) {background-color:#FCFCFD;}

/* 랜딩 > 후기작성, 질문하기 - ico 추가 */
.wrapper.service .landing-title .btn-review {display:flex;align-items:center;justify-content:center;}
.wrapper.service .landing-title .btn-review::before {content:'';display:block;background:url(/img/service/ico/ico_review_pen-1b710c2b4a518d01c8d315d14bf13909.svg) no-repeat center / 100% auto;width:14px;height:14px;margin-right:4px;}
.wrapper.service .landing-title .btn-ask {display:flex;align-items:center;justify-content:center;}
.wrapper.service .landing-title .btn-ask::before {content:'';display:block;background:url(/img/service/ico/ico_ask_question-fa282da4a0df12df1e47dde6497ea383.svg) no-repeat center / 100% auto;width:10px;height:14px;margin-right:4px;}

/* 마이페이지 > 크롭 - 프로필 */
.upload-profile.avatar {margin-top:10px;}
.upload-profile.avatar .avatar-label {position:relative;width:80px;height:100%;min-height:80px;cursor:pointer;border-radius:4px;overflow:hidden;}
.upload-profile.avatar .avatar-label img {width:100%;}
.upload-profile.avatar .file-preview-background {position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(256,256,256,0);font-size:14px;text-align:center;color:#fff;border:2px dashed #c6c6c6;border-radius:3px;z-index:-1;}
.upload-profile.avatar .file-preview-background .ico {background:url(/img/common/ico/ico_upload_gr-cd9e2d7280750da4f0d9936ea432659c.svg) no-repeat center / 100% auto;width:15px;height:13px;display:block;margin:34px auto 0;}
.upload-profile.avatar .column-right {margin-left:10px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
.upload-profile.avatar .reset-avatar {padding:0 6px;margin-top:34px;}

/* 모달 - 크롭 - 프로필 */
#avatarModal .modal-body img {max-width:100%;max-height:400px;text-align:center;}

/* 회원가입 > 크롭 - 프로필 */
.wrapper.signup .upload-profile.avatar .avatar-label img {opacity:0;}
.wrapper.signup .upload-profile.avatar .file-preview-background {z-index:0;}

/* 스튜디오 > 웨비나, 라이브 - 발표자 이미지 */
.upload-profile.presenter {margin-top:10px;}
.upload-profile.presenter .avatar-label {position:relative;width:80px;height:100%;min-height:80px;cursor:pointer;border-radius:4px;overflow:hidden;}
.upload-profile.presenter .avatar-label img {width:100%;opacity:0;}
.upload-profile.presenter .file-preview-background {position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(256,256,256,0);font-size:14px;text-align:center;color:#fff;border:2px dashed #c6c6c6;border-radius:3px;z-index:1;}
.upload-profile.presenter .file-preview-background .ico {background:url(/img/common/ico/ico_upload_gr-cd9e2d7280750da4f0d9936ea432659c.svg) no-repeat center / 100% auto;width:15px;height:13px;display:block;margin:34px auto 0;}
.upload-profile.presenter .column-right {margin-left:10px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
.upload-profile.presenter .reset-avatar {padding:0 6px;margin-top:34px;}

/* 결제 상세 */
.payment-details {border:1px solid #3FA8F4;background-color:#F8F8F8;padding:20px;min-height:634px; margin-top:10px;}
.payment-details dl {display:flex;justify-content:space-between;align-items:center;margin:0;}
.payment-details dd {margin:0;}
.payment-details dd::after {content:'원';margin-left:3px;font-size:13px;}
.payment-details dl.sale dd::before {content:'(-)';margin-right:4px;}
.payment-details .detail {padding:14px 0 14px 10px;border-bottom:1px solid #2C2C2C;}
.payment-details .detail dt {font-weight:normal;}
.payment-details .payment-method {margin-top:10px;}
.payment-details .details-final .price {margin-top:14px;display:block;}
.payment-details .details-final .price .num {text-align:right;margin-top:10px;}
.payment-details .btn-pay {margin-top:30px;border-radius:0;}

/* 결제요청 처리 완료 */
.payment-complete {width:300px;margin:0 auto;position:relative;z-index:1;}
.payment-complete .logo {display:block;text-align:center;}
.payment-complete .complete-body {padding-top:30px;background-color:#fff;margin-top:20px;}
.payment-complete .complete-body > img {display:block;margin:0 auto;}
.payment-complete .complete-body .part {margin-top:20px;}
.payment-complete .info-wrap {padding:25px;border-top:2px dashed #E2E2E2;margin-top:30px;}
.payment-complete .info-wrap dl {display:flex;justify-content:space-between;align-items:center;}
.payment-complete .info-wrap dl .won {font-size:14px;}
.payment-complete .info-top > .title {align-items:flex-start; word-break: keep-all;}
.payment-complete .info-wrap dt {min-width:60px;}
.payment-complete .info-wrap dd {text-align:right;margin-left:20px;margin-bottom:0;}
.payment-complete .info-bottom {border-top:1px solid #E2E2E2;padding-top:20px;}
.payment-complete .complete-bottom .notice {padding:20px 0;font-size:0.75rem;border-bottom:1px solid #E2E2E2;}
.payment-complete .complete-bottom .notice span {display:block;}
.payment-complete .complete-bottom .wrap {padding-top:20px;}

body.complete {background-color:#F8F8F8;}
body.complete::before {content:'';display:block;width:100%;height:320px;background-color:#3FA8F4;position:absolute;top:0;left:0;}
body.complete .wrapper.service .content .main-service {padding-top:160px;}

/* 버튼 - 위로가기 */
.btn-scroll-to-top {position:fixed;bottom:80px;right:30px;display:block;background:url(/img/common/ico/ico_to_top-21d46ff2b141c61745163f9bd00b8ccc.svg) no-repeat center / 100% auto;width:63px;height:63px;border-radius:5px;transform:translateY(160px);opacity:1;transition:transform 0.5s, opacity 0.3s; z-index: 1;}
.btn-scroll-to-top.show {transform:translateY(0);opacity:1;}

/* 로그인 */
.form-box-2.partial {margin-top:20px;}

/* 사전등록 */
.pop-writer.pop-login-purchase .mid {padding:40px 70px 20px;}
.pop-writer.pop-login-purchase .mid .column.partial {border-top:1px solid rgba(198, 198, 198, 0.7);margin-top:34px;padding:30px 0 0;position:relative;}
.pop-writer.pop-login-purchase .mid .column.partial::before {content:'OR';position:absolute;top:-10px;left:50%;background-color:#fff;padding:0 6px;color:#c6c6c6;transform:translateX(-50%);font-size:12px;letter-spacing:0.1em;}
.pop-writer.pop-login-purchase .mid .btn-simple-purchase {margin-top:14px;}
.pop-writer.pop-login-purchase .mid .login-sns {margin-top:10px;}
.pop-writer.pop-login-purchase .mid .form-box-2 {margin-top:30px;}

/* 뷰어(웨비나) > 종료까지 남은시간 */
.time-remaining {display:flex;flex-direction:column;align-items:flex-end;margin-top:4px;position:absolute;top:80px;right:110px;background:#fff;padding:10px 10px 6px;border-radius:5px;z-index:1;}
.time-remaining > p {line-height:1;}

/* 뷰어 > part width */
.view-content > .part {right:-520px;}
.view-content > .part.part-files,
.view-content > .part.part-file {right:-840px;}
.view-content > .part.active {right:90px;}
.view-content > .part.part-files.active {right:90px;}
.view-content > .part-file.file-content.active {right:90px;}

/* 뷰어(모바일) */
.btn-toggle-nav {display:none;background:#fff;width:52px;height:52px;border:1px solid #E2E2E2;border-radius:6px;position:fixed;bottom:74px;right:24px;z-index:1003;}
.btn-toggle-nav .hamburger .line {width:20px;height:3px;background-color:#3FA8F4;margin:4px auto;display:block;transition:all 0.3s ease-in-out;}
.btn-toggle-nav.active .hamburger .line:nth-child(2) {opacity:0;}
.btn-toggle-nav.active .hamburger .line:nth-child(1){
  -webkit-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -o-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}
.btn-toggle-nav.active .hamburger .line:nth-child(3){
  -webkit-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -o-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}
.view-nav li .nav-btn .ico-res,
.view-nav .write-review button .ico-res {display:none;}

.btn-toggle-owner{display:none;width:52px;height:52px;border:1px solid #494949;border-radius:6px;position:fixed;bottom:74px;left:24px;z-index:1003; background-color:#313131;}
.btn-toggle-owner:before{content:""; display:block; width:27px; height:27px; background: url(/img/service/ico/ico_video_toggle-3c6c6dca3a9a673c248c030fa9103db0.svg) no-repeat center / 27px auto; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); transition:background 0.3s ease-in-out;}
.btn-toggle-owner.show:before{background: url(/img/service/ico/ico_video_toggle_close-e946ad837260c2ba3788ed2d2438bfe6.svg) no-repeat center / 15px auto;}

.view-frame .title-mobile {display:none;}
.video-area .video-wrapper {width:100%;height:100%;}

.btn-close-video {opacity:0;visibility:hidden;position:absolute;top:10px;right:10px;width:36px;height:36px;background:url(/img/service/ico/ico_close_video-e7027974d1e5fad136a971d97c4e3c6e.svg) no-repeat center / 100% auto;}

/* Desktop */
@media all and (max-width:1600px) {
  /* 뷰어 */
  body.offcanvas-wide {margin-right:720px;}
  .view-content > .part-file {width:720px}
  .view-content > .part-file .top {width:720px;}
  .view-content > .part .top > .wrap, .view-content > .part-file .top > .wrap {right:10px;}
  .view-frame header .align-left .btn-leave {min-width:40px;width:40px;}
  .view-frame header .align-left .btn-leave span {display:none;}
}

/* Laptop L */
@media all and (max-width:1300px) {
  /* 메인 */
  .title-wrap .btnc-group,
  .blurb{padding:0 14px;}

  /* items-lst */
  .items-lst{_padding:0 10px; margin:0;}
  .items-lst.horizontal{margin:0;}
  .items-lst li{flex-basis:calc(25% - 30px);}
  .items-square.class li{flex-basis:calc(20% - 30px); max-width: calc(20% - 30px);}
  .items-square.class li .class-name span{height:42px;font-size:15px; white-space: normal;}
  .items-lst.items-rectangle li .thumb:before{content:""; display:block; padding-bottom:60%;}

  .title-wrap .filter-box{padding:0 14px;}

  /* 뷰어 */
  body.offcanvas {margin-right:420px;}
  body.offcanvas-wide {margin-right:620px;}
  .view-content > .part {width:420px;}
  .view-content > .part > .top {width:420px;}
  .view-content > .part-file {width:620px;}
  .view-content > .part-file .top {width:620px;}
  .view-content > .part.part-file {right:-620px;}
  .view-content > .part-next .title.depth {width:420px;}
  .live-chat-item .conversation-text {max-width:300px;}
}

/* 1200px 추가 */
@media all and (max-width:1200px) {
  /* items-lst */
  .items-lst.horizontal li .progress-area{flex-direction: column;}
  .items-lst.horizontal li .progress-area .progress-rate{margin-right:0;}
  .items-lst.horizontal li .progress-area .btn-follow-up{flex-basis:36px; margin-top:10px;}

  /* 뷰어 */
  body.offcanvas {margin-right:360px;}
  body.offcanvas-wide {margin-right:520px;}
  .con-wrap-view {padding:0 14px;}
  .view-content > .part {width:360px;}
  .view-content > .part > .top {width:360px;padding-left:14px;padding-right:14px;}
  .view-content > .part-file {width:520px;}
  .view-content > .part-file .top {width:520px;}
  .view-content > .part.part-file {right:-520px;}
  .view-content > .part-next .title {padding-left:14px;padding-right:14px;}
  .view-content > .part-next .title.depth {width:360px;padding-left:14px;padding-right:14px;}
  .view-content .con-attachment .con-wrap-view .attachment-area.list {padding:0 4px;}
  .live-chat-item .conversation-text {max-width:260px;}
}

/* Laptop S */
@media all and (max-width:1024px) {
  /* items-lst */
  .items-lst.horizontal li{flex-direction: column;}
  .items-lst.horizontal li .info{padding:10px 25px;}
  .items-lst li{flex-basis:calc(33.3333% - 30px);}
  .items-square.class li{flex-basis:calc(25% - 30px); max-width: calc(25% - 30px);}
  .items-lst li:nth-child(n+4){margin-top:60px;}
  .items-square.class li:nth-child(n+4){margin-top:0;}
  .items-square.class li:nth-child(n+5){margin-top:60px;}

  /* 뷰어 */
  body.offcanvas {margin-right:340px;}
  body.offcanvas-wide {margin-right:490px;}
  .view-content > .part {width:340px;}
  .view-content > .part > .top {width:340px;}
  .view-content > .part-file {width:490px;}
  .view-content > .part-file .top {width:490px;}
  .view-content > .part.part-file {right:-490px;}
  .live-chat-item .conversation-text {max-width:240px;}

  /* 메인, 리스트 타이틀 */
  .wrapper.index .title-wrap, .blurb, .wrapper.index .sec.bg-gray,
  .wrapper.list .title-wrap, .blurb, .wrapper.list .sec.bg-gray{margin-top:100px;}
  .wrapper.index .sec.bg-gray.top{margin-top:0;}
}

/* Tablet & Mobile */
@media all and (max-width:1023px) {
  /* 뷰어 */
  body.offcanvas {margin-right:0;}
  .view-frame header {width:100%;}
  .view-frame .video-area {width:100%;position:relative;}
  .view-frame .live-container .status-txt{font-size:13px;}
  .view-frame .live-container .status-txt:before{top:0;}
  .time-remaining {right:20px;}

  .btn-toggle-nav {display:block;}
  .view-nav {position:fixed;top:initial;bottom:172px;right:24px;width:130px;height:auto;border-radius:6px;border:1px solid #E2E2E2;box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;padding:0;opacity:0;visibility:hidden;overflow:hidden;}
  .view-nav.show {visibility:visible;opacity:1;bottom:135px;transition:opacity 0.2s ease-in-out, visibility 0.3s ease-in-out, bottom 0.3s ease-in-out;}
  .view-nav li .nav-btn,
  .view-nav .write-review button {height:auto;border:none;display:flex;align-items:center;padding:12px 10px 12px 20px;}
  .view-nav .write-review button {padding:12px 20px 12px;}
  .view-nav li .nav-btn.active, .view-nav li .nav-btn:active {border:none;}
  .view-nav li .nav-btn .ico,
  .view-nav .write-review button .ico {display:none;}
  .view-nav li .nav-btn .ico-res,
  .view-nav .write-review button .ico-res {display:block;position:relative;width:20px;line-height:1;}
  .view-nav li .nav-btn .title {font-size:13px;color:#2C2C2C;font-weight:bold;margin-left:10px;display:flex;align-items:center;margin-top:0;}
  .view-nav .write-review button .title {font-weight:bold;margin-left:10px;margin-top:0;}
  .view-nav li .nav-btn .title .count.only-mobile {display:block;font-size:12px;position:relative;top:initial;left:initial;margin-left:10px;padding:0 4px;min-width:18px;height:18px;}

  .btn-toggle-owner{display:block;}
  .btn-live-group{display:none;}
  .m-btn-live-group{display:block; width:100%; height:100%; position:fixed; left:0; bottom:0; transform:translate(0, 0); z-index: 10;}
  .m-btn-live-group .recording{width:auto; font-size:13px; margin-bottom:0; position:absolute; right:24px; top:85px;}
  .m-btn-live-group .recording:before{position:relative; top:1px;}
  .m-btn-live-group .btnc-group{flex-direction: column; width:130px; height:auto; background:#313131; border:1px solid #494949; border-radius:6px; position:fixed; left:24px; bottom:172px; opacity:0; visibility: hidden; overflow: hidden;}
  .m-btn-live-group .btn-toggle{display:flex; align-items: center; width:100%; background-color:transparent; padding:10px;}
  .m-btn-live-group .btn-toggle:before{display:inline-block; width:30px; background-size:contain; margin-right:10px;}
  .m-btn-live-group .btnc-group.show{visibility: visible; opacity: 1; bottom:135px; transition:opacity 0.2s ease-in-out, visibility 0.3s ease-in-out, bottom 0.3s ease-in-out;}

  .view-frame header .align-right .btn-group > .btn-share .complete {right:95%;}

  .view-content > .part {width:100%;right:-100%;top:0;z-index:1003;}
  .view-content > .part.active {right:0;}
  .view-content > .part > .top {width:100%;}
  .view-content > .part.part-files, .view-content > .part.part-file {right:-100%;}
  .view-content > .part.part-files.active {right:0;}
  .view-content > .part-file.file-content {width:100%;z-index:1004;}
  .view-content > .part-file.file-content.active {right:0;}
  .view-content > .part-file .top {width:100%;}

  .view-content > .part-next .top {padding-left:0;}

  #dragonArea {width:100%;height:100vh;overflow:hidden;}
  #dragonVideoWrapper {width:40%;padding-top:22.5%;position:absolute;right:14px;bottom:14px;}
  #dragonVideo {z-index:1049;width:100%;height:100%;top:initial;left:initial;right:0;bottom:0;background-color:#000;box-shadow:0 3px 6px rgba(0,0,0,0.16);}
  #dragonVideo #layer {position:absolute;opacity:0;width:100%;height:70%;top:0;left:0;right:0;z-index:2;}

  .video-area .video-wrapper {width:100%;height:100%;}

  .view-frame #dragonVideo .ready-box img {width:100%;}
  .view-frame #dragonVideo .ready-box .ready-txt {font-size:10px;}

  .view-frame #dragonVideo .btn-close-video {opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;z-index:99999;}

  .view-frame #dragonVideo .btn-close-video.active,
  .view-frame #dragonVideo:hover .btn-close-video {opacity:1;visibility:visible;transition:all 0.3s;}

  /* 미리보기 */
  .preview .landing-wrap .landing-container{width:calc(100% - 460px);}
  .preview .landing-wrap .landing-container .visual{width:100%; margin-bottom:25px; position:static;}
  .preview .landing-wrap .aside-landing{display:block;}
}

/* Tablet */
@media all and (max-width:768px) {
  /* items-lst */
  .items-square.class li{flex-basis:calc(33.3333% - 30px); max-width: calc(33.3333% - 30px);}
  .items-square.class li:nth-child(n+4){margin-top:60px;}

  /* 뷰어 */
  body.view {background:transparent;}
  .view-frame header {padding:0 14px;}
  .view-frame .video-area {height:calc(100vh - 50vh);background-color:#000;}
  .time-remaining {position:relative;top:initial;right:initial;border-radius:0;background:#2C2C2C;padding:14px 14px;margin:0;flex-direction:row;justify-content:space-between;align-items:center;}
  .time-remaining > * {color:#fff;}
  .time-remaining .time-box > * {color:#fff;}
  .view-frame header .align-left .title ul {display:none;}
  .view-frame .title-mobile {display:block;padding:14px;}
  .view-frame .title-mobile li {line-height:1.7;position:relative;}
  .view-frame .title-mobile li:not(:first-child) {padding-left:10px;}
  .view-frame .title-mobile li:not(:first-child)::before {content:'';display:inline-block;width:6px;height:12px;background:url(/img/service/ico/ico_arrow_right_gy2-010b716f2073ee7be25ee304ab64878b.svg) no-repeat center / 100% auto;position:absolute;left:0px;top:5px;}
  .view-frame #dragonVideo .ready-box img {max-width:500px;}
  .view-frame #dragonVideo .ready-box .ready-txt {font-size:15px;}
  #dragonVideo #layer {height:55%;}

  .view-frame #dragonVideo .ready-box .ready-txt {font-size:10px;}

  .btn-toggle-nav,
  .btn-toggle-owner{bottom:24px;}
  .view-nav,
  .m-btn-live-group .btnc-group{bottom:122px;}
  .view-nav.show,
  .m-btn-live-group .btnc-group.show{bottom:85px;}
}

/* 767px 추가 */
@media all and (max-width:767px){
  /* items-lst */
  .items-lst li{flex-basis:calc(50% - 30px);}
  .items-lst li:nth-child(n+3){margin-top:60px;}
  .items-square.class li:nth-child(n+3){margin-top:0;}
  .items-square.class li:nth-child(n+4){margin-top:60px;}

  /* 랜딩페이지 */
  .landing-review .review-top .num,
  .landing-review .review-top .num:after,
  .landing-review .review-top .total,
  .landing-review .review-top .total:after{font-size:15px;}
  .landing-review .review-list .text,
  .landing-qna .qna-list .text{font-size:13px;}

  /* 랜딩 > 커리큘럼 */
  .landing-curriculum .wrap .top .title{font-size:15px;}
  .landing-curriculum .view{flex-direction: column;}
  .landing-curriculum .view-thumb{width:100%; flex-basis:0; padding-bottom:56.25%;}
  .landing-curriculum .view-list{margin-top:15px;}
  .landing-curriculum .view-list li .title{font-size:13px;}

  /* 미리보기 */
  .preview .landing-wrap .nav-landing ul{overflow: visible;}
  .preview .landing-wrap .nav-landing a{white-space: normal;}
  .preview .landing-curriculum .view{flex-direction: row;}
  .preview .landing-curriculum .view-thumb{width:267px; height:150px; flex-basis:267px; padding-bottom:0;}
  .preview .landing-curriculum .view-list{margin-top:0;}
}

/* 500px 추가 */
@media all and (max-width:500px) {
  /* items-lst */
  .items-lst li{flex-basis:calc(100% - 30px);}
  .items-square.class li{flex-basis:calc(100% - 30px); max-width: calc(100% - 30px);}
  .items-lst li:nth-child(n+2),
  .items-square.class li:nth-child(n+2){margin-top:60px;}
  .items-lst li .class-name .txt,
  .items-square li .date-column .days span{font-size:11px;}
  .items-lst li .title{font-size:13px; height:38px;}
  .items-square li .date-column .date{font-size:12px;}
  .items-lst li .price{font-size:15px;}

  /* 뷰어 */
  .view-frame .video-area {height:calc(100vh - 70vh);}
  #dragonVideoWrapper {width:50%;padding-top:28.125%;}

  /* 뷰어 > 세션 */
  .session-list-wrap.viewpage .announce-items {padding:14px 24px;}
  .view-content .session-list-wrap .session-items .session-tit,
  .session-list-wrap.viewpage .announce-items .txt,
  .session-list-wrap .session-items .right .time {font-size:13px;}
  .live-chat-item .conversation-text .ctext-wrap p,
  .live-chat-item .conversation-text .ctext-wrap.download .title {font-size:13px;}

  /* 뷰어 > 첨부자료 */
  .attachment-area .grid-item p {font-size:12px;}
  .attachment-area .grid-item .thum .download-box .type {font-size:13px;width:58px;height:26px;line-height:26px;}
  .attachment-area.list .list-item .title .index {margin-left:4px;}
  .attachment-area.expanded .file-info .title {font-size:14px;}
  .attachment-area.expanded .file-info .description {font-size:13px;}
  .attachment-area.expanded .file-area .file-document .notice {font-size:14px;}

  /* 뷰어 > 댓글 */
  .comment-area .profile-wrap .name > span {font-size:14px;}
  .comment-area .profile-wrap .name > span > span {font-size:12px;}
  .comment-area .profile-wrap .comment-txt {font-size:13px;}

  /* 랜딩 > 세션 */
  .landing-session .single .gradient-box.active{position:relative;}
  .landing-session .single .gradient-box.active:after{content:""; width:50px; height:100%; position:absolute; right:0; bottom:0;
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  }
  .landing-session .single .table{min-width:500px;}
  .landing-session .single .normal th:first-child,
  .landing-session .single td:first-child{width:130px;}
}

/* 모바일 L */
@media all and (max-width:425px) {
  /* 메인, 리스트 타이틀 */
  .wrapper.index .title-wrap, .blurb, .wrapper.index .sec.bg-gray,
  .wrapper.list .title-wrap, .blurb, .wrapper.list .sec.bg-gray{margin-top:60px;}
  .wrapper.index .title-wrap .title,
  .wrapper.list .title-wrap .title{font-size:18px;}
  .title-wrap .s-txt{font-size:13px;}

  /* 탑버튼 */
  .btn-scroll-to-top{right:10px; bottom:10px;}
  .view-frame .video-area .ready-box img {max-width:300px;}
  #dragonVideo #layer {height:50%;}

  /* 새창 팝업 */
  .pop-writer .mid,
  .pop-writer .bottom{padding:30px 14px !important;}
}

/* 모바일 M */
@media all and (max-width:375px) {
  #dragonVideo #layer {height:43%;}
  .view-frame #dragonVideo .btn-close-video {width:30px;height:30px;}

  /* 결제요청 처리 완료 */
  .payment-complete {width:100%;}
}


@media all and (max-width:374px) {
  /* 나의 질문 - 마이페이지 */
  .toggle-lst.my-qna .toggle-head .link{width:90px;}
}

/* 모바일 S */
@media all and (max-width:320px) {
  #dragonVideo #layer {height:38%;}
}

/* 갤럭시 폴드 */
@media all and (max-width:280px) {
  /* 뷰어 */
  .view-frame header .align-left .btn-leave {margin-right:0;}
  .view-frame .video-area .ready-box img {max-width:280px;}
  .view-frame header .align-right .btn-group .btn-heart {min-width:48px;}
  .view-frame header .align-right .btn-group .btn-heart .count {display:none;}
}
/******************************************************************************************************************************/
/********************************************************* ui-service *********************************************************/
/******************************************************************************************************************************/