@charset "UTF-8";

body {
  background: #000;
}

/* common */
.logo_group {
  z-index: 3;
  position: absolute;
  left: 50%;
  width: 100%;
  text-align: right;
}
.logo_group .choco {
  float: left;
}
.inner {
  margin: 0 auto;
  max-width: 1400px;
  text-align: center;
}

/* *******************
    pc 
******************** */
/* common */
.wrap_20240717 {
  max-width: 1920px;
  margin: 0 auto;
  background: #fff;
}
.logo_group {
  top: -35px;
  max-width: 1400px;
  transform: translateX(-50%);
}
.btn {
  z-index: 3;
  position: absolute;
  display: inline-block;
}
.btn,
.coupon_group a,
.coupon {
  transition: transform 0.2s ease-in-out;
}

/* title */
.tit_area {
  padding-top: 70px;
  height: 785px;
  text-align: center;
  background: url('../images/event/240717/bg_tit.gif') center top repeat;
}
.tit_area .inner {
  position: relative;
}
.tit_area .tit {
  z-index: 2;
  position: relative;
}
.popcon_group img {
  position: absolute;
}
.popcon_group .popcon01 {
  left: 45%;
  top: 65%;
  transition: all 0.9s ease-in-out;
}
.popcon_group .popcon02 {
  left: 45%;
  top: 65%;
  transition: all 0.4s ease-in-out;
}
.popcon_group .popcon03 {
  left: 45%;
  top: 65%;
  transition: all 0.6s ease-in-out;
}
.popcon_group .popcon04 {
  left: 45%;
  top: 65%;
  transition: all 0.9s ease-in-out;
}
.popcon_group .popcon05 {
  right: 45%;
  top: 65%;
  transition: all 1s ease-in-out;
}
.popcon_group .popcon06 {
  right: 45%;
  top: 65%;
  transition: all 0.4s ease-in-out;
}
.popcon_group .popcon07 {
  right: 45%;
  top: 65%;
  transition: all 0.6s ease-in-out;
}
/* action */
.popcon_group.action .popcon01 {
  left: 10%;
  top: 24%;
  animation: float 5s ease-in-out infinite;
}
.popcon_group.action .popcon02 {
  left: 13%;
  top: 28%;
  animation: float 2s ease-in-out infinite;
}
.popcon_group.action .popcon03 {
  left: 4%;
  top: 58%;
  animation: float 3s ease-in-out infinite;
}
.popcon_group.action .popcon04 {
  left: 25%;
  top: 115%;
  animation: float 3s ease-in-out infinite;
}
.popcon_group.action .popcon05 {
  right: 11%;
  top: 34%;
  animation: float 4s ease-in-out infinite;
}
.popcon_group.action .popcon06 {
  right: 7%;
  top: 41%;
  animation: float 3s ease-in-out infinite;
}
.popcon_group.action .popcon07 {
  right: 18%;
  top: 84%;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* content */

.con01 {
  margin-top: -400px;
  padding-top: 400px;
  background: url('../images/event/240717/bg_con01.png') center top no-repeat;
}
.con01 .inner > img {
  z-index: 2;
  position: relative;
}
.con01 .btn {
  left: 50%;
  bottom: 10.5%;
  transform: translateX(-50%);
}
.con01 .btn:hover {
  transform: translate(-50%, -10px);
}

.con02 {
  position: relative;
  background: #ffdddf;
}
.con02:before {
  content: '';
  position: absolute;
  top: -197px;
  display: block;
  width: 100%;
  height: 197px;
  background: url('../images/event/240717/bg_con02.jpg') center bottom no-repeat;
}

.con03 {
  background: #ffbabe;
}
.con03 .inner {
  position: relative;
}
.con03 .slide_area {
  position: absolute;
  width: 43%;
  height: 36.5%;
}
.slide_area .swiper {
  overflow: hidden;
  position: absolute;
  width: auto;
  height: 100%;
  border-radius: 22px;
}
.slide_area .paging {
  position: absolute;
  bottom: -14.5% !important;
  right: 0px !important;
  text-align: right;
}
.slide_area .paging .swiper-pagination-bullet {
  display: inline-block;
  margin: 0 1.4% !important;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: #fff;
  opacity: 1;
}
.slide_area .paging .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ffacb1;
}

