@charset "utf-8";

main section{position:relative;}
section article,footer article{position:relative; width:1278px; height:100%; margin:0 auto;}
main section .path{position:Absolute; z-index:2;}
footer{margin-top:6%;}

/*����*/
main .intro{width:1460px; position:relative; background:#fff; z-index:3; margin:0 auto;}
main .intro .slideWrap{position: absolute;width: 1920px;height: 50%;display: flex;top: 58%;transform: translateY(-50%);align-items: center;}
main .intro .slideWrap .slide{overflow:visible; vertical-align:middle; margin:0;}
main .intro .slick-track{padding:12% 0px;} 
main .intro h2{width:1460px; font-size:5rem; line-height:1.2; letter-spacing: -0.06em; margin:0 auto;}
main .intro p{width:1460px;margin:0 auto;font-size: 2rem;/* font-weight: 200; */line-height: 1.5;letter-spacing: -0.07em;margin-top:20px;opacity: 0.8;}
/* main .intro a{position:relative; display:block; width:375px; margin-top:75px; padding-left:59px; border-radius:3px; line-height:60px; font-size:2rem; font-weight:200; border:1px solid #0033ff; transition-duration:0.3s; background:#0033ff; color:#fff;}
main .intro a:hover{border-radius:60px 0px 60px 0px;}
main .intro a::before,main .intro a::after{content:""; position:absolute; height:1px; background:#fff; transition-duration:0.3s; opacity:1;}
main .intro a::before{width:30px; right:60px; top:50%; margin-top:2px;}
main .intro a::after{width:10px; right:60px; top:28px; transform:rotate(45deg);}
main .intro a:hover::before,main .intro a:hover::after{right:52px;} */

main .intro .slick-dots{position:absolute;top: -20px;/* left:50%; */transform: translateY(-50%);display: flex;width:1460px;}
main .intro .slick-dots li{margin-right:14px;}
main .intro .slick-dots button{display:block;width:100px;height: 4px;background:rgba(233, 186, 186, 0.1);font-size:0px;cursor:pointer;transition-duration:0.2s;margin-top:-20px;}
main .intro .slick-dots .slick-active button{background:#0033ff;}
main .intro .visualBg{width:100%;height: 100%;overflow:visible;vertical-align:middle;transform: rotate(-45deg);position: relative;left: 40vw !important; top:calc(0px - 2vh);}
main .intro .slick-track div:nth-of-type(1) .visualBg{left:10vw !important;}
main .intro .slick-track div:not(:nth-of-type(1)) .visualBg{transform: rotate(0deg)translateY(0vh); top:-10vh; left:inherit !important; right:0px; width:auto !important; max-width:100vw; margin:0px 0px;}
main .intro .slick-track div:not(:nth-of-type(1)) .visualBg img{float:right;}
main .intro .slick-list{position:relative; z-index:3;}
main .intro .slick-dots{z-index:4;}

main .intro .visualBg div{position:absolute; width:816px !important; height:377px; border-radius:300px; }
.visualBg .path1{background:#0033ff;top: 0px;right:197px;z-index:3;/* animation-delay:1s; */animation-duration: 1s;animation-name: path1;animation-fill-mode: forwards;transform:rotate(-45deg)translate(-20%,0%);opacity:0;overflow:hidden;}
.visualBg .path1::after{content:""; position:absolute; transform:translateX(904px); bottom:-196px; display:block; width:777px; height:377px; background:#0071f9; border-radius:300px; /* animation-delay:1s;  */animation-duration: 1s;  animation-name: path3; animation-fill-mode: forwards;}
.visualBg .path2{background:#59c7f7;top: 195px;right: -367px;z-index:2;/* animation-delay:1s; */animation-duration: 1s;animation-name: path2;animation-fill-mode: forwards;transform:rotate(-45deg)translate(20%,0%);opacity:0;}
@keyframes path1{
    0%{transform:rotate(0deg)translate(-40%); opacity:1;}
    100%{transform:rotate(0deg)translate(0%); opacity:1;}
}
@keyframes path2{
    0%{transform:rotate(0deg)translate(40%,0%); opacity:0;}
    100%{transform:rotate(0deg)translate(0%); opacity:1;}
}
@keyframes path3{
    0%{transform:translateX(904px);}
    100%{transform:translateX(284px);}
}

/*����*/
main .since{overflow:hidden; background:#fff; z-index:3;}
main .since article{padding:140px 0; z-index:3; opacity:0; display:flex; justify-content:center; flex-wrap:wrap; flex-direction:column; height:calc(100vh - 100px);}
main .since h2{position:relative; font-size:14rem; line-height: 1;}
main .since h2 span{display:block; font-size:3rem; font-weight: 200; letter-spacing: -0.05em;}
main .since strong{position:relative; display: flex; align-items: center; padding-left:15px; font-size:7rem; color:#0033ff; letter-spacing: -0.09em;font-weight:500;}
main .since strong::after{content:"";position:absolute;right: 3px;bottom: 8px;width: 25px;height:70px;background:#fff;transition-duration:0.2s;}
/* main .since strong span{position:relative; width:66px; height:66px; margin-left:25px; background:url('../images/smile.png')no-repeat 50%;}
main .since strong span::before{top: 16px;}
main .since strong span::after{top: 50px;}
main .since strong span::before,main .since strong span::after{content:""; position:absolute; left:9px; display:block; width:18px; height:18px; background:#fff; transition-duration:0.2s;}
main .since strong span.smile1::before,main .since strong span.smile2::after,main .since strong.smile3::after{height:0px;} */
main .since strong .smile{display:flex; align-items:center; margin-left:30px;}
main .since strong .smile .eye::before,main .since strong .smile .eye::after{content: ""; display: block; width:16px; height:16px; border-radius: 50%; background: #0033ff; transform: scale(0); transition-duration: .4s;}
main .since strong .smile .eye::before{margin-bottom: 13px;}
main .since strong .smile .eye.on::before,main .since strong .smile .eye.on::after{transform: scale(1);}
main .since strong .smile .mouse{width:30px; height:60px; margin-left:5px; transform: scaleX(0); border:5px solid #0033ff; border-left:0; border-top-right-radius: 30px; border-bottom-right-radius: 30px; transition-duration: .3s;}
main .since strong .smile .mouse.on{transform: scaleX(1);}
main .since p{padding-left:15px; margin-top:12px; font-size:1.8rem; letter-spacing:-0.04em; opacity:0.6;}
main .slick-track div{max-width:1460px;position:absolute !important; left:0px !important;/* left:50% !important; *//* top: calc(45% + 30px) !important; *//* transform: translateX(-50%)translateY(-50%); */width:1460px !important;margin:0 auto;height: 50%;}
main .slick-track div .pageMove{position:absolute; left:0px; top:180px;}

main .since strong.en{position:relative; display: flex; align-items: center; padding-left:15px; font-size:3.5rem; color:#0033ff; letter-spacing: -0.09em;font-weight:500;}
main .since strong.en::after{content:"";position:absolute;right: 3px;bottom: 8px;width: 25px;height:70px;background:#fff;transition-duration:0.2s;}
main .since strong.en .smile{display:flex; align-items:center; margin-left:30px;}
main .since strong.en .smile .eye::before,
main .since strong.en .smile .eye::after{content: ""; display: block; width:8px; height:8px; border-radius: 50%; background: #0033ff; transform: scale(0); transition-duration: .4s;}
main .since strong.en .smile .eye::before{margin-bottom: 8px;}
main .since strong.en .smile .eye.on::before,
main .since strong.en .smile .eye.on::after{transform: scale(1);}
main .since strong.en .smile .mouse{width:15px; height:30px; margin-left:5px; transform: scaleX(0); border:5px solid #0033ff; border-left:0; border-top-right-radius: 30px; border-bottom-right-radius: 30px; transition-duration: .3s;}
main .since strong.en .smile .mouse.on{transform: scaleX(1);}


/*BIG*/
.big{position:relative; background:#fff; color:#fff; }
.big>div{position:absolute; bottom:0px; width: 100%; height:284px; background:#0033ff;}
.big video{position:absolute; left:-100vw; display:block; margin:0 auto; width:100%; height:calc(100% - 284px);}
.big div.video{display:block; top:0px; margin:0 auto; width:100%; height:calc(100% - 284px);}
.big div.video.on{background:url('../../images/main_big.gif')50% no-repeat;}
.big article{display:flex; justify-content: space-between; align-items: center;}
.big article ul{display:flex; justify-content:space-between; width:100%;}
.big article ul li{text-align:center;}
.big article ul:not(.blinkList) li{opacity:1;}
.big article ul.blinkList li:not(.blink){opacity:0.3;}
/*.big article ul li{transition-duration:0.5s; -webkit-transition-duration:0.5s;}*/
.big article ul li::before{content:""; display:block; width:135px; height:75px; margin: 0 auto}
.big article ul li:nth-child(1)::before{background:url('../../images/bigdata.png')no-repeat; background-size:100%;}
.big article ul li:nth-child(2)::before{background:url('../../images/iot.png');}
.big article ul li:nth-child(3)::before{background:url('../../images/gis.png');}
.big article ul li strong{display:block; margin:20px 0 10px 0; font-size:2rem; letter-spacing:0em;}
.big article ul li span{font-weight: 200; font-size:1.3rem; line-height: 1.7;}

/*business*/
.business{background: #F7FCFE;}
.business article{padding:120px 0; display:flex; justify-content:center; flex-wrap:wrap; flex-direction:column; height:calc(100vh - 100px);}
.business article.fadeObj{transform:translate(0px,0px);}
.business ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.business ul li{flex:2; display: flex; margin-bottom: 85px;}
.business ul li:nth-child(5),.business ul li:nth-child(6){margin-bottom:0px;}
/*.business ul li:nth-child(odd){margin-right:98px;}*/
.business ul div.mt13{margin-top:13px;}
.business ul div.icon{position:relative; width:150px;height:150px; margin-right:50px; overflow:hidden; }
.business ul div.icon>img{position:absolute; top:50%; left:50%; transform:translateX(-50%)translateY(-50%); z-index:4;}
.business ul .iconBg{position:relative; width:150px; height:150px;}
.business ul li:nth-of-type(2) .iconBg{transform:rotate(-90deg);}
.business ul li:nth-of-type(3) .iconBg{transform:rotate(-180deg);}
.business ul li:nth-of-type(4) .iconBg{transform:rotate(-180deg);}
.business ul li:nth-of-type(6) .iconBg{transform:rotate(-90deg);}
.business ul .iconBg::before{content:""; position:absolute; display:block; width:75px; height:75px; z-index:2; transition:0.5s ease-in-out;}
.business ul .iconBg::after{content:"";position:absolute;display:block;width: 50%;height: 50%;background: #F7FCFE;z-index: 2;top: 0px;left: -2px;}
.business ul .iconBg1::before{bottom:0px; right:0px; transform-origin:bottom left; transform:rotate(-90deg); background:url('../../images/mo_bsns_move.png')no-repeat; }
.business ul .iconBg1::after{top:50%; left:-2px;}
.business ul .iconBg2::before{top:0px; right:0px; transform-origin:top left; transform:rotate(90deg); background:url('../../images/mo_bsns_move2.png')no-repeat; }
.business ul .iconBg .mainImg{position:relative;z-index: 3;}
.business ul .iconBg .subImg{position:absolute;right:0;bottom:0px;z-index: 1;}
.business ul .iconBg2 .subImg{top:0px; transform: rotate(-450deg);}
.business ul li.on .iconBg::before{ transform:rotate(0deg); }
.business ul li strong{font-size:3rem; font-weight:500;}
.business ul li p{width:364px; height:53px; margin-top:10px; font-size:1.4rem; line-height:18px; letter-spacing:-0.36px; opacity:0.8;}
.business ul li a,.business ul li i{position:relative; font-size:1.5rem;}
.business ul li a::before,.business ul li a::after{content:""; position:absolute; display:block;}
.business ul li a::before{top: 4px;margin-top:1px;right: -25px;width:17px;height:6px;background:url('../../images/main_arrow.png') no-repeat;}
/*.business ul li a::after{width:5px; top:8px; right:-20px; transform:rotate(45deg);}*/

.business ul.en li p{width:364px; height:auto; margin-top:10px; font-size:1.4rem; line-height:18px; letter-spacing:-0.36px; opacity:0.8;margin-bottom: 15px;}

/*service*/
.service{padding:120px 0;}
.service article h2{font-size: 4.5rem; margin-bottom:16px; line-height:1.2; letter-spacing: -0.06em;}
.service article>p{/*width:950px;*/ font-size:1.8rem; font-weight: 200; opacity:0.7;}
.service .portfolio{display:flex; margin-top:115px; justify-content:space-between;} 
.service .portfolio li{width:370px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.16); background:#fff; border-radius:20px 0px 20px 0px; overflow:hidden;}
.service .portfolio li img{width:100%; border-radius: 20px 0px 00px;}
.service .portfolio li figcaption{padding:46px 38px 56px;}
.service .portfolio li figcaption time{font-size:1.5rem; opacity:1; font-weight:200;}
.service .portfolio li figcaption strong{display:block; margin-bottom:6px; font-size:2rem; font-weight:500;}
.service .portfolio li figcaption p{height: 121px;font-size: 1.4rem;line-height:1.5; opacity:0.8;}/*0729*/
.service .portfolio li figcaption a{position:relative; display:block; width:196px; padding-left:25px; line-height:39px; border:1px solid #0033ff; border-radius:4px; transition-duration:0.2s;}
.service .portfolio li figcaption a:hover{border-radius:39px 0px 39px 0px; background:#0033ff; color:#fff;}
.service .portfolio li figcaption a::before,.service .portfolio li figcaption a::after{content:""; position:absolute; display:block; background:#0033ff; height:1px;}
.service .portfolio li figcaption a::before{top:50%; margin-top:1px; right:24px; width:15px;}
.service .portfolio li figcaption a::after{width:5px; top:18px; right:24px; transform:rotate(45deg);}
.service .portfolio li figcaption a:hover::before,.service .portfolio li figcaption a:hover::after{background: #fff;}

/*search*/
.search .searchBack{position:absolute; width:100%; height:440px; background:#040921; overflow:hidden; z-index:4;}
.search .searchBar{width:100%; height:440px; padding-top:160px; background:url('../../images/search.gif')no-repeat center;  text-align:center;}
.search .scVideo{position:absolute; top:0px; left:0px; z-index:-2;}
.search .searchBar h2{font-size:3rem; margin-bottom:15px; color:#fff;}
.search .searchBar fieldset{position:relative; width:450px; margin:0 auto;}
.search .searchBar input[type="text"]{position:relative; z-index:5; width:100%; height:50px; padding-left: 20px; padding-right: 55px; border-radius:40px; border:2px solid #59c7f7; font-size:2rem; background:transparent; color:#fff; background:#040a22;}
.search .searchBar input[type="text"]::placeholder{color:#59c7f7; opacity:0.3;}
.search .searchBar button{position:absolute; right:5px; top:5px; width:40px; height:40px; background:rgba(89, 199, 247,0.37) url('../../images/icon_search.png')no-repeat 50%/20px; font-size:0px; border-radius:50%; cursor:pointer;z-index: 10;}

/* .search .searchList {width:1280px; margin: 30px auto 100px;} */
.search .searchList{padding:460px 0 20px; z-index:3;}
.search .searchList>ul>li{display:table; width:100%; padding:56px 0px; border-bottom:1px solid #d8d8d8;}
.search .searchList strong{display:table-cell; font-size:3rem; font-weight:500; padding-left:24px; vertical-align:middle;}
.search .searchList li > ul{display:table-cell; width:995px;}/*0729*/
.search .searchList li > ul li{position:relative; display:inline-block; width:240px; margin:8px 3px; overflow:hidden; transition-duration:0.2s;}
.search .searchList li > ul li a{position:relative;display:block; height:52px; line-height:52px; font-size:1.6rem; text-align:center; overflow:hidden; border-radius:4px; border:1px solid rgba(0,0,0,0.1); transition-duration:0.2s;}
.search .searchList li > ul li a:hover{color:#fff; border-radius:50px 0px 50px 0px; background:#0033ff;}
.search .searchArea{position:absolute; top:24px; width:450px; height:0px; border:2px solid #59c7f7; border-radius:0px 0px 20px 20px; padding:0px 36px 0px 41px; transition-duration:0.3s; overflow:hidden;}/*0729*/
.search .searchArea.on{height:160px;}
.search .searchArea p{color:#59c7f7; margin-top:42px; font-size:1.7rem; font-weight:500; text-align:left; margin-bottom:15px; border-bottom:2px solid #59c7f7; padding-bottom:3px;}
.search .searchArea ul li{display:inline-block; color:#fff; font-weight:200; float:left; margin-right:14px; line-height:1.8rem;}
.search .searchArea ul li a:hover{color:#59c7f7 !important}/*0730*/

.search .searchList li > ul.en{display:table-cell; width:995px;}/*0729*/
.search .searchList li > ul.en li{position:relative; display:inline-block; width:480px; margin:8px 3px; overflow:hidden; transition-duration:0.2s;}
.search .searchList li > ul.en li a{position:relative;display:block; height:52px; line-height:52px; font-size:1.6rem; text-align:center; overflow:hidden; border-radius:4px; border:1px solid rgba(0,0,0,0.1); transition-duration:0.2s;}
.search .searchList li > ul.en li a:hover{color:#fff; border-radius:50px 0px 50px 0px; background:#0033ff;}

/*메인 페이지 - 연혁*/
main .since .path1{top: -238px;left:-201px;transform:translate(-80%,-80%);transition-duration: 1.5s;}
main .since .path2{top:-127px;left:-241px;transform:translate(-80%,-80%);transition-duration: 1.8s;}
main .since .path3{bottom:80px;right:97px;transform:translate(80%,0%);transition-duration: 1.2s;}
main .since .path4{bottom:0px;right:-60px;transform:translate(80%,0%);transition-duration: 1.5s;}
main .since.on .path1,main .since.on .path2,main .since.on .path3,main .since.on .path4{transform:translate(0%,0%); will-change:transform;}

/*메인 페이지 - 서비스*/
.service .paths{position:absolute;/* top:0px; *//* left:0px; */width:100%;height:100%;transform:scale(0.8);z-index: -1;}
.service .paths:nth-of-type(1){top: -180px;left:-150px;}
.service .paths:nth-of-type(2){right: -110px;top: 190px;}
.service .path5{top:-66px; left:-190px; transform:translate(-80%,-80%); animation-delay:0.8s;}
.service .path6{top:-66px; left:-409px; transform:translate(-80%,80%); }
.service .path7{bottom:120px; right:-320px; transform:translate(80%,-80%);}
.service .path8{bottom: -66px;right: -321px;transform:translate(80%,-80%);z-index:-1;}
.service.on .path6	{
	 -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -moz-animation-name: slideToptoBot;
	  -webkit-animation-name: slideToptoBot;
	  animation-name: slideToptoBot;
	 animation-fill-mode: forwards;
}
.service.on .path5	{
	 -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -moz-animation-name: slideBottoTop;
	  -webkit-animation-name: slideBottoTop;
	  animation-name: slideBottoTop;
	 animation-fill-mode: forwards;
}
.service.secondOn .path7	{
	 -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -moz-animation-name: slideBottoTop2;
	  -webkit-animation-name: slideBottoTop2;
	  animation-name: slideBottoTop2;
	 animation-fill-mode: forwards;
}
.service.secondOn .path8	{
	 -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -moz-animation-name: slideToptoBot2;
	  -webkit-animation-name: slideToptoBot2;
	  animation-name: slideToptoBot2;
	 animation-fill-mode: forwards;
}

@media (max-width: 1350px) {
	main .intro{padding:0px 20px;}
	main .inner{max-width:95vw;}
}