#banner{width:100%;z-index: 2;position:relative;overflow:hidden}
#banner .photoBox{position:absolute;width: 8%;height: 68%;z-index: 2;right: 0;}
#banner .photoBox img{animation:moveObject 100s linear infinite;height:100%;object-fit:cover}
@keyframes moveObject{0%{object-position:0% 50%}50%{object-position:100% 50%}100%{object-position:0% 50%}}
#banner .img{overflow:hidden;display:inline-block}
#banner .img  img{position:relative;width: 100%;min-width: 100%;background:no-repeat 50% / cover;height: 90vh;border-radius: 0 0 160px  0;}
#banner .pos_abs{width:100%;min-width:100%;top:0;left:0}
#banner .info{min-width: 100%;height: 100%;display: flex;align-items: center;z-index: 20;}
#banner .info .txt *{color:var(--white);opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt .more_btn a{transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
#banner .info .txt h2{display: contents;//* align-items: flex-start; */}
#banner .info .txt h2{letter-spacing: 7px;font-size: 100px;line-height: 100%;font-weight: 500;font-family:'Cormorant',sans-serif;text-transform:uppercase;color:#ffffff;position:relative;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both;word-spacing: 100vw;}
#banner .info .txt h2 em{font-size:30px;text-align:right;line-height:1.1;letter-spacing:0;font-weight:300;font-style:normal}
#banner .info .txt p:before{content:"";width: 60px;height: 2px;background: #ffffff70;display:block;position:absolute;top: -30px;left:0}
#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}
#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: center;padding:0;z-index:2;width: 65%;height: 40%;margin:auto;position:absolute;top: 0;left:0;right:0;bottom:0;align-items: flex-start;}
#banner .info .txt:before {content: '';position: absolute;top: 0;right: 55%;background-image: url(/images/39/img-banner02.png);background-size: contain;background-repeat: no-repeat;width: 216px;height: 226px;z-index: 10;transform-origin: bottom right;animation: bannerMouse1 8s infinite ease-in-out;}
@keyframes bannerMouse1{0%{transform:rotate(0deg)}
10%{transform:rotate(0deg)}
20%{transform:rotate(5deg)}
30%{transform:rotate(0deg)}
40%{transform:rotate(5deg)}
50%{transform:rotate(0deg)}
100%{transform:rotate(0deg)}
}
#banner .info .txt h3,#banner .info .txt p{color:var(--white);opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt h3{font-size:33px;font-weight:bold;margin-top:20px;line-height:1em;-webkit-transition-delay:0.3s;transition-delay:0.3s;letter-spacing:2px}
#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{font-weight: 400;font-size:24px;margin-top: 70px;letter-spacing:1px;line-height: 140%;}
#banner .info .txt p font{font-weight:500;font-size:36px;letter-spacing:5px;margin-bottom:10px;text-align:center}
#banner .info .txt p font b{font-weight:500;font-size:36px;vertical-align:baseline;color:var(--primary)}
#banner .info .txt .bannerBtn{opacity:0;margin-top:40px;display:block;width:220px;height:50px;pointer-events:auto;display:none}
#banner .info .txt .bannerBtn a{position:relative;color:#fff;display:block;width:100%;min-width:100%;letter-spacing:0.5px;overflow:hidden}
#banner .info .txt .bannerBtn .btnText:hover{color:#000}
#banner .info .txt .bannerBtn .btnText:hover::before{background-color:#eee}
#banner .info .txt .bannerBtn .btnText:hover span::before{border-color:transparent transparent transparent #000}
#banner .info .txt .bannerBtn .btnText:hover span::after{background-color:#000}
#banner .info .txt .bannerBtn .btnText::before{content:"";position:absolute;top:0;right:0;width:100%;min-width:100%;border:1px solid #fff;-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#banner .info .txt .bannerBtn .btnText{position:relative;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0px 25px;z-index:1;font-family:'Poppins',sans-serif;text-transform:uppercase;text-align:center;justify-content:center;font-size:13px;font-weight:400}
#banner .info .txt .bannerBtn span{position:absolute;top:50%;right:-5px;width:45px;-webkit-animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite;animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite}
#banner .info .txt .bannerBtn span::after{content:"";position:absolute;top:30%;left:0;margin-top:-1px;width:calc(100% - 5px);height:1px;background-color:#fff;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#banner a.pos_abs{z-index:2}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s}
#banner .slick-current .info .txt p{transition-delay:.6s;-webkit-transition-delay:.6s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both}
#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;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1);opacity:1;-webkit-transition:-webkit-transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s;transition:transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s}
#banner .more_btn a{border-radius:30px 0 30px 0px}

/* arrow_bg */
#banner .arrow_bg{width:450px;height:140px;left:auto;bottom:-140px;transform-origin:100% 100% 0;display:none}
#banner .arrow{width:50px;display:flex;justify-content:space-between;padding:0 30px;position:absolute;z-index:10;flex-direction:column;left:0%;top:65%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display: none;}
#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;margin:5px}
#banner .arrow a.prev{-webkit-transform:rotate(180deg)}
#banner .arrow a svg{fill:#ffffff;width:13px}
#banner .arrow a:hover{opacity:1;background-color:var(--primary);border:1px solid var(--primary)}
#banner .arrow a i{color:#fff}

