:root {
    --bg-color: #fffae6;
    --bg-mask-color: #fffae6b3;
    --grey-color: #808080;
    --lineBR-color: #c48c31;
    --lineR-color: #e3002c;
    --lineG-color: #008659;
    --lineO-color: #f8b61c;
    --lineBL-color: #0070bd;
}

* {
    margin: 0;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    vertical-align: top;
}

html {
    font-size: 62.5%;
}

body > * {
    font-family: 'PingFang TC','Heiti TC','LantingHei TC','LiHei Pro','微軟正黑體','Noto Sans TC','Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.container {
    width: 100%;
    max-width: 768px;
    margin: auto;
    padding: 0 3rem;
    position: relative;
}

.br {
    color: var(--lineBR-color);
}

.r {
    color: var(--lineR-color);
}

.g {
    color: var(--lineG-color);
}

.o {
    color: var(--lineO-color);
}

.bl {
    color: var(--lineBL-color);
}

.y {
    color: #ffdb00;
}
.gotopbtn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    background-color: #3C3C3C;
    color: #FFFFFF;
    opacity: 0;
    transition: 0.5s;
    pointer-events: none;
    z-index: 1000;
}

    .gotopbtn.show {
        opacity: 1;
        transition: 0.5s;
        pointer-events: auto;
    }

    .gotopbtn::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        margin: 10px auto 0 auto;
        border-top: 4px solid #FFFFFF;
        border-left: 4px solid #FFFFFF;
        transform: rotate(45deg);
    }