@charset "utf-8";

/* CSS Document */
body{font-family:'Lato','微軟正黑體',sans-serif;font-size:17px;line-height:1.6;color:#333;background: #f7f7f7;overflow-x: hidden}
a{color:#000;text-decoration:none}
a:hover{color:#066aad;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;text-decoration:none;}

/*---------------------- 基礎設定 ----------------------*/
.btn.focus, .btn:focus {box-shadow: none;  border: none;}
button:focus{outline:none}
.red{color: #d40023;}
/* 回頂端 */
#goTop{border:1px solid #CCC;color:#aaa;background:#FFF;text-align:center;position:fixed;bottom: 100px;right:20px;width:50px;height:50px;line-height:50px;cursor:pointer;display:none;font-family:Verdana,Geneva,sans-serif;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:#EEE 0 0 5px;-moz-box-shadow:#EEE 0 0 5px;box-shadow:#EEE 0 0 5px;z-index: 11;}
#goTop:hover{background:#64ac1d;color:#FFF}

/*---------------------- 頁面開始 ----------------------*/
/*scroll*/
.scroll{position: fixed;top:0;left: 0;width: 0%;height: 3px;z-index: 2222;
background: rgb(244,212,68); 
background: -moz-linear-gradient(-45deg,  rgba(244,212,68,1) 0%, rgba(252,190,75,1) 58%, rgba(255,123,13,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(244,212,68,1) 0%,rgba(252,190,75,1) 58%,rgba(255,123,13,1) 100%); 
background: linear-gradient(135deg,  rgba(244,212,68,1) 0%,rgba(252,190,75,1) 58%,rgba(255,123,13,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d444', endColorstr='#ff7b0d',GradientType=1 ); 
}

/*全頁佈局*/
.container{max-width: 1300px;/* padding: 0; */}
main{position: relative;background:#f7f7f7}

/*按鈕*/
.btnWrap { margin-top:2.5rem; text-align:center; }
.btnWrap a{border:2px solid #4dad55;background:#d6f6d9;padding:12px 20px;transition: all .3s ease;}
.btnWrap a:hover{background:#d0edff;border-color:#2380bd;color:#000;box-shadow: 0 3px 5px #ccc;padding: 12px 30px;}


/*主選單*/
header ul{list-style:none;padding:0;margin:0}
header ul.navbar-nav{padding-top:10px}
header .logoTxt>figure { margin-bottom: 0;}
header .logoTxt{display:flex;align-items: center;}
header .logo h2{font-size: 1.6rem;letter-spacing: 5px;font-weight:bold;margin-bottom:0;}
header .logo p{margin-bottom:0;font-size: 14px;font-weight: bold;color: #5ea808;}
header .logo img{max-width: 50px;}
header .logoWord{padding-left:10px;}
.navbar.fixed-top{background:#fff;}
.navbar.topNav {box-shadow:0 0 8px #dedede}
.navbar-expand-lg .navbar-nav .nav-item{position:relative}
.navbar-expand-lg .navbar-nav .nav-link{padding:15px 25px;font-weight:700;font-size:19px;letter-spacing:2px}
.navbar-expand-lg .navbar-nav .nav-item .nav-link:before{content:'';position:absolute;left:50%;transform:translateX(-50%);width:1px;height:0;background:#7bb72f;top:-85px;transition:all .5s}
.navbar-expand-lg .navbar-nav .nav-item:hover .nav-link,.navbar-expand-lg .navbar-nav .nav-item.active .nav-link{color:#0a80ce}
.navbar-expand-lg .navbar-nav .nav-item:hover .nav-link:before,.navbar-expand-lg .navbar-nav .nav-item.active .nav-link:before{height:45px;top:-35px}
.navbar-expand-lg .navbar-nav .nav-item:last-child i{background:#3b5998;color:#fff;padding:5px 11px;width:30px;height:30px;border-radius:100%;text-align:center;margin:0;border: 1px solid #3b5998;transition: all .3s linear ;}
.navbar-expand-lg .navbar-nav .nav-item:last-child>a{padding:12px 0 0 15px}
.navbar-expand-lg .navbar-nav .nav-item:last-child:hover .nav-link:before{display: none}
.navbar-expand-lg .navbar-nav .nav-item:last-child:hover i{color:#3b5998;background:#fff;}


/*banner*/
.banner{position:relative;margin-top:83px}
.carousel{max-width:100%;margin:83px auto 0}
.carousel:hover .carousel-control{display:block}
.carousel .controls a{opacity:0}
.carousel:hover .controls a{opacity:1}
.carousel-control-next,.carousel-control-prev{width:10%}
.carousel-control-next-icon,.carousel-control-prev-icon{width:30px;height:60px}
.carousel-control-next-icon{background:url(../images/all/control-icon.png) -30px 0 no-repeat}
.carousel-control-prev-icon{background:url(../images/all/control-icon.png) 0 0 no-repeat}
.carousel .carousel-item,.carousel .carousel-item.active,.carousel .carousel-inner{height:100%}
.carousel-indicators{display:none}
.carousel .fill{width:100%;height:100%;position:relative}

/*Banner波浪動畫*/
.move-top{pointer-events:none;position:absolute;width:100%;height:50px;overflow:hidden;left:0;top:-50px;z-index:1}
.move-top i{display:block;position:absolute;width:9900px;height:50px;background:url(../images/all/wave.png) repeat-x left bottom;left:0;bottom:-1px}
.move-top i:nth-child(1){opacity:.5;animation:wave 15s linear infinite;-moz-animation:wave 15s linear infinite;-webkit-animation:wave 15s linear infinite}
.move-top i:nth-child(2){animation:wave 8s linear infinite;-moz-animation:wave 8s linear infinite;-webkit-animation:wave 8s linear infinite}
@keyframes wave {
from{left:0}
to{left:-980px}
}
@-moz-keyframes wave {
from{left:0}
to{left:-980px}
}
@-webkit-keyframes wave {
from{left:0}
to{left:-980px}
}


/*標題*/
.ixTitle{font-size: 1.8rem;font-weight:700;position:relative;}
.ixTitle:after{content:"";background:#333;width:150px;height:1px;position:absolute;top:50%;margin-left:15px}
.mjTit{text-align:center;margin-bottom:1rem;font-size:2rem;font-weight:700}

/*樹葉動畫*/
.leaves{position:absolute;/* z-index:1 */}
.leaves01{left: 9%;width: 140px;top: 30%;}
.leaves02{right: 10%;width:100px;top: 100px;}
.leaves03{right: 2%;width: 100px;bottom: 320px;}
.leaves04{left: 4%;width:100px;top: 20%;}

/*首頁*/
.ixGrid{padding:2rem 0 4rem}
.ixGrid .container{display:flex;align-items:center;justify-content: space-between;}
.ixbox{width: calc(100% - 400px - 50px);position: relative}
.ixAbout article{background:#1ead55;color:#fff;padding:2rem;margin-left:2rem;font-size: 1.2rem;}
.ixbox:last-child{width:400px;padding:0}
.ixbox h1{font-size:1.5rem;font-weight:700;color:#0e6515}
.ixAbout a { background: #f7f7f7;  border: 1px solid #4dad55;  padding: 10px 2.5rem; position: absolute;  right: -20px; bottom: -20px;  z-index: 2;}
.ixAbout a:hover{background: #ffe961;color: #001002;transform: translate(5%,0);}

/*首頁-營業項目*/
.ixService{padding-bottom:1rem}
.ixService ul{padding:0;list-style:none;display:flex;flex-wrap:wrap}
.ixService li{border: 1px solid #dedede;border-radius:10px;width:calc(50% - 20px);margin:10px;background: #fff;box-shadow: 0 0 4px #e2e2e2;overflow: hidden}
.ixService li a{width:100%;height:100%;padding:10px;display:flex;flex-wrap:wrap;align-items:center;/* background: #fff; */}
.ixService li a>h2{width:100%;font-size: 1.5rem;font-weight:700;margin:0;letter-spacing:1px;color:#136ab9;}
.ixService li a>span{margin:5px 0 0;position:relative;display:flex;align-items:center;font-size: 1.2rem;}
.ixService li a>span:before{content:'';background:#ccc;width:25px;height:1px;margin:0 8px 0 -10px}
.ixService li:hover{background:#156bb9;box-shadow:5px 6px 9px #044784 inset}
.ixService li:hover h2{color:#fff}
.ixService li:hover a{color:rgba(255 255 255 / 80%)}

/*footer*/
footer{background:#e8e8e8;text-align:center;position:relative;margin-top:180px}
footer:before{content:'';background:url(../images/all/footerBg.png) center center no-repeat;width:100%;height:180px;display:block;position:absolute;top:-180px;left:0;z-index:-1}
footer .container{padding:0 0 1rem}
footer h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}
footer ul{padding-left:0;list-style:none}
footer ul li{display:inline-block;padding:0 20px 10px}
footer ul li>a{display:flex;align-items:center}
footer ul li a>i{font-size:1.2rem;margin-right:10px;color:#fff;background:#ab3030;width:30px;height:30px;border-radius:100%;line-height:30px!important;text-align: center;}
footer ul li:nth-child(2) a>i{background:#1a7bbb}
footer ul li:last-child a>i{background:#0f8e2c}
.copyright,.copyright>a{font-size:.9rem;color: #636363;}
.copyright:before{content:'';width:200px;height:5px;display:block;margin:20px auto;background:#56ce68;background:-moz-linear-gradient(left,rgba(86,206,104,1) 0%,rgba(86,206,104,1) 25%,rgba(86,206,104,1) 25%,rgba(242,230,0,1) 25%,rgba(242,230,0,1) 25%,rgba(86,206,104,1) 25%,rgba(252,227,0,1) 25%,rgba(252,227,0,1) 50%,rgba(252,155,0,1) 50%,rgba(252,155,0,1) 75%,rgba(0,127,232,1) 75%,rgba(0,171,239,1) 100%);background:-webkit-linear-gradient(left,rgba(86,206,104,1) 0%,rgba(86,206,104,1) 25%,rgba(86,206,104,1) 25%,rgba(242,230,0,1) 25%,rgba(242,230,0,1) 25%,rgba(86,206,104,1) 25%,rgba(252,227,0,1) 25%,rgba(252,227,0,1) 50%,rgba(252,155,0,1) 50%,rgba(252,155,0,1) 75%,rgba(0,127,232,1) 75%,rgba(0,171,239,1) 100%);background:linear-gradient(to right,rgba(86,206,104,1) 0%,rgba(86,206,104,1) 25%,rgba(86,206,104,1) 25%,rgba(242,230,0,1) 25%,rgba(242,230,0,1) 25%,rgba(86,206,104,1) 25%,rgba(252,227,0,1) 25%,rgba(252,227,0,1) 50%,rgba(252,155,0,1) 50%,rgba(252,155,0,1) 75%,rgba(0,127,232,1) 75%,rgba(0,171,239,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#56ce68',endColorstr='#00abef',GradientType=1)}

/*麵包屑*/
.breadcrumb {background: #eaeaea; border: 1px solid #dedede; border-radius: 10px; padding: 5px 10px; font-size: .95rem;  margin-bottom: 2rem;}

/*關於我們*/
.aboutGrid{position:relative;background: rgba(247 247 247 / 0.8);}
.aboutBox{display:flex;align-items:center;clear:both;font-weight:700;font-size:1.2rem;position:relative;z-index:1;}
.aboutBox article{width:calc(100% - 400px);line-height:1.8;letter-spacing:1px}
.aboutBox .imgLeft,.aboutBox .imgRight{max-width:400px}
.aboutBox .imgRight{padding-left:2em}
.aboutBox .imgLeft{padding-right:2em}
.aboutBox h2{font-size:1.6rem;font-weight:700;color:#f4821a;border-bottom:1px solid;margin-bottom:10px}
.aboutBox h2:after{content:'';background:#f8c948;width:110px;height:3px;display:block;margin-top:3px}
.aboutBox:last-child h2{color:#598a0b}
.serviceItem h3{font-weight:700;padding-top:6rem}
.serviceItem ul{position:relative;z-index:1}
.serviceItem li{width:100%}
.serviceItem:before{content:'';background:url(../images/about/waveBg.png) no-repeat right center;display:block;width:100%;height: 100px;position:absolute;top: 0px;left:0;z-index:0;}
.serviceItem:after{content:'';background:url(../images/about/grayBg.png) repeat-x;display:block;width:100%;height:100px;position:absolute;bottom:0;left:0}
.serviceItem .imgBox{max-width:250px;margin-left:2rem}
.serviceItem li:hover{background:#fff;box-shadow:2px 1px 10px #7aa9d4}
.serviceItem li:hover h2{color:#136ab9}
.serviceItem li:hover a{color:#333;cursor:default}
.serviceItem{background:#cde6fb;background:linear-gradient(2deg,#eef7ff,#b6d8f5);background-size:600% 600%;-webkit-animation:AnimationName 10s ease infinite;-moz-animation:AnimationName 10s ease infinite;animation:AnimationName 10s ease infinite;position:relative}
@-webkit-keyframes AnimationName {
0%{background-position:50% 0}
50%{background-position:50% 100%}
100%{background-position:50% 0}
}
@-moz-keyframes AnimationName {
0%{background-position:50% 0}
50%{background-position:50% 100%}
100%{background-position:50% 0}
}
@keyframes AnimationName {
0%{background-position:50% 0}
50%{background-position:50% 100%}
100%{background-position:50% 0}
}


/*服務項目*/
.serviceGrid{display:flex;flex-wrap:wrap;padding-top:2rem}
.serviceGrid .serviceBox{width:calc(100% / 3 - 20px);position:relative;margin:1rem 10px 3rem;background:rgba(247 247 247 / 0.8)}
.serviceGrid .serviceBox:before{content:"";position:absolute;width:100%;height:1px;border-top:1px dashed #ddd;top:0}
.serviceBox article{text-align:center;padding-top:2rem}
.serviceGrid article span{color:#fff;font-size:16px;background:#7bb72e;border:1px solid #ccc;padding:5px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;position:absolute;left:calc(50% - 20px);top:-20px}
.serviceGrid article h2{font-size: 1.6rem;font-weight:700;letter-spacing:2px;margin:12px;text-align:center;}
.serviceGrid p{margin-top:0;margin-bottom:12px;font-size: 1.2rem;font-weight:400;letter-spacing:1px;}

/*產品介紹*/
.productList{display:flex;align-items: center;justify-content: center;/* border-bottom: 1px solid #ccc; *//* padding-bottom: 2rem; */position: relative;flex-wrap: wrap;flex-direction: row;position: sticky;z-index: 10;align-items: stretch;width: 100%;bottom: 0;background: #f7f7f7;box-shadow: 0 -3px 2px #cccccc7d;}
.pd_inner {/* text-align: center; *//* background: #eee; *//* padding: 20px; */margin-bottom: 40px;margin-left: 2rem;}
.pd_menu {margin: 5px;background: #d5dfe8;position: relative;display: inline-block;outline: none;text-decoration: none;text-transform: uppercase;letter-spacing: 1px;text-shadow: 0 0 1px rgb(255 255 255 / 30%);padding: 10px;color: #1d1d1d;font-weight: 700;text-shadow: none;transition: color 0.3s;}

.pd_menu:before, .pd_menu:after {content: "";position: absolute;left: 0;width: 100%;height: 2px;background: #066aad;opacity: 0;transition: opacity 0.3s, transform 0.3s;}
.pd_menu:before {top: 0;transform: translateY(-10px);}
.pd_menu:after {bottom: 0;transform: translateY(10px);}
.pd_menu:hover, .pd_menu:focus {color: #066aad;}
.pd_menu:hover:before, .pd_menu.focus:after, .pd_menu:hover:after, .pd_menu.focus:after { opacity: 1;transform: translateY(0px);}
/* .proImg{margin: 0 auto}
.proImg img{max-width:550px} */
.proInfo{width: 100%;margin-left:3rem;letter-spacing:1px;font-weight: bold;}
.proInfo>ul{padding:0;list-style:none}
.proInfo>ul>li{margin-bottom:1.5em;font-size:1.3rem;font-weight:700;position:relative;}
.proInfo>ul>li:after{content:'';background:#fac44a;height:9px;display:block;margin-left:-5px;transform:skewX(-30deg)}
.proInfo>ul>li:nth-child(2):after{background:#acc877}
.proInfo>ul>li:nth-child(3):after{background:#c5c5c5}
.proInfo>ul>li:nth-child(4):after{background:#78caef}
.proInfo>ul>li:before{content:'1';color:gray;border:1px solid #ccc;margin-right:10px;width:32px;height:32px;display:inline-block;text-align:center;background: #f7f7f7;}
.proInfo>ul>li:nth-child(2):before{content:'2'}
.proInfo>ul>li:nth-child(3):before{content:'3'}
.proInfo>ul>li:nth-child(4):before{content:'4'}
.proInfo a{display: inline-block;}
.proInfo li a{display: inline-block;width: calc(100% - 42px);margin-bottom: 15px;}
.proInfo li a p{float:right;margin-bottom: 0;font-size: 1rem;position: relative;bottom: -5px;display: flex;align-items: center;}
.proInfo li a:hover{color: #fff;background: #fac44a;padding: 8px 15px;border-radius: 30px;}
.proInfo li:nth-child(2) a:hover{background:#acc877}
.proInfo li:nth-child(3) a:hover{background:#c5c5c5}
.proInfo li:nth-child(4) a:hover{background:#78caef}

.proTxt{position: relative;margin: 25px 0;}
.proTxt p{margin-left:2.5rem;line-height: 24px;}
.hotSpot{position:absolute;width: 15px;height: 15px;top: 10px;left: 0;text-align:center;background-color: #de608e;color:#fff;border-radius:100%;cursor:pointer;transition:all .3s ease;}
.hotSpot .circle{display:block;position:absolute;top: 40%;left: 40%;width: 30px;height: 30px;margin: -15px auto auto -15px;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;border-radius:50%;border: 1px solid #de608e;opacity:0;-webkit-animation:pulsate 2s ease-out infinite;animation:pulsate 2s ease-out infinite;}
@-webkit-keyframes pulsate {
0%{-webkit-transform:scale(1);transform:scale(1);opacity:.8}
45%{-webkit-transform:scale(1.75);transform:scale(1.75);opacity:0}
}
@keyframes pulsate {
0%{-webkit-transform:scale(1);transform:scale(1);opacity:.8}
45%{-webkit-transform:scale(1.75);transform:scale(1.75);opacity:0}
}

.productIntro{display:flex;margin-top:2rem;position: relative;border-bottom: 1px solid #ccc;padding-bottom: 2rem;}
.productIntro h2{width:100%;font-size:1.3rem;font-weight:700}
.productBox{padding: 0 90px 0 0;width: 45%;}
.productMore {width: 55%;}

.proPic{position:relative}
.proPic h3{position:absolute;left:0;bottom:0;padding:10px 20px;font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:1px;background:rgba(0 0 0 / 0.8)}
.pBox:not(:last-child){width: 50%;}
.pBox{/* width: 50%; */}
.pBox:last-child .proPic img{height: 483px;}
.productIntro ul{/* width: 43%; */background: rgba(247 247 247 / 0.8);position: relative;}
.productIntro ul>li{margin: 0 0 1rem;font-weight:700;font-size:1.2rem;}
/*.productIntro ul>li:first-child{list-style:none;padding:0;margin-left:-15px;list-style:none}*/
.productIntro h3{font-weight:700;font-size:1.5rem;color:#2a9a12}
/*.productIntro ul>li span{color:#c75515}*/

.pageBtn {position: relative;display: flex;flex-direction: row;justify-content: flex-end;}
.pagrBtn a:hover {background: #ddd;}
.pageBtn a {font-weight: 500;font-size: .9rem;background: #f7f7f7;padding: 10px 20px;border: 1px solid #066aad;border-radius: 30px;color: #066aad;transition: all .5s;}
.pageBtn a:hover {background: #066aad;color: rgb(39, 35, 35);}


/*產品下拉*/
.product-img { margin: 2.5rem 0; border-bottom: 1px dashed #a29e9e;}

/*案例實績*/
.caseGrid {position:relative;background:rgba(247 247 247 / 50%)}
.caseBox{display:flex;flex-wrap:wrap}
.caseOverlay{width:calc(100% / 3 - 1rem);overflow:hidden;position:relative;margin:.5rem 1rem .5rem 0}
.caseOverlay:nth-child(3n){margin-right:0}
.caseOverlay .picbox{text-align:center}
.caseOverlay .picbox:before{height:100%;display:inline-block;vertical-align:middle}
.caseOverlay .picbox img{display:inline-block;vertical-align:middle}
.caseOverlay .overlay{background-color:rgba(0,0,0,0.5);bottom:0;cursor:pointer;left:0;opacity:0;overflow:hidden;position:absolute;right:-1px;top:0;transform:scale(0.8); transition: all .25s linear}
.caseOverlay .overlay i{color:#fff;font-size:30px;left:50%;margin-left:-15px;margin-top:-15px;position:absolute;text-align:center;top:50%}
.caseOverlay:hover .overlay{opacity:1;transform:scale(1)}
.caseList+.caseList{margin-top:2rem;padding-top:2rem;border-top:1px dashed #a29e9e}
.caseList h2{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
.caseList h2>span{background:#94b738;font-size:1.2rem;color:#fff;padding:5px 8px;margin-right:5px}
.caseList:nth-child(2) h2>span{background:#f69b30}
.caseList:nth-child(3) h2>span{background:#57a6e4}
.caseList:nth-child(4) h2>span{background:#9e58a2}
.caseList:nth-child(5) h2>span{background:#EF665B}

.caseList:nth-child(6) h2>span{background:#56ce68}
.caseList:nth-child(7) h2>span{background:#fb8a2a}
.caseList:nth-child(8) h2>span{background:#EF665B}
.caseList:nth-child(9) h2>span{background:#7c22f5}
.caseList:nth-child(10) h2>span{background:#ca3b49}
.caseList:nth-child(11) h2>span{background:#17a2b8}

/*聯絡我們*/
.contactGrid{display:flex}
.contactInfo{width:40%;background: rgba(247 247 247 / 70%);position: relative;}
.contactInfo .boxTit{letter-spacing:2px;padding:2rem 0 10px;margin-bottom:1.5rem;font-weight:700;font-size:1.6rem;color:#498a00;border-bottom:1px solid}
.contactInfo .boxTit span{display:block;margin:4px 0 10px;font-size:1rem;font-weight:400;color:#797979}
.contactInfo ul{padding:0;margin-bottom:0}
.contactInfo li{padding-bottom:20px;color:#333;font-weight:700;letter-spacing:1px;font-size:1.2rem;list-style:none;display:flex;align-items:center}
.contactInfo li i{color:#fff;margin-right:10px;background:#ab3030;border-radius:100%;width:32px;height:32px;font-size:1.3rem;text-align:center;padding:5px}
.contactInfo li:nth-child(2) i{background:#1b7bbb}
.contactInfo li:nth-child(3) i{background:#3f8e2c}
.contactInfo li:hover i{box-shadow:0 1px 3px #7d7979;transform:scale(1.1,1.1)}
.contactBox{width:60%;border:4px double #ccc;padding:2rem;font-size:1.2rem;background: rgba(247 247 247 / 80%);box-shadow:0 0 6px #d7d7d7;position: relative;}
.contactBox .contactForm p{font-weight:700;margin-left:45px}
.contactBox .contactForm p:before{content:'\f303';font-family:Font Awesome\ 5 Free;font-weight:900;border:2px solid #605d5d;padding:8px;margin-right:5px;border-radius:100%;margin-left:-45px}
.contactBox .contactForm p>span{font-size:1rem}
.contactForm .page_form{margin-bottom:20px;font-weight:700}
.contactForm input[type="text"],.contactForm textarea{width:100%;outline:0;border:none;padding:10px;border-radius:10px;border:1px solid #d3d3d3}
.contactForm input[type="text"]{height:40px}
.contactForm input:focus,.contactForm textarea:focus{border:1px solid #498a00}

/*---------------------------------------------------------------------------*/

@media (max-width: 1200px) {
/*主選單*/
.navbar-expand-lg .navbar-nav .nav-link { padding: 15px 8px;}

/*產品介紹*/
.productList {flex-wrap: wrap-reverse; margin-top: 2rem;}
.proInfo { width: 100%;}
.proInfo>ul>li:after { width: 90%;}    
.pBox:not(:last-child) { width: 100%; display: flex;}
.pBox:not(:last-child) .proPic img {height: auto;}
.pBox{width: 50%}
.proPic { margin-bottom: 20px;}  
.proPic h3 {margin: 0;}
.pBox:last-child .proPic img{height: auto}
}

@media (max-width: 991px) {
/*主選單*/
.navbar.fixed-top{padding:10px 1em;}
header ul.navbar-nav{text-align:center;padding: 1rem; margin-top: 1rem;background: #e8e8e8;}
.navbar-expand-lg .navbar-nav .nav-item:hover .nav-link:before,.navbar-expand-lg .navbar-nav .nav-item.active .nav-link:before{height:1px;width:15%;top:auto;bottom:10px}
header button.navbar-toggler{border-radius:10px;width: 30px;height:40px;min-width:auto;min-height:auto;padding:0;position:relative;text-align:center;}
header button.navbar-toggler span{display:table;width: 100%;border-bottom:solid 2px #333;margin:0 auto;transition:all .2s ease-in-out;}
header button.navbar-toggler span + span{margin-top:6px}
header button.navbar-toggler[aria-expanded="true"] span{position:absolute;left:23%}
header button.navbar-toggler[aria-expanded="true"] span:nth-child(1){transform:rotate(-45deg)}
header button.navbar-toggler[aria-expanded="true"] span:nth-child(2){display:none}
header button.navbar-toggler[aria-expanded="true"] span:nth-child(3){transform:rotate(45deg);top:14px}      
/*麵包屑*/
.breadcrumb {margin-bottom: 1rem;}    
    
/*首頁banner*/
.carousel,.banner{margin-top:71px;}
  
/*產品介紹*/
.productIntro {flex-wrap: wrap-reverse;flex-direction: column;}
.productBox { width: 100%;}
.productMore {width:100%;padding: 0px 10px;}
.productIntro ul {/* width: calc(100% - 2rem); */padding: 0 1rem;}
    
/*案例實績*/
.caseOverlay{width:calc(100% / 2 - 1rem)}
.caseOverlay:nth-child(3n){margin-right:1rem}    
.caseOverlay:nth-child(2n){margin-right:0}  
    
/*聯絡我們*/
.contactGrid {display: block;}
.contactGrid>* { width: 100%;}    
}

@media (max-width: 950px) {
/*首頁*/
.ixGrid {padding-bottom:3rem;}
.ixGrid .container {display: block;}
.ixbox {width: 96%;}
.ixbox:last-child {width: 100%;margin-top: 3rem;text-align: center;}
.ixService {padding-bottom:0}
    
/*關於我們*/
.aboutBox{display:block;}
.aboutBox:last-child { display: flex; flex-wrap: wrap-reverse; margin-top: 3rem;}
.aboutBox article{width:100%}  
.aboutBox .imgLeft,.aboutBox .imgRight{padding:0 2em}
.serviceItem li a { display: block;}
.aboutPic{margin-top: 1rem}
.serviceItem .imgBox{margin: 1rem 1rem 0;}
}

@media (max-width: 768px) {
.mjTit {font-size: 1.6rem;}    
.btnWrap a {font-size: 1.1rem;}
    
/*公司簡介*/
.aboutBox h2 { font-size: 1.4rem;}    
.aboutBox{font-size: 1.1rem;} 
.serviceItem h3{font-size: 1.5rem;}
    
/*服務項目*/
.serviceGrid .serviceBox {width: calc(100% / 2 - 20px);}    
.serviceGrid article h2{font-size: 1.4rem;}
.serviceGrid p{font-size: 1.1rem;}
    
/*實績案例*/
.caseGrid { margin-top: 2rem;}
.caseList h2 {font-size: 1.4rem;}
   
/*聯絡我們*/
.contactInfo .boxTit {font-size: 1.4rem;}
}

@media (max-width:640px) {
#goTop{/* width:100%; *//* left:0; */right:0;bottom: 0;border-radius:0;border:0;border-top:1px solid #eee;color: #fff;background: #0b67a5;z-index: 11;} 

/*footer*/
footer {padding-bottom: 3.5rem;margin-top: 100px;}   
footer:before {height: 100px;top: -100px;}      
    
/*標題*/
.ixTitle{font-size: 1.6rem;}    
    
/*首頁*/
.fb_iframe_widget iframe {max-width: 96%!important;}  
    
/*首頁-營業項目*/
.ixService li a>h2{font-size: 1.3rem;}
.ixService li a>span{font-size: 1.1rem;}
.ixService li { width: calc(100% - 20px);}  
 
/*公司簡介*/
.serviceItem h3 { padding-top: 4rem;}    
    
/*服務項目*/
.serviceGrid .serviceBox {width:100%}   
    
/*產品介紹*/
.proInfo { margin-left: 1rem;}    
.proInfo>ul>li:after { width: 100%;}
.proImg img {max-width: 100%;}
.productBox{/* width: 90%; */margin: 0 auto;padding: 0;}
.productMore ul{margin:0;}
.pBox:not(:last-child) { display: block;}
.pBox { width: 100%;}
.productList {width:100%;bottom: 0;}

/*案例實績*/
.caseOverlay{width:100%;margin-right:0}
.caseOverlay:nth-child(3n){margin-right:0}  
}

@media (max-width:480px) {
footer ul { text-align: left;}

}
    
@media (max-width:399px) {
/*主選單*/
header .logo h2{font-size: 1.4rem;letter-spacing: 3px;font-weight:bold;margin-bottom:0;}
header .logo p{margin-bottom:0;font-size: 12px;font-weight: bold;color: #5ea808;}
header .logo img{max-width: 35px;}
header .logoWord{padding-left: 6px;}
  
/*首頁*/
.ixAbout article {margin-left: 0;} 
}