@charset "UTF-8";
/* CSS Document */			
html {-webkit-text-size-adjust:none;}
body { margin:0; padding:0; background:#000 url(../images/body_bg.png) repeat-x 0 0; font-size: medium; letter-spacing:1px; font-family:Arial, Helvetica, sans-serif; color:#444; }
header, footer, nav, aside, section, article, figure, figcaption { display:block; }
.mp { width:768px; margin:0 auto; }
.wrap { margin:0; position:relative; }
/**/
h1, h2, h3, h4 { font-weight:normal; }
em { font-style:normal; font-weight:bold; margin:0 4px; }
a { color:#0d5646; }
.date { font-family:Arial, Helvetica, sans-serif; color:#666; }
.from { color:#222; }
.accesskey { display:none; }
/*header*/
.header { background:url(../images/header_bg.png) no-repeat 10px bottom; margin:0; background-size:414px auto; }
.header h1 { margin:0 10px 0 0; padding:0; height:145px; background:url(../images/h1.png) no-repeat right 120px; background-size:auto 21px; font-size:0; color:transparent; }
.header h1 a { display:block; width:200px; height:140px; color:transparent; }
/*navigation*/
.navigation { position:absolute; right:10px; top:7px; }
.navigation ul { list-style:none; margin:0; padding:0; line-height:100%; }
.navigation li { float:left; margin:0 0 0 9px; padding:0 0 0 11px; background:url(../images/nav_li.gif) no-repeat 0 3px; }
.navigation li:first-child { background:none; }
.navigation li a { color:#bbb; text-decoration:none; }
.navigation li a:active { color:#fff; }
/*menu*/
.menu { position:relative; width:766px; height:612px; background:url(../images/menu_bg.png) no-repeat; margin:0 auto; }
.menu ul { list-style:none; padding:0; margin:0; font-size:0; }
.menu li { margin:0; padding:0; position:absolute; background-repeat:no-repeat;background-size:172px; width:172px; height:172px; }
.menu li a { display:block; width:172px; height:172px; color:transparent; text-decoration:none; }
.menu li.menu_mayormail { left:20px; top:20px; background-image:url(../images/menu_mayormail.png); }
.menu li.menu_taichung { left:20px; top:205px; background-image:url(../images/menu_taichung.png); }
.menu li.menu_news { left:205px; top:20px; background-image:url(../images/menu_news.png); }
.menu li.menu_eService { left:390px; top:20px; background-image:url(../images/menu-eService.png);}
.menu li.menu_office { left:575px; top:20px; background-image:url(../images/menu_office.png); }
.menu li.menu_letter { left:205px; top:205px; background-image:url(../images/menu0_temp.png); }
.menu li.menu_video { left:390px; top:205px; background-image:url(../images/menu_video.png); }
.menu li.menu_population { left:20px; top:390px; background-image:url(../images/menu_population.png); }
.menu li.menu_1999 { left:205px; top:390px; background-image:url(../images/menu_1999.png); }
.menu li.menu_app { left:390px; top:390px; background-image:url(../images/menu_app.png); }
.menu li.menu_link { left:575px; top:390px; background-image:url(../images/menu_link.png); }
/*
.menu li.menu_taichung { left:20px; top:20px; background-image:url(../images/menu_taichung.png); }
.menu li.menu_news { left:205px; top:20px; background-image:url(../images/menu_news.png); }
.menu li.menu_eService { left:390px; top:20px; background-image:url(../images/menu-eService.png);}
.menu li.menu_office { left:575px; top:20px; background-image:url(../images/menu_office.png); }
.menu li.menu_photo { left:205px; top:205px; background-image:url(../images/menu_photo.png); }
.menu li.menu_video { left:390px; top:205px; background-image:url(../images/menu_video.png); }
.menu li.menu_population { left:20px; top:390px; background-image:url(../images/menu_population.png); }
.menu li.menu_1999 { left:205px; top:390px; background-image:url(../images/menu_1999.png); }
.menu li.menu_app { left:575px; top:390px; background-image:url(../images/menu_app.png); }
*/
/*---*/
.menu li.menu0_cloud { left:390px; top:20px; background-image:url(../images/menu0_cloud.png); display:none;/*20131030*/ }
.menu li.menu0_sparkle { left:20px; top:205px; background-image:url(../images/menu0_sparkle.png);display:none;/*20141215*/}
.menu li.menu0_butterfly { left:575px; top:205px; background-image:url(../images/menu0_butterfly.png); }
.menu li.menu0_globle { left:390px; top:390px; background-image:url(../images/menu0_globle.png); display:none;/*20141215*/}
/*footer*/
footer { clear:both; color:#bbb; padding:10px 0; margin:15px auto 0; font-size:13px; }
footer section { padding:2px 20px 0 135px; background:url(../images/footer_bg.png) no-repeat 10px 0; background-size:110px auto; min-height:70px; }
footer p { margin:.4em 0; line-height:125%; }
footer a { color:#fff; }
/*-----------np , lp , cp , sp*/
.np>header, .lp>header, .cp>header, .qp>header, .sp>header { position:relative; line-height:100%; background:url(../images/navBar_bg.png) repeat-x 0 0; height:52px; margin:0 0 12px; }
.np>header>h1, .lp>header>h1, .cp>header>h1, .qp>header>h1, .sp>header>h1 { text-align:center; color:#fff; font-size:x-large; font-weight:bold; line-height:100%; margin:0; padding:12px 0 0; letter-spacing:.1em}
.back { position:absolute; left:0; top:0; margin:6px 0 0 15px; padding:0 14px 0 0; background:url(../images/back_bg.png) no-repeat right top; }
.back a { color:#b8d21a; text-decoration:none; display:block; padding:11px 0 14px 30px; margin:0 0 0 -5px; background:url(../images/back_bg.png) no-repeat 0 0; }
/* np */
.np ul { list-style:none; padding:0; background:#e4e5e1; border-radius:10px; border:1px solid #fff; margin:20px 10px; padding:8px 0; font-size:x-large; line-height:100%; }
.np ul li { margin:0 0 .25em; padding:0; border-top:1px solid #fff; }
.np ul li:first-child { border:none; }
.np ul li a { text-decoration:none; display:block; padding:.7em 35px .4em 12px; margin-right:10px; background:url(../images/np_li.png) no-repeat right .4em; }
/*page*/
.page { color:#cad0b7; text-align:center; line-height:100%; letter-spacing:0; }
.page em { color:#fff; font-family:Arial, Helvetica, sans-serif; }
.page p { margin:0; padding:0; }
.page ul { list-style:none; margin:9px auto 0; padding:0; display:inline-block; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:22px; line-height:100%; }
.page li { float:left; margin:0; padding:0 2px; background:url(../images/page_li.png) no-repeat 0 0; }
.page li a { display:block; padding:12px 0 0; width:52px; height:44px; color:#fff; text-decoration:none; text-align:center; }
.page li.here { background-position:-70px 0; }
.page li.prev, .page li.next { width:64px; }
.page li.prev { background-position:0 -70px; }
.page li.next { background-position:-80px -70px; }
/*list*/
.list, .thumbnail { background:#e4e5e1; border-radius:10px; border:1px solid #fff; margin:2px 10px 20px; padding:8px 14px; box-shadow:rgba(0, 0, 0, .5) 0 0 8px inset; }
.list ul { list-style:none; margin:0; padding:0; line-height:150%; font-size:large; }
.list ul li { margin:0; padding:.6em 2px .4em; background:url(../images/list_border.png) repeat-x left top; }
.list ul li:first-child { background:none; }
.list ul li .date, .list ul li .from { margin-right:1em; white-space:nowrap; display:inline-block; padding:0; }
.list ul li .date { font-size:smaller; letter-spacing:0; }
.list ul li a { text-decoration:none; margin-right:1em; padding:0; }
/*list org 機關通訊錄*/
.list.org ul { }
.list.org>ul>li:first-child { font-size:larger; font-weight:bold; }
.list.org ul li { background:#fff; border-radius:8px; margin:6px 0; padding:5px 9px; }
.list.org>ul>li>a { display:block; background:url(../images/li.png) no-repeat 0 3px; padding:0 0 0 22px; }
/*---- 第二層*/
.list.org ul ul { font-size:medium; padding:0; margin:7px 0 0 18px; }
.list.org ul li li { text-align:center; margin:2px 5px 5px 0; padding:2px .5em 1px; border-radius:5px; background:transparent; display:inline-block; width:9em; vertical-align: top; background:#e4ebd2; box-shadow:rgba(0, 0, 0, .4) 0 1px 3px }
.list.org ul li li a { display:block; margin:0; padding:2px 0; }
/*.cp header*/
.cp header ul { list-style:none; margin:8px 0 0; padding:0; color:#777; font-size:.92em; }
.cp header ul li { margin:0 1em 0 0; padding:0; display:inline; }
.cp header ul li em { font-style:normal; color:#333; }
/*cp article */
.cp article, .cp .meta { clear:both; background:#e4e5e1; border-radius:10px; border:1px solid #fff; margin:2px 10px 10px; padding:10px; box-shadow:rgba(0, 0, 0, .5) 0 0 8px inset; }
.cp article h1, .cp article h2, .cp article h3, .cp article h4, .cp article h5, .cp article h6 { color:#000; margin:1.5em 0 .5em; font-weight:bold; }
.cp article h1 { font-size:large; margin:0.3em 0; padding:0; line-height:150%; }
.cp article h2 { font-size:1em; }
.cp article h3 { font-size:0.9em; }
.cp article h4 { font-size:0.8em; }
.cp article h2+h3, .cp article h3+h4, .cp article h4+h5, .cp article h5+h6 { margin-top:0; }
.cp article, .cp article p { line-height:180%; }
/*文章內主圖*/
.cp article figure { float:left; border:1px solid #bbb; margin:12px 15px 8px 2px; box-shadow:rgba(0, 0, 0, 0.4) 0 2px 7px; max-width:268px; letter-spacing:0; background:#fff; }
.cp article figure img { display:block; max-width:260px; border:4px solid #fff; }
.cp article figure figcaption { margin:0 4px 4px; line-height:140%; width:auto; max-width:260px; font-size:small; }
/*cp meta*/
.meta h2 { color:#000; margin:.5em 0; font-weight:bold; font-size:large; }
.meta header { margin:0 0 6px; }
.meta header h1 { color:#000; margin:.5em 0; font-weight:normal; font-size: large; text-align:left; line-height:145% }
.meta table { background:#fbfdf3; width:100%; margin:0 auto 15px; border-collapse:collapse; }
.meta th, .meta td { vertical-align:top; line-height:140%; border:1px solid #b0b4a6; }
.meta th { white-space:nowrap; padding:6px 0 5px 8px; text-align:right; color:#000; font-weight:normal; }
.meta td { padding:6px 8px 5px; word-break:break-all; }
/* pubInfo*/
.cp .pubInfo { clear:both; margin:0; padding:12px; border:1px solid #fff; border-radius:6px; background:#f6f6f6; }
.cp .pubInfo ul { list-style:none; margin:0; padding:0; color:#777; }
.cp .pubInfo ul li { margin:0; padding:0; line-height:150%; }
.cp .pubInfo ul li em { font-style:normal; font-weight:normal; margin-left:4px; color:#444; }
/*attachment 附件*/
.attachment { clear:both; overflow:hidden; background:#d7dfba; border:1px solid #fff; border-radius:10px; margin:10px; padding:12px 14px 10px; }
.attachment h1 { font-size:medium; margin:0 9px .6em; padding:0; letter-spacing:5px; font-weight:bold; }
.attachment ul { font-size:medium; margin:0; padding:0; list-style:none; line-height:120%; }
.attachment li { margin:0 0 6px; padding:0 10px; border-radius:6px; background:#fff; }
.attachment li a { display:block; text-decoration:none; font-size:larger; padding:.5em 32px .55em 0; background:url(../images/li.png) no-repeat right .55em }
/*qp*/
.qp form { background:#e4e5e1; border-radius:10px; border:1px solid #fff; margin:2px 10px 20px; padding:8px 14px; box-shadow:rgba(0, 0, 0, .5) 0 0 8px inset; font-size:media; }
.qp form p { margin:0 0 0.7em; }
.qp form label { display:block; margin:0 0 .5em; }
.qp form label select { display:block; width:100%; font-size:larger; background:#fff; }
form .buttonDiv { text-align:center; margin:10px 0; }
form .buttonDiv input { font-size:larger; border:none; background:url(../images/navBar_bg.png) repeat-x 0 center; color:#fff; padding:8px 14px 9px; line-height:100%; border-radius:8px; }
.buildings { clear:both; background:#d7dfba; border-radius:10px; border:1px solid #fff; margin:2px 10px 20px; padding:12px 14px 10px; }
.buildings h1 { font-size:medium; margin:0 0 .5em; padding:0; }
.buildings ul { list-style:none; margin:0; padding:0; line-height:120%; font-size:medium; }
.buildings li { margin:0 0 6px; padding:0 10px; border-radius:6px; background:#fff; }
.buildings li a { display:block; text-decoration:none; font-size:larger; padding:.5em 32px .55em 0; background:url(../images/li.png) no-repeat right .55em }
/*--------------apps*/
.thumbnail { padding:8px; }
.thumbnail>ul { list-style: none; margin:0 0 0 5px; padding:10px 0; overflow:hidden; width:100%; line-height:100%; }
.thumbnail>ul>li { float:left; padding:9px 0 6px; margin:0 4px 14px; text-align:center; border:1px solid #bbb; width:230px; height:236px; border-radius:5px; box-shadow:rgba(0, 0, 0, .3) 0 0 4px; background:#fff; }
.thumbnail li .image { display:block; margin:0 9px 5px; width:210px; }
.thumbnail li .image img { margin:0; padding:0; }
.thumbnail li a { text-decoration:none; }
.thumbnail.apps>ul>li { width:170px; height:250px; position:relative; border-color:#4c778d; }
.thumbnail.apps ul li .image { width:150px; margin:0 auto 6px; }
.thumbnail.apps li .image img { width:120px; height:120px; }
.thumbnail.apps ul li p { display:inline-block; width: auto; margin:0 8px; padding:0; text-align: left; line-height:150%; height:4.5em; overflow:hidden; font-size:media; }
.thumbnail.apps ul ul { list-style:none; overflow:hidden; margin:0; background:#4c778d url(../images/appDownload.png) no-repeat 8px 15px; position:absolute; left:0; right:0; bottom:0; height:36px; padding:8px 0 6px 42px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border:none; }
.thumbnail.apps ul ul li { float:left; width:36px; height:36px; margin:0 0 0 4px; padding:0; }
.thumbnail.apps ul ul li a { display:block; background:url(../images/appIcons.bmp) no-repeat 0 0; width:36px; height:36px; }
.thumbnail.apps ul ul li.sysIos a { }
.thumbnail.apps ul ul li.sysAndroid a { background-position:-40px 0; }
.thumbnail.apps ul ul li.sysWin a { background-position:-80px 0; }
/*--------------人口統計*/
.population { background:#e4e5e1; border-radius:10px; border:1px solid #fff; padding:8px 0; line-height:150%; margin:20px 10px; }
.population table { border-collapse:collapse; width:94%; margin:5px 3%; font-size:large; border:1px solid #fff; }
.population th, .population td { text-align:right; border-collapse:collapse; border-bottom:1px solid #fff; padding:6px 10px; font-weight:normal; }
.population th { text-align:left; }
.population .date, .population .more { display:block; text-align:right; margin:8px 4% 0; }
/*---aspnetForm: 人口統計嵌入code；20130415*/
#aspnetForm { background:#e4e5e1; border-radius:10px; border:1px solid #fff;line-height:150%; margin:20px 10px; padding:14px 0;  }
#form1 table span#ctl00_Label1 { display:block; width:98%; text-align:center; font-size:large; line-height:110%; margin:0 0 16px; padding:16px 1% 6px; font-weight:normal !important; letter-spacing:1px;}
#form1 div { margin:0; padding:0;  }
#form1 table { border:none; margin:0 3%; border-collapse:collapse;letter-spacing:0; width:94%; height:auto;border:none; }
#form1 table table { margin:0;  width:100%; line-height:110%;}
#form1 table td { padding:0;}
#form1 table span {float:left;padding-bottom:7px; margin-bottom:16px;border-bottom:1px solid #fff; text-decoration:none;}
#form1 table span#Label1 , #form1 table span#Label2 , #form1 table span#Label3 , #form1 table span#Label4 {font-size:large !important; width:48%; padding-left:2%; }
#form1 table span#ctl00_ContentPlaceHolder1_Label1:after {content:"戶"; padding-left:4px;}
#form1 table span#ctl00_ContentPlaceHolder1_lbTotal:after ,
#form1 table span#ctl00_ContentPlaceHolder1_lbMan:after ,
#form1 table span#ctl00_ContentPlaceHolder1_lbWoman:after {content:"人"; padding-left:4px;}
#form1 br { clear:both;}
#form1 table span+span{ width:48%; padding-right:2%;}
#form1 table span span { float:right; font-family:Arial, Helvetica, sans-serif; font-size:large !important; border:none;padding:0; margin:0;}
#form1 a#ctl00_ContentPlaceHolder1_HyperLink1 { float:right;clear:both; margin:8px 2.1% 5px; padding:0;color:#0d5646;}

/*當設備解析度不大於720px時（以較短邊為標準）*/
@media screen and (max-device-width: 720px) {
body { font-size:small; background:#2a2a2a url(../images/body_bgs.png) repeat-x 0 0; }
.header {/* background:url(../images/header_bg_s.png) no-repeat 10px bottom; */ background-size:165px auto;}
.header h1 { height:60px; background-size:auto 11px; background-position:right bottom; }
.header h1 a { width:160px; height:50px; }
footer section { padding:0 12px 0 94px; background-size:76px auto; }
.navigation { top:4px; }
.navigation li { float:left; margin:0 0 0 6px; padding:0 0 0 8px; }
section > header .back { font-size:0; color:transparent; width:20px; }
section > header .back a { color:transparent; }
.np>header>h1, .lp>header>h1, .cp>header>h1, .qp>header>h1, .sp>header>h1 { letter-spacing:0; margin-left:55px;}
.np ul { margin:10px; }
.mp { width:auto; }
.mp .header { border-bottom:1px solid #484848; }
.menu { position:static; width:auto; height:auto; background:none; text-align:center; max-width:470px; margin:0 auto;}
.menu li { display:inline-block;position: static; margin:8px 4px 0; padding:0;  width:86px; height:86px;background-size:86px; vertical-align:top;}
.menu li a {display:block; width:86px; height:86px; background-repeat:no-repeat; color:#000; margin:0;}
/*.menu li.menu_taichung { background-image:url(../images/menu_taichung_s.png); }
.menu li.menu_news { background-image:url(../images/menu_news_s.png); }
.menu li.menu_office { background-image:url(../images/menu_office_s.png); letter-spacing:0; }
.menu li.menu_photo { background-image:url(../images/menu_photo_s.png); }
.menu li.menu_video { background-image:url(../images/menu_video_s.png); }
.menu li.menu_population { background-image:url(../images/menu_population_s.png); }
.menu li.menu_1999 { background-image:url(../images/menu_1999_s.png); }
.menu li.menu_app { background-image:url(../images/menu_app_s.png); }
.menu li.menu_app a { padding: 0 4px; width:80px; }
.menu li.menu_taichung a, .menu li.menu_1999 a { color:#fff; }
.menu li.menu0_butterfly { background-image:url(../images/menu0_butterfly_s.png); } */
.menu li.menu0_sparkle, .menu li.menu0_cloud, .menu li.menu0_globle { display:none; }
.page li { background:url(../images/page_li.png) no-repeat 0 0; background-size:110px 94px; text-align:center }
.page li a { padding:7px 0 0; width:36px; height:34px; margin:0 0 0 2px }
.page li.here { background-position:-52px 0; }
.page li.prev, .page li.next { width:44px; }
.page li.prev { background-position:0 -52px; }
.page li.next { background-position:-60px -52px; }
.list { padding:8px; }
.cp article figure { float:none; margin:12px auto 8px; }
.thumbnail { padding:0; }
.thumbnail.apps>ul { margin:0; padding:8px; width:auto; }
.thumbnail.apps>ul>li { float:none; width:auto; height:135px; margin:0 0 8px; padding:0; right:0; }
.thumbnail.apps>ul>li .image { width:130px; margin:7px 4px 0; }
.thumbnail.apps>ul>li p { position:absolute; right:8px; top:8px; margin:0; left:138px; }
.thumbnail.apps>ul>li ul { padding:5px 0 3px 5px; margin-right:8px; height:auto; width:auto; left:138px; right:8; bottom:8px; border-radius:4px; background-image:none; }
}
@media screen and (max-device-width: 720px) and  ( orientation: landscape) {
	.menu{max-width:400px;}
}