@charset "utf-8";
/* CSS Document */
html{ font-size:100px;}
body {font-family:微软雅黑;opacity:0;filter:alpha(opacity=0);font-size:0.01rem;}
.hs{ color:#ff2f2f;}
.hs1{color:#ff6900}
body,p,h1,h2,h3,h4,h5,h6,dl,dd{ margin:0;}
ul,ol,li{list-style-type: none; margin:0; padding:0}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{text-decoration: none; color:#333;-webkit-tap-highlight-color:rgba(0,0,0,0); }
img{border:none;vertical-align:bottom; width:100%}
.trstop{}

.pad10{padding: 0.1rem;}
.pad20{padding: 0.2rem;}
.padt10{padding-top: 0.1rem;}
.padt20{padding-top: 0.2rem;}
.padt30{padding-top: 0.3rem;}
.padt40{padding-top: 0.4rem;}
.padb10{padding-bottom: 0.1rem;}
.padb20{padding-bottom: 0.2rem;}
.padb30{padding-bottom: 0.3rem;}
.padtb10{padding-top: 0.1rem;padding-bottom: 0.1rem;}
.padtb20{padding-top: 0.2rem;padding-bottom: 0.2rem;}
.padtb30{padding-top: 0.3rem;padding-bottom: 0.3rem;}
.padlr5{padding-left: 0.05rem;padding-right: 0.05rem;}
.padlr10{padding-left: 0.1rem;padding-right: 0.1rem;}
.padlr20{padding-left: 0.2rem;padding-right: 0.2rem;}
.padr30{padding-right: 0.3rem;}

.marlr12{margin-left: 0.12rem;margin-right: 0.12rem;}
.mart20{margin-top: 0.2rem;}

.blackC{color:#000;}
.blackC1{color: #666;}
.whiteC{color:#fff;}

.bgWhite{background-color: #fff;}
.bgBlack{background-color: #000;}
.fz14{font-size: 0.14rem;letter-spacing: -1px;}
.fz16{font-size: 0.16rem;}
.fz18{font-size: 0.18rem;}
.fz20{font-size: 0.2rem;}
.fz22{font-size: 0.22rem;}
.fz24{font-size: 0.24rem;}
.fz25{font-size: 0.25rem;}
.fz30{font-size: 0.3rem;}
.fz32{font-size: 0.32rem;}
.fz38{font-size: 0.38rem;}
.lh12{line-height: 1.2}
.lh14{line-height: 1.4}
.lh16{line-height: 1.6}
.lh18{line-height: 1.8}
.lh20{line-height: 2}
.translateY{
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.translateX{
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.paW{width: 100%;left: 0;}
.w50{width: 50%;}
.text-transform{text-transform:uppercase;}
ul.clearfix>li{float: left;}
ol.clearfix>li{float: left;}


.fl{ float:left;}
.fr{ float:right;}
.fix:after{ clear:both; content:"."; height:0px; display:block; overflow:hidden; visibility:hidden }
.fix{*zoom:1;}

.blackC{color:#000;}
.blackC1{color: #666;}
.whiteC{color:#fff;}

.fz14{font-size: 0.14rem;letter-spacing: -1px;}
.fz16{font-size: 0.16rem;}
.fz18{font-size: 0.18rem;}
.fz20{font-size: 0.2rem;}
.fz22{font-size: 0.22rem;}
.fz24{font-size: 0.24rem;}
.fz25{font-size: 0.25rem;}
.fz30{font-size: 0.3rem;}
.fz32{font-size: 0.32rem;}
.fz38{font-size: 0.38rem;}

.red{ color:#fe3b69}
.btncon{ width:100%; padding:0.3rem 0 0 0; }
.btncon a{ display:inline-block; padding:0 0.35rem;background:#f57452; color:#fff; line-height:0.65rem; height:0.65rem; border-radius:0.65rem;  font-size:0.31rem;animation:Indexbounce 3s infinite;-webkit-animation:Indexbounce 3s infinite;}

.btncon1{ width:100%;text-align:center; padding:0.3rem 0 0 0; }
.btncon1 a{ display:inline-block; padding:0 0.35rem;background:#f57452; color:#fff; line-height:0.65rem; height:0.65rem; border-radius:0.15rem;  font-size:0.31rem;animation:float 3s infinite;-webkit-animation:float 3s infinite;}

.wrap{margin:0 auto; max-width:6.4rem; overflow:hidden; position:relative; color:#343434}
.ban{ position:relative; width:100%;}

.ban .btncon{ position:absolute; left:0.2rem; bottom:0.35rem;}


.ttcon{ text-align:center; margin:0.3rem 0; position:relative}
.ttcon .tt1{ display:inline-block; height:1.36rem; text-align:left; padding-left:0.6rem; position:relative; font-size:0.35rem; line-height:0.42rem;}
.ttcon .tt1 img{ position:absolute; width:1.1rem; left:0; top:0}
.ttcon .tt1 .f1{ padding-top:0.25rem; }
.ttcon .tt1 .f2{ font-size:0.35rem; line-height:0.42rem; font-weight:bold}
.ttcon .tt2 .f1{ font-weight:bold;}
.ttcon .tt2 .f2{ font-weight:normal;}

.newpart1{ position:relative}
.newpart1 .tt{ position:absolute; width:100%; left:0; top:0.3rem;}
.newpart1 .txt{ position:absolute; width:2.23rem; left:0.5rem; top:2rem; font-size:0.22rem; color:#fff; line-height:1.5}

/* 向下的箭头 */  
.dot-bottom {  
    font-size: 0;  
    line-height: 0;  
    border-width: 0.2rem;  
    border-color: #432c69;  
    border-bottom-width: 0;  
    border-style: dashed;  
    border-top-style: solid;  
    border-left-color: transparent;  
    border-right-color: transparent;  
}  


.fixed{ position:fixed; z-index:3; left:50%; margin-left:-3.2rem; top:0}



.pagination{ width:100%; text-align:center; padding:0.1rem 0}
.pagination span{display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #d6d6d6;
    margin: 0 2px;
    cursor: pointer;
}
.pagination .swiper-active-switch{ background:#363d44}



.bdbox{ padding:0 0.65rem; height:9.94rem; background:url(../images/bdbg.jpg) no-repeat; background-size:6.4rem 9.94rem}
.bdbox .t1{ padding-top:0.88rem; text-align:center; font-size:0.38rem; line-height:1.2;}
.bdbox .t2{ font-size:0.28rem; line-height:1; padding:0.2rem 0 0.3rem 0}
.bdbox .p1box{ display:flex; flex-wrap:wrap; }
.bdbox .p1box label{ width:25%;padding-bottom:0.15rem; font-size:0.22rem; color:#666}
.bdbox .p1box label.two{ width:50%}
.bdbox .p2box{ display:flex;}
.bdbox .p2box .ll{ width:1.45rem; line-height:0.52rem; font-size:0.24rem;}
.bdbox .p2box .rr{ height:0.52rem; flex:1; padding:0 0.2rem; background:#fff; border:1px solid #bfbfbf; border-radius:5px;}
.bdbox .p2box .rr input{ outline:none; background:none; border:0;line-height:0.52rem;}
.part1{ width:100%; height:14.7rem; background:#363d44; position:relative; overflow:hidden; }
.part1 .ttcon{ position:absolute; width:100%; left:0; top:0;}
.part1 .p1{ position:absolute; width:4.65rem; left:0.88rem; top:2.18rem; font-size:0.2rem; color:#fff; line-height:0.32rem;}

.part1 .p2{ position:absolute; width:1.32rem; left:4.9rem; top:4.38rem; }
.part1 .btncon1{ position:absolute; left:0; bottom:0.3rem;}
.part2 .btncon1{ position:absolute; left:0; bottom:0.8rem;}
.part2 { position:relative; padding-top:1.3rem}
.part2 .ttcon{ position:absolute; width:100%; left:0; top:0}
.part2 .ttcon p{font-size: 0.22rem;margin-top: 0.1rem;}
.part2 .ttcon p b{color: #ff3600;}
.part2 .pagination{ position:absolute; left:0; bottom:0;}
.part2 .prev{ position:absolute; width:0.55rem; left:0; top:1.97rem; z-index:3}
.part2 .next{ position:absolute;width:0.55rem; right:0; top:1.97rem; z-index:3}
.part2 .swiper-slide{ position:relative; width:100%;}
.part2 .swiper-slide .gif{ position:absolute; width:2.83rem; height:2.65rem; left:3.23rem; top:0.23rem}
.part2 .swiper-slide i{ display: inline-block; width: 1.95rem; line-height: 0.42rem; background: #fff600; font-size: 0.22rem; font-style: normal;
    position: absolute;; top:0.1rem; left: 0; right: 0; margin: 0 auto; z-index: 1; text-align: center;
}
.part3 { overflow:hidden; width:100%; position:relative}
.part3 .p1box{ margin-top:0.35rem}
.part3 p{font-size: 0.22rem;padding: 0 0.2rem;line-height: 1.6;}
.part3 p span{color: #f57452;}
.part3 p span a{color: #f57452;text-decoration: underline;}
.part3 .p3_1{padding: 0.2rem 0.15rem 0;}
.part3 .p3_1 .p3_g{width: 3.32rem;position: relative;}
/*.part3 .p3_1 .p3_g:before{content: '';position: absolute;width: 0.9rem;height: 0.9rem;background: url("../images/p3_play.png") no-repeat;background-size: cover;right: 0;top: 0;}*/
.part3 .p3_1 .fr{width: 2.7rem;}
.part3 ul{padding: 0 0.15rem;}
.part3 ul li{width:2.01rem;float: left;margin: 0.04rem 0.03rem 0 0 ; }
.part3 ul li:last-of-type{margin-right: 0; }
.part3 ol{padding: 0 0.15rem;}
.part3 ol li{width:3.01rem;float: left;margin: 0.04rem 0.03rem 0 0 ; }
.part3 ol li:last-of-type         {margin-right: 0; }
.part3 dl{ width: 6rem; background: #eee; padding: 0.1rem; overflow: hidden; margin: 0.2rem auto 0}
.part3 dl dt{ width: 3.9rem;float: left}
.part3 dl dt h3{ background: url("../images/gt-ico.png") no-repeat left center; background-size:0.71rem 0.61rem; color: #00a4cb; padding-left: 0.8rem; font-size: 0.25rem; font-weight: bold }
.part3 dl dt p{ padding: 0.1rem 0}
.part3 dl dd{ width:1.73rem; float: right }
.part3 .dj{text-align: center;color: #f00;font-size: 0.26rem;padding-top: 0.2rem;text-decoration: underline;}


.part4{ width:100%; overflow:hidden; margin-top:0.3rem; padding-bottom:0.3rem; background:#3d2a19 url(../images/p4bg.jpg) 0 bottom  no-repeat; background-size:6.4rem 1.27rem;}
.part4 .pagination{ position:absolute; left:0; bottom:0;}
.part4 .prev{ position:absolute; width:0.55rem; left:0; top:1.97rem; z-index:3}
.part4 .next{ position:absolute;width:0.55rem; right:0; top:1.97rem; z-index:3}

.part5 .con{ padding: 0.2rem}
.part5 dl{ padding: 0.2rem; border-radius: 0.1rem; background: #363d44; margin-top: 0.2rem; text-align: left}
.part5 dl h3{ font-weight: bold; color: #fff; font-size: 0.26rem; line-height: 0.6rem; border-bottom: 1px solid #fff}
.part5 dl p{ font-size: 0.22rem; color: #fff; padding: 0.2rem 0; line-height: 0.35rem}
.part5 dl p i{ font-style: normal; color: #fff600}
.part5 dl ul{ text-align: center}
.part5 dl ul li{ width: 32%; display: inline-block}
.part5 dl:nth-child(2){ background: #3c7ba2}
.part5 .btncon1{padding: 0 0 0.4rem;}



.p7tt,.p8tt,.p9tt{ font-size:0.37rem; padding:0.3rem 0; text-align:center}


.part6 .p6_txt{font-size: 0.22rem;padding: 0 0.15rem 0.2rem;line-height: 1.6;}
.part6 .btncon1{padding: 0.3rem 0 ;}

.part7 .sp2{padding-top: 0.3rem;}
.part7 .sliderIn{position: relative;}
.part7 .p7_his{position: absolute;width: 0.96rem;height: 0.97rem;background: url("../images/p7_his.png") no-repeat;background-size: cover;right: 0.2rem;top: -0.3rem;}
.part7 .sp2 ol{box-shadow: 0 0 0.06rem rgba(1,63,121,0.75);padding: 0.06rem 0;}
.part7 .sp2 ol li{width: 2.09rem;}
.part7 .sp2 ol li:not(:last-of-type){margin-right: 0.06rem;}

.part7 .pagination{
    width: 100%;
    left: 0;
    text-align: center;
}
.part7 .pagination .swiper-pagination-switch{
    display: inline-block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin:0 0.05rem;
    width:0.2rem;
    height: 0.2rem;
    opacity: 1;
    cursor: pointer;
    border: 1px solid #013f79;
}
.part7 .pagination .swiper-active-switch{
    opacity: 1;
    background-color: #013f79;
}

.part7 .btncon1{position: absolute;width: 100%;left: 0;top: 4.86rem;}

.part8{background-color: #363d44;color: #fff;padding-top: 0.2rem;}

.part8 ul{ text-align: center}
.part8 ul li{ width: 30%; display: inline-block; padding: 1%; background: #1f252a; margin-bottom: 2%}
.part8 ul li:nth-child(3),.part8 ul li:nth-child(6){ margin-right: 0}
.part8 ul li p{ padding: 2%}



.part9 .box{ width:6.2rem; margin:0 auto; overflow:hidden; padding-bottom:0.3rem;}
.part9 .list{ width:3rem; height:0.68rem; margin-bottom:0.2rem; text-align:center; line-height:0.68rem; font-size:0.25rem; color:#fff; background:#20cbd4; border-radius:0.68rem;}
.part9 .list:nth-of-type(2){ background:#008bac}
.part9 .list:nth-of-type(3){ background:#0099a9}
.part9 .list:nth-of-type(5){ background:#008bac}
.part9 .list:nth-of-type(6){ background:#f57452}

/*视频弹窗的样式*/
.videoBox{width: 100%;height: 100%;background-color:rgba(0,0,0,0.6);position: fixed;left: 50%;top: 50%;z-index: 999;display: none;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.videoBox.show{display: block;}
.videoBox .videoPlay{width:6rem;height: 3.2rem;position: absolute;left: 50%;top: 50%;z-index: 999;background-color: #000;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)}
.videoBox .close{position: absolute;right: 20px;top: 20px;cursor: pointer;width: 0.52rem;height: 0.52rem;}

.qnew{ width:100%; overflow:hidden}
.qnew .t1{ text-align:center; padding:0.3rem 0 0.2rem 0}
.qnew .t1 img{ width:5.08rem}
.qnew_pic{ width:100%; overflow:hidden; padding-bottom:0.12rem;}
.qnew_pic .list{ float:left; width:33.33%; padding:0 2px; box-sizing:border-box}
.qnew_pic .list .pic{ position:relative}
.qnew_pic .list .pic .txt{ position:absolute; display:table; left:0; bottom:0; width:100%; height:0.52rem; background:rgba(0,0,0,0.5)}
.qnew_pic .list .pic .txt .cell{ display:table-cell; text-align:center; vertical-align:middle; font-size:0.16rem; color:#FFFFFF; line-height:0.23rem;}
.qnew_video{ margin:0 auto; width:5.12rem; position:relative}
.qnew_video .btn{ position:absolute; width:0.5rem; left:2.3rem; top:1.12rem;}
.qnew_video .txt{ text-align:center; position:absolute; left:0; bottom:0.3rem; width:100%; font-size:0.18rem; color:#fef5f5; line-height:0.18rem;}

/*需要添加的视频css*/
.add-ship{ width:100%; height:100%; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; display:none;}
.add-ship .ClickVideoClose{ position: absolute; top: 10px; right:10px; width:40px; cursor: pointer;}
.add-ship .videoPlay{width:640px; height:360px; padding:0;text-align:left !important; position: absolute; left: 50%; top: 50%;transform:translate(-50%,-50%);}
@media only screen and (max-width: 639px) {
	.add-ship .videoPlay{width:414px; height:233px; padding:0;margin:0;}
}
@media only screen and (max-width: 375px) {
	.add-ship .videoPlay{width:375px;height:210px; padding:0;margin:0;}
}
@media only screen and (max-width: 320px) {
	.add-ship .videoPlay{width:320px;  height:180px; padding:0;margin:0}
}
/*需要添加的视频css*/

@media all and (max-width: 480px) {
    .part3 .swiper-slide{ width:380px}
	.part10 .swiper-slide{ width:250px}
}
@media all and (max-width: 414px) {
    .part3 .swiper-slide{ width:340px}
	 .part10 .swiper-slide{ width:230px}
}
@media all and (max-width: 375px) {
    .part3 .swiper-slide{ width:300px}
	.part10 .swiper-slide{ width:200px}
}
@media all and (max-width: 320px) {
       .part3 .swiper-slide{ width:220px}
	   .part10 .swiper-slide{ width:180px}
}



.Add-partt{ text-align: center; padding: 30px 20px; font-size: 0.2rem}
    .Add-partt h3{ font-size: 0.33rem; font-weight: bold;}
    .Add-partt .text{padding: 0.1rem 0.2rem; border-radius: 1.5rem; background: #b9eaeb; line-height: 0.4rem; margin: 0.2rem 0}
    .Add-partt .text font{ font-weight: bold}
    .Add-partt ul{ overflow: hidden; text-align: center}
    .Add-partt ul li{ width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #202529; color: #fff; font-size: 0.22rem;
      display: inline-block; position: relative; border: 0.05rem solid #96989a; margin-right: 0.2rem; display: inline-block}
     .Add-partt ul li:nth-last-child(1){ margin-right: 0}
     .Add-partt ul li p{
        display: block; position: absolute; left: 0; top: 50%; right: 0; margin: 0 auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); 
    }
    .Add-partt ul li:nth-child(1){ animation:rollIn 1s; -webkit-animation: rollIn 1s}
    .Add-partt ul li:nth-child(2){ animation:rollIn 1.3s; -webkit-animation: rollIn 1.3s}
    .Add-partt ul li:nth-child(3){ animation:rollIn 1.5s; -webkit-animation: rollIn 1.5s}
    @keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}










@-webkit-keyframes float {
	0% {  -webkit-transform: translateY(0);  transform: translateY(0);  }
	50% {  -webkit-transform: translateY(0.05rem);  transform: translateY(0.05rem);  }
	100% {  -webkit-transform: translateY(0);  transform: translateY(0);  }
}

@keyframes float {
	0% {  -webkit-transform: translateY(0);  transform: translateY(0);  }
	50% {  -webkit-transform: translateY(0.05rem);  transform: translateY(0.05rem);  }
	100% {  -webkit-transform: translateY(0);  transform: translateY(0);  }
}
@keyframes float1 {
	0% {  -webkit-transform: translateX(0);  transform: translateX(0);  }
	50% {  -webkit-transform: translateX(0.1rem);  transform: translateX(0.1rem);  }
	100% {  -webkit-transform: translateX(0);  transform: translateX(0);  }
}

@keyframes movement {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
		opacity:0
    }
    25% {
        -webkit-transform: scale(1);
        transform: scale(1);
		opacity:1
    }
    32% {
        -webkit-transform: scale(1);
        transform: scale(1);
		opacity:1
    }	
	35%{
		opacity:0	  
	}
    38% {
		opacity:1
    }	
    45%{
		opacity:0	  
	}
    32% {
		opacity:1
    }		
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
		opacity:1
    }
    75% {

    }
    100% {

    }
}
@-webkit-keyframes movement {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
		opacity:0
    }
    25% {
        -webkit-transform: scale(1);
        transform: scale(1);
		opacity:1
    }
    32% {
        -webkit-transform: scale(1);
        transform: scale(1);
		opacity:1
    }	
	35%{
		opacity:0	  
	}
    38% {
		opacity:1
    }	
    45%{
		opacity:0	  
	}
    32% {
		opacity:1
    }		
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
		opacity:1
    }
    75% {

    }
    100% {

    }
}
@keyframes movement1 {
    0% {
        -webkit-transform: translate(6px,-3px);
        transform: translate(6px,-3px);
    }
    25% {
        -webkit-transform: translate(3px,6px);
        transform: translate(3px,6px);
    }
    50% {
        -webkit-transform: translate(-6px,-10px);
        transform: translate(-6px,-10px);
    }
    75% {
        -webkit-transform: translate(8px,0px);
        transform: translate(8px,0px);
    }
    100% {
        -webkit-transform: translate(6px,-3px);
        transform: translate(6px,-3px);
    }
}
@-webkit-keyframes movement1 {
    0% {
        -webkit-transform: translate(6px,-3px);
        transform: translate(6px,-3px);
    }
    25% {
        -webkit-transform: translate(3px,6px);
        transform: translate(3px,6px);
    }
    50% {
        -webkit-transform: translate(-6px,-10px);
        transform: translate(-6px,-10px);
    }
    75% {
        -webkit-transform: translate(8px,0px);
        transform: translate(8px,0px);
    }
    100% {
        -webkit-transform: translate(6px,-3px);
        transform: translate(6px,-3px);
    }
}
@keyframes movement2 {
    0% {
        -webkit-transform: translate(10px,3px);
        transform: translate(10px,3px);
    }
    25% {
        -webkit-transform: translate(3px,6px);
        transform: translate(3px,6px);
    }
    50% {
        -webkit-transform: translate(6px,-3px);
        transform: translate(6px,-3px);
    }
    75% {
        -webkit-transform: translate(-8px,0px);
        transform: translate(-8px,0px);
    }
    100% {
        -webkit-transform: translate(10px,3px);
        transform: translate(10px,3px);
    }
}
@-webkit-keyframes movement2 {
    0% {
        -webkit-transform: translate(10px,3px);
        transform: translate(10px,3px);
    }
    25% {
        -webkit-transform: translate(3px,6px);
        transform: translate(3px,6px);
    }
    50% {
        -webkit-transform: translate(6px,-3px);
        transform: translate(6px,-3px);
    }
    75% {
        -webkit-transform: translate(-8px,0px);
        transform: translate(-8px,0px);
    }
    100% {
        -webkit-transform: translate(10px,3px);
        transform: translate(10px,3px);
    }
}

@keyframes movement3 {
    0% {
        -webkit-transform: translate(-10px,3px);
        transform: translate(-10px,3px);
    }
    25% {
        -webkit-transform: translate(-4px,6px);
        transform: translate(-4px,6px);
    }
    50% {
        -webkit-transform: translate(2px,8px);
        transform: translate(2px,8px);
    }
    75% {
        -webkit-transform: translate(-8px,0px);
        transform: translate(-8px,0px);
    }
    100% {
        -webkit-transform: translate(-10px,3px);
        transform: translate(-10px,3px);
    }
}
@-webkit-keyframes movement3 {
    0% {
        -webkit-transform: translate(-10px,3px);
        transform: translate(-10px,3px);
    }
    25% {
        -webkit-transform: translate(-4px,6px);
        transform: translate(-4px,6px);
    }
    50% {
        -webkit-transform: translate(2px,8px);
        transform: translate(2px,8px);
    }
    75% {
        -webkit-transform: translate(-8px,0px);
        transform: translate(-8px,0px);
    }
    100% {
        -webkit-transform: translate(-10px,3px);
        transform: translate(-10px,3px);
    }
}
@keyframes scale1 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    55% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    58% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }	
    65% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    75% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }		
    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}
@-webkit-keyframes scale1 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    55% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    58% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }	
    65% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    75% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }		
    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}
@-webkit-keyframes Indexbounce {
    0%, 100%, 20%, 53%, 80% {
        -webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    40%, 43% {
        -webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform:translate3d(0, -10px, 0);
        transform:translate3d(0, -10px, 0)
    }
    70% {
        -webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform:translate3d(0, -5px, 0);
        transform:translate3d(0, -5px, 0)
    }
    90% {
        -webkit-transform:translate3d(0, -4px, 0);
        transform:translate3d(0, -4px, 0)
    }
}
@keyframes Indexbounce {
    0%, 100%, 20%, 53%, 80% {
        -webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    40%, 43% {
        -webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform:translate3d(0, -10px, 0);
        -ms-transform:translate3d(0, -10px, 0);
        transform:translate3d(0, -10px, 0)
    }
    70% {
        -webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform:translate3d(0, -5px, 0);
        -ms-transform:translate3d(0, -5px, 0);
        transform:translate3d(0, -5px, 0)
    }
    90% {
        -webkit-transform:translate3d(0, -4px, 0);
        -ms-transform:translate3d(0, -4px, 0);
        transform:translate3d(0, -4px, 0)
    }
}

@-moz-keyframes Indexbounce {
    0%, 100%, 20%, 53%, 80% {
        -webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0)
    }
    40%, 43% {
        -webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform:translate3d(0, -10px, 0);
        -ms-transform:translate3d(0, -10px, 0);
        transform:translate3d(0, -10px, 0)
    }
    70% {
        -webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
        -webkit-transform:translate3d(0, -5px, 0);
        -ms-transform:translate3d(0, -5px, 0);
        transform:translate3d(0, -5px, 0)
    }
    90% {
        -webkit-transform:translate3d(0, -4px, 0);
        -ms-transform:translate3d(0, -4px, 0);
        transform:translate3d(0, -4px, 0)
    }
}


@-webkit-keyframes cameraRoate{

    0%,50%,100%{
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }

    25%,75%{
        -webkit-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
    }

}

@keyframes cameraRoate {
    0%,50%,100%{
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }

    25%,75%{
        -webkit-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
    }
}

@keyframes -moz-cameraRoate {
    0%,50%,100%{
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }

    25%,75%{
        -webkit-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
    }
}