@charset "UTF-8";

html {
    font-size: 8px;
    -webkit-text-size-adjust: none;
    color: #3c3535;
    line-height: 1.25em;
    letter-spacing: .0625em;
    scroll-behavior: smooth;
}
@media screen and (max-width: 750px) {
    html,body {
        font-size: 1.3333vw;
    }
}
@media screen and (max-width: 375px) {
    html {
        font-size: 1.33vw;
    }
}
body {
    background: #fff;
    font-family: 'Noto Sans TC', "微軟正黑體", "Microsoft JhengHei", sans-serif;
    background: url(../images/bg.jpg) top center repeat;
/*     background-size: 1920px auto; */
    background-attachment:fixed;
}

section {
    position: relative;
}

.wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    max-width: 75rem;
    min-height: 100vh;
    margin: 0 auto;
}
header {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 99;
    height: 11rem;
    /*background: #fff;*/
    max-width: 75rem;
}

img {
    position: relative;
    display: block;
    border: 0;
    width: 100%;
    height: auto;
}
header a, nav a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
header .nav-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
header .nav-container {
    position: absolute;
    display: block;
    height: 100%;
}
header .nav-container .logo {
    position: absolute;
    top: 1.8rem;
}
header .burger-btn {
    display: none;
}

header .burger-btn {
    position: absolute;
    display: block;
    width: 9.625rem;
    height: 9.625rem;
    top: 3.5rem;
    left: 3.5rem;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: calc( (9.625rem - 4.5rem) / 2);
    background: url(../images/menu-bg.png) no-repeat top center;
    background-size: 100% auto;
}
header .burger-btn-span {
    position: absolute;
    width: 9.625rem;
    height: 9.625rem;
    top: 3.5rem;
    left: 3.5rem;
    cursor: pointer;
    padding: calc( (9.625rem - 4.5rem) / 2);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: none;
}
header span {
    position: absolute;
    display: block;
    width: 4.5rem;
    height: .6rem;
    border-radius: .3rem;
    background: #fff;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

header .burger-btn-span span:nth-child(1) {
    -webkit-transform: scale(1, 1) translate(0, 0) rotate(0deg);
    transform: scale(1, 1) translate(0, 0) rotate(0deg);
}

header .burger-btn-span span:nth-child(2) {
    -webkit-transform: scale(1, 1) translate(0, 1.8rem) rotate(0deg);
    transform: scale(1, 1) translate(0, 1.8rem) rotate(0deg);
}

header .burger-btn-span span:nth-child(3) {
    -webkit-transform: scale(1, 1) translate(0, 3.6rem) rotate(0deg);
    transform: scale(1, 1) translate(0, 3.6rem) rotate(0deg);
}

header.expand .burger-btn-span span:nth-child(1) {
    -webkit-transform: scale(1, 1) translate(0, 1.8rem) rotate(45deg);
    transform: scale(1, 1) translate(0, 1.8rem) rotate(45deg);
}

header.expand .burger-btn-span span:nth-child(2) {
    -webkit-transform: scale(0, 1) translate(0, 1.8rem) rotate(0deg);
    transform: scale(0, 1) translate(0, 1.8rem) rotate(0deg);
}

header.expand .burger-btn-span span:nth-child(3) {
    -webkit-transform: scale(1, 1) translate(0, 1.8rem) rotate(-45deg);
    transform: scale(1, 1) translate(0, 1.8rem) rotate(-45deg);

}

header.expand .burger-btn {
    display: none;
}
header.expand .burger-btn-span {
    display: block;
}

nav {
    position: fixed;
    width: 63.5rem;
    z-index: 98;
    height: 100vh;
    max-width: 75rem;
    overflow: hidden;
    pointer-events: none;
}
nav .nav-con{
    position: relative;
    width: 100%;
    transform: translateX(-120%);
        -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    height: 100%;
    background: rgb(233 172 95 / .95);
    /* top: -3.5rem; */
    padding-top: 11rem;
}
nav .nav-list {
    margin-right: 12rem;
}

nav.expand{
    pointer-events: initial;
}
nav.expand .nav-con{
    transform: translateX(0);
}
nav .nav-list {
    position: relative;
    display: block;
}
nav .nav-list {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*top: 9.4rem;*/

    /*right: -64rem;*/
    /* right: calc(50% - 37.5rem); */
    width: 100%;
    height: calc(100dvh);
    padding-bottom: 11rem;
    margin: 0;
    /*padding: 0 7rem;*/
    /*padding-top: 14rem;*/
    
}
nav .nav-list>li {
    position: relative;
    width: 21.4rem;
    height: 6rem;
    background: url(../images/nav_list.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    text-indent: -9999px;
    display: block;
    margin: 3.5rem 0;

}
nav .nav-list>li:nth-child(2){background-position-y:-11rem }
nav .nav-list>li:nth-child(3){background-position-y:-32rem }
nav .nav-list>li:nth-child(4){background-position-y:-42rem }
nav .nav-list>li:nth-child(5){background-position-y:-42rem }
nav .nav-list>li:nth-child(6){background-position-y:-48rem }