/* common */
  @charset "utf-8";
  @import url("https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css");
  @import url("https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css");

  html {
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
  }

  body,
  button,
  p,
  span {
    position: relative;
    font-family: "Spoqa Han Sans Neo", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", dotum, "돋움", helvetica, "Apple SD Gothic Neo", sans-serif;
    letter-spacing: -0.07em;
    font-weight: 400;
  }

  button span,
  a {
    color: #ffffff;
  }

  body {
    direction: ltr;
    -webkit-text-size-adjust: none;
    word-break: keep-all;
    word-wrap: break-word;
  }

  body,
  ul,
  li,
  button {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
  }

  div,
  ul,
  p {
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  img {
    border: 0;
  }

  p {
    margin: 0;
  }

  button {
    position: relative;
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
    color: rgba(60, 44, 36, 0.8);
  }

  button span {
    /* z-index: 10; */
  }

  .hover {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    top: 0;
    left: 0;
  }

  button:hover>.hover {
    background: rgba(0, 0, 0, 0.12);
  }

  /* typography */
  .h1 {
    font-size: 21px;
    line-height: 115%;
  }

  .h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .h3 {
    font-size: 18px;
    line-height: 24px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }

  .caption1 {
    font-size: 17px;
    line-height: 22px;
  }

  .caption2 {
    font-size: 15px;
    line-height: 22px;
  }

  .caption2.mid {
    font-size: 15px;
    line-height: 18px;
  }

  .opacity_50 {
    opacity: 0.5;
  }

  .opacity_55 {
    opacity: 0.55;
  }

  .opacity_60 {
    opacity: 0.6;
  }

  .opacity_80 {
    opacity: 0.8;
  }

  .opacity_88 {
    opacity: 0.88;
  }

  .opacity_90 {
    opacity: 0.9;
  }

  .mid {
    font-weight: 500;
  }

  .semi_bold {
    font-weight: 600;
  }

  .bold {
    font-weight: 700;
  }

  .ext_bold {
    font-weight: 900 !important;
  }

  .center {
    text-align: center;
  }

  .left {
    text-align: left;
  }

  .right {
    text-align: right;
  }

  .underline {
    text-decoration: underline;
  }

  .break_all {
    word-break: break-all;
  }

  /* color  */
  body {
    background-color: #464646;
    color: #748F9F;
  }

  .white {
    color: #ffffff;
  }

  .black {
    color: #000000;
  }

  .black2 {
    color: #464646;
  }

  .black3 {
    color: #232323;
  }

  .orange {
    color: #ec6634;
  }

  /* box */
  .min_wrap {
    min-width: 360px;
    width: 100%;
    overflow: hidden;
  }

  .container {
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .flex_col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .grow {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }

  .only_pc {
    display: block;
  }

  .only_mo {
    display: none;
  }

  .x_center {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .relative {
    position: relative;
  }

  .align_start {
    align-items: start !important;
  }

  .align_center {
    align-items: center !important;
  }

  /* fixed_top_button */
  .fixed_top_button {
    position: fixed;
    z-index: 99;
    width: 504px;
    height: 111px;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    align-items: end;
    padding: 11px 8px;
    justify-content: center;
    gap: 8px;
  }

  .fixed_top_button .fixed_button {
    width: 100%;
    height: 90.8px;
    background: #4E5C74;
    background-color: rgba(255, 255, 255, .88);
    background-blend-mode: overlay;
    padding: 8px 17px;
    padding-right: 11px;
    border-radius: 5.6px;
    justify-content: space-between;
  }

  .fixed_top_button .fixed_button .left {
    gap: 6px;
  }

  .fixed_top_button .fixed_button .left .fxd-btn-badge {
    width: 48px;
    height: 48px;
  }

  .fixed_top_button .fixed_button .left p {
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: -0.7px;
    color: #111;
  }

  .logo {
    font-size: 13px;
    line-height: 13px;
    padding: 0 20px;
    font-weight: bold;
    color: #fff;
  }
  .fixed_top_button .fixed_button .right {
    width: 155px;
    height: 50.4px;
    padding-top: 11.2px;
    padding-right: 8.4px;
    padding-bottom: 11.2px;
    padding-left: 16.8px;
    border-radius: 5.6px;
    background: #2D72EB;
    align-items: center;
  }

  .fixed_top_button .fixed_button .right p {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.7px;
    color: white;
  }

  .fixed_top_button .fixed_button .right div {}

  .fixed_top_button .fixed_button .right h1 {
    font-weight: 700;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: -0.7px;
    color: white;
  }

  .fixed_top_button .fixed_button .right img {
    width: 21px;
    height: 21px;
  }


  button:hover>.hover {
    background: rgba(0, 0, 0, 0.12);
  }

  .min_wrap {
    background-color: #748F9F;
  }

  .main {
    height: fit-content;
    min-height: 789px;
    padding-bottom: 70px;
    position: relative;
  }

  .main .wrap {
    height: fit-content;
    width: 1229px;
    min-height: 789px;
    margin: auto;
    padding-top: 156px;

  }

  .main .bg {
    width: 1229px;
    height: 1072px;
    position: absolute;
    top: 0;
    background: url('../../static/images/hilton_30cashback_2511/bg.png');
    background-size: cover;
    background-position: center top;
  }

  .main .bg.webp {
    background-image: url('../../static/images/hilton_30cashback_2511/bg.webp');
  }

  .main .main-content {
    width: 504px;
    min-height: 562px;
    padding: 0 16px 0 48px;
    gap: 25.2px;
    margin: auto;
    align-items: start;
  }

  .main .main-content .main-title {
    width: 313px;
    height: 131.6px;
    object-fit: contain;
  }

  .main .main-content .content-wrap {
    justify-content: space-between;
    width: 100%;
    align-items: start;
  }

  .main .main-content .content-wrap .left {
    width: 175px;
    gap: 8px;
  }

  .main .main-content .content-wrap .left p {
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.7px;
    text-align: center;
    color: #FFFFFFE0;
    text-shadow: 0 0.2px 2.4px rgba(0, 0, 0, 0.75);
  }

  .main .main-content .content-wrap .left .card-wrap {
    position: relative;
  }

  .main .main-content .content-wrap .left .card {
    width: 175px;
    height: 277.2px;
    z-index: 1;
    position: relative;
  }

  .main .main-content .content-wrap .left .card-sd {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 329px;
    height: 53.2px;
  }

  .main .main-content .container-wrap {
    gap: 14px;
    width: 100%;
  }

  .btn-wrap {
    gap: 6px;
  }

  .main .main-content .btn {
    cursor: pointer;
    width: 100%;
    height: 57.6px;
    border: 0.7px solid;
    border-image-source: linear-gradient(94.93deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.11) 100%);
    background: radial-gradient(125.03% 129.27% at 16.14% 11.9%, #325FAE 0%, #163A77 100%);
    box-shadow: 0px 2.8px 5.6px 0px #0000001A,
      0px 11.2px 11.2px 0px #00000017, 0px 25.2px 15.4px 0px #0000000D,
      0px 43.4px 16.8px 0px #00000003,
      0px 68.6px 19.6px 0px #00000000;
    border-radius: 5.6px;
    padding: 14px 7.7px 14px 16.1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8.4px;
  }



  .main .main-content .btn .top {
    font-weight: 500;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: -0.7px;
    color: #FFFFFFE0;
  }

  .main .main-content .btn .bottom {
    display: flex;
    align-items: center;
  }

  .main .main-content .btn .bottom p {
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: -0.7px;
    /* box-shadow: 0px 0px 2.8px 0px #00000040; */
    color: #FFFFFFE0;
  }

  .main .main-content .btn .bottom img {
    width: 21px;
    height: 21px;
  }

  .main .main-content .content-wrap .right {
    align-items: start;
    gap: 5.6px;
    width: 245px;
    text-align: start;
  }

  .main .main-content .content-wrap .right .card {
    width: 245px;
    padding: 14px 0;
    align-items: flex-start;
    cursor: pointer;
    width: 100%;
  }
  
  .main .main-content .content-wrap .right .card .title-wrap {
    gap: 6px;
  }

  .main .main-content .content-wrap .right .card .title-wrap p {
    font-weight: 500;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: -0.7px;
    color: #fff;
    text-shadow: 0 0.2px 2.4px rgba(0, 0, 0, 0.75);
    padding: 0;
  }

  .main .main-content .content-wrap .right .card .title-wrap h1 {

    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.7px;
    vertical-align: middle;
    color: #fff;
    text-shadow: 0 0.2px 2.4px rgba(0, 0, 0, 0.75);
  }

  .main .main-content .content-wrap .right .card .title-wrap .arrow {
    width: 16.8px;
    height: 16.8px;
    transition: all .4s ease-in-out;
    transform: rotate(0deg);
  }

  .main .main-content .content-wrap .right .card .title-wrap.active .arrow {
    transform: rotate(90deg);
  }

  .main .main-content .content-wrap .right .card .title-wrap.active {
    /* padding-bottom: 5.6px; */
  }

  .content span.diver {
    display: block;
    margin-bottom: 6px;
    width: 100%;
    height: 0.5px;
    background-color: #fff;
  }

  .main .main-content .content-wrap .right .card .content {
    padding-left: 64px;
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -0.7px;
    vertical-align: middle;
    color: #fff;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.3s ease-out,
      opacity 0.3s ease-out,
      margin 0.3s ease-out;
    -o-transition: max-height 0.3s ease-out,
      opacity 0.3s ease-out,
      margin 0.3s ease-out;
    transition: max-height 0.3s ease-out,
      opacity 0.3s ease-out,
      margin 0.3s ease-out;
    /* padding-bottom: 5.6px; */
    opacity: 0;
  }



  .main .main-content .desc {
    color: #FFFFFF99;
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -0.7px;
    display: flex;
    gap: 2.8px;
  }

  .main .main-content .desc::before {
    content: '※';
  }

  .event {
    background: #163353;
    width: 100%;
    height: 778.2px;
    padding-top: 93px;
  }

  .event .event-content {
    position: relative;
    width: 436px;
    height: 622px;
    padding: 44.8px 33.6px;
    gap: 33.6px;
    border-radius: 5.6px;
    background-color: rgba(255, 255, 255, .88);
    margin: auto;
    align-items: start;
  }

  .event .event-content .section {
    gap: 11.2px;
    align-items: start;
  }

  .event .event-content .title {
    padding: 8.4px 0;

    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: -0.7px;
    vertical-align: middle;
    color: #4178D9;
    border-bottom: 2.8px solid #4178D9
  }

  .event .event-content .content-wrap {
    align-items: start;
    gap: 5.6px;
  }

  .event .event-content h1 {
    font-weight: 700;
    font-size: 19.6px;
    line-height: 22.4px;
    letter-spacing: -0.7px;
    color: #000000E0;
    word-break: break-all;
  }

  .event .event-content .desc {
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -0.7px;
    vertical-align: middle;
    color: #000000C4;
  }

  .event .event-content .date-wrap {
    gap: 5.6px;
    align-items: start;
  }

  .event .event-content .date-wrap .title {

    padding: 1.4px 5.6px;
    border-radius: 5.6px;
    background: #00000014;
    border: none;
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -0.7px;
    vertical-align: middle;
    color: #000000E0;
    font-weight: 400;
  }

  .event .event-content .date-wrap .date {
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -0.7px;
    vertical-align: middle;
    color: #000000E0;
  }

  .event .event-content .event-label {
    position: absolute;
    width: 173.6px;
    height: 56px;
    left: 50%;
    transform: translateX(-50%);
    top: -28px;
  }

  .footer {
    width: 100%;
    background: #212429;
    padding: 36.4px 33.6px 50.4px 19.6px;
  }


  .footer .footer-content {
    margin: auto;
    max-width: 1346.8px;
    width: 100%;
    align-items: start;
    gap: 14px;
  }

  .footer .footer-content .title-wrap {
    padding: 0 11.2px;
    justify-content: start;
    align-items: center;
    gap: 8.4px;
  }

  .footer .footer-content .title-wrap .icon-alert {
    width: 25.2px;
    aspect-ratio: 1;
  }

  .footer .footer-content .title-wrap p {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.7px;
    color: #FFFFFFC4;
  }

  .footer .footer-content ul {
    list-style: none;
  }

  .footer .footer-content ul li {
    position: relative;
    padding-left: 25px;
    color: #FFFFFFC4;
    font-size: 18.2px;
    line-height: 25.2px;
    letter-spacing: -5%;
  }

  .footer .footer-content ul li::before {
    position: absolute;

    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #FFFFFFC4;

    top: 9px;
    left: 8px;
  }

  .footer .footer-content ul li strong {
    line-height: 21px;
  }

  .footer .footer-content ul li span {
    display: flex;
    gap: 8.4px;
    font-weight: 700;
    line-height: 21px;
  }

  .footer .footer-content ul li span::before {
    content: "-";
  }


  .footer .footer-content .btm p {
    display: flex;
    gap: 5.6px;
    padding: 0 5.6px;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -5%;
    color: #FFFFFFC4;
  }

  .footer .footer-content .btm p::before {
    content: "※";
  }

  .kv-icon {
    width: 36px;
  }