@import url(default.css);
@import url(fonts.css);
@import url(common.css);




header {
    z-index: 100;
    position: fixed; /* body 기준으로 정렬 */
    left: 0;
    top: 0;
    width: 100%;
    height: var(--header-h);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 60px;
    display: flex; /* logo, gnv, util 좌우배치*/
    justify-content: space-between;
    align-items: center;
    color: #fff;
    transition: 0.5s;
}

header .logo a {
    display: block;
    width: 136px;
    height: 52px;
    background: url(../images/logo_w.png) no-repeat center center / contain;
}

header .util {
    display: flex;
    gap: 20px
}

header .util .lang .lang_open span {
    display: block;
    margin: 9px 43px 0 0;
    position: relative;
    font-weight: var(--bold-weight);
}

header .util .lang .lang_open span::after {
    content: "";
    position: absolute;
    right: -43px;
    top: -7px;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_977' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_977)'%3E%3Cpath d='M19.9993 23.9977L11.666 16H28.3327L19.9993 23.9977Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}


header .util .search .search_open,
header .util .login .login_open {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

header .util .search .search_open {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_983' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_983)'%3E%3Cpath d='M32.5709 34.295L22.103 23.8267C21.2697 24.5147 20.3113 25.0532 19.228 25.4421C18.1447 25.831 17.024 26.0254 15.8659 26.0254C13.0173 26.0254 10.6065 25.0392 8.63341 23.0667C6.66036 21.0942 5.67383 18.6839 5.67383 15.8358C5.67383 12.9881 6.66008 10.5769 8.63258 8.6025C10.6051 6.62833 13.0154 5.64125 15.8634 5.64125C18.7112 5.64125 21.1223 6.62778 23.0967 8.60083C25.0709 10.5739 26.058 12.9847 26.058 15.8333C26.058 17.0236 25.8583 18.1604 25.4588 19.2438C25.0591 20.3271 24.5259 21.2693 23.8592 22.0704L34.3272 32.5383L32.5709 34.295ZM15.8659 23.5258C18.0134 23.5258 19.8323 22.7806 21.3226 21.29C22.8131 19.7997 23.5584 17.9808 23.5584 15.8333C23.5584 13.6858 22.8131 11.8669 21.3226 10.3767C19.8323 8.88611 18.0134 8.14083 15.8659 8.14083C13.7184 8.14083 11.8995 8.88611 10.4092 10.3767C8.91869 11.8669 8.17341 13.6858 8.17341 15.8333C8.17341 17.9808 8.91869 19.7997 10.4092 21.29C11.8995 22.7806 13.7184 23.5258 15.8659 23.5258Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
header .util .login .login_open {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_980' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_980)'%3E%3Cpath d='M20 19.4871C18.3958 19.4871 17.0226 18.916 15.8804 17.7737C14.7379 16.6312 14.1667 15.2579 14.1667 13.6537C14.1667 12.0496 14.7379 10.6764 15.8804 9.53417C17.0226 8.39167 18.3958 7.82042 20 7.82042C21.6042 7.82042 22.9774 8.39167 24.1196 9.53417C25.2621 10.6764 25.8333 12.0496 25.8333 13.6537C25.8333 15.2579 25.2621 16.6312 24.1196 17.7737C22.9774 18.916 21.6042 19.4871 20 19.4871ZM7.5 32.1796V28.4742C7.5 27.6581 7.72167 26.9022 8.165 26.2067C8.60833 25.5111 9.20083 24.9764 9.9425 24.6025C11.5897 23.795 13.2515 23.1893 14.9279 22.7854C16.6043 22.3815 18.295 22.1796 20 22.1796C21.705 22.1796 23.3957 22.3815 25.0721 22.7854C26.7485 23.1893 28.4103 23.795 30.0575 24.6025C30.7992 24.9764 31.3917 25.5111 31.835 26.2067C32.2783 26.9022 32.5 27.6581 32.5 28.4742V32.1796H7.5ZM10 29.6796H30V28.4742C30 28.1367 29.9022 27.8242 29.7067 27.5367C29.5111 27.2494 29.2457 27.015 28.9104 26.8333C27.4743 26.1261 26.0101 25.5903 24.5179 25.2258C23.0254 24.8617 21.5194 24.6796 20 24.6796C18.4806 24.6796 16.9746 24.8617 15.4821 25.2258C13.9899 25.5903 12.5257 26.1261 11.0896 26.8333C10.7543 27.015 10.4889 27.2494 10.2933 27.5367C10.0978 27.8242 10 28.1367 10 28.4742V29.6796ZM20 16.9871C20.9167 16.9871 21.7014 16.6607 22.3542 16.0079C23.0069 15.3551 23.3333 14.5704 23.3333 13.6537C23.3333 12.7371 23.0069 11.9524 22.3542 11.2996C21.7014 10.6468 20.9167 10.3204 20 10.3204C19.0833 10.3204 18.2986 10.6468 17.6458 11.2996C16.9931 11.9524 16.6667 12.7371 16.6667 13.6537C16.6667 14.5704 16.9931 15.3551 17.6458 16.0079C18.2986 16.6607 19.0833 16.9871 20 16.9871Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}

/**** 아래로 스크롤 내릴 때 header가 사라짐 ****/

header.fixed.gnb_up {
    top: var(--header-h-m);
}

header.fixed.gnb_up.menu_over {
    top: 0;
}

/* ###############  header fixed 추가 #############*/

header.fixed,
header.menu_over {
    background-color: #fff;
    color: var(--tit-color);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}

header.fixed .logo a,
header.menu_over .logo a {
    background: url(../images/logo_w.png) no-repeat center center / contain;
    background-image: url(../images/logo.png);
}

header.fixed .util .lang .lang_open span::after,
header.menu_over .util .lang .lang_open span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_932' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_932)'%3E%3Cpath d='M19.9993 23.9977L11.666 16H28.3327L19.9993 23.9977Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");
}

header.fixed .util .search .search_open,
header.menu_over .util .search .search_open {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_923' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_923)'%3E%3Cpath d='M32.5709 34.295L22.103 23.8267C21.2697 24.5147 20.3113 25.0532 19.228 25.4421C18.1447 25.831 17.024 26.0254 15.8659 26.0254C13.0173 26.0254 10.6065 25.0392 8.63341 23.0667C6.66036 21.0942 5.67383 18.6839 5.67383 15.8358C5.67383 12.9881 6.66008 10.5769 8.63258 8.6025C10.6051 6.62833 13.0154 5.64125 15.8634 5.64125C18.7112 5.64125 21.1223 6.62778 23.0967 8.60083C25.0709 10.5739 26.058 12.9847 26.058 15.8333C26.058 17.0236 25.8583 18.1604 25.4588 19.2438C25.0591 20.3271 24.5259 21.2693 23.8592 22.0704L34.3272 32.5383L32.5709 34.295ZM15.8659 23.5258C18.0134 23.5258 19.8323 22.7806 21.3226 21.29C22.8131 19.7997 23.5584 17.9808 23.5584 15.8333C23.5584 13.6858 22.8131 11.8669 21.3226 10.3767C19.8323 8.88611 18.0134 8.14083 15.8659 8.14083C13.7184 8.14083 11.8995 8.88611 10.4092 10.3767C8.91869 11.8669 8.17341 13.6858 8.17341 15.8333C8.17341 17.9808 8.91869 19.7997 10.4092 21.29C11.8995 22.7806 13.7184 23.5258 15.8659 23.5258Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");
}

header.fixed .util .login .login_open,
header.menu_over .util .login .login_open {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_929' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_929)'%3E%3Cpath d='M20 19.4871C18.3958 19.4871 17.0226 18.916 15.8804 17.7737C14.7379 16.6312 14.1667 15.2579 14.1667 13.6537C14.1667 12.0496 14.7379 10.6764 15.8804 9.53417C17.0226 8.39167 18.3958 7.82042 20 7.82042C21.6042 7.82042 22.9774 8.39167 24.1196 9.53417C25.2621 10.6764 25.8333 12.0496 25.8333 13.6537C25.8333 15.2579 25.2621 16.6312 24.1196 17.7737C22.9774 18.916 21.6042 19.4871 20 19.4871ZM7.5 32.1796V28.4742C7.5 27.6581 7.72167 26.9022 8.165 26.2067C8.60833 25.5111 9.20083 24.9764 9.9425 24.6025C11.5897 23.795 13.2515 23.1893 14.9279 22.7854C16.6043 22.3815 18.295 22.1796 20 22.1796C21.705 22.1796 23.3957 22.3815 25.0721 22.7854C26.7485 23.1893 28.4103 23.795 30.0575 24.6025C30.7992 24.9764 31.3917 25.5111 31.835 26.2067C32.2783 26.9022 32.5 27.6581 32.5 28.4742V32.1796H7.5ZM10 29.6796H30V28.4742C30 28.1367 29.9022 27.8242 29.7067 27.5367C29.5111 27.2494 29.2457 27.015 28.9104 26.8333C27.4743 26.1261 26.0101 25.5903 24.5179 25.2258C23.0254 24.8617 21.5194 24.6796 20 24.6796C18.4806 24.6796 16.9746 24.8617 15.4821 25.2258C13.9899 25.5903 12.5257 26.1261 11.0896 26.8333C10.7543 27.015 10.4889 27.2494 10.2933 27.5367C10.0978 27.8242 10 28.1367 10 28.4742V29.6796ZM20 16.9871C20.9167 16.9871 21.7014 16.6607 22.3542 16.0079C23.0069 15.3551 23.3333 14.5704 23.3333 13.6537C23.3333 12.7371 23.0069 11.9524 22.3542 11.2996C21.7014 10.6468 20.9167 10.3204 20 10.3204C19.0833 10.3204 18.2986 10.6468 17.6458 11.2996C16.9931 11.9524 16.6667 12.7371 16.6667 13.6537C16.6667 14.5704 16.9931 15.3551 17.6458 16.0079C18.2986 16.6607 19.0833 16.9871 20 16.9871Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");
}


@media screen and (min-width:1341px) { /* pc만 */

                header .gnb .gnb_bg,
                header .gnb .gnb_util,
                header .gnb .gnb_open,
                header .gnb .gnb_close,
                header .gnb .gnb_wrap ul.depth1 > li.login_m {
                    display: none;
                }

                header .gnb .gnb_wrap ul.depth1 {
                    display: flex;
                }
                
                header .gnb .gnb_wrap ul.depth1 > li {
                    width: 173px;
                    text-align: center;
                    position: relative;
                }
                
                header .gnb .gnb_wrap ul.depth1 > li > a {
                    display: block;
                    line-height: var(--header-h);
                    height: var(--header-h);
                    font-size: 22px;
                    font-weight: var(--bold-weight);
                }

                
                header .gnb .gnb_wrap ul.depth1 > li.over > a {
                    color: var(--point-color);
                }

                header .gnb .gnb_wrap ul.depth1 > li.over > a > span {
                    position: relative;
                }

                header .gnb .gnb_wrap ul.depth1 > li.over > a > span::after {
                    z-index: 5;
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -47px;
                    width: 100%;
                    height: 3px;
                    background-color: var(--point-color);
                }

                
                header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
                    font-family: 'Pretendard';
                    position: absolute;
                    left: 0;
                    top: var(--header-h);
                    width: 100%;
                    padding: 30px 0 0 0;
                
                    display: none;
                }
                
                header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a {
                    display: block;
                    color: var(--tit-color);
                    line-height: 2;
                }
                
                header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a:hover {
                    font-weight: var(--bold-weight);
                    color: var(--point-color);
                }

                /* ############## menu_over 추가 ############### */

                header.menu_over::before {
                    z-index: -1;
                    content: "";
                    position: absolute; /* header를 기준으로 정렬 */
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 427px;
                    background-color: #fff;
                    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
                }

                header.menu_over::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: var(--header-h);
                    width: 100%;
                    height: 1px;
                    background: rgba(0, 0, 0, 0.2);
                }


                header.menu_over .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
                    display: block;
                }

} /* // @media - pc */

