/*
HTML5 Reset :: style.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://meyerweb.com
HTML5 Doctor :: http://html5doctor.com
and the HTML5 Boilerplate :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
background: transparent;
}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
/* *, *:before, *:after {box-sizing: border-box; } */
/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}
/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}
/* we use a lot of ULs that aren't bulleted.
don't forget to restore the bullets within content. */
ul,ol {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;text-decoration: none;outline: none;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
small {font-size: 85%;}
strong {font-weight: bold;}
td, td img {vertical-align: top;}
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}
/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}
/* prevent BG image flicker upon hover
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.contentblock:after{
display: block;
height:2rem;
content:'.';
visibility: hidden;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-user-drag: none;
font-family: arial,sans-serif;
}
.color-grey{
color:#b3b3b3;
}
.color-title {
color:#666;
}
input {
-webkit-appearance:none;
}
.nav_wrap_pc{
width: 100%;
height: 64px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
background: #ffffff;
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
.nav_wrap_padone{
padding: 0 31px;
}
.nav_wrap_padtwo{
padding: 0 10px;
}
.nav_cont{
width: auto;
display: flex;
justify-content: flex-start;
}
.nav_left{
width: 164px;
height: 54px;
cursor: pointer;
box-sizing: border-box;
padding-top: 15px;
}
.nav_left img{
display: block;
width: 100%;
}
.nav_center{
width: auto;
height: 64px;
display: flex;
justify-content: flex-start;
padding-left: 30px;
}
.nav_citems{
width: auto;
height: 64px;
box-sizing: border-box;
padding-top: 24px;
padding-right: 33px;
cursor: pointer;
}
.nav_citem_top{
width: auto;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #5F6368;
text-align: center;
}
.nav_citem_tactive{
color: #26A573;
font-weight: 500;
}
.nav_citem_down{
width: 100%;
height: 20px;
box-sizing: border-box;
padding-top: 17px;
}
.nav_citem_dactive{
width: 30px;
height: 3px;
background: #26A573;
margin: 0 auto;
border-radius: 50px 50px 0px 0px;
}
.nav_right{
width: auto;
height: 64px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav_ritems{
width: 48px;
height: 48px;
background: #ffffff;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.nav_ritems:hover{
background: #f5f5f5;
}
.nav_ritem_one{
width: 24px;
height: 24px;
border-radius: 50%;
background: red;
}
.nav_ritem_two{
width: 24px;
height: 24px;
border-radius: 50%;
background: red;
}
.nav_ritem_thr{
width: 32px;
height: 32px;
border-radius: 50%;
background: red;
}
.banner_wrap{
width: 100%;
height: auto;
padding-bottom: 70px;
background-color: #202124;
position: relative;
z-index: 9;
}
.banner_imgs{
width: 100%;
height: auto;
}
.banner_imgs img{
display: block;
width: 100%;
}
.banner_cont{
width: 100%;
height: auto;
position: absolute;
left: 0;
bottom: 50px;
box-sizing: border-box;
padding-top: 310px;
padding-left: 48px;
padding-right: 48px;
}
.banner_ctop{
width: 100%;
height: auto;
padding-bottom: 30px;
display: flex;
justify-content: flex-start;
}
.banner_ctleft{
width: 96px;
height: 96px;
}
.banner_ctleft img{
display: block;
width: 100%;
}
.banner_ctright{
width: auto;
height: 96px;
box-sizing: border-box;
padding-left: 25px;
}
.banner_ctr_one{
width: 100%;
height: 48px;
font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 48px;
}
.banner_ctr_two{
width: 100%;
height: 21px;
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #26A573;
line-height: 21px;
margin-top: 17px;
}
.banner_cdown{
width: 220px;
height: auto;
box-sizing: border-box;
padding-left: 25px;
}
.banner_cdown img{
display: block;
width: 100%;
}
.banner_footer{
width: 100%;
height: auto;
box-sizing: border-box;
padding-left: 25px;
margin-top: 40px;
}
.banner_fleft{
width: 160px;
height: 36px;
background: #26A573;
border-radius: 8px;
cursor: pointer;
float: left;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #202124;
text-align: center;
line-height: 36px;
margin-right: 33px;
}
.banner_fright{
width: 180px;
height: 36px;
display: flex;
align-items: center;
}
.banner_fright img{
display: block;
width: 100%;
}
.banner_cont_mobile{
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
padding-top: 200px;
padding-left: 0.64rem;
padding-right: 0.64rem;
}
.banner_cont_mobile .banner_ctop{
width: 100%;
height: auto;
padding-bottom: 30px;
display: flex;
justify-content: flex-start;
}
.banner_cont_mobile .banner_ctleft{
width: 1.92rem;
height: 1.92rem;
margin-top: 0.266667rem;
}
.banner_cont_mobile .banner_ctleft img{
display: block;
width: 100%;
}
.banner_cont_mobile .banner_ctright{
width: auto;
height: auto;
box-sizing: border-box;
padding-left: 0.666667rem;
display: flex;
align-items: center;
}
.banner_cont_mobile .banner_ctr_one{
width: 100%;
height: auto;
font-size: 0.56rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgb(232,234,237);;
line-height: 28px;
}
.banner_cont_mobile .banner_ctr_two{
width: 100%;
height: 21px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #26A573;
line-height: 21px;
margin-top: 7px;
}
.banner_cont_mobile .banner_cdown{
width: 70%;
height: auto;
margin: 20px auto;
}
.banner_wrap_mobile{
width: 100%;
padding-bottom: 180px;
background: #202124;
}
.banner_cont_mobile .banner_footer_mobile{
width: 100%;
height: auto;
box-sizing: border-box;
margin-top: 40px;
}
.banner_cont_mobile .banner_fleft_mobile{
width: 100%;
height: 36px;
background: #26A573;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #202124;
text-align: center;
line-height: 36px;
margin-right: 33px;
}
.banner_fright_mobile{
width: 4.8rem;
height: auto;
margin: 20px auto;
display: block;
}
.banner_cont_mobile .banner_fright_mobile img{
display: block;
width: 100%;
}
.scroll_list_wrap{
width: 100%;
height: auto;
}
.scroll_list_pc{
width: 60%;
height: auto;
box-sizing: border-box;
padding: 41px 0 39px 48px;
}
.scroll_list_pc img{
display: block;
width: 100%;
}
.scroll_list_mobile{
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0.533333rem;
overflow-x: scroll;
position: relative;
z-index: 9;
background: #ffffff;
}
.scroll_list_mobview{
width: 150vw;
height: auto;
}
.scroll_list_mobview img{
display: block;
width: 100%;
}
.scroll_list_mobview_wrap{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.desc_wrap_pc{
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 46px;
}
.desc_wrap_mobile{
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 20px;
}
.desc_wpc_title{
width: 100%;
height: 24px;
display: flex;
justify-content: flex-start;
}
.desc_wpc_tleft{
width: auto;
height: 24px;
font-size: 17px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 24px;
margin-right: 20px;
}
.desc_wpc_tright{
width: 14px;
height: 24px;
display: flex;
align-items: center;
}
.desc_wpc_trdv{
width: 14px;
height: 12px;
}
.desc_wpc_trdv img{
display: block;
width: 100%;
}
.desc_wpc_desc{
width: 100%;
height: auto;
padding-top: 19px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
}
.desc_wpc_title_one{
width: 100%;
height: auto;
padding-top: 28px;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 19px;
letter-spacing: 1px;
}
.desc_wpc_time_one{
width: 100%;
height: auto;
padding-top: 5px;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #5F6368;
line-height: 20px;
}
.desc_wpc_btns_one{
width: 100%;
height: auto;
padding-top: 32px;
}
.desc_wpc_btnone{
width: 98px;
height: 32px;
border-radius: 16px;
border: 1px solid #DADCE0;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #5F6368;
line-height: 32px;
cursor: pointer;
text-align: center;
}
.desc_wpc_tmargin{
margin-top: 40px;
}
.desc_wpc_message{
width: 100%;
height: auto;
margin-top: 25px;
border-radius: 8px;
border: 1px solid #DADCE0;
box-sizing: border-box;
padding: 20px;
}
.desc_wpc_msgitems{
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
}
.desc_wpc_msgileft{
width: 20px;
height: auto;
margin-right: 25px;
}
.desc_wpc_msgildv{
width: 20px;
height: 20px;
}
.desc_wpc_msgildv img{
display: block;
width: 100%;
}
.desc_wpc_msgildv .msg_03{
width: 15px;
}
.desc_wpc_msgildv .msg_04{
width: 17px;
}
.desc_wpc_msgiright{
width: auto;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #5F6368;
line-height: 19px;
}
.desc_wpc_msgimargin{
margin-top: 10px;
}
.desc_wpc_msgitem{
width: 100%;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #26A573;
line-height: 19px;
margin-top: 20px;
}
.desc_wpc_pingf{
width: 100%;
height: auto;
margin-top: 50px;
}
.desc_wrap_mobile .desc_wpc_pingf{
margin-top: 20px;
}
.desc_wpc_pingf img{
display: block;
width: 100%;
}
.desc_wpc_plun_wrap{
width: 100%;
height: auto;
margin-top: 50px;
}
.desc_wpc_plun_head{
width: 100%;
height: 33px;
display: flex;
justify-content: space-between;
}
.desc_wpc_plun_hleft{
width: auto;
height: 33px;
display: flex;
justify-content: flex-start;
}
.desc_wpc_plun_hlicon{
width: 33px;
height: 33px;
margin-right: 15px;
}
.desc_wpc_plun_hlicon img{
display: block;
width: 100%;
}
.desc_wpc_plun_hltext{
width: auto;
height: 33px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 33px;
}
.desc_wpc_plun_hright{
width: 8px;
height: 33px;
display: flex;
justify-content: center;
align-items: center;
}
.desc_wpc_plun_hrdv{
width: 4px;
height: 16px;
}
.desc_wpc_plun_hrdv img{
display: block;
width: 100%;
}
.desc_wpc_plun_miview{
margin-top: 13px;
}
.desc_wpc_plun_mitems{
width: 100%;
height: auto;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #5F6368;
line-height: 16px;
padding-top: 13px;
}
.desc_wpc_plun_mitems img{
display: inline-block;
width: 60px;
}
.desc_wpc_plun_mitems span{
display: inline-block;
width: 53px;
height: 24px;
border-radius: 12px;
border: 1px solid #D9DBDE;
text-align: center;
line-height: 24px;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #5F6368;
margin-left: 20px;
}
.desc_wpc_dvsolid{
width: 100%;
height: 55px;
border-bottom: 1px solid #E8EAED;
}
.desc_wpc_footer_wrap{
width: 100%;
height: auto;
margin-top: 50px;
padding-bottom: 100px;
}
.desc_wrap_mobile .desc_wpc_footer_wrap{
margin-top: 0.8rem;
padding-bottom: 1.333333rem;
}
.desc_wpc_footer_view{
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
}
.desc_wrap_mobile .desc_wpc_footer_view{
display: block;
}
.desc_wpc_footer_list{
width: 40%;
height: auto;
}
.desc_wrap_mobile .desc_wpc_footer_list{
width: 100%;
}
.desc_wpc_footer_litems{
width: 100%;
height: auto;
}
.desc_wpc_footer_ltitle{
width: 100%;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bolder;
color: #5F6368;
line-height: 20px;
margin-top: 6px;
}
.desc_wpc_footer_litem{
width: 100%;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
color: #5F6368;
line-height: 20px;
margin-top: 12px;
}
.desc_wpc_footer_vone{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 40px;
}
.desc_wrap_mobile .desc_wpc_footer_vone{
margin-top: 0.533333rem;
}
.desc_wpc_footer_voitems{
width: auto;
height: 15px;
font-size: 11px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #5F6368;
line-height: 15px;
padding-right: 25px;
}
.desc_wrap_mobile .desc_wpc_footer_voitems{
padding-bottom: 10px;
}
.banner_fleft_download{
display: block;
width: 100%;
height: 100%;
}