@charset "UTF-8";

*
{
	box-sizing:border-box;
	font-family:"Noto Sans TC","Noto Sans SC","微軟正黑體","Microsoft JhengHei","黑體-繁","蘋果儷中黑","sans-serif"
}

html
{
	height:100%
}

body
{
	margin:0;
	min-height:100%;
	overflow:auto;
	font-size:16px;
	position:relative
}

body,div,span,a,ul,li
{
	margin:0;
	padding:0
}

img
{
	height:auto;
	width:auto;
	max-height:100%;
	max-width:100%
}

h1
{
	color:#36c
}

.header
{
	height:64px;
	position:sticky;
	top:0;
	margin-bottom:20px;
	background-color:#fff;
	border-bottom:1px solid #aaa;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	z-index:1
}

.header,.main
{
	padding:0 20px
}

.header div
{
	width:100%;
	height:100%;
	background-color:rgba(51,102,204,1)
}

.header .logo
{
	width:100px;
	display:flex;
	justify-content:center;
	background-color:#FFF
}

.header .menu
{
	width:80%;
	display:flex;
	align-items:center;
	justify-content:space-between
}

.header .icon
{
	height:80%;
	width:80px;
	display:none;
	border-radius:8px
}

.icon .icon-menu
{
	padding:10px 0
}

.header img,.header a,.SalesChannelBox .channel-href a
{
	height:100%
}

.header a,.SalesChannelBox .link{
	height:100%;
	width: 100%;
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	justify-content:center
}

.link{
	color:rgb(40, 80, 160);
	text-decoration:none
}

.header .link,.layout-grid-container .link,.bottom .link , .SalesChannelBox .link
{
	color:#fff
}
.item-SalesChannel .link{
	color:#000
}

.menu .menu-box
{
	width:100%
}

.menu .menu-item
{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative
}

.menu-item .submenu
{
	position:absolute;
	height:100%;
	top:100%;
	display:none
}

.menu-item:hover .submenu
{
	display:block
}

.submenu-item
{
	border-top:1px solid #fff
}

.submenu-item:hover,.SalesChannelBox .channel-href:hover{
	background-color:#0af
}

.article .sub-title
{
	color:#007ec3;
	font-size:24px
}

.main .item-sub-title
{
	color:#007ec3;
	font-size:32px;
	width:100%
}

.bottom
{
	background-color:#002850;
	color:#eee;
	position:absolute;
	bottom:0;
	width:100%
}

.container
{
	position:relative;
	margin:0 auto;
	padding:0 50px;
	height:100%
}

.inner-container
{
	position:relative;
	height:100%;
	width:100%
}

.scrollUp
{
	display:none;
	width:50px;
	height:50px;
	position:fixed;
	right:20px;
	bottom:80px;
	text-align:center;
	line-height:50px;
	border-radius:1000px;
	background-color:#22689e;
	color:#fff;
	cursor:pointer;
	animation:fadeInFromNone .5s ease-in-out;
	z-index:1
}

#scrollUp:hover
{
	background-color:#F93
}

@keyframes fadeInFromNone {
	0%
	{
		opacity:0
	}
	
	1%
	{
		opacity:0
	}
	
	100%
	{
		opacity:.9
	}
}

.main
{
	padding-bottom:350px
}

.main p
{
	color:#777
}

.main h1
{
	font-size:48px;
	margin:0
}

.inline-block
{
	display:inline-block;
	vertical-align:top
}

.sub-title-box
{
	position:relative
}

.bgcolor1 .contentBox1,.bgcolor1 .contentBox2
{
	background-color:#e6edf7
}
.bgcolor1 .item .item-top {
	color: #007ec3;
}

.contentBox1 .item-sub-title,.contentBox1 .item-1,.contentBox1 .item-2,.contentBox1 .item-3
{
	padding:4px;
	padding-top:0px;
}

.contentBox1
{
	display:flex;
	flex-direction:column;
	margin-bottom:20px;
	border-radius:10px;
	padding:8px
}

.contentBox1 .item
{
	display:flex;
	flex-direction:row;
	justify-content:space-between
}

.contentBox1 .item ol li
{
	margin-bottom:10px
}

.contentBox1 .item-1
{
	width:70%
}

.contentBox1 .item-2
{
	width:30%
}

.contentBox1 .item-3
{
	min-height:80px;
	width:50%;
	padding:0 10px;
	margin:4px;
	border:1px solid #136ac7;
	border-radius:10px
}

