@charset "utf-8";
/*----------------------------------------
  Yoursite Style
----------------------------------------*/
#QFCS body {margin: 0;font-family: "PingFangTC-Regular", "PingFangTC", Arial, Helvetica, "HeitiTC", "微軟正黑體", "Microsoft JhengHei", sans-serif;font-size: 18px !important;font-weight: 400;line-height: 1.5;color: #6C6C6C;text-align: left;background-color: #fff;}
#QFCS a {color: #6C6C6C;text-decoration: none;display: inline;transition: 0.3s;}
#QFCS a:hover {color: #6C6C6C;text-decoration: none;}
#QFCS a:focus{outline:0}
#QFCS button,#QFCS button:focus{margin: 0;padding: 0;border:0 none;outline:0}
#QFCS  h2 {color: #19558c; font-weight: bold;font-size: 38px;margin-bottom: 50px;text-align: center;}

#QFCS img{width:100%; height: auto;}
#QFCS .Section{padding: 70px 0;}
#QFCS .Btn{font-size: 16px;color: #fff;text-align: center;padding: 3% 1%;background-color: #19558c;display: block;border-radius: 6px;max-width: 140px;}
#QFCS .Btn:hover{text-decoration: none; background-color: #2359a2;color:#fff;}

#QFCS{font-size: 16px;line-height: 1.5;font-family:"Arial","微軟正黑體",'Century Gothic';color: #4D4D4D;}
#QFCS .Wrapper{width:100%;max-width: 1200px;margin: auto;}
#QFCS .Header { background:url(../images/kvbg.jpg) top center no-repeat; background-size: cover;  width: 100%;  color: #fff; text-align: center;box-sizing: border-box;height: 540px; background-color: #071c3b;padding-top: 40px;}
#QFCS .Header h1{background:url(../images/h1.png) top center no-repeat; width:785px; height: 75px;text-indent: -99999px; margin: auto; background-size: 100%;}
#QFCS .FlexWrap{display: flex;flex-wrap: wrap}

#QFCS .SWord{font-size: 24px;color: #fff;}
#QFCS .menuFrame{/*position:absolute;left:0;top:0;*/width:100%;height:55px;z-index:999;background-color:#0e1736}
#QFCS .menuFrame.fixed{position:fixed;top:0!important;width:100%;z-index:999;background-color:rgba(14,23,54,0.9)}
#QFCS .menuFrame ul{width:100%;margin:0 auto;padding:0;max-width: 1200px;}
#QFCS .menuFrame ul li{display:inline-block;list-style:none}
#QFCS .menuFrame ul li a{display:block;color:#FFF;font-size:17px;font-weight:500;padding:0 25px;line-height:55px;border-right:1px solid #fff;text-decoration:none}
#QFCS .menuFrame ul li a.on .outline{border-bottom:2px solid #FFF}
#QFCS .menuFrame ul li:last-child a{border:0}
#QFCS .menuFrame ul li a span.far{display:none}
#QFCS .menuFrame .left.openMenu,#QFCS .menuFrame .right.contact{display:none}

