h1{font-size:36px;} h2 {font-size:34px;}h3 {font-size:32px;}h4 {font-size:30px;}h5 {font-size:28px;}h6 {font-size:26px;}p {font-size:18px;}

.bold {
	font-weight: bold;
}
.container.maxwid {
    max-width: 1320px !important;
}

/* start */

.banner-section{
    position: relative;
}

.banner-section .video {
    position: relative;
    width: 100%;
    height: 800px; /* 限制影片區塊高度 */
    overflow: hidden;
}

.banner-section .video video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 讓影片滿版顯示 */
    transform: translate(-50%, -50%);
	clip-path: polygon(0% 0%, calc(100% - 0px) 0%, calc(100% - 0px) calc(100% - 0px), 0% calc(100% - 1px));
	margin: -1px;
}

/* .banner-section .video video{
	width:100%;
	height: 100%;
	display: block;
	clip-path: polygon(0% 0%, calc(100% - 0px) 0%, calc(100% - 0px) calc(100% - 0px), 0% calc(100% - 1px));
	margin: -1px;
} */

.banner-section .video::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 調整透明度 */
    pointer-events: none; /* 確保不影響影片播放 */
}

.banner-section .content {
	position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 16%;
}

.banner-section .content h1{
	color: #fff;
	margin: 0;
	padding-right: 0;
    padding-left: 0;
	padding-bottom: 30px;
}

.banner-section .content a {
    margin-left: 5%;
}

.banner-section .content .btn-call-to-action {
	background-color: #64be00;
}

@media screen and (max-width: 1601px) {
.banner-section .video {
    position: relative;
    width: 100%;
    height: 600px;
}
.banner-section .content {
    width: 35%;
}
}

@media screen and (max-width: 1440px) {
.banner-section .content {
    width: 38%;
    left: 12%;
}
}

@media screen and (max-width: 1025px) {
.banner-section .content {
    width: 50%;
	left: 5%;
}
}

@media screen and (max-width: 991px) {
.banner-section .content {
    width: 70%;
}
}

@media screen and (max-width: 450px) {
.banner-section .content .btn-lg{
	padding: 0px 16px;
}
.banner-section .content a {
    margin-left: 0%;
	margin-top: 5%;
}
}

/* start */

.cloud-section {
	 background:url('/sites/zyxel/files/library/assets/products/ncc/Cloud.png') no-repeat center top;
	 height:1450px;
	 background-size:cover;
	 position:relative;
}

.cloud-section .cloud-management {
	padding-top: 5%;
}

.cloud-section .cloud-management .frame {
	padding: 50px 0px;
    width: 85%;
    height: 100%;
    margin: 0 auto;
}

.cloud-section .cloud-management .frame .content {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}

.cloud-section .cloud-management .frame .content .text {
    width: 75%;
    margin-left: 5%;
}

.cloud-section .cloud-management .frame .content .text h3{
	padding-bottom: 30px;
    font-weight: bold;
}

.cloud-section .cloud-management .frame .content .text .btn-lg {
	background-color: #64be00!important;
}

.cloud-section .cloud-management .frame .content .desktop-photo, .cloud-section .management-platform .frame .content .desktop-photo{
	width: 100%!important;
}

.cloud-section .management-platform .frame .content .desktop-photo img{
	width: 90%!important;
}

.cloud-section .cloud-management .frame .content .desktop-photo ul{
	list-style: none;
    display: flex;
    flex-direction: row;
    width: 80%;
	margin: 0 auto;
}

.cloud-section .cloud-management .frame .content .desktop-photo ul img{
	width: 50%!important;
	margin: 0 auto;
}

.cloud-section .management-platform .frame {
	padding: 50px 0px;
    width: 70%;
    height: 100%;
    margin: 0 auto;
}

.cloud-section .management-platform .frame .content {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.cloud-section .management-platform .frame .content .text {
	width: 80%;
}

.cloud-section .management-platform .frame .content .text a {
	margin-top: 20px;
}

/* .cloud-section .management-platform .frame .content .desktop-photo img {
	width: 90%!important;
} */

.cloud-section .management-platform .frame .content .text h3{
	padding-bottom: 30px;
    font-weight: bold;
}

/* .cloud-section .cloud-management .frame .content.desktop-photo, .cloud-section .management-platform .frame .content .desktop-photo {
	display:block;
}

.cloud-section .cloud-management .frame .content .mobile-photo, .cloud-section .management-platform .frame .content .mobile-photo {
	display:none;
} */

@media screen and (max-width: 2000px) {
.cloud-section {
	 height:1200px;
}
.cloud-section .management-platform .frame {
        padding: 30px 0px;
}
}

@media screen and (max-width: 1601px) {
.cloud-section .management-platform .frame {
    padding:0px;
}
}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1025px) {
.cloud-section .cloud-management .frame .content .text, .cloud-section .management-platform .frame .content .text {
	width: 90%;
}
}

@media screen and (max-width: 991px) {
.cloud-section {
	 background:none;
	 height:auto;
}



/* .cloud-section .cloud-management .frame .content .desktop-photo, .cloud-section .management-platform .frame .content .desktop-photo {
	display:none!important;
}
.cloud-section .cloud-management .frame .content .mobile-photo, .cloud-section .management-platform .frame .content .mobile-photo {
	display:block;
} */
.cloud-section .cloud-management .frame .content, .cloud-section .management-platform .frame .content {
    flex-direction: column;
}
.cloud-section .cloud-management .frame .content .text, .cloud-section .management-platform .frame .content .text {
     width: 100%;
}
.cloud-section .management-platform .frame .content .desktop-photo img{
	width: 100%!important;
}
}

