@charset "utf-8";
/* main.css */
.mb, .mbPortrait{display:none}

/* gnb */
.headerWrap{width:100%;height:160px;position:fixed;z-index:10;transition:all 0.2s linear 0s}
.headWrapIn{width:1250px;position:fixed;z-index:10;left:calc(50% - 625px);top:8%;transition:all 0.2s linear 0s}
.headerWrap.on{height:85px;border-bottom:1px solid rgba(255,255,255,0.5);background-color:rgba(255,255,255,0.3)}
.headerWrap.on .headWrapIn{top:2.5%}
.headerWrap.on .gnb li a{color:#000;}
.headerWrap.on .gnb li a.on{color:#fff;text-shadow:1px 1px #111}

.gnb{position:absolute;right:0;top:7px}
.gnb li{float:left;margin-left:70px;text-align:right;border:1px solid transparent}
.gnb li a{display:block;color:rgba(34,34,34,0.8);font-size:18px;font-weight:bold;font-family:"Comic Sans",sans-serif}/*color:rgba(201,188,38,0.8 )*/

.gnb li a:hover{color:#fff}
/* quick */
.quick{z-index:10;position:absolute;right:0;}
.quick li a{padding:0 20px;color:#bbb;display:block;line-height:40px;border-bottom:1px solid #999;text-align:center;border-radius:5px;font-size:14px;font-family:NanumGothicEB,sans-serif;}
.quick li a:hover,.quick li:focus{background:rgba(255,255,255,0.3);color:#000;}
.quick li a.on{background:rgba(0,0,0,0.7);color:#fff;}


/* content */
#content{overflow:hidden}
#content.border{border:30px solid red;box-sizing:border-box}
#content > div{width:100%;overflow:hidden;background-attachment:fixed;}
section{width:100%;height:100%;position:relative;z-index:3}
section div.w1250{position:relative;width:1250px;height:100%;margin:0 auto}
section h2{font-size:45px; font-family:NanumGothicEB,sans-serif;font-weight:bold;text-align:center}


/* page1 */
.page1{overflow:hidden;border:1px solid transparent}
.p1Bg{width:100%;height:100%;position:absolute;background:url(../img/main/bg.jpg)no-repeat center center;background-size:cover;animation:p1Bg 120s linear 0s infinite;overflow:hidden;border:1px solid transparent}
@keyframes p1Bg{
	0%{transform: scale(1) rotate(0deg);}
	50%{transform: scale(1.3) rotate(0.001deg)}
	100%{transform: scale(1) rotate(0deg);}
}
.typing{font-size:50px;font-family:NanumGothicEB,sans-serif;position:absolute;left:0;top:calc(50% - 25px);color:#fff;text-shadow: 1px 1px #333;}


/* page2 */
.page2{background:url(../img/main/page_bg2.jpg)no-repeat 50%;background-size:cover;position:relative}
.page2:before{content:"";display:block;width:100%;height:100%;background:#fff;opacity:0.6;position:absolute;left:0;top:0;z-index:1} 
.page2 h2{opacity:0;color:#333;margin-top:350px;}
.pg2Txt{line-height:30px;text-align:center;}
.pg2Txt li{opacity:0;margin:25px 0;color:#333;font-size:16px;font-weight:bold;font-family:NanumGothicEB,sans-serif}
.pg2Txt li.iconLogo{background:url(../img/main/about.png)no-repeat center;
					height:200px;background-size:8%;margin:0}
.pg2Txt li:first-child{margin-top:10px}

#content > div.page2 > section.on h2{opacity:1;transform: translate(0, -100px);transition:all 0.4s linear 0s;}
#content > div.page2 > section.on .pg2Txt li{opacity:1;transform: translate(0, -100px);transition:all 0.4s linear 0s;}
#content > div.page2 > section.on .pg2Txt li:nth-of-type(2){transition:all 0.4s linear 0.3s;}
#content > div.page2 > section.on .pg2Txt li:nth-of-type(3){transition:all 0.4s linear 0.6s;}



/* page3 */
.page3{background:url(../img/main/page_bg3.jpg)no-repeat 50%;background-size:cover;position:relative}
.page3:after{content:"";display:block;width:100%;height:100%;background:#000;opacity:0.5;position:absolute;left:0;top:0;z-index:2}
.pg3In{width:1250px;height:100%;margin:0 auto}
.pg3In h2{margin-top:14%;margin-bottom:135px;color:#fff}

.pg3In .box{float:left;width:24.25%;margin-right:1%;height:250px;margin-bottom:30px;cursor:pointer;opacity:0}
.pg3In div.box:nth-of-type(4n){margin-right:0}
#content > div.page3 > section.on .pg3In .box{opacity:1;transform: translate(0, -50px);}
#content > div.page3 > section.on .pg3In .box:nth-of-type(1){transition:all 0.25s linear 0s;}
#content > div.page3 > section.on .pg3In .box:nth-of-type(2){transition:all 0.25s linear 0.25s;}
#content > div.page3 > section.on .pg3In .box:nth-of-type(3){transition:all 0.25s linear 0.5s;}
#content > div.page3 > section.on .pg3In .box:nth-of-type(4){transition:all 0.25s linear 0.75s;}
#content > div.page3 > section.on .pg3In .box:nth-of-type(5){transition:all 0.25s linear 1s;}
#content > div.page3 > section.on .pg3In .box:nth-of-type(6){transition:all 0.25s linear 1.25s;}
#content > div.page3 > section.on .pg3In .box:nth-of-type(7){transition:all 0.25s linear 1.5s;}
#content > div.page3 > section.on .pg3In .box:nth-of-type(8){transition:all 0.25s linear 1.75s;}

.box dl{position:relative;overflow:hidden;padding:45px 25px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;width:100%;height:100%;
		transition:0.2s linear 0s}
.box:nth-of-type(1) dl{background:url(../img/main/solution01.png)no-repeat;background-position:50% 70%;background-size:14%;background-color:rgba(255,255,255,0.95)}
.box:nth-of-type(2) dl{background:url(../img/main/solution02.png)no-repeat;background-position:50% 70%;background-size:25%;background-color:rgba(255,255,255,0.95)}
.box:nth-of-type(3) dl{background:url(../img/main/solution03.png)no-repeat;background-position:50% 70%;background-size:25%;background-color:rgba(255,255,255,0.95)}
.box:nth-of-type(4) dl{background:url(../img/main/solution04.png)no-repeat;background-position:50% 70%;background-size:25%;background-color:rgba(255,255,255,0.95)}
.box:nth-of-type(5) dl{background:url(../img/main/solution05.png)no-repeat;background-position:50% 70%;background-size:30%;background-color:rgba(255,255,255,0.95)}
.box:nth-of-type(6) dl{background:url(../img/main/solution06.png)no-repeat;background-position:50% 70%;background-size:25%;background-color:rgba(255,255,255,0.95)}
.box:nth-of-type(7) dl{background:url(../img/main/solution07.png)no-repeat;background-position:50% 70%;background-size:25%;background-color:rgba(255,255,255,0.95)}
.box:nth-of-type(8) dl{background:url(../img/main/solution08.png)no-repeat;background-position:50% 70%;background-size:25%;background-color:rgba(255,255,255,0.95)}

.box dl dt{text-align:center;color:#333;font-size:25px;font-weight:bold;margin-bottom:15px;}
.box dl dd{z-index:3;opacity:0;transition:all 0.4s linear 0s;color:#fff;line-height:30px;white-space:normal;word-break:keep-all;position:absolute;left:14%;width:76%;top:50%;margin-top:40px}
.box dl:after{z-index:1;opacity:0;transition:all 0.4s linear 0s;content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:50%;background:rgba(0,0,0,0.7);border-radius:10px;border:1px solid #333;box-sizing:border-box}
.box dl:hover{background-image:none;background-position:50% 70%;/* background-size:0 */border:none;background-color:transparent}
.box dl:hover:after{top:0;opacity:1}
.box dl:hover dt{display:none}
.box dl:hover dd{opacity:1;top:0}




/* page4 */
.page4{background:url(../img/main/page_bg3.jpg)no-repeat 50%;background-size:cover;position:relative}
.page4:before{content:"";display:block;width:100%;height:100%;background:#093850;opacity:0.5;position:absolute;left:0;top:0;z-index:1} 
.pg4In{width:1250px;margin:0 auto;}
.pg4In h2{color:#fff;margin:15% 0 11%}
.p4Box li{position:relative;float:left;width:31.333%;height:380px;margin-left:3%;opacity:0;}
.p4Box li:first-of-type{margin-left:0}
.p4Box li button{width:95%;height:55px;border:1px solid #fff;border-radius:10px;text-align:center;background:transparent;margin:10px auto 0; display:block;box-sizing:border-box;transition:all 0.25s linear 0s;}
.p4Box li button a{color:#fff;font-size:14px;font-family:NanumGothicEB,sans-serif;display:block;line-height:50px}
.p4Box li button:hover{background:rgba(255,255,255,1);}
.p4Box li button:hover a{color:#000}

.p4Box1{position:relative;width:100%;height:100%;background:#fff;text-align:center;box-sizing:border-box;border-radius:10px;cursor:pointer;overflow:hidden;margin-bottom:30px}
.p4Box1 img{width:240px;margin:100px auto 60px}
.wMid .p4Box1 img{margin:105px auto 55px}
.wSmall .p4Box1 img{width:230px;margin-top:110px}
.p4Box1 > p{color:#666;word-break:keep-all}
.p4Box1 > p:nth-of-type(1){font-size:22px;color:#222;font-family:NanumGothicEB,sans-serif}
.p4Box1 > p span{display:block;font-size:12px;color:#888;margin-top:5px}
#content > div.page4 > section.on .p4Box li{opacity:1;transform: translate(0, -80px);transition:all 0.3s linear 0s;}
#content > div.page4 > section.on .p4Box li:nth-of-type(2){transition:all 0.3s linear 0.3s;}
#content > div.page4 > section.on .p4Box li:nth-of-type(3){transition:all 0.3s linear 0.6s;}


.p4Box2{opacity:0;position:absolute;left:0;top:100px;width:100%;height:100%;border-radius:10px;word-break:keep-all;line-height:25px;
			background:rgba(0,0,0,0.7);color:#fff;text-align:left;padding:43px;box-sizing:border-box;transition:all 0.4s linear 0s;}
.p4Box2 > p:nth-of-type(1){font-size:20px;margin-bottom:25px}
.p4Box2 > p:nth-of-type(1) span{display:block;margin:20px 0px;color:#fff;font-weight:bold;font-size:30px;font-family:NanumGothicEB,sans-serif;
								text-shadow:-1px -1px 0 #141c4a, 1px -1px 0 #141c4a, -1px 1px 0 #141c4a,1px 1px 0 #141c4a;}

.p4Box1:hover .p4Box2{opacity:1;transform: translate(0, -100px);transition:all 0.4s linear 0s;}
.p4Box1:hover{background:transparent;}
.p4Box1:hover img, .p4Box1:hover > p{display:none}



/* page5 */
.page5{background:url(../img/main/page_bg5.jpg)no-repeat 50%;background-size:cover;position:relative}
.page5:before{content:"";display:block;width:100%;height:100%;background:#000;opacity:0.7;position:absolute;left:0;top:0;z-index:1} 
.pg5In{width:1250px;height:100%;margin:0 auto}
.pg5In h2{margin-top:14.5%;color:#eee}
.clieTit{font-size:25px;color:#fff;margin:20px 0 10px;font-weight:bold/* text-shadow:2px 2px #333 */}
.client{width:100%}
.client li{float:left;width:14.28571%;height:80px;border:1px solid #aaa;border-left:none;border-top:none;box-sizing:border-box;
			padding:25px 20px;background-color:#fff;position:relative;overflow:hidden;cursor:pointer}

.client li.sm20{padding:20px 10px}
.client li.sm15{padding:15px 10px}
.client li.sm10{padding:10px 10px}
.client li.sm5{padding:5px 10px}

.client li span > img{height:100%;width:auto;margin:0 auto}
.client li:nth-of-type(7n+1){border-left:1px solid #aaa}
.client li:nth-of-type(1),.client li:nth-of-type(2),.client li:nth-of-type(3),.client li:nth-of-type(4),.client li:nth-of-type(5),.client li:nth-of-type(6),.client li:nth-of-type(7){border-top:1px solid #aaa}
.client li a{display:block;width:100%;height:100%}
.client li span{display:block;width:100%;height:100%;text-align:Center}

.client li:hover{animation:partner 0.2s linear 0s 1 normal;}
@keyframes partner{
	0%{background-color:#ddd;}
	100%{background-color:#fff;}		
}

.clie2Tit{margin-top:50px}
.clie2{width:100%;position:relative}
.clieSlide{height:80px}
.clieSlide li{height:80px;padding:23px 20px;box-sizing:border-box;border-left:1px solid #aaa;background:#fff;}
.clieSlide li span{display:block;width:100%;height:100%;}
.clieSlide li span > img{height:100%;width:auto;margin:0 auto}
.clie2Prev, .clie2Next{position:absolute;top:23px;cursor:pointer}
.clie2Prev{left:-20px}
.clie2Next{right:-20px}
.clieSlide li:hover{animation:partner 0.2s linear 0s 1 normal;}



/* page6 */
.page6{position:relative;background:url(../img/main/page_bg6.jpg)no-repeat 50%;background-size:cover;position:relative}
.page6 h2{position:absolute;left:calc(50% - 85px);top:-8%;z-index:6;color:#fff;transition:all 0.5s linear 0s;margin-top:14%}
.mapBox{width:100%;height:100%;}
.skewT, .skewB{transition:all 0.5s linear 0s;width:100%;height:100%;background:rgba(0,0,0,0.7);position:absolute;left:0;top:0;z-index:5;transform:skewY(170deg);}
.skewT{top:-61%}
.skewB{top:61%}
.page6 > section.on .skewT{top:-70%}
.page6 > section.on .skewB{top:60%}
/* .skewR, .skewL{transition:all 0.5s linear 0s;width:100%;height:100%;background:rgba(0,0,0,0.6);position:absolute;	right:0;top:0;z-index:6;transform:skewX(170deg);}
.skewR{right:51%}
.skewL{left:51%}
#content > div.page6 > section.on .skewR{right:80%}
#content > div.page6 > section.on .skewL{left:80%} */

.pg6InTxt{width:1250px;height:22%;position:absolute;left:calc(50% - 625px);bottom:0;z-index:5;color:#fff;transition:all 0.4s linear 0s}
.pg6InTxt ul{float:left;margin-right:5%;width:30%;transition:all 0.4s linear 0s}
.pg6InTxt ul:first-child{width:40%}
.pg6InTxt ul:nth-child(2){width:20%}
.pg6InTxt ul:last-child{margin-right:0;text-align:right}
.pg6InTxt ul button{width:89%;height:57px;margin-top:28px;background:transparent;border:1px solid #fff;border-radius:10px;transition:all 0.25s linear 0s;}
.pg6InTxt ul button a{font-size:16px;font-weight:bold;color:#fff;display:block;height:57px;line-height:53px;}
.pg6InTxt ul button:hover{background:#fff}
.pg6InTxt ul button:hover a{color:#000}

.pg6InTxt ul li{line-height:30px}
.pg6InTxt ul li span{font-size:16px;font-weight:bold;text-shadow:1px 1px #333;margin-right:20px;box-sizing:border-box}
.pg6InTxt ul li span.pcPortrait{font-size:13px}
.pg6InTxt ul li span.txtS{padding-left:3px;margin-right:22px}
.pg6InTxt ul li span.txtM{padding-left:2px}
.footIcon{width:170px;height:125px;background:url(../img/main/foot_img.png)no-repeat center right;background-size:contain;text-align:right;display:inline-block}

.mapHover a{width:2000px;height:283px;position:absolute;left:calc(50% - 1000px);top:calc(50% - 190px);z-index:5;cursor:pointer;transform:skewY(170deg)}
.page6 > section.on .skewT.on{top:-80%}
.page6 > section.on .skewB.on{top:80%}
.page6 h2.on{left:calc(50% - 625px);}

.pg6InTxt.on{bottom:-15px}
.pg6InTxt.on ul:first-child{opacity:0}
.pg6InTxt.on ul:nth-child(2){opacity:0}


@media screen and (max-width:1300px){
/*header*/
.headWrapIn{width:85%;left:7.5%}
.gnb li{margin-left:48px}
section div.w1250, .pg3In, .pg4In, .pg5In, .pg6InTxt{width:85%;}

/* page2 */
.page2 h2{margin-top:27%}
.pg2Txt li.iconLogo{height:170px}

/* page3 */
.box dl dd{left:10%;width:80%;font-size:12px;line-height:26px}
.pg3In h2{margin:11% auto 7%}
.pg3In .box{height:230px}

/* page4 */
.p4Box1{padding:5%;margin-bottom:15px}
.p4Box li{height:280px}
.p4Box1 img{width:80%;margin:17% auto 10%}
.wMid .p4Box1 img{margin:18% auto 10%}
.wSmall .p4Box1 img{width:80%;margin:18% auto 10%}
.p4Box2{font-size:12px;padding:10%;line-height:18px}
.p4Box2 > p:nth-of-type(1){font-size:18px;margin-bottom:20px}
.p4Box li button{margin:5px auto 0 }

/* page5 */
.pg5In h2{margin-top:11%;}
.clieTit{margin:5px 0 5px}
.clie2Tit{margin-top:15px}

/* page6 */
.pg6InTxt, .page6 h2.on{left:7.5%;}
.pg6InTxt ul{margin-right:3%;width:38%}
.pg6InTxt ul:first-child{width:30%}
.pg6InTxt ul:nth-child(2){width:22%}
.pg6InTxt ul li{font-size:13px;line-height:25px}
.pg6InTxt ul:nth-child(2){width:22%}
.pg6InTxt ul button{height:45px;margin-top:5px}
.pg6InTxt ul button a{line-height:42px}
.footIcon{height:103px}

} /* //1300 */


@media screen and (max-width:1024px){
.pc{display:none}
.mb{display:block}
.gnb{display:none}


/* page2 */
.pg2Txt{width:90%;margin:0 auto;word-break:keep-all;}

/* page3 */
/* page4 */
/* page5 */
/* page6 */


/* Landscape mode 가로로 긴 화면 */
@media only screen and (orientation: landscape) {
.mbGnbClose{display:none}

} /* //1024가로화면*/


/* Portrait mode 세로화면 */
@media only screen and (orientation: portrait) {
.pcPortrait{display:none}
.mbPortrait{display:block}
h1 .logo img{width:37%;margin-top:-9px}
.mbGnb{width:30px;height:21px;background:url(../img/main/mb_gnb.png)no-repeat center;background-size:cover;position:absolute;right:0;top:calc(50% - 15px);cursor:pointer;z-index:12}
.quick{z-index:20;position:fixed;width:65%;background:#fff;top:0 !important;right:-65% !important;height:100%;transition:all 0.4s linear 0s;padding-top:70px}
.quick.on{right:0 !important}
.quick li a{font-size:16px;border-radius: inherit;line-height:70px;padding:0 40px;text-align:left}
.quick li:first-of-type a{border-top:1px solid #999}
.mbGnbClose{opacity:0;position:fixed;left:100%;top:0;font-size:20px;width:65%;line-height:70px;height:80px;color:#000;transition:all 0.4s linear 0s;padding-left:40px}
.mbGnbClose:after{background: url(../img/main/mb_gnb_close.png)no-repeat center;cursor: pointer;content: "";width: 24px;height: 23px;display:inline-block;position:absolute;left:-40px;top:22px}
.mbGnbClose.on{z-index:21;opacity:1;left:35%;display:block}
.mbGnbClose img{width:45%}
.headerWrap.on{height:50px}
.mbBg{display:none;z-index:19;width:100%;height:100%;background:rgba(0,0,0,0.6);position:fixed;left:0;top:0}
section h2{font-size:30px}
/*page1*/
section div.w1250{width:64%}
.typing{text-indent:-6px;top:calc(50% - 70px);font-size:30px}
/*page2*/
.page2 h2{margin-top:56%}
.pg2Txt li{margin:15px 0 15px;font-size:14px;line-height:25px}
.pg2Txt li.iconLogo{height:90px;background-size:26%}
#content > div.page2 > section.on .pg2Txt li:nth-of-type(1){transition: all 0.4s linear 0.3s;}
#content > div.page2 > section.on .pg2Txt li:nth-of-type(2){transition: all 0.4s linear 0.6s;}
#content > div.page2 > section.on .pg2Txt li:nth-of-type(4){transition: all 0.4s linear 0.9s;}
/*page3*/
.pg3In h2{margin:25% 0 22%}
.pg3In .box{width:49%;margin-right:0.5%;margin-bottom:5px;height:17.5%}
.box dl{padding:13px 8px;border-radius:4px}
.box dl:after{border-radius:4px}
.box dl dt{font-size:15px;font-weight:bold}
.box dl dd{margin-top:25px;line-height:16px}
.box:nth-of-type(1) dl{background-size:13%}
.box:nth-of-type(2) dl{background-size:23%}
.box:nth-of-type(3) dl{background-size:22%}
.box:nth-of-type(4) dl{background-size:21%;background-position:48% 84%;}
/* .box:nth-of-type(5) dl{background-size:30%} */
.box:nth-of-type(6) dl{background-size:23%;background-position:50% 80%;}
/* .box:nth-of-type(7) dl{background-size:25%} */
.box:nth-of-type(8) dl{background-size:23%}
.box:nth-of-type(8) dl:hover dt{font-size:23px;margin-top:28px;}
/*page4*/
.pg4In h2{margin:30% 0 38%}
.p4Box1{border-radius:4px}
.p4Box1 img{margin:40% auto 10%}
.wMid .p4Box1 img{margin:43% auto 10%}
.wSmall .p4Box1 img{margin:44% auto 10%}
.p4Box li{height:250px}
.p4Box li button{border-radius:4px;height:46px}
.p4Box li button a{line-height:12px;font-size:12px}
.p4Box1 > p:nth-of-type(1){font-size:14px;margin:5px}
.p4Box1 > p span{margin:13px 0 0}

.p4Box2{border-radius:4px;font-size:10px;line-height:14px}
.p4Box2 > p:nth-of-type(1){font-size:10px;margin-bottom:0}
.p4Box2 > p:nth-of-type(1) span{font-size:10px;margin:5px 0}
/*page5*/
.pg5In h2{margin-top:30%}
.client li{width:100%;height:210px;padding:0;border:none}
.client li:after{content:"";display:block;clear:both}
.client li a{width:33.333%;float:left;height:70px;padding:20px 10px;box-sizing:border-box;border-left:1px solid #aaa;border-top:1px solid #aaa}
.client li a:nth-of-type(1), .client li a:nth-of-type(2), .client li a:nth-of-type(3){border-top:none}
.client li a:nth-of-type(3n+1){border-left:none}
.clientSlide{position:relative}
.clie1Prev{position:absolute;top:calc(50% - 17px);left:-20px}
.clie1Next{position:absolute;top:calc(50% - 17px);right:-20px}
.clieSlide li{padding:30px 5px}
.clieTit{margin:20px 0 5px}
.clie2Tit{margin-top:40px}
.client li:hover{animation:none}
.client li a:hover {animation:partner 0.2s linear 0s 1 normal;}
/*page6*/
.page6 h2{top:7%;left:calc(50% - 54.58px)}
.pg6InTxt{height:19%}
.pg6InTxt ul:first-child{width:100%}
.pg6InTxt ul:nth-child(2){width:100%}
.pg6InTxt ul:nth-child(2) li{float:left;width:50%}
#content .page6 > section .skewT{top:-76%}
#content .page6 > section .skewB{top:72%}
/* .pg6InTxt{bottom:5%} */
.pg6InTxt ul li{font-size:10px;line-height:16px}
.pg6InTxt ul li.pcPortrait{display:none}
.pg6InTxt ul li span{font-size:11px;margin-right:5px}
.pg6InTxt ul li span.txtS{margin-right:5px}
.pg6InTxt ul:nth-child(2){position:relative;z-index:3}
.pg6InTxt ul:last-child{position:absolute;right:0;bottom:10px;width:100%;z-index:1}
.footIcon{height:80px}
.pg6InTxt ul li.copy{text-align:center;border:1px solid #aaa;border-radius:4px;padding:3px 0}


}/* //1024세로화면*/

}/* //1024 */

@media screen and (max-width:780px){
.mbGnb{width:20px;height:15px}

}