/* CSS Document By Aring QQ:838278506 http://www.divsz.com/ */
@import url("animate.css");
@import url("all.css");

/**** main ****/



.ban{ width:100%; overflow:hidden; position:relative;}
.ban_w{ display:flex; align-items:flex-start;}
.ban_c{ width:100%; flex-shrink:0; cursor:pointer;}
.ban_c h6{ display:none;}
.ban_c img{ width:100%;}
.ban_p{ width:120px; text-align:center; padding:6px 0; border-radius:6px; margin-left:-60px; background:rgba(0,0,0,0.3); position:absolute; left:50%; bottom:4%;}
.ban_p span{ display:inline-block; width:12px; height:12px; border:1px solid #ffffff; border-radius:50%; margin:0 8px; cursor:pointer;}
.ban_p span.cur{ background:#ffffff;}
@media (max-width:767px){
.ban_c h5{ display:none;}
.ban_c h6{ display:block;}
.ban_p{ width:80px; padding:6px 0; border-radius:4px; margin-left:-40px;}
.ban_p span{ width:8px; height:8px; margin:0 6px;}
}

.safe{ padding:40px 0 60px;}
.safe_t h3{ font-size:24px; color:#333333; text-align:center; line-height:42px;}
.safe_tw{ width:100px; height:36px; font-size:16px; color:#333333; margin:0 auto;}
.safe_tt{ text-align:center; line-height:24px; cursor:pointer;}
.safe_tc{ width:800px; height:360px; border-radius:6px; margin-left:-400px; background:rgba(0,0,0,0.8); left:50%; top:36px;}
.safe_tc:after{ width:0; height:0; border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid rgba(0,0,0,0.8); border-left:10px solid transparent; margin-left:-10px; content:""; position:absolute; left:50%; top:-20px;}
.safe_tc dt,.safe_tc dd{ color:#ffffff;}
.safe_tc h4{ font-size:18px; line-height:40px;}
.safe_tc p{ font-size:12px; text-align:justify; line-height:18px; padding-bottom:10px;}
@media (max-width:767px){
.safe_tc{ width:360px; height:720px; padding:20px 30px; margin-left:-180px;}
}
@media (min-width:768px){
.safe_tc dt{ float:left; width:400px; padding:20px 30px 20px 40px;}
.safe_tc dd{ float:left; width:400px; padding:20px 40px 20px 30px;}
.safe_c .safe_l{ float:left; width:45%;}
.safe_c .safe_r{ float:right; width:45%;}
}
.safe_c h6 img{ width:50%; max-width:250px; margin:40px auto 0;}
.safe_c h4{ font-size:20px; color:#333333; text-align:center; line-height:32px; padding-top:20px;}
.safe_c p{ font-size:13px; color:#333333; text-align:justify; line-height:20px;}







.pro_c{ margin-bottom:10px; position:relative;}
.pro_a img,.pro_d{ width:100%;}
.pro_b{ display:flex; width:100%; height:100%; color:#ffffff; align-items:center; position:absolute; top:0;}




.pro_d h3{ height:72px; font:60px Arial; line-height:72px;}
.pro_d h4{ font-size:18px; line-height:32px;}
.pro_d p{ line-height:24px;}


.pro_hw{ width:72px; height:42px;}
.pro_hw h5{ font-size:16px; line-height:36px; cursor:pointer;}
.pro_hc{ width:400px; line-height:24px; text-align:justify; border-radius:6px; padding:20px 24px; background:rgba(0,0,0,0.8); right:-180px; top:42px;}
.pro_hc:after{ width:0; height:0; border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid rgba(0,0,0,0.8); border-left:10px solid transparent; content:""; position:absolute; left:165px; top:-20px;}
@media (max-width:767px){
.pro_hc{ width:240px; font-size:10px; line-height:18px; padding:12px 16px; left:-108px; top:32px;}
.pro_hc:after{ left:116px;}
}


.pro_iw{ width:72px; height:42px;}
.pro_iw h5{ font-size:16px; line-height:36px; cursor:pointer;}
.pro_ic{ width:480px; line-height:24px; text-align:justify; border-radius:6px; padding:20px 24px; background:rgba(0,0,0,0.8); left:0; top:42px;}
.pro_ic:after{ width:0; height:0; border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid rgba(0,0,0,0.8); border-left:10px solid transparent; content:""; position:absolute; left:16px; top:-20px;}
@media (max-width:767px){
.pro_ic{ width:300px; font-size:10px; line-height:18px; padding:12px 16px; top:32px;}
.pro_ic:after{ left:8px;}
}


.pro_lw{ width:72px; height:42px;}
.pro_lw h5{ font-size:16px; line-height:36px; cursor:pointer;}
.pro_lc{ width:400px; line-height:24px; text-align:justify; border-radius:6px; padding:20px 24px; background:rgba(0,0,0,0.8); left:0px; top:42px;}
.pro_lc:after{ width:0; height:0; border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid rgba(0,0,0,0.8); border-left:10px solid transparent; content:""; position:absolute; left:16px; top:-20px;}
@media (max-width:767px){
.pro_lc{ width:240px; font-size:10px; line-height:18px; padding:12px 16px; left:-20px; top:32px;}
.pro_lc:after{ left:28px;}
}

.pro_e{ width:50%; padding-left:20%; left:0; z-index:3;}
.pro_f{ width:50%; left:50%; z-index:2;}
.pro_f p{ margin-bottom:6px;}
.pro_f p img{ width:60%; max-width:560px;}
.pro_g{ width:50%; left:0; z-index:2;}
.pro_g p img{ float:right; width:90%; max-width:695px;}
.pro_h{ width:35%; left:65%; z-index:3;}
.pro_i{ width:50%; padding-left:20%; left:0; z-index:4;}
.pro_j{ width:50%; left:50%; z-index:2;}
.pro_j p img{ width:70%; max-width:700px;}
.pro_k{ width:30%; left:0; z-index:2;}
.pro_k p img{ float:right; width:50%; max-width:298px;}
.pro_l{ width:65%; left:35%; z-index:3;}





@media (max-width:767px){
.pro_d h3{ height:30px; font:18px Arial; line-height:30px;}
.pro_d h4{ font-size:13px; line-height:24px;}
.pro_d p{ font-size:10px; line-height:18px;}
.pro_d h5{ font-size:12px; line-height:24px;}
.pro_e{ width:60%; padding-left:10%; left:0;}
.pro_f{ width:40%; left:60%;}
.pro_f p img{ width:80%;}
.pro_g{ width:50%; left:0;}
.pro_g p img{ float:right; width:80%;}
.pro_h{ width:40%; left:60%;}
.pro_i{ width:60%; padding-left:10%; left:0;}
.pro_j{ width:40%; left:60%;}
.pro_j p img{ width:90%;}
.pro_k{ width:30%; left:10%;}
.pro_k p img{ float:none; width:54%;}
.pro_l{ width:65%; left:35%;}
}



.func{ width:100%; position:relative;}
.func_b img{ width:100%;}
.func_c{ width:100%; position:absolute; left:0; top:0;}
.func_c li{ float:left; width:50%; padding-top:4%;}
.func_c li h3{ font-size:24px; color:#ffffff; text-align:center; line-height:48px; padding-bottom:6px;}
.func_c li p{ font-size:16px; color:#ffffff; text-align:center; line-height:32px;}
.func_p{ width:100%; height:60px; padding:10px 0; background:rgba(0,0,0,0.2); position:absolute; bottom:0; z-index:2;}
.func_p a{ display:block; width:20%; max-width:400px; min-width:160px; width:20%; height:38px; color:#e9faf9; text-align:center; line-height:38px; border:1px solid #ffffff; border-radius:20px; margin:0 auto;}
.func_m{ display:none;}
.func_m img{ width:100%;}


@media (max-width:767px){
.func_b,.func_c{ display:none;}
.func_m{ display:block;}
}



@media screen and (min-width:768px) and (max-width:900px){
.func_c li{ padding-top:2%;}
.func_c li h3{ font-size:18px; line-height:36px;}
.func_c li p{ font-size:12px; line-height:20px;}
}




.buy{ background:#f5f5f5; padding:80px 0 60px;}

@media (max-width:899px){

.buy{ padding:40px 0 20px;}
.buy_c{ padding:0 20px;}

}

@media (min-width:900px){

.buy_c{ float:left; width:33.33%;}
.buy_dl{ margin-right:24px;}
.buy_dc{ margin:0 12px;}
.buy_dr{ margin-left:24px;}
.buy_a{ padding-top:12px;}
}




.buy_d{ text-align:center; box-shadow:1px 1px 1px #eeeeee; padding:0 20px; margin-bottom:20px; background:#ffffff;}
.buy_a{ color:#333333; text-align:center; line-height:32px;}
.buy_d .buy_t{ border-bottom:1px solid #dddddd;}
.buy_d .buy_t h4{ width:140px; padding:30px 0 20px; margin:0 auto;}
.buy_d .buy_t h3{ font-size:16px; color:#333333; line-height:32px;}
.buy_d .buy_t p{ font-size:12px; color:#535353; line-height:18px; padding-bottom:20px;}
.buy_d.f_r .buy_t h3{ color:#f9ab27;}
.buy_d .buy_m{ padding-bottom:40px;}
.buy_d .buy_m h3{ height:84px; font-size:18px; color:#ff4b50; line-height:64px; padding-top:20px;}
.buy_d .buy_m h3 span{ font-size:30px;}
.buy_d .buy_m h3 em{ font-size:50px;}
.buy_d.f_r .buy_m h3{ color:#f9ab27;}
.buy_d .buy_m p{ width:164px; color:#535353; text-align:left; line-height:30px; margin:0 auto;}
.buy_d .buy_m p span{ padding-right:30px;}
.buy_d .buy_m h4{ font-size:12px; color:#00a2ca; line-height:24px; padding-bottom:12px;}
.buy_d .buy_m h5{ width:160px; margin:0 auto;}
.buy_d .buy_m h5 a{ width:160px; height:48px; font-size:18px; color:#ffffff; text-align:center; line-height:48px; border-radius:24px; background:#ff494b;}
.buy_d.buy_dr .buy_t h3{ color:#f9ab27;}
.buy_d.buy_dr .buy_m h3{ color:#f9ab27;}
.buy_d.buy_dr .buy_m h5 a{ background:#fcb832;}

.case{ width:100%; overflow:hidden; position:relative;}
.case_w{ display:flex; align-items:flex-start;}
.case_c{ width:100%; flex-shrink:0; position:relative;}
.case_c img{ width:100%;}
.case_c p{ width:26%; font-size:16px; color:#ffffff; line-height:24px; position:absolute; left:58%; top:38%; bottom:20px; z-index:3;}
.case_c h6{ display:none;}
.case_p{ width:96px; position:absolute; left:58%; bottom:20%;}
.case_p span{ display:inline-block; width:10px; height:10px; border:1px solid #ffffff; border-radius:50%; margin-right:12px; cursor:pointer;}
.case_p span.cur{ border:1px solid #22a9ff; background:#22a9ff;}
@media (max-width:767px){
.case_p{ margin-left:-48px; left:50%; top:5%;}
.case_c h5,.case_c p{ display:none;}
.case_c h6{ display:block;}
}
.user{ padding:80px 0 100px;}
.user h3{ font-size:24px; color:#333333; text-align:center; line-height:42px;}
.user p{ font-size:12px; color:#333333; text-align:center; line-height:24px; padding-bottom:32px;}
.user li{ float:left; width:25%; padding:25px;}
.user li img{ width:100%; max-width:230px; margin:0 auto;}
@media (max-width:767px){
.user{ padding:30px 0 50px;}
.user li{ float:left; width:50%; padding:25px;}
.user p{ padding-bottom:12px;}
.user p span{ display:block;}
}
.help{ background:#fafafa;}
.help h3{ font-size:24px; color:#333333; line-height:48px; padding:12px 0 0 16px;}
.help ul{ width:100%; height:401px; overflow:hidden;}
.help li{ height:50px;}
.help li a{ display:block; line-height:50px; border-bottom:1px solid #ebebeb; padding:0 16px;}
.help li a:hover{ padding:0 16px 0 36px;}
.help p{ font-size:12px; line-height:50px; padding-left:16px;}
.help p a{ color:#ee7c7e; margin-left:10px;}
.help p a:hover{ color:#e92c11;}
.help h4{ width:160px; padding:20px 0 40px; margin:0 auto;}
.help h4 a{ width:160px; height:48px; color:#ffffff; text-align:center; line-height:48px; border-radius:24px; background:#ff6562;}
@media (min-width:900px){
.help li{ float:left; width:50%;}
.help li:nth-child(even) a{ margin-left:20px;}
.help li:nth-child(odd) a{ margin-right:20px;}
}