@charset "UTF-8";
.event-container {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  background-color: #ffe2ed;
  background-image: url("../images/bg_pink.png");
  min-height: 100vh;
}
.event-container .event-header img,
.event-container .event-content img {
  width: 100%;
}
.event-container .event-header .coming-soon,
.event-container .event-content .coming-soon {
  max-width: 860px;
  margin: 0 auto;
}
.event-container .event-header {
  text-align: center;
  position: relative;
}
.event-container .event-header .main-character {
  display: flex;
}
.event-container .event-header .main-character .img {
  padding: 0;
  line-height: 0;
}
.event-container .tab-section {
  max-width: 1200px;
  margin: 0 auto;
}
.event-container .tab-section .tab-list {
  display: flex;
  overflow: hidden;
}
.event-container .tab-section .tab-button {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  height: clamp(40px, 11.6279069767vw, 100px);
  background-size: cover;
  background-position: center center;
}
.event-container .tab-section .tab-button:first-child {
  width: clamp(144px, 33.488372093vw, 288px);
  background-image: url("../images/mo/event1_tab.png");
}
.event-container .tab-section .tab-button:nth-child(2) {
  width: clamp(144px, 33.488372093vw, 288px);
  background-image: url("../images/mo/event2_tab.png");
}
.event-container .tab-section .tab-button:nth-child(3) {
  width: clamp(142px, 33.023255814vw, 284px);
  background-image: url("../images/mo/event3_tab.png");
}
.event-container .tab-section .tab-button.active:first-child {
  background-image: url("../images/mo/event1_tab_on.png");
}
.event-container .tab-section .tab-button.active:nth-child(2) {
  background-image: url("../images/mo/event2_tab_on.png");
}
.event-container .tab-section .tab-button.active:nth-child(3) {
  background-image: url("../images/mo/event3_tab_on.png");
}
@media (min-width: 1024px) {
  .event-container .tab-section .tab-button {
    height: clamp(100px, 9.765625vw, 200px);
  }
  .event-container .tab-section .tab-button:first-child {
    width: clamp(214px, 20.8984375vw, 428px);
    background-image: url("../images/pc/event1_tab.png");
  }
  .event-container .tab-section .tab-button:nth-child(2) {
    width: clamp(215px, 20.99609375vw, 430px);
    background-image: url("../images/pc/event2_tab.png");
  }
  .event-container .tab-section .tab-button:nth-child(3) {
    width: clamp(211px, 20.60546875vw, 422px);
    background-image: url("../images/pc/event3_tab.png");
  }
  .event-container .tab-section .tab-button.active:first-child {
    background-image: url("../images/pc/event1_tab_on.png");
  }
  .event-container .tab-section .tab-button.active:nth-child(2) {
    background-image: url("../images/pc/event2_tab_on.png");
  }
  .event-container .tab-section .tab-button.active:nth-child(3) {
    background-image: url("../images/pc/event3_tab_on.png");
  }
}
@media (min-width: 1200px) {
  .event-container .tab-section .tab-button {
    height: 137px;
  }
  .event-container .tab-section .tab-button:first-child {
    width: 403px;
  }
  .event-container .tab-section .tab-button:nth-child(2) {
    width: 402px;
  }
  .event-container .tab-section .tab-button:nth-child(3) {
    width: 396px;
  }
}
.event-container .tab-panel {
  color: #333;
}
.event-container .tab-panel[hidden] {
  display: none;
}
@media (min-width: 1024px) {
  .event-container .tab-panel .liner {
    border: 4px solid #ea69a2;
    padding-bottom: 60px;
  }
}
.event-container .event-content .event-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
}
.event-container .event-content-title {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 10px;
  color: #333;
}
.event-container .hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event-container .hashtags .hashtag {
  background: #ff69a5;
  color: white;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
}
.event-container .event-details {
  background: white;
  color: #333;
  padding: 30px 20px;
}
.event-container .event-details .details-title {
  font-size: 16px;
  font-weight: bold;
  color: #ff69a5;
  margin-bottom: 20px;
}
.event-container .event-details .event-period {
  margin-bottom: 30px;
}
.event-container .event-details .event-period .period-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.event-container .event-details .event-period .period-date {
  font-size: 16px;
  font-weight: bold;
  color: #ff69a5;
  margin-bottom: 10px;
}
.event-container .event-details .event-period .period-note {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}
.event-container .event-details .participation-method {
  margin-bottom: 30px;
}
.event-container .event-details .participation-method .method-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
}
.event-container .event-details .participation-method .method-list {
  list-style: none;
  padding: 0;
}
.event-container .event-details .participation-method .method-list .method-item {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  padding-left: 15px;
  position: relative;
}
.event-container .event-details .participation-method .method-list .method-item::before {
  content: "•";
  color: #ff69a5;
  position: absolute;
  left: 0;
}
.event-container .sort-photo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.event-container .sort-photo .sort-status {
  width: clamp(82px, 19.0697674419vw, 164px);
  line-height: 0;
}
.event-container .sort-photo .sort-status .img img {
  width: 100%;
}
.event-container .sort-photo .sort-options {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
}
.event-container .sort-photo .sort-options .sort-latest.on {
  color: #7d0f80;
}
.event-container .sort-photo .sort-options .sort-like {
  cursor: pointer;
  padding: 0;
}
.event-container .sort-photo .sort-options .sort-like.on {
  color: #7d0f80;
}
@media (min-width: 768px) {
  .event-container .sort-photo .sort-options {
    font-size: 24px;
  }
}
.event-container .photo-section {
  padding: 20px;
}
.event-container .photo-section .photo-title {
  display: flex;
  align-items: center;
  height: clamp(45px, 16.7441860465vw, 144px);
  padding-left: clamp(25px, 24vw, 120px);
  margin-bottom: 20px;
  background-image: url("../images/mo/photo_title_bg.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.event-container .photo-section .photo-title img {
  width: 100%;
}
.event-container .photo-section .photo-title .inner {
  display: flex;
  align-items: center;
}
.event-container .photo-section .photo-title .counter-label {
  width: clamp(138px, 32.0930232558vw, 276px);
  padding-top: clamp(5px, 1.1627906977vw, 10px);
  max-width: 324px;
}
.event-container .photo-section .photo-title .counter-label2 {
  width: clamp(15px, 3.488372093vw, 30px);
  padding-top: clamp(5px, 1.1627906977vw, 10px);
  max-width: 40px;
}
.event-container .photo-section .photo-title .counter-number {
  display: inline-flex;
  margin: 0 5px;
}
.event-container .photo-section .photo-title .counter-number .number0 {
  width: clamp(17px, 3.9534883721vw, 34px);
}
.event-container .photo-section .photo-title .counter-number .number1 {
  width: clamp(10px, 2.3255813953vw, 20px);
}
.event-container .photo-section .photo-title .counter-number .number2 {
  width: clamp(17px, 3.9534883721vw, 34px);
}
.event-container .photo-section .photo-title .counter-number .number3 {
  width: clamp(17px, 3.9534883721vw, 34px);
}
.event-container .photo-section .photo-title .counter-number .number4 {
  width: clamp(19px, 4.4186046512vw, 38px);
}
.event-container .photo-section .photo-title .counter-number .number5 {
  width: clamp(17px, 3.9534883721vw, 34px);
}
.event-container .photo-section .photo-title .counter-number .number6 {
  width: clamp(17px, 3.9534883721vw, 34px);
}
.event-container .photo-section .photo-title .counter-number .number7 {
  width: clamp(16px, 3.7209302326vw, 32px);
}
.event-container .photo-section .photo-title .counter-number .number8 {
  width: clamp(17px, 3.9534883721vw, 34px);
}
.event-container .photo-section .photo-title .counter-number .number9 {
  width: clamp(16px, 3.7209302326vw, 32px);
}
.event-container .photo-section .photo-title .counter-number .sep {
  width: clamp(10px, 2.3255813953vw, 20px);
  height: clamp(10px, 2.3255813953vw, 20px);
  margin-top: clamp(17px, 3.9534883721vw, 34px);
}
.event-container .photo-section .photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}
.event-container .photo-section .photo-grid .photo-card {
  background: #fff;
  overflow: hidden;
  padding: 10px;
}
.event-container .photo-section .photo-grid .photo-card .photo-image-container {
  aspect-ratio: 1;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.event-container .photo-section .photo-grid .photo-card .photo-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-container .photo-section .photo-grid .photo-card .photo-info {
  padding: 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.event-container .photo-section .photo-grid .photo-card .photo-info .like-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.event-container .photo-section .photo-grid .photo-card .photo-info .like-button .heart-icon {
  width: 14px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='28px' height='25px'%3E%3Cpath fill-rule='evenodd' fill='rgb(221, 221, 221)' d='M13.948,24.690 L2.374,13.414 C0.903,11.983 0.092,10.078 0.092,8.049 C0.092,6.022 0.903,4.117 2.374,2.685 C5.316,-0.180 10.448,-0.180 13.388,2.686 L13.948,3.231 L14.507,2.686 C17.450,-0.180 22.578,-0.182 25.523,2.685 L25.523,2.685 L25.523,2.686 C26.993,4.117 27.804,6.024 27.804,8.049 C27.804,10.078 26.993,11.983 25.523,13.415 L13.948,24.690 Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
}
.event-container .photo-section .photo-grid .photo-card .photo-info .like-button .heart-icon.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='28px' height='25px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 105, 165)' d='M13.948,24.690 L2.374,13.414 C0.903,11.983 0.092,10.078 0.092,8.049 C0.092,6.022 0.903,4.117 2.374,2.685 C5.316,-0.180 10.448,-0.180 13.388,2.686 L13.948,3.231 L14.507,2.686 C17.450,-0.180 22.578,-0.182 25.523,2.685 L25.523,2.685 L25.523,2.686 C26.993,4.117 27.804,6.024 27.804,8.049 C27.804,10.078 26.993,11.983 25.523,13.415 L13.948,24.690 Z'/%3E%3C/svg%3E");
}
.event-container .photo-section .photo-grid .photo-card .photo-info .like-count {
  font-size: 14px;
  color: #000;
}
.event-container .photo-section .photo-grid .photo-card .photo-info .photo-date {
  font-size: 14px;
  color: #000;
}
@media (min-width: 768px) {
  .event-container .photo-section .photo-grid .photo-card {
    padding: 15px;
  }
}
.event-container .photo-section .page-container {
  display: flex;
  justify-content: center;
}
.event-container .photo-section .page-container .btn-load-more {
  display: block;
  width: clamp(160px, 37.2093023256vw, 320px);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.event-container .photo-section .page-container .btn-load-more img {
  width: 100%;
}
.event-container .photo-section .page-container .pagination {
  display: none;
}
.event-container .photo-section .page-container .pagination-list {
  display: flex;
  margin: 10px auto 30px;
  color: #666666;
}
.event-container .photo-section .page-container .pagination-list li {
  margin: 0 2px;
}
.event-container .photo-section .page-container .pagination-list li a {
  padding: 4px 5px;
  font-size: 16px;
}
.event-container .photo-section .page-container .pagination-list li a[aria-current=page] {
  color: #000;
  font-weight: bold;
}
@media (min-width: 768px) {
  .event-container .photo-section .page-container .btn-load-more {
    display: none;
  }
  .event-container .photo-section .page-container .pagination {
    display: block;
  }
}
@media (min-width: 450px) {
  .event-container .photo-section .photo-title .counter-label {
    width: clamp(162px, 37.6744186047vw, 324px);
  }
  .event-container .photo-section .photo-title .counter-label2 {
    width: clamp(18px, 4.1860465116vw, 36px);
  }
  .event-container .photo-section .photo-title .counter-number .number0 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number1 {
    width: clamp(13px, 3.023255814vw, 26px);
  }
  .event-container .photo-section .photo-title .counter-number .number2 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number3 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number4 {
    width: clamp(22px, 5.1162790698vw, 44px);
  }
  .event-container .photo-section .photo-title .counter-number .number5 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number6 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number7 {
    width: clamp(19px, 4.4186046512vw, 38px);
  }
  .event-container .photo-section .photo-title .counter-number .number8 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number9 {
    width: clamp(19px, 4.4186046512vw, 38px);
  }
  .event-container .photo-section .photo-title .counter-number .sep {
    width: clamp(12px, 2.7906976744vw, 24px);
    height: clamp(12px, 2.7906976744vw, 24px);
    margin-top: clamp(20px, 4.6511627907vw, 40px);
  }
}
@media (min-width: 768px) {
  .event-container .photo-section {
    padding: 20px 40px;
  }
  .event-container .photo-section .photo-title {
    justify-content: center;
    padding-left: 0;
    height: clamp(60px, 13.9534883721vw, 120px);
    background-image: url("../images/pc/photo_title_bg_middle.png");
  }
  .event-container .photo-section .photo-title .counter-number .number0 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number1 {
    width: clamp(13px, 3.023255814vw, 26px);
  }
  .event-container .photo-section .photo-title .counter-number .number2 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number3 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number4 {
    width: clamp(22px, 5.1162790698vw, 44px);
  }
  .event-container .photo-section .photo-title .counter-number .number5 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number6 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number7 {
    width: clamp(19px, 4.4186046512vw, 38px);
  }
  .event-container .photo-section .photo-title .counter-number .number8 {
    width: clamp(20px, 4.6511627907vw, 40px);
  }
  .event-container .photo-section .photo-title .counter-number .number9 {
    width: clamp(19px, 4.4186046512vw, 38px);
  }
  .event-container .photo-section .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .event-container .photo-section .photo-title {
    height: clamp(70px, 16.2790697674vw, 140px);
  }
}
@media (min-width: 1024px) {
  .event-container .photo-section {
    padding: 20px 83px;
  }
  .event-container .photo-section .photo-title {
    height: clamp(85px, 19.7674418605vw, 170px);
    margin-bottom: 40px;
    background-image: url("../images/pc/photo_title_bg.png");
  }
  .event-container .photo-section .photo-title .counter-label {
    font-size: clamp(16px, 3.7209302326vw, 32px);
  }
  .event-container .photo-section .photo-title .counter-number {
    font-size: clamp(28px, 6.511627907vw, 56px);
  }
  .event-container .photo-section .photo-title .counter-number .number0 {
    width: clamp(23px, 5.3488372093vw, 46px);
  }
  .event-container .photo-section .photo-title .counter-number .number1 {
    width: clamp(16px, 3.7209302326vw, 32px);
  }
  .event-container .photo-section .photo-title .counter-number .number2 {
    width: clamp(23px, 5.3488372093vw, 46px);
  }
  .event-container .photo-section .photo-title .counter-number .number3 {
    width: clamp(23px, 5.3488372093vw, 46px);
  }
  .event-container .photo-section .photo-title .counter-number .number4 {
    width: clamp(25px, 5.8139534884vw, 50px);
  }
  .event-container .photo-section .photo-title .counter-number .number5 {
    width: clamp(23px, 5.3488372093vw, 46px);
  }
  .event-container .photo-section .photo-title .counter-number .number6 {
    width: clamp(23px, 5.3488372093vw, 46px);
  }
  .event-container .photo-section .photo-title .counter-number .number7 {
    width: clamp(22px, 5.1162790698vw, 44px);
  }
  .event-container .photo-section .photo-title .counter-number .number8 {
    width: clamp(23px, 5.3488372093vw, 46px);
  }
  .event-container .photo-section .photo-title .counter-number .number9 {
    width: clamp(22px, 5.1162790698vw, 44px);
  }
  .event-container .photo-section .photo-title .counter-number .sep {
    width: clamp(12px, 2.7906976744vw, 24px);
    height: clamp(12px, 2.7906976744vw, 24px);
    margin-top: clamp(25px, 5.8139534884vw, 50px);
  }
  .event-container .photo-section .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1150px) {
  .event-container .photo-section .photo-title {
    height: clamp(90px, 20.9302325581vw, 180px);
  }
}
.event-container .terms-section .terms-container {
  padding: 0 15px 15px;
}
.event-container .terms-section .terms-container .terms-details {
  border: none;
}
.event-container .terms-section .terms-container .terms-details .terms-summary {
  position: relative;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.event-container .terms-section .terms-container .terms-details .terms-summary .img {
  line-height: 0;
}
.event-container .terms-section .terms-container .terms-details .terms-summary .img img {
  width: 100%;
}
.event-container .terms-section .terms-container .terms-details .terms-summary::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  right: 20px;
  width: 14px;
  height: 13px;
  background-color: #ff69a5;
  background-image: url("../images/mo/arrow_expand.png");
  background-position: center center;
  background-size: contain;
  transition: transform 0.3s ease;
}
@media (min-width: 1024px) {
  .event-container .terms-section .terms-container .terms-details .terms-summary::after {
    width: 36px;
    height: 30px;
    margin-top: -15px;
    background-image: url("../images/pc/arrow_expand.png");
  }
}
.event-container .terms-section .terms-container .terms-details[open] .terms-summary::after {
  transform: rotate(180deg);
}
.event-container .terms-section .terms-container .terms-details .terms-content .img {
  line-height: 0;
}
.event-container .terms-section .terms-container .terms-details .terms-content .img img {
  width: 100%;
}
.event-container .terms-section .terms-container .terms-details .terms-content .terms-title {
  font-size: 14px;
  font-weight: bold;
  margin: 15px 0 10px;
}
.event-container .terms-section .terms-container .terms-details .terms-content .terms-list {
  list-style: none;
  padding: 0;
}
.event-container .terms-section .terms-container .terms-details .terms-content .terms-list li {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  padding-left: 15px;
  position: relative;
}
.event-container .terms-section .terms-container .terms-details .terms-content .terms-list li::before {
  content: "-";
  position: absolute;
  left: 0;
}
.event-container .terms-section .terms-container .terms-details .terms-content .terms-text {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .event-container .terms-section .terms-container {
    padding: 0 83px 0;
  }
}
.event-container .winner-check-container {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}
.event-container .winner-check-container .btn-winner-check {
  width: clamp(250px, 58.1395348837vw, 500px);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.event-container .winner-check-container .btn-winner-check img {
  width: 100%;
}
@media (min-width: 768px) {
  .event-container .winner-check-container {
    margin-top: 40px;
    padding-bottom: 50px;
  }
}
@media (min-width: 768px) {
  .event-container {
    max-width: 1920px;
  }
}

.basic-modal {
  width: 95%;
  max-width: 642px;
  padding: 0;
  border-radius: 0;
  /* slider */
}
.basic-modal a.close-modal {
  top: 22px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-image: url("../images/mo/pop_btn_close.png");
  z-index: 5;
}
.basic-modal.winner-md {
  background-color: #fbe1ec;
}
.basic-modal.winner-md a.close-modal {
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-image: url("../images/mo/pop_btn_close2.png");
  z-index: 5;
}
.basic-modal.winner-md .popup-header img {
  width: 100%;
}
.basic-modal.winner-md .info-text {
  margin-top: 15px;
}
.basic-modal.winner-md .info-text img {
  width: 100%;
}
.basic-modal.winner-md .button-group {
  display: flex;
  justify-content: center;
  margin-top: clamp(12px, 2.7906976744vw, 24px);
  margin-bottom: clamp(18px, 4.1860465116vw, 36px);
}
.basic-modal.winner-md .button-group .btn {
  width: clamp(126px, 29.3023255814vw, 252px);
}
.basic-modal.winner-md .button-group .btn img {
  width: 100%;
}
.basic-modal.winner-md .button-group .btn.btn-personal {
  margin-right: 10px;
}
.basic-modal .swiper-button-prev {
  left: clamp(-25px, -5.8139534884vw, -50px);
  left: clamp(-25px, -5.8139534884vw, -50px);
  height: clamp(22px, 5.1162790698vw, 44px);
  background-image: url("../images/mo/slide_prev.png");
  background-size: contain;
  top: 22px;
  height: 100%;
}
.basic-modal .swiper-button-next {
  right: clamp(-25px, -5.8139534884vw, -50px);
  background-image: url("../images/mo/slide_next.png");
  background-size: contain;
  top: 22px;
  height: 100%;
}
@media (min-width: 620px) {
  .basic-modal .swiper-button-prev {
    left: clamp(-32px, -7.4418604651vw, -64px);
    top: 20px;
    left: -44px;
    height: 100%;
  }
  .basic-modal .swiper-button-next {
    right: clamp(-32px, -7.4418604651vw, -64px);
    top: 20px;
    right: -44px;
    height: 100%;
  }
}
@media (max-width: 620px) {
  .basic-modal .swiper-button-prev {
    width: 15px;
  }
  .basic-modal .swiper-button-next {
    width: 15px;
  }
}
@media (min-width: 768px) {
  .basic-modal {
    max-width: 642px;
  }
}

.post-content .post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 15px 10px;
  border-bottom: 1px solid #dbdbdb;
}
.post-content .post-header .user-info {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
}
.post-content .post-media {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.post-content .post-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-content .post-interactions {
  display: flex;
  align-items: center;
  padding: 12px 15px 10px;
  color: #000;
}
.post-content .post-interactions .like-button {
  width: 15px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='29px' height='26px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 105, 169)' d='M14.350,25.805 L2.363,14.127 C0.840,12.644 0.000,10.672 0.000,8.571 C0.000,6.472 0.840,4.499 2.363,3.016 C5.411,0.048 10.726,0.048 13.771,3.017 L14.350,3.581 L14.930,3.017 C17.978,0.048 23.289,0.046 26.339,3.016 L26.339,3.016 L26.339,3.017 C27.862,4.499 28.701,6.474 28.701,8.571 C28.701,10.672 27.862,12.644 26.339,14.128 L14.350,25.805 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.post-content .post-interactions .likes-count {
  padding-left: 5px;
  font-weight: 600;
}
.post-content .post-caption {
  margin: 0 15px;
  padding: 10px 0 15px;
  border-top: 1px solid #adadad;
}
.post-content .post-caption p {
  margin: 0 0 10px;
  line-height: 1.4;
  font-weight: 600;
}
.post-content .post-caption .hashtags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.post-content .post-caption .hashtags li a {
  color: #000;
  text-decoration: none;
  font-weight: 600;
}
.post-content .post-caption .post-date {
  display: block;
  color: #666;
  margin-top: 10px;
  font-size: 14px;
}

#state-upcoming[hidden],
#state-winner[hidden] {
  display: none;
}

.head-title img {
  width: 100%;
}

.noti-winner {
  padding: 80px 0 100px;
  text-align: center;
  font-size: 20px;
}
.noti-winner img {
  width: 100%;
  max-width: 860px;
}
@media (min-width: 768px) {
  .noti-winner {
    font-size: 28px;
    padding: 100px 0 120px;
  }
}

.winner-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding-left: clamp(12px, 2.7906976744vw, 24px);
  padding-right: clamp(12px, 2.7906976744vw, 24px);
}
.winner-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(42px, 9.7674418605vw, 84px);
  list-style: none;
  text-align: center;
  font-size: clamp(10px, 1.8604651163vw, 16px);
  letter-spacing: -0.4px;
  color: #333;
  border: 1px solid #b167ad;
  background-color: #fdf3f7;
}
.winner-list li .f12 {
  font-size: clamp(8px, 1.3953488372vw, 12px);
}
@media (min-width: 768px) {
  .winner-list {
    grid-template-columns: repeat(5, 1fr);
  }
}

