@charset "utf-8";

body		{font-size: 80%;}
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td , ul, li
{
	margin: 0px;
	padding: 0px;
	border:none;
	outline: 0px;
	font-weight:normal;
	font-style:normal;
	line-height: normal;
	color:#333333;
	 font-family:Ubuntu, Cambria, "微軟正黑體", "新細明體",  sans-serif;
}
html { scroll-behavior: smooth; }
input {font-family:Ubuntu, Arial,"微軟正黑體", "新細明體",  sans-serif;}
table {border-collapse: collapse; border-spacing: 0;}
ul 			{list-style:none;}
a img,
:link img,
:visited img {border:none;}

/*去除連結虛線框*/
a:focus {outline: none; } 

/*clearfix*/
.clearfix:after			{content: ".";  display: block;  height: 0; clear: both; visibility: hidden;}
.clearfix				{display: inline-block;} 
html[xmlns] .clearfix	{display: block;}
* html .clearfix		{height: 1%;}

/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0){ /* Chrome-specific styles */ }

/*A*/
a:link		{color:#0066CC;outline:none}
a:hover		{text-decoration:none;outline:none}
a:visited	{color:#0066CC;outline:none}


label				{cursor:pointer;}
input[type="text"]	{}


.btnstyle,
.btnstyle:link,
.btnstyle:visited	{border:1px solid #D4D4D4; padding:6px 15px; cursor:pointer; position:relative; border-radius: 2px; text-shadow: 0 0 0, 1px 1px 1px #fff; color:#666; font-family:"微軟正黑體"; font-size:13px; text-decoration:none;
background: #F6F6F8;
background: linear-gradient(#F6F6F8, #ECECEE);}
.btnstyle:hover		{color:#000;}
.btnstyle:active 	{position:relative; top:1px;}

.btnSumbit,
.btnSumbit:link,
.btnSumbit:visited 	{border:1px solid #263039; padding:6px 15px; cursor:pointer; position:relative; border-radius: 2px; text-shadow: 0 0 0, 1px 1px 1px #000; color:#fff; font-family:"微軟正黑體";font-size:13px; font-weight:bold; text-decoration:none;
background: #404E57;
background: linear-gradient(#404E57, #2F3C45);}
.btnSumbit:hover	{color:#ccc;}
.btnSumbit:active 	{position:relative; top:1px;}


.launchBtn:link,
.launchBtn:visited	{display:block; background-color:#009adf; font-size:14px; float:left; padding:10px 40px 6px 40px; color:#fff; text-decoration:none; margin-top:-5px; position:relative; z-index:1; transition-duration: 0.3s;}
.launchBtn:hover	{background-color:#0086BF;}
.launchBtn:active	{position:relative; top:1px;}
.launchBtn img		{margin-left:15px;}

a.backBtn:link,
a.backBtn:visited			{background:url(../images/icon_back.png) no-repeat left; font-size:22px; color:#9c3; text-decoration:none; padding:10px; display:inline-block; padding-left:40px;  margin:20px 0 20px 0; }
a.backBtn:hover				{}



h1		{font-size:28px; line-height:120%; margin:10px 0;font-weight:bold;}
h2		{font-size:14px; line-height:180%; margin:5px 0;}
h3		{font-size:20px; line-height:180%; margin:20px 0 10px 0; font-weight:bold; color:#3399cc}
p		{font-size:15px; line-height:180%; margin:20px 0;}
em		{font-size:15px; color:#000; line-height:180%; font-weight:bold;}

.content ul		{margin-left:25px;}
.content li		{list-style:outside disc; margin:15px 0; font-size:15px;} 
.content .innerWrapper	{margin-top:50px;}
.content li ol			{margin:20px 0; padding:0;}
.content li ol li		{list-style:decimal inside; margin:10px 0; padding:5px 10px; line-height:160%; background:#fff; border-radius:3px;}
.content span.note		{display:block; margin:10px 0px; font-size:12px; color:#F60; padding:5px 10px; font-family:Ubuntu,"新細明體"}

/*main*/
body							{background-color:#F3F3F3;}
body#index						{background-color:#ffffff; background-color:#F3F3F3;}
.header							{width:100%; position:relative; background:#fff url(../images/headerBg.png) repeat-x bottom; /*border-bottom:1px solid #ccc; -webkit-box-shadow: #ccc 0px 2px 5px; -moz-box-shadow: #ccc 0px 2px 5px; box-shadow: #ccc 0px 2px 5px;*/ z-index:999; background:#fff;}
.header	 						{position:fixed;}
.header .wrapper					{width:780px; margin:0 auto;}
.header .logo					{display:inline-block; margin-top:5px; width:201px;}
.header .logo a					{display:inline-block; }
.header .navi					{float:right;}
.header .navi li					{float:left; margin-left:20px;}
.header .navi li a:link,
.header .navi li a:visited		{display:block; font-size:16px; font-family:"微軟正黑體", "新細明體"; text-decoration:none; padding:25px 20px 15px 20px; color:#333; line-height:200%;  border-bottom:8px solid #fff;   -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;}
.header .navi li a:hover			{color:#000; border-bottom:8px solid #f3f3f3; background:#fff;}
.header .navi_btn:link,
.header .navi_btn:visited		{display:block; background:#fff url(../images/mobile_menu.png) no-repeat center; width:40px;height:40px; background-size:40px; position:absolute; right:0; top:0; padding:10px 10px; display:none;}

#index .headerBot				{background:#fff; position:relative!important; text-align:center; padding:50px 0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; background:#333333;  border-top:0px solid #000; z-index:99; height:260px; padding-top:60px;}
#index .headerBot .logo			{text-align:center; width:100%; float:none;}
#index .headerBot .logo a img		{width:415px;}
#index .header.relativeTop		{position:relative!important; top:-80px; }
#index .header.fixedTop			{position:fixed!important; }

h1.imgTitle						{filter:alpha(opacity=80);opacity:0.8;zoom:1;} 

.nav-button.active				{border-bottom:8px solid #FF6633!important; color:#000; }

.container						{width:100%; margin-bottom:50px; position:relative!important; top:auto!important; }
.container.pd-container			{padding:100px 0 100px 0; margin-bottom:0px; /*position:relative!important; top:auto!important;*/  -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;}
.container .wrapper				{width:780px; margin:auto; text-align:center; padding-top:100px; width:960px;}
.container.pd-container .wrapper{padding:0px; margin-top:0;}
.pd-container .intro				{float:left; width:320px;}
.pd-container .intro h1			{float:left; margin:10px 0!important;}
.pd-container .intro h2			{text-align:left;}
.pd-container .intro .box		{float:left; text-align:left; position:relative; z-index:2;}
.pd-container .intro .box h3		{font-size:24px; line-height:120%; font-weight:normal; margin:5px 0; color:#fff; text-shadow: 0 0 0, 0px 0px 5px #000;}
.pd-container .intro .box p		{margin:5px 0; font-size:15px; line-height:180%; color:#fff; text-shadow: 0 0 0, 0px 0px 5px #333;}
.pd-container .added				{float:left; clear:both; margin:15px 0; filter:alpha(opacity=30);opacity:0.3;zoom:1;}

.introBtn:link,
.introBtn:visited				{display:block; float:left; width:100%;-moz-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;-o-transition-duration: 0.3s; transition-duration: 0.3s; }
.introBtn:hover					{filter:alpha(opacity=70);opacity:0.7;zoom:1; position:relative; top:-2px;}

#pd-justaple					{background:#1e232e url(../images/justaple_bg.jpg) no-repeat 20% bottom; height:500px; }
#pd-justaple h1					{position:relative; top:-60px; }
#pd-justaple h2					{position:relative; background:url(../images/p_justaple_logo.png) no-repeat; display:inline-block; width:255px; height:119px;}

#pd-justaple .intro				{float:right; margin-top:80px;}
#pd-annotator					{background:#DFD097 url(../images/annotator_bg.png) no-repeat 90% bottom; height:300px;}
#pd-annotator .intro				{float:left; width:440px}
#pd-annotator h3,					
#pd-annotator p					{text-shadow:none; color:#333;}


.sidebar .navi					{list-style: none; position: fixed; top:100px;  right:20px; z-index: 999; display:none;}
.sidebar .navi li					{margin: 0 0 10px 0; float: right; clear: both;}
.sidebar .navi li a 				{display: block;  color:#FFF; text-decoration:none; font-size:13px;}
.sidebar .navi li a span			{display: block; float:left; width: 10px; height: 10px; border-radius: 10px; background-color: white; border: solid 2px white; margin-right:10px;}
.sidebar .navi li a:hover			{color:#999;}
.sidebar .navi li a:hover span		{background:#999;}
.sidebar .navi li a.current		{color:#9c3;}
.sidebar .navi li a.current span  	{background:#9c3;}


#index .container	h1			{margin:0px 0 50px 0; text-align:center;}
#index .container	h1 img		{width:300px;}
.container .innerWrapper		{width:100%;  display: inline-block;}

#solution {
	/*background:url(../images/lineBg.png) repeat;*/
	height: auto; /* 從固定高度 1100px 改為自適應 */
	margin-bottom: 0px;
}
#solution .column {
	float: left;
	height: 200px;
	width: 192px; /* 調整為一排5個，每個寬度縮小：960px ÷ 5 = 192px */
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}
#solution .column a:link,
#solution .column a:visited		{display:block; text-decoration:none; color:#333; text-align:center;}
#solution .column a img {
	width: 100px;
	height: 100px;
	padding: 5px;
	border-radius: 80px;
}
#solution .column a:hover img		{position:relative; top:-2px; transition-duration: 0.3s;
transform: scale(1.05);
transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);}

#solution .column a.sv1-btn:hover img	{border:1px solid #cccccc;}
#solution .column a.sv2-btn:hover img	{border:1px solid #009A7F;}
#solution .column a.sv3-btn:hover img	{border:1px solid #FF981F;}
#solution .column a.sv4-btn:hover img	{border:1px solid #99CC33;}
#solution .column a.sv5-btn:hover img	{border:1px solid #5AC3D6;}
#solution .column a.sv6-btn:hover img	{border:1px solid #FF9999;}
#solution .column a.sv7-btn:hover img	{border:1px solid #0889C9;}
#solution .column a.sv8-btn:hover img	{border:1px solid #FA4D4D;}
#solution .column a.sv9-btn:hover img	{border:1px solid #003A66;}

#solution .column a p			{font-size:18px; margin-top:20px; line-height:140%;}

#casestudy 						{padding-bottom:50px;}
#casestudy .innerWrapper 		{width:100%; letter-spacing:20px;}
#casestudy .innerWrapper ul 		{text-align:left;}
#casestudy .innerWrapper li {
	display: inline-block;
	width: 220px;
	height: 153px;
	background: transparent;
	background: #ececec;
	margin-top: 20px;
	border-radius: 5px;
	overflow: hidden;
	text-align: center;
	position: relative;
}
#casestudy .innerWrapper li:nth-child(4n)	{margin-right:0;}
#casestudy .innerWrapper li:hover	{-webkit-mask-position-x: 0px;}
#casestudy .innerWrapper li > img {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	max-height: 80%;
	max-width: 80%;
	vertical-align: middle;
	margin: 0;
}
#casestudy .caseBtn:link,
#casestudy .caseBtn:visited {
	display: flex; /* 使用flex布局實現更可靠的居中 */
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
	width: 100%;
	height: 100%;
	background: #fff url(../images/mask_gray.png) no-repeat;
	background-position: -560px 0;
	-moz-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
#casestudy .caseBtn img {
	max-height: 80%;
	max-width: 80%;
	margin: 0;
	/* 移除transform，避免在小螢幕上造成問題 */
}
#casestudy .caseBtn:link img,
#casestudy .caseBtn:visited iimg	{filter:alpha(opacity=100);opacity:1.0;zoom:1;}
#casestudy .caseBtn:hover		{background-position: 0px;}
#casestudy .caseBtn:hover img	{position:relative;}
#casestudy .caseBtn:active		{position:relative; top:1px;}

#about							{background:url(../images/about_bg.jpg) no-repeat 50% 0; padding-bottom:50px;}
#about .innerWrapper .left		{display: inline-block; margin-right:25px; vertical-align: top;}
#about .innerWrapper .right		{display: inline-block; width:560px; text-align: left;}
#about .innerWrapper .right h2	{color:#fff; font-size:22px; font-weight:bold;}
#about .innerWrapper .right p	{color:#fff; line-height:180%; font-size:15px; text-align:justify;} 
#team  .wrapper					{width:780px; margin:0 auto;}
#team .innerWrapper				{letter-spacing: -5px; vertical-align: top;}
#team .innerWrapper .pbox		{display: inline-block; width:195px; height:220px; position:relative; vertical-align: top; -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;}
#team .innerWrapper .pbox2		{width:390px;}
#team .innerWrapper .pbox span	{float:left; width:100%; height:100%; position: absolute; top: 0; left: 0; }

#team .innerWrapper .pbox img	{display: block; }

.pbox span:nth-child(2) {
  -webkit-transition: -webkit-mask-position 1s ease;		
  -webkit-mask-image: url(../images/mask.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position-x: -560px;
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.pbox span:nth-child(2):hover {-webkit-mask-position-x:0px;}

.pbox-infor						{background:url(../images/lineBg.png) repeat!important; background:#9c3!important;}
.pbox-infor a:link,
.pbox-infor a:visited			{margin:5px 10px; width:80%; padding:5px; padding-left:30px; word-break:break-all; color:#036; font-size:15px; text-decoration:none; display:block; float:left;}
.pbox-infor a:hover				{filter:alpha(opacity=80);opacity:0.8;zoom:1;}
.pbox-infor .mail				{background:url(../images/icon_mail.png) no-repeat left 5px;}
.pbox-infor .fb					{background:url(../images/icon_fb.png) no-repeat left top;}
.pbox-word						{background:#3399CC!important;}

#contact						{text-align: center;}
#contact .wrapper				{width:780px; margin:0 auto; display: inline-block;  letter-spacing: -5px; vertical-align: Top;}
#contact p						{font-size:28px; margin:10px 0; font-family:"Chaparral Pro", Cambria;}
#contact .telfax				{width:390px; display: inline-block; background:#EE791E; text-align:center; height:80px; padding:40px 0; letter-spacing:normal;}
#contact .telfax p				{color:#fff; }
#contact .mail					{width:390px; display: inline-block; background:#ffffff; text-align:center; height:160px;  position:relative; letter-spacing:normal;  vertical-align: Top;}
#contact .mail a:link,
#contact .mail a:visited		{font-size:28px; color:#333; text-decoration:none; height:160px; line-height:160px; display:block;font-family:"Chaparral Pro", Cambria; 
  background:url(../images/mask_orange.png) no-repeat;
  background-position: -560px 0;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#contact .mail a:hover			{background-position:0px 0px; color:#fff;}
#contact .adress				{width:780px; float:left; text-align:center; height:80px; padding:20px 0; letter-spacing:normal;}
#contact .adress p				{font-size:22px; letter-spacing:normal;}
#contact .adress span			{font-size:20px; font-family:"Chaparral Pro", Cambria;}
#contact .gmap					{margin-bottom:10px;}
#contact .form					{background:#333333; width:760px; padding:10px;  display: inline-block; letter-spacing:normal;}
#contact .form p				{font-size:15px; margin:10px 0 15px 0; color:#fff;}
#contact .form p label 	       	{font-size:15px; margin:0 0 10px 0; color:red ;}
#contact .textInput,
#contact textarea				{background:#fff; padding:20px 10px; font-size:16px; color:#666; border:0px; width:355px; display: inline-block;}
#contact .textInput:focus,
#contact textarea:focus			{background:#FFFFCC;}
#contact .form-mane				{}
#contact .form-mail				{margin-left: 4px;}
#contact .form-content			{width:740px; margin-top:10px; height:160px;}
#contact .sumbitBtn				{background:#99cc33; border:0; font-size:20px; color:#fff; float:right; padding:15px 25px; cursor:pointer; margin-top:-56px; margin-right:0px; z-index: 99; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0;}
#contact .sumbitBtn:hover		{background:#7CA529;}
#contact .sumbitBtn:active		{position:relative; top:1px;}
#contact .textInput.error,
#contact textarea.error			{}

label.error						{background:#f33; color:#fff!important; font-size:15px!important; padding:3px 10px;}

#media								{padding:0; margin:0;}
#media .wrapper						{padding:0;}
#media .innerWrapper				{}
#media .innerWrapper ul				{}
#media .innerWrapper li				{font-size:15px; margin:15px 0; line-height:50px; height:50px; /* -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;  -webkit-box-shadow: #ccc 0px 1px 2px; -moz-box-shadow: #ccc 0px 1px 2px; box-shadow:#ccc 0px 1px 2px; position:relative;  behavior:url(css/PIE.htc); position:relative; */text-indent:20px;}
#media .innerWrapper li:hover		{/*-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;*/}
#media .innerWrapper li span		{color:#a0a0a0; font-size: 16px; font-weight:bold; border-right:1px solid #eee; padding-right:15px; display:block; line-height:50px; float:left;}
#media .innerWrapper li a:link,
#media .innerWrapper li a:visited	{display:block; text-align:left; cursor:pointer; color:#333;background:#fafafa; background:#fff; text-decoration:none; transition: 0.2s; border-radius: 8px; box-shadow:#ccc 0px 1px 2px; position:relative; }
#media .innerWrapper li a:hover		{background:#EDEDED; margin-left:10px;}
#media .innerWrapper li.text       {display:block; cursor:pointer; color:#333;background:#fafafa; text-decoration:none; transition: 0.3s; border-radius: 8px; box-shadow:#ccc 0px 1px 2px; position:relative; }

#award								{padding:0;}
#award .wrapper						{padding:0;}
#award .innerWrapper				{}
#award .innerWrapper ul				{}
#award .innerWrapper li				{font-size:15px; margin:15px 0; text-align:left;  line-height:50px; height:50px; /* -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;  -webkit-box-shadow: #ccc 0px 1px 2px; -moz-box-shadow: #ccc 0px 1px 2px; box-shadow:#ccc 0px 1px 2px; position:relative;  behavior:url(css/PIE.htc); position:relative; */text-indent:20px;}
#award .innerWrapper li:hover		{/*-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;*/  cursor:default!important;}
#award .innerWrapper li span		{color:#a0a0a0; font-size:16px; font-weight:bold; border-right:1px solid #eee; padding-right:15px; display:block; line-height:50px; float:left;}
#award .innerWrapper li a:link,
#award .innerWrapper li a:visited	{display:block; cursor:pointer; color:#333;background:#fafafa; text-decoration:none; transition: 0.3s; border-radius: 8px; box-shadow:#ccc 0px 1px 2px; position:relative;}
#award .innerWrapper li a:hover		{background:#EDEDED; margin-left:10px;}
#award .innerWrapper li.text       {display:block; cursor:pointer; color:#333;background:#fafafa; text-decoration:none; transition: 0.3s; border-radius: 8px; box-shadow:#ccc 0px 1px 2px; position:relative; }

/* 基本設置：顯示新聞區塊 */
#news {
	height: auto !important;
	display: block !important;
	padding: 0 !important;
	margin-bottom: 50px !important;
}

/* 隱藏舊的結構元素 */
#news .scrollable,
#news .items,
#news .column,
#news a.browse,
#news .newsNavi {
	display: none !important;
}

/* 保持與其他區塊一致的 wrapper 樣式 */
#news .wrapper {
	width: 780px;
	margin: auto;
	padding-top: 70px;
}

/* 使 innerWrapper 與 award 區塊一致 */
#news .innerWrapper {
	margin: 30px 0;
	float: left;
	width: 100%;
	height: auto;
}

/* 列表樣式 */
#news .innerWrapper ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 列表項目樣式 - 與 award 區塊完全一致 */
#news .innerWrapper li {
	font-size: 15px;
	margin: 15px 0;
	text-align: left;
	line-height: 50px;
	height: 50px;
	text-indent: 20px;
}

/* 非鏈接項目的樣式 */
#news .innerWrapper li.text {
	display: block;
	cursor: pointer;
	color: #333;
	background: #fafafa;
	text-decoration: none;
	transition: 0.3s;
	border-radius: 8px;
	box-shadow: #ccc 0px 1px 2px;
	position: relative;
}

/* 日期標籤樣式 */
#news .innerWrapper li span {
	color: #a0a0a0;
	font-size: 16px;
	font-weight: bold;
	border-right: 1px solid #eee;
	padding-right: 15px;
	display: block;
	line-height: 50px;
	float: left;
}

/* 鏈接樣式 */
#news .innerWrapper li a:link,
#news .innerWrapper li a:visited {
	display: block;
	cursor: pointer;
	color: #333;
	background: #fafafa;
	text-decoration: none;
	transition: 0.3s;
	border-radius: 8px;
	box-shadow: #ccc 0px 1px 2px;
	position: relative;
}

/* 鏈接懸停效果 */
#news .innerWrapper li a:hover {
	background: #EDEDED;
	margin-left: 10px;
}


#footer 					{height:auto!important;}
#footer .wrapper			{text-align:left; width:780px;}
#footer .wrapper	 img		{width:190px;}

/*news-page*/
#news-page						{}
#news-page .innerWrapper		{margin:30px 0; float:left; width:100%; height:auto;}
#news-page .innerWrapper img	{margin:20px 0;}

/*solution page*/
.content						{width:100%; padding:50px 0;}
.content.pd-container			{padding:100px 0; position:relative!important; top:auto!important;}
.content .wrapper				{width:780px; margin:auto;  padding-top:70px;  padding-bottom:50px;}

.leftpane						{float:left; width:200px; padding-top:80px;}
.rightpane						{float:left; width:580px;}

/*casestudy-page*/
#casestudy-page						{}
#casestudy-page .innerWrapper img	{margin:25px 0;  /*-webkit-box-shadow:#999 0px 1px 3px; -moz-box-shadow:#999 0px 1px 3px; box-shadow:#999 0px 1px 3px;*/ }

.gallery					{background:#1C2026; float:left; width:100%; clear:both; height:406px; margin-top:80px;}
.gallery .inner				{width:780px; margin:auto;  height:406px;}
.gallery img.logo			{float:left;}
.gallery img.main			{float:right; position:absolute; right:-80px; top:60px}
.gallery .launchBtn:link,
.gallery .launchBtn:visited	{background-color:#000;  background:#FF6633; font-size:16px; float:left; padding:10px 35px 6px 35px; margin-top:-5px; position:absolute; top:360px; margin-left:100px; z-index:1;}
.gallery .launchBtn:hover	{background-color:#333;}
.gallery .launchBtn:active	{top:362px;}
.gallery .launchBtn img		{margin:0 10px 5px 0;}


/*Back to top button */
#back-top 		{position: fixed; bottom: 50px; right:20px; display:block; float:right; z-index:999;  } 
#back-top a 		{display:block; width:70px; height: 60px; display: block; text-align: center; background:#272e35 url(../images/icon_top.png) no-repeat center; text-decoration: none; color: #FFF; border-radius: 6px; transition: 0.5s; position:relative; opacity:0.9; }
#back-top a:hover 	{background:#99cc33 url(../images/icon_top.png) no-repeat center; display: block; margin-bottom:12px; font-size:0px; transition: 0.5s; opacity:1.0; }


/*tooltip*/
.tooltipStyle 		{display:none; z-index:1; background:url(../images/tooltip_arrow.png) no-repeat bottom; padding-bottom:7px;}
.tooltipStyle span	{background:url(../images/tooltipBg.png) repeat; font-size:11px; padding:5px 10px; color:#FFFFFF; border-radius: 3px; position:relative; max-width:100px; display:block;}
.tooltip 	 		{background:url(../images/tooltipBg.png) repeat; font-size:11px!important; padding:5px 8px!important; color:#FFFFFF; border-radius: 3px; position:relative; max-width:120px; display:block; height:auto!important; width:auto!important; text-align:center;}

/*popupStyle*/
.popupStyle 				{min-width:620px; min-height:400px; padding:20px; text-align:left; background:#fff; }

.popupStyle h1			{font-family:Arial,"微軟正黑體"; font-weight:normal; font-size:26px; text-align:center; border-bottom:0px solid #eee; text-align:left; padding-bottom:15px;}
.popupStyle .inner		{padding:0px;}
.popupStyle .inner img	{display:inline-block; margin:10% 20px 0 20px; float:left; width:120px; height:120px; padding:5px; border-radius:80px;}
.popupStyle p			{font-size:15px;}
.popupStyle ul			{font-size:15px; display:inline-block; width:400px;}
.popupStyle ul li			{font-size:16px; margin:15px; list-style:disc outside; line-height:160%;}
.popupStyle ul li ul		{margin-left:20px;}
.popupStyle ul li ul li		{font-size:16px;}


#sv1-pane  img	{border:1px solid #cccccc; padding:5px;}
#sv2-pane  img	{border:1px solid #009A7F; padding:5px;}
#sv3-pane  img	{border:1px solid #FF981F; padding:5px;}
#sv4-pane  img	{border:1px solid #99CC33; padding:5px;}
#sv5-pane  img	{border:1px solid #5AC3D6; padding:5px;}
#sv6-pane  img	{border:1px solid #FF9999; padding:5px;}
#sv7-pane  img	{border:1px solid #0889C9; padding:5px;}

@media screen and (max-width: 1300px) {
	.gallery img.main			{right:-300px;}
}

@media screen and (max-width: 1400px) {
#pd-justaple		{background:#1e232e url(../images/justaple_bg.jpg) no-repeat -40% bottom; height:500px;}
#pd-annotator		{background:#DFD097 url(../images/annotator_bg.png) no-repeat 125% bottom; height:300px;}

}

@media screen and (max-width: 1100px) {
#pd-justaple		{background:#1e232e url(../images/justaple_bg.jpg) no-repeat -300px bottom; height:500px;}
#pd-annotator		{background:#DFD097 url(../images/annotator_bg.png) no-repeat 200% bottom; height:300px;}

} 


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

@media screen and (max-width: 767px) {
	.header .navi {
		display: none;
		float: none;
		width: 100%;
		background: #fff;
		top: 60px;
		position: absolute;
	}

	.header .navi li {
		float: none;
		margin: 0;
		display: inline-block;
		text-align: center;
		width: 100%;
		border-bottom: 1px solid #eee;
	}

	.header .navi li a:link,
	.header .navi li a:visited {
		display: inline-block;
		width: 100%;
		float: none;
		text-align: center;
		border: 0px;
		padding: 10px 0px 10px 0px;
	}

	.header .navi li a.current {
		border: 0px !important;
	}

	.header .navi_btn:link,
	.header .navi_btn:visited {
		display: block;
	}

	.header .logo {
		width: 180px;
		margin: 10px;
	}

	.header .logo a img {
		width: 130px;
	}

	.header .wrapper {
		width: 100%;
	}

	#index .headerBot {
		padding-bottom: 0;
		height: 240px;
	}

	#index .headerBot .logo a img {
		width: 300px;
	}


	#index .container h1 {
		margin: 0px 0 20px 0;
	}

	.container {
		margin: 0;
		overflow: hidden;
	}

	.container .wrapper {
		width: 100%;
	}

	#solution {
		height: auto;
	}

	#solution .column {
		width: 20%; /* 在較小螢幕上仍然保持一排5個 */
	}

	#solution .column a p {
		font-size: 14px; /* 較小的字體以適應較窄的空間 */
	}

	#news {
		padding-top: 60px;
	}

	#news .innerWrapper {
		width: 90%;
		padding-top: 30px;
	}

	#news .innerWrapper li {
		height: auto;
		line-height: 160%;
		text-indent: 0;
	}

	#news .innerWrapper li.text {
		color: #000;
		background: transparent;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	#news .innerWrapper li span {
		border: 0;
		line-height: 160%;
		display: block;
		clear: both;
		width: 100%;
		margin: 5px 0;
	}

	#news .innerWrapper li a:link,
	#news .innerWrapper li a:visited {
		padding: 10px;
	}

	#news .innerWrapper li a:hover {
		background: #EDEDED;
		margin-left: 0px;
	}

	#about .innerWrapper .right {
		width: 90%;
		margin: 20px auto;
		text-align: center;
	}

	#about .innerWrapper .left {
		margin: 0;
		display: none;
	}

	#team .wrapper {
		width: 100%;
		margin-top: 0px;
		padding-top: 20px
	}

	#team .innerWrapper .pbox {
		height: auto;
		overflow: hidden;
	}

	#team .innerWrapper .pbox2 {
	}

	#team .innerWrapper .pbox span {
		float: none;
		display: inline-block;
		position: relative;
		width: auto;
		height: auto;
	}

	#team .innerWrapper .pbox img {
		width: 100%;
	}

	#team .innerWrapper .pbox-word {
		display: none;
	}

	#team .innerWrapper .pbox-infor {
		display: none;
	}

	.pbox span:first-child {
		display: none !Important;
	}

	.pbox span:nth-child(2) {
		display: block;
		-webkit-mask-position-x: 0px;
	}


	#award {
		padding-top: 60px;
	}

	#award .innerWrapper {
		width: 96%;
	}

	#award .innerWrapper li {
		height: auto;
		line-height: 140%;
		text-indent: 0;
		background: #fff;
		text-align: center;
	}

	#award .innerWrapper li.text {
		color: #000;
		background: transparent;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	#award .innerWrapper li span {
		border: 0;
		line-height: 140%;
		display: block;
		clear: both;
		width: 100%;
		margin: 5px 0;
	}

	#award .innerWrapper li a:link,
	#award .innerWrapper li a:visited {
		padding: 10px;
	}

	#contact .wrapper {
		width: 100%;
	}

	#contact .telfax {
		width: 50%;
	}

	#contact .mail {
		width: 50%;
	}

	#contact p {
		font-size: 20px;
	}

	#contact .mail a:link,
	#contact .mail a:visited {
		font-size: 20px;
	}

	#contact .adress {
		width: 90%;
		height: auto;
		float: none;
		margin: auto;
	}

	#contact .adress p {
		line-height: 150%;
		font-size: 18px;
	}

	#contact .adress span {
		font-size: 12px;
		line-height: 150%;
		font-family: Arial;
	}

	#contact .form {
		width: 100%;
		padding: 0;
		background: #eee;
		margin-top: -10px;
	}

	#contact .form p {
		margin: 20px 10px 10px 10px;
		font-size: 13px;
		color: #000;
	}

	#contact .form form {
		display: block;
		width: 90%;
		margin: auto;
		overflow: hidden;
	}

	#contact .mail a:link,
	#contact .mail a:visited {
		font-size: 28px;
		background-position: 0px 0px;
		color: #fff;
	}

	#contact .form-mail {
		margin: 0;
	}

	#contact .textInput,
	#contact textarea {
		padding: 15px 10px 15px 10px;
		width: 100%;
		margin-bottom: 10px;
	}

	#contact .form-content {
		width: 100%;
		margin-top: 0;
	}

	#contact .sumbitBtn {
		float: none;
		margin: 0 0 10px 0;
		padding: 15px 20px;
		width: 100%;
		font-size: 18px;
	}

	#footer .wrapper {
		width: 100%;
		text-align: center;
	}

	#pd-justaple {
		background: #1e232e url(../images/justaple_bg.jpg) no-repeat bottom;
		height: 520px;
		background-size: 420px;
		padding-top: 80px;
	}

	#pd-justaple h1 {
		position: relative;
		top: -60px;
	}

	#pd-justaple h2 {
		position: relative;
	}

	#pd-justaple h2 {
		position: relative;
		background: url(../images/p_justaple_logo2.png) no-repeat center;
		background-size: 200px;
	}

	#pd-justaple .intro h2 img {
		width: 200px;
	}

	#pd-justaple .intro .box {
		float: none;
		text-align: center;
	}

	#pd-justaple .intro .box p {
		filter: alpha(opacity=50);
		opacity: 0.5;
		zoom: 1;
	}

	#pd-justaple .intro a {
		text-decoration: none;
	}

	#pd-annotator {
		background: #DFD097 url(../images/annotator_bg.png) no-repeat bottom;
		height: 300px;
		background-size: 300px;
		padding-top: 50px;
	}

	#pd-annotator .intro {
		width: 320px;
	}

	#pd-annotator h2 img {
		width: 280px;
	}

	#pd-annotator h3,
	#pd-annotator p {
		text-shadow: none;
		color: #333;
	}

	.pd-container .intro {
		float: none !important;
		margin-top: 0px !important;
		margin: auto;
		width: 90% !important;
	}

	.pd-container .intro h2 {
		text-align: center;
	}

	.pd-container .intro .box h3 {
		font-size: 18px;
	}

	.pd-container .intro .box p {
		font-size: 13px;
	}

	.pd-container .added {
		float: none;
		margin: 15px 0;
		filter: alpha(opacity=100);
		opacity: 1.0;
		zoom: 1;
	}

	.pd-container .added img {
		width: 160px;
	}


	#contact .gmap iframe {
		width: 100%;
		height: 160px
	}

	.content {
		width: 90%;
		margin: auto;
	}

	.content .wrapper {
		width: 100%;
	}

	#news-page .innerWrapper img {
		width: 100%;
	}

	#about .wrapper {
		padding-top: 30px;
	}


	/*popupStyle*/
	#fancybox-wrap {
		margin-left: 20px;
	}

	.popupStyle {
		min-width: initial;
		text-align: center;
	}

	.popupStyle h1 {
		font-size: 24px;
		text-align: center;
	}

	.popupStyle .inner img {
		margin: 10px auto 0 auto;
		float: none;
	}

	.popupStyle p {
		font-size: 15px;
	}

	.popupStyle ul {
		font-size: 15px;
		width: 100%;
		margin-top: 10px;
	}

	.popupStyle ul li {
		font-size: 15px;
		margin: 5px 10px;
		text-align: left;
	}

	.popupStyle ul li ul {
		margin-left: 10px;
	}

	.popupStyle ul li ul li {
		font-size: 15px;
	}

	span.fancyb-ico {
		display: none
	}

	#fancybox-left,
	#fancybox-right {
		display: none !important
	}

	#fancybox-close {
		display: none !important
	}

	#casestudy .innerWrapper {
		letter-spacing: 10px;
	}

	#casestudy .innerWrapper ul {
		text-align: center;
	}

	#casestudy .innerWrapper li {
		margin-top: 10px;
	}

	#casestudy .innerWrapper li img {
		width: 90%;
		margin: 0;
	}

	#casestudy .innerWrapper li:nth-child(n) {
		margin-right: 0;
	}

	#media {
		padding-top: 80px;
	}

	#media .innerWrapper {
		width: 90%;
		padding-top: 30px;
	}

	#media .innerWrapper li {
		height: auto;
		line-height: 160%;
		text-indent: 0;
	}

	#media .innerWrapper li span {
		float: none;
		line-height: 160%;
	}

	#media .innerWrapper li a:link,
	#media .innerWrapper li a:visited {
		padding: 10px;
	}

	#media .innerWrapper li a:hover {
		background: #EDEDED;
		margin-left: 0px;
	}

	.gallery {
		padding-bottom: 50px;
		height: auto;
		margin-top: 30px;
	}

	.gallery .inner {
		width: 100%;
		text-align: center;
		height: auto;
	}

	.gallery img.main {
		display: none;
	}

	.gallery .launchBtn:link, .gallery .launchBtn:visited {
		float: none;
		width: 160px;
		margin: auto;
		position: relative;
		top: auto;
	}

	.gallery img.logo {
		float: none;
		width: 280px;
	}

	#casestudy-page .innerWrapper img {
		width: 100%;
	}
}
@media screen and (max-width: 480px) {
    #solution .wrapper                   {width:90%; padding-top:50px;}
	#solution .column {
		width: 50%; /* 在更小的螢幕上，改為一排2個 */
	}
    #solution .column a img		 {width: 100px; height: 100px;}
	#solution .column a p		 {font-size:16px; margin-top: 10px;}

    #team .innerWrapper .pbox        {width:50%;}
    #team .innerWrapper .pbox2	 {width:100%;}

    #contact .telfax                 {width: 100%;}
    #contact .mail                   {width: 100%;}

    #contact p                       {font-size: 28px;}
    #contact .mail a:link,
    #contact .mail a:visited         {font-size: 28px;}


	#casestudy .innerWrapper li		{margin-top:5px; width:140px; height:100px; }
	#casestudy .innerWrapper li img	{width:100%; margin:0;}
	#casestudy .innerWrapper li:nth-child(n)	{margin-right:0;}
	#casestudy .caseBtn:link,
	#casestudy .caseBtn:visited		{display:block; width:180px; height:125px; width:100%; height:auto;  line-height:153px;}
	#casestudy .caseBtn img			{width:100%;}

}