@charset "utf-8";

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

/* intro */
.body_intro { overflow:hidden; touch-action:none; }
.main_intro { position:fixed; top:0; left:0; z-index:-10; opacity:0; visibility:hidden; width:100%; height:100%;  }
.introBox { z-index:999999; visibility:visible; opacity:1; }
.introBox .loading { position:absolute; left:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; }
.introBox .loading .logo { transform:scale(1.25); animation:logo_size 1.2s 0.1s; animation-fill-mode:both;  }
.introBox .loading .logo img { animation:logo_mov 2.7s 1.3s infinite; }
.introBox,
.introBox .loading,
.main_intro { animation:ani_6 1.4s 2.5s; animation-fill-mode:both; }

@media screen and (max-width:1024px) {
	.introBox .loading .logo img { width:140px; }
}
@media screen and (max-width:640px) {
	.introBox .loading .logo img { width:100px; }
}

@keyframes logo_size{
	0% { transform:scale(1.25); }
	100% { transform:scale(1.0); }
}
@keyframes logo_mov{
	0% { transform:translateY(0); }
	30% { transform:translateY(-20px); }
	70% { transform:translateY(20px); }
	100% { transform:translateY(0); }
}

/* .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){
}

.cursor { opacity:0; position:absolute; top:-100px; left:-100px; width:400px; height:400px; border-radius:50%; display:flex; align-items:center; justify-content:center; background-color:transparent; user-select:none; pointer-events:none; box-sizing:border-box; overflow:hidden; transition:all 0.4s ease-out; }
.active .cursor { opacity:1; }
.main .aniBox { position:relative; z-index:2; }

#menu { opacity:1; transition:all 0.3s; position:fixed; right:50px !important; top:50% !important; transform:translateY(-50%); margin-top:0 !important; z-index:10 }
#menu li a { transition:all 0.3s; position:relative; width:8px; height:8px; display:block; text-indent:-9999em; overflow:hidden; background:rgba(0,0,0,0.3); border-radius:2px; }
#wrap.on #menu li a { background:rgba(255,255,255,0.3); }
#menu li:not(:last-child) { margin-bottom:20px; }
#menu li.active a,
#wrap.on #menu li.active a { background:var(--main2Color); }
.fp-viewing-Last #menu { opacity:0; }
@media screen and (max-width:1024px){
	#menu { right:7px !important; }
	#menu li:not(:last-child) { margin-bottom:10px; }
	#menu li a { width:6px; height:6px; }
}

#visual { position:relative; width:100%; height:100vh; overflow:hidden; }
#visual .bg { position:absolute; top:0; left:0; z-index:5; width:100%; height:100%; overflow:hidden; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); }
#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.swiper-slide-active { opacity:1; }
#visual .txtbox { color:#fff; position:absolute; top:50%; left:0; transform:translateY(-50%); text-align:center; width:100%; padding:0 20px; z-index:15; }
#visual .txtbox .txt-1,
#visual .txtbox .txt-2 { position:relative; overflow:hidden; }
#visual .txtbox .txt-1 > span { opacity:0; font-size:2.2rem; font-weight:500; color:#fff; line-height:1.3; letter-spacing:-0.05em; display:block }
#visual .txtbox .txt-2 { margin-top:30px; }
#visual .txtbox .txt-2 > span { opacity:0; color:#fff; line-height:1.3; letter-spacing:-0.03em; font-weight:500; display:flex; justify-content:center; }
#visual .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
#visual .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_3 0.8s 1.2s; animation-fill-mode:both; }
#visual .swiper-pagination { display:none }

.swiper-button-next, 
.swiper-button-prev,
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }
@media screen and (max-width:1440px){
	#visual .txtbox .txt-1 > span { font-size:2.1rem; }
	#visual .txtbox .txt-2 { margin-top:25px; }
}
@media screen and (max-width:1024px){
	#visual .txtbox .txt-1 > span { font-size:2.0rem; }
	#visual .txtbox .txt-2 { margin-top:20px; }
}
@media screen and (max-width:640px){
	#visual .txtbox .txt-1 > span { font-size:1.8rem; }
	#visual .txtbox .txt-2 { margin-top:10px; }
}

.scrolldown { position:absolute; right:-28px; bottom:40px; z-index:5; opacity:0; animation:ani_4 0.8s 0.2s forwards, scrollDown 2s 0.1s infinite; }
.scrolldown .txt { color:#fff; font-size:1.5rem; font-weight:600; line-height:1.3; transform:rotate(-90deg); }
.main3 .scrolldown .txt,
.main7 .scrolldown .txt { color:#000; }
#visual .scrolldown { left:50%; right:unset; transform:translateX(-50%); z-index:3; text-align:center; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(255,255,255,1); border-radius:8px; }
@media screen and (max-width:1024px){
	.scrolldown { display:none }
	#visual .scrolldown { display:flex; bottom:20px; width:35px; height:35px; border-radius:5px; }
}
@keyframes scrollDown {
    0% { transform:translate(-50%, -10px); }
    50% { transform:translate(-50%, 10px); }
    100% { transform:translate(-50%, -10px); }
}

.title-box {  }
.title-box h3 { overflow:hidden }
.title-box h3 span { display:block; color:#fff; font-weight:500; line-height:1.3; }

/* animation */
.title-box h3 span { }
.aniBox.on .title-box h3 span { }

