@import url(common.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,700&display=swap');

html,body{ width: 100%; height: 100%; font-family: 'Noto Sans KR', sans-serif;  font-weight: 400;}

/*인트로*/
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: lighter;
  font-size: 40px;
}
.wrapper h1{color: #fff;}

.welcome-section {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.content-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fly-in-text{
  list-style: none;
}
.fly-in-text li {
  display: inline-block;
  margin: 4.5px;
  font-size: 1.8em;
  color: #fff;
  opacity: 1;
  transition: all 3s ease;
}

.content-hidden .fly-in-text li {opacity: 0;}
.content-hidden .fly-in-text li:nth-child(1) {transform: translate3d(-120px,0,0);}
.content-hidden .fly-in-text li:nth-child(2) {transform: translate3d(-90px,0,0);}
.content-hidden .fly-in-text li:nth-child(3) {transform: translate3d(-60px,0,0);}
.content-hidden .fly-in-text li:nth-child(4) {transform: translate3d(-30px,0,0);}
.content-hidden .fly-in-text li:nth-child(5) {transform: translate3d(0px,0,0);}
.content-hidden .fly-in-text li:nth-child(6) {transform: translate3d(30px,0,0);}
.content-hidden .fly-in-text li:nth-child(7) {transform: translate3d(60px,0,0);}
.content-hidden .fly-in-text li:nth-child(8) {transform: translate3d(90px,0,0);}
.content-hidden .fly-in-text li:nth-child(9) {transform: translate3d(120px,0,0);}
.content-hidden .enter-button {opacity: 0; transform: translate3d(0,-30px,0);}

/*상단 메뉴바*/
.navbar{width: 100%; height: 100%;}
#logo{position: absolute; display: block; width: 214px; height: 72px; left: 50%; top: 50%;margin-left: -107px; margin-top: -51px;}


.menu{
    float:right;
    /*margin-right: 30px; margin-bottom: 50px;*/
    position: relative; display:block;
    z-index:99999;
}

.menu_toggle_btn{
	position:absolute;
	top:35px;right:15px;
	cursor: pointer; display:block;
	width:40px; height:40px;
	background:none; outline:none;
	border: none; margin:0;
}

.menu_toggle_btn span{
	position:absolute;
	left:0; top:-2px;
	width:70%; height:4px;
	background:#fff; content:'';
	transition:all 0.3s; margin-left:15%;
}

.menu_toggle_btn:before,.menu_toggle_btn:after{
	position:absolute; left:0;
	width:70%; height:4px;
	background:#fff; content:'';
	transition:all 0.6s; margin-left:15%;
}

.menu_toggle_btn:before{transform:translateY(-12px);}
.menu_toggle_btn:after{transform:translateY(8px);}

/*제이쿼리에서 불러낼 클래스 "menu-open" */
.menu_toggle_btn.menu-open:before{transform:translateY(0px)rotate(135deg);}
.menu_toggle_btn.menu-open:after{transform:translateY(0px)rotate(-135deg);}
.menu_toggle_btn.menu-open span{opacity:0;}   /*가로선 3개중 가운데선 */

/*메뉴바*/
.menubg{ 
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.6);
    z-index: 9997; display:none;
}

.allmenu{ 
    position:fixed;
    right: 0; top:0;
    width:400px; height:100%;
    background:rgba(0,0,0,0.8);
    z-index: 9998;
    color: #fff;
}

.allmenu1{margin-top:250px;}
.allmenu>li{
    font-size:42px;
    text-indent: 55px; opacity: 0.5;
    margin-bottom:40px;
}
.allmenu>li:hover{opacity: 1;}

.allmenu a{color:#fff;}

.allmenu ul{margin-top:10px;}

.allmenu .address{
    font-size:12px; text-indent:55px; line-height: 0.6;
    padding:5px 0; letter-spacing: 2px; opacity: 0.5;
}

/*푸터*/
#footer{
    width: 100%; height: 70px;
    position: absolute; bottom: 20px;letter-spacing: 1.2px; opacity: 0.7;
    text-align: center; color: #000; line-height: 1.5; font-size: 9px}
#footer a{color: #000;}


@media all and (max-width:780px){
    
    .fly-in-text li {
      font-size: 1.5em;
    }
    
    .allmenu1{margin-top:15%;}
    .allmenu>li{
        font-size: 3em; text-indent: 20%;
    }
    .allmenu ul{margin-top:5px;}

    .allmenu .address{
        font-size:0.5em; text-indent:90px;
    }
#footer{font-size: 8px;}

}