@charset "utf-8";

.mainbody { overflow:hidden; }
#fullpage { overflow:hidden; height:100vh }
@media screen and (max-width:1024px) {
	.mainbody { overflow:inherit; }
}

/* .main .aniBox { max-width:1920px; margin:0 auto; } */

.main,
.main .section { overflow:hidden; }
@media screen and (max-width:1024px) {
    .fp-section {
        pointer-events:auto !important;
        overflow:visible !important;
        height:auto !important;
    }
    html, body {
        overflow:auto !important;
    }
    .section { height:auto !important; }
	.section .fp-tableCell,
	.section .fp-scrollable { height:auto !important; }
	
	.fp-section, .fp-tableCell{height:auto !important;}
	.iScrollIndicator,
	.fp-scrollable { height:auto !important; }
	.iScrollVerticalScrollbar { display:none !important; } 

    #fullpage { overflow:hidden; height:auto !important; }
}
@media screen and (max-height:700px){
}

.main .aniBox { position:relative; z-index:2; }

#menu { opacity:1; transition:all 0.3s; position:fixed; right:60px !important; top:unset !important; bottom:60px !important; margin-top:0 !important; z-index:10 }
#menu ul { display:flex; align-items:center; gap:15px; }
#menu li a { position:relative; padding-right:15px; display:flex; align-items:center; }
#menu li a:before { content:""; display:block; opacity:0; width:5px; height:5px; position:absolute; right:0; top:50%; transform:translate(0, -50%); background:#111; transition:all 0.4s; opacity:0.3; }
#menu li a span { display:none; transition:all 0.3s; color:#111; font-size:var(--font20); font-weight:500; line-height:1.0; }
#menu li.active a:before { opacity:1; }
#menu li.active a span{ display:inline-flex; align-items:center; }
#wrap.on #menu li a:before { background:#fff; }
#wrap.on #menu li a span { color:#fff; }
.fp-viewing-Last #menu { opacity:0; }
@media screen and (max-width:1440px){
	#menu { right:20px !important; bottom:40px !important; }
}
@media screen and (max-width:1280px){
	#menu { bottom:20px !important; }
}
@media screen and (max-width:1024px){
	#menu { display:none }
}

#visual { position:relative; width:100%; height:100vh; overflow:hidden; }
#visual .swiper-container { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100%; overflow:hidden; display:flex; }
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide .mov video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }

#visual .swiper-container .swiper-slide .ImgBg  { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; background-position:center top; background-repeat:no-repeat; background-size:cover; }
#visual .swiper-container .swiper-slide.swiper-slide-active .ImgBg { animation:v_bg-1 1.8s 0.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; top:50%; left:0; transform:translateY(-50%); text-align:center; width:100%; padding:0 20px; z-index:15; display:flex; align-items:center; justify-content:center; gap:25px; }
#visual .swiper-container .swiper-slide .txtbox .txt { color:#fff; font-size:var(--font120); font-weight:500; line-height:1.2; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt span { opacity:0; display:block }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt { animation:visual_txt_off 0.5s 5s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 span { animation:visual_txt 1.0s 0.2s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 span { animation:visual_txt 1.0s 0.7s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-3 span { animation:visual_txt 1.0s 1.2s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-4 span { animation:visual_txt 1.0s 1.7s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-5 span { animation:visual_txt 1.0s 2.2s forwards; }


#visual .swiper-pagination { position:absolute; bottom:60px; display:flex; align-items:center; justify-content:center; gap:10px; }
#visual .swiper-pagination .swiper-pagination-bullet { width:30px; height:3px; background:rgba(255, 255, 255, 0.3); border-radius:1px; opacity:1; margin:0; transition:all 0.4s; }
#visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background:rgba(255, 255, 255, 1); }

.swiper-button-next, 
.swiper-button-prev,
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox { gap:20px; }
	#visual .swiper-pagination { bottom:40px; }
}
@media screen and (max-width:1280px){
	#visual .swiper-pagination { bottom:20px; }
	#visual .swiper-container .swiper-slide .txtbox .txt { font-size:var(--font100); }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { gap:15px; }
	#visual .swiper-pagination .swiper-pagination-bullet { width:24px; height:2px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox { gap:10px; }
	#visual .swiper-container .swiper-slide .txtbox .txt { font-size:var(--font80); }
}

