@charset "utf-8";
table  tr th{ font-weight:300;  font-size:16px} 
#price-table{border-collapse: collapse;}
#price-table .price-row .pack-title{width: 25%;line-height: 60px;}
#price-table .price-row .pack-title{background-color: #fafafa;border-left: 1px solid #e1e1e1;border-top: 1px solid #e1e1e1;}
#price-table .price-row .pack-title .title-0{font-size: 36px;color: #000;}
#price-table .price-row .pack-title .title-1{font-size: 30px;color: #bbb;}
#price-table .price-row .pack-col{width: 25%;}
#price-table .price-row.r0 .pack-col{padding: 50px 0;}
#price-table .price-row.r0 .pack-col.i0{background-color: #ffc804;border-top: 1px solid #ffc804;}
#price-table .price-row.r0 .pack-col.i1{background-color: #ff4300;border-top: 1px solid #ff4300;}
#price-table .price-row.r0 .pack-col.i2{background-color: #00b3ff;border-top: 1px solid #00b3ff;}
#price-table .price-row.r0 .pack-col .price-title{font-family:微软雅黑, '宋体';font-size: 30px;color: #fff;}
/*#price-table .price-row.r0 .pack-col .price-title::before , #price-table .price-row.r0 .pack-col .price-title::after{width: 40px;height: 1px;background-color: #fff;position: absolute;z-index: 1;top: 50%;content: '';}*/
#price-table .price-row.r0 .pack-col .price-title::before{right: 120%;}
#price-table .price-row.r0 .pack-col .price-title::after{left: 120%;}
#price-table .price-row.r0 .pack-col .pack-price{ font-size: 36px;color: #fff;}
#price-table .price-row.r0 .pack-col .pack-price::before{ font-size: 30px;position: absolute;z-index: 1;top: 6px;right: 100%;content: '¥';left:-26px;}
#price-table .price-row.r0 .pack-col .o-price{font-size: 18px;color: #fff;opacity: .5;}
#price-table .price-row.r0 .pack-col .o-price::before{width: 120%;height: 1px;background-color: #fff;left: -10%;top: 50%;position: absolute;z-index: 1;content: '';}
#price-table .price-row.r1 .pack-col{padding: 30px 0 50px;}
#price-table .price-row.r1 .pack-col.i0{background-color: #ffd306;}
#price-table .price-row.r1 .pack-col.i1{background-color: #ff5400;}
#price-table .price-row.r1 .pack-col.i2{background-color: #00c1ff;}
#price-table .price-row.r1 .pack-col .renewals{font-size: 26px;color: #fff;}
#price-table .price-row.r1 .pack-col .renewals span{font-size: 26px;}
#price-table .price-row.r1 .pack-col .renewals font{font-size:18px; font-weight:bold;}
#price-table .price-row.r1 .pack-col .renewals span::before{font-size: 26px;position: relative;z-index: 1;margin: 0 4px 0 8px;content: '¥';}


#price-table .price-row.r1 .pack-col .tip{font-size: 26px;color: #fff;}
#price-table .price-row.r1 .pack-col .tip span{font-size: 26px;}
#price-table .price-row.r1 .pack-col .tip font{font-size:18px; font-weight:bold;}

#price-table .price-row.r1 .pack-col .tip span::before{font-size: 26px;position: relative;z-index: 1;margin: 0 4px 0 8px;content: '¥';}
#price-table .price-row.r1 .pack-col .o-price{font-size: 18px;color: #fff;opacity: .5;}
#price-table .price-row.r1 .pack-col .o-price::before{width: 90%;height: 1px;background-color: #fff;left:5px;top: 50%;position: absolute;z-index: 1;content: '';}
#price-table .price-row.r1 .pack-col .tips{font-size: 22px;color: #fff;margin-top: 30px;}
#price-table .fun-title td{line-height: 60px;font-size: 18px;color: #000;background-color: #e1e1e1;}
#price-table .fun-row .fun-type{font-weight: bold;font-size: 16px;color: #333;border: 1px solid #e5e5e5;}
#price-table .fun-row .fun-title{height: 60px;line-height: 24px;font-size: 16px;color: #333;border: 1px solid #e5e5e5;}
#price-table .fun-row .fun-cell{font-size: 16px;color: #666;}
#price-table .fun-row.i0 .fun-cell.i0{background-color: #f8f5e7;}
#price-table .fun-row.i0 .fun-cell.i1{background-color: #f8ece7;}
#price-table .fun-row.i0 .fun-cell.i2{background-color: #ebf5f9;}
#price-table .fun-row.i1 .fun-cell.i0{background-color: #eeecdf;}
#price-table .fun-row.i1 .fun-cell.i1{background-color: #eee3df;}
#price-table .fun-row.i1 .fun-cell.i2{background-color: #e1ecf1;}

 

 

