@import url("common.css");


/* visual */
#visual{position:relative; width:100%; height:var(--vh); background:var(--black); overflow:hidden;}
#visual .visual-swiper{position:relative; width:100%; height:100%; cursor:default;}
#visual .visual-swiper.swiper-grab-cursor,
#visual .visual-swiper.swiper-grab-cursor .swiper-slide{cursor:default;}
#visual .visual-swiper .swiper-wrapper{height:100%;}
#visual .visual-swiper .swiper-slide{position:relative; width:100%; height:100%; overflow:hidden; transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden;}
#visual .visual-swiper .swiper-slide.swiper-slide-active{z-index: 9;}



#visual .visual-swiper .swiper-slide .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; overflow: hidden;}
#visual .visual-swiper .swiper-slide .v_bg::after{content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 40%, rgb(0,0,0) 100%); opacity:0.5; z-index:3;}
#visual .visual-swiper .swiper-slide .v_bg .bg{display: block; position: absolute; left: 0; top:0; width: 100%; height: 100%; box-sizing: border-box; background-size: cover; background-position: center; background-repeat:no-repeat;}
#visual .visual-swiper .swiper-slide .v_bg img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 0.45s ease-out;}
#visual .visual-swiper .swiper-slide-active .v_bg img{transform: scale(1.08); transition: transform 6.5s cubic-bezier(0.22, 0.61, 0.36, 1);}

#visual.is-resizing .v_bg img,
#visual.is-resizing .v_txt_in h2,
#visual.is-resizing .v_txt_in p,
#visual.is-resizing .v_txt_in .btn-area{transition:none !important;}

#visual .v_txt{position:absolute; left:50%; transform: translate(-50%,-50%); top:52%; z-index:6; box-sizing:border-box; pointer-events:none;}
#visual .v_txt_in{display:flex; flex-direction:column; align-items: center; text-align:center; pointer-events:auto;}
#visual .v_txt_in h2{margin:0 0 30px; color:var(--white); line-height:130%;}
#visual .v_txt_in p{margin:0 0 60px; color:rgba(255,255,255,0.7); line-height:166.67%;}
#visual .v_txt_in .btn-area{position:relative; z-index:6;}

#visual .v_txt_in h2,
#visual .v_txt_in p,
#visual .v_txt_in .btn-area{opacity:0; transition:opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}
#visual .visual-swiper .swiper-slide.swiper-slide-active .v_txt_in h2{opacity:1; transition-delay:0.2s;}
#visual .visual-swiper .swiper-slide.swiper-slide-active .v_txt_in p{opacity:1; transition-delay:0.5s;}
#visual .visual-swiper .swiper-slide.swiper-slide-active .v_txt_in .btn-area{opacity:1; transition-delay:0.7s;}
#visual .visual-swiper .swiper-slide:not(.swiper-slide-active) .v_txt_in h2,
#visual .visual-swiper .swiper-slide:not(.swiper-slide-active) .v_txt_in p,
#visual .visual-swiper .swiper-slide:not(.swiper-slide-active) .v_txt_in .btn-area{transition-delay:0s;}

#visual .v_control{position:absolute; left:50%; bottom:80px; transform:translateX(-50%) translateY(30px); display:flex; align-items:center; gap:20px; box-sizing:border-box; z-index:5; opacity:0; transition:opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events:none;}
#visual.is-ready .v_control{opacity:1; transform:translateX(-50%) translateY(0); transition-delay:0.9s;}
#visual .v_pause,
#visual .v_pagination{pointer-events:auto;}
#visual .v_pause{position:relative; width:20px; height:20px; padding:0; border:0; background:none; cursor:pointer; flex-shrink:0;}
#visual .v_pause i{display:block; width:20px; height:20px; position:relative; font-style:normal;}
#visual .v_pause i::before{content:'\e034'; display:block; width:20px; height:20px; line-height:20px; font-size:20px; text-align:center; font-family:var(--icon); font-weight:400; color:var(--white); position:absolute; left:0; top:0; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;}
#visual .v_pause.is-play i::before{content:'\e037';}
#visual .v_pagination{display:flex; align-items:center; gap:10px;}
#visual .v_pagination-item{width:50px; height:3px; padding:0; border:0; background:none; cursor:pointer; flex-shrink:0;}
#visual .v_pagination-item span{display:block; width:100%; height:3px; background:rgba(255,255,255,0.1); position:relative; overflow:hidden;}
#visual .v_pagination-item span::after{content:''; position:absolute; left:0; top:0; width:var(--progress, 0%); height:100%; background:var(--white);}
#visual .scroll_down{position:absolute; right:50%; margin-right: -900px; bottom:60px; width:36px; height:54px; z-index:5; display:block; overflow:hidden; opacity:0;}
#visual.is-ready .scroll_down{animation:visualScrollFadeIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s forwards;}
#visual .mainVisualScroll{display:block; width:100%; height:100%; border:2px solid var(--white); border-radius:var(--borderR50); box-sizing: border-box; position:relative; animation: scrollDown1 2s ease-in-out infinite;}
#visual .mainVisualScroll::before{content:''; position:absolute; left:50%; top:16px; width:6px; height:6px; border-radius:50%; background:var(--white); margin-left: -3px; animation: scrollDown2 2s ease-in-out infinite;}


