/*COMMON STYLES*/
html{
    /* touch-action: none; */
}
body{
    animation: fadein 1.5s;
    -moz-animation: fadein 1.5s; /* Firefox */
    -webkit-animation: fadein 1s.5; /* Safari and Chrome */
    -o-animation: fadein 1.5s; /* Opera */
    font-size: 14px !important;
    font-family: 'M PLUS 1p', 游明朝体, "Yu Mincho", YuMincho, serif;
    margin: 0;
    border:  10px solid #245f00;
    /* touch-action: none; */
}
img{
    max-width: 100%;
}
.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"]{
    padding-right: 0;
    padding-left: 0;
}

.error {
    color: #a00 !important;
}

*:focus {
    outline: none;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Margin */

.tn-spacing-top {
    margin-top: 10px !important;
}
.sm-spacing-top {
    margin-top: 15px !important;
}
.md-spacing-top {
    margin-top: 20px !important;
}
.lg-spacing-top {
    margin-top: 25px !important;
}
.xl-spacing-top {
    margin-top: 30px !important;
}
.xxl-spacing-top {
    margin-top: 35px !important;
}
.ex-spacing-top {
    margin-top: 40px !important;
}
.exl-spacing-top {
    margin-top: 45px !important;
}
.tn-spacing-btm {
    margin-bottom: 10px !important;
}
.sm-spacing-btm {
    margin-bottom: 15px !important;
}
.md-spacing-btm {
    margin-bottom: 20px !important;
}
.lg-spacing-btm {
    margin-bottom: 25px !important;
}
.xl-spacing-btm {
    margin-bottom: 30px !important;
}
.xxl-spacing-btm {
    margin-bottom: 35px !important;
}
.ex-spacing-btm {
    margin-bottom: 40px !important;
}
.exl-spacing-btm {
    margin-bottom: 45px !important;
}
.tn-spacing-left {
    margin-left: 10px !important;
}
.sm-spacing-left {
    margin-left: 15px !important;
}
.md-spacing-left {
    margin-left: 20px !important;
}
.lg-spacing-left {
    margin-left: 25px !important;
}
.xl-spacing-left {
    margin-left: 30px !important;
}
.xxl-spacing-left {
    margin-left: 35px !important;
}
.ex-spacing-left {
    margin-left: 40px !important;
}
.exl-spacing-left {
    margin-left: 45px !important;
}
.tn-spacing-right {
    margin-right: 10px !important;
}
.sm-spacing-right {
    margin-right: 15px !important;
}
.md-spacing-right {
    margin-right: 20px !important;
}
.lg-spacing-right {
    margin-right: 25px !important;
}
.xl-spacing-right {
    margin-right: 30px !important;
}
.xxl-spacing-right {
    margin-right: 35px !important;
}
.ex-spacing-right {
    margin-right: 40px !important;
}
.exl-spacing-right {
    margin-right: 45px !important;
}

.loading-bg {
    background: #F3F3F3;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

#loading-icon {
    position: fixed;
    top: 48%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999999;
    text-align: center;
}
.bounceball,
.bounceball1 {
  position: relative;
  display: inline-block;
  height: 37px;
  width: 15px;
}
.bounceball:before{
    position: absolute;
    content: '';
    display: block;
    top: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transform-origin: 50%;
    animation: bounce 500ms alternate infinite ease;
}
.bounceball1:before{
    position: absolute;
    content: '';
    display: block;
    top: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transform-origin: 50%;
    animation: bounce1 500ms alternate infinite ease;
}
#site-content{
    min-height: 1000px;
}

#scrolltop {
    width: 50px;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 50px;
    right: 45px;
    cursor: pointer;
    z-index: 5;
    background: #ffa600;
    width: 44px;
    padding:  11.5px 0;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#scrolltop i{
    color: #245f00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#scrolltop:hover{
    background: #245f00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#scrolltop:hover i{
    color: #ffa600;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.content-section-40{
    padding: 40px 0;
}
.content-section-60{
    padding: 60px 0
}
.content-section-80{
    padding: 80px 0
}
.content-section-80{
    padding: 80px 0
}
.content-section-90{
    padding: 90px 0
}
.content-section-160{
    padding: 160px 0
}
.section-header{
    text-align: center;
}
.section-header .section-title{
    font-size: 2.8rem;
    font-weight: 700;
    color: #245f00;
    font-family: 'Arimo', sans-serif;
    font-style: italic;
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    margin-top: 0;
}
.section-header >  span{
    font-size: 0.98rem;
    color: #245f00;
    display: block;
}
.form-control{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.btn-default{
    background: #005c23;
    color: #fff;
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 1em;
    font-weight: 700;
    text-shadow: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: 2px solid #005c24;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.btn-default:hover{
    background-color: #ff8e01;
    border: 2px solid #ffb200;
    color: #fff;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.modal{
    top: 10%; 
}
.modal-open{
    padding-right: 0 !important;
}
.modal{
    padding-right: 0 !important;
}
.modal.in .modal-dialog{
    width: 100%;
    margin: 0;
}
.modal-dialog {
    width: 80%;
    max-width:  1040px;
}
.modal-content{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; 
    padding: 40px;
    background: #ffc400;
}
.modal-body{
    padding: 0;
}
.modal-title{
    font-size: 1em;
    color: #fff;
    font-weight: 700;
}
.modal-title i{
    margin-right: 10px;    
}
.modal-header{
    border: none;
}
.modal-nav{
    position: absolute;
    top: 40%;
}
.modal-nav.prev-modal{
    left: 25px;
}
.modal-nav.next-modal{
    right: 25px;
}
.close{
    color: #ffdb00;
    text-shadow: none;
    opacity: 1;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
}
.language-chooser{
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-chooser a{
    text-decoration: none !important;
}

.language-chooser li{
    display: inline-block;
}

.language-chooser li.active a{
    font-weight: 800;
}

.qtranxs-available-languages-message { display:none }

.logo-section h2{
    margin: 0;
    line-height: 1;
    font-size: initial;
}

#menu-toggle {
  display: block;
  text-align: center;
}

#menu-toggle #button-menu span {
  position: relative;
  top: -1.5px;
}

#menu-toggle #button-menu span, #menu-toggle #button-menu span:before, #menu-toggle #button-menu span:after {
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: #245f00;
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  transition: all 150ms linear;
}

#menu-toggle #button-menu span:before, #menu-toggle #button-menu span:after {
  content: '';
  position: absolute;
  left: 0;
}

#menu-toggle #button-menu span:before {
  margin-top: -7px;
}

#menu-toggle #button-menu span:after {
  margin-top: 7px;
}

#menu-toggle #button-menu.active span {
  background-color: rgba(255, 255, 255, 0) !important;
}

