/* =========================================================
   HCHOME LOCATION
========================================================= */

#hchome-location,
#hchome-location * {

    box-sizing: border-box;

}


#hchome-location {

    width: 100%;

    padding: 75px 5vw;

    background: #f4f6f9;

    font-family:
        Pretendard,
        "Noto Sans KR",
        sans-serif;

    color: #182033;

}


/* =========================================================
   INNER
========================================================= */

.hchome-location-inner {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.hchome-location-header {

    margin-bottom: 35px;

}


.hchome-location
.hchome-section-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

    color: #687086;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .08em;

}


.hchome-location
.hchome-section-number {

    color: #143568;

    font-size: 16px;

}


.hchome-location
.hchome-section-line {

    width: 38px;

    height: 2px;

    background: #143568;

}


/* =========================================================
   TITLE
========================================================= */

.hchome-location-title {

    margin: 0;

    color: #192033;

    font-size: clamp(42px, 4vw, 64px);

    line-height: 1.15;

    font-weight: 400;

    letter-spacing: -.06em;

}


.hchome-location-title strong {

    color: #12366b;

    font-weight: 800;

}


.hchome-location-desc {

    margin: 18px 0 0;

    color: #6c7483;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.7;

    letter-spacing: -.035em;

}


/* =========================================================
   CONTENT
========================================================= */

.hchome-location-content {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    min-height: 460px;

    background: #fff;

    overflow: hidden;

}


/* =========================================================
   LEFT MAP
========================================================= */

.hchome-location-map {

    position: relative;

    min-height: 460px;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            #071a35,
            #102f5b
        );

}


/* BACKGROUND */

.hchome-map-bg {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 25% 30%,
            rgba(54,110,180,.35),
            transparent 35%
        ),

        radial-gradient(
            circle at 75% 70%,
            rgba(22,70,130,.4),
            transparent 40%
        );

}


/* =========================================================
   MAP GRID
========================================================= */

.hchome-map-grid {

    position: absolute;

    inset: -20%;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(255,255,255,.25) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.25) 1px,
            transparent 1px
        );

    background-size:

        65px 65px;

    transform:

        rotate(-12deg)
        scale(1.2);

}


/* =========================================================
   MAP ROADS
========================================================= */

.hchome-map-road {

    position: absolute;

    display: block;

    height: 3px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    opacity: .55;

}


.road-01 {

    width: 130%;

    top: 28%;

    left: -15%;

    transform: rotate(18deg);

}


.road-02 {

    width: 120%;

    top: 52%;

    left: -10%;

    transform: rotate(-24deg);

}


.road-03 {

    width: 95%;

    top: 74%;

    left: 15%;

    transform: rotate(8deg);

}


.road-04 {

    width: 100%;

    top: 42%;

    left: -20%;

    transform: rotate(90deg);

}


/* =========================================================
   MAP PIN
========================================================= */

.hchome-map-pin {

    position: absolute;

    top: 48%;

    left: 50%;

    width: 22px;

    height: 22px;

    transform:

        translate(-50%, -50%);

    z-index: 5;

}


.hchome-map-pin-dot {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:

        0 0 0 7px
        rgba(255,255,255,.18),

        0 10px 30px
        rgba(0,0,0,.35);

}


.hchome-map-pin-pulse {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 80px;

    height: 80px;

    border:

        1px solid
        rgba(255,255,255,.45);

    border-radius: 50%;

    transform:

        translate(-50%, -50%);

    animation:

        hchomeMapPulse
        2.5s
        infinite;

}


@keyframes hchomeMapPulse {

    0% {

        transform:
            translate(-50%, -50%)
            scale(.4);

        opacity: 1;

    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(1.3);

        opacity: 0;

    }

}


/* =========================================================
   MAP ADDRESS
========================================================= */

