@charset 'utf-8';

*{margin: 0; padding: 0;}
body{font-size: 14px; font-family: 'Microsoft Yahei', Arial; color: #333;}
li{list-style: none;}
a{text-decoration: none; color: #333;}
img{vertical-align: top;}
input,button{vertical-align: top; border: none; outline: none;}
.clear{clear: both;}

.whole{margin: 0 auto;}

@media (min-width: 1400px) {
	.whole{max-width: 1400px;}
	.banner .content  .whole {max-width: 800px; text-align: left; margin: 0 0 0 5%;}
}
@media (max-width: 1399px) {
	.whole{max-width: 100%; padding: 0 20px;}
}

/* .header{width: 100%; height: 100px; background: rgba(255, 255, 255, 0.4); position: absolute; left: 0; top: 0; z-index: 99;} */
.header{height: 100px; background: #fff;}
.header .content{max-width: 1400px; margin: 0 auto;}
.header .content .logo{float: left; margin-top: 16px;}
.header .content .menu{float: right; margin-top: 32px;}
.header .content .menu>ul>li{float: left; font-size: 18px; line-height: 36px; margin-left: 50px; position: relative; z-index: 99;}
.header .content .menu>ul>li:first-child{margin-left: 0;}
/* .header .content .menu ul li a{color: #000; text-shadow: 1px 1px 1px #fff;} */
.header .content .menu ul li a:hover{color: #cab093;}
/* .header .content .menu>ul>li>ul{display: none; width: max-content; background: rgba(255, 255, 255, 0.3); border: solid #fff 1px; padding: 5px 0; position: absolute; left: 50%; transform: translateX(-50%);} */
.header .content .menu>ul>li>ul{display: none; width: max-content; background: #fff; border: solid #fff 1px; padding: 5px 0; position: absolute; left: 50%; transform: translateX(-50%);}
.header .content .menu>ul>li:hover ul{display: block;}
.header .content .menu ul li ul li{text-align: center; font-size: 16px; line-height: 36px;}
.header .content .menu ul li ul li a{display: block; padding: 0 20px;}

.footer{height: 490px; background: linear-gradient(to bottom, #f8f7f7, #d0d0d0);}
.footer .flogo{text-align: center; padding: 60px 0;}
.footer .fname{float: left;word-wrap: break-word;width:33%;}
.footer .fname h2{font-size: 44px; font-weight: normal; color: #222;}
.footer .fname h4{font-size: 20px; font-weight: normal; color: #000; margin-top: 40px;}
.footer .fname p{font-size: 10px; color: #000; text-transform: uppercase; margin-top: 2px;}
.footer .fmenu{width:33%;margin: 0 auto;}
.footer .fmenu ul li{width: 50%; float: left; font-size: 18px; padding: 20px 0;}
.footer .fmenu ul li a{color: #222;}
.footer .fmenu ul li small{font-size: 12px; margin-left: 10px;}
.footer .fcontact{width:33%;float: right; font-size: 16px; color: #222; line-height: 26px; margin-top: 16px;}
.footer .fcontact .wxcode{width: 68px; margin-top: 10px;}
.footer .copyright{font-size: 16px;}
.footer .copyright p{display: inline-block; line-height: 26px;}

/* 右边客服 */
.rightWindow{position: fixed; z-index: 99; right: 10px; bottom: 10%;}
.rightWindow li{margin-bottom: 3px; font-size: 0;width: 57px; height: 57px; right: 0; position: relative;}
.rightWindow li a{width: 57px;	height: 57px; display: block; position: absolute; z-index: 9; right: 0;	top: 0;	overflow: hidden; background: #292e39; -webkit-transition: all .5s ease; transition: all .5s ease; white-space: nowrap;	font-size: 0;}
.rightWindow li .icon-font:after{width: 30px; height: 30px; content: ""; background-image: url("../images/icon_right.png"); background-repeat: no-repeat; position: absolute; left: calc(50% - 15px); top: calc(50% - 15px);}
.rightWindow li .icon-font{display: inline-block; vertical-align: middle; width: 57px; height: 57px; background-color: #d9d9d9; position: relative;}
.rightWindow li .icon-qq:after{background-position: 0 -120px;}
.rightWindow li .icon-phone:after{background-position: 0 -60px;}
.rightWindow li .icon-ewm:after{background-position: 0 0;}
.rightWindow li .icon-message:after{background-position: 0 -90px;}
.rightWindow li .icon-top:after{background-position: 0 -30px;}
.rightWindow li .wz{display: inline-block;	line-height: 57px; font-size: 14px;	color: #fff; vertical-align: middle; padding-left: 10px;}
.rightWindow li.ewm .ewm-box{position: absolute; z-index: 1; padding: 5px; background: #292e39; width: 130px; right: 120%; bottom: 0; opacity: 0; visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all .7s; transition: all .7s;}
.rightWindow li.ewm .ewm-box p{margin-bottom: 0;}
.rightWindow li.ewm .ewm-box img{max-width: 100%;}
.rightWindow li.ewm .ewm-box:after {content: ''; position: absolute; right: -5px; bottom: 20px;	width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 5px; cursor: pointer; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #292e39; border-right: none;}
.rightWindow li.ewm:hover .ewm-box{opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0);}
.rightWindow li.backtop{cursor: pointer;}
.rightWindow li.backtop .iconfont{color: #fff; background-color: #292e39;}
.rightWindow li:hover a{width: 200px; background: rgb(59,57,57);}
.rightWindow li:hover .icon-font{background-color: #292e39;}
.rightWindow li:hover .icon-qq:after{background-position: -30px -120px;}
.rightWindow li:hover .icon-phone:after{background-position: -30px -60px;}
.rightWindow li:hover .icon-ewm:after{background-position: -30px 0;}
.rightWindow li:hover .icon-message:after{background-position: -30px -90px;}
.rightWindow li:hover .icon-top:after{background-position: -30px -30px;}

.gotop{width: 40px; height: 40px; border: solid #e5e5e5 1px; background: #fff; position: fixed; bottom: 100px; right: 10px; opacity: 0.8; border-radius: 50%; z-index: 9; display: none;}
.gotop::after{width: 30px; height: 30px; content: ''; background: url("../images/icon_right.png") 0 -30px no-repeat; position: absolute; left: 5px; top: 5px;}

.mHeader{display: none;}
.mobilefooter{display: none;}
@media (max-width: 980px) {
	body{padding-bottom: 80px;}
	.header{display: none;}
	.mHeader{width: 100%; height: 60px; display: block; background: #ccaa86; border-bottom: solid #ffe8ce 1px; color: #fff; position: fixed; top: 0; left: 0; z-index: 13;}
	.mHeader .mName{width: 70%; font-size: 16px; margin: 0 auto; text-align: center; line-height: 60px;}
	.mHeader .mName img{height: 50px; vertical-align: middle;}
	.mHeader .mNavbtn{position: absolute; z-index: 10; top: 0; bottom: 0; right: 0; left: 0; margin: auto 0 auto 20px; width: 30px; height: 20px;}
	.mHeader .mNavbtn span,
	.mHeader .mNavbtn:after,
	.mHeader .mNavbtn:before{display: block; height: 2px; width: 100%; background: #fff; -webkit-transition: all .5s; transition: all .5s;}
	.mHeader .mNavbtn span{margin: 7px 0;}
	.mHeader .mNavbtn:after,
	.mHeader .mNavbtn:before{content: ''; -webkit-transform-origin: 7.5%; transform-origin: 7.5%;}
	.mHeader .mNavbtn.clicked span {-webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0;}
	.mHeader .mNavbtn.clicked:after{-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
	.mHeader .mNavbtn.clicked:before{-webkit-transform: rotate(45deg); transform: rotate(45deg);}
	.mHeader .mMenuList{width: 100%; height: calc(100% - 61px); overflow-y: auto; display: none; background: #ccaa86; position: fixed; left: 0; top: 61px;}
	.mHeader .mMenuList ul{}
	.mHeader .mMenuList ul li{font-size: 16px; line-height: 50px; border-bottom: solid #ffe8ce 1px; color: #fff;}
	.mHeader .mMenuList ul li a{display: inline-block; padding: 0px 20px; color: #fff;}
	.mHeader .mMenuList ul li i{float: right; margin: 20px 16px 0 0; border-top: 12px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; transition: all 0.5s;}
	.mHeader .mMenuList ul li i.clicked{transform: rotate(180deg);}
	.mHeader .mMenuList ul li ul{display: none;}
	.mHeader .mMenuList ul li ul li{font-size: 15px; border-top: dashed #ffe8ce 1px; border-bottom: none; padding-left: 1em; position: relative;}
	.mHeader .mMenuList ul li ul li::after{width: 3px; height: 3px; content: ''; background: #ccaa86; border: solid #fff 2px; position: absolute; left: 20px; top: 22px; transform: rotate(45deg);}
	
	.footer{height: 500px; background: linear-gradient(to bottom, #f8f7f7, #d0d0d0);}
	.footer .flogo{text-align: center; padding: 30px 0;}
	.footer .fname{width: 100%; float: none; text-align: center;}
	.footer .fname h2{font-size: 32px;}
	.footer .fname h4{font-size: 18px; margin-top: 10px;}
	.footer .fmenu{display: none;}
	.footer .fcontact{width: 100%; float: none; text-align: center; font-size: 16px; color: #222; line-height: 30px; margin-top: 20px;}
	.footer .fcontact .wxcode{width: 100px; margin-top: 10px; display: none;}
	.footer .copyright{margin-top: 20px; font-size: 14px;}
	.footer .copyright p{display: block; text-align: center;}
	
	.mobilefooter{width: 100%; display: block; background: #fff; border-top: solid #e5e5e5 1px; position: fixed; left: 0; bottom: 0; z-index: 10;}
	.mobilefooter ul{display: flex;}
	.mobilefooter ul li{width: 25%; text-align: center;}
	.mobilefooter ul li a{display: block; font-size: 16px; padding: 7px 0; color: #333;}
	.mobilefooter ul li i{width: 40px; height: 40px; display: inline-block; background: url("../images/footer.png") no-repeat;}
	.mobilefooter ul li.fhome i{background-position: 0 0;}
	.mobilefooter ul li.fabout i{background-position: 0px -40px;}
	.mobilefooter ul li.fproduct i{background-position: 0 -80px}
	.mobilefooter ul li.fcontact i{background-position: 0 -120px;}
	.mobilefooter ul li p{line-height: 22px;}
	
	.rightWindow{display: none;}
	.gotop{display: block;}
}