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

* { box-sizing: border-box;}

body { background-color: #37124a;}

img {
	display: block;
	max-width:100%;
}

p {
	font-weight: 400;
	font-size: 20px;
    line-height: 30px;
	letter-spacing: 1px;
	margin-top: 2.5%;
}

ol {
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 1px;
	color: #1a1a1a;
	list-style-position: inside;
	margin-top: 2.5%;
	margin-left: 24px;
	text-indent: -24px;
}

li {
	line-height: 30px;
	margin-top: 5px;
}

ol.list {
	margin-left: 45px;
	text-indent: -25px;
}

ol.list li {
	list-style-type: none;
	counter-increment: cnt;
}

ol.list li::before {
	content: "(" counter(cnt) ") ";
}

table {
	width: 100%;
	border: 0px;
	border-spacing: 3px;
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	vertical-align: middle;
	word-wrap: break-word;
	word-break: break-all;
	margin-top: 2.5%;
}

table th {
	font-weight: 600;
	border-radius: 10px;
	padding: 10px 20px;
	color: #fff;
	background-color: #440062;
}

table td {
    background-color: #cbbfd2;
	border-radius: 10px;
	padding: 10px 20px;
}

table tr.sr td {
    background-color: #b19eba;
}

td.tc { text-align: left;}

.red {
	color: #ff0000;
	margin-top: 0;
}

.pabox {
	position: absolute;
	width: 100%;
	height: 100%;
}

.wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background-color: #5e4a61;
}

