.btn-high-primary {
	background: #00789D;
	color: #fff;
	border-color: #00789D;
	font-weight: 700;
}

/* 기본 배경설정 */

body.video {
  background: #92DDE8 url(../images/components/video-bg.png) repeat 0 0;
  background-size: 25%;
}

body.video .header-desk .header-gnb .gnb-box .txt {
  color: var(--txt-color4);
}

body.video .header-desk .header-gnb .gnb-box.on .txt {
  color: #00789D;
  font-weight: 900;
}

/* header */
.btn-level-guide a {
	background: #0088B4;
	color: #fff;
	font-weight: 900;
	padding: .8em 2em;
	border-radius: 50px;
}
.user-info > a {
	display: flex;
	background: #EFFAFC;
	padding: .7em 1em;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	overflow: hidden;
	color: #444444;
	font-weight: 700;
}
.user-info > a .user-img {
	width: 40px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 5px;
	border: 1px solid #BDBDBD;
}
.user-info > a .txt-light {
	font-weight: 400;
	margin-left: 5px;
	color: #828282;
}

/* 비디오 메인 */
.hori-section {
	overflow-y: scroll;
	height: calc(100% - 155px);
}
.hori-section .hori-section__inner {
	padding: 15px;
}

.main-banner {
	margin-top: 10px;
}

.hori-section .hori-section__inner.main-recommand-video {
	padding-top: 25px;
}
.main-recommand-video {
	display: grid;
	grid-template-columns: 2fr 2fr;
	gap: 20px;
}
.main-recommand-video .main-recommand-video__box {
	background: #fff;
	border: 1px solid #6098FF;
	padding: 10px 20px 20px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 2px 0px #6098FF;
	position: relative;
	display: flex;
	flex-direction: column;
}
.main-recommand-video .main-recommand-video__box .box-title {
	color: #6098FF;
	font-weight: 700;
	margin-bottom: 5px;
	font-size: 1.2rem;
}
.main-recommand-video .main-recommand-video__box .login-alert {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.main-recommand-video .main-recommand-video__box .login-alert .txt {
	font-size: 1.7rem;
	font-weight: 900;
}
.main-recommand-video .main-recommand-video__box .login-alert .btn-login {
	padding: 0.7em 1.5em;
	width: auto;
	margin-top: 1em;
	margin-bottom: 1em;
}
.main-recommand-video .main-recommand-video__box.main-new-video_box {
	border-color: #0088B4;
	box-shadow: 0 0 2px 0px #0088B4;
}
.main-recommand-video .main-recommand-video__box.main-new-video_box .box-title {
	color: #0088B4;
}
.main-recommand-video .main-recommand-video__box .video-list {
	display: grid;
	grid-template-columns: 49% 49%;
	gap: 2%;
}
.main-recommand-video .main-recommand-video__box .video-list .video-list__video .video__img {
	border: 1px solid #BDBDBD;
	border-radius: 10px;
	overflow: hidden;
	padding: 5px;
	position: relative;
}
.main-recommand-video .main-recommand-video__box .video-list .video-list__video .video__img img {
	border-radius: 5px;
	overflow: hidden;
}
.main-recommand-video .main-recommand-video__box .video-list .video-list__video .video__title {
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #444;
	padding: 5px 10px;
}
.main-recommand-video .main-recommand-video__box .video-list .no-video-list {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-weight: 900;
	font-size: 22px;
}
.recommend_list_box {
	margin-bottom: 20px;
}
.recommend_list_box h6 {
	color: #00789D;
	font-weight: 900;
	font-size: 1.5rem;
	margin-bottom: 15px;
	padding-left: 5px;
}
.recommend_list.hori-scroll-box {
	margin: 0 -15px;
	margin-bottom: 2em;
	padding-left: 15px;
	padding-top: 20px;
	width: 100vw;
}
.recommend_list.hori-scroll-box:before {
	display: none;
}
.recommend_list .recommend-video {
	width: 15%;
	flex-shrink: 0;
	margin-right: 50px;
}
.recommend-video .recommend-video__txt {
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 5px 10px;
	line-height: 1.4;
	font-size: 20px;
}

.recommend-video__img {
	position: relative;
	padding-bottom: 140%;
}
.recommend-video__img > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	border-radius: 10px;
	overflow: hidden;
}
.recommend-video__img:before {
	content: '';
	position: absolute;
	left: 7px;
	top: 50%;
	background: #eae9e0;
	width: 100%;
	height: 97%;
	z-index: 2;
	border-radius: 10px;
	overflow: hidden;
	transform: translateY(-50%);
}
.recommend-video__img:after {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	background: #d9d9d9;
	width: 100%;
	height: 90%;
	z-index: 1;
	border-radius: 10px;
	overflow: hidden;
	transform: translateY(-50%);
}
.recommend-video.on .recommend-video__img > img {
	border: 4px solid #FFD600;
}
.recommend-video.on .recommend-video__txt {
	/* color: #FFD600; */
	font-weight: 900;
}
.main-recommand-subject {
	padding: 15px;
	padding-right: 0;
}