#menu-toggle #button-menu.active span:before {
  margin-top: 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu-toggle #button-menu.active span:after {
  margin-top: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.vtext p{
    line-height: 1.1;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.shake:hover,
.shake:focus {
    -webkit-animation-name: spaceboots !important;
    -webkit-animation-duration: 0.3s !important;
    -webkit-transform-origin:50% 50% !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-timing-function: linear !important;
}
.bg-cover{
    -webkit-background-size: cover !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}
.bg-link{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    top: 0;
    display: block;
    z-index: 2;
}
.bg-5{
    padding-bottom: 5%;
}
.bg-10{
    padding-bottom: 10%;
}
.bg-20{
    padding-bottom: 20%;
}
.bg-30{
    padding-bottom: 30%;
}
.bg-40{
    padding-bottom: 40%;
}
.bg-50{
    padding-bottom: 50%;
}
.bg-60{
    padding-bottom: 60%;
}
.bg-70{
    padding-bottom: 70%;
}
.bg-80{
    padding-bottom: 80%;
}
.bg-90{
    padding-bottom: 90%;
}
.bg-100{
    padding-bottom: 100%;
}
.animate-bg{
    -webkit-animation: head-img-zoom 10s ease 0s 1 alternate forwards;
    animation: head-img-zoom 10s ease 0s 1 alternate forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-backface-visibility: hidden;
}
.animate-text{
    -webkit-animation: toptext 2.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards 1;
        animation: toptext 2.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards 1;
        -webkit-transform: rotate(0.0001deg);
        transform: rotate(0.0001deg);
}
.mobile-content{
    display: none;
}
.content-detail img{
    margin: 30px auto;
}
.content-detail h1{
    font-size: 2.27rem;
    font-weight: 700;
    line-height: 1.3;
}
.content-detail h2{
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
}
.content-detail h3{
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
}
.content-detail h4{
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.3;
}
.content-detail h5{
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}
.content-detail p{
    font-size: 1.01rem;
    margin-bottom: 30px;
    font-weight: 700;
    line-height: 2.13;
}
.yellow-bg{
    background: #ffc400;
}
.lt-yellow {
    background: #FFEFB9;
}
.dark-bg{
    background: #212121;
}
.dark-bg .section-title, .dark-bg span{
    color: #ffa600;
}
.green-bg{
    background: #006D31;
}
.zz-border{
    position: relative;
}
.zz-border:before{
   content: "";
   display:block;
   position: absolute;
   width: 100%;
   height:25px;
   bottom: 100%;
}
.zz-bottom.zz-border:before{
    top: 100%;
    bottom: inherit;
}
.zz-yellow:before{
   background: 
        linear-gradient(white 25%, transparent 0%),
        linear-gradient(45deg, #ffc400 35%, transparent 35%) 0 100%,
        linear-gradient(-45deg, #ffc400 44%, transparent 33%)0 35%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 35px 35px, 35px 35px;
}
.zz-bottom.zz-yellow:before{
   background: 
        linear-gradient(-45deg, transparent 25px, #ffc400 0), 
        linear-gradient(45deg, transparent 25px, #ffc400  0);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 30px 32px;
}
.zz-black:before{
   background: 
        linear-gradient(white 25%, transparent 0%),
        linear-gradient(45deg, #212121 35%, transparent 35%) 0 100%,
        linear-gradient(-45deg, #212121 44%, transparent 33%)0 35%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 35px 35px, 35px 35px;
}
.zz-white:before{
   background: 
        linear-gradient(white 25%, transparent 0%),
        linear-gradient(45deg, #ffffff 35%, transparent 35%) 0 100%,
        linear-gradient(-45deg, #ffffff 44%, transparent 33%)0 35%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 35px 35px, 35px 35px;
}
.event-slider{
    margin-top: 30px;
}
.event-slider .bg{position: relative;}
.animal-content{
    margin-top: 40px;
}
#animal{
    padding-bottom: 85px;
}
.box-info{
    position: relative;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.box-info:after{
    content:  '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffc400;
    opacity: 0;
    z-index: 1;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.box-info .info{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.box-info .info *{
    color: #fff;
}
.box-info .bg{
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.box-info .info h3{
    font-size: 1.68rem;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 10px;
}
.box-info.box-lg .info h3{
    font-size: 2.8rem;
    margin-top: 10px;
    margin-bottom: 10px;
}
.box-info .info h4{
    font-size: 1.68rem;
    font-weight: 500;
}
.box-info .info span{
    font-size: 1.12rem;
    font-weight: 700;
    text-align: center;
    display: inline-block;
    border:  1px solid #fff;
    padding: 5px;
    min-width: 140px;
}
.box-info .info a{
    text-decoration: none;
}
.box-info .bg-link{
    z-index: 4;
}
.box-info:hover:after{
    opacity: 0.4;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.box-info .info{
    padding:  30px;
}
.box-info.lg-info .info{
    padding: 60px 50px;
}
.box-info.special-box:after{
    display: none;
}
.box-info.special-box .info *{
    color: #000;
}
.dark-bg .box-info.special-box .info *{
    color: #fff;
}
.box-info.special-box .info span{
    border: 1px solid #000;
}
.dark-bg .box-info.special-box .info span{
    border: 1px solid #fff;
}
#site-wrapper {
    overflow: hidden;
}
/*.COMMON*/

/* COMPONENTS */
.slick-slide img{
    max-width: 100%;
}



/* .COMPONENTS */

/*HEADER*/
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 30px 60px;
    oz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.top-header{
    margin-bottom: 25px;
    position: relative;
    top: 0;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 3;
}
.top-header a{
    text-decoration: none !important;
    color: #fff !important;
}
.top-header .detail-info-link{
    color: #245f00 !important;
}
header.scrolled {
    padding-top: 0;
    oz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
header.scrolled .top-header{
    top: -100px !important;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
header.scrolled #main-nav{
    top: 0px;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
header .langs {
    display: none;
}
.top-header span,
.top-header i{
    color: #fff;
    font-weight: 700;
}
.top-header span i{
    margin-right:  5px;
}
.top-header span{
    margin-right: 10px;
}
.top-header a.detail-info-link{
    text-decoration: none !important;
    margin-left:  35px;
}
.selected-lang{
    text-decoration: none !important;
    line-height: 1;
}
.top-header a.detail-info-link i,
.selected-lang i{
    margin-left:  5px;
    color: #245f00;
}
.top-header .dd-default{
    color: #245f00 !important;
}
.selected-lang{
    text-transform: uppercase;
}
.dd-default{
    color: #245f00 !important;
    background: #ffdb00;
    padding: 5px 15px;
    border-radius: 20px;
    line-height: 1;
    font-weight: 700;
}
.dd-default:hover{
     background: #245f00;
    color: #ffdb00 !important;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.dd-default:hover i{
    color: #ffdb00 !important;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.vam{
    vertical-align: middle;
}
.language-chooser{
    position: absolute;
    top: 120%;
    left: 0;    
    right: 0;
    margin:  0 auto;
    -moz-border-radius:    7px;
    -ms-border-radius: 7px;
    -moz-border-radius:    7px;
    -webkit-border-radius: 7px;
    -o-border-radius:  7px;
    border-radius: 7px;
    display: none;  
    z-index: 3;
}
.language-chooser a{
    color: #245f00;
    text-decoration: none;  
    padding: 5px 0;
    display: inline-block;  
}
.qtrans{
    position: relative; 
    z-index:   2;
    min-width: 65px;
}
.language-chooser{
    background: #ffdb00;
}
.language-chooser li{
    display: block; 
    text-align: center; 
}
/*.HEADER*/

/*MAIN NAV*/
#main-nav{
    position: relative;
    background: #fff;
    padding: 10px 20px;
    -webkit-box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.4);
    box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.4);
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: height 0.6s cubic-bezier(0.37, 0.16, 0.12, 1), opacity 1.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 1.5s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: height 0.6s cubic-bezier(0.37, 0.16, 0.12, 1), opacity 1.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 1.5s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: height 0.6s cubic-bezier(0.37, 0.16, 0.12, 1), transform 1.5s cubic-bezier(0.37, 0.16, 0.12, 1), opacity 1.3s cubic-bezier(0.37, 0.16, 0.12, 1);
    transition: height 0.6s cubic-bezier(0.37, 0.16, 0.12, 1), transform 1.5s cubic-bezier(0.37, 0.16, 0.12, 1), opacity 1.3s cubic-bezier(0.37, 0.16, 0.12, 1), -webkit-transform 1.5s cubic-bezier(0.37, 0.16, 0.12, 1);
}
#main-nav.is-show{
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.site-nav{
    display: none;
    position: absolute;
    top: 90%;
    background: #fff;
    left: 0;
    right: 0;
    margin: -3px auto 0 auto;
    padding: 20px 80px 20px 50px;
    text-align: center;
    -webkit-box-shadow: -1px 8px 5px -2px rgba(0,0,0,0.4);
    -moz-box-shadow: -1px 8px 5px -2px rgba(0,0,0,0.4);
    box-shadow: -1px 8px 5px -2px rgba(0,0,0,0.4);
    -moz-border-radius: 0 0 10px 10px;
    -ms-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    -o-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
.site-nav a{
    color: #245f00;
    text-decoration: none;
    font-family: 'Arimo', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    font-style: italic;
    opacity: 0.7;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.site-nav a:hover{
    opacity: 1;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.site-nav a span{
     font-family: 'M PLUS 1p', 游明朝体, "Yu Mincho", YuMincho, serif;
     font-size: 0.77rem;
     font-style: normal;
}
.site-nav ul{
    list-style: none;
    padding:  0;
    margin: 0;
}
.site-nav ul li{
    opacity: 0;
}
.site-nav .sns-links{
    margin-top: 25px;
    text-align: right;
    min-width: 127px;
}
.site-nav .sns-links img{
    margin-right: 3px;
    opacity: 0.7;
    display: inline-block;
}
.site-nav .sns-links a{
    display: inline-block;
    text-align: center;
    color: #fff;
    background: #245f00;
    width: 30px;
    padding: 2px 0;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -webkit-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    margin: 0 3px;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.site-nav .sns-links .insta:hover{
    background: #000;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.site-nav .sns-links .fb:hover{
    background: #3C5A99;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.main-menu-section {
	display:  flex;
	justify-content: center;
	align-items: center;
}
.main-menu-section a{
    text-decoration: none;
    color: #245f00;
    text-align: center;
    display: inline-block;
    line-height: 1;
    font-size: 0.77rem;
    font-weight: 700;
    padding:  0 20px;
    vertical-align: middle;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.main-menu-section a:first-child{
    padding-left: 40px;
}
.main-menu-section a:last-child{
    padding-right: 40px;
}

.main-menu-section a i{
    display: block;
    margin-bottom:  7px;
}
.main-menu-section a:hover{
    color: #ffdb00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.ticket-link:hover img{
    opacity: 0.7;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/*.MAIN NAV*/

/*HOMEPAGE*/
#main-slider{
    position: relative;
}
.slider-banners{
    position: absolute;
    right: 50px;
    top: 22%;
    z-index: 2;
    max-width: 44%;
    text-align: right;
}
.slider-banner-bottom {
    position: fixed;
    bottom: 120px;
    right: 45px;
    width: 150px;
    z-index: 5;
}
.day-off-banner, 
.slider-support-banner {
    display: inline-block;
    vertical-align: middle;
}

.slider-support-banner {
    max-width:  240px;
    margin-right: 15px;
}

.day-off-banner:hover, 
.slider-support-banner:hover {
    opacity: 0.8;
}

.main-slider .bg{
    height: calc(100vh + 25px);
}
.main-slider .slick-prev,
.main-slider .slick-next{
    position: absolute;
    top: 50%;
    width: 42px;
    height: 68px;
    display: block;
    opacity: 1;
    z-index: 4;
}
.main-slider .slick-prev:before,
.main-slider .slick-next:before{
    display: none;
}
.main-slider .slick-prev{
    left: 7%;
    background: url(../images/prev_btn.png) no-repeat center center !important;
}
.main-slider .slick-next{
    right: 7%;
    background: url(../images/next_btn.png) no-repeat center center !important;
}
.main-slider .slick-dots{
    bottom: 50px;
}
.slick-dotted.slick-slider{
    margin-bottom: 0 !important;
}
.main-slider .slick-dots li{
    width: 10px;
    height: 10px;
    margin: 0 8px;
    padding: 0;
}
.main-slider .slick-dots li button{
    width: 10px;
    height: 10px;
}
.main-slider .slick-dots li button:before{
    font-size: 10px;
    line-height: 1;
    width: 10px;
    height: 10px;
    z-index: 3;
}
.main-slider .slick-dots li button:before{
   display: none;
}
.main-slider .slick-dots li button:after{
    position: absolute;
    top: -5.5px;
    left: -5.5px;
    margin: 0 auto;
    width: 10px;
    height: 10px;
    border: none;
    content: '';
    background: white;
    z-index: 2;
    background: #ffdb00;
}
.main-slider .slick-dots li.slick-active button:after{
    background: #245f00;
}
.main-slider .slide-item{
    position: relative;
}
.main-slider .slide-text{
    color: #fff;
    font-size: 9.66rem;
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: calc((100vw - 1170px)/2);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 1.17;
}
.latest-news{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100px;
}
.latest-news .news-info {
    width: 100%;
}
.latest-news .news {
    position: relative;
}
.latest-news .news a {
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}
.latest-news .news a,
.latest-news .news span{
    color: #fff;
}
.latest-news .news a:hover span {
    text-decoration: underline;
}
.latest-news .news{
    background: #212121;
    padding:  15px 20px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.latest-news .news .more-link i{
    margin-left:  10px;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}
.latest-news .more-link {
    position: absolute;
    right:  20px;
    bottom:  15px;
}
.event-slider .slick-prev,
.event-slider .slick-next,
.links-slider .slick-prev,
.links-slider .slick-next{
    position: absolute;
    top: 50%;
    width: 33px;
    height: 32px;
    display: block;
    opacity: 1;
    z-index: 4;
}
.event-slider .slick-prev:before,
.event-slider .slick-next:before,
.links-slider .slick-prev:before,
.links-slider .slick-next:before{
    display: none;
}
.event-slider .slick-prev,
.links-slider .slick-prev{
    left: 25px;
    background: url(../images/prev_icon.png) no-repeat center center !important;
}
.event-slider .slick-next,
.links-slider .slick-next{
    right: 25px;
    background: url(../images/next_icon.png) no-repeat center center !important;
}
#animal{
    padding-top: 0;
}
#enjoy{
    padding-bottom: 80px;
}
.access-content{
    border:  1px solid #245f00;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    margin:  40px 0;
    padding:  40px;
}
#access-info h4,
#access-info p{
    color: #245f00;
    font-size: 0.98rem;
}
#access-info h4{
    margin: 0 0 10px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #245f00;
    font-weight: 700;
}
#access-info p{
    line-height: 1.79;
    margin-bottom: 25px;
}
.dib{
    display: inline-block !important;
}
.w300{
    width: 300px;
}
.df-btn{
    padding:  10px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.26rem;
    display: block;
    text-align: center;
    text-decoration: none !important;
    position: relative;
    line-height: 1;
    box-shadow: none;
    text-shadow:  none;
    border:  none;
    max-width: 100%;
}
.df-btn i{
    position: absolute;
    right: 12px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.df-btn.green-btn{
    color: #fff;
    background: #245f00;
}
.df-btn.green-btn i{
    color: #fff;
}
.df-btn.green-btn:hover{
    color: #245f00;
    background: #ffdb00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.df-btn.green-btn:hover i{
    color: #245f00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.df-btn.green-btn1:hover{
    color: #000;
    background: #fff;
}
.df-btn.green-btn1:hover i{
    color: #000;
}
.df-btn.yellow-btn{
    color: #000;
    background: #ffdb00;
}
.df-btn.yellow-btn i{
    color: #000;
}
.df-btn.yellow-btn:hover{
    color: #ffdb00;
    background: #245f00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.df-btn.yellow-btn:hover i{
    color: #ffdb00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.df-btn.yellow-btn1:hover{
    color: #000;
    background: #fff;
}
.df-btn.yellow-btn1:hover i{
    color: #000;
}
.question-btn{
    text-align: left;
    border:  3px solid #212121;
    color: #212121 !important;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background: #ffc400;
    overflow: hidden;
    max-height: 46px;
}
.question-btn i{
    color: #ffc400;   
    display: block;
    width: 50px;
    height: 100%;
    background: #212121;
    right: 0;
    text-align: center;
    line-height: 2;
}
.question-btn:hover i,
.question-btn:active i{
    color: #212121;
    width: 0;
     -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    overflow: hidden;
}
.question-btn:hover,
.question-btn:active{
    background: #212121;
    color: #ffc400 !important;
     -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.question-btn .answer{
    display: none;
}
.question-btn:hover .question,
.question-btn:active .question{
    display: none;
     -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.question-btn:hover .answer,
.question-btn:active .answer{
    display: block;
     -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.fb-page, 
.fb-page span, 
.fb-page span iframe { 
    width: 100% !important; 
    max-width: 100% !important; 
}

/*.HOMEPAGE*/

/* HISTORY */

#history-content{
    padding: 220px 0 120px 0;
}
#history-content h4,
#history-content p{
    color: #ffdb00;
}
#history-content h4{
    font-size: 2.77rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}
#history-content p{
    font-size: 1.51rem;
    font-weight: 700;
    line-height: 1.58;
    margin-bottom: 40px;
}
#history-content p.last-child{
    margin-bottom: 0;
}
.info-col{
    display: inline-block;
    vertical-align: middle;
    margin-left:  -3px;
}
.info-col.info-text-col{
    width: 33.33333333%;
}
.info-col.info-img-col{
    width: 66.66666666%;
}
.section-logo{
    max-width:  23%;
    margin-bottom:  35px;
}
.abs-img{
    position: absolute;
}
.posr{
    position: relative;
}
.h1{
    top: 12%;
    left: 0;
    max-width:  23%;
}
.h2{
        top: 37%;
    right: 50px;
    max-width: 20%;
}
.bush1{
    left: 0;
    top: 46%;
    max-width: 20%;
}
.bush2{
    right: 50px;
    top: 65%;
    max-width: 8%;
}
.quote{
    position: absolute;
    right: 0;
    bottom: 105%;
    max-width:  30%;
}
.content-padding-r{
    padding-right: calc((100vw - 1170px) / 2);
}
.content-padding-l{
    padding-left: calc((100vw - 1170px) / 2);
}
.bdr-10{
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.bdr-10-left{
    -moz-border-radius: 10px 0 0 10px;
    -ms-border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
}
.bdr-10-right{
    -moz-border-radius: 0 10px 10px 0;
    -ms-border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    -o-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
}
.padding-r{
    padding-right: 15px;
}
.padding-l{
    padding-left: 15px;
}
.quote-wrapper{
    padding:  20px;
    border:  10px solid #ffdb00;
}
.quote-wrapper p,
.quote-wrapper h4{
    margin-bottom: 0 !important;
}
.quote-wrapper h4{
    margin-top:  15px;
}
.quote-arrow{
    position: absolute;
    bottom: 124%;
    left: 10%;
}
.triangle-bottom-right {
    position: absolute;
    left: 9px;
    top: 15px;
    right: 0;
    margin: 0 auto;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 35px 35px;
    border-color: transparent transparent #212121 transparent;
    z-index: 2;
}
.triangle-bottom-right1 {
    position: absolute;
    left: 0;
    right: 0;
    margin:  0 auto;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 50px;
    border-color: transparent transparent #ffdb00 transparent;
}
.h11{
    bottom: 5%;
    right: 50px;
    max-width:  20%;
}
.special-info{
    margin-top:  -130px;
}
.h13{
    bottom: 6%;
    left: 0;
    width: 15%;
}
.h14{
    bottom: 22%;
    right: 0;
    width: 14%;
}
/* .HISTORY */

/* HOW TO FUN */
.htf-section{
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
}
.htf-section .row{
    overflow: hidden;
}
.htf-section h4{
    font-size: 2.6rem;
    font-weight: 900;
    margin-bottom: 20px;
}
.htf-section p{
    font-size: 1.51rem;
    font-weight: 700;
    line-height: 1.46;
    margin-bottom: 20px;
}
.htf-section .info .note{
    padding:  25px 30px 120px 30px;
    border:  1px solid #245f00;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    background: #fff;
    position: relative;
}
.htf-section .info .note *{
    color: #245f00;
}
.htf-section .info .note h5{
    text-align: center;
    font-size: 1.51rem;
    margin-bottom: 25px;
}
.htf-section .info .note span{
    font-size: 1.01rem;
    line-height: 1.88;
}
.htf-section .info .note .htf3{
    left: 0;
    right: 0;
    margin:  0 auto;
    bottom: 0;
    width: 70%;
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
.how-to-fun-info h3,
.how-to-fun-info p{
    color: #fff;
}
.how-to-fun-info h3{
    font-size: 2.77rem;
    font-weight: 800;
    margin-bottom: 20px;
}
.how-to-fun-info p{
    font-size: 1.51rem;
    font-weight: 700;
    margin-bottom: 60px;
}
.htf-section .message{
    background: #fff;
    border:  10px solid #245f00;
    padding: 35px 30px;
}
.message-triangle{
    position: absolute;
    left: 0;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.message-triangle-lg {
    top: 0;
    left: -10px;
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: transparent #245f00 transparent transparent;
}
.message-triangle-sm {
    top: 8px;
    left: 10px;
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent #ffffff transparent transparent;
}
/* .HOW TO FUN */

/* ANIMAL BOOK */
#page-banner{
    position: relative;
}
#page-banner .banner-info{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}
#page-banner .banner-info .banner-title{
    font-size:  2.77rem;
    font-weight:  900;
    color: #fff;
    margin:  0 0 25px 0;
}
#page-banner .banner-info .banner-links a{
    font-size:  1.01rem;
    font-weight: 700;
    display: inline-block;  
    margin:  0 10px;
    color: #fff !important;
    text-decoration: none !important; 
    letter-spacing: 1px;
    padding:  5px 10px; 
    position: relative; 
}
#page-banner .banner-info .banner-links a:after{
    content:  '';
    position: absolute; 
    left: 0;    
    right: 0;   
    bottom: -3px;
    margin:  0 auto;
    height: 2px;
    width: 0;   
    background: #ffc400;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition:  all 0.3s ease-in-out;
    -webkit-transition:  all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:  all 0.3s ease-in-out;
}
#page-banner .banner-info .banner-links a:hover:after,
#page-banner .banner-info .banner-links a.active:after{
        width: 100%;
        -moz-transition: all 0.3s ease-in-out;
    -ms-transition:  all 0.3s ease-in-out;
    -webkit-transition:  all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:  all 0.3s ease-in-out;
}
#page-banner .banner-info .banner-links a:hover,
#page-banner .banner-info .banner-links a.active{
        color: #ffc400 !important;
}
#animal-book,
#staff-book{
    padding-bottom:  80px;
}
#animal-book .section-text,
#staff-book .section-text{
    margin:  40px 60px;
    font-size: 1.51rem;
    font-weight: 700;
    text-align: center;
}
.flip-card{
    width: 330px;
    height: 330px;
    max-width:  330px;
    background-color: transparent;
    -webkit-perspective: 1000px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
     perspective: 800px;
     margin-bottom: 25px;
}
.card-wrapper{
    text-align: center;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.flip-card:hover .card-wrapper,
.flip-card:active .card-wrapper,
.flip-card:focus .card-wrapper {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.circle-card{
    overflow: hidden;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -webkit-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    position: relative;
}
.card-back, .card-front{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden !important;
    -moz-backface-visibility: hidden !important;
    -o-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}
.card-back{
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
    z-index: 9;
}
.circle-card.bg{
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(33,33,33,0.9);
}
.flip-card:hover .card-back,
.flip-card:active .card-back,
.flip-card:focus .card-back{
    -webkit-backface-visibility: visible !important;
    -moz-backface-visibility: visible !important;
    -o-backface-visibility: visible !important;
    backface-visibility: visible !important;
}
.flip-card:hover .card-back,
.flip-card:active .card-back,
.flip-card:focus .card-back{
    z-index: 3;
}
.flip-card.staff-card:hover .card-front,
.flip-card.staff-card:active .card-front,
.flip-card.staff-card:focus .card-front{
    z-index: 2;
}
.staff-card .circle-card.bg{
    background: rgba(36,95,0,0.9);
}
.card-info{
    padding:  5px;
    position: absolute;
    left: 0;
    right: 0;
    margin:  0 auto;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
.card-back p,
.card-back span{
    color: #fff;
    font-weight: 700;
}
.card-back p{
    font-size: 2.52rem;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.3;
}
.staff-card p{
    font-size: 1.39rem;
    margin-bottom: 15px;
}
.card-back span{
    font-size: 0.88rem;
}
.animal-info .close-btn{
    color: #ffc400 !important;
    background: #212121;
    padding:  10px 30px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    text-decoration: none !important;
    margin-right: 10px;
}
.animal-info > span{
    font-size: 1.26rem;
    font-weight: 700;
    color: #212121;
    display: inline-block;
    vertical-align: middle;
}
.animal-info > span.lg-font{
    font-size: 2.52rem;
}
.animal-info .detail-info{
    margin-top: 15px;
}
.animal-info .detail-info h3{
    font-size: 2.52rem;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 5px;
}
.animal-info .detail-info span{
    color: #212121;
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}
.animal-info .detail-info p{
    font-size: 1.01rem;
    color: #212121;
    margin-bottom: 20px;
    line-height: 1.56;
    font-weight: 700;
}
.animal-info .detail-info .comment{
    border-top: 1px solid #212121;
    padding-top: 20px;
}
.animal-info .detail-info .comment p{
    font-weight: 700;
}
/* .ANIMAL BOOK */

/* PARK MAP */
.page-header{
    padding: 200px 0;
}
/* .PARK MAP */

/* ACCESS */
#page-header{
    padding: 80px 0;
}
#access-content .banner-links{
    text-align: center;
    margin:  60px 0;
}
#access-content .banner-links a{
    color: #222;
    display: inline-block;
    margin: 0 15px;
    font-size: 1.01rem;
    font-weight: 700;
}
#google-map .gg-map-link{
    display: block;
    padding: 20px;
    background: #222;
    color: #ffdb00 !important;
     text-align: center;
    text-decoration: none !important;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-weight: 700;
}
#google-map .gg-map-link:hover{
    background: #245f00;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.custom-wrapper{
    max-width: 76%;
    margin:  0 auto;
}
.ticket-banner{
    margin-top: 30px;
    border: 10px solid #245f00;
    position: relative;
}
.ticket-banner.yellow-border{
    border: 10px solid #ffdb00;
}
.ticket-banner .banner-text{
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ticket-banner .banner-text h4,
.ticket-banner .banner-text span{
    color: #fff;
}
.ticket-banner .banner-text h4{
    font-size: 2.52rem;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-style: italic;
    margin: 0 0 15px;
}
.ticket-banner .banner-text p{
    font-weight: 700;
}
.ticket-banner:hover .bg{
    opacity: 0.8;
}
.ticket-banner .icon{
    position: absolute;
    right: 40px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.info-group{
    margin-bottom: 35px;
}
.info-group h4,
.info-group p{
    color: #245f00;
    font-weight: 700;
}
.info-group h4{
    margin-bottom: 25px;
    padding-bottom:  10px;
    border-bottom: 1px solid #245f00;
}
.info-group p{
    line-height: 2;
}
.info-group.price p{
    margin-bottom: 0;
}
.info-group p.icon-text{
    padding-left:  60px;
    position: relative;
}
.info-group p.icon-text img.icon{
    position: absolute;
    top: 0;
    left: 0;
    -moz-transform: translateY(-50%;);
    -ms-transform: translateY(-50%;);
    -webkit-transform: translateY(-50%;);
    -o-transform: translateY(-50%;);
    transform: translateY(-50%;);
}
.info-group p.icon-text .dot{
    position: absolute;
    left: 20px;
    top: 48px;
    bottom: 0;
    width: 3px;
}
.info-col-l{
    padding-right: 50px;
}
.info-col-r{
    padding-left: 50px;
}
#favor h3{
    color: #fff;
    font-size: 3.15rem;
    font-weight: 900;
    margin-bottom: 25px;
}
#favor h3 i{
    color: #ffa600;
    padding-right:  5px;
}
#favor p{
    color: #fff;
    font-size: 1.51rem;
    font-weight: 700;
    line-height: 1.79;
    margin-bottom: 0;
}
#favor .circle-card.bg{
    height: auto;
}
.company-profile{
    margin-top:  60px;
}
/* .ACCESS */

/* PARK MAP */
#banners{
    padding-bottom:  40px;
}
/* .PARK MAP */

/* FAQ */
.collapse-section{
    margin-bottom:  10px;
}
.collapse-section .collapse-header{
    background: #245f00;
    color: #fff !important;
    text-decoration: none !important;
    padding:  10px 40px;
    font-weight: 700;
    font-size: 1.51rem;
    display: block;
    position: relative;
}
.collapse-section .collapse-header:after{
    content: '-';
    position: absolute;
    top: 50%;
    right: 40px;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.collapse-section .collapse-header.collapsed:after{
    content:  '+';
}
.collapse-section .collapse-header.collapsed{
    color: #245f00 !important;
    background: #ffc400;
}
.collapse-section .collapse-content{
    background: #e9efe5;
    padding:  10px 40px;
}
.collapse-section .collapse-content p{
    font-size: 1.01rem;
    font-weight: 700;
    line-height: 2.06;

}
/* .FAQ */

/* EVENT */
#events .event-text{
    line-height: 1.43;
    font-weight: 700;
    margin-bottom: 40px;
}
#events .event-text a{color: #245f00 !important;}
.event-category {
    margin-bottom: 15px;
}
.event-category .cat-header{
    background: #245f00;
    color: #fff !important;
    text-decoration: none !important;
    padding:  10px 40px;
    font-weight: 700;
    font-size: 1.51rem;
    display: block;
    position: relative;
}
.event-category .event-item{
    padding: 10px 40px 10px 80px;
    background: #cbdac2;
    position: relative;
}
.event-category .event-item:nth-child(2n){
    background: #e9efe5;
}
.event-category .event-item:nth-child(2n) .map-location{
    background: #ffc400;
}
.event-category .event-item i{
    color: #245f00;
    position: absolute;
    right: 20px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.event-category .event-item h3{
    margin-bottom: 10px;
}
.event-category .event-item h3 a{
    color: #000;
    font-size: 1.01rem;
    font-weight: 700;
}
.event-category .event-item span{
    font-size: 1.01rem;
    font-weight: 700;
}
.event-category .event-item .map-location{
    width: 60px;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: #ffdb00;
    font-size: 1.89rem;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 2.5;
    color: #245f00;
}
.event-category.day-off-table  .event-item{
    padding: 17px 40px 17px 80px;
}
.event-category.day-off-table .event-item h3{
    margin-bottom: 0
}
.event-category.day-off-table .event-item h3 a{
    color: #245f00;
    font-size: 30px;
    font-weight: 700;
}
.event-category.day-off-table .event-item span{
    font-size: 1.01rem;
    font-weight: 700;
}
.event-category.day-off-table .event-item .map-location{
    width: 70px;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: #ffdb00;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 2.3;
    color: #245f00;
}
.location-category{
    background: #245f00;
    padding: 5px 15px 5px 64px;
    position: relative;
    margin: 20px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.location-category span{
    color: #fff;
    font-size: 1.51rem;
}
.location-category .location{
    background: #ffdb00;
    color: #245f00;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    text-align: center;
    font-size: 1.89rem;
    font-weight: 700;
    width: 44px;
    line-height: 1.5;
}
.back-link a{
    font-weight: 700;
    color:  #000 !important;
}
/* .EVENT */

/* NEWS */
.news-date{
    font-weight: 700;
    color: #245f00;
}
.dropdown-filter{
    position: relative;
}
.dropdown-filter .display-item {
    display: block;
    position: relative;
    padding: 15px 50px 15px 15px;
    background: #245f00;
    cursor: pointer;
}
.dropdown-filter .display-item label {
    color: #fff;
    font-size: 0.76rem;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    font-weight: 400;
}
.dropdown-filter .display-item i {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #fff;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.dropdown-filter .filter-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
}
.dropdown-filter .filter-list .filter-item {
    display: block;
    position: relative;
    cursor: pointer;
}
.dropdown-filter .filter-list .filter-item a {
    border-top: 1px solid #fff;
    font-size: 0.76rem;
    display: block;
    color: #fff;
    background: #245f00;
    padding: 15px;
}
.widget-area{
    margin-bottom: 40px;
}
.cat-list a{
    display: block;
}
.cat-list a.all-link{
    padding-left: 0 !important;
}
.cat-list a{
    color: #000;
    padding-left:  15px;
    display: block;
    margin-bottom: 15px;
    font-weight: 700;
}
.sidebar-title{
    font-family: 'Arimo', sans-serif;
    font-size: 1.26rem;
    font-weight: 700;
    font-style: italic;
    padding-bottom: 5px;
    border-bottom: 1px solid #796f89;
    margin-bottom: 10px;
    color: #245f00;
}
.sidebar-subtitle{
    font-size: 1.01rem;
    font-weight: 700;
    margin-bottom:  15px;
    color: #245f00;
}
.news-list .news-item{
    margin-bottom: 30px;
}
.news-list .news-item h3 a{
    color: #000;
    font-size: 1.64rem;
    font-weight: 700;
}
.news-list .news-item:hover .bg{
    opacity: 0.8;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.pagination a,
.pagination span,
.pagination i{
    display: inline-block;
    color: #245f00;
    vertical-align: middle;
    font-weight: 700;
}
.pagination .page-numbers{
    color: #ffdb00;
    background: #245f00;
    text-decoration: none;
    padding:  10px 0;
    text-align: center;
    width: 44px;
    margin: 0 15px;
    font-size: 1.01rem;
}
/* .NEWS */

/* DAY OFF */
.day-off-text h2{
    font-size: 36px;
    margin-bottom: 30px;
    font-weight: 700;
}
.day-off-text .intro-text{
    font-size: 14px;
    margin-bottom: 40px;
    font-weight: 700;
}
/* .DAY OFF */

/* PRIVACY */
.privacy-content p,
.df-page-content p{
    font-size: 1.01rem;
    font-weight: 700;
    line-height: 2.38;
    margin-bottom: 35px;
}
/* .PRIVACY */

/* CONTACT */
#contact .red-text{
    color: red;
}
#contact .form-col .wpcf7-form-control{
    font-size:  15px;
    color: #0388cf ;
    background: #eef8fd;
    margin: 20px 0;
    padding: 10px 20px;
    border: none;
    width: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#contact_form p{
    font-weight: 700;
    color: #245f00;
    margin-bottom: 0;
}
#contact_form select{
    border: 1px solid #245f00;
    color: #999999;
}
#contact_form input[type="text"],
#contact_form input[type="email"],
#contact_form textarea{
    background: #e9efe5;
    color: #245f00;
    padding:  20px 15px;
    border: none;
}
#contact_form .form-row{
    margin-bottom: 20px;
}
#contact_form textarea{
    height: 245px;
}
.form-note{
    padding: 30px;
    border:  1px solid #245f00;
    max-height:  300px;
    overflow-y: scroll;
    margin:  60px 0;
}
.form-note p{
    margin-bottom: 15px !important;
}
/* The ckb */
.ckb {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #245f00;
    line-height: 1.5;
}

