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

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

img {
  max-width: 100%;
}
span{
  text-indent: 0!important;
}

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

::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: #de987c;
}

body {
  overflow-x: hidden;
}

header {
  width: 100%;
  margin: 0px auto 0px;
  padding: 20px 5%;
  position: relative;
  z-index: 99;
  background-color: #fff;
  justify-content: space-evenly;
  align-items: center;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);

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

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: #dd8e6f;
  display: block;
  padding: 0 3px;
  margin: 0 5px;
  font-size: 16px;
  transition: 0.5s ease;
  letter-spacing: 1px;
}


nav li a:hover{
  color: #a62622;
  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;
  min-height: calc(100vh - 184px - 145px);
}
a.active,.fz .on{color: #262251;font-weight: bold;}
.final_bg{bottom: 0;left: 0;width: 100%;object-fit: cover;height: 100vh;}

.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;}

#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;height: calc(100vh - 120px);display: flex;align-items: center;justify-content: center;}
.index_intro img{width: 45%;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% - 15vw);min-height: 200px;margin: 50px auto 50px;}
.index_box1{position: relative;border-radius: 10px;padding: 5%;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;}


.relative{position: relative;}

.index_sky{background: linear-gradient(180deg, rgba(250,242,238,1) 0%, rgba(230,193,174,1) 100%);background-size: cover;background-position: top;background-repeat: no-repeat;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.index_sky li{text-align: center;}
.index_sky .uk-slider{border-radius: 20px;position: relative;}
.index_sky .uk-dotnav{position: absolute;bottom: 10px;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;}



.eventBox{margin: 50px 0;filter: drop-shadow(1px 2px 4px rgba(166,37,33,0.3));}
.eventBox .uk-subnav{display: flex;align-items: center;justify-content: space-between;width: 100%;border-bottom: 3px solid #a62622;margin: 0;}
.eventBox .uk-subnav li{flex: 1;margin-right: 3px;}
.eventBox .uk-subnav li:first-child{padding-left: 0!important;}
.eventBox .uk-subnav li:last-child{margin-right: 0;}
.eventBox .uk-subnav li a{background-color: #ebc6b8;border-top-left-radius: 10px;border-top-right-radius: 10px;color: #a62622;transition: 0.5s ease;padding: 8px 10px 8px 20px;text-align: left;font-size: 28px;}
.eventBox .uk-subnav li.uk-active a,.eventBox .uk-subnav li a:hover{color: #fff;background-color: #a62622;}
.eventBox .uk-switcher{background-color: #ebc6b8;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;padding: 20px 20px;}
.eventBox .uk-switcher li form{position: relative;padding-bottom: 60px;}
.eventBox .uk-switcher li h3{color: #a62622;text-align: left;font-weight: bold;font-size: 20px;display: flex;align-items: center;position: relative;}
.eventBox .uk-switcher li h3::before{position: absolute;left: -15px;top: 0;height: 100%;width: 1px;background-color: #a62622;content: '';}
.eventBox .uk-switcher li h3.noborder::before{width: 0;}
.eventBox .uk-switcher li h3 img{height: 25px;display: inline-block;width: auto;margin-right: 5px;}
.eventBox .uk-switcher li label{background-color: #fff;padding: 10px 0;border-top-left-radius: 20px;border-bottom-right-radius: 20px;position: relative;display: block;margin-bottom: 8px;}
.eventBox .uk-switcher li label::after{position: absolute;right: 20px;width: 15px;height: 15px;background-image: url(../images/arrow_down.png);content: '';background-repeat: no-repeat;background-position: center;background-size: contain;top: 50%;transform: translateY(-50%);pointer-events: none;}
.eventBox .uk-switcher li select{border: none;width: 100%;-webkit-appearance: none;outline: none;color: #a62622;background: transparent;padding-left: 20px;}
.eventBox .uk-switcher li button{border: none;background-color: transparent;width: 40px;position: absolute;right: 0px;bottom: 0px;outline: none;transition: 0.5s ease;}
.eventBox .uk-switcher li button:hover{opacity: 0.8;}

.index_box_event{width: 100%;padding: 20px;text-align: justify;color: #a62622;margin: 10px auto;line-height: 32px;background-color: #fff;border-radius: 10px;filter: drop-shadow(1px 2px 4px rgba(166,37,33,0.3));}
.index_box_event a{color: #a62622;}



.calendarIndexDesktop{display: table;}
.calendarIndexMoblie{display: none;}
.calendarTitle{text-align: center;font-size: 24px;margin: 40px 0 10px;color: #903930;font-weight: bold;}
.calendarBox{position: relative;margin-bottom: 40px;}
.index_calendar {border-radius: 20px;overflow: hidden;background-color: #fff;}
.calendarHeader {text-align: center;font-weight: bold;font-size: 24px;color: #262251;background: linear-gradient(180deg, rgba(250,242,238,1) 0%, rgba(230,193,174,1) 100%);padding: 8px;}
.index_calendar table{width: 90%;border-collapse: initial;border-spacing: 5px;padding: 4px 0 10px;margin: 0 auto;}
.index_calendar table thead tr th{width: calc(100% / 21);padding: 6px;color: #262251;font-weight: bold;}
.index_calendar table thead tr th:nth-child(7n+1){color: red;}
.index_calendar table th,.index_calendar table td{text-align: center;font-weight: bold;}
.index_calendar table td{color: #cacacc;padding: 0;}
.index_calendar table td.notPass{color: #262251;background-color: #edd3d4;}
.index_calendar table td.notPass a{color: #262251;}
.index_calendar table td.notPass a:focus,.index_calendar table td.currentSelected a{color: #f48e32;}
.index_calendar table td.haveAct{background-color: #edd3d4;}
.index_calendar:not(:first-child){opacity: 0;position: absolute;top: 0;left: 0;z-index: -1;width: 100%;}
.index_calendar.showCalendar{z-index: 10!important;opacity: 1!important;}
.index_calendar.hideCalendar{opacity: 0;}
.calendarNext,.calendarPrev{cursor: pointer;display: inline-block;margin: 0 5px;}



.newsList{display: flex;align-items: center;margin-bottom: 25px;}
.newsList img{height: 50px;margin-right: 10px;}
.newsList h3{display: inline-block;margin: 0;color: #a62622;font-weight: bold;}
.centerBox{display: block;width: fit-content;margin: 0 auto;}


.articleBoxContent.haveCalendar{flex-wrap: nowrap;display: flex!important;align-items: flex-start;justify-content: space-between;padding: 40px;}
.haveCalendar .centerBox{padding: 0 50px; width: 70%;margin: 0;}
.pageCalendar{width: 30%;min-width: 300px;position: relative;}
.pageCalendar .index_calendar {border-radius: 6px;}
.pageCalendar .index_calendar table{width: 100%;padding: 0;}
.pageCalendar .index_calendar td{width: 40px;}
.pageCalendar .index_calendar table thead tr th{width: initial;padding: 0;}

.eventsCalendarBox{padding: 20px 0;border-bottom: 1px solid #e4c5b3;}



a{color: #006737;transition: 0.5s ease;}
a:hover{color: #b3d74e;}
.index_middle{min-height: 0;margin: 0 auto;color: rgb(90,161,135);text-align: center;}
.index_middle p{margin-bottom: 0;text-align: center;}

.index_notice{background-color: #faf0da;padding: 20px;position: relative;}
.notice_title{font-weight: 800;color: #0000ff;}
.index_notice_content table td{padding: 4px 20px 4px 0;}
.notice_close{position: absolute;top: 20px;right: 30px;width: 30px;height: 30px;cursor: pointer;}

.box_img_popup1{right: 2vw!important;bottom: 0!important;width: 24vw!important;top: initial!important;left: initial!important;}
.box_img_popup1 img{width: 100%;}
.index_title h1{position: relative;}



@media(max-width: 768px){
    .index_sky,.uk-slider {border-radius: 0px;}
}
@media(max-width: 480px){
    .index_sky .uk-dotnav{bottom: -70px;}
    .index_box_div{margin: 40px auto 0;}
    
    .index_notice_content table td{display: block;width: 100%;}
}


.fancybox-is-open .fancybox-bg{background:#e7a46a57!important;}
#hidden-content{max-width: 700px;border: 1px solid #f6921e;background: rgba(255,255,255,0.9);color: #000;}
#hidden-content p{line-height: 26px;}
#hidden-content a{background-color: #f6921e;border-radius: 8px;border:1px solid #f6921e;color: #fff;font-weight: 800;width: fit-content;display: block;margin: 20px auto;padding: 5px 35px; font-size: 24px; letter-spacing: 5px;outline: none;}


@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: #ebc6b8;margin-top: 100px;position: relative;z-index: 9;display: flex;align-items: center;justify-content: space-between;}

footer ul{display: flex;flex-wrap: nowrap;list-style: none;margin: 0;position: relative;z-index: 999;}
footer a{color: #a62622;padding: 10px 20px;transition: 0.5s ease;display: inline-block;}
footer a:hover{color: #dd8e70;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;
}

div{white-space: initial!important;}


/*    內頁     */

.eventPlayBack{display: flex;margin: 10px auto;justify-content: center;flex-wrap: wrap;}
.eventPlayBack .eventPlayBackBox{flex: 1 1 50%;padding: 20px;text-align: center;border: 1px solid #c36363;align-items: flex-start;}
.eventPlayBack .eventPlayBackBox img{max-width: 100%;margin: 10px auto;}
.eventPlayBack .eventPlayBackBox .eventBoxContent{width: 80%;margin: 0px auto;}


.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;background: linear-gradient(180deg, rgba(250,242,238,1) 0%, rgba(230,193,174,1) 100%);filter: drop-shadow(1px 2px 4px rgba(166,37,33,0.3));border-radius: 20px;overflow: hidden;}
.page_box_div,.page_box_div p{line-height: 1.5;font-family: "微軟正黑體"!important;letter-spacing: 0px!important;}
.page_box_div table p{text-align: left;}
.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%;}
.purple_box a{color: #dba2c9!important;}
.event_inner_box {margin-top: 30px;}
.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;}
.event_inner_content a{display: inline-block;margin-bottom: 0;color:#006737;}
.event_inner_content a:hover{text-decoration: none;color: #b3d74e}
.img_container{overflow:hidden;display: block;}

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


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



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



.pageBoxHeader{border-bottom: 1px solid #e4c5b3;}
.pageBoxHeader h1{font-size: 40px;color: #dd8e70;margin: 0;padding: 40px;text-align: center;letter-spacing: 1px;}
.pageBoxHeader.noTextH1 h1{padding: 0px;}
.pageBoxContent{display: flex;flex-wrap: wrap;align-items: center;padding: 20px;}
.pageBoxContent .newsBox{flex: 1 1 50%;padding: 20px;max-width: 50%;}
.pageBoxContent .newsBox a{display: block;position: relative;padding: 20px;}
.pageBoxContent .newsBox a:hover img{opacity: 1;}
.pageBoxContent .newsBox img{border-radius: 20px;filter: drop-shadow(1px 2px 4px rgba(166,37,33,0.3));opacity: 0.8;transition: 0.5s ease;}
.pageBoxContent .newsBox:nth-child(2n-1) a:after{position: absolute;content: '';width: 1px;height: 90%;background-color: #e4c5b3;top: 0;right: -5%;}
.pageBoxContent .newsBox:nth-child(1) a:before,.pageBoxContent .newsBox:nth-child(2) a:before,.pageBoxContent .newsBox:nth-child(4) a:before{position: absolute;content: '';width: 100%;height: 1px;background-color: #e4c5b3;bottom: -20px;right: 0px;}
.pageBoxContent .newsBox:nth-child(3) a:before,.pageBoxContent .newsBox:nth-child(5) a:before{position: absolute;content: '';width: 12px;height: 12px;background-color: #e4c5b3;top: -27px;right: -26px;transform: rotate(45deg);pointer-events: none;}
.pageBoxContent .newsBox:nth-child(5) a:after{width: 90%;height: 1px;background-color: #e4c5b3;right: 0px;top: -5%;}

.pageBoxContent.articleBoxContent{padding: 40px 100px;display: block;color: #a72b24;line-height: 1.5;text-align: justify;}
.pageBoxContent.articleBoxContent a{color: #a72b24;}


.newsDetail{color: #a72b24;border-bottom: 2px solid #a72b24;padding: 30px 0;}
.newsDetail:first-child{padding-top: 0;}
.newsDetail h3{font-size: 18px;color: #a72b24;margin-bottom: 8px;font-weight: bold;}
.noBorder{border-bottom: none!important;}
.newsDetail table{max-width: 100%;}
.newsDetail table td,.newsDetail table th{/*border: 1px solid #a72b24;padding: 6px 10px;width: fit-content!important;*/}
.newsDetail table p{margin-bottom: 0;}


.newsDetail{overflow: auto;width: 100%;}
.newsDetail > div,.newsDetail div{overflow: auto;width: 100%;}
.newsDetail  div table tbody{max-width: 100%;overflow: scroll;width: fit-content!important;}

.newsDetail  div table tbody{
    overflow-x: scroll;
    width: 400px;
}
.newsDetail  div table tbody td{padding-right: 15px;padding-bottom: 5px;text-align: left;}
.overflowScroll{overflow: auto;}

.sitemap_list ul{margin-top: 0;padding-left: 2vw;}
.sitemap_list li{list-style-image: url(../images/list_icon.png);padding: 5px 0;}
.sitemap_list li a{color: #a72b24;transition: 0.5s ease;}
.sitemap_list li a:hover{color: #dd8e70;}


/*   login ------------- S    */
.loginForm{text-align: center;width: 400px;max-width: 100%;display: block;margin: 0 auto}
.loginIcon{width: 150px;position: relative;transform: translateY(50%);z-index: 999;}
.loginFrame{background-color: #fff;border-radius: 20px;filter: drop-shadow(5px 5px 0 #dd8f71);padding: 100px 40px 40px 40px;}
.loginFrame h1{font-size: 18px;text-align: center;font-weight: bold;color: #aa3733;}
.loginFrame label{position: relative;display: block;width: 100%;}
.loginFrame label input{border-radius: 4px;background-color: #fbefe1;color: #de8c6f;padding: 8px 20px;border: none;outline: none;margin-bottom: 10px;width: 100%;}
.loginFrame label input::placeholder{color: #de8c6f;}
.loginFrame label img{position: absolute;right: 10px;top: 50%;transform: translateY(calc(-50% - 5px));width: 15px;pointer-events: none;}
.loginFrame button{width: 100%;background-color: #dd8e6f;color: #fff;padding: 6px;text-align: center;border-radius: 4px;outline: none;border: none;transition: 0.5s ease;}
.loginFrame button:hover{opacity: 0.7;}
.loginFrame a{font-size: 14px;text-align: center;font-weight: bold;color: #aa3733;display: block;margin-top: 10px;}
/*   login ------------- E    */



/*   video ------------- S    */
.video_bg{background-color: #a6d6a4;}
.video_bg h1{color: #a6d6a4;}
.video_page{display: flex;flex-wrap: nowrap;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(100% - 87px);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    */



/*   Gallery ------------- S    */


/*   Gallery ------------- E    */




/*   Sticker ------------- S    */
.sticker_box{padding: 20px 40px;}
.pageBoxHeader .stickerH1{position: relative;}
.stickerH1 .sticker_small{float: right;font-size: 16px;position: absolute;right: 20px;bottom: 20px;}
.stickerH1 .sticker_small span{font-weight: bold;color: #a72b24;}


.sticker_tab.uk-subnav{padding: 10px 10%;text-align: center;background-color: #eed3ca;border-radius: 10px;margin-left: 0;justify-content: space-evenly;}
.sticker_tab li{display: inline-block;}
.sticker_tab li a{color: #c5715d!important;font-weight: bold;font-size: 20px!important;}
.sticker_tab li.uk-active a{background-color: transparent!important;color: #3f3965!important;}
.sticker_tab li:hover a{background-color: transparent!important;color: #3f3965!important;}

.sticker_li h3{font-size: 24px;color: #c5715d;position: relative;}
.sticker_li h5{font-size: 14px;color: #c5715d;position: relative;margin-top: 8px;font-weight: 600;text-align: center;}
.sticker_li a{text-align: center;}
.sticker_li a img{transition: 0.5s ease;}
.sticker_li a img:hover{filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.2));}
.sticker_li_box{border-bottom: 18px solid #c5715d;padding: 30px 0;border-image: url(../images/border.png) 45 0;}

.filter_gray{filter: grayscale(1);}
.filter_gray img{opacity: 0.2;}

@media (max-width: 768px) {
    .sticker_tab{display: flex;}
    .sticker_tab li{flex:1;display: block;}

    .sticker_box{padding: 15px;}
    .sticker_tab{display: block;padding: 10px;}
}

/*   Sticker ------------- E    */




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


.gameBox{width: 600px;padding: 0 20px;display: flex;align-items: center;border-radius: 20px;background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(240,216,202,1) 100%);filter: drop-shadow(1px 2px 4px rgba(166,37,33,0.3));justify-content: center;margin: 20px auto 30px;}
.gameBox h3{font-size: 40px;color: #db8e70;}

.gameHeader{display: flex;justify-content: space-between;align-items: center;}
.game1Count{font-size: 24px;color: #bf604e;padding: 40px;}
.gameBoxContent h3,.gameBoxContent h5{text-align: center;color: #bf604e;}
.gameBoxContent h3{font-size: 24px;margin-bottom: 10px;margin-top: 20px;font-weight: bold;}
.gameBoxContent h5{font-size: 18px;margin-top: 0;margin-bottom: 20px;}
.game1SelectBox{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.game1SelectBox div{cursor: pointer;}
.gameBoxContent .img_box img{border: 2px solid #bf604e;display: block;margin: 20px auto 40px;}
.gameBG{background: linear-gradient(180deg, #f5e6de 0%, #f0d2c4 100%);position: relative;width: 90%;margin: 0 auto 30px;}

.GameMask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,0.7);content: '';transition: 0.5s ease;}
.GameStart{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: fit-content;z-index: 999;cursor: pointer;}
.GameStart img{min-width: 150px;width: 10vw;}



.timer{position: absolute;top: 0;left: 0;text-align: center;color: #232255;font-weight: bold;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);border-top-right-radius: 20px;border-bottom-right-radius: 20px;overflow: hidden;}

.score{position: absolute;top: 0;right: 0;text-align: center;color: #bf604e;font-weight: bold;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);border-top-left-radius: 20px;border-bottom-left-radius: 20px;overflow: hidden;}

.timer h4,.score h4{background-color: #fff;font-size: 16px;margin: 0;padding: 6px 35px;color: #232255;font-weight: bold;letter-spacing: 4px;}
.score h4{color: #bf604e;}
.timer .timerCount,.score .scoreCount{background: linear-gradient(180deg, #e9e8f3 0%, #cac7e0 100%);font-size: 38px;padding: 10px 20px 20px;line-height: 0.8;letter-spacing: 10px;}
.score .scoreCount{background: linear-gradient(180deg, rgba(250,242,238,1) 0%, rgba(230,193,174,1) 100%);}


#canvas{position: absolute;top: 0;left: 0;}
#leftButton,#rightButton{position: absolute;bottom: 30px;width: 100px;height: 100px;}
#leftButton{left: 30px;}
#rightButton{right: 30px;}

@media(max-width: 768px){
  .timer,.score{zoom: 0.7;}
}
@media(max-width: 480px){
  .timer,.score{zoom: 0.5;}
}












/* 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: 1270px){
  .gallery *{/*transform: scale(.9);*/}
  .albumBook{/*transform: rotate(-5deg) scale(.9);*/}
  .pageBoxContent.articleBoxContent{padding: 40px 20px;}
  .articleBoxContent.haveCalendar{flex-direction: column;}
  .articleBoxContent.haveCalendar .pageCalendar{width: 100%;margin-bottom: 30px;}
  .haveCalendar .centerBox{width: 100%;padding: 0;}
}
@media(max-width: 1024px){


  .page_box_div{width: calc(90% - 5vw);}

  .calendarIndexMoblie{display: table;}
  .calendarIndexDesktop{display: none;}
  .index_intro img{width: 80%;padding: 30px 0;}
}





@media(max-width: 768px){

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

.index_intro{ height: auto;}
  .a_fontsize{width: 32%;position: relative;top: -6px;}
  .a_fontsize a{padding: 0 3px;top: 0;}
  .eventPlayBack .eventPlayBackBox{flex: 1 1 100%;}


  .box_img {display: none;}
  .index_box_div{margin: 40px auto;}
  .index_box1{padding: 20px;}
  .index_sky{padding: 20px;}
  .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;object-fit: cover;height: 100vh;}

  .padding_percentage{padding: 20px;}
  .pageBoxContent.articleBoxContent{padding: 20px 50px;}
}

@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;}
  .pageBoxContent.articleBoxContent{padding: 30px 20px;text-align: initial;}
  .pageBoxHeader h1{padding: 20px;font-size: 28px;}


  .pageBoxContent .newsBox{flex: 1 1 100%;padding: 20px;max-width: 100%;}
  .pageBoxContent .newsBox a{display: block;position: relative;}
  .pageBoxContent .newsBox a:hover img{opacity: 1;}
  .pageBoxContent .newsBox:nth-child(2n-1) a:after{display: none;}
  .pageBoxContent .newsBox:nth-child(3) a:before,  .pageBoxContent .newsBox:nth-child(5) a:before{position: absolute;content: '';width: 100%;height: 1px;background-color: #e4c5b3;bottom: -20px;right: 0px;transform: rotate(0deg);top: initial;}

  .gameBox{width: 100%;padding: 20px;flex-wrap: wrap;border-radius: 20px;justify-content: center;}
  .gameBox h3{font-size: 24px;color: #db8e70;flex: 1 1 100%;text-align: center;}

  .stickerH1 .sticker_small{float: initial;clear: both;font-size: 16px;position: static;display: block;margin-top: 20px;}
  .pageCalendar{min-width: 100%;}
}

.fix-video{
  position: fixed;
  background: #fff;
  width: 240px;
  height: 240px;
  border:5px solid #dd8e6f;
  right: 20px;
  bottom:50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999

}
.fix-video a{color:  #dd8e6f;text-decoration: underline;}
.fix-video i{color: #dd8e6f;text-align: center;display: block;margin: 0 auto;font-size: 70px !important;}
.fix-video span{display: block;text-align: center;color:  #dd8e6f;font-size:18px !important;}
@media(max-width: 768px){
  .fix-video{position: initial;margin: 0 auto;}
}