@charset "utf-8";
@import "page.css";
#sem_yl{ width:100%; padding:80px 0}
#sem_yl .list{ margin-top:50px}
#sem_yl .list ul li{ float:left; width:calc((100% - 90px) / 4); margin-right:30px; border:1px solid #eee; padding:30px;text-align:center;}
#sem_yl .list ul li:last-child{ margin-right:0}
#sem_yl .list ul li .icon{ text-align:center}
#sem_yl .list ul li .icon i{ font-size:40px; width:80px; height:80px; text-align:center; line-height:80px;color:#fff; border-radius:80px}
#sem_yl .list ul li:nth-child(1) i{background:#97d25c}
#sem_yl .list ul li:nth-child(2) i{background:#46b1d9}
#sem_yl .list ul li:nth-child(3) i{background:#e2b233}
#sem_yl .list ul li:nth-child(4) i{background:#e771b1}
#sem_yl .list ul li:nth-child(5) i{background:#ae82e3}
#sem_yl .list ul li:nth-child(6) i{background:#e87676}
#sem_yl .list ul li:nth-child(7) i{background:#e17ae2}
#sem_yl .list ul li:nth-child(8) i{background:#4fc9e2}
#sem_yl .list ul li big{ display:block; font-size:18px ; margin-top:30px;}
#sem_yl .list ul li small{ display:block; font-size:14px; color:#999}
@media (max-width:800px){
	#sem_yl{padding:.8rem 0;}
	#sem_yl .list{ margin-top:.2rem}
	#sem_yl .list ul li{ float:inherit; width:100%; margin-right:0; padding:.3rem; margin-top:.3rem}
	#sem_yl .list ul li .icon i{ font-size:.4rem; width:1rem; height:1rem; line-height:1rem;  border-radius:1rem}
	#sem_yl .list ul li big{  font-size:.28rem ; margin-top:.3rem;}
	#sem_yl .list ul li small{  font-size:.23rem;}
}#sem_service{ width:100%; padding:80px 0; background:#f8f8f8}
#sem_service .list{ margin-top:50px}
#sem_service .list ul li{ float:left; width:calc((100% - 90px) / 4); margin-right:30px; background:#fff;border-radius: 20px 0 20px 0;; overflow:hidden}
#sem_service .list ul li:last-child{ margin-right:0}
#sem_service .list ul li .img{ position: relative;}
#sem_service .list ul li .img img{ width:100%}
#sem_service .list ul li .img i{ position:absolute; left:0; top:50%; width:100%; height:100%; text-align:center; margin-top:-20px; line-height:40px; color:#fff; font-size:40px}
#sem_service .list ul li .t{ padding:20px 30px 10px}
#sem_service .list ul li .t big{ display:block; font-size:18px}
#sem_service .list ul li .t small{ display:block; font-size:14px; color:#999; position:relative; padding-bottom:10px}
#sem_service .list ul li .t small:after {content: "";position: absolute;bottom: 0;left:0;width: 56px;height: 1px;background: #e5e5e5;}
#sem_service .list ul li .info{ padding:0 30px 20px; line-height:26px; min-height:210px; position:relative}
#sem_service .list ul li .info em{ font-size:100px; line-height:100px; font-style:italic; color:#eff3fe; font-family:dinpro-bold; position:absolute; right:30px; bottom:10px}
#sem_service .list ul li .info p{ position:relative; padding-left:15px}
#sem_service .list ul li .info p:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    overflow: hidden;
    background: #3c6ef0;
}
@media (max-width:800px){
	#sem_service{padding:.8rem 0;}
	#sem_service .list{ margin-top:.2rem}
	#sem_service .list ul li{ float: inherit; width:100%; margin-right:0;border-radius: .2rem 0 .2rem 0; margin-top:.3rem}
	#sem_service .list ul li .img i{margin-top:-.4rem; line-height:.8rem; color:#fff; font-size:.8rem}
	#sem_service .list ul li .t{ padding:.3rem .5rem}
	#sem_service .list ul li .t big{ font-size:.28rem}
	#sem_service .list ul li .t small{ font-size:.23rem;  padding-bottom:.1rem}
	#sem_service .list ul li .t small:after {width: .6rem;}
	#sem_service .list ul li .info{ padding:0 .5rem .3rem; line-height:.4rem; min-height: inherit;}
	#sem_service .list ul li .info em{ font-size:1rem; line-height:1rem;right:.3rem; bottom:.1rem}
	#sem_service .list ul li .info p{ padding-left:.3rem}
	#sem_service .list ul li .info p:before {top: .16rem;width: .08rem;height: .08rem;}
}
#sem-adv{ width:100%; padding:80px 0}
#sem-adv .list{ margin: 55px 0; position: relative; overflow: hidden;}
#sem-adv .list .cricle{ position: absolute; top:50%; left:50%; margin-top: -125px; width:250px; height: 250px; margin-left: -125px;}
#sem-adv .list .cricle span{ position: absolute; z-index: 1; top:50%; left:50%; width:62px; height: 62px; margin-top: -31px; padding-top: 25px; margin-left: -31px; text-align: center; font-size: 16px; color: #FFFFFF; line-height:18px;}
#sem-adv .list .cricle:after{ content: ""; position: absolute; z-index: 0; top:0; left:0; width: 250px; height: 250px; background: url(/theme/2020/static/images/sem_cricle.png);}
#sem-adv .list .cricle:after{-webkit-animation:play 3s linear infinite;-moz-animation:play 3s linear infinite;animation:play 3s linear infinite;}
#sem-adv .list .text{ float: left; width:32%; text-align: right;}
#sem-adv .list .text div{ margin-top:70px; position: relative; min-height: 60px; padding-right: 80px; line-height: 30px;}
#sem-adv .list .text div:first-child{ margin-top: 0;}
#sem-adv .list .text div i{ position: absolute; top:0; right:0; width: 60px; height: 60px; background:#f60; line-height:60px; text-align:center; font-size:30px; color:#fff; border-radius:60px}
#sem-adv .list .text div i{background-image: linear-gradient(#70d7fe, #2991d5);}
#sem-adv .list .text div span{ font-size: 18px}
#sem-adv .list .text2{ float: right; text-align:left;}
#sem-adv .list .text2 div{ padding-right: 0; padding-left: 80px; }
#sem-adv .list .text2 div i{ right: auto; left:0; }
@media (max-width:800px){
	#sem-adv{ width:100%; padding:.8rem 0}
	#sem-adv .list{ margin: .5rem 0 0; position: relative; overflow: hidden;}
	#sem-adv .list .cricle{ display:none}
	#sem-adv .list .text{ float: inherit; width:100%; text-align: left;}
	#sem-adv .list .text div{  min-height: .8rem;line-height:.4rem ; border:1px solid #eee; padding:.3rem .3rem .3rem 1.3rem; margin-top:.3rem}
	#sem-adv .list .text div:first-child{ margin-top:.3rem;}
	#sem-adv .list .text div i{top:.3rem; left:.3rem; width: .8rem; height: .8rem;  line-height:.8rem; font-size:.4rem; border-radius:8rem}
	#sem-adv .list .text div span{ font-size: .28rem;}
	#sem-adv .list .text div p{ color:#999}
	#sem-adv .list .text2{ float: inherit;}
	#sem-adv .list .text2 div{ padding-right: 0; padding:.3rem .3rem .3rem 1.3rem; margin-top:.3rem}
	#sem-adv .list .text2 div i{top:.3rem; left:.3rem;}
}