.video-kinds-menu {
	display: flex;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 10px;
}


.video-kinds-menu > a {
	background: #fff;
	padding: 5px 30px;
	border: 2px solid #BDBDBD;
	border-radius: 5px;
	overflow: hidden;
	font-weight: 700;
	color: #828282;
	flex-shrink: 0;
	margin-right: 5px;
	font-size: 18px;
}
.video-kinds-menu > a.on {
	background: #FF5A78;
	border-color: #FF5A78;
	color: #fff;
	font-weight: 900;
}
.video-kinds-menu > a:last-child {
	margin-right: 0;
}

.kinds-video-list-box {
	overflow-y: scroll;
	height: calc(100vh - 245px);
	padding: 35px 15px 20px;
	position: relative;
}

.video-series-list-box .loading-img,
.kinds-video-list-box .loading-img {
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
}
.video-series-list-box .recommend-video__list,
.kinds-video-list-box .recommend-video__list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.video-series-list-box .recommend-video__list .recommend-video,
.kinds-video-list-box .recommend-video__list .recommend-video {
	/* margin: 10px 20px; */
	width: 16%;
	margin-right: 15px;
	margin-bottom: 40px;
}

.video-kinds-menu.hori-scroll-box:before, .hori-scroll-box:before,
.video-kinds-menu.hori-scroll-box:before, .hori-scroll-box:after
{
	width: 15px;
}


.series-episode-list {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr;
	gap: 10px 10px;
	/* margin-top: 10px; */
	padding: 10px;
}

.series-episode-list .series-episode .img_wrap img {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.series-episode-list .series-episode .series-episode__info {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.series-episode-list .series-episode .script_badge {
	background: #FF3B30;
	color: #fff;
}
.series-episode-list .series-episode .lv_badge {
	background: #FF2D77;
	color: #fff;
	margin-left: 5px;
}
.series-episode-list .series-episode .vid_count {
	margin-left: auto;
}


.episode-video-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(20%, 2fr));
	gap: 30px 10px;
	padding: 40px 20px;
}
.episode-video-list .episode-video__thumnail {
	position: relative;
	padding-bottom: 56.25%;
	border-radius: 12px;
	overflow: hidden;
	border: 5px solid #fff;
	box-shadow: 0px 0px 0px 1px #BDBDBD;
}
.episode-video-list .episode-video__thumnail > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 6px;
}
.episode-video-list .episode-video__thumnail .vid_count {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 35%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, .5);
	line-height: 1.3;
	font-weight: 700;
	text-align: center;
}
.episode-video-list .episode-video__thumnail .vid_count svg {
	width: 15px;
	display: block;
	margin: 0 auto;
}

.episode-video-list .episode-video__title {
	padding: 5px 10px;
	line-height: 1.4;
	font-size: 20px;
}
.episode-video-list .video-column-wrap a {
	position: relative;
}



/* 레벨벳지 */
.lv_badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #C35BEA;
	color: #fff;
	font-weight: 700;
	border-radius: 4px;
	font-size: 16px;
	z-index: 4;
}
.lv_badge .heigh-lighter {
	color: #FFD600;
	font-weight: 900;
	font-size: 1.1em;
}


/* 비디오 디베이트 (영상 보는 페이지) */
.video-debate-section {
	display: flex;
	height: calc(100% - 125px);
	overflow: hidden;
}
.video-debate-section .left-side {
	background: #F4F4F4;
	flex-grow: 1;
}
.video-debate-section .right-side {
	background: #F4F4F4;
	width: 340px;
	flex-shrink: 0;
	border-left: 1px solid #bdbdbd;
}

