/* 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: 100%;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;display: none;}
/* 旋轉動畫 */
@keyframes spinStar{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
#banner .item .clip video {overflow: hidden;position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: 0% 50%;}
#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;background: linear-gradient(0deg, rgb(0 0 0 / 0%), rgb(117 67 50 / 50%));}
#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;}}


#banner .poocaphone{position: absolute;bottom: 8vh;right: 57vw;}
#banner .Japhone{display:flex;flex-direction:column;align-items:center;justify-content:center;width:200px;width: 5.44vw;background: #b07560;border-radius:555px;aspect-ratio:1/1;animation-name:a02;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
#banner .Japhone:before{content:"";position:absolute;width: 123%;aspect-ratio:1/1;border: #ffffff 1px solid;border-radius:666px}
#banner .Japhone svg{width:43px;aspect-ratio:1/1;fill:#ffffff;margin-bottom:5px}
#banner .Japhone span{color:#ffffff;font-size:max(1.4 * (1vw + 1vh) / 2,18px);line-height: 130%;}
@keyframes a02{0%,100%{transform:translateY(0px)}
50%{transform:translateY(-15px)}
}
@keyframes fadeOpacity{
    0% {opacity: 1;}
	50% {opacity: 0.8;}
    100% {opacity: 1;}
  }



@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: 100%;min-width: 545px;height: 100%;}
}
@media screen and (max-width: 1280px){
    #banner .item .clip .vid:before{zoom: 70%;left: 30%;}
}
@media screen and (max-width: 1024px){
    p.baScro{
    display: none;
}
    #banner .item .clip .doctorBox img{object-position: 20% 0;}
	#banner .item .clip .bgBox{background-position: 80% 60%;}
    #banner .item .clip:after{left:3%}
    #banner .poocaphone{right: auto;bottom: 35%;left: 10vw;}
	#banner .poocaphone span , #banner .Japhone:before{/* display:none; */}
	#banner .Japhone svg{width: 20px;}
	#banner .Japhone{width: 90px;animation-name: unset;}
}
@media screen and (max-width: 980px){
    #banner .item .clip:after{display:none;}
    #banner .item{height: 60vh;}
}
@media screen and (max-width: 768px){
	#banner .poocaphone{left: auto;right: 17vw;bottom: 40px;}
}
@media screen and (max-width: 640px){
    #banner .item .clip .doctorBox img{object-position: 40% 0;}
    #banner .item{height: 40vh;}
    #banner{padding-top: 75px;}
	#banner .poocaphone{bottom: 26%;}
	#banner .Japhone span{font-size: 14px;}
	#banner .Japhone{width: 80px;}
}
@media screen and (max-width: 480px){
	#banner .poocaphone{bottom:auto;top: 100px;left: auto;right: 62vw;}
	#banner .item .clip .bgBox{background-position: 90% 60%;}
   
}