/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font-family: 'Demibold', sans-serif;
	color:#000;
	font-size:18px;
	line-height:26px;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

.clear {*zoom:1; clear:both;}

img {max-width:100%;	vertical-align:bottom;}

a {	color:#444;	text-decoration:none;}

a:hover {text-decoration:none; color:inherit;}

a:focus {outline:0;text-decoration:none;}

a:hover, a:active {	outline:0;}

/*input:focus, textarea:focus, button:focus {	outline:0;	border:0;}*/

ul,li,h1,h2,h3,h4 {list-style-type:none;margin:0;padding:0}

p {margin-bottom:0px;}

p:not(:last-child){margin-bottom:25px;}

p:last-child{margin-bottom:0px;}

@font-face {
	font-family:'Demibold';
	src:	url('../font/SansSerifFLF-Demibold.otf');
    font-weight:normal;
    font-style:normal;
}

/*------------------------------------*\
	        HEADER
\*------------------------------------*/
.header{padding:5px 0;}
.header .row {    align-items: center;  }

.nav_area ul li{display:inline-block;padding: 0px 12px 0 0;      line-height: 60px;}

.nav_area ul li a {    color: #666;   font-size: 14px;    display: block;	text-transform:uppercase;  }

ul.sub-menu {    position: absolute;    background: #eceff3;    z-index: 555;	text-align:left;    min-width: 150px;	  }

ul.sub-menu li a{color:#304969; line-height:20px; font-weight:700;  padding:10px 15px; font-size:16px; display:block; text-transform:capitalize;   } 

ul.sub-menu li{	display:block;     padding: 0px 0;}


select.language {    background: transparent;    color: #534082;    border: 0; }

.menu-side img {    vertical-align: middle;  }

select.language option{background:#46346f; color:#fff;}

.footer  {    background:url(../image/footer-bg.png); background-size:cover; background-position:center; padding:50px 0 25px; color:#fff;   font-weight: 500; }


.nav_area ul li.menu-item-has-children a { display: inline-block; }


h3.widget-title {  	text-transform:uppercase;  color: #fff;    font-size: 35px;   margin-bottom: 20px;  }

.footer p{ font-size:20px;  } 

.footer .copyright{font-size:16px;}

/*------------------------------------*\
	        MAIN
\*------------------------------------*/

.section-title{text-transform:uppercase; font-size:35px;  color:#333333; padding-bottom:30px;}
h2.section-title:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #ff6300;
    margin: 15px auto;
}
.pro-section {    padding: 40px 0;  }
.pro-item {    border: 1px solid #ddd;     height: 390px;       margin-bottom: 20px;  transition:all .3s;   }
.pro-item:hover {
    box-shadow: 0 0 5px #000;
}
.pro-item img {    height: 190px;    object-fit: cover;    margin: 35px auto;   width:auto !important;}
.pro-item h3 {    color: #148b94;    font-size: 20px;    padding-top: 20px;    border-top: 1px solid #ddd;    margin: 0 10px;   }
.pro-item a {  padding-top:5px;  color: #ff6300;    font-size: 18px;    padding-bottom: 20px;    display: block;  }
a.view-btn { display: inline-block;  background: #fc5d00;  color: #fff;  text-transform: uppercase;   padding: 8px 30px;    margin-top: 30px;  transition:all .3s;border: 2px solid #fc5d00; }

a.view-btn:hover{ color:#fc5d00;  background:transparent; }


.news-list {    background: #18899d;    color: #fff;    padding: 40px 45px; position:absolute; right: 0;    top: 50px;   }

.news-list ul li span {    display: block;   }
.news-list h4 {  font-size: 35px;  text-align: right;  color: #ff9933;  text-transform: uppercase;   padding-bottom: 10px;  }
.news-list ul li {    margin-bottom: 15px;    line-height: normal;   }
a.allnews {    color: #fff;  }

.banner-data {    height: 500px; background-size: cover;    background-position: center; }
.banner-data div.col-sm-6 {	 color: #fff; }
.banner-data .container {    position: relative;    height: 100%;  }

.home-blog .row {    position: relative;  }
.home-blog {    padding: 50px 0 160px 0;  }
.news-list:after {    content: '';    display: block;    width: 50%;    height: 15px;    background: #fc5d00;    position: absolute;    bottom: 0;    left: 0;} 

.pagination {    display: block;    margin: 10px 0 30px 0;  }
.pagination .link {    background: #797979;    color: #fff;  }
.pagination a {display: inline-block; height: 30px; width: 30px; vertical-align: middle; text-align: center; line-height: 30px; margin: 0 4px;  }
.pagination a.active {    background: #2bbcd0;    color: #fff; }
.pagination a i {    height: 30px;    line-height: 30px; }

.banner-data h2 {  font-size: 30px;  text-transform: uppercase;  font-weight: 100;   }
.banner-data p{margin:0;}


.pro-section .owl-theme .owl-nav [class*=owl-]:hover {    background: #ccc !important;  }
.pro-section .owl-theme .owl-nav button {    position: absolute;     top: 25%;  }
.pro-section  .owl-theme .owl-nav button.owl-prev {    left: -40px;  }
.pro-section  .owl-theme .owl-nav button.owl-next {    right: -40px;  }


ul.sidemenu li a.active {    color: #ff6300;  }
.pro-list > * {    padding: 0 8px; }
.auto{margin:auto;}

.case-slider.owl-theme .owl-nav button.owl-prev {    left: -40px;  }
.case-slider.owl-theme .owl-nav button {    position: absolute;      top: 25%;  }

.home-slider .owl-dots {    position: absolute;    right: 20%;      bottom: 15px;  }
.home-slider.owl-theme .owl-dots .owl-dot span{background:#fff;}
.home-slider.owl-theme .owl-dots .owl-dot.active span, .home-slider.owl-theme .owl-dots .owl-dot:hover span { background: #fc5d00;}



/*------------------------------------*\
	        bottom to top 
\*------------------------------------*/
#button {
  display: inline-block;
  background-color: #999999;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
 content: "\f106";
     font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  font-style: normal;
  font-size: 30px;
  line-height: 45px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #1b575c;
}
#button:active {
  background-color: #1b575c;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

/*------------------------------------*\
	        SUBPAGE
\*------------------------------------*/

.content {    padding: 70px 0; }

.sub-banner {
    background: url(../image/sub-banner.png) no-repeat center;
    background-size: cover;
    padding: 150px 0 50px;
}
.sub-banner h2 {
    font-size: 40px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}

.right-content {
    background: #ffffff9e;
    position: relative;
    z-index: 9;
    top: 50px;
    padding: 50px;
    box-shadow: 0 0 10px #ddd;
    font-size: 20px;
}

ul.sidemenu > li {
    width: 100%;
    display: table;
    font-size: 18px;
    padding: 15px 0;
    border-bottom: 2px dashed #cccccc;
    color: #333;
    transition: all .4s;
}

.pro-details h3 {    color: #33a7b1;   font-size: 26px;   padding-bottom: 25px;  }
ul.listing {    padding-bottom: 25px;   }

ul.listing li:before {
    content: '\f105';
       font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    width: 15px;
    font-size: 20px;
    color: #33a7b1;
}

ul.listing li > ul> li:before {    color: #f48233;  }

ul.listing li > ul {padding-left:15px;}

.pro-details h2 { font-size: 35px; color: #333;  padding-bottom: 10px;  margin-bottom: 20px;   border-bottom: 3px solid #e2f6f9;  }
.pro-details h3 { padding-bottom: 0; }



.img-slider.owl-carousel {margin-bottom: 40px;	width: calc(100% - 250px); margin-top:30px; }
.img-slider.owl-carousel div {	width: 100%;  }
.img-slider.owl-carousel .owl-controls .owl-dot {	background-size: cover;	margin-top: 10px;  }
.img-slider.owl-carousel .owl-dots {	position: absolute;	top: 0;	right: -230px;	width: 230px;	height: 100%;  }
.img-slider.owl-carousel .owl-dot {    display: block;    width: 100%;  }
.img-slider.owl-carousel .owl-dot span{ display:none; }
.img-slider.owl-carousel .owl-dot img {	max-width: 130px;    border: 1px solid #ddd;    margin-bottom: 25px;    padding: 15px;  } 

.img-slider.owl-carousel .owl-dot.active img {  border: 2px solid #ddd; }
.img-slider.owl-carousel .owl-item img{width:auto;margin: 0 auto; }
.pro-details .img-slider.owl-carousel .owl-item.active .item { padding: 20px; }




.distri-item {    padding: 15px;    box-shadow: 0 0 5px #bcbcbc;    margin-bottom: 20px; }
h3.disti-title {    font-size: 26px;    color: #29b3c8;    padding-bottom: 10px; }
.distri-content {    border-left: 1px solid #ddd;    padding-left: 40px;   }
.distri-item .auto {    text-align: center; }
h2.subtitle { font-size: 38px;  color: #186371; margin-bottom: 20px;  border-left: 5px solid #fc5c00; padding-left: 15px;  margin-top: 30px;}
.country-title{ font-size: 30px;  color: #186371;   margin-bottom: 20px;    padding-left: 15px;   }
.country-title i{padding-right:10px;}

.pro-slider.owl-carousel .owl-nav.disabled{display:block; }
.pro-section .owl-theme .owl-nav button {
    position: absolute;
    top: 45%;
    height: 35px;
    width: 35px;
    background: #ccc;
    margin: 0;
    border-radius: 100%;
    font-size: 24px;
    color: #fff;
}
.pro-slider.owl-theme {    max-width: 90%;    margin: 0 auto;  }



label.toggle-sidemenu {
    display: block;
    background: #000;
    color: #fff;
    padding: 10px 15px;
    position: absolute;
    width: 100%;
    top: -60px;
    left: 0;
}


/*------------------------------------*\
	        MIN WIDTH
\*------------------------------------*/

@media(min-width:992px){
    
.header {
	padding: 12px 0;
}
    
.nav_area ul li:hover ul.sub-menu {	display:block;}


.nav_area > ul > li ul.sub-menu {
    transform-origin: 50% 0;
    transform: scaleY(0) translateZ(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    display: block;
}

.nav_area > ul > li:hover ul.sub-menu {
    transform: scaleY(1) translateZ(0);
    opacity: 1;
}
	
ul.menu{display:block !important; }


.side-data {
    padding-left: 25px;
}

.nav_area ul li:hover > a {
    border-bottom: 2px solid #2bbcd0;
    color: #2bbcd0;
}


.nav_area > ul > li ul.sub-menu {
    transform-origin: 50% 0;
    transform: scaleY(0) translateZ(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;    display: block;
}

.nav_area > ul > li:hover ul.sub-menu {
    transform: scaleY(1) translateZ(0);
    opacity: 1;
}

.nav_area ul li.active a { 
    border-bottom: 4px solid #f70809;
}

.nav_area > ul > li > a{
	border-bottom:4px solid transparent;
	font-size: 13px;
}

span.arrow {
    display: inline-block;
    padding-left: 5px;
    font-size: 14px;
}

label.toggle {    display: none;  }

nav.nav_area {    xpadding-top: 15px;  }


.home-blog .row > * {    max-width: 57%;    flex: 0 0 57%;  }

.about .left-img {    position: absolute;    right: 0; }
.banner-data div.col-sm-6 {    position: absolute;    width: 50%;    right: 0;    top: 50%;    transform: translateY(-50%); }


ul.menu{display:block !important; }  

}


@media(min-width:768px){
	label.toggle-sidemenu {
    display: none;
}
ul.sidemenu{display:block !important; }   
}


/*------------------------------------*\
	        MAX WIDTH
\*------------------------------------*/


@media (max-width:1100px){

	.nav_area ul li {padding-right:12px;}
	.nav_area ul li a { font-size: 13px; }
	
	
}


@media (max-width:991px){	
.content .container {
    max-width: 100%;
}

	
	.header .row {    xflex-wrap: nowrap;      xalign-items: end;  }
	
	.header{xpadding:5px 0 0 0;}
	
	.logo-side {    width: 80%;  }
	
	ul.menu {    display: none; position:absolute; width:100%; left:0;  text-align: left;    background:#186371;  z-index:2;    padding: 15px 10px;}
	
	.toggle {    color: #186371; padding: 15px 0;    font-size: 22px;  }
	
	.menu-side {   position:initial;}	
	
	.nav_area ul li a {    line-height: 40px;    font-size: 14px; color:#fff; }
	
	nav.nav_area ul li{display:block;     position: relative; }
	
	span.arrow {
    position: absolute;
    right: 10px;
    color: #fff;
    top: 10px;
    width: 40px;
    text-align: center;
    height: 30px;

	}
	
	ul.sub-menu {    display: none;    position: relative;  	}
	

	
	ul li .sub-menu li a {    line-height: 14px;  color:#186371; padding: 10px 15px;}	
	
	.banner-data div.col-sm-6 {    text-align: center;    padding-top: 100px;     max-width: 100%;    flex: 0 0 100%;  }
	.banner-data {height:450px;}
	.pro-slider.owl-theme {    max-width: 80%;  }
	.banner-data .text-right {    text-align: center !important;  }
	.home-banner .owl-theme .owl-nav.disabled+.owl-dots {   right: 0;    width: 100%;   }
	.news-list {position:relative; top:0;}
	
	.img-slider.owl-carousel .owl-dot img {max-width:80px; }
	
	
	

	
	
}




@media (max-width:767px){
	
	label.toggle-sidemenu span {
    display: inline-block;
    width: 94%;
}

.sidemenu{display:none; }
	
		ul.sidemenu {    margin-bottom: 30px; }
	
	.pagination {text-align:center;}
	ul.sidemenu > li > span {display:initial;}
	
	h2.subtitle {    font-size: 28px; }
	.sub-banner h2 {font-size:30px;}
	.distri-item .auto {margin-bottom:30px;}
	.distri-content {    border-left: 0;    padding-left: 15px;  }
	.contant{padding:40px 0;}
	.right-content {top: 0;    margin-bottom: 30px;    padding: 15px;    box-shadow: none;  }
	.about .home-blog {    padding: 0;  }
	.banner-data h2 {font-size:26px;}

	
	.news-list {    position: relative; }
	.pro-details h2{font-size:30px;}
	
	.img-slider.owl-carousel{width: calc(100% - 100px)}
	.img-slider.owl-carousel .owl-dots {    width: 100px;    right: -100px; }
	.img-slider.owl-carousel .owl-dot img {max-width:90px; padding:15px; }
	
}


@media (max-width:500px){
	.img-slider.owl-carousel .owl-dot img {max-width:50px; padding:5px; }
    .pro-item img{height:100px;}
    .pro-item {height:340px;}
    
    
}

.editor_content { font-size:16px; line-height:normal; }
/*分頁css*/
/*.pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
  padding: 0;
  margin: 15px 0 30px 0;
  list-style: none;
}
.pagination .page-link {
position: relative;
  display: block;
  padding: 8px 15px;
  font-family:'Lato', Mukta, sans-serif;
  line-height: 1.25;
  color: #575758;
  background-color: #fff;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out;
  -o-transition: background 300ms ease-in-out, color 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out;
  margin-right: 8px;
}

.pagination .page-link:hover,.pagination .page-item.prev .page-link,.pagination .page-item.next .page-link {
background: #797979;
color: #ffffff;
text-decoration: none;
}

.pagination .page-item.active .page-link {
background: #0c69bb;
color: #ffffff;
}*/
/*分頁css結束.   這個一般都有。*/