@charset "utf-8";

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
    overflow-x: hidden;
	background: rgb(215,239,244);
	font-family: "Microsoft JhengHei", "\5FAE\8EDF\6B63\9ED1\9AD4", Helvetica, Arial, Verdana, sans-serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
	font-size: 18px;
}

/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
  .i2Style{
	font:bold 18px;
	font-style:normal;
	color:#ffffff;
	background:#0763b3;
	border:2px solid #ffffff;
	text-shadow:0px -1px 1px #084d0c;
	box-shadow:0px 0px 7px #252b01;
	-moz-box-shadow:0px 0px 7px #252b01;
	-webkit-box-shadow:0px 0px 7px #252b01;
	border-radius:10px 12px 12px 12px;
	-moz-border-radius:10px 12px 12px 12px;
	-webkit-border-radius:10px 12px 12px 12px;
	width:100px;
	padding:6px;
	cursor:pointer;
	text-align: center;
}
.i2Style:active{
	cursor:pointer;
	position:relative;
	top:2px;
}

a > img{
    border: 0;
}
.scroll
{
    position: fixed;
    top: 0;
    left: 0;
}

.content{
	width: 13440px;
	height:972px;
}

#cloud1
{
	width: 13440px;
	height:972px;
}

#cloud2
{
	width: 6160px;
	height:972px;
}

.cloud{
	z-index:-2;
	position:fixed;
	top: 0;	
}

#clouds-logo img{
	position: fixed;
	z-index: 99;
}

#small-cloud{
	width:50px;
	left:80px;
	top:100px;
}

#medium-cloud{
	width:100px;	
	left:230px;
	top:40px;
}

#medium-cloud2{
	width:100px;	
	left:60px;
	top:180px;
}

#medium-cloud3{
	width:100px;	
	left:200px;
	top:190px;
}

#large-cloud{
	width:200px;	
	left:60px;
	top:180px;
}

.under
{
	position:absolute;
	z-index:-1;
}
.over
{
	position:absolute;
	z-index:-1;
}

a{
	text-decoration:none;
}

.logoleft
{
	 min-width:160px;
	 font-size:36px;
	 width:300px;
	 float:left;
	 position:relative;
	 position: fixed;
	 z-index: 999;
	 margin-top:-8px;
	 right: 30px;
 }
 
#logo2{
	min-width: 200px;
	width:270px;
	position: fixed;
	z-index: 99;
	left: 50px;
}
 
header
{
	 margin-right: 10px;
     margin-left: 10px;
	 width: 97.9166667%; 
}

header h1
{
	float:right;
	color:#FFF;
	font-size:43px;
}

.btn:hover{
	cursor:pointer;
}

h1{
	float:left;
	color: #FFF;
	font-size:43px;
	padding:20px 0 0 20px;
}

h2{
	color: white;
	margin: 200px 0 0 30%;
	font-size: 26px;
}

.title{
	width:1120px;
}

.title hr{
	width:85%;
	margin: 5px 0 0 30%;
}

.menu {
	list-style:none;
	padding-top:18px;
	margin: -25px 0 0 0;
	display: inline;
	position: fixed;
	z-index:99;
	min-width:800px;
	top: 10px;
	left: 32%;
}

.menu li{
	list-style:none;
	padding:0;
	display:inline;
}

.menu img{
	width: 180px;
	min-width: 160px;
}

.menu .large{
	min-width: 190px;
}

.daughter{
}

.main-content{
}

.answered-questions{
	color:#9bcb64;
}

.sub-menu{
	padding-top: 0px;
}

#upper {
	margin-left:90px;
	z-index: 99;
}

#lower {
	margin-top: -45px;
	z-index: 98;
}

#upper img, #lower img{
	margin-left:-30px;
}
	
a{
	text-decoration:none;
}

