html { }
/* common style */
*{margin:0;padding: 0;border:0;}
html{
height:100%;
}
body{
width:100%;
height:100%;
margin:0;
padding:0;
position:relative;
left:0;
top:0;
font-family:"Microsoft Yahei";
overflow-x:hidden;
}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:block; zoom:1; }
/*头部*/
.my-head-area{
width:100%;
background:#e5e4e4;
padding:30px 0;
}
.my-head{
max-width:1200px;
margin:0 auto;
}
.phone{
position:relative;
text-align:right;
}
.phone i{
position:absolute;
top:0;
left:-25%;
font-size:40px;
color:#444;
}
.phone p{
font-size:16px;
color:#333;
line-height:24px;
}
@font-face {
font-family:'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.phone .iconfont-1{ animation: change 1s ease-in infinite ; }
@keyframes change {
0%{color:#f00;}
50%{color:#333;}
100%{color:#f00;}
}
.top-h-area{
width:100%;
height:32px;
line-height:20px;
background:#2b2e33;
position:relative;
top:0;
left:0;
z-index:999;
}
.fl-top{
width:555px;
float:right;
}
.fl-top i,.fl-top em,.fl-top span,.fl-top a{
display:inline-block;
color:#fff;
font-size:16px;
margin-right:27px;
}
.fl-top span img{
margin-right:3px;
}
.fl-top i{
font-size:16px;
}
.header,.top-h{
width:1200px;
margin:0 auto;
position: relative;
}
.top-h .position_bj{
position: absolute;
left: 0;
top: 0;
padding: 0px 0;
box-sizing: border-box;
line-height: 32px;
font-size: 14px;
color: #fff;
font-weight: bold;
/*width: 600px;*/
animation: change 1s ease-in infinite ; color:#fff;display:inline-block;
}
.top-h .position_bj a{
font-size: 14px;
color: #fff;
animation: change 1s ease-in infinite ; color:#fff;display:inline-block;
}
@font-face{
font-family:'imooc-icon';
src:url("../fonts/icomoon.eot") format("embeddeb-opentype")
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight:normal;
font-style:normal;
}
.imooc-icon{
font-family:'imooc-icon';
font-weight:normal;
font-style:normal;
text-align:center;
color:#fff;
font-size:20px;
margin-right:5px!important;
}
.fl-top .twinkle{ animation: change 1s ease-in infinite ; color:#fff;display:inline-block; line-height: 32px}
@keyframes change {
0%{color:#fff;}
50%{color:#f00;}
100%{color:#fff;;}
}
.polygon{
width:1200px;
margin:40px auto 50px;
}
.polygon dl{
float:left;
width:300px;
}
.poly-dl{
position:relative;
}
.poly-dl dt{
width:96px;
height:88px;
color:#26a3ff;
position:absolute;
top:0;
left:0;
background:url(./images/polygon.png) center center no-repeat;
}
.poly-dl dt b{
display:inline-block;
font-weight:normal;
font-size:32px;
}
.poly-dl dt span{
display:inline-block;
font-size:18px;
}
.poly-dl dd{
margin-left:105px;
margin-top:20px;
}
.poly-dl dd p{
line-height:26px;
font-size:17px;
color:#000;
}
.poly-dl dd p font{
color:#26a3ff;
}
.unsame{
position:absolute;
top:20px;
left:18px;
}
.unb{
position:absolute;
top:24px;
left:15px;
}
.degre-area{
width:100%;
background:#eee;
}
.degrees-area{
width:100%;
}
.sametit{
max-width:1200px;
padding:48px 0;
margin:0 auto;
text-align:center;
position:relative;
}
.sametit span{
font-size:19px;
}
.sametit .empty{
margin:12px 0;
}
.sametit span font{
color:#27a3ff;
}
.wdsy {
width: 100%;
padding: 0 50px;
box-sizing: border-box;
}
.wdsy img {
display: block;
max-width: 100%;
min-width: auto;
margin: 0 auto;
display: block;
}
.about-area{
width:100%;
/*padding-bottom:10px;*/
/*background:url(../images/honor-bg.jpg) center bottom no-repeat;*/
background-size:cover;
overflow:hidden;
}
.about-area strong { font-style:normal; font-weight:400; }
.about-box{
max-width:1400px;
margin:0 auto;
background:#fff;
padding-bottom:12px;
position:relative;
}
.about-box:before{
z-index: -2;
position: absolute;
background: transparent;
content: '';
left: 20px;
bottom:79px;
-webkit-transform: skew(-17deg) rotate(-8deg);
-moz-transform:skew(-17deg) rotate(-8deg);
-o-transform: skew(-17deg) rotate(-8deg);
ms-transform: skew(-12deg) rotate(-8deg);
-webkit-box-shadow: 0 12px 16px rgba(105, 99, 99, 0.8);
-moz-box-shadow: 0 12px 16px rgba(105, 99, 99, 0.8);
-o-box-shadow: 0 12px 16px rgba(105, 99, 99, 0.8);
box-shadow: 0 12px 20px rgba(105, 99, 99, 0.8);
}
.about-box:after {
z-index:-1;
position: absolute;
background: transparent;
content: '';
right:20px;
bottom:79px;
-webkit-transform: skew(17deg) rotate(8deg);
-moz-transform:skew(17deg) rotate(8deg);
-o-transform: skew(17deg) rotate(8deg);
-ms-transform: skew(12deg) rotate(8deg);
-webkit-box-shadow: 0 12px 16px rgba(105, 99, 99, 0.6);
-moz-box-shadow: 0 12px 16px rgba(105, 99, 99, 0.6);
-o-box-shadow: 0 12px 16px rgba(105, 99, 99, 0.6);
box-shadow: 0 12px 16px rgba(105, 99, 99, 0.6);
}
.about-intro{
width:1150px;
margin:0px auto;
}
.about-intro p{
font-size:16px;
color:#333;
line-height:28px;
}
.about-intro a{
display:block;
width:220px;
height:50px;
line-height:50px;
font-size:14px;
color:#fff;
margin:30px auto;
background:#27a3ff;
text-align:center;
border-radius: 10px;
}
.customer-area{
width:100%;
background:url(./images/cooper-bg.jpg) center center no-repeat;
background-size:cover;
}
.customer-area .sametit span{
color:#fff;
}
.customer{
padding-bottom:2%;
}
.customer ul li{
float:left;
width:14.25%;
}
.customer ul li span{
display:block;
margin:1px;
}
.customer ul li img{
width:100%;
max-height:130px;
border-radius: 10px;
}
/*case*/
.index-section * {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.auto{ margin: 0 auto; width: 100%;padding-left: 80px; padding-right: 80px;clear: both;}
@media(max-width:1640px){
.auto{ padding-left: 60px; padding-right: 60px;}
}
@media(max-width:1366px){
.auto{ padding-left: 40px; padding-right: 40px;}
}
@media(max-width:1240px){
.auto{ padding-left: 30px; padding-right: 30px;}
}
@media(max-width:1024px){
.auto{ padding-left: 15px; padding-right: 15px;}
}
.index-tit{ text-align: center; padding: 68px 0 38px; position: relative;}
.index-tit .line{ width: 28px; height: 5px; margin: 0 auto; background: #ff3366; position: absolute; top: 0; left: 50%; margin-left: -14px;}
.index-tit>span{ display: block; color: #333; font-size: 30px; font-weight: 600; line-height: 1;}
.index-tit .cn{ padding-top: 20px;}
.index-tit .cn em{ font-style: normal; color: #ff3366;}
.index-tit .en{font-family: Tahoma,arial; text-transform: uppercase;}
.index-tit .en em{ font-style: normal; font-weight:300; padding-left: 10px;}
@media(max-width:1240px){
.index-tit{ padding: 44px 0 22px;}
.index-tit>span{ font-size: 24px;}
.index-tit .cn{ padding-top: 15px;}
}
@media(max-width:1000px){
.index-tit{ padding: 34px 0 19px;}
.index-tit>span{ font-size: 20px;}
.index-tit .cn{ padding-top: 10px;}
}
.index-more{ display: block; text-align: center; padding: 60px 0;}
.index-more a{ display: inline-block; font-size: 18px; color: #ff3366; border:1px solid #ff3366; padding: 8px 24px; line-height: 0.95;}
.index-more a:hover{ background: #ff3366; color: #fff;}
@media(max-width:1240px){
.index-more{ padding: 40px 0;}
.index-more a{font-size: 16px;}
}
@media(max-width:1000px){
.index-more{ padding: 30px 0;}
.index-more a{font-size: 14px;}
}
.ul,.ul li {list-style: none;}
.pic-list{ overflow: hidden;min-height: 400px;}
.pic-list .ul{ margin: 0 -15px;}
.pic-list li{ float: left; width: 33.3334%; padding: 10px;}
.index-section2 .list2.pic-list li:nth-child(3){ clear: both; }
.index-section2 .list3.pic-list li:nth-child(3){ clear: both; }
.pic-list li .pic{ overflow: hidden; position: relative;}
.pic-list li .pic .href{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.pic-list li .Ispic{ display: block; /* padding-bottom: 67%; */}
.pic-list li .word{ padding: 0 5%; color: #333; font-size: 14px; text-align: center; line-height: 1.25;}
.pic-list li .word h3{ font-weight: normal; margin: 15px 0 10px; font-size: 15px;}
.pic-list li .word h3 a{ color: #333;}
.pic-list li .word h3 a:hover{ color: #ff3366;}
.pic-list li .word>span{ display: block;}
.pic-list li .word figure{ color: #999; font-size: 12px; line-height: 1.85; height:5.55em; overflow:hidden;}
.pic-list li .layer{ position: absolute; bottom:0; width: 100%; height: 100%; left: 0; overflow: hidden;
background: rgba(0, 0, 0, 0.5) !important; /* IE无效，FF有效 */filter: alpha(opacity=50); opacity: 0;}
.pic-list li .layer figure{ padding: 4% 8%; text-align: left; position: absolute; bottom: 0; left: 0; width: 100%; line-height: 1.85; font-size: 14px; color: #fff; opacity: 1;}
.pic-list li .Ispic{ /* padding-bottom: 58%; */ padding-bottom: 16.35rem;}
@media (min-width:1367px) {
.pic-list li .Ispic{ padding-bottom: 20rem;}
}
@media(max-width:1000px){
.pic-list li{ padding: 5px;}
}
@media(max-width:767px){
.pic-list li{width: 50%;}
.pic-list li .word figure{display: block;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;}
}
@media(max-width:640px){
.pic-list .ul{ margin: 0;}
.pic-list li{width: 100%; padding: 10px 0;}
.pic-list li .Ispic{padding-bottom: 10.8rem;}
.pic-list li .word figure {height:auto;}
}
.pic-list1 li .word{ text-align: left; padding: 0;}
.pic-list1 li .word h3{ margin-bottom: 0;line-height: 1.85; margin-top: 15px;}
.index-section1 .tabs li h3
{
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.index-section1 .tabs{ overflow: hidden;}
.index-section1 .tabs .ul{ margin: 0 -15px;}
.index-section1 .tabs li{ float: left; width: 33.3334%; padding:0 10px 10px;}
.index-section1 .tabs li a{ display: block; position: relative; overflow: hidden; text-align: center;}
.index-section1 .tabs li .Ispic{ display: block; padding-bottom: 100px; background: #fff; position: relative;}
.index-section1 .tabs li h3{position:relative; margin: 0; position: absolute; width: 100%; text-align: center; padding: 0 10px; left: 0; top: 50%; font-size: 20px; color: #000; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);}
.index-section1 .tabs li a:hover .Ispic:after,
.index-section1 .tabs li.on .Ispic:after{ content:""; position: absolute; left: 0; bottom: 0; height: 2px; background: #ff3366; width: 100%;}
.index-section1 .tabs li:last-child h3{ display: inline-block; width: 180px; left:50%; margin-left: -90px; }
.index-section1 .tabs li:last-child h3:after { content: ""; width: 30px; height: 14px; display: block; position: absolute; right:10%; top:0; background: url(../images/sy-hot.png) no-repeat;
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;}
@media(min-width:1001px){
.pic-list li .layer{
-webkit-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.pic-list li .pic:hover .layer{ opacity: 1;}
.index-section1 .tabs li .Ispic,
.pic-list li .Ispic{
-webkit-transition: -webkit-transform 0.8s ease-in-out;
-ms-transition: -ms-transform 0.8s ease-in-out;
-moz-transition: -moz-transform 0.8s ease-in-out ;
transition: transform 0.8s ease-in-out;
}
.index-section1 .tabs li a:hover .Ispic,
.pic-list li .pic:hover .Ispic{
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
-moz-transform: scale(1.15);
transform: scale(1.15);
}
}
.index-section2 .list2.pic-list li:nth-child(3){ clear: both; }
.index-section2 .list3.pic-list li:nth-child(3){ clear: both; }
.index-section2 .list-tit{ font-size: 24px; margin: 0; line-height: 0.95; padding-bottom: 16px; color: #333; position: relative; margin-bottom: 20px;}
.index-section2 .list-tit:after{ content: ""; position: absolute; left: 0; bottom: 0; width: 70%; display: block; height: 1px; background:#ff3366;}
.index-section2 .list-tit span{position: relative;}
.index-section2 .list-tit span:after{content: ""; position: absolute; left: 0; bottom: -11px; width: 100%; display: block; height: 5px; background:#ff3366;}
.index-section2 .list1 li:first-of-type .Ispic{ /* padding-bottom: 131%; */ padding-bottom: 38rem;}
.index-section2 .list2 li:first-of-type{ width: 66.6668%;}
.index-section2 .list3 li:first-of-type{ width: 66.6668%;}
.index-section2 .list2 li:first-of-type .Ispic{ /* padding-bottom: 28.2%; */padding-bottom: 16.35rem;}
.index-section2 .list3 li:first-of-type .Ispic{ /* padding-bottom: 28.2%; */padding-bottom: 16.35rem;}
/* @media(max-width:1460px){
.index-section2 .list1 li:first-of-type .Ispic{ padding-bottom: 136.85%;}
} */
@media (min-width:1367px) {
.index-section2 .list1 li:first-of-type .Ispic{padding-bottom: 45.25rem;}
.index-section2 .list2 li:first-of-type .Ispic{ padding-bottom: 20rem;}
.index-section2 .list3 li:first-of-type .Ispic{ padding-bottom: 20rem;}
}
@media(max-width:1240px){
.index-section2 .list-tit{ font-size: 20px; margin-bottom: 10px;}
}
@media(max-width:1000px){
.index-section2 .list-tit{ font-size: 18px;}
}
@media(max-width:767px){
.index-section2 .list2 li:first-of-type{ width: 100%;}
.index-section2 .list3 li:first-of-type{ width: 100%;}
}
@media(max-width:640px){
.index-section2 .list1 li:first-of-type .Ispic{ padding-bottom: 30rem;}
.index-section2 .list2 li:first-of-type .Ispic{ padding-bottom: 10.8rem;}
.index-section2 .list3 li:first-of-type .Ispic{ padding-bottom: 10.8rem;}
}