@keyframes scrollDown1 {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

@keyframes visualScrollFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scrollDown2 {
    0% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(50px);
    }
}




/* Operational Philosophy */
#philosophy{position:relative;}
#philosophy .philosophy-bg{position:absolute; left:0; bottom: 0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:hidden; opacity:0; visibility:hidden; transition:opacity 3.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 3.5s; background: url('/img/philosophy-bg.png') no-repeat center bottom/cover;}
#philosophy.in-view .philosophy-bg{opacity:1; visibility:visible; transition:opacity 6s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;}

#philosophy .philosophy_in{position:relative; z-index:2; display:flex;}
#philosophy .philosophy_in .philosophy-img,
#philosophy .philosophy_in .philosophy-txt{width: 50%; box-sizing: border-box;}
#philosophy .philosophy-img{position:relative;}
#philosophy .philosophy-img figure{aspect-ratio: 900/800; overflow: hidden; border-radius:var(--borderR20);}
#philosophy .philosophy-img img{display:block; width:100%; height:100%; object-fit:cover; object-position:center center;}
#philosophy .philosophy-txt{display:flex; flex-direction:column; align-items:flex-start; gap:60px; padding:100px 0 0 100px; box-sizing:border-box;}
#philosophy .philosophy-title{display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%;}
#philosophy .philosophy-title .fsE14{color:var(--sub);}
#philosophy .philosophy-title h2{color:var(--black); line-height:122.22%;}


/* THE LATEST NEWS */
#news{overflow:hidden;}
#news .news_in{display:flex; flex-direction:column; align-items:center; gap:60px;}
#news .news_wrap{display:flex; flex-direction:column; align-items:stretch; gap:60px; width:100%;}
#news .news_title{display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; width:100%;}
#news .news_title .fsE14{color:var(--sub);}
#news .news_title h2{color:var(--black);}
#news .news_title p{color:var(--basic);}

#news .news-swiper{width:100%; overflow: visible;}
#news .news-swiper .swiper-slide{height:auto; display:flex; box-sizing:border-box;}
#news .news-item{width:100%; min-width:0; opacity: 0; visibility: hidden; pointer-events: none; transition: all .3s;}
#news .swiper-slide.swiper-slide-visible .news-item{opacity: 1; visibility: visible; pointer-events: auto;}

#news .news-link{display:flex; flex-direction:column; gap:20px; position:relative; width:100%; min-width:0; height:100%; padding:45px 45px 90px; border-radius:var(--borderR20); background:rgba(255,255,255,0.8); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); box-sizing:border-box; overflow:hidden;}
#news .news-link::after{content: ''; display: block; width: 100%; height: 100%; box-sizing: border-box; border:1px solid var(--border); border-radius:var(--borderR20); position: absolute; left: 0; top: 0; z-index: 1; transition: all .3s;}
#news .news-link:hover::after{border-color: var(--main);}
#news .news-link > *{position: relative; z-index: 2;}
#news .news-meta{display:flex; align-items:center; gap:10px;}
#news .news-meta strong{font-weight:700; color:var(--main); transition:color 0.3s;}
#news .news-link:hover .news-meta strong{color:var(--white);}
#news .news-meta time{color:var(--basic); transition:color 0.3s;}
#news .news-link:hover .news-meta time{color:rgba(255,255,255,0.65);}
#news .news-divide{font-family:var(--eng); opacity:0.2; color:var(--black); transition:color 0.3s;}
#news .news-link:hover .news-divide{color:var(--white);}
#news .news-txt{display:flex; flex-direction:column; gap:15px; width:100%; min-width:0;}
#news .news-txt h3{line-height: 1.4em; min-height: 2.8em; color:var(--black); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color 0.3s;}
#news .news-link:hover .news-txt h3{color:var(--white);}
#news .news-txt p{line-height: 1.8em; min-height: 7.2em; color:var(--basic); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; transition:color 0.3s;}
#news .news-link:hover .news-txt p{color:rgba(255,255,255,0.7);}

#news .news-link i{font-style: normal; display: block; width: 38px; height: 38px; position: absolute; right: 35px; bottom: 29px; z-index: 1; transform: rotate(180deg); transition: all .3s;} 
#news .news-link:hover i{ transform: rotate(0); } 
#news .news-link i::before{content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--main); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1); z-index: 1; transition: transform 0.5s;}
#news .news-link:hover i::before{transform: translate(-50%,-50%) scale(300); transition: transform 0.8s;}
#news .news-link i::after{content: '\e145'; display: block; width: 42px; height: 42px; line-height: 42px; font-size: 22px; text-align: center; font-family: var(--icon); position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); font-weight: 400; color: var(--main);  border-radius: 50%; background: var(--white); z-index: 2; opacity: 0; transition: opacity 0.3s;}
#news .news-link:hover i::after{opacity: 1;}


