﻿/*20200130增*/
/*20200130改色*/
/*20200220拿掉*/
@charset "UTF-8";

* {

  box-sizing: border-box;

  list-style: none;

  /*20200220拿掉*//*word-break: break-all;*//*20200220拿掉*/

  /*文字強迫換行*/

  font-family: Microsoft JhengHei, Arial, sans-serif;

  line-height:1.75;

  padding:0;margin:0;

}



html, body {

  min-width: 320px;

  min-height: 100%;

  transition: all .2s ease-out;

  margin: 0;

  padding: 0;

  -webkit-text-size-adjust: none;

  /*旋轉文字不要放大*/

}

h1 {text-align:center;

    font-size: 2rem;

	color:rgb(36, 47, 93);
	
	font-weight: bold;

	margin-top:2rem;}



  

h2 {

	font-family: "微軟正黑體",Arial, Helvetica, sans-serif;

  font-size: 1.2rem;

	color:#0A5810;

	text-align: center;}  


a[href^=tel] {
  text-decoration:inherit;
  color: inherit;
}

.title_fsize{
  font-size:40px;
}



/* =====整體外觀設定================*/



p {

  text-align: justify;

}



.Information {

  background-color: #F7F5F1;

}



.Information .language {

  display: block;

  padding-right: 5px;

  padding-bottom: 15px;

}



.Information .language a {

  font-size: 15px;

  padding-left: 10px;

  color: #585858;

  text-decoration: none;

  font-weight: bold;

}



.Information .language a:hover {

  color: #337AB7;

}



.Information .language a + a:before {

  content: '│';

  color: #717171;

  padding-right: 10px;

}



.Information .list-inline {

  font-size: 15px;

  padding-top: 30px;

}



.Information .list-inline li .fa {

  position: relative;

  font-size: 18px;

  padding-right: 8px;

}



.Information .list-inline li .glyphicon {

  position: relative;

  font-size: 16px;

  padding-right: 8px;

}

.logo-img {
	
    width: 80px;

    max-width: 80%;

    max-height: 100%;

    vertical-align: middle;
	
    position: absolute;
	 
    top: 50%;
	
    left: 50%;
	
    transform: translate(-50%, -50%);


}
.login_a{
		width:80%;
		margin-bottom:2rem;
		margin:auto;
}
		
.login_a p{
	text-align:center;}
	
.login{
	background-color: white;
	padding: 10px 20px 40px 20px;
	box-shadow: 0 1px 10px 0 rgb(0, 0, 0, 0.1),0 1px 4px 0 rgb(0, 0, 0, 0.06);
	width:80%;
	margin:auto;
}
.login p{
	text-align:left;}	
.login_ba{
	background:url(../img/membercoupon-u7f16u7ec4.png);
	background-repeat: no-repeat;
	margin-top:2%;
	margin-bottom: 10%;}
/*.fa-user-circle.fas {
		color:#31078f;
		opacity:.9}*/
	
.fas {
    font-size:6rem!important;
	color:#000000;
	opacity:.3;
	text-align:center;
	}

    /*20200130增*/.bluebutton:focus, .bluebutton.focus{
      box-shadow:0 0 0 0.2rem rgba(36, 47, 93, 0.5) !important;
    }/*20200130增*/
		.orangebutton:focus, .orangebutton.focus{
			box-shadow:0 0 0 0.2rem rgba(236, 186, 97, 0.5) !important;
		}
    
		.commonproblem ul li p{
			font-size: 16px;
		}

	
.btn_aut{
	width:40%;
}
	
/*===手機選單設定================================*/

.navbar {

  z-index: 10;

  /*position: relative;*/

}



.nav-item {

	padding:0 1.2rem;
	height:5rem;
	text-align:center;
}





.nav-item a:hover{

	color: #000000;
	font-weight:200;

	}

/**.navbar-toggler{

	background-color: #000000;	

	}**/

.bg-light {

    background-color: rgba(11,49,143,0.6)!important;

	}

	



.navbar-light .navbar-nav .nav-link {

  color: #fff!important;
	margin-top:1rem;
	letter-spacing:3px;
	font-family:"微軟正黑體 Light";
	font-weight:bold;

	align-items:center;
	text-align:center;
	font-size:1rem;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}
.navbar-light .navbar-nav .nav-link a:{
	color:#fff;
	}
	
.nav-link:hover	{
	color: #fff;
    border-bottom: 3px solid #e6b46b;
    padding-bottom: -2px!important;
    left: 30%;
    right: 30%;}



