@charset "utf-8";

.content{
	background-color: #FFFFFF;
	max-width: 1000px;
	margin: 0 auto;
}
.dreamtop{
	background-image: url(../images/dream_r1.png);
	max-width: 100%;
}
.topwrapper{
	max-width: 680px;
	margin: 0 auto;
	padding: 30px 20px 20px;
	text-align: justify;
}
.topwrapper .title{
	font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	display: inline-table;
	line-height: 30px;
	color: #044B80;
}
.topwrapper .text{
	font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
	display: inline-table;
	line-height: 30px;
}
.topwrapper .text strong{
    font-weight: bolder;
    color: #FF0066;
    display: inline;
}
.presentbt{
	padding: 10px 0px;
	cursor: pointer;
	margin: 0 auto;
	max-width: 150px;
}
.dreamqa{
	max-width: 700px;
	padding: 10px 20px 20px 20px;
	margin: 0 auto;
}
.dreamqa .question{
	font-size: 25px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	text-align: center;
	color: #FF0066;
	padding-bottom: 20px;
}
.dreamqa .title{
	font-size: 18px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	color: #000000;
	line-height: 25px;
}
.dreamqa .answer{
	color: #000000;
	padding: 20px;
}
.dreamqa .answer p{
	padding-right: 60px;
	padding-bottom: 20px;
	display: inline-table;
}
input[type=checkbox].css-checkbox {
	position:absolute; 
	z-index:-1000; 
	left:-1000px; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
	height:1px; 
	width:1px; 
	margin:-1px; 
	padding:0; 
	border:0;
	}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:19px;
	height:14px; 
	display:inline-block;
	line-height:19px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size: 18px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -14px;
}
label.css-label {
	background-image:url(../images/checkbox.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dreamqa .comfirm{
	width: 220px;
	height: 40px;
	border-radius: 5px;
	background-color: #8E8E8E;
	margin: 0 auto;
	box-shadow:rgba(251, 251, 251, 0.6) 2px 2px 2px, rgba(251, 251, 251, 0.4) 4px 4px 6px, rgba(50,50,50, 0.4) 3px 3px 8px;
	text-align: center;
}
.dreamqa .comfirm a{
	font-size: 18px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	color: #FFF;
    line-height:40px;
    letter-spacing: 30px;
    margin-left:25px;
}
.dreamqa .comfirm a:hover{
	color: #000;
	cursor: pointer;
}

.dreambtn{
    display: none;
	padding-bottom: 60px;
}

#view_overlay {
  background:rgba(0, 0, 0, 0.701961);
  display:none;
  height:100%;
  left:0;
  overflow:auto;
  position:fixed;
  top:0;
  width:100%;
  z-index:9999;
}
#view_box {
  margin:4% auto;
  position:relative;
  width:679px;
  z-index:10;
}
#view_overlay .mask {
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
}
#view_box .inner {
  padding:20px;
  background:url(../images/present_r3.png) 50% no-repeat;
  width: 765px;
  height:465px;
  text-indent:-9999px;
}
#view_box .close {
  background:url(../images/close.png);
  cursor:pointer;
  height:65px;
  position:absolute;
  right:-110px;
  text-indent:-9999px;
  top:0px;
  width:60px;
}
#view_box .close:hover, #view_box .close:focus {
    text-decoration: none;
    background-position: 0 -65px;
}
#view_box .date {
  color:#ED6099;
  font-size:12px;
  padding:4px;
}
#view_box .inner h1 {
  color:#525252;
  font-size:26px;
  margin:0 0 5px;
}

.formbtn {
	width: 220px;
	height: 40px;
	border-radius: 5px;
	background-color: #FF3366;
	margin: 0 auto;
	box-shadow:rgba(251, 251, 251, 0.6) 2px 2px 2px, rgba(251, 251, 251, 0.4) 4px 4px 6px, rgba(50,50,50, 0.4) 3px 3px 8px;
	text-align: center;
	line-height: 40px;
}
.formbtn a{
	color: #FFF;
}
.formbtn a:hover{
	color: #000;
	cursor: pointer;
}

.dreamform{
	max-width: 600px;
	margin: 0 auto;
	padding-bottom: 50px;
}
.special{
	font-size: 13px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
	line-height: 30px;
	color: #333;
	overflow-x:hidden;
    overflow-y:auto;
    height: 250px;
    padding:10px 20px;
  border:dotted 1px #666;
}
.special strong{
	font-size: 15px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	line-height: 30px;
	color: #333;
	text-align: center;
}
.form-text{
    font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	color: #FF0000;
	text-align: center;
}

.form-title{
	font-size: 25px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	text-align: center;
	color: #FF0066;
	padding-bottom: 20px;
	padding-top: 20px;
}