@media only screen and (max-width: 1300px){
	.show1300{display: block;}
	.hide1300{display: none;}
    #products-box .products-list .item .cover .opt .button-bg{padding: 10px 15px;}
    #products-box .products-list .item .cover .opt .button{width: 60px;height: 60px;line-height: 60px;font-size: 14px;}
    #products-box .products-list .item .cover .opt .links{margin-top: auto;}
	#products-box .products-list .item-ext{width:46%; margin:0 12px 60px;}
    #price-table .price-row .pack-title .title-0{font-size: 22px;}
    #price-table .price-row .pack-title .title-1{font-size: 16px;}
    #price-table .price-row.r0 .pack-col .price-title{font-size: 34px;}
    #price-table .price-row.r0 .pack-col .pack-price{font-size: 54px;}
    #price-table .price-row.r1 .pack-col .renewals{font-size: 18px;}
    #price-table .price-row.r1 .pack-col .renewals span{font-size: 28px;}
    #price-table .price-row.r1 .pack-col .renewals span::before{font-size: 20px;}
    #price-table .price-row.r0 .pack-col .o-price{font-size: 16px;}
    #price-table .price-row.r1 .pack-col .o-price{font-size: 16px;}
    #price-table .price-row.r2 .pack-col .o-price{font-size: 16px;}
    #price-table .price-row.r1 .pack-col .tips{font-size: 14px;}

	#tutorial .tutorial-list .item{width: 48%;}
	#tutorial .tutorial-list .item .date .day{font-size: 28px;}

	#contact .contact-area .contact-info2 .qrcode{width: 100%;float: none;}
	
	#instance .instance-list .item .cover{width: 100%;}
	#instance .instance-list .item .info{width: 96%; margin:0px 2%;}
}

@media only screen and (max-width: 992px){
	.show992{display: block;}
	.hide992{display: none;}
	
	#global_qq_service{display:none;}
	
	#body.left{-ms-transform:translateX(-60%);-moz-transform:translateX(-60%);-webkit-transform:translateX(-60%);-o-transform:translateX(-60%);transform:translateX(-60%);}
 
	.index-title , .index-title h2{font-size: 22px;}
	
	#about{margin-top:50px; margin-bottom:50px;}
	#about .number{padding:0%;}
	#about .number .i{width:50%; margin:5% 0% 5% 0%;}
 	
	#follow .item{margin-bottom: 1px;}
	#follow .item .ico.phone{border-top-left-radius: 10px;}
	#follow .item:last-child .ico{border-bottom-left-radius: 10px;}
	#follow .item .ico{width: 100%;height: 100%;background-repeat: no-repeat;background-position: center center;background-size: 50% auto;}
	#follow .item .ico .fa{display: none;}
	#follow .item .ico.phone{background-image: url(../images/m-phone.png);}
	#follow .item .ico.sina{background-image: url(../images/m-sina.png);}
	#follow .item .ico.wechat{background-image: url(../images/m-wechat.png);}
	#follow .item .totop .fa{font-size: 25px;display: inline-block;}
}

@media only screen and (max-width: 860px){
	#products.index #products-box{padding-top:35px;}
	
	#price-table{margin-top:0px;}
	#price-table .price-row.r0 .pack-col .price-title{font-size:24px;}
	#price-table .price-row.r0 .pack-col .pack-price{font-size:36px;}
	#price-table .price-row.r0 .pack-col .pack-price::before{top:5px;}
	#price-table .price-row.r1 .pack-col .renewals span::before{top:-8px;}
	
	#info-detail img{width:100% !important; height:auto !important;}
 
}

@media only screen and (max-width: 768px){
	.show768{display: block;}
	.hide768{display: none;}

 
	
	#instance .instance-list{margin-top:35px;}
	#instance .instance-list .item{margin-bottom:35px;}
	
	#products-box .products-list .item .info .left{width: 100%;float: none;}
	#products-box .products-list .item .info .price{width: 100%;line-height: 24px;float: none;}
	
	.index-cooperation .cooperation-box .item{width: 33.33%}
	.index-cooperation .evaluation-list .item[class]{width: 100%;margin: 0 10px 0 0;}

	#tutorial .tutorial-support .support-search{width: 100%;margin-bottom: 10px;float: none;}
	#tutorial .tutorial-support .support-search .text{width: 100%;}
	#tutorial .tutorial-support .play{margin-left: 0;}

	#contact .contact-area .contact-info2{padding: 10px;}
	#contact .contact-area .contact-info2 .address{line-height: 30px;}
	
	#footer_alert .img{left:140px;}
	#footer_alert .txt{margin-left:250px;}
}

