@charset "utf-8";

.body_intro { overflow:hidden; }
.main_intro { z-index:-1; opacity:0; animation:intro 3.0s 0.1s; animation-fill-mode:both; position:fixed; top:50%; left:50%; transform:translateZ(0) translate(-50%, -50%); width:100%; height:100%; background:url(/img/main/intro.svg) no-repeat center / cover ; }
.main_intro.intro {
	z-index:999999; 
}
@keyframes intro {
	0%{ opacity:1; }
	20%{ opacity:1; width:100vw; }
	90%{ opacity:0; }
	100%{ opacity:0; width:2500vw;}
}

.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; }
}

/* #fp-nav { display:block !important; } */
#menu { opacity:1; position:fixed; left:50px !important; top:50% !important; transform:translateY(-50%); margin-top:0 !important;  }
#menu ul {  }
#menu li a { position:relative; width:12px; height:12px; display:block; background:url(/img/main/main_icon.svg) center no-repeat; transition:all 0.3s }
#menu li:not(:last-child) { margin-bottom:20px; }
#menu li.active a { background:url(/img/main/main_icon_on.svg) center no-repeat;}
@media screen and (max-width:1600px){
    #menu { left:20px !important; }
}
@media screen and (max-width:1024px){
    #menu { display:none }
}


.main1 { position:relative; overflow:hidden; }

.main3 > div,
.main4 > div { position:relative; overflow:hidden; padding-top:100px; }
@media screen and (max-width:1024px){
	.main3 > div { padding:80px 0 0; }
	.main4 > div { padding:80px 0; }
}
@media screen and (max-width:640px){
	.main3 > div { padding:60px 0 0; }
	.main4 > div { padding:60px 0; }
}



