@import url('common.css');


/* css */
.mTitle-area{padding: 0 0 50px;}
.mTitle-area .eng-title{display: block; font-weight: 700; color: var(--main); padding: 0 0 12px;}
.mTitle-area h2{font-weight: 700; color: var(--black);}
.mTitle-area p{padding: 20px 0 0;}


/* VISUAL */
.visual {position:relative; width:100%; height:100vh; height:100svh; background:var(--white); overflow:hidden;}
.visual .visualSwiper,
.visual .visualSwiper .swiper-slide {width:100%; height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.visual .v-bg {position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.visual .v-bg img {position:absolute; left:50%; top:50%; width:100%; height:100%; max-width:none; transform:translate3d(-50%,-50%,0); object-fit:cover;}

.visual .v_in {position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; max-width:1530px; height:100%;}
.visual .v_in > div{width: 50%;}
.visual .txt-area {display:flex; flex-direction:column; gap:80px; align-items:flex-start; min-width:0;}
.visual .txt-area .tit-area {display:flex; flex-direction:column; gap:20px; width:100%;}
.visual .txt-area .tit-area h2 {width:100%; color:var(--black); opacity:0; transform:translate3d(0,40px,0);}
.visual .txt-area .tit-area h3 {width:100%; color:var(--black); opacity:0; transform:translate3d(0,40px,0);}
.visual .txt-area .tit-area p {width:100%; color:var(--basic); opacity:0; transform:translate3d(0,40px,0);}
.visual .txt-area .more-btn {opacity:0; transform:translate3d(0,30px,0);}
.visual .img-area {display:flex; align-items:center; justify-content:center;}
.visual .img-area .v-pro {display:block; aspect-ratio:765/765; opacity:0; transform:translate3d(50px,0,0);}
.visual .img-area .v-pro img {display:block; width:100%; height:100%; object-fit:contain;}
.visual .swiper-slide-active .txt-area .tit-area h2 {animation:visualInUp .9s cubic-bezier(0.22,1,0.36,1) .12s forwards;}
.visual .swiper-slide-active .txt-area .tit-area h3 {animation:visualInUp .9s cubic-bezier(0.22,1,0.36,1) .28s forwards;}
.visual .swiper-slide-active .txt-area .tit-area p {animation:visualInUp .9s cubic-bezier(0.22,1,0.36,1) .42s forwards;}
.visual .swiper-slide-active .txt-area .more-btn {animation:visualInUp .8s cubic-bezier(0.22,1,0.36,1) .58s forwards;}
.visual .swiper-slide-active .img-area .v-pro {animation:visualInRight 1s cubic-bezier(0.22,1,0.36,1) .2s forwards;}
@keyframes visualInUp {
	0% {opacity:0; transform:translate3d(0,40px,0);}
	100% {opacity:1; transform:translate3d(0,0,0);}
}
@keyframes visualInRight {
	0% {opacity:0; transform:translate3d(50px,0,0);}
	100% {opacity:1; transform:translate3d(0,0,0);}
}
@media (prefers-reduced-motion:reduce) {
	.visual .txt-area .tit-area h2,
	.visual .txt-area .tit-area h3,
	.visual .txt-area .tit-area p,
	.visual .txt-area .more-btn,
	.visual .img-area .v-pro {opacity:1; transform:none; animation:none !important;}
}

.visual .swiper-pagination {bottom:45px; left:50%; transform:translateX(-50%); width:auto !important; display:flex; gap:10px; align-items:center;}
.visual .swiper-pagination-bullet {width:14px; height:14px; margin:0 !important; background:var(--black); opacity:0.15; border-radius:20px;}
.visual .swiper-pagination-bullet-active {width:50px; background:var(--main); opacity:1;}
.visual .scroll-down {position:absolute; right:50%; margin-right: -795px; bottom:50px; z-index:2; display:flex; flex-direction:column; align-items:center; animation: scrollDown1 1.5s ease-in-out infinite;}
.visual .scroll-down .mouse {position:relative; width:22px; height:36px; border:2px solid var(--black); border-radius:20px; box-sizing:border-box; overflow: hidden;}
.visual .scroll-down .mouse i {position:absolute; left:50%; top:21px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--black); animation: scrollDown2 1.5s ease-in-out infinite;}
.visual .scroll-down em,
.visual .scroll-down > span.fsE12 {margin-top:4px; font-weight: 500; font-family: var(--eng); color:var(--black); font-style:normal; text-align:center; white-space:nowrap;}


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

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


/* PRODUCT */
.product {position:relative; background:var(--white);  overflow:hidden;}
.product .product_in {display:flex; flex-direction:column; align-items:flex-start;}
.product .mTitle-area {width:100%; text-align:center;}
.product .list-area {display:flex; flex-direction:column; gap:30px; width:100%;}
.product .productSwiper {width:100%; overflow: visible;}
.product .productSwiper .swiper-slide {height:auto;}
.product .productSwiper .swiper-slide a {display:flex; flex-direction:column; gap:15px; align-items:center; height:100%; border-radius:var(--borderR30); background:var(--white); overflow:hidden; box-sizing:border-box; position: relative; transition: all .3s; opacity: 0; pointer-events: none;}
.product .productSwiper .swiper-slide.swiper-slide-visible a{opacity: 1; pointer-events: auto;}
.product .productSwiper .swiper-slide a::before{content: ''; display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; inset: 0; border: 1px solid var(--border); z-index: 2;}
.product .productSwiper .swiper-slide a::after{content: ''; display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; inset: 0; border: 3px solid var(--main); z-index: 2; opacity: 0;  transition: all .3s;}
.product .productSwiper .swiper-slide a:hover{box-shadow:  var(--mainShadow);}
.product .productSwiper .swiper-slide a:hover::after{opacity: 1;  transition: all .3s;}
.product .productSwiper .thumb {display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:360/360; overflow:hidden;}
.product .productSwiper .thumb img {display:block; width:100%; height:100%; object-fit:contain;}
.product .productSwiper .desc {display:flex; flex-direction:column; gap:20px; align-items:flex-start; width:100%; padding:0 35px 35px;}
.product .productSwiper .desc .tit-area {display:flex; flex-direction:column; gap:8px; width:100%;}
.product .productSwiper .desc .tit-area h3 {font-family:var(--eng); font-weight:700; line-height:120%; color:var(--black); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.product .productSwiper .desc .tit-area p {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.6em; height:3.2em; color:var(--basic);}

.product .btn-area {display:flex; gap:30px; align-items:center; width:100%;}
.product .progress {position:relative; flex:1 0 0; min-width:0; height:2px; background:rgba(17,17,17,0.1);}
.product .progress .bar {position:absolute; left:0; top:0; width:0; height:2px; background:var(--main); transition:width .4s ease;}
.product .progress .bar.is-dragging {transition:none;}
.product .progress .bar::after {content:""; position:absolute; right:-4px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--main);}

.product .arrow {display:flex; gap:2px; align-items:center; flex-shrink:0;}
.product .arrow button {display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:var(--borderR60); background:var(--grayBg); overflow:hidden; transition:all .3s;}
.product .arrow button::before {font-family:var(--icon); font-size:24px; font-style:normal; line-height:100%; color:var(--black); transition:color .3s;}
.product .arrow .prev::before {content:"\e2ea";}
.product .arrow .next::before {content:"\e5e1";}
.product .arrow button:hover {background:var(--main); box-shadow:  var(--mainShadow);}
.product .arrow button:hover::before {color:var(--white);}
.product .arrow button.swiper-button-disabled {opacity:0.35; cursor:default;}
.product .arrow button.swiper-button-disabled:hover {background:var(--grayBg);}
.product .arrow button.swiper-button-disabled:hover::before {color:var(--black);}

/* ABOUT */
.about {position:relative; display:flex; justify-content:center; align-items:center; background:var(--bk000); overflow:hidden;}
.about .about-bg {position:absolute; inset:0; overflow:hidden; z-index: 0;}
.about .about-bg img {position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; object-fit:cover;}
.about .mTitle-area {position:relative; z-index:2; text-align:left; padding: 0;}
.about .mTitle-area .eng-title,
.about .mTitle-area h2,
.about .mTitle-area p {text-align:left;}
.about .mTitle-area h2 {color:var(--white);}
.about .mTitle-area p {color:var(--basicW); text-wrap: balance;}

/* INDUSTRY */
.industry {position:relative; background:var(--white);}
.industry .industry-bg {position:absolute; left:0; top:0; bottom:0; width:100%; height: 100%; pointer-events:none;}
.industry .industry-bg img {position:sticky; top:0; display:block; width:100%; height:100vh; max-width:none; object-fit:cover;}
.industry .industry_in {position:relative; z-index:1; display:flex; gap:30px; align-items:flex-start;}
.industry .txt-area {width: 510px; position:sticky; top:120px; text-align:left;}

.industry .con-area {flex: 1; flex-shrink:0;}
.industry .industry_list {display:flex; flex-wrap:wrap; gap:30px; align-content:flex-start;}
.industry .industry_list li {width:calc((100% - 60px)/3); border-radius:var(--borderR30); overflow:hidden;}
.industry .industry_list li a {position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio: 330/430;}
.industry .industry_list .thumb {position:absolute; inset:0;}
.industry .industry_list .thumb img {display:block; width:100%; height:100%; object-fit:cover;}
.industry .industry_list .thumb::after {content:""; position:absolute; inset:0; background:linear-gradient(to top,#000,rgba(0,0,0,0)); opacity:0.4;}
.industry .industry_list .desc {position:relative; z-index:1; display:flex; flex-direction:column; gap:5px; align-items:flex-start; width:100%; padding:40px;}
.industry .industry_list .desc h3 {line-height: 130%; color:var(--white);}
.industry .industry_list .desc p {line-height: 160%; color:var(--basicW);}
.industry .industry_list li.logo .thumb::after{display: none;}


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


/* VISUAL */
.visual .scroll-down {right:5%; margin-right: 0;}

}


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

.visual .txt-area .tit-area p.fs20 br{display: block;}

}


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

.visual .txt-area .tit-area p.fs20 br {display:none;}

}


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


