
*{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: 15px; color: #333; line-height: 24px; background: #f7f6ff}	
.main a,a{text-decoration: none; color: #f28158;}
.main a:hover,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; width: 100%; height:500px; position: relative; overflow: hidden;}

.banner-con{width: 100%; animation: zs03 0.8s linear ; position: absolute; bottom:66px; text-align: center; left: 0}	
@media screen and (min-width: 900px) {
 
@keyframes zs03{
    from{opacity: 0; bottom: 30px}
	to{opacity: 1; bottom:66px}
}
}


.bt a.bt_a{font-size: 20px; font-weight: bold; line-height: 52px; text-align: center;background: url("bt_back.png") center no-repeat; color: #fff; width: 240px; height: 52px; display: block; margin: auto; transition: all .3s ease; position: relative; top: 0}
.bt a:hover{background:  url("bt_back_h.png") center no-repeat; 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:500px; background-size: cover}
    
}
@media screen and (max-width: 550px) {
    
    
}
/*con00*/
.con-hd00 .con{padding: 50px;border: 1px solid #cfc7e6; background: #fff; border-radius: 6px;}
.con-hd00 ul{display: table;}
.con-hd00 li{display: table-cell; vertical-align: middle; text-align: justify}
.con-hd00 li:first-child{padding-right: 50px;}
@media(max-width:900px){
    .con-hd00 li{display: block; width: 100%; text-align: justify}
    .con-hd00 li:first-child{padding:0 0 30px 0; text-align: center}
}

/* ----------产品---------- */  
.con-back{width: 1080px; height: auto; margin:60px auto;}
.con-hd01 .con{display: table; width: 100%; margin-top: -10px; }
.con-hd01 .con dl{display: table-cell}
.con-hd01 .con dl{width: 18%; background: #faf9ff}
.con-hd01 .con dl.th{width: 10%; background: #f8fffe}
.con-hd01 .con dl:last-child dd{ border-right: 1px solid #cfc7e6;}
.con-hd01 dl dt,.con-hd01 dl dd{display: table;text-align: center;vertical-align: middle; padding: 20px; width: 100%; border: 1px solid #cfc7e6; border-top: none; border-right: none}
.con-hd01 .con dl .tit{background: #5f69e3; background: linear-gradient(90deg,#6490e6,#5f69e3); color: #fff;border-bottom-color:#5f69e3;border-left-color:#6490e6;font-size: 18px;}
.con-hd01 .con dl .tit a{color: #fff; display: inline-block; background: url(arrow_a.png) right no-repeat; padding-right: 30px;}
.con-hd01 .con dl .tit a:hover{text-decoration: none;background: url(arrow.png) right no-repeat;}
.con-hd01 .con dl:last-child .tit{border-right-color:#5f69e3;}
.con-hd01 .con dl.th .tit{background: #5f69e3;border-bottom-color:#5f69e3;border-left-color:#5f69e3;font-weight: normal; font-size: 15px;}
.con-hd01 .con dl.th dt{font-size: 14px;}
.con-hd01 dl .tit,.con-hd01 .a{height: 70px; line-height: 30px;}
.con-hd01 .b,.con-hd01 .c,.con-hd01 .d,.con-hd01 .bt{ height: 90px;}
.con-hd01 .d{font-size: 14px;}
.con-hd01 .bt a{height: 42px; line-height: 42px; color: #fff; padding: 0 30px; display: inline-block; background: #ff895f; background: linear-gradient(#fe5858,#ff895f);border-radius: 3px; transition: all .3s ease; position: relative;top: 0}
.con-hd01 .bt a:hover{top: -5px; box-shadow:0 6px 9px rgb(254, 88, 88,0.5);}
.con-hd01 .con em{font-style: oblique; text-decoration: line-through}    
.con-hd01 .con p{font-size: 12px}
.con-hd01 .con b{font-size: 24px; color: #ff8155; position: relative; top: 1px; }
.con-hd01 .con dl div{display: table-cell;vertical-align: middle}

.con-hd0111{background: #fff; border: 1px solid #dedede; border-radius: 6px; line-height: 26px; margin-top: 20px; position: relative; padding: 30px; color: #666;background: linear-gradient(0deg,#f9f9f9,#fff); font-size: 13px;}
.con-hd0111 h2{position: absolute;font-size: 20px;left: 50%;top: -21px;padding: 10px 30px;background:#fff;margin-left: -76px;color:#333;border-radius: 90px;border: 1px solid #ddd;font-style: oblique}
.con-hd0111 b{color: #fd6e49}  
.con-hd01 dl.th{display: none}
.con-hd01 dl.th:first-child{display: table-cell}
@media(max-width:990px){
    .con-hd01 dl{display: block!important;}
    .con-hd01 dl dd{border-right:1px solid #cfc7e6 }
    .con-hd01 dl{width: 60%!important; margin-bottom:30px; float: left}
    .con-hd01 dl.th{width: 40%!important}
}

/* ----------其它产品---------- */ 
        .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;font-style: italic; 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;vertical-align: middle;position: relative;left: -20px;}
        h2.tit span.t_r{left: 20px;}
        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-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; background: #fff}
    .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; max-width: 150px;}
        
        
/* ----------响应式---------- */ 
	@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;}
        
        
        
        .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>