﻿.main-visual {height: 900px;background: url("/resources/img/main/main_visual.jpg") center/cover no-repeat;display: flex;align-items: center;justify-content: center;}   
.main-visual .vt1 {font-size: 80px;font-weight: 700;color: #fff;margin-bottom: 50px;text-align: center;}
.main-visual .vt2 {font-size: 24px;font-weight: 600;color: #fff;margin-bottom: 50px;text-align: center;}

.main-cont {padding: 150px 0;}
.menu-list {display: grid;grid-template-columns: repeat(4, 1fr);gap: 36px;margin-bottom: 60px;}
.menu-item {border-radius: 20px;background-color: #F2F5F9;padding: 40px;min-height: 325px;position: relative;}
.menu-tit {font-size: 28px;font-weight: 700;color: #000;margin-bottom: 20px;}
.menu-txt {font-size: 18px;color: #666;}
.menu-icon {position: absolute;right: 40px;bottom: 40px;width: 70px;height: 70px;background: center/cover no-repeat;}
.menu-icon.icon1 {background-image: url("/resources/img/main/icon1.svg");}
.menu-icon.icon2 {background-image: url("/resources/img/main/icon2.svg");}
.menu-icon.icon3 {background-image: url("/resources/img/main/icon3.svg");}
.menu-icon.icon4 {background-image: url("/resources/img/main/icon4.svg");}

.menu-item:hover {background-color: #0D427F;}
.menu-item:hover .menu-tit,.menu-item:hover .menu-txt {color: #fff;}
.menu-item:hover .menu-icon.icon1 {background-image: url("/resources/img/main/icon1_on.svg");}
.menu-item:hover .menu-icon.icon2 {background-image: url("/resources/img/main/icon2_on.svg");}
.menu-item:hover .menu-icon.icon3 {background-image: url("/resources/img/main/icon3_on.svg");}
.menu-item:hover .menu-icon.icon4 {background-image: url("/resources/img/main/icon4_on.svg");}

.customer-list {display: grid;grid-template-columns: repeat(4, 1fr);border-radius: 20px;overflow: hidden;}
.customer-first {font-size: 28px;font-weight: 700;color: #fff;background-color: #0D427F;line-height: 1;align-content: center;height: 100%;padding-left: 40px;}
.customer-link {background-color: #F2F5F9;padding: 30px 0 30px 60px;display: flex;align-items: center;gap: 14px;}
.customer-link span {font-size: 20px;font-weight: 700;color: #000;}

.about-cont {height: 650px;background: url("/resources/img/main/about_bg.jpg") center/cover no-repeat;display: flex;align-items: center;justify-content: center;padding: 0 300px;}
.at1 {font-size: 40px;font-weight: 700;color: #fff;margin-bottom: 30px;text-align: center;}
.at2 {font-size: 20px;font-weight: 600;color: #fff;line-height: 1.7;margin-bottom: 50px;text-align: center;}

@media (max-width: 1600px) {
	.main-visual .vt1 {font-size: 70px;}
	.menu-tit {font-size: 25px;}
	.at1 {font-size: 35px;}
	.customer-first {font-size: 25px;}
}
@media (max-width: 1560px) {

}
@media (max-width: 1499px) {

	.main-visual .vt1 {font-size: 60px;}
}

@media (max-width: 1429px) {
	.customer-link {padding: 30px 0 30px 50px;}
}
@media (max-width: 1399px) {
	.main-visual .vt2 {font-size: 20px;}
	.main-visual .vt1 {font-size: 50px;}
	.about-cont {padding: 0 200px;}
	.menu-tit {font-size: 20px;}
	.menu-txt {font-size: 16px;}
	.menu-item {min-height: 280px;}
	.customer-link span {font-size: 18px;}
	.customer-first {font-size: 22px;}
	.at2 {font-size: 18px;}
	.at1 {font-size: 30px;}
}
@media (max-width: 1259px) {
	.customer-first {font-size: 20px;}
}

@media (max-width: 1219px)	{
	.main-visual {height: 700px;}
	.main-visual .vt1 {font-size: 40px;}
	.about-cont {padding: 0 100px;}
	.menu-item {padding: 30px;}
	.customer-link {padding: 30px 0 30px 30px;}
	.main-visual .vt2 {font-size: 18px;}
}

@media (max-width: 991px) {
	.main-visual {height: 500px;}
	.main-visual .vt1 {font-size: 30px;margin-bottom: 25px;}
	.main-visual .vt2 {font-size: 16px;margin-bottom: 25px;}
	.main-cont {padding: 70px 0;}
	.menu-list {gap: 16px;margin-bottom: 30px;}
	.menu-txt {font-size: 14px;}
	.menu-tit {font-size: 16px;margin-bottom: 10px;}
	.menu-icon {width: 35px;height: 35px;right: 20px;bottom: 20px;}
	.menu-item {padding: 20px;min-height: 200px;}
	.customer-first {font-size: 18px;padding-left: 20px;}
	.customer-link {padding: 20px 0 20px 20px;gap: 10px;}
	.customer-link span {font-size: 16px;}
	.customer-link img {width: 30px;}
	.about-cont {padding: 0 50px;height: 450px;}
	.at2 {font-size: 16px;margin-bottom: 25px;}
	.at1 {font-size: 20px;margin-bottom: 15px;}
}	

@media (max-width: 767px) {
	.menu-list {grid-template-columns: repeat(2, 1fr);}
	.customer-list {grid-template-columns: repeat(1, 1fr);}
	.customer-first {padding: 20px;}
	.about-cont {padding: 0;}
	.menu-item {min-height: 150px;}
	.at2 {font-size: 14px;}
	.main-visual {height: 400px;}
	.main-visual .vt1 {font-size: 25px;}
	.main-visual .vt2 {font-size: 14px;}
}	

@media (max-width: 375px) {

}