#QFCS #Block01 {padding: 70px 0;}
#QFCS #Block01 h2 {max-width: 850px;margin: auto; width:100%;margin-bottom: 35px;font-size: 24px;text-align:left;}
#QFCS #Block01 .Intro {max-width: 850px;margin: 0 auto 50px; width:100%;}
#QFCS #Block01 .IntroFlow ul li{width: 19%;margin:0 .5%; background-color: #0d3153;border-radius: 10px;padding: 2%;box-sizing: border-box;color: #fff;text-align: center; font-size: 14px;line-height: 1.3;}
#QFCS #Block01 .IntroFlow ul li img{max-width: 105px; margin:0 auto 3%;}
#QFCS #Block02 h2 {background: -webkit-linear-gradient(top,  #3272b8 0%,#21b3ca 100%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 48px;}
#QFCS #Block02 .FlexWrap li{ background: #dff2fc;border-radius: 15px; padding: 2%; box-sizing: border-box;margin-bottom: 2%; }
#QFCS #Block02 .FlexWrap li:nth-child(1){width: 65%; margin-right: 2%;}
#QFCS #Block02 .FlexWrap li:nth-child(1) img{max-width: 538px;margin: auto;}
#QFCS #Block02 .FlexWrap li:nth-child(2){width: 33%; }
#QFCS #Block02 .FlexWrap li:nth-child(2) img{max-width: 312px;margin: auto;}
#QFCS #Block02 .FlexWrap li:nth-child(3){width: 33%; margin-right: 2%;}
#QFCS #Block02 .FlexWrap li:nth-child(3) img{max-width: 257px;margin: auto;}
#QFCS #Block02 .FlexWrap li:nth-child(4){width: 65%;}
#QFCS #Block02 .FlexWrap li:nth-child(4) img{max-width: 300px;display: inline-block;}
#QFCS h3{font-size: 26px; font-weight: bold;padding-bottom: 10px; color: #3f3b3a; border-bottom: 0 none;}
#QFCS #Block02 h3{margin-bottom: 5px;}
#QFCS #Block02 h3 span{margin-bottom: .7em; border-bottom: 6px solid #22b5c8;color: #3f3b3a;font-size: 26px;line-height: 2;}
#QFCS #Block02 .deliversImg{text-align: center;}
#QFCS #Block02 p{margin-bottom: .7em;}
#QFCS #Block03{ background: #ecf2f7; }
#QFCS #Block03 .FlexWrap{justify-content: center;align-items: center;}
#QFCS #Block03 .FlexRight {margin-left: 4%;}
#QFCS #Block03 .FlexRight ul li{display: flex;flex-wrap: wrap;margin-bottom: 5%;}
#QFCS #Block03 .FlexRight ul li i{background: #19558c;font-size: 24px;border-radius: 15px; text-align: center; width:40px; height: 40px; line-height: 40px;color:#fff;font-style: normal; vertical-align: middle}
#QFCS #Block03 .FlexRight ul li .WordingBlock{width:80%;margin: 0 0 0 3%;}
#QFCS #Block03 h4{margin: 0;font-size: 20px; color:#19558c;padding: 0;}
#QFCS #Block04 .Title{font-size: 20px;color:#0081d2; border-bottom: 2px solid #0081d2; padding-bottom: 5px;margin-bottom: 30px;}
#QFCS #Block04 .PdList ul li {width:31%; margin:0 3% 30px 0; }
#QFCS #Block04 .PdList ul li:last-child{margin:0;}
#QFCS #Block04 .PdList ul li .PdBox{border-radius: 5px; border:1px solid #dfdfdf;padding: 5%; box-sizing: border-box; background: #fff;}
#QFCS #Block04 .PdList ul li .PdBox:hover{box-shadow: 0px 0px 16px 0px rgba(4, 0, 0, 0.15);}
#QFCS #Block04 .PdList ul li img{max-width: 310px}
#QFCS #Block04 .PdList ul li .PtdImg{text-align: center;}
#QFCS #Block04 .PdList ul li h4{font-size: 18px;margin:0;padding: 1em 0;}
#QFCS #Block04 .PdList ul li .PdtName{font-size: 14px;margin-bottom: 1em;}
#QFCS .VideoBlock {text-align: center;}
#QFCS .VideoBlock iframe{margin: auto;}

#QFCS #Block06 .DownloadList{background: url(../images/block06_bg.png) bottom center no-repeat;border-radius: 5px;background-size: cover;}
#QFCS #Block06 .FlexWrap {justify-content: center;align-items: center;padding: 1%;box-sizing: border-box;}
#QFCS #Block06 .FlexWrap li:nth-child(1){width: 28%;padding-left: 5%;box-sizing: border-box;color: #fff;font-size: 22px;}
#QFCS #Block06 .FlexWrap li:nth-child(2){width:20%;}
#QFCS #Block06 .FlexWrap li:nth-child(3){width:26%;}
#QFCS #Block06 .FlexWrap li:nth-child(4){width:26%;}
#QFCS #Block06 .FlexWrap img{max-width: 295px;}