@media screen and (max-width: 1341px) and (min-width: 1025px) { /* 중간 */

    header .gnb .gnb_bg,
    header .gnb .gnb_util,
    header .gnb .gnb_open,
    header .gnb .gnb_close,
    header .gnb .gnb_wrap ul.depth1 > li.login_m {
        display: none;
    }

    header .logo a {
        width: 110px;
        height: 42px;
    }

    header .gnb .gnb_wrap ul.depth1 {
        display: flex;
    }
    
    header .gnb .gnb_wrap ul.depth1 > li {
        width: 140px;
        text-align: center;
        position: relative;
    }

    header .gnb .gnb_wrap ul.depth1 > li > a {
        display: block;
        line-height: var(--header-h);
        height: var(--header-h);
        font-size: 20px;
        font-weight: var(--bold-weight);
    }

    
    header .gnb .gnb_wrap ul.depth1 > li.over > a {
        color: var(--point-color);
    }

    header .gnb .gnb_wrap ul.depth1 > li.over > a > span {
        position: relative;
    }

    header .gnb .gnb_wrap ul.depth1 > li.over > a > span::after {
        z-index: 5;
        content: "";
        position: absolute;
        left: 0;
        bottom: -49px;
        width: 100%;
        height: 3px;
        background-color: var(--point-color);
    }

    
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
        font-family: 'Pretendard';
        position: absolute;
        left: 0;
        top: var(--header-h);
        width: 100%;
        padding: 30px 0 0 0;
        display: none;
    }
    
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a {
        display: block;
        color: var(--tit-color);
        line-height: 2;
    }
    
    header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a:hover {
        font-weight: var(--bold-weight);
        color: var(--point-color);
    }

    /* ############## menu_over 추가 ############### */

    header.menu_over::before {
        z-index: -1;
        content: "";
        position: absolute; /* header를 기준으로 정렬 */
        left: 0;
        top: 0;
        width: 100%;
        height: 427px;
        background-color: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    }

    header.menu_over::after {
        content: "";
        position: absolute;
        left: 0;
        top: var(--header-h);
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.2);
    }


    header.menu_over .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
        display: block;
    }

    header .util .lang .lang_open span {
        margin: 4px 25px 0 0;
    }
    
    header .util .lang .lang_open span::after {
        right: -29px;
        top: -2px;
        width: 30px;
        height: 30px;
    }
    
    
    header .util .search .search_open,
    header .util .login .login_open {
        width: 30px;
        height: 30px;
    }

}

@media screen and (max-width: 1140px) and (min-width: 1024px) { /*lang 삭제*/

    header .util .lang .lang_open span {
        display: none;
    }

}

