@charset "utf-8";

body{ font-family:"微軟正黑體", "新細明體", "Arial Unicode MS"}
@import url(banner.css);

/*========================================================
                      	 共同設定
=========================================================*/
.container-fluid{ 
	padding:40px 0;
	max-width:1280px;
}

.container-fluid h1{
	font-size:24px;
	font-weight:bold;
	padding:20px 0;
}


.container-fluid p{
	line-height:2em
}


.container-fluid h1 img{
	padding-right:10px;
}

.top_blank{ height:40px;}





.title_box{ padding:20px 0;}
.title_box h1{
	font-size:25px;
	text-align:center;
}


.title_line{
	width:120px;
	height:6px;
	background-color:#1448a3;
	margin:12px auto;
}


.row{margin:0; padding:0 15px;}
.container ul{ list-style:none; padding:0;}


.for_pc{ display:none;}
@media (min-width:992px){.for_pc{ display:block;}}
.for_mobile{ display:block; padding-top:80px;}
@media (min-width:992px){.for_mobile{ display:none;}}

table td{ padding:5px;}
table .bg1{ background:#beedfd;text-align:center;}



/*========================================================
                      	 backtop設定
=========================================================*/

.share{margin:8px 0;}
.share img{margin:0 2px;}

.backtop{
	position:fixed;
	z-index:15;
	width:48px;
	height:48px;
	left:100%;
	top:100%;
	margin-top:-130px;
	margin-left:-64px;
	padding:5px;
	background-color:rgba(000,000,000,0.5);
	text-align:center;
	color:#fff;
	font-size:1.3rem;
	border-radius:4px;
	cursor:pointer;
	-webkit-transition: background 0.3s; /* Safari */ 
	transition: background 0.3s;
}
.backtop:hover{ background-color:#900;}





/*========================================================
                      	 navbar設定
=========================================================*/

.navbar{ padding:0px;}
.navbar-brand{ margin-left:15px;}
@media (min-width:768px){.navbar-brand{ margin-left:0;}}
.navbar-toggler{ margin:15px;}
.navbar-nav .nav-item .nav-link{ padding:15px;}
.navbar-nav .nav-item .nav-link:hover{ background-color:#999;}



.menu_header{ position:fixed; z-index:9000; top:0; left:0; width:240px; height:100%; background-color:#7871bd; -webkit-transition: margin 0.3s; /* Safari */ transition: margin 0.3s; overflow-y: auto;}

.menu_header img{ margin:12px 0;}

.menu_close{ left:100%; margin-left:0px;}
.menu_open{ left:100%; margin-left:-240px;}

.menu_header .container-fluid{ padding:0; position:relative; max-width:1280px;}


@media (min-width:992px){
	.menu_header{ position:fixed; width:100%; height:auto; background-color:transparent; overflow-y:visible;}
	.menu_open, .menu_close{ left:0; margin-left:0;
		background: #8acef1; /* Old browsers */
	background: -moz-linear-gradient(left,  #8acef1 0%, #0c3f9e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #8acef1 0%,#0c3f9e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #8acef1 0%,#0c3f9e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8acef1', endColorstr='#0c3f9e',GradientType=1 ); /* IE6-9 */
	}
	.menu_header .container-fluid{ padding:0 15px;}
}

.logo_big{ display:none}
.logo_big img{ -webkit-transition: all 0.3s; /* Safari */ transition: all 0.3s; width:250px; height:auto; margin-top:15px;}
@media (min-width:992px){
	.logo_big{ display: block; text-align:center;  float:left;}
	.logo_big img{ width:150px;}
}
@media (min-width:1200px){
	.logo_big img{ width:300px; margin-top:15px;}
}


.menu_ul{list-style:none; padding:0;}
.menu_ul li{ border-bottom:1px dotted #534c98;}

.menu_ul li a{ color:#fff; display:block; font-size:1.1rem; -webkit-transition: background 0.3s; /* Safari */ transition: background 0.3s;  padding:15px;}
.menu_ul li a:hover, .menu_ul li a:focus{ text-decoration:none; background-color:#900;}
.menu_ul li a span{ display:block; font-size:0.8rem;}



/*.menu_ul .lang {
    float: none;
    display: inline-block;
    margin: 20px 0 0 0;
    font-size: 16px;
}*/
.menu_ul .lang a:nth-of-type(1) {
    background: url(../../images/icon.jpg) no-repeat left center;
    color: #FFF;
}
.menu_ul .lang a:hover{ color:#fac627;}



@media (min-width:992px){
	.menu_ul{ text-align:center; border-radius:4px; height:34px; float:right; margin-top:0px;}
	.menu_ul li{ float:left; border:none; position:relative;}
	.menu_ul li a{ color:#fff; font-size:0.95rem; width:auto; text-align:center; padding:20px 15px; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}
	.menu_ul li a:hover, .menu_ul li a:focus{ color:#FC0; background-color:transparent;}
	.menu_ul .mobile_home{ display:none;}
}
@media (min-width:1200px){
	.menu_ul li a{ font-size:1rem; width:auto; text-align:center; padding:20px 25px ;}
}


.mobile_hide{ background-color:#000; opacity:0; position:fixed; z-index:8999; top:0; left:0; width:100%; height:100%;}

.mobile_header{ 
background: #8acef1; /* Old browsers */
background: -moz-linear-gradient(left,  #8acef1 0%, #0c3f9e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #8acef1 0%,#0c3f9e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #8acef1 0%,#0c3f9e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8acef1', endColorstr='#0c3f9e',GradientType=1 ); /* IE6-9 */

position:fixed; z-index:8900; height:88px; width:100%; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s;}

.mobile_header img{ margin:25px 0 0 15px; width:250px;}
@media (min-width:992px){.mobile_header img{margin:20px 0 0 15px; width:80px; height:auto;}}

.iconbar{float:right; width:48px; height:36px; margin:24px 15px 0 15px; border:2px solid #fff; border-radius:4px; cursor:pointer; background-position:center; background-repeat:no-repeat;-webkit-transition: background 0.2s; /* For Safari 3.1 to 6.0 */ transition: background 0.2s;}

.iconbar_open{background-image:url(../../images/iconbar.png);}
.iconbar_close{background-image:url(../../images/iconbar2.png); border-color:#fff;}

.menu_title{ margin:3px 15px; padding-top:23px; padding-bottom:16px; color:#fff; font-family:Verdana, Geneva, sans-serif;}

@media (min-width:992px){
	.mobile_hide{ display:none;}
	.mobile_header{ display:none;}
	.iconbar_close{ display:none;}
	.menu_title{ display:none;}
}

.menu_ul .mobile_language{ color:#fff; margin:10px 15px; border:none;}
.menu_ul .mobile_language a{ display:inline-block; padding:10px 16px; font-size:0.9rem; border:1px solid #fff; border-radius:5px;}
.menu_ul .mobile_language a:hover,
.menu_ul .mobile_language a.active{ background-color:#fff; color:#2a2b83;}
@media (min-width:992px){
	.menu_ul .mobile_language{ display:none;}
}

/*.search_nav{ display:none;}
@media (min-width:992px){
	.search_nav{ position:absolute; padding:0; list-style:none; top:2px; left:100%; width:400px; margin-left:-430px; text-align:right; display:block;}
	.search_nav li{ display:inline-block; font-size:0.8rem; margin-left:15px;}
	.search_nav li a{ color:#2a2b83;}
	.search_nav li a:hover{ color:#946cad; text-decoration:none;}
}
@media (min-width:1200px){
	.search_nav{ margin-left:-445px;}
}*/

.menu_ul .sub_nav{ display:none;}
@media (min-width:992px){
	.menu_ul .sub_nav{ position:absolute; top:50px; -moz-box-shadow:0 4px 15px -2px gray; -webkit-box-shadow:0 4px 15px -2px gray; box-shadow:0 4px 15px -2px gray;}
	.menu_ul .sub_nav a{ background-image:none; padding:10px 10px; margin:0; border-top:1px dotted #ccc; background-color:#fff; width:140px; margin-left:-23px; font-size:0.9rem;}
	.menu_ul .sub_nav a:hover{background-color:#ccc;}
}
@media (min-width:1200px){
	.menu_ul .sub_nav a{width:160px; margin-left:-20px;}
}

@media (min-width:992px){
	.drop1:hover .sub_nav1{ display:block;}
}
.fadeInDown {
  -webkit-animation: fadeInDown 0.4s; /* Safari 4+ */
  -moz-animation:    fadeInDown 0.4s; /* Fx 5+ */
  -o-animation:      fadeInDown 0.4s; /* Opera 12+ */
  animation:         fadeInDown 0.4s; /* IE 10+, Fx 29+ */
}

.menu_header.menu_scroll{ 
	background: -moz-linear-gradient(left,  #8acef1 0%, #0c3f9e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #8acef1 0%,#0c3f9e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #8acef1 0%,#0c3f9e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8acef1', endColorstr='#0c3f9e',GradientType=1 ); /* IE6-9 */
}
.menu_header.menu_scroll .menu_ul{}
.menu_header.menu_scroll .logo_big img{ width:200px;}
@media (min-width:992px){
	.menu_header.menu_scroll .menu_ul li a{ padding:20px 15px 20px 15px;}
}
@media (min-width:1200px){
	.menu_header.menu_scroll .menu_ul li a{ padding:15px 25px 15px 25px;}
}

.menu_ul .nav_share{ display:inline-block;}
@media (min-width:992px){
	.menu_ul .nav_share a{ padding:50px 10px 50px 10px;}
	.menu_header.menu_scroll .menu_ul .nav_share a{ padding:30px 10px 30px 10px;}
}
@media (min-width:1200px){
	.menu_ul .nav_share a{ padding:50px 10px 50px 10px;}
	.menu_header.menu_scroll .menu_ul .nav_share a{ padding:30px 10px 30px 10px;}
}

/*========================================================
                      	 歡迎頁home_page設定
=========================================================*/
.home_page{
	background: url(../../images/home_bg.jpg);
	background-size: cover;
}
.home_page .content{
	/*padding-top:100px;*/
}
	
.home_page .logo img{
	width: 300px;
	padding:10px 0;
}

.home_page .for_mobile{padding: 0;}

.home_page .product_box{
	/*background: url(../../images/home_bg.jpg);*/
}
.home_page .nav-tabs{
	margin:0;
	padding:30px 0;
}


/*========================================================
                      	 banner設定
=========================================================*/

.top_banner{ background-position:center; background-size:cover; height:750px;}
.top_banner img{ width:100%;}
.top_banner .container-fluid{ position:relative; height:100%;}
.top_banner .top_banner_text{ position:absolute; top:50%; left:0; color:#fff; text-shadow: 0px 0px 10px #333, 0px 0px 10px #555}
.top_banner .top_banner_text h1{ font-size:3rem;}

.carousel-item {
  height: 600px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-caption{ text-align:left; margin:0 0 0 0; padding:0; top:50%; transform:translateY(-10%); text-shadow: 0px 0px 10px #333, 0px 0px 10px #555}

.carousel-caption img{
	display:block;
	margin:0 auto;
	width:200px;
}
@media (min-width:992px){.carousel-caption img{ width:280px;}}




@media (min-width:992px){
	.carousel-item{ height:750px;}
	.carousel-caption{ margin:0 0 0 0;}
	.carousel-caption h3{ font-size:3rem;}
	.carousel-caption p{ font-size:1.2rem;}
}



/*========================================================
                      	 產品項目
=========================================================*/

.h3-title{
	font-size:20px;
	text-align:center;
	padding:10px 20px;
	color:#FFF;
	background-color:#3e7be6;
	font-weight:bold;
	border-radius:7px;	
}
.h3-title span{
	color:#ffda6a;
}
/*.h4-title{
	font-size:17px;
	color:#08aee5;
	text-decoration:underline;
	text-align:left;
	font-weight:bold;
}
*/


.product-box img{
	margin:0 auto;
	display:block; 
	width:100%;
	margin-bottom:10px;
	border:1px solid #d0d0d0;
	border-radius: 7px;
}
.product-box {
	margin-bottom: 25px;
}



/*========================================================
                       產品列表
=========================================================*/
/*.product-2,.product-4,.product-6{
	background: #e5e5e5;
}*/
section.bg1{
	background:#f4f4f4;
}
.list_box li{
	background:url(../../images/arrow.gif) no-repeat left;
	padding-left:15px;
}


/*========================================================
                       聯絡我們
=========================================================*/
.info_fluid li i{
	margin-right:5px;
	color:#08aee5;
}



#form1 .form-group{
	padding:0;
	margin:0;
}

#form1 .form-group span{
	color:#F00;
}
#form1 .form-group label{
	font-weight:bold;
	padding-right:10px;
}
#form1 .form-group div{
	padding-bottom:7px;
}
#form1 .btn:hover{ cursor:pointer;}

.form-button{
	text-align:center;
	margin:7px auto;
	display:block;
	padding:15px 0;
}


/*========================================================
                     footer設定
=========================================================*/
.top_contact_block{ 
	background:#d5dff1;
}

.top_contact_logo img{
	display:block;
	margin:0 auto;
	width:80%;
	height:auto;
	padding-bottom: 15px;
}
@media (min-width:768px) {
	.top_contact_logo img{
		width:90%;
		margin:0;
	}
}
.top_contact_share p{ text-align:center; padding:0;}
@media (min-width:768px) {.top_contact_share p{ text-align:left;}}


/*.top_contact_text{ padding-top:0px;}
@media (min-width:768px) {.top_contact_text{ padding-top:20px;}}*/

.top_contact_text  p{text-align:center; }
@media (min-width:768px){.top_contact_text p{text-align:left;}}

.contact_box .top_contact_text i{padding:0 10px 0 0;}


	

footer{
	color:#fff;
	text-align:center;
	padding:15px 0 1px 0;
	background-color:#000;
}

@media (min-width:992px) {
	.top_contact_share {
		/*text-align: right;*/
	}
}

.address_map {
    padding: 20px 0;
	display:block;
	color:#FFF;
	text-align:center;
}
@media (min-width:768px) {
	.address_map {
		display:none;
	}
}


.address_map a {
    font-size: 15px;
    margin-right: 10px;
    padding: 7px 12px;
	text-decoration:none;
	background:#404040;
	color:#FFF;
}
.address_map a i {
    margin: 0 6px 0 0;
}
.address_map a:hover {
    background-color: #02a293;
    color: #fff;
}


.footer_share{ text-align:center;}
@media (min-width:768px){ .footer_share{ margin-top:15px; text-align:left;}}