@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: "微软雅黑", 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: "微软雅黑" }
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: "微软雅黑"; font-size: 13px }
h1, h2, h3, h4, h5, h6 { font-weight: 400; font-size: 14px; font-family: "微软雅黑" }
.fl { float: left }
.fr { float: right }

.wrap { min-width: 320px; max-width: 640px; margin: 0 auto; overflow: hidden; position: relative; font-family: "微软雅黑"; background: #fff }
.wrap img { display: block; width: 100% }

h2.main_title a { font-weight: 400; display: block; text-align: center; font-size: 2rem; color: #1b1b1b; line-height: 100% }
h2.main_title a:hover { color: #1b1b1b }
h2.main_title span { font-weight: 400; display: block; font-size: 1.2rem; color: #676767; line-height: 100%; text-align: center; margin-top: .7rem; letter-spacing: .1rem }

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

.intro { padding: 2.5rem 6.09375% 3.2rem }
.intro h2 { text-align: center; margin-bottom: 1.9rem }
.intro h2 a { display: block; font-size: 2.15rem; color: #222; line-height: 100%; margin-bottom: .8rem }
.intro h2 span { display: inline-block; font-size: 1.2rem; color: #676767; line-height: 100%; padding: 0 .75rem }
.intro ul { height: 12.8rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 1.5rem 3.9rem 1.9rem 4.4rem; background: url(../images/intro_bg.png) no-repeat center top; background-size: 100% 100%; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; flex-wrap: wrap }
.intro ul li { text-align: center }
.intro ul li:nth-child(odd) { margin-right: 2rem }
.intro ul em { display: block; font-size: 2.7rem; color: #16a186; line-height: 100%; font-family: arial; font-weight: 700; font-style: normal }
.intro ul i { display: inline-block; font-size: 1rem; color: #fff; line-height: 1.4rem; background: #16A186; text-align: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-weight: 400; font-style: normal; vertical-align: middle }
.intro ul span { display: block; font-size: 1.1rem; color: #333; line-height: 100% }

.product { padding: 3.75rem 3.4375% 4.6rem; background: #F2F2F2 }
.pro_con { margin-top: 2rem; position: relative; overflow: hidden }
.pro_con dd h4 { font-size: 1.6rem; color: #1b1b1b; line-height: 100%; padding: 1.7rem 0 .55rem; border-bottom: 1px solid #C8C8C8 }
.pro_con dd p { font-size: 1.2rem; color: #313131; line-height: 1.7rem; margin: .5rem 0 1.75rem }
.pro_con dd i { display: block; width: 12.95rem; height: 2.4rem; border: 1px solid #b5b5b5; text-align: center; font-size: 1.1rem; color: #333; line-height: 2.4rem }
.pro_switch div, .case_switch div { position: absolute; width: 2.65rem; height: 5.4rem; background: rgba(0, 0, 0, .57); top: 5.85rem; z-index: 3; cursor: pointer }
.pro_switch .prev, .case_switch .prev { left: 0 }
.pro_switch .next, .case_switch .next { right: 0 }

.ys { padding: 2.6rem 2.5% 3.75rem; background: url(../images/ys_bg.jpg) no-repeat center top; background-size: 100% auto }
.ys h2 img { width: 6rem; display: inline-block; margin-left: .9rem; vertical-align: bottom }
.ys h2 span { letter-spacing: 1rem; padding-left: 1rem }
.ys_con { margin-top: 2rem; position: relative }
.ys_con dd { height: 17.05rem; background: #fff; box-shadow: 0 0 .35rem 0 rgba(12, 3, 7, .33); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 2rem 1.4rem 0 }
.ys_con dd h4 { font-size: 1.4rem; color: #333; line-height: 100%; font-weight: 700; padding-bottom: .7rem; border-bottom: 1px solid #E2E2E2 }
.ys_con dd h4 span { padding-left: .3rem }
.ys_con dd p { font-size: 1.2rem; color: #666; line-height: 1.75rem; margin-top: 10px }
.ys_switch, .power_switch { position: absolute; bottom: 2rem; height: 3.6rem; width: 100%; text-align: center; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; z-index: 3; cursor: pointer }
.ys_switch .prev, .power_switch .prev, .ys_switch .next, .power_switch .next { width: 2.45rem }
.ys_switch .swiper-pagination, .power_switch .swiper-pagination { position: relative; margin: 0 .7rem }
.ys_switch .swiper-pagination-bullet, .power_switch .swiper-pagination-bullet { width: 3.5rem; height: 3.5rem; background: #fff; border: 1px solid #333; border-radius: 50%; font-size: 1.7rem; color: #ababab; line-height: 3.5rem; text-align: center; font-family: arial; font-weight: 700; opacity: 1; margin: 0 .5rem; -o-transition: all .3s ease; transition: all .3s ease }
.ys_switch .swiper-pagination-bullet-active, .power_switch .swiper-pagination-bullet-active { background: #0BA17F; border-color: #0BA17F; color: #fff }

.power { background: #f5f5f7 url(../images/power_bg.png) no-repeat center top; background-size: 100% auto; padding-top: 3.15rem }
.power h2 a, .power h2 span { color: #fff }
.power h2 a:hover { color: #fff }
.power_con { margin-top: 4.4rem; position: relative }
.power_con dt { padding: 0 3.125% 1.95rem }
.power_con dd { background: #fff; padding: 1.5rem 1.6rem 0; height: 25.8rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.power_con h4 { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; font-size: 1.65rem; color: #333; line-height: 100%; letter-spacing: .1rem; padding-bottom: .9rem; border-bottom: 1px dotted #666; margin-bottom: 1px }
.power_con h4 img { width: 4.3rem; margin-right: 1.1rem }
.power_con h4 strong { color: #D1222F; margin-bottom: .65rem; display: block }
.power_con p { border-top: 1px dotted rgba(102, 102, 102, .3); font-size: 1.2rem; color: #4f4b4b; line-height: 1.9rem; padding-top: .8rem }
.power_switch { bottom: 3.55rem }

.case { padding: 2.9rem 5.15625% 2.4rem; background: #f5f5f7 url(../images/case_bg.jpg) no-repeat center top; background-size: 100% auto }
.case h2 a, .case h2 span, .case h2 a:hover { color: #fff }
.case_con { overflow: hidden; position: relative; margin-top: 2.2rem; border: 1px solid #D2D2D2; background: #fff }
.case_con dt { padding: 1.35rem 1.4rem 1.25rem }
.case_con dd { padding: 0 1.85rem; height: 12.65rem; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.case_con dd h4 { font-size: 1.4rem; color: #676767; line-height: 1.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1.2rem; font-weight: 700 }
.case_con dd p { font-size: 1.2rem; color: #676767; line-height: 2.1rem }
.case_switch .prev { left: -1px }
.case_switch .next { right: -1px }
.case .more a { display: block; width: 12.95rem; height: 2.4rem; border: 1px solid #b5b5b5; font-size: 1.1rem; color: #333; line-height: 2.4rem; text-align: center; margin: 0 auto 2.25rem }

.smbanner { background: url(../images/sm_bg.png) no-repeat center top; background-size: 100% 100%; height: 4.8rem; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; text-align: center }
.smbanner img { width: 1.9rem }
.smbanner .sm_tel { display: block; font-size: 1.95rem; color: #fff; line-height: 100%; font-weight: 700; margin: 0 1.8rem 0 1.35rem }
.smbanner .sm_ask { display: block; width: 8.5rem; height: 2.15rem; border: .1rem solid rgba(255, 255, 255, .52); border-radius: .15rem; font-size: 1.2rem; color: #fff; line-height: 2.15rem }

.news { padding: 3.7rem 5% 1.2rem }
.news .news_pic { margin-top: 2.05rem }
.news li { padding-top: 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid #D2D2D2 }
.news li a { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center }
.news li span { display: block; width: 2.4rem; height: 2.4rem; border: .1rem solid #d2d2d2; font-size: 1.5rem; color: #666; line-height: 2.4rem; text-align: center; font-family: arial; margin-right: 1.15rem; -o-transition: all .3s ease; transition: all .3s ease }
.news li h4 { font-size: 1.3rem; color: #666; line-height: 2.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-transition: all .3s ease; transition: all .3s ease }
.news li:hover span { border-color: #149B80; color: #149B80 }
.news li:hover h4 { color: #229E87 }
.news li:last-child { border-bottom: 0 }

.about { background: #F9F9F9; padding-top: 3.55rem; padding-bottom: 3.7rem }
.about_pic { margin-top: 1.75rem; position: relative }
.about_pic .swiper-pagination { bottom: 1rem; padding-right: 1.2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: right; height: 2.3rem }
.about_pic .swiper-pagination-bullet { width: 1.6rem; height: 1.6rem; background: #fff; border-radius: 50%; font-size: .85rem; color: #000; line-height: 1.6rem; text-align: center; opacity: 1; -o-transition: all .3s ease; transition: all .3s ease; margin-left: .5rem }
.about_pic .swiper-pagination-bullet-active { background: #1BA086; width: 2.3rem; height: 2.3rem; font-size: 1.1rem; font-weight: 700; line-height: 2.3rem; color: #fff }
.about_desc { font-size: 1.2rem; color: #676767; line-height: 2.1rem; padding: .95rem 2.2rem 2.3rem; text-align: justify }
.about .more a { display: block; width: 11.85rem; height: 2.6rem; background: #1ba086; font-size: 1.2rem; color: #fff; line-height: 2.6rem; text-align: center; margin: 0 auto }

html { background: #f7f7f7 }
.wrap { opacity: 0 }
.loading { position: fixed; width: 100%; height: 100%; top: 0; z-index: 51; display: none; max-width: 640px; min-width: 320px; z-index: 99999 }
.loading img { display: none }
.loading #showNext { line-height: 1.8rem; display: none; color: #333; border: .05rem solid #333; border-radius: 5%; padding-left: 1rem; padding-right: 1rem; text-align: center; position: absolute; right: 1rem; top: 1rem; z-index: 99 }
.homeShow { animation: fade .8s ease both; -webkit-animation: fade .8s ease both }
@-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 }
@media screen and (min-width:320px) {
    html { font-size: 10px }
}
@media screen and (min-width:360px) {
    html { font-size: 11.25px }
}
@media screen and (min-width:375px) {
    html { font-size: 11.7px }
}
@media screen and (min-width:384px) {
    html { font-size: 12px }
}
@media screen and (min-width:480px) {
    html { font-size: 15px }
}
@media screen and (min-width:414px) {
    html { font-size: 13px }
}
@media screen and (min-width:560px) {
    html { font-size: 17.5px }
}
@media screen and (min-width:640px) {
    html { font-size: 20px }
}