@charset "utf-8";
/* CSS Document */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;

	}
a,img {
	outline: none;/* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */	
	}
img, div {border:0px;}
a{
	cursor: grab;	
}
a:link {
	color: #157bda;
	text-decoration:none;

}
a:visited {
	text-decoration:none;
	color: #157bda;
}
a:hover {
	text-decoration: none;
	color: #ff5500;

}
a:active {
	text-decoration: none;
	color: #ff5500;
}
html {font-size:75%;}


/*------------------------- row end --------------------------------------*/


#logo {
    position: absolute;
    width: 234px;
    display: block;
    cursor: pointer;
    top: 30px;
    left: 0px;
    z-index: 5;
}

#logo img {
    width: 100%;
}

@media only screen and (max-width: 1700px){
#logo {
    left: 50px;
}
}

@media only screen and (max-width: 1000px){
#logo {
    left: 20px;
}
}

@media only screen and (max-width: 800px){
#logo {
    width: 35%;
    top: 4%;
    left: 9%;
}
}





.bt_wrap{
	position: relative;
	margin:0 auto;
	width:555px;
	overflow:hidden;
	}

.bt1{
	display: block;
	width: 462px;
	height: 62px;
	position: relative;
	background-image: url(../images/bt1.png);
	float: left;
	cursor: pointer;
	margin: 0 auto;
	background-position: 0px 0px;
}

.bt2{
	display: block;
	width: 462px;
	height: 62px;
	position: relative;
	background-image: url(../images/bt2.png);
	float: left;
	cursor: pointer;
	margin: 0 auto;
	background-position: 0px 0px;
}

.bt3{
	display: block;
	width: 462px;
	height: 62px;
	position: relative;
	background-image: url(../images/bt3.png);
	float: left;
	cursor: pointer;
	margin: 0 auto;
	background-position: 0px 0px;
}

.bt4{
	display: block;
	width: 462px;
	height: 62px;
	position: relative;
	background-image: url(../images/bt4.png);
	float: left;
	cursor: pointer;
	margin: 0 auto;
	background-position: 0px 0px;
}

.bt5{
	display: block;
	width: 462px;
	height: 62px;
	position: relative;
	background-image: url(../images/bt5.png);
	float: left;
	cursor: pointer;
	margin: 0 auto;
	background-position: 0px 0px;
}

.bt6{
	display: block;
	width: 462px;
	height: 62px;
	position: relative;
	background-image: url(../images/bt6.png);
	float: left;
	cursor: pointer;
	margin: 0 auto;
	background-position: 0px 0px;
}
.bt1,.bt2,.bt3,.bt4,.bt5,.bt6{
	margin-top:30px;
	margin-left:40px;
}
.bt1:hover,.bt2:hover,.bt3:hover,.bt4:hover,.bt5:hover,.bt6:hover{
	background-position: 0px 61px;
}

.tto {
	position: absolute;
	width: 610px;
	height: 40px;
	z-index: 5;
	top:150px;
	background-image: url(../images/tto.png);
	-webkit-animation: play 3s steps(2) infinite;
	-moz-animation: play 3s steps(2) infinite;
	-ms-animation: play 3s steps(2) infinite;
	-o-animation: play 3s steps(2) infinite;
	animation: play 3s steps(2) infinite;
}
	
@keyframes play {
   		from { background-position:0px; }
     	to { background-position: -1229px; }
}




.img-responsive{
  margin:0 auto;	
}



#gotop {
    display: none;
    z-index: 10;
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
}

#sbt_list{
	width:650px;
	height:63px;
	overflow:hidden;
	display:block;
	position:absolute;
	right: 20px;
    top: 60px;
	z-index:55;
}

#sbt_list a:hover{
	filter: brightness(1.5);
}






.ora_{
	color:#ff6c00;
}






/*--------------------------------------------

---------------------------------------------*/

.cover {
    display: none;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.92);
}

.content{
	width: 1100px;
	height: 1100px;
	max-width: 100%;
	overflow: hidden;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
    position: relative;
}




.con_left{
    width:500px;
	height:auto;
	float:left;	
	margin-top:250px;
	text-align:center;
}

.con_right{
    width:500px;
	height:auto;	
	float:right;
	margin-top:350px;
	margin-right:15px;
}

.corimar{
    margin-top:50px;
}

.con3cho{
	width: 500px;
	margin-top: 170px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;

}

