body,dl,dd,h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0px;}
body{font:12px/1.5 tahoma,simsun,Microsoft YaHei,sans-serif;color:#1a5e77;-webkit-tap-highlight-color: rgba(0,0,0,0)}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{border: none;padding: 0;margin:0;}
em,i,b{font-style:normal}
ul,ol{list-style:none;margin:0;padding:0;}
a{text-decoration:none}
a:hover{text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
input,select,option{outline:none}
body{background-color: #33343b;}
.main img{ display: none;}
.sec1-show .sec1 img,
.sec2-show .sec2 img,
.sec3-show .sec3 img,
.sec4-show .sec4 img,
.sec5-show .sec5 img,
.sec6-show .sec6 img,
.sec7-show .sec7 img,
.sec8-show .sec8 img,
.sec9-show .sec9 img,
.sec10-show .sec10 img,
.sec11-show .sec11 img,
.sec12-show .sec12 img,
.sec13-show .sec13 img,
.sec14-show .sec14 img{ display:block;}
.wrap{width: 100%;height:100%;overflow: hidden;}
.content{width: 100%;height:100%;position: relative;}
.main{width: 100%;-webkit-transition:all 0.3s linear;-webkit-transform:translateY(0px);transition:all 0.3s linear;transform:translateY(0px);-webkit-backface-visibility:hidden; height: 100%; position: relative;}
.sec{ width: 100%; height: 100%; margin: 0 auto; position: relative;}
.sec a img{ position: relative; display: block; width: 100%;}
.next{ position:absolute;left: 46.9%; bottom: 3.6%; z-index: 100;}
.sec1{ background: url(../images/page1_bg_02.jpg) no-repeat; background-size: 100% 100%;}
.sec2{ background: url(../images/bg2_02.jpg) no-repeat; background-size: 100% 100%;}
.sec3{ background:url(../images/bg3_02.jpg) no-repeat; background-size: 100% 100%;}
.sec4{ background:url(../images/bg4_02.jpg) no-repeat #a782f9; background-size: 100% 100%;}
.sec5{ background:url(../images/page3_bg_02.jpg) no-repeat #fb5e64; background-size: 100% 100%;}
.sec6{ background: url(../images/bg7_02.jpg) no-repeat #34c3fa; background-size: 100% 100%;}
.sec7{ background: url(../images/page5_bg_02.jpg) no-repeat #34c3fa; background-size: 100% 100%;}
.sec8{ background: url(../images/page6_bg_02.jpg) no-repeat #34c3fa; background-size: 100% 100%;}
.sec9{ background: url(../images/bg11_02.jpg) no-repeat #34c3fa; background-size: 100% 100%;}
.sec10{ background: url(../images/page8_bg_02.jpg) no-repeat #34c3fa; background-size: 100% 100%;}
.sec11{ background: url(../images/bg13_02.jpg) no-repeat #34c3fa; background-size: 100% 100%;}
.sec12{ background: url(../images/page9_bg_02.jpg) no-repeat #34c3fa; background-size: 100% 100%;}
.more{ top: 2.3%; right: 5.8%; width: 15.3%;}
.p1-box1{position: absolute;
    width:100%;
    background-size: 100% 100%;
    padding-bottom:135%;
    overflow: hidden;
    left:0%;
    top:15.58%;
    z-index: 10;}
.p2-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    width:100%;
    top:0%;
    left:0%;
    z-index: 10;height:100%;
}
.p4-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    width:79.68%;
    top:12.58%;
    left:8.43%;
    z-index: 10;height:auto;
}
.p6-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    width:89.37%;
    top:11.58%;
    left:10.62%;
    z-index: 10;height:auto;
}
.p7-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    width:100%;
    top:12.58%;
    left:0%;
    z-index: 10;height:auto;
}
.p8-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute; padding-bottom:100%;
    width:77.03%;
    top:12.58%;
    left:11.09%;
    z-index: 10;height:100%;
}
.p9-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute; padding-bottom:125%;
    width:73.43%;
   top:10.58%;
    left:13.28%;
    z-index: 10;height:auto;
}
.p10-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    width:90.93%;
   top:10.58%;
    left:9.21%;
    z-index: 10;height:auto; padding-bottom:90%;
}
.p11-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    width:76.56%;
    top:10.58%;
    left:9.37%;
    z-index: 10;height:100%;
}
.p12-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute; padding-bottom:125%;
    width:85.93%;
    top:0%;
    left:7.5%;
    z-index: 10;height:auto;
}
.p13-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute; padding-bottom:125%;
    width:73.43%;
   top:10.58%;
    left:13.28%;
    z-index: 10;height:auto;
}
.p14-box1{
    background-size: 100% 100%;
    overflow: hidden;
    position: absolute;
    width:90.93%;
   top:10.58%;
    left:9.21%;
    z-index: 10;height:auto;
}
/* section1 */
.p1-logo1{ margin:0;}
.p1-logo2{ margin:10% 0 0 0;}
/* section2 */
.p2-border1{ width:79.37%; 
   margin:13.58% 0 0 11.40%; opacity:0;}
.p2-border2{ width:25.78%; 
   margin:3.58% 0 0 35.40%; }
.p2-border3{ width:25.78%; height:5%; z-index:2; 
  position:absolute; top:45%; left:35.40%; }  
 .p4-border3{ width:25.78%; 
   margin:5.58% 0 0 34.68%; }
.p4-border4{ width:25.78%; height:4%; z-index:2; 
  position:absolute; top:51.8%; left:34.68%;  } 
 .p6-border3{ width:25.78%; 
   margin:3.58% 0 0 36.56%; }
.p6-border4{ width:25.78%; height:13%; z-index:2; 
  position:absolute; top:87.2%; left:36.56%;  } 
.p6-border40{ width:26%; height:4%; z-index:2; 
  position:absolute; top:43.7%; left:39.8%;  }    
   .p8-border3{ width:25.78%; 
  position:absolute; top:50.2%; left:10.46%;}
.p8-border4{ width:25.78%; height:5%; z-index:2; 
  position:absolute; top:50.2%; left:10.46%;} 
   .p10-border3{ width:27.73%; 
  position:absolute; top:46%; left:0%;}
.p10-border4{ width:27.73%; height:5%; z-index:2; 
  position:absolute; top:46%; left:0%; } 
   .p11-border3{ width:33.67%; 
  position:absolute; top:27%; left:3%;}
.p11-border4{ width:33.67%; height:5%; z-index:2; 
  position:absolute; top:27%; left:3%; } 
  .p12-border33{ width:29.89%; 
  position:absolute; top:35%; left:3%;}
.p12-border4{ width:29.89%; height:4%; z-index:2; 
  position:absolute; top:35%; left:3%; }           
/* section3 */
.p3-border1{ width:77.5%;
    margin:13.58% 0 0 10.06%;}

/* section4 */
.p4-border1{ margin:15.08% 0 0 8.43%;width:82.96%;}
.p4-pic1{margin:4.32% 0 0 8.43%;width:82.96%;}
.p4-pic2{margin:3.5% 0 0 8.43%;width:77.96%;}
/* section5 */
.p6-border1{ position:absolute; left:8.75%; top:34%;}
/* section7 */
.p8-border1{margin:14% 0 0 11.09%;}
/* section8 */
.p9-border1{position:absolute; left:10.46%; top:10%;}

/* section9 */
.p10-border1{ margin:0;}
.p10-pic1{margin:3.27% 0 0 0%;}
/* section10 */
.p11-border1{margin:0;}
.p11-pic0{margin:4.37% 0 0 0%;}
.p11-pic2{margin:9.5% 0 0 0%;}
/* section11 */
.p12-border1{margin:20% 0 0 0;}
.p12-pic1{margin:4.37% 0 0 0%;}
.p12-pic2{margin:4.5% 0 0 0%;}
/* section12 */
.p13-border1{margin:0% 0 0 0;}
.p13-pic1{margin:4.0% 0 0 24.68%;}
.p13-pic2{margin:1.2% 0 0 24.68%;}
.p13-box1 .p13-link{ position:absolute; left:24.68%; top:26.5%; width:50%; height:5%;}
/* section13 */
.p14-border1{ width:80%;
    margin:13.58% 0 0 8.43%;}
.p14-border2{ width:80%;
    margin:5% 0 0 8.43%;}
.p14-border3{ width:80%;
    margin:5% 0 0 8.43%;}	
/* section14 */
.p15-border1{margin:0% 0 0 0;}
.p15-pic1{margin:4.0% 0 0 0%;}
.p15-pic2{margin:80% 0 0 0%; opacity:0;}
.p15-pic3{margin:2.5% 0 0 0%;opacity:0;}
.p14-box1 .p15-link{ position:absolute; left:0%; top:73%; width:100%; height:15%; z-index:20;}
.p14-box1 .p15-link1{ position:absolute; left:0%; top:88%; width:100%; height:15%;z-index:20; }
.p14-box1 .p15-link2{ position:absolute; left:0%; top:0%; width:25.80%; height:5%;z-index:20; }	
/* anim */
.pt-page-moveIcondown {
    -webkit-animation: moveIcondown ease 1.5s both infinite;
    animation: moveIcondown ease 1.5s both infinite;
}
@-webkit-keyframes moveIcondown {
    0% { -webkit-transform: translateY(-100%); opacity:0;}
    50% { -webkit-transform: translateY(0%); opacity:1;}
    100% { -webkit-transform: translateY(100%); opacity:0;}
}
@keyframes moveIcondown {
    0% { -webkit-transform: translateY(-100%); transform: translateY(100%); opacity:0;}
    50% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity:1;}
    100% { -webkit-transform: translateY(100%); transform: translateY(-100%); opacity:0;}
}
.pt-page-moveIconUp {
	-webkit-animation: moveIconUp ease 1.5s both infinite;
	animation: moveToBottom ease 1.5s both infinite;
}
@-webkit-keyframes moveIconUp {
	0% { -webkit-transform: translateY(100%); opacity:0;}
	50% { -webkit-transform: translateY(0%); opacity:1;}
	100% { -webkit-transform: translateY(-100%); opacity:0;}
}
.rubberBand {
  -webkit-animation:moveFromsoso 1s 1s ease both;
    -moz-animation:moveFromsoso 1s 1s ease both;
}
.write-up{ -webkit-animation:wirteup 1s forwards;
    -moz-animation:wirteup 1s forwards;}
@-webkit-keyframes wirteup {
	 0% {
        opacity:0;
       
    }
    100%{
        opacity:1;
       
    }
}	
@-webkit-keyframes moveFromsoso {
	from { -webkit-transform: translateY(100%) scale(0); opacity:0;}
	to{-webkit-transform: translateY(0) scale(1);opacity:1;}
}
/* anim end*/
.sec2-show .fadein-up1 {
  -webkit-animation:bounceIn 1.5s .5s forwards;-webkit-transform: scale3d(.1, .1, .1);
}
.sec2-show .fadein0{
  -webkit-animation:fadein01 1s .9s ease both;
}
.sec7-show .fadeinm,.sec8-show .fadeinm {  -webkit-animation:fadein01 1s 1.2s ease both;}
.sec4-show .fadein00,.sec9-show .fadein00,.sec10-show .fadein00{
  -webkit-animation:fadein01 1s 2s ease both;
}

	@-webkit-keyframes fadein01{
   0%{opacity:0;}
    100%{opacity:1;}
}
@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes moveFromsoso1 {
	0% { -webkit-transform: translateY(-100%) scale(1); opacity:0;}
	 70%,90%{ -webkit-transform: translateY(-10%) scale(1); opacity:1;}
	60%,80%,100%{-webkit-transform: translateY(0) scale(1);opacity:1;}
}
	
.sec2-show .scale-show1{-webkit-animation:fadeInshow .8s 1s ease both;
    -moz-animation:fadeInshow .8s 1s ease both;}
.sec2-show .scale-show2{-webkit-animation:fadeInshow .8s 1.6s ease both;
    -moz-animation:fadeInshow .8s 1.6s ease both;}
	@-webkit-keyframes fadeInshow{
   0%{opacity:0;-webkit-transform:scale(1);}
    100%{opacity:1;-webkit-transform:scale(1);}
}	
.sec3-show .fadein-up1{-webkit-animation:musicRotate 1.5s ease both;
    -moz-animation:musicRotate 1.5s ease both;}
	@-webkit-keyframes musicRotate {
    0% {-webkit-transform: scale(0.5); opacity:1 }
    100% {-webkit-transform: scale(1); opacity:1}
}
@-webkit-keyframes moveFromsole {
	0%% { -webkit-transform:scale(0);opacity:0;}
	15%,75% { -webkit-transform: scale(0.5);opacity:0.5;}
	30%,60% { -webkit-transform: scale(0.8);opacity:0.8;}
	45%,100% { -webkit-transform:scale(1);opacity:1;}
}
.sec3-show .scale-show1{-webkit-animation:moveFromsoline .8s .7s ease both;
    -moz-animation:moveFromsoline .8s .7s ease both;}
@-webkit-keyframes moveFromsoline {
	from { -webkit-transform: translateY(-100%) scale(1,0.0001); opacity:0;}
	to{-webkit-transform: translateY(0) scale(1,1);opacity:1;}
}
.sec4-show .fadein-up1{-webkit-animation:moveFromsoso1 1.2s ease both;
    -moz-animation:moveFromsoso1 1.2s ease both;}
.sec4-show .scale-show1{-webkit-animation:fadeInshowup .8s 1s ease both;
    -moz-animation:fadeInshowup .8s 1s ease both;}	
.sec4-show .scale-show2{-webkit-animation:fadeInshowup .8s 1.6s ease both;
    -moz-animation:fadeInshowup .8s 1.6s ease both;}
.sec5-show .fadein-up1{-webkit-animation:moveFrom 1.5s ease both;
    -moz-animation:moveFrom 1.5s ease both;}
@-webkit-keyframes moveFrom {
	0% { -webkit-transform:scale(0.05,0.05);opacity:1; top:0%; right:0%;}
	50%{-webkit-transform:scale(0.05,0.05); opacity:1;top:40%; left:0%;}
	100%{-webkit-transform:scale(1,1); opacity:1;}
}	
@-webkit-keyframes fadeInshowup {
	0% { -webkit-transform: translateY(100%);opacity:0; }
	
	100%{-webkit-transform: translateY(0%); opacity:1;}
}
	

@-webkit-keyframes moveFromsoline1 {
	from { -webkit-transform: translateY(100%) scale(1,0.0001); opacity:0;}
	to{-webkit-transform: translateY(0) scale(1,1);opacity:1;}
}

.sec6-show .fadein-up1{-webkit-animation:movedown 1.8s ease both;
    -moz-animation:movedown 1.8s ease both;}	
@-webkit-keyframes movedown {
	from { -webkit-transform: translate(-100%,-100%); opacity:0; }
	to{-webkit-transform: translate(0%) scale(1,1); opacity:1;}
}	


@-webkit-keyframes fadeInline1{
   0%{opacity:1;-webkit-transform:scale(0.0001,1);}
    100%{opacity:1;-webkit-transform:scale(1,1);}
}
@-webkit-keyframes moveFrom1 {
	from { -webkit-transform: translate(100%,-100%); opacity:0; }
	to{-webkit-transform: translate(0%) scale(1,1); opacity:1;}
}

@-webkit-keyframes rubberBand {
  0% {
  	-webkit-opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
  	-webkit-opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.sec7-show .fadein-up1{-webkit-animation:moveFromright .8s ease both;
    -moz-animation:moveFromright .8s ease both;}
	
@-webkit-keyframes moveFromright {
	from { -webkit-transform: translateX(100%);opacity:0; }
	to{-webkit-transform: translateX(0); opacity:1;}
}	
.sec7-show .scale-shows{-webkit-animation:moveFromsoline1 1.2s .8s ease both;
    -moz-animation:moveFromsoline1 1.2s .8s ease both;}
@-webkit-keyframes moveFromsoline1 {
	from { -webkit-transform: translateY(100%) scale(1,0.0001); opacity:0;}
	to{-webkit-transform: translateY(0) scale(1,1);opacity:1;}
}
.sec8-show .fadein-up1{-webkit-animation:moveFromsorig .8s ease both;
    -moz-animation:moveFromsorig .8s ease both;}
@-webkit-keyframes moveFromsorig {
	from { -webkit-transform:scale(0); opacity:0;}
	to{-webkit-transform:scale(1);opacity:1;}
}	
.sec8-show .scale-show1{-webkit-animation:moveFromup .8s .7s ease both;
    -moz-animation:moveFromup .8s .7s ease both;}

.sec8-show .scale-show2{-webkit-animation:moveFromup .8s 1.4s ease both;
    -moz-animation:moveFromup .8s 1.4s ease both;}		
@-webkit-keyframes moveFromleft {
	from { -webkit-transform: translateX(-100%);opacity:0; }
	to{-webkit-transform: translateX(0); opacity:1;}
}
@-webkit-keyframes moveFromsmal {
	 0%{opacity:1;-webkit-transform:scale(0.5);
        }	
   
		100%{opacity:1;-webkit-transform:scale(1);
        }
}
.sec9-show .fadein-up1{-webkit-animation:moveFromdown .8s ease both;
    -moz-animation:moveFromdown .8s ease both;}
@-webkit-keyframes moveFromdown {
	from { -webkit-transform: translateY(-100%);opacity:0; }
	to{-webkit-transform: translateY(0); opacity:1;}
}
.sec9-show .scale-show1{-webkit-animation:moveFromright .8s .7s ease both;
    -moz-animation:moveFromright .8s .7s ease both;}

.sec9-show .scale-show2{-webkit-animation:moveFromleft.8s 1.4s ease both;
    -moz-animation:moveFromleft .8s 1.4s ease both;}
.sec10-show .fadein-up1{-webkit-animation:fadeInline1 .8s ease both;
    -moz-animation:fadeInline1 .8s ease both;}	
.sec10-show .scale-show1{
  -webkit-animation:rubberBand 1.5s .8s ease both;
    -moz-animation:rubberBand 1.5s .8s ease both;
}
.sec10-show .scale-show2{-webkit-animation:fadeInshow .8s 1.4s ease both;
    -moz-animation:fadeInshow .8s 1.4s ease both;}	
.sec11-show .fadein-up1{-webkit-animation:musicRotateu 1s ease both;
    -moz-animation:musicRotateu 1s ease both;}
	@-webkit-keyframes musicRotateu {
    0% {-webkit-transform:translateY(100%); opacity:0 }
    100% {-webkit-transform: translateY(0) scale(1); opacity:1}
}
.sec11-show .fadein-up2{-webkit-animation:musicRotateu1 1s .6s ease both;
    -moz-animation:musicRotateu1 1s .6s ease both;}
.sec11-show .fadein-up3{-webkit-animation:musicRotateu1 1s 1.2s ease both;
    -moz-animation:musicRotateu1 1s 1.2s ease both;}
	@-webkit-keyframes musicRotateu1 {
    0% {-webkit-transform:scale(1); opacity:0 }
    100% {-webkit-transform:scale(1); opacity:1}
}
.sec12-show .fadein-up1{-webkit-animation:moveFromdown .8s ease both;
    -moz-animation:moveFromdown .8s ease both;}	
.sec12-show .scale-show1{-webkit-animation:moveFromsmal .8s .7s ease both;
    -moz-animation:moveFromsmal .8s .7s ease both;}			
.scale {
	-webkit-animation: moveFromsmall ease 1.5s 1.1s both infinite;
	animation: moveFromsmall ease 1.5s both 1.1s infinite;
}
.scale1 {
	-webkit-animation: moveFromsmall ease 1.5s 1.5s both infinite;
	animation: moveFromsmall ease 1.5s both 1.5s infinite;
}
@-webkit-keyframes moveFromsmall {
	 0%,100%{opacity:0.2;-webkit-transform:scale(1);
        }
	 20%,80%{opacity:0.4;-webkit-transform:scale(1);
        }	
	 40%,70%{opacity:0.6;-webkit-transform:scale(1);
        }		
    50%{opacity:0.8;-webkit-transform:scale(1);
        }
}

/*loading*/
.mui-act-loading{
    width:100%;
    height: 100%;
}
.mui-act-loading .load-mask{
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.8;
}
.loading{
    width: 12px;
    height: 12px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 100;
    margin: -6px 0 0 -6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
    -webkit-animation: loading 1.1s ease infinite;
    animation: loading 1.1s ease infinite;
}
.u-audio {
	position: absolute;
	bottom:8%;
	left:6.0%;
	width:8.43%;
	height:5.24%;
	z-index: 200;
}
/*loading animate*/
@-webkit-keyframes loading{
    0%,100%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.1),
        0 24px 0 rgba(218,218,218,0.25),
        -17px 17px 0 rgba(218,218,218,0.3),
        -24px 0 0 rgba(218,218,218,0.4),
        -17px -17px 0 rgba(218,218,218,0.5),
        0 -24px 0 rgba(218,218,218,0.6),
        17px -17px 0 rgba(218,218,218,0.7),
        24px 0 0 rgba(218,218,218,1);
    }
    12.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,1),
        0 24px 0 rgba(218,218,218,0.1),
        -17px 17px 0 rgba(218,218,218,0.25),
        -24px 0 0 rgba(218,218,218,0.3),
        -17px -17px 0 rgba(218,218,218,0.4),
        0 -24px 0 rgba(218,218,218,0.5),
        17px -17px 0 rgba(218,218,218,0.6),
        24px 0 0 rgba(218,218,218,0.8);
    }
    25%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.7),
        0 24px 0 rgba(218,218,218,1),
        -17px 17px 0 rgba(218,218,218,0.1),
        -24px 0 0 rgba(218,218,218,0.25),
        -17px -17px 0 rgba(218,218,218,0.3),
        0 -24px 0 rgba(218,218,218,0.4),
        17px -17px 0 rgba(218,218,218,0.5),
        24px 0 0 rgba(218,218,218,0.7);
    }
    37.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.6),
        0 24px 0 rgba(218,218,218,0.7),
        -17px 17px 0 rgba(218,218,218,1),
        -24px 0 0 rgba(218,218,218,0.1),
        -17px -17px 0 rgba(218,218,218,0.25),
        0 -24px 0 rgba(218,218,218,0.3),
        17px -17px 0 rgba(218,218,218,0.4),
        24px 0 0 rgba(218,218,218,0.6);
    }
    50%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.5),
        0 24px 0 rgba(218,218,218,0.6),
        -17px 17px 0 rgba(218,218,218,0.7),
        -24px 0 0 rgba(218,218,218,1),
        -17px -17px 0 rgba(218,218,218,0.1),
        0 -24px 0 rgba(218,218,218,0.25),
        17px -17px 0 rgba(218,218,218,0.3),
        24px 0 0 rgba(218,218,218,0.5);
    }
    62.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.4),
        0 24px 0 rgba(218,218,218,0.5),
        -17px 17px 0 rgba(218,218,218,0.6),
        -24px 0 0 rgba(218,218,218,0.7),
        -17px -17px 0 rgba(218,218,218,1),
        0 -24px 0 rgba(218,218,218,0.1),
        17px -17px 0 rgba(218,218,218,0.25),
        24px 0 0 rgba(218,218,218,0.4);
    }
    75%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.3),
        0 24px 0 rgba(218,218,218,0.4),
        -17px 17px 0 rgba(218,218,218,0.5),
        -24px 0 0 rgba(218,218,218,0.6),
        -17px -17px 0 rgba(218,218,218,0.7),
        0 -24px 0 rgba(218,218,218,1),
        17px -17px 0 rgba(218,218,218,0.1),
        24px 0 0 rgba(218,218,218,0.3);
    }
    87.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.25),
        0 24px 0 rgba(218,218,218,0.3),
        -17px 17px 0 rgba(218,218,218,0.4),
        -24px 0 0 rgba(218,218,218,0.5),
        -17px -17px 0 rgba(218,218,218,0.6),
        0 -24px 0 rgba(218,218,218,0.7),
        17px -17px 0 rgba(218,218,218,1),
        24px 0 0 rgba(218,218,218,0.2);
    }
}
@keyframes loading{
    0%,100%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.1),
        0 24px 0 rgba(218,218,218,0.25),
        -17px 17px 0 rgba(218,218,218,0.3),
        -24px 0 0 rgba(218,218,218,0.4),
        -17px -17px 0 rgba(218,218,218,0.5),
        0 -24px 0 rgba(218,218,218,0.6),
        17px -17px 0 rgba(218,218,218,0.7),
        24px 0 0 rgba(218,218,218,1);
    }
    12.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,1),
        0 24px 0 rgba(218,218,218,0.1),
        -17px 17px 0 rgba(218,218,218,0.25),
        -24px 0 0 rgba(218,218,218,0.3),
        -17px -17px 0 rgba(218,218,218,0.4),
        0 -24px 0 rgba(218,218,218,0.5),
        17px -17px 0 rgba(218,218,218,0.6),
        24px 0 0 rgba(218,218,218,0.8);
    }
    25%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.7),
        0 24px 0 rgba(218,218,218,1),
        -17px 17px 0 rgba(218,218,218,0.1),
        -24px 0 0 rgba(218,218,218,0.25),
        -17px -17px 0 rgba(218,218,218,0.3),
        0 -24px 0 rgba(218,218,218,0.4),
        17px -17px 0 rgba(218,218,218,0.5),
        24px 0 0 rgba(218,218,218,0.7);
    }
    37.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.6),
        0 24px 0 rgba(218,218,218,0.7),
        -17px 17px 0 rgba(218,218,218,1),
        -24px 0 0 rgba(218,218,218,0.1),
        -17px -17px 0 rgba(218,218,218,0.25),
        0 -24px 0 rgba(218,218,218,0.3),
        17px -17px 0 rgba(218,218,218,0.4),
        24px 0 0 rgba(218,218,218,0.6);
    }
    50%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.5),
        0 24px 0 rgba(218,218,218,0.6),
        -17px 17px 0 rgba(218,218,218,0.7),
        -24px 0 0 rgba(218,218,218,1),
        -17px -17px 0 rgba(218,218,218,0.1),
        0 -24px 0 rgba(218,218,218,0.25),
        17px -17px 0 rgba(218,218,218,0.3),
        24px 0 0 rgba(218,218,218,0.5);
    }
    62.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.4),
        0 24px 0 rgba(218,218,218,0.5),
        -17px 17px 0 rgba(218,218,218,0.6),
        -24px 0 0 rgba(218,218,218,0.7),
        -17px -17px 0 rgba(218,218,218,1),
        0 -24px 0 rgba(218,218,218,0.1),
        17px -17px 0 rgba(218,218,218,0.25),
        24px 0 0 rgba(218,218,218,0.4);
    }
    75%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.3),
        0 24px 0 rgba(218,218,218,0.4),
        -17px 17px 0 rgba(218,218,218,0.5),
        -24px 0 0 rgba(218,218,218,0.6),
        -17px -17px 0 rgba(218,218,218,0.7),
        0 -24px 0 rgba(218,218,218,1),
        17px -17px 0 rgba(218,218,218,0.1),
        24px 0 0 rgba(218,218,218,0.3);
    }
    87.5%{
        box-shadow:
        17px 17px 0 rgba(218,218,218,0.25),
        0 24px 0 rgba(218,218,218,0.3),
        -17px 17px 0 rgba(218,218,218,0.4),
        -24px 0 0 rgba(218,218,218,0.5),
        -17px -17px 0 rgba(218,218,218,0.6),
        0 -24px 0 rgba(218,218,218,0.7),
        17px -17px 0 rgba(218,218,218,1),
        24px 0 0 rgba(218,218,218,0.2);
    }
}