.wrap {width: 1200px;margin-left: auto;margin-right: auto;}
.bg-gray{background-color: #F4F4F4 !important;}
.bg-green{background-color: #96c354 !important;}
.bg-purple{background-color: #c42efb !important;}
.bg-red{background-color: #fc5b1e !important;}
.show-menu {display: none;}
.header-box {position: sticky;z-index: 200;left: 0;top: 0;height: 97px;background-color: rgba(255, 255, 255, .9);width: 100%;box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);}
.header-box .logo {font-size: 30px;font-weight: 700;color: #F70101;text-transform: uppercase;width: 20%;}
.header-box .flex {align-items: center;height: 100%;position: relative;}
.header-box .show-search {width: 47px;height: 30px;display: flex;align-items: center;justify-content: center;text-align: center;color: #fff;font-size: 18px;background-color: #F70101;flex-shrink: 0;border-radius: 40px;}
.mainnav-box {flex: 1 auto;display: flex;justify-content: center;}
.mainnav-box .sub {display: none;min-width: 100%;}
.mainnav-box ul {display: flex;align-items: center;}
.mainnav-box li {position: relative;}
.mainnav-box li>a {display: block;line-height: 97px;height: 97px;white-space: nowrap;text-align: center;padding: 0 2em;}
.mainnav-box li.on>a { color:#F70101;}
.mainnav-box .sub a {display: block;padding: .8em 1.9em;white-space: nowrap;}
/* search */
.form-search {position: absolute;top: 100%;right: 50%;margin-right: -600px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);padding: 10px;background-color: #fff;z-index: 2;display: flex;align-items: center;}
.form-search input {height: 40px;border: 0;width: 260px;padding: 0 .5em;font: inherit;color: inherit;}
.form-search i {height: 40px;display: flex;align-items: center;justify-content: center;width: 40px;color: #999;cursor: pointer;}
.footer-box {background-color: #ddd;color: #999;font-size: 12px;line-height: 30px;overflow: hidden;}
.footer-box .footer {padding: 10px 0;}
.footer .wrap {display: flex;}
.footer .item+.item {margin-left: 60px;}
.footer .item:last-child {flex: 1 auto;display: flex;align-items: flex-end;flex-flow: column;}
.footer h4 {font-size: 18px;font-weight: 700;display: block;white-space: nowrap;margin-bottom: .8em;}
.footer .nav {display: flex;flex-flow: row wrap;}
.footer .nav li+li {margin-left: 20px;}
.footer .por {padding-left: 100px;}
.footer .tips {position: absolute;left: 0;background-color: #fff;border-radius: 5px;padding: 0 1em;box-shadow: 0 0 3px 0 rgba(0, 0, 0, .08);top: 50%;transform: translateY(-50%);animation: ltor 2s infinite;}
.footer .tips::before {content: '';position: absolute;top: 50%;transform: translateY(-50%);border: 7px solid transparent;width: 0;height: 0;border-left: 6px solid #fff;left: 100%;}
@keyframes ltor {from {margin-left: 1px;}
	50% {margin-left: -1px;}
	to {margin-left: 1px;}
}
.footer .item i {margin-right: 5px;width: 1.2em;text-align: center;color: #F70101;}
#mask1 {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999;background-color: rgba(0, 0, 0, .5);transition: all .3s;}
.popup-box {position: fixed;width: 416px;right: -416px;top: 0;z-index: 10000;height: 100%;overflow: hidden;background-color: #39415c;background-image: linear-gradient(135deg, #47485c, #39415c, #2d445c);box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);padding: 30px 50px;display: flex;flex-flow: column;max-width: 80%;}
@media screen and (min-width:768px) {a:hover {transition: all .3s;}
	.mainnav-box li:hover .sub {display: block;position: absolute;top: 100%;background-color: #F70101;background-image: linear-gradient(to bottom, #F70101, #F70101);color: #fff;border-radius: 0 0 3px 3px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);font-size: 14px;left: 50%;transform: translateX(-50%);padding: 1em 0;text-align: center;}
	.mainnav-box li:hover .sub::before{content: '';position: absolute;border: 7px solid transparent;border-bottom: 8px solid #F70101;bottom: 100%;left: 50%;transform: translateX(-50%);}
	.mainnav-box li:hover>a {color: #F70101;}
	.mainnav-box .sub a:hover {background-color: rgba(2, 2, 2, .1);}
	.footer a:hover {color: #F70101;}
}
@media screen and (max-width:768px) {body {overflow-x: hidden;}
	.header-box .logo {margin-left: 10px;font-size: 22px;width: 70%;}
	.wrap {width: 100%;}
	.show-menu {display: flex;position: absolute;right: 0;width: 50px;text-align: center;height: 100%;align-items: center;justify-content: center;font-size: 18px;color: #000;}
	.mainnav-box {display: none;background-color: #fff;}
	.mainnav-box ul {flex-flow: column;}
	.mainnav-box li {border-bottom: 1px solid #e9e9e9;width: 100%;}
	.mainnav-box li>a {line-height: 50px;height: 50px;}
	.mainnav-box li .sub {display: flex;position: static;background: none;color: #333;border-radius: 0;box-shadow: none;font-size: 12px;transform: none;padding: 5px 10px;overflow-x: scroll;background-color: #f3f3f3;justify-content: center;align-content: center;align-items: center;text-align: center;}
	.header-box {height: 50px;}
	.header-box img {max-height: 50px;}
	.header-box .show-search {width: 50px;}
	.header-box .flex {justify-content: space-between;padding-right: 50px;}
	.form-search {right: 0;margin-right: 0;width: 100%;}
	.form-search input {flex: 1 auto;}
	.footer-box .footer {padding: 10px;}
	.footer .wrap {display: flex;flex-flow: column;}
	.footer .item:last-child {align-items: center;flex-flow: column;}
	.footer .item+.item {margin-left: 0;margin-top: 10px;}
	.footer .por {padding-left: 0;}
	.footer .tips {display: none;}
}