html {background-color: #fff;}
body::before {content: 'w';display: none;}
body {line-height: 1.5;font-size: 16px;font-family: inherit}
.wrap {width: 1200px;max-width: 100%;margin-left: auto;margin-right: auto;}
.header-box {position: absolute;z-index: 10;top: 0;left: 0;padding: 25px 10px;width: 100%;}
.header-box .wrap {display: flex;align-items: center;}
.header-box .logo {flex-shrink: 0;}
.header-box .mainnav-box {flex: 1 auto;display: flex;justify-content: flex-end;}
.header-box .mainnav {display: flex;align-items: center;}
.header-box .mainnav>li {position: relative;}
.header-box .mainnav a {font-weight: 400;color: #222;padding: 1.2em 2em;line-height: 50px;white-space: nowrap;display: block;position: relative;}
.header-box .tel {margin-left: 100px;}
.header-box .btn-showNav {display: none;}
.header-box .sub {position: absolute;top: 100%;left: -25%;background-color: #dd102f;min-width: 150%;text-align: center;z-index: 0;border-radius: 4px;display: none;box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .08);}
.header-box .sub li a {font-size: 15px;font-weight: 400;line-height: 1.3;padding: 1em;}
.header-box .sub::before {content: '';position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);border: 7px solid transparent;border-bottom: 6px solid #dd102f;}
/*footer*/
.footer-box {background-color: #474651;color: #bbb;}
.footer-box .cont {padding: 40px 0;display: flex;font-size: 13px;}
.footer-box .top {display: flex;align-items: center;}
.footer-box .top p {margin-left: 40px;}
.footer-box .btm {padding-top: 20px;white-space: nowrap;}
.footer-box .btm>ul {display: flex;}
.footer-box .btm>ul>li {flex-shrink: 0;width: 7em;}
.footer-box .btm>ul>li>a {font-size: 14px;color: #fff;margin-bottom: 8px;display: block;}
.footer-box .btm a+ul {display: flex;flex-flow: column;}
.footer-box .btm a+ul a {display: block;padding: 4px 0;}
.footer-box .text {flex: 1 auto;}
.footer-box .img {flex-shrink: 0;display: flex;flex-flow: row;align-items: center;text-align: center;line-height: 3;}
.footer-box .img li {display: flex;flex-flow: column;align-items: center;}
.footer-box .img li+li {margin-left: 20px;}
.footer-box .copyright {padding: 20px 0;font-size: 13px;}
.footer-box .copyright i {padding: 0 24px;}
@media (any-hover:hover) {.header-box li:hover>.sub {display: block;}
	.header-box .sub a:hover {background-color: rgba(0, 0, 0, .1);}
	.footer-box .btm a:hover {color: #dd102f;}
	.mainnav a::after {position: absolute;content: '';width: 0;height: 2px;background-color: #DD102F;bottom: 15px;left: 0;right: 0;margin: auto;transition: all .3s;}
	.mainnav a:hover::after {width: 80%;}
}
@media screen and (max-width:768px) {.header-box .mainnav .on a::after {display: none;}
	.header-box {position: fixed;top: 0;height: auto;background-image: none;padding: 0 10px;z-index: 40;}
	.header-box .logo img {max-height: 40px;}
	.header-box .mainnav {display: none;}
	.header-box .btn {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;cursor: pointer;position: relative;transition: all .3s;}
	.header-box .btn::before {width: 30px;height: 3px;border-radius: 6px;background-color: #dd102f;opacity: .9;box-shadow: 0 -8px 0 0 #dd102f, 0 8px 0 0 #dd102f;content: '';}
	.header-box .btn-close::before {box-shadow: none;background-color: #fff}
	.header-box .btn-close::after {width: 3px;height: 30px;border-radius: 6px;background-color: #fff;opacity: .9;content: '';position: absolute;}
	.header-box .btn-close {transform: rotate(45deg);}
	.header-box .tel {display: none;}
	#mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, .7);z-index: 100;overflow: hidden;}
	#mask+.header-box {position: fixed;z-index: 101;}
	#mask+.header-box .mainnav {position: fixed;display: flex;background-color: #161616;top: 0;right: -100%;width: 100%;height: 100%;flex-flow: column;padding-top: 60px;overflow-y: scroll;overflow-x: hidden;}
	#mask+.header-box .mainnav li {width: 100%;height: auto;}
	#mask+.header-box .mainnav li+li {border-top: 1px solid rgba(255, 255, 255, .05);}
	#mask+.header-box .mainnav a {font-weight: 400 !important;line-height: 1.5em;font-size: 13px;padding: 20px}
	#mask+.header-box .btn-close {position: fixed;z-index: 102;top: 10px;right: 10px;width: 40px;height: 40px;}
	#mask+.header-box .sub {display: block;border-radius: 0;text-align: left;text-indent: 3em;background: #dd102f;box-shadow: none;position: static;}
	#mask+.header-box .sub::before {display: none;}
	.footer-box .copyright i {display: block;height: 4px}
	.footer-box .cont {padding: 10px;}
	.footer-box .logo {display: none;}
	.footer-box .img {display: none;}
	.footer-box .btm>ul {flex-flow: column;align-items: center;}
	.footer-box .btm {padding-top: 0;white-space: normal;}
	.footer-box .btm>ul>li {flex: 1 auto;width: 100%;border-bottom: 1px solid #555;}
	.footer-box .btm>ul>li>a {margin-bottom: 0;padding: 10px;text-align: center;color: #888;}
	.footer-box .copyright {padding: 10px;font-size: 12px;color: #777;text-align: center;}
	body::before {content: 'm';}
}
