h1, #overview h1 {font-size:32px;} 
h2, #overview h2 {font-size:30px;}
h3, #overview h3 {font-size:28px;}
h4, #overview h4 {font-size:26px;}
h5, #overview h5 {font-size:24px;}
h6, #overview h6 {font-size:20px;}
p, #overview p {font-size:18px;}
table.license-content .text{
	font-size: 18px !important;
}


/* Additions */
.btn.btn-lg {padding: 0 20px;}

.bold {font-weight: bold;}

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

#overview .btn-call-to-action {
    background-color: #c71a13;
}

/* video header banner */
	.header-video .banner {
	    position: relative;
	    height: 765px;	
	    background-size: cover;	
		overflow: hidden;
	}

	.header-video #scenarios-video {
	    position: absolute;
	    object-fit: cover;
	    transform: translateY(1px);
	    width: 100%;
	    min-width: 100%;
	    height: calc(100% + 1px);	
	    left: 0;
	    right: 0;
	    bottom: 0;
	}

	.header-video video {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	.header-video .banner .area {
		position: relative;		
	    display: flex;		
	    width: 100%;
	    height: 100%;	
	}
		
	.header-video .banner .area .box {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: flex-start;
		padding: 0 8vw;
	    color: #ffffff;
	}

	.header-video .banner .area .box h1 {
		font-weight:bold;
	}

	@media screen and (max-width: 1601px) {
		.header-video .banner {
			 height:550px;
		}
	}

	@media screen and (max-width: 1025px) {
		.header-video .banner {
		 height:450px;
		}
	}

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


/* highlights */
	.highlights-section {
		background-color:#000;
	}

	.higtlights p {
		color:#fff;
	}

	.higtlights .box {
		display: flex;
	    flex-wrap: wrap;
	    width: 85%;
	    justify-content: center;
		margin: 0 auto;
	    text-align: center;
	}

	.higtlights .box .area {
		width: calc(100% / 5);
	}

	.higtlights .box .area img {
		width: 45%!important;
		margin: 0 auto;
		text-align: center;
	}

	.higtlights .box .area p {
		padding: 0 10px;
	}

	.higtlights .box .area p span {
		font-weight: bold;
	}

	@media screen and (max-width: 991px) {
		.higtlights .box {
			width: 90%;
		}	
		.higtlights .box .area {
			width: calc(100% / 2);
		}
		.higtlights .box .area p{
			margin-bottom: 10px;
		}
	}

/* section 2, 4, 5, 8, 10 */
	.p-two-col .frame {
		display: flex;
	    justify-content: center;
	    align-items: center;
		width: 85%;
		gap: 10%;
	    margin: 0 auto;
	}
	.p-two-col.img-r .frame{
		flex-direction: row-reverse;
	}
	.p-two-col.img-l .frame{
		flex-direction: row;
	}
		
	.p-two-col .content {
	    width: 50%;
	}
		
	.p-two-col .image {
	    width: 50%;	
	}

	.p-two-col .image img {
		padding: 10%;	
	}

	.p-two-col .content h3 {
		font-weight: bold;
		padding-bottom: 30px;
	}

	@media screen and (max-width: 1400px) {
		.p-two-col {
			padding-top: 60px;
			padding-bottom: 40px;
		}
	}

	@media screen and (max-width: 991px) {
		.p-two-col.img-r .frame,
		.p-two-col.img-l .frame {
			flex-direction: column;	
			width: 90%;
		}
		.p-two-col .content {
			width: 100%;
			padding: 0;
		}
		.p-two-col .image {
			width: 100%;
			margin-bottom: 50px;
		}
		.p-two-col .image img {
			padding: 0;	
		}	
	}

/* section 3 */
	.security-section {
		background-color:#f6f6f6;
	}

	.security-section .content {
		width: 85%;
		margin: 65px auto 0;
		text-align:center;
	}

	.security-section .content h3 {
	    font-weight: bold;
	    padding-bottom: 30px;
	}

	.security-section .box {
		display: flex;
	    flex-wrap: wrap;
	    width: 85%;
	    justify-content: center;
		margin: 0 auto;
		margin-top: 15px;
	    text-align: center;
	}

	.security-section .box .area {
		width: calc(100% / 4);
	}

	.security-section .box .area img {
		width:50%!important;
		margin: 0 auto;
	    text-align: center;
	}

	.security-section .box .area p {
		padding: 0 10px;
	}

	.security-section .box .area p span {
		font-weight: bold;
	}

	.security-section .image {
		background: url(/sites/zyxel/files/library/assets/products/usg-lite-60ax/relaunch/usglite60ax_2_3024x1410.png) no-repeat;
	    background-position: center bottom;
	    background-size: 100% auto;
	    position: relative;
	    aspect-ratio: 1920 / 670; 
	}
		
	@media screen and (max-width: 991px) {
		.security-section .content{
			text-align: left;
		}
		.security-section .box {
			width: 90%;
		}	
		.security-section .box .area {
			width: calc(100% / 2);
		}
		.security-section .box .area p{
			margin-bottom: 10px;
		}
		.security-section .image{
			background-position: 30% bottom;
			background-size: 300%;
			aspect-ratio: 4/3.5;
		}
	}

/* section 4 */
	.feature-list {
	    list-style-type: disc; /* 使用實心圓點作為項目符號 */
	    padding-left: 20px; /* 增加左側內邊距 */
	  }

	.feature-list li {
		margin-bottom: 10px; /* 增加列表項之間的間距 */
		line-height: 1.5; /* 增加行高，改善可讀性 */
	}

/* section 6 */
	.nebula-app .frame {
		display: flex;
	    flex-direction: row-reverse;
	    justify-content: center;
	    align-items: center;
		width: 85%;
		gap: 10%;
	    margin: 0 auto;
	}
		
	.nebula-app .content {
	    width: 50%;
	}
		
	.nebula-app .image {
	    width: 50%;	
	}

	.nebula-app .content h3 {
		padding-bottom: 30px;
	}

	.nebula-app .app_icon {
	    width: 70%;
	    margin-left: -2.5%;
	}

	.nebula-app .app_icon img {
	    cursor: pointer;
	}

	@media screen and (max-width: 1400px) {
		.nebula-app {
			padding-top: 60px;
			/* padding-bottom: 40px; */
		}
	}

	@media screen and (max-width: 991px) {
		.nebula-app .frame {
			flex-direction: column;	
			width: 90%;
		}
		.nebula-app .content {
			width: 100%;
			padding: 0;
		}
		.nebula-app .image {
			width: 100%;
			margin-top: 10px;
		}
	}

	@media screen and (max-width: 501px) {
		.nebula-app .app_icon {
			width: 100%;
		}
	}

/* section 7 */
	.one-platform {
	    background: url('/sites/zyxel/files/library/assets/products/iap500be/IAP500BE_GFX6_3024x1410.png') no-repeat center;
	    height: 900px;
	    background-size: cover;
	    position: relative;
	}

	.one-platform .content {
		position: absolute;
	    left: 7.5%;
	    width: 40%;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}

	.one-platform .content h3 {
		padding-bottom: 30px;
	    font-weight: bold;
	}

	.one-platform .content .btn-call-to-action {
		background-color: #c71a13;
	}

	.one-platform .content .btn-call-to-action:hover {
	    background-color: #006e18;
	}
		
	@media screen and (max-width: 1601px) {
		.one-platform {
			height: 800px;
		}
	}

	@media screen and (max-width: 991px) {
	  .one-platform {
	    background: none;
	    height: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	  }

	  .one-platform::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 16/10;
		background: url(/sites/zyxel/files/library/assets/products/iap500be/IAP500BE_GFX6_3024x1410.png) no-repeat right center;
		background-size: 145% auto;
		background-position: 100% top;
		}

	  .one-platform .content {
	    position: static;
	    width: 100%;
	    padding: 40px 20px;
		background-color: #f9f9f9 !important;
	  }
	}