/* Hide the browser's default checkbox */
.ckb input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #ffdb00;
}

/* When the checkbox is checked, add a blue background */
.ckb input:checked ~ .checkmark {
    background-color: #ffdb00;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.ckb input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.ckb .checkmark:after {
    left: 10px;
    top: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#charNum1 {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #245f00;
    font-size: 1.26rem;
    font-weight: 700;
}
#contact_form button{
    padding: 15px;
}
#contact_form button:hover{
    opacity: 0.8;
    background:  #245f00 !important;
    color: #fff !important;
}
#contact_form button:hover i{
    color: #fff !important;
}
/* .CONTACT */

/*FOOTER*/
.links-slider{
    margin-top:  35px;
    z-index: 2;
}
.links-slider .bg{
    position: relative;
}
#feed{
    margin-top:  35px;   
}
#instafeed{
    margin: 35px -5px 0 -5px;
}
#instafeed .insta-image{
    margin: 0 5px;
}
#links{
    position: relative;
}
#links .tail{
    position: absolute;
    right: 35px;
    top: calc(100% - 78px);
    z-index: 1;
}
#footer-info *{
    color: #245f00 !important;
}
#footer-info h4{
    font-size: 1.4rem;
    font-family: 'Arimo', sans-serif;
    font-weight: 700;
    font-style: italic;
}
#footer-info .social-links{
    padding-left: 15px;
    border-left:  1px solid #245f00;
}
#footer-info .social-links a{
    margin-right: 10px;
}
#footer-info span{
    font-weight: 700;
    margin-top: 10px;
    display: block;
}
#footer-info a{
    font-weight: 700;
    margin-left:  10px;
}
/*.FOOTER*/

