html, body {
	height: 100%;
}
body {
   font-size: 14px;
	font-family: Arial, 微軟正黑體;
	background-color: #84ccc9;
}
* {
	box-sizing: border-box;
}
a {
   text-decoration: none;
}
.img {
   display: block;
}
#PageB, #PageC, #PageD ,#PageE, #PageF {
   display: none;
   position: relative;
   z-index: 1;
}
/*fonts*/
@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?4vizwi');
    src:    url('../fonts/icomoon.eot?4vizwi#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?4vizwi') format('truetype'),
        url('../fonts/icomoon.woff?4vizwi') format('woff'),
        url('../fonts/icomoon.svg?4vizwi#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-about:before {
    content: "\e900";
}
.icon-album:before {
    content: "\e901";
}
.icon-album2:before {
    content: "\e902";
}
.icon-award:before {
    content: "\e903";
}
.icon-facebook:before {
    content: "\e904";
}
.icon-heart:before {
    content: "\e905";
}
.icon-home:before {
    content: "\e906";
}
.icon-line:before {
    content: "\e907";
}
.icon-method:before {
    content: "\e908";
}
.icon-replay:before {
    content: "\e909";
}
.icon-search:before {
    content: "\e90a";
}
.icon-weather:before {
    content: "\e90b";
}
.icon-home,
.icon-method,
.icon-award,
.icon-about,
.icon-album,
.icon-weather {
   font-size: 25px;
   color: #53a19e;
}
.icon-search {
   font-size: 25px;
   color: #54a19e;
}


.glyphicon {
   position: relative;
   z-index: 9;
   top: 5px;
   display: inline-block;
   /*line-height: 1;*/
   margin-right: 5px;
}
.glyphicon-btn {
   position: relative;
   z-index: 9;
   margin-right: 5px;
   top: 1px;
   font-size: 20px;
}

/**/
.wrapper {
   display: flex;
}
.content {
   position: relative;
   width: 100%;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}
.hamburger-menu,
.logo-Kaishii {
   position: absolute;
   z-index: 10;
   display: block;
   font-size: 3em;
   color: #444;
   width: 40px;
   height: 40px;
}
.hamburger-menu {
	top: 20px;
	left: 20px;
	cursor: pointer;
	transform: translate3d(0, 0, 0);
	transition: transform .4s;
}
.logo-Kaishii {
   width: 40px;
   height: 40px;
	top: 20px;
	right: 20px;
}
.logo-cancel {
   position: absolute;
   z-index: 25;
   top: 20px;
   left: 20px;
   cursor: pointer;
}




#slide-menu {
   display: none;
   width: 300px;
   height: 100%;
   background: rgba(0,0,0,0.85);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 20;
}
#slide-menu ul {
   margin-top: 80px;
}
#slide-menu li {
   width: 100%;
   padding: 15px 0 15px 20px;
   list-style-type: none;
}
#slide-menu li:last-child {
   padding: 15px 0 30px 20px;
}
#slide-menu li a {
   color: #fff;
   font-size: 18px;
}
#slide-menu .glyphicon {
   margin-right: 15px;
}
.porfolio {
   font-size: 12px;
}


/* PageA */

.bg-mo {
	width: 100%;
	position: fixed;
   bottom: 0;
   left: 0;
   z-index: -1;
}
#PageA .container{
   width: 100%;
	position: relative;
	z-index: 3;
   text-align: center;
}
.PageA-logo {
   width: 44%;
   margin: 20px 28% 0;
}
.PageA-photos {
   width: 100%;
   margin: -10px 0 -15px;
}
.btn {
   width: 150px;
   padding: 13px;
   cursor: pointer;
   border: 0;
   border-radius: 5px;
   color: #396e34;
   font-size: 18px;
   font-weight: 700;
   font-family: Arial, 微軟正黑體, sans-serif;
   margin: 20px auto;
   display: block;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
   background: rgb(255,255,255); /* Old browsers */
   background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
#PageA p {
   color: #fff;
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 10px;
} 
.sponsor {
   display: block;
   font-size: 12px;
   color: #fff;
   margin-top: -10px;
}

/* PageB */

#PageB .container,
#PageC .container,
#PageD .container,
#PageE .container,
#PageF .container,
#PageG .container,
#about .container,
#weather .container,
#vote .container,
#form .container,
.fixedbar .container,
#album .container,
#method .container,
#award .container {
   width: 90%;
   margin: 0 5%;
   position: relative;
   z-index: 2;
   text-align: center;
   padding-top: 88px;
   font-family: Arial;
}
#logo-header {
   width: 150px;
   height: 48px;
   position: absolute;
   top: 15px;
   left: 50%;
   margin-left: -75px;
   z-index: 10;
}
.progress {
   width: 60%;
   margin: -15px 20% 10px;
}
.polaroid-area {
   position: relative;
}
.polaroid {
   width: 100%;
   position: relative;
}
.polaroid-photo {
   position: absolute;
   width: 90%;
   top: 5%;
   left: 5%;
}
.btn-area {
   width: 50%;
   float: left;
   text-align: center;
}
.clear {
   clear: both;
}

