@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
	font-size: 16px;
	line-height: 1.42857143;
	color: #281600;
	background-color: #fff;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 500;
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	width:100%;
}
.section {
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
}
.container {
	position: relative;
	height: 100%;
}
#section-1 {
	background-image: url(../images/section-1.png);
	height: 950px;
}
#section-2 {
	background-image: url(../images/section-2.png);
	height: 1053px;
}
#section-3 {
	background-image: url(../images/section-3.png);
	height: 1052px;
}
#section-4 {
	background-image: url(../images/section-4.png);
	height: 1092px;
}
#section-5 {
	background-image: url(../images/section-5.png);
	height: 436px;
}
#section-6 {
	background-image: url(../images/section-6.png);
	height: 117px;
}
.navbar {
	background-image: url(../images/navbar_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	border-bottom-width: 0px;
	height: 105px;
	padding-top: 28px;
}
.nav>li {
	width: 140px;
	height: 40px;
	margin: 0 8px;
}
.nav>li>a {
	position: relative;
	display: block;
	padding: 0;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
	background-image: url(../images/navbar.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.nav>li>a:focus,
.nav>li>a:hover { background-color: transparent; }
.nav>li.on>a,
.nav>li>a:hover {
	background-color: transparent;
	background-position-x: -140px;
}
.nav>li:nth-of-type(1)>a { background-position-y: 0px; }
.nav>li:nth-of-type(2)>a { background-position-y: -40px; }
.nav>li:nth-of-type(3)>a { background-position-y: -80px; }
.nav>li:nth-of-type(4)>a { background-position-y: -120px; }
.nav+.nav>li:nth-of-type(1)>a { background-position-y: -160px; }
.nav+.nav>li:nth-of-type(2)>a { background-position-y: -200px; }
.nav+.nav>li:nth-of-type(3)>a { background-position-y: -240px; }
.register {
	position: absolute;
	left: 50%;
	margin-left: -401px;
	bottom: 58px;
	/*background-color: rgba(255,0,0,.5);*/
	width: 544px;
	height: 463px;
	padding: 91px 56px 0;
	overflow: hidden;
}
.register .form-group {
	margin-bottom: 71px;
	display: block;
}
.register .form-group-email { margin-bottom: 20px; }
.register .form-control {
	height: 34px;
	padding: 6px 12px;
	font-size: 16px;
	line-height: 1.42857143;
	color: #fff;
	background-color: #1b1b1b;
	border: 1px solid #fff;
	border-width: 0 0 1px 0;
	border-radius: 0px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0);
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.register .form-control-mobile { width: 300px; }
.register .form-control-email { width: 424px; }
.register .btn-submit {
	padding: 0;
	border: 0px solid transparent;
	border-radius: 0px;
	width: 180px;
	height: 80px;
	background-image: url(../images/btn-submit.png);
	background-repeat: no-repeat;
	background-position: center top;
	overflow: hidden;
	text-indent: 100%;
	background-color: transparent;
	margin-right: -16px;
}
.register .btn:hover { background-position-y: -80px; }
.pot {
	position: absolute;
	left: 50%;
	margin-left: -230px;
	top: 724px;
}
.fb {
	position: absolute;
	left: 50%;
	margin-left: -252px;
	top: 975px;
	display: none;
}
.mango_tab {
	margin: 337px auto 0;
	width: 928px;
}
.mango_tab ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.mango_tab ul li {
	float: left;
	filter: brightness(.75);
	transition: all .2s ease-in;
}
.mango_tab ul li.active { filter: brightness(1); }
.progress_bar {
	position: absolute;
	left: 50%;
	margin-left: -455px;
	top: 383px;
}
.progress_bar img {
	position: absolute;
	left: 0;
	top: 0;
}
.burger_finish {
	position: absolute;
	left: 50%;
	margin-left: -358px;
	top: 325px;
}
.burger_finish img { position: absolute; }
.burger_finish img.burger_finish_04 { top: 510px; }
.burger_finish img.burger_finish_03 { top: 340px; }
.burger_finish img.burger_finish_02 { top: 170px; }
.burger_finish img.burger_finish_01 { top: 0; }
@media (min-width: 768px){
.container {
    width: 100%;
}
}
@media (min-width: 1200px){
.container {
    width: 1170px;
}
}
@media (max-width: 1200px) {
body { background-size: cover; }
}