@charset "UTF-8";

html, body {overflow:hidden;width:100%;height:100%;min-width:980px;min-height:700px}
a, button {-webkit-tap-highlight-color:transparent;}

#wrap {height:100%}

#header {position:absolute;width:100%;min-width:980px;height:60px;background:rgba(0,0,0,0.3);z-index:110}
#header h1 {position:absolute;left:20px;top:9px}
#header h1 a {display:block;width:91px;height:42px;background:url(../images/logo.png) no-repeat;text-indent:-9999em}
#header {}
#gnb {position:absolute;right:20px;top:0}
#gnb ul {overflow:hidden}
#gnb li {position:relative;float:left;height:60px;padding:0 20px;margin-left:22px}
#gnb li a {display:block;line-height:60px;color:#fff;font-size:20px;text-indent:-9999em}
#gnb li:first-child a {width:59px;background:url(../images/txt/gnb_company.png) no-repeat 0 21px}
#gnb li:nth-child(2) a {width:46px;background:url(../images/txt/gnb_service.png) no-repeat 0 22px}
#gnb li:nth-child(3) a {width:50px;background:url(../images/txt/gnb_portfolio.png) no-repeat 0 22px}
#gnb li:nth-child(4) a {width:48px;background:url(../images/txt/gnb_contact.png) no-repeat 0 22px}
#gnb li.on {height:70px;background:#13b8cd}
#gnb li.on a {line-height:70px;background-position:0 25px}
.btn_gnb {display:none}

#header {
opacity:0;
-ms-transform:translate3d(0,-60px,0);-webkit-transform:translate3d(0,-60px,0);transform:translate3d(0,-60px,0);
-ms-transition-timing-function:"easeInOutQuint";-webkit-transition-timing-function:"easeInOutQuint";transition-timing-function:"easeInOutQuint"
-ms-transition:all 1s 0s;-webkit-transition:all 1s 0s;transition:all 1s 0s;
}

.ready #header {opacity:1;-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}


#pageNav {position:absolute;right:15px;top:50%;margin-top:-40px;z-index:110;opacity:0}
#pageNav li {margin-bottom:7px;text-align:center}
#pageNav button {display:inline-block;width:6px;height:6px;background:#eaeaea;border-radius:3px;cursor:pointer;outline:none}
#pageNav li.on button {width:12px;height:12px;background:#fff;border-radius:6px}
#pageNav.last button {background:#5d5d5d}
#pageNav.last li.on button {background:#000}

#pageNav button {-ms-transition:background 1s 0s;-webkit-transition:background 1s 0s;transition:background 1s 0s;}


#contents {position:relative;width:100%;height:100%}
.content {overflow:hidden;position:absolute;top:100%;width:100%;height:100%;min-width:980px;background:rgba(0,0,0,0.2)}
.content h2 {text-indent:-9999em}

.ready .content {
-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
-ms-transition:all 1s 0s;-webkit-transition:all 1s 0s;transition:all 1s 0s;
-ms-transition-timing-function:"easeInOutQuint";-webkit-transition-timing-function:"easeInOutQuint";transition-timing-function:"easeInOutQuint"}
.content.prev {-ms-transform:translate3d(0,-100%,0);-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}

#intro {z-index:100;top:0}
#company {z-index:90}
#service {z-index:80}
#portfolio {z-index:70}
#contact {z-index:60}


/* intro */
#intro {top:0;background:#fff;z-index:100;opacity:0}
#intro .bg {position:absolute;left:0;top:0;width:100%;height:100%}
#intro .top {position:absolute;left:0;top:50%;width:100%;margin-top:-223px;opacity:0}
#intro .title {position:relative;height:149px;background:url(../images/txt/txt_title.png) no-repeat center 0;margin:0 0 130px 0;text-indent:-9999em}
#intro .intro {position:relative;height:73px;background:url(../images/txt/txt_intro.png) no-repeat center 0;margin-bottom:50px;text-indent:-9999em}
#intro .download {position:relative;text-align:center}
#intro .download a {display:inline-block;width:290px;height:44px;background:url(../images/btn/btn_download.png) no-repeat;text-indent:-9999em}
#intro .bottom {position:absolute;left:0;bottom:40px;width:100%;padding-bottom:106px;background:url(../images/bg/bg_mouse.png) no-repeat center bottom;opacity:0}

#intro .title {
-ms-transform:translate3d(-100%,0,0);-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);
-ms-transition:all 1.7s 0s;-webkit-transition:all 1.7s 0s;transition:all 1.7s 0s;
}
#intro .intro {
-ms-transform:translate3d(100%,0,0);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);
-ms-transition:all 1.5s 0.2s;-webkit-transition:all 1.5s 0.2s;transition:all 1.5s 0.2s;
}

