@charset "utf-8";
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, span, input, textarea { margin: 0; padding: 0 }
body { font-size: 14px; font-family: Microsoft YaHei, Arial, Verdana, Arial, Helvetica, sans-serif; padding-top: 1px; background: #fff }
li, ol { list-style: none }
ins { text-decoration: none }
i, em { font-style: normal }
a { text-decoration: none; font-family: "Microsoft YaHei" }
a:hover { cursor: pointer; text-decoration: none }
:focus { outline: 0 }
.clear { clear: both; line-height: 0; overflow: hidden; zoom: 1; font-size: 0; content: '.' }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }
img { padding: 0; margin: 0 }
a img { border: 0 }
input, textarea { border: 0; font-family: "Microsoft YaHei"; font-size: 13px }
h1, h2, h3, h4, h5, h6 { font-weight: 400; font-size: 14px; font-family: "Microsoft YaHei" }
.fl { float: left }
.fr { float: right }
.wrap { min-width: 320px; max-width: 640px; margin: 0 auto; overflow: hidden; position: relative; font-family: "Microsoft YaHei"; background: #fff }
.wrap img { display: block; width: 100% }

@font-face { font-family: Acrom; src: url(/mobile/css/font/Acrom.otf) }
@font-face { font-family: AcromBold; src: url(/mobile/css/font/Acrom.Bold.otf) }
@font-face { font-family: Montserrat; src: url(/mobile/css/font/Montserrat-Regular.otf) }
@font-face { font-family: Montserrat-Light; src: url(/mobile/css/font/Montserrat-Light.otf) }
@font-face { font-family: MontserratAlternates; src: url(/mobile/css/font/MontserratAlternates-Regular.otf) }
@font-face { font-family: Neutraface; src: url(/mobile/css/font/NEUTRAFACE2DISPLAY-TITLING.OTF) }
@font-face { font-family: NeutrafaceBold; src: url(/mobile/css/font/neutraface2display-bold.otf) }
@font-face { font-family: neutraface2display-medium; src: url(/mobile/css/font/neutraface2display-medium.otf) }
@font-face { font-family: MyriadPro; src: url(/mobile/css/font/MyriadPro-Regular.otf) }
@font-face { font-family: ITCAVANTGARDESTD; src: url(/mobile/css/font/ITCAVANTGARDESTD-DEMI.OTF) }

h2.main_title a { display: block; font-size: 2.1rem; color: #000; line-height: 100%; text-transform: uppercase; font-family: Neutraface; text-align: center; background: url(/mobile/images/Index/tbg.png) no-repeat center bottom; padding-bottom: 1.7rem; background-size: 16.65rem }
.more { display: block; width: 9.35rem; height: 3.1rem; background: #ff4a00; text-align: center; font-size: 1rem; color: #010101; line-height: 3.1rem; -o-transition: all .3s ease; transition: all .3s ease; font-family: Montserrat }

.ban { position: relative; z-index: 3; width: 100%; overflow: hidden }
.ban img { display: block; width: 100% }
.ban .swiper-pagination { bottom: 2rem }
.ban .swiper-pagination-bullet { background: #ff4a00; width: .8rem; opacity: .5; height: .8rem; margin: 0 .4rem !important; border-radius: 50% }
.ban .swiper-pagination-bullet-active { border-radius: 50%; opacity: 1; background: #ff4a00 }

.about { background: #EBEBEB; padding: 1.5rem 3.125% 5.7rem }
.navbar { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; background: #fff }
.navbar li { width: 33.3%; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.navbar li a { display: block; font-size: 1.2rem; color: #343434; line-height: 4rem; font-family: Montserrat; -o-transition: all .3s ease; transition: all .3s ease }
.navbar li:nth-child(1), .navbar li:nth-child(2), .navbar li:nth-child(3) { border-bottom: 1px solid #F6F6F6 }
.navbar li:nth-child(2), .navbar li:nth-child(5) { border-left: 1px solid #F6F6F6; border-right: 1px solid #F6F6F6; flex-grow: 1 }
.navbar li.cur a, .navbar li:hover a { background: #ff4a00; color: #fff }
.about_con { margin: 4.4rem 1rem 2.5rem }
.about_con h2 a { display: block; position: relative; font-size: 2.1rem; color: #000; line-height: 100%; text-transform: uppercase; font-family: Neutraface; padding-bottom: 1.4rem }
.about_con h2 a:after { width: 2.8rem; height: .2rem; background: #ff4a00; position: absolute; content: ""; left: 0; bottom: 0 }
.about_con p { font-size: 1.2rem; color: #777; line-height: 1.8rem; font-family: MyriadPro; margin-top: 1.25rem;text-indent: 24px; }
.feature { padding: 0 .7rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between }
.feature li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.feature li em { display: block; white-space: nowrap; font-size: 1.5rem; color: #333; line-height: 100%; font-family: SimHei, "ºÚÌå" }
.feature li strong { font-size: 3rem; color: #333; line-height: 100%; font-family: NeutrafaceBold }
.feature li span { display: block; font-size: 1.1rem; color: #555; line-height: 100%; font-family: Acrom }
.feature li:nth-child(1) { width: 26% }
.feature li:nth-child(2) { width: 36.6%; padding: 0 8%; position: relative }
.feature li:nth-child(2):before, .feature li:nth-child(2):after { position: absolute; content: ""; width: 1px; height: 5rem; background: #E1E1E1; top: .9rem }
.feature li:nth-child(2):before { left: 0 }
.feature li:nth-child(2):after { right: 0 }

.product { padding: 4.8rem 3.125% 2.3rem }
.pro_nav { margin: 1.65rem 0 1.2rem }
.pro_nav h3 a { display: block; background: #343434; font-size: 1.2rem; color: #fff; line-height: 3.1rem; text-indent: 2rem; font-family: Montserrat; text-transform: uppercase; font-weight: 400 }
.pro_nav dd { background: #F5F5F5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: .85rem 0 1.75rem 2rem }
.pro_nav h4 a { display: block; font-size: 1.1rem; color: #666; line-height: 3.1rem; font-family: Montserrat-Light; padding-left: 1.5rem; background: url(/mobile/images/Index/pi.png) no-repeat left center; background-size: .55rem; white-space: nowrap }
.pro_nav dl:nth-child(1) dt h3 a { background: #ff4a00 }
.pro_con { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap }
.pro_con li { width: 49.66% }
.pro_con li h4 { font-size: 1.1rem; color: #222; line-height: 1.2rem; text-align: center; padding: .7rem 1rem 1.55rem; min-height: 2.4rem; max-height: 2.4rem; overflow: hidden }

.why { margin-bottom: 5.1rem }
.why h2 { margin-bottom: 1.8rem }
.why_con dd { padding: 2rem 5% 2.5rem 6.25% }
.why_con dd h3 { text-transform: uppercase; padding-bottom: 1.1rem; position: relative; margin-bottom: 1.2rem }
.why_con dd h3:after { position: absolute; content: ""; width: 2.8rem; height: .2rem; background: #ff4a00; left: 0; bottom: 0 }
.why_con dd h3 i { display: block; font-family: neutraface2display-medium; margin-bottom: .35rem; font-size: 1rem; color: #ff4a00; line-height: 100% }
.why_con dd h3 strong { display: block; font-family: Neutraface; font-size: 2.3rem; color: #333; line-height: 2.3rem }
.why_con dd p { font-family: MyriadPro; font-size: 1.2rem; color: #777; line-height: 1.3rem; margin-bottom: .5rem }
.why_nav { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center }
.why_nav li { height: 1.1rem; margin: 0 .75rem }
.why_nav li span { display: inline-block; font-family: MontserratAlternates; font-size: .9rem; color: #838383; line-height: 1.1rem; vertical-align: middle; letter-spacing: 1px }
.why_nav li i { display: inline-block; vertical-align: middle; position: relative; width: 1.1rem; height: 1px; background: #BEBEBE; -o-transition: all .3s ease; transition: all .3s ease }
.why_nav li i:before { position: absolute; content: ""; z-index: 2; width: .25rem; height: .25rem; background: #838383; border-radius: 50%; right: 0; top: -.1rem }
.why_nav li i:after { position: absolute; content: ""; width: 1rem; height: 1rem; border: 1px solid transparent; border-radius: 50%; right: -.45rem; top: -.5rem }
.why_nav li.on span { color: #ff4a00 }
.why_nav li.on i { background: #ff4a00 }
.why_nav li.on i:before { background: #ff4a00 }
.why_nav li.on i:after { border-color: #ff4a00 }

.case { background: #212121 url(/mobile/images/Index/case_bg.jpg) no-repeat center top; background-size: 100% 100%; padding: 4.75rem 0 4.35rem }
.case h2 a { color: #fff; background-image: url(/mobile/images/Index/tbg1.png) }
.case_con { margin: 2.3rem 8.59% 0 }
.case_con dt { position: relative }
.case_con dt span { display: block; position: absolute; top: 1.95rem; left: .85rem; width: 4.3rem; height: 3.95rem; background: #ff4a00; font-size: .9rem; color: #fff; line-height: 100%; font-family: Montserrat-Light; text-align: center; text-transform: uppercase; padding-top: 1rem }
.case_con dt i { display: block; font-size: 1.9rem; color: #fff; line-height: 100%; font-family: Montserrat }
.case_con dd { background: #fff; padding: 1.3rem 2.5rem 3.25rem 3rem; border: 1px solid #E0E0E0; border-top: 0 }
.case_con dd h4 { font-size: 1.2rem; color: #222; line-height: 3.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.case_con dd p { font-size: 1.1rem; color: #777; line-height: 1.7rem }
.case_con dd span { display: inline-block; font-size: .9rem; color: #ff4a00; line-height: 100%; text-decoration: underline; text-transform: uppercase; font-family: Montserrat; margin-top: 1.45rem }
.case .swiper-pagination { position: relative; bottom: 0; margin-top: 2rem }
.case .swiper-pagination-bullet { background: #fff; width: .45rem; opacity: 1; height: .45rem; margin: 0 1rem !important; border-radius: 50% }
.case .swiper-pagination-bullet-active { border-radius: 50%; opacity: 1; background: #ff4a00 }

.news { padding: 3.9rem 3.125% 1.75rem }
.news_nav { margin: 1.6rem 0 1.3rem; position: relative; background: #EDEDED; height: 3.5rem }
.news_nav h3 { float: left }
.news_nav h3 span { display: inline-block; text-align: center; -o-transition: all .3s ease; transition: all .3s ease; font-size: 1.2rem; color: #343434; line-height: 3.5rem; padding: 0 2.3rem; font-family: Montserrat }
.news_nav h3 a { display: block; font-size: 1rem; color: #ff4a00; line-height: 3.5rem; font-family: Montserrat; font-weight: 400; letter-spacing: 1px; position: absolute; right: .8rem; top: 0; text-decoration: underline }
.news_nav h3.on a { display: block; z-index:11 }
.news_nav h3.on span { background: #ff4a00; color: #fff }
.news_con { overflow: hidden }
.news_con dl { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; padding-bottom: 1.75rem; border-bottom: 1px solid #E9E9E9 }
.news_con dt { width: 28.33% }
.news_con dd { width: 69.33%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: .25rem }
.news_con dd h4 { font-size: 1.2rem; color: #2d2d2d; line-height: 1.4rem; font-weight: 400; font-family: Montserrat; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .6rem }
.news_con dd p { font-size: 1rem; color: #9f9f9f; line-height: 1.2rem; font-family: Montserrat-Light }
.news_con li { border-bottom: 1px solid #E9E9E9; padding-top: .9rem; padding-bottom: 1.65rem }
.news_con li h4 { font-size: 1.2rem; color: #2d2d2d; line-height: 2.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Montserrat }
.news_con li p { font-size: 1rem; color: #9f9f9f; line-height: 1.2rem; font-family: Montserrat-Light }

html { background: #fff }

@-webkit-keyframes fade {
    from { opacity: 1; display: block }
    to { opacity: 0; display: none; height: 0 }
}
@keyframes fade {
    from { opacity: 1; display: block }
    to { display: none; opacity: 0; height: 0 }
}
.fade { -webkit-animation-name: fade; animation-name: fade }