.slide_area.soc_swiper {
  top: 37.5%;
  left: 2%;
}
.slide_area.sci_swiper {
  top: 37.5%;
  right: 2%;
}

.con04 {
  background: #ddddff url('../images/event/240717/bg_con04.gif') repeat-x;
}
.con04 .btn {
  left: 50%;
  top: 44.5%;
  transform: translateX(-46%);
}
.con04 .btn:hover {
  transform: translate(-46%, -10px);
}

/* common */
.con05,
.con07,
.con09 {
  overflow: hidden;
}
.con01 .inner,
.con04 .inner,
.con05 .inner,
.con06 .inner,
.con07 .inner,
.con08 .inner,
.con09 .inner,
.con10 .inner,
.con12 .inner {
  position: relative;
}
.con05 .inner img,
.con07 .inner img,
.con09 .inner img {
  z-index: 2;
  position: relative;
}
.con05 .inner:after,
.con07 .inner:after,
.con09 .inner:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  transform: translateX(-50%) scale(0);
  display: inline-block;
  width: 40%;
  height: 100%;
  border-radius: 100%;
}

.con05 {
  background: #c3c3fd;
}
.con05 .inner:after {
  background: #b0b0f2;
  transition: transform 0.3s ease-in-out;
}
.con05.current .inner:after {
  transform: translateX(-50%) scale(1);
}

.con06 {
  background: #cffaea url('../images/event/240717/bg_con06.gif') repeat-x;
}
.con06 .btn {
  left: 50%;
  top: 34.5%;
  transform: translateX(-46%);
}
.con06 .btn:hover {
  transform: translate(-46%, -10px);
}

.con07 {
  background: #b4eed8;
}
.con07 .inner:after {
  background: #a6e5cd;
  transition: transform 0.3s ease-in-out;
}
.con07.current .inner:after {
  transform: translateX(-50%) scale(1);
}

.con08 {
  background: #def8fb url('../images/event/240717/bg_con08.gif') repeat-x;
}
.con08 .btn {
  left: 50%;
  top: 15.2%;
  transform: translateX(-47%);
}
.con08 .btn:hover {
  transform: translate(-47%, -10px);
}

.con09 {
  background: #c3eff4;
}
.con09 .inner:after {
  background: #b0e2e8;
  transition: transform 0.3s ease-in-out;
}
.con09.current .inner:after {
  transform: translateX(-50%) scale(1);
}

.con10 {
  background: url('../images/event/240717/bg_con10.gif') no-repeat;
}
.coupon_group {
  position: absolute;
  top: 29%;
  left: 0px;
}
.coupon_group a {
  display: inline-block;
}
.coupon_group a + a {
  margin-top: 7%;
}
.coupon_group a:hover {
  transform: translateY(-10px);
}

.con11 {
  background: url('../images/event/240717/bg_con11.gif') no-repeat;
}

