/* basic */
body {font-family:Microsoft YaHei, '\9ed1\4f53';color: #333;font-size: 16px;}
h1,h2,h3,h4,h4,h5,h6 {font-weight: normal;}
.block {width: 100%;overflow: hidden;position: relative;}
.main {width:100%;max-width: 1200px;margin: 0 auto !important;}
::-webkit-scrollbar {background:white;width: 10px;}
::-webkit-scrollbar-thumb {background: #FF2B2B;}

@media(max-width:640px){
	::-webkit-scrollbar {background:black;width: .1rem;}
	body {font-size: .2rem;}
	.main {padding: 0 .1rem;}
}

/* btn */
.btn {width: 140px;height: 50px;line-height: 50px;text-align: center;display: block;background-color: #FF2B2B;color: white;font-size: 18px;}

@media(max-width:640px){
	.btn {width: 1.4rem;height: .7rem;line-height: .7rem;font-size: .24rem;}
}

/* ico */
.ico-add {background-image: url(../images/ico/add.svg);}
.ico-arrow-black {background-image: url(../images/ico/arrow-black.svg);}
.ico-arrow-white {background-image: url(../images/ico/arrow-white.svg);}
.ico-box {background-image: url(../images/ico/box.svg);}
.ico-home {background-image: url(../images/ico/home.svg);}
.ico-horn {background-image: url(../images/ico/horn.svg);}
.ico-mail {background-image: url(../images/ico/mail.svg);}
.ico-menu {background-image: url(../images/ico/menu.svg);}
.ico-printer {background-image: url(../images/ico/printer.svg);}
.ico-profile {background-image: url(../images/ico/profile.svg);}
.ico-search {background-image: url(../images/ico/search.svg);}
.ico-tablet {background-image: url(../images/ico/tablet.svg);}
.ico-down-white {background-image: url(../images/ico/down-white.svg);}
.ico-down-gey {background-image: url(../images/ico/down-gey.svg);}
.ico-zoom {background-image: url(../images/ico/zoom.svg);}
.ico-boat {background-image: url(../images/ico/boat.svg);}
.ico-graph {background-image: url(../images/ico/graph.svg);}
.ico-hammer {background-image: url(../images/ico/hammer.svg);}
.ico-profileadd {background-image: url(../images/ico/profileadd.svg);}
.ico-ruler {background-image: url(../images/ico/ruler.svg);}
.ico-shopping {background-image: url(../images/ico/shopping.svg);}
.ico-sinth {background-image: url(../images/ico/sinth.svg);}
.ico-time {background-image: url(../images/ico/time.svg);}

.ico-sns-1 {background-image: url(../images/code.png);}
.ico-sns-2 {background-image: url(../images/sns/2.svg);}
.ico-sns-3 {background-image: url(../images/sns/3.svg);}
.ico-sns-4 {background-image: url(../images/sns/4.svg);}

/* head */
.head {position: relative;z-index: 9;}
.head-top {height: 60px;}
.head-top a {line-height: 60px;color: #999;padding: 0 20px;float: right;}
.head-top a:hover {color: #333;}
.logo {width: 200px;margin: 35px 0;position: absolute;z-index: 1;}
.logo:hover img {transform: rotateX(360deg);}
.menu {text-align: center;background: #FF2B2B;height: 60px;position: relative;}
.menu span {display: none;}
.menu-con {width: 100%;}
.menu-con a {line-height: 60px;font-weight: bold;color: white;padding: 0 15px;display: inline-block;}
.menu-con a.active,
.menu-con a:hover {background: rgba(0,0,0,.15);}

@media(max-width:640px){
	.head-top {height: .6rem;}
	.head-top a {line-height: .6rem;padding: 0 .2rem;}
	.logo {width: 2rem;margin: .8rem .2rem 0;}
	.menu {height: .8rem;}
	.menu span {width: .8rem;height: .8rem;background-size: 40% 40%;display: block;}
	.menu-con {display: none;position: absolute;top: .8rem;left: 0;}
	.menu-con a {width: 100%;line-height: .8rem;font-size: .22rem;padding: 0;background: rgba(0,0,0,.9);border-bottom: 1px #333 solid;}
	.menu-con a.active,
	.menu-con a:hover {background: black;}
}

/* light */
.light {background: #222;}
.light .swiper-container {width: 100%;height: 100%;max-width: 1920px;margin: auto;}
.light .swiper-slide {width: 100%;height: 600px;background-size: cover;}
.light .swiper-button-next,
.light .swiper-button-prev {width: 45px;height: 30px;background-image: url(../images/ico/light.svg);background-size: contain;}
.light .swiper-button-next {transform: rotate(180deg);}
.light .swiper-container-horizontal > .swiper-pagination-bullets {bottom: 70px;}
.light .swiper-pagination-bullet {width: 12px;height: 12px;border-radius: 0;background: white;}

@media(max-width:640px){
	.light .swiper-slide {height: 3rem;}
	.light .swiper-button-next,
	.light .swiper-button-prev {display: none;}
	.light .swiper-container-horizontal > .swiper-pagination-bullets {bottom: .2rem;}
	.light .swiper-pagination-bullet {width: .15rem;height: .15rem;}
}

/* facility */
.facility {margin: -80px 0 0;padding: 40px 0 0 220px;z-index: 1;}
.facility-down {width: 220px;position: absolute;left: 0;top: 0;margin-top:40px;}
.facility-down i {width: 100%;height: 120px;display: block;background: #333333;}
.facility-down a {width: 100%;height: 160px;color: white;font-size: 22px;text-align: center;display: block;background: #FF2B2B;padding: 25px 0;}
.facility-down a:hover i {transform: rotateY(180deg);}
/* .facility-down i {width: 60px;height: 60px;display: block;margin: 0 auto .1rem;} */
.facility-down em,
.facility-down span {position: absolute;right: 0;}
.facility-down em {top: 0; width: 0;height: 0;border-style: solid;border-width: 0 20px 40px 0;border-color: transparent transparent #222 transparent;}
.facility-down span {background: #222;width: 20px;height: 120px;bottom: 0;}
.facility-con {height: 120px;background: #333;}
.facility-seach {padding: 35px;line-height: 50px;}
.facility-seach span {padding: 0 20px;color: white;font-size: 18px;float: left;}
.facility-seach li {width: 380px;height: 50px; position: relative;float: left;}
.facility-seach input {width: 100%; height: 50px;border: 1px #666 solid;padding: 0 20px;background: none;font-size: 18px;color: white;}
.facility-seach input:focus {border-color: white;}
.facility-seach li button {width: 50px;height: 50px;background:url(../images/ico/search.svg) center no-repeat;background-size: 50% 50%; position: absolute;top: 0;right: 0;}
.facility-service {width: 350px;height: 120px;padding: 10px;}
.facility-service span {color: white;text-align: right;display: block;color: #999;}
.facility-service h4,
.facility-service h5 {color: white;text-align: center;text-transform: inherit;}
.facility-service h4 {font-size: 28px;}
.facility-service h5 {font-size: 20px;}

@media(max-width:640px){
	.facility {margin: .1rem 0 0;padding: .4rem 0 0;}
	.facility-down {width: 0rem;padding: 0;z-index:0;display:none}
	.facility-down a {height: 1.6rem;font-size: .2rem;padding: .2rem 0;}
	.facility-down i {width: .6rem;height: .6rem;margin: 0 auto .1rem;}
	.facility-down em,
	.facility-down span {display: none;}
	
	.facility-con {padding: 0 .2rem .2rem .2rem;height: auto;}
	.facility-seach {width: 50%;padding: 0;line-height: .7rem;margin: 0 0 .2rem;}
	.facility-seach span {padding: 0;font-size: .24rem;}
	.facility-seach li {width: 100%;height: .7rem;}
	.facility-seach input {height: .7rem;padding: 0 .2rem;font-size: .24rem;}
	.facility-seach li button {width: .7rem;height: .7rem;}
	.facility-service {width: 40%;padding: .1rem;}
	.facility-service span {font-size: .2rem;}
	.facility-service h4 {font-size: .35rem;}
	.facility-service h5 {font-size: .26rem;}
}

/* title */
.title {text-align: center;padding: 30px 0;}
.title h3 {height: 80px;line-height: 80px;border: #333 solid;border-width: 0 0 2px 0;padding: 0 30px;display: inline-block;font-size: 32px;}
.title h4 {font-size: 28px;text-align: left;border-bottom: 1px #ddd solid;padding: 0 0 20px;}
.title i {width: 70px;height: 40px;border: 2px #333 solid;display: inline-block;vertical-align: bottom;}
.title i:first-child {border-width: 2px 0 2px 2px;}
.title i:last-child {border-width: 2px 2px 2px 0;}

@media(max-width:640px){
	.title {padding: .3rem 0;}
	.title h3 {height: 1rem;line-height: 1rem;padding: 0 .3rem;font-size: .4rem;}
	.title h4 {font-size: .36rem;padding: 0 0 .2rem}
	.title i {width: .7rem;height: .5rem;}
}

/* summary */
.summary {padding: 20px 0 60px;}
.summary em {width: 480px;height: 250px;background-size: cover;float: left;display: block;}
.summary-con {width: calc(100% - 480px - 30px);float: right;}
.summary-con p {padding: 10px 0;line-height: 250%;}
.summary-con a {width: 100px;height: 30px;line-height: 30px;font-size: 14px;}
.summary-con i {width: 14px;height: 14px;display: inline-block;margin: 0 2px 0 0;vertical-align: middle;}
.summary-con a:hover i {transform: rotate(180deg);}

@media(max-width:640px){
	.summary {padding: .2rem .2rem .6rem;}
	.summary em {width: 100%;height: 3rem;}
	.summary-con {width:100%;}
	.summary-con p {padding: .1rem 0;}
	.summary-con a {width: 1.6rem;height: .6rem;line-height: .6rem;font-size: .2rem;}
	.summary-con i {width: .2rem;height: .2rem;}
}

/* classify */
.classify {padding: 0 0 50px;background-image: url(../images/bg.jpg);background-size: cover;}
.classify h4 {text-align: center;font-size: 24px;}
.classify-btn {text-align: center;padding: 20px 0;}
.classify-btn a {height: 36px;line-height: 34px;border: 1px #333 solid;padding: 0 20px;margin:15px 10px;display: inline-block;}
.classify-btn a:hover {background: #FF2B2B;border-color: #FF2B2B;color: white;}
.classify-list {display: flex;;}
.classify-list li {padding: 0 5px;width: 100%;display: block;position: relative;}
.classify-list u {width: 80%;height: 20px; position: absolute;left: 0;right: 0;bottom: 0;margin: auto; box-shadow: 0 10px 30px rgba(0,0,0,.2);}
.classify-list a {width: 100%;height: 300px;background-size: cover;display: block;border-radius: 10px;position: relative;z-index: 1;}
.classify-list a:hover {transform: translateY(10px);}

@media(max-width:640px){
	.classify {padding: 0 0 .5rem;}
	.classify h4 {font-size: .3rem;}
	.classify-btn {padding: .1rem 0;}
	.classify-btn a {height: .6rem;line-height: .6rem;padding: 0 .2rem;margin:.1rem;}
	.classify-list {display: block;;}
	.classify-list li {padding: .2rem .1rem;width: 50%;float: left;}
	.classify-list u {height: .2rem;bottom: .2rem;box-shadow: 0 .1rem .3rem rgba(0,0,0,.2);}
	.classify-list a {height: 4rem;border-radius: .1rem;}
}

/* agora */
.agora {padding: 20px 600px 20px 0;margin: 20px 0 60px;}
.agora cite {width: 600px;height: 100%;background-size: cover;position: absolute;top: 0;right: 0;}
.agora-con {background: #F4F4F4;padding: 20px 40px 20px 20px;position: relative;}
.agora-con li {overflow: hidden;margin: 10px 0;}
.agora-con h5 {font-weight: bold;}
.agora-con span,
.agora-con em {display: block;position: absolute;right: 0;}
.agora-con span {width: 20px;height:100%;top: 0;background: #ddd;}
.agora-con em {border-style: solid;}
.agora-con em.ae-top {border-width: 0 0 20px 20px;border-color: transparent transparent #ddd transparent;top: -20px;}
.agora-con em.ae-bottom {border-width: 0 20px 20px 0;border-color: transparent #ddd transparent transparent;bottom: -20px;}
.agora-con a {width: 100px;height: 30px;line-height: 30px;font-size: 14px;}
.agora-con i {width: 14px;height: 14px;display: inline-block;margin: 0 2px 0 0;vertical-align: middle;}
.agora-con a:hover i {transform: rotate(180deg);}

@media(max-width:640px){
	.agora {padding: 0;margin: .2rem 0;}
	.agora cite {width: 100%;height: 3rem;position: inherit;display: block;}
	.agora-con {padding: .2rem;}
	.agora-con li {overflow: hidden;margin: 10px 0;}
	.agora-con span,
	.agora-con em {display: none;}
	.agora-con a {width: 1.6rem;height: .6rem;line-height: .6rem;font-size: .2rem;margin: .1rem 0;}
	.agora-con i {width: .2rem;height: .2rem;}
}

/* recommend */
.recommend {margin: 0 0 100px;}
.recommend h4 {font-size: 32px;padding: 20px 0;}
.recommend .swiper-container1 {width: 100%;height: 100%;}
.recommend .swiper-slide {width: 100%;}
.recommend .swiper-button-next,
.recommend .swiper-button-prev {width: 50px;height: 50px;background-image: url(../images/ico/arrow-white.svg);background-size: 50% 50%;background-color: #FF2B2B;top: 40px;}
.recommend .swiper-button-next {transform: rotate(180deg);right: 0;}
.recommend .swiper-button-prev {left: auto;right: 60px;}
.recommend a {width: 33.33%;height: 260px;float: left;background-size: cover;position: relative;}
.recommend a span {width: 100%; position: absolute;left: 0;bottom: 0;height: 50px;line-height: 50px;padding: 0 20px;color: white;font-size: 18px;background: rgba(0,0,0,.6); text-align:center}
.recommend a:hover span {background: #FF2B2B;}

@media(max-width:640px){
	.recommend {margin: 0 0 1rem;}
	.recommend h4 {font-size: .4rem;padding: .2rem 0;}
	.recommend .swiper-button-next,
	.recommend .swiper-button-prev {width: .6rem;height: .6rem;top: .55rem;}
	.recommend .swiper-button-prev {right: .7rem;}
	.recommend a {width: 50%;height: 2.4rem;}
	.recommend a span {height: .5rem;line-height: .5rem;padding: 0 .2rem;font-size: .2rem;}
}

/* foot */
.foot {background: #333;}
.foot-top {padding: 30px 0 50px;}
.foot-logo {width: 170px;padding: 10px 0;}
.foot-logo:hover img {transform: rotateX(360deg);}
.foot-enter {width: 250px;height: 50px;line-height: 50px;padding: 0 0 0 10px;color: #FF2B2B; background: white;position: relative;}
.foot-enter a {width: 50px;height: 50px;background-size: 50% 50%;float: right;background-color: #FF2B2B;position: absolute;top:0;right: 0;}
.foot-con {width: 100%; background: #222;height: 130px;}
.foot-con li {width: 50%;padding: 5px;color: #ccc;float: left;}
.foot-nav {text-align: center;background: #FF2B2B;margin: -30px 0 20px;position: relative;}
.foot-nav a {height: 60px;line-height: 60px;padding: 0 30px;display: inline-block;color: white;font-weight: bold;}
.foot-nav a:hover {background: rgba(0,0,0,.15);}
.foot-copy {line-height: 50px;color: #ccc;text-transform: uppercase; font-size:12px;}
.foot-copy a{color: #ccc; padding-left:8px;}
.foot-sns {}
.foot-sns a {width: 122px;height: 120px;background-size: 60% 60%;float: left;display: block;opacity: .8;}
.foot-sns a:hover {opacity: 1;}
.divfoot{ width:70%;}
.divfoot1{margin: -15px 0 20px;position: relative;}
@media(max-width:640px){
	.foot-top {padding: .3rem 0;}
	.foot-logo {width: 2.5rem;padding: 0;float: none !important;margin: auto;}
	.foot-enter {display: none;}
	.foot-con {height:auto;padding: .1rem 0;}
	.foot-con li {width: 100%;padding: .1rem;}
	.foot-nav {display: none;}
	.foot-copy {line-height: .3rem;color: #ccc;text-transform: uppercase;padding: .2rem 0 0;}
	.foot-sns {width: 100%;text-align: center;}
	.foot-sns a {width: .7rem;height: .7rem;float: none;display: inline-block;}
	.divfoot1{margin: -5px 0 20px;}
}

/* banner */
.banner {background-image: url(../images/banner.jpg);background-size: cover;}
.banner .title {text-align: left;padding: 50px 0 0;}
.banner .title i {display: block;float: left;border-color: white;width: 100px; height: 10px;}
.banner .title i:first-child {border-width: 2px 2px 0 2px;}
.banner .title i:last-child {border-width: 0 2px 2px 2px;}
.banner .title h3 {width: 100%;color: white;border-width: 0 0 0 2px;border-color: white;}

@media(max-width:640px){
	.banner .title {padding: .3rem 0;}
	.banner .title i {width: 1rem; height: .1rem;}
}

/* crumb */
.crumb {padding: 0 0 20px;}
.crumb a {float: right;color: white;opacity: .5;padding: 0 0 0 20px;margin: 0 0 0 20px;border-left: 1px #999 solid;line-height: 18px;}
.crumb a:last-child {border: 0;}
.crumb a:hover {opacity: 1;}

@media(max-width:640px){
	.crumb {display: none;}
}

/* contant */
.contant {margin: 0 0 60px;}

@media(max-width:640px){
	.contant {margin: 0 0 .6rem;}
}

/* classification */
.classification {width: calc(100% + 40px);margin: 0 0 0 -20px;}
.classification-group {width: 50%;float: left;padding: 20px;}
.classification-group-con {border: 1px #ddd solid;height: 300px;}
.classification-group-title {height: 50px;line-height: 50px;border-bottom: 1px #ddd solid;padding: 0 20px;}
.classification-group-title h4 {font-size: 20px;}
.classification-group span {width: 180px;height: 180px;margin: 20px 50px 20px 0px;display: block;float: right;background-size: cover;}
.classification-group ul {width: calc(100% - 230px - 40px);float: left;padding: 10px 0;}
.classification-group li {width: 100%; line-height: 20px;display: block;float: left; padding-top:10px;}
.classification-group li i {width: 6px;height: 6px;border-radius: 100%;background-color: #FF2B2B;display: block;float: left;margin: 8px;}
.classification-group a:hover li {background: #FF2B2B;color: white;}
.classification-group a:hover li i {background: white;}

.classification a.btn {width: 120px;height: 36px;line-height: 36px;font-size: 14px;float: left;margin: 10px 15px 0;}
.classification a.btn i {width: 30px;height: 30px;display: inline-block;vertical-align: middle;background-size: 30% 30%;}

.assortment {padding: 30px 0 0;}
.assortment .classification-group span {background-size: contain;}

@media(max-width:640px){
	.classification {width:100%;margin: 0;}
	.classification-group {width: 100%;padding: .1rem;}
	.classification-group-con {height: auto;}
	.classification-group-title {height: .7rem;line-height: .7rem;padding: 0 .2rem;}
	.classification-group-title h4 {font-size: .24rem;}
	.classification-group span {width: 1.8rem;height: 1.8rem;margin: .2rem;}
	.classification-group ul {width: calc(100% - 1.8rem - .4rem);padding: .2rem 0;}
	.classification-group li {line-height: .5rem;}
	.classification-group li i {width: .1rem;height: .1rem;margin: .2rem;}
	.assortment {padding: .3rem 0 0;}
	
	.classification a.btn {width: 1.6rem;height: .5rem;line-height: .5rem;font-size: .2rem;margin: .1rem .15rem 0;}
	.classification a.btn i {width: .4rem;height: .4rem;}
}

/* page */
.page {padding: 40px 0;text-align: center;}
.page span,
.page a {width: 50px;height: 50px;line-height: 50px;text-align: center;font-size: 20px;margin: 10px;display: inline-block;vertical-align: middle;}
.page a {border: 1px #ddd solid;}
.page a:hover,
.page a.active {background-color: #FF2B2B;border-color:#FF2B2B;color: white;}
.page a.pre,
.page a.next {background-image: url(../images/ico/arrow-black.svg);background-size: 35% 35%;}
.page a.next {transform: rotate(180deg);}
.page a.pre:hover,
.page a.next:hover {background-image: url(../images/ico/arrow-white.svg);}

@media(max-width:640px){
	.page {padding: .4rem 0;}
	.page span,
	.page a {width: .7rem;height: .7rem;line-height: .7rem;margin: .1rem;display: none;}
	.page a.pre,
	.page a.next {display: inline-block;}
}

/* idea */
.idea {}
.idea li {width: 50%;padding: 20px;float: left;}
.idea a {width: 100%; height: 260px;display: block;border: 1px #ddd solid;}
.idea h5 {font-size: 24px;padding: 0 20px;border-left: 15px #FF2B2B solid;margin: 25px 0;line-height: 24px;}
.idea p {padding: 0 30px;}

@media(max-width:640px){
	.idea li {width: 100%;padding: .1rem;}
	.idea a {height: auto;padding: 0 0 .2rem;}
	.idea h5 {font-size: .26rem;padding: 0 .2rem;border-left: .2rem #FF2B2B solid;margin: .2rem 0;line-height: .26rem;}
	.idea p {padding: 0 .4rem;}
}

/* trade */
.trade {margin: 30px 0 80px;}
.trade-nav {background: #FF2B2B;}
.trade-nav li {display: inline-block;margin: 5px 10px 0;}
.trade-nav li a {line-height: 60px;padding: 0 30px;font-size: 18px;font-weight: bold;display: block;color: white;}
.trade-nav li a.active {background: white;color: #FF2B2B;}

.trade-group {overflow:hidden;display: none;padding: 40px 0 0;}
.trade-group:first-child {display: block;}
.trade-group p {line-height: 36px;text-indent: 5em;}
.trade-group h6 {font-size: 20px;padding: 20px 0;}

@media(max-width:640px){
	.trade {margin: .3rem 0 .8rem;}
	.trade-nav {display: flex;padding: .1rem .1rem 0;}
	.trade-nav li {width: 100%;margin: 0;}
	.trade-nav li a {line-height: .8rem;padding: 0;font-size: .22rem;text-align: center;}
	.trade-group {padding: .2rem;}
	.trade-group p {line-height: .36rem;text-indent: 5em;}
	.trade-group h6 {font-size: .24rem;padding: .2rem 0;}
}

/* join */
.join {background-image: url(../images/bg.jpg);background-size: cover; padding: 40px 0;}
.join-con {}
.join-con h3 {font-size: 24px;margin: 0 0 20px;}
.join-con li {line-height: 40px;}
.join-con li i {width: 20px;height: 20px;display: block;float: left;margin: 10px 10px 0 0;}
.join-form {width: 460px;}
.join-form li {margin: 20px 0;position: relative;}
.join-form input {width: 100%; height: 50px;background: #999;color: white;padding: 0 20px;}
.join-form input[type="file"] {position: absolute;left: 0;top: 0;opacity: 0;}
.join-form a.upload {background: #333;position: absolute;top: 0;right: 0;}

@media(max-width:640px){
	.join {padding: .4rem 0;}
	.join-con {width: 100%;}
	.join-con h3 {font-size: .32rem;margin: 0 0 .2rem;}
	.join-con li {line-height: .5rem;width: 100%;float: left;}
	.join-con li i {width: .3rem;height: .3rem;margin: .1rem;}
	.join-form {width: 100%;padding: .1rem;}
	.join-form li {margin: .2rem 0;}
	.join-form input {height: .7rem;padding: 0 .2rem;}
}

/* history */
.history {padding:30px 0 0;}
.history-img {width: 380px;height: 540px;position: relative;background-size: cover;}
.history-img i {width: 100%;height: 100%;border: 3px #eee solid;position: absolute;top: 30px;left: 30px;z-index: -1;}
.history-con {width: calc(100% - 380px - 60px);}
.history-con p {padding: 10px 0;line-height: 250%;}

@media(max-width:640px){
	.history {padding:.3rem 0 0;}
	.history-img {width: 80%;height: 5.5rem;margin: auto;float: none !important;}
	.history-img i {display: none;}
	.history-con {width:100%;padding: .2rem}
	.history-con p {padding: .1rem 0;}
}

/* about */
.about {}
.about-con {padding: 30px 0;background-image: url(../images/bg.jpg);background-size: cover;}
.about-img {width: 530px;height: 330px;background-size: cover;}
.about-txt {width: calc(100% - 530px - 30px);height: 330px;overflow: auto;padding: 0 20px 0 0;}
.about-txt p {padding: 10px 0;}

@media(max-width:640px){
	.about-con {padding: .3rem;}
	.about-img {width: 100%;height: 3rem;}
	.about-txt {width: 100%;height: 3rem;padding: 0 .2rem 0 0;margin: .2rem 0;}
	.about-txt p {padding: .1rem 0;}
}

/* culture */
.culture {padding: 30px 0;}
.culture-block {width: 520px;}
.culture-block li {width: 130px;height: 130px;float: left;position: relative;}
.culture-block li a {width: 100%;height: 100%;background: #FF2B2B;font-size: 24px;color: white;font-weight: bold;}
.culture-block li i {width: 15px;height: 15px;position: absolute;}
.culture-block li i:first-child {top:10px;left: 10px;}
.culture-block li i:last-child {bottom:10px;right: 10px;transform: rotate(180deg);}
.culture-block li a:hover {border-radius: 0 30px 0 30px;}
.culture-block li a:hover i {transform: rotate(360deg);}
.culture-con {width: calc(100% - 520px - 40px);}
.culture-con p {padding: 10px 0;}

@media(max-width:640px){
	.culture {padding: .3rem 0;}
	.culture-block {width: 100%;}
	.culture-block li {width: 25%;height: 1.5rem;}
	.culture-block li a {font-size: .3rem;}
	.culture-block li i {width: .15rem;height: .15rem;}
	.culture-block li i:first-child {top:.1rem;left: .1rem;}
	.culture-block li i:last-child {bottom:.1rem;right: .1rem;}
	.culture-block li a:hover {border-radius: 0 .3rem 0 .3rem;}
	.culture-con {width: 100%;padding: .2rem}
	.culture-con p {padding: .1rem 0;}
}

/* slogan */
.slogan {background-image: url(../images/slogan.jpg);background-size: cover;padding: 50px 0;}
.slogan h3 {font-size: 40px;color: white;text-align: center;}

@media(max-width:640px){
	.slogan {padding: .5rem 0;}
	.slogan h3 {font-size: .32rem;}	
}

/* contact */
.contact {padding: 30px 0;}
.contact-address {width: 440px;height: 420px; border: 1px #ddd solid;margin: 0 20px 0 0;padding:20px;}
.contact-address h4 {font-size: 22px;padding: 20px 0;}
.contact-address li {padding: 5px 0;line-height: 40px;}
.contact-address li i {width: 40px;height: 40px;background-size: 50% 50%;display: block;float: left;}
.contact-map {width: calc(100% - 440px - 20px);height: 420px;background: #f5f5f5;}
.contact-map #map {height: 100%;}

@media(max-width:640px){
	.contact {padding: .3rem 0;}
	.contact-address {width: 100%;height: auto;margin: 0 0 .2rem;padding:.2rem;}
	.contact-address h4 {font-size: .3rem;padding: .2rem 0;}
	.contact-address li {padding: .1rem 0;line-height: .5rem;}
	.contact-address li i {width: .5rem;height: .5rem;}
	.contact-map {width: 100%;height: 4rem;}
}

/* message */
.message {padding: 30px 0;}
.message ul {overflow: hidden;}
.message li {padding: 10px;width: 30%;}
.message li:first-child {width: 70%;float: right;}
.message input,
.message textarea {border: 1px #ddd solid;width: 100%;}
.message input {padding: 0 15px;height: 50px;}
.message textarea {padding: 15px;resize: none;height: 190px;}
.message button {margin: 10px;}

@media(max-width:640px){
	.message {padding: .3rem 0;}
	.message li {padding: .1rem;width: 100% !important;}
	.message input {padding: 0 .2rem;height: .7rem;}
	.message textarea {padding: .2rem;height: 2rem;}
	.message button {margin: .1rem;}
}

/* application */
.application {padding: 20px 0;}
.application-tab {text-align: center;padding: 50px 0;}
.application-tab a {width: 200px;height: 50px; line-height: 50px;text-align: center;color: white;font-size: 18px;background: #333;display: inline-block;}
.application-tab a.active {background: #FF2B2B;}
.application-list {}
.application-list li {min-height: 210px; border-bottom: 1px #ddd solid;padding: 30px 270px 30px 0;position: relative;}
.application-list li i {width: 240px;height: 150px;background-size: cover;position: absolute;top: 30px;right: 0;}
.application-list li h5 {font-size: 22px;padding: 10px 0;}
.application-list li p {color: #333;}
.application-list li:hover h5 {color: #FF2B2B;}

@media(max-width:640px){
	.application {padding: .2rem 0;}
	.application-tab {width: 100%;display: flex;padding: .5rem 0;}
	.application-tab a {width: 100%;height: .7rem; line-height: .7rem;font-size: .22rem;}
	.application-list li {min-height:inherit; padding:.2rem 0;}
	.application-list li i {width: 100%;height: 2.5rem;position:inherit;top: auto;display: block;}
	.application-list li h5 {font-size: .3rem;padding: .2rem 0;}
}

/* article */
.article {}
.article-title {border-bottom: 1px #ddd solid;padding: 30px 0;text-align: center;}
.article-title h2 {font-size: 30px;}
.article-con {padding: 20px 0;}
.article-con p {padding: 10px 0;}
.article-con img {width: 100%;height: auto;margin: 10px 0;}

@media(max-width:640px){
	.article-title {padding: .3rem 0;}
	.article-title h2 {font-size: .32rem;}
	.article-con {padding: .2rem 0;}
	.article-con p {padding: .1rem 0;}
	.article-con img {margin: .1rem 0;}
}

/* details */
.details {width: 100%;height: 100%;background: #333;overflow: hidden;}
.details-body {overflow: hidden;}
.details-cont {width: 100%;height: calc(100% - 60px);}
.details-title {width: 100%;height: 60px;background: #444;}
.details-title h3 {line-height: 60px;padding: 0 30px;color: white;font-size: 20px;float: left;}
.details-title a {width: 60px;height: 60px;background-color: #FF2B2B;background-size: 50% 50%;}
.details-side {width: 300px;height: 100%;background: #232323;position: relative;transition: all .5s;z-index: 8;}
.details-side-hide {width: 0;}
.details-side-hide ul {display: none;}
.details-side span {position: absolute;top: 0;background-color: #555;background-size: 50% 45%;display: none;}
.details-side ul {height: 100%;overflow: auto;}
.details-side ul::-webkit-scrollbar {background:#222;}
.details-side li {width: 100%; height: 40px;display: block;float: left;}
.details-side li i {width: 6px;height: 6px;border-radius: 100%;margin: 17px 10px;float: left;display: block;background: #666;}
.details-side a {line-height: 40px;color: #999;display: block;}
.details-side-cont {width: 100%; background: #121212;display: none;float: left;}
.details-side-cont a {padding: 0 0 0 40px;}
.details-side li.active,
.details-side li:hover,
.details-side li.active a,
.details-side a:hover {color: white;}
.details-side li.active,
.details-side li:hover {background: #FF2B2B;}
.details-side li.active i,
.details-side li:hover i {background: white;}

.details-light {width: calc(100% - 300px);height: 100%;}
.details-light-full {width: 100%;}
.details-light .swiper-container {width: 100%;height: 100%;}
.details-light .swiper-slide {width: 100%;height: 100%;}
.details-light .swiper-slide i {width: 100%;height: 100%;}
.details-light .swiper-slide i::-webkit-scrollbar {background:#333;}
.details-light .swiper-slide img {max-width: 100%;max-height: 100%;}
.img-big i {overflow: auto;display: block;}
.img-big i img {max-height: none !important;max-width: none !important;width: 100%;height: auto;}
.details-light .swiper-slide a,
.details-light em {width: 60px;height: 60px;position: absolute;bottom: 15px;background-size: 50% 50%;z-index: 2;}
.details-light .swiper-slide a {right: 10px;}
.details-light .swiper-slide em {right: 70px;cursor: pointer;}
.details-light .swiper-pagination-fraction {width: 50%;margin: auto;right: 0; color: white;height: 60px;line-height: 60px;bottom: 15px;z-index: 1;}
.details-light .swiper-pagination-fraction span {color: white;}
.details-light .swiper-button-next,
.details-light .swiper-button-prev {width: 50px;height: 50px;background: #FF2B2B url(../images/ico/arrow-white.svg) center no-repeat;background-size: 60% 60%;}
.details-light .swiper-button-next {transform: rotate(180deg);}

@media(max-width:640px){
	.details-cont {height: calc(100% - .7rem);}
	.details-title {height: .7rem;}
	.details-title h3 {line-height: .7rem;padding: 0 .3rem;font-size: .24rem;}
	.details-title a {width: .7rem;height: .7rem;}
	.details-side {width: 0;position: fixed;top: .7rem;left: 0;}
	.details-side ul {display: none;}
	.details-side-hide ul {display: block;}
	.details-side span {width: .7rem;height: .7rem;right: -.7rem;display: block;}
	.details-side-hide {width: 5rem;}
	.details-side li {height: .6rem;}
	.details-side li i {width: .1rem;height: .1rem;margin: .25rem .2rem;}
	.details-side a {line-height: .6rem;}
	.details-side-cont a {padding: 0 0 0 .5rem;}
	
	.details-light {width: 100%;}
	.details-light .swiper-slide a,
	.details-light em {width: .7rem;height: .7rem;bottom: .7rem;}
	.details-light .swiper-slide em {right: .7rem;}
	.details-light .swiper-pagination-fraction {height: .7rem;line-height: .7rem;}
	.details-light .swiper-button-next,
	.details-light .swiper-button-prev {width: .7rem;height: .7rem}
}

/* compete */
.compete {}
.compete li {width: 50%;height: 150px;float: left;padding: 15px;}
.compete li a {width: 100%;height: 100%;display: block;border: 1px #ddd solid;}
.compete li a h4 {width: 150px;height: 120px;border-right: 1px #ddd solid; display: block;float: left;text-align: center;}
.compete li a i {width: 40px;height: 40px;margin: 20px auto 10px;display: block;background-size: contain;}
.compete li a p {width: calc(100% - 150px);height: 100%;float: left;padding: 0 20px;}
.compete li:hover i {transform: rotateY(180deg);}

@media(max-width:640px){
	.compete li {width: 100%;height: 2.2rem;padding: .1rem;}
	.compete li a h4 {width: 2rem;height: 2rem;}
	.compete li a i {width: .6rem;height: .6rem;margin: .5rem auto .2rem;}
	.compete li a p {width: calc(100% - 2rem);padding: 0 .2rem;}
}

/* bright */
.bright {}
.bright-con {padding: 30px 0;background-image: url(../images/bg.jpg);background-size: cover;}
.bright-tab {width: 100%;height: 500px;overflow: auto;position: relative;}
.bright-group {}
.bright-group u {width: 240px;height: 40px;line-height: 40px;background: #ddd;display: block;text-decoration: none;padding: 0 20px;margin: 10px 0;}
.bright-group-con {width: calc(100% - 240px);height: 500px;position: absolute; top: 0;right: 0;overflow: auto;padding: 20px;display: none;}
.bright-group-con h5 {font-size: 16px;padding: 10px 0;}
.bright-group-con ul {padding: 5px 0;}
.bright-group-con ul li {padding: 5px 0;}
.bright-group-con table {width: 100%;background: #ddd;margin: 10px 0;}
.bright-group-con table td {height: 40px;text-align: center;vertical-align: middle;background: #eee;}
.bright-group-con table thead td {font-weight: bold;}
.bright-group-con img {max-height: 100%;max-width: 100%;}
.bright-active u {background: #FF2B2B;color: white;}
.bright-active .bright-group-con {display: block;}

@media(max-width:640px){
	.bright-con {padding: .3rem 0;}
	.bright-tab {height: 6rem;}
	.bright-group u {width: 1.8rem;height: .6rem;line-height: .6rem;padding: 0 .1rem;margin: .1rem 0;}
	.bright-group-con {width: calc(100% - 1.8rem);height: 6rem;padding: .2rem;}
	.bright-group-con h5 {font-size: .22rem;padding: .1rem 0;}
	.bright-group-con ul {padding: .05rem 0;}
	.bright-group-con ul li {padding: .05rem 0;}
	.bright-group-con table {margin: .1rem 0;}
	.bright-group-con table td {height: .5rem;}
}

/* serve */
.serve {height: 380px;background-position: left top;background-size: contain;margin: 20px 0 100px;padding: 0 0 0 300px;position: relative;}
.serve i {width: 300px;height: 380px;position: absolute;left: 0;top: 0;background-image: url(../user/about.jpg);background-size: cover;}
.serve-con {width: 100%;height: 100%;overflow: auto;background: rgba(255,255,255,.98);padding: 20px;}
.serve-con h4,
.serve-con h5,
.serve-con p {padding: 5px 0;}
.serve-con h4 {color: #FF2B2B;}

@media(max-width:640px){
	.serve {height: 4rem;margin: .2rem 0 1rem;padding: 0 0 0 2rem;}
	.serve i {width: 2rem;height: 4rem;}
	.serve-con {padding: .2rem;}
	.serve-con h4,
	.serve-con h5,
	.serve-con p {padding: .05rem 0;}
}


.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}
.back-tab {text-align: right;padding: 20px 0;display: inline-block;}
.back-tab a {width: 100px;height: 50px; line-height: 50px;text-align: center;color: white;font-size: 18px;background: #FF2B2B;display: inline-block;}
.back-tab a:hover {background: #333;}