ul,
li {
    list-style: none;
}
.clear {
    clear:both;
}

#banner {
    position: absolute;
    left: 30vmax;
    top: 15vmax;
    --imageWidth:38vmax;
    --height:22vmax;
    --arrowWidth:38vmax;
    width:calc(var(--imageWidth) + var(--arrowWidth)*2);
}
#album {
    position: absolute;
    left: 32vmax;
    top: 19vmax;
    --imageWidth:36vmax;
    --height:22vmax;
    --arrowWidth:36vmax;
    width:calc(var(--imageWidth) + var(--arrowWidth)*2);
}

#box {
    position:relative;
width:var(--imageWidth);
height:var(--height);
overflow: hidden;
}

#school_title {
position:absolute;
font-weight: 300;
    background: #555A8D;
   color: #FFF;
    border-radius: 3px;
    padding: 2px;
    font-family: Microsoft JhengHei;
    font-size: 28px;
    text-shadow: #000 2px 2px 2px;
left:20px;
top:20px;
z-index: 3;

}
#plan_title {
position:absolute;
font-weight: 300;
    background: #555A8D;
   color: #FFF;
    border-radius: 3px;
    padding: 0px;
    font-family: Microsoft JhengHei;
    font-size: 28px;
    text-shadow: #000 2px 2px 2px;
left:20px;
top:20px;
z-index: 3;
}

#multi-circles {
position:absolute;
right:30px;
bottom:10px;
z-index: 2;
}

#multi-circles li {
    float:left;
    margin-right:15px;
    width:10px;
    height:10px;
    border-radius: 100%;
    background-color:rgb(240, 240, 240);
    }

#multi-images {
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:calc(var(--imageWidth)*14);
    height:var(--height);
    transition: 1s;
}

#multi-images img {
    float:left;
    width:var(--imageWidth);
    height:var(--height);
}

#arrow-right,
#arrow-left {
    cursor:pointer;
    position: absolute;
    top:50%;
    margin-top:-20px;
height:40px;
z-index: 3;
display:none;
}

#arrow-right {
right:0;
}

#arrow-left {
    left:0;
}