@charset "UTF-8";
:root{
    --ci1:#1a3d5d; --ci2:#292929; --color2:#e5c248; --color3:#9f893c; --color4:#0083b9; --white:#fff; --brand:#878787; --price:#bfbfbf; --mprice:#ff3d3d; --title:#4b4b4b; --gray1:#e5e9ef; --gray2:#776060; --gray3:#cacaca; --gray4:#fafafa; --blue1:#0f81c6; --red:crimson;
}
html{background: #fff;} iframe{border:none;}
html, body{overflow-x: hidden;}
*{font-family: "Noto Sans TC";}
img, iframe{max-width:100%;}
img{max-width:100%; height: auto;}
a{text-decoration: none;}
.swiper, .swiper6{overflow: hidden;}
.dir{margin-bottom: 40px;}
.dir a{color:rgba(118, 118, 118, 1);}
section{max-width:1280px; margin:0 auto; padding: 0 10px; position: relative;}
header{background: rgba(0, 130, 198, 1); position: fixed; z-index: 10; left:0; top:0; width:100%; text-align: center;}
header .logo{display: inline-block; margin:20px;}
header .logo img{height: 48px;}
header nav{background:rgba(7, 156, 234, 1);}
nav ul{margin:0px; padding: 10px;}
nav ul li{list-style: none; display: inline-block; margin:0; padding:0; position: relative;}
nav ul li a{color:#fff; display: block; padding:0 10px;}
main{margin-top:124px; position: relative;}
#main_header{background:url('../img/fe6bcb3955d2c639204e6b471a85987b1f1837bd.jpg') no-repeat right top; background-size:30% 100%; position: relative; padding-top:60px;}
#main_header:before{content: ''; display: block; position: absolute; top:55px; left:0; width:70%; height: 80px; background: rgba(240, 242, 241, 1);}
footer{background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
linear-gradient(0deg, rgba(82, 82, 82, 0.69), rgba(82, 82, 82, 0.69)), url('../img/893be04585159f83da387851ba89c66be0234fa2.jpg') no-repeat center; background-size: cover; padding: 40px 20px;}
footer *{color:#fff;}
footer nav a{display: inline-block;}
#title{color: rgba(0, 130, 198, 1); font-family: Inter; font-weight: 700; font-size: 48px; line-height: 100%;}
#indexBanners .swiper-slide a{display: flex; align-items: center; justify-content: center; background: no-repeat center; height: 480px;  background-size: cover;}
#indexBanners .swiper-slide a span{color:#fff; font-size: 80px; font-weight: 600;}
#title, #subtitle{position: relative;}
#subtitle{font-size: 24px; color:rgba(118, 118, 118, 1);}
.multiline-ellipsis {display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 5;  overflow: hidden;}
#index_about_info{width:40%; max-width:500px; position: relative; margin:20px 0;}
#index_about_img{max-width: 900px; width:40vw;}
.area_title{padding:20px;}
.area_title h5{display: inline-block; font-size: 48px; color:rgba(0, 130, 198, 1); font-weight: 600;}
.area_title span{font-size: 20px; color:rgba(0, 0, 0, 1); margin-left:2%;}
.swiper6 .swiper-slide a{display: block; background: no-repeat center; background-size: cover; position: relative; padding-bottom: 100%;}
.swiper6 .swiper-slide a span{position: absolute; left:0; bottom:0; display: flex; align-items: center; justify-content: center; color:#fff; font-size: 13px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); height: 60px; width:100%; transition: all .3s ease;}
.swiper6 .swiper-slide a:hover span{height: 100%; background: rgba(0,0,0,0.6);}
.service_list{display: flex; flex-wrap: wrap; gap: 30px;}
.service_list li{list-style: none;  width: calc(20% - 30px);}
.service_list li a{display: block; background: no-repeat center; background-size: cover; position: relative; padding-bottom: 100%;}
.service_list li a span{position: absolute; left:0; bottom:0; display: flex; align-items: center; justify-content: center; color:#fff; font-size: 13px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); height: 60px; width:100%; transition: all .3s ease;}
.service_list li a:hover span{height: 100%; background: rgba(0,0,0,0.6);}
.btn1{border: 1px solid rgba(7, 156, 234, 1); color: rgba(0, 130, 198, 1); font-size: 16px; font-weight: 500; min-width: 160px; text-align: center; display: inline-block; line-height: 2.4; transition: all .3s ease;}
.btn1:hover{background: rgba(0, 130, 198, 1); color:#fff;}
.btn2{background: rgba(0, 130, 198, 1); color:#fff; border:1px #fff solid; min-width: 120px; text-align: center; line-height: 2.4; transition: all .3s ease;}
.btn2:hover{background: #fff; color:rgba(0, 130, 198, 1);}
#indexContactTools .col{color:rgba(118, 118, 118, 1);}
#indexContactTools .col:nth-child(1){border-right: 1px rgba(217, 217, 217, 1) solid;}
#contactBox{background: url('../img/fe6bcb3955d2c639204e6b471a85987b1f1837bd.jpg') no-repeat center; background-size: cover;}
#contactBox form{max-width:800px;}
#captcha{width:80px;}
#captcha + img{height: 30px;}

@media screen and (max-width:825px) {
    #index_about_info{width:70%;}
    #title{font-size: 24px;}
    #subtitle{font-size: 18px;}
    #index_about_img{width:90%;}
    .area_title h5{font-size: 24px;}
    .area_title span{font-size: 16px;}
    .service_list li{list-style: none;  width: calc(50% - 30px);}
    #indexContactTools .col:nth-child(1){border-right: 0;}
}

@media print{
    html, body{ width:100%; height:auto; overflow:auto; }
}