/* 9 video */
	.video-canvas{/* position:relative; */height: 1000px;overflow: hidden;}
	.video{/* position: absolute; *//* width: 100%; *//* left: 0; *//* right: 0; *//* margin: 0 auto; *//* overflow: hidden; */}
	.video video{width:100%;}
	.video-mobile-section{display:none;}

	@media screen and (max-width: 1601px) {	
	.video-canvas{height:700px;}
	}

	@media screen and (max-width: 1440px) {	
	.video-canvas{height:600px;}
	}
	@media screen and (max-width: 1025px) {	
	.video-canvas{height:500px;}
	}
	@media screen and (max-width: 991px) {	
	#video-one{display:none;}
	#video-two{display:none;}
	.video-mobile-section{display:block;}
	}

/* in depth */
	.section.depth{
		background-color: #f7f7f7;
		margin: 0 auto;
		display: flex;
    	justify-content: center;
	}
	.section.depth>h3{
		position: absolute;
		left: 50%;
		top: 8%;
		width: 85%;
		transform: translateX(-50%);
		z-index: 1;
	}
	.section.depth>h3 span{
		font-weight: normal;
	}
	.in-depth {
		position:relative;
		width: 100%;
	}

	.in-depth .image.desktop {
		background:url('/sites/zyxel/files/library/assets/products/usg-lite-60ax/relaunch/usglite60ax_7_3024x1410.png') no-repeat;
		background-size:100% auto;
		position:relative;
		aspect-ratio: 1920 / 935;
		background-position: bottom;
	}

	.in-depth .description .l-01  {
		position:absolute;
		top: 36%;
		left: 26%;
		border: solid 1px black;
	}

	.in-depth .description .l-02  {
		position:absolute;
		top: 61%;
		left: 39%;
	}

	.in-depth .description .l-03 {
		position:absolute;
		top: 75%;
		left: 26%;
	}

	.in-depth .description .r-01 {
		position:absolute;
		top: 41%;
		left: 76%;
	}
	.in-depth .description .r-02 {
		position:absolute;
		top: 61%;
		left: 71%;
	}
	.in-depth .description .r-03 {
		position:absolute;
		top: 73%;
		left: 76%;
	}
	.in-depth .description .r-04 {
		position:absolute;
		top: 85%;
		left: 76%;
	}

	.in-depth .description .circleBG {
	    height:30px;
	    width:30px;
	    position:absolute;
	    top: 0;
	    left: 0;
	    text-align:center;
	    transform: translate(-50%, -50%);
	    /* margin:-30px 0 0 -30px; */
	    border-radius:100px;
	    z-index:1
	}

	.in-depth .description .circleBG i {
	    font-size:28px;
		padding:1px;
		color:#c71a13;
	}

	.in-depth .description .circleBG .flash {
	    position:absolute;
		width:100px;
	    height:100px;
	    z-index:-1;
	    left:50%;
	    top:50%;
	    opacity:0;
	    margin:-50px 0 0 -50px;
	    border-radius:100px;
	    -webkit-animation:flash 1.8s infinite;
	    animation:flash 1.8s infinite
	}

	@-webkit-keyframes flash {
	    0%{
	        opacity:1;
	        -webkit-transform:scale(0);
	        transform:scale(0)
	    }
	    100%{
	        opacity:0;
	        -webkit-transform:scale(1);
	        transform:scale(1)
	    }
	}

	@keyframes flash {
	    0%{
	        opacity:1;
	        -webkit-transform:scale(0);
	        transform:scale(0)
	    }
	    100%{
	        opacity:0;
	        -webkit-transform:scale(1);
	        transform:scale(1)
	    }
	}

	.fade.in {
	    opacity:0.9;
	}

	.in-depth .description .white {
	    /* background-color: rgba(255, 255, 255, .6); */
	    background-color: #ffffff;
	}

	.in-depth .description .green {
	    background-color:rgba(199,26,19,.6);
	}

	.in-depth .description .look-tooltip .tooltiptext {
	  visibility: hidden;
	  width: auto;
	  height: 28px;
	  line-height: 28px;
	  white-space: nowrap;
	  background-color: #c71a13;
	  color: #fff;
	  text-align: center;
	  position: absolute;
	  top: 1px;
	  /* z-index: 1; */
	  transform: translateY(-50%);
	}
	.in-depth .description .look-tooltip.l-02 .tooltiptext,
	.in-depth .description .look-tooltip.r-01 .tooltiptext,
	.in-depth .description .look-tooltip.r-03 .tooltiptext,
	.in-depth .description .look-tooltip.r-04 .tooltiptext{
		left: 0;
		border-radius: 0 14px 14px 0;
		padding: 0 15px 0 25px;
	}
	.in-depth .description .look-tooltip.l-01 .tooltiptext,
	.in-depth .description .look-tooltip.l-03 .tooltiptext,
	.in-depth .description .look-tooltip.r-02 .tooltiptext{
		right: 0;
		border-radius: 14px 0 0 14px;
		padding: 0 25px 0 15px;
	}


	/* .in-depth .description .sim .tooltiptext  {
		bottom: 30px;
	} */

	.in-depth .description .look-tooltip:hover .tooltiptext {
	  visibility: visible;
	}
	@media screen and (max-width: 1024px) {
		.in-depth {
			width: 80%;
		}
	}
	@media screen and (max-width: 991px) {
		.in-depth>h3{
			width: 90%;
			top: 10%;
		}
		.in-depth .image {
			position:relative;
			background-size: 100% auto;
			background-repeat: no-repeat;
			aspect-ratio: 1000/1700;
		}
		.in-depth .desktop {
			display: none;
		}	
		.in-depth .mobile {
			display: block;
			background-color: #f7f7f7;
			background-image: url('/sites/zyxel/files/library/assets/products/usg-lite-60ax/relaunch/usglite60ax_10_1100x1100.png');
			background-position: center;
		}
		.in-depth .description .l-01,
		.in-depth .description .l-02,
		.in-depth .description .l-03{
			display: none;
		}

		.in-depth .description .r-01 {
			top: 42%;
			left: 55.5%;
		}
		.in-depth .description .r-02 {
			top: 53%;
			left: 40%;
		}
		.in-depth .description .r-03 {
			top: 59.5%;
			left: 55.5%;
		}
		.in-depth .description .r-04 {
			top: 66%;
			left: 55.5%;
		}
		.in-depth .description .look-tooltip .tooltiptext {
			/* position: absolute; */
			/* bottom: auto; */
			top: 15px;
			/* left: 50%; */
			transform: translateX(-50%);
			/* margin-top: 10px; */
			/* padding: 8px 12px; */
			font-size: 14px;
			z-index: 2;
			/* border-radius: 14px; */
		}
		
		.in-depth .description .look-tooltip.r-01 .tooltiptext,
		.in-depth .description .look-tooltip.r-03 .tooltiptext,
		.in-depth .description .look-tooltip.r-04 .tooltiptext{
			border-radius: 14px;
			padding: 0 15px;
		}
		.in-depth .description .look-tooltip.r-02 .tooltiptext{
			left: 0;
			right: auto;
			border-radius: 14px;
			padding: 0 15px;
		}
		
		.in-depth .description .look-tooltip {
			--pos-x: calc(var(--left, 0%) * 1%);
		}

		/* .in-depth .description .surface .tooltiptext,
		.in-depth .description .sim .tooltiptext,
		.in-depth .description .port .tooltiptext {
			left: auto;
			right: 0;		
			transform: translateX(45%);
		}

		.in-depth .description .led .tooltiptext {
			left: auto;
			right: 0;
			transform: translateX(0);
		} */
	}

