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


html {
	min-height: 100%;
	background: url(../images/bg.jpg) top center repeat-x;
	font-family: "", sans-serif;
	overflow-x:hidden;
	background-attachment:fixed;
	/*background-origin:border-box; 固定時不用，不過通常都是對齊*/

}

body {
	height: 100%!important;
    margin: 0;
	padding: 0;
}

a {
	color: black;
	text-decoration: none;
}

a.disabled, area.disabled {
	cursor: default;
}


header img{
    width:100%;
    display: block;
}

article img{
    width:100%;
    display: block;
}

footer img{
    width:100%;
    display: block;
}



header  {
	width:100%;
    background: hsla(168,100%,50%,0.3);
    /*background:#00ffcc; 先不要*/
    /*opacity: .5; - 整體透明*/

}

.header_pc {
	width:100%;
	max-width:1000px;
	position:relative;
	margin:0 auto;
	display:block;
}

.header_m {
	display:none;
}

article {
	width:100%;
    background: hsla(168.1, 31.8%, 50%, 0.3);
	background: url(images/content.jpg) top center repeat-x;

}

.content  {
	clear:both;
	width:100%;
	max-width:1000px;
	position:relative;
	margin:0 auto;
	
}

section {
	width:100%;
	max-width:1000px;
	margin:0 auto;

}




footer {
	clear:both;
	width:100%;
	background: hsl(0, 100%, 95.3%);

}
	 
.footer_pc  {
	width:100%;
	max-width:1000px;
	margin:0 auto;

}

div{transition: all 0.4s ease;}


@media (max-width: 750px) {

}


@media (min-width: 1017px) {




.main01{
	float: left;
	position:relative;
	width:100%;
	max-width:500px;
	}

.main01 div{
	max-width:460px;
	padding-bottom:15px;
	}

.imgbox {magin:0 auto;max-width:480px;padding: 25px;}

.main02{
	width:100%;
	max-width:500px;
	float:left;
	vertical-align:top;
	}

.main02 div{
	padding:25px;
}


}


@media screen and (min-width: 601px) and (max-width: 1016px){

.content  {
	max-width:800px;
}


.main01{
	float: left;
	position:relative;
	width:100%;
	max-width:400px;
	}

.main01 div{
	max-width:460px;
	padding-bottom:15px;
	}

.imgbox {magin:0 auto;max-width:400px;padding: 25px;}

.main02{
	width:100%;
	max-width:400px;
	float:left;
	vertical-align:top;
	}

.main02 div{
	padding:25px;
}
	
}

@media (max-width: 816px) {
.content  {max-width:500px;}
.main01{max-width:500px;}
.main02{max-width:500px;}

}

@media (max-width: 600px) {

.header_pc {
	display:none;
}

.header_m {
	display:block;
}


.main01{
	width:100%;
	magin:0 auto;
	}

.main01 div{
	max-width:600px;
	padding-bottom:15px;
	}

.imgbox {magin:0 auto;max-width:480px;padding: 25px;}

.main02{
	width:100%;
	max-width:600px;
	float:left;
	vertical-align:top;
	}

.main02 div{
	padding:25px;
	padding-top:0px;
}



}

@media (min-width: 1017px) {
	
	
.main03{
	position:relative;
	width:100%;
	max-width:1000px;
	margin:0 auto;

	}


.main03 img{
	width:100%;
	float:left;
	max-width:323px;	
	padding:5px;
}

	
	
}


@media screen and (min-width: 815px) and (max-width: 1016px){



.main03{
	max-width:800px;
	margin:0 auto;
	}


.main03 img{
	float:left;
	max-width:255px;	
	padding:5px;
}

}


@media screen and (min-width: 521px) and (max-width: 814px){



.main03{
	max-width:500px;
	margin:0 auto;
	}


.main03 img{
	float:left;
	max-width:240px;	
	padding:5px;
}

}


@media screen and (min-width: 441px) and (max-width: 520px){


.main03{
	max-width:420px;
	margin:0 auto;
	}


.main03 img{
	float:left;
	max-width:200px;	
	padding:5px;
}
	
}


@media screen and (min-width: 291px) and (max-width: 440px){

.main03{
	max-width:300px;
	margin:0 auto;
	}


.main03 img{
	float:left;
	max-width:280px;	
	padding:10px;
}
	
}