/* banner */
#banner { overflow: hidden; z-index: 1; }

/* abs_txt */
#banner .abs_txt { width: 100%; height: 80%; flex-direction: column; left: 1rem; z-index: 1; opacity: .3; }
#banner .abs_txt svg { margin-left: 5rem; width: 5vw; height: 4vw; }
#banner .abs_txt b { background: transparent; line-height: .8; font-weight: 500; font-size: 14vw; color: transparent; -webkit-text-stroke: 3px #bfbfbf; text-stroke: 3px #bfbfb; }

/* slick */
#banner .slick-slider { z-index: 2; }
#banner .slick-slide { min-width: 100vw; }
#banner .img_box img { width: 100%; height: 60vw; }
#banner .info >* { font-weight: 500; opacity: 0; text-shadow: 0 0 10px #fff; }
#banner .info b {line-height: 1;font-size: 1.2rem;-ms-writing-mode: tb-lr -webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;-webkit-transform: translateX(15px);transform: translateX(15px);display: none;}
#banner .info h3 {line-height: 130%;font-size: 2.8rem;-webkit-transform: translateY(15px);transform: translateY(15px);}
#banner .info p {font-size: 1.1rem;-webkit-transform: translateY(15px);transform: translateY(15px);}
#banner .slick-current .info b { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); transition-delay: .3s; -webkit-transition-delay: .3s; }
#banner .slick-current .info h3 { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: .4s; -webkit-transition-delay: .4s; }
#banner .slick-current .info p { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: .5s; -webkit-transition-delay: .5s; }

/* slick-dots */
#banner .slick-dots { text-align: left; bottom: 7vw; left: 6rem; }

/* arrow */
#banner .arrow { padding: 10px 20px; width: 200px; background: #fff; border-radius: 35px 0 0; top: calc(60vw - 68px); right: 0; z-index: 5; }
#banner .arrow a { margin: 5px; width: 38px; height: 38px; border: 1px #e0e0e0 solid; background: #e0e0e0; border-radius: 50%; display: flex !important; justify-content: center; align-items: center; }
#banner .arrow a:before { width: 35%; height: 35%; border: #222 solid; border-width: 1px 0 0 1px; display: block; content: ""; -webkit-transform: rotate(-45deg) translate(2px, 2px); transform: rotate(-45deg) translate(2px, 2px); }
#banner .arrow a.next { background: #fff; -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* scrolldown */
#scrolldown {flex-direction: column;width: 10vw;height: 10vw;border-radius: 50%;bottom: 5vw;left: 20vw;z-index: 3;background: #ff8f43;color: #fff;font-size: 14px;font-weight: 400;-webkit-transition: 0.6s;transition: 0.6s;-webkit-filter: grayscale(0);-webkit-animation: arrowtop 0.5s linear infinite forwards;animation: arrowtop 1.5s linear infinite forwards;}
#scrolldown::after {content: "";width: 9vw;height: 9vw;display: block;pointer-events: none;position: absolute;left: 50%;top: 50%;border: 1px solid #ffffff;border-radius: 99em;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);opacity: 0.5;}
#scrolldown span{color: #fff;font-size: 24px;}
@-webkit-keyframes arrowtop {
  0% {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
  50% {
    -webkit-transform: translate(0, -8px);
            transform: translate(0, -8px);
  }
  100% {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
}

@keyframes arrowtop {
  0% {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
  50% {
    -webkit-transform: translate(0, -8px);
            transform: translate(0, -8px);
  }
  100% {
    -webkit-transform: translate(0px, 0);
            transform: translate(0px, 0);
  }
}

@media screen and (max-width: 1280px){
	#scrolldown { width: 14vw; height: 14vw; bottom: 3vw; left: 6rem; }
}
@media screen and (min-width: 1161px){
	#banner { height: 95vh; background: url(/images/00/img_banner_bg.png) no-repeat 50% / cover; }
	#banner:before { position: absolute; width: 100%; height: 1px; background: var(--gary); bottom: calc(10vw - 1px); left: 0; z-index: 3; content: ""; }
	#banner:after {position: absolute;width: 5vw;height: 5vw;border: 10px var(--yellow) solid;border-radius: 50%;bottom: 3.5vw;left: 27.5vw;z-index: 2;content: "";}
	#banner .slick-slide { display: flex; }
	#banner .img_box { overflow: hidden; margin-left: 25vw; border-radius: 40vw 0 0 40vw; order: 1; z-index: 1; }
	#banner .img_box img { height: 95vh; }
	#banner .info { position: absolute; width: 100%; height: 100%; top: 0; left: 6rem; z-index: 2; }
	#banner .info h3 { word-spacing: 100vw; }
	#banner .arrow { top: auto; bottom: 0; }
}
@media screen and (max-width: 1160px){
	#banner .info { padding: 2rem 2vw 0; }
	#banner .info h3 { text-align: center; font-size: 30px; }
	#banner .info p { text-align: center; font-size: 18px; }
	#banner .info b { display: none; }
}
@media screen and (max-width: 760px){
	#banner .img_box img { height: 80vw; }
	#banner .arrow { width: auto; top: calc(80vw - 68px); }
}
@media screen and (max-width: 640px){
	#banner .info h3 { word-spacing: 100vw; }
}
@media screen and (max-width: 550px){
	#banner .img_box img { height: 100vw; }
	#banner .arrow { top: calc(100vw - 68px); }
}