/* SUPPORTER */
.support-main-content{
    z-index: 2;
}
.supporter-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: 999;
}
.supporter-banner .overlay {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 997;
    cursor: pointer;
}
.supporter-banner .banner {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    z-index: 998;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.supporter-banner .banner img:hover {
    opacity: 0.9;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
.support-main-content {
    min-height: calc(100vh - 160px);
}
.message-btn {
    margin-top: 60px;
}
.tail-top{
    top: -40px;
    right: 20%;
}
.lamb {
    right: -16%;
    top: 0;
}
.img1 {
    left: 0;
    bottom: 5%;
}
.img2 {
    right: 2%;
    bottom: 2%;
}
.img3 {
    right: 2%;
    bottom: -100px;
    z-index: 2;
}
.img4 {
    right: 8%;
    bottom: 220px;
}
.img5 {
    top: 5%;
    left: 15%;
}
.img6 {
    right: 12%;
    bottom: 20px;
}
.grass1 {
    left: 8%;
    bottom: -30px;
}
.grass2 {
    right: 0;
    bottom: -30px;
}
.grass3 {
    left: 0;
    bottom: -30px;
}
.grass4 {
    left: 8%;
    bottom: -33px;
}
.grass5 {
    right: 0;
    bottom: -25px;
}
.message2 {
    left: 20%;
    bottom: -10px;
}
.message3 {
    right: 5%;
    bottom: -160px;
}
.support-content {
    position: relative;
    overflow: visible;
}
.support-content .border-header {
    display: inline-block;
    position: relative;
    margin:  0 0 45px;
    padding:  0 40px;
    font-size: 38px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}
.support-content .border-header.green-header{
    color: #006D31;
    padding:  0;
}
.support-content .border-header.green-header::after{
    background: url('../images/header_border_green.png') repeat-x center;
}
.support-content .border-header.white-header{
    color: #fff;
    padding:  0;
}
.support-content .border-header.white-header::after{
    background: url('../images/header_border_white.png') repeat-x center;
}
.support-content .border-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    margin: 0 auto;
    background: url('../images/header_border.png') repeat-x center;
}
.support-content p {
    font-size: 19px;
    line-height: 1.37;
    max-width: 855px;
    margin:  0 auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}
#news-message p,
#precaution p{
    font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: normal;
    line-height: 1.7;
}
.support-content p.white-txt{
    color: #fff;
}
.support-content .info-table {
    border:  1px solid #000;
}
.support-content .info-table .table-col {
    text-align: center;
    border-left: 1px solid #000;
}
.support-content .info-table .table-col:first-child {
    border:  none;
}
.support-content .info-table .header {
    border-bottom: 1px solid #000;
}
.support-content .info-table .header,
.support-content .info-table .info {
    padding: 20px 10px;
}
.support-content .info-table .header h4,
.support-content .info-table .info p {
    font-size: 24px;
    line-height: 1.3;
    margin:  0;
}
.support-content .info-table .info {
    background: #fff;
}
.support-content .info-table .header {
    background: #FFDA5F;
}
#supporter-passport {
    min-height: 800px; 
}
.large-message {
    margin-top: 70px
}
.large-message img{
    display: inline-block;
    vertical-align: top;
}
.large-message .elephant {
    margin-top: 70px;
}
.benefits {
    margin-top: 50px;
}
.benefits .b-item {
    text-align: center;
}
.benefits .b-item h4 {
    color: #006D31;
    font-size: 23px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 1.33;
    margin: 20px;
    min-height: 60px;
}
.benefits .b-item p {
    color: #006D31;
    font-size: 17px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    line-height: 1.18;
}
#precaution {
    min-height: 450px;
}
#precaution p {
    max-width: 725px;
    margin:  0 auto; 
}
#purchase .btn-img:hover {
    opacity: 0.8;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
