@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600&display=swap');
body, 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;
	font-family: 'Noto Sans TC', '微軟正黑體', 'Helvetica', 'Arial', sans-serif !important;
	}

* {box-sizing: border-box;}

img{ max-width:100%;}

.content {
	width: 100%;
	margin: 0 auto;
}

.kv {
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 60.4%;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.kv1 {
	background-image: url(../img/bg_01.jpg);
}

.kv2 {
	background-image: url(../img/bg_02.jpg);
}

.kv3 {
	background-image: url(../img/bg_03.jpg);
}

.kv4 {
	background-image: url(../img/bg_04.jpg);
}

.back {
	width: 4.4%;
	height: 0;
	padding-bottom: 4.4%;
	background-image: url(../img/back.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-top: 22.3%;
	margin-right: -6.35%;
	float: right;
	cursor: pointer;
}

.dabtnbg {
	margin-top: 15.15%;
}

.eventbg {
	display: block;
	width: 100%;
	background-size: 100%, 100%;
	background-position: top center, top center;
	background-repeat: repeat-y, repeat-y;
	display: flex;
	flex-direction: column;
    align-items: center;
}

.eventbg1 {
	background-image: url(../img/event_bg_01.png), url(../img/event_bg.jpg);
}

.eventbg2 {
	background-image: url(../img/event_bg_02.png), url(../img/event_bg.jpg);
}

.eventbg3 {
	background-image: url(../img/event_bg_03.png), url(../img/event_bg.jpg);
}

.eventbg4 {
	background-image: url(../img/event_bg_04.png), url(../img/event_bg.jpg);
}

.textbg {
	display: block;
	width: 56%;
	background-image: url(../img/text_bg.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: repeat-y;
}

.textbox {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 5%;
}

p {
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.875rem;
	color: #402203;
}

.tac {
	text-align: center;
}

.submenu {
	display: flex;
	flex-direction: row;
    justify-content: space-between;
	margin: 0 auto;
}

.subbtn {
	display: block;
	height: 0;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.submenu1 {
	width: 46.3%;
	margin-top: 5%;
}

.submenu2 {
	width: 100%;
}

.submenu3 {
	width: 67%;
}

.submenu4 {
	width: 97%;
	height: 0;
	padding-bottom: 47.1%;
	background-image: url(../img/btn_04_bg.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	flex-wrap: wrap;
	justify-content: normal;
}

.sbtn0101, .sbtn0102 {
	width: 47.3002%;
	padding-bottom: 15.9827%;
}

.sbtn0101 {
	background-image: url(../img/btn_01_01-.png);
}
.sbtn0101.on, .sbtn0101:hover {
	background-image: url(../img/btn_01_01.png);
}

.sbtn0102 {
	background-image: url(../img/btn_01_02-.png);
}
.sbtn0102.on, .sbtn0102:hover {
	background-image: url(../img/btn_01_02.png);
}

.sbtn0201, .sbtn0202, .sbtn0203, .sbtn0204, .sbtn0205 {
	width: 20.1%;
	padding-bottom: 6.8%;
}

.sbtn0201 {
	background-image: url(../img/btn_02_01-.png);
}
.sbtn0201.on, .sbtn0201:hover {
	background-image: url(../img/btn_02_01.png);
}

.sbtn0202 {
	background-image: url(../img/btn_02_02-.png);
}
.sbtn0202.on, .sbtn0202:hover {
	background-image: url(../img/btn_02_02.png);
}

.sbtn0203 {
	background-image: url(../img/btn_02_03-.png);
}
.sbtn0203.on, .sbtn0203:hover {
	background-image: url(../img/btn_02_03.png);
}

.sbtn0204 {
	background-image: url(../img/btn_02_04-.png);
}
.sbtn0204.on, .sbtn0204:hover {
	background-image: url(../img/btn_02_04.png);
}
.sbtn0205 {
	background-image: url(../img/btn_02_05-.png);
}
.sbtn0205.on, .sbtn0205:hover {
	background-image: url(../img/btn_02_05.png);
}

.sbtn0301, .sbtn0302, .sbtn0303, .sbtn0304, .sbtn0305 {
	width: 14.0299%;
	padding-bottom: 48.806%;
}

.sbtn0301 {
	background-image: url(../img/btn_03_01-.png);
}
.sbtn0301.on, .sbtn0301:hover {
	background-image: url(../img/btn_03_01.png);
}

.sbtn0302 {
	background-image: url(../img/btn_03_02-.png);
}
.sbtn0302.on, .sbtn0302:hover {
	background-image: url(../img/btn_03_02.png);
}

.sbtn0303 {
	background-image: url(../img/btn_03_03-.png);
}
.sbtn0303.on, .sbtn0303:hover {
	background-image: url(../img/btn_03_03.png);
}

.sbtn0304 {
	background-image: url(../img/btn_03_04-.png);
}
.sbtn0304.on, .sbtn0304:hover {
	background-image: url(../img/btn_03_04.png);
}
.sbtn0305 {
	background-image: url(../img/btn_03_05-.png);
}
.sbtn0305.on, .sbtn0305:hover {
	background-image: url(../img/btn_03_05.png);
}

.sbtn0401, .sbtn0402, .sbtn0403 {
	padding-bottom: 10.5155%;
}

.sbtn0401 {
	width: 23.0928%;
	background-image: url(../img/btn_04_01-.png);
	margin-top: 4%;
	margin-left: 11.8%;
}
.sbtn0401.on, .sbtn0401:hover {
	background-image: url(../img/btn_04_01.png);
}

.sbtn0402 {
	width: 27.2165%;
	background-image: url(../img/btn_04_02-.png);
	margin-left: 24.8%;
}
.sbtn0402.on, .sbtn0402:hover {
	background-image: url(../img/btn_04_02.png);
}

.sbtn0403 {
	width: 31.4433%;
	background-image: url(../img/btn_04_03-.png);
	margin-top: 12.1%;
	margin-left: 51.5%;
}
.sbtn0403.on, .sbtn0403:hover {
	background-image: url(../img/btn_04_03.png);
}

.title {
	display: block;
	width: 63.2%;
	margin: 0 auto;
	margin-top: 5%;
}

.mt50 {
	margin-top: 5%;
}

.mt25 {
	margin-top: 2.5%;
}

.table {
	width: 100%;
	border: 0;
	border-spacing: 3px;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.875rem;
	color: #402203;
	text-align: center;
	vertical-align: middle;
}

.table1 th {
	font-weight: 600;
	line-height: 1.25rem;
	border-radius: 5px;
	padding: 10px;
	color: #fff;
	background-color: #d15700;
}

.table1 td {
    background-color: #f9e9de;
	border-radius: 5px;
	padding: 20px;
}

.table1 tr.sr td {
    background-color: #f3d5bf;
}

.table2 th {
	font-weight: 600;
	line-height: 1.25rem;
	border-radius: 5px;
	padding: 10px;
	color: #fff;
	background-color: #cc0047;
}

.table2 td {
    background-color: #f8dee7;
	border-radius: 5px;
	padding: 20px;
}

.table2 tr.sr td {
    background-color: #f2bfd1;
}

.table td.tc {
    text-align: left;
}

.table3 th {
	font-weight: 600;
	line-height: 1.25rem;
	border-radius: 5px;
	padding: 10px;
	color: #fff;
	background-color: #a40000;
}

.table3 td {
    background-color: #f3dede;
	border-radius: 5px;
	padding: 20px;
}

.table3 tr.sr td {
    background-color: #e8bfbf;
}

.table4 th {
	font-weight: 600;
	line-height: 1.25rem;
	border-radius: 5px;
	padding: 10px;
	color: #fff;
	background-color: #00736d;
}

.table4 td {
    background-color: #deedec;
	border-radius: 5px;
	padding: 20px;
}

.table4 tr.sr td {
    background-color: #bfdcda;
}

.table td.tc {
    text-align: left;
}

ol {
	margin-left: 2.75%;
}

li {
	color: #402203;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.875rem;
}

.image {
	display: block;
	margin: 0 auto;
	margin-top: 2.5%;
}

.red {
	color: #ff0000;
	font-weight: 600;
}

.rmark {
	color: #ff0000;
	text-align: center;
}

.note {
	color: #ff0000;
	font-weight: 600;
	text-align: center;
	margin-top: 2.5%;
}

.gidbox {
	width: 100%;
	margin-top: 2.5%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.inputbox {
	display: flex;
	flex-direction: column;
    align-items: flex-end;
}

.howto {
	width: 48%;
	margin-top: 2.5%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	cursor: pointer;
}

.howto p {
	line-height: 1.25rem;
	margin-left: 1.5%;
}

.qmark {
	display: block;
	width: 20px;
	height: 0;
	padding-bottom: 20px;
	background-image: url(../img/question_mark.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-top: -2.5%;
}

.gidinput {
	font-weight: 400;
	font-size: 1.25rem;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
}

.gidbtnbox {
	width: 20.6%;
	display: flex;
}

.gidbtn {
	display: block;
	width: 50%;
	height: 0;
	padding-bottom: 27.1845%;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.sendbtn {
	background-image: url(../img/btn_send.png);
	margin-left: 2%;
}

.clearbtn {
	background-image: url(../img/btn_clear.png);
	margin-left: 1%;
}

.tablebox {
	width: 100%;
	margin-top: 5%;
	display: none;
}

.score {
	font-size: 1.875rem;
	text-align: center;
}

.stable {
	width: 100%;
	margin-left: 0;
}

.pagination-awards {
	width: 100%;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.875rem;
	margin: 0 auto;
	text-align: center;
	margin-top: 1%;
}

.pagination-awards .txt { 
	color: #522c04;
}

.pagination-awards ul.pagination {
    padding: 0;
    margin: 0;
}
.pagination-awards ul.pagination li { display: inline;}
.pagination-awards ul.pagination li a {
	text-decoration: none;
	padding: 2px 5px;
	color: #522c04;
}
.pagination-awards ul.pagination li a:visited {
	color: #522c04;
	background: #ebeae6;
}
.pagination-awards ul.pagination li a:hover {
	color: #361d03;
	background: #ebeae6;
}

.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 60;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: none;
}

.mask.on {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.error {
	display: none;
	width: 13.95%;
	height: 0;
	padding-bottom: 4.85%;
	background-image: url(../img/error.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.error.on {
	display: block;
}

.guide {
	display: none;
	width: 26.95%;
	height: 0;
	padding-bottom: 29.85%;
	background-image: url(../img/gid.jpg);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.guide.on {
	display: block;
}

.stitle {
	color: #00736d;
}

.top {
	position: fixed;
	right: 1.25%;
	bottom: 15%;
	width: 3%;
	height: 0;
	padding-bottom: 3%;
	background-image: url(../img/top.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 2;
}

@media screen and (max-width:1440px) {
	.textbox {
		width: 90%;
	}
}

@media screen and (max-width:960px) {
	.kv {
		padding-bottom: 194.8%;
	}
	
	.kv1 {
		background-image: url(../img/bg_01_m.jpg);
	}
	
	.kv2 {
		background-image: url(../img/bg_02_m.jpg);
	}
	
	.kv3 {
		background-image: url(../img/bg_03_m.jpg);
	}
	
	.kv4 {
		background-image: url(../img/bg_04_m.jpg);
	}

	.back {
		width: 18%;
		padding-bottom: 8.5%;
		background-image: url(../img/back_m.png);
		margin-top: 5%;
		margin-right: 2%;
	}

	.dabtnbg {
		margin-top: 139.1667%;
	}

	.eventbg1, .eventbg2, .eventbg3, .eventbg4 {
		background-image: none;
	}

	.textbg {
		width: 100%;
		background-image: url(../img/text_bg_m.jpg);
	}

	.textbox {
		width: 90%;
	}

	.submenu1 {
		width: 48.2292%;
	}

	.submenu3 {
		width: 69.7917%;
	}

	.title {
		width: 65.8333%;
	}

	ol {
		margin-left: 3.75%;
	}

	.inquirebtn {
		width: 30.787%;
		padding-bottom: 6.5972%;
		margin-left: 5.5%;
	}

	.gidbtnbox {
		width: 29.6%;
	}

	.error {
		width: 29.0625%;
		padding-bottom: 10.1042%;
	}

	.guide {
		width: 37.3958%;
		padding-bottom: 41.4583%;
	}

	.top {
		right: 5%;
		bottom: 12.5%;
		width: 6.25%;
		padding-bottom: 6.25%;
	}
}

@media screen and (max-width:480px) {
	.submenu1 {
		width: 96.4583%;
	}

	.submenu2 {
		flex-wrap: wrap;
		justify-content: center;
	}

	.sbtn0201, .sbtn0202, .sbtn0203, .sbtn0204, .sbtn0205 {
		width: 50%;
		padding-bottom: 16.875%;
	}

	.submenu3 {
		width: 100%;
	}

	.title {
		width: 100%;
	}

	p {
		font-size: 1rem;
		line-height: 1.625rem;
	}

	.table {
		width: 100%;
		font-size: 1rem;
		line-height: 1.625rem;	
		margin-left: 0;
	}

	.table th {
		line-height: 1rem;
		padding: 5px;
	}

	.table td {
		padding: 5px;
	}

	ol {
		margin-left: 6.75%;
	}

	li {
		font-size: 1rem;
		line-height: 1.625rem;
	}

	.inquirebtn {
		width: 61.5741%;
		padding-bottom: 13.1944%;
		margin: 0 auto;
	}

	.gidbox {
		flex-direction: column;
	}

	.inputbox {
		width: 100%;
	}

	.gidinput {
		width: 100%;
		font-size: 1rem;
		padding: 5px;
	}

	.gidbtnbox {
		width: 100%;
		margin-top: 2.5%;
		justify-content: center;
	}

	.gidbtn {
		width: 25%;
		padding-bottom: 14%;
	}
	
	.sendbtn {
		margin-left: 0;
	}

	.clearbtn {
		margin-left: 5%;
	}

	.pagination-awards {
		font-size: 1rem;
		line-height: 1.625rem;
	}

	.error {
		width: 58.125%;
		padding-bottom: 20.2083%;
	}

	.guide {
		width: 74.7917%;
		padding-bottom: 82.9167%;
	}

	.top {
		right: 5%;
		bottom: 12%;
	}
}