<style type="text/css">
        *{box-sizing: border-box;box-sizing: -webkit-border-box;}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td{color: #666}
	.main{padding: 0; margin: 0; overflow: hidden; font-size: 14px; color: #333; line-height: 22px; background: #f7f6ff}	
	.main a{text-decoration: none; color: #f28158;}
		.main a:hover{text-decoration: underline;}
	.fontw{font-weight:bold;}
	ul,li{padding: 0;margin: 0;list-style: none;}
	.con-back{width: 100%; clear: both;}
	i{font-style: normal;}
        .l{float: left}
        .r{float: right}
        .c{margin: auto}
        
        h3.title{width: 390px; position: relative;padding: 20px 0; color: #fff; font-size: 26px; padding-left: 153px;box-sizing: border-box; background: linear-gradient(90deg,#531ea7,#8f68ff); border-radius: 120px; right: -5px; margin:20px auto 65px auto;}
        h3.title span{display: inline-block;position: absolute; top: 0; left: -5px; padding: 20px 30px;background: linear-gradient(90deg,#8801fe,#c14cff);border-radius: 120px; text-align: center}
      .bgca{background: #ffffff}  
/* ----------banner---------- */ 
	.theme_banner{
		background:url(banner-3.jpg) no-repeat top center #6454FF;
		width: 100%;
		 height:535px; 
		 position: relative; 
		 overflow: hidden;
		 }
	.theme_banner_pic{width:1200px; height: 535px; margin: auto;display: table}
    .theme_banner_pic>a{display: none}
    .banner-pic{background:url(pic_01.png) no-repeat center 150px; text-align: center; vertical-align: middle;width: 50%; display: table-cell; position: relative; animation: zs02 1s linear ;}
.banner-pic img{animation: zs01 3s linear infinite; position: relative; top: -40px}
.banner-con{width: 50%;display: table-cell; vertical-align: middle;animation: zs03 1s linear ; position: relative; top: -4px}	
@media screen and (min-width: 900px) {
@keyframes zs01{
			0%{top:-40px;}
			25%{top:-30px;}
            50%{top:-20px;}
			75%{top:-30px;}
            100%{top:-40px;}
		}
@keyframes zs02{
    from{opacity: 0; top: -100px}
	to{opacity: 1; top: 0}
}
    
@keyframes zs03{
    from{opacity: 0; top: -100px}
	to{opacity: 1; top: -3px}
}
}
.banner-con h1{font-size: 48px;display: inline-block; color: #fff; font-weight: bold; padding-bottom:20px;margin-top:81px;line-height: 48px;letter-spacing: 2px;}
.banner-con .video-btn{
	display:inline-block;
	box-sizing: border-box;
    cursor: pointer;
    -webkit-font-smoothing: auto;
    transition: all .3s ease-in-out;
    background-image: linear-gradient(0deg,#fff,#f3f5f8);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 10%);
    border-radius: 38px;
    padding: 3px 10px;
    vertical-align: text-bottom;
    color: #49ba83;
    font-size:16px;
    line-height: 24px;
    margin-left: 10px;
}
.banner-con .video-btn i{
	vertical-align: middle;
	margin-right:6px;
}
.theme_banner .video-area{
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,.5);
    display: none;
}

.theme_banner .video-area .video-wrap{
	position: fixed;
    width: 960px;
    height: 540px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: all .3s ease-in;
}
.theme_banner .video-area .video-wrap video{
	width: 100%;
    height: 100%;
    border: none;
}
.theme_banner .video-area .video-wrap:before{
	position: absolute;
    right: 0;
    top: -50px;
    content: "";
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url(https://www.wosign.com/images/wosign_new/ad_close.png);
    background-size: 100% 100%;
}


.banner-con p{font-size: 26px;display: inline-block; color: #fff; padding: 20px 0; border-top: 1px solid #796df2;line-height: normal; font-weight: bold}
.banner-con li{background: url(true.png) left center no-repeat; padding-left: 30px; display: inline-block; float: left; color: #fff; margin-right: 21px; font-size: 16px;}
.bt a{display: inline-block; padding: 8px 20px; margin: auto; margin:45px 10px 0 0; color: #ff895f; float: left;font-size: 17px; font-weight: bold; text-align: center; border-radius: 90px; transition:all .3s ease; border: 2px solid #ff7654; position: relative; top: 0;}
.bt a.bt_a{ background: #ff7654; color: #fff;padding: 8px 47px}
.bt a:hover{background: #ff7654; text-decoration: none; color: #fff; border-color: #ff7654; top: -5px;}

.theme_banner span{display: none;}
@media screen and (max-width: 900px) {
    .theme_banner{background: url(back_banner.jpg); height: 816px;}
    .theme_banner_pic{height: 800px; width: 100%; display: flex; flex-direction: column;}
    .banner-pic{order: 0;display: block; height: 360px; background-position: center 50px;background-size: 300px;}
    
    .banner-pic img{width: 90%; top: 60px!important}
    .banner-pic,.banner-con{text-align: center; width: 100%; padding: 0;top:80px;}
    .banner-con{display: block; order: 1; width: 88%; margin: auto; position: relative;top: 10px;}
    .banner-con ul{display: inline-block}
    .banner-con .bt{text-align: center}
    .banner-con .bt a{float: none;display: inline-block; margin-left: 10px;}
    .banner-con li{margin: 0 21px 10px 21px;}
    .banner-con .video-btn{
    	margin-bottom:4px;
    }
}
@media screen and (max-width: 550px) {
    .banner-con p{font-size: 20px;}
    .banner-con .bt{width: 80%; margin:20px auto 0 auto}
    .banner-con .bt a{width: 100%; margin: 0 0 10px;box-sizing: border-box}
}
	
/* ----------产品---------- */  
        .con-back{width: 1200px; height: auto; margin:60px auto;}
        .con-hd01 li{width: 520px; height: auto;  display: inline-block; padding: 60px 40px; border:1px solid #d5cfd6; border-radius: 9px; background: #f9f9f9; background: linear-gradient(0deg,#f9f9f9,#e9e8ff); text-align: center; font-size: 20px;box-sizing: border-box;-webkit-box-sizing: border-box; transition: all .3s ease;position: relative; top: 0;}
.con-hd01 li:hover{top: -10px; box-shadow: 0 5px 12px rgb(83, 75, 192,0.1)}
        .con-hd01 li.b{background: linear-gradient(0deg,#f9f9f9,#fccece)}
        .con-hd01 li h1{font-size: 24px; padding-bottom: 20px; margin-bottom: 30px; position: relative; line-height: 25px;color: #333}
        .con-hd01 li h1 label{font-size: 16px;position: relative;top: 5px;}
        .con-hd01 li h1 img{ position: relative; top:2px; left: 12px;}
        .con-hd01 li h1 span{ height: 3px; width: 50px; background: #fd6e49; display: block; position: absolute; bottom: 0; left: 50%; margin-left: -25px;border-radius: 20px;}
        .con-hd01 li.b h1{ width: 100%;}
        .con-hd01 li p,.con-hd01 h1{display: inline-block; width: 100%;}
.con-hd01 .hd_table{display: table; width: 100%;}
.con-hd01 .hd_table.mt30{display: table; width: 100%; margin-top: 30px;}
.con-hd01 p.line{height: 1px; background: #ddd; display: inline-block; margin: 6px 0;}
        .con-hd01 li p.one{font-size: 14px; color: #666;}
.con-hd01 li p.two,.con-hd01 li p.three{display: table-cell; vertical-align: middle}
        .con-hd01 li p.two{color: #999;font-size: 14px;width: 35%;text-align: left}
.con-hd01 li p.two span{ text-decoration: line-through;}
        .con-hd01 li p.three{ width: 65%; text-align: right;font-size: 14px; letter-spacing: 1px; color: #666; font-weight: normal}
        .con-hd01 li p.three b{ color: #fd6e49; font-weight: bold;font-size: 36px; line-height: 36px; font-weight: normal; padding-right: 5px;}
.con-hd01 li p.three span{position: relative; top: -6px;}
.con-hd01 li p.four{width: 100%;text-align: center;padding-bottom: 1px;}
.con-hd01 li p.three b.one{font-size: 26px;font-weight: bold; letter-spacing: 2px;}
        .con-hd01 li a.bt{display: inline-block; width: 230px; padding: 12px 0;text-decoration: none; font-weight: bold;font-size: 17px;margin: auto; background: #fd6e49; transition:all .3s ease; color: #fff; border-radius: 90px; margin-top: 40px;}
        .con-hd01 li a.bt:hover{ width: 250px;}
        
        .con-hd011 li{width: 31%;background: linear-gradient(0deg,#fff,#f5fcff)}
        .con-hd011 li.b{background: linear-gradient(0deg,#fff,#fff3eb)}
        .con-hd011 li.c{background: linear-gradient(0deg,#fff,#ffebeb)}
        .con-hd011 li.b{margin: 0 3.5%;}
        
/* ----------其它产品---------- */ 
        .con-hd02{margin-top: 20px; position: relative; color: #666; text-align: center}
.con-hd02>a{font-size: 17px; padding: 12px 60px; display: inline-block; border: 2px solid #fd6e49; border-radius: 50px; font-weight: bold; transition: all .3s ease}
.con-hd02>a:hover{background: #fd6e49; color: #fff; text-decoration: none}
.con-hd02>p{padding:10px 0 10px 0}
        
/* ----------jiesho---------- */ 
        
        h2.tit{font-size:30px; padding-bottom: 60px; line-height: 36px; color: #534bc0; width: 100%; text-align: center}
        h2.tit span.t_l,h2.tit span.t_r{display: inline-block; width: 80px; height: 2px; background: #534bc0; border-radius: 5px; vertical-align: middle;position: relative;left: -20px;}
        h2.tit span.t_l:after,h2.tit span.t_r:before{content: ""; display: block; width: 7px; height: 6px; background:#534bc0;  right: 0; top: -2px; border-radius:50px; position: absolute}
        h2.tit span.t_r{left: 20px;}
        h2.tit span.t_r:before{left: 0; top: -2px;}
        h2.tit p{font-size: 14px; color: #666}
@media screen and (max-width: 900px) {
    h2.tit span.t_l,h2.tit span.t_r{display: none}
}

/*使用HTTPS加密的好处*/
.con-hd03 .hd_table{display: table}
        .con-hd03 ul{text-align: center; display: table-row;font-size: 0}
        .con-hd03 li{display: table-cell; width: 33.33333%; font-size: 14px;vertical-align: middle; padding-bottom: 30px;}  
        .con-hd03 dl{margin:0 13px 0;border: 1px solid #ddd; padding: 30px; border-radius: 9px;height:100%; background: linear-gradient(#fff,#f9f8ff); position: relative;overflow: hidden; transition: all .3s ease; top:0} 
.con-hd03 ul:first-child li:nth-child(2) dl,.con-hd03 ul:nth-child(2) li:nth-child(2n-1) dl,.con-hd03 ul:nth-child(3) li:nth-child(2) dl{background: linear-gradient(#f9f8ff,#fff);}
.con-hd03 li:first-child dl{margin:0 26px 0 0}
.con-hd03 li:nth-child(3n+1) dl{margin:0 26px 0 0}
.con-hd03 li:nth-child(3n) dl{margin:0 0 0 26px }
.con-hd03 dt{padding-bottom: 20px;}
.con-hd03 dd b{color: #333; font-size: 16px; margin-bottom: 10px;display: inline-block;}
.con-hd03 dd a{position: absolute; top: 10px; right: 10px; display: block; background: url(arrow_a.png) center no-repeat; height: 26px; width: 26px; background-size: 18px;opacity: 0.5}
.con-hd03 dl:hover a{background: url(arrow.png) center no-repeat; background-size: 18px;opacity:1}
.con-hd03 dl:hover{top: -5px;}
.con-hd03 dd a img{width: 16px;}
@media screen and (max-width: 900px) {
    .con-hd03 li{display:block; width:100%;}
    .con-hd03 li dl{ margin-left: 0!important; margin-right: 0!important}
}

/*为什么选择沃通*/
.con-hd04 dl{border: none; padding: 15px; background: none!important}
.con-hd04_a li{width: 25%}
@media screen and (max-width: 900px) {
    .con-hd04_a li{width: 100%}
}

/*申请流程  沃通SSL证书优势*/
.con_lc{float: left; width: 100%;}
.con_lc dl{width: 100%; float: left;}
.con_lc dt{width: 18%; float:left; text-indent: 45%;}
.con_lc dt p{padding: 20px 0; font-size: 16px; font-weight: bold; color: #333; border-radius: 6px; border:1px solid #ddd; }
.con_lc dt p{background:#fff url(d_01.png) 30px center no-repeat;}
.con_lc dt:first-child+dd+dt p{background-image: url(d_02.png);}
.con_lc dt:first-child+dd+dt+dd+dt p{background-image: url(d_03.png);}
.con_lc dt:first-child+dd+dt+dd+dt+dd+dt p{background-image: url(d_04.png);}
.con_lc dt:first-child+dd+dt+dd+dt+dd+dt+dd+dt p{background-image: url(d_05.png);}
.con_lc dd{width: 2.5%; float:left; color: #fd6e49; padding:20px 0;text-align: center;}
.con_lc dd:before{content: "▸"; font-size: 26px;}
@media screen and (max-width: 900px) {
    .con_lc dd,.con_lc dt{width:100%;}
    .con_lc dd:before{content: "▾"}
    .con_lc dt p{background-position:82px center; }
    .con_lc dt{text-indent:135px;}
}

/*关于沃通*/
.con_06{padding: 20px 0; background:#1a1457 url(back.jpg) top center no-repeat;}
.con_06 .tit{color: #fff;}
.con_06 .tit span,.con_06 .tit span:before,.con_06 .tit span:after{background: #fff!important;}
.con_06 p{color: #9591c3;}



/* ----------谁在使用沃通---------- */
	.con-hd05{padding-bottom: 30px; }
    .con-hd05 ul{text-align: center; 
    font-size: 0}
	.con-hd05 li{width:15.66666%; 
	min-height: 66px;
	line-height: 66px;
	border: 1px solid #ddd;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	text-align: center; 
	border-radius: 6px; 
	display:inline-block; 
	padding: 5px 0; 
	margin-left: 12px; 
	margin-bottom: 12px;}
    .con-hd05 li:first-child{margin-left: 0}
	.con-hd05 li a{float: left; width: 175px; height: 84px; border: 1px solid #ccc; cursor: auto; position: relative; left: 50%; margin: 0 30px 10px -90px; text-align: center;}
    .con-hd05 li img{vertical-align: middle;}
        
        
/* ----------响应式---------- */ 
	@media screen and (max-width: 1024px) {
        .con-back{width: 88%}
        .con-hd05 li,.con-hd05 li:first-child{width: 29%; margin:10px}
	}
	@media screen and (max-width: 900px) {
        h3.title{width: 100%; padding-left:0; right: 0}
        h3.title span {top: -40px; left: 50%; padding: 10px 0;border-radius: 120px 120px 0 0;width: 140px;margin-left: -70px; font-size: 18px;}
        
        .con-hd01{text-align: center}
        .con-hd01 li{width: 100%; float: none;}
        .con-hd01 li:first-child{margin-bottom: 30px;}
        .con-hd011 li.b{margin: 0;margin-bottom: 30px;}
        
        .hcell{display: inline-block; width: 100%; text-align: center}

        .con-hd05 li,.con-hd05 li:first-child{width: 50%; text-align: center}
        .con-hd05 li a{ width: 80%; padding: 0 8% 10px 8%; margin: 0; left: 0; height: auto; float: none; display: inline-block}
		.con-hd05 li a img{width:100%}
	}
	
	
	</style>