body{border: 15px solid #DDD;}
.bottombox{width:100%;height: calc(100vh - 30px); background: #000;color: #DDD;}
.bottombox ul{width: 100%;-webkit-transition: all 0.6s ease  0.3s;-moz-transition: all 0.6s ease  0.3s;transition: all 0.6s ease 0.3s;opacity: 0}
.bottombox:hover ul{opacity: 1;-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.bottombox ul li{width:calc(33.333% - 10px);float: left;padding: 0.3rem;}
.bottombox ul li:nth-child(1){font-weight: bold}

nav{padding-right: 2rem; padding-top: 5rem;}

.bottombox nav{position:fixed;bottom:15px;line-height:1;left:calc(66.666% - 20px);z-index: 2;padding-left: 4px}

.middlebox{width:calc(66.666% - 20px);height: 66.6666vh; background: #DDD; position: absolute;bottom:15px; z-index: 2;left: 0;}
.middlebox:hover .topbox{opacity: 0.5;pointer-events: none;}
.middlebox .inbox{width:100%; height: 66.66666vh; position: relative;}

.middlebox nav{position:fixed;bottom:15px;line-height:1;left:calc(33.333% - 10px); color: #000;z-index: 10;padding-left: 4px}

.mySwiper{opacity: 0;}

.topbox{width:calc(33.333% - 23px);height:calc(33.333vh - 15px);background: #000;position: fixed;bottom:15px; z-index: 3;left: 15px;}
.topbox .inbox{width:100%; height: calc(33.333vh - 15px); position: relative;}
.topbox .inbox h3{position: absolute;font-size:2rem;line-height: 1;}
.topbox .inbox h3:nth-child(1){background: #DDD;color: #000;bottom:15px;padding-right:0.5rem; position: fixed}
.topbox .inbox h3:nth-child(2){right: 0;top:0;}

.content{font-size: 1.5rem;height:70vh;opacity: 0;padding:0.2rem 0;position: absolute;width:60%; margin-top:15%; margin-left:20%; margin-right: 20%;-webkit-transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;transition: all 0.2s ease 0s;/*padding-right: 1rem;*/text-align:justify;pointer-events: none;}
/*.topbox .inbox:hover .content{opacity: 1;-webkit-transition: all 0.3s ease 0.8s;-moz-transition: all 0.3s ease 0.8s;transition: all 0.3s ease 0.8s; }*/
/*.topbox .inbox:hover h3{opacity: 0;}*/

.bottombox,.middlebox,.topbox{opacity: 0;font-size:2rem; color: #DDD;}

.close{width: 2rem;height: 2rem;position:absolute;right:2rem;top:2rem; background:url("../Images/icon_Close.svg") no-repeat center center; background-size: 100% auto; z-index: 5;cursor:pointer; opacity: 0}
.topbox .close{ bottom: 6rem;top: auto;right:50%; margin-right:-1rem;}

.beian{position:fixed; width:100%;bottom:15px; z-index:30; font-size:14px; opacity:0.5; text-align:right;/*pointer-events:none;*/padding-right:3rem;}

@media screen and (max-width: 780px) {
	.bottombox ul li{font-size: 0.9rem;}
	.topbox .inbox h3{font-size:1.5rem;}
	nav{font-size: 1.5rem;}
	.content{font-size: 1.1rem;width:80%; margin-top:10vh; margin-left: 10%;/* margin-top: 1.5rem;height:calc(33.333vh - 3.5rem);*/}
	.topbox .close{ bottom: 3rem;}
	.beian{display: none}
	
}


.fast-line-v {
  position: absolute;
  height: 30vh;
  width: 2px;
  background: #FFF;
  border-radius: 50%;
	display: none;
}
.fast-line-v:nth-child(1) {
  left: 33.333%;;
  top: 30%;
  -webkit-animation: line-v 0.6s ease-in-out infinite;
  animation: line-v 0.6s ease-in-out infinite;
}
.fast-line-v:nth-child(2) {
  left:66.666%;
  top:  70%;
  -webkit-animation: line-v 1.8s linear infinite;
  animation: line-v 0.8s linear infinite;
}




.fast-line-h {
  position: absolute;
  height: 2px;
  width: 30%;
  background: #fff;
  border-radius: 50%;display: none;
}
.fast-line-h:nth-child(3) {
  left: 50%;
  top: 33.333%;
  -webkit-animation: line-h 0.6s ease-in-out infinite;
  animation: line-h 0.6s ease-in-out infinite;
}
.fast-line-h:nth-child(4) {
  left: 80%;
  top: 66.666%;
  -webkit-animation: line-h 1.8s linear infinite;
  animation: line-h 0.8s linear infinite;
}



@keyframes line-v {
  0% {
    top: 100%;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}
@-webkit-keyframes line-v {
  0% {
    top: 100%;
  }
  100% {
    top: -100%;
    opacity: 0;
  }
}

@keyframes line-h {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}
@-webkit-keyframes line-h {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}