@font-face { font-family: "ddjbt"; src: url("../fonts/DingTalk_JinBuTi.ttf"); }
/*! HTML5 Boilerplate v7.0.1 | MIT License | https://html5boilerplate.com/ */.browserupgrade { padding: .2em 0; margin: .2em 0; color: #000; background: #ccc }
::selection { color: #fff; background: #00a0ea; text-shadow: none }
::-moz-selection {
color:#fff;
background:#00a0ea;
text-shadow:none
}
::-webkit-scrollbar {
width:10px;
background:#bfbfbf
}
::-webkit-scrollbar-track {
width:10px;
background:#bfbfbf
}
::-webkit-scrollbar-track-piece {
background:#bfbfbf
}
::-webkit-scrollbar-thumb {
width:10px;
background:#515151
}
::-webkit-scrollbar-thumb:hover {
background:#00a0ea
}
html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; box-sizing: border-box }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", "Segoe UI", Roboto, "Hiragino Sans GB", arial, 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif; font-size: 14px; line-height: 1.15; color: #333; background: #fff }
body, button, dd, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, li, ol, p, textarea, ul { padding: 0; margin: 0 }
address, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; padding: 0; margin: 0 }
li, ol, ul { list-style: none; list-style-image: none }
button, fieldset, input, label, legend, option, select, textarea { font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 12px }
button, input, optgroup, select, textarea { outline: 0 }
button { border: none }
textarea { resize: vertical }
em, i, strong { font-style: normal }
img { vertical-align: middle; border: 0 }
a { font-size: 14px; color: #333; text-decoration: none; outline: 0 }
a:hover { color: #00a0ea; text-decoration: none }
a:active, a:focus, a:hover { outline: 0 }
.clearfix:after, .clearfix:before { content: " "; display: table }
.clearfix:after { clear: both }
h1, h2, h3, h4, h5, h6, p, span { font-size: 100%; font-weight: 400; line-height: 1.5 }
h1 { font-size: 36px }
h2 { font-size: 30px }
h3 { font-size: 24px }
h4 { font-size: 18px }
h5 { font-size: 16px }
h6 { font-size: 14px }
p { font-size: 16px }
span { font-size: 14px }
.container-fluid { padding-right: 0; padding-left: 0; margin: 0 }
.container { position: relative; margin-right: auto; margin-left: auto; min-width: 1180px; max-width: 1180px; width: 1180px }
.container:after, .container:before { display: table; content: "" }
.container:after { clear: both }
.seemore { clear: both }
.seemore a { display: inline-block; padding: 12px 40px; font-size: 16px; color: #fff; border: 2px solid #fff; border-radius: 45px; box-sizing: border-box; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px }
.seemore a:hover { color: #00a0ea; background: #fff; -webkit-transition: background-color .3s, color .3s; -o-transition: background-color .3s, color .3s; -moz-transition: background-color .3s, color .3s; transition: background-color .3s, color .3s; -webkit-box-shadow: 0 5px 25px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 25px rgba(0,0,0,.2); -o-box-shadow: 0 5px 25px rgba(0,0,0,.2); box-shadow: 0 5px 25px rgba(0,0,0,.2) }
header { position: absolute; top: 0; right: 0; left: 0; z-index: 999; width: 100%; min-width: 1180px; height: 80px;  background: 0 0; border-bottom: 1px solid rgba(255,255,255,.1); -moz-box-sizing: border-box; box-sizing: border-box; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease }
header:hover { background: #242a37; border-bottom: 1px solid rgba(255,255,255,0); transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease }
.header-top { height: 49px; border-bottom: 1px solid rgba(255,255,255,.1) }
.header-logo, .header-logo h1, .header-logo h2 { float: left; height: 49px }
.header-logo{ padding:15px 50px 0 0;}
.header-logo h2 { margin-right: 50px; font-size: 14px; line-height: 49px; color: #fff }
.header-logo img { display: block; width: auto; height: 49px }
.header-search { float: right; height: 49px; background: 0 0; margin-top:15px; }
.header-search form { position: relative; float: left; background: rgba(255,255,255,.05) }
.header-search input { position: relative; width: 200px; height: 49px; padding-left: 15px; color: rgba(255,255,255,.75); background: 0 0; border: 1px solid transparent; box-sizing: border-box; outline: 0; transition: .3s linear; -moz-transition: .3s linear; -webkit-transition: .3s linear; -o-transition: .3s linear }
.header-search input:hover { width: 250px }
.header-search input:focus { width: 250px; border-color: #00a0ea }
.header-search button { position: absolute; top: 0; right: 0; z-index: 5; width: 49px; height: 49px; background: 0 0; border: 0; outline: 0; cursor: pointer }
.header-search button i { position: relative; font-size: 18px; color: rgba(255,255,255,.5) }
.header-search button i:hover { color: rgba(255,255,255,.75) }
.header-search input::-webkit-input-placeholder {
color:rgba(255,255,255,.5)
}
.header-search input::-moz-placeholder {
color:rgba(255,255,255,.5)
}
.header-search input:-moz-placeholder {
color:rgba(255,255,255,.5)
}
.header-search input:-ms-input-placeholder {
color:rgba(255,255,255,.5)
}
.header-search ul { float: right; margin-left: 15px }
.header-search ul li { float: left; padding-right: 15px }
.header-search ul li a { line-height: 49px; color: #fff }
.header-search ul li a:hover { color: #00a0ea }
.header-nav { float: left; height: 80px }
.header-nav { position: relative; z-index: 1; height: 80px; line-height: 80px }
.header-nav a { color: #fff }
.header-nav .nLi { position: relative; display: inline; float: left }
.header-nav .nLi h3 { float: left }
.header-nav .nLi h3 a { display: block; padding: 0 18px; font-size: 16px; line-height: 77px }
.header-nav .nLi h3 a:hover { z-index: 999; color: #00a0ea; border-bottom: 3px solid #00a0ea }
.header-nav .sub { position: absolute; top: 80px; left:50%; margin-left:-80px;display: none; width: 160px; padding: 20px 0; line-height: 26px; text-align: center; background: rgba(36,42,55,.9) }
.header-nav .sub li { zoom: 1 }
.header-nav .sub a { display: block; line-height: 30px; color: rgba(255,255,255,.75) }
.header-nav .sub a:hover { color: #00a0ea }
.header-nav .on h3 a { z-index: 999; color: #00a0ea; border-bottom: 3px solid #00a0ea }
.header-mobile { float: right; width: 30%; height: 50px; color: #fff }
.header-mobile p { float: right; line-height: 50px }
.header-mobile p span { font-family: "ddjbt"; float: right; padding: 0 15px; margin-left: 15px; font-size: 24px; font-weight: 700; line-height: 50px; background: #00a0ea; cursor: pointer }
.header-mobile p span:hover { background: rgba(0,160,234,.9) }
.focus { width: 100%; min-width: 1180px; height: 240px; background: #048cff url(../images/focus_bg.png) center center no-repeat; background-size: 1920px 240px }
.focus .focus-item { width: 100%; height: 140px; padding: 50px 0; text-align: center }
.focus .focus-item .section-title { padding-bottom: 0 }
.focus .focus-item .section-title h2, .focus .focus-item .section-title p { color: #fff }
.focus .focus-item .seemore { margin-top: 25px }
footer { position: relative; min-width: 1180px; margin: 0 auto; color: rgba(255,255,255,.75); background: #242a37; overflow: hidden }
footer a { color: rgba(255,255,255,.75) }
.footer-safe { position: relative; width: 100%; min-width: 1180px; margin: 0 auto; overflow: hidden }
.footer-safe ul { padding: 30px 0; font-size: 0; border-bottom: 1px solid rgba(255,255,255,.1) }
.footer-safe ul li { display: inline-block; width: 20%; height: 48px; vertical-align: middle; text-align: center }
.footer-safe ul li a { font-size: 16px; color: #fff }
.footer-safe ul li a span { font-size: 16px; line-height: 48px }
.footer-safe ul li a i { margin-right: 10px; color: #fff; vertical-align: middle }
.footer-safe ul li a:hover { color: #00a0ea }
.footer-safe ul li a:hover i { color: #00a0ea }
.footer-safe ul li a:hover span { color: #00a0ea }
.footer-nav { padding: 30px 0; overflow: hidden }
.footer-nav-left { float: left; width: 69%; padding: 10px 0 15px }
.footer-nav-left:after { content: ""; display: table; clear: both }
.footer-nav-left dl { float: left; width: 20%; font-size: 14px; line-height: 30px }
.footer-nav-left dl dt { margin-bottom: 20px; font-size: 18px; color: #fff }
.footer-nav-left dl dd { font-size: 14px; line-height: 36px }
.footer-nav-right { float: left; width: 30%; padding: 10px 0 15px; border-left: 1px solid rgba(255,255,255,.1) }
.footer-contact { float: right; width: 83% }
.contact-text { width: 300px; height: 150px; text-align: left }
.contact-text p { font-size: 14px; line-height: 30px; color: rgba(255,255,255,.5) }
.contact-text p span { font-family: "ddjbt"; margin: 20px 0 10px 0; font-size: 24px; line-height: 36px; letter-spacing: 0px; color: #fff }
.contact-text dl { float: left; padding: 10px 0 20px }
.contact-text dl dd { font-size: 14px; line-height: 36px }
.qr-code { float: left; width: 275px; height: 40px }
.qr-code ul li { float: left; width: 40px; height: 40px; margin-right: 26px; text-align: center; background: rgba(255,255,255,.1); border-radius: 20px }
.qr-code ul li:before { content: ""; position: absolute; z-index: 0; width: 40px; height: 40px; border-radius: 50%; opacity: 0; -webkit-transition: .3s cubic-bezier(.3, 0, 0, 1.3); -moz-transition: .3s cubic-bezier(.3, 0, 0, 1.3); -ms-transition: .3s cubic-bezier(.3, 0, 0, 1.3); -o-transition: .3s cubic-bezier(.3, 0, 0, 1.3); transition: .3s cubic-bezier(.3, 0, 0, 1.3); -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0) }
.qr-code ul li:hover:before { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1) }
.qr-code ul a:nth-child(1) li:before { background: #d81e06 }
.qr-code ul a:nth-child(2) li:before { background: #1ec67a }
.qr-code ul a:nth-child(3) li:before { background: #18acfc }
.qr-code ul a:nth-child(4) li:before { background: #ffc200 }
.qr-code .fa { position: relative; width: 40px; height: 40px; font-size: 20px; line-height: 40px; color: #ccc }
.qr-code a:hover i { color: #fff }
.qr-code .qr-code-img { position: absolute; display: none; width: 130px; height: 130px; margin-top: -141px; margin-left: -45px; -webkit-box-shadow: 0 0 6px rgba(14,22,30,.3); -moz-box-shadow: 0 0 6px rgba(14,22,30,.3); -o-box-shadow: 0 0 6px rgba(14,22,30,.3); box-shadow: 0 0 6px rgba(14,22,30,.3) }
.qr-code .qr-code-img:after { content: ''; position: absolute; top: 129px; left: 57px; display: block; width: 0; height: 0; border: 8px solid transparent; border-top: 10px solid #fff }
.footer-links { position: relative; padding: 20px 0 20px 75px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1) }
.footer-links span { position: absolute; left: 0; line-height: 24px; color: #fff }
.footer-links ul { display: inline-block; vertical-align: top }
.footer-links ul li { float: left }
.footer-links ul li a { padding: 0 5px; margin: 0 10px; line-height: 24px }
.footer-copyright { height: 24px; padding: 20px 0 }
.footer-copyright-txt { float: left; width: 70%; line-height: 24px }
.footer-copyright a, .footer-copyright span { display: inline-block; margin: 0 5px; font-size: 14px }
.footer-copyright-links { float: right; width: 30%; line-height: 24px }
.footer-copyright-links ul { float: right; text-align: right }
.footer-copyright-links ul>li { display: inline-block; font-size: 14px; line-height: 18px }
.footer-copyright-links ul>li+li:before { content: "|"; margin-right: 5px; margin-left: 5px }
.back-top a { position: fixed; right: 40px; bottom: 50px; z-index: 999; width: 60px; height: 60px; font-size: 40px; line-height: 56px; color: #fff; text-align: center; background: rgba(0,160,234,1); border-radius: 40px; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.1); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.1); -o-box-shadow: 0 2px 10px rgba(0,0,0,.1); box-shadow: 0 2px 10px rgba(0,0,0,.1); cursor: pointer }
.back-top a:hover { background: rgba(0,160,234,.9) }
#alertbox { position: fixed; top: 50%; left: 50%; z-index: 999; display: none; width: 640px; height: 360px; margin-top: -180px; margin-left: -320px; background: url(../images/alertbox.png) center center no-repeat; line-height: 1.35; color: #fff; text-align: center }
#alertbox .close { position: absolute; top: 36px; right: 36px; display: block; width: 20px; height: 20px; cursor: pointer }
#alertbox .text1 { margin-top: 50px; font-size: 24px }
#alertbox .text2 { margin-top: 5px; font-size: 45px; letter-spacing: 1px }
#alertbox .text3 { font-size: 14px; opacity: .8 }
#alertbox .tel { position: relative; display: inline-block; padding: 0 20px; font-size: 24px; letter-spacing: 2px }
#alertbox .tel:after, #alertbox .tel:before { position: absolute; content: ''; top: 50%; display: block; width: 36px; height: 1px; background: #fff; opacity: .5 }
#alertbox .tel:before { left: -36px }
#alertbox .tel:after { right: -36px }
#alertbox .qqlink { display: block; width: 200px; height: 45px; margin: 30px auto 20px; font-size: 18px; line-height: 45px; color: #fff; text-align: center; background: #ff6a00; -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.15); -moz-box-shadow: 0 3px 10px rgba(0,0,0,.15); -o-box-shadow: 0 3px 10px rgba(0,0,0,.15); box-shadow: 0 3px 10px rgba(0,0,0,.15) }
@keyframes scaleToggleOne { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
50% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleTwo { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
20% {
transform:scale(1);
-webkit-transform:scale(1)
}
60% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleThree { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
33% {
transform:scale(1);
-webkit-transform:scale(1)
}
66% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { position: fixed; right: 40px; bottom: 100px; z-index: 700; width: 60px; height: 60px; border-radius: 50%; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); -o-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); -moz-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1); opacity: 0 }
.livechat-girl:focus { outline: 0 }
.livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }
.livechat-girl:after { position: absolute; top: 1px; right: 1px; z-index: 50; content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #00a0ea, #00a0ea) }
.livechat-girl .girl { position: absolute; top: 0; left: 0; z-index: 50; width: 100%; height: auto; border-radius: 50% }
.livechat-girl .animated-circles .circle { position: absolute; z-index: 49; width: 60px; height: 60px; background: rgba(0,160,234,.25); border-radius: 50%; transform: scale(1); -webkit-transform: scale(1) }
.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; top: 50%; right: 40px; z-index: 0; margin-top: -20px; opacity: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 }
.livechat-girl .livechat-hint.hide_hint { -webkit-transform: translateX(0); transform: translateX(0); opacity: 0 }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
@media only screen and (max-width:1599px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important }
}
@media only screen and (max-width:1309px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important }
}
@media only screen and (max-width:1124px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important }
}
.rd-notice-tooltip { position: absolute; z-index: 65; max-width: 350px; font-size: 14px; line-height: 1.25; border-radius: 3px; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); -o-box-shadow: 0 2px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); opacity: 1 }
.rd-notice-tooltip:after { position: absolute; z-index: 50; display: block; content: ''; width: 20px; height: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: none; -o-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) }
.rd-notice-tooltip .rd-notice-content { position: relative; z-index: 60; width: 100%; padding: 20px; color: #fff; font-weight: 400; line-height: 1.45; background: 0; border-radius: 3px }
.rd-notice-type-success { background-color: #00a0ea; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); -o-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); -moz-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #00a0ea }
.rd-notice-type-success:after { background-color: #00a0ea; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); -o-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); -moz-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { top: 50%; right: -6px; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }