@charset "utf-8";
/* intro page — team selector (drive / revive) */

:root{
    --width:1516px;
    --padding:20px;
    --header_h:162px;
    --point-color-1:#191919;
}

#wrap{word-break:keep-all;}

.cont{max-width:var(--width); margin:0 auto; padding:0 var(--padding);}

/* ===== header ===== */
/* header-static */
/* intro only: header scrolls with the page, no scrolled background (client request) */
.header{position:absolute; top:0; left:0; z-index:100; width:100%; height:var(--header_h); padding:0 var(--padding); display:flex; align-items:center;}
.header .logo{width:100%; max-width:1640px; margin:0 auto;}
.header .logo a{display:inline-block;}

@media (max-width:1024px){
.header{padding:0 40px;}
}

@media (max-width:960px){
.header{--header_h:65px; padding:0 30px;}
}

/* ===== main ===== */
.main_intro .team_list{display:flex; height:1080px; overflow:hidden;}
.main_intro .team_list li{position:relative; z-index:0; width:50%; transition:z-index 0s 0.5s;}
.main_intro .team_list li:hover{z-index:1; transition:z-index 0s;}
.main_intro .team_list:hover li:not(:hover){z-index:0; transition:z-index 0s;}
.main_intro .team_list img{position:absolute; top:0; z-index:-2; width:100%; height:100%; max-width:none; object-fit:cover; pointer-events:none; transition:width 0.5s ease-out;}
.main_intro .team_list li::before{content:""; position:absolute; top:0; z-index:-1; width:100%; height:100%; background:#1e1e1e; pointer-events:none; transition:width 0.5s ease-out, opacity 0.5s ease-out;}
.main_intro .drive img{left:0;}
.main_intro .drive::before{left:0; opacity:0.3;}
.main_intro .revive img{right:0;}
.main_intro .revive::before{right:0; opacity:0.5;}
.main_intro .team_list li:hover img,
.main_intro .team_list li:hover::before{width:106.25%;}
.main_intro .drive:hover::before{opacity:0.7;}
.main_intro .revive:hover::before{opacity:0.8;}
.main_intro .team_list a{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; height:100%; padding:0 14.583%;}
.main_intro .tit{font-size:3.125rem; font-weight:400; line-height:1.4; letter-spacing:-0.015em; white-space:nowrap; margin-top:-4px; color:#fff; transition:font-size 0.3s ease-out;}
.main_intro .tit span{font-weight:700; vertical-align:baseline;}
.main_intro .btn{display:flex; align-items:center; justify-content:space-between; width:328px; margin-top:64px; padding:6px 46px; line-height:2.333; border:1px solid #dcdcdc; border-radius:2em; font-size:1.5rem; font-weight:500; letter-spacing:-0.015em; color:#dcdcdc; transition:background-color 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out, padding 0.3s ease-out, margin-top 0.3s ease-out;}
.main_intro .btn::after{content:""; width:22px; aspect-ratio:22/14; background:#dcdcdc; -webkit-mask:url("../img/icon_arrow.svg") no-repeat; mask:url("../img/icon_arrow.svg") no-repeat; transition:background-color 0.3s ease-out;}
.main_intro .team_list li:hover .tit{font-size:3.75rem;}
.main_intro .team_list li:hover .btn{margin-top:62px; padding:6px 36px; border-color:#fff; background:#fff; color:#000;}
.main_intro .team_list li:hover .btn::after{background:#000;}

@media (max-width:1024px){
.main_intro .btn{width:280px; padding:8px 30px; font-size:1.25rem;}
.main_intro .team_list li:hover .btn{padding:8px 24px;}
}

@media (max-width:960px){
.main_intro .team_list{position:relative; display:block; height:auto; aspect-ratio:375/670;}
.main_intro .tit,
.main_intro .btn,
.main_intro .btn::after{transition:none;}
.main_intro .team_list li{position:absolute; top:0; left:0; width:100%; height:100%;}
.main_intro .drive{clip-path:polygon(0 0, 100% 0, 0 100%);}
.main_intro .revive{clip-path:polygon(100% 0, 100% 100%, 0 100%);}
.main_intro .team_list li:hover img,
.main_intro .team_list li:hover::before{width:100%; transition:none;}
.main_intro .drive img{object-position:left top; transition:none;}
.main_intro .revive img{object-position:right top; transition:none;}
.main_intro .team_list .drive::before,
.main_intro .drive:hover::before,
.main_intro .revive:hover::before{opacity:0.5; transition:none;}
.main_intro .team_list a{justify-content:flex-start; padding:24.533% 8% 0;}
.main_intro .revive a{align-items:flex-end; justify-content:flex-end; padding:0 8% 13.333%; text-align:right;}
.main_intro .tit,
.main_intro .team_list li:hover .tit{margin-top:0; font-size:20px; line-height:1.5;}
.main_intro .btn,
.main_intro .team_list li:hover .btn{width:159px; margin:13px 0 0; padding:6px 19px 7px 18px; line-height:1.538; border-color:#dcdcdc; background:none; font-size:13px; color:#dcdcdc;}
.main_intro .btn::after,
.main_intro .team_list li:hover .btn::after{width:12px; aspect-ratio:12/8; background:#dcdcdc; -webkit-mask-image:url("../img/icon_arrow_m.svg"); mask-image:url("../img/icon_arrow_m.svg");}
}

/* ===== footer ===== */
.footer{padding:82px 0 75px; background:#191919;}
.footer .cont{display:flex; align-items:flex-start;}
.footer .logo{margin:-1px 85px 0 0;}
.footer p{font-size:1rem; font-weight:300; line-height:1.5; letter-spacing:-0.015em; color:#dcdcdc;}
.footer .info{width:665px;}
.footer .copyright{position:relative; padding-left:91px;}
.footer .copyright::before{content:""; position:absolute; top:-2px; bottom:1px; left:0; width:1px; background:#7d7d7d;}

@media (max-width:1400px){
.footer .cont{flex-wrap:wrap; gap:30px 60px;}
.footer .logo{width:100%; margin:0;}
.footer .info{width:auto;}
.footer .copyright{padding-left:60px;}
}

@media (max-width:960px){
.footer{padding:40px 0 50px;}
.footer .cont{display:block; padding:0 18px;}
.footer .logo{margin-bottom:0; padding-bottom:20px; border-bottom:1px solid #7d7d7d; text-align:center;}
.footer p{padding:0 12px; font-size:13px; line-height:1.4615;}
.footer .info{margin-top:26px;}
.footer .copyright{margin-top:16px; padding:0 12px;}
.footer .copyright::before{display:none;}
}