@charset "UTF-8";

.introBox {display:none}
.main .introBox {display:block;position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#f6efe7;z-index:9999;overflow:hidden;animation: slideInUp 1s cubic-bezier(.5,.8,.2,1) 3.8s both;}
.introBox > .inner {position:relative;width:100%;height:100%;max-width:1640px;margin:0 auto}
.introBox > .inner .txtBox {text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.introBox > .inner .txtBox em {display:block;font-size:20px;letter-spacing:2px;color:#212121;animation: slideInDown 0.5s ease 0.8s both;}
.introBox > .inner .txtBox p {margin-top:10px;animation: fadeIn 2.5s ease 1.5s both;}
.introBox > .inner .txtBox p img {width:305px}

.mainContainer {padding-bottom:100px;overflow-x:hidden}

/*main slider*/
.swiper-slide-active .slideBox {animation:active 1s .5s both}
@keyframes active {
	0% {-webkit-transform: scale(1.2,1.2);-ms-transform: scale(1.2,1.2);-moz-transform: scale(1.2,1.2);-o-transform: scale(1.2,1.2);transform: scale(1.2,1.2);}
	100% {-webkit-transform: scale(1);-ms-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
}
.swiper-container {width:100%;height:100%;z-index:0}
.swiper-button-prev {left:-150px;right: auto;background-image:url(../img/arrow_prev.png)}
.swiper-button-next {right:-150px;left: auto;background-image:url(../img/arrow_next.png)}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {bottom: 67px;}

.mainVisual {position:relative}
.mainVisual .imgBox {position:relative;overflow:hidden}
.mainVisual .imgBox img {width:100%;animation:active 1s 4s both}
.mainVisual .txtBox {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mainVisual .txtBox span  {display:block;width:100%;text-align:center;font-size:46px;color:#fff9f2;letter-spacing:-1px;font-weight:500;font-family:'Noto Sans KR';/*animation: slideInDown 0.5s ease 4.5s both;*/}
.mainVisual .txtBox em  {display:block;width:100%;text-align:center;font-size:48px;color:#fff9f2;letter-spacing:1.2px;font-weight:100}

.sliderBox {margin:100px auto 0;width:100%;max-width:1400px;}
.sliderBox .titBox span {display:block;font-size:18px;letter-spacing:0.75px}
.sliderBox .titBox h3 {font-size:64px;letter-spacing:0.5px;font-weight:100}
.collectSlider {position:relative;transform:scale(0.8);overflow-x:hidden}
.sliderBox #collectSlider {padding:50px 0 56px}
.sliderBox #collectSlider li {overflow:hidden}
.sliderBox #collectSlider .swiper-pagination.swiper-pagination-progressbar {position:absolute;top:auto;bottom:0;background:#fff}
.sliderBox #collectSlider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#212121}
.sliderBox img {width:100%}
.sliderBox #collectSlider .txtBox {position:absolute;bottom:0;padding-left:40px;display:flex;align-items:center;width:100%;height:120px;background-color:rgba(255,249,242,0.7);transform:translateY(100%);transition:all 0.5s ease}
.sliderBox #collectSlider li:hover .txtBox {transform:translateY(0)}
.sliderBox #collectSlider .txtBox em {font-size:18px;letter-spacing:0.75px;font-weight:100}
.sliderBox #collectSlider .txtBox em span {font-size:16px;font-weight:300;font-family:'Noto Sans KR'}

.aboutBox {margin:100px auto 0;width:100%;max-width:1400px}
.aboutBox > .inner {display:flex}
.aboutBox > .inner > div {flex:1;position:relative}
.aboutBox > .inner > .imgBox {}
.aboutBox > .inner > .imgBox img {width:100%;transform:scale(0.5)}
.aboutBox > .inner > .imgBox strong {position:absolute;top: 80px;left:50%;font-size:64px;font-weight:100;letter-spacing:0.5px;text-align:right;/* display: block; */width: 100%;transform: translate(calc(-50% + 270px),200px);opacity:0.5}
.aboutBox > .inner > .imgBox strong > span:first-child {color:#fff9f2;display:inline-block;margin-right:40px}
.aboutBox > .inner > .txtBox {padding:290px 0 0 100px;opacity:0.5;transform:translateX(200px)}
.aboutBox > .inner > .txtBox em {font-size:22px;letter-spacing:0.75px;line-height:1.5}
.aboutBox > .inner > .txtBox p {margin-top:20px;font-size:18px;letter-spacing:0.75px;line-height:1.6}


  @keyframes txtani {
  0% {
    opacity: 0;
    -webkit-transform:  translateY(2000px) scale(.5);
    -ms-transform:  translateY(2000px) scale(.5);
    transform:  translateY(2000px) scale(.5);
  }

  20% {
    opacity:1;
    -webkit-transform:  translateY(100px) scale(1.2);
    -ms-transform:  translateY(100px) scale(1.2);
    transform:  translateY(100px) scale(1.2);
  }
  100% {
    opacity:1;
    -webkit-transform:  translateY(0) scale(1);
    -ms-transform:  translateY(0) scale(1);
    transform:  translateY(0) scale(1);
  }
}

    @keyframes txtani2 {
  0% {
	top:50%;
	left:calc(50% - 620px);
	transform:translateY(-50%)
  }
  100% {
	top:calc(50% - 230px);
	left:50%;
	transform:translate(-50%,0)
  }
}
 
      @keyframes txtani3 {
  0% {
  }
		
  100% {
    position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
  }
}

      @keyframes txtani4 {
  0% {
	bottom:50%;
	right:calc(50% - 620px);
	transform:translateY(50%)
  }
  100% {
	bottom:calc(50% - 230px);
	right:50%;
	transform:translate(50%,0)
  }
}

/************************************************************************************
                                    Media Query
*************************************************************************************/

@media (max-width: 1700px) {

.swiper-button-prev {left:0;}
.swiper-button-next {right:0}


}

@media (max-width: 1400px) {

.swiper-button-prev,
.swiper-button-next {display:none}


}

@media (max-width: 1200px) {

.aboutBox > .inner > .imgBox strong {top: 50%;left:50%;font-size: 2.50vw;letter-spacing:0.07vw;text-align: center;transform: translate(-50%,-50%);color: #fff9f2;}
.aboutBox > .inner > .imgBox strong > span:first-child {color:#fff9f2;margin-right: 1.39vw;}
.aboutBox > .inner > .imgBox strong > span.type2 {font-size:8.89vw}
.aboutBox > .inner > .txtBox {padding: 13.89vw 0 0 5.56vw}


}

@media (max-width: 1024px) {

.mainContainer {padding-bottom:13.89vw}
.introBox > .inner {max-width:100%}
.introBox > .inner .txtBox {width:100%}
.introBox > .inner .txtBox em {font-size:2.78vw;letter-spacing:0.28vw;}
.introBox > .inner .txtBox p {margin-top:1.39vw}
.introBox > .inner .txtBox p img {width:42.36vw}

.mainVisual .txtBox  {width:100%}
.mainVisual .txtBox span  {font-size:5.00vw;letter-spacing:-0.14vw;}
.mainVisual .txtBox em  {font-size:5.28vw;letter-spacing:0.17vw}

.sliderBox {margin:13.89vw auto 0;max-width:100%;padding-left: 5.56vw;}
.sliderBox #collectSlider .txtBox {transform:translateY(0)}
.sliderBox .titBox span {font-size:2.50vw;letter-spacing:0.10vw}
.sliderBox .titBox h3 {font-size:8.89vw;letter-spacing:0.07vw}
.sliderBox #collectSlider {padding:6.94vw 0 7.78vw}
.sliderBox #collectSlider .txtBox {padding-left:5.56vw;height:16.67vw}
.sliderBox #collectSlider .txtBox em {font-size:2.50vw;letter-spacing:0.10vw}
.sliderBox #collectSlider .txtBox em span {font-size:2.22vw}

.aboutBox {margin:13.89vw auto 0;max-width:100%;padding: 0 5.56vw;}
.aboutBox > .inner {flex-direction: column;}
.aboutBox > .inner > .txtBox em {font-size:3.06vw;letter-spacing:0.10vw}
.aboutBox > .inner > .txtBox p {margin-top:2.78vw;font-size:2.50vw;letter-spacing:0.10vw}
.aboutBox > .inner > .txtBox {padding-left:0}

}

@media (max-width: 768px) {

.mainVisual .imgBox {height:100vh}
.mainVisual img {object-fit:cover;height:100%}

}

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

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