@charset "utf-8";

.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 .fp-tableCell,
	.section .fp-scrollable { height:auto !important; }
	
	.fp-section, .fp-tableCell{height:auto !important;}
	.iScrollIndicator,
	.fp-scrollable { height:100% !important; }
	.iScrollVerticalScrollbar { display:none !important; } 

    #fullpage { overflow:hidden }
}
@media screen and (max-width:1024px){
	.section { padding:60px 0; }
    .section.fp-auto-height { padding:0; }
	.section.main1 { padding:0; }
    .section,
    .section > div { height:auto !important; }
}
@media screen and (max-width:640px){
	.section { padding:40px 0; }
}
@media screen and (max-height:760px){
	.section { padding:40px 0; }
}

.section { position:relative; }


/* #fp-nav { display:block !important; } */
#menu { opacity:1; position:fixed; left:46px !important; top:50% !important; margin-top:0 !important;transform:translateY(-50%); width:7px; display:none }
#menu li { text-align:center; }
#menu li:not(:last-child) { margin-bottom:40px; }
#menu li a { position:relative; width:8px; height:8px; margin:0 auto; text-indent:-9999em; display:block; }
#menu li a:before { content:""; display:block; width:8px; height:8px; border-radius:8px; background-color:#ddd; transition:all 0.3s }
#menu li a:after { content:""; display:block; opacity:0; transition:all 0.5s; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:26px; height:26px; border:1px solid var(--mainColor); border-radius:26px; }
#menu li.active a:before { background-color:var(--mainColor);  }
#menu li.active a:after { opacity:1; }
@media screen and (max-width:1500px){
    #menu { left:38px !important; }
}
@media screen and (max-width:1024px){
    #menu { display:none }
}

.main1 { position:relative; overflow:hidden; }
#visual { position:relative; width:100vw; height:100%; background:#000 }
#visual .swiper-container { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100vh; 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 .imgbox { opacity:0; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; top:60%; left:50%; max-width:1600px; width:100%; transform:translate(-50%, -50%); z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { position:relative; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { overflow:hidden; display:block; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { opacity:0; min-width:20px; font-size:86px; font-weight:500; color:#fff; line-height:1.3; letter-spacing:-0.02em; display:inline-block; position:relative; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { position:relative; margin-top:30px; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { opacity:0; font-size:22px; font-weight:300; color:#fff; line-height:1.3; letter-spacing:-0.02em; display:block }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span > span { animation:ani_3 0.8s 1.0s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_2 1.2s 2.2s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { animation:bgs5 2.0s 0.3s; animation-fill-mode:both;  }
.visual .swiper-btn { display:none }
.visual .control_box { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); max-width:1600px; width:100%; z-index:119; text-align:center; }
.visual .control_box .box { position:relative; width:100%; }
.visual .control_box .box .swiper-pagination { display:flex; gap:0 10px; position:relative; }
.visual .control_box .box .swiper-pagination > span { width:150px; display:block}
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

