@charset "utf-8";
:root{
    --main: #e60012;
    --mem-main: #6357a3;
    --mem-sub: #b64b96;
    --pub-main: #008bd7;
    --pub-sub: #144583;
    --font: 'Pretendard Variable';
    --serif: 'Noto Serif KR';
    --white: #fff;
    --size30: 30px;
}

.border0{border: 0 !important;}
.positionR{position: relative !important;}

.main-video{width: 100vw; height: 100vh; object-fit: cover; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0;}

/* 메인 이미지, 백그라운드 컬러 */
.main-bg{position: relative; width: 100%; height: 100%;}
.main-bg img{width: 100%; height: 100%; object-fit: cover;}
.section .main-bg::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.32); z-index: 1;}
.fullpage-wrapper .section:first-child .main-bg::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.16); z-index: 1;}
.fullpage-wrapper .section:nth-child(4) .main-bg::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1;}


/* 메인 컨텐츠 */
.main-text{ position: absolute; top:50%; left: 50%; text-align: center; transform: translate(-50%, -50%); z-index: 1; color: #fff;}
.logo-area .main-logo{vertical-align: middle;}
.logo-area span{vertical-align: middle; font-size: 52px; font-weight: 700; margin-left: 24.2px;}
.main-text p{font-family: var(--serif); font-size: 36px; margin: 40px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.8); padding-bottom: 10px; font-weight: 500; line-height: 60px; letter-spacing: -1.08px;}
.main-text .sub-text{display: block; font-size: 22px; font-family: var(--font); color: rgba(255,255,255,0.8); letter-spacing: 1.32px;}
.main-text .bottom-text{font-size: 30px; font-family: var(--serif); line-height: 46px; letter-spacing: -0.9px;}
/*.main-text p::after{content:''; display:inline-block; height:2px; width:100%; background-color:#fff; transition:width 1s cubic-bezier(0,.14,.19,1),background-color .5s cubic-bezier(0,.14,.19,1);}*/
.main-reser-btn{font-size: 22px; color: #fff; font-family: var(--font);}

.main-btn{color: rgba(255,255,255,0.6); display: inline-block; margin-top: 40px; font-size: 14px; font-family: var(--font); font-weight: 300; border-bottom: 1px solid rgba(255,255,255,0.6);}

.main-group{display: flex; justify-content: center; gap:40px; margin-top: 92px;}
.main-box{border: 1px solid #ccc; width: 342px; height: 342px; border-radius: 50%; color: #fff; display: flex; align-items: center; flex-direction: column; padding-top: 109px; padding-bottom: 43px;}
.main-box h2{font-family: var(--serif); font-size: 30px;}
.main-box h3{height: 130px; display: flex; align-items: flex-start; margin-top: 25px; font-size: 18px;}
.main-box span{font-size: 14px; font-family: var(--font); color: rgba(255,255,255,0.6); text-decoration: underline;}

/* 메인 스크롤다운 */
.scrolldown {position: absolute;width: 24px;height: 40px;border: calc(var(--size30) / 20) solid var(--white);border-radius: 15px;box-sizing: border-box;margin-bottom: 16px;bottom: 72px;left: 50%;}

.scrolldown::before {content: "";position: absolute;bottom: 30px;left: 45%;width: 2px;height: 8px;margin-left: 0;background-color: var(--white);animation: scrolldown-anim 2s infinite;box-sizing: border-box;border-radius: 10px;}

@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 0;
  }
  40% {
    opacity: 1;
    height: 8px;
  }
  80% {
    transform: translate(0, 20px);
    height: 8px;
    opacity: 0;
  }
  100% {
    height: 3px;
    opacity: 0;
  }
}
.chevrons {padding: 6px 0 0 0;margin-left: -5px;margin-top: 40px;width: 30px;display: flex;flex-direction: column;align-items: center;}
.chevrondown {margin-top: -3px;position: relative;border: solid var(--white);border-width: 0 2px 2px 0;display: inline-block;width: 13px;height: 13px;transform: rotate(45deg); border-radius: 3px;}

.chevrondown:nth-child(1) {
  animation: pulse 800ms ease infinite alternate;
}
.chevrondown:nth-child(2) {
  animation: pulse 800ms ease infinite alternate 200ms;
}
.chevrondown:nth-child(3) {
  animation: pulse 800ms ease infinite alternate 250ms;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
/*
@keyframes pulse {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
*/

/* 메인팝업(공지) */
.main-pop-wrap{ width: 360px; position: absolute; right: 0; bottom: 0; z-index: 1; height: 51px;}
.main-pop-enter{ background-color: var(--mem-main); width: 360px; cursor: pointer; height: 51px; position: relative;}
.main-pop-enter li{ font-size: 18px; color: #fff; font-weight: 300; font-family: var(--font); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; justify-content: center; align-items: center;}
.main-pop-enter li img{position: absolute; top: 60%; right: 21px; transform: translateY(-50%);}

.main-pop-box{ width: 360px; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); bottom: 51px; transition: 0.3s ease-in-out all; z-index: 10; overflow: hidden; height: 392px; opacity: 1; visibility: visible;}
.hidden{ opacity: 0; visibility: hidden;}
.show{opacity: 1; visibility: visible;}

.slider-head{position: absolute; top: 0; left: 0; width: 88px; height: 40px; background: var(--mem-main); color: #fff; display: flex; justify-content: center; align-items: center; font-family: 'Noto Sans KR'; font-weight: 400; z-index: 2;}

/* 팝업 슬라이드 */
.swiper-pagination{bottom: 24px !important;}
.swiper-slide img{width: 100%; height: 392px; min-width: 360px;}
.swiper-pagination-bullet{background: #fff !important;}
.swiper-pagination-bullet-active{background: #fff !important;}

/* 애니메이션 */
.fadeUp{
	-webkit-animation: fadeUp 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fadeUp 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.fadeDown{
	-webkit-animation: fadeDown 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fadeDown 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slideLeft{
	-webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
  }
}

/*텍스트모션*/
.motion{
	display:block;
}
.motion.is-visible {
  transform: translateY(0);
    opacity: 1;
    animation:fadeUp 1.2s ease-out forwards;
}
/*
.main-text h1.is-visible {
  transform: translateY(0);
    opacity: 1;
    animation:fadeUp 1.2s ease-out forwards;
}
*/

@keyframes fadeUp {
  0% {
    transform: translateY(70px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}