#banner { padding-top: 64px; z-index: 3; }
#banner .item { width: 100vw; min-height: 75vh; height: 75vh; }
#banner .item img { width: 100vw; height: 75vh; }
#banner .item >.pos_abs { width: 100vw; height:  100%; top: 0; left: 0; }
#banner .item .info { background: rgba(var(--white-rgb), .25); }
#banner .item .info >div { margin: auto; width: 85%; }
#banner .item .info >div:before { position: absolute; width: 0; height: 60%; background: var(--white); display: block; top: 20%; left: 6%; content: ""; }
#banner .item .info .txt { margin-left: 10%; opacity: 0; }
#banner .item .info h3.txt { padding: 0 10px; font-size: 55px; letter-spacing: .1em; }
#banner .item .info h3.txt:before { position: absolute; width: 0; height: 2px; background: var(--black); display: block; bottom: 0; left: 0; content: ""; }
#banner .item .info p.txt { padding: 10px 10px 20px; font-weight: 400; line-height: 150%; }
#banner .item .info .more_btn { opacity: 0; }
#banner .item a.pos_abs { z-index: 2; }
#banner .item iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item video { overflow: hidden; position: absolute; min-width: 100%; width: auto; min-height: 100%; height: auto; right: 0; bottom: 0; }

/* slick-dots */
#banner .slick-dots { width: auto; height: 100%; background: var(--white); display: flex !important; flex-direction: column; justify-content: center; bottom: 0; left: -90px; }
#banner .slick-dots li { margin: 5px 40px; width: 10px; height: 10px; background: var(--secondary); border-radius: 50%; display: block; opacity: .1; }
#banner .slick-dots li.slick-active { opacity: .5; }

/* arrow_bg */
#banner .arrow_bg { width: 450px; height: 140px; left: auto; bottom: -140px; transform-origin: 100% 100% 0; }

/* arrow */
#banner .arrow { bottom: 0; left: auto; }
#banner .arrow a { width: 55px; height: 100px; display: inline-block !important; line-height: 100px; }

/* slick-current */
#banner .slick-current .info >div:before { width: 90%; transition-delay: .6s; -webkit-transition-delay: .6s; }
#banner .slick-current .info .txt , #banner .slick-current .info .more_btn { opacity: 1; transition-delay: .3s; -webkit-transition-delay: .3s; }
#banner .slick-current .info h3.txt:before { width: 100%; transition-delay: .7s; -webkit-transition-delay: .7s; }

@media screen and (min-width: 1281px){
	#banner { padding: 80px 0 0 90px; }
}
@media screen and (min-width: 1025px){
	#banner .item .info >div { width: var(--width-md); }
	#banner .item .info >div:before { left: 11%; }
	#banner .item .info .txt { margin-left: 15%; }
	#banner .slick-current .info >div:before { width: 86%; }
}
@media screen and (min-width: 761px){
	#banner .item { min-height: 700px; height: 700px; }
	#banner .item img { height: 700px; }
}
@media screen and (max-width: 550px){
	#banner .item .info >div { width: 95%; }
	#banner .item .info h3.txt { font-size: 12vw; letter-spacing: 0; }
}