@charset "UTF-8";

/*格式化样式*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

fieldset,
img {
	border: 0;
	vertical-align: top;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

caption,
th {
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,
q:after {
	content: '';
}

abbr,
acronym {
	border: 0;
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
	-webkit-appearance: none;
}

textarea {
	-webkit-appearance: none;
}

input:focus,
textarea:focus {
	outline: none;
}

input:focus {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-user-modify: read-write-plaintext-only;
}

@font-face {
	font-family: SourceHanSans;
	src: url("../fonts/SourceHanSansCN/SourceHanSansCN-Regular.eot");
	/* IE9 Compat Modes */
	src: url("../fonts/SourceHanSansCN/SourceHanSansCN-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceHanSansCN/SourceHanSansCN-Regular.woff") format("woff"), url("../fonts/SourceHanSansCN/SourceHanSansCN-Regular.ttf") format("truetype"), url("../fonts/SourceHanSansCN/SourceHanSansCN-Regular.svg#YourWebFontName") format("svg");
	/* Legacy iOS */
	font-style: normal;
}

@font-face {
	font-family: Din;
	src: url("../fonts/Din/DINCond-Bold.eot");
	/* IE9 Compat Modes */
	src: url("../fonts/Din/DINCond-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Din/DINCond-Bold.woff") format("woff"), url("../fonts/Din/DINCond-Bold.ttf") format("truetype"), url("../fonts/Din/DINCond-Bold.svg#YourWebFontName") format("svg");
	/* Legacy iOS */
	font-style: normal;
}

@font-face {
	font-family: Gilroy;
	src: url("../fonts/Gilroy/Gilroy-Medium.eot");
	/* IE9 Compat Modes */
	src: url("../fonts/Gilroy/Gilroy-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Gilroy/Gilroy-Medium.woff") format("woff"), url("../fonts/Gilroy/Gilroy-Medium.ttf") format("truetype"), url("../fonts/Gilroy/Gilroy-Medium.svg#YourWebFontName") format("svg");
	/* Legacy iOS */
	font-style: normal;
}

a {
	outline: none;
	blr: expression(this.onFocus=this.blur());
	text-decoration: none;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	-ms-transition: .4s;
	transition: .4s;
}

.fl {
	float: left;
	display: inline;
}

.fr {
	float: right;
	display: inline;
}

button {
	outline: none;
	border: none;
}

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1;
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html,
body {
	position: relative;
	height: 100%;
	background-color: #000;
	font-family: SourceHanSans;
}

.page_logo {
	position: absolute;
	z-index: 999;
	top: 3vw;
	left: 3vw;
	font-family: Gilroy;
	text-transform: uppercase;
	color: #FFF;
}

.page_logo.black {
	color: #000
}

.page_logo .text_1 {
	font-size: 2vw;
	font-weight: bold;
	line-height: 80%;
}

.page_logo .text_2 {
	font-size: 1.5vw;
	line-height: 100%;
}

.logo_nav {
	position: fixed;
	z-index: 999;
	top: 2vw;
	right: 2vw;
	width: 44px;
	height: 80px;
}

.logo_nav a {
	display: block;
	width: 44px;
	height: 80px;
	position: relative;
	z-index: 888;
	top: 0;
	left: 0;
}

.logo_nav a::before {
	position: absolute;
	display: block;
	width: 3px;
	height: 55px;
	content: '';
	top: 12px;
	left: 16px;
	background-color: #d1292e;
}

.logo_nav a::after {
	position: absolute;
	display: block;
	width: 12px;
	height: 3px;
	content: '';
	top: 66px;
	left: 16px;
	background-color: #d1292e;
}

.logo_nav .overlay {
	background-color: #000;
	width: 44px;
	height: 44px;
	position: absolute;
	z-index: 777;
	top: -6vw;
	right: -6vw;
}

.logo_nav.done,
.logo_nav.done a {
	-webkit-animation: logo_done_1 1s forwards;
	animation: logo_done_1 1s forwards;
}

