.top{
    width: 100%;
    padding-top:47%;
	position: relative;
}
.lona{
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 1;
    background: url(/ys/img/hbg.png);
    left:0;
    top:0;
    z-index:9;
    
}

.logo{ 
    width: 386px;
    height: 60px;
    padding: 20px 0 20px 20px;
    float: left;
}
/* 本例子css NAV */
.snav{
    width:50%;
    height: 100px;
    float: left;
    margin-left:40px;
}
.nav{ height:100px; line-height:100px;  position:relative; z-index:1;  }
.nav a{ color:#fff;  }
.nav .nLi{ float:left; width: calc(100% / 8);  position:relative; display:inline;  }
.nav .nLi h3{width:100%;}
.nav .nLi h3 a{ display:block; font-size:16px; font-weight: 100; width: 100%; text-align: center; }
.nav .nLi h3 a:hover{letter-spacing: 5px;}
.nav .sub{ display:none; width:calc(100% + 60px); left:-30px; top:100px;  position:absolute; line-height:40px; }
.nav .sub li{ zoom:1; }
.nav .sub a{ display:block; text-align: center; background: url(/ys/img/hbg.png); color: #fff;}
.nav .sub a:hover{ color:#fff;background: url(/ys/img/hbg8.png); letter-spacing: 2px;  }
.nav .on h3 a{ color:#fff;   }


.dj{
    width: 140px;
    height: 100px;
    line-height: 100px;
    font-size:16px;
    color: #fff;
    padding-left:20px;
    background:url(/ys/img/dh.png) left center no-repeat;
    color: #fff;
    float: right;
}
.qh{
    width:70px;
    height: 100px;
    float: right;
 }
 .pbnav{ width:63px; height: 50px; float: right; background: url(/ys/img/gd.png) center no-repeat; margin:25px; cursor: pointer; display: none;}
 .pbnr{ display: none;}
/* 本例子css */
.qnav{   height:100px; line-height:100px; position:relative; z-index:1;  }
.qnav a{ color:#fff;  }
.qnav .nLi{ float:left;  position:relative; display:inline;  }
.qnav .nLi h3 a{ padding-left:25px; background: url(/ys/img/dq.png) left center no-repeat; display:block; font-size:14px; font-weight:bold;  }
.qnav .sub{ display:none; width:120px; left:-30px; top:100px;  position:absolute; line-height:40px; }
.qnav .sub li{ zoom:1; }
.qnav .sub a{ display:block; padding:0 10px; background: url(/ys/img/hbg.png); color: #fff; text-align: center;}
.qnav .sub a:hover{ color:#fff;background: url(/ys/img/hbg8.png); letter-spacing: 2px;   }

.banner{
    width:100%;
    height: auto;
    position: absolute;
    left:0; 
    top:0;
}
/* 本例子css banner */
.tempWrap{ width:100% !important;}
.tempWrap ul{ width:200% !important;}
.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,
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(/ys/img/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
.slideBox .prevStop{ display:none;  }
.slideBox .nextStop{ display:none;  }

/* cp */
#cp{ 
    width: 1440px;
    margin:60px auto 0;
    overflow: hidden;
}
.cptop{ 
    width: 100%;
}
.cptop strong{
    display: block;
    width:100%;
    height: 110px;
    background: url(/ys/img/cp.png) center no-repeat;
    font-size:48px; 
    color: #1864ae;
    line-height: 110px;
    text-align: center;
    position: relative;
}
.cptop strong::after{
    content: "";
    width:180px;
    height: 3px;
    background: #1864ae;
    display: block;
    position: absolute;
    left:50%;
    margin-left:-90px;
    bottom: 0;
}
.cptop span{
    margin-top:20px;
    width: 100%; 
    display: block;
    text-align: center;
    font-size:16px;
    color:#a3a3a3;
    line-height: 36px;
}
.cpnav{
    width: 100%; overflow: hidden;
}
.cpnav ul{ width: calc(100% + 30px); overflow: hidden;}
.cpnav ul li{ width: calc((100% / 7) - 30px); float: left; margin-right:30px;margin-top:20px; }
.cpnav ul li a{ display: block; width: 100%; height: 48px; background: #1864ae; color: #fff;  border-radius: 15px; line-height: 48px; text-align:center; font-size:16px; }
.cpnav ul li a:hover{
    letter-spacing: 2px;
}
.cplist{
    width: 100%;
    overflow: hidden;
}
.cplist ul{width: calc(100% + 20px); overflow: auto;}
.cplist ul li { width: calc((100% / 4) - 20px); float: left; margin:20px 20px 0 0; overflow: hidden;}
.cplist ul li a{ display: block; border:1px solid #f0f0f0; width: calc(100% - 2px); overflow: hidden; border-radius: 15px;}
.cplist ul li a:hover{ border:1px solid #1864ae}
.cplist ul li a p{ display: block; overflow: hidden; padding-top:100%; position: relative;}
.cplist ul li a img { position: absolute; left:0; top:0; width: 100%; transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;}
.cplist ul li a:hover img{transform: scale(1.1);}
.cplist ul li a span{ display: block; background: #f0f0f0; text-align: center; height: 40px; line-height: 40px;transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;}
.cplist ul li a:hover span {letter-spacing: 2px;background: #1864ae; color: #fff;}
.cpgd{ width:100%; overflow: hidden; margin-top:20px;}
.cpgd a{display: block; margin:0 auto; width: 420px; height: 60px;  line-height: 60px; background: #f0f0f0; color: #1864ae; font-size:20px; text-align: center; border-radius: 15px; }
.cpgd a:hover{
    background:#1864ae; color: #fff;letter-spacing: 2px;
}
/*-------gs--------*/
#gs{
    margin-top:60px;
    width: 100%;
    height: 740px;
    position: relative;
    overflow: hidden;
    background: #f6f6f6;
}
.gsl{ width:50%; height: 740px; position: absolute; left:0; top:0; background: url(/ys/img/gsimgbg.jpg) left center fixed no-repeat;}
.gsr{ width:720px; height: 740px; position: absolute; left:50%;}

.gstop strong{
    display: block;
    width:calc(100% - 50px);
    height: 110px;
    background: url(/ys/img/gsbg.png) 30px center no-repeat;
    font-size:48px; 
    color: #1864ae;
    line-height: 110px;
    position: relative;
    padding-left:50px;
}
.gstop strong::after{
    content: "";
    width:180px;
    height: 3px;
    background: #1864ae;
    display: block;
    position: absolute;
    left:50%;
    margin-left:-250px;
    bottom: 0;
}
.gsnr{ overflow: hidden;}
.gsnr p{ font-size:16px; width:calc(100% - 40px); padding-left:40px; text-indent: 32px; line-height: 36px; margin-top:36px;}
#zz{
    margin:60px auto 0 ;
    width:1440px;

}
.zztop strong{
    display: block;
    width:100%;
    height: 110px;
    background: url(/ys/img/zzbg.png) center no-repeat;
    font-size:48px; 
    color: #1864ae;
    line-height: 110px;
    text-align: center;
    position: relative;
}
.zztop strong::after{
    content: "";
    width:180px;
    height: 3px;
    background: #1864ae;
    display: block;
    position: absolute;
    left:50%;
    margin-left:-90px;
    bottom: 0;
}
.zztop span{
    margin-top:20px;
    width: 100%; 
    display: block;
    text-align: center;
    font-size:16px;
    color:#a3a3a3;
    line-height: 36px;
}
.zzlist{ width: 100%; overflow: hidden;}
.zzlist ul{ width: calc(100% + 20px); overflow: hidden; margin-top:20px; }
.zzlist ul li{ width: calc((100% / 4) - 22px); margin-top:20px;margin-right:20px; float:left; overflow: hidden; border:1px solid #f0f0f0; border-radius: 15px;transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;cursor:pointer; }
.zzlist p{ width: 100%; overflow: hidden;}
.zzlist p img{ width:100%;transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;}
.zzlist ul li:hover img{transform: scale(1.2);}
.zzlist ul li:hover{ border: 1px solid #1864ae;}
.zzlist span{ display: block; background: #f0f0f0; font-size:16px; font-weight: bold; text-align:center; height:40px; line-height:40px;transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;}
.zzlist ul li:hover span{ background: #1864ae; color: #fff;}

#td{margin-top:60px;width: 100%; overflow: hidden; }
#td ul { width: 100%; overflow: hidden; background: #000;}
#td ul li { width:25%; float: left; padding-top:42%; position: relative; cursor: pointer; }
#td ul li h3{
    position: absolute;
    width:100%; 
    height: 120px;
    left:0; 
    top:60px;
    font-size:120px;
    line-height:120px;
    text-align: center;
    color: #fff;
    z-index: 1;
}
#td ul li p{
    position: absolute;
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-size:36px;
    color: #fff;
    text-align: center;
    z-index: 1;
    left: 0;
    top:200px;
    font-weight: bold;
}
#td ul li span{
    display: block;
    position: absolute;
    width:80%;
    top:260px;
    z-index: 1;
    font-size:20px;
    color: #fff;
    line-height:32px;
    text-indent: 40px;
    left:10%;
}
.tdys1{
    width: 100%;
    background-image: url(/ys/img/01bg.jpg) ;
    background-position:center center;
    background-size: 100%;
    position: absolute;
    left:0;
    top:0;
    padding-top:170%;
    z-index: 0;
    opacity: 0.5;
    transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;
}
.tdys2{
    width: 100%;
    background-image: url(/ys/img/02bg.jpg) ;
    background-position:center center;
    background-size: 100%;
    position: absolute;
    left:0;
    top:0;
    padding-top:170%;
    z-index: 0;
    opacity: 0.5;
    transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;
}
.tdys3{
    width: 100%;
    background-image: url(/ys/img/03bg.jpg) ;
    background-position:center center;
    background-size: 100%;
    position: absolute;
    left:0;
    top:0;
    padding-top:170%;
    z-index: 0;
    opacity: 0.5;
    transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;
}
.tdys4{
    width: 100%;
    background-image: url(/ys/img/04bg.jpg) ;
    background-position:center center;
    background-size: 100%;
    position: absolute;
    left:0;
    top:0;
    padding-top:170%;
    z-index: 0;
    opacity: 0.5;
    transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;
}

#td ul li:hover .tdys1{ opacity: 0.2; background-size: 120%; }
#td ul li:hover .tdys2{ opacity: 0.2;background-size: 120%;}
#td ul li:hover .tdys3{ opacity: 0.2;background-size: 120%;}
#td ul li:hover .tdys4{ opacity: 0.2;background-size: 120%;}

/*--------新闻中心------------*/
#xw{
    width: 1440px;
    margin:60px auto 0;
    overflow: hidden;
}
.xwtop strong{
    display: block;
    width:100%;
    height: 110px;
    background: url(/ys/img/zzbg.png) center no-repeat;
    font-size:48px; 
    color: #1864ae;
    line-height: 110px;
    text-align: center;
    position: relative;
}
.xwtop strong::after{
    content: "";
    width:180px;
    height: 3px;
    background: #1864ae;
    display: block;
    position: absolute;
    left:50%;
    margin-left:-90px;
    bottom: 0;
}
.xwlist{ width: 100%; overflow: hidden; margin-top:30px;}
.xwl{
    width: 650px;
    float: left;
    overflow: hidden;
}
.xwl a{ width: 100%; overflow: hidden;}
.xwl p{ width:100%; overflow: hidden; border-radius: 10px;}
.xwl h3{ margin-top:20px; font-size:20px; line-height: 36px; width: 100%; color: #1864ae; }
.xwl p img{ width: 100%;
    transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;
}
.xwl a:hover img{transform: scale(1.2);}
.xwl span{ display: block; width: 100%; height:48px; line-height:48px; color: #8c8c8c; font-size:14px;}
.xwl strong{ display: block; width: 100%; height: 72px; line-height: 24px;color: #8c8c8c; font-size:14px; font-weight: 100;}
.xwr{ width: 760px; float: right; overflow: hidden;}
.xwr ul{ width: 100%; overflow: hidden; margin-top:-15px;}
.xwr ul li{ padding:15px 0; border-bottom:1px solid #f0f0f0;}
.xwr ul li a{ display: block; overflow: hidden;}
.xwr ul li a p{ width:225px; display: block; float: left; border-radius: 10px; overflow: hidden;}
.xwr ul li a p img{ width:100%; display: block;
    transition: all 0.6s ease;-moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;
}
.xwr a:hover img{transform: scale(1.2);}
.xwrl{
    width:calc(100% - 245px);
    float: right;
}
.xwrl h3{
    font-size:20px;
    color: #1864ae;
}
.xwrl span{ display: block; width: 100%; height:48px; line-height:48px; color: #8c8c8c; font-size:14px;}
.xwrl strong{ display: block; width: 100%; height: 72px; line-height: 24px;color: #8c8c8c; font-size:14px; font-weight: 100;}
/*-------合作伙伴-------*/
#hzhb{
    margin:60px auto 0;
    overflow: hidden;
    width:1440px;
}
.hbtop strong{
    display: block;
    width:100%;

    height: 110px;
    background: url(/ys/img/zzbg.png) center no-repeat;
    font-size:48px; 
    color: #1864ae;
    line-height: 110px;
    text-align: center;
    position: relative;
}
.hbtop strong::after{
    content: "";
    width:180px;
    height: 3px;
    background: #1864ae;
    display: block;
    position: absolute;
    left:50%;
    margin-left:-90px;
    bottom: 0;
}
.hblist{ margin-top:30px;}
#marquee1{width:100%;overflow:hidden; height:86px;}
#marquee1 ul li{float:left; margin:0 10px; width:calc((1440px / 6) - 22px); border:1px solid #8c8c8c;}
#marquee1 ul li img{display:block; width:100%;}