:root {
  --main_c :#2caad2;
}


body {height:100%;   }
html {height:100%}

 
#wrap {height:100%; position:relative; width:100%;   display:inline-block}

#container {  width:100%; display:inline-block; font-size:17px; color:#111; line-height:1.3 }

.main_con {width:100%;   margin:0 auto;  }
.in {width:100%; margin:0 auto; max-width:1100px; }
.sub_cont .in{margin-top:40px;}
.flex {display:flex}

.red {color:var(--main_c)}


hr {height:90px}
h3 {font-size:2em}
section {}

.arrow { position: absolute;   }
.arrow::after {
	position: absolute;
    right:0; 
	top: 30%;
	content: '';
	width: 35%;  
	height: 35%; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
		transform: rotate( 45deg );

} 
.arrow::before {
  content:'';
  width:80%;
  height:2px;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  background:#fff
}

 

footer {width:100%; background-color:#333; display:inline-block;  font-size:.90em;  font-weight:400;  padding:60px 0 60px 0; box-sizing:border-box; line-height:1.5; text-align:center; color:#fff}
footer h2 {margin-bottom:10px; font-size:1.2em;  }
footer div {  box-sizing:border-box; width:100%; display:inline-block; letter-spacing:0;  }

@media all and (max-width:1100px) {

    .in {padding-left:4%; padding-right:4%; box-sizing:border-box}
/* 	.sub_cont .in{margin-top:40px;} */
}
@media all and (max-width:900px) {
		#container {  font-size:15px }

		.flex {flex-wrap:wrap}
		h3 {font-size:1.5em}
		footer {line-height:1.4em; padding-right:0}
		footer .top_link {margin-right:0}
		footer h2 {margin-bottom:10px; font-size:1.2em}

}


a.basic_btn {background-color:#000;   font-size:1.2rem; box-sizing:border-box; padding:0 25px; width:180px; line-height:55px; color:#fff; border-radius:5px; display:flex; transition: all 0.3s ease-out; }
a.basic_btn:after {content:'→'; margin-left:auto}
a.basic_btn:hover {background-color:var(--main_c)} 
a.basic_btn + a.basic_btn {margin-left:5px}

a.basic { border-radius:50px; background-color:var(--main_c); color:#fff;  padding:14px 0; width:200px; text-align:center;  display:inline-block;   transition: 0.3s ease-in-out; font-weight:600; font-size:1.09em }


.vi {position:relative; width:100%; height:100vh; margin-top:-90px }

.main_vi {height: 100vh;}

@media (min-width:1001px) {
	.pc_none {display: none !important}
}
@media (max-width:1000px) {
	.m_none {display: none !important}
    .main_vi {width:100%; height:100%; }
	.vi {height:125vw}
	a.basic_btn{font-size:1rem;padding:0 20px;}
}

 
  
 .side_text {position:absolute; z-index:999; left:50%;  width:70px; margin-left:-35px; bottom:0;  text-align:Center; 
    
    padding-bottom:90px;
	 }

.side_line {position: absolute;
    width: 1px;
    height: 80px;
    background:rgba(255,255,255,.2);
    transition: all 0.3s;
    display: block;
    left:50%;
    bottom: 0; overflow:hidden}

.side_line p {
    position: absolute;
    width: 1px;
    height: 40px;
    background: #fff;
    transition: all 0.3s;
    display: block;
    left: 0;
    top: 0;
	-webkit-animation: side_line 4s infinite linear;
	  -moz-animation: side_line 4s infinite linear;
	  -ms-animation: side_line 4s infinite linear;
	  -o-animation: side_line 4s infinite linear;
	  animation: side_line 4s infinite linear;
}



@-webkit-keyframes side_line {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
 100% {
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
	}
 

}
 

 


.scroll-btn {
	 margin:0 auto; 
	position: static;
	width:100px;  
  
	text-align: center;
	white-space:nowrap; color:#fff;   
}
 
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;
	}

 @-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}



  


.banner {border-bottom:1px solid #666}
.banner ul {border-left:1px solid #666}
.banner ul li {width:25%; font-size:1.3em; font-weight:500;  border-right:1px solid #666; box-sizing:border-box; padding:18px 0;  display:flex; align-items:center; justify-content:center;transition: 0.2s ease-in-out;}
.banner ul li i {margin-right:10px}
.banner ul li:hover{background:var(--main_c);color:#fff;transition: 0.2s ease-in-out; }
@media all and (max-width:900px) {
		.banner {border-bottom:none}
		.banner .in {padding:0}
		.banner ul li { width:50%; font-size:1.13em; padding:15px 0; border-bottom:1px solid #666}
		.banner ul li:nth-child(2n) {border-right:none}
}

.main_wrap1 {margin-top:20px}
.main_wrap1 .in { max-width:1300px; position:relative; display:flex; flex-wrap:wrap; height:100%;  }
.main_wrap1 h3 {margin-bottom:15px; font-style:italic; color:#111; font-weight:700; font-size:2.3em; letter-spacing:-2.5px; position:Relative}

 


@keyframes ani_img1 {
  0% {left:0; bottom:0; opacity:0 }
  5% {left:0; bottom:0;  opacity:1 }
  50% {left:0; bottom:0;  opacity:1 }

  80% {bottom:-800px; left:-800px}
   100% {bottom:-800px; left:-800px }
}
@keyframes ani_img2 {
  0 {margin-top:0; }

  50% {margin-top:-30px; }

  100% {margin-top: 0%; }
}

.main_wrap1 .text { font-size:1.1em; color:#333; line-height:1.45; position:Relative; z-index:99}
.main_wrap1 .text b {width:100%; display:inline-block; margin-bottom:15px; font-size:1.6em; line-height:1.35; color:#111; font-weight:500}
.main_wrap1 .text b  span {font-weight:800}


.about { width:100%;  height:390px;  }
.about .text {margin-top:80px; width:47%; margin-left:auto }
 
.about .img_box { position:relative; top:-30px; width:51%;   }
.about .img_box img.img { width:100%;  }
.about .img_box  .img2 {position:absolute; bottom:0; width:48%; left:0; z-index:99;  animation-duration:3s; animation-name: ani_img1; animation-iteration-count: infinite;  }


.section2 { width:100%; height:530px;   }
 
.section2 .text {width:40%;  margin-top:310px; }
.section2 ul.flex {width:100%; gap:10px; padding-top:5px; flex-wrap:wrap}
.section2 ul.flex li {padding:10px 23px; color:var(--main_c);   background-color:#fff; border:2px solid var(--main_c);     border-radius:5px; text-align:center; transition: 0.3s ease-in-out;  cursor:pointer; font-weight:600;  }
 
.section2 .img_box2 { position:absolute; top:0; width:61%;  right:0;  }
.section2 .img_box2 img.img {width:100%; }
.section2 .img_box2 img.img2 {position:absolute; top:0; width:40px; animation-duration:1s; animation-name: ani_img2; animation-iteration-count: infinite;  }
.section2 .img_box2 img.img2:nth-child(2) {top:47%; right:29%;}
.section2 .img_box2 img.img2:nth-child(3) {top:41%; right:43%;}
.section2 .img_box2 img.img2:nth-child(4) {top:33%; right:53%;}


@media all and (max-width:900px) {
		.main_wrap1 h3 {font-size:1.6em; letter-spacing:0}
		.main_wrap1 h3 img {display:none}
		.main_wrap1 .text { font-size:1em;  line-height:1.4;  }
		.main_wrap1 .text br {display:none}	
		.main_wrap1 .text b { font-size:1.3em; }

		.about {height:auto;}
		.about .img_box { width:90%; margin-left:5% }
		.about .text {margin-top:30px; width:100%;   }

		.section2 { height:auto;  margin-top:60px}
		.section2 .text {order:2; margin-top:30px; width:100%;  }
		.section2 .img_box2 { position:relative;width:90%; left:5%}
		.section2 .img_box2 img.img2  {width:25px;}
		.section2 .img_box2 img.img2:nth-child(2) {top:45%; right:29%}
		.section2 .img_box2 img.img2:nth-child(3) {top:39%; right:42%}
		.section2 .img_box2 img.img2:nth-child(4) {top:29%; right:51%;}
 		.section2 ul.flex {gap:5px}


}

.center_bn { padding:110px 0;  margin-top:200px; background:url('https://picsum.photos/id/237/1200/500') no-repeat center; background-size:cover; text-align:Center}
.center_bn h3 { color:#fff; margin-bottom:15px; font-size:2.3em; letter-spacing:-1px}
.center_bn p { color:rgba(255,255,255,.9); font-size:1.05em; line-height:1.5; margin-bottom:10px}
@media all and (max-width:900px) {
	.center_bn {margin-top:90px; box-sizing:border-box; padding:80px 4%;   }
	.center_bn h3 { margin-bottom:10px; font-size:1.6em; letter-spacing:-1px}
	.center_bn p {  font-size:1em; }
}
.rider{margin-top:200px;}
.rider > div{width:100%;overflow:hidden; position:relative; top:0; left:0;}
.rider .center_bn{margin-top:0;background:rgb(0 0 0 / 40%);position:relative;}
@media all and (max-width:900px) {
	.rider{margin-top:80px;}
}

/* .main_board {margin-top:30px} */
.main_board .flex { }
.main_board .box {box-sizing:border-box; width:100%; background-color:#fff}
.main_board  .box div.left_box {flex-shrink:0; width:40%; }

.main_board .box h3 {font-weight:600; background-color:var(--main_c); font-size:1.3em;  display:flex; align-items:center; padding:15px 20px; box-sizing:border-box;  color:#fff; letter-spacing:-1px }
.main_board .box h3 a {margin-left:auto; font-size:16px; font-weight:400; letter-spacing:.2px; color:#fff;  }
 
 

.main_board  ul  {margin:30px 20px}
.main_board ul li p {text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    width: 100%;
    overflow: hidden;
	color:#555; margin-top:5px;
	font-size:.93em
    }
.main_board ul li b {font-size:1em; display:inline-block; width:100%; margin-bottom:3px; font-weight:600; color:#111}
.main_board ul li {margin-bottom:15px; font-size:1em}
.main_board ul li:last-child {margin-bottom:0}

 @media all and (max-width:900px) {
		.main_board {margin-top:0}
		.main_board .flex {flex-wrap:wrap}
		.main_board .box {width:100% }
		.main_board  ul  {margin:30px 5px}

		.main_board .box h3 {  font-size:1.2em;  padding:15px 3%;   }



}

.video_w {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_w iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 342%;
	border: 1px solid blue;
}

@media all and (max-width:600px) {
	.video_w iframe {
		width: 300%;
		height: 100%;
	}
}

.swiper-wrapper {padding-bottom:50px}
.swiper-slide {width:100%; text-align:center;  overflow:hidden;   transition: 0.3s ease-in-out; cursor:pointer; color:#333; line-height:1.3}

.swiper-slide div {background-size:cover !important; width:100%; display:inline-block; height:300px;  }
.swiper-slide a {border:1px solid #333; display:inline-block; line-height:40px;  text-align:center; width:100%; max-width:170px; box-sizing:border-box; margin-top:15px; font-size:1rem }

 
.swiper-slide h3 {margin:15px 0 4px 0; font-size:1em;   color:#111 }
.swiper-slide p {text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word; width:100%; overflow:hidden; }
 .swiper-pagination-progressbar {background-color: #f1f1f1 !important;}
 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: var(--main_c) !important;}

@media all and (max-width:900px) {
 	.swiper-wrapper {padding-bottom:30px}
    .swiper-slide div {  height:150px;  }
	.swiper-slide h3 {font-size:1em; margin:7px 0 0 0}
	.swiper-slide p {display:none}
}



  
.map { position:relative;   }
.map .right {position:absolute; display:flex; flex-wrap:wrap; align-content:center; justify-content:center;  right:0; background-color:#fff; width:30%; height:100%; top:0;    text-align:center; line-height:1.5;box-sizing:border-box;border:12px solid}
.map .right h4 {width:100%;font-size:1.8em;color:#555;}
.map .right > img{width:45%;}
.map .right p{font-size:2.2em;width:100%;color:#333;font-weight:800;    font-family: 'Giants-Inline';position:relative;margin-top:35px;}
.map .right p::before{position:absolute;top:-30px;left:50%;content:'';width:1px;height:30px;background:#000;}
.map .right p span.red{color:var(--main_c);font-family: 'Giants-Inline';}
.map .right div{display:flex;align-items:center;margin-top:5px;}
.map .right div span{font-weight:600;margin-right:10px;}
/* .map .right a{font-size:1.2em;} */
.map .right div span{border-radius:50px; background-color:var(--main_c); color:#fff; display:inline-block; padding:7px 30px; text-align:center;font-size:1.1em;}
.map .right a{font-weight:600;font-size:1.7em;color:#333;}

 @media all and (max-width:900px) {
		.map .right {position:static; width:100%; padding:40px 0 }
		.map iframe {height:200px !important}
}


.top_fixed {width:90px;height:90px;text-align:center; position:fixed; background:#fff;display:flex; align-items:center;justify-content:center;flex-direction:column;bottom:50px; right:40px; z-index:999; border-radius:50%;box-shadow:2px 10px 15px 3px rgb(41 41 41 / 15%)}
.top_fixed1{bottom:350px;right:50px;width:80px;height:80px;}
.top_fixed1 img{width:20px;}
/* .top_fixed2{padding:60px;box-sizing:border-box;bottom:450px;right:30px; transition: ease .2s;background:linear-gradient(177deg, rgb(255 90 103) 7%, rgb(227 0 18) 100%);} */
.top_fixed2{padding:60px;box-sizing:border-box;bottom:450px;right:30px; transition: ease .2s;background:linear-gradient(177deg, rgb(136 216 242) 7%, rgb(25 146 184) 100%);}
.top_fixed2 i{color:#fff;font-size:2.3em;}
.top_fixed2 p{color:#fff;font-size:1em;font-weight:600;line-height:1.2;margin-top:5px;}
.top_fixed2:hover { transform: scale(1.1); transition: ease .2s;  }
/* .top_fixed2:hover { box-shadow: -3px 3px 14px 0px rgba(234, 0, 44, 0.5), 3px -3px 14px 0px rgb(255, 121, 0, 0.5); } */
.top_fixed2:hover { box-shadow: -3px 3px 14px 0px rgb(44 170 210 / 46%), 3px -3px 14px 0px rgb(44 170 210 / 46%); }

br.m_show{display:none;}
@media (max-width: 900px) {
.top_fixed1{right:25px;bottom:330px;width:60px;height:60px;}
.top_fixed1 img{width:15px}
.top_fixed2{right:10px;bottom:400px;padding:30px;}
.top_fixed2 i{font-size:2em;}
.top_fixed2 p{font-size:.9em;}
br.m_show{display:block;}
}