.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

html {
	font-size: 62.5%;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

a:link {
	text-decoration: none;
	color: #666;
}

a:visited {
	text-decoration: none;
	color: #666;
}

a:hover {
	text-decoration: none;
	color: #000;
}

a:active {
	text-decoration: none;
	color: #000;
}


/*-----------------------------------通用樣式 各單元樣式請加在style.css 中文版default資料夾 英文版en資料夾 兒藝中心kid資料夾---------------------------------------*/
.header {
	width: 100%;
	/*height:136px;*/
	position: relative;
	z-index: 100;
	/*overflow:hidden;*/
}

.container {
	width: 100%;
	min-height: 480px;
	height: auto !important;
	height: 100%;
	overflow-x: hidden;
}

.footer {
	/*width:100%;*/
	/*padding:50px 0 70px;*/
	/*position:relative;*/
	/*background: #f6f6f6;*/
	/*margin-top:45px;*/
}

.wrapper {
	position: relative;
	max-width: 100%;
	width: 1440px;
	/*height:100%;*/
	margin: 0 auto;
	/*overflow:hidden;*/
	/*border: 1px solid #aaa;*/
}

.header>.wrapper {
	height: auto;
	*height: 91px;
	position: relative;
}

.keyV_index>.wrapper {
	*height: auto;
}

.keyV_page>.wrapper {
	*height: auto;
}

/*-----------------------------------END--------------------------------------*/


/*background color*/
.bg-green,
tr.bg-green th {
	background: #79b936 !important;
}

.bg-light-green,
tr.bg-light-green th {
	background: #92D050 !important;
}

.bg-heavy-green,
tr.bg-heavy-green th {
	background: #6fb613 !important;
}

.bg-blue,
tr.bg-blue th {
	background: #0296cc !important;
}

.bg-white-blue,
tr.bg-white-blue th {
	background: #EFF2F4 !important;
}

.bg-light-blue,
tr.bg-light-blue th {
	background: #E8F2F8 !important;
}

.bg-heavy-blue,
tr.bg-heavy-blue th {
	background: #136bb6 !important;
}


.bg-light-yellow,
tr.bg-light-yellow th {
	background: #fff3c4 !important;
}

.bg-orange,
tr.bg-orange th {
	background: #ff9300 !important;
}

.bg-light-orange,
tr.bg-light-orange th {
	background: #f1bd20 !important;
}

.bg-high-light-gray,
tr.bg-hight-light-gray th {
	background: #f7f7f7 !important;
	color: #222222 !important;
}

.bg-light-gray,
tr.bg-light-gray th {
	background: #F9F9F9 !important;
	color: #727272 !important;
}

.bg-heavy-gray,
tr.bg-heavy-gray th {
	background: #454545 !important;
}

.bg-white,
tr.bg-white th {
	background: #ffffff !important;
}

.bg-black,
tr.bg-black th {
	background: #000000;
	color: #ffffff !important;
}

.bg-red,
tr.bg-red th {
	background: #c10000 !important;
}

.bg-heavy-red,
tr.bg-heavy-red th {
	background: #136bb6 !important;
}

.bg-violet,
tr.bg-violet th {
	background: #7030a0 !important;
}

/**/


/*font color*/
.white,
span.white {
	color: #ffffff !important;
}

.black,
span.black {
	color: #000000 !important;
}

.heavy-gray,
span.heavy-gray {
	color: #454545 !important;
}

.light-gray,
span.light-gray {
	color: #aaaaaa !important;
}

.gray,
span.gray {
	color: #666666 !important;
}

.red,
span.red {
	color: #cc0000 !important;
}

.maroon,
span.maroon {
	color: #990000 !important;
}

.yellow,
span.yellow {
	color: #fff600 !important;
}

.orange,
span.orange {
	color: #FF761B !important;
}

.green,
span.green {
	color: #0A8900 !important;
}

.deepgreen,
span.deepgreen {
	color: #669900 !important;
}

.blue,
span.blue {
	color: #0f81e5 !important;
}

.purple,
span.purple {
	color: #6800C1 !important;
}

.brown,
span.brown {
	color: #804001 !important;
}

/**/

/*20180605 yulind add*/
.showgrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*width*/
[class^="w-"] {
	float: left;
	vertical-align: top;
	margin: 0 20px 20px 0;
}

/*.w-1 { width:230px; }*/
.w-1 {
	width: calc(25% - 20px);
}

/*.w-2 { width:480px; }*/
.w-2 {
	width: calc(50% - 20px);
}

/*.w-3 { width:730px; }*/
.w-3 {
	width: calc(75% - 20px);
}

/*.w-4 { width:980px; }*/
.w-4 {
	width: calc(100% - 20px);
}

/*.w-5 { width:490px; }*/
.w-5 {
	width: 100%;
}

/*.w-6 { width:600px; }*/
.w-6 {
	width: 61%
}

/*.w-7 { width:380px; }*/
.w-7 {
	width: 39%;
}

/*.w-8 { width:590px; }*/
.w-8 {
	width: calc(61.45% - 20px);
}

/*.w-9 { width:370px; }*/
.w-9 {
	width: calc(38.55% - 20px);
}

/*.w-10 { width:313.3px; }*/
.w-10 {
	width: calc(33.3% - 20px);
}

/*.w-11 { width:134px; margin-right:17px; }*/
.w-11 {
	width: calc(25% - 17px);
	margin-right: 17px;
}

/*.w-12 { width:161px } history exhibition */
.w-12 {
	width: calc(100% - 134px - 17px)
}

.w-13 {
	width: 750px;
	*margin-right: 0;
}

/*.w-14 { width:360px; }*/
.w-14 {
	width: 36.73%;
}

/*.w-15 { width:620px; margin-right:0 !important; }*/
.w-15 {
	width: 63.27%;
	margin-right: 0 !important;
}

.w-16 {
	width: 788px;
	margin-right: -20px !important;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	float: none;
}

.w-17 {
	width: 400px;
}

.w-18 {
	width: 560px;
	margin: 0 !important;
}

.w-19 {
	width: 50%;
	margin: 0 !important;
}

/* 20180620 yulin: History event */
.w-15 .w-6 {
	width: 100%;
	padding-right: 15px;
}


.d-none {
	display: none !important;
}

/*[class^="w-"] > div { float:left; }*/
[class^="w-"].remove-margin {
	margin-right: 0;
}

[class^="w-"] .table-wrap {
	width: 100%;
	height: 100%;
	text-align: center;
}

/*[class^="w-"] a { display: block; }*/
.remove-margin {
	margin-right: 0 !important;
}


/*font-size*/
.date-middle,
.info-middle {
	font-size: 1.4rem;
	/*line-height:14px;*/
	line-height: 1.5;
}

.info-small {
	font-size: 1.2rem;
	color: #000000;
}

.date-small {
	font-size: 1.2rem;
	letter-spacing: 0;
	color: #6b6b6b;
	line-height: 12px;
}


.content {
	margin-bottom: 20px;
}

.Related-Info {
	color: #757575;
	white-space: normal;
	word-break: break-all;
	/*ie*/
	word-wrap: break-word;
	/*not effect ie*/
}

.Related-Info li {
	padding-bottom: 20px;
}

.Related-Info h6, 
.Related-Info .h6 {
	line-height: 14px;
	*line-height: normal;
}

.RelatedBox .Related-Info h6,
.RelatedBox .Related-Info .h6 {
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 8px;
	margin-bottom: 5px;
}

.RelatedBox .Related-Info li {
	padding-bottom: 0;
	color: #727272;
	font-size: 1.2rem;
}

.RelatedBox .column {
	margin-bottom: 40px;
}

.RelatedBox .Related-Info h6.unstyled,
.RelatedBox .Related-Info .h6.unstyled {
	border: none;
}

.Related-Info a:link {
	color: #757575;
}

.Related-Info a:visited {
	color: #757575;
}

.Related-Info a:hover {
	color: #000000;
}

.Related-Info a:active {
	color: #757575;
}

/*.w-14.RelatedBox .column { width:230px; margin-bottom:40px; }*/
.w-14.RelatedBox .column {
	margin-bottom: 40px;
}

.Related-Info .img {
	text-align: center;
	margin-bottom: 10px;
	width: 50%;
	margin: 0 auto 10px;
}

/*.Related-Info img { max-height:153px; margin:0 auto; }*/
.Related-Info img {
	margin: 0 auto;
}