@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: 700; display: block; text-align: center; font-size: 2rem; color: #333; line-height: 100%; position: relative; padding-bottom: 1.25rem }
h2.main_title a:before { position: absolute; content: ""; width: 2.5rem; height: .35rem; background: #41a8e9; bottom: 0; left: 50%; margin-left: -1.25rem; z-index: 3 }
h2.main_title a:after { position: absolute; content: ""; width: 6rem; height: 1px; background: #B5B5B5; bottom: .15rem; left: 50%; margin-left: -3rem }
h2.main_title a:hover { color: #333 }
h2.main_title span { display: block; margin-top: .85rem; text-align: center; font-weight: bold; font-size: 1rem; color: #666; line-height: 100% }

.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: #fff; width: .8rem; opacity: 1; height: .8rem; margin: 0 .4rem !important; border-radius: 50% }
.ban .swiper-pagination-bullet-active { border-radius: .4rem; opacity: 1; background: #fff600 }

.product { padding: 5rem 3.125% 3.5rem }
.product ul { margin-top: 2.5rem }
.product li { background: #ECECEC; border-radius: 1rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: .75rem .75rem .75rem 1.15rem; margin-bottom: .5rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between }
.product .pic { width: 46.33%; order: 1; border-radius: 1rem; overflow: hidden; align-self: flex-start }
.product .classification { width: 49.5% }
.product h3 a { display: block; font-size: 1.2rem; color: #333; line-height: 3.7rem; font-weight: 700; padding-left: 1.35rem; position: relative; border-bottom: 1px solid #D9D9D9 }
.product h3 a:before { position: absolute; content: ""; width: .65rem; height: .65rem; background: #41a8e9; border: .15rem solid #fff; border-radius: 50%; left: -.15rem; top: 1.35rem }
.product h3 span { float: right; font-size: 1rem; font-weight: 400 }
.product .subclass { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; padding-top: .8rem; padding-left: .7rem }
.product .subclass h4 a { display: block; font-size: 1rem; color: #666; line-height: 2.4rem; position: relative }
.product .subclass h4 a:before { content: "- " }
.product li:nth-child(4) h4:last-child { width: 100% }

.quality { padding: 4.6rem 3.125% 4rem; background: url(../images/quality_bg.jpg) no-repeat center top; background-size: 100% 100% }
.quality h2 a, .quality h2 a:hover { color: #fff }
.quality h2 span { color: #ccc }
.quality h2 a:before { background: #fff600 }
.quality ul { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; margin-top: 2.45rem; flex-wrap: wrap }
.quality li { width: 48.67%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: .5rem; border-radius: 1rem 0; overflow: hidden; background: #fff; text-align: center; margin-bottom: .75rem }
.quality li img { border-top-left-radius: .5rem; overflow: hidden }
.quality li h4 { font-size: 1.2rem; color: #333; line-height: 100%; font-weight: 700; margin-top: 2.5rem; padding-bottom: 1.05rem; position: relative }
.quality li h4:after { position: absolute; content: ""; width: 2.25rem; height: 1px; background: #41a8e9; left: 50%; margin-left: -1.1rem; bottom: 0 }
.quality li h4 strong { color: #41a8e9 }
.quality li h4 strong:before { content: ""; width: .3rem; height: .3rem; background: #333; border-radius: 50%; display: inline-block; vertical-align: .25rem; margin: 0 .2rem }
.quality li p { font-size: 1rem; color: #666; line-height: 1.8rem; margin: .6rem .8rem .8rem; max-height: 7.2rem }

.ys { background: #F4F4F4; padding: 4rem 3.125% 3rem; position: relative }
.ys h2 { margin-bottom: 2.5rem }
.ys dt { border-top-left-radius: 1rem; overflow: hidden }
.ys dd { background: #fff; height: 19.35rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 2.4rem }
.ys dd h4 span { display: inline-block; font-size: 1.4rem; color: #333; line-height: 100%; font-weight: 700; vertical-align: -.65rem }
.ys dd h4 i { display: inline-block; width: 3rem; height: 3.4rem; background: #41a8e9; border-radius: 0 0 1.5rem 1.5rem; font-size: 1.4rem; color: #fff; line-height: 3.2rem; font-weight: 400; text-align: center; margin-right: 1.95rem; margin-bottom: 1.45rem; margin-left: .9rem }
.ys dd p { font-size: 1rem; color: #666; line-height: 1.5rem; padding-left: 1.2rem; margin-bottom: 1.65rem; position: relative }
.ys dd p:before { position: absolute; content: "-"; left: 0 }
.ys .swiper-pagination { bottom: -.6rem }
.ys .swiper-pagination-bullet { background: #333; width: .85rem; opacity: 1; height: .85rem; margin: 0 .65rem !important; border-radius: 50% }
.ys .swiper-pagination-bullet-active { border-radius: 50%; opacity: 1; background: #41a8e9 }

.case { padding: 4.4rem 3.125% 0 }
.case_nav { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between }
.case_nav ul { display: flex; display: -webkit-flex }
.case_nav a { display: block; font-size: 1rem; color: #333; line-height: 5rem }
.case_nav li a:before { content: "-"; color: #333; padding: 0 .7rem }
.case_nav li.cur a { color: #41a8e9; font-weight: 700 }
.case_nav li.cur a:before { color: #333; font-weight: 400 }
.case_nav li:first-child a:before { display: none }
.case_nav>div a:hover { color: #41a8e9 }
.case dd { width: 95%; height: 10.3rem; position: relative; z-index: 2; background: #41a8e9; margin: -4.5rem auto 0; text-align: center; padding: 2.6rem 1.9rem 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.case dd h4 { font-size: 1.2rem; color: #fff; line-height: 2.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400 }
.case dd p { font-size: 1rem; color: rgba(255, 255, 255, .5); line-height: 1.5rem }
.case_con { position: relative }
.case_con .swiper-pagination { bottom: 8.1rem }
.case_con .swiper-pagination-bullet { background: #fff; width: .9rem; opacity: 1; height: .9rem; margin: 0 .55rem !important; border-radius: 50% }
.case_con .swiper-pagination-bullet-active { border-radius: 50%; opacity: 1; background: #fff600 }

.brand { padding: 1.75rem .75rem 4.1rem; margin: 0 .25rem; overflow: hidden }
.brand li { width: 31.67%; box-shadow: 0 0 1.05rem 0 rgba(0, 0, 0, .06) }

.about { padding: 0 .7rem 4.15rem .75rem }
.about dt { position: relative; margin-top: 2.55rem; margin-bottom: 2.05rem }
.about dt img:nth-child(2) { position: absolute; top: 1.25rem; width: 75.9%; z-index: 2; margin: 0 12% }
.about dd { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 .5rem 0 .45rem }
.about dd h3 a { display: block; font-size: 1.2rem; color: #000; line-height: 100%; font-weight: 700; position: relative; margin-bottom: 1.3rem }
.about dd h3 a:after { position: absolute; content: ""; width: 52.7%; height: 1px; background: rgba(0, 0, 0, .2); right: .65rem; top: .6rem }
.about dd p { font-size: 1rem; color: #666; line-height: 1.5rem; letter-spacing: 1px }

html { background: #306BA2 }
/*.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: #fff; border: .05rem solid #fff; 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 }
}