.con12 {
  background: #ffeea8 url('../images/event/240717/bg_con12.png') center bottom no-repeat;
}
.coupon {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.coupon:hover {
  transform: translate(-50%, -10px);
}

.flot_banner {
  z-index: 55;
  position: fixed;
  left: 50%;
  bottom: 0px;
  max-width: 1200px;
  width: 95%;
  transform: translateX(-50%);
}

.flot_nav {
  z-index: 55;
  position: fixed;
  right: 2%;
  top: 15%;
}
@media (min-width: 1920px) {
  .flot_nav {
    right: calc(52% - 960px);
    right: min(calc(52% - 960px), 1920px); /* 최대 1920px 제한 */
  }
}
.flot_nav:before {
  content: '';
  position: absolute;
  left: 50%;
  top: -82px;
  transform: translateX(-50%);
  display: inline-block;
  width: 108px;
  height: 83px;
  background: url('../images/event/240717/nav_ch.png') center no-repeat;
}
.flot_nav:after {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  display: inline-block;
  width: 77px;
  height: 18px;
  background: url('../images/event/240717/nav_ch_hand.png') center no-repeat;
}
.flot_nav .nav_list {
  margin-bottom: 15px;
  padding: 20px 20px 0;
  width: 220px;
  height: 285px;
  border: 3px solid #ff8296;
  border-width: 3px 3px 8px 3px;
  border-radius: 20px;
  background: #fff url('../images/event/240717/nav_deco.gif') 90% top no-repeat;
  box-sizing: border-box;
}
.nav_list a {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 60px;
  border-top: 1px solid #eee;
  box-sizing: border-box;
  vertical-align: top;
}
.nav_list a:first-child {
  border-top: 0px;
}
.nav_list a span {
  overflow: hidden;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 26px;
  font-size: 0px;
  text-indent: -9999px;
}
.nav_list a:nth-child(1) span {
  background: url('../images/event/240717/nav_link01.png') center top no-repeat;
}
.nav_list a:nth-child(2) span {
  background: url('../images/event/240717/nav_link02.png') center top no-repeat;
}
.nav_list a:nth-child(3) span {
  background: url('../images/event/240717/nav_link03.png') center top no-repeat;
}
.nav_list a:nth-child(4) span {
  background: url('../images/event/240717/nav_link04.png') center top no-repeat;
}
.nav_list a.on span {
  background-position: center bottom;
}
.flot_nav .btn_top {
  position: relative;
  left: 50%;
  margin-left: -60px;
}

/* *******************
    tablet 
******************** */
@media all and (max-width: 1400px) {
  .logo_group {
    top: -15px;
    padding: 0 15px;
  }

  .inner {
    padding: 0 10px;
  }

  .tit_area .inner {
    padding: 0 30px;
  }

  .popcon_group .popcon01 {
    width: 2%;
  }
  .popcon_group .popcon02 {
    width: 5%;
  }
  .popcon_group .popcon03 {
    width: 3%;
  }
  .popcon_group .popcon04 {
    width: 1%;
  }
  .popcon_group .popcon05 {
    width: 2%;
  }
  .popcon_group .popcon06 {
    width: 5%;
  }
  .popcon_group .popcon07 {
    width: 3%;
  }

  .tit_area,
  .con04,
  .con06,
  .con08 {
    background-size: 15% auto;
  }

  .con01,
  .con10 {
    background-size: 132% auto;
  }
  .con11 {
    background-size: 100% auto;
  }

  .con02:before {
    background-size: 100% auto;
  }

  .con03 .slide_area.soc_swiper {
    left: 2.5%;
  }
  .con03 .slide_area.sci_swiper {
    right: 2.5%;
  }
  .slide_area .paging .swiper-pagination-bullet {
    margin: 0 1% !important;
    width: 14px;
    height: 14px;
  }

  .tit_area {
    padding-top: 5vw;
    height: 60vw;
  }
  .con01 {
    margin-top: -25%;
    padding-top: 32%;
  }
  .con01 .btn {
    width: 44%;
  }
  .con04 .btn {
    width: 49%;
  }

  .coupon_group,
  .coupon {
    padding: 0 8%;
  }

  .flot_nav {
    display: none;
  }

  .con12 {
    padding-bottom: 7vw;
  }
}
/* *******************
    mobile 
******************** */
@media all and (max-width: 980px) {
  .logo_group .chock img {
    width: 50px;
  }
  .logo_group img {
    width: 58px;
  }

  .con03 .slide_area.soc_swiper {
    width: 40%;
    left: 5.5%;
  }
  .con03 .slide_area.sci_swiper {
    width: 40%;
    right: 4%;
  }
  .slide_area .swiper {
    border-radius: 5px;
    width: 98%;
  }
  .slide_area .paging .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
  }
}
@media all and (max-width: 768px) {
  .logo_group .choco img {
    width: 8vw;
  }
  .logo_group img {
    width: 10vw;
  }

  .slide_area .paging .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
  }
}