@charset "utf-8";
/* CSS Document */
/* ---reset.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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url("../images/bg.jpg") top center repeat;
}
 	@media screen and ( max-width: 640px ){
		html{
			background-size: 30%;
		}
		
	}


/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; max-width: 1920px; margin: auto; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 640px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	
}


/* 導覽頁籤 */
.sidenav { position: fixed; left: 0; top: 80px; z-index: 99; width: 90px; border-radius:50px 50px 10px 10px; overflow: hidden; background:#4ab0cd; margin: 10px;   }
.sidenav ul { overflow: hidden;  padding: 20px 0; }
.sidenav ul li {font-weight: 500; font-size: 18px; line-height: 22px; text-align: center; color:#ebf910; }
.sidenav ul li a { display: block; color: #fff; font-size: 15px; line-height: 40px;}
.sidenav hr { margin: 12px; padding: 0; }

.sidenav li { 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.sidenav li:hover a {  background-color:#000; }
.sidenav li:hover a { color:#f9ef4d ; }
 	@media screen and ( max-width: 640px ){
		.sidenav { display: none; }
		
	}


/* title */
.title01{ top: 43px; left: 987px; position: absolute; }
.title02{ top: 144px; left: 1003px; position: absolute;}
.title03{ top: 233px; left: 993px; position: absolute;}
.title04{ top: 326px; left: 997px; position: absolute;}
.title05{ top: 47px; left: 891px; position: absolute;}
.title06{ top: 137px; left: 893px; position: absolute;}
.title07{ top: 234px; left: 893px; position: absolute;}
.title08{ top: 450px; left: 863px; position: absolute;animation:float 3s ease-in-out infinite alternate;}
.title09{ top: 55px; left: 652px; position: absolute;}
.date{ top: 58px; left: 1103px; position: absolute;}
@keyframes float {
	0% { transform: translate(0px ,-15px);}
	50% { transform: translate(-4px ,5px);}
	100% {transform: translate(0px ,-15px);}
}




h2,h3{
	font-family: 'Noto Serif TC';
	font-weight: bold;
	color: #17228a;
}
.titleB h2 {background:url("../images/h2bg.png") bottom center no-repeat; width: 1055px; padding: 15px 0;letter-spacing: 5px;}
.titleB h2::after, .titleB h2::before {display: none;}
@media screen and ( max-width: 640px ){
	.titleB h2 { width: 100%;letter-spacing: 0; font-size: 1.8rem; background-size: 120%;padding: 2vw;}
	}




/* bg */
.bg01 { background:url("../images/bg01-1.png") bottom center no-repeat,url("../images/bg01.jpg") top center repeat; }
.bg02 { background:url("../images/bg02-1.png") bottom center no-repeat,url("../images/bg02.jpg") top center repeat; }
.bg03 { background:url("../images/bg03.jpg") top center repeat;}
	@media screen and ( max-width: 640px ){
		.bg01 {}
		.bg02 {}
		.bg03 {background-size: 30%;}
	}


.broadwise li{width: 570px;}
.broadwise .twice img{width: 220px; height: 280px; }
.broadwise img{ height: 260px;}
.broadwise .font h4{color: #17248d;}
	@media screen and ( max-width: 640px ){
		.broadwise li{ width: 94vw;padding: 8vw 2vw;}
		.broadwise .twice img{width: 45vw; height: 48vw; }
		.broadwise img{ width: 45vw; height: 48vw;}
		.broadwise ul{display: flex;flex-wrap: wrap;}
		.broadwise li:nth-child(3n){ width: 94vw;}
		.broadwise li:nth-child(3n) a{ flex-wrap: nowrap;}

	}

.banner{padding: 20px 0; margin: -40px auto 20px;}
.banner li{margin: 6px 10px;}
.banner img{width: 560px;border-radius: 20px;}
	@media screen and ( max-width: 640px ){
		.banner{padding: 0; margin: 2vw auto;}
		.banner li{margin: 0.5vw;}
		.banner img{width: 100%;}
	}





.hightlight img{
	object-fit: contain;
}	


.keyword-bn .ten-word li {height: 64.3px;background: #75c8ce;font-size: 1.7rem;}	
.keyword-bn .ten-word li:nth-child(even){background: #f17957;}
.keyword-bn .four-link li{ border: none; background: #895142;}
.keyword-bn .four-link a{ color: #fff;}
	@media screen and ( max-width: 640px ){
		.keyword-bn .ten-word li {height: auto;background: #f17957;font-size: 1.2rem;padding: 4vw 0;}	
		.keyword-bn .ten-word li:nth-child(4n) { background: #75c8ce;}
		.keyword-bn .ten-word li:nth-child(4n-3) { background: #75c8ce;}
	}




.subtitle{margin: 40px auto -28px;}
.subtitle h3{background: #17228a;border-radius: 20px 20px 0 0;color: #fff;padding: 10px 30px;border-left: solid 16px #89dce2;}
.subtitle .more a{color: #fff; padding: 3px 30px;border-radius: 5px;background: #ee704c;}
.magazine ul{ border: solid 8px #89dce3;border-radius: 0 40px 40px 40px;background: #fff;}
	@media screen and ( max-width: 640px ){
			.subtitle{margin: 2vw auto -4.8vw;}
			.subtitle h3{padding: 3vw;border-left: solid 2vw #89dce2;font-size: 1.8rem;}
			.subtitle .more a{color: #fff; padding: 1vw 2vw;border-radius: 0;background: #ee704c;}
			.magazine ul{ border: solid 3px #89dce3;border-radius: 0 ;background: #fff;}
		}












/* ribbonB */
.ribbonB {display: inline-block; position: absolute; top: -6px; left: 16px; margin: 0; padding: 10px 5px ; z-index: 2; width: 30px; color: white; font-size: 1rem; line-height: 1.2rem; background: linear-gradient(#f5544a 0%, #ff81a8 100%);border-radius: 2px 0 0 0;text-align: center;}
.ribbonB:after {content: '';position: absolute;left: 0;top: 100%;height: 0;width: 0;border-left: 15px solid #ff81a8;border-right: 15px solid #ff81a8;border-bottom: 10px solid transparent;}
	@media screen and ( max-width: 640px ){
		.ribbonB { left: 1vw;width: 6vw;}
		.ribbonB:after {border-left: 3vw solid #ff81a8; border-right: 3vw solid #ff81a8;border-bottom: 10px solid transparent;}
	}










/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 640px ){
	#gotop {bottom: 2vw;right: 0;margin: 2vw;	}
	}