@charset "utf-8";


.bbs_viewing .table-form {background: #fff;}
.bbs_viewing .table-form th {white-space: nowrap;}

.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 #1D2D67; color: #1D2D67; background: #fff; transition: all 0.3s;}
.class_view .cell_knock a:hover,
.class_view .cell_knock a:focus {box-shadow: 0px 0px 5px #1D2D67;}

.class_view .class_view_wrap {display: flex; flex-wrap: wrap; gap:1%}
.class_view .class_view_wrap > div {padding:1.25rem; border-top: 1px solid #333; border-bottom: 1px solid #ddd; background: #fff;}
.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 .ca_name {display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 5px; color: #fff; background:var(--theme-color-2);}

.class_view .class_view_wrap .view_video .video_info .view_info_title {display: flex; gap:10px; justify-content: space-between; padding-bottom:0;}
.class_view .class_view_wrap .view_video .video_info .view_info_title h5 {color: #111;}
.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: #fff; background: #B5B5B5; 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: #1D2D67;}
.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);}
.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 #eee; background: #f9f9f9;}

.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: 14px; 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: #3086e2;}
.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 #1D2D67;border-radius: 10px; color: #1D2D67; 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 #1D2D67;}

.class_view > .bbs_view_link, .bbs_viewing > .bbs_view_file {margin-top: 1rem; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; padding: 1rem 2rem; background: #fff;}
.class_view > .bbs_view_link, .bbs_viewing > .bbs_view_file dt {font-size: 1.15rem; font-weight: 500;}
.class_view > .bbs_view_link, .bbs_viewing > .bbs_view_file dd {margin: 0; margin-top: 5px; padding: 10px;}
.class_view > .bbs_view_link dd ul, .class_view > .bbs_view_file dd ul {padding: 0 10px;}
.class_view .bbs_view_file dd ul li {font-size: 14px;}
.class_view .bbs_view_file dd .dm_v_file_cnt {font-size: 13px;}
.class_view .bbs_view_contents {margin-top: 1rem; /*border-top: 1px solid #dedede;*/ border-bottom: none; background: #fff;}

.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: #1D2D67;}
.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: 10px;}
.comment_box .comment_wr_name dd {font-weight: 700;}
.comment_form {border-radius: 20px;}

/* 20240722 신규 추가 */
.bbs_view_extra { margin:2.5rem 0 0; }
.view_bbs_contents_file.bbs_view_contents_img { text-align:center; }
.bbs_view_extra .table-form { border-top:0 none; }
.bbs_view_extra .table-form tr:not(:last-child) th, 
.bbs_view_extra .table-form tr:not(:last-child) td { border-bottom:1px dashed #ddd; }
.bbs_view_extra .table-form th { background:0 none; font-weight:700; }
.bbs_view_contents_txt { padding:2.5rem 0.75rem; border-bottom:1px solid #ddd; font-size:0.875rem; color:#707070; letter-spacing:-0.02em; }

@media (max-width:576px) {
    .class_view .class_view_wrap > div {padding:0.938rem;}
    .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}
}