/*header*/
.headerline{
	width: 80vw;
	height: 0.875vw;
	background-color: #15837B;
	margin-left: 10vw;
}
.header{
	width: 80vw;
	margin-left: 10vw;
	background-color:#F7F8F8;
}
.top{
	width:80vw;
	display: block;
}
/*nav*/
.nav{
	width:80vw;
	position:relative;
	background-color:#15837B;
	margin-left: 10vw;
  	z-index: 2;
}
.nav ul{
	width:90%;
	display: -webkit-flex; /* Safari */
  	display: flex;
  	justify-content:center;
  	align-items:center;
  	margin-left: 4vw;
  	background-color:#15837B;
}
.nav ul li{
	width:80%;
	z-index:99999;
	line-height: 1.8vw;
	margin-left: 0.75vw;
	margin-right: 0.75vw;
	background-color:#15837B;
}
.nav ul li h3{
	font-size: 0.9vw;
	color: #ffffff;
	font-weight: normal;
	background-color:#15837B;
}
.nav ul li a{
	color: #ffffff;
	font-size: 1vw;
	text-align: center;
	white-space:nowrap;	
}
.nav ul li .sub{
	width:auto;
	position:absolute;
	background:#15837B;
	visibility:hidden;
	display: -webkit-flex; /* Safari */
  	display: flex;
  	justify-content:center;
  	align-items: center;
  	flex-direction: column;
  	flex-wrap: wrap;
  	opacity: 0;
  	-moz-opacity:0;
  	-khtml-opacity: 0;
 	transition: .3s;
  	transform-origin: top;
  	margin-left: 1.4vw;
 }
.nav ul li .sub a{
	width:100%;
	color: #ffffff;
	background:#15837B;
	font-size: 0.9vw;
	line-height: 2vw;
	text-align: center;
	white-space:nowrap;
	display: -webkit-flex; /* Safari */
  	display: flex;
  	justify-content:center;
  	align-items: center;
  	padding: 0 1vw 0 1vw;  	
}
.nav ul li .sub a:hover{
	background: #28AAC1;
}
.nav ul li:hover .sub{
	visibility:visible;
	background:#28AAC1;
	opacity: 100;
	transform: translateX(-40%) scaleY(1);
}
/*banner*/
.banner{
	width: 80vw;
	height: 20vw;
	overflow: hidden;
	z-index: 0;
	margin-left: 10vw;
}
.banner-img{
	width: 80vw;
	height: 20vw;
	display: block;
	border: 0;
}
#wrap {
	width: 80vw;
	height: auto;
	margin: auto;
	position: relative;
	display: -webkit-flex; /* Safari */
  	display: flex;
  	justify-content:center;
}

#box {
	width: 80vw;
	height: auto;
	overflow: hidden;
}

#wrap .ul1 {
	width: 110%;
	height: 110%;
	position: relative;
}

#wrap .ul1 li {
	float: left;
	width: 100%;
	height: auto;
}
#wrap .ul1 img {
	display: none;
	width:80vw;
	object-fit: cover;
	animation: myScale 2s 1 ease-in-out;
}
@keyframes myScale {
  0% {
    transform: scale(1.1);
  }
 100% {
    transform: scale(1.0);
  }
}
#wrap .sp {
	position: absolute;
	top: 45%;
	transform: translate(0,-50%);
	display: block;
	width: 3vw;
	font-size: 2.5vw;
	text-align: center;
	color: #fff;
	cursor: pointer;
	display: none;
}

#wrap:hover .sp{
	display: block;
}
#wrap .sp1 {
	left: 1.25vw;
}

#wrap .sp2 {
	right: 1.25vw;
}
#wrap .p {
	position:absolute;
	padding: 2vw 0 0 2vw;
	bottom: 4vw;
	text-align: center;
	z-index: 1;
	overflow: hidden;
}

#wrap .p a {
	display: inline-block;
	width: 0.9vw;
	height: 0.9vw;
	margin-left:0.45vw;
	margin-right:0.45vw;
	border-radius: 50%;
	background-color: #ffffff;
	z-index: 1;
}
#wrap .p .active {
	background-color: #0B4FA0;
	z-index: 1;
}
#wrap .p a:before {
	content:"";
	position:absolute;
	bottom: 20%;
	height: 0.20vw;
	width: 4vw;
	background: #FFFFFF;
	z-index: -2;
	margin-left:-0.45vw;
}

#wrap .p a:after {
	content:"";
	position:absolute;
	bottom: 20%;
	height: 0.20vw;
	width: 4vw;
	background: #FFFFFF;
	z-index: -2;
	margin-left:-3.45vw;
}