@charset "UTF-8";

html {overflow-x:hidden;overflow-y:scroll;}
body {
	margin:0px;
	background-color:#ffffff;
}
a {blr:expression(this.onFocus=this.blur()); outline:none;}
img {border:0px;}

body, td, p {font-family:"微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size:1rem; color:#fff; line-height:160%;}
select,textarea,input {font-family:"微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size:1rem; color:#000; line-height:160%;}
a {color:#fff; text-decoration:none;}
a:hover,a:active {color:#0ff; text-decoration:none;}
ul,li {margin: 0;padding: 0;list-style: none;}

#bg_mask_black {
	position:absolute;bottom:0;
	width:100%;
	background-color:#000000;
}

/* doc */
#doc {
	margin: 0 auto;
	max-width: 1920px;
	overflow:hidden;
}

/* menu_list */
#menu_list {
	position:fixed;
	margin:0 auto;
	width:100%;
	text-align: center;
	z-index:1;
	
	background-color: #000c;
	overflow: hidden;
	display: none;
	z-index: 2;
}
#menus, #langs {
	display: inline-block;
}
#menus .menu {
	position: relative;
	float: left;
	cursor: pointer;
}
#menus .menu_bg {
	position: absolute; top:0; left:-250px;
	background-color: #975ec7cc;
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
}
#menus .menu img {
	margin: 0 auto;
	width: 64%;
	display: block;
}
#langs .lang {
	padding: 0 0 0 10%;
	font-weight: bolder;
	float: left;

	-moz-text-shadow:   0px 2px 1px #0009, 0px 2px 3px #0009;
	-webkit-text-shadow:0px 2px 1px #0009, 0px 2px 3px #0009;
	text-shadow:        0px 2px 1px #0009, 0px 2px 3px #0009;
}
#langs .lang .current {
	color: #0ff;
}

/* float_menu */
#float_switch {
	position:fixed; top:0; right:0;
	cursor:pointer;
	z-index:99999;

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#float_switch div {
	position: absolute; top: 0; right: 0;
}
#float_switch div.close {
	display: none;
}
#float_head {
	position:fixed; top:0; left:0;
	padding: 1% 0;
	width:100%;
	background-color:#0009;
	z-index:99999;
}
#float_head img {
	margin: 0 auto;
	width: 27.5%;
	display: block;
	cursor: pointer;
}
#float_menu {
	position:fixed; top:0; right:-75%;
	width:75%; height: 100%;
	background-color:#000c;
	text-align: center;
	z-index:99999;
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#float_menu .fmenu {
	padding: 2.5% 0;
	cursor:pointer;
}
#float_menu .fmenu img {
	margin: 0 auto;
	max-width: 33%;
	display: block;
}
#float_menu .fmenu.cur{
	background-color:#975ec7cc;
}
#float_menu .current{
	color:#0ff;
}
#float_bg {
	position:fixed;
	width:100%;height:100%;
	background-color:#00000080;
	z-index:99999;
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
	display:none;
}
#float_top {
	position:fixed;bottom:0;right:0;
	text-align: right;
	cursor:pointer;
	z-index:99999;
	
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
	display:none;
}
#float_top img {
	max-width: 100%;
}

/* main */
#main_list {
	position: relative;
	margin: 0 auto;
}
.page {
	position: relative;
}

/* video */
.page.video {
	width:100%;height:100%;
	background:url('../images/bg_video.jpg') no-repeat 50% 50%;
	background-size:cover;
	z-index: 1;
}
.page.video .border {
	position: absolute;
	width: 100%;
	pointer-events: none;
}
.page.video .border img {
	margin: 0 auto;
	max-width: 100%;
	display: block;
}
.page.video .logo {
	position: absolute;
	width: 100%;
}
.page.video .logo img {
	margin: 0 auto;
	max-width: 32%;
	display: block;
}
.page.intro .logo {
	position: relative;
	width: 100%;
}
.page.intro .logo img {
	margin: 0 auto;
	max-width: 40%;
	display: block;
}
.page.intro .logo.help img {
	margin: 0 auto;
	max-width: 25%;
	display: block;
}
#youkuplayer {
	position: absolute;
	background-color:#000;
	background:url('../images/bg_thumb.jpg') no-repeat 50% 50%;
	background-size:cover;
}
#youkuplayer iframe { width: 100%; height: 100%; }


