@charset "utf-8";
#SQFlash {
	font-size: 18px;
	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;
	overflow: hidden;}
#SQFlash span, #SQFlash b, #SQFlash a, #SQFlash abbr[title], #SQFlash dfn[title], #SQFlash mark{
  display: inline-block;
  *display: inline;
  *zoom: 1;}
#SQFlash .box-img{line-height: 0px;}
#SQFlash * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
#SQFlash img{
  max-width: 100%;
  width: auto;}
#SQFlash sub,#SQFlash sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;}
  #embeddedSingleBoard sub {
    bottom: -0.25em;}
  #embeddedSingleBoard sup {
    top: -0.5em;}
#SQFlash .list-point .icon-point{
	position: relative;
	padding-left: 18px;
	margin-top: 2px;}
	#SQFlash .list-point .icon-point:after{
		content: '●';
		transform: scale(0.7);
		display: block;
		position: absolute;
		left: 0px;
		top: 0px;}
#SQFlash a {
	text-decoration: none;
	outline: none;
	color: inherit;
	behavior: expression(this.onFocus=this.blur());}
	#SQFlash a img, 
	#SQFlash a img:hover {
		border: none;}
	#SQFlash a.textLink {
		color: #004280;
		transition: 0.3s;
		position: relative;
		margin-left: 2px;}
		#SQFlash a.textLink:hover {
			color: #ea9716;
			text-decoration: none;}
		#SQFlash a.textLink:hover:after {
			border-color: #ea9716;}
		#SQFlash a.textLink:after{
			transition: 0.3s;
			content: '';
			width: 100%;
			display: inline-block;
			border-bottom: 1px solid #004280;
			position: absolute;
			bottom: -8px;
			left: 0px;}
#SQFlash .block-container{
	padding: 30px 2%;}
#SQFlash .img-center{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;}
#SQFlash .block-topMsg{
	text-align: center;
	margin-bottom: 15px;}
	#SQFlash .block-topMsg .block-title{
		color: #004280;
	    font-size: 1.67em;
	    font-weight: 700;
	    padding-bottom: 5px;
		text-align: center;
		display: inline-block;
		border-bottom: 1px solid #bfbfbf;
		padding: 0 3px 8px;}
	#SQFlash .block-topMsg .block-topContent{
		text-align: left;
		padding-top: 15px;
		font-size: 0.88em;}
	#SQFlash .block-topMsg.contentCenter .block-topContent{
		text-align: center;}
#SQFlash .block-dataSecurity{}
#SQFlash .block-reliability{
	background-color: #f5f5f5;}
#SQFlash .block-product{}
	#SQFlash .block-productLists{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;}
		#SQFlash .block-productLists .list{
			position: relative;
			width: 48%;
			text-align: center;
			display: flex;
			justify-content: space-between;
			align-items: center;}
			#SQFlash .block-productLists .listBox{
				width: 100%;}
			#SQFlash .productImg1{
				width: 88%;}
			#SQFlash .productImg2{
				width: 20.3125%;}
			#SQFlash .block-productLists .productContent{
				position: relative;
				display: inline-block;
				padding-top: 10px;}
				#SQFlash .block-productLists .productContent-title{
					font-weight: 600;
					color: #004280;
					display: inline-block;
					position: relative;}
				#SQFlash .block-productLists .productContent-content{
					font-size: 0.9em;}
				#SQFlash .block-productLists .line{
					position: absolute;
					background-color: #9fe3ff;}
				#SQFlash .productContent1 .line1{
					height: 30px; 
					width: 1px;
					left: -20px;
					top: -5px;}
				#SQFlash .productContent1 .line2{
					height: 1px; 
					width: 15px;
					left: -20px;
					top: 25px;}
				#SQFlash .productContent2 .line1{
					height: 1px; 
					width: 70px;
					right: -20px;
					top: -20px;}
				#SQFlash .productContent2 .line2{
					height: 35px; 
					width: 1px;
					right: -20px;
					top: -20px;}
				#SQFlash .productContent2 .line3{
					height: 1px; 
					width: 15px;
					right: -20px;
					top: 15px;}
		#SQFlash .block-productLists .list:first-child:after{
			content: '';
			display: block;
			position: absolute;
			left: 90%;
			top: 0%;
			height: 100%;
			width: 40%;
			background: url(css-img/SQFlash_productLine.png) left center no-repeat;
			background-size: contain;}
