@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 기본 틀 CSS
 * date : 2019-05-02
******************************************************** */
html, body {
	width: 100%;
	height: 100%;
    background: #000;
    overflow: hidden;
} 

#wrap{position: relative; width: 100%; height: 100%; margin: 0 auto; min-width: 1080px;}
.layFull{width: 100%; margin: 0 auto; position: relative;}
.layGrid{width: 1140px; margin: 0 auto; position: relative;}
.layFull p, .layGrid p{word-break: keep-all;}



/**************************************************
	Drag Effect
**************************************************/
::selection {background:#ffd400; color:#ffffff; text-shadow:none;}
::-moz-selection {background:#ffd400; color:#ffffff; text-shadow:none;}
::-webkit-selection {background:#ffd400; color:#ffffff; text-shadow:none;} 
::-o-selection {background:#ffd400; color:#ffffff; text-shadow:none;}


/**************************************************
	Header
**************************************************/
#header{position: relative; display: block; z-index: 100;}
/* .openMenu{position: absolute; top: 0; left: 0; color:#ffd400; display: block; font-size: 40px; padding: 15px; }
.openMenu:hover{background: #ffd400; color: #fff;} */
.openMenu{position: absolute; top: 0; left: 0; color:#ffd400; display: block; font-size: 40px; padding: 15px; background: url('../images/menu-bg-off.png') no-repeat center center; width: 70px; height: 70px; box-sizing: border-box}
.openMenu:hover{background: url('../images/menu-bg-on.png') no-repeat center center #ffd400;}
.siteMap{display: none; position: fixed; top: 50%; left: 50%; width: 80%; height: 80%; transform:translate(-50%, -50%); z-index: 200; background-color: rgba(0, 0, 0, .85); z-index: 100; border: 2px solid #ffd400;/* overflow: scroll;*/}
.siteTop{background: #ffd400; width: 100%; text-align: center;padding: 3px 0;}
.siteTop h2{display: inline-block; color: #1b1b1b; text-transform: uppercase; font-weight: 500; font-size: 14px;}
.siteTop img{display: inline-block;  margin-left: 10px;}
.siteBottom{width: 100%; height: 100%; padding: 60px; box-sizing: border-box;}
.siteTitle{position: relative; color: #ffd400; text-align: center; font-size: 35px; padding-bottom: 110px;}
.siteTitle a{position: relative; color: #ffd400 !important; text-align: center; font-size: 50px;}
.siteTitle:before{content: ''; display: block; position: absolute; bottom: 30px; left: 50%; margin-left: -1px; width: 2px; height: 50px; background-color: #ffd400;}
.navBox{width: 720px; margin: 0 auto;}
.navList{border-top: 1px solid #aaa; padding: 30px 0;}
.navList:first-child{border-top: 0;}
.navList h4{float: left;  width: 200px;}
.navList h4 span{color: #ffd400; margin-left: 15px; font-size: 18px;}
.navList ul{float: left; padding: 14px 0 0 0;}
.navList ul li{display: inline-block;padding: 0 18px;}
.navList ul li a{display: block; color: #fff; font-size: 15px;}
.navList ul li a:hover{color: #ffd400}
.closeMenu{color: #fff; position: absolute; bottom: 20px; right: 20px; border: 1px solid #ddd; font-size: 40px; padding: 15px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;}
.closeMenu:hover{color: #333; background: #ffd400; border-color: #ffd400;}
.balnkBlack{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .8);z-index: 99; }

/**************************************************
	Section
**************************************************/
#section{position: relative; z-index: 0; height: 100%; margin: 0 auto;}

/* 메인화면 */
#myVideo{position: fixed !important; z-index: 10; right: 0; bottom: 0; min-width: 100%; min-height: 100%;}

.arrowRight{position: absolute; top: 50%; right: 70px;}
.arrowLeft{position: absolute; top: 50%; left: 30px;}
.arrow7 a {
  padding-top: 80px;
}


.arrow7 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #ffd400;
  border-bottom: 1px solid #ffd400;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  -webkit-animation: sdb07 2s infinite;
  animation: sdb07 2s infinite;
  opacity: 0;
  box-sizing: border-box;
}
.arrowBlack a span {
    border-left: 1px solid #333;
   border-bottom: 1px solid #333;
}
.arrowLeft.arrow7 a span { 
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}
.arrow7 a span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.arrow7 a span:nth-of-type(2) {
  left: 16px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
.arrow7 a span:nth-of-type(3) {
  left: 32px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
.arrowLeft.arrow7 a span:nth-of-type(1) {
    -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
.arrowLeft.arrow7 a span:nth-of-type(2) {
  left: 16px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
.arrowLeft.arrow7 a span:nth-of-type(3) {
  left: 32px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
@-webkit-keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.footer{position: fixed; top: 0; left: 0; z-index: 99; background:#ffd400; width: 100%; padding: 8px 10px; line-height: 20px;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}
.footer h4{font-size: 12px; color: #333; font-weight: bold; line-height: 17px}
.footer p{font-size: 12px; color: #333; line-height: 17px}
.footer span{font-size: 12px; color: #333; line-height: 17px}
.simbol{ position: absolute; top: 0px; left: 500px}
.simbol li{display: inline-block;margin: 0 10px; font-size: 9px; color: #111; letter-spacing: -0.5px;}