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

@charset "UTF-8";

/* START : freesummer */
.freesummer {
  --title-h2 : 40px;
  --text-p1 : 24px;
  --text-p2 : 20px;
  --text-p3 : 18px;
  --text-p4 : 16px;
  
  --c_primary : #50FFAB;
  --c_secondary : #005942; 
  --global-font-color : #000;
  --btn-cta_white_hover_bg : var(--c_primary);
  --btn-cta_hover_bg : var(--c_primary);
  --btn-cta_hover_color : #000;
  --btn_cta_white_hover_color : #000;

  .hidden_pc {display: none;}
  .hidden_mo {display: block;}

  @media screen and (max-width : 960px) {
    --title-h2 : 34px;
    --text-p1 : 22px;
    --text-p2 : 18px;
    --text-p3 : 16px;
    --text-p4 : 14px; 

    .hidden_pc {
      display: block;
    }
    .hidden_mo {
      display: none;
    }
  }
  /* 초기화 */
  & 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: 714px;
    }
  }
  & .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 : 614px;
      width : 100%;
      margin-bottom: 37px;
      @media screen and (max-width : 960px) {
        min-width : 463px;
        width : 463px;
        margin-bottom: 20px;
      }
    }
    & .title {
      max-width : 518px;
      width : 100%;
      transform : scale(0);
      animation : 0.4s scale1 forwards;
      margin-bottom: 60px;
      @media screen and (max-width : 960px) {
        max-width : 307px;
        margin-bottom: 12px;
      }
    }
    & .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);
      background-position : bottom center;
    }
    & .container {
      --max-width : 1260px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap : 20px;
      @media screen and (max-width : 960px) {
        --max-width : 370px;
        padding-bottom: 390px;
        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_primary);
      @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: var(--c_secondary);
    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 : 32px;
        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: #021D15;
          border-radius: var(--li_border);
          display: flex;
          justify-content: center;
          align-items: center;
          &:last-child {
            background: var(--c_primary);
            color : #021D15;
            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 xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' fill='none'%3E%3Crect width='35' height='35' rx='17.5' fill='%23021D15'/%3E%3Cpath d='M15.6212 19.3788H10V15.6212H15.6212V10H19.3788V15.6212H25V19.3788H19.3788V25H15.6212V19.3788Z' fill='white'/%3E%3C/svg%3E");
              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: 800;
      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);
      }

      & > span {
        color : #00A486;
      }
    }

    

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


  }
  /* END : sec_scheme */

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

    & .btn_group {
      margin-top: 60px;
    }
    & .container {
      @media screen and (max-width : 960px) {
        --max-width : 100%;
        --padding_x : 0;
      }
    }
    & .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(2, 1fr);
        & li:has([data-region=""]) {
          display: none;
        }
      }
      & a {
        width : 170px;
        height : 60px;
        color : #78818C;
        border: 1px solid #EAEAEA;
        font-size: 20px;
        font-weight: 500;
        border-radius: 8px;
        background-color: #fff;
        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;
          border-left: none;
        }
        &._active {
          color : #fff;
          background-color: #000;
          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(--c_primary);
        color: #000;
        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 : 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 : #000;
    }
    & .title_p {
      color : rgba(255,255,255,0.9);
    }
  }
  /* END : sec_callout */

  
} /* END : rentfree_60th */

/* START : event-common_benefit roller 이미지 override */
@media screen and (min-width: 961px) {
  .freesummer .event-common_benefit .roller {
    background-image: url("img/benefit_roller.png");
  }
}
@media screen and (max-width: 960px) {
  .freesummer .event-common_benefit .roller {
    background-image: url("img/benefit_roller_1.png");
  }
  .freesummer .event-common_benefit .roller.hidden_pc {
    background-image: url("img/benefit_roller_2.png");
  }
}
/* END : event-common_benefit roller 이미지 override */

@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 */
.freesummer._contact {
  background : url(img/contact-bg.jpg) no-repeat center bottom / cover;
  @media screen and (max-width : 960px) {
    background: linear-gradient(180deg, #005942 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 : #000;
      --chat_bg : var(--c_primary);
      @media screen and (min-width : 961px) {
        margin-bottom: 42px;
      }
      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, #fff 0%, #50FFAB 53%, #fff 100%);
        content : "";
      }
      &::before {
        top : 0;
      }
      &::after {
        bottom : 0;
      }
    }
    & .marquee {
      position: relative;
      overflow: hidden;
      &::after {
        position: absolute;
        right : 0;
        top : calc(50% - 15px);
        z-index: 1;
        width : 50%;
        height : 30px;
        background: linear-gradient(90deg, rgba(1, 17, 63, 0) 0%, #01252e 100%);
        content : "";
        @media screen and (max-width : 960px) {
          top : calc(50% - 30px);
          width : 100%;
          height : 60px;
          background: linear-gradient(90deg, #024339 0%, rgba(0, 32, 111, 0) 25%, rgba(0, 32, 111, 0) 50%, rgba(0, 32, 111, 0) 75%, #024339 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(--c_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_secondary);
    }
    & .check_round input:checked + label::after {
      border-color: var(--c_secondary);
    }
    & .wpforms-container .wpforms-required-label {
      color : #F32F40;
    }
    & 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_secondary) !important;}

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