@charset "utf-8";
#imart-container .row-maxwidth-95pct{
	width: 100%!important;
	max-width: 1200px!important;
	margin: 0 auto!important;
}



/* CSS Document */
.Site_ACK-5000 *{
	box-sizing: border-box;
	font-family:Arial, sans-serif;
	
}
.Site_ACK-5000{
width: 100%;	
max-width: 1200px;
margin: 0 auto;
}


	   .Site_ACK-5000  h1,
	   .Site_ACK-5000   h2,
      .Site_ACK-5000  h3,
      .Site_ACK-5000  h4,
      .Site_ACK-5000  h5,
      .Site_ACK-5000  h6 {
            display: block !important;
            position: static !important;
            width: unset !important;
            max-width: unset !important;
            min-width: unset !important;
            height: unset !important;
            max-height: unset !important;
            min-height: unset !important;
            font-size: 100% !important;
            font-weight: bold !important;
            line-height: 1 !important;
            color: #222 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            text-shadow: none !important;
            box-shadow: none !important;
            background: none !important;
        }

.Site_ACK-5000 ul,
.Site_ACK-5000 ol {
    margin: 0 !important;
    padding: 0 0 0 20px !important;
}

.Site_ACK-5000 li {
    margin: 0 !important;
    padding: 0 !important;
}

.Site_ACK-5000 ul li {
    list-style-type: disc !important;
}

.Site_ACK-5000 ol li {
    list-style-type: decimal !important;
}
img{
	max-width: 100%;
	height: auto;
}

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



/* =================================== */
/* =================================== */
/* kv  */
/* =================================== */
/* =================================== */

.Site_ACK-5000 .ACK-5000-kv{
	background: #0a243b url("../images/ACK-5000_kv-bg.jpg") top center no-repeat;
	background-size:cover;
	padding: 70px 0 30px 100px;
	min-height: 530px;
	  position: relative;
    /* 確保所有內容顯示 */
    overflow: hidden;
	  max-width: 1200px; 


	}
