/* ==============================
   LOCATION PAGE
============================== */
.location_page {
   width: 100%;
   color: var(--color-text-primary);
}


/* ==============================
   LOCATION VISUAL
============================== */
.location_visual {
   width: 100%;
   padding: 200px 0 160px;
}

.location_visual_inner {
   width: calc(100% - 200px);
   max-width: 1720px;
   margin: 0 auto;
}

.location_visual_head {
   text-align: center;
   margin-bottom: 100px;
   overflow: hidden;
}

.location_visual_head_inner {
   transform: translateY(120%);
   animation: locationTitleUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.location_visual_label {
   display: block;
   margin-bottom: 20px;
   font-size: 24px;
   font-weight: 300;
   letter-spacing: 0.18em;
   color: var(--color-text-muted);
}

.location_visual_title {
   font-size: 64px;
   font-weight: 700;
}

@keyframes locationTitleUp {
   0% {
      transform: translateY(120%);
   }

   100% {
      transform: translateY(0);
   }
}

.location_visual_box {
   position: relative;
   width: 100%;
   height: 420px;
   max-height: 420px;
   margin: 0 auto;
   overflow: hidden;
   opacity: 1;
   transform: translateY(0);

   --location-clip-x: 41%;
   clip-path: inset(0 var(--location-clip-x) 0 var(--location-clip-x));
   -webkit-clip-path: inset(0 var(--location-clip-x) 0 var(--location-clip-x));

   will-change: clip-path;
}

.location_visual_box::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.15);
   pointer-events: none;
   z-index: 2;
}

.location_visual_img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 55%;
   transform: scale(1);
}

#location_map {
   width: 100%;
}

.location_map_inner {
   max-width: 1400px;
   margin: 0 auto;
}

.location_map_box {
   width: 100%;
   height: 100%;
   background-color: var(--color-line);
}

#location_kakao_map .root_daum_roughmap .cont {
   display: none !important;
}


/* ==============================
   LOCATION CONTACT
============================== */
#location_contact {
   width: 100%;
   padding: 60px 0 100px
}

.location_contact_inner {
   width: calc(100% - 160px);
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 60px;
}

.location_contact_head {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
}

.location_contact_head_icon_box {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 18px;
}

.location_contact_head_line {
   width: 100%;
   height: 1px;
   background-color: var(--color-line);
}

.location_contact_head_icon {
   flex: 0 0 36px;
   width: 36px;
   height: 36px;
   border-radius: 100%;
   background-color: var(--color-brand);
   display: flex;
   align-items: center;
   justify-content: center;
}

.location_contact_head_icon img {
   width: 100%;
   height: 100%;
   padding: 6px;
   display: block;
}

.location_contact_title {
   font-size: 24px;
   text-align: center;
}

.location_contact_list {
   width: 100%;
   display: flex;
   gap: 52px;
}

.location_contact_item {
   width: calc(100% / 4);
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
   text-align: center;
}

.location_contact_item_icon {
   width: 36px;
   height: 36px;
   border-radius: 100%;
   background-color: var(--color-brand);
   display: flex;
   align-items: center;
   justify-content: center;
}

.location_contact_item_icon img {
   display: block;
   padding: 6px;
   width: 100%;
   height: 100%;
}

.location_contact_info {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
}

.location_contact_label {
   font-size: 18px;
}

.location_contact_info a>p {
   font-size: 16px;
   color: var(--color-text-secondary);
}

.location_contact_desc {
   display: flex;
   flex-direction: column;
   gap: 4px;
   align-items: center;
}

.location_contact_desc>p {
   color: var(--color-text-secondary);
}

.location_contact_address_extra {
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 6px;
}

.location_contact_address_extra>p {
   color: var(--color-text-secondary);
}






/*------------------------------------
   Responsive
------------------------------------*/
@media (max-width: 1400px) {}



/* 모바일/태블릿에서 지도 터치가 페이지 스크롤을 막지 않도록 기본 비활성 */
@media screen and (max-width: 1024px) {
   /* .header_inner {
      background-color: var(--color-text-light);
   } */

   #location_kakao_map .root_daum_roughmap.map-disabled .wrap_map {
      pointer-events: none;
   }

   #location_kakao_map .root_daum_roughmap:not(.map-disabled) .wrap_map {
      pointer-events: auto;
   }
}

/*------------------------------------
   탭 버전
------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
   .location_visual {
      padding: 200px 0 60px;
   }

   .location_visual_inner,
   .location_map_inner,
   .location_contact_inner {
      width: calc(100% - 48px);
   }

   .location_visual_head {
      margin-bottom: 80px;
   }

   .location_visual_box {
      height: clamp(300px, 36vw, 360px);
   }

   .location_map_box {
      height: auto;
   }

   #location_kakao_map .root_daum_roughmap {
      width: 100% !important;
   }

   #location_kakao_map .root_daum_roughmap .wrap_map {
      height: 45svh !important;
      min-height: 600px;
      max-height: 640px;
   }

   .location_contact_list {
      row-gap: 48px;
      flex-direction: column;
   }

   .location_contact_item {
      width: 100%;
   }
}




/*------------------------------------
   모바일 버전
------------------------------------*/
@media screen and (min-width: 300px) and (max-width: 599px) {
   .location_visual {
      padding: 120px 0 55px;
   }

   .location_visual_inner,
   .location_map_inner,
   .location_contact_inner {
      width: calc(100% - 40px);
   }

   .location_visual_head {
      margin-bottom: 55px;
   }

   .location_visual_label {
      margin-bottom: 12px;
      font-size: 14px;
   }

   .location_visual_title {
      font-size: 36px;
   }

   .location_visual_box {
      height: clamp(200px, 55vw, 240px);
   }

   .location_visual_img {
      object-position: center center;
   }

   .location_map {
      padding-bottom: 45px;
   }

   .location_map_box {
      height: auto;
   }

   #location_kakao_map .root_daum_roughmap {
      width: 100% !important;
   }

   #location_kakao_map .root_daum_roughmap .wrap_map {
      height: 40svh !important;
      min-height: 380px;
      max-height: 400px;
   }

   .location_contact {
      padding-bottom: 80px;
   }

   .location_contact_head {
      margin-bottom: 20px;
   }

   .location_contact_title {
      font-size: 20px;
   }

   .location_contact_list {
      row-gap: 40px;
      flex-direction: column;
   }

   .location_contact_item {
      width: 100%;
   }
}