@charset "utf-8";

.class_view {border-top: none;}

.class_view .class_top {display: flex; justify-content: space-between; margin-bottom: 10px; width: 100%;}
.class_view .class_view_extra {display: flex; gap:5px;}
.class_view .cell_knock a,
.class_view .class_view_extra span {display: inline-block; padding: 5px 10px; border-radius: 5px; border:1px solid transparent; color: #fff;}
.class_view .class_view_extra span.wr_1 {background: #009688;}
.class_view .class_view_extra span.wr_2 {background: #8968c5;}
.class_view .cell_knock a {border: 1px solid var(--elem-color); color: var(--elem-color); background: #fff; transition: all 0.3s;}
.class_view .cell_knock a:hover,
.class_view .cell_knock a:focus {box-shadow: 0px 0px 5px var(--elem-color);}

.class_view .ca_name {display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 5px; color: #fff; background:var(--theme-color);}

.class_view .class_view_wrap {display: flex; flex-wrap: wrap; gap:1%}
.class_view .class_view_wrap > div {padding:30px 0; border-top:1px solid #333; background:transparent;}
.class_view .class_view_wrap .view_video {width:100%;}
.class_view .class_view_wrap:has(.view_video_ect) .view_video {width: 70%;}
.class_view .class_view_wrap .view_video_ect {width:29%;}
.class_view .class_view_wrap .view_video .video_container {position: relative; padding-top: 56.25%; width: 100%;}
.class_view .class_view_wrap .view_video #gj_video_box {position: absolute; left: 0; top: 0; padding: 0; width: 100%; height: 100%;}
.class_view .class_view_wrap .view_video .video_container .video_playtime {position: absolute; bottom: 20px; right: 20px; padding: 6px 15px; border-radius: 15px; color: #fff; background: rgba(0,0,0,0.5);}
.class_view .class_view_wrap .view_video .bbs-cma-video-container {padding-bottom: 59.25%;}
.class_view .class_view_wrap .view_video .video_info .view_info_title {display: flex; gap:10px; justify-content: space-between; padding-bottom: 10px;}
.class_view .class_view_wrap .view_video .video_info .view_info_title h5 {margin-top:10px; font-size:1.5rem; color: #fff;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap {position: relative; display: flex; gap:5px}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs {position: relative;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs button {display: flex; align-items: center; justify-content: center; border: none; border-radius: 500px; width:30px; height: 30px; color: #000; background:#fff; transition: all 0.3s;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs button.good.active {background: #f34b70;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs button.bad.active {background: #222;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs button.btn_scrap.success {background: #FFC107;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs > button:hover,
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs > button:focus {background:var(--theme-color);color:#fff;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_modal {position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 20px; border-radius: 10px; width: 190px; background: #fff; box-shadow: 0px 0px 8px rgba(0,0,0,0.3);z-index:3;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_modal:before {content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_qr_code {display: none;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_share_box {display: none; width:200px;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_share_box ul {display: flex; justify-content: center; gap:5px;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_share_box ul img {display: block; margin: 0 auto; width: 30px;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_share_box a {border-radius: 50%;}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .bbs_share_box a:hover {box-shadow: 0px 0px 3px rgba(0,0,0,1);}
.class_view .class_view_wrap .view_video .video_info .view_info_title .btn_video_wrap .btn_bbs .share_close {position: absolute; top:8px; right:8px; padding: 0; width: auto; height: auto; background: none; color: #111;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info {display: flex; flex-wrap: wrap; justify-content: space-between; gap:10px; margin-top: 10px; padding: 10px 20px; border-radius: 10px; border: 1px solid #333; }
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name {display: flex; align-items: center; justify-content: space-between; gap:10px; font-size: 1.15rem;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name dd {line-height: 1;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name .btn_subscribe {display: inline-block; padding: 3px 15px; border-radius: 5px; color:#fff; font-size: 0.875rem; background: #999; transition: all 0.3s;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name .btn_subscribe:hover,
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name .btn_subscribe:focus {background: #777;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name .btn_subscribe.cancel {background: #f04848;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name .btn_subscribe.cancel:hover,
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name .btn_subscribe.cancel:focus {background: #d63838;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_name .btn_subscribe.success {background: #777;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_sub {display: flex; gap:10px; justify-content: space-between;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_sub > div {display: flex; gap:10px;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_sub dl {display: flex; gap:5px;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_sub dl dt {font-weight: normal;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_sub dl.bbs_view_info_hit dt {color: #fff;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_sub dl.bbs_view_info_good dt {color: #f34b70;}
.class_view .class_view_wrap .view_video .video_info .bbs_view_info_sub dl.bbs_view_info_cmt dt {color: #14bb75;}
.class_view .class_view_wrap .view_video .video_info .view_info_hashtag {margin-top: 15px;}
.class_view .class_view_wrap .view_video .video_info .video_knock {margin-top: 15px;}
.class_view .class_view_wrap .view_video .video_info .video_knock ul {display: flex; flex-wrap: wrap; gap:10px;}
.class_view .class_view_wrap .view_video .video_info .video_knock ul li a {display: inline-block;padding: 10px 20px;border: 1px solid var(--elem-color);border-radius: 10px; color: var(--elem-color); background: #fff; transition: all 0.3s;}
.class_view .class_view_wrap .view_video .video_info .video_knock ul li a:hover,
.class_view .class_view_wrap .view_video .video_info .video_knock ul li a:focus {box-shadow: 0px 0px 8px var(--elem-color);}

.class_view > .bbs_view_link, .bbs_viewing > .bbs_view_file {margin-top: 1rem; /*padding: 1rem 2rem;*/ padding:20px 0; }
.class_view > .bbs_view_link, .bbs_viewing > .bbs_view_file dt {font-size: 1.15rem; font-weight: 500;background-color:#000;}
.class_view > .bbs_view_link, .bbs_viewing > .bbs_view_file dd {margin: 0; margin-top: 5px; padding: 10px;background-color:#000;border:1px solid #dedede;}
.class_view > .bbs_view_link dd ul, .class_view > .bbs_view_file dd ul {padding:0;/*padding: 0 10px;*/}
.class_view .bbs_view_file dd ul li {font-size: 0.875rem;background-color:#000;}
.class_view .bbs_view_file dd .dm_v_file_cnt {font-size: 0.813rem;background-color:var(--theme-color);}
.class_view .bbs_view_contents {margin-top: 1rem; padding:30px 0;/*border-top: 1px solid #dedede;*/ border-bottom: none; }

.class_view .class_view_wrap .view_video_ect {padding: 2rem 1.5rem;}
.class_view .class_view_wrap .view_video_ect > p {font-weight: 500; font-size: 1.25rem; color: var(--elem-color);}
.class_view .class_view_wrap .view_video_ect .video_ect_wrap {overflow: auto; max-height: 30vw;}
.class_view .class_view_wrap .view_video_ect .video_ect_wrap::-webkit-scrollbar {width: 5px;}
.class_view .class_view_wrap .view_video_ect .video_ect_wrap::-webkit-scrollbar-thumb {background: #586cc4;}

.comment_box::before {content: none;}
.comment_box { padding:20px 30px; background-color:#191919; }
.comment_box .comment_wr_name dd {font-weight: 700;}
.comment_form {border-radius: 20px;}

@media (max-width: 1540px) {
	.bbs_view { padding:0 20px; }
}
@media (max-width: 576px) {
	.class_view .class_view_wrap > div {padding:20px 0;}
	.class_view > .bbs_view_link, .bbs_viewing > .bbs_view_file {padding: 20px;}
	.class_view .class_view_wrap .view_video .video_info .view_info_title {flex-wrap: wrap; gap:10px}
	.class_view .ca_name { margin-bottom:0; font-size:0.933rem; }
	.class_view .class_view_wrap .view_video .video_info .view_info_title h5 { font-size:1.25rem; }
	.th_ex_filename { display:none; }
	.table-form td.td_ex_filename { padding:15px 0; }
}
@media (max-width: 486px) {
	.comment_box { padding:10px 20px; }
}