#banner{width: 100%;z-index:3;position:relative;overflow: hidden;}
#banner_box , #banner_box .item , #banner_box .img_box { position: relative; min-width: 100vw; }
#banner_box .img_box img { width: 100vw; height: 100vh; }
#banner_box .info_box , #banner_box .atag_item { position: absolute; }
#banner_box .info_box{transition:all 0.7s ease;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content: flex-end;padding:0;z-index:2;width: 65%;height: 60%;margin:auto;position:absolute;top:0px;left:0;right:0;bottom:0;align-items: center;}
#banner_box .title01{position:absolute;top:0;transform:rotate(-15deg);animation:aboutCloud2 26s infinite reverse linear}
#banner_box .info_box h2{color:#13181c;font-size:40px;font-weight: 600;letter-spacing:4px}
#banner_box .info_box p{color:#13181c;font-size:20px;letter-spacing:7px}
#banner_box .slick-dots{bottom:20px}
#banner_box .slick-dots li{opacity:.2;display:inline-flex;justify-content:center;align-items:center}
#banner_box .slick-dots li.slick-active{opacity:1}
#banner_box .slick-dots li button{width:10px;height:10px;background:var(--info);border-radius:50%;box-shadow:0 0 5px #fff}
#banner_box .slick-dots li button:before{content:""}
.bannerAreaimg{width:70%;height:190px;margin:auto;position:absolute;top:0px;left:0;right:0;bottom:0;display:flex;gap:0 10px;align-items:flex-end}
.bannerAreaimg .meteor01{animation:footerMapPin 1s infinite;transition:all .5s ease-out}
.bannerAreaimg .meteor02{transform-origin:left bottom;animation:catalogFlower1 4s infinite alternate-reverse ease-in}
.bannerAreaimg .meteor03{transform-origin:bottom right;animation:bannerFox 4s infinite ease-in-out}
.bannerAreaimg .meteor04{animation:bannerRabbit 6s infinite linear}
.bannerAreaimg .meteor05{transform-origin:bottom right;animation:bannerMouse2 8s infinite ease-in-out}
.bannerAreaimg .meteor06{animation:footerAnimal 2s infinite}
.bannerAreaimg .meteor07{transform-origin:bottom right;animation:bannerMouse1 8s infinite ease-in-out}

