/* BASIC css start */
#header { position:relative; width:100%; background:#fff; z-index:100 }
#header.fix { margin-top:-140px; position:fixed; top:0; left:0; right:0 }
#header .headerTopArea { height:40px; background:#373737 }
#header .headerTopArea .headerTop { margin:0 auto; width:1200px }
#header .headerTopArea .headerTop .hd-sns { float:left; height:40px; border-left:1px solid #737373 }
#header .headerTopArea .headerTop .hd-sns li { float:left; width:40px; height:40px; border-right:1px solid #737373 }
#header .headerTopArea .headerTop .hd-sns li a { display:block; color:#fff; font-size:16px; text-align:center; line-height:40px }
#header .headerTopArea .headerTop .hd-gnb { float:right }
#header .headerTopArea .headerTop .hd-gnb li { margin-left:25px; position:relative; float:left }
#header .headerTopArea .headerTop .hd-gnb li a { display:block; height:40px; font-size:10px; color:#fff; line-height:40px; z-index:10 }
#header .headerTopArea .headerTop .hd-gnb li .bubble { margin-left:-19px; position:absolute; top:23px; left:50%; text-align:center; z-index:0;
    -webkit-animation-name: bubble; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: bubble;
    animation-duration: 4s;
    animation-iteration-count: infinite; 
}
#header .headerTopArea .headerTop .hd-gnb li .bubble .arr { height:8px }
#header .headerTopArea .headerTop .hd-gnb li .bubble .arr i { color:#fff; vertical-align:top }
#header .headerTopArea .headerTop .hd-gnb li .bubble .tx { margin-top:-1px; padding:2px 5px; font-size:10px; color:#000; border-radius:3px; border:1px solid #000; background:#fff; -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75); }

@-webkit-keyframes bubble {
    0%   {top:23px;}
    25%  {top:26px;}
    50%  {top:23px;}
    75%  {top:26px;}
    100% {top:23px;}
}

/* Standard syntax */
@keyframes bubble {
    0%   {top:23px;}
    25%  {top:26px;}
    50%  {top:23px;}
    75%  {top:26px;}
    100% {top:23px;}
}

#header .headerBottom { margin:0 auto; position:relative; width:1200px; height:100px }
#header .headerBottom .hd-commu { position:absolute; top:43px; left:2px }
#header .headerBottom .hd-commu li { margin-right:15px; float:left }
#header .headerBottom .hd-logo { text-align:center; line-height:100px }
#header .headerBottom .hd-logo a { font-size:40px; color:#111; font-weight:bold }
#header .headerBottom .hd-quick { position:absolute; top:38px; right:11px }
#header .headerBottom .hd-quick li { float:left }
#header .headerBottom .hd-quick li .search {}
#header .headerBottom .hd-quick li .search .MS_search_word { padding-left:5px; width:188px; height:22px; font-size:11px; color:#000; border:0; border-bottom: 1px solid #000; vertical-align:middle } 
#header .headerBottom .hd-quick li .search a { display:inline-block; font-size:20px }
#header .headerBottom .hd-quick li .search a i { vertical-align:middle }
#header .headerBottom .hd-quick li.cart { margin-left:6px; position:relative; height:22px }
#header .headerBottom .hd-quick li.cart a { display:block; height:22px }
#header .headerBottom .hd-quick li.cart i { font-size:20px; line-height:30px; vertical-align:middle }
#header .headerBottom .hd-quick li.cart .count { padding:2px 4px; position:absolute; top:-2px; left:8px; color:#fff; border-radius:20px; background:#ec2c2c }

#header .headerLnb { margin:0 auto; position:relative; width:1200px }
#header .headerLnb .lnb { position:relative; height:40px; border-top:1px solid #000; border-bottom:1px solid #000 }
#header .headerLnb .lnb > ul { *zoom:1 }
#header .headerLnb .lnb > ul:after { display:block; clear:both; content:'' }
#header .headerLnb .lnb > ul > li { position:relative; float:left; width:133px; height:40px }
#header .headerLnb .lnb > ul > li:last-child{width:136px;}
#header .headerLnb .lnb > ul > li.active { background:#373737 }
#header .headerLnb .lnb > ul > li > a { display:block; margin:11px 0; height:19px; font-weight:bold; text-align:center; line-height:20px; border-left:1px solid #d6d6d6 }
#header .headerLnb .lnb > ul > li.first > a { border-left:none }
#header .headerLnb .lnb > ul > li.active > a { color:#fff; border-left:none }
#header .headerLnb .lnb > ul > li > .depth { display:none; position:absolute; top:41px; left:0; width:638px; height:296px; border:1px solid #373737; border-top:none; background:#fff }
#header .headerLnb .lnb > ul > li > .depth .inner { padding:29px 0 10px 25px; float:left; width:200px }
#header .headerLnb .lnb > ul > li > .depth .inner h3 { padding-left:11px; height:28px; font-size:16px; color:#373737; font-weight:bold; line-height:28px; border-bottom:1px solid #373737 }
#header .headerLnb .lnb > ul > li > .depth .inner ul { padding-left:11px }
#header .headerLnb .lnb > ul > li > .depth .inner ul li { padding-top:7px }
#header .headerLnb .lnb > ul > li > .depth .cate-bn { padding:29px 32px 0 0; float:right }
#header .headerLnb .lnb > ul > li.m6 > .depth { left:-105px }
#header .headerLnb .lnb > ul > li.m7 > .depth { left:-238px }
#header .headerLnb .lnb > ul > li.m8 > .depth { left:-371px }
#header .headerLnb .lnb > ul > li.m9 > .depth { left:-504px ; }
/* BASIC css end */