@charset "utf-8"; 

/*
 * --------------------------------------------------------------------------
 * descript : 게시판 테마
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

 
/* --------------------------------------------------------------------------
   검색
   -------------------------------------------------------------------------- */
.search-box{width:640px; height:45px; margin:0 auto 25px auto;}
.search-box select, .search-box input, .search-box button{float:left; box-sizing:border-box; display:inline-block; height:45px; line-height:45px; font-size:16px;}
.search-box input[type="text"]{width:calc(70% - 10px); margin:0 5px; border:1px solid #cfd1d4; text-align:left; padding:0 10px; background:url(/assets/img/common/theme/search.png) no-repeat 98% center; background-size:20px;}
.search-box button{width:15%; background:#1d1d1d; color:#fff; font-weight:700; cursor:pointer;}
.search-box select{width:15%; border:1px solid #cfd1d4; cursor:pointer; padding:0 10px; background-color:#fff;}

@media(max-width:640px){
	.search-box{width:100%;}
	.search-box input{width:calc(50% - 10px) !important;}
	.search-box button{width:25%;}
	.search-box select{width:25%;}
}



/**********************************************************************
* Descript : 공지사항 게시판 리스트 스타일
***********************************************************************/
.board-notice-list{width:100%;}
.board-notice-list ul{}
.board-notice-list ul li{position:relative; width:100%;}
.board-notice-list ul li:first-child{border-top:2px solid #222;}
.board-notice-list ul li.no-data{text-align:center; color:#aaa; font-size:15px; padding:50px 0;border-bottom:1px solid #e0e0e0;}

.board-notice-list ul li em.notice{display:inline-block; width:100%; height:30px; line-height:30px; background:#fa6d0f; color:#fff; text-align:center; border-radius:20px; font-size:12px;font-weight:700;}

.board-notice-list ul li a.subject{display:block; height:50px; line-height:50px; border-bottom:1px solid #e0e0e0; font-size:15px; width:100%; padding:0 180px 0 80px; text-align:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing:border-box;}

.board-notice-list ul li a.notice{color:#222;}

.board-notice-list ul li span.num,
.board-notice-list ul li span.date,
.board-notice-list ul li span.hit{position:absolute; display:inline-block; min-width:70px; box-sizing:border-box; padding:0 10px; height:50px; line-height:50px; text-align:center;}
.board-notice-list ul li em.name{position:absolute;display:inline-block; min-width:70px; box-sizing:border-box; padding:0 200px; height:50px; line-height:50px; text-align:center;}

.board-notice-list ul li span.num{left:0; top:0; text-align:center;}
.board-notice-list ul li span.date{right:70px; top:0; width:100px; font-size:13px;}
.board-notice-list ul li span.date::before{position:absolute; display:inline-block; content:''; width:4px; height:20px; border-radius:4px; background:#e0e0e0; top:50%; right:-10px; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%)}
.board-notice-list ul li span.hit{text-align:center; right:0; top:0; font-size:13px;}
.board-notice-list ul li em.name{text-align:center; right:0; top:0px; font-size:13px;}
.board-notice-list ul li em.name::before{position:absolute; display:inline-block; content:''; width:4px; height:20px; border-radius:4px; background:#e0e0e0; top:50%; right:170px; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%)}


@media (max-width:640px){
	.search-box{width:100%;}

	.board-notice-list ul li span.num{display:none;}
	.board-notice-list ul li a.subject{padding:0 100px 0 10px; font-size:13px;}

	.board-notice-list ul li span.date{right:0; top:0;}
	.board-notice-list ul li span.date::before,
	.board-notice-list ul li span.hit{display:none;}
	.board-notice-list ul li em.name{display:none;}
}
/**********************************************************************/



/**********************************************************************
* Descript : 공지사항 게시판 리스트 스타일
***********************************************************************/
.board-notice-view{width:100%;}
.board-notice-view ul{}
.board-notice-view ul li{display:inline-block; width:100%; line-height:35px; padding:10px 0; border-bottom:1px solid #e0e0e0;}
.board-notice-view ul li:first-child{border-top:2px solid #222;}
.board-notice-view ul li.attachment{width:100%; word-wrap: break-word;word-break: keep-all;}

.board-notice-view ul li.attachment span{font-size:12px;}
.board-notice-view ul li.con{font-size:1em; line-height:1.8em; padding:25px 0;}
.board-notice-view ul li.con img{max-width:100%;}
.board-notice-view ul li i.num, .board-notice-view ul li a.subject, .board-notice-view ul li span.date, .board-notice-view ul li i.hit{display:inline-block; text-align:center; float:left;}
.board-notice-view ul li i.num{width:15%;}
.board-notice-view ul li span.notice{background:#fa6d0f; color:#fff; text-align:center; border-radius:20px; font-size:12px; font-weight:700;}
.board-notice-view ul li p.subject{width:100%; text-align:left; box-sizing:border-box; font-weight:700; line-height:1.6em; font-size:1.2em;}
.board-notice-view ul li a.notice{color:#222; font-weight:700;}
.board-notice-view ul li span.date{position:relative; padding:0 15px 0 0;}
.board-notice-view ul li span.date::before{position:absolute; display:inline-block; content:''; width:4px; height:15px; border-radius:4px; background:#e0e0e0; top:11px; right:0;}
.board-notice-view ul li span.hit{ padding:0 15px;}


/**********************************************************************
* Descript : youtube 게시판 리스트 스타일
***********************************************************************/
.board-youtube-view{width:100%}
.board-youtube-view ul{}
.board-youtube-view ul li{display:inline-block; width:100%; line-height:35px; padding:10px 0; border-bottom:1px solid #e0e0e0;}
.board-youtube-view ul li:first-child{border-top:2px solid #222;}
.board-youtube-view ul li.attachment{width:100%; word-wrap: break-word;word-break: keep-all;}

.board-youtube-view ul li.attachment span{font-size:12px;}
.board-youtube-view ul li.con{font-size:1em; line-height:1.8em; padding:25px 0;}
.board-youtube-view ul li.con img{max-width:100%;}
.board-youtube-view ul li i.num, .board-notice-view ul li a.subject, .board-notice-view ul li span.date, .board-notice-view ul li i.hit{display:inline-block; text-align:center; float:left;}
.board-youtube-view ul li i.num{width:15%;}
.board-youtube-view ul li span.notice{background:#fa6d0f; color:#fff; text-align:center; border-radius:20px; font-size:12px; font-weight:700;}
.board-youtube-view ul li p.subject{width:100%; text-align:left; box-sizing:border-box; font-weight:700; line-height:1.6em; font-size:1.2em;}
.board-youtube-view ul li a.notice{color:#222; font-weight:700;}
.board-youtube-view ul li span.date{position:relative; padding:0 15px 0 0;}
.board-youtube-view ul li span.date::before{position:absolute; display:inline-block; content:''; width:4px; height:15px; border-radius:4px; background:#e0e0e0; top:11px; right:0;}
.board-youtube-view ul li span.hit{ padding:0 15px;}
.board-youtube-view ul li.con iframe{width:760px;height:580px}

@media(max-width:420px){
.board-youtube-view ul li.con iframe{width:375px;height:280px}
}

/**********************************************************************/



/**********************************************************************
* Descript : 게시판 뷰 이전 및 다음글 리스트 스타일
***********************************************************************/
.prev-next-list{}
.prev-next-list li{width:100%; height:45px; line-height:45px; border-bottom:1px solid #eee;}
.prev-next-list li > b, .prev-next-list li a{display:inline-block; float:left; box-sizing:border-box; padding:0 10px; font-size:1em;}
.prev-next-list li > b{width:15%; background:#fafafa; font-weight:700;}
.prev-next-list li a{width:85%; color:#111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


@media (max-width:640px){
	.prev-next-list li > b{width:25%;}
	.prev-next-list li a{width:75%;}
}

/**********************************************************************/








/* --------------------------------------------------------------------------
   온라인 상담
   -------------------------------------------------------------------------- */
.inquire{margin:50px 0 100px 0;}

/* 리스트 */
.board-counsel-list{width:100%; border-top:2px solid #222;}
.board-counsel-list ul li{position:relative;}
.board-counsel-list ul li.empty{text-align:center; padding:50px 0; border-bottom:1px solid #eee;}
.board-counsel-list ul li a{display:block; padding:15px; border-bottom:1px solid #cfd1d4; color:#222; font-size:15px;}
.board-counsel-list ul li a:hover{text-decoration:none;}
.board-counsel-list ul li a b{position:relative; display:block;  padding:5px 100px 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.board-counsel-list ul li a b i.notice{left:0; top:0; display:inline-block; padding:5px 10px; background:#2ab3bc; color:#fff; font-size:11px; font-weight:700;}
.board-counsel-list ul li a i.name{font-size:12px; color:#aaa;}
.board-counsel-list ul li a i.date{font-size:12px; color:#aaa;}

.board-counsel-list ul li a span.line{display:inline-block; font-size:10px; color:#ccc; padding:0 10px; vertical-align:2px;}
.board-counsel-list ul li div.answer{ position:absolute; top:50%; right:10px; transform:translate(0, -50%);}
.board-counsel-list ul li div.answer span.state{display:inline-block; padding:10px 20px; color:#fff; border-radius:25px; font-size:13px; font-weight:400; background:#cbcbcb;}
.board-counsel-list ul li div.answer span.state[data-name="상담완료"]{background:#ff7e00; }




/* 뷰 */
.board-counsel-view{width:100%; border-top:2px solid #858585;}
.board-counsel-view ul li{position:relative;}

.board-counsel-view ul li div.title{padding:15px; border-bottom:1px solid #cfd1d4; color:#222; background:#eee; font-size:1em; line-height:1.5em; font-weight:700;}
.board-counsel-view ul li .info{position:relative;  padding:20px 15px; border-bottom:1px solid #cfd1d4;}

.board-counsel-view ul li .info span.state{position:absolute; display:inline-block; top:50%; right:10px; transform:translate(0, -50%); padding:10px 20px; color:#fff; border-radius:25px; font-size:13px; font-weight:400; background:#cbcbcb;}
.board-counsel-view ul li .info span.state[data-name="상담완료"]{background:#ff7e00; }

.board-counsel-view ul li .info i.notice{left:0; top:0; display:inline-block; padding:5px 10px; background:#005d99; color:#fff; font-size:11px; font-weight:700;}
.board-counsel-view ul li .info i.name{font-size:12px; color:#777;}
.board-counsel-view ul li .info i.date{font-size:12px; color:#777;}
.board-counsel-view ul li .info i.hit{font-size:12px; color:#777;}
.board-counsel-view ul li .info span.line{display:inline-block; font-size:10px; color:#ccc; padding:0 10px; vertical-align:2px;}


.board-counsel-view ul li.con{padding:15px; border-bottom:1px solid #cfd1d4; font-size:1em; line-height:1.5em;}



.board-counsel-content{padding:15px; font-size:1em; line-height:1.5em; border-bottom:1px solid #eee;}

.board-counsel-reply{padding:25px; background:#f4f4f4; border-top:1px solid #cfd1d4; border-bottom:1px solid #cfd1d4;}
.board-counsel-reply .reply-title{position:relative; display:inline-block; width:100%; height:30px; line-height:30px;  padding-left:100px; box-sizing:border-box; font-weight:700; margin-bottom:25px;}
.board-counsel-reply .reply-title i{position:absolute; left:0; top:0; display:inline-block; width:80px; height:30px; line-height:30px; text-align:center; color:#fff; background:#9c1762; font-size:13px;}
.board-counsel-reply .reply-txt{font-size:13px; line-height:20px;}

/* 글쓰기 */
.board-cousel-form{width:100%; border-top:2px solid #858585; border-collapse: separate;}
.board-cousel-form input[type="text"],
.board-cousel-form input[type="password"],
.board-cousel-form select{float:left; height:35px; line-height:35px; box-sizing:border-box; border:1px solid #cacaca; padding:0 5px;}
.board-cousel-form select{min-width:70px;background:url(/assets/img/common/theme/btn_down.png) no-repeat 90% center;}
.board-cousel-form textarea{width:100%; max-width:100%; min-width:100%; height:150px; bbox-sizing:border-box; padding:5px; border:1px solid #cacaca; color:#222; font-size:12px; line-height:20px;}
.board-cousel-form input[data-name="제목"]{width:100%;}
.board-cousel-form input[data-name="이름"]{width:100%;}
.board-cousel-form input[data-name="연락처"]{width:calc(50% - 45px); float:left; max-width:100px;}
.board-cousel-form td > span{display:inline-block; line-height:35px; width:10px; text-align:center; float:left;}

.board-cousel-form tbody{}
.board-cousel-form tbody th{width:70px; padding:10px 20px; text-align:left; background:#f8f8f8; border-bottom:1px solid #cfd1d4; font-size:13px; font-weight:700;}
.board-cousel-form tbody td{padding:10px; text-align:left; border-bottom:1px solid #cfd1d4;}
.board-cousel-form tbody td .addFile > label,
.board-cousel-form tbody td .addFile > input{display:none;}

.private-agree textarea{width:100%; max-width:100%; min-width:100%; height:150px; background:#f4f4f4; box-sizing:border-box; padding:25px; color:#222; font-size:12px; line-height:20px; margin:15px 0;}

#inquire .private-agree{}
#inquire .private-agree textarea{width:100%; max-width:100%; min-width:100%; height:200px; background:#fafafa; box-sizing:border-box; padding:25px; color:#222; font-size:13px; line-height:23px; margin:15px 0;}

/* 체크박스 및 라디오버튼 */
#inquire .private-agree{text-align:right;}
#inquire .private-agree input[type="checkbox"]{display:none;}
#inquire .private-agree input[type="checkbox"] + label{font-size:14px; position:relative; padding-left:30px; cursor:pointer; height:23px; line-height:23px;}
#inquire .private-agree input[type="checkbox"] + label::before{content:""; display:inline-block; left:0; top:0; border:1px solid #ddd; width:23px; height:23px; box-sizing: border-box;}
#inquire .private-agree input[type="checkbox"]:checked + label::after{content:""; display:inline-block; width:15px; height:15px; left:4px; top:4px; background:#111111}

#inquire .private-agree input[type="radio"]{display:none;}
#inquire .private-agree input[type="radio"] + label{font-size:14px; position:relative; padding-left:30px; cursor:pointer; height:23px; line-height:23px;}
#inquire .private-agree input[type="radio"] + label::before{content:""; display:inline-block; left:0; top:0; border:1px solid #ddd; width:23px; height:23px; border-radius:23px; box-sizing: border-box;}
#inquire .private-agree input[type="radio"]:checked + label::after{content:""; display:inline-block; width:15px; height:15px; border-radius:15px; left:4px; top:4px; background:#111111}

/* 비밀번호 */
#inquire .check-password{width:90%; max-width:640px; background:#eee; margin:50px auto; border:1px solid #333; text-align:center;}
#inquire .check-password h3{background:#333; color:#fff; padding:20px; font-size:15px; font-weight:700;}
#inquire .check-password p{font-size:13px; color:#777; padding:25px 0 10px 0; line-height:20px;}
#inquire .check-password input[type="password"]{width:50%; border:1px solid #ccc; box-size:border-box; padding:7px; background:#fff;}

.jfilestyle-theme-default{margin-bottom:5px;}


/* --------------------------------------------------------------------------
   갤러리 (고객후기)
   -------------------------------------------------------------------------- */
#gallery{margin-bottom:100px;}

/* 리스트 */
#gallery ul{display:inline-block; width:100%;}
#gallery li.item{position:relative; float:left; width:calc(25% - 15px); margin-bottom:20px; cursor:pointer; margin-right:20px;}
#gallery li.item:nth-child(4n + 4){margin-right:0;}
#gallery li.item{}
#gallery li.item a{position:relative; display:inline-block; width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center center;}
#gallery li.item .thumbnail{height:250px; background:#f3f3f3 url(/assets/img/common/theme/logo.png) no-repeat center center; background-size:200px;}
#gallery li.item .info{position:relative; box-sizing:border-box; height:160px; padding:30px 15px;  background:#fff; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; box-sizing:border-box;}
#gallery li.item .info::before{position:absolute; display:inline-block; content:''; width:28px; height:4px; background:#9c1762; left:-1px; top:-2px;}
#gallery li.item .info em{display:block; font-size:1.4em; font-weight:700; color:#222; line-height:1.4em; font-family:'NanumSquare', sans-serif; margin-bottom:10px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#gallery li.item .info span.date{display:block; font-size:0.85em; color:#8c8c8a;}
#gallery li.item .info span.con{display:block; margin:15px 0; font-size:1em; line-height:1.5em; color:#222; height:3em; max-height:3em; overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word;}

@media(max-width:768px){
	#gallery li.item{width:calc(50% - 10px);}
	#gallery li.item:nth-child(2n + 2){margin-right:0;}
}

@media(max-width:480px){
	#gallery li.item{width:calc(100%); margin-right:0;}
	#gallery li.item:nth-child(2n + 2){margin-right:0;}
}

/* 글쓰기 */
#gallery .board-gallery-form{width:100%;}
#gallery .board-gallery-form input[type="text"],
#gallery .board-gallery-form input[type="password"],
#gallery .board-gallery-form select{min-width:100px; height:35px; line-height:35px; box-sizing:border-box; border:1px solid #cacaca; padding:0 5px;}
#gallery .board-gallery-form select{background:url(/assets/img/common/theme/btn_down.png) no-repeat 90% center;}
#gallery .board-gallery-form textarea{width:100%; max-width:100%; min-width:100%; height:150px; bbox-sizing:border-box; padding:5px; border:1px solid #cacaca; color:#222; font-size:12px; line-height:20px;}
#gallery .board-gallery-form input[data-name="제목"]{width:100%;}
#gallery .board-gallery-form input[data-name="연락처"]{width:100px;}

#gallery .board-gallery-form tbody{border-top:2px solid #858585;}
#gallery .board-gallery-form tbody th{width:200px; text-align:center; font-size:15px; font-weight:700; color:#222; padding:20px 0; background:#f3f3f3; border-bottom:1px solid #cfd1d4;}
#gallery .board-gallery-form tbody td{padding:10px 20px; text-align:left; border-bottom:1px solid #cfd1d4;}
#gallery .board-gallery-form tbody td .addFile > input,
#gallery .board-gallery-form tbody td .addFile > label{display:none;}



.gallery-list{margin:25px 0;}
.gallery-list ul{display:inline-block; width:100%;}
.gallery-list ul li.item{float:left; width:calc(100% / 3 - 10px); margin:0 15px 50px 0;}
.gallery-list ul li.item:nth-child(3n + 3){margin:0 0 50px 0;}
.gallery-list ul li.item a{display:block; width:100%; height:100%; position:relative;}
.gallery-list ul li.item a i.thumb{position:relative; display:block; width:100%; height:268px; overflow:hidden;}
.gallery-list ul li.item a i.thumb img{position:absolute; min-width:100%; min-height:100%; transform:scale(1); -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
.gallery-list ul li.item:hover a i.thumb img{transform:scale(1.2);}
.gallery-list ul li.item:hover a{text-decoration:none;}
.gallery-list ul li.item a span.info{display:block; padding:15px 10px; font-size:1em; line-height:1em; color:#aaa; font-size:0.9em; border-bottom:1px solid #eee;}
.gallery-list ul li.item a span.info b{display:block; width:100%; margin-bottom:10px; font-weight:700; color:#222; font-size:1em; line-height:1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gallery-list ul li.item a i.more{position:absolute; right:0; top:230px; z-index:2;}
.gallery-list ul li.no-data{text-align:center; color:#aaa; font-size:15px; padding:50px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
@media (max-width:640px){
	.gallery-list ul li.item{float:none; width:100%; margin:0 0 50px 0;}
	.gallery-list ul li.item:nth-child(3n + 3){margin:0 0 50px 0;}
}
 
/* --------------------------------------------------------------------------
   FAQ - 자주하는질문 (리스트)
   -------------------------------------------------------------------------- */
#board .board-faq-list{width:100%; border-top:2px solid #858585; }

#board .board-faq-list tbody th{position:relative; text-align:left; font-size:15px; font-weight:700; color:#222; padding:20px 20px 20px 60px; border-bottom:1px solid #eee; background:url(/assets/img/web/board/theme/pdf.png) no-repeat 97% center; background-size:15px;}
#board .board-faq-list tbody th.active{background:url(/assets/img/web/board/theme/pdf.png) no-repeat 97% center; background-size:15px;}
#board .board-faq-list tbody th a{ color:#000; ;}
#board .board-faq-list tbody th a::before{ color:#000; }
#board .board-faq-list tbody th a::after{ color:#000; }

#board .board-faq-list tbody td{position:relative; font-size:14px; line-height:20px; border-bottom:1px dashed #ccc; background:#fafafa; display:none;}
#board .board-faq-list tbody td{text-align:left; padding:15px 20px 15px 60px;}
#board .board-faq-list tbody td.no-data{color:#aaa; vertical-align:middle; padding:30px 0;}

#board .board-faq-list tbody th span.question{position:absolute; width:30px; line-height:30px; width:30px; border-radius:30px; text-align:center; font-size:20px; color:#fff; background:#132b88; left:20px; top:50%; transform:translate(0, -50%); font-weight:700;}
#board .board-faq-list tbody td span.answer{position:absolute; width:30px; line-height:30px; width:30px; border-radius:30px; text-align:center; font-size:20px; color:#fff; background:#0ba29a; left:20px; top:10px; font-weight:700;}

/* --------------------------------------------------------------------------
   공통
   -------------------------------------------------------------------------- */
select{background-image:url(/assets/img/common/theme/select_bg.png) !important; background-repeat:no-repeat; background-position:90% center; background-size:10px !important; cursor:pointer;}