:root {
    /* 顏色 */
    --green: #08be8c;
    --blue: #2492dd;
    --gray: #848484;
    --gray_dark: #5b5b5b;
    --line: #c2ccde;
    --bg: #f6f5fb;
    --bg_blue: #e8f4f7;
    --grad_light: linear-gradient(135deg, #7dd7ff -20%, #ffd731 110%);
    --grad_dark: linear-gradient(135deg, #2492dd -5%, #ffd731 110%);
    --dot_yellow: #fcd64b;
    --dot_blue: #40c3f5;
    --dot_green: #08be8c;
    --shadow: 5px 5px 20px hsla(0, 0%, 0%, 0.2);

    /* 文字 */
    --family_Corbel: "Corbel", sans-serif;
    --family_Montserrat: "montserrat", sans-serif;
    --family_Helvetica: Helvetica, "微軟正黑體", Calibri, Arial, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    --size_h1: 3rem;
    --size_h2: 2.5rem;
    --size_h3: 1.4rem;
    --size_p: 1.1rem;
    --size_hint: .9rem;
    --title_spacing: .5rem;

    /* 邊距 */
    --narrow_block: 68%;
    --narrow_max: 1020px;
    --wide_block: 80%;
    --wide_max: 1440px;
    --section_margin: 6.5rem;
    --content_padding: 2rem;
    --page_content_padding: 4rem;
    --border_padding: .2rem .8rem;
    --radius_1: 100px;
    --radius_2: 24px;
    --radius_3: 10px;
    --radius_page: 60px;

    /* z-index */
    --z_bg: -1;
    --z_header: 950;
    --z_header_ham: 999;
    --z_mask: 900;
}

@media screen and (max-width: 1380px) {
    :root {
        /* 文字 */
        --family_Corbel: "Corbel", sans-serif;
        --family_Montserrat: "montserrat", sans-serif;
        --family_Helvetica: Helvetica, "微軟正黑體", Calibri, Arial, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
        --size_h1: 3rem;
        --size_h2: 2.5rem;
        --size_h3: 1.4rem;
        --size_p: 1.1rem;
        --size_hint: .9rem;
        --title_spacing: .5rem;

        /* 邊距 */
        --narrow_block: 76%;
        --wide_block: 88%;
        --section_margin: 6.5rem;
        --content_padding: 2.5rem;
        --page_content_padding: 4rem;
        --border_padding: .2rem .8rem;
        --radius_1: 100px;
        --radius_2: 24px;
        --radius_3: 10px;
        --radius_page: 60px;
    }
}

@media screen and (max-width: 1200px) {
    :root {
        /* 文字 */
        --size_h1: 3rem;
        --size_h2: 2.5rem;
        --size_h3: 1.4rem;
        --size_p: 1.1rem;
        --size_hint: .9rem;
        --title_spacing: .5rem;

        /* 邊距 */
        --narrow_block: 88%;
        --wide_block: 90%;
        --section_margin: 6.5rem;
        --content_padding: 1.8rem;
        --page_content_padding: 3rem;
        --border_padding: .2rem .8rem;
        --radius_1: 80px;
        --radius_2: 24px;
        --radius_3: 10px;
        --radius_page: 50px;
    }
}

@media screen and (max-width: 912px) {
    :root {
        /* 文字 */
        --size_h1: 3rem;
        --size_h2: 2.5rem;
        --size_h3: 1.4rem;
        --size_p: 1.1rem;
        --size_hint: .9rem;
        --title_spacing: .5rem;

        /* 邊距 */
        --narrow_block: 88%;
        --wide_block: 90%;
        --section_margin: 6.5rem;
        --content_padding: 1.8rem;
        --page_content_padding: 2.5rem;
        --border_padding: .2rem .8rem;
        --radius_1: 80px;
        --radius_2: 24px;
        --radius_3: 10px;
        --radius_page: 40px;
    }
}

@media screen and (max-width: 540px) {
    :root {
        /* 文字 */
        --size_h1: 3rem;
        --size_h2: 2.5rem;
        --size_h3: 1.2rem;
        --size_p: 1rem;
        --size_hint: .9rem;
        --title_spacing: .5rem;

        /* 邊距 */
        --narrow_block: 90%;
        --wide_block: 90%;
        --section_margin: 4rem;
        --content_padding: 1.5rem;
        --page_content_padding: 1.5rem;
        --border_padding: .15rem .4rem;
        --radius_1: 60px;
        --radius_2: 20px;
        --radius_3: 8px;
        --radius_page: 40px;
    }
}

body {
    margin: 0;
    font-family: var(--family_Helvetica);
    font-weight: 400;
    letter-spacing: .15rem;
    box-sizing: border-box;
    background: var(--bg);
}

body * {
    box-sizing: border-box;
}

::selection {
    color: white;
    background: var(--dot_green);
}

h1 {
    font-size: var(--size_h1);
}

h2 {
    font-size: var(--size_h2);
    font-weight: 400;
}

h3 {
    font-size: var(--size_h3);
}

p {
    font-size: var(--size_p);
    font-weight: 400;
    margin: 1rem 0;
    line-height: 1.8;
}

a {
    cursor: pointer;
    text-decoration: none;
}

ul {
    padding: 0 0 0 .5rem;
}

ol {
    padding: 0 0 0 1.25rem;
}

ul>li {
    list-style: url(../image/list_style.png);
    padding: 0 0 0 .2rem;
}

li {
    font-size: var(--size_p);
    line-height: 1.8;
    margin: .5rem;
}

figure {
    margin: 0;
}

/* header */
header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1rem 2rem;
    z-index: var(--z_header);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

header .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 1;
    pointer-events: unset;
    transition: .3s;
}

header .logo.hide {
    opacity: 0;
    pointer-events: none;
}

header .logo>a {
    display: flex;
    align-items: center;
}

header .logo img {
    width: 120px;
}

.ham_btn {
    display: none;
}

header>nav {
    padding: .85rem 1.5rem;
    background: linear-gradient(135deg, hsla(204, 73%, 50%, 0.7) -5%, hsl(48, 100%, 60%, 0.7) 110%);
    backdrop-filter: blur(8px);
    border-radius: var(--radius_3);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
}

header>nav>a {
    position: relative;
    color: white;
    font-family: var(--family_Corbel);
    font-size: var(--size_p);
    line-height: 1;
}

.header_nav_mobile {
    display: none;
}

header>nav>a[role="button"] {
    font-size: var(--size_hint);
    padding: .2rem .6rem;
    background: white;
    border-radius: 25px;
    color: var(--blue);
}

header>nav>a:not([role="button"])::after {
    position: absolute;
    content: "";
    background: white;
    width: 100%;
    height: 1.2rem;
    left: 0;
    bottom: -.35rem;
    clip-path: polygon(0 96%, 0 96%, 0 96%, 0 96%);
    transition: .3s;
}

header>nav>a:not([role="button"]):hover::after {
    clip-path: polygon(50% 90%, 100% 96%, 56% 100%, 0 96%);
}

.lang_box {
    position: absolute;
    right: 0;
    top: calc(100% + .2rem);
    background: var(--bg);
    box-shadow: var(--shadow);
    padding: .8rem 1rem;
    border-radius: var(--radius_3);
    display: flex;
    gap: 1rem;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: .3s;

}

.lang_box.active {
    opacity: 1;
    pointer-events: unset;
}

.lang_box>a {
    color: var(--gray);
    font-size: var(--size_hint);
    line-height: 1;
}

.lang_box>a.active {
    color: white;
    background: var(--blue);
    padding: .2rem .6rem;
    border-radius: 25px;
}

.lang_box>a:not(.active):hover {
    color: var(--blue);
}

@media screen and (max-width: 912px) {
    header .logo {
        gap: .5rem;
    }

    header .logo img {
        width: 100px;
    }

    .ham_btn {
        display: flex;
        align-items: center;
        padding: .4rem 1.5rem;
        background: linear-gradient(135deg, hsla(204, 73%, 50%) -5%, hsl(48, 100%, 60%) 110%);
        border-radius: 25px;
        box-shadow: var(--shadow);
        gap: .5rem;
        cursor: pointer;
        position: fixed;
        top: 2.5rem;
        right: 1.6rem;
        transform: translateY(-50%);
        z-index: var(--z_header_ham);
        transition: .3s;
    }

    .ham_btn.active {
        background: var(--bg);
        box-shadow: none;
    }

    .ham_btn>span {
        color: white;
    }

    .ham_btn.active>span {
        color: var(--green);
    }

    .ham_btn>.ham_menu,
    .ham_btn.active>.ham_close {
        display: block;
    }

    .ham_btn.active>.ham_menu,
    .ham_btn>.ham_close {
        display: none;
    }

    .ham_btn>.span_box {
        position: relative;
        width: 1.5rem;
        height: 1.5rem;
    }

    .ham_btn>.span_box>span {
        position: absolute;
        content: "";
        background: white;
        height: 1px;
        top: 50%;
        left: 0;
        transition: .3s;
    }

    .ham_btn.active>.span_box>span {
        background: var(--green);
    }

    .ham_btn>.span_box>span:nth-child(1) {
        width: 1.5rem;
        transform: translate(0, calc(-50% - .15rem));
    }

    .ham_btn>.span_box>span:nth-child(2) {
        width: 1rem;
        transform: translate(0, calc(-50% + .15rem));
    }

    .ham_btn.active>.span_box>span:nth-child(1) {
        width: 1.2rem;
        transform: translate(0, calc(-50%)) rotate(45deg);
    }

    .ham_btn.active>.span_box>span:nth-child(2) {
        width: 1.2rem;
        transform: translate(0, calc(-50%)) rotate(-45deg);
    }

    header>nav {
        display: none;
    }

    .header_nav_mobile {
        position: fixed;
        top: .6rem;
        right: 1rem;
        padding: 4rem 2rem 0;
        background: linear-gradient(135deg, hsla(204, 73%, 50%, 1) -5%, hsl(48, 100%, 60%, 1) 110%);
        box-shadow: var(--shadow);
        backdrop-filter: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        width: max-content;
        min-width: 300px;
        max-width: calc(100% - 2rem);
        border-radius: var(--radius_3);
        z-index: var(--z_header);
    }

    .header_nav_mobile>a {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .header_nav_mobile>a>span {
        position: relative;
        width: max-content;
        font-family: var(--family_Corbel);
        font-size: var(--size_p);
        color: white;
    }

    .header_nav_mobile>a>span::after {
        position: absolute;
        content: "";
        background: white;
        width: 100%;
        height: 1.2rem;
        left: 0;
        bottom: -.35rem;
        clip-path: polygon(0 96%, 0 96%, 0 96%, 0 96%);
        transition: .3s;
    }
    
    .header_nav_mobile>a:hover>span::after {
        clip-path: polygon(50% 90%, 100% 96%, 56% 100%, 0 96%);
    }

    .lang_box {
        position: unset;
        width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 1.5rem 0;
        border-radius: 0;
        justify-content: space-evenly;
        opacity: 1;
        pointer-events: unset;
        border-top: 1px solid var(--bg);
    }

    .lang_box>a {
        color: white;
    }

    .lang_box>a.active {
        color: var(--green);
        background: white;
        padding: .2rem .6rem;
        border-radius: 25px;
    }

    .lang_box>a:not(.active):hover {
        color: var(--green);
    }
}

@media screen and (max-width: 540px) {
    header {
        padding: 1rem 1rem;
    }

    .ham_btn {
        right: 1rem;
        padding: .3rem 1rem;
    }

    .ham_btn>span {
        font-size: var(--size_hint);
    }

    .header_nav_mobile {
        width: calc(100% - 1rem);
        padding: 3.2rem 2rem 0;
        top: 1rem;
        right: .5rem;
    }
}

@media screen and (max-width: 360px) {
    header .logo img {
        width: 75px;
    }

    .ham_btn {
        padding: .2rem 1rem;
    }
}

/* footer */
footer {
    width: var(--wide_block);
    max-width: var(--wide_max);
    margin: calc(var(--section_margin) * 2.5) auto 0;
    padding: var(--content_padding) 0;
    /* border-top: 1px solid #ccc; */
    position: relative;
}

footer>.logo {
    width: 100%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

footer>.logo img {
    width: 120px;
}

footer>p {
    font-size: var(--size_hint);
    color: var(--gray);
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 912px) {
    footer>.logo img {
        width: 100px;
    }
}

@media screen and (max-width: 360px) {
    footer>.logo img {
        width: 75px;
    }
}

/* top */
.top {
    position: absolute;
    bottom: 100%;
    left: 100%;
    transform: translateX(100%) translateY(0);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top>img.arrow {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.top>img.circle {
    position: absolute;
    width: 220%;
    height: 220%;
    animation: rotate 20s linear infinite;
    transition: .3s;
}

.top:hover>img.circle {
    width: 250%;
    height: 250%;
}

@media screen and (max-width: 1380px) {
    .top {
        bottom: 100%;
        left: 100%;
        transform: translateX(-150%) translateY(0);
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media screen and (max-width: 540px) {
    .top {
        bottom: 100%;
        left: 100%;
        transform: translateX(-175%) translateY(0);
        width: 2.5rem;
        height: 2.5rem;
    }
}

.bg_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: var(--z_mask);
    /* background: rgba(255, 255, 255, 0.7); */
}

.bg_mask.active {
    width: 100%;
    height: 100dvh;
}