@charset "utf-8";
/* CSS Document */

/* Copyright 2014 by 3graphic.com */
@font-face {
	font-family: 'MyriadLight';
	src: url('../fonts/myriadpro-light-webfont.eot');
	src: url('../fonts/myriadpro-light-webfont.eot?#iefix') format('embedded-opentype'), 
	url('../fonts/myriadpro-light-webfont.woff') format('woff'), 
	url('../fonts/myriadpro-light-webfont.ttf') format('truetype'), 
	url('../fonts/myriadpro-light-webfont.svg#MyriadLight') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadBold';
	src: url('../fonts/myriadpro-semibold-webfont.eot');
	src: url('../fonts/myriadpro-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
	url('../fonts/myriadpro-semibold-webfont.woff') format('woff'), 
	url('../fonts/myriadpro-cond-webfont.ttf') format('truetype'), 
	url('../fonts/myriadpro-semibold-webfont.svg#MyriadBold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MyriadCondBold';
	src: url('../fonts/myriadpro-boldcond-webfont.eot');
	src: url('../fonts/myriadpro-boldcond-webfont.eot?#iefix') format('embedded-opentype'), 
	url('../fonts/myriadpro-boldcond-webfont.woff') format('woff'), 
	url('../fonts/myriadpro-boldcond-webfont.ttf') format('truetype'), 
	url('../fonts/myriadpro-boldcond-webfont.svg#MyriadCondBold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MyriadCondensed';
	src: url('../fonts/myriadpro-cond-webfont.eot');
	src: url('../fonts/myriadpro-cond-webfont.eot?#iefix') format('embedded-opentype'), 
	url('../fonts/myriadpro-cond-webfont.woff') format('woff'), 
	url('../fonts/myriadpro-cond-webfont.ttf') format('truetype'), 
	url('../fonts/myriadpro-cond-webfont.svg#MyriadCondensed') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Gillsans';
    src: url('../fonts/gillsans.eot');
    src: url('../fonts/gillsans.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gillsans.woff') format('woff'),
         url('../fonts/gillsans.ttf') format('truetype'),
         url('../fonts/gillsans.svg#Gillsans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Futura';
    src: url('../fonts/futurab.eot');
    src: url('../fonts/futurab.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futurab.woff') format('woff'),
         url('../fonts/futurab.ttf') format('truetype'),
         url('../fonts/futurab.svg#Futura') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*RESET*/

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; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body {background-color:rgba(255,255,255,1); top:0;right:0;bottom:0;left:0; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;overflow:hidden;}
html{-ms-touch-action:none;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: -moz-none;-ms-user-select: none;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;-webkit-font-smoothing: antialiased; }
body, html{-ms-touch-action:none;-ms-overflow-style: none !important; }
@-ms-viewport { width: auto;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
:focus {outline: 0;	border:none}
a {text-decoration:none;}
p {text-decoration:none; font-weight:normal;}
strong {text-decoration:none; font-weight:bold;}
cite, em, i {text-decoration:none;font-weight: normal; font-family: 'MyriadLight'; line-height:1; vertical-align:baseline; }
pre, code {text-decoration: none;}
ins {text-decoration: none;}
sup {text-decoration: none; bottom:5px; font-size:70%;  vertical-align:baseline; font-weight: normal; position:relative}
dl dt {text-decoration: none; }
dd {text-decoration: none;}
mark{text-decoration: none; font-size:150%; font-family:'MyriadBold'; font-weight: normal;vertical-align:baseline;}
del {text-decoration: line-through;}
table {	border-collapse:collapse;border-spacing: 0;}
.btn:hover {background-position:bottom}
img[alt] {font-size:0}
.current{background-position:bottom}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
img.nailthumb-image {margin:0;  padding:0; max-width: none; float: left;}
.clear{ clear:both}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
svg:not(:root) {overflow:hidden;}
.nicescroll-rails{}

/*LOAD*/
#qLoverlay{width:100%;height:100%;position:absolute;bottom:10px;right:10px;font-family:'MyriadLight'; font-weight:normal; font-size:100px; line-height:100px; color:#5d5a51;  background:none; overflow:hidden;}
.loadicon{  background:url(../images/loadx.gif) no-repeat center center; position:absolute; top:50%; left:50%; z-index:110000; width:50px; height:50px; margin:-25px 0 0 -25px;border-radius: 30px; -webkit-border-radius:30px; -o-border-radius:30px; -ms-border-radius:30px;}

/*LAYOUT*/
.container{	height:100%;width:100%; margin:0;padding:0;top:0;left:0; position:absolute; overflow:hidden;}
.center{ position:absolute; left:0px; top:0; width:100%; height:100%; float:none; opacity:0;-ms-touch-action:none;}
.bottom{ position:absolute; left:0; width:100%; height:30px; bottom:0; float:none; padding-bottom:0px; background-color:#003e80;text-align:center; opacity:1;z-index:2000}
.logo.vi{ background:url(../images/logo-vi.png) no-repeat; width:195px; height:62px; position:absolute; left:30px; top:8px; z-index:999}
.logo.en{ background:url(../images/logo-en.png) no-repeat; width:195px; height:62px; position:absolute; left:30px; top:8px; z-index:999}

.top{ width:100%; height:80px;  position:absolute; left:0px; top:0;  z-index:1100;  background-color:rgba(255,255,255,0.9); box-shadow: 3px 0 10px rgba(0,0,0,0.3);}


.top-right{width:200px; height:30px; right:15px; top:8px; position:absolute; z-index:1060}

.language{width:132px; height:30px; position:absolute; right:0; top:0; z-index:100; overflow:hidden;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.language li{ position:relative; float:left; margin-right:1px; cursor:pointer}
.language li.vi{ background:url(../images/lang-vi.png) no-repeat top; width:70px; height:30px; opacity:0.5;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; font-size:0; text-indent:-9999px}
.language li.en{ background:url(../images/lang-en.png) no-repeat top; width:60px; height:30px; opacity:0.5;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; font-size:0; text-indent:-9999px}
.language li a{ display:block; font-size:0; text-indent:-9999px}
.language li:hover{ opacity:1}
.language li.active{opacity:1; pointer-events: none;}

.slogan{font-family:'Gillsans'; font-size:18px; line-height:18px; color:#004a99;font-weight:normal; text-transform:uppercase; position:absolute;top:12px;left: 262px; width: auto;  display:block}

.search{ background-color:rgba(255,255,255,1); width:50px; height:30px; position:absolute; right:133px; top:0; z-index:110; box-shadow:0px 0px 10px rgba(0,0,0,0.2) inset;  opacity:1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
.search a.search-btn{ background:url(../images/search.png) no-repeat center center; position:absolute;  width:50px; height:30px;font-size:0;  text-indent:-9999px; display:block;}
.search:hover{ opacity:0.7}
.search.active{  background-color:rgba(220,220,220,1);}


.search-form{  background-color:#f49600; width:0px; height:35px; position:absolute; right:0; top:37px; z-index:100; display:block;  box-shadow:inset 0 0 15px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; overflow:hidden}
.form-row-search{ width:220px; height:35px; position:absolute; top:0; left:0}
.form-row-search input[type="text"]{border:none; background:none; width:220px; height:35px; padding:0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#fff; line-height:30px;position:absolute; display:block; opacity:0.7;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
.form-row-search input[type="text"]:focus{opacity:1}



.bottom-text{width:auto; position:relative; height:10px; display:block; position:relative; float:left; margin:10px 20px}
.copyright{font-family:Arial, Helvetica, sans-serif; color:#5483af; font-size:10px; line-height:12px; position:relative; width:auto; height:10px; font-weight:normal; text-align:left; text-transform:uppercase; display:block; }
.copyright a{white-space:nowrap; color:#5483af;}
.copyright a:hover{color:#fff}

.social {position:relative; height:30px; width:110px; float:right; margin-right:20px}
.social li{position:relative;display:inline-block ; width:25px; height:30px;}
.social li a {display:block;text-indent:-9999px;font-size:0; width:25px; height:30px; }
.social li a.youtube {background:url(../images/youtube.png) no-repeat top;float:right;width:25px;height:29px;cursor: pointer;position:relative;}
.social li a.youtube span.hover {background:url(../images/youtube.png) no-repeat bottom;float:right;width:25px;height:29px;cursor: pointer;position:relative;}
.social li a.facebook {background:url(../images/facebook.png) no-repeat top;float:right;width:25px;height:25px;cursor: pointer; margin-top:4px;position:relative;}
.social li a.facebook span.hover {background:url(../images/facebook.png) no-repeat bottom;float:right;width:25px;height:25px;cursor: pointer;position:relative;}
.social li a.google {background:url(../images/googleplus.png) no-repeat top;float:right;width:25px;height:25px;cursor: pointer; margin-top:4px;position:relative;}
.social li a.google span.hover {background:url(../images/googleplus.png) no-repeat bottom;float:right;width:25px;height:25px;cursor: pointer;position:relative;}

.animation{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.content-load{width:100%; height:100%; position:absolute; left:0; top:0;display:none;}
.nav-click{ background:url(../images/nav-click.png) no-repeat top; width:60px; height:35px; right:10px; top:45px; position:absolute; display:none; cursor:pointer;display:none; opacity:0; z-index:1070;}
.nav-click.active{ background-position:bottom}
.scroll-down { position: absolute; top: auto;right: 10px; width: 18px; height: 46px; background: url(../images/scroll-down.png) repeat-y;-webkit-background-size: 90px 46px;  -o-background-size: 90px 46px; -ms-background-size: 90px 46px;  background-size: 90px 46px;  opacity: 0.7;  -webkit-animation: play 2s steps(20) infinite  alternate;  animation: play 2s steps(20) infinite  alternate; -moz-animation: play 2s steps(20) infinite  alternate; -o-animation:play 2s steps(20) infinite  alternate; -ms-animation: play 2s steps(20) infinite alternate; display:none; z-index:100}
.go-top{ background:url(../images/top.png) no-repeat center center; width:40px; height:40px; position:absolute; top:-50px; left:50%; margin-left:-20px; cursor:pointer; display:none;z-index:9999;border-radius: 40px; -webkit-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius:40px ; background-color:rgba(0,0,0,0.3); box-shadow:0 0 30px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1);}





.navigation{ height:35px; width:auto; position:absolute; right:0; top:45px; background-color:rgba(233,233,233,0); overflow:hidden; z-index:100}
.nav {height:35px; width:100%; position:absolute; left:0; top:0}
.nav ul{width:100%;}
.nav li{position:relative; float:left; margin:0 1px 0 0; height:35px; width:auto; background-color:rgba(233,233,233,1);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
.nav li a{ display:block ;height:32px; width:auto }
.nav li a h1{font-family:'Gillsans'; font-size:14px; line-height:33px; color:#565b5d; padding:0px 15px ;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; height:32px; text-align:center; font-weight:normal; text-transform:uppercase}
.nav li:hover{ background-color:rgba(0,74,153,1);}
.nav li:hover a h1{color:#fff; }
.nav li.current a{pointer-events: none}
.nav li.current a h1{color:#fff;}
.nav li.current{ background-color:rgba(0,74,153,1);}

.show-hide{ width:88px ;height:80px; position:absolute; right:0; top:50%; margin-top:-40px; z-index:100; background-color:rgba(0,0,0,0.5); display:block}
.show{font-family:'MyriadCondensed'; font-size:14px; line-height:36px; color:#fff;font-weight:normal; text-transform:uppercase; text-align:center; position:absolute; left:8px; top:10px;width:80px; height:50px;cursor: pointer; display:none }
.show span {background:url(../images/show_s.png) no-repeat  center center;width:40px;height:40px; text-indent:-9999px; font-size:0; position:relative; margin:0 auto;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;border-radius: 40px; -webkit-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius:40px ; display:block;background-color:rgba(255,255,255,1)}
.show:hover span{background-color:rgba(255,255,255,0.7)}

.hide{font-family:'MyriadCondensed'; font-size:14px; line-height:30px; color:#fff;font-weight:normal; text-transform:uppercase; text-align:center; position:absolute; left:8px; top:10px;width:80px; height:50px;cursor: pointer; }
.hide span {background:url(../images/close_s.png) no-repeat  center center;width:40px;height:40px; text-indent:-9999px; font-size:0; position:relative; margin:0 auto;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;border-radius: 40px; -webkit-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius:40px ; display:block;background-color:rgba(255,255,255,1)}
.hide:hover span{background-color:rgba(255,255,255,0.7)}

/*SUB*/
.sub-menu{ width:259px; height:auto; position:absolute; left:0; top:81px; display:block; z-index:60; text-align:center}
.sub-menu .link{width:259px; height:auto; margin-bottom:1px; position:relative; float:left; display:block; background-color:rgba(255, 255, 255, 0.9);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-menu .link a{font-family: 'Gillsans'; font-weight:normal; font-size:13px; color:#565b5d; line-height:20px; display:block; width:auto; height:auto;text-align:left; padding:10px 20px; text-transform:uppercase; white-space:nowrap;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-menu .link:hover{ background-color:rgba(0,74,153,1); }
.sub-menu .link:hover a{color:#fff; }
.sub-menu .link.current{ background-color:rgba(0,74,153,1); }
.sub-menu .link.current a{color:#fff; pointer-events: none}

.sub-menu .link-news{width:259px; height:auto; margin-bottom:1px; position:relative; float:left; display:block; background-color:rgba(255, 255, 255, 0.9);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-menu .link-news a{font-family: 'Gillsans'; font-weight:normal; font-size:13px; color:#565b5d; line-height:20px; display:block; width:auto; height:auto;text-align:left; padding:10px 20px; text-transform:uppercase; white-space:nowrap;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-menu .link-news:hover{ background-color:rgba(0,74,153,1); }
.sub-menu .link-news:hover a{color:#fff; }
.sub-menu .link-news.current{ background-color:rgba(0,74,153,1); }
.sub-menu .link-news.current a{color:#fff; pointer-events: none}


.sub-menu-project{ width:100%; height:50px; position:absolute; left:0; bottom:-55px; display:block; z-index:60; text-align:center; background-color:#004982; }

.sub-menu-project .link-project{width:auto; height:auto; position:relative; display:inline-block; background-color:#004982;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; margin:5px 0}
.sub-menu-project .link-project a{font-family: 'Gillsans'; font-weight:normal; font-size:13px; color:#85a4c2; line-height:20px; display:block; width:auto; height:auto;text-align:center; padding:10px 20px; text-transform:uppercase; white-space:nowrap;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-menu-project .link-project:hover{ background-color:#00335b; }
.sub-menu-project .link-project:hover a{color:#fff; }
.sub-menu-project .link-project.current{ background-color:#00335b;  }
.sub-menu-project .link-project.current a{color:#fff; pointer-events: none}

/*HOME*/
.home-content{ width:100%; height:auto; position:absolute; left:0; bottom:30px; z-index:100}
.home-nav{width:auto; height:44px; position:absolute; bottom:1px; left:30px; background-color:#004a99; padding-left:4px; display:block}
.home-nav li{ position:relative; float:left; height:36px; width:auto; margin:4px 4px 0 0; background-color:#f8971d;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.home-nav li a{ width:auto; height:36px; display:block; font-family:'MyriadCondBold'; font-size:16px; line-height:36px; color:#fff;font-weight:normal; text-transform:uppercase; padding: 0 10px}
.icon-news{ background:url(../images/news.png) no-repeat; width:21px; height:17px; position:relative; display:inline-block; vertical-align:middle; margin-left:10px}
.icon-project{ background:url(../images/project.png) no-repeat; width:21px; height:17px; position:relative; display:inline-block; vertical-align:middle; margin-left:10px}
.icon-video{ background:url(../images/video.png) no-repeat; width:21px; height:17px; position:relative; display:inline-block; vertical-align:middle; margin-left:10px}
.home-nav li:hover{background-color:#004a99;}

					 
					  
.home-box{ width:900px; height:140px; position:absolute; left:0; bottom:-150px; text-align:center;}
.home-video{ background-color:rgba(255,255,255,0.9); width:18%; height:140px; position:relative;  display:inline-block; z-index:999; margin:1px; vertical-align:middle; overflow:hidden}
.home-video .pic{ width:88%; height:88%; position:relative; display:block; margin:6%; overflow:hidden; z-index:1}
.home-video .pic span.frame{width:100%; height:100%; border:5px solid #f49600; position:absolute; left:0; top:0; opacity:0; z-index:1; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;}
.home-video:hover .pic span.frame{opacity:1;}

.home-video .pic img{width:100%; height:auto; display:block}
.play-video{ background:url(../images/player.png) no-repeat center center; width:34px; height:26px; position:absolute; left:50%; top:50%; margin:-13px 0 0 -17px; border-radius:10px; -ms-border-radius:3px; -o-border-radius:3px; -webkit-border-radius:3px; border: 4px solid rgba(255,255,255,0.0); box-shadow:0 0 10px rgba(0,0,0,0.8);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; cursor:pointer; z-index:99}
.play-video:hover{  box-shadow:0 0 20px rgba(255,255,255,0.8)}

.home-news h1, .home-video h1, .project-news h1{ background-color:#f49600; font-family:'MyriadCondBold'; font-size:16px; line-height:20px; height:auto; text-align:center; color:#fff;display:block; padding:5px 10px; position:absolute; left:0; top:20px; z-index:10; font-weight: normal; text-transform:uppercase; width:auto; white-space:nowrap}
.home-news, .project-news{background-color:rgba(255,255,255,0.9); width:39%; height:140px; position:relative; display:inline-block; z-index:999; margin:1px; vertical-align:middle }
.news-wrap, .project-wrap{ width:94%; height:85%; position:relative; display:block;margin:3%; z-index:9;overflow:hidden}
.block{ width:100% !important; height:90%; left:0; top:0; overflow:hidden; position:absolute; background-color:transparent !important; cursor:pointer}
.block a{width:100%; height:100%; display:block}
.block .pic{ position:relative; float:left; width:48%; height:100%; overflow:hidden; margin-right:3%; overflow:hidden}
.block .pic img{width:100%; height:auto; display:block}
.block .pic span.frame{width:100%; height:100%; border:5px solid #f49600; position:absolute; left:0; top:0; opacity:0; z-index:1; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;}
.block h3{ width:48%; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#666; font-size:14px; line-height:18px; position:relative; float:left;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; text-align:left }
.block p{ width:48%; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#666; font-size:13px; line-height:16px; position:relative; float:left; height:50px; overflow:hidden; text-align:left }
.block:hover .pic span.frame{opacity:1;}
.block:hover h3{color:#000;}
.news-nav{width:96%; height:14px; position:absolute; bottom:5px; left:2%; z-index:1000}
.project-nav{width:96%; height:14px; position:absolute; bottom:5px; left:2%; z-index:1000}

#nav, #nav2{width:100%; height:20px; position:absolute; left:0; top:0}
a.icon-num, a.icon-num2{background:url(../images/num.png) no-repeat center top; width:12px; height:14px; position:relative; float:left; cursor:pointer; font-size:0;text-indent:-9999px; margin:0px; display:block }
a.icon-num:hover, a.icon-num2:hover{ background-position:bottom}
a.icon-num.activeSlide, a.icon-num2.activeSlide{background-position:bottom; cursor:default}
.n-p, .n-p2{width:0; height:0; position:absolute; right:0; top:0; display:none}
.button-n, .button-n2 {background:url(../images/blank.png) repeat; width:0; height:0;}
.button-p, .button-p2 {background:url(../images/blank.png) repeat;  width:0; height:0;}



/*ABOUT - RECRUITMENT - MEMBERS*/
.content-page{position:absolute; left:260px; top:80px; height:auto; width:100%;z-index:1; float:none; overflow:hidden;}
.white{position:absolute; height:100%; width:70%; max-width:1150px; left:0; top:0; margin:0; background-color:rgba(255,255,255,0.9); padding:0;display:block; z-index:-1}
.colum-box{position:absolute; height:100%; width:70%; max-width:1150px; left:0; top:0; margin:0; padding:0; display:none; opacity:0; z-index:10}
.colum-box h2{position:relative; margin:0 5%; width:90%; font-family: 'Gillsans'; font-weight:normal; font-size:24px; color:#003e80; line-height:24px; text-transform:uppercase; padding:15px 0px; text-align:left;}

.block-content{height:0%; width:0%; left:0; top:0; z-index:-9999; position:absolute; display:none ; background:url(../images/blank.png) repeat; }
.colum-box.active{}
.colum-box.active .block-content{display:none; z-index:-9999}

.content{width:90%; height:auto; margin:0px 5%; position:relative; }
.content img{width:100%; display:block; margin:0px auto 20px auto; height:auto; position:relative; }
.content img.director{width:40%; max-width:400px; display:block; float:left; margin:0 20px 20px 0; height:auto; position:relative; }
.content img.fixsize{width:auto; max-width:1000px; display:block;  margin:0 auto; height:auto; position:relative; text-align:center}

.content-img{width:49%; height:auto; position:relative;display:inline-block; z-index:10; margin:10px auto;}
.content-img .zoom{top:10px; right:10px;}
.content-img img{width:100%; display:block; height:auto; position:relative; margin:0}

.content-zoom{width:100%; height:auto; position:relative;display:inline-block; z-index:10; margin:10px auto;}
.content-zoom .zoom{top:10px; right:10px;}
.content-zoom img{width:100%; display:block; height:auto; position:relative; margin:0}

.content p{ font-family:Arial, Helvetica, sans-serif; color:#333; text-align:left; font-size:15px; line-height:24px; padding:5px 0;}
.content p a{ color:#f49600;}
.content a.call{color:#f49600; }
.content a.call:hover{ color:#333;}
.content p a:hover{ color:#333;}
.content span.box{ background-color:rgba(255,255,255,1); font-family:Arial, Helvetica, sans-serif; color:rgba(4,39,80,1);text-align:left;font-size:15px;line-height:24px;width:100%;padding:10%; display:block; box-shadow: inset 0px 0px 30px rgba(0,0,0, 0.2)}

.colum-box-member{position:absolute; height:100%; width:100%;  left:260px; top:80px; margin:0; padding:0; display:block;  overflow:hidden; opacity:1; z-index:10}
.colum-box-member h2{position:relative; margin:0 30px; font-family: 'Gillsans'; font-weight:normal; font-size:24px; color:#003e80; line-height:24px; text-transform:uppercase; padding:10px 0px; text-align:left; width:auto; display:block}

.content-member{width:auto; height:auto; position:absolute; overflow:hidden; left:0; top:50px;}
.member-box{width:700px; height:100%;position:relative; display:block; margin-right:10px; float:left; background-color:rgba(255,255,255,0.2); opacity:1}
.member-box h3{position:relative;width:100%; font-family: 'Gillsans'; font-weight:normal; font-size:20px; color:#003e80; line-height:20px; text-transform:uppercase; padding:12px 5% 17px 5% ; text-align:left; background-color:rgba(255,255,255,1); border-bottom:1px solid #003e80}
.member-pic{width:100%; margin:1px 0; position:relative; display:block; float:left;background-color:rgba(255,255,255,1); padding:20px}
.member-pic img{ width:100%; height:auto; display:block}
.member-box p{font-family:Arial, Helvetica, sans-serif; color:#333; text-align:left; font-size:15px; line-height:24px; position:relative; float:left; width:100%; margin:1px 0;background-color:rgba(255,255,255,1); padding:10px 20px; min-height:320px}
.member-box p a{color:#f49600;}

.member-box.active{box-shadow: 8px 0px 50px rgba(0,0,0,0.5);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.member-box.active .block-content{display:none; z-index:-9999}
.member-box.active h3{background-color:rgba(0,74,153,1); color:#fff;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-member{ width:259px; height:auto; position:absolute; left:0; top:81px; display:block; z-index:60; text-align:center}
.sub-member li{width:259px; height:auto; margin-bottom:1px; position:relative; float:left; display:block; background-color:rgba(255, 255, 255, 0.9);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-member li a{font-family: 'Gillsans'; font-weight:normal; font-size:13px; color:#565b5d; line-height:20px; display:block; width:100%; height:auto;text-align:center; padding:10px 0; text-transform:uppercase; white-space:nowrap;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.sub-member li:hover{ background-color:rgba(0,74,153,1); }

.sub-member li:hover a{background-color:#fff;}
.sub-member l.current{ background-color:rgba(0,74,153,1); }
.sub-member li.current a{background-color:rgba(0,74,153,1);color:#fff;  cursor:default;  pointer-events: none;}
.next-prev-02{position:absolute; right:30px; bottom:110px; width:125px; height:auto; z-index:1000}

.next-prev-02 .next-prev{display:none; position:absolute; right:20px; top:auto; left:auto; bottom:80px; width:125px; height:auto; z-index:1000}
.next-prev-02 .prevslide {position:absolute;height:60px;width:60px;left:0; top:0;background:url(../images/previous.png) no-repeat;border-radius:60px; -ms-border-radius:60px;-o-border-radius:60px;-webkit-border-radius:60px; cursor:pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;opacity:1; box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1);  background-color:rgba(255,255,255,1); z-index:99999}
.next-prev-02 .nextslide {position:absolute;height:60px;width:60px;right:0; top:0;background:url(../images/next.png) no-repeat; border-radius:60px; -ms-border-radius:60px;-o-border-radius:60px;-webkit-border-radius:60px;  cursor:pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; opacity:1; box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); background-color:rgba(255,255,255,1);z-index:99999}
.next-prev-02 .prevslide:hover{background-color:rgba(240,240,240,1);box-shadow:0 0 20px rgba(255,255,255,0.8)}
.next-prev-02 .nextslide:hover{background-color:rgba(240,240,240,1);box-shadow:0 0 20px rgba(255,255,255,0.8)}
.next-prev-02 .prevslide.disable, .next-prev-02 .nextslide.disable{ opacity:1; cursor:default; box-shadow:none; border:none; background-color:rgba(170,170,170,1)}
.next-prev-02 .prevslide.disable:hover{box-shadow:none; background-color:rgba(170,170,170,1)}
.next-prev-02 .nextslide.disable:hover{box-shadow:none; background-color:rgba(170,170,170,1)}

.load-page{ position:absolute; width:90%; height:auto; left:5%; top:0;  display:none; z-index:10}
.content-stage-2{ height:auto; width:100%; margin:0;  position:relative;display:none;}
.content-stage-2 p{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#2c3842; line-height:24px;  text-align:left; position:relative; padding:5px 0; width:100%; }



.stage{width:90%; height:auto; position:relative; margin:0 5%;}
.stage ul{height:auto; position:relative;width:100%;}
.stage ul li{height:auto; height:auto; width:100%;position:relative;  display:inline-block; margin-bottom:20px;}
.stage ul li .title-stage{position:relative;  position:relative;  display:inline-block; width:100%; height:auto; height:80px;  background-color: rgba(0,0,0, 0.1);   -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; cursor:pointer; padding:10px 0}
.stage ul li .title-stage a{ width:100%; width:100%; display:block}
.stage ul li .title-stage h3{font-family:Arial, Helvetica, sans-serif; color:#666; font-size:16px; position:relative; line-height:20px; font-weight:bold; width:auto; max-width:80%;height:60px;vertical-align:middle; display: table-cell; text-align:left; padding:0 60px 0 90px}
span.detail{ font-weight:normal; color:#f49600; text-align:right;line-height:20px; position:absolute; top:30px; right:30px; }
.stage ul li .title-stage span.cycle-num{ font-family:'MyriadLight'; color:#004a99; font-size: 24px;  background-color: #fff; border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; -webkit-border-radius:50px; width:50px; height:50px; text-align:center; line-height:50px; display:block; font-weight:normal;  position:absolute; left:20px; top:50%; margin-top:-25px;  -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; cursor:pointer;}
.stage ul li .title-stage span.st-arrow{background:url(../images/arrow.png) no-repeat; width:25px; height:25px; position:absolute; right:20px; top:50%; margin-top:-12.5px; opacity:1;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg); -ms-transform:rotate(0deg);transform:rotate(0deg);}
.stage ul li .title-stage:hover{background-color: #cfcfcf; }
.stage ul li .title-stage:hover span.cycle-num{color:#fff; background-color:#f49600}
.stage ul li .title-stage:hover span.detail{color:#000; }

.stage ul li .title-stage:hover span.st-arrow{ -webkit-transform:rotate(180deg);-moz-transform:rotate(180deg); -ms-transform:rotate(180deg);transform:rotate(180deg);}
.stage ul li.stage-open  .title-stage{background-color: rgba(0,0,0, 0.05)}

.stage ul li.stage-open .title-stage span.cycle-num{color:#fff; background-color:#f49600 }
.stage ul li.stage-open .title-stage span.st-arrow{-webkit-transform:rotate(180deg);	-moz-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
.content-stage{ background-color: rgba(255, 255, 255, 1); height:auto; width:100%; position:relative;display:none;box-shadow:inset 0 0 20px rgba(0,0,0,0.2); overflow:hidden;}

.content-stage div.info-div{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#2c3842; line-height:24px; padding:30px; text-align:left}
.content-stage p{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#2c3842; line-height:24px; padding:5px 0; text-align:left}

.content  ul li{ list-style:square url("../images/square.png"); font-family:Arial, Helvetica, sans-serif; color:#333; text-align:left; font-size:15px; line-height:24px; margin:10px 20px}

.zoom{ background:url(../images/zoom.png) no-repeat  center center; width:60px; height:60px; position:absolute; left:10px; top:-50px; bottom:auto; margin:0; z-index:100; cursor:pointer;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; border-radius:62px; -ms-border-radius:62px; -o-border-radius:62px; -webkit-border-radius:62px; box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); display:none}
.zoom:hover{ box-shadow:0 0 20px rgba(0,0,0,0.8)}
.leader{width:100%; height:290px; position:relative; margin:10px 0;background:url(../images/pattern.png) repeat;}
.leader-pic {background:url(../images/pattern.png) repeat;	box-shadow:0px 0px 10px #ccc; width:280px; height:auto; position:absolute; left:0; top:0; z-index:10; }
.leader-pic img {width:100%; max-width:250px; height:auto; margin:15px; display:block;}
.leader-text{background-color:#fff;	width:90%; position:relative;	display:inline-block; margin:40px 0;}
.leader-text h3{font-family: 'Gillsans'; font-weight:normal; font-size:24px; color:#003e80; line-height:24px; margin:20px 20px 20px 310px;  text-align:left; }
.leader-text p{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#2c3842; line-height:24px;  margin:0px 20px 20px 310px; text-align:left; }
.award {width:46%; height:600px; position:relative;  float:left; margin:1% ; background-color:rgba(255,255,255,1); display:block;}
.award .pic{width:90%; height:90%; overflow:hidden; position:absolute; left:5%; top:5%; z-index:0}
.award .pic img{ width:100%; height:auto;  position:absolute; left:0;top:0;  display:block;}
.award .title-name{width:90%; height:auto; position:absolute; z-index:100; left:5%; bottom:5%;background-color:rgba(0,0,0,0.5);}
.award .title-name h3{ font-family: 'Gillsans'; font-weight:normal; font-size:18px; color:rgba(255,255,255,1); line-height:20px; position:relative;text-align:center; padding:20px; text-transform:uppercase}



.video-box{ width:46%; height:600px; position:relative;  float:left; margin:1% ; background-color:rgba(255,255,255,1);display:block; overflow:hidden}
.video-box .pic{width:90%; height:90%; overflow:hidden; position:absolute; left:5%; top:5%; z-index:0}
.video-box .pic img{width:100%; height:auto; position:absolute; left:0;top:0;  display:block;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; -o-transform: scale(1.0); -ms-transform: scale(1.0);-moz-transform: scale(1.0);  -webkit-transform:scale(1.0);}
.video-box  .title-name{width:90%; height:auto; position:absolute; z-index:100; left:5%; bottom:5%;background-color:rgba(0,0,0,0.5);}
.video-box  .title-name h3{ font-family: 'Gillsans'; font-weight:normal; font-size:18px; color:rgba(255,255,255,1); line-height:20px; position:relative;text-align:center; padding:20px; text-transform:uppercase}
.player{ background:url(../images/play.png) no-repeat center center;width:62px; height:62px; position:absolute; left:50%; top:50%; margin:-31px 0 0 -31px; box-shadow: 0 0 30px rgba(255,255,255,0.0); border-radius: 62px; -ms-border-radius: 62px;-o-border-radius: 62px;-webkit-border-radius: 62px; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; z-index:999; border:solid 4px rgba(255,255,255,0.5)}
.player:hover{box-shadow: 0 0 30px rgba(0,0,0,0.8);border:solid 4px rgba(255,255,255,0)}

.recruitment-download{ width: 240px; height:auto; position:absolute; right:0px; left:auto;bottom:auto; top:100px; text-align:center; display:block}
.recruitment-download  span{ text-align:center; font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#666; position:absolute; top:0; left:10px;  padding:10px; width:170px; z-index:10}

/*a.download{ background:url(../images/download-form.png) no-repeat; width:170px; height:48px; position:absolute;top:50px; right:50px; margin:0px; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; opacity:1;z-index:100;}*/
a.download{ background:url(../images/download-form.png) no-repeat; width:170px; height:48px; position:relative; display:inline-block; margin:40px 30px 30px 0px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; opacity:1;z-index:100;}
a.download span{ text-align:center; font-size:15px; font-family:Arial, Helvetica, sans-serif; color:#333; position:absolute; top: -25px; left:0;}
a.download:hover{opacity:0.5}
a.download:hover span{ color:#000;}
.file-upload { position:absolute;top:40px; right:50px; margin:0px; width:170px; height:48px;z-index:110;}

#upload{width:170px; height:48px}
#browser-hide {position:absolute; width:102px; height:48px;opacity:0; z-index:10; right:0;top:0; cursor:pointer; }
.browser-button {position:absolute; right:0; top:0; background:url(../images/upload.png) no-repeat top right; height:48px; width:104px;cursor:pointer;z-index:1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; opacity:1;}
.browser-button:hover{opacity:0.5}
#file-field { width:68px;height:48px; margin:0; color:#333;font-family:Arial, Helvetica, sans-serif; font-size:14px;background:rgba(255,255,255,1);border:solid 1px rgba(255,255,255,1); padding:0 10px; position:absolute; left:0; top:0; box-shadow:inset 0 0 10px rgba(0,0,0,0.3);z-index:10;}
a.send{background:url(../images/sendfile.png) no-repeat; width:102px; height:48px;position:absolute;top:110px; right:50px; margin:0px; margin:0px; text-indent:-9999px; font-size:0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; opacity:1; z-index:100; display:none}
a.send:hover{opacity:0.5}





/*PROJECT - INVESTMENT*/
.colum-box-investment{position:absolute; height:100%; width:100%;  left:0; top:80px; margin:0; padding:0; display:block; opacity:1; z-index:10}
.colum-box-investment h2{position:relative; margin:0 300px; font-family: 'Gillsans'; font-weight:normal; font-size:24px; color:#003e80; line-height:24px; text-transform:uppercase; padding:10px 0px; text-align:left; display:none}

.colum-box-project{position:absolute; height:100%; width:100%;  left:0; top:80px; margin:0; padding:0; display:block; opacity:1; z-index:10}
.colum-box-project h2{position:relative; margin:0 300px; font-family: 'Gillsans'; font-weight:normal; font-size:24px; color:#003e80; line-height:24px; text-transform:uppercase; padding:10px 0px; text-align:left; display:none}

.content-project{width:auto; height:auto; position:absolute; overflow:hidden; left:0px; top:0px;}
.project-box{width:100%; height:100%;position:relative; margin:0; float:left; display:block; text-align:center}

.block-project{width:auto; height:100%;position:relative; display:inline-block; vertical-align:middle; margin:0; background-color:rgba(255,255,255,0.3); opacity:0.3;}

.block-project h3{position:relative;width:99%; height:auto; font-family: 'Gillsans'; font-weight:normal; font-size:20px; color:#003e80; line-height:20px; text-transform:uppercase; padding:20px 5%; text-align:left; background-color:rgba(255,255,255,0.3); margin:0 0 0 0.5%; position:relative}

.project-pic{width:99%; height:100%; margin:0; position:absolute;left:0.5%;top:60px;  z-index:1}
.project-pic:before { content:''; display:inline-block; vertical-align: middle; height: 100%;}
.project-pic:after {display:inline-block; vertical-align: middle; height: 100%;}
.project-pic img{width:100%; height:auto; position:relative; z-index:-9999; display:inline-block; margin:auto; vertical-align: middle; box-shadow: 0 -5px 10px rgba(0,0,0,0.1);}

/*.project-pic img{ width:100%; height:auto; display:block}
*/
.info-show{ position:absolute; right:5%; top:65px; width:auto; height:46px; background-color:rgba(255,255,255,1); font-family: 'Gillsans'; font-weight:normal; font-size:15px; color:#666; line-height:44px; padding:0 20px 0 0; text-transform:uppercase; cursor:pointer; z-index:10; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.info-show:hover{ background-color:#004a99; color:#fff}
.info-show span{ background:url(../images/info.png) no-repeat center left; width:40px ; height:38px; position:relative; display:inline-block; margin:4px 10px 0 4px; vertical-align:top}

.info-pictue{ position:absolute; left:5%; top:65px; width:auto; height:46px; background-color:rgba(255,255,255,1); font-family: 'Gillsans'; font-weight:normal; font-size:15px; color:#666; line-height:44px; padding:0 20px 0 0; text-transform:uppercase; cursor:pointer; z-index:10; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.info-pictue:hover{ background-color:#004a99; color:#fff}
.info-pictue span{ background:url(../images/pic.png) no-repeat center left; width:40px ; height:38px; position:relative; display:inline-block; margin:4px 10px 0 4px; vertical-align:top}


.project-text{position:absolute; width:98%; height:auto;  background-color:rgba(255,255,255,0.9); left:1%; top:50px; overflow:hidden; opacity:0; z-index:-1; padding-top:50px}
.project-text p{font-family:'MyriadLight'; color:#333; text-align:left; font-size:18px; line-height:30px; margin:30px 5%;  }


.project-box.active .block-project{opacity:1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.project-box.active .block-content{display:none; z-index:-9999}


.sub-project{width:auto; height:20px; position:absolute; right:20px; top:100px; text-align:center;  z-index:100; display:block;}
.sub-project li{position:relative; display:inline-block; width:8px; height:8px; border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px ; -ms-border-radius:8px;background-color:rgba(255,255,255,0); border:2px solid rgba(255,255,255,0); -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; box-shadow:0 0 3px rgba(0,0,0,0.5); margin:1px }
.sub-project li a{display:block; background-color:#ccc;  border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px ; -ms-border-radius:5px; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;width:5px; height:5px;;}
.sub-project li:hover a{background-color:#999;}
.sub-project li.current a{background-color:#999; cursor:default;  pointer-events: none;}

/*NEWS*/
.colum-box-news{position:absolute; height:100%; width:auto; max-width:1150px; left:0; top:0; margin:0; padding:0;background-color:rgba(255,255,255,0.9); z-index:10}
.colum-box-news h2{position:relative; margin:0 5%; width:90%; font-family: 'Gillsans'; font-weight:normal; font-size:24px; color:#003e80; line-height:24px; text-transform:uppercase; padding:15px 0px; text-align:left;}

.news-content{position:absolute; left:0; top:0; height:auto; width:100%;}
.list-icon{ background:url(../images/list.png) no-repeat center top; background-color:#003e80; width:200px; height:60px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; display:none; left:0px; top:0px; position:absolute; cursor:pointer; padding:0; margin:0; z-index:9999;}
.list-icon span{font-family: 'Gillsans'; font-weight:normal; font-size:18px; color:#fff;line-height:45px; white-space:nowrap; text-transform:uppercase; text-align:center; display:block}
.list-icon:hover{ background-color:#646464;}
.list-icon:hover span{ color:#fff;}
.list-close {background:url(../images/close3.png) no-repeat center center;width:50px; height:50px; position:absolute; left:50%; bottom:-60px;  margin-left:-25px; cursor:pointer;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; -webkit-border-radius:50px; box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); background-color:rgba(0,0,0,0.3);display:none; z-index:99999}
.list-close:hover{box-shadow:0 0 20px rgba(0,0,0,0.8)}


.news-right{width:200px;  height:auto; max-height:415px; position:absolute; right:-201px; top:80px; left:auto; margin:0; z-index:500;-ms-touch-action:none;box-shadow: none; background-color: transparent}
.news-list {width:200px; height:auto;  max-height:335px; position:absolute; left:0; top:0; overflow:hidden}
.news-list ul{width:auto; height:100%;  position:absolute; left:0; top:0;}
.news-list li{ width:199px; height:auto;  max-height:335px; position:relative; float:left; margin-right:1px }
.news-list li .link-page{ background-color:#fff;height:66px; width:196px; position:relative; float:left; margin-bottom:1px; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;border-radius:0; -webkit-border-radius:0; -o-border-radius:0; -ms-border-radius: 0;}
.news-list li .link-page a{ display:block;height:65px; width:100%; position:absolute; left:0; top:0}
.news-list li .link-page h3{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333; line-height:22px; margin:10px;width:176px; height:45px; text-align:left; overflow:hidden}
.news-list li .link-page:hover{background-color:#003e80}
.news-list li .link-page:hover h3{color:#fff;}
.news-list li .link-page.current{background-color:#003e80}
.news-list li .link-page.current a{cursor:default; pointer-events: none;}
.news-list li .link-page.current h3{color:#fff;}

.news-nav-2{width:200px; height:80px; z-index:99999;  opacity:1; position:absolute; top:auto; left:0; display:none; z-index:9999;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; text-align:center}
.news-nav-2 ul{width:200px; height:5px;  position:absolute; top:0px; left:0; text-align:center}
.news-nav-2 li{position:relative; width:5px; height:5px; margin:0px; display:inline-block; opacity:0 }
.news-nav-2 li a{ background-color:#333; width:5px; height:5px; font-size:0;text-indent:-9999px; display:block; border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px;}
.news-nav-2 li.current a{ border:2px solid #f49600; background-color:#f49600; cursor:default; }
.next-slide{ background:url(../images/next_s.png) no-repeat center center; width:40px; height:40px; position:absolute; right:20px;top:20px; cursor:pointer; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;border-radius: 40px; -webkit-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius:40px; background-color:rgba(255,255,255,0.5);}
.prev-slide{ background:url(../images/previous_s.png) no-repeat center center; width:40px; height:40px; position:absolute; left:20px;top:20px; cursor:pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;border-radius: 40px; -webkit-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius:40px; background-color:rgba(255,255,255,0.5);}
.next-slide:hover, .prev-slide:hover{background-color:rgba(255,255,255,1);}
.prev-slide span.hidden{ background:url(../images/blank.png) repeat;width:0; height:0; z-index:-99999; display:none}
.prev-slide.disable span.hidden{ height:100%; width:100%; left:0; top:0; z-index:500; position:absolute; display:block}
.prev-slide.disable{opacity:0.5; cursor:default}
.next-slide span.hidden{ background:url(../images/blank.png) repeat;width:0; height:0; z-index:-99999; display:none}
.next-slide.disable span.hidden{ height:100%; width:100%; left:0; top:0; z-index:500; position:absolute; display:block}
.next-slide.disable{opacity:0.5; cursor:default; pointer-events: none;}
.next-slide.disable:hover{background-color:rgba(255,255,255,0.5);}
.prev-slide.disable:hover{background-color:rgba(255,255,255,0.5);}
.numbers{width:80px; height:20px; position:relative; display:inline-block; margin-top:30px; font-family:'MyriadLight'; font-size:18px; color:#333; line-height:18px;font-weight:normal; text-align:center}
span.start{font-size:18px; color:#f49600; opacity:0;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; font-family:'MyriadCondBold';}
span.end{font-size:18px; color:#333; opacity:1}
.news-tab{ position:absolute; width:100%; height:100%; left:0; top:0; opacity:0}
.detail-news{position:absolute; width:100%; height:100%; left:0; top:0; padding:0}
.news-text {width:90%; height:auto; position:relative; margin:0 5% }
.news-text h3{font-family:Arial, Helvetica, sans-serif !important;  font-size:15px;color:#333; line-height:24px;  position:relative; font-weight:bold; width:100%; margin:0 0 20px 0; text-align:left; padding-bottom:20px; border-bottom:dotted 1px rgba(0,0,0,0.5)}
.news-text p{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#333; line-height:24px; position:relative; text-align:left;  padding:5px 0;}
.news-text table{font-family:Arial, Helvetica, sans-serif !important; font-size:15px; color:#333 !important; line-height:24px; position:relative;}
.news-text table div{font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#333 !important; text-align:left; line-height:24px; position:relative;}
.news-text img{max-width:100%; width:auto !important; height:auto !important; position:relative;  margin:10px auto; display:block; }
.news-text p a{color:#f49600}
.news-text p a:hover{color:#333;}
.news-text p span{font-family:Arial, Helvetica, sans-serif !important; font-size:14px; color:#333; line-height:22px; position:relative; font-style:italic; margin:2px 0 10px 0; text-align:center; display:block}



/*CONTACT*/
.contact-box{ position:absolute; width:950px; height:500px; left:0px;  top:80px; z-index:10;padding:0; border-bottom:none;}
.contact-info{position:relative;  float:left; width:400px;height:auto;margin:30px 10px 0 30px;  display:block; background-color:rgba(255,255,255,0.8); }
.contact-form{position:relative;  float:left;  width:450px; height:auto; margin:30px 0;  display:block}
.contact-info h3{ font-family: 'Gillsans'; ; font-size:24px; color:#003e80; line-height:24px; position:relative;  text-align:left; margin:20px}
.contact-info p{ font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#333; line-height:24px; position:relative;  text-align:left;  margin:20px}
.contact-info a{color:#f49600}
.contact-info a:hover{ color:#333}
.require-col{width:450px; height:auto; float:left; position:relative; margin:0;}
.input-text{ width:450px; height:48px; position:relative; float:left; margin:0 0 5px 0;  border:1px solid rgba(255,255,255,1);}
.input-text input[type="text"]{ font-family:Arial, Helvetica, sans-serif; color:#333; font-size:15px; line-height:26px; padding:0 15px; border:none; width:100%; height:46px; font-weight: normal;background-color:rgba(255,255,255,1); box-shadow:inset 0 0 10px rgba(0,0,0,0.2);opacity:0.8;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.input-text input[type="text"]:focus{opacity:1}
.input-area { width:450px; height:150px; position:relative; float:left; margin:0; border:1px solid rgba(255,255,255,1);}
.input-area textarea{ font-family:Arial, Helvetica, sans-serif; color:#333; font-size:15px; line-height:22px; border:none; width:100%; height:146px; padding:10px 15px; font-weight: normal; background-color:rgba(255,255,255,1); box-shadow:inset 0 0 10px rgba(0,0,0,0.2);resize:none;opacity:0.8;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.input-area textarea:focus{opacity:1}
.input-but-one{width:76px; height:46px; position:relative; display:inline-block;  border:3px solid rgba(255,255,255,0.1); box-shadow:0 0 3px rgba(0,0,0,0.5); z-index:60; margin:10px 5px 0 0}
.input-but-two{width:76px; height:46px; position:relative; display:inline-block; border:3px solid rgba(255,255,255,0.1); box-shadow:0 0 3px rgba(0,0,0,0.5); z-index:60; margin:10px 0 0 0}
input[type="button"]{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; background-color:#003e80; font-family: 'MyriadBold'; font-size:18px; line-height:40px; text-align:center; font-weight:normal; color:#fff; width:70px; height:40px; position:absolute; left:0; top:0;-webkit-appearance:none; cursor:pointer; border:none}
input[type="reset"]{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;background-color:#003e80; font-family: 'MyriadBold'; font-size:18px; line-height:40px; text-align:center; font-weight:normal; color:#fff; width:70px; height:40px; position:absolute; left:0; top:0;-webkit-appearance:none; cursor:pointer; border:none}
input[type="reset"]:hover,  input[type="button"]:hover{background-color:#f49600;}

/*ALBUM*/
.all-album{height:100%; width:100%; overflow:hidden;  position:absolute; left:0; top:0; display:none; z-index:5000}
.overlay-album{ background:url(../images/pattern.png) repeat; height:100%; width:100%; position:absolute;top:-100%;left:0; overflow:hidden; display:none;z-index:2100;}
.album-load{ width:100%; height:100%; position:absolute; left:0; top:0;display:none;}
.album-center{width:100%; height:100%; position:absolute; left:0; top:0; z-index:100; opacity:0;-ms-touch-action:none; cursor:ew-resize}
.album-pic-center{width:100%; height:100%; position:absolute; left:0; top:0;right:0; bottom:0; z-index:5; background-color:transparent !important; text-align:center }
.album-pic-center h3{font-family: 'MyriadLight'; font-size:18px; color:#d8af62; line-height:20px; display:block; font-weight:normal;text-transform:uppercase; height:40px;text-align:center; text-shadow:0 0 1px rgba(0,0,0,0.5);background-color:#413f38; border-radius: 20px 0 20px 0; -webkit-border-radius: 20px 0 20px 0; -o-border-radius: 20px 0 20px 0; -ms-border-radius: 20px 0 20px 0;width:250px; padding: 10px 20px 5px 20px; display:block; margin-left:-125px; position:absolute;bottom:10px; left:50%; z-index:1}
.album-pic-center:before { content:''; display:inline-block; vertical-align: middle; height: 100%;}
.album-pic-center:after {display:inline-block; vertical-align: middle; height: 100%;}
.album-pic-center img{width:auto; height:auto; position:relative; z-index:-9999;display:inline-block; margin:auto;vertical-align: middle;box-shadow: 0 0 5px rgba(0,0,0,0.2);border:5px solid rgba(255,255,255,0.0); max-height:90%; max-width:90%;}
.slide-pic-nav{width:100%; position:absolute; height:auto;top:50%;margin-top:-20px; bottom:auto; left:0; z-index:200; display:none}
.next-pic{ background:url(../images/next_s.png) no-repeat center center; width:40px; height:40px; position:absolute; right:10px;top:0; cursor:pointer; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;border-radius: 40px; -webkit-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius:40px;box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); background-color:rgba(255,255,255,0.3);}
.prev-pic{ background:url(../images/previous_s.png) no-repeat  center center; width:40px; height:40px; position:absolute; left:10px;top:0; cursor:pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;border-radius: 40px; -webkit-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius:40px ;box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); background-color:rgba(255,255,255,0.3);}
.next-pic:hover, .prev-pic:hover{ background-color:rgba(255,255,255,0.3);box-shadow:0 0 20px rgba(255,255,255,0.8)}
.close-album {background:url(../images/close.png) no-repeat;width:60px;height:60px; text-indent:-9999px; font-size:0; cursor: pointer; position:absolute;right:10px;top:10px;z-index:999999;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;border-radius: 60px; -webkit-border-radius: 60px; -o-border-radius: 60px; -ms-border-radius:60px ; display:block;  box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); background-color:rgba(255,255,255,0.3);}
.close-album:hover{background-color:rgba(255,255,255,0.3);box-shadow:0 0 20px rgba(255,255,255,0.8)}



/*BACKGROUND*/

.bg-page{position:absolute;left:0;top:0;overflow:hidden;height:100%;width:100%; opacity:0;}
.slide-full {position:absolute;left:0;top:0;overflow:hidden; height:100%;width:100%;  z-index:1;-ms-touch-action:none;}
.bg{width:100%;height:100%; position:absolute;left:0; top:0;}
.bg img{width:100%;height:auto; position:absolute;left:0; top:0;/*animation: 30s linear 0s normal none infinite bg-animation;-webkit-animation:30s linear 0s normal none infinite bg-animation;transform-origin: 50% 50% 0;-webkit-transform-origin: 50% 50% 0; */z-index:-999}
.bg-inner{width:100%;height:100%; position:absolute;left:0; top:0;}
.bg-inner img{width:100%;height:auto; position:absolute;left:0; top:0; z-index:-999}    
.title-01, .title-02, .title-03{font-family: 'Futura'; font-size:24px; line-height:30px; color:#004a99; font-weight:normal;text-transform:uppercase;}
.title-01{ position:absolute; right:170px; bottom:70px; text-align:left; width:auto}
.title-02{ position:absolute; left:0px; top:100px; text-align:center; width:100%}
.title-03{ position:absolute; left:260px; top:150px; text-align:left; width:auto; }
.blur{-webkit-filter: blur(8px);-o-filter: blur(8px);-ms-filter:blur(8px);filter: url(../images/blur.svg#blur);}
.black{ background-color:rgba(0,0,0,0.5) ;height:100%; width:100%; position:absolute;top:0;left:0;overflow:hidden; opacity:0.5}
.next-prev{display:none; position:absolute; right:20px; top:auto; left:auto; bottom:80px; width:125px; height:auto; z-index:1000}
.prevslide {position:absolute;height:60px;width:60px;left:0; top:0;background:url(../images/previous.png) no-repeat;border-radius:60px; -ms-border-radius:60px;-o-border-radius:60px;-webkit-border-radius:60px; cursor:pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;opacity:1; box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1);  background-color:rgba(255,255,255,0.3); z-index:99999}
.nextslide {position:absolute;height:60px;width:60px;right:0; top:0;background:url(../images/next.png) no-repeat; border-radius:60px; -ms-border-radius:60px;-o-border-radius:60px;-webkit-border-radius:60px;  cursor:pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; opacity:1; box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); background-color:rgba(255,255,255,0.3);z-index:99999}
.prevslide:hover{background-color:rgba(255,255,255,0.3);box-shadow:0 0 20px rgba(255,255,255,0.8)}
.nextslide:hover{background-color:rgba(255,255,255,0.3);box-shadow:0 0 20px rgba(255,255,255,0.8)}
.prevslide.disable, .nextslide.disable{ opacity:0.5;cursor:default;  background-color:rgba(255,255,255,0.3);box-shadow:none}
.prevslide.disable:hover{background-color:rgba(255,255,255,0.3);box-shadow:none}
.nextslide.disable:hover{background-color:rgba(255,255,255,0.3);box-shadow:none}
.overlay{background-color:transparent; height:100%; width:100%; position:absolute;top:0;left:0;overflow:hidden; z-index:4;}
.overlay-video{background-color:rgba(0,0,0,1); height:100%; width:100%; position:absolute;top:0;left:0;overflow:hidden; z-index:1100; display:none;}
.overlay-dark{ background-color:rgba(0,0,0,0.8) ;height:100%; width:100%; position:absolute;top:0;left:0;overflow:hidden; z-index:1100;display:none}
.back {position:absolute;height:50px;width:auto;right:0px;bottom:auto; top:5px;background:url(../images/previous.png) no-repeat center left; cursor:pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; display:none; z-index:100; }
.back span{font-family: 'MyriadLight'; font-size:18px; color:#003e80; line-height:50px; display:block; font-weight:normal;text-transform:uppercase; height:50px; white-space:nowrap; padding: 0 45px;background-color:rgba(255,255,255,0);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}
.back:hover{ background-position:-50px ; }
.back:hover span{color:#fff;background-color:rgba(0, 74, 153, 1)}

.all-pics{height:100%; width:0; overflow:hidden;  position:absolute; left:0; top:0; z-index:2000}
.full {display:none; position:absolute;z-index:9997;width:100%;height:100%; margin:0; padding:0; top:0; left:0; overflow:auto }
.full img {width:auto !important;height:auto !important; position:relative;outline:none;border:none; margin:0; padding:0; opacity:0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;}

.close-pics {background:url(../images/close.png) no-repeat center center;width:60px; height:60px; position:absolute; left:20px; top:20px; bottom:auto; margin:0; cursor:pointer;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out; border-radius:60px; -ms-border-radius:60px; -o-border-radius:60px; -webkit-border-radius:60px; box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); z-index:99999}
.close-pics:hover{box-shadow:0 0 20px rgba(0,0,0,0.8)}



/*VIDEO HTML5*/
.allvideo{position:absolute;width:0; height:100%; overflow:hidden; z-index:4000; left:0; top:0}
.close-video {background:url(../images/close.png) no-repeat  center center;width:60px;height:60px; text-indent:-9999px; font-size:0; cursor: pointer; position:absolute;right:10px;top:10px;z-index:999999;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;border-radius: 60px; -webkit-border-radius: 60px; -o-border-radius: 60px; -ms-border-radius:60px ; display:block;box-shadow:0 0 60px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,1); background-color:rgba(255,255,255,0.8);}
.close-video:hover{background-color:rgba(255,255,255,1);box-shadow:0 0 20px rgba(255,255,255,0.8)}
.video-list{width:100%; height:100%; position:absolute;left:0; top:0;background-color:rgba(0,0,0,0.5);}
.video-wrap{width:100%; height:100%; position:absolute; background-color:rgba(0,0,0,1); display:block; top:0; left:0; z-index:900; }
.video-skin {background-color:#000; position:absolute; top:0;left:0;  width:100%; height:100%; }

/*SCROLL*/
.scrollA{ width:100%; height:auto; position:absolute; left:0; top:60px; overflow:hidden;}
.scrollB{ width:100%; height:auto; position:absolute; left:0px; top:60px; overflow:hidden;}
.scrollC{ width:100%; height:auto; position:absolute; left:0; top:60px; max-width:1150px;  overflow:hidden;}
.scrollD{width:100%; height:100%; overflow:hidden;position:absolute; left:20px; top:20px}
.scroll-list{width:200px; height:335px;left:0; top:0; margin:0; position:absolute;}
.scroll-text{width:320px; height:210px;left:0; top:20px; margin:0; position:absolute;}
.floor-scroll{width:100%; height:70%; position:absolute; top:20%; overflow:hidden}
.scroll-list > * {-webkit-transform: translate3d(0,0,0);}



/*customs css */
.recruitment-success-error{background:#fff;box-shadow:0px 0px 2px 2px rgba(0, 74, 153, 1); position:absolute; width: 150px; height: auto; left:0;  top:70px;padding: 20px; -webkit-border-radius: 8px;border-radius: 8px; z-index:9999}
#f1_upload_process {background: none repeat scroll 0 0 transparent; bottom: 0;  height: 50px; left: 0; margin: auto; position:absolute; right: 0; top: 0;  width: 50px; z-index: 9999;}

/* custom css*/

.contact-success {
background: none repeat scroll 0 0 #003e80; border: 1px solid #002380;  border-radius: 5px; bottom: 0; box-shadow: 0 0 2px 2px #003e80; color: white; height: 70px;  left: 0;  margin: auto;
 padding: 15px; position:absolute;  right: 0;text-align: center; top: 0; width: 260px;}
 
.recruitment-success {height: auto; padding: 20px;}

.webmail{ background-color:rgba(255,255,255,1); width:60px; height:30px; position:absolute; right:184px; top:0; z-index:110; box-shadow:0px 0px 10px rgba(0,0,0,0.2) inset;  opacity:0.5;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
.webmail a.webmail-btn{ background:url(../images/webmail.jpg) no-repeat center center; position:absolute;  width:60px; height:30px;font-size:0;  text-indent:-9999px; display:block;}
.webmail:hover{ opacity:1}
.webmail.active{  background-color:rgba(220,220,220,1);}


@keyframes bg-animation {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.15);
}
100% {
    transform: scale(1);
}
}
@-webkit-keyframes bg-animation {
0% {
    -webkit-transform: scale(1);
}
50% {
    -webkit-transform: scale(1.15);
}
100% {
    -webkit-transform: scale(1);
}
}



@-webkit-keyframes play {
  from {background-position: 0px;}
  to {background-position: -360px;}
}
@keyframes play {
  from { background-position: 0px;}
  to {background-position: -360px;}
}
@media screen and (max-width: 1460px) {
  .colum-box{width:80%;}
  .white{width:80%;}
  .require-col, .input-text, .input-area{width:400px;}
  .file-upload, a.send{ right:25px;}

}
@media screen and (max-width: 1380px) {
   .colum-box{width:90%;}
   .white{width:90%;}
   .require-col, .input-text, .input-area{width:380px;}
   .recruitment-download{ right:auto; left:0; top:auto; bottom:300px}
   .recruitment-download span.text-note {left: 45px;}
}
@media screen and (max-width: 1180px) {
.nav li a h1{font-size:13px; padding:0px 10px ;}
.title-01, .title-02, .title-03{font-family: 'Futura'; font-size:20px; line-height:26px; color:#004a99; font-weight:normal;text-transform:uppercase;}
}

@media screen and (max-width: 1100px) {
.container{ height:auto;width:100%; top:80px}	
.center, .bottom{height:auto;width:100%; position:relative;left:auto; top:auto; float:left; opacity:0}
.bg-page{position:relative; float:left;left:auto; top:auto;}	
.center{position:relative; float:left; left:auto; top:auto; width:100%; height:auto;}
.bg-page{position:relative; float:left;left:auto; top:auto;}
.navigation{ height:329px; width:0; background-color:rgba(0,0,0,0.5) }
.nav { height:auto; width:100%; position:absolute; left:0; top:0}
.nav li{ margin:1px 1px 0 1px; height:40px; width:198px; background-color:rgba(244,244,244,1); }
.nav li a h1{ line-height:38px}
.bottom-text, .social{ float:none; display:inline-block; margin:10px; vertical-align:middle}
.copyright{ text-align:center}
.search-form{right:61px; }
.slogan{ font-size:16px; top:28px; left:260px; width:auto}
.logo.vi{ left:15px;}
.logo.en{ left:15px;}	
.top-right{right:10px;}
.bg img{animation:none;-webkit-animation:none;}
.title-01, .title-02, .title-03{font-family: 'Futura'; font-size:18px; line-height:24px; color:#004a99; font-weight:normal;text-transform:uppercase;}
.title-01{ position:absolute; right:80px; bottom:40px; text-align:left; width:auto}
.title-02{ position:absolute; left:0px; top:40px; text-align:center; width:100%}
.title-03{ position:absolute; left:50px; top:150px; text-align:left; width:auto}
.home-nav{display:none}
.home-content{position:relative; float:left;bottom:auto; left:auto;}
.home-box{width:100%; height:auto; bottom:auto !important; left:auto;  padding:20px 0; box-shadow:inset 0 0 20px rgba(0,0,0,0.2); position:relative; float:left}
.home-video{width:300px; margin:10px; height:200px;box-shadow:inset 0 0 10px rgba(0,0,0,0.2); }
.home-video .pic{height:85%; width:90%; margin:5%}
.home-news, .project-news{width:48%; margin:15px 0; height:170px;box-shadow:inset 0 0 10px rgba(0,0,0,0.2); }
.block p{ height:60%; font-size:14px; line-height:18px}
.content-page{position:relative; left:auto; top:auto; height:auto; width:100%; float:left}
.colum-box{position:relative; left:auto; top:auto; height:auto; width:100%; float:left; padding:10px 0 40px 0;display:none; opacity:0}
.colum-box-news{position:relative; left:auto; top:auto; height:auto; width:100%; float:left; padding:60px 0 40px 0;}
.colum-box-member{position:relative; left:auto; top:auto; height:auto; width:100%; float:left; padding:0 0 60px 0;}
.member-box{width:100%; height:auto; margin:0; background-color: rgba(255, 255, 255, 1);}
.content-member{position:relative; left:auto; top:auto; height:auto; width:100%; float:left;}
.member-box h3{ text-align:center; background-color:rgba(240,240,240,1); border-bottom:none}
.member-box.active{opacity:1;box-shadow:inset 0 0 20px rgba(0,0,0,0.3);}
.colum-box h2, .colum-box-news h2{ text-align:center;  margin:10px 5%; border-bottom: 1px dotted #999}
.colum-box-member h2{text-align:center;  margin:10px 5%;}
.colum-box-project{position:relative; left:auto; top:auto; height:auto; width:100%; float:left; padding:0;}
.colum-box-project h2{display:block; margin:10px 5%; text-align:center;}
.colum-box-investment{position:relative; left:auto; top:auto; height:auto; width:100%; float:left;padding:0 0 60px 0;}
.colum-box-investment h2{display:block; margin:10px 5%; text-align:center;}
/*.project-box{box-shadow: inset 0 0 20px rgba(0,0,0,0.2)}*/
.block-project{opacity:1;background-color:transparent; vertical-align:top; background-color:transparent; box-shadow: 0 0 10px rgba(0,0,0,0.2) }
.content-project{position:relative; left:auto; top:auto; height:auto; width:100%; float:left;box-shadow: inset 0 0 20px rgba(0,0,0,0.2); padding-bottom:70px}
.project-box h3{ text-align:center; background-color:rgba(240,240,240,1); font-size:18px }
.project-box.active{opacity:1;;-webkit-transition:none;-moz-transition: none;-o-transition: none;-ms-transition: none;}
.project-text{opacity:1; position:relative; float:left;background-color: rgba(255, 255, 255, 0);padding:0; top:auto; left:auto }
.project-pic{ position:relative; float:left; width:90%; margin:20px 5% 0 5%; top:auto; left:auto}
.project-text p{margin: 30px 15%; font-size:16px; line-height:24px; }
.info-pictue{ left:auto;top:110px; right:5%}
.info-show{ display:none}
.white, .sub-member, .sub-project{display:none}
.content img.director{width:auto; max-width:400px;}
.show-hide{ display:none}
.sub-menu{ width:100%; height:auto; position:relative; left:auto; top:auto; float:left; padding:10px 0 80px 0; background-color:rgba(0,0,0,0.1);box-shadow: inset 0 0 20px rgba(0,0,0,0.5);}
.sub-menu .link{ margin:1px -1px; display:inline-block; float:none; width:auto;box-shadow:0 0 5px rgba(0,0,0,0.2); background-color:rgba(255,255,255,1)}
.sub-menu .link a{font-size:15px;}
.sub-menu .link-news{ margin:1px -1px; display:inline-block; float:none; width:auto;box-shadow:0 0 5px rgba(0,0,0,0.2); background-color:rgba(255,255,255,1)}
.sub-menu .link-news a{font-size:15px;}
.sub-menu .link-project{ margin:1px -1px; display:inline-block; float:none; width:auto;box-shadow:0 0 5px rgba(0,0,0,0.2); background-color:rgba(255,255,255,1)}
.sub-menu .link-project a{font-size:15px;}

.sub-menu-project{ width:100%; height:auto; position:relative; left:auto; top:auto; bottom:auto; float:left; padding:10px 0 10px 0; }
.recruitment-download{ display:none}
.load-page{ position:relative; left:auto; top:auto; padding:50px 0; margin:0 5%; }
.back{top:80px;}

.next-prev, .next-prev-02{display:none; width:0;  height:0; z-index:-99999; overflow:hidden}
.video-list{background-color:rgba(0,0,0,1);}
.video-wrap{width:100%; height:100%; position:absolute; background-color:rgba(0,0,0,1); display:block; top:80px; left:0; z-index:900; }
.close-video {right:auto;top:10px; left:50%; margin-left:-25px}
.news-tab{ position:relative; float:left; height:auto; min-height:600px}
.detail-news{ position:relative; height:auto;left:auto; top:auto;padding: 0 0 30px 0;}
.news-nav-2{ display:none}
.news-right{ max-height:340px; left:50%; margin-left:-100px; right:auto; top:0; height:0}
.news-list ul{width:200px; height:auto;}
.news-content{top:auto; position:relative; float:left; left:auto}
.news-list{top:3px; left:3px}
.recruitment-download{ position:relative; float:left; width:100%; height:auto; padding:20px 0; right:auto; top:auto; bottom:auto; left:auto}

.file-upload, a.send{ display:none}
.contact-box{ position:relative; float:left; left:auto; top:auto; width:100%; height:auto; margin:0; padding:0 0 70px 0; background-color:rgba(0,0,0,0.1);}
.contact-info{width:70%; height:auto; margin:10px 15%; padding:20px; }
.contact-form{width:70%; margin:5px 15%; }
.contact-info p, .contact-info h3{ text-align:center;}
.require-col, .input-text, .input-area{width:100%; }
.require-col{text-align:center}
.member-box p{ width:90%; margin:10px 5%;background-color:rgba(255,255,255,0); padding:10px 0; min-height:inherit}
.member-pic{width:90%; margin:10px 5%;background-color:rgba(255,255,255,0); padding:0}

}

@media screen and (max-width: 820px) {
.slogan{font-family: 'MyriadCondBold'; font-size:16px; top:30px; /*left:240px;*/left:170px;font-weight:normal;}
.title-01, .title-02, .title-03{font-family: 'Futura'; font-size:16px; line-height:22px; color:#004a99; font-weight:normal;text-transform:uppercase;}
.title-01{ position:absolute; right:80px; bottom:40px; text-align:left; width:auto}
.title-02{ position:absolute; left:0px; top:30px; text-align:center; width:100%}
.title-03{ position:absolute; left:50px; top:150px; text-align:left; width:auto}
.home-news, .project-news{width:90%; margin:10px 5%; height:200px}
.news-wrap, .project-wrap{ width:96%; height:87%; margin:2%; }
.block{ height:160px; }
.content img.director{width:50%; max-width:inherit;}
.zoom{ display:block}
.award { height:450px;}
.video-box{ height:450px;}
.contact-info{width:80%; margin:10px 10%;}
.contact-form{width:80%; margin:5px 10%;}

.project-text p{margin: 30px 10%;}

}

@media screen and (max-width: 620px) {
.logo.vi{ background:url(../images/logo-vi-m.png) no-repeat; width:80px; height:80px; position:absolute; left:0px; top:0px; z-index:999}
.logo.en{ background:url(../images/logo-en-m.png) no-repeat; width:80px; height:80px; position:absolute; left:0px; top:0px; z-index:999}	
.slogan{font-size:15px; /*top:30px; left:90px;*/top:50px; left:130px;font-weight:normal;}
.title-01, .title-02, .title-03{font-family: 'Futura'; font-size:13px; line-height:16px; color:#004a99; font-weight:normal;text-transform:uppercase;}
.title-01{ position:absolute; right:50px; bottom:30px; text-align:left; width:auto}
.title-02{ position:absolute; left:0px; top:50px; text-align:center; width:100%}
.title-03{ position:absolute; left:30px; top:120px; text-align:left; width:auto}
.content img.director{width:70%; max-width:inherit; float:none; text-align:center; margin:20px auto}
.leader{width:100%; height:auto; position:relative; float:left; margin:10px 0}
.leader-pic {  position:relative; left:auto; top:auto; display:block; margin: 10px auto}
.leader-pic img {width:250px; padding:15px 0;}
.leader-text{margin:0 5%;}
.leader-text h3{ font-size:20px; line-height:20px; margin:20px;  text-align:center; }
.leader-text p{margin:0px 20px 30px 20px;  text-align:center; }
.award { width:70%; height:550px; margin:10px 15%}
.video-box{ width:70%; height:550px;  margin:10px 15%}
.contact-info{width:90%; margin:10px 5%;}
.contact-form{width:90%; margin:5px 5%;}	
.project-text p{margin: 30px 5%;}
span.detail{right:10px; top:55px}
}

@media screen and (max-width: 520px) {
.slogan{font-family: 'MyriadCondensed'; font-size:14px; top:50px; left:90px;font-weight:normal;}
.title-01, .title-02, .title-03{font-family:'MyriadCondBold'; font-size:14px; line-height:18px; color:#004a99; font-weight:normal;text-transform:uppercase;}
.title-01{ position:absolute; right:20px; top:20px; text-align:right; width:auto}
.title-02{ position:absolute; left:0px; top:40px; text-align:center; width:100%}
.title-03{ position:absolute; left:20px; top:120px; text-align:left; width:auto}
.home-news, .project-news{width:90%; margin:10px 5%; height:160px}
.news-wrap, .project-wrap{ width:94%; height:85%; margin:3%; }
.block{ height:120px; }
.block p{ height:70px;}
.block .pic img{width:auto; height:100%; display:block}
.colum-box h2, .colum-box-news h2, .colum-box-member h2, .colum-box-project h2{font-size:18px;}
.project-box h3, .member-box h3{font-size:16px;}
.project-text p{font-size:15px;}
.stage ul li > .title-stage h3{font-size:15px;  line-height:18px; padding:0 40px 0 70px}
.stage ul li > .title-stage span.cycle-num{left:10px;}
.stage ul li > .title-stage span.st-arrow{right:10px;}
.award {  height:450px; width:80%;margin:10px 10%}
.video-box{ height:450px;width:80%; margin:10px 10%}

}


@media screen and (max-width: 350px) {
.slogan{ display:none}
.title-01, .title-02, .title-03{font-family: 'MyriadCondBold'; font-size:12px; line-height:14px; color:#004a99; font-weight:normal;text-transform:uppercase;}
.title-01{ position:absolute; right:20px; top:10px; text-align:right; width:auto}
.title-02{ position:absolute; left:0px; top:30px; text-align:center; width:100%}
.title-03{ position:absolute; left:20px; top:100px; text-align:left; width:auto}
.content img.director{width:80%;}
.award { height:400px;width:80%; margin:10px 10%}
.video-box{height:400px;width:80%; margin:10px 10%}
}