.navbar .navbar-brand:hover {

  background-color: #90e2db;

}



.navbar .navbar-brand:focus {

  background-color: #90e2db;

}



.navbar-default {

  background-color: #90e2db;

  

}



.navbar-header {

  box-shadow: 0 0 2px 1.5px #AAA;

  background-color: #90e2db;

  

}



.navbar-default .navbar-brand {

  color: #fff;

  

}


.nav-item.show{

	position:relative;

	/*float:left;*/

	}

.dropdown-menu{
	
	position:absolute;

	background-color: rgba(11,49,143,0.6);}
	
.dropdown-item {
	color:#FFFFFF!important;
	display:inline;}
	

.dropdown-item:focus, .dropdown-item:hover {
	background-color: transparent;}
	
.cel_call {
	color:#fff!important;}
.cel_call a {
	color:#fff!important;
	text-decoration:none;}
	
/*==header======================================*/

.header {

  overflow: hidden;

}



.header img {

  width: 100%;

}



.wrapper_about {

  background:url(../img/index-banner1.png)repeat top center/cover;

  margin-top:-10rem;

      min-height: 650px;

}
.wrapper_menu {

  background:url(../img/menu.jpg)repeat top center/cover;

  margin-top:-10rem;

      min-height: 650px;

}


.wrapper_member {

  background:url(../img/member.jpg)repeat center/cover;
	
  margin-top:-10rem;

      min-height: 650px;

}

.wrapper_footer_item {
  background: url(../img/opinion.jpg)repeat center/cover;

  margin-top:-10rem;

      min-height: 650px;
}


/*==menu======================================*/
 .nav-link2 {
color: #000000;
    padding: 0.5rem 1rem;
	margin-top:1rem;
	letter-spacing:3px;
	font-family:"微軟正黑體 Light";
	font-weight:bold;
    border-radius: 5px;
	align-items:center;
	text-align:center;
	font-size:1rem;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box;

}
.nav-link2 a:{
	color: #000;
	text-decoration:none;
	}
	
.nav-link2:hover	{
	color: #000;
    border-bottom: 3px solid #e6b46b;
    padding-bottom: -2px!important;
    left: 30%;
    right: 30%;
text-decoration:none;
}

.nav-item2 {
    color: #000000;
	padding:0.5rem 1rem;
	height:2rem;
	text-align:center;
	text-decoration:none;
}





.nav-item2 a:hover{

	color: #000000;
	font-weight:bold;

	}



.nav-item.show{

	position:relative;

	float:left;

	}
.nav-pills .nav-link2.active, .nav-pills .show > .nav-link2 {
    color: #fff;
    /*20200130改色*/background-color: #242f5d;/*20200130改色*/
	text-decoration:none;
}
.tab-content>.active {
    display: flex;
    justify-content: center;
}

/*===折疊選單======================================*/

.card{

	margin:5px; 

}

.card-header{

	background-color:#fee0ea;

}

button.btn.btn-link{

	color:#d03065;

	text-decoration:none;

	flex-wrap:wrap;

}



.card-header .btn{

	white-space:normal!important;

	text-align:left;

}






/*====banner=========================================*/

.banner {

  width: 100%;

  background-color: #F7F5F1;

  padding-top: 15px;

  overflow: hidden;

}



.banner img {

  width: 100%;

  height: auto;

}




/*==footer================================================*/



.footer{

	background-color:#f7f7f7;

	letter-spacing:.1rem;

	line-height:2rem;

	color:rgba(119, 119, 119, 1.0);

	}
	
.footer img{
	width:80%;}

.footer a {

	color:#000;
    font-weight:bold;
	text-decoration:none;

}

.footer li {
	margin: 0 4rem 4rem 0;
    display:inline;
	color:#000;
    font-weight:bold;
	text-decoration:none;

}
	



.footer .fa {

  padding-right: 5px;

}



.link a {

  color: #4a4a4a;

}



.link a:hover {

  color: #000;

}




.logologofunfood{
	float: left;
	top: 18.8889vw;
    height: 4rem;
    width: 8rem;
}

.facebooklogobutton {
    float: left;
    height: 2.5rem;
    width: 2.5rem;
    display: flex;

    transform: rotate(0deg);
}






/*===content================================*/

.content {

  height: auto;

  /*---背景高度自動延伸-------*/

  background-color: #F7F5F1;

}



.content .item2 {

  padding: 15px;

  width: 100%;

  background-color: #fff;

}



.content .item2 {

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeaea+0,ffffff+21,ffffff+21,ffffff+82,eaeaea+99 */

  background: #eaeaea;

  /* Old browsers */

  background: -moz-linear-gradient(top, #eaeaea 0%, white 21%, white 21%, white 82%, #eaeaea 99%);

  /* FF3.6-15 */

  background: -webkit-linear-gradient(top, #eaeaea 0%, white 21%, white 21%, white 82%, #eaeaea 99%);

  /* Chrome10-25,Safari5.1-6 */

  background: linear-gradient(to bottom, #eaeaea 0%, white 21%, white 21%, white 82%, #eaeaea 99%);

  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#eaeaea',GradientType=0 );

  /* IE6-9 */

  border-radius: 15px;

  box-shadow: 0 0 8px 0.5px #ddd;

}



.content .banner .item {

  width: 100%;

  overflow: hidden;

  margin-top: 10px;

  margin-bottom: 10px;

  border: 1px solid #ccc;

}



.contentbox {

  height: auto;

  /*---背景高度自動延伸-------*/

  background-color: #F7F5F1;

}



.contentbox iframe {

  width: 100%;

  height: 430px;

}



.item3{

	background:url(../img/JQ176.jpg);

	background-position:center;

	background-attachment:fixed;}



/*===項目清單設定=============================*/

.content .text, .hot {

  padding: 0;

  margin: 0;

}



.content p, .content2 p {

  font-size: 16px;

  line-height: 2em;

}



.content .text .fa, .content .hot .fa {

  padding-right: 10px;

}



.content .text li a {

  font-size: 16px;

  color: #2A6FAD;

  line-height: 30px;

}



.content .item2 .text:before {

  content: '';

  display: block;

  width: 97%;

  height: 1px;

  margin-bottom: 10px;

  background-color: #0C268A;

}



.content .news {

  padding-right: 5px;

}



.content .news .hot li:before {

  content: "\f04b";

  font-size: 10px;

  color: #672B09;

  font-family: FontAwesome;

  position: relative;

  padding-right: 5px;

  vertical-align: middle;

}



.content .news .hot li a {

  font-size: 15px;

  color: #672B09;

  line-height: 35px;

}



.content .item2 .news h2:after {

  content: '';

  display: block;

  height: 1px;

  margin-top: 10px;

  background-color: #440707;

}



.content .news h2 {

  color: red;

  margin-top: 0;

  font-weight: bold;

  font-size: 18px;

}







/*--gotop按鈕css語法---*/

#gotop {

  width: 50px;

  height: 50px;

  text-align: center;

  line-height: 45px;

  border-radius: 50%;

  position: fixed;

  right: 20px;

  bottom: 30px;

  font-size: 15px;

  box-shadow: 0 0 5px #393e42;

  border: 2px solid #fff;

  /*20200130改色*/background-color: #000;/*20200130改色*//*原150c0c*/

  color: #FFF;

  cursor: pointer;

  z-index: 9999;

}



.info-bg{
  background-color: rgba(11,49,143,0.6) !important;
  padding: 15px;
}

	

/*====小型平版電腦區==================*/







@media only screen and (min-width: 568px) {

  .servicebg {

    padding-bottom: 30px;

  }




.noshow {display:none;}

.cell{

	display:none;

}

    
.left-about{
	
      margin-left:300px;
}


}

/* == 平板版型區 =============================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .servicebg {

    padding-bottom: 30px;

  }

  



}

/* --手機版型區------------------------------------- */

@media only screen and (max-width: 780px) {

.wrapper_about {

	min-height:450px;}

.logo-img{
	left:30%;}
	
.login {
    width: 100%;
	}
	
.login_a {
    width: 100%;
	}

 .navbar{

	 justify-content:center;

	  text-align:center;
	  
	  }

  body.toggled {

    position: fixed;

  }

li.nav-item {
	height: 4rem;/*20200220拿掉*//*height:4rem!important;*//*20200220拿掉*/
	font-size:2rem;
}

.bg-light {
	background-color: rgba(35, 46, 92,1)!important;
}

.logo-img{
	top:1.8rem;
	left:3rem;
	width:40px;
	height:40px;
}

.left-about{
margin-left:0px;
}

.footer li {
	display:list-item;
	text-align:center;
	margin: 1rem;
	
}

.btn_aut{
	width:40%;
	margin-top: .5rem;
}
	
.fas {
    font-size:12rem!important;
	text-align:center;
	margin-bottom:2rem;
	justify-content:center;


	}	

}
