@charset "UTF-8";
/* Welcome to Compass.
/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic&subset=cyrillic-ext,latin,greek-ext);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

.user_list::after, .user_item .user_button::after { clear: both; content: ''; display: block; visibility: hidden; height: 0; }

.banner { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1ZTRmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZDdjNWZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjZiOWQ4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c5e4ff), color-stop(50%, #d7c5ff), color-stop(100%, #f6b9d8)); background-image: -moz-linear-gradient(top, #c5e4ff 0%, #d7c5ff 50%, #f6b9d8 100%); background-image: -webkit-linear-gradient(top, #c5e4ff 0%, #d7c5ff 50%, #f6b9d8 100%); background-image: linear-gradient(to bottom, #c5e4ff 0%, #d7c5ff 50%, #f6b9d8 100%); }

header, #navi a.nav_button, .content_box.contet_info, .content_box.contet_info h3, .content_box.contet_info ul li, .content_box.contet_info ol, .user_item, .user_item .user_name p, .user_item .user_button a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { width: 100%; font-family: 'Noto Sans',Arial, 'Noto Sans TC','微軟正黑體'; font-size: 14px; -webkit-text-size-adjust: none; text-size-adjust: none; }

a { text-decoration: none; }

#main { width: 100%; height: auto; background-image: url(../images/bg.jpg); }

header { width: 100%; height: auto; background-color: #fff; border-bottom: 1px solid #ccc; position: fixed; top: 0px; z-index: 10; }

#navi { width: 960px; margin: 0 auto; text-align: center; }
#navi a { padding: 0px 10px; display: inline-block; }
#navi a.nav_button { font-size: 18px; color: #ac2f88; font-weight: 600; height: 80px; line-height: 80px; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; border-bottom: 2px solid transparent; }
#navi a.nav_button i { vertical-align: middle; margin-right: 5px; }
#navi a.nav_button i img { width: 29px; height: auto; vertical-align: middle; }
#navi a.nav_button:hover, #navi a.nav_button.active { border-bottom: 5px solid #ac2f88; }
#navi a.nav_logo { height: 80px; vertical-align: bottom; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }
#navi a.nav_logo:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
#navi a.nav_logo img { padding: 10px 0px; }

section { width: 960px; margin: 0 auto; padding-top: 80px; box-shadow: 1px 1px 5px #d2d2d2, -1px 1px 5px #d2d2d2; }

.banner { width: 100%; height: auto; }
.banner img { width: 100%; height: auto; vertical-align: bottom; }

.content { width: 100%; background-color: #fff; }

.content_box { padding: 20px 0px; }
.content_box.content_first { text-align: center; color: #58431f; font-size: 20px; line-height: 2em; text-align: center; font-weight: 500; }
.content_box.contet_info { padding: 20px 10px; }
.content_box.contet_info h3 { width: 100%; padding-left: 44px; background-image: url(../images/info_icon.png); background-repeat: no-repeat; background-position: left center; line-height: 33px; font-size: 22px; color: #714897; margin-bottom: 15px; font-weight: 500; }
.content_box.contet_info ul { width: 100%; }
.content_box.contet_info ul li { width: 100%; padding-left: 44px; color: #3c3c3c; font-size: 16px; margin-bottom: 10px; line-height: 2em; }
.content_box.contet_info ul li.disc { color: #e7307e; list-style-type: disc; list-style-position: inside; }
.content_box.contet_info ul li.bold { font-weight: 600; }
.content_box.contet_info ol { width: 100%; padding-left: 60px; }
.content_box.contet_info ol li { color: #3c3c3c; font-size: 16px; margin-bottom: 10px; line-height: 2em; }
.content_box.contet_info ol li.number { list-style-type: decimal; list-style-position: outside; }
.content_box.contet_info ol li span { color: #0372ef; }

.content_title { width: 100%; text-align: center; margin-bottom: 20px; }

.user_list { width: 100%; }

.user_item { width: 220px; height: auto; float: left; margin: 10px; border: 1px solid #b7b7b7; }
.user_item .user_name { width: 100%; padding: 5px 0px; position: relative; text-align: center; border-bottom: 1px solid #b7b7b7; }
.user_item .user_name .number { width: 30px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0px; top: 0px; font-size: 18px; background-color: #b7b7b7; color: #fff; }
.user_item .user_name p { font-size: 14px; margin-bottom: 5px; color: #666; width: 100%; padding: 0px 5px; display: block; line-height: 24px; height: 24px; max-width: 100%; /*限制div寬度*/ overflow: hidden; /*超過內容消失*/ white-space: nowrap; /*文字不換行*/ text-overflow: ellipsis; /*省略符號*/ }
.user_item .user_name p.name_big { font-size: 16px; color: #e7307e; }
.user_item .user_pic { width: 100%; height: 218px; overflow: hidden; }
.user_item .user_pic img { width: 100%; height: auto; vertical-align: bottom; }
.user_item .user_button { width: 100%; height: 32px; }
.user_item .user_button a { display: block; float: left; width: 50%; color: #fff; text-align: center; line-height: 32px; font-size: 14px; padding-left: 32px; background-repeat: no-repeat; background-position: 10px center; }
.user_item .user_button a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
.user_item .user_button a.btn_left { background-color: #fe8e33; background-image: url(../images/button_icon01.png); }
.user_item .user_button a.btn_right { background-color: #357cff; background-image: url(../images/button_icon02.png); }

.user_link { width: 100%; text-align: center; padding: 20px 0px; }
.user_link a { -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }
.user_link a img { width: 300px; height: auto; }
.user_link a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

.line { width: 100%; height: 24px; background-image: url(../images/line.jpg); background-repeat: repeat-x; }

footer { width: 100%; background-color: #f4d2c5; color: #3a3a3a; text-align: center; font-size: 14px; line-height: 2em; padding: 20px 0px; }

#gotop { display: none; position: fixed; right: 15px; bottom: 15px; width: 60px; height: 60px; font-size: 20px; color: white; cursor: pointer; z-index: 100; filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; background-image: url(../images/top.png); background-repeat: no-repeat; background-position: center center; }

.overlay { width: 100%; height: 100%; position: fixed; background-color: white; z-index: 1001; }