#headBan { position: relative }
#banner { width: 100%; z-index: 3; position: relative; overflow: hidden; }
#banner .item { display: flex; flex-direction: column; align-items: flex-end }
#banner .img { overflow: hidden; display: inline-block; position: relative; width: 100%; right: 0; }
#banner .img:before,#banner .img:after { position: absolute; width: 100%; height: 100%; background: hsl(0deg 0% 0%/15%); top: 0; left: 0; z-index: 1; content: ""; opacity: .3; }
#banner .img:after { background: linear-gradient(to bottom,#17171757 0%,rgb(26 24 25/0%) 40%); opacity: 1; }
#banner img { position: relative; width: 100%; height: 100vh; object-fit: cover; object-position: bottom; }
#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 em { font-family: 'Cardo',sans-serif; font-style: initial; margin-bottom: 15px; letter-spacing: 0.5px; font-weight: 300 }
#banner .info .txt h3 { letter-spacing: 4px; font-size: 62px; text-align: left; line-height: 130%; font-weight: 100; text-transform: uppercase; padding-bottom: 10px; position: relative; margin-top: 30px; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; animation: fadeIn 1s both; -webkit-animation: fadeIn 1s both; font-family: "Cardo",serif; max-width: 40vw; }
#banner .info .txt .bannerLogoBox { margin-bottom: 10px }
#banner .info .txt .bannerLogoBox img { width: 100%; height: 100%; object-fit: contain; margin: 0 }
#banner .info .txt { transition: all 0.7s ease; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-pack: center; justify-content: flex-end; padding: 0px 0px 0px; z-index: 2; width: 83%; height: 45%; margin: auto; position: absolute; top: -100px; left: 0; right: 0; bottom: 0; align-items: flex-start; flex-direction: column; align-content: center; display: flex; }
#banner .info .txt .h3,#banner .info .txt p { color: #fff; opacity: 0; -webkit-transform: translateY(15px); transform: translateY(25px); text-align: left; font-weight: 300; font-size: 24px; letter-spacing: 9.5px; margin-bottom: 0px; }
#banner .info .txt article { text-align: center; font-family: 'Cardo',sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase }
#banner .info .txt p { letter-spacing: 15px; text-align: left; font-weight: 300; font-size: 24px; letter-spacing: 4.5px; margin-bottom: 0px; }
#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%; height: 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%; height: 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: 'Cardo',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 }
/* slick-current */
#banner .slick-current .info .txt p { transition-delay: .6s; -webkit-transition-delay: .6s; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; color: #e8e8e8; 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 }
/* 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: 1%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) }
#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: #ea5c1f; border: 1px solid #ea5c1f }
#banner .arrow a i { color: #fff }
/* scrollBtn */
@keyframes web_menu002 {
  0% { transform: translate(0px,0px) }
  50% { transform: translate(0px,5px) }
  100% { transform: translate(0px,0px) }
}
@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: 47.2%; -webkit-transform: translateY(-50%); transform: translateY(30%); }
.page-scroll a { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.page-scroll.style01 a b { color: #ffffff; font-size: 11px; letter-spacing: 2px; font-family: 'Cardo',sans-serif; font-weight: 200; text-transform: uppercase; }
.page-scroll.style01 a span { height: 120px; width: 1px; background: #ffffff4f; margin: 20px 0; position: relative; }
.page-scroll.style01 a span:before { content: ''; position: absolute; top: 0; left: 0; height: 20px; width: 1px; background: #ffffff; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; }
@keyframes fish {
  0% { top: 0; }
  100% { top: 60px; }
}
.papabar { bottom: 40px; margin-left: 0; z-index: 888; text-align: center; position: absolute; right: 10%; -webkit-transform: translateY(-50%); transform: translateY(30%) }
.papabar .count { color: #fff; letter-spacing: 12px; }
@media screen and (max-width:1440px) {
  #banner .info .txt {height: 50%;}
  #banner .info .txt h3 { font-size: 52px; }
  #banner .slick-current .info .txt p { font-size: 20px }
  #banner img { width: 100%; height: 100vh; background: no-repeat 50%/cover }
}
@media screen and (max-width:1280px) {
  #banner .img { width: 100% }
  #banner img { margin: 0px auto 0px; width: 100%; }
  #scrollBtn,#banner:before { display: none }
  #banner .info .txt h3 { font-size: 45px; max-width: 44vw; }
  #banner .info .txt p { font-size: 16px; width: 50% }
  #banner .slick-current .info .txt p { font-size: 15px; }
  #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 .bannerLogoBox { margin: 0; text-align: center; width: 80px }
}
@media (max-width:1180px) {
  #banner .info .txt .bannerBtn { margin-top: 20px }
}
@media screen and (max-width:1140px) {
  #banner:before,#banner .arrow { display: none }
  #banner .arrow { right: 0 }
}
@media screen and (max-width:960px) {
  #banner .info .txt h3 { font-size: 30px }
  #banner .info .txt p { font-size: 15px; width: 100%; }
  #banner .info .txt .bannerBtn a { width: 200px }
  #scrollBtn { display: none }
  #banner .info .txt .bannerLogoBox img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; margin: 0; text-align: center }
  #banner .info .txt h3 { margin-top: 10px; font-size: 47px; padding-bottom: 4px; max-width: 80vw; }
  #banner .slick-current .info .txt p { font-size: 15px }
  .papabar { display: none; }
}
@media screen and (max-width:560px) {
    #banner img{height:80vh}
  #banner .info .txt h3 { font-size: 28px; }
  #banner .info .txt {width: 100%;height: 10%;}
  #banner .info .txt article { font-size: 18px; font-weight: 300 }
  #banner .info .txt p { font-size: 14px; width: 100% }
  #banner .slick-current .info .txt p { letter-spacing: 1.2px }
  #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 }
}