footer {
	margin-bottom: 0;
	left: 0px;
	height: 15px;
	background-color: #036;
	right: 0px;
	bottom: 0px;
	position: fixed;
	z-index:99;
	font-size: 10px;
	font-family: "Microsoft JhengHei", "\5FAE\8EDF\6B63\9ED1\9AD4", Helvetica, Arial, Verdana, sans-serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
footer a, .line{
	color:#FFF;
}


#home { 	
	top: 0;
	width: auto;
	position: absolute;
}
 
#home article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}

.content .background img{
	height: auto;
}

#home {
	min-height:1080px;
}

.plane{
	z-index:6; 
	margin-left: 30px;
}

.scroll-pane{
	width: 100%;
	height: 200px;
	overflow: auto;
}

#plane{
	position:fixed;
}

#plane-img{
	min-width: 200px;
}

#page1-center-img{
	min-width: 512px;
	min-height: 210px;	
}

#teen {
	min-height:1080px;
	top: 50px;	
}

.rainAnimate{
	background: url(../img/p2/p2_rain_3.png);
	background-repeat: repeat-x;
	-webkit-animation: rain 30s forwards;
	animation: rain 30s forwards;
}

.rainAnimateIE{
	background: url(../img/p2/p2_rain_3.png);
	background-repeat: repeat-x;
	background-position: 0% 100%;
}

.plane-indicator{
	vertical-align: middle;
	margin-right: 3px;
}

.colored-title{
	background-color: #165369;
	color: #fff;
	border-radius: 10px 12px 12px 12px;
	-moz-border-radius: 10px 12px 12px 12px;
	-webkit-border-radius: 10px 12px 12px 12px;
	border: 4px solid white;
	padding: 5px;
	text-align: center;
	margin-right: 5px;
}

.colored-title:hover{
	background-color: #fff;
	color: #165369;
	border-radius: 10px 12px 12px 12px;
	-moz-border-radius: 10px 12px 12px 12px;
	-webkit-border-radius: 10px 12px 12px 12px;
	border: 4px solid white;
	padding: 5px;
	text-align: center;
	margin-right: 5px;
}

@-webkit-keyframes rain {
    from{
        background-position:0 -3500px;
    }
    to{
        background-position:0 2500px;
    }
}

@keyframes rain {
    from{
        background-position:0 -3500px;
    }
    to{
        background-position:0 2500px;
    }
}

#page2-content{
	z-index:5;
}

#page2-content img{
	min-width:180px;
}

#page2-article {
	opacity: 0.95;
	z-index:10;
	background-color: #0e1428;
	height:800px;
	margin:1200px 0 0 0;
}


#test {
	min-height:1080px;
	top: 0;	
	position: absolute;
}

#page3-content{
	margin: 0 0 0 27%;
	z-index: 5;

}

#page3-content .btn{
	padding-top: 0px;
	width:160px;
	min-width: 120px;
	font-size: 18px;
}

#page3-content-img{
	min-width:600px;
	padding-left: 5px;
}

#page3-up-img{
	display:none;
	position:absolute;
	top:300px;
	right:100px;
}

#page3-down-img{
	margin-top:10px;
	display:none;
	position:absolute;
	top:330px;
	right:100px;
}

#page3-up-img,#page3-down-img:hover{
	cursor:pointer;
}

#page3-questions,#page3-questions-header{
	display:none;
	font-size: 1.3em;
	color: #FFF;
}

#page3-questions{
	margin-top:0 !important;

}

#page3-questions input,#page3-questions-header input{
	margin-left: 10%;
	width: 3.4em;
}

#page3-questions tr,#page3-questions-header tr{
	height: 48px;
}

#page3-questions td{
	
	vertical-align: top;
}

#page3-questions input:hover{
	cursor: pointer;
}

.page3-category{
	margin-left: 10%;
	width: 3.2em;
}

.page3-main{
	width: 640px;
	margin: -150px 0 0 200px;
	font-size: 1.1em;
	color: #FFF;
}

#page3-nav{
	font-size: 24px;
	width: 200px;
	position: absolute;
	left: 47%;
	top: 10px;
}

#page3-nav2{
	display: inline-block;
	font-size: 24px;
	width: 400px;
	height: 35px;
	position: fixed;
	left: 68%;
	bottom: 3%;
	color: white;
}