.Site_ACK-5000 .ACK-5000-kv .content{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.Site_ACK-5000 .ACK-5000-kv .sub{
	color: #23262d;
	font-size: 52px;
	font-weight: 900;
/*	letter-spacing:0.1px;*/
	padding: 10px 0;
}
.Site_ACK-5000 .ACK-5000-kv .icons{
	display: flex;
	justify-content:space-between;
	align-items: flex-start;
/*	width:45%;*/
	max-width:450px;
}
.Site_ACK-5000 .ACK-5000-kv .kv-pic{
	width:50%;
	max-width: 527px;
	height: auto;
	text-align: center;
	padding-right: 40px;

    
}
.Site_ACK-5000 .ACK-5000-kv .icons .box{
	text-align: center;
}
.Site_ACK-5000 .ACK-5000-kv .icons .box P{
	color: #ffffff;
	font-size: 14px;
	line-height: 1.3!important;
}
.Site_ACK-5000 .ACK-5000-kv .btn a{
	border: solid 1px #ffffff;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
/*	border-radius:50px;*/
	width: 180px;
	background-color: #f39a00;
	text-align: center;
	padding: 15px 20px;
	margin: 30px 0 20px;
	transition: 0.3s ease;
}
.Site_ACK-5000 .ACK-5000-kv .btn a:hover{
	text-decoration: none;
	color: #f39a00;
	background-color: #ffffff;
}
@media screen and (max-width: 1200px){
	.Site_ACK-5000 .ACK-5000-kv{
	background: #031d34 url("../images/ACK-5000_kv-bg02.jpg") top right no-repeat;
	background-size:100% auto;
    min-height: 580px;
	object-fit: cover;
	padding:50px 50px;	
	
	
	}
	.Site_ACK-5000 .ACK-5000-kv .kv-pic{
		display: none;
	}
}
@media screen and (max-width: 1199px){
/*
	.Site_ACK-5000 .ACK-5000-kv{
		padding: 70px 0 30px 30px;
		background-position: right center;
		background-size:cover;
	}
*/
	.Site_ACK-5000 .ACK-5000-kv .t1{

	}
/*
	.Site_ACK-5000 .ACK-5000-kv .kv-pic{
		padding-right: 0;
	    position: relative;
		right: 0;
	}
	.Site_ACK-5000 .ACK-5000-kv .kv-pic img{	
        position: absolute;
		right:10%; 	
		top:20px;
	}
*/
}
@media screen and (max-width: 991px){

	.Site_ACK-5000 .ACK-5000-kv{
		padding: 40px 50px;
	}
		.Site_ACK-5000 .ACK-5000-kv .icons{
		flex-wrap: wrap;
			max-width: 50%;
	}
	.Site_ACK-5000 .ACK-5000-kv .icons .box{
		width: 50%;
		padding: 10px 20px;
	}
}
@media screen and (max-width: 767px){

}

@media screen and (max-width: 680px) {
    	.Site_ACK-5000 .ACK-5000-kv{
		padding: 20px 20px;
		background: #031d34 url("../images/ACK-5000_kv-bg03.jpg") top right no-repeat;
			min-height: 680px;
			background-size:contain;
	}
	.Site_ACK-5000 .ACK-5000-kv .content{
		display: block;
	
	}
	.Site_ACK-5000 .ACK-5000-kv .sub{
		font-size: 9vw;
		color: #ffffff;
	}
	.Site_ACK-5000 .ACK-5000-kv .icons{
		width: 100%;
	    max-width: 100%;
		padding: 90px 0 0;
	}
	.Site_ACK-5000 .ACK-5000-kv .icons .box{
		width: 50%;
		padding: 10px 20px;
	}
	.Site_ACK-5000 .ACK-5000-kv .btn{
		text-align: center;
	}
	
}

/* =================================== */
/* =================================== */
/* Series  */
/* =================================== */
/* =================================== */

.Site_ACK-5000 .Series .content{
	background-color: #0a243b;
	padding: 0px 25px 30px;
	text-align: center;
}

.Site_ACK-5000 .Series .sub{
	color: #ffffff;
	font-size: 24px;
	padding: 10px 10px;
}

.Site_ACK-5000 .Series  .sub-title{
		color: #ffffff;
	font-size: 36px;
	font-weight: bold;
	padding: 0px 10px 10px;
}

.Site_ACK-5000 .Series .title{
   padding: 30px 10px 0;
}
.Site_ACK-5000 .Series .pic{
		background-image: url("../images/ACK-5000_Validation-bg.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size:80% auto;

}
.Site_ACK-5000 .Series .pic-box{
/*	background: #09233a url("../images/ACK-5000_Validation-bg.png") center center no-repeat;*/

	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 50px;
}
 
.Site_ACK-5000 .Series .pic-box .pic-left{
/*	margin-right: -60px;*/
/*	margin-left:100px;*/
	margin-top: -40px;
}

.Site_ACK-5000 .Series .advantage-box{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding:10px 10px;
}

.Site_ACK-5000 .Series .advantage-box .box{
	width: 50%;
	margin: 10px 10px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20px 20px 10px;
	 background: linear-gradient(to bottom, #00204b 50%, #00a3a6 100%);
}
.Site_ACK-5000 .Series .advantage-box .box .left{
	width: 50%;
	
}
.Site_ACK-5000 .Series .advantage-box .box .title{
	font-size: 32px;
	font-weight: 100;
	color: #ffffff;
	text-align: left;
	padding: 10px 10px;
	line-height: 1.1;
}

.Site_ACK-5000 .Series .advantage-box .box .line{
	width: 50px;
	background-color:  #4399f0;
	height: 5px;
	margin:20px 10px  10px;
}
.Site_ACK-5000 .Series .advantage-box .box .right{
	width: 50%;	box-sizing: border-box;
	padding: 0 5px;
}
.Site_ACK-5000 .Series .advantage-box .box .sub-txt{
	font-weight: bold;
	text-align: left;
	font-size: 22px;
	color: #ffffff;
	line-height: 1.3;
	padding: 10px 10px 0;
}

.Site_ACK-5000 .Series .advantage-box .box .small-txt{
	text-align: left;
	font-size: 16px;
	color: #ffffff;
	line-height: 1.3;
	padding: 0px 10px;
}

.Site_ACK-5000 .Series .advantage-box .box .right-box{
	display: flex;
	align-items: center;
	padding: 10px 10px;
	width: 100%;
	background-color: #000000;
	margin: 10px 0;
}

.Site_ACK-5000 .Series .advantage-box .box .txt{
	width: 50%;
	text-align: left;
	color: #00fbe6;
	font-size: 14px;
}
@media screen and (max-width: 1200px){
.Site_ACK-5000 .Series .content{
	background-color: #031d34;
}
}

@media screen and (max-width:991px){
	.Site_ACK-5000 .Series .advantage-box .box{
		align-items: center;
	}
	.Site_ACK-5000 .Series .advantage-box{
		padding: 10px 0;
	}
	.Site_ACK-5000 .Series .advantage-box .box{
		padding: 20px 10px 10px;
	}
	.Site_ACK-5000 .Series .pic-box{
		background-position: center center;
		width: 100%;
		max-width: 630px!important;
		left: 50px;
		padding-left: 50px;
	}
	.Site_ACK-5000 .Series .pic-box .pic-left{
/*			margin-left:60px;*/
	}
}
@media (max-width: 768px) {
	.Site_ACK-5000 .Series .pic-box .pic-left{
		margin-left: 0;
	}
  .Site_ACK-5000 .Series .pic-box {
        width: 100%;
		max-width: 100%;
        height: auto;
        display: flex;
		justify-content: center;
        align-items: flex-end;
		padding-left: 0!important;
    }

  .Site_ACK-5000 .Series .pic-box    .pic-left,
   .Site_ACK-5000 .Series .pic-box   .pic-right {
        position: static!important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        scale: 1 !important;
        margin-bottom: 20px;
	   max-width:48%!important;    }

   .Site_ACK-5000 .Series .pic-box   .pic-left img,
   .Site_ACK-5000 .Series .pic-box   .pic-right img {
        max-width: 90%;
        height: auto;
    }

}
@media screen and (max-width:580px){
	.Site_ACK-5000 .Series .pic-box{
		height: 180px!important;
		padding-top: 50px!important;
		position: static!important;
	}
	  .Site_ACK-5000 .Series .pic-box    .pic-left,
	.Site_ACK-5000 .Series .pic-box   .pic-right {
		width: 50%!important;
		max-width: unset!important;
	}
	.Site_ACK-5000 .Series .pic-box    .pic-left img{
		max-width: 100%!important;
        height: auto;
		padding-left: 20px;
	}
	.Site_ACK-5000 .Series .pic-box    .pic-right img{
		max-width:80%!important;
        height: auto;
	}
	.Site_ACK-5000 .Series .advantage-box{
		display: block;
	}
	.Site_ACK-5000 .Series .advantage-box .box{		
		display: block;
		width: 100%;
		margin: 10px 0;
	}
	.Site_ACK-5000 .Series .advantage-box .box .left,
	.Site_ACK-5000 .Series .advantage-box .box .right{
		width: 100%;
	}
	.Site_ACK-5000 .Series .advantage-box .box .right-box{
		padding: 10px 10px;
		justify-content:space-around;
	
	}
	.Site_ACK-5000 .Series .advantage-box .box .right{
			margin:20px 0 0;
	}
}

/* =================================== */
/* =================================== */
/* Series 動畫 */
/* =================================== */
/* =================================== */
/* 假設機殼的初始位置是 left: 0，寬度是 364px */
/* 假設容器寬度是 800px */
/* 置中位置計算: (800px - 364px) / 2 = 133px */
:root {
    --shell-center-left: 133px;
    --shell-initial-left: 0px;
}

.Site_ACK-5000 .Series .pic-box {
    position: relative;
	max-width: 630px;
    width:100%; 
    height: 300px;
    margin:0px auto;
    perspective: 1000px; 
left: -20px;
}

.Site_ACK-5000 .Series .pic-box .pic-left,.Site_ACK-5000 .Series .pic-box .pic-right {
    position: absolute;
    transform-style: preserve-3d; 
	max-width: 228px;
    width:100%; 
}

.Site_ACK-5000 .Series .pic-box .pic-left {
    top: 50px;
    left: var(--shell-initial-left); /* 初始位置 */
    z-index: 1;
    /* 確保機殼在動畫時不會被機板遮擋 */
    transform-origin: center center;
	max-width: 364px;
    width:100%; 
}

.pic-right {
    top: 60px;
    right: 50px; 
    z-index: 2;
    transform-origin: center center; 
}

/* ================================================= */
/* 1. 機殼置中動畫 */
/* ================================================= */
@keyframes center-shell {
    from {
        left: var(--shell-initial-left);
    }
    to {
        left: var(--shell-center-left); /* 移動到置中位置 */
    }
}


/* 3. 機板裝入動畫 (需要重新計算 translate X，因為機殼位置變了) */
/* 機殼向右移動了 186px，所以機板的相對移動距離需要減少 186px */

@keyframes insert-board {
    /* 0%：初始位置 (不動) */
    0% {
        transform: translate(0, 0) scale(1) rotateX(0deg); 
        opacity: 1;
    }

    /* 10%：抬升階段 (Y 軸不動，X 軸開始移動) */
    10% {
        transform: translate(0, -50px) scale(1) rotateX(0deg); 
        opacity: 1;
    }
    
    /* 50%：向左移動，開始傾斜 */
    50% {
        /* X 軸移動距離減少約 186px: (-200px) - (-186px) = -14px (需要重新微調) */
        /* 我們只需關注相對位移，假設機板需要移動的總距離是 D，現在機殼靠近了，D 就變小了 */
        transform: translate(-150px, -50px) scale(1); 
        opacity: 1;
    }

    /* 90%：完全躺平並開始「裝入」/「消失」的瞬間 */
    90% {
        transform: translate(-220px, -30px) scale(0.2); 
        opacity: 0.5; 
        animation-timing-function: cubic-bezier(0.1, 0.9, 0.5, 1); 
    }

    /* 100%：在機殼中間高度完全消失 */
    100% {
        transform: translate(-230px, -30px) scale(0.01); 
        opacity: 0; 
    }
}

/* 啟動動畫的 class */
.pic-left.is-centering {
    animation: center-shell 1s ease-in-out forwards; /* 機殼置中動畫 1 秒 */
}

/*
.pic-left.is-resetting {
    animation: reset-shell 1s ease-in-out forwards;  機殼恢復動畫 1 秒 
}
*/

.pic-right.is-animating {
    animation: insert-board 3s forwards ease-in-out; /* 機板裝機動畫 3 秒 */
}


/* =================================== */
/* =================================== */
/* Connect-product */
/* =================================== */
/* =================================== */
.Site_ACK-5000 .Connect-product .content{
	padding: 0 20px 50px;
	background-color: #09233a;
}
.Site_ACK-5000 .Connect-product .t1{
	font-size: 36px;
	color: #ffffff;
	padding: 0 20px 50px;
	text-align: center;
}

.Site_ACK-5000 .Connect-product .cards{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.Site_ACK-5000 .Connect-product .cards .card{
	background: #ffffff;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	margin: 10px 5px;
}
.Site_ACK-5000 .Connect-product .cards .card .img{
	position: relative;
}
.Site_ACK-5000 .Connect-product .cards .card .img .title {
	position: absolute;
	top:20px;
	left: 50%;
	transform: translateX(-50%);
	color: #004280;
	font-size:24px;
	font-weight: bold;
	text-align: center;
	 white-space:nowrap;
}
.Site_ACK-5000 .Connect-product .cards .card .txt{
	padding: 20px 15px;
	text-align: left;
}

.Site_ACK-5000 .Connect-product .cards .card .txt .title{
	color: #23262d;
	font-size: 24px;
	font-weight: bold;
	padding: 0 0 10px;
}

.Site_ACK-5000 .Connect-product .cards .card .txt ul{
	color: #23262d;
	font-size: 16px;
}

.Site_ACK-5000 .Connect-product .cards .card .btn{
	border: solid 1px #f39a00;
	margin-top: auto;
	display: flex;
	align-items: center;
	height: 50px;
	text-decoration: none;
}

.Site_ACK-5000 .Connect-product .cards .card .btn .btn-a{
	color: #f39a00;
	font-size: 30px;
	width: 50%;
	text-align: center;
    text-decoration:line-through;
    height: 50px;
	padding: 10px 10px;
 pointer-events: none;
	border: solid 1px #f39a00;
}

.Site_ACK-5000 .Connect-product .cards .card .btn .btn-b{
	background:  #f39a00;
	color:#ffffff;
	font-size: 18px;
	width: 50%;
	text-align: center;
/*	box-sizing: border-box;*/
		padding: 15px 10px;
	height: 50px;
	border: solid 1px #f39a00;
	
}
.Site_ACK-5000 .Connect-product .cards .card:nth-child(3) .btn .btn-b{
	width: 100%;
}
.Site_ACK-5000 .Connect-product .cards .card .btn a:hover{
	text-decoration: none;
}
.Site_ACK-5000 .Connect-product .cards .card .btn .btn-b:hover{
	color:  #f39a00;
	background:#ffffff;
}
@media screen and (max-width:1200px){
	.Site_ACK-5000 .Connect-product .cards .card{
		width: 33%;
		margin: 10px 10px;
	}
	.Site_ACK-5000 .Connect-product .content{

	background-color:#031d34
}
}
@media screen and (max-width:1024px){
	.Site_ACK-5000 .Connect-product .cards .card .img .title{
		font-size: 2vw;
	}
}
@media screen and (max-width:991px){
	.Site_ACK-5000 .Connect-product .cards .card .btn,
	.Site_ACK-5000 .Connect-product .cards .card .btn .btn-a,
	.Site_ACK-5000 .Connect-product .cards .card .btn .btn-b{
		height: 56px;
	
	}
	
	.Site_ACK-5000 .Connect-product .cards .card .btn .btn-a,
	.Site_ACK-5000 .Connect-product .cards .card .btn .btn-b{
		height: 56px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 5px 10px;
	}
}
@media screen and (max-width:580px){
	.Site_ACK-5000 .Connect-product .cards{
		display: block;
	}
	.Site_ACK-5000 .Connect-product .cards .card{
		width: 100%;
		margin: 10px 0;
	}
   .Site_ACK-5000 .Connect-product .cards .card .img .title{
		font-size:24px;
	}
}

/* =================================== */
/* =================================== */
/*Advantages */
/* =================================== */
/* =================================== */


.Site_ACK-5000 .Advantages .content{
	padding: 50px 20px;
}

.Site_ACK-5000 .Advantages .content .t1{
	font-size: 36px;
	font-weight: bold;
	color: #040000;
	text-align: center;
	padding: 0 20px 20px;
}

.Site_ACK-5000 .Advantages .content .box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 50px 0;
	border-bottom:solid 1px #e6e6e6;
}

.Site_ACK-5000 .Advantages .content .box .txt .title{
	color: #4399f0;
	font-size: 26px;
	padding: 0 0 10px;
}
.Site_ACK-5000 .Advantages .content .box  .txt {
	padding: 10px 20px;
	max-width: 480px;
	direction: ltr;
} 

.Site_ACK-5000 .Advantages .content .box  .txt p{
	color: #040000;
	font-size: 16px;
}
.Site_ACK-5000 .Advantages .content .box .btn{
padding: 30px 0;
}
.Site_ACK-5000 .Advantages .content .box .btn a{
	background: #f39a00;
		width: 185px;
	color: #ffffff;
	font-size: 18px;
	padding:15px 10px;
	text-align: center;
	border: solid 1px #f39a00;
	transition: 0.3s ease;
}
.Site_ACK-5000 .Advantages .content .box .btn a:hover{
	    text-decoration: none;
    color: #f39a00;
    background-color: #ffffff;
}
.Site_ACK-5000 .Advantages .content .box:nth-child(2){
	direction: rtl;
}
.Site_ACK-5000 .Advantages .content .box:nth-child(3) .btn a{
	width:240px;
}
.Site_ACK-5000 .Advantages .content .box:nth-child(3){
	border-bottom: none;
	
}
@media screen and (max-width:991px){
	.Site_ACK-5000 .Advantages .content .box .txt{
		max-width: 50%;
	}
}
@media screen and (max-width:580px){
	.Site_ACK-5000 .Advantages .content .box{
		display: block;
	}
	.Site_ACK-5000 .Advantages .content .box .txt{
		max-width: 100%;
	}
}
/* =================================== */
/* =================================== */
/*challenges*/
/* =================================== */
/* =================================== */

.Site_ACK-5000 .challenges  .content{
	padding: 50px 20px;
	max-width: 1040px;
	margin: 0 auto;
	
}

.Site_ACK-5000 .challenges  .content .title{
	font-size: 36px;  
    color: #040000;
    text-align: center;
    padding: 0 20px 40px;
}

.Site_ACK-5000 .challenges  .content .boxs{
	display: flex;
	align-items: center;
	padding: 20px 30px;
	background: #f9f9f9;
}

.Site_ACK-5000 .challenges  .content .boxs .txt{
	padding: 10px 30px;
}

.Site_ACK-5000 .challenges  .content .boxs .txt .t1{
	font-size: 18px;
	color: #59595a;
}

.Site_ACK-5000 .challenges  .content .boxs .txt .t1 span{
	font-size: 24px;
	color: #073f85;
	font-weight: bold;
}
.Site_ACK-5000 .challenges  .content .boxs .txt .t2{
	display: flex;
	align-items: center;
	padding: 20px 0 10px;
}


.Site_ACK-5000 .challenges  .content .boxs .txt  .t2 .p{
	font-size: 18px;
	color: #3c4491;
	padding: 0 10px;
	font-weight: bold;
}
.Site_ACK-5000 .challenges  .content .boxs .txt p{
	font-size: 16px;
	color: #59595a;
	padding: 0 0 20px;
}

.Site_ACK-5000 .challenges  .content .boxs .txt .Contact{
	font-size: 16px;
	color: #59595a;
}

.Site_ACK-5000 .challenges  .content .boxs .txt .Contact span{
	font-size: 16px;
	    color: #073f85;
    font-weight: bold;
}

@media screen and (max-width:580px){
	.Site_ACK-5000 .challenges .content .boxs{
		display: block;
		padding: 20px 20px;
	}
	.Site_ACK-5000 .challenges .content .boxs .img{
		text-align: center;
		width: 100%;
	}
	.Site_ACK-5000 .challenges .content .boxs .txt{
		padding: 10px 0;
	}
	.Site_ACK-5000 .challenges .content .boxs .txt .t2 .img{
		width: 40px;
	}
	.Site_ACK-5000 .challenges .content .boxs .txt .Contact{
		line-height: 1.5;
	}
}