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

img {
    max-width: 100%;
}

.clearfix{clear:both;}

body{   
    margin:0;    
	padding: 0;
    background:#f7d837;
	font-family: "微軟正黑體", "儷黑 Pro", Arial, Helvetica, sans-serif;
	}
	
	
.header_wrapper {
	background:#30318d;
	background-image:url(../images/top.jpg);
	background-position:center;
	background-size:cover; 
	margin-left: auto;      
    margin-right: auto;
	height:310px;
	}

	
	
	
	
.container_wrapper{margin:20px auto;}
.container{width:950px;margin:0 auto;}
.djwrap{width:22.5%;height:auto;padding:6px 6px;background:#FFFFFF;float:left;margin:10px 5px;}
.djwrap .row {width:100%; padding:2px 1px;}
.dj img{height:auto;width:100%;}
	

.videowrap {margin:20px auto;}
.videowrap .container {max-width:480px;}
.videowrap .container .title img {padding:5px;}
.videoplay {margin:0 auto;}
	

.official_image_wrap {margin:10px 0;}
.official_image {padding:6px 6px;margin:5px 10px;background:#FFFFFF;float:left;}
.official_image img{width:280px;height:auto;}
	
	
	
.footer {width:100%;background:#30318d;height:30px;bottom:0px;margin-top:20px;color:#ffffff;padding-top:13px;font-size:11px;text-align:center;}




@media (max-width: 768px) {
	
	
.header_wrapper{height:200px;background-size:cover; }


.container{width:100%;margin:0 auto;}
.djwrap{width:30%;height:auto;padding:5px 5px;background:#FFFFFF;float:left;margin:5px 5px;}
.djwrap .row {width:100%; padding:3px 1px;}
.dj img{height:auto;width:100%;}

.official_image_wrap .container {width:90%;}
.official_image {width:30%;padding:4px 4px;margin:5px 5px;background:#FFFFFF;float:left;}
.official_image img{width:100%;height:auto;}
	
	
}



@media (max-width: 960px){ 
.djwrap{width:30%;height:auto;padding:4px 4px;background:#FFFFFF;float:left;margin:5px 5px;}
.header_wrapper{height:125px;background-size:cover; }
.videowrap {margin:5px auto;}
.videowrap .container {max-width:320px;}
/*
.official_image_wrap {margin:10px 0;}
.official_image_wrap .container {width:50%;}
.official_image {width:90%;padding:4px 4px;margin:5px 5px;background:#FFFFFF;float:left;}
.official_image img{width:100%;height:auto;}*/

.official_image_wrap .container {width:100%;}
.official_image {width:30%;padding:4px 4px;margin:5px 4px;background:#FFFFFF;float:left;}

}


@media (max-width: 480px){ 
.djwrap{width:44%;height:auto;padding:4px 4px;background:#FFFFFF;float:left;margin:5px 5px;}
.header_wrapper{height:125px;background-size:cover; }
.videowrap {margin:5px auto;}
.videowrap .container {max-width:320px;}
/*
.official_image_wrap {margin:10px 0;}
.official_image_wrap .container {width:50%;}
.official_image {width:90%;padding:4px 4px;margin:5px 5px;background:#FFFFFF;float:left;}
.official_image img{width:100%;height:auto;}*/

.official_image {width:29%;padding:4px 4px;margin:5px 4px;background:#FFFFFF;float:left;}

}

@media (max-width: 360px){ 
.header_wrapper{height:110px;background-size:cover; }
.djwrap{width:43%;height:auto;padding:4px 4px;background:#FFFFFF;float:left;margin:5px 5px;}
.videowrap {margin:5px auto;}
.official_image {width:28%;padding:4px 3px;margin:5px 3px;background:#FFFFFF;float:left;}
}