@-webkit-keyframes overbox0 {
  0%{width:0;}
  80%{width:100%;}
  100%{ width:0;}
}
@keyframes overbox0 {
  0%{width:0;}
  80%{width:100%;}
  100%{ width:0;}
}

@-webkit-keyframes overbox99 {
  0%{width:0; left:0; }
  20%{ width:143px; left:0; }
  30%{width:143px; left:0; }
  60%{ width:273px; left:0; }
  65%{ width:273px; left:0; }
  100%{ width:273px; left:273px; }
}
@keyframes overbox99 {
  0%{width:0; left:0; }
  20%{ width:143px; left:0; }
  30%{width:143px; left:0; }
  60%{ width:273px; left:0; }
  65%{ width:273px; left:0; }
  100%{width:273px; left:273px; }
}

@-webkit-keyframes overbox1 { 0%{width:0;} 35%{width:calc(90% + 30px);} 85%{width:calc(90% + 30px);} 100%{width:0;}}
@keyframes overbox1 { 0%{width:0;} 35%{width:calc(90% + 30px);} 85%{width:calc(90% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox2 { 0%{width:0;} 35%{width:10%;} 85%{width:10%;} 100%{width:0;}}
@keyframes overbox2 { 0%{width:0;} 35%{width:10%;} 85%{width:10%;} 100%{width:0;}}

@-webkit-keyframes overbox3 { 0%{width:0;} 35%{width:calc(80% + 30px);} 85%{width:calc(80% + 30px);} 100%{width:0;}}
@keyframes overbox3 { 0%{width:0;} 35%{width:calc(80% + 30px);} 85%{width:calc(80% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox4 { 0%{width:0;} 35%{width:20%;} 85%{width:20%;} 100%{width:0;}}
@keyframes overbox4 { 0%{width:0;} 35%{width:20%;} 85%{width:20%;} 100%{width:0;}}

@-webkit-keyframes overbox5 { 0%{width:0;} 35%{width:calc(70% + 30px);} 85%{width:calc(70% + 30px);} 100%{width:0;}}
@keyframes overbox5 { 0%{width:0;} 35%{width:calc(70% + 30px);} 85%{width:calc(70% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox6 { 0%{width:0;} 35%{width:30%;} 85%{width:30%;} 100%{width:0;}}
@keyframes overbox6 { 0%{width:0;} 35%{width:30%;} 85%{width:30%;} 100%{width:0;}}

@-webkit-keyframes overbox7 { 0%{width:0;} 35%{width:calc(60% + 30px);} 85%{width:calc(60% + 30px);} 100%{width:0;}}
@keyframes overbox7 { 0%{width:0;} 35%{width:calc(60% + 30px);} 85%{width:calc(60% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox8 { 0%{width:0;} 35%{width:40%;} 85%{width:40%;} 100%{width:0;}}
@keyframes overbox8 { 0%{width:0;} 35%{width:40%;} 85%{width:40%;} 100%{width:0;}}

@-webkit-keyframes overbox9 { 0%{width:0;} 35%{width:calc(50% + 30px);} 85%{width:calc(50% + 30px);} 100%{width:0;}}
@keyframes overbox9 { 0%{width:0;} 35%{width:calc(50% + 30px);} 85%{width:calc(50% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox10 { 0%{width:0;} 35%{width:50%;} 85%{width:50%;} 100%{width:0;}}
@keyframes overbox10 { 0%{width:0;} 35%{width:50%;} 85%{width:50%;} 100%{width:0;}}

@-webkit-keyframes overbox11 { 0%{width:0;} 35%{width:calc(40% + 30px);} 85%{width:calc(40% + 30px);} 100%{width:0;}}
@keyframes overbox11 { 0%{width:0;} 35%{width:calc(40% + 30px);} 85%{width:calc(40% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox12 { 0%{width:0;} 35%{width:60%;} 85%{width:60%;} 100%{width:0;}}
@keyframes overbox12 { 0%{width:0;} 35%{width:60%;} 85%{width:60%;} 100%{width:0;}}

@-webkit-keyframes overbox13 { 0%{width:0;} 35%{width:calc(30% + 30px);} 85%{width:calc(30% + 30px);} 100%{width:0;}}
@keyframes overbox13 { 0%{width:0;} 35%{width:calc(30% + 30px);} 85%{width:calc(30% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox14 { 0%{width:0;} 35%{width:70%;} 85%{width:70%;} 100%{width:0;}}
@keyframes overbox14 { 0%{width:0;} 35%{width:70%;} 85%{width:70%;} 100%{width:0;}}

@-webkit-keyframes overbox15 { 0%{width:0;} 35%{width:calc(20% + 30px);} 85%{width:calc(20% + 30px);} 100%{width:0;}}
@keyframes overbox15 { 0%{width:0;} 35%{width:calc(20% + 30px);} 85%{width:calc(20% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox16 { 0%{width:0;} 35%{width:80%;} 85%{width:80%;} 100%{width:0;}}
@keyframes overbox16 { 0%{width:0;} 35%{width:80%;} 85%{width:80%;} 100%{width:0;}}

@-webkit-keyframes overbox17 { 0%{width:0;} 35%{width:calc(10% + 30px);} 85%{width:calc(10% + 30px);} 100%{width:0;}}
@keyframes overbox17 { 0%{width:0;} 35%{width:calc(10% + 30px);} 85%{width:calc(10% + 30px);} 100%{width:0;}}
@-webkit-keyframes overbox18 { 0%{width:0;} 35%{width:90%;} 85%{width:90%;} 100%{width:0;}}
@keyframes overbox18 { 0%{width:0;} 35%{width:90%;} 85%{width:90%;} 100%{width:0;}}


.enterbox-z1 .line:before,
.enterbox-z1 .line:after{
transition:All 5s ease;
-webkit-transition:All 5s ease;
-moz-transition:All 5s ease;
-o-transition:All 5s ease;	
}

.enterbox{height:100vh;width:100%;/*position:absolute;*/ position:fixed; left:0;top:0;z-index:1000; background:#00a1e9; overflow:hidden;}
.enterbox .midLogo{ display:block; position:absolute; left:50%; top:50%; margin-left:-0.78rem; margin-top:-0.68rem; height:0.32rem; background:url(../images/logo5.png) no-repeat; background-size:1.56rem; overflow:hidden;}
.loadbox-txt-m--scale[data-animated] .midLogo{ -webkit-animation:overbox0 5.6s;animation:overbox0 5.6s; }

.enterbox .midLogo2{ display:none; position:absolute; left:50%; top:50%; margin-left:-137px; width:273px; margin-top:-21px; height:42px; overflow:hidden;}
.enterbox .midLogo2 .zz{ position:absolute; left:0; top:0; background:url(../images/logo4.png) left no-repeat; background-size:273px; height:42px;}
.loadbox-txt-m--scale[data-animated] .midLogo2 .zz{ -webkit-animation:overbox99 5.6s;animation:overbox99 5.6s; }

.enterbox-z1{height:100%;width:100%;position:absolute;left:0;top:0;z-index:93; }
.enterbox-z1 ul{ height:100%; display: flex;
  display: -webkit-flex; flex-direction: column;
    justify-content: space-around;}
.enterbox-z1 .line{ position:relative; width:100%; height:0.3rem;/* background:rgba(255,255,255,0.2);*/ }
.enterbox-z1 .line:before{ content:''; position:absolute; left: 0; bottom:0; width:0; height:calc(100% - 0.08rem); animation-fill-mode:both;}
.enterbox-z1 .line:after{ content:''; position:absolute; right:0; top:0; width:0; height:calc(100% - 0.08rem); animation-fill-mode:both;}

.enterbox-z1 .line:nth-of-type(1):before{ background:#33baf5; -webkit-animation:overbox1 5.5s ease;animation:overbox1 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(1):after{ background:#0067ed; -webkit-animation:overbox2 5.5s ease;animation:overbox2 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(2):before{ background:#2bb7f5; -webkit-animation:overbox3 5.5s ease;animation:overbox3 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(2):after{ background:#006cee; -webkit-animation:overbox4 5.5s ease;animation:overbox4 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(3):before{ background:#23b4f5; -webkit-animation:overbox5 5.5s ease;animation:overbox5 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(3):after{ background:#0072ef; -webkit-animation:overbox6 5.5s ease;animation:overbox6 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(4):before{ background:#04a9f5; -webkit-animation:overbox7 5.5s ease;animation:overbox7 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(4):after{ background:#0077ef; -webkit-animation:overbox8 5.5s ease;animation:overbox8 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(5):before{ background:#00a1f5; -webkit-animation:overbox9 5.5s ease;animation:overbox9 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(5):after{ background:#007df0; -webkit-animation:overbox10 5.5s ease;animation:overbox10 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(6):before{ background:#0098f5; -webkit-animation:overbox11 5.5s ease;animation:overbox11 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(6):after{ background:#0081f0; -webkit-animation:overbox12 5.5s ease;animation:overbox12 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(7):before{ background:#0091f5; -webkit-animation:overbox13 5.5s ease;animation:overbox13 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(7):after{ background:#0086f1; -webkit-animation:overbox14 5.5s ease;animation:overbox14 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(8):before{ background:#0088f4; -webkit-animation:overbox15 5.5s ease;animation:overbox15 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(8):after{ background:#0086f1; -webkit-animation:overbox16 5.5s ease;animation:overbox16 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(9):before{ background:#0096f3; -webkit-animation:overbox17 5.5s ease;animation:overbox17 5.5s ease;animation-fill-mode:both;}
.enterbox-z1 .line:nth-of-type(9):after{ background:#0090f2; -webkit-animation:overbox18 5.5s ease;animation:overbox18 5.5s ease;animation-fill-mode:both;}

.Phone-Box{ display:none;}

@media screen and ( max-width:1440px ){
	.enterbox .midLogo{ margin-top:-0.64rem;}
}

@media screen and ( max-width:1366px ){
	.enterbox .midLogo{ margin-top:-0.58rem;}
}

@media screen and ( max-width:1024px ){
	.enterbox-z1, .PC-Box{ display:none;}
	.Phone-Box{ display:block;}
	.enterbox{ background:#fff;}
	.enterbox .midLogo{ margin-left:-1.38rem; margin-top:-0.21rem; height:0.42rem; background-size:2.76rem;}
	.enterbox .midLogo2{ display:block;}
}






















