@charset "utf-8";

#visual { position:relative; width:100%; height:100vh; overflow:hidden; background:#000 }
#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: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 81.22%, #000 100%), linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #00163C 100%);}
#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 .imgbox { opacity:0; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; bottom:45px; left:50%; transform:translate(-50%, 0); width:100%; max-width:1720px; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txtCont { display:flex; justify-content:space-between; align-items:flex-end; }
#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 { opacity:0; color:#fff; font-size:100px; font-weight:700; line-height:1.3; display:inline-block  }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-left:117px; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { opacity:0; font-size:200px; font-weight:700; color:var(--mainColor); line-height:1.0; display:block }
#visual .swiper-container .swiper-slide.swiper-slide-prev {}
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_1 0.4s 0.1s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_2 0.5s 2.0s; animation-fill-mode:both; }
.visual .swiper-btn { display:none }
.visual .control_box { position:absolute; top:266px; left:50%; transform:translateX(-50%); width:100%; max-width:1690px; 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 { color:rgba(255, 255, 255, 0.30); font-size:17px; font-weight:800; line-height:1.3; }
.visual .control_box .box .txt strong { color:#fff; font-weight:800; }
.visual .swiper-pagination { display:none; }
.visual .swiper-button-next { display:block; position:absolute; top:0; left:unset; right:0; transform:translate(0, 0); width:90px; height:100%; text-align:center; margin:0; }
.visual .swiper-button-next:before { content:""; display:block; width:0; height:100%; background:var(--mainColor); position:absolute; top:0; right:0; transition:all 0.3s; } 
.visual .swiper-button-next:hover:before { width:90px; }
.visual .btn-box { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);  z-index:5; transition:all 0.3s; opacity:0.5; }
.visual .btn-box span { width:52px; height:60px; display:flex; justify-content:center; align-items:center; background:#f1f1f1; background:url(/img/main/more_icon_line1.svg) center center no-repeat; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); overflow:hidden; transition:all 0.3s; }
.visual .btn-box span:before { content:""; display:block; position:absolute; top:0; left:0; width:0; height:100%; background:#fff; transition:all 0.3s; }
.visual .swiper-button-next:hover span:before { width:100%; }
.visual .btn-box strong { margin-top:15px; color:#fff; font-size:16px; font-weight:800; line-height:1.3; display:block }
.visual .swiper-button-next:hover .btn-box { opacity:1; }
.visual .btn-box svg { width:auto; height:auto; }
.visual .btn-box svg { position:relative; z-index:3; }
.visual .btn-box svg path { transition:all 0.3s; }
.visual .swiper-button-next:hover svg path { stroke:var(--mainColor); }

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

#visual .scrolldown { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:1690px; z-index:30; display:flex }
#visual .scrolldown .txt { position:absolute; left:20px; bottom:40px; font-family: "Play", sans-serif; color:#fff; font-size:16px; font-weight:400; line-height:1.3; }
#visual .scrolldown .txt > span { font-family: "Play", sans-serif; font-weight:400; opacity:0; transition:all 0.3s; }
#visual .scrolldown .txt > span.over { opacity:1; }
#visual .scrolldown .line { position:absolute; left:0; bottom:0;  width:1px; height:120px; background:rgba(255,255,255,0.2); }
#visual .scrolldown .line:before { content:""; display:block; width:1px; height:20px; background:#fff; position:absolute; top:0; left:0; animation:scrollDown 2.5s infinite; }
#visual .scrolldown .txt { display: inline-block; animation:text_loop 1s infinite; }
@media screen and (max-width:1760px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:80px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-left:90px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:160px; }
}
@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:60px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-left:70px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:120px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:45px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-left:30px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:90px; }
}
@media screen and (max-width:860px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:35px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-left:22px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:70px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:24px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-left:15px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:48px; }
}

@keyframes scrollDown {
    0% { top:0px; }
    70% { top:105%; }
    100% { top:105%; }
}
@keyframes scroll_txt {
    0% { opacity:0 }
    100% { opacity:1 }
}
@keyframes text_loop {
    0%, 80% { opacity: 1; }
    100% { opacity: 1; }
}


