@charset "utf-8";
/* CSS Document */
* { margin: 0px; padding: 0px; font-family: inherit;}

/* HTML5基本設定 */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}[hidden]{display:none;}

/* 基本設定 */
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0;}
address,caption,cite,code,dfn,em,strong,var { font-weight: normal; font-style: normal;}
strong{ font-weight: bold;}
ol,ul { list-style: none;}
h1,h2,h3,h4,h5,h6 { font-weight: inherit; font-size: 100%;}
html { height: 100%\9;}
body { height: 100%\9;
	font-size: small;
	font-weight: bold;
	font-family: Helvetica, Arial, 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
	letter-spacing: 0.01em;
	color: #333;
	background: #a6a8aa;
}
img { border: 0;}
a { color: inherit; text-decoration: none; 
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;}
a:focus { outline: 0;}

/* 圖片裁切置中 */
.imgbox{ position: relative; overflow: hidden; text-align: left;} /*需要裁切的圖 (比例須個別另下) */
.imgbox img{ position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover;}

/* 圖文編輯器 */
.editor{ line-height: 1.7;}
.editor *{ word-wrap: break-word; word-break: break-word;}
.editor b, .editor strong{ font-weight: bold;}
.editor em, .editor i{ font-style: italic;}
.editor img{ max-width:100%; height: auto !important;}
.editor u{ text-decoration: underline;}
.editor table, .editor th, .editor td{ border: solid 1px #ddd;}
.editor th, .editor td{ padding: 5px;}
.editor table[border="0"], .editor table[border="0"] th, .editor table[border="0"] td{ border: 0; padding: 0;}
.editor table[align="center"]{ margin-left: auto; margin-right: auto;}

/* 共用框架 */
#wrap { position: relative; z-index: 1; width: 1000px; margin: 0 auto; background: #e6e7e9; min-height: 100vh; min-height: 100%\9; box-sizing: border-box;}
.header { background: #050609;}
.top_banner{ margin: 0 !important;}
.top_banner .imgbox{ display: block; padding-top: 26.5%; height: 0;}
.top_banner .slick-dots{ bottom: 5px;}
.top_banner .slick-dots li{ width: auto; height: auto; margin: 0; padding: 0;}
.top_banner .slick-dots li button:before{ font-size: 30px; color: #fff; opacity: .6;}
.top_banner .slick-dots li.slick-active button:before{ color: #fff; opacity: 1;}
.logo{ float: left; width: 195px; height: 100%; text-align: left;}
.logo img{ position: relative; z-index: 2; vertical-align: text-bottom; max-width: 100%; height: auto; margin-top: -50px;}
.menu{ padding: 0 60px 0 70px; height: 40px; line-height: 40px; font-size: 14px; font-weight: bold; text-align: right; color: #fff; background: #666;}
/*.logo img{position: relative;z-index: 2;vertical-align: text-bottom;height: 120%;width: auto;margin-top: -5%;}
.menu{padding: 0 20px;height: 50px;line-height: 50px;font-size: 14px;font-weight: bold;text-align: right;color: #fff;background: #666;}*/
.menu ul{ margin-left: 195px;}
.menu li{ display: inline-block; margin-right: -0.3em;}
.menu li+li:before{ content: "|"; color: #a6a8aa;}
.menu ul a{ padding: 0 0.8em;}
.menu ul a:hover{ color: #ccc;}
.menu ul img{ vertical-align: middle; margin-top: -0.2em;}

.main{ padding-bottom: 45px;}
.bg1:before, .bg2:before{ content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 45px; height: 340px; background: url(../images2017/bg_btm.jpg) center bottom no-repeat;}
.bg1 .main{ position: relative; /*background: url(../images2017/bg_top.jpg) center 0 no-repeat;*/}
.bg1 .main:before{ content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 366px; background: url(../images2017/bg_top.jpg) center bottom no-repeat;}

.content{ position: relative; margin: 5px 19px 30px 16px;}
.content:before{ content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: 0; background: #a9a9a9; box-sizing: border-box;
	box-shadow: 3px 5px 8px 1px rgba(0,0,0,.45); mix-blend-mode: multiply;}

/*麵包屑*/
.breadcrumbs{ padding: 3px 40px 0; font-size: 15px; font-weight: bold; line-height: 2; color: #959595;}
.breadcrumbs i:before{ content: "〉"; margin: 0 0.5em 0 0.8em; font-style: normal;}
.breadcrumbs a{ padding: 0.5em 0;}
.breadcrumbs .pageTitle{ display: inline; padding: 0.5em 0; font-weight: bold;}

/* footer */
.footer{ position: absolute; bottom: 0; left: 0; right: 0; margin-top: 40px; padding: 0 40px 0 50px; height: 45px; line-height: 45px; font-size: 13px; text-align: right; color: #bbb; background: #666;}
.footer_munu{ float: left; font-size: 14px; font-weight: bold; color: #fff;}
.footer_munu a{ padding: 0.5em 0.6em;}
.footer_munu a:hover{ color: #ccc;}
.footer>span{ margin-left: 30px;}
.footer img{ vertical-align: middle; margin-top: -5px;}

/* 首頁-關於我們 */
.about{ width: 660px; margin: 30px auto 40px; font-size: 18px; line-height: 1.6;}
.about p{ margin: 0.5em 0;}

/* NEWS */
.news{ padding: 0 8px 5px; font-size: 0; letter-spacing: 0; display: flex; flex-wrap: wrap;}
.news li{ display: inline-block; vertical-align: top; width: 300px; margin: 5px; padding: 5px 8px; 
	color: #555; background: #e6e7e9; border: solid 1px #d7d7d7;}
.news .imgbox{ display: block; padding-top: 75%;}
.news_cont{ width: 660px; margin: 30px auto 40px; font-size: 18px; line-height: 1.6;}
.newsdate{ margin: 0; font-size: 13px; font-weight: normal; color: #888;}
.newsTitle{ margin-bottom: 1em; font-size: 1.2em; color: #00568e;}
.news .editor{ margin: 0.8em 0 1.8em; max-height: 5.6em; line-height: 1.4; font-size: 13px; font-weight: 600; 
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.back{ display: inline-block; margin: 2em 0 0; padding-right: 0.3em; border-bottom: solid 1px;}

/* 徵件辦法 */
.activityTitle{ height: 175px; margin: -30px 0 -60px; padding: 65px; font-size: 36px; font-weight: bold; text-align: center; color: #00568e; background: url(../images2017/activity_title_deco.png) center 0 no-repeat; box-sizing: border-box;}
.activity{ margin: 0 140px 40px; color: #555; line-height: 1.8; font-size: 18px; font-weight: bold;}
/*.activity{ counter-reset: rule;}*/
.activity>li{ margin: 1.8em 0;}
.activity .mt{ margin-top: 0.6em;}
.activity h3{ display: inline-block; color: #00568e;}
/*.activity h3:before{ counter-increment: rule; content: counter(rule, cjk-ideographic) "、";}*/
.activity strong, .activity h4, .activity .strong{ color: #e5004f;}
.activity .strong .strong{ color: #007130;}
.decimal{ list-style-type: decimal; list-style-position: inside;}
.decimal ol{ margin-left: 1.2em;}
.activity .cjk-ideographic{ padding-left: 2em; text-indent: -2em;}
.activity .cjk-ideographic>li:nth-child(10) ~ li:nth-child(n){ text-indent: -3em;}
.activity .cjk-ideographic>li *{ text-indent: 0;}
.activity .upper-latin{ margin-left: 1.5em; list-style-type: upper-latin;}
.disc{ list-style-type: disc; list-style-position: outside; margin-left: 1.2em;}
.activity .note{ padding-left: 3em; text-indent: -3em;}
.act_download{ margin: 0 150px 150px; padding-left: 4em; font-size: 32px; color: #04568e;}
.act_download a:first-child{ color: #229b3a;}
.act_download a:hover{ opacity: 0.8;}

/* tab */
.tab{ float: left; margin-top: -44px; height: 34px; line-height: 40px; margin-bottom: 10px;}
.tab a{ float: right; min-width: 104px; height: 100%; margin-right: -20px; padding: 0 20px 0 3px; font-size: 19px; text-align: center; box-sizing: border-box;
	color: #959595; background: url(../images2017/tab_bg.png) 0 bottom no-repeat;}
/*.bg1 .tab a{ background-image: url(../images2017/tab_bg2.png);}*/
.tab a img{ opacity: 0.6;}
.tab .here, .tab .selected{ position: relative; background-image: url(../images2017/tab_here.png) !important;}
.tab .here img, .tab .selected img{ opacity: 1;}
.tab_wrap{ margin-top: 34px; padding: 10px 8px; background: #fff; border-radius: 0 5px 0 0; box-sizing: border-box; box-shadow: 3px 6px 8px rgba(0,0,0,.5);}
.tab_cont{ padding: 0 24px 2em; font-size: 13px; color: #221815; background: #eee; border-radius: 8px; box-sizing: border-box; box-shadow: inset 3px 6px 8px rgba(0,0,0,.4);}

/* left menu */
.left_menu{ float: left; width: 147px; padding: 44px 0; font-size: 19px; font-weight: 500; line-height: 1.74; text-align: center; color: #646464;}
.left_menu a{ display: block; margin: 0.9em 0;}
.left_menu .here, .left_menu a:hover{ background: #666; color: #fff;}

/* 認識原住民族 */
.aborigine{ position: relative; height: 690px; padding: 13px 55px 0 28px; box-sizing: border-box;}
.aborigine .tab{ padding-left: 17px;}
.aborigine .tab_wrap{ float: left; width: 453px; height: 615px;}
.tab_txt h2{ margin: 1.8em 0 0.3em; font-size: 1.3em; line-height: 1.6; color: #c27964;}
.tab_txt .more{ display: inline-block; margin: -0.5em; padding: 0.5em; color: #0068b7;}
.tab_txt .more:before{ content: " ....."; float: left; color: #221815;}
.tab_txt .more:hover{ text-decoration: underline;}
.taiwan{ float: right;}

/* 得獎作品 */
.award{ padding: 14px 14px 30px 0;}
.award .tab_wrap{ margin-left: 160px;}
.award .tab{ padding-left: 10px;}
.award .tab_cont{ padding: 38px 30px;}

.prize_title{ margin: 3em 0 1em; height: 0.5em; line-height: 1; font-size: 17px; text-align: center; color: #959595; border-bottom: solid 1px #bebebe;}
.prize_title span{ background: #eee; letter-spacing: 1em;}
.prize_title span:before, .prize_title span:after{ content: ""; display: inline-block; vertical-align: 2px; height: 7px; border-left: solid 1px #bebebe;}
.prize_title span:before{ padding-right: 1em;}

.award_list{ margin: 0 -15px; font-size: 0; letter-spacing: 0; color: #959595;}
.award_list li{ display: inline-block; vertical-align: top; width: 20%; padding: 15px; font-size: 14px; text-align: center; box-sizing: border-box;}
.award_list p{ margin: 0.8em 0 0;}
.award_list .paintbox{ position: relative; padding-top: 100%; background: #fff;}
.award_list img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%;}
.top_three li{ width: 33.33%; font-size: 18px;}

.art_cont{ color: #959595;}
.tab_cont .pageTitle{ margin: 0 8em; font-size: 19px; text-align: center;}
.art_page{ margin: 2em 0 3em; font-size: 16px;}
.art_top{ margin: 0.6em 0 1.2em;}
.art_top .art_prev{ float: left; text-decoration: underline;}
.art_top .art_next{ float: right; text-decoration: underline;}
.art_btm{ margin: 3em 0 0; font-size: 14px; text-align: center;}
.art_btm a{ padding: 1em; text-decoration: underline;}

.art_pic{ border: solid 1px #ccc; /*background: #fff;*/}
.art_pic img{ display: block; max-width: 100%; max-height: 700px; width: auto; height: auto; margin: 0 auto;}
.art_info{ margin-top: 1.5em; font-size: 17px; overflow: hidden;}
.art_info dt{ float: left; width: 5.5em; clear: left;}
.art_info dd{ margin: 0 0 1em 6em;}
.art_info dd:after{ content: ""; display: block; clear: both;}

/* 網路票選 */
.vote{ padding: 13px 19px 19px 16px;}
.vote_cont{ padding: 38px 30px; color: #959595;}
.vote_list{ margin: 0 -11px; font-size: 0; letter-spacing: 0;}
.vote_list li{ display: inline-block; vertical-align: top; width: 25%; padding: 11px; font-size: 18px; box-sizing: border-box;}
.vote_list p{ margin: 0.3em 0;}
.vote_list p span{ font-size: 16px;}
.vote_list .paintbox{ position: relative; padding-top: 100%; background: #fff;}
.vote_list img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%;}
.btn_vote{ display: block; margin: 0.8em auto; width: 6em; font-size: 18px; text-align: center; color: #fff; background: #3db1e4; cursor: pointer;}
.btn_vote:before, .btn_vote:after{ content: " - ";}
.page{ margin: 3em 0; font-size: 12px; text-align: center; color: #959595;}
.page a{ padding: 0.5em 0.3em; text-decoration: underline;}
.page .here{ color: #00a0e9;}
.page .jumpto{ margin-left: 2em;}

.vote_info_cont{ padding: 38px 107px;}
.art_info+.btn_vote{ margin: 2em auto 3em;}

.iframe_wrap{ display: none; position: absolute; left: 0; top: 293px; bottom: 45px; width: 100%;}
.iframe_wrap iframe{ width: 100%; height: 100%; border: 0; margin: 0;}
.iframe{ padding: 3em; font-size: 19px; line-height: 1.8; letter-spacing: 0.01em; text-align: center; color: #fff; background: rgba(40,40,40,.9); background: #282828\9;}
.iframe h2{ margin-bottom: 0.5em; font-size: 1.31em;}
.iframe .h2{ margin: 3em 0 1.5em;}
.iframe strong{ color: #fff100;}
.iframe em{ font-weight: inherit; text-decoration: underline;}
.iframe .red{ color: #e74078;}
.iframe .blue{ color: #00b7ee;}

.vote_form p{ margin: 0.5em 0; font-size: 21px;}
.vote_form input{ width: 210px; font-size: inherit; text-align: center; color: inherit; border: 0; outline: 0; border-bottom: solid 1px #fff; background: transparent;}
.vote_form input[type=ëmail]{ width: 305px;}
.vote_form input:focus{ border-color: #fff100;}
.codebox{ display: inline-block; white-space: nowrap;}
.codebox img{ float: left; margin-right: 12px;}
.codebox input{ display: block; width: 6em; color: #959595; background: #fff;}
.codebox a{ font-size: 14px; text-decoration: underline; color: #b5b5b5; cursor: pointer;}
.vote_form button{ display: block; margin: 3em auto; width: 7em; padding: 0.3em; font-size: 22px; color: #fff; background: #0c0c0c; border: 0;}
.iframe p:last-child{ font-size: 22px;}
.close_btn{ position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; padding: 15px; cursor: pointer; background: url(../images2017/icon_close.png) center center no-repeat;}
.btm_close{ position: absolute; bottom: 65px; right: 50px; font-size: 14px; color: #959595; text-decoration: underline; cursor: pointer;}

/* 聯絡我們 */
.contact{ margin: 1em auto 4em; font-size: 19px; color: #959595;}
.contact th, .contact td{ padding: 0.8em 0.5em;}
.contact .img_large{ margin-left: -0.5em;}

/* 友站連結 */
.link{ margin: 2em 100px 3em; font-size: 19px; color: #959595;}
.link a{ display: block; padding: 0.3em 1em;}
.link a:before{ content: "●"; margin: 0 1em 0 -1em; font-family: '微軟正黑體', 'Microsoft JhengHei';}
.link a:hover{ color: #000;}