/* section 11 */
	.design .frame {
		display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
		width: 85%;
		gap: 10%;
	    margin: 0 auto;
	}
		
	.design .content {
	    width: 50%;
	}
		
	.design .image {
	    width: 50%;	
	}

	.design .image img {
		padding: 10%;	
	}

	.design .content h3 {
		padding-bottom: 30px;
	}

	@media screen and (max-width: 1400px) {
		.design {
			padding-top: 60px;
			padding-bottom: 40px;
		}
	}

	@media screen and (max-width: 991px) {
		.design .frame {
			flex-direction: column;	
			width: 90%;
		}
		.design .content {
			width: 100%;
			padding: 0;
		}
		.design .image {
			width: 100%;
		}
		.design .image img {
			padding: 0;	
		}
	}

/* configure */
	.how-to-configure h3 {
		font-weight:bold;
		padding-bottom:40px;
	    text-align: center;
	}

	.nebula_video {
		display: flex;
	    flex-direction: row;
	    width: 100%;
	}

	.video_area ul {
		list-style: none;
	    display: flex;
	    justify-content: space-around;
	}

	.video_area .zoom:hover {
	  -ms-transform: scale(1.0); /* IE 9 */
	  -webkit-transform: scale(1.0); /* Safari 3-8 */
	  transform: scale(1.0); 
	}

	.video_area ul li {
		width:30%;
		box-shadow: 0px 0px 28px 3px rgb(0 0 0 / 15%);
		transform: scale(1.01, 1.01);
	}

	@media screen and (max-width: 769px) {
		.video_area ul {
		    flex-direction: column;
			padding: 20px 20px 0;
		}
		.video_area ul li {
		    width: 100%;
		    margin-bottom: 30px;
		}
	}

