﻿#banner{
    width: 100%;
    background: #f2f2f2;
    overflow: hidden;
}
/* 本例子css */
.slideBox{ width:100%; height:auto; margin:0 auto; overflow:hidden; position:relative; }
.slideBox .hd{ width:100%; height:16px; overflow:hidden; position:absolute; bottom:20px; z-index:1; }
.slideBox .hd ul{ overflow:hidden;  text-align: center; width:100% !important;  }
.slideBox .hd ul li{display:inline-block; margin:0 5px; width:16px; height:16px; background:#fff; cursor:pointer;border-radius: 8px; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0;   }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:100%; display:block;  }

/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../image/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }

.slideBox .next{ position:absolute; right:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../image/slider-arrow.png) 8px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
.slideBox .prevStop{ display:none;  }
.slideBox .nextStop{ display:none;  }


#cp{
    max-width:1440px;
    margin:0 auto;
}
.sytop{
    width:100%;
    margin-top:60px;
}
.sytop p{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size:72px;
    text-align: center;
    line-height:64px;
    height:64px;
    overflow: hidden;
}
.sytop p span{
    color: #2daccc;
}
.sytop h3{
    font-size:24px;
    text-align: center;
    font-weight: 400;
}
.sytop strong{
    font-size:14px;
    text-align: center;
    display:block;
    font-weight: 400;
    color: #666666;
}
.cpfl{max-width: 1440px; margin-top:30px;}
.cpfl p{
    box-shadow: 0 0 15px rgb(0 0 0 / 15%);
    padding:20px;
    font-size:16px;
    text-align: center;
}
.cpfl p a{
    margin:0 20px;
    display: inline-block;
}
.cpnr{
    max-width:1440px;
    margin-top:30px;
}
.cpnr ul{
    width:calc(100% + 20px);
    margin-left:-10px;
    overflow: hidden;
}
.cpnr ul li{
    float: left;
    width:calc((100% / 4) - 20px);
    overflow: hidden;
    padding:10px;
}
.cpnr ul li a{
    width:100%;
}
.cpnr ul li a p{
    width:calc(100% - 10px);
    border:5px solid #f1f1f1;
    padding-top:calc(100% - 10px);
    position: relative;
    transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
    overflow: hidden;
}
.cpnr ul li a p img{
    width:100%; height:100%;

    position: absolute; top:0;transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}
.cpnr ul li a span{
    display: block;
    text-align: center;
    font-size:14px;
    height:35px;
    line-height:35px;
}
.cpnr ul li a:hover p{
    border:5px solid #2daccc;
    box-shadow: 0 0 10px rgb(45 172 204 / 50%);
    
}
.cpnr ul li a:hover p img{
    transform:scale(1.1);
    
}

#td{
    width:100%;
    overflow: hidden;
    background: url(../image/bgg.jpg) center top no-repeat;
    height:683px;
    margin-top:30px;
}
.tdtop{
    width:100%;
    overflow: hidden;
    margin-top: 60px;
}
.tdtop p{
    font-weight: bold;
    font-size:48px;
    text-align: center;
}
.tdtop span{
    height:42px;
    line-height:42px;
    background: url(../image/xxx.jpg) center no-repeat;
    display: block;
    width: 100%;
    text-align: center;
    font-size:20px;
    color: #666;
}
.tdnr{
    max-width:1440px;
    overflow: hidden;
    margin:34px auto 0;
}
.tdnr ul{
    width:calc(100% + 32px);
    overflow: hidden;
    margin:0 auto;
}
.tdnr ul li{
    height:402px;
    width:calc((100% / 4) - 32px);
    float: left;
    margin-right:32px;
    background:#fff;
}
.tdnrtop{
    margin:30px 25px 0;
    border-bottom:1px dashed #666;
}
.tdnrtop strong{
    font-size:32px;
    line-height: 48px;
    color: #333;
}
.tdnrtop span{
    font-size:14px;
    display: block;
    color: #666666;
    margin-bottom:15px;
    height:16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    word-break: break-all;
}
.tdnrbt{ 
    margin:15px 25px 0;
}
.tdnrbt span{
    display: block;
    font-size:14px;
    line-height:26px;
    color: #666;
    height:52px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    word-break: break-all;
}
.tdnrbt p{
    width:100%;
    margin-top:10px;
}
.tdnrbt p img{
    width:100%;
}

