@charset "utf-8";
@import url("reset.css");
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 		 /* 解除邊框與padding限制 */
}
/* 基本設定 */
body {
	font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
	font-size: 15px;
	-webkit-text-size-adjust: none;  /* IOS旋轉不改變字型大小 */
	background-color: #06abe0;
	background-image: url(../images/bg_1115.png);
	background-repeat: repeat-x;
	background-position: top;
}
a{text-decoration:none;}

#BANNER_BTM {
	background:url(../images/indexbg_1115.jpg)    no-repeat top center;
	margin:0 auto;
	max-width:2000px;
	min-height:880px;
}


h1{
	display:block;
	float:right;
	margin-top:10px;
	}
@media only screen and (max-width: 481px){
h1 {
	margin-right:10px;
	}
	}
h1 a {
	display: block;
	width: 525px;
	height: 250px;
	background: url(../images/logo_1115.png) no-repeat;
	background-size: 100% auto;
	text-indent: -9999px;
}
@media only screen and (max-width: 481px){
h1 a {
	width: 430px;
	height:280px;
	}
	}
h1 a:hover {
	filter: alpha(opacity=60); /* IE */
	-moz-opacity: 0.6; /* Moz + FF */
	opacity: 0.6;
}

#BANNER_Harlem {
	background:url(../images/Harlem_1115.png) no-repeat;
	background-position:0px 70px;
    background-size: 55% auto;
	margin:0 auto;
	max-width:905px;
	min-height:700px;
	}
	
@media only screen and (max-width: 481px){
#BANNER_Harlem {
	padding-top:0px;
	background-position:60px 185px;
	background-size: 75% auto;
	}
	}
#Socialsite{
//	background:url(../images/fbtitle.png) no-repeat;
	background-position: 100px 5px;
	float: right;
	width: 220px;
	height: 30px;
	padding: 0px 12px 0px 0px;
	margint: 0px;
	}
@media only screen and (max-width: 481px){
#Socialsite{
	background-position:0px 55px;
	width:220px;
	height:45px;
	background-size: 95% auto;
	padding:0px 0px 35px 55px;
	margin:10px auto 0px;
	}
    }
#Socialsite a{
	margin:0px 5px;
	}
#Socialsite a img:hover{
	filter: alpha(opacity=50); /* IE */
	-moz-opacity: 0.5; /* Moz + FF */
	opacity: 0.5;
	}
#Socialsite a:first-child{
	margin-left:5px;
	}
@media only screen and (max-width: 481px){
#Socialsite a{
	margin:0px 2px;
	}
#Socialsite a:first-child{
	margin-left:5px;
	}
}
/* Video container */
#Videobox{
	display:block;
	float:right;
	width:400px;
	height:300px;
	margin-top:9px;
	}
@media only screen and (max-width: 481px){
#Videobox{
	margin-top:90px;
	width:100%;
	height:auto;
	padding:0px 10px;
	}
	}
.video-container{
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}
.video-container iframe{
	width: 100%;
	height: 100%;
	border: 0;
	position: absolute;
	top: 0px;
	left: 0px;
}
.slogan{
	float:left;
	margin-top:130px;
	}
@media only screen and (max-width: 481px){
.slogan{
	margin-top:33px;
	}
}
.slogan img{
	width:100%;
	padding:1px 10px;
	}
	
/* 選單 */
#MAIN_NAV{
	display:block;
	width:100%;
	margin-top:20px;
	}
.menu a{
	position:relative;
	display:block;
	float:left;
	background-color:#c90b8a;
	width:165px;
	height:38px;
	line-height:38px;
	color:#fff;
	font-size:20px;
	text-align:center;
	border-radius:10px;
	margin:5px 5px;
	font-weight:bold;
	letter-spacing:2px;
	font-style:italic;
	}
.menu a:first-child{
	margin-left:40px;
	}
.menu a:last-child{
	margin-right:0px;
	}
@media only screen and (max-width: 481px){
.menu a{
	width:45%;
	margin:5px 5px;
	}
.menu a:first-child{
	margin-left:5px;
	}
.menu a:last-child{
	margin-right:5px;
	}
}

.menu a:hover{
	box-shadow:0px 0px 5px #333333;
	transform:scale(1.1);
	background-color:#9e004b;
	}
.shinebtn{
	animation:shineanime 0.75s infinite alternate;
}
@keyframes shineanime {
  from { background-color: #5a0078; }
  to { background-color: #990000; }
}

/* 頁尾 */
#FOOTER {
	position:relative;
	color:#eee;
	text-shadow:0px 0px 5px #000;
	font-size:15px;
	line-height:25px;
	padding-top:50px;
}
@media only screen and (max-width: 481px){
#FOOTER {
	padding:100px 10px 0px 10px;
	line-height:40px;
	}
	}
.appdownload_qr{
	position:absolute;
	width:187px;
	height:70px;
	top:25px;
	right:5px;
	}
@media only screen and (max-width: 481px){
.appdownload_qr{
	top:10px;
	right:10px;
	}
	}
.logoicon_1{
	position:relative;
	padding-left:58px;
	}
.logoicon_1:before{
	position:absolute;
	left:18px;
	bottom:-5px;
	height:54px;
	content:url(../images/logo_1.png);
	}
.logoicon_2{
	position:relative;
	padding-left:55px;
	}
.logoicon_2:before{
	position:absolute;
	left:0px;
	bottom:-5px;
	width:45px;
	height:43px;
	content:url(../images/logo_2.png);
	}
.logoicon_3{
	position:relative;
	padding-left:105px;
	}
.logoicon_3:before{
	position:absolute;
	left:48px;
	bottom:-5px;
	width:60px;
	height:54px;
	content:url(../images/logo_3.png);
	}
/* 清除float */
.clearfix{
clear:both;height:0;font-size:1px;line-height:0;}