/* INDUSTRY */
.industry .txt-area {width: 30%;}
.industry .mTitle-area h2 br {display: none;}
.industry .industry_list .desc {padding:30px;}


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


/* VISUAL */
.visual .txt-area .tit-area h2 br{display: none;}

.visual .swiper-pagination {bottom:30px;}
.visual .swiper-pagination-bullet {width:10px; height:10px;}
.visual .scroll-down {bottom:30px;}

/* INDUSTRY */
.industry .txt-area {width: 40%;}

.industry .industry_list {gap:20px;}
.industry .industry_list li {width:calc((100% - 20px)/2);}
.industry .industry_list li.logo{display: none;}




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


/* css */
.mTitle-area{padding: 0 0 40px;}
.mTitle-area .eng-title{padding: 0 0 8px;}
.mTitle-area p{padding: 15px 0 0;}


/* VISUAL */
.visual .txt-area {gap:40px;}
.visual .txt-area .tit-area {gap:10px;}

.visual .swiper-pagination {left: 5%; transform: translateX(0); bottom:20px;}
.visual .scroll-down {bottom:20px;}

/* PRODUCT */
.product .list-area {gap:20px;}
.product .productSwiper .swiper-slide a {border-radius:var(--borderR20);}

.product .productSwiper .desc {padding:0 25px 25px;}

