* {
    margin: 0;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
    text-align: center;
}

html, body {
    scroll-behavior: smooth;
    background: url(./image/bg.png) center center / cover repeat #FFF8EF;
    font-size: 1.05rem;
}

a {
    font-size: .8em;
    text-decoration: none;
    cursor: pointer;
    transition: .5s;
}

p {
    font-size: .8em;
}

.info div, .qa_answer {
    text-align: left;
}

.svg {
    width: 1em;
    padding-right: .5em;
}

.title {
    color: #DD2C2C;
    display: inline-block;
    font-weight: bold;
    border-bottom: 5px solid #DD2C2C;
    padding: 0.3em 0;
    margin-bottom: 1.3em;
}

.section {
    padding: 3em 1em;
}

.section:nth-child(2n) {
    background: rgba(0, 0, 0, 0.1);
}

.container {
    width: 80%;
    margin: auto;
}

.box {
    margin-right: 1em;
    box-shadow: 0 0 12px 5px rgba(145, 105, 30, 0.2);
}

.box:last-child {
    margin: 0;
}

.box:hover, .icon img:hover {
    transform: scale(1.05);
    transition: .3s ease-in;
}

.icon {
    margin-bottom: 1.2em;
}

.more {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8em;
    margin: 0 auto;
    color: #fff;
    background-color: #DD2C2C;
    padding: .5em 1em;
    margin-top: 2em;
}

.more img {
    margin-left: 8px;
}

.more:hover {
    opacity: .8;
}

.header {
    position: fixed;
    border-top: 5px solid #DD2C2C;
    background-color: #FFF8EF;
    z-index: 5;
    width: 100%;
    top: 0;
}

.header .logo {
    padding: .5em 0;
}

.header .menu {
    background-color: #fff;
}

.header .menu .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header .logo .container {
    flex-direction: column;
}

.header .logo_icon, #burger {
    display: none;
}

.header a {
    color: #444444;
    padding: 1em .8em;
}

.header a.active {
    color: #DD2C2C;
}

.header span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #CBAA8A;
}

.header a:hover {
    color: #DD2C2C;
}

.header .button:hover {
    color: #E0D2BF;
}

.shrink .logo img {
    width: 3.5em;
}

.shrink a {
    padding: .6em .4em;
    font-size: .8em;
}

.banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3em 1em;
    margin-top: 4em;
    min-height: 20em;
    background: linear-gradient(-65deg, #DD2C2C 60%, transparent 40%) center center / 100% 100%,
    url(./image/banner_index.png) center center / cover no-repeat
}

.banner h2 {
    margin-top: 10%;
    margin-left: 30%;
    margin-bottom: .5em;
    color: #fff;
    font-size: 1.8em;
}

.banner p {
    color: #fff;
    margin-left: 30%;
    font-size: 1.5em;
    margin-bottom: 1em;
}

.banner .register {
    color: #10273B;
    background-color: #F59E0B;
}

.banner_store, .banner_question {
    margin-top: 6em;
    min-height: 12em;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.banner_store h2, .banner_question h2 {
    color: #fff;
    margin-left: 15%;
    margin-top: 5%;
}

.banner_store {
    padding: 2.5em 1em;
    background: url(./image/banner_store.png) left bottom / contain no-repeat #000;
}

.banner_question {
    padding: 2.5em 1em;
    background: url(./image/banner_question.png) left bottom / contain no-repeat #000;
}

.store .box {
    position: relative;
    background-color: #fff;
    min-height: 20em;
    width: calc(40% - 4em*2);
    margin-bottom: 10em;
}

.store .tag {
    position: absolute;
    color: #fff;
    background: #DD2C2C;
    font-size: .8em;
    padding: 0.8em 0.6em;
}

.store .box > img {
    width: 100%;
}

.store .text {
    background-color: #fff;
    min-height: 6em;
    line-height: 6em;
}

.store .text img {
    width: 9em;
}

.store h3 {
    color: #DD2C2C;
    font-weight: bold;
}

.purchase .icon {
    width: 33%;
}

.purchase .num {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .3em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    color: #FFF8EF;    
    background-color: #DD2C2C;
}

.pur_title .text {
    font-size: .8em;
}

.open .box_item, .store .box_item, .purchase .box_item {
    flex-wrap: wrap;
}

.open .icon {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 1.5em;
    width: calc(50% - 2em*2);
    height: 18em;
}

.open .icon img, .purchase .icon img {
    width: 6em;
    margin-bottom: 1em;
}

.open_title, .pur_title {
    color: #DD2C2C;
    font-weight: bold;
    margin-bottom: 1em;
}

.vip_exp .box_item {
    margin-bottom: 3.5em;
}

.vip_exp .box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    color: #FFF8EF;    
    background-color: #DD2C2C;
    width: 25%;
    height: 17em;
    padding: 1em;
    border-left: 1em solid rgba(225, 225, 225, 0.2);
}

.vip_exp .box:nth-child(2n) {
    background-color: #BC9E82;
}

.vip_exp > p {
    color: #DD2C2C;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: .8em;
}

.vip_exp .icon {
    width: 25%;
}