.kv {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 48.4375%;
	display: block;
	background-image: url(../images/kv.jpg);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.home {
	position: absolute;
	width: 11.0938%;
	height: 0;
	padding-bottom: 7.7604%;
	display: block;
	background-image: url(../images/logo_tlcc.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	top: 2.6882%;
	left: 1.3021%;
}

.home:hover { filter: brightness(110%);}

.topbox {
	width: 100%;
	padding: 1.3021%;
	display: flex;
	flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.uid, .login, .logout {
	position: relative;
	font-size: 30px;
	font-size: min(max(1.57vw, 15px), 30px);
	line-height: 30px;
	line-height: min(max(1.57vw, 15px), 30px);
	padding: 10px;
	border: 2px solid #eb6100;
	border-radius: 10px;
	background-color: #ffecde;
	display: inline-block;
}

.uid {
	font-weight: 600;
	background-color: #ffecde;
	margin-right: 0.5208%;
	display: none;
}

.uid.on { display: block;}

.login, .logout {
	color: #fff;
	background-color: #eb6100;
	margin-right: 0.5208%;
	cursor: pointer;
	display: none;
}

.login.on, .logout.on { display: block;}

.login:hover, .logout:hover { filter: brightness(110%);}

.fbbtn ,.linebtn {
	width: 4.1667%;
	height: 0;
	padding-bottom: 4.1667%;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.fbbtn {
	background-image: url(../images/icon_fb.png);
	margin-right: 0.5208%;
}

.fbbtn:hover { filter: brightness(125%);}

.linebtn { background-image: url(../images/icon_line.png);}

.linebtn:hover { filter: brightness(110%);}

.slogan, .light1, .light2, .light3, .play {
	position: absolute;
	height: 0;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.slogan {
	width: 34.4271%;
	padding-bottom: 17.9688%;
	top: 38%;
	left: 32.8%;
	background-image: url(../images/slogan.png);
}

.light1, .light2, .light3 {
	width: 15%;
	padding-bottom: 15%;
	background-image: url(../images/light.png);
}

.light1 {
	top: 19.5%;
	left: 10.5%;
}

.light2 {
	top: 30.5%;
	right: 12.5%;
	animation-delay: 0.5s;
}

.light3 {
	top: 77.5%;
	left: 42.5%;
	animation-delay: 1s;
}

.play {
	width: 10.3646%;
	padding-bottom: 9.3646%;
	top: 28.5%;
	right: 35%;
	background-image: url(../images/play.png);
	cursor: pointer;
}

.play:hover { filter: brightness(110%);}

.menu {
	width: 100%;
	margin-top: 30.6%;
	display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: center;
}

.menu01, .menu02, .menu03, .menu04 {
	position: relative;
	width: 15.1042%;
	height: 0;
	padding-bottom: 8.2292%;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	z-index: 1;
}

.menu01, .menu02, .menu03 { margin-right: -0.8%;}

.menu01 {
	background-image: url(../images/menu_01.png);
	cursor: pointer;
}

.menu01:hover { background-image: url(../images/menu_01-.png);}

.menu02 {
	background-image: url(../images/menu_02.png);
	cursor: pointer;
}

.menu02:hover { background-image: url(../images/menu_02-.png);}

.menu03 { background-image: url(../images/menu_03.png);}

.menu03:hover { background-image: url(../images/menu_03-.png);}

.menu04 { background-image: url(../images/menu_04.png);}

.menu04:hover { background-image: url(../images/menu_04-.png);}

.newserver {
	width: 82.4138%;
	margin-top: -36%;
	margin-left: -47%;
	animation-delay: 0.5s;
}

.cupcake, .ribbon {
	height: 0;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.cupcake {
	width: 66.1088%;
	padding-bottom: 97.9079%;
	display: block;
	background-image: url(../images/cupcake.png);
	margin: 0 auto;
}

.ribbon {
	width: 100%;
	padding-bottom: 31.7992%;
	display: none;
	background-image: url(../images/ribbon.png);
	margin-top: -9%;
}

.ribbon.on { display: block;}

.loginnote {
	width: 21.9271%;
	height: 0;
	padding-bottom: 2.4479%;
	display: block;
	background-image: url(../images/login_note.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
	animation-delay: 1s;
	cursor: pointer;
}

.bg {
	width: 100%;
	display: block;
	background: url(../images/bg.jpg);
	background-size: 100%;
	background-position: top center;
	background-repeat: repeat-y;
	margin: 0 auto;
	padding-bottom: 1.0417%;
}

.smenu {
	width: 100%;
	margin: 0 auto;
	padding: 1.3021% 0;
	display: flex;
	flex-direction: row;
    justify-content: center;
}

.btn01, .btn02, .btn03, .btn04, .btn05, .btn06 {
	width: 15.7292%;
	height: 0;
	padding-bottom: 5.5729%;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.btn01 { background-image: url(../images/btn_01.png);}
.btn01:hover { background-image: url(../images/btn_01-.png);}

.btn02 { background-image: url(../images/btn_02.png);}
.btn02:hover { background-image: url(../images/btn_02-.png);}
.btn02.on { background-image: url(../images/btn_02_on.png);}

.btn03 { background-image: url(../images/btn_03.png);}
.btn03:hover { background-image: url(../images/btn_03-.png);}
.btn03.on { background-image: url(../images/btn_03_on.png);}

.btn04 { background-image: url(../images/btn_04.png);}
.btn04:hover { background-image: url(../images/btn_04-.png);}
.btn04.on { background-image: url(../images/btn_04_on.png);}

.btn05 { background-image: url(../images/btn_05.png);}
.btn05:hover { background-image: url(../images/btn_05-.png);}

.btn06 { display: none;}
.btn06 { background-image: url(../images/btn_06.png);}
.btn06:hover { background-image: url(../images/btn_06-.png);}

.frametop, .framemiddle, .framebottom {
	width: 64%;
	display: block;
	background-size: 100%;
	background-position: top center;
	margin: 0 auto;
}

.frametop, .framebottom {
	height: 0;
	padding-bottom: 3.2292%;
	background-repeat: no-repeat;
}

.framemiddle { background-repeat: repeat-y;}

.frametop {
	background-image: url(../images/frame_top.png);
	margin-top: 1.0417%;
}

.framemiddle { background-image: url(../images/frame_middle.png);}

.framebottom { background-image: url(../images/frame_bottom.png);}

.content {
	position: relative;
	width: 81.9672%;
	margin: 0 auto;
}

.bigtitle {
	width: 57.8%;
	height: 0;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.bt0101, .bt0102, .bt0103, .bt0104, .bt0105, .bt0106, .bt0107, .bt0108, 
.bt0201, .bt0202, .bt0203, .bt0204, .bt0205, .bt0206, .bt0207, 
.bt0302, .bt0303, .bt0304, .bt0305, .bt0306, .bt0307 { padding-bottom: 5%;}

.bt0301, .bt0308 { padding-bottom: 10%;}

.bt0101 { background-image: url(../images/title_0101.png);}

.bt0102 { background-image: url(../images/title_0102.png);}

.bt0103 { background-image: url(../images/title_0103.png);}

.bt0104 { background-image: url(../images/title_0104.png);}

.bt0105 { background-image: url(../images/title_0105.png);}

.bt0106 { background-image: url(../images/title_0106.png);}

.bt0107 { background-image: url(../images/title_0107.png);}

.bt0108 { background-image: url(../images/title_0108.png);}

.bt0201 { background-image: url(../images/title_0201.png);}

.bt0202 { background-image: url(../images/title_0202.png);}

.bt0203 { background-image: url(../images/title_0203.png);}

.bt0204 { background-image: url(../images/title_0204.png);}

.bt0205 { background-image: url(../images/title_0205.png);}

.bt0206 { background-image: url(../images/title_0206.png);}

.bt0207 { background-image: url(../images/title_0207.png);}

.bt0301 { background-image: url(../images/title_0301.png);}

.bt0302 { background-image: url(../images/title_0302.png);}

.bt0303 { background-image: url(../images/title_0303.png);}

.bt0304 { background-image: url(../images/title_0304.png);}

.bt0305 { background-image: url(../images/title_0305.png);}

.bt0306 { background-image: url(../images/title_0306.png);}

.bt0307 { background-image: url(../images/title_0307.png);}

.bt0308 { background-image: url(../images/title_0308.png);}

.preface {
	font-weight: 600;
	text-align: center;
	margin-top: 5%;
}

.title {
	margin-top: 5%;
	display: flex;
	flex-direction: row;
    align-items: center;
}

.title p {
	font-family: "Noto Serif TC" !important;
	font-size: 30px;
	font-weight: 800;
	color: #004986;
	margin-top: -4px;
}

.star {
	width: 30px;
	height: 30px;
	display: block;
	background-image: url(../images/title_icon.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-right: 0.5%;
}

.sect01, .sect02, .sect03 {
	width: 110px;
	height: 0;
	padding-bottom: 48px;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-right: 0.5%;
}

.sect01 { background-image: url(../images/sect_01.png);}

.sect02 { background-image: url(../images/sect_02.png);}

.sect03 { background-image: url(../images/sect_03.png);}

.sects {
	width: 100%;
	margin-top: 2.5%;
	display: flex;
}

.imgbox {
	width: 100%;
	display: flex;
	flex-direction: column;
    align-items: center;
}

.imgbox p {
	font-size: 12.5px;
	line-height: 12.5px;
	margin-top: 0.5%;
}

.setbox {
	margin-top: 2.5%;
}

.setn {
	margin-top: -2.9%;
}

.imgn {
	margin-top: -3.4%;
}

.cardn {
	margin-top: 0.5%;
}

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

.gotop {
	position: fixed;
	width: 3.9583%;
	height: 0;
	padding-bottom: 3.9583%;
	display: block;
	background-image: url(../images/gotop.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	right: 0.7813%;
	bottom: 2.0833%;
	cursor: pointer;
}

.gotop:hover { filter: brightness(110%);}

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

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

/* 影片 */
.videoclose {
	position: absolute;
	width: 3.4722%;
	height: 0;
	padding-bottom: 3.4722%;
	right: 0;
	top: -6.9444%;
	display: block;
	background-image: url(../images/close.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 2;
}

.videoclose:hover { filter: brightness(110%);}

.video {
	position: relative;
	width: 75%;
	margin: 02.6042% auto 0 auto;
	display: none;
}

.video.on {
	display: block;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.unlog {
	width: 12.9688%;
	height: 0;
	padding-bottom: 12.9688%;
	display: none;
	background-image: url(../images/login_note_bg.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.unlog.on { display: block;}

.confirm, .check {
	height: 0;
	display: block;
	background-image: url(../images/btn_confirm.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.confirm:hover { filter: brightness(110%);}

.confirm {
	width: 32.1285%;
	padding-bottom: 15.261%;
	margin: 59% auto 0 auto;
}

.check {
	width: 8.7816%;
	padding-bottom: 4.1712%;
	margin: 26.5% auto 0 auto;
}

.award {
	width: 47.4479%;
	height: 0;
	padding-bottom: 44.4271%;
	display: none;
	background-image: url(../images/award_bg.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.award.on { display: block;}

.stamp {
	width: 80.2415%;
	height: 0;
	padding-bottom: 54.8847%;
	margin: 5.0494% auto 0 auto;
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	justify-content: space-between;
}

.stamp01, .stamp02, .stamp03, .stamp04 {
	width: 18.6047%;
	height: 0;
	padding-bottom: 18.6047%;
	background-image: url(../images/stamp.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	display: none;
	margin: 0 11%;
}

.stamp03, .stamp04 { margin-top: 31.5%;}

.stamp01.on, .stamp02.on, .stamp03.on, .stamp04.on { display: block;}

.staytuned {
	width: 12.9688%;
	height: 0;
	padding-bottom: 8.3333%;
	background-image: url(../images/staytuned.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	display: none;
	cursor: pointer;
}

.staytuned.on { display: block;}

@media screen and (max-width:1440px) {
	.frametop, .framemiddle, .framebottom { width: 84.7222%;}

	.frametop, .framebottom { padding-bottom: 4.3056%;}
	.content { width: 81.9672%;}
}

@media screen and (max-width:1366px) {
	.frametop, .framemiddle, .framebottom { width: 89.3119%;}

	.frametop, .framebottom { padding-bottom: 4.51%;}
}

@media screen and (max-width:1024px) {
	.frametop, .framemiddle, .framebottom { width: 100%;}

	.frametop, .framebottom { padding-bottom: 5.05%;}
}

@media screen and (max-width:960px) {
	.kv {
		padding-bottom: 177.8125%;
		background-image: url(../images/kv_m.jpg);
	}

	.home {
		width: 28.3333%;
		padding-bottom: 19.7917%;
		top: 2.9308%;
		left: 5.2083%;
	}

	.topbox {
		padding: 5.2083%;
		align-items: flex-start;
	}

	.uid, .login, .logout {
		font-size: min(max(3.9vw, 15px), 30px);
		line-height: min(max(3.9vw, 15px), 30px);
	}

	.login, .logout { margin-right: -22.9167%;}

	.fbbtn ,.linebtn {
		width: 10.4167%;
		padding-bottom: 10.4167%;
		margin-top: 10.4167%;
	}

	.fbbtn { margin-right: 2.0833%;}

	.slogan {
		width: 100%;
		padding-bottom: 52.1936%;
		top: 40%;
		left: 0;
	}

	.play {
		width: 30.3125%;
		padding-bottom: 26.3125%;
		top: 29%;
		right: 7.5%;
	}

	.menu {
		margin-top: 105%;
		flex-wrap: wrap;
	}

	.menu01, .menu02, .menu03, .menu04 {
		width: 33.4375%;
		padding-bottom: 18.2292%;
	}

	.menu01, .menu02, .menu03 { margin-right: 0;}

	.loginnote {
		width: 43.8542%;
		padding-bottom: 4.8958%;
	}

	.smenu { flex-wrap: wrap;}

	.btn01, .btn02, .btn03, .btn04, .btn05, .btn06 {
		width: 31.4583%;
		padding-bottom: 11.1458%;
	}

	.frametop, .framemiddle, .framebottom { width: 97.7083%;}

	.frametop, .framebottom { padding-bottom: 6.4583%;}

	.frametop { background-image: url(../images/frame_top_m.png);}

	.framemiddle { background-image: url(../images/frame_middle_m.png);}

	.framebottom { background-image: url(../images/frame_bottom_m.png);}


	.content { width: 83.7953%;}

	.bigtitle { width: 73.5369%;}

	.bt0101, .bt0102, .bt0103, .bt0104, .bt0105, .bt0106, .bt0107, .bt0108, 
	.bt0201, .bt0202, .bt0203, .bt0204, .bt0205, .bt0206, .bt0207, 
	.bt0302, .bt0303, .bt0304, .bt0305, .bt0306, .bt0307 { padding-bottom: 6.3613%;}

	.bt0301, .bt0308 { padding-bottom: 17.301%;}

	.sects { flex-direction: column;}

	.sectbox { margin-top: 2.5%;}

	.gotop {
		width: 7.9167%;
		padding-bottom: 7.9167%;
		right: 2.6042%;
		bottom: 2.9291%;
	}

		.unlog {
		width: 25.9375%;
		padding-bottom: 25.9375%;
	}

	.award {
		width: 90%;
		padding-bottom: 84.2708%;
	}

	.staytuned {
		width: 25.9375%;
		padding-bottom: 16.6667%;
	}
}

@media screen and (max-width:480px) {
	p {
		font-size: 16px;
		line-height: 26px;
	}

	ol {
		font-size: 16px;
		margin-left: 20px;
		text-indent: -20px;
	}

	li { line-height: 26px;}

	ol.list {
		margin-left: 38px;
		text-indent: -21px;
	}

	table {
		font-size: 16px;
		line-height: 26px;
	}

	table th {
		border-radius: 5px;
		padding: 10px;
	}
	
	table td {
		border-radius: 5px;
		padding: 10px;
	}

	.uid, .login, .logout {
		font-size: 20px;
		font-size: min(max(4.3vw, 10px), 20px);
		line-height: 20px;
		line-height: min(max(4.3vw, 10px), 20px);
	}

	.login, .logout { margin-right: -22.9167%;}

	.fbbtn ,.linebtn { margin-top: 14.5833%;}

	.slogan {
		width: 89.5833%;
		padding-bottom: 46.6667%;
		top: 38.5%;
		left: 6%;
	}

	.play {
        top: 28.5%;
        right: 2%;
    }

	.menu { margin-top: 93%;}

	.loginnote {
		width: 87.7083%;
		padding-bottom: 9.7917%;
	}

	.frametop, .framebottom { padding-bottom: 6.429%;}

	.bigtitle {
		width: 100%;
		padding-bottom: 8.6505%;
	}

	.title {
		margin-top: 13%;
	}

	.title p { font-size: 26px;}

	.star {
		width: 26px;
		height: 26px;
	}

	.imgbox p {
		margin-top: 5%;
	}

	.sect01, .sect02, .sect03 {
		width: 83px;
		padding-bottom: 36px;
	}

	.gotop {
		width: 14.1667%;
		padding-bottom: 15.4167%;
	}

	.unlog {
		width: 51.875%;
		padding-bottom: 51.875%;
	}

	.award {
		width: 89.5833%;
		padding-bottom: 162.9167%;
		background-image: url(../images/award_bg_m.png);
	}

	.stamp {
		width: 38.1395%;
		padding-bottom: 141.3953%;
		margin: 18.8372% 0 0 9.7674%;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: normal;
		align-items: center;
	}

	.stamp01, .stamp02, .stamp03, .stamp04 {
		width: 54.2683%;
		padding-bottom: 54.2683%;
		margin: 0 auto;
	}

	.stamp02 { margin-top: 43.9024%;}

	.stamp03 { margin-top: 51.2195%;}

	.stamp04 { margin-top: 58.5366%;}

	.check {
		width: 18.6047%;
		padding-bottom: 8.8372%;
		margin: 6.9767% auto 0 auto;
	}

	.staytuned {
		width: 51.875%;
		padding-bottom: 33.3333%;
	}
}