.title-box { display:flex; justify-content:space-between; align-items:flex-end; }
.title-box h3 { overflow:hidden; width:50%; }
.title-box h3 span { display:block; color:#000; font-size:180px; font-weight:600; line-height:1.3; }
.title-box .txt.txt-right { color:#333; font-size:20px; font-weight:300; line-height:1.8; text-align:right; padding-bottom:53px; }
@media screen and (max-width:1440px){
	.title-box h3 span { font-size:110px; }
	.title-box .txt.txt-right { width:50%; font-size:18px; padding-bottom:40px; line-height:1.6; }
}
@media screen and (max-width:1200px){
	.title-box h3 span { font-size:95px; }
	.title-box .txt.txt-right { font-size:17px; padding-bottom:34px; line-height:1.4; }
}
@media screen and (max-width:1024px){
	.title-box { justify-content:flex-start; flex-wrap:wrap; }
	.title-box h3 { width:100%; }
	.title-box h3 span { font-size:80px; }
	.title-box .txt.txt-right { text-align:left; font-size:16px; padding-bottom:0; margin-top:20px; width:100%; }
	.title-box .txt.txt-right br { display:none }
}
@media screen and (max-width:640px){
	.title-box h3 span { font-size:40px; }
	.title-box .txt.txt-right { margin-top:10px; }
}

/* animation */
.title-box h3 span { opacity:0; }
.title-box.subOn h3 span { animation:ani_2 0.8s 0.01s; animation-fill-mode:both; }
.title-box .txt.txt-right { opacity:0; }
.title-box.subOn .txt.txt-right { animation:ani_1 1.0s 0.2s; animation-fill-mode:both; }

.company-txt { padding:200px 0 0; overflow:hidden; }
.company-txt .top .txt { color:#000; font-size:180px; font-weight:700; line-height:1.3; transition:all 0.8s; }
.company-txt .top .txt span { font-weight:700; }
.company-txt .top .txt span.txt { color:var(--mainColor); font-size:128%; vertical-align:middle; margin-top:-1%; display:inline-block; }
.company-txt .top .txt-left { margin-left:-100%; }
.company-txt .top.on .txt-left { margin-left:0; }
.company-txt .top .txt-right { margin-right:-100%; text-align:right }
.company-txt .top.on .txt-right { margin-right:0; }
.company-txt .txtbox { margin-top:100px; display:flex; flex-direction:column; align-items:center; }
.company-txt .txtbox .txt { color:#111; font-size:26px; font-weight:500; line-height:1.75; }
.company-txt .txtbox .btn_more { margin-top:100px; }
@media screen and (max-width:1760px){
	.company-txt .top .txt { font-size:160px; }
}
@media screen and (max-width:1440px){
	.company-txt { padding:150px 0 0; }
	.company-txt .top .txt { font-size:120px; }
	.company-txt .txtbox { margin-top:80px; }
	.company-txt .txtbox .txt { font-size:22px; }
	.company-txt .txtbox .btn_more { margin-top:80px; }
}
@media screen and (max-width:1024px){
	.company-txt { padding:100px 0 0; }
	.company-txt .top .txt { font-size:90px; }
	.company-txt .txtbox { margin-top:50px; }
	.company-txt .txtbox .txt { font-size:20px; }
	.company-txt .txtbox .btn_more { margin-top:50px; }
}
@media screen and (max-width:860px){
	.company-txt .top .txt { font-size:64px; }
}
@media screen and (max-width:640px){
	.company-txt .top .txt { font-size:48px; }
	.company-txt .txtbox { margin-top:40px; }
	.company-txt .txtbox .txt { font-size:18px; }
	.company-txt .txtbox .btn_more { margin-top:40px; }
}



.product-box { margin-top:300px; overflow:hidden; }
.product-box .productCont { position:relative; margin-top:60px; }
.product-box .listbox ul { position:relative; z-index:2; display:flex; justify-content:center; gap:10px; height:690px; width:100%; }
.product-box .listbox li { width:calc((100% - 10px) / 3); transition:all 0.5s ease-in-out; }
.product-box .listbox li:nth-child(2) { margin-top:30px; }
.product-box .listbox li:nth-child(3) { margin-top:60px; }
.product-box .listbox li .box a { position:relative; width:100%; height:600px; border-radius:20px; overflow:hidden; display:flex; align-items:flex-end; transition:all 0.5s; } 
.product-box .listbox li .txtbox { position:absolute; top:30px; left:60px; z-index:3; opacity:0; transition:all 0.3s; }
.product-box .listbox li .txtbox .stxt { color:rgba(34, 34, 34, 0.2); font-size:18px; font-weight:700; line-height:1.3; }
.product-box .listbox li .txtbox .tit { display:flex; align-items:center;  }
.product-box .listbox li .txtbox .tit h4 { color:#222; font-size:65px; font-weight:700; line-height:1.3; }
.product-box .listbox li .txtbox .tit span { margin-left:20px; display:flex; justify-content:center; align-items:center; width:60px; height:60px; background:var(--mainColor); border-radius:60px; transition:all 0.5s; }
.product-box .listbox li .imgbox { position:relative; width:100%; height:100%; transition:all 0.5s; display:flex; align-items:center; justify-content:center;  }
.product-box .listbox li a:before { content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; background:#ddd; transition:all 0.5s ease-in-out; border-radius:20px; }
.product-box .listbox li:nth-child(2) a:before { background:#b6b3af; }
.product-box .listbox li:nth-child(3) a:before { background:#b8afa3; }
.product-box .listbox li .imgbox img { transform:scale(1); transition:all 0.5s ease-in-out; }
.product-box .listbox li.on { width:56%; }
.product-box .listbox li.off { width:calc((44% - 10px) / 2); margin-top:0; }
.product-box .listbox li.on .txtbox { opacity:1; transition:all 0.6s 0.5s ease-in-out; }
.product-box .listbox li.on a:before { background:#fff; height:72%; }
.product-box .listbox li.on .imgbox { height:72%; }
.product-box .listbox li.off .imgbox img { transform:scale(0.7); }
.product-box .bg-txt { position:absolute; left:0; top:50%; transform:translateY(-50%); margin-top:60px; display:flex }
.product-box .bg-txt svg { color:#fff; font-weight:700; display:inline-block; width:auto; margin-right:2%; }
.product-box .bg-txt svg text { fill:none; stroke:#000; stroke-width:0.28; font-size:60px; font-weight:700; line-height:1.3; opacity:0.1; }
.product-box .productCont.subOn .bg-txt svg { animation:txt_marquee 100s 0.5s infinite linear; }

.product-box .listbox li { position:absolute; }
.product-box .listbox li:nth-child(1) { left:50%; transform:translateX(-50%) rotate(-10deg); z-index:3 } 
.product-box .listbox li:nth-child(2) { position:relative; z-index:2 }
.product-box .listbox li:nth-child(3) { right:50%; transform:translateX(50%) rotate(10deg); z-index:1 }
.product-box .listbox ul.active li { position:relative; }
.product-box .listbox ul.active li:nth-child(1),
.product-box .listbox ul.active li:nth-child(2),
.product-box .listbox ul.active li:nth-child(3) { left:0; right:0; transform:translateX(0) rotate(0deg); }
@media screen and (max-width:1440px){
	.product-box { margin-top:250px; }
	.product-box .productCont { margin-top:50px; }
	.product-box .listbox li .txtbox .stxt { font-size:17px; }
	.product-box .listbox li .txtbox .tit h4 { font-size:50px; }
	.product-box .listbox li .box a { border-radius:10px; }
}
@media screen and (max-width:1200px){
	.product-box .productCont { margin-top:40px; }
	.product-box .listbox ul { height:640px;}
	.product-box .listbox li .box a { height:550px; }
	.product-box .listbox li .imgbox img { width:400px; }
}
@media screen and (max-width:1024px){
	.product-box { margin-top:150px; }
	.product-box .productCont { margin-top:30px; }
	.product-box .listbox li .txtbox { top:20px; left:30px; }
	.product-box .listbox li .txtbox .stxt { font-size:16px; }
	.product-box .listbox li .txtbox .tit h4 { font-size:40px; }
	.product-box .listbox li .txtbox .tit span { margin-left:14px; width:50px; height:50px; }
	.product-box .listbox li .box a { border-radius:10px; }
	.product-box .listbox li a:before { border-radius:10px; }
}
@media screen and (max-width:960px){
	.product-box .listbox ul { height:490px;}
	.product-box .listbox li .box a { height:400px; }
	.product-box .listbox li .imgbox img { width:360px; transform:scale(0.7); }
	.product-box .listbox li .txtbox { left:0; }
	.product-box .listbox li .txtbox .stxt { font-size:15px; }
	.product-box .listbox li .txtbox .tit h4 { font-size:28px; }
	.product-box .listbox li .txtbox .tit span { margin-left:10px; width:36px; height:36px; }
	.product-box .listbox li { width:calc((100% - 20px) / 3) !important; margin-top:0 !important; }
	.product-box .listbox ul.active li .imgbox { height:72%; }
	.product-box .listbox ul.active li .txtbox { opacity:1; transition:all 0.6s 0.5s ease-in-out; }
	.product-box .listbox ul.active li a:before { height:72%; }
	.product-box .listbox ul.active li .imgbox img { transform:scale(0.7); }
	.product-box .listbox li:nth-child(1) a:before { background:#ddd; }
	.product-box .listbox li:nth-child(2) a:before { background:#b6b3af; }
	.product-box .listbox li:nth-child(3) a:before { background:#b8afa3; }
}
@media screen and (max-width:760px){
	.product-box .listbox ul { flex-direction:column; height:auto; padding-bottom:20px; }
	.product-box .listbox li { width:60% !important; margin:0 auto; }
	.product-box .listbox ul.active li { width:100% !important; }
	.product-box .listbox li .box a { height:360px; }
}
@media screen and (max-width:640px){
	.product-box { margin-top:80px; }
}

/* animation */
.product-box .listbox.subOn li:nth-child(1) { animation:p_ani1 1.0s 0.3s; animation-fill-mode:both; } 
.product-box .listbox.subOn li:nth-child(3) { animation:p_ani2 1.0s 0.3s; animation-fill-mode:both; } 




.global-box { margin-top:237px; overflow:hidden; }
.global-box .title-box { position:relative; z-index:2; }
.global-box .title-box h3 span { line-height:1; }
.global-box .title-box .txt.txt-right { padding-bottom:37px; }
.global-box .global-map { position:relative; margin-top:-260px; text-align:center }
.global-box .global-map .gmCont { position:relative; z-index:5; }
.global-box .global-map .gmCont svg { max-width:100%; }
.global-box .global-map .gmCont .p-box { cursor:pointer; pointer-events:all; }
.global-box .global-map .gmCont .regionTxt { color:#222; fill:#222; font-size:22px; font-weight:700; text-transform:uppercase; }
.global-box .global-map .gmCont .p-box .over { opacity:0; transition:all 0.3s; }
.global-box .global-map .gmCont .p-box.on .over  { opacity:1; }
.global-box .global-map .bg-txt { position:absolute; left:0; bottom:100px; display:flex }
.global-box .global-map .bg-txt svg { color:#fff; font-weight:700; display:inline-block; width:auto; margin-right:2%; }
.global-box .global-map .bg-txt svg text { fill:none; stroke:var(--mainColor); stroke-width:0.28; font-size:60px; font-weight:700; line-height:1.3; opacity:0.2; }
.global-box .global-popup.over_1 { top:272px; margin-left:-5%; }
.global-box .global-popup.over_2 { top:628px; margin-left:-10%; }
.global-box .global-popup.over_3 { top:628px; margin-left:-5%; }
.global-box .global-popup.over_4 { top:322px; margin-left:4%; }
.global-box .global-popup.over_5 { top:367px; margin-left:5.2%; }
.global-box .global-popup.over_6 { top:622px; margin-left:0; }
.global-box .global-popup.over_7 { top:669px; margin-left:6%; }
.global-box .global-popup:before {content:""; display:block; position:absolute; top:50%; width:0; z-index:1; height:1px; background:var(--mainColor); }
.global-box .global-popup.on:before { transition:all 0.2s 0.1s; }
.global-box .global-popup.over_1:before { width:200px; left:-160px; transform:translateY(-50%) rotate(-26deg); margin-top:15px; }
.global-box .global-popup.over_2:before { width:200px; left:-140px; transform:translateY(-50%) rotate(26deg); margin-top:-30px;}
.global-box .global-popup.over_3:before { width:250px; left:-135px; top:0; left:50%; transform:translate(0, -50%) rotate(-26deg); margin-top:-45px;}
.global-box .global-popup.over_4:before { width:350px; right:-273px; transform:translateY(-50%) rotate(10deg); margin-top:-30px; }
.global-box .global-popup.over_5:before { width:300px; right:-208px; transform:translateY(-50%) rotate(40deg); margin-top:30px; }
.global-box .global-popup.over_6:before { width:340px; right:-232px; transform:translateY(-50%) rotate(-47deg); margin-top:-18px; }
.global-box .global-popup.over_7:before { width:420px; right:-255px; transform:translateY(-50%) rotate(-50deg); margin-top:-25px; }
@media screen and (max-width:1440px){
	.global-box { margin-top:170px; margin-bottom:-260px; }
	.global-box .global-map { margin-top:-350px; }
	.global-box .global-map .gmCont svg { max-width:1000px; }
	.global-box .global-map .bg-txt { bottom:200px; }
	.global-box .global-popup.over_1 { top:372px; }
	.global-box .global-popup.over_2 { top:728px; }
	.global-box .global-popup.over_3 { top:680px; }
	.global-box .global-popup.over_4 { top:422px; }
	.global-box .global-popup.over_5 { top:467px; }
	.global-box .global-popup.over_6 { top:722px; }
	.global-box .global-popup.over_7 { top:769px; }
	.global-box .global-popup.over_1:before { width:120px; left:-80px; transform:translateY(-50%) rotate(-45deg); margin-top:30px; }
	.global-box .global-popup.over_2:before { width:200px; left:-110px; transform:translateY(-50%) rotate(65deg); margin-top:-45px;}
	.global-box .global-popup.over_3:before { width:200px; left:-220px; top:0; left:50%; transform:translate(0, -50%) rotate(-35deg); margin-top:-50px;}
	.global-box .global-popup.over_4:before { width:200px; right:-143px; transform:translateY(-50%) rotate(18deg); margin-top:-30px; }
	.global-box .global-popup.over_5:before { width:180px; right:-108px; transform:translateY(-50%) rotate(40deg); margin-top:40px; }
	.global-box .global-popup.over_6:before { width:350px; right:-190px; transform:translateY(-50%) rotate(-68deg); margin-top:-40px; }
	.global-box .global-popup.over_7:before { width:380px; right:-205px; transform:translateY(-50%) rotate(-70deg); margin-top:-70px; }
}
@media screen and (max-width:1024px){
	.global-box { margin-top:120px; margin-bottom:0; }
	.global-box .global-map { margin-top:0; }
	.global-box .global-map .gmCont svg { display:none }
	.global-box .global-map .bg-txt { top:50%; transform:translateY(-50%); bottom:unset }
}
@media screen and (max-width:640px){
	.global-box { margin-top:70px; }
}

/* animation */
.global-box .global-map { opacity:0; }
.global-box .global-map.subOn { animation:bgs3 1.0s 0.3s; animation-fill-mode:both; } 
.global-box .global-map .mapCont .p-box { opacity:0; }
.global-box .global-map.subOn .mapCont .p-box:nth-child(1) { animation:ani_5 0.8s 0.7s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(2) { animation:ani_5 0.8s 1.0s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(3) { animation:ani_5 0.8s 1.3s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(4) { animation:ani_5 0.8s 1.6s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(5) { animation:ani_5 0.8s 1.9s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(6) { animation:ani_5 0.8s 2.1s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(7) { animation:ani_5 0.8s 2.4s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(8) { animation:ani_5 0.8s 2.7s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(9) { animation:ani_5 0.8s 3.0s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(10) { animation:ani_5 0.8s 3.3s; animation-fill-mode:both; } 
.global-box .global-map.subOn .mapCont .p-box:nth-child(11) { animation:ani_5 0.8s 3.6s; animation-fill-mode:both; } 
.global-box .global-map.subOn .bg-txt svg { animation:txt_marquee 100s 0.5s infinite linear; }



.esg-box { margin-top:200px; overflow:hidden; }
.esg-box .esgCont { position:relative; margin-top:60px; }
.esg-box .listbox ul { position:relative; z-index:2; display:flex; justify-content:center; gap:10px; height:690px; width:100%; }
.esg-box .listbox li { width:calc((100% - 10px) / 3); transition:all 0.5s ease-in-out; }
.esg-box .listbox li:nth-child(2) { margin-top:30px; }
.esg-box .listbox li:nth-child(3) { margin-top:60px; }
.esg-box .listbox li .box { width:100%; }
.esg-box .listbox li .box a { position:relative; width:100%; height:570px; border-radius:20px; overflow:hidden; display:flex; transition:all 0.5s; }
.esg-box .listbox li .imgbox { position:relative; width:100%; }
.esg-box .listbox li .imgbox:before {content:""; display:block; padding-bottom:115%; }
.esg-box .listbox li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.esg-box .listbox li .imgbox img { transform:scale(1); transition:all 0.5s ease-in-out; }
.esg-box .listbox li .txtbox { position:absolute; left:60px; bottom:60px; }
.esg-box .listbox li .txtbox > p { color:rgba(255,255,255,0.5); font-size:18px; font-weight:700; line-height:1.3; }
.esg-box .listbox li .txtbox .btn { margin-top:20px; display:flex; align-items:center; transition:all 0.5s; }
.esg-box .listbox li .txtbox .btn strong { height:100%; color:#fff; font-size:65px; font-weight:700; line-height:1.3; display:flex; justify-content:center; align-items:center; border-radius:60px; transition:all 0.5s; }
.esg-box .listbox li .txtbox .btn span { position:absolute; right:-75px; display:flex; justify-content:center; align-items:center; width:60px; height:60px; background:var(--mainColor); border-radius:60px; transition:all 0.5s; }
.esg-box .bg-txt { position:absolute; left:0; top:50%; transform:translateY(-50%); margin-top:0; display:flex }
.esg-box .bg-txt svg { color:#fff; font-weight:700; display:inline-block; width:auto; margin-right:2%; }
.esg-box .bg-txt svg text { fill:#000; stroke:none; stroke-width:0.28; font-size:60px; font-weight:700; line-height:1.3; opacity:0.05; }
.esg-box .esgCont.subOn .bg-txt svg { animation:txt_marquee 100s 0.5s infinite linear; }

.esg-box .listbox ul.active a:hover .imgbox img { transform:scale(1.02); }
.esg-box .listbox ul.active a:hover .btn span { margin-right:calc(100% - 60px); transform:rotate(45deg); right:0;}
.esg-box .listbox ul.active a:hover .btn strong { margin-left:70px; }
.esg-box .listbox ul.active li:hover:nth-child(1) { margin-top:-20px; }
.esg-box .listbox ul.active li:hover:nth-child(2) { margin-top:10px; }
.esg-box .listbox ul.active li:hover:nth-child(3) { margin-top:40px; }

.esg-box .listbox li { position:absolute; }
.esg-box .listbox li:nth-child(1) { left:50%; transform:translateX(-50%) rotate(-10deg); z-index:1 } 
.esg-box .listbox li:nth-child(2) { position:relative; z-index:2 }
.esg-box .listbox li:nth-child(3) { right:50%; transform:translateX(50%) rotate(10deg); z-index:3 }
.esg-box .listbox ul.active li { position:relative; }
.esg-box .listbox ul.active li:nth-child(1),
.esg-box .listbox ul.active li:nth-child(2),
.esg-box .listbox ul.active li:nth-child(3) { left:0; right:0; transform:translateX(0) rotate(0deg); }
@media screen and (max-width:1440px){
	.esg-box { margin-top:160px; }
	.esg-box .esgCont { margin-top:50px; }
	.esg-box .listbox ul { height:640px; }
	.esg-box .listbox li .box a { height:530px; }
	.esg-box .listbox li .txtbox { left:35px; bottom:35px; }
	.esg-box .listbox li .txtbox > p { font-size:17px; }
	.esg-box .listbox li .txtbox .btn { margin-top:13px; }
	.esg-box .listbox li .txtbox .btn strong { font-size:54px; }
	.esg-box .listbox li .txtbox .btn span { right:-75px; width:60px; height:60px; }
}
@media screen and (max-width:1200px){
	.esg-box .esgCont { margin-top:40px; }
	.esg-box .listbox ul { height:510px; }
	.esg-box .listbox li .box a { height:420px; }
	.esg-box .listbox li .txtbox { left:20px; bottom:20px; }
	.esg-box .listbox li .txtbox > p { font-size:16px; }
	.esg-box .listbox li .txtbox .btn { margin-top:10px; }
	.esg-box .listbox li .txtbox .btn strong { font-size:38px; }
	.esg-box .listbox li .txtbox .btn span { right:-60px; width:50px; height:50px; }
	.esg-box .listbox ul.active a:hover .btn span { margin-right:calc(100% - 50px); }
	.esg-box .listbox ul.active a:hover .btn strong { margin-left:60px; }
}
@media screen and (max-width:1024px){
	.esg-box { margin-top:100px; }
	.esg-box .esgCont { margin-top:30px; }
	.esg-box .listbox ul { height:410px; }
	.esg-box .listbox li .box a { height:300px; border-radius:10px; }
	.esg-box .listbox li:nth-child(2),
	.esg-box .listbox li:nth-child(3) { margin-top:0; }
	.esg-box .listbox li .txtbox { left:10px; bottom:20px; }
	.esg-box .listbox li .txtbox > p { font-size:15px; }
	.esg-box .listbox li .txtbox .btn { margin-top:8px; }
	.esg-box .listbox li .txtbox .btn strong { font-size:34px; }
	.esg-box .listbox li .txtbox .btn span { right:-50px; width:40px; height:40px; }
	.esg-box .listbox ul.active a:hover .btn span { margin-right:calc(100% - 40px); }
	.esg-box .listbox ul.active a:hover .btn strong { margin-left:50px; }
	.esg-box .listbox ul.active li:hover:nth-child(1),
	.esg-box .listbox ul.active li:hover:nth-child(2),
	.esg-box .listbox ul.active li:hover:nth-child(3) { margin-top:0; }
}
@media screen and (max-width:860px){
	.esg-box .listbox ul { flex-direction:column; height:auto; padding-bottom:20px; gap:5px; }
	.esg-box .listbox li { width:60% !important; margin:0 auto; }
	.esg-box .listbox ul.active li { width:100% !important; }
	.esg-box .listbox li .box a { height:240px; }
}
@media screen and (max-width:640px){
	.esg-box { margin-top:50px; }
	.esg-box .listbox li .box a { height:200px; }
}
/* animation */
.esg-box .listbox.subOn li:nth-child(1) { animation:p_ani1 1.0s 0.3s; animation-fill-mode:both; } 
.esg-box .listbox.subOn li:nth-child(3) { animation:p_ani2 1.0s 0.3s; animation-fill-mode:both; } 


.contact-box { margin:225px 0 250px; }
.notice-box .listCont { position:relative; display:flex; margin-top:60px; }
.notice-box .listCont .nav { position:sticky; top:90px; width:417px; height:200px;  }
.notice-box .listCont .nav > li:not(:last-child) { margin-bottom:0;}
.notice-box .listCont .nav > li a { position:relative; color:#000; font-size:40px; font-weight:700; line-height:1.3; transition:all 0.3s; }
.notice-box .listCont .nav > li.active a { color:var(--mainColor); }
.notice-box .listCont .nav > li.active a:before { width:100%; }
.notice-box .listCont .listbox { width:calc(100% - 417px); padding-bottom:60px; border-bottom:1px solid #000; overflow:hidden; }
.notice-box .listCont .listbox .txt-top { position:relative; color:#333; font-size:20px; font-weight:400; line-height:1.8; min-height:60px; }
.notice-box .listCont .listbox .txt-top .btn_more { position:absolute; right:0; bottom:0; }
.notice-box .listCont .listbox .list { margin-top:60px; padding-top:60px; position:relative; display:block; width:100%; border-top:1px solid #000; }
.notice-box .listCont .listbox .slider { width:100%; }
.notice-box .listCont .slider { position:relative; }
.notice-box .listCont .listbox .slider .inner { position:relative; width:148%; }
.notice-box .listCont .listbox .swiper-slide { position:relative; width:calc((100% - 60px) / 3) !important; left:-16.25%; min-height:535px; }
.notice-box .listCont .listbox .swiper-slide a { display:block; width:50%; transition:all 0.5s; }
.notice-box .listCont .listbox .swiper-slide-active { left:0 }
.notice-box .listCont .listbox .swiper-slide-next { left:0;  }
.notice-box .listCont .listbox .swiper-slide-prev { left:16.25%;  }
.notice-box .listCont .listbox .swiper-slide-active a { width:100%; }
.notice-box .listCont .listbox .swiper-slide .imgbox { position:relative; transition:all 0.4s; overflow:hidden; border-radius:20px; }
.notice-box .listCont .listbox .swiper-slide .imgbox:before { content:""; display:block; padding-bottom:63.5%; }
.notice-box .listCont .listbox .swiper-slide .imgbox 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; }
.notice-box .listCont .listbox .swiper-slide a:hover .imgbox img { transform:scale(1.1); }
.notice-box .listCont .listbox .swiper-slide .txtbox { display:none }
.notice-box .listCont .listbox .swiper-slide .txtbox dt { margin-top:40px; color:#222; font-size:22px; font-weight:600; line-height:1.3; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.notice-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:10px; color:#666; font-size:18px; font-weight:400; line-height:1.65; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.notice-box .listCont .listbox .swiper-slide.swiper-slide-active .txtbox { display:block }
.notice-box .listCont .listbox .list .control_box { position:absolute; top:42%; right:calc(32.5% - 10px); z-index:10; display:flex; align-items:center; gap:0 40px; }
.notice-box .listCont .listbox .list .control_box .box { display:flex; align-items:center; justify-content:center; gap:0 10px; }
.notice-box .listCont .listbox .list .control_box .box .txt { color:#ccc; font-size:16px; font-weight:700; line-height:1.3; }
.notice-box .listCont .listbox .list .control_box .box .txt strong,
.notice-box .listCont .listbox .list .control_box .box .txt .activeslide { font-weight:700; color:#000 }
.notice-box .listCont .listbox .list .control_box .box .txt .totalslide { font-weight:700; }
.notice-box .listCont .listbox .list .btn-box { display:flex; align-items:center; justify-content:center; gap:0 10px; }
.notice-box .listCont .listbox .list .btn { transition:all 0.4s; width:30px; height:30px; text-indent:-9999em; overflow:hidden; display:block; cursor:pointer;  }
.notice-box .listCont .listbox .list .btn_prev,
.notice-box .listCont .listbox .list .btn_next { background:url(/img/main/btn_pn.svg) center center no-repeat; }
.notice-box .listCont .listbox .list .btn_next { transform:rotateY(180deg); }
.notice-box .listCont .listbox .list .btn_more:hover:after { transition:all 0.4s; background:url(/img/main/icon_arr.svg) center center no-repeat;}
.notice-box .listCont .listbox .list .swiper-pagination-progressbar { background:#ddd !important; height:2px !important; width:100px; position:relative; top:unset; left:unset; display:block !important; }
.notice-box .listCont .listbox .list .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:var(--mainColor) !important; }
@media screen and (max-width:1440px){
	.contact-box { margin:180px 0; }
	.notice-box .listCont .nav { top:80px; width:360px; }
	.notice-box .listCont .nav > li a { font-size:36px; }
	.notice-box .listCont { margin-top:50px; }
	.notice-box .listCont .listbox { width:calc(100% - 360px); padding-bottom:50px; }
	.notice-box .listCont .listbox .txt-top { font-size:19px; line-height:1.6; }
	.notice-box .listCont .listbox .list { margin-top:50px; padding-top:50px; }
	.notice-box .listCont .listbox .swiper-slide { width:calc((100% - 40px) / 3) !important; min-height:420px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox dt { margin-top:35px; font-size:21px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:10px; font-size:17px; }
}
@media screen and (max-width:1200px){
	.contact-box { margin:120px 0; }
	.notice-box .listCont .nav { top:60px; width:260px; }
	.notice-box .listCont .nav > li a { font-size:32px; }
	.notice-box .listCont { margin-top:40px; }
	.notice-box .listCont .listbox { width:calc(100% - 260px); padding-bottom:40px; }
	.notice-box .listCont .listbox .txt-top { font-size:18px; line-height:1.4; }
	.notice-box .listCont .listbox .list { margin-top:40px; padding-top:40px; }
	.notice-box .listCont .listbox .swiper-slide { min-height:392px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox dt { margin-top:30px; font-size:20px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:8px; font-size:16px; }
}
@media screen and (max-width:1024px){
	.contact-box { margin:100px 0; }
	.notice-box .listCont .nav { top:40px; width:150px; }
	.notice-box .listCont .nav > li a { font-size:28px; }
	.notice-box .listCont { margin-top:30px; }
	.notice-box .listCont .listbox { width:calc(100% - 150px); padding-bottom:30px; }
	.notice-box .listCont .listbox .txt-top { font-size:16px; line-height:1.4; min-height:50px; }
	.notice-box .listCont .listbox .list { margin-top:30px; padding-top:30px; }
	.notice-box .listCont .listbox .swiper-slide .imgbox { border-radius:10px; }
	.notice-box .listCont .listbox .swiper-slide { width:calc((100% - 20px) / 3) !important; min-height:342px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox dt { margin-top:25px; font-size:19px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox dd { margin-top:5px; font-size:15px; }
	.notice-box .listCont .listbox .list .control_box { gap:0 15px; }
	.notice-box .listCont .listbox .list .btn-box { gap:0 5px; }
	.notice-box .listCont .listbox .list .btn_prev,
	.notice-box .listCont .listbox .list .btn_next { background-size:10px auto; }
	.notice-box .listCont .listbox .list .swiper-pagination-progressbar { width:80px; }
}
@media screen and (max-width:860px){
	.notice-box .listCont .listbox .txt-top .btn_more { position:relative; right:unset; bottom:unset; margin-top:10px; }
	.notice-box .listCont .listbox .slider .inner { width:100%; padding-bottom:50px; }
	.notice-box .listCont .listbox .swiper-slide { width:100% !important; min-height:auto; left:0; }
	.notice-box .listCont .listbox .swiper-slide a { width:100%; }
	.notice-box .listCont .listbox .swiper-slide-prev { left:0;  }
	.notice-box .listCont .listbox .swiper-slide .imgbox:before { padding-bottom:55%; }
	.notice-box .listCont .listbox .list .control_box { top:unset; bottom:0; right:0; }
	.notice-box .listCont .listbox .list .swiper-pagination-progressbar { width:60px; }
}
@media screen and (max-width:640px){
	.contact-box { margin:60px 0; }
	.notice-box .listCont .nav { top:30px; width:80px; }
	.notice-box .listCont .nav > li a { font-size:22px; }
	.notice-box .listCont .listbox { width:calc(100% - 80px); }
}

/* animation */
.notice-box .listCont .listbox .list { opacity:0 }
.notice-box .listCont .listbox .list.subOn { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }