#mainPage{
	position: relative;
	height: 100vh;
	overflow:hidden;
}

@keyframes scaleUp {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

@keyframes scaleDown {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.mySwiper,
.bgslider{position:absolute; right:0; left:0; top:0; bottom:0; z-index:0; width:100%; }
.bgslider > div{height:100vh; right:0; left:0; top:0; bottom:0; }
.bgslider > div > p{background-size:cover; background-position:center; height:100vh;
	animation: scaleDown 6s ease-in-out forwards;
}
.bgslider > div.swiper-slide-active > p {
	animation: scaleUp 6s ease-in-out forwards;
}



#mainPage .h_menu{
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	padding: 50px 195px 0 300px;
}
#mainPage .btns {
	display: flex;
	justify-content: flex-end;
	gap: 55px;
	margin-bottom: 70px;
	padding-top: 10px;
}

#mainPage .btns .btn{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 15px;
	width: 200px;
	height: 90px;
	margin: 0;
	padding: 0;
	outline: none;
	font-size: 36px;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border-radius: 0;
	border: 1px solid #fff;
}
#mainPage .btns .sponsor{
	color: #000;
	background: #fff;
}
#lan{
	position: relative;
}
#lan.open{
	background: #fff;
}
#lan p{
	z-index: 50;
	position: absolute;
	left: 0;
	display: none;
	width: 100%;
	padding: 20px;
	text-align: center;
	color: #000;
	background: #fff;
	font-size: 36px;
	font-weight: 600;
}
#lan p a{color: inherit;}

#lan .btn{
	z-index: 1;
	position: relative;
}
#lan.open .btn{
	color: #000;
	background: rgba(255, 255, 255, 1);
}
#lan .btn img{
	transform: rotate(0);
	filter: brightness(1) invert(0);
	transition: all .3s;
}
#lan.open .btn img{
	transform: rotate(180deg);
	filter: brightness(0) invert(0);
}

#mainPage .f_menu{
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0; left: 50%;
	width: 100%;
	max-width: 1500px;
	transform: translateX(-50%);
}
#mainPage .f_menu a{
	display: inline-block;
	width: calc(100%/3);
	padding: 70px 5px;
	text-align: center;
	font-size: 50px;
	font-weight: 300;
	color: #fff;
	position:relative;
}
#mainPage .f_menu a:first-child{background: #42210b;}
#mainPage .f_menu a:nth-child(2){background: #262b54;}
#mainPage .f_menu a:nth-child(3){background: #004137;}
#mainPage .f_menu a:last-child{background: #961C38;}


#mainPage .f_menu > a::before,
#mainPage .f_menu > a::after {  content: "";  position: absolute;  width: 0;  height: 0;  background: transparent;  transition: all 0.3s ease;}
#mainPage .f_menu > a::before {  top: 0;  left: 0;  }
#mainPage .f_menu > a::after {  bottom: 0;  right: 0; }
#mainPage .f_menu > a:hover::before{ border-top: 1px solid rgba(255,255,255,0.7);  border-left: 1px solid rgba(255,255,255,0.7); width: 100%;  height: 100%; }
#mainPage .f_menu > a:hover::after {  width: 100%;  height: 100%;  border-bottom: 1px solid rgba(255,255,255,0.7);  border-right: 1px solid rgba(255,255,255,0.7);}	




