.hero-slider {
    position:relative;
    width:100%;
    height:100vh;
	max-height: 650px;
    overflow:hidden;
}
.hero-slider .slide {
    position:absolute;
    inset:0;
    display:flex;
    opacity:0;
    visibility:hidden;
    transition:1s ease;
}
.hero-slider .slide.active {
    opacity:1;
    visibility:visible;
}
.slide .left-image,
.slide .right-image{
    width:50%;
    height:100%;
    overflow:hidden;
}
.slide .left-image img,
.slide .right-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 8s ease;
}
.hero-slider .slide.active img{
    transform:scale(1.08);
}
.hero-slider .content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:white;
	font-weight: 600;
    z-index:5;
}
.hero-slider .content h1{
    font-size:5rem;
    line-height:1.2;
    text-shadow:0 5px 20px rgba(0,0,0,.5);
}
.hero-slider .content p{
    margin-top:25px;
    font-size: 1.1rem;
    background:rgba(0,0,0,.8);
    padding:15px 30px;
    display:inline-block;
}
.hero-slider .nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border:none;
    background:rgba(255,255,255,.85);
    cursor:pointer;
    font-size:22px;
    z-index:10;
    transition:.3s;
}

.hero-slider .nav:hover{
    background:white;
}
.hero-slider .prev{
    left:20px;
}
.hero-slider .next{
    right:20px;
}

/* 響應式 */
@media screen and (max-width: 768px) {
    .hero-slider .slide {
        flex-direction:column;
    }
    .slide .left-image,
    .slide .right-image{
        width:100%;
        height:50%;
    }
    .hero-slider .content h1{
        font-size:3rem;
    }
}
@media screen and (max-width: 480px) {
    .hero-slider .content h1{
        font-size: 2rem;
    }
}