@charset "utf-8";
/* CSS Document */
/*right icon*/
#icon{ display:block; position:fixed; right:25px; top:220px; z-index:99;}
#icon ul{ width:67px; height:264px; }
#icon li{
	position: relative;
    width: 67px;
    height: 67px;
    display: block;
    margin: 8px;
	float: left;
	background-color: rgba(0,0,0,0);
    /* background-color: aquamarine; */
    border-radius: 100%;
}
#icon p{ position:absolute; right:0; opacity:0; text-align:left;padding-left: 15px; width:130px; color:#FFF; font-size:15px; line-height:67px; letter-spacing:1px; background-image:url(../images/icon_hover.png) left no-repeat; overflow:hidden;left: -95px;border-radius: 40px 0 0 40px;background-color: rgba(0,0,0,0);}
#icon a{ display:block; width:67px; height:67px; position:absolute; z-index:99;color: rgba(0,0,0,0);text-align: center;}
#icon a.pay{ /*background:url(../images/icon.png);*/ background-position:0 0;}
#icon a span{
	display: block;
	background: #FF0781;
	color: #fff;
	border-radius: 10px;
	padding: 2px 7px;
	position: absolute;
	bottom: 2px;
	left: 2px;
}/*
#icon a.pay:hover{ background-position:-67px 0}
#icon a.record{ display:block; width:67px; height:67px; background:url(../images/icon.png); background-position:0 -67px;}
#icon a.record:hover{ background-position:-67px -67px;}
#icon a.fb{ display:block; width:67px; height:67px; background:url(../images/icon.png); background-position:0 -134px;}
#icon a.fb:hover{ background-position:-67px -134px;}
#icon a.member{ display:block; width:67px; height:67px; background:url(../images/icon.png); background-position:0 -201px;}
#icon a.member:hover{ background-position:-67px -201px;}*/
#icon ul li ul.main_nav{
	float:left;
  	width: 67px;
  	height: 67px;
	display: block;
}
#icon ul li ul.main_nav li{
	float:left;
  	width: 67px;
  	height: 67px;
	display: block;
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
#icon a i {
    line-height: 1.8em;
    /* margin: 5px auto; */
    /* width: 50px; */
    display: inline;
}
/*======================== ëŠÄX°æ ƒÈí“ ========================*/



@media screen and (min-width: 1001px) and (max-width: 1200px), screen and (max-height: 500px) {
	#dot{ display:none;}
	
	#slide li span{ font-size:35px; line-height:100%;}
	
	#top{ background:url(../images/top.png) center top; position:fixed; width:100%; height:185px; top:0; left:0; z-index:1; }
	#top nav{ width:1000px; display:block; margin:0 auto; position:relative;}
	#top b{ display:none;}
	#top h1{ display:block; width:300px; height:280px; position:absolute; position:relative; z-index:1;}
	#top h1 img{ max-width:100%; max-height:100%; margin:0 auto;}
	#top ul{ position: absolute; top:0; right:0; display:block; width:720px; height:185px; overflow:hidden;}
	#top li{ float:left; text-align:center;}
	#top li a{ display:block; width:180px; height:185px; color:#FFF; font-size:17px; text-decoration:none; font-weight:bold; line-height:165px; text-shadow:#dd127b 1px 1px;}
	#top li a:hover, #top li a.on{ line-height:185px; color:#FFF; font-size:15px;}
	#top li a.btn1:hover, #top li a.btn1.on{ background:url(../images/menuHover_1.png) center top;}
	#top li a.btn2:hover, #top li a.btn2.on{ background:url(../images/menuHover_2.png) center top;}
	#top li a.btn3:hover, #top li a.btn3.on{ background:url(../images/menuHover_3.png) center top;}
	#top li a.btn4:hover, #top li a.btn4.on{ background:url(../images/menuHover_4.png) center top;}
	#top li a.btn5, #top li a.btn6{ display:none;}
	
	#mid li a div.info nav{ margin-top:15%;}
	#mid li a div.info p{ opacity:0;}
	
	#content, #title, #page{ width:75%; }
	#page{ top:280px;}
	
	#about .about-img{ width:100%; height:auto;}
	
	#story img{ width:88%; float:none;}	
	#story h3{ padding-top:15px;}
	
	#join img{ width:100%;}
	
	#contact h3{ font-size:26px;}
}


@media screen and (min-width: 701px) and (max-width: 1000px) {
}


@media screen and (max-width: 767px) {
	#icon{
	position: relative;
	right: 0;
	z-index: 3;
	width: 100%;
	top:-73px; 
}
#icon ul{ width:100%; height:73px; display:inline-block; margin:0 auto; position:absolute; text-align:center;top:0px;
	
}
	#icon li{ width:67px; height:67px; display:inline-block; float:none; margin:2px 1% 0px 1%;}
	#icon p{ display:none;}
	#icon a{ display:block; width:67px; height:67px; position:absolute; z-index:1;}
	#icon a.pay{ background:url(../images/icon.png); background-position:0 0;}
	#icon a.pay:hover{ background-position:-67px 0}
	#icon a.record{ display:block; width:67px; height:67px; background:url(../images/icon.png); background-position:0 -67px;}
	#icon a.record:hover{ background-position:-67px -67px;}
	#icon a.fb{ display:block; width:67px; height:67px; background:url(../images/icon.png); background-position:0 -134px;}
	#icon a.fb:hover{ background-position:-67px -134px;}
	#icon a.member{ display:block; width:67px; height:67px; background:url(../images/icon.png); background-position:0 -201px;}
	#icon a.member:hover{ background-position:-67px -201px;}
}


@media screen and (max-width: 350px) {
}