/* HEADER STYLE */
header {
  background-color: #fff;
  position: relative;
  z-index: 999;
}
.img_none{display: none !important;}
.img_block{display: block !important;}
.img_top{padding: 0 !important;}
.img_top img{max-height: 64px;}
header nav .container-1{position: relative;}
header nav .container-1 form{position: absolute;top: 0;right: 15px;}
.float-top{margin-top: 20px;}
@media(max-width: 992px){
  .img_none{display: block !important;}
  .img_block{display: none !important;}
}
header > .top {
  height: 34px;
  line-height: 34px;
  background-color: #484848;
  font-size: 14px;
}
header > nav ul.fir li{position: relative;}
 header > nav ul.fir > li ul {
    position: absolute;
    top: 90%;
    left: 50%;
    line-height: 55px;
    z-index: 9999;}

header > .top .float-left > a {
  color: #fff;
}
header > .top .float-right,
header > .top .float-right > a {
  color: #ccc;
}
header > .top .float-right > a:hover {
  text-decoration: underline!important;
}
header > .top .float-right {
  padding: 0 10px;
}
header > .top .sign::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: -1px;
  width: 2px;
  height: 20px;
  margin-top: -10px;
  background-color: #ccc;
}
header > .top .float-left > i.iconfont {
  font-size: 26px;
  vertical-align: sub;
}
header > .top .float-right > i.iconfont {
  font-size: 22px;
  vertical-align: sub;
}
header > nav form {
  position: relative;
  line-height: 0;
}
header > nav form > input,
header > nav form > button {
  top: 10px;
  height: 36px;
  width: 36px;
  border-radius: 50px;
  border: 1px solid #bbb;
  background: none;
  outline: none!important;
}
header > nav form > input {
  position: relative;
  line-height: 36px;
}
header > nav form > button {
  right: 0;
  line-height: 25px;
  border: none;
  text-align: center;
  color: #bbb;
  font-size: 24px!important;
  z-index: 9999;
}
header > nav form.form_s{border: 1px solid #000;}

@media (min-width: 992px) {
  header {
  height: 100px;
}
header > nav{position: fixed;width: 100%;top: 0;left: 0;background-color: #fff;}
  header > nav {
    height: 100px;
    line-height: 100px;
  }
  header > nav ul.fir > li {
    position: relative;
    margin: 0 15px;
  }
  header > nav ul.fir > li > a {
    display: inline-block;
    position: relative;
    padding: 0 12px;
    color: #555;
  }
  header > nav ul.fir > li:hover > a {
    color:  #000;
  }
  header > nav ul.fir > li > a > .line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 36px;
    margin-top: -18px;
    line-height: 0;
    text-align: center;
  }
  header > nav ul.fir > li > a > .line > span {
    opacity: 0;
    display: inline-block;
    width: 0;
    height: 100%;
    border: 1px solid  #000;
    border-radius: 5px;
  }
  header > nav ul.fir > li:hover > a > .line > span {
    opacity: 1;
    width: 100%;
  }
  header > nav ul.fir > li > ul {
    position: absolute;
    top: 90%;
    left: 50%;
    line-height: 55px;
    z-index: 9999;
    white-space: nowrap;
    transform: translateX(-50%);
    text-align: center;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition:all .4s;
  }
  header > nav ul.fir > li > ul::before {
    content: '';
    visibility: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-bottom: 10px solid  #d00020;
    border-right: 10px solid transparent;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition:all .2s;
  }
  header > nav ul.fir > li:hover > ul::before {
    visibility: visible;
    top: -10px;
  }
  header > nav ul.fir > li > ul > li {
    margin: 0 auto;
    width: 0;
    overflow: hidden;
    background-color:  rgba(255,255,255,0.8);
    text-align: left;
  }
  header > nav ul.fir > li:hover > ul > li {
    width: 100%;
  }
  header > nav ul.fir > li > ul > li > a {
    position: relative;
    display: block;
    padding: 0 20px;
    margin: 0 20px;
    color: #000;
  }
  header > nav ul.fir > li > ul > li:not(:last-of-type) > a {
    border-bottom: 1px solid #000;
  }
  header > nav ul.fir > li > ul > li > a::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    border: 1px solid #000;
  }
  header > nav form > input:hover,
  header > nav form > input:focus,
  header > nav form > button:hover + input {
    width: 200px;
    padding-left: 10px;
    padding-right: 35px;
  }
  /* placeholder */
  header > nav form > input:-moz-placeholder {
    color: #aaa;
    opacity: 0;
    font-size: 14px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition:all .4s;
  }
  header > nav form > input::-moz-placeholder {
    color: #aaa;
    opacity: 0;
    font-size: 14px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition:all .4s;
  }
  header > nav form > input:-ms-input-placeholder{
    color: #aaa;
    opacity: 0;
    font-size: 14px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition:all .4s;
  }
  header > nav form > input::-webkit-input-placeholder{
    color: #aaa;
    opacity: 0;
    font-size: 14px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition:all .4s;
  }
  header > nav form > input:hover:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 1;}
  header > nav form > input:hover::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 1;}
  header > nav form > input:hover:-ms-input-placeholder{ opacity: 1;}
  header > nav form > input:hover::-webkit-input-placeholder{ opacity: 1;}
  header > nav form > input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 1;}
  header > nav form > input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 1;}
  header > nav form > input:focus:-ms-input-placeholder{ opacity: 1;}
  header > nav form > input:focus::-webkit-input-placeholder{ opacity: 1;}
  header > nav form > button:hover + input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 1;}
  header > nav form > button:hover + input::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 1;}
  header > nav form > button:hover + input:-ms-input-placeholder{ opacity: 1;}
  header > nav form > button:hover + input::-webkit-input-placeholder{ opacity: 1;}
}
@media (max-width: 1366px) AND (min-width: 992px) {
  header > nav ul.fir > li {
    margin: 0 10px;
  }
}
@media (max-width: 1200px) {
  header > nav > .container {
    position: relative;
  }
  header > nav form {
    position: absolute;
    bottom: 100%;
    right: 18px;
  }
  header > nav form > input,
  header > nav form > button {
    top: 0;
  }
}
@media (max-width: 992px) {
  header > .logo {
    height: 60px;
    line-height: 0;
  }
  header > .logo > .container,
  header > .logo a,
  header > .logo img {
    height: 100%;
  }
  header > .logo a{line-height: 40px;}
  header > .logo img{max-height: 40px;}
  header .menu-toggler {
    top: 0;
    right: 15px;
    height: 100%;
    padding-top: 19px;
    overflow-x: hidden;
  }
  header .menu-toggler > span {
    position: relative;
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 5px;
    background-color: #000;
  }
  header .menu-toggler > span.top {
    top: 0;
  }
  header .menu-toggler > span.middle {
    left: 0;
    top: 5px;
  }
  header .menu-toggler > span.bottom {
    top: 10px;
  }
  header .menu-toggler.active > span {
    background-color:  #d00020;
  }
  header .menu-toggler.active > span.middle {
    left: 100px;
  }
  header .menu-toggler.active > span.top {
    top: 10px;
    transform: rotate(45deg);
  }
  header .menu-toggler.active > span.bottom {
    top: 2px;
    transform: rotate(-45deg);
  }
  header > nav {
    display: none;
    position: absolute;
    top: 94px;
    width: 100%;
    height: auto;
    z-index: 99;
    box-shadow: 0 2px 10px #eee;
    background-color: #fff;
  }
  header > nav ul.fir {
    line-height: 45px;
  }
  header > nav ul.fir > li {
    position: relative;
    border-bottom: 1px dotted #ccc;
  }
  header > nav ul.fir > li > a {
    display: block;
    color: #000;
  }
  header > nav ul.fir > li.active > a {
    color:  #d00020;
  }
  header > nav ul.fir > li > ul {
    display: none;
    padding-left: 15px;
    border-left: 1px dotted #ccc;
    line-height: 40px;
    font-size: 15px;
    background: #fff;
  }
  header > nav ul.fir > li > ul > li > a {
    color: #777;
    padding-right: 12px;
  }
  header > nav ul.fir > li > i.iconfont {
    top: 0;
    right: 0;
    font-size: 14px;
    color: #555;
    width: 40%;
    text-align: right;
  }
  header > nav ul.fir > li > i.icon-minus {
    color:  #d00020;
  }
  header > nav form {
    top: -45px;
    right: 60px;
  }
  header > nav form > input,
  header > nav form > button {
    width: 30px;
    height: 30px;
  }
  header > nav form > input {
    width: 200px;
    padding-left: 15px;
    padding-right: 30px;
    line-height: 30px;
  }
  header > nav form > button {
    padding: 0;
    font-size: 22px!important;
  }
  header > nav form > input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size: 14px;color: #ccc;}
  header > nav form > input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size: 14px;color: #ccc;}
  header > nav form > input:-ms-input-placeholder{ font-size: 14px;color: #ccc;}
  header > nav form > input::-webkit-input-placeholder{ font-size: 14px;color: #ccc;}
}
@media (max-width: 768px) {
  header > .top{height: 0;line-height: 0;}
  header > .top {background: none;}
  header > .top .cart_right{position: absolute;right: 40px;top: 24px;}
  header > nav form,header > .top .tel,header > .top .msg ,header > .top .cart{
    display: none;
  }
  header > nav {
    top: 60px;
  }
  .header > .top .cart_s{display: block;}
}
@media (max-width: 576px) {
  header > nav form > input {
    width: 150px;
  }
}

.cart_s{display: inline-block;vertical-align: top;padding: 0 4px;}
.cart_s img{height: 16px;width: auto;}
.cart_s a{font-size: 14px;color: #ccc;}



/* FOOTER */
footer {
  background-color: #f4f7fc;
}
footer ul.fir {
  padding: 50px 0;
}
footer ul.fir > li {
  width: 20%;
  padding-right: 15px;
}
footer ul.fir > li > ul > li {
  margin-top: 10px;
  color: #777;
  font-size: 14px;
}
footer ul.fir > li > ul > li > a {
  color: #777;
}
footer ul.fir > li > ul > li > a:hover {
  color:  #d00020;
}
footer > .cpr {
  padding: 15px 0 50px;
  font-size: 15px;
  background-color: #e5ebf4;
}
@media (max-width: 768px) {
  footer ul.fir {
    padding: 30px 0;
  }
  footer ul.fir > li {
    width: 100%;
    text-align: center;
  }
  footer ul.fir > li:not(.f-contact) {
    display: none;
  }
  footer > .cpr {
    text-align: center;
  }
}



/* CONTACT-BTN */
.contact-btn {
  right: 50px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.contact-btn > .iconfont {
  font-size: 30px;
}
.contact-btn > .icon-msg1 {
  display: block;
  background-color:  #d00020;
}
.contact-btn > .icon-qq {
  display: none;
  background-color: #44afe7;
}
.contact-btn:hover > .icon-msg1 {
  display: none;
}
.contact-btn:hover > .icon-qq {
  display: block;
}
@media (max-width: 576px) {
  .contact-btn {
    right: 15px;
    bottom: 15px;
  }
}


/* CustomerService */
.cs-div{float:right;width:40px;text-align:center;}
.cs-div_none{display: none;}

.cs-item{position:relative;background: rgba(56,56,56,0.4);margin-bottom: 4px;}
.cs-item:last-child{margin-bottom: 0;}
.cs-item a{color:#ddd;width: 100%;height:44px;position:relative;z-index:99; display:inline-block;cursor:pointer;}
.cs-item a .iconfont img{width: 24px;height: auto;}
.cs-item a i{width:40px;height: 44px; font-size:24px; text-align:center; background: rgba(56,56,56,0.4);display:inline-block;}
.cs-item a:hover,.cs-item:hover a{ color:#aaa; text-decoration:none;}
.cs-item span{ display: inline-block; padding: 10px;line-height:24px; font-size:14px; white-space:nowrap;color:#fff;background: rgba(56,56,56,0.4); 
  position:absolute; top:0; right:-200px; z-index:1; _display:none;}
.cs-item span.weixin_img{position: absolute;top: -82px;}
.cs-item span a{ color:#fff; height:auto; position:relative; border:none;}
.cs-item span a:hover, .cs-item:hover span a{ color:#fff;}
.cs-item-cur{ border:none;}
.cs-item-cur a{ color:#fff;}
.cs-item:hover a i,.cs-item:hover span{ background: #d00020;}
.cs-tab-backtop{ display:none;}
#our-sns a{ width:70px; height:70px; text-indent:-9999px; display:block; background:url(../images/icon-sns.png) no-repeat 0 0; 
  cursor:pointer; position:relative; z-index:999999;}
#our-sns a:hover{ opacity:0.9; -moz-opacity:0.9; -khtml-opacity:0.9; filter:alpha(opacity=90);}
#our-sns .cs-tab-tip a:link, #our-sns .cs-tab-tip a:visited, #our-sns .cs-tab-tip a:hover{ color:#fff; 
  text-decoration:none; width:auto; height:auto; text-indent:0; background:none; z-index:99999;}

@media(min-width:481px){
  .cs-cs-item{position:fixed;top:50%; transform: translateY(-50%);right:0; z-index: 999;}
  .cs-tab-backtop {position: fixed;bottom: 20px; right: 20px;}
  .cs-tab-backtop a .iconfont img{width: 20px;}
}

@media only screen and (max-width:480px){
    .cs-div{background:#383838; position:fixed; z-index: 999; top:inherit; bottom:0; width:100%;transform: none;}
    .cs-item{ float:left; width:20%; border:none;margin-bottom: 0;}
    .cs-item a{ height:44px; border:none;}
    .cs-item a i{ width:100%; line-height:44px;}
    .cs-item span{ display:none;}
    .cs-tab-backtop{ display:block;}
    .cs-item sup{ top:-10px; left:41%;}
    #iframe-header{ height:30px; line-height:30px;}
    #ifh-r .back-theme{ float:right;}
    #commentform p.cmt-submit span{ display:none;}
    .error404{ padding:30px 20px;}
    .error404 h4{ font-size:20px;}
    .error404 span{ display:none;}
    
    .foot-nav .widget-column{ width:50%;}
    .cs-div_block{display: none;}
    .cs-div_none{display: block;}
}