#news .news-control{display:flex; align-items:center; justify-content:center; gap:30px; width:100%;}
#news .news-prev,
#news .news-next{width:58px; height:58px; border:0; border-radius:50%; background:var(--greenBg); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; overflow: hidden; position: relative;}
#news .news-prev::before,
#news .news-next::before{content: ''; display: block; width: 100%; height: 100%; border-radius:50%; background:var(--main); position: absolute; left: 0; top: 0; transition: transform .3s; transform: scale(0);}
#news .news-prev.swiper-button-disabled,
#news .news-next.swiper-button-disabled{opacity:0.35; cursor:default; pointer-events:none;}
#news .news-prev i,
#news .news-next i{display:flex; align-items:center; justify-content:center; width:20px; height:20px; position: relative; z-index: 2;}
#news .news-prev i svg,
#news .news-next i svg{display:block; width:20px; height:auto;}
#news .news-prev i svg{transform:rotate(180deg);}
#news .news-prev i svg path,
#news .news-next i svg path{fill: var(--main); transition: all .3s;}

#news .news-prev:hover:before,
#news .news-next:hover:before{transform: scale(1);}
#news .news-prev:hover i svg path,
#news .news-next:hover i svg path{fill: var(--white); transition: all .3s;}



/*******************************************************************************
    @media 1710px
*******************************************************************************/
@media all and (max-width:1740px){

/* visual */
#visual .scroll_down{right:5%; margin-right: 0;}




/* Operational Philosophy */
#philosophy .philosophy-txt{padding:0 0 0 100px; justify-content: center;}
#philosophy .philosophy-title h2 br{display: none;}

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/* Operational Philosophy */
#philosophy .philosophy-txt{gap:40px; padding:0 0 0 60px;}
#philosophy .philosophy-title h2{font-size: 2.444rem;}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* visual */
#visual .v_txt{}
#visual .v_txt_in h2{margin:0 0 20px; line-height: 125%;}
#visual .v_txt_in p{margin:0 0 40px;}

#visual .v_control{bottom:60px;}
#visual .scroll_down{bottom:40px;}




/* Operational Philosophy */
#philosophy .philosophy-bg{background-position: right bottom; background-size: 200% auto;}
#philosophy .philosophy_in{flex-wrap: wrap;}
#philosophy .philosophy_in .philosophy-img,
#philosophy .philosophy_in .philosophy-txt{width: 100%;}
#philosophy .philosophy-txt{padding:40px 0 0; text-align: center; align-items: center;}
#philosophy .philosophy-title{gap:15px; align-items: center;}


/* THE LATEST NEWS */
#news .news_in{gap:40px;}
#news .news_wrap{gap:40px;}
#news .news_title{gap:15px;}
#news .news-link{padding:35px 35px 90px;}
#news .news-control{gap:20px;}


    

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

    
/* visual */
#visual .v_txt{}
#visual .v_txt_in h2{margin:0 0 10px;}
#visual .v_txt_in p{margin:0 0 30px;}

#visual .v_control{bottom:40px;}
#visual .v_pagination{gap:5px;}
#visual .v_pagination-item{width: 30px;}
#visual .scroll_down{bottom:30px; width:27px; height:40px;}
#visual .mainVisualScroll::before{top:12px; width:4px; height:4px; margin-left: -2px;}




/* Operational Philosophy */
#philosophy .philosophy-img figure{border-radius:var(--borderR10);}
#philosophy .philosophy-txt{gap:30px; padding:30px 0 0;}
#philosophy .philosophy-title{gap:10px;}
#philosophy .philosophy-title h2{font-size: 1.944rem; text-wrap: balance;}



/* THE LATEST NEWS */
#news .news_in{gap:30px;}
#news .news_wrap{gap:30px;}
#news .news_title{gap:10px;}
#news .news_title h2{text-wrap: balance;}
#news .news-item{opacity: 1; visibility: visible;}

#news .news-link{padding:25px 25px 70px; gap:10px; border-radius:var(--borderR10);}
#news .news-link::after{border-radius:var(--borderR10);}
#news .news-meta{gap:5px;}
#news .news-txt{gap:8px;}
#news .news-txt p{-webkit-line-clamp: 3; min-height: 5.4em;}
#news .news-link i{width: 30px; height: 30px; right: 25px; bottom: 25px;} 
#news .news-link i::after{width: 30px; height: 30px; line-height: 30px; font-size: 18px;}

#news .news-control{gap:10px;}
#news .news-prev,
#news .news-next{width:50px; height:50px;}
#news .news-prev i,
#news .news-next i{width:17px; height:17px;}
#news .news-prev i svg,
#news .news-next i svg{width:17px; height:auto;}



}