body {position: relative;  margin: 0; height: 100%; font-family: Arial, Helvetica, sans-serif,'Microsoft JhengHei','微軟正黑體'; font-size: 14.5px; line-height: 1.5;}

.owl-carousel .owl-stage-outer{width: 100%;}

h3{font-size: 22px; margin-block-start: 0; margin-block-end: 0;}
h4{font-size: 24px; margin-block-start: 0; margin-block-end: 0; text-align: center;}

.fixpintop{width: 100%; z-index: 99;}
.header{background-color: #018a71; color: #fff; max-height: 64px; overflow: hidden; width: 100%; z-index: 99;}
.header .row{margin-bottom: 0;}
.header h3{color: #fff; margin-left: 60px; padding-top: 23px; padding-bottom: 23px; font-weight: bold; color: #fff; }
.header .logobox{text-align: right; padding-top: 16.5px; padding-bottom: 16.5px;}
.header .logobox img{max-height: 32px; margin-right: 60px; }
.header a{color: #fff;}

.breadcrumbbox{background-color: #fff; padding: 6px 0 0 60px; height: 56px;  position: relative; }
.breadcrumbbox .row{margin-bottom: 0;}
.breadcrumbbox .breadcrumb{color: #333; font-weight: bold; display: inline-block;  height: 100%; }
.breadcrumbbox ul{padding-inline-start: 0; margin-block-start: 0; margin-block-end: 0;}
.breadcrumbbox ul li{cursor: pointer;}
.breadcrumbbox .breadcrumb a{color: #333;}
.breadcrumbbox .breadcrumb:before{color: #333; vertical-align: baseline; content: "|"; }

.sub-breadcrumbbox {border-top: 1px solid #ccc; height: 69px;}
.sub-breadcrumbbox .breadcrumb{font-weight: 500; font-size: 15px; letter-spacing: 0.12em; font-weight: bold; margin-top:12px;}
.sub-breadcrumbbox .breadcrumb:before{content: ">";  font-size: 15px;    }
.sub-breadcrumbbox .breadcrumb .material-icons{vertical-align: sub;}


.breadcrumbbox .subnav-content {
    display: none;
    font-family: Noto Sans JP,"游ゴシック",YuGothic,Hiragino Kaku Gothic ProN,Hiragino Kaku Gothic Pro,Meiryo,sans-serif;
    font-size: 16px;
    position: absolute;
    left: 0; bottom: -150px;
    width: 100%; height:154px ; 
    padding:54px 0 60px 40px;
    background: rgba(37, 37, 37, 0.95);
    z-index: 9;
}
.breadcrumbbox .breadcrumb .subnav-content a {
  
    color: white;
    font-weight: 500;
    text-decoration: none;
    padding: 0 0 0 2em;
}
.breadcrumbbox .breadcrumb .subnav-content a:before{content: ">"; font-size: 15px; margin-right: 8px; }

/* Add a grey background color on hover */
.breadcrumbbox .breadcrumb .subnav-content a:hover {text-decoration: underline; border:#fff; }
  
/* When you move the mouse over the subnav container, open the subnav content */
.breadcrumbbox .breadcrumb.subnav:hover .subnav-content {display: block;}

@media (min-width: 320px) and (max-width: 480px) {
    .header h3{margin:0; font-size: 20px;  }
    .header .logobox{text-align: right;}
    .header .logobox img{margin-right:1em ;}
    .breadcrumbbox{padding-left: 0;}
    .heater-page.product .bannerbox{height: 250px;}
    
}

@media (min-width: 481px) and (max-width: 1023px) {
    .header h3{margin-left: auto;}
    .header .logobox img{margin-right: auto;}
    .breadcrumbbox{padding-left: 0; }
    .breadcrumbbox .breadcrumb{font-size: 18px;}
    .breadcrumbbox .subnav-content{bottom: -95px; height: 54px; padding: 32px 0 60px 40px;}
    .sub-breadcrumbbox.breadcrumbbox{margin-top: 0;}
    .sub-breadcrumbbox .breadcrumb{margin-top: 12px;}

}

@media only screen and (min-width: 1024px) and (max-width: 1440px) {

}
.sliderbox{position: relative; }
#slider .item {margin: 5px; color: #fff; -webkit-border-radius: 3px;-moz-border-radius: 3px; border-radius: 3px; text-align: center;}
#carouselbox{max-width:35%; position: absolute; right: 0; bottom: -40px; background-color: #fff; z-index: 1; padding: 24px; }
#carousel .item {background: #c9c9c9;  /* padding: 10px 0px; */ margin: 5px; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; cursor: pointer;}
#carousel .item h1 {font-size: 18px;}
#carousel .owl-item.current img{opacity: 1;}
#carousel .owl-item img{opacity: 0.5;}

.owl-theme .owl-nav [class*="owl-"] {transition: all 0.3s ease;}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {background-color: #d6d6d6;}
#carousel .owl-dots{display: none;}

#slider.owl-theme {position: relative;}
#slider.owl-theme .owl-next,
#slider.owl-theme .owl-prev {width: 22px;height: 40px;margin-top: -20px;position: absolute;top: 50%;}
#slider.owl-theme .owl-prev {left: 10px;}
#slider.owl-theme .owl-next {right: 10px;}
/* animate fadin duration 1.5s */
.owl-carousel .animated {animation-duration: 1.5s !important;}
/* 輪播的前後按鈕背景調大 */
#slider.owl-theme .owl-next,
#slider.owl-theme .owl-prev {width: 35px !important;height: 55px !important;}
#slider svg {width: 22px !important;}
#slider .card-panel{
    position: absolute;
    top:0;
    right: 0;
    padding:20px;
    background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.5);
    text-align: left;
    font-size:24px;

} 
#slider .panelcontent{z-index: 9; color: #fff;}
#slider .card-panel h5{font-size: 32px;}

.bannerbox{height: 300px; background:url('/assest/img/heater/p2_pic1.jpg') no-repeat center center; position: relative; background-size: cover;}
.bannerbox h2{position: absolute; color: #fff; font-size:36px; font-weight: bold; left: 200px; top: calc(50% - 100px);}
.owl-theme .owl-nav [class*=owl-]:hover{background-color: transparent;}


/***********
**heater-page
************/
.heater-page h4{text-align: left; }
.heater-page .bodyer {background-color: #ececec; position: relative; }
.heater-page .sliderbox .content {position: absolute; left: 0; top:calc(50% - 100px) ; color: rgb(51, 51, 51);  font-family:"微軟正黑體"; padding-left: 60px; font-weight: bolder;} 
.heater-page .sliderbox .content h2{font-size: 36px; font-weight: bolder;}
.heater-page .sliderbox .content .desc{font-size: 24px;}
.heater-page .formsearch {height: 240px; background-color: #fff;}
.heater-page .formsearch h4{font-size: 28px; line-height: 240px; font-weight: bold; color: #323232;}
.heater-page .formsearch h4::before{content: "—"; margin-right: 24px;}

.heater-page .industry{background-color: #ececec; }
.heater-page .industry .listbox { max-width: 420px; text-align: center; background-color:#fff; width: 32%; margin:-50px 5px 0 5px; padding: 0; }
.heater-page .industry .listbox h5{font-size: 24px; font-weight: 600; letter-spacing:0.12em; text-align: left; color: #009C74; width: 90%; margin: 48px auto 20px auto; }
.heater-page .industry .listbox .imgbox{ position: relative; margin-bottom: 48px;}
.heater-page .industry .listbox .imgbox img{width: 100%; object-fit: cover;}
.heater-page .industry .listbox .imgbox .title{width: 80%; background-color: #018a71; color: #fff; font-size: 26px; font-weight: 600; letter-spacing: 0.12em; padding: 8px 0; text-align: center; margin: 0 auto; position: absolute; bottom: -15%;  left: 10%;}
.heater-page .industry .listbox .flow li{background-color: #f1f1f1; position: relative; text-align: center; min-height: 193px; width: 90%; margin: 10px auto; }
/* .heater-page .industry .listbox .flow li .content{position: absolute; top:15px; left: 15px; font-weight: bold; text-align: left;}
.heater-page .industry .listbox .flow li h6{font-size: 24px; font-weight: 600; margin-bottom: 0;} */
.heater-page .industry .listbox .flow li .desc{font-weight: 400;    font-size: 14px;    padding-left: 2px;}
.heater-page .industry .listbox .flow li img{vertical-align: bottom; width:100%;}
.heater-page .industry .listbox .flow li .content{
    position: absolute;
    left: 24px;
    right: 0;
    top: 27px;
    letter-spacing: 0.12em;
    text-align: left;
    color: #323232;
    transition: color 0.3s ease;
}
.heater-page .industry .listbox .flow li .content h6 {
    font-size: 24px;
    font-weight: 600;
    margin:0 0 1px 0;
}
.heater-page .industry .listbox .flow li .content p {
    font-weight: 400;
    font-size: 14px;
    padding-left: 2px;
}

.heater-page .industry .listbox .adapter a{color: #009C74;}
.heater-page .industry .listbox .adapter li{width: 90%; min-height: 85px; line-height:42.5px; background-color: #D7F0E9; color: #009C74; font-size: 24px; padding: 20px 0; text-align: center;  margin: 10px auto; text-align: center; font-weight: 600; }
.heater-page .industry .listbox .adapter li.duble-h{ line-height: 138px; min-height: 180px;}





@media (min-width: 360px) and (max-width: 1023px) {
    .bannerbox{background:url('/assest/img/heater/p2_pic1.jpg') no-repeat left center;}
    
    .heater-page .sliderbox .content{top:2px}
    .heater-page .sliderbox .content h2{font-size: 32px;}
    .heater-page .industry .listbox{width: 100%; margin-bottom: 64px;}
}

.heater-page .hotsource{background-color: #ececec; position: relative;}
.heater-page .hotsource .listbox {max-width: 600px; margin: -50px auto 0 auto; background-color: #D7F0E9;}
.heater-page .hotsource .listbox .imgbox{max-width: 470px; margin: 0 auto; position: relative;  }
.heater-page .hotsource .listbox .imgbox img{width: 100%; margin-top: 48px; }
.heater-page .hotsource .listbox .imgbox .title{font-size: 27px; color:#008c71; font-weight: bold; text-align: center; margin: 20px auto;}


.heater-page .hotsource .hg-imgbox{font-size: 0; text-align: center; background-color: #fff;  padding-top: 48px;}


.heater-page.howheater {background-color: #ECECEC;}
.heater-page.howheater .contentbox{padding-bottom: 160px; position: relative; }
.heater-page.howheater .contentbox .conteninner{position:absolute; left:0; top: -90px; width: 100%; }

.heater-page.howheater .contentbox .imgbox img{width: 100%;}
.heater-page.howheater .contentbox .desc{font-size: 16px;}
.heater-page.howheater .contentbox h2{font-size: 34px; font-weight: bold; text-align: center; padding-top: 120px;}
.heater-page.howheater .contentbox .num{font-size: 18px; font-weight: bold;}
.heater-page.howheater .contentbox .num i{display: inline-block; width: 30px; height: 30px; font-size: 20px; line-height: 30px; font-weight: bold; font-style: normal; text-align: center;color: #009C74; border:1px solid #009C74 ; border-radius:50%; margin-right:1em; margin-bottom: 6px; vertical-align: middle; }
.heater-page.howheater .contentbox .btn{background-color: #008c71; width: 500px; font-size: 28px; font-weight:bold;}
.heater-page.howheater .product-contact {margin-top:130px; padding:90px 0; border-top:1px solid #ececec; }
.heater-page.howheater .product-contact .desc{color: 009C74; margin-bottom: 120px;}

@media (min-width: 360px) and (max-width: 1023px) {
    .heater-page.howheater .bannerbox h2{font-size: 32px; left: calc(50% - 5.5rem);}
    .heater-page.howheater .contentbox{margin-bottom: 0; padding-bottom:0;}
    .heater-page.howheater .contentbox h2{padding-top:0; font-size: 48px; margin-top: 48px;}
    .heater-page.howheater .product-contact {margin-top: 65px;  padding:45px 0;}
    .heater-page.howheater .product-contact .desc{ margin-bottom: 60px;}
    .heater-page.howheater .contentbox .btn{width: 80%;}
}

.heater-page.product  {background-color: #ECECEC;}
.heater-page.product .contentbox{background-color: #ECECEC; padding-bottom: 160px; position: relative; }
.heater-page.product .contentbox .conteninner{position:absolute; left:0;top: -90px; width: 100%; }

.heater-page.product .bannerbox{background:url('/assest/img/heater/p3_pic1.jpg') no-repeat top center; background-size:contain; }
.heater-page.product .bannerbox h2{color: #333; left: 200px; }
.heater-page.product .contentbox h2{font-size: 34px; font-weight: bold; text-align: center; padding-top: 120px;}
.heater-page.product .contentbox h4{font-size: 24px; font-weight: bold;}
.heater-page.product .contentbox hr{margin: 36px 0;}
.heater-page.product .contentbox .desc{font-size: 16px;}
.heater-page.product .contentbox .imgbox{margin: 80px 0;}
.heater-page.product .contentbox .imgbox img{max-width: 100%;}
.heater-page.product .contentbox .num{font-size: 32px; font-weight: bold;}
.heater-page.product .contentbox .num i{display: inline-block; width: 36px; height: 36px; font-size: 20px; line-height: 36px;  font-weight: bold; font-style: normal; text-align: center;color: #009C74; border:1px solid #009C74 ; border-radius:50%; margin-right:1em; margin-bottom: 6px; vertical-align: middle; }
.heater-page.product .contentbox .btn{background-color: #008c71; width: 500px; font-size: 24px; font-weight: bold; }
.heater-page.product .contentbox li{margin-bottom:32px;}
.heater-page.product .contentbox li b{margin-bottom:16px;}

@media (min-width: 320px) and (max-width: 640px) {
    .heater-page.product .bannerbox{display: none; }
    .heater-page.product .contentbox .btn{width: 80%;}
}

@media (min-width: 641px) and (max-width: 1023px) {
    .heater-page .contentbox{padding-bottom: 0;}
    .heater-page.product .bannerbox h2{left:5em; top:20px;}
    .heater-page.product .contentbox h2{font-size: 32px; padding-top: 0;}
    .heater-page.howheater .contentbox h2{padding-top:0; font-size: 48px;}
    .heater-page.product .contentbox .imgbox img{width: 100%;}
    .heater-page.product .contentbox .btn{width: 100%;}
}


.heater-page.ledunit {background-color: #ECECEC;}
.heater-page.ledunit .bannerbox{background:url('/assest/img/heater/p4_pic1.jpg') no-repeat center center; }
.heater-page.ledunit .bannerbox h2{color: #333;}

.heater-page.ledunit .contentbox{background-color: #ECECEC; padding-bottom: 160px; position: relative; font-size: 16px; }
.heater-page.ledunit .contentbox .conteninner{position:absolute; left:0;top: -90px; width: 100%; min-height: 500px; }
.heater-page.ledunit .contentbox h2{font-size: 34px; font-weight: bold; text-align: center; padding-top: 120px;}
.heater-page.ledunit .contentbox h4{font-size: 32px; font-weight: bold;}
.heater-page.ledunit .contentbox .desc{color: 009C74; margin: 120px 0; }
.heater-page.ledunit .contentbox .btn{background-color:#008c71; width: 500px; font-size: 24px; font-weight: bold; margin-bottom: 90px;}

@media (min-width: 320px) and (max-width: 640px) {
    .heater-page.ledunit .bannerbox{display: none; }
    .heater-page.ledunit .contentbox .btn{width: 80%;}
    .heater-page.ledunit .contentbox .conteninner{top: 132px; width: 100%; min-height: 500px; }

}

@media (min-width: 641px) and (max-width: 1023px) {
    .heater-page.ledunit .bannerbox h2{font-size: 32px; left:calc(50% - 5.5rem);}
    .heater-page.ledunit .contentbox h2{font-size: 32px;}
    .heater-page.ledunit .contentbox h4{font-size: 16px;}
    .heater-page.ledunit .contentbox .btn{width: 100%; }
}