@charset "utf-8";
#imart-single-page .row-maxwidth-95pct{
	max-width: initial;
	width: 100%;}
#EIOT {
	overflow: hidden;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 400;
	color: #646464;
	font-family: "Noto Sans TC","Noto Sans JP","Noto Sans KR", "Noto Sans", Arial, "Microsoft JhengHei", PMingLiU, sans-serif;}
#EIOT span, #EIOT b, #EIOT a, #EIOT abbr[title], #EIOT dfn[title], #EIOT mark{
  display: inline-block;
  *display: inline;
  *zoom: 1;}
#EIOT ul,#EIOT ol,#EIOT li{margin: 0px; padding: 0; list-style: none;}
#EIOT .box-img{line-height: 0px;}
#EIOT * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
#EIOT img{
  max-width: 100%;
  width: auto;}
#EIOT sub,#EIOT sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;}
  #EIOT sub {
    bottom: -0.25em;}
  #EIOT sup {
    top: -0.5em;}
#EIOT .list-point .icon-point{
	position: relative;
	padding-left: 18px;
	margin-top: 2px;}
	#EIOT .list-point .icon-point:after{
		content: '●';
		transform: scale(0.6);
		display: block;
		position: absolute;
		left: 0px;
		top: 0px;}
#EIOT .list-point .icon-arrow{
	position: relative;
	padding-left: 20px;
	margin-top: 2px;}
	#EIOT .list-point .icon-arrow:after{
		content: '▶';
		transform: scale(0.4,0.6);
		display: block;
		position: absolute;
		left: 0px;
		top: 0px;}
#EIOT a {
	text-decoration: none;
	outline: none;
	color: inherit;
	behavior: expression(this.onFocus=this.blur());}
	#EIOT a img, 
	#EIOT a img:hover {
		border: none;}
	#EIOT .textLink {
		color: #004280;
		transition: 0.3s;
		position: relative;
		margin-left: 2px;}
		#EIOT .textLink:after{
			transition: 0.3s;
			content: '';
			width: 100%;
			display: inline-block;
			border-bottom: 1px solid #004280;
			position: absolute;
			bottom: -5px;
			left: 0px;}
		#EIOT a.textLink:hover {
			color: #ea9716;
			text-decoration: none;}
		#EIOT a.textLink:hover:after {
			border-color: #ea9716;}
#EIOT .block-container{
	padding: 40px 2%;
	max-width: 1200px;
	margin: 0 auto;}
#EIOT .img-center{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;}
#EIOT .smallTxt{font-size: 0.8em;}
#EIOT .blueTxt{color: #004280 !important;}
#EIOT .orgTxt{color: #f39800 !important;}
#EIOT .showType{display: none;}
	#EIOT .showType.showDesktop{display: block;}
#EIOT .block-video{
	padding-bottom: 0px;}
	#EIOT .block-videoLists{
		text-align: center;
		padding-bottom: 50px;
		overflow: hidden;}
		/*#EIOT .block-videoLists .list{
			width: 50%;}*/
				#EIOT .videobox-img{
					text-align: center;}
					#EIOT .videobox-img .imgBox{
						position: relative;
						display: inline-block;
						margin: 0 10px;}
						#EIOT .imgBox .img{
							position: relative;
							z-index: 9;}
						#EIOT .videobox-img .imgBox:after{
							content: '';
							display: block;
							position: absolute;
							top: 98%;
							left: 0px;
							width: 100%;
							height: 15%;
							background: url(css-img/cssImg_videoBoxImg_shadow.png) center bottom no-repeat;
							background-size: cover;}
						#EIOT .videobox-img .imgBox:before{
							content: '';
							display: block;
							width: 120%;
							height: 10px;
							position: absolute;
							z-index: 2;
							bottom: 0px;
							left: -10%;
							background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 64%, rgba(0,0,0,0) 100%);
							background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 64%,rgba(0,0,0,0) 100%); 
							background: radial-gradient(ellipse at center,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 64%,rgba(0,0,0,0) 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );}
						#EIOT .videobox-img .icon-video{
							opacity: 0.6;
							transition: 0.5s;
							position: absolute;
							z-index: 10;
							top: 50%;
							left: 50%;
							margin-left: -35px;
							margin-top: -35px;
							width: 70px;
							height: 70px;
							background: url(css-img/cssImg_videoIcon.png) no-repeat;}
							#EIOT .videobox-img .imgBox:hover .icon-video{
								opacity: 1;}	
