@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_open_wh_02.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_02.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.tt4_1 {top: 18%; left: 32%;}
.tooltip-box.tt4_2 {top: 24%; left: 78%;}
.tooltip-box.tt4_3 { top: 56%; left: 62%;}
.tooltip-box.tt4_4 { top: 75%; left: 22%;}

.tooltip-box.tt6_1 { top: 15%; left: 7%;}
.tooltip-box.tt6_2 { top: 37%; left: 47%;}
.tooltip-box.tt6_3 { top: 50%; left: 80%;}
.tooltip-box.tt6_4 { top: 80%; left: 34%;}

.tooltip-box.tt8_1 { top: 15%; left: 52%;}
.tooltip-box.tt8_2 { top: 38%; left: 78%;}
.tooltip-box.tt8_3 { top: 47%; left: 30%;}
.tooltip-box.tt8_4 { top: 81%; left: 40%;}

.tooltip-box.tt10_1 { top: 13%; left: 8%;}
.tooltip-box.tt10_2 { top: 18%; left: 50%;}
.tooltip-box.tt10_3 { top: 41%; left: 5%;}
.tooltip-box.tt10_4 { top: 55%; left: 82%;}
.tooltip-box.tt10_5 { top: 87%; left: 38%;}



/* 툴팁으로부터의 말풍선 꼭지점 위치 (btn 28px, 전체가로 320px 기준) */
      .cont-box.bottom_left{ left:-100px; top: 115%;}
   .cont-box.bottom_right{ left: -10px; top: 104%;}
   .cont-box.top_right{ left: -13px; top: -235%;}
   .cont-box.top_left{ left:-50px; top: -235%;}
    .cont-box.left_top{ left:-113px; top: -30%;}
    .cont-box.left_bottom {left:-113px; top: -95%;}
    .cont-box.right_top {left:40px; top: -10%;}
    .cont-box.right_bottom {left:40px; top: -60%;}

   .top_left.resize{min-width: 120px;}
   .top_right.resize{min-width: 120px;}
   .bottom_left.resize{min-width: 120px;}
   .bottom_right.resize{min-width: 120px;}
    .right_bottom.resize{min-width: 130px;}
    .right_top.resize{min-width: 130px;}
    .left_bottom.resize{min-width: 130px;}
    .left_top.resize{min-width: 130px;}

.link{position:relative;display:inline-block;width:42%;}
.link.link1{top:95%;  left:6%;}
.link.link2{top:88%; left:8.6%;}
.link.link3{top:55%; left:6%;}
.link.link4{top:55%; left:8.6%;}

.space{margin-bottom: 4%;}

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


@media only screen and (min-width:320px) and (max-width:359px){
  i.btn-plus { position: relative;  width: 26px; height: 26px; padding:5px; background: url('../image/btn/btn_open_wh_02.png') 0 0 no-repeat; background-size: contain; z-index: 2; } 
 
.bottom_left4_1.resize4_1{min-width: 135px; width:135px;}
.bottom_left4_2.resize4_2{min-width: 123px; width:123px;}
.left_top4_3.resize4_3{min-width: 98px; width: 98px;}
.top_right4_4.resize4_4{min-width: 92px; width:92px;}
    .cont-box.bottom_left4_1{ left:-85px; top: 98%;}
    .cont-box.bottom_left4_2{ left:-72px; top: 96%;}
    .cont-box.left_top4_3 { left:-92px; top: -38%;}
    .cont-box.top_right4_4 { left:-43px; top: -255%;}
    
.bottom_left6_1.resize6_1{min-width: 137px; width:137px;}
.bottom_right6_2.resize6_2{min-width: 170px; width:170px;} 
.bottom_right6_3.resize6_3{min-width: 92px; width:92px;}  
.left_bottom6_4.resize6_4{min-width: 94px; width: 94px;}
    .cont-box.bottom_left6_1{ left:-16px; top: 94%;}
    .cont-box.bottom_right6_2{ left:-118px; top: 95%;}
    .cont-box.bottom_right6_3{ left:-42px; top: 90%;}
    .cont-box.left_bottom6_4 {left:-96px; top: -104%;}
    
.tooltip-box.tt8_4 { top: 76%; left: 44%;}
.bottom_right8_1.resize8_1{min-width: 116px; width:116px;}
.bottom_right8_2.resize8_2{min-width: 100px; width:100px;}
.bottom_left8_3.resize8_3{min-width: 92px; width:92px;}
.left_bottom8_4.resize8_4{min-width: 130px; width: 130px;}
    .cont-box.bottom_right8_1{ left:-64px; top: 95%;}
    .cont-box.bottom_right8_2{ left:-40px; top: 100%;}
    .cont-box.bottom_left8_3{ left:-14px; top: 94%;}
    .cont-box.left_bottom8_4 {left:-126px; top: -114%;}
    
.bottom_left10_1.resize10_1{min-width: 96px; width:96px;}
.bottom_right10_2.resize10_2{min-width: 150px; width:150px;}
.bottom_left10_3.resize10_3{min-width: 140px; width:140px;}
.bottom_right10_4.resize10_4{min-width: 100px; width:100px;}
.left_bottom10_5.resize10_5{min-width: 110px; width: 110px;}
    .cont-box.bottom_left10_1{ left:-17px; top: 94%;}
    .cont-box.bottom_right10_2{ left:-81px; top: 93%;}
    .cont-box.bottom_left10_3{ left:-14px; top: 93%;}
    .cont-box.bottom_right10_4{ left:-45px; top: 93%;}
    .cont-box.left_bottom10_5 {left:-108px; top: -130%;}
}


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

