@charset "UTF-8";


/* ------ gridWrap ------ */

.gridWrap > ul { font-size: 0; margin-left: -1.5rem; margin-top: -1.5rem; }
.gridWrap > ul > li { font-size: 1.5rem; display: inline-block; padding-left: 1.5rem; padding-top: 1.5rem; vertical-align: middle; width: 100%; }
.gridWrap > ul > li > .inner { display: block; width: 100%; }

.gridWrap.grid_2 > ul > li { width: 50%; }
.gridWrap.grid_3 > ul > li { width: 33.333%; }
.gridWrap.grid_4 > ul > li { width: 25%; }
.gridWrap.grid_5 > ul > li { width: 20%; }
.gridWrap.grid_6 > ul > li { width: 16.666%; }
.gridWrap.grid_7 > ul > li { width: 14.2857142857%; }

@media (min-width: 500px) and (max-width: 799px){
	.gridWrap.grid_min2 > ul > li { width: 50%; }
	.gridWrap.grid_min3 > ul > li { width: 33.333%; }
	.gridWrap.grid_min4 > ul > li { width: 25%; }	
	.gridWrap.grid_min5 > ul > li { width: 20%; }	
}

@media (min-width: 800px) and (max-width: 999px){
	.gridWrap.grid_to2 > ul > li { width: 50%; }
	.gridWrap.grid_to3 > ul > li { width: 33.333%; }
	.gridWrap.grid_to4 > ul > li { width: 25%; }
	.gridWrap.grid_to5 > ul > li { width: 20%; }
}

@media (min-width: 1000px){
	.gridWrap.grid_max2 > ul > li { width: 50%; }
	.gridWrap.grid_max3 > ul > li { width: 33.333%; }
	.gridWrap.grid_max4 > ul > li { width: 25%; }
	.gridWrap.grid_max5 > ul > li { width: 20%; }
}