#visual { position:relative; width:100vw; 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; align-items:flex-end; opacity:0; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }
#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 .mvisualImage { position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#visual .swiper-container .swiper-slide.visu03 .mvisualImage { background-position:right center; }
#visual .swiper-container .swiper-slide .imgbox { opacity:0; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:1600px; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1,
#visual .swiper-container .swiper-slide .txtbox .txt-2,
#visual .swiper-container .swiper-slide .txtbox .txt-3 { position:relative; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { opacity:0; font-family:var(--mainFont); font-size:74px; font-weight:700; color:rgba(255,255,255,1); line-height:1.3; letter-spacing:-0.04em; display:block }
#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:13px; }
#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { opacity:0; font-size:36px; font-weight:600; color:rgba(255,255,255,1); line-height:1.3; letter-spacing:-0.04em; }
#visual .swiper-container .swiper-slide .txt_b { position:absolute; bottom:100px; left:50%; transform:translate(-50%, -50%); width:100%; max-width:1600px; z-index:15; }
#visual .swiper-container .swiper-slide .txt_b span { color:#fff; font-size:16px; font-weight:400; line-height:1.3; background:rgba(15,68,178,0.5); display:inline-block; padding:2px 3px; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_3 0.8s 0.9s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-3 > span { animation:ani_3 0.8s 1.5s; animation-fill-mode:both; }
.body_intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_3 0.8s 1.3s; animation-fill-mode:both; }
.body_intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_3 0.8s 1.9s; animation-fill-mode:both; }
.body_intro #visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-3 > span { animation:ani_3 0.8s 2.5s; animation-fill-mode:both; }
.visual .swiper-btn { display:none }
.visual .control_box { position:absolute; bottom:50px; left:50%; transform:translateX(-50%); width:100%; max-width:1600px; 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 .playstop { position:relative; cursor:pointer; width:20px; height:26px; }
.visual .control_box .playstop .stop { position:absolute; top:0; left:0; width:100%; height:100%; background:url(/img/main/btn_stop.png) center no-repeat; text-indent:-9999em; overflow:hidden }
.visual .control_box .playstop .play { position:absolute; top:0; left:0; width:100%; height:100%; background:url(/img/main/btn_play.png) center no-repeat; }
.visual .timeBar { stroke:#fff; fill:none; stroke-dasharray:100; stroke-dashoffset:100; width:60px; }
.visual .swiper-pagination { display:flex; position:relative; margin:0; padding:0; left:0; top:0; right:0; bottom:0; }
.visual .swiper-pagination-bullet { display:flex; align-items:center; justify-content:center; position:relative; text-align:left; border-radius:0; opacity:1; background-color:transparent; margin-right:10px; width:auto; height:auto; }
.visual .swiper-pagination-bullet em { font-family:var(--mainFont); font-size:20px; font-weight:500; color:rgba(255,255,255,0.5); line-height:1.3; transition:all 0.3s; }
.visual .swiper-pagination-bullet-active em { color:rgba(255,255,255,1); }
.visual .swiper-pagination-bullet i { position:relative; display:inline-block; height:3px; background-color:rgba(255,255,255,0.2); transition:all 0.3s; }
.visual .swiper-pagination-bullet.swiper-pagination-bullet-active i { width:100px; margin:0 10px; }
.visual .swiper-pagination-bullet .line { position:absolute; top:0; left:0; z-index:2; height:3px; background:#fff }

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

#visual .scrolldown { position:absolute; left:50%; bottom:60px; transform:translateX(-50%); z-index:30; text-align:center }
#visual .scrolldown .txt { font-family:var(--mainFont); color:#fff; font-size:15px; font-weight:500; line-height:1.3; }
#visual .scrolldown.on .txt span { animation:scroll_txt 0.8s 0.5s; animation-fill-mode:both; display:inline-block; margin:0 0 0 -1px; }
#visual .scrolldown .line { position:relative; width:22px; height:34px; display:block; margin:13px auto 0; border-radius:22px; border:2px solid #fff; }
#visual .scrolldown .line:before { content:""; display:block; width:2px; height:8px; border-radius:2px; background:#fff; position:absolute; top:8px; left:50%; transform:translateX(-50%); animation:scrollDown 2s infinite;  }

#visual .mBtn { position:absolute; bottom:40px; right:70px; z-index:50; }
#visual .mBtn ul { display:flex; gap:10px; }
#visual .mBtn ul a { position:relative; font-size:20px; font-weight:600; color:#fff; line-height:1.3; letter-spacing:-0.03em; display:flex; align-items:center; justify-content:center; gap:10px; width:300px; height:90px; border:1px solid rgba(255, 255, 255, 0.40); background:rgba(255, 255, 255, 0.13); backdrop-filter:blur(10px); }
#visual .mBtn ul a:before { content:""; display:block; opacity:0; width:15px; height:15px; background:url(/img/main/visual_btn_arr.svg) center no-repeat; position:absolute; right:30px; top:30px; transition:all 0.3s; }
#visual .mBtn ul a:hover:before { right:22px; top:22px; opacity:1; }
@media screen and (max-width:1640px){
	#visual .swiper-container .swiper-slide .txtbox,
	#visual .swiper-container .swiper-slide .txt_b,
	.visual .control_box { left:80px; transform:translate(0, -50%); width:calc(100% - 160px); }
}
@media screen and (max-width:1560px){
	.visual .swiper-pagination-bullet.swiper-pagination-bullet-active i { width:80px; }
	.visual .swiper-pagination-bullet em { font-size:18px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:60px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:10px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { font-size:30px; }
	#visual .mBtn { bottom:60px; right:40px; }
	#visual .mBtn ul a { font-size:19px; width:240px; height:80px; }
}
@media screen and (max-width:1200px){
	#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 > span { font-size:24px; }
	#visual .mBtn { right:20px; }
	#visual .mBtn ul a { font-size:18px; width:200px; height:70px; }
}
@media screen and (max-width:1024px){
	.visual .swiper-pagination-bullet.swiper-pagination-bullet-active i { width:60px; }
	#visual .swiper-container .swiper-slide .txtbox,
	#visual .swiper-container .swiper-slide .txt_b,
	.visual .control_box { left:40px; width:calc(100% - 80px); }
	#visual .swiper-container .swiper-slide .txtbox { top:45%; text-align:center }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:36px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { font-size:20px; }
	#visual .swiper-container .swiper-slide .txt_b { text-align:center; bottom:200px; font-size:15px; }
	.visual .control_box { justify-content:center; bottom:140px; }
	#visual .mBtn ul { gap:5px; flex-wrap:wrap; width:200px; }
	#visual .mBtn ul li { width:100%; }
	#visual .mBtn ul a { font-size:17px; width:100%; height:60px; }
	#visual .mBtn ul a .icon img { width:30px; }
	#visual .mBtn ul a:before { display:none }
}
@media screen and (max-width:640px){
	.visual .swiper-pagination-bullet.swiper-pagination-bullet-active i { width:50px; }
	.visual .swiper-pagination-bullet i,
	.visual .swiper-pagination-bullet .line { height:2px; }
	#visual .swiper-container .swiper-slide .txtbox,
	#visual .swiper-container .swiper-slide .txt_b,
	.visual .control_box { left:20px; width:calc(100% - 40px); }
	#visual .swiper-container .swiper-slide .txtbox { top:45%; text-align:center }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:28px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 > span { font-size:16px; }
	#visual .swiper-container .swiper-slide .txt_b { bottom:250px; }
	.visual .control_box { justify-content:center; bottom:200px; }
	#visual .mBtn { bottom:120px; display:flex; justify-content:center; width:100%; right:0; }
	#visual .mBtn ul { gap:5px; flex-wrap:wrap; width:auto; }
	#visual .mBtn ul li { width:180px; }
	#visual .mBtn ul a { font-size:16px; height:50px; }
	#visual .mBtn ul a .icon img { width:25px; }
	#visual .scrolldown { bottom:30px;  }
	#visual .scrolldown .txt { font-size:13px; }
	#visual .scrolldown .line { margin:4px auto 0; }
}

@keyframes scrollDown {
    0% { top:8px; }
    50% { top:calc(100% - 16px); }
    100% { top:8px; }
}
@keyframes scroll_txt {
    0% { opacity:0 }
    50% { opacity:1 }
    100% { opacity:1 }
}



.title-box { text-align:center; }
.title-box h3 { overflow:hidden }
.title-box h3 span { display:block; font-size:66px; font-weight:700; line-height:1.3 }
@media screen and (max-width:1560px){
	.title-box h3 span { font-size:55px; }
}
@media screen and (max-width:1280px){
	.title-box h3 span { font-size:48px; }
}
@media screen and (max-width:1024px){
	.title-box h3 span { font-size:40px; }
}
@media screen and (max-width:640px){
	.title-box h3 span { font-size:30px; }
}
/* animation */
.title-box h3 span { opacity:0; }
.aniBox.on .title-box h3 span { animation:ani_3 0.8s 0.01s; animation-fill-mode:both; }

/* business */
.main2 { position:relative; overflow:hidden; background-image:url(/img/main/business_logo.svg); background-position:left bottom; background-repeat:no-repeat;  }
.business-box { position:relative; height:100vh; max-width:1920px; margin:0 auto; display:flex; justify-content:space-between; }
.business-box .infobox { position:relative; width:46%; }
.business-box .imgbox { width:54%; position:relative; z-index:10; overflow:hidden }
.business-box .list { position:absolute; left:0; bottom:0; z-index:5; max-width:238px; }
.business-box .list ul {}
.business-box .list li { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; width:214px; height:166px; overflow:hidden; border:1px solid rgba(255, 255, 255, 0.40); border-width:1px 1px 0 0; opacity:0.89; background:rgba(255, 255, 255, 0.08); backdrop-filter:blur(16.5px); cursor:pointer; transition:all 0.3s; }
.business-box .list li:hover { background:rgba(0, 0, 0, 0.10); backdrop-filter:blur(20px); }
.business-box .list li.on { width:238px; opacity:0.9; background:var(--mainColor); backdrop-filter:blur(15px);  border:1px solid rgba(255, 255, 255, 0.2); border-width:1px 1px 0 0; }
.business-box .list li .tit { margin-top:10px; color:#fff; font-size:20px; font-weight:500; line-height:1.3; padding:0 10px; text-align:center; }
.business-box .list li a { position:relative; z-index:2; letter-spacing:0.02em; font-size:18px; font-weight:600; color:#000; display:block; transition:all 0.3s ease-in-out; text-transform:uppercase; }
.business-box .txtbox { position:absolute; left:160px; top:265px; z-index:5; width:calc(100% - 160px - 80px); }
.business-box .txtbox dl { position:absolute; left:0; top:0; width:100%; }
.business-box .txtbox dt { transition:all 1s; transform:translateX(30%); transition-delay:0.2s; opacity:0; }
.business-box .txtbox dt strong { color:#111; font-size:20px; font-weight:600; line-height:1.3; }
.business-box .txtbox dt h3 { margin-top:10px; color:var(--mainColor); font-size:70px; font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
.business-box .txtbox dd { margin-top:25px; position:relative; transition:all 1s; transform:translateX(30%); transition-delay:0.4s; opacity:0; }
.business-box .txtbox dd p.txt { color:#333; font-size:18px; font-weight:300; line-height:1.7; }
.business-box .txtbox dd .btnbox { margin:80px 0 0; background:#fff }
.business-box .txtbox dl.on { z-index:10; }
.business-box .txtbox dl.on dt,
.business-box .txtbox dl.on dd { transform:translateX(0) !important; opacity:1 !important; }

.business-box .slider { position:absolute; left:0; bottom:0; width:100%; height:100vh; } 
.business-box .slider .txt_b { color:#fff; font-size:16px; font-weight:400; line-height:1.3; position:absolute; bottom:120px; left:270px; }
.business-box .slider img { width:100%; height:100vh; object-fit:cover; -o-object-fit:cover; }
.business-box .slick-next,
.business-box .slick-prev { display:none }

.business-box .slider .item { position:relative; }
.business-box .slider .item .slick-dots { position:absolute; left:50%; bottom:50px; padding:16px 18px; transform:translateX(-50%); border-radius:30px; background:rgba(255, 255, 255, 0.05); backdrop-filter:blur(10px); display:flex; justify-content:center; gap:16px; }
.business-box .slider .item .slick-dots button { outline:none; border:none; background:rgba(255, 255, 255, 0.30); width:10px; height:10px; border-radius:10px; text-indent:-9999em; overflow:hidden }
.business-box .slider .item .slick-dots .slick-active button { background:rgba(255, 255, 255, 1); }

.business-box.on .slider:after { width:0; }
.business-box .slick-slide .item { overflow:hidden; }
.business-box .slick-active .item { animation:ani_5 1.0s 0.1s; animation-fill-mode:both; }

/* 24.11.15 */
.business-box .slider .txt_b { display: inline-block; background: rgba(15,68,178,0.5); padding: 2px 3px; }
@media screen and (max-width:1560px){
	.business-box .list { max-width:200px; }
	.business-box .list li { width:180px; height:150px;  }
	.business-box .list li.on { width:200px; }
	.business-box .list li .tit { margin-top:8px; font-size:19px; }
	.business-box .list li a { font-size:17px; }
	.business-box .txtbox { top:255px; left:60px; width:calc(100% - 60px - 60px); }
	.business-box .txtbox dt strong { font-size:19px; }
	.business-box .txtbox dt h3 { margin-top:8px; font-size:60px; }
	.business-box .txtbox dd { margin-top:20px; }
	.business-box .txtbox dd br { display:none }
	.business-box .txtbox dd p.txt { font-size:17px; }
	.business-box .txtbox dd .btnbox { margin:60px 0 0; }
}
@media screen and (max-width:1200px){
	.business-box .list { max-width:170px; }
	.business-box .list li { width:148px; height:145px; }
	.business-box .list li.on { width:170px; }
	.business-box .list li .tit { margin-top:5px; font-size:18px; }
	.business-box .list li a { font-size:16px; }
	.business-box .txtbox { top:220px; }
	.business-box .txtbox dt strong { font-size:19px; }
	.business-box .txtbox dt h3 { margin-top:5px; font-size:45px; }
	.business-box .txtbox dd { margin-top:15px; }
	.business-box .txtbox dd p.txt { font-size:16px; }
	.business-box .txtbox dd .btnbox { margin:40px 0 0; }
	.business-box .slider .txt_b { left:180px; }
}
@media screen and (max-width:1024px){
	.main2 { background-image:url(/img/main/business_logo_m.svg); background:none }
	.business-box { flex-wrap:wrap; }
	.business-box .list { max-width:100%; width:100%; display:flex; justify-content:center; }
	.business-box .list ul { display:flex; }
	.business-box .list li { width:130px; height:130px; border-width:1px 1px 0; margin-right:-1px; }
	.business-box .list li.on { width:130px; border-width:1px 1px 0;  }
	.business-box .list li .icon img { width:100px; }
	.business-box .list li .tit { margin-top:5px; font-size:17px; }
	.business-box .list li a { font-size:15px; }
	.business-box .infobox { z-index:20 }
	.business-box .infobox,
	.business-box .imgbox,
	.business-box .txtbox { width:100%; }
	.business-box .imgbox { overflow:inherit; }
	.business-box .txtbox { top:80%; left:20px; width:calc(100% - 40%); }
	.business-box .txtbox dt strong { font-size:18px; color:rgba(255,255,255,0.7); }
	.business-box .txtbox dt h3 { margin-top:5px; font-size:32px; color:#fff }
	.business-box .txtbox dd { margin-top:12px; }
	.business-box .txtbox dd p.txt { font-size:16px; color:#fff;}
	.business-box .txtbox dd .btnbox { margin:40px 0 0; }
	.business-box .slider .item .slick-dots { bottom:150px; padding:10px 15px; gap:12px; }
	.business-box .slider .txt_b { bottom:160px; left:0; font-size:15px; margin:0 20px; width:auto; }
	.business-box .txtbox dd .btnbox { border:1px solid rgba(255, 255, 255, 0.50); background:none }
	.business-box .txtbox dd .btnbox span.txt:after { background:url(/img/main/icon_arr.svg) center center no-repeat }
	.business-box .txtbox dd .btnbox span.txt { color:#fff; }
	.business-box .txtbox dd .btnbox:hover { border:1px solid var(--mainColor); }
}
@media screen and (max-width:640px){
	.business-box,
	.business-box .slider,
	.business-box .slider img { height:100%; min-height:720px; }
	.business-box .list { max-width:600px; overflow:hidden}
	.business-box .list ul { width:100%; margin-left:1px; }
	.business-box .list li { width:25%; height:100px; }
	.business-box .list li.on { width:25% }
	.business-box .list li .icon img { width:70px; }
	.business-box .list li .tit { margin-top:5px; font-size:16px; }
	.business-box .list li a { font-size:14px; }
	.business-box .bg { position:absolute; left:0; bottom:200px; z-index:2; width:100%; height:calc(720px - 200px); background:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);}
	.business-box .txtbox { top:15%; width:calc(100% - 40px); }
	.business-box .txtbox dt strong { font-size:17px; }
	.business-box .txtbox dt h3 { font-size:26px; }
	.business-box .txtbox dd { margin-top:10px; }
	.business-box .txtbox dd p.txt { font-size:15px; }
	.business-box .txtbox dd .btnbox { margin:30px 0 0; }
	.business-box .slider .item .slick-dots { bottom:120px; gap:10px; }
	.business-box .slider .txt_b { bottom:200px; }
	.business-box .slider .txt_b span { display:block }
}

/* animation */
.business-box .list,
.business-box .txtbox { opacity:0; }
.aniBox.on .business-box .list { animation:ani_1 0.8s 0.1s; animation-fill-mode:both; }
.aniBox.on .business-box .txtbox { animation:ani_2 0.8s 0.1s; animation-fill-mode:both; }

/* esg */
.main3 { background-position:center center; background-repeat:no-repeat; background-size:cover; transition:all 0.5s; max-width:1920px; margin:0 auto }
.main3.esg_bg1 { background-image:url(/img/main/esg_bg03.jpg); }
.main3.esg_bg2 { background-image:url(/img/main/esg_bg02.jpg); }
.main3.esg_bg3 { background-image:url(/img/main/esg_bg01.jpg); }
.main3.esg_bg4 { background-image:url(/img/main/esg_bg04.jpg); }
.esg-box { position:relative; } 
.esg-box .title-box h3 span { color:#fff; }
.esg-box .listbox { margin-top:80px; }
.esg-box .listbox > ul { display:flex; justify-content:center; text-align:center; }
.esg-box .listbox > ul > li { position:relative; width:25%; height:445px; transition:all 0.3s; display:flex; align-items:center; justify-content:center; } 
.esg-box .listbox > ul > li:before { content:""; display:block; width:1px; height:330px; background:rgba(255, 255, 255, 0.20); position:absolute; left:0; top:50%; transform:translateY(-50%); }
.esg-box .listbox > ul > li:first-child:before { display:none; } 
.esg-box .listbox > ul > li h5 { margin-top:30px; color:#fff; font-size:30px; font-weight:700; line-height:1.3; letter-spacing:-0.04em; }
.esg-box .listbox > ul > li .view_more { margin:0 auto;margin-top:40px; opacity:0; transition:all 0.5s ease-in-out; }
.esg-box .listbox > ul > li .box { transition:all 0.3s; opacity:0.6; margin-top:33px; }
.esg-box .listbox > ul > li:hover .box { opacity:1; margin-top:-33px; }
.esg-box .listbox > ul > li:hover .view_more { opacity:1 }
@media screen and (max-width:1560px){
	.esg-box .listbox { margin-top:60px; }
	.esg-box .listbox > ul > li { height:400px; } 
	.esg-box .listbox > ul > li:before { height:300px; } 
	.esg-box .listbox > ul > li h5 { margin-top:25px; font-size:26px; }
	.esg-box .listbox > ul > li .view_more { margin-top:35px; }
	.esg-box .listbox > ul > li .box { margin-top:30px;}
	.esg-box .listbox > ul > li:hover .box { margin-top:-30px; }
}
@media screen and (max-width:1200px){
	.esg-box .listbox { margin-top:40px; }
	.esg-box .listbox > ul > li { height:360px; } 
	.esg-box .listbox > ul > li:before { height:260px; } 
	.esg-box .listbox > ul > li h5 { margin-top:20px; font-size:22px; }
	.esg-box .listbox > ul > li .view_more { margin-top:30px; }
	.esg-box .listbox > ul > li .box { margin-top:25px;}
	.esg-box .listbox > ul > li:hover .box { margin-top:-25px; }
}
@media screen and (max-width:1024px){
	.main3.esg_bg1,
	.main3.esg_bg2,
	.main3.esg_bg3,
	.main3.esg_bg4 { background:none; }
	.esg-box .title-box h3 span { color:#111; }
	.esg-box .listbox { margin-top:40px; }
	.esg-box .listbox > ul { flex-wrap:wrap; }
	.esg-box .listbox > ul > li { width:50%; }
	.esg-box .listbox > ul > li { height:360px; } 
	.esg-box .listbox > ul > li:before { display:none } 
	.esg-box .listbox > ul > li h5 { margin-top:15px; font-size:20px; }
	.esg-box .listbox > ul > li .view_more { margin-top:25px; opacity:1; }
	.esg-box .listbox > ul > li .box { margin-top:0;}
	.esg-box .listbox > ul > li .box img { width:100px; }
	.esg-box .listbox > ul > li:hover .box { margin-top:0; }
	.esg-box .listbox > ul > li { background-position:center center; background-repeat:no-repeat; background-size:cover; }
	.esg-box .listbox > ul > li:nth-child(1) { background-image:url(/img/main/esg_bg01.jpg); }
	.esg-box .listbox > ul > li:nth-child(2) { background-image:url(/img/main/esg_bg02.jpg); }
	.esg-box .listbox > ul > li:nth-child(3) { background-image:url(/img/main/esg_bg03.jpg); }
	.esg-box .listbox > ul > li:nth-child(4) { background-image:url(/img/main/esg_bg04.jpg); }
}
@media screen and (max-width:640px){
	.esg-box .listbox { margin-top:30px; }
	.esg-box .listbox > ul > li { height:240px; } 
	.esg-box .listbox > ul > li h5 { margin-top:10px; font-size:18px; }
	.esg-box .listbox > ul > li .view_more { margin-top:20px; }
	.esg-box .listbox > ul > li .box img { width:80px; }
}
/* animation */
.esg-box .listbox > ul > li { opacity:0; }
.aniBox.on .esg-box .listbox > ul > li { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }

/* news */
.notice-box { position:relative; } 
.notice-box .title-box h3 span { color:#111; }
.notice-box .listCont .nav { position:absolute; right:0; top:30px; display:flex; }
.notice-box .listCont .nav > li { position:relative; }
.notice-box .listCont .nav > li:not(:last-child) { margin-right:25px;}
.notice-box .listCont .nav > li a { position:relative; color:#bbb; font-size:24px; font-weight:600; line-height:1.3; transition:all 0.3s; letter-spacing:-0.03em; }
.notice-box .listCont .nav > li a:before { content:""; display:block; width:0; height:3px; background:var(--mainColor); transition:all 0.3s; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);  }
.notice-box .listCont .nav > li.active a { color:var(--mainColor); }
.notice-box .listCont .nav > li.active a:before { width:100%; }
.notice-box .listCont .listbox .list { position:relative; display:block; width:100%; }
.notice-box .listCont .slider { position:relative; margin:50px auto 0; }
.notice-box .listCont .listbox .list .inner { transition:all 0.8s; padding-bottom:100px; overflow:hidden; width:100% }
.notice-box .listCont .listbox .swiper-slide { position:relative; }
.notice-box .listCont .listbox .swiper-slide .imgbox { position:relative; transition:all 0.4s; overflow:hidden; }
.notice-box .listCont .listbox .swiper-slide .imgbox:before { content:""; display:block; padding-bottom:63.5%; }
.notice-box .listCont .listbox .swiper-slide .imgbox:after { content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:1; transition:all 0.4s; opacity:0; }
.notice-box .listCont .listbox .swiper-slide .imgbox:hover:after { opacity:1;  }
.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 .imgbox .more { transition:all 0.4s; opacity:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1; font-family:var(--mainFont); color:#fff; font-size:17px; font-weight:500; line-height:1.3; z-index:2; }
.notice-box .listCont .listbox .swiper-slide .imgbox .more:before { content:""; display:block; width:20px; height:20px; position:absolute; right:-26px; top:50%; transform:translateY(-50%); background:url(/img/main/icon_arr.svg) center center no-repeat; }
.notice-box .listCont .listbox .swiper-slide .imgbox .play { z-index:2; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:48px; height:48px; border-radius:50px; border:1px solid #fff; background:url(/img/main/icon_play.svg) center center no-repeat; }
.notice-box .listCont .listbox .swiper-slide a:hover .imgbox img { transform:scale(1.1); }
.notice-box .listCont .listbox .swiper-slide a:hover .imgbox .more { opacity:1; }
.notice-box .listCont .listbox .swiper-slide .txtbox { margin-top:28px; }
.notice-box .listCont .listbox .swiper-slide .txtbox .info { font-size:16px; font-weight:400; line-height:1.3; }
.notice-box .listCont .listbox .swiper-slide .txtbox .info strong { font-weight:600; color:var(--mainColor); }
.notice-box .listCont .listbox .swiper-slide .txtbox .info .date { position:relative; font-family:var(--mainFont); font-weight:400; color:#999; display:inline-block; margin-left:14px; padding-left:15px; }
.notice-box .listCont .listbox .swiper-slide .txtbox .info .date:before { content:""; display:block; width:1px; height:13px; background:#999; position:absolute; left:0; top:50%; transform:translateY(-50%); }
.notice-box .listCont .listbox .swiper-slide .txtbox .tit { margin-top:20px; min-height:68px; }
.notice-box .listCont .listbox .swiper-slide .txtbox .tit h5 { color:#222; font-size:20px; font-weight:500; line-height:1.7; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.notice-box .listCont .listbox .swiper-slide-next a { left:0; }
.notice-box .listCont .listbox .swiper-slide-prev a { right:0; }
.notice-box .listCont .listbox .list .btn-box { position:absolute; bottom:0; left:50%; z-index:5; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:0 10px; }
.notice-box .listCont .listbox .list .btn { transition:all 0.4s; width:60px; height:60px; text-indent:-9999em; overflow:hidden; display:block; cursor:pointer; border:1px solid #999; }
.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 { position:relative; width:60px; height:60px; border:1px solid var(--mainColor); }
.notice-box .listCont .listbox .list .btn_more:after { content:""; display:block; width:20px; height:20px; transition:all 0.2s; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:url(/img/main/icon_arr_on.svg) center center no-repeat; }
.notice-box .listCont .listbox .list .btn_more span.txt { text-indent:-9999em; overflow:hidden; display:block; }
.notice-box .listCont .listbox .list .btn_stop { background:url(/img/main/btn_stop.svg) center center no-repeat; }
.notice-box .listCont .listbox .list .btn_play { background:url(/img/main/btn_play.svg) center center no-repeat; }
.notice-box .listCont .listbox .list .btn:hover { border:1px solid var(--mainColor); background:url(/img/main/btn_pn_on.svg) center center no-repeat;}
.notice-box .listCont .listbox .list .btn.swiper-button-disabled { border:1px solid #999; background:url(/img/main/btn_pn.svg) center center no-repeat;}
.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-n { display:none; }
/*
.notice-box .listCont .listbox .list .swiper-pagination-n { display:none; overflow:hidden; position:absolute; top:unset; bottom:20px; left:0; width:100%; z-index:3; height:2px; background:#e5e5e5; }
.notice-box .listCont .listbox .list .swiper-pagination-n .swiper-pagination-progressbar-fill { background:var(--mainColor); }
*/
@media screen and (max-width:1200px){
	.notice-box .listCont .nav > li:not(:last-child) { margin-right:20px; }
	.notice-box .listCont .nav > li a { font-size:22px; }
	.notice-box .listCont .nav > li a:before { bottom:-10px;}
}
@media screen and (max-width:1024px){
	.notice-box .listCont .nav { top:30px; }
	.notice-box .listCont .nav > li a { font-size:20px; }
	.notice-box .listCont .nav > li a:before { height:2px; bottom:-10px;}
	.notice-box .listCont .slider { margin-top:40px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox { margin-top:20px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox .info { font-size:15px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox .info .date { margin-left:10px; padding-left:11px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox .info .date:before { height:11px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox .tit { margin-top:10px; min-height:62px; }
	.notice-box .listCont .listbox .swiper-slide .txtbox .tit h5 { font-size:19px; }
	.notice-box .listCont .listbox .list .inner { padding-bottom:80px; }
	.notice-box .listCont .listbox .list .btn,
	.notice-box .listCont .listbox .list .btn_more { width:40px; height:40px; }
	.notice-box .listCont .listbox .list .swiper-pagination-n { display:flex; justify-content:center; margin-top:20px; }
	.notice-box .listCont .listbox .list .swiper-pagination-bullet { width:10px; height:10px; }
	.notice-box .listCont .listbox .list .swiper-pagination-bullet-active { background:var(--mainColor); }
}
@media screen and (max-width:760px){
	.notice-box .listCont .nav { position:relative; right:unset; top:0; margin-top:20px; display:flex; justify-content:center; }
	.notice-box .listCont .nav > li:not(:last-child) { margin-right:15px; }
	.notice-box .listCont .nav > li a { font-size:19px; }
	.notice-box .listCont .nav > li a:before { height:2px; bottom:-8px; }
}
@media screen and (max-width:640px){
	.notice-box .listCont .nav { margin-top:15px; } 
	.notice-box .listCont .nav > li a { font-size:17px; }
	.notice-box .listCont .nav > li a:before { height:1px; bottom:-8px;}
	.notice-box .listCont .slider { margin-top:30px; }
	.notice-box .listCont .listbox .list .swiper-pagination-n { margin-top:20px; }
}
/* animation */
.notice-box .listCont .nav,
.notice-box .listCont .listbox { opacity:0; }
.aniBox.on .notice-box .listCont .nav { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.aniBox.on .notice-box .listCont .listbox { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }