body {
    font-family: Helvetica, Arial, sans-serif;
    margin:0;
    padding: 0;
    color: #000;
    background: #ea6268 url(../img/bg.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    line-height: 1.15;
    font-size:15px;
}

html {
    height: 100%;
}

p:first-child{
    margin-top:0;
}
p:last-child{
    margin-bottom:0;
}

.sm{
    font-size: 0.8em;
}
.sm2{
    font-size: 0.5em;
}
.nw{
    white-space: nowrap;
}

.bs .page{
    font-size:1.8em;
}

.cn {
    font-family: 'Noto Sans TC', serif;
    font-size: 0.95em;
}

.uc {
    text-transform: uppercase;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}


.bs {
    color:#fff;
}
.bs a{
    color:#fff;
    text-decoration: none;
}
.bs a:hover{
    text-decoration: underline;
}


h1{
    overflow:hidden;
    text-indent: -100em;
}

#box1 {
    background: #ea6268;
    padding: 0.3em 0.6em 0.6em 0.5em;
    position: absolute;
    top: 14em;
    right: 0;
}

#box1 .i{
    transform: rotate(-7deg);
}

#box2 {
    background: #ea6268;
    transform: rotate(-7deg);
    position: absolute;
    top: 19em;
    right: 34%;
}

#box3 {
    background: #ea6268;
    transform: rotate(6deg);
    position: absolute;
    top: 26.5em;
    right: 11%;
}
#box4 {
    background: #ea6268;
    position: absolute;
    top: 40em;
    right: 7%;
}

#box5 {
    position: absolute;
    top: 49em;
    right: 0;
    padding:0 0 1em 2em;
    max-width:100%;
}

#box5 img{
    margin-bottom: -0.2em;
}

#box5 ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: rows;
}
#box5 li{
    list-style-type: none;
    padding-right:2em;
}

.bs2025{
    background-image: url(../img/2025/fade.png), url(../img/bg.jpg);
    background-size: 32px 32px, 100% auto;
    background-repeat: repeat, no-repeat;
}
.bs2025 h1{
    display:none;
}
.bs2025 .layout{
    display:flex;
    justify-content: space-evenly;
    margin-top: 2em;
}
.bs2025 .layout p {
    margin: 1em 0;
    text-align: center;
}
.bs2025 .layout img{
    width: 30vw;
    aspect-ratio: 216/270;
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.5);
}

.bs2025 #box5{
    position:static;
    margin-top:4em;
    float:right;
}

@media screen and (max-width: 1800px){
    .bs {
        font-size:14px;
    }
}
@media screen and (max-width: 1700px){
    .bs {
        font-size:13px;
    }
}
@media screen and (max-width: 1550px){
    .bs {
        font-size:12px;
    }
}
@media screen and (max-width: 1450px){
    .bs {
        font-size:11px;
    }
}
@media screen and (max-width: 1300px){
    .bs {
        font-size:10px;
    }
}
@media screen and (max-width: 1150px){
    .bs {
        font-size:9px;
    }
}
@media screen and (max-width: 1000px){
    #box1 { top: 12em; }
    #box2 { top: 17em; }
    #box3 { top: 24em; }
    #box4 { top: 38em; }
    #box5 { top: 47em; }
}
@media screen and (max-width: 900px){
    body{
        background-image: url(../img/bgv.jpg);
    }
    .bs2025{
        background-image: url(../img/2025/fade.png), url(../img/bgv.jpg);#
    }

    .bs2025 .layout{
        flex-direction: column;
    }
    .bs2025 .layout img{
        width: 90vw;
    }
    .bs {
        font-size:12px;
    }
    
    #box1 { top: 19em; }
    #box2 { top: 27em; }
    #box3 { top: 37em; }
    #box4 { top: 51em; }
    #box5 { top: 62em; }
}
@media screen and (max-width: 840px){
    .bs {
        font-size:11px;
    }
}
@media screen and (max-width: 750px){
    .bs {
        font-size:10px;
    }
}
@media screen and (max-width: 680px){
    .bs {
        font-size:9px;
    }
}
@media screen and (max-width: 620px){
    .bs {
        font-size:8px;
    }
}
@media screen and (max-width: 540px){
    .bs {
        font-size:7px;
    }
}
@media screen and (max-width: 460px){
    .bs {
        font-size:6px;
    }
}
@media screen and (max-width: 400px){
    .bs {
        font-size:5px;
    }
}
@media screen and (max-width: 340px){
    .bs {
        font-size:4.5px;
    }
}