#share a {
    margin:  0 20px;
    display: inline-block;
}
#purchase h4 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 35px;
}
#purchase h4 br {
    display: none;
}
#purchase .container {
    position: relative;
}
.pig {
    position: absolute;
    right: -80px;
    bottom: -80px;
}
/* .SUPPORTER */

/* NEW LANDING */
.img-lion1 {
    bottom: -60px;
    left: 0;
}
.img-lion2 {
    top: 2%;
    right: -5%;
}
.new-landing-section .top-message {
    margin-left: -180px;
}
.new-landing-section .sub-content-header {
    font-size: 20px;
    margin-bottom: 15px;
}
.giraffe {
    right: -40px;
    bottom: -10px;
    z-index: 2;
}
.whitetiger {
    left: 0;
    bottom: -90px;
    z-index: 2;
}
#support-covid.new-landing-section p {
    font-size: 18px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: 30px;
}
.new-landing-section .note {
    margin-top: 60px;
    font-size: 15px !important;
}
.img4-new {
    right: 0;
    bottom: 160px;
}
.img5-new {
    left: -32px;
    bottom: -95px;
}
#course h3,
#course p.value {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px !important;
    font-weight: 700;
    color: #006D31;
    text-align: center;
}
#course h3 {
    margin: 15px 0 5px 0;
}
.course-info {
     min-height: 90px;
}
#course p.detail {
    font-size: 15px;
    margin: 15px 0;
    font-weight: 500;
}
.course-note {
    display: inline-block;
    margin-top: 60px;
    font-weight: 700;
    font-size: 20px;
    color: #006D31 !important;
    font-family: 'Noto Sans JP', sans-serif;
}
.course-note a {
    color: #006D31 !important;
    text-decoration: underline;   
}
.course-img .bg {
    border-radius: 28px;
}
.alpaca {
    right: -260px;
    bottom: -230px;
    z-index: 2;
}
.img6-new {
    left: 0;
    bottom: -35px;
    z-index: 2;
}
.thank-you {
    right: 150px;
    bottom: 10px;
    z-index: 2;
}
#our-message .grass4 {
    bottom: -63px;
}
#our-message p {
    font-size: 17px;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif;
}
#our-message a:hover {
    opacity: 0.8;
}

/* .NEW LANDING */

/* SUPPORT */
.support-section:not(:last-child) {
    margin-bottom: 80px;
}

.support .main-banner img {
    max-width: 107%;
}

.support .support-banner {
    text-align: center;
}

.support.support-banner img {
    max-width: 85%;
}
.support h4 {
    font-size: 20px;
    font-family: 'M PLUS 1p', 游明朝体, "Yu Mincho", YuMincho, serif;
    font-weight: 900;
    color: #245F00;
    margin:  0 0 10px 0;
}
.support p {
    font-size: 16px;
    font-family: 'M PLUS 1p', 游明朝体, "Yu Mincho", YuMincho, serif;
    font-weight: 500;
}

.support a:not(.df-btn) {
    color: #245F00;
    text-decoration: none !important;
    font-weight: 700;
}

.support a:not(.df-btn):hover {
    text-decoration: underline !important;
}

.support .contact-block {
    margin: 15px 0;
}

.support .df-btn {
    display: inline-block;
    font-size: 11px;
    padding:  10px 20px 10px;
}

.support .df-btn i {
    right: 5px;
}

.support .contact-block .heading {
    padding: 5px 0;
    text-align: center;
    color:  #fff;
    font-family: 'M PLUS 1p', 游明朝体, "Yu Mincho", YuMincho, serif;
    font-size: 23px;
    font-weight: 700;
    background: #245F00;
    border: 2px solid #245F00;   
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
}

.support .cblock .content {
    align-content: center;
    padding: 20px;
    border: 2px solid #245F00;   
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    flex: 0 1 auto;
    font-size: 23.5px;
    font-weight: 700;
    font-family: 'M PLUS 1p', 游明朝体, "Yu Mincho", YuMincho, serif
}

.support .cblock:first-child .content {
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
}

.support h5 {
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 5px;
}

.contact-info-text {
    font-weight: 500;
    font-size: 16px;
}

.support-inquiry {
    position: relative;
}

.support-inquiry .heading {
    position: relative;
}

.support-inquiry h4 {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 5px 10px 5px 0;
    background: #fff;
    z-index: 2;
}

.support-inquiry .heading:after {
    content:  '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #245F00;
    z-index: 1;
}

.support-inquiry p {
    margin-bottom: 0;
}

.support-inquiry .goat-img {
    position: absolute;
    right: 50px;
    top: 50%;
    z-index: 2;
    text-align: right;
    min-width: 570px;
    max-width: 50%;
}

.support-inquiry .goat-img .goat {
    max-width: 28%;
    display: inline-block;
    vertical-align:  top;
}

.support-inquiry .goat-img .bubble {
    max-width: 70%;
    display: inline-block;
    vertical-align:  top;
}

/* .SUPPORT */

/**
 * RESPONSIVE
 */
