﻿@charset "utf-8";
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
img {
  border: 0px
}

.menu-bar {
	background-color: #00416b;
	height: 50px;
	width: 100%;
	text-align: right;
}
.menu-box {
	width: auto;
	padding-top: 14px;
	display: inline-block;
	margin-right: 10px;
	margin-left: 10px;
}
.menu-line {
	width: auto;
	padding-top: 14px;
	display: inline-block;
	font-family: "微軟正黑體", Arial;
	font-size: 17px;
	color: #FFF;
}
.menu-links {
	font-family: "微軟正黑體", Arial;
	font-size: 19px;
	color: #FFF;
	word-spacing: 1px;
	cursor:pointer;
}
a.menu-links:hover {
	color: #3cc7ff;
	word-spacing: 1px;
}
.menu-icon {
    width: auto;
	margin-right: 10px;
	margin-left: 10px;
	/*display: inline-block;
	float: right;*/
	margin-top: 8px;
}
.container {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
}
.container-box {
	width: 100%;
}
.top_section {
	background-image: url("../images/t_background-left.png"),url("../images/t_background-right.png"), url("../images/t_cloud.jpg"),url("../images/t_background.jpg");
	background-repeat: no-repeat,no-repeat,repeat-x,repeat-x;
	background-position: left 0px bottom 0px,right 0px bottom 0px,top,top;
	background-size: auto,auto,auto,contain;
	text-align: center;
}
.top_title {
	width: 290px;
	padding-top: 10px;
	padding-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
}
.top_t-box {
	width: auto;
	padding-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.top_text {
	font-family: "微軟正黑體", Arial;
	font-size: 20px;
	line-height: 30px;
	color: #1d479c;
}
.top_btn-round {
	border-radius: 100px;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	font-family: "微軟正黑體", Arial;
	font-size: 20px;
	color: #fff;
	background-color: #df3434;
	border: 1px solid #df3434;
	display: inline-block;
	line-height: 100px;
	margin-top: 20px;
}
a.top_btn-round:hover {
	color: #df3434;
	background-color: #fff;
	border: 1px solid #df3434;
}
.depot-phone {
	width: auto;
	padding-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	display: none;
}
.photo_section {
	background-image: url("../images/bg_sea.jpg");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
}
.photo_box {
	width: 16.5%;
	margin: 10px;
	display: inline-block;
	text-align: center;
}
.photo_style {
	border-radius: 100%;
	border: 6px solid #FFF;
	box-shadow: 3px 3px 0px rgba(0,86,118,0.75);
	margin-bottom: 10px;
}
.photo_text {
	font-family: "微軟正黑體", Arial;
	font-size: 21px;
	font-weight: 500;
	color: #00213e;
	text-shadow:0px 0px 10px rgba(255,255,255,1);
	text-shadow:0px 0px 4px rgba(255,255,255,1);
	text-shadow:0px 0px 2px rgba(255,255,255,1);
}
a.photo_text:hover {
	color: #df3434;
}
.travel_section {
	background-color: #eaeaea;
	text-align: center;
	padding-bottom: 20px;
}
.travel_title {
	font-family: "微軟正黑體", Arial;
	font-size: 26px;
	font-weight: 700;
	color: #00213e;
	display: inline-block;
	width: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}
.travel_line {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #f8b62c;
	width: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}
.travel_links {
	border-radius: 10px;
	text-align: center;
	font-family: "微軟正黑體", Arial;
	font-size: 26px;
	color: #FFF;
	background-color: #00a0f3;
	border: 1px solid #00a0f3;
	width: 23%;
	display: inline-block;
	line-height: 60px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
	box-shadow: 3px 3px 0px rgba(0,86,118,0.75);
}
a.travel_links:hover {
	color: #00a0f3;
	background-color: #fff;
}
.travel_links-2 {
	border-radius: 10px;
	text-align: center;
	font-family: "微軟正黑體", Arial;
	font-size: 26px;
	color: #FFF;
	background-color: #00baff;
	border: 1px solid #00baff;
	width: 23%;
	display: inline-block;
	line-height: 60px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
	box-shadow: 3px 3px 0px rgba(0,86,118,0.75);
}
a.travel_links-2:hover {
	color: #00baff;
	background-color: #fff;
}
.logo_section {
	background-color: #fff;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
}
.logo_box {
	width: auto;
	margin-right: 10px;
	margin-left: 10px;
	display: inline-block;
}


/*回到最上按鈕*/
#back-top {
    position: fixed;
    bottom: 10px;
    right:10px;
    background:url(../images/top.png) no-repeat;
    background-size:32px 31px;
    width:32px;
    height:31px;
    opacity:0.85;
}
#back-top a {
    display:block;
    width:32px;
    height:31px;
    text-align:center;
}
#back-top span {
    display: block;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}

