@import url("common.css");


/*** css 공통 ***/
.moreBtn {margin:60px 0 0;}



/* 화살표 */
.slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; transition:all .3s linear; z-index: 9999; background:transparent; width:52px; aspect-ratio: 1 / 1;  border:1px solid rgba(255,255,255,0.2); border-radius:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.slick-arrow::before {content:'\e5c4'; font-family:var(--icon); font-size:24px; line-height:1; display:block; color:var(--white); transition:all 0.3s; font-weight:300;}
.slick-arrow:hover {border-color:var(--white); background:var(--white);}
.slick-arrow:hover::before {color:var(--main); transition:all 0.3s;}
.slick-next {transform: scaleX(-1);}


.scroll_down{display:inline-block; text-align:center; position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index: 9999; transition:all .3s linear;}
.scroll_down span{display:block; font-size:32px; position:relative; color:var(--white);  transition:all .3s linear;  font-weight:500;}
/* .scroll_down:hover {color:var(--main) !important;}
.scroll_down:hover span {color:var(--main) !important;} */



/*** Visual ***/
#visual{width:100%; height: var(--fullvh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--fullvh);}
#visual .visual_in .roll .v_txt{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index: 9999;}
#visual .visual_in .roll .v_txt .fs70 {color:var(--white); font-family:var(--eng); letter-spacing:0; transition:all .6s 0.1s linear; transform:translateY(60px); opacity:0;}
#visual .visual_in .roll .v_txt .fs70.kor{font-family: var(--pretendard); font-weight: 700; line-height: 120%;}
#visual .visual_in .roll .v_txt .fs20 {color:var(--basic-w); transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0; margin:25px 0 0;}


#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual .visual_in .roll .v_bg .bg img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1);}
#visual .visual_in .roll .v_bg .bg.mo {display:none !important}
#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}
/* 화살표 */


/* 도트 */
#visual .v_control {position:absolute; bottom:60px; left:50%; z-index:99; transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
#visual .v_control .control_box {}
#visual .v_control .control_box .control_arr {order:2; display:flex; flex-wrap:wrap; align-items:center; gap:0 30px;}
#visual .v_control .control_box .paging_info {display:none; flex-wrap:wrap; align-items:center; gap:0 8px; color:rgba(255,255,255,0.5); font-size:0.8888888888888889rem; font-family:var(--eng); line-height:1;}
#visual .v_control .control_arr.is-paging .paging_info {display:flex;}
#visual .slick-arrow.slick-hidden {display:none;}
#visual .v_control .control_box .paging_info b {font-size:1.111111111111111rem; color:var(--white); line-height:1; display:block; transform:translateY(-8%);}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt .fs70 {transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt .fs20 {transform:translateY(0); opacity:1;}



/* fullpage */
.section {position:relative; display: block; width: 100%; height: var(--fullvh) !important; overflow: hidden !important;}
.section .fp-overflow{width: 100%; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; justify-content: center;}
.section .bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; transform:scale(1.25); transition:all 2s;}
.section.action .bg {transform:scale(1); transition:all 2s 0.1s;}

#about .bg {background:url("/img/about_bg.jpg")no-repeat center / cover;}
#rnd .bg {background:url("/img/rnd_bg.jpg")no-repeat center / cover;}
#esg .bg {background:url("/img/esg_bg.jpg")no-repeat center / cover;}
#partners .bg {background:url("/img/partners_bg.jpg")no-repeat center / cover;}
/* fullpage */




@keyframes fade-up {
	0% {transform:translateY(70px); opacity: 0;}
	100% {transform:translateY(0); opacity: 1;}
}


.tit_box {}
.tit_box .fs80 {color:var(--white); font-family:var(--eng); letter-spacing:0;}
.tit_box .fs28 {color: var(--white); margin:12px 0;}
.tit_box .fs20 {color:var(--basic-w); margin:12px 0 0;}
.tit_box .fs18 {color:var(--basic-w); margin:12px 0 0;}
.tit_box .fs18 b {color:var(--white); font-weight: 700; letter-spacing:inherit; line-height:inherit;}


