#views { position: relative; }

/* banner */
#banner { margin-bottom: 0; }
#banner .item { padding: 0 0 60px; }
#banner .item .workframe { text-align: center; }
#banner .item .leftImg { position: absolute; width: 300px; left: 0; bottom: 15%; }
#banner .item .leftImg >div { background-position: 50% 500px; background-repeat: no-repeat; background-size: cover; -webkit-transition: all 1s ease; transition: all 1s ease; }
#banner .item.slick-current .leftImg >div { background-position: 50% 0; }
#banner .item .leftImg img { width: 100%; }
#banner .item .leftImg >div ,
#banner .item .videoimg >div { position: relative; }
#banner .item .leftImg >div:after ,
#banner .item .videoimg >div:after { position: absolute; width: 100%; height: 100%; display: block; box-shadow: 0 0 20px #c3c3c3; content: ""; top: 0; left: 0; -webkit-transition: all 1s ease; transition: all 1s ease; transition-delay: 1s; opacity: 0; }
#banner a.link::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
}
#banner .item.slick-current .leftImg >div:after ,
#banner .item.slick-current .videoimg >div:after { opacity: 1; }
#banner .item .videoimg { position: relative; background-position: 50% -999px; background-repeat: no-repeat; background-size: cover; display: inline-block; -webkit-transition-duration: 1s; transition-duration: 1s; }
#banner .item.slick-current .videoimg { background-position: 50% 0; }
#banner .item .videoimg video { position: absolute; top: -999px; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; font-family: "object-fit: cover"; -webkit-transition-duration: 1s; transition-duration: 1s; }
#banner .item.slick-current .videoimg video { top: 0; }
#banner .slick-dots { width: 300px; bottom: 110px; left: calc((100% - 1440px) / 2); }
#banner .item .rightTxt { position: absolute; bottom: 40%; right: 0; z-index: 5; }
#banner .item .rightTxt h2 { font-size: 5vw; text-shadow: 0 0 20px #fff; }
#banner .item .rightTxt .desc { margin-left: 5vw; text-align: right; }
#banner .item .rightTxt .desc p { font-size: 20px; }
#banner .item .rightTxt .desc a { color: #000; font-size: 16px; }

/* Byoutube */
#Byoutube { position: absolute; bottom: 80px; right: calc((100% - 1440px) / 2); }
#Byoutube a.photo { position: relative; box-shadow: 0 0 10px #929292; }
#Byoutube a.photo img { background: rgba(0, 0, 0, 0.6); }
#Byoutube a.photo svg { position: absolute; width: 25px; height: 25px; top: calc((100% - 25px) / 2); left: calc((100% - 25px) / 2); -webkit-animation: playsvg 2s infinite alternate ease-in-out; animation: playsvg 2s infinite alternate ease-in-out; z-index: 2; }
#Byoutube a.photo .line { position: absolute; width: 100%; height: 2px; background: #fff; display: block; top: 0; left: 0; -webkit-animation: line1 5s infinite ease-out; animation: line1 5s infinite ease-out; opacity: 0; }
#Byoutube a.photo .line.right { width: 2px; height: 100%; left: auto; right: 0; -webkit-animation-name: line2; animation-name: line2; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
#Byoutube a.photo .line.bottom { top: auto; bottom: 0; -webkit-animation-name: line3; animation-name: line3; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
#Byoutube a.photo .line.left { width: 2px; height: 100%; -webkit-animation-name: line4; animation-name: line4; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }

@media screen and (max-width: 1500px) {
	#banner .item { padding: 60px 0; }
	#banner .item .leftImg { width: 20%; }
	#banner .item .videoimg { width: 40%; }
	#banner .slick-dots { left: calc((100% - 1200px) / 2); }
	#Byoutube { right: calc((100% - 1200px) / 2); }
}
@media screen and (max-width: 1440px) {
	#banner .slick-dots { left: calc((100% - 1160px) / 2); }
	#Byoutube { right: calc((100% - 1160px) / 2); }
}
@media screen and (max-width: 1280px) {
	#banner .item { padding: 10px 0 60px; }
	#banner .item .workframe { text-align: right; }
	#banner .item .leftImg { width: 30%; top: 24%; bottom: auto; }
	#banner .item .videoimg { width: 60%; }
	#banner .item .rightTxt { padding: 0 15px 10px; width: calc(100% - 450px); background: rgba(255, 255, 255, .5); bottom: 0; right: auto; left: 0; }
	#banner .slick-dots { width: 100%; text-align: left; left: 5%; bottom: 0; }
	#Byoutube { right: 8%; bottom: -20px; }
	#Byoutube a.photo img { width: 250px; }
}
@media screen and (max-width: 1160px) {
	#banner .item { padding: 20px 0 60px; }
}
@media screen and (max-width: 900px) {
	#banner .item { padding: 40px 0 60px; }
	#banner .item .rightTxt { width: calc(77% - 90px); }
	#banner .item .rightTxt .desc p , #banner .item .rightTxt .desc * { font-size: 2vw; }
	#Byoutube { width: 23%; }
	#Byoutube a.photo img { width: 100%; }
	#Byoutube a.photo svg { width: 25%; height: 25%; top: 37.5%; left: 37.5%; }
}
@media screen and (max-width: 680px) {
	#banner .item { padding: 60px 0; }
}
@media screen and (max-width: 580px) {
	#banner .item { padding: 60px 0 80px; }
	#banner .item .rightTxt { width: calc(90% - 30px); left: 5%; bottom: -40px; }
	#Byoutube { width: 32%; bottom: -60px; z-index: 99; }
}
@media screen and (max-width: 380px) {
	#banner .item { padding: 80px 0; }
	#banner .item .leftImg { left: 3%; }
}