@charset "utf-8";

#visual { position:relative; width:100%; height:100vh; background:#000; 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 .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; opacity: 0.4; background:rgba(0, 0, 0, 0.20); }
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide .ImgBg { width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover !important; }
#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 .imgbox { opacity:0; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; bottom:140px; left:0; width:100%; padding:0 100px; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1,
#visual .swiper-container .swiper-slide .txtbox .txt-2 { position:relative; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-family:var(--mainFont); opacity:0; font-size:90px; font-weight:600; color:#fff; line-height:1.2; display:block }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:0; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-family:var(--mainFont); opacity:0; font-size:90px; font-weight:200; color:#fff; line-height:1.2; display:block }
#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:16px; opacity:0; color:#fff; font-size:20px; font-weight:200; line-height:1.3; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_2 1.2s 0.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_2 1.2s 0.8s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-3 { animation:ani_5 1.5s 1.5s; animation-fill-mode:both; }
.visual .swiper-btn { display:none }
.visual .control_box { position:absolute; bottom:130px; right:120px; z-index:20; display:flex; align-items:center; }
.visual .control_box .box { position:relative; display:flex; align-items:center; gap:0 10px; }
.visual .control_box .box .txt { font-family:var(--mainFont); color:#fff; font-size:26px; font-weight:300; line-height:1.3; }
.visual .control_box .box .txt strong { font-size:50px; font-weight:600; }
.visual .control_box .box .txt span { transition:all 0.5s; }
.visual .swiper-pagination { display:none; }
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }
.main1 { position:relative; }
.main1 .txt_svg { position:absolute; left:50%; bottom:-90px; transform:translateX(-50%); z-index:8; width:180px; height:180px; border-radius:180px; background:linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(134, 134, 134, 0.16) 100%); backdrop-filter: blur(20px); }
.main1 .txt_svg .txt { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); animation:rotate3 20s infinite linear; }
.main1 .txt_svg .arr { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1; }

