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

body {
	margin: 0px;
	background:#000;
}
img {
	border:0;
}
#nav {
	position:fixed;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	width:100%;
	min-width:640px;
	max-width:1200px;
	z-index:999;
	background:#000;
}
#menu {
	position:relative;
}
#menu a {
	display:block;
	opacity:0.7;
	filter:alpha(opacity=70);
}
#menu a.active {
    opacity:1;
    filter:alpha(opacity=100);
}
#menu a:hover {
	opacity:1;
	filter:alpha(opacity=100);
	-webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.btn a {
	border:0;
	display:block;
}
.btn a:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
	-webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.m01 {
	float:left;
	width:2.67%;
	margin-left:1%;
}
.m02 {
	float:left;
	width:10.75%;
}
.m03 {
	float:left;
	width:5.09%;
}
.m04 {
	float:left;
	width:10.75%;
}
.m05 {
	float:left;
	width:7.92%;
}
.m06 {
	float:left;
	width:10.92%;
}
.m07 {
	float:right;
	width:10.84%;
}
.m08 {
	float:right;
	width:7.92%;
}
.m09 {
	float:right;
	width:3.92%;
	margin-right:1%;
}
#float_btn {
	position:absolute;
	top:100px;
	right:0.5%;
	width:4.4%;
	max-width:76px;
	min-width:55px;
	z-index:99;
	transition: top 0.8s;
}
#wrapper {
	position:relative;
	margin:0 auto;
	padding-top:3%;
	width:100%;
	min-width:640px;
	max-width:1200px;
}
#header {
	position:relative;
	width:100%;
}
#header img {
	display:block;
	border:0;
}
#header .left {
	position:relative;
	float:left;
	width:75%;
}
#header .right {
	position:relative;
	float:right;
	width:25%;
}
#set01 {
	position:relative;
	width:100%;
}
#set01 .btn_join {
	position: absolute;
    bottom: 8%;
    right: 25.5%;
	width: 12%;
    max-width: 143px;
}
#set01 .btn_more {
	position: absolute;
    bottom: 8%;
    right: 12%;
	width: 12%;
    max-width: 143px;
}
#set02 {
	position:relative;
	width:100%;
}
#set02 .btn_more {
	position: absolute;
    bottom: 11%;
    right: 19%;
	width: 12%;
    max-width: 143px;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#set03 {
	position:relative;
	width:100%;
}
#set03 .btn_join01 {
	position: absolute;
    top: 32.9%;
    left: 49.5%;
    width: 12%;
    max-width: 143px;
}
#set03 .btn_join02 {
	position: absolute;
    top: 61.5%;
    left: 38%;
	width: 12%;
    max-width: 143px;
}
#set03 .btn_join03 {
	position: absolute;
    top: 93%;
    left: 41.7%;
	width: 12%;
    max-width: 143px;
}
#set03 .btn_share01 {
	position: absolute;
    top: 32.9%;
    left: 62.5%;
    width: 12%;
    max-width: 143px;
}
#set03 .btn_share02 {
	position: absolute;
    top: 61.5%;
    left: 51%;
    width: 12%;
    max-width: 143px;
}
#set03 .btn_share03 {
	position: absolute;
    top: 93%;
    left: 54.7%;
    width: 12%;
    max-width: 143px;
}
#set04 {
	position:relative;
	width:100%;
}

#set05 {
	position:relative;
	width:100%;
}
#set06 {
	position:relative;
	width:100%;
}
#set06 .btn_more {
	position: absolute;
    bottom: 33%;
    left: 27%;
	width: 12%;
    max-width: 143px;
}
#set07 {
	position:relative;
	width:100%;
}
#set07 .btn_more {
	position: absolute;
    bottom: 34%;
    left: 44%;
	width: 12%;
    max-width: 143px;
}
#footer {
	position:relative;
	margin-top:30px;
	width:100%;
	border-top:1px solid #999;
}
#footer .copyright {
	position:relative;
	float:left;
	width:16.6%;
}
#footer .page_share {
	position:relative;
	float:right;
	width:7%;
	opacity:1;
}
.page_share:hover {
	position:relative;
	float:right;
	width:7%;
	opacity:0.7 !important;
	filter:alpha(opacity=70);
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#pop_form {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:10% auto;
	width:900px;
}
#pop_form .left {
	position:relative;
	float:left;
	width:50%;
}
#pop_form .right {
	position:relative;
	float:right;
	width:50%;
	background:#000;
}
#pop_form .close {
	position:relative;
	margin-left:405px;
	width:45px;
}
#pop_form .close:hover {
	opacity:0.7 !important;
	filter:alpha(opacity=70);
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#pop_form .right .pop_input {
	position:absolute;
}
.i01 {
    top: 240px;
    left: 43px;
    width: 194px;
}
.i02 {
    top: 240px;
    left: 258px;
    width: 141px;
}
.i03 {
    top: 316px;
    left: 43px;
    width: 356px;
}
.i04 {
    top: 393px;
    left: 43px;
    width: 100px;
}
.i05 {
    top: 393px;
    left: 164px;
    width: 235px;
}
.i06 {
    top: 455px;
    left: 40px;
    width: 50px;
}
.i07 {
    top: 499px;
    left: 43px;
    width: 76px;
}
#pop_form .i07:hover {
	opacity:0.7 !important;
	filter:alpha(opacity=70);
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type=text] {
	width:100%;
	width: calc(100% - 10px);
	padding:6px 5px;
	border:0;
	outline:0;
	font-family:'微軟正黑體', Arial, Helvetica, sans-serif;
	font-size:19px;
	border:1px solid #ccc;
}

