@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;  }
 
.table .cell { padding: 10px 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.review .cell { padding:7px 12px; }

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

.table .t_tit  {width:60%;text-align:left;  font-size:1.05em;   font-weight:400; line-height:1.3}
.table .t_tit a {font-weight:400}
.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: 2px; }
		.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.03em; }
		.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:10px 2%; box-sizing:border-box; display:inline-block; text-align:Center; box-sizing:border-box; border-top:2px solid #333;  border-bottom:1px solid #ddd }
p.view_info {font-size:0.95em; font-weight:400; color:#666; width:100%;  border-bottom:1px solid #ddd; padding-bottom:13px; padding-top:13px; 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}



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

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

	p.view_info span.file {width:100%; display:block; }
	p.view_info span.file a {margin-top:3px}

}

 

  
/*페이지*/


.page {text-align:center;   width:100%; margin-top:50px; display:inline-block; font-size:0}
.page ul { width:100%; text-align:center; }
.page li { display:inline-block; font-size:0.9rem; font-weight:500;  }
 
.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}
.page a.ov  {border:1px solid #555; background-color:#555;   color:#fff;}

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

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

.write {width:100%; display:flex; align-items:center; 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 } 
.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"]  {

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

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

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

.write li  select { 
    height: 37px;
    font-size: 1rem;
    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:33px; font-size:0.95em; font-weight:500; padding:0 30px; display:inline-block; vertical-align:middle;}
									   
  
/*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.05em; 
  font-weight:400; 
  transition: 0.7s; align-items:center;
  color: #333; 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: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:10px;   
}


 @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%}
}