:root {
  --main_c : #ffa100
}

 * {transition: all 0.3s  ease-out;}
section {position:relative}
.t_color1 {color:var(--main_c)} 
.flex {display:flex}
.in {width:100%;  max-width:1200px; box-sizing:border-box;  margin:0 auto}
#top {width:100%; padding-top:20px; position:relative; z-index:9999999999 }
#top  ul {display:flex}
#top  li {margin-left:10px}
#top  ul.top_util {justify-content:flex-end; align-items:center; color:#444}
#top  ul.top_util li {font-size:.97em; padding-right:10px; position:relative}
#top  ul.top_util li:after {content:''; width:1px; height:60%; position:absolute; right:0; top:20%; background-color:#999}
#top  ul.top_util li:last-child  {  padding-right:0}
#top  ul.top_util li:last-child:after {display:none; }

#top .flex {justify-content:space-between; align-items:center; }
#top div.logo {width:30%; display:flex; align-items:center; justify-content:flex-start}

#top h1 {line-height:1; cursor:pointer; letter-spacing:-1px; font-size:1.5em; margin-right:15px}
#top h1:last-child {color:#999}
#top .top_search {border:1px solid var(--main_c); border-radius:50px;  overflow:hidden; box-sizing:border-box;  height:47px; width:450px; display:flex; align-items:center; }
#top .top_search input {width:100%; height:100%; border:none; box-sizing:border-box; padding-left:20px}
#top .top_search input::placeholder {font-size:1.2em; color:var(--main_c)}
#top .top_search a {width:70px; flex-shrink:0;  height:100%;  font-size:18px;  background-color:var(--main_c); display:inline-block; color:#fff; line-height:45px; text-align:center; border-radius:50px;}
#top .flex ul {width:30%; margin-top:5px; justify-content:flex-end }
#top .flex ul i {font-size:30px; margin-top:6px}


#top nav {width:100%; box-sizing:border-box; padding:0 0; margin-top:20px}
#top nav ul {justify-content:flex-end; }
#top nav ul li {padding:20px 3.5% 23px 3.5%; font-size:1.2em; line-height:1; position:relative}
#top nav ul li:after {content:''; width:1px; height:13px; position:absolute; right:0; top:50%; margin-top:-9px; background-color:#999}
#top nav ul li:first-child {padding-left:0}
#top nav ul li:last-child {padding-right:0}
#top nav ul li:first-child:after {display:none}
#top nav ul li:last-child:after {display:none}


#top nav ul li a {color:#111}
#top nav ul li a:hover {color:var(--main_c);   text-decoration:underline}
#top nav ul li.cate {position:Relative;  margin-right:auto; }
#top nav ul li.cate div.link:hover {  text-decoration:underline}
#top nav ul li.cate .dep2 {display:none}
#top nav ul li.cate .dep3 {display:none}
#top nav ul li.cate .dep4 {display:none !important}

#top nav ul li.cate .dep2  {font-size:1rem; left:0; width:170px; padding-top:20px;  height:500px;  top:63px; position:absolute; background-color:#fff; border:1px solid #ddd;  box-sizing:border-box  }
#top nav ul li.cate:hover .dep2 div.link {width:100%; padding:7.4px 20px; box-sizing:border-box;  cursor:pointer }
#top nav ul li.cate .dep3  {left:168px; width:630px; height:500px;   top:-1px; position:absolute; background-color:#fff; border:1px solid #ddd;  box-sizing:border-box; }
#top nav ul li.cate:hover .dep3 div.link { padding:6px 20px;   }
#top nav ul li.cate:hover .dep3 div.link:first-child {padding-top:30px}
#top nav ul li.cate .dep3 div:first-child {width:100%}
#top nav ul li.cate .dep3 .img_box {width:296px; margin-left:auto; flex-shrink:0; border-left:1px solid #ddd; background:url('../img/nav_bg.png') no-repeat bottom;  }

#top nav ul li.cate .dep4  {left:150px; width:200px; height:500px; top:-1px; position:absolute; border-left:1px solid #ddd;    box-sizing:border-box; }
#top nav ul li.cate:hover .dep4 div.link { padding:6px 20px;   }