@media screen and (max-width: 450px) {
.cloud-section .cloud-management .frame .content .text .btn-lg, .cloud-section .management-platform .frame .content .text .btn-lg{
	padding: 0px 16px;
}
}


 /* start */

.network-management-features{
	position:relative;
}

.network-management-features .frame {
	width:65%;
	margin:0 auto;
}

.network-management-features .description {
	width:80%;
	margin: 0 auto;
	text-align:center;
}

.network-management-features .description a {
	margin-top: 20px;
}

.network-management-features .description .btn-lg {
	background-color: #64be00!important;
}

.network-management-features .description h3{
	padding-bottom: 30px;
    font-weight: bold;
}

.network-management-features .network-management-image{
	width: 50%;
	margin-left: 50px;
}

.network-management-features .content {
	display: flex;
    flex-direction: row-reverse;
	width: 100%;
    align-items: center;
	padding-top: 50px;
}

.network-management-image img.networkmanagement02, img.networkmanagement03, img.networkmanagement04{
	display:none;
}

.network-management-features .panel-group{
    float: left;
    width: 50%;
    border-bottom: 0;
    min-height: 500px;
}

.network-management-features .panel{
    border:none;
    border-top:1px solid #c1c1c1;
    padding:10px 0;
}

.network-management-features .panel-default>.panel-heading{
    background:transparent !important;
}

.network-management-features .panel-default .panel-body a:hover {
    color: #64be00;
}

.network-management-features .panel-default{
    border-top : 1px solid #64be00 !important;
	color: #000;
    
}


.network-management-features .panel-default .panel-title{
    padding: 15px 25px 15px 30px !important;
}

.network-management-features .panel-default .panel-title:after {
    border-color: #64be00;
}

.network-management-features .panel-default .panel-body {
    padding: 20px 40px 20px 30px !important;
}

.network-management-features .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top: none!important;
}

@media (max-width:1700px){
.network-management-features .panel-default .panel-title{
    padding: 15px 25px 15px 10px !important;
}
.network-management-features .panel-default .panel-body {
    padding: 20px 40px 20px 10px !important;
}
}

@media (max-width:1601px){
.network-management-features .frame {
	width:78%;
}
.network-management-image{
	width:45%;
}
.network-management-features .panel-group{
	min-height: 450px;
}
}


@media (max-width:1440px){
.network-management-features .frame {
	width:80%;
}
.network-management-features .panel-default .panel-title{
    padding: 15px 25px 15px 10px !important;
}
.network-management-features .description {
    width: 90%;
}
}

@media (max-width:1025px){
.network-management-features .frame {
	width:95%;
}
.network-management-image{
	width:45%;
	right: 0%;
}
.network-management-features .panel-group{
    margin-left: 0px;
	min-height: 300px;
}
}

@media (max-width:991px){
.network-management-features .content {
    flex-direction: column-reverse;
}
.network-management-image{
	width:100%;
	padding-bottom:30px;	
	position: relative;
}
.network-management-features .panel-group{
	width:100%;
	padding-right:15px;
	padding-left:15px;
	padding-top: 50px;
	min-height: auto;
}
.network-management-features .network-management-image{
	width: 80%;
	margin-left: 0px;
}
}

@media (max-width: 450px){
.network-management-features .panel-group{
	padding-right:0px;
	padding-left:0px;
}
.network-management-features .description .btn-lg{
	padding: 0px 16px;
}
.network-management-features .panel-default .panel-title{
    padding: 15px 20px 15px 0px !important;
}

.network-management-features .panel-default .panel-body {
    padding: 40px 20px 50px 0px !important;
}
}


/* start */


.cloud-ncc-section {
/* 	 background:url('/sites/zyxel/files/library/assets/products/ncc/Cloud2.png') no-repeat center top;
	 height:1400px;
	 background-size:cover;
	 position:relative; */
}

.cloud-ncc-section .nebula-mobile-app {
	padding: 50px 0px;
    margin: 0 auto;
    width: 100%;
}

.cloud-ncc-section .nebula-mobile-app .frame {
	display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin: 0 auto;
}

/* .cloud-ncc-section .nebula-mobile-app .frame .content {
	width: 100%;
} */

/* .cloud-ncc-section .nebula-mobile-app .frame .content .text {
    width: 50%;
} */

.cloud-ncc-section .nebula-mobile-app .frame .content {
    margin-left: 5%;
	width: 90%;
}

.cloud-ncc-section .nebula-mobile-app .frame .content .text h3{
	padding-bottom: 30px;
    font-weight: bold;
}

.cloud-ncc-section .nebula-mobile-app .frame .content .text img{
	width: 60% !important;
    margin-top: 30px;
}

.cloud-section .nebula-mobile-app .frame .content .text .btn-lg {
	background-color: #64be00!important;
}

@media (max-width: 1700px) {
.cloud-ncc-section .nebula-mobile-app .frame {
    width: 80%;
}
}

@media (max-width: 1440px) {
.cloud-ncc-section .nebula-mobile-app .frame {
    width: 85%;
}
}

@media (max-width: 1025px) {
/* .cloud-ncc-section {
    height: 1200px;
} */
.cloud-ncc-section .nebula-mobile-app .frame {
    width: 100%;
}
.cloud-ncc-section .nebula-mobile-app .frame .content {
    margin-left: 0%;
}
}

@media (max-width: 991px) {
.cloud-ncc-section {
    background: none;
	height: 1100px;
}
.cloud-ncc-section .nebula-mobile-app .frame {
    flex-direction: column;
    width: 90%;
}
}

@media (max-width: 450px) {
.cloud-ncc-section .nebula-mobile-app .frame .content .text .btn-lg {
	padding:0px 16px!important;
}
}

.slideArea{display: flex; flex-direction: row;width: 100%;}
/* .slideshowArea{width: 55%; flex-direction: column; padding-left: 5%;} */
.slideshow-container {
  max-width: 600px;
  position: relative;
  margin: auto;
}