#intro .download, #intro .bottom {
-ms-transform:translate3d(0,40px,0);-webkit-transform:translate3d(0,40px,0);transform:translate3d(0,40px,0);
-ms-transition:all 1.5s 0.3s;-webkit-transition:all 1.5s 0.3s;transition:all 1.5s 0.3s;
}
#intro .title, #intro .intro, #intro .download {opacity:0;-ms-transition-timing-function:"easeInOutQuint";-webkit-transition-timing-function:"easeInOutQuint";transition-timing-function:"easeInOutQuint"}
.ready #intro .title, .ready #intro .intro, .ready #intro .download, .ready #intro .bottom {opacity:1;-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.ready #intro .top, .ready #pageNav {opacity:1;-ms-transition:all 0.7s 0s;-webkit-transition:all 0.7s 0s;transition:all 0.7s 0s;}


/* company */
#company {background:url(../images/bg/bg_company.jpg) no-repeat center 0;background-size:cover;z-index:90}
#company h2 {height:68px;margin-bottom:50px;background:url(../images/txt/tlt_company.png) no-repeat center 0}
#company .top {padding:120px 0 0 0;background:rgba(0,0,0,0.1);border-bottom:1px solid rgba(256,256,256,0.2)}
#company .tab {text-align:center}
#company .tab li {display:inline-block;padding-left:23px;margin-right:20px;background:url(../images/ico/bul_dot.png) no-repeat 0 5px}
#company .tab li:first-child {padding-left:0;background:none}
#company .tab li:last-child {margin-right:0}
#company .tab li a {display:block;height:15px;padding-bottom:14px;text-indent:-9999em;opacity:0.7}
#company .tab li:first-child a {width:67px;background:url(../images/txt/tab_overview.png) no-repeat}
/*#company .tab li:nth-child(2) a {width:50px;background:url(../images/txt/tab_history.png) no-repeat}*/ /*2016-07-26*/
#company .tab li:nth-child(2) a {width:121px;background:url(../images/txt/tab_business.png) no-repeat}
#company .tab li:nth-child(3) a {width:42px;background:url(../images/txt/tab_client.png) no-repeat}
#company .tab li.on a {display:block;padding-bottom:11px;border-bottom:3px solid #fff;opacity:1}
#company .btnWrap {display:none}

#overview .inner {position:absolute;left:100%;top:50%;width:100%;height:337px;margin:-36px 0 0 0}
#overview p {height:64px;margin-bottom:90px;background:url(../images/txt/title_overview.png) no-repeat center 0;text-indent:-9999em}
#overview ul {overflow:hidden;width:985px;margin:0 auto}
#overview li {float:left;margin-right:10px}
#overview li:last-child {margin-right:0}
#overview dl {width:189px;height:183px;}
#overview dt, #overview dd {text-indent:-9999em}
#overview .over {display:none}
#overview li:first-child dl {background:url(../images/company/overview_fervor_off.png) no-repeat}
#overview li:nth-child(2) dl {background:url(../images/company/overview_idea_off.png) no-repeat}
#overview li:nth-child(3) dl {background:url(../images/company/overview_insight_off.png) no-repeat}
#overview li:nth-child(4) dl {background:url(../images/company/overview_experience_off.png) no-repeat}
#overview li:nth-child(5) dl {background:url(../images/company/overview_confidence_off.png) no-repeat}
#overview li:first-child .over {background:url(../images/company/overview_fervor_on.png) no-repeat}
#overview li:nth-child(2) .over {background:url(../images/company/overview_idea_on.png) no-repeat}
#overview li:nth-child(3) .over {background:url(../images/company/overview_insight_on.png) no-repeat}
#overview li:nth-child(4) .over {background:url(../images/company/overview_experience_on.png) no-repeat}
#overview li:nth-child(5) .over {background:url(../images/company/overview_confidence_on.png) no-repeat}

/*#overview li:hover dl, #overview li:focus dl {display:none}
#overview li:hover .over, #overview li:focus .over {display:block}*/

