.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background-position: center;
    background-size: cover;
    background-color: #FFF;
    height: 500px;
}
.banner_001{background-image:url('../images/index_banner/banner_001.jpg'); background-position: left center;}
.banner_002{background-image:url('../images/index_banner/banner_002.jpg'); background-position: center bottom;}


.set-wrap-banner{
    position: relative;
    margin: auto;
    width: 100%;
    height: 1px;
    max-width: 1200px;
}
.new-member-card{
    position: absolute;
}
.box-vdo{
    background-color: #000;
    position: relative;
    width: 100%;
    height: 660px;
    overflow: hidden;
}
.box-vdo video{
    position: absolute;
    min-width: 100%;
    min-height: 660px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.banner-home-pic{
    position: absolute; 
    top: 0px;
    left: 0%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: all 0.3s;
}
.banner-product-pic{
    position: absolute; 
    top: 0px;
    left: 0%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: right center;
    transition: all 0.3s;
}
.banner-about-pic{
    position: absolute; 
    top: 0px;
    left: 0%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: right center;
    transition: all 0.3s;
}
.banner-home-info{
    position: absolute; 
    top: 20%;
    left: 0%;
    padding: 0px 30px 0px 44%;
    transition: all 0.3s;
}
.banner-product-info{
    position: absolute; 
    top: 5%;
    left: 0%;
    padding: 0px 42% 0px 30px;
    transition: all 0.3s;
}
.banner-about-info{
    position: absolute; 
    top: 25%;
    left: 0%;
    padding: 0px 44% 0px 30px;
    transition: all 0.3s;
}
.banner-home-info strong{
    display: block;
    padding: 0px 0px 15px 0px;
    font-size: 2.4em;
    color: #FFF;
}
.banner-home-info p{
    display: block;
    margin: 0px;
    padding: 0px 0px 40px 0px;
    font-size: 1.5em;
    color: #FFF;
    line-height: 150%;
}
.banner-home-info a{
    border: 2px solid #FFF;
    background-color: #f9bc55;
    font-weight: 700;
    font-size: 1.2em;
    color: #FFF;
    padding: 15px 50px;
    text-decoration: none;
}
.banner-product-info h1{
    display: block;
    padding: 0px 0px 0px 0px;
    font-size: 2.5em;
    color: #FFF;
}

.banner-product-info strong{
    display: block;
    padding: 0px 0px 15px 0px;
    font-size: 2.1em;
    color: #FFF;
}
.banner-product-info p{
    display: block;
    margin: 0px;
    padding: 0px 0px 40px 0px;
    font-size: 1.5em;
    color: #FFF;
    line-height: 150%;
}
.banner-product-info a{
    border: 2px solid #FFF;
    background-color: #f9bc55;
    font-weight: 700;
    font-size: 1.2em;
    color: #FFF;
    padding: 15px 50px;
    text-decoration: none;
}


.banner-about-info strong{
    display: block;
    padding: 0px 0px 15px 0px;
    font-size: 2.4em;
    color: #FFF;
}
.banner-about-info p{
    display: block;
    margin: 0px;
    padding: 0px 0px 40px 0px;
    font-size: 1.5em;
    color: #FFF;
    line-height: 150%;
}
.banner-about-info a{
    border: 2px solid #FFF;
    background-color: #f9bc55;
    font-weight: 700;
    font-size: 1.2em;
    color: #FFF;
    padding: 15px 50px;
    text-decoration: none;
}
.banner-mrgn{
    margin:auto;
    position: relative;
    width: 1200px;
    max-width: 100%;
    height: 100%;
}
.banner-home-pic{
    background-image: url('/application/images/CSC_circle.svg');
}
.banner-product-pic{
    background-image: url('/application/images/mockup_web.svg');
}

.banner-about-pic{
    background-image: url('/application/images/csc_stack2.svg');
}
@media only screen and (max-width: 1096px) {
    .banner-home-pic{opacity: 0.3; }
    .banner-product-pic{opacity: 0.3; }
    .banner-about-pic{opacity: 0.3; }
    .banner-home-info{top: 15%;}
    .banner-product-info{top: 7%;}
    .banner-about-info{top: 25%;}
    .banner-product-info strong{font-size: 1.9em;}
    .banner-product-info p{font-size: 1.4em;}	
}


@media only screen and (max-width: 990px) {
    .banner-home-pic{opacity: 0.5; }
    .banner-product-pic{opacity: 0.3; }
    .banner-about-pic{opacity: 0.3; }
    .banner-home-info{top: 15%;}
    .banner-product-info{top: 5%;}
    .banner-about-info{top: 25%;}
    .banner-product-info strong{font-size: 1.8em;}
    .banner-product-info p{font-size: 1.2em;}	
}

@media only screen and (max-width: 768px) {    
    .banner-home-pic{opacity: 0.2; background-position: center;}  
    .banner-product-pic{opacity: 0.2; background-position: center;}   
    .banner-about-pic{opacity: 0.2; background-position: center;}    
    .banner-home-info{padding: 0px 50px 0px 50px; text-align: center; top: 15%;}
    .banner-home-info strong{font-size: 1.8em;}
    .banner-home-info p{font-size: 1.2em;}
	
    .banner-product-info{padding: 0px 50px 0px 50px; text-align: center; top: 20%;}
	.banner-product-info h1{display: block; margin: 20px 0 5px 0; font-size: 2.5em; color: #FFF;}
    .banner-product-info strong{font-size: 1.5em;}
    .banner-product-info p{font-size: 1em;}	
	   
    .banner-about-info{padding: 0px 50px 0px 50px; text-align: center; top: 30%;}
    .banner-about-info strong{font-size: 1.8em;}
    .banner-about-info p{font-size: 1.2em;}

}
@media only screen and (max-width: 640px) {

.swiper-slide {height: 400px;}
.box-vdo{height: 400px;}
.box-vdo video{height: 400px; }
.swiper-button-prev,.swiper-button-next{display: none;}
.banner-product-info{padding: 0px 50px 0px 50px; text-align: center; top: 10%;}

}

@media only screen and (max-width: 520px) {
    .banner-home-info{padding: 0px 30px 0px 30px;}
    .banner-home-info strong{font-size: 1.4em;}
    .banner-home-info p{font-size: 0.9em;}
    .banner-home-info a{padding: 12px 30px; font-size: 0.9em;}

	.banner-product-info{padding: 0px 50px 0px 50px; text-align: center; top: 10%;}
	.banner-product-info h1{display: block; margin: 20px 0 5px 0; font-size: 2.5em; color: #FFF;}
    .banner-product-info strong{font-size: 1.4em;}
    .banner-product-info p{font-size: 0.9em;}
    .banner-product-info a{padding: 12px 30px; font-size: 0.9em;}
		
    .banner-about-info strong{font-size: 1.4em;}
    .banner-about-info p{font-size: 0.9em;}
    .banner-about-info a{padding: 12px 30px; font-size: 0.9em;}

}

@media only screen and (max-width: 414px) {
    .banner-home-pic{opacity: 0.15; left: 5px;}  
    .banner-home-info{padding: 0px 30px 0px 30px; top: 15%;}
    .banner-home-info strong{font-size: 1.4em;}
    .banner-home-info p{font-size: 1em;}
    .banner-home-info a{padding: 12px 30px; font-size: 0.9em;}
		
    .banner-about-info strong{font-size: 1.4em;}
    .banner-about-info p{font-size: 0.9em;}
    .banner-about-info a{padding: 12px 30px; font-size: 0.9em;}
	
	.banner-product-pic{ top: 86px;}   
	.banner-product-info{padding: 0px 50px 0px 50px; text-align: center; top: 5%;}
	.banner-product-info h1{display: block; margin: 20px 0 5px 0; font-size: 2em; color: #FFF;}
    .banner-product-info strong{font-size: 1.2em;}
    .banner-product-info p{font-size: 0.8em;}
    .banner-product-info a{padding: 12px 30px; font-size: 0.9em;}

}