.footer_main{
    padding: 15px 3% 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: var(--colormain1);
}

.footer_top{
    width: clamp(0px, 90%, 1375px);
    margin: auto;
    padding: calc(1vw + 30px) 0 ;
    text-align: center;
    position: relative;
    z-index: 1;
}
.footer_top::before{
    content: '';
    width: clamp(500px, 70vw, 1300px);
    height: 100%;
    background: url(../images/footer_top_bg.svg) no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    bottom: -20px;
    right: 0%;
    z-index: -1;
    pointer-events: none;
}
.footer_top > h4{
    font-size: var(--f24);
    color: var(--colorsub3);
    font-weight: normal;
    margin: 0 0 30px;
}
.footer_top > h4 s{
    display: inline-block;
    font-size: var(--f24);
    color: var(--colorsub3);
    font-weight: normal;
}
.footer_top section{
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.footer_top section a{
    width: 100%;
    max-width: 175px;
    display: block;
    height: 70px;
    background-color: var(--colorwhite);
    text-align: center;
    position: relative;
    border-radius: 500px;
    margin: 0 15px 15px;
}
.footer_top section a::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    font-size: var(--f20);
    color: var(--colorsub3);
}
.footer_top section a.btn_contact_us::before{
    content: '官網預約';
}
.footer_top section a.btn_add_line::before{
    content: 'Line預約';
}
.footer_top section a:hover{
    background-color: var(--colorsub2);
}
.footer_top section a:hover::before{
    color: var(--colorwhite);
}
.footer_top section a:hover.btn_contact_us::before{
    content: '聯絡我們';
}
.footer_top section a:hover.btn_add_line::before{
    content: '加入Line';
}

.footer_btm{
    margin: auto;
    padding: calc(1vw + 60px) 5% calc(1vw + 30px);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: var(--colormain2);
    position: relative;
    z-index: 10;
}
.footer_con{
    max-width: 1100px;
    margin: auto;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}
.footer_logo{
    min-width: 73px;
    height: 160px;
    background: url(../images/footerlogo.svg);
    background-position: center;
    background-size: cover;
}
.footer_info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
    column-gap: 5%;
    width: 600px;
    min-width: 550px;
    margin: 0 20px;
}
.footer_info section a{
    display: block;
    font-size: var(--f16);
    color: var(--colorsub3);
    font-family: var(--fontMerr),var(--fontSans);
}
.footer_info section a:nth-of-type(2){
    margin: 10px 0;
}
.footer_oth{
    text-align: right;
}
.footer_oth > section{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 30px;
}
.footer_oth > section a{
    margin: 0 0 0 15px;
}
.footer_oth > section a::before{
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: cover;
}
.footer_oth > section a.footer_oth_ig::before{
    background-image: url(../images/footer_ig.svg);
}
.footer_oth > section a.footer_oth_fb::before{
    background-image: url(../images/footer_fb.svg);
}
.footer_oth > p{
    font-size: var(--f16);
    color: var(--colorsub3);
    font-family: var(--fontMerr),var(--fontSans);
}

.footer_backtop{
    position: absolute;
    top: 0px;
    right: 0px;
}
.footer_backtop > a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--f16);
    color: var(--colorsub3);
    font-family: var(--fontMerr),var(--fontSans);
    cursor: pointer;
    max-width: fit-content;
}
.footer_backtop > a::before{
    content: '';
    min-width: 32px;
    height: 32px;
    background: url(../images/BacktoTop.svg);
    background-position: center;
    background-size: cover;
    margin: 0 5px 0 0;
    border-radius: 1000px;
    overflow: hidden;
    transition: all .4s;
}
.footer_backtop > a:hover::before{
    background-color: var(--colorwhite);
    transition: all .4s;
}

@media (max-width: 1360px) {}
@media (max-width: 1024px) {}
@media (max-width: 968px) {
    /* .footer_top::before{right: -25%;bottom: -30px;background-position: right;} */
    .footer_con{max-width: 700px;}
    .footer_logo{align-self: flex-start;}
    .footer_info{grid-template-columns: 1fr;min-width: 280px;width: unset;}
}
@media (max-width: 768px) {}
@media (max-width: 600px) {
    .footer_logo{align-self: center;margin: 0 0 60px;}
    .footer_con{flex-direction: column;align-items: stretch;max-width: 270px;}
    .footer_info{min-width: unset;margin: 0px;}
    .footer_info section:nth-of-type(2) a:nth-of-type(1){margin: 30px 0 20px;}
    .footer_oth{text-align: left;}
    .footer_oth > section{justify-content: flex-start;margin: 50px 0 25px;}
    .footer_oth > section a{margin: 0 10px 0 0;}
    .footer_backtop{position: unset;width: 100%;margin: 50px 0 0;}
}
@media (max-width: 425px) {
    .footer_main{padding: 15px 0 0;}
    .footer_top{padding: calc(1vw + 30px) 0 70px;}
    .footer_top::before{bottom: -80px;}
    .footer_top section a{height: 50px;margin: 0 5px 10px;}
}
@media (max-width: 375px) {
    .footer_con{max-width: 230px;}
}