@media screen and (max-width:1024px) {/* 모바일 */

                header {
                    padding: 0 0 0 20px;
                }

                header .logo a {
                    width: 74px;
                    height: 28px;
                }

                header .util {
                    display: none;
                }

                /* 모바일 아이콘 */
                header .gnb .gnb_open {
                    display: block;
                    width: var(--header-h);
                    height: var(--header-h);
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_21_1142' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_21_1142)'%3E%3Cpath d='M5.3125 8.75C5.04688 8.75 4.82427 8.6601 4.64469 8.48031C4.4649 8.30052 4.375 8.07781 4.375 7.81219C4.375 7.54635 4.4649 7.32375 4.64469 7.14437C4.82427 6.96479 5.04688 6.875 5.3125 6.875H24.6875C24.9531 6.875 25.1757 6.9649 25.3553 7.14469C25.5351 7.32448 25.625 7.54719 25.625 7.81281C25.625 8.07865 25.5351 8.30125 25.3553 8.48063C25.1757 8.66021 24.9531 8.75 24.6875 8.75H5.3125ZM5.3125 23.125C5.04688 23.125 4.82427 23.0351 4.64469 22.8553C4.4649 22.6755 4.375 22.4528 4.375 22.1872C4.375 21.9214 4.4649 21.6987 4.64469 21.5194C4.82427 21.3398 5.04688 21.25 5.3125 21.25H24.6875C24.9531 21.25 25.1757 21.3399 25.3553 21.5197C25.5351 21.6995 25.625 21.9222 25.625 22.1878C25.625 22.4536 25.5351 22.6763 25.3553 22.8556C25.1757 23.0352 24.9531 23.125 24.6875 23.125H5.3125ZM5.3125 15.9375C5.04688 15.9375 4.82427 15.8476 4.64469 15.6678C4.4649 15.488 4.375 15.2653 4.375 14.9997C4.375 14.7339 4.4649 14.5113 4.64469 14.3319C4.82427 14.1523 5.04688 14.0625 5.3125 14.0625H24.6875C24.9531 14.0625 25.1757 14.1524 25.3553 14.3322C25.5351 14.512 25.625 14.7347 25.625 15.0003C25.625 15.2661 25.5351 15.4888 25.3553 15.6681C25.1757 15.8477 24.9531 15.9375 24.6875 15.9375H5.3125Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
                }

                header .gnb .gnb_util {
                    display: none;
                    left: 20px;
                    top: 19px;
                    gap: 34px;
                    position: absolute; /* gnb_wrap을 기준으로 정렬 */
                }

                header .gnb .gnb_util .lang .lang_open,
                header .gnb .gnb_util .search .search_open {
                    padding: 0 30px 0 0;
                    position: relative;
                    color: var(--base-color);
                }
        
                header .gnb .gnb_util .lang .lang_open::before,
                header .gnb .gnb_util .search .search_open::before {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 3px;
                    width: 20px;
                    height: 20px;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_892' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_892)'%3E%3Cpath d='M9.9987 11.9988L5.83203 8H14.1654L9.9987 11.9988Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");                }

                header .gnb .gnb_util .search .search_open::before {
                    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_913' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_913)'%3E%3Cpath d='M16.2845 17.1475L11.0505 11.9133C10.6339 12.2574 10.1547 12.5266 9.61302 12.721C9.07135 12.9155 8.51101 13.0127 7.93198 13.0127C6.50767 13.0127 5.30226 12.5196 4.31573 11.5333C3.3292 10.5471 2.83594 9.34194 2.83594 7.91792C2.83594 6.49403 3.32906 5.28847 4.31531 4.30125C5.30156 3.31417 6.5067 2.82063 7.93073 2.82063C9.35462 2.82063 10.5602 3.31389 11.5474 4.30042C12.5345 5.28694 13.028 6.49236 13.028 7.91667C13.028 8.51181 12.9282 9.08021 12.7284 9.62188C12.5286 10.1635 12.262 10.6347 11.9286 11.0352L17.1626 16.2692L16.2845 17.1475ZM7.93198 11.7629C9.00573 11.7629 9.91517 11.3903 10.6603 10.645C11.4056 9.89986 11.7782 8.99042 11.7782 7.91667C11.7782 6.84292 11.4056 5.93347 10.6603 5.18833C9.91517 4.44306 9.00573 4.07042 7.93198 4.07042C6.85823 4.07042 5.94878 4.44306 5.20365 5.18833C4.45837 5.93347 4.08573 6.84292 4.08573 7.91667C4.08573 8.99042 4.45837 9.89986 5.20365 10.645C5.94878 11.3903 6.85823 11.7629 7.93198 11.7629Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");                }

                header.fixed .gnb .gnb_open {
                    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_82_66' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_82_66)'%3E%3Cpath d='M5.3125 8.75C5.04687 8.75 4.82427 8.6601 4.64469 8.48031C4.4649 8.30052 4.375 8.07781 4.375 7.81219C4.375 7.54635 4.4649 7.32375 4.64469 7.14437C4.82427 6.96479 5.04687 6.875 5.3125 6.875H24.6875C24.9531 6.875 25.1757 6.9649 25.3553 7.14469C25.5351 7.32448 25.625 7.54719 25.625 7.81281C25.625 8.07865 25.5351 8.30125 25.3553 8.48063C25.1757 8.66021 24.9531 8.75 24.6875 8.75H5.3125ZM5.3125 23.125C5.04687 23.125 4.82427 23.0351 4.64469 22.8553C4.4649 22.6755 4.375 22.4528 4.375 22.1872C4.375 21.9214 4.4649 21.6987 4.64469 21.5194C4.82427 21.3398 5.04687 21.25 5.3125 21.25H24.6875C24.9531 21.25 25.1757 21.3399 25.3553 21.5197C25.5351 21.6995 25.625 21.9222 25.625 22.1878C25.625 22.4536 25.5351 22.6763 25.3553 22.8556C25.1757 23.0352 24.9531 23.125 24.6875 23.125H5.3125ZM5.3125 15.9375C5.04687 15.9375 4.82427 15.8476 4.64469 15.6678C4.4649 15.488 4.375 15.2653 4.375 14.9997C4.375 14.7339 4.4649 14.5112 4.64469 14.3319C4.82427 14.1523 5.04687 14.0625 5.3125 14.0625H24.6875C24.9531 14.0625 25.1757 14.1524 25.3553 14.3322C25.5351 14.512 25.625 14.7347 25.625 15.0003C25.625 15.2661 25.5351 15.4888 25.3553 15.6681C25.1757 15.8477 24.9531 15.9375 24.6875 15.9375H5.3125Z' fill='%231B1B1B'/%3E%3C/g%3E%3C/svg%3E%0A");
                }
                /* 모바일 아이콘 -end- */

                header .gnb .gnb_wrap {
                    z-index: 10;
                    position: fixed;
                    right: -100%;
                    top: 0;
                    width: calc(100% - 51px);
                    height: 100%;
                    background-color: #fff;
                    color: var(--tit-color);
                    transition: 0.5s;
                    max-width: 450px;
                }

                header .gnb .gnb_wrap ul.depth1 {
                    margin: var(--header-h) 0 0 0;
                    padding: 0 20px;
                    height: calc(100% - var(--header-h));
                    overflow-y: auto;
                }

                        
                header .gnb .gnb_wrap ul.depth1 > li {
                    border-top: 1px solid rgba(0, 0, 0, 0.2);
                }

                header .gnb .gnb_wrap ul.depth1 > li > a {
                    display: block;
                    font-size: 20px;
                    font-weight: var(--bold-weight);
                    color: var(--tit-color);
                    line-height: var(--tit-line-height);
                    padding: 20px 0;
                    position: relative; /* after 정렬의 기준 */
                }

                header .gnb .gnb_wrap ul.depth1 > li.login_m > a {
                    font-size: 16px;
                    font-weight: 400;
                    text-align: center;
                    padding: 15px 10px 15px 50px;
                    color: #fff;
                    background: url(../images/login_\ mobile.jpg) no-repeat center center / cover;
                }

                header .gnb .gnb_wrap ul.depth1 > li.login_m > a::before {
                    content: "";
                    position: absolute;
                    left: 5%;
                    top: 25%;
                    width: 30px;
                    height: 30px;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_974' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_974)'%3E%3Cpath d='M5 20.9856V23.3653C5 23.4616 5.0401 23.5497 5.12031 23.6297C5.20031 23.7099 5.28844 23.75 5.38469 23.75H24.6153C24.7116 23.75 24.7997 23.7099 24.8797 23.6297C24.9599 23.5497 25 23.4616 25 23.3653V20.9856H5ZM5.38469 8.14906H8.84375C8.73958 7.96156 8.66188 7.76365 8.61063 7.55531C8.55938 7.34698 8.53375 7.12823 8.53375 6.89906C8.53375 6.02573 8.83625 5.28656 9.44125 4.68156C10.0462 4.07656 10.7854 3.77406 11.6587 3.77406C12.1827 3.77406 12.6674 3.91021 13.1128 4.1825C13.5582 4.45479 13.9469 4.79302 14.2788 5.19719L14.9759 6.13L15.6731 5.19719C15.9921 4.7774 16.3781 4.43521 16.8312 4.17063C17.2846 3.90625 17.7728 3.77406 18.2959 3.77406C19.1676 3.77406 19.9058 4.07656 20.5106 4.68156C21.1156 5.28656 21.4181 6.02573 21.4181 6.89906C21.4181 7.12823 21.3945 7.34698 21.3472 7.55531C21.2999 7.76365 21.2202 7.96156 21.1081 8.14906H24.6153C25.2468 8.14906 25.7812 8.36781 26.2188 8.80531C26.6562 9.24281 26.875 9.77729 26.875 10.4088V23.3653C26.875 23.9968 26.6562 24.5312 26.2188 24.9688C25.7812 25.4062 25.2468 25.625 24.6153 25.625H5.38469C4.75323 25.625 4.21875 25.4062 3.78125 24.9688C3.34375 24.5312 3.125 23.9968 3.125 23.3653V10.4088C3.125 9.77729 3.34375 9.24281 3.78125 8.80531C4.21875 8.36781 4.75323 8.14906 5.38469 8.14906ZM5 17.7644H25V10.4088C25 10.3125 24.9599 10.2244 24.8797 10.1444C24.7997 10.0642 24.7116 10.0241 24.6153 10.0241H17.7834L20.3366 13.5144L18.8412 14.5913L14.9759 9.34625L11.1106 14.5913L9.61531 13.5144L12.13 10.0241H5.38469C5.28844 10.0241 5.20031 10.0642 5.12031 10.1444C5.0401 10.2244 5 10.3125 5 10.4088V17.7644ZM11.6587 8.14906C12.0129 8.14906 12.3098 8.02927 12.5494 7.78969C12.789 7.5501 12.9087 7.25323 12.9087 6.89906C12.9087 6.5449 12.789 6.24802 12.5494 6.00844C12.3098 5.76885 12.0129 5.64906 11.6587 5.64906C11.3046 5.64906 11.0077 5.76885 10.7681 6.00844C10.5285 6.24802 10.4087 6.5449 10.4087 6.89906C10.4087 7.25323 10.5285 7.5501 10.7681 7.78969C11.0077 8.02927 11.3046 8.14906 11.6587 8.14906ZM18.2931 8.14906C18.6473 8.14906 18.9442 8.02927 19.1838 7.78969C19.4233 7.5501 19.5431 7.25323 19.5431 6.89906C19.5431 6.5449 19.4233 6.24802 19.1838 6.00844C18.9442 5.76885 18.6473 5.64906 18.2931 5.64906C17.939 5.64906 17.6421 5.76885 17.4025 6.00844C17.1629 6.24802 17.0431 6.5449 17.0431 6.89906C17.0431 7.25323 17.1629 7.5501 17.4025 7.78969C17.6421 8.02927 17.939 8.14906 18.2931 8.14906Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
                }

                header .gnb .gnb_wrap ul.depth1 > li > a::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 25px;
                    width: 12px;
                    height: 12px;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_900' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_900)'%3E%3Cpath d='M5.99976 9.67701C5.87926 9.67701 5.76709 9.65776 5.66326 9.61926C5.55942 9.58076 5.46067 9.51476 5.36701 9.42126L0.872758 4.92701C0.734425 4.78851 0.663591 4.61443 0.660258 4.40476C0.657091 4.19526 0.727925 4.01801 0.872758 3.87301C1.01776 3.72818 1.19342 3.65576 1.39976 3.65576C1.60609 3.65576 1.78176 3.72818 1.92676 3.87301L5.99976 7.94626L10.0728 3.87301C10.2113 3.73468 10.3853 3.66385 10.595 3.66051C10.8045 3.65735 10.9818 3.72818 11.1268 3.87301C11.2716 4.01801 11.344 4.19368 11.344 4.40001C11.344 4.60635 11.2716 4.78201 11.1268 4.92701L6.63251 9.42126C6.53884 9.51476 6.44009 9.58076 6.33626 9.61926C6.23242 9.65776 6.12026 9.67701 5.99976 9.67701Z' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A");
                }

                header .gnb .gnb_wrap ul.depth1 > li.open > a::after {
                    transform: rotate(180deg);
                }

                header .gnb .gnb_wrap ul.depth1 > li.login_m > a::after {
                    display: none;
                }

                header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
                    background-color: #EFECEC;
                    padding: 27px 0 27px 20px;
                    display: none;
                }

                header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a {
                    display: block;
                    line-height: 2;
                    color: var(--point-color);
                }


                header .gnb .gnb_close {
                    display: none;
                    position: absolute; /* gnb_wrap 기준으로 정렬 */
                    right: 0;
                    top: 0;
                    width: var(--header-h);
                    height: var(--header-h);
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_21_1507' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_21_1507)'%3E%3Cpath d='M14.9999 16.3178L8.65864 22.6594C8.48552 22.8323 8.26791 22.9208 8.00583 22.925C7.74396 22.929 7.52239 22.8404 7.34114 22.6594C7.1601 22.4781 7.06958 22.2585 7.06958 22.0006C7.06958 21.7427 7.1601 21.5231 7.34114 21.3419L13.6827 15.0006L7.34114 8.65938C7.16823 8.48625 7.07968 8.26865 7.07552 8.00656C7.07156 7.74469 7.1601 7.52313 7.34114 7.34188C7.52239 7.16083 7.74198 7.07031 7.99989 7.07031C8.25781 7.07031 8.47739 7.16083 8.65864 7.34188L14.9999 13.6834L21.3411 7.34188C21.5143 7.16896 21.7319 7.08042 21.994 7.07625C22.2558 7.07229 22.4774 7.16083 22.6586 7.34188C22.8397 7.52313 22.9302 7.74271 22.9302 8.00063C22.9302 8.25854 22.8397 8.47813 22.6586 8.65938L16.3171 15.0006L22.6586 21.3419C22.8316 21.515 22.9201 21.7326 22.9243 21.9947C22.9282 22.2566 22.8397 22.4781 22.6586 22.6594C22.4774 22.8404 22.2578 22.9309 21.9999 22.9309C21.742 22.9309 21.5224 22.8404 21.3411 22.6594L14.9999 16.3178Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E%0A");
                }

                header .gnb .gnb_bg {
                    display: none;
                    position: fixed;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.58);
                }

                
        /*   메뉴가 열렸을 때  */

                header.menu_open .gnb .gnb_util {
                    display: flex; /* display:none 으로 숨긴 걸 나타내기 */
                    font-weight: var(--bold-weight)
                }

                header.menu_open .gnb .gnb_wrap {
                    right: 0;
                }

                header.menu_open .gnb .gnb_close {
                    display: block;
                }

                header.menu_open .gnb .gnb_bg {
                    display: block;
                    animation-name: gnb_bg;
                    animation-duration: 0.5s;
                    animation-fill-mode: forwards;
                    animation-iteration-count: 1;
                }

                @keyframes gnb_bg {
                    0% { opacity: 0; }
                    100% { opacity: 1; }
                }




}

