@charset "utf-8";

/*----修正粗體----*/
@font-face {
    font-family: '微軟正黑體';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
/*----一般粗細的時候改回微軟正黑----*/
@font-face {
    font-family: '新微軟正黑體';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}
.s,.app_menu{display: none;}

/* -----內頁版型------ */
.page{ 
	width:93%; max-width:1320px; margin:0 auto; position: relative; z-index:0;
	animation: fadeInDown 1s 0.5s both;
	background-image:url(../images/bg_conteent_cover.png),url(../images/watermark_content.png),url(../images/bg_content_mid.png);
	background-repeat:no-repeat,repeat-y,repeat-y;
	background-position:center bottom,center top,center top;
	background-size:93% auto,100% auto,100% auto;
}

.bg_content_top,.bg_content_bot{ width:100%; height:auto; font-size:0; position:absolute;z-index: 10;}
.bg_content_top{top:-1.2rem;}
.bg_content_bot{bottom:-1.2rem;}
.decotop{width: 105%; max-width: 1380px; height: auto; position: absolute; 
	z-index: 11; top: -1rem; left: 50%; transform: translateX(-50%);
}
.bg_content_mid{ width:100%; height:auto; padding:0; margin: 0 ;
	 position: relative; z-index:0;}

.page_content{width:90%; margin:0 auto 2.5rem; text-align:left; position: relative; z-index:0; padding:6%;}
.part{width:100%; margin:0 auto;}

.title{ width:100%; max-width:903px; margin:0 auto 1.5rem;  z-index:9;}
.title_s{ display:none;width:100%; max-width:610px; margin:0 auto 1.5rem; z-index:9;}
.subtitle{width:100%; max-width:588px; margin:0 auto;  z-index:9;}

.article{ margin: 0 auto; padding:0 2rem; text-shadow:2px 2px 2px #000; text-align:justify; letter-spacing: .02rem;}

/*內文的圖片共用基本樣式。但原圖尺寸不一，所以要每頁分別設定寬度*/
.article .pic {
    height: auto; margin: 1rem;
    background: linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 6px) calc(100% - 6px) no-repeat,
	linear-gradient(45deg, rgba(227, 175, 50, 1) 4%, #f0d699 14%, rgba(207,154,28,1) 40%, rgba(242,214,147,1) 63%, #e1b345 100%);
    border-radius: 0px; padding: 3px; box-sizing: content-box; display: block; margin: 2rem auto; 
	filter: drop-shadow(2px 4px 6px black);
}
.p1 .article .pic{width: 100%; max-width:450px;}
.p3 .article .pic{width: 70%;}
.p2 .article .pic{width: 100%; max-width:427px;}
.p4 .article .pic{width: 100%; max-width:455px;}

.al_center{ width: 75%; margin: 0 auto;}

/* -----活動時間 對象------ */
.page_info{width:100%; margin:0 auto; text-align:center;
	display: flex; display:-ms-flexbox;
	flex-direction: row; -ms-flex-direction:row;
	justify-content:center;	-ms-flex-pack:center;
	align-items:center; -ms-flex-align:center;
}

.date{width:100%; color:#f39700; font-size:2.3rem; font-weight:600;
	display:flex; flex-wrap:wrap; justify-content:center; margin: 2rem auto;
}
.start,.start2,.end{ display:flex; flex-wrap:wrap; align-items: center;}
.start>div:nth-of-type(1),.start2>div:nth-of-type(1),.end>div:nth-of-type(1){ line-height: 3.5rem;}
.p4 .start::after{ content:"";
	width:0; height:0; margin:0 0.5rem; /* position:absolute; top: -1.2rem; left:45% ; */
	border-style: solid; border-width:.75rem 0 .75rem  1.5rem;
	border-color: transparent transparent  transparent  #ffe210;
}
.wk{ margin:0 0.25rem; padding: 0.45rem 0.4rem 0.3rem 0.4rem; font-size:1.3rem;  color: rgb(60, 43, 21);
	line-height: 1.3rem; border-radius:2rem; font-weight: bold;
	background-image: linear-gradient(to bottom,  #ffe210 0%, #ffa445 100%);
	text-shadow: none; filter: drop-shadow(0px 2px 3px (0, 0, 0, 0.7));
}
/*第一層ul*/
.article h1{margin: 1rem 0; font-size: 1.8rem; color: #f39700;line-height: 2.5rem; font-weight: bold;}
.article section>ul{ margin: 2rem 2rem 2rem 2.8rem; list-style-position: outside;}
.article section>ul>li{ font-size: 1.3rem; line-height: 2.5rem; margin:1rem 0;
	 list-style-image: url('../images/list_icon_01.png');}

/*第二層ul*/
.article h2{ color: #ffe210; margin: 1rem -.8rem; line-height: 2rem;}
.article section>ul>li>ul{margin:1rem 0 1rem 1.3rem; list-style-position: outside; }
.article section>ul>li>ul>li{ list-style-image: url('../images/list_icon_02.png');}

/*第三層ul*/
.article h3{ margin: .5rem 0rem; }
.article section>ul>li>ul>li>ul{margin:0 0 1rem 2.8rem }

/*p3的項目清單設定*/
.highlight1{ color: #ffe210;}
.highlight2{ color:#f39700;}

/*第一層ol*/
.article section>ol{ margin: 2rem; list-style-position: outside;}
.article section>ol>li{ font-size: 1.3rem; line-height: 3.2rem; list-style-type:decimal;}

/*第二層ol*/
.article h2{ color: #ffe210; margin: 1rem -.8rem; line-height: 2rem;}
.article section>ol>li>ol{margin:1rem 0 1rem 1.9rem; list-style-position: outside; }
.article section>ol>li>ol>li{ list-style-type:upper-alpha;}

/*p3內文設定*/
.article p{
    font-size: 1.3rem;line-height: 3rem; margin: 1.5rem 0;
    text-indent: revert;	text-align:justify;
}
.article table td{font-size: 1.3rem;}
.article table{margin: 2rem auto; width: 100%;  box-shadow: 0px 0px 8px #000000;}
.article table td img{max-width:55px ; min-width: 45px;}
.p3 .article table thead td {background-color: rgba(25,15,1,0.7);}
.p3 .article table tbody td {background-color: rgba(51,36,24,0.7);}

.p3 .article table thead td:nth-of-type(1),.p3 table thead td:nth-of-type(2){text-align: center;}
.p3 .article table td:nth-of-type(1){width: 15%; padding: .5rem 1.8rem; text-align: center;}
.p3 .article table td:nth-of-type(2){width: 20%; text-align: center;}
.p3 .article table td:nth-of-type(3) { width: 60%; padding: 1rem 1.5rem; line-height: 2.5rem;}

@media screen and (max-width: 1250px) {
	.p1 .article .pic,.p3 .article .pic {width: 80%;}
	.article{padding:0 1rem;}
	.page_content{width:100%;}

}
@media screen and (max-width: 950px) {
	.p1 .article .pic,.p3 .article .pic {width: 90%;}
	.subtitle{max-width:400px;}
	.al_center{ width: 100%; margin: 0 auto;}

}

@media screen and (max-width: 640px) {
	.p1 .article .pic,.p3 .article .pic {width: 95%;}
	.subtitle{max-width:350px;}
	.date{font-size:1.8rem;}	
	.article h1{ margin: 1rem 0; }
	.article section>ul{ margin: 1rem 0 1rem 1rem; }
    .article section>ol{ margin: 2rem 1.2rem 2rem 1.2rem;}
	.bg_content_bot{bottom:-.8rem}
	.bg_content_top{top:-.8rem}

/*小板表格改寫*/
    .article table{border:0;}
	.article table thead{display:none;}
	.article table tbody tr, .article table tbody td{ display: block;}
	.article table tbody td{
		width:100% !important; padding:0;
		display:flex; display:-ms-flexbox;	flex-direction: row; -ms-flex-direction:row; justify-content:center;-ms-flex-pack:center;}
	.article table td{border-bottom:0;}
	.article table tbody td>span{width:80%;  display:inline-block;}
	.article table tbody td>span,.article table tbody td::before{padding:.75rem;}

	.article table tbody td::before,.present_content table tbody td::before
	{ width:20%; background-color:rgba(25,15,1,0.7); color:white; display:inline-block; border-right:1px solid rgba(51,36,24,0.7);}

	/*小版表格外框*/
	/*.wrapper table td:nth-of-type(1), .wrapper2 table td:nth-of-type(1){border-top: #ac9d91 1px solid;}
	.wrapper table td:last-of-type, .wrapper2 table td:last-of-type{border-bottom: #ac9d91 1px solid;}
	.wrapper table td, .wrapper2 table td{border-right: #ac9d91 1px solid;}*/

    .article table tbody>tr>td:nth-of-type(1)::before{ content:"圖示";}
	.article table tbody>tr>td:nth-of-type(2)::before{ content:"技能名稱"; font-size: 1.2rem; font-weight: normal;}
	.article table tbody>tr>td:nth-of-type(3)::before{ content:"說明"; text-align: center;}
	.p3 .article table td:nth-of-type(1),.p3 .article table td:nth-of-type(3){padding: 0;}
	.p3 .article table tr:nth-of-type(2) td:nth-of-type(1){border-top:1px solid rgba(0,0,0,0.7);}
}
@media screen and (max-width: 320px) {
ul.top_menu{width: 60%;}
}