#top nav ul li.cate:hover .dep2 {display:block}
#top nav ul li.cate:hover .dep2 div.link:hover .dep3 {display:flex}
#top nav ul li.cate:hover .dep3:hover {display:flex}
#top nav ul li.cate:hover .dep3 div.link:hover .dep4 {display:block !important}
#top nav ul li.cate:hover .dep4:hover {display:block !important}


#top .util span {position:absolute; background-color:var(--main_c); width:20px; color:#fff; display:inline-block;  text-align:center; line-height:20px;  right:-10px; top:-10px; border-radius:50%; font-size:13px }
#top .util li {position:relative}

  
.main_vi {width:100%; overflow:hidden; height:450px; display:inline-block; background-color:#ddd}
.main_vi  div {height:100%; }


hr.main_hr {height:50px}
hr.sub_hr {height:80px}
div.h3_wrap {width:100%; position:relative;  }
 
h3.tit {  font-size:2em}
p.h3_p {  margin-bottom:30px; margin-top:10px; font-size:1.1em; color:#444}
p.h3_p + p {margin-top:-10px; margin-bottom:30px}
span.tag {background-color:#fff; border:1px solid #ddd; color:#333;  font-size:.95em; padding:5px 12px; border-radius:50px; display:inline-block}
p.h3_p + p span.tag {font-size:1em; margin:0 2px}

.main_product { }
.main_product .in {position:relative}
ul.product_list {display:flex; width:100%;   justify-content:space-between;}
ul.product_list li { width:31%;}
ul.product_list li .photo {  width:100%; padding-bottom:100%; position:relative; display:inline-block; margin-bottom:20px}
ul.product_list li .photo span.label  {position:absolute; font-size:.95em; right:13px; top:13px; background-color:var(--main_c); border-radius:2px; color:#fff; padding:5px 15px}
ul.product_list li .photo:after {content:''; bottom:0; right:0; width:53px; height:53px; background:url('../img/cart_icon2.svg') no-repeat center; background-size:32px; position:absolute;  background-color:rgba(255,255,255,.8)}
ul.product_list li .photo {background-size:100% !important}
ul.product_list li:hover .photo {background-size:110% !important}


ul.product_list li h4 {font-size:1.2em; font-weight:500;  margin-bottom:13px}
ul.product_list li  a.list_cart {background-color:#fff; box-sizing:border-box; border:1px solid #ddd; color:#333;  text-align:Center; line-height:40px; margin-top:20px; display:inline-block; width:100%; font-weight:500; }
ul.product_list li a.list_cart i {vertical-align:middle; margin-top:-3px; font-size:24px; color:#333}
ul.product_list li a.list_cart:hover {background-color:var(--main_c);   border:1px solid var(--main_c); color:#fff;   }
ul.product_list li a.list_cart:hover i {  color:#fff;   }

.timedeal {background:url('../img/bg_pattern.png') 0 0 repeat; padding:70px 0}
.timedeal .in { }
.timedeal {width:100%;  }
.timedeal ul.product_list {gap:30px}
.timedeal ul.product_list li {width:24%; text-align:center}
.timedeal ul.product_list li .photo {border-radius:50%; }
 
.timedeal ul.product_list li .photo:after {display:none}

ul.review_list {display:flex;   justify-content:space-between;}
ul.review_list li { width:23%;}
ul.review_list li .photo {width:100%; padding-bottom:100%;   display:inline-block; margin-bottom:15px}
ul.review_list li h4 {font-size:1.2em;  margin-bottom:10px}
ul.review_list li p.name {color:#333}
ul.review_list li p.t {margin:8px 0; font-weight:300;   color:#666; line-height:1.4 }
.review_list li p.star {font-size:18px; color:var(--main_c);}
.review_list li p.star i {margin-right:2px}


.pay {margin-top:15px}
.pay span.t1 {text-decoration:line-through; color:#999}
.pay span.t2 {color:var(--main_c); margin-left:2px; font-size:1.3em; font-weight:600}
.pay span.t3 {color:#000; font-size:1.3em; font-weight:600; margin-left:2px; }

.quick_top {position:fixed; z-index:99999999; right:50px; bottom:13%; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; background-color:#f2f2f2;}




.quickmenu {   margin-left:42px;  width:calc(150px - 42px);    float:left;  right:1px;  }

.quickmenu  .q_tt  {background-color:var(--main_c); color:#fff; text-align:Center;   font-size:15px; line-height:40px;  width:100%; float:left;}

.quickmenu div    {  background-color:#f9f9f9; width:100%; float:left; text-align:center;  padding-top:15px; padding-bottom:10px; box-sizing:border-box; padding:15px; }
.quickmenu div b { color:#333;  font-weight:500; font-size:15px;}
.quickmenu div img.product_img {width:100%; border:1px solid #ddd; margin-top:5px;}
.quickmenu div .q_page {width:100%; display:inline-block; margin-top:5px;}
.quickmenu div .q_page img {border:1px solid #d9d9d9; width:20px;}


  
input[type="checkbox"]#menu_state {
  display: none;
}
input[type="checkbox"]:checked ~ #right_fixed {
  width:150px;
}
input[type="checkbox"]:checked ~ #right_fixed label[for="menu_state"] i::before {
  content: "\f054";
}
input[type="checkbox"]:checked ~ #right_fixed ul {
  width: 100%;
}
 
#right_fixed {
  position: fixed;
  right:0px;
  z-index: 999999999;
  top: 30%;
  bottom: 0;
   width: 40px;
   
  transition: all 0.15s ease-in-out;
}
#right_fixed label[for="menu_state"] i {
  cursor: pointer;
  position: absolute;
  top:14%;
  color:#fff;
   background:#333;
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
    border-right:none;
  text-align:center;
  padding-bottom:15px;
  padding-top:15px;
  width: 42px;
   transition: width 0.15s ease-in-out;
  z-index: 1;
}
#right_fixed label[for="menu_state"] i::before {
  margin-top: 2px;
  content: "\f053";
}




 

 :root{
    --qm-size:55px;          /* 버튼 지름 */
    --qm-gap: 10px;           /* 버튼 간격 */
    --qm-right: 40px;         /* 우측 여백 */
    --qm-top: 40vh;           /* 시작 Y 위치 */
    --qm-bg: #fff;
    --qm-fg: #111;
    --qm-line:#e8e8e8;
    --qm-brand:#2a7bf6;       /* 포인트컬러 */
    --qm-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  .qmenu{
    position: fixed;
    right: var(--qm-right);
    top: var(--qm-top);
    z-index: 999;
    display: grid;
    gap: var(--qm-gap);
  }
  .qm-btn{
    position: relative;
    width: var(--qm-size);
    height: var(--qm-size);
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background:#fff; 
	box-shadow: 2px 2px 10px rgba(0, 0, 0, .13);
    color: var(--qm-fg);
    
   /*  box-shadow: var(--qm-shadow); */
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .qm-btn:hover{
    transform: translateY(-2px);
    
   /*  box-shadow: 0 10px 28px rgba(0,0,0,.16); */
  }
  .qm-ico{
    font-style: normal;       /* 이모지 폰트 기본 */
    font-size: 22px;
    line-height: 1;
  }
  .qm-badge{
    position: absolute;
    width:25px;
    height: 25px;
     top: -6px; right: -6px;
    border-radius: 999px;
    background:var(--main_c);
    color: #fff;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
   }
  /* 툴팁 */
  .qm-tip{
    position: absolute;
    right: calc(100% + 8px);
    white-space: nowrap;
    background: #111;
    color: #fff;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .qm-btn:hover .qm-tip{ opacity: 1; transform: translateX(0); }
 

 


.arrow { position: absolute; right:0; top:0; width:30px; height:30px;   }
.arrow::before {
	position: absolute;
 	 
	content: '';
	width:60%;  
	height: 60%; 
	border-top: 2px solid #555; 
	border-right: 2px solid #555; 
} 

 

 
.arrow::before { transform: rotate(45deg); left:0; top:5px }


.product_view_top  { width:100%; margin-top:70px }
.product_view_top .in  {display:flex;   }
.product_view_top .img {width:43%}
.product_view_top .img  img {width:100%}
.product_view_top .img ul {display:flex}
.product_view_top .img ul li {width:33.333%}

.product_view_top .info {width:50%; margin-left:auto}
.product_view_top h4 {font-size:1.6em }
.product_view_top .pay {margin-top:10px; margin-bottom:30px}
.product_view_top .info  ul {width:100%}
.product_view_top .info  ul li {border-bottom:1px solid #ddd; padding:10px 0; display:flex; align-items:center}
.product_view_top .info  ul li b {width:25%}

.cart_btn {width:100%; display:flex; justify-content:flex-end; margin-top:20px; }
.cart_btn a  {width:200px; border-radius:50px;  line-height:55px;  background-color:var(--main_c);   color:#fff; font-size:1.15em;  font-weight:600; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer;   white-space:nowrap;}
.cart_btn span  {width:20%;  line-height:55px;  background-color:#f9f9f9;   color:#333; font-size:1.15em; font-weight:600; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer; white-space:nowrap;}
.cart_btn a:nth-child(2) {background-color:#333; margin:0 2%}

.option_plus {width:100%;  border-bottom:1px solid #ddd; padding:8px 0; font-size:.95em }
.option_plus div.flex_in { width:100%; display:flex; align-items:center; margin-top:5px; }
.option_plus div.flex_in .number {border:1px solid #ddd; width:100px; flex-shrink:0; display:flex;  } 
.option_plus div.flex_in .number span {width:30px; flex-shrink:0;  background-color:#ddd; text-align:center; line-height:30px; cursor:pointer}
.option_plus div.flex_in .number p {width:100%;  text-align:Center; line-height:30px; height:30px; float:left; font-size:15px; background-color:#fff}
.option_plus div.flex_in p {margin-left:auto; font-size:.90em }
.option_plus  div.flex_in a {background-color:#fff; font-weight:300; font-size:.95em;  width:auto; padding:0; margin:0; color:#555; line-height:1}

 


.slide_button_wrap {width:1260px; margin-left:-30px;  position:absolute;   top:calc(50% - 10px); left:0}
.swiper-button-next, .swiper-button-prev { position: absolute;  background-color:#fff;  box-shadow:2px 2px 10px rgba(0,0,0,.13); border-radius:50%; width:50px; height:50px;   }
.swiper-button-next::after, .swiper-button-prev::after {
position: absolute;			 
content: '';
width: 27%;  
height: 27%; 
border-top: 2px solid #555; 
border-right: 2px solid #555; 
} 



.swiper-button-prev { left:0;  }
.swiper-button-next { right:0; }
.swiper-button-prev::after { transform: rotate(225deg); left: 39%; }
.swiper-button-next::after { transform: rotate(45deg);  right: 39%; }
 

.main_cate ul {display:flex; gap:25px; justify-content:center;  align-items:center}
.main_cate ul li {width:100px; text-align:center;  position:relative}
 .main_cate ul li img {width:80px; filter:grayscale(0); }
.main_cate ul li:hover img {  filter:grayscale(0); }
.main_cate ul li p { font-size:20px; color:#333; margin-top:15px }


.cart_div span.btn {cursor:pointer; background-color:var(--main_c); border-radius:50%; position:fixed; cursor:pointer;  width:70px; height:70px; display:flex; justify-content:center;  align-items:center;  text-align:center; z-index:9999; bottom:3%; left:calc(50% - 550px); color:#fff; font-size:30px}
.cart_div .cart_div_section {position:fixed; background-color:#fff; border:1px solid #ddd; width:500px;  z-index:9999; bottom:-100%; left:calc(50% - 550px); transition: 0.3s ease-in-out;  }
.cart_div span.btn.active + .cart_div_section {bottom:0}
.cart_div .close {background-color:#f7f7f7;  color:#111; width:90px; height:40px; display:flex; align-items:center; justify-content:center;   position:absolute; top:-41px; right:0;   cursor:pointer}
 
.cart_div  .product_view_top  {margin-top:0; box-sizing:border-box; padding:30px; }
.cart_div  .product_view_top .info {width:100%; margin-left:0}
.cart_div  .product_view_top .cart_btn a {width:49%}


.tab {display:flex; width:100%; position:relative;  background-color:#f5f5f5;  }
.tab:after {content:''; width:100%; height:1px; background-color:var(--main_c); position:absolute; bottom:0px; left:0}
.tab li {width:33.3333%; text-align:center;   line-height:35px; padding:5px 20px; position:relative; z-index:99}
.tab li:first-child {background-color:var(--main_c); color:#fff}

select {border:1px solid #ddd; padding:5px 10px 5px 2px; font-size:.96rem; }