@media (max-width: 1025px) {
.slideArea {
    height: 400px;
}
}

@media (max-width: 991px) {
.slideArea{flex-direction: column;}
.slideshowArea {width: 100%;margin: 0 auto; padding-top: 15%;}
}

@media (max-width: 630px) {
.slideshowArea {width: 80%;}
}

@media (max-width: 450px) {
.slideshow-container {
  max-width: 600px;
  position: relative;
  margin: auto;
}
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 45%;
  width: auto;
  margin-top: -35px;
  transition: 0.6s ease;
  margin-left:-30px;
  font-size: 30px;
  color:#59575a;
}

.next {
  right: -30px;
}

.numbertext {
  color: #dadada;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.slidedot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #dadada;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.slidedot:hover ,.datactive{
  background-color: #52959b;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.0s;
  animation-name: fade;
  animation-duration: 1.0s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#mobile-screen{display:block;}
#mobile-screen .container ul{z-index:0; top:0 !important;}

@media (max-width: 1500px) {
#mobile-screen .container{width:80%;}
}

@media (max-width: 1300px) {
#mobile-screen .container{width:60%;}
#mobile-screen .container img{width:80% !important; height: auto !important;}
}

@media (max-width: 800px) {
#mobile-screen .container{margin: 0 auto; height: 500px !important;}
}

@media (max-width: 500px) {
#mobile-screen{display:block;}
#mobile-screen .container{margin: 0 auto; width:300px !important; height: 500px !important;}
}


/* start */

.flexible-licensing {
    padding: 0px 0px 50px 0px;
    margin: 0 auto;
    width: 80%;
}

.flexible-licensing .frame {
	width: 75%;
    margin: 0 auto;
}

.flexible-licensing .frame .content {
	display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}

.flexible-licensing .frame .content .text {
	width: 60%;
}

.flexible-licensing .frame .content .text h3 {
	padding-bottom: 30px;
    font-weight: bold;
}

.flexible-licensing .frame .content .text .btn-lg {
	background-color: #64be00!important;
}

.flexible-licensing .frame .content .desktop-photo {
	display:block;
}

.flexible-licensing .frame .content .desktop-photo img{
	width: 80%!important;
}

@media (max-width: 1700px) {
.flexible-licensing .frame {
	width: 95%;
}
.flexible-licensing .frame .content .text {
	width: 65%;
}
}

@media (max-width: 1440px) {
.flexible-licensing .frame .content .text {
	width: 85%;
}
}

@media (max-width: 1025px) {
.flexible-licensing .frame {
	width: 100%;
}
.flexible-licensing .frame .content .text {
    width: 100%;
}
}

@media (max-width: 991px) {
.flexible-licensing .frame .content {
    flex-direction: column;
}
.flexible-licensing .frame {
	width: 100%;
}
.flexible-licensing .frame .content .desktop-photo img{
	width: 100%!important;
}
}

@media (max-width: 450px){
.flexible-licensing .frame .content .text .btn-lg{
	padding: 0px 16px;
}
}




/* start */


.nebula-supported-section .frame {
	width: 80%;
	margin: 0 auto;
    padding-top: 20px;
}

.nebula-supported-section .frame .intro{
	text-align: center;
    width: 65%;
    margin: 0 auto;
}

.nebula-supported-section .frame .intro h3 {
    padding-bottom: 30px;
    font-weight: bold;
}


.nebula-supported-section .frame .area {
	width: 65%;
    margin: 0 auto;
}

.nebula-supported-section .frame .area .photo {
    flex-wrap: wrap;
    display: flex;
}

.nebula-supported-section .frame .area .photo .box {
    width: calc(100% / 2);
    margin-bottom: 20px;
}

.nebula-supported-section .frame .area .photo .box .content .products-1 {
	background:url('/sites/zyxel/files/library/assets/products/ncc/07-01_Nebula-Supported-Devices_410x510.jpg') no-repeat center;
	background-size:contain;
	position:relative;
	height:500px;
}

.nebula-supported-section .frame .area .photo .box .content .products-2 {
	background:url('/sites/zyxel/files/library/assets/products/ncc/07-02_Nebula-Supported-Devices_410x510.jpg') no-repeat center;
	background-size:contain;
	position:relative;
	height:500px;
}

.nebula-supported-section .frame .area .photo .box .content .products-3 {
	background:url('/sites/zyxel/files/library/assets/products/ncc/07-03_Nebula-Supported-Devices_410x510.jpg') no-repeat center;
	background-size:contain;
	position:relative;
	height:500px;	
}

.nebula-supported-section .frame .area .photo .box .content .products-4 {
	background:url('/sites/zyxel/files/library/assets/products/ncc/07-04_Nebula-Supported-Devices_410x510.jpg') no-repeat center;
	background-size:contain;
	position:relative;
	height:500px;	
}

.nebula-supported-section .frame .area .photo .box .content .title{
	position: absolute;
    bottom: 10%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nebula-supported-section .frame .area .photo .box .content .title .btn-lg {
	background-color: #64be00;
    color: #fff;
}

.nebula-supported-section .frame .area .photo .box .content .text {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    padding-top: 15px;
}

@media screen and (max-width: 2100px) {
.nebula-supported-section .frame {
    padding-top: 0px;
}
}

@media screen and (max-width: 1601px) {
.nebula-supported-section .frame .area .photo .box .content .text {
    width: 85%;
}
}

@media screen and (max-width: 1601px) {
.nebula-supported-section .frame .area {
    width: 85%;
}
}

@media screen and (max-width: 1440px) {	
.nebula-supported-section .frame .intro {
    width: 80%;
}
.nebula-supported-section .frame .area .photo .box .content .text {
    width: 90%;
}
}

@media screen and (max-width: 1025px) {
.nebula-supported-section .frame .intro {
    width: 100%;
}
.nebula-supported-section .frame .area .photo {
    justify-content: center;
}
.nebula-supported-section .frame .area .photo .box {
    width: calc(100% / 2);
}
.nebula-supported-section .frame .area .photo .box .content .title {
    bottom: 15%;
}	
}

@media screen and (max-width: 991px) {
.nebula-supported-section .frame .area .photo .box {
    width: 100%;
}
}

@media screen and (max-width: 450px) {
.nebula-supported-section .frame .area .photo .box .content .title .btn-lg {
	padding: 0px;
}
}

@media screen and (max-width: 435px) {
.nebula-supported-section .intro {
	height: auto;
	padding-top: 15px;
}
}


/* start */

.customer-success-section .carousel-inner .Success-01{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-01_Jeju-Hotel.png') no-repeat center top;
	 height:700px;
	 background-size:cover;
	 position:relative;
}

.customer-success-section .carousel-inner .Success-02{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-02_ICS-Milan-International-School.png') no-repeat center top;
	 height:700px;
	 background-size:cover;
	 position:relative;
}

.customer-success-section .carousel-inner .Success-03{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-03_FeuVert.png') no-repeat center top;
	 height:700px;
	 background-size:cover;
	 position:relative;
}

.customer-success-section .carousel-inner .Success-04{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-04_ProDentist.png') no-repeat center top;
	 height:700px;
	 background-size:cover;
	 position:relative;
}


.customer-success-section .carousel-inner .carousel-caption {
    position: absolute;
    right: 0%;
    bottom: 0px;
    left: 8%;
    z-index: 10;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #000;
    text-shadow: none;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70%;
	text-align: left;
}

.customer-success-section .carousel-inner .carousel-caption h3{
    padding-bottom: 30px;
    font-weight: bold;
}

.customer-success-section .carousel-inner .carousel-caption img {
	width:45%!important;
}

.customer-success-section .carousel-inner .carousel-caption .button .btn-call-to-action {
    background-color: #64be00;
}

.customer-success-section .carousel a.carousel-control.left, .customer-success-section .carousel a.carousel-control.right {
    font-size: 20px;
    width: 50px;
    height: 50px;
    top: 50%;
    color: #64be00;
    border: 1px solid;
    border-radius: 99px;
}


.customer-success-section .carousel a.carousel-control.left {
    left: 10px;
}


.customer-success-section ol.carousel-indicators {
    bottom: 10px;
}

.customer-success-section .carousel-indicators {
    width: 40%;
}

.customer-success-section .Success-arrow {
	width: 42%;
    position: absolute;
    bottom: 40%;
}


@media screen and (min-width: 768px) {
.customer-success-section .carousel-control .glyphicon-chevron-left, .customer-success-section .carousel-control .glyphicon-chevron-right, .customer-success-section .carousel-control .icon-prev, .carousel-control .icon-next {
        width: 20px;
        height: 20px;
        font-size: 20px;
}
}


@media screen and (max-width: 1601px) {
.customer-success-section .carousel-inner .Success-01, .customer-success-section .carousel-inner .Success-02, .customer-success-section .carousel-inner .Success-03, .customer-success-section .carousel-inner .Success-04{
	 height:800px;
}
.customer-success-section .carousel-inner .carousel-caption {
    height: 100%;
}
}

@media screen and (max-width: 1025px) {
.customer-success-section .carousel-inner .Success-01 {
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-01_Jeju-Hotel_1920x765.jpg') no-repeat center bottom;
    height: 800px;
    background-size: contain;
    position: relative;
}
.customer-success-section .carousel-inner .Success-02{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-02_ICS-Milan-International-School_1920x765.jpg') no-repeat center bottom;
	 height:800px;
	 background-size:contain;
	 position:relative;
}

.customer-success-section .carousel-inner .Success-03{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-03_FeuVert_1920x765.jpg') no-repeat center bottom;
	 height:800px;
	 background-size:contain;
	 position:relative;
}

.customer-success-section .carousel-inner .Success-04{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/08-04_ProDentist_1920x765.jpg') no-repeat center bottom;
	 height:800px;
	 background-size:contain;
	 position:relative;
}
.customer-success-section .carousel-inner .carousel-caption {
    position: relative;
    width: 85%;
	height: auto;
}
.customer-success-section .carousel a.carousel-control.left, .customer-success-section .carousel a.carousel-control.right {
	background: #fff;
}
.customer-success-section .Success-arrow {
    width: 95%;
    bottom: 25%;
}
.customer-success-section .carousel-indicators {
    width: 60%;
}
}

@media screen and (max-width: 450px) {
.customer-success-section .carousel-inner .Success-01, .customer-success-section .carousel-inner .Success-02, .customer-success-section .carousel-inner .Success-03, .customer-success-section .carousel-inner .Success-04 {
    height: 850px;
}
.customer-success-section .carousel-inner .carousel-caption .button .btn-call-to-action {
    padding: 0px 16px;
}
.customer-success-section .Success-arrow {
	display: none;
}
.customer-success-section .carousel-inner .carousel-caption img {
	width:75%!important;
}
}

/* start */

.success-industry-section{
	position:relative;
	overflow:hidden;
	height:600px; 
	background:url('/sites/zyxel/files/library/assets/products/ncc/09_Customer-Success-by-Industry_1920x750.jpg'); 
	background-repeat:no-repeat;
	background-size:cover; 
	background-position:center 50%;	
}


.success-industry-section .frame{
	display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
	background: rgba(0, 0, 0, 0.1);
}

.success-industry-section .frame .title{
	position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 15px;
}

.success-industry-section .frame .area{
    height: 100%;
    width: 100%;
	padding: 40px;
}

.success-industry-section .frame .area .text{
    position: absolute;
    width: 20%;
    display: flex;
    justify-content: center;
	padding:20px 0px;
}

.success-industry-section .frame .area .text h6{
	font-size:20px;
	border-radius: 6px;
    padding: 5px 8px;
	color:#fff;
}

.success-industry-section .frame .area:hover{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0,0, 0.5);
}

.success-industry-section .frame .area .overlay{
    display: block;
    visibility: hidden;
	position: absolute;
    top: 30%;
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.success-industry-section .frame .area .overlay .description{
	text-align: center;
	color:#fff;
}

.success-industry-section .frame .area:hover .overlay{
	visibility: visible;
}


.success-industry-section .frame .area:hover .overlay .description{
	text-align: center;
}

.success-industry-section .frame .area .overlay .view{
	text-align: center;
    padding-top: 20%;
}

.success-industry-section .frame .area .overlay .view a, .success-industry-section .frame .area .overlay .view a:hover {
	color: #fff;
}

@media (max-width: 1440px) {
.success-industry-section{
	height:550px; 
}
}


@media (max-width: 1025px) {
.success-industry-section {
	display:none;
}

/* .success-industry-section .frame .area .text {
    top: 20%;
} */
}


/* @media (max-width: 991px) {
.success-industry-section {
    height: 700px;
	background-position: center left;
}
.success-industry-section .frame {
    flex-direction: column;
}
.success-industry-section .frame .title {
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px 10px 10px;
}
.success-industry-section .frame .area {
    height: 100%;
    width: 100%;
    padding: 0px 10px;
    position: relative;
}
.success-industry-section .frame .area .text {
    position: relative;
    top: 0%;
    width: 100%;
    display: flex;
    padding: 15px 0px;
}
.success-industry-section .frame .area .overlay {
    display: block;
    visibility: visible;
    position: relative;
    top: 0%;
    width: 100%;
    display: flex;
	justify-content: flex-start;
}
}

@media (max-width: 450px) {
.success-industry-section {
    height: 700px;
}
} */


/* start */


.success-industry {
	position: relative;
	display:none;
}

/* .success-industry .frame {
	flex-wrap: wrap;
    display: flex;
}

.success-industry .frame .box {
	width: calc(100% / 4);
}

.success-industry .frame .box .photo {
	position: relative;
}

.success-industry .frame .box .photo .area{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    text-align: center;
}

.success-industry .frame .box .photo .area .text {
	color: #fff;
	padding-top: 5%;
}

.success-industry .frame .box .photo .area .text:hover{
	color: #fff;
    opacity: 1;
}

.success-industry .frame .box .photo .area  .overlay{
	bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #fff;
}

.success-industry .frame .box .photo .area  .overlay .description{
	padding-top: 25%;
}


.success-industry .frame .box .photo .area:hover .overlay{
	visibility: visible;
}

.success-industry .frame .box .photo .area .overlay .view {
    padding-top: 10%;
}

.success-industry .frame .box .photo .area .overlay .view a, a:hover {
	color:#fff;
} */

@media (max-width: 1025px) {
.success-industry {
	position: relative;
	display:block;
}
.success-industry .frame {
	flex-wrap: wrap;
    display: flex;
}
/* .success-industry .frame .box {
    width: calc(100% / 2);
} */
.success-industry .frame .box .photo {
    position: relative;
    color: #fff;
	display: flex;
    flex-direction: column-reverse;
}

.success-industry .frame .box .photo img{
	width: 60%!important;
    margin: 0 auto;
}

.success-industry .frame .box .photo .area {
/*     position: absolute; */
/*     top: 0;
    bottom: 0;
    left: 0;
    right: 0; */
    height: 100%;
    width: 80%;
/*     text-align: center; */
/*     background: rgba(0, 0, 0, 0.3); */
/*     display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
	color:#000;
	margin: 0 auto;
}
.success-industry .frame .box .photo .area .text {
	display: flex;
    flex-direction: column;
	padding: 20px;
}
.success-industry .frame .box .photo .area .text h3{
    font-weight: bold;
    padding-bottom: 30px;
}
.success-industry .frame .box .photo .area .text .view p{
	color: #fff; 
/* 	padding-top: 10%; */
}
/* .success-industry .frame .box .photo .area .overlay .description {
    padding-top: 25%;
}
.success-industry .frame .box .photo .area .overlay .view {
    padding-top: 10%;
} */
/* .success-industry .frame .box .photo .area .overlay .view a, a:hover {
    color: #000;
} */
.success-industry .frame .box .photo .area .text .view .btn-call-to-action{
	color: #fff;
    background-color: #64be00;
}
}


@media (max-width: 450px) {
.success-industry .frame .box {
	width: 100%;
}
.success-industry .frame .box .photo .area .text .view .btn-call-to-action{
	padding:0px 16px;
}
}


/* start */

.others {
	width: 100%;
    height: 100%;
}

.others .frame {
    align-items: flex-start;
    flex-wrap: wrap;
    display: flex;
}

.others .frame .area{
	width: calc(100% / 3);
}

.others .frame .area img{
	width:90%!important;
}

.others .frame .text {
	padding-top: 5%;
}

.others .frame .text h3{
	padding-bottom:30px;
	font-weight:bold;
}

.others .frame .area .btn-lg {
	background-color:#64be00;
}

@media (max-width: 1025px) {
.others .frame {
    width: 80%;
    margin: 0 auto;
}
.others .frame .area {
    width: 100%;
}
.others .frame .area img{
	width:80%!important;
    margin: 0 auto;
}
}

@media (max-width: 450px) {
.others .frame .area .btn-lg{
	padding: 0px 16px;
}
}


/* start */

.free-trial {
	background-color:#64be00;
}

.free-trial .text {
	width:85%;
	margin:0 auto;
	color:#fff;
	text-align:center;
}

.free-trial .text h3{
	padding-bottom:30px;
	font-weight:bold;
}

.free-trial img{
    width: 15%!important;
    margin: 0 auto;
}

@media (max-width: 1025px) {
.free-trial img{
    width: 20%!important;
}
}

@media (max-width: 991px) {
.free-trial img{
    width: 30%!important;
}
}

@media (max-width: 450px) {
.free-trial img{
    width: 50%!important;
}
}


/* start */

.lightbox {
  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  position: fixed;
  display: none;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.lightbox-container {
  position: relative;
  width: 1000px; /* 限制影片寬度 */
  max-width: 90%;
  background: #000;
  border-radius: 8px;
  padding: 20px;
}

.video-container {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

#playme {
  background: #64be00;
  font-weight: 300;
  border: none;
  color: white;
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
}


/* advanced solutions */

/* start */

.advanced-banner{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/Advanced_Solutions_Banner_1920x765.jpg') no-repeat bottom;
	 height:600px;
	 background-size:cover;
	 position:relative;
}


.advanced-area{
    width: 100%;
    height: 100%;
}

.advanced-box {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 35%;
	height: 100%;
	padding-left: 15%;
	color: #fff;
}

.advanced-box h1{
	font-weight:bold;
	line-height: 1.4em;
}

@media screen and (max-width: 2100px) {
.advanced-box {
    width: 40%;
}
}

@media screen and (max-width: 1601px) {
.advanced-banner{
	 height:450px;
}
.advanced-box {
    width: 45%;
	padding-left: 10%;
}
}

@media screen and (max-width: 1440px) {
.advanced-box {
	padding-left: 5%;
}
}

@media screen and (max-width: 1025px) {
.advanced-banner{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/Advanced_Solutions_Banner_1920x765.jpg') no-repeat center;
	 height:400px;
	 background-size:cover;
	 position:relative;
}

.advanced-box {
	padding-left: 5%;
	 width: 55%;
}
}

@media screen and (max-width: 991px) {
.advanced-box {
    width: 80%;
	padding: 5%;
	justify-content: flex-start;
}
}


@media screen and (max-width: 450px) {
.advanced-banner{
	 height:350px;
}
.advanced-box {
    width: 90%;
}
.advanced-box h1{
	font-size: 20px;
}
}


/* start */

/* .advanced-banner-section{
    position: relative;
}

.advanced-banner-section .video {
    position: relative;
    width: 100%;
    height: 764px; 
    overflow: hidden;
}

.advanced-banner-section .video video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transform: translate(-50%, -50%);
}

.advanced-banner-section .video::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); 
    pointer-events: none; 
}

.advanced-banner-section .content {
	position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 16%;
}

.advanced-banner-section .content h1{
	color: #fff;
	margin: 0;
	padding-right: 0;
    padding-left: 0;
	padding-bottom: 30px;
}

.advanced-banner-section .content a {
    margin-left: 5%;
}


@media screen and (max-width: 1601px) {
.advanced-banner-section .video {
    position: relative;
    width: 100%;
    height: 600px;
}
.advanced-banner-section .content {
    width: 35%;
}
}

@media screen and (max-width: 1440px) {
.advanced-banner-section .content {
    width: 38%;
    left: 12%;
}
}

@media screen and (max-width: 1025px) {
.advanced-banner-section .content {
    width: 50%;
	left: 5%;
}
}

@media screen and (max-width: 991px) {
.advanced-banner-section .content {
    width: 90%;
	text-align:center;
}
} */


/* start */

.nebula-advanced-solutions-section{
    width: 70%;
    text-align: center;
    margin: 0 auto;
}

.nebula-advanced-solutions-section .frame .content h6{
    font-weight: bold;
    padding-bottom: 30px;
}

@media screen and (max-width: 1601px) {
.nebula-advanced-solutions-section{
    width: 65%;
}
}

@media screen and (max-width: 1025px) {
.nebula-advanced-solutions-section{
    width: 85%;
}
}

.Nebula-Advanced-Solutions {
	background: url(/sites/zyxel/files/library/assets/products/ncc/01_Nebula-Advanced-Solutions.png) no-repeat center top;
    height: 600px;
    background-size: contain;
    position: relative;
    margin-top: -5%;
}

.Nebula-Advanced-Solutions .frame {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.Nebula-Advanced-Solutions .frame .content {
    position: absolute;
    width: 40%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
	padding: 5%;
}

.Nebula-Advanced-Solutions .frame .content h6 {
    font-weight: bold;
    padding-bottom: 30px;
}

@media screen and (max-width: 2100px) {
.Nebula-Advanced-Solutions .frame .content {
    width: 45%;
}
}

@media screen and (max-width: 1601px) {
.Nebula-Advanced-Solutions {
    height: 550px;
}
}

@media screen and (max-width: 1025px) {
.Nebula-Advanced-Solutions {
    height: 600px;
}
.Nebula-Advanced-Solutions .frame .content {
    width: 75%;
}
}

@media screen and (max-width: 991px) {
.Nebula-Advanced-Solutions {
	background: url(/sites/zyxel/files/library/assets/products/ncc/01_Nebula-Advanced-Solutions.png) no-repeat center top;
    height: 600px;
    background-size: cover;
    position: relative;
    margin-top: -10%;
}
}

@media screen and (max-width: 450px) {
.Nebula-Advanced-Solutions {
    background: url(/sites/zyxel/files/library/assets/products/ncc/01_Nebula-Advanced-Solutions.png) no-repeat center top;
    height: 750px;
    background-size: contain;
    position: relative;
    margin-top: -10%;
}
}

/* start */


/* .features-section .nav>li>a {
    position: relative;
    display: block;
    padding: 5px 15px;
}
 */

/* .features-section .nav-tabs li{
    float: none;
    display: inline-block;
    border-radius: 5px;
	margin-bottom: 10px;
} */

/* .features-section .nav-tabs>li>a{
	font-size:18px!important;
} */

/* .features-section .nav-tabs>li.active>a, 
.features-section .nav-tabs>li.active>a:focus, 
.features-section .nav-tabs>li.active>a:hover{
	color: #64be00;
    border-bottom: 2px solid #64be00;
    border-top: transparent;
    border-right: transparent;
    border-left: transparent;
    font-weight: bold;
	position: relative;
} */

.features-section .nav-tabs {
    margin: 0 auto;
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    position: relative;
    border-bottom: 2px solid #64be00; /* Green bottom border for the entire nav */
}

.features-section .nav-tabs>li {
    position: relative;
    padding: 0px;
	margin-bottom: -2px;
}

.features-section .nav-tabs>li>a {
    color: #000;
    font-size: 20px !important;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 1; /* Ensure the link is on top of the pseudo-element */
}

.features-section .nav-tabs>li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: transparent; /* Transparent bottom border */
    z-index: -1; /* Place the pseudo-element behind the link */
}

.features-section .nav-tabs>li.active>a,
.features-section .nav-tabs>li.active>a:focus,
.features-section .nav-tabs>li.active>a:hover {
    color: #64be00;
/*     background-color: transparent;  */
    border-bottom: 2px solid white; /* White bottom border for the active tab */
    border-top: 2px solid #64be00;  /* Green top border */
    border-right: 2px solid #64be00; /* Green right border */
    border-left: 2px solid #64be00;  /* Green left border */
    font-weight: bold;
    position: relative;
    z-index: 2; /* Ensure the active tab is above the pseudo-element */
	text-decoration: none;
}


.features-section .nav-tabs>li.active::after {
    background-color: white; /* White line under the active tab */
}




/* .features-section .nav-tabs li {
    float: none;
    display: inline-block;
	padding: 0px!important;
    position: relative;
}

.features-section .nav-tabs>li>a {
    font-size: 20px !important;
    padding: 10px 20px;
    display: block;
    color: #000;
    text-decoration: none;
} */

/* .features-section .nav-tabs>li>a:hover {
    color: #64be00;
} */

/* .features-section .nav-tabs>li.active>a {
    color: #64be00;
    font-weight: bold;
    position: relative;
} */

@media (max-width: 450px) {
.features-section .nav-tabs li {
    margin: 0px;
}
.features-section .nav-tabs>li>a {
    padding: 10px;
}
}

/* start */

/* .features-section .tab-indicator {
	position: relative;
    max-width: 100%;
    height: auto;
    padding: 30px;
    width: 100px;
}


.features-section .tab-indicator:after {
	position: absolute;
    width: 50px;
    height: 50px;
    border-top: 0px solid #ededed;
    border-right: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
    border-left: 0px solid #ededed;
    top: 0%;
    left: 50%;
    margin-left: -26px;
    content: '';
    transform: rotate(225deg);
    margin-top: -25px;
    background: #fff;
} */


/* 底部箭頭標示 */


@media (max-width: 1025px) {
    .features-section .tab-indicator {
        display: none; /* 移動端可隱藏箭頭 */
    }	
}

/* @media only screen and (max-width: 1025px){
.features-section .nav-tabs{
	width:100%;
	text-align:center;
	border-bottom: none;
}
}

@media only screen and (max-width: 991px){
.features-section .nav-tabs li {
    margin-bottom: 10px;
}
} */


/* .features-section .nav-tabs {
    border-bottom: none;
    padding-bottom: 50px;
    padding-top: 20px;
    margin: 0 auto;
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
}

.features-section .nav>li>a {
    position: relative;
    display: block;
    padding: 5px 15px;
}

.features-section .nav-tabs li {
    float: none;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 10px;
    position: relative;
}

.features-section .nav-tabs>li>a {
    font-size: 18px!important;
}

.features-section .nav-tabs>li.active>a, 
.features-section .nav-tabs>li.active>a:focus, 
.features-section .nav-tabs>li.active>a:hover {
    color: #64be00;
    font-weight: bold;
}

.tab-indicator {
    position: absolute;
    bottom: -10px;
    height: 4px;
    background: #ccc;
    width: 100%;
}

.tab-indicator::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ccc;
} */



/* start */

.ProFeatures-section {
    padding-top: 30px;
}

.ProFeatures-frame-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	padding: 5% 0%;
}

.ProFeatures-frame-left .text {
    width: 40%;
    margin-right: 20px;
}

.ProFeatures-frame-left video, .ProFeatures-frame-right video {
	width: 45%;
    margin: -1px;
    transform: translateY(1px);
    clip-path: polygon(0% 0%, calc(100% - 0px) 0%, calc(100% - 0px) calc(100% - 0px), 0% calc(100% - 1px));
}

.ProFeatures-frame-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    padding: 5% 0%;
}

.ProFeatures-frame-right .text {
    width: 40%;
    margin-left: 50px;
}


.ProFeatures-frame-left .text .btn-call-to-action, .ProFeatures-frame-right .text .btn-call-to-action {
    background-color: #288719;
}

.ProFeatures-frame-left .datasheet-mobile, .ProFeatures-frame-right .datasheet-mobile {
	display:none;
}

@media only screen and (max-width: 991px){
.ProFeatures-frame-left, .ProFeatures-frame-right {
    flex-direction: column;
}
.ProFeatures-frame-left .text, .ProFeatures-frame-right .text {
    width: 85%;
}

.ProFeatures-frame-left .text {
    margin-right: 0px;
}
.ProFeatures-frame-right .text {
    margin-left: 20px;
}
.ProFeatures-frame-left video, .ProFeatures-frame-right video  {
    width: 100%;
    padding-top: 30px;
}
.ProFeatures-frame-left .text .datasheet-desktop, .ProFeatures-frame-right .text .datasheet-desktop {
	display:none;
}
.ProFeatures-frame-left .datasheet-mobile, .ProFeatures-frame-right .datasheet-mobile {
	display:block;
	padding-top: 50px;
}
.ProFeatures-frame-left .datasheet-mobile .btn-call-to-action, .ProFeatures-frame-right .datasheet-mobile .btn-call-to-action {
	background-color: #64be00;
}
}

@media only screen and (max-width: 450px){
.ProFeatures-frame-left .text .btn-lg, .ProFeatures-frame-right .text .btn-lg{
	padding: 0px 16px;
}
.ProFeatures-frame-left .datasheet-mobile .btn-lg, .ProFeatures-frame-right .datasheet-mobile .btn-lg{
	padding: 0px 16px;
}
}

@media only screen and (min-width: 991px){
#vpn-orchestrator video {
   padding-left: 5%;
}
}

