@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");
@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
@font-face { font-family: 'SDSamliphopangche_Outline'; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'LAB디지털'; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/LAB디지털.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local("Material Icons"), local("MaterialIcons-Regular"), url(https://example.com/MaterialIcons-Regular.woff2) format("woff2"), url(https://example.com/MaterialIcons-Regular.woff) format("woff"), url(https://example.com/MaterialIcons-Regular.ttf) format("truetype"); }

* { text-size-adjust: none; -webkit-text-size-adjust: none; -o-text-size-adjust: none; -ms-text-size-adjust: none; -moz-text-size-adjust: none; }

html, body { height: 100%; text-size-adjust: none; -webkit-text-size-adjust: none; -o-text-size-adjust: none; -ms-text-size-adjust: none; -moz-text-size-adjust: none; }

html { color: #fff; }

body, th, td, input, select, textarea, button { font-size: 15px; line-height: 1.6; font-family: 'NanumSquare','Noto Sans KR', sans-serif; color: #fff; word-break: keep-all; word-wrap: break-word; }

::-webkit-input-placeholder { color: #bcbcbc; }

:-moz-placeholder { color: #bcbcbc; }

::-moz-placeholder { color: #bcbcbc; }

:-ms-input-placeholder { color: #bcbcbc; }

caption { display: none; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button, header, nav, menu, section, article { margin: 0; padding: 0; }

fieldset, img { border: 0 none; }

dl, ul, ol, menu, li { list-style: none; vertical-align: middle; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

input, textarea { padding: 0 5px; }

/*input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; 크롭입력배경색제거  }*/
input, select, textarea, button { vertical-align: middle; }

input[type='text'], input[type='password'], input[type='submit'], input[type='search'] { -webkit-appearance: none; }

input[type='text']::placeholder, input[type='password']::placeholder, input[type='submit']::placeholder, input[type='search']::placeholder { font-size: 14px; color: #a7a7a7; }

button, input[type='button'], input[type='submit'], input[type='reset'], input[type='file'] { -webkit-appearance: none; border-radius: 0; border: none; }

input[type='button'] { -webkit-appearance: none; border: 0; }

input[type='search']:-webkit-search-cancel-button { -webkit-appearance: none; }

input[type='radio'], input[type='checkbox'] { border: none; }

button { border: none; background-color: transparent; cursor: pointer; }

a, a:link, a:visited, a:hover, a:active { color: inherit; text-decoration: none; }

address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }

ß table { width: 100%; border-collapse: collapse; }

img { vertical-align: middle; }

legend, caption { display: none; }

body { background: #111621; }

.wrapper { max-width: 100%; width: 100%; position: relative; overflow: hidden; margin: 0 auto; min-height: 600px; }

.size { width: 100%; max-width: 1320px; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.clear:after { clear: both; content: ''; display: block; }

.tb { display: table; width: 100%; height: 100%; }

.tbc { display: table-cell; width: 100%; height: 100%; vertical-align: middle; }

.img img { max-width: 100%; }

.pic { background-size: contain; background-repeat: no-repeat; background-position: center center; }

.pic img { max-width: 100%; opacity: 0; visibility: hidden; }

em.mbr { display: block; }

.swiper-wrapper { display: -webkit-box; }

/*header*/
header { color: #FFF; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; height: 80px; transition: all .3s; -webkit-transition: all .3s; }

header .size { position: relative; height: 100%; max-width: 100%; }

header h1 { position: absolute; left: 20px; top: 50%; margin-top: -13px; }

header h1 a { display: block; position: relative; width: 140px; height: 26px; background-image: url("../img/logo_w.svg"); transition: all .3s; -webkit-transition: all .3s; font-size: 0; background-size: contain; background-repeat: no-repeat; background-position: center center; }

header.fixed { color: #030303; background: #FFF; }

header.fixed h1 a { background-image: url("../img/logo.svg"); }

header.fixed2 { color: #FFF; background: #111621; }

header.fixed2 h1 a { background-image: url("../img/logo_w.svg"); }

header .util { position: absolute; right: 20px; top: 50%; margin-top: -30px; }

header .util a { text-transform: uppercase; line-height: 60px; font-size: 24px; letter-spacing: -0.06em; font-family: 'SDSamliphopangche_Outline','NanumSquare','Noto Sans KR', sans-serif; }

/*footer*/
footer { text-align: center; padding: 30px 0; }

footer p { font-size: 16px; color: #FFF; font-weight: 400; transform: rotate(-0.03deg); }

/*커서*/
.cursor { position: absolute; top: 7px; right: -20%; z-index: 9999; width: 16px; height: 16px; }

.cursor img { max-width: 100%; }

/*animate*/
.animate [class*='ani-'] { opacity: 1; filter: alpha(opacity=100); -ms-filter: alpha(opacity=100); transition-property: transform, opacity; -webkit-transition-property: transform, opacity; transform: translate3d(0, 0, 0); transition-duration: 0.8s; -webkit-transform: translate3d(0, 0, 0); -webkit-transition-duration: 0.8s; -o-transform: translate3d(0, 0, 0); -o-transition-duration: 0.8s; -ms-transform: translate3d(0, 0, 0); -ms-transition-duration: 0.8s; -moz-transform: translate3d(0, 0, 0); -moz-transition-duration: 0.8s; }

.fromLeft:not(.done) { opacity: 0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); transform: translate3d(-50px, 0, 0); -webkit-transform: translate3d(-50px, 0, 0); -o-transform: translate3d(-50px, 0, 0); -ms-transform: translate3d(-50px, 0, 0); -moz-transform: translate3d(-50px, 0, 0); }

.fromRight:not(.done) { opacity: 0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0); -o-transform: translate3d(50px, 0, 0); -ms-transform: translate3d(50px, 0, 0); -moz-transform: translate3d(50px, 0, 0); }

.fromBottom:not(.done) { opacity: 0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); transform: translate3d(0, 100px, 0); -webkit-transform: translate3d(0, 100px, 0); -o-transform: translate3d(0, 100px, 0); -ms-transform: translate3d(0, 100px, 0); -moz-transform: translate3d(0, 100px, 0); }

.fromTop:not(.done) { opacity: 0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); transform: translate3d(0, -100px, 0); -webkit-transform: translate3d(0, -100px, 0); -o-transform: translate3d(0, -100px, 0); -ms-transform: translate3d(0, -100px, 0); -moz-transform: translate3d(0, -100px, 0); }

.fromCenter:not(.done) { opacity: 0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); transform: scale(0.8) translate3d(0, 0, 0); -webkit-transform: scale(0.8) translate3d(0, 0, 0); -o-transform: scale(0.8) translate3d(0, 0, 0); -ms-transform: scale(0.8) translate3d(0, 0, 0); -moz-transform: scale(0.8) translate3d(0, 0, 0); }