@charset "utf-8";
/* CSS Document */
* {margin: 0;padding: 0; box-sizing:border-box;}
body {font-family: "宋体"; font-size: 14px; overflow-x: hidden; color: #8f8f8f;}
ul,ol,li {list-style: outside none none; margin:0;}
.clear{ clear:both}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu,b{margin:0; padding:0; font-weight:normal;}
.fl{float:left;}
.fr{float:right;}
a{text-decoration: none;!important;font-family: "Microsoft YaHei";color: #8f8f8f;}
a:hover{text-decoration:none;!important; color:#555;}
img{ border: none; max-width:100% }
.fl{ float:left;}
.fr{ float:right;}
.w86{ width:86%; margin:0 auto; }
#opening {
position: fixed;
box-sizing: border-box;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
overflow: hidden;
}
.wrapper11 {
position: relative;
width: 100%;
height: 100%;
}
.door{
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
transform: rotate(-8.516deg);
}
.door .leftDoor,.door .rightDoor{
box-sizing: border-box;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
position: relative;
width: 50%;
height: 100%;
}
.door .leftDoor{
left:0;
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:leftDoor 5s 1 forwards;
-moz-animation:leftDoor 5s 1 forwards;
-o-animation:leftDoor 5s 1 forwards;
animation:leftDoor 5s 1 forwards;
-webkit-transform-origin: 0% 40%;
-moz-transform-origin: 0% 40%;
-o-transform-origin: 0% 40%;
background:#fff;
transform-origin: 0% 40%;
}
.door .rightDoor{
right:0;
box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:rightDoor 5s 1 forwards;
-moz-animation:rightDoor 5s 1 forwards;
-o-animation:rightDoor 5s 1 forwards;
animation:rightDoor 5s 1 forwards;
background:#c30d23;
-webkit-transform-origin: 100% 40%;
-moz-transform-origin: 100% 40%;
-o-transform-origin: 100% 40%;
transform-origin: 100% 40%;
}
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%;
}
0{
-webkit-transform:perspective(0) rotateY(0);
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg);
}
}
@-moz-keyframes leftDoor {
0%,100% {
-moz-transform-origin: 0% 40%;
}
0{
-moz-transform:perspective(0) rotateY(0);
}
100% {
-moz-transform:perspective(600px) rotateY(70deg);
}
}
@-o-keyframes leftDoor {
0%,100% {
-o-transform-origin: 0% 40%;
}
0{
-o-transform:perspective(0) rotateY(0);
}
100% {
-o-transform:perspective(600px) rotateY(70deg);
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(70deg);
}
}
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%;
}
0{
-webkit-transform:perspective(0) rotateY(0);
}
100% {
-webkit-transform:perspective(600px) rotateY(-70deg);
}
}
@-moz-keyframes rightDoor {
0%,100% {
-moz-transform-origin: 100% 40%;
}
0{
-moz-transform:perspective(0) rotateY(0);
}
100% {
-moz-transform:perspective(600px) rotateY(-70deg);
}
}
@-o-keyframes rightDoor {
0%,100% {
-o-transform-origin: 100% 40%;
}
0{
-o-transform:perspective(0) rotateY(0);
}
100% {
-o-transform:perspective(600px) rotateY(-70deg);
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(-70deg);
}
}
/*.logo{padding:18px 0;}
header{ width:100%; background:#fff; position:fixed; top:0; left:0; z-index:9999;}
nav li{ float:left; position:relative; line-height:88px;padding:0 28px;}
nav li:after{ content:""; position:absolute; right:0; top:40px; background:url(../images/xx.png) no-repeat; display:block; width:7px; height:16px;}
nav li a{ position:relative; padding-bottom:5px;}
nav li a:after{ content:""; position:absolute; bottom:0; text-align:center; width:0; height:2px; background:#c30d23; transition-duration:.5s; left:0;}
nav li:last-child:after{ display:none;}
nav li a:hover:after{ width:100%;}*/
.banner{ width:100%; height:100vh; background:url(../images/banner1.jpg);background-position: center center;
background-size: auto 100%; position:relative; top:0; left:0; z-index:1; background-attachment:fixed;}
.part01{ margin-top:32px; padding-right:17px; background:url(../images/l.jpg) no-repeat right top; padding-bottom:73px;}
.pp01{ padding-top:60px;}
.pp01:after{ content:""; clear:both; display:block;}
.pp01 span{ display:block; float:left; width:7px; height:53px; background:#264e68;}
.pp01 h1 b{ line-height:53px; padding-left:25px;font-size:28px; font-weight:normal; }
.xian{-webkit-animation:xian 2s 1 forwards;-moz-animation:xian 2s 1 forwards;-o-animation:xian 2s 1 forwards;animation:xian 2s 1 forwards;}
.opo{-webkit-animation:opo 2s 1 forwards;-moz-animation:opo 2s 1 forwards;-o-animation:opo 2s 1 forwards;animation:opo 2s 1 forwards;}
.ab01{ width:80%; line-height:2; padding:44px 0 20px 30px; font-size:16px; position:relative;}
.ab01 span{ font-size:70px; float:right;}
.part02{ width:100%;background:url(../images/xian.jpg) no-repeat right top; }
.ywfw{ background:#f1f1f1;}
.in-fw-ri{ width:50%; overflow:hidden; background:#444343;}
.in-fw-ri img{transition-duration:.5s; width:100%; display:block;}
.in-fw-ri:hover img{ opacity:0.3; transform:scale(1.1,1.1)}
.in-fw-le{ width:50%; padding-top:120px;}
.in-fw-le dl{ padding:0 5% 0 10%;}
.in-fw-le dl dt{ color:#333; font-size:30px; text-align:right;}
.in-fw-le dl dd p{ padding:40px 0; text-align:right; line-height:2;}
.in-fw-le dl dd a{ float:right; border:1px solid #2d2d2d; color:#2e3032; display:inline-block; padding:10px 30px; transition-duration:.5s;}
.in-fw-le dl dd a:hover{ background:#c30d23; color:#fff; border-color:#fff;}
.fw02{ position:relative; top:-100px;}
.in-fw02-ri{ padding-left:6%; width:50%;}
.in-fw02-ri p{ background:#444343; overflow:hidden;}
.in-fw02-ri img{transition-duration:.5s; width:100%; display:block;}
.in-fw02-ri:hover img{ opacity:0.3; transform:scale(1.1,1.1)}
.fw02 .in-fw-le dl{ padding:0 10% 0 5%}
.fw02 .in-fw-le dl dt,.fw02 .in-fw-le dl dd p{ text-align:left;}
.fw02 .in-fw-le dl dd a{ float:none; }
.in-fw03{ width:40%;}
.fw03{ position:relative; top:-50px;}
.pro-ti{ width:100%; background:url(../images/bg.jpg) no-repeat center center #0d304a; padding:90px 0; text-align:center; color:#fff;}
.pro-ti span{ padding:20px 0 40px 0; display:inline-block;}
.pro-ti p{ opacity:0.8; line-height:2.2; font-size:18px;}
.pro-list{ padding:80px 0;}
.pro-list li{ background:#f9f9f9; text-align:center; padding:30px 0; width:23%; float:left; margin-right:2.5%; margin-bottom:30px; cursor:pointer; transition-duration:.5s;}
.pro-list li span{ display:block; color:#0c2e48; padding:40px 0 14px 0;}
.pro-list li a{ border:1px solid #4b4b4b; padding:6px 20px; display:inline-block; margin-top:20px; color:#4b4b4b; transition-duration:.5s;}
.pro-list li a:hover{ background:#0d3049; color:#fff;}
.pro-list li:nth-child(4n){ margin-right:0;}
.pro-list li:hover{box-shadow:0 0 25px #999;transform: scale(1.1);-webkit-transform: scale(1.1);}
/*.pro-list li:hover img{-webkit-animation: icon-bounce 0.5s alternate;
-moz-animation: icon-bounce 0.5s alternate;
-o-animation: icon-bounce 0.5s alternate;
animation: icon-bounce 0.5s alternate;}*/
.in-new-list li{ width:25%; color:#fff; position:relative; overflow:hidden; float:left;}
.in-new-list li img{ width:100%; display:block;}
.in-new-list li h1{font-family:'Microsoft YaHei'; font-size:20px; position:absolute; width:100%; text-align:center; bottom:40px; transition-duration:.5s; opacity:1;}
.txt{ width:100%; height:100%; background:#0d3049; position:absolute; left:0; color:#fff; opacity:0; transition-duration:.5s; top:0;}
.txt a{ color:#fff;}
.txt dl{ width:80%; margin:0 auto; top:50%; transform:translateY(-60%); position:absolute; left:10%;}
.txt dl dt{font-family:'Microsoft YaHei'; font-size:20px;}
.txt dl dd p{ line-height:1.6; margin:40px 0;}
.txt dl dd a{ display:inline-block; padding:10px; border:1px solid #667c8c; transition-duration:.5s;}
.txt dl dd a:hover{ background:#fff; color:#333;}
.in-new-list li:hover h1{ opacity:0;}
.in-new-list li:hover .txt{ opacity:1;}
.banquan{ text-align:center; line-height:75px;}
.biao{ text-align:center; padding:50px 0;}
.in-lx{ position:relative;}
.map{ width:50%;}
.map img{ width:100%; display:block;}
.lx-txt{ width:50%; background:#f1f1f1; height:100%; position:absolute; right:0; top:0; padding-left:30px; padding-top:40px;}
.lx01 li{line-height:25px;padding-left:30px;}
.lx01 li:nth-child(1){ background:url(../images/tel.png) no-repeat left center; font-size:24px; margin:50px 0 20px 0; }
.lx01 li:nth-child(2){ background:url(../images/add.png) no-repeat left top; font-size:16px;}
.ewm { width:50%; padding-top:30px;}
.ewm li{ display:inline-block; width:40%; text-align:center;}
.ewm li img{ width:100%;}
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.summer {
background-image: url(../images/banner1.jpg);
}
.ne-new-list{ margin-top:100px;border-left:1px solid #dddddd;}
.ne-new01{ width:25%; border-right:1px solid #dddddd; padding:50px 25px 150px; box-sizing:border-box; transition-duration:.5s; float:left;}
.ne-new01 dl dt p{ font-size:18px; margin:35px 0 24px 0;transition-duration:.5s; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;}
.ne-new01 dl dt b{ color:#999999;transition-duration:.5s}
.ne-new01 dl dd p{ margin:13px 0 20px 0; background:#000; overflow:hidden;transition-duration:.5s}
.ne-new01 dl dd p img{ width:100%; display:block; transition-duration:.5s;}
.ne-new01 dl dd span{ display:block; color:#999; line-height:1.6; margin-bottom:34px;transition-duration:.5s; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;}
.ne-new01 dl dd .new-more{ width:52px; height:9px; display:block; background:url(../images/jt.png) no-repeat center 0;transition-duration:.5s}
.ne-new01:hover{ background:#264e68;}
.ne-new01:hover a{ color:#fff;}
.ne-new01:hover dl dt b{ color:#fff; opacity:0.5;}
.ne-new01:hover dl dd span{ color:#fff;}
.ne-new01:hover dl dd .new-more{ background:url(../images/jt.png) no-repeat center -9px;}
.ne-new01:hover dl dd p img{ opacity:0.5; transform:scale(1.1,1.1)}
.jianT{ max-width: 100%; text-align: center; padding-top:40px;}
.jianT li a{ font-size: 14px; color:#474747; padding:6px 10px ; line-height: 1; background:#dcdee2; }
.jianT li a:hover{text-decoration: none; background:#264e68;color:#fff;}
.jianT li{ display: inline; margin: 0 2px}
.jianT li .on{ background:#264e68; color:#fff;padding: 8px 11px;}
.jianT a[disabled]{ color: #474747;cursor: not-allowed;background-color: #dcdee2;border-color: #dcdee2;}
/*搜索框弹出*/
#dialogBg{width:100%;height:100%;background-color:#000000;opacity:.8;filter:alpha(opacity=60);position:fixed;top:0;left:0;z-index:9999;display:none;}
#dialog{ width: 200px; height: 250px; margin: 0 auto; display: none; position: fixed; top: 50%; left: 50%; margin: -125px 0 0 -100px; z-index: 10000; }
.dialogTop{width:200px;margin:0 auto;letter-spacing:1px;padding:10px 0; font-size:16px;}
.dialogTop a{ color:#fff;}
.tc-ss{ width:200px; margin:0 auto;}
/*当页面大于1400px时*/
@media (min-width: 1441px) {
.w86{ width:1400px; margin:0 auto; }
}
/*在992和1199像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 992px) and (max-width: 1199px) {
}
/*在768和991像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 768px) and (max-width: 991px){
}
/*在480和767像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 480px) and (max-width: 767px) {
.w86{ width:96%; margin:0 auto;}
.pp01 h1 { line-height:0;}
.pp01 h1 b{ font-size:16px; padding-left:10px; line-height:23px; color:#333; }
.part01{ padding-right:0; padding-bottom:10px;}
.pp01{padding-top:20px;}
.pp01 span{ width:2px; height:23px;}
.xian{-webkit-animation:xian1 2s 1 forwards;-moz-animation:xian1 2s 1 forwards;-o-animation:xian1 2s 1 forwards;animation:xian1 2s 1 forwards;}
.ab01{ width:100%; padding:20px 0; font-size:14px;}
.in-fw-le{ padding-top:20px; width:100%;}
.in-fw-le dl dt{ text-align:left; font-size:18px;}
.in-fw-le dl{ padding:0 2%;}
.in-fw-le dl dd p{ padding:10px 0; text-align: justify;}
.in-fw-le dl dd a{ float:none; padding:5px 10px; font-size:12px;}
.in-fw-ri{ width:100%; margin-top:30px;}
.fw02,.fw03{ top:20px;}
.in-fw02-ri{ width:100%; padding-left:0; margin-top:20px;}
.pro{ top:40px; position:relative;}
.pro-ti{ padding:30px 0;}
.pro-ti h1{ font-size:18px;}
.pro-ti span{ padding:10px 0;}
.pro-ti p{ font-size:14px; line-height:1.5;}
.pro-list{ padding:20px 0;}
.pro-list li{ width:48%;}
.pro-list li:nth-child(2n){ margin-right:0;}
.pro-list li img{ width:50%;}
.pro-list li span{ min-height:95px; padding:0;}
.pro-list li p{ width:100%; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
.in-new-list li{ width:50%;}
.in-new-list li h1{ font-size:14px;}
.txt dl dd p{ margin:20px 0;overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;}
.txt dl{ width:90%; left:5%;}
.txt dl dt{ font-size:16px;}
.map{ width:100%;}
.lx-txt{ position:relative; width:100%; padding:10px;}
.lx01 li:nth-child(1){ margin:0 0 10px 0;}
.ewm{ width:100%; padding-top:20px;}
.banquan{ line-height:2;}
}
/*在小于480像素的屏幕,这里的样式才生效*/
@media (max-width: 479px) {
.w86{ width:96%; margin:0 auto;}
.pp01 h1 { line-height:0;}
.pp01 h1 b{ font-size:16px; padding-left:10px; line-height:23px; color:#333; }
.part01{ padding-right:0; padding-bottom:10px;}
.pp01{padding-top:20px;}
.pp01 span{ width:2px; height:23px;}
.xian{-webkit-animation:xian1 2s 1 forwards;-moz-animation:xian1 2s 1 forwards;-o-animation:xian1 2s 1 forwards;animation:xian1 2s 1 forwards;}
.ab01{ width:100%; padding:20px 0; font-size:14px;}
.in-fw-le{ padding-top:20px; width:100%;}
.in-fw-le dl dt{ text-align:left; font-size:18px;}
.in-fw-le dl{ padding:0 2%;}
.in-fw-le dl dd p{ padding:10px 0; text-align: justify;}
.in-fw-le dl dd a{ float:none; padding:5px 10px; font-size:12px;}
.in-fw-ri{ width:100%; margin-top:30px;}
.fw02,.fw03{ top:20px;}
.in-fw02-ri{ width:100%; padding-left:0; margin-top:20px;}
.pro{ top:40px; position:relative;}
.pro-ti{ padding:30px 0;}
.pro-ti h1{ font-size:18px;}
.pro-ti span{ padding:10px 0;}
.pro-ti p{ font-size:14px; line-height:1.5;}
.pro-list{ padding:20px 0;}
.pro-list li{ width:48%;}
.pro-list li:nth-child(2n){ margin-right:0;}
.pro-list li img{ width:50%;}
.pro-list li span{ min-height:95px; padding:0;}
.pro-list li p{ width:100%; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
.in-new-list li{ width:50%;}
.in-new-list li h1{ font-size:14px;}
.txt dl dd p{ margin:20px 0;overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;}
.txt dl{ width:90%; left:5%;}
.txt dl dt{ font-size:16px;}
.map{ width:100%;}
.lx-txt{ position:relative; width:100%; padding:10px;}
.lx01 li:nth-child(1){ margin:0 0 10px 0;}
.ewm{ width:100%; padding-top:20px;}
.banquan{ line-height:2;}
}
@keyframes icon-bounce {
0%, 100% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
25% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);}
50% { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
75% { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg);-webkit-transform: rotate(5deg); transform: rotate(5deg);}
85% { -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
}
@-webkit-keyframes icon-bounce {
0%, 100% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
25% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);}
50% { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
75% { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg);-webkit-transform: rotate(5deg); transform: rotate(5deg);}
85% { -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
}
@-moz-keyframes icon-bounce {
0%, 100% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
25% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);}
50% { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
75% { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg);-webkit-transform: rotate(5deg); transform: rotate(5deg);}
85% { -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
}
@-o-keyframes icon-bounce {
0%, 100% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
25% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);}
50% { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
75% { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg);-webkit-transform: rotate(5deg); transform: rotate(5deg);}
85% { -moz-transform: rotate(-5deg);-ms-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}
}
@-webkit-keyframes opo {0%{ opacity:0; transform:translateY(-30px);}100% { opacity:1; transform:translateY(0px);}}
@-moz-keyframes opo {0%{ opacity:0; transform:translateY(-30px);}100% { opacity:1; transform:translateY(0px);}}
@-o-keyframes opo {0%{ opacity:0; transform:translateY(-30px);}100% { opacity:1; transform:translateY(0px);}}
@keyframes opo {0%{ opacity:0; transform:translateY(-30px);}100% { opacity:1; transform:translateY(0px);}}
@-webkit-keyframes xian {
0%{height:0;}
100% { height:53px;}
}
@-moz-keyframes xian {
0%{height:0;}
100% { height:53px;}
}
@-o-keyframes xian {
0%{height:0;}
100% { height:53px;}
}
@keyframes xian {
0%{height:0;}
100% { height:53px;}
}
@-webkit-keyframes xian1 {
0%{height:0;}
100% { height:23px;}
}
@-moz-keyframes xian1 {
0%{height:0;}
100% { height:23px;}
}
@-o-keyframes xian1 {
0%{height:0;}
100% { height:23px;}
}
@keyframes xian1 {
0%{height:0;}
100% { height:23px;}
}