body{
	position:relative;

background: #147390; /* Old browsers */
background: -moz-linear-gradient(top,  #1cb8d8 0%, #1cb8d8 29%, #98def4 53%, #1cb8d8 73%, #1494b3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1cb8d8 0%,#1cb8d8 29%,#98def4 53%,#1cb8d8 73%,#1494b3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1cb8d8 0%,#1cb8d8 29%,#98def4 53%,#1cb8d8 73%,#1494b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#147390', endColorstr='#1cb8d8',GradientType=0 ); /* IE6-9 */
}

ul li {
    list-style: none;
}
ul{padding-left:0px;}


/*------------------SLIDER---------------------------*/
.carousel-control.left {

	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,0) 100%);
	background-image: -o-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,.0001) 100%);
	background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)));
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x
}
.carousel-control.right {
	right: 0;
	
	left: auto;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,0) 100%);
	background-image: -o-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,0) 100%);
	background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)));
	background-image: linear-gradient(to right, rgba(0,0,0,.0) 0, rgba(0,0,0,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat: repeat-x
}
.carousel-inner > .item > a > img,
.carousel-inner > .item > img {
    width: 100%;
}

.item img {
    width: 100%;
}

#carousel-id .fa-chevron-left,
#carousel-id .fa-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    font-size: 40px;
}
#carousel-id {
	margin-top: 40px;
}
@media (max-width:768px){#carousel-id {
	margin-top: 0px;
	padding-right: 0px;
    padding-left: 0px;
}}
/*-------------首頁廣告區塊------------------------*/

.SERVICE_all {
    position: relative;
    z-index: 10;
}
.SERVICE_all img{ width:100%;}
.servicebtn div{ margin-bottom:15px;}
@media (min-width:991px) {.servicebtn{margin-top:35px;}}
@media (max-width:991px) {.servicebtn{margin: 35px 0 20px 0; overflow:hidden;}}
.service_top{    padding: 0 15px;}
.smallscreen {
    display: none;
}

@media (max-width:992px) {
    .service_top img {
        display: none;
    }
    .smallscreen {
        display: block!important;
    }
}



/*--------------熱銷商品---------------------------*/

