/* =============================================================
  60호점 돌파 이벤트
  --------------------------------------------------------------
  관련 파일 :
    contact/60th_rentfree_contact.php 
    event/260209_60th_rentfree.php
  작성자    : jh.roh
  작성일    : 2026-02-09
  수정일    :
============================================================= */

@charset "UTF-8";

/* START : rentfree_60th */
.rentfree_60th {
  --title-h2 : 40px;
  --text-p1 : 24px;
  --text-p2 : 20px;
  --text-p3 : 18px;
  --text-p4 : 16px;
  
  --c_primary : #0059FF;
  --c_secondary : #B3EDFF;
  --global-font-color : #000;
  --gridient : linear-gradient(271deg, #0059FF 9%, #008CFF 105%);;
  --btn-cta_white_hover_bg : var(--c_primary);
  --btn-cta_hover_bg : var(--c_primary);
  --btn-cta_hover_color : #fff;

  @media screen and (max-width : 960px) {
    --title-h2 : 34px;
    --text-p1 : 22px;
    --text-p2 : 18px;
    --text-p3 : 16px;
    --text-p4 : 14px; 
  }
  /* 초기화 */
  & ul, & li {
    list-style : none;
  }
  & h1, & h2, & h3, & h4, & h5, & h6, body {
    color : var(--global-font-color);
  }
  & b {
    font-weight: 700;
  }
  & picture {
    display: flex;
  }
  & ._white :where(h1, h2, h3, h4, h5, h6, p) {
    color : #fff;
  }
  & .c_primary {
    color : var(--c_primary);
  }
  & .c_secondary {
    color : var(--c_secondary);
  }
  & .title_h2 {
    font-size: var(--title-h2);
    font-weight: 700;
    letter-spacing: -0.0625rem;
  }

  /* 공통 컴포넌트 */
  & .container {
    --max-width : 1380px;
    --padding_x : 50px;
    --padding_y : 180px;
    width : 100%;
    max-width : var(--max-width);
    padding : var(--padding_y) var(--padding_x);
    margin : 0 auto;
    @media screen and (max-width : 960px) {
      --max-width : 370px;
      --padding_x : 20px;
      --padding_y : 130px;
    }
  }

  & .fireworks_wrap {
    position:absolute;
    top: -100px;
    right: 0;
    left: 0;
    z-index: 1;
    & #fwCanvas{
      width:100%;
      height:682px;
    }
  }
  & .chat {
    position: relative;
    width : max-content;
    height : 35px;
    padding : 0 14px;
    margin-bottom: 20px;
    font-size: var(--text-p4);
    color : var(--chat_color, #fff);
    line-height: 1;
    font-weight: 500;
    border-radius: 30px;
    background-color: var(--chat_bg, #000);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform : translateY(0);
    animation : updown 2s infinite;
    animation-delay : 1s;
    
    &::after {
      position: absolute;
      left : 50%;
      bottom : -7px;
      width : 10px;
      height : 8px;
      mask : url(img/icon-tail.svg) no-repeat center / 10px;
      background : var(--chat_bg, #000);
      display: inline-block;
      transform : translateX(-50%);
      content : "";
    }
    @media screen and (max-width : 960px) {
      height : 34px;
      padding : 0 12px;
    }
  }
  & .__ani .chat {
    opacity: 1;
    transform : translateY(0);
  }
  & .title_h2 + p:not(.title_p) {
    margin-top: 36px;
    @media screen and (max-width : 960px) {
      margin-top: 30px;
    }
  }
  & .title_p {
    margin-top: 12px;
    font-size: var(--text-p1);
    font-weight: 400;
    color : rgba(68,68,68,0.9);
    line-height: 1.4;
    @media screen and (max-width : 960px) {
      margin-top: 8px;
    }
  } 

  & .motion_up {
    --md : 0s;
    opacity: 0;
    transform : translateY(30px);
  }
  & .__ani .motion_up {
    opacity: 1;
    transform: translateY(0);
    transition : opacity 0.7s ease var(--md), transform 0.7s ease var(--md);
  }
  

  /* START : sec_header */
  & .sec_header {    
    position: relative;
    height : 682px;
    background : url(img/header-bg.jpg) no-repeat center bottom / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    @media screen and (max-width : 960px) {
      height : 667px;
      padding-top: 50px;
      background-image : url(img/header-bg_mo.jpg);
      justify-content: flex-start;
    }

    & .building {
      position: absolute;
      bottom : 0;
      left : 50%;
      width : 410px;
      height : 576px;
      margin-left : 562px;
      transform : translateX(-50%);
      z-index: 2;
      @media screen and (max-width : 960px) {
        bottom : 0;
        width : 270px;
        height : 315px;
        margin: 0;
      }
    }
    & .building._left {
      width : 388px;
      height : 534px;
      margin-left: -542px;
      z-index: 1;
      @media screen and (max-width : 960px) {
        display: none;
      }
    }
    & .logo {
      max-width : 418px;
      width : 100%;
      margin-bottom: 18px;
      @media screen and (max-width : 960px) {
        max-width : 330px;
        margin-bottom: 10px;
      }
    }
    & .title {
      max-width : 646px;
      width : 100%;
      margin : 40px 0;
      transform : scale(0);
      animation : 0.4s scale1 forwards;
      @media screen and (max-width : 960px) {
        max-width : 330px;
        margin : 26px 0;
      }
    }
    & .info {
      font-size: var(--text-p1);
      @media screen and (max-width : 960px) {
        font-size: 19px;
        &:nth-of-type(2){ 
          font-size: 18px;
        }
      }
    }
  }
  /* END : sec_header */

  /* START : story */
  .sec_story {
    background : url(img/story-bg.jpg) no-repeat center / cover;
    @media screen and (max-width : 960px) {
      background-image : url(img/story-bg_mo.jpg);
    }
    & .container {
      --max-width : 1260px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap : 20px;
      @media screen and (max-width : 960px) {
        --max-width : 370px;
        flex-direction: column;
        gap : 60px;
      }
    }
    & .story_img {
      max-width : 590px;
      flex : 1 1 0;
    }
    & h5 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: var(--text-p3);
      color : var(--c_secondary);
      @media screen and (max-width : 960px) {
        font-weight: 600;
        margin-bottom: 8px;
      }
    }
    & p {
      font-size: var(--text-p2);
      color : rgba(255,255,255,0.9);
      &.mgt {
        margin-top: 20px;
      }
    }

  }
  /* END : sec_story */

  /* START : scheme */
  .sec_scheme {
    background-color: #0A1121;
    text-align: center;
    overflow: hidden;

    & .chat {
      --chat_color : #000;
      --chat_bg : #fff;
    }

    & .title_p {
      color : rgba(255,255,255,0.9);
    }
    
    & .conts_box {
      margin-top : 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      @media screen and (max-width : 960px) {
        margin-top: 30px;
      }

      & > b,
      & > span {
        font-size: var(--text-p2);
        line-height: 1.7;
        color : #fff;
        text-decoration: underline;
        display: inline-block;
        margin-bottom: 14px;
        @media screen and (max-width : 960px) {
          margin-bottom: 10px;
        }
      }

      & > span {
        margin-top: 108px;
        @media screen and (max-width : 960px) {
          margin-top: 64px;
        }
      }

      & ul {
        --ul_width : 732px;
        --li_height : 91px;
        --li_font : 30px;
        --li_border : 9px;
        --icon_width : 30px;
        width: 100%;
        max-width : var(--ul_width);
        display: flex;
        justify-content: center;
        align-items: center;
        @media screen and (max-width : 960px) {
          flex-direction: column;
          --ul_width : 272px;
          --li_height : 76px;
          --li_font : 24px;
          --icon_width : 28px;
        }
        
        &:nth-of-type(2) {
          position: relative;
          --ul_width : 500px;
          --li_height : 62px;
          --li_font : 20px;
          --li_border : 6px;
          --icon_width : 24px;
          @media screen and (max-width : 960px) {
            --ul_width : 235px;
            --li_height : 76px;
            --icon_width : 28px;
            flex-direction: column;
          }

          &::before {
            position: absolute;
            top : -120px;
            width : 6px;
            height : 36px;
            background : url(img/scheme-dot.png) no-repeat center / contain;
            display: inline-block;
            content : "";
            @media screen and (max-width : 960px) {
              top : -85px;
              width : 4px;
              height : 24px;
              background-size : 100%;
            }
          }
          & li:last-child {
            transition-delay: 1s;
          }
        }
        & li {
          position: relative;
          width: 50%;
          height: var(--li_height);
          font-size: var(--li_font);
          font-weight: 700;
          color: #fff;
          background-color: #25365A;
          border-radius: var(--li_border);
          display: flex;
          justify-content: center;
          align-items: center;
          &:last-child {
            background: var(--gridient);
            transform: scaleX(0);
            opacity: 0;
            transition: transform 0.6s ease 0.4s, opacity 0.6s ease 0.4s;
            will-change: transform, opacity;
            transform-origin: left;
            @media screen and (max-width : 960px) {
              transform-origin: top;
              transform: scaleY(0);
            }
            &::before {
              position: absolute;
              top: calc(50% - (var(--icon_width) * 0.5));
              left: calc(var(--icon_width) * -0.5);
              width: var(--icon_width);
              height: var(--icon_width);
              background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.366943' y='0.9021' width='24' height='24' rx='12' fill='black'/%3E%3Cpath d='M11.1144 14.1546H7.36694V11.6496H11.1144V7.9021H13.6194V11.6496H17.3669V14.1546H13.6194V17.9021H11.1144V14.1546Z' fill='white'/%3E%3C/svg%3E%0A");
              background-size: cover;
              content: "";
              @media screen and (max-width : 960px) {
                top : calc(var(--icon_width) * -0.5);;
                left : calc(50% - (var(--icon_width) * 0.5));
              }
            }
          }
          @media screen and (max-width : 960px) {
            width : 100%;
          }
        }
      }
    } /* // .conts_box */

    & .scheme_badge {
      position: absolute;
      top: 12px;
      right: -57px;
      width: 112px;
      height: 195px;
      padding: 0 0 30px 0;
      color : #121212;
      font-size: 28px;
      font-weight: 900;
      line-height: 1.26;
      background: url(img/scheme-label.png) no-repeat center bottom / contain;
      transform: rotate(-30deg);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      transform-origin: 28% 0%;
      animation: swing 1.2s ease infinite alternate;
      @media screen and (max-width : 960px) {
        top : 22px;
        right : -20px;
        width : 85px;
        height : 128px;
        padding-bottom: 18px;
        font-size: 24px;
        line-height: 1.27;
        font-weight: 700;
        background-image: url(img/scheme-label_mo.png);
      }
    }

    & .conts_box.__ani  > ul li:last-child {
      transform: scaleX(1);
      opacity: 1;
    }
    
    


  }
  /* END : sec_scheme */

  /* START : office */
  .sec_office {
    background-color: #F3F6FA;
    text-align: center;

    & .btn_group {
      margin-top: 60px;
    }
    & .container {
      --nav_active : var(--c_primary);
      @media screen and (max-width : 960px) {
        --max-width : 100%;
        --padding_x : 0;
        --nav_active : #000;
      }
    }
    & .office_nav { 
      margin : 60px 0;
      display: flex;
      justify-content: center; 
      gap : 10px;
      @media screen and (max-width : 960px) {
        margin : 40px 0 0;
        gap : 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        & li:has([data-region=""]) {
          display: none;
        }
      }
      & a {
        width : 170px;
        height : 60px;
        color : #78818C;
        font-size: 20px;
        font-weight: 500;
        border-radius: 8px;
        background-color: #E3EAF1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width : 960px) {
          width : 100%;
          height : 52px;
          color : #777;
          font-size: 16px;
          font-weight: 700;
          background-color : #fff;
          border-radius: 0;
        }
        &._active {
          color : #fff;
          background-color: var(--nav_active);
          font-weight: 700;
        }
      }
    } /* // .office_nav */

    & .office_list {
      & ul {
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(305px, auto)); 
        gap: 40px 20px;
        @media screen and (max-width : 960px) {
          grid-template-columns: none;
          gap : 0;
        }
      }
      & li { 
        position: relative; 
        overflow: hidden; 
        background-color: #fff; 
        display: flex;
        flex-direction: column-reverse;
        border-radius: 10px;
        @media screen and (max-width : 960px) {
          border-radius: 0;
          border-top: 1px solid #EAEAEA;
          flex-direction: row-reverse;
          justify-content: flex-end;
        }
      }
      & .label { 
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: var(--text-p4);
        padding: 0 8px;
        font-weight: 700; 
        line-height: 1.7;
        background: var(--gridient);
        color: #fff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        @media screen and (max-width : 960px) {
          position: static;
        }
      }
      & .office_info {
        padding: 18px 26px;
        display: flex; 
        flex-direction: column; 
        align-items: center;
        @media screen and (max-width : 960px) {
          padding : 22px 0 0 25px;
          align-items: flex-start;
        }
        & .name {
          font-size: 40px;
          font-weight: 700; 
          line-height: 1.4; 
          letter-spacing: -1px;
          @media screen and (max-width : 960px) {
            font-size: 28px;
            margin-top: 8px;
          }
        }
        & .distance {
          font-size: 18px;
          line-height: 1.7; 
          color: #777;
          @media screen and (max-width : 960px) {
            font-size: 16px;
          }
        }
      }
      
      & .img_area {
        height: 259px;
        @media screen and (max-width : 960px) {
          display: flex;
          width : 33.3%;
          height : 134px;
        }
        & img {
          overflow: hidden; 
          object-fit: cover; 
          order: 1;
          width: 100%; 
          height: 100%;
        }
        
      }
    }
  }
  /* END : sec_office */

  /* START : message */
  .sec_message {
    @media screen and (max-width : 960px) {
      position: relative;
    }
    & .container {
      --max-width : 1260px;
      position: relative;
      @media screen and (max-width : 960px) {
        --max-width : 370px;
        padding-bottom: 390px;
        position: static;
      }
      &::after {
        position: absolute;
        top : 0;
        right : 20px;
        bottom : 0;
        width : 454px;
        height : 100%;
        background: url("img/messege-rolling.png") repeat-y 0px 1610px / 454px;
        display: inline-block;
        animation : 20s roller_to infinite linear;
        content : "";
        @media screen and (max-width : 960px) {
          top : auto;
          right : 0;
          bottom : 130px;
          width : 100%;
          height : 200px;
          background: url("img/messege-rolling_mo.png") repeat-x 1330px 0 / auto 100%;
        }
      }
    }
    & p {
      font-size: var(--text-p2);
      color : rgba(0,0,0,0.9);
      &.mgt {
        margin-top: 20px;
      }
    }
    
  }
  /* END : sec_message */

  /* sec-highlights */
  .sec-highlights {
    background-color: #EFF7FF;
    text-align: center;
    & .card_group {
      margin-top: 60px;
      text-align: left;
    }
    & .title_p {
      color : rgba(0,0,0,0.9);
    }
    & .container {
      @media screen and (max-width : 960px) {
        --padding_x : 0;
      }
    }
  }
  /* END : sec-highlights */

    /* START : callout */
  .sec_callout {
    background : url(img/callout-bg.png) no-repeat center / cover;
    & .container {
      --padding_y : 100px;
      text-align: center;
    }
    & .chat {
      --chat_bg : var(--c_primary);
      --chat_color : #fff;
    }
    & .title_p {
      color : rgba(255,255,255,0.9);
    }
  }
  /* END : sec_callout */

  
} /* END : rentfree_60th */