.co3tabe{
   position:absolute;
   margin-top:220px;	
   width:500px;
   color:#fff;
   font-weight:300;
   line-height:1.1;
}

.co3tabe2{
   position:absolute;
   margin-top:470px;	
   width:500px;
   color:#fff;
   font-weight:300;
   line-height:1.1;
}

.ac3t {
	position:relative;
    max-width: 71px;
    width: 10%;
	text-align:center;
}

.hide768{
	display:none;
}

.show768{
    display:block;
}
	
/*------------------------------------------
圖片切換
--------------------------------------------*/

.coverflow{
width: 618px;
height: 460px;
position:relative;
margin-left:520px;
}
.coverflow>a{
display: block;
position: absolute;
top:0;
left:0;
opacity: 0;
    filter: alpha(opacity=0);
    /*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
    -webkit-animation: silder 20s linear infinite;
    animation: silder 20s linear infinite;
}
.coverflow>a>img{
max-width: 100%;
}

/*動畫關鍵影格*/
@-webkit-keyframes silder {
    3% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    27% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}
@keyframes silder {
    3% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    27% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
}

/*每個圖片各延遲5秒*/
.coverflow>a:nth-child(4) {
-webkit-animation-delay: 15s;
        animation-delay: 15s;            
}

.coverflow>a:nth-child(3) {
-webkit-animation-delay: 10s;
        animation-delay: 10s;            
}

.coverflow>a:nth-child(2) {
-webkit-animation-delay: 5s;
        animation-delay: 5s;
}

.coverflow>a:nth-child(1) {
-webkit-animation-delay: 0s;
        animation-delay: 0s;    
}
/*滑入時停止播放*/
.coverflow:hover>a{
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}


/

.slogan1{
    display: block;
    max-width: 100%;
    height: auto;
	margin:0 auto;
}


.mubt {
    position: relative;
    max-width:323px;
    width: 100%;
    z-index: 6;
   margin:0 auto;
}



.mu_btn{
    display: block;
    max-width:323px;
    position: absolute;
    z-index: 10;
    width: 100%;
    z-index: 10;
    height: 100%;
    margin: auto;
}

.mu_btn>ul {
    margin-top:-10%;
    height: 100%;
}

.mu_btn ul  li {
    display: block;
    cursor: pointer;
    list-style: none;
    float: left;
    height: 100%;
}

.mu_btn ul  li a{
	display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}

.mbt1{
	height:100%;
	width:33%;
	}

.mbt2{
	height:100%;
	width:33%;
	}
	
.mbt3{
	height:100%;
	width:33%;
	}	
	
.actwd_1{
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 17%;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.actwd_2{
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 4%;
	margin-right: auto;
	margin-bottom: 5%;
	margin-left: auto;
}

@media only screen and (max-width: 768px){
.actwd_1{
	margin-top: 10%;
	margin-bottom: 0%;

}	
.actwd_2{
	margin-top: 10%;
	margin-bottom: 5%;

}	
}




.ac3con{
	margin-top:200px;
	}

.ac3con2{
	margin-top:210px;
	}
		
.ac3bt{
	margin-top:0px;
	}	

.ac3bt>p{
   color:#97183f;
   float:right;	
   margin-right:10%;
   font-weight:800;
}

.ac3bt1{
   filter: brightness(0.5);
	}
	
.light:hover{
   filter: brightness(1.3);
}



.sbt1ri{
	position:absolute;
	margin-top:-165px;
	margin-left:70px;
	float:right;
}

.sbt1ri:hover{
   filter: brightness(1.75);
}





/*--按鈕列---*/
#nalist{
  width:15%;
  height:100%;
  background-color:#042955;	
  top:0;
  right:-25%;
  position:fixed;
  white-space:normal !important;
  z-index: 99999999;
  overflow: hidden;
  -webkit-transition: right 0.5s ease;
  transition: right 0.5s ease;
  padding-top:15%;
}


#nalist.active{
  right:0;
}

.nabtn{
	display: block;
	font-size: 26px;
	color: #f9f035 !important;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #0d59b2;
	text-align: center;
	text-indent: 0% !important;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	font-weight:600;
}

.muclose{
	display: block;
	position:absolute;
	width: 67px;
	height: 91px;
	top: 5%;
	right: 10%;
	background-image: url(../images/mu_close.png);
	cursor:pointer;
}



/*------------- 光箱樣式 ----------------*/