/*-- index css --*/

/*common*/
html, body{width: 100%;height: 100vh;overflow: hidden;}

@media screen and (max-width: 1080px){

	html, body{height: auto;overflow: auto;}
}

/*-- mainVisual --*/
.mainVisual{height: 100vh;position: relative;overflow: hidden;}
.mainVisual::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;
	background: linear-gradient(to bottom, #FFF, 40%, transparent);
}

.videoBox{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
.videoBox video{width: 100%;height: 100%;pointer-events: none;object-fit: cover;}

@media screen and (max-width: 1080px){

	.mainVisual{position: absolute;width: 100%;height: 700px;}
	.mainVisual::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;
		background: linear-gradient(to top, #FFF, 20%, transparent);
	}
}

/*-- index --*/
.mainWrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 90px 0;padding-bottom: 120px;z-index: 1;}

.mainBox{display: flex;align-items: flex-start;width: 95%;height: 100%;margin: 0 auto;}
.main-lft, .main-rgt{height: 100%;}
.main-lft{display: flex;flex-direction: column;justify-content: flex-end;width: 30%;}
.main-rgt{width: 70%;}

.main-title{margin-bottom: 80px;}
.main-title h2{font-size: var(--fs-100);font-weight: var(--fw-8);line-height: 100%;color: var(--color-3);}
.main-title h2 i, .main-title h2 span{display: block;}
.main-title h2 i{font-size: var(--fs-45);margin-bottom: -18px;}
.main-title h2 i b{font-size: 9.25rem;}

.contace-info h4{font-size: var(--fs-24);font-weight: var(--fw-9);color: var(--color-3);}
.contace-info p{margin-top: 20px;}
.contace-info p i{display: block;font-weight: var(--fw-5);margin-top: 5px;}

.main-list{display: flex;flex-wrap: wrap;align-items: flex-start;gap: 20px;height: 100%;}
.main-list li{width: calc( ( 100% - 40px ) / 3 );height: calc( ( 100% - 20px ) / 2 );border-radius: 20px;overflow: hidden;}
.main-list li a{display: block;width: 100%;height: 100%;position: relative;}
.main-list li figure{width: 100%;height: 100%;overflow: hidden;position: relative;transition: transform .4s ease;
	box-shadow: 0px 15px 15px rgba(0, 0, 0, .1);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.main-list li figure::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: linear-gradient(to top, #000, 30%, transparent);
}
.main-list li h4{position: absolute;bottom: 0;left: 0;width: 100%;color: #FFF;font-size: var(--fs-15);font-weight: var(--fw-6);word-break: keep-all;padding: 16px 20px;line-height: 150%;z-index: 1;}

.main-list-1 figure{background-image: url(/img/main/main_1.jpg);}
.main-list-2 figure{background-image: url(/img/main/main_2.jpg);}
.main-list-3 figure{background-image: url(/img/main/main_3.jpg);}
.main-list-4 figure{background-image: url(/img/main/main_4.jpg);}
.main-list-5 figure{background-image: url(/img/main/main_5.jpg);}
.main-list-6 figure{background-image: url(/img/main/main_6.jpg);}

.main-list li:hover figure{transform: scale(1.05);}

@media screen and (max-width: 1680px){

	.main-title{margin-bottom: 70px;}
	.main-title h2{font-size: var(--fs-90);}
	.main-title h2 i{font-size: var(--fs-40);margin-bottom: -16px;}
	.main-title h2 i b{font-size: 8.35rem;}

	.contace-info h4{font-size: var(--fs-22);}
	.contace-info p{margin-top: 15px;}	
}

@media screen and (max-width: 1280px){

	.mainWrap{padding-bottom: 110px;}

	.main-list{gap: 10px;}
	.main-list li{width: calc( ( 100% - 20px ) / 3 );height: calc( ( 100% - 10px ) / 2 );}
	.main-list li figure{border-radius: 15px;}
	
	.main-title{margin-bottom: 60px;}
	.main-title h2{font-size: var(--fs-70);}
	.main-title h2 i{font-size: var(--fs-35);margin-bottom: -10px;}
	.main-title h2 i b{font-size: 6.25rem;}
}

@media screen and (max-width: 1080px){

	.mainWrap{position: relative;height: auto;padding-top: 60px;padding-bottom: 0;}

	.mainBox{display: block;height: auto;}
	.main-lft, .main-rgt{width: 100%;height: auto;}
	.main-lft{display: block;margin-top: 70px;}
	.main-rgt{margin-bottom: 20px;}
	
	.main-title{margin-bottom: 50px;}
	.main-title h2{text-align: center;}
	.main-title h2 span br{display: none;}
	.main-title h2 i, .main-title h2 i b{font-size: var(--fs-70);}
	.main-title h2 i{margin-bottom: 0;}
	
	.contace-info{text-align: center;}
	
	.main-list{margin-top: 50px;}
	.main-list li{height: auto;}
	.main-list li figure{height: 400px;}
}

@media screen and (max-width: 860px){

	.main-list li{width: calc((100% - 10px) / 2);}
}

@media screen and (max-width: 720px){

	.mainBox{width: 90%;}
	
	.main-lft{margin-top: 60px;}
	
	.main-title{margin-bottom: 40px;}
	.main-title h2{line-height: 110%;}
	.main-title h2, .main-title h2 i, .main-title h2 i b{font-size: 45px;}
	
	.contace-info h4{font-size: 18px;}
	.contace-info p{margin-top: 10px;}
	.contace-info p i{font-size: 14px;}
	
	.main-list{margin-top: 40px;}
	.main-list li{width: 100%;}
	.main-list li figure{height: 240px;border-radius: 10px;}
	.main-list li h4{font-size: 14px;}
}

/*-- footet --*/
#footer{position: fixed;bottom: 20px;left: 0;width: 100%;z-index: 800;}

@media screen and (max-width: 1080px){

	#footer{position: relative;bottom: auto;top: auto;left: auto;right: auto;}
}