@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.webp')center center / cover no-repeat;

	}

	.sec_main_banner h2 strong{color: #fff915 !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;
		width:500px
	}

	.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: #ffc800; 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: #fffdb1; 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{display: flex;width: 200px;height: 200px;flex-direction: column;align-items: center;justify-content: center;background: #fbc35e;margin-right: 10px;border-radius: 50%;}
	.sec_Number .Number ul li h3{text-align: center;  font-weight: bold;}
	.sec_Number .Number ul li p{ text-align: center; font-weight: bold;color:#fff}




	/* 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: #fff900;}

	.side_nav li p.active{color: #fff900;}



	/* 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;
					}
	.con5 { margin:0; width: 100%;background: #001329;height: 700px;position: relative;overflow:hidden;align-items: unset;}
.con5 > div.conIG {max-width:1000px;position:relative;height:100%;left:50%; transform:translateX(-50%); }
.con5 > div.conIG > img {width:85%; position:absolute;left:50%; transform:translateX(-50%);bottom:0;}
.con5 > div > div > p {color:#fff; position:absolute;font-size: 30px; }
.con5 > div > div > span { position:absolute; width:4px; height:62px; background:#fff}
.con5 > div > div > span:before {content:"";position:absolute; width:10px; height:10px; border-radius:10px; background:#fff; left:-3px; top:-6px}
.con5 > div > div > p:nth-child(1) {top:75px; font-size: 40px; font-weight:bold; left:50%; transform:translateX(-50%)}
.con5 > div > div > p:nth-child(2) {left:180px; top:195px ;}
.con5 > div > div > span:nth-child(3) {top:220px; left:330px; transform:rotateZ(-52deg)}
.con5 > div > div > p:nth-child(4) {left:683px; top:274px ;}
.con5 > div > div > span:nth-child(5) {top:318px; left:813px; transform:rotateZ(0);height:100px;}
.con5 > div > div > p:nth-child(6) {left:219px; top:600px ;}
.con5 > div > div > span:nth-child(7) {top:586px; left:374px; transform:rotateZ(-90deg)}


@keyframes blink-effect { 50% {opacity: 0.4; }}