/* banner */
.Banner{position: relative;}
:has(.News) .Banner::after{display: block;content: "";left: 0;background-image: url(../images/blu-bg.png);background-repeat: no-repeat;width: 100%;height: 100%;background-size: contain;position: absolute;z-index: -10;opacity: .9;}
.Banner .out-bg{display: flex;position: absolute;left: 0;top: 0;height: 100%;width: 100%;z-index: -1;}
.Banner .out-left{background-color: white;flex: .77;}
.Banner .out-right{background-image: url(../images/N-02.jpg);background-size: cover;background-position: center;flex: 1;}
.Banner .Banner-area{display: flex;height:500px;}
.Banner .b-text {flex: .77;background-color: white;display: flex;flex-direction: column;justify-content: center;gap: 30px;}
.Banner .b-text .b-title .logo{display: block;width: 60px;height: 60px;background-color: var(--c-main-01);mask-image: url('../images/logo.png');mask-size: cover;}
.Banner .b-text .b-title{color: var(--c-main-01);display: flex;align-items: center;gap: 20px;padding: 0 10px;}
.Banner .b-text .l-title{color:var(--c-minor-06)}
.Banner .b-hr{display: block;height: 4px;max-width: 420px;width: 100%;background-color: var(--c-main-01);}
.Banner .b-img {flex: 1;position: relative;}
.Banner .b-img::after{content: "";display: block;transform: translateX(-1px);top: 0;background-image: url(../images/triangle.png);height: 100%;width: auto;}
.Banner .notify{position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: var(--c-main-01);color: white;text-align: center;padding: 20px;border-radius: 5px;z-index: 5;white-space: nowrap;border: 2px solid #ffff;}

/* 桌機hover */
@media screen and (min-width: 769px){
  :not(:has(.News)) .Banner .Banner-area{ min-height:calc(100dvh - 404px); }
}

/* 平板 */
@media screen and (max-width: 1300px) and (min-width: 769px) {
.Banner .out-left{flex: 1.3;}
.Banner .b-text {flex: 1.3;}
}

/* 手機 */
@media screen and (max-width:768px) {
.Banner .Banner-area {display: flex;height: 70dvh;}    
.Banner .b-text .b-title .logo{width: 40px;height: 40px;}
.Banner .out-bg{flex-direction: column;}
.Banner .out-left{flex: 1;order: 1;}
.Banner .out-right{flex: .6;}
.Banner .Banner-area{flex-direction: column;}
.Banner .b-text{flex: 1;order: 1;gap: 25px;align-items: center;}
.Banner .b-img{flex: .6;}
.Banner .b-text .h3{font-size: 1.25rem;}
.Banner .b-img::after{content: "";display: none;}
.Banner .btn-style-01{margin: 0 auto;}
}