.intro_box{display:flex; flex-wrap:wrap; position:relative; width:100%; height:100vh;}
.intro_box > p{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:4;}
.intro_box > div{width:50%; height:100%; position:relative;}
.intro_box div > a{display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; padding:0 100px; position:relative; z-index:1;}

.intro_box div.left{background:url("../image/gate/gate_img1.jpg")no-repeat center/cover;}
.intro_box div.right{background:url("../image/gate/gate_img2.jpg?v=2")no-repeat center/cover; text-align:right;}
.intro_box div.right >a{align-items: flex-end;}

.intro_box div h2{font-size:60px; font-weight:900; color:#fff;}
.intro_box div h3{font-size:28px; font-weight:600; color:#fff; margin-bottom:54px;}
.intro_box div p{font-size:22px; font-weight:300; color:#fff; line-height:1.5;}
.intro_box div p.gate_line{width:150px; height:2px; background:#ee6a0e; margin:28px 0 16px;}

.intro_box div span{width:fit-content; height: 0; opacity: 0; font-size: 22px; font-weight: 600; color: #fff; display: flex; justify-content:center; align-items:center;  background:#000; padding:0 30px; transition: all 1s ease;}
.intro_box div:hover span{height:60px; opacity:1; transition: all 1s ease; margin-top:40px;}

.intro_box div.left:after{display:block; content:""; position:absolute; left:0; top:0; width:0px; height:100%; background:#f18d00; transition: all 1s ease;}
.intro_box div.right:after{display:block; content:""; position:absolute; right:0; top:0; width:0px; height:100%; background:#403a3a; transition: all 1s ease;}

.intro_box div.left:hover:after{width:100%; opacity:0.6; transition: all 1s ease;}
.intro_box div.right:hover:after{width:100%; opacity:0.6; transition: all 1s ease;}
.intro_box div:hover p.gate_line{background:#fff;}

@media screen and (max-width:1201px){
	.intro_box div h2{font-size:48px;}
	.intro_box div > a{padding:0 70px}
	
	.intro_box > p img{display:block; max-width:100%; width:190px;}
}
@media screen and (max-width:1025px){
	.intro_box > div{width:100%; height:50%;}
	.intro_box > p img{width:100px;}
	.intro_box div > a,
	.intro_box div.right >a{align-items: center; text-align:center;}
	.intro_box div.left a{padding:0px; padding-bottom:50px;}
	.intro_box div.right a{padding:0px; padding-top:50px;}
	
	.intro_box div h2{font-size:42px;}
	.intro_box div h3{font-size:21px; margin-bottom:16px;}
	.intro_box div p{font-size:18px; text-shadow:0px 0px 12px #000;}
	.intro_box div p.gate_line{margin:14px 0;}
	.intro_box div span{font-size:18px;}
	.intro_box div:hover span{margin-top:20px; height:54px;}
	
	.intro_box div.left:after,
	.intro_box div.right:after{width:100%; opacity:0;}
}
@media screen and (max-width:396px){
	.intro_box div h2{font-size:34px;}
}
@media screen and (max-width:321px){
	.intro_box div h2{font-size:32px;}
}