﻿/*初始化样式*/
html{margin:0;padding:0;border:0;}
body,div,span,object,iframe,h1,h2,h3,h4,p,blockquote,pre,a,address,code,b,em,img,
dl,dt,dd,ol,ul,li,fieldset,form,label,footer,
header,hgroup,nav,section
{margin:0;padding:0;border:0;}
body{background:#fff;color:#666;position:relative;font:12px/1.5 Microsoft YaHei,arial,宋体,sans-serif;vertical-align:baseline;width:100%;overflow-x:hidden;}
a{text-decoration:none;outline:none;}
a:link{color:#666;}
a:visited{color:#666;}
a:hover,a:active,a:focus{color:#1d2a57;text-decoration:none;outline:none;}

input{padding:0;margin:0;font-family:'Microsoft YaHei';}
img{border:none;background:none;vertical-align:middle;}
ul,ol,li{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0}
table, th, td {vertical-align: middle}
.clearfix:after{content: ".";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}
.clearfix{zoom:1}
.clearboth{height:0px;line-height:0px;overflow:hidden;clear:both;font-size:0px;}

h1,h2,h3,h4{font-size:12px;font-weight:bold;}
hr {border: 0;border-top:1px solid #ccc;height:0;}
dt{font-weight: normal;}

/*----- Common css ------*/
.fl{float:left;}
.fr{float:right;}
.di{_display:inline;}
.fwn{font-weight:normal;}
.dib{*display:inline;_zoom:1;_display:inline;_font-size:0px;}


/*滚动*/
#demo{overflow:hidden;width:100%;margin:0 auto;}
#indemo {float: left;width:800%!important;}
#demo1 {float: left;}
#demo2 {float: left;}

#m_demo{overflow:hidden;width:92%;margin:0 auto;}
#m_indemo {float: left;width:800%!important;}
#m_demo1 {float: left;}
#m_demo2 {float: left;}


.wh{margin:0 9.7%;}
.pos{position: relative;width: 1920px;left: 50%;margin-left: -960px;}

.com-img{ display:inline; overflow:hidden;margin:0 auto;display: table;}
.com-img img{ transition:all 0.8s; -webkit-transition:all 0.8s; -moz-transition:all 0.8s; -o-transition:all 0.8s;}
.com-img:hover img{transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);-ms-transform:scale(1.2);}



.roll_product {float: left;}

.plist{margin-top: 56px;}
.plist li{margin-right: 15px;margin-bottom: 15px;}
.plist li:nth-child(3n){margin-right: 0;}
.plist li a.img{border:1px solid #e5e5e5;display: block;}
.plist li a.img img{width: 388px;height: 388px;}
.plist li h3 a{display: block;color: #fff;font-size: 16px;font-weight: normal;}

/*头部样式*/
.top1{height: 27px;background: #e6e6e6;color: #595959;line-height: 27px;overflow: hidden;font-size: 13px;}
.top2{height: 112px;background: rgba(24,26,26,.8);width: 100%;position: absolute;top:0;z-index: 9999999;}
#header{width:1000px;margin:0 auto;}
.logo{float:left;line-height: 112px;}
.top2 .dh{font-size: 18px;line-height: 112px;letter-spacing: 1px;color: #ffffff;padding-left: 34px;background: url(../image/tel.png) no-repeat left center;}

.topLink{float:left;text-align:right;position: relative;z-index: 9999;}
.translate{width:100px;position: absolute;left: 0;top:10px;z-index: 9999;}
.tran-in{left:120px;}
.translate li{border: 1px dashed #cccccc;line-height: 26px;text-align: left;background: #fff;}
.translate li a{display: block;padding-left: 10px;background: url(404.png) no-repeat 88% 11px;}
.translate li a:hover{text-decoration: none;color:#275cea;cursor: pointer;}
.translate-en{display: none;padding: 6px;padding-top:0px;}
.translate li .translate-en a{padding-left: 0px;text-align: center;background: #fff;border-bottom: 1px solid #cccccc;}
.translate li .translate-en a:hover{font-weight: bold;}

.topLink .f_count{color:#ff0000;font-size:13px;font-weight:bold;}
.topLink .k1 a{color: #595959;}
.topLink .k2{color:#074b91;font-size:14px;font-family:"微软雅黑";}



/*热门搜索*/
.sou{margin: 15px 0;display:none;}
.sou #formsearch{float:right;}
.hotSearch{float:left;font-weight:normal;}
#search-type{float: left;width:100px;height: 24px;border: 1px solid #c8c8c8;margin-right: 5px;}


/*搜索和热门搜索*/
.hotSearch a{margin-right:6px;}
.sou #formsearch input{height:22px;background:#fff;border:1px solid #c8c8c8;line-height:22px;}
.sou #formsearch input#keyword{height:22px;line-height:22px;padding-left:4px;color:#666;}
.sou #formsearch input#s_btn{width:46px;height:24px;line-height:24px;text-align:center;background-color:#1d2a57;color:#fff;border:none;cursor:pointer;font-size: 12px;}



.bwz h3{display: block;margin-bottom: 8%;font-size: 42px;color: #fff;font-weight: normal;}
.bwz p{letter-spacing: 1px;color: #ffffff;line-height: 48px;font-size: 18px;max-width: 870px;margin-bottom:8%;}
.x-banner .owl-carousel .banner-item .bwz a{background: url(../image/jt.png) no-repeat 80% center; display: block;width: 196px;height: 57px;border: solid 1px #ffffff;line-height: 55px;letter-spacing: 1px;color: #ffffff;font-size: 18px;padding-left: 48px;}

.x-banner .wh{position: absolute;left:0;z-index: 99999;top: 28%;}
.x-banner .owl-carousel.owl-drag .owl-item{overflow: hidden;}
.x-banner .owl-carousel .banner-item a img {
  width: 100%;
  animation: scale_b 25s linear infinite alternate;
}

@-webkit-keyframes scale_b {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

@-moz-keyframes scale_b {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

@-o-keyframes scale_b {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

@-ms-keyframes scale_b {
  .rw .rw_banner .rw_banner_a 0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

.x-banner .owl-carousel .banner-item a 50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
.x-banner .owl-carousel .banner-item a 100% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}

/*导航栏样式*/
.nav{margin-right: 20px;}
.nav li{text-align:center;float:left;position:static;z-index:999;width: 133px; }

.nav li a{display:block;line-height:106px;color:#fff;height:112px;padding: 0;font-size: 16px;padding: 0;}
.nav li a:hover{color:#fff;text-decoration:none;background-color:transparent;}
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}

.nav .sec{height:0;background:rgba(0,0,0,.4);color:#fff;overflow:hidden;z-index:9999;text-align: right;position:absolute;top:112px;left:0px;width: 100%;}
.nav .sec a{color:#fff;height:66px;line-height:66px;font-size: 16px;display: inline-block;text-align: right;padding-left: 50px;}
.nav .sec a:hover{background:transparent;text-decoration:none;}
.wh2{max-width: 1200px;margin: 0 auto;padding-right:60px;}

.top22{position: static;background: #fff;}
.top22 .nav li >a{color: #333333;}
.nav li span{
    display: block;
    line-height: 10px;
    margin-top: -36px;
    font-size: 12px;}
.top22 .dh{color: #3f3f3f;background: url(../image/tel2.png) no-repeat left center;}
.top22 .nav li:hover> a{color: #1c317a;background: url(../image/line1.png) no-repeat bottom center;}
.top22 .nav>li:focus>a,.top22 .nav>li:hover>a {
    text-decoration: none;
    background: url(../image/line1.png) no-repeat bottom center;color: #1c317a;
}


@font-face
{
font-family: "hui";
src: url('');
}

.box1 h3{color: #333333;font-size: 46px;text-align: center;margin:60px 0 22px 0;}
.box1 h3 img{max-width:100%;}
.cul li{margin-bottom: 59px;position: relative;}
.cul li a.img img{display: block;width: 100%;}
.cul li .bj1{display: block;position: absolute;width: 73.44%;padding-left: 9.7%; /*background: url(../images/yy.png) no-repeat top center;*/background-size: 100% 100%;top:0;height: 100%;left: 0;}
.cul li .bj1 h2{color: #fff;font-weight: normal;font-size: 60px;margin-bottom: 29px;margin-top: 20%;}
.cul li .bj1 span{display: block;font-size: 48px;color: #fff;font-family: 'hui';text-transform: uppercase;}
.cul li .bj1 .img2{display: none;}
.cul li .bj1 .jia:hover .img1 {display: none;}
.cul li .bj1 .jia:hover .img2{display: inline-block;}
.cul li .bj1 .jia{margin-top: 5%;}


@media(max-width: 1500px){
	.cul li .bj1 h2{font-size: 50px;margin-top: 15%;}
	.cul li .bj1 span{font-size: 30px;}
	
}
@media(max-width: 1367px){
.box1 h3{margin: 70px 0 40px 0;}
}
@media(max-width: 992px){
	.cul li .bj1 h2{font-size: 40px;margin-bottom: 20px;}
	.cul li .bj1 span{font-size:24px;}
	.cul li .bj1 .jia{margin-top: 3%;}
	.box1 h3{font-size: 36px;}
	.cul li{margin-bottom: 36px;}
}


@media(max-width: 600px){
.cul li .bj1 h2{margin-top: 10%;}
.cul li .bj1{background: none;}
.cul li .bj1 h2{margin-bottom: 0px;font-size: 30px;}
.cul li .bj1 span{font-size: 18px;}
.cul li .bj1 img{width: 14%;}
.box1 h3{font-size: 30px;}
.box1 h3{margin: 40px 0 30px 0;}
}


.wh3{max-width: 1230px;margin:0 auto;padding:0 15px;}
.yan input{outline: none;background: none;border: solid 1px #b4b4b4;}
.yan .x-submit{height: 50px;background-color: #1d2a57;line-height: 50px;display: block;width: 100%; text-align: center;border:none;letter-spacing: 1px;color: #ffffff;font-size: 20px;}


/*友情链接*/

.f_link{line-height: 30px;margin:0 auto;display:none;}
.f_link a{color: #666;}
/*页面底部*/
.foot{background: #1d2a57;padding:23px 0;text-align: center;color: #fdfdfd;font-size: 12px;line-height: 30px;}
.foot a{color: #fdfdfd;}
.box3 .wh3 ul{border-top:1px solid #d8d8d8;padding:54px 0; display: flex;align-content: space-between;flex-wrap: wrap;display: -webkit-flex;}
.box3 ul li{width: 20%;}
.box3 ul li dt{color: #202020;font-size: 18px;margin-bottom: 25px;}
.box3 ul li a{display: block;line-height: 30px;letter-spacing: 1px;color: #848484;font-size: 14px;}
.box3 li p{color: #848484;font-size: 24px;}
.box2{margin-top: 80px;}
.box2 h3{letter-spacing: 1px;color: #333333;font-size: 20px;font-weight: normal;margin-bottom: 57px;}
.fs{width: 12.3%;}
.xm {width: 30%;padding-left: 2%;border: solid 1px #b4b4b4;margin-right: 2%;}
.xm input{display: block;height: 50px;letter-spacing: 1px;color: #c1c1c1;font-size: 14px;border:none;width: 88%;}
.yan{margin-bottom: 55px;}
.yan ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #c1c1c1;
}
.yan :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #c1c1c1;
}
.yan ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #c1c1c1;
}
.yan :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #c1c1c1;
}
.yan #checkcode{height: 50px;letter-spacing: 1px;font-size: 14px;padding-left: 2%;width: 58%;}





.page-banner img {
  width: 100%;
  animation: scale_b 25s linear infinite alternate;
  position: relative;
  z-index: -1;
}
.page-banner{overflow: hidden;}
/*内页左侧样式*/
@media screen and (max-width: 1100px) and (min-width: 980px){
	.wh {
    margin:0 3.7%;
}
}
@media(max-width: 1410px){
	.nav li{width: 110px;}

}
@media(max-width: 1290px){
	.nav li{width: 100px;}
	.top2 .dh{font-size: 16px;}

}
@media(max-width: 1366px){
	.wh2{width: auto;margin-right: 9.7%;}
}
@media(max-width: 1025px){
	.x-banner .wh{top:34%;}
	.bwz h3{font-size: 30px;margin-bottom: 4%;}
	.bwz p{font-size: 16px;letter-spacing: 0;line-height: 30px;margin-bottom: 4%;}
	.x-banner .owl-carousel .banner-item .bwz a{width: 150px;height: 40px;line-height: 38px;padding-left: 3%;font-size: 14px;}
	.xm{width: 26%;}
   .box2{margin-top: 40px;}
}
@media(max-width: 1013px){
	.logo{width: 26%;}
	.logo img{max-width: 100%;}

}
@media(max-width: 991px){
	.page-banner,.x-banner{margin-top: 60px;}
    .fen{display: none;}
}


.ny{position: relative;}
.ny .cc{display: block;color: #fff;font-size: 42px;letter-spacing: 1px;position: absolute;left: 9.7%;bottom: 15%;}
@media(max-width: 768px){
	.ny .cc{font-size: 24px;left: 9.7%;}
	.x-banner .wh{top:24%;}
	.xm,.yan .code-group,.fs{float: none;width: 100%;margin-bottom: 15px;}
	.box2 h3{margin-bottom: 30px;}
}









.page-wrap-right{padding-top: 50px;}
.page-wrap-right .xypg-right-content p img{max-width:100%; height:auto !important;width:auto !important}
.yin{display: none;}
.fen{border-bottom: 1px solid #e9e9e9;}
.fen .xypg-left-nav {text-align: center;padding:25px 0 ;}
.fen .xypg-left-nav > li{display: inline-block;float: none;padding: 0 30px;height:30px;border-right: 1px solid #eeeeee;border-bottom:none;}
.fen .xypg-left-nav > li:last-child {
    border-right: 0;
}
.fen .first-nav-btn{display: none;}
.fen .xypg-left-nav > li > a{padding: 0;}

.page-product-inquiry a{color: #fff;}
.xw.page-wrap-right{background: #efefef;padding-bottom: 55px;}

.nlist li{overflow:hidden;border-bottom: 1px dashed #d6d6d6;padding-bottom: 45px;margin-bottom: 45px;}
.nlist li a.img{display: block;width: 26%;overflow:hidden;}
.nlist li a.img img{display: block;width: 100%;-webkit-transform: scale(1,1);-moz-transform: scale(1,1);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.nlist li:hover a.img img{-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);transform:scale(1.1,1.1);-webkit-transition:all 0.6s ease-out;-moz-transition:all 0.6s ease-out;transition:all 0.6s ease-out;}
.nei{width: 70%;}
.nei h3{font-weight: normal;color: #333333;font-size: 24px;}
.nlist li:hover .nei h3{color:#e4892a;}
.nei .date{color: #b4b4b4;font-size: 16px;margin: 10px 0 15px 0;}
.nei .info{color: #656565;font-size: 16px;line-height: 30px;}
.nei .more span{display: block;color: #333333;font-size: 16px;text-transform: uppercase;margin-top: 2.8%;}



@media(max-width: 1230px){
    .nei h3{font-size: 20px;}
    .nei .info{font-size: 14px;line-height: 24px;}
    .nei .date{margin: 5px 0 10px 0;}
}

@media(max-width:768px){
    .nlist li a.img{margin-bottom: 20px;}
   .nlist li a.img,.nei{width: 100%;float: none;}
   .nlist li{padding-bottom: 20px;margin-bottom: 30px;}
}

.ny .wh{position: absolute;left:0;z-index: 99999;top: 25%;}
.bwz2 h3{display: block;margin-bottom: 8%;font-size: 42px;color: #fff;font-weight: normal;}
.bwz2 p{letter-spacing: 1px;color: #ffffff;line-height: 36px;font-size: 16px;max-width: 940px;}

.nybox1{display: flex;justify-content: space-between;flex-wrap: nowrap;display: -webkit-flex;}
.aimg{width: 48.2%;}
.aimg img{display: block;width: 100%;}
.aleft{background: #1d2a57;width: 51.8%;padding:0 1% 0 18.75%;}
.aleft h3{letter-spacing: 1px;color: #ffffff;font-weight: normal;font-size: 30px;margin-top: 12%;}
.acon{margin-top: 30px;line-height: 36px;letter-spacing: 1px;font-size: 16px;color: #ffffff;}


.nybox2{background: #efefef;padding:50px 0 17px;}
.bt1{text-align: center;margin-bottom: 35px;}
.bt1  img{max-width:100%; height:auto !important;width:auto !important;}
.bt1 dd{letter-spacing: 1px;color: #333333;font-size: 36px;}
.bt1 dt{letter-spacing: 1px;color: #414141;font-size: 18px;margin-top: 10px;}
.pul li{margin-bottom: 60px;position: relative;}
.pul li a.img img{display: block;width: 100%;}
.pul li .bj2{display: none;position: absolute;width: 100%;height: 100%;padding: 0 18.75%;top:0;left: 0;background: rgba(2,10,29,.7);}
.pul li h3{letter-spacing: 1px;color: #ffffff;font-size: 30px;font-weight: normal;margin-top: 8.5%;}
.pul li p{line-height: 36px;letter-spacing: 1px;color: #ffffff;font-size: 16px;margin-top: 36px;}
.pul li:hover .bj2{display: block;}

@media(max-width: 1446px){
   .pul li h3{margin-top: 7%;} 
   .pul li p{line-height: 30px;margin-top: 20px;}
   .nybox2{padding-top: 80px;}
}




@media(max-width:1518px){
.aleft h3{font-size: 27px;}
.acon{font-size: 14px;line-height: 28px;}
}

@media(max-width:1300px){
.aleft h3{font-size: 27px;margin-top: 6%;}
.acon{font-size: 14px;line-height: 24px;}
}

@media(max-width:1270px){
    .aleft{padding:0 2% 0 4%;}
    .acon{margin-top: 20px;}
    .pul li .bj2{padding:0 4%;}
    .pul li h3{font-size: 26px;margin-top: 5%;}
    .pul li p{font-size: 14px;line-height: 24px;}
}

@media(max-width:768px){
    .nybox1{display: block;}
    .aleft{padding:5%;}
    .aleft h3{margin-top: 0;}
    .aimg,.aleft{width: 100%;}
    .bwz2 h3{font-size: 30px;margin-bottom: 4%;}
    .bwz2 p{font-size: 14px;line-height: 24px;}
    .aleft h3{font-size: 23px;margin-top: 6%;}
    .pul li p{font-size: 12px;line-height: 20px;letter-spacing: 0;}
    .pul li{margin-bottom: 30px;}
    .nybox2{padding-top: 40px;}
    .bt1{padding:0 10px;}
    .bt1 dd{font-size: 26px;}
    .bt1 dt{font-size: 14px;}
}


@media(max-width: 600px){
    .ny .wh{top:16%;margin:0 4%;}
    .x-banner .wh{top:16%;margin:0 4%;}
    .bwz h3{font-size: 20px;margin-bottom: 2%;}
    .bwz p{font-size: 12px;letter-spacing: 0;line-height: 20px;margin-bottom:2%;}
    .x-banner .owl-carousel .banner-item .bwz a{width: 120px;height: 30px;line-height: 28px;padding-left: 3%;font-size: 14px;}
    .xm input{height: 40px;}
    .yan #checkcode{height: 40px;}
    .yan #checkCodeImg{height: 40px;width: 120px;}
    .box3 ul li{width:50%;margin-bottom: 10px;}
    .box3 ul li dt{margin-bottom: 10px;}
    .box3 .wh3 ul{padding:20px 0;}
    .yan{margin-bottom: 15px;}
    .bwz2 h3{font-size: 20px;margin-bottom: 4%;}
    .bwz2 p{font-size: 12px;line-height: 20px;}
     .pul li .bj2{display: none!important;}
}



.sun-delay0 {
        -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
    }

    .sun-delay1 {
        -webkit-transition-delay: 0.4s;
                transition-delay: 0.4s;
    }

    .sun-delay2 {
        -webkit-transition-delay: 0.6s;
                transition-delay: 0.6s;
    }

    .sun-delay3 {
        -webkit-transition-delay: 0.8s;
                transition-delay: 0.8s;
    }

    .sun-delay4 {
        -webkit-transition-delay: 1s;
                transition-delay: 1s;
    }

    .sun-delay5 {
        -webkit-transition-delay: 1.2s;
                transition-delay: 1.2s;
    }

    .sun-delay6 {
        -webkit-transition-delay: 1.4s;
                transition-delay: 1.4s;
    }

    .sun-delay7 {
        -webkit-transition-delay: 1.6s;
                transition-delay: 1.6s;
    }

    .sun-delay8 {
        -webkit-transition-delay: 1.8s;
                transition-delay: 1.8s;
    }

    .sun-delay9 {
        -webkit-transition-delay: 2s;
                transition-delay: 2s;
    }

    .sun-delay10 {
        -webkit-transition-delay: 2.2s;
                transition-delay: 2.2s;
    }

    .sun-ani-left,
    .sun-ani-down,
    .sun-ani-up,
    .sun-ani-right {
        opacity: 0;
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 1.1s;
                transition-duration: 1.1s;
    }

    .sun-ani-left {
        -webkit-transform: translateX(-400px);
                transform: translateX(-400px);
    }

    .sun-ani-down {
        -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
    }


.sun-ani-up {
        -webkit-transform: translateY(-100px);
                transform: translateY(100px);
    }

    .sun-ani-right {
        -webkit-transform: translatex(100px);
                transform: translatex(100px);
    }

    .active .sun-ani-left {
        opacity: 1;
        -webkit-transform: translateX(-200px);
                transform: translateX(-200px);
    }

    .active .sun-ani-left {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

    .active .sun-ani-down {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    .active .sun-ani-up {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    .active .sun-ani-right {
        opacity: 1;
        -webkit-transform: translatex(0);
                transform: translatex(0);
   }