/* Resources */

/* start */

.resources-banner{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/resources_banner_1920x450.jpg') no-repeat bottom;
	 height:600px;
	 background-size:cover;
	 position:relative;
}


.resources-area{
    width: 100%;
    height: 100%;
}

.resources-box {
	display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 35%;
	height: 100%;
	padding-left: 15%;
	color: #fff;
    flex-direction: column-reverse;
}

.resources-box h1{
	font-weight:bold;
	line-height: 1.4em;
    padding-top: 20px;
}

@media screen and (max-width: 2100px) {
.resources-box {
    width: 40%;
}
}

@media screen and (max-width: 1601px) {
.resources-banner{
	 height:450px;
}
.resources-box {
    width: 45%;
	padding-left: 10%;
}
}

@media screen and (max-width: 1440px) {
.resources-box {
	padding-left: 5%;
}
}

@media screen and (max-width: 1025px) {
.resources-banner{
	 height:400px;
}

.resources-box {
	padding-left: 5%;
	 width: 55%;
}
}

@media screen and (max-width: 991px) {
.resources-banner{
	 background:url('/sites/zyxel/files/library/assets/products/ncc/resources_banner_1920x765.jpg') no-repeat center;
	 height:400px;
	 background-size:cover;
	 position:relative;
}
.resources-box {
	display: none;
}
}


