@charset "utf-8";
.main-visual{position: relative; height: 100vh; width: 100%;}
.main-visual > img,
.main-visual > video{width: 100%; height: 100%; object-fit:cover;}
.main-visual > .tbx{position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items:center; justify-content: center; text-align: center; gap:16px; width: 100%; height: 100%; padding-top: 46px;}
.main-visual > .tbx h3{font-family: "Rokkitt", serif; color: #fff; font-size: 60px; font-weight: 700; line-height: normal; position: relative; translate:0 100px; opacity: 0; filter:blur(10px); transition:1.2s .3s; }
.main-visual > .tbx p{color: #FFF;font-size: 24px;font-weight: 500;line-height: 33.9px; /* 141.25% */letter-spacing: -0.48px; ; position: relative; translate:0 100px; opacity: 0; filter:blur(10px); transition:1.2s .6s; }
.main-visual.on{
	> .tbx h3,
	> .tbx p{opacity: 1; translate:0 0; filter:blur(0); }
} 
.main-tit{display: flex; flex-direction: column; gap:20px 		}
.main-tit small{color: #E63118;font-size: 14px;font-weight: 700;line-height: normal;letter-spacing: 3.22px;}
.main-tit h4{color: #000; font-size: 44px; font-weight: 700; line-height: normal; margin-top: -3px;}
.main-tit p{color: #333;font-size: 20px;font-weight: 400;line-height: 32.9px; /* 164.5% */letter-spacing: -0.4px;}
.main-tit .link-box{margin-top: 49px; position: relative; z-index: 10000;}
.main-tit .link-box > a{display: flex; width: 173px; height: 43px; justify-content: center;align-items: center;gap: 10px; border-radius: 35px;border: 1px solid #333; color: #333;font-size: 16px;font-weight: 400;line-height: normal;letter-spacing: -0.32px; transition:.3s;}
.main-tit .link-box > a:hover{background: #333; color: #fff;}
.mcnt1{display: flex; flex-wrap:wrap; justify-content: space-between; gap:65px; padding: 160px 20px 133px;}
.mcnt1 .lbx{width: 342px; padding-top: 98px;}
.mcnt1 .rbx{display: flex; justify-content: space-between; align-items:center; max-width:1044px; flex:1; margin-right: -44px;}
.mcnt1 .rbx figcaption{font-family: "Rokkitt", serif; color: #000;font-size: 60px;font-weight: 700;line-height: normal; position: relative; left: 28px; padding-top: 36px;}
.mcnt2{position: relative; background: #F9F9F9; padding: 100px 0 0px;}
.mcnt2 .lbx{position: sticky; top: 100px; padding-top: 11vw; padding-bottom: 100px; max-width:400px; z-index: 100;}

.mcnt2 .rbx{display: flex; justify-content: flex-end; margin-top: -316px;}
.mcnt2 .rbx > ul{display: flex; flex-wrap:wrap; gap:40px; max-width:720px;}
.mcnt2 .rbx > ul > li{position: relative; width: 340px; }
.mcnt2 .rbx > ul > li > a{position: relative; display: block; border-radius: 20px; overflow: hidden;}
.mcnt2 .rbx > ul > li > a figure{overflow: hidden; }
.mcnt2 .rbx > ul > li > a figure img{transition:.6s;}
.mcnt2 .rbx > ul > li:hover > a figure img{scale:1.05;}

.mcnt2 .rbx > ul > li > a figcaption{position: absolute; align-items: flex-end; justify-content: flex-end; width: 100%; height: 100%; display: flex; left: 0; top: 0; color: #FFF;font-size: 24px;font-weight: 500;line-height: 33.9px; /* 141.25% */letter-spacing: -0.48px; padding: 36px 54px; z-index: 1;}
.mcnt2 .rbx > ul > li:nth-child(even){top: -218px;}
.mcnt3{display: flex; flex-wrap:wrap; justify-content: space-between; padding: 180px 20px 180px;}
.mcnt3 .lbx{padding-top: 43px;}
.mcnt3 .rbx{display: flex; flex-direction: column; gap:11px; }
.mcnt3 .rbx .box > a{position: relative; overflow: hidden;}
.mcnt3 .rbx .box > a img{transition:.6s;}
.mcnt3 .rbx .box > a .tbx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; gap:17px; padding: 78px 28px 28px;}
.mcnt3 .rbx .box > a .tbx h5{color: #FFF;font-size: 35px;font-weight: 600;line-height: 57px; /* 162.857% */letter-spacing: -0.7px;}
.mcnt3 .rbx .box > a .tbx p{color:#FFF;font-size: 16px;font-weight: 600;line-height: 24.1px; /* 150.625% */letter-spacing: -0.32px;}
.mcnt3 .rbx .box > a .tbx i{margin-top: auto; margin-left: auto; transition:.3s;}
.mcnt3 .rbx .box > a:hover {
	img{scale:1.05} 
	.tbx i{translate:10px 0;}
}

.mcnt4{background: url(../img/main/mcnt4-bg.jpg) center no-repeat; height: 293px;}
.mcnt4 .wrap2{height: 100%; display: block;}
.mcnt4 .tbx{text-align: center; display: flex; width: 100%; height: 100%;align-items: center;flex-direction: column;justify-content: center; }
.mcnt4 .tbx h4{color: #FFF;font-size: 35px;font-weight: 600;line-height: 57px; /* 162.857% */letter-spacing: -0.7px; margin-bottom: 17px;}
.mcnt4 .tbx p{color: #FFF;font-size: 16px;font-weight: 600;line-height: 24.1px; /* 150.625% */letter-spacing: -0.32px;}
.mcnt4 .tbx a {line-height: 0; margin-top: 29px;}
.mcnt4 .tbx a img{transition:.6s;}
.mcnt4 .tbx a:hover img{translate:5px 0}