.video-lightbox .video-ani{
  cursor: pointer;}
  .lightbox-pop{
    background-color: rgba(0,0,0,.7);
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    display: none;}
    .lightbox-pop.show{
      display: flex;}
    .pop-container{
      position: relative;
      width: 80%;
      padding: 40px;
      background-color: #000;}
      .pop-container .videoIframe,
      .pop-container iframe {
        width: 100%;}
        .popClose{
          font-size: 18px;
          line-height: 15px;
          text-align: center;
          position: absolute;
          top: 10px;
          right: 10px;
          font-family: Arial,'Microsoft JhengHei', sans-serif;
          cursor: pointer;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          transition: .2s;
          transform-origin: right top;
          color: #004a83;
          background-color: #f4f4f4;
          display: flex;
          align-items: center;
          justify-content: center;}
          .popClose:after{
            content: 'X';
            display: block;
            transform: scale(1,0.8);}
          .popClose:hover{
            transform: scale(1.05);
            color: #fff;
            background-color: #004a83;}

#EIOT .block-btn .btn{padding: 5px 15px; border-radius: 5px;}
	#EIOT .block-btn .btn-org{
		background-color: #dc801e;
		color: #ffffff;}
	#EIOT .icon-arrow{
			position: relative;
			padding-right: 25px;}
		#EIOT .icon-arrow:after{
				position: absolute;
				top: 50%;
				right: 0px;
				transform: translateY(-50%);
				content: '▶';
				display: block;
				font-size: 0.7em;}
/*更新*/
#EIOT .block-topMsg{
	text-align: center;
	margin-bottom: 15px;}
	#EIOT .block-topMsg .block-title{
		color: #004280;
	    font-size: 1.25em;
	    font-weight: 700;
	    padding-bottom: 5px;
		text-align: center;
		display: inline-block;
		padding: 0 3px;}
	#EIOT .block-topMsg .topMsg-lighLightTxt{
		font-size: 4em;
		line-height: 1;
		font-weight: 100;
		margin-bottom: 4%;}
#EIOT .block-content{
	text-align: left;
	padding-top: 15px;
	font-size: 0.88em;}
	#EIOT .contentCenter.block-content{
		text-align: center;}			
#EIOT .block-table{
	margin: 0px 0 10px; 
	border-radius: 20px;
	overflow: hidden;}
	#EIOT .block-table .row{
		background-color: #cee2f3;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;}
		#EIOT .block-table .row:nth-child(2n){
			background-color: #e1f1ff;}
			#EIOT .block-table .col{
				text-align: center;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				background: url(css-img/cssImg_listPoint.png) left top repeat-y;}
				#EIOT .block-table .col:first-child{background-image: none;}
	#EIOT .block-table .rowTitle{
		background-color: #adcae3!important;}
		#EIOT .block-table .rowTitle .col{
			font-weight: 700;
			color: #004280 !important;
			font-size: 1em;
			line-height: 1.2;}
@media (min-width: 769px) {
	#EIOT .block-table .row:not(:first-child):hover .col{
		background-color: #1666a9 !important;
		color: #fff !important;}
}
#EIOT .block-3BoxLists{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;}
	#EIOT .block-3BoxLists .list{
		width: 32%;}
