@import "https://fonts.googleapis.com/css?family=Raleway";
#banner .bannerTran{display:-ms-flexbox;display:-webkit-flex;display:-webkit-box;display:flex;margin:0 auto;position:relative;overflow:hidden;height:auto;min-height:200px;z-index:1;min-height:34.4271vw}
.swiper-wrapper .slick-slider,.swiper-wrapper .slick-slider .slick-list,.swiper-wrapper .slick-slider .slick-track,.swiper-wrapper .slick-slider li{width:100%;height:100%;display:block}
#banner .slick-slide{position:relative;overflow:hidden}
#banner .slick-slide >a{display:block;position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;}
#banner .slick-slide a img{width:100%}
#banner .slick-slide .art{overflow:hidden;width: 690px;position:absolute;right: calc(50% - 90px);bottom: 240px;z-index: 5;padding:50px 100px;color: #fff;}
#banner .slick-slide .art a.link{content:'';position:absolute;top:0;bottom:0;left:0;right:0}
#banner .slick-slide h2{font-size: 44px;line-height: 120%;}
#banner .slick-slide p{line-height: 130%;font-size: 20px;margin-top: 30px;letter-spacing: 1px;}
#banner .slick-slide b{margin-top: 60px;display:block;text-align: center;}
#banner .slick-slide b a{font-size: 18px;color: #f2f2f2;font-family:'Raleway',sans-serif;transition:all linear .3s;}
#banner video,#banner iframe{position: absolute;top: 0;left: 0;z-index: 1;width: auto;height: 100%;transform: scale(1.2);transform-origin: left center 0;}
#banner .slick-dots{bottom:60%;text-align:left;margin-left:20px;width:28px}
#banner .slick-dots li button:before,#banner .slick-dots li.slick-active button:before{color: #ffffff;}
#banner .slick-dots li button:before{text-shadow:0 0 5px #fff,0 0 5px #fff}
#views{width:100%; position:relative;overflow: hidden;}
.firstview-btn{display:block;bottom:-6vh;font-weight:bold;letter-spacing:0}
.firstview-btn a{position:relative;display:inline-block}
.firstview-btn a:before{position:absolute;content:'';display:block;height:2px;width:100%;bottom:0;background-color:#ffffff;opacity:0.3;z-index:1}
.firstview-btn a:after{position:absolute;content:'';display:block;height:2px;bottom:0;z-index:2;background:#28a7e1}
.firstview-btn a svg{position:absolute;right:0}
.firstview-btn a svg polyline{fill:none;stroke:#fff}

@media print, screen and (min-width: 768px) {
    .firstview-btn{font-size:15px}
}
@media only screen and (min-width: 415px) and (max-width: 767px) {
    .firstview-btn{bottom:-5vmin}
}
@media only screen and (max-width: 414px) {
    .firstview-btn{bottom:-5vmin}
}
@media print, screen and (min-width: 768px) {
    .firstview-btn a{width:138px;padding-bottom:30px;color:#fff;font-size:10px;text-align:initial}
}
@media only screen and (min-width: 415px) and (max-width: 767px) {
    .firstview-btn a{width:33vw;padding-bottom:10px;color:#fff;font-size:12px}
}
@media only screen and (max-width: 414px) {
    .firstview-btn a{width:36vw;padding-bottom:20px;color:#fff}
}
@media only screen and (max-width: 767px) {
    .firstview-btn a:before{height:2px}
}
@media print, screen and (min-width: 768px) {
    .firstview-btn a:after{width:60px;-webkit-transition:width 0.4s cubic-bezier(0.075,0.82,0.165,1),background-color 0.4s cubic-bezier(0.075,0.82,0.165,1);transition:width 0.4s cubic-bezier(0.075,0.82,0.165,1),background-color 0.4s cubic-bezier(0.075,0.82,0.165,1)}
}
@media only screen and (max-width: 767px) {
    .firstview-btn a:after{width:12.5vw;height:2px}
}
@media print, screen and (min-width: 768px) {
    .firstview-btn a:hover:after{width:100%;background:#28a7e1}
}

@media print, screen and (min-width: 768px) {
    .firstview-btn a svg{width:12px;height:12px;top:calc(50% - 21px)}
}
@media only screen and (min-width: 415px) and (max-width: 767px) {
    .firstview-btn a svg{width:9px;height:10px;top:calc(50% - 10px)}
}
@media only screen and (max-width: 414px) {
    .firstview-btn a svg{width:9px;height:10px;top:calc(50% - 15px)}
}
@media only screen and (max-width: 767px) {
  .mainvisual-slider{width:95vw;-webkit-transform:matrix(1,0,-0.42,1,0,0);transform:matrix(1,0,-0.42,1,0,0)}
}
@media (max-width: 1440px) {
	#banner .slick-slide .art{bottom: 110px;right: calc(50% - 200px);}
}
@media (max-width: 1280px) {
	#views:before{border-width: 100vh 280px 0 0;}
	#views:after{border-width: 50px 0 0 100vw;}
	#banner .slick-slide .art{width: 510px;right: calc(50% - 0px);bottom: 100px;padding: 50px 10px;}
	#banner .slick-slide h2{font-size: 30px;line-height: 120%;}
}
@media print, screen and (max-width: 1140px) {
	#banner .slick-slide .art{width: 670px;right: calc(50% - 290px);bottom: 60px;padding: 50px 10px;}
}
@media (max-width: 1024px) {
	#banner{margin-top:56px}
	#banner .slick-slide >a{width:100%}
	#views:before,
	#views:after{ display:none;}
	#banner .slick-slide .art{bottom: 60px;}
	#banner .slick-slide h2{font-size: 38px;}
	#banner .slick-slide p{font-size: 18px;    margin-top: 20px;}
}
@media (max-width: 768px) {
	#banner .slick-slide a img{height: 450px;}
	#banner .slick-slide h2{font-size: 30px;}
	#banner .slick-slide b{margin-top: 30px;}
	#banner .slick-slide .art{position:absolute;bottom: 10px;z-index: 5;padding: 50px 10px;color: #fff;}
	#banner .slick-slide .art{width: 440px;left: 80px;bottom: 145px;padding: 10px 10px;}
	#banner .slick-slide a img{height: 510px;}
}
@media (max-width: 480px) {
    #banner video, #banner iframe{left: -40%;}
	#banner .slick-slide a img{height: 420px;}
	#banner .slick-slide h3{font-size: 13px;}
	#banner .slick-slide h2{font-size: 22px;}
	#banner .slick-slide p{font-size: 14px;}
	#banner .slick-slide .art{left: 44px;padding: 0;width: calc(100% - 80px);bottom: 120px;}
}