#banner,#banner .item { position: relative; background: #fff; z-index: 987; height: 100vh; }
#banner,#banner * { -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -ms-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out; }
#banner:before { content: ''; width: 100%; height: 1px; background: #ffffff; opacity: 0.35; position: absolute; bottom: 5.7vw; left: 0; z-index: 3 }
#banner:after { content: ''; height: 5.7vw; aspect-ratio: 1/1; position: absolute; bottom: 0; right: 7vw; background: var(--white); z-index: 3; }
#banner .item a { position: absolute; width: 100%; height: 100%; background: rgb(235 235 235/0%); top: 0; left: 0; z-index: 2 }
#banner .info { position: absolute; width: 100%; display: flex; left: 0; bottom: 0; z-index: 3; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 14%; flex-direction: column; justify-content: center; align-items: flex-start; bottom: 25%; }
#banner .item:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; background: rgb(0 0 0/20%); z-index: 2; }
#banner .info article { display: block; line-height: 190%; font-size: 20px; font-weight: 300; color: #fff; margin-top: 20px; letter-spacing: 3px; width: min(90%,600px); text-align: left; }
#banner .info p { color: #fff; font-size: max(3.6*(1vw + 1vh)/2,30px); line-height: 1.4; text-transform: uppercase; font-weight: 500; letter-spacing: 4px; word-break: keep-all; width: min(100%,600px); }
#banner .img { position: relative; width: 100vw; height: 100vh; background: no-repeat 50%/cover; }
#banner .img img,#banner .img video,#banner .img iframe { position: absolute; width: 100vw; height: 119%; left: 0; top: 0; object-fit: cover }
#banner .slick-active .img { -webkit-transform: scale(1); transform: scale(1); animation: banerBg 6s infinite linear; -webkit-animation: banerBg 0s infinite linear; }
#banner #countbanner { position: absolute; z-index: 100; left: 5.5%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; bottom: 0; }
#banner #countbanner:after,#banner #countbanner:before { content: ''; width: 1px; height: 22%; background: #ffffff; opacity: .35; }
#banner #countbanner:after { height: 33vh; }
#banner .maalinebox { display: flex; flex-direction: column; align-items: center }
#banner .maalinebox { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; justify-content: center }
#banner .maalinebox span:not(.longline,.progress-bar) { font-size: 12px; color: var(--white); width: 40px; aspect-ratio: 1/1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255/50%); border-radius: 50px; line-height: 1; font-family: "Ubuntu",sans-serif; }
#banner .maalinebox #current-slide span { border: 1px solid rgb(255 255 255/50%) }
#banner .maalinebox #current-slide2 span,#banner .maalinebox #total-slides span { border-color: rgb(255 255 255/20%); color: rgb(255 255 255/30%) }
#banner .maalinebox #current-slide2 { display: flex; flex-direction: column; gap: 10px }
#banner .maalinebox #total-slides { display: flex; flex-direction: column; gap: 10px }
#banner .longline { position: absolute; width: 61px; height: 1px; left: 60px; transition: top 0.3s ease; display: none; }
#banner .longline .progress-bar { position: absolute; background: #cdcdcd; top: 0px; height: 1px; opacity: .4 }
#banner #countbanner .updownbox { display: flex; margin-right: 20px }
#banner #countbanner .updownbox .slick-arrow:hover svg { fill: #000000; border: #ffffff 1px solid; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; background: aliceblue }
#banner #countbanner .updownbox svg { width: 52px; aspect-ratio: 1/1; border-radius: 50%; border: #ffffff 1px solid; fill: #ffffff; cursor: pointer }
#banner .ytp-chrome-top { display: none }
.bannergotoicon { position: absolute; bottom: 2%; right: 8vw; display: flex; gap: 10px; display: none; }
.bannergotoicon a { background: url(/images/40/icon_bg.png); background-size: cover; background-position: 50%; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bannergotoicon a:hover { filter: brightness(1.1); }
#banner .bannergotoicon a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
/* scrollBtn */
#scrollBtn { position: absolute; z-index: 60; width: 5.7vw; aspect-ratio: 1/1; bottom: 0; right: 7vw; display: flex; align-items: center; flex-direction: column; justify-content: center; }
#scrollBtn font { align-items: center; cursor: pointer; justify-content: center; display: flex; border-radius: 0; }
#scrollBtn font img { animation: scrolldownrun 1.2s linear infinite; }
#scrollBtn span { text-transform: uppercase; color: #ffffff; display: none; }
@keyframes scrolldownrun {
  0% { transform: translate(0,-5px); }
  50% { transform: translate(0,10px); }
  100% { transform: translate(0,-5px); }
}
#banner .banner_wrap svg.background_txt { position: absolute; top: 16%; left: 0; z-index: -1; font-family: 'Oswald',sans-serif; font-size: 290px; width: 100%; height: 290px; }
@-webkit-keyframes banerBg {
  0% { -webkit-transform: scale(1) }
  100% { -webkit-transform: scale(1.1) }
}
@keyframes banerBg {
  0% { transform: scale(1) }
  100% { transform: scale(1.1) }
}
@-webkit-keyframes godown {
  0%,100% { padding: 0 0 25px 10px }
  50% { padding: 10px 0 15px 10px }
}
@keyframes godown {
  0%,100% { padding: 0 0 25px 10px }
  50% { padding: 10px 0 15px 10px }
}
@media screen and (max-width:1680px) {
  #banner #countbanner { left: 2.5% }
}
@media screen and (max-width:1470px) {
  #banner:before { bottom: 5vw; }
  #banner:after { height: 5vw; width: 5vw; }
  .bannergotoicon { right: 10vw; }
  #scrollBtn { width: 5vw; }
  #scrollBtn font img { width: 5px; }
  #banner .info {bottom: 20%;}
}
@media screen and (max-width:1280px) {
  #banner .info p {   }
  #banner .longline { width: 80px }
  #banner .img img,#banner .img video,#banner .img iframe {height: 100%;width: auto;right: 0;left: auto;}
  #banner,#banner .item,#banner .img,#banner .img iframe {height: auto;aspect-ratio: 19/11;width: 100%;}
  #banner { margin-top: 0; }
}
@media screen and (max-width:1024px) {
  #banner .info {padding: 0 8vw;bottom: 15%;}
  .bannergotoicon,#banner:after,#scrollBtn,#banner:before { display: none; }
  #banner #countbanner{ display: none; }
}
@media screen and (max-width:768px) {
  #banner .info article {font-size:18px;letter-spacing: 1px;}
    #banner, #banner .item, #banner .img, #banner .img iframe{aspect-ratio:4/3}
  #banner .info p {font-size: 35px;}
  #banner #countbanner,#banner:after { display: none }
  #banner .main-slider:before { display: none; }
}
@media screen and (max-width:600px) {
    #banner .img img, #banner .img video, #banner .img iframe{right: -60%;}
  #banner { margin-top: 0; }
  #banner .info { padding: 0 5%; display: flex; align-items: flex-start; bottom: 20vw; left: 5vw; }
  #banner .info p {font-size: 26px;letter-spacing: 2px;}
  #banner .info article {font-size: 15px;}
  #banner:before { bottom: 13% }
  #banner,#banner .item,#banner .img,#banner .img iframe {aspect-ratio: 1/1.3;}
}