#EIOT .block-banner{
	background: #001a4d url(css-img/bannerBG.jpg) center bottom no-repeat;
	color: #fff;
	position: relative;}
	#EIOT .block-banner .block-container{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-bottom: 0px;}
		#EIOT .block-banner .banner-msg{
			width: 60%;
			max-width: 540px;
			margin: 0 auto 30px;}
			#EIOT .block-banner .bannerTitle{
				font-size: 1.66em;
				line-height: 1.2;
				padding-bottom: 5%;
				font-weight: 700;
				width: 100%;
				text-shadow: 0.05em 0.05em 0.05em #001a4d;}
			#EIOT .block-banner .bannerTxt{
				max-width: 425px;}
				#EIOT .block-banner .orgTxt{
					font-weight: 700;
					display: inline;}
			#EIOT .block-banner .banner-btn{
				display: block;
				margin-top: 10%;
				text-align: center;}
				#EIOT .block-banner .banner-btn .btn{
					background-color: #e60185;
					border-radius: 5px;
					color: #fff;
					font-size: 1.7em;
					font-weight: bold;
					padding: 5px 35px 5px 70px;
					position: relative;}
					#EIOT .block-banner .banner-btn .btn:before{
						content: '';
						display: block;
						position: absolute;
						top: 50%;
						left: 10px;
						width: 50px;
						height: 35px;
						transform: translateY(-50%);
						background: url(css-img/cssImg_shopBtnIcon.png) center center no-repeat;}
					#EIOT .block-banner .banner-btn .btn:after{
						content: '▶';
						display: block;
						position: absolute;
						transform: translateY(-50%) scale(0.4,0.6);
						top: 50%;
						right: 10px;
						width: 20px;
						height: 35px;}
		#EIOT .block-banner .banner-img{
			width: 33%;
			margin-bottom: -40px;}
		#EIOT .block-banner .bannerTime{
			font-weight: normal;
			font-size: 0.8em;
			position: absolute;
			right: 20px;
			bottom: 20px;}
#EIOT .block-limitedTimeProduct{
	background-color: #f2f2f3;
	margin-top: 40px;}
	#EIOT .block-limitedTimeProduct .list{
		width: 33.3%;
		border-left: 1px solid #9f9fa0;
		padding: 5px 20px;
		text-align: center;}
		#EIOT .block-limitedTimeProduct .list:first-child{
			border-left: none;}
		#EIOT .limitedTimeProduct_box{
			display: inline-block;
			text-align: left;}
			#EIOT .limitedTimeProduct_box .topMsg{
				max-width: 250px;
				color: #004280;}
			#EIOT .limitedTimeProduct_priceBox{
				position: relative;
				color: #f39800;
				font-size: 72px;
				line-height: 1;
				position: relative;
				padding-left: 65px;
				display: inline-block;}
				#EIOT .limitedTimeProduct_priceBox:before{
					content: '加購價';
					display: block;
					font-size: 20px;
					color: #646464;
					position: absolute;
					bottom: 35px;
					left: 0px;}
				#EIOT .limitedTimeProduct_priceBox:after{
					content: 'NT$';
					display: block;
					font-size: 32px;
					position: absolute;
					bottom: 0px;
					left: 0px;}
#EIOT .block-discount{}
	#EIOT .block-discount_3BoxLists .list{
		background-color: #f2f2f3;
		border-radius: 10px;
		padding: 20px;
		text-align: center;
		margin: 15px 0;}
		#EIOT .block-discount_3BoxLists .box-highLight{
			font-size: 1.16em;
			border-radius: 19px;
	    background-color: #fff;
	    padding: 5px 15px;
	    font-weight: 700;
	    display: inline-block;
	    min-width: 160px;}
		#EIOT .block-discount_3BoxLists .btn{
			width: 100%;
			text-align: center;}
#EIOT .block-discountStep{
	background-color: #f2f2f3;}
	#EIOT .discountStepImg-box{
		text-align: center;}
	#EIOT .block-discountStep .img-txt{
		font-size: 1.08em;
		padding-left: 18px;
		position: relative;
		margin-top: 20px;
		margin-left: 5px;
		margin-bottom: 5px;}
		#EIOT .block-discountStep .img-txt:after{
			content: '●';
			color: #004280;
			position: absolute;
			left: 3px;
			top: 0px;
			font-size: 0.5em;}
#EIOT .block-keyFeatureComparison_3BoxLists{}
	#EIOT .block-keyFeatureComparison_3BoxLists .list{
		text-align: center;
		background-color: #f2f2f3;
		border-radius: 20px;
		padding: 20px;}
		#EIOT .block-keyFeatureComparison_3BoxLists .box-category{
			font-size: 1.2em;
			font-weight: 700;}
		#EIOT .block-keyFeatureComparison_3BoxLists .box-title{
			font-size: 2.5em;
			line-height: 1;
			font-weight: 100;
			display: flex;
			align-items: center;
			justify-content: center;}
		#EIOT .block-keyFeatureComparison_3BoxLists .box-highLight{
			border-radius: 15px;
			background-color: #fff;
			padding: 5px 10px;
			font-weight: 700;
			margin: 15px 0;
			display: flex;
			align-items: center;
			justify-content: center;}


