@charset 'utf-8';

/*공통*/
.title-box span {display: block; color: #eb5405; font-size: 22px; margin-bottom: 40px; font-family: 'Black Ops One', cursive;}
.title-box h3 {color: #333; font-size: 60px; font-weight: 600; margin-bottom: 40px; } 
.title-box.reverse h3 {color: #fff;}
.title-box.reverse .scont {font-size: 17px; line-height: 32px; color: #aaa; margin-bottom: 70px; }
.txt a {display: inline-block; transition: all .3s; position: relative; width: 147px;}
.txt a:after {content: ""; display: inline-block; height: 45px; width: 0; border-radius: 50px; background: #eb5405; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); left: -10px; transition: all .3s; box-sizing: border-box;}
.txt a:hover:after {width: 160px;}
.txt a .view {display: flex; align-items: center; gap: 46px;}
.txt a p {font-size: 13px; font-weight: 600; color: #fff; position: relative; z-index: 33;}
.txt a .img_circle {position: relative;}
.txt a .img_circle img {position: relative; z-index: 2;}
.txt a .img_circle::after {content: ""; display: flex; position: absolute; border-radius: 50%; width: 45px; background: #eb5405; height: 45px; align-items: center; justify-content: center; left: 50%; top: 50%; transform: translate(-50%,-50%);  z-index: 1;}

@media screen and (max-width: 960px) {
	.title-box span {font-size: 18px;margin-bottom: 20px;}
	.title-box h3 {font-size: 40px;margin-bottom: 20px;}
}

@media screen and (max-width: 767px) {
	.title-box h3 {font-size: 30px;}
}

@media screen and (max-width: 640px) {
	.title-box h3 {font-size: 24px;}
}


/*mainvisual*/
.m-visual {position: relative; width: 100%; height: 100%;}
.m-visual .main-visual {width: 100%; height: 100%; position: relative;}
.m-visual .slick-slider .slick-track, .m-visual .slick-slider .slick-list {width: 100%;}
.m-visual .main-visual .visual-con {width: 100%; height: 100vh; position: relative;}
.m-visual .main-visual .visual-con .bg {width: 100%; height: 100%; position: relative;}
.m-visual .main-visual .visual-con .bg01 {background: url(/img/main/visual_01.jpg) no-repeat top center; background-size: cover;}
.m-visual .main-visual .visual-con .bg02 {background: url(/img/main/visual_02.jpg) no-repeat top center; background-size: cover;}
.m-visual .main-visual .visual-con .txt-con {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; color: #fff;}
.m-visual .main-visual .visual-con .txt-con .txt_all {display: flex; gap: 34px; align-items: center;}
.m-visual .main-visual .visual-con .txt-con .txt_all .m-txt > span {font-size: 110px; font-family: 'Black Ops One', cursive;}
.m-visual .main-visual .visual-con .txt-con .txt_all .s-txt > span {display: block; }
.m-visual .main-visual .visual-con .txt-con .txt_all .s-txt > span:first-child {font-size: 34px; margin-bottom: 16px; font-family: 'Pretendard-SemiBold';}
.m-visual .main-visual .visual-con .txt-con .txt_all .s-txt > span:last-child {font-size: 15px; line-height: 1.3; }
.m-visual .arrows {display: flex;}
.m-visual .arrows button {display: flex; align-items: center;}
.m-visual .arrows button.prev::after {content: ""; display: inline-block; height: 10px; width: 1px; background: #fff; position: relative; margin: 0 10px;}
.m-visual .main_progress {position: absolute; top: 100%; transform: translateY(-50%); display: flex; align-items: center; gap: 34px; margin-top: 50px;}
.m-visual .slider-pro_fl {display: flex; align-items: center; gap: 10px;}
.m-visual .slider-pro_fl span {color: #d1cdc6; font-size: 12px; font-weight: 700;}
.m-visual .slider-progress {width: 290px; height: 5px; box-sizing: border-box; border: 1px solid #fff;}
.m-visual .slider-progress .progress {width: 0; height: 5px; box-sizing: border-box; background: #eb5405;}
.m-visual .slider-progress .progress.pro-ani {height: 5px; box-sizing: border-box; animation: proBar 5s linear; position: relative; top: -1px; left: -1px;}

@keyframes proBar {
    0% {width: 0;}
    100% {width: 100%;}
}
@media screen and (max-width: 1400px) {
	.m-visual .main-visual .visual-con .txt-con .txt_all {flex-direction: column;align-items: unset;}
}
@media screen and (max-width: 960px) {
	.m-visual .main-visual .visual-con .txt-con .txt_all .m-txt > span {font-size: 80px;}
	.m-visual .main-visual .visual-con .txt-con .txt_all .s-txt > span:first-child {font-size: 26px;}
	.m-visual .slider-progress,
	.m-visual .slider-progress .progress,
	.m-visual .slider-progress .progress.pro-ani {height: 4px; }
}
@media screen and (max-width: 767px) {
	.m-visual .main-visual .visual-con {height: 800px;}
	.m-visual .main-visual .visual-con .txt-con .txt_all {gap: 20px;}
	.m-visual .main-visual .visual-con .txt-con .txt_all .m-txt > span {font-size: 50px;}
	.m-visual .main-visual .visual-con .txt-con .txt_all .s-txt > span:first-child {font-size: 22px;}
	.m-visual .slider-progress {width: 210px;}
}
@media screen and (max-width: 640px) {
	.m-visual .main-visual .visual-con {height: 600px;}
	.m-visual .slider-progress,
	.m-visual .slider-progress .progress,
	.m-visual .slider-progress .progress.pro-ani {height: 2px; }
}



/*solution box*/
.solution-box {position: relative; width: 100%; margin-top: 120px; margin-bottom: 140px;}
.list-box {overflow: hidden;}
.list-box > .lists {position: relative; display: flex;}
.list-box > .lists li { position: relative; height: 570px; width: calc(8%); transition: width .8s; margin: 0 2px;}
.list-box > .lists li.active {width: 876px;}
.list-box > .lists li.list_img {background-size: cover !important;}
.list-box > .lists li.list_img.no1 {background: url(/img/main/main_list01_gray.png) left center no-repeat;}
.list-box > .lists li.list_img.no2 {background: url(/img/main/main_list02_gray.png) left center no-repeat;}
.list-box > .lists li.list_img.no3 {background: url(/img/main/main_list03_gray.png) left center no-repeat;}
.list-box > .lists li.list_img.no4 {background: url(/img/main/main_list04_gray.png) left center no-repeat;}
.list-box > .lists li.list_img.no5 {background: url(/img/main/main_list05_gray.png) left center no-repeat;}
.list-box > .lists li.list_img.no6 {background: url(/img/main/main_list06_gray.png) left center no-repeat;}
.list-box > .lists li.active.list_img.no1 {background: url(/img/main/main_list01.png) center no-repeat; margin: 0 2px;}
.list-box > .lists li.active.list_img.no2 {background: url(/img/main/main_list02.png) center no-repeat; margin: 0 2px;}
.list-box > .lists li.active.list_img.no3 {background: url(/img/main/main_list03.png) center no-repeat; margin: 0 2px;}
.list-box > .lists li.active.list_img.no4 {background: url(/img/main/main_list04.png) center no-repeat; margin: 0 2px;}
.list-box > .lists li.active.list_img.no5 {background: url(/img/main/main_list05.png) center no-repeat; margin: 0 2px;}
.list-box > .lists li.active.list_img.no6 {background: url(/img/main/main_list06.png) center no-repeat; margin-left: 2px;}
.list-box > .lists li h3 {font-size: 28px; transform: rotate(90deg); position: relative; top: 101px; display: flex; color: #333; }
.list-box > .lists li h3 span {font-weight: 600; margin-right: 15px;}
.list-box > .lists li .txt {display: none; padding-top: 80px; padding-left: 66px;}
.list-box > .lists li .txt span {display: block; font-size: 18px; color: #fff; margin-bottom: 16px; }
.list-box > .lists li .txt h4 {font-size: 42px; color: #fff; font-weight: 600; margin-bottom: 31px;  }
.list-box > .lists li .txt .scont {color: #fff; font-size: 17px; margin-bottom: 31px; line-height: 27px; height: 75px; overflow: hidden; }
.list-box > .lists li:first-child .txt .scont {color: #7098a4;}
.list-box > .lists li.active h3 {display: none;  } 
.list-box > .lists li.active .txt {display: block;}
.list-box .btnbox { display:none }
.list-box > .lists li .txt span,
.list-box > .lists li .txt .scont,
.list-box > .lists li .txt .view  { opacity:0; }
.list-box > .lists li.active .txt span { animation:ani_2 0.5s 0.1s; animation-fill-mode:both; }
.list-box > .lists li.active .txt h4 { animation:blur_txt 0.5s 0.2s; animation-fill-mode:both; }
.list-box > .lists li.active .txt .scont { animation:ani_2 0.5s 0.4s; animation-fill-mode:both; }
.list-box > .lists li.active .txt .view { animation:ani_2 0.5s 0.6s; animation-fill-mode:both; }
.list-box > .lists li h3 { animation:ani_5 0.5s 0.6s; animation-fill-mode:both; }

@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@media screen and (max-width: 1500px) {
	.list-box > .lists li.active {width: 100%;}
	.list-box > .lists li .txt .scont {height: unset;}
	.list-box > .lists li .txt .scont br {display: none;}
	.list-box > .lists li .txt {padding-left: 30px;padding-right: 30px;}
}
@media screen and (max-width: 960px) {
	.list-box > .lists {flex-direction: column;gap: 20px; display: block;}
	.list-box > .lists li { height: 370px; }
	.list-box > .lists li.active h3 {display: none;} 
	.list-box > .lists li .txt {display: block; padding:0 40px; padding-top: 50px; }
	.list-box li.list_img.no1 {background: url(/img/main/main_list01.png) center no-repeat !important; margin:0 !important;}
	.list-box li.list_img.no2 {background: url(/img/main/main_list02.png) center no-repeat !important; margin:0 !important;}
	.list-box li.list_img.no3 {background: url(/img/main/main_list03.png) center no-repeat !important; margin:0 !important;}
	.list-box li.list_img.no4 {background: url(/img/main/main_list04.png) center no-repeat !important; margin:0 !important;}
	.list-box li.list_img.no5 {background: url(/img/main/main_list05.png) center no-repeat !important; margin:0 !important;}
	.list-box li.list_img.no6 {background: url(/img/main/main_list06.png) center no-repeat !important; margin:0 !important;}
	.list-box .btnbox { display:block }
	.list-box .btnbox .btn_pn { position:absolute; top:50%; background:rgba(0,0,0,0.7); width:40px; height:60px; outline:none; border:none;  }
	.list-box .btnbox .btn_pn i { font-size:16px; color:#fff; }
	.list-box .btnbox .btn_pn.btn_prev { left:0; }
	.list-box .btnbox .btn_pn.btn_next { right:0; }
	.list-box .slick-dots { margin-top:20px; display:flex;  align-items:center; justify-content:center;}
	.list-box .slick-dots li { margin:0 5px; border-radius:50px; width:10px; height:10px; background-color:rgba(0,0,0,0.2); }
	.list-box .slick-dots li.slick-active { background:#eb5405; }
	.list-box .slick-dots button { outline:none; border:none; overflow:hidden; text-indent:-9999em; display:none  }
	.list-box > .lists li.slick-current .txt h4 { animation:blur_txt 0.5s 0.2s; animation-fill-mode:both; }
	.list-box > .lists li.slick-current .txt .scont { animation:ani_2 0.5s 0.4s; animation-fill-mode:both; }
	.list-box > .lists li.slick-current .txt .view { animation:ani_2 0.5s 0.6s; animation-fill-mode:both; }
}
@media screen and (max-width: 767px) {
	.solution-box {margin-top: 60px;margin-bottom: 60px;}
	.list-box > .lists li .txt {; padding-top: 30px; }
	.list-box > .lists li .txt span {font-size: 16px;}
	.list-box > .lists li .txt h4 {font-size: 30px;}
	.list-box > .lists li .txt .scont {font-size: 15px;}
}

/*overview*/
.overview {overflow: hidden; background: #f6f6f6; position: relative;}
.overview .overview-main {display: flex; position: relative;}
.overview .overview_bg {background: #111; max-width: 77%; padding: 170px 63px 150px 200px; box-sizing: border-box;}
.overview .overview-slider {width: 1500px; z-index: 30;}
.overview .overview_inner {position: relative; z-index: 22; padding-left: 10px;}
.overview .overview_inner .txt a {margin-bottom: 210px;}
.overview .title-box {position: relative; z-index: 22;}
.overview .overview_inner .imgs {position: absolute; object-fit: cover; overflow: hidden; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; height: 0; padding-bottom: 33%;}
.overview .progress {display: flex; gap: 40px; margin-top: 80px;}
.overview .progress > div {width: 23%; box-sizing: border-box;}
.overview .progress > div h3 {color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.overview .progress > div span.progressBar {display: block; height: 5px; border: 1px solid #292929; width: 100%; background: transparent;}
.overview .progress > div span.progressBar .inProgress {display: block; width: 0%; height: 5px; background: #eb5405; box-sizing: border-box;}
.overview .arrows {display: flex; justify-content: flex-end; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 30;}
.overview .arrows > button {background: #111; padding: 46px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: all .3s; position: relative;}
.overview .arrows > button:first-child {border-right: 1px solid #fff;}
.overview .arrows > button:hover {background: #eb5405;}
.overview .arrows > button img {position: relative; z-index: 22;}
.overview .imgs2 {width: 447px; margin: auto 0 0; position: relative; z-index: 10;}

@media screen and (max-width: 1919px) {
	.overview .arrows {top: 0;transform: unset;}
}
@media screen and (max-width: 1700px) {
	.overview .overview-main {flex-direction: column;}
	.overview .overview_bg {max-width: 100%;padding: 40px;}
	.overview .overview-slider {width: 100%;}
	.overview .imgs2 {position: absolute;top: 30px;right: 30px;object-fit: cover;}
	.overview .arrows {right: 30px;top: 63%;margin: 10px 0;}
	.overview .overview_inner {min-height: 770px;display: flex;flex-direction: column;}
	.overview .overview_inner .imgs {top: 40%;transform: unset;width: 100%;padding-bottom: 42%;}
	.title-box.reverse .scont {margin-bottom: 30px;}
	.overview .progress > div {width: 100%;}
	.overview .arrows {bottom: unset;top: 47%;justify-content: center;z-index: 30;}
	.overview .arrows > button {background: #fff;padding: 35px;}
	.overview .arrows > button:first-child {border-right: 1px solid #111;}
	.overview .progress {margin-top: 70px;}
}
@media screen and (max-width: 1200px) {
	.overview .imgs2 {width: 300px;}
	.overview .arrows > button {padding: 30px;}
}
@media screen and (max-width: 960px) {
	.overview .overview_inner {min-height: 550px;}
	.overview .overview_inner .imgs {top: 50%;}
	.title-box.reverse .scont {margin-bottom: 30px;}
	.overview .progress {display: grid;grid-template-columns: repeat(2, 1fr);}
	.overview .progress > div {width: 100%;}
	.overview .arrows {bottom: unset;top: 50%;justify-content: center;left: 50%;transform: translateX(-50%);z-index: 30;}
	.overview .progress {margin-top: 150px;}
	.overview .imgs2 {top: 56%;width: 220px;display: none;}
	.overview .progress > div span.progressBar,
	.overview .progress > div span.progressBar .inProgress { height: 4px; }
}
@media screen and (max-width: 767px) {
	.overview .overview_inner {min-height: 565px;}
	.overview .overview_inner .txt a {margin-bottom: 100px;}
	.overview .title-box {padding: 15px 0 0 15px;}
	.title-box.reverse .scont {font-size: 15px;line-height: 25px;margin-bottom: 20px;color: #fff;}
	.overview .imgs2 {top: 51%;}
	.overview .progress {justify-content: center;flex-wrap: wrap;}
	.overview .arrows {justify-content: flex-end;right: 40px;transform: unset;top: 60%;}
	.overview .arrows > button {padding: 25px;}
} 
@media screen and (max-width: 640px) {
	.overview .arrows {top: 56%;}
	.overview .progress > div span.progressBar,
	.overview .progress > div span.progressBar .inProgress { height: 2px; }
}
@media screen and (max-width: 480px) {
	.overview .arrows {top: 58.5%;}
	.overview .progress {margin-top: 80px;}
}

/*customer center*/
.customer {margin-top: 120px; position: relative; overflow: hidden; position: relative;}
.customer .title-box .scont {font-size: 17px; line-height: 24px; color: #333; margin-bottom: 60px; }
.customer .title-box .txt a p {color: #333; transition: all .3s;}
.customer .title-box .txt a:hover p {color: #fff;}
.customer .custom_slider {position: absolute; bottom: 0; left:40px; z-index: 22; margin-bottom: 180px; max-width:1500px; }
.customer .custom_fl {display: flex; justify-content: space-between;}
.customer .custom_right {background: url(/img/main/customer_bg.png) no-repeat center; background-size: cover; width: 877px; height: 894px; }
.customer .slick-list{  }
.customer .slick-slide {background: #fff; border: 1px solid #e8e8e8; box-sizing: border-box; margin:0 0 0 44px; width:342px;}
.customer .slick-slide a {display: block; height: 100%; padding: 50px 26px 50px 30px; }
.customer .custom_slider .custom_slide li:hover {background: #333; transition: all .3s; border: 1px solid #333;}
.customer .custom_slider .custom_slide li:hover h3 {color: #fff;} 
.customer .custom_slider .custom_slide .slick-slide h3 {margin-bottom: 25px; font-size: 18px; color: #333; font-family: 'NanumSquareBold'; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.customer .custom_slider .custom_slide .slick-slide p {font-size: 16px; color: #999; line-height: 1.3; height: 42px; margin-bottom: 30px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/*.customer .custom_slider .custom_slide .slick-slide.ell_one p {text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: nowrap;} */
.customer .custom_slider .custom_slide .slick-slide span {font-size: 16px; color: #adadad; }
.customer .custom_slider .bar_fl {display: flex; align-items: center; gap: 20px; margin-top: 55px; margin-bottom: 20px;}
.customer .custom_slider .slider-progress {width: 530px; height: 5px; box-sizing: border-box; }
.customer .custom_slider .slider-progress .progress {overflow: hidden; width: 100%; height: 5px; background: transparent; display: block; background-image: linear-gradient(to right, #eb5405, #eb5405); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .6s ease-in-out; border: 1px solid #e4e4e4;}
.customer .custom_slider .slider-progress .progress .slider__label {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); padding: 0; border: 0;}
.customer .bar_fl .arrows {display: flex; align-items: center; gap: 15px;}

@media screen and (max-width: 1600px) {
	.customer .custom_slider {left:0; }
}
@media screen and (max-width: 1200px) {
	.customer .custom_left {margin: 0 0;margin-bottom: 60px;text-align: left;}
	.customer .custom_fl .custom_right img {width: 100%;}
	.customer .custom_slider {bottom: unset;top: 61%;}
	.customer .slick-slide { margin:0 0 0 20px; width:280px;}
}
@media screen and (max-width: 960px) {
	.customer .custom_fl {flex-direction: column;}
	.customer .custom_fl .custom_right {width: 100%;padding-bottom: 80%;object-fit: cover;height: 0;}
	.customer .custom_slider {position: relative;margin-bottom: 0;bottom: 400px;height: 0;}
	.customer .custom_slider .bar_fl {justify-content: center;}
	.customer .custom_slider .slider-progress,
	.customer .custom_slider .slider-progress .progress {height: 4px; }
	.customer .custom_slider .slider-progress .progress {border: 1px solid rgba(255,255,255,0.3);}
	.customer .slick-slide { margin:0 0 0 20px; width:300px;}
}
@media screen and (max-width: 767px) {
	.customer {margin-top: 60px;}
	.customer .custom_slider {bottom: 350px;}
	.customer .custom_slider .slider-progress {width: 450px;}
	.customer .custom_fl .custom_right { padding-bottom: 80%; }
}
@media screen and (max-width: 640px) {
	.customer .custom_slider .slider-progress {width: 300px;}
	.customer .custom_slider .slider-progress,
	.customer .custom_slider .slider-progress .progress {height: 3px; }
}
@media screen and (max-width: 480px) {
	.customer .custom_fl .custom_right { padding-bottom: 105%; }
}