* {
  margin: 0;
  padding: 0;
  font-family: '微軟正黑體';
  word-break: break-word;
}

a:hover {
  text-decoration: none!important;
}

img {
  max-width: 100%;
}

p {
  line-height: 32px;
  text-align: justify;
  letter-spacing: 1px;
  word-break: break-word;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #66b9ce;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #66b9ce;
}

body {
  overflow-x: hidden;
}

header {
  width: 100%;
  margin: 0px auto 20px;
  padding: 20px 5%;
  position: relative;
  z-index: 99;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);

}
#logo{display: flex;align-items: center;}
#logo img{width: 400px;}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

nav ul {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  margin: 5px 0;
  justify-content: flex-end;
}

nav li {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
}

.top_nav li {margin-left: 20px;}
.bottom_nav li a{padding: 0 10px;}

nav li img{height: 20px;}

nav li a {
  font-weight: 400;
  color: #006737;
  display: block;
  padding: 0 3px;
  margin: 0 5px;
  font-size: 16px;
  transition: 0.5s ease;
}


nav li a:hover{
  color: #b3d74e;
  text-decoration: none;
}

.a_access_small{font-size: 16px;;position: relative;}
.a_access_mid{font-size: 20px;;position: relative;top: -5px}
.a_access_big{font-size: 24px;;position: relative;top: -10px}



.lang {
  background-color: #fff;
  border-radius: 50px;
  border: 2px solid #fff;
  transition: 0.5s ease;
}

.lang:hover {
  background-color: transparent;
}
.lang:hover a {
  color: #fff;
}