#page3-nav2 img{
	cursor: pointer;
	display: inline;
}

#page3-nav2 div{
	
	float:left;
}

#prevPage{
	background-image: url(../img/p3/p3_previous.png); background-size: cover; width:110px; height: 37px;
}

#prevPage:hover{
	background-image: url(../img/p3/p3_previous_2.png);
	cursor: pointer;
}

#nextPage{
	background-image: url(../img/p3/p3_next.png); background-size: cover; width:110px; height: 37px;
}

#nextPage:hover{
	background-image: url(../img/p3/p3_next_2.png);	cursor: pointer;
}

#completed{
	background-image: url(../img/p3/p3_completed.png); background-size: cover; width:110px; height: 37px;
}

#completed:hover{	
	background-image: url(../img/p3/p3_completed_2.png);	cursor: pointer;
}

#paging{
	cursor: default !important;
	color: white;
	margin-left:10px;
	background-color: #1A6BA3;
	border-radius:10px 12px 12px 12px;
	-moz-border-radius:10px 12px 12px 12px;
	-webkit-border-radius:10px 12px 12px 12px;
	border:4px solid white;
	text-align:center;
}

#reset{
	position: absolute;
	bottom:0;
    right: 20px;
	background-image: url(../img/p3/test.png); background-size: cover; width:110px; height: 37px;
}

#reset:hover{
	background-image: url(../img/p3/test_2.png);
	cursor: pointer;
}

#page3-result {
	opacity: 0.95;
	z-index:10;
	background-color: #0e1428;
	height:800px;
	margin:1200px 0 0 0;
}

#page3-result-content{
	font-size: 1.4em;
	color: #fff;
	margin:100px 0 0 400px;
}

#page3-result-exp{
	width: 960px;
	font-size: 1.8em;
}

#page3-question-wrapper,#page3-question-nano{
	height: 360px;
}

/* ROUNDED ONE */
.roundedOne {
	width: 28px;
	height: 28px;
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	margin: 20px auto;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	position: relative;
}

.roundedOne label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedOne label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background: #00bf00;

	background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
	background: linear-gradient(top, #00bf00 0%, #009400 100%);

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	top: 2px;
	left: 2px;

	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.roundedOne label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedOne input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

#page4-content,#page5-content,#page6-content{
	margin: 20px 0 0 26%;
	padding: 0 0 0 10px;
	z-index: 5;
	color:white;
	
	position:relative;
}

#page4-article{	
	position:absolute;
	z-index:10;
	background: #0e1428;
	height:800px;
	margin:1200px 0 0 0;
}

#page4-content *{
	position:relative;
	z-index:6;
}

#page4-article *{
	position:relative;
	z-index:10;
}

#page4-div-background *{	
	position:absolute;
	z-index:4;
}

#cure .title *{
	position:relative;
	z-index:3;
}

#page4-div-background{
	opacity:0.7;
	top: 300px;
	background: url(../img/p4/p4_path.png);
	background-size: cover;
}

@-webkit-keyframes milkyway {
    0% {width:0%}
    40% {width:0%}
    60% {width:50%;opacity: 0.3;}
    100% {width:100%;opacity: 0.7;}
}

@keyframes milkyway {
    0% {width:0%}
    40% {width:0%}
    60% {width:50%;opacity: 0.3;}
    100% {width:100%;opacity: 0.7;}
}

#page4-div-background2 img{
	position: absolute;
}

#page4-walk{
	opacity:1;
	position: absolute;
	top: 35%;
	left: 0;
	min-width:80px;
	z-index:5;
}

#page4-meds{
	position: absolute;
	top: 30%;
	left: 10%;
}

#page4-psy{
	position: absolute;
	top: 38%;
	left: 30%;
}

#page4-support{
	position: absolute;
	top: 80%;
	left: 55%;
}

#page5-content{
	line-height: 200%;
}

.page5-main{
	width: 720px !important; 
	line-height: 140%;
	margin: -150px 0 0 200px;
	background: rgba(27,84,94,0.8);
	border-radius: 8px;
	padding: 10px;
}