@media (max-width: 1100px) {
	#EIOT .block-banner .bannerTime{
		position: static;
		text-align: center;
		display: block;
		margin-top: 5px;}
	#EIOT .block-keyFeatureComparison_3BoxLists{
		font-size: 0.9em;}
}
@media (max-width: 1000px) {
	#EIOT .block-banner .banner-img{
		width: 48%;
		margin-right: -10%;}
}
@media (max-width: 860px) {
	#EIOT .showType.showDesktop{display: none;}
	#EIOT .showType.showTablet{display: block;}
	#EIOT .block-banner{}
		#EIOT .block-banner .banner-msg{
			max-width: 430px;}
			#EIOT .block-banner .bannerTitle{
				font-size: 1.5em;}
		#EIOT .block-banner .banner-img{
			width: 48%;
			margin-right: -10%;}
	#EIOT .block-discount_3BoxLists .box-highLight{
		font-size: 1em;}
	#EIOT .block-keyFeatureComparison_3BoxLists .box-title{
		font-size: 2em;}
	#EIOT .block-limitedTimeProduct .list{
		width: 30%;}
		#EIOT .block-limitedTimeProduct .list:last-child{width: 40%;}
}
@media (max-width: 768px) {
	#EIOT {
		font-size: 18px;
		line-height: 1.5;}
	#EIOT .block-topMsg{margin-bottom: 10px;}
	#EIOT .block-banner {
	    background-size: auto 100%;
    	background-position: right bottom;}
    	#EIOT .block-banner .banner-msg{
    		width: 55%;
    		max-width: 360px;}
    		#EIOT .block-banner .bannerTitle{font-size: 2.2em;}
    		#EIOT .block-banner .bannerTxt{font-size: 1em;}
		#EIOT .block-banner .banner-img{
			width: 48%;
			margin-right: -12%;}
	#EIOT .block-3BoxLists>.list{
		width: 100% !important;
		margin-top: 20px;}
		#EIOT .block-3BoxLists>.list:first-child{margin-top: 0px;}
		#EIOT .block-3BoxLists .list-wrapper{
			max-width: 450px;
			margin: 10px auto;}
	#EIOT .block-limitedTimeProduct .list{
		border-left: none;}
		#EIOT .block-limitedTimeProduct .list .limitedTimeProduct_box{
			border-top: 1px solid #9f9fa0;
			text-align: center;
			max-width: 350px;
			width: 100%;
			padding-top: 20px;}
			#EIOT .limitedTimeProduct_box .topMsg{
				max-width: inherit;}
			#EIOT .block-limitedTimeProduct .list:first-child .limitedTimeProduct_box{
				border-top: none;}
	#EIOT .block-keyFeatureComparison_3BoxLists .box-title{
		font-size: 3em;}
}
@media (max-width: 580px) {
	#EIOT .showType.showTablet{display: none;}
	#EIOT .showType.showPhone{display: block;margin: 0 auto;}
	#EIOT .block-banner {}
    	#EIOT .block-banner .banner-msg{
    		width: 60%;
    		max-width: 340px;}
    		#EIOT .block-banner .bannerTitle{font-size: 2.1em;}
    		#EIOT .block-banner .bannerTxt{font-size: 1em;}
		#EIOT .block-banner .banner-img{
			width: 55%;
			margin-right: -22%;}
}
@media (max-width: 480px) {
	#EIOT {
		font-size: 14px;}
	#EIOT .block-banner {}
    	/*#EIOT .block-banner .banner-msg{
    		width: 70%;
    		max-width: 340px;}*/
    		#EIOT .block-banner .bannerTitle{font-size: 2.1em;}
    		#EIOT .block-banner .bannerTxt{font-size: 1em;}
		#EIOT .block-banner .banner-img{
			width: 55%;
			margin-right: -22%;}
}