@media screen and (max-width:425px) {
    
        header .gnb .gnb_wrap ul.depth1 > li.login_m > a {
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            padding: 15px 10px 15px 50px;
        }
}

@media screen and (max-width:345px) {
    
    header .gnb .gnb_wrap ul.depth1 > li.login_m > a > br {
        display: none;
    }
}




.visual {
    position: relative; /* visual_item 정렬의 기준 */
}

.visual .swiper-slide .photo {
    overflow: hidden;
    height: 100dvh; /* 모바일까지 고려한 브라우저 높이 100% */
    min-height: 700px; /* 최소높이 700px... */
}

.visual .swiper-slide .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual .visual_item {
    z-index: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.visual .visual_item .tit_wrap {
    color: #fff;
    text-align: center;
}

.visual .visual_item .tit_wrap h3 {
    font-size: var(--visual-font-size);
    font-weight: var(--bold-weight);
    margin: 0 0 36px 0;
}

.visual .visual_item .ctrl_wrap button {
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}

.visual .visual_item .ctrl_wrap button.button-stop {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_999' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_999)'%3E%3Cpath d='M17.5 22.5V7.5H21.875V22.5H17.5ZM8.125 22.5V7.5H12.5V22.5H8.125Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");

}

.visual .visual_item .ctrl_wrap button.button-play {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_1003' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect x='30' y='30' width='30' height='30' transform='rotate(-180 30 30)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_1003)'%3E%3Cpath d='M10.6248 7.37999L22.5957 15L10.6248 22.62L10.6248 7.37999Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    display: none;
}

