@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Raleway:500,300,100);
/*---------------------
THEME COLOR #0058A6
---------------------*/
/*======================== LAYOUT =======================*/
html,body { font-family:'Raleway', Helvetica, Arial, sans-serif; font-weight:300;}
a { text-decoration:none; transition: opacity 0.3s;
     -moz-transition: opacity 0.3s;
     -webkit-transition: opacity 0.3s;
     -ms-transition: opacity 0.3s;
     -o-webkit-transition: opacity 0.3s;}
header { width:100%; height:80px; position:fixed; left:0; top:0; z-index:8000; background:rgba(255,255,255,0.1);transition:height 0.5s; -moz-transition: height 0.5s;-webkit-transition: height 0.5s; -ms-transition: height 0.5s; -o-webkit-transition: height 0.5s;}
header.blue-header { width:100%; height:80px; position:fixed; left:0; top:0; z-index:8000; background:url(../images/bg-team-header.png) repeat;}

#header-wrap { width:1090px; margin:0 auto}
#header-wrap h1 { width:145px; height:40px; float:left; margin:10px 0 0 0;}
#header-wrap h1 a { display:block; overflow:hidden; width:161px; height:62px; background:url(../images/logo.png) no-repeat left top; text-indent:-9999px;}
#header-wrap nav {height:80px; overflow:hidden; float:right; margin:0; transition:margin-top 0.5s; -moz-transition: margin-top 0.5s;-webkit-transition: margin-top 0.5s; -ms-transition: margin-top 0.5s; -o-webkit-transition: margin-top 0.5s; }
#header-wrap nav ul { display:block; list-style:none; padding:0; margin:0; height:80px;}
#header-wrap nav ul li { display:block; list-style:none; padding:0; margin:0 0 0 60px; line-height:80px; height:80px; font-size:15px; color:#FFF; float:left; transition:font-size 0.4s; -moz-transition: font-size 0.4s;-webkit-transition: font-size 0.4s; -ms-transition: font-size 0.4s; -o-webkit-transition: font-size 0.4s;}
#header-wrap nav ul li .a1{padding:2px}
#header-wrap nav ul li.current a { font-weight:600}
#header-wrap nav ul li:first-child { margin:0}
#header-wrap nav ul li a { color:#FFF; opacity:0.7;  transition: opacity 0.2s;
     -moz-transition: opacity 0.2s;
     -webkit-transition: opacity 0.2s;
     -ms-transition: opacity 0.2s;
     -o-webkit-transition: opacity 0.2s;}
#header-wrap nav ul li:hover a { color:#FFF; opacity:1}
#header-wrap nav ul li:first-child { }
#header-wrap #submenu { display:block; padding:0; position:absolute; top:80px; border-top:1px solid #FFF; margin:0 0 0 -80px; display:none;}
#header-wrap #submenu li { line-height:30px; height:30px; float:left; font-family:Helvetica,Arial, sans-serif; font-size:13px; margin:0 0 0 40px }
#header-wrap #submenu li:first-child { margin:0}
#header-wrap #submenu li { opacity:0.7}
#header-wrap #submenu li:hover { opacity:1}
#header-wrap #submenu2 { display:block; padding:0; position:absolute; top:80px; border-top:1px solid #FFF; margin:0 0 0 -80px; display:none;}
#header-wrap #submenu2 li { line-height:30px; height:30px; float:left; font-family:Helvetica,Arial, sans-serif; font-size:13px; margin:0 0 0 40px }
#header-wrap #submenu2 li:first-child { margin:0}
#header-wrap #submenu2 li { opacity:0.7}
#header-wrap #submenu2 li:hover { opacity:1}
#header-wrap #submenu3 { display:block; padding:0; position:absolute; top:80px; border-top:1px solid #FFF; margin:0 0 0 -80px; display:none;}
#header-wrap #submenu3 li { line-height:30px; height:30px; float:left; font-family:Helvetica,Arial, sans-serif; font-size:13px; margin:0 0 0 40px }
#header-wrap #submenu3 li:first-child { margin:0}
#header-wrap #submenu3 li { opacity:0.7}
#header-wrap #submenu3 li:hover { opacity:1}
#header-wrap #submenu4 { display:block; padding:0; position:absolute; top:80px; border-top:1px solid #FFF; margin:0 0 0 -80px; display:none;}
#header-wrap #submenu4 li { line-height:30px; height:30px; float:left; font-family:Helvetica,Arial, sans-serif; font-size:13px; margin:0 0 0 40px }
#header-wrap #submenu4 li:first-child { margin:0}
#header-wrap #submenu4 li { opacity:0.7}
#header-wrap #submenu4 li:hover { opacity:1}
#header-wrap #btn-t5 {margin-left: 25px;padding-top: 8px;}

/*header.slim { height:30px}
header.slim nav { margin-top:0}
header.slim nav ul li { font-size:13px;}
*/

