/* banner */
#banner {width: 100vw;z-index: 3;}
#banner .item { height: 98vh; }
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip .vid {overflow: hidden;position: absolute;width: 785px;top: 19vh;right: 5.5vw;min-width: 785px;height: 598px;border-radius: 100px;}
#banner .item .clip .vid:before{content:url(/images/44/doctorname.png);position: absolute;left: 9vw;z-index: 2;top: 8vh;}
#banner .item .clip:after{content:url(/images/44/star.png);position: absolute;right: calc(4vw - 29px);z-index: 2;top: 30vh;}
#banner .item .clip video {overflow: hidden;position: absolute;width: 180%;top: -10%;left: -40%;}
#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;left: 3VW;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: 18vw;}
}
@media screen and (max-width: 1400px){
    #banner .item .clip .vid{width: 655px;min-width: 655px;height: 435px;}
}
@media screen and (max-width: 1280px){
    #banner .item .clip .vid:before{zoom: 70%;left: 22vw;}
}
@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: 10% 50%;}
}
@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: 50vh;}
    #banner{padding-top: 69px;}
}