.logo_nav.done a::before {
	-webkit-animation: logo_done_2 1s forwards;
	animation: logo_done_2 1s forwards;
}

.logo_nav.done a::after {
	-webkit-animation: logo_done_3 1s forwards;
	animation: logo_done_3 1s forwards;
}

.logo_nav.done .overlay {
	-webkit-animation: logo_done_1 1s forwards, logo_done_4 1.5s 1s forwards;
	animation: logo_done_1 1s forwards, logo_done_4 1.5s 1s forwards;
}

.logo_nav.back,
.logo_nav.back a {
	-webkit-animation: logo_done_1_b 1s forwards;
	animation: logo_done_1_b 1s forwards;
}

.logo_nav.back a::before {
	-webkit-animation: logo_done_2_b 1s forwards;
	animation: logo_done_2_b 1s forwards;
}

.logo_nav.back a::after {
	-webkit-animation: logo_done_3_b 1s forwards;
	animation: logo_done_3_b 1s forwards;
}

.logo_nav.back .overlay {
	-webkit-animation: logo_done_1_b 1s forwards, logo_done_4_b 1.5s 1s forwards;
	animation: logo_done_1_b 1s forwards, logo_done_4_b 1.5s 1s forwards;
}

.nav {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	color: #fff;
}

.nav ul {
	width: 100%;
	font-family: SourceHanSans;
	padding: 0 0 0 6vw;
}

.nav ul li {
	text-align: left;
	height: 8rem;
	line-height: 8rem;
}

.nav ul li a {
	color: #fff;
	display: inline-block;
	height: 100%;
}

.nav ul li a:hover {
	/*color: #d1292e;*/
}

.nav ul li a span:first-child {
	font-family: Gilroy;
	font-size: 5rem;
}

.nav ul li a span:last-child {
	display: none;
	font-size: 5rem;
}

.nav ul li:hover span:first-child {
	display: none;
}

.nav ul li:hover span:last-child {
	display: block;
}


@keyframes logo_done_1 {
	0% {
		width: 44px;
		height: 80px;
	}

	100% {
		width: 50px;
		height: 50px;
	}
}

@-webkit-keyframes logo_done_1 {
	0% {
		width: 44px;
		height: 80px;
	}

	100% {
		width: 50px;
		height: 50px;
	}
}

@keyframes logo_done_1_b {
	0% {
		width: 50px;
		height: 50px;
	}

	100% {
		width: 44px;
		height: 80px;
	}
}

@-webkit-keyframes logo_done_1_b {
	0% {
		width: 50px;
		height: 50px;
	}

	100% {
		width: 44px;
		height: 80px;
	}
}