.page-scroll{bottom: 10px;margin-left:0;z-index: 888;text-align:center;position:absolute;left: 49%;-webkit-transform: translateY(0%);transform: translateY(0%);}
.page-scroll a{display:flex;flex-direction:column;align-items:center;cursor:pointer}
.page-scroll.style01 a b{font-size:11px;letter-spacing:2px;font-weight:200;text-transform:uppercase;}
.page-scroll.style01 a svg{width: 26px;height: 26px;fill: #2d2d2d;}
.page-scroll.style01 a span{height: 70px;width:1px;background: #a7a7a74f;margin: 10px 0;position:relative;overflow: hidden;}
.page-scroll.style01 a span:before{content:'';position:absolute;top: 0px;left:0;height: 20px;width:1px;background: #e3562c;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
.papabar{bottom:40px;margin-left:0;z-index:888;text-align:center;position:absolute;right:10%;-webkit-transform:translateY(-50%);transform:translateY(30%)}
.papabar .count{color:#fff;letter-spacing:12px;font-family:'Cardo',sans-serif}

@keyframes aboutCloud2{
    0% {transform:translateX(0%) translateY(0%)}
	25% {transform:translateX(-15%) translateY(0%)}
	75% {transform:translateX(15%) translateY(-5%)}
	100% {transform:translateX(0%) translateY(0%)}
}
@keyframes footerMapPin{
    0% {transform:translateY(0px)}
	70% {transform:translateY(-10px)}
	100% {transform:translateY(0px)}
}
@keyframes catalogFlower1{
    0% {transform:rotate(0deg)}
1	
}
@keyframes footerAnimal{
    0% {transform:rotate(0)}
	40% {transform:rotate(-5deg)}
	100% {transform:rotate(0)}
}
@keyframes bannerFox{
    0% {transform:rotate(0)}
	30% {transform:translate3d(0px,0px,0) rotate(0deg)}
	40% {transform:translate3d(0px,0px,0) rotate(-3deg)}
	50% {transform:translate3d(0px,-10px,0) rotate(-5deg)}
	60% {transform:translate3d(0px,0px,0) rotate(-3deg)}
	70% {transform:translate3d(0px,0px,0) rotate(0deg)}
	100% {transform:rotate(0)}
}
@keyframes bannerRabbit{
    0% {transform:translate3d(0,0,0)}
	5% {transform:translate3d(0,0px,0)}
	8% {transform:translate3d(-10px,-10px,0)}
	11% {transform:translate3d(-20px,0,0)}
	14% {transform:translate3d(-30px,-10px,0)}
	17% {transform:translate3d(-40px,-0px,0)}
	20% {transform:translate3d(-40px,0,0) scaleX(1)}
	26% {transform:translate3d(-40px,0,0) scaleX(-1)}
	43% {transform:translate3d(-40px,0,0) scaleX(-1)}
	46% {transform:translate3d(-30px,-10px,0) scaleX(-1)}
	49% {transform:translate3d(-20px,0px,0) scaleX(-1)}
	52% {transform:translate3d(-10px,-10px,0) scaleX(-1)}
	55% {transform:translate3d(0px,0px,0) scaleX(-1)}
	70% {transform:translate3d(0px,0px,0) scaleX(-1)}
	78% {transform:translate3d(0px,0px,0) scaleX(1)}
	100% {transform:translate3d(0,0,0)}
}
@keyframes bannerMouse1{
    0% {transform:rotate(0deg)}
    10% {transform:rotate(0deg)}
    20% {transform:rotate(5deg)}
    30% {transform:rotate(0deg)}
    40% {transform:rotate(5deg)}
    50% {transform:rotate(0deg)}
    100% {transform:rotate(0deg)}
}
@keyframes bannerMouse2{
    0% {transform:translate3d(0,0,0)}
    3% {transform:translate3d(0,-5px,0)}
    10% {transform:translate3d(0,0,0)}
    20% {transform:translate3d(0,0,0)}
    23% {transform:translate3d(0,-5px,0)}
    30% {transform:translate3d(0,0,0)}
    33% {transform:translate3d(0,-5px,0)}
    40% {transform:translate3d(0,0,0)}
    100% {transform:translate3d(0,0,0)}
}
@keyframes fish{
    0% {top:0}
    100% {top:60px}
}
@media screen and (max-width: 1560px){
    .bannerAreaimg{height:100px}
}
@media screen and (max-width: 1366px){
    #banner_box .info_box h2{font-size:30px}
    #banner_box .info_box p{font-size:18px;letter-spacing:4px;margin-top:0.55rem}
    #banner_box .info_box{height:58%}
}
@media screen and (max-width: 1280px){
	#banner_box .img_box img{height:50vh}
    #banner_box .info_box{width:80%;height:60%}
    .bannerAreaimg{height:110px}
    .page-scroll.style01 a span{height: 40px;}
}
@media screen and (max-width: 1160px){
	#banner_box{padding-top:80px}
    #banner_box .info_box{width:80%;height:78%}
    .page-scroll{display:none}
    #banner_box .title01 img{width:60%;margin:auto}
}

@media screen and (max-width: 960px){
    #banner_box .info_box{width:80%;height:68%}
    #banner_box .info_box h2{font-size:26px;letter-spacing:2px}
    #banner_box .info_box p{font-size:16px;letter-spacing:2px;margin-top:0.25rem}
    .bannerAreaimg{height:140px}
}

@media screen and (max-width: 560px){
    #banner_box .info_box h2{font-size: 20px;letter-spacing: 0px;}
    #banner_box .info_box{height:55%}
    #banner_box .img_box img{height:38vh}
    .bannerAreaimg{height:90px}
}