.visual .swiper-pagination-bullet { position:relative; text-align:left; border-radius:0; opacity:1; background-color:transparent; padding-top:28px; }
.visual .swiper-pagination-bullet em { position:absolute; top:0; left:0; font-size:15px; font-weight:700; letter-spacing:-0.02em; color:rgba(255,255,255,0.2); line-height:1.3; font-family:var(--mainFont); transition:all 0.3s ease-in-out; }
.visual .swiper-pagination-bullet i { position:relative; display:block; z-index:1; width:100%; height:2px; background-color:rgba(255,255,255,0.1); }
.visual .swiper-pagination-bullet .line { position:absolute; top:0; left:0; z-index:2; height:2px; background:#fff }
.visual .swiper-pagination-bullet-active em { color:rgba(255,255,255,1); }

#visual .scrolldown { position:absolute; right:0; bottom:0; z-index:3; }
#visual .scrolldown .txt { position:absolute; top:50%; transform:translateY(-50%) rotate(-90deg); right:-15px; font-family:var(--mainFont); color:#fff; font-size:12px; font-weight:400; line-height:1.3; }
#visual .scrolldown .line { position:relative; width:2px; height:80px; display:block; background:rgba(255,255,255,0.2); }
#visual .scrolldown .line:before { content:""; display:block; width:2px; height:20px; background:#fff; position:absolute; top:0; left:0; animation:scrollDown 3s infinite;  }
@media screen and (max-width:1640px){
    #visual .swiper-container .swiper-slide .txtbox { left:0; transform:translate(0, -50%); padding:0 50px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { font-size:70px; }
    .visual .control_box { bottom:80px; left:0; transform:translateX(0); padding:0 50px; }
    #visual .scrolldown { right:40px; }
}
@media screen and (max-width:1280px){
    #visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { font-size:60px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:25px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:20px; }
}
@media screen and (max-width:1024px){
    #visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { min-width:15px; font-size:50px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:20px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:18px; }
    .visual .control_box .box .swiper-pagination > span { width:120px; }
}
@media screen and (max-width:640px){
    #visual .swiper-container .swiper-slide .txtbox { padding:0 20px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-1 > span > span { min-width:10px; font-size:32px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:10px; }
    #visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:16px; }
    .visual .control_box { bottom:50px; padding:0 20px; text-align:center }
    .visual .control_box .box .swiper-pagination { justify-content:center; }
    .visual .control_box .box .swiper-pagination > span { width:70px; }
    .visual .swiper-pagination-bullet { padding-top:22px; }
    .visual .swiper-pagination-bullet em { font-size:13px; }
    #visual .scrolldown { right:15px; }
    #visual .scrolldown .txt { right:-15px; font-size:11px; }
    #visual .scrolldown .line { width:1px; height:60px; }
    #visual .scrolldown .line:before { width:1px; height:15px;}
}
@media screen and (max-width:500px){
    .main1,
    #visual,
    #visual .swiper-container,
    #visual .swiper-container .swiper-slide { height:580px; }
}

@keyframes scrollDown {
    0% { top:0; }
    50% { top:calc(100% - 20px); }
    100% { top:0; }
}
@media screen and (max-width:640px){
    @keyframes scrollDown {
        0% { top:0; }
        50% { top:calc(100% - 15px); }
        100% { top:0; }
    }
}


/* title */
.main .topTitle h3 { font-family:var(--mainFont); color:#111; font-size:74px; font-weight:400; line-height:1.3; letter-spacing:-0.02em; }
.main .topTitle h3 > span { font-family:var(--mainFont); }
.main .topTitle p { color:#555; font-size:20px; font-weight:300; line-height:1.3; letter-spacing:-0.02em; }
.main .topTitle-w h3,
.main .topTitle-w p { color:#fff; }
@media screen and (max-width:1640px){
    .main .topTitle h3 { font-size:60px; }
    .main .topTitle p { font-size:19px; }
}
@media screen and (max-width:1280px){
    .main .topTitle h3 { font-size:48px; }
    .main .topTitle p { font-size:18px; }
}
@media screen and (max-width:1024px){
    .main .topTitle h3 { font-size:35px; }
    .main .topTitle p { font-size:16px; }
}
@media screen and (max-width:640px){
    .main .topTitle { text-align:center }
    .main .topTitle h3 { font-size:26px; }
    .main .topTitle p { font-size:15px; }
}

/* animation */
.main .topTitle h3,
.main .topTitle p { overflow:hidden; }
.main .topTitle h3 span,
.main .topTitle p span { opacity:0; display:inline-block; }
.main .aniBox.on .topTitle h3 span { animation:ani_3 0.5s 0.1s; animation-fill-mode:both; }
.main .aniBox.on .topTitle p span { animation:ani_3 0.5s 0.4s; animation-fill-mode:both; }

/* bnt-more */
.main .bnt-more a { position:relative; width:200px; height:65px; border-radius:200px; display:flex; align-items:center; justify-content:center; font-family:var(--mainFont); color:#111; font-size:16px; font-weight:400; line-height:1.3; letter-spacing:-0.02em; transition:all 0.4s; }
.main .bnt-more a:before { content:""; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; border:1px solid #000; transition:all 0.4s; border-radius:200px; opacity:1; }
.main .bnt-more a:after { content:""; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:0; height:0; background:#000 url(/img/main/more_btn.png) center center no-repeat; transition:all 0.4s; border-radius:200px; opacity:0; }
.main .bnt-more a:hover { color:#000 }
.main .bnt-more-w a { color:#fff; }
.main .bnt-more-w a:before { border:1px solid #fff; }
.main .bnt-more-w a:after { background:#fff url(/img/main/more_btn_bk.png) center center no-repeat; }
.main .bnt-more-w a:hover { color:#fff }
.main .bnt-more a:hover:before { width:0; height:0; opacity:0; }
.main .bnt-more a:hover:after { width:130px; height:130px; opacity:1; }
@media screen and (max-width:1400px){
    .main .bnt-more a { width:150px; height:55px; }
    .main .bnt-more a:hover:after { width:100px; height:100px; }
}
@media screen and (max-width:1024px){
    .main .bnt-more a { width:130px; height:50px; font-size:15px; }
    .main .bnt-more a:hover:after { width:80px; height:80px; }
}
@media screen and (max-width:640px){
    .main .bnt-more a { width:120px; height:40px; font-size:14px; }
    .main .bnt-more a:hover:after { width:70px; height:70px; }
}

.main2 .factory-box { position:relative; padding:170px 50px 50px; }
.main2 .factory-box .swiper-container { width:100%; height:calc(100vh - 220px); }
.main2 .factory-box  .swiper-slide { position:relative; width:100%; height:100%; opacity:1; }
.main2 .factory-box  .swiper-slide .box { position:relative; width:100%; height:100%; }
.main2 .factory-box  .swiper-slide .imgbox { position:relative; overflow:hidden; width:100%; height:100%;}
.main2 .factory-box  .swiper-slide .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.main2 .factory-box  .swiper-slide .txtbox { position:absolute; left:50%; bottom:100px; transform:translateX(-50%); max-width:1600px; width:100%; z-index:7; }
.main2 .factory-box  .swiper-slide .txtbox .tit { min-width:20px; font-size:66px; font-weight:400; color:#fff; line-height:1.3; letter-spacing:-0.02em; }
.main2 .factory-box  .swiper-slide .txtbox .tit > span { font-weight:500; opacity:0; }
.main2 .factory-box  .swiper-slide .txtbox .btn { margin-top:60px; }
.main2 .factory-box  .swiper-slide .txtbox .btn > div { display:inline-block; margin-right:2px; }
.main2 .factory-box  .swiper-slide.swiper-slide-active { z-index:10; } 
.main2 .factory-box  .swiper-slide.swiper-slide-active .imgbox:before { content:""; display:block; width:100%; height:100vh; background-image:var(--background-image); background-position:right center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; position:absolute; right:0; top:0; z-index:1; animation:ani_s1 2.5s 0.2s cubic-bezier(.35,.53,.37,.54); animation-fill-mode:both; }
.main2 .factory-box  .swiper-slide.swiper-slide-active .imgbox img { animation:ani_s1_i 3.0s 0.1s; animation-fill-mode:both; }
.main2 .factory-box  .swiper-slide.swiper-slide-active .txtbox .tit > span { animation:ani_5 1.0s 0.1s; animation-fill-mode:both; }
.main2 .factory-box .control_box,
.main2 .factory-box .swiper-pagination-f { display:none }
@media screen and (min-width:2000px){
    .main2 .factory-box  .swiper-slide.swiper-slide-active .imgbox:before { display:none }
}
@media screen and (max-width:1760px){
    .main2 .factory-box  .swiper-slide .txtbox { left:0; bottom:80px; transform:translateX(0); padding:0 50px; }
}
@media screen and (max-width:1640px){
    .main2 .factory-box  .swiper-slide .txtbox .tit { min-width:18px; font-size:50px; }
    .main2 .factory-box  .swiper-slide .txtbox .btn { margin-top:50px; }
}
@media screen and (max-width:1400px){
    .main2 .factory-box { position:relative; padding:150px 30px 30px; }
    .main2 .factory-box .swiper-container { width:100%; height:calc(100vh - 180px); }
}
@media screen and (max-width:1280px){
    .main2 .factory-box  .swiper-slide .txtbox .tit { min-width:16px; font-size:45px; }
    .main2 .factory-box  .swiper-slide .txtbox .btn { margin-top:40px; }
}
@media screen and (max-width:1024px){
    .main2 { padding:0 }
    .main2 .factory-box { position:relative; padding:20px; }
    .main2 .factory-box .swiper-container { width:100%; height:calc(80vh - 140px); }
    .main2 .factory-box  .swiper-slide .txtbox { bottom:40px; padding:0 40px; }
    .main2 .factory-box  .swiper-slide .txtbox .tit { min-width:14px; font-size:36px; }
    .main2 .factory-box  .swiper-slide .txtbox .btn { margin-top:30px; }
}
@media screen and (max-width:640px){
    .main2 .factory-box .swiper-container { width:100%; height:calc(70vh - 140px); }
    .main2 .factory-box  .swiper-slide .txtbox { bottom:40px; padding:0 40px; text-align:center }
    .main2 .factory-box  .swiper-slide .txtbox .tit { min-width:12px; font-size:28px; }
}
@media screen and (max-width:500px){
    .main2 .factory-box .swiper-container { width:100%; height:calc(60vh - 140px); }
}

.main3 .aniBox { padding-top:6%; overflow:hidden }
.main3 .global-map { position:relative; }
.main3 .global-map .topTitle { position:absolute; bottom:60px; left:0; z-index:3 }
.main3 .global-map .map-box .txtbox { fill:none; stroke:none; }
.main3 .global-map .map-box .pin-box { position:relative; cursor:pointer; }
.main3 .global-map .map-box .line-box { height:40px; padding:0 25px; fill:#fff; stroke:#e5e5e5; }
.main3 .global-map .map-box .regionTxt { font-family:var(--mainFont); color:#000; fill:#333; font-size:17px; font-weight:500; text-transform:uppercase; letter-spacing:0.02em; transition:all 0.3s; }
.main3 .global-map .map-box .circle_point { opacity:1; fill:var(--mainColor); }
.main3 .global-map .map-box .circle_motion { fill:var(--mainColor); opacity:0.3; animation:circleMotion 1s 0.5s forwards infinite; }
.main3 .global-map .map-box .c-bg { fill:var(--mainColor); opacity:0.1; animation:circleMotion1 1.0s 0.7s forwards infinite; }
.main3 .global-map .map-box .global-Map_1,
.main3 .global-map .map-box .global-Map_2,
.main3 .global-map .map-box .global-Map_3,
.main3 .global-map .map-box .global-Map_4,
.main3 .global-map .map-box .global-Map_5 { fill:#f1f1f1; transition:all 0.3s; }
.main3 .global-map .map-box .mapbox.on .global-Map_1,
.main3 .global-map .map-box .mapbox.on .global-Map_2,
.main3 .global-map .map-box .mapbox.on .global-Map_3,
.main3 .global-map .map-box .mapbox.on .global-Map_4,
.main3 .global-map .map-box .mapbox.on .global-Map_5 { fill:#aaa; transition:all 0.3s; }
.main3 .global-map .map-box .country-box.on .global-line { stroke:var(--mainColor);}
.main3 .global-map .map-box .country-box.on .regionTxt { fill:var(--mainColor); }
.main3 .global-map .map-box .country-box.on .pin { fill:var(--mainColor); }
.main3 .global-map .map-box .country-box.on .line-box { stroke:var(--mainColor); }
.main3 .global-map .map-box .country-box.on .circle { fill:var(--mainColor); }
.main3 .map-list { display:none }
.main3 .map-list > div { display:none }
.main3 .map-list > .on { display:block }
.main3 .map-list ul { display:flex; flex-wrap:wrap; gap:10px; }
.main3 .map-list ul li { width:calc((100% - 20px) / 3); border:1px solid #e5e5e5; text-align:center; height:35px; font-size:15px; color:#111; font-weight:300; border-radius:5px; display:flex; align-items:center; justify-content:center; }
@media screen and (max-width:1640px){
    .main3 .aniBox { padding-top:5% }
}
@media screen and (max-width:1024px){
    .main3 .aniBox { padding-top:0 }
    .main3 .global-map .map-box .g-logo { transform: scale(1.5) translate(-70px, -30px); } 
    .main3 .global-map .map-box .regionTxt { font-size:20px; font-weight:700 }
    .main3 .global-map .topTitle { bottom:0;}
    .main3 .map-list { display:block }
    .main3 .global-map .topTitle { position:relative; left:unset; bottom:unset; margin-bottom:30px; }
}

@media screen and (max-width:640px){
    .main3 .global-map .map-box .line-box { display:none }
    .main3 .global-map .map-box .regionTxt { font-size:35px; }
    .main3 .global-map .map-box .g-logo { transform: scale(2) translate(-70px, -30px); } 
    .main3 .map-list ul { gap:5px; }
    .main3 .map-list ul li { width:calc((100% - 5px) / 2); height:30px; font-size:14px; }
}
@media screen and (max-width:500px){
    .main3 .global-map .map-box .regionTxt { font-size:40px; }
    .main3 .global-map .map-box .g-logo { transform: scale(2.5) translate(-70px, -30px); } 
}

@keyframes circleMotion {
	0% { transform:scale(0); opacity:0.3; }
	90% { transform:scale(1); opacity:0.3; }
	100% { transform:scale(1); opacity:0.0; }
}
@keyframes circleMotion1 {
	0% { transform:scale(0); opacity:0.1; }
	80% { transform:scale(1); opacity:0.1; }
	100% { transform:scale(1); opacity:0.0; }
}

.main4 { position:relative; background:url(/img/main/collection_bg.jpg) no-repeat center / cover; }
.main4 .aniBox { padding-top:4% }
.main4 .collection-box { position:relative; margin-top:40px; }
.main4 .collection-box .swiper-container { width:100%; }
.main4 .collection-box .swiper-container .swiper-slide { width:100%; overflow:hidden; }
.main4 .collection-box .control_box { position:absolute; z-index:5; left:50%; transform:translateX(-50%); top:-50px; width:100%; max-width:1600px; display:flex; justify-content:flex-end;}
.main4 .collection-box .control_box .box { width:135px; padding-top:14px; }
.main4 .collection-box .control_box .swiper-btn { cursor:pointer; display:block; width:30px; height:30px; position:absolute; top:0; right:25px; background:url(/img/main/swiper-btn.png) no-repeat center; }
.main4 .collection-box .control_box .swiper-button-next-c { right:-6px; transform:rotate(180deg);}
.main4 .collection-box .swiper-pagination-progressbar { position:relative; background:rgba(255,255,255,0.2); height:2px; width:70px; }
.main4 .collection-box .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#fff; }
.main4 .collection-box .box { position:relative; }
.main4 .collection-box .imgbox { position:relative; overflow:hidden; }
.main4 .collection-box .imgbox:before { content:""; display:block; padding-bottom:56.5%; }
.main4 .collection-box .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; transition:all 0.4s; }
.main4 .collection-box .txtbox { position:absolute; left:0; bottom:0; padding:0 0 20px 20px; z-index:2; }
.main4 .collection-box .txtbox strong { color:#fff; font-size:26px; font-weight:400; line-height:1.3; letter-spacing:-0.02em; }
.main4 .collection-box .bnt-more { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3 }
@media screen and (max-width:1640px){
    .main4 .aniBox { padding-top:2% }
    .main4 .collection-box .control_box .box { margin-right:12px; }
}
@media screen and (max-width:1280px){
    .main4 .collection-box { margin-top:30px; }
    .main4 .collection-box .txtbox strong { font-size:22px; }
}
@media screen and (max-width:1024px){
    .main4 .aniBox { padding-top:0 }
    .main4 .collection-box .swiper-container { width:100%; }
    .main4 .collection-box .txtbox strong { font-size:20px; }
}
@media screen and (max-width:640px){
    .main4 .collection-box { padding:0 0 50px; }
    .main4 .collection-box .swiper-container { margin:0 20px; width:calc(100% - 40px);}
    .main4 .collection-box .swiper-container .swiper-slide { width:100%; }
    .main4 .collection-box .txtbox strong { font-size:18px; }
    .main4 .collection-box .control_box { left:0; top:50%; transform:translate(0, -50%); margin-top:-5% }
    .main4 .collection-box .control_box .box { width:100%; padding-top:0; margin-right:0; }
    .main4 .collection-box .control_box .swiper-btn { right:unset; left:5px; background-color:rgba(255,255,255,0.5); height:35px; z-index:5; margin-top:-17px; }
    .main4 .collection-box .control_box .swiper-button-next-c { left:unset; right:5px; }
    .main4 .collection-box .swiper-pagination-progressbar { position:absolute; left:0; bottom:-150px; margin:0 20px; width:calc(100% - 40px); height:1px; }
}
@media screen and (max-width:580px){
    .main4 .collection-box .swiper-pagination-progressbar { bottom:-130px; }
}
@media screen and (max-width:540px){
    .main4 .collection-box .swiper-pagination-progressbar { bottom:-120px; }
}
@media screen and (max-width:470px){
    .main4 .collection-box .swiper-pagination-progressbar { bottom:-110px; }
}
@media screen and (max-width:430px){
    .main4 .collection-box .swiper-pagination-progressbar { bottom:-100px; }
}
@media screen and (max-width:400px){
    .main4 .collection-box .swiper-pagination-progressbar { bottom:-90px; }
}




.main5 .aniBox { padding-top:6%  }
.main5 .aniBox > div { position:relative; }
.main5 .listbox { margin-top:80px; }
.main5 .listbox > ul { display:flex; flex-wrap:wrap; gap:20px; }
.main5 .listbox > ul > li { position:relative; width:calc((100% - 60px) / 4)}
.main5 .listbox .imgbox { position:relative; overflow:hidden; }
.main5 .listbox .imgbox:before { content:""; display:block; padding-bottom:100%; }
.main5 .listbox .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; transition:all 0.4s; }
.main5 .listbox .txtbox { position:absolute; left:0; bottom:0; padding:0 0 20px 20px; z-index:2; }
.main5 .listbox .txtbox strong { color:#fff; font-size:26px; font-weight:400; line-height:1.3; letter-spacing:-0.02em; }
.main5 .listbox > ul > li a:hover .imgbox img { transform:scale(1.15); }
.main5 .bnt-more { position:absolute; right:0; top:30px;} 
@media screen and (max-width:1640px){
    .main5 .aniBox { padding-top:5%  }
    .main5 .bnt-more { right:20px; }
}
@media screen and (max-width:1280px){
    .main5 { padding-top:3% }
    .main5 .aniBox { padding-top:2%  }
    .main5 .listbox { margin-top:40px; }
    .main5 .listbox > ul > li { width:calc((100% - 20px) / 2)}
    .main5 .listbox .imgbox:before { padding-bottom:45%; }
    .main5 .listbox .txtbox strong { font-size:22px; }
}
@media screen and (max-width:1024px){
    .main5 { padding-top:60px }
    .main5 .aniBox > div { padding-top:0  }
    .main5 .bnt-more { right:20px; }
    .main5 .listbox .imgbox:before { padding-bottom:50%; }
    .main5 .listbox .txtbox strong { font-size:20px; }
}
@media screen and (max-width:640px){
    .main5 { padding-top:40px }
    .main5 .listbox > ul { gap:10px; }
    .main5 .listbox > ul > li { width:calc((100% - 10px) / 2)}
    .main5 .listbox { margin-top:30px; }
    .main5 .listbox .imgbox:before { padding-bottom:100%; }
    .main5 .listbox .txtbox strong { font-size:18px; }
    .main5 .bnt-more { position:relative; right:unset; top:unset; margin-top:30px; }
    .main5 .bnt-more a { margin:0 auto; }
}

/* animation */
.main5 .listbox li,
.main5 .bnt-more { opacity:0; }
.main5 .aniBox.on .listbox li { animation:ani_3 0.5s 0.3s; animation-fill-mode:both; }
.main5 .aniBox.on .bnt-more { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; }
@media screen and (max-width:640px){
    .main5 .aniBox.on .bnt-more { animation:ani_4 0.5s 0.8s; animation-fill-mode:both; }
}