@import url("common.css");

/* Ç®ÆäÀÌÁö */
.section{display: block; width: 100%; height: 100vh !important; overflow: hidden !important;}
.section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}

.footer.section{height: auto !important;}
.footer.section .fp-overflow{height: auto !important; padding: 100px 0;}



/* css °øÅë */
.line1{display: block; width: 1px; height: 100%; background:var(--border); position: absolute;}
.line2{display: block; width: 100%; height: 1px; background:var(--border); position: absolute;}
.dot{display: block; width: 9px; height: 9px; box-sizing:border-box; border:3px solid var(--main); background:var(--white); position: absolute;}


/* È¿°ú */
.ani_effect {transform:translateY(60px); opacity: 0; transition: transform 0.5s ease-out, opacity 0.5s ease; }
.ani_effect.delay1 {transition-delay:0.6s;}
.ani_effect.delay2 {transition-delay:0.9s;}
.ani_effect.delay3{transition-delay:1.2s;}
.ani_effect.delay4{transition-delay:1.5s;}
.ani_effect.delay5{transition-delay:1.8s;}
.ani_effect.delay6{transition-delay:2.1s;}
.section.action .ani_effect{transform:translateY(0); opacity: 1;}

.mtxt_eff{overflow: hidden;}
.mtxt_eff span{display: block; transform: translateY(100%); opacity: 0; transition: transform 0.5s ease-out, opacity 0.5s ease;}
.section.action .mtxt_eff span{transform: translateY(0); opacity: 1;}

.mtxt_eff.delay0 span{transition-delay:0.3s;}
.mtxt_eff.delay1 span{transition-delay:0.6s;}
.mtxt_eff.delay2 span{transition-delay:0.9s;}



/* MAIN */
.visual{position: relative; width: 100%; height: var(--fullvh) !important; overflow: hidden; background:var(--bk000);}
.visual .fp-overflow{width: 100%; height: var(--fullvh) !important;}
.visual .visual_in{position: relative; width: 100%; height: 100%;}
.visual .visual_roll{position: relative; width: 100%; height: 100%;}
.visual .visual_roll .roll{position:absolute; left:0; top:0; width: 100%; height: var(--fullvh) !important;}
.visual .visual_roll .roll .v_bg{position: absolute; left:0; top:0; width: 100%; height: 100%;}
.visual .visual_roll .roll .v_bg .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; transform: scale(1.1,1.1); transition:transform 2s ease-in-out;}
.visual.action .visual_roll .roll.action .v_bg .bg{transform: scale(1);}
.visual .visual_roll .roll .v_bg .bg.mo{display: none; z-index: 9;}

.visual .v_tit{position: absolute; left:50%; bottom: 130px; z-index: 9999; transform:translateX(-50%); text-align:left; box-sizing:border-box; padding: 0 200px 0 0;}
.visual .v_tit .fs70{color:var(--white);}
.visual .v_tit .fs20{color:var(--white); margin-top: 20px; text-wrap: balance;}

.visual .v_tit .fs70,
.visual .v_tit .fs20{overflow: hidden;}
.visual .v_tit .fs70 span,
.visual .v_tit .fs20 span{display: block; transform: translateY(100%); opacity: 0;}
.visual .v_tit .fs70 span{transition: transform 0.5s .3s ease-out, opacity 0.5s .3s ease;}
.visual .v_tit .fs20 span{transition: transform 0.5s .6s ease-out, opacity 0.5s .6s ease;}
.visual.action .v_tit .fs70 span,
.visual.action .v_tit .fs20 span{transform: translateY(0); opacity: 1;}

