#banner { padding-top: 64px; z-index: 3; }
#banner .item {width: 100vw;min-height: 85vh;height: 85vh;}
#banner .item img {width: 100vw;height: 85vh;}
#banner .item >.pos_abs {width: 100vw;height:  100%;top: 0;left: 0;display: none;}
#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 { display: block; 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: -50px;align-items: center;}
#banner .slick-dots li {margin: 5px 20px;width: 10px;height: 10px;background: var(--info);border-radius: 50%;display: block;opacity: .1;}
#banner .slick-dots li.slick-active { opacity: .5; }

/* arrow_bg */
#banner .arrow_bg {width: 260px;height: 130px;left: auto;bottom: -130px;transform-origin: 100% 100% 0;transform: skewY(20.5deg) translateY(0);-webkit-transform: skewY(20.5deg) translateY(0);}

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

/* 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 (max-width: 1440px){
	#banner .item {min-height: 640px;height: 640px;}
	#banner .item img {height: 640px;}
}
@media screen and (min-width: 1281px){
	#banner {padding: 82px 0 0 50px;}
}
@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 (max-width: 1140px){
	#banner .item {min-height: 370px;height: 370px;}
	#banner .item img {height: 370px;}
#banner .arrow_bg,#banner .arrow{
    display: none;
}
}
@media screen and (max-width: 761px){
	#banner .item {min-height: 370px;height: 380px;}
	#banner .item img {height: 390px;}
}
@media screen and (max-width: 550px){
	#banner .item .info >div { width: 95%; }
	#banner .item .info h3.txt { font-size: 12vw; letter-spacing: 0; }
#banner .item img {width: 100vw;height: 23vh;}
#banner .item {width: 100vw;min-height: 25vh;height: 25vh;}

}