@media screen and (max-width: 450px) {
.resources-banner{
	 height:350px;
}
}


/* start */

.resources-frame {
	 background:url('/sites/zyxel/files/library/assets/products/ncc/resources-frame.jpg') no-repeat center;
	 height:auto;
	 background-size:cover;
	 position:relative;
}


.resources-category .nav-tabs {
    margin: 0 auto;
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    position: relative;
    border-bottom: 2px solid #64be00; 
}

.resources-category .nav-tabs>li {
    position: relative;
    padding: 0px;
	margin-bottom: -2px;
}

.resources-category .nav-tabs>li>a {
    color: #000;
    font-size: 20px !important;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.resources-category .nav-tabs>li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: transparent; 
    z-index: -1;
}

.resources-category .nav-tabs>li.active>a,
.resources-category .nav-tabs>li.active>a:focus,
.resources-category .nav-tabs>li.active>a:hover {
    color: #64be00;
    border-bottom: 2px solid #f8f8f8; 
    border-top: 2px solid #64be00;  
    border-right: 2px solid #64be00; 
    border-left: 2px solid #64be00;  
    font-weight: bold;
    position: relative;
    z-index: 2; 
	text-decoration: none;
	background-color: #f8f8f8;
}


.resources-category .nav-tabs>li.active::after {
    background-color: white; /* White line under the active tab */
}