.visual .main_reservation {
    z-index: 1;
    position: absolute;
    bottom: 58px;
    left: 0;
    width: 100%;
    height: 96px;
}
.visual .main_reservation .wrapper {
    width: 100%;
    max-width: 1920px;
    padding: 0 60px;
}

.visual .main_reservation .reserv_box {
    font-family: 'Pretendard';
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 1000px;
    height: 96px;
    background-color: #fff;
}

input {
    border-width: inherit;
    border-style: none;
    border-color: inherit;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    opacity: 1; /* spinner 보이게 */
}

.visual .reserv_box {
    padding: 0 155px;
}

.visual .reserv_box label {
    font-weight: var(--bold-weight);
    color: var(--point-color);
}

.visual .reserv_box input {
    color: var(--gray-color);
    font-size: var(--default-font-size);
}

.visual .reserv_box .date {
    width: 240px;
    position: relative;
}

.visual .reserv_box .date h2 {
    font-weight: var(--bold-weight);
    color: var(--point-color);
}

.visual .reserv_box .date input {
    font-size: 17px;
    background-color: inherit;
}

.visual .reserv_box .date::after {
    content: "";
    position: absolute;
    right: 0;
    top: 23px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_1045' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_1045)'%3E%3Cpath d='M8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V2H8V4H16V2H18V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z' fill='%237E6956'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.visual .reserv_box .person {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.visual .reserv_box .rooms,
.visual .reserv_box .adult,
.visual .reserv_box .junior,
.visual .reserv_box .kid {
    display: flex;
    flex-direction: column;
}

.visual .reserv_box .code {
    width: 200px;
}

.visual .reserv_box .adult,
.visual .reserv_box .code {
    display: flex;
    flex-direction: column;
}

.visual .reserv_box .btn_eservation a {
    display: inline-block;
    color: #fff;
    font-weight: var(--bold-weight);
    padding: 10px 100px;
    background-color: var(--point-color);
}

@media screen and (max-width:1545px) {
    .visual .reserv_box {
        padding: 0 30px;
    }
}

@media screen and (max-width:1380px) {
    .visual .main_reservation .wrapper {
        margin: 0;
    }
}

@media screen and (max-width:1341px) {

    .visual .visual_item .tit_wrap h3 {
        margin: 0 0 15px 0;
    }

    .visual .reserv_box .btn_eservation a {
        padding: 10px 50px;
    }
}

@media screen and (max-width:1024px) { /* 모바일 */

    .visual .swiper-slide .photo {
        height: 800px;
    }

    .visual .visual_item {
        top: 20%;
        width: 100%;
    }
    
    .visual .visual_item .tit_wrap {
        color: #fff;
        text-align: center;
    }
    
    .visual .visual_item .tit_wrap h3 {
        margin: 0 0 20px 0;
    }
    
    .visual .visual_item .ctrl_wrap button {
        width: 24px;
        height: 24px;
    }
    
    .visual .visual_item .ctrl_wrap button.button-stop {
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_68_2931' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Crect width='18' height='18' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_68_2931)'%3E%3Cpath d='M10.5 13.5V4.5H13.125V13.5H10.5ZM4.875 13.5V4.5H7.5V13.5H4.875Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");    
    }
    
    .visual .visual_item .ctrl_wrap button.button-play {
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_172_22' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Crect x='18' y='18' width='18' height='18' transform='rotate(-180 18 18)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_172_22)'%3E%3Cpath d='M6.37408 4.42799L13.5566 8.99999L6.37408 13.572L6.37408 4.42799Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");        display: none;
    }

    .visual .main_reservation {
        z-index: 1;
        position: absolute;
        bottom: 58px;
        left: 0;
        width: 100%;
        height: 320px;
    }
    .visual .main_reservation .wrapper {
        padding: 0 20px;
        margin: 0 auto;
    }
    
    .visual .main_reservation .reserv_box {
        min-width: auto;
        flex-direction: column;
        text-align: center;
        height: 320px;
    }

    input {
        text-align: center;
    }

    .visual .reserv_box {
        padding: 0;
    }

    .visual .reserv_box .date::after {
        right: 20px;
        top: 37px;
    }

    .visual .reserv_box .date,
    .visual .reserv_box .rooms,
    .visual .reserv_box .person,
    .visual .reserv_box .code {
        padding: 15px 0 11px 0;
    }

    
    .visual .reserv_box .date,
    .visual .reserv_box .rooms,
    .visual .reserv_box .person {
        width: 100%;
    }
    
    .visual .reserv_box .date input {
        font-size: 16px;
    }
    
    .visual .reserv_box .adult,
    .visual .reserv_box .junior,
    .visual .reserv_box .kid {
        width: 100%;
    }
    
    .visual .reserv_box .code {
        width: 100%;
    }
    
    .visual .reserv_box .rooms,
    .visual .reserv_box .adult,
    .visual .reserv_box .junior,
    .visual .reserv_box .kid,
    .visual .reserv_box .code {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .visual .reserv_box .btn_eservation {
        width: 100%;
    }
    
    .visual .reserv_box .btn_eservation a {
        width: 100%;
        padding: 10px 0;
    }

    .visual .reserv_box .rooms,
    .visual .reserv_box .person,
    .visual .reserv_box .code {
        border-top: 1px solid #CCCCCC;
    }
}


.pakege {
    margin: 170px 0 170px 0;
    position: relative;
}

.pakege .tit {
    margin: 0 0 100px 0;
}

.pakege .tit h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--bold-weight);
}