@media screen and (min-height: 0px){
    .page5-main,.page6-main{
		height: 350px !important; 
		}
	#message-content{
		font-size: 18px; 
	}
	.main-content{
		font-size: 18px;
	}
}
@media screen and (min-height: 900px){
    .page5-main,.page6-main{
		height: 500px !important; 
		}
	#message-content{
		font-size: 24px; 
		top: 15% !important;
	}
	#message-wrapper{
		top: 15% !important;
	}
	.main-content{
		font-size: 20px;
	}
}
@media screen and (min-height: 1000px){
    .page5-main,.page6-main{
		height: 600px !important; 
		}
	#message-content{
		font-size: 28px; 
	}
	.main-content{
		font-size: 24px;
	}
}

.activity-title{
	cursor: pointer;
	font-size: 24px;
}

#page5-activity-main .nano-content{
	margin-top: 65px !important; 
}
#page5-meeting-main .nano-content{
	margin-top: 65px !important; 
}

.page5-main b{
	margin: -10px 0 0 0px;
}

.page5-main div{
	font-size: 18px;
	margin: 10px 0 0 10px;
	line-height: 140%;
	max-width: 90%;
}

#page5-training-main{

}

.page5-training-img{
	width:500px;height:280px;border:2px solid;border-radius:5px;background: url('../img/p5/p5_blog_1.png');margin-left:10px;background-size:cover;margin-bottom:10px!important;
}

#page6-district{
	width: 150px;
}

.page6-main{
	float: right;
	min-width: 600px;
	max-width: 800px;
	width: 720px !important;
	position: absolute !important;
	left: 220px;
	top: 0px;
	line-height: 140%;
	background: rgba(27,84,94,0.8);
	border-radius: 8px;
}

#page6-hotline-img{
	margin:0 0 0 30px;
	width: 140px;
	position:absolute;
	right:230px;
	bottom:100px;
	z-index: 3;
}

.page6-table {
	margin: 10px 0 0 10px;
	border-style:hidden;
	font-size: 18px;
	overflow: auto;
}

.page6-main .nano-content{
	margin-top:50px;
}

.page6-table p{
	margin: 4px;
}

.page6-table td{
	padding:0px;
	text-align:left;
	margin-right: 10px;
}

.page6-table tr{
	height: 50px;
}

.page6-table tr:nth-child(even) {
    background-color: rgba(14,139,167,0.8);
}

#page6-background{
	width:1920px;position:absolute;top:250px;
}
#page6-cloud{
	width:1920px;position:absolute;left:-10px;bottom:10px;z-index:2;
}
#page6-hill{
	width:1920px;position:absolute;left:-30px;bottom:10px;z-index:1;
}

#page7-hill1{
	width:340px;position:absolute;left:-100px;bottom: 10px;z-index:5;
}
#page7-hill2{
	width:380px;position:absolute;left:310px;bottom: 30px;z-index:5;
}
#page7-sun{
	width:200px;position:absolute;left:150px;bottom: 30px;z-index:3;
}
#page7-hill3{
	width:340px;position:absolute;left: 610px;bottom: -40px;z-index:5;
}
#page7-hill4{
	width:380px;position:absolute;left: 950px;bottom: -40px;z-index:5;
}
#page7-hill5{
	width:340px;position:absolute;left: 1260px;bottom: -20px;z-index:5;
}
#page7-char1{
	width:120px;position:absolute;left: 450px;bottom: 250px;z-index:11;
}
#page7-char2{
	width:120px;position:absolute;left: 730px;bottom: 210px;z-index:5;
}
#page7-char3{
	width:450px;position:absolute;left: 1050px;bottom: 150px;z-index:5;
}
#page7-tag1{
	width:200px;position:absolute;left: 410px;bottom: 180px;z-index:11;
}
#page7-tag2{
	width:200px;position:absolute;left: 700px;bottom: 140px;z-index:8;
}
#page7-tag3{
	width:268px;position:absolute;left: 1140px;bottom: 40px;z-index:8;
}
#page7-tag4{
	width:200px;position:absolute;left: 1330px;bottom: 30px;z-index:8;
}
#page7-rainbow{
	width:800px;position:absolute;left:-50px;top:-50px;z-index:10;opacity:0;
}
#page7-cloud{
	width:1920px;position:absolute;left:-10px;bottom:10px;z-index:5;
}