.vip_exp img {
    width: 1em;
    margin-right: .5em;
}

.vip_exp s {
    font-size: .8em;
}

.vip_exp .price {
    font-weight: bold;
    font-size: 1.2em;
}

.qa .box_item {
    flex-direction: column;
}

.qa .box {
    width: 100%;
    padding: 1em;
    margin-bottom: 1em;
    margin-right: 0;
    background: url(./image/qa_bg.png) center center / cover repeat;
}

.qa .box:checked {
    color: #fff;
}

.qa .box:hover {
    cursor: pointer;
    transform: scale(1);
}

.qa_title {
    font-size: .8em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #DD2C2C;
    font-weight: bold;
}

.qa_title .num {
    margin-right: .8em;
}

.qa_title h4 {
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 50%;
    color: #FFF8EF;    
    background-color: #DD2C2C;
}

.qa_title .text {
    text-align: left;
}

.qa_title img {
    width: 1.2em;
}

.qa_answer {
    background: rgba(255,255,255,.5);
    padding: 1em;
    font-size: .8em;
    margin-top: 1em;
}

.return .box_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.return img {
    width: 1em;
    height: 1em;
    margin-right: .8em;
}

.return .box_item > div {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1em;
}

.return .box_item p {
    text-align: left;
}

.footer {
    font-size: .6em;
    font-weight: bold;
    color: #fff;
}

.footer .title {
    color: #fff;
}

.footer span {
    color: #BC9E82;
}

.footerTop {
    position: relative;
    padding: 1.5em 0;
    background-color: #DD2C2C;
}

.footerTop .top {
    position: absolute;
    top: -25px;
    right: 0;
    bottom: 0;
    left: 0;
}

.footerTop .top img {
    cursor: pointer;
    background: #BC9E82;
    width: 1.2em;
    height: 1.2em;
    padding: 1em;
    border-radius: 50%;
    border: 3px solid #FFF8EF;
}

.footerBottom {
    padding: .8em 0;
}

.header, .footerTop {
    justify-content: space-around;
}

.footerTop .title {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footerTop .info_box {
    width: 100%;
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.footerBottom {
    background-color: #BC9E82;
}

.header .logo, .box_item, .store .text, .footerTop > .container, .qa_title > div, .pur_title, .vip_exp .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 1280px) {
    .store .box {
        width: calc(50% - 1.2em*2);
        margin-right: 1.2em;
        margin-bottom: 6.5em;
    }

    .vip_exp .icon {
        margin-right: 1em;
    }

    .vip_exp .box_item {
        flex-wrap: wrap;
    }

    .vip_exp .box, .vip_exp .icon {
        width: calc(40% - 1em*2);
        margin-right: 1em;
        margin-bottom: 1em;
    }
}

@media only screen and (max-width: 767px) {
    .box, .button a {
        margin-right: 0;
        margin-bottom: 1em;
    }

    .store .box {
        min-height: 100%;
    }

    .open .icon, .purchase .icon, .vip_exp .icon {
        width: 100%;
    } 

    .open .icon {
        height: 100%;
    }

    .open .container {
        width: 100%;
        margin-left: 0;
    }
    
    .vip_exp .box_item {
        margin-bottom: 0;
    }

    .vip_exp .box {
        width: 12em;
    }

    .container, .more {
        width: 80%;
    }

    .header .logo_icon, .header #burger:checked + .menu {
        cursor: pointer;
        display: block;
    }

    .logo_icon {
        background: #fff;
    }

    .banner p, .header span  {
        display: none;
    }

    .header .logo {
        padding: .6em .8em;
    }

    .header .menu {
        display: none;
        width: 100%;
        background-color: #DD2C2C;
        padding: 0;
    }

    .header .menu .container {
        width: 100%;
    }
    
    .header .svg {
        width: 1.2em;
        padding: .8em;
    }

    .header a {
        width: 100%;
        color: #FFF8EF;
        padding: 1em 0;
    }

    .header .menu a:hover, .header .menu a.active {
        background-color: #BC9E82;
    }

    .banner {
        background-position: 25% top;
        background-color: #10273B;
    }
    
    .banner h2 {
        margin-top: 30%;
    }

    .banner_store, .banner_question {
        margin-top: 4em;
        min-height: 10em;
    }

    .banner_store h2, .banner_question h2 {
        margin-top: 25%;
        margin-left: 0;
    }

    .store .box {
        width: 16em;
        margin-right: 0;
    }

    .store .box:nth-child(2n), .store .box:nth-child(3n) {
        margin-right: 0;
    }

    .vip_exp .icon {
        justify-content: flex-start;
    }

    .vip_exp .box, .vip_exp .icon {
        margin-right: 0;
    }

    .header, .header .menu .container, .store .box_item, .vip_exp .box_item, .footerTop, .footerTop .info_box, .footerBottom, .footerBottom a {
        display: flex;
        flex-direction: column;
    }

    .footerTop .info_box {
        display: flex;
        justify-content: center;
        font-size: 1.2em;
        line-height: 1.5em;
    }

    .footerBottom a {
        padding: .8em 0;
    }
}