@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: 2rem; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; 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: #1D2D67;} */

.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 {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; padding:30px 0; /*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;}

/* 상단 이미지 슬라이드, 여분필드 */
.class_view .con_top { display:flex; justify-content:space-between; /* align-items:center; */ gap:0 75px; margin-bottom:50px; padding-bottom:50px; border-bottom:1px dashed #ccc; }
.class_view .con_top > div { width:50%; }
.class_view .con_top .con_left { max-width:524px; max-height:470px; margin:0 auto; overflow:hidden; }
.class_view .con_top .con_left .product_slide_wrap { position:relative; }
.class_view .con_top .con_left img { width:100%; height:100%; max-width:524px; min-height:470px; max-height:470px; object-fit:cover; }
.class_view .con_top .con_right { }
.class_view .con_top .con_right .top_title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.class_view .con_top .con_right .top_title .view_info_title h5 { font-size:1.563rem; font-weight:700; color:#111; letter-spacing:0; }
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev { right:25px; }
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next { left:25px; }
.swiper-button-prev,
.swiper-button-next { width:20px; height:30px; margin-top:-15px; background-size:20px 30px; }
.swiper-pagination { left:50%; bottom:20px; transform:translateX(-50%); }
.swiper-pagination-bullet { width:7px; height:7px; margin:0 3px; opacity:1; border:1px solid #fff; background:0 none; }
.swiper-pagination-bullet-active { background:#fff; }
.class_view .ca_name { display:inline-block; margin:0; padding:2px 10px; background:#fff; border:1px solid #707070; border-radius:14px; font-size:0.813rem; color:#111; letter-spacing:0; }
.class_view .btn_estimate { margin-top:20px; text-align:center; }
.class_view .btn_estimate a { display:inline-block; min-width:253px; padding:15px; background:var(--theme-color-2); border-radius:2px; color:#fff; font-size:1rem; font-weight:700; letter-spacing:0; }
.class_view .table-form { border-top:2px solid var(--theme-color-2); }
.class_view .table-form th,
.class_view .table-form td { height:auto; padding:14px 15px 11px; font-size:1rem; letter-spacing:-0.04em; border-bottom:1px dashed #ccc; }
.class_view .table-form th { background:#fff; font-weight:300; }
.class_view .table-form td { font-weight:500; }

@media (max-width:1100px) {
    .class_view .con_top { gap:0 50px; }
}

@media (max-width:992px) {
    .class_view .con_top { flex-wrap:wrap; gap:30px 0; }
		.class_view .con_top > div { width:100%; }
}

@media (max-width:768px) {
    .class_view .con_top { padding-bottom:30px; margin-bottom:30px; }
}

@media (max-width:576px) {
    .class_view .class_view_wrap > div {padding: 30px 20px;}
    .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 .btn_estimate a { min-width:auto; padding:10px 35px; }
}

@media (max-width:524px) {
		.class_view .con_top .con_left img { max-width:none; min-height:none; }
}