/*感謝頁=====================*/
.thanks-wrapper {
  background-color:#FFFFFF;
  margin:0 auto;
  max-width: 700px;
}
.thanks-wrapper .title {
  color:#489BDD;
  font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif, 微軟正黑體;
  font-size:18px;
  font-weight:bolder;
  line-height:30px;
  padding-top:20px;
  text-align:center;
}
.thanks-wrapper .result {
  background-color:#FFFFFF;
  border-radius:5px;
  box-shadow:rgba(251, 251, 251, 0.6) 2px 2px 2px, rgba(251, 251, 251, 0.4) 2px 2px 3px, rgba(50, 50, 50, 0.4) 3px 3px 2px;
  font-weight:bolder;
  height:40px;
  line-height:40px;
  margin:15px auto 0;
  text-align:center;
  max-width:650px;
}
.thanks-wrapper .text {
  display:inline-table;
  font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif, 微軟正黑體;
  font-size:16px;
  font-weight:normal;
  line-height:30px;
}
.thanks-wrapper .warn-wrapper {
  margin:0 auto;
  padding:20px 50px;
}
.thanks-wrapper .warn {
  max-width:650px;
}
.thanks-wrapper .warntitle {
  position:relative;
  margin:0 auto;
  width:135px;
}
.thanks-wrapper .warntext {
  font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif, 微軟正黑體;
  font-size:16px;
  font-weight:normal;
  line-height:30px;
}

.thanks-title{
	font-size: 28px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	text-align: center;
	color: #333;
	padding-top: 20px;
}

.thanks-btn{
    display: block;
  width: 189px;
  height: 50px;
  background: url(../images/thanks_btn.png);
  background-image: url(../images/thanks_btn.png);
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  border: 0;
  text-indent: -9999px;
  outline: none;
  margin: 0 auto;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 20px;
}

.thanks-btn:hover, .thanks-btn:focus {
    text-decoration: none;
    background-position: 0 -47px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

/*投資未來=====================*/

.future{
	margin: 0 auto;
	/*margin-top: 40%;*/
    max-width: 730px;
	background-color: #FFF;
	padding-bottom: 30px;
}
.future .title{
	font-size: 28px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	text-align: center;
	color: #044B7F;
	padding: 20px 15px;
}
.future .text{
	font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
	display: inline-table;
	line-height: 30px;
	padding: 20px 15px;
}
.future img{
	width: 100%;
}
.future .subtitle{
	font-size: 23px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	text-align: left;
	color: #677ABE;
	padding: 20px 15px;
}
.future .notice{
	border-radius:10px;
	background-color: #DFF0EA;
}
.future .notice p{
	font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
	display: inline-table;
	line-height: 30px;
	padding: 25px 25px;
}
.future .notice small{
	font-size: 13px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
}
.future .notice strong{
	font-weight: bolder;
}
.future .notice img{
	max-width: 644px;
	padding: 20px 0px;
	text-align: center;
}

/*文章頁=====================*/
.ability-wrapper {
	background-color: #FFF;
	padding: 20px 10px;
	margin-bottom: 50px;
	margin: 0 auto;
	/*margin-top: 40%;*/
    max-width: 1000px;
}

.nav-menu {
	display: inline-table;
	float: left;
	position: relative;
	max-width: 320px;
}
.nav-menu .title {
	width: 290px;
	background-color: #FF0066;
	text-align: center;
	padding: 5px;
	color: #FFF;
}
.nav-menu li{
	list-style-type: none;
	padding:10px 0px; 
}
.nav-menu a{
   	font-size: 18px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	color: #333;
	padding: 38px 5px;
	width: 180px;
	display: inline-block;
}
.nav-menu a:hover{
	color: #24B9E3;
}
.nav-menu li img{
	display: inline-block;
	padding: 5px;
	float: left;
}
.nav-menu .line{
	width: 300px;
	height: 1px;
	background:#666;
}
.ability-content{
	display: inline-table;
	position: relative;
}
.ability-content .title{
	font-size: 28px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	color: #B2364E;
}
.ability-content .editor{
	font-size: 18px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	color: #666666;
	padding-top: 10px;
}
.ability-content img{
	padding: 10px 0px;
	max-width: 650px;
}

.fb-like{
	padding: 10px 0px;
	float: right;
}
.ability-text{
	padding-top: 10px;
}
.ability-text p{
    font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
	line-height: 30px;
	max-width: 650px;
}
.ability-text h3{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	color: #044B80;
	padding: 20px 0px;
	max-width: 650px;
	font-size: 21px;
}
.ability-text h4{
    font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: normal;
	line-height: 30px;
	max-width: 600px;
	padding-left: 22px;
}
.ability-text h5{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	color: #FF8000;
	padding: 20px 0px;
	max-width: 650px;
	font-size: 18px;
}

/*得獎公佈=====================*/
.award-wrapper{
    max-width: 100%;
	background-color: #FFF;
	margin:0 auto;
	padding-bottom:20px;
}
.award-title{
	font-size: 20px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	text-align: center;
	color: #333;
	padding: 20px 0px;
}
.award {
	border-radius:10px;
	border: dotted 1px #666;
	max-width: 700px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.award .attention {
	padding: 20px 0px;
}

.award .attention ul{
	list-style: disc;
	padding: 0px 40px;
}
.award .attention ul li{
	font-size: 15px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	color: #000000;
	line-height: 25px;
	padding-top: 10px;
}
.award .attention ul li a{
	font-size: 15px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	color: #044B80;
	line-height: 25px;
	padding-top: 10px;
}
.award .attention ul li a:hover{
	color: #FF0066;
}
.prize-title{
	font-size: 24px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,"微軟正黑體";
	font-weight: bolder;
	text-align: center;
	color: #044B7F;
	padding: 20px 0px;
}
.prize-content{
	max-width: 600px;
	margin: 0 auto;
}
.prize{
	text-align: center;
}
.prize-2nd{
	display: inline-block;
	margin: 0 auto;
	margin-top: 20px;
}
.prizelist{
	display: inline-block;
	padding: 0 20px;
}

/*Media Queries------------------*/
@media screen and (min-width: 989px) and (max-width: 1024px) {
    .future .notice img{
	max-width: 95%;
	padding: 20px 10px;
	text-align: center;
    }	
}

@media screen and (min-width: 786px) and (max-width: 989px)  {
	.content{
	background-color: #FFFFFF;
	max-width: 768px;
	margin: 0 auto;
    }
    #view_box {
	  width:447px;
	}
	#view_box .inner {
	  padding:20px;
	  background:url(../images/present_r3_c1.png) 50% no-repeat;
	  width: 447px;
	  height:711px;
	  text-indent:-9999px;
	}
	#view_box .close {
	  right:-45px;
	}
	.nav-menu {
	display: none;
    }
}