.pakege .tit h2 span {
    color: var(--point-color);
}

.pakege .list {
    position: relative;
    left: calc(50% - 630px);
    width: calc(50% + 630px - 24px);
}

.pakege .list_ctrl {
    display: flex;
    gap: 26px;
    position: absolute;
    right: calc(50% - 630px);
    top: 24px;
    /* margin: 0 60px 0 0; */
}

.pakege .list_ctrl .btn_prev,
.pakege .list_ctrl .btn_next,
.pakege .list_ctrl .more {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_1076' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='50' height='50'%3E%3Crect x='50' y='50' width='50' height='50' transform='rotate(-180 50 50)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_1076)'%3E%3Cpath d='M14.418 23.9582L39.582 23.9583L39.582 26.0416L14.418 26.0416L26.4852 38.1088L24.9987 39.5833L10.4154 24.9999L24.9987 10.4166L26.4852 11.8911L14.418 23.9582Z' fill='%237E6956'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.pakege .list_ctrl .btn_next {
    transform: rotate(180deg);
}

.pakege .list_ctrl .more {
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_1082' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='50' height='50'%3E%3Crect width='50' height='50' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_1082)'%3E%3Cpath d='M23.957 41.6666V26.0416H8.33203V23.9583H23.957V8.33325H26.0404V23.9583H41.6654V26.0416H26.0404V41.6666H23.957Z' fill='%237E6956'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.pakege .list ul .swiper-slide {
    width: 404px;
}

.pakege .list ul .swiper-slide a {
    display: block;
}

.pakege .list ul .swiper-slide a .photo {
    overflow: hidden;
    height: 308px;
}

.pakege .list ul .swiper-slide a .photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.pakege .list ul .swiper-slide a h3 {
    font-size: var(--h4-font-size);
    font-weight: var(--bold-weight);
    color: var(--tit-color);
    margin: 23px 0 0 0;
}

.pakege .list ul .swiper-slide a span {
    display: block;
    /* 한줄제한 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pakege .list ul .swiper-slide a span,
.pakege .list ul .swiper-slide a strong {
    font-family: 'Pretendard';
}

.pakege .list ul .swiper-slide a strong {
    display: block;
    margin: 25px 0 0 0;
    color: #979797;
}

@media screen and (max-width:1380px){ /* wrapper의 제한이 사라지는 사이즈 */

    .pakege .list {
        left: 60px;
        width: calc(100% - 120px); /* 양옆의 60px을 뺀다 */
    }

    .pakege .list_ctrl {
        right: 60px;
    }

    

} /* @media */


@media screen and (max-width:1024px){

    .pakege .list ul .swiper-slide {
        width: 300px;
    }

    .pakege .list_ctrl {
        top: 14px;
    }
}

@media screen and (max-width:768px){
        .pakege {
            margin: 100px 0 100px 0;
        }
        
        .pakege .tit {
            margin: 0 0 32px 0;
        }

        .pakege .tit h2 {
            margin: 0 0 12px 0;
            padding: 0 70px 0 0;
        }

        .pakege .list {
            left: 20px;
            width: calc(100% - 40px);
        }
        
        .pakege .list_ctrl {
            display: block;
            top: 5px;
            margin: 0;
        }
        
        .pakege .list_ctrl .btn_prev,
        .pakege .list_ctrl .btn_next{
            display: none;
        }
        
        .pakege .list_ctrl .more {
            display: block;
            background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_1082' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='50' height='50'%3E%3Crect width='50' height='50' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_1082)'%3E%3Cpath d='M23.957 41.6666V26.0416H8.33203V23.9583H23.957V8.33325H26.0404V23.9583H41.6654V26.0416H26.0404V41.6666H23.957Z' fill='%237E6956'/%3E%3C/g%3E%3C/svg%3E%0A");
            margin: 0 20px 0 20px;
        }
        
        .pakege .list ul .swiper-slide {
            width: 264px;
        }
        
        .pakege .list ul .swiper-slide a .photo {
            height: 202px;
        }
        
        .pakege .list ul .swiper-slide a h3 {
            margin: 19px 0 0 0;
        }
    
}


.event {
    margin: 0 0 170px 0;
}

.event .inner {
    width: calc(50% + 630px);
    display: flex;
    flex-direction: row-reverse;
}

@media screen and (max-width:1380px) {
    .event .inner {
        width: 100%;
    }
}

.event .tit {
    padding: 135px 0 0 0;
    width: 609px;
    text-align: center;
}

.event .tit .txt h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--bold-weight);
}

.event .tit .txt h2 span {
    color: var(--point-color);
}

.event .tit .more a {
    display: inline-block;
    padding: 20px 99px;
    margin: 93px 0 0 0;
    border: 1px solid var(--point-color);
    color: var(--point-color);
}

.event .tit .more a:hover {
    border: 1px solid var(--point-color);
    background-color: var(--point-color);
    color: #fff;
}

.event .list {
    width: calc(100% - 609px);
}

.event .list ul {
    display: flex;
    gap: 9px;
}

.event .list ul li .photo {
    overflow: hidden;
    height: 563px;
}

.event .list ul li .photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


@media screen and (max-width:1024px){

                .event {
                    margin: 0 0 170px 0;
                }
                
                .event .inner {
                    width: auto;
                    margin: 0 20px;
                    flex-direction: column;
                    align-items: center;
                }
                
                .event .tit {
                    padding: 0;
                    width: auto;
                    margin: 0 0 30px 0;
                }

                .event .tit .txt p {
                    margin: 12px 0 0 0;
                }
                
                .event .tit .more a {
                    padding: 10px 40px;
                    margin: 19px 0 0 0;
                }
                
                .event .list {
                    width: 100%;
                }
                
                .event .list ul {
                    display: block;
                }
                                
                .event .list ul li {
                    margin-bottom: 3px;
                }
                
                .event .list ul li .photo {
                    height: 87px;
                }
                
                

}

@media screen and (max-width: 764px) {
    .event {
        margin: 0 0 100px 0;
    }
}


.room {
    margin: 0 0 170px 0;
    position: relative; /* more 기준 */
}

.room .tit {
    margin: 0 0 66px 0;
}

.room .tit .txt h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--bold-weight);
}

.room .tit .txt h2 span {
    color: var(--point-color);
}

.room .more {
    width: 50px;
    height: 50px;
    position: absolute;
    right: calc(50% - 630px);
    top: 24px;
    /* margin: 0 60px 0 0; */
}