@keyframes logo_done_2 {
	0% {
		height: 55px;
		-webkit-transform-origin: top left;
		transform-origin: top left;
	}

	100% {
		top: 5px;
		left: 23px;
		height: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

@-webkit-keyframes logo_done_2 {
	0% {
		height: 55px;
		-webkit-transform-origin: top left;
		transform-origin: top left;
	}

	100% {
		top: 5px;
		left: 23px;
		height: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

@keyframes logo_done_2_b {
	0% {
		top: 5px;
		left: 23px;
		height: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	100% {
		height: 55px;
		-webkit-transform-origin: top left;
		transform-origin: top left;
	}
}

@-webkit-keyframes logo_done_2_b {
	0% {
		top: 5px;
		left: 23px;
		height: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	100% {
		height: 55px;
		-webkit-transform-origin: top left;
		transform-origin: top left;
	}
}

@keyframes logo_done_3 {
	0% {
		width: 12px;
		height: 3px;
		-webkit-transform-origin: bottom left;
		transform-origin: bottom left;
	}

	100% {
		top: 24px;
		left: 5px;
		width: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

@-webkit-keyframes logo_done_3 {
	0% {
		width: 12px;
		height: 3px;
		-webkit-transform-origin: bottom left;
		transform-origin: bottom left;
	}

	100% {
		top: 24px;
		left: 5px;
		width: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

@keyframes logo_done_3_b {
	0% {
		top: 24px;
		left: 5px;
		width: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	100% {
		width: 12px;
		height: 3px;
		-webkit-transform-origin: bottom left;
		transform-origin: bottom left;
	}
}

@-webkit-keyframes logo_done_3_b {
	0% {
		top: 24px;
		left: 5px;
		width: 40px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	100% {
		width: 12px;
		height: 3px;
		-webkit-transform-origin: bottom left;
		transform-origin: bottom left;
	}
}

@keyframes logo_done_4 {
	0% {
		-webkit-transform-origin: top right;
		transform-origin: top right;
	}

	100% {
		-webkit-transform: scale(100, 100);
		transform: scale(100, 100);
	}
}

@-webkit-keyframes logo_done_4 {
	0% {
		-webkit-transform-origin: top right;
		transform-origin: top right;
	}

	100% {
		-webkit-transform: scale(100, 100);
		transform: scale(100, 100);
	}
}

@keyframes logo_done_4_b {
	0% {
		-webkit-transform: scale(100, 100);
		transform: scale(100, 100);
	}

	100% {
		-webkit-transform-origin: top right;
		transform-origin: top right;
	}
}

@-webkit-keyframes logo_done_4_b {
	0% {
		-webkit-transform: scale(100, 100);
		transform: scale(100, 100);
	}

	100% {
		-webkit-transform-origin: top right;
		transform-origin: top right;
	}
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-container .swiper-slide {
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	display: flex;
}

.swiper-container .swiper-slide.index {
	background-image: url(../images/index_bg.jpg);
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-container .swiper-slide.index .logo {
	color: #fff;
	position: relative;
	margin: 0 0 -100px -20px;
}

.swiper-container .swiper-slide.index .logo.done::before {
	content: '';
	display: block;
	background-color: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 12px;
	height: 700px;
	animation: v_line 10s forwards;
	-webkit-animation: v_line 10s forwards;
}

.swiper-container .swiper-slide.index .logo.done::after {
	content: '';
	display: block;
	background-color: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0px;
	height: 12px;
	animation: c_line 10s forwards;
	-webkit-animation: c_line 10s forwards;
}

.swiper-container .swiper-slide.slogan {
	background-color: #000;
}

.swiper-container .swiper-slide.slogan .text_area {
	position: absolute;
	display: inline-block;
	left: 5vw;
	bottom: 6vw;
	color: #d1292e;
}

.swiper-container .swiper-slide.slogan .text_area .en_text {
	font-family: Gilroy;
	font-size: 4.8rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	line-height: 120%;
}

.swiper-container .swiper-slide.slogan .text_area .cn_text {
	font-family: SourceHanSans;
	font-size: 2rem;
	letter-spacing: 0.5rem;
	color:#FFF;
}

.swiper-container .swiper-slide.slogan .text_area .btn {
	margin: 8rem 0 0 0;
	display: inline-block;
	position: relative;
	color: #fff;
	font-size: 2rem;
	text-transform: uppercase;
	font-family: Gilroy;
	padding-right: 90px;
}

.swiper-container .swiper-slide.slogan .text_area .btn::before {
	content: '';
	height: 2px;
	width: 60px;
	position: absolute;
	right: 0px;
	top: 50%;
	display: block;
	background-color: #fff;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.swiper-container .swiper-slide.slogan .text_area .btn::after {
	content: '';
	height: 15px;
	width: 15px;
	position: absolute;
	right: 2px;
	top: 50%;
	display: block;
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	border-top: solid #fff 2px;
	border-right: solid #fff 2px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.swiper-container .swiper-slide.slogan .text_area .btn:hover {
	color: red;
	letter-spacing: 5px;
}

.swiper-container .swiper-slide.slogan .text_area .btn:hover::before {
	background-color: #f00;
}

.swiper-container .swiper-slide.slogan .text_area .btn:hover::after {
	border-top: solid #f00 2px;
	border-right: solid #f00 2px;
}

.swiper-container .swiper-slide.case .video_box {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #000;
	overflow: hidden;
	z-index: 1;
}

.swiper-container .swiper-slide.case .video_box .video_background {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 800px;
}

.swiper-container .swiper-slide.case .cover_href {
	display:block;
	width:100%;
	height:100%;
}

.swiper-container .swiper-slide.case .text_box {
	position: absolute;
	z-index: 2;
	bottom: 6vw;
	left: 6vw;
	color: #fff;
	font-family: SourceHanSans;
}

.swiper-container .swiper-slide.case .text_box .brand_name {
	font-size: 2.5rem;
	border-radius: 999px;
	-webkit-border-radius: 999px;
	display: inline-block;
	letter-spacing: 5px;
}

.swiper-container .swiper-slide.case .text_box .brand_title {
	display: flex;
	margin: 15px 0 0 0;
}

.swiper-container .swiper-slide.case .text_box .brand_title .left {
	width: 13px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url(../images/title_left.png);
}

.swiper-container .swiper-slide.case .text_box .brand_title .mid {
	font-size: 1.5rem;
	border-top: solid #fff 3px;
	border-bottom: solid #fff 3px;
	padding: 3px 5px;
	letter-spacing: 3px;
}

.swiper-container .swiper-slide.case .text_box .brand_title .right {
	width: 13px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url(../images/title_right.png);
}

.swiper-container .swiper-slide.case .text_box .btn {
	margin: 20px 0 0 0;
	display: inline-block;
	height: 50px;
	position: relative;
	color: #fff;
}

.swiper-container .swiper-slide.case .text_box .btn::before {
	content: '';
	height: 2px;
	width: 100px;
	position: relative;
	left: 0;
	top: 50%;
	display: block;
	background-color: #fff;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.swiper-container .swiper-slide.case .text_box .btn::after {
	content: '';
	height: 20px;
	width: 20px;
	position: absolute;
	right: 2px;
	top: 50%;
	display: block;
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	border-top: solid #fff 2px;
	border-right: solid #fff 2px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.swiper-container .swiper-slide.case .text_box .btn:hover {
	color: red;
}

.swiper-container .swiper-slide.case .text_box .btn:hover::before {
	background-color: #f00;
	width: 150px;
}

.swiper-container .swiper-slide.case .text_box .btn:hover::after {
	border-top: solid #f00 4px;
	border-right: solid #f00 4px;
}

.swiper-container .swiper-slide.clients {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	background-color: #000;
	height: 100%;
}

.swiper-container .swiper-slide.clients .title {
	font-family: Gilroy;
	color: #c1071b;
	font-size: 1.5rem;
	text-transform: uppercase;
	position: absolute;
	top: 2vw;
	left: 3vw;
}

.swiper-container .swiper-slide.clients .clients_images {
	width: 90%;
}

.swiper-container .swiper-slide.clients .copyright {
	color: #000;
	font-size: 1rem;
	position: absolute;
	bottom: 3vw;
	left: 3vw;
}

.swiper-container .swiper-slide.clients .copyright a {
	color: #000;
}

.swiper-container .swiper-slide.clients .copyright a:hover {
	color: #000;
}

@keyframes v_line {
	0% {
		bottom: 700px;
	}

	20% {
		bottom: 0;
	}

	30% {
		height: 200px;
	}

	60% {
		height: 200px;
	}

	80% {
		height: 0px;
	}

	100% {
		height: 0px;
	}
}

@-webkit-keyframes v_line {
	0% {
		bottom: 700px;
	}

	20% {
		bottom: 0;
	}

	30% {
		height: 200px;
	}

	60% {
		height: 200px;
	}

	80% {
		height: 0px;
	}

	100% {
		height: 0px;
	}
}

@keyframes c_line {
	0% {
		width: 0px;
	}

	20% {
		width: 0px;
	}

	35% {
		width: 40px;
	}

	60% {
		width: 40px;
	}

	80% {
		width: 1300px;
		left: 0;
	}

	90% {
		width: 1300px;
		left: 1300px;
	}

	100% {
		width: 1300px;
		left: 1300px;
	}
}

@-webkit-keyframes c_line {
	0% {
		width: 0px;
	}

	20% {
		width: 0px;
	}

	35% {
		width: 40px;
	}

	60% {
		width: 40px;
	}

	80% {
		width: 1300px;
		left: 0;
	}

	90% {
		width: 1300px;
		left: 1300px;
	}

	100% {
		width: 1300px;
		left: 1300px;
	}
}

.case_slogan {
	background-color: #fff;
	padding: 12vw 4vw 4vw 4vw;
	font-family: Gilroy;
	font-size: 4rem;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
}

.case_slogan .cn{
	margin-top:10px;
	font-family: SourceHanSans;
	font-size:1.8rem;
	letter-spacing: 1.5rem;
}

.case li {
	float: left;
	display: inline-block;
	width: 50%;
	height: 30vw;
	background-color: #d1292e;
	position: relative;
}

.case li .cover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.case li .cover_href {
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
}

.case li .text {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	padding: 0 2vw 2vw 2vw;
	color: #fff;
}

.case li .text p {
	font-size: 1.5rem;
	font-family: SourceHanSans;
}

.case li .text .btn {
	margin: 1vw 0 0 0;
	display: inline-block;
	height: 50px;
	position: relative;
	color: #fff;
}

.case li .text .btn::before {
	content: '';
	height: 2px;
	width: 100px;
	position: relative;
	left: 0;
	top: 50%;
	display: block;
	background-color: #fff;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.case li .text .btn::after {
	content: '';
	height: 20px;
	width: 20px;
	position: absolute;
	right: 2px;
	top: 50%;
	display: block;
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	border-top: solid #fff 2px;
	border-right: solid #fff 2px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.case li .text .btn:hover::before {
	width: 150px;
}

.case li:hover .cover {
	margin: 0.8%;
	width: 98.4%;
	height: 97.4%;
}

.case_more {
	padding: 2vw 0;
	text-align: center;
	color: #000;
	font-size: 1.5rem;
	display: block;
	font-family: Gilroy;
	text-transform: uppercase;
	background-color: #fff;
}

.case_more:hover {
	letter-spacing: 0.5vw;
}

.metaverse_video {
	height: 100vh;
	position: relative;
}

.metaverse_video .video_background {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.metaverse_video .play_btn {
	width: 120px;
	height: 120px;
	display: block;
	border: solid #fff 4px;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	position: relative;
	z-index: 2;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.metaverse_video .play_btn::before {
	content: '';
	display: block;
	-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	border: solid #fff 1px;
	width: 40px;
	height: 40px;
	-webkit-transform: translate(-40%, -50%) rotate(90deg) scaleY(0.8);
	transform: translate(-40%, -50%) rotate(90deg) scaleY(0.8);
	background-color: #fff;
}

.metaverse_video .play_btn.pause::before {
	display: none;
}

.metaverse_video .play_btn.pause::after {
	display: block;
	content: '';
	width: 15px;
	height: 40px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-130%, -50%);
	transform: translate(-130%, -50%);
	box-shadow: 10px 0 0 transparent, 25px 0 0 #fff;
}

.metaverse_strategy .strategy_title {
	color: #d1292e;
	font-size: 1.8rem;
	font-family: Gilroy;
	padding: 5vw 5vw 0 5vw;
	text-transform: uppercase;
}

.metaverse_strategy .strategy_content {
	display: flex;
    padding: 5vw 5vw 15vw;
	color: #fff;
}

.metaverse_strategy .strategy_content .title {
	flex: 1;
	position:relative;
}

.metaverse_strategy .strategy_content .title h3 {
	font-size: 3.6rem;
    text-transform: uppercase;
}

.metaverse_strategy .strategy_content .title h4 {
	position: relative;
    display: flex;
    font-family: Gilroy,SourceHanSans;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 2vw 0;
}

.metaverse_strategy .strategy_content .title h4 span {
	border-top: solid #fff 2px;
	border-bottom: solid #fff 2px;
	display: inline-block;
	padding: 0 0.5vw;
}

.metaverse_strategy .strategy_content .title h4 i {
	display: block;
	width: 8px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
}

.metaverse_strategy .strategy_content .title h4 i.left {
	background-image: url(../images/title_left.png);
}

.metaverse_strategy .strategy_content .title h4 i.right {
	background-image: url(../images/title_right.png);
}

.metaverse_strategy .strategy_content .title .btn {
	display: inline-block;
	color: #fff;
	font-size: 1.2rem;
	font-family: Gilroy;
	text-transform: uppercase;
	position: absolute;
	bottom: 0;
	padding: 0 50px 0 0;

}

.metaverse_strategy .strategy_content .title .btn::before {
	content: '';
	height: 2px;
	width: 30px;
	position: absolute;
	right: 0;
	top: 50%;
	display: block;
	background-color: #fff;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.metaverse_strategy .strategy_content .title .btn::after {
	content: '';
	height: 10px;
	width: 10px;
	position: absolute;
	right: 0;
	top: 50%;
	display: block;
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	border-top: solid #fff 2px;
	border-right: solid #fff 2px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.metaverse_strategy .strategy_content .title .btn:hover::before {
	right: -20px;
}

.metaverse_strategy .strategy_content .title .btn:hover::after {
	right: -20px;
}

.metaverse_strategy .strategy_content .video {
	flex: 1;
}

.metaverse_strategy .strategy_content img {
	height: 24vw;
}

.metaverse_strategy .strategy_list {
	color: #fff;
}

.metaverse_strategy .strategy_list li {
	width: 50%;
	float: left;
	display: inline-block;
}

.metaverse_strategy .strategy_list li .area {
	padding: 3vw 5vw 5vw 5vw;
}

.metaverse_strategy .strategy_list li h3 {
	font-size: 2.5rem;
	text-transform: uppercase;
}

.metaverse_strategy .strategy_list li h4 {
	position: relative;
	display: flex;
	font-family: Gilroy,SourceHanSans;
	text-transform: uppercase;
	font-size: 1.5rem;
	margin: 0.2vw 0;
}

.metaverse_strategy .strategy_list li h4 span {
	border-top: solid #fff 2px;
	border-bottom: solid #fff 2px;
	display: inline-block;
	padding: 0 0.5vw;
}

.metaverse_strategy .strategy_list li h4 i {
	display: block;
	width: 8px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
}

.metaverse_strategy .strategy_list li h4 i.left {
	background-image: url(../images/title_left.png);
}

.metaverse_strategy .strategy_list li h4 i.right {
	background-image: url(../images/title_right.png);
}

.metaverse_strategy .strategy_list li .btn {
	display: inline-block;
	color: #fff;
	font-size: 1.2rem;
	font-family: Gilroy;
	text-transform: uppercase;
	position: relative;
	margin: 2vw 0 0 0;
	padding: 0 50px 0 0;
}

.metaverse_strategy .strategy_list li .btn::before {
	content: '';
	height: 2px;
	width: 30px;
	position: absolute;
	right: 0;
	top: 50%;
	display: block;
	background-color: #fff;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.metaverse_strategy .strategy_list li .btn::after {
	content: '';
	height: 10px;
	width: 10px;
	position: absolute;
	right: 0;
	top: 50%;
	display: block;
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	border-top: solid #fff 2px;
	border-right: solid #fff 2px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.metaverse_strategy .strategy_list li .btn:hover::before {
	right: -20px;
}

.metaverse_strategy .strategy_list li .btn:hover::after {
	right: -20px;
}

.metaverse_strategy .strategy_list li .cover {
	height: 24vw;
	margin: 4vw 0 0 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.metaverse_nft {
	position: relative;
	overflow: hidden;
}

.metaverse_nft .nft_show {
	position: relative;
	width:100%;
	height:56.25vw;
	background-image: url(/images/nft_bg.jpg);
	background-size:100% 100%;
}

.metaverse_nft .nft_show .swiper-container-nft {
	position: relative;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-slide {
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-slide img {
	width: 30%;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-button-next,
.metaverse_nft .nft_show .swiper-container-nft .swiper-button-prev {
	width: 44px;
	background-image: none;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-button-prev {
	left: 120px;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-button-next {
	right: 120px;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-button-prev::before,
.metaverse_nft .nft_show .swiper-container-nft .swiper-button-next::before {
	position: absolute;
	content: '';
	display: block;
	top: 50%;
	width: 20px;
	height: 20px;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-button-prev::before {
	border-top: solid #fff 2px;
	border-left: solid #fff 2px;
	-webkit-transform: rotate(-45deg) translateY(-70%);
	transform: rotate(-45deg) translateY(-70%);
	left: 50%;
}

.metaverse_nft .nft_show .swiper-container-nft .swiper-button-next::before {
	border-top: solid #fff 2px;
	border-right: solid #fff 2px;
	-webkit-transform: rotate(45deg) translateY(-70%);
	transform: rotate(45deg) translateY(-70%);
	right: 50%;
}

.metaverse_profile {
	display: flex;
	padding: 0 10vw;
	height: 100vh;
}

.metaverse_profile .l_logo {
	flex: 1;
	text-align: center;
	position: relative;
}

.metaverse_profile .l_logo img {
	max-width: 35%;
	position: absolute;
	top: 50%;
	left: 40%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.metaverse_profile .profile {
	flex: 2;
	color: #fff;
	font-size: 1.2vw;
	line-height: 1.8vw;
	font-family: SourceHanSans;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.metaverse_profile .profile p {
	margin: 0 0 2vw 0;
}

.metaverse_profile .profile p:last-child {
	margin: 0 0 0 0;
}

.case_detail_banner {
	height: 100vh;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.case_detail_banner .case_logo {
	max-width: 20vw;
}

.case_detail img {
	width: 100%;
}

.bottom {
	font-family: Gilroy;
	font-size:1.5rem;
	text-transform: uppercase;
	background-color: #000;
	padding: 2vw 5vw;
	color: #fff;
	text-align:center;
}

.contact_slogan {
	background-color: #fff;
	padding: 12vw 4vw 4vw 4vw;
	font-family: Gilroy;
	font-size: 3.5rem;
	text-transform: uppercase;
}

.contact_qrcode {
	background-color: #fff;
	padding-top: 12vw;
	text-align:center;
}

.contact_qrcode img {
	width:20%;
}


.contact_area {
	padding: 10vw 4vw 8vw 4vw;
	background-color: #fff;
}

.contact_info {
	display: flex;
	padding: 0 0 6vw 0;
}

.contact_info dl {
	display: inline-block;
	flex: 1;
}

.contact_info dl dt {
	color: #666;
	font-size: 1.2vw;
	height: 6vw;
}

.contact_info dl dt span {
	display: inline-block;
	color: #000;
	font-size: 1.4vw;
	font-family: Gilroy;
}

.contact_info dl dt p:first-child {
	padding: 0 0 10px 0;
}

.contact_info dl dd p {
	color: #999;
	font-size: 1.2vw;
	font-family: Gilroy;
	padding: 0 0 0 40px;
	margin: 0 0 10px 0;
	position: relative;
}

.contact_info dl dd p:last-child {
	margin: 0 0 0 0;
}

.contact_info dl dd p.address::before,
.contact_info dl dd p.phone::before,
.contact_info dl dd p.tel::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-size: 30px 30px;
}

.contact_info dl dd p.address::before {
	background-image: url(../images/icon_address.png);
}

.contact_info dl dd p.phone::before {
	background-image: url(../images/icon_phone.png);
}

.contact_info dl dd p.tel::before {
	background-image: url(../images/icon_tel.png);
}

.map {
	border: solid 1px #999;
	height: 30vw;
}

.about_banner {
	display: flex;
	height: 100vh;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.about_banner .text {
	color: #fff;
	font-size: 2.5vw;
	line-height: 5vw;
	width: 80%;
	margin: 0 auto;
}

.about_detail img {
	width: 100%;
}