@charset "utf-8";
/* CSS Document */

html,body{
	font-family:Arial, Helvetica, "微軟正黑體",sans-serif;
	font-size:15px;
	color: #FFF;}
a{text-decoration:none;
	color:#FFFFFF;}
a.mainbtn{
	display:block;
	width:50px;
	height:50px;
	z-index:999;
	background-image: url(../images/menu.png);
	top:45px;
	right:15px;
	position:fixed;
	cursor:pointer;}
.nav{
	display:none;
	width:20%;
	height:100%;
	background-color:#2b2a2a;
	position:fixed;
	z-index:1000;
	top:0;
	right:0 !important;
	opacity:0.9;}
ul.maintabs {
	padding:3rem 0 0 0;}
ul.maintabs > li{
	text-align:center;}
ul.maintabs > li >a{
	display:block;
	color:#FFFFFF;
	font-size:20px;
	line-height:80px;}
ul.maintabs > li:hover{
	background-color:#666666;}
#gotop{
	width:45px;
    height: 45px;
    border-radius: 30px;
    background-color:#900;
    text-align: center;
    line-height: 3rem;
    color: white;
    position: fixed;
    right: 30px;
    bottom:50px;
    z-index: 3000;
    font-size:1.066rem;
	cursor:pointer;}
#gotop:hover{
	background-color:#C60;}
.wraper{
	width:100%;
	height:auto;}
.topwraper{
	height:654px;
	background:url(../images/bg_01.jpg) center no-repeat;}
.toper{
	width:1000px;
	height:654px;
	margin:0 auto;
	position:relative;}
h1.maintitle{
	display: block;
    text-indent: -9999px;
    width: 518px;
    height: 284px;
    position: absolute;
    z-index: 10;
    background-image: url(../images/topic.png);
    left: 0;
    right: 0;
    top: -130px;
    bottom: 0;
    margin: auto;}
span.tbg{
	display: block;
    width: 592px;
    height: 325px;
    background-image: url(../images/tbg.png);
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    top: -175px;
    bottom: 0;
    margin: auto;}
span.boat{
	display: block;
    width: 545px;
    height: 311px;
    background-image: url(../images/boat.png);
    position: absolute;
    z-index: 12;
    top: 337px;
    right:-200px;}
span.boatlogo{
	display:block;
	width:278px;
	height:60px;
	background:url(../images/logo_border.png);
	position:absolute;
	right:0;
	bottom:15px;
	z-index:13;}	
a.dn{
	display: block;
    width: 65px;
    height: 65px;
    background-image: url(../images/dn.png);
    position: absolute;
    z-index: 15;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;}		
.contentwraper{
	width:100%;
	height:auto;
	padding:80px 0;
	background:url(../images/bg_02.jpg) center top no-repeat;
	background-attachment:fixed;
	background-size:cover;}		
.contentwraper2{
	background-image:url(../images/bg_03.jpg);
	background-attachment: scroll;}	
.contanier{
	width:966px;
	height:auto;
	padding:1rem;
	background-color:rgba(0,0,8,0.8);
	border:2px solid #d07649;
	margin:0 auto;
	border-radius:1rem;}	
.contanier > h4.title{
	display: block;
    width: 309px;
    height: 73px;
    background-image: url(../images/title1.png);
    text-indent: -9999px;
    position: relative;
    left: 0;
    right: 0;
    top: -42px;
    margin: auto;}	
.contanier > h4.title2{
	background-image:url(../images/title2.png);}
.vi{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
	align-items: flex-start;
    align-content: flex-start;}		
.view{
	width: 48%;
    padding: 2%;
	margin-top: -26px;
	margin-right:10px;}		
.view > h3{
	font-size:26px;
	line-height:120px;
	letter-spacing:1px;}	
.view > p{
	font-size:16px;
	text-align:justify;
	margin-bottom:10px;}	
.slideshow {
    height: 260px;
    display: block;
    width: 430px;
    background-position: center;}
#banner-fade{
	width: 430px;
	height: 264px;
	border:2px solid #FFF;
	margin:auto; }	
a.products{
	display: block;
    width: 30%;
    padding: 10px;
    border: 1px solid #FFF;
    text-align: center;
    margin: 15px 14px;
    transition: all 0.8s linear;}
a.products img{
	width:100%;
	margin-bottom:10px;}
a.products h6{
	display:block;
	font-size:18px;
	line-height: 2rem;}	
a.products:hover{
	background-color:rgba(255,255,255,0.3);
	border:1px solid #f98c39;}	
a.products:hover img{
	opacity:0.8;}		
.fwraper{
	background-color:#d2d2d2;
	padding:30px 0;}	
.contanier2{
	border:none;
	background-color: transparent;}	
.vi2{
	font-size:18px;
	font-weight:700;
	color:#313131;}	
.vi2 li{
	margin:0 10px;}
@media screen and ( max-width : 1023px ){
*{ box-sizing:border-box;}
.nav{}
ul.maintabs {}
ul.maintabs > li{}
ul.maintabs > li >a{}
ul.maintabs > li:hover{}
#gotop{
	display:none !important;}
#gotop:hover{}
.wraper{}
.topwraper{
	width:100%;
	height:0;
	padding-bottom:64.8148%;
	background: url(../images/head_sp.jpg) center no-repeat;
	background-size:100%;}
.toper{
	display:none !important;}
h1.maintitle{}
span.tbg{}
span.boat{}	
a.dn{}		
.contentwraper{
	padding:2.666rem 1rem;}		
.contentwraper2{}	
.contanier{
	width:100%;}	
.contanier > h4.title{}	
.contanier > h4.title2{}
.vi{
	 justify-content: flex-start;}		
.view{
	width:96%;
    padding: 2%;}		
.view > h3{
	text-align:center;
	line-height:80px;}	
.view > p{}	
.slideshow {}
#banner-fade{
	display:none !important;}	
a.products{
    width:46%;}
a.products img{}
a.products h6{}	
a.products:hover{}	
a.products:hover img{}		
.fwraper{
	background-color:#d2d2d2;
	padding:30px 0;}	
.contanier2{
	border:none;
	background-color: transparent;}	
.vi2{
	font-size:16px;
	font-weight:700;
	color:#313131;}	
.vi2 li{
	margin:0 10px;}
}	
@media screen and ( max-width : 799px ){

*{ box-sizing:border-box;}
.nav{
	width:45%;}
ul.maintabs {}
ul.maintabs > li{}
ul.maintabs > li >a{}
ul.maintabs > li:hover{}
#gotop{}
#gotop:hover{}
.wraper{}
.topwraper{}
.toper{}
h1.maintitle{}
span.tbg{}
span.boat{}	
a.dn{}		
.contentwraper{}		
.contentwraper2{}	
.contanier{}	
.contanier > h4.title{}	
.contanier > h4.title2{}
.vi{}		
.view{
	width:96%;
    padding: 2%;}		
.view > h3{
	font-size: 1.3rem;}	
.view > p{}	
.slideshow {}
#banner-fade{}	
a.products{
    width: 100%;}
a.products img{}
a.products h6{
	font-size: 1.1rem;}	
a.products:hover{}	
a.products:hover img{}		
.fwraper{
	background-color:#d2d2d2;
	padding:1rem 0;}	
.contanier2{
	border:none;
	background-color: transparent;}	
.vi2{}	
.vi2 li{}
}