.bottom_left4_1.resize4_1{min-width: 160px; width:160px;}
.bottom_left4_2.resize4_2{min-width: 150px; width:150px;}
.left_top4_3.resize4_3{min-width: 112px; width: 112px;}
.top_right4_4.resize4_4{min-width: 110px; width:110px;}
    .cont-box.bottom_left4_1{ left:-106px; top: 98%;}
    .cont-box.bottom_left4_2{ left:-90px; top: 96%;}
    .cont-box.left_top4_3 { left:-105px; top: -42%;}
    .cont-box.top_right4_4 { left:-53px; top: -286%;}
    
.bottom_left6_1.resize6_1{min-width: 160px; width:160px;}
.bottom_right6_2.resize6_2{min-width: 200px; width:200px;} 
.bottom_right6_3.resize6_3{min-width: 110px; width:110px;}  
.left_bottom6_4.resize6_4{min-width: 110px; width: 110px;}
    .cont-box.bottom_left6_1{ left:-21px; top: 94%;}
    .cont-box.bottom_right6_2{ left:-140px; top: 95%;}
    .cont-box.bottom_right6_3{ left:-52px; top: 90%;}
    .cont-box.left_bottom6_4 {left:-108px; top: -120%;}
    
.bottom_right8_1.resize8_1{min-width: 136px; width:136px;}
.bottom_right8_2.resize8_2{min-width: 100px; width:100px;}
.bottom_left8_3.resize8_3{min-width: 94px; width:94px;}
.left_bottom8_4.resize8_4{min-width: 130px; width: 130px;}
    .cont-box.bottom_right8_1{ left:-82px; top: 95%;}
    .cont-box.bottom_right8_2{ left:-43px; top: 95%;}
    .cont-box.bottom_left8_3{ left:-14px; top: 94%;}
    .cont-box.left_bottom8_4 {left:-128px; top: -113%;}
    
.bottom_left10_1.resize10_1{min-width: 103px; width:103px;}
.bottom_right10_2.resize10_2{min-width: 170px; width:170px;}
.bottom_left10_3.resize10_3{min-width: 160px; width:160px;}
.bottom_right10_4.resize10_4{min-width: 105px; width:105px;}
.left_bottom10_5.resize10_5{min-width: 117px; width: 117px;}
    .cont-box.bottom_left10_1{ left:-17px; top: 94%;}
    .cont-box.bottom_right10_2{ left:-94px; top: 93%;}
    .cont-box.bottom_left10_3{ left:-18px; top: 93%;}
    .cont-box.bottom_right10_4{ left:-45px; top: 93%;}
    .cont-box.left_bottom10_5 {left:-114px; top: -120%;}


}

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

i.btn-plus { width: 32px; height: 32px; padding:4px;}
    
.bottom_left4_1.resize4_1{min-width: 180px; width:180px;}
.bottom_left4_2.resize4_2{min-width: 170px; width:170px;}
.left_top4_3.resize4_3{min-width: 130px; width: 130px;}
.top_right4_4.resize4_4{min-width: 120px; width:120px;}
    .cont-box.bottom_left4_1{ left:-118px; top: 98%;}
    .cont-box.bottom_left4_2{ left:-107px; top: 96%;}
    .cont-box.left_top4_3 { left:-123px; top: -55%;}
    .cont-box.top_right4_4 { left:-58px; top: -300%;}
    
