@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");

	/* banner */
	.sec_main_banner {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
		background: url('/Img/banner1.png')center center / cover no-repeat;

	}

	.sec_main_banner h2 strong{color: #12c91f !important; display: inline-block;}

	.sec_main_banner>img {
		transition: 7s ease;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.sec_main_banner figure {
		width: 100%;
		position: absolute;
		left: 50%;
		top: 45%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.sec_main_banner>figure img {
		margin-bottom: 30px;
	}

	.sec_main_banner>figure h2,
	.sec_main_banner>div p {
		text-align: center;
		color: #fff;
	}

	.sec_main_banner>figure h2 {
		letter-spacing: 1px;
		line-height: 1.2;
	}




	/* h2.lighting {
		font-weight: bold;
		background: #333 -webkit-radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) no-repeat -280px -94px;
		-webkit-background-clip: text;
		-webkit-background-size: 388px;
		color: rgba(255, 255, 255, 0.3) !important;
		-webkit-animation: ani 5s linear infinite;
	}
	
	 */

	@keyframes ani {
		from {
			background-position: -280px -94px;
		}

		to {
			background-position: 1080px -94px;
		}
	}


	/* sec_main_contents */

	.sec_main_contents{
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
	}

	.sec_main_contents figure{
		display:flex;
		justify-content:center;
	}

	.sec_main_contents figure img{}
	.sec_main_contents figure figcaption{
		width: 426px;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
		padding: 40px;
		color: #666666;
		font-size: 14px;
		text-align: center;
		word-break:keep-all;
	}

	.sec_main_contents figure figcaption h4{color: #12c91f; padding: 20px 0 10px 0; font-size: 20px;}

	/* coreComWrap */
	.coreComWrap {
		width: 100%;
		height: 101vh;
		background: url('/Img/banner4.png');
		background-size: cover;
		background-position: center;
		display:flex;
		align-items:center;
		justfiy-content:center;
	}

	.coreComWrap h3{padding-bottom: 30px; color: #fff;}

	.coreComWrap .main_title h2::after {
		background: #fff;
	}

	.coreComWrap .main_title h2,
	.coreComWrap .main_title h2 span,
	.coreComWrap .main_title p {
		color: #fff;
	}

	.coreComWrap .main_title h2 {
		letter-spacing: -4px;
		font-weight: 600;
	}

	.coreComWrap .main_title h2 span {
		letter-spacing: 0;
	}

	.coreComWrap .detail ul li {
		background: #fff;
		border-radius: 10px;
		padding: 44px 0;
	}

	.coreComWrap .detail ul li strong {
		font-weight: bold;
		margin-bottom: 26px;
	}

	.coreComWrap .detail ul li p {
		font-size: 22px;
		line-height: 1.4;
		margin-bottom: 0;
	}

	.main_title{}
	.main_title h2{font-size: 60px; line-height: 1.0; color: #777; text-align: center;}
	.main_title h2::after{content: ""; display: block; width: 1px; height: 35px; background: #223040; margin: 55px auto;}
	.main_title h2 span{color: #ef7b1b; font-weight: 600; margin-right: 20px;}
	.main_title p{width: 70%; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.5;}


	/* sec_Number */
	.sec_Number{background: #fff; position: relative;  height: 100vh; display:flex; align-items:center;justify-content:center;}
	.sec_Number .Number{}
	.sec_Number .Number h2{width: 100%; text-align: center; font-size: 80px; font-weight: bold;}
	.sec_Number .Number .Number_tit{width: 100%; text-align: center;}
	.sec_Number .Number ul{display:flex; aling-items:center; justify-content:center;}
	.sec_Number .Number ul li{width: 25%; height: 200px;}
	.sec_Number .Number ul li h3{text-align: center;  font-weight: bold;}
	.sec_Number .Number ul li p{ text-align: center; font-weight: normal;}




	/* sec_world */
	.sec_world{width: 100%; height: 100vh; background: #000; display:flex; align-items:center; justify-content:center; flex-direction:column; margin-bottom: 0;}
	.sec_world{}
	.sec_world .world{ display:flex; align-items:center; justify-content:center; flex-direction:column;}
	.sec_world .world h3{padding-bottom: 40px;}

	/*  */
	.continent-text {
  position: absolute;
  color: #fff;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1rem;
  pointer-events: none;
  &.eu {
    opacity: 0;
    left: 28%;
    top: 35%;
    &.open {
      opacity: 1;
      transition: opacity 300ms ease-in-out;
    }
  }
  &.as {
    opacity: 0;
    left: 40%;
    top: 32%;
    &.open {
      opacity: 1;
      transition: opacity 300ms ease-in-out;
    }
  }
  &.na {
    opacity: 0;
    left: 8%;
    top: 37%;
    &.open {
      opacity: 1;
      transition: opacity 300ms ease-in-out;
    }
  }
  &.sa {
    opacity: 0;
    left: 15%;
    top: 77%;
    &.open {
      opacity: 1;
      transition: opacity 300ms ease-in-out;
    }
  }
  &.af {
    opacity: 0;
    left: 28%;
    top: 60%;
    &.open {
      opacity: 1;
      transition: opacity 300ms ease-in-out;
    }
  }
  &.oc {
    opacity: 0;
    left: 46%;
    top: 89%;
    &.open {
      opacity: 1;
      transition: opacity 300ms ease-in-out;
    }
  }
}

.map-area {
  &:focus {
    outline: 0;
  }
}





	/* side_nav */
	.side_nav{position: fixed; right: 2%; top: 30%; z-index: 9999;}
	.side_nav li{margin-bottom: 10px;}
	.side_nav li p{display:block; text-align: center; width: 100px; height: 40px; line-height:40px; background: rgba(0,0,0,0.5); color: #fff; border-radius:3px; cursor:pointer; padding: 0;}
	.side_nav li p:hover{color: #12c91f;}

	.side_nav li p.active{color: #12c91f;}



	/* detail */
					svg text.blink {
						animation: blink 2s ease-out;
					}


					#tagi {
						width: 100%;
						margin: 0px auto;

					}

					@keyframes blink {
						0% {
							text-shadow: 0 0 5px rgba(247, 152, 36, 0);
						}

						20% {
							fill: rgba(247, 152, 36, 1);
							text-shadow: -5px -5px 20px rgba(247, 152, 36, 0.8), 5px -5px 20px rgba(247, 152, 36, 0.8), 5px 5px 20px rgba(247, 152, 36, 0.8), -5px 5px 20px rgba(247, 152, 36, 0.8);
							;
						}

						30% {
							fill: rgba(247, 152, 36, 1);
							-5px -5px 20px rgba(247, 152, 36, 0.8),
							5px -5px 20px rgba(247, 152, 36, 0.8),
							5px 5px 20px rgba(247, 152, 36, 0.8),
							-5px 5px 20px rgba(226, 25, 45, 0.8);
						}

						100% {
							text-shadow: 0 0 5px rgba(247, 152, 36, 0);
						}
					}

					.st0 {
						font-size: 68px;
					}

					.st1 {
						font-size: 27px;
					}

					.st2 {
						font-size: 82px;
					}

					.st3 {
						font-size: 41px;
					}

					.st4 {
						font-size: 41px;
					}

					.st5 {
						fill: #808080;
					}

					.my1 {
						font-size: 18px;
					}

					.my2 {
						font-size: 40px;
					}

					.my3 {
						font-size: 16px;
					}

					.my4 {
						font-size: 32px;
					}

					.my5 {
						font-size: 24px;
					}

					.my6 {
						font-size: 52px;
					}

					.my7 {
						font-size: 38px;
					}

					.my8 {
						font-size: 16px;
					}

					.my9 {
						font-size: 75px;
					}

					.my10 {
						font-size: 18px;
					}

					.st6 {
						font-size: 24px;
					}

					.st7 {
						font-size: 24px;
					}

					.st8 {
						font-size: 62px;
					}

					.st9 {
						font-size: 86px;
					}

					.st10 {
						font-size: 18px;
					}

					.st11 {
						font-size: 18px;
					}

					.st12 {
						font-size: 25px;
					}

					.st13 {
						font-size: 25px;
					}

					.st14 {
						font-size: 25px;
					}

					.st15 {
						font-size: 32px;
					}

					.st16 {
						font-size: 32px;
					}

					.st17 {
						font-weight: 600;
						fill: #a0a0a0;
					}

					.st18 {
						font-size: 22px;
					}

					.st19 {
						font-size: 22px;
					}

					.st20 {
						font-size: 36px;
					}

					.st21 {
						font-size: 19px;
					}

					.st22 {
						font-size: 51px;
					}

					.st23 {
						font-size: 26px;
					}

					.st24 {
						font-size: 33px;
					}

					.st25 {
						font-size: 20px;
					}

					.st26 {
						capability font-size: 23px;
					}

					.st27 {
						font-size: 23px;
					}

					.st28 {}

					.st29 {
						font-size: 54px;
					}

					.st30 {
						font-size: 20px;
					}

					.st31 {
						font-size: 37px;
					}



					.con4 {padding:100px 0 ; background:#EFF2F4; margin-top:-80px;margin-bottom:0}
					.con4 .inner {max-width:1000px}
					.con4 .inner > div:nth-child(1) {text-align:center;}
					.con4 .inner > div > p:nth-child(1) {font-size:35px; padding: 0}
					.con4 .inner > div > p:nth-child(2) {font-size:45px; font-weight:bold;padding-bottom:20px}
					.con4 .inner > div > p:nth-child(3) {font-size:20px; line-height:25px;padding-bottom:20px}
					.con4 .inner > div:nth-child(2) {display:flex;justify-content:space-between;margin-top:35px;}
					.con4 .inner > div:nth-child(2) > div{ width: 200px;height: 200px;background: #fff;border-radius: 50%;text-align: center;margin: 0 30px 0 0;border: px solid #cfd7ec}
					.con4 .inner > div:nth-child(2) > div > p:nth-child(1) {font-size:25px; margin-top:40px; font-weight:600; padding:0; line-height:1}
					.con4 .inner > div:nth-child(2) > div > p:nth-child(2) {font-size:56px;  font-weight:800; color:#3fed4c; padding:0 }
					.con4 .inner > div:nth-child(2) > div:nth-child(4) > p:nth-child(1) {margin-top:56px}
					.con4 .inner > div:nth-child(2) > div:nth-child(4) {margin:0}
					.up_dw {  position:relative;  top:0;  width:100px;  height:100px;  border-radius:50%;  background:#000;  animation:ball 1s ease-in Infinite Alternate;}
					@keyframes ball {0% {top:0px;}95% {width: 200px;}to {top:20px;width:200px;height:200px}}