@media screen and (max-width: 1199px){
	#QFCS .menuFrame ul li a{padding: 0px 16px;}
	#QFCS .Section{padding: 5%;}
	#QFCS #Block01{padding: 5%;}
}
@media screen and (max-width: 991px) {
	#QFCS .menuFrame{top:0;height:45px;background-color:#0e1736;border-bottom:1px solid #CCC; color: #fff;}
	#QFCS .menuFrame .left.openMenu{display:block;padding-left:20px;width: 100%;box-sizing: border-box;}
	#QFCS .menuFrame .left.openMenu a{display:block;color:#fff;font-size:16px;line-height:45px;padding-right:20px;text-decoration:none}
	#QFCS .menuFrame .left.openMenu a span.fa{margin-right:10px}
	#QFCS .menuFrame .right.contact{display:block;float:right;position: absolute; top: 0;right: 0}
	#QFCS .menuFrame .right.contact a{display:block;color:#FFF;width:115px;height:45px;font-size:16px;line-height:45px;background-color:#03091f;text-align:right;padding-right:25px}
	#QFCS .menuFrame ul{width:100%;height:auto;left:0;display:none;margin:0;padding:0;position: relative;}
	#QFCS .menuFrame ul li{display:block}
	#QFCS .menuFrame ul li a{font-size:15px;color:#131b37;line-height:45px;border-right:0;border-bottom:1px solid #CCC;padding:0 25px 0 20px;background-color: #fff;}
	/*#QFCS .menuFrame ul li:last-child {display: none;}*/
	#QFCS .menuFrame ul li:last-child a{border-bottom:2px solid #131b37}
	#QFCS .menuFrame .left.openMenu span.fa-chevron-circle-down{display:block;float:right;margin-top:15px}


	#QFCS #Block05 ul.FlexWrap > li:nth-child(1){background-size: 100%;}
	#QFCS #Block05 ul.FlexWrap > li:nth-child(2){background-size: 100%;}
	#QFCS #Block05 ul.FlexWrap > li a{height: 20vmin;box-sizing: border-box;}
	#QFCS #Block05 ul.FlexWrap > li a h3{font-size: 2vmin;}
	#QFCS #Block05 ul.FlexWrap .Box{width: 24vmin;margin-left: 1vmin;margin-top: 1vmin;margin-bottom: 1vmin;}
	#QFCS #Block06 ul.FlexWrap li{width: 48%;margin: 0px 1% .5em;}
}
@media screen and (max-width: 879px) {
	#QFCS .VideoBlock{width: 100%;position: relative;padding: 0;padding-top: 56.25%;}
	#QFCS .VideoBlock iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

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

	#QFCS #Block01 .Intro{font-size: 5vmin;margin-bottom: 6vmin;}
	#QFCS .Header { background:url(../images/kvbg_m.jpg) top center no-repeat; background-size: 100%;  width: 100%;padding-top: 3%;height: 0;padding-bottom: 137%;}
	#QFCS .Header h1{background: url(../images/h1_m.png) top center no-repeat;background-size: 100%;width: 100%;height: 0;padding-bottom: 31%;}
	#QFCS .SWord{font-size: 4.5vmin;width: 95%;margin: auto;}
	#QFCS .Kv{height: 0;padding-bottom: 57%;}
	#QFCS .StoreProductFlow li{margin:3% auto;}
	#QFCS #Block02:before{display: none;}
	#QFCS #Block02:after{ height: 22px;background-size: cover }
	#QFCS #Block03 ul.FlexWrap li{width: 47%;}
	#QFCS h2{margin-bottom: 1em;font-size: 5vmin;}
	#QFCS #Block04 h2 {margin-top: 1em;}
	#QFCS #Block04 ul.FlexWrap > li{width: 47%;}
	#QFCS #Block04 .PdList1{padding-bottom: 5%;}
	#QFCS #Block04:after{display: none;}
	#QFCS #Block04 ul.FlexWrap li .FlexBlock .FlexLeft img{max-width: 200px;}
	#QFCS #Block04 ul.FlexWrap li .FlexBlock .FlexRight{align-self: center;}
	#QFCS #Block02 .FlexWrap .item{width: 48%;}
	#QFCS .desc{display: none;}
	#QFCS .Mobile{display: block;}
	#QFCS #Block05 ul.FlexWrap > li a p{max-width: 20vmin;}
	#QFCS #Block05 ul.FlexWrap > li a .Btn{box-sizing: border-box;}
	#QFCS #Block01 .Intro{font-size: 3vmin;}
	#QFCS #Block06 .FlexWrap li:nth-child(3){display: none;}
	#QFCS #Block06 .FlexWrap li:nth-child(1){width:50%;}
	#QFCS #Block06 .FlexWrap li:nth-child(2){width:30%;}
	#QFCS #Block06 .FlexWrap li:nth-child(4){width:80%;margin: auto;}
	#QFCS #Block06 .FlexWrap img{width:100%;max-width: 100%;}
	#QFCS #Block06 .FlexWrap{padding: 3%;}

}