/* related links */
	.related-links {
		background-color: #fff;
	}

	.related-links h3 {
		font-weight:bold;
		padding-bottom:40px;
	    text-align: center;
	}

	.links-section {
		display: flex;
	    flex-direction: row;
	    width: 100%;
	}

	.links-area ul {
		list-style: none;
	    display: flex;
	    justify-content: space-around;
	}

	.links-area ul li {
		width:30%;
	}

	.links-area .zoom a {
	  display: block;
	  overflow: hidden;
	}

	.links-area .zoom img {
	  display: block;
	  transition: transform 0.3s ease;
	}

	.links-area .zoom:hover img {
	  transform: scale(1.1);
	}

	.links-area h5 a div {
	    color: #010101;
		margin-top: 30px;
		font-size: 20px;
	}

	.links-area h5 a div:hover {
	    color: #c71a13;
	}

	@media screen and (max-width: 769px) {
		.links-area ul {
		    flex-direction: column;
			padding: 20px 20px 0;
		}
		.links-area ul li {
		    width: 100%;
		    margin-bottom: 30px;
		}
	}


/* note */
div#note {
    margin-top: 10px;
    margin-bottom: 60px;
}

/* photos */
.popup-gallery .text {
	padding-left: 10px;
}

/* spec */
/* .spec-note ol {
	list-style: none;
} */
.license-service-section{width: 90%;text-align:center;margin:0 auto; padding-bottom:30px;}
.license-service-section h3{padding-bottom:30px; font-weight: bold;}
.license-content {table-layout: fixed; width: 90%; white-space: nowrap; margin:0 auto; border-collapse: initial;}
.carte-license-content {table-layout: fixed; width: 90%; white-space: nowrap; margin:0 auto; border-collapse: initial;}
.row-license {width: 25%;}
.license-content th, .carte-license-content th{font-weight:normal; font-size:18px; padding: 20px 10px;white-space:normal; }
.license-content td, .carte-license-content td {height: 80px;white-space: normal;overflow: hidden;padding: 10px;}
.license-content td, .license-content th, .carte-license-content td, .carte-license-content th {text-align: center; color: #000; border-bottom:1px solid #000;}
.license-content td:first-child, .license-content th:first-child, .carte-license-content td:first-child, .carte-license-content th:first-child{text-align:left;}
.license-content td:nth-child(2), .license-content th:nth-child(2), .carte-license-content td:nth-child(2), .carte-license-content th:nth-child(2){text-align:center;}
.license-content a, .carte-license-content a{color:#000;}
.license-service-section .btn-call-to-action {
    background-color: #ff8900;
}
.table-responsive .note{
	font-size: 14px;
    padding-top: 20px;
    width: 95%;
    padding-left: 5%;
}