@charset "utf-8";

.visualBox {width:100%;height:100vh;min-height:650px;background:url(../img/main/main_bg.jpg) no-repeat top center/cover}
.visualBox > .inner {width:100%;max-width:1020px;height:100%;display:flex;align-items:center;margin:0 auto}
.visualBox > .inner .conBox {width:100%;}
.visualBox > .inner .txt1 {width:100%;font-size:36px;color:#f5f0eb;letter-spacing:1px;font-style:italic;text-align: center;}
.visualBox > .inner .logoimg {width:435px;margin: -12px auto 0;}
.visualBox > .inner .logoimg img {width:100%}
.visualBox > .inner .imgBox {display:flex;justify-content: space-between;}
.visualBox > .inner .imgBox > div img {width:100%;object-fit: cover;height: 100%;}
.visualBox > .inner .imgBox .img1 {width:245px}
.visualBox > .inner .imgBox .img2 {width:490px}
.visualBox > .inner .imgBox .img3 {width:245px}

footer {position:fixed;left:0;bottom:30px;color:#f5f0eb;padding:0}


.conBox > div {opacity: 0;transform: translateY(20px);transition: all 0.8s ease-out;}
.conBox.is-animated > div {opacity: 1;transform: translateY(0);}
.conBox.is-animated .txt1 {transition-delay: 0.2s;}
.conBox.is-animated .imgBox {transition-delay: 0.5s;}
.conBox.is-animated .logoimg {transition-delay: 0.8s;}
.imgBox div {opacity: 0;transform: scale(0.95);transition: all 0.6s ease-out;}
.conBox.is-animated .imgBox div:nth-child(1) { transition-delay: 0.6s; opacity: 1; transform: scale(1); }
.conBox.is-animated .imgBox div:nth-child(2) { transition-delay: 0.8s; opacity: 1; transform: scale(1); }
.conBox.is-animated .imgBox div:nth-child(3) { transition-delay: 1.0s; opacity: 1; transform: scale(1); }

#header {position:fixed;top:0;left:0;width:100%;z-index:100;transition:all 0.3s ease-in-out;}
#header h1 a {background-image:url(../img/logo.png)}
#header .gnb ul li a {color:#f5f0eb}
.mHeader h1 a {background-image:url(../img/logo2.png)}
.mHeader .menuBtn span {background-color:#f5f0eb !important}
.mHeader.fixed {background-color:#f5f0eb !important}
.mHeader.fixed h1 a {background-image:url(../img/logo2.png) !important}
.mHeader.fixed .menuBtn span {background-color:#f5f0eb !important}

header, 
.floatingMenu, 
footer {opacity: 0;visibility: hidden;transition: opacity 1.5s ease-in-out, visibility 1.5s;}

.show-ui header, 
.show-ui .floatingMenu, 
.show-ui footer {opacity: 1;visibility: visible;}


     @-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
} 

  @keyframes slideInUp {
  0% {
    height: 100%;
  }

  100% {
    height:0;
  }
} 

 @-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}  
 
    @-webkit-keyframes updown {
    0%{
        transform:translate(-50%,0)
    }
    50%{
        transform:translate(-50%,-20px)
    }
    100%{
        transform:translate(-50%,0)
    }
}


@media all and (max-width : 1023px) {

	 .mHeader {background-color:transparent !important}

	.visualBox {height:calc(var(--vh, 1vh) * 100);background-image:url(../img/main/main_m_bg.jpg)}
	.visualBox > .inner .txt1 {font-size: 4.44vw;letter-spacing:0.14vw}
	.visualBox > .inner .logoimg {width: 45.14vw;margin: -1.67vw auto 0;}
	.visualBox > .inner .imgBox {gap:2.08vw}
	.visualBox > .inner .imgBox .img1 {width: 23.61vw;}
	.visualBox > .inner .imgBox .img2 {width: 49.17vw;}
	.visualBox > .inner .imgBox .img3 {width: 23.61vw;}

footer {bottom:5.56vw;padding:0}


 
}  
    @media (min-width: 768px) {

}

@media (max-width: 768px) {


}

  @media (max-width: 580px) {

}

@media (max-width: 480px) {

}  
  
@media (max-width: 320px) {

}