.visual .slick-arrow{display: block; cursor:pointer; border:0; padding:0; width:60px; height:60px; border-radius:50%; background:none; backdrop-filter: blur(25px); font-size:0; position: absolute; margin-right: -675px; right: 50%; bottom: 130px; z-index: 9999; opacity: 0; transition: opacity 1s .6s ease;}
.visual.action .slick-arrow{opacity: 1;}
.visual .slick-prev{transform:translateX(-70px);}
.visual .slick-next{}
.visual .slick-arrow::after{display:block; width:100%; height:100%; line-height:60px; font-size:28px; text-align:center; font-weight:400; color:var(--white); position: absolute; left:0; top:0; font-family:var(--icon); border-radius:50%; background:rgba(255,255,255,.1); transition:all .3s ease;}
.visual .slick-arrow:hover::after{background:var(--main);}
.visual .slick-prev::after{content:'\e5c4';}
.visual .slick-next::after{content:'\e5c8';}


/* COMPANY */
.company{}
.company .line1{left: 50%; margin-left: -675px; top:0; height: 0; transition:height 0.5s 0.5s linear;}
.company.action .line1{height: 100%;}
.company .line2{left: 0; top:125px; width: 0; transition:width 0.5s 1s linear;}
.company.action .line2{width: 100%;}
.company .dot{left: 50%; margin-left: -679px; top:121px; opacity: 0; transition:opacity 0.5s 1.5s linear;}
.company.action .dot{opacity: 1;}

