@charset "utf-8";


/* =======================================================
  common
========================================================*/
.board-header {
	padding: 20px 0px 40px;
	background-color: #fff; 
	box-sizing: border-box;
}
.board-header::after{content: ''; display: block; clear: both;}

/* board-search */
.board-search {
	position: relative;
}
.board-search .input-search {
	width: 100%; 
  border-radius: 4px;
  padding-right: 68px;
  padding-left: 20px;
}
.board-search .btn-search {
  position: absolute;
  right: 18px; top: 0;
  z-index: 3;
  display: block;
}
.board-search .icon-search {
  display: block;
  width: 40px; height: 40px;
}



/* board nodata */
.board-list .nodata {
	padding: 100px 20px;
	box-sizing: border-box;
	background-color: #fff;
	font-size: 14px;
	color: #888;
	text-align: center;
}
.board-list .accordion-wrapper{border-bottom: 1px solid #dadbdf;}
.board-list .accordion-wrapper:first-child {
	border-top: 1px solid #dadbdf;
}


/* board contents  */
.board-contents .prebox {
	color: #666;
}
/* board-page-header */
.board-page-header { padding: 40px 0 ; border-bottom: 0; } 
.board-page-header .title {font-size: 28px;  text-align: center; font-weight: bold;}

@media(max-width:1024px){

}

@media(max-width:768px){
	.board-page-header {padding: 20px 0; box-sizing: border-box; background-color: #fff; }
	.board-page-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
	.board-page-header .title {font-size: 20px; box-sizing: border-box;}
	.board-page-header .subtitle {font-size: 16px; color: #36458d; text-align: center; }
}

/* =======================================================
  공지사항
========================================================*/
.mc--notice .mc--section {
	border-bottom: 0;
}
.mc--notice .board-title {
	color: #444;
	font-weight: 400;
	white-space:normal;
}
.mc--notice .board-date {
	display: inline-block;
	margin-top: 10px; 
	font-size: 14px;
	color: #888;
	font-weight: 400;
}

.mc--notice .main-search { padding: 20px 0px 40px 0; }



/* =======================================================
  faq 자주하는 질문
========================================================*/
.mc--faq .mc--section {
	border-bottom: 0;
}
.mc--faq .board-title {
	color: #444;
	font-weight: 400;
	white-space:normal;
}



/* =======================================================
  qna 문의하기 리스트
========================================================*/
.mc--qna .mc--section {
	border-bottom: 0; 
}
.mc--qna .board-title{
  white-space: break-spaces;

}
.mc--qna .board-util {margin-bottom: 10px; }
.mc--qna .board-util:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.mc--qna .board-util .board-state {float: left; }

/* board 상태 */
.board-state {
	display: inline-block;
	min-width: 50px; height: 24px; 
	padding: 0 6px;
	background-color: #6ab5d5;
	border: 1px solid #6ab5d5;
	border-radius: 5px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	line-height: 24px; 
}
.board-state.waiting {
	background-color: #222;
	border-color:#222;
}


.mc--qna .board-util .board-writer {
	float: left;
	position: relative;
	margin: 0 10px;
	padding-right: 11px;
	font-size: 14px;
	color: #444;
	line-height: 20px; 
}

.mc--qna .board-util .board-writer:after {
	content: "";
	position: absolute;
	right: 0; top: 3px;
	display: inline-block;
	width: 1px; height: 14px;
	background-color: #bbb;
	line-height: 20px;
}
.mc--qna .board-util .board-date {
	float: left;
	font-size: 12px;
	line-height: 20px;
	color: #888;
} 

/* board lock 비밀글 */
.board-lock {
	color: #888;
	line-height: 15px; 
}
.board-lock:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.board-lock .icon-lock {
	display: inline-block;
	float: left;
	margin-right: 10px;
}
.board-lock .icon-lock span {float: left;}

.board-lock-wrapper {text-align: center; }
.board-lock-wrapper p {color: #444; }
.board-lock-wrapper .input-text {margin: 20px 0 10px; }

.board-lock-half{width: 100%;}
@media (min-width: 690px){
  .board-lock-half{width: 30%; margin:0 auto;}
}

/* 질문&답변 */
.mc--qna .qna-wrapper {
	box-sizing: border-box;
  display: flex;
  align-items: baseline;
}
.mc--qna .qna-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.mc--qna .qna-wrapper .icon {
	float: left;
	margin-top: 5px; 
}
.mc--qna .qna-wrapper .qna-question,
.mc--qna .qna-wrapper .qna-answer {
	float: left;
	width: calc(100% - 40px);
	margin-left: 12px; 
}
.mc--qna .qna-wrapper .prebox {
	font-size: 14px;
	color: #666;
}

/* 첨부파일 */
.mc--qna .attachment-list li {
	width: 100px;	height: 100px;
}
.mc--qna .attachment-list li + li {
	margin-left: 5px;
}
.mc--qna .attachment-btn {
	width: 100px; height: 100px;
}

.mc--qna .qna-wrapper.answer {
	padding-top: 20px; 
	margin-top: 20px; 
	border-top: 1px solid #e9eaee; 
}
.mc--qna .qna-wrapper.answer .qna-answer {
	margin-top: 5px; 
}
/*.icon-q {
  width: 10px; height: 14px;
  -webkit-mask-image: url("../images/icon/icon_q.svg"); 
  mask-image: url("../images/icon/icon_q.svg"); 
  -webkit-mask-size: 14px 14px; 
  mask-size: 14px 14px; 
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #222;
}

.icon-a {
  width: 10px; height: 14px;
  -webkit-mask-image: url("../images/icon/icon_a.svg"); 
  mask-image: url("../images/icon/icon_a.svg"); 
  -webkit-mask-size: 10px 14px; 
  mask-size: 10px 14px; 
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}*/


.icon-q {
	display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  line-height: 26px;
  text-align: center;
  background-color: #222;
  color: #fff;
  font-weight: 300;
  font-size: 14px;
/* 	background-image: url("/Appdata/images/mediacommerce/white/icon/icon_q.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%; */
}

.icon-a {
  display: inline-block;
	width: 28px;
  height: 28px;
  border-radius: 28px;
  line-height: 26px;
  text-align: center;
  background-color: #6ab5d5;
  color: #fff;
  font-weight: 300;
  font-size: 14px;
 }


/* =======================================================
  board-write
========================================================*/
.mc--board-write .checkbox-secret {
	margin: 10px 0; 
}



/* =======================================================
  내 문의 관리
========================================================*/
.qnd-accordion .board-prd-nm{display:inline-block; margin-bottom:10px; font-size:13px;}
.qnd-accordion .board-prd-nm > a{width:100%; white-space:break-spaces; text-align:left; line-height:1.2;}
.qnd-accordion .qna-tit{font-size:16px; font-weight:500; line-height:24px;}
.qnd-accordion .qna-tit .icon-lock{width:24px; height:24px; margin-right:0; background-size:12px auto;}
.qnd-accordion .board-qna-type{float:left; margin-left:10px; padding:0 6px; height:24px; font-size:12px; line-height:24px; color:#888; border:1px solid #888; border-radius:5px;}
.qnd-accordion .board-date{display:inline-block; padding-top:15px; color:#999; font-size:13px;}



@media (max-width:960px){
	.qnd-accordion .qna-tit{font-size:14px; line-height:20px;}
	.qnd-accordion .qna-tit .icon-lock{width:20px; hieght:20px; background-size:10px auto;}
}



@media (max-width: 768px){
  .icon-a,
  .icon-q{
    width: 25px;
    height: 25px;
    border-radius: 25px;
    line-height: 23px;
    font-size: 12px;
  }
  .mc--qna .qna-wrapper .qna-question,
  .mc--qna .qna-wrapper .qna-answer{
    width: calc(100% - 30px);
  }
  
  

}

/* =======================================================
* Device = 아이폰 360 이하
* Screen = 326px  ~ 359px
========================================================*/
@media all and (max-width: 325px) {


/* =======================================================
  mc--qna
========================================================*/	
	.mc--qna .attachment-list li {
		width: 81px; height: 81px;
	}
	.mc--qna .attachment-btn {
		width: 81px; height: 81px;
	}

} /*반응형 끝*/


/* =======================================================
  제휴문의
========================================================*/
.fm--solution .form-container {border: none;}
.fm--solution .form-container .form-guide {box-sizing: border-box; font-size: 12px;color: #888;}
.fm--solution .form-header {margin-bottom: 10px; padding: 0; border-bottom: 0;}
.fm--solution .form-wrapper{
	display: table;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	word-break: break-all;
	white-space: nowrap;
	table-layout: fixed;
	width: 100%;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #e0e0e0;
	box-sizing: border-box;
}
.fm--solution .form-dl {display: table-row; }
.fm--solution .form-dl:after {content: ""; display: none; }

.fm--solution .form-dl dt,
.fm--solution .form-dl dd {display: table-cell; padding: 20px 20px; border-top: 1px solid #e0e0e0; vertical-align: middle; box-sizing:border-box;}
.fm--solution .form-dl dd textarea{height: 400px;}

.fm--solution .form-dl dt {width: 25%; background-color: #f5f5f5; text-align: right; }
.fm--solution .form-dl dd {width:75%;}

.fm--solution form + .page-bottom ,
.fm--solution .form-container ~ .page-bottom {padding: 20px 0; }
.fm--solution .page-bottom .btn-group{width: 610px; margin: 0 auto;}
.fm--solution .page-bottom .btn-group button{width: calc(50% - 5px) !important;}


.fm--solution .form-dl .input-title {display: block; font-size: 14px; color: #000; font-weight: 400;}
.fm--solution .form-dl .input-text {width: 500px; }
.fm--solution .form-dl .input-text + .text-guide {}
.fm--solution .form-dl .input-text + .check-group {margin-top: 5px; }

.fm--solution .solution-agree{margin-top: 20px; padding: 20px 15px;}


@media all and (max-width: 1024px) {
.fm--solution .form-container {padding: 0; }
.fm--solution .form-header {margin-bottom: 20px; padding: 20px 0 0; }
.fm--solution .form-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.fm--solution .form-title-area {width: 100%; background-color: #333; padding: 10px 15px; box-sizing: border-box; }
.fm--solution .form-title-area:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.fm--solution .form-title-area .title  {float: left; font-size: 16px; color: #fff; font-weight: 400; }
.fm--solution .form-title-area .btn,
.fm--solution .form-title-area .btn-text {float: right; }
.fm--solution .form-title-area .btn-text {margin-top: 5px; }


.fm--solution .form-wrapper {display: block; padding: 20px 0 30px; background-color: #fff; }
.fm--solution .form-wrapper + .form-header {margin-top: 30px; }



.fm--solution .form-dl {display: block; padding: 0; margin-top: 30px; box-sizing: border-box; }
.fm--solution .form-dl:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.fm--solution .form-dl:first-child {margin-top: 0; }

.fm--solution .form-dl dt,
.fm--solution .form-dl dd {display: block; border: 0; vertical-align: middle; word-break: break-all; word-wrap: break-word; background-color: #fff; width: 100%; padding: 0; text-align: left;}
.fm--solution .form-dl dd textarea{height: 200px;}

.fm--solution .form-dl .input-title {display: block; font-size: 14px; color: #000; margin-bottom: 5px; }
.fm--solution .form-dl .input-text{width: 100%;}
.fm--solution .form-dl .text-guide {display: block; float: none; clear: both; margin-top: 5px; white-space: normal; }
.fm--solution .solution-agree{border-width: 1px 0 1px 0;}

.fm--solution .form-dl .text {font-size: 14px; color: #666; white-space: normal; }
.fm--solution .page-bottom .btn-group{width: 100%; padding: 0 15px;}

}




/* =======================================================
  자주하는 질문 - 분류
========================================================*/
.board-header{width:100%; margin:0 auto; text-align:center;}
.board-sort{display:inline-block; min-width:70px; margin-right:10px; margin-bottom:10px; padding:8px 16px; color:#666; text-align:center; border:1px solid #ddd; border-radius:20px; cursor:pointer; box-sizing:border-box;}
.board-sort.active{color:#fff; background-color:#6ab5d5; border-color:#6ab5d5;}