#about {}
#about .basic_in {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px;}
#about .tit_box {flex-shrink: 0; max-width:43%;}
#about .about_list {flex:1; max-width:780px; height: var(--fullvh); display:flex; flex-wrap:wrap; border-right:1px solid rgba(255,255,255,0.2);}
#about .about_list li {flex:1; padding:0 40px; box-sizing:border-box; border-left:1px solid rgba(255,255,255,0.2); display:flex; flex-wrap:wrap; align-items:center; color:var(--white);}
#about .about_list dl {min-height:220px;}
#about .about_list dl .fs42 {color:var(--white); font-family:var(--eng); letter-spacing: 0; line-height:1; margin:25px 0 12px;}
#about .about_list dl .fs42 * {font-family:inherit; line-height:inherit;}
#about .about_list dl .fs18 {font-weight: 700; color:var(--white);}
#about .about_list dl .fs16 {color:var(--basic-w);}
#about .about_list dl .odometer-formatting-mark{display: none !important;}


#product .tit_box {margin:0 0 40px;}
#product .tit_box .fs80 {color:var(--black);}
#product .product_list {margin-left:-30px;}
#product .product_list li {position:relative; overflow: hidden; margin-left:30px;}
#product .product_list li span {display:block; overflow: hidden; aspect-ratio: 51 / 42; background:var(--grayBg); transition:all 0.5s;}
#product .product_list li span img {display: block; width: 100%; height: 100%; object-fit: cover;}
#product .product_list li .fs20 {color:var(--black); position:absolute; bottom:10px; left:0; width:100%; text-align:center; font-weight: 700; transform:translateY(100%); opacity:0; transition:all 0.5s;}

#product .product_list li:hover span {background:var(--white); transition:all 0.5s;}
#product .product_list li:hover .fs20 {transform:translateY(0); opacity:1; transition:all 0.5s;}






/* 도트 */
#product .v_control {display:flex; flex-wrap:wrap; align-items:center; margin:40px 0 0;}
#product .v_control .control_box {}
#product .v_control .control_box .control_arr {order:2; display:flex; flex-wrap:wrap; align-items:center; gap:0 30px;}
#product .v_control .control_box .paging_info {display:none; flex-wrap:wrap; align-items:center; gap:0 8px; color:var(--basic); font-size:0.8888888888888889rem; font-family:var(--eng); line-height:1;}
#product .v_control .control_arr.is-paging .paging_info {display:flex;}
#product .v_control .control_box .paging_info b {font-size:1.111111111111111rem; color:var(--main); line-height:1; display:block; transform:translateY(-10%);}
#product .slick-arrow {border:1px solid var(--border);}
#product .slick-arrow.slick-hidden{display: none;}
#product .slick-arrow::before {color:var(--black);}
#product .slick-arrow:hover {border-color:var(--main); background:var(--main);}
#product .slick-arrow:hover::before {color:var(--white);}
#product .scroll_down span {color:var(--black);}


#rnd {}
#rnd .basic_in {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 68px;}
#rnd .tit_box {flex:1;}
#rnd .rnd_list {max-width:670px; width:43%; padding:60px 40px 0; box-sizing:border-box;}
#rnd .rnd_list ul {position:relative; aspect-ratio: 1 / 1; background:url("/img/ring_svg.svg")no-repeat center bottom / 100% auto;}
#rnd .rnd_list ul li {position:absolute; aspect-ratio: 1 / 1; width:272px; border:1px solid rgba(255,255,255,0.2); border-radius:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; max-width:48%;}
#rnd .rnd_list ul li .in {width:calc(100% - 26px); height:calc(100% - 26px); background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(17.5px); border-radius:100%; display:flex; flex-wrap:wrap; align-content:center; justify-content:center;}
#rnd .rnd_list ul li .in p {width:100%; color: var(--white); font-weight: 700; margin:14px 0 0;}
#rnd .rnd_list ul li:nth-of-type(1) {top:-60px; left:50%; transform:translateX(-50%);}
#rnd .rnd_list ul li:nth-of-type(2) {left:-40px; bottom:0; transform:translateY(-20%);}
#rnd .rnd_list ul li:nth-of-type(3) {right:-40px; bottom:0; transform:translateY(-20%);}