/* PageC */

.filter-area {
   width: 100%;
   background: rgba(65,113,111,0.9);
   position: relative;
   z-index: 5;
   top: -70px;
}
.filter-style {
   width: 25%;
   float: left;
   color: #fff;
   text-align: center;
   padding: 4% 2%;
   font-family: Arial;
}
.filter-style img {
   width: 100%;
   display: block;
   margin-bottom: 10px;
}
#PageC .btn-area {
   margin-top: -70px;
}

/* PageD */

.arrow-left,
.arrow-right {
   display: block;
   position: absolute;
   z-index: 8;
}
.arrow-left {
   top: 40%;
   left: -20px;
}
.arrow-right {
   top: 40%;
   right: -20px;
}

/* PageE */

#PageE .keyin-area:last-child {
   text-align: right;
}
.message {
   width: 100%;
   height: 34px;
   border: 0;
   border-radius: 5px;
   background-color: #fff;
   font-size: 14px;
   color: #313131;
   padding: 0 10px;
   margin-top: 20px;
}

/* PageF */

.keyin-area {
   margin-top: 20px;
   float: left;
   text-align: left;
}
.dropdown {
   width: 100%;
   background-color: #fff;
   color: #313131;
   border: 0;
   border-radius: 10px;
   height: 34px;
   padding: 0 10px;
}

/* PageG */

.status {
   text-align: center;
   margin-bottom: 25px;
}
.status span {
   background-color: #a6dcda;
   color: #54a19e;
   font-size: 14px;
   border-radius: 5px;
   padding: 10px;
   font-weight: 700;
   font-family: Arial;
}
#PageG .btn,
#vote .btn,
#btn-fbshare,
#btn-lineshare {
   width: 150px;
   padding: 10px 13px 13px;
}
#btn-fbshare,
#btn-lineshare,
.btn-vote {
   cursor: pointer;
   border: 0;
   border-radius: 5px;
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   font-family: Arial, 微軟正黑體, sans-serif;
   text-align: center;
   margin: 20px auto 0;
   display: block; 
}
#btn-fbshare {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6a81bb+0,3f558f+100 */
   background: rgb(106,129,187); /* Old browsers */
   background: -moz-linear-gradient(top,  rgb(106,129,187) 0%, rgb(63,85,143) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top,  rgb(106,129,187) 0%,rgb(63,85,143) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom,  rgb(106,129,187) 0%,rgb(63,85,143) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a81bb', endColorstr='#3f558f',GradientType=0 ); /* IE6-9 */
}
#btn-lineshare {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5acf31+0,2fa305+100 */
   background: rgb(90,207,49); /* Old browsers */
   background: -moz-linear-gradient(top,  rgb(90,207,49) 0%, rgb(47,163,5) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top,  rgb(90,207,49) 0%,rgb(47,163,5) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom,  rgb(90,207,49) 0%,rgb(47,163,5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5acf31', endColorstr='#2fa305',GradientType=0 ); /* IE6-9 */
}
/* about.html */

.about {
   width: 90%;
   margin: 0 5%;
}
#about .container .btn {
   margin-top: -5px;
}

/* weather.html */

.weather-logo {
   width: 60%;
   margin: 0 20%;
}
#weather .container {
   text-align: left;
}
#weather .container p {
   line-height: 20px;
   margin: 20px 0;
   color: #313131;
   font-size: 14px;
}
#weather .btn-area img {
   width: 90%;
   margin: 0 5%;
}

/* vote.html */

