@charset "utf-8";

/*Basic setup ---------------*/
.swiper-pagination-bullet-active{background: #00b0d0;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 10px;}
.swiper-container{width:100%; /*height: 500px;*/ position:relative;overflow:hidden;z-index:1; margin: 0 auto; position: relative;}
.swiper-wrapper{position:relative;	z-index:1;	display:flex;}
.swiper-pagination{position:absolute;text-align:center;z-index:10}
.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{    margin: 20px 0 50px;left:0;width:100%}
.swiper-pagination-bullet{width:5px;height:5px;display:inline-block; border-radius:100%; border:1px solid #00b0d0;	background: #00b0d0; opacity: .3; margin: 2%; }
.swiper-pagination-bullet-active{ border:1px solid #00b0d0;	background: #00b0d0;opacity: .9;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 10px;}

.swiper-container{width:70%; /*height: 90%;*/ position:relative; overflow:hidden; z-index:1; margin: 0 auto; z-index: 9998;}
.swiper-slide{flex-shrink:0; height:auto;position:relative; margin: 0 auto; }
.swiper-slide img{width:100%;  margin: 0 auto;}
.slide_01{display: block; max-height: 800px;   padding:10% 5% 20% 5%; background-size: cover;}
.slide_02{display: block; max-height: 800px;  padding:10% 5% 20% 5%;background-size: cover;}
.slide_03{display: block; max-height: 800px;   padding:10% 5% 20% 5%; background-size: cover;}
.slide_04{display: block; max-height: 800px;   padding:10% 5% 20% 5%; background-size: cover;}
.slide-image{display: block; width:70%; height: auto;  ; margin: 0 auto;margin-bottom:5px;}
.slide-animation{display: block; width:70%; max-height: 100%;  height: 320px; margin: 0 auto; margin-bottom: 20px; position: relative; overflow: hidden; border-bottom:1px solid #fff}
.slide_title{ font-size: 1em; width: 100% ; bottom: -30%;  position: relative; display: block; text-align: center; margin: 0 auto;margin-bottom: 10px; font-weight: bold;}
.slide_txt{ font-size: 1.2em; width: 90% ; bottom: -20%; position: relative;  display: block; margin: 0 auto; margin-top: 10px; text-align: center;}
.slide_note{ width: 90% ; bottom: -20%; position: relative; position: relative;  display: block; margin: 0 auto; margin-top: 15px;}


/*For Desktop  ---------------*/
.slide_01{display: block; height: auto;  padding:2% 5% 5% 5%; background-size: cover;}
.slide_02{display: block; height: auto; padding:2% 5% 5% 5%;background-size: cover;}
.slide_03{display: block; height: auto; padding:2% 5% 5% 5%; background-size: cover;}
.slide_04{display: block; height: auto;  padding:2% 5% 5% 5%; background-size: cover;}
.slide-image{display: block; width:70%; height: auto;  ; margin: 0 auto;margin-bottom:10px;}
.slide_title{width: 100% ;bottom:-30%;  position: relative;display: block; margin: 0 auto;}
.slide_txt{ width:90%; bottom: -20%; position: relative; position: relative;  display: block;}

/*For tablet  ---------------*/
@media(max-width:768px) {
.swiper-container{width:90%; /* height: 100%;*/ position:relative; overflow:hidden; z-index:1; margin: 0 auto; z-index: 9998;}
.swiper-slide img{	width: 100%;vertical-align: middle;}
.swiper-slide{flex-shrink:0; height:auto;position:relative}
.swiper-wrapper{height:auto;position:relative;	z-index:1;	display:flex;}
.slide_01{display: block; max-height: 800px;   padding:10% 5% 20% 5%; background-size: cover;}
.slide_02{display: block; max-height: 800px;  padding:10% 5% 20% 5%;background-size: cover;}
.slide_03{display: block; max-height: 800px;   padding:10% 5% 20% 5%; background-size: cover;}
.slide_04{display: block; max-height: 800px;   padding:10% 5% 20% 5%; background-size: cover;}
.slide-image{display: block; width:85%; height: auto;  ; margin: 0 auto;margin-bottom:5px; text-align: center;}
.slide_title{ font-size: 2em; width: 100% ; bottom: -30%;  position: relative; display: block; text-align: center; margin: 0 auto;margin-bottom: 10px; font-weight: bold;}
.slide_txt{ font-size: 1.5em; width:100% ; bottom: -20%; position: relative;  display: block; margin: 0 auto; text-align: center; margin-bottom: 10px;}
.video_btn_area{display: block; width: 90%; height: 30px; text-align: center; bottom: 0%; color: #00b0d0; position: relative; overflow: hidden; margin: 0 auto;}
.video_btn_area a{text-decoration: none;}
.video_hint{display: block;  margin: 0 auto;}
.video_btn{display: block; width: 18px; height: 18px; float: left; margin: 2px 0 0 2px;}
.slide_note{ width: 90% ; bottom: -20%; position: relative; position: relative;  display: block; margin: 0 auto; margin-top: 15px;}
}

/*For Phone  ---------------*/

@media(max-width:414px) {
.swiper-slide img{vertical-align: middle;}
.swiper-slide{flex-shrink:0;  height: 900px; height:auto;position:relative}
.swiper-container{width:100%; height: auto; position:relative;overflow:hidden;z-index:1; margin: 0 auto;}
.slide_01{display: block; max-height: 500px;   padding:5%; background-size: cover;}
.slide_02{display: block; max-height: 500px;  padding:5%;background-size: cover;}
.slide_03{display: block; max-height: 500px;   padding:5%; background-size: cover;}
.slide_04{display: block; max-height: 500px;  padding:5%; background-size: cover;}
.slide-image{display: block; margin: 0 auto; margin-bottom:5px; overflow: hidden;}
.slide_title{ height: 50px;line-height: 1em; width:95% ; bottom: -30%;  position: relative; display: block; text-align: center; margin: 0 auto; margin-bottom:15px; font-weight:400; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.slide_txt{font-size: 1em; line-height:1.2em; width: 90% ; bottom: -35%; position: relative; display: block; margin: 0 auto; margin-top: 0px; margin-bottom: 15px; text-align: center;}
.video_btn_area{display: block; width: 90%; height: 30px; text-align: center; bottom: -30px; color: #00b0d0; position: relative; overflow: hidden;}
.video_hint{display: block;  margin: 0 auto; font-size: 1.2em; font-weight: bold;}
.video_btn{display: block; width: 18px; height: 18px; float: left; margin: 2px 0 0 2px;}
.slide_note{font-size:1.2em; line-height: 1.2em; width: 90% ; bottom: -20%; position: relative; position: relative;  display: block; margin: 0 auto; margin-top: 10px; font-weight: bold;}
.video_position{ padding-top: 35px;}

	
}



@media(max-width:319px) {
.swiper-container{width:100%; max-height: 480px; padding-bottom: 10px; position:relative;overflow:hidden;z-index:1; margin: 0 auto;}
.swiper-pagination{position:absolute;text-align:center;z-index:10;}
.slide_title{ height: 50px;  font-size: 1.7em; line-height: 1em; width:95% ; bottom: -30%;  position: relative; display: block; text-align: center; margin: 0 auto; margin-bottom:15px; font-weight:400; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.swiper-slide img{	width: 60%;vertical-align: middle; text-align: center;}
.swiper-slide{flex-shrink:0; height:auto;position:relative}
.slide-animation{ display: block; width: 100%; position: relative; border-bottom: 1px solid #fff;}
.video_btn_area{display: block; width: 90%; height: 30px; text-align: center; bottom: -30px; color: #00b0d0; position: relative; overflow: hidden;}
.video_btn{display: block; width: 18px; height: 18px; float: left; margin: 2px 0 0 2px;}