/* BASIC css start */
h1, .topMenu, #hdSchFrm, .topMenu , .topBanner  { position: absolute;  }
body { min-width: 1265px !important; height: 100%; overflow-y: scroll !important; background: none !important; }
/* header */
#header { position: relative; /* height: 228px; */  }
#header .Wrap { position: relative; width: 1260px !important; height: 136px; margin: 0 auto; padding-left: 0 !important; }
#header .Wrap h1{ top:10px }
#header .bi,
#header #gnb,
#header #favLink { position: absolute; }
/* bi */
#header .bi { left: 30px; top: 30px; }
#topWrap { /* position: fixed; */ width:100%; border-bottom: 1px solid #dcdcdc; height: 39px;  background: #fff;   }
#topWrap > div { width: 100%; z-index: 40000;  background: #fff;  height: 40px;  border-bottom: 1px solid #eee; }
.pFixed { top:0;   position: fixed; z-index: 20000; }

/* topMenu */
.topMenu { top: 11px; right: 0; }
.topMenu > ul > li { float: left; padding-bottom:20px;  }
.topMenu > ul > li:after { content: "|"; padding: 0 8px; font-size: 10px; color:#afafaf; }
.topMenu > ul > li:last-child:after { content: ""; padding: 0; }
.topMenu > ul > li a { font-size: 12px; color:#afafaf; display:inline-block;  text-transform: uppercase;  }
.topMenu > ul > li a:hover { color: #000; }
.topMenu .join_ico {position:absolute; left:45px; top:17px; Z-index:9999;}


/* join_ico 움직임 */
.join_ico {
animation-name: join123;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear; }

  @keyframes join123 {
  from { transform: translate(0px,0px); }
  to { transform: translate(0px,5px); } 
  }
  

#clubShop a{ color:#ff5f11; }
#clubShop a:hover{  text-decoration:underline; }

#logo-sns-search { height: 129px;  }

/* 상단 gnb메뉴 */
.top_gnb { position: relative;}
.top_gnb > a { background:url(/design/cocovill/s024/images/top_gnb_off.gif) no-repeat right center; padding-right:12px;font-size:11px; color:#999; text-transform:uppercase; }
.top_gnb:hover > a { background:url(/design/cocovill/s024/images/top_gnb_on.gif) no-repeat right center; color:#333; }

.top_gnb .top_lnb { display:none; position:absolute; top:23px;  background:#fff; border:1px solid #666; padding:11px; z-index:10006; width:100%;}
.top_gnb .top_lnb li { padding-left:5px;}
.top_gnb .top_lnb li a { display:block; font-size:11px; color:#666; font-family:'Dotum','sans-serif'; line-height:20px;}
.top_gnb .top_lnb li a:hover { color:#000; text-decoration:underline;}

.tM01 { margin-left:-31px; width:100px !important;}
.tM02 { margin-left:-65px; width:100px !important;}

/* topBanner */
.topSns { position: absolute; top: 6px; z-index: 10;  left: 0; width: 229px; overflow: hidden; display: table; }
.topSns > a i { vertical-align: middle; }
.topSns > a,
.topSns > ul { display: inline-block; vertical-align: middle; }
.topSns > a:hover { color: #000;  }
.topSns > ul { margin-left: 15px;  }
.topSns > ul li { display: inline-block;  }
.topSns > ul li a { background: #ededee; border-radius: 50%; width: 27px; height: 28px; text-align: center; line-height: 28px; display: block;  }
.topSns > ul li a:hover { color:#333; background: #d3d3d3; } 


/* h1 */
h1 { top: 20px; left:20px; z-index:1; }
.textcenter { text-align:center; }
h1 a { text-align: left; display: block; }
/* hdSchFrm */
#header #hdSchFrm { left:410px; top: 29px; z-index: 20; width:400px; }
#header #hdSchFrm i { font-size: 1.5em; line-height: 1.9em; }
#header #hdSchFrm form { overflow: hidden; }
#header #hdSchFrm fieldset {  width: auto; border: 2px solid #ff5f27;  width: 100%;  }
#header #hdSchFrm fieldset > div { display: table; width:100%; }
#header #hdSchFrm .MS_search_word { display: table-cell; }
#header #hdSchFrm .btn-sch { float: left; width: auto; padding-top: 8px; }
#header #hdSchFrm .MS_search_word { border: 0px; width: 100%; height: 39px; padding: 0px 0 0 5px; }
#header #hdSchFrm a { display: table-cell; text-align: center; color: #ff5f27; background: #fff; width: 50px; padding-left: 5px; }    
#hdSchFrm p { margin-bottom: 5px; text-align: left; font-size: 11px; color: #999; }
#hdSchFrm .fa-search { font-size: 1.3em; }  
/* favLink */
#header #favLink { right: 30px; top: 44px; }
#header #langLink {position: absolute; left:0px; top: 9px}
#header #langLink > a { padding-right:2px;}
 /* 슬라이드 */
#slider1 { width: 240px; height: 101px; }
div.example { display: inline-block; position: relative; }
div.example code { display: block; }
div.example button { position: absolute; bottom: -5px; padding: 10px; z-index: 900; width: 17px; height: 26px; text-indent: -999em; display: block;  }
div.example button.prev { background: url(/design/cocovill/s024/images/btn_a_l.gif) no-repeat; left: 73px }
div.example button.last { background: url(/design/cocovill/s024/images/btn_a_r.gif) no-repeat; left: 89px;  }
#slider1 > ul > li { position: relative; width: 240px; height: 101px; float: left; }
  /* gnbWrap */
#gnbWrap { position: relative; width: 100%; border:1px solid #eee; }
#gnbWrap .gnb-boardWrap { position: relative; width: 100%; z-index: 10005; height: 52px; background: #fff; }
#gnbWrap .fixed { position: fixed; top: 39px; box-shadow: 0px 0 10px #dcdcdc; }
/* gnbWrap */
.gnb {width:1260px; margin: 0 auto; position: relative;  height: 48px;   }
.gnbCate { position: relative; padding-left: 190px; box-sizing: border-box; width: 100%; display: table; text-align:center; }
.gnbCate ul { display : table-cell; }
.gnbCate ul:last-child { position: relative; right: 20px; }
.gnbCate ul:last-child a {color:#fff; font-size:19px; letter-spacing:-0.5px; }
.gnbCate ul li { display: inline-block; line-height: 52px; position: relative; }
.gnbCate ul:first-child li { padding: 0 1.5%; margin: 0 2%; }
.gnbCate ul:last-child li { padding: 0 0; width: 60%; box-sizing: border-box; text-align: center; }
.gnbCate li a { font-size: 17px; font-weight:bold; color:#000; }
.gnbCate .badge { position: absolute; bottom: 10%; right: -2%; -webkit-animation:blink1 0.5s ease-in-out infinite alternate;
    -moz-animation:blink1 0.5s ease-in-out infinite alternate;
    animation:blink1 0.5s ease-in-out infinite alternate; }
.gnbCate .badge1 { position: absolute; bottom: 10%; right: -2%; -webkit-animation:blink1 0.5s ease-in-out infinite alternate;
    -moz-animation:blink1 0.5s ease-in-out infinite alternate;
    animation:blink1 0.5s ease-in-out infinite alternate; }
/*.gnbCate ul:first-child li:first-child a {
     color: #f15925;
}*/
.gnbCate ul:first-child li:nth-child(3) a {
     color: #f15925;
}
@-webkit-keyframes blink1{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink1{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink1{
    0% {opacity:0;}
    100% {opacity:1;}
}
.gnbCate li a span { position: absolute; top: -1px; width:100%; height: 3px; background: #be4a42; z-index: 20000; left: 0; }
/**/.gnbCate ul:first-child li:last-child a { color:#d71616; } 
.gnbCate ul:first-child li:last-child .badge { right:-13%; }

.category_menu {  width: 208px;  padding: 10px 0 30px; }
.category_menu > li {  position:relative;  z-index:9000;  /* width: 115px; */ box-sizing: border-box; padding: 0 20px 0 20px; box-sizing: border-box;  /* line-height:25px;  height: 32px; */ }
.category_menu > li:first-child { margin-top: 10px; }
.category_menu > li > a { color: #666; font-size:1.2em; display:block;  text-align:left; font-weight: bold; letter-spacing: -1px;  padding-bottom:10px; }
.category_menu > li > a > i { display: inline-block; position: absolute; right: 10px; top: 0px; font-size: 1.5em; } 
.category_menu .twoD > li > a >  img { vertical-align: middle !important; padding-right: 10px; }
.category_menu li.select {  /* background:#437e00;  border: 1px solid #ff0000;  border-top:1px solid #343434;*/  }
.category_menu .on { background:#fff;  color:#ff6021;  /* border-top:1px solid #343434; */  } /* 마우스오버시 색변화 */
.category_menu .category_menu .on > a { color: #333; }

.category_menu .deps2 { display:none; width: 200px; position:absolute; top: -5px; left: 208px; z-index:9001; border:1px solid #e8e8e8; padding: 15px 0 15px 0; background: #fff; overflow: visible !important; } /*  top추가 */
.category_menu .deps2 > li { display:block; background:#fff; padding-left: 15px; line-height: 20px !important; height: 25px !important; position: relative; }
.category_menu .deps2 > li a:hover { color:#333; }
.lifloat > li { float: left; width: 45%;}
.category_menu .m9 .deps2 { right: 0px !important; }

.category_menu .deps2 .deps3 { display:none; min-width: 200px; max-width:100%; position:absolute; top: -15px; left: 200px; z-index:9002; border:1px solid #e8e8e8; padding: 15px 0 15px 0; background: #fff; }
.category_menu .deps2 .deps3 li { display:block; background:#fff; padding-left: 15px; line-height: 20px !important; height: 25px !important;  }
.category_menu .deps2 li i { position: absolute; right: 10px; top: 5px; }

#cateWrap { width: 190px; position: absolute; left: 50%; margin-left: -630px; top: 0px; z-index: 10000;  background-color: rgba(  42, 42, 42, 0.8 ); }
/*#cateWrap:hover { background-color: rgba( 42, 42, 42, 1 ); }*/
#cateWrap #category_menuWrap { position: relative; overflow: hidden; word-wrap: break-word; width: 208px; }
#cateWrap #category_menuWrap.sel { height: 800px !important; }
#cateWrap .category_menu  { height: 430px; box-sizing: border-box;  }
#cateBox { padding:8% 3%; height:430px; box-sizing: border-box;}
#cateBox li {padding: 14.5px 13px; }
#cateBox li a {color: #fff; font-size:1.25em; line-height:21px; display:block;  text-align:left; font-weight: bold; letter-spacing: -1px;  padding-bottom:8px;}
#cateBox li a span { color: #e4ef2c; }
#cateBox li a:hover {color: orange;}

/* 전체카테고리 */
#fullCate { position: absolute; top: 0; left: 0; z-index: 10001; }
#fullCate > a { height: 52px; line-height: 52px; color: #333; background: #eee; display: block; width: 190px; text-align: center; font-size: 1.2em; font-weight: bold;}
#fullCate > a > i { font-size: 1.4em; vertical-align: middle; padding-right: 5px; }
#fullCate > div { position: absolute; top: 52px; width: 1258px; /* height: 300px; */ background: #fff; border: 1px solid #555; background: #fff; overflow: hidden; display: none; overflow-y: scroll; height: 700px; }
#fullCate > div > a { position: absolute; bottom: 3px; right: 7px; }
#fullCate > div > div { display: table; width: 100%; background:#fff; box-sizing: border-box; vertical-align: top; }
#fullCate > div > div > div { display: table-cell; border-right: 1px solid #e1e1e1; padding: 30px 10px; box-sizing: border-box; background: #fff;}
#fullCate .c-gnbMenu > div { display: inline-block; vertical-align: top; padding: 0 20px 30px; width: 24%; box-sizing: border-box; }
#fullCate .c-community,
#fullCate .c-mypage { width: 15%;box-sizing: border-box; padding-left: 20px; background: #fbfbfb;  vertical-align: top; }

#fullCate .c-deps2 {  }
#fullCate .c-gnbMenu > div > ul > li {  padding: 0 20px 0 0; position: relative;  max-width: 200px; }
#fullCate .c-deps3 { display: none; position: absolute; top: 0px; width: 200px; left: 100%; background: #fff; z-index: 20000; box-shadow: 3px 3px 3px #e1e1e1; }
/*
#fullCate > div > div+div+div+div+div{ border-right: none; }
*/
#fullCate .c-gnbMenu h3 {  margin-bottom: 15px; font-size: 1.1em !important; }
#fullCate .c-gnbMenu h3 a {   font-size: 1.1em; color: #333; margin-bottom: 15px; }
#fullCate .c-community h3,
#fullCate .c-mypage h3 { font-size: 1.3em; color: #333; margin-bottom: 15px;  }
#fullCate .c-gnbMenu > div > ul > li > a,
#fullCate .c-community > ul > li > a,
#fullCate .c-mypage > ul > li > a { line-height: 22px; /* height: 22px; */ display: block; }
#fullCate .c-gnbMenu > div > ul > li > a:hover, 
#fullCate .c-gnbMenu > div > ul > li li a:hover,
#fullCate .c-community li > a:hover,
#fullCate .c-mypage li > a:hover{ color: #000; /*background: #f9f9f9; */ } 
#fullCate .c-gnbMenu > div > ul > li .on { font-size: 1.1em !important; }
#fullCate .c-gnbMenu > div > ul > li > ul { /* margin-left: 10px; */ }
#fullCate .c-gnbMenu > div > ul > li > ul li:before { content: "-"; padding: 0 4px; vertical-align: middle; color: #666;line-height: 25px; height: 25px; }
.page-body { margin-bottom: 150px; }
.paging {  padding-top: 70px; }

#fullCate .c-gnbMenu .c-deps2 > i { position: absolute; right: 2px; top: 6px; /* display: none; */  display: none; }

#fullCate .c-gnbMenu > div > ul > li ul {  border: 1px solid #e1e1e1; padding: 7px 10px 7px 10px; }
#fullCate .c-gnbMenu > div > ul > li li a { line-height: 1.4em; }


#topBan { position: relative; width: 100%;  overflow: hidden;  }
#topBan img {width:100vw;}

/* #topBan li { position: absolute; height: 100px; width: 100%; left: 50%; margin-left: -1000px; } */


#ombs { position: absolute; right:0; bottom: 0; width: 264px; overflow: hidden; height: 128px; }


/* 상품들 */

/* 상품 preview */
.preview { position: absolute; bottom: 10px; left: 0px;  background:rgba(0, 0, 0, 0.6); /*background: #000; opacity: 0.6; */  width: 30px;  text-align: center;  display: none;  border-radius: 2px; z-index:9000; }
.preview > div:first-child a { padding-top: 8px; }
.preview > div:last-child a { padding-bottom: 6px; }
.preview > div {  position: relative !important; }
.preview > div a { display: block; padding: 4px 0 3px; vertical-align: middle;  border-radius: 2px;  }
.preview > div span {  position: absolute; display: none; top:0; z-index: 100; left: 30px;  width: 50px; font-size: 11px; background:rgba(0, 0, 0, 0.8); color: #fff; padding: 0 7px 0 5px; line-height: 2.5em;  display: inline; border-radius: 2px; margin-left: 2px; }
.preview a i { color: #dedede; }
.preview a:hover {  background:rgba(0, 0, 0, 0.7); }
.preview a:hover i {  background:rgba(0, 0, 0, 0.7); color: #fff; }
.preview i { font-size: 1.5em; color: #fff;  }
.discount { position: absolute; top: -4px; right: 0px;  width: 100%; min-width: 200px; text-align: right;  } 
.discount span.sale { background: #000; color: #fff; width: 45px; height: 45px; line-height: 45px;  display: inline-block; font-size: 1.05em; text-align: center; font-weight: bold; border-radius: 2px;  }
.hit { position: absolute; bottom: 10px; right: 3px; background: #fff; box-shadow: 3px 1px 3px #cfcfcf; padding: 3px 10px; border-radius: 2px; display: none; font-size:11px;  }
.hit i { font-size: 1.2em; line-height: 1.2em; vertical-align: middle;}
.soldOut { position: absolute; z-index: 9999; display: inline-block;  width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5);  top: 0; left: 0; color: #fff; text-align: center; padding-top: 45%; }
.soldOut p { font-size: 20px; height: 8px; font-weight: bold; }
.font { width: 15px; height: 4px; display: inline-block; }
.brand { margin: 3px 0 5px 0; color: #333; }
.MK-product-icons {  }
.MK-product-icons img { margin: 5px 5px 0 0;  }
/* 상품 리스트 */
.listPrd { padding: 40px 20px 20px; }
.listPrd .list { position: relative; overflow: hidden; padding: 3px 4px 0 0; box-sizing: border-box; }
.listPrd .list > a { width: 100%; height: 100%; border:1px solid #eee;  border-bottom: 1px solid #eee; overflow: hidden; display: block; box-sizing: border-box; }
.listPrd .list > a > img { width: 100%; }
/* 상품 정보 */
.suj { word-break:break-all; padding: 5px 0 5px; color: #333; margin-top: 10px; }
.suj a { font-weight:bold; color: #000; font-size: 16px; letter-spacing: -0.05em;}
.price {text-align:right; margin: 7px 0; color: #333; font-size: 13px;}
.price span{font-weight:bold; font-size:16px;}
.price del{margin-right:7px;}
.price strike { color: #777; }
.color_name { margin: 3px 0 0px 0; }
.sub_content { word-break:break-all; padding: 0 0 5px 0; }
.sub_content a {  font-size: 14px;  }

/* tit */
.hd { display: table; width:100%; margin-bottom: 20px; text-align: center; }
.hd > h2 { font-size: 2.5em;  font-family:"Open Sans",'sans-serif'; color:#222; line-height:40px; text-transform: uppercase; display: block; }
.hd span { color:#999; font-size: 13px; display: inline-block; margin: 8px 0 0 10px;   } 
.hd > a { position: absolute; top: 15px; right: 10px; font-size: 0.85em; text-transform: lowercase; font-family:'Dotum','sans-serif';  }

/* total */
.total-sort { padding: 0 10px; }
.total-sort .sort li { margin-left: 0; }
.total-sort .sort li a:hover { color: #000; }
.total-sort .sort li a:after { content: "|";  padding: 0 5px; }
.total-sort .sort li:last-child a:after { content: ""; padding: 0; }
.total-sort .total dt { padding-right: 5px; }

.prd_listWrap { display: table; width:100%; overflow: hidden; }
.prd_listWrap > li { display: inline-block;  box-sizing: border-box; vertical-align: top; }  
.prd_listWrap.col3 > li { width: 33%; }
.prd_listWrap.col4 > li { width: 24.7%; }
.prd_listWrap.col5 > li { width: 19.7%; }
.prd_listWrap .listPrd { padding: 7px 10px 20px 10px;  }
.prd_listWrap > li .suj { border-bottom: 1px solid #eee; margin-bottom: 10px; }
.prd_listWrap > li .price strike { display: block !important;  font-size: 0.9em; margin-bottom: 5px; }
.prd_listWrap > li .brand { margin: 7px 0 10px 0; }

/* padding */
.pt_5 { padding-top: 5px; }
.pt_10 { padding-top: 10px; }

/* margin */
.mt_5 { margin-top: 5px; }
.mt_10 { margin-top: 10px; }

.mb_5 { margin-bottom: 5px; }
.mb_10 { margin-bottom: 10px; }
.mb_20 { margin-bottom: 20px; }


#blk_scroll_wings { left: 0 }

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

body { overflow-x: visible; }

}


/* BASIC css end */