@charset "utf-8";
.pcbr{display:none !important;}
.ptbr{display:none !important;}
.tbr{display:none !important;}
.tmbr{display:block !important;}
.mbr{display:block !important;}
.pc_view{display:none !important;}
.pt_view{display:none !important;}
.tm_view{display:block !important;}
.t_view{display:none !important;} 
.m_view{display:block !important;}
.technology_wrap .inner.pt_only{display:none !important;}
body #fp-nav.right{
display:none;
}

/*header*/
#wrap header .header_wrap{
    padding: 0 20px;
    height: 40px;
}
#wrap header #nav .gnb{
display:none;
}
header .util{
display:none;
}
#wrap header.act{
	background:none;
}

/*allmenu*/
#allmenu{display:none;position:fixed;
top:0;left:0;width: 100vw;
height:100%;
overflow: hidden;
background: #ffffff url('/images/common/allmenu_bg.jpg')no-repeat center bottom;background-size: 100%;z-index:1003;}
#allmenu *{box-sizing:border-box;}
#allmenu h1.logo a{display:block; width:100%; height:100%;}
#allmenu .close{
    position: absolute;
    right: 29px;
    top: 37px;
    width: 26px;
    height: 26px;
    z-index: 100;
}
#allmenu .close:before,
#allmenu .close:after{display: block;content:"";position: absolute;top: -5px;left: 12px;background: #000;transform: rotate(-45deg);width: 2px;height: calc(100% + 9px);transition: 0.3s;z-index:10;}
#allmenu .close:after{transform:rotate(45deg);}
#allmenu .all_box::-webkit-scrollbar{width:12px;height: 0 !important;}
#allmenu .all_box::-webkit-scrollbar-thumb {background-color: #777;border-radius:10px;border:3px solid #f5f5f5;}
#allmenu .all_box::-webkit-scrollbar-track {background-color:#f5f5f5;}

#allmenu .all_box{position:relative;width:100%;height:100%;display: flex;flex-wrap: wrap;align-items: center;}
#allmenu .inner{
position: relative;
    width: 92%;
    max-width: 812px;
    display: flex;
    z-index: 10;
    height: 100%;
    padding-top: 100px;
}
#allmenu .inner .group{position: relative;width:100%;display: flex;flex-wrap: wrap;z-index: 10;}
#allmenu .inner .gnb{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column;
}
#allmenu .inner .gnb .menu{position: relative;width: 100%;overflow: hidden;
padding:20px;
border-left:none;
}
#allmenu .inner .gnb .menu:last-child{
border-right:none;
}
#allmenu .inner .gnb .cate{
    pointer-events: none;
    padding-bottom: 20px;
    margin-bottom: 0;
	    border-bottom: 2px solid #ddd;
}

#allmenu .inner .gnb .cate .dep1{
position:relative;
font-size: 1.6rem;color: #000;line-height: 1.3;font-weight: 500;display: block;letter-spacing: -0.5px;}
#allmenu .dep2{
padding-top:20px;
}
#allmenu .inner .gnb .cate .dep1::after{
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    position: absolute;
    right: 4px;
    top: 50%;
    margin: -8px 0 0 0;
    transition: all 0.4s;
}
#allmenu .inner .gnb li.act .cate .dep1::after{
display: block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(225deg);
    position: absolute;
    right: 4px;
    top: 50%;
    margin: -4px 0 0 0;
}
#allmenu .inner .gnb .sub_menu{
display:none;
font-size: 1.6rem;color: #666666;line-height: 1.2;font-weight: 400;
}
#allmenu .inner .gnb .sub_menu li{position: relative;padding-left: 0;}
#allmenu .inner .gnb .sub_menu li:after{display:none;content:"";position: absolute;top: 9px;left: 0;width: 6px;height: 2px;background: #666666;}
#allmenu .inner .gnb .sub_menu li + li{margin-top: 12px;}
#allmenu .inner .gnb .sub_menu li a{position:relative;display: inline-block;padding-bottom:1px;transition: 0.5s;}
#allmenu .inner .gnb .sub_menu li a span{display:inline-block;}


body #fp-nav.right{position:fixed;top: 50%;right: 35px;transform: translateY(-50%);margin: 0 !important;z-index: 30;}
body #fp-nav.right li{position: relative;left: 0;width: auto;height: auto;display: block;background: transparent;outline:0;border-radius: 50%;box-sizing: border-box;margin: 0;opacity: 1;transition: 0.3s;}
body #fp-nav.right li + li{margin-top: 20px !important;}
body #fp-nav.right li:not(:last-child).active{margin-bottom:80px;}
body #fp-nav.right li:not(:last-child):before{display:block;content:"";position: absolute;top: 16px;right: -1px;width: 1px;height: 0%;background: rgba(255,255,255,0.2);transform-origin: center;}
body #fp-nav.right li.active:before{height:60px;transition:0.3s;}

