﻿.cs_w{width: 66%; margin: auto;}
.index .border_b{border:none}
.web_main .con_03 h2{font-size: 3.6rem}
.cs_w_90{width: 90%; margin: auto;}
.cs_w_80{width: 80%; margin: auto;}
.cs_w_70{width: 70%; margin: auto;}
.cs_w_60{width: 60%; margin: auto;}
.cs_w_50{width: 50%; margin: auto;}
.web_main{background: #fff; width: 100%; padding-top: 96px; overflow: hidden}
.web_main_a{padding-top: 120px}
.web_main_a h2{color: #222}
.web_main h2{font-size: 5.6rem; line-height: 6.4rem; color: #fff}
.font li.icon-ture_around{color: #fff; margin: 20px 0 0; padding-left: 26px; position: relative;}
.font li.icon-ture_around:before{color: #00a94d; padding-right: 8px; position: absolute; top: 1px; left: 0}
.cons.table{height: 100%}
body .btn,body .s_btn{padding-top: 11px!important;padding-bottom: 11px!important; min-width: 180px;}
body.mem .btn,body.mem .s_btn{padding-top: 6px!important;padding-bottom: 6px!important; min-width: 140px; white-space: nowrap;;}
/*.en .s_btn,.en .btn{min-width: 100px;}*/
.en.index h2{line-height: 4.5rem!important;}
.en.index h3{line-height:3.2rem!important;}
.index .font a.btn{margin-top: 100px!important;}
@media (max-width:1380px) {
    .cs_w_90,.cs_w_80,.cs_w_70,.cs_w_60,.cs_w_50,.cs_w{width: 90%!important;}
}
@media (max-width:990px) {
    .cs_w_90,.cs_w_80,.cs_w_70,.cs_w_60,.cs_w_50,.cs_w{width: 76%!important;}
    .cons.table:before{content: ""; width: 100vw; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(rgba(7, 27, 56, 0.4),rgba(7, 27, 56, 1))}
}
@media (max-width:750px) {
    .web_main h2{font-size: 4.2rem}
    .web_main_a{padding-top: 89px}
    .index .font a.btn{width: 100%; margin-left: 0!important;}
    a.btn,a.s_btn,div.btn{width: 100%; margin-left: 0!important; margin-top: 20px!important;}
    .index .font a.btn:nth-child(2),.btn:nth-child(2){margin-top: 15px!important;}
}
.vh{min-height: 900px; height: 100vh}

/*header*/
.header{position: fixed; top: 0; width: 100%;background: rgba(255,255,255,10);border-bottom: 1px solid rgba(0,0,0,0.06); transition: all 0.8s ease; z-index: 90}
.header .logo{background: url("../images/logo.svg") left center no-repeat; width: 130px; height: 48px; display: inline-block; background-size: auto 44px; }
.en .header .logo{background: url("../images/logo_en.svg") center no-repeat; width: 170px; height: 48px; display: inline-block; background-size: auto 44px;}
.header .menu{display: inline-block; font-family: "Microsoft YaHei Light", serif !important; position: relative}
.menu_back{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 30;transition: all .5s ease-in-out;background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(7px);}
.menu_s_back{position: fixed; top: 98px; left: 0; background: #fff;width: 100%;  height: 152px; z-index: 31;}
.index .menu_s_back{position: fixed; top: 0; left: 0; background: #fff; width: 100%; height: 250px; z-index: 31;}
.menu_s_back.b{top: -161px;}
.header .menu ul{z-index: 99;position: relative; font-size: 0;}
.header .menu li{display: inline-block; font-size: 1.6rem}
.header .menu li .a{color: #222; padding: 30px 21px; display: inline-block; position: relative;}
.index .banner_pic > div:first-child .font{position: relative; left: -80px;}
.en .header .menu li .a{padding: 30px 18px;}
.header .menu li .a:hover{color: #00a94d}
@media (max-width:1600px) {
    .en .header .menu li .a{padding: 30px 10px;}
    .header .menus{width: 96%}
}
@media (min-width:1382px) {
    .header .logo{padding: 25px 0; display: inline-block}
    .header .menu li dl{position: absolute; display: block!important; top: 97px;opacity: 0; margin: 0 20px; width: 900px; text-align: center; left: -445px; transition: all .7s ease; pointer-events: none;}
    .header .menu li dl dd{display: inline-block; position: relative;left: 20px; margin:0 20px;}
    .header .menu li dl dd .a{color: #222;margin: 0; padding: 60px 0}
    .header .menu li dl dd .a:before{display: none}
    .header .menu li .a:hover dl {opacity: 1; top: 97px; left: -425px; pointer-events: auto;}
}
.index_a.header{background: none; }
.index.header{background: none; box-shadow: 0 3px 9px rgba(0,0,0,0); border-bottom: 1px solid rgba(255,255,255,0.1);}
.header>.cs_w_90{width: 97%}
.index.header .menu li .a{color: #fff;}
.index.header .menu li .a i{color: #fff}
.header .menu li .a i{ margin: -11px 0 0 -1px;padding:0 9px; font-size: 10px; color: #555; opacity: 0.5;transition: all .2s ease; display: inline-block;position: absolute; top: 50%}
.header .menu li .a:hover i{transform: rotate(180deg); margin-top: -14px}
.header .menu li .a:before{transition: all .3s ease; content: ""; width: 0; height: 3px; display: inline-block; border-radius: 30px; position: absolute; left: 50%; margin-left:0; top: 86px; background: #00a94d}
.header .menu li .a:hover:before{width: calc(100% - 50px); margin-left: -50%; left: calc(50% + 25px);}
.header .menu li .a em{opacity: 0.5; padding-left: 8px;}
.header .search a{padding-left: 20px; font-size: 1.6rem;}
.index.header .search a{color: #fff}
.header .search a:hover,.index.header .search a:hover{color: #00a94d}
.index.header .menu li a:before{bottom: 20px}
.index.header .logo{background: url("../images/logo_w.svg") center left no-repeat; background-size: auto 44px;}
.en .index.header .logo{background: url("../images/logo_w_en.svg") center left no-repeat; background-size: auto 44px;}
#search_con{position: fixed; left: 0; top: 88px; z-index: 80; background: #fff; box-shadow: 0 5px 9px rgba(0,0,0,0.1); width: 100%; padding: 50px; display: none; border-top: 1px solid #eee; font-size:0}
.index #search_con{border:none;}
.index #search_con{background: rgba(0,0,0,0.2)}
.index #search_con input{border-color: #fff;}
#search_con input{padding: 12px 20px; border-radius: 60px 0 0 60px; height: 54px;vertical-align: top;}
#search_con .btn{box-shadow: none; position: relative; left: -1px; top:0 !important; height: 54px; display: inline-block;min-width: 66px; border-radius: 0 60px 60px 0;}
#search_con .btn:before{position: relative; top: -3px; left: -3px;}
.search_page .web_child_banner{height: 250px; background: -moz-linear-gradient(0deg, #3770c5, #3770c5); background: url("../images/faq/s_back.jpg") center no-repeat;}
.search_p_input{font-size: 0}
.search_p_input input{padding: 15px 20px; border-radius: 60px 0 0 60px; height: 58px;}
.search_p_input .btn{height: 58px;  display: inline-block;min-width: 66px; box-shadow: none; position: relative; top: 0!important; border-radius: 0 60px 60px 0;}
.search_p_input .btn:before{position: relative; top: 0; left: -3px;}
.search_p_con .flex>div{border-bottom: 1px solid #ccc; padding: 30px 0 0}
.search_p_con .flex>div:last-child{border: none;}
.search_p_con .flex h3{padding-bottom: 10px;}
.search_p_con .flex a:hover h3{color: #00a94d}
@media (max-width: 1382px) {
    .header .menu li dl{margin-top: 23px;}
    .header .menu li dd .a{border-top: 1px solid #ffffff90; padding: 12px 0; margin-left: 30px;}
    .header .menu li i{top: 33px!important;}
    .header .menu li.close i{transform: rotate(180deg); margin-top: -14px; opacity: 1}
    .header .menu li .a{width: 100%;}
    .header .menu li .a i{position: absolute; width: auto; height: auto; opacity: 1; color: #fff; font-size: 1.4rem}
    .header .menu li .a:before{display: none}
    .index.header .logo{background-size: auto 40px!important;}
    .header .menus{width: 90% !important; padding: 20px 0; position: relative}
    .header .menus .search{position: absolute; right: 46px; top: 30px;}
    .header .menu{order: 3}
    .header .menu ul{display: none}
    .header .menu li .a{padding:20px 0!important;color: #fff;}
    .header .menu li .a::before{}
    .menu_back,.menu_s_back{display: none!important;}
}
@media (max-width:1382px) {
    .header .menu li>strong,.header .menu li>a{color:#fff;}
    .header .s_menu .cs_w{width: 90% !important; padding: 10px 0}
    .menu{background: rgba(27, 28, 49, 0); transition: all .3s ease}
    .menu.close{background: rgba(27, 28, 49, 0.95);backdrop-filter: blur(8px); width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 99}
    .menu.close i{position: fixed; top: 20px; right: 20px; margin-top: 0}
    .menu>i{position: relative;top: 3px; cursor: pointer; height: 24px; width: 20px;border-top: 3px solid #00a94d; float: right; transition: all .3s ease}
    .menu.close i{width: 35px; height: 35px;}
    .menu.close i:hover{transform: rotate(90deg)}
    .menu>i:before{content: ""; width: 16px; height: 3px; background: #00a94d; display: block; position: absolute; left: 0; top: 4px; transition: all .3s ease; border-radius: 20px;}
    .menu>i:after{content: ""; width: 20px; height: 3px; background: #00a94d; display: block; position: absolute; left: 0; top: 11px; transition: all .3s ease; border-radius: 20px;}
    .menu.close i:before,.menu.close i:after{left: -3px;}
    .menu ul{display:none;position: fixed;top: 80px; width: 100vw; left: 0; z-index: 999; float: none}
    .menu ul li{width: 100%; padding:0 5%; height: auto; line-height: inherit; border-top: 1px solid rgba(256,256,256,0.4); text-align: left}
    .menu ul li:first-child{border:none;}
    .menu ul li>strong{width: 100%; line-height: 30px;line-height: 3rem; margin: 0!important;}
    .menu.close>i{border:none}
    .menu.close>i:before{transform: rotate(45deg); top: 15px; width: 40px;}
    .menu.close>i:after{transform: rotate(-45deg); top: 15px; width: 40px;}
    .menu .se_menu{background: none; padding:0 10%; left:0; position: relative; width:100%; opacity: 1; z-index: 99; height: auto; margin: 0; box-shadow: none; display: none}
    .menu .se_menu .a{color: #fff;text-align: right; position: relative; z-index: 999; pointer-events: auto; padding: 10px 0; border-color: rgba(256,256,256,0.4)}
    .menu .se_menu::before{display: none}
    .menu strong.a img{transform: rotate(180deg); opacity: 1}
    .s_menu .bt_search,.s_menu span.color8{display: none}
}
@media (max-width:750px) {
    .header .menus .search{top: 35px;}
    .index #search_con{background: rgba(0,0,0,0.8);}
    #search_con input,.search_p_input input{width: 100% !important; border-radius: 3px;}
    #search_con .btn,.search_p_input .btn{width: 100% !important; border-radius: 3px; display: inline-block; margin-top: 10px;}
    #search_con .btn:before,.search_p_input .btn:before{top: 6px; font-size: 18px; box-shadow: none}
}

/*banner*/
.web_banner{background: url("../images/index/banner_back_a.jpg") center no-repeat; background-size: cover; position: relative; z-index: 20;}
.web_banner .con{height: 100%;}
.web_banner .img{background: url("../images/index/banner_pic_0.png") left center no-repeat; height: 100%;animation: banner_pic .5s infinite ease;-webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;}
.cn .web_banner .img{background-size: 100% !important;}
/*.web_banner .img:hover{}*/
@keyframes banner_pic {
    0%{background-image: url("../images/index/banner_pic_0.png")}
    50%{background-image: url("../images/index/banner_pic_1.png")}
    100%{background-image: url("../images/index/banner_pic_2.png")}
}
.web_banner .font{animation: font 1s 1 cubic-bezier(.1, .49, .42, .99) forwards; position: relative; top: 200px; opacity: 0}
@keyframes font {
    0%{top: 100px; opacity: 0}
    100%{top: 0; opacity: 100}
}
@media (max-width:1890px ) {.web_banner .img,.web_banner .img:hover{background-size: 100% !important;}}
@media (max-width:1280px ) {.web_banner .img,.web_banner .img:hover{background-size: 100% !important;}}
@media (max-width:1024px ) {.web_banner .img,.web_banner .img:hover{background-size: 0}}
@media (max-width:990px ) {.web_banner .img{display: none}.web_banner .font{width: 100%!important;}
    .scroll_down{display: none}}
.web_banner .font a.btn{margin-top: 100px!important;}
.web_banner h1{font-size: 5.6rem; line-height: 8rem!important; padding: 15px 0; margin-bottom: 30px;}
.en .web_banner h1{line-height: 5.2rem!important;}
.web_banner .scroll_down{position: absolute; left: 60px; bottom: 20px; animation: sc_down 0.5s infinite  alternate cubic-bezier(.1, .49, .42, .99); opacity: 0.5}
.web_banner .scroll_down span{display: block; line-height: 1.8rem; color: #fff; font-size: 1.3rem;}
.en .web_banner .scroll_down span{transform: rotate(90deg); margin:0 0 26px 3px;}
@keyframes sc_down {
    0%{bottom: 20px;}
    100%{bottom: 30px;}
}
@media (max-width:990px ) {
    .index .banner_pic > div:first-child{background-position: left center!important;}
    .index .banner_pic > div:first-child .font{left: 0;}
    .web_banner .font a.btn.st{margin:20px 0 0 0!important;}
    .web_banner h1{padding-right: 0!important; font-size: 4.7rem}
}

/*footer*/
.footer{width:100%; position: relative; color: #555; padding: 80px 3%; z-index: 30; font-size: 1.5rem}
.footer_back{display:none; background:#010915; width: 100%; height: 50vh; z-index: 10; bottom: 0; left: 0}
.index .footer_back{display: block}
.footer>div>div{width: 80%;}
.footer ul{border-bottom:1px solid #2e2f39; margin-bottom: 20px;display: flex;flex-flow: wrap;justify-content: space-between;align-content: space-between;}
.footer a.pointer_e{color: #444}
.footer li{padding: 0 0 20px 0; display: inline-block;}
.footer p{border-bottom: 1px solid #2e2f39;padding-bottom: 20px;margin-bottom: 20px;}
.footer li a{color: #888}
.footer li a:hover{color: #fff}
.footer .logo img{opacity: 0.5; transition: all .5s ease; display: none}
.footer .logo:hover img{opacity: 1}
@media (max-width: 990px) {
    body .footer{text-align: left!important;}
    .footer li{width: 49%; text-align: left!important; padding-left: 0}
    .footer ul.cs_w{margin: 0 0 10px 0!important; width: 100% !important}
    .footer ul,.footer .center{text-align: left!important;}
}
/*suspension_right*/
.suspension_right{position: fixed; right: 15px; bottom: 80px; z-index: 30}
.suspension_right ul{text-align: right;flex-wrap: wrap-reverse;}
.suspension_right li{width: 38px; height: 38px; text-align: center; margin-top: 10px; cursor: pointer;}
.suspension_right li a{display: inline-block; width: 100%; height: 100%; line-height: 3.8rem; background: #ccc; border-radius: 90px; cursor: pointer; opacity: 0.5; color: #fff}
.suspension_right li a:hover{color: #fff; opacity: 1}
.suspension_right li.ac{width: 69px; height: 64px;}
.suspension_right li.wx .qr img{width: 125px;}
.suspension_right li.wx .qr{position: absolute; top: 250px; right: 60px; transition: all .3s ease; z-index: 1; opacity: 0; border-radius: 3px; border: 1px solid #ccc}
.suspension_right li.wx:hover .qr{top: -30px; opacity: 1;}
.suspension_right li.wx a:hover,.suspension_right li.top a:hover{background-color: rgba(0,169,77,1)}
/*.suspension_right li.ac a{background: url("../images/activities/icon_920.png") center no-repeat; border-radius: 0; position: relative; right: -10px; animation: su_ac 0.4s infinite }*/
/*@keyframes su_ac {*/
/*    0% {background: url("../images/activities/icon_920.png") center no-repeat;}*/
/*    35% {background: url("../images/activities/icon_920_02.png") center no-repeat;}*/
/*    75% {background: url("../images/activities/icon_920_03.png") center no-repeat;}*/
/*}*/
@media (max-width: 550px) {
    .suspension_right{display: none}
}

/*web main*/
.web_main>div{position: relative; transition: all 1s ease; margin: auto; z-index: 20;}
.web_main>div.animation{}
/*con_01*/
.con_01{background: url("../images/index/six_back.jpg") center no-repeat; background-size: cover; overflow: hidden;}
.con_01 .pic{position: relative; top: 18.5%; transform: rotate(50deg) scale(0.6); transition: all .3s ease;animation: six_pic_b 1s 1 forwards linear;}
.con_01.animation .pic{animation: six_pic 1s 1 forwards linear; transform: rotate(50deg) scale(0.6)}
.con_01 .s_font{background: rgba(255,255,255,0.35); display: inline-block; padding: 5px 20px; border-radius: 90px; position: absolute; right:5%;animation: six_s_font_b .3s 1 forwards linear;opacity: 0; bottom: 0;}
.con_01.animation .s_font{animation: six_s_font 1s 1 forwards linear;animation-delay:2s;}
.con_01 .s_font img{position: relative; top: -2px; z-index: 20}
.con_01 .s_font strong{color: #192a5e; line-height: 3rem; padding-left: 6px; font-size: 1.8rem; position: relative; z-index: 20}
.con_01 .s_font:before{content: ""; width: 0; height: 100%;opacity: 0; left: 50%; top: 0; position: absolute; z-index: 9; transition: all .5s ease; background: #fff; border-radius: 50px;}
.con_01 .s_font:hover:before{background: rgba(255,255,255,1); width: 100%; margin-left: -50%; opacity: 1;}
@keyframes six_pic_b {
    from{transform: rotate(0deg) scale(1); opacity: 1}
    to{transform: rotate(50deg) scale(0.6); opacity: 0}
}
@keyframes six_pic {
    from{transform: rotate(50deg)  scale(0.6); opacity: 0}
    to{transform: rotate(0deg)  scale(1); opacity: 1}
}
@keyframes six_s_font_b {
    from{opacity: 1; bottom: 70px}
    to{opacity: 0; bottom: 0}
}
@keyframes six_s_font {
    from{opacity: 0; bottom: 0}
    to{opacity: 1; bottom: 70px}
}
.six_lists{position: absolute; top: 100px; width: 100%;}
.six_lists h2{color: #222; font-size: 30px; font-size: 3rem; line-height: 36px; line-height: 3.6rem}
.six_lists .list{width: calc(50% - 150px);text-align: left; margin:0 0 85px 0; opacity: 0; position: relative;}
.six_lists .list:first-child>div{position: relative; left: 50%; margin-left: -60px;}
.six_lists .list:nth-child(2){left: -88px}
.six_lists .list:nth-child(3){left: 88px}
.six_lists .list:nth-child(4){left: 28px; top: 150px}
.six_lists .list:nth-child(5){left: -28px; top: 150px}

.animation .six_lists .list:nth-child(2n-1){animation: six_list_a .8s 1 forwards linear; animation-delay:1.2s;}
.animation .six_lists .list:nth-child(2n){animation: six_list .8s 1 forwards linear; animation-delay:1.2s;}

.six_lists .list.flex_r{padding: 0 46px 0 0; opacity: 0;animation: six_list_a_b .8s 1 forwards linear; right: -155px;}
.six_lists .list.flex_r .font{text-align: right; padding-right: 20px;}
.six_lists .list .font{text-align: left; padding-left: 20px; position: relative;transition: all .5s ease}
.six_lists .list .font h2{padding:23px 0 10px;}
.six_lists .list .font h4{font-weight: normal}
.six_lists .list .font_h{display: none;text-align: left; margin-top: -80px; z-index: 11;}
.six_lists .list .font_h span{position: absolute; width: 300px; display: inline-block; right: 22px; text-align: right}

.six_lists .six_icon{text-align: center;width: 120px; height: 120px; border-radius: 500px; box-shadow:0 9px 30px rgba(0,0,0,0.4); position: relative}
.six_lists .six_icon img{margin-top: 31px;}
.six_lists .six_icon:before{content: ""; width: 0; height: 0;position: absolute;opacity: 0; z-index: 20; left: 50%; bottom: 50%; display: inline-block; transition: all .5s ease}
.six_lists .six_icon.a{background: #28779b}
.six_lists .six_icon.b{background: #1a8d60}
.six_lists .six_icon.c{background: #113a63}
.six_lists .six_icon.d{background: #2e74bc}
.six_lists .six_icon.e{background: #25489f}
.six_lists .six_icon.f{background: #03767d}
.six_lists .list .six_icon img{position: relative; z-index: 30; opacity: 0.5; transition: all .3s ease}
.six_lists .list:hover img{opacity: 1;}
.six_lists .list:hover .six_icon:before{width: 120px; height: 120px;opacity: 1; margin:0 0 -60px -60px; border-radius: 500px; background: #3293bf;}
.six_lists .list:hover .six_icon.b:before{background: #20a772;}
.six_lists .list:hover .six_icon.c:before{background: #1b5690;}
.six_lists .list:hover .six_icon.d:before{background: #3484d7;}
.six_lists .list:hover .six_icon.e:before{background: #2c58c4;}
.six_lists .list:hover .six_icon.f:before{background: #048d95;}
.six_lists .list.flex_r:hover .font{padding-right: 15px;}
.six_lists .list:hover .font{padding-left: 15px;}
.six_lists .list .font h3{opacity: 0; position: relative; top: 0;transition: all .3s ease}
.six_lists .list .font h4{opacity: 1; position: relative; top: 0;transition: all .3s ease}
.six_lists .list:hover .font h4{top: -15px; opacity: 0}
.six_lists .list:hover .font h3{top: -25px; opacity: 1}
.en .six_lists .list:nth-child(5),.en .six_lists .list:nth-child(4){top:127px}
@keyframes six_list_b {
    from{padding: 0 0 0 100px;opacity: 1;}
    to{padding: 0 0 0 150px;opacity: 0;}
}
@keyframes six_list {
    from{padding: 0 150px 0 0;opacity: 0;}
    to{padding: 0 0 0 0;opacity: 1;}
}
@keyframes six_list_a_b {
    from{padding: 0 100px 0 0;opacity: 1;}
    to{padding: 0 150px 0 0;opacity: 0;}
}
@keyframes six_list_a {
    from{padding: 0 0 0 150px;opacity: 0;}
    to{padding: 0 0 0 0;opacity: 1;}
}
@media (max-width: 1280px) {
    .con_01{display: none}
}
@media (min-width: 990px){
    .index_web_cloud.animation .font > div, .con_02.animation .font > div{width: 50%}
}
/*con_02*/
.con_02{background: url("../images/index/con2_back.jpg") center no-repeat; background-size: cover;}
.en .con_02 h2{line-height: 6.5rem;}
.web_main>div .font{transition: all .3s ease; position: relative; top: 100px; opacity: 0; animation-delay: 5s}
.web_main>div.animation .font{animation: con02_font 1s 1 cubic-bezier(.1, .49, .42, .99) forwards; animation-delay:.3s; position: relative; top: 100px; opacity: 0}
.web_main>div .font h1{color: #fff; font-size: 4.2rem; line-height:6rem}
.con_02.animation .font h1 strong{color: #fff; font-weight: bold}
@keyframes con02_font {
    0%{top: 100px; opacity: 0}
    100%{top: 0; opacity: 100}
}
.en.index .icon-ture_around{width:80% !important;}
@media (max-width: 990px) {
    .en.index .icon-ture_around{width: 100% !important;}
}
/*con_03*/
.con_03{background: url("../images/index/con3_back.jpg") center no-repeat; background-size: cover; padding: 80px 0; position: relative; z-index: 30}
@media (min-width: 990px) {
    .con_03 h2{padding:0 0 0 100px;}
    .con_03 h2:first-child{padding:0 100px 0 0}
    .en .con_03 h2{padding:0!important;}
}
@media (max-width: 990px) {
    .con_03.vh{height: auto}
}
.con_03 h2 strong{color: #fff; font-weight: bold}
.con_03 .tit h2{transition: all .3s ease; position: relative; top: 100px; opacity: 0; animation-delay: 5s;}
.con_03.animation .tit h2{animation: con02_font 1s 1 cubic-bezier(.1, .49, .42, .99) forwards; animation-delay:1s; position: relative; top: 100px; opacity: 0}
.con_03.animation .tit h2:first-child{ animation-delay: .54s}
.con_03 .con{margin-top: 8%}
.con_03 .con img{width: 100%}
.con_03 .con>div{transition: all .3s ease; position: relative; top: 100px; opacity: 0; animation-delay: 5s}
.con_03.animation .con>div{animation: con02_font 1s 1 cubic-bezier(.1, .49, .42, .99) forwards; animation-delay:1s; position: relative; top: 100px; opacity: 0; border-radius: 20px; overflow: hidden;}
.con_03.animation .con>div:first-child+div{ animation-delay: 1.4s}
.con_03.animation .con>div:first-child+div+div{ animation-delay: 1.6s}
.con_03.animation .con h3{width: 100%; font-size: 2.2rem; background: #ffffff; padding: 25px 0; position: absolute; bottom: 0; text-align: center; transition: all .3s ease}
.con_03.animation .con>div:hover h3{padding: 35px 0;}

/*con_04*/
.con_04{background: url("../images/index/con4_back.jpg") center no-repeat; background-size: cover; top: 0; left: 0;}
.con_04 .cons{height:75%}
.con_04 .cons h2{padding-top: 80px;}
.con_04 .cons .font{padding-left: 61%}
.con_04 .b_font{background: linear-gradient(0deg,#00a94d 20%,rgba(0, 169, 77, 0)); height: 25%; width: 100%}
.con_04 .b_font h3{color: #fff; width: 33.333%; text-align: center; vertical-align: middle; padding-top: 90px;transition: all .3s ease; position: relative; top: 100px; opacity: 0;}
.con_04 .b_font h3 strong{color: #fff; font-weight: bold; font-size: 30px;font-size: 3rem; padding-right: 5px;}
.con_04.animation .b_font h3{animation: con02_font 1s forwards; animation-delay:1.2s; top: 100px; position: relative; opacity: 0}
.con_04 .b_font h3:first-child+h3{ animation-delay: 1.4s}
.con_04 .b_font h3:first-child+h3+h3{ animation-delay: 1.6s}

/*partners*/
.ind_partners{background: url("../images/index/partner_back.jpg") center no-repeat; background-size: cover;}
.ind_partners h3{font-weight: normal;}
@media (max-width: 990px) {
    .ind_partners h3{width: 100% !important}
}

/*blog*/
.index_blog{background: #fff; position: relative;z-index: 30}
.index_blog img{width: 100%}
.index_blog .con{display: block; padding: 30px; position: relative}
.index_blog .table{height: 100%}
.index_blog .table .blog_con>a{display:inline-block; top: 0!important; background: #fff; padding-bottom: 30px; height: 100%}
.index_blog h2{color: #222}
.index_blog .table h3,.index_blog .flex em,.index_blog .flex span{padding: 0 30px}
.index_blog .table h3{padding-top: 30px; text-align: left; font-size: 22px;}
.index_blog .table em{padding: 20px 30px; margin-bottom: 30px; min-height:140px; text-align: left;}
.index_blog .table span{position: absolute; bottom: 30px; width: 100%; padding:0 30px;}
.index_blog .table label:hover{color: #00a94d; cursor: pointer;}
.index_blog .cons>div{transition: all .3s ease; position: relative; top: 100px; opacity: 0;}
.index_blog.animation .cons>div{animation: con02_font 1s forwards; border-radius: 20px; overflow: hidden; animation-delay:.3s; top: 100px; position: relative; opacity: 0}
.index_blog.animation .cons>div:first-child+div{ animation-delay: 1s}
.index_blog.animation .cons>div:first-child+div+div{ animation-delay: 1.2s}
.index_blog.animation .cons>div:first-child+div+div+div{ animation-delay: 1.4s}
.blog_font .btn{margin-top: 100px}
.index_blog .blog_con{width: 22%}
.index_blog .blog_font{margin-top: -40px}
@media (max-width: 990px) {
    .index_blog.vh{height: auto; padding: 100px 0}
}
@media (max-width:720px) {
    .index_blog .flex>a{width: 100%!important; margin-top: 35px;}
    .index_blog .flex>a:first-child{margin-top: 0}
    .index_blog h2{padding-bottom: 30px;}
    .index_blog h2::after{top: 40px; left: 50%; margin-left: -70px}
}

/*sectigo_cersign中级根*/
.sectigo_cersign{background:#000 url("../images/activities/sectigo_cersign.jpg") center no-repeat; background-size: cover; height: 554px; position: relative;z-index: 20}
.sectigo_cersign h2{padding: 30px 98px 30px 30px; background: #00a94d; color: #fff; position: relative; margin-top: -50px; font-size: 32px; border-radius: 60px 0 0 60px;}
.sectigo_cersign h2 img{position: absolute; left: 0; bottom: -100px; border-radius: 60px;}
@media (min-width:990px) {
    .sectigo_cersign h2{width: 40%;}
}
.sectigo{background:#000 url("../images/solution/sectigo_banner.jpg") center no-repeat; background-size: cover}
@media (max-width:1420px) {
    .sectigo_cersign h1{padding: 30px;}
    .sectigo_cersign{background:#000 url("../images/activities/sectigo_cersign.jpg") -216px bottom no-repeat; background-size: cover;}
    .sectigo_cersign .cell{vertical-align: top!important;}
}
@media (max-width:1200px) {
    .sectigo_cersign{background:#b5a895 url("../images/activities/sectigo_cersign_p.jpg") center bottom no-repeat; background-size: cover; height: 900px}
}
@media (max-width:840px) {
    .sectigo_cersign{background:#b5a895 url("../images/activities/sectigo_cersign_p.jpg") center bottom no-repeat; background-size: 100%; height: 700px}
}
@media (max-width:990px) {
    .sectigo_cersign h2{padding: 30px;}
    .sectigo .cell{display: inline-block; width: 100%!important; padding: 30px 10%}
}
@media (max-width:550px) {
    .sectigo .cell.font img{width: 100%;}
    .sectigo_cersign{background:#b5a895 url("../images/activities/sectigo_cersign_p.jpg") center bottom no-repeat; background-size: 100%; height: 500px}
}

.index_browser{background:#000 url("../images/browser/banner.jpg") center no-repeat; background-size: cover; position: relative;z-index: 20}
.index_browser .icon_list{position: relative;}
.index_browser .icon_list>div{cursor: pointer;}
.index_browser .icon_list>div img{height: 52px; border-radius: 90px; opacity: 0.4; transition: all .3s ease; display: none}
.index_browser .icon_list>div img:hover{padding: 3px; opacity: 1;}
.index_browser .icon_list>div img.hover{display: block}
.index_browser .icon_list .fonts{position: absolute; text-align: center;pointer-events: none; top: 65px;width: 100%; padding: 5px 10px!important; background: #ffffff20; opacity: 0; left: 0; transition: all .3s ease;border-radius: 90px;}
.index_browser .icon_list>div:hover .fonts{top:80px; opacity: 1;}
.index_browser .icon_list>div:hover img{display: none}
.index_browser .icon_list>div:hover img.hover{display: block}
@media (max-width: 990px) {
    .index_browser{padding: 100px 0; height: auto}
    .index_browser .cell{width: 100%!important; display: block; z-index: 1; position: relative}
    .index_browser .cell img{max-width: 100%; margin-bottom: 50px;}
    .index_browser .icon_list>div img{display: none}
    .index_browser .icon_list .fonts{top: 0; position: relative; opacity: 1; text-align: left; background: none;margin:0!important;padding:0 0 0 26px!important;}
    .index_browser .icon_list .fonts:before{content: "\e90d";font-family: 'icomoon' ,Arial,Microsoft YaHei,Georgia,Times New Roman,Times,serif !important; color: #00a94d; position: absolute; left: 0}
    .index_browser .btn_b{margin-bottom: 20px; width: 100%; display: none!important;}
    .index_browser .icon_list > div{margin-top: 15px!important;}
}

.index_web_cloud{background:#000 url("../images/index/index_web_cloud_back.jpg") center no-repeat; background-size: cover; position: relative;z-index: 20}

.en .index_web_cloud{background:#000 url("../images/index/index_web_cloud_back_en.jpg") center no-repeat;}
.en .index_web_cloud{background:#000 url("../images/index/index_web_cloud_back_en.jpg") center no-repeat;}
.en .sectigo_cersign{background:#000 url("../images/activities/sectigo_cersign_en.jpg") center no-repeat; background-size: cover; height: 554px; position: relative;z-index: 20}
@media (max-width:1200px) {
    .en .sectigo_cersign{background:#b5a895 url("../images/activities/sectigo_cersign_p_en.jpg") center bottom no-repeat;background-size: 100%;}
}

/*shopping_cart*/
.shop_cart,.shop_cart .back{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -99; transition: all .5s ease}
.shop_cart.z_index{z-index: 9999}
.shop_cart .back{backdrop-filter: blur(0px);background-color: rgba(27, 28, 49, 0);}
.shop_cart.z_index .back{background: rgba(27, 28, 49, 0.8);backdrop-filter: blur(8px); }
.shop_cart .con{width: 560px; height: 100%; overflow-y: auto; position: fixed; right: -550px; top: 0; background: #f9f9f9; z-index: 99999; transition: all .7s ease;}
.shop_cart .con.right_s{right: 0;}
.shop_cart .m_tit{display: flex; padding:20px 25px; position: relative; background: #00a94d url("../images/buy/shop_cart_tit_back.jpg") top left no-repeat;}
.shop_cart .m_tit .logo{height: 50px; padding-right: 20px; align-self: center}
.shop_cart .m_tit .close{align-self: center; padding: 10px; cursor: pointer; transition: all .2s ease; position: absolute; right: 20px}
.shop_cart .m_tit .close:hover{transform: rotate(90deg);}
.shop_cart .m_tit h2{color: #fff; align-self: center;}
.shop_cart .m_tit h2 span{color: #fff; font-size: 15px; line-height: 15px; padding-bottom: 4px; font-weight: normal; vertical-align: middle; display: block}
.shop_cart .m_tit br{line-height: 0}
.shop_cart .s_c_con{padding: 30px 30px 120px 30px;}
.shop_cart_no_s{overflow:Scroll; overflow-y:hidden}
.shop_cart .s_info{padding-bottom:20px;}
.shop_cart .s_info label{padding-bottom: 3px; display: inline-block; font-size: 16px;}
.shop_cart .s_info label.checkbox span{color: #222}
.shop_cart .s_info .www{background:#fff url(../images/www.svg) 10px center no-repeat; background-size: 20px; padding-left: 40px;}
.shop_cart .s_info .quantity{width: 35%}
.shop_cart .s_info .tip{display: inline-block}

@media (max-width: 550px) {
    .shop_cart .m_tit h2 i{display: block}
    .shop_cart,.shop_cart .back,.shop_cart .con{width: 100vw;}
    .shop_cart .s_info .w_25,.shop_cart .s_info .w_70{width: 100% !important; text-align: left!important; padding-top: 10px}
    .shop_cart .s_info .w_70.align_s_m{width: 70% !important; text-align: right!important; padding-top: 0}
}
/*购买 iframe add*/
iframe.buyIframe {width: 100%;border: 0; height: 100%; position: relative;}
div.buyIframe-load .centered {top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
div.buyIframe-load .centered, .pin-lm { position: absolute; left: 50%;}

/*弹窗*/
@media (max-width: 550px) {
    .layui-layer-dialog {width: 80vw !important;;left: 10vw !important;}
}

.en #nb_icon_wrap{display: none!important;}
#nb_icon_wrap{right:15px!important; bottom: 32px!important;}
.embed-icon .embed-icon-default{background:rgba(0,169,77,0.5) url("../images/suspension_right_02.svg") center no-repeat!important; border-radius: 60px!important;width: 38px !important;height: 38px !important;background-position: center center !important;position: relative !important;top: -30px; right:12px;float: right;}
#newBridge .nb-icon-skin-0 .nb-icon-inner-wrap .nb-icon-bridge-base{background: none!important;}
#newBridge #nb_icon_wrap .nb-icon-inner-wrap:hover{background-color: rgba(0,169,77,1) !important}
.pager { display: inline-block; font: 12px/21px "宋体"; margin-top: 10px; margin-bottom:10px; }
.pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; margin-left:2px;margin-right:2px; }
.pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }
.pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }
.pager .noPage { color: #a4a4a4; }
.pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }
.pager .flip { width: 56px; }
.pager i{margin-right:20px;}

/*10-26*/
.ct{background: url("../images/index/ct-back.jpg") center no-repeat; background-size: cover}
.ct h2{font-size: 4.2rem;}
.ct .cell{position: relative;}
.ct .ct_line{background: url("../images/index/ct-line.svg") center no-repeat; opacity: 0; width: 1254px; height: 436px; position: absolute; top: 45%; left: 50%; margin: -218px 0 0 -627px;}
.ct .ct_line .a,.ct .ct_line .b,.ct .ct_line .c,.ct .ct_line .d{position: absolute; opacity: 0; font-size: 2.4rem; filter: drop-shadow(0 3px 15px rgba(0,0,0,0.2));}
.ct .ct_line .a{top: -30px; left: 50px;}
.ct .ct_line .b{top: -30px; right: 50px;}
.ct .ct_line .c{bottom: -65px; left: 50px;}
.ct .ct_line .d{bottom: -65px; right: 50px;}
.ct .ct_line>div img{padding: 0 50px; margin-bottom: 15px;}
.ct .ct_earth{background: url("../images/index/ct-earth.png") center no-repeat; height: 644px; width: 644px; position: absolute; top: 45%; left: 50%; margin: -322px 0 0 -322px;}
.ct .ct_earth p{color: #adbacb;}
.ct a.btn{margin:0 10px 130px 10px;}
.ct.animation .ct_earth{animation: earth .8s 1 forwards linear; opacity: 0}
@media (max-width: 1380px) {
    .en.index .ct h2{width: 82%; margin: auto;}
}
@media (max-width: 750px) {
    .ct a.btn {margin:0 0 20px 0;}
    .ct a.btn:nth-child(3) {margin-bottom:70px;}
    .en.index .ct h2{width: 90vw;}
}
@keyframes earth {
    0%{opacity: 0; transform: rotate(300deg) scale(0.8);}
    100%{opacity: 1; transform: rotate(360deg) scale(1);}
}
.ct.animation .ct_line{animation: line .8s 1 forwards linear; animation-delay:.8s;}
.ct.animation .ct_line .a,.ct.animation .ct_line .c{animation: line1 .8s 1 forwards linear;}
.ct.animation .ct_line .b,.ct.animation .ct_line .d{animation: line2 .8s 1 forwards linear;}
.ct.animation .ct_line .a{animation-delay:1.8s;}
.ct.animation .ct_line .b{animation-delay:2.2s;}
.ct.animation .ct_line .c{animation-delay:2.6s;}
.ct.animation .ct_line .d{animation-delay:3s;}

@keyframes line {
    0%{opacity: 0; transform: scale(0.8);}
    100%{opacity: 1; transform: scale(1);}
}
@keyframes line1 {
    0%{left: 150px; opacity: 0}
    100%{left: 50px; opacity: 1}
}
@keyframes line2 {
    0%{right: 150px; opacity: 0}
    100%{right: 50px; opacity: 1}
}

/*10-26*/
.sm2_ct .web_child_banner{background: url("../images/ct/ct_back.jpg") center center no-repeat}

/*acme*/
.index_acme{background:#000 url("../images/index/acme_back.jpg") center no-repeat; background-size: cover; position: relative;z-index: 20}
.index_acme .img{position: relative;}
.index_acme .img .tit{background: url("../images/index/acme_tit_back.png") center no-repeat; width: 612px; height: 321px; padding-top: 100px; position: absolute; z-index: 9; left: 50%; margin-left: -306px; top: 280px; transition: all .3s ease; margin-top: 0}
.index_acme .img .tit:hover{margin-top: -15px;}
.index_acme .img .tit h2{font-size: 3.4rem; font-weight: bold;}
.index_acme .img .tit h3{font-size: 2.6rem; color: #fff; margin-top: -12px;}
.index_acme .img .list{position: absolute; top: 0; width: 100%; text-align: center;}
.index_acme .img .list h4{color: #fff; font-size: 1.6rem;}
.index_acme .img .list ul{padding: 17px 0; margin: auto;}
.index_acme .img .list ul:first-child li{min-width: 240px;border-bottom: 3px solid #5ff5a3;}
.index_acme .img .list ul:nth-child(2){width: 760px;}
.index_acme .img .list ul:nth-child(2) li:first-child{border-right: 3px solid #6464c8;}
.index_acme .img .list ul:nth-child(2) li:first-child+li{border-left: 3px solid #43ba57;}
.index_acme .img .list ul:nth-child(3){width: 1200px;}
.index_acme .img .list ul:nth-child(3) li:first-child{border-right: 3px solid #2752e0;}
.index_acme .img .list ul:nth-child(3) li:first-child+li{border-left: 3px solid #10dbdd;}
.index_acme .img .list ul:last-child{background: linear-gradient(0deg, #1d4063,#182f46); display: inline-block; padding: 15px 10px; border-radius: 28px;  border: 2px solid #4a75a1;  border-top: 3px solid #2e86ff; position: relative}
.index_acme .img .list ul:last-child:after{
    content:""; display:block; border-radius: 30px; width:100%; height:100%; background:  repeating-linear-gradient(120deg ,transparent,transparent 4px, rgba(27, 86, 144, 0.6) 4px, rgba(27, 86, 144, 0.6) 6px);
    /*background-size: 9px 5px;*/
    animation: shine 30s infinite linear; position: absolute; left: 0; top: 0;animation-direction: alternate;
}
.index_acme .img .list ul:nth-child(4) li:nth-child(2) img{padding: 16px; width: 134px;}
@keyframes shine {0% {} 100% { background-position: 350px 0;} }
.index_acme .img .list ul:last-child h4{margin: -15px 0 20px;}
.index_acme .img .list ul:last-child li{padding: 3px 20px; min-width: 250px; margin: 0 5px;}
.index_acme .img .list ul li{display: inline-block; box-shadow: 0 0 20px rgba(0,0,0,0.3); min-width: 200px; padding: 25px 20px 22px; background: #1b3b5f50; border-radius: 18px; border: 2px solid #4a75a1; position: relative; z-index: 99;}
.index_acme .img .list ul li:after{content: ""; display: inline-block; width: calc(100% - 24px); height: calc(100% - 24px); background: linear-gradient(0deg,#fff,#919fae); position: absolute; top: 12px; left: 12px; border-radius: 9px; z-index: -9}
.index_acme .img .list ul li h4{color: #222; margin-top: 5px;}
@media (max-width:750px) {
    .index_acme .img .tit{top: 50%; margin-top: -190px;}
    .en .index_acme .img .tit{top: 50%; margin-top: -200px;}
    .index_acme{min-height: auto; height: 500px;}
    .index_acme .img .list{display: none}
    .index_acme .img img{position: absolute; left: 50%; top:50%; margin:-180px 0 0 -450px; z-index: 0; width: 900px}
    .index_acme .img .tit h3{margin-top: 8px;}
    .index_acme .img .tit h3{margin-top: 8px;}
    .en .index_acme .img .tit h3{margin-top: -8px;}
}
.index_acme .tit{opacity: 0}
.index_acme .tit span{display: inline-block; color: #5c8dd2; margin-top: 55px}
.index_acme.animation .tit{animation: ac_tit .8s 1 forwards linear;  opacity: 0}
@keyframes ac_tit {
    0%{opacity: 0; top: 350px;}
    100%{opacity: 1; top: 300px;}
}
.index_acme .img .list ul li{opacity: 0}
.index_acme.animation .img .list ul li{animation: ac_list .8s 1 forwards linear; animation-delay:1s; opacity: 0}
.index_acme .img .list ul:nth-child(2) li{animation-delay:1.5s;}
.index_acme .img .list ul:nth-child(3) li{animation-delay:2s;}
.index_acme .img .list ul:nth-child(4) li{animation-delay:2.5s;}
.index_acme .img .list ul:nth-child(4) li:first-child{animation-delay:3s;}
.index_acme .img .list ul:nth-child(4) li:first-child+li{animation-delay:3.5s;}
.index_acme .img .list ul:nth-child(4) li:first-child+li+li{animation-delay:4s;}
@keyframes ac_list {
    0%{opacity: 0; top: -20px;}
    100%{opacity: 1; top: 0;}
}

/*7.13 banner*/
.web_banner{width: 100%; overflow: hidden;}
.index .banner_pic{height: 100%; width: 200%; overflow: hidden; position: absolute; left: 0; transition: all 3s ease;}
.index .banner_pic>div{height: 100%; width: 50%; display: inline-block; overflow: hidden; float: left}
.index .banner_sw{background: url("../images/index/banner_back_bb.jpg") -9999px -99999px no-repeat;}
.index .banner_pic>div:first-child{background: url("../images/index/banner_back_a.jpg") center no-repeat; background-size: cover; animation: banner_a .8s infinite ease; animation-delay: 10s}
@keyframes banner_a {
    0%{background-image: url("../images/index/banner_back_a.jpg");}
    100%{background-image: url("../images/index/banner_back_b.jpg");}
}
.index .banner_pic>div:first-child+div{background: url("../images/index/banner_back.jpg") center no-repeat; background-size: cover;}
.index .banner_pic .font{position: relative; z-index: 9;}
@media (min-width:750px){
    .en.index .banner_pic>div:first-child .font>div{width: 60% !important}
    .cn.index .banner_pic>div:first-child .font{width: 80% !important;}
}
.index .banner_pic .video{position: absolute; left: 0; top: 0; width: 50%; overflow: hidden;height: 100%;background: #0d131b; display: none}
.index .banner_pic .video img{position: absolute; height: 100%;}
.index .banner_pic .video video{object-position: right top; position: static;width: 100% !important;}
.index .banner_pic>div:first-child h1{line-height: 6.4rem!important;}
.index .banner_pic>div h3{font-weight: normal;}

.banner_sw{position: absolute; left: 50%; bottom: 20px; margin-left: -100px; z-index: 29; font-size: 0}
.banner_sw ul{font-size: 0}
.banner_sw li{cursor: pointer; width: 80px; height: 5px; background: #ffffff30; display: inline-block; margin: 0 10px; border-radius: 20px; transition: all .3s ease;}
.banner_sw li:hover{height:10px;background: #ffffff!important}
.banner_sw li.cur{background: #ffffff80}