@charset "utf-8";
/* CSS Document */






/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



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

body,div,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,select{
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

.css3button {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: 7px 7px;
	background: -moz-linear-gradient(
		top,
		#fff3db 0%,
		#ffc821 25%,
		#ff3c00);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fff3db),
		color-stop(0.25, #ffc821),
		to(#ff3c00));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #b85f00;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
}



/* index 
---------------------------------------------*/
#web { display: none;}
div#mbtn { z-index: 99; position: absolute; right: 25%; top: 60%; display:block;}
div#mbtn a { margin-left: 10px; text-decoration: none;}
#mIndex { display:block; margin:0; padding:0;}
#mIndex img { width: 113%;}

/* 
---------------------------------------------*/
table#wrapper {
	margin: 0;
	padding: 0;
	margin: 0 auto; /* 設定為自動調整邊界 */
	background: #ffffff url(../images/bg.jpg) center top no-repeat;
	border-collapse:collapse;
	border-spacing:0;
	width: 100%;
}

.bgLeft{ display: none;}
/* Top
---------------------------------------------*/
div#Top { display: none;}

h1#headerLogo { display:block; height: auto;}
h1#headerLogo img { width: 70%; margin-top: 7px;}

#content { background: url(../images/menuBg02.gif);}

/* menu
---------------------------------------------*/
/*#menuList{ display: none;}*/
div.mline{ display: block; background: #00aaee; height: 40px; margin: 7px 0;}
div.toggle {
    position: absolute;
    top: 11px;
    right: 5px;
    display: block;
    width: 25px;
    height: 25px;
    background: url(../images/mobile/icon.png) -48px -35px no-repeat;
    background-size: 118px;
    text-indent: -9999px;
    overflow: hidden;
	cursor:pointer;
	z-index: 999;
}

.nav {
	display: none;
    position: absolute;
    top: 36px; right: 3px; width: 70%;
}
.toggle { display: inline-block;}


.nav ul#menuList {}
.nav ul#menuList li {
	display: block; float: none;
	border-top: 1px solid #f0f0f0;
}
.nav ul#menuList li a{
	background: #00b4ed url(../images/mobile/icon_menu.png) no-repeat;
	background-position: 20px 15px;
	text-indent: 0px;
	color: #fff; padding: 9px 0 9px 38px;
	width: 98%; height: auto;
	text-shadow: 0 1px 1px #666666;
    font-size: 123%;
	text-decoration: none;
}
.nav ul#menuList li:first-child a{
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
.nav ul#menuList li:last-child a{
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
}
.nav ul#menuList li a:hover{ background: #00b4ed;}
.nav li{}
.nav li a{}
.nav li:hover ul {
	position: relative;
	display: block;
}
.nav li:hover ul li{}
.nav li:hover ul li a{}
.arrow-bottom {}




/* about_main
---------------------------------------------*/
#mainAbout{
	float: none;
	width: 98%;
	overflow auto;
	background: none;
}
#mainAboutBg{
	background: none;
}
#mainAboutBg ul { width: 98%;}
#mainAboutBg li:nth-child(odd) img { display: none;}
#mainAboutBg li:nth-child(odd) span { display: block; padding: 15px 15px 0 15px; font-weight: bold; font-size: 145%; line-height: 115%; color: #00aaee;}
#mainAboutBg li:nth-child(even) img.mob { width: 100%;}
.aboutCont{
	padding: 15px;
	width: auto;
	/*text-align:justify; text-justify:inter-ideograph;*/
	color: #5b5a5a;
	font-size: 130%;
	line-height: 170%;
}





/* about_main
---------------------------------------------*/
#footer {display: none;}
#footerIcon { display: none;}
ul#footerCopyright { display: none;}
div#mob_footer {
	display: block; font-size: 100%; text-align: center;
	color: #7a7a7a;
	background: #333333 url(../images/bgFooter.gif);
	height: 52px;
	padding: 15px 0 0 0;
	width: 100%;
}