@media screen and (min-width: 600px) and (max-width: 786px){
    .content{
	background-color: #FFFFFF;
	max-width: 600px;
	margin: 0 auto;
    }
    #view_box {
	  width:447px;
	}
	#view_box .inner {
	  padding:20px;
	  background:url(../images/present_r3_c1.png) 50% no-repeat;
	  width: 447px;
	  height:711px;
	  text-indent:-9999px;
	}
	#view_box .close {
	  right:-45px;
	}
	.nav-menu {
	display: none;
    }
    .dreambottom .warn-wrapper{
    margin: 0 auto;
    margin-left: 180px;
    }
    .award{
        margin:0 10px;
    }
}

@media screen and (min-width: 480px) and (max-width: 600px) {
    .content{
	background-color: #FFFFFF;
	max-width: 480px;
	margin: 0 auto;
    }
    #view_box {
	  width:447px;
	}
	#view_box .inner {
	  padding:20px;
	  background:url(../images/present_r3_c1.png) 50% no-repeat;
	  width: 447px;
	  height:711px;
	  text-indent:-9999px;
	}
	#view_box .close {
	  right:-45px;
	}
	.nav-menu {
	display: none;
    }
    .ability-content{
	display: inline;
    }
    .prize-content{
	max-width: 250px;
	margin: 0 auto;
    }
    .award{
        margin:0 10px;
    }
}
@media screen and (min-width: 370px) and (max-width: 480px) {
	.content{
	background-color: #FFFFFF;
	max-width: 370px;
	margin: 0 auto;
    }
    #view_box {
	  width:280px;
	}
	#view_box .inner {
	  padding:20px;
	  background:url(../images/present_r3_c2.png) 50% no-repeat;
	  width: 280px;
	  height:1005px;
	  text-indent:-9999px;
	}
	#view_box .close {
	  right:-45px;
	}
	.nav-menu {
	display: none;
    }
    .prize-content{
	max-width: 250px;
	margin: 0 auto;
    }
    .award{
        margin:0 10px;
    }
}
@media screen and (min-width: 300px) and (max-width: 370px)  {
	.content{
	background-color: #FFFFFF;
	max-width: 320px;
	margin: 0 auto;
    }
    #view_box {
	  width:270px;
	}
	#view_box .inner {
	  padding:20px 0px;
	  background:url(../images/present_r3_c2.png) 50% no-repeat;
	  width: 280px;
	  height:1005px;
	  text-indent:-9999px;
	}
	#view_box .close {
	  right:-35px;
	}
	.nav-menu {
	display: none;
    }
    .prize-content{
	max-width: 250px;
	margin: 0 auto;
    }
    .award{
        margin:0 10px;
    }
}