@media screen and (max-width: 640px) {
	#QFCS h1{font-size: 9vmin;}
	#QFCS .Kv{height: 0;padding-bottom: 94%;}
	#QFCS #Block03 ul.FlexWrap li{width: 100%;}
	#QFCS #Block05 ul.FlexWrap > li{width: 100%;}
	#QFCS #Block05 ul.FlexWrap > li a h3{font-size: 4vmin;}
	#QFCS #Block04 ul.FlexWrap li .FlexBlock .FlexLeft img{max-width: 130px;}
	#QFCS #Block04 ul.FlexWrap li .FlexBlock .FlexRight{align-self: inherit;}
	#QFCS .Nav .fas{ top: 4vmin;}
	#QFCS #Block04:before{top: -3vmin;}
	#QFCS #Block04:before{background-size: 370vmin;}
	#QFCS #Block06 ul.FlexWrap li .ImgBlock .EffectWrap{font-size: 14px;}
	#QFCS #Block05 ul.FlexWrap > li a p{max-width: 20vmin;}
	#QFCS #Block05 ul.FlexWrap > li a{height: 41vmin;}
	#QFCS #Block05 ul.FlexWrap .Box{width: 44vmin;margin-left: 3vmin;margin-top: 1vmin;margin-bottom: 2vmin;}
	#QFCS h2{font-size: 8vmin;}
	#QFCS #Block06 .FlexWrap li:nth-child(1){font-size: 4vmin;}
	#QFCS #Block06 .FlexWrap li:nth-child(1){width:60%;}
	#QFCS #Block04 ul.FlexWrap > li{width: 100%;}
	#QFCS #Block01 .IntroFlow ul li{width:100%;margin: 5%;padding: 11% 22%;}
	#QFCS #Block02 .FlexWrap li:nth-child(1){width: 100%;margin: 0 0 5%;padding: 6%;}
	#QFCS #Block02 .FlexWrap li:nth-child(2){width: 100%;margin: 0 0 5%;padding: 6%;}
	#QFCS #Block02 .FlexWrap li:nth-child(3){width: 100%;margin: 0 0 5%;padding: 6%;}
	#QFCS #Block02 .FlexWrap li:nth-child(4){width: 100%;margin: 0 0 5%;padding: 6%;}
	#QFCS #Block02 .FlexWrap li:nth-child(4) img{margin: 3% 0;}

}

@media screen and (max-width: 480px) {
	#QFCS #Block05 ul.FlexWrap .Box{width: 54%;}
	#QFCS #Block05 ul.FlexWrap > li a p{max-width: 41vmin;line-height: 1.3;font-size: 3vmin;}
	#QFCS #Block05 ul.FlexWrap > li a{height: 38vmin;margin-bottom: 2vmin;margin-left: 2vmin;}
	#QFCS #Block01 .Intro{font-size: 5vmin;}

}
@media screen and (max-width: 400px) {
	#QFCS #Block05 ul.FlexWrap .Box{margin-bottom: 1vmin;}
}
@media screen and (max-width: 320px) {
	#QFCS #Block04:before{top: -2vmin;}
	#QFCS #Block05 ul.FlexWrap > li a p{max-width: 85vmin;}
}