.aniBox { padding-top:50px; }
.main5 .aniBox,
.main5 .aniBox { padding-top:0; }
.main6 .aniBox { padding-top:100px; }
.main8 .aniBox { padding-top:150px; }
@media screen and (max-width:1024px){
	.main5 .aniBox,
	.main6 .aniBox,
	.main8 .aniBox,
	.aniBox { padding:40px 0; }
}

/* Business */
.business-box { display:flex; gap:20px; }
.business-box .box { width:calc((100% - 60px) / 4); }
.business-box .box a { display:flex; gap:20px; flex-direction:column; }
.business-box .box:nth-child(2n) a { flex-direction:column-reverse; }
.business-box .box .imgbox { overflow:hidden; border-radius:10px; }
.business-box .box .imgbox figure { position:relative; } 
.business-box .box .imgbox figure:before{ content:""; display:block; padding-bottom:150%; }
.business-box .box .imgbox figure img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; transition:all 0.6s; }
.business-box .box a:hover .imgbox figure img { transform:translate(-50%, -50%) scale(1.1);}
.business-box .box .txtbox { display:flex; align-items:center; gap:0 10px; justify-content:space-between; color:#fff; font-weight:500; line-height:1.3; }
.business-box .box .txtbox .btnArr { flex-shrink:0; }
@media screen and (max-width:1024px){
	.business-box { flex-wrap:wrap; gap:30px 10px; }
	.business-box .box { width:calc((100% - 10px) / 2); }
	.business-box .box:nth-child(2n) a { flex-direction:column; }
	.business-box .box a { gap:10px; }
	.business-box .box .imgbox { border-radius:8px; }
	.business-box .box .imgbox figure:before{ padding-bottom:120%; }
	.business-box .box .txtbox { gap:0 5px; }
}

/* animation */
.business-box .box { opacity:0; }
.aniBox.on .business-box .box { animation:ani_4 0.8s 0.05s; animation-fill-mode:both; }
.aniBox.on .business-box .box:nth-child(2n+1) { animation:ani_3 0.8s 0.05s; animation-fill-mode:both; }


/* technology */
.main3,
.main3 .innerP100 { width:100%; }
.main3 .bg { position:absolute; left:0; top:0; width:100vw; height:100vh; }
.main3 .bg .sbg { opacity:0; transition:all 0.8s; position:absolute; left:0; top:0; width:100vw; height:100vh; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.main3 .bg .bg1 { background-image:url(/img/main/technology_bg1.jpg); } 
.main3 .bg .bg2 { background-image:url(/img/main/technology_bg2.jpg); } 
.main3 .bg .bg3 { background-image:url(/img/main/technology_bg3.jpg); } 
.main3 .bg .bg4 { background-image:url(/img/main/technology_bg4.jpg); } 
.main3 .bg.over1 .bg1,
.main3 .bg.over2 .bg2,
.main3 .bg.over3 .bg3,
.main3 .bg.over4 .bg4 { opacity:1; }
.technology-box { position:relative; z-index:3; width:100%; }
.technology-box .before { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.technology-box .before .txt { color:#ddd; font-weight:600; line-height:1.3; text-transform:uppercase; }
.technology-box .after { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; opacity:0; }  
.technology-box .after .listbox { transition:all 0.6s; display:flex; align-items:center; justify-content:space-around; }
.technology-box .after .listbox .circle { transition:all 1.0s; position:relative; }
.technology-box .after .listbox .circle:before{ content:""; display:block; padding-bottom:100%; }
.technology-box .after .listbox .circle .circle-box { transition:all 1.0s; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; }
.technology-box .after .listbox .circle .c-box { transition:all 1.0s; width:100%; height:100%; border-radius:1000px; opacity:0; display:flex; align-items:center; justify-content:space-between; padding:40px; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.technology-box .after .listbox .circle .c-box h4 { opacity:0; color:#fff; font-weight:500; line-height:1.3; }
.technology-box .after .listbox .circle .c-box .txt { opacity:0; transition:all 0.5s; position:absolute; right:150px; top:50%; transform:translate(0, -50%); color:#fff; font-size:2.2rem; font-weight:400; line-height:1.54; text-align:right; }
.technology-box .after .listbox .circle.circle1 .c-box { background-image:url(/img/main/technology_circle1_s.png); } 
.technology-box .after .listbox .circle.circle2 .c-box { background-image:url(/img/main/technology_circle2_s.png); }
.technology-box .after .listbox .circle.circle3 .c-box { background-image:url(/img/main/technology_circle3_s.png); }
.technology-box .after .listbox .circle.circle4 .c-box { background-image:url(/img/main/technology_circle4_s.png); }
.technology-box .after .listbox.active .circle.circle1 .c-box { background-image:url(/img/main/technology_circle1.png); } 
.technology-box .after .listbox.active .circle.circle2 .c-box { background-image:url(/img/main/technology_circle2.png); }
.technology-box .after .listbox.active .circle.circle3 .c-box { background-image:url(/img/main/technology_circle3.png); }
.technology-box .after .listbox.active .circle.circle4 .c-box { background-image:url(/img/main/technology_circle4.png); }

.technology-box .after .listbox .circle { width:200px; margin:0; }
.technology-box .after .listbox .circle.circle1 { transform:translate(0, 100px);}
.technology-box .after .listbox .circle.circle2 { transform:translate(-100px, -100px); }
.technology-box .after .listbox .circle.circle3 { transform:translate(10px, -100px); }
.technology-box .after .listbox .circle.circle4 { transform:translate(-90px, 100px); }
.technology-box .after .listbox.active { padding:0 75px; }
.technology-box .after .listbox.active .circle { width:540px; margin:0 -75px; }
.technology-box .after .listbox.active .circle.circle1,
.technology-box .after .listbox.active .circle.circle2,
.technology-box .after .listbox.active .circle.circle3,
.technology-box .after .listbox.active .circle.circle4 { transform:translate(0, 0); }
.technology-box .after .listbox.active .circle h4 { animation:ani_5 1.0s 0.3s; animation-fill-mode:both; }

.technology-box .after .listbox.active .circle.off { width:27%; }
.technology-box .after .listbox.active .circle.on,
.technology-box .after .listbox.active .circle.over { width:44.5%; padding:60px; }
.technology-box .after .listbox.active .circle.on .c-box .txt { opacity:1; transition:all 0.8s 0.3s; }
@media screen and (max-width:1024px){
	.main3 .bg,
	.main3 .bg .sbg { width:100%; height:100%; }
	.technology-box .before,
	.technology-box .after { position:relative; top:unset; transform:translate(-50%, 0); }
	.technology-box .before { padding:0; }
	.technology-box .after { padding:40px 0 0; }
	.technology-box .after .listbox { flex-wrap:wrap; gap:20px; }
	.technology-box .after .listbox .circle.circle1,
	.technology-box .after .listbox .circle.circle2,
	.technology-box .after .listbox .circle.circle3,
	.technology-box .after .listbox .circle.circle4 { transform:translate(0, 0); }
	.technology-box .after .listbox.active { padding:0; }
	.technology-box .after .listbox.active .circle.off,
	.technology-box .after .listbox.active .circle.on,
	.technology-box .after .listbox.active .circle.over { width:auto; padding:15px; }
	.technology-box .after .listbox .circle { width:calc((100% - 20px) / 2) !important; margin:0 !important; padding:20px !important; }
	.technology-box .after .listbox.active .circle .c-box { flex-direction:column; align-items:center; justify-content:center; width:100%; }
	.technology-box .after .listbox.active .circle .c-box .txt { margin-top:10px; font-size:2.0rem; position:relative; top:unset; right:unset; transform:translate(0); text-align:center; animation:ani_5 1.0s 0.3s; animation-fill-mode:both; }
}
@media screen and (max-width:640px){
	.technology-box .after .listbox { gap:10px; }
	.technology-box .after .listbox .circle { width:calc((100% - 10px) / 2) !important; }
	.technology-box .after .listbox.active .circle .c-box .txt { font-size:1.7rem; }
	.technology-box .after .listbox.active .circle .c-box .txt br { display:none }
	.technology-box .after .listbox.active .circle .c-box .txt { width:150% }
}

/* animation */
.technology-box .before .txt { opacity:0; }
.aniBox.on .technology-box .before .txt-1 { animation:ani_4 0.8s 0.05s; animation-fill-mode:both; }
.aniBox.on .technology-box .before .txt-2 { animation:ani_3 1.2s 0.2s; animation-fill-mode:both; }
.aniBox.on .technology-box .before { animation:ani_6 1.0s 2.4s; animation-fill-mode:both; }
.aniBox.on .technology-box .after { animation:ani_5 0.5s 0.5s; animation-fill-mode:both; }
.aniBox.on .technology-box .after .listbox .circle .c-box { animation:bgs4 1.2s 1.0s; animation-fill-mode:both; }
@media screen and (max-width:1024px){
	.aniBox.on .technology-box .before { animation:none; }
}

/* history */
.history-video { position:fixed; width:100vw; height:100vh; left:50%; top:50%; transform:translate(-50%, -50%); object-fit:cover; }
.main4 { position:relative; }
.main4 .mov { display:none }
.history-box { position:relative; padding:18% 0; display:flex; flex-direction:column; gap:250px 0; }
.history-box .logo { position:absolute; top:0; left:0; transition:all 1.0s ease; margin:30px 0 0 40px; } 
.history-box .box { display:inline-flex; }
.history-box .box dt { color:#fff; font-weight:500; line-height:1.3; }
.history-box .box .txtbox { margin-top:25px; position:relative; display:inline-flex; gap:0 30px; align-items:center; }
.history-box .box .txtbox .txt { color:#fff; font-weight:500; line-height:1.3; }
.history-box .box .txtbox .num-box { display:flex; gap:0 30px; align-items:center; overflow:hidden;}
.history-box .box .txtbox .num-box .counter { color:#fff; font-weight:500; line-height:1.01; display:flex; align-items:center; text-align:center; }
.history-box .box .txtbox .num-box .counter div span { font-weight:500; line-height:1.01; }
.history-box .box .txtbox .counter { display:inline-block; overflow:hidden; position:relative; }
.history-box .box .txtbox .counter em { color:transparent; opacity:0; }
.history-box .box .txtbox .counter .comma { color:#fff; }
.history-box .box .counter .num { display:flex; position:absolute; top:0; left:0; }
.history-box .box .counter .num div { display:flex; flex-direction:column-reverse; position:relative; }
.history-box .box .counter .num div:nth-of-type(even){ transform:translateY(-100%); }
.history-box .logo img { width:95px; }
@media screen and (max-width:1440px){
	.history-box { padding:15% 0; gap:200px 0; }
}
@media screen and (max-width:1280px){
	.history-box { padding:13% 0; gap:150px 0; }
	.history-box .logo { margin:30px 0 0 20px; } 
	.history-box .logo img { width:80px; }
	.history-box .box .txtbox { margin-top:20px }
	.history-box .box .txtbox .num-box { gap:0 20px; }
}
@media screen and (max-width:1024px){
	.history-box { padding:100px 0; gap:100px 0; }
	.history-box .logo { display:none } 
	.history-box .box .txtbox { margin-top:10px; gap:0 20px; }
	.history-box .box .txtbox .num-box { gap:0 20px; }
}
@media screen and (max-width:1024px){
	.history-video { display:none !important }
	.main4 { overflow:hidden; }
	.main4 .mov { display:block }
	.main4 .mov .history-video { display:block !important; position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%, -50%); object-fit:cover; }
	.history-box { padding:60px 0; gap:60px 0; }
	.history-box .box .txtbox { gap:0 10px; }
}

/* animation */
.history-box .logo,
.history-box .box { opacity:0; }
.aniBox.on .logo { animation:ani_1 1.3s 0.6s; animation-fill-mode:both; }
.aniBox.on .history-box .box { animation:ani_2 0.8s 0.05s; animation-fill-mode:both; }
.history-box .box.active .counter .num div:nth-of-type(odd) { animation:ani_counter 1.5s 0.1s ease-in reverse both; }
.history-box .box.active .counter .num div:nth-of-type(even) { animation:ani_counter 1.5s 0.1s ease-out both; }
@media screen and (max-width:1024px){
	.history-box .box.active .counter .num div:nth-of-type(odd),
	.history-box .box.active .counter .num div:nth-of-type(even) { animation:none; }
	.aniBox.on .box .counter .num div:nth-of-type(odd) { animation:ani_counter 1.5s 0.6s ease-in reverse both; }
	.aniBox.on .box .counter .num div:nth-of-type(even) { animation:ani_counter 1.5s 0.6s ease-out both; }
}

/* Global */
.global-box { position:relative; width:100%; }
.global-box .txtCont { position:absolute; top:32%; left:60%; z-index:2; }
.global-box .txtCont .txt { margin:30px 0 50px; color:#fff; font-size:2.2rem; font-weight:300; line-height:1.63; letter-spacing:-0.04em; }
.global-box .map { position:relative; width:100%; height:100vh; overflow:hidden; }
.global-box .map svg { position:absolute; width:100vw; height:100vh; left:50%; top:50%; transform:translate(-50%, -50%); }
.global-box .map .txt-1 { color:#fff; fill:#fff; font-size:1.8rem; font-weight:500; }
.global-box .map .txt-2 { color:#fff; fill:#fff; font-size:2.0rem; font-weight:600; }
.global-box .mapCont .p-box { cursor:pointer; pointer-events:all; }
.global-box .mapCont .line { opacity:0; }
.global-box .mapCont .line rect { width:0; transition:all 0.2s 0.1s; }
.global-box .mapCont .over .line { opacity:1; }
.global-box .mapCont .over .line rect { width:300px; }
.global-box .global-popup.over_2 { top:59%; left:150px; }
.global-box .partner-box { position:absolute; bottom:40px; left:0; }
.global-box .partner-box > div { display:flex; gap:30px; }
.global-box .partner-box ul { display:flex; gap:30px; }
.global-box .partner-box ul li { width:240px; height:80px; border-radius:10px; background:rgba(255, 255, 255, 0.10); backdrop-filter:blur(25px); display:flex; align-items:center; justify-content:center; }
.global-box .partner-box ul li img { max-width:100%; max-height:100%; padding:8px 10px; }
@media screen and (max-width:1650px){
	.global-box .global-popup.over_2 { left:50px; }
}
@media screen and (max-width:1440px){
	.global-box .global-popup.over_2 { top:50%; left:5px; }
}
@media screen and (max-width:1024px){
	.global-box .map { height:auto; }
	.global-box .map svg { height:100%; display:none; }
	.global-box .txtCont { position:relative; top:unset; left:0; padding:0 20px; }
	.global-box .txtCont .txt { margin:20px 0 30px; font-size:2.0rem; }
	.global-box .txtCont .txt br { display:none }
	.global-box .partner-box { position:relative; bottom:unset; }
	.global-box .partner-box > div,
	.global-box .partner-box ul { gap:20px; }
	.global-box .partner-box ul li { width:220px; height:70px; border-radius:8px; }
	/* .global-box .btnArr-txt { position:relative; left:50%; transform:translateX(-50%); } */
}
@media screen and (max-width:640px){
	.global-box .partner-box > div,
	.global-box .partner-box ul { gap:10px; }
	.global-box .partner-box ul li { width:200px; height:60px; }
}


/* animation */
.global-box .txtCont { opacity:0; }
.aniBox.on .global-box .txtCont { animation:ani_3 1.5s 0.1s; animation-fill-mode:both; }
.global-box .map_p { opacity:0; }
.aniBox.on .global-box .map_p { animation:ani_3_2 1.2s 1.3s; animation-fill-mode:both; }
.global-box .map .p-box { opacity:0; }
.aniBox.on .global-box .map .p-box.p-box1 { animation:bgs1-2 0.7s 0.6s; animation-fill-mode:both; }
.aniBox.on .global-box .map .p-box.p-box2 { animation:bgs1-2 0.7s 0.9s; animation-fill-mode:both; }
.global-box .partner-box { opacity:0; }
.aniBox.on .global-box .partner-box { animation:ani_3 0.8s 1.6s; animation-fill-mode:both; }
.aniBox.on .global-box .partner-box ul { animation:txt_marquee 20s 2.4s infinite linear; }
@media screen and (max-width:1024px){
	.aniBox.on .global-box .partner-box { animation:ani_3 0.8s 0.1s; animation-fill-mode:both; }
	.aniBox.on .global-box .partner-box ul { animation:txt_marquee 20s 0.3s infinite linear; }
}


/* ESG */
.esg-box { display:flex; align-items:center; gap:20px; }
.esg-box .box { position:relative; overflow:hidden; width:calc((100% - 40px) / 3); transition:all 0.7s; height:100%; }
.esg-box .box a { position:relative; width:100%; height:740px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; transition:all 0.7s; }
.esg-box .box.off { width:calc((100% - 55% - 20px) / 2); }
.esg-box .box.off a { height:560px; }
.esg-box .box.active { width:calc(55% - 10px); }
.esg-box .box h4 { position:absolute; left:40px; top:40px; z-index:3; color:rgba(255,255,255,0.6); font-size:4.6rem; font-weight:500; line-height:1.3; transition:all 0.6s; }
.esg-box .box.active h4 { left:50px; font-size:6.0rem; color:#fff; }
.esg-box .box .overtxt { opacity:0; transition:all 0.6s; position:absolute; left:0; bottom:-50px; width:100%; padding:0 0 50px 60px; color:#fff; font-size:2.2rem; font-weight:300; line-height:1.66; letter-spacing:-0.04em; }
.esg-box .box.active .overtxt { opacity:1; bottom:0; transition:all 0.5s 0.5s; }
.esg-box .box .imgbox { position:relative; overflow:hidden; width:100%; height:100%; }
.esg-box .box .imgbox img { position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%, -50%); object-fit:cover; transition:all 0.6s; }
.esg-box .box .btnArr { position:absolute; right:20px; bottom:20px; }
@media screen and (max-width:1640px){
	.esg-box .box a { height:640px; }
	.esg-box .box.off a { height:460px; }
}
@media screen and (max-width:1440px){
	.esg-box .box a { height:540px; }
	.esg-box .box.off a { height:360px; }
	.esg-box .box h4 { left:30px; top:30px; font-size:4.0rem; }
	.esg-box .box.active h4 { left:40px; font-size:5.2rem; }
	.esg-box .box .overtxt { bottom:-40px; padding:0 0 40px 40px; font-size:2.1rem; }
}
@media screen and (max-width:1280px){
	.esg-box .box a { height:500px; }
	.esg-box .box.off a { height:320px; }
	.esg-box .box h4 { left:20px; top:20px; font-size:3.6rem; }
	.esg-box .box.active h4 { left:30px; font-size:4.8rem; }
	.esg-box .box .overtxt { bottom:-30px; padding:0 0 30px 30px; font-size:2.0rem; }
}
@media screen and (max-width:1024px){
	.esg-box { gap:10px; }
	.esg-box .box,
	.esg-box .box.off,
	.esg-box .box.active { width:calc((100% - 20px) / 3); }
	.esg-box .box a,
	.esg-box .box.off a { height:400px; border-radius:8px; }
	.esg-box .box h4 { left:20px; top:20px; font-size:3.2rem; color:#fff }
	.esg-box .box.active h4 { left:20px; font-size:3.2rem; }
	.esg-box .box .overtxt { opacity:1; }
	.esg-box .box .overtxt { bottom:0; padding:0 50px 20px 20px; font-size:1.8rem; }
	.esg-box .box .overtxt br { display:none }
}
@media screen and (max-width:760px){
	.esg-box { gap:5px; flex-wrap:wrap; }
	.esg-box .box,
	.esg-box .box.off,
	.esg-box .box.active { width:100%; }
	.esg-box .box a,
	.esg-box .box.off a { height:200px; }
	.esg-box .box h4,
	.esg-box .box.active h4 { left:20px; top:20px; font-size:2.6rem; }
	.esg-box .box .overtxt { bottom:0; padding:0 50px 20px 20px; }
}

/* Community */
.community-box { display:flex; gap:30px; }
.community-box .txtbox .type { color:#fff; font-size:1.4rem; font-weight:400; line-height:1.3; height:25px; display:inline-flex; padding:0 10px; align-items:center; justify-content:center; border-radius:5px; border:1px solid #fff; }
.community-box .big-box { position:relative; width:calc(50.8% - 15px); border-radius:10px; overflow:hidden; }
.community-box .big-box .imgbox { position:relative; overflow:hidden; border-radius:10px; }
.community-box .big-box .imgbox:before{ content:""; display:block; padding-bottom:86%; }
.community-box .big-box .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:all 0.6s; }
.community-box .big-box a:hover .imgbox img { transform:scale(1.1);}
.community-box .big-box .txtbox { position:absolute; left:0; bottom:0; width:100%; padding:0 80px 66px 60px; }
.community-box .big-box .txtbox h4 { margin-top:20px; color:#fff; font-weight:500; line-height:1.3; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.community-box .big-box .txtbox .txt { margin-top:10px; font-family:var(--subFont); color:rgba(255,255,255,0.6); font-size:1.8rem; font-weight:300; line-height:1.66; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.community-box .big-box .txtbox .btnArr { position:absolute; right:20px; bottom:20px; }
.community-box .small-box { width:calc(100% - 50.8% - 15px); display:flex; flex-direction:column; justify-content:space-between; }
.community-box .swiper-container { position:relative; width:100%; overflow:hidden; padding-bottom:42px; }
.community-box .swiper-container .swiper-slide { position:relative; width:100%; overflow:hidden; display:flex; }
.community-box .swiper-container .swiper-slide a { position:relative; width:100%; display:block; }
.community-box .swiper-container .swiper-slide .imgbox { position:relative; overflow:hidden; width:100%; border-radius:10px; }
.community-box .swiper-container .swiper-slide .imgbox:before{ content:""; display:block; padding-bottom:109%; }
.community-box .swiper-container .swiper-slide .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:all 0.6s; }
.community-box .swiper-container .swiper-slide a:hover .imgbox img { transform:scale(1.1); }
.community-box .swiper-container .swiper-slide .txtbox { position:absolute; left:0; bottom:0; width:100%; padding:0 70px 40px 20px; }
.community-box .swiper-container .swiper-slide .txtbox .txt { margin-top:15px; font-family:var(--subFont); color:rgba(255,255,255,0.6); font-size:2.2rem; font-weight:300; line-height:1.66; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.community-box .swiper-container .swiper-slide .txtbox .btnArr { position:absolute; right:20px; bottom:20px; }
.community-box .swiper-btn { display:block; position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:22px; height:22px; background:url(/img/main/swiper-btn.png) center center no-repeat; }
.community-box .swiper-button-prev { left:13px; transform:rotate(180deg); } 
.community-box .swiper-button-next { right:13px; } 
.community-box .swiper-button-disabled { display:none; }
.community-box .swiper-pagination { right:0; left:unset; bottom:0; display:flex; width:100px; height:2px; background:rgba(0,0,0,0.1); margin:0; }
.community-box .swiper-pagination span { height:2px; width:100%; border-radius:0; outline:none; margin:0 !important; transition:all 0.4s; }
.community-box .swiper-pagination .swiper-pagination-bullet-active { background:#000; }
.community-box .txtCont { display:flex; flex-direction:column; align-items:flex-end; }
.community-box .txtCont .txt { color:#222; font-size:2.2rem; font-weight:300; line-height:1.63; text-align:right; }
.community-box .txtCont .btnArr-txt { margin-top:50px; }
@media screen and (max-width:1440px){
	.community-box { gap:20px; }
	.community-box .big-box { width:calc(50.8% - 10px); }
	.community-box .big-box .txtbox { padding:0 70px 40px 40px; }
	.community-box .small-box { width:calc(100% - 50.8% - 10px); }
	.community-box .swiper-container { padding-bottom:30px; }
	.community-box .swiper-container .swiper-slide .txtbox { padding:0 70px 40px 20px; }
	.community-box .swiper-container .swiper-slide .txtbox .txt { margin-top:10px; font-size:2.1rem; }
	.community-box .txtCont .txt { font-size:2.1rem; }
	.community-box .txtCont .btnArr-txt { margin-top:40px; }
}
@media screen and (max-width:1280px){
	.community-box { gap:20px; }
	.community-box .big-box { width:calc(50.8% - 10px); }
	.community-box .big-box .imgbox:before{ padding-bottom:100%; }
	.community-box .big-box .txtbox { padding:0 70px 40px 20px; }
	.community-box .small-box { width:calc(100% - 50.8% - 10px); }
	.community-box .swiper-container { padding-bottom:30px; }
	.community-box .swiper-container .swiper-slide .txtbox { padding:0 70px 40px 20px; }
	.community-box .swiper-container .swiper-slide .txtbox .txt { margin-top:10px; font-size:1.9rem; }
	.community-box .txtCont .txt { font-size:1.9rem; }
	.community-box .txtCont .btnArr-txt { margin-top:30px; }
}
@media screen and (max-width:1024px){
	.community-box { gap:10px; }
	.community-box .big-box { width:calc(45% - 5px); }
	.community-box .big-box .imgbox { border-radius:8px; }
	.community-box .big-box .imgbox:before{ padding-bottom:130%; }
	.community-box .big-box .txtbox { padding:0 70px 30px 20px; }
	.community-box .small-box { width:calc(100% - 45% - 5px); }
	.community-box .swiper-container { padding-bottom:30px; }
	.community-box .swiper-container .swiper-slide .imgbox { border-radius:8px; }
	.community-box .swiper-container .swiper-slide .txtbox { padding:0 70px 30px 20px; }
	.community-box .swiper-container .swiper-slide .txtbox .txt { margin-top:10px; font-size:1.8rem; }
	.community-box .txtCont .txt { font-size:1.8rem; }
	.community-box .txtCont .btnArr-txt { margin-top:20px; }
}
@media screen and (max-width:860px){
	.community-box { flex-wrap:wrap; }
	.community-box .big-box,
	.community-box .small-box { width:100%; }
	.community-box .big-box .imgbox:before{ padding-bottom:76%; }
	.community-box .swiper-container .swiper-slide .imgbox:before{ padding-bottom:85%; }
	.community-box .txtCont { margin-top:20px; }
}
@media screen and (max-width:640px){
	.community-box .big-box .txtbox,
	.community-box .swiper-container .swiper-slide .txtbox { padding:0 40px 15px 10px; }
	.community-box .big-box .txtbox h4 { margin-top:10px; }
	.community-box .big-box .txtbox .btnArr,
	.community-box .swiper-container .swiper-slide .txtbox .btnArr { right:10px; bottom:10px; }
	.community-box .swiper-container .swiper-slide .imgbox:before{ padding-bottom:110%; }
}
@media screen and (max-width:500px){
	.community-box .swiper-container .swiper-slide .imgbox:before{ padding-bottom:120%; }
}


/* Board */
.board-box { display:flex; }
.board-box .title-box { position:relative; width:410px; }
.board-box .title-box h3 { position:absolute; left:0; top:0;}
.board-box .listbox { width:calc(100% - 410px); display:flex; gap:60px; align-items:center; }
.board-box .listbox .box { position:relative; width:calc(100% - 63% - 30px); transition:all 0.6s; }
.board-box .listbox .box.active { width:calc(63% - 30px); }
.board-box .listbox .box .imgbox { position:relative; overflow:hidden; border-radius:10px; }
.board-box .listbox .box .imgbox:before{ content:""; display:block; padding-bottom:78%; }
.board-box .listbox .box .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.board-box .listbox .box .txtbox { position:absolute; left:0; bottom:0; padding:20px; width:100%; display:flex; justify-content:space-between; align-items:flex-end; }
.board-box .listbox .box .txtbox h4 { color:rgba(255,255,255,0.6); padding:10px; font-size:3.4rem; font-weight:300; line-height:1.3; transition:all 0.6s; }
.board-box .listbox .box.active .txtbox h4 { color:#fff; padding:20px; font-size:6.0rem; font-weight:500; }
@media screen and (max-width:1560px){
	.board-box .title-box { width:340px; }
	.board-box .listbox { width:calc(100% - 340px); gap:50px; }
	.board-box .listbox .box { width:calc(100% - 63% - 25px); }
	.board-box .listbox .box.active { width:calc(63% - 25px); }
	.board-box .listbox .box .txtbox h4 { font-size:3.0rem; }
	.board-box .listbox .box.active .txtbox h4 { font-size:5.0rem; }
}
@media screen and (max-width:1440px){
	.board-box .listbox { gap:40px; }
	.board-box .listbox .box { width:calc(100% - 63% - 20px); }
	.board-box .listbox .box.active { width:calc(63% - 20px); }
	.board-box .listbox .box .txtbox h4 { font-size:2.6rem; }
	.board-box .listbox .box.active .txtbox h4 { font-size:4.8rem; }
}
@media screen and (max-width:1280px){
	.board-box .title-box { width:280px; }
	.board-box .listbox { width:calc(100% - 280px); gap:30px; }
	.board-box .listbox .box { width:calc(100% - 60% - 15px); }
	.board-box .listbox .box.active { width:calc(60% - 15px); }
	.board-box .listbox .box .txtbox { padding:15px; }
	.board-box .listbox .box .txtbox h4 { padding:5px; font-size:2.0rem; }
	.board-box .listbox .box.active .txtbox h4 { padding:15px; font-size:3.8rem; }
}
@media screen and (max-width:1024px){
	.board-box { flex-wrap:wrap; }
	.board-box .title-box { width:100%; height:100% !important; }
	.board-box .title-box h3 { position:relative; }
	.board-box .listbox { width:100%; gap:10px; margin-top:15px; }
	.board-box .listbox .box,
	.board-box .listbox .box.active { width:100%; }
	.board-box .listbox .box .imgbox { border-radius:8px; }
	.board-box .listbox .box .txtbox { padding:20px; align-items:center; }
	.board-box .listbox .box .txtbox h4,
	.board-box .listbox .box.active .txtbox h4 { padding:0; font-size:2.6rem; color:#fff; }
}
@media screen and (max-width:640px){
	.board-box .listbox .box .txtbox { padding:10px; }
	.board-box .listbox .box .txtbox h4,
	.board-box .listbox .box.active .txtbox h4 { font-size:2.0rem; }
}