.bottom_left6_1.resize6_1{min-width: 170px; width:170px;}
.bottom_right6_2.resize6_2{min-width: 210px; width:210px;} 
.bottom_right6_3.resize6_3{min-width: 116px; width:116px;}  
.left_bottom6_4.resize6_4{min-width: 120px; width: 120px;}
    .cont-box.bottom_left6_1{ left:-21px; top: 94%;}
    .cont-box.bottom_right6_2{ left:-150px; top: 95%;}
    .cont-box.bottom_right6_3{ left:-57px; top: 90%;}
    .cont-box.left_bottom6_4 {left:-117px; top: -120%;}
    
.bottom_right8_1.resize8_1{min-width: 160px; width:160px;}
.bottom_right8_2.resize8_2{min-width: 116px; width:116px;}
.bottom_left8_3.resize8_3{min-width: 112px; width:112px;}
.left_bottom8_4.resize8_4{min-width: 154px; width: 154px;}
    .cont-box.bottom_right8_1{ left:-96px; top: 95%;}
    .cont-box.bottom_right8_2{ left:-53px; top: 95%;}
    .cont-box.bottom_left8_3{ left:-20px; top: 94%;}
    .cont-box.left_bottom8_4 {left:-152px; top: -120%;}
    
.bottom_left10_1.resize10_1{min-width: 116px; width:116px;}
.bottom_right10_2.resize10_2{min-width: 185px; width:185px;}
.bottom_left10_3.resize10_3{min-width: 170px; width:170px;}
.bottom_right10_4.resize10_4{min-width: 116px; width:116px;}
.left_bottom10_5.resize10_5{min-width: 124px; width: 124px;}
    .cont-box.bottom_left10_1{ left:-21px; top: 93%;}
    .cont-box.bottom_right10_2{ left:-100px; top: 93%;}
    .cont-box.bottom_left10_3{ left:-18px; top: 93%;}
    .cont-box.bottom_right10_4{ left:-52px; top: 93%;}
    .cont-box.left_bottom10_5 {left:-122px; top: -125%;}

   .space{margin-bottom: 3% !important;}

}



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

    
.bottom_left4_1.resize4_1{min-width: 220px; width:220px;}
.bottom_left4_2.resize4_2{min-width: 200px; width:200px;}
.left_top4_3.resize4_3{min-width: 140px; width: 140px;}
.top_right4_4.resize4_4{min-width: 140px; width:140px;}
    .cont-box.bottom_left4_1{ left:-143px; top: 104%;}
    .cont-box.bottom_left4_2{ left:-121px; top: 98%;}
    .cont-box.left_top4_3 { left:-133px; top: -35%;}
    .cont-box.top_right4_4 { left:-65px; top: -260%;}
    
.bottom_left6_1.resize6_1{min-width: 210px; width:210px;}
.bottom_right6_2.resize6_2{min-width: 250px; width:250px;} 
.bottom_right6_3.resize6_3{min-width: 138px; width:138px;}  
.left_bottom6_4.resize6_4{min-width: 145px; width: 145px;}
    .cont-box.bottom_left6_1{ left:-21px; top: 94%;}
    .cont-box.bottom_right6_2{ left:-175px; top: 95%;}
    .cont-box.bottom_right6_3{ left:-62px; top: 90%;}
    .cont-box.left_bottom6_4 {left:-140px; top: -100%;}
    
.bottom_right8_1.resize8_1{min-width: 200px; width:200px;}
.bottom_right8_2.resize8_2{min-width: 140px; width:140px;}
.bottom_left8_3.resize8_3{min-width: 138px; width:138px;}
.left_bottom8_4.resize8_4{min-width: 198px; width: 198px;}
    .cont-box.bottom_right8_1{ left:-120px; top: 98%;}
    .cont-box.bottom_right8_2{ left:-60px; top: 98%;}
    .cont-box.bottom_left8_3{ left:-24px; top: 94%;}
    .cont-box.left_bottom8_4 {left:-199px; top: -120%;}
    
.bottom_left10_1.resize10_1{min-width: 138px; width:138px;}
.bottom_right10_2.resize10_2{min-width: 220px; width:220px;}
.bottom_left10_3.resize10_3{min-width: 200px; width:200px;}
.bottom_right10_4.resize10_4{min-width: 138px; width:138px;}
.left_bottom10_5.resize10_5{min-width: 147px; width: 147px;}
    .cont-box.bottom_left10_1{ left:-20px; top: 91%;}
    .cont-box.bottom_right10_2{ left:-117px; top: 93%;}
    .cont-box.bottom_left10_3{ left:-18px; top: 93%;}
    .cont-box.bottom_right10_4{ left:-59px; top: 91%;}
    .cont-box.left_bottom10_5 {left:-145px; top: -105%;}



}