#SQFlash .block-video{
	background-color: #f2f9ff;
	padding-bottom: 0px;}
	#SQFlash .block-videoExclusive{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;}
		#SQFlash .videoExclusive-img{
			width: 40%;
			margin-top: -40px;}
		#SQFlash .videoExclusive-content{
			width: 60%;
			padding-left: 2%;}
			#SQFlash .videoExclusive-title{
				font-size: 2em;
				color: #004280;
				font-weight: 900;
				display: flex; 
				flex-wrap: wrap;
				align-items: center; 
				justify-content: flex-start;
				margin-bottom: 5px;}
			#SQFlash .videoExclusive-title .logo{
				max-height: 45px;}
	#SQFlash .block-videoLists{
		padding-bottom: 50px;
		overflow: hidden;}
		#SQFlash .block-videoLists .list{
			margin-top: 30px;
			background:url(css-img/SQFlash_listPoint.png) top left repeat-x;}
			#SQFlash .block-videoLists .list:first-child{
				background: none;
				margin-top: 0px;}
				#SQFlash .video-wrapper{
					max-width: 1080px;
					margin-left: auto;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;}
				#SQFlash .videobox{
					padding: 30px 10px 0;
					width: 50%;}
					#SQFlash .videobox-title{
						font-weight: 700;
						color: #004280;
						padding-bottom: 10px;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;}
					#SQFlash .videobox-img{
						text-align: center;}
						#SQFlash .videobox-img .imgBox{
							position: relative;
							display: inline-block;
							margin: 0 10px;}
							#SQFlash .imgBox .img{
								position: relative;
								z-index: 9;}
							#SQFlash .videobox-img .imgBox:after{
								content: '';
								display: block;
								position: absolute;
								top: 98%;
								left: 0px;
								width: 100%;
								height: 15%;
								background: url(css-img/SQFlash_videoBoxImg_shadow.png) center bottom no-repeat;
								background-size: cover;}
							#SQFlash .block-videoQRCode .videobox-img .imgBox:after{
								height: 90px;
								background-image: url(css-img/SQFlash_videoImg_1_shadow.png);}
							#SQFlash .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 );}
							#SQFlash .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/SQFlash_videoIcon.png) no-repeat;}
								#SQFlash .videobox-img .imgBox:hover .icon-video{
									opacity: 1;}
					#SQFlash .videoQRCod-content{
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: space-between;
						position: relative;
						z-index: 3;}
						#SQFlash .videoQRCod-content .QRCod-content{
							min-width: calc(100% - 151px);
							width: 75%;
							padding-right: 10px;}
						#SQFlash .videoQRCod-content .QRCod-img{
							width: 151px;
							width: 25%;}	
#SQFlash .block-focusSectors{
	padding-left: 0px;
	padding-right: 0px;}
	#SQFlash .focusSectors-lists{
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: space-between;}
		#SQFlash .focusSectors-lists>li{
			width: 25%;
			padding:10px 10px 20px;}
		#SQFlash .focusSectors-lists>li:nth-child(odd){
			background: rgb(255,255,255); /* Old browsers */
			background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(242,249,255,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,249,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(242,249,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f9ff',GradientType=0 ); /* IE6-9 */}
			#SQFlash .focusSectors-img {
				text-align: center;}
				#SQFlash .focusSectors-img img{
					border:2px solid #d6e1ea;}
			#SQFlash .focusSectors-container{
				max-width: 285px;
				width: 98%;
				margin:10px auto 0;}
			#SQFlash .focusSectors-lists .focusSectors-title{
				color: #004280;
				font-size: 1.12em;
				font-weight: 700;
				margin-bottom: 10px;}
			#SQFlash .focusSectors-lists .icon-point:after{
				color: #10b6b7;}
#SQFlash .block-table{
	margin: 20px 0 10px; 
	border-radius: 25px;
	overflow: hidden;
	font-size: 1.1em;}
	#SQFlash .block-table .row{
		background-color: #cee2f3;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;}
		#SQFlash .block-table .row:nth-child(2n){
			background-color: #e1f1ff;}
			#SQFlash .block-table .col{
				padding: 15px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				background: url(css-img/SQFlash_listPoint.png) left top repeat-y;}
				#SQFlash .block-table .col:first-child{background-image: none;}
			#SQFlash .block-table .title{
				font-weight: 700;
				color: #004280;
				background-color: #adcae3!important;}