/* news.asp
---------------------------------------------*/
div#newsInfo h3, div#newsInfo h6 {display: none;}
.newstitleB{
	color: #00aaee;
	font-weight:bold;
	padding: 15px 15px 0 15px;
	letter-spacing: 1px;
	font-size: 145%;
	background: none;
	background-position: 42px 1px;
	text-decoration: none;
	margin: 0;
}

#adInfo {display: none;}

#main { background: none; width: 100%;}
#newsInfo { width: 100%;}
#newsInfoBg { background: none;}

.newstitleB div.page { text-align: right; width: 100%;}

.newstitle {
	padding: 3px 0px 0px 22px; margin: 0 0 7px 18px;
	background: url(../images/iconO.gif) left no-repeat;
	background-position: 0 10px;
	font-size: 130%;
}
.newsCont{
	color: #6b6b6b;
	padding: 0px 0px 15px 22px; margin: 0 0 10px 18px;
	letter-spacing: 1px;
	width: 90%;
	font-size: 130%;
	line-height: 22px;
	border-bottom: 1px dashed #999;
}
.popCont{
	padding: 0px 0px 20px 0px;
	width: 100%;
	font-size:130%;
	line-height: 25px;
}
.popContinfo{
	width: 98%;
	line-height: 22px;
	background: none;
	padding: 0px 0px 15px 22px; 
	font-size:130%;
	line-height: 28px;
}
.popContinfo li{ font-size: 130%;}
.popContinfo div{ font-size: 130%;}
.popContinfo img { width: 100%;}
.pp {
	background: url(../images/iconO.gif) left no-repeat;
	background-position: 0 5px;
	color: #6b6b6b;
	padding: 0px 0px 15px 22px; margin: 0 0 10px 18px;
	letter-spacing: 1px;
	width: 90%;
	font-size: 130%;
	line-height: 22px;
	border-bottom: 1px dashed #999;
}




/* proList.asp
---------------------------------------------*/
.protitleB{
	color: #00aaee;
	font-weight:bold;
	padding: 15px 15px 0 15px;
	letter-spacing: 1px;
	font-size: 145%;
	background: none;
	background-position: 42px 1px;
	text-decoration: none;
	margin: 0;
}

dl#proTitle dd {
	float: auto;
	width: 98%;
	padding: 0 15px 0 15px;
}
dl#proTitle dd img { width: 100%;}
dl#proTitle dd span { display: block; padding: 0 0 20px 13px; font-size: 135%;}

dl#proInfo dd { float: auto; width: 98%;}
dl#proInfo dd img { width: 100%;}
dl#proInfo dd:last-child { width: 98%; overflow: visible; font-size: 135%;}
dl#proInfo dd:last-child td, dl#proInfo dd:last-child li{ font-size: 135%;}


div.proInfoImg img {
    max-width: 100%;
    height: auto;
}
@media (min-width: 800px) {
    div.proInfoImg { width: 261px;}
}




/* media.asp
---------------------------------------------*/
dl#media dd {
	float: none;
	width: 98%;
	padding: 0 15px 0 15px;
}


/* links.asp
---------------------------------------------*/
.linksCont{
	width: 98%;
	color: #5b5a5a;
	font-size:135%;
	padding: 15px 15px 0 15px;
}
.linksCont table,td{
	border-collapse:collapse;
	border-spacing:0;
	font-size:135%;
}


div#mainAboutBg li.linksCont { padding-bottom: 10px; float: none;}
div#mainAboutBg li.linksCont ul { margin: 0 auto; }
div#mainAboutBg li.linksCont li{ margin-right: 30px; width: 230px; height: auto; font-size: 135%;}
div#mainAboutBg li.linksCont img { padding-bottom: 0; display: block; width: 100%;}
.linksCont .clear { clear: both; display: block;}




/* index --------------------------------------------------------------------------------------------------------2016
---------------------------------------------*/
#header {
	position: relative;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
	background: #fff;
	-moz-box-shadow: 0 0 0 0 rgba(0%,0%,0%,0);
	-webkit-box-shadow: 0 0 0 0 rgba(0%,0%,0%,0);
	box-shadow: 0 0 0 0 rgba(0%,0%,0%,0);
}
div#top_pic {
	background: url(../images/2016/top_pic.jpg) no-repeat;
	background-position: -470px 0;
	background-size: cover;
	width: 100%;
}
div#top_pic ul li.computer { display: block;}
div#top_pic ul li.web { display: none;}