.products_title {
    padding:38px 0;
    text-align: center;

}
.products_title h4{color:#fff; font-size:36px; font-weight:bold; position:relative; width:450px; margin: 0 auto;}
.products_title h4:after{ content:" "; width:70px; height:1px; background-color:#fff; display:block; position:absolute; right:0; top:50%;}
.products_title h4:before{ content:" "; width:70px; height:1px; background-color:#fff; display:block; position:absolute; left:0; top:50%;}

.products_title p{ color:#f8fb22;font-size:20px;padding-top: 10px; }
@media (max-width:590px) {
.products_title h4{font-size:30px;  width:320px; }
.products_title h4:after,.products_title h4:before{width:35px;}

	}
@media (max-width:375px) {
.products_title h4{font-size:28px;  width:285px; }
.products_title h4:after,.products_title h4:before{width:25px;}

	}
@media (max-width:320px) {
.products_title h4{font-size:24px;  width:230px; }
.products_title h4:after,.products_title h4:before{width:16px;}

	}

.products_item {
    position: relative;
    z-index: 5;
}

.pro_main {
    background: #f0f0f0;
    padding: 15px 20px;
    overflow: hidden;
}
.pro_text a{
    color: #f8fb22;}
	.pro_text a:hover{
    color: #accc05;}
.pro_main .pro_title {
    color: #565656;
    font-size: 24px;
}
.pro_main .pro_text {
    color: #accc05;
	display:block;
    font-size:20px;
}

.pro_main1 .pro_title {
    color: #fff;
    font-size: 20px;
}
.pro_main1 .pro_text {
    color: #f8fb22;
	float:right;
    font-size:20px;
}
@media (max-width:991px) {.pos_title{ display:block; width:100%;overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;}
  .pos_text{ float:left !important;}}
@media (max-width:640px) {
	.pro_main {padding: 10px 20px;}.pro_main .pro_title{font-size: 16px;}.pro_main .pro_text { font-size:14px;}
	.pro_main1 .pro_title {    font-size:16px;}.pro_main1 .pro_text {font-size:14px;}
     .products_title {    padding: 30px 0;}
}




/*-----------------------------------------------------*/
@media (min-width: 1200px){
.hidden940.navbar-collapse.collapse {
    display: none!important;

}}

.navbar {
    position: relative;

    margin-bottom:0px !important;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
    background: #FFF;

}


@media (min-width:1200px) {
    
    .navbar-header {
        float: left;

        margin-top: 5px;
    }

    

}

.navbar-brand {
    padding: 25px 0 10px 0;
}

.navbar-brand img {
    width: 70%;
}

@media (min-width:1200px) {

    .navbar-brand img {
        width: 95%;
    }
}

@media (max-width:1200px) {
		.navbar-brand {
    padding: 10px 0 10px 0;
}

}



/*--------swiper--------*/
.swiper-slide img {
	width: 100%;
	z-index: 2;
}
.swiper-button-next,.swiper-button-prev{    margin: 5px;
    padding: 50px 20px;   
    background: #1894ae; color:#fff !important;}
.swiper-button-next{ right:-30px!important;}
.swiper-button-prev{left:-30px!important;}

@media (max-width: 767px){
.products_box .container {
   width: calc(100% - 60px);
}}
@media (min-width: 768px){
.products_box .container {
    width: 690px;
}}
@media (min-width: 992px){
.products_box .container {
    width: 910px;
}}

@media (min-width: 1200px){
.products_box .container {
    width: 1110px;
}}
@media (max-width:375px) {
.mediabox .swiper-button-next, .mediabox .swiper-button-prev{top: 40%;}
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after,.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {   font-size: 32px !important;}
@media (max-width:991px) {
	.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after,.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {   font-size: 25px !important;}
	.swiper-button-next, .swiper-button-prev{padding: 25px 10px;}
	.swiper-button-next{ right:-18px!important;}
.swiper-button-prev{left:-18px!important;}
.swiper-button-next, .swiper-button-prev {margin-top: calc( var(--swiper-navigation-size))!important;;}
.positive-next, .positive-prev{    margin-top: calc( var(--swiper-navigation-size)/1.6) !important;}
}
.hrline {
	width:100%;
	height:1px;
	background-color:#8acad9;
	margin-top:45px;
}
/*----三個按鈕-----*/
.greenbox{ display:block; margin:45px 0; overflow:hidden;}
.greenbox img{ width:100%;}
/*------搜尋列--------*/
/* bootsnav的搜尋列 */
.top-search .btn-empty{
  display: inline-block;
  padding: 0;
  width: 1%;
  background-color: transparent;
  border-width: 0;
}
.top-search input{
  display: inline-block;
  width: calc(100% - 40px);
}
.top-search{
  background-color: #202020;
  padding: 10px 0;
  display: none;
}
.top-search input.form-control{
  background-color: transparent;
  border: none;
  -webkit-box-shadow: 0 0 0;
  -o-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
  color: #f0f0f0;
}
.top-search .input-group-addon{
  padding: 6px 0;
  background-color: transparent;
  border: none;
  color: #f0f0f0;
  overflow: hidden;
  width: 15px;
}
.top-search .input-group-addon.close-search{
  cursor: pointer;
  display: inline-block;
}
/* 手機板搜尋按鈕ICON */
.navbar-search-xs{
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.navbar-search-xs a{
  color:rgb(51, 51, 51);
}
.navbar-header .attr-nav{
  list-style: none;
  padding: 0;
  margin: 0;
}
/*--------nav----------*/
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
    color: #25b597!important;
}
@media (min-width:1200px) {
.navbar-nav {
    margin: 8px 40px 0 -15px;
	
}
.navbar-right {
    float: right !important;}
}
.navphone,.navline { background-color:#ababab; border-radius:10px; color:#fff !important;}
.nav.topnav>li>a { padding: 8px 20px; margin-left:10px;}
.nav.topnav>li>a img{margin-right:10px;}
.topnav .fa-search:before {
    font-size: 25px;color:#ababab; 
}
.nav.topnav>li>a:focus, .nav.topnav>li>a:hover{ background-color:#25b597; color:#fff !important;}
.nav>li.search>a:focus, .nav>li.search>a:hover{ background-color:transparent;}
.navbar-nav.topnav{     float: right; margin:20px 0 8px 0;}
.navbar-right{ float:right;     margin-left: 5%; margin-right:40px;}
.navbar-right li a{ font-size:21px !important;margin:0 35px 10px 0;}
.blueword{color:#1894ae !important;}
.outnav li{ float:left;}
.outnav ul{    position:absolute;
right:20px;
top:30px;
  }
.outnav  .navbar-right li a {
    margin: 0 0px 10px 0;
}
.navbar-header{ position:relative;}
@media (max-width:415px) {.navbar-right li a {
    font-size: 15px !important;}
	.outnav .nav>li>a {padding: 18px 5px;}
	.outnav .nav.navbar-nav>li>a {padding:0px;}
	
}
@media (max-width:1199px) {.navbar-nav{ width:100%;  margin:0px !important;} .navbar-nav li a{ font-size:16px !important;}.topnav li{padding:10px 20px; }}
@media (max-width: 320px){.topnav li {padding: 10px 0px;}}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 800px;
}
/*----------footer---------*/
.footer { background-color:#1cb8d8; color:#fff; padding: 20px 15px 20px 15px ;     margin-bottom: -21px;}
.footer ul{   display: table; margin:0px auto;padding-top:20px; }
.footericon{margin:30px auto; }
.footericon li{ padding:0 8px;}
.footer ul li{float:left;}
.footercopyright li:first-child a{ color:#fff; padding-right:20px; border-right:1px solid #fff;}.footercopyright li:last-child { padding-left:20px;}
@media (max-width:414px) {.footer { font-size:13px;}}
@media (max-width:654px){.footercopyright li:last-child { padding-left:0px; line-height: 1.8;}}
@media (max-width:633px){.footer .footercopyright li{ width:100%; text-align:center;} .footercopyright li:first-child a{border-right:0px;padding-right: 0px;}}
/*----------手機版footer---------*/
footer{   overflow: hidden; position: fixed; width:100%;bottom:0; z-index:99999;background-color:#accc05; }

footer li{ float:left;  width:calc(100%/4);text-align:center;  }
footer li a{ display: inline-block; color:#fff; font-size:15px;  padding:10px 0 6px 0; width:100%;}
@media (max-width:768px){.footer{margin-bottom: 65px;}}
@media (max-width:320px){footer li a{ font-size:13px;}.footer{margin-bottom:77px;}}
footer span{ display:block; margin-top:2px;}
footer li a:hover{background-color:#28b695; color:#fff;}
/*----------footer選單下拉---------*/

.footerdropdown .dropdown-toggle{ position:relative;}
.footerdropdown,.dropdown-menu ul{ padding:0px;}
.footerdropdown a{ color:#fff; }
.footerdropdown .dropdown-toggle{font-size: 18px; font-weight:bold;display:block; padding: 15px 15px 6px 15px; border-top:1px solid #d0eaf0;}
.menusamll li:first-child .dropdown-toggle{ border-top:0px;}
.footerdropdown .dropdown-menu a{ display:block; padding:6px 15px;}
.footerdropdown .dropdown-toggle::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid;
    border-color: transparent #d0eaf0 #d0eaf0 transparent;
    background-color: transparent;
    position: absolute;
    top: 25px;
    right: 30px;
    transform: translateY(-50%) rotate(-45deg);
    font-size: 18px;
    color: #d0eaf0;
    transition: all 300ms ease-out;
}
.footerdropdown .open .dropdown-toggle::after {  transform: translate(3px, -74%) rotate(45deg);}

@media (max-width:768px) {.footermenu .container{padding:0px;}.footermenu{  border-bottom:1px solid #d0eaf0;} .footermenu{margin-top:30px;  }}
.menubig li{ float:left; font-size:20px;     width: calc(100% /7); text-align:center;}
@media (min-width:769px) {.footermenu{ min-height:60px ; line-height:60px; background-color:#1497b6;}}

/*----------右邊浮動按鈕-----------*/
.rightbtn{ position: fixed; right:30px; top:50%; z-index:1000;}
@media (max-width:768px) {.rightbtn{  right:15px;}}
.rightbtn img{box-shadow: 0px 0px 10px 1px #5daabd;
-webkit-box-shadow: 0px 0px 4px 1px #bababa;
-moz-box-shadow: 0px 0px 10px 1px #5daabd;
-o-box-shadow: 0px 0px 10px 1px #5daabd;}
.rightbtn li{ margin-top:15px;}
@media (max-width:500px) {.rightbtn { top: 50%;}.rightbtn ul{ width:60%;} .rightbtn img{ width:100%;}.rightbtn {
    right: -26px;
}}

/*------------------gotop---------------------------*/

/* gotop */

#gotop {
    display: none;
    position: fixed;
    right: 30px!important;
    bottom: 70px!important;
    padding: 10px 15px 4px !important;
    font-size: 30px!important;
    background: rgba(4, 162, 130, 0.6) !important;
    color: #fff!important;
    cursor: pointer!important;
    -webkit-border-radius: 30px!important;
    -moz-border-radius: 30px!important;
    border-radius: 30px!important;
    z-index: 10;
}

@media screen and (max-width: 958px) {
    #gotop {
        right: 15px;
        bottom: 90px;
    }
}

/*gotop換iconfont*/

@font-face {
    font-family: 'icomoon';

    src: url('../assets/fonts/icomoon%EF%B9%96mz9gi1.eot');
    src: url('../assets/fonts/icomoon%EF%B9%96mz9gi1.eot#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon%EF%B9%96mz9gi1.ttf') format('truetype'),
    url('../assets/fonts/icomoon%EF%B9%96mz9gi1.woff') format('woff'),
    url('../assets/fonts/icomoon%EF%B9%96mz9gi1.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-gotop:before {
    content: "\e900";
}

.icon-left:before {
    content: "\e902";
    font-size: 70px;
}

.icon-right:before {
    content: "\e901";
    font-size: 70px;
}


@media screen and (min-width: 992px) {
    .icon-left:before {
        font-size: 90px;
    }
    .icon-right:before {
        font-size: 90px;
    }
}