#history {position:absolute;left:0;top:63%;width:100%;border-top:1px dashed rgba(256,256,256,0.7)}
#history .history {position:absolute;top:0;width:270px;margin:-6px 0 0 -135px;color:#fff}
#history .history2010 {left:15%}
#history .history2011 {left:29%;width:310px;margin-left:-155px}
#history .history2012 {left:43%;width:220px;margin-left:-110px}
#history .history2013 {left:57%;width:280px;margin-left:-140px}
#history .history2014 {left:71%;width:350px;margin-left:-175px}
#history .history2015 {left:85%;width:230px;margin-left:-90px}
#history .history dd {position:absolute;left:0}
#history .history2010 dd, #history .history2012 dd, #history .history2014 dd {bottom:75px}
#history .history2011 dd, #history .history2013 dd, #history .history2015 dd {top:75px}

#history dt {padding-top:26px;background:url(../images/ico/bul_circle.png) no-repeat center 0;font-size:30px;font-weight:bold;text-align:center;font-family:HNU}
#history dd {font-size:12px}
#history dd li {padding-left:7px;margin-bottom:10px;background:url(../images/ico/bul_dot_1x2.png) no-repeat 0 5px;}

#business {position:absolute;left:0;top:50%;width:100%;margin-top:-65px}
#business p {height:68px;margin-bottom:50px;background:url(../images/txt/title_business.png) no-repeat center 0;text-indent:-9999em}
#business .list {overflow:hidden;width:984px;margin:0 auto}
#business .list > li {float:left;width:25%}
#business dt {height:63px;padding-top:48px;text-align:center;font-size:20px;color:#fff;font-family:NBG;}
#business .list > li:first-child dt {background:url(../images/bg/bg_business01.png) no-repeat}
#business .list > li:nth-child(2) dt {background:url(../images/bg/bg_business02.png) no-repeat}
#business .list > li:nth-child(3) dt {background:url(../images/bg/bg_business03.png) no-repeat}
#business .list > li:nth-child(4) dt {background:url(../images/bg/bg_business04.png) no-repeat}
#business dd {padding:30px 0 22px 0;border-right:1px solid rgba(256,256,256,0.2)}
#business .list > li:first-child dd {border-left:1px solid rgba(256,256,256,0.2)}
#business dd li {margin-bottom:8px;text-align:center;color:#fff;font-size:15px;font-family:NBG;}

#client {position:absolute;left:0;top:50%;width:100%}
#client .client {position:relative;overflow:hidden;margin:0 auto}
#client ul {position:absolute;overflow:hidden;margin:0 auto}
#client li {float:left;padding:15px 20px}

#client .pageBtn button {position:absolute;top:50%;display:block;width:23px;height:45px;margin-top:-23px;text-indent:-9999em;cursor:pointer;outline:none}
#client .pageBtn .btn_prev {left:40px;background:url(../images/btn/btn_serveic_prev.png) no-repeat}
#client .pageBtn .btn_next {right:40px;background:url(../images/btn/btn_serveic_next.png) no-repeat}


/* service */
#service {z-index:80}
#service .top {position:relative;z-index:75}
#service h2 {height:72px;margin:120px 0 34px 0;background:url(../images/txt/tlt_service.png) no-repeat center 0}
#service .tab {overflow:hidden;width:601px;margin:0 auto}
#service .tab li {float:left;display:inline-block;width:119px;border:1px solid #fff;border-left:0 none;background:rgba(256,256,256,0.1)}
#service .tab li:first-child {border:1px solid #fff}
#service .tab .on {background:#fff}
#service .tab li a {display:block;height:34px;font-size:18px;color:#fff;font-family:NBG;line-height:36px;text-align:center}
#service .tab .on a {color:#5d5d5d}

#service .tab_content {position:absolute;left:0;top:0;width:100%;height:100%}
#service .tab_con {position:absolute;left:100%;top:0;width:100%;height:100%}


#service .bottom {position:absolute;left:0;bottom:0;width:100%;height:35%;background:#f0f0f0}
#service .inner {position:relative;width:577px;height:215px;padding:30px 0 0 407px;margin:0 auto}
#service .txt {margin-bottom:20px;color:#767676;font-size:17px;font-family:NBG;letter-spacing:-1px}
#service .inner dl li {margin-bottom:7px;color:#777777;font-size:12px;letter-spacing:-1px}
#service .inner dt {height:27px;margin-bottom:12px;text-indent:-9999em}
#service .btn_link {overflow:hidden;position:absolute;left:407px;bottom:0}
#service .btn_link li {float:left;margin-right:10px}
#service .btn_link a {display:block;width:167px;height:55px;text-indent:-9999em}
.btn_google {background:url(../images/btn/btn_google.png) no-repeat}
.btn_apple {background:url(../images/btn/btn_apple.png) no-repeat}
.btn_cardeal {background:url(../images/btn/btn_cardeal.png) no-repeat}
.btn_facespec {background:url(../images/btn/btn_facespec.png) no-repeat}

