@charset "utf-8";
/* CSS Document */

/* web fonts */
@font-face {
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: 200;
  src: url(/font/NotoSansKR-Thin.woff2) format('woff2'),
       url(/font/NotoSansKR-Thin.woff) format('woff'),
       url(/font/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: 400;
  src: url(/font/NotoSansKR-Regular.woff2) format('woff2'),
       url(/font/NotoSansKR-Regular.woff) format('woff'),
       url(/font/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: 700;
  src: url(/font/NotoSansKR-Bold.woff2) format('woff2'),
       url(/font/NotoSansKR-Bold.woff) format('woff'),
       url(/font/NotoSansKR-Bold.otf) format('opentype');
}


/* reset */
body {margin: 0;}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, pre {margin: 0; padding: 0;}
header, main, footer, section, article, nav, aside {display: block;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
a {color: inherit; text-decoration: inherit;}
a img {border: none;}
li {list-style: none;}
em, address, i {font-style: normal;}
table {border-collapse: collapse;}
table caption{overflow: hidden; width: 1px; height: 1px; text-indent: -9999px;} /* position:relative나 absolute 사용 시 FF35 이하 버전에서 안 사라짐 */


/* common */
body {font-family: 'NotoSans', 'NanumBarunGothicLight', '나눔고딕', 'NanumGothic', 'MalgumGothic', '돋움', Dotum, Helvetica, 'Apple SD Gothic Neo', 'Helvetica', 'Arial', sans-serif; font-size: 14px; color: #333333; font-weight: 400; background: #ffffff;}
#wrapper {min-width: 1000px; overflow: hidden;}
#skip-nav {position: fixed; left: 0; top: -42px; width: 100%; height: 40px; background: #bbbbbb; background: rgba(0, 0, 0, 0.6); color: #ffffff; text-align: center; line-height: 40px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.8); transition: all 0.3s; z-index: 100000;}
#skip-nav span.fontawesome {margin-right: 10px;}
#skip-nav:focus {top: 0;}
#header {position: fixed; left: 0; top: 0; width: 100%; height: 120px; background: rgba(0, 0, 0, 0); transition: background 0.8s; z-index: 1000;}
#header.back {background: rgba(0, 0, 0, 0.6);}
#header h1 {position: fixed; left: 30px; top: 20px; z-index: 1000;}
#side-bar{position: fixed; right: -250px; top: 0; width: 250px; height: 100%; min-height: 650px; background: #999999; background: rgba(0, 0, 0, 0.7); z-index: 1000; color: #ffffff; transition: all 0.4s;}
#side-bar a.close {display: block; position: absolute; left: -100px; top: 0; width: 100px; height: 100px; -webkit-transition: all 0.3s; transition: all 0.3s;}
#side-bar a.close:hover {background: #999999; background: rgba(0, 0, 0, 0.2);}
#side-bar a.close span {display: block; width: 50px; height: 3px; background: #ffffff; position: absolute; left: 25px; top: 48px; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); transition: all 0.5s; text-indent: -9999px; overflow: hidden;}
#side-bar a.close:before {content: ""; display: block; width: 50px; height: 3px; background: #ffffff; position: absolute; left: 25px; top: 30px; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); -webkit-transition: all 0.5s; transition: all 0.5s;}
#side-bar a.close:after {content: ""; display: block; width: 50px; height: 3px; background: #ffffff; position: absolute; left: 25px; bottom: 30px; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); transition: all 0.5s;}
#side-bar.on {right: 0;}
#side-bar.on a.close span {opacity: 0;}
#side-bar.on a.close:before {transform: rotate(45deg); top: 48px;}
#side-bar.on a.close:after {transform: rotate(-45deg); bottom: 48px;}
#top-menu {position: absolute; right: 20px; top: 30px;}
#top-menu li {float: left;}
#top-menu li + li:before{content:"|"; font-size: 10px; margin: 0 5px; position: relative; top: -2px;}
#top-menu li a {color: #e0e0e0; font-size: 13px; font-weight: 200; padding: 5px; transition: all 0.3s;}
#top-menu li a:hover {color: #f6bb42;}
#gnb {margin-top: 100px; text-align: center; font-size: 26px;}
#gnb ul li {margin-bottom: 10px;}
#gnb ul li.on a {color: #ffffff; background: rgba(255, 255, 255, 0.2); text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7); font-size: 30px; color: #f6bb42;}
#gnb ul li a {display: block; line-height: 60px; font-weight: 200; transition: all 0.3s; color: rgba(255, 255, 255, 0.8);}
#gnb ul li a:hover {background: rgba(255, 255, 255, 0.2); text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);}
#sns {text-align: center; position: absolute; left: 0; bottom: 50px; width: 100%;}
#sns li {display: inline-block;}
#sns li a {font-size: 30px; transition: all 0.3s;}
#sns li a:hover {color: #f6bb42;}

#footer {position: absolute; left: 0; bottom: 30px; width: 100%; color: #eeeeee; text-align: center; font-size: 16px; font-weight: 200; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); z-index: 100;}


/* main */
body.main #main {height: 100vh; overflow: hidden; position: relative;}
body.main #main h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 850px; z-index: 100; color: #ffffff; font-size: 70px; font-weight: 200; line-height: 1.2em; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);}
#main-visual {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#main-visual > ul.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#main-visual > ul.slide > li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; text-align: center; opacity: 0;}
#main-visual > ul.slide > li:first-child {opacity: 1;}
#main-visual > ul.slide > li > img {min-width: 100%; min-height: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/* sub services */
body.services #main {height: 100vh;}
body.services #main > section {width: 25%; height: 100%; float: left; overflow: hidden; position: relative; transition: width 0.5s;}
body.services #main > section.on {width: 55%;}
body.services #main > section.off {width: 15%;}
body.services #main > section p.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
body.services #main > section p.bg:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); transition: all 0.5s;}
body.services #main > section.on p.bg:after {background: rgba(0, 0, 0, 0.2);}
body.services #main > section p.bg img {position: relative; left: 50%; transform: translate(-50%, 0); transition: all 0.5s;}
body.services #main > section.on p.bg img {position: relative; left: 50%; transform: translate(-50%, 0) scale(1.1) rotate(2deg);}
body.services #main > section div.content {position: absolute; left: 0; top: 0; color: #ffffff; width: 80%; left: 10%; top: 50%; transform: translate(0, -50%);}
body.services #main > section div.content h2 {font-size: 40px; font-weight: 200; line-height: 1.2em; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); text-align: center;}
body.services #main > section div.content h2 a {transition: color 0.3s;}
body.services #main > section div.content h2 a:hover {color: #f6bb42; transition: color 0.3s;}
body.services #main > section div.content ul {font-size: 20px; font-weight: 200; height: 0; overflow: hidden;}
body.services #main > section div.content ul li {margin-top: 10px; font-size: 22px;}
body.services #main > section div.content ul li span.fontawesome {vertical-align: middle; margin-right: 20px; font-size: 40px;}
body.services #main > section.on div.content ul {height: auto; margin-top: 30px;}
body.services #main > section div.content p {text-align: right; overflow: hidden; height: 0;}
body.services #main > section div.content p img {width: 100%;}
body.services #main > section div.content p a {display: block;}
body.services #main > section div.content p a:hover {text-decoration: underline;}
body.services #main > section.on div.content p {height: auto; margin-top: 30px;}
body.services #main > section a.close {position: absolute; right: 20px; bottom: 20px; font-size: 40px; color: #ffffff; z-index: 1000; display: none;}
body.services #main > section a.close:hover {color: #f6bb42;}
body.services #main > section.on a.close {display: block;}

/* sub portfolio */

body.portfolio #main > #page1 {height: 100vh; position: relative; overflow: hidden;}
body.portfolio #main > #page1 p.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
body.portfolio #main > #page1 p.bg img {min-width: 100%; min-height: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}
body.portfolio #main > #page1 p.bg:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
body.portfolio #main h2 {position: absolute; top: 80px; left: 50%; transform: translate(-50%, 0); font-size: 40px; color: #ffffff; font-weight: 200;}
body.portfolio p.temp {position: absolute; left: 50%; top: 400px; width: 1000px; transform: translate(-50%, 0); text-align: center; font-size: 40px; color: #ffffff;}
body.portfolio p.temp span.fontawesome {margin-right: 20px; position: relative; top: -20px; animation: arrow-down 1s ease-in-out infinite alternate;}

body.portfolio section.page {max-width: 1920px; margin: 0 auto;}
body.portfolio section.page.bottom {padding-bottom: 200px;}
body.portfolio section.page h3 {font-size: 80px; max-width: 1600px; margin: 120px auto 80px auto; padding: 0 50px;}
body.portfolio ul.company {}
body.portfolio ul.company:after {content: ''; display: block; clear: both;}
body.portfolio ul.company li {float: left; width: 50%; position: relative; color: #ffffff; font-weight: 600;}
body.portfolio ul.company li:nth-child(2n) {top: 200px;}
body.portfolio ul.company li > a {display: block; height: 100%; overflow: hidden;}
body.portfolio ul.company li > a > * {display: block;}
body.portfolio ul.company li span.bg {transition: all 2s ease 0.1s; opacity: 1;}
body.portfolio ul.company li:nth-child(2n-1) span.bg {transform: translate(-50px, 0);}
body.portfolio ul.company li:nth-child(2n) span.bg {transform: translate(50px, 0);}
body.portfolio ul.company li.on:nth-child(2n-1) span.bg {transform: translate(0, 0); opacity: 1;}
body.portfolio ul.company li.on:nth-child(2n) span.bg {transform: translate(0, 0); opacity: 1;}
body.portfolio ul.company li span.bg img {width: 100%; transform: scale(1); transition: transform 0.5s; vertical-align: top;}
body.portfolio ul.company li span.bg:before {content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -40px 0 0 -40px; background: url(/img/company_icon_01.png) center center no-repeat; background-size: 100% 100%; transform: scale(0.5) rotate(-180deg); opacity: 0; transition: all 0.5s; z-index: 10;}
body.portfolio ul.company li span.bg:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); opacity: 1; transition: opacity 0.5s;}
body.portfolio ul.company li > a:hover span.bg img {transform: scale(1.2);}
body.portfolio ul.company li > a:hover span.bg:before {transform: scale(1) rotate(0); opacity: 0.9;}
body.portfolio ul.company li > a:hover span.bg:after {opacity: 1;}
body.portfolio ul.company li span.num {position: absolute; left: 90px; top: -80px; font-size: 96px; color: #3b3b3d; transform: translate(0, 30px); opacity: 0; transition: all 2s ease 0.5s;}
body.portfolio ul.company li + li + li span.num {color: #ffffff;}
body.portfolio ul.company li em.name {position: absolute; left: 90px; top: 70px; font-size: 28px; transform: translate(0, 30px); opacity: 0; transition: all 2s ease 0.5s;}
body.portfolio ul.company li em.name span {display: block; font-size: 12px;}
body.portfolio ul.company li span.content {position: absolute; left: 90px; top: 170px; font-size: 16px; font-weight: 400; transform: translate(0, 30px); opacity: 0; transition: all 2s ease 0.5s;}
body.portfolio ul.company li span.content em {display: inline-block; position: relative; padding-bottom: 10px; padding-right: 12px;}
body.portfolio ul.company li span.content em:after {content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 30px; background: #ffffff;}
body.portfolio ul.company li span.content span {display: block; margin-top: 10px;}
body.portfolio ul.company li span.logo {position: absolute; right: 20px; bottom: 20px; transform: translate(0, -30px); opacity: 0; transition: all 2s ease 0.5s;}
body.portfolio ul.company li.on span.num,
body.portfolio ul.company li.on em.name,
body.portfolio ul.company li.on span.content {transform: translate(0, 0); opacity: 1;}
body.portfolio ul.company li.on span.logo {transform: translate(0, 0); opacity: 1;}




/* sub clients */
body.clients #main > section {height: 100vh; position: relative; overflow: hidden;}
body.clients #main > section p.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
body.clients #main > section p.bg img {min-width: 100%; min-height: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}
body.clients #main > section p.bg:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
body.clients #main h2 {position: absolute; top: 80px; left: 50%; transform: translate(-50%, 0); font-size: 40px; color: #ffffff; font-weight: 200;}
body.clients #main ul.client-list {position: absolute; left: 50%; top: 200px; width: 1000px; transform: translate(-50%, 0);}
body.clients #main ul.client-list li {float: left; width: 200px; height: 100px;}
body.clients #main ul.client-list li a {display: block; height: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.5); text-align: center; position: relative;}
body.clients #main ul.client-list li a > span {position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box;}
body.clients #main ul.client-list li a > span.front {padding: 20px;}
body.clients #main ul.client-list li a > span.front.white {background: #ffffff;}
body.clients #main ul.client-list li img {max-width: 100%; max-height: 100%; position: relative; top: 50%; transform: translate(0, -50%);}
body.clients #main ul.client-list li span.back {display: none;}



/* sub about */
body.about #main > section {height: 100vh; position: relative; overflow: hidden;}
body.about #main > section p.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
body.about #main > section p.bg img {min-width: 100%; min-height: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}
body.about #main > section p.bg:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
body.about #main h2 {position: absolute; top: 80px; left: 50%; transform: translate(-50%, 0); font-size: 40px; color: #ffffff; font-weight: 200;}
body.about #main ul.message {position: absolute; left: 50%; top: 200px; width: 1000px; transform: translate(-50%, 0); text-align: center; font-size: 24px; color: #ffffff;}
body.about #main ul.message li + li {margin-top: 10px;}
body.about #main ul.message li.logo {margin-top: 30px; background: rgba(255, 255, 255, 0.8); display: inline-block; padding: 20px; border-radius: 10px;}
body.about #main ul.message li.logo img {width: 200px;}



/* sub contact */
body.contact #main > section {height: 100vh; position: relative; overflow: hidden;}
body.contact #main > section p.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
body.contact #main > section p.bg img {min-width: 100%; min-height: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}
body.contact #main > section p.bg:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
body.contact #main h2 {position: absolute; top: 80px; left: 50%; transform: translate(-50%, 0); font-size: 40px; color: #ffffff; font-weight: 200;}
body.contact #main section div.content {position: absolute; left: 50%; top: 200px; width: 1000px; transform: translate(-50%, 0);}
body.contact #main #google-map {width: 1000px; height: 500px;}
body.contact #main section div.content address {margin-top: 20px; font-size: 16px; color: #ffffff; text-align: center;}
body.contact #main section div.content address span + span:before {content: '|'; margin: 0 10px; font-size: 12px; position: relative; top: -3px;}



@keyframes arrow-down {
    0% {top: -20px; opacity: 0;}
    100% {top: 20px; opacity: 1;}
}