main {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.final_bg{bottom: 0;left: 0;width: 100%;}

.desktop_nav{display: flex;}
.moblie_nav{display: none;}

#bg{position: fixed;width: 100%;height: 100vh;z-index: 0;}
.bg_bg{position: absolute;opacity: 0.6;}
.bg1{width:20vw;top: 10vh;left: -10vw;animation: image-move1 10s linear infinite;}
.bg2{width:40vw;top: -10vh;left: 30vw;animation: image-move2 10s linear infinite;}
.bg3{width:20vw;top: 20vh;right: -10vw;animation: image-move1 10s linear infinite;}
.bg4{width:20vw;bottom: -10vh;left: -10vw;animation: image-move2 10s linear infinite;}
.bg5{width:25vw;bottom: -10vh;right: 20vw;animation: image-move1 10s linear infinite;}

header{display: flex;z-index: 1;background: #fff;}
#search_form {position: relative;}
#search_form input{border: 2px solid #006737;padding: 0 10px; }
#search_form button{border: none;background: none;position: absolute;right: 0;top: 1px;padding: 0 10px;color: #006737;}

main{margin-top: 20px;}
/*
.index_intro{width: 90%;margin: 10px auto;position: relative;height: 270px;}
.index_intro:before,.index_intro:after{position: absolute;background-size: contain;background-repeat: no-repeat;content: '';}
.index_intro:before{width: 35vw;height: 15vh;left: -5vw;bottom: 0;background-image: url(../images/index_line1.png);}
.index_intro:after{width: 20vw;height: 13vh;right: 0vw;top: 0;background-image: url(../images/index_line2.png);}
*/

.index_intro{text-align: center;}
.index_intro img{width: 40%;padding: 100px 0;}

.orange_text{color: #f15c2b;}
.yellow_text{color: #fdba24;}
.light_orange_text{color: #f68d2a;}
.title_indent{text-indent: 10vw;display: block;margin-top: 3vh;}
/*
.index_title{position: absolute;top: 22vh;left: 50%;transform: translateX(-50%);}
.index_title h1{line-height: 0.8;}
.index_title img{height: 50px;position: absolute;top: -10px;right: -80px;}
*/
.index_description{margin-left: 4vw;color: #73c375;letter-spacing: 1px;line-height:28px;position: relative;width: 60%}
.two_book{position: absolute;top: -24vh;left: 3vw;}
.two_book img{animation: image-move1 10s linear infinite;}
.two_book img:nth-child(2){position: relative;top: -30px;right: 0;animation: image-move2 10s linear infinite;}

.box_img_popup{left: -19vw;top: 25%;z-index: 99;width: 280px;}

.index_box_div{width: calc(80% - 20vw);min-height: 200px;margin: 50px auto 50px;}
.index_box1{background-color: rgb(233,244,233);position: relative;border: 2px solid rgb(90,161,135);border-radius: 60px;padding: 20px;z-index: 5;}
.index_box1 ul li img{width: 100%;}
.box_img{position: absolute;content: '';}
.box_img1{top: -78%;left: 5%;z-index: 3;width: 15vw;animation: image-move1 10s linear infinite;}
.box_img2{top: -45%;right: 2%;z-index: 0;width: 10vw;animation: image-move2 10s linear infinite;}
.box_img3{top: 30%;right: -12%;z-index: 0;width: 10vw;animation: image-move1 10s linear infinite;}

.index_box_event{width: 100%;padding: 20px;text-align: justify;color: rgb(90,161,135);border-bottom: 1px solid #269392;margin: 10px auto;line-height: 32px;}
.index_box_event:last-child{border-bottom: none;}
.index_box_event h2{position: relative;font-size: 28px;}
.index_box_event h3{font-size: 18px;}
.index_box_event h2,.index_box_event h3,.index_box_event h4{margin-top: 0;margin-bottom: 15px;letter-spacing: 1px;color: #67ad70;font-weight: 800;}
.index_box_event h2:after{position: absolute;bottom: -15px;left: calc(50% - 100px);width: 200px;height: 2px;border-bottom: 2px dashed #67ad70;content: ''}
.index_box_event h4{margin-top: 25px;}

.relative{position: relative;}

.index_sky{background-color: #fff;background-size: cover;background-position: top;background-repeat: no-repeat;padding: 0px;overflow: hidden;border-color: rgb(233,138,111);}
.index_sky li{text-align: center;}
.index_sky .uk-dotnav{position: absolute;bottom: 0px;z-index: 999999;left: 50%;transform: translateX(-50%);background-color: rgba(0,0,0,0.4);border-radius: 30px;padding: 10px 20px;}
.index_sky .uk-dotnav li a{background-color: #fff;}
.index_sky .uk-dotnav li.uk-active a{background-color: #d85426;}



@keyframes image-move1 {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-15px);
  }
  66% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes image-move2 {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(15px);
  }
  66% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

.box_img4{top: 40%;left: -10%;z-index: 0;width: 10vw;animation: image-move1 10s linear infinite;}
.box_img5{top: 5%;right: -10%;z-index: 0;width: 8vw;animation: image-move2 10s linear infinite;}
.box_img6{bottom: -30%;right: -17%;z-index: 0;width: 10vw;animation: image-move1 10s linear infinite;}
.box_img7{bottom: -60%;left: -20%;z-index: 0;width: 26vw;animation: image-move2 10s linear infinite;}

footer{padding: 20px;background-color: #c5e3c6;margin-top: 100px;position: relative;z-index: 9;}
footer ul{display: flex;flex-wrap: nowrap;list-style: none;margin: 0;position: relative;z-index: 999;}
footer ul li a{color: #1d7243;padding: 10px 20px;transition: 0.5s ease;display: inline-block;}
footer ul li a:hover{color: #36b311;text-decoration: none;}


@media(max-width: 768px){
  .index_box_div{width: 95%;}
  .index_box1{}
  .index_title{display: block;position: static;}
  .two_book{top: initial;bottom: -90px;}
  footer{margin-top: 100px;}
  footer ul{display: block;padding: 0;}
  footer ul li{display: block;width: 100%;text-align: center;}
}




.width80 {
  width: 80vw;
  margin: 0 auto;
}


.img_overmask {
  position: relative;
}

.img_overmask .overmask_block {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-image: linear-gradient(120deg, #c3e361 0%, #c3e361ff 100%);
  animation: block-appear 1s ease forwards;
}

.img_overmask .overmask_block_blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  animation: block-appear 1s ease forwards;
}




.img_overmask .img_block {
  opacity: 0;
  animation: image-appear 0.0001s linear forwards;
  animation-delay: 0.5s;
}

.img_overmask img {
  opacity: 0;
  animation: image-appear 1s linear forwards;
}
.img_overmask .hidden {
  opacity: 0;
  animation: image-appear 1s linear forwards;
}
.img_overmask .c1 {
  animation-delay: 0.4s;
}
.img_overmask .c2 {
  animation-delay: 0.6s;
}
.img_overmask .c3 {
  animation-delay: 0.6s;
}




/*    內頁     */


.page_title,.map_title{width: 100%;margin:25px auto;}
.page_title_div{border-radius: 30px;background-color: #87c1e9;padding: 14px 16px;position: relative;z-index: 5;}
.page_title .page_title_div,.map_title .page_title_div{max-width: calc(90% - 25vw);margin: 0 auto;}
.page_title h1,.map_title h1{border-radius: 100px;background-color: #fff;color: #87c1e9;text-align: center;padding: 10px 30px 20px;margin: 0;letter-spacing: 8px;}
.leaf{position: absolute;z-index: 2;right: 13vw;top: -2vh;width: 6vw;display: none;}
.float_book{position: absolute;z-index: 33;left: -4vw;top: -5vh;width: 8vw;}

.page_box_div{width: calc(90% - 25vw);margin: 30px auto 20px;}
.page_box_div,.page_box_div p{line-height: 28px!important;font-family: "微軟正黑體"!important;letter-spacing: 0px!important;}
.blue_box{background-color: #fff;border: 2px solid #87c1e9;padding:40px 20px;border-radius: 30px;}

.event_box{display: flex;flex-wrap: wrap;margin-bottom: 0px;}
.event_box > a{flex:3;}
.event_box > .event_content{flex:5;}
.event_content{padding: 0 20px;font-size: 1rem;letter-spacing: 1px;}
.event_content h3{font-size: 1.7rem;margin-bottom: 10px;}
.event_content a{font-size: 1rem;margin-top: 20px;display: inline-block;color: #333;}

.padding_percentage{padding: 5% 15%;}

.purple_bg{background-color: #dba2c9;}
.purple_bg h1{color: #dba2c9;}
.purple_box{border-color: #dba2c9;padding: 5% 15%;}
.event_inner_box h3{color: #dba2c9;position: relative;display: inline-block;border-bottom: 3px solid #dba2c9;padding-bottom: 0px;margin-bottom: 0;}
.event_inner_box img{width: 100%;margin-bottom: 15px;transition: 1s ease;margin-top: 10px;}
.event_inner_box img:hover{transform:rotate(-3deg) scale(1.05);}
.event_inner_box a{color: #333;transition: 0.5s ease;text-decoration: none;display: block;margin-bottom: 10px;}
.event_inner_content,.new_content{text-align: justify;}
.img_container{overflow:hidden;display: block;}

.green_bg{background-color: #59c3b3;}
.green_bg h1{color: #59c3b3;}
.green_box{border-color: #59c3b3;}


.orange_bg{background-color: #ee9b65;}
.orange_bg h1{color: #ee9b65;}
.orange_box{border-color: #ee9b65;}



.play_inner_box{border-bottom: 6px solid #59c3b3;padding: 40px 0 ;}
.play_inner_box:last-child{border-bottom: none;}


/*   login ------------- S    */


.login h1{text-align: center;color: #f27069;}

.login_form{color: #f27069;width: fit-content;margin: 0 auto;}
.login_form label{display: block;margin-top: 10px;margin-bottom: 0;}
.login_form input[type=text],.login_form input[type=password]{border: 2px solid #f27069;padding: 8px 10px;width: 100%;min-width: 300px;}
.login_form input::placeholder{color: #fde2db;letter-spacing: 2px;}
.login_form input[type=submit]{border: 2px solid #f27069;padding: 8px 40px;width: fit-content;background-color: #f27069;border-radius: 30px;display: block;color: #fff;margin: 10px auto 5px;transition: 0.5s ease;}
.login_form input[type=submit]:hover{background-color: #fff;color: #f27069;}

.login_frame{background-color: #fff;border:10px solid #f27069;border-radius: 20px;width: fit-content;margin: 20px auto;position: relative;z-index: 20;}
.login_frame .page_title_div{background-color: #fff;}
.login .leaf{right:-4vw;top: 0; }

.login_form a{text-align: center;color: #f37169;display: block;margin: 0 auto;width: fit-content;}

/*   login ------------- E    */



/*   video ------------- S    */
.video_bg{background-color: #a6d6a4;}
.video_bg h1{color: #a6d6a4;}
.video_page{display: flex;flex-wrap: nowrap;width: 90%;margin: 20px auto;}
.left_video{border-radius: 20px;border:10px solid #a6d6a4;padding: 8px;flex:2;}
.right_video{flex:1;border: 1px solid #a8d6a6;margin-left: 20px;background: #fff;}
.right_video h3{border-bottom: 1px solid #a8d6a6;font-size: 18px;padding: 10px;margin-bottom: 0;}
.right_video h3 span{float: right;}
.comment_area{padding: 10px;height: calc(32vw - 49px - 40px);overflow-y: scroll;}



.comment_area::-webkit-scrollbar {
  width: 10px;
}

.comment_area::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

.comment_area::-webkit-scrollbar-thumb {
  background: #a8d6a6;
  border-radius: 10px;
}

.comment_area::-webkit-scrollbar-thumb:hover {
  background: #a8d6a6;
}

.comment_row{display: flex;flex-wrap: nowrap;margin-bottom: 8px;}
.comment_row label{margin: 0;display: inline-block;width: fit-content;}
.comment_row p{margin: 0;display: inline-block;}

.author{color: #3853a4;}
.guest1{color: #39b54a;}
.guest2{color: #92278f;}

.message_area{display: flex;flex-wrap: nowrap;width: 100%;border-top: 1px solid #a6d6a4;height: 40px;}
.typing{width: 88%;}
.typing input{width: 100%;height: 100%;border: none;background-color: transparent;padding-left: 10px;}
.typing input:focus{border: none;outline: none;padding: 5px 10px;}
.submit_area button{border: none;color: #a6d6a4;background-color: transparent;font-size: 26px;padding: 2px 10px;position: relative;z-index: 999;}

/*   video ------------- E    */








/*   Game ------------- S    */

.brown_bg{background-color: #d6b38e;}
.brown_bg h1{color: #d6b38e;}
.brown_box{border-color: #d6b38e;}

.game_box{display: flex;align-items: center;justify-content: center;margin: 4vh 0;}
.game_box img{width: 30%;transition: 1s ease;}
.game_box h3{text-decoration: none;display: inline-block;font-size: 3rem;color: #d6b38e;font-weight: 800;text-align: center;margin: 0;vertical-align: middle;padding: 10px 30px;letter-spacing: 20px;}
.game_box:hover,.game_box:hover h3,.game_box h3:hover{text-decoration: none;}
.game_box:hover img{filter: drop-shadow(2px 2px 2px #333);}

/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }

/* required snapPuzzle styles */
.snappuzzle-wrap { position: relative; display: block; }
.snappuzzle-pile { position: relative; }
.snappuzzle-piece { cursor: move; }
.snappuzzle-slot { position: absolute; background: #fff; opacity: .8; }
.snappuzzle-slot-hover { background: #eee; }
.tips,.end_game{text-align: center;font-size: 20px;color: #d6b38e;letter-spacing: 3px;}

#puzzle_solved h2{font-size: 24px;color: #a38460;letter-spacing: 2px;font-weight: 800;}

.game1_from{width: fit-content;text-align: left;margin: 0 auto;}
.game1_from label{display: block;color: #a38460;letter-spacing: 2px;font-weight: 800;}
.game1_from .game_submit,.next_game{background: linear-gradient(180deg, rgba(224,183,132,1) 0%, rgba(150,113,83,1) 100%);border: none;padding: 6px 30px;border-radius: 10px;color: #fff;margin: 10px auto;width: fit-content;cursor: pointer;}
.next_game,.end_game{display: none;}
.next_game:hover{text-decoration: none;color: #fff;}
.ans_right{color: #39b54a!important;}
.ans_wrong{color: #ed1c24!important;}   

.game2 h2{color: #c19b72;text-align: center;font-weight: 800;letter-spacing: 10px;}

/*   Game ------------- E    */

@media(max-width: 768px){

  header{padding: 0;z-index: 999}
  main{padding: 0 15px;}
  #logo{padding: 20px;}

  .desktop_nav{display: none;}
  .moblie_nav{display: block;position: relative;width: 100%;}
  .moblie_nav #logo{width: 55vw;display: inline-block;}
  #hamburger{position: absolute;right: 10px;top: 0px;font-size: 32px;z-index: 9999;cursor: pointer;padding: 10px;color: #209291;}
  #hamburger img {width: 30px;}
  #moblie_menu_close img {width: 20px;}
  .moblie_menu{position: absolute;height: 0%;overflow: hidden;}

  .moblie_fontsize{display: flex;flex-wrap: nowrap;background-color: #e9f5ea;padding: 16px 30px 4px;width: 100%;}
  .moblie_function_div{display: flex;flex-wrap: nowrap;width: 80%;}
  .moblie_function_div a{flex:1;display: inline-block;color: #09693b;text-align: center;}

  .close_button{width: 20%;text-align: right;color: #09693b;}

  .moblie_main_nav{display: block!important;background-color: #fff;margin: 0;padding:15px 0 ;}
  .moblie_main_nav li{display: block;text-align: center;}
  .moblie_main_nav li a{padding: 12px 10px;display: inline-block;}

  .a_fontsize{width: 32%;position: relative;top: -6px;}
  .a_fontsize a{padding: 0 3px;top: 0;}

  .index_intro img{width: 80%;padding: 30px 0;}

  .box_img {display: none;}
  .index_box_div{margin: 40px auto;}
  .index_box1{padding: 20px;}
  .index_sky{padding: 0!important;}
  .float_book{width: 25vw;}

  .video_page{display: block;}
  .right_video{margin-left: 0;margin-top: 30px;}
  .comment_area{height: 400px;}

  .page_title{width: 90%;margin:40px auto 20px;}
  .page_box_div{width: 90%;margin-top: 30px;}
  .page_title_div{max-width: 100%;}
  .page_title h1{font-size: 1.5rem;}
  .leaf{top: -3vh;}
  .event_box{display: block;}
  .event_content h3{font-size: 20px;margin-bottom: 10px;margin-top: 20px;}
  .event_content a{font-size: 16px;margin-top: 20px;display: inline-block;color: #333;}
  .event_content{font-size: 16px;}

  .page_title .page_title_div,.map_title .page_title_div{max-width: 100%;}

  .index_title h1{text-align: center;}
  .index_description{width: 100%;}

  .box_img_popup{display: block!important;width: 100%;text-align: center;position: static;}

  .final_bg{bottom: 0;}

  .padding_percentage{padding: 20px;}
}

@media(max-width: 580px){
  .game_box{display: block;}
  .game_box img{width: 100%;}
  .game_box h3{letter-spacing: 1px;font-size: 2rem;}
  .final_bg{bottom: 0;}
}