.video-play-list {
	display: flex;
	flex-direction: column;
	padding: 20px 35px;
	padding-bottom: 0;
}
.video-play-list .video-play-list__title {
	font-size: 20px;
	font-weight: 700;
	color: #00789D;
	margin-bottom: 10px;
	
}
.video-play-list .video-play-list__list {
	overflow-y: scroll;
	flex-grow: 1;
	padding: 1px;
	padding-bottom: 20px;
	position: relative;
}
.video-play-list .video-play-list__list .video__img {
	position: relative;
	padding-bottom: 56.25%;
	border-radius: 12px;
	overflow: hidden;
	border: 5px solid #fff;
	box-shadow: 0px 0px 0px 1px #BDBDBD;
}
.video-play-list .video-play-list__list .video__img > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 6px;
}
.video-play-list .video-play-list__list a.on .video__img {
	border: 5px solid #FFD600;
	box-shadow: 0px 0px 0px 1px #fff;
}
.video-play-list .video-play-list__list .video__title {
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 5px 10px;
	line-height: 1.4;
	font-size: 20px;
}
.video-play-list .video-play-list__list a.on .video__title {
	font-weight: 900;
}

.video-view-box {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
}
.video-view-box::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/
}
.video-view-box .video-play-box {
	background: yellowgreen;

}
.video-view-box .video-btn-box {
	background: #000;
	flex-grow: 1;
}

.btn-video-error-report {
	display: flex;
	align-items: center;
	line-height: 1;
	border: 1px solid #EB536E;
	color: #EB536E;
	padding: 10px 15px;
	border-radius: 50px;
	font-size: 12px;
}
.video-menu-box .btn-video-error-report {
	margin-bottom: 20px;
}
.btn-video-error-report svg {
	width: 11px;
	margin-right: 3px;
}

/* 비디오 보카 */
.day-list .day-list__cts__img .btn-word-list,
.book-voca-list-box .day-list .day-list__box .day-list__box__title .day-title {
	color: #00789D;
}
.preview-img.on {
	border: 1px solid #00789D;
	box-shadow: 0 0 0 2px #00789D;
}

.voca-study-contents .study-point-box .point-txt>span,
.voca-study-contents .study-result-title .txt {
	color: #00789D;
}

.voca-study-contents .btn-result-box a {
	border: 1px solid #00789D;
	color: #00789D;
}
.voca-study-contents .btn-result-box a.btn-high-primary {
	background: #00789D;
}


.full-popup-contents .full-popup-header.study-layout {
	background: #0BA1C2;
}
.word-rec-list-section .voca-list .voca-item .word-txt a .voca-word {
	color: #0BA1C2;
}


/* 최근 본 비디오 */
.recent-video-list {
	padding-bottom: 70px;
	padding-top: 30px;
	padding-left: 15px;
	padding-right: 15px;
	height: calc(100vh - 90px);
}
.recent-video-list .load-data {
	display: block;
	margin: 0;
}
.recent-video-list .edate-title {
	font-weight: 900;
	color: #00789D;
	font-size: 26px;
	padding-left: 15px;
	padding-bottom: 30px;
}

.recent-video-list .recent-video-list-row {
	padding: 0 15px;
	padding-bottom: 50px;
}



.recent-video-list .btn-more {
	margin-top: 10px;
}
.no-data-msg {
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	font-weight: 900;
	font-size: 2.5rem;
}

/* 로딩화면 */
.loading-mockup__frame .episode-video-list .episode-video__thumnail,
.loading-mockup__frame .lv_badge,
.loading-mockup__frame .edate-title span {
	background: linear-gradient(-45deg, #fafafa, #666, #fafafa);
	background-size: 400% 400%;
	color: transparent;
	border-radius: 4px;
	overflow: hidden;
	animation: loadingGradientAni 5s ease infinite;
}
.loading-mockup__frame .video_badge.script_badge,
.loading-mockup__frame .video_badge.quiz_badge {
	color: transparent;
	background: linear-gradient(-45deg, #fafafa, #666, #fafafa);
}
.loading-mockup__frame .episode-video-list .episode-video__title {
	display: none;
}


/* 비디오 리뉴얼 */
.video-kinds-menu {
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0;
}
.video-kinds-menu a {
	margin-bottom: 5px;
	font-size: 16px;
}
.scroll-container .video-kinds-menu.on {
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, .2);
	margin: 0;
	padding: 10px 0;
}