html,body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* font-smoothing is non-standard, removed */;
  background: #f2f3ee;
  width: 100%;
  overflow-x: hidden
}

/* 滾動顯示動畫效果 */
.scroll-animation, section {
opacity: 0;
transform: translateY(120px);
transition: all 2.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.scroll-animation.animate, section.animate {
opacity: 1;
transform: translateY(0);
}

.mobile-item{display: none !important}
.menu-btn{display: none}
.row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;
display:flex;}


.more-btn{display: inline-block;padding: 5px 30px 5px 15px;border: 1px solid #c8c8c8;border-radius: 15px;background: url(../images/icon-arrow-black.svg) right 10px center no-repeat;background-size: 15px;cursor: pointer;transition: all 0.3s ease}
.more-btn h5{font-weight: 500;position: relative;z-index: 2;transition: color 0.3s ease}

.more-btn:hover{transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.1);border-color: #2d2d2d;background: #2d2d2d url(../images/icon-arrow-white.svg) right 10px center no-repeat;background-size: 15px}





.more-btn:hover h5 {
color: #fff;
}

/* Header */
.header{
width: 100%;
position: fixed;
top: 0;
z-index: 100;
transition: transform 0.4s ease;
}

.header--hidden {
transform: translateY(-100%);
}

.page-template-template-home header{opacity: 0;  transition: all 0.4s ease;}
.page-template-template-home header.home-on{opacity: 1;}
header{position: fixed;top:30px;width: 100%;z-index: 99;transition: transform 1.2s ease;}
header .container{width: 100%;padding-left: 90px;padding-right: 60px;}
.logo{width: 124px}
.menu-main-menu-container{display: block;float: right;pointer-events: none;}
.menu-main-menu-container a{pointer-events: auto;cursor: pointer;}
.menu .active > a{background: none;color: #000}
ul.menu  ul{margin-left: 0}
.sub-menu{background:#f2f3ee }
.sub-menu{display: none}
/* Submenu will now be shown via JavaScript */
.menu-item-has-children.show-submenu>.sub-menu{display: block}
.header-bg{position: fixed;top:0;left: 0;z-index: 98;width: 100%;height: 140px;background: linear-gradient(to bottom, rgba(242, 243, 238, 1) 5%, rgba(242, 243, 238, 0) 100%);pointer-events:  none;}
.sub-menu a:hover{text-decoration: none}
.sub-menu {width: 105px;border-radius: 3px;background: #FFF}
.sub-menu>li{position: relative;padding: 0 0}
.sub-menu>li::before{content: "";width: 80%;left: 10%;position: absolute;background: red;}
.sub-menu .sub-menu{position: absolute;background: #e1d5d1;left:105px;width: 155px;top:0;text-align: left;display: none}
.menu-bg{position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(242,243,238,.8);;z-index: 7;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}
.menu-bg.active{opacity: 1;pointer-events: auto;}
.menu .active > a{text-decoration: none}
.menu a{padding-left: 20px;padding-right: 20px;text-align: center;position: relative;text-decoration: none}
.sub-menu .sub-menu a{text-align: left}
.sub-menu li a{padding-top: 10px;padding-bottom: 10px;padding-left: 20px;padding-right: 20px;}

.sub-menu a{border-bottom: 1px solid #e1d5d1}
.sub-menu li li a{border-bottom: 1px solid #FFF}
.sub-menu li:last-child a{border: none}

.sub-menu li:hover .sub-menu {display: block}

footer .menu .sub-menu{display: none  !important;}

/* Menu hover animation */
.menu > li > a::after {
content: '';
position: absolute;
bottom: -2px;
left: 20px;
width: 0;
height: 2px;
background-color: #cbe3d1;
transition: width 0.3s ease-in-out;
transform-origin: left center;
}

.menu > li > a:hover::after,
.menu > li.active > a::after {
width: calc(100% - 40px); /* Width minus the padding */
}

.menu a:hover {
text-decoration: none;
color: #000;
}

/* Footer */
footer{background: #d1f5ee;padding: 30px 0;border-top:1px solid #c8c8c8;position: relative;z-index: 2;;}
.footer-logo{width: 82px;}
.footer-info-wrap{position: relative;}
.footer-info{position: absolute;bottom: 0;left: 120px}
footer .menu li{width: 100%;}
footer .menu li a{padding: 0;margin-bottom: 15px}
.footer-ss-list li{width: 24px;float: left;margin-left: 20px}
.footer-ss-list{display: block;position: absolute;right: 15px;bottom: 20px}
footer .menu .active > a {text-decoration: none}
footer .menu li a:hover {text-decoration: none}
footer .menu > li > a:hover::after,
footer .menu > li > a::after {display: none}

/* Ensure footer submenus appear on hover */
footer .menu-item-has-children:hover > .sub-menu {display: block}
footer .sub-menu {position: relative; width: 100%; background: transparent}
footer .sub-menu li a {padding-left: 15px; margin-bottom: 10px}
footer .sub-menu > li::before {display: none}

/* Home */
.flexslider-home-hero{background: none;border: none}
.home-landing-section{width: 100%;height: 100vh;position: relative;}
.fix-bg{position: fixed;width: 100%;height: 100%;top:0;left: 0;}
/* Landing animation initial states */
.home-mask-slider-wrap, 
.object-cat, 
.object-door, 
.object-cloud1, 
.object-cloud2, 
.object-cloud3, 
.object-cloud4, 
.vertical-text {
opacity: 0;
transition: opacity 0.8s ease-in-out;
}

.home-landing-section .vertical-text span{width: 30px;height: 100px;display: inline-block}
.home-landing-section .vertical-text{line-height: 1.4;float: right;margin-top: 120px;z-index: 99;position: relative;}

.home-landing-section .object-cat{position: absolute;z-index: 3;width: 100px;right:calc(50% - 290px);bottom: 84px;animation: cat-movement 12s infinite ease-in-out;transform-origin: bottom center;}
.home-landing-section .object-tt{position: absolute;z-index: 3;width: 100px;left:calc(50% - 400px);bottom: 100px;animation: tt-movement 104s infinite ease-in-out;transform-origin: bottom center;}
.home-landing-section .object-bird{position: absolute;z-index: 3;width: 100px;right:calc(50% - 220px);bottom: 280px;animation: bird-movement 12s infinite ease-in-out;transform-origin: bottom center;}

/* Cat Animation */
@keyframes tt-movement {
0% {transform: translateX(0) scaleX(1);}
15% {transform: translateX(-120px) scaleX(1);}
15.001% {transform: translateX(-120px) scaleX(-1);}
30% {transform: translateX(0) scaleX(-1);}
45% {transform: translateX(0) scaleX(-1);}
60% {transform: translateX(50px) scaleX(-1);}
70% {transform: translateX(50px) scaleX(-1);}
75% {transform: translateX(50px) scaleX(-1);}
80% {transform: translateX(50px) scaleX(-1);}
85% {transform: translateX(50px) scaleX(-1);}
85.001% {transform: translateX(50px) scaleX(1);}
99.999% {transform: translateX(0) scaleX(1);}
100% {transform: translateX(0) scaleX(1);}
}
@keyframes bird-movement {
0% {transform: translateY(0) rotate(0deg)}
10% {transform: translateY(0) rotate(2deg)}
20% {transform: translateY(0) rotate(-2deg)}
25% {transform: translateY(-5px) rotate(0deg)}
30% {transform: translateY(-30px) rotate(3deg)}
35% {transform: translateY(-20px) rotate(-3deg)}
40% {transform: translateY(0) rotate(0deg)}
50% {transform: translateY(0) rotate(2deg)}
60% {transform: translateY(0) rotate(-2deg)}
65% {transform: translateY(-5px) rotate(0deg)}
70% {transform: translateY(-20px) rotate(3deg)}
75% {transform: translateY(-10px) rotate(-3deg)}
80% {transform: translateY(0) rotate(0deg)}
90% {transform: translateY(0) rotate(2deg)}
100% {transform: translateY(0) rotate(0deg)}
}
@keyframes cat-movement {
0% {transform: translateX(0) scaleX(1); bottom: 84px;}
15% {transform: translateX(-120px) scaleX(1); bottom: 84px;}
15.001% {transform: translateX(-120px) scaleX(-1); bottom: 84px;}
30% {transform: translateX(0) scaleX(-1); bottom: 84px;}
45% {transform: translateX(0) scaleX(-1); bottom: 84px;}
60% {transform: translateX(50px) scaleX(-1); bottom: 84px;}
70% {transform: translateX(50px) scaleX(-1); bottom: 110px;}
75% {transform: translateX(50px) scaleX(-1); bottom: 84px;}
80% {transform: translateX(50px) scaleX(-1); bottom: 100px;}
85% {transform: translateX(50px) scaleX(-1); bottom: 84px;}
85.001% {transform: translateX(50px) scaleX(1); bottom: 84px;}
99.999% {transform: translateX(0) scaleX(1); bottom: 84px;}
100% {transform: translateX(0) scaleX(1); bottom: 84px;}
}
.home-landing-section .object-door{
position: absolute;
z-index: 3;
width: 150px;
right:calc(50% - 490px);
bottom: 124px;
pointer-events: auto;
cursor: pointer;
animation: door-hint 2s infinite ease-in-out;
}

@keyframes door-hint {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}

.object-door img {
content: url(../images/object-door.png);
transition: content 0.2s ease-in-out;
}

.object-door:hover img {
content: url(../images/object-door-open.png);
transform: scale(1.05);
}
.preloader{position: fixed;width: 100%;height: 100%;top:0;left: 0;background: #f2f3ee url(../images/sticyheader_logo.png) center center no-repeat;background-size: 140px;z-index: 9999;}
.object-cloud{position: absolute;z-index: 3;width: 320px;right:calc(50% - 280px);top: 140px;display: none;}

.object-cloud1{position: absolute;z-index: 3;width: 120px;left: 5%;top: 140px; animation: cloud-float-1 40s infinite linear; animation-delay: -25s;opacity: .7;}
.object-cloud2{position: absolute;z-index: 3;width: 100px;left: 0;top: 230px; animation: cloud-float-2 48s infinite linear; animation-delay: -14s;opacity: .7;}
.object-cloud3{position: absolute;z-index: 3;width: 70px;left: 10%;top: 280px; animation: cloud-float-3 44s infinite linear; animation-delay: -32s;opacity: .7;}
.object-cloud4{position: absolute;z-index: 3;width: 90px;left: 2%;top: 180px; animation: cloud-float-4 52s infinite linear; animation-delay: -20s;opacity: .7;}

.fix-bg{pointer-events: none;}
.fix-bg > div{opacity: .5;}
.fix-bg .object-cloud1{top:20vh}
.fix-bg .object-cloud2{top:40vh}
.fix-bg .object-cloud3{top:60vh}
.fix-bg .object-cloud4{top:80vh}

/* Cloud Floating Animations */
@keyframes cloud-float-1 {
0% {transform: translateX(-20vw);}
100% {transform: translateX(105vw);}
}

@keyframes cloud-float-2 {
0% {transform: translateX(-15vw) translateY(-10px);}
50% {transform: translateX(60vw) translateY(10px);}
100% {transform: translateX(105vw) translateY(-5px);}
}

@keyframes cloud-float-3 {
0% {transform: translateX(-20vw) translateY(5px);}
33% {transform: translateX(30vw) translateY(-15px);}
66% {transform: translateX(70vw) translateY(10px);}
100% {transform: translateX(105vw) translateY(0);}
}

@keyframes cloud-float-4 {
0% {transform: translateX(-25vw) translateY(-8px);}
25% {transform: translateX(20vw) translateY(12px);}
50% {transform: translateX(50vw) translateY(-15px);}
75% {transform: translateX(80vw) translateY(5px);}
100% {transform: translateX(105vw) translateY(-10px);}
}
.home-mask-slider-wrap{position: absolute;width: 780px;left: calc(50% - 610px + 15px);bottom: 50px;z-index: 2}
.home-mask-slider {width: 790px !important;margin-left: -5px;margin-top: -2px}
.home-about-section,.home-news-section{padding: 120px 0;position: relative}
.home-news-section{padding-top:  0}
.home-about-cloud{position: absolute;width: 680px;left: calc(50% - 680px);top:80px}
.home-about-ob1a{position: absolute;width: 60px;z-index: 2;left: calc(50% - 220px);top:90px; animation: float-ob1a 5s infinite ease-in-out;}
.home-about-ob1b{position: absolute;width:50px;z-index: 2;left: calc(50% - 160px);top:85px; animation: float-ob1b 7s infinite ease-in-out;}

/* Floating animations for objects */
@keyframes float-ob1a {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-15px);}
}

@keyframes float-ob1b {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-20px);}
}
.home-about-section p{padding-right: 40px}
.home-about-section .container h3{padding-top: 80px}
.about-block{width: 100%;aspect-ratio: 16 / 12;background: #EEE;border-radius: 20px}
.owl-carousel-home{width: 120%}
.home-news-item{width: 100%;background: #FFF;border-radius: 10px;aspect-ratio: 1 / 1;border: 1px solid #c8c8c8;padding: 20px;position: relative;}
.home-news-item .break-line{width: 100%;height: 1px;background: #c8c8c8;display: block;margin: 15px 0}
.owl-carousel-home-thum{width: 100%;background: #c8c8c8;border-radius: 20px;aspect-ratio: 1 / 1;border: 1px solid #c8c8c8}
.home-news-item .more-btn{float: right}
.home-news-info{display: block;position: relative;overflow: hidden}
.home-news-info .title-tag{display: inline;;border: 1px solid #c8c8c8;float: left;padding: 2px 4px;border-radius: 15px;margin-right: 5px;margin-bottom: 5px;}
.home-news-info  .tag-wrap{overflow: hidden;margin-bottom: 20px;}

/* Owl Carousel Navigation Arrows - 更明顯的箭頭 */
.owl-carousel-home .owl-nav {
position: absolute;
width: 100%;
top: 50%;
left: 0;
margin-top: -25px;
display: block !important;
}

.owl-carousel-home .owl-nav button.owl-prev,
.owl-carousel-home .owl-nav button.owl-next {
position: absolute;
width: 40px;
height: 40px;
background: #fff !important;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
opacity: 0.9;
}

.owl-carousel-home .owl-nav button.owl-prev {
left: -60px;
}

.owl-carousel-home .owl-nav button.owl-next {
right: -60px;
}

.owl-carousel-home .owl-nav button.owl-prev:after {
content: '　';
font-size: 30px;
font-weight: bold;
color: #333;
}

.owl-carousel-home .owl-nav button.owl-next:after {
  content: '　';
  font-size: 30px;
font-weight: bold;
color: #333;
}

.owl-carousel-home .owl-nav button:hover {
background: #2d2d2d !important;
}

.owl-carousel-home .owl-nav button:hover:after {
color: #fff;
}

.owl-prev span,.owl-next span {  width: 40px;  height: 38px;  display: inline-block;  font-size: 30px;}
.owl-prev:hover span,.owl-next:hover span{color:#FFF}

.popup{
position: fixed;
width: 100%;
height: 100%;
background: rgba(242,243,238,.6);
top: 0;
left: 0;
z-index: 99;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}

.popup.active{
pointer-events: auto;
opacity: 1;
}

.popup-inner{
position: absolute;
width: 1000px;
height: 680px;
background: url(../images/popbg.svg) center center no-repeat;
background-size: contain;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(0.95);
opacity: 0;
z-index: 2;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.popup.active .popup-inner{
transform: translate(-50%,-50%) scale(1);
opacity: 1;
}
.popup-bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease;
}

.popup.active .popup-bg{
opacity: 1;
}

.pop-content{
position: absolute;
padding: 20px 140px 20px 140px;
top: 50%;
left: 50%;
width: 100%;
opacity: 0;
transform: translate(-50%,-55%);
transition: all 0.7s ease 0.1s;
}

.popup.active .pop-content{
opacity: 1;
transform: translate(-50%,-50%);
}
.animal-left{width: calc(65% - 40px);float: left;margin-right: 20px;border-right: 1px solid #c4e3cf;padding-right: 40px}
.animal-left-img{aspect-ratio: 1 / 1;background: #EEE;width: 100%;border-radius: 50px}
.animal-right{width: 35%;float: left;padding:0 20px;}
.pop-title{background: url(../images/object-door.png) left center no-repeat;display: inline-block;margin: 0 auto;padding: 20px 0;background-size: 120px;padding-left: 140px;display: inline-block;text-align: center;position: relative}
.animal-thum{margin: 20px auto;width: 120px;height: 120px;background: #f2f3ee;border-radius: 100%}
.flexslider-home-animal{margin-bottom: 20px !important}
.flexslider-home-animal .flex-direction-nav a{opacity: 1;color: #cdb9ba !important;top:calc(50% - 40px)}
.flexslider-home-animal .flex-direction-nav a::before{color: #cdb9ba !important}
.flexslider-home-animal .flex-direction-nav .flex-next{right: -80px !important}
.flexslider-home-animal .flex-direction-nav .flex-prev{left: -80px !important}

/* about */
.relative-wrap{position: relative;z-index: 4}
.about-section{padding: 90px 0;position: relative}
.about-section-1{padding-top: 0}
.about-cloud-1{position: absolute;width: 50vw;left: calc(50% - 50vw);top:-40px}
.about-section-1 .cloud-mask{position: absolute;width: 760px;left: 48%;top:40px;z-index: 2}
.about-cloud-3{position: absolute;width: 780px;left: calc(50% - 840px);top:100px;z-index: 2}
.about-section-3 .cloud-mask{position: absolute;width: 60vw;left: 38%;top:40px;z-index: 1}
.yearbook-txt{display: inline-block;margin-right: 20px}
.about-path-wrap{padding: 100px;position: relative;transform: scale(.8);}
.step-title{position: absolute;top:50%;left: 50%;display: inline-block;transform: translate(-50%,-50%)}
.about-path-list li{position: absolute;width: 380px;height: 240px;cursor: pointer}
.about-path-list li h2{text-align: center;position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);font-weight: 500}
.about-path-list li:nth-child(1){top:30px;left: calc(48% + 20px);background: url(../images/2about-c1.png) center center no-repeat;background-size: contain;}
.about-path-list li:nth-child(2){top:48%;left: calc(100% - 380px);background: url(../images/2about-c2.png) center center no-repeat;background-size: contain;}
.about-path-list li:nth-child(3){top:65%;left: calc(50% - 300px);background: url(../images/2about-c3.png) center center no-repeat;background-size: contain;}
.about-path-list li:nth-child(4){top:26%;left: 0;background: url(../images/2about-c4.png) center center no-repeat;background-size: contain;}
.about-path-list li:nth-child(2) h2,.about-path-list li:nth-child(3) h2{bottom: 20px;}
.about-path-list li:nth-child(4) h2{bottom: 30px;}
.hover-layer{position: absolute;width: 100%;height: 100%;top:0;left: 0;opacity: 0;display: flex;transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;transform: scale(0.95);
  justify-content: center;  /* Centers horizontally */    align-items: center;  /* Centers vertically */    padding: 0 40px}
.about-path-list li:hover .hover-layer{opacity: 1; transform: scale(1);}
.hover-layer:hover{opacity: 1; transform: scale(1);}
.about-path-list li:nth-child(1) .hover-layer{background: url(../images/2about-c1-hover.png) center center no-repeat;background-size: contain;}
.about-path-list li:nth-child(2) .hover-layer{background: url(../images/2about-c2-hover.png) center center no-repeat;background-size: contain;}
.about-path-list li:nth-child(3) .hover-layer{background: url(../images/2about-c3-hover.png) center center no-repeat;background-size: contain;}
.about-path-list li:nth-child(4) .hover-layer{background: url(../images/2about-c4-hover.png) center center no-repeat;background-size: contain;}

.ill-item{width: 100%;position: absolute;height: 65%;left: 0;top:0}
.about-it{position: absolute;}
.about-it1{top: 560px; left: -80px; animation: float-about-it1 13.7s infinite ease-in-out;}
.about-it2{bottom:120px;right: -90px; animation: float-about-it2 12.4s infinite ease-in-out;}
.about-it3{top:60px;right: -30px; animation: float-about-it3 8.2s infinite ease-in-out;}
.about-it4{top:0;left: 240px; animation: float-about-it4 10.8s infinite ease-in-out;cursor: pointer;}

.about-it4-hover{padding-top: 20px;position: absolute;background:url(../images/about-item4-hover.png) center center no-repeat;background-size: 100% 100%;height: 100%;width: 100%;top:0;left: 0;opacity: 0;transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;transform: scale(0.95);text-align: center;}
.about-it .about-it4-hover:hover{opacity: 1; transform: scale(1);}

/* Floating animations for about items */
@keyframes float-about-it1 {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-35px);}
}

@keyframes float-about-it2 {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-40px);}
}

@keyframes float-about-it3 {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-45px);}
}

@keyframes float-about-it4 {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-30px);}
}


/* News */
.page-wrap{margin-top:100px;margin-bottom: 120px}

.news-info-details{border: 1px solid #c8c8c8;border-radius: 20px;background: #FFF;}
.news-title-wrap{text-align: center}
.news-title-tag{padding: 4px 20px ;border-bottom: 1px solid #c8c8c8;display: inline-block}
.news-banner{width: 100%;aspect-ratio: 6 / 3;background: #c8c8c8;}
.news-inner{padding:   60px}
.news-banner-title{padding: 0 0 20px 0;margin-bottom: 30px;border-bottom: 1px solid #c8c8c8;position: relative;overflow: hidden;padding-right: 100px;}
.news-banner-title h2{position: relative;float: left;;}
.news-banner-title h5.title-tag{display: inline;padding: 5px  15px;border: 1px solid #c8c8c8;border-radius: 15px;position: relative;;margin-right: 10px;float: left;margin-bottom: 10px;}
.news-banner-title .title-date{position: relative;width:100%;float: left;padding-top: 20px;}
.news-banner-title .title-date .title-date-wrap{position: relative;display: inline-block;}
.news-inner img{border-radius: 15px ;border: 1px solid #c8c8c8;}

.news-content{overflow: hidden;position: relative}
.news-content-left{width: 40%;float: left}
.news-content-right{width: 60%;float: left;border-left: 1px solid #c8c8c8;padding-left: 20px}

.news-side-info li{position: relative;padding-left: 0;margin-bottom: 5px;display: grid;
grid-template-columns: auto 1fr; /* Makes two columns */
align-items: start; /* Aligns items to the top */
gap: 10px;}
.news-side-info li h5.info-tag{display: inline-block;padding: 3px  15px;border: 1px solid #c8c8c8;border-radius: 15px;margin-right: 10px;white-space: nowrap; /* Prevents wrapping */}
.news-side-info li:nth-child(1) p{border-top: 1px solid #c8c8c8}
.news-side-info li p{display: inline-block;width: 150px;border-bottom: 1px solid #c8c8c8}


.news-content .apply-button{position: absolute;left: 0;bottom: 0;display: inline-block;padding: 5px 50px 5px 25px;border: 1px solid #c8c8c8;border-radius: 30px;background: url(../images/icon-arrow-black.svg) right 15px center no-repeat;background-size: 25px;cursor: pointer;transition: all 0.3s ease}
.news-content .apply-button h5{font-weight: 500;position: relative;z-index: 2;transition: color 0.3s ease}

.news-content .apply-button:hover{transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.1);border-color: #2d2d2d;background: #2d2d2d url(../images/icon-arrow-white.svg) right 15px center no-repeat;background-size: 25px}
.news-content .apply-button:hover a{text-decoration: none;}
.news-content .apply-button:hover h5,.news-content .apply-button:hover h2{color: #fff}
.close-btn{position: absolute;right: 80px;top:60px;width: 25px;height: 25px;background: url(../images/btn-close.png) center center no-repeat;background-size: contain;cursor: pointer;z-index: 2}
.popup-inner .close-btn{right: 140px;  top: 90px;}
.news-wrap .container{padding-left: 90px;padding-right: 90px;}


/* Project */
.slide-img{position: relative;width: 100vw;height: 100vh}
.project-banner{position: relative;width: 100%;height: 40vw;background: #333;margin-bottom: 60px}
.project-section-2{padding: 120px 0; min-height: 600px; position: relative}
.project-list li{margin-bottom: 40px;}
.breakline{width: 100%;height: 1px ;background: #c8c8c8}

.text-info-box{background: rgba(255,255,255,.85);padding: 30px;border-radius: 20px;}
.project-section{position: relative}
.project-cloud-2{position: absolute;width:460px;left: calc(50% + 120px);top:120px}
.project-section-2 .cloud-mask{position: absolute;width: 800px;left: calc(50% - 650px);top:0;z-index: 2;;height: auto;}
.project-object-cloud{position: absolute;left: calc(50% + 300px);bottom: 60px;width: 200px;height: 100px;}

.flexslider-projectsingle,.flexslider-projectinner,.flexslider-projectsub {border: none;margin-bottom: 0}
.flexslider-projectsingle .flex-control-nav, 
.flexslider-projectinner .flex-control-nav,
.flexslider-projectsub .flex-control-nav{bottom: 40px}
.flex-direction-nav a{opacity: 1;color: #cdb9ba !important;}
.flex-direction-nav a::before{color: #cdb9ba !important}
.flexslider-projectsub  .flex-direction-nav .flex-next{right: 80px !important}
.flexslider-projectsub .flex-direction-nav .flex-prev{left: 80px !important}

.flexslider-full {width: 100%;height: 100vh; margin: 0;}
.flexslider-full .slides img {width: 100%; height: 100vh;object-fit: cover; }
.flexslider-full .flex-control-nav {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 8px; /* Spacing between dots */;display: inline}
.flexslider-full .flex-control-nav li a {width: 10px;height: 10px;background: white; /* White dots */border-radius: 50%; /* Make it a circle */display: block;cursor: pointer;transition: all 0.3s ease;opacity: 0.5; }
.flexslider-full .flex-control-nav li a.flex-active {opacity: 1;transform: scale(1.3); }

.single-project-3  .flexslider .slides .slides-inner { width: 60vw;aspect-ratio: 6 / 4;background: #c8c8c8;position: relative;border-radius: 20px;margin: 40px auto 20px auto;}
.single-project-3  .flexslider .slides .slides-wrap{width: 100vw;height: 100vh;position: relative}
.player { position: relative;top: 0;left: 0;width: 100vw;height: 100vh;}
.feedback-list li{padding-bottom: 20px;margin-bottom: 40px;border-bottom: 1px solid #c8c8c8;position: relative;min-height: 200px;padding-left: 220px} 
.feedback-list li:last-child{border-bottom: 0}       
.ppl-thumbnail{width: 180px;height: 180px;position: absolute;left: 0;top:0;background: #AAA;border-radius: 100%}    

.sp-info-wrap {position: absolute;width: 28%;right: 0;top: 50%;transform: translateY(-50%)}
.sp-info-wrap::after{content:"　";position: absolute;width: 580px;background: url(../images/cloud-1.svg) center top no-repeat;background-size: 580px;height: 30vw;top:50%;transform: translateY(-50%);z-index: 1;left: -100px}
.sp-info{position: relative;z-index: 2}
.sp-info li{margin-bottom: 30px;position: relative;padding-left: 80px;padding-top: 4px}
.sp-info li h5.info-tag{display: inline-block;padding: 5px  15px;border: 1px solid #c8c8c8;border-radius: 15px;position: absolute;left: 0;top:0}  
.sp-image{width: 70%;border-radius: 20px}
.sp-image .slide-img{width: 100%;aspect-ratio: 6 / 4;height: auto;border-radius: 20px;}

.single-project-1,.single-project-2{position: relative}
.project-landing-info{position: absolute;width:100%;bottom:80px;z-index: 8}
.single-project-1 .project-cloud-1 {position: absolute;width: 540px;left: calc(50% - 720px); top: -70px;}  
.single-project-2 .project-cloud-1 {position: absolute;width: 680px;right: calc(50% - 720px); top: -70px;}  

.single-project .news-side-info li p{width: auto}
.slides-wrap h3{position: relative;  width: 60%;   text-align: center;  border-top: 1px solid #c8c8c8;  padding-top: 10px;font-weight: bold;margin: 0 auto;}


/* Learner */
.learner-item{width: 100%;background: #FFF;border-radius: 20px;border: 1px solid #c8c8c8;overflow: hidden}
.learner-info{text-align: center;padding: 15px}
.learner-thum{width: 100%;aspect-ratio: 6 / 3;background: #eee}
.learner-item .break-line{width: 100%;height: 1px;background: #c8c8c8;display: block;margin: 15px 0}

.learner-info-details{border: 1px solid #c8c8c8;border-radius: 10px;background: #FFF;padding: 20px 0}
.learner-title-wrap{text-align: center}
.learner-title-tag{padding: 4px 20px ;border-bottom: 1px solid #c8c8c8;display: inline-block}
.learner-banner{width: 100%;aspect-ratio: 6 / 3;background: #c8c8c8;}
.learner-inner{padding: 40px 60px}
.learner-banner-title{padding: 12px 100px 20px ;margin-bottom: 30px;border-bottom: 1px solid #c8c8c8;position: relative}
.learner-banner-title h5.title-tag{display: inline-block;padding: 5px  15px;border: 1px solid #c8c8c8;border-radius: 15px;position: absolute;left: 0;top:10px}
.learner-banner-title .title-date{position: absolute;right: 0;top:0}
.learner-banner-title .title-date .title-date-wrap{position: relative;display: inline-block;padding-left: 100px;padding-top: 10px}
.learner-inner img{border-radius: 15px ;border: 1px solid #c8c8c8;}
.wysiwyg-content p:last-child{margin-bottom: 0}

/* News AJAX Content */
.news-ajax {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.news-ajax .news-info-details { 
    transition: all 0.5s ease-in-out; 
}

.news-ajax .loading { 
    text-align: center; 
    padding: 40px; 
}

.news-ajax .spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #333;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Additional news-ajax styles */
.news-ajax .error {
    text-align: center;
    font-size: 18px;
    color: #666;
    padding: 30px;
}

.news-ajax .error {
padding: 20px;
text-align: center;
color: #cc0000;
background: #ffeeee;
border-radius: 5px;
}

.news-ajax .close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}

.news-ajax .close-btn:before,
.news-ajax .close-btn:after {
content: '';
position: absolute;
width: 16px;
height: 2px;
top: 14px;
left: 7px;
}

.news-ajax .close-btn:before {
transform: rotate(45deg);
}

.news-ajax .close-btn:after {
transform: rotate(-45deg);
}

.news-ajax .close-btn:hover {
transform: rotate(90deg);
}

/* Participation */
.cloud-mask {
    width: 780px; /* Adjust size */
    aspect-ratio: 717 / 427;
    background-size: cover; 
    background-position: center;
    -webkit-mask-image: url('../images/cloud-1.svg'); /* Safari, Chrome */
    -webkit-mask-size: cover;
    mask-image: url('../images/cloud-1.svg'); /* Standard */
    mask-size: cover;

}

/* Flexslider for about page banner */
.flexslider-about-banner ,.flexslider-participation-banner{
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    height: 100%;
}

.flexslider-about-banner .slides,
.flexslider-about-banner .slides li ,
.flexslider-participation-banner .slides,
.flexslider-participation-banner .slides li {
    height: 100% !important;
}

.flexslider-about-banner .banner-slide,
.flexslider-participation-banner .banner-slide {
    width: 100%;
    height: 100%;
}


.participation-section{padding: 90px 0;position: relative}
.participation-section-1{padding-top: 0}
.participation-cloud-1{position: absolute;width: 680px;left: calc(50% + 20px);top:20px}
.participation-cloud-2{position: absolute;width: 680px;left: calc(50% - 640px);top:140px}
.participation-cloud-3{position: absolute;width: 680px;left: calc(50% + 20px);top:200px}


.participation-section-1 .cloud-mask{position: absolute;width: 760px;left: 48%;top:40px;z-index: 2}
.participation-info li{margin-bottom: 30px;position: relative;padding-left: 110px;padding-top: 4px}
.participation-info li h5.info-tag{display: inline-block;padding: 5px  15px;border: 1px solid #c8c8c8;border-radius: 15px;position: absolute;left: 0;top:0}
.participation-section-1 .cloud-mask{position: absolute;width: 800px;left: calc(50% - 780px + 15px);bottom: 150px;z-index: 2}
.participation-section-2 .cloud-mask{position: absolute;width: 800px;left: 42%;bottom: 0;z-index: 2}
.participation-section-3 .cloud-mask{position: absolute;width: 800px;left: calc(50% - 680px + 15px);bottom: 0;z-index: 2}
.participation-section-3 .participation-title{margin-top: 180px}
.ps-3{margin-left: -40px;width: calc(100% + 50px);}
.participation-map{width: 100%;height: 40vw;background: #333;}
.participation-map-wrap{padding: 40px 0 0 0}
.participation-share-button{display: inline-block;}

.nf-form-cont label{font-weight: 400 !important;margin-bottom: 5px}
.nf-form-fields-required{display: none !important}
.nf-form-cont input,.nf-form-cont textarea,.nf-form-cont select{background: #FFF !important;box-shadow: none !important;border-radius: 20px}

#nf-field-5-wrap .nf-field-element{width: auto;display: inline-block}
#nf-field-5-wrap .nf-field-label{margin-bottom: 0!important;margin-top: 10px !important;margin-right: 10px }

.field-wrap input[type="submit"] {
display: inline-block;
padding: 5px 30px 5px 15px;
border: 1px solid #c8c8c8;
border-radius: 15px;
background: url(../images/icon-arrow-black.svg) right 10px center no-repeat !important;
background-size: 15px !important;
cursor: pointer;
}
.participation-dog-1{position: absolute;left: calc(50% - 500px);bottom:160px;width: 100px;}


/* Support */
.support-landing{position: relative;width: 100%;height: 100vh;background: #AAA}
.support-landing-info{position: absolute;bottom: 80px;width: 100%}
.support-cloud-1{position: absolute;width: 480px;left: calc(50% - 720px);top:-40px}
.support-section-1,.support-section-2{padding-bottom: 120px;position: relative}
.support-info-wrap{position: relative}
.support-info-wrap h3 ,.support-info-wrap p{z-index: 2;position: relative}
.cloud-img-bg1,.cloud-img-bg2,.cloud-img-bg3,.cloud-img-bg4,.cloud-img-bg5{position: absolute;width: 540px;top:-60px;left: calc(50% - 620px);z-index: 0}
.cloud-img-bga,.cloud-img-bgb,.cloud-img-bgc{position: absolute;width: 100px;top:calc(40% - 50px);}
.cloud-img-bga{transform: translateY(-60%);left: calc(50% - 600px) }
.cloud-img-bgb{transform: translateY(-60%);left: calc(50% + 400px);width: 200px ;top:calc(40% - 80px);}
.cloud-img-bgc{transform: translateY(-60%);left: calc(50% - 20px);top:auto;bottom: calc(20% - 50px) }

.cloud-img-bg2{width: 540px;top:-60px;left:  calc(50% - 40px);}
.cloud-img-bg3{width: 540px;top:auto;bottom:100px;left:  calc(50% - 480px);}
.cloud-img-bg4{width: 540px;top:auto;bottom:100px;left:  calc(50% + 100px);}
.cloud-img-bg5{width: 540px;top:auto;top:80px;left:  calc(50% - 680px);}