.company .company_in{display: flex;}
.company .company_in article{box-sizing:border-box;}
.company .company_in .txt_area{width: 60%; padding: 0 60px 0 85px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.company .company_in .txt_area .eng_tit{}
.company .company_in .txt_area .fs62{}
.company .company_in .txt_area .fs18{margin-top: 20px; text-wrap: balance;}
.company .company_in .txt_area .btn_area{margin-top: 50px;}
.company .company_in .img_area{width: 40%;}
.company .company_in .img_area .company_bg{background:url('/img/company_img.jpg') no-repeat center/cover; aspect-ratio:4/5; overflow: hidden; position: relative;}
.company .company_in .img_area .company_bg::after{content:''; display: block; width: 100%; height: 100%; background:var(--white); position: absolute; right:0; top:0; transition:width 0.5s 1s ease;}
.company.action .company_in .img_area .company_bg::after{width: 0;}


/* PRODUCTS */
.products .fp-overflow{justify-content: flex-end;}
.products .tit_area{text-align:center; padding-bottom: 50px;}
.products ul{display: flex;}
.products ul li{flex:1;}
.products ul li a{display: block; position: relative;}
.products ul li a .thumb{overflow: hidden; width: 100%; height: 60vh; position: relative;}
.products ul li a .thumb::before{content:''; display:block; width:100%; height:100%; background:var(--bk000); opacity: 0.5; position:absolute; left:0; top:0; z-index: 1;}
.products ul li a .thumb::after{content:''; display:block; width:100%; height:0; background: linear-gradient(0deg, #013B7D 0%, rgba(1, 59, 125, 0.00) 100%); position:absolute; left:0; bottom:0; z-index: 2; opacity: 1; transition:all .4s ease;}
.products ul li a:hover .thumb::after{height: 100%;}
.products ul li a .thumb img{display: block; width: 100%; height: 100%; object-fit:cover;}
.products ul li a .desc{position: absolute; left:0; bottom: 0; width: 100%; height: 100%; padding: 80px 10px; box-sizing:border-box; text-align:center; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
.products ul li a .desc .text{transition:all .4s ease; transform:translateY(90px); min-height:120px;}
.products ul li a:hover .desc .text{transform:translateY(0);}
.products ul li a .desc .fs24{color:var(--white); font-size:1.222rem; text-wrap: balance;}
.products ul li a .desc .fs18{color:rgba(255,255,255,.7); margin:10px 0 0; transition:all .4s ease; opacity: 0; text-wrap: balance;}
.products ul li a:hover .desc .fs18{opacity: 1;}
.products ul li a .desc .arrow{display:block; width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.3); position: relative; box-sizing:border-box; margin: 50px auto 0; transition:all .4s ease;}
.products ul li a .desc .arrow::after{content:'\e5c8'; display:block; width:100%; height:100%; font-size:19px; line-height: 50px; font-weight: 500; font-family:var(--icon); color:var(--white); transition:all .4s ease;}
.products ul li a:hover .desc .arrow{background:var(--white); border-color:var(--white);}
.products ul li a:hover .desc .arrow::after{transform:rotate(-45deg); color:var(--main);}




/* R&D */
.rnd{}
.rnd .line1{left: 55%; top:0; height: 0; transition:height 0.5s 0.5s linear;}
.rnd.action .line1{height: 100%;}
.rnd .line2{left: 0; top:15%; width: 0; transition:width 0.5s 1s linear;}
.rnd.action .line2{width: 100%;}
.rnd .dot{left: 55%; top:15%; margin-left: -4px; margin-top: -4px; opacity: 0; transition:opacity 0.5s 1.5s linear;}
.rnd.action .dot{opacity: 1;}
.rnd .rnd_bg{width: 55%; height: 100%; position: absolute; left: 0; bottom: 0; background:url('/img/rnd_bg.png') no-repeat center bottom/cover; opacity: 0; transition:opacity 1s 1s linear;}
.rnd.action .rnd_bg{opacity: 1;}
.rnd .rnd_in{position: relative; z-index: 2;}
.rnd .rnd_in .tit_area{max-width:50%;}
.rnd .rnd_in .tit_area .eng_tit{}
.rnd .rnd_in .tit_area .fs62{font-size:3.056rem;}
.rnd .rnd_in .tit_area .fs18{margin-top:20px; text-wrap: balance;}
.rnd .rnd_in .tit_area .fs18 br{display: block;}
.rnd .rnd_in .rnd_quick{display: flex; justify-content: flex-end; gap:20px; margin-top:40px;}
.rnd .rnd_in .rnd_quick li{width: 140px; transform:translateX(100px); opacity: 0; transition:all 0.5s ease;}
.rnd .rnd_in .rnd_quick li:nth-child(1){transition-delay:1s;}
.rnd .rnd_in .rnd_quick li:nth-child(2){transition-delay:1.3s;}
.rnd .rnd_in .rnd_quick li:nth-child(3){transition-delay:1.6s;}
.rnd.action .rnd_in .rnd_quick li{transform:translateX(0); opacity: 1;}
.rnd .rnd_in .rnd_quick li a{display: block; text-align:center;}
.rnd .rnd_in .rnd_quick li a .icon{display:block; width:140px; height:140px; border-radius:var(--borderR15); background-color:var(--grayBg); background-repeat:no-repeat; background-position:center; background-size:contain; transition:all .4s ease; overflow: hidden;}
.rnd .rnd_in .rnd_quick li a:hover .icon{background-color:var(--main);}
.rnd .rnd_in .rnd_quick li:nth-child(1) a .icon{background-image:url('/img/rnd_icon01.png');}
.rnd .rnd_in .rnd_quick li:nth-child(2) a .icon{background-image:url('/img/rnd_icon02.png');}
.rnd .rnd_in .rnd_quick li:nth-child(3) a .icon{background-image:url('/img/rnd_icon03.png');}
.rnd .rnd_in .rnd_quick li:nth-child(1) a:hover .icon{background-image:url('/img/rnd_icon01_on.png');}
.rnd .rnd_in .rnd_quick li:nth-child(2) a:hover .icon{background-image:url('/img/rnd_icon02_on.png');}
.rnd .rnd_in .rnd_quick li:nth-child(3) a:hover .icon{background-image:url('/img/rnd_icon03_on.png');}
.rnd .rnd_in .rnd_quick li a .fs18{font-weight:500; color:var(--black); padding: 15px 0 0; transition:all .4s ease;}
.rnd .rnd_in .rnd_quick li a:hover .fs18{color:var(--main);}



/* ESG */
.esg{}
.esg .bg{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; z-index:-1; transform: scale(1.1,1.1); transition:transform 2s ease-in-out;}
.esg.action .bg{transform: scale(1);}
.esg .esg_in{}
.esg .esg_in .fs72{color:var(--white);}
.esg .esg_in .fs18{margin-top: 20px; color:rgba(255,255,255,.8); width: 100%; text-wrap: balance; max-width:50%;}
.esg .esg_in .btn_area{margin-top: 50px;}



/* CLIENT */
.client{background:var(--white);}
.client .tit_area{text-align:center; padding: 0 0 60px;}
.client .tit_area .ci{width: 115px; height: auto; margin: 0 auto 12px;}
.client .tit_area .ci img{width: 100%; height: auto;}
.client .tit_area .fs72{}
.client .tit_area .fs18{margin-top: 20px; text-wrap: balance;}
.client .client_wrap{display: flex; position: relative;}
.client .client_wrap::before{content:''; display: block; width: 300px; height: 100%; background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; left:0; top:0; z-index: 5;}
.client .client_wrap::after{content:''; display: block; width: 300px; height: 100%; background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; right:0; top:0; z-index: 5;}
.client .client_roll{display: flex;}
.client .client_roll li{margin: 0 30px 0 0; width: 246px;}
.client .client_roll li a{display:block; aspect-ratio:2/0.75; overflow: hidden; position: relative;}
.client .client_roll li a img{width:100%; height:100%; object-fit:contain; opacity: 0.5; -webkit-filter: grayscale(1); filter: grayscale(1); filter: gray; transition:all .3s linear;}
.client .client_roll li a:hover img{opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); filter: none; }
.client .client_roll li a p{position: absolute; left:0; top:50%; transform:translateY(-50%); width: 100%; box-sizing:border-box; padding: 0 20px; font-size:1.111rem; color:#999; letter-spacing:var(--letter-spacing-default); line-height: 120%; font-weight:700; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; text-align:center; z-index: 2;}

@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}



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

/* PRODUCTS */
.products{}
.products ul li a .desc .fs18 br{display: none;}



}

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


/* MAIN */
.visual .slick-arrow{margin-right: 0; right: 5%;}

/* COMPANY */
.company{}
.company .line1{left: 5%; margin-left: 0;}
.company .dot{left: 5%; margin-left: -4px;}


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

/* MAIN */
.visual{}
.visual .v_tit{padding: 0;}
.visual .v_tit .fs20{font-size:1rem;}

.visual .slick-arrow{bottom: 30px;}


/* COMPANY */
.company{}
.company .company_in .txt_area{padding: 0 50px;}


/* R&D */
.rnd{}
.rnd .line1{left: 95%;}
.rnd .dot{left: 95%;}
.rnd .rnd_bg{width: 95%;}
.rnd .rnd_in .rnd_quick{justify-content: flex-start;}
.rnd .rnd_in .tit_area{max-width:100%;}
.rnd .rnd_in .tit_area .fs62{font-size:2.5rem;}


.products ul li a .desc .text{transform:translateY(120px); min-height:230px;}


}

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