/*20161014-小屋新增－START*/
.loading{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    
}
.loading .img{
    position: fixed;
    width: 246px;
    height: 246px;
    top: 50%;
    left: 50%;
    margin-top: -123px;
    margin-left: -123px;
    text-align: center;
}
.loading_game{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}
.page_bg{margin-top: 60px;}
#quiz01 {display:none;}
#quiz02 {display:none;}
#quiz03 {display:none;}
#quiz_result {display:none;}
#share_data {display:none;}
#iframe_ShareData {height: 770px;}
#final_Gift {display:none;}
#gotcha_text, #nowin_text {display:none;}
@media (max-width:768px){
    .page_bg{margin-top: 50px;}
}
@media (max-width:820px){
    #iframe_ShareData {height: 1000px;}
}
@media (max-width:480px){
    #iframe_ShareData {height: 1100px;}
}
.page_rule{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9990;
    margin-top: 70px;
    display: none;
}
.page_rule_bg{
	width:90%;
    height:80%;
	margin-right: auto;
	margin-left: auto;
	border-radius: 15px;
	background-color:  rgba(255,255,255,0.9);
    min-height: 420px;
}
#iframe_rule{
    width:100%;
    height:90%;
    margin-top: 30px;
}
.close_img{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 5px;
    left: 94%;
    margin-top: -35px;
    margin-left: -35px;
    text-align: center;
}
@media (max-width:768px){
    .page_rule{margin-top: 60px;}
    .close_img{
        width: 60px;
        height: 60px;
        top: 8px;
        left: 93%;
        margin-top: -30px;
        margin-left: -30px;
    }
}
@media (max-width:480px){
    .close_img{
        left: 92%;
    }
}
/*20161014-小屋新增－END*/


@media (max-width:1280px){
.container {
	width: 980px;
}
}

@media (max-width:1000px){
.container {
	width: 760px;
}
.photo_text {
	font-size: 18px;
}
}

@media (max-width:900px){
}

@media (max-width:768px){
.container {
	width: 90%;
}
.photo_section {
	background-image: url("../images/bg_sea-640.jpg");
}
.photo_box {
	width: 40%;
	margin: 20px;
}
.photo_text {
	font-size: 22px;
}
.travel_links {
	width: 31%;
	font-size: 24px;
	line-height: 50px;
}
.travel_links-2 {
	width: 31%;
	font-size: 24px;
	line-height: 50px;
}
}

@media screen and (max-width: 640px) {
.top_section {
	background-image: url("../images/t_background-left.png"),url("../images/t_background-right.png"),url("../images/t_cloud-phone.jpg"),url("../images/t_background.jpg");
	background-repeat: no-repeat;
	background-position: left -310px bottom 0px,right 0px bottom 0px,top,top;
	background-size: auto,auto,auto,cover;
	text-align: center;
}
.depot-phone {
	display: block;
}
.top_btn-round {
	font-size: 30px;
}
.photo_box {
	width: 75%;
}
.photo_text {
	font-size: 26px;
}
.travel_links {
	width: 45%;
}
.travel_links-2 {
	width: 45%;
}
}

@media screen and (max-width: 480px) {
}
