@charset "UTF-8";

/* Page Title */

ul.list {width:100%; border-top:1px solid #ddd;  margin-top:10px}
ul.list li {width:100%; display:inline-block; border-bottom:1px solid #ddd;  padding:10px 0; line-height:1.2;  }
ul.list li a {font-size:1.1rem; font-weight:500; color:#333; width:100%; display:inline-block;  margin-bottom:3px} 
ul.list li p {font-size:.93rem;  color:#555; width:100%; display:inline-block;  } 
ul.list li span {font-size:.93rem;  color:#777; width:100%; display:inline-block;  } 

.table { width: 100%; display: table; font-size:1em}

.table .row {display: table-row; background: #fff; }
.table .row.header {font-weight:500;  background-color:#f6f6f6;  }
 
.table .cell { padding: 15px 12px;  display: table-cell; vertical-align:middle;  text-align:Center;  border-bottom:1px solid #ddd; color:#666}
.table .cell b {color:#222; }
.table .cell a {color:#222}

.table .row.header .cell {padding:13px 12px;  color: #111;  border-top:1px solid #333;}

.table .t_tit  {width:60%; text-align:left;  font-size:1.03em; font-weight:400; line-height:1.3}
.table .t_tit a {font-weight:400; color:#000}
.table .t_tit a:hover {text-decoration:underline}
.table .cell.no {width:50px; }

.table .cell.photo {width:60px; line-height:0 }

@media screen and (min-width:900px) {

   .notice .table .t_tit  {width:65%}
   .mypage .table .t_tit  {width:50%}
}
 
@media screen and (max-width:1100px) {
	.table .t_tit  {width:50%; }
  }


@media screen and (max-width:900px) {
		.table { display: block; }
		.table * {line-height:1.3}
		.table .row {padding:13px 2%; display: block;  border-bottom:1px solid #ddd}
		.table .row.header {padding: 0; height: 1px; }
		.table .row.header .cell { display: none; }

		.table .row .cell:before { content:attr(data-title); text-transform: uppercase;  }
		.table .row .cell.data-title_b:before { font-weight:500  }
		.table .cell { padding:0; padding-right:5px; display: block; border-bottom:none; text-align:left }
		.table .cell a {width:100%;  display:inline-block}
		.table .cell_col {display:inline-block; width:auto; font-size:.9em;}

		.table .t_tit  {width:100%; font-size:1.05em; }
		.table .row .t_tit:before { display:none }

		.table .no {display:none}


		.table .myapge_style .cell_col  {font-size:1em; color:#111; } 
		.table .myapge_style .cell_col.m_border_after  {  margin-right:0;   padding-right:0 } 
		.table .myapge_style .cell_col.m_border_after:after  {content:''; width:1px; height:10px; margin:0 7px; background-color:#999; display:inline-block} 
		.table.review  { display:inline-block }
		.table.review .row {display:flex; flex-wrap:wrap; align-items:center; position:Relative}
	    .table.review .basic_label {position:absolute; right:0; top:0}

		.table.review .cell {padding:0}
		.table.review .cell.photo { width:50px;  }
		.table.review .cell.t_tit  {width:calc(100% - 60px); margin-left:auto;  position:Relative;  line-height:1.4;  }
		.table.review .cell.t_tit.type2  {width:calc(100% - 85px); margin-right:25px;   }
	 

		.table.review .cell_col { padding-top:10px; margin-right:5px; }

		.qna .table .t_tit a span  {color:var(--main_c2); font-weight:500; margin-right:5px}

 }
 
 
/*뷰페이지*/
 
  
p.view_title {font-size:1.15em;  line-height:1.3;  font-weight:500; color:#000; width:100%; padding-top:15px;  box-sizing:border-box; display:inline-block; text-align:Center; box-sizing:border-box; border-top:2px solid #333;  }
p.view_info {font-size:0.95em;  line-height:1.6; text-align:center; font-weight:400; color:#666; width:100%;  border-bottom:1px solid #ddd; padding-bottom:15px; padding-top:8px; display:inline-block; box-sizing:border-box; }

p.view_info span::after {width:1px; height:12px; vertical-align:middle;  content:''; display:inline-block; background-color:#888;  margin:0 5px 0 10px}
p.view_info span:last-child::after {display:none}
p.view_info a:hover {text-decoration:underline }
p.view_info span.file a {display:inline-block; border:1px solid var(--main_c); color:var(--main_c); padding:0 10px; border-radius:2px; margin-right:3px }

div.view_content {width:100%; display:inline-block;  border-bottom:1px solid #ddd; padding:20px 0; }
div.view_content img {max-width:100%}
div.vedio_frame {width:100%; margin-top:20px}
div.chart_box {width:100%; margin-top:-1px; box-sizing:border-box;  border:1px solid #ddd; overflow:hidden}

div.view_file {width:100%; padding:12px 0 8px 0;  border-bottom:1px solid #ddd; }
div.view_file ul {width:100%; display:flex; flex-wrap:wrap;}
div.view_file ul li {display:inline-block; margin-bottom:5px; }
div.view_file ul li a {display:inline-block; font-size:0.90rem; background-color:#2478be; color:#fff; padding:4px 15px; border-radius:5px; margin-right:10px;}

div.reple {width:100%; display:flex; border-bottom:1px solid #ddd; padding:15px 10px; font-size:15.5px; color:#666;  background-color:#f9f9f9; box-sizing:border-box;}
div.reple  b {color:#333; font-weight:500; font-size:16px; width:90px}
div.reple  p {padding-left:30px;}

.list_next  {width:100%; display:inline-block;  padding:11px 0; box-sizing:border-box; border-bottom:1px solid #ddd; line-height:0} 
.list_next p {width:100%; display:inline-block; font-size:1rem; line-height:1; color:#999;  overflow: hidden;   text-overflow: ellipsis;    margin:3px 0;  white-space: nowrap;  }
.list_next p:last-child {text-align:left; }
.list_next b {font-weight:500; color:#333; width:80px; display:inline-block}

a.list_btn {display:inline-block; margin-top:15px; float:right; border:1px solid #333;  color:#111;   text-align:center; min-width:30px; padding:0 15px; font-size:.95rem;  line-height:33px; background-color:#fff}
a.list_btn + a.list_btn {  float:left; background-color:#333; color:#fff; margin-right:5px  }
a.list_btn.right + a.list_btn.right {float:right }


@media screen and (max-width:900px) {
		a.list_btn { padding:0 13px; font-size:.90rem;  line-height:28px;  }
		a.list_btn i {font-size:13px}

		p.view_title { width:100%; padding-top:12px; font-size:1.1em; text-align:left; color:#333; border-top:2px solid #333; }
		p.view_info {padding-top:2px; text-align:left;  font-size:.95em; padding-bottom:10px;}
		p.view_info + p.view_info {padding-top:10px}
		p.view_info span::after {  margin:0 3px 0 6px}


		p.view_info span.file a {margin-top:3px}
		.list_next p {font-size:.97em}

 }

  
/*페이지*/


.page {text-align:center;   width:100%; margin-top:40px; display:inline-block; font-size:0}
.page ul { width:100%; text-align:center; }
.page li { display:inline-block; font-size:0.9rem; font-weight:300;  }
 
.page a {
	display:inline-block;
 	text-decoration:none; vertical-align:middle;
 	border:1px solid #d1d1d1; background-color:#fff;  width:29px; line-height:29px; height:29px;  margin-left:-1px;   color:#999; text-align:Center;
   }
.page li i {vertical-align:middle; width:9px;}
.page a.ov  {border:1px solid #555; background-color:#555;   color:#fff;}

 
 
 @media screen and (max-width:900px) {
 		.page li { font-size:12px}
		.page a {  width:25px; line-height:25px; height:25px; }
 
}

.list_btn + .page {margin-top:15px}

.write {width:100%; display:flex;  justify-content:space-between; flex-wrap:wrap; border-top:2px solid #333 }
.write li {display:flex; width:50%; align-items:center;  padding:13px 0; border-bottom:1px solid #ddd}
.write li.li_100 {width:100%}
.write li.right span  {padding-left:20px;  }
.write li span {width:130px; flex-shrink:0; font-weight:500 } 
.write li > div {width:100%}
.write li p {margin-top:8px} 
.write li div.bill_number p:first-child {margin-top:0}
.write li div.bill_number p + p {margin-top:5px}

.write li .flex {display:flex; align-items:center; gap:4px}
.write li  input[type="text"]  {
    color:#333; 
    height: 37px;
     text-indent:10px;
	border:1px solid #cecece;
	box-sizing:border-box; 
}

.write li  input[type="password"]  {

    height: 37px;
     text-indent:10px;
	border:1px solid #cecece;
	box-sizing:border-box; 
}

.write li  select { 
    height: 37px;
     padding-left:5px; box-sizing:border-box; 
	border:1px solid #cecece; color:#666;
}
 
.write div.tel input[type="text"] {width:110px}
.write div.email input[type="text"] {width:100%}
.write li  input.input100 {width:100%}

.write.type2 {border-top:none}
.write.type2 li {display:block; width:100%;  }
.write.type2 li:last-child {border-bottom:none}
.write.type2 li span {margin-bottom:7px; display:inline-block; width:100%; font-weight:500; font-size:1.04em}

.write li input + a  {margin-left:2px}
.write li div.flex input + a  {margin-left:0}

.mypage .write.type2 input.input100 {max-width:300px}
 
 @media screen and (max-width:900px) {
		.write li {width:100%; flex-wrap:wrap}
		.write li:nth-child(2n) p  {padding-left:0}
		.write li span {width:100%; margin-bottom:5px; font-weight:500; font-size:1.05em} 
		.write li span.s_t {width:100%; display:inline-block;  margin-top:7px; font-weight:400; font-size:1em} 
		.write li p {  font-weight:400; font-size:.95em; color:#666} 
		.write li.right span {padding-left:0}
		.write li div.zip input {width:150px}
		.write li div.nickname input::placeholder {color:#fff}
		 
		.write div.email input[type="text"] {width:47%}
 		.write li  input  {  font-size:15px !important}
		.write li  select  {  font-size:15px}
		.write img {max-width:100%}
		.write div.tel input[type="text"] {width:calc(33% - 10px); }
 		.mypage .write.type2 input.input100 {max-width:100%}

}



/*서치*/
 						
.search {margin-top:30px;  width:100%; display:flex;  justify-content:flex-end}
.search  input  {width:30%; height:33px; border:1px solid #ddd; padding-left:10px; font-size:0.93em; color:#666; margin:0 5px}
.search  select  { font-size:0.93em; color:#666; border:1px solid #ddd;  vertical-align:middle; width:100px; height:33px;}
.search a {background-color:#333; color:#fff; line-height:35px; font-size:0.95em; font-weight:500; padding:0 30px; display:inline-block; vertical-align:middle;}
									   
@media screen and (max-width:900px) {
   .search a {padding:0 18px}
.search  select  { width:70px}
.search  input  {width:40%}

}
/*FAQ*/

.faq dl {width:100%; border-top:1px solid #ddd; margin-bottom:-1px;}
 
.faq  dt {
  background-color: #fff;
  border-bottom:1px solid #ddd;
  cursor: pointer;
  font-size:1.1em; 
  font-weight:400; 
  transition: 0.7s; align-items:center;
  color: #111; width:100%; display:flex; padding:10px; box-sizing:border-box; 
}
.faq  dt  * {font-weight:400}
.faq   p.icon {width:30px; line-height:30px; background-color:#f1f1f1; text-align:center; border-radius:50%; margin-right:15px; vertical-align:middle; flex-shrink:0} 

.faq  dt:hover { background: #f9f9f9; }

.faq  dt img {vertical-align:middle; margin-right:5px}
.faq  dd {
	background-color: #f9f9f9;
	display: none;
	border-bottom: 1px solid #ddd;
	line-height: 1.4;
	font-size:1em; color:#666;
	padding:10px;   
}

.faq  dd div.a  { width:100%; display:flex; align-items:center }


#product_review dl {width:100%; border-top:1px solid #ddd; margin-bottom:-1px;}
 
#product_review dt {
  background-color: #fff;
  border-bottom:1px solid #ddd;
  cursor: pointer;
  font-size:1em; 
  transition: 0.7s; align-items:center; gap:10px; 
  color: #333; width:100%; display:flex;  padding:15px 10px; box-sizing:border-box; 
}
#product_review  dt p {white-space:nowrap; }
#product_review  dt p:nth-child(1) {width:150px}
#product_review  dt p:nth-child(2) {width:100%; white-space:normal;}
#product_review  dt p:nth-child(3) {width:100px; text-align:right;}
#product_review  dt p:nth-child(4) {width:80px; text-align:right;}

#product_review  dt:hover { background: #f9f9f9; }

#product_review   dd {
  background-color: #f9f9f9;
  display: none;
  border-bottom: 1px solid #ddd;
  line-height: 1.4;
  font-size:1em; color:#666;
  padding:15px 10px;   
}

.mypage #product_review dt {padding:17px; border:1px solid #999 }
.mypage #product_review dd {padding:17px; border:none }


 


 @media screen and (max-width:900px) {
		#product_review dt { flex-wrap:wrap; gap:4px}

		#product_review dt p:nth-child(3) {width:auto}
		#product_review dt p:nth-child(4) {width:auto}
		#product_review   dd img {max-width:100%}
}