.boardTab { float: left; margin-top: 1.1rem; font-size: 0; }
.boardTab li { display:inline-block; padding: 0 1.5rem; position: relative;}
.boardTab li:first-child { padding-left: 0; }
.boardTab li + li:after {  content: ''; width: 1px; height: 40%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #c1c1c1; }
.boardTab li button { position: relative; color: #899195; font-size: 1.5rem; font-weight: 400; border-radius: 2rem; padding: 0.5rem 1rem; }
.boardTab li button:hover { color: #333; }
.boardTab li button.active { background-color: #028b55; color: #fff; padding: 0.5rem 2rem; }

.basicBoard { width: 100%; text-align: center; border-bottom: 1px solid #666; border-top: 2px solid #333; table-layout: fixed; }
.basicBoard th { padding: 1.2rem 1rem; border-bottom: 1px solid #aaa; font-weight: 400; }
.basicBoard td { padding: 1.2rem 1rem; font-size: 1.6rem;  }
.basicBoard td a { display: block; }
.basicBoard td a strong { font-size: 1.6rem; color: #333; font-weight: 400; }
.basicBoard td a strong em { color: #ec6f26; font-size: 1.6rem; padding-right: 0.8rem;}
.basicBoard td a strong i { color: #be1521; padding-left: 0.8rem; }
.basicBoard td a:hover { text-decoration: underline; text-decoration-color:#000;}
.basicBoard tr + tr { border-top: 1px solid #dedede; }
.boxIcon { border: 1px solid #ec6f26; color: #ec6f26; font-size: 1.4rem; line-height: 2rem; width: 5.5rem; display: inline-block; text-align: center; }
.basicBoard .boardCategory { font-weight: 400; color: rgb(var(--special-color-50)); display: block; margin-bottom: 0.5rem; font-size: 1.5rem; }


.galleryBoard > ul > li > .inner > button { display: block; width: 100%; background-color: #fff; border: 1px solid #dedede; border-radius: 0.5rem; overflow: hidden; }
.galleryBoard .galleryImg-wrap > ul { font-size: 0; }
.galleryBoard .galleryImg-wrap > ul li { display: inline-block; }

.galleryBoard .galleryImg_1 > ul { margin-left: 0; }
.galleryBoard .galleryImg_1 > ul > li { width: 100%; }

.galleryBoard .galleryImg_2 > ul > li { display: block; width: 100%; }
.galleryBoard .galleryImg_2 > ul > li:first-child { margin-bottom: 2px; }
.galleryBoard .galleryImg_2 .imgContainer-fit { padding-bottom: calc(50% - 1px); }

.galleryBoard .galleryImg_3 > ul > li:first-child { display: block; width: 100%; margin-bottom: 2px; }
.galleryBoard .galleryImg_3 > ul > li:first-child .imgContainer-fit { padding-bottom: calc(50% - 1px); }
.galleryBoard .galleryImg_3 > ul > li:nth-child(n + 2) { width: calc(50% - 1px); }
.galleryBoard .galleryImg_3 > ul > li:last-child { margin-left: 2px; }

.galleryBoard .galleryImg-alpha > ul > li:last-child { position: relative; }
.galleryBoard .galleryImg-alpha > ul > li:last-child:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right:0; display: block; background-color: rgba(0,0,0,0.4); }
.galleryBoard .galleryImg-alpha .alphaCount { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size:4rem; z-index: 1; font-weight: 500; }

.galleryBoard .galleryText { padding: 1.5rem 1.5rem; text-align: left; }
.galleryBoard .galleryText h5, .galleryBoard .date { padding: 0; }
.galleryBoard .date { line-height: 1.2; height: inherit; }
.galleryBoard .galleryText h5 strong { font-size: 1.7rem; font-weight: 400; }
.galleryBoard .galleryText p { margin: 1rem 0 1.5rem; color: #777; font-size: 1.5rem; }
.galleryBoard .date { padding-top: 0.5rem; display: block; color: #aaa; }


.galleryBoard .galleryImg-wrap > ul > li .galleryVideo video { height: 100%; object-fit: cover; }
.galleryBoard .galleryImg-wrap > ul > li .postVideo:before {
	content: "\ea3e"; font-family: xeicon; font-size: 5rem; color: #fff; box-shadow: 0px 0px 2rem rgba(0,0,0,0.5); border: 0.3rem solid #fff;
	position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.5); line-height: 5.9rem; width: 6.5rem; height: 6.5rem; text-align: center; border-radius: 50%; text-indent: 0.5rem;
}


.galleryBoard button dl { border-top: 1px solid #dedede; padding: 1.5rem; text-align: left; }
.galleryBoard button dl dt { font-size: 1.6rem; }
.galleryBoard button dl dd { font-size: 1.4rem; color: #ccc; margin-top: 1rem; }

.galleryBoard .onlyText button { position: relative; }
/* .galleryBoard .onlyText .onlyText-date { position: absolute; bottom: 0; left: 0; }  */
.galleryBoard .onlyText h5 { padding-bottom: 0; text-align: left; padding: 0 1.5rem; }
.galleryBoard .onlyText-content { position: relative; padding-bottom: 100%; }
.galleryBoard .onlyText-content > .inner { padding: 1.5rem; border-top: 1px solid #ededed; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.galleryBoard .onlyText-content > .inner > div { font-size: 1.5rem; text-align: left; }


.gallerySlider-wrap { margin-top: 2rem;  font-size: 0; position: relative; transition: none; }
.gallerySlider-wrap .maxWidth { transition: none; }
.gallerySlider { border-radius: 1rem; overflow: hidden; background-color: #f4f7f9; }
.gallerySlier-item { position: relative; width: 500px; }
.gallerySlier-item a.galleryVideo { display: block; padding-bottom: 100%; }
.gallerySlier-item a.galleryVideo:before {
	content: "\ea3e"; font-family: xeicon; font-size: 4rem; color: #fff; box-shadow: 0px 0px 2rem rgba(0,0,0,0.5); border: 0.3rem solid #fff;
	position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.5); line-height: 5.9rem; width: 6.5rem; height: 6.5rem; text-align: center; border-radius: 50%; text-indent: 0.5rem;
} 
.gallerySlier-item video { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }

.gallerySlider-wrap .gallerySlier-item a { opacity: 0.3; transition: opacity 0.5s linear; padding-bottom: 50%; }
.gallerySlider-wrap .slick-center .gallerySlier-item a { opacity: 1; }
.gallerySlider-wrap .sliderControl-wrap { text-align: center; padding: 1rem 0; }

.slick-lightbox-slick-item-inner video { width: 100%; }
.slick-lightbox-inner .slick-prev,
.slick-lightbox-inner .slick-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 100; font-size: 0; width: 4rem; height: 4rem; line-height: 3rem; background-color: rgba(0,0,0,0.5); border-radius: 2rem; }
.slick-lightbox-inner .slick-prev { left: 1rem !important; }
.slick-lightbox-inner .slick-next { right: 1rem !important; }
.slick-lightbox-inner .slick-prev:before { content: "\e93d"; }
.slick-lightbox-inner .slick-next:before { content: "\e940"; }
.slick-lightbox-inner .slick-prev:before, .slick-lightbox-inner .slick-next:before {
    font-family: 'xeicon'; font-size: 2rem; line-height: 4rem; opacity: .75; color: white; 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 600;
}




/** video **/

.videoGallery-wrap { margin-top: 0.6rem; }
.videoGallery-wrap .maxWidth { padding: 0; }
.videoList-wrap > ul { margin: -0.6rem 0 0 -0.6rem; font-size: 0; }
.videoList-wrap > ul > li { padding: 0.6rem 0 0 0.6rem; }
.videoList-wrap button { /* border: 1px solid #dedede; */ border-radius: 1rem; overflow: hidden; display: block; width: 100%; }
.videoList-image { position: relative; }
.videoList-image .imgContainer-fit { padding-bottom: 56.25%; }
.videoList-image .playIcon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20%; max-width: 60px; }
.videoList-wrap button dl { border-top: 1px solid #dedede; padding: 1.5rem; }
.videoList-wrap button dl dt { font-size: 1.6rem; }
.videoList-wrap button dl dd { font-size: 1.3rem; color: #ccc; margin-top: 1rem; }

@media (min-width: 720px){ 
	.videoList-wrap > ul > li { display: inline-block; vertical-align: middle; width: 50%; }
}

@media (min-width: 1150px){ 
	.videoList-wrap > ul > li { width: 33.33333%; }
}

.viewVideo-wrap { width: 100%; max-width: 900px; margin: 20px auto 30px; border-radius: 8px; background-color: #f0f0f0; padding: 10px; box-sizing: border-box; box-shadow: 0px 8px 15px #ccc; }
.viewVideo { position: relative; width: 100%; height: auto; padding-top: 56.25%; }
.viewVideo iframe,
.viewVideo object,
.viewVideo embed { z-index: 1; top: 0; left: 0; position: absolute; width: 100%; height: 100%; }	
.viewVideo .video-js .vjs-big-play-button .vjs-icon-placeholder:before { top: 50% !important; transform: translateY(-40%); }	




@media (min-width: 720px){ 
	.videoList-wrap > ul > li { display: inline-block; vertical-align: middle; width: 50%; }
}

@media (min-width: 1150px){ 
	.videoList-wrap > ul > li { width: 33.33333%; }
}

/** video end **/





.viewContainer-controls > ul { border-bottom: 1px solid #333; }
.viewContainer > h3 { font-size: 3rem; font-weight: 500; padding: 1.5rem 0.2rem; }
.viewContainer .viewContainer-info { /* background-color: #f1f2f8; */ border-bottom: 1px solid #dadada; padding: 0 0.2rem 2rem; }
.viewContainer .viewContainer-info ul { font-size: 0; }
.viewContainer .viewContainer-info ul li { display: inline-block; font-size: 1.5rem; position: relative; padding-right: 1rem; color: #888; }
.viewContainer .viewContainer-info ul li + li { padding: 0 1rem; }
.viewContainer .viewContainer-info ul li + li:after { content: ''; width: 1px; height: 60%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #c1c1c1; }
.viewContainer .viewContainer-content { padding: 2.5rem 0.2rem; font-size: 1.5rem; line-height: 170%; }
.viewContainer .viewContainer-content img{max-width: 100%;}
.viewContainer .viewContainer-content .fullImg { display: inline-block; }
.viewContainer img { margin-bottom: 2rem; }
.viewContainer-content {overflow-x: auto; -webkit-overflow-scrolling: touch; }
.viewContainer-content table { max-width: 100%; table-layout: auto !important; word-break: break-all;  }

.viewContainer .viewContainer-controls li { padding: 1.5rem 0.2rem; border-top: 1px solid #dadada; }
.viewContainer .viewContainer-controls li:last-child { border-bottom: 1px solid #999; }
.viewContainer .viewContainer-controls li span { font-size: 1.5rem; color: #367bc0; padding-right: 0.5rem; }
.viewContainer .viewContainer-controls li a { font-size: 1.5rem; color: #333; }
.viewContainer .viewContainer-controls li a:hover { text-decoration: underline; }

.waringContainer .inner { border: 1px solid #e0e0e0; background-color: #fafafa; padding: 2.3rem; }
.waringContainer h3 { font-size: 1.7rem; padding: 0 0 1rem; font-weight: 500; }
.waringContainer ul li { font-size: 1.5rem; position: relative; padding-left: 1.7rem; }
.waringContainer ul li + li { margin-top: 0.5rem; }
.waringContainer ul li i { position: absolute; left: 0; top: 0.5em; font-size: 1.2rem; }

.boardFile { padding-bottom: 2.5rem; }
.boardFile h4 { margin-bottom: 0.5rem; padding: 0 0.3rem; font-weight: 400; }
.boardFile h4 i { margin-right: 0.5rem;}
.boardFile .fileBtn { overflow: hidden; }
.boardFile .fileBtn li { padding-left: 0.5rem; width: 33.333%; float: left; }
.boardFile .fileBtn a { border-radius: 0.3rem; background: #f9f9f9; border: 1px solid #ddd; padding: 0.7rem 1.2rem; margin: 0.7rem 0px 0.5rem; font-size: 1.4rem; color: #555; }
.boardFile .fileBtn a i { color: #dd792b; position: relative; top: 0.2rem; transform: rotate(-45deg); margin-right: 0.5rem; }

.viewContainer .viewBtn-warp { margin: 2.5rem auto; text-align: center; }
.viewContainer .viewBtn { max-width: 20rem; display: inline-block; vertical-align: middle; border-radius: 0.3rem; padding: 1.2rem 0.2rem; }


.insertContainer { padding: 0 0 6rem }
.insertBoard { width: 100%; border-bottom: 1px solid #333; }
.insertBoard th { border-top: 2px solid #333; }
.insertBoard td { border-top: 1px solid #dcdcdc; padding: 1rem; }
.insertBoard td input, .insertBoard td textarea { font-size: 1.5rem; }
.insertBoard td textarea { min-height: 30rem; }

.insertContainer .resultBtn { margin: 2.5rem auto 0; max-width: 40rem; }

.pageArea { padding: 2rem 1rem 1rem; }
.pageBtn { font-size: 0; text-align: center; }
.pageBtn li { display: inline-block; vertical-align: middle; padding: 0 0.5rem; font-size: 1.4rem; }
.pageBtn li span { padding: 0 1rem; font-size: 1.6rem; }
.pageBtn li span.nowPage { color: #367bc0; font-weight: 500; }
.pageBtn li i { position: relative; top: -0.1rem; }
.pageBtn li:first-child { margin-right: 1.5rem; font-size: 0; }
.pageBtn li:last-child { margin-left: 1.5rem; font-size: 0; }
.pageBtn li:first-child button, .pageBtn li:last-child button { font-size: 0; }
.pageBtn li button { line-height: 3rem; width: 3rem; height: 3rem; display: block; font-size: 1.5rem; } 
.pageBtn li button i { font-size: 1.8rem; color: #999; vertical-align: middle; }
.pageBtn li button i:hover { color: #333; }
.pageBtn li.active button { background-color: #222; color: #fff; font-weight: 400; border-radius: 50%; }

.bottomContent { display: flex; gap: 1rem;}
.bottomContent .initialBtn { padding: calc(var(--padding-s) + 0.2rem) var(--padding-l); font-weight: 500; font-size: 1.5rem; min-width: 11rem; max-width: 30vw; border-radius: var(--radius-xs); }
.bottomContent-center { justify-content: center; }
.bottomContent-start { justify-content: flex-start; }
.bottomContent-end { justify-content: flex-end; }
.bottomContent-between { justify-content: space-between; }

.buttonGroup { display: flex; gap: 1rem; }
.buttonGroup > .initialBtn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }

.comment-wrap { margin-bottom: 2rem; }
.comment-wrap h4 { font-size: 1.6rem; font-weight: 400; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 2rem; }
.comment-wrap h4 i { font-size: 1.9rem; position: relative; top: 2px; }
.comment-wrap h4 em { font-size: 1.7rem; padding: 0 3px 0 5px; color: #ee7300; }


.commentInsert-wrap { background-color: #f4f7f9; border: 1px solid #e7ecef; padding: 2rem; border-radius: 0.4rem; }
.subComment-insert .commentInsert-wrap { border: 0; padding: 0; }
.commentInsert { background-color: #fff; border-radius: 0.4rem; overflow: hidden; border: 1px solid #dae0e3; }
.commentInsert .commentInfo { padding: 1rem 1.5rem 0; }
.commentInsert .nonUser { padding: 1rem 1.5rem; border-bottom: 1px solid #e7ecef;  }
.commentInsert .nonUser input { padding: 0.8rem 1rem; border: 0; font-size: 1.5rem; max-width: 48%; color: #fff; border-radius: 0.4rem; border: 1px solid #e7ecef; }
.commentInsert .nonUser input + input { margin-left: 0.5rem; padding-left: 1.5rem; }

.commentInsert textarea { width: 100%; font-size: 1.5rem; padding: 1rem 1.5rem; background-color: #fff; line-height: 130%; }
.commentInsert-btns { background-color: #fff; border-top: 1px solid #e7ecef; text-align: right; position: relative;}
.commentInsert-btns button, .commentInsert-btns .commentImg-add, .commentInsert-btns .commentCounter { display: inline-block; vertical-align: middle; }
.commentInsert-btns button { background-color: #367bc0; color: #fff; font-size: 1.5rem; font-weight: 400; line-height: 40px; width: 110px; }
.commentInsert-btns .commentImg-add input[type="file"] { display: none; }
.commentInsert-btns .commentImg-add label { font-size: 2.2rem; margin-right: 1rem; font-weight: 100; cursor: pointer; }
.commentInsert-btns .commentImg-add label i { color: #666 }
.commentInsert-btns .commentImg-add label:hover i { color: #208bcc;  }
.commentInsert-btns .commentImg-add label span { font-size: 0; text-indent: -9999px; }
.commentInsert-btns .commentCounter { line-height: 39px; font-size: 1.4rem; padding: 0 15px; position: absolute; left: 0rem; top: 0rem; }
.commentInsert-btns .commentCounter em { color: #367bc0; font-size: 1.4rem; } 

.commentInsert-wrap .commentImg-wrap { position: relative; }
.commentInsert-wrap .commentImg-wrap .resetBtn { 
	position: absolute; right: 0; top: 1.5rem; color: #fff; background-color: #3a3f44; 
	font-size: 1.4rem; border-radius: 4rem; line-height: 2.3rem; width: 2.3rem; height: 2.3rem;
}
.commentInsert-wrap .commentImg-wrap .resetBtn:hover { background-color: #585f66; }
.commentInsert-wrap .commentImg-wrap.insertImg { padding: 1.5rem 0 0; position: relative; }
.commentInsert-wrap .commentImg-wrap.commentImg { padding: 0.5rem 0 0; }
.commentInsert-wrap .commentImg-wrap div, .comment-wrap .commentImg-wrap button, .comment-wrap .commentImg-wrap a { background-color: #ededed; border-radius: 1.5rem; overflow: hidden; max-width: 15rem; display: inline-block; }
.commentInsert-wrap .commentImg-wrap img, .commentImg-wrap img { max-width: 100%; max-height: 15rem; }

.comment-wrap > .inner { margin-top: 1rem; }
.comment-wrap .commentInfo .commentThumb { display: inline-block; width: 3rem; border-radius: 50%; overflow: hidden; vertical-align: middle; margin-right: 0.5rem; }
.comment-wrap .commentInfo .commentBasic { display: inline-block; vertical-align: middle; }
.comment-wrap .commentInfo .commentBasic * { display: block; line-height: 130%; }
.comment-wrap .commentInfo .commentBasic em { font-size: 1.2rem; font-weight: 500; }
.comment-wrap .commentInfo .commentBasic span { color: #7e8995; font-size: 1.1rem; }

.comment-wrap > .inner > ul { border-bottom: 1px solid #e7ecef; }
.comment-wrap .inner > ul > li { position: relative; }
.comment-wrap .inner > ul > li + li { border-top: 1px solid #e7ecef; }
.comment-wrap ul li { padding: 1.5rem 0; }
.comment-wrap ul li .comment .commentContent { font-size: 1.5rem; padding: 1rem 0; }
.comment-wrap ul li .comment .commentContent p { font-size: 1.5rem; line-height: 130%; }

.commentEdit-wrap { vertical-align: top; width: 3rem; position: absolute; right: 0rem; top: 1.6rem; }
.commentEdit-wrap .commentEdit-btn { display: inline-block; color: #b0b3b8; border-radius: 4rem; width: 3rem; line-height: 3rem; height: 3rem; font-size: 1.8rem; }
.commentEdit-wrap .commentEdit-btn:hover { color: #3a3f44; }
.commentEdit-wrap .commentEdit { 
	display: none; position: absolute; top: calc(100% + 0.5rem); right: -1rem; z-index: 1; padding: 0.8rem; 
	border-radius: 0.5rem; background-color: #24272b; box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2),0 2px 4px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.2);
}
.commentEdit-wrap .commentEdit:before { 
	content: ''; display: block; width: 1rem; height: 1rem; position: absolute; top: 0; right: 1.5rem; background-color: #24272b; 
    transform: translate(-50%, -50%) rotate(-45deg); box-shadow: inset -1px 1px 1px rgba(255,255,255,0.2); 
}
@media (min-width: 1200px) { 
	.commentEdit-wrap .commentEdit { right: 50%; transform: translateX(50%); }
	.commentEdit-wrap .commentEdit:before { right: inherit; left: 50%; background-color: #24272b; transform: translate(-50%, -50%) rotate(-45deg); }
}
.commentEdit-wrap .commentEdit ul li { padding: 0; }
.commentEdit-wrap .commentEdit ul li button { color: #fff; font-size: 1.4rem; font-weight: 300; padding: 0.8rem 1rem; width: 10rem; text-align: left; border-radius: 0.3rem; }
.commentEdit-wrap .commentEdit ul li button:hover { background-color: #3a3f44; }

.comment-wrap ul li .commentModify .cancelModify { font-size: 1.2rem; padding: 0.3rem 0 0.2rem; color: #7e8995; font-weight: 300; }
.comment-wrap ul li .commentModify .cancelModify em { color: #4599ff; }
.comment-wrap ul li .commentModify .cancelModify:hover { text-decoration: underline; }

.commentAdd-btn * { display: inline-block; color: #7e8995; font-size: 1.4rem; vertical-align: middle; }
.commentAdd-btn em { font-size: 1.5rem; font-weight: 700; padding-right: 0.5rem;}
.commentAdd-btn i { font-size: 1.7rem; transform: translateY(2px); color: #367bc0; padding-left: 0.5rem; }
.commentAdd-btn:hover span { text-decoration: underline; }

.subComment-wrap { margin-top: 1.5rem; padding: 2rem 3rem; background-color: #f4f7f9; border-top: 1px solid #e7ecef; display: none;; }
.comment-wrap .subComment-wrap ul li:first-child .comment { padding-top: 0; }

.commentMore { padding-top: 1rem; }
.commentMore button { font-size: 1.5rem; font-weight: 400; }
.commentMore button em { font-size: 1.6rem; font-weight: 700; }
.commentMore button i { font-size: 1.7rem; transform: translateY(2px); color: #367bc0; }
.commentMore button:hover { text-decoration: underline; }


.writeContainer .dashedBottom { border-bottom: 1px dashed #ccc; padding-bottom: 1.2rem; margin-bottom: 0.8rem;  }
.writeContainer h4 { margin-bottom: 0.5rem; padding: 0; font-weight: 400; font-size: 1.6rem; }
.writeContainer h4 i { margin-right: 0.5rem; transform: translateY(1px); }
.writeTitle-wrap input { width: 100%; font-size: 1.5rem; border-radius: 0.5rem; border: 1px solid #ededed; padding: 1.2rem 1.5rem; }
.writeInsert-wrap { border-radius: 0.5rem; border: 1px solid #ededed; overflow: hidden; }
.writeInsert-wrap textarea { width: 100%; font-size: 1.5rem; padding: 1.2rem 1.5rem; border: 0; }
.writeContainer .boardFile .fileBtn a { padding: 0.7rem 4rem 0.7rem 1.2rem; position: relative; }
.writeContainer .boardFile .fileBtn a .removeFile { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.writeContainer .boardFile .fileBtn a .removeFile i { transform: rotate(0deg); font-size: 2rem; top: 0.1rem; margin: 0; width: 2.5rem; line-height: 2.5rem; height: 2.5rem; display: block; }
.writeContainer .boardFile .fileBtn a .removeFile:hover { background-color: #dd792b; }
.writeContainer .boardFile .fileBtn a .removeFile:hover i { color: #fff; }
.writeBtn { margin-bottom: 2rem; }

.writeContainer-row { margin-bottom: 20px; }
.writeContainer-row > .inner > li { border-bottom: 1px solid #efefef; }
.writeContainer-row > .inner > li:first-child { border-top: 0.3rem solid rgb(var(--basic-color-50)); }
.writeContainer-row > .inner > li > dl { padding: 10px 0 10px 0; position: relative; }
.writeContainer-row > .inner > li > dl dt { display: block; padding: 1rem 0.2rem 0; font-size: 16px; font-weight: 600; }
.writeContainer-row > .inner > li > dl dd > * { font-size: 15px; display: block; margin: 6px 0; }
.writeContainer-row > .inner > li > dl dd > input, 
.writeContainer-row > .inner > li > dl dd > span { display: inline-block; }
.writeContainer-row > .inner > li > dl dd > span { color: #888; }
.writeContainer-row > .inner > li > dl dd > input,
.writeContainer-row > .inner > li > dl dd > textarea { background-color: #f9f9f9; }


@media (min-width: 768px){
	.writeContainer-row > .inner > li > dl { padding: 10px 0 10px 200px; }
	.writeContainer-row > .inner > li > dl dt { position: absolute; left: 0; top: 16px; max-width: 160px; padding: 1rem 0; }
}

.faqCategory { border-top: 1px solid rgba(0,0,0,0.08); text-align: center; padding: 2rem 0 0;  margin: 2rem 0 0; overflow-x: auto; white-space: nowrap; }
.faqCategory ul { font-size: 0; text-align: center; }
.faqCategory li { display: inline-block; vertical-align: middle; }
.faqCategory li button { padding: 0 2rem; } 
.faqCategory li.sa_bar { width: 1px; height: 1rem; background-color: #aaa; padding: 0; }
.faqCategory .active button { color: #f5486f; }


.faqArea { border-top: 1px solid #333; border-bottom: 1px solid #333; }
.faqArea h3.faqQ { border-top: 1px solid #ccc; padding: 18px 20px; margin: 0; background-color: #fff; border: 0; }
.faqArea h3.ui-state-active { color: #333; }
.faqArea .faqQ img, .faqArea .faqA img { height: 30px; margin-right: 15px; }
.faqArea .faqQ em { font-weight: 600; margin-right: 10px; }
.faqArea .faqA { display: none; position:relative; padding: 30px 20px 30px 50px; background-color: #f8f8fb; font-size: 14px; border: 0; border-top: 1px solid #e8eaf1; }
.faqArea .faqA img { position: absolute; top:30px; left: 20px; }
.faqArea .faqQ .ui-icon { display: none; }


@media (max-width: 800px) {
	.boardContainer { padding-top: 0rem; }
	.insertContainer { padding: 2.5rem 0 6rem }
	
	.boardSearch { padding: 2rem 0; }
	
	.boardTab { float: none; text-align: center; margin-bottom: 1rem; }
	.boardSearch-right .searchContainer { float: none; }
	.boardSearch-right .searchContainer .pageSearch { width: 100%; }
	.boardTab li button { padding: 0; }
	.boardTab li button.active { color: #028b55; padding: 0.5rem 0; background-color: unset; }
	
	.basicBoard { border-top: 1px solid #333; }
	.basicBoard thead, .basicBoard colgroup { display: none; }
	.basicBoard { display: block; text-align: left; }
	.basicBoard tbody, .basicBoard tbody tr { display: block; }
	.basicBoard td.alignLeft { display: block; text-align: left; padding: 0; }
	.basicBoard td.alignLeft a { position: relative; }
	.basicBoard td.alignLeft a strong span { position: relative; top: 1px; }
	.basicBoard td.alignLeft a { display: block; padding: 1.3rem 0.5rem; }
	.basicBoard td.alignLeft a:hover { text-decoration: none; }
	.basicBoard td.alignLeft a .boardInfo { padding: 0.3rem 0 0; display: block; }
	.basicBoard td.alignLeft a .boardInfo em + em { padding-left: 0.5rem; } 
	.basicBoard td.alignLeft a .boardInfo * { font-size: 1.5rem; color: #999; font-weight: 300;  }
	
	
	.viewContainer > h3 { font-size: 2rem; }
	
	.pageArea { padding: 3rem 0rem 2rem; }
	
	.viewContainer{ padding: 1rem 0rem 0rem; }
	.boardFile .fileBtn li { padding: 0; float: none; width: 100%; }
	
	.insertBoard, .insertBoard * { display: block; width: 100%; }
	.insertBoard caption, .insertBoard colgroup { display: none; }
	.insertBoard th { text-align: left; padding: 0.8rem 1.5rem 0.5rem; }
	.insertBoard td { padding: 1rem 0; }
	.mobileNone { display: none !important; }
}

@media (min-width: 800px) {	
	.pcNone { display: none !important; }
	.boardFile .fileBtn { overflow: hidden; margin-left: -0.5rem; }
	.writeBtn { width: 12rem; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); margin-bottom: 0; }
	.writeBtn a { padding: 0; line-height: 4rem; }
}


@media (max-width: 600px) {
	.gridBoard .gridWrap.grid_3 > ul { margin-left: -1rem; }
	.gridBoard .gridWrap.grid_3 > ul > li { padding-left: 1rem; }
	.gridBoard .gridWrap.grid_3 > ul > li:nth-child( n + 3) { padding-top: 1rem; }
}

@media (max-width: 500px) {
	.gridBoard .gridWrap.grid_3 > ul { margin-left: 0rem; }
	.gridBoard .gridWrap.grid_3 > ul > li { padding-left: 0rem; width: 100%; }
	.gridBoard .gridWrap.grid_3 > ul > li:nth-child( n + 2) { padding-top: 1rem; }
}




/** video **/

.videoList-wrap > ul { margin: -2rem 0 0 -2rem; font-size: 0; }
.videoList-wrap > ul > li { padding: 2rem 0 0 2rem; }
.videoList-wrap button { border: 1px solid #dedede; border-radius: 0.3rem; overflow: hidden; display: block; width: 100%; }
.videoList-wrap .imgContainer-fit { padding-bottom: 56.25%; }
.videoList-wrap button dl { border-top: 1px solid #dedede; padding: 1.5rem; }
.videoList-wrap button dl dt { font-size: 1.6rem; }
.videoList-wrap button dl dd { font-size: 1.4rem; color: #ccc; margin-top: 1rem; }

@media (min-width: 720px){ 
	.videoList-wrap > ul > li { display: inline-block; vertical-align: middle; width: 50%; }
}

@media (min-width: 1150px){ 
	.videoList-wrap > ul > li { width: 33.33333%; }
}

.viewVideo-wrap { width: 100%; max-width: 900px; margin: 20px auto 30px; border-radius: 8px; background-color: #f0f0f0; padding: 10px; box-sizing: border-box; box-shadow: 0px 8px 15px #ccc; }
.viewVideo { position: relative; width: 100%; height: auto; padding-top: 56.25%; }
.viewVideo iframe,
.viewVideo object,
.viewVideo embed { z-index: 1; top: 0; left: 0; position: absolute; width: 100%; height: 100%; }	
.viewVideo .video-js .vjs-big-play-button .vjs-icon-placeholder:before { top: 50% !important; transform: translateY(-40%); }	

/** video end **/



/** webzine **/

.boardContainer-webzine { border-top: 1px solid #303030; }
.boardContainer-webzine > li { border-bottom: 1px solid #dedede; }
.boardContainer-webzine > li > a { display: table; width: 100%; table-layout: fixed; padding: 2.8rem 0; } 
.boardContainer-webzine > li > a > * { display: table-cell; vertical-align: middle; }
.boardContainer-webzine > li > a .webzineList-img { width: 13rem; padding-right: 2rem;  }
.boardContainer-webzine > li > a .webzineList-img .imgContainer-fit { padding-bottom: 70%; border-radius: 1rem; overflow: hidden; }
.boardContainer-webzine > li > a .webzineList-img .imgContainer-fit img { transition-duration: 0.2s; transition-timing-function: ease; }
.boardContainer-webzine > li > a .webzineList-text { font-size: 2rem; padding-top: 0.5rem; }

.webzineList-text strong { display: block; margin-bottom: 1rem; }
.webzineList-text em { font-size: 1.5rem; color: #888;  }

.webzineList-info { display: block; margin-top: 2rem; } 
.webzineList-info * { line-height: 1.5rem; color: #aaa; font-size: 1.5rem; }
.webzineList-info em { margin-right: 1.5rem; }
.webzineList-info em:last-child { margin-right: 0; }

.boardContainer-webzine > li > a:hover { background: linear-gradient(to right, rgba(222,222,222,0) 0%,rgba(222,222,222,0.2) 10%,rgba(222,222,222,0.2) 90%,rgba(222,222,222,0) 100%);  }
.boardContainer-webzine > li > a:hover .webzineList-img .imgContainer-fit img { transform: scale(1.1); }


@media (min-width: 720px){ 
	.boardContainer-webzine > li > a .webzineList-img { width: 20rem; }
}

@media (min-width: 1150px){ 
	.boardContainer-webzine > li > a .webzineList-img { width: 22rem; }
}

/** webzine end **/


/** galleryBox **/

.galleryBox-wrap { margin: auto; max-width: 42rem; }
.galleryBox-wrap ul { display: flex; flex-wrap: wrap; gap: 2rem 0; margin-left: -2rem;  }
.galleryBox-wrap ul li { width: 100%; padding-left: 2rem; }

.galleryBox { position: relative; border-radius: var(--radius-m); box-shadow: 0 2px 10px rgb(0 0 0 / 10%); overflow: hidden;  height: 100%;  }
.galleryBox .galleryBox-img { position: relative;  }
.galleryBox .galleryBox-img .imgContainer-fit { padding-bottom: 56.25%; border-radius: 1rem; overflow: hidden; border-bottom: 1px solid #dedede; }
.galleryBox-play .galleryBox-img:before { 
	content: ''; display: block; width: 7rem; height: 7rem;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
	background-image: url("/style_www/img/common/icon/play.png"); background-repeat: no-repeat; background-size: 100%; z-index: 10;
}
.galleryBox dl { padding: 1.2rem 3.2rem 5rem; color: #333;}
.galleryBox dt { font-size: 1.8rem; font-weight: 600;  }
.galleryBox dd.galleryBox-text { font-size: 1.5rem; line-height: 1.5; margin-top: 1.8rem; }
.galleryBox dd.galleryBox-text * { word-break: break-all; }
.galleryBox dd.galleryBox-date { opacity: 0.7; position: absolute; left: 3.2rem; bottom: 2rem; color: rgb(var(--basic-color-70)); }
.galleryBox dd.galleryBox-date > * { display: inline-block; vertical-align: middle; margin-right: 0.5rem; font-size: 1.4rem; }

.galleryBox-onlyText.galleryBox dl { padding-top: 3.2rem; }

.galleryBox a, .galleryBox:after { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }


@media (min-width: 980px){ 
	.galleryBox-wrap { max-width: 86rem; }
	.galleryBox-wrap ul { gap: 3rem 0; margin-left: -3rem;  }
	.galleryBox-wrap ul li { width: 50%; padding-left: 3rem; }
}
@media (min-width: 1360px){ 
	.galleryBox-wrap { max-width: 100%; }
	.galleryBox-wrap ul li { width: 33.333333%; }
}


/** galleryBox end **/



/** commentBoard-wrap **/

.category-container { position: relative; display: flex; align-items: center; width: 100%; margin-top: 2rem; }
.category-wrap { 
	overflow-x: auto; scroll-behavior: smooth; flex: 1;
	-ms-overflow-style: none;  /* IE, Edge */  scrollbar-width: none;     /* Firefox */
}
.category-wrap::-webkit-scrollbar { display: none; /* Chrome, Safari */ }
.category-list { display: flex; gap: 0.8rem; margin: 0; list-style: none; white-space: nowrap; }
.category-list li { padding: 0.8rem 1.7rem; border: 1px solid #ddd; border-radius: 3rem; cursor: pointer; user-select: none; flex-shrink: 0; }

.category-list li.active { background: #000; color: #fff; }
.category-list li.active * { color: #fff; }

.cat-arrow { display: none; background: #fff; border: 1px solid #ddd; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; flex-shrink: 0; }

.commentBoard-guide-wrap { padding-top: 1.5rem; padding-bottom: 2rem; }
.commentBoard-guide { background-color: rgba(var(--yellow-color-10),0.7); border: 1px solid rgb(var(--yellow-color-20)); border-radius: var(--radius-s); padding: var(--padding-m) var(--padding-l); }
.commentBoard-guide h4 { display: flex; align-items: center; gap: 0.3rem; }
.commentBoard-guide h4 > * { display: block; }
.commentBoard-guide h4 i { font-size: 1.9rem; }
.commentBoard-guide h4 span { font-size: 1.7rem; }
.commentBoard-guide ul { margin-top: 0.8rem; }
.commentBoard-guide ul li { font-size: 1.5rem; font-size: clamp(1.3rem, 2vw, 1.5rem);  position: relative; padding-left: 1rem; }
.commentBoard-guide ul li:before { content: ''; display: block; width: 0.3rem; height: 0.3rem; position: absolute; left: 0; top: 0.9rem; background-color: rgb(var(--yellow-color-70)); }
@media (min-width: 1024px){ .commentBoard-guide-wrap { padding-top: 2rem; padding-bottom: 2rem; } }


.commentBoard-info { display: flex; justify-content: space-between; align-items: flex-end; font-size: 1.5rem; margin-bottom: 1rem; padding: 0 0.2rem;}
.commentBoard-info > span { color: rgb(var(--gray-color-70)); }
.commentBoard-info > .customSelect { width: inherit; padding-right: 2rem; display: flex; align-items: center; border: 0; }
.commentBoard-info > .customSelect:before { right: 0; }
.commentBoard-info > .customSelect > i { padding: 0.1rem 0.1rem 0 0; color: rgb(var(--gray-color-70)); }
.commentBoard-info > .customSelect > label { padding: 0; }

.commentBoard-item { display: block; border: 1px solid rgba(var(--gray-color-30),0.9); box-shadow: 0.5rem 0.5rem 1rem rgba(var(--gray-color-40),0.2); border-radius: var(--radius-s); padding: var(--padding-xl); }
.commentBoard-item:hover { box-shadow: 0.5rem 0.5rem 1.5rem rgba(var(--gray-color-40),0.4); }
.commentBoard-item + .commentBoard-item { margin-top: 2rem; }

.commentBoard-item-start { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.commentBoard-icon { display: flex; flex-wrap: wrap; gap: 1rem; }
.commentBoard-icon > * { font-size: 1.4rem; padding: 0.4rem 0.8rem; display: flex; align-items: center; gap: 0.5rem; background-color: rgba(var(--gray-color-10),0.5); color: var(--gray-color-50); border-radius: 0.5rem; }
.commentBoard-icon > .hot-icon { color: rgb(var(--red-color-70)); background-color: rgba(var(--red-color-10),0.5); }
.commentBoard-icon > .cat-icon { color: rgb(var(--blue-color-70)); background-color: rgba(var(--blue-color-10),0.5); }
.commentBoard-icon > .poll-icon { color: rgb(var(--green-color-70)); background-color: rgba(var(--green-color-10),0.5); }
.commentBoard-date { color: rgb(var(--gray-color-60)); }

.commentBoard-item > .inner > h3 { font-size: 2rem; margin-bottom: 0.6rem; }
.commentBoard-item > .inner > p { font-size: 1.6rem; color: rgb(var(--gray-color-80)); margin-bottom: 1rem; }

.commentBoard-item-poll { padding: var(--padding-xs); border: 1px solid rgb(var(--gray-color-20)); background-color: rgba(var(--gray-color-10),0.5); border-radius: var(--radius-xs); margin-bottom: 1rem; }
.commentBoard-item-poll-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.commentBoard-item-poll-title > * { display: block; }
.commentBoard-item-poll-title i { color: rgb(var(--green-color-50)); }
.commentBoard-item-poll-title span { font-size: 1.6rem; font-weight: 500; }
.commentBoard-item-poll-info { font-size: 1.5rem; color: rgb(var(--gray-color-80)); }
.commentBoard-item-poll-info i { font-weight: 500; font-size: 1.5rem; }
i.progress-poll { color: rgb(var(--green-color-50)); }
i.closed-poll { color: rgb(var(--gray-color-50)); }
i.preparation-poll { color: rgb(var(--blue-color-50)); }

.commentBoard-item-info { display: flex; gap: 1.5rem; font-size: 1.5rem; color: rgb(var(--gray-color-70)); }
.commentBoard-item-info > * { display: flex; align-items: center; gap: 0.5rem; }

.commentBoard-info-right { display: flex; gap: 0.5rem; }
.commentBoard-info-right .initialBtn { border-radius: var(--radius-xs); padding-left: 1.2rem; padding-right: 1.2rem; }
/* .commentBoard-info-right a.initialBtn { color: rgb(var(--basic-color-50)); border-color: rgb(var(--basic-color-50)); } */

.comment-admin { background-color: rgba(var(--blue-color-5),1) !important; position: relative; border-left-color: rgb(var(--blue-color-50)) !important; border-left-width: 2px !important;  }
.comment-admin.reply-box:before { content: ''; display: block; width: 2px; height: 100%; position: absolute; left: -2px; top: 0; background-color: rgb(var(--blue-color-50));  border-radius: 0; }

/* write */

.writeContainer-box { border: 1px solid rgb(var(--gray-color-20)); box-shadow: 0.5rem 0.5rem 1rem rgba(var(--gray-color-40), 0.2); border-radius: var(--radius-s); padding: var(--padding-xl); }
.writeContainer-box .writeContainer-insert > .inner { margin-bottom: 1.5rem; }
.writeContainer-box .writeContainer-insert > .inner * { font-size: 1.6rem; }
.writeContainer-box .writeContainer-insert > .inner input,
.writeContainer-box .writeContainer-insert > .inner .customSelect { border-radius: var(--radius-xs); }
.writeContainer-box .writeContainer-insert > .inner .customSelect > label { padding: 0.9rem 1rem; }

.writeContainer-box .writeContainer-insert > .inner > li + li { margin-top: 1.5rem; } 
.writeContainer-box .writeContainer-insert > .inner dl > * { display: block; }
.writeContainer-box .writeContainer-insert > .inner dl dt { font-size: 1.4rem; margin-bottom: 0.5rem; }
.writeContainer-box .writeContainer-insert > .inner dl dt i { font-size: 2rem; }
.writeContainer-box .writeContainer-insert > .inner .warningText { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.3rem; }
.writeContainer-box .writeContainer-insert > .inner .warningText * { font-size: 1.4rem; color: rgb(var(--gray-color-60)) }



/* view */

.viewContainer-box:first-child { margin-top: 1.5rem; }
@media (min-width: 1024px){ .viewContainer-box:first-child { margin-top: 2rem; } }
.viewContainer-box { background-color: #fff; border: 1px solid rgba(var(--gray-color-30),1); box-shadow: 0.5rem 0.5rem 1rem rgba(var(--gray-color-40), 0.3); border-radius: var(--radius-s); padding: var(--padding-xl); }
.viewContainer-box + .viewContainer-box { margin-top: 2rem; }

.viewContainer-box-start { margin-bottom: 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; }
.viewContainer-box-start .likeBtn { cursor: pointer; }
.viewContainer-box-start .commentBoard-more { position: relative; display: inline-block; }
.viewContainer-box-start .commentBoard-more-btn { border-radius: 0.5rem; padding: 1rem; }
.viewContainer-box-start .commentBoard-edit {
	position: absolute; top: 100%; right: 0; background: #fff;
	min-width: 8rem; border: 1px solid #ccc; border-radius: 5px;
	margin-top: 5px; width: 100%; display: none; z-index: 100;	
}
.viewContainer-box-start .commentBoard-edit .initialBtn { border: 0; display: flex; gap: 0.5rem; justify-content: center; font-size: 1.5rem; }
.viewContainer-box-start .commentBoard-edit .initialBtn + .initialBtn { border-top: 1px solid rgb(var(--gray-color-30)); }

.viewContainer-box-title h2 { display: block; font-size: clamp(1.8rem, 7vw, 2.5rem); margin-bottom: 1.8rem; }  
.viewContainer-box-info { margin-bottom: 1.5rem; }
.viewContainer-box-content { font-size: 1.6rem; border-top: 1px solid rgb(var(--gray-color-20)); padding-top: var(--padding-xl); }
.viewContainer-box-content img { max-width: 100% !important; }

.editBtn { color: rgb(var(--blue-color-50)); border-color: rgb(var(--blue-color-30)); }
.initialBtn.likeBtn { color: rgb(var(--red-color-50)); border-color: rgb(var(--red-color-30));}
.warningBtn { color: rgb(var(--purple-color-50)); border-color: rgb(var(--purple-color-30)); }





/* filter */

.filter-wrap { position: relative; display: inline-block; }
.filter-btn i { font-size: 1.8rem; color: #555; }
.filter {
	position: absolute; top: 100%; right: 0; background: #fff;
	min-width: 15rem; border: 1px solid #ccc; border-radius: 5px;
	margin-top: 5px; width: 100%; display: none; z-index: 100;
}
.filter div { padding: 1rem 1.2rem; cursor: pointer; font-size: 1.4rem; }
.filter div:hover { background: #f0f0f0; }
.filter .selected { color: rgb(var(--basic-color-50)); }
.filter .selected:after { content: "\eb7b"; font-weight: bold; float: right; color: rgb(var(--basic-color-50)); font-family: 'remixicon' !important; }


/* poll */

.poll-wrap { margin-bottom: 2rem; }

.pollAdd-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; background-color: rgba(var(--green-color-10),0.5); padding: var(--padding-m) var(--padding-xl); border-radius: var(--radius-s); }
.pollAdd-wrap dl dt { display: flex; align-items: center; gap: 0.5rem; }
.pollAdd-wrap dl dt i { color: rgb(var(--green-color-70));  }
.pollAdd-wrap dl dt span { font-size: 1.6rem; }
.pollAdd-wrap dl dd { font-size: 1.5rem; color: rgb(var(--gray-color-70)); margin-top: 0.5rem; }
.pollAdd-wrap .switchCheckbox input[type="checkbox"]:checked ~ label i { background-color: rgb(var(--green-color-50)); }

.viewContainer-box-poll  { 
	border: 1px solid #ddd; ; border-radius: var(--radius-s); 
	padding: 0; background-color: #f7f9fa; overflow: hidden;
}

.viewContainer-box-poll .pollList-wrap { 
	max-width: 80rem; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);  
	padding: var(--padding-xl) var(--padding-xl) var(--padding-l); margin-left: auto; margin-right: auto;
}

input[type='text'].poll-title { width: 100%; padding: 1rem; border-radius: var(--radius-xs); font-size: 1.6rem; margin-bottom: 1.2rem; }
.poll-item { display: flex; align-items: center; margin-bottom: 0.8rem; position: relative; gap: 0.5rem; }
.poll-item input[type="text"] { flex: 1; padding: 1rem; border-radius: var(--radius-xs); font-size: 1.6rem; }
.poll-item .img-upload { width: 4.3rem; height: 4.3rem; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-xs); }
.poll-item .img-upload i { color: rgb(var(--gray-color-60)); }
.poll-item .img-preview { width: 4.3rem; height: 4.3rem; position: relative; margin-left: 5px; }
.poll-item .img-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.poll-item .img-preview .remove-img { 
	position: absolute; top: -5px; right: -5px; background: #333; color: #fff; border-radius: 50%; 
	width: 18px; height: 18px; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; 
}
.poll-item .remove-item { color: rgb(var(--red-color-50)); font-weight: bold; margin-left: 5px; cursor: pointer; display: none; }

.poll-add-btn { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.5rem; border-color: rgb(var(--gray-color-30)); background-color: rgb(var(--gray-color-10));  padding: calc(var(--padding-xs) + 0.2rem) var(--padding-l); border-radius: var(--radius-xs); }
.poll-add-btn i { color: rgb(var(--green-color-50)); font-size: 2rem; }

.poll-end-set { margin-bottom: 1.5rem; }
.poll-end-set label { display: block; font-size: 1.4rem; margin-bottom: 0.5rem; }
.poll-end-set label i { font-size: 2rem; }
.poll-end-set input[type="date"] { width: 100%; padding: 1rem; border-radius: var(--radius-xs); font-size: 1.6rem; }

.poll-multi .customCheckbox label i { border-color: rgb(var(--green-color-50)); }
.poll-multi .customCheckbox input[type="checkbox"]:checked ~ label i { background-color: rgb(var(--green-color-50)); }


.pollEnd-dete { 
	display: flex; align-items: center; font-size: 1.6rem; gap: 0.5rem; margin-bottom: 2rem;
	color: rgb(var(--green-color-70)); background-color: rgba(var(--green-color-10), 0.5); padding: var(--padding-m); border-radius: var(--radius-s); 
}
.pollEnd-dete i { font-size: 2rem; }

.pollList-title { font-weight: 500; font-size: 1.8rem; font-size: clamp(1.7rem, 4vw, 1.9rem); margin-bottom: 1.8rem; }

.pollList-img-wrap .mfp-content > * { padding: 0; background-color: transparent; }
.pollList { margin-bottom: 1rem; }
.pollList li { padding: 0.6rem 0; }
.pollList li + li { border-top: 1px solid rgb(var(--gray-color-20)); } 
.pollList .inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.pollList-basic { display: flex; flex: 1; flex-wrap: wrap; align-items: center; min-height: 4.5rem; max-width: calc(100% - 6rem); }
.pollList-basic .customCheckbox label { align-items: flex-start; }
.pollList-basic .customCheckbox label i { border-radius: 50%; border: 2px solid rgb(var(--green-color-50)); margin-top: 0.25rem; }
.pollList-basic .customCheckbox input[type="checkbox"]:checked ~ label i { background-color: rgb(var(--green-color-50)); }
.pollList-basic .customCheckbox input[type="checkbox"]:checked ~ label i:before { border-radius: 50%;}
.pollList-basic .customCheckbox label span { font-size: 1.6rem; line-height: 1.4; flex: 1; padding-left: 0.8rem; }
.pollList-basic .pollCurrent { width: 100%; display: flex; align-items: flex-end; }
.pollList-basic .pollCurrent-text { display: block; font-size: 1.4rem; width: 100%; color: rgb(var(--gray-color-60)); margin-top: 0.3rem; padding-left: 2.5rem; }

.pollList-img { width: 4.5rem; } 

.pollCurrent { margin-top: 0.8rem; }
.pollCurrent-bar { position: relative; width: 100%; height: 0.8rem; border-radius: 1rem; overflow: hidden; background-color: rgb(var(--gray-color-30));} 
.pollCurrent-bar .inner { background: #4caf50; height: 100%; border-radius: 1rem; transition: width 0.4s; width: 0px; }

.pollVoting-btn { margin-bottom: 1rem; }
.pollVoting-btn .initialBtn { font-size: 1.6rem; border-radius: var(--radius-xs); padding: 1.2rem 0.8rem; }

.pollList-info { font-size: 1.5rem; color: rgb(var(--gray-color-80)); }
.pollList-info i { font-weight: 500; font-size: 1.5rem; }

@media (min-width: 1024px){ 
	.pollList-bottom { display: flex; align-items: center; justify-content: space-between; flex-flow: row-reverse; }  
	.pollList-bottom .pollVoting-btn { width: 20rem; }
}

@media (max-width: 720px){ 
	.bottomContent-comment-board .bottomContent { flex-flow: column; }
	.bottomContent-comment-board .bottomContent .buttonGroup + .buttonGroup { padding-top: 1rem; border-top: 1px solid rgb(var(--gray-color-20));  }
	.bottomContent-comment-board .bottomContent .buttonGroup + .buttonGroup > .initialBtn { max-width: initial; }
}

	
/* comment */	
	
.viewContainer-box-comment h3 { font-size: 2rem; display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.5rem; }
.viewContainer-box-comment .comment-box { background: #fdfcff; border: 1px solid #ddd; border-radius: var(--radius-xs); padding: var(--padding-m); }
.comment-actions-more i { font-size: 0; }
.comment-actions-more i:before { font-size: 2rem; }

.comment-list + .comment-list { margin-top: 1.5rem; }
.comment-box { position: relative; }
.comment-actions-wrap { position: absolute; right: 0.8rem; top: var(--padding-m); }
.comment-actions-more { color: rgb(var(--gray-color-60)); }
.comment-actions {
	display: none; position: absolute; top: 100%; right: 0; background: #fff;
	min-width: 8rem; border: 1px solid #ccc; border-radius: 5px;
	margin-top: 5px; width: 100%; display: none; z-index: 100;	
}
.comment-actions .initialBtn { border: 0; display: flex; gap: 0.5rem; justify-content: center; font-size: 1.4rem; }
.comment-actions .initialBtn + .initialBtn { border-top: 1px solid rgb(var(--gray-color-30)); }

.comment-form { margin-bottom: 1.5rem; }
.comment-form .comment-user, .reply-form .comment-user, .edit-form .comment-user { margin-bottom: 0.8rem; display: flex; gap: 0.6rem; }
.comment-form .comment-user > input, .reply-form .comment-user > input, .edit-form .comment-user > input { border-radius: var(--radius-xs); font-size: 1.6rem; max-width: calc(50% - 0.3rem); }
.comment-form .comment-insert, .reply-form .comment-insert, .edit-form .comment-insert { margin-bottom: 0.8rem; }
.comment-form .comment-insert textarea, .reply-form .comment-insert textarea, .edit-form .comment-insert textarea { width: 100%; border-radius: var(--radius-xs); font-size: 1.6rem; }

.comment-btn-group { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; }
.commentSave-btn, .btn-reply-cancel, .commentEdit-cancel-btn { border-radius: var(--radius-xs); font-size: 1.4rem; }
.commentSave-btn { color: #fff;  background-color: rgb(var(--basic-color-50)); border-color: rgb(var(--basic-color-60)); width: 10.5rem; }
.commentSave-btn:hover { background-color: rgb(var(--basic-color-60)); }
.btn-reply-cancel, .commentEdit-cancel-btn { width: 7rem; }

.comment-header { font-size: 1.4rem; color: #888; margin-bottom: 0.8rem; font-weight: 500; }
.comment-body { font-size: 1.6rem; margin-bottom: 1.2rem; }
.reply-toggle { font-size: 1.4rem; font-weight: 500; color: rgb(var(--gray-color-80)); }

.reply-list { margin-left: 2rem; margin-top: 1rem; border-left: 2px solid #eee; }
.reply-box { position: relative;   padding: var(--padding-m); }
.reply-box .comment-body { margin-bottom: 0; }



.popup-modal-wrap .mfp-content > * { max-width: 40rem; border-radius: var(--radius-s); }
.popup-modal-header { display: flex; gap: 0.5rem; align-items: center;  justify-content: flex-start; margin-bottom: 1.5rem; }
.popup-modal-header > i { color: rgb(var(--gray-color-80)); font-size: 2.2rem; }
.popup-modal-header h4 { font-size: 1.8rem; }
.popup-modal-header p { font-size: 1.5rem; color: rgb(var(--gray-color-70)); padding-top: 0.3rem; }

.popup-modal-body { margin-bottom: 1.5rem; }
.popup-modal-body > * + * { margin-top: 0.8rem; }
.popup-modal-body input { border-radius: var(--radius-xs); width: 100%; font-size: 1.5rem; }
.popup-modal-body select { border-radius: var(--radius-xs); width: 100%; font-size: 1.5rem; }
.popup-modal-body textarea { border-radius: var(--radius-xs); width: 100%; font-size: 1.5rem; }

.popup-modal-btn { display: flex; justify-content: flex-end; gap: 0.6rem; }  
.popup-modal-btn .initialBtn { border-radius: var(--radius-xs); width: 10rem; font-size: 1.5rem; }
.popup-modal-btn .deleteBtn { color: #fff; background-color: rgb(var(--gray-color-80)); border-color:  rgb(var(--gray-color-90)); }
.popup-modal-btn .deleteBtn:hover { background-color: rgb(var(--gray-color-90)); }

#warning-report-modal .commentBoard-guide-wrap { padding: 0; }
#warning-report-modal .commentBoard-guide-wrap .commentBoard-guide h4 span { font-size: 1.6rem; }

.popup-modal-wrap .mfp-content > #warning-report-modal { max-width: 60rem; }
.popup-modal-wrap .mfp-content > #warning-report-modal .popup-modal-header > i { padding-bottom: 0.5rem; }
.popup-modal-wrap .mfp-content > #warning-report-modal .warningBtn { color: #fff; background-color: rgb(var(--purple-color-50)); border-color:  rgb(var(--purple-color-60)); }
.popup-modal-wrap .mfp-content > #warning-report-modal .warningBtn:hover { background-color: rgb(var(--purple-color-60)); }

.poll-error-message {
  font-weight: bold;
  color: red;
  margin-left: 10px;
}

/** commentBoard-wrap end **/