body #fp-nav.right li span{
    margin: 0 !important;
}
body #fp-nav.right li a{width: auto;height: auto;overflow: inherit;}
body #fp-nav.right li a .dot{position: relative;display:block;background: transparent;width: 7px;height: 7px;border: 1px solid #fff;border-radius: 50%;box-sizing: border-box;}
body #fp-nav.right li a .txt{position: absolute;top: 50%;right: 100%;left: auto;width: 70px;font-size:1.2rem;background: transparent;color: rgba(255,255,255,0.7);font-family: 'Lexend',sans-serif;font-weight: 300;text-align: right;padding-right: 6px;transform: translateY(-50%);line-height: 1em;margin: 0;height: auto;opacity: 0;transition: 0.3s;}
body #fp-nav.right li.active a .txt{opacity:1;}
body #fp-nav.right li.active .dot{background: #fff;}
body.dark #fp-nav.right li:not(:last-child):before{background:rgba(0,0,0,0.4);}
body.dark #fp-nav.right li .dot{border-color:#333;}
body.dark #fp-nav.right li.active .dot{background: #333333;}
body.dark #fp-nav.right li a .txt{color:#222222;}



body{background:#ff;}
section{position:relative;width: 100%;color: #000;word-break: keep-all;box-sizing:border-box;}
section .inner{position: relative;margin: 0 auto;}
section .inner2{width: 90%;max-width: 1400px;}

section *{box-sizing:border-box;}
section .txt1{
	font-size: 1.2rem;
	color: rgba(255,255,255,0.9);
	font-weight: 300;
	word-break: keep-all;
	line-height: 1.75;
	letter-spacing: -0.25px;
}
section .con_title_g{color: #fff;}
section .con_title_g .cate{width: 100%;font-family: 'Lexend','Noto Sans KR',sans-serif;font-size: 1.4rem;text-transform: uppercase;font-weight: 300;}
section .con_title_g .title{
	width: 100%;
    font-size: 2.2rem;
    font-family: 'Lexend','Noto Sans KR',sans-serif;
    text-transform: uppercase;
    margin-top: 10px;
    letter-spacing: -0.25px;
}
section .con_title_g .title2{width: 100%;font-size: 2.7rem;line-height: 1.45;margin-top: 30px;font-weight: 600;letter-spacing: -1px;}
section .con_title_g .txt1{margin-top: 17px;width: 100%;}
section.dark .con_title_g{color: #000;}
section.dark .con_title_g .txt1{color: rgba(0,0,0,0.7);}
section .inner{padding:40px 0;}

#wrap .main_home .main_slider{width: 100%;height: 100%;}
#wrap .main_home .main_bg_slider{position:absolute; top:0;left:0;}
#wrap .main_home .text_slider_wrap{position:relative;top:0;left:0;
display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: center;flex-direction: column;
width: 100%;height: 100%;
}
#wrap .main_home .main_text_slider{position:relative;top:0;left:0;height: auto;padding-top: 20px;text-align: center;}
.main_home .main_slider,.main_home .slick-list,.main_home .slick-track{width: 100%;height: 100%;outline:0; overflow:hidden;}
.main_home .main_slider .item{outline:0; background-position : 10% 20% important! }
.main_home .main_slider .item,.main_home .main_slider .img{width: 100%;height: 100%;}
.main_home .main_slider .img{position:absolute;top: 0;left: 0; width: 100%; height: 100%; background-position-x: 66% !important;}
.main_home .main_slider .text_g{position: relative;display: flex;flex-wrap: wrap;flex-direction: column;color: #fff;word-break: keep-all;}

.main_home .main_slider .text_g .title1{
	font-size: 3.2rem;
    font-family: 'Lexend','Noto Sans KR',sans-serif;
    line-height: 50px;
    letter-spacing: 2px;
}
/* .main_home .main_slider .text_g:before{
display:block;content:"";
width: 1px;height: 30px;
background: rgba(255,255,255,0.3);
margin: 0 auto 15px;
z-index: 10;
} */
.main_home .main_slider .text_g .txt1{font-size: 2rem;color: rgba(255,255,255,0.9);margin-top: 27px;}
.main_home .indicator{
	width:100%;
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 140px;
    z-index: 10;
	display:none;
}

.main_home .indicator .inner{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.main_home .indicator .btn{position: relative;width: 18px;height: 35px;margin-right: 40px;}
.main_home .indicator .btn:before{display:block;content:"";position: absolute;top: 6px;left: 6px;width: 22px;height: 22px;border: 1px solid rgba(255,255,255,0.7);border-top: 0;border-left: 0;transform: rotate(135deg);}
.main_home .indicator .btn.next{margin-right: initial;margin-left: 40px;}
.main_home .indicator .btn.next:before{transform:rotate(-45deg);left: -11px;}
.main_home .indicator .dot ul{font-size:0;}
.main_home .indicator .dot li{position:relative; display:inline-block;vertical-align:middle}
.main_home .indicator .dot button{position:relative;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 10px;box-sizing:border-box;transition: 0.3s;}
.main_home .indicator .dot li + li{margin-left: 20px;}
.main_home .indicator .dot li.slick-active button{background: #fff;width: 22px;}
.main_home .status_wrap{position: relative;width: 7px;height: 9px;margin-left: 36px;margin-right: 44px;}
.main_home .status_wrap .stop{display: block;width: 100%;height: 100%;border: 2px solid #fff;border-top: 0;border-bottom: 0;}
.main_home .status_wrap .play{position: relative;display:block;width: 100%;height: 100%;}
.main_home .status_wrap .play:before{display:block;content:"";position: absolute;width: 0px;height: 0px;top: -1px;left: 0;border-left: 6px solid #fff;border-top: 5px solid transparent;border-bottom: 5px solid transparent;border-right: 5px solid transparent;}

.mouse_wheel{
display:none;
position: absolute;bottom: 55px;left: 50%;width: 27px;height: 44px;transform: translateX(-50%);border: 1px solid #fff;border-radius: 27px;}
.mouse_wheel:before{display: block;content:"";width: 1px;height: 5px;background: #fff;margin: 5px auto 0;}
.mouse_wheel .wheel{width: 5px;height: 10px;display: block;border: 1px solid #fff;border-radius: 5px;margin: 3px auto 0;animation: infiniteani 1.6s cubic-bezier(0.4, 0, 1, 1) infinite;}
@keyframes infiniteani {
	0%{transform:translateY(0px);opacity:0;}
	15%{transform:translateY(0px);opacity:1;}
	60%{transform:translateY(6px);opacity:0.5;}
	100%{transform:translateY(6px);opacity:0;}
}

.scroll_top_wrap{position:fixed;bottom: 0px;right: 20px;display: none;z-index: 10;}
.scroll_top_wrap button{
    transform: rotate(90deg);
    transform-origin: top right;
    display: block;
    font-size: 1.2rem;
    font-family: 'Lexend',sans-serif;
    color: #fff;
    font-weight: 200;
    padding: 2px 10px;
    border: 1px solid #fff;
    border-radius: 30px;
}
.technology_wrap{
    padding-top: 60px;
    box-sizing: border-box;
}
.technology_wrap .inner{height:100%;display: flex;flex-wrap: wrap;
}
.technology_wrap .group{position: relative;width: 100%;overflow: hidden;}
.technology_wrap .group .item{position: relative;width: 100%;height: 100%;overflow: hidden;background: #000;}
.technology_wrap .group .item .bg{position:absolute;top: 0;left: 0;width: 100%;height: 100%;}
.technology_wrap .group .info{
position: absolute;bottom: 4%;left: 0;
width: 100%;
padding: 10px;
color: #fff;
}
.technology_wrap .group .info .tit{font-size: 1.6rem;font-family: 'Lexend','Noto Sans KR',sans-serif;}
.technology_wrap .group .info .txt1{margin-top: 20px;}
.technology_wrap .group2 .con_title_g{height: 50%;
padding: 10px;
display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center;}
.technology_wrap .group2 .item{height: 50%;}
.technology_wrap .group2 .item .info{
bottom:27%;
}
.technology_wrap .inner.mbr{
	display:flex;
	flex-wrap: wrap;
}
.technology_wrap .inner.mbr .con_title_g{
    width: 100%;
    height: calc(100% / 3);
    padding: 30px 36px 40px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}
.technology_wrap .inner.mbr .item{
	width: 100%;
	height: 100%;
}
.technology_wrap .inner.mbr .item .tit{
	font-size: 1.7rem;
    color: #ffffff;
    font-family: 'Lexend';
	padding-bottom: 20px;
	transform: translate3d(0,100%,0);
}
.technology_wrap.ani .inner.mbr .item .tit{
	animation: txtMotion .8s forwards;
}
.technology_wrap .inner.mbr .item.item1 .info {
    position: absolute;
    bottom: 32%;
    left: 0;
    width: 100%;
    color: #fff;
	padding: 0 0 40px 40px;
	z-index:100;
}
.technology_wrap .inner.mbr .item.item2 .info {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    color: #fff;
	padding: 0 0 40px 40px;
	z-index:100;
}
.technology_wrap .inner.mbr .item .bg{width: 100%;height: calc(100% / 3);
	transform: scale(1.3);
}
.technology_wrap.ani .inner.mbr .item .bg{width: 100%;height: calc(100% / 3);
    transform: scale(1.1);
    transition: 1s;
}
.technology_wrap .inner.mbr .item.item2 .bg{
	position: absolute;
    bottom: 0;
}
.technology_wrap .txt1{
	opacity: 0;
}
.technology_wrap.ani .txt1{
	animation: opacityAni 1s 0.7s forwards;
}

.merit_wrap{background: #181e61;}
.merit_wrap .inner{
	display: flex;
    height: 100%;
    flex-direction: column-reverse;
}
.merit_wrap .merit_list{
	position: relative;
	width: 50%;
	display: flex;
	flex-wrap: wrap;
    height: calc(100% - 396px);
}
.merit_wrap .bg.pt_only{
	display:none;
}
.merit_wrap .merit_list:before,
.merit_wrap .merit_list:after{display: block;content:"";position: absolute;top: 0;left: 50%;width: 1px;height: 100%;background: #f6f6f6;}
.merit_wrap .merit_list:after{width: 100%;height: 1px;top: 50%;left: 0;}
.merit_wrap .merit_list li{
    width: 50%;
    height: 50%;
    padding: 50px;
    display: flex;
	flex-direction: column;
    justify-content: flex-start;
    padding: 25px 0 50px 40px;
    align-items: flex-start;
}
.merit_wrap .merit_list li:nth-child(1){
	padding-top:10px;
}
.merit_wrap .merit_list li:nth-child(2) figure{
	padding-top:10px;
}
.merit_wrap .merit_list li figure{height: 60px;}
.merit_wrap .merit_list li figure svg{width: ;}
.merit_wrap .merit_list li figure svg *{}
.merit_wrap .merit_list li .tit{font-size: 1.8rem;color: #fff;font-weight: 500;}
.merit_wrap .merit_list li .txt1{color: rgba(255,255,255,0.8);margin-top: 12px;}
.merit_wrap .bg{
	width: 100%;
	overflow: hidden;
	height: 33%;
}
.merit_wrap .bg span{display: block;width: 100%;height: 100%;}


.recruit_wrap .inner{margin-top: 120px;}
.recruit_wrap .bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.recruit_wrap .con_title_g{text-align: center;}
.recruit_wrap .con_title_g .txt1{margin-top: 25px;}
.recruit_wrap .link_g{margin: 43px auto 0;text-align: center;}
.recruit_wrap .link_g a{
    width: 150px;
    height: 50px;
    border: 1px solid rgba(255,255,255,0.5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-family: 'Lexend','Noto Sans KR',sans-serif;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 200;
}
.recruit_wrap .link_g span{position: relative;min-height: 13px;padding-right: 26px;}
.recruit_wrap .link_g span:before{display:block;content:"";position: absolute;top: 9px;right: 0;width: 18px;height: 1px;background: #fff;}
.recruit_wrap .link_g span:after{display:block;content:"";position: absolute;top: 5px;right: 2px;width: 9px;height: 9px;border: 1px solid #fff;transform: rotate(-45deg);border-top: 0;border-left: 0;box-sizing: border-box;}







/*motion*/
.main_home .main_slider .img{transform:scale(1.1);}
.main_home .main_slider .on .img{transform:scale(1); transition:2s;}

.main_home .main_slider .text_g .title1,
.main_home .indicator{opacity:0;}
.main_home .main_slider .on .text_g .title1,
.main_home .indicator.on{animation: fadeUpAni 1s 0.4s forwards;}
.main_home .indicator.on{animation-delay:0.6s;}
.main_home .main_slider .text_g:before{transform: scaleY(0); transform-origin: top center;}
.main_home .main_slider .on .text_g:before{animation:txtBeforeLine 1s 0.2s forwards;}

@keyframes fadeUpAni {
	0% {
		opacity:0;transform:translate3d(0,15px,0);
	}
	100% {
		opacity:1;transform:translate3d(0,0px,0);
	}
}
@keyframes opacityAni {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
.mouse_wheel{opacity:0;}
#wrap.ani .mouse_wheel{animation:opacityAni 1s 0.8s forwards;}

@keyframes txtBeforeLine {
	0% {
		transform: scaleY(0); 
	}
	100% {
		transform: scaleY(1); 
	}
}
@keyframes txtMotion {
	0% {
		opacity:0;transform:translate3d(0,100%,0);
	}
	100% {
		opacity:1;transform:translate3d(0,0%,0);
	}
}
section .txt_motion p{overflow:hidden;}
section .txt_motion p span{display: inline-block;transform:translate3d(0,100%,0);}
section.ani .txt_motion p span{animation:txtMotion .8s forwards;}
section.ani .txt_motion p:nth-child(2) span{animation-delay:0.2s;}

.technology_wrap{
padding-top:40px;
}

.technology_wrap .con_title_g .cate{opacity:0;}
.technology_wrap.ani .con_title_g .cate{animation: fadeUpAni 1s forwards;}
.technology_wrap .con_title_g .txt1{opacity:0;}
.technology_wrap.ani .con_title_g .txt1{animation: opacityAni 1s 0.7s forwards;}
.technology_wrap .group1 .item{clip-path: inset(0% 0% 0% 100%);}
.technology_wrap.ani .group1 .item{animation:showImg cubic-bezier(0.42, 0, 0.14, 1.01) 1.1s 0.6s forwards;}
.technology_wrap .group2 .item{clip-path: inset(0% 100% 0% 0%);}
.technology_wrap.ani .group2 .item{animation:showImg2 cubic-bezier(0.42, 0, 0.14, 1.01) 1s 0.6s forwards;}
@-webkit-keyframes showImg{
0%{ clip-path:inset(0% 0% 0% 100%);}
100%{clip-path:inset(0% 0% 0% 0%); }
}
@-webkit-keyframes showImg2{
0%{ clip-path:inset(0% 100% 0% 0%);}
100%{clip-path:inset(0% 0% 0% 0%); }
}

.technology_wrap .group .item .bg{transform:scale(1.1);opacity:0.3;}
.technology_wrap.ani .group .item .bg{transform:scale(1); opacity:1; transition:1s .6s;}
/*.merit_wrap .fig1 svg{position: relative;margin-left: 10px;animation-name: shaking;-webkit-animation-duration: 1.2s;animation-duration: 1.2s;-webkit-animation-delay: 0;animation-delay: 0;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-direction: normal;animation-direction: normal;-webkit-animation-play-state: running;animation-play-state: running;}*/
.merit_wrap .bg{clip-path: inset(0% 100% 0% 0%); background: #000;
    position: absolute;
    top: 0;
}
.merit_wrap.ani .bg{animation:showImg2 cubic-bezier(0.42, 0, 0.14, 1.01) 1s forwards;}
.merit_wrap .bg span{transform:scale(1.1);opacity:0.3;}
.merit_wrap.ani .bg span{transform:scale(1); opacity:1; transition:1s;}
.merit_wrap .merit_list{opacity:0; width:100%; height:calc(100% - 33%);}
.merit_wrap.ani .merit_list{animation:opacityAni 1s 0.4s forwards;}

@keyframes shaking {
  0% {
    margin-left: -5px;
  }
  10% {
    margin-left: 5px;
  }
  20% {
    margin-left: -5px;
  }
  30% {
    margin-left: 5px;
  }
  40% {
    margin-left: -5px;
  }
  50% {
    margin-left: 2px;
  }
  65% {
    margin-left:0px;
  }
  100% {
   margin-left:0px;
  }
}


.recruit_wrap .con_title_g .cate{opacity:0;}
.recruit_wrap.ani .con_title_g .cate{animation: fadeUpAni 1s forwards;}
.recruit_wrap .con_title_g .txt1,
.recruit_wrap .link_g{opacity:0;}
.recruit_wrap.ani .con_title_g .txt1,
.recruit_wrap.ani .link_g{animation: opacityAni 1s 0.7s forwards;}


/*footer*/
#wrap footer{
    padding: 50px 0;
}
#wrap footer .footer_wrap{
position: relative;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
#wrap footer .logo{
width: 80px;
    height: 50px;
	margin-bottom:8px;
}
#wrap footer .info_g{
    width: 100%;
	padding-left:0;
	display: flex;
}
#wrap footer .info_g ul{
    position: relative;
    display: flex;
    width: 100%;
}
#wrap footer .area_r{
width:100%;
text-align:left;
}
#wrap footer .info_g ul li .tit{
    font-size: 1.4rem;
}
#wrap footer .info_g ul li .txt{
    font-size: 1.4rem;
}