/* CSS Document */
@import "default.css";
/* ==========================================================================
    public
 ========================================================================== */

html, body {
	margin: 0;
	padding: 0;
}
body {
	overflow-x: hidden !important;
	/*font-family: Arial, Microsoft JhengHei, 微軟正黑體;*/
	background-color: #fff;
}

/*IE 10 */
select::-ms-expand {
 display: none !important;
}
/*不顯示外虛線*/
button, a {
	outline: none !important;
}
a, a:active {
	cursor: pointer;
	text-decoration: none !important;
}
h1, .h1, h2, .h2, h3, .h3 {
	margin: 0;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
a, a:hover, *:hover, *:active {
	-o-transition: all .30s ease-in-out;
	-webkit-transition: all .30s ease-in-out;
	-moz-transition: all .30s ease-in-out;
	transition: all .30s linear;
}
.clearfix {
	clear: both;
}
.winW {
	width: 100vw;
	height: 100vh;
}
ul, li {
	list-style: none;
}
/* ==========================================================================
    共用 圖片縮放
 ==========================================================================*/

.img_box {
	position: relative;
	overflow: hidden;
}
.img_box img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	-webkit-transition: transform 0.4s ease-in-out;
	-moz-transition: transform 0.4s ease-in-out;
	-ms-transition: transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}
a:hover .img_box img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-filter: saturate(1.1);
}
/* ==========================================================================
    header
 ==========================================================================*/