#page7-text{
	font-size:24px;position:absolute;left:26%;top: 270px;z-index:15;color:white;
}

#page7-article {
	position:absolute;
	opacity: 1;
	z-index:12;
	background-color: #0e1428;
	height:800px;
	margin:1200px 0 0 0;
}

#page7-article *{
	position:relative;
	z-index:10;
}

#page7-content-img{
	overflow-y: auto;
}

.cat1,.cat2,.cat3,.cat4{
	opacity:0;
}

#page8-canvas{
	position: relative;
	left: 200px;
	top: -130px;
	z-index:8;
}

#page8-canvas-img{
	position: relative;
	left: 45px;
	color:#036;
	top: 18px;
}

#page8-canvas-img iframe{
	margin-top: -30px;
}

#page8-content{
	width: 60%;
	height: 50%;
	margin: 20px 0 0 22%;
	padding: 0 0 0 10px;
	color: white;
}

#page8-menu{
	height: 100px;
	color: #fff;
	position: relative;
	z-index: 8;
	font-size: 18px;
}

#page8-background-rainbow{
	width:600px;position: absolute;left: -50px;top: -130px;opacity:0;
    bottom:0px;
}
#page8-background-rainbow2{
	width:800px;position: absolute;left: 1200px;top: 0px;opacity:0;
    bottom:0px;
}

#page8-background-hill1{
	width:480px;position: absolute;left: -80px;bottom:10px;
    bottom:0px;
}
#page8-background-hill2{
	width:300px;position: absolute;right: 20px;bottom:10px;z-index:3;
    bottom:0px;
}
#page8-background-char{
	width:100px;position:absolute;left:70px;bottom:120px;z-index:10;opacity:0;bottom:0px;
}
#page8-background-char2{
	width:680px;position:absolute;left:200px;bottom:20px;z-index:7;opacity:0;bottom:0px;
}
#page8-background-plane{
	width:250px;position:absolute;right:120px;bottom:400px;z-index:7;opacity:0;
}
#page8-background-grass1,#page8-background-grass2{
	width:1810px;position:absolute;bottom:-10px;z-index:2;opacity:1;
    bottom:0px;
}

#message{
	position: fixed; display:none; background-color: rgba(17,17,47,0.7);z-index:9999;width:100%;height:100%;margin:-10px; 
}

#message-wrapper{
	position: fixed; 
	left: 30%; 
	top: 17%;
	width: 47%;
	height: 32%;	
	padding-right: 30px;
}

#message-content{
	position: fixed; 
	left: 30%; 
	top: 17%;
	width: 48%;
	height: 32%;
	color:white;
}

#message-char{
	height: auto;position: fixed; left:30%; top:56%;
}

#cure
{
	  top: 0;		
	  position: absolute;
	  background: url(../img/p4/p4_starnight.png) no-repeat;
	  background-size: cover;
}

#event
{
	  top: 0;		
	  position: absolute;
}

#district
{	
	  top: 0;	
	  position: absolute;
}

#share
{	 
	  top: 0;	
	  position: absolute;
}

#contact
{
	  top: 0;	
	  position: absolute;
}

#about { 
	  background: 50% 0 repeat fixed; min-height: 1000px; 
	  height: 1000px; 
	  margin: 0 auto; 
	  width: 100%; 
	  max-width: 1920px; 
	  position: relative; 
	  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
	  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
 
#about article { 
	  height: 458px; 
	  position: absolute; 
	  text-align: center; 
	  top: 150px; 
	  width: 100%; 
}
	
.page5-main div a
{
	cursor:pointer;
	font-weight: bold;
}


 /* CSS Document 
*/