.room .more a {
    display: block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_76_1114' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='50' height='50'%3E%3Crect width='50' height='50' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_76_1114)'%3E%3Cpath d='M23.957 41.6666V26.0416H8.33203V23.9583H23.957V8.33325H26.0404V23.9583H41.6654V26.0416H26.0404V41.6666H23.957Z' fill='%237E6956'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.room .list .swiper-wrapper {
    flex-direction: column;
}

@media screen and (max-width:1380px){
    .room .more {
        right: 60px;
    }
}

@media screen and (min-width:1025px){

    .room .list ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 198px;
        border-top: 1px solid #D9D9D9;
    
    }
    
    .room .list ul li.over {
        border-color: transparent;
        color: #fff;
    }
    
    .room .list ul li.over {
        background-image: url(../images/room_01.jpg);
    }
    
    .room .list ul li.super.over {
        background-image: url(../images/room_02.jpg);
    }
    
    .room .list ul li.deluxe.over {
        background-image: url(../images/room_03.jpg);
    }
    
    .room .list ul li.suite.over {
        background-image: url(../images/room_04.jpg);
    }
    
    
    .room .list ul li a {
        display: block;
    }
    .room .list .room_type {
        display: flex;
        gap: 30px;
        margin: 0 0 25px 0;
    }
    .room .list .room_type strong {
        font-size: var(--h3-font-size);
        font-weight: var(--bold-weight);
    }
    
    .room .list .room_type span {
        padding: 25px 0 0 0;
    }
    
    .room .list .room_sub {
        display: flex;
        font-weight: 700;
        gap: 47px;
    }
    
    .room .list .room_sub span {
        position: relative;
    }
    
    .room .list .room_sub span::after {
        content: "";
        position: absolute;
        right: -19px;
        top: 7px;
        width: 1px;
        height: 12px;
        background-color: #D9D9D9;
    }
    
    .room .list .room_sub span:last-child::after {
        display: none;
    }

    /* .room .more {
        margin: 0 20px 0 0;
    } */

    
}

@media screen and (max-width:1024px){ /* 모바일 */

    .room .list .swiper-wrapper {
        flex-direction: row;
    }

    .room .tit {
        margin: 0 0 40px 0;
    }

    .room .tit .txt h2 {
        padding: 0 70px 0 0;
        margin: 0 0 12px 0;
    }

    .room .list ul li a {
        display: block;
        position: relative; /* before */
        height: 270px; /* ############################*/
    }

    .room .list ul li a::before {
        z-index: -1;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 183px;
        background-image: url(../images/room_m_01.jpg);
        background-repeat: no-repeat;
        background-position: center center;
    }

    .room .list ul li.super a::before {
        background-image: url(../images/room_m_02.jpg);
    }

    .room .list ul li.deluxe a::before {
        background-image: url(../images/room_m_03.jpg);
    }

    .room .list ul li.suite a::before {
        background-image: url(../images/room_m_04.jpg);
    }

    .room .list .room_type {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0 0 13px 0;
        color: var(--tit-color);
    }
    .room .list .room_type strong {
        font-size: var(--h3-font-size);
        font-weight: var(--bold-weight);
    }
    
    .room .list .room_type span {
        padding: 8px 0 0 0;
    }

    .room .list .room_type,
    .room .list .room_sub {
        content: "";
        position: absolute;
        top: 195px;
        left: 0;
    }

    .room .list .room_sub {
        top: 250px;
        display: flex;
        gap: 40px;
    }

    .room .list .room_sub span {
        position: relative;
        font-weight: var(--bold-weight)
    }

    .room .list .room_sub span::after {
        content: "";
        position: absolute;
        right: -19px;
        top: 7px;
        width: 1px;
        height: 12px;
        background-color: #D9D9D9;
    }
    
    .room .list .room_sub span:last-child::after {
        display: none;
    }

    .room .more {
        margin: 0 20px;
        top: 4px;
    }
    
}


.other .tit {
    margin: 0 0 76px 0;
}

.other .tit h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--bold-weight);
}

.other .tit h2 span {
    color: var(--point-color);
}

@media screen and (min-width:1025px) {

    .other .list {
        background: url(../images/facilities_01.jpg) no-repeat center center / cover;
        height: 520px;
        transition: 0.5s;
    }

    .other .list[data-bg="bg1"] {
        background-image: url(../images/facilities_01.jpg);
    }

    .other .list[data-bg="bg2"] {
        background-image: url(../images/facilities_02.jpg);
    }

    .other .list[data-bg="bg3"] {
        background-image: url(../images/facilities_03.jpg);
    }

    .other .list[data-bg="bg4"] {
        background-image: url(../images/facilities_04.jpg);
    }

    .other .list[data-bg="bg5"] {
        background-image: url(../images/facilities_05.jpg);
    }

    .other .list[data-bg="bg6"] {
        background-image: url(../images/facilities_06.jpg);
    }

    .other .list[data-bg="bg7"] {
        background-image: url(../images/facilities_07.jpg);
    }

    .other .list ul {
        height: 520px;
        display: flex;
    }
    
    .other .list ul li {
        position: relative;
        float: left;
        height: 100%;
        color: #fff;
        text-align: center;
        z-index: 10;
    
        transition: all, 0.5s linear;
    }
    
    .other .list ul li:not(.on)::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 64px;
        width: 38px;
        height: 7px;
        background-color: #fff;
    }
    
    .other .list ul li:not(.on) .txt h3 {
        position: absolute;
        transform: rotate(90deg);
        left: -89px;
        top: 161px;
        width: 300px;
        height: auto;
        font-size: var(--h4-font-size);
        font-weight: var(--bold-weight);
        text-align: start;
    }

    .other .list ul li.on .txt .sub {
        width: 480px;
        overflow: hidden;
    }
    
    /* li-on 추가 */
    
    .other .list ul li.on .txt {
        margin: 109px 0 0 0;
        position: relative;
    }

    .other .list ul li.on .txt::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 80px;
        width: 1px;
        height: 51px;
        background: #fff;
    }

    .other .list ul li.on .txt .tit_txt {
        height: 60px;
        overflow: hidden;
    }
    
    .other .list ul li.on .txt h3 {
        font-size: var(--h3-font-size);
        font-weight: var(--bold-weight);
        position: relative;
        bottom: -100%;
        animation: scroll-up 0.8s ease-in-out forwards;
    }
    
    /* .other .list ul li.on .txt h3::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -70px;
        width: 1px;
        height: 51px;
        background: #fff;
    } */

    .other .list ul li.on .txt .sub_txt {
        height: 150px;
        overflow: hidden;
        margin: 110px 0 0 0;
    }

    .other .list ul li.on .txt .sub_txt p,
    .other .list ul li.on .txt .sub_txt .btn {
        position: relative;
        bottom: -100%;
        animation: scroll-up 0.8s ease-in-out forwards;
    }

    @keyframes scroll-up {
        from {
            bottom: -100%;
            }
        to {
            bottom: 0%;
        }
    }
    
    .other .list ul li.on .btn a {
        display: inline-block;
        margin: 33px 0 0 0;
        padding: 14px 70px;
        background: var(--point-color);
    }
    
    .other .list ul li.on {
        flex: 0 1 57%;
    }
    
    .other .list ul li:not(.on) {
        flex: 1 1 0%;
        border-left: 3px solid #fff;
        background: rgba(126,105,86, 0.8);
        cursor: pointer;
    }
    
    .other .list ul li:not(.on) .txt p,
    .other .list ul li:not(.on) .txt .btn {
        display: none;
    }
    
}

@media screen and (max-width: 1341px) and (min-width: 1025px) {

    .other .list ul li:not(.on) .txt h3 {
        left: -104px;
    }

}

