@charset "UTF-8";
@import url('lib/animated.css');
* {box-sizing: border-box;}
/*reset*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, button, input, select, textarea {
    margin: 0;
    padding: 0;
    font: inherit;
    vertical-align: top;
}
button,input {border-radius: 0}
fieldset,img {border: 0}
ol,ul {list-style: none}
address,em {font-style: normal}
a {text-decoration: none}
iframe {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display: block;}
h1,h2,h3,h4,h5,h6 {font-weight: normal}
.blind {position: absolute;overflow: hidden;clip: rect(0 0 0 0);margin: -1px;width: 1px;height: 1px}
button {cursor:pointer;}
button, input, select {vertical-align: middle;}

/*테이블 칸 여백빼기, 선합치기*/
table {border-spacing: 0; border-collapse:collapse;}

/*스킵네비게이션*/
#accessibilityLink {
    position: relative;
    top: 0;
    left: 0;
    z-index: 999999;
}
#accessibilityLink a {
    position: absolute;
    left: 0;
    top: -9999px;
    background: #333;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    width: 100%;
}
#accessibilityLink a:focus, #accessibilityLink a:active { 
    top: 0; 
}

/*영문단어 중단점을 음절로 처리,주로 모바일에서 사용*/
body {
    word-break: break-all;
/*    아이폰사파리에서 뷰포트크기 변경시 텍스트확대 방지*/
    -webkit-text-size-adjust:none;
}


/*공통스타일*/
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(255,255,255,0.3);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(255,255,255,0.3);
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(255,255,255,0.3);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(255,255,255,0.3);
}



@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

body,input,button,textarea,select,table {
    font-size: 12px;
    font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
html,body {height: 100%; }
body { color: #333; overflow-x: hidden;}
body a {color: #555;}
body.on {overflow-y: hidden;}
html,body{width:100%;height:100%;}
/*스마트폰 최소 사이즈*/
#wrap {min-width: 320px; height: 100%;}



.vimeo-wrapper { background-color: #dee2e6;
   position: fixed;
   top: 0;
   left: 0; right: 0; margin: 0 auto;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: hidden;
   z-index: 100; max-width: 500px; 
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -999999;
}






/*메인*/


/*
#intro { width:1920px; height: 1000px; position: fixed; z-index: 111; padding-bottom: 56.25%; padding-top: 0px; height: 0; margin-top: 0; top: 0; left: 0; background-color: #dee2e6; }
#intro:after { content:''; position: absolute; left: 0; bottom: -200%; width: 100%; height: 400%; z-index: -1; background-color: #dee2e6; }
#intro iframe{position: absolute; top: -7%; left: -15%; width: 1920px; height: 1000px; }
*/

#main {overflow:hidden ; width: 100%; max-width:500px; margin: 0 auto 0; position: relative;}
#main-img {
/*	animation-duration: 6s; animation-name: main;  width:100%;*/
}

@keyframes main {
  from { transform:scale(3.1);  opacity:1;}
  120%  {  opacity:0; }
  to { }  
}



@keyframes main_bg { from { right: -100%;  } to {  } }

.tit { top: 16vh; position:absolute;  display:inline-block; width:100%;text-align:center;  z-index:6; pointer-events: none;max-width:500px; left: 0; right: 0; margin: 0 auto;}
.tit_bg {position: relative; margin-top: 10px;  animation: slidein1 1.3s 0.5s both linear; opacity: 1;}
.tit li{ text-align: center; letter-spacing: -1px;}

.tit li:nth-child(1) {animation: slidein1 1s 0.3s both linear; /*animation-duration: 1s; animation-name: slidein1;*/ margin-top:0px; opacity: 1; font-family: 'Noto Sans KR', sans-serif; font-size: 4.2vw; font-weight: 300; color: #2d2d2d;}
.tit li:nth-child(2) h1 {position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; margin-top:0px;  font-family: 'Nanum Myeongjo', serif; font-size: 12vw; font-weight: 400; color: #181818;}
.tit li:nth-child(2) h1 span { font-weight: 600;}

.tit li:nth-child(3) { animation: slidein2 1.5s 0.7s both linear; margin-top: 0px; opacity: 1; font-family: 'Noto Sans KR', sans-serif; font-size: 3.5vw;}
.tit li:nth-child(4) { animation: slidein2 1.5s 1s both linear;  margin-top: 40px; opacity: 1;  font-family: 'NanumSquare', sans-serif; font-size: 5.8vw; font-weight: 800; color: #a00e15;}

.tit_roll {position:absolute; bottom: -100px; left:300px; animation: slide_left 7s 0.3s both linear; animation-iteration-count:infinite;}



#unit-bg {position:relative; top: 0;}
@keyframes slide_left {

  from { }
	80% {left:-2000px; opacity: 1; }
	90% {left:-2000px; opacity: 0;}
	99% {left:300px; opacity: 0;}
  to {opacity: 0;}
  
}

@keyframes slidein {

  from { margin-top:0px; opacity:0; }
  80%  { margin-top:0px; opacity:0;} 
  to { }
  
}

@keyframes slidein1 {

  from {  margin-top:-20px; opacity:0;}
  60%  {  margin-top:-20px; opacity:0; }
  to { }
  
}


@keyframes slidein2 {

  from {  opacity:0;}
  60%  {  opacity:0; } 
  to { }
  
}

#footer { width: 100%; height: 110vw; background-color: #1a1a1a; text-align: left !important; padding: 20px;  font-family: 'Noto Sans KR', sans-serif;overflow: hidden;}
#ff{ text-align: left !important; position: relative;}
#ff>img:nth-child(1){margin-top: 7vw;margin-bottom: 5vw;}
#ff>img:nth-child(2){margin-top: 3vw; margin-bottom: 5vw;}
#ff h2{font-size: 3.5vw; color:#fff;margin-bottom: 3vw; font-weight: 100;}
#ff h2 span {font-size: 3.5vw; color:#fff;margin-bottom: 3vw; font-weight: 700;}

#ff h4{font-size: 2vw; color:#878787;margin-bottom: 2vw; opacity: 1;}
#ff h4 span {font-size: 2vw; color:#fff;margin-bottom: 2vw; opacity: 1;}

#ff h4 b{font-weight: bold;padding-right: 3vw;  }
#ff p{font-size: 3vw;color:#fff; opacity: .4;margin-bottom: 2vw; }

.f_txt{position: absolute;right: 0;top: 8vw; width: 65%;}
.f_txt img{width: 100%;}

#ff ul{display: flex;width: 70%; color: #fff; font-size: 3.5vw; justify-content: space-between;     font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700; margin: 2vw 0;
}
#ff ul span{font-size: 2vw; line-height: 220%; padding-right: 1vw; opacity: .5;}


.bottom {position:fixed; left: 0; right: 0; margin: 0 auto; bottom: 0; z-index: 99;}