.header {background-color: #3ba4ff;	width: 100%; height: 40px; position: fixed;	z-index: 999; top: 0;	padding: 6px 0;}
.header .right {position: absolute; top: 5px; right: 10px;}
.header .right div {float: left; margin-left: 5px;}
.header div img {max-height: 40px;}
.header .logo {margin-right: 20px; padding-left: 10px;}
.header .logo a {display: block;}
.header div img {max-width: 100%;}
.header .lang_list select {background-color: #3ba4ff; color: #fff; height: 32px; padding-left: 5px; margin-top: 5px; font-weight: bold; font-size: 14px;
  border: 1px #fff solid; border-radius: 4px;}
#area1 {position: relative; background: url(images/area1.png) -80px 10px no-repeat; background-size: 200%; height: 52vh;}
#area1 .pic_logo img {margin: 60px 0 0 20px; float: left; width: 25%;}
/*#area1 .pic2 {width: 45%; left: 30%;}*/
#area1 .pic3 {position: absolute; top: 45%; left: 10%;}
#area1 .pic3 img {width: 200px;}
#area1 div.title {position: absolute; width: 60%; top: 10%; right: 1.6%;}
#area1 .firmware_download {position: absolute; bottom: 2%; right: 1.5%;}
#area1 .firmware_download a {display: block;}
#area1 .firmware_download img {width: 400px;}
#area1 .download {top: 77%; width: 40%; text-align: right; right: 0.5%;}
#area1 .download a:first-child {width: 35%;}
#area1 .download a:last-child {width: 49.96%}
#area2 {background: #08b4e9 url(images/area2b.jpg)left top repeat-x; width: 100%;	height: auto;	margin-top: 0;}
#area2 .pic2 {width: 100%; position: relative; top: 0%; padding-top: 20px;}
#area3 {position: relative; background: url(images/area3b.png) right top no-repeat; background-size: 72%; height: 45vh;}
#area3 .download {position: absolute; top: 26.4%; left: 1.5%;}
#area3 .download a {display: block;}
#area4 {background: url(images/area4b.jpg) top repeat-x; width: 90%; min-height: 500px; font-size: 15px; color: #fff; padding: 5% 5% 2%; text-align: justify;}
#area4 .yellow {color: #ff0;}
#area4 .blue {color: #009; line-height: 15px; font-size: 14px; text-align: justify; width: 100%; padding-top: 5px;}
#area4 .title {font-size: 1.8em; line-height: 1.8em; padding: 15px 0 0;}
#area4 .title + p {margin: 0 0 25px;}
#area4 .pic4 {text-align: center;}
#area4 .pic5 {max-width: 200px;	margin: 0 auto;}
#area5 {width: 92%; padding: 50px 4%;}
#area5 .search {background: url(images/img9.png) no-repeat; background-size: 100%; height: 35px; width: 80.3%; margin-top: -10px;
  padding: 2.5% 0 0 20%; font-weight: bold; font-size: 15px;}
#area5 .search + div {margin: 10px 0 2px;}
#area5 .video {padding-bottom: 20px;}
#area5 .say {border: 1px solid #aaa; border-radius: 6px; line-height: 1.6em; font-size: 1.15em; color: #666; padding: 10px 15px; text-align: justify;}
.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#area6 {background:url(images/area4_bg.png) top repeat-x;	width: 100%; padding: 30px 0 40px;}
#area6 .bg {width: 86%; margin: auto;}
#area6 .title {font-size: 28px; color: #1b8fe2; font-weight: bold; text-align: center; margin: 20px 0 25px 0;}
#area6 .title + p {font-size: 18px; color: #1b8fe2; text-align: center; margin: 0 0 15px 0;}
#area6 .item {width: 50%; float: left; text-align: center; margin-bottom: 10px;}
#area6 .item img {width: 60%;}
#area6 .item .txt {color: #41413f; font-size: 20px; line-height: 25px; text-align: center;}
#footer {color: #fff; float: left; background: url(images/footerbg.png) center repeat-y;	font-size: 14px; line-height: 20px;	padding: 0 5%;}
#footer .wrapper {width: 100%; margin: auto;}
#footer div {width: 100%;}
#footer .logo {float: left;	text-align: center;	max-height: 70%;}
#footer .logo img {max-height: 90px;}
#footer .text {float: left;	text-align: justify;}
#footer .text_right .item {width: 33%; float: left; text-align: center; color: #fff; margin: 2% auto;}
#footer .text_right .item img {width: 40%;}
.spa {display: block;}

/* Smartphones ----------- */
@media (max-width : 1024px) and (orientation : landscape) {
  #area1 {background-position: 0 10px; background-size: 150%; height: 70vh;}
  #area1 .pic3 {top: 50%;}
  #area2 .pic2 {width: 50%; margin: 0 auto; text-align: center;}
  #area3 {background-size: 50%; height: 56vh;}
  #area6 .item {width: 33.333%; height: 250px;}
}
@media (max-width : 960px) and (orientation : landscape) {
  #area1 {height: 90vh; background-size: 160%; background-position: -140px 20px;}
  #area1 .pic3 {left: 7%; top: 46%;}
  #area3 {height: 70vh;}
}
@media (max-width : 823px) and (orientation : landscape) {
  #area1 .pic3 {top: 56%;}
  #area1 .pic3 img {width: 150px;}
  #area1 .firmware_download img {width: 350px;}
  #area3 .download img {height: 80px;}
  #area6 .item {height: 190px;}
  #area6 .item .txt {font-size: 15px;}
}
@media (max-width : 568px) and (orientation : landscape) {
  #area1 {background-position: -60px 20px;}
  #area1 .pic3 {left: 7%; top: 56%;}
  #area1 .pic3 img {width: 125px;}
  #area1 .firmware_download img {width: 250px;}
  #area1 div.title {top: 15%;}
  #area3 .download img {height: 66px;}
  #area6 .item {height: 150px;}
}


@media (max-width : 1024px) and (orientation : portrait) {
  #area1 {background-size: 200%; background-position: -80px 10px; height: 52vh;}
  #area2 .pic2 {width: 100%; margin: 0 auto; text-align: center;}
  #area2 .pic2 img {max-width: 70%;}
  #area6 .item {height: 250px;}
}
@media (max-width : 600px) and (orientation : portrait) {
  #area1 {background-size: 220%; background-position: -110px 10px; height: 40vh;}
  #area1 div.title {top: 15%;}
  #area1 .firmware_download img {width: 300px;}
  #area1 .pic3 {top: 45%; left: 5%;}
  #area1 .pic3 img {width: 150px;}
  #area3 {background-size: 78%; height: 35vh;}
  #area3 .download img {height: 80px;}
}
@media (max-width : 479px) and (orientation : portrait) {
  #area1 {background-size: 240%; height: 46vh;}
  #area1 div.title {top: 22%;}
  #area1 .firmware_download img {width: 200px;}
  #area1 .pic3 {top: 48%;}
  #area1 .pic3 img {width: 100px;}
  #area3 {background-size: 86%;}
  #area3 .download {top: 35%;}
  #area3 .download img {height: 60px;}
  #area4 .pic5 {width: 150px;}
  #area6 .item {height: 180px;}
  #area6 .item .txt {font-size: 15px;}
}
@media (max-width : 320px) and (orientation : portrait) {
  #area1 {height: 50vh;}
  #area1 .pic3 img {width: 90px;}
  #area3 {background-size: 78%;}
  #area3 .download {top: 30%;}
  #area3 .download img {height: 50px;}
  #area4 .pic5 {width: 100px;}
  #area6 .item {height: 150px;}
}