/* BASIC css start */
.md-modal2 .mapWrap .depth2UL {margin-top:10px;}
.md-modal2 .mapWrap .depth2UL .depth2 {display:block;border:0px solid #000;width:100%;}
.md-modal2 .mapWrap .depth2UL .depth2 .depth2Title {display:block;font-size:13px;color:#333;}
/************ 로고 탑메뉴 원본 ***********/
/*
*/
/************ 네비게이션 원본 ***********/
/*
*/
/************** 레이어 팝업 ****************/
.Pstyle {
opacity: 0;
display: none;
position: relative;
width: auto;
border: 5px solid #fff;
padding: 20px;
background-color: #fff;
}
.b-close {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
display: inline-block;
cursor: pointer;
}
/************** //레이어 팝업 ****************/
/*
*/
/************** GNB MENU ****************/
.cd-secondary-nav {}
.cd-secondary-nav #menuLogo {position:relative;}
.cd-secondary-nav #menuLogo .centerBox {overflow:visible;padding:0;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner {}
.cd-secondary-nav #menuLogo .centerBox .gnbInner h1 a {padding:0;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox {margin-top:33px;background:#fff;border-bottom:3px solid #000;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column {float:none;position:relative;width:100%;max-width:1140px;margin:0 auto;height:auto;padding:40px 0;background:#fff;border-top:3px solid #000;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .point {position:absolute;z-index:10;width:20px;height:14px;background:url('/design/sonstwchs/skin/topmenu_on.png') no-repeat left top;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column #기타가공류 {top:-14px;right:30px;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox #간편식-2 {background:url('/design/sonstwchs/skin/menu1.jpg')no-repeat left top;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox #생물류-2 {background:url('/design/sonstwchs/skin/menu2.jpg')no-repeat left top;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox #데친나물류-2 {background:url('/design/sonstwchs/skin/menu3.jpg')no-repeat left top;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox #건나물류-2 {background:url('/design/sonstwchs/skin/menu4.jpg')no-repeat left top;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox #냉동식품류-2 {background:url('/design/sonstwchs/skin/menu5.jpg')no-repeat left top;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox #기타가공류-2 {background:url('/design/sonstwchs/skin/menu1.jpg')no-repeat left top;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box {padding-left:300px;height:auto;min-height:168px;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box h3 {display:block;margin:0;padding:0;color:#333;font-size:18px;font-weight:400;letter-spacing:-0.05em;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box h3 strong {font-weight:700;color:#000;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box ul,li {list-style:none;float:left;margin:0;padding:0;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box ul {margin-top:20px;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box li {margin-left:-1px;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box li a {display:block;margin:0;padding:0 20px;font-size:16px;font-weight:400;color:#000;line-height:2.6em;border:1px solid #ccc;}
.cd-secondary-nav #menuLogo .centerBox .gnbInner .nav .subBox .nav-column .depth2Box li a:hover {background:#eee;color:#000;font-weight:700;}
/************** // GNB MENU ****************/
.leftBTN {position:fixed;width:50px;height:50px;background:#14b3e9;right:0;top:51px;z-index:100;}
#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }
#redBox {background:#f2f2f5;border-top:4px solid #14b3e9;}
.centerBox {overflow:hidden;width:1140px;margin:0 auto;padding:15px 0px;}
#redBox .quick p {display:block;margin:0padding:0;float:left;line-height:15px;font-size:14px;color:#8c8c8c;}
#redBox .quick strong {font-weight:700;color:#414141;}
#redBox .quick ul,li {list-style:none;margin:0;padding:0;}
#redBox .quick ul {float:right;}
#redBox .quick li {float:left;border-right:0px solid #c3c3c3;padding:0 8px;}
#redBox .quick li a {display:block;float:left;font-size:12px;color:#787878;text-decoration:none;}
#redBox .quick li .basket {display:block;float:left;font-size:12px;padding:2px 5px;background:#af241b;color:#fff;margin-top:-2px;
border-radius:10px;
-o-border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
}
#menuLogo {}
#menuLogo .centerBox {width:1140px;margin:0 auto;}
#menuLogo .centerBox .tlogo {float:left;padding:15px 0;}
#menuLogo .centerBox ul,li {list-style:none;margin:0;padding:0;}
#menuLogo .centerBox ul {float:right;margin-right:-25px;}
#menuLogo .centerBox li {float:left;}
#menuLogo .centerBox li a {font-size:17px;font-weight:700;color:#252323;padding:0 25px;line-height:83px;}
#기타가공류 {background:#eee;}
/* header */
#header { position:relative; width:100%; background:#fff; z-index:100; }
#header .headerTnb { margin:0 auto; position:relative; width:1100px; height:45px; *zoom:1 }
#header .headerTnb:after { display:block; clear:both; content:'' }
#header .headerTnb .tnbLeft { float:left }
#header .headerTnb .tnbLeft li { padding-right:9px; float:left }
#header .headerTnb .tnbLeft li a { display:block; height:45px; color:#6d6d6d; line-height:45px }
#header .headerTnb .tnbLeft li.noticeLine { padding-left:23px }
#header .headerTnb .tnbLeft li.noticeLine p { padding-left:21px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/ico_volume.gif) 0 17px no-repeat }
#header .headerTnb .tnbLeft li.noticeLine p a { font-size:11px; color:#7a7a7a; line-height:49px; line-height:53px \0/IE8+9 }
#header .headerTnb .tnbRight { float:right }
#header .headerTnb .tnbRight li { padding-left:10px; float:left }
#header .headerTnb .tnbRight li a { display:block; height:45px; color:#6d6d6d; line-height:45px; font-family:Verdana }
#header .headerTop { margin:0 auto; position:relative; width:1100px; height:77px; *zoom:1 }
#header .headerTop:after { display:block; clear:both; content:'' }
#header .headerTop .tlogo { margin:0 210px; padding-top:12px; text-align:center }
#header .headerTop .searchArea { position:absolute; top:12px; right:0; width:204px; height:40px; border-bottom:1px solid #000 }
#header .headerTop .searchArea .search { position:relative; width:204px; height:40px }
#header .headerTop .searchArea .search input { padding-left:10px; width:164px; height:39px; line-height:40px; border:none; background:#fff }
#header .headerTop .searchArea .search a { display:block; position:absolute; top:0; right:0; width:30px; height:40px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/btn_search.gif) 0 0 no-repeat }
#header .headerGnb { min-width:1100px; border-bottom:1px solid #231f20 }
#header .headerGnb .gnbInner { margin:0 auto; position:relative; width:1100px }
#header .headerGnb .gnbInner ul { *zoom:1 }
#header .headerGnb .gnbInner ul:after { display:block; clear:both; content:'' }
#header .headerGnb .gnbInner ul li { margin:0 31px; position:relative; float:left }
#header .headerGnb .gnbInner ul li a { display:block; height:41px; font-size:14px; color:#202020; line-height:41px; white-space:nowrap; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent }
#header .headerGnb .gnbInner ul li a:before { content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px; z-index:-1; background:#231f20; -webkit-transition-property:left, right; transition-property:left, right; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out }
#header .headerGnb .gnbInner ul li a:active:before,
#header .headerGnb .gnbInner ul li a:focus:before,
#header .headerGnb .gnbInner ul li a:hover:before { left:0; right:0 ;}
#header .headerGnb .gnbInner ul li a:hover { *height:39px; *border-bottom:2px solid #000; }
#header .headerGnb .gnbInner ul li.first { padding-left:0 }
#header .headerGnb .gnbInner ul li.last { padding:0 0 0 40px }
/* header */
#hdHeader {
position: fixed; top: 0; left: 0; right: 0; z-index: 30;
height: 140px;
background: #fff;
transition: all 0.3s ease 0s;
border-bottom: 1px solid #e8e8e8;
overflow:hidden;
/*
overflow-x: hidden;position: relative;left: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
*/
}
#wrap #hdHeader.on, #wrap #hdHeader.onscroll {
background: #fff;
transition: all 0.3s ease 0s;
border-bottom: 1px solid #e8e8e8;
}
#topGray {display:block;overflow:hidden;background:#f4f4f6;border-top:4px solid #14b3e9;}
#topGray .centerBox {width:1140px;margin:0 auto;padding:0 20px;}
#topGray .title {float:left;line-height:45px;font-size:14px;color:#8c8c8c;font-weight:400;}
#topGray strong {color:#414141;font-weight:700;}
#topGray ul,li {list-style:none;margin:0;padding:0;}
#topGray ul {overflow:hidden;float:right;}
#topGray li {float:left;padding:16px 0;}
#topGray li a {float:left;line-height:13px;font-size:12px;color:#787878;font-weight:400;padding:0 12px;border-right:1px solid #d6d6d6;text-decoration:none;}
#topGray li a:hover {font-weight:700;color:#000;}
/* scroll convert */
#hdHeader.onscroll {
height: 50px;
transition: all 0.3s ease 0s;
}
#hdHeader.onscroll .section h1 {
padding-top: 20px;
transition: all 0.3s ease 0s;
}
#hdHeader.onscroll #gnb {
padding-top: 0;
transition: all 0.3s ease 0s;
}
#hdHeader.onscroll #gnb > ul > li > a {
padding-bottom: 21px;
}
#hdHeader.onscroll .section .menu_r {
padding-top: 17px;
transition: all 0.3s ease 0s;
}
#hdHeader.onscroll #header .submenu {
top: 56px;
transition: all 0.3s ease 0s;
}
#hdHeader img {
vertical-align: top;
}
#header .section h1 {
float: left;
padding: 56px 0 0 0;
width: 144px;
transition: all 0.3s ease 0s;
}
#header .section h1 .logo_big img {
max-height: 126px;
}
#header .section h1 .logo_small {
display: none;
font-size: 28px; color: #000; line-height: 30px; font-weight: 700;
}
#header .section h1 .logo_small img {
max-height: 56px;
}
#header .section h1 a {
text-decoration: none;
}
#gnb {
float: left;
padding: 36px 0 0 0;
transition: all 0.3s ease 0s;
}
#gnb > ul {
float: left;
}
#gnb > ul > li {
float: left;
}
#gnb > ul > li > a {
display: block;
font-size: 15px; color: #111; font-weight: 700; line-height: 15px;
text-decoration: none;
position: relative;
padding: 22px 15px 55px;
}
#gnb > ul > li:hover > a {
color: #1500de;
}
#gnb > ul > li:hover > a:after {
content: '';
position: absolute; top: 41px; left: 15px; right: 15px;
height: 3px;
background: #1500de;
}
#header .section .menu_r {
float: right;
padding: 53px 0 0 0;
transition: all 0.3s ease 0s;
}
#header .section .menu_r li {
float: left;
padding: 0 0 0 15px;
position: relative;
}
#header .section .menu_r li:first-child {
padding: 0;
}
#header .section .menu_r li a {
display: block;
text-decoration: none;
}
#header .section .menu_r li.text a {
font-size: 12px; color: #111; font-weight: 400; line-height: 20px;
}
#header .section .menu_r li.icon a {
width: 24px; height: 24px;
font-size: 24px; color: #111; font-weight: 400; line-height: 24px;
margin: -4px 0 0 0;
}
#header .section .menu_r li.icon.cart a > span {
position: absolute; top: -7px; right: -6px;
display: block;
width: 16px; height: 16px;
font-size: 10px; color: #fff; font-weight: 400; line-height: 16px;
font-family: 'Hind';
background: #eb3123;
border-radius: 50%;
text-align: center;
}
#header .section .menu_r li.icon.allmenu a {
color: #1500de;
}
#header .submenu {
display: none;
position: absolute;
top: 126px;
left: 0;
right: 0;
background: #fff;
min-height: 350px;
overflow: hidden;
border-bottom: 1px solid #e8e8e8;
transition: all 0.3s ease 0s;
}
/*
#gnb > ul > li:nth-child(2) .submenu {
display: block !important;
}
*/
#header .submenu .inner {
min-width: 1040px; max-width: 1280px;
box-sizing: border-box;
padding: 0 40px 10px 200px; margin: 0 auto;
min-height: 350px;
position: relative; z-index: 1;
}
#header .submenu .inner .bg_img {
position: absolute; top: 0; right: 0;
}
#header .submenu .inner h2 {
padding: 20px 0 10px;
position: relative; z-index: 2;
}
#header .submenu .inner h2 a {
font-size: 30px; line-height: 30px; color: #000; font-weight: 700;
text-decoration: none;
}
#header .submenu .inner ul {
position: relative; z-index: 2;
}
#header .submenu .inner li {
padding: 4px 0;
}
#header .submenu .inner li a {
font-size: 15px; line-height: 1.5; color: #898989;
text-decoration: none;
}
#header .submenu .inner li a:hover {
color: #000;
}
#header .pop_fixo {
display: none;
position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
background: #fcd856;
overflow: auto;
}
#header .pop_fixo .box {
width: 1000px; height: 100%;
margin: auto;
display: table;
}
#header .pop_fixo .box .inner {
display: table-cell;
vertical-align: middle;
}
#header .pop_fixo .inner .area_top {
margin: 0 0 80px;
position: relative;
}
#header .pop_fixo .logo_pop {
position: absolute; left: 0; bottom: 0;
}
#header .pop_fixo .btn_close {
float: right;
width: 42px; height: 42px;
border-radius: 50%;
border: 4px solid #fff;
text-align: center;
line-height: 42px;
font-size: 20px; color: #fff; font-weight: 700;
cursor: pointer;
transition: all 0.3s ease 0s;
}
#header .pop_fixo .btn_close:hover {
color: #000;
border-color: #000;
transition: all 0.3s ease 0s;
}
#header .pop_allmenu {
}
#header .pop_allmenu .inner > ul {
margin: 80px 0 0 0;
}
#header .pop_allmenu .inner > ul.first {
margin: 0;
}
#header .pop_allmenu .inner > ul > li {
float: left;
width: 14.28%;
}
#header .pop_allmenu .inner > ul > li > a {
font-size: 16px; line-height: 16px; color: #000; font-weight: 700;
text-decoration: none;
margin: 0 0 5px;
}
#header .pop_allmenu .inner > ul > li > ul > li {
padding: 2px 0;
}
#header .pop_allmenu .inner > ul > li > ul > li > a {
font-size: 13px; line-height: 1.5; color: #000;
}
#header .pop_search {
}
#header .pop_search .inner .area_search {
margin: 150px 0 0 0;
text-align: center;
}
#header .pop_search .inner .area_search .a_input input {
font-size: 20px; line-height: 30px; color: #000; font-weight: 700;
padding: 0; margin: 0 auto 60px;
border: 0; border-bottom: 3px solid #000;
width: 60%; max-width: 600px; height: 30px;
text-align: left;
background: transparent;
}
#header .pop_search .inner .area_search .a_input input::-webkit-input-placeholder { color: #000; }
#header .pop_search .inner .area_search .a_input input:-moz-placeholder { /* FF 4-18 */ color: #000; }
#header .pop_search .inner .area_search .a_input input::-moz-placeholder { /* FF 19+ */ color: #000; }
#header .pop_search .inner .area_search .a_input input:-ms-input-placeholder { /* IE 10+ */ color: #000; }
#header .pop_search .inner .area_search a {
display: inline-block;
font-size: 20px; line-height: 40px; color: #fff;
text-decoration: none;
position: relative;
margin: 0 auto;
}
#header .pop_search .inner .area_search a:after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0;
height: 3px;
background: #fff;
}
#header .pop_search .inner .area_search a:hover {
color: #000;
}
#header .pop_search .inner .area_search a:hover:after {
background: #000;
}
/* BASIC css end */