#headBan{position: relative;}
#banner {width: 100vw;z-index: 3;position: relative;overflow: hidden;}
#banner .img{overflow: hidden;display: inline-block;}
#banner .img:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 550px;
    background: linear-gradient(to bottom,#000000a6 0%,transparent 100%);
    top: 0;
    z-index: 1;
}
#banner img {position: relative;width: 100vw;height: 100vh;background: no-repeat 50% / cover;}
#banner .pos_abs {width: 100vw;height: 100vh;top: 0;left: 0;}
#banner .info {padding-bottom: 10vh;height: 100vh;}
#banner .info .txt {transition: all 0.7s ease;max-width: 88%;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-box-pack: center;justify-content: flex-end;padding: 0px 60px 0px;z-index: 2;width: 100%;height: 60%;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0px;}
#banner .info .txt * {font-weight: 200;color: var(--white);opacity: 0;-webkit-transform: translateY(15px);transform: translateY(25px);}
#banner .info .txt h3 {letter-spacing: 6px;font-size: 20px;text-align: center;line-height: 140%;font-weight: 400;font-family: 'Montserrat', sans-serif;text-transform: uppercase;color: #ffffff;word-spacing: 100vw;margin-top: 40px;animation: fadeIn 2s both;-webkit-animation: fadeIn 2s both;}
#banner .info .txt {transition: all 0.7s ease;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-box-pack: center;justify-content: flex-end;padding: 0px 0px 0px;z-index: 2;width: 80%;height: 15%;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: -100px;}
#banner .info .txt h3, #banner .info .txt p {color: var(--white);opacity: 0;-webkit-transform: translateY(15px);transform: translateY(25px);animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
#banner .info .txt h4{
    text-align: center;
    margin-top: 0px;
    padding-bottom: 100px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3))) 60% 100%/1px 80px no-repeat;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) 60% 100%/1px 80px no-repeat;
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) 60% 100%/1px 80px no-repeat;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgb(255 255 255 / 60%)) 50% 100%/1px 80px no-repeat;
    -webkit-transform: translateY(15px);
    transform: translateY(25px);
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 1.5px;
    color: #e8e8e8;
}
#banner .info .txt article{text-align: center;font-family: 'Roboto', sans-serif;font-size: 22px;font-weight: 600;text-transform: uppercase;}
#banner .info .txt p {letter-spacing: 15px;font-size: 26px;text-align: center;letter-spacing: 1px;-webkit-transform: translateY(15px);transform: translateY(25px);animation-name: fadeInUp;-webkit-animation-name: fadeInUp;color: #e8e8e8;animation: fadeIn 1s both;-webkit-animation: fadeIn 1s both;}
#banner a.pos_abs {z-index: 2;}

/* slick-current */
#banner .slick-current .info .txt * {opacity: 1;-webkit-transform: translateY(20px);transform: translateY(20px);transition-delay: .3s;-webkit-transition-delay: .3s;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

/* arrow_bg */
#banner .arrow_bg{width:450px;height:140px;left:auto;bottom:-140px;transform-origin:100% 100% 0;display:none}
#banner .arrow{bottom: 20px;right: 60px;width:110px;display:flex;justify-content:space-between;padding:0 30px;position:absolute;z-index: 10;}
#banner .arrow a{width:45px;height:45px;line-height:55px;border:1px solid #fff;border-radius:50%;display:flex;opacity:.65;flex-direction: column;justify-content: center;align-items: center;}
#banner .arrow a:hover{opacity:1}
#banner .arrow a i{color:#fff;}


/* scrollBtn */
.page-scroll a{display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;font-size:12px;writing-mode:vertical-lr;}
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,-100px)}
100%{transform:translate(0px,0px)}
}.page-scroll{bottom: 40%;margin-left:0;left: 50px;z-index:201;text-align:center;position:absolute}
.page-scroll a{font-size:12px;writing-mode:vertical-lr;text-transform:uppercase;letter-spacing:3.5px;font-family: 'Cormorant Garamond', serif;}
.page-scroll.style01 a span{width:0px;height:0px;border-left:0px solid #fff;border-bottom:0px solid #fff}
.page-scroll.style01 a::after{box-sizing:border-box;content:"";position:absolute;top: 60px;right: 20%;width:1px;height:100px;background:#fff;opacity: .6;}
.page-scroll.style01 a::after {
  content: "";
  display: block;
  width: 26px;
  height: 57px;
  margin-top: 20px;
  background: url(/images/39/scroll.png) no-repeat center bottom;
}
.page-scroll.style01 a span{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-animation:none;animation:none;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}
@-webkit-keyframes zeroall{0%{opacity:.1}
30%{opacity:1}
}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}.fadeInUp{animation-name:fadeInUp;animation-duration:1s;animation-fill-mode:both}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}

@media screen and (max-width: 1440px){
	#banner .info .txt{height: 10%;}
	#banner .info .txt h3{/* font-size: 56px; */}
	#banner .slick-current .info .txt p{font-size: 20px;}
	#banner img{width:100%;height:100%;background:no-repeat 50% / cover}
	.page-scroll{
    left: 30px;
}
}

@media screen and (max-width: 1280px){
	#banner img{margin: 60px auto 0px 0px;width:100%;height:100%;}
	#scrollBtn{display:none}
	#banner .info .txt h3{/* font-size: 48px; */}
	#banner .info .txt p{font-size: 16px;}
	#banner .info .txt{height: 0%;top: 0px;}
	#banner .slick-current .info .txt p{font-size: 17px;}
}
@media screen and (max-width: 1140px){
	#banner:before{display: none;}
	#banner .arrow{right: 0;}
	#banner img{    height: 70vh;}
}
@media screen and (max-width: 960px){
	#banner .info .txt{top: -260px;}
	#banner .info .txt h4{font-size: 28px;padding-bottom: 50px;background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgb(255 255 255 / 60%)) 50% 100%/1px 40px no-repeat;}
	#banner .info .txt p{font-size: 15px;}
	#banner img {margin: 60px auto 0px 0px;height: 60vh;}
	#scrollBtn{display: none;}
	#banner .info .txt h3{
    margin-top: 20px;
    font-size: 19px;
    letter-spacing: 4px;
}
	#banner .info{
    padding-bottom: 0vh;
}
}
@media screen and (max-width: 560px){
	#banner .info .txt{top: -220px;width: 100%;}
	#banner .info .txt article{font-size: 18px;font-weight: 300;}
	#banner .info .txt p{font-size: 14px;}
	#banner .slick-current .info .txt p{letter-spacing: 1.2px;}
	#banner img {height: 35vh;}
	#banner .info .txt h3:before{bottom: -31px;width: 1px;height: 25px;}
	#banner img {height: 50vh;margin: 60px auto 0px;}
}