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

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

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

.cycle-pager-active{
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    text-decoration-color: #fff;
}

.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:98%;
    height:auto;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    bottom:2%;
    z-index:998;
    background: rgba(0,0,0,0.4);
    padding-top:8px;
    padding-bottom:8px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2) ;
    }

#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) {}