html, body {
	width: 100%;
	height: 100%;
	font-family: 'Helvetica Neue', 'Helvetica', '微軟正黑體', 'STHeitiTC-Light', 'Arial', sans-serif;
}

#container {
	position: absolute;
	z-index: 1;
	width: 940px;
	height: 2617px;
	left: 50%;
	margin-left: -470px;
}

#container #header {
	background-color: #facf00;
	width: 868px;
	height: 66px;
	padding: 0 36px;
}

#container #header #logo {
	background: url(../images/logo.png) no-repeat;
	width: 140px;
	height: 36px;
	margin-top: 14px;
	vertical-align: middle;
    display: inline-block;
}

#container #header a.link {
	margin-left: 20px;
	color: #000;
	vertical-align: bottom;
    display: inline-block;
}
#container #header a.about {
	margin-left: 440px;
}

#container #header #fb {
	background: url(../images/fb.png) no-repeat;
	width: 21px;
	height: 21px;
	margin-left: 20px;
	vertical-align: bottom;
    display: inline-block;
}

#container #banner {
	background: url(../images/banner.jpg) no-repeat;
	width: 940px;
	height: 533px;
}

#container #openpoint {
	background-color: #f5f5f5;
	width: 810px;
	height: 252px;
	padding: 54px 65px;
}

#container #openpoint .title {
	background: url(../images/openpoint_title.png) no-repeat;
	width: 721px;
	height: 37px;
	text-indent: -9999px;
}

#container #openpoint .content {
	width: 100%;
	height: 160px;
	margin-top: 47px;
	clear: both;
}

#container #openpoint .content .text {
	line-height: 24px;
	margin-top: 15px;
	font-size: 15px;
	color: #333333;
    float: left;
}

#container #openpoint .content .img {
	background: url(../images/openpoint_img.png) no-repeat;
	width: 303px;
	height: 169px;
	float: right;
}

#container #lottery {
	background: url(../images/lottery.png) no-repeat;
	width: 815px;
	height: 102px;
	margin: 58px 62.5px 14px;
	text-indent: -9999px;
}

#container .preferential {
	height: 220px;
    padding: 36px 54px;
    border-bottom: 2px dotted #d7d7d7;
    clear: both;
}

#container .preferential.noline {
	border-bottom: none;
}

#container #preferential2,
#container #preferential4 {
	height: 170px;
}

#container #preferential3 {
	position: relative;
	height: 410px;
}

#container .preferential .circle {
	background-image: url(../images/circle1.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 240px;
    height: 216px;
	float: left;
}

#container #preferential2 .circle {
	background-image: url(../images/circle2.png);
    height: 167px;
}

#container #preferential3 .circle {
	background-image: url(../images/circle3.png);
	background-position: center 0;
    height: 171px;
}

#container #preferential4 .circle {
	background-image: url(../images/circle4.png);
    height: 170px;
}

#container .preferential .info {
	margin-left: 10px;
	float: left;
}

#container #preferential2 .info,
#container #preferential4 .info {
	margin-top: 13px;
}

#container .preferential .info .subtitle {
	font-size: 24px;
	font-weight: bold;
	color: #fa4100;
}

#container #preferential3 .info .subtitle {
	margin-top: 20px;
}

#container #preferential3 .info .unstyle {
	margin-top: 0;
}

#container #preferential3 .coffe {
	background: url(../images/coffe.png) no-repeat;
	position: absolute;
	z-index: 1;
	width: 164px;
	height: 114px;
    left: 610px;
	bottom: 35px;
}

#container .preferential .info .text {
	margin-top: 5px;
	line-height: 24px;
	font-size: 15px;
	color: #505050;
}

#container .preferential .info .link {
	margin-top: 5px;
}

#container .preferential .info .link a {
	background: url(../images/link_arrow.png) left center no-repeat;
	padding-left: 25px;
	line-height: 26px;
	font-size: 14px;
	color: #80179f;
	text-decoration: none;
	display:  block;
}

#container #bannerlink {
	background-color: #e7e7e7;
	height: 112px;
	clear: both;
}

#container #bannerlink .link {
	background: url(../images/link_arrow2.png) center left no-repeat;
	margin: 30px 48px;
    padding-left: 35px;
    font-size: 20px;
   	font-weight: bold;
   	color: #4f4f4f;
    float: left;
    text-decoration: none;
}

#container #bannerlink .link.laststyle {
	margin-top: 43px;
}

#container #footer {
	margin-top: 60px;
	font-size: 15px;
}

#container #footer .linkbar {
	background-color: #000;
	height: 24px;
	line-height: 24px;
	color: #fff;
    text-align: center;
}

#container #footer .linkbar a {
	margin: 0 6px;
	color: #fff;
	text-decoration: none;
}

#container #footer .copyright {
	background-color: #ffd300;
	height: 24px;
	line-height: 24px;
    text-align: center;
}

.popup {
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100%;
	display: none;
}

.popup .black {
	background-color: rgba(0, 0, 0, 0.9);
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.popup .content {
	background-color: #fff;
	position: absolute;
	z-index: 1;
}

.popup .content .close {
	background: url(../images/close.png) no-repeat;
	position: absolute;
    z-index: 2;
    width: 50px;
    height: 50px;
    right: 0;
    cursor: pointer;
}

/*#win .content {
	width: 800px;
    height: 376px;
    top: 50%;
    left: 50%;
    margin-top: -188px;
    margin-left: -400px;
}

#win .content .title {
	margin-top: 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

#win .content .subtitle {
	line-height: 32px;
	margin-top: 20px;
	font-size: 18px;
	text-align: center;
}

#win .content .list {
	line-height: 30px;
	margin: 20px 0 30px;
	color: #0047d9;
	font-size: 18px;
	text-align: center;
}

#win .content .list span {
	margin: 0 35px;
}*/

#skill .content {
	width: 800px;
    height: 362px;
    top: 50%;
    left: 50%;
    margin-top: -181px;
    margin-left: -400px;
}

#skill .content .title {
	margin-top: 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

#skill .content .list {
	line-height: 30px;
	margin: 30px 115px 0;
	font-size: 18px;
}

#skill .content .list p.twoline {
	text-indent: -1.4em;
    margin-left: 1.4em;
}

/*#promotion .content {
	width: 856px;
 	height: 468px;
 	top: 50%;
    left: 50%;
    margin-top: -234px;
    margin-left: -428px;
}

#promotion .content .photo {
 	background: url(../images/promotion.png) no-repeat;
 	width: 756px;
 	height: 368px;
    margin: 50px auto;
}*/