@import url("common.css");


/*** css 공통 ***/
/* 텍스트 */
.title{font-size:var(--fs50); letter-spacing: -2.5px; font-weight: 700; line-height:120%; color:var(--black);}
.title.eng{letter-spacing: 0;}
.sub_tit{font-size:var(--fs20); letter-spacing: -0.75pt; line-height:150%; font-weight:500; color:var(--black);}
.txt{font-size:var(--fs18); letter-spacing:-0.5pt; line-height:165%; color:rgba(34,34,34,.5);}
.tbox{text-align:center; padding: 0 5% 30px; box-sizing:border-box;}
.tbox .txt{padding: 8px 0 0; line-height: 150%;}

/* 버튼 */
.btn-wrap {display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:60px;}
.moreBtn {display:inline-block; border-radius: 10px; border: 1px solid rgba(75, 125, 188, 0.60); background: rgba(75, 125, 188, 0.01); box-shadow: 0px 1px 20px 0px rgba(75, 125, 188, 0.20);  overflow:hidden; height:50px; transition:all .3s linear;}
.moreBtn span {display:block; text-align:center; padding:0 38px; box-sizing:border-box; color: var(--sub); font-size: 1rem; font-weight: 600; line-height:168.75%; letter-spacing: 0.32px; text-align:center; height:100%; line-height:50px; transition:all .3s linear;}
.moreBtn:hover {border: 1px solid rgba(255, 255, 255, 0.30) !important; background: #4B7DBC; box-shadow: 0px 1px 50px 0px #4B7DBC; transition:all .3s linear;}
.moreBtn:hover span {transform:translateY(-100%); transition:all .3s linear; color:var(--white);}


/* 화살표 */
.slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999;}
.slick-prev{background:url('/img/arrow_p.png') no-repeat center/100% auto;}
.slick-next{background:url('/img/arrow_n.png') no-repeat center/100% auto;}





/*** Visual ***/
#visual{width:100%; height: var(--vh); overflow: hidden; background:#000; position: relative;}
#visual .visual_in {width: 100%; height: 100%; position: relative;}
/* #visual .visual_in .slick-list::before {content:''; width:100%; height:100%; opacity: 0.7; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.20) 100%); position:absolute; top:0; left:0; z-index:60;} */
#visual .visual_in .roll{width: 100%; height: var(--vh);}

#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg::after {content:''; width:100%; height:100%; opacity: 0.7; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.20) 100%); position:absolute; top:0; left:0; z-index:60;}
#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 .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

#visual .v_cont {position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); z-index:999; display:flex; flex-wrap:wrap; align-items:center;  justify-content:space-between;}
#visual .v_cont .btn-wrap {justify-content:flex-start}
#visual .v_cont .btn-wrap .moreBtn {border-color:var(--white)}
#visual .v_cont .btn-wrap .moreBtn span {color:var(--white)}
#visual .v_cont .textBox {width:50%; padding-right:2%; box-sizing:border-box;}
#visual .v_cont .textBox .fs60 {color: var(--white); font-size: 3.75rem; font-weight: 900; line-height:118.333%; letter-spacing: -1.2px;}
#visual .v_cont .textBox .fs20 {color:rgba(255,255,255,0.7); font-size: 1.25rem; font-weight: 400; line-height:155%; margin:25px 0 0;}
#visual .v_cont .videoBox {width:50%; overflow: hidden; aspect-ratio: 16 / 9.013; border-radius: 10px; border: 2px solid var(--white); box-sizing:border-box; max-width:545px;}
#visual .v_cont .videoBox .jarallax{position: relative; width: 100%; height:100%;}

/* 스크롤 */
#visual .scroll_down {position:absolute; top:50%; right:5%; transform:translateY(-50%); z-index:999;}
#visual .scroll_down span {display:block; width: 20px; height: 28px; border:2px solid var(--white); box-sizing:border-box; border-radius:50px;}
#visual .scroll_down span:after {content:''; width:2px; height:5px; border-radius:5px; background:var(--white); position:absolute; top:7px; left:50%; margin-left:-1px;}
#visual .scroll_down span::before {content:'\ead0'; font-family:var(--icon); font-size:18px; display:block; line-height:1; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); color:var(--white);}

