@charset "utf-8";

/* intro */
.intro-box {
	width: 100%;
	height: 100vh;
	position: relative;
}
.intro-box .intro-logo {
	position: absolute;
	top: 50px;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
}
.intro-box .item-box {
	display: flex;
	width: 100%;
	height: 100%;
}
.intro-box .item-box .item {
	height: 100%;
	flex-grow: 1;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	transition: all 0.6s;
}
.intro-box .item-box .item * {
	color: #fff;
}
.intro-box .item-box .item:nth-child(1) {
	background-image: url("/img/main/introImg1.jpg");
}
.intro-box .item-box .item:nth-child(2) {
	background-image: url("/img/main/introImg2.jpg");
}
.intro-box .item-box .item:nth-child(3) {
	background-image: url("/img/main/introImg3.jpg");
}
.intro-box .item-box .text {
	position: absolute;
	left: 80px;
	bottom: 75px;
	transition: all 0.6s;
}
.intro-box .item-box .text * {
	color: #fff;
	letter-spacing: -0.02em;
}
.intro-box .item-box dl dt {
	font-weight: 600;
	margin: 0 0 10px;
}
.intro-box .item-box dl dd {
	font-size: 50px;
	font-weight: 500;
}
.intro-box .item-box a {
	width: 150px;
	height: 60px;
	border: 1px solid #fff;
	border-radius: 100px;
	font-size: 20px;
	font-weight: 600;
	margin: 25px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.4s;
}
.intro-box .item-box a::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: all 0.4s;
	backdrop-filter: blur(10px);
}
.intro-box .item-box .item.on {
	flex-grow: 1.7945;
}
.intro-box .item-box .item.on a {
	opacity: 1;
	transform: translateY(0);
}
.intro-box .item-box .item.off .text {
	left: 50px;
	opacity: 0.6;
}
.intro-box .item-box a:hover::before {
	opacity: 1;
}

header {
	width: 100%;
	height: 80px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.header-box {
	width: 100%;
	max-width: 1810px;
	height: 100%;
	display: flex;
	align-items: center;
	margin: 0 auto;
}
header h1,
header button {
	flex-shrink: 0;
}
.menu { margin: 0 auto; text-align:center; z-index:2 }
.menu > ul { display: flex; }
.menu > ul > li { height: 80px; display: flex; align-items: center; padding: 0 35px; position: relative; }
.menu > ul > li > a { font-size:18px; color:#fff; font-weight:500; }
.menu > ul > li .subDepth { display:none; position:absolute; left:50%; top: 100%; transform:translateX(-50%); width:170px; padding:23px 10px 25px; border-radius:0px 0px 8px 8px; background:#fff; }
.menu > ul > li .subDepth li:not(:last-child) { margin-bottom:23px; } 
.menu > ul > li .subDepth li a { font-size:16px; color:#888; font-weight:500; line-height:1.3 }
.menu > ul > li .subDepth li a:hover { color:#0029ff; }
@media screen and (max-width:1500px){
	.intro-box .item-box{display:block; }
	.intro-box .item-box .item{height: 33.33%;}
	.intro-box .item-box .text{bottom: 50px; left: 40px;}
	.intro-box .item-box dl dd{font-size:40px;}
}

@media screen and (max-width:1024px){
    .menu { top:20px; }
    .menu > ul > li { padding:0 4% 50px; }
    .menu > ul > li .subDepth { width:150px; }
    .menu > ul > li .subDepth li:not(:last-child) { margin-bottom:15px; } 
	.intro-box .intro-logo{top: 20px;}
	.intro-box .item-box .item{height: 33.33svh;}
	.intro-box .item-box .text{bottom: auto; left: 20px; top: 60%; transform:translateY(-50%);}
	.intro-box .item-box a{opacity: 1; transform:translateY(0); height: 50px;}
	.intro-box .item-box dl dd{font-size:30px;}
	.intro-box .item-box .item.off .text{left: 30px;}

}
@media screen and (max-width:640px){
    .menu { top:20px; }
    .menu > ul > li { padding:0 2.5% 40px; }
    .menu > ul > li > a { font-size:15px; }
    .menu > ul > li .subDepth { top:40px; width:110px;  border-radius:0px 0px 4px 4px; padding:15px 8px 20px; }
    .menu > ul > li .subDepth li:not(:last-child) { margin-bottom:10px; } 
    .menu > ul > li .subDepth li a { font-size:14px; }
	.intro-box .item-box dl dt{margin-bottom:4px;}
	.intro-box .item-box a{margin-top: 10px; width: 120px; font-size:16px; height: 40px;}
}

.imgbox img { image-rendering:-webkit-optimize-contrast; transform: translateZ(0); backface-visibility:hidden;  }