@media (min-width: 769px) {
	#SQFlash .block-table .row:not(:first-child):hover{
		background-color: #1666a9 !important;
		color: #fff !important;}
		#SQFlash .block-table .row:not(:first-child):hover .textBlue{
			color: #fff !important;}
}
#SQFlash .block-special{
	background-color: #f2f9ff;}
	#SQFlash .specialTable .col{
		width: 32%;
		line-height: 1.3;}
		#SQFlash .specialTable .title{
			font-size: 1.5em;}
		#SQFlash .specialTable .textBlue{
			font-weight: 700;
			color: #004280;}
		#SQFlash .specialTable .colTitle{
			width: 22%;
			padding:5px; 
			justify-content: flex-end;}
			#SQFlash .specialTable .colTitle>span{
				width: 100%;
				max-width: 200px;
				text-align: left;}
		#SQFlash .specialTable .colSpecial{
			width: 46%;}
#SQFlash .block-productSpec{}
		#SQFlash .productSpecTable .col{
			width: 60%;
			line-height: 1.3;}
		#SQFlash .productSpecTable .colTitle{
			width: 40%;
			font-weight: 700; 
			justify-content: flex-end;}
			#SQFlash .productSpecTable .colTitle>span{
				width: 100%;
				max-width: 350px;
				text-align: left;}
#SQFlash .block-faq{
	background-color: #f2f9ff;}
	#SQFlash .block-faq .block-content{
		max-width: 1040px; margin: 0 auto;}
		#SQFlash .faq-lists>li{
			margin-top: 10px;
			border-radius: 25px;
			background-color: #ffffff;
			/*padding: 25px 5%;*/
			line-height: 1.6em;}
			#SQFlash .faq-lists>li:first-child{
				margin-top: 0px;}
				#SQFlash .faq-title{
					font-size: 1.33em;
					font-weight: 700;
					color: #0067c8;
					padding: 25px 4%;
					padding-right: calc(4% + 40px);
					position: relative;
					cursor: pointer;}
					#SQFlash .faq-title .icon{
						position: absolute;
						right: 4%;
						top: 22px;
						width: 36px;
						height: 36px;
						border: 2px solid #004280;
						border-radius: 50%;}
					#SQFlash .faq-title .icon:after,#SQFlash .faq-title .icon:before{
						content: '';
						display: block;
						position: absolute;
						left: 50%;
						top: 50%;
						margin-left: -9px;
						margin-top: -1.5px;
						background-color: #004280;
						width: 18px;
						height: 3px;}
						#SQFlash .faq-title .icon:after{
							transform: rotate(90deg);
							opacity: 1;
							transition: 0.3s;}
							#SQFlash .show .faq-title .icon:after{
							transform: rotate(0deg);
							opacity: 0;}
				#SQFlash .faq-content{
					display: none;
					padding: 20px 0 25px 0;
					margin: 0 4%;
					background: url(css-img/SQFlash_listPoint.png) top left repeat-x;}
					#SQFlash .faq-lists>li.show .faq-content{
						display: block;}
					#SQFlash .faq-link{
						padding: 20px 0 10px;}
#SQFlash .block-download .block-content{
	font-size: 1.12em;}
	#SQFlash .download-lists>li{
		text-align: center;
		background: url(css-img/SQFlash_listPoint.png) top left repeat-x;}
		#SQFlash .download-lists>li:first-child{
			background: no-repeat;}
		#SQFlash .download-lists .icon-point{
			text-align: left;
			max-width: 960px;
			width: 100%;
			transition: 0.5s;
			padding: 12px 0;
			padding-left: 25px;}
			#SQFlash .download-lists .icon-point:hover{
				/*transform: scale(1.005);*/
				color: #0067c8;}
			#SQFlash .download-lists .icon-point:after{
				color: #004280;
				top: 12px;}
