@charset "utf-8";
/* CSS Document */
.anchor {
	margin: 0;
	padding: 0;
	margin-top: -60px;
	*margin-top: -60px;
	display: block;
	visibility: hidden;
	float: left;
}
img{
border: 0;
}

body{
padding: 0;
margin: 0;
background: #FFAE05;
}
#container02{background:url(img/bg.jpg) center top no-repeat;}
#container02 h1,h2,h3{
display: none;
}
#container1{
max-width: 960px;
margin: 0 auto;
height: auto;
font-family: arial,微軟正黑體;
overflow: hidden;
}
#header{
padding: 0;
margin: 0;
max-height: 576px;
position: relative;
}
#header .bank{
max-width: 200px;
position: absolute;
z-index: 1000;
right: 0;
top: 40px;
}
#nav{
width: 100%;
height: 50px;
}
#nav li{
display: block;
width: 50%;
float: left;
text-align: center;
height: 50px;
line-height: 50px;
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
}
#nav li a{
text-decoration: none;
color: #FFFFFF;
font-weight:normal;
}
#nav li.a1{
background: #923DCE;
border-radius:25px 0 0 0 ;}
#nav li.a1 a{
color: #D190FF;}
#nav li.a2{background:#2EBD93;border-radius: 0 25px 0 0 ; }
#nav li.a2 a{
display: block;
color: #6FEBC6;}
#nav li.a3{background:#3B9A4E;border-radius: 0 25px 0 0 ; 
background: #F35D5F;}
#nav li.a3 a{
color: #FFB5B6;}
#nav li.a1:hover{background:#73399C;}
#nav li.a2 a:hover{
background: #47DBAF;
color: #B3FBE6;
}
#nav li.a3:hover{
background: #FF9E9F;
background: #FC7779;
color: #FBD6D7;}
#nav2{
width: 100%;
height: 40px;
line-height: 40px;
border-radius:0 0 25px 25px ;
}
#nav2.a1{
background: #7C2EB3;
}
#nav2.a2{
background: #26AD86;
}
#nav2.a3{
background: #FF7476;
}
#nav2 li{
float: left;
font-size: 15px;
list-style-type: none;
margin-left: 5%;
}
#nav2 li a{
text-decoration: none;
color: #FFFFFF;
}
#nav2 li a:hover{
border-bottom:solid 1px #FFFFFF;
}
#main{
width: 100%;
}
#main .title{
display: block;
max-width: 633px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
clear: both;
}
.box{
display: block;
padding: 0px;
padding-top: 0;
width: 31%;
height: auto;
float: left;
margin-right: 20px;
background: #FAF8F5;
border-radius: 0 0 15px 15px;
position: relative;
margin-bottom: 30px;
}
.box a{
text-decoration: none;
color: #000000;
}
.box .sale{
display: block;
width: 100px;
height: 60px;
font-size: 14px;
background: #000000;
background: #FF509C;
border-radius: 0 0 100px 100px;
text-align: center;
line-height: 50px;
position: absolute;
left: 20px;
top: -10px;
color: #D0FF00;
}
.box .sale#t1{
background: #803EC0;
}
.box .sale#t2{
background: #3EAF8E;

}
.box .name{
display: block;
line-height: 30px;
text-align: center;
font-weight: bold;
border-bottom: solid 1px #1B1B1B;
padding-bottom: 5px;
margin-bottom: 5px;
}
.box .note{
display: block;
min-height: 80px;
padding-left: 10px;
font-size: 14px;
line-height: 22px;
}
.box .note strong{
background: #AFAFAF;
font-weight: normal;
color: #FFFFFF;
margin-right: 5px;
padding: 1px;
}
.box .price{
display: block;
text-align: center;
color: #FF0067;
}
.box .price strong{
font-size: 26px;
margin-left: 5px;
}
.more{
display: block;
max-width: 395px;
margin: 0 auto;
}
.remarks{max-width: 800px;margin: 0 auto;padding: 10px; font-family:"微軟正黑體";font-size: 15px;line-height: 1.5em; color: #000;text-align: center;border-top: #000 1px solid;border-bottom: #000 1px solid;clear: both;overflow: hidden;}

/*------media query----------*/


@media screen and (min-width:960px){
	.pushy{display:none;}
	#phone-title{display:none;}
	 #togglenav { display:none;}
	 .menu-btn{display:none;}
}


/*---平板-----*/
@media only screen and (min-width: 768px) and (max-width:960px) {
	.pushy{display:none;}
	#phone-title{display:none;}
	 #togglenav { display:none;}
	 .menu-btn{display:none;}
.box{
width: 47%;}
	
}

/*---平板-----*/
@media only screen and (min-width: 481px) and (max-width:768px) {
.box{
width: 90%;
float: none;
margin-right: 0px;
margin: 0 auto;
margin-bottom: 30px;}
#nav li{font-size: 16px;}
#nav2{display: none;}
#header .bank{
max-width: 150px;
top: 0px;
}	
}	

/*---手機版-----*/
@media only screen and  (min-width: 321px) and (max-width:480px) {
.box{
width: 90%;
float: none;
margin-right: 0px;
margin: 0 auto;
margin-bottom: 30px;}
#nav li{font-size: 16px;}
#nav2{display: none;}
#header .bank{
max-width: 150px;
top: 0px;
}	
}	

/*---手機版-----*/
@media only screen and (max-width:321px) {
.box{
width: 90%;
float: none;
margin-right: 0px;
margin: 0 auto;
margin-bottom: 30px;}
#nav li{font-size: 16px;}
#nav2{display: none;}
#header .bank{
max-width: 150px;
top: 0px;
}