.footer.section .fp-overflow{padding: 80px 0;}


/* MAIN */
.visual{}
.visual .slick-arrow{width:50px; height:50px;}
.visual .slick-prev{transform:translateX(-60px);}
.visual .slick-next{}
.visual .slick-arrow::after{line-height:50px; font-size:24px;}



/* COMPANY */
.company{}
.company .line2{top:100px;}
.company .dot{top:96px;}
.company .company_in .txt_area{padding: 0 30px;}
.company .company_in .txt_area .eng_tit{}
.company .company_in .txt_area .fs62{}
.company .company_in .txt_area .fs18{margin-top: 10px;}
.company .company_in .txt_area .btn_area{margin-top: 30px;}


/* PRODUCTS */
.products{}
.products .fp-overflow{justify-content: center;}
.products .products_in{padding: 0;}
.products .tit_area{padding-bottom: 20px;}
.products ul{display: block; width: 90%; margin: 0 auto;}
.products ul li{flex:auto; width: 100%;}
.products ul li + li{margin-top: 1px;}
.products ul li a .thumb{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
.products ul li a .desc{padding: 30px 30px; position: relative; left: auto; bottom: auto; display: flex; gap:30px; align-items:center; justify-content:space-between; flex-direction: row;} 
.products ul li a .desc .text{transform:translateY(0); min-height:auto; text-align:left; width: calc(100% - 80px);}
.products ul li a .desc .fs18{opacity: 1; margin: 4px 0 0;}
.products ul li a .desc .arrow{width:50px; height:50px; margin: 0;}
.products ul li a .desc .arrow::after{font-size:19px; line-height: 50px; }





/* R&D */
.rnd{}
.rnd .rnd_in .rnd_quick li{width: 120px;}
.rnd .rnd_in .rnd_quick li a .icon{width:120px; height:120px;}
.rnd .rnd_in .tit_area .fs62{font-size:2.222rem;}



/* CLIENT */
.client .tit_area{padding: 0 0 40px;}
.client .tit_area .ci{width: 100px; height: auto;}
.client .client_wrap{}
.client .client_wrap::before{width: 200px;}
.client .client_wrap::after{width: 200px;}
.client .client_roll{}
.client .client_roll li{margin: 0 20px 0 0; width: 200px;}
.client .client_roll li a p{padding: 0 10px;}


.esg .esg_in .fs18{max-width:70%;}

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

.footer.section .fp-overflow{padding: 50px 0;}

/* MAIN */
.visual{}
.visual .visual_roll .roll .v_bg .bg.mo{display: block;}
.visual .v_tit{bottom: 100px;}
.visual .v_tit .fs20{margin-top: 10px;}

.visual .slick-arrow{width:45px; height:45px;}
.visual .slick-prev{transform:translateX(-50px);}
.visual .slick-next{}
.visual .slick-arrow::after{line-height:45px; font-size:20px;}

/* COMPANY */
.company .fp-overflow{justify-content: flex-end;}
.company .line1,
.company .line2,
.company .dot{display:none;}
.company .company_in{flex-wrap:wrap; width: 100%;}
.company .company_in article{}
.company .company_in .txt_area{width: 100%; padding: 70px 5% 0; height: 50vh;}
.company .company_in .img_area{width: 100%;}
.company .company_in .img_area .company_bg{aspect-ratio: auto; width: 100%; height: 50vh;}


/* PRODUCTS */
.products .products_in{}
.products ul li a .desc{padding: 20px 20px; gap:20px;} 
.products ul li a .desc .text{width: calc(100% - 60px);}
.products ul li a .desc .fs18{display: none;}
.products ul li a .desc .arrow{width:34px; height:34px; margin: 0;}
.products ul li a .desc .arrow::after{font-size:14px; line-height: 34px; }



/* R&D */
.rnd{}
.rnd .line1,
.rnd .line2,
.rnd .dot{display:none;}
.rnd .rnd_bg{width: 100%; background-image:url('/img/rnd_bg_m.png'); background-size:100% auto;}
.rnd .rnd_in{transform:translateY(-80px);}
.rnd .rnd_in .tit_area .fs18{margin-top:10px;}
.rnd .rnd_in .tit_area .fs18 br{display: none;}
.rnd .rnd_in .rnd_quick{gap:10px; margin-top:35px; justify-content: flex-start;}
.rnd .rnd_in .rnd_quick li{width: 90px;}
.rnd .rnd_in .rnd_quick li a .icon{width:90px; height:90px;}
.rnd .rnd_in .rnd_quick li a .fs18{padding: 10px 0 0;}




/* ESG */
.esg{}
.esg .esg_in{text-align:center;}
.esg .esg_in .fs18{margin-top: 10px; max-width:100%;}
.esg .esg_in .btn_area{margin-top: 30px;}




/* CLIENT */
.client .tit_area{padding: 0 0 30px;}
.client .tit_area .ci{width: 80px; height: auto; margin: 0 auto 8px;}
.client .tit_area .fs72{}
.client .tit_area .fs18{margin-top: 10px;}
.client .client_wrap{}
.client .client_wrap::before{width: 50px;}
.client .client_wrap::after{width: 50px;}
.client .client_roll{}
.client .client_roll li{margin: 0 10px 0 0; width: 160px;}


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

/* MAIN */
.visual{}
.visual .v_tit .fs70{font-size:2rem;}



}