#reg {
	position:relative;
	width:100%;
}
#set05 .reg_form {
	position:absolute;
}
.r01 {
	width: 15%;
    top: 42%;
    left: 14.5%;
}
.r02 {
	width: 10%;
    top: 42%;
    left: 37.3%;
}
.r03 {
	width: 31%;
    top: 42%;
    left: 63.5%;
}
.r04 {
	width: 32.8%;
    top: 49.8%;
    left: 14.5%;
}
.r05 {
	width: 31%;
    top: 49.8%;
    left: 63.5%;
}
.r06 {
	width: 32.8%;
    top: 57.7%;
    left: 14.5%;
}
.r07 {
	width: 31%;
    top: 57.7%;
    left: 63.5%;
}
.r08 {
	width: 2%;
    top: 69.5%;
    left: 5.5%;
}
.r09 {
	width: 2%;
    top: 73.3%;
    left: 5.5%;
}
.r10 {
	width: 15%;
    top: 79.3%;
    left: 5.5%;
}
.r11 {
	width: 15%;
    top: 81.5%;
    left: 54%;
}
#set05 .btn_share {
	position: absolute;
    bottom: 11%;
    left: 37.5%;
	width: 12%;
    max-width: 143px;
}
#set05 .btn_send {
	position: absolute;
    bottom: 11%;
    left: 51%;
	width: 12%;
    max-width: 143px;
}
#newsletter {
	position:relative;
	width:100%;
}
#newsletter .left {
	position:relative;
	float:left;
	width:50%;
}
#newsletter .right {
	position:relative;
	float:right;
	width:50%;
}
#newsletter .right .news_form {
	position:absolute;
}
.n01 {
	width: 32%;
    top: 37%;
    left: 7.5%;
}
.n02 {
	width: 24%;
    top: 37%;
    left: 45%;
}
.n03 {
	width: 61.5%;
    top: 49%;
    left: 7.5%;
}
.n04 {
	width: 15%;
    top: 61%;
    left: 7.5%;
}
.n05 {
	width: 43%;
    top: 61%;
    left: 26%;
}
.n06 {
	width: 3%;
    top: 71.8%;
    left: 6.5%;
}
.n07 {
	width: 12.7%;
    top: 81%;
    left: 7.5%;
}
@media screen and (max-width: 1024px) {
input[type=text] {
	padding:0.6vw 5px;
}
.r01 {
    top: 41%;
}
.r02 {
    top: 41%;
}
.r03 {
    top: 41%;
}
.r04 {
    top: 48.8%;
}
.r05 {
    top: 48.8%;
}
.r06 {
    top: 56.7%;
}
.r07 {
    top: 56.7%;
}
.r08 {
    top: 69%;
}
.r09 {
    top: 72.7%;
}
.r10 {
    top: 78.7%;
}
.r11 {
	width: 15%;
    top: 81.5%;
    left: 54%;
}
}
@media screen and (max-width: 720px) {
input[type=text] {
	padding:0.4vw 5px;
}
.r01 {
    top: 41%;
}
.r02 {
    top: 41%;
}
.r03 {
    top: 41%;
}
.r04 {
    top: 48.8%;
}
.r05 {
    top: 48.8%;
}
.r06 {
    top: 56.7%;
}
.r07 {
    top: 56.7%;
}
.r08 {
    top: 68.5%;
	left:5%;
}
.r09 {
    top: 72.2%;
	left:5%;
}
.r10 {
    top: 78.2%;
	left:5%;
}
.r11 {
	width: 15%;
    top: 81.5%;
    left: 54%;
}
}