@media screen and (max-width:1600px) {

}
@media screen and (max-width:1440px) {
    .pc-img.top-message {
        max-width: 90%;
    }
    .lamb {
        right: -22%;
    }
    .img1 {
        left: 9%;
    }
    .img2 {
        right: 5%;
    }
    .img4 {
        right: 3%;
    }
    .img5 {
        left: 4%;
    }
    .img6 {
        right: 2%;
    }
}
@media screen and (max-width:1366px) {
    .img4 {
        right: 0;
    }
}
@media screen and (max-width:1280px) {

}
@media screen and (max-width:1024px) {
    .site-nav ul{
        display: block !important;
    }
    .site-nav ul li {
        opacity: 0;
        display: inline-block !important;
        width: 33.33333333333%;
        margin-left: -3px;
        padding: 30px 0;
    }
    .box-info.box-lg, .access-content .col-xl-8{
        margin-bottom: 30px;
    }
    .zz-border:before{
       bottom: 99.9%;
    }
    .zz-bottom.zz-border:before{
        top: 99%;
        bottom: inherit;
    }
    .zz-yellow:before{
       background: 
            linear-gradient(white 25%, transparent 0%),
            linear-gradient(45deg, #ffc400 35%, transparent 35%) 0 100%,
            linear-gradient(-45deg, #ffc400 44%, transparent 33%)0 35%;
        background-repeat: repeat-x;
        background-size: 0px 100%, 35px 35px, 35.1px 35px;
    }
    .zz-bottom.zz-yellow:before{
       background: 
            linear-gradient(-45deg, transparent 25px, #ffc400 0), 
            linear-gradient(45deg, transparent 25px, #ffc400  0);
        background-repeat: repeat-x;
        background-position: left bottom;
        background-size: 30px 32px;
    }
    .zz-black:before{
       background: 
            linear-gradient(white 25%, transparent 0%),
            linear-gradient(45deg, #212121 35%, transparent 35%) 0 100%,
            linear-gradient(-45deg, #212121 44%, transparent 33%)0 35%;
        background-repeat: repeat-x;
        background-size: 0px 100%, 35px 35px, 35.1px 35px;
    }
    .zz-white:before{
        background: 
             linear-gradient(white 25%, transparent 0%),
             linear-gradient(45deg, #ffffff 35%, transparent 35%) 0 100%,
             linear-gradient(-45deg, #ffffff 44%, transparent 33%)0 35%;
        background-repeat: repeat-x;
        background-size: 0px 100%, 35px 35px, 35.1px 35px;
    }
    .zz-white:before{
        bottom: 99.9%;
    }
    #page-banner .bg{
        padding-bottom: 40% !important;
    }
    .animal-list .row{
        justify-content: space-around !important;
    }
    .content-padding-l {
        padding-left: calc((100vw - 960px) / 2);
    }
    .content-padding-r {
        padding-right: calc((100vw - 960px) / 2);
    }
    .htf-section h4 {
        font-size: 1.7rem;
    }
    .htf-section p {
        font-size: 1.2rem;
    }
    .htf-section .info .note {
        padding: 25px 15px 120px 15px;
    }
    .how-to-fun-content .df-btn.green-btn{
        font-size: 1rem;
    }
    .content-padding-r{
        padding-right:  30px;
    }
    .content-padding-l{
        padding-left:  30px;
    }
    #animal-book .justify-content-between,
    #staff-book .justify-content-between{
        justify-content: space-around !important;
    }
    #staff-book:before,
    .tiger-book:before{
        bottom: 99.9%;
    }
    .question-btn{
        font-size: 0.8rem;
    }
    
    /* SUPPORTER */
    .lamb {
        right: -28%;
    }
    .img1 {
        left: 3%;
    }
    .img3 {
        bottom: -130px;
    }
    .img4 {
        right: 10%;
        bottom: 50%;
    }
    .img5 {
        left: 0;
    }
    .img6 {
        right: 0;
    }
    #supporter-passport {
        min-height: 1200px;
    }
    .large-message .elephant {
        margin-top: 300px;
    }
    .message-lg {
        margin-left: -220px;
    }
    .benefits .b-item h4{
        font-size: 18px;
        margin-bottom: 15px;
        min-height: 40px;
    }
    .benefits .b-item p{
        font-size: 14px;
    }
    #precaution p {
        max-width: 60%;
    }
    #share{
        padding: 80px 0;
    }
    #purchase {
        padding-bottom: 250px;
    }
    .pig {
        right: 0;
        bottom: -200px;
    }
    .img-lion1 {
        max-width: 20%;
    }
    .img-lion2 {
        right: 0;
    }
    .new-landing-section .top-message {
        max-width: 70%;
    }
    .giraffe {
        right: -40px;
        bottom: 260px;
        max-width: 120px;

    }
    .whitetiger {
        left: 30px;
        max-width: 120px;
    }
    .img4-new {
        right: 0;
        bottom: -60px;
        max-width: 120px;
    }
    .img5-new {
        bottom: -75px;
        max-width: 140px;
    }
    #course h3, #course p.value {
        font-size: 18px !important;
    }
    #course p.detail {
        font-size: 14px
    }
    .alpaca {
        right: -100px;
        bottom: -140px;
        max-width: 170px;
    }
    .img6-new {
        left: 0;
        bottom: -45px;
        max-width: 120px;
    }
    .course-note {
        font-size: 16px
    }
    .thank-you {
        right: 0;
        bottom: 30px;
    }
    #our-message p {
        font-size: 15px
    }
    .support .cblock .content {
        min-height: 140px;
    }
    .support .cblock .content {
        font-size: 21px;
    }
    /* .support .cblock:first-child .content,
    .support p, 
    .contact-info-text {
        font-size: 14px;
    } */

    .support .main-banner img {
        max-width: 100%;
    }
    .support-inquiry .goat-img {
        min-width: 50%;
    }
}
@media screen and (max-width:768px) {
    /* COMMON */
    .mobile-content{
        display: block;
    }
    .desktop-content{
        display: none;
    }
    /* .COMMON */
    header{
        padding: 30px;
    }
    .main-slider .slide-text{
        left: calc((100vw - 720px)/2);
    }
    .main-menu-section{
        position: absolute;
        top: 87px;
        z-index: 2;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        display: none;
    }
    .site-nav{
        padding-top: 80px;
    }
    .nav-active .main-menu-section{
        display: block;
    }
    .ticket-link{
        margin-right: 30px;
    }
    .header-info{
        display: none;
    }
    .top-header{
        display: none !important;
    }
    .langs{
        display: none;
        text-align: right;
    }
    header.scrolled #main-nav{
        top: 10px;
    }
    #scrolltop {
    	right:  25px;
    }
    .slider-banners{
        right: 20px;
        top: 12%;
    }
    .slider-banner-bottom {
        width: 25%;
        right:  25px;
    }
    .main-slider .slide-text{
        font-size: 7.56rem;
    }
    #footer-info .d-flex {
        display: block !important;
    }
    .left-footer-info{
        display: block;
        text-align: center;
        margin:  30px 0;
    }
    #footer-info .social-links{
        border:  none;
    }
    .ticket-banner .bg{
        padding-bottom: 20%;
    }
    #favor h3{
        font-size: 2.5rem;
    }
    #favor p{
        font-size: 1.2rem;
    }
    .section-header .section-title{
        font-size: 2.4rem;
    }
    #page-banner .bg {
        padding-bottom: 50% !important;
    }
    #animal-book .section-text,
    #staff-book .section-text{
        font-size: 1.3rem;
        line-height: 1.5;
    }
    #animal-modal .col-lg-6{
        margin: 15px 0;
    }
    .modal{
        top: 0; 
        padding: 100px 0;
    }
    .ticket-banner .bg{
        padding-bottom: 40%;
    }
    .ticket-banner .icon{
        display: none;
    }
    #history-content .section1{
        margin-top: 100px;
    }
    #history-content .section1 .info-text-col,
    #history-content .section1 .info-img-col{
        padding: 0 15px;
    }
    #history-content .info-text-col, 
    #history-content .info-img-col{
        width: 100%;
        padding:  0 30px;
    }
    #history-content .content-padding-r,
    #history-content .content-padding-l{
        padding:  0 !important;
    }
    .quote {
        left: 0;
        max-width: 14%;
        margin: 0 auto;
    }
    .h11 {
        bottom: 35%;
    }
    .h13{
        bottom: -14%;
        width: 25%;
    }
    .h14 {
        bottom: 32%;
        width: 24%;
    }
    .htf-section .message {
        padding: 20px 15px;
    }
    #event-detail{
        padding-bottom: 200px;
    }
    .news-item .bg{
        margin-top: 15px;
    }
    .section-logo{
        max-width: 38%;
    }
    .latest-news .news {
        padding:  15px 20px 50px;
    }
    /* SUPPORTER */
    .tail-top {
        right: inherit;
        left: 20%;
    }
    .grass2 {
        display: none;
    }
    .support-main-content {
        min-height: 1024px;
        margin-top: -2px;
    }
    .img1 {
        top: 110%;
        bottom: inherit;
        left: 13%;
    }
    .img2 {
        top: 130%;
        right: 30%;
        bottom: inherit;
    }
    .img3 {
        bottom: -10px;
    }
    .img4 {
        top: -25%;
        right: inherit;
        bottom: inherit;
        left: 10%;
    }
    .lamb {
        top: 68%;
        right: -45%;
    }
    .support-content .info-table {
        border: 1px solid #000;
        background: #fff;
    }
    #news-message {
        min-height: 800px;
    }
    #supporter-passport {
        min-height: 1400px;
    }
    .message2 {
        left: 0;
    }
    .message3 {
        right: -20%;
        bottom: 10%;
    }
    .benefits .b-item {
        width: 100%;
        max-width: 100%;
        display: block;
        margin-bottom: 60px;
    }
    .benefits .row {
        display: block;
    }
    #precaution {
        min-height: 800px;
    }
    #precaution p {
        max-width: 90%;
    }
    .img5 {
        top: 48%;
        left: 8%;
    }
    .img6 {
        right: 8%;
        bottom: 10%;
    }
    .support-main-content.zz-bottom.zz-border:before {
        top: 99.9%;
        bottom: inherit;
    }
    #purchase .col-lg-6:first-child {
        margin-bottom: 100px;
    }
    .pig {
        right: 0;
        bottom: -200px;
    }
    .support-main-content.new-landing-section {
        min-height: inherit;
    }
    .img-lion1 {
        max-width: 27%;
    }
    .message-btn img {
        max-width: 70%;
    }
    .giraffe {
        bottom: inherit;
        top: -100px;
    }
    #news-message.new-landing-section {
        min-height: inherit;
    }
    #support-covid.new-landing-section p,
    #news-message.new-landing-section p {
        font-size: 14px
    }
    #course .course {
        margin-bottom: 30px;
    }
    .img6-new {
        bottom: -75px;
    }
    #our-message p {
        margin-top: 30px;
    }
    .support-inquiry .goat-img {
        right: 0;
        top:  100%;
    }
    .slider-banners {
        width: 60%;
        max-width: 60%;
    }

    .day-off-banner {
        width: 40%;
    }

    .slider-support-banner {
        width: 50%;
        max-width: 240px;
        margin-right: 15px;
    }
}
@media screen and (max-width:736px) {
    .main-slider .slide-text {
        left: calc((100vw - 540px)/2);
    }
    .img-lion2, .thank-you {
        max-width: 100px;
    }
}
@media only screen and (max-width:736px) {
    .main-slider .bg{
        min-height: 736px;
    }
    #main-slider{
        position: relative;
    }
    .img4 {
        top: -18%;
    }
    .support-content .info-table .header h4, .support-content .info-table .info p {
        font-size: 18px;
    }
    .message-lg {
        margin-left: 0;
        position: absolute;
        left: 16%;
    }
    #precaution p {
        max-width: 100%;
    }
    .img-lion2 {
        right: -50px;
    }
    .new-landing-section .top-message {
        margin-left: -60px;
    }
}
@media only screen and (max-width:667px) {
    .main-slider .bg{
        min-height: 736px;
    }
    #main-slider{
        position: relative;
    }

    .how-to-fun-content .note.posr{
        margin-bottom: 130px;
    }
    .collapse-section .collapse-header{
        padding: 10px 40px 10px 20px;
    }
    .collapse-section .collapse-header:after {
        right: 20px;
    }
}
@media only screen and (max-width:568px) {
    .main-slider .bg{
        min-height: 736px;
    }
    #main-slider{
        position: relative;
    }
    .img-lion2 {
        right: 20px;
        max-width: 80px;
    }
}
@media screen and (max-width:480px) {
    .ticket-link{
        margin-right: 15px;
    }
    .ticket-link img{
        max-width:  100px;
    }
    .logo-section img{  
        max-width: 120px;
    }
    .main-slider .slide-text{
        top: 40%;
        left: 0;
        padding:  0 15px;
        font-size: 3.5rem;
    }
    .event-slider .bg{
        /* padding-bottom: 50% !important; */
    }
    .box-info.box-lg .info h3{
        font-size: 1.89rem;
    }
    .box-info .info h4{
        font-size: 1.26rem;
    }
    .access-content{
        padding:  15px;
    }
    #links .tail {
        max-width: 130px;
    }
    .links-slider .bg{
        /* padding-bottom: 50%; */
    }
    #footer-info *{
        font-size: 0.69rem;
    }
    .site-nav ul li{
        width: 50%;
        padding:  15px 10px;
    }
    .site-nav {
        padding: 70px 30px 20px 30px;
    }
    .main-menu-section{
        top: 65px;
    }
    .site-nav ul > li a,
    .main-menu-section a{
        font-size: 0.76rem;
    }
    .site-nav ul li:last-child{
            margin-left: -50%;
    }
    .site-nav .sns-links{
        position: absolute;
        bottom: 45px;
        right: 30px;
        margin-top:  0;
    }
    .zz-white:before{
        bottom: 100%;
    }
    .info-col-r {
        padding-left: 15px;
    }
    .custom-wrapper {
        max-width: 90%;
    }
    .ticket-banner .bg {
        padding-bottom: 30%;
    }
    .ticket-banner .banner-text h4 {
        font-size: 2rem;
    }
    .ticket-banner .icon{
        right: 10px;
    }
    #favor h3 {
        font-size: 1.8rem;
    }
    #favor .col-sm-9{
        margin-top:  30px;
        text-align: center;
    }
    #favor p{
        font-size: 0.88rem;
    }
    #access-content .banner-links a{
        font-size: 0.88rem;   
        margin: 0 5px;
    }
    .info-group h4{
        font-size: 1.2rem;
    }
    #page-banner .bg {
        padding-bottom: 110% !important;
    }
    #page-banner .banner-info .banner-title{
        font-size: 2rem;
    }
    .modal-dialog{
        width: 100%;
    }
    #contact_form button{
        margin-bottom: 15px;
    }
    .ckb, #contact_form p{
        font-size: 12px;
    }
    .content-detail h1{
        font-size: 1.6rem;
    }
    .content-detail h2{
        font-size: 1.51rem;
    }
    .content-detail h3{
        font-size: 1.26rem;
    }
    .content-detail h4{
        font-size: 1.13rem;
    }
    .content-detail h5{
        font-size: 1.01rem;
    }
    .content-detail p{
        font-size: 0.76rem;
        line-height: 1.8;
    }
    #events .event-text{
        font-size: 0.76rem;
    }
    .event-category .event-item h3{
        font-size: 1.51rem;
    }
    .event-category .cat-header{
        font-size: 1.51rem;
    }
    .collapse-section .collapse-content {
        padding: 10px 20px;
    }
    #purchase h4 br {
        display: block;
    }
    #purchase h4 {
        margin-bottom: 20px;
    }
    .pig {
        right: 30px;
        bottom: -200px;
    }
}
@media screen and (max-width:414px) {
    .h1 {
        top: 18%;
        left: 10px;
        max-width: 27%;
    }
    .h2 {
        top: 37%;
        right: 20px;
        max-width: 25%;
    }
    .main-menu-section a:first-child{
    	padding-left: 0;
	}
	.main-menu-section a:last-child{
	    padding-right: 0;
	}
    .main-menu-section a{
        padding: 0 10px;
    }
    #history-content p {
        font-size: 1.2rem;
    }
    #history-content h4{
        font-size: 1.8rem;
    }
    .quote {
        max-width: 24%;
    }
    #history-content p {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    .bush2 {
        right: 0px;
        max-width: 14%;
    }
    .quote-wrapper h4{
        font-size: 2.6rem;
    }
    .quote-wrapper{
        padding: 10px;
    }
    .h11 {
        bottom: 43%;
        right: 10px;
        max-width: 30%;
    }
    .info-img-col.small-img img{
        max-width:  80%;
    }
    .special-info {
        margin-top: -50px;
    }
    .content-padding-r{
        padding-right:  0;
    }
    .content-padding-l{
        padding-left:  0;
    }
    .how-to-fun-content .info{
        padding:  15px;
    }
    #how-to-fun2 .df-btn.yellow-btn,
    .how-to-fun-content .df-btn.green-btn{
        display: block;
        width: 100%;
    }
    .how-to-fun-info h3{
        font-size: 2rem;
    }
    .how-to-fun-info p{
        font-size: 1.2rem;
    }
    #how-to-fun2 .col-md-6{
        margin:  15px 0;
    }
    .privacy-content p,
    .df-page-content p {
        font-size: 0.8rem;
        line-height: 2;
    }
    #animal-book .section-text,
    #staff-book .section-text{
        margin: 40px 0;
    }
    .tiger-book-content .info{
        padding:  30px 15px;
    }
    .tiger-book-content .bg{
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -webkit-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }
    .tiger-book .section-text{
        font-size: 1rem !important;
        padding:  0 15px;
    }
    .event-category.day-off-table .event-item h3 a{
        font-size: 20px;
    }
    .event-category.day-off-table .event-item .map-location{
        font-size: 20px;
        line-height: 3.3;
    }

    /* SUPPORTER */
    .support-main-content {
        min-height: 880px;
    }
    .lamb {
        top: 72%;
        right: -64%;
    }
    .img1 {
        top: 110%;
        left: 2%;
    }
    .img3 {
        right: 0;
        bottom: -48px;
    }
    .img2 {
        top: 124%;
        right: 18%;
    }
    .img4 {
        left: 0;
        top: -25%;
    }
    .support-content .border-header {
        font-size: 20px;
    }
    .support-content p {
        font-size: 14px;
        line-height: 1.5;
    }
    .support-content .info-table .table-col {
        border-left: none;
    }
    .support-content .info-table .header {
        border-top: 1px solid #000;
    }
    .support-content .info-table .table-col:first-child .header {
        border-top: none;
    }
    .large-message .elephant {
        margin-top: 160px;
        margin-left: -120px;
    }
    .message3 {
        right: -40%;
        bottom: 5%;
    }
    .message2 {
        left: -20px;
    }
    .img5 {
        top: 41%;
        left: 0;
    }
    .img6 {
        right: 0;
        bottom: 8%;
    }
    #purchase .btn-img{
        max-width: 90%
    }
    .img-lion2 {
        right: 20px;
        max-width: 110px;
        top: -150px;
    }
    .new-landing-section .top-message{
        max-width: 90%;
        margin-left: -50px;
    }
    .message-btn img {
        max-width: 90%;
    }
    .img-lion1 {
        bottom: -50px;
        max-width: 47%;
    }
    .giraffe {
        right: -10px;
        top:  -140px;
        max-width: 90px;
    }
    #our-message a img {
        max-width: 180px;
    }
    .thank-you {
        bottom: -10px;
    }
    .whitetiger {
        bottom: -75px;
    }
    .new-landing-section .note {
        font-size: 13px;
    }
    .support-inquiry .goat-img {
        top:  110%;
        max-width: 80%
    }
    .slider-banners {
        max-width: 65%;
        width: 65%
    }
    .support p,
    .contact-info-text {
        font-size: 14px
    }
}
@media screen and (max-width:375px) {
    .box-info .info h3{
        font-size: 1.39rem;
    }
    
    .event-category .event-item h3{
        font-size: 1.2rem;
    }
    .event-category .cat-header{
        font-size: 1.2rem;
    }
    .lamb {
        top: 68%;
        right: -55%;
        width: 90%;
    }
    .img2 {
        top: 127%;
        right: 16%;
    }
    .support-content p {
        font-size: 14px;
    }
    .img4 {
        top: -26%;
    }
    .support-content .border-header{
        padding: 0;
    }
    .message2 {
        left: -30px;
        bottom: -30px;
    }

}
@media screen and (max-width:320px) {
    header {
        padding: 30px 15px;
    }
    .ticket-link {
        margin-right: 10px;
    }
    .ticket-link img {
        max-width: 80px;
    }
    .site-nav ul > li a, .main-menu-section a {
        font-size: 0.6rem;
    }
    .site-nav ul li{
        padding: 15px 5px;
    }
    .site-nav .sns-links img{
        display: none;
    }
    .site-nav .sns-links{
        right: 50px;
    }
    .htf-section .info .note h5{
        font-size: 1.2rem;
    }
    .htf-section .info .note span{
        font-size: 0.8rem;
    }
    .htf-section h4 {
        font-size: 1.2rem;
    }
    .htf-section p {
        font-size: 0.8rem;
    }
    .tail-top {
        top: -60px;
    }
    .lamb {
        top: 70%;
    }
    .img1 {
        width: 45%;
    }
    .support-main-content {
        min-height: 770px;
    }
    .support-content .border-header {
        font-size: 19px;
    }
    .img4 {
        top: -29%;
    }
    .img3 {
        bottom: -70px;
    }
    .support-content .info-table .header h4, .support-content .info-table .info p {
        font-size: 16px;
    }
    #supporter-passport {
        min-height: 1250px;
    }
    .message3 {
        bottom: 3%;
    }
    .message2 {
        left: 0;
        bottom: -18px;
        width: 70%;
    }
    #share a {
        margin: 0 4px;
    }

}
/* IPAD PRO ONLY */
/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .main-slider .slide-text{
        left: 0;
        right: 0;
        padding: 0 90px;
        font-size: 7.56rem;
    }
    .main-slider .slick-prev{
        left: 3%;
    }
    .main-slider .slick-next{
        right: 3%;
    }
}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    /* SUPPORTER */
    .tail-top {
        right: inherit;
        left: 20%;
    }
    .grass2 {
        display: none;
    }
    .support-main-content {
        min-height: 1024px;
        margin-top: -2px;
    }
    .img1 {
        top: 110%;
        bottom: inherit;
        left: 13%;
    }
    .img2 {
        top: 130%;
        right: 30%;
        bottom: inherit;
    }
    .img3 {
        bottom: -10px;
    }
    .img4 {
        top: -25%;
        right: inherit;
        bottom: inherit;
        left: 10%;
    }
    .lamb {
        top: 68%;
        right: -45%;
    }
    .support-content .info-table {
        border: 1px solid #000;
        background: #fff;
    }
    #news-message {
        min-height: 800px;
    }
    #supporter-passport {
        min-height: 1400px;
    }
    .message2 {
        left: 0;
    }
    .message3 {
        right: -20%;
        bottom: 10%;
    }
    .benefits .b-item {
        width: 100%;
        max-width: 100%;
        display: block;
        margin-bottom: 60px;
    }
    .benefits .row {
        display: block;
    }
    #precaution {
        min-height: 800px;
    }
    #precaution p {
        max-width: 90%;
    }
    .img5 {
        top: 48%;
        left: 8%;
    }
    .img6 {
        right: 8%;
        bottom: 10%;
    }
    .support-main-content.zz-bottom.zz-border:before {
        top: 99.9%;
        bottom: inherit;
    }
    #purchase .col-lg-6:first-child {
        margin-bottom: 100px;
    }
    .pig {
        right: 0;
        bottom: -200px;
    }
    .support-inquiry .goat-img {
        right: 0;
        top:  100%;
    }
    .slider-banners {
        max-width: 60%;
        width: 60%
    }
    .top-header{
        display: none !important;
    }
    .langs{
        display: none;
        text-align: right;
    }
    header.scrolled #main-nav{
        top: 10px;
    }
    .slider-banners{
        right: 20px;
        top: 12%;
    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    /* SUPPORTER */
    .lamb {
        right: -28%;
    }
    .img1 {
        left: 3%;
    }
    .img3 {
        bottom: -130px;
    }
    .img4 {
        right: 10%;
        bottom: 50%;
    }
    .img5 {
        left: 0;
    }
    .img6 {
        right: 0;
    }
    #supporter-passport {
        min-height: 1200px;
    }
    .large-message .elephant {
        margin-top: 300px;
    }
    .message-lg {
        margin-left: -220px;
    }
    .benefits .b-item h4{
        font-size: 18px;
        margin-bottom: 15px;
        min-height: 40px;
    }
    .benefits .b-item p{
        font-size: 14px;
    }
    #precaution p {
        max-width: 60%;
    }
    #share{
        padding: 80px 0;
    }
    #purchase {
        padding-bottom: 250px;
    }
    .pig {
        right: 0;
        bottom: -200px;
    }
    .img-lion1 {
        max-width: 20%;
    }
    .img-lion2 {
        right: 0;
    }
    .new-landing-section .top-message {
        max-width: 70%;
    }
    .giraffe {
        right: -40px;
        bottom: 260px;
        max-width: 120px;

    }
    .whitetiger {
        left: 30px;
        max-width: 120px;
    }
    .img4-new {
        right: 0;
        bottom: -60px;
        max-width: 120px;
    }
    .img5-new {
        bottom: -75px;
        max-width: 140px;
    }
    #course h3, #course p.value {
        font-size: 18px !important;
    }
    #course p.detail {
        font-size: 14px
    }
    .alpaca {
        right: -100px;
        bottom: -140px;
        max-width: 170px;
    }
    .img6-new {
        left: 0;
        bottom: -45px;
        max-width: 120px;
    }
    .course-note {
        font-size: 16px
    }
    .thank-you {
        right: 0;
        bottom: 30px;
    }
    #our-message p {
        font-size: 15px
    }
    .support .cblock .content {
        min-height: 140px;
    }
    .support .cblock .content {
        font-size: 18px;
    }
    /* .support .cblock:first-child .content,
    .support p, 
    .contact-info-text {
        font-size: 14px;
    } */

    .support .main-banner img {
        max-width: 100%;
    }

    .day-off-banner {
        width: 40%;
    }

    .slider-support-banner {
        width: 50%;
        max-width: 240px;
        margin-right: 10px;
    }

}