/* feature */
#feature_video {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	background:url('../images/bg_play.jpg?2') no-repeat 50% 50%;
	background-size:cover;
}
#bg_video {
	position: absolute; top: 0; left: 0;
}
.page .feature_mask {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background-color:#0005;
}
.page .feature_desc {
	position: absolute; bottom: 0;
	width: 100%;
}
.page .feature_desc img {
	width: 100%;
}
.page .slogan_bg {
	position: relative;
}
.page .slogan {
	position: absolute; bottom: -50%;
	width: 55.3125%;
	max-width: 708px;
}
.page .desc {
	padding: 0% 5% 1%;
	width: 90%;
	font-weight: bolder; text-align: justify;
	background-color: rgba(163, 44, 47, .79);

	-moz-text-shadow:   0px 0px 5px #fc09;
	-webkit-text-shadow:0px 0px 5px #fc09;
	text-shadow:        0px 0px 5px #fc09;
}
.page .desc:first-letter {
	font-size: 175%;
}
/* cabinet */
.page.cabinet {
	width:100%;height:100%;
	background:url('../images/bg.jpg') repeat-y 50% 0%;
	background-size:100%;
	z-index: 1;
}
.page .cab_dim {
	position: absolute; bottom: 0;
	width: 100%;
}
.page.intro .cab_dim {
	position: relative;
	width: 100%;
}
.page.intro .cab_dim .item_info select {
	margin: 2px;
	height: 32px;
}
.page.intro .item {
	width: 100%;
	max-width: 960px;
}
.page.intro .item_info {
	text-align: center;
}
.page.intro .cab_dim .item_info input {
	margin: 2px;
	min-width: 60%; height: 22px;
	padding: 3px;
}
.page.intro .item_info span {
	color: #00ffde;
}
.page.intro .faq {
	margin: 0 auto;
	padding: 5% 0 0 0;
	width: 96%;
	color: #000; font-weight: bolder;
}
.page.intro .faq .q {
	position: relative;
	border-bottom: 4px solid #00a08b;
	padding: 1% calc(1% + 40px) 1% 1%;
	cursor: pointer;
}
.page.intro .faq .q:hover {
	border-bottom: 4px solid #006b5d;
}
.page.intro .faq .q span {
	font-size: 200%;
}
.page.intro .faq .q .switch {
	position: absolute; bottom:5%; right: 0.5%;
	font-size: 200%; color: #00a08b;

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.page.intro .faq .a {
	padding: 0.5% 1% 0.5% 1%;
	background-color: #ffffff99;
	display: none;
	
	-moz-box-shadow:    1px 2px 10px #0006;
	-webkit-box-shadow: 1px 2px 10px #0006;
	box-shadow:         1px 2px 10px #0006;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.page.intro .faq .a * {
	color: #000; font-weight: normal;
}
.page .dim_top img {
	width: 100%;
}
.page .dim {
	padding: 1% 5% 0%;
	width: 90%;
	color: #000;
	text-align: center;
	background-color: rgba(78, 165, 187, .95);
	overflow: hidden;

	-moz-text-shadow:   0px 0px 3px #0006;
	-webkit-text-shadow:0px 0px 3px #0006;
	text-shadow:        0px 0px 3px #0006;
}
.page .dim .item {
	padding:0 0.5% 1% 0.5%;
	font-weight: bolder; text-align: left;
	display: inline-block;
}
.page .dim .item .item_name span {
	color: #00ffde;
	float: left;
}
.page .cab {
	position: absolute;
	padding: 0% 1%;
	width: 98%;
	text-align: center;
}
.page .cab img {
	max-width: 100%;
}
/* intro */
.page.intro {
	padding-bottom: 5%;
	width:100%;height:100%;
	background:url('../images/bg.jpg') repeat-y 50% 0%;
	background-size:100%;
	z-index: 1;
}
.page.intro img {
	max-width: 100%;
}
.page.intro .intro {
	position: relative;
	margin: 0 auto;
	padding: 4% 0;
	width: 100%; max-width: 1280px;
}
.page.intro .intro.s1 {
	padding: 0% 0;
}
.page.intro .border {
	position: relative;
	margin: 0 auto;
	padding: 0% 13.28125% 0;
	width:73.4375%;
}
.page.intro .pic {
	position: absolute; top: 0; left: 0;
	padding: 3.4% 16.640625% 0;
	width:66.71875%;
}
.page.intro .pic video {
	width:100%;
}
.page.intro .pic .pic3_box {
	position: relative;
	width:100%; height:300px;
	overflow: hidden;
	cursor: pointer;
}
@keyframes slideLeft {
	0% {
		left: 0%;
	}
	50% {
		left: -50%;
	}
	100% {
		left: 0%;
	}
}
@keyframes slideRight {
	0% {
		left: -50%;
	}
	50% {
		left: 0%;
	}
	100% {
		left: -50%;
	}
}
@keyframes slideDown {
	0% {
		top: 0%;
	}
	50% {
		top: -68%;
	}
	100% {
		top: 0%;
	}
}
.page.intro .pic .pic3_box .pic1,.page.intro .pic .pic3_box .pic3,.page.intro .pic .pic3_box .pic5 {
	position: absolute; left: 0%; top: -20%;
	width:150%;
	animation: slideLeft 30s linear infinite; /* 調整持續時間與效果 */
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
}
.page.intro .pic .pic3_box .pic2,.page.intro .pic .pic3_box .pic4 {
	position: absolute; left: 0%; top: -20%;
	width:150%;
	animation: slideRight 30s linear infinite; /* 調整持續時間與效果 */
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
}
.page.intro .pic .pic3_box .pic6 {
	position: absolute; left: 0%; top: 0%;
	width:100%;
	animation: slideDown 30s linear infinite; /* 調整持續時間與效果 */
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
}
.page.intro .pic img {
	width:100%;
}
.page.intro .pic_border {
	position: relative;
	z-index: 1;
}
.page.intro .text {
	margin-top: -5%;
	padding: 0 5%;
	width: 90%;
	color: #000; text-align: center; font-weight: bolder;
}
.page.intro .intro .dots {
	position: relative;
	margin: 0 auto;
	width: 80%; 
	text-align: center;
	z-index: 1;
}
@media (max-width: 1199px) {
	.page.intro .intro .dots {
		width: 100%; /* 可根據需求調整 */
	}
}
.page.intro .intro .sm {
	position: relative;
	width: 33.3333%;
	display:inline-block;
}
.page.intro .intro .sm .over {
	position: absolute; top: 0; left: 0;
	width: 100%;
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
	cursor: pointer;
}
.page.intro .intro .sm img {
	width: 100%;
}
.page.intro .intro .dot {
	margin: 0 1%;
	background-color: #fff;
	display: inline-block;
	cursor: pointer;
	
	-moz-box-shadow:    0px 0px 10px #0006;
	-webkit-box-shadow: 0px 0px 10px #0006;
	box-shadow:         0px 0px 10px #0006;

	border: 2px solid #330;
	
	-moz-border-radius:		100px;
	-webkit-border-radius:	100px;
	border-radius:			100px;
}
.page.intro .intro .dots .dot:first-child {
	background-color: #01c289;
}
.stageStory {
	position: relative;
	padding-bottom: 5%;
}
@media (max-width: 1199px) {
	.stageStory {
		padding-bottom: 20%;
	}
}
.stageStory .text {
	position: absolute; top: 0; left: 0;
	filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;
}
.page.intro .text.text_s {
	padding-top: 3%;
}
.page.intro .text.left {
	text-align: justify;
}
.page.intro .text::first-letter {
	font-size: 150%;
}
.page.intro .intro1_1 {
	position: absolute; top: 7%; left: 3.7%;
	width: 17.7083%;
	z-index: 1;
}
.page.intro .intro1_2 {
	position: absolute; bottom: 11%; right: 6.2%;
	width: 13.8021%;
	z-index: 1;
}
.page.intro .intro5_1 {
	position: absolute; top: 7%; right: 4.1%;
	width: 15.7292%;
	z-index: 1;
}
/* contact */
.page.contact {
	width:100%;height:100%;
	background:url('../images/bg_contact.jpg') no-repeat 50% 50%;
	background-size:cover;
	z-index: 1;
}
.page .mail {
	position: absolute;
	width: 100%;
	text-align: center;
}
.page .mail img {
	margin: 0 auto;
	max-width: 20%;
	display: block;
}
#mask {
	position: fixed;
	width: 100%; height: 100%;
	background-color: #000;
	z-index: 99999;
}