@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2021-08-05
******************************************************** */
.main-area {max-width:1560px; margin:0px auto; padding-top:82px; }
.section.active .up_motion > * {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}
.full-section-wrap {position: relative;width: 100%;height: 100%;}
/* ******************  메인 비주얼 ********************** */
/* 메인 비주얼 :: 슬라이드 */
.main-visual-con .slick-track,.main-visual-con .slick-list {-webkit-perspective: 2000;-webkit-backface-visibility: hidden;}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{height:100%;}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 슬라이드 ::이미지 */
.main-visual-item {position:relative;}
#mainVisualSlide.swiper-container,
#mainVisualSlide .swiper-wrapper{z-index:auto; min-height: 100vh;}
#mainVisualSlide.swiper-container {z-index:100;}
#mainVisualSlide .swiper-slide{background:#fff; height:100%; overflow:hidden; }
#mainVisualSlide .slide-inner {position:relative;width: 100%;height: 100%;background-size: cover !important;background-position: center; }    
.main-visual-item .visual-img { position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:1920px; height:100%; width:100%;  background-size:cover !important;}
.main-visual-item .visual-img img {display:none;}
.main-visual-item .main-visual-pc-img{width:100%;height:100%;background-size:cover !important;-webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);-webkit-transition:transform 5000ms  ease-in-out ;transition:transform 5000ms ease-in-out ;}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 슬라이드 :: 카운터 :: stop&play*/
.main-visual-conuter {position:absolute; width:100%; top:50%; transform:translateY(-50%); z-index:11; font-size:16px; color:rgba(255,255,255,0.8); letter-spacing:-0.5px; }
.main-visual-conuter .area-box {position:relative; height:248px;}
.main-visual-conuter .inner {position: absolute;left: 0;top: 50%; transform: translateY(-50%); width: 100%; text-align: center; /* margin-top: 10%; */ margin-top:123px; z-index: 99;}
.main-visual-conuter span,
.main-visual-conuter .loading-line-wrap {display:inline-block; vertical-align:middle;}
.main-visual-conuter .loading-line-wrap {margin:0 30px; width:132px; height:3px; background-color: rgba(255,255,255,0.2);}
.main-visual-conuter .loading-line-wrap .loading-line {display:block; background-color: #fff; width:0; height:100%;}
.main-visual-conuter .cur-num {font-size:22px;}
.main-visual-conuter .main-visual-play-btn{display:inline-block; margin-left:20px; font-size: 24px;color: #fff; vertical-align: middle}
.main-visual-play-btn.pause i:before {content:"\ea3f";}

/* 메인 비주얼 :: 텍스트 */.main-visual-txt-con{position:absolute; top:50%; left:0px; text-align:center;width:100%; -webkit-transform: translateY(-50%);transform: translateY(-50%);}
.main-visual-txt-con .txt-img,
.main-visual-txt-con .main-visual-txt1,
.main-visual-txt-con .main-visual-txt2{opacity:0;display:block}
.main-visual-txt-con .main-visual-txt1{display:block; font-weight:normal; font-size:32px; color:#fff; letter-spacing:0; margin-top:30px}
.main-visual-txt-con .main-visual-txt1 b{font-weight:700; color:#fff}
.main-visual-txt-con .main-visual-txt2{font-weight:400; font-size:26px; letter-spacing:0; color:#fff; line-height:1.3; padding-top:145px}

/* 메인 비주얼 :: active효과 */
#mainVisual.active .main-visual-txt1,
#mainVisual.active .main-visual-txt2{-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainVisual.active .main-visual-txt-con .txt-img{ -webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;-webkit-animation-delay:0.8s; animation-delay:0.8s;}
#mainVisual.active .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.9s; animation-delay:0.9s;}
#mainVisual.active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:1.3s; animation-delay:1.3s;}
.main-visual-item .main-visual-txt1.splitting .char{-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainVisual.active .main-visual-txt1.splitting .char{-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; width:100%; bottom: 50px; text-align:center; z-index:999; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span{display:inline-block; width:24px; height:65px; margin-left:-24px; background:url("../img/scroll_down_icon.png") no-repeat; }
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

/* 메인 비주얼 :: 페이징 */
#mainVisualSlide.start + .main-visual-pagination {display:block !important;}
#mainVisual .main-visual-pagination {bottom:50px; left:85.5%; z-index:1000;}
.main-visual-pagination .swiper-pagination-bullet {width:60px; height:6px; border:1px solid #fff;  background:none; border-radius:0; margin:0 3px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-visual-pagination .swiper-pagination-bullet-active {background-color:#fff;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 화살표 */
.arrow-icon {overflow:hidden; display:block; }
.arrow-icon .arrow {position:relative; display:block; overflow:hidden; width:100%; height:100%; z-index:1;}
.arrow-icon .skew {display:block; position:absolute; left:-150%; bottom:0; content:""; width:133%; height:124%; background:#111;transform:skew(-30deg); opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.8s}
@media all and (min-width:801px){
	a:hover .arrow-icon .skew {left:-10%; opacity:1.0;filter:Alpha(opacity=100);}
}

/* -------- 메인 컨텐츠 :: PROCESS -------- */
.main-process-con {position:relative;  }
.main-process-con h3 {font-size: 60px; color:#171a1e; letter-spacing:-0.25px; text-align:center; margin-bottom: 80px;}
/* 박스 4개 */
.main-process-list{ margin:0 -5px}
.main-process-list .process-item{float:left; width:calc(25% - 10px); margin: 0 5px; box-sizing: border-box; background: #ddd}
.main-process-list .process-item a{ display:block; overflow: hidden}
.main-process-list .process-item .item-inner{display:block; position:relative; width:100%; padding-top:108%; height:0; background-color:#000; background-size:cover !important;       
-webkit-background-size: cover !important; background-size: cover !important; -webkit-transition: all 0.3s;transition: all 0.3s;}
.main-process-list .process-item .about-us-item-inner{overflow:hidden; display:block; position:absolute; top:0; left:0; width:100%; height:100%}
.main-process-list .process-item .item-txt-box {position:absolute; top:10%; left:10%}
.main-process-list .process-item.process-item2 .item-tit, .main-process-list .process-item.process-item3 .item-tit {color: #fff;}
.main-process-list .process-item .item-tit{font-weight:600; font-size:28px; letter-spacing:-0.5px; color:#101010; line-height: 1.4}
@media all and (min-width:801px){
.main-process-list .process-item:hover .item-inner{-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1);}	
}

/* -------- 메인 컨텐츠 :: APPLICATION -------- */
#mainApplicationCon .fp-tableCell{vertical-align:top}
#mainApplicationCon h3 {font-size: 60px; color:#fff; letter-spacing:-0.25px; position: absolute; top: 200px; left: 50%; transform: translateX(-50%); z-index: 999}
#mainApplicationCon{position:relative; overflow:hidden; background-color:#fff; z-index:99;}
#mainApplicationCon .main-bs-wrap{width:100%; height:100%;}
#mainApplicationCon .main-bs-wrap .main-bs-slide,
#mainApplicationCon .main-bs-wrap .main-bs-slide .slick-track, 
#mainApplicationCon .main-bs-wrap .main-bs-slide .slick-list{height:100%}
#mainApplicationCon .main-bs-wrap .main-bs-item{position:relative; height:100%; background-size:cover !important; transition:width 1s; border-right:1px solid rgba(255,255,255,0.1); box-sizing:border-box; vertical-align:top; transition:background-color 0.8s cubic-bezier(.23,1,.32,1);}
#mainApplicationCon .main-bs-wrap .main-bs-item:last-child{border-right:0}
#mainApplicationCon .main-bs-wrap .main-bs-item .main-bs-item-area{display:block; height:100%; position:relative}
#mainApplicationCon .main-bs-wrap .main-bs-item .main-bs-item-area .main-bs-item-inner{height:100%; position:relative;}
.main-bs-control{position:absolute; bottom:32px; left:0; width:100%; text-align:center; z-index:999; backface-visibility:hidden; transform: translateZ(0)}
.main-bs-control .main-bs-conuter{display:none}
.main-bs-control .main-bs-arrow{display:none}
.main-bs-con .main-bs-wrap .main-bs-item .mb-img{}

/* 타이틀 */
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb{position:absolute; top:41%; left:0; color:#fff; width:100%; box-sizing:border-box; padding:0 12% 0 20%; text-align:left; transition:top 0.5s, color 0.5s; z-index:999; }
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .default-txt{position:relative; transition:padding 0.4s;}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .bs-on-icon{position:absolute; top:0; left:0; }
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .tit-kr{display:block; font-weight:400; font-size:18px; letter-spacing:-0.63px; color:#fff; opacity:0.6; margin-bottom:20px;}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .tit-en{display:block; font-weight:600; font-size:36px; letter-spacing:0; color:#fff; opacity:1}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt{position:relative; margin-top:40px; padding-top:50px; font-weight:400; font-size:18px; letter-spacing:-0.63px; color:rgba(255,255,255,0.5); line-height:1.66; transition:all 0.3s}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt:before{position:absolute; content:""; width:21px; height:3px; background-color:#fff; top:0; left:0; opacity:1; transition:opacity 0.3s}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .view-detail{display:inline-block; position:absolute; bottom:0; left:3px; }
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .view-detail span{position:relative; display:inline-block; font-weight:500; font-size:12px; color:#fff; letter-spacing:0; padding-right:24px}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .view-detail span:after{position:absolute; content:""; width:17px; height:1px; background-color:#fff; right:0; bottom:4px}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .tit-kr,
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .tit-en,
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt,
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .view-detail{backface-visibility:hidden; transform: translateZ(0); z-index:99}
/* 오버 시 */
@media all and ( min-width:801px ){	
#mainApplicationCon .main-bs-bg{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden}
#mainApplicationCon .main-bs-bg ul{}
#mainApplicationCon .main-bs-bg ul .bg{position:absolute; top:0; left:0; width:100%; height:100%}
#mainApplicationCon .main-bs-bg ul .bg > div{width:100%; height:100%; opacity:0;filter:Alpha(opacity=0); visibility:hidden; transition: opacity 2.5s cubic-bezier(.23,1,.32,1), visibility 2.5s cubic-bezier(.23,1,.32,1); background-size: cover !important;}
	.ie-browser .main-bs-con .main-bs-bg ul .bg > div{transition: opacity 1s, visibility 1s}
#mainApplicationCon .main-bs-bg ul .bg.bg-active > div{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#mainApplicationCon .main-bs-wrap .main-bs-item.active{background-color:rgba(0,144,211,0.7)}
#mainApplicationCon .main-bs-wrap .main-bs-item.active .bs-thumb .default-txt{padding:130px 0 100px}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .bs-on-icon,
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .view-detail{opacity:0; transition:opacity 0.2s; transition-delay:0s}
#mainApplicationCon .main-bs-wrap .main-bs-item.active .bs-thumb .bs-on-icon,
#mainApplicationCon .main-bs-wrap .main-bs-item.active .bs-thumb .view-detail{opacity:1; transition:opacity 0.4s; transition-delay:0.1s}
#mainApplicationCon .main-bs-wrap .main-bs-item.active .bs-thumb .txt{padding-top:35px}
#mainApplicationCon .main-bs-wrap .main-bs-item.active .bs-thumb .txt:before{opacity:0}
#mainApplicationCon .main-bs-wrap .main-bs-item.active .bs-thumb .view-detail:hover{animation: btnmove 0.8s ease-in-out; animation-iteration-count: 1;}
	@keyframes btnmove {
	  0% {
		left: 3px
	  }
	  50% {
		left: 10px
	  }
	  100% {
		left: 3px
	  }
	}
}

#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb,
.main-bs-control{opacity:0; transition:opacity 0.2s 0.3s}
#mainApplicationCon.active .main-bs-wrap .main-bs-item .bs-thumb,
#mainApplicationCon.active .main-bs-control{opacity:1; transition:opacity 0.2s 0s}

/* -------- 메인 컨텐츠 :: SOLUTION -------- */
.main-solution-bg{width: 52.16%; position: absolute; top: 0; bottom: 0; right: 0;}
.main-solution-bg:after{position:absolute; content:""; width:100%; height:100%; right:0; top:0; background-color:#fff; transition-property:width; transition-delay:.4s; transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.55s; opacity:1;}
.main-solution-bg .bg{position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover !important; display:block; width:100%; height:100%}
#mainSolutionCon.active-section .main-solution-bg:after{width:0; opacity:1;}
.main-solution-con{padding-top: 60px; position: relative; z-index: 1;}
.main-solution-tit{font-size: 50px; line-height: 1.3; letter-spacing: -0.45px; color: #252525; font-weight: 300; position:relative}
.main-solution-tit> strong{font-weight: 600;display:block; margin-bottom:2%}
.main-solution-tit h3 {font-size: 60px; color: #171a1e; letter-spacing: -0.25px;}
.main-solution-tit strong i{display: block;font-size: 23px; color: #0090d3; margin-bottom: 1%;}
.main-solution-tit p{font-size: 23px;font-weight: normal; display: block;width: 45%;line-height: 1.42; color: #444;}
.main-solution-warpper{margin-top: 80px;}
.main-solution-list{margin: 0 -10px;}
.main-solution-list li{float: left; margin: 0 10px;}
.main-solution-list li .inner{display: block; width: 208px; height: 208px; border: 1px solid #0090d3; background-color: #0090d3; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-solution-list li:nth-child(2) .inner{background-color: #535353; border-color: #535353;}
.main-solution-list li:nth-child(3) .inner{background-color: #424242; border-color: #424242;}
.main-solution-list li:nth-child(4) .inner{background-color: #fff; border-color: #afadac;}
.main-solution-list li .inner .txt01{padding-top: 35px; color: #fff; font-size: 12px; font-weight: 400;}
.main-solution-list li .inner .txt02{padding-top: 15px; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -0.45px;}
/*영문 버전*/
#mainSolutionCon.eng .main-solution-list li .inner .txt01{font-size:18px;padding-top: 48px; }

.main-solution-list li:nth-child(4) .inner .txt01{color: #8f8f8f;}
.main-solution-list li:nth-child(4) .inner .txt02{color: #424242;}
.main-solution-list li .inner .img{display: block; padding-top: 20px;}
.main-solution-list li .inner .img img{display: inline-block; height: 65px;}

.main-solution-con .main-solution-btn { max-width: 220px; height:55px; margin-top:45px; box-sizing:border-box; overflow:hidden}
@media all and ( min-width: 801px ){
.main-solution-list li .inner:hover{-webkit-box-shadow: 10px 10px 25px 0 rgba(0,0,0,0.2); box-shadow: 10px 10px 25px 0 rgba(0,0,0,0.2);}
}


/* -------- 메인 컨텐츠 :: CONTACT -------- */
#mainContactCon {background-color:#ededed; }
.main-contact-tit {font-size: 80px; letter-spacing:-0.1px; color:#000308; }
.map-iframe-wrapper{position:relative; border:1px solid #ddd; margin:0px auto; }
.map-iframe-wrapper .map-iframe-con{padding-top:25.07%; position:relative; height:0;}
.map-iframe-wrapper .map-iframe-con iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-contact-con {position:relative; margin-top:30px;}
.main-contact-con:before {content:""; position:absolute; right:120px; top:95px; background-color: #fff; width:1000%; height:200%;}
.main-contact-m {display:none;}
#mainContactCon  .main-contact-info {margin-top:2.56%; padding-right:120px;}
/*
.main-contact-info .info-box {display:flex; flex-wrap:wrap;}
*/
.main-contact-info .info-box {width:100%;}
.main-contact-info .info-box .info-item {position:relative; margin:2.08% 0 0; top:4vh}
.main-contact-info .info-item .tit {position:relative; padding-left:20px; font-size:15px; color:rgba(28,31,37,0.4);}
.main-contact-info .info-item .tit i {position:absolute; left:0; font-size:16px;}
.main-contact-info .info-item .txt {font-size:18px; color:#1c1f25; line-height:1.26em; margin-top:18px; }
.main-contact-info .info-item .txt b{ font-weight:normal; display:inline-block;}
.main-contact-info .info-item .txt b:nth-of-type(1)~*{ margin-left:15px}
.main-contact-info .info-item .txt span{ display:inline-block; font-weight:600; width:12%}
/* MORE 버튼 */
#mainContactCon .more-btn-box {position:absolute; left:50%; bottom: 0; display: block; z-index:99; width:100%; height:20%; transform:translateX(-50%); }
#mainContactCon .more-btn-box .inner-box {width:21.875%; min-width:270px; height:100%; background-color: #0090d3; margin:0 0 0 auto; float:right}
#mainContactCon .more-btn-box .inner-box:nth-of-type(2){ background-color:#aaacad}
#mainContactCon .more-btn {position:relative; display:table; width:100%; height:100%; text-align:center;}
#mainContactCon .more-btn .inner {position:relative; display:table-cell; vertical-align:middle; left:0; }
#mainContactCon .more-btn .txt {position:relative; display:inline-block; vertical-align:middle; margin-right: 10px; font-size: 24px; color:#fff; padding-left:55px}
#mainContactCon .more-btn .txt:before {content: "";position: absolute;left: 0;top: 50%;margin-top: -47px;width: 99px;height: 94px;background: url(../../img/main_contact_bottom_circle.png) no-repeat;transform-origin: 50% 50%;}
#mainContactCon .arrow-icon {position:relative; display:inline-block; vertical-align:middle; width: 52px; height:37px;}
#mainContactCon .arrow-icon .arrow {background: url("../../img/cm_style_arrow.png") no-repeat;  transition: transform 0.3s; top: 4px;}
/* 오버시 */
#mainContactCon .more-btn:hover .inner .arrow { transform: translateX(6px);}
#mainContactCon .more-btn:hover .txt:before{animation: rotate_image 5s linear infinite;}
/* 배경동그라미 */
@media all and ( min-width: 801px ){
@keyframes rotate_image{100% {transform: rotate(360deg);}}
}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{position: fixed;z-index: 100;top: calc(50% + 18px);left:60px; opacity: 1; -webkit-transform: translate3d(0,0,0);}
#fp-nav ul {position:relative; width:2px; height:98px; background-color: rgba(255,255,255,0.2);}
#fp-nav ul li {width:2px; height:42px; margin-top:-28px; }
#fp-nav ul li:last-child { display:none;}
#fp-nav ul li a{display:block;width:100%; height:42px;}
#fp-nav ul li a span{display:block; }
#fp-nav ul li .fp-tooltip{position:absolute; overflow:hidden; width:100px;top:-70px; left:-48px; transform:rotate(-90deg);opacity:0;filter:Alpha(opacity=0); line-height:20px; font-size:12px; color:rgba(255,255,255,0.8); font-weight:600;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
#fp-nav ul li .num {position:absolute; width:20px; bottom:-30px; left:-10px; transform:rotate(-90deg);opacity:0;filter:Alpha(opacity=0); line-height:20px; font-size:13px; font-style:italic;color:rgba(255,255,255,0.5); font-weight:600;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; }

#fp-nav ul li a.active { background-color: #fff;}
#fp-nav ul li a.active + .fp-tooltip , #fp-nav ul li .num.on  {opacity:1.0;filter:Alpha(opacity=100);}

/* Black Style */
#fp-nav.black ul {background-color: rgba(185,185,185,0.6);}
#fp-nav.black ul li a.active  {background-color:#111}
#fp-nav.black ul li .fp-tooltip {color:#111;}
#fp-nav.black ul li .num {color:rgba(17,17,17,0.5);}

/* ****************** 마우스 커서 ********************** */
.mousepointer { background: #fff;border:1px solid #ebebeb;z-index: 60000; position: fixed; top: 0; left: 0;transform: scale(0); pointer-events: none;font-size: 15px;font-weight: 500;font-style: italic;text-align: center;line-height: 1em; width: 55px;height: 55px;color: rgba(17,17,17,0.8);transition: transform 0.3s ease-in-out 0s;border-radius: 100%;}
.is-mobile .mousepointer{display:none;}
.mousepointer.active {transform: scale(1)}
.mousepointer .pointers { position: absolute; top: 0; left: 0;width: 100%;height: 100%}
.mousepointer p {position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);display: block;overflow: hidden}
.mousepointer p span {transition: opacity 0.3s ease-in-out 0s; margin-left:5px;opacity: 0; padding-left:5px; position:relative;  display: inline-block;}
.mousepointer p span:before {content:""; position:absolute; left:0; top:50%; margin-top:-5px; width:1px; height:10px; background-color:#000; opacity:0.5;filter:Alpha(opacity=50);}
.mousepointer p span:first-child {margin-left:0; padding-left:0;}
.mousepointer p span:first-child:before {display:none;}
.mousepointer p.active span {opacity: 1}
.detail-cusor-active {cursor:none;}


/* *******************************************************
 * 미디어쿼리 시작
******************************************************** */
/* ******************  메인 레이아웃 ********************** */
@media all and (max-width:1580px){
.main-area {padding:0 30px;}
}
@media all and (max-width:1024px){
.main-area {padding:0 15px}
/* 공통 :: 레이아웃 */
.main-area {padding-top:0;}
}
@media all and (min-width:1025px) and  (max-height:800px) {
.main-area {padding-top:0}
}
@media all and (min-width:1025px) and (max-height:600px) ,(max-height:600px){
.section:not(#mainVisual, #mainApplicationCon, #mainContactCon) .fp-tableCell{height:auto !important; padding:70px 0;}
#mainVisual{ height:550px!important}
.section:not(#mainVisual) .fp-tableCell .main-area{}
#mainFooter.section .fp-tableCell {padding:0;}
#mainContactCon .more-btn-box {margin:30px 0 0 auto; position:static;}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb, .main-bs-control{ bottom:60px}
}
@media (min-height: 561px) and (max-width: 1024px){	
	.full-section-wrap{height:calc(var(--vh, 1vh) * 100)}
}


/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1750px){
#mainVisual .area-box {padding:0 30px;}	
/* 메인비주얼 :: 텍스트 */
.main-video-txt .inner-box {max-width:none; padding-left: 70px;}
/* 메인 비주얼 :: 페이징 */
#mainVisual .main-visual-pagination {right:30px; left:auto;}
}
@media all and (max-width:1024px){
#mainVisual .area-box {padding:0 15px;}
/* 메인비주얼 :: 텍스트 */
.main-visual-txt-con .txt-img img {height:50px;}
/* 메인 비주얼 :: 페이징 */
#mainVisual .main-visual-pagination {right:15px; }
}
@media all and ( max-width: 800px ){
/* 메인 비주얼 :: 슬라이드 :: 카운터 */
.main-visual-conuter {margin-top:40px; font-size:13px}
.main-visual-conuter .area-box { height:auto;}
.main-visual-conuter .inner {position:static; transform:none; margin:0; text-align: center; }
.main-visual-conuter .cur-num {font-size: 16px;}
.main-visual-conuter .loading-line-wrap{ margin:0 20px}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con .txt-img img {height:35px;}
.main-visual-txt-con .main-visual-txt1{ font-size:25px}
.main-visual-txt-con .main-visual-txt2{ font-size:20px; padding-top: 100px;}
/* 메인 비주얼 :: 페이징 */
#mainVisual .main-visual-pagination{ display:none}
#mainVisual .main-visual-pagination {bottom:30px; width:100%; right:0;}
#mainVisual .main-visual-pagination .swiper-pagination-bullet {width:20px; height:3px; }
/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{ bottom:20px}	
}

@media all and ( max-width: 480px ){
/* 메인 비주얼 :: 텍스트 */	
.main-visual-txt-con .txt-img img{ height:28px}	
.main-visual-txt-con .main-visual-txt1 {font-size: 18px;margin-top: 15px;}
.main-visual-txt-con .main-visual-txt2{ font-size:15px; padding-top: 70px;}
/* 메인 비주얼 :: 페이징 */
.main-visual-conuter{ margin-top:5%;font-size: 12px;}	
.main-visual-conuter .cur-num{ font-size:14px}
.main-visual-conuter .loading-line-wrap{margin:0 15px;width:90px}
.main-visual-conuter .main-visual-play-btn{ font-size:16px}
}

/* ******************  메인 컨텐츠 ********************** */
/* -----메인 컨텐츠 :: 컨텐츠1(Process) ----- */
@media all and (min-width:1025px) and (max-height:800px) , (max-height:800px) {
.main-area {max-width:1200px;}	
/* Process */	
.main-process-con h3 {font-size:40px; margin-bottom:20px;}	
.main-process-list .process-item .item-inner{ padding-top:22vw;}
/*solution*/
.main-solution-bg .bg{ background-position:50% 0!important}
}
@media all and (max-width:1024px){	
.main-process-list .process-item .item-tit{font-size:21px}
}
@media all and (max-width:800px){	
.main-process-con h3{ margin-bottom:30px; font-size:40px}
    .main-solution-tit h3 {font-size: 40px;}
.main-process-list .process-item{ width:calc(50% - 10px); margin: 5px}
.main-process-list .process-item .item-inner{ padding-top:35vw}
.main-process-list .process-item .item-tit{ font-size:18px}	
}
@media all and (max-width:1380px) and (max-height:800px) {
/* Process */		
.main-process-list .process-item .item-inner{ padding-top:30vw;}	
}
@media all and (max-width:480px){	
.main-process-list .process-item .item-inner {padding-top:50vw;}	
.main-process-list .process-item .item-tit{ font-size:14px}	
	
}

/* -----메인 컨텐츠 :: 컨텐츠2(Application) ----- */
@media all and (max-width: 1220px ){		
/* 타이틀 */
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb{padding:0 10%}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt br{display:none}
}
@media all and (max-width: 1024px ){	
#mainApplicationCon h3 {font-size: 40px; }
/* 슬라이드 */
.main-bs-control .main-bs-arrow{display:inline-block; position:absolute; bottom:0; backface-visibility:hidden;}
.main-bs-control .main-bs-arrow.main-bs-prev{transform:rotate(-180deg); -webkit-transform: rotate(-180deg); left:15px}
.main-bs-control .main-bs-arrow.main-bs-next{right:15px}
.main-bs-control .main-bs-arrow.slick-disabled{opacity:0.5; cursor:default}
}
@media all and ( max-width: 800px ){	
#mainApplicationCon{background-color:#fff; }
#mainApplicationCon .main-bs-bg{display:none}
#mainApplicationCon .main-bs-slide-wrap{position:relative; height:100%; z-index:1}
#mainApplicationCon .main-bs-wrap{position:absolute; top:0; left:0;}
#mainApplicationCon .main-bs-wrap .main-bs-slide{position:relative; }
#mainApplicationCon .main-bs-wrap .main-bs-item{border-right:0; transition:none; }
#mainApplicationCon .main-bs-wrap .main-bs-item .mb-img{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; background-size:cover !important; }
    #mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .default-txt {margin-top: 70px;}
/* 타이틀 */
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb{padding:0 15px; top:30%}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .bs-on-icon{display:none}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .view-detail{position:relative; margin-top:30px}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt{padding-top:0; font-size:15px}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt:before{display:none}
/* 슬라이드 */
.main-bs-control .main-bs-conuter{display:block !important;}
.main-bs-control .main-bs-conuter span{font-weight:600; color:#fff; display:inline-block; vertical-align:middle; margin:0 8px; font-size:15px}
.main-bs-control .main-bs-conuter em{display:inline-block; vertical-align:middle; width:3px; height:3px; background-color:#fff; border-radius:50%}
}
@media all and ( max-width: 480px ){	
/* 타이틀 */
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .tit-kr{font-size:14px}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .tit-en{font-size:34px}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt{ letter-spacing:0; width:95%}
/*
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb .txt{display:none}
*/
/* 슬라이드 */
.main-bs-control .main-bs-arrow img{height:15px}
}
@media (max-height: 560px) and (min-width: 801px){	
#fullpage #mainApplicationCon{height:610px !important;}
}
@media (max-height: 560px) and (max-width: 800px){	
#fullpage #mainApplicationCon{height:500px !important;}
}


@media all and (min-height: 561px) and (max-width: 800px){	
#mainApplicationCon,
#mainApplicationCon.active01{background:url("../../img/main_bs_bg01.jpg") no-repeat 36% 50%; background-size:cover !important}
#mainApplicationCon.active02{background:url("../../img/main_bs_bg02.jpg") no-repeat 55% 50%;}
#mainApplicationCon.active03{background:url("../../img/main_bs_bg03.jpg") no-repeat 18% 50%;}
#mainApplicationCon.active04{background:url("../../img/main_bs_bg04.jpg") no-repeat 73% 50%;}
}


/* -----메인 컨텐츠 :: 컨텐츠3(Solution) ----- */
@media all and ( max-width: 1220px ){		
.main-solution-list{ width:70%; box-sizing:border-box; margin:0 -5px}
.main-solution-list li{ width:calc(25% - 10px); margin:0 5px; }
#mainSolutionCon .main-solution-list li .inner{ width:100%; height:100%; box-sizing:border-box;}
.main-solution-tit{ font-size:40px}
.main-solution-tit p{ font-size:18px}

#mainSolutionCon.eng .main-solution-list li .inner{padding: 6vh 0;}
#mainSolutionCon.eng .main-solution-list li .inner .txt01{ padding:0;}
}

@media all and ( max-width: 1080px ){		
.main-solution-list{ width:85%}
.main-solution-con .main-solution-btn{ max-width: 200px;height: 45px; margin-top:20px}
.main-solution-warpper{ margin-top:60px}
}
@media all and (min-width:1025px) and (max-height:850px) , (max-height:850px) {
.main-solution-warpper{ margin-top:40px}	
}

@media all and ( max-width: 864px ){	
#mainSolutionCon.eng .main-solution-list li .inner .txt01{ font-size:14px}
}
@media all and ( max-width: 800px ){	
.main-solution-bg{ position:relative; width:100%; left:0; box-sizing:border-box; height:52vh;}
.main-solution-bg span{ background-position: 0 18%!important;}
.main-solution-con{padding-top: 20px;position: relative; z-index: 1;background: #fff;  margin-top: -10%;box-sizing: border-box; padding: 20px 35px 0;}
.main-solution-tit{ font-size:32px}
.main-solution-tit> strong{ margin-bottom:0.7%}
.main-solution-tit strong i{ font-size:14px}
.main-solution-tit p{ width:100%;font-size: 15px;letter-spacing: 0;}
.main-solution-warpper{ margin-top:30px}
.main-solution-list{ width:100%; margin:0 -5px}
#mainSolutionCon.eng .main-solution-list li .inner{ padding: 4vh 0;}
.main-solution-list li .inner .img img{ height:40px}
}
@media all and ( max-width: 640px ){	
.main-solution-con{ padding:20px 18px 0}
.main-solution-tit{ font-size:23px}
.main-solution-tit p{ font-size:13px}
.main-solution-list li {width: calc(50% - 10px); margin: 5px;}
.main-solution-con{ margin-top:-15vh}
#mainSolutionCon.eng .main-solution-list li .inner {padding: 2.5vh 0;}
.main-solution-warpper{ margin-top:20px}
.main-solution-list li .inner .img{ padding-top:10px}

}

/* -----메인 컨텐츠 :: 컨텐츠4(Contact) ----- */

@media all and (min-width:1025px) and (max-height:850px) , (max-height:850px) {
	/* Contact Us */
	.main-contact-tit{ font-size:40px}
	.main-contact-con {margin-top:15px;}
	.map-iframe-wrapper .map-iframe-con {padding-top:18%;}
	#mainContactCon .main-contact-info {margin-top:20px;}
	.main-contact-info .info-box .info-item {margin:2.08vw 0;}
	.main-contact-info .info-item .txt {font-size:15px;}
	#mainContactCon .more-btn .txt{ font-size:17px; padding-left:28px}
	#mainContactCon .arrow-icon .arrow{ background-size:32px; top: 8px;}
	#mainContactCon .more-btn .txt:before{ width:55px; height:50px; margin:0; transform:translateY(-50%); background-size:100%}
}
@media all and (max-width:800px){
	.main-contact-tit {font-size:40px; text-align:center; margin-bottom:30px}
	.map-iframe-wrapper .map-iframe-con { padding-top: 30vh;}
	.main-contact-info .info-box .info-item{top: 1vh;}
	.main-contact-con:before {width:200%;top:65px; right:auto; transform:translateX(-50%); left:50%;  }
	.main-contact-info .info-box {/* flex-wrap:nowrap; */}
	/* .main-contact-pc {display:none;} 
	.main-contact-m {display:block;} */
	#mainContactCon .main-contact-info {padding-right:20px; padding-bottom:0;}
	.main-contact-info .info-box .info-item {width:50%;  padding-right:15px; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box; }
	.main-contact-info .info-item .txt {font-size:15px; margin-top:2.25vw; padding-left:20%; position:relative;}
	.main-contact-info .info-item .txt span{ position:absolute;left:0; top:0}
	#mainContactCon .swiper-container-horizontal > .swiper-scrollbar {width:190px; height:3px; bottom:5px; left:50%; transform:translateX(-50%); background-color: #dfdfdf;}
	#mainContactCon .swiper-container-horizontal .swiper-scrollbar-drag {height:7px; top:-2px; border-radius:0; cursor:pointer; background-color: #034ea1; }
	#mainContactCon .more-btn-box{height: inherit; box-sizing: border-box;position:inherit; left:0; transform:none; margin-top: 40px;}
	#mainContactCon .more-btn-box .inner-box{ width: 100%;height: 55px;margin: 4px 0; float:none}
	#mainContactCon .more-btn{ background-color: #034ea1;}
	#mainContactCon .more-btn .txt{ padding:0}
	#mainContactCon .more-btn-box .inner-box:last-child .more-btn{ background-color: #aaacad;}
	#mainContactCon .more-btn .txt:before{ display:none}
	#mainContactCon .arrow-icon .arrow{background-size: 100%;background-position: center;background-image: url(../../img/main_about_arrow_m.png); top:0}

	.main-contact-info .info-box .info-item:first-child {width:100%; max-width:none; padding:0}
}
@media all and (max-width:800px) and (max-height:700px){
	#mainContactCon {padding:12vh 0 7vh; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
	#mainContactCon .fp-tableCell {vertical-align:top;}
	.main-contact-info .info-item .tit {font-size:14px;}
	.main-contact-info .info-item .txt {font-size:13px;}
	#mainContactCon .main-contact-info {margin-top:10px;}
	.map-iframe-wrapper .map-iframe-con{ padding-top:180px}
}
@media all and (max-width:640px){
.map-iframe-wrapper .map-iframe-con{ padding-top:180px}	
.main-contact-info .info-item .tit{ margin-bottom:10px; display:block;}	
.main-contact-info .info-item .txt { display:block; padding:0;}	
.main-contact-info .info-item .txt span{ position:inherit; width:100%; display:block; margin-bottom:5px}
.main-contact-info .info-item .txt{ font-size:13px}
.main-contact-info .info-item .txt b:nth-of-type(1)~* {margin-left: 5px;}


}
@media all and (max-width:480px) and (max-height:700px){
#mainContactCon {padding-top:60px;}
}


/* ******************  Fade In 효과 ********************* */
/******** Animation *********/
@media all and (min-width:801px){
/* 서브 공통 :: 스크롤효과 */
.fade-in{opacity:0;filter:Alpha(opacity=0); }
.fade-in-left{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px);}
.fade-in-right{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px);}
.fade-in-up{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px);}
.fade-in-up20{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%);}
.active-section .fade-in{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transition: all 1.0s ease;transition: opacity 1.0s ease;}
.active-section .fade-in-left{opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.active-section .fade-in-right{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.active-section .fade-in-up{opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);-webkit-transition: all 1.0s ease; transition: opacity 1.0s ease, transform 1.0s ease;}
.active-section .fade-in-up20{ opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.fade-in-02{-webkit-transition-delay:0.2s !important; transition-delay:0.2s !important }
.fade-in-03{-webkit-transition-delay:0.3s !important; transition-delay:0.3s !important }
.fade-in-04{-webkit-transition-delay:0.4s !important; transition-delay:0.4s !important }
.fade-in-05{-webkit-transition-delay:0.5s !important; transition-delay:0.5s !important }
.fade-in-06{-webkit-transition-delay:0.6s !important; transition-delay:0.6s !important }
.fade-in-07{-webkit-transition-delay:0.7s !important; transition-delay:0.7s !important }
.fade-in-08{-webkit-transition-delay:0.8s !important; transition-delay:0.8s !important }
.fade-in-09{-webkit-transition-delay:0.9s !important; transition-delay:0.9s !important }
.fade-in-10{-webkit-transition-delay:1s !important; transition-delay:1s !important }
}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1700px){
	#fp-nav{display:none !important;}
}