@charset "utf-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, nav, header,
figcaption,
form, fieldset, legend, img, div, span, section, footer, em, input, textarea, a, figure{ margin:0; padding:0; box-sizing: border-box;}
fieldset, img,input,button, textarea { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input, textarea { padding-top:0; padding-bottom:0;}
select, input { vertical-align:middle; }
select, input, textarea { margin:0; outline: none;}
textarea { resize:none; }
img {border:0;vertical-align:middle;}
table { border-collapse:collapse; }
body {
font-size:16px;
color:#666;
background:#fff;
box-sizing: border-box;
}
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
a{color:#666; text-decoration:none;transition:All 0.5s ease;-webkit-transition:All 0.5s ease;-moz-transition:All 0.5s ease;-o-transition:All 0.5s ease;}
a:hover{text-decoration:none}
.bd_weixin_popup {box-sizing: content-box;}
a:link,
a:visited,
a:active,
a:focus {outline: none;}
h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;}
s,i,em{font-style:normal;text-decoration:none;}
/* 控制移动端浏览器对文本大小的自动调整行为
解决iOS横屏时文字自动放大问题
防止Chrome浏览器强制最小12px字体显示 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: calc(100vw / 1920 * 100);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-width: thin;
}
@media(max-width: 900px){
html{font-size: calc(900px / 1920 * 100);}
}
/*!
* 字体、行高、内容宽自定义
*/
:root {
--mainWid: 15.36rem; /* 内容宽 */
--offset: calc((100% - var(--mainWid)) / 2);
--padding: 1.2rem;
--headerH: 1.02rem;
/* 行高:偶数 */
--lh20: 20px;
--lh22: 22px;
--lh24: 24px;
--lh26: 26px;
--lh28: 28px;
--lh30: 30px;
--lh32: 32px;
--lh34: 34px;
--lh36: 36px;
--lh38: 38px;
--lh40: 40px;
--lh42: 42px;
--lh44: 44px;
--lh46: 46px;
--lh48: 48px;
--lh50: 50px;
--lh52: 52px;
--lh54: 54px;
--lh56: 56px;
--lh58: 58px;
--lh60: 60px;
--lh72: 72px;
--lh80: 80px;
--lh100: 100px;
/* 最小值,理想值按比例缩放,最大值 */
--fs12: clamp(12px, calc(12 / 1920 * 100vw), 12px);
--fs13: clamp(13px, calc(13 / 1920 * 100vw), 13px);
--fs14: clamp(14px, calc(14 / 1920 * 100vw), 14px);
--fs15: clamp(15px, calc(15 / 1920 * 100vw), 15px);
--fs16: clamp(16px, calc(16 / 1920 * 100vw), 16px);
--fs17: clamp(17px, calc(17 / 1920 * 100vw), 17px);
--fs18: clamp(18px, calc(18 / 1920 * 100vw), 18px);
--fs19: clamp(calc(19 / 1920 * 100vw), calc(19 / 1920 * 100vw), calc(19 / 1920 * 100vw));
--fs20: clamp(calc(20 / 1920 * 100vw), calc(20 / 1920 * 100vw), calc(20 / 1920 * 100vw));
--fs21:calc(21 * 100vw / 1920);
--fs22:calc(22 * 100vw / 1920);
--fs23:calc(23 * 100vw / 1920);
--fs24:calc(24 * 100vw / 1920);
--fs25:calc(25 * 100vw / 1920);
--fs26:calc(26 * 100vw / 1920);
--fs27:calc(27 * 100vw / 1920);
--fs28:calc(28 * 100vw / 1920);
--fs29:calc(29 * 100vw / 1920);
--fs30:calc(30 * 100vw / 1920);
--fs31:calc(31 * 100vw / 1920);
--fs32:calc(32 * 100vw / 1920);
--fs33:calc(33 * 100vw / 1920);
--fs34:calc(34 * 100vw / 1920);
--fs35:calc(35 * 100vw / 1920);
--fs36:calc(36 * 100vw / 1920);
--fs37:calc(37 * 100vw / 1920);
--fs38:calc(38 * 100vw / 1920);
--fs39:calc(39 * 100vw / 1920);
--fs40:calc(40 * 100vw / 1920);
--fs41:calc(41 * 100vw / 1920);
--fs42:calc(42 * 100vw / 1920);
--fs43:calc(43 * 100vw / 1920);
--fs44:calc(44 * 100vw / 1920);
--fs45:calc(45 * 100vw / 1920);
--fs46:calc(46 * 100vw / 1920);
--fs47:calc(47 * 100vw / 1920);
--fs48:calc(48 * 100vw / 1920);
--fs49:calc(49 * 100vw / 1920);
--fs50:calc(50 * 100vw / 1920);
--fs51:calc(51 * 100vw / 1920);
--fs52:calc(52 * 100vw / 1920);
--fs53:calc(53 * 100vw / 1920);
--fs54:calc(54 * 100vw / 1920);
--fs55:calc(55 * 100vw / 1920);
--fs56:calc(56 * 100vw / 1920);
--fs57:calc(57 * 100vw / 1920);
--fs58:calc(58 * 100vw / 1920);
--fs59:calc(59 * 100vw / 1920);
--fs60:calc(60 * 100vw / 1920);
--fs70:calc(70 * 100vw / 1920);
--fs72:calc(72 * 100vw / 1920);
--fs88:calc(88 * 100vw / 1920);
--fs100:calc(100 * 100vw / 1920);
--fs110:calc(110 * 100vw / 1920);
--fs120:calc(120 * 100vw / 1920);
--fs150:calc(150 * 100vw / 1920);
}
@media(max-width: 1600px) {
:root {
--padding: 1.1rem;
--mainWid: 16rem; /* 内容宽 */
--lh20: 18px;
--lh22: 20px;
--lh24: 22px;
--lh30: .34rem;
--lh32: .36rem;
--lh34: .38rem;
--lh36: .40rem;
--lh38: .42rem;
--lh40: .46rem;
--lh42: .48rem;
--lh44: .50rem;
--lh46: .52rem;
--lh48: .54rem;
--lh50: .56rem;
--lh52: .58rem;
--lh54: .60rem;
--lh56: .62rem;
--lh58: .64rem;
--lh60: .66rem;
--lh72: .80rem;
--lh80: .9rem;
--lh100: 1.1rem;
}
}
@media(max-width: 1520px) and (min-width: 551px){
:root {
--fs13:calc(10px + 1 * 100vw / 1920);
--fs14:calc(10px + 2 * 100vw / 1920);
--fs15:calc(10px + 3 * 100vw / 1920);
--fs16:calc(10px + 4 * 100vw / 1920);
--fs17:calc(10px + 5 * 100vw / 1920);
--fs18:calc(10px + 6 * 100vw / 1920);
--fs20:calc(8px + 10 * 100vw / 1920);
--fs21:calc(8px + 10 * 100vw / 1920);
--fs22:calc(8px + 10 * 100vw / 1920);
--fs23:calc(8px + 11 * 100vw / 1920);
--fs24:calc(8px + 12 * 100vw / 1920);
--fs25:calc(8px + 13 * 100vw / 1920);
--fs26:calc(8px + 14 * 100vw / 1920);
--fs27:calc(8px + 15 * 100vw / 1920);
--fs28:calc(8px + 16 * 100vw / 1920);
--fs29:calc(8px + 17 * 100vw / 1920);
--fs30:calc(8px + 18 * 100vw / 1920);
--fs31:calc(8px + 19 * 100vw / 1920);
--fs32:calc(8px + 20 * 100vw / 1920);
--fs33:calc(8px + 21 * 100vw / 1920);
--fs34:calc(8px + 22 * 100vw / 1920);
--fs35:calc(8px + 23 * 100vw / 1920);
--fs36:calc(8px + 24 * 100vw / 1920);
--fs37:calc(8px + 25 * 100vw / 1920);
--fs38:calc(8px + 26 * 100vw / 1920);
--fs39:calc(8px + 27 * 100vw / 1920);
--fs40:calc(8px + 28 * 100vw / 1920);
--fs41:calc(8px + 29 * 100vw / 1920);
--fs42:calc(8px + 30 * 100vw / 1920);
--fs43:calc(8px + 31 * 100vw / 1920);
--fs44:calc(8px + 32 * 100vw / 1920);
--fs45:calc(8px + 33 * 100vw / 1920);
--fs46:calc(8px + 34 * 100vw / 1920);
--fs47:calc(8px + 35 * 100vw / 1920);
--fs48:calc(8px + 36 * 100vw / 1920);
--fs49:calc(8px + 37 * 100vw / 1920);
--fs50:calc(8px + 38 * 100vw / 1920);
--fs51:calc(8px + 39 * 100vw / 1920);
--fs52:calc(8px + 40 * 100vw / 1920);
--fs53:calc(8px + 41 * 100vw / 1920);
--fs54:calc(8px + 42 * 100vw / 1920);
--fs55:calc(8px + 43 * 100vw / 1920);
--fs56:calc(8px + 44 * 100vw / 1920);
--fs57:calc(8px + 45 * 100vw / 1920);
--fs58:calc(8px + 46 * 100vw / 1920);
--fs59:calc(8px + 47 * 100vw / 1920);
--fs60:calc(8px + 48 * 100vw / 1920);
--fs70:calc(8px + 58 * 100vw / 1920);
--fs72:calc(8px + 60 * 100vw / 1920);
--fs88:calc(8px + 76 * 100vw / 1920);
--fs100:calc(8px + 88 * 100vw / 1920);
--fs150:calc(8px + 138 * 100vw / 1920);
--fs200:calc(8px + 188 * 100vw / 1920);
--fs500:calc(8px + 488 * 100vw / 1920);
}
}
@media(max-width: 550px){
:root {
--mainWid: 100%; /* 内容宽 */
--offset: .3rem;
--padding: 1rem;
--headerH: 1.2rem;
/* 行高:偶数 */
--lh20: .40rem;
--lh22: .44rem;
--lh24: .48rem;
--lh26: .52rem;
--lh28: .56rem;
--lh30: .6rem;
--lh32: .64rem;
--lh34: .68rem;
--lh36: .72rem;
--lh38: .76rem;
--lh40: .8rem;
--lh42: .84rem;
--lh44: .88rem;
--lh46: .92rem;
--lh48: .96rem;
--lh50: 1rem;
--lh52: 1.04rem;
--lh54: 1.08rem;
--lh56: 1.12rem;
--lh58: 1.16rem;
--lh60: 1.2rem;
--lh72: 1.24rem;
--lh80: 1.6rem;
--lh100: 2rem;
--fs12:.24rem;
--fs13:.26rem;
--fs14:.28rem;
--fs15:.30rem;
--fs16:.32rem;
--fs17:.34rem;
--fs18:.36rem;
--fs19:.38rem;
--fs20:.40rem;
--fs21:.42rem;
--fs22:.44rem;
--fs23:.46rem;
--fs24:.48rem;
--fs25:.50rem;
--fs26:.52rem;
--fs27:.54rem;
--fs28:.56rem;
--fs29:.58rem;
--fs30:.60rem;
--fs31:.62rem;
--fs32:.64rem;
--fs33:.66rem;
--fs34:.68rem;
--fs35:.70rem;
--fs36:.72rem;
--fs37:.74rem;
--fs38:.76rem;
--fs39:.78rem;
--fs40:.80rem;
--fs41:.82rem;
--fs42:.84rem;
--fs43:.86rem;
--fs44:.88rem;
--fs45:.90rem;
--fs46:.92rem;
--fs47:.94rem;
--fs48:.96rem;
--fs49:.98rem;
--fs50:1rem;
--fs51:1.02rem;
--fs52:1.04rem;
--fs53:1.06rem;
--fs54:1.08rem;
--fs55:1.1rem;
--fs56:1.12rem;
--fs57:1.14rem;
--fs58:1.16rem;
--fs59:1.18rem;
--fs60:1.2rem;
--fs70:1.4rem;
--fs72:1.14rem;
--fs88:1.76rem;
--fs100:2rem;
--fs150:3rem;
}
}
/*!
* animate.css Version - 3.7.2
*
* Copyright (c) 2019 Daniel Eden
*/
@-webkit-keyframes fadeIn{from{opacity:0}
to{opacity:1}
}
@keyframes fadeIn{from{opacity:0}
to{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeOut{from{opacity:1}
to{opacity:0}
}
@keyframes fadeOut{from{opacity:1}
to{opacity:0}
}
.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInLeft50{from{opacity:0;-webkit-transform:translate3d(-50px,0,0);-moz-transform:translate3d(-50px,0,0);-ms-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-moz-keyframes fadeInLeft50{from{opacity:0;-webkit-transform:translate3d(-50px,0,0);-moz-transform:translate3d(-50px,0,0);-ms-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-o-keyframes fadeInLeft50{from{opacity:0;-webkit-transform:translate3d(-50px,0,0);-moz-transform:translate3d(-50px,0,0);-ms-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInLeft50{from{opacity:0;-webkit-transform:translate3d(-50px,0,0);-moz-transform:translate3d(-50px,0,0);-ms-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.fadeInLeft50{-webkit-animation-name:fadeInLeft50;-moz-animation-name:fadeInLeft50;-ms-animation-name:fadeInLeft50;animation-name:fadeInLeft50}
@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInRight50{from{opacity:0;-webkit-transform:translate3d(50px,0,0);-moz-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-moz-keyframes fadeInRight50{from{opacity:0;-webkit-transform:translate3d(50px,0,0);-moz-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-o-keyframes fadeInRight50{from{opacity:0;-webkit-transform:translate3d(50px,0,0);-moz-transform:translate3d(50px,0,0);-ms-transform:translate3d(50px,0,0);transform:translate3d(50px,0,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.fadeInRight50{-webkit-animation-name:fadeInRight50;-moz-animation-name:fadeInRight50;-ms-animation-name:fadeInRight50;animation-name:fadeInRight50}
@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUp50{from{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-moz-keyframes fadeInUp50{from{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@-o-keyframes fadeInUp50{from{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes fadeInUp50{from{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
to{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.fadeInUp50{-webkit-animation-name:fadeInUp50;-moz-animation-name:fadeInUp50;-ms-animation-name:fadeInUp50;animation-name:fadeInUp50}
@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5)}
100%{opacity:1}
}
@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5)}
100%{opacity:1}
}
.fadeOutUp50{-webkit-animation-name:fadeOutUp50;-moz-animation-name:fadeOutUp50;-ms-animation-name:fadeOutUp50;animation-name:fadeOutUp50;}
@-webkit-keyframes fadeOutUp50{from{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);}
to{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);}
}
@-moz-keyframes fadeOutUp50{from{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);}
to{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);}
}
@-o-keyframes fadeOutUp50{from{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);}
to{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);}
}
@keyframes fadeOutUp50{from{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);}
to{opacity:0;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-ms-transform:translate3d(0,50px,0);}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}
.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}
.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}
.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}
.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}
.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}
.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}
.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}
.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}
@media (print),(prefers-reduced-motion:reduce){.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}
}
@keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}@-webkit-keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}@-moz-keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}@-ms-keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}