@keyframes v_bg {
	0% { transform:scale(1.0); }
	100% { transform:scale(1.1); }
}
@keyframes v_bg-1 {
	0% { transform:scale(1.1); }
	100% { transform:scale(1.0); }
}
@keyframes visual_txt {
	0% { transform:translateY(40px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}
@keyframes visual_txt_off {
	0% { opacity:1; }
	100% { opacity:0; }
}

.scrolldown { position:absolute; left:60px; bottom:60px; z-index:5; display:flex; align-items:center; gap:7px; }
.scrolldown .txt { color:#fff; font-size:var(--font20); font-weight:500; line-height:1.3; }
.scrolldown img { animation:scrollDown 2s 0.1s infinite; }
@media screen and (max-width:1440px){
	.scrolldown { left:20px; bottom:40px; }
}
@media screen and (max-width:1280px){
	.scrolldown { bottom:20px; }
}
@media screen and (max-width:1024px){
	.scrolldown { display:none }
}
@keyframes scrollDown {
    0% { transform:translate(0, -8px); }
    50% { transform:translate(0, 8px); }
    100% { transform:translate(0, -8px); }
}


.title-box {  }
.title-box h3 { overflow:hidden }
.title-box h3 span { display:block; color:#000; font-size:var(--font52); font-weight:600; line-height:1.3; letter-spacing:-0.045em;  }



.company { position:relative; height:100vh; }
.company .bg { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%, -50%); width:100%; height:102%; }
.company .bg img { width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.company .stit { margin-bottom:25px; color:#bbb; font-size:var(--font20); font-weight:600; line-height:1.3; letter-spacing:-0.035em; }
.company .title-box { position:absolute; top:20%; left:8%; }
.company .txtbox { position:absolute; top:25%; left:8%; z-index:4; width:calc(100% - 16%); display:flex; justify-content:space-between; }
.company .txtbox .l-box .txt { color:#fff; font-size:var(--font52); font-weight:600; line-height:1.6; letter-spacing:-0.045em; }
.company .txtbox .r-box .txt { margin:45px 0 35px; color:#fff; font-size:var(--font22); font-weight:400; line-height:1.7; letter-spacing:-0.040em; }

/* animation */
.company .bg { opacity:0; transform:translate(-50%, -30%); clip-path:inset(45% 8% 15% 8% round 4px); }
.company .bg img { transform:scale(0.9); transition:all 1.2s; }
.aniBox.on .company .bg { animation:ani_top1 1.0s, ani_company_bg 1.2s 1.4s; animation-fill-mode:both; }
.aniBox.on .company .bg img { transform:scale(1); animation:img_size 1.0s 1.4s; animation-fill-mode:both; }
.company .txtbox .l-box,
.company .txtbox .r-box .txt { opacity:0; }
.aniBox.on .company .txtbox .l-box { animation:txt_up_ani 1.2s 2.3s; animation-fill-mode:both; }
.aniBox.on .company .txtbox .r-box .txt { animation:txt_up_ani 1.2s 2.7s; animation-fill-mode:both; }
.aniBox.on .company .txtbox .r-box .btn-link { animation:txt_up_ani 1.2s 3.2s; animation-fill-mode:both; }

@keyframes ani_top1 {
	0% { opacity:0; transform:translate(-50%, -30%);  }
	100% { opacity:1; transform:translate(-50%, -50%); }
}
@keyframes ani_company_bg {
	0% { clip-path:inset(45% 8% 15% 8% round 4px); }
	100% { clip-path:inset(0% 0% 0% 0% round 0); }
}
@keyframes img_size {
	0% { transform:scale(0.9); }
	100% { transform:scale(1);  }
}
@keyframes txt_up_ani {
	0% { opacity:0; transform:translateY(50px); }
	100% { opacity:1; transform:translateY(0);  }
}
/* height */
@media screen and (max-height:800px){
	.company .bg { clip-path:inset(48% 8% 15% 8% round 4px); }
	@keyframes ani_company_bg {
		0% { clip-path:inset(48% 8% 15% 8% round 4px); }
		100% { clip-path:inset(0% 0% 0% 0% round 0); }
	}
}
@media screen and (max-height:700px){
	.company .bg { clip-path:inset(52% 8% 15% 8% round 4px); }
	@keyframes ani_company_bg {
		0% { clip-path:inset(52% 8% 15% 8% round 4px); }
		100% { clip-path:inset(0% 0% 0% 0% round 0); }
	}
}
/* width */
@media screen and (max-width:760px){
	.company { height:600px; }
	.company .title-box { left:20px; top:25%; padding-right:15px; }
	.company .title-box h3 span { display:inline; }
	.company .txtbox { position:absolute; top:20%; left:20px; z-index:4; width:calc(100% - 40px); flex-wrap:wrap; }
	.company .txtbox > div { width:100%; }
	.company .txtbox .l-box .txt br { display:none; }
	.company .txtbox .l-box .txt span.m_br { display:block; }
	.company .bg { clip-path:inset(52% 20px 15% 20px round 4px); }
	@keyframes ani_company_bg {
		0% { clip-path:inset(52% 20px 15% 20px round 4px); }
		100% { clip-path:inset(0% 0% 0% 0% round 0); }
	}
}

.business { position:relative; height:100vh; }
.business .list { position:absolute; left:50%; top:200px; transform:translate(-50%, 0); z-index:3; width:100%; padding:0 60px; }
.business .list ul { display:flex; gap:10px; padding:10px; border-radius:2px; background:rgba(0, 0, 0, 0.30); }
.business .list ul li { width:calc((100% - 30px) / 4); height:46px; border-radius:var(--borderR4); background:rgba(0, 0, 0, 0.80); }
.business .list ul li a { color:#fff; font-size:var(--font20); font-weight:500; line-height:1.1; display:flex; align-items:center; justify-content:center; text-align:center; width:100%; height:100%; }
.business .list ul li.on { background:var(--mainColor); }
.business .slider { position:relative; width:100%; height:100%; }
.business .slider .slick-list,
.business .slider .slick-track,
.business .slider .slick-slide,
.business .slider .slick-slide > div,
.business .slider .item { width:100%; height:100%; }
.business .slider .bg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; }
.business .slider .bg img { width:100%; height:100%; object-fit:cover; -o-object-fit:cover; margin-top:150px; transition:all 1.2s; }
.business .slider .txtbox { height:100%; padding:380px 8% 0; position:relative; z-index:3; }
.business .slider .txtbox .stit { color:rgba(255, 255, 255, 0.4); font-size:var(--font24); font-weight:500; line-height:1.3; letter-spacing:-0.04em; }
.business .slider .txtbox h4 { margin:30px 0 40px; color:#fff; font-size:var(--font110); font-weight:500; line-height:1.3; letter-spacing:-0.08em; }
.business .slider .txtbox dt { color:#fff; font-size:var(--font28); font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.business .slider .txtbox dd { margin-top:25px; color:rgba(255, 255, 255, 0.8); font-size:var(--font20); font-weight:500; line-height:1.3; letter-spacing:-0.035em; }
.business .slider .txtbox .btn-link { margin-top:60px; }
/* height */
@media screen and (max-height:800px){
	.business .list { top:130px; }
	.business .slider .txtbox { padding:220px 8% 0; }
	.business .slider .txtbox h4 { margin:25px 0 35px; }
	.business .slider .txtbox dd { margin-top:20px; }
	.business .slider .txtbox .btn-link { margin-top:50px; }
}
@media screen and (max-height:700px){
	.business .list { top:70px; }
	.business .slider .txtbox { padding:170px 8% 0; }
	.business .slider .txtbox h4 { margin:20px 0 30px; }
	.business .slider .txtbox dd { margin-top:15px; }
	.business .slider .txtbox .btn-link { margin-top:40px; }
}
/* width */
@media screen and (max-width:1560px){
	.business .list { top:180px; }
	.business .slider .txtbox { padding:320px 8% 0; }
}
@media screen and (max-width:1440px){
	.business .list { padding:0 20px; }
	.business .list { top:150px; }
	.business .slider .txtbox { padding:280px 60px 0; }
	.business .slider .txtbox h4 { margin:25px 0 35px; }
	.business .slider .txtbox dd { margin-top:20px; }
	.business .slider .txtbox .btn-link { margin-top:50px; }
}
@media screen and (max-width:1024px){
	.business .list { top:130px; }
	.business .list ul { gap:5px; padding:5px; }
	.business .list ul li { width:calc((100% - 15px) / 4); height:40px; }
	.business .slider .txtbox { padding:250px 40px 0; }
	.business .slider .txtbox h4 { margin:20px 0 30px; }
	.business .slider .txtbox dd { margin-top:15px; }
	.business .slider .txtbox .btn-link { margin-top:40px; }
}
@media screen and (max-width:760px){
	.business { height:600px; }
	.business .list { top:100px; }
	.business .slider .txtbox { padding:200px 25px 0; }
}

/* animation */
.business .slider .bg { clip-path:inset(20% 8% 12%); }
.aniBox.on .business .slider .bg { animation:ani_slider_bg 1.0s 0.1s; animation-fill-mode:both; }
.aniBox.on .business .slider .bg img { margin-top:0; }
.business .list,
.business .slider .txtbox { opacity:0; }
.aniBox.on .business .list { opacity:1; animation:ani_slider3-1 0.8s 1.0s; animation-fill-mode:both; }
.aniBox.on .business .slider .txtbox { opacity:1; animation:ani_slider3-2 0.8s 1.5s; animation-fill-mode:both; }

.business .slider .txtbox .stit,
.business .slider .txtbox h4 { opacity:0; }
.business .slider .slick-active .txtbox .stit { animation:ani_5 0.8s 0.8s; animation-fill-mode:both; }
.business .slider .slick-active .txtbox h4 { animation:ani_slider1 0.8s 0.3s; animation-fill-mode:both; }
.business .slider .txtbox dl { opacity:0; }
.business .slider .slick-active .txtbox dl { animation:ani_slider2 0.8s 0.6s; animation-fill-mode:both; }
.business .slider .txtbox .btn-link { opacity:0; }
.business .slider .slick-active .txtbox .btn-link { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
@media screen and (max-width:760px){
	.business .slider .bg { clip-path:inset(20% 20px 12%); }
}

@keyframes ani_slider1 {
	0% { transform:translateX(12%); opacity:0; }
	100% { transform:translateX(0); opacity:1; }
}

@keyframes ani_slider1 {
	0% { transform:translateX(12%); opacity:0; }
	100% { transform:translateX(0); opacity:1; }
}
@keyframes ani_slider2 {
	0% { transform:translateX(10%); opacity:0; }
	100% { transform:translateX(0); opacity:1; }
}
@keyframes ani_slider3-1 {
	0% { transform:translate(-50%, 100px); opacity:0; }
	100% { transform:translate(-50%, 0); opacity:1; }
}
@keyframes ani_slider3-2 {
	0% { transform:translate(0, 100px); opacity:0; }
	100% { transform:translate(0, 0); opacity:1; }
}
/*
@keyframes ani_slider_bg {
	0% { width:80%; height:70%; }
	100% { width:101%; height:101%; }
}
*/
@keyframes ani_slider_bg {
	0% { clip-path:inset(20% 8% 12%); }
	100% { clip-path: inset(0% 0% 0%); }
}
@media screen and (max-width:760px){
	@keyframes ani_slider_bg {
		0% { clip-path:inset(20% 20px 12%); }
		100% { clip-path: inset(0% 0% 0%); }
	}
}
/*
@keyframes ani_slider_bg {
	0% { clip-path:polygon(8% 15%, 92% 15%, 92% 85%, 8% 85%); }
	100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
*/

/* support */
.main4 { background:url(/img/main/support_bg.png) no-repeat center / cover; }
.support { padding:0 8%; }
.support .title-box { padding-top:50px; }
.support .listbox { display:flex; gap:0 30px; margin-top:30px; }
.support .listbox .box { width:calc((100% - 60px) / 3); padding-top:10px; }
.support .listbox .box a { display:block; transition:all 0.4s; }
.support .listbox .box .tit { display:flex; justify-content:space-between; }
.support .listbox .box .tit h4 { color:#999; font-size:var(--font20); font-weight:500; line-height:1.3; }
.support .listbox .box .tit img { filter:brightness(0) invert(0); transition:all 0.4s; }
.support .listbox .box figure { position:relative; overflow:hidden; margin:15px 0; border-radius:var(--borderR4); }
.support .listbox .box figure:before {content:""; display:block; padding-bottom:47%; }
.support .listbox .box figure img { transition:all 0.4s ease-in-out; transform:scale(1); position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.support .listbox .box .txtbox { position:relative; padding:30px; height:280px; background:#fff; border-radius:var(--borderR4); }
.support .listbox .box .txtbox .type { padding:0 15px; height:30px; color:#fff; font-size:var(--font15); font-weight:400; line-height:1; background:#000; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; }
.support .listbox .box .txtbox h5 { margin:15px 0; color:#111; font-size:var(--font26); font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.support .listbox .box .txtbox .txt { color:#333; font-size:var(--font17); font-weight:300; line-height:1.5; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.support .listbox .box .txtbox .btn-link { position:absolute; right:30px; bottom:30px; }
.support .listbox .box:hover a { margin-top:-10px; }
.support .listbox .box:hover .tit img { filter:none; }
.support .listbox .box:hover figure img { transform:scale(1.05); }
.support .listbox .box:hover .btn-link span { border-color:var(--mainColor); background:var(--mainColor); color:#fff; }
.support .listbox .box:hover .btn-link img { filter:brightness(0) invert(1); }
/* height */
@media screen and (max-height:800px){
	.support .listbox { margin-top:20px; }
	.support .listbox .box .txtbox { padding:20px; height:260px; }
	.support .listbox .box .txtbox .btn-link { right:20px; bottom:20px; }
}
/* width */
@media screen and (max-width:1440px){
	.support { padding:0 20px; }
}
@media screen and (max-width:1024px){
	.main4 { padding:0 0 50px;}
	.support .listbox .box .txtbox { padding:20px; height:260px; }
	.support .listbox .box .txtbox .btn-link { right:20px; bottom:20px; }
}
@media screen and (max-width:760px){
	.support .listbox { position:relative; padding-bottom:40px; }
	.support .listbox .slick-slide { margin-right:10px; }
	.support .listbox .slick-list { margin-right:-10px; }
	.support .listbox .slick-dots { position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; gap:10px; }
	.support .listbox .slick-dots li { width:24px; height:2px; background:rgba(0, 0, 0, 0.3); border-radius:1px; opacity:1; margin:0; transition:all 0.4s;}
	.support .listbox .slick-dots li.slick-active { background:rgba(0, 0, 0, 1); }
	.support .listbox .slick-dots button { border:none; outline:none; text-indent:-9999em; overflow:hidden; }
	.support .listbox .box .txtbox { height:240px; }
}

/* animation */
.support .title-box h3 { overflow:hidden; }
.support .title-box h3 span { display:block; opacity:0; }
.aniBox.on .support .title-box h3 span { animation:ani_3 0.8s 0.1s; animation-fill-mode:both; }
.support .listbox { overflow:hidden; }
.support .listbox .box { opacity:0; }
.aniBox.on .support .listbox .box { animation:ani_4 0.5s 0.1s; animation-fill-mode:both; } 

/* Partnership */
.partnership { position:relative; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.partnership .bg { position:absolute;  overflow:hidden; z-index:1; }
.partnership .bg1 { top:0; left:50%; transform:translateX(-50%); width:100%; height:426px; background:url(/img/main/partnership_bg1.png) no-repeat center bottom / cover; }
.partnership .bg2 { bottom:0; left:50%; transform:translateX(-50%); width:100%; height:240px; background:url(/img/main/partnership_bg2.png) no-repeat center top / cover; }
.partnership .title-box { text-align:center; position:absolute; top:160px; z-index:2;  }
.partnership .title-box .stit { margin-bottom:25px; color:#bbb; font-size:var(--font20); font-weight:600; line-height:1.3; letter-spacing:-0.035em; }
/*
.partnership .title-box .stit { margin-bottom:25px; color:#bbb; font-size:var(--font52); font-weight:600; line-height:1.3; letter-spacing:-0.035em; }
.partnership .title-box h3 span { font-size:var(--font20); }
*/
.partnership .listbox { padding-top:180px; display:flex; gap:15px; }
.partnership .listbox ul { display:flex; gap:15px; }
.partnership .btn-link { position:absolute; bottom:110px; z-index:2; }
/* height */
@media screen and (max-height:850px){
	.partnership .bg1 { height:360px; }
	.partnership .bg2 { height:160px; }
	.partnership .title-box { top:140px; }
	.partnership .btn-link { bottom:50px; }
}
@media screen and (max-height:720px){
	.partnership .bg1 { height:280px; }
	.partnership .bg2 { height:100px; }
	.partnership .title-box { top:50px; }
	.partnership .btn-link { bottom:40px; }
}
/* width */
@media screen and (max-width:1440px){
	.support { padding:0 20px; } 
	.partnership .listbox ul li { width:300px; }
	.partnership .listbox ul li img { width:100%; }
}
@media screen and (max-width:1280px){
	.partnership .listbox ul li { width:260px; }
}
@media screen and (max-width:1024px){
	.partnership .listbox ul li { width:240px; }
}
@media screen and (max-width:640px){
	.partnership { height:auto; }
	.partnership .bg1 { height:280px; }
	.partnership .bg2 { height:100px; }
	.partnership .title-box { top:120px; }
	.partnership .btn-link { bottom:40px; }
	.partnership .listbox ul li { width:180px; height:400px; background:#fff; display:flex; align-items:center; justify-content:center; }
}

/* animation */
.partnership .title-box h3 { overflow:hidden; }
.partnership .title-box h3 span { display:block; opacity:0; }
.aniBox.on .partnership .title-box h3 span { animation:ani_3 0.8s 0.1s; animation-fill-mode:both; }
.aniBox.on .partnership .listbox ul { animation:txt_marquee 35s 0.5s infinite linear; }


/* ContactUs */
.contactus { display:flex; height:100vh; overflow:hidden }
.contactus .box { position:relative; width:50%; height:100%; overflow:hidden; }
.contactus .box .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.4s; }
.contactus .l-box .bg { background-image:url(/img/main/contactus_bg1.jpg); }
.contactus .r-box .bg { background-image:url(/img/main/contactus_bg2.jpg); }
.contactus .box .info { position:relative; z-index:2; width:100%; height:100%; padding:0 100px 145px; display:flex; flex-direction:column; justify-content:flex-end; }
.contactus .box .info:before { content:""; display:block; opacity:0; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:rgba(0, 0, 0, 0.50); border-radius:4px; transition:all 0.4s; }
.contactus .box .info dl { position:relative; z-index:2; transition:all 0.4s; }
.contactus .box .info dt { color:#fff; font-size:var(--font100); font-weight:500; line-height:1.3; letter-spacing:-0.07em; }
.contactus .box .info dd { margin-top:20px; color:rgba(255, 255, 255, 0.80); font-size:var(--font24); font-weight:500; line-height:1.3; letter-spacing:-0.035em; }
.contactus .box .info .btn-link { margin-top:55px; position:relative; z-index:2; }
.contactus .box:hover .bg { transform:scale(1.08); }
.contactus .box:hover .info:before { opacity:1; width:calc(100% - 40px); height:calc(100% - 40px); }
.contactus .box:hover .info dl { transform:translateY(-20px); }
.contactus .box:hover .info .btn-link a { border-color:var(--mainColor); background:var(--mainColor); color:#fff; }
.contactus .box:hover .info .btn-link img { filter:brightness(0) invert(1); }
@media screen and (max-width:1440px){
	.contactus .box .info { padding:0 90px 120px; }
}
@media screen and (max-width:1280px){
	.contactus .box .info { padding:0 80px 100px; }
}
@media screen and (max-width:1024px){
	.contactus .box .info { padding:0 60px 80px; }
	.contactus .box .info dd { margin-top:10px; }
	.contactus .box .info .btn-link { margin-top:30px; }
}
@media screen and (max-width:760px){
	.contactus { flex-wrap:wrap; height:auto}
	.contactus .box { width:100%; height:300px; }
	.contactus .box .info { padding:0 40px 40px; }
	.contactus .box .info dd { margin-top:5px; }
	.contactus .box .info .btn-link { margin-top:15px; }
	.contactus .box:hover .info:before { width:calc(100% - 30px); height:calc(100% - 30px); }
}

/* animation */
.contactus .box .info dl { overflow:hidden; }
.contactus .box .info dt,
.contactus .box .info dd,
.contactus .box .info .btn-link { opacity:0; }
.aniBox.on .contactus .box .info dt { animation:ani_1 0.8s 0.1s; animation-fill-mode:both; }
.aniBox.on .contactus .box .info dd { animation:ani_1 0.8s 0.4s; animation-fill-mode:both; }
.aniBox.on .contactus .box .info .btn-link { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }
.aniBox.on .contactus .box.r-box .info dt { animation:ani_1 0.8s 0.5s; animation-fill-mode:both; }
.aniBox.on .contactus .box.r-box .info dd { animation:ani_1 0.8s 0.8s; animation-fill-mode:both; }
.aniBox.on .contactus .box.r-box .info .btn-link { animation:ani_3 0.8s 1.1s; animation-fill-mode:both; }