@keyframes swing {
  0% { transform: rotate(-30deg); }
  100% { transform: rotate(-25deg); }
}
@keyframes updown {
  0% {transform:translateY(0)}
  10% {transform:translateY(-3px)}
  20% {transform:translateY(0px)}
  30% {transform:translateY(-3px)}
  40% {transform:translateY(0px)}
  100% {transform:translateY(0px)}
}
@keyframes scale1 {
  to {transform : scale(1); }
}

/* START : rentfree_60th _contact */
.rentfree_60th._contact {
  --contact_primary : #76F4FF;
  background : url(img/contact-bg.jpg) no-repeat center bottom / cover;
  @media screen and (max-width : 960px) {
    background: linear-gradient(180deg, #002689 0%, #000A23 100%), #FFF;
  }
  & .container {
    --max-width : 1446px;
    --padding_y : 81px;
    display: flex;
    justify-content: space-between;
    gap : 40px;
    position: relative;
    z-index: 3;
    transform: translate(0);
    @media screen and (max-width : 960px) {
      --padding_y : 44px;
      --padding_x : 0;
      --max-width : 370px;
      flex-direction: column;
      align-items: center;
    }
  }
  & #fwCanvas {
    height : 897px;
    @media screen and (max-width : 960px) { 
      height : 500px;
    }
  }
  & header {
    width: 100%;
    max-width : 45%;
    @media screen and (max-width : 960px) {
      max-width : 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    & .chat {
      --chat_color : #002483;
      --chat_bg : var(--contact_primary);
      @media screen and (min-width : 961px) {
        margin-bottom: 42px;
        --chat_color : #000;
      }
      font-weight: 700;
      &::after {
        margin-bottom: 24px;
        top : 90%;
        bottom : auto;
        @media screen and (min-width : 961px) {
          left : 32px;
          width : 14px;
          height : 12px;
          mask-size : 14px;
          transform: none;
        }
      }
    }
    & .title {
      max-width : 583px;
      @media screen and (max-width : 960px) {
        max-width : 318px;
      }
    }
    & .title_p {
      margin: 30px 0 60px;
      color : rgba(255,255,255,0.9);
      @media screen and (max-width : 960px) {
        margin : 15px 0 20px;
      }
    }
  }
  & .marquee_bg {
    position: relative;
    max-width : 671px;
    width : 100%;
    background : url(img/marquee-bg.svg) no-repeat right center / 100%;
    padding-right : 45px;
    @media screen and (max-width : 960px) {
      background : none;
      padding-right: 0;
      &::before,
      &::after {
        position: absolute;
        left : 0;
        right : 0;
        width : 100%;
        height : 1px;
        display: inline-block;
        background: linear-gradient(90deg, #011D68 0%, #76F4FF 53%, #011D68 100%);
        content : "";
      }
      &::before {
        top : 0;
      }
      &::after {
        bottom : 0;
      }
    }
    & .marquee {
      position: relative;
      overflow: hidden;
      &::after {
        position: absolute;
        right : 0;
        top : calc(50% - 15px);
        width : 50%;
        height : 30px;
        background: linear-gradient(90deg, rgba(1, 17, 63, 0) 0%, #001449 100%);
        content : "";
        @media screen and (max-width : 960px) {
          top : calc(50% - 25px);
          width : 100%;
          height : 50px;
          background: linear-gradient(90deg, #00206F 0%, rgba(0, 32, 111, 0) 25%, rgba(0, 32, 111, 0) 50%, rgba(0, 32, 111, 0) 75%, #00206F 100%);
        }
      }
      & .marquee_track {
        position: relative;
        display:flex;
        width: max-content;
        will-change: transform;
      }
      & .marquee_list {
        height : 64px;
        display: flex;
        align-items: center;
        @media screen and (max-width : 960px) {
          height : 55px;
        }
        & li {
          margin-right : 20px;
          font-size: var(--text-p1);
          font-weight: 700;
          color : var(--contact_primary);
          @media screen and (max-width : 960px) { 
            font-size: 18px;
            margin-right : 16px;
          }
        }
      }
    }
  }
  & .contact-box {
    max-width : 626px;
    width : 100%; 
    border-radius: 10px;;
    background-color: #fff;
    @media screen and (max-width : 960px) {
      width : calc(100% - 40px);
    }
    & .leadforms_box .wpforms-submit-container {
      border-top: none !important;
      padding-bottom: 18px !important;
    }
    & div.wpforms-container-full:not(:empty) {
      margin-bottom: 0;
    }
    & .check_small input:checked + label::after,
    & .check_round input:checked + label::after {
      background-color: var(--c_primary);
    }
    & .check_round input:checked + label::after {
      border-color: var(--c_primary);
    }
    & .wpforms-container .wpforms-required-label {
      color : var(--c_primary);
    }
    & div.wpforms-container-full .wpforms-form button[type=submit]:not(:disabled),
    & div.wpforms-container-full .wpforms-form button[type=submit]:not(:disabled):hover {background-color: var(--c_primary) !important;}

    & ._cautions_text {
      font-size: 12px;
      font-weight: 400;
      color: #444;
      text-align: center;
      padding-bottom : 56px;
      & b {
        color : #F32F40;
      }
    }
  }
} /* END : rentfree_60th _contact */