.contentBox1 .item-ProductDescription
{
	min-height:80px;
	width:50%;
	padding:15px;
	margin:8px;
	border:1px solid #136ac7;
	border-radius:10px;  
	background-color:#FFF;
	text-align:center;
}

.contentBox1 .item-SalesChannel
{
	min-height:80px;
	width:100%;
	padding:16px;
	margin:8px;
	margin-right:8px;
	border:1px solid #136ac7;
	border-radius:10px;  
	background-color:#FFF;
	text-align:center;
}

.contentBox1 .item-SalesChannel-top
{
	height:80px;
	width:auto;
	border-radius:10px;  
	background-color: #007ec3;
	text-align:center;
	color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-SalesChannel .link:hover{
	color: #007ec3;
}
.item-SalesChannel .item-SalesChannel-top, .item-SalesChannel .item-text{
	margin-bottom: 20px;
}




.contentBox2
{
	display:flex;
	flex-direction:row;
	align-items:center;
	flex-wrap:wrap;
	justify-content:center;
	/* margin:10px 0; */
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 8px;
}

.contentBox2 .item
{
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content:space-around;
	align-items:flex-start;
	flex-wrap:wrap
}

.contentBox2 .item-1
{
	width:50%;
	margin:10px 0;
	display:flex;
	flex-direction:column;
	align-items:center
}

.contentBox2 .item-2
{
    max-width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin: 5px;
}

.contentBox2 .item-1-icon,.contentBox2 .item-1-content
{
	width:50%
}

.contentBox2 .item-1-icon
{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:flex-end;
	border-bottom:1px solid #000
}

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

.contentBox3 .item
{
	width:100%;
	display:flex
}

.contentBox3 .item-1
{
	width:100%;
	border:1px solid rgba(255,255,255,0.5);
	padding:15px;
	margin:10px;
	min-height:160px;
	border-radius:10px
}

.item .content_flex_start
{
	justify-content:flex-start
}
.item .item-img{
	display:flex;
    flex-direction: row;
    justify-content: center;
	background-color: rgb(255, 255, 255);
}

.content_flex_start .item-2
{
	/* max-height: 560px; */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    /* border-radius: 10px; */
	background-color: rgb(255, 255, 255);
}

.item .item-top
{    font-size: 24px;
	margin-bottom:8px;
}

.item .item-icon
{
	height:30px
}
.contentBox2 .item .item-icon {
    height: 80px;
}
.bottom .item .item-icon {
    /* height: 100%; */
    display: flex;
    align-items: center;
    /* justify-content: center; */
    /* padding: 10px 10px; */
    /* flex: 1; */
    /* flex-shrink: 0; */
    /* position: relative; */
    /* color: #fff; */
    /* text-decoration: none; */
}

.item .item-title
{
	font-size:24px;
	margin-bottom:10px
}

.item-img img
{
	max-height:560px
}


.item ul>li
{
	margin-left:32px
}

.layout-grid-container
{
	color:#fff;
	width:100%;
	height:440px;
    position: relative;
    /* z-index: -1; */
	display:flex;
	flex-direction:row	
}

.layout-grid-container .box
{
	height:100%;
	width:30%;
	padding:80px;
	padding-bottom:0;
	background-color:rgb(40, 80, 160);
	display:flex;
	flex-direction:column;
	align-content:flex-start;
	justify-content:flex-start
}

.layout-grid-container .box_bg
{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	width:70%;
	padding:0;
	background-color:#007ec3;
	display:flex;
	justify-content:center;
	align-content:center
}

/* Reduce vertical spacing only inside the light-blue area without affecting right column */
.layout-grid-container .box_bg .item-4-img{
	position: relative;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	padding-top:0; 
	padding-bottom:0;
} 

/* Ensure item-4 inner containers fill full height and center content so images can grow */
.item-4-main .item-4-img,
.item-4-mobile .item-4-img {
	height: 100%;
	padding: 0; 
	justify-content: center;
	align-items: center;
} 

/* Allow images in item-4 to use full container height */
.item-4-main .item-4-img img,
.item-4-mobile .item-4-img img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display:flex;
	margin:0 auto;
} 

/* Allow images to exceed their containers: make parents overflow visible and scale images */
.layout-grid-container .box_bg,
.item-4-main,
.item-4-mobile {
    overflow: visible;
    position: relative;
}