#esg {}
#esg .basic_in {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:40px 15px;}
#esg .tit_box {flex-shrink: 0; padding-top:20px;}
#esg .esg_list {flex:1; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
#esg .esg_list li {}
#esg .esg_list li.blank {visibility:hidden; opacity:0;}
#esg .esg_list li a {padding:35px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:50px 0; border: 1px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(17.5px);  transition:all 0.5s; height:100%;}
#esg .esg_list li a svg * {transition:all 0.5s;}
#esg .esg_list li a .in {width:100%; position:relative; padding-right:50px; box-sizing:border-box; transition:all 0.5s;}
#esg .esg_list li a .in::after {content:'\f8ce'; width:48px; overflow: hidden; aspect-ratio: 1 / 1; border:1px solid rgba(255,255,255,0.3); display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  font-size:22px; line-height:1; font-family:var(--icon); border-radius:100%; color:var(--white); position:absolute; bottom:0; right:0; transition:all 0.5s;}
#esg .esg_list li a .in .fs16 {font-family:var(--eng); display:block; letter-spacing:0; color:var(--basic-w); transition:all 0.5s;}
#esg .esg_list li a .in .fs20 {font-weight: 700; color: var(--white); transition:all 0.5s;}


#esg .esg_list li:hover a {background:var(--white); transition:all 0.5s;}
#esg .esg_list li:hover a svg * {stroke:var(--main); transition:all 0.5s;}
#esg .esg_list li:hover a .in::after {border-color:var(--main); background:var(--main); color:var(--white); transform:rotate(45deg); transition:all 0.5s;}
#esg .esg_list li:hover a .in .fs16 {color:Var(--basic); transition:all 0.5s;}
#esg .esg_list li:hover a .in .fs20 {color:Var(--black); transition:all 0.5s;}

#partners .tit_box {margin:0 0 40px;}
#partners .tit_box .fs80 {color:var(--black);}
#partners .basic_in { flex: 1; display: flex; flex-direction: column; justify-content: center; }
#partners .footer { flex-shrink: 0; width: 100%; position: relative; z-index: 10; }
#partners .fp-tableCell { display: flex; flex-direction: column; height: 100%; }
#partners .partners_list {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap:30px;}
#partners .partners_list li {overflow: hidden; aspect-ratio: 294 / 128;}
#partners .partners_list li a {display:block; height:100%; position:relative; box-sizing:border-box; background: var(--white);}
#partners .partners_list li a img {display:block; width:100%; height:100%; object-fit:contain;}
#partners .partners_list 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; font-weight:700; color:var(--light); line-height:120%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:center; z-index:2;}

#partners .v_control .control_box .paging_info {display:none;}




/* ==============================================
디졸브 & 페이드업
============================================== */