@media only screen and (max-width: 640px){
	.show640{display: block;}
	.hide640{display: none;}

	.index-cooperation .evaluation-list .item .info .name{font-size: 20px;}

	.index-tutorial .tutorial-support .support-search{width: 96%;float: none;}
	.index-tutorial .tutorial-support .support-search .text{width: 100%;}
	.index-tutorial .tutorial-support .button{width: 96%;margin-left: 2%;float: none;}

	.try-button-box .button{width: 100%;margin: 10px 0;}
	
	#price-table .price-row .pack-title .title-0 , #price-table .price-row.r0 .pack-col .price-title{font-size:20px;}
	#price-table .price-row .pack-title .title-1{font-size:14px;}
	#price-table .fun-title td , #price-table .fun-row .fun-type , #price-table .fun-row .fun-title{font-size:14px;}
	
	#products-detail .detail-bg .price-list .price-item .price{font-size:32px;}
	
	#instance .instance-list .item{margin-bottom: 15px;}
	#instance .instance-list .item .info .logo{width: 60px;height: 60px;margin: 0 auto;float: none;}
	#instance .instance-list .item .info .title{width: 100%;margin: 10px 0 0;text-align:center;float: none;}

}

@media only screen and (max-width: 480px){
	.show480{display: block;}
	.hide480{display: none;}
	/*#products-box .products-list .item{width: 100%;}*/
	
	header nav .nav-item a::after{right:12%;}
	
	#about{margin-top:25px; margin-bottom:25px;}
	#about .number .i{font-size:16px;}
	/*#about .number .i .n{font-size: 30px;}*/
	
	.index-tutorial .tutorial-list .item .date .day{font-size: 18px;}
	.index-tutorial .tutorial-list .item .info .name{font-size: 16px;white-space: normal;}
	#tutorial .tutorial-list .item .date .day{font-size: 18px;}
 table tr th {
    font-weight: 300;
    font-size: 12px;
}
#price-table .price-row.r0 .pack-col .pack-price::before {
       font-size: 16px;
    position: absolute;
    z-index: 1;
    margin-top: -10px;
    right: 100%;
    content: '¥';
    left: -16px;
    
}
  #price-table .price-row.r0 .pack-col .o-price {
    font-size: 14px;
}
  #price-table .price-row.r1 .pack-col .renewals {
    font-size: 14px;
}
 #price-table .price-row.r1 .pack-col .renewals span {
    font-size: 16px;
}  
  #price-table .price-row.r1 .pack-col .o-price {
    font-size: 14px;
}
 
	#contact .contact-info .item .ico{display: none;}
	#contact .contact-info .item .info{font-size: 16px;}
	#contact .contact-info .item .button{width: 80%;}
	#contact .contact-area .contact-form .text{width: 100%;margin: 0 0 10px;}
	#contact .contact-area .contact-form .button{width: 100%;}
	#contact .contact-area .contact-form .text[name='VCode']{width: 50%}
	#contact .contact-area .contact-form .code-img{width: 50%;margin: 0;text-align: right;}
	#contact .contact-area .contact-form .code-img img{width: auto;max-width: 100%;}
	
	#price-table .price-row.r0 .pack-col .o-price::before{background:none;}
	#price-table .price-row .pack-title .title-0{font-size:14px;}
	#price-table .price-row.r0 .pack-col .price-title{font-size:16px;}
	#price-table .price-row.r0 .pack-col .pack-price{font-size:14px;}
	#price-table .price-row.r0 .pack-col .pack-price::before{font-size:20px;} 
	#price-table .price-row.r1 .pack-col .renewals span::before{top:0px;}
	#price-table .fun-title td{line-height:30px;}
	
	#contact .map .img-1{right: -10%;}
}
 
@media only screen and (max-width: 375px){
	#products .products-bg{padding:35px 0 20px;}
	
	#products-detail .products-process{padding:40px 0px 40px;}
	#products-detail .detail-bg .price-btn .botton{width:26%;}
	#products-detail .detail-title{font-size:24px;}
	#products-detail .products-process .process-list{margin-top:30px;}
	#products-detail .products-process .process-list .process-item .main .ico{margin-top:5%;}
	#products-detail .products-service .service-list{margin-top:30px;}
	
	#price-table .price-row.r0 .pack-col .price-title::before, #price-table .price-row.r0 .pack-col .price-title::after , #price-table .price-row.r0 .pack-col .o-price::before , #price-table .price-row.r1 .pack-col .o-price::before{display:none;}
	#price-table .price-row.r0 .pack-col .pack-price{font-size:24px;}
	
	#footer_alert{height:50px;}
	#footer_alert .img{left:0px;}
	#footer_alert .txt{margin-left:110px;}
}

@media only screen and (max-width: 360px){
	#price br{display:block;}
	
	#price-table .price-row.r1 .pack-col .renewals{font-size:14px;}
	
	#footer_alert .txt{margin-left:115px; font-size:14px;}
}

@media only screen and (max-width: 320px){
    .show320{display: block;}
    .hide320{display: none;}
}