/* scrollBtn */
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,15px)}
100%{transform:translate(0px,0px)}
}.page-scroll{bottom: 50%;margin-left:0;z-index:888;text-align:center;position:absolute;left: 45px;transform: translate(-50%,25%);}
.page-scroll a{color:#fff;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;text-transform:uppercase;display:flex;flex-direction:column;}
.page-scroll.style01 a b{color: var(--white);font-weight: 400;font-size: 14px;letter-spacing: 2.5px;writing-mode: vertical-rl;}
.page-scroll.style01 a span::after{content:"";position:absolute;top:-10px;right:0;z-index:1;width:1px;height: 70px;background: #ffffff;background-size:cover;background-repeat:no-repeat;animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite;-webkit-animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite}
@keyframes scrollarrow1{0%{transform:translateY(-150%)}
50%{transform:translateY(0%)}
to{transform:translateY(500%)}
}
@-webkit-keyframes scrollarrow1{0%{-webkit-transform:translateY(-150%)}
50%{-webkit-transform:translateY(0%)}
to{-webkit-transform:translateY(500%)}
}
.page-scroll.style01 a span{position:absolute;right:0;background: rgb(255 255 255 / 70%);background-size:cover;background-repeat:no-repeat;width:1px;height: 200px;top: 160%;left:50%;transform:translate(-50%,0%);overflow:hidden}
#banner .item:before{content:'';position:absolute;height:100%;width: 100%;top:0;left: 0;background: url(/images/39/img_banner.png) no-repeat 50% 0;background-size:cover;z-index: 2;opacity: .2;}

/* scroll_down */
#scroll_down{position:absolute;right:-110px;bottom:-10%;z-index:100}
#scroll_down .circle_box{width:80%}
#headBan{position:relative}
#CalendarBox{position:absolute;width:550px;left:0;bottom:0px;z-index:100;padding: 16px 0 8px 90px;background-color:var(--primary);display:flex;align-items:baseline;justify-content:space-between}
#CalendarBox .info h2{font-size: 23px;font-weight:400;margin-right:10px}
#CalendarBox .info{display:flex;align-items:baseline}
#CalendarBox .info p{font-size: 15px;letter-spacing:1px;opacity:0.5}
#CalendarBox .info h2,#CalendarBox .info p{color:#fff}
#CalendarBox .info h2 svg{fill:#fff;width:25px;height:25px;margin-bottom: 5px;margin-right: 10px;}
#CalendarBox .more_btn{opacity:.6}
#CalendarBox .more_btn a{padding:10px 30px 10px 0px}
#CalendarBox .more_btn.white a:before{background:none}

@media screen and (max-width: 1640px) {
    .page-scroll{left: 40px;}
    #banner:before{left: 5vw;}
}

@media screen and (max-width: 1470px) {
	.page-scroll{left: 40px;}
	#banner:before{left: 5.5vw;}
	#banner .slick-current .info .txt p{font-size:20px}
	#banner .img img{height:100vh;background:no-repeat 50% / cover}
	#banner .info .txt h3 b{font-size: 63px;word-spacing: 100%;max-width: 100%;}
	#banner .info .txt{width:85%}
	#scroll_down button{width:113px}
	#scroll_down{bottom:-10%}
}
@media screen and (min-width:1281px){
    #banner .item{margin-top:100px;margin-right:250px;position:relative;background:#fff}
}
@media screen and (max-width: 1280px) {
    #banner .img img{height: 90vh;}
    #scrollBtn,#banner:before,#banner .photoBox{display:none}
	#banner{padding-top: 80px;}
	#banner .info .txt p{font-size:16px}
	#banner .info .txt{top: -70px;display: flex;justify-content: flex-start;width: 90%;}
	#banner .info .txt .bannerBtn{width:180px;margin-top:20px}
	#banner .info .txt .bannerBtn span::after{width:calc(100% - 25px)}
	#banner .info .txt .bannerBtn span{right:-25px;width:40px}
	#banner .info .txt h3{display: flex;flex-direction: column;align-items: flex-start;}
	#banner .info .txt h3 b{font-size: 57px;} 
    #banner .info .txt h2{font-size: 80px;}
}

@media (max-width: 1180px) {
    #banner .info .txt .bannerBtn{margin-top:20px}
    #banner:before,#banner .arrow{display:none}
    #banner .arrow{right:0}
    #banner .info .txt h3 b{font-size: 62px;}
    #banner .info .txt p font b,#banner .info .txt p font{font-size:25px}
    #scroll_down button img {width: 73%;}
	#scroll_down button{width: 130px;}
    #scroll_down{display: none;}
}

@media screen and (max-width: 960px) {
    #banner .info .txt h3{font-size:30px}
    #banner .info .txt p{font-size:15px}
    #banner .info .txt .bannerBtn a{width:200px}
	#banner .slick-current .info .txt p{font-size:16px;margin-bottom:30px}
    #banner .img img{height: 64vh;}
    #banner .info .txt h2{font-size: 60px;}
	#CalendarBox{width: 70%;padding: 20px 0 20px 30px;translate: 0 90px;display: flex;flex-direction: column;}
	#CalendarBox .info{display: flex;flex-direction: column;}
    #CalendarBox .more_btn{margin-top: 0px;}
	#CalendarBox .info h2{font-size: 22px;}
	#CalendarBox .info p{font-size: 16px;}
	#scrollBtn{display:none}
}

@media screen and (max-width: 560px) {
    #banner .info .txt{top: -50px;}
    #banner .info .txt{width: 90%;}
    #banner .info .txt article{font-size:18px;font-weight:300}
    #banner .info .txt p font,#banner .info .txt p font b{font-size:20px}
    #banner .info .txt h3 b{font-size:40px;letter-spacing: 4px;}
    #banner .slick-current .info .txt p{letter-spacing: 0.2px;margin-bottom: 12px;}
    #banner .info .txt h3:before{bottom:-31px;width:1px;height:25px}
    #banner .info .txt .bannerBtn{width:120px}
    #banner .info .txt .bannerBtn .btnText{padding:0px 5px;height:40px}
    #banner img{height: 50vh;}
    #banner .info .txt:before{right: 5%;}
    #scroll_down{display: none;}
}