.table
{
	width:100%;
	color:#212529;
	border-color:#dee2e6;
	text-align:center;
	line-height:32px
}

.table thead,.table tbody
{
	background-color:#FFF
}

.copyright
{
	margin:15px
}

.flex_center
{
	display:flex;
	flex-direction:column
}

.flex_center div
{
	margin:auto
}
.layout-grid-container .box_bg .item-1{
	position: relative;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.layout-grid-container .box_bg .item-1 img{
	/* z-index: 1; */
}

/* 當 item = 4 時的特殊樣式 */
/* item-4-container 是 70% 寬度的淡藍色區域，內部分成兩個 50% 的子元素 */
.item-4-container {
	display: flex ; 
	flex-direction: row; 
	width: 70%;
	height: 100%;
	padding: 0 
}

.item-4-main,.item-4-mobile {
	padding: 15px;
	width: 50%;
	height: 100%;
	display: flex; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: center;
	align-content: center;
	overflow: hidden;
}


.circle-shape {
    width: 100%;
    padding: 40%;
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgb(0 170 255);
    border: 1px solid #e0e0e1;
    -webkit-animation: rounded 30s linear infinite;
    animation: rounded 10s linear infinite;
}
.circle-shape:after, .circle-shape:before {
    content: '';
    padding: 2%;
    position: absolute;
    border-radius: 50%;
    -webkit-animation: zoomInOutTwo 4s infinite;
    animation: zoomInOutTwo 4s infinite;
}
.circle-shape:before {
    right: 15%;
    top: 11%;
    background: #e1754c;
}
.circle-shape:after {
    bottom: 4%;
    right: 25%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    background: #FF7A41;
}


.SalesChannelBox{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    top: 64px;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	z-index: 10;
}
.SalesChannelBox .item{
    width: 800px;
	max-width: 90%;
    background-color: #FFF;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.SalesChannelBox .item-1{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.SalesChannelBox .item-1-content,.SalesChannelBox .item-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px 0px;
	padding: 0px 8px;
}
.SalesChannelBox .channel-href{
	background-color: #136ac7;
    border-radius: 4px;
    height: 40px;
    width: 104px;
}
.SalesChannelBox .popup-close{
    background-color: rgba(51, 102, 204, 1);
    border-radius: 0px 0px 10px 10px;
	fill: #FFF;
	margin: 0px;
    width: 100%;
}

.none{
	display: none;
}

.custombox-lock {
    overflow: hidden;
}

@media screen and (max-width: 992px) {
	.main
	{
		padding-bottom:700px
	}
	
	.header .icon
	{
		display:block
	}
	
	.header .menu,.contentBox2 .box_bg, .item-4-container, .item-4-main, .item-4-mobile
	{
		display:none
	}
	
	.header .menu .menu-box
	{
		width:60%
	}
	
	.menu-item:hover
	{
		background-color:#0af
	}
	
	.header .mobile_menu
	{
		height:calc(100% - 64px);
		width:100%;
		position:fixed;
		top:64px;
		right:0;
		bottom:0;
		display:flex;
		flex-direction:column;
		background-color:rgba(0,0,0,0.8);
        animation: fadeInFromNone .2s ease-in-out;
	}
	
	.mobile_menu .menu-item
	{
		border-bottom:1px solid #fff
	}
	
	.item
	{
		flex-wrap:wrap
	}
	
	.contentBox1 .item-1,.contentBox1 .item-2,.contentBox1 .item-3,.contentBox2 .item-2
	{
		width:100%
	}
	
	.contentBox2 .item-1,.contentBox2 .item-2
	{
		width:100%;
		max-width:none
	}
	
	.contentBox2 .item2
	{
		justify-content:center
	}
	
	.contentBox2 .item-1-icon,.contentBox2 .item-1-content,.layout-grid-container .box
	{
		width:100%
	}
	.contentBox2 .item .content_flex_start{
		flex-direction: column;
		align-content: center;
	}
	
	.scrollUp
	{
		display:block
	}
}

@media screen and (max-width: 768px) {
	.main
	{
		padding-bottom:840px
	}
	
	.box
	{
		width:100%
	}
	
	.box_bg
	{
		display:none
	}
	
	.flex_column
	{
		margin:0;
		margin-bottom:20px;
		width:100%
	}
	
	.inline-block
	{
		display:block
	}
}

@keyframes rounded {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes zoomInOutTwo {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.25);
        transform: scale(0.25);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}