div#top_pic h1 embed { display: none;}
div#top_pic h1 { height: 99px; width: 100%; background-position: 7px 0px; top: 22px; background-size: 100%;}
div#top_pic h2 { display: none;}

div.toggleDiv {
    display: block;
	text-align: left;
    background: #01a7dd;
}
div.toggleDiv div.toggle_index {
    display: inline-block;
    background: #01a7dd;
    padding: 0;
    color: #FFF;
    text-align: left;
}
div.toggleDiv div.toggle_index  img {
    margin: 0;
    padding: 0;
    width: 60%;
}
nav.nav_index{
    display: none;
    float: left;
    width: 100%;
}



ul#nav_menu { background: none; text-align: center;}
ul#nav_menu li {
	border-right: 1px dashed #fff;
	width: 100%;
	background: url(../images/2016/bg_nav.gif) repeat-x;
}
ul#nav_menu li a {
	display: block;
	font-size: 15px;
	text-indent: 0;
	width: 100%; height: 29px;
	padding: 7px 0 0 0;
}
ul#nav_menu li:last-child { border-right: none;
}




/* index_main
---------------------------------------------*/
div#index_main { margin-top: 10px; background: #fff url(../images/2016/bg_left.jpg) top repeat-x; border-bottom: 1px solid #dedede;}

div#links { display: none;}
div#content_index { width: 100%; float: left; overflow: hidden; padding: 20px; background: none; font-size: 130%}

div#content_index h1 { background: none; width: 80%; height: 22px; margin: 0; padding: 0;}
div#content_index h1 a {
	display: block;
	font-size: 25px;
	text-indent: 0;
	padding-left: 16px;
	color: #00aaee;
	width: 100%; height: 22px;
}

div#content_index ul { padding: 0; margin: 25px 50px 20px 16px;}

/* footer_index
---------------------------------------------*/



/* ---------------------------------------------*/
/* index --------------------------------------------------------------------------------------------------------2016*/








}

















/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/









@media screen and (min-width: 641px) and (max-width: 800px) {

body,div,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,select{
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

.css3button {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: 7px 17px;
	background: -moz-linear-gradient(
		top,
		#fff3db 0%,
		#ffc821 25%,
		#ff3c00);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fff3db),
		color-stop(0.25, #ffc821),
		to(#ff3c00));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #b85f00;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px -1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
}



/* index -----------old
---------------------------------------------*/
#web { display: none;}
div#mbtn { z-index: 99; position: absolute; right: 35%; top: 70%; display:block;}
div#mbtn a { margin-left: 10px; text-decoration: none;}
#mIndex { display:block; margin:0; padding:0;}
#mIndex img { width: 113%;}








/* index --------------------------------------------------------------------------------------------------------2016
---------------------------------------------*/
#header {
	position: relative;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
	background: #fff;
	-moz-box-shadow: 0 0 0 0 rgba(0%,0%,0%,0);
	-webkit-box-shadow: 0 0 0 0 rgba(0%,0%,0%,0);
	box-shadow: 0 0 0 0 rgba(0%,0%,0%,0);
}
div#top_pic {
	background: url(../images/2016/top_pic.jpg) no-repeat;
	background-position: -50px 0;
	background-size: cover;
	width: 100%;
}
div#top_pic ul li.computer { display: block;}
div#top_pic ul li.web { display: none;}


div.toggleDiv {
    display: block;
	text-align: left;
    background: #01a7dd;
}
div.toggleDiv div.toggle_index {
    display: inline-block;
    background: #01a7dd;
    padding: 0;
    color: #FFF;
    text-align: left;
}
div.toggleDiv div.toggle_index  img {
    margin: 0;
    padding: 0;
    width: 60%;
}
nav.nav_index{
    display: none;
    float: left;
    width: 100%;
}


ul#nav_menu { background: none; text-align: center;}
ul#nav_menu li {
	border-right: 1px dashed #fff;
	width: 100%;
	background: url(../images/2016/bg_nav.gif) repeat-x;
}
ul#nav_menu li a {
	display: block;
	font-size: 15px;
	text-indent: 0;
	width: 100%; height: 29px;
	padding: 7px 0 0 0;
}
ul#nav_menu li:last-child { border-right: none;
}




