/* banner */
#banner {width: 100%;z-index: 3;}
#banner .item { height: 98vh; }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip .vid {overflow: hidden;position: absolute;width: 40%;top: 0;min-width: 655px;height: 100%;}
#banner .item .clip:after {content: url(/images/44/star.png);position: absolute;left: calc(40% - 54px);z-index: 2;bottom: 7vh;animation: spinStar 10s linear infinite;}
/* 旋轉動畫 */
@keyframes spinStar{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
#banner .item .clip video {overflow: hidden;position: absolute;width: auto;left: -90%;}
#banner .item .info >div { margin: auto; width: calc(100% - 60px); }
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; transform: scaleX(0); -webkit-transform: scaleX(0); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* { padding: 10px 15px; max-width: calc(100% - 30px); font-size: 18px; }
#banner .item .info >div .txt h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }
#banner .item .clip .doctorBox {position:absolute;z-index: 2;}
#banner .item .clip .doctorBox img{height:100%;object-fit: cover;}

p.baScro{position:absolute;bottom: 70px;right: 7%;overflow: hidden;z-index: 10;}
p.baScro a{position: relative;cursor: pointer;display: flex;align-items: center;justify-content: center;flex-direction: row;writing-mode: vertical-lr;}
p.baScro a svg{width: 17px;height: 17px;fill: #2b2b2b;margin-top: 10px;}
p.baScro a b{font-size: 14px;font-weight: 400;color: #2b2b2b;margin-bottom: 10px;letter-spacing: 1px;-webkit-animation-name: mouse;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration: 1s;text-transform: uppercase;font-family: "Arimo", sans-serif;}
p.baScro a span{width: 26px;height: 40px;background-color: rgb(43 43 43 / 10%);border-radius: 50px;display: flex;align-items: center;justify-content: center;position: relative;}
p.baScro a span:after{content:'';width: 6px;height: 6px;background: #2b2b2b;border-radius: 50px;top: 10px;position: absolute;}
p.baScro a:hover b:after{transition: transform 0.2s cubic-bezier(0.25,1,0.5,1);top: 72px;width: 100px;}
p.baScro a:hover span:after{top: 25px;}
@keyframes mouse{0%{margin-bottom:40px}50%{margin-bottom:50px;}100%{margin-bottom:40px;}}


@media screen and (max-width: 1680px){
    #banner .item .clip .doctorBox img{object-position: 100% 0;}
	#banner .item .clip .bgBox{background-position: 10% 50%;}
}
@media screen and (max-width: 1440px){
    #banner .item .clip .vid:before{left: 35%;}
}
@media screen and (max-width: 1400px){
    #banner .item .clip .vid{width: 545px;min-width: 545px;}
}
@media screen and (max-width: 1280px){
    #banner .item .clip .vid:before{zoom: 70%;left: 30%;}
}
@media screen and (max-width: 1024px){
    p.baScro, #banner .item .clip .vid{display:none;}
    #banner .item .clip .doctorBox img{object-position: 20% 0;}
	#banner .item .clip .bgBox{background-position: 100% 60%;}
    #banner .item .clip:after{left:3%}
}
@media screen and (max-width: 980px){
    #banner .item .clip:after{display:none;}
    #banner .item{height: 60vh;}
}
@media screen and (max-width: 640px){
    #banner .item .clip .doctorBox img{object-position: 40% 0;}
    #banner .item{height: 40vh;}
    #banner{padding-top: 75px;}
}