/**
* ANIMATION KEYFRAME
*/
.site-nav.active .menu>li:nth-child(1) {
    animation: header_on1 .25s ease-in-out .2s forwards
}

.site-nav.active .menu>li:nth-child(2) {
    animation: header_on1 .25s ease-in-out 225ms forwards
}

.site-nav.active .menu>li:nth-child(3) {
    animation: header_on1 .25s ease-in-out .25s forwards
}

.site-nav.active .menu>li:nth-child(4) {
    animation: header_on1 .25s ease-in-out 275ms forwards
}

.site-nav.active .menu>li:nth-child(5) {
    animation: header_on1 .25s ease-in-out .3s forwards
}

.site-nav.active .menu>li:nth-child(6) {
    animation: header_on1 .25s ease-in-out 325ms forwards
}

.site-nav.active .menu>li:nth-child(7) {
    animation: header_on1 .25s ease-in-out .35s forwards
}

.site-nav.active .menu>li:nth-child(8) {
    animation: header_on1 .25s ease-in-out 375ms forwards
}
.site-nav.active .menu>li:nth-child(9) {
    animation: header_on1 .25s ease-in-out .4s forwards
}
@keyframes header_on1 {
    0% {
        opacity: 0;
        transform: translate(0, -10px) scale(1.05)
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1)
    }
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@keyframes animLoader {
    to { transform: rotate(360deg); }
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-40px);
    }
    100% {
        transform: translatey(0px);
    }
}

