/*
	datetime: 2020-10-09
	Filename: style.css
	Version: 1.0.1
	Author: tianjing
*/

/******************************************************* global ************************************************************/

/******************** RESET **********************/
html, body, address, section ,article, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
fieldset {border: 0; max-width:100%;}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display: block;}

/******************** GENERAL STYLING **********************/
body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif,"Microsoft YaHei"; color: #333;}
a {text-decoration: none; color:#666; outline: none;}
a:hover {text-decoration:none;}
/* list */
ul, ol ,li{ list-style:none;}
/* headings */
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
/* reset webkit search input styles */
input{ margin:0px; padding:0px;  margin:0px; font:100% Arial, Helvetica, clean, sans-serif; font-size-adjust:none; font-stretch:normal; }
textarea{ margin:0px; padding:0px;  margin:0px; font:100% Arial, Helvetica, clean, sans-serif; font-size-adjust:none; font-stretch:normal;}
select{margin:0px; padding:0px; font:100% Arial, Helvetica, clean, sans-serif;  font-size-adjust:none; font-stretch:normal;}
table { border-collapse:collapse; border-spacing:0;}

/********************* CLEARFIX *************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }
.clr{ clear:both;}

/********************* public *********************/
.fl{ float:left;}
.fr{ float:right;}
.mt5{ margin-top:5px;}
.mt7{ margin-top:7px;}
.mt10{ margin-top:10px;}
.mt15{ margin-top:15px;}
.mt20{ margin-top:20px;}
.mt25{ margin-top:25px;}
.mt30{ margin-top:30px;}
.mt40{ margin-top:40px;}
.mt50{ margin-top:50px;}

.ml5{ margin-left:5px;}
.ml10{ margin-left:10px;}
.ml15{ margin-left:15px;}
.ml20{ margin-left:20px;}
.ml25{ margin-left:25px;}
.ml30{ margin-left:30px;}
.ml40{ margin-left:40px;}
.ml50{ margin-left:50px;}

.mr0{ margin-right:0px;}
.mr5{ margin-right:5px;}
.mr10{ margin-right:10px;}
.mr15{ margin-right:15px;}
.mr20{ margin-right:20px;}
.mr25{ margin-right:25px;}
.mr30{ margin-right:30px;}
.mr50{ margin-right:50px;}

.mb0{ margin-bottom:0px;}
.mb5{ margin-bottom:5px;}
.mb10{ margin-bottom:10px;}
.mb15{ margin-bottom:15px;}
.mb20{ margin-bottom:20px;}
.mb25{ margin-bottom:25px;}
.mb30{ margin-bottom:30px;}

.pl0{ padding-left:0px;}
.pl10{ padding-left:10px;}
.pl20{ padding-left:20px;}
.pr0{ padding-right:0px;}
.pr10{ padding-right:10px;}
.pr20{ padding-right:20px;}
.pt10{ padding-top:10px;}
.pt20{ padding-top:20px;}
.pt30{ padding-top:30px;}
.pt40{ padding-top:40px;}
.pb5{padding-bottom:5px;}
.pb10{ padding-bottom:10px;}
.pb20{ padding-bottom:20px;}
.pb40{ padding-bottom:40px;}

/* 对齐方式 */
.tlgc{text-align: center;}

/* 背景 */
body{background: #f8f8f8;}

/* 宽度 */
.swidth{width:1140px; margin:0 auto;}


/******************************************************* global END ************************************************************/



/******************************************************* header ************************************************************/
.header{background: #fff; height: 80px;}
.logo,.logo_t{float: left;}
.logo a{display: block;}
.logo img{display: block;}
.logo_t{display: flex; align-items: center; height: 40px;}
.logo_t a{display: block; display: flex; align-items: center;}
.logo_t img{vertical-align: middle; float: left; height: 50px;}
.logo_t_w{font-size: 30px; font-weight: bold; color: #d93535; float: left;}
.logo_t_w p{font-size: 14px; font-weight: normal; color: #666;}

/* 导航 */
.navbox{height: 30px;display: flex;position: relative;margin:0 0 0 60px; padding:25px 0; flex: 1;}
.nav li a{font-size: 18px; color: #333; padding:0 10px; border-radius: 3px; text-align: center; display: block;}
.down {width: 50px; height: 30px;line-height: 30px;}
ul.nav{overflow: hidden;}
.navbox ul li {height: 30px;line-height: 30px;float: left;list-style: none;width: auto;margin-right: 10px;}
.navmore{align-items: center; display: flex;}
.down_up{color:#333; font-size: 20px; height: 30px; line-height: 30px; font-weight: bold; padding-bottom: 10px; margin-right: 10px;display: none;}
#down_item{
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 100;
    min-width: 180px;
    background: #fff;
    box-shadow: 1px 1px 5px rgba(153,153,153,.3);
    -moz-box-shadow: 1px 1px 5px rgba(153,153,153,.3);
    -webkit-box-shadow:1px 1px 5px rgba(153,153,153,.3);
}
#down_item li{border-bottom: 1px solid #eee;}
#down_item li a{margin: 5px; display: block; font-size: 16px; padding:5px 10px; border-radius: 3px;}

/* hover-Fade */
.hvr-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #f24646;
  color: white;
}

/* 搜索 */
.soso-input{background: #f2f2f2; float: left; width: 250px; height: 40px; padding:0 10px 0 10px; border-radius: 5px 0 0 5px; border:none; line-height: 40px; color: #999; font-size: 14px;outline:medium;}
.soso-btn{ width: 70px; height: 40px; font-size: 14px; border-radius: 0 5px 5px 0; background: #f24646; color: #fff; border:none; cursor: pointer;}

/******************************************************** header END ********************************************************/



/******************************************************** js ************************************************************/
/* 下拉菜单 */
.dl-menuwrapper {width: 50%;height: 40px;float: left;position: absolute;z-index: 10;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;-webkit-perspective-origin: 50% 200%;-moz-perspective-origin: 50% 200%;perspective-origin: 50% 200%;}
.dl-menuwrapper button {border: none;width: 48px;height: 45px;text-indent: -900em;overflow: hidden;position: relative;cursor: pointer;outline: none;}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {background: #fff;box-shadow: 1px 1px 10px rgba(0,0,0,.3);-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}
.dl-menuwrapper li {position: relative;}
.dl-menuwrapper li a {display: block;position: relative;padding: 15px 20px;font-size: 16px;line-height: 20px;font-weight: 300;color: #666;outline: none;}
.no-touch .dl-menuwrapper li a:hover {background: #d93535;color: #fff;}
.dl-menuwrapper li.dl-back > a {padding-left: 30px;background: rgba(0,0,0,0.1);}
.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {position: absolute;top: 0;line-height: 50px;font-family: 'icomoon';speak: none;-webkit-font-smoothing: antialiased;content: "\e000";}
.dl-menuwrapper li.dl-back:after {left: 10px;color: rgba(212,204,198,0.3);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform: rotate(180deg);}
.dl-menuwrapper li > a:after {right: 10px;color: rgba(0,0,0,0.15);}
.dl-menuwrapper .dl-menu {margin: 50px 0 0 0;position: absolute;width: 100%;opacity: 0;pointer-events: none;-webkit-transform: translateY(10px);-moz-transform: translateY(10px);transform: translateY(10px);-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}
.dl-menuwrapper .dl-menu.dl-menu-toggle {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.dl-menuwrapper .dl-menu.dl-menuopen {opacity: 1;pointer-events: auto;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);}

/* 移动搜索 */
.header-button {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;background: none;position: relative;top: -10px;z-index: 1;display: block;width: 60px;height: 60px;margin: 0;padding: 0;outline: none;border: none;cursor: pointer;text-align: center;}
.header-button .icon_so_q{border:2px solid #000; width: 16px; height: 16px; border-radius: 10px; position: absolute; top:14px;left: 19px;}
.header-button .icon_so_b{width: 10px; height: 2px;background: #000;position: absolute; top:34px;left: 35px;transform: rotate(45deg);}
#toggle-menu {float: left;background-position: 0 0;background-color: #bc0023;}
#toggle-search {float: right;background-position: -60px 0;}
#toggle-basket {position: relative;float: right;background-position: -120px 0;}
#toggle-basket:before{position: absolute;top: 5px;left: 0;width: 2px;height: 50px;content: "";background-color: #000;}
#search-form {-moz-transition: max-height, 0.5s;-o-transition: max-height, 0.5s;-webkit-transition: max-height, 0.5s;transition: max-height, 0.5s;position: absolute;top: 60px;left: 0;width: 100%;max-height: 0;overflow: hidden;background-color: #fff;box-shadow: 1px 5px 30px rgba(204,204,204,.3);-moz-box-shadow: 1px 5px 30px rgba(204,204,204,.3);-webkit-box-shadow: 1px 5px 30px rgba(204,204,204,.3);z-index: 100;}
#search-form.open{width: calc(100% - 20px);max-height: 60px;padding:10px;}
/************************************************************ js END ************************************************************/




/************************************************************ footer ************************************************************/

.footer{ background: #eee; font-size: 14px;}
.copyright{color: #aaa;}
.copyright a{ color: #588cfd; transition: all 0.3s ease-in-out;}
.footer-l{float: left; line-height: 30px;}
.footer-r{float: right;}
.footer-m strong{margin-right:20px; font-size: 16px; text-align: left; display: block; float: left;}
.footer-m a{color: #aaa; display: inline-block;}
.footer-m a:hover{color: #f24646; transition: all 0.3s ease-in-out;}
.footer-m span{color: #ccc; margin:0 10px; display: inline-block; vertical-align: middle; font-size: 12px;}
.footer-r{text-align: right;}

/************************************************************ footer END ************************************************************/

/* 媒体查询 */
@media (min-width:1160px) {
	.mm{display:none;}
	.ist li:nth-child(3n+0){margin-right:0;}
}
@media (min-width:992px) and (max-width:1159px) {
  .mm{display:none;}
  .swidth{ width: calc(100% - 20px); padding:0 10px;}
  .more2{background: #fff;}
}
@media (min-width:768px) and (max-width:991px) {
	.mm{display: none;}
	.swidth{ width: calc(100% - 20px); padding:0 10px;}
	.nav{margin: 0 0 0 50px;}
  .nav li a{font-size: 16px;  padding:0 5px;}
  .more2{background: #fff; height: 50px;}
  .left {width: calc(100% - 290px);}

    /* 移动头部 */
    header{background: #fff; padding:10px 0; height: 40px; position: relative;}
  	.logo{text-align: center;}
  	.logo img{height: 40px; vertical-align: middle; display: block;}
  	.button1{width: 40px;height: 40px; line-height: 40px;font-size: 18px; text-align: center; display: block; float: left; cursor: pointer; color: #fff;}
  	.dl-menu{background: #ccc; z-index: 1000;}
  	.icon-sch a{position: absolute; top: 10px; left: 40px; width: 40px; height: 40px; line-height: 40px; text-align: center; z-index: 100; color: #fff;}
    .dl-srh{width: 100%; position: absolute;top: 60px; z-index: 1000; display: none;box-shadow: 1px 1px 5px #999;-moz-box-shadow: 1px 1px 5px #999;-webkit-box-shadow: 1px 1px 5px #999;}
    .dl-srh .ipt{width: 79%; float: left; border:none; border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}
    .dl-srh button{width: 20%; right: 20%;border: none; height: 36px; background: #749ffc;}
  	#toggle-search{display: none;}
}
@media (min-width:640px) and (max-width:767px) {
	.swidth{ width: calc(100% - 20px); padding:0 10px;}
	.header{display: none;}
	.more2{background: #fff; height: 50px;}
	.left {width: 100%;}
	.side{display: none;}

	/* 移动头部 */
	header{background: #fff; padding:10px 0; height: 40px; position: relative;}
  .logo{text-align: center; margin-left: 60px;}
  .logo img{height: 40px; vertical-align: middle; display: block;}
  .logo_t{margin-left: 60px;}
  .logo_t a{display: flex; align-items: center;}
	.logo_t img{vertical-align: middle; float: left; height: 40px;}
	.logo_t_w{font-size: 20px; font-weight: bold; color: #d93535; float: left;}
	.logo_t_w p{font-size: 14px; font-weight: normal; color: #666;}
  .button1{width: 40px; height: 40px; line-height: 40px;font-size: 24px; margin-left: 10px; text-align: center; display: block; float: left; cursor: pointer; color: #000; transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);}
  .dl-menu{background: #ccc; z-index: 1000;}
  .icon-sch a{position: absolute; top: 10px; left: 40px; width: 40px; height: 40px; line-height: 40px; text-align: center; z-index: 100; color: #fff;}
  .dl-srh{width: 100%; position: absolute;top: 60px; z-index: 1000; display: none;box-shadow: 1px 1px 5px #999;-moz-box-shadow: 1px 1px 5px #999;-webkit-box-shadow: 1px 1px 5px #999;}
  .dl-srh .ipt{width: 79%; float: left; border:none; border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}
  .dl-srh button{width: 20%; right: 20%;border: none; height: 36px; background: #749ffc;}
  .soso{margin-right: 10px;}
  #toggle-search{display: none;}
}
@media (min-width:480px) and (max-width:640px) {
	.swidth{ width: calc(100% - 20px); padding:0 10px;}
	.header{display: none;}
	.more2{background: #fff; height: 50px;}
	.left {width: 100%;}
	.side{display: none;}
	.footer{text-align: center;}
	.footer-l{float: none;}
	.footer-m strong{margin-right: 20px; float: none; display: inline-block;}
	.footer-r{float: none; text-align: center;}
	.footer-logo{display: none;}

	/* 移动头部 */
	header{background: #fff; padding:10px 0; height: 40px; position: relative;}
  .logo{text-align: center; margin-left: 60px;}
  .logo img{height: 40px; vertical-align: middle; display: block;}
  .logo_t{margin-left: 60px;}
  .logo_t a{display: block; display: flex;align-items: center;}
	.logo_t img{vertical-align: middle; float: left; height: 40px;}
	.logo_t_w{font-size: 20px; color: #d93535; float: left;}
  .button1{width: 40px; height: 40px; line-height: 40px;font-size: 24px; margin-left: 10px; text-align: center; display: block; float: left; cursor: pointer; color: #000; transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);}
  .dl-menu{background: #ccc; z-index: 1000;}
  .icon-sch a{position: absolute; top: 10px; left: 40px; width: 40px; height: 40px; line-height: 40px; text-align: center; z-index: 100; color: #fff;}
  .dl-srh{width: 100%; position: absolute;top: 60px; z-index: 1000; display: none;box-shadow: 1px 1px 5px #999;-moz-box-shadow: 1px 1px 5px #999;-webkit-box-shadow: 1px 1px 5px #999;}
  .dl-srh .ipt{width: 79%; float: left; border:none; border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}
  .dl-srh button{width: 20%; right: 20%;border: none; height: 36px; background: #749ffc;}
  .soso{display: none;}
  .soso-input{width: calc(100% - 90px);}
  .soso-btn{float: right;}
}
@media (max-width:480px) {
	.mm{position: relative;}
	.swidth{ width: calc(100% - 20px); padding:0 10px;}
	.header{display: none;}
	.more2{background: #fff; height: 50px;}
	.left {width: 100%;}
	.side{display: none;}
	.footer{text-align: center;}
	.footer-l{float: none;}
	.footer-m strong{margin-right: 20px; float: none; display: inline-block;}
	.footer-r{float: none; text-align: center;}
	.footer-logo{display: none;}

	/* 移动头部 */
	header{background: #fff; padding:10px 0; height: 40px; position: relative;}
  	.logo{text-align: center; margin-left: 60px; position: absolute; z-index: 10000;}
  	.logo img{height: 40px; vertical-align: middle; display: block;}
  	.logo_t{margin-left: 60px;position: absolute;z-index: 10000;}
  	.logo_t a{display: block; display: flex;align-items: center;}
	  .logo_t img{vertical-align: middle; float: left; height: 40px; margin-right: 3px;}
	  .logo_t_w{font-size: 20px;color: #d93535; float: left;}
  	.button1{width: 40px; height: 40px; line-height: 40px;font-size: 24px; margin-left: 10px; text-align: center; display: block; float: left; cursor: pointer; color: #000; transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);}
  	.dl-menu{background: #ccc; z-index: 1000;}
  	.icon-sch a{position: absolute; top: 10px; left: 40px; width: 40px; height: 40px; line-height: 40px; text-align: center; z-index: 100; color: #fff;}
    .dl-srh{width: 100%; position: absolute;top: 60px; z-index: 1000; display: none;box-shadow: 1px 1px 5px #999;-moz-box-shadow: 1px 1px 5px #999;-webkit-box-shadow: 1px 1px 5px #999;}
    .dl-srh .ipt{width: 79%; float: left; border:none; border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}
    .dl-srh button{width: 20%; right: 20%;border: none; height: 36px; background: #749ffc;}
  	.soso{display: none;}
  	.soso-input{width: calc(100% - 90px);}
  	.soso-btn{float: right;}
}