#SQFlash .block-verification{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin: 20px 0;
	padding: 0px 20px 0px 0px;
	background: #003477; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,75,172,1) 0%, rgba(0,52,119,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,75,172,1) 0%,rgba(0,52,119,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,75,172,1) 0%,rgba(0,52,119,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004bac', endColorstr='#003477',GradientType=0 ); /* IE6-9 */}
	#SQFlash .verification-img{
		width: 24%;
		min-width: 220px;
		height: 100%;
		position: relative;}
		#SQFlash .verification-img img{
			margin-top: -20px;}
	#SQFlash .verification-content{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 76%;
		max-width: calc(100% - 220px);}	
		#SQFlash .verification-title{
			width: 70%;
			min-width: calc(100% - 140px);
			font-size: 3em;
			font-weight: 700;
			line-height: 1.1;
			color: #99e1ff;
			padding: 10px;
			text-align: center;}
		#SQFlash .verification-logo{
			width: 30%;
			max-width: 140px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;}
		#SQFlash .verification-logo .logoList{
			width: 50%;
			padding: 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;}
@media (max-width: 980px) {
	#SQFlash .videoQRCod-content .textLink{font-size: 0.8em;}
}
@media (max-width: 860px) {
	#SQFlash .focusSectors-lists>li{
		width: 50%;}
		#SQFlash .focusSectors-lists>li:nth-child(odd){
			background: #fff;}
		#SQFlash .focusSectors-lists>li:nth-child(3n+1){
			background: #f2f9ff;}
	#SQFlash .verification-title{
		font-size: 2.5em;}
	#SQFlash .block-table.specialTable .row{
		background-color: #e1f1ff;}
		#SQFlash .specialTable .title{font-size: 1.2em;}
		#SQFlash .specialTable .title .col:first-child{display: none;}
		#SQFlash .specialTable .col{
			width: 40%;}
			#SQFlash .specialTable .colTitle{
				width: 100%;
				background-color: #cee2f3;
				justify-content: center;}
				#SQFlash .block-table.specialTable .col:nth-child(2n){background: none;}
				#SQFlash .specialTable .colTitle>span{
					max-width: initial;
					text-align: center;}
			#SQFlash .specialTable .colSpecial{
				width: 60%;}
}
@media (max-width: 768px) {
	#SQFlash {
		font-size: 16px;
		line-height: 1.5;}
	#SQFlash .block-productLists{
		max-width: 500px;
		margin: 0 auto;	}	
		#SQFlash .block-productLists .list{
			width: 100%;}
		#SQFlash .block-productLists .list:first-child:after{
			display: none;}
	#SQFlash .videoExclusive-img{
		width: 100%;
		max-width: 420px;
		margin: -40px auto 0;}
	#SQFlash .videoExclusive-content{
		width: 100%;
		max-width: 600px;
		text-align: center;
		margin: 0 auto;}
		#SQFlash .videoExclusive-title{justify-content: center;}
	#SQFlash .videobox{
		width: 100%;
		max-width: 465px;}
	#SQFlash .block-verification{
		align-items: flex-end;}
		#SQFlash .verification-img{width: 35%;}
		#SQFlash .verification-content{
			width: 65%;
			padding-bottom: 10px;}
			#SQFlash .verification-title,
			#SQFlash .verification-logo{
				width: 100%;
				padding:10px 0px 0px;
				min-width: inherit;
				max-width: initial;
				justify-content: center;}
			#SQFlash .verification-logo{
				max-width: 300px;
				margin: 0 auto;}
				#SQFlash .verification-logo .logoList{ 
					width: auto;
					max-width: 20%;}
}
@media (max-width: 580px) {
  	#SQFlash .focusSectors-lists>li{
		width: 100%;
		padding-top: 20px;}
		#SQFlash .focusSectors-lists>li:nth-child(3n+1){
			background: #fff;}
		#SQFlash .focusSectors-lists>li:nth-child(odd){
			background: #f2f9ff;}
	#SQFlash .block-verification{
		padding-right: 0px;}
		#SQFlash .verification-img{
			width: 100%;
			text-align: center;}
			#SQFlash .verification-img img{
				margin-left: -13%;}
		#SQFlash .verification-content{
			width: 100%;
			max-width: initial;
			padding: 5px;}
			#SQFlash .verification-title{
			font-size: 2em;}
}
@media (max-width: 480px) {
	#SQFlash {
		font-size: 14px;}
	#SQFlash .videoQRCod-content .QRCod-content{
		width: 100%;
		padding-right: 0px;
		padding-bottom: 20px;}
		#SQFlash .videoQRCod-content .textLink{font-size: 1em;}
	#SQFlash .videoQRCod-content .QRCod-img{
		width: 100%;
		text-align: center;}
}