/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }

/* TYPE */
body { font-family: Arial, Verdana, sans-serif; font-size: 14px;  color: #666666; width: 100%; height: 100%; line-height: 1.6em; /* min-width:970px; width: 100%;  */background-color: #f7f7f7; }
#bg { position:absolute; background-color: #4d7b71; width: 100%; height: 190px; top: 60px; z-index: -1; }
ul { list-style-type: none; float: left; }
li { float: left; }
a img { border: 0;}
a { display: block; }
a:link { text-decoration: none;}
div:hover { cursor: default; }

/* LAYOUT */
#wrapper { position: relative; }

/* HEADER */
#header { height:60px; }
#rthklogo { position: absolute; left: 30px; top: 15px; z-index: 99; }

/* SLIDESHOW */
/* a img:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } */
#slide-title-image { pointer-events: none; }
#photo-slider { position: relative; }
#slide-title-image { position: absolute; display: block; top: 60px; left: 50%; margin-left:-105px; z-index: 2; }
#slide-decor-image { position: absolute; display: block; top: 135px; left: 50%; margin-left:-105px; z-index: 3; }
#slide-line { position: absolute; display: block; background-image: url("../images/slide_line.jpg"); background-repeat: repeat-x; width: 100%; top: 190px; z-index: 1; text-indent: -999px; }

/* MAIN CONTENT CONTAINERS */
#main-content { margin: 40px 15px 0px 15px; height:100%; position:relative; padding: 0 10px; }
/* .new-section-style { margin: 15px auto; overflow: hidden; width: 870px; } */
#intro-wordings { max-width: 900px; padding: 0 10px; text-align: left; font-size: 16px; line-height: 180%; margin: 15px auto; overflow: hidden; }
#navbar { margin: 15px auto 0px; display: flex; }
#container { display: flex;
    flex-wrap: wrap;
    justify-content: left;
	align-items: flex-start;
	padding: 1em 0;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
/* NAVIGATION BAR */
#nav-menu { position: relative; display: inline-flex; flex-wrap: wrap; align-items: stretch; margin: 0 auto; border: 1px solid #eeeeee; border-radius: 15px; overflow: hidden; }
#nav-menu button { display: flex; align-items: center; border: none; justify-content: center; height: 100%; box-sizing: border-box; color: #3ca28c; background-color: #ffffff; padding: 12px 22px; font-size: 16px; font-weight: bold; letter-spacing: 1px; }
#nav-menu button.is-checked { color: #ffffff !important; background-color: #2da574 !important; pointer-events: none; }
#nav-menu button:hover { background-color: #e1ece8; cursor: pointer; }

/* MAIN CONTENTS */
.row { clear: both; }
.content-block-style { position: relative; display: block; height: auto; box-sizing: border-box; padding: 15px; margin: 10px; transition: background-color .1s ease; border-radius: 20px; }
.content-block-style > a { aspect-ratio: 16 / 9; display: block; }
.content-block-style:hover { background-color: #eeeeee; }
.content-block-style > a > img { border-radius: 10px; width: 100%; filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, .15)); transition: filter .2s ease; }
.image-block-style { position: relative; margin-bottom: 1em; height: auto; aspect-ratio: 16 / 9; }
.content-block-style:hover img { filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .15)); }
.simply-scroll .simply-scroll-list li .image-block-style { width: 338px; }
.content { padding: 0 5px; }
.content-type-style, .type-link-style:visited, .type-link-style:link  { color: #3c9f76; font-size: 15px; font-weight: bold; text-decoration: none; letter-spacing: 1px; }
/*
.type-link-style:hover, .content-link-style:hover { text-decoration: underline; }
*/
.content-link-style { display: block; width: 100%; font-size: 18px; font-weight: bold; color: #4b4545; margin: 12px 0; line-height: 1.3em; }
.content-word-style { position: relative; letter-spacing: 0.03em; color: #787f7c; font-size: 15px; float: left; display: block; width: 100%; text-align: left; margin-bottom: 10px; line-height: 1.7em; }
.content-divider { position: relative; width: 100%; float: left; display: block; border-top: 1px dotted #c6c6c6; border-left: 0px; border-right: 0px; border-bottom: 0px; }
.content-update { margin-top: .5em; letter-spacing: 0.03em; }
.button-style { position: relative; float: left; display: block; color: #359b74; padding: 6px 0; background-color: #ffffff; width: 85px; text-align: center; margin: 0 3px 0px 3px; border:1px solid #c9c9c9; -moz-border-radius:5px;  -webkit-border-radius:5px; border-radius:5px; -ms-border-radius: 5px; behavior: url("PIE.htc"); line-height: 22px; }
.button-style:hover { color: #ffffff; background-color: #2da574; }
.button-style.double { padding: 3px 0; margin: 0 5px 10px 5px; line-height: 14px; font-size: 12px;}
.buttons-group { width: 290px; display:none; }
li:first-child .button-style { margin-left: 0px; }
li:last-child .button-style { margin-right: 0px; }

/* BACK TO TOP */
.back-to-top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	display: none;
	background: url('../images/back-to-top.png');
	background-size: 100%; 
	width: 50px;
	height: 0px;
	padding-top: 50px;
	overflow: hidden;
	z-index: 999;
	/* border-radius: 3px; */
	opacity: 0.8;
	transition: opacity 0.3s ease;
}
.back-to-top:hover {	
	opacity: 1;
}

/* FOOTER */
.footer-divider { width: 100%; border-top: 1px solid #dbddd4; border-left: 0px; border-right: 0px; border-bottom: 0px; margin-top: 20px; margin-bottom: 20px; }
#footer { text-align: center; margin:0 0 10px 0;  position: relative; color: #666666; padding-left: 20px; font-size: 15px; }
#remarks { position: relative; clear:both; color: #666666; text-align: right; padding-right: 15px; line-height: 3em; } 

/* SHARING */
#sharing { position: absolute; background: url('../images/btn_share.png') left top no-repeat; width: 57px; height: 30px; right: 25px; top: 15px; z-index: 98; _background: url('../images/btn_share.gif') left top no-repeat;  }
#sharing #icon-facebook { display: block; height: 22px; width: 22px; position: absolute; left: 5px; top: 5px; }
#sharing #icon-twitter { display: block; height: 22px; width: 22px; position: absolute; left: 30px; top: 5px; }
#sharing #icon-weibo { display: none; height: 22px; width: 22px; position: absolute; left: 55px; top: 5px; }

/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/**** Isotope filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

@media only screen and (max-width : 767px) {
	ul#nav-menu li { width: 50%; }
}

@media only screen and (max-width : 560px) {
	ul#nav-menu li { width: 100%; }
}

@media only screen and (min-width : 1601px) {
	.content-block-style { width: calc(20% - 20px); }
}
@media only screen and (max-width : 1600px) {
	.content-block-style { width: calc(25% - 20px); }
}
@media only screen and (max-width : 1300px) {
	.content-block-style { width: calc(33.3% - 20px); }
}
@media only screen and (max-width : 992px) {
	.content-block-style { width: calc(50% - 20px); }
}
@media only screen and (max-width : 640px) {
	.content-block-style { width: calc(100% - 20px); }
}