@charset "utf-8";

.introBox {width:100%;height:100vh;min-height:700px;background-color:#f1f1f1;overflow:hidden;margin:0;max-width:100%;position:relative;z-index:1}	
.introBox > .inner {display:flex;height:100%;flex-direction: column;align-items: center;justify-content: center;}
.introBox > .inner .txt1 {display:flex;gap:10px;align-items: center;animation: slideInDown 0.5s ease 0.8s both}
.introBox > .inner .txt1 .img {display:inline-block;width: 80px;line-height: 1;padding-bottom: 4px;}
.introBox > .inner .txt1 .img img {width:100%}
.introBox > .inner .txt1 .txt {font-size: 34px;letter-spacing:0.25px;line-height:1}
.introBox > .inner .txt2 {margin-top:10px;animation: fadeIn 2.5s ease 1.5s both;}
.introBox > .inner .txt2 .txt {font-size: 24px;letter-spacing:0.75px}
.introBox > .inner .pBox {margin-top:80px;animation: slideInUp 1s ease 3.8s both;}
.introBox > .inner .pBox p {font-size: 16px;text-align:center;font-weight: 200;letter-spacing:0;font-family:'Pretendard';line-height:1.7}
.introBox > .inner .pBox p em {font-weight: 600;font-size: 16px;}
.introBox > .inner .pBox p + p {margin-top:25px}
.introBox > .inner .pBox .linkBox {margin-top:80px;display: flex;justify-content: center;}
.introBox > .inner .pBox .linkBox a {font-family: 'Gatena';font-size: 20px;display:block;width:fit-content;letter-spacing:1.5px;padding-right:28px;position:relative}
.introBox > .inner .pBox .linkBox a:before {content:'';display:block;position:absolute;right:0;bottom: 5px;width: 18px;height: 11px;background:url(../img/ico_arrow.png) no-repeat 0 0/100%}

footer {position:fixed;left:0;bottom:30px;width:100%;color: #f5f0eb;text-align: center;letter-spacing: 1px;}
footer p {line-height:1;font-size:14px}


     @-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% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height:530px;
  }
} 

 @-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)
    }
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {max-width:100%}
.mainVisual {display:flex;width:100%;max-width:1500px;margin:0 auto;padding:50px 0;height:calc(100dvh - 100px)}
.mainVisual > div {flex:1}
.mainVisual .leftBox .topTxt {display:flex;gap:12px}
.mainVisual .leftBox .topTxt .logo {width:105px;line-height:1}
.mainVisual .leftBox .topTxt .logo img {width:100%}
.mainVisual .leftBox .topTxt em {font-size: 38px;letter-spacing:0.25px;line-height:1;font-weight: 500;-webkit-text-stroke: 0.2px #000;}
.mainVisual .leftBox .mainTxt {margin-top:25px;font-size: 28px;line-height:1.28;letter-spacing:0.75px;font-weight: 500;-webkit-text-stroke: 0.3px #000;}
.mainVisual .leftBox .snsBox {margin-top:25px;}
.mainVisual .leftBox .snsBox ul {display:flex;gap:20px;align-items:center}
.mainVisual .leftBox .snsBox ul li a {display:block;width:24px;height:24px;font-size:0;background:url(../img/ico_insta.png) no-repeat 0 0/100%}
.mainVisual .leftBox .snsBox ul li.kakao a {height:25px;background-image:url(../img/ico_kakao.png)}
.mainVisual .rightBox {margin-top: 50px;overflow: hidden;position: relative;height: calc(100vh - 150px);}
.mainVisual .rightBox .visualBox {height: 100%;}
.mainVisual .rightBox .visualBox ul {display: flex;flex-direction: column;transition: transform 0.6s ease-in-out;height: 100%;}
.mainVisual .rightBox .visualBox li {height: 100%;flex-shrink: 0;width: 100%;}
.mainVisual .rightBox .visualBox li img {width: 100%;height: 100%;object-fit: cover;display: block;object-position: top center;}

footer {position:fixed;left: 50%;bottom: 50px;width:100%;color: #f5f0eb;text-align: center;letter-spacing: 1px;max-width: 1500px;margin: 0 auto;transform: translateX(-50%);}
footer .copyright {display: flex;align-items: flex-end;gap: 13px;}
#header h1 {display:none !important}

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

	.mainVisual {padding:50px}


}


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


	.mainVisual {max-width:100vw;padding: 5.56vw 5.56vw;flex-direction: column;min-height: 160vw;}
	.mainVisual > div {flex: none;}
	.mainVisual .leftBox .topTxt {gap:1.67vw}
	.mainVisual .leftBox .topTxt .logo {width:14.58vw;}
	.mainVisual .leftBox .topTxt em {font-size: 5.28vw;letter-spacing:0.03vw;-webkit-text-stroke: 0.03vw #000;}
	.mainVisual .leftBox .mainTxt {margin-top:3.47vw;font-size: 3.89vw;letter-spacing:0.10vw;-webkit-text-stroke: 0.04vw #000;}
	.mainVisual .leftBox .snsBox {margin-top:3.47vw;}
	.mainVisual .leftBox .snsBox ul {gap:2.78vw;}
	.mainVisual .leftBox .snsBox ul li a {width:3.33vw;height:3.33vw}
	.mainVisual .leftBox .snsBox ul li.kakao a {height:3.47vw;}
	.mainVisual .rightBox {margin-top:6.94vw;}
	footer {left:0;bottom: 5.56vw;letter-spacing: 0.14vw;max-width:100%;transform:none}
	footer .copyright {gap: 1.81vw;}

 
}  


@media (max-width : 1024px) and (min-width : 768px) {

	.mainVisual .rightBox {height:44vh;min-height:100.69vw}
	.mainVisual {min-height: 160vw;}

}



 @media (max-width: 767px) {

	.introBox {height:calc(var(--vh, 1vh) * 100);min-height:92.22vw}
	.introBox > .inner .txt1 {gap:1.39vw}
	.introBox > .inner .txt1 .img {width: 11.11vw;padding-bottom: 0.56vw;}
	.introBox > .inner .txt1 .txt {font-size: 4.72vw;letter-spacing:0.03vw}
	.introBox > .inner .txt2 {margin-top:1.39vw}
	.introBox > .inner .txt2 .txt {font-size: 3.33vw;letter-spacing:0.10vw}
	.introBox > .inner .pBox {margin-top:11.11vw;}
	.introBox > .inner .pBox p {font-size: 2.22vw;}
	.introBox > .inner .pBox p em {font-size: 2.22vw;}
	.introBox > .inner .pBox p + p {margin-top:3.47vw}
	.introBox > .inner .pBox .linkBox {margin-top:11.11vw;}
	.introBox > .inner .pBox .linkBox a {font-size: 2.78vw;letter-spacing:0.21vw;padding-right:3.89vw}
	.introBox > .inner .pBox .linkBox a:before {bottom: 0.69vw;width: 2.50vw;height: 1.53vw}

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

  100% {
    opacity: 1;
    height:73.61vw;
  }
} 
.mainVisual .rightBox {height:65vh}
.mHeader h1 {display:none !important}



}

@media (max-width: 768px) {


}

  @media (max-width: 580px) {

	.mainVisual {max-height:100vh;min-height:100%}
	#footer {position:fixed}
}

@media (max-width: 480px) {

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

}