/*-----BANNER-------*/
 
        .caption
        {
            color: #fff;
            font-size: 16px;
            line-height:1.5em;
            text-align: left;
          /*  border-radius: 4px;*/
			position:absolute; 
			left:0px; bottom: 0; 
			width:100%; 
			height:auto;
			background: #e8613b;
            background-color: rgba(0, 0, 0, 0.4);
			padding:10px;
			
			
        }
  
        .caption h3{font-size: 22px; width:100%; margin-bottom:5px;}
		.caption h4{font-size: 16px; width:100%;}
  
        a.caption, A.caption:active, A.caption:visited
        {
        	color: #fff;
        	text-decoration: none;
        }
      
/*---------*/
.index-text{ margin:37px auto 53px; text-align:center;}
.title1{ margin-bottom:15px; font-size:35px; color:#252c34;}
.title2{ font-size:28px; color:#b58f42;}

.index-main-area{ display:flex;}
/*-----左側選單-----*/
.i-left-nav{/* width:21.6%;*/width:223px; float:left; font-size:18px;}

.i-left-nav ul{ list-style:none;}
.i-left-nav ul li a{ width:100%; display:block;
color:#252c34; border-bottom:1px solid #dcdcdc; 
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;}
.i-left-nav ul li a span{ padding:9px 5px 9px 24px; display:block;
-moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
.i-left-nav ul li a:after{
	 content:""; display:block;width:0px; 
	 height:1px; background:#dcdcdc;
	  -moz-transition: all 0.5s ease;
	  -o-transition: all 0.5s ease;
	  -webkit-transition: all 0.5s ease;
	  transition: all 0.5s ease;
	 }
.i-left-nav ul li a:hover{border-bottom: none;}	 
.i-left-nav ul li a:hover span{  padding-left:35px;}
.i-left-nav ul li a:hover:after{ width:100%; height:1px; background:#b99114;
}

/*---SUB MENU----*/
.i-left-sub li{ list-style:none; padding-left:22px;}
.i-left-sub li{display:block; width:100%;}
.i-left-sub li a{ background:url(../images/dot02.png) no-repeat left center; 
background-size:14px; padding: 0; font-size:18px; color:#252c34;
display:block;width:100%; border:none !important;}
.i-left-sub li a span{
	 -moz-transition: all 0s ease !important;
	  -o-transition: all 0s ease !important;
	  -webkit-transition: all 0s ease !important;
	  transition: all 0s ease !important;}
.i-left-sub li a:hover span{  padding-left: 24px !important;}
.i-left-sub li a:hover{color:#fe661f; }
.i-left-sub li a:after{ display:none !important;} 
/*----------------*/
.i-right-area{width:78.4%; float:left; flex:1; padding-left:32px; }

.i-top{ width:100%; display:flex; margin-bottom:5px; min-height:442px;}
.i-news{float:left; width:33%; flex:1; padding:20px 32px 24px; text-align:center; background-color:#666; background:url(../images/i-news-bg.jpg) no-repeat; background-size:cover;}
  .i-news h4{ font-size:20px; color:#fff; margin-bottom:5px; }
  .i-news h4 i{ display:block; text-align:center;}
  .i-news h4 i img{ width:100%; height:auto; max-width:16px;}
  .i-news ul{ list-style:none; border-top:1px dotted #959595; width:100%; font-size:14px;
  text-align:left;}
  .i-news li{border-bottom:1px dotted #959595;width:100%; line-height:1.5em;
  padding:13px 4px;}
  .i-news li a{ color:#fff;}
  .i-news li a:hover{ color:#d1c0a5; }
  .i-news li a time{ color:#d1c0a5; margin-bottom:7px; display:block;}
  .i-news-title{ height:44px; overflow:hidden;}
  .i-news-more{ padding:6px 28px; border:1px solid #e4ba66; border-radius:10px;
  -o-border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px; font-size:14px;
  display:inline-block; color:#fff; margin-top:15px;}
  
  
  .i-news-more:hover{
-moz-box-shadow: 0px 0px 3px #a17b04;
-webkit-box-shadow: 0px 0px 3px #a17b04;
box-shadow: 0px 0px 3px #a17b04;
  }
  
  
  
.i-product{float:left; width:67%; 
background: #fff;
-moz-box-shadow:inset 3px 6px 65px #e3e6e8;
-webkit-box-shadow:inset 3px 6px 65px #e3e6e8;
box-shadow:inset 3px 6px 65px #e3e6e8;
border:1px solid #dcdcdc;
}

.item{ padding:0 30px;}
.item h2{ color:#a78827; font-size:25px; padding:10px 11px; margin-bottom:15px;
border-bottom:1px solid #e4ba66;}

.item .box{color:#25313f; font-size:16px; line-height:1.7em; height:165px; overflow:hidden;
padding:0 11px;}
.item .more{ display:block; text-align:right; color:#a17b04; padding-right:20px;
margin-top:5px;}

.i-product h3{ color:#fff; background:url(../images/dot-product.png) no-repeat center;
background-size:192px; height:96px; color:#fff; font-size:25px; text-align:center;
padding-top:17px;text-shadow:-1px 2px 7px #b79d69;}

.i-bottom{ width:100%; clear:both;float:left;}

.i-about, .i-link{ width:50%; float:left; position:relative; height:227px;
display:block;}
.i-about{ border-right:1px solid #fff;}
.i-about{ background:url(../images/i-about-bg.jpg) no-repeat center; background-size:cover;-moz-transition: all 0s ease;
	  -o-transition: all 0s ease;
	  -webkit-transition: all 0s ease ;
	  transition: all 0s ease;}

.i-link{ background:url(../images/i-link-bg.jpg) no-repeat center; background-size:cover;}


.i-about h4, .i-link h4{ padding:14px; background-color:rgba(0,0,0,0.6); color:#fff;
font-size:20px; text-align:center; position:absolute; bottom:0; width:100%; }
.i-about h4{ 
background-image: url(../images/dot04.png);
background-repeat:no-repeat;
background-position:left center;
}

.i-link h4{ 
background-image: url(../images/dot05.png);
background-repeat:no-repeat;
background-position:right center;
}


.i-about-text{ position:absolute; z-index:10;background-color:rgba(0,0,0,0.6);height:100%; width:100%; display:none; text-align:center; vertical-align:middle; color:#fff; padding:10%; line-height:1.6em;
}
.i-about:hover .i-about-text{ display:block;}

 
 .bottom-text{ clear:both;margin:64px 0 48px;text-align:center; width:100%; padding:0 10px;}
 .bottom-text h5{ color:#b58f42;  font-size:28px; margin-bottom:40px;}
 .bottom-text p{ color:#0a0d08; font-size:18px; line-height:1.5em;}
 
 
 
@media only screen and (max-width: 1000px){  
 .caption
        {
            
            font-size: 16px;
		}
		.caption h3{font-size: inherit;}
        .caption h4{font-size: inherit;}
.index-text{margin:5% 0;}
.i-left-nav{ display:none;}
.i-right-area{ width:100%; padding-left:0;}

.bottom-text{ margin:5% 0;}
} 
 
 @media only screen and (max-width:780px){  
  .title1{ font-size:20px;}
  .title2{ font-size:18px;}
 .bottom-text h5{ font-size:20px; margin-bottom:10px;}
 .i-news{ width:45%;}
 .i-product{ width:55%;}
 }
 
 
  @media only screen and (max-width:650px){  
  
		
   .i-top, .i-bottom{ display:block; padding:0 2%;}
   .i-news{ width:100%; margin-bottom:10px;}
   .i-product{ width:100%; margin-bottom:10px; padding-bottom:20px;}
   .i-about, .i-link{width:100%; border:none; margin-bottom:10px; }
  }
 
 
  @media only screen and (max-width:1000px){  
   .caption{font-size: 20px ;}
  }
  @media only screen and (max-width:780px){  
   .caption{font-size: 26px ;}
  }
  @media only screen and (max-width:650px){  
   .caption{font-size: 35px;  }
  }
 @media only screen and (max-width:480px){  
   .caption{font-size: 40px; }
  }