@charset "UTF-8";

.main {background-color:#f5f0eb;}
.main .introBox {display:block;position:absolute;top:0;left:0;width:100%;height:100vh;z-index:100}
.mainContainer {overflow-x:hidden;padding:100px 0}

/*main slider*/
.swiper-container {width:100%;height:100%;z-index:0}
.swiper-container {width:100%;height:100%}
.slick-slide img {width:100%}

.mainVisual {animation:mainVisual 1s 5.5s both;overflow-x:hidden}
.mainVisual .slideBox {display: flex;position: relative;overflow: hidden;height:100vh;width:100%}
.mainVisual .imgBox {width: 100%;height: 100%;position:relative}
.mainVisual .imgBox img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
#mainVisual {animation: imgani2 2s ease 10s both;}
#mainVisual2 {position:absolute;top:0;width:100%;animation: imgani2 2s ease 10s both;}
.mainBanner {width:100%;height:100vh;position:absolute;overflow:hidden;animation: imgani3 2s ease 10s both;}
.mainBanner .bnBox {position:absolute;top:0;left:0;width:100%;height:100vh;z-index:0}
.mainBanner .bnBox:nth-child(1) {animation: imgani 1s ease 5.5s both;}
.mainBanner .bnBox:nth-child(2) {animation: imgani 1s ease 6.5s both;}
.mainBanner .bnBox:nth-child(3) {animation: imgani 1s ease 7.5s both;}
.mainBanner .bnBox:nth-child(4) {animation: imgani 1.5s ease 10s both;}
.mainBanner .bnBox:nth-child(5) {animation: imgani 2s ease 11.5s both;}
.mainBanner .bnBox img {width:100%;object-fit:cover;transform-origin: top bottom;}

.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%}

.selectBox {position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:100;animation: aniup2 1s ease 9s both;}
.selectBox > .inner {position:relative;width:230px;border-radius:30px;background-color:rgba(33,33,33,.9);padding: 12px 20px;height: 60px;overflow: hidden;transition:all .5s ease}
.selectBox > .inner ul li + li {margin-top:20px}
.selectBox > .inner ul li a {display:flex;gap:15px;align-items:center;width: fit-content;}
.selectBox > .inner ul li a span {width:55px;flex-shrink: 0;}
.selectBox > .inner ul li a span img {width:100%}
.selectBox > .inner ul li a em {font-size:16px;color:#f5f0eb}
.selectBox > .inner #selectBtn {position:absolute;right:22px;bottom:22px;width:25px;height:20px;transition:all .2s}
.selectBox > .inner #selectBtn:before {content:'';position:absolute;right:0;bottom:3px;width:16px;height:9px;background:url(../img/ico_arrow.png) no-repeat 0 0/100%;transition:all .2s}
.selectBox.on > .inner #selectBtn:before {transform:rotate(180deg)}
.selectBox.on > .inner {padding:15px 20px;height:635px}

@keyframes imgani {
  0% {
  opacity:0;
	scale:0.2;
	transform:translateY(200px)
  }
  40% {
	opacity:1;
	scale:1;
	transform:translateY(0);
	z-index:1;
  }
  100% {
	scale:1;
	transform:translateY(0);
	z-index:0
  }
}

@keyframes imgani2 {
  0% {
	opacity:0;
visibility: hidden;
}
  100% {
	opacity:1;
visibility: visible;
}
}
@keyframes imgani3 {
  0% {
	display:block;
}
  100% {
	display:none;
}
}

@keyframes anidown {
  0% {
	opacity:0;
	transform:translateY(-100%)
}
  100% {
	opacity:1;
	transform:translateY(0)
}
}
@keyframes aniup {
  0% {
	opacity:0;
	transform:translateY(200px)
}
  100% {
	opacity:1;
	transform:translateY(0)
}
}
@keyframes aniup2 {
  0% {
	opacity:0;
	transform:translate(-50%,200px)
}
  100% {
	opacity:1;
	transform:translate(-50%,0)
}
}
#multi-line-animated {font-size: 22px;line-height: 1.8;height:100vh;overflow: hidden;position: relative;z-index:11;}
#multi-line-animated p {position: absolute;top: 0;left: 0;white-space: nowrap;opacity: 0;z-index:100;display:flex;align-items:center;justify-content: center;top:50%;left:50%;transform:translate(-50%,-50%);height:100%}
#multi-line-animated span,
#multi-line-animated img {position: relative;display: inline-block;opacity: 0;transform: translateY(20px);transition: color 0.5s ease;z-index:100;font-size:28px;color:#777;}
#multi-line-animated p:first-child span {letter-spacing:1.5px}
#multi-line-animated p:first-child span:nth-child(n+13),
#multi-line-animated p:last-child span:nth-child(n+6):nth-child(-n+8) {font-weight:600}
#multi-line-animated p:first-child span:nth-child(4),
#multi-line-animated p:first-child span:nth-child(13),
#multi-line-animated p:first-child span:nth-child(16),
#multi-line-animated p:first-child span:nth-child(23),
#multi-line-animated p:last-child span:nth-child(6),
#multi-line-animated p:last-child span:nth-child(9) {margin-left:10px}
#multi-line-animated p:last-child {max-width:1100px;flex-wrap: wrap;width:100%;align-items: center;align-content: center;}
.inline-img {width: 22px;vertical-align: bottom;padding:0 5px;margin-top:-5px}
.last-img {width:1100px}

#header {animation: anidown 1s ease 9s both;}
.floatingMenu {animation: aniup 1s ease 9s both;}

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

@media (max-width: 1700px) {



}

@media (max-width: 1400px) {

.thumList {padding:100px 40px}


}

@media (max-width: 1200px) {

.last-img {width:800px}


}

@media (max-width: 1023px) {

#multi-line-animated span,
#multi-line-animated img {transform: translateY(2.78vw);font-size:3.47vw;}
#multi-line-animated p:first-child span {letter-spacing:0.21vw}
.inline-img {width: 3.06vw;padding:0 0.69vw;margin-top:-0.69vw}
.last-img {width:78.47vw}
.selectBox {bottom:5.56vw;z-index:101}
.selectBox > .inner {width:44.0772vw;border-radius:6vw;padding: 2.3046vw 3.8364vw;height: 11.4954vw;}
.selectBox > .inner ul li + li {margin-top:3.8364vw}
.selectBox > .inner ul li a {gap:2.496vw;}
.selectBox > .inner ul li a span {width:10.5432vw;}
.selectBox > .inner ul li a em {font-size:3.0636vw}
.selectBox > .inner #selectBtn {right:4.2228vw;bottom:4.2228vw;width:4.7886vw;height:3.8364vw}
.selectBox > .inner #selectBtn:before {bottom:0.5796vw;width:3.0636vw;height:1.725vw}
.selectBox.on > .inner {padding:2.2396vw 3.8364vw;height:120.5vw}
.thumList {padding: 13.89vw 5.56vw;}
.thumList ul {gap: 4.17vw;justify-content: space-between;}
.thumImg {flex: 0 1 calc(100%/2 - 2.1vw);transform: translateY(6.94vw) scale(0.9);}
.mainContainer {padding:0}


}

@media (max-width: 768px) {

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

}

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

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