/* for light
header { width:100%; height:80px; background:rgba(0,0,0,0.8); position:fixed; left:0; top:0; z-index:1000}
header h1 { width:200px; height:60px; float:left; margin:10px 0 0 10%;}
header h1 a { display:block; overflow:hidden; width:144px; height:40px; background:url(../images/umc-capital.png) no-repeat left top;}
header nav { width:500px; height:30px; overflow:hidden; float:right; margin:25px 10% 0 0 }
header nav ul { display:block; list-style:none; padding:0; margin:0; overflow:hidden; height:30px;}
header nav ul li { display:block; list-style:none; padding:0; margin:0 0 0 70px; line-height:30px; height:30px; font-size:15px; color:#FFF; float:left;}
header nav ul li:first-child { margin:0}
header nav ul li a { color:#FFF}

*/
		
		
/*======================== INDEX =======================*/
.swipe {
  overflow: hidden;
  /*visibility: hidden;*/
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  background-color:#333;
  height:100%;
  position: relative;
}
.swipe-wrap > div {
  width:100%;
  height:100%;
  position:absolute;
}

#slider {width:100%; height:860px; list-style:none; padding:0; margin:0;}
.swipe-wrap div a { display:block; width:100%; height:100%;}
.swipe-wrap div h2 { display:block; font-size:48px; line-height:64px; font-weight:100; width:980px; left:50%; margin:0 0 0 -490px; text-align:center; position:absolute; top:39%; text-shadow:1px 1px 1px rgba(0,0,0,0.6) ; color:#FFF;}

.swipe-wrap div p { font-size:16px; line-height:24px; opacity:0.7; width:720px; margin:0 0 0 -360px; text-align:center;position:absolute; top:46%; left:50%; text-shadow:1px 1px 1px rgba(0,0,0,0.8); color:#FFF; }
.swipe-wrap div span { display:block; font-family:Helvetica,Arial, sans-serif; font-size:13px; font-weight:bold; line-height:13px; width:300px; margin:0 0 0 -150px; text-align:center; top:63%; left:50%; position:absolute; color:#FFF;}

.swipe-wrap div h2 a,.swipe-wrap div p a{ color:#FFF; transition: color 0.4s;
     -moz-transition: color 0.4s;
     -webkit-transition: color 0.4s;
     -ms-transition: color 0.4s;
     -o-webkit-transition: color 0.4s;}
.swipe-wrap div span a { color:#FFFFFF; opacity:0.7; text-shadow:1px 1px 1px rgba(0,0,0,0.8);}
.swipe-wrap div span a:hover { opacity:1}/**/
#slidedot { display:block; list-style:none; position:absolute; left:50%; bottom:3%; z-index:9900;  padding:5px 0; margin:0}
#slidedot li { display:block; list-style:none; width:8px; height:8px; border:1px solid #FFF; float:left; margin-left:15px; border-radius:5px; margin-top:1px; background:#FFF; transition: width 0.3s, height 0.3s, margin-top 0.3s;
     -moz-transition: width 0.3s, height 0.3s, margin-top 0.3s;
     -webkit-transition: width 0.3s, height 0.3s, margin-top 0.3s;
     -ms-transition: width 0.3s, height 0.3s, margin-top 0.3s;
     -o-webkit-transition: width 0.3s, height 0.3s, margin-top 0.3s; }
#slidedot li:first-child { margin-left:0}
#slidedot li a { display:block; width:100%; height:100%; padding:0; margin:0;  text-indent:-9999px;}
#slidedot li.currentdot { background:none; border:1px solid #FFF; width:10px; height:10px; border-radius:6px;margin-top:0; }
		



/*======================== Our Value =======================*/
#our-value { overflow:hidden}
#our-value h1 { display:none}
#our-value article { display:block; width:100%; float:left; height:850px; overflow:hidden; position:relative;}
#our-value article h2 { position:absolute; left:50%; width:1100px; display:block; margin:250px  0 0 -550px; font-size:26px; text-align:center; color:#FFF; text-shadow:1px 1px 2px #333; line-height:36px; overflow:visible; letter-spacing:0; opacity:1; font-weight:300}
#our-value article h2#headline-1 { left:50%}
/*#headline { position:fixed; left:0; top:20%; width:100%; height:120px; overflow:hidden}
#headline ul { display:block}*/

#center-stage { width:800px; height:360px; position:fixed; left:50%; top:50%; margin:-100px 0 0 -400px; z-index:1000; color:#FFFFFF;}
#remark { font-family:Helvetica,Arial,sans-serif; font-size:12px; color:#999; width:100%; height:100%; position:relative; left:0; top:0; display:none}
#basic-line { left:0; top:0; position:absolute; z-index:10; opacity:0.7}
#growing-line { width:78px; height:360px; overflow:hidden; position:absolute; left:0; top:0; background:url(../images/dna/chart.png) no-repeat -9px 8px; z-index:100}
#level { width:800px; height:360px; overflow:hidden; position:absolute; left:0; top:0; z-index:2000; }
#level div { height:360px; float:left; overflow:hidden;/* border:1px solid #999*/}
#horizon { width:100%; left:0; top:50%; margin:253px 0 0 0; border-top:1px solid #FFF; overflow:hidden; height:45px; position:fixed; z-index:3000;  opacity:0.6;}
#remark-bottom { width:800px; height:45px; margin:0 auto; color:#FFFFFF;font-family:Helvetica,Arial,sans-serif; font-size:12px;}
#remark-bottom span { display:block; float:left; height:25px; line-height:25px; overflow:hidden; padding:0 0 0 48px; margin:10px 0 0 30px; }
#remark-bottom span:first-child { background:url(../images/dna/line.png) no-repeat left 10px;}
#remark-bottom span:first-child+span { background:url(../images/dna/line.png) no-repeat left -25px;}
#remark-bottom span:first-child+span+span { padding:0 25px 0 0; margin:10px 0 0 300px; background:url(../images/dna/arrow-h.png) no-repeat right -3px;}
#dotmask { position:fixed; left:0; top:0; width:100%; height:100%; z-index:5; background:url(../images/grid.png) repeat}

#animate-wall { overflow:hidden; width:800px; height:360px; overflow:hidden; position:relative; z-index:4000}
#bubble-1 { width:20px; height:20px; border:2px solid #FFF; border-radius:12px; background:rgba(45,136,0,0.8); top:270px; left:93px; position:absolute; z-index:201}
#bubble-2 { width:20px; height:20px; border:2px solid #FFF; border-radius:12px; background:rgba(217,0,0,0.7); top:310px; left:235px; position:absolute; z-index:211}
#bubble-3 { width:20px; height:20px; border:2px solid #FFF; border-radius:12px; background:rgba(45,136,0,0.8); top:168px; left:356px; position:absolute; z-index:221}
#bubble-4 { width:20px; height:20px; border:2px solid #FFF; border-radius:12px; background:rgba(45,136,0,0.8); top:105px; left:672px; position:absolute; z-index:231}
#bubble-5 { width:20px; height:20px; border:2px solid #FFF; border-radius:12px; background:rgba(45,136,0,0.8); top:60px; left:708px; position:absolute; z-index:241}
#l-line-1 { width:1px; height:70px; background:#FFF; position:absolute; left:105px; bottom:7px; z-index:101}
#l-line-2 { width:1px; height:30px; background:#FFF; position:absolute; left:246px; bottom:7px; z-index:111}
#l-line-3 { width:1px; height:170px; background:#FFF; position:absolute; left:367px; bottom:7px; z-index:121}
#l-line-4 { width:1px; height:237px; background:#FFF; position:absolute; left:683px; bottom:7px; z-index:131}
#l-line-5 { width:1px; height:286px; background:#FFF; position:absolute; left:719px; bottom:7px; z-index:141}
#remark-1 { width:181px; height:81px; background:url(../images/dna/remark-chart.png) no-repeat left top; position:absolute; left:480px; top:260px}

/*DNA*/
#our-dna {}
#our-dna h1 { display:none}
#center-stage-dna { width:980px; height:50px; position:fixed; left:50%; top:85%; margin:0 0 0 -490px; z-index:9999; color:#FFF;}
#center-stage-dna ul { display:block; width:980px; height:50px; list-style:none}
#center-stage-dna ul li { display:block; width:145px; height:45px; margin:2px 0 0 20px; color:#FFF ;list-style:none; border-top:1px solid #fff; float:left; line-height:45px; font-size:14px; opacity: 0.7; transition: border 0.7s, margin-top 0.3s, opacity 0.3s; -moz-transition: border 0.3s, margin-top 0.3s, opacity 0.3s; -webkit-transition: border 0.3s, margin-top 0.3s, opacity 0.3s;  -ms-transition:border 0.3s, margin-top 0.3s, opacity 0.3s; -o-webkit-transition:border 0.3s, margin-top 0.3s, opacity 0.3s;}
#center-stage-dna ul li a { color:#fff; display:block; overflow:hidden; width:145px; height:45px; text-decoration:none;}
#center-stage-dna ul li:first-child { margin:2px 0 0 0;}
#center-stage-dna ul li.current { border-top:3px solid #FFF; margin-top:0; opacity:1} 



#our-dna article { display:block; width:100%; float:left; height:850px; overflow:hidden; position:relative;}
#our-dna article div { position:relative; left:50%; width:240px; height:240px; display:block; margin:8% 0 0 -120px; text-align:center; color:#FFF; text-shadow:1px 1px 2px #333; line-height:36px; overflow:visible; }
#our-dna article h2 { position:absolute; left:50%; top:32%; width:980px; display:block; margin:0 0 0 -490px; font-size:40px; text-align:center; color:#FFF; text-shadow:1px 1px 2px #333; line-height:42px; overflow:hidden; font-weight:300}
#our-dna article p { text-shadow: 1px 1px 2px #333;display:block; width:640px; height:auto; margin:0 0 0 -320px; color:#FFF; font-size:15px; line-height:24px; text-align:center; position:absolute; left:50%; top:37%; opacity:0.7; font-family:Arial, Helvetica, sans-serif; font-weight:normal}
#our-dna article#dna-intro h2 { font-size:81px; font-weight:100; text-align:left;line-height:100px; text-shadow:none;  top:45%;}

#animate-2 span { display:block; position:absolute; border:1px solid #FFF; left:50%; opacity:1}
#a2-1 { width:146px; height:146px; border-radius:74px; margin-left:-74px; top:0} 
#a2-2 { width:74px; height:74px; border-radius:38px; margin-left:-38px; top:115px} 
#a2-3 { width:38px; height:38px; border-radius:20px; margin-left:-20px; top:170px} 
#a2-4 { width:12px; height:12px; border-radius:7px; margin-left:-7px; top:205px} 

#animate-3 span { display:block; position:absolute; border:1px solid #FFF; left:50%; top:50%; opacity:1}
#a3-1 { width:190px; height:190px; border-radius:95px; margin:-95px 0 0 -95px;} 
#a3-2 { width:130px; height:130px; border-radius:65px; margin:-65px 0 0 -65px;} 
#a3-3 { width:68px; height:68px; border-radius:34px; margin:-34px 0 0 -34px;} 
#animate-3 #a3-5 { border:none; margin:-83px 0 0 -5px; opacity:1} 

#animate-4 span { display:block; position:absolute; border:1px solid #FFF; left:50%; top:50%; opacity:1}
#a4-1 { width:120px; height:120px; border-radius:62px; margin:-50px 0 0 -110px; opacity:1} 
#a4-2 { width:120px; height:120px; border-radius:62px; margin:-50px 0 0 -10px; opacity:1} 
#animate-4 #a4-3 { width:160px; height:160px; border-radius:80px; margin:-80px 0 0 -80px; opacity:0; background-color:#FFFFFF; border:none} 
#animate-4 #a4-4 { width:160px; height:160px; border-radius:80px; margin:-80px 0 0 -80px; opacity:0; background-color:#FFFFFF; border:1px solid #FFF} 

#animate-5 span { display:block; position:absolute; opacity:1}
#a5-1 { width:198px; height:173px; border-radius:62px; opacity:1;left:0; top:30px} 
#a5-2 { width:198px; height:132px; border-radius:62px; opacity:1; left:0; top:70px} 



/*portfolio-wrap*/
#portfolio-wrap { /*background:url(../images/portfolio/bg-portfolio.png) no-repeat center top; background-attachment:fixed;*/ min-height:600px; float:left; margin:0; padding:0; width:100%; overflow:visible }

#filter { width:980px; margin:140px auto 0 auto; border-bottom:1px solid rgba(255,255,255,0.5); overflow:hidden}
#filter ul { display:block; list-style:none; margin:0; padding:0; float:left; height:170px;}
#filter ul li { display:block; list-style:none; margin:0; padding:0; float:left; color:#FFF; font-size:14px; line-height:28px}
#filter ul li:first-child { font-size:18px; line-height:36px; height:36px; width:100%}
#filter ul li span { display:block; float:left}
#filter ul li span:first-child { width:30px}

#filter input[type="checkbox"] { display:none;}
#filter input[type="checkbox"] + label span {
    display:block; float:left; margin:8px 10px 0 0; width:10px; height:10px; border:1px solid #FFF; border-radius:6px;  transition: background-color 0.2s;
     -moz-transition: background-color 0.2s;
     -webkit-transition: background-color 0.2s;
     -ms-transition: background-color 0.2s;
     -o-webkit-transition: background-color 0.2s;
}

#filter input[type="checkbox"]:checked + label span {
    background:rgba(255,255,255,0.7);
}

#industry { width:600px;}
#industry li { width:300px;}
#status { width:220px;}
#status li { width:220px;}
#focus-area { width:160px;}
#focus-area li { width:160px;}

#portfolio { width:1080px; min-height:600px; margin:0 auto; padding:0 0 120px 0; overflow:visible}
#portfolio ul { display:block; list-style:none; width:240px; height:100px; float:left; margin:10px 0 10px 40px; position:relative; overflow:visible;}
#portfolio ul:first-child { margin:10px 0 10px 0}
#portfolio ul:nth-child(4n+1) { margin:10px 0 10px 0}
#portfolio ul li { display:block; list-style:none; width:240px;}
#portfolio ul li.logo { width:240px; height:100px; overflow:hidden}
#portfolio ul li.logo img { display:block; width:240px; height:auto; margin:0; padding:0; transition: margin-top 0.3s; -moz-transition: margin-top 0.3s;
     -webkit-transition: margin-top 0.3s;
     -ms-transition: margin-top 0.3s;
     -o-webkit-transition: margin-top 0.3s;}