@media (max-width: 450px) {
.resources-category .nav-tabs li {
    margin: 0px;
}
.resources-category .nav-tabs>li>a {
    padding: 10px;
}
}


.resources-category  .resources-content {
	flex-wrap: wrap;
    display: flex;
    width: 100%;
	align-items: stretch;
}

.resources-category  .resources-content .text {
	width: calc(100% / 4);
    padding: 0px 10px;
    display: flex;
    flex-direction: column;
}

.resources-category  .resources-content .text .card {
	border-radius: 20px;
	flex-grow: 1; /* 讓所有卡片填滿可用高度 */
    position: relative; /* 讓內部的絕對定位元素相對於此卡片 */
    padding-bottom: 60px; /* 預留空間給按鈕，避免內容被擠壓 */
}

.resources-category  .resources-content .text .card img {
	width: 20%!important;
}

.resources-category  .resources-content .text .card .description .icon {
    display: flex;
    flex-direction: row;
    align-items: center;
}


.resources-category  .resources-content .text .card .description .icon p{
	margin-left: 15px;	
}

.resources-category  .resources-content .text .card .description .title {
    padding-top: 15px;
}

.resources-category  .resources-content .text .card .description span {
	font-size:12px;
}

.resources-category  .resources-content .text .card .description .button {
	padding-top:50px;
}

.resources-category  .resources-content .text .card .description .btn-call-to-action {
	background-color: #64be00;
	position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
}

@media screen and (max-width: 1025px) {
.resources-frame {
    height: auto;
}
.resources-category .resources-content .text {
    width: calc(100% / 3);
}
}


@media screen and (max-width: 991px) {
.resources-category .resources-content .text {
    width: calc(100% / 2);
}
}

@media screen and (max-width: 450px) {
.resources-category .resources-content .text {
    width: 100%;
}
.resources-category  .resources-content .text .card .description .btn-lg{
	padding: 0px 16px;
}
}