html { position: relative; min-height: 100%; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; }
body { width: 100%; min-width: 400px; margin-bottom: 200px; font-family:font-family: 'Open Sans', sans-serif, Helvetica, Arial, "Microsoft JhengHei", "微軟正黑體", "Apple LiGothic Medium", "蘋果儷中黑"; padding: 0; margin: 0; }
.pull-left { float: left; }
.pull-right { float: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.spacer-65 { height: 65px; }
.spacer-100 { height: 100px; }
.spacer-50 { height: 50px; }
.spacer-15 { height: 15px; }
.fz-12 { font-size:12px; }
.fz-10 { font-size:10px; }
a { text-decoration: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }
.clear { clear: both; }
.nav-bar-logo { width: 120px; text-align:left; padding:4px 0px 8px 22px; line-height:13px; float:left; }
.full-width-div { width: 100%; margin: auto;}
.footer { font-family:'Open Sans', sans-serif; width: 100%; line-height: 40px; font-size: 8px; position: absolute; left: 0; bottom: 0; color: #fff; letter-spacing:0px; right: 0; overflow:hidden;}
.footer-heading-1 { font-family:'Open Sans', sans-serif; color: #fff000; font-size:20px; font-weight:700; line-height:16px; letter-spacing:1px; display:inline-block; width:180px; height:55px; margin-top: 25px;vertical-align: top; border-right:1px solid #555;}
.footer-heading-2 { line-height:16px; display:inline-block; width:120px; height:55px; margin-top: 25px; vertical-align: top; border-right:1px solid #555;}
.footer-heading-3 { line-height:16px; display:inline-block; width:140px; height:55px; margin-top: 25px; vertical-align: top; border-right:1px solid #555;}
.footer-email a { color: #fff; font-size:11px; font-weight:300; letter-spacing:1px; }
.footer-email a:hover { color: #fff000; }
.footer-rights { font-size: 8px; width: 240px; display:inline-block; vertical-align: bottom;margin-top:50px; }
.mainContent { font-family:'Open Sans', sans-serif; color: #191919; font-weight:300; font-size:12px; line-height:18px; }
.mainContent-membersname { font-family:'Open Sans', sans-serif; color: #33622d; font-weight:700; font-size:16px; line-height:19px; }
.mainContent-memberstitle { font-family:'Open Sans', sans-serif; color: #33622d; font-weight:300; font-style:italic; font-size:14px; line-height:19px; }
.mainContent-bullet { font-family:'Open Sans', sans-serif; color: #67605A; font-weight:300; font-size:12px; line-height:18px; padding-left:15px;}
.desc { line-height:21px; font-size:16px; letter-spacing:1px; font-weight:400; }
.button-green { display: block; color: #1c5631; font-size:13px; line-height:20px; padding:10px 20px; border:1px solid #1c5631; letter-spacing:1px; text-decoration:none; margin-top: 35px; background-color: rgba(0,0,0,0);}
.button-green:hover { color: #000; border:1px solid #000; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }
#header-wrap { position: fixed; height: 32px; width: 100%; z-index: 100; background-color: rgba(0, 0, 0, .8); box-shadow: 0px 2px 4px rgba(0,0,0,0.16); }
.photos:hover { opacity: 0.7; }


@media screen and (min-width: 820px) {

/*----- Menu -----*/
.menu { align: center; float: right; }
.menu ul { margin-top: 0px; display: inline-block; }
.menu li { font-family:'Open Sans', sans-serif; float: left; list-style: none; font-size: 9px; line-spacing: 12px; font-weight: 700; vertical-align: top; text-align: right; color: #fff; letter-spacing: 1px; }
.menu a { display: inline-block; padding: 9px 20px 10px 20px; color: #fff; text-decoration: none; }
.menu a:hover, .menu .current-item a { background-color: #33622d; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }
.toggle-nav { display: none !important; }
.container { width:800px; margin: 0 auto; padding: 0 10px; }
.mainContent-header { font-family:'Open Sans', sans-serif; color: #eac900; font-weight:700; font-size:40px; line-height:48px; letter-spacing:1px; }
.mainContent-headerdark { font-family:'Open Sans', sans-serif; color: #33622d; font-weight:700; font-size:40px; line-height:48px; letter-spacing:1px; }
.mainContent-headerdark-sub { font-family:'Open Sans', sans-serif; color: #33622d; font-weight:700; font-size:35px; line-height:43px; letter-spacing:1px; }
.history-image { width:600px; padding:15px 0px; }
.history-1 { vertical-align:top; display:inline-block; width:380px; padding-right:35px; text-align:left; }
.history-2 { vertical-align:top; display:inline-block; width:380px; padding-right:0px; text-align:left; }
.patron-1 { vertical-align:top; display:inline-block; padding-right:18px; width:250px; height:220px; text-align:left; }
.patron-2 { vertical-align:top; display:inline-block; padding-right:18px; width:250px; height:220px; text-align:left; }
.patron-3 { vertical-align:top; display:inline-block; width:250px; height:220px; text-align:left; }
.exco-1 { vertical-align:top; display:inline-block; padding-right:18px; width:250px; height:80px; text-align:left; }
.exco-2 { vertical-align:top; display:inline-block; padding-right:18px; width:250px; height:80px; text-align:left; }
.exco-3 { vertical-align:top; display:inline-block; width:250px; height:80px; text-align:left; }
.exco-4 { vertical-align:top; display:inline-block; padding-right:18px; width:250px; height:80px; text-align:left; }
.exco-5 { vertical-align:top; display:inline-block; padding-right:18px; width:250px; height:80px; text-align:left; }
.exco-6 { vertical-align:top; display:inline-block; width:250px; height:80px; text-align:left; }
.video-1 { display:inline-block; padding-right:12px; }
.video-2 { display:inline-block; }
.video-3 { display:inline-block; padding-right:12px; }
.video-4 { display:inline-block; }
.photos { width: 140px; display: inline-block; vertical-align: top; padding: 8px; }
.footer-container { align: left; margin: 0 40px; }

}

/*----- Responsive -----*/

@media screen and (max-width: 820px) {
	
.menu { float: right; position: relative; display: inline-block; }
.menu ul.active { display: none; }
.menu ul { width: 820px; position: absolute; top: 80%; right: 0px; background: rgba(0, 0, 0, .8); }
.menu ul:after { width: 0px; height: 0px; position: absolute; top: 0%; right: 15px; content: ''; transform: translate(0%, -100%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(0, 0, 0, .8); }
.menu li { font-family:'Open Sans', sans-serif; padding: 0px; float: none; display: block; font-size: 12px; line-spacing: 16px; font-weight: 700; vertical-align: top; text-align: right; letter-spacing: 1px; border-bottom: 1px solid rgba(255, 255, 255, .4); padding:10px 0px; }
.menu li:hover, .menu li.active, .current-item { background-color: #33622d; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }
.menu a { padding: 4px 10px 4px 10px; display: inline-block; color: #fff; text-decoration: none; }
.toggle-nav { float: right; font-size: 18px; color: #fff; text-decoration: none; }
.toggle-nav:hover, .toggle-nav.active { background-color: #33622d; transition: color linear 0.15s; }
.container { width: 90%; margin: 0 auto; padding: 0 10px; }
.mainContent-header { font-family:'Open Sans', sans-serif; color: #eac900; font-weight:700; font-size:30px; line-height:38px; letter-spacing:1px; }
.mainContent-headerdark { font-family:'Open Sans', sans-serif; color: #33622d; font-weight:700; font-size:30px; line-height:38px; letter-spacing:1px; }
.mainContent-headerdark-sub { font-family:'Open Sans', sans-serif; color: #33622d; font-weight:700; font-size:25px; line-height:33px; letter-spacing:1px; }
.history-image { width:500px; padding:15px 0px; }
.history-1 { vertical-align:top; display:inline-block; width:80%; padding-right:0px; text-align:left; }
.history-2 { vertical-align:top; display:inline-block; width:80%; padding-right:0px; text-align:left; }
.patron-1 { vertical-align:top; display:inline-block; padding-right:18px; width:180px; height:220px; text-align:left; }
.patron-2 { vertical-align:top; display:inline-block; padding-right:18px; width:180px; height:220px; text-align:left; }
.patron-3 { vertical-align:top; display:inline-block; width:180px; height:220px; text-align:left; }
.exco-1 { vertical-align:top; display:inline-block; padding-right:18px; width:180px; height:100px; text-align:left; }
.exco-2 { vertical-align:top; display:inline-block; padding-right:18px; width:180px; height:100px; text-align:left; }
.exco-3 { vertical-align:top; display:inline-block; width:180px; height:100px; text-align:left; }
.exco-4 { vertical-align:top; display:inline-block; padding-right:18px; width:180px; height:100px; text-align:left; }
.exco-5 { vertical-align:top; display:inline-block; padding-right:18px; width:180px; height:100px; text-align:left; }
.exco-6 { vertical-align:top; display:inline-block; width:180px; height:100px; text-align:left; }
.video-1 { display:inline-block; padding:0px 0px 15px 0px; }
.video-2 { display:inline-block; }
.video-3 { display:inline-block; padding:0px 0px 15px 0px; }
.video-4 { display:inline-block; }
.photos { width: 100px; display: inline-block; vertical-align: top; padding: 6px 4px; }
.footer-container { width: 90%; align: center; margin: 0 auto; }
.footer-rights { font-size: 8px; width: 240px; display:inline-block; vertical-align: bottom; margin-top:50px; text-align:right; }

}

@media screen and (max-width: 754px) {

.footer-rights { font-size: 8px; width: 240px; display:block; vertical-align: bottom; margin-top:10px; text-align:right; }

}

@media screen and (max-width: 670px) {

.container { width: 90%; margin: 0 auto; padding: 0 10px; }
.photos { width: 80px; display: inline-block; vertical-align: top; padding: 5px 3px; }
.patron-1 { vertical-align:top; display:block; padding-right:0px; width:90%; height:200px; text-align:left; }
.patron-2 { vertical-align:top; display:block; padding-right:0px; width:90%; height:140px; text-align:left; }
.patron-3 { vertical-align:top; display:block; width:90%; height:140px; text-align:left; }
.exco-1 { vertical-align:top; display:block; padding-right:0px; width:90%; height:100px; text-align:left; }
.exco-2 { vertical-align:top; display:block; padding-right:0px; width:90%; height:100px; text-align:left; }
.exco-3 { vertical-align:top; display:block; width:90%; height:100px; text-align:left; }
.exco-4 { vertical-align:top; display:block; padding-right:0px; width:90%; height:100px; text-align:left; }
.exco-5 { vertical-align:top; display:block; padding-right:0px; width:90%; height:100px; text-align:left; }
.exco-6 { vertical-align:top; display:block; width:90%; height:100px; text-align:left; }
.footer-container { width: 90%; align: center; margin: 0 auto; text-align:center; }
.footer-heading-1 { font-family:'Open Sans', sans-serif; color: #fff000; font-size:20px; font-weight:700; line-height:16px; letter-spacing:1px; display:block; width:100%; height:55px; margin-top: 25px;vertical-align: top; border-right: none; border-bottom:1px solid #555; text-align:center;}
.footer-heading-2 { line-height:16px; display:inline-block; width:120px; height:55px; margin-top: 10px; vertical-align: top; border-right:1px solid #555; padding-left:20px;}
.footer-heading-3 { line-height:16px; display:inline-block; width:140px; height:55px; margin-top: 10px; vertical-align: top; border-right:none;}
.footer-rights { font-size: 8px; width:100%; display:block; vertical-align: bottom;margin-top:10px; margin-bottom:10px; border-top:1px solid #555; text-align:center;}

}

@media screen and (max-width: 540px) {

.container { width: 90%; margin: 0 auto; padding: 0 10px; }
.history-image { width:350px; padding:15px 0px; }
.history-1 { vertical-align:top; display:inline-block; width:90%; padding-right:0px; text-align:left; }
.history-2 { vertical-align:top; display:inline-block; width:90%; padding-right:0px; text-align:left; }
.video-1 { display:block; padding:0px 0px 15px 0px; }
.video-2 { display:block; }
.video-3 { display:block; padding:0px 0px 15px 0px; }
.video-4 { display:block; }
.footer-container { width: 100%; align: center; margin: 0 auto; text-align:center; }

}

/*only for iphone and Android portrait and landscape screen*/
@media screen and (width: 480px) {
.footer { font-family:'Open Sans', sans-serif; width: 480px; margin: 0 auto; line-height: 40px; font-size: 8px; color: #fff; position: absolute; bottom: 0; right:0; left: 0; overflow: hidden;}
.footer-container { width: 440px; align: center; margin: 0 auto; text-align:center; }
}
@media screen and (min-width: 320px) and (max-width: 375px) {
.footer { font-family:'Open Sans', sans-serif; width: 400px; margin: 0 auto; line-height: 40px; font-size: 8px; color: #fff; position: absolute; bottom: 0; right:0; left: 0; overflow: hidden;}
.footer-container { width: 360px; align: center; margin: 0 auto; text-align:center; }
}