.hchome-map-address {

    position: absolute;

    left: 35px;

    top: 35px;

    z-index: 10;

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.hchome-map-address span {

    color:

        rgba(255,255,255,.6);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .14em;

}


.hchome-map-address strong {

    color: #fff;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: -.04em;

}


/* =========================================================
   MAP BUTTONS
========================================================= */

.hchome-map-buttons {

    position: absolute;

    left: 35px;

    bottom: 35px;

    z-index: 10;

    display: flex;

    gap: 10px;

}


.hchome-map-button {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 13px 16px;

    background:

        rgba(255,255,255,.97);

    color: #152846;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: .25s ease;

}


.hchome-map-button:hover {

    transform:

        translateY(-3px);

}


.hchome-map-button-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 25px;

    height: 25px;

    background: #17396d;

    color: #fff;

    font-size: 12px;

    font-weight: 800;

}


.hchome-map-button b {

    margin-left: 3px;

    font-size: 17px;

    font-weight: 400;

}


/* =========================================================
   RIGHT INFO
========================================================= */

.hchome-location-info {

    padding: 38px 42px;

    display: flex;

    flex-direction: column;

}


/* =========================================================
   ADDRESS
========================================================= */

.hchome-location-address {

    padding-bottom: 22px;

    border-bottom:

        1px solid #e3e7ec;

}


.hchome-location-label {

    display: block;

    margin-bottom: 9px;

    color: #17427c;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .12em;

}


.hchome-location-address h3 {

    margin: 0;

    color: #172033;

    font-size: 30px;

    line-height: 1.35;

    font-weight: 750;

    letter-spacing: -.055em;

}


/* =========================================================
   LIST
========================================================= */

.hchome-location-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 35px;

}


/* =========================================================
   ITEM
========================================================= */

.hchome-location-item {

    display: flex;

    gap: 15px;

    padding: 20px 0;

    border-bottom:

        1px solid #edf0f3;

}


.hchome-location-icon {

    flex: 0 0 40px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:

        1px solid #cfd8e5;

    border-radius: 50%;

    color: #163c73;

    font-size: 14px;

    font-weight: 800;

}


.hchome-location-text {

    min-width: 0;

}


.hchome-location-text h4 {

    margin: 0 0 7px;

    color: #1c2434;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -.04em;

}


.hchome-location-text p {

    margin: 0;

    color: #6c7583;

    font-size: 16px;

    line-height: 1.6;

    font-weight: 500;

    letter-spacing: -.035em;

}


/* =========================================================
   CONTACT
========================================================= */

.hchome-location-contact {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: auto;

    padding-top: 20px;

}


.hchome-location-contact div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.hchome-location-contact div span {

    color: #7d8797;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .12em;

}


.hchome-location-contact div strong {

    color: #163664;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -.03em;

}


.hchome-location-contact a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 18px;

    background: #163664;

    color: #fff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: .25s ease;

}


.hchome-location-contact a:hover {

    background: #091f42;

}


.hchome-location-contact a b {

    font-size: 18px;

    font-weight: 400;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .hchome-location-content {

        grid-template-columns: 1fr;

    }


    .hchome-location-map {

        min-height: 430px;

    }


    .hchome-location-info {

        padding: 40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    #hchome-location {

        padding: 70px 20px;

    }


    .hchome-location-header {

        margin-bottom: 30px;

    }


    .hchome-location-title {

        font-size: 46px;

    }


    .hchome-location-desc {

        font-size: 17px;

    }


    .hchome-location-content {

        width: calc(100% + 40px);

        margin-left: -20px;

    }


    .hchome-location-map {

        min-height: 380px;

    }


    .hchome-map-address {

        left: 22px;

        top: 25px;

    }


    .hchome-map-address strong {

        font-size: 19px;

    }


    .hchome-map-buttons {

        left: 20px;

        right: 20px;

        bottom: 20px;

        gap: 8px;

    }


    .hchome-map-button {

        flex: 1;

        justify-content: center;

        padding: 12px 8px;

        gap: 6px;

        font-size: 13px;

    }


    .hchome-map-button b {

        display: none;

    }


    .hchome-location-info {

        padding: 35px 20px;

    }


    .hchome-location-address h3 {

        font-size: 27px;

    }


    .hchome-location-list {

        grid-template-columns: 1fr;

    }


    .hchome-location-item {

        padding: 17px 0;

    }


    .hchome-location-text h4 {

        font-size: 19px;

    }


    .hchome-location-text p {

        font-size: 16px;

    }


    .hchome-location-contact {

        margin-top: 15px;

    }

}