#gywm{
    width:100%;
    overflow: hidden;
}
.gynr{
    width: 100%;
    height: 787px;
    margin-top: 60px;
    overflow: hidden;
    position: relative;
}
.gynrl{
    position: absolute;
    width:940px;
    left:50%;
    margin-left:-720px;
    background: rgb(255 255 255 / 85%);
    z-index: 1;
}
.gynrl h3{
    margin:70px 0 0 0;
    font-size:30px;
    line-height:48px; 
}
.gynrl span{
    font-size:18px;
    color: #999;
    display: block;
    margin-top:10px;
}
.gynrl strong{
    font-size:16px;
    line-height:36px;
    color: #444;
    margin-top:40px;
    text-indent: 2ch;
    padding-right:30px;
    font-weight: 400;
    display: block;
}
.gynrl ul{
    width:100%;
    overflow: hidden;
    margin: 30px 0 ;
}
.gynrl ul li{
    width:calc((100% / 3 ) - 40px);
    float: left;
    margin-right:30px;
    border:5px solid #f1f1f1;
}
.gynrl ul li p{
    width:100%;
    padding-top:66.6666%;
    position: relative;
}
.gynrl ul li p img{ width:100%; height: 100%; position: absolute; top:0;}
.gynrr{
    position: absolute;
    width:960px;
    right:0;
    top:0;
}
.gynrgd{
    position: absolute;
    width:124px;
    height:124px;
    right:960px;
    bottom:0;
}
.gynrgd a{
    width:124px;
    display: block;
    height:124px;
    background: #2daccc;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color:#fff;
    font-size:24px;
    line-height:124px;
    text-align: center;
}
.gynrgd a:hover{
    letter-spacing: 3px;
}
#news{
    max-width:1440px;
    margin:0 auto;
}
.xwnr{
    margin-top:60px;
    width:100%;
}
.xwnrt{
    width:100%;
    overflow: hidden;
}
.xwnrt a{
    display: block;
    overflow: hidden;
    width:100%;
    background: #f6f6f6;
}
.xwl{
    width:600px;
    float: left;
}
.xwl p{
    padding-top:66.6666%;
    width:100%;
    position: relative;
    overflow: hidden;
}
.xwl p img{
    position: absolute;
    top:0;
    width:100%;
    height:100%;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}
.xwnrt a:hover img{
    transform: scale(1.1);
}
.xwr{
    width:calc(100% - 720px);
    padding:0 60px;
    float: right;
}
.xwr h3{
    padding-top:50px;
    font-size:24px;
    height:30px;
    line-height:30px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    word-break: break-all;
}
.xwr span{
    padding-top:30px;
    display: block;
    font-size:14px;
    color: #666;
}
.xwr p{
    font-size:16px;
    display: block;
    line-height:30px;
    margin-top:20px;
    width:100%;
    height:90px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    word-break: break-all;
}
.xwr strong{
    display: block;
    margin-top: 30px;
    width:180px;
    height:48px;
    line-height:48px;
    font-weight: 400;
    border-radius: 24px;
    background: #fff;
    text-align: center;
    font-size:16px;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}