.sky-banner {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(35px, env(safe-area-inset-bottom));
  z-index: 1;
}
.sky-banner .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.sky-banner .btn-top,
.sky-banner .btn-bottom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  border-radius: 9999px;
  text-decoration: none;
  background-size: contain;
}
.sky-banner .btn-top:hover,
.sky-banner .btn-bottom:hover {
  filter: brightness(1.1);
}
@media (min-width: 768px) {
  .sky-banner .btn-top,
  .sky-banner .btn-bottom {
    width: 60px;
    height: 60px;
    margin-top: 10px;
  }
}
@media (min-width: 1024px) {
  .sky-banner .btn-top,
  .sky-banner .btn-bottom {
    width: 70px;
    height: 70px;
    margin-top: 10px;
  }
}
.sky-banner .btn-top {
  background-image: url("../images/btn_top.png");
}
.sky-banner .btn-bottom {
  background-image: url("../images//btn_bottom.png");
}
.sky-banner [aria-disabled=true] {
  cursor: not-allowed;
  pointer-events: none;
}
@media (min-width: 768px) {
  .sky-banner {
    bottom: max(55px, env(safe-area-inset-bottom));
  }
}
@media (min-width: 1024px) {
  .sky-banner {
    bottom: clamp(110px, 25.5813953488vw, 220px);
    right: max(15px, (100vw - 1200px) / 2 + 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}
/* 당첨자 팝업 추가 *//*# sourceMappingURL=hatch.css.map */