@charset "UTF-8";
 
html  { width:100%; height:100%;   }
body { }

.wrap {width:100%;  box-sizing:border-box; position:relative;  margin:0 auto; max-width:1200px}

@media all and (max-width:1200px){

	.wrap {padding:0 20px; box-sizing:border-box}
}

header {width:100%; display:inline-block; position:relative}
header .top_pop {width:100%; height:80px; margin-bottom:20px; background-color:#a8c1dc; height:60px }
header .top_pop .wrap {justify-content:center; align-items:center; height:100%}
header .top_pop p {font-size:16.5px}
header .top_pop span {font-size:1.2em; font-weight:700}

header h1 a {line-height:1.1; font-size:25px; font-weight:700;  color:#000;}
 
header nav {width:100%; background:linear-gradient( to top, #333, #333 ); display:inline-block; text-align:center;  margin-top:20px; position:relative}
header nav:after {width:100%; height:2px; background-color:#333; content:''; position:absolute; left:0; bottom:-5px}

header nav ul { font-size: 0; margin: 0; padding: 0; display: flex; justify-content :center; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
header nav ul li { display: inline-block; position: relative; }
header nav ul li a {   color: #fff ; display: block; font-size:16px; font-weight:400;  line-height:53px; padding:0 20px; transition: 0.3s linear;  }
header nav ul li:hover a {text-decoration:underline}

header nav ul li ul { display: none; position: absolute; z-index:9999999999; width: 250px;  }
header nav ul li ul li { border-top: 1px solid #444; display: none; }
header nav ul li ul li a { background: #373737; display: block;  font-size:14px; font-weight:300;  line-height:1.2em;  padding:13px 0;  }
header nav ul li ul li a:hover { background: #ae0d44; }

header form + .flex {margin-left:auto}
header .top_login {gap:10px; cursor:pointer;  margin-right:10px}
header .top_login .icon_one {width:40px; height:40px; display:flex; border-radius:50%; background-color:#f5f5f5;   justify-content:center;  align-items:center;}
header .top_login span {font-size:13px; color:#333}

header .wrap {display:flex; align-items:center}

header div.call {width:100%; text-align:left; font-weight:700; font-size:25px;  display:inline-block;  }
  
header .i_list {display:flex; align-items:center; }
header i {font-size:30px; color:#333;  cursor:pointer; }
header h1 {display:inline-block; }
header div.top_search { display:flex; align-items:center; margin-left:30px; border:1px solid #333; padding:0 10px; border-radius:50px; overflow:hidden;  }
header div.top_search input {background-color:#fff; width:300px; height:40px; padding:10px; box-sizing:border-box; border:none; color:#666; font-size:14px;} 
header div.top_search i { color:#000; font-size:24px }

header nav.is_fixed { position: fixed; top: 0; left: 0; z-index: 999999; margin-top: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.12); }
header nav.is_fixed:after {display:none}
 
header .ham  {display:none}

 @media all and (max-width:800px) {
		header .wrap {flex-wrap:wrap}
		header h1 a {font-size:20px}

		header nav ul {justify-content:flex-start; box-sizing:border-box; padding:0 20px}
		header nav ul li a {padding:0 10px; font-size:.95rem}
		header h1 {width:100%; text-align:center; margin-bottom:20px; }
		header .ham  {display:flex; align-items:center; margin-left:10px;}
		header .ham  i {font-size:20px}
		header .i_list  { }
		header .top_login {display:none}
		header form  {width:50%}
		header div.top_search {width:100%; margin-left:0}
		header div.top_search input {width:100%;}
	 
 }



.h2_more {font-size:13px; float:left; text-align:right; margin-top:-40px; width:100%; font-weight:400; color:#888 ; letter-spacing:1px;   position:relative}

.t {font-size:17px; color:#555; line-height:1.4em}

a.basic_btn {width:210px; line-height:56px; display:inline-block; background-color:#1a7bd7; color:#fff ;  font-size:18px; border-radius:3px; font-weight:600; }


  

.product  {width:100%;   flex-wrap:wrap; gap:20px;  display:flex}
  
.product_box { width:calc(25% - 15px); padding:15px;  overflow: hidden; background: #fff; border:1px solid #ddd;  box-sizing:border-box;   transition: all 0.2s ease; position: relative; }

.swiper-slide .product_box  {width:100%; }
.product_box:hover { transform: translateY(-6px); }

.product_box .img { position: relative; width: 100%; height: 230px; overflow: hidden;   box-sizing:border-box; background-size:100% !important}
.product_box .img::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: 0.3s; z-index: 1; }
.product_box .img { transition: transform 0.5s ease; }

.product_box .img .link { position: absolute; inset: 0; z-index: 2;  }

 
/* NEW 라벨 */
.product_box .label { position: absolute; top: 12px; left: 12px; background: #111; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 20px; z-index: 3; }
.product_box .label + .label {left:70px}

.product_box .name { font-size: 16.5px; font-weight: 600; line-height: 1.4; color: #222; height:50px;   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; margin-top:10px}
.product_box .price { font-size: 18px;   font-weight: bold; color: #000; margin-top:5px }
.product_box .color_chips  {padding-left:0; margin-top:10px;}
.product_box .btn { display: flex; gap:6px; justify-content:center; align-items:center; text-align: center;  padding: 12px; border-radius: 8px; font-size:14px; transition: all 0.3s; text-decoration: none; margin-top:10px }
.product_box .btn i {font-size:23px}
.product_box .btn:first-of-type { background: #111; color: #fff; }

.product_box .btn:first-of-type:hover { background: #333; }
.product_box .btn:last-of-type { border: 1px solid #ddd; color: #555; background: #fff; }
.product_box .btn:last-of-type:hover { background: #f5f5f5; }

 @media all and (max-width:800px) {
	.product {gap:20px 0; justify-content:space-between}
	.product_box { width:calc(50% - 5px); padding:0; border:none; }
	.product_box .img { height:50vw}
	.product_box:hover { transform: translateY(0); }

}

.sitemap {width:100%; border-top:1px solid rgba(255, 255, 255, .2);}
.sitemap div { }
.sitemap div ul {width:100%; display:flex; flex-wrap: wrap; justify-content:space-between ; margin:20px 0}
.sitemap div ul li { width:25%;  box-sizing:border-box; }

.sitemap div ul li ul {margin:5px 0}
.sitemap div ul li ul li {width:100%; font-size:14.5px; color:#fff; margin:1px 0; border-right:none; }
.sitemap div ul li ul li:hover {text-decoration:underline}
.sitemap div ul li ul li a {color:rgba(255, 255, 255, .8);}
.sitemap div ul li ul li.tt { font-weight:600; color:#fff;  padding-bottom:7px; padding-top:5px; border-left:none}
.sitemap div ul li ul {display:inline-block;}

@media all and (max-width:800px){
	 .sitemap div ul li { width:50% }

}

a.fixed_top {width:50px; line-height:50px; text-align:center;  border:1px solid #333; color:#000; border-radius:10px; font-size:14px; display:inline-block; position:fixed; bottom:150px; right:30px; font-weight:500;  z-index:99999999999999999999999; opacity:0;  transition: all 0.3s; }
a.fixed_top.on { opacity:1; visibility:visible; transform:translateY(0); }
a.fixed_top.w { border:1px solid #fff; color:#fff }


footer {width:100%; font-size:15px;  display:inline-block; background-color:#231f20; color:rgba(255, 255, 255, .9);;  padding:20px 0; box-sizing:border-box; margin-top:100px}

footer .text {  width:100%; padding-bottom:20px}
footer .text a {color:#fff; }
footer .text span {font-weight:200; font-size:13px; color:rgba(255,255,255,.6)} 
footer div.copy { width:100%; padding-top:15px;   border-top:1px solid rgba(255, 255, 255, .2);}
footer p.footer_line {width:100%; display:inline-block; height:1px; }

footer div p {width:100%;   }
 

 
/**********************************/
 
@media all and (max-width:800px){
 
	a.fixed_top {display:none}

}