@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes nav_active {
    0% {
        -webkit-clip-path: polygon(10% 10%, 60% 40%, 90% 90%, 40% 60%);
        clip-path: polygon(10% 10%, 60% 40%, 90% 90%, 40% 60%);
        opacity: 0
    }
    0.1% {
        opacity: 1
    }
    to {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1
    }
}

@keyframes nav_active {
    0% {
        -webkit-clip-path: polygon(10% 10%, 60% 40%, 90% 90%, 40% 60%);
        clip-path: polygon(10% 10%, 60% 40%, 90% 90%, 40% 60%);
        opacity: 0
    }
    0.1% {
        opacity: 1
    }
    to {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1
    }
}

@keyframes nav_passive {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1
    }
    to {
        -webkit-clip-path: polygon(10% 10%, 60% 40%, 90% 90%, 40% 60%);
        clip-path: polygon(10% 10%, 60% 40%, 90% 90%, 40% 60%);
        opacity: 0
    }
}

@-webkit-keyframes nav_matrix {
    0% {
        -webkit-transform: matrix3d(1.305, 0, 0.5, 0.01, 0, 0.609, 0.5, 0.01, -0.5, -0.5, 0.7569, 0, 24, 24, 0, 1);
        transform: matrix3d(1.305, 0, 0.5, 0.01, 0, 0.609, 0.5, 0.01, -0.5, -0.5, 0.7569, 0, 24, 24, 0, 1);
        -webkit-transform-origin: 0px 0px 0px;
        transform-origin: 0px 0px 0px;
        opacity: 0
    }
    to {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-transform-origin: 0px 0px 0px;
        transform-origin: 0px 0px 0px;
        opacity: 1
    }
}

@keyframes nav_matrix {
    0% {
        -webkit-transform: matrix3d(1.305, 0, 0.5, 0.01, 0, 0.609, 0.5, 0.01, -0.5, -0.5, 0.7569, 0, 24, 24, 0, 1);
        transform: matrix3d(1.305, 0, 0.5, 0.01, 0, 0.609, 0.5, 0.01, -0.5, -0.5, 0.7569, 0, 24, 24, 0, 1);
        -webkit-transform-origin: 0px 0px 0px;
        transform-origin: 0px 0px 0px;
        opacity: 0
    }
    to {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-transform-origin: 0px 0px 0px;
        transform-origin: 0px 0px 0px;
        opacity: 1
    }
}

@-webkit-keyframes move_up {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0.7
    }
}

@keyframes move_up {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0.7
    }
}

@-webkit-keyframes move_up-thin {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0.3
    }
}

@keyframes move_up-thin {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0.3
    }
}
@-webkit-keyframes head-img-zoom {
    0% {
        -webkit-transform: scale(1.1) rotate(0.0001deg);
        transform: scale(1.1) rotate(0.0001deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0.0001deg);
        transform: scale(1) rotate(0.0001deg)
    }
}

@keyframes head-img-zoom {
    0% {
        -webkit-transform: scale(1.1) rotate(0.0001deg);
        transform: scale(1.1) rotate(0.0001deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0.0001deg);
        transform: scale(1) rotate(0.0001deg)
    }
}
@-webkit-keyframes toptext {
    0% {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
        opacity: 0
    }
    50% {
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes toptext {
    0% {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
        opacity: 0
    }
    50% {
        opacity: 0
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
    background-color: #ffdb00;
  }
  35% {
    height: 15px;
    border-radius: 50%;
    transform: scaleX(1);
    background-color: #245f00;
  }
  100% {
    top: 0;
    background-color: #245f00;
  }
}