@charset 'sut-8';

.container {padding-bottom: 70px;}
.title{width: 100%;height: 66px;background: #004098;color: #fff;position: relative;}
.title:after{content: "";display: block;width: 100%;height: 3px;background: #fff;position: absolute;bottom:5px;}
.title h1{font-size: 26px;line-height: 22px;padding-top: 18px}
.title h1 em{font-size: 14px;line-height: 22px;font-weight: normal;}

.round{padding: 70px 18px 30px;}
.round li{width: 216px;height: 220px;display:inline-block;text-align: center;margin-bottom: 32px;}
.round li .icon{display:block;width: 116px;height: 116px;margin: 0 auto;border-radius: 50%;border: 1px solid #f36054;position: relative;}
.round li .icon:before{display: block;content: ""; position: absolute;width: 68px;height: 57px;left: 50%;margin-left: -34px;top: 26px; background: url(../images/rotate.png) no-repeat 6px 0px;}
.round li.li1 .icon{border: 1px solid #37c9be;}
.round li.li1 .icon:before{background-position: 11px -109px;}
.round li.li1,.round li.li4{margin: 0 154px}
.round li.li2 .icon{border: 1px solid #09a3e7;}
.round li.li2 .icon:before{background-position: 5px -218px;}
.round li.li3 .icon{border: 1px solid #01cafe;}
.round li.li3 .icon:before{background-position: 3px -326px;}
.round li.li4 .icon{border: 1px solid #f2a036;}
.round li.li4 .icon:before{background-position: 7px -431px;}
.round li.li5 .icon{border: 1px solid #f1b634;}
.round li.li5 .icon:before{background-position: 15px -542px;}

.round li:hover .icon:before{transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-o-transform:rotateY(360deg);-webkit-transition:.6s;-moz-transition:.6s;-o-transition:.6s;transition:.6s;}
.round li h2{margin: 10px 0; font-size: 16px;line-height: 22px;color: #000;font-weight: normal;}
.round li h2 em{font-size: 14px;line-height: 16px;display: block;}
.round li p{font-size: 12px;line-height: 18px;color: #000;}

.tech-news{width: 100%;}
.tech-news .haha{width: 100%;height: 62px;background: #004098;color: #fff;font-size: 26px;line-height: 22px;padding-top: 18px;padding-left: 14px;margin-bottom: 20px; position: relative;}
.tech-news .haha:after{content: "";display: block;width: 100%;height: 3px;background: #fff;position: absolute;bottom:2px;left: 0}
.tech-news .haha em{font-size: 14px;line-height: 22px;font-weight: normal;}
.tech{width: 500px;}
.tech li{width: 100%;height: 82px;border-bottom: 1px solid #eee;padding-bottom: 12px;margin-bottom: 12px}
.tech li img{float: left;margin-right: 10px}
.tech li h2{font-size: 16px;line-height: 22px;font-weight: normal;color: #000;margin-bottom: 6px}
.tech li p{font-size: 12px;line-height: 18px;color: #000;}

.news{width: 485px;}
.news .first{width: 100%;height: 132px;padding-bottom: 8px;margin-bottom:6px; border-bottom: 1px solid #eee;}
.news .first img{width: 186px;height: 126px;float: left;}
.news .first .news-text{float: right;width: 286px;height: 128px;padding: 0 2px;position: relative;}
.news .first .news-text h1{font-size: 16px;line-height: 18px;font-weight: normal; color: #000;margin:4px 0 6px;}
.news .first .news-text p{font-size: 12px;line-height: 18px;color: #000;}
.news .first .news-text .time{position: absolute;bottom: 0; display: inline-block;width: 100%;height: 27px;border-top: 1px solid #eee;text-align: right;font-size: 12px;line-height: 27px;background: url(../images/news.png) no-repeat 2px 7px;}
.news .first .news-text .time span{float: left;margin-left:19px}
.news .diff{display: block;font-size: 12px;line-height: 23px;color: #959595;padding-left: 11px;background: url(../images/news.png) no-repeat 0px -60px;}
.news .diff:hover{background-position: 0px -37px;color:#e50012}
.news .diff em{float: right;}