/* Banner Styles - Separated from style.css to avoid conflicts */
/* All banner-related CSS is contained in this file */

/* Main Banner Container */
.banner {
    width: 100%;
    height: 640px;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
}
.banner::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 30px;
	bottom: 0;
	left: 0;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
	z-index: 2;	
}

/* Swiper Slide */
.banner .swiper-slide {
    text-align: center;
    font-size: 18px;
	background-position: 50% 50%;
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}
.banner .swiper-slide .banner-slide-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.banner .swiper-slide::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);	
}
.banner .swiper-slide > div {
	text-align: center;
	position: relative;
	height: 100%;
	letter-spacing: -0.3em;
}
.banner .swiper-slide > div::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 0px;
	height: 100%;
}

/* Banner Content */
.banner .swiper-slide .container {
	z-index: 55;
}
.banner .swiper-slide .banner-text {
	width: 100%;
	max-width: 650px;
	color: #fff;
	padding: 0;
	margin: 80px 0 0;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: -1px;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	transition: all 0.6s ease;
}
.banner .swiper-slide .banner-text .title {
	font-size: 3.6rem;
	font-weight: 900;	
	line-height: 42px;
	margin-bottom: 25px;
}
.banner .swiper-slide .banner-text p {
	padding: 0;
	margin: 0;
	font-size: 1.8rem;
}
.banner .swiper-slide .banner-text .more {
	display: inline-block;
	width: 100%;
	margin-top: 40px;
}

/* Banner Slide Transitions */
.banner .swiper-slide-next .banner-text,
.banner .swiper-slide-prev .banner-text {
	transform: translateY(200px);
	opacity: 0;
}
.banner .swiper-slide-active .banner-text {
	opacity: 1;
	transform: translateY(0);
}
.banner .swiper-slide-active .banner-text .more {
	opacity: 1;
	transform: translateY(0);
}
.banner .swiper-slide-next .banner-text .more,
.banner .swiper-slide-prev .banner-text .more {
	transform: translateY(100px);
	opacity: 0;
}

/* Navigation Arrows */
.banner-button-prev,
.banner-button-next {
	position: absolute;
	width: 50px;
	height: 70px;
	top: 50%;
	z-index: 10;
	cursor: pointer;
	opacity: 1;
	background: url(../images/ico/banner-arrow.svg) center no-repeat;
	transition: all 0.3s ease;
}
.banner-button-next {
	right: 100px;
	left: auto;
}
.banner-button-prev {
	left: 100px;
	right: auto;
	transform: rotate(180deg);
}
.banner-button-prev:hover,
.banner-button-next:hover {
	opacity: 0.5;
}

/* Inside Banner (Internal Pages) */
.banner.inside {
	height: 200px;
}
.banner.inside .swiper-slide::after {
	background: rgba(0,0,0,0.5);	
}
.banner.inside .banner-button-prev,
.banner.inside .banner-button-next,
.banner.inside .swiper-slide .banner-text {
	display: none;
}

/* Responsive: Tablet (max-width: 767px) */
@media screen and (max-width: 767px) {
	.banner {
	    height: 400px;
	    margin-top: 50px;
	}
	.banner .swiper-slide::after {
		background: rgba(0,0,0,0.6);	
	}
	.banner .swiper-slide > div::before {
		vertical-align: middle;
	}
	.banner .swiper-slide .banner-text {
		padding: 0 25px;
		margin: 0;
		vertical-align: middle;
	}
	.banner .swiper-slide .banner-text .title {
		font-size: 2.5rem;
		line-height: 35px;
		margin-bottom: 10px;
	}
	.banner .swiper-slide .banner-text p {
		font-size: 1.7rem;
	}
	.banner .swiper-slide .banner-text .more {
		margin-top: 25px;
	}
	.banner-button-prev,
	.banner-button-next {
		top: calc(50% - 35px);
		background-size: 20px;
	}
	.banner-button-next {
		right: -5px;
		left: auto;
	}
	.banner-button-prev {
		left: -5px;
		right: auto;
	}
	.banner.inside .swiper-slide::after {
		background: rgba(0,0,0,0);	
	}
}

/* Responsive: Mobile Portrait (max-width: 550px) */
@media screen and (max-width: 550px) {
	.banner {
	    height: 320px;
	}
	.banner .swiper-slide .banner-text {
		padding: 0 15px;
	}
	.banner .swiper-slide .banner-text .title {
		font-size: 1.9rem;
		line-height: 22px;
	}
	.banner .swiper-slide .banner-text p {
		font-size: 1.5rem;
	}
	.banner .swiper-slide .banner-text .more {
		margin-top: 25px;
	}
	.banner-button-prev,
	.banner-button-next {
		background-size: 10px;
	}
	.banner-button-next {
		right: -10px;
		left: auto;
	}
	.banner-button-prev {
		left: -10px;
		right: auto;
	}
}