#visual .controler {position:absolute; left:50%; bottom:80px; margin-left:-675px; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px;}
#visual .controler .controler-btn {}
#visual .controler .controler-btn a {font-size:0; display:block;}
#visual .controler .controler-btn a::before {font-family:var(--icon); font-size:20px; display:block; color:var(--white); line-height:1; font-variation-settings: 'FILL' 1; font-weight:400;}

#visual .controler .controler-btn .play::before {content:'\e037';}
#visual .controler .controler-btn .stop::before {content:'\e034';}

#visual .controler .controler-btn .play {display:none;}
#visual.stop .controler .controler-btn .play {display:block;}
#visual .controler .controler-btn .stop {display:block;}
#visual.stop .controler .controler-btn .stop {display:none;}

/* 도트 */
#visual .slick-dots {position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
#visual .slick-dots li {display:block; position:relative; width:50px; height:3px; background:rgba(255,255,255,.2);}
#visual .slick-dots li.slick-active {}
#visual.play .slick-dots li.slick-active:after {content:''; width:0; height:100%; background:var(--white); position:absolute; top:0; left:0; animation:dot_ani 5.5s 1s linear forwards;}
#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer;}



@keyframes scroll_down {
	0%,100% { transform:translateY(0); opacity: 1;}
	50% { transform:translateY(2px); opacity: 0.5;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}

@keyframes dot_ani {
	0% { width:0; }
	100% {width: 100%; }
}

/* 화살표 */
#visual .slick-arrow{opacity: 1; bottom:38px;}
#visual .slick-arrow:hover{opacity: 0.5;}
#visual .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; left:50%; margin-left:-675px;}
#visual .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto; right: 50%; margin-right:-675px;}







/* 효과 */
#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 h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p{transform:translateY(0); opacity:1;}





.tit-box {text-align: center; margin-bottom:50px;}
.tit-box .fs44 {color: var(--black); font-size: 2.75rem; font-weight: 800; line-height:125%;}
.tit-box .stxt {margin:10px 0 0; letter-spacing: 0.32px;}





/* Hero Video Section */
.video {overflow:hidden;}

.video .video_wrap {mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);}
.video .video_roll {}
.video .video_roll .slick-list {overflow:visible; margin-left:-30px;}
.video .video_roll dl {position:relative; margin-left:30px; border-radius: var(--borderR10); overflow:hidden;}
.video .video_roll dl dt {overflow: hidden; aspect-ratio: 3 / 4;}
.video .video_roll dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.video .video_roll dl dd {position:absolute; top:0; left:0; width:100%; height:100%; padding:35px 40px; box-sizing:border-box; font-weight: 600; line-height:168.75%; letter-spacing: 0.32px; color: var(--white); z-index:10; display:flex; flex-wrap:wrap; align-items:flex-end; font-size:1rem; transition: all .3s linear; opacity:0}
.video .video_roll a.slick-active dd {opacity:1}
.video .video_roll dl dd::before {content:'\e037'; font-size:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:100%; background:var(--white); width:26px; aspect-ratio: 3 / 3; color:var(--black); font-family:var(--icon); font-variation-settings: 'FILL' 1; position:absolute; top:15px; right:15px; transition: all .3s linear;}
.video .video_roll dl dd::after {content:''; width:100%; height:100%; opacity: 0.8; background: linear-gradient(180deg,rgba(0, 0, 0, 0.00) 0%,  #000 100%); position:absolute; bottom:0; left:0; z-index:-1; transition: all .3s linear;}

.video .video_roll dl:hover dd {padding:45px 40px; transition: all .3s linear;}
.video .video_roll dl:hover dd::before {right:20px; top:20px; width:70px; background:var(--sub); font-size:30px; color:var(--white); transition: all .3s linear;}
.video .video_roll dl:hover dd::after {height:150%; transition: all .3s linear;}
/* Hero Video Section */





/* Customer Success Stories */
.customer_list {}
.customer_list dl {}
.customer_list dl+dl {margin:30px 0 0;}
.customer_list dl a {display:flex; flex-wrap:wrap; align-items:center; gap:0 65px;}
.customer_list dl dt {max-width:775px; width:60%; overflow: hidden; aspect-ratio: 16 / 9; background:var(--black); border-radius: var(--borderR10); transition:all 0.3s linear;}
.customer_list dl dt .jarallax, .customer_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.customer_list dl dd {flex:1;}
.customer_list dl dd .case {display:flex; align-items:center; gap:4px; color: var(--main); font-size: 14px; font-weight: 600; line-height:178.571%; letter-spacing: 0.28px; opacity:0.6;}
.customer_list dl dd .case::before {content:'\f457'; flex-shrink: 0; font-size:19px; display:block; line-height:1; font-family:var(--icon); font-variation-settings: 'FILL' 1; font-weight:400;}
.customer_list dl dd .fs24 {color: var(--black); font-size: 1.5rem; font-weight: 700; line-height: 145.833%; margin:10px 0 0;}
.customer_list dl dd .stxt {color: var(--LightFont); letter-spacing: 0.32px; margin:15px 0 0;}
.customer_list dl dd .more {display:flex; flex-wrap:wrap; align-items:center; gap:0; color: var(--sub); font-size: 0.875rem; font-weight: 600; line-height:178.571%; letter-spacing: 0.28px; transition:all 0.3s linear; margin:40px 0 0;}
.customer_list dl dd .more i {display:block; width:21px; aspect-ratio: 3 / 3; position:relative; overflow:hidden;}
.customer_list dl dd .more i::before {content:'\e5c8'; font-family:var(--icon); font-size:13px; font-weight:500; color:var(--white); width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:absolute; top:0; left:0; z-index:10; font-style:normal; line-height:21px; transform:translateX(-100%);}
.customer_list dl dd .more i::after {content:''; width:3px; aspect-ratio: 3 / 3; background:var(--sub); border-radius:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all 0.3s linear;}

.customer_list dl:hover dt {box-shadow:0px 1px 40px rgba(75, 125, 188, 0.60); transition:all 0.3s linear;}
.customer_list dl:hover dd .more {gap:0 8px; transition:all 0.3s linear; letter-spacing: 1.4px;}
.customer_list dl:hover dd .more i::before {animation:btn_ani 1.2s linear infinite;}
.customer_list dl:hover dd .more i::after {width:20px; transition:all 0.3s linear;}


.customer_list dl:nth-of-type(2n) dt {order:2;}
.customer_list dl:nth-of-type(2n) dt {order:1;}

@keyframes btn_ani {
	0% {transform:translateX(-100%);}
	40% {transform:translateX(0%);}
	60% {transform:translateX(0%);}
	100% {transform:translateX(100%);}
}

/* Customer Success Stories */



.banner_section {margin-top:60px;}
.banner_section ul {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.banner_section ul li {position:relative; }
.banner_section ul li a {display:block; padding:25px 30px; box-sizing:border-box; color: var(--main); font-size: 1rem; font-weight: 600; line-height:168.75%; letter-spacing: 0.32px; transition:all 0.3s linear; display:flex; flex-wrap:wrap; align-content:flex-end; height:100%; border-radius: 10px; border: 1px solid var(--border); background: rgba(75, 125, 188, 0.00); transition:all 0.3s linear; min-height:160px;}
.banner_section ul li a::before {content:'\e5c8'; font-size:16px; font-family:var(--icon); width:26px; aspect-ratio: 3 / 3; border-radius:100%; background:var(--main); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; line-height:1; color:var(--white); font-weight:400; transition:all 0.3s linear; position:absolute; top:15px; right:15px;}

.banner_section ul li:hover {}
.banner_section ul li:hover a {color:var(--white); transition:all 0.3s linear; border-color:var(--main); background:var(--main);}
.banner_section ul li:hover a::before {background:var(--white); color:var(--main); width:54px; font-size:24px; transition:all 0.3s linear;}





/* Industry Leadership */
.industry {background:url("/img/logo_ci.png")no-repeat top right; padding-top:60px;}
.industry_list {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:30px;}
.industry_list li {}
.industry_list li a {display:block; padding:60px 30px; border-radius: var(--borderR10); background: var(--sub); text-align:center; transition:all 0.3s linear;}
.industry_list li a i {display:block; transition:all 0.3s linear;}
.industry_list li:hover a {background: var(--main); transition:all 0.3s linear;}
.industry_list li:hover a i {transform:translateY(-15px); transition:all 0.3s linear;}
.industry_list li span {letter-spacing: 0.32px; display:block; color: var(--white); margin:18px 0 0;}
/* Industry Leadership */











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

#visual .v_cont .textBox br {display:none;}
#visual .controler {left:5%; margin-left:0;}

#visual .scroll_down {right:2%;}


.industry {background-size:50% auto;}


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

.customer_list dl a {gap:5%;}


.industry_list {grid-gap: 15px;}
.industry_list li a {height:100%; box-sizing:border-box;}
.industry_list li a i img {max-width:100%;}



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

.tit-box .fs44 {font-size: 2.4rem;}

#visual .v_cont .textBox {padding-right:5%;}
#visual .v_cont .textBox .fs60 {font-size:3rem; letter-spacing:-0.6px;}

.video .video_wrap {mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent 100%);}
.video .video_roll {width:80%; margin:0 auto;}
.video .video_roll .slick-list {margin-left:-15px;}
.video .video_roll dl {margin-left:15px;}
.video .video_roll dl dd {padding:20px 30px;}
.video .video_roll dl:hover dd {padding:35px 30px;}


.banner_section ul {grid-gap:15px;}


.industry_list {grid-template-columns: repeat(2, 1fr);}
.industry_list li a {padding:40px 20px;}



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

.moreBtn {height:46px;}
.moreBtn span {padding:0 28px; line-height:44px;}


.tit-box {margin-bottom:30px;}
.tit-box .fs44 {font-size: 2rem;}
.tit-box .stxt {margin:6px 0 0;}

.btn-wrap {margin-top:30px;}
.btn-wrap .moreBtn span {padding:0 28px; line-height:44px;}

#visual .v_cont .videoBox {max-width:80%; width:100%; order:1; margin:0 0 0 auto;}
#visual .v_cont .textBox {width:100%; padding-right:0; order:2; margin:50px 0 0;}
#visual .v_cont .textBox .fs60 {font-size:2rem; letter-spacing:-0.6px;}
#visual .v_cont .textBox .fs20 {margin:10px 0 0;}
#visual .v_cont .textBox .btn-wrap {margin:40px 0 0;}
#visual .scroll_down {right:5%; top:auto; bottom:50px; transform:translateY(0);}
#visual .controler {bottom:30px; gap:0 10px;}
#visual .scroll_down span {width:16px; height:24px;}
#visual .scroll_down span::before {font-size:14px;}
#visual .slick-dots li {width:30px;}


.video .video_roll dl:hover dd::before {right:15px; top:15px; width:40px; font-size:20px;}
.video .video_roll .slick-list {margin-left:-10px;}
.video .video_roll dl {margin-left:10px;}


.customer_list dl+dl {margin:20px 0 0;}
.customer_list dl dt {width:100%; max-width:100%; order:1 !important;}
.customer_list dl dd {order:2 !important; margin:15px 0 0;}
.customer_list dl dd .stxt {margin:5px 0 0;}
.customer_list dl dd .more {margin:10px 0 0;}

.customer_list dl dd .case {font-size:12px;}
.customer_list dl dd .fs24 {font-size:1.3rem; margin:4px 0 0;}

.banner_section ul {grid-template-columns: repeat(1, 1fr); grid-gap:3px;}
.banner_section ul li a {min-height:85px; padding:20px; border-radius: 5px;}
.banner_section ul li a::before {top:10px; right:10px;}
.banner_section ul li:hover a::before {width:26px; font-size:16px;}

.industry {padding-top:0;}
.industry_list {grid-gap:10px;}
.industry_list li a img {max-height:60px;}
.industry_list li span {margin:12px 0 0;}


}