#portfolio ul:hover li.logo img { margin-top:-100px} 
#portfolio ul li.description { position:absolute; top:60px; z-index:50; display:block; width:240px; display:none; opacity:0; overflow:hidden}
#portfolio ul li.description h2 { display:block; width:190px; padding:20px 25px 0 25px; font-size:18px; font-weight:300; color:#000; background:url(../images/portfolio/desc-h2.png); height:30px; line-height:30px; }
#portfolio ul li.description p { display:block; width:190px; padding:5px 25px 15px 25px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:18px; color:#333; float:left; margin:0; background:url(../images/portfolio/desc-p.png) no-repeat left bottom;}
#portfolio ul li.description p span { font-family:Helvetica,Arial, sans-serif; display:block; width:100%; padding:7px 0 0 0; margin:7px 0 0 0; border-top:1px solid #478AC0; font-style:italic}
#portfolio ul li.description p span strong { font-weight:bold; color:#0058A6; font-style:normal}







/*#strategy { width:100%; margin:0 auto; padding:50px 0;background: rgb(56,103,181); 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzM4NjdiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5MmFjZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(56,103,181,1) 1%, rgba(146,172,214,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(56,103,181,1)), color-stop(100%,rgba(146,172,214,1)));
background: -webkit-linear-gradient(top,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
background: -o-linear-gradient(top,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
background: -ms-linear-gradient(top,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
background: linear-gradient(to bottom,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3867b5', endColorstr='#92acd6',GradientType=0 ); 
}*/
#stage { width:100%; height:450px; background: rgb(56,103,181); 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzM4NjdiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5MmFjZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(56,103,181,1) 1%, rgba(146,172,214,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(56,103,181,1)), color-stop(100%,rgba(146,172,214,1)));
background: -webkit-linear-gradient(top,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
background: -o-linear-gradient(top,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
background: -ms-linear-gradient(top,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
background: linear-gradient(to bottom,  rgba(56,103,181,1) 1%,rgba(146,172,214,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3867b5', endColorstr='#92acd6',GradientType=0 );}
#stage h2 { display:block; text-align:center; width:980px; line-height:40px; font-weight:100; margin:0 auto; padding:0; height:40px; overflow:hidden;}
#triangle-animate{ width:980px; height:410px; position:relative; margin:0 auto; }
.triangle {
	width: 0; height: 0; position:absolute;   bottom:0;
/*	transition: border-width 1s;
     -moz-transition: border-width 1s;
     -webkit-transition: border-width 1s;
     -ms-transition: border-width 1s;
     -o-webkit-transition: border-width 1s;*/
}

#seed { left:0; border-left: 50px solid transparent; border-right: 50px solid transparent;	border-bottom: 89px solid #CEDDF2;opacity:0.4}
#early { left:72px; border-left: 72px solid transparent; border-right: 72px solid transparent;	border-bottom: 120px solid #CEDDF2; opacity:0.4}
#growth { left:184px; border-left: 99px solid transparent;	border-right: 99px solid transparent;	border-bottom: 164px solid #CEDDF2; opacity:0.4}
#pre-ipo { left:346px; border-left: 139px solid transparent;	border-right: 139px solid transparent;	border-bottom: 230px solid #CEDDF2; opacity:0.4}
#public { left:581px; border-left: 200px solid transparent;	border-right: 200px solid transparent;	border-bottom: 330px solid #CEDDF2; opacity:0.4}

#line-seed { width:1px; position:absolute; left:50.5px; bottom:0; height:89px; background-color:#095ABF; z-index:600}
#line-early { width:1px; position:absolute; left:144.5px; bottom:0; height:120px; background-color:#095ABF; z-index:700}
#line-growth { width:1px; position:absolute; left:282.5px; bottom:0; height:164px; background-color:#095ABF; z-index:800}
#line-pre-ipo { width:1px; position:absolute; left:484.5px; bottom:0; height:230px; background-color:#095ABF; z-index:900}
#line-public { width:1px; position:absolute; left:781px; bottom:0; height:330px; background-color:#095ABF; z-index:1000}

.stage-title { font-size:18px; display:block;height:40px; overflow:hidden;position:absolute; color:#FFFFFF; text-align:center;}
#title-seed { left:0; bottom:101px;  width:80px; }
#title-early { left:105px; bottom:139px; width:80px;}
#title-growth { left:240px; bottom:180px; width:80px;}
#title-pre-ipo { left:400px; bottom:240px; width:200px;}
#title-public { left:630px; bottom:330px; width:300px;}



#strategy { width:100%; margin:0 auto; padding:70px 0;background-color:#095ABF;}
#strategy h2 { display:block; margin:0 auto; width:980px; text-align:center;}
#about-wrap #strategy h2 {font-weight:100}
#strategy h2 span { display:block; margin:0 auto}
#strategy h2 span:first-child { font-size:21px; font-style:italic;}
#strategy p { display:block; margin:60px auto; width:420px; line-height:24px;}
#six-part { display:block; list-style:none; overflow:hidden; width:974px; height:172px; margin:50px auto; position:relative}
#six-part li { display:block; list-style:none; overflow:hidden; width:120px; height:50px; line-height:25px; font:16px; text-align:center; padding:60px 25px; border:1px solid #FFF; border-radius:86px; position:absolute; top:0}
#six-part li:first-child { left:0}
#six-part li:first-child+li { left:160px}
#six-part li:first-child+li+li { left:320px; }
#six-part li:first-child+li+li+li { left:480px; }
#six-part li:first-child+li+li+li+li { left:640px}
#six-part li:first-child+li+li+li+li+li { left:800px}

#umc-capital-overview p .description { display:block; height:45px; width:100%; font-size:15px; line-height:21px; border-top:1px solid rgba(255,255,255,0.5); margin:25px auto 0 auto; padding:15px 0 0 0; text-align:center}
#umc-capital-overview h2 { display:block; text-align:center; width:980px; line-height:40px; font-weight:100; margin:0 auto; padding:80px 0 0 0; height:40px; overflow:hidden;}

#evergreen-fund span { display:block; width:200px; float:left}
#evergreen-fund span:first-child { font-size:36px; line-height:36px; margin:13px 0 0 0} 
#evergreen-fund span:first-child+span { font-size:72px; line-height:78px} 

#nyse-tse span { display:block; height:64px;font-size:64px; line-height:64px; overflow:hidden; width:160px; float:left}
#nyse-tse span:first-child {  margin:0 20px }
#nyse-tse span:first-child+span {  margin:0 0 0 20px; width:40px; font-size:42px; line-height:80px; font-weight:200 }
#nyse-tse span:first-child+span+span { margin:0; width:120px; text-align:right }

#staffs span:first-child { display:block; font-size:120px; height:128px; line-height:100px; padding:0; margin:0; text-align:center}


#umc-capital-overview p#map { display:block; clear:both; width:980px; border:none; margin:70px auto 0 auto; background:url(../images/about/map.png) no-repeat left top; position:relative; height:488px;}
.pin { display:block; width:38px; height:56px; overflow:hidden;}
.pin img { display:block; width:100%; height:auto}
.spot{ display:block; overflow:hidden; width: 65px; height: 65px; background-image:url(../images/about/sparkle-star.png); text-indent:-9999px;  position:absolute;
    
    -webkit-animation: play 2s steps(80) infinite;
       -moz-animation: play 2s steps(80) infinite;
        -ms-animation: play 2s steps(80) infinite;
         -o-animation: play 2s steps(80) infinite;
            animation: play 2s steps(80) infinite;
}
#spot-usa { left:60px; top:120px; }
#spot-cn{ left:760px; top:115px}
#spot-tw { left:790px; top:170px}

#pin-usa { left:75px; top:110px}
#pin-cn { left:780px; top:111px}
#pin-tw { left:810px; top:150px}

#benchmark { background-color:#095ABF; width:100%; overflow:hidden}
#infinity { width:520; height:380px; margin:0 auto; display:block; opacity:1}
#benchmark h2 { display:block; width:980px; text-align:center; margin:50px auto}
#benchmark ul { display:block; list-style:none; width:980px; margin:0 auto; padding-bottom:50px; overflow:hidden}
#benchmark ul li { display:block; list-style:none; width:160px; float:left; margin:0 0 0 113px}
#benchmark ul li:first-child { width:980px; height:30px; line-height:30px; font-size:21px; text-align:center;margin:0 0 30px 0; border-bottom:1px solid rgba(255,255,255,0.5)}
#benchmark ul li:first-child h3 { display:block; width:150px; margin:15px auto 0 auto; background-color:#095ABF;}
#benchmark ul li:first-child+li { margin:0}
#benchmark ul li span { display:block; list-style:none; width:160px; float:left;font-size:21px; text-align:center}
#benchmark ul li span:first-child { font-size:100px; height:130px; }
#us-only { display:none; background-color:#0099FF; width:100%; overflow:hidden; padding:50px 0 0 0}
#benchmark #us-only ul li:first-child h3 { display:block; width:150px; margin:15px auto 0 auto; background-color:#0099FF;}



#team { width:100%; height:2684px; overflow:hidden; background:url(../images/99_demo/team.jpg) no-repeat center top}
#ceo article { width:460px; overflow:hidden; position:absolute; left:50%; top:30%; margin:0 0 0 20px}
#ceo article h2 { font-size:46px; line-height:64px; font-weight:100; display:none }
#ceo article p {font-size:15px; line-height:24px; display:none}
#team-how-we-partner { width:100%; float:left; padding:30px 0 0 0}
#team-how-we-partner span { display:block; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold }
#team-how-we-partner span a { color:#000000; text-decoration:none}
#team-how-we-partner span a:hover { color:#0058A6}
#the-team { width:100%; overflow:hidden; float:left; background-color:#CCC}
#the-team a { display:block; width:16.66%; height:450px; overflow:hidden; float:left; margin:0; padding:0; position:relative; cursor:pointer}
#the-team a nth-child(6n) { width:16.7%}
#the-team a ul { display:block; list-style:none; margin:0; padding:0; width:100%; height:100%; z-index:1000; background:url(../images/ul-mask.png) repeat-x left bottom; opacity:0;transition: opacity 0.2s;
     -moz-transition: opacity 0.2s;
     -webkit-transition: opacity 0.2s;
     -ms-transition: opacity 0.2s;
     -o-webkit-transition: opacity 0.2s;}
#the-team a:hover ul { opacity:1;}
#the-team a ul li { display:block; list-style:none; margin:0; padding:0; width:100%; text-align:center; float:left; font-size:26px; line-height:32px; color:#FFF }
#the-team a ul li:first-child { font-family:Georgia, "Times New Roman", Times, serif; font-size:15px; font-style:italic; opacity:0.5; line-height:21px; margin:350px 0 5px 0;}
#the-team a .team-mask { width:100%; height:100%; position:absolute; background:url(../images/bk-35.png) repeat; left:0; top:0; opacity:1; z-index:200;  transition: opacity 0.25s;
     -moz-transition: opacity 0.25s;
     -webkit-transition: opacity 0.25s;
     -ms-transition: opacity 0.25s;
     -o-webkit-transition: opacity 0.25s;}
#the-team a:hover .team-mask { opacity:0} 
/*
#the-team a .normal { width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0; z-index:30; overflow:hidden; opacity:1; transition: opacity 0.25s;
     -moz-transition: opacity 0.25s;
     -webkit-transition: opacity 0.25s;
     -ms-transition: opacity 0.25s;
     -o-webkit-transition: opacity 0.25s
}

#the-team a .smile { width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0; z-index:20; overflow:hidden }
*/
#the-team a .normal  { display:block; width:100%; height:450px; position:absolute; left:0; top:0; z-index:30; overflow:hidden; opacity:1; transition: opacity 0.25s;
     -moz-transition: opacity 0.25s;
     -webkit-transition: opacity 0.25s;
     -ms-transition: opacity 0.25s;
     -o-webkit-transition: opacity 0.25s}
#the-team a:hover .normal  { opacity:0;}
#detail { width:100%; float:left; overflow:hidden;} 

#detail article { width:980px; margin:40px auto; min-height:85px; position:relative; overflow:hidden;}
#detail article span { display:block; width:200px; float:left; font-family:Georgia, "Times New Roman", Times, serif; font-size:15px; font-style:italic; position:absolute; left:0; top:0; overflow:hidden; color:#095ABF}
#detail article span.area { top:55px; color:#999999}
#detail article h3 { display:block; width:200px; font-size:26px; line-height:30px; position:absolute; left:0; top:20px;overflow:hidden}
#detail article p { display:block; width:720px; margin:0 0 0 260px; float:right; line-height:21px; font-family:Helvetica, Arial,  sans-serif; font-weight:light; font-size:15px; color:#333333}
#detail article span.email { display:block; width:100%; position:static}



#contact-wrap { background:url(../images/contact-bg.jpg) no-repeat center top #124886; overflow:hidden;}
#info { width:980px; margin:0 auto; padding:160px 0 0 0; overflow:hidden;}
#intro { color:#72A4D1; width:490px; margin:250px auto 0 auto; font-size:18px; padding:0 0 0 490px; line-height:24px; overflow:hidden}
#successful { color:#72A4D1; width:720px; margin:400px auto 100px auto; font-size:24px; padding:0; line-height:24px; overflow:hidden; text-align:center}
.successful-button { margin:10px auto 100px auto; width:480px; height:150px;  }
.successful-button span { display:block; float:left; width:230px; font-size:18px; line-height:40px; height:42px; text-align:center; margin:0 0 0 20px; padding:0 }
.successful-button span:first-child { margin:0}
.successful-button span a { display:block; width:100%; height:40px; color:#3C7BB5;  border:1px solid #3C7BB5; transition: background-color 0.3s, color 0.3s;
     -moz-transition: background-color 0.3s, color 0.3s;
     -webkit-transition: background-color 0.3s, color 0.3s;
     -ms-transition: background-color 0.3s, color 0.3s;
     -o-webkit-transition: background-color 0.3s, color 0.3s; }
.successful-button span a:hover { background-color:#3C7BB5; color:#124886}
.successful-button span:first-child {}
.successful-button span:first-child a { color:#72A4D1; border:1px solid #72A4D1;}
.successful-button span:first-child a:hover { background-color:#72A4D1; color:#124886}




#info ul { display:block; width:280px; float:left; color:#FFFFFF; margin:0 0 0 70px; overflow:hidden}
#info ul:first-child { margin:0}
#info ul li { line-height:18px; font-size:14px;}
#info ul li:first-child { font-family:'Raleway', Helvetica, Arial, sans-serif; font-weight:300; font-size:18px; opacity:1; color:#8DB6DA; border-bottom:1px solid #999; line-height:30px; padding:0} 
#info ul li:first-child + li + li { font-size:18px; color:#FFF; padding:10px 0}
#info ul li:first-child + li + li + li { font-style:italic}
#info ul li:first-child + li { font-family:Helvetica, Arial, sans-serif; font-size:16px; padding:10px 0 0 0; color:#CCC; line-height:21px}


#form { margin:100px auto 0 auto;  width:500px; }
#form ul { display:block; margin:0; padding:0; list-style:none; width:100%; overflow:hidden}
#form ul li { display:block; margin:0 0 15px 0; padding:0; list-style:none; width:100%; overflow:hidden; float:left}
#form ul li span { display:block; float:left; width:100%; line-height:30px; color:#82A3C4; font-weight:300; font-size:14px;}
#form ul li span input { display:block; padding:0 10px; width:480px; background-color:#5986B0; color:#162F49; line-height:35px; height:35px; outline:none; border:none; font-size:16px; transition: background-color 0.3s;
     -moz-transition: background-color 0.3s;
     -webkit-transition: background-color 0.3s;
     -ms-transition: background-color 0.3s;
     -o-webkit-transition: background-color 0.3s; }
#form ul li span input:focus { background-color:#A9C6E2; color:#000000}
#form ul li.code span input { width:120px; float:left; display:block;}
#form ul li.code span img { display:block; float:left; height:35px; width:auto; margin:0; padding:0;}

#form textarea { display:block; padding:10px; width:480px; background-color:#5986B0; color:#162F49; line-height:21px; height:110px; outline:none; border:none; font-size:16px; transition: background-color 0.3s;
     -moz-transition: background-color 0.3s;
     -webkit-transition: background-color 0.3s;
     -ms-transition: background-color 0.3s;
     -o-webkit-transition: background-color 0.3s; }
#form textarea:focus { background-color:#A9C6E2; color:#000000}
#form ul li.remark { color:#FFF; font-size:14px; font-family:Georgia, "Times New Roman", Times, serif}
#form ul li span strong { font-size:16px; line-height:35px; font-family:Arial, Helvetica, sans-serif;  margin-left:5px; font-weight:lighter }
#form ul li.button { margin:10px 0 100px 0  }
#form ul li.button span { display:block; float:left; width:230px; font-size:18px; line-height:40px; height:42px; text-align:center; margin:0 0 0 20px; padding:0 }
#form ul li.button span:first-child { margin:0}
#form ul li.button span a { display:block; width:100%; height:40px; color:#3C7BB5;  border:1px solid #3C7BB5; transition: background-color 0.3s, color 0.3s;
     -moz-transition: background-color 0.3s, color 0.3s;
     -webkit-transition: background-color 0.3s, color 0.3s;
     -ms-transition: background-color 0.3s, color 0.3s;
     -o-webkit-transition: background-color 0.3s, color 0.3s; }
#form ul li.button span a:hover { background-color:#3C7BB5; color:#124886}
#form ul li.button span:first-child {}
#form ul li.button span:first-child a { color:#72A4D1; border:1px solid #72A4D1;}
#form ul li.button span:first-child a:hover { background-color:#72A4D1; color:#124886}
#form ul li span select { display:block; background:none; width:500px; height:35px; line-height:35px; background-color:#5986B0; color:#162F49; border:none; outline:none }
#form ul li span select option { background:#FFF; color:#000000}
#form ul li span select:focus { background-color:#A9C6E2; color:#000000}


/*======================== FOOTER =======================*/

footer { width:100%; background:#333; height:300px; overflow:hidden; float:left}
footer img { margin:0 auto; display:block; width:980px; height:auto}
#footer { width:980px; margin:0 auto; overflow:hidden}
#footer ul { display:block; list-style:none; float:left; padding:30px 0 0 0; width:300px}
#footer ul li { display:block; list-style:none; float:left; padding:0; width:100%; color:#4689CD; font-size:15px; line-height:26px;font-family:Helvetica,Arial,sans-serif }
#footer ul li a { color:#4689CD; text-decoration:none}
#footer ul li a:hover { color:#93C0E6}
#footer ul li.title { font-size:18px; line-height:24px; color:#fff; font-weight:300; margin:0 0 10px 0;font-family:'Raleway', Helvetica, Arial, sans-serif;}
#footer ul li.title a { color:#fff;}
#footer ul:first-child + ul { width:360px;}
#footer ul:first-child + ul+ ul { width:210px;}
#footer ul:first-child + ul+ ul+ ul { width:110px;}
#copyright { width:980px; margin:20px auto 0 auto; color:#B7B7B7; font-size:12px; line-height:30px; padding:5px 0 0 0; background:url(../images/footer-line.png) no-repeat left top; font-family:Helvetica,Arial,sans-serif;}
#copyright a { color:#B7B7B7}
#copyright span:first-child { float:left}
#copyright span:first-child+span { float:left; margin:0 0 0 30px; color:#444}
#copyright span:first-child+span a { margin:0 20px; color:#999999}
#copyright span:first-child+span a:hover { color:#FFFFFF}
#copyright span:first-child+span a.current { color:#FFFFFF} 
#copyright span { float:right}



@media screen and (min-height: 900px) and (max-height:1000px){
	.swipe-wrap div h2 { top:38% }
	#center-stage-dna { top:90%;}
}

@media screen and (min-height: 640px) and (max-height:900px){ 
	.swipe-wrap div h2 { top:37% }
	#our-dna article #animate-1 { margin-top:170px;}
	#our-dna article#dna-intro h2 { top:44%}
	#our-dna article p { font-size:14px; line-height:21px;font-weight:normal}
	#our-dna article h2 {}
	#the-team a { height:360px;}
	#the-team a .normal  { height:360px;}
	#the-team a ul li { font-size:22px; line-height:28px; color:#FFF }
	#the-team a ul li:first-child { font-size:13px; line-height:18px; margin:270px 0 5px 0;}
	#our-value article h2 { margin:180px  0 0 -550px;}
	#center-stage-dna { top:90%;}

}
@media screen and (min-height: 480px) and (max-height:640px){ 
	.swipe-wrap div h2 { top:37% } 
	.swipe-wrap div p { top:48%;}
	#center-stage-dna { top:90%;}
}

@media screen and (max-height:480px){ 
	.swipe-wrap div h2 { top:37%; font-size:36px } 
	.swipe-wrap div p { top:50%; font-size:14px;}
	#center-stage-dna { top:90%;}
}

@media screen and (min-width: 1160px) and (max-width: 1450px) {

	#the-team a { width:20%;}

}

@media screen and (max-width: 1159px) {
	#the-team a { width:25%;}

}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #header-wrap h1 a  {
	  background-image: url('../images/umc-capital@2x.png');
	  background-size: 145px 100px;
  }
  #remark-1  {
	  background-image: url('../images/dna/remark-chart@2x.png');
	  background-size: 181px 81px;
  }
  #remark-bottom span:first-child {
	  background-image: url('../images/dna/line@2x.png');
	  background-size: 41px 40px;
  }
  #remark-bottom span:first-child+span {
	  background-image: url('../images/dna/line@2x.png');
	  background-size: 41px 40px;
  }
  
  #remark-bottom span:first-child+span+span {
	  background-image: url('../images/dna/arrow-h@2x.png');
	  background-size: 16px 31px;
  }
  
  #growing-line {
	  background-image: url('../images/dna/chart@2x.png');
	  background-size: 800px 360px;
  }

}



/*搜索*/
 .culture_menudiv{ position:absolute;right:0px;  background:url(../images/1_90.png) no-repeat; width:179px; height:42px;}
 .culture_menudiv .p1{ padding-left:14px; width:122px;height:42px;margin-top:-19px;position:absolute;}
 .culture_menudiv .p1 .text{ background:none; border:0px; height:42px; line-height:42px; font-size:14px; color:#004694; width:100%;}
 .culture_menudiv .p2{ width:24px; height:24px; margin-top:-10px; margin-right:11px;float:right}