@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300");
[class^="product_list-"]:after, [class^="product_view"]:after, .grid_item .tag_list:after { content: ""; display: block; clear: both; }

*, *:before, *:after {/* box-sizing: border-box; *//* -webkit-box-sizing: border-box; */-moz-box-sizing: border-box;font-family: 'Roboto', 'Malgun Gothic', 'AppleSDGothicNeo', 'Helvetica', sans-serif;font-weight: 400;-webkit-text-size-adjust: none;}

html, body {height:100%; min-height:10px;}
.canvas {display:block; position:relative; height:100%; min-height:10px; margin:0; padding:0;}
.container {display:block; position:relative; height:100%; min-height:10px; margin:0; padding:0;}
.container img { display:block; position:relative; min-height:10px; margin:0; padding:0; }

body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, img, button { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
table { border: 0; border-spacing: 0; }
caption, legend { overflow: hidden; width: 1px; font-size: 0; line-height: 0; text-indent: -9999px; }
hr { height: 1px; border: 0; background: #D9D9D9; }

ins { text-decoration: none; }

html { height: 100%; }
body { width: 100%; background: #fff; font-size: 14px; }
video { object-fit: inherit; }
iframe { border: 0; padding: 0; }
pre { white-space: pre-wrap; word-break: break-all; }
3
template { display: none; }

.grid_item { display: block; position: relative; width: 100%; margin: 0 auto; min-height: 10px; }
.grid_item img { display:block; position:relative; min-height:10px; margin:0; padding:0; }
.grid_item .set { overflow: hidden; }
.grid_item .set .figure img { width: 100%; min-height: 10px; }
.grid_item .set > .info { position: relative; margin-top: 24px; padding: 0 16px; }
.grid_item .set > .info > .category { font-size: 12px; letter-spacing: 2px; color: #8d685a; }
.grid_item .set > .info > .title { margin: 4px 0 12px; font-size: 28px; letter-spacing: 2px; }
.grid_item .set > .info > .stitle { padding-top: 16px; font-size: 20px; }
.grid_item .set > .info > .desc { margin-top: 10px; line-height: 18px; }
.grid_item .set .etc { position: absolute; right: 16px; top: 24px; font-size: 0; }
.grid_item .set .etc .favorite { display: inline-block; width: 30px; height: 100%; margin-right: 8px; }
.grid_item .set .etc .favorite button { width: 30px; height: 100%; padding: 0; }
.grid_item .set .etc .favorite button .ico_favorite { width: 30px; height: 30px; }
.grid_item .set > [class^="product_list-"][class*="img_col"]:first-child { padding-top: 0; }
.grid_item .swiper-container { margin-top: 4px; }
.grid_item .swiper-container .swiper-pagination { position: static; margin-top: 16px; font-size: 0; }
.grid_item [class^="product_list-"][class*="img_col"] { padding-top: 4px; margin-bottom: -4px; }
.grid_item [class^="product_list-"][class*="img_col"] .item { margin-bottom: 4px; width: 100%; max-width: none; padding-bottom: 0; }
.grid_item [class^="product_list-"][class*="img_col"] .item .figure img { width: 100%; }
.grid_item [class^="product_list-"][class*="img_col"]:not([class*="img_col1"]) { margin-left: -2px; margin-right: -2px; }
.grid_item [class^="product_list-"][class*="img_col"]:not([class*="img_col1"]) .item { margin-left: 2px; margin-right: 2px; }
.grid_item [class^="product_list-"][class*="img_col"]:not([class*="img_col1"]) .item .figure img { position: absolute; left: 0; top: 0; width: 100%; }
.grid_item [class^="product_list-"][class*="img_col"].img_col2 .item { width: calc((100% / 2) - 4px); }
.grid_item [class^="product_list-"][class*="img_col"].img_col3 .item { width: calc((100% / 3) - 4px); }
.grid_item .product_list-natural .item { width: calc((100% - 1px) / 2); }
.grid_item .product_list-natural .item .seller { font-weight: bold; }
.grid_item .product_list-natural .item .title { margin: 4px 0 12px; }
.grid_item .product_list-natural .item .figure { opacity: 1 !important; overflow: hidden; }
.grid_item .tag_list { margin: 20px 0 -8px; padding-left: 16px; }
.grid_item .tag_list li { float: left; margin: 0 8px 8px 0; }
.grid_item .tag_list li a { display: block; padding: 8px 13px; border: 1px solid #d9d9d9; border-radius: 21px; background: #fafafa; font-size: 12px; line-height: 15px; }
.grid_item .product_list-wide { margin-top: 24px; padding: 0 24px; }
.grid_item .product_list-wide > .item { clear: both; padding: 0; border: 0; }
.grid_item .product_list-wide > .item:not(:first-child) { margin-top: 12px; }
.grid_item .product_list-wide .figure { width: 120px; height: 120px; margin-right: 16px; background-color: #666; }
.grid_item .product_list-wide .figure img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.92; }
.grid_item .product_list-wide .photo { background: none; }
.grid_item .product_list-wide .info { float: left; width: calc(100% - 140px); min-height: auto; }
.grid_item:last-child { padding-bottom: 0; }

.grid.category_grid { padding-bottom: 40px; }

.style_main .grid_item .set > .info > .title { white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.style_main .grid_item .set > .info > .desc { white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.grid_item { padding-top: 40px; opacity: 0; -webkit-transition: opacity .8s ease-out, transform .8s ease-out, padding-top .8s ease-out; -moz-transition: opacity .8s ease-out, transform .8s ease-out, padding-top .8s ease-out; -o-transition: opacity .8s ease-out, transform .8s ease-out, padding-top .8s ease-out; transition: opacity .8s ease-out, transform .8s ease-out, padding-top .8s ease-out; }
.grid_item .figure { -webkit-transition: transform .8s ease-out; -moz-transition: transform .8s ease-out; -o-transition: transform .8s ease-out; transition: transform .8s ease-out; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); }

.grid_item.show { padding-top: 0; opacity: 1; }
.grid_item.show .figure { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }

.empty-space img { width: 100%; }

@media (min-width: 600px) { .style {max-width: 80%;margin: 0 auto;}
  .grid_item .product_list-natural.img_col1 .item .figure { overflow: hidden; }
  .summary { max-width: inherit; }
  .product_list-natural .item { width: calc((100% - 3px) / 4); margin-right: 1px; }
  .product_list-natural .item:nth-of-type(4n) { margin-right: 0; }
  .product_list-natural .item:nth-of-type(2n-1) { clear: none; }
  .product_list-natural .item:nth-of-type(4n+1) { clear: both; } }

/* swiper 
.mag-swiper-nor {position:relative;width:100%;max-width:100%;overflow:hidden;font-size:0;}
.mag-swiper-nor .swiper-wrapper {display:block;max-width:100%;white-space:nowrap;}
.mag-swiper-nor .swiper-slide {display:inline-block;vertical-align:top;}
.mag-swiper-nor .swiper-pagination-bullet {width:16px;height:16px;background-color:#fff;opacity:.8;}
.mag-swiper-nor .swiper-pagination-bullet-active {opacity:1; background-color:#ea001a;}
.mag-swiper-nor.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 4px;}
.mag-swiper-nor.swiper-container-horizontal>.swiper-pagination-bullets {bottom:19%;}
.mag-swiper-nor .swiper-button-next, .mag-swiper-nor .swiper-button-prev {width:42px;height:42px; background-size:contain;outline:none;}
.mag-swiper-nor .swiper-button-next {right:15px;background-image:url(../image/btn_right.png);}
.mag-swiper-nor .swiper-button-prev {left:15px;background-image:url(../image/btn_left.png);}
.mag-swiper-nor .swiper-button-next button, .mag-swiper-nor .swiper-button-prev button {display:inline-block;width:42px;height:42px;margin-top:0;background:none;border:0;text-indent:-9999px; margin-top: -15%; }
.swiper-box-190130 {display: block; padding:0;}
.swiper-box-190130.sl_3 .swiper-pagination-bullets { bottom: 8%; }
.swiper-slide img { width: 100%; vertical-align: top; }*/

@media screen and (max-width:540px) {
  /* 
    .swiper-box-190130 {padding: 0;}
    .mag-swiper-nor .swiper-pagination-bullet {width:8px;height:8px;}
    .mag-swiper-nor.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 2px;}
    .mag-swiper-nor.swiper-container-horizontal>.swiper-pagination-bullets {}
    .mag-swiper-nor .swiper-button-next, .mag-swiper-nor .swiper-button-prev {width:21px;height:21px;margin-top:-20%;}

    .mag-swiper-nor .swiper-button-next, .mag-swiper-nor .swiper-button-prev {width:21px;height:21px; }*/
}


/* -------------
      툴팁     
  -------------*/
.img-bg { position: relative; width: 100%; height: auto; }
i { display: block; text-indent: -9999px; cursor: pointer; }
i.btn-plus { position: relative;  width: 28px; height: 28px; padding:4px; background: url('../image/btn/btn_plus_wh.png') 0 0 no-repeat; background-size: contain; z-index: 2;  }

.tooltip-box {  position: absolute; width: auto; text-align: center;}

.tooltip-box.active .btn-plus { background: url('../image/btn/btn_close_wh.png') 0 0 no-repeat; background-size: contain; }
.tooltip-box>.cont-box { position: absolute; min-width:72.4px; height: auto; z-index: 1; display: none; }

.tooltip-box.active>.cont-box {display: block; }

/* tooltip btn 위치  */
.tooltip-box.tt3_1 { top: 64%; left: 44%; }
.tooltip-box.tt4_1 { top: 12%; left: 26%; }
.tooltip-box.tt4_2 { top: 26%; left: 64%; }
.tooltip-box.tt4_3 { top: 48%; left: 15%; }
.tooltip-box.tt4_4 { top: 56%; left: 68%; }
.tooltip-box.tt5_1 { top: 35%; left: 36%; }
.tooltip-box.tt5_2 { top: 58%; left: 68%; }
.tooltip-box.tt6_1 { top: 26%; left: 20%; }
.tooltip-box.tt6_2 { top: 38%; left: 72%; }
.tooltip-box.tt6_3 { top: 68%; left: 54%; }
.tooltip-box.tt8_1 { top: 42%; left: 38%; }
.tooltip-box.tt9_1 { top: 24%; left: 23%; }
.tooltip-box.tt9_2 { top: 41%; left: 72%; }
.tooltip-box.tt10_1 { top: 28%; left: 26%; }
.tooltip-box.tt10_2 { top: 55%; left: 55%; }
.tooltip-box.tt11_1 { top: 16%; left: 30%; }
.tooltip-box.tt11_2 { top: 44%; left: 70%; }
.tooltip-box.tt13_1 { top: 26%; left: 28%; }
.tooltip-box.tt14_1 { top: 26%; left: 20%; }
.tooltip-box.tt14_2 { top: 48%; left: 72%; }
.tooltip-box.tt14_3 { top: 57%; left: 9%; }
.tooltip-box.tt15_1 { top: 70%; left: 12%; }
.tooltip-box.tt15_2 { top: 70%; left: 43%; }
.tooltip-box.tt15_3 { top: 70%; left: 77%; }
.tooltip-box.tt16_1 { top: 22%; left: 20%; }
.tooltip-box.tt16_2 { top: 22%; left: 70%; }
.tooltip-box.tt16_3 { top: 52%; left: 22%; }
.tooltip-box.tt16_4 { top: 52%; left: 57%; }


/* 툴팁으로부터의 말풍선 꼭지점 위치 (btn 28px, 전체가로 320px 기준) */
.cont-box img{width:100%}
.cont-box.bottom_left{ left:-36px; top: 102%;}
.cont-box.bottom_right{ left: -12px; top: 102%;}
.cont-box.top_right{ left: -12px; top: -200% ;}
.cont-box.top_left{ left:-36px; top: -200% ;}

.top_left.resize{min-width: 86px; width: 86px;}
.top_right.resize{min-width: 86px; width: 86px;}
.bottom_left.resize{min-width: 86px; width: 86px;}
.bottom_right.resize{min-width: 86px; width: 86px;}

.link{position:absolute;display:block;}
.link.pos{width:43.9%; top:75%; left:49.765% ;}

.space{margin-bottom: 4%;}

/* -----------------------------
      mediaQuery (모바일웹 대응)     
  -----------------------------*/

@media (min-width:320px){
  i.btn-plus { position: relative;  width: 28px; height: 28px; padding:5px; background: url('../image/btn/btn_plus_wh.png') 0 0 no-repeat; background-size: contain; z-index: 2; } 
 
}


@media only screen and (min-width:375px){
  i.btn-plus { width: 30px; height: 30px; padding:4px;}

  .cont-box.bottom_left{ left:-46px; top: 104%;}
  .cont-box.bottom_right{ left: -18px; top: 104%;}
  .cont-box.top_right{ left: -18px; top: -230%;}
  .cont-box.top_left{ left:-46px; top: -230%;}

  .top_left.resize{min-width: 100px; width:100px;}
  .top_right.resize{min-width: 100px; width:100px;}
  .bottom_left.resize{min-width: 100px; width:100px;;}
  .bottom_right.resize{min-width: 100px; width:100px;}

  /*.space{margin-bottom: 2.5% !important;}*/
  .s7-img2 { position: relative; width: 100%;}
  .s7-img7 { position: absolute; bottom: 0; }
  .s12-img2 { position: relative; width: 100%;}
  .s12-img7 { position: absolute; bottom: 0; }
  .s17-img2 { position: relative; width: 100%;}

  .tooltip-box.tt3_1 { top: 68%; left: 36%; }
  .tooltip-box.tt15_1 { left: 15%; }
  .tooltip-box.tt16_2 { left: 65%; }

  /*.s11-img1 { top: 0; position: absolute; width: 100%; height: 100%; background:url('../image/contents/s11_img1.jpg') bottom center no-repeat; background-size: 140%;}
  .s15-img1 { top: 0; position: absolute; width: 100%; height: 100%; background:url('../image/contents/s15_img1_1.jpg') bottom center no-repeat; background-size: cover;}
  .s16-img1 { top: 0; position: absolute; width: 100%; height: 100%; background:url('../image/contents/s16_img1.jpg') bottom center no-repeat; background-size: 140%;}*/

}

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

  i.btn-plus { width: 32px; height: 32px; padding:4px;}

   .cont-box.bottom_left{ left:-46px; top: 104%;}
   .cont-box.bottom_right{ left: -18px; top: 104%;}
   .cont-box.top_right{ left: -18px; top: -220%;}
   .cont-box.top_left{ left:-46px; top: -220%;}

   .top_left.resize{min-width: 100px; width:100px;}
   .top_right.resize{min-width: 100px; width:100px;}
   .bottom_left.resize{min-width: 100px; width:100px;;}
   .bottom_right.resize{min-width: 100px; width:100px;}
   .space{margin-bottom: 3% !important;}
    /* itemList */
    .s7-img1 { top:0; }
    .s7-img2 { position: relative; margin-top:2.2%; width: 100%;}
    .s12-img1 { padding-top:0%; }
    .s12-img2 { position: relative; margin-top:2.2%;   width: 100%;}
    .s17-img1 { padding-top:0%; }
    .s17-img2 { position: relative; margin-top:2.2%;  width: 100%;}

    .s8-img1 { top: 0; position: absolute; width: 100%; height: 100%; background:url('../image/contents/s8_img1.jpg') bottom right no-repeat; background-size: cover; }
   .s11-img1 { top: 0; position: absolute; width: 100%; height: 100%; background:url('../image/contents/s11_img1.jpg') bottom center no-repeat; background-size: cover; }
   .s15-img1 { top: 0; position: absolute; width: 100%; height: 100%; background:url('../image/contents/s15_img1_1.jpg') bottom center no-repeat; background-size: cover;}
   .s16-img1 { top: 0; position: absolute; width: 100%; height: 100%; background:url('../image/contents/s16_img1.jpg') top center no-repeat; background-size: 140%;}

   .tooltip-box.tt3_1 { top: 68%; left: 42%; }
   .tooltip-box.tt8_1 { top: 42%; left: 38%; }
   .tooltip-box.tt15_1 { top: 68%; left: 13%; }
   .tooltip-box.tt15_2 { top: 68%; left: 43%; }
   .tooltip-box.tt15_3 { top: 68%; left: 77%; }
   .tooltip-box.tt16_1 { top: 23%; left: 15%; }
   .tooltip-box.tt16_2 { top: 23%; left: 60%; }
   .tooltip-box.tt16_3 { top: 56%; left: 15%; }
   .tooltip-box.tt16_4 { top: 56%; left: 53%; }
 
}



@media only screen and (min-width:640px){
  i.btn-plus { width: 46px; height: 46px; padding:4px;}
  .cont-box.bottom_left{ left:-80px; top: 104%;}
  .cont-box.bottom_right{ left:-32px; top: 104%;}
  .cont-box.top_right{ left:-32px; top: -265%;}
  .cont-box.top_left{ left:-80px; top: -265%;}
  .top_left.resize{min-width: 168px; width:168px;}
  .top_right.resize{min-width: 168px; width:168px;}
  .bottom_left.resize{min-width: 168px; width:168px;}
  .bottom_right.resize{min-width: 168px; width:168px;}

  .tooltip-box.tt3_1 { top: 68%; left: 38%; }
  .tooltip-box.tt8_1 { top: 42%; left: 39%; }
  .tooltip-box.tt15_1 { top: 68%; left: 15%; }
 
  .tooltip-box.tt16_1 { top: 23%; left: 15%; }
  .tooltip-box.tt16_2 { top: 23%; left: 60%; }
  .tooltip-box.tt16_3 { top: 56%; left: 15%; }
  .tooltip-box.tt16_4 { top: 56%; left: 53%; }


}