.vote-status {
   text-align: center;
   margin: -15px 0 10px;
   background: transparent;
   color: #de3939;
   font-size: 20px;
   font-weight: 700;
}
.btn-vote {
   width: 90%;
   padding: 10px 13px 13px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e86363+0,bc3737+100 */
   background: rgb(232,99,99); /* Old browsers */
   background: -moz-linear-gradient(top,  rgb(232,99,99) 0%, rgb(188,55,55) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top,  rgb(232,99,99) 0%,rgb(188,55,55) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom,  rgb(232,99,99) 0%,rgb(188,55,55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e86363', endColorstr='#bc3737',GradientType=0 ); /* IE6-9 */
}

/* form.html */

#form .container {
   text-align: left;
}
form p {
   font-size: 18px;
   color: #fff;
}
.small {
   font-size: 12px;
   margin-left: 10px;
}
.form-input,
.notice {
   width: 100%;
   background: rgba(255,255,255,0.7);
   padding: 10px;
   border: 0;
   border-radius: 5px;
}
.form-input {
   color: #53a19e;
   margin: 10px 0;
   font-size: 16px;
}
.notice {
   margin-top: 15px;
}
.notice p{
   color: #434343;
   font-size: 14px;
   line-height: 20px;
}

/* album.html */

#work {
   position: relative;
}
.fixedbar {
   width: 100%;
   background-color: #84ccc9;
   position: fixed;
   top: 0;
   z-index: 9;
}
#work .hamburger-menu {
   position: fixed;
}
.search,
.dropdown-fliter {
   width: 94%;
   background: rgba(255,255,255,0.7);
   border: 0;
   border-radius: 5px;
   text-align: left;
   margin-bottom: 15px;
}
.search { 
   position: relative;
   padding: 5px;
}
.search input {
   width: 72%;
   height: 30px;
   text-indent: 5px;
   border: 0;
   font-size: 16px;
   color: #53a19e;
   background: transparent;
}
.search .icon-search { 
   position: absolute;
   top: 7px;
   right: 2px;
}
.dropdown-fliter {
   height: 40px;
   color: #53a19e;
   padding: 20px;
   font-size: 16px;
   position: absolute;
   right: 0;
}
.photo-box {
   width: 100%;
   position: relative;
   background: rgba(255,255,255,0.7);
   padding: 15px;
   margin-bottom: 20px;
}
.photo-info {
   width: 100%;
   padding: 5px 0;
}
.info {
   position: relative;
   width: 50%;
   float: left;
   text-align: left;
   color: #de3939;
   font-family: Arial;
}
.number {
   padding-top: 8px;
}
.UserPhoto {
   width: 40px;
   height: 40px;
   border-radius: 100%;
   border: 3px solid #fff;
   position: absolute;
   right: 0;
}
#album .container {
   padding-top: 200px;
}

/* method.html */

#method .container {
   text-align: left;
}
.method-bg {
   width: 100%;
   padding: 4%;
   margin-bottom: 5%;
   background: rgba(255,255,255,0.7);
}
#method .container h1 {
   font-weight: 700;
   color: #318481;
   margin: 15px 0;
   font-size: 18px;
}
#method .container p {
   margin: 10px 0;
}
#award .container p {
   margin: 20px 0;
}
#method .container p,
#award .container p {
   line-height: 20px;
   color: #313131;
   font-size: 14px;
}
#method ol {
   margin-top: 10px;
}
#method li {
   font-size: 14px;
   color: #313131;
   margin-bottom: 15px;
   line-height: 20px;
}
#award table {
   margin-bottom: 30px;
   border: 1px solid #000;
}
table {
   width: 100%;
   border: 0;
}
table td {
   font-size: 14px;
   padding: 8px 5px 8px 0;
   border-bottom: 1px solid #000;
   line-height: 20px;
}
table tr:last-child td {
   border-bottom: 0;
}
.green {
   color: #318481;
}
.memo {
   font-size: 12px;
}
.table_title {
   background-color: #434343;
   color: #fff;
   text-align: center;
   border-bottom: 0;
}
/* award.html */
#award .container p {
   margin: 0;
}
#award table {
   margin-top: 20px;
}
#award table tr td:first-child {
   width: 20%;
   text-align: left;
   padding-left: 10px;
   background-color: #c8e6e5;
}







/* Mobile */
@media screen and (max-width: 767px) {
	.wrapper {
		width: 100%;
	}
   .bg-mo {
      display: block;
   }
   .bg-pc {
      display: none;
   }
}



/* PC */
@media screen and (min-width: 768px) {
   body {
      background-color: #aaaaaa;
   }
   .wrapper {
      background-color: transparent;
   }
	.content {
		width: 480px;
		margin: 0 auto;
      background-color: #84ccc9;
	}
   #slide-menu {
      width: 300px;
   }
   #PageA,#PageB,#PageC,#PageD,#PageE,#PageF,#PageG,#about,#form,#vote,#weather,#method,#award {
      min-height: 690px;
   }
   .bg-mo {
      display: none;
   }
   .bg-pc {
      display: block;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;
   }
   /**/
   .PageA-logo {
      width: 50%;
      margin: 15px 25%;
   }
   .PageA-photos {
      margin-bottom: -25px;
   }
   .btn-start {
      margin: 20px auto 30px;
   }
   /**/
   #logo-header {
      width: 200px;
      height: 64px;
      margin-left: -100px;
   }
   .progress {
      margin: 0 20% 10px;
   }
   /**/
   .status {
      margin: 20px 0 25px;
   }
   #PageG .btn,
   #vote .btn,
   #btn-fbshare,
   #btn-lineshare {
      width: 180px;
   }
   /**/
   .weather-logo {
      margin-top: 15px;
   }
   #about .container {
      padding-bottom: 180px;
   }
   /**/
   #weather .container {
      padding-bottom: 400px;
   }
   /**/
   .vote-status {
      margin: 0 0 15px;
   }
   /**/
   .fixedbar {
      width: 480px;
      position: fixed;
      top: 0;
      left: 50%;
      margin-left: -240px;
      z-index: 9;
   }
   #album .container {
      padding-top: 230px;
   }
   #award table tr td:first-child {
      padding-left: 20px;
   }

   
}