@media screen and (max-width:1024px){ 

    .other .tit {
        margin: 0 0 30px 0;
    }

    .other .tit h2 {
        margin: 0 0 12px 0;
    }

    .other ul li {
        display: flex;
        flex-direction: column;
    }

    .other ul li .txt {
        margin: 4px 0 0 0;
        padding: 14px 0;
        background-color: #EFECEC;
        position: relative;
        transition: 0.3s;
    }

    .other ul li .txt:hover {
        background-color: var(--point-color);
    }

    .other ul li .txt::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 13px;
        width: 30px;
        height: 30px;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_68_2974' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_68_2974)'%3E%3Cpath d='M21.3484 15.625H6.25V14.375H21.3484L14.1081 7.13469L15 6.25L23.75 15L15 23.75L14.1081 22.8653L21.3484 15.625Z' fill='%237E6956'/%3E%3C/g%3E%3C/svg%3E%0A");
    }

    .other ul li .txt:hover::after {
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_232_2' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_232_2)'%3E%3Cpath d='M21.3484 15.625H6.25V14.375H21.3484L14.1081 7.13469L15 6.25L23.75 15L15 23.75L14.1081 22.8653L21.3484 15.625Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    }

    .other ul li .txt h3 {
        margin: 0 0 0 20px;
        font-size: var(--h4-font-size);
        font-weight: var(--bold-weight);
        color: var(--tit-color);
        position: relative;
    }

    .other ul li .txt:hover h3 {
        color: #fff;
    } 

    .other ul li .txt p,
    .other dl .photo {
        display: none;
    }
    .other ul li .txt .btn a {
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        color: transparent;
        display: block;
        width: 100%;
        height: 100%;
    }

}

footer {
    font-family: 'Pretendard';
    padding: 25px 0 72px 0;
    background-color: #262222;
    color: rgba(255, 255, 255, 0.8);
}

footer .f_group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 25px 0;
}

footer .f_group .f_nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 44px;
}

footer .f_group .sns ul {
    display: flex;
    gap: 19px;
}

footer .f_group .sns ul li a {
    display: block;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    position: relative;
}

footer .f_group .sns ul li a::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 16px;
    height: 17px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

footer .f_group .sns ul li.kakao a::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_76_1176)'%3E%3Cpath d='M8.00076 0C3.58222 0 0 3.37733 0 7.54347C0 10.0049 1.24993 12.189 3.1837 13.566V16.8759C3.1837 16.9234 3.20936 16.9663 3.25012 16.9862C3.26823 16.9954 3.28786 17 3.30597 17C3.33164 17 3.35579 16.9923 3.37692 16.977L6.24059 14.9016C6.80668 15.0211 7.39542 15.0854 7.99925 15.0854C12.4178 15.0854 16 11.7081 16 7.54194C16 3.3758 12.4178 0 8.00076 0ZM5.61261 9.55915C6.4006 9.55915 7.07388 9.04144 7.34258 8.31084H8.55024C8.24531 9.72304 7.0467 10.7784 5.61261 10.7784C3.94905 10.7784 2.59949 9.3585 2.59949 7.60627C2.59949 5.85404 3.94905 4.43418 5.61261 4.43418C7.0467 4.43418 8.24531 5.4895 8.55024 6.9017H7.34258C7.07388 6.1711 6.4006 5.65339 5.61261 5.65339C4.5876 5.65339 3.75734 6.52798 3.75734 7.60627C3.75734 8.68457 4.5876 9.56068 5.61261 9.56068V9.55915ZM13.402 10.7784H12.2789V7.97847C12.2789 7.64303 12.2155 7.40869 12.0902 7.28156C11.9649 7.15596 11.7838 7.09163 11.5528 7.09163C11.4199 7.09163 11.2916 7.12073 11.1724 7.1774C11.0531 7.23408 10.9474 7.31679 10.8584 7.424C10.7678 7.53122 10.6953 7.66601 10.6425 7.82224C10.5897 7.98 10.5625 8.16074 10.5625 8.36138V10.7784H9.43938V4.30859H10.5716V6.75007C10.6969 6.62141 10.8478 6.50653 11.0199 6.41157C11.2509 6.28444 11.5135 6.22011 11.8034 6.22011C12.3242 6.22011 12.7257 6.37174 12.9975 6.67042C13.2677 6.96756 13.405 7.424 13.405 8.02442V10.7784H13.402Z' fill='white' fill-opacity='0.4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_76_1176'%3E%3Crect width='16' height='17' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

footer .f_group .sns ul li.insta a::before {
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7357 3.17676C12.2191 3.17676 11.7969 3.59899 11.7969 4.11556C11.7969 4.63212 12.2191 5.05436 12.7357 5.05436C13.2522 5.05436 13.6745 4.63212 13.6745 4.11556C13.6745 3.59899 13.2522 3.17676 12.7357 3.17676Z' fill='white' fill-opacity='0.4'/%3E%3Cpath d='M8.56827 4.38135C6.39421 4.38135 4.62891 6.15114 4.62891 8.32071C4.62891 10.4903 6.3987 12.2601 8.56827 12.2601C10.7378 12.2601 12.5076 10.4903 12.5076 8.32071C12.5076 6.15114 10.7378 4.38135 8.56827 4.38135ZM8.56827 10.8451C7.17579 10.8451 6.04384 9.71318 6.04384 8.32071C6.04384 6.92823 7.17579 5.79628 8.56827 5.79628C9.96074 5.79628 11.0927 6.92823 11.0927 8.32071C11.0927 9.71318 9.96074 10.8451 8.56827 10.8451Z' fill='white' fill-opacity='0.4'/%3E%3Cpath d='M11.6937 16.3203H5.30629C2.65609 16.3203 0.5 14.1642 0.5 11.514V5.1266C0.5 2.4764 2.65609 0.320312 5.30629 0.320312H11.6937C14.3439 0.320312 16.5 2.4764 16.5 5.1266V11.514C16.5 14.1642 14.3439 16.3203 11.6937 16.3203ZM5.30629 1.82509C3.48709 1.82509 2.00477 3.3074 2.00477 5.1266V11.514C2.00477 13.3332 3.48709 14.8155 5.30629 14.8155H11.6937C13.5129 14.8155 14.9952 13.3332 14.9952 11.514V5.1266C14.9952 3.3074 13.5129 1.82509 11.6937 1.82509H5.30629Z' fill='white' fill-opacity='0.4'/%3E%3C/svg%3E%0A");
}

footer .f_map {
    padding: 54px 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

footer .f_map ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
}

footer .f_map ul li {
    position: relative;
}

footer .f_map ul li::after {
    content: "";
    position: absolute;
    right: -19px;
    top: 6px;
    width: 1px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
}

footer .f_map ul li:last-child::after {
    display: none;
}

footer .f_info {
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
    margin: 37px 0 25px 0;
}

footer .f_info strong {
    font-weight: var(--bold-weight);
}

footer .copyright {
    color: rgba(255, 255, 255, 0.4);
}

footer .design {
    text-align: right;
}

@media screen and (max-width:768px){

    footer {
        padding: 25px 0 50px 0;
    }
    
    footer .f_group {
        display: block;
        margin: 0 0 23px 0;
    }

    footer .f_group .sns {
        margin: 23px 0 0 0;
    }
    
    footer .f_map {
        padding: 36px 0 0 0;
    }

    footer .f_info {
        margin: 35px 0 35px 0;
    }

    footer .design {
        margin: 35px 0 0 0;
    }

}