first commit

assets/css/style.css

@@ -0,0 +1,1415 @@
+img {
+  width: 100%;
+}
+
+.evt--section01 {
+  background-color: #00b6ff;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.evt--section01 .palm--img1 {
+  position: absolute;
+  top: -3%;
+  left: 0;
+  max-width: 495px;
+  width: 50%;
+  z-index: 10;
+}
+.evt--section01 .palm--img2 {
+  z-index: 10;
+  position: absolute;
+  right: -60px;
+  top: -3%;
+  width: 50%;
+  max-width: 500px;
+}
+.evt--section01 .bubble--bg {
+  z-index: 10;
+  position: absolute;
+  background-image: url(../img/img_bg_3.png);
+  width: 231px;
+  height: 95px;
+  bottom: -500px;
+  left: -231px;
+}
+.evt--section01 .wave--bg {
+  position: absolute;
+  background-size: 100%;
+  background-position: 0 -120px;
+  background-image: url(../img/bg_2.png);
+  width: 100%;
+  height: 5000px;
+}
+.evt--section01 .section--container {
+  max-width: 1440px;
+  margin: 0 auto;
+  position: relative;
+}
+.evt--section01 .section--container .section--title {
+  margin-top: 150px;
+  margin-bottom: 150px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 11;
+  align-items: center;
+}
+.evt--section01 .section--container .section--title .logo {
+  max-width: 290px;
+  width: 40%;
+  margin-bottom: 80px;
+}
+.evt--section01 .section--container .section--title > h1 {
+  margin-bottom: 30px;
+}
+.evt--section01 .section--container .section--title > h2 {
+  margin-bottom: 100px;
+}
+.evt--section01 .section--container .section--title > h3 {
+  max-width: 716px;
+  width: 80%;
+}
+.evt--section01 .section--container .section--title .bg1 {
+  position: absolute;
+  left: -200px;
+  top: 0px;
+}
+.evt--section01 .section--container .section--title .bg2 {
+  position: absolute;
+  left: -230px;
+  bottom: -200px;
+}
+.evt--section01 .section--container .section--title .bg4 {
+  position: absolute;
+  right: -200px;
+  bottom: -60px;
+}
+.evt--section01 .section--container .section--title .bg--wave--wrap {
+  position: absolute;
+  right: -90px;
+  top: 50px;
+}
+.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave {
+  position: relative;
+  width: 900px;
+  height: 550px;
+}
+.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave1 {
+  position: absolute;
+  z-index: -1;
+}
+.evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave2 {
+  position: absolute;
+  width: 316px;
+  right: 60px;
+  top: 103px;
+}
+.evt--section01 .section--container .video--wrap {
+  max-width: 1440px;
+  margin: 0 auto 120px;
+  overflow: hidden;
+  max-height: 90vh;
+  background-color: black;
+  border: 3px solid #ffffff;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 5;
+}
+.evt--section01 .section--container .video--wrap video {
+  aspect-ratio: 4/3;
+  z-index: 5;
+  width: 100%;
+  position: relative;
+  vertical-align: top;
+}
+.evt--section01 .section--container .video--wrap .bg5 {
+  position: absolute;
+  top: -100px;
+  left: -340px;
+  z-index: 2;
+}
+.evt--section01 .section--container .video--wrap .video--btn {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 230px;
+  max-height: 230px;
+  width: 20vw;
+  height: 20vw;
+  z-index: 10;
+  height: 230px;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  background-image: url(../img/ico_play.png);
+}
+.evt--section01 .section--container .video--wrap .video--btn.play {
+  display: block;
+}
+.evt--section01 .section--container .swiper--wrap {
+  position: relative;
+  margin-bottom: 200px;
+  box-shadow: 16px 12px 32px rgba(68, 68, 68, 0.15);
+}
+.evt--section01 .section--container .swiper--wrap .bg1 {
+  position: absolute;
+  right: -180px;
+  top: -30px;
+}
+.evt--section01 .section--container .swiper--wrap .bg2 {
+  position: absolute;
+  left: -160px;
+  top: 50%;
+}
+.evt--section01 .section--container .swiper--wrap .bg3 {
+  position: absolute;
+  right: -260px;
+  bottom: 30%;
+}
+.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap {
+  display: flex;
+  gap: 5px;
+}
+.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
+  background-color: #fff;
+  border: none;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  text-align: center;
+  width: 100%;
+  position: relative;
+  font-weight: 500;
+  font-family: "GmarketSans";
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  padding: 0;
+  color: #787878;
+  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.15) inset;
+}
+.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:first-child::before, .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:nth-child(2)::before, .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:nth-child(3)::before {
+  content: "NEW";
+  font-size: 14px;
+  margin-top: -5px;
+  margin-right: 5px;
+}
+.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  bottom: 0;
+  position: absolute;
+}
+.evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn.active {
+  background-color: #0000ff;
+  font-weight: 700;
+  color: #ffde00;
+}
+.evt--section01 .section--container .swiper--wrap .swiper-slide {
+  display: flex;
+  justify-content: center;
+}
+.evt--section01 .section--container .swiper--wrap .slide--img {
+  position: relative;
+}
+.evt--section01 .section--container .swiper--wrap .slide--img .new--icon {
+  display: inline-block;
+  position: absolute;
+  width: 10%;
+  padding-bottom: 11%;
+  background-repeat: no-repeat;
+  bottom: 5%;
+  right: 6%;
+  background-image: url(../img/ico_new.png);
+  max-width: 130px;
+  max-height: 130px;
+  background-size: 100%;
+}
+.evt--section01 .section--container .swiper--wrap .slide--desc {
+  padding: 70px 100px;
+  height: 380px;
+  background-color: #fff;
+}
+.evt--section01 .section--container .swiper--wrap .slide--desc.type2 {
+  padding: 40px 100px;
+}
+.evt--section01 .section--container .swiper--wrap .slide--desc.type2 h4 {
+  margin-bottom: 0px;
+}
+.evt--section01 .section--container .swiper--wrap .slide--desc h4 {
+  font-family: "GmarketSans";
+  font-weight: 700;
+  font-size: 42px;
+  margin-bottom: 20px;
+}
+.evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
+  font-size: 28px;
+}
+.evt--section01 .section--container .swiper--wrap .slide--desc p {
+  font-family: "Pretendard Variable";
+  font-size: 28px;
+  line-height: 1.4;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
+.evt--section01 .section--container .swiper--wrap .slide--desc p:last-child {
+  margin-bottom: 0px;
+}
+.evt--section01 .section--container .swiper--wrap .swiper-pagination {
+  bottom: -100px;
+}
+.evt--section01 .section--container .swiper--wrap .swiper-pagination span {
+  width: 32px;
+  height: 32px;
+  margin: 0 12px;
+  background-color: #008be6;
+  opacity: 0.6;
+}
+.evt--section01 .section--container .swiper--wrap .swiper-pagination .swiper-pagination-bullet-active {
+  background-color: #0047bb;
+  opacity: 1;
+}
+.evt--section01 .section--container .swiper--wrap .swiper-button-next, .evt--section01 .section--container .swiper--wrap .swiper-button-prev {
+  width: 50px;
+  background-image: url(../img/ico_arrow.png);
+  height: 90px;
+  top: 30%;
+  right: -100px;
+}
+.evt--section01 .section--container .swiper--wrap .swiper-button-next::after, .evt--section01 .section--container .swiper--wrap .swiper-button-prev::after {
+  display: none;
+}
+.evt--section01 .section--container .swiper--wrap .swiper-button-prev {
+  transform: rotate(180deg);
+  left: -100px;
+}
+
+.evt--section02-1 {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(to bottom, #004dee, #007ff6);
+}
+.evt--section02-1::before {
+  content: "";
+  background-image: url(../img/bg_4.png);
+  background-repeat: no-repeat;
+  background-position: bottom;
+  display: inline-block;
+  top: 0;
+  z-index: 1;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.evt--section02-1 .cloud--img1 {
+  position: absolute;
+  left: 0;
+  z-index: 10;
+  max-width: 20%;
+  top: 100px;
+}
+.evt--section02-1 .cloud--img2 {
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  max-width: 30%;
+  top: 50px;
+}
+.evt--section02-1 .section--container {
+  max-width: 1920px;
+  margin: 0 auto;
+}
+.evt--section02-1 .section--container .evt--1 {
+  padding: 100px 0 130px;
+  position: relative;
+  background-position: bottom;
+  background-repeat: no-repeat;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.evt--section02-1 .section--container .evt--1 h2 {
+  max-width: 682px;
+  width: 70%;
+}
+.evt--section02-1 .section--container .evt--1 .bg1 {
+  position: absolute;
+  left: 15%;
+  top: 30%;
+}
+.evt--section02-1 .section--container .evt--1 .bg2 {
+  position: absolute;
+  right: 5%;
+  top: 30%;
+}
+.evt--section02-1 .section--container .evt--1 .bg3 {
+  left: 7%;
+  bottom: 25%;
+  position: absolute;
+}
+.evt--section02-1 .section--container .evt--1 .bg4 {
+  position: absolute;
+  bottom: 25%;
+  right: 5%;
+}
+.evt--section02-1 .section--container .evt--1 .evt--box {
+  margin-top: 50px;
+  font-weight: 600;
+  text-align: center;
+  font-size: 45px;
+  font-family: "Pretendard Variable";
+  color: #ffffff;
+  line-height: 1.2;
+}
+.evt--section02-1 .section--container .evt--circle {
+  font-family: "Pretendard Variable";
+  font-weight: 800;
+  font-size: 30px;
+  padding: 20px 40px;
+  background-color: #00175f;
+  color: #ffffff;
+  border-radius: 50%;
+  margin-bottom: 50px;
+  display: inline-block;
+}
+.evt--section02-1 .section--container h3 {
+  color: #ffffff;
+  font-weight: 700;
+  margin-bottom: 0;
+  text-align: center;
+  font-size: 56px;
+  font-family: "Pretendard Variable";
+}
+
+.evt--section02-2 {
+  background-color: #007ff6;
+  position: relative;
+  overflow: hidden;
+}
+.evt--section02-2 .bg1 {
+  position: absolute;
+  left: 0;
+  z-index: 2;
+  bottom: 20%;
+  max-width: 575px;
+  width: 40%;
+}
+.evt--section02-2 .bg2 {
+  max-width: 690px;
+  width: 40%;
+  position: absolute;
+  right: 0;
+  z-index: 2;
+  bottom: 10%;
+}
+.evt--section02-2::after {
+  content: "";
+  display: inline-block;
+  bottom: 0;
+  z-index: 1;
+  left: 0;
+  position: absolute;
+  background: linear-gradient(to bottom, #007ff6, #004dee);
+  width: 100%;
+  height: 100%;
+}
+.evt--section02-2 .section--container {
+  max-width: 1500px;
+  margin: 0 auto;
+}
+.evt--section02-2 .section--container .evt--circle {
+  font-family: "Pretendard Variable";
+  font-weight: 800;
+  font-size: 30px;
+  padding: 20px 40px;
+  background-color: #00175f;
+  color: #ffffff;
+  border-radius: 50%;
+  margin-bottom: 50px;
+  display: inline-block;
+}
+.evt--section02-2 .section--container h3 {
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 56px;
+  font-family: "Pretendard Variable";
+}
+.evt--section02-2 .section--container .evt--2 {
+  padding: 120px 0 130px;
+  position: relative;
+  background-repeat: no-repeat;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.evt--section02-2 .section--container .evt--2 h2 {
+  max-width: 789px;
+  width: 90%;
+}
+.evt--section02-2 .section--container .evt--2 h3 {
+  text-align: center;
+  margin-bottom: 30px;
+}
+.evt--section02-2 .section--container .evt--2 .evt--box {
+  margin-top: 60px;
+  margin-bottom: 70px;
+  border-radius: 25px;
+  background-color: rgba(0, 152, 249, 0.4);
+  box-shadow: 0px 2px 9.5px 0.5px rgba(0, 0, 0, 0.23);
+  font-weight: 600;
+  padding: 75px 90px;
+  font-size: 36px;
+  font-family: "Pretendard Variable";
+  color: #ffffff;
+  line-height: 1.2;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+.evt--section02-2 .section--container .evt--2 .evt--box li {
+  list-style: none;
+  font-size: 36px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-weight: 400;
+  gap: 25px;
+}
+.evt--section02-2 .section--container .evt--2 .evt--box li .circle {
+  padding: 10px 40px;
+  width: 168px;
+  display: inline-block;
+  height: 60px;
+  border-radius: 30px;
+  background-color: #00A2FB;
+  text-align: justify;
+}
+.evt--section02-2 .section--container .evt--2 .evt--box li .circle::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+}
+.evt--section02-2 .section--container .evt--2 .evt--box2 {
+  max-width: 470px;
+  width: 60%;
+}
+.evt--section02-2 .section--container .evt--2 .evt--btn {
+  border-style: solid;
+  border-width: 3px;
+  border-color: rgb(255, 255, 255);
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00175f;
+  box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.14);
+  max-width: 416px;
+  width: 100%;
+  height: 95px;
+  font-family: "Pretendard Variable";
+  font-size: 40px;
+  font-weight: 800;
+  text-decoration: none;
+  color: #ffffff;
+}
+
+.evt--section03 {
+  overflow: hidden;
+  background: linear-gradient(to bottom, #5DBBFF 0%, #00A8FF 50%, #5DBBFF 100%);
+  padding: 150px 0 150px;
+  position: relative;
+}
+.evt--section03::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-position: top;
+  z-index: 0;
+  background-repeat: no-repeat;
+  display: inline-block;
+  background-image: url(../img/bg_color_2.png);
+}
+.evt--section03::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-position: bottom;
+  z-index: 0;
+  background-repeat: no-repeat;
+  display: inline-block;
+  background-image: url(../img/bg_color_1.png);
+}
+.evt--section03 .section--container {
+  max-width: 1280px;
+  z-index: 10;
+  position: relative;
+  margin: 0 auto;
+}
+.evt--section03 .section--container .section--title {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 80px;
+}
+.evt--section03 .section--container .section--title h3 {
+  max-width: 750px;
+  width: 60%;
+}
+.evt--section03 .section--container .section--title h2 {
+  max-width: 945px;
+  width: 70%;
+}
+.evt--section03 .section--container .section--title .circle {
+  margin-top: 20px;
+  max-width: 832px;
+  width: 70%;
+}
+.evt--section03 .section--container .promotion--wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 120px;
+  gap: 140px;
+}
+.evt--section03 .section--container .promotion--wrap .promotion {
+  width: 400px;
+  height: 580px;
+  background-image: url(../img/img_bg_9.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  color: #ffffff;
+}
+.evt--section03 .section--container .promotion--wrap .promotion h4 {
+  font-family: "Pretendard Variable";
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 210px;
+  margin-bottom: 0;
+}
+.evt--section03 .section--container .promotion--wrap .promotion p {
+  font-family: "gmarketSans";
+  font-size: 45px;
+  margin-bottom: 0;
+}
+.evt--section03 .section--container .promotion--wrap .promotion h5 {
+  line-height: 1.1;
+  font-family: "gmarketSans";
+  font-size: 86px;
+  font-weight: 800;
+  margin-bottom: 0;
+}
+.evt--section03 .section--container .promotion--wrap .promotion h5 span {
+  font-size: 44px;
+}
+.evt--section03 .section--container .promotion--detail--wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 80px;
+  margin-bottom: 460px;
+  position: relative;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail {
+  color: #373737;
+  background-color: #fff;
+  border: 3px solid black;
+  padding: 70px;
+  border-radius: 68px;
+  z-index: 3;
+  position: relative;
+  display: flex;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail:nth-child(1)::before {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  width: 318px;
+  height: 314px;
+  top: -91px;
+  left: -48px;
+  background-repeat: no-repeat;
+  background-image: url(../img/bg_wave_3.png);
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail:nth-child(2)::before {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  width: 286px;
+  right: -125px;
+  top: -36px;
+  z-index: 10;
+  height: 380px;
+  background-repeat: no-repeat;
+  background-image: url(../img/bg_wave_4.png);
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l {
+  width: 70%;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
+  font-size: 44px;
+  font-weight: 700;
+  display: inline-block;
+  font-family: "Pretendard Variable";
+  text-decoration: underline;
+  margin-bottom: 40px;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
+  font-family: "Pretendard Variable";
+  font-size: 54px;
+  font-weight: 900;
+  margin-bottom: 40px;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 > span {
+  color: #6d21ed;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul li {
+  line-height: 1.2;
+  font-family: "Pretendard Variable";
+  font-weight: 500;
+  font-size: 38px;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+  text-align: right;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
+  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.4);
+  background: linear-gradient(135deg, #8324ff, #5a3dfd, #0a5aff);
+  font-family: "Pretendard Variable";
+  font-size: 44px;
+  font-weight: 800;
+  width: 130px;
+  height: 140px;
+  line-height: 1.2;
+  display: flex;
+  align-items: center;
+  right: 100px;
+  top: 0;
+  justify-content: center;
+  color: #ffffff;
+  position: absolute;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
+  font-size: 28px;
+  font-family: "Pretendard Variable";
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
+  font-size: 44px;
+  font-weight: 700;
+  font-family: "Pretendard Variable";
+  position: relative;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
+  content: "";
+  display: inline-block;
+  width: 267px;
+  height: 62px;
+  position: absolute;
+  top: 50%;
+  left: -30px;
+  background-image: url(../img/ico_arrow2.png);
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
+  font-family: "Pretendard Variable";
+  font-size: 66px;
+  color: #6d21ed;
+  font-weight: 900;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail--plus {
+  z-index: 2;
+  position: absolute;
+  font-size: 38px;
+  top: calc(100% - 55px);
+  width: 100%;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  font-family: "Pretendard Variable";
+  background-color: #9EC3FE;
+  padding: 100px 60px 60px;
+  font-weight: 500;
+  margin-bottom: 0;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail--plus li {
+  list-style: none;
+  position: relative;
+  padding-left: 30px;
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail--plus li::before {
+  top: 0px;
+  left: 0px;
+  position: absolute;
+  content: "*";
+}
+.evt--section03 .section--container .promotion--detail--wrap .detail--plus strong {
+  font-weight: 800;
+  text-decoration: underline;
+}
+.evt--section03 .section--container .count--wrap {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 10;
+  align-items: center;
+}
+.evt--section03 .section--container .count--wrap .count--txt {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 90px;
+}
+.evt--section03 .section--container .count--wrap .count--txt .img--wrap {
+  position: relative;
+}
+.evt--section03 .section--container .count--wrap .count--txt .img--wrap::before {
+  content: "";
+  display: inline-block;
+  width: 144px;
+  height: 80px;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  left: -40%;
+  top: 30px;
+  position: absolute;
+  background-image: url(../img/img_15_bg1.png);
+}
+.evt--section03 .section--container .count--wrap .count--txt .img--wrap::after {
+  content: "";
+  display: inline-block;
+  width: 242px;
+  height: 177px;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  right: -70%;
+  bottom: 100px;
+  position: absolute;
+  background-image: url(../img/img_15_bg2.png);
+}
+.evt--section03 .section--container .count--wrap .count--txt > p {
+  color: #ffffff;
+  font-family: "gmarketSans";
+  text-align: center;
+  font-size: 46px;
+  font-weight: 800;
+  margin-bottom: 0;
+  text-align: center;
+  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
+}
+.evt--section03 .section--container .count--wrap .count--num {
+  display: flex;
+  font-family: "gmarketSans";
+  gap: 80px;
+  margin-bottom: 140px;
+  position: relative;
+}
+.evt--section03 .section--container .count--wrap .count--num::before {
+  content: "";
+  width: 210px;
+  left: -300px;
+  top: calc(50% - 500px);
+  height: 1000px;
+  position: absolute;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url(../img/img_bg_10.png);
+}
+.evt--section03 .section--container .count--wrap .count--num::after {
+  content: "";
+  width: 210px;
+  right: -300px;
+  top: calc(50% - 500px);
+  height: 1000px;
+  position: absolute;
+  background-repeat: no-repeat;
+  background-position: center;
+  transform: rotate(180deg);
+  background-image: url(../img/img_bg_10.png);
+}
+.evt--section03 .section--container .count--wrap .count--num div {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+}
+.evt--section03 .section--container .count--wrap .count--num div span {
+  font-size: 120px;
+  color: #ffffff;
+  background-color: #7F1BF2;
+  width: 140px;
+  font-weight: 800;
+  height: 210px;
+  display: inline-block;
+  line-height: 2;
+  text-align: center;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
+  border-radius: 30px;
+  position: relative;
+  z-index: 30;
+  perspective: 600px;
+  overflow: hidden;
+}
+.evt--section03 .section--container .count--wrap .count--num div span.flip {
+  animation: flipDown 0.5s ease-in-out;
+}
+.evt--section03 .section--container .count--wrap .count--num div span::before {
+  content: "";
+  width: 100%;
+  z-index: -1;
+  display: inline-block;
+  left: 0;
+  top: 0;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  height: 50%;
+  background-color: #8b2ef4;
+  position: absolute;
+}
+.evt--section03 .section--container .count--wrap .evt--btn {
+  border-style: solid;
+  border-width: 3px;
+  border-color: rgb(255, 255, 255);
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  z-index: 10;
+  justify-content: center;
+  background-color: #00175f;
+  box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.14);
+  max-width: 416px;
+  width: 100%;
+  height: 95px;
+  font-family: "Pretendard Variable";
+  font-size: 40px;
+  font-weight: 800;
+  text-decoration: none;
+  color: #ffffff;
+}
+
+@media (max-width: 1480px) {
+  .section--container {
+    padding: 0 20px;
+  }
+  .evt--section01 .section--container .swiper--wrap .swiper-button-next,
+  .evt--section01 .section--container .swiper--wrap .swiper-button-prev {
+    display: none;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc {
+    padding: 25px 50px !important;
+    min-height: 300px;
+    height: auto;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc h4 {
+    font-size: 32px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
+    font-size: 20px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc p {
+    font-size: 18px;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg1 {
+    left: 0;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg1 img {
+    width: 80%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg2 {
+    right: -10%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg2 img {
+    width: 80%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg3 {
+    left: 0;
+    bottom: 45%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg3 img {
+    width: 80%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg4 {
+    bottom: 40%;
+    right: -10%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg4 img {
+    width: 80%;
+  }
+}
+@media (max-width: 1200px) {
+  .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
+    font-size: 18px;
+    height: 68px;
+  }
+  .evt--section02-1 .section--container h3 {
+    font-size: 36px;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg1 img {
+    width: 50%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg2 {
+    top: 40%;
+    right: -30%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg2 img {
+    width: 50%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg3 img {
+    width: 50%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg4 {
+    right: -240px;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg4 img {
+    width: 50%;
+  }
+  .evt--section02-2 .bg1 {
+    bottom: auto;
+    top: 5%;
+  }
+  .evt--section02-2 .bg2 {
+    bottom: auto;
+    top: 5%;
+  }
+  .evt--section02-2 .section--container h3 {
+    font-size: 36px;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box {
+    padding: 30px;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box li {
+    font-size: 30px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap {
+    gap: 40px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail {
+    padding: 50px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
+    font-size: 32px;
+    margin-bottom: 20px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
+    font-size: 48px;
+    line-height: 1.4;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul {
+    padding-left: 24px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul li {
+    font-size: 24px;
+    line-height: 1.4;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
+    right: 50px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
+    font-size: 24px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
+    font-size: 32px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
+    transform: scaleX(-1);
+    left: auto;
+    right: -10px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
+    font-size: 48px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail--plus {
+    font-size: 24px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail--plus li {
+    padding-left: 20px;
+  }
+  .evt--section03 .section--container .count--wrap > p {
+    font-size: 30px;
+  }
+  .evt--section03 .section--container .count--wrap .count--txt > p {
+    font-size: 30px;
+  }
+  .evt--section03 .section--container .count--wrap .count--num {
+    width: 100%;
+    justify-content: center;
+    gap: 5%;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div {
+    width: 33%;
+    gap: 5%;
+    justify-content: center;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div span {
+    font-size: 120px;
+    width: 50%;
+    height: auto;
+  }
+}
+@media (max-width: 1000px) {
+  .evt--section01 .section--container .bg2 {
+    display: none;
+  }
+  .evt--section01 .section--container .bg4 {
+    display: none;
+  }
+  .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap {
+    overflow-x: auto;
+    white-space: nowrap;
+    width: auto;
+  }
+  .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
+    width: -moz-fit-content;
+    width: fit-content;
+    height: auto;
+    padding: 15px 15px 10px;
+    flex-shrink: 0;
+  }
+  .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn:first-child::before {
+    font-size: 10px;
+  }
+  .evt--section01 .section--container .swiper--wrap .swiper-pagination span {
+    width: 24px;
+    height: 24px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc {
+    padding: 25px 15px !important;
+    min-height: 240px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc h4 {
+    font-size: 24px;
+    margin-bottom: 15px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
+    font-size: 16px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc p {
+    margin-bottom: 15px;
+    font-size: 14px;
+  }
+  .evt--section03 .section--container .promotion--wrap {
+    gap: 20px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion h4 {
+    font-size: 32px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion p {
+    font-size: 32px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion h5 {
+    font-size: 72px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap {
+    gap: 20px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
+    font-size: 24px;
+    margin-bottom: 15px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
+    font-size: 36px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > ul li {
+    font-size: 18px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
+    font-size: 24px;
+    width: 80px;
+    height: 90px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
+    font-size: 18px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
+    font-size: 24px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
+    right: -10px;
+    height: 50px;
+    top: 15px;
+    background-size: cover;
+    width: 210px;
+    background-position: left;
+    transform: scaleX(1);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='50' viewBox='0 0 88 20' fill='none'%3E%3Cpath d='M1 1V0.5H0.265087L0.534922 1.18358L1 1ZM8.5 20L9.34929 14.2893L3.97904 16.4091L8.5 20ZM87.5 1V0.5H1V1V1.5H87.5V1ZM1 1L0.534922 1.18358L6.38267 15.9979L6.84775 15.8143L7.31283 15.6307L1.46508 0.816417L1 1Z' fill='%23373737'/%3E%3C/svg%3E");
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
+    font-size: 36px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail--plus {
+    padding: 80px 30px 30px;
+    font-size: 18px;
+  }
+  .evt--section03 .section--container .count--wrap .count--txt {
+    margin-bottom: 50px;
+    flex-direction: column;
+    align-items: center;
+  }
+  .evt--section03 .section--container .count--wrap .count--txt .img--wrap {
+    width: 50%;
+  }
+  .evt--section03 .section--container .count--wrap .count--txt .img--wrap::before {
+    width: 70px;
+    top: 0px;
+  }
+  .evt--section03 .section--container .count--wrap .count--txt .img--wrap::after {
+    bottom: auto;
+    width: 100px;
+    right: -50%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .evt--section03 .section--container .count--wrap .count--num div .day--text::after {
+    width: 30px;
+    right: auto;
+    left: calc(100% + 10px);
+    background-size: 100%;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div span {
+    font-size: 100px;
+  }
+}
+@media (max-width: 767px) {
+  .evt--section01 .section--container .section--title .bg--wave--wrap {
+    top: 120px;
+  }
+  .evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave {
+    height: 300px;
+    width: 450px;
+  }
+  .evt--section01 .section--container .section--title .bg--wave--wrap .bg--wave .bg--wave2 {
+    display: none;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg1 {
+    top: 10%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg2 {
+    right: -320px;
+    top: 5%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg3 {
+    bottom: auto;
+    top: 30%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg4 {
+    bottom: auto;
+    right: -240px;
+    top: 35%;
+  }
+  .evt--section02-1 .section--container .evt--1 .evt--circle {
+    font-size: 18px;
+    padding: 10px 20px;
+    margin-bottom: 30px;
+  }
+  .evt--section02-1 .section--container .evt--1 h3 {
+    font-size: 20px;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box {
+    width: 100%;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box li {
+    gap: 10px;
+    font-size: 18px;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box li .circle {
+    padding: 10px 30px;
+    height: auto;
+    width: auto;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box li .circle::after {
+    display: none;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--circle {
+    font-size: 18px;
+    padding: 10px 20px;
+    margin-bottom: 30px;
+  }
+  .evt--section02-2 .section--container .evt--2 h3 {
+    font-size: 20px;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--btn {
+    font-size: 24px;
+    height: 80px;
+  }
+  .evt--section03 .section--container .promotion--wrap {
+    margin-bottom: 40px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion {
+    height: 450px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion h4 {
+    font-size: 20px;
+    line-height: 24vw;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion p {
+    font-size: 20px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion h5 {
+    font-size: 48px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail {
+    flex-direction: column;
+    padding: 30px;
+    gap: 15px;
+    border-radius: 20px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail::before {
+    display: none !important;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l {
+    width: 100%;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > span {
+    font-size: 18px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--l > h5 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r {
+    width: 100%;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > span {
+    font-size: 18px;
+    width: 60px;
+    height: 70px;
+    right: 30px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r > p {
+    margin-bottom: 0;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price {
+    font-size: 18px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .before--price::after {
+    width: 140px;
+    height: 30px;
+    top: 12px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail .detail--r .after--price {
+    font-size: 24px;
+  }
+  .evt--section03 .section--container .promotion--detail--wrap .detail--plus {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    font-size: 14px;
+  }
+  .evt--section03 .section--container .count--wrap .evt--btn {
+    font-size: 24px;
+    height: 80px;
+  }
+  .evt--section03 .section--container .count--wrap .count--txt > p {
+    font-size: 20px;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div .day--text::after {
+    width: 20px;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div span {
+    border-radius: 8px;
+    font-size: 48px;
+    padding: 20px 0;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div span::before {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}
+@media (max-width: 500px) {
+  .evt--section01 .section--container .swiper--wrap {
+    margin-bottom: 50px;
+  }
+  .evt--section01 .section--container .swiper--wrap .swiper--tab--wrap .tab--btn {
+    font-size: 16px;
+  }
+  .evt--section01 .section--container .swiper--wrap .swiper-pagination span {
+    width: 14px;
+    height: 14px;
+    margin: 0 5px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc {
+    padding: 25px 15px !important;
+    min-height: 200px;
+    height: 100%;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc h4 {
+    font-size: 18px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc h4 span {
+    font-size: 12px;
+  }
+  .evt--section01 .section--container .swiper--wrap .slide--desc p {
+    font-size: 14px;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg2 {
+    top: 2%;
+    right: -360px;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg2 img {
+    width: 45%;
+  }
+  .evt--section02-1 .section--container .evt--1 .bg3 {
+    top: 32%;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box {
+    padding: 20px;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box li {
+    font-size: 14px;
+  }
+  .evt--section02-2 .section--container .evt--2 .evt--box li .circle {
+    padding: 5px 15px;
+    white-space: nowrap;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion {
+    height: 300px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion h4 {
+    font-size: 16px;
+    margin-bottom: 0px;
+    line-height: 22vw;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion p {
+    font-size: 16px;
+    margin-bottom: 0px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion h5 {
+    font-size: 36px;
+  }
+  .evt--section03 .section--container .promotion--wrap .promotion h5 span {
+    font-size: 24px;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div .day--text::after {
+    width: 10px;
+  }
+  .evt--section03 .section--container .count--wrap .count--num div span {
+    font-size: 24px;
+    padding: 15px 0;
+  }
+}/*# sourceMappingURL=style.css.map */

assets/scss/style.scss

@@ -0,0 +1,1572 @@
+img{
+  width: 100%;
+}
+.evt--section01{
+  background-color: #00b6ff;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  position: relative;
+  overflow: hidden;
+  .palm--img1{
+    position: absolute;
+    top: -3%;
+    left: 0;
+    max-width: 495px;
+    width: 50%;
+    z-index:10;
+  }
+  .palm--img2{
+    z-index:10;
+    position: absolute;
+    right: -60px;
+    top: -3%;
+    width: 50%;
+    max-width: 500px;
+  }
+  .bubble--bg{
+    z-index:10;
+    position: absolute;
+    background-image: url(../img/img_bg_3.png);
+    width: 231px;
+    height: 95px;
+    bottom: -500px;
+    left: -231px;
+  }
+  .wave--bg{
+    position: absolute;
+    background-size: 100%;
+    background-position: 0 -120px;
+    background-image: url(../img/bg_2.png);
+    width: 100%;
+    height: 5000px;
+  }
+  .section--container{
+    max-width: 1440px;
+    margin: 0 auto;
+    position: relative;
+    .section--title{
+      margin-top: 150px;
+      margin-bottom: 150px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      z-index: 11;
+      align-items: center;
+      .logo{
+        max-width: 290px;
+        width: 40%;
+        margin-bottom: 80px;
+      }
+      >h1{
+        margin-bottom: 30px;
+      }
+      >h2{
+        margin-bottom: 100px;
+      }
+      >h3{
+        max-width: 716px;
+        width: 80%;
+      }
+      .bg1{
+        position: absolute;
+        left: -200px;
+        top: 0px;
+      }
+      .bg2{
+        position: absolute;
+        left: -230px;
+        bottom: -200px;
+      }
+      .bg4{
+        position: absolute;
+        right: -200px;
+        bottom: -60px;
+      }
+      .bg--wave--wrap{
+        position: absolute;
+        right: -90px;
+        top: 50px;
+        .bg--wave{
+          position: relative;
+          width: 900px;
+          height: 550px;
+          .bg--wave1{
+            position: absolute;
+            z-index: -1;
+          }
+          .bg--wave2{
+            position: absolute;
+            width: 316px;
+            right: 60px;
+            top: 103px;
+          }
+        }
+      }
+    }
+    .video--wrap{
+      max-width: 1440px;
+      margin: 0 auto 120px;
+      overflow: hidden;
+      max-height: 90vh;
+      background-color: black;
+      border: 3px solid #ffffff;
+      border-radius: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      position: relative;
+      z-index: 5;
+      video{
+        aspect-ratio: 4 / 3;
+        z-index: 5;
+        width: 100%;
+        position: relative;
+        vertical-align: top;
+      }
+      .bg5{
+        position: absolute;
+        top: -100px;
+        left: -340px;
+        z-index: 2;
+      }
+      .video--btn{
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 230px;
+        max-height: 230px;
+        width: 20vw;
+        height: 20vw;
+        z-index: 10;
+        height: 230px;
+        cursor: pointer;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 100%;
+        background-image: url(../img/ico_play.png);
+        &.play{
+          display: block;
+        }
+      }
+    }
+    .swiper--wrap{
+      position: relative;
+      margin-bottom: 200px;
+      box-shadow: 16px 12px 32px rgba(68, 68, 68, 0.15);
+      .bg1{
+        position: absolute;
+        right: -180px;
+        top: -30px;
+      }
+      .bg2{
+        position: absolute;
+        left: -160px;
+        top: 50%;
+      }
+      .bg3{
+        position: absolute;
+        right: -260px;
+        bottom: 30%;
+      }
+      .swiper--tab--wrap{
+        display: flex;
+        gap: 5px;
+        .tab--btn{
+          background-color: #fff;
+          border: none;
+          border-top-left-radius: 15px;
+          border-top-right-radius: 15px;
+          text-align: center;
+          width: 100%;
+          position: relative;
+          font-weight: 500;
+          font-family: 'GmarketSans';
+          height: 80px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 28px;
+          padding: 0;
+          color: #787878;
+          box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.15) inset;
+          &:first-child,
+          &:nth-child(2),
+          &:nth-child(3){
+            &::before{
+              content: 'NEW';
+              font-size: 14px;
+              margin-top: -5px;
+              margin-right: 5px;
+            }
+          }
+          &::after{
+            content: '';
+            display: inline-block;
+            width: 100%;
+            bottom: 0;
+            position: absolute;
+          }
+          &.active{
+            background-color: #0000ff;
+            font-weight: 700;
+            color: #ffde00;
+          }
+        }
+      }
+      .swiper-slide{
+        display: flex;
+        justify-content: center;
+      }
+      .slide--img{
+        position: relative;
+        .new--icon{
+          display: inline-block;
+          position: absolute;
+          width: 10%;
+          padding-bottom: 11%;
+          background-repeat: no-repeat;
+          bottom: 5%;
+          right: 6%;
+          background-image: url(../img/ico_new.png);
+          max-width: 130px;
+          max-height: 130px;
+          background-size: 100%;
+        }
+      }
+      .slide--desc{
+        padding: 70px 100px;
+        height: 380px;
+        background-color: #fff;
+        &.type2{
+          padding: 40px 100px;
+          h4{
+            margin-bottom: 0px;
+          }
+        }
+        h4{
+          font-family: 'GmarketSans';
+          font-weight: 700;
+          font-size: 42px;
+          margin-bottom: 20px;
+          span{
+            font-size: 28px;
+          }
+        }
+        p{
+          font-family: 'Pretendard Variable';
+          font-size: 28px;
+          line-height: 1.4;
+          font-weight: 500;
+          margin-bottom: 30px;
+          &:last-child{
+            margin-bottom: 0px;
+          }
+        }
+      }
+      .swiper-pagination{
+        bottom: -100px;
+        span{
+          width: 32px;
+          height: 32px;
+          margin: 0 12px;
+          background-color: #008be6;
+          opacity: 0.6;
+        }
+        .swiper-pagination-bullet-active{
+          background-color: #0047bb;
+          opacity: 1;
+        }
+      }
+      .swiper-button-next, .swiper-button-prev{
+        width: 50px;
+        background-image: url(../img/ico_arrow.png);
+        height: 90px;
+        top: 30%;
+        right: -100px;
+        &::after{
+          display: none;
+        }
+      }
+      .swiper-button-prev{
+        transform: rotate(180deg);
+        left: -100px;
+      }
+    }
+  }
+}
+.evt--section02-1{
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(to bottom, #004dee, #007ff6);
+  &::before{
+    content: '';
+    background-image: url(../img/bg_4.png);
+    background-repeat: no-repeat;
+    background-position: bottom;
+    display: inline-block;
+    top: 0;
+    z-index: 1;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .cloud--img1{
+    position: absolute;
+    left: 0;
+    z-index: 10;
+    max-width: 20%;
+    top: 100px;
+  }
+  .cloud--img2{
+    position: absolute;
+    right: 0;
+    z-index: 10;
+    max-width: 30%;
+    top: 50px;
+  }
+  .section--container{
+    max-width: 1920px;
+    margin: 0 auto;
+    .evt--1{
+      padding: 100px 0 130px;
+      position: relative;
+      background-position: bottom;
+      background-repeat: no-repeat;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      h2{
+        max-width: 682px;
+        width: 70%;
+      }
+      .bg1{
+        position: absolute;
+        left: 15%;
+        top: 30%
+      }
+      .bg2{
+        position: absolute;
+        right: 5%;
+        top: 30%;
+      }
+      .bg3{
+        left: 7%;
+        bottom: 25%;
+        position: absolute;
+      }
+      .bg4{
+        position: absolute;
+        bottom: 25%;
+        right: 5%;
+      }
+      .evt--box{
+        margin-top: 50px;
+        font-weight: 600;
+        text-align: center;
+        font-size: 45px;
+        font-family: 'Pretendard Variable';
+        color: #ffffff;
+        line-height: 1.2;
+      }
+    }
+    .evt--circle{
+      font-family: 'Pretendard Variable';
+      font-weight: 800;
+      font-size: 30px;
+      padding: 20px 40px;
+      background-color: #00175f;
+      color: #ffffff;
+      border-radius: 50%;
+      margin-bottom: 50px;
+      display: inline-block;
+    }
+    h3{
+      color: #ffffff;
+      font-weight: 700;
+      margin-bottom: 0;
+      text-align: center;
+      font-size: 56px;
+      font-family: 'Pretendard Variable';
+    }
+  }
+}
+.evt--section02-2{
+  background-color: #007ff6;
+  position: relative;
+  overflow: hidden;
+  .bg1{
+    position: absolute;
+    left: 0;
+    z-index: 2;
+    bottom: 20%;
+    max-width: 575px;
+    width: 40%;
+  }
+  .bg2{
+    max-width: 690px;
+    width: 40%;
+    position: absolute;
+    right: 0;
+    z-index: 2;
+    bottom: 10%;
+  }
+  &::after{
+    content: '';
+    display: inline-block;
+    bottom: 0;
+    z-index: 1;
+    left: 0;
+    position: absolute;
+    background: linear-gradient(to bottom, #007ff6, #004dee);
+    width: 100%;
+    height: 100%;
+  }
+  .section--container{
+    max-width: 1500px;
+    margin: 0 auto;
+    .evt--circle{
+      font-family: 'Pretendard Variable';
+      font-weight: 800;
+      font-size: 30px;
+      padding: 20px 40px;
+      background-color: #00175f;
+      color: #ffffff;
+      border-radius: 50%;
+      margin-bottom: 50px;
+      display: inline-block;
+    }
+    h3{
+      color: #ffffff;
+      font-weight: 700;
+      font-size: 56px;
+      font-family: 'Pretendard Variable';
+    }
+    .evt--2{
+      padding: 120px 0 130px;
+      position: relative;
+      background-repeat: no-repeat;
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      h2{
+        max-width: 789px;
+        width: 90%;
+      }
+      h3{
+        text-align: center;
+        margin-bottom: 30px;
+      }
+      .evt--box{
+        margin-top: 60px;
+        margin-bottom: 70px;
+        border-radius: 25px;
+        background-color: rgba(0, 152, 249, 0.4);
+        box-shadow: 0px 2px 9.5px 0.5px rgba(0, 0, 0, 0.23);
+        font-weight: 600;
+        padding: 75px 90px;
+        font-size: 36px;
+        font-family: 'Pretendard Variable';
+        color: #ffffff;
+        line-height: 1.2;
+        display: flex;
+        flex-direction: column;
+        gap: 25px;
+        li{
+          list-style: none;
+          font-size: 36px;
+          display: flex;
+          align-items: center;
+          width: 100%;
+          font-weight: 400;
+          gap: 25px;
+          .circle{
+            padding: 10px 40px;
+            width: 168px;
+            display: inline-block;
+            height: 60px;
+            border-radius: 30px;
+            background-color: #00A2FB;
+            text-align: justify;
+            &::after {
+              content: "";
+              display: inline-block;
+              width: 100%;
+            }
+          }
+        }
+      }
+      .evt--box2{
+        max-width: 470px;
+        width: 60%;
+      }
+      .evt--btn{
+        border-style: solid;
+        border-width: 3px;
+        border-color: rgb(255, 255, 255);
+        border-radius: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #00175f;
+        box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.14);
+        max-width: 416px;
+        width: 100%;
+        height: 95px;
+        font-family: 'Pretendard Variable';
+        font-size: 40px;
+        font-weight: 800;
+        text-decoration: none;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.evt--section03{
+  overflow: hidden;
+  background: linear-gradient(to bottom,#5DBBFF 0%, #00A8FF 50%, #5DBBFF 100%);
+  padding: 150px 0 150px;
+  position: relative;
+  &::before{
+    content:  '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-position: top;
+    z-index: 0;
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-image: url(../img/bg_color_2.png);
+  }
+  &::after{
+    content:  '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-position: bottom;
+    z-index: 0;
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-image: url(../img/bg_color_1.png);
+  }
+  .section--container{
+    max-width: 1280px;
+    z-index: 10;
+    position: relative;
+    margin: 0 auto;
+    .section--title{
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 80px;
+      h3{
+        max-width: 750px;
+        width: 60%;
+      }
+      h2{
+        max-width: 945px;
+        width: 70%;
+      }
+      .circle{
+        margin-top: 20px;
+        max-width: 832px;
+        width: 70%;
+      }
+    }
+    .promotion--wrap{
+      display: flex;
+      justify-content: center;
+      margin-bottom: 120px;
+      gap: 140px;
+      .promotion{
+        width: 400px;
+        height: 580px;
+        background-image: url(../img/img_bg_9.png);
+        background-size: 100%;
+        background-repeat: no-repeat;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        color: #ffffff;
+        h4{
+          font-family: 'Pretendard Variable';
+          font-size: 56px;
+          font-weight: 700;
+          line-height: 210px;
+          margin-bottom: 0;
+        }
+        p{
+          font-family: 'gmarketSans';
+          font-size: 45px;
+          margin-bottom: 0;
+        }
+        h5{
+          line-height: 1.1;
+          font-family: 'gmarketSans';
+          font-size: 86px;
+          font-weight: 800;
+          margin-bottom: 0;
+          span{
+            font-size: 44px;
+          }
+        }
+      }
+    }
+    .promotion--detail--wrap{
+      display: flex;
+      flex-direction: column;
+      gap: 80px;
+      margin-bottom: 460px;
+      position: relative;
+      .detail{
+        color: #373737;
+        background-color: #fff;
+        border: 3px solid black;
+        padding: 70px;
+        border-radius: 68px;
+        z-index: 3;
+        position: relative;
+        display: flex;
+        &:nth-child(1){
+          &::before{
+            content: '';
+            position: absolute;
+            display: inline-block;
+            width: 318px;
+            height: 314px;
+            top: -91px;
+            left: -48px;
+            background-repeat: no-repeat;
+            background-image: url(../img/bg_wave_3.png);
+          }
+        }
+        &:nth-child(2){
+          &::before{
+            content: '';
+            position: absolute;
+            display: inline-block;
+            width: 286px;
+            right: -125px;
+            top: -36px;
+            z-index: 10;
+            height: 380px;
+            background-repeat: no-repeat;
+            background-image: url(../img/bg_wave_4.png);
+          }
+        }
+        .detail--l{
+          width: 70%;
+          >span{
+            font-size: 44px;
+            font-weight: 700;
+            display: inline-block;
+            font-family: 'Pretendard Variable';
+            text-decoration: underline;
+            margin-bottom: 40px;
+          }
+          >h5{
+            font-family: 'Pretendard Variable';
+            font-size: 54px;
+            font-weight: 900;
+            margin-bottom: 40px;
+            >span{
+              color:  #6d21ed;
+            }
+          }
+          >ul{
+            li{
+              line-height: 1.2;
+              font-family: 'Pretendard Variable';
+              font-weight: 500;
+              font-size: 38px;
+            }
+          }
+        }
+        .detail--r{
+          width: 30%;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          justify-content: flex-end;
+          text-align: right;
+          >span{
+            box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.4);
+            background: linear-gradient(135deg, #8324ff, #5a3dfd, #0a5aff);
+            font-family: 'Pretendard Variable';
+            font-size: 44px;
+            font-weight: 800;
+            width: 130px;
+            height: 140px;
+            line-height: 1.2;
+            display: flex;
+            align-items: center;
+            right: 100px;
+            top: 0;
+            justify-content: center;
+            color: #ffffff;
+            position:  absolute;
+          }
+          >p{
+            font-size: 28px;
+            font-family: 'Pretendard Variable';
+            font-weight: 500;
+            margin-bottom: 10px;
+          }
+          .before--price{
+            font-size: 44px;
+            font-weight: 700;
+            font-family: 'Pretendard Variable';
+            position: relative;
+            &::after{
+              content: '';
+              display: inline-block;
+              width:  267px;
+              height: 62px;
+              position: absolute;
+              top: 50%;
+              left: -30px;
+              background-image: url(../img/ico_arrow2.png);
+            }
+          }
+          .after--price{
+            font-family: 'Pretendard Variable';
+            font-size: 66px;
+            color: #6d21ed;
+            font-weight: 900;
+          }
+        }
+      }
+      .detail--plus{
+        z-index: 2;
+        position: absolute;
+        font-size: 38px;
+        top: calc(100% - 55px);
+        width: 100%;
+        border-bottom-left-radius: 50px;
+        border-bottom-right-radius: 50px;
+        font-family: 'Pretendard Variable';
+        background-color: #9EC3FE;
+        padding: 100px 60px 60px;
+        font-weight: 500;
+        margin-bottom: 0;
+        li{
+          list-style: none;
+          position: relative;
+          padding-left: 30px;
+          &::before{
+            top: 0px;
+            left: -0px;
+            position: absolute;
+            content:  '*';
+          }
+        }
+        strong{
+          font-weight: 800;
+          text-decoration: underline;
+        }
+      }
+    }
+    .count--wrap{
+      display: flex;
+      flex-direction: column;
+      position:  relative;
+      z-index: 10;
+      align-items: center;
+      .count--txt{
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 20px;
+        margin-bottom: 90px;
+        .img--wrap{
+          position: relative;
+          &::before{
+            content: '';
+            display: inline-block;
+            width: 144px;
+            height: 80px;
+            background-repeat: no-repeat;
+            background-size: 100%;
+            left: -40%;
+            top: 30px;
+            position: absolute;
+            background-image: url(../img/img_15_bg1.png);
+          }
+          &::after{
+            content: '';
+            display: inline-block;
+            width: 242px;
+            height: 177px;
+            background-repeat: no-repeat;
+            background-size: 100%;
+            right: -70%;
+            bottom: 100px;
+            position: absolute;
+            background-image: url(../img/img_15_bg2.png);
+          }
+        }
+        >p{
+          color: #ffffff;
+          font-family: 'gmarketSans';
+          text-align: center;
+          font-size: 46px;
+          font-weight: 800;
+          margin-bottom: 0;
+          text-align: center;
+          text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
+        }
+      }
+      .count--num{
+        display: flex;
+        font-family: 'gmarketSans';
+        gap: 80px;
+        margin-bottom: 140px;
+        position: relative;
+        &::before{
+          content: '';
+          width: 210px;
+          left: -300px;
+          top: calc(50% - 500px);
+          height: 1000px;
+          position: absolute;
+          background-repeat: no-repeat;
+          background-position: center;
+          background-image: url(../img/img_bg_10.png);
+        }
+        &::after{
+          content: '';
+          width: 210px;
+          right: -300px;
+          top: calc(50% - 500px);
+          height: 1000px;
+          position: absolute;
+          background-repeat: no-repeat;
+          background-position: center;
+          transform: rotate(180deg);
+          background-image: url(../img/img_bg_10.png);
+        }
+        div{
+          display: flex;
+          gap: 30px;
+          align-items: center;
+          span{
+            font-size: 120px;
+            color: #ffffff;
+            background-color: #7F1BF2;
+            width: 140px;
+            font-weight: 800;
+            height: 210px;
+            display: inline-block;
+            line-height: 2;
+            text-align: center;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
+            border-radius: 30px;
+            position: relative;
+            z-index: 30;
+            perspective: 600px;
+            overflow: hidden;
+            &.flip{
+              animation: flipDown 0.5s ease-in-out;
+            }
+            &::before {
+              content: '';
+              width: 100%;
+              z-index: -1;
+              display: inline-block;
+              left: 0;
+              top: 0;
+              border-top-left-radius: 30px;
+              border-top-right-radius: 30px;
+              height: 50%;
+              background-color: #8b2ef4;
+              position: absolute;
+            }
+          }
+        }
+      }
+      .evt--btn{
+        border-style: solid;
+        border-width: 3px;
+        border-color: rgb(255, 255, 255);
+        border-radius: 50px;
+        display: flex;
+        align-items: center;
+        z-index: 10;
+        justify-content: center;
+        background-color: #00175f;
+        box-shadow: 0px 15px 16px 0px rgba(0, 0, 0, 0.14);
+        max-width: 416px;
+        width: 100%;
+        height: 95px;
+        font-family: 'Pretendard Variable';
+        font-size: 40px;
+        font-weight: 800;
+        text-decoration: none;
+        color: #ffffff;
+      }
+    }
+  }
+}
+@media(max-width: 1480px){
+  .section--container{
+    padding: 0 20px;
+  }
+  .evt--section01{
+    .section--container{
+      .swiper--wrap{
+        .swiper-button-next,
+        .swiper-button-prev{
+          display: none;
+        }
+        .slide--desc{
+          padding: 25px 50px!important;
+          min-height: 300px;
+          height: auto;
+          h4{
+            font-size: 32px;
+            span{
+              font-size: 20px;
+            }
+          }
+          p{
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+  .evt--section02-1{
+    .section--container{
+      .evt--1{
+        .bg1{
+          left: 0;
+          img{
+            width: 80%;
+          }
+        }
+        .bg2{
+          right: -10%;
+          img{
+            width: 80%;
+          }
+        }
+        .bg3{
+          left: 0;
+          bottom: 45%;
+          img{
+            width: 80%;
+          }
+        }
+        .bg4{
+          bottom: 40%;
+          right: -10%;
+          img{
+            width: 80%;
+          }
+        }
+      }
+    }
+  }
+}
+@media(max-width: 1200px){
+  .evt--section01{
+    .section--container{
+      .swiper--wrap{
+        .swiper--tab--wrap{
+          .tab--btn{
+            font-size: 18px;
+            height: 68px;
+          }
+        }
+      }
+    }
+  }
+  .evt--section02-1{
+    .section--container{
+      h3{
+        font-size: 36px;
+      }
+      .evt--1{
+        .bg1{
+          img{
+            width: 50%;
+          }
+        }
+        .bg2{
+          top: 40%;
+          right: -30%;
+          img{
+            width: 50%;
+          }
+        }
+        .bg3{
+
+          img{
+            width: 50%;
+          }
+        }
+        .bg4{
+          right: -240px;
+          img{
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+  .evt--section02-2{
+    .bg1{
+      bottom: auto;
+      top: 5%;
+    }
+    .bg2{
+      bottom: auto;
+      top: 5%;
+    }
+    .section--container{
+      h3{
+        font-size: 36px;
+      }
+      .evt--2{
+        .evt--box{
+          padding: 30px;
+          li{
+            font-size: 30px;
+          }
+        }
+      }
+    }
+  }
+  .evt--section03{
+    .section--container{
+      .promotion--detail--wrap{
+        gap: 40px;
+        .detail{
+          padding: 50px;
+          .detail--l{
+            >span{
+              font-size: 32px;
+              margin-bottom: 20px;
+            }
+            >h5{
+              font-size: 48px;
+              line-height: 1.4;
+            }
+            >ul{
+              padding-left: 24px;
+              li{
+                font-size: 24px;
+                line-height: 1.4;
+              }
+            }
+          }
+          .detail--r{
+            >span{
+              right: 50px;
+            }
+            >p{
+              font-size: 24px;
+            }
+            .before--price{
+              font-size: 32px;
+              &::after{
+                transform: scaleX(-1);
+                left: auto;
+                right: -10px;
+              }
+            }
+            .after--price{
+              font-size: 48px;
+            }
+          }
+        }
+        .detail--plus{
+          font-size: 24px;
+          li{
+            padding-left: 20px;
+          }
+        }
+      }
+      .count--wrap{
+        > p{
+          font-size: 30px;
+        }
+        .count--txt{
+          >p{
+            font-size: 30px;
+          }
+        }
+        .count--num{
+          width: 100%;
+          justify-content: center;
+          gap: 5%;
+          div{
+            width: 33%;
+            gap: 5%;
+            justify-content: center;
+            span{
+              font-size: 120px;
+              width: 50%;
+              height: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media(max-width: 1000px){
+  .evt--section01{
+    .section--container{
+      .bg2{
+        display: none;
+      }
+      .bg4{
+        display: none;
+      }
+      .swiper--wrap{
+        .swiper--tab--wrap{
+          overflow-x: auto;
+          white-space: nowrap;
+          width: auto;
+          .tab--btn{
+            width: fit-content;
+            height: auto;
+            padding: 15px 15px 10px;
+            flex-shrink: 0;
+            &:first-child{
+              &::before{
+                font-size: 10px;
+              }
+            }
+          }
+        }
+        .swiper-pagination{
+          span{
+            width: 24px;
+            height: 24px;
+          }
+        }
+        .slide--desc{
+          padding: 25px 15px!important;
+          min-height: 240px;
+          h4{
+            font-size: 24px;
+            margin-bottom: 15px;
+            span{
+              font-size: 16px;
+            }
+          }
+          p{
+            margin-bottom: 15px;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+  .evt--section03{
+    .section--container{
+      .promotion--wrap{
+        gap: 20px;
+        .promotion{
+          h4{
+            font-size: 32px;
+          }
+          p{
+            font-size: 32px;
+          }
+          h5{
+            font-size: 72px;
+          }
+        }
+      }
+      .promotion--detail--wrap{
+        gap: 20px;
+        .detail{
+          .detail--l{
+            >span{
+              font-size: 24px;
+              margin-bottom: 15px;
+            }
+            >h5{
+              font-size: 36px;
+            }
+            >ul{
+              li{
+                font-size: 18px;
+              }
+            }
+          }
+          .detail--r{
+            >span{
+              font-size: 24px;
+              width: 80px;
+              height: 90px;
+            }
+            >p{
+              font-size: 18px;
+            }
+            .before--price{
+              font-size: 24px;
+              &::after{
+                right: -10px;
+                height: 50px;
+                top: 15px;
+                background-size: cover;
+                width: 210px;
+                background-position: left;
+                transform: scaleX(1);
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='50' viewBox='0 0 88 20' fill='none'%3E%3Cpath d='M1 1V0.5H0.265087L0.534922 1.18358L1 1ZM8.5 20L9.34929 14.2893L3.97904 16.4091L8.5 20ZM87.5 1V0.5H1V1V1.5H87.5V1ZM1 1L0.534922 1.18358L6.38267 15.9979L6.84775 15.8143L7.31283 15.6307L1.46508 0.816417L1 1Z' fill='%23373737'/%3E%3C/svg%3E");
+              }
+            }
+            .after--price{
+              font-size: 36px;
+            }
+          }
+        }
+        .detail--plus{
+          padding: 80px 30px 30px;
+          font-size: 18px;
+        }
+      }
+      .count--wrap{
+        .count--txt{
+          margin-bottom: 50px;
+          flex-direction: column;
+          align-items: center;
+          .img--wrap{
+            width: 50%;
+            &::before{
+              width: 70px;
+              top: 0px;
+            }
+            &::after{
+              bottom: auto;
+              width: 100px;
+              right: -50%;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+        }
+        .count--num{
+          div{
+            .day--text{
+              &::after{
+                width: 30px;
+                right: auto;
+                left: calc(100% + 10px);
+                background-size: 100%;
+              }
+            }
+            span{
+              font-size: 100px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media(max-width: 767px){
+  .evt--section01{
+    .section--container{
+      .section--title{
+        .bg--wave--wrap{
+          top: 120px;
+          .bg--wave{
+            height: 300px;
+            width: 450px;
+            .bg--wave2{
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  .evt--section02-1{
+    .section--container{
+      .evt--1{
+        .bg1{
+          top: 10%;
+        }
+        .bg2{
+          right: -320px;
+          top: 5%;
+        }
+        .bg3{
+          bottom: auto;
+          top: 30%;
+        }
+        .bg4{
+          bottom:  auto;
+          right: -240px;
+          top: 35%;
+        }
+        .evt--circle{
+          font-size: 18px;
+          padding: 10px 20px;
+          margin-bottom: 30px;
+        }
+        h3{
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .evt--section02-2{
+    .section--container{
+      .evt--2{
+        .evt--box{
+          width: 100%;
+          li{
+            gap: 10px;
+            font-size: 18px;
+            .circle{
+              padding: 10px 30px;
+              height: auto;
+              width: auto;
+              &::after{
+                display: none;
+              }
+            }
+          }
+        }
+        .evt--circle{
+          font-size: 18px;
+          padding: 10px 20px;
+          margin-bottom: 30px;
+        }
+        h3{
+          font-size: 20px;
+        }
+        .evt--btn{
+          font-size: 24px;
+          height: 80px;
+        }
+      }
+    }
+  }
+  .evt--section03{
+    .section--container{
+      .promotion--wrap{
+        margin-bottom: 40px;
+        .promotion{
+          height: 450px;
+          h4{
+            font-size: 20px;
+            line-height: 24vw;
+          }
+          p{
+            font-size: 20px;
+          }
+          h5{
+            font-size: 48px;
+          }
+        }
+      }
+      .promotion--detail--wrap{
+        .detail{
+          flex-direction: column;
+          padding: 30px;
+          gap: 15px;
+          border-radius: 20px;
+          &::before{
+            display: none!important;
+          }
+          .detail--l{
+            width: 100%;
+            >span{
+              font-size: 18px;
+            }
+            >h5{
+              font-size: 24px;
+              margin-bottom: 20px;
+            }
+          }
+          .detail--r{
+            width: 100%;
+            >span{
+              font-size: 18px;
+              width: 60px;
+              height: 70px;
+              right: 30px;
+            }
+            >p{
+              margin-bottom: 0;
+            }
+            .before--price{
+              font-size: 18px;
+              &::after{
+                width: 140px;
+                height: 30px;
+                top: 12px;
+              }
+            }
+            .after--price{
+              font-size: 24px;
+            }
+          }
+        }
+        .detail--plus{
+          border-bottom-left-radius: 20px;
+          border-bottom-right-radius: 20px;
+          font-size: 14px;
+        }
+      }
+      .count--wrap{
+        .evt--btn{
+          font-size: 24px;
+          height: 80px;
+        }
+        .count--txt{
+          >p{
+            font-size: 20px;
+          }
+        }
+        .count--num{
+          div{
+            .day--text{
+              &::after{
+                width: 20px;
+              }
+            }
+            span{
+              border-radius: 8px;
+              font-size: 48px;
+              padding: 20px 0;
+              &::before{
+                border-top-left-radius: 8px;
+                border-top-right-radius: 8px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media(max-width: 500px){
+  .evt--section01{
+    .section--container{
+      .swiper--wrap{
+        margin-bottom: 50px;
+        .swiper--tab--wrap{
+          .tab--btn{
+            font-size: 16px;
+          }
+        }
+        .swiper-pagination{
+          span{
+            width: 14px;
+            height: 14px;
+            margin: 0 5px;
+          }
+        }
+        .slide--desc{
+          padding: 25px 15px!important;
+          min-height: 200px;
+          height: 100%;
+          h4{
+            font-size: 18px;
+            span{
+              font-size: 12px;
+            }
+          }
+          p{
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+  .evt--section02-1{
+    .section--container{
+      .evt--1{
+        .bg1{
+          img{
+          }
+        }
+        .bg2{
+          top: 2%;
+          right: -360px;
+          img{
+            width: 45%;
+          }
+        }
+        .bg3{
+          top: 32%;
+        }
+      }
+    }
+  }
+  .evt--section02-2{
+    .section--container{
+      .evt--2{
+        .evt--box{
+          li{
+            font-size: 14px;
+            .circle{
+              padding: 5px 15px;
+              white-space: nowrap;
+            }
+          }
+          padding: 20px;
+        }
+      }
+    }
+  }
+  .evt--section03{
+    .section--container{
+      .promotion--wrap{
+        .promotion{
+          height: 300px;
+          h4{
+            font-size: 16px;
+            margin-bottom: 0px;
+            line-height: 22vw;
+          }
+          p{
+            font-size: 16px;
+            margin-bottom: 0px;
+          }
+          h5{
+            font-size: 36px;
+            span{
+              font-size: 24px;
+            }
+          }
+        }
+      }
+      .count--wrap{
+        .count--num{
+          div{
+            .day--text{
+              &::after{
+                width: 10px;
+              }
+            }
+            span{
+              font-size: 24px;
+              padding: 15px 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}

index.html

@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/font-face.css" />
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+  <link rel="stylesheet" href="assets/css/style.css">
+  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+  <title>스플라스 스파&워터파크</title>
+</head>
+<body>
+  <section class="evt--section01">
+    <div class="palm--img1"><img src="assets/img/img_1.png" alt=""></div>
+    <div class="palm--img2"><img src="assets/img/img_2.png" alt=""></div>
+    <div class="wave--bg"></div>
+    <div class="section--container">
+      <div class="section--title">
+        <div class="logo"><img src="assets/img/logo.png"></div>
+        <h1><img src="assets/img/font_2.png" alt="스플라스 스파&워터파크"></h1>
+        <h2><img src="assets/img/font_3.png" alt="RENEW-ALL"></h2>     
+        <h3><img src="assets/img/font_10.png" alt="GRAND RE-OPENING"></h3>
+        <div class="bg--wave--wrap">
+          <div class="bg--wave">
+            <img class="bg--wave1" src="assets/img/bg_wave_1.png" alt="">
+            <img class="bg--wave2" src="/assets/img/bg_wave_2.png" alt="">
+          </div>
+        </div>
+        <div class="bg1"><img src="assets/img/img_bg_1.png" alt=""></div>
+        <div class="bg2"><img src="assets/img/img_bg_2.png" alt=""></div>
+        <div class="bg4"><img src="assets/img/img_bg_4.png" alt=""></div>
+        <div class="bubble--bg"></div>
+      </div>
+      <div class="video--wrap">
+        <video controls="true" id="tsVideo" muted type="video/mp4">
+          <source src="assets/img/splas_video.MOV">
+              해당 브라우저는 video 태그를 지원하지 않습니다.
+          </video>
+        </video>
+        <div class="video--btn play"></div>
+      </div>
+      <div class="swiper--wrap">
+        <div class="bg1"><img src="assets/img/img_bg_7.png" alt=""></div>
+        <div class="bg3"><img src="assets/img/img_bg_8.png" alt=""></div>
+        <div class="swiper swiper1">
+          <div class="swiper--tab--wrap">
+            <button class="tab--btn active" data-index="0">아쿠아 스톰</button>
+            <button class="tab--btn" data-index="1">블라스터 2종</button>
+            <button class="tab--btn" data-index="2">하이드로 스핀</button>
+            <button class="tab--btn" data-index="3">스트림 리버</button>
+            <button class="tab--btn" data-index="4">온천 스파</button>
+          </div>
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <div class="slide--wrap">
+                <div class="slide--img">
+                  <span class="new--icon"></span>
+                  <img src="assets/img/img_3.png" alt="">
+                </div>
+                <div class="slide--desc">
+                  <h4>아쿠아 스톰 <span>AQUA STORM</span></h4>
+                  <p>새롭게 선보이는 패밀리형 파도풀로 8가지 패턴의 다이나믹한 파도가 몰아칩니다.<br>
+                    최대 1.8m의 파고로 아이들과 함께 안전하면서도 신나게 즐길 수 있습니다.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="slide--wrap">
+                <div class="slide--img">
+                  <span class="new--icon"></span>
+                  <img src="assets/img/img_4.png" alt="">
+                </div>
+                <div class="slide--desc type2">
+                  <h4>토네이도 블라스터 <span>TORNADO BLASTER</span></h4>
+                  <p>롤러코스터를 타듯 198m 내내 스릴 넘치는 워터 슬라이드입니다.  마치 블랙홀로 빠져드는 듯한 스피드의 토네이도존과 컬러풀한 특수효과존이 즐거움을 더해줍니다.</p>
+                  <h4>갤럭시 블라스터 <span>GALAXY BLASTER</span></h4>
+                  <p>업앤다운을 반복하며 시원하게 스피드를 즐기는 직선 튜브와 빙글뱅글 회오리 존, 시각적인 재미를 더한 특수효과 존까지! 193m 슬라이드를 타는 내내 익사이팅한 매력에 기다리는 시간도 즐거워져요.</p>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="slide--wrap">
+                <div class="slide--img">
+                  <span class="new--icon"></span>
+                  <img src="assets/img/img_5.png" alt="">
+                </div>
+                <div class="slide--desc">
+                  <h4>하이드로 스핀 <span>HYDRO SPIN</span></h4>
+                  <p>짧지만 강한 재미를 느낄 수 있는 신규 어트랙션. 튜브를 타고 최대 속도 45km/hr로 <br>빠르게 상승과 하강을 반복해 지루할 틈 없는 U형 무동력 슬라이드입니다.</p>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="slide--wrap">
+                <div class="slide--img">
+                  <img src="assets/img/img_6.png" alt="">
+                </div>
+                <div class="slide--desc">
+                  <h4>스트림 리버 <span>STREAM RIVER</span></h4>
+                  <p>스플라스 워터파크에서 단연 최고의 인기를 자랑하는 토렌트 리버가 업그레이드 되어 돌아왔습니다. <br>동종 시설 중 가장 액티브한 급류 파도풀로, 최대 파고 2.5M 로 리뉴얼되어 더욱 강력해진 짜릿함을 선사합니다.</p>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="slide--wrap">
+                <div class="slide--img">
+                  <img src="assets/img/img_7.png" alt="">
+                </div>
+                <div class="slide--desc">
+                  <h4>실내 · 야외 온천 스파</h4>
+                  <p>조용하고 편안하게 즐기는 실내 스파, 자연의 소리와 은은한 허브향이 함께하는 야외 스파, <br>계절과 테마 별 이색 컨텐츠를 담은 이벤트 스파까지. 17개의 온천 스파를 취향 따라 즐겨보세요.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-pagination"></div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+      </div>
+    </div>
+  </section>
+  <section class="evt--section02-1">
+    <div class="cloud--img1"><img src="assets/img/img_9.png" alt=""></div>
+    <div class="cloud--img2"><img src="assets/img/img_8.png" alt=""></div>
+    <div class="section--container">
+      <div class="evt--1">
+        <span class="evt--circle">EVENT.01</span>
+        <h3>내 취향 알고 즐기자!</h3>
+        <h2><img src="assets/img/font_4.png" alt="물놀이 성향 테스트"></h2>
+        <p class="evt--box"><img src="assets/img/img_16.png" alt="나에게 맞는 스타일은?"></p>
+        <a href="#"><img src="assets/img/img_14.png" alt=""></a>
+        <div class="bg1"><img src="assets/img/img_10.png" alt=""></div>
+        <div class="bg2"><img src="assets/img/img_11.png" alt=""></div>
+        <div class="bg3"><img src="assets/img/img_12.png" alt=""></div>
+        <div class="bg4"><img src="assets/img/img_13.png" alt=""></div>
+      </div>
+    </div>
+  </section>
+  <section class="evt--section02-2">
+    <div class="bg1"><img src="assets/img/bg_5.png" alt=""></div>
+    <div class="bg2"><img src="assets/img/bg_6.png" alt=""></div>
+    <div class="section--container">
+      <div class="evt--2">
+        <span class="evt--circle">EVENT.02</span>
+        <h3>인스타그램 댓글 이벤트</h3>
+        <h2><img src="assets/img/font_5.png" alt="이모지 퀴즈"></h2>
+        <div class="evt--box2"><img src="assets/img/font_6.png" alt=""></div>
+        <ul class="evt--box">
+          <li><span class="circle">기 간</span>2025.05.30 - 2025.06.08</li>
+          <li><span class="circle">내 용</span>이모지 힌트로 어트랙션 이름 맞추기</li>
+          <li><span class="circle">발 표</span>2025.06.13 / 개별 DM 안내</li>
+          <li><span class="circle">경 품</span>스파이용권 (1매) / 20명</li>
+        </ul>
+        <a href="#" class="evt--btn">이벤트 참여하기</a>
+        <div class="bg1"><img src="" alt=""></div>
+        <div class="bg2"><img src="" alt=""></div>
+        <div class="bg3"><img src="" alt=""></div>
+        <div class="bg4"><img src="" alt=""></div>
+      </div>
+    </div>
+  </section>
+  <section class="evt--section03">
+    <div class="section--container">
+      <div class="section--title">
+        <h3><img src="assets/img/font_11.png" alt="6월 5일 단 한번의 기회!"></h3>
+        <h2><img src="assets/img/font_7.png" alt="얼리버드 프로모션"></h2>
+        <div class="circle"><img src="assets/img/font_12.png" alt=""></div>
+      </div>
+      <div class="promotion--wrap">
+        <div class="promotion">
+          <h4>혜택 01</h4>
+          <p>입장권</p>
+          <h5>50<span>%</span><br>할인</h5>
+        </div>
+        <div class="promotion">
+          <h4>혜택 01</h4>
+          <p>1시간</p>
+          <h5>사전<br>입장</h5>
+        </div>
+      </div>
+      <div class="promotion--detail--wrap">
+        <div class="detail">
+          <div class="detail--l">
+            <span>혜택 01</span>
+            <h5>새로워진 스플라스 워터파크,<br>
+            <span>반값으로</span> 즐겨요!</h5>
+            <ul>
+              <li>사용 기간 : 2025.7.1(화) ~ 8.31(일)</li>
+              <li>구매 수량 : 1인 최대 2매</li>
+            </ul>
+          </div>
+          <div class="detail--r">
+            <span>한정<br>수량</span>
+            <p>성인 · 소인 통합권</p>
+            <div class="before--price">70,000원</div>
+            <div class="after--price">35,000원</div>
+          </div>
+        </div>
+        <div class="detail">
+          <div class="detail--l">
+            <span>혜택 02</span>
+            <h5><span>1시간 먼저 입장</span>해 여유롭게!<br>
+            오픈 런 하지마세요.</h5>
+            <ul>
+              <li>사전 입장 가능 시간 : 오전 8:00 ~ 8:59</li>
+              <li>얼리버드 티켓 사용 당일 한정</li>
+            </ul>
+          </div>
+          <div class="detail--r">
+            <span>사전<br>입장</span>
+            <p>정규 오픈 시간</p>
+            <div class="before--price">오전 9:00</div>
+            <div class="after--price">오전 8:00</div>
+          </div>
+        </div>
+        <ul class="detail--plus">
+          <li>
+            사전 입장 시간이 지나면 혜택이 자동 소멸됩니다. (9:00부터 일반 줄 대기)
+          </li>
+          <li>
+            평소 혼잡도가 높은 인기  <strong>어트랙션 3종</strong>에 한해 이용 가능합니다.<br>
+            - 토네이도 블라스터, 갤럭시 블라스터, 하이드로 스핀
+          </li>
+        </ul>
+      </div>
+      <div class="count--wrap">
+        <div class="count--txt">
+          <p>6월 5일 (목)</p>
+          <div class="img--wrap">
+            <img src="assets/img/img_15.png" alt="시계">
+          </div>
+          <p>10시에 만나요 !</p>
+        </div>
+        <div class="count--num">
+          <div class="hours"><span>0</span><span>1</span></div>
+          <div class="minutes"><span>0</span><span>0</span></div>
+          <div class="seconds"><span>0</span><span>0</span></div>
+        </div>
+        <a href="#" class="evt--btn">얼리버드 티켓 구매</a>
+      </div>
+    </div>
+  </section>
+  <script>
+    const video = document.getElementById('tsVideo');
+    const wrapper = document.querySelector('.video--wrap');
+    const playBtn = document.querySelector('.video--btn');
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            video.play();
+          } else {
+            video.pause();
+          }
+        });
+      },
+      {
+        threshold: 0.5 // 50% 이상 보여야 재생
+      }
+    );
+
+    observer.observe(wrapper);
+
+    // 버튼 클릭 시 재생 + 클래스 제거
+    playBtn.addEventListener('click', () => {
+      if (video.paused) {
+        video.play();
+      } else {
+        video.pause();
+      }
+    });
+    video.addEventListener('play', () => {
+      playBtn.classList.remove('play');
+    });
+
+    // 비디오 일시 정지되면 클래스 추가
+    video.addEventListener('pause', () => {
+      playBtn.classList.add('play');
+    });
+
+    var swiper = new Swiper(".swiper1", {
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+    });
+    const tabButtons = document.querySelectorAll('.tab--btn');
+
+    tabButtons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const index = parseInt(btn.dataset.index);
+        swiper.slideTo(index);
+      });
+    });
+
+    swiper.on('slideChange', () => {
+      tabButtons.forEach(btn => btn.classList.remove('active'));
+      tabButtons[swiper.activeIndex].classList.add('active');
+    });
+
+    const deadline = new Date('2025-06-05T10:00:00');
+
+    function padDigits(num) {
+      return String(num).padStart(2, '0').split('');
+    }
+
+    function updateCountdown() {
+      const now = new Date();
+      const diff = deadline - now;
+
+      const hourEl = document.querySelector('.hours').children;     // ← 여기에 시
+      const minEl = document.querySelector('.minutes').children;    // ← 여기에 분
+      const secEl = document.querySelector('.seconds').children;  // ← 여기에 초
+
+      if (diff <= 0) {
+        hourEl[0].textContent = '0';
+        hourEl[1].textContent = '0';
+        minEl[0].textContent = '0';
+        minEl[1].textContent = '0';
+        secEl[0].textContent = '0';
+        secEl[1].textContent = '0';
+        clearInterval(timer);
+        return;
+      }
+
+      const hours = Math.floor((diff / (1000 * 60 * 60)) % 100); // 2자리 확보
+      const minutes = Math.floor((diff / (1000 * 60)) % 60);
+      const seconds = Math.floor((diff / 1000) % 60);
+
+      const [h1, h2] = padDigits(hours);
+      const [m1, m2] = padDigits(minutes);
+      const [s1, s2] = padDigits(seconds);
+
+      animateIfChanged(hourEl[0], h1);
+      animateIfChanged(hourEl[1], h2);
+      animateIfChanged(minEl[0], m1);
+      animateIfChanged(minEl[1], m2);
+      animateIfChanged(secEl[0], s1);
+      animateIfChanged(secEl[1], s2);
+    }
+
+    updateCountdown();
+    const timer = setInterval(updateCountdown, 1000); // 1초마다 갱신
+
+    function animateIfChanged(el, newVal) {
+      if (el.textContent !== newVal) {
+        el.textContent = newVal;
+        el.classList.add('flip');
+        setTimeout(() => el.classList.remove('flip'), 400); // 애니메이션 끝나면 제거
+      }
+    }
+  </script>
+</body>
+</html>