#mainPage .text{
	/* padding-right: 195px; */
	padding-right: 255px;
	padding-top: 200px;
	text-align: right;
	color:#fff;
}
#mainPage .text p{font-size: 6rem;}
@media (max-width:1920px) {
	#mainPage .h_menu {
  	padding: 50px 30px 0;
	}
	#mainPage .text{
		/* padding-right: 30px; */
		padding-right: 80px;
		text-align:right;
	}
	#mainPage .text p{font-size:5rem; }
	#mainPage .text p.name{font-size:2.8rem; margin-top:40px;}
}
@media (max-width:1200px) {
	#mainPage .h_menu {
  	padding: 20px 15px 0;
	}
	#mainPage .h_menu .logo img{
		width: 240px;
	}
	#mainPage .btns {
    gap: 20px;
    margin-bottom: 50px;
	}
	#mainPage .btns .btn {
    width: 180px;
    height: 70px;
    font-size: 25px;
	}
	#lan p {
		padding: 10px;
    font-size: 25px;
	}
	#mainPage .f_menu a{
		padding: 50px 5px;
		font-size: 30px;
	}
	#mainPage  .text{
		padding-top: 140px;
		padding-right: 35px;
	}
	#mainPage  .text img{
		width: 650px;
	}

	#mainPage .text p{font-size:4rem; }
	#mainPage .text p.name{font-size:2.2rem; margin-top:40px;}
}
@media (max-width:1024px) {
	#mainPage .h_menu {
		align-items: center;
	}
	#mainPage .h_menu .mo_menu .logo{display: none;}
	/* #mainPage .h_menu .btn.sponsor{display: none;} */
	#mainPage .h_menu .mo_menu .dp-table-cell.pr20{padding-right: 0 !important;}
	#mainPage  .text{padding-right: 15px;}


	#mainPage #gnb-m-list > ul {
		margin-top:65px;
		border-top:1px solid rgba(255,255,255,.2);
	}
	#mainPage.top-nav-collapse #gnb-m-list > ul{
		margin-top:55px;
	}
	#mainPage #gnb-m-list > ul > li > a.dp1{
		display:block;
		padding:14px 15px;
		background:rgba(30,30,30,.9);
		margin-bottom:1px;
		position:relative;
		background:#fff;
		color:#000!important;
	}
	#mainPage #gnb-m-list > ul > li > a.dp1 > i {
		position:absolute;
		right:20px;
		top:50%;
		margin-top:-10px;
		font-weight:100;
		font-size:22px;
	}
	#mainPage #gnb-m-list > ul > li > a.dp1.opened > i{
		-ms-transform: rotate(45deg); /* IE 9 */
		-webkit-transform: rotate(45deg); /* Safari */
		transform: rotate(45deg);
	}
	#mainPage #gnb-m-list > ul > li > .dp2-box{
		padding:10px 0px 15px 20px;
		display:none;
	}
	#mainPage #gnb-m-list > ul > li > .dp2-box > p{margin:0;}
	#mainPage #gnb-m-list > ul > li > .dp2-box > p > a{
		display:block;
		padding:5px 0;
		color:#000!important;
	}
}
@media (max-width:992px) {
	#mainPage .h_menu .logo img{
		width: 200px;
	}
	#mainPage .btns .btn {
    width: 150px;
	}
	#lan p {
		padding: 10px;
    font-size: 25px;
	}
	#mainPage  .text img{
		width: 500px;
	}

	 #mainPage .h_menu .btn.sponsor{display: none;}

	#mainPage #gnb-m-list > ul > li.sub01{order: -4;}
	#mainPage #gnb-m-list > ul > li.sub02{order: -3;}
	#mainPage #gnb-m-list > ul > li.sub05{order: -2;}
	#mainPage #gnb-m-list > ul > li.sub06{order: -1;}
}
@media (max-width:768px) {
	#mainPage .h_menu .logo img{
		width: 150px;
	}
	#mainPage .btns {
		/* margin-bottom: 30px; */
		margin-bottom: 0;
	}
	#mainPage .btns .btn {
    width: 120px;
		font-size: 20px;
		height: 50px;
	}
	#lan p {
    font-size: 20px;
	}
	#mainPage  .text{
		padding-top: 120px;
	}
	#mainPage  .text img{
		width: 400px;
	}
	#mainPage .f_menu a{
		padding: 30px 5px;
		font-size: 20px;
	}
	
	#mainPage .text p{font-size:3rem; }
	#mainPage .text p.name{font-size:1.8rem; margin-top:20px;}
}
@media (max-width:576px) {
	#mainPage .h_menu .logo img{
		width: 120px;
	}
	#mainPage .btns {
		padding-top: 0;
	}
	#mainPage .btns .btn {
    width: 80px;
		font-size: 18px;
	}
	#lan p {
    font-size: 20px;
	}
	#mainPage  .text {
		padding-top: 100px;
	}
	#mainPage  .text img{
		max-width: 100%;
		width: 300px;
	}
	#mainPage .f_menu{
		position: fixed;
		flex-wrap: wrap; 
		gap: 5px; 
		bottom: 10px;
	}
	#mainPage .f_menu a{
		width: 70%;
		padding: 12px 5px;
		font-size: 16px;
	}
	
	#mainPage .text p{font-size:2.4rem; }
	#mainPage .text p.name{font-size:1.4rem; margin-top:20px;}
}

@media (max-width:500px) {

	#mainPage .text p{font-size:1.8rem; }
	#mainPage .text p.name{font-size:1.2rem; margin-top:20px;}
}