@media screen and (max-width:1760px){
	.visual .control_box { right:20px; }
}
@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 20px; }
	#visual .swiper-container .swiper-slide .txtbox,
	.visual .control_box { bottom:120px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:84px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:15px; }
	.visual .control_box .box .txt { font-size:24px; }
	.visual .control_box .box .txt strong { font-size:46px; }
	.main1 .txt_svg { bottom:-80px; width:160px; height:160px; }
	.main1 .txt_svg .txt img { width:140px; }
	.main1 .txt_svg .arr img { width:20px; }
}
@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox,
	.visual .control_box { bottom:100px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:68px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:12px; font-size:19px; }
	.visual .control_box .box .txt { font-size:22px; }
	.visual .control_box .box .txt strong { font-size:38px; }
	.main1 .txt_svg { bottom:-70px; width:140px; height:140px; }
	.main1 .txt_svg .txt img { width:120px; }
	.main1 .txt_svg .arr img { width:18px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox,
	.visual .control_box { bottom:80px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:50px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:10px; font-size:18px; }
	.visual .control_box .box .txt { font-size:20px; }
	.visual .control_box .box .txt strong { font-size:34px; }
	.main1 .txt_svg { bottom:-60px; width:120px; height:120px; }
	.main1 .txt_svg .txt img { width:105px; }
	.main1 .txt_svg .arr img { width:16px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox { bottom:100px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:38px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:10px; font-size:16px; }
	.visual .control_box { bottom:30px; }
	.visual .control_box .box .txt { font-size:18px; }
	.visual .control_box .box .txt strong { font-size:26px; }
	.main1 .txt_svg { bottom:-60px; width:120px; height:120px; }
	.main1 .txt_svg .txt img { width:105px; }
	.main1 .txt_svg .arr img { width:16px; }
}



.title-box h3 { overflow:hidden }
.title-box h3 span { font-family:var(--mainFont); display:block; color:#222; font-size:60px; font-weight:300; line-height:1.3; letter-spacing:-0.05em; }
.title-box h3 span strong { font-family:var(--mainFont); font-weight:600; }
.title-box .txt { margin-top:30px; color:#555; font-size:18px; font-weight:300; line-height:1.3; }
@media screen and (max-width:1440px){
	.title-box h3 span { font-size:50px; }
	.title-box .txt { margin-top:25px; font-size:17px; }
}
@media screen and (max-width:1280px){
	.title-box h3 span { font-size:40px; }
	.title-box .txt { margin-top:22px; }
}
@media screen and (max-width:1024px){
	.title-box h3 span { font-size:32px; }
	.title-box .txt { margin-top:15px; font-size:16px; }
}
@media screen and (max-width:640px){
	.title-box h3 span { font-size:26px; }
	.title-box .txt { margin-top:10px; font-size:15px; }
}

/* animation */
.title-box h3 span { opacity:0; }
.title-box.subOn h3 span { animation:ani_3 1.2s 0.1s; animation-fill-mode:both; }

.btn_more a { width:200px; height:70px; color:#333; font-size:18px; font-weight:300; line-height:1.3; text-transform:capitalize; display:flex; justify-content:center; gap:10px; align-items:center; border:1px solid #777; }
.btn_more a span { transition:all 0.4s; }
.btn_more a:hover span { transform:rotate(180deg); }
@media screen and (max-width:1024px){
	.btn_more a { width:180px; height:60px; font-size:16px; }
	.btn_more a span img { width:22px; }
}
@media screen and (max-width:640px){
	.btn_more a { width:160px; height:50px; font-size:15px; gap:8px; }
	.btn_more a span img { width:20px; }
}

.products-box { padding:230px 0 170px; overflow:hidden; }
.products-box .title-box { text-align:center; }
.products-box .listbox { margin-top:100px; }
.products-box .listbox > ul { display:flex; flex-wrap:wrap; gap:40px 20px; }
.products-box .listbox > ul > li { width:calc((100% - 40px) / 3); }
.products-box .listbox > ul > li .imgbox { position:relative; width:100%; overflow:hidden }
.products-box .listbox > ul > li .imgbox:before { content:""; display:block; padding-bottom:101.5%; }
.products-box .listbox > ul > li .imgbox:after { content:""; display:block;  position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.20); opacity:0; transition:all 0.5s;}
.products-box .listbox > ul > li .imgbox > img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:all 0.5s; }
.products-box .listbox > ul > li .imgbox span { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); opacity:0; z-index:2; transition:all 0.5s; }
.products-box .listbox > ul > li a:hover .imgbox:after { opacity:1; }
.products-box .listbox > ul > li a:hover .imgbox > img { transform:scale(1.05); }
.products-box .listbox > ul > li a:hover .imgbox span { transform:translate(-50%, -50%) rotate(-90deg); opacity:1; }
.products-box .listbox > ul > li .txtbox { margin-top:22px; color:#333; font-size:20px; font-weight:400; line-height:1.3; text-align:center; }
.products-box .listbox .btn_more { margin-top:150px; display:flex; justify-content:center; }
@media screen and (max-width:1440px){
	.products-box { padding:200px 0 150px; }
	.products-box .listbox { margin-top:80px; }
	.products-box .listbox > ul { gap:40px 20px; }
	.products-box .listbox > ul > li { width:calc((100% - 40px) / 3); }
	.products-box .listbox > ul > li .txtbox { margin-top:20px; font-size:19px; }
	.products-box .listbox .btn_more { margin-top:130px; }
}
@media screen and (max-width:1280px){
	.products-box { padding:150px 0 120px; }
	.products-box .listbox { margin-top:60px; }
	.products-box .listbox > ul { gap:30px 15px; }
	.products-box .listbox > ul > li { width:calc((100% - 30px) / 3); }
	.products-box .listbox > ul > li .txtbox { margin-top:17px; font-size:18px; }
	.products-box .listbox .btn_more { margin-top:110px; }
}
@media screen and (max-width:1024px){
	.products-box { padding:110px 0 90px; }
	.products-box .listbox { margin-top:40px; }
	.products-box .listbox > ul { gap:20px 10px; }
	.products-box .listbox > ul > li { width:calc((100% - 10px) / 2); }
	.products-box .listbox > ul > li .txtbox { margin-top:14px; font-size:17px; }
	.products-box .listbox .btn_more { margin-top:80px; }
}
@media screen and (max-width:640px){
	.products-box { padding:80px 0 60px; }
	.products-box .listbox { margin-top:30px; }
	.products-box .listbox > ul { gap:20px 5px; }
	.products-box .listbox > ul > li { width:calc((100% - 5px) / 2); }
	.products-box .listbox > ul > li .txtbox { margin-top:10px; font-size:16px; }
	.products-box .listbox .btn_more { margin-top:50px; }
}

.main-banner { height:350px; background-repeat:no-repeat; background-size:cover; overflow:hidden; }
.main-banner > div { height:100%; }
.main-banner .txtbox { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
.main-banner .txtbox .logo img { width:144px; }
.main-banner .txtbox .txt-1 { margin-top:20px; color:#fff; font-size:40px; font-weight:300; line-height:1.3; }
.main-banner .txtbox .txt-2 { margin-top:15px; font-family:var(--mainFont); color:#fff; font-size:24px; font-weight:300; line-height:1.3; }
@media screen and (max-width:1440px){
	.main-banner .txtbox .logo img { width:130px; }
	.main-banner .txtbox .txt-1 { margin-top:18px; font-size:36px; }
	.main-banner .txtbox .txt-2 { margin-top:12px; font-size:22px; }
}
@media screen and (max-width:1024px){
	.main-banner { height:280px; }
	.main-banner .txtbox .logo img { width:100px; }
	.main-banner .txtbox .txt-1 { margin-top:15px; font-size:28px; }
	.main-banner .txtbox .txt-2 { margin-top:10px; font-size:20px; }
}
@media screen and (max-width:640px){
	.main-banner { height:220px; }
	.main-banner .txtbox .logo img { width:80px; }
	.main-banner .txtbox .txt-1 { margin-top:12px; font-size:25px; }
	.main-banner .txtbox .txt-2 { margin-top:6px; font-size:18px; }
}

.about-box { padding:170px 0; overflow:hidden; }
.about-box .box { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 120px; }
.about-box .box .imgbox { width:calc(50.7% - 60px); position:relative; }
.about-box .box .imgbox:before { content:""; display:block; padding-bottom:137%; }
.about-box .box .imgbox > img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.about-box .box .txtbox { width:calc(100% - 50.7% - 60px); padding-bottom:60px; }
.about-box .box .txtbox h4 { font-family:var(--mainFont); color:var(--mainColor); font-size:18px; font-weight:600; line-height:1.3; text-transform:uppercase; }
.about-box .box .txtbox dt { margin-top:20px; color:#111; font-size:60px; font-weight:200; line-height:1.44; }
.about-box .box .txtbox dt span { display:block; }
.about-box .box .txtbox dd { margin-top:130px; color:#111; font-size:18px; font-weight:300; line-height:1.6; }
.about-box .box .txtbox .btn_more { margin-top:40px; }
.about-box .box .txt_svg { position:absolute; left:-115px; top:50%; transform:translateY(-50%); animation:rotate1 20s infinite linear; }
@media screen and (max-width:1440px){
	.about-box { padding:150px 0; }
	.about-box .box { gap:0 100px; }
	.about-box .box .imgbox { width:calc(50.7% - 50px); }
	.about-box .box .txtbox { width:calc(100% - 50.7% - 50px); padding-bottom:50px; }
	.about-box .box .txtbox h4 { font-size:18px; }
	.about-box .box .txtbox dt { margin-top:18px; font-size:50px; }
	.about-box .box .txtbox dd { margin-top:110px; font-size:18px; }
	.about-box .box .txtbox .btn_more { margin-top:35px; }
	.about-box .box .txt_svg { left:-80px; }
	.about-box .box .txt_svg img { width:200px; }
}
@media screen and (max-width:1280px){
	.about-box { padding:120px 0; }
	.about-box .box { gap:0 60px; }
	.about-box .box .imgbox { width:calc(50.7% - 30px); }
	.about-box .box .txtbox { width:calc(100% - 50.7% - 30px); padding-bottom:40px; }
	.about-box .box .txtbox h4 { font-size:17px; }
	.about-box .box .txtbox dt { margin-top:15px; font-size:40px; }
	.about-box .box .txtbox dd { margin-top:90px; font-size:17px; }
	.about-box .box .txtbox .btn_more { margin-top:30px; }
	.about-box .box .txt_svg { left:-60px; }
	.about-box .box .txt_svg img { width:160px; }
}
@media screen and (max-width:1024px){
	.about-box { padding:90px 0; }
	.about-box .box { gap:0 30px; }
	.about-box .box .imgbox { width:calc(50.7% - 15px); }
	.about-box .box .txtbox { width:calc(100% - 50.7% - 15px); padding-bottom:20px; }
	.about-box .box .txtbox h4 { font-size:16px; }
	.about-box .box .txtbox dt { margin-top:12px; font-size:32px; }
	.about-box .box .txtbox dd { margin-top:50px; font-size:16px; }
	.about-box .box .txtbox .btn_more { margin-top:20px; }
	.about-box .box .txt_svg { left:-50px; }
	.about-box .box .txt_svg img { width:140px; }
}
@media screen and (max-width:760px){
	.about-box { padding:90px 0; }
	.about-box .box { gap:20px; }
	.about-box .box .imgbox { width:100%; }
	.about-box .box .txtbox { width:100%; padding-bottom:0; }
	.about-box .box .txtbox dd { margin-top:30px; }
	.about-box .box .txtbox .btn_more { display:flex; justify-content:center; }
	.about-box .box .txt_svg { left:calc(100% - 70px); top:100%; }
}
@media screen and (max-width:640px){
	.about-box { padding:60px 0; }
	.about-box .box .txtbox h4 { font-size:15px; }
	.about-box .box .txtbox dt { margin-top:10px; font-size:26px; }
	.about-box .box .txtbox dd { font-size:15px; }
	.about-box .box .txt_svg { left:calc(100% - 60px); }
	.about-box .box .txt_svg img { width:120px; }
}


/* animation */
.about-box .box .imgbox { opacity:0; }
.about-box .box.subOn .imgbox { animation:ani_4 0.8s 0.1s; animation-fill-mode:both; }
.about-box .box .txtbox { opacity:0; }
.about-box .box.subOn .txtbox { animation:ani_2 1.2s 0.6s; animation-fill-mode:both; }
.about-box .box .txt_svg img { opacity:0; }
.about-box .box.subOn .txt_svg img { animation:ani_5 1.2s 0.8s; animation-fill-mode:both; }
@media screen and (max-width:760px){
	.about-box .box.subOn .txtbox { animation:ani_4 1.2s 0.6s; animation-fill-mode:both; }
}


.banner-visual { overflow:hidden; }
.banner-visual,
.banner-visual .swiper-container,
.banner-visual .swiper-wrapper, 
.banner-visual .swiper-slide { width:100%; position:relative; }
.banner-visual .swiper-slide .imgbox { width:100%; position:relative; overflow:hidden }
.banner-visual .swiper-slide .imgbox:before { content:""; display:block; padding-bottom:48.7%; }
.banner-visual .swiper-slide .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.banner-visual .control_box { position:absolute; left:50%; bottom:8%; transform:translateX(-50%); z-index:3; }
.banner-visual .control_box .swiper-pagination-b { display:flex; justify-content:center; align-items:center; gap:0 10px; }
.banner-visual .control_box .swiper-pagination-b span { margin:0; width:10px; height:10px; background:rgba(255,255,255,0.4); opacity:1; border-radius:10px; outline:none }
.banner-visual .control_box .swiper-pagination-b span.swiper-pagination-bullet-active { background:rgba(255,255,255,1); }
@media screen and (max-width:1024px){
	.banner-visual .swiper-slide .imgbox:before { padding-bottom:52%; }
}
@media screen and (max-width:640px){
	.banner-visual .swiper-slide .imgbox:before { padding-bottom:60%; }
}

.brand-box { padding:170px 0 0; }
.brand-box .title-box { text-align:center; }
.brand-box .btn_more { margin-top:70px; display:flex; justify-content:center; }
.brand-box .listbox { margin-top:100px; }
.brand-box .listbox ul { display:flex; flex-wrap:wrap; gap:22px; }
.brand-box .listbox ul li { width:calc((100% - 44px) / 3); }
.brand-box .listbox ul li .imgbox { width:100%; position:relative; overflow:hidden }
.brand-box .listbox ul li .imgbox:before { content:""; display:block; padding-bottom:128.5%; }
.brand-box .listbox ul li .imgbox:after { content:""; display:block;  position:absolute; left:0; top:0; width:100%; height:100%; background:#d9d9d9; opacity:0; transition:all 0.5s; z-index:2; }
.brand-box .listbox ul li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:all 0.6s; }
.brand-box .listbox ul li .imgbox .txt { opacity:0; margin-top:40px; transition:all 0.5s; position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; text-align:center; display:flex; justify-content:center; align-items:center; flex-direction:column; color:#fff; font-size:30px; font-weight:700; line-height:1.3; }
.brand-box .listbox ul li .imgbox .txt span { margin-top:10px; color:#fff; font-size:18px; font-weight:400; line-height:1.3; }
.brand-box .listbox ul li a:hover .imgbox .txt { opacity:1; margin-top:0; }
@media screen and (max-width:1440px){
	.brand-box { padding:150px 0 0; }
	.brand-box .btn_more { margin-top:60px; }
	.brand-box .listbox { margin-top:80px; }
	.brand-box .listbox ul { gap:18px; }
	.brand-box .listbox ul li { width:calc((100% - 36px) / 3); }
	.brand-box .listbox ul li .imgbox .txt { margin-top:30px; font-size:26px; }
	.brand-box .listbox ul li .imgbox .txt span { margin-top:8px; font-size:18px; }
}
@media screen and (max-width:1280px){
	.brand-box { padding:120px 0 0; }
}
@media screen and (max-width:1024px){
	.brand-box { padding:90px 0 0; }
	.brand-box .btn_more { margin-top:40px; }
	.brand-box .listbox { margin-top:60px; }
	.brand-box .listbox ul { gap:10px; }
	.brand-box .listbox ul li { width:calc((100% - 20px) / 3); }
	.brand-box .listbox ul li .imgbox .txt { opacity:1; margin-top:0; font-size:21px; }
	.brand-box .listbox ul li .imgbox .txt span { margin-top:5px; font-size:15px; }
}
@media screen and (max-width:760px){
	.brand-box { padding:90px 0 0; }
	.brand-box .listbox ul li { width:100%; }
	.brand-box .listbox ul li .imgbox:before { padding-bottom:50%; }
}
@media screen and (max-width:640px){
	.brand-box { padding:60px 0 0; }
	.brand-box .btn_more { margin-top:30px; }
	.brand-box .listbox { margin-top:40px; }
	.brand-box .listbox ul { gap:5px; }
	.brand-box .listbox ul li .imgbox:before { padding-bottom:55%; }
	.brand-box .listbox ul li .imgbox .txt { font-size:19px; }
}

/* animation */
.brand-box .listbox ul li { opacity:0; }
.brand-box .listbox.subOn ul li:nth-child(1) { animation:ani_4 1.5s 0.1s; animation-fill-mode:both; }
.brand-box .listbox.subOn ul li:nth-child(2) { animation:ani_4 1.5s 0.4s; animation-fill-mode:both; }
.brand-box .listbox.subOn ul li:nth-child(3) { animation:ani_4 1.5s 0.7s; animation-fill-mode:both; }