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


html {
	min-height: 100%;
	background: url(../images/bg01.jpg) top center repeat-x;
	font-family: "", sans-serif;
	overflow-x:hidden;
	background-color:#a3d82e;

	/*background-attachment:fixed;
	/*background-origin:border-box; 固定時不用，不過通常都是對齊*/

	/*我是all版用哦XD
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain; 
*/
}

body {
	min-height: 100%;
    margin: 0;
	padding: 0;
}

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

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



header img{
    width:100%;
}

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

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



header  {
	width:100%;
    /*background:#00ffcc; 先不要*/
    /*opacity: .5; - 整體透明*/

}


.top_pc {width:100%;}

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

.topbox img {width:100%;}


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

.header_m {
	display:none;
}


/*all的(暫時不用)

.man_pc_all{width:100%;}
.man_box_all{width:100%;max-width:1920px;margin:0 auto;position:relative;}

.man01_all{position:absolute;z-index:103;}
.man01_all img{width:18.698vw;max-width:359px;}

.man02_all{position:absolute;z-index:102;}
.man02_all img{width:12.656vw;max-width:243px;}


.man03_all{position:absolute;z-index:101;}
.man03_all img{width:15.938vw;max-width:306px;}

.t01_all{position:absolute;z-index:104;}
.t01_all img{width:10.573vw;max-width:203px;}

.man_bg_all {position:relative;z-index:1;width:100%;max-width:1920px;max-height:577px;pointer-events: none;}
.man_bg_all img{}


all的-end*/




.man_pc{width:100%;}
.man_box{width:100%;max-width:1000px;margin:0 auto;position:relative;}



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 (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 (min-width: 1000px) {
.top_pc {width:100%;	background: url(../images/title01_bg.png) top center repeat-x;transition: all 0s ease;}

/*
.man01_all{top:1.2%;left:46%;right:64.6%;bottom:69.7%;}
.man02_all{top:30.2%;left:35.3%;right:47.8%;bottom:71.8%;}
.man03_all{top:28.2%;left:25.1%;right:40.4%;bottom:94.6%;}
.t01_all{top:45.4%;left:64.4%;right:73.9%;bottom:95.7%;}
*/


.man01{top:1.2%;left:42.4%;right:78.0%;bottom:69.7%;}
.man02{top:30.2%;left:21.7%;right:45.8%;bottom:71.8%;}
.man03{top:28.2%;left:2.1%;right:31.6%;bottom:94.6%;}
.t01{top:45.4%;left:75.5%;right:95.9%;bottom:95.9%;}


.man01{position:absolute;z-index:103;animation-name:man01a;animation-duration:1s;} /*vw放這邊會變成很有彈性XD*/
.man01 img{width:35.900vw;max-width:359px;}

.man02{position:absolute;z-index:102;animation-name:man02a;animation-duration:1s;animation-delay:0.5s;}
.man02 img{width:24.300vw;max-width:243px;}


.man03{position:absolute;z-index:101;animation-name:man03a;animation-duration:0.5s;animation-delay:1s;}
.man03 img{width:30.600vw;max-width:306px;}

.t01{position:absolute;z-index:104;}
.t01 img{width:20.300vw;max-width:203px;}

.man_bg {position:relative;z-index:1;width:100%;max-width:1000px;max-height:577px;pointer-events: none;}
.man_bg img{}

.man_bg_m {display:none;}


@keyframes man01a{
  0%{top:81.6%;left:49%;opacity:0;transform: scale(0.5);  }
  50%{ top:0.1%;  }
  80%{ transform: scale(1.001);left:42.41%; }
  100%{ top:1.2%;opacity:1;transform: scale(1);   }
}


@keyframes man02a{
  0%{top:86.0%;left:37.2%;opacity:0;transform: scale(0.5);  }
  50%{ top:19.8%;  }
  80%{ transform: scale(1.001); }
  100%{ top:30.2%;opacity:1;transform: scale(1); }
}


@keyframes man03a{
  0%{left:-100%;  }
  50%{  left:3%; }
  95%{   }
  100%{ left:2.1%;transform: scale(1); }
}

}

@media (max-width: 999px) {
html {
	min-height: 100%;
	background: url(../images/bg01_m.jpg) repeat-x;
	font-family: "", sans-serif;
	overflow-x:hidden;
	background-color:#a3d82e;

    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-size:contain; 
*/
}

.man_box{max-height:1009px;}

.man01{position:absolute;z-index:103;} /*vw放這邊會變成很有彈性XD*/
.man01 img{width:48.200vw;max-width:482px;}

.man02{position:absolute;z-index:102;}
.man02 img{width:42.900vw;max-width:429px;}


.man03{position:absolute;z-index:101;}
.man03 img{width:38.400vw;max-width:384px;}

.t01{position:absolute;z-index:104;}
.t01 img{width:26.500vw;max-width:265px;}

.man_bg {display:none;}
.man_bg_m {display:block;position:relative;z-index:1;width:100%;max-width:1000px;max-height:1009px;pointer-events: none;}
.man_bg img{}


.man01{top:8.9%;left:18.2%;right:66.4%;bottom:61.8%;}
.man02{top:55%;left:31.7%;right:74.6%;bottom:96.6%;}
.man03{top:48.7%;left:-2.2%;right:35.1%;bottom:96.6%;}
.t01{top:49.2%;left:76.6%;right:103.1%;bottom:86.9%;}







}







@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;
}
	
}