/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5; -webkit-text-size-adjust:none;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}
* {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}

/* index */
body {width:100%; font-family:"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft JhengHei", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size:1.125rem; color:#000; margin:0 auto; padding:0;}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1024px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

p {margin:1rem 0; padding:0;}

img {height:auto; max-width:100%;}

a {color:#000000; text-decoration:none;}
a:hover {color:#16a12b;}
a, a:hover {transition:0.25s;}

strong {font-weight:900;}

sup {font-size:40%; vertical-align:super; line-height:0;}
sub {font-size:40%; vertical-align:baseline; line-height:0;}

.clear::after {content:'.'; display:block; clear:both; visibility:hidden; line-height:0px; height:0px;}
.clear {display:inline-block;}
html[xmlns] .clear {display:block;}
* html .clear {height:1%;}
.clear {display:block;}

#web {display:none;}
#webs {display:none;}

header {width:100%; height:82px; margin:0 auto; padding:0;}
.wrap {max-width:1280px; margin:0 auto; padding:0;}

#logo {float:left; margin:0; padding:0;}

.menu {display:none;}
nav {float:right; text-align:center; font-size:18px; line-height:82px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline-block; *display:inline;/*IE7*/ *zoom:1;/*IE7*/}
nav ul li a {color:#000; margin:0; padding:0 16px 4px 16px;}
nav ul li a:hover {border-bottom:#00fda1 solid 1px;}
nav ul li:first-child {margin-left:0;}
nav ul li span {display:none;}
nav ul li ul {display:none;}
nav ul li:hover > ul {display:block;}
nav ul ul {line-height:40px; position:absolute; display:inline-block; background:rgba(0,0,0,.65); box-shadow:0 0 8px #CCC; margin:-22px 0 0 0;}
nav ul ul li {clear:both; display:list-item;}
nav ul ul li a {min-width:120px; border-bottom:#999 solid 1px; margin:0; padding:8px 10px;}

.wrapper {max-width:1280px; margin:16px auto; padding:0 16px;}
.gray {background:#f2f2f2;}

h1 {font-size:2.25rem; font-weight:700; margin:0; padding:0;}

h2 {font-size:1.75rem; font-weight:500; margin:0; padding:0;}

h3 {font-size:1.25rem; font-weight:300; color:#FFF; background:linear-gradient(90deg,#16a12b 40%, transparent 80%); border-radius: 15px 0 0 15px; padding-left: 16px;}

.main {float:left; width:60%;}

.huge {font-size:36px; font-style:italic; vertical-align:middle; display:inline-block;}

.caption {border-left:#16a12b solid 8px; padding:0 0 0 8px;}
.caption h1 {color:#16a12b;}
.caption h2 {color:#999;}

.areatext {position:absolute; top:0; left:0; color:#000; font-size:28px; font-weight:bold; display:inline-block; text-align:center; margin:20px 0 0 12px; padding:0;}
.area ul li {position:relative; width:80px; height:80px; display:inline-block; *display:inline;/*IE7*/ *zoom:1;/*IE7*/ margin:8px; border-radius:50%;
background: #fefcea; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #fefcea 0%, #fabf00 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #fefcea 0%,#fabf00 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #fefcea 0%,#fabf00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#fabf00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.area .loading {width:100%; height:100%; border:6px solid #1ee2b8; border-right:6px solid #fff; border-bottom:6px solid #fff; border-radius:50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-ms-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;}
@-webkit-keyframes loading {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes loading {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-o-keyframes loading {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}
@keyframes loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.more {width:130px; text-align:center; color:#FFF; background-color:#666; border-radius:20px; margin:16px 0; padding:4px 0 2px 0;}
.more a {color:#FFF;}
.more:hover {background-color:#16a12b;}

.service {float:right; width:35%; border-radius:0 0 50% 50%; margin:0; padding:2rem;
background: #f2f8f6; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f2f8f6 0%, #d8e1e7 50%, #b5d0c6 80%, #e0f9ef 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f2f8f6 0%,#d8e1e7 50%,#b5d0c6 80%,#e0f9ef 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f2f8f6 0%,#d8e1e7 50%,#b5d0c6 80%,#e0f9ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f8f6', endColorstr='#e0f9ef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.service ul {width: 200px; padding:1rem 0 2rem 0; margin:0 auto;}
.service ul li {list-style:disc inside;}

.project {margin:32px 0 0 0;}
.project ul {padding:16px 0;}
.project ul li {display:inline-block; *display:inline;/*IE7*/ *zoom:1;/*IE7*/ position:relative; text-align:center; width:32%; max-height:520px; overflow:hidden; margin:1% 0 1% 1%; padding:0; box-shadow:3px 0 10px #333;}
.project ul li img {object-fit:cover; width:960px; height:720px;}
.project ul li:hover img {transform:scale(1.05);}
.overlay {position:absolute; top:60%; bottom:; left:0; right:0; width:100%; height:30%; background:rgba(0,153,68,0.7);}
.overlaytext {position:absolute; top:50%; left:50%; color:#FFF; text-shadow:0 0 10px #000; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);}
.overlaytext p {border:#FFF solid 1px; margin:8px 0; padding:0;}

footer {width:100%; text-align:center; color:#FFF; background-color:#6f9a37; margin:0; padding:32px 0 0 0;}
footer a {color:#FFF; text-shadow:3px 3px 3px #555;}
footer a:hover {color:#00ffff;}
.footmenu ul li {display:inline-block; *display:inline;/*IE7*/ *zoom:1;/*IE7*/ margin:0 0 0 -4px; padding:0 16px;}
.footmenu ul li:nth-child(1), .footmenu ul li:nth-child(2), .footmenu ul li:nth-child(3), .footmenu ul li:nth-child(4), .footmenu ul li:nth-child(5) {border-right:#CCC solid 1px;}
.company {font-size:21px;}
.company ul li {display:inline-block; *display:inline;/*IE7*/ *zoom:1;/*IE7*/ margin:32px 16px;}
.by {clear:both; color:#666; background-color:#0a3622; font-size:13px; margin:0; padding:4px 0;}
.by a {color:#999; text-shadow:none;}

#top {z-index:99; display:none; position:fixed; width:40px; height:40px; right:5px; bottom:10px; font-size:2rem; border:none; outline:none; background-color:#16a12b; border:#CCC solid 1px; cursor:pointer; border-radius:50%; margin:0; padding:0;}
#top:hover {display:block; background-color:#bfbfbf; border:#FFF solid 1px; box-shadow:0 0 10px #f3e2c7;}
#top i {color:#fff; margin:0 0 0 8px;}
#top:hover i {color:#16a12b;}

/* page */
.path {font-size:13px; text-align:center; color:#999; margin:12px 0; padding:0;}
.path a {color:#999; margin:0 6px; padding:0;}
.path a:hover {color:#228bd6; display:inline-block; text-decoration:underline;}

.banner {width:100%; display:inline-block; color:#FFF; letter-spacing: 0.15rem; font-size:2.25rem; font-weight: 600; text-align:center; background:url(../images/bg.jpg) #16a12b; margin:0; padding:3rem 1rem; text-shadow:2px 4px 6px #16a12b, 5px 7px 9px #000000;}

hr {border:0; height:1px; background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(30,115,190,0.3), rgba(0,0,0,0)); margin:40px 0;}

.serviceitem {margin:16px 0;}
.serviceitem ul li {display:inline-block; *display:inline;/*IE7*/ *zoom:1;/*IE7*/ font-size:24px; border-radius:18px; margin:8px; padding:8px 16px;
background: #f2f8f6; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f2f8f6 0%, #d8e1e7 50%, #b5d0c6 80%, #e0f9ef 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f2f8f6 0%,#d8e1e7 50%,#b5d0c6 80%,#e0f9ef 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f2f8f6 0%,#d8e1e7 50%,#b5d0c6 80%,#e0f9ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f8f6', endColorstr='#e0f9ef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}、

.caseslider {width:100%; margin:16px auto;}
.caseslider ul li {max-width:275px; max-height:275px; overflow:hidden;}
.caseslider ul li img {object-fit:cover; width:275px; height:275px;}

.cases {margin:32px 0;}
.cases ul li {display:inline-block; *display:inline;/*IE7*/ *zoom:1;/*IE7*/ overflow:hidden; margin:-8px 0 0 0;}
.cases ul li:hover {opacity:0.7; filter:alpha(opacity=40);}
.cases ul li img {object-fit:cover; width:275px; height:275px;}

.star ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 48px;
    unicode-bidi: isolate;
}

.star ul li::marker {
  content: "⭐";
}

/*RWD*/
@media screen and (max-width:1024px) {
#logo {float:none; text-align:center;}

.menu {display:block; z-index:5; position:absolute; top:0; right:0; cursor:Pointer; text-align:center; color:#000; background-color:#e5e5e5; width:50px; line-height:50px; font-size:40px; margin:16px 8px 0 0; padding:0;}
nav {z-index:6; position:relative; overflow-x:hidden; overflow-y:hidden; width:100%; height:0; line-height:50px;}
nav ul {background-color:#e5e5e5; margin:0; padding:0;}
nav ul li {display:list-item; margin:0; padding:0;}
nav ul li a {display:block; border-bottom:#FFF solid 1px; margin:0; padding:0;}
nav ul li a:hover {border-bottom:#00fda1 solid 1px;}
nav ul li > a {margin:0; padding:0;}
nav ul li > a::after {width:0; top:0;}
nav ul li span {display:block; line-height:50px; width:75px; cursor:Pointer; float:left; text-align:center; color:#FFF; font-size:40px; margin:-50px 0 0 5%;}
nav ul li ul {display:block;}
nav ul ul {position:relative; overflow-x:hidden; overflow-y:hidden; width:100%; height:0; box-shadow:none; margin:0;}
}

@media screen and (max-width:966px) {
.main {float:none; width:90%; margin:0 auto;}

.service {float:none; width:90%; margin:32px auto 0 auto;}
}

@media screen and (max-width:853px) {
.project ul li {width:100%; max-height:520px; overflow:hidden; margin:16px 0;}
.overlaytext h1 {font-size:32px;}
}

@media screen and (max-width:690px) {
.company {margin:32px 0;}
.company ul li {display:list-item; margin:16px;}
}

@media screen and (max-width:667px) {
.footmenu ul li {width:26%; margin:0 3%; padding:8px 0;}
.footmenu ul li:nth-child(1), .footmenu ul li:nth-child(2), .footmenu ul li:nth-child(3), .footmenu ul li:nth-child(4), .footmenu ul li:nth-child(5) {border-right:none;}
.footmenu ul li:nth-child(1), .footmenu ul li:nth-child(2), .footmenu ul li:nth-child(3) {border-bottom:#CCC solid 1px;}
}

@media screen and (max-width:600px) {
.main {width:100%;}

.service {width:100%;}
}

@media screen and (max-width:533px) {
.cases ul li { width:49%;}
}

@media screen and (max-width:480px) {
#logo {float:none; text-align:left; margin:0 0 0 8px;}

h1 {font-size:32px;}

h2 {font-size:25px;}
}

@media screen and (max-width:384px) {
h1 {font-size:30px;}

h2 {font-size:23px;}

.overlaytext h1 {font-size:28px; font-weight:400;}

.footmenu ul li {width:40%; margin:0 4%; padding:8px 0;}
.footmenu ul li:nth-child(1), .footmenu ul li:nth-child(2), .footmenu ul li:nth-child(3), .footmenu ul li:nth-child(4) {border-bottom:#CCC solid 1px;}
}

@media screen and (max-width:320px) {
header {height:70px;}

#logo img {height:70px;}

.menu {margin:13px 8px 0 0;}

.overlaytext h1 {font-size:26px;}
}

/* 首頁輪播 */
.carousel {
    position: relative;
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.carousel-item {
    min-width: 100%;
    user-select: none;
}

.carousel-item img {
    width: 100%;
    display: block;
    cursor: pointer;
}

/* 左右換頁箭頭 */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    color: rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.5);
    border-color: #ffffff;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.25rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    transition: color 0.3s;
}

.carousel-control:hover {
    color: rgba(0, 0, 0, 0.9);
    background: rgba(255, 255, 255, 0.9);
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

/* 圓點導航 */
.carousel-indicators {
    position: relative;
    z-index: 9999;
    text-align: center;
    margin-top: -1.5rem;
}

.carousel-indicators button {
    border: none;
    background-color: #ccc;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-indicators button.active {
    background-color: #333;
}

/* 響應式處理 */
@media (max-width: 768px) {
    .carousel-control {
        font-size: 1.5rem;
        width: 2rem;
        height: 2rem;
        line-height: 1.75rem;
    }
}