#banner{width:100%;height: 98vh;z-index: 1;position:relative;overflow:hidden;background-color: #ededed;}
#banner::before {content: "";width: 1px;height: 100%;display: block;background: rgb(54 54 54 / 15%);position: absolute;bottom: 0;right: 100px;z-index: -1;pointer-events: none;}
#banner::after {content: "";width: 100%;height: 100%;display: block;background-image: url(/images/44/img_banner_bg2.jpg);background-size: cover;position: absolute;bottom: 0;right: 0;z-index: -2;}
#banner .wrap{display: grid;grid-template-columns: 802px 1fr;gap:  20px 20px;width: min(1400px, 95%);margin: auto;align-items: center;height: 98vh;position: relative;}
#banner .main-slider{position:relative;z-index:20;margin-top: 100px;margin-left: -40px;}
#banner .bnImgBox *{transition:unset;-webkit-transition:unset}
#banner .bnImgBox{width: 100%;height: 100%;margin:auto;pointer-events:none;position: absolute;bottom: 0;left: 50%;transform: translate(-50%, 0%);line-height: 2;z-index: 15;text-align: left;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;}
#banner .bnImgBox .img{position:absolute;overflow: inherit;}
#banner .bnImgBox #fly-could{left: 9vw;top: 30%;}
#banner .bnImgBox #fly-could02{position: absolute;bottom: 0;}
#banner .bnImgBox .bannerBg-round2{transform: translate(60%, -50%);top: 4.5%;}
#banner .img{overflow:hidden;display:inline-block}
#banner .img  img{position:relative;width: 100%;height: 100%;margin: auto;}
#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 *{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; */}
#banner .info .txt h2{
    letter-spacing: -4px;
    font-size: 90px;
    line-height: 0.9;
    font-weight: 500;
    font-family: "Karla", sans-serif;
    text-transform: uppercase;
    position: relative;
    background: linear-gradient(90deg, var(--primary), var(--secondary), #f2e8cb 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#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{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;z-index:2;margin:auto;gap: 20px;}
#banner .info .txt em{font-style: normal;position: relative;padding-left: 50px;color: var(--black);font-size: 22px;font-family: "Karla", sans-serif;}
#banner .info .txt em:before{content:"";width: 30px;height: 1px;background: var(--primary);display:block;position:absolute;top: 50%;left:0}
#banner .info .txt h3{font-size: 28px;font-weight: 300;margin-top: 0px;line-height:1em;-webkit-transition-delay:0.3s;transition-delay:0.3s;letter-spacing:2px}
#banner .info .txt p{font-weight: 600;font-size: 25px;x: 140%;color: var(--black);letter-spacing: 2px;line-height: 1.9;}
#banner a.pos_abs{z-index:2}
#banner .slick-current .info .txt *{-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: 0;margin-left:0;z-index:888;text-align:center;position:absolute;left: 66px;}
.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;align-items: center;gap: 70px;}
.page-scroll.style01 a b{font-size: 14px;letter-spacing: 2.5px;writing-mode: vertical-rl;font-family: "Karla", sans-serif;color: #797979;}
.page-scroll.style01 a span::after{content:"";position:absolute;top:-10px;right:0;z-index:1;width:1px;height: 50px;background: white;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: #797979;width:1px;height: 235px;top: 160%;overflow:hidden;display: flex;justify-content: center;position: relative;}

#headBan{position:relative}

.bannerArea{z-index: 10;position:relative}
.bannerArea img{display:block}
.bannerArea .rightbox{transition:0.9s 0.6s;align-items: stretch;padding-left: 40px;position:relative;z-index:130;display: flex;transform: translateY(50px);}
.bannerArea .rightbox .titleBox{position:absolute;top: 0%;transform: translate(215px,-20px);z-index:20}
.bannerArea .rightbox .titleBox em{font-size: 50px;font-style: normal;font-family: "Karla", sans-serif;font-weight: 500;color: var(--primary);letter-spacing: -2px;}
.bannerArea .rightbox .stext{position:absolute;width: 250px;top: 36%;transform: translate(0,160px);left: 80px;color: #87909b;font-size: 12px;}
.bannerArea .rightbox .leftimg{transform: translate(0, -120px);}
.bannerArea .rightbox .rightimg{transform:translate(-25px,80px)}
.bannerArea .rightbox .rightimg .slick-dots{position:relative;z-index:15;bottom:auto;left:auto;padding: 0px 0 0 0;text-align:center;margin-top: 20px;}
.bannerArea .rightbox .rightimg .slick-dots li{margin-right:12px;position:relative;width:17px;height:17px}
.bannerArea .rightbox .rightimg .slick-dots li::before{content:"";width:5px;height:5px;display:block;background:#a8a6a5;border-radius:99em;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.bannerArea .rightbox .rightimg .slick-dots li::after{content:"";width:17px;height:17px;display:block;position:relative;border-radius:99em}
.bannerArea .rightbox .rightimg .slick-dots li button{display:none}
.bannerArea .rightbox .rightimg .slick-dots li.slick-active::after{border: 1px solid #a8a6a5;}
.bannerArea .rightbox .rightimg .slick-dots li.slick-active::before{background:#000}
.bannerArea .rightbox ul.bannerList,.bannerArea .rightbox ul.bannerPrev{width:315px;overflow:hidden;margin:0 auto}
.bannerArea .rightbox ul.bannerList li img,.bannerArea .rightbox ul.bannerPrev li img{display:block;width:100%}

#banner.scroll{overflow:unset}
    
@media screen and (max-width: 1700px) {
    .page-scroll{left: 1.5%;}
}
@media screen and (max-width: 1650px) {
    .bannerArea .rightbox{padding-left:0px;display:block}
	.bannerArea .rightbox .titleBox{position:relative;top:auto;transform: translate(190px,-60px);}
	.bannerArea .rightbox .leftimg{transform: translate(20px,-40px);position:absolute;top:0;left:0;opacity: 1;}
	.bannerArea .rightbox .rightimg{transform: translate(60px,0px);padding-bottom:50px}
	.bannerArea .rightbox .stext{top:40%;left:20px}
	.bannerArea .rightbox::before{top:41%}
	.bannerArea .rightbox .titleBox em{font-size:46px}
	#banner .info .txt h2{font-size:80px}
}

@media screen and (max-width: 1470px) {
    .page-scroll, .bannerArea .rightbox .titleBox{display:none;}
    #banner .img img{width:84%;height:84%}
	#banner .slick-current .info .txt p{font-size:20px}
	#banner .info .txt h3 b{font-size:63px;word-spacing:100%;max-width:100%}
	#banner .info .txt{width: 88%;}
	#banner .wrap{grid-template-columns:740px 1fr;height:700px;width:90%;margin:70px auto 0}
}
@media screen and (min-width:1281px){
    #banner .item{position:relative;}
}
@media screen and (max-width: 1280px) {
    #scrollBtn,#banner .photoBox{display:none}
	#banner{padding-top: 85px;height: 100vh;}
	#banner .info .txt{top: -70px;display: flex;justify-content: flex-start;width: 90%;}
	#banner .info .txt p{font-size:16px}
	#banner .info .txt h3{display: flex;flex-direction: column;align-items: flex-start;}
    #banner .info .txt h2{font-size: 80px;}
	.bannerArea::before{display:none}
	.bannerArea{flex-direction:column}
    #banner .bnImgBox{height:80%;top:70%}
	#banner .wrap{height:100vh;width:95%;margin:auto}
    .bannerArea .rightbox::before, .bannerArea .bannerArea .rightbox .stext{display:none}
}


@media (max-width: 1180px) {
    .bannerArea {margin-top: 110px;}
    #banner .main-slider{margin-top: -80px;margin-left: 0;}
    #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}
    #banner .wrap{grid-template-columns:540px 1fr;height:700px}
	#banner .wrap{height:40vh;width:100vw}
	#banner::after{background-position:right}
}

@media screen and (max-width: 960px) {
	#banner{height: 80vh;}
    #banner .main-slider{margin-top: 120px;padding: 0 5%;}
    .bannerArea .rightbox .leftimg, .bannerArea .rightbox .rightimg{display:none;}
    #banner .info .txt h3{font-size:30px}
    #banner .info .txt p{font-size:15px}
    #banner .info .txt h2{font-size: 60px;}
	#banner .slick-current .info .txt p{font-size: 20px;margin-bottom:30px}
 	#scrollBtn{display:none}
	#banner .wrap{height:40vh;grid-template-columns: 1fr;display: block;}
	#banner .img img{width:100%;height:70%}
}
@media (max-width:767px){
}
@media screen and (max-width: 560px) {
    .bannerArea{display: none;}
    #banner .main-slider{margin-top: 50px;padding: 0 5%;}
    #banner .info .txt{top: -50px;}
    #banner .info .txt{width: 98%;gap: 10px;}
    #banner .bnImgBox #fly-could02{top:130px}
	#banner .info .txt h2{font-size:50px}
	#banner .info .txt h3{font-size:22px}
}