body{
margin:0;
padding:0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
height: 100%;
}

.relat{
width:100%;
height:auto;
position:relative;
}

.cycle-slideshow img{
width:100%;
height:auto;
}

.cycle-pager-active{
color: #e5a900;
}

.upbg img{
width:100%;
height:auto;
z-index:899;
position:absolute;
left:0;
top:0;
}

#prev{
width:auto;
height:auto;
position:absolute;
left:3%;
top:30%;
z-index:900;
cursor:pointer;
}
/*在第一則時讓prev消失*/
#prev.disabled{
display:none;
}
/*在最後一則時讓next消失*/
#next.disabled{
display:none;
}

#next{
width:auto;
height:auto;
position:absolute;
right:3%;
top:30%;
z-index:900;
cursor:pointer;
}

.grayBar{
width:100%;
height:auto;
position:absolute;
left:0;
bottom:8%;
z-index:998;
background-color: rgba(0, 0, 0, 0.5);
padding-top:15px;
padding-bottom:15px;
}

#per-slide-template{
width:95%;
height:auto;
margin:0 auto;
}

a{
float:left;
width:25%;
text-align:center;
text-decoration:none;
color:white;
}

a:after {
content: "．";
color:white;
float:right;
}

a:last-child:after{
content: "";
}

@media only screen and (max-width: 768px) {
#prev img{
width:30px;
height:auto;
}

#next img{
width:30px;
height:auto;
}

#prev{
left:2.5%;
top:28%;
}

#next{
right:2.5%;
top:28%;
}

#per-slide-template{
width:100%;
}
}

@media only screen and (max-width: 600px) {
#prev img{
width:25px;
height:auto;
}

#next img{
width:25px;
height:auto;
}

#prev{
left:2.5%;
top:28%;
}

#next{
right:2.5%;
top:28%;
}

.grayBar{
padding-top:10px;
padding-bottom:10px;
}
}

@media only screen and (max-width: 414px) {
#prev img{
width:20px;
height:auto;
}

#next img{
width:20px;
height:auto;
}

#prev{
left:1.5%;
top:27%;
}

#next{
right:1.5%;
top:27%;
}

.grayBar{
padding-top:5px;
padding-bottom:5px;
}
}

@media only screen and (max-width: 375px) {
#prev img{
width:15px;
height:auto;
}

#next img{
width:15px;
height:auto;
}

#prev{
left:2%;
top:27%;
}

#next{
right:2%;
top:27%;
}

a:after {
content: "";
}
}
@media only screen and (max-width: 320px) {}