/* banner */
#banner { width: 100%; z-index: 3; }
#banner .item { height: 100vh; }
#banner .main-slider {}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip:before {content:'';position: absolute;width: 100%;height: 30%;bottom: 0;background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(238 242 249));}
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip *{z-index:-1;position: relative;}
#banner .item .clip video {overflow: hidden;position: absolute;width: 100%;height: auto;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);z-index: -1;}
#banner .item .info >div{margin-left:7%;width: min(960%, 600px);display: flex;flex-direction: column;justify-content: flex-end;padding-bottom: 4%;align-items: flex-start;}
#banner .item .info .h3 {margin-bottom: 15px;display: flex;flex-direction: column;align-items: flex-start;}
#banner .item .info .h3 span{font-size: 75px;font-weight: 700;color: var(--secondary);line-height: 1.3;}
#banner .item .info .h3 span:last-child{color:transparent;background: var(--btn-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
#banner .item .info p {margin: 0 0 50px;font-size: 22px;color: var(--third);font-weight: 500;}

#bio-feature{display:grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin-bottom: 70px;}
#bio-feature .bio-feature-item:not(:last-child){border-right: 1px solid rgb(184 198 213 / 50%);padding-right: 20px;}
#bio-feature img{width:50px;aspect-ratio: 1/1;object-fit: contain;}
#bio-feature .bio-title{font-size: 20px;font-weight: 500;margin: 15px 0 0;}
#bio-feature .bio-text{color:#5D717E}
#banner .btnbox{display: inline-flex;justify-content: flex-start;align-items: center;gap: 25px;position: relative;z-index: 10;}
#banner .btnbox a{white-space: unset;width: 140px;}

#banner #banner-digital{z-index:2;position: absolute;bottom: 20%;right: 7%;width: 360px;min-width: auto;height: 165px;}
#banner-digital .digital-card {padding: 20px 25px;display: flex;align-items: center;gap: 35px;border-radius: 28px;background: linear-gradient(135deg, rgb(255 255 255 / 70%), rgb(239 248 252 / 52%));box-shadow: 0 18px 50px rgba(15,75,120,0.12),inset 0 1px 0 rgba(255,255,255,0.88);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);box-sizing: border-box;}
#banner-digital .digital-circle {width: 100px;height: 100px;flex: 0 0 100px;position: relative;}
#banner-digital .digital-ring {width: 100%;height: 100%;border-radius: 50%;background: conic-gradient(#00ACC1 calc(var(--percent, 0) * 1%), #d5f3f9 0);position: relative;/* box-shadow: inset 0 0 20px rgba(0,158,170,0.08),0 0 24px rgba(0,158,170,0.12); */}
#banner-digital .digital-ring::before {content: "";position: absolute;inset: 21px;border-radius: 50%;background: linear-gradient(135deg,#f8fdff,#edf8fc);box-shadow: inset 0 0 18px rgba(80,150,180,0.08);}

#banner-digital .digital-content { flex: 1; }
#banner-digital .digital-title {margin-bottom: 6px;font-size: 20px;line-height: 1.25;font-weight: 500;letter-spacing: 0.06em;}
#banner-digital .digital-number {margin-bottom: 5px;line-height: 1;font-weight: 900;letter-spacing: 0.03em;color: #009faa;}
#banner-digital .digital-number *{color:#1C9CA6;font-size: 35px;font-family: "Inter", sans-serif;font-weight: 600;line-height: 1;}
#banner-digital .digital-desc {line-height: 1.55;font-weight: 400;letter-spacing: 0.06em;color: #5D717E;}

@media screen and (max-width: 1440px){
    #banner .item .info .h3 span{font-size: 50px;}
    #banner .item .info p{font-size: 18px;margin-bottom: 20px;}
    #bio-feature{transform: scale(0.85);transform-origin: center left;margin-bottom: 40px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 85vh; }
    #banner .item .clip video{width:auto;height: 100%;}
    #banner-digital .digital-card{transform: scale(0.7);transform-origin: center right;}
    #bio-feature{transform: scale(0.75);}
}
@media screen and (max-width: 980px){
    #banner-digital .digital-card{display:none;}
}
@media screen and (max-width: 640px){
    #bio-feature{grid-template-columns: repeat(2, 1fr);margin: 0;}
    #banner .item .info .h3 span{font-size: 28px;}
    #banner .item .info p{font-size: 15px;margin-bottom: -10px;}
    #banner .item .info >div{width: 85%;margin: 0 auto;padding-bottom: 8%;}
    #banner .btnbox{transform: scale(0.75);transform-origin: top left;gap: 10px;}
}