.xwnrt a:hover strong{
    background:#2daccc;
    color: #fff;
}
.xwnrb{
    max-width: 1440px;
}
.xwnrb ul{
    width:calc(100% + 30px);
    overflow: hidden;
    margin-left:-15px;
    padding-bottom:15px;
}
.xwnrb ul li{
    width:calc((100% / 2) - 32px);
    float: left;
    border:1px solid #dfdfdf;
    margin:30px 15px 0 15px;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
    overflow: hidden;
}
.xwnrb ul li:hover{
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
.xwnrl{
    width:80px;
    overflow: hidden;
    float: left;
}
.xwnrl strong{
    display: block;
    font-size: 52px;
    line-height:60px;
    color: #666;
}
.xwnrl span{
    display: block;
    font-size:16px;
    color: #999;
}
.xwnrr{
    width:calc(100% - 80px);
    float: right;
}
.xwnrr h3{
    font-size:18px;
    line-height: 48px;
    height:48px;
    font-weight: bold;
    display: block;
    position: relative;
    overflow:hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  word-break: break-all;
}
.xwnrr h3:before{
    content:"";
    display: block;
    height:2px;
    width:100%;
    position: absolute;
    left:0;
    bottom:0px;
    background:#666;
    transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}
.xwnrr h3:after{
    content:"";
    display: block;
    height:2px;
    width:100px;
    position: absolute;
    left:0;
    bottom:0px;
    background:#2daccc;
    transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}
.xwnrb li a{
    display: block;
    overflow: hidden;
    width:calc(100% - 50px);
    padding:25px;
}
.xwnrb li:hover h3:after{
    width:100%;
}
.xwnrr p{
    font-size:14px;
    line-height:30px;
    height:60px;
    overflow:hidden;
    color:#666;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  word-break: break-all;
}
#link{
    width:100%;
    background: #089fc5;
    padding:25px 0;
    margin-top:45px;
}
#link p{
    max-width:1280px;
    margin:0 auto;
    background: url(../image/link.jpg) left center no-repeat;
    height:48px;
    padding-left:160px;

}
#link p a{ margin-left:15px; color: #fff; line-height:24px;}
#link p a:hover{ opacity: 0.7;}
@media screen and (max-width:1580px){
    .gynrl{ margin-left:-600px;}
}
@media screen and (max-width:1460px){

}
@media screen and (max-width:1360px){
    .gynr{position:static; height: auto;}
    .gynrl{ width:95%; left:0; margin-left:auto; padding:0 2.5%; position:static;}
    .gynrl h3{ margin:0 0 0 0;}
    .gynrl ul{ width:calc(100% + 20px)}
    .gynrl ul li{ width:calc((100% / 3) - 30px); margin-right:20px;}

    .gynrr{ display: none;}
    .gynrgd{position:static; width:95%; margin:0 auto;}
    .gynrgd a{ width:100%;}
    #news{ width:95%;}
    
}
@media screen and (max-width:1200px){
    .cpfl{ width:95%; margin:30px auto 0;}
    .cpnr{ width:95%; margin:0 auto 0;}
    .cpnr ul li{ margin-top:30px;}

#td{ height:auto; background: #f5f5f5; padding-bottom:60px;}
.tdnr {width:95%;}
.tdnr ul li{
    width: calc((100% / 2) - 32px);height:auto; padding-bottom:30px; margin-bottom:20px;
}
.tdnrbt span{ height:52px; overflow: hidden;}


}
@media screen and (max-width:992px){
    .cpfl p a{ margin:10px 20px;}
    .cpnr{ width:95%; margin: 30px auto 0;}
    .cpnr ul li{ width:calc((100% / 2) - 20px); }
    .xwl{ width:400px;}
    .xwr{ width:calc(100% - 480px); padding:0 30px;}
    .xwr h3{ padding-top:30px;}
    .xwr span{ padding-top:20px;}
    .xwr strong{ display: none;}

}
@media screen and (max-width:768px){
    .slideBox{ width:120%; margin-left:-10%;}
    .slideBox .next{ right:13%;}
    .slideBox .prev{ left: 13%;}
    .cpnr ul li{ margin-top:10px;}
    .xwl{ width:100%; float: none;}
    .xwr{width:calc(100% - 40px) ; float: none; padding:0 20px;}
    .xwr h3{ padding-top:15px;}
    .xwr span{ padding-top:15px;}
    .xwr p{ margin-top:15px; margin-bottom:15px; font-size:13px;}
    .xwnrb ul li{width:calc(95% - 2px); margin:15px auto 0; float: none;}

}
@media screen and (max-width:576px){
    .tdnr ul{ width:100%;}
    .tdnr ul li{
        width:100%; 
    }
    .tdtop span{ font-size:14px;}
    .xwnrb{ width:100%; overflow: hidden;}
    .xwnrb ul{ width: calc(100% + 5%);
        overflow: hidden;
        margin-left: -2.5%;
        padding-bottom: 2.5%;}
        .gynrl h3{ font-size:24px;}
        .gynrl span{ font-size:14px;}
        .xwnrl{ display: none;}
        .xwnrr{ width:100%;}
}