#service .bg {height:65%}

#service #cardeal {left:0}
#cardeal .bg {background:url(../images/bg/bg_cardeal.jpg) no-repeat center center;background-size:cover}
#cardeal dt {background:url(../images/txt/txt_cardeal.png) no-repeat}
#cardeal .largeIco {position:absolute;left:0;top:0;width:332px;height:384px;margin-top:-130px;background:url(../images/bg/cardeal_phone.png) no-repeat;opacity:0;}

#facespec {}
#facespec .bg {background:url(../images/bg/bg_facespec.jpg) no-repeat center center;background-size:cover}
#facespec dt {background:url(../images/txt/txt_facespec.png) no-repeat}
#facespec .largeIco {position:absolute;left:-10px;top:0;width:395px;height:245px;margin-top:-70px;background:url(../images/bg/facespec_monitor.png) no-repeat;opacity:0}

#service .pageBtn {}
#service .pageBtn button {position:absolute;top:50%;display:block;width:23px;height:45px;margin-top:-70px;text-indent:-9999em;cursor:pointer;outline:none}
#service .pageBtn .btn_prev {left:80px;background:url(../images/btn/btn_serveic_prev.png) no-repeat}
#service .pageBtn .btn_next {right:80px;background:url(../images/btn/btn_serveic_next.png) no-repeat}

#cardeal .largeIco {-ms-transform:translate3d(0,130px,0);-webkit-transform:translate3d(0,130px,0);transform:translate3d(0,130px,0)}
#facespec .largeIco {-ms-transform:translate3d(0,90px,0);-webkit-transform:translate3d(0,90px,0);transform:translate3d(0,90px,0)}

#service .on .largeIco {
opacity:1;
-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
}
#cardeal.on .largeIco{
-ms-transition:all 0.6s 0s;-webkit-transition:all 0.6s 0s;transition:all 0.6s 0s;
}
#facespec.on .largeIco {
-ms-transition:all 0.4s 0s;-webkit-transition:all 0.4s 0s;transition:all 0.4s 0s;
}


/* portfolio */
#portfolio {background:url(../images/bg/bg_portfolio.jpg) no-repeat center 0;background-size:cover;z-index:70}
#portfolio h2 {height:71px;margin:130px 0 50px 0;background:url(../images/txt/tlt_portfolio.png) no-repeat center 0}
#portfolio .pageCnt {margin-bottom:50px;font-size:12px;color:#5c5c5c;text-align:center;font-family:NBG}
#portfolio .current {font-size:25px;color:#fff}
.portfolioWrap {position:absolute;width:100%;margin:0 auto}
.portfolio {overflow:hidden;position:relative;width:100%;height:100%;margin:0 auto}
.portfolio ul {position:absolute;left:100%;top:0}
.portfolio ul:first-child {left:0}
.portfolio li {float:left;padding:0 14px;margin-bottom:26px}
.portfolio li dt {border:1px solid rgba(0,0,0,0.2);margin-bottom:10px}
.portfolio li dd {height:34px;font-size:15px;color:#9d9d9d;text-align:center;line-height:1.1}

#portfolio .pageBtn button {position:absolute;top:50%;display:block;width:23px;height:45px;margin-top:-23px;text-indent:-9999em;cursor:pointer;outline:none}
#portfolio .pageBtn .btn_prev {left:60px;background:url(../images/btn/btn_serveic_prev.png) no-repeat}
#portfolio .pageBtn .btn_next {right:60px;background:url(../images/btn/btn_serveic_next.png) no-repeat}

/* contact */
#contact {z-index:60}
#contact h2 {height:68px;background:url(../images/txt/tlt_contact.png) no-repeat center 0;margin-bottom:40px}
.contactWrap {position:absolute;left:0;bottom:50px;width:100%;height:35%;background:#2ec1d5}
.contactWrap .inner {position:absolute;left:0;top:50%;width:100%;margin-top:-100px}
.contact {height:92px;background:url(../images/txt/txt_contactWrap.png) no-repeat center 0;text-indent:-9999em}
.copyright {position:absolute;left:0;bottom:0;width:100%;height:50px;background:#404040;text-align:center;color:rgba(256,256,256,0.2);font-size:12px;line-height:50px;font-family:Arial}

.mapWrap {position:relative;overflow:hidden;width:100%;height:65%}
.mapInner {position:absolute;left:0%;top:0%;width:100%;height:100%;}
#map {width:100%;height:100%}