@charset "UTF-8";
/*
@font-face {
    font-family: 'sanssemibold';
    src: url('OpenSans-Semibold-webfont.eot');
    src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Semibold-webfont.woff') format('woff'),
         url('OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('OpenSans-Semibold-webfont.svg#sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-weight:700;
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold-webfont.woff') format('woff'),
         url('OpenSans-Bold-webfont.ttf') format('truetype'),
         url('OpenSans-Bold-webfont.svg#sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=3.0.1');
  src: url('fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html{background: #fff;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;}table{border-collapse:collapse;border-spacing: 0;}fieldset,img{border: 0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border: 0;font-variant:normal;}sup{/*vertical-align:text-top;*/}sub{/*vertical-align:text-bottom;overflow:hidden;*/}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit; resize: none;outline:none;}legend{color:#000;}
body {font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-weight:400; font-size:14px;line-height:140%;color:#000;}table{font-size:inherit;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}em{font-style:italic;}strong{font-weight:bold;}

ul, ol {margin:0;}
li {list-style:none;}
p {margin: 0 0 1em 0;}
img {max-width: 100%; height: auto; width: auto\9; /* ie8 */}
img {display:block;}
td {text-align: left; vertical-align: top;}

/*
::-webkit-scrollbar { width: 9px; }              
::-webkit-scrollbar-track { background-color: #d7d7d7; }
::-webkit-scrollbar-thumb { background-color: #999;}         
::-webkit-scrollbar-thumb:hover { background-color: #231f20; }  
::-webkit-scrollbar-thumb:active { background-color: #231f20; } 
*/
body:lang(zh-HK) {font-family: '微軟正黑體','Microsoft JhengHei','Heiti TC',Hei,sans-serif;}
body:lang(zh-CN) {font-family: 'SimHei', '黑体', '微软雅黑', '宋体', 'Heiti SC',Hei,sans-serif;}

/* REUSABLE STYLES
--------------------------------------------------------------------------------------- */
.clear {clear: both;}
.vertgap {height: 16px; clear: both;}
.hgap {float:left;width:10px;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.floatleft {float:left;}
.floatright {float:right;}
.hidden {display:none !important;}
.show {display:block !important;}
.invisible {visibility:hidden;}
/*
.active {color: #225780 !important;}
a.active {color: #225780 !important;}
*/
.white {color: #fff !important;} 
.overlay {display:none;}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
bold {font-weight:700;} 
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
sup {vertical-align: super;font-size: smaller;line-height:100%;}
.header-container {display:none;}
/* FULL PAGE
--------------------------------------------------------------------------------------- */
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    width: 100%;
}
.fp-tableCell {
    position:relative;
    display: table-cell;
    /* vertical-align: middle; */
    width: 100%;
    height: 100%;
}
.fp-slidesContainer {
    float: left;
    position: relative;
}

.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    /* border-style: solid; */
    margin-top: -38px;
}

.fp-controlArrow.fp-prev {
    left: 0px;
    /*
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
    */
}
.fp-controlArrow.fp-prev:before {
    font-family: FontAwesome;
       content: "\f053";
}
.fp-controlArrow.fp-next {
    right: 0px;
    /*
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
    */
}
.fp-controlArrow.fp-next:before {
    font-family: FontAwesome;
       content: "\f054";
}
.fp-controlArrow { width:54px;height:54px;display:table-cell;cursor:pointer;font-size:24px;
    text-align:center;vertical-align:middle;color:rgba(255,255,255,0.30);background:rgba(0,0,0,0.50);padding: 18px 0 0 0;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.fp-controlArrow:hover {
    background:rgba(255,255,255,0.8);color:rgba(0,0,0,1);

}
.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#fp-nav.right {
    right: 17px;
}
#fp-nav.left {
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.fp-slidesNav.bottom {
    bottom: 5em;
}
.fp-slidesNav.top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav li,
.fp-slidesNav li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fp-slidesNav li {
    display: inline-block;
}
#fp-nav li a,
.fp-slidesNav li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav li .active span,
.fp-slidesNav .active span {
    background: rgba(255, 255, 255, 0.8);
}
#fp-nav span,
.fp-slidesNav span {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

.fp-slidesNav span {
    top: 0px;
    left: 0px;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    position: absolute;
    z-index: 1;
    cursor:pointer;
}
.fp-slidesNav .active span {background: rgba(255, 255, 255, 0.8);}
.fp-slidesNav ul li {width:12px;height:12px;margin:4px 12px 0 0;}
.fp-slidesNav ul li:first-child {width:12px;height:12px;margin:4px 12px 0 12px;}
.fp-slidesNav ul li:hover, .fp-slidesNav ul li active {background:#fff;}

.fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
}
.fp-tooltip.right {
    right: 20px;
}
.fp-tooltip.left {
    left: 20px;
}
.slide {background-size: cover;background-position: center center;}
.vertslide {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#main .slide {cursor:pointer;}
.slide .label {position:absolute;bottom:3.5em;font-size: 28px; line-height:38px;font-weight:700;color:#fff;width:100%;text-align:center;text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);}
.slide .label p {margin:0;}
.slimScrollBar:hover {background:#333 !important;}

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { font-family: "FontAwesome"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -25px; }
[dir="rtl"] .slick-prev { left: auto; right: -25px; }
.slick-prev:before { content: "\f053"; }
[dir="rtl"] .slick-prev:before { content: "\f053"; }

.slick-next { right: -25px; }
[dir="rtl"] .slick-next { left: -25px; right: auto; }
.slick-next:before { content: "\f054"; }
[dir="rtl"] .slick-next:before { content: "\f054"; }

/* Dots */
.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\f111"; width: 20px; height: 20px; font-family: "FontAwesome"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }


/* PAGE CONTENT
--------------------------------------------------------------------------------------- */
html,body { height: 100%; margin: 0px; padding: 0px; }
html {background: #000;overflow-y:auto;overflow-x:hidden;
    -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
body {font: 14px/140% 'Open Sans', Arial, Helvetica, sans-serif;font-weight:400;color:#000;}
a {-moz-transition: all linear .1s; -o-transition: all linear .1s; -webkit-transition: all linear .1s; transition: all linear .1s;}
a {color: #231f20; text-decoration:none;outline:none;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
a:hover {color: #000;text-shadow: 0px 0px 9px rgba(150, 150, 150, 1);}
#navplate, #mmenu {display:none;}
#Page {position:relative;width:100%;height:100%;margin: 0 auto;}

/* #Top {position:relative;width:1350px;margin: 0 auto;z-index:999;} 
#Fronttop {position:fixed;top:0;width:1350px;padding:0 8px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#Fronttop .menu a {color:#fff;text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);}
#Fronttop .menu a:hover {text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);}
#Fronttop .lang a {color:#fff;text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);}
#Fronttop .lang a:hover {text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);}
*/
#Top {width:100%;/*height:76px;*/background:#201d1e;background:rgba(0,0,0,0.5);z-index:1000;position:fixed;top:0;}
.logo {float:left;margin:12px 0 0 0;width:170px;}
.frontlogo {display:block;}
.toplogo {display:none;}
.menu {float:left;margin:42px 0 0 28px;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.menu ul {margin:0;padding:0;}
.menu ul li {float:left;margin:0 0 0 42px;font-size:16px;}
.menu a {color:#fff;}
.menu a:hover {text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);}

.dropdown,
.flyout {
  position: relative;
}
.drop-nav {
  position: absolute;
  display:none;
  -webkit-transition: all 0.9s ease-out;
  -moz-transition: all 0.9s ease-out;
  -ms-transition: all 0.9s ease-out;
  -o-transition: all 0.9s ease-out;
  transition: all 0.9s ease-out;
}
.drop-nav li {
  float:none !important;
  margin-top: 0;
  margin-bottom:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding:0.5em 1em 0.5em 1em;
  background:#201d1e;
  background:rgba(0,0,0,0.5);
  min-width:160px;
  max-width:270px;
  cursor:pointer;
  line-height:1.5em;
}
.drop-nav li:first-child {margin-top:15px;/* !important;*/}
.drop-nav li:hover {background:#201d1e;background:rgba(0,0,0,0.9);text-shadow: 0px 0px 9px rgba(255, 255, 255, 1);}
.dropdown:hover > .drop-nav {
  display: block;
}

.lang {float:right;font-size:14px;margin:48px 0 0 0;color:#fff;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.lang span {margin-left:6px;cursor:pointer;color:#fff;}
.lang span:hover {color:#fff;text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);}
.lang .active {color:rgba(255,255,255,0.5);cursor:default;}
.lang .active:hover {color:rgba(255,255,255,0.5);text-shadow: 0px 0px 6px rgba(255, 255, 255, 0);}
.lang a {color:#fff;text-decoration:none;}
.lang a:hover {color:#fff;text-decoration:none;opacity:1;margin-left:8px;}

#enBtn {}
#tcBtn {}
#scBtn {}

.hcopyright {width:100%;background:#201d1e;background:rgba(0,0,0,0.5);z-index:1000;color:#fff;font-size:11px;padding:6px 24px;text-align:right;
}
.abbottom {position:absolute;bottom:0;}
.stbottom {background:rgba(0,0,0,0.8);}
.projcopyright {width:30%;z-index:1000;color:#fff;font-size:11px;padding:6px 12px;text-align:right;position:absolute;bottom:0;right:0;
}
#Normaltop {margin: 0 auto;width:100%;padding:0 14px;height:76px;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
#Normaltop .lang {margin:42px 0 0 0;}

#home {overflow:hidden;}

#Contentpane {width:100%;height:100%;}
#Contentpane ul, #Contentpane ol {margin-left:0.5em;padding-left:1em;}
#Contentpane ul li {list-style:disc;}
#Contentpane ol li {list-style:decimal;}
#main {overflow:hidden;height:450px;}
#main img {width:100%;}
#zmain {background:url("../img/projects/bg01.jpg") no-repeat;background-size: contain;width:100%;min-height:300px;}

.darkbar {font-size:16px;width:100%;height:46px;padding:16px 0 16px 0; text-align:center;background:#201d1e;background:rgba(0,0,0,0.5);color:#fff;cursor:pointer;position:absolute;bottom:0;z-index:12;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.darkbar:hover {text-shadow: 0px 0px 9px rgba(255, 255, 255, 1);background:rgba(0,0,0,0.8);}

.arrow { width:60px;height:60px;display:table-cell;cursor:pointer;font-size:24px;
    text-align:center;vertical-align:middle;background:rgba(255,255,255,0.30);color:rgba(0,0,0,0.50);padding: 18px 0 0 0;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.arrow:hover {
    background:rgba(255,255,255,0.8);color:rgba(0,0,0,1);
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.leftarrow {position:absolute;top:20%;left:0;}
.rightarrow {position:absolute;top:20%;right:0;}

.projectplace {position:relative;margin:0 0 0 0;height:100%;overflow:hidden;}
.projectplace .headimg {height:100%;}
.projectplace .head {float:left;margin:0 16px 0 0;font-size: 14px;font-weight:700;}
.projectplace .arrow {top:45%;}

.projectplace .fp-slidesNav {display:none;}
.projslides .fp-slidesNav {
  bottom: 210px;display:block;
}
.projectplace .projectbot .fp-slidesNav {display:block;bottom:auto;left:0;position:relative;float: left;margin-left:0 !important;}

.projectplace .projectbot .fp-slidesNav span {
    top: 0px;
    left: 0px;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    position: absolute;
    z-index: 1;
    cursor:pointer;
}
.projectplace .projectbot .fp-slidesNav .active span {
    background: rgba(255, 255, 255, 0.8);
}
.projectplace .projectbot .fp-slidesNav ul li {width:12px;height:12px;margin:4px 8px 0 0;}
.projectplace .projectbot .fp-slidesNav ul li:hover, .projectplace .projectbot .fp-slidesNav ul li active {background:#fff;}
.projectbot {position:absolute;bottom:-500px;width:100%;z-index:12;opacity:0;
    -webkit-transition: bottom 0.9s ease-out;
    -moz-transition: bottom 0.9s ease-out;
    -ms-transition: bottom 0.9s ease-out;
    -o-transition: bottom 0.9s ease-out;
    transition: bottom 0.9s ease-out;
}
.projectaltbot {
    position:absolute;bottom:0;width:100%;z-index:12;opacity:1;
}
.projectaltcenter {float:left;min-width:30%;max-width:50%;height:100%;padding:0 1em 0 1em;font-size:1em;border-left:1px solid #fff;}

.projectdot {float:left; width:12px;height:12px;border:1px solid #fff;cursor:pointer;margin:4px 8px 0 0;}
.projectdot:hover, .pdactive {background:#fff;}
.projectup {float:left;margin:0 0 0 8px;cursor:pointer;}
.projectup:hover {text-shadow: 0px 0px 9px rgba(255, 255, 255, 1);
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.fullwidth {width:1350px;margin:0 auto;}

.projectlabel {text-align:left;background:rgba(0,0,0,0.60);color:#fff;padding:16px 16px 16px 16px;display:inline-block;vertical-align:top;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.projectArrow {position:absolute;left:0;top:-18px;width:100%;height:18px;margin:0 auto;text-align:center;}
.projectArrowHead {background:rgba(0,0,0,0.60);color:#fff;color:rgba(255,255,255,0.7);height:18px;cursor:pointer;}
.projectArrowHead:hover {color: #fff;text-shadow: 0px 0px 9px rgba(150, 150, 150, 1);}
#plateUp {display:none;}
#plateDown {display:block;}

.projectdetail {position:relative;width:100%;text-align:left;background:rgba(0,0,0,0.60);color:#fff;padding:1em;height:175px;}
.projectleft {float:left;/*width:33%;*/min-width:30%;max-width:50%;padding:0 1em 0 0;}
.projectcenter {float:left;width:50%;padding:0 1em 0 1em;font-size:1em;position:relative;}
.projectright {float:left;/*width:17%;*/font-size:11px;}
.relatednews {font-size:0.8em;margin-bottom:8px;}
.projectright li {position:relative;padding-left:1em;}
.projectright li:before {font-family:FontAwesome;content:"\f054";font-size:9px;position:absolute;top:0;left:0;}
.projectright .link a:hover {color:#fff;}
.projectitle {font-size: 1.8em;font-weight:700;line-height:1;margin:0 0 0.3em 0;}
.projectitle p {margin-bottom:0.3em;}
.projectsubtitle {font-size:1.5em;font-weight:400;}
.projectback {position:absolute;left:0;bottom:0;padding:1rem;font-size:0.9em;color:#ccc;}
.projectback a {color:#ccc;padding:0 2px;}
.projectback a:hover {color:#fff;background:rgba(255,255,255,0.7);color:#000;}

.projdesc {height:115px;width:auto;}
.projtag {padding:1rem 0;color:#ccc;font-size:0.9em;position:absolute;bottom:0;}
.projtag a {color:#ccc;padding:0 2px;}
.projtag a:hover {color:#fff;background:rgba(255,255,255,0.7);color:#000;}
        
.prthumb {
    position:relative;float:left;width:33.33333333%;cursor:pointer;display:block;overflow:hidden;
}
.prthumb img {width:100%;}
.prthumb .label {
    position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(230,0,0,0.30);color:#fff;
    font-weight:700;font-size:2em;line-height:1em;
    text-align:center;vertical-align:middle; display:table-cell;display:none;
    -webkit-transition: bottom 0.6s ease-out;
    -moz-transition: bottom 0.6s ease-out;
    -ms-transition: bottom 0.6s ease-out;
    -o-transition: bottom 0.6s ease-out;
    transition: bottom 0.6s ease-out;
}

.textthumb {
    cursor: default;
    overflow: visible;
    padding: 2em;
    color: #fff;
    line-height:1.3;
}
.textthumb a {color:#fff;text-decoration:underline;}
.textthumb a:hover {color:#000;background:#fff;text-decoration:none;}
    
/* .labelheader {position:absolute;top:50%;width:100%;text-align:center;margin-top:-1em;padding:0.5em;} */

.prthumb .label:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
.labelheader {
  display: inline-block;
  vertical-align: middle;
  width:100%;
  padding:0.5em;
}
.labelheader p {margin-bottom:0.3em;}
.labelloc {font-size:1rem;display:none;}
.prthumb:hover > .label {display:block;}

.studiolist {position:relative;width:100%;height:100%;margin:0 0 0 0;}
.studiolist .fp-tableCell {display:block;}
.leftstudio {float:left;width:50%;height:100%;overflow:hidden;position:relative;}
.rightstudio {float:right;width:50%;height:100%;overflow:hidden;position:relative;}
.bgcover {background-size: cover;background-position: center center;}
.studioheight {height:auto;}
.studioname {text-align:center;color:#fff;padding:0 16px 16px 16px;width:100%;height:100%;
    font-weight:700;font-size:4em;
    position:absolute;top:50%;margin-top:-1em;padding:0.5em;
    text-shadow: 0px 0px 0.8em rgba(0, 0, 0, 1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.studioname:lang(en) {font-family: 'Droid Serif', serif;font-weight:700;}
.divpos {cursor:pointer;}
.divpos:hover {color: #fff;text-shadow: 0px 0px 9px rgba(255, 255, 255, 0.5);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.studiodiv {
    padding: 90px 8% 1em 8%;font-size:1em;line-height:1.5em;background:#201d1e;background:rgba(0,0,0,0.6);color:#fff;min-height:100%;
}
.studiotitle {
    font-weight:700;font-size:1.8em;margin:1em 0 1rem 0;
}
.studiocontent{
    text-align:justify;margin:0 0 2em 0;
}
.studiopane {display:none;z-index:200;opacity:0;}
.peoplediv {padding:0 0 2em 0;}
.peoplediv li {position:relative;float:left;width:30%;margin:0 5% 1em 0;cursor:pointer;display:block;overflow:hidden;}
.peoplediv li:nth-child(3n+0) {margin-right:0;}
.peoplediv li > .la {
    position:absolute;bottom:0px;width:100%;background:rgba(0,0,160,0.40);color:#fff;padding:6px 0.5em;
    opacity:0;font-size:0.9em;line-height:110%;
    -webkit-transition: opacity 0.6s ease-out;
    -moz-transition: opacity 0.6s ease-out;
    -ms-transition: opacity 0.6s ease-out;
    -o-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}
.peoplediv li:hover > .la {opacity:1;}
.peoplediv li img {width:100%;}
.peoplediv .laheader {font-size:1.1em; line-height:100%;font-weight:700;margin-bottom:3px;}
.member {padding:2em 0;visibility: hidden;display:none;}
.mname {font-weight:700;font-size:1.1em;line-height:110%;margin:0.5em 0 3px 0;}
.mtitle {font-size:1em;line-height:110%;margin-bottom:3px;}
.mqual {font-size:0.8em;line-height:120%;font-style:italic;margin-bottom:3px;}
.mcopy {margin-top:1em;}

.posab {position:absolute;opacity:0;}

/* .flexbox #Pane2 .fp-scrollable, .flexbox #Pane2 .fp-tableCell {display: flex;flex-direction: column;}

.flexbox .fp-scrollable, .flexbox .fp-tableCell {display: flex;flex-direction: column;} 
.contactflexbox .fp-scrollable, .contactflexbox .fp-tableCell {display: flex;flex-direction: column;}*/

.contactlist {position:relative;width:55%;margin:120px 3% 0 42%;background:rgba(255,255,255,0.7);padding:0;
    flex-grow: 1;
}
.sectitle {font-size:2.3em;color:#888;padding:1.5rem;} 
.contactsectitle {font-size:2.3em;color:#888;padding:1.5rem;float:left;} 
.addressdiv {padding-bottom:2em;}
.textdiv {padding:0;font-size:1em;padding:0 1.5rem 0rem 1.5rem;}
.textdiv a {}
.textdiv a:hover {text-decoration:underline;}
.texttitle {font-size:1.5em;margin-bottom:0.5em}   
   
.socialdiv {float:right;font-size:1.5em;padding:1.5rem;}   
.socialdiv a {color:#000;}
.socialdiv a:hover {color:#fff;}
.mapdiv {width:100%;height:380px;}

img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
img[src="https://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png"] {
    display: none;
}
img[src="https://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png"] {
    display: none;
}
.gm-style-iw {left:22px !important;padding-top:8px;padding-bottom:8px;}
#mapthumb {width:60px;}

.mediaitemlist {float:left;width:39%;margin:120px 0 0 3%;padding:1em 3% 0 0;color:#fff;}
.mediafilter {font-size:1.2em;width:100%;border-bottom:1px solid #fff;padding:0 0 0.4em 0;}
.mediafilter a {color:#fff;}
.mediafilter a:hover {color:#2F9CE3;}
.mediafilter .active {color:#2F9CE3;}
.listdiv {margin:1em 0;width:100%;padding:1em 0 0 0;}
.listdiv a {color:#fff;font-size:1.1em;line-height:1.2em;}
.listdiv a:hover {color:#2F9CE3;}
.listdiv .active {color:#2F9CE3;}
.listyear {font-weight:700;font-size:1.2em;padding-bottom:1em;}

.medialist {float:right;width:55%;margin:120px 3% 0 0;padding:0;flex-grow: 1;}

.mediadiv {padding:0;font-size:1em;padding:1rem 1.5rem 1rem 1.5rem;background:rgba(255,255,255,0.7);}
.mediadiv a {}
.mediadiv a:hover {text-decoration:underline;}
.mediatitle {font-size:1.8em;line-height:1.2em;margin-bottom:0.5em}
.mediasubtitle {font-size:1.4em;line-height:1.2em;margin-bottom:1em}
.mediadate {font-size:1.3em;margin-bottom:0.5em}
.mediagap {/*border-bottom:1px solid #000;margin:1em 0;*/height:8px;}

.mediaselected {border-left: 4px solid #2F9CE3;}
.mediadesc {word-wrap: break-word;padding-bottom:0.5em;}

.loadingcover {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6) url("./ajax-loader.gif") center center no-repeat;
    z-index:999;
    
}
.loadbtn {width:100px;margin:0 auto;background:rgba(140,140,140,0.8);cursor:pointer;text-align:center;padding:0.5em 1em;}
.loadbtn:hover {background:rgba(210,210,210,1);}

@media screen and (max-width: 768px) {
    html,body { height: auto;} 
    body {overflow-x:hidden;}
    #Page {height:auto;}
    #Contentpane {height:auto;}
    .projectplace {overflow:visible;}
    .projectaltbot {bottom:auto;}
    #mmenu {display:block;}
    .mmlogo {float:left;text-align:center;width:20%;margin:8px;min-width:50px;max-width:170px;}
    .navbar {display:block;float:right;margin:22px 16px 0 0;}
    .icon-bar {
      display: block;
      width: 22px;
      height: 3px;
      background-color: #fff;
      margin-bottom:5px;
    }
    #navplate {
        right: -100%;
        top: 0px;
        position: fixed;
        z-index:2000;
        width: 100%;
        background:rgba(255,255,255,0.9);
        padding:2em;
        font-size:0.8em;
        font-weight:400;
        display:block;
    }
    nav#navplate {font-size:1em;}
    nav#navplate a {font-size:1em;}
    #navplate li {margin-bottom:1em;}
    #navplate .langdiv {width:100%;text-align:center;font-size: 1em;margin:0;padding-top:20px;}
    #navplate .langdiv span {padding:1em;}
    .psubmenu {margin:20px;}
    .psubmenu li {margin-bottom:15px;}
    .closemenu {position:absolute;top:20px;right:20px;color:#777;font-size:1.4em;}
    #Normaltop {display:none;}
    
    #loading {display:none;}
    /* #Contentpane {height:auto;} */
    #main {height:auto;}
    .prthumb {width:50%;}
    .prthumb img {width:100%;}
    .prthumb .label {font-size:0.9em;line-height:1.4;}
    .darkbar {position:relative;font-size:12px;padding:4px;height:auto;color:#666;background:#121212;}
    .projectlist {padding-bottom:1.5em;}
    .abbottom {position:relative;}
    .hcopyright {font-size:9px;padding:0;text-align:center;opacity:0.8;}
    
    .slide {height:100%;}
    .slide .label {font-size:1em;bottom: 1em;line-height: 1.2;}
    #inSlide {position:relative;background:rgb(45,45,45);}
    .slidesjs-navigation {display:block;font-size:0;width:18px;height:36px;text-align: center;padding-top: 9px;}
    .slidesjs-next {position:absolute;top:40%;right:0;color:rgba(255,255,255,0.20);background: rgba(0,0,0,0.20);z-index:20;}
    .slidesjs-next:before {
        font-family: FontAwesome;
        content:'\f054';
        font-size:16px;
        
    }
    .slidesjs-previous {position:absolute;top:40%;left:0;color:rgba(255,255,255,0.30);background: rgba(0,0,0,0.50);z-index:20;}
    .slidesjs-previous:before {
        font-family: FontAwesome;
        content:'\f053';
        font-size:16px;
    }
    
    .slidesjs-pagination {display:none;
        position: absolute;
        z-index: 4;
        left: 50%;
        opacity: 1;
    }
    .slidesjs-pagination-item {
        width: 0px;
        height: 0px;
        margin: 4px 12px 0 12px;
        display: inline-block;
    }
    .slidesjs-pagination-item a {
        width: 0px;
        height: 0px;
        text-indent: -999em;
        color:#fff;
        border: 1px solid rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0);
        border-radius: 0%;
        z-index: 1;
    }
    .projectaltbot {position:relative;}
    .projectdetail {height:auto;}
    .projectArrow {display:none;}
    .projectleft {float:none;min-width: 30%;max-width: 100%;padding:0;}
    .projectitle {font-size:1.2em;}
    .projecsubtitle {float:left;width:60%;}
    .projectback {float:right;position:relative;padding: 0.3em 0 0 0.5em;font-size:0.7em;}
    .projectback a {color:#999;}
    .projectback a:hover {
        color: #999;
        background: none;
    }
    .projectplace {
        height: auto;
        overflow: hidden;
    }
    .projectaltcenter {
        clear:both;
        float: none;
        min-width: 30%;
        max-width: 100%;
        height: auto;
        padding: 1em 0 2em 0;
        font-size: 1em;
        border-left: none;
    }
    .projdesc {height:auto;margin-bottom:1.5em;font-size:1em;}
    .projtag {position:relative;padding:0;font-size:0.8em;}
    .projcopyright {
        display:none;
        width: 100%;
        z-index: 1000;
        margin-top:2em;
        padding: 6px 12px;
        text-align: center;
        position: relative;
        font-size:10px;
        color:rgba(255,255,255,0.5);
        position: fixed;
        bottom: 0;
    }
    .projectright {display:none;}
    
    .leftstudio {
        float: none;
        width: 100%;
        height: 50%;
        overflow: hidden;
        position: relative;
    }
    .rightstudio {
        float: none;
        width: 100%;
        height: 50%;
        overflow: hidden;
        position: relative;
    }
    .studioname {font-size:2em;}
   #sup1 {display:none;top:3em;font-size:2em;}
    #sup2 {display:none;top:3em;font-size:2em;} 
    #Pane1 .leftstudio {height:auto;}
    #Pane1 .rightstudio {height:auto;}
    #Pane2 .leftstudio {height:auto;}
    #Pane2 .rightstudio {height:auto;}
    .studiodiv {padding:3em 1em 1em 1em;line-height: 1.3em;}
    .peoplediv {display:none;}
    .member {display:block;visibility:visible;}
    .studiotitle {font-size:1.4em;}
    
    .contactlist {
        position: relative;
        width: 94%;
        margin: 0 3% 0 3%;
        background: rgba(255,255,255,0.7);
        padding: 4em 0 0 0;
    }
    .contactsectitle {font-size: 1.8em;padding: 1rem;}
    .socialdiv {padding: 1rem;word-spacing:0px;letter-spacing:-0.2em;}
    .textdiv {padding: 0 1rem;}
    .mapdiv {height:200px;}
    
    .medialist {
        float: none;
        width: 94%;
        margin: 0 3% 0 3%;

        padding: 4em 0 0 0;
    }
    .mediaitemlist {
        float: none;
        width: 94%;
        margin: 0 3% 0 3%;
        padding: 1em 3% 1em 0;
    }
    .sectitle {font-size: 1.8em;padding: 1rem;}
    .mediadiv {
        font-size: 1em;
        padding: 1rem 1rem 0 1rem;
    }
    .mediatitle {
        font-size: 1.2em;
    }
    .mediatitle p {margin:0;}
    .mediasubtitle {
        font-size: 1.1em;margin-bottom:0.5em;
    }
    .mediasubtitle p {margin:0;}
    .mediadate {font-size:1em;margin-bottom: 1em;}
    .mobNoShow {display:none;}
    .mediafilter {font-size: 0.9em;}
    .listdiv {font-size:0.8em;line-height:1.3;}
    .listdiv p {margin-bottom:0.8em;}
    .listyear {font-size:1.1em;}
    table {max-width:100%;}
    
}
@media screen and (max-width: 480px) {
    .mmlogo {float:left;text-align:center;width:22%;}
    .navbar {display:block;float:right;margin:14px 14px 0 0;}
}
@media screen and (max-width: 360px) {
    .mmlogo {float:left;text-align:center;width:25%;}
    .navbar {display:block;float:right;margin:16px 14px 0 0;}
    .icon-bar {
      display: block;
      width: 20px;
      height: 2px;
      background-color: #fff;
      margin-bottom:4px;
    }
    body {font-size:13px;}
    #navplate {
        padding:1em;
        font-size:1em;
    }
    #navplate li {margin-bottom:0.8em;}
    #navplate .langdiv {font-size: 1em;margin:0;padding-top:10px;}
    #navplate .langdiv span {padding:0.5em 1em 0.5em 1em;}
    .psubmenu {margin:0.5em;}
    .closemenu {top:1em;right:1em;}
    .medialist {padding-top:3em;}
    .mediafilter {font-size:0.7em;}
    .listdiv {font-size:0.8em;line-height:1.1;}
    .contactlist {padding-top:3em;}
    .mcopy {font-size:12px;}
}
@media screen and (max-width: 768px) and (orientation : landscape) {
    html,body { height: auto; -webkit-text-size-adjust: 80%;} 
    .mmlogo {float:left;text-align:center;width:15%;margin:8px;min-width:50px;max-width:170px;}
    .navbar {display:block;float:right;margin:12px 12px 0 0;}
    .icon-bar {
      display: block;
      width: 20px;
      height: 2px;
      background-color: #fff;
      margin-bottom:4px;
    }
    #navplate {
        padding:1em 1em 1em 1em;
        font-size:0.6em;
        line-height:1.4;
        height:100%;
    }
    #navplate li {margin-bottom:0.6em;float:left;margin-right:1em;width:20%;}
    #navplate li li {float:none;width:100%;}
    #navplate .langdiv {font-size: 1em;margin:0;padding-top:0.5em;clear:both;}
    #navplate .langdiv span {padding:1em 1em;font-size:1em;}
    .psubmenu {margin:1em 0 1em 0;}
    .psubmenu li {margin-bottom:1em;}
    .closemenu {position:absolute;top:0.8em;right:1em;font-size:1rem;}
    .projectdetail {padding:1em;}
}
@media screen and (max-width: 736px) and (orientation : landscape) {
    .mmlogo {float:left;text-align:center;width:15%;margin:8px;min-width:50px;max-width:170px;}
    .navbar {display:block;float:right;margin:10px 14px 0 0;}
}