/* index_main
---------------------------------------------*/
div#index_main { margin-top: 10px; background: #fff url(../images/2016/bg_left.jpg) top repeat-x; border-bottom: 1px solid #dedede;}

div#links { display: none;}
div#content_index { width: 100%; float: left; overflow: hidden; padding: 20px; background: none; font-size: 130%}

div#content_index h1 { background: none; width: 576px; height: 22px; margin: 0; padding: 0;}
div#content_index h1 a {
	display: block;
	font-size: 25px;
	text-indent: 0;
	padding-left: 16px;
	color: #00aaee;
}
div#content_index ul { padding: 0; margin: 25px 0 20px 16px;}




/* ---------------------------------------------*/
/* index --------------------------------------------------------------------------------------------------------2016*/










/* 
---------------------------------------------*/
table#wrapper {
	margin: 0;
	padding: 0;
	margin: 0 auto; /* 設定為自動調整邊界 */
	background: #ffffff url(../images/bg.jpg) center top no-repeat;
	border-collapse:collapse;
	border-spacing:0;
	width: 100%;
}

.bgLeft{ display: none;}
/* Top
---------------------------------------------*/
div#Top { display: none;}

h1#headerLogo { display:block; height: auto;}
h1#headerLogo img { width: 70%; margin-top: 7px;}

#content { background: url(../images/menuBg02.gif);}

/* menu
---------------------------------------------*/
/*#menuList{ display: none;}*/
div.mline{ display: block; background: #00aaee; height: 40px; margin: 7px 0;}
div.toggle {
    position: absolute;
    top: 11px;
    right: 5px;
    display: block;
    width: 25px;
    height: 25px;
    background: url(../images/mobile/icon.png) -48px -35px no-repeat;
    background-size: 118px;
    text-indent: -9999px;
    overflow: hidden;
	cursor:pointer;
	z-index: 999;
}

.nav {
	display: none;
    position: absolute;
    top: 36px; right: 3px; width: 70%;
}
.toggle { display: inline-block;}


.nav ul#menuList {}
.nav ul#menuList li {
	display: block; float: none;
	border-top: 1px solid #f0f0f0;
}
.nav ul#menuList li a{
	background: #00b4ed url(../images/mobile/icon_menu.png) no-repeat;
	background-position: 20px 15px;
	text-indent: 0px;
	color: #fff; padding: 9px 0 9px 38px;
	width: 98%; height: auto;
	text-shadow: 0 1px 1px #666666;
    font-size: 123%;
	text-decoration: none;
}
.nav ul#menuList li:first-child a{
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}
.nav ul#menuList li:last-child a{
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
}
.nav ul#menuList li a:hover{ background: #00b4ed;}
.nav li{}
.nav li a{}
.nav li:hover ul {
	position: relative;
	display: block;
}
.nav li:hover ul li{}
.nav li:hover ul li a{}
.arrow-bottom {}




/* about_main
---------------------------------------------*/
#mainAbout{
	float: none;
	width: 98%;
	overflow auto;
	background: none;
}
#mainAboutBg{
	background: none;
}
#mainAboutBg ul { width: 98%;}
#mainAboutBg li:nth-child(odd) img { display: none;}
#mainAboutBg li:nth-child(odd) span { display: block; padding: 15px 15px 0 15px; font-weight: bold; font-size: 145%; line-height: 115%; color: #00aaee;}
#mainAboutBg li:nth-child(even) img.mob { width: 100%;}
.aboutCont{
	padding: 15px;
	width: auto;
	/*text-align:justify; text-justify:inter-ideograph;*/
	color: #5b5a5a;
	font-size: 130%;
	line-height: 170%;
}