@keyframes fade-up {
	0% { transform: translateY(50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


#about .tit_box .fs80, #about .tit_box .fs20, #about .moreBtn, #about .about_list li,
#product .tit_box, #product .product_list, #product .v_control,
#rnd .tit_box .fs80, #rnd .tit_box .fs28, #rnd .tit_box .fs18, #rnd .moreBtn, #rnd .rnd_list ul li,
#esg .tit_box .fs80, #esg .tit_box .fs18, #esg .esg_list li:not(.blank),
#partners .tit_box .fs80, #partners .partners_list {
	opacity: 0;
}


/* #ABOUT */
#about.action .tit_box .fs80 { animation: fade-up 0.8s 0.6s forwards; }
#about.action .tit_box .fs20 { animation: fade-up 0.8s 0.8s forwards; }
#about.action .moreBtn       { animation: fade-up 0.8s 1.0s forwards; }
#about.action .about_list li:nth-child(1) { animation: fade-up 0.8s 0.8s forwards; }
#about.action .about_list li:nth-child(2) { animation: fade-up 0.8s 1.0s forwards; }
#about.action .about_list li:nth-child(3) { animation: fade-up 0.8s 1.2s forwards; }

/* #PRODUCT */
#product.action .tit_box      { animation: fade-up 0.8s 0.6s forwards; }
#product.action .product_list { animation: fade-up 0.8s 0.8s forwards; }
#product.action .v_control    { animation: fade-up 0.8s 1.0s forwards; }

/* #R&D */
#rnd.action .tit_box .fs80 { animation: fade-up 0.8s 0.6s forwards; }
#rnd.action .tit_box .fs28 { animation: fade-up 0.8s 0.8s forwards; }
#rnd.action .tit_box .fs18 { animation: fade-up 0.8s 1.0s forwards; }
#rnd.action .moreBtn       { animation: fade-up 0.8s 1.2s forwards; }

/* R&D */
#rnd.action .rnd_list ul li:nth-of-type(1) { animation: fade-in 0.8s 0.6s forwards; }
#rnd.action .rnd_list ul li:nth-of-type(2) { animation: fade-in 0.8s 0.8s forwards; }
#rnd.action .rnd_list ul li:nth-of-type(3) { animation: fade-in 0.8s 1.0s forwards; }

/* #ESG */
#esg.action .tit_box .fs80 { animation: fade-up 0.8s 0.6s forwards; }
#esg.action .tit_box .fs18 { animation: fade-up 0.8s 0.8s forwards; }
#esg.action .esg_list li:nth-child(2) { animation: fade-up 0.8s 0.8s forwards; }
#esg.action .esg_list li:nth-child(3) { animation: fade-up 0.8s 0.9s forwards; }
#esg.action .esg_list li:nth-child(4) { animation: fade-up 0.8s 1.0s forwards; }
#esg.action .esg_list li:nth-child(5) { animation: fade-up 0.8s 1.1s forwards; }
#esg.action .esg_list li:nth-child(6) { animation: fade-up 0.8s 1.2s forwards; }

/* #PARTNERS */
#partners.action .tit_box .fs80 { animation: fade-up 0.8s 0.6s forwards; }
#partners.action .partners_list { animation: fade-up 0.8s 0.8s forwards;}





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


#rnd .rnd_list ul li .in span img {max-width:4.5vw;}
#rnd .rnd_list ul li .in p {font-size:1.3vw;}

#partners .partners_list {grid-gap:15px;}


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

#about .tit_box br {display:none;}
#about .about_list dl .fs42 {font-size:3vw;}

#rnd .tit_box br {display:none;}

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

.moreBtn {margin:40px 0 0;}


#about .basic_in {display:block;}
#about .tit_box {max-width:70%; margin:0 0 40px;}
#about .about_list {height:auto; max-width:100%; border-right:0;}
#about .about_list li {padding:0 10px; border-left:0; text-align:center;}
#about .about_list dl {width:100%;}
#about .about_list dl .fs42 {font-size:2.222rem;}


#rnd .tit_box {flex:none; width:100%; margin:0 0 40px;}
#rnd .rnd_list {width:100%; max-width:515px; margin:0 auto;}
#rnd .rnd_list ul li .in span img {max-width:8.5vw;}
#rnd .rnd_list ul li .in p {font-size:2vw;}

#esg .tit_box {width:100%;}
#esg .esg_list {grid-gap:20px;}
#esg .esg_list li a {padding:25px;}
#esg .esg_list li a .in {padding-right:40px;}
#esg .esg_list li a .in::after {width:35px; font-size:17px;}


#partners .partners_list {grid-gap:15px; grid-template-columns: repeat(4, 1fr);}
#partners .partners_list li:nth-child(n + 9){display: none;}
#partners .fp-tableCell {display: block !important; height: 100% !important;}
#partners .fp-overflow{overflow-x: hidden !important; overflow-y: auto !important; justify-content: flex-start !important; }
#partners .basic_in {padding:100px 0;}
#partners .footer .basic_in {padding:0;}



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



.slick-arrow {width:42px;}
.slick-arrow::before {font-size:20px;}

.moreBtn {margin:30px 0 0;}

.tit_box .fs28 {margin:8px 0;}
.tit_box .fs20 {margin:8px 0 0;}
.tit_box .fs18 {margin:8px 0 0;}

.scroll_down {bottom:20px;}
.scroll_down span {font-size:24px;}

#visual .visual_in .roll .v_txt {text-align:center; bottom:160px; top:auto;  transform: translate(-50%, 0);}
#visual .visual_in .roll .v_txt br {display:none;}
#visual .visual_in .roll .v_txt .fs20 {margin:12px 0 0;}

#visual .v_control {bottom:70px;}
#visual .v_control .control_box {width:100%;}
#visual .v_control .control_box .control_arr {gap:0 24px; width:100%; justify-content:center;}
#visual .v_control .control_box .paging_info {}
#visual .v_control .control_box .paging_info b {transform:translateY(6%);}


#about .tit_box {max-width:100%; margin:0 0 40px;}
#about .about_list dl {min-height:145px;}
#about .about_list dl img {width:46px;}
#about .about_list dl .fs42 {margin:16px 0 8px; font-size:1.999rem;}


#product .tit_box {margin:0 0 20px;}
#product .v_control {margin:20px 0 0;}
#product .v_control .control_box {width:100%;}
#product .v_control .control_box .control_arr {gap:0 24px; width:100%; justify-content:center;}
#product .v_control .control_box .paging_info {}
#product .v_control .control_box .paging_info b {transform:translateY(6%);}


#rnd .rnd_list {padding:40px 23px 0;}
#rnd .rnd_list ul li .in {width:calc(100% - 2vw); height:calc(100% - 2vw);}
#rnd .rnd_list ul li:nth-of-type(1) {top:-40px; left:50%; transform:translateX(-50%);}
#rnd .rnd_list ul li:nth-of-type(2) {left:-23px; bottom:0; transform:translateY(-20%);}
#rnd .rnd_list ul li:nth-of-type(3) {right:-23px; bottom:0; transform:translateY(-20%);}
#rnd .rnd_list ul li .in span img {max-width:12vw;}
#rnd .rnd_list ul li .in p {font-size:2.5vw; margin:2vw 0 0;}

#esg .basic_in {gap:20px 0;}
#esg .esg_list {grid-template-columns: repeat(2, 1fr); grid-gap:10px;}
#esg .esg_list li a {padding:20px; gap:30px 0;}
#esg .esg_list li a .ico {display:block; line-height:1;}
#esg .esg_list li a svg {width:36px; height:auto; display: block; line-height: 1;}
#esg .esg_list li a .in {padding-right:0;}
#esg .esg_list li a .in::after {display:none;}


#partners .tit_box {margin:0 0 20px;}
#partners .partners_list {display:block !important; grid-gap:10px; grid-template-columns: repeat(2, 1fr); margin-left:-10px;}
#partners .partners_list .slick-slide {margin-left:10px;}
#partners .partners_list .slick-slide > div {display:flex; gap:10px;}
#partners .partners_list .slick-slide > div+div {margin:10px 0 0;}
#partners .basic_in {padding:100px 0;}
#partners .footer .basic_in {padding:0;}

#partners .v_control .control_box .control_arr {order:2; display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; justify-content:center; margin:20px 0 0;}
#partners .v_control .control_box .paging_info {flex-wrap:wrap; align-items:center; gap:0 8px; color:var(--basic); font-size:0.8888888888888889rem; font-family:var(--eng); line-height:1; display:flex;}
#partners .v_control .control_arr.is-paging .paging_info {display:flex;}
#partners .v_control .control_box .paging_info b {font-size:1.111111111111111rem; color:var(--main); line-height:1; display:block; transform:translateY(-10%);}
#partners .slick-arrow::before {color: var(--black);}
#partners .slick-arrow {border: 1px solid var(--border);}

}

@media (max-width: 680px) and (max-height: 720px) {

.fs80 {font-size:2.666rem;}

.moreBtn {margin:15px 0 0;}
#rnd .tit_box {margin:0 0 20px}
#rnd .rnd_list {max-width:270px;}
#rnd .rnd_list ul li .in span img {max-width: 8vw;}
#rnd .rnd_list ul li .in p {font-size:2.2vw;}

#esg .esg_list li a {gap:15px 0;}
  
  
}

@media (max-width: 680px) and (max-height: 700px) {

.moreBtn i {width:30px;}
.moreBtn::after {width:30px;}
.moreBtn i::before {font-size:18px;}

#rnd .rnd_list {max-width:200px;}
#rnd .tit_box .fs18 {font-size:12px;}

#esg .esg_list li a {padding:15px; gap:5px;}
#esg .esg_list li a svg {width:30px;}
}