@charset "utf-8";

* { padding: 0; margin: 0; list-style: none; text-decoration: none; border: none; outline: none;}
html, body {
    height: 100%;
    font: 12px "宋体";
    background: url(../img/body.jpg) center fixed;
    background-size:cover;
    background-position:0px 0px;
}
/*scroll*/
::-webkit-scrollbar { width: 8px;}
::-webkit-scrollbar-track { border-radius: 6px; background-color: #ddd;}
::-webkit-scrollbar-thumb {	border-radius: 6px; background-color: rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:active { background-color: rgba(0,0,0,.6);}
::selection { background: #669900; color: white;}
.clearfix { zoom: 1;}
.clearfix:after { content: ''; display: block; clear: both;}

.header, .container, .section-two .item, .footer { min-width: 1200px;}

/*header*/
.header { height: 100%; background: rgba(0,0,0,.35); overflow: hidden;}
/*menu*/
.header .ment-box { width: 32px; height: 32px; position: fixed; right: 2%; top: 4%; z-index: 90; cursor: pointer;}
.header .ment-text { position: absolute; right: 120%; top: 0; height: 100%; line-height: 32px; font-size: 22px; 
	font-weight: bold; color: white;}
.header .menu-icon { background: url(../img/icon-nav.png) center; display: block; height: 100%;}
.menuplay { animation: icon-menu 2s infinite; -webkit-animation: icon-menu 2s infinite;}
@keyframes icon-menu { 100% { transform: rotateY(360deg);}}
@-webkit-keyframes icon-menu { 100% { transform: rotateY(360deg);}}

.CorpTitle{ font-size:22px; font-weight:bold; color:White; position: fixed; top: 4%; right:140px;  letter-spacing:8px;  }
/*music*/
.music{position:fixed;display:inline-block;height:32px;width:280px;background:rgba(5, 5, 5,0.1);text-align:center;line-height:32px;margin:10px 0 0 10px;border-radius:8px;
color:white; z-index:99;}
.music a{display:inline-block;height:32px;padding:0 15px;margin-left:10px;border-radius:5px;background:rgba(5,5,5,0.2);color:green;transition:all linear .2s}
.music a:nth-child(2){display:none;height:32px;padding:0 15px;margin-left:10px;border-radius:5px;background:rgba(5,5,5,0.2);color:green}
.music a:hover{background:yellow;color:rgb(174, 84, 9)}
/*about*/
.header .about { width: 500px; margin: 17% auto 0; text-align: center; color: white; animation: about 1s; 
	-webkit-animation: about 1s;}
@keyframes about { 0% { margin-top: 20%; opacity: 0.3;} 100% { margin-top: 17%; opacity: 1;}}
@-webkit-keyframes about { 0% { margin-top: 20%; opacity: 0.3;} 100% { margin-top: 17%; opacity: 1;}}
/*logo*/
.header .about .logo { width: 200px; padding: 18px 0; margin: 0 auto; font: bold 34px "宋体";border-radius:5px;
border-bottom: 2px solid #eee; border-top: 2px solid #eee; animation: logo 1s; -webkit-animation: logo 1s; 
cursor: default;}
@keyframes logo { 0% { width: 500px;} 100% { width: 200px;}}
@-webkit-keyframes logo { 0% { width: 500px;} 100% { width: 200px;}}
.header .about .logo a { color: white; cursor: default;}
/*desc*/
.header .about .desc { height: 120px; line-height: 120px; font-size: 14px; letter-spacing: 1px;}
/*btn*/
.header .about .btn { width: 130px; padding: 10px 0; margin: 0 auto; background: #EE4833; cursor: pointer; 
	letter-spacing: 1px; font-size: 14px; position: relative; transition: all .5s;}
.header .about .btn:hover { background: #eee; color: #000;}
.header .about .btn span,/*about icon*/
.header .close span,/*aside*/
.footer .calltop span /*backTop*/{ position: absolute; background: #fff; transition: all .3s;}
.header .about .btn-t,
.header .close .close-t,
.footer .calltop .calltop-t { width: 0; height: 1px; left: -500%; top: 0;}
.header .about .btn-r,
.header .close .close-r,
.footer .calltop .calltop-r { width: 1px; height: 0; right: 0; top: -500%;}
.header .about .btn-b,
.header .close .close-b,
.footer .calltop .calltop-b { width: 0; height: 1px; right: -500%; bottom: 0;}
.header .about .btn-l,
.header .close .close-l,
.footer .calltop .calltop-l { width: 1px; height: 0; left: 0; bottom: -500%;}
.header .about .btn:hover .btn-t,
.header .close:hover .close-t,
.footer .calltop:hover .calltop-t { left: 0; width: 100%;}
.header .about .btn:hover .btn-r,
.header .close:hover .close-r,
.footer .calltop:hover .calltop-r { top: 0; height: 100%;}
.header .about .btn:hover .btn-b,
.header .close:hover .close-b,
.footer .calltop:hover .calltop-b { right: 0; width: 100%;}
.header .about .btn:hover .btn-l,
.header .close:hover .close-l,
.footer .calltop:hover .calltop-l { bottom: 0; height: 100%;}
/*btn-down*/
.header .about .btn-down { width: 32px; height: 24px; background: url(../img/move-up.png) center; margin: 50px auto 0; 
	cursor: pointer; animation: icon-down 2s infinite linear; -webkit-animation: icon-down 2s infinite linear;}
@keyframes icon-down { 0% { transform: translateY(0);} 50% { transform: translateY(20px);}}
@-webkit-keyframes icon-down { 0% { transform: translateY(0);} 50% { transform: translateY(20px);}}
/*aside*/
.header .aside { width: 220px; height: 100%; position: fixed; top: 0; right: -220px; z-index: 100000000; background: #000;}
.header .close { width: 100px; padding: 6px 0; position: absolute; bottom: 10%; left: 50%; margin-left: -50px;
	text-align: center; background: orange; color: white; font-size: 14px; transition: all .3s;}
.header .close span,
.header .close:hover { background: #666; color: #000;}
/*list*/
.header .aside .list { margin-top: 50px; position: relative;}
.header .aside .list li { height: 44px; line-height: 44px; text-indent: 6em; font-size: 14px; position: relative; z-index: 2;}
.header .aside .list li.last { width: 100%; background: green; position: absolute; left: 0; top: 0; z-index: 1;}
.header .aside .list li a { display: block; color: white; letter-spacing: 1px;}
/*mask*/
.header .mask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 10000000; 
	background: rgba(0,0,0,.7); display: none;}

/*container*/
.container { color: white;}
/*one*/
.section-one { padding: 50px 0; text-align: center; background: rgba(5,5,5,.8);}
.section-one .photoHead { width: 100px; height: 100px; display: block; margin: 0 auto; border-radius: 50%;
 border: 1px solid #999; background: url(../img/beauty.jpg) center; background-size: 100%; box-shadow: 0 0 40px #000;
 transition: all .3s;}
.section-one .photoHead:active { transform: scale(1.3);}
.header .introduce { display:block;color:yellow;font-size: 16px; overflow:hidden;position:absolute;float:left;left:20px;bottom:30px;text-shadow:1px 3px 5px #000;}
.section-one h1{ font-size: 18px; margin-top: 10px;}
.section-one h2 { font-size: 16px; margin-top: 50px;}
.section-one h3 {  border-bottom: 1px solid #fff; display: inline-block; padding: 20px 10px 20px;}
.section-one .desc { padding-top: 20px; font-size: 14px;}
/*two*/
.section-two { width: 100%; height: 2310px;} /* 如果产品加1个 这里就要追加 330px 的高度*/
.section-two .item { height: 330px; width: 100%; overflow: hidden;}
.section-two .item:nth-child(2n){ background: rgba(0,0,0,.9);}
.section-two .item:nth-child(2n+1){ background: rgba(155,0,0,.8);}
.section-two .item img { height: 330px; transition: all .6s;}
.section-two .item img:hover { transform: scale(1.2);}
/*左 图*/
.section-two .item .item-img-l { float: left; overflow: hidden;}
/*右 图*/
.section-two .item .item-img-r { float: right; overflow: hidden;}
/*左右 内容*/
.section-two .item .item-con-l,
.section-two .item .item-con-r { float: left;}
/*content*/
.section-two .article { position: relative;}
.section-two .article h3 { font-size: 22px; line-height: 1.8em; letter-spacing: 2px;}
.section-two .article .desc-1 { font-size: 22px; line-height: 2em;}
.section-two .article .desc-2 { width: 440px; line-height: 1.6em;}
/*右 内容*/
.section-two .item-con-r .article { padding: 100px 0 0 120px; left: 100px;}
/*左 内容*/
.section-two .item-con-l .article { padding: 100px 0 0 220px; left: -100px;}
/*three*/
.section-three { padding: 50px 0 0; background: #515294;}
.three-title { text-align: center; font-size: 22px; letter-spacing: 2px;}
.three-desc { text-align: center; line-height: 1.8em; width: 600px; margin: 40px auto;}
.three-list { width: 800px; height: 400px; margin: 0 auto;}
.three-list li { float: left; width: 360px; height: 160px; padding: 40px 0 0 40px; cursor: move;}
.three-list li:nth-child(1) { background: #4E4F8C;}
.three-list li:nth-child(2) { background: #4A4C89;}
.three-list li:nth-child(3) { background: #474883;}
.three-list li:nth-child(4) { background: #45467F;}
.three-list-title { font-size: 16px; font-weight: bold; letter-spacing: 1px;}
.three-list-title a { color: #fff;}
.three-list-desc { line-height: 1.8em; padding: 10px 50px 0 0;}

/*fous*/
.section-fous { position: relative; background: rgba(0,0,0,.8);}
.fous-box { width: 760px; height: 230px; padding-top: 70px; margin: 0 auto;}
.fous-left { width: 500px; float: left; margin-left:80px;}
.fous-left .fous-title { font-size: 20px; letter-spacing: 2px;}
.fous-left .fous-desc { padding-top: 15px; line-height: 1.8em; font-size:13px;}
.fous-right { width: 200px; height: 100%; float: right;}
.fous-right p { width: 200px; height: 40px; line-height: 40px; text-align: center; letter-spacing: 1px;
	box-sizing: border-box; transition: all .5s; cursor: pointer;}
.fous-right p.one { background: #EE4833;}
.fous-right p.one:hover { background: red;}
.fous-right p.two { border: 2px solid #eee; margin-top: 26px; position: relative;}
.fous-right p.two span { transition: all .3s; position: absolute; background: yellow;}
.fous-right p.two .two-t { width: 0; height: 2px; left: -2px; top: -2px;}
.fous-right p.two .two-r { width: 2px; height: 0; right: -2px; top: 0;}
.fous-right p.two .two-b { width: 0; height: 2px; right: -2px; bottom: -2px;}
.fous-right p.two .two-l { width: 2px; height: 0; left: -2px; top: 0;}
.fous-right p.two:hover .two-t,
.fous-right p.two:hover .two-b { width: 102%;}
.fous-right p.two:hover .two-l,
.fous-right p.two:hover .two-r { height: 102%;}
/*section-five*/
.section-five { background: rgba(0,10,0,.5); padding: 100px 0;}
.section-five .word { text-align: center; font-size: 30px; font-weight: bold; padding-bottom: 80px;}
.section-five .containar { width: 880px; margin: 0 auto; position: relative;}
/*btn*/
.containar .btn { width: 40px; height: 40px; line-height: 40px; text-align: center; background: orange; 
	position: absolute; top: 50%; margin-top: -20px; color: #fff; 
	font-weight: bold; transition: all .4s; border-radius: 50%;}
.containar .btn:hover { color: #000;}
.containar .btn:active { background: yellow;}
.containar .prev { right: 101%;}
.containar .next { left: 101%;}
/*list*/
.containar .list-box { overflow: hidden;}
.containar .list { width:1800px; margin-left: -20px; position: relative; overflow: hidden;}
.container .list li { width: 280px; height: 180px; float: left; margin-left: 20px; position: relative; overflow: hidden;
font-size: 22px; line-height: 180px; text-align: center; letter-spacing: 1px;}
.container .list li span { width: 100%; height: 100%; position: absolute; left: 100%; top: 100%; background: rgba(0,0,0,.5);}
.container .list li a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; color: #fff;}
.container .list li.pic-1 { background: url(../img/picc-1.jpg); background-size: 100%;}
.container .list li.pic-2 { background: url(../img/picc-2.jpg); background-size: 100%;}
.container .list li.pic-3 { background: url(../img/picc-3.jpg); background-size: 100%;}
.container .list li.pic-4 { background: url(../img/picc-4.jpg); background-size: 100%;}
.container .list li.pic-5 { background: url(../img/picc-5.jpg); background-size: 100%;}
.container .list li.pic-6 { background: url(../img/picc-6.jpg); background-size: 100%;}

/*footer*/
.footer {
    height: 400px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: url(../img/index-bg-3.jpg);
    animation: footer 300s infinite linear;
    -webkit-animation: footer 300s infinite linear;
}
@keyframes footer {0% { background-position: 0 bottom;} 100% { background-position: 9999px bottom;}}
@-webkit-keyframes footer {0% { background-position: 0 bottom;} 100% { background-position: 9999px bottom;}}
.footer:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); content: '';}
/*居中 .footer-wrap*/
.footer-wrap { width: 68%; margin: 0 auto; padding-top: 120px; position: relative; z-index: 2;}
/*二维码*/
.footer-qrcode { float: left; border-right: 1px solid #aaa; padding: 0 100px 0 0; width: 140px; height: 140px;}
.footer-qrcode .qrcode { background: url(../img/qrcode.png) no-repeat; background-size: 100%; height: 100%; display: block;}
/*about*/
.footer-about { float: left; margin-left: 100px; padding-top: 10px;}
/*about-title*/
.about-title { padding-bottom: 25px; font-size: 24px; letter-spacing: 1px;}
/*about-list*/
.about-list { height: 50px; border-top: 1px solid #ccc; padding-top: 30px; width: 250px;}
.about-list a { display: inline-block; width: 50px; height: 50px; margin: 0 15px; border-radius: 50%; position: relative;}
.about-list a.qq { background: url(../img/qq_btn_normal.png) no-repeat center; background-size: 100%;}
.about-list a.sina { background: url(../img/sina_btn_normal.png) no-repeat  center; background-size: 100%;}
.about-list a.weixin { background: url(../img/weixin_btn_normal.png) no-repeat  center; background-size: 100%;}
.about-list a i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0;
	transition: all .4s;}
.about-list a .qq-icon { background: url(../img/qq_btn_hover.png) no-repeat center; background-size: 100%;}
.about-list a .sina-icon { background: url(../img/sina_btn_hover.png) no-repeat center; background-size: 100%;}
.about-list a .weixin-icon { background: url(../img/weixin_btn_hover.png) no-repeat center; background-size: 100%;}
.about-list a:hover i { opacity: 1; transform: rotate(360deg);}
/*copyright*/
.footer .copyright { text-align: center; letter-spacing: 1px; color: #eee; padding-top: 30px; position: relative; z-index: 2;}
.footer .copyright1 { text-align: center; letter-spacing: 1px; color: #eee; padding-top:10px; position: relative; z-index: 2;}
    .footer .copyright1 a {
     color:#eee;
    }
    /*calltop*/
    .footer .calltop {
        padding: 8px 10px;
        text-align: center;
        color: white;
        background: orange;
        letter-spacing: 1px;
        position: fixed;
        right: 5%;
        bottom: 8%;
        z-index: 2;
    }
.footer .calltop span { background: orange;}
/*进度条 超人*/
.footer .superman { width: 80px; height: 100px; position: fixed; left: 0; bottom: -100%;
background: url(../img/man.png); background-size: 100%;}