/* about_main
---------------------------------------------*/
#footer {display: none;}
#footerIcon { display: none;}
ul#footerCopyright { display: none;}
div#mob_footer {
	display: block; font-size: 100%; text-align: center;
	color: #7a7a7a;
	background: #333333 url(../images/bgFooter.gif);
	height: 52px;
	padding: 15px 0 0 0;
	width: 100%;
}



/* news.asp
---------------------------------------------*/
div#newsInfo h3, div#newsInfo h6 {display: none;}
.newstitleB{
	color: #00aaee;
	font-weight:bold;
	padding: 15px 15px 0 15px;
	letter-spacing: 1px;
	font-size: 145%;
	background: none;
	background-position: 42px 1px;
	text-decoration: none;
	margin: 0;
}

#adInfo {display: none;}

#main { background: none; width: 100%;}
#newsInfo { width: 100%;}
#newsInfoBg { background: none;}

.newstitleB div.page { text-align: right; width: 100%;}

.newstitle {
	padding: 3px 0px 0px 22px; margin: 0 0 7px 18px;
	background: url(../images/iconO.gif) left no-repeat;
	background-position: 0 10px;
	font-size: 130%;
}
.newsCont{
	color: #6b6b6b;
	padding: 0px 0px 15px 22px; margin: 0 0 10px 18px;
	letter-spacing: 1px;
	width: 90%;
	font-size: 130%;
	line-height: 22px;
	border-bottom: 1px dashed #999;
}
.popCont{
	padding: 0px 0px 20px 0px;
	width: 100%;
	font-size:130%;
	line-height: 25px;
}
.popContinfo{
	width: 98%;
	line-height: 22px;
	background: none;
	padding: 0px 0px 15px 22px; 
	font-size:130%;
	line-height: 28px;
}
.popContinfo li{ font-size: 130%;}
.popContinfo div{ font-size: 130%;}
.popContinfo img { width: 100%;}
.pp {
	background: url(../images/iconO.gif) left no-repeat;
	background-position: 0 5px;
	color: #6b6b6b;
	padding: 0px 0px 15px 22px; margin: 0 0 10px 18px;
	letter-spacing: 1px;
	width: 90%;
	font-size: 130%;
	line-height: 22px;
	border-bottom: 1px dashed #999;
}




/* proList.asp
---------------------------------------------*/
.protitleB{
	color: #00aaee;
	font-weight:bold;
	padding: 15px 15px 0 15px;
	letter-spacing: 1px;
	font-size: 145%;
	background: none;
	background-position: 42px 1px;
	text-decoration: none;
	margin: 0;
}

dl#proTitle dd {
	float: auto;
	width: 98%;
	padding: 0 15px 0 15px;
}
dl#proTitle dd img { width: 100%;}
dl#proTitle dd span { display: block; padding: 0 0 20px 13px; font-size: 135%;}

dl#proInfo dd { float: auto; width: 98%;}
dl#proInfo dd img { width: 100%;}
dl#proInfo dd:last-child { width: 98%; overflow: visible; font-size: 135%;}
dl#proInfo dd:last-child td, dl#proInfo dd:last-child li{ font-size: 135%;}





/* media.asp
---------------------------------------------*/
dl#media dd {
	float: none;
	width: 98%;
	padding: 0 15px 0 15px;
}


/* links.asp
---------------------------------------------*/
.linksCont{
	width: 98%;
	color: #5b5a5a;
	font-size:135%;
	padding: 15px 15px 0 15px;
}
.linksCont table,td{
	border-collapse:collapse;
	border-spacing:0;
	font-size:135%;
}


div#mainAboutBg li.linksCont { padding-bottom: 10px; float: none;}
div#mainAboutBg li.linksCont ul { margin: 0 auto; }
div#mainAboutBg li.linksCont li{ margin-right: 30px; width: 230px; height: auto; font-size: 135%;}
div#mainAboutBg li.linksCont img { padding-bottom: 0; display: block; width: 100%;}
.linksCont .clear { clear: both; display: block;}
}












/* news.asp
---------------------------------------------*/
div.news_none {
    padding: 50px 0px 0px 62px;
}














.img-fluid {
  max-width: 100%;
  height: auto;
}