*,*::before,*::after{box-sizing:inherit}
*,::after,::before{-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;text-rendering:optimizeLegibility;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none}
*::-moz-selection{color:#fff;background-color:#19b3b5}
*::selection{color:#fff;background-color:#19b3b5}
*::-webkit-selection{color:#fff;background-color:#19b3b5}
html{overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:scrollbar; overflow-x:hidden }
html,body{margin:0;background:#fff;font-family:'Roboto', sans-serif;font-weight:400;font-size:13px;color:#2b2b2b;}
body{min-height:100%}
img{width:100%; display:block;}
figcaption {display:none;}

html, body, #wrapper {width:100%; height:100%;}
body {/*background:url(../images/visual_g9.jpg) no-repeat; background-size:cover; background-position:center center*/background:#000}
#intro-wrapper {position:relative; background:#000; animation:opa 1.3s 1; animation-delay:2.3s; animation-direction: alternate}
/* #intro-wrapper.stop {animation-play-state:paused}  */
#intro-wrapper #intro-head {position:absolute; top:calc(50% - 10rem); left:2rem; width:7rem; animation:ani 2s 1; animation-direction: alternate;}
#intro-container {position:absolute; top:52%; left:2rem; width:calc(100% - 4rem); font-size:2rem; color:#fff;}
#intro-container .animate-bar {position:absolute; top:-2rem; left:0; width:100%; height:1px; background:#fff; animation:bar 1s 1; transform-origin:left center; transform:scaleX(0); animation-delay:1.5s;}
#intro-container #realTime {margin-bottom:1.5rem;font-weight:400;animation:ani01 2s 1; animation-direction: alternate;font-size:0.8em;transform: scaleX(0.8);
transform-origin: top left;}
#intro-container #realTime .day {font-weight:200;font-family:'Roboto', sans-serif;-webkit-transform:scaleX(0.9);-moz-transform:scaleX(0.9);transform:scaleX(0.9);transform-origin:top left;}
#intro-container #realTime .month {font-family:'Roboto', sans-serif;-webkit-transform:scaleX(0.8);-moz-transform:scaleX(0.8);transform:scaleX(0.8);transform-origin:top left;}
#intro-container #realTime .year {font-family:'Roboto', sans-serif;-webkit-transform:scaleX(0.7);-moz-transform:scaleX(0.7);transform:scaleX(0.7);transform-origin:top left;}
#intro-container .cont {animation:ani02 2s 1; animation-direction: alternate;letter-spacing:0px;font-size:0.77em;font-weight:400; /*181004 수정 letter-spacing:-1px -> 0px*/
font-family:'Roboto', sans-serif;-webkit-transform:scaleX(0.8);-moz-transform:scaleX(0.8);transform:scaleX(0.8);transform-origin:top left;}
#intro-foot {position:absolute; bottom:10%; left:2rem; font-size:.8rem; color:#fff; animation:ani03 2s 1; animation-direction:alternate;}

@media screen and (orientation: landscape) {
	#intro-container {top:calc(50% - 2rem)}
	#intro-wrapper #intro-head, #intro-container, #intro-foot {left:5rem}
}

@media screen and (max-width:345px) {
	html,body {font-size:10px;}
} 

@keyframes ani {
	0% {opacity:0;}
	100% {opacity:1;}
}

@keyframes ani01 {
	0% {opacity:0;}
	10% {opacity:0;}
	100% {opacity:1;}
}

@keyframes ani02 {
	0% {opacity:0;}
	20% {opacity:0;}
	100% {opacity:1;}
}

@keyframes ani03 {
	0% {opacity:0;}
	30% {opacity:0;}
	100% {opacity:1;}
}

@keyframes bar {
	0% {transform:scaleX(0);}
	40% {transform:scaleX(1);}
	100% {transform:scaleX(0);}
}

@keyframes opa {
	0% {transform:translateX(0);}
	100% {transform:translateX(-205%);} /*-100%*/
}

@media only screen and (min-device-width: 320px)  and (max-device-width: 568px) and (orientation:landscape){
	#intro-container .cont {font-size:0.6em}
}