@charset "utf-8";
@import "page.css";

#dns_pro{ width:100%; padding:60px 0;}
#dns_pro .list{ margin-top:30px}
#dns_pro .list ul{display:flex;justify-content:space-between;align-items:center;gap:0 30px;flex-wrap:wrap}
#dns_pro .list ul li{width:calc((100% - 90px) / 4);background:#F5F7FA; border-radius:4px; overflow:hidden}
#dns_pro .list ul li .title{ background:url(/static/images/dns_pro_bg.png); padding:20px 8% 0; height:123px;}
#dns_pro .list ul li .title h2{ font-size:24px; font-weight:normal; color:#324e90}
#dns_pro .list ul li .title p{ margin-top:10px; line-height:24px; color:#324e90}
#dns_pro .list ul li .info{ padding:10px 8%}
#dns_pro .list ul li .info .text p{border-bottom:1px solid #e8edf2;padding:3px 0;display:flex;justify-content:space-between;align-items:center;}
#dns_pro .list ul li .info .text p em{width:30%;color:#878B99;font-size:12px;}
#dns_pro .list ul li .info .text p span{width:70%; line-height:24px}
#dns_pro .list ul li .info .price{font-size:36px;color:#ff502e;padding:40px 0 20px;font-family:"din";}
#dns_pro .list ul li .info .price span{font-size:14px;}
#dns_pro .list ul li .info .price i{font-size:14px;margin-left:5px;color:#878B99;}

#dns_adv{ width:100%; padding:60px 0; background:#f8f8f8}
#dns_adv .list{ margin-top:30px}
#dns_adv .list ul{display:flex;justify-content:space-between;align-items:start;gap:30px;flex-wrap:wrap}
#dns_adv .list ul li{width:calc((100% - 60px) / 3);display:flex;justify-content:space-between;align-items:center; border:1px solid #e8edf2; padding:30px; background:#fff}
#dns_adv .list ul li .icon{width:100px;}
#dns_adv .list ul li .icon i{width:60px;height:60px;text-align:center;line-height:60px;color:#fff;font-size:30px;border-radius:100%;}
#dns_adv .list ul li:nth-child(1) .icon i{background:#e771b1;}
#dns_adv .list ul li:nth-child(2) .icon i{background:#ae82e3;}
#dns_adv .list ul li:nth-child(3) .icon i{background:#e87676;}
#dns_adv .list ul li:nth-child(4) .icon i{background:#e17ae2;}
#dns_adv .list ul li:nth-child(5) .icon i{background:#4fc9e2;}
#dns_adv .list ul li:nth-child(6) .icon i{background:#97d25c;}
#dns_adv .list ul li .info{width:calc(100% - 100px);}
#dns_adv .list ul li .info big{display:block;font-size:18px;}
#dns_adv .list ul li .info p{display:block;color:#878B99;line-height:26px; min-height:78px;}
#dns_adv .list ul li:hover{background:#2469f3;border:1px solid #2469f3;}
#dns_adv .list ul li:hover .icon i{background:#fff;color:#2469f3;}
#dns_adv .list ul li:hover .info big,
#dns_adv .list ul li:hover .info p{color:#fff;}

#dns_app{ width:100%; padding:60px 0}
#dns_app .list{ margin-top:30px}
#dns_app .list ul{display:flex;justify-content:space-between;align-items:start;gap:30px;flex-wrap:wrap}
#dns_app .list ul li{width:calc((100% - 60px) / 3); border:1px solid #e8edf2; padding:30px;}
#dns_app .list ul li .icon i{width:80px;height:80px;text-align:center;line-height:80px;font-size:30px;border-radius:100%; background:#F5F7FA}
#dns_app .list ul li .icon{ text-align:center}
#dns_app .list ul li .info{ margin-top:20px; text-align:center}
#dns_app .list ul li .info big{ font-size:24px;}
#dns_app .list ul li .info p{ margin-top:10px; line-height:26px; min-height:182px}

@media (max-width:800px){
	body,html{font-size:.21rem;line-height:.34rem}	
	
	#dns_pro{ width:100%; padding:.6rem 0;}
	#dns_pro .list{ margin-top:.3rem}
	#dns_pro .list ul{gap:.3rem 0}
	#dns_pro .list ul li{width:100%;border-radius:.04rem;}
	#dns_pro .list ul li .title{padding:.3rem .3rem; height: auto;}
	#dns_pro .list ul li .title h2{ font-size:.26rem; font-weight:700}
	#dns_pro .list ul li .title p{ margin-top:.1rem; line-height:.4rem; font-size:.21rem;}
	#dns_pro .list ul li .info{ padding:.3rem .3rem}
	#dns_pro .list ul li .info .text p{padding:.05rem 0;}
	#dns_pro .list ul li .info .text p em{font-size:.21rem;}
	#dns_pro .list ul li .info .text p span{line-height:.4rem}
	#dns_pro .list ul li .info .price{font-size:.6rem;padding:.4rem 0 .2rem;font-family:"din";}
	#dns_pro .list ul li .info .price span{font-size:.21rem;}
	#dns_pro .list ul li .info .price i{font-size:.21rem;margin-left:.05rem;}
	
	#dns_adv{padding:.6rem 0;}
	#dns_adv .list{margin-top:.3rem;}
	#dns_adv .list ul{gap:.3rem 0;}
	#dns_adv .list ul li{width:100%;margin-right:0;padding:.3rem;}
	#dns_adv .list ul li .icon{width:1rem;margin-left:0}
	#dns_adv .list ul li .icon i{width:1rem;height:1rem;line-height:1rem;font-size:.4rem;}
	#dns_adv .list ul li .info{width:calc(100% - 1.3rem);}
	#dns_adv .list ul li .info big{font-size:.26rem;}
	#dns_adv .list ul li .info p{font-size:.21rem;line-height:.34rem;margin-top:.1rem;}
	
	#dns_app{padding:.6rem 0}
	#dns_app .list{ margin-top:.3rem}
	#dns_app .list ul{gap:.3rem 0;}
	#dns_app .list ul li{width:100%; padding:.3rem; }
	#dns_app .list ul li .icon i{width:1rem;height:1rem;line-height:1rem;font-size:.4rem}
	#dns_app .list ul li .info{ margin-top:.2rem;}
	#dns_app .list ul li .info big{ font-size:.3rem;}
	#dns_app .list ul li .info p{ margin-top:.1rem; line-height:.4rem; font-size:.21rem; min-height: inherit}
}