/* VX main.css */

@charset "utf-8";
@import url("reset.css");

@font-face {font-family:'mB';src: local('Montserrat-Bold'),url(../font/Montserrat-Bold.woff) format('WOFF');}
@font-face {font-family:'mEL';src: local('Montserrat-ExtraLight'),url(../font/Montserrat-ExtraLight.woff) format('WOFF');}
@font-face {font-family:'mM';src: local('Montserrat-Medium'),url(../font/Montserrat-Medium.woff) format('WOFF');}
@font-face {font-family:'mR';src: local('Montserrat-Regular'),url(../font/Montserrat-Regular.woff) format('WOFF');}
@font-face {font-family:'mSB';src: local('Montserrat-SemiBold'),url(../font/Montserrat-SemiBold.woff) format('WOFF');}


body{font-family: 'mR', sans-serif;background: #100d10;color:#fafafa}

/* header */
header, .content{width:1200px;margin:0 auto}
header{position: relative;height: 94px;padding-top:60px;box-sizing: border-box;}
.content{position: relative;z-index: 1;padding-bottom:94px;box-sizing: border-box;}
.gnb{position: absolute;right: 0;bottom: 0}
.gnb li{float: left;margin-left:82px;position: relative;box-sizing: border-box;}
.gnb li:before{position: absolute;left:0;right:0;top:-20px;content: "";display: none;width: 7px;height: 7px;margin:0 auto;flex-grow: 0;-webkit-filter: blur(2px);filter: blur(2px);background-color: #c18e21;border-radius: 50%;}
.gnb li:after{position: absolute;left:0;right:0;top:-62px;content: "";display: none;width: 1px;height: 42px;margin:0 auto;flex-grow: 0;background-image: linear-gradient(to bottom, #191919 0%, #483a1c 100%);}
.gnb li.on:before, .gnb li.on:after{display: block;}



.gnb a{line-height: 31px;font-family: 'mR';color:#f5f2ea;font-size: 20px;cursor: pointer;}
.gnb a:hover,  .gnb li.on a{color:#c18e21}
.logo{width:60px;height:31px}
.logo img{width: 100%;height:100%}

.bg{position: fixed;left:0;right:0;width:90%;height:90%;margin:0 auto;background: url(../img/bg_contact.png) no-repeat center center;background-size:contain;}

/* INTRO section1 */
#section1{position: fixed;width:100%;height:100% !important;top:0;background: #000;box-sizing:border-box}
#section1 .videoWrap{height:100%;box-sizing: border-box;}
.indx{display: none}

/* content */
h2{text-align: center;margin: 140px 0 120px;}

.area {margin-top:60px}


.area dt img{width:80%;margin-bottom:20px}
.area dd{font-size: 30px;background-image: radial-gradient(circle at 34% 65%, #a8a8a8, #fafafa 12%); opacity: 0.3;-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}

/* contact.html */
.email{font-size: 26px;  color: #f5f2ea;text-align: center;display: block;}
.email i{position: relative;top: 6px;width: 40px;height: 40px;padding-top: 10px;box-sizing: border-box;border-radius: 50%;background: rgba(193, 142, 33, 0.2);display: inline-block;text-align: center;}
.email i img{width: 20px;height: 20px;}
.email strong{font-family:'mM';display: inline-block;margin: 0 25px 0 20px;}
.email span{font-family:'mEL';}
.email span:hover{color:#c18e21}
.txt{margin-top:120px;background-image: radial-gradient(circle at 34% 65%, #a8a8a8, #fafafa 12%);font-size: 55px;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;opacity: 0.3;text-align: center;}


/* MOTION */
header.indx{opacity: 0;animation:indxH1 1.5s ease-in 0.5s 1 forwards;}
.content.indx h2{opacity: 0;animation:indxH2 1s ease 2s 1 forwards;}
.content.indx .indxA1 dt{opacity: 0;animation:indxADt 1s ease-in 3.2s 1 forwards;}
.content.indx .indxA1 dd{opacity: 0;animation:indxADd 1s ease-in 4.2s 1 forwards;}
.content.indx .indxA2 dt{opacity: 0;animation:indxADt 1s ease-in 5.5s 1 forwards;}
.content.indx .indxA2 dd{opacity: 0;animation:indxADd 1s ease-in 6.5s 1 forwards;}


  @keyframes indxH1{
  	0%{opacity: 0}
  	100%{opacity: 1}
  }
  @keyframes indxH2{
  	0%{opacity: 0;margin-top:0px}
    65%{opacity: 0.2;}
  	100%{opacity: 1;margin-top:140px}
  }
  @keyframes indxADt{
  	0%{opacity: 0}
  	100%{opacity: 1}
  }
  @keyframes indxADd{
  	0%{opacity: 0}
  	100%{opacity: 0.3}
  }

.contact h2 img{animation:contactH2 0.5s ease 0s 1 forwards;}
  @keyframes contactH2{
    0%{transform: scaleX(0.9);}
    100%{transform: scaleX(1);}
  }
.about h2 img{animation:aboutH2 0.5s ease 0s 1 forwards;}
    @keyframes aboutH2{
      0%{transform: scaleX(1.1);}
      100%{transform: scaleX(1);}
    }

















/******************************************* TABLET *******************************************/
@media screen and (max-width:1300px){
header, .content{width:90%}
h2 img{width:40%}
}


/******************************************** MOBILE ********************************************/
@media screen and (max-width:540px){
header{height:74px;padding-top:40px}
h2{margin:120px 0 80px}
h2 img{width:50%}
.content{padding-bottom: 40px;}
.gnb li{margin-left:25px;}
.gnb li:before{top:-10px}
.gnb li:after{top:-52px}
.gnb li a{font-size:18px}
.area dd{font-size: 16px}
.email{font-size: 18px}
.email i{top: 3px;width: 30px;height: 30px;padding-top: 7px;padding-left: 1px;}
.email i img{width: 15px;height: 15px;}
.email strong{margin:0}
.email span{display:block;margin-top: 10px}
.txt{margin-top:80px;font-size: 24px;}
}