.product .btn-area {gap:20px;}

.product .arrow button {width:50px; height:50px;}
.product .arrow button::before {font-size:20px;}



/* INDUSTRY */
.industry .industry_in {gap:0; flex-wrap: wrap;}
.industry .txt-area {width: 100%; position:relative; top:auto;}
.visual .txt-area .tit-area h2 br{display: none;}
.industry .industry_list {gap:10px;}
.industry .industry_list li {width:calc((100% - 20px)/3); border-radius:var(--borderR20);}
.industry .industry_list li.logo{display: block;}
.industry .industry_list .desc {padding:20px;}


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


/* css */
.mTitle-area{padding: 0 0 30px;}
.mTitle-area .eng-title{padding: 0 0 5px;}
.mTitle-area p{padding: 10px 0 0;}



/* VISUAL */
.visual .v_in {flex-wrap: wrap; align-content: center; gap: 10px;}
.visual .v_in > div{width: 100%;}
.visual .txt-area {gap:20px; text-align: center; align-items: center;}
.visual .txt-area .tit-area{gap: 5px;}
.visual .txt-area .tit-area h2{line-height: 130%;}
.visual .txt-area .tit-area p{font-size: 0.929rem;}
.visual .img-area {max-width: 70%; margin: 0 auto;}
.visual .swiper-pagination-bullet {width:7px; height:7px;}
.visual .swiper-pagination-bullet-active {width:30px;}
.visual .scroll-down .mouse {width:18px; height:30px;}
.visual .scroll-down .mouse i {top:16px;}

/* PRODUCT */
.product .list-area {gap:15px;}
.product .productSwiper .swiper-slide a {gap:10px; border-radius:var(--borderR15);}

.product .productSwiper .desc {gap:15px; padding:0 20px 20px;}
.product .productSwiper .desc .tit-area {gap:5px;}

.product .btn-area {gap:15px;}

.product .arrow button {width:40px; height:40px;}
.product .arrow button::before {font-size:16px;}



/* INDUSTRY */
.industry .industry_list li {width:calc((100% - 10px)/2); border-radius:var(--borderR15);}
.industry .industry_list li.logo{display: none;}


}


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

/* INDUSTRY */
.industry .industry_list li {width: 100%;}

}