/* form */
.formBox {max-width: 1000px;margin: 0 auto;background-color: white;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);border-radius: 10px;}
.formBox .wordblock{padding: 60px;}
.formBox .btns-a{background-color: var(--c-orange-01);}
.formBox .report{display: flex;flex-direction: column;}
.formBox .report img{width: 100%;height: auto;padding: 50px;}
.formBox .btns{line-height: 42px;height: 42px;font-size: 16px;color: #fff;background: var(--c-orange-01);border: none;display: inline-block;vertical-align: middle;padding: 0 25px;cursor: pointer;margin: 0 10px;border-radius: 5px;}
.formBox .agree{color: #333;text-align: center;padding-top: 20px;}
.formBox .grids .contbx .fx textarea{height: 100px !important;}
.formBox-2{max-width:48%;display: flex;}

/* Contact-box */
.Contact-box{display: flex;gap: 2%;}
.Contact-box .map{width: 48%;display: flex;flex-direction: column;justify-content: space-between;}
.Contact-box .map iframe{width: 100%;}
.Contact-box .map .map-text{margin: 30px 0;}

/* Introduction */
.Introduction{display: flex;height: 50dvh;}
.Introduction-img{width: 50%;background-image: url(../images/news-4.jpg);background-size: cover;background-position: center;}
.Introduction-img img{object-fit: cover;object-position: center;height: 100%;width: 100%;}
.Introduction-text{width: 50%;padding: 40px;display: flex;justify-content: center;flex-direction: column;line-height: 1.8;}
.Introduction-text .title{font-weight:700;font-size: 28px; margin-bottom: 20px;color: var(--c-orange-01);}
.Introduction-text .text{font-size: 16px;margin-bottom: 30px;}
.Introduction-text .btns-more{display: inline-block;padding: 10px 20px;background: transparent;border: 1px solid var(--c-orange-01);color: var(--c-orange-01);text-decoration: none;border-radius: 3px;width: max-content;}
.Introduction-r{flex-direction: row-reverse;}

/* hero */
.hero {position: relative; /* 更換為實際圖片檔名或網址 */background-size: cover;background-position: center;height: 500px;color: white;display: flex;align-items: center;justify-content: center;text-align: left;padding: 40px;}
.hero .hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.45);z-index: 1;}
.hero .hero-content {position: relative;z-index: 2;max-width: 800px;display: flex;flex-direction: column;}
.hero  h1 {font-size: 28px;margin-bottom: 20px;text-align: center;}
.hero  p {font-size: 16px;margin-bottom: 30px;}
.hero .btn {display: inline-block;padding: 10px 20px;background: transparent;border: 1px solid white;color: white;text-decoration: none;border-radius: 3px;margin: 0 auto;}
.hero-bg {background-image: url(../images/news-5.jpg);background-attachment: fixed;}

/* news-card */
.news-card-section {display: flex;justify-content: space-around;flex-wrap: wrap;gap: 2%;padding: 60px 20px;}
.news-card-section .news-card {background-color: #fff;width: 350px;padding: 40px 30px;border-radius: 4px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);text-align: left;transition: transform 0.3s ease;}
.news-card-section .icon {width: 40px;height: 40px;margin-bottom: 20px;background-color: var(--c-orange-01);border-radius: 50px;display: flex;justify-content: center;align-items: center;}
.news-card-section .icon i{color: white;font-size: 20px;}

/* Related */
.Related .title{font-size: 28px;margin-bottom: 30px;}
.Related .Related-box{display: flex;flex-wrap: wrap;row-gap: 20px;column-gap: 2%;}
.Related .box{display: block;width: 32%;height: 200px;background: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .5) 100%),url(../images/news-1.jpg);background-size: cover; background-position: center;border-radius: 5px;position: relative;}
.Related .box span{position: absolute;right: 0;bottom: 0;font-size: 26px;color: white;padding: 15px;}

/* 桌機hover */
@media screen and (min-width: 769px){
    
}

/* 平板 */
@media screen and (max-width: 1240px) and (min-width: 769px) {

/* footer */

}


/* 手機 */
@media screen and (max-width:768px) {
    /* form */
    .formBox .wordblock {padding: 30px;}
    .formBox .contbx{flex-wrap: wrap;}
    .formBox .forms .wh-02{width: 50%;}
    .formBox .forms .wh-08{width: 100%;}
    .formBox .report img{padding: 10px;}
    .formBox .checkbox{display: block;margin: 15px 0}
    .formBox-2{max-width:100%;}

    /* Contact-box */
    .Contact-box{display: block;}
    .Contact-box .map{width: 100%;}
}