﻿@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldIt'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/fpTVHK8qsXbIeTHTrnQH6Nog-We9VNve39Jr4Vs_aDc.woff) format('woff');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff');
}
body {
	font-family: 'Source Sans Pro', sans-serif, 'Microsoft Sans Serif','Microsoft JhengHei UI';
	margin:0;
	padding:0;
    padding-top:72px;
}

img{border:0}
a,a:visited{text-decoration:none;}

#Container {
	width: 960px;
	margin: 0 auto;
	padding: 0;
}
#Header{height:68px;border-bottom:3px dashed #d4f3ff;position:fixed;top:0;width:960px;left:50%;margin-left:-480px;z-index:9999;background:#fff}

#Header h1{color:#bcbec0; font-weight:bold; font-style:italic;font-size:42px;margin:0;padding:0;padding-top:8px;padding-left:10px}
#Header h1 a:hover,#Header h1 a:visited{color:#bcbec0;}
#Header ul{margin:0;padding:0;list-style:none;position:absolute;right:0;top:21px;}
#Header li{list-style:none;float:right;padding:5px 18px;}
#Header li:first-child{padding:5px 10px}
	#Header li a, #Header li a:visited {
		display: block;
		color: #bcbec0;
		font-size: 18px;
		text-decoration: none;
	}
#Header li a:hover, #Header li a.Selected{color:#66d2ff;font-weight:bold;}

.Content{min-height:500px}

#Home{position:relative;height:570px}
#Home >ul {
	width: 960px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	position:absolute;
	bottom:10px;
}
#Home > ul >li{width:188px;list-style:none;position:relative;display:inline-block;cursor:pointer}
#Home li > div {
		margin:0 6px;
		margin-bottom:15px;
		height:190px;
		position:relative;
		background:#E6F8FF;
        -webkit-transition: height .7s ease;
       -moz-transition: height .7s ease;
       -ms-transition: height .7s ease;
       -o-transition: height .7s ease;
       transition: height .7s ease;
	}
#Home li .icon{width:60px;height:60px;display:block;position:absolute;top:30px;left:50%;margin-left:-30px;}
#Home li.Selected .icon{width:70px;height:80px;display:block;position:absolute;top:30px;left:50%;margin-left:-35px;}
#Home li:first-child > div{margin-left:0px}
#Home li:last-child > div{margin-right:0px}

#Home li .title{position:absolute;bottom:35px;text-align:center;display:block;width:100px;left:50%;margin-left:-50px;font-weight:bold;font-size:16px;color:#a6e5ff}
#Home li.Selected .title{position:absolute;bottom:120px;text-align:center;display:block;width:150px;left:50%;margin-left:-75px;font-weight:bold;font-size:28px;color:#fff}
#Home li ul {
		display: none;
		list-style:none;
		margin:0;padding:0;
		position:absolute;
		width:150px;
		height:90px;
		left:30px;
		bottom:20px;
	}
	#Home li ul > li{padding-left: 1em; text-indent: -1em;color:#fff}
	#Home li ul >li:before {
	content: "■ "; font-family:"Arial Black";
	color: #fff;
}
#Home li.Selected ul{display:block;}
#Home li.Selected div{
	position:absolute;bottom:0;
	width:180px;
	height:270px;
	background:#5CCFFF;
}

#Home li .android {
		background: url('../images/S-android.png');
}
#Home li.Selected .android {
		background: url('../images/L-android.png');
}

#Home li .apple {
		background: url('../images/S-apple.png');
}
#Home li.Selected .apple {
		background: url('../images/L-apple.png');
}

#Home li .web {
		background: url('../images/S-web.png');
}
#Home li.Selected .web {
		background: url('../images/L-web.png');
}

#Home li .win8 {
		background: url('../images/S-win8.png');
}
#Home li.Selected .win8 {
		background: url('../images/L-win8.png');
}

#Home li .design {
		background: url('../images/S-design.png');
}
#Home li.Selected .design {
		background: url('../images/L-design.png');
}

#Home h1{color:#5ccfff; font-weight:bold; font-style:italic;font-size:128px;margin:0;padding:0;padding-top:40px;display:block;text-align:right}
#Home h2{color:#e6e7e8; font-weight:bold; font-style:italic;font-size:36px;margin:0;padding:0;margin-top:-30px;display:block;text-align:right}

#Home{border-bottom:3px dashed #d4f3ff;}

#Products>h1{color:#5CCFFF; font-weight:bold; font-style:italic;font-size:95px;margin:0;padding:0;display:block;border-bottom:3px dashed #5ccfff;}


#Products>ul {
	width: 960px;
	list-style: none;
	margin: 0;
	padding: 20px 0 0 0;
}
#Products li {
	width:25%;
	list-style: none;
	margin: 0;
	margin-bottom:20px;
	padding: 0;
	float:left;
	position:relative;
}
#Products li img{
	width:215px;
	height:155px;
	margin:0 12.5px 5px 12.5px;
}
#Products li div{
	background:#5CCCFF;
	height:80px;
	padding-top:12px;
	width:215px;
	display:block;
	text-align:center;
	margin:0 12.5px;
}
#Products li>div:after{
	content:"";
	width: 0; 
	height: 0; 
	border-left: 15px solid #5CCCFF;
	border-right: 15px solid #5CCCFF;
	border-top: 15px solid #fff;
	position:absolute;
	top:164px;
	left:50%;
	margin-left:-20px;
}
#Products li div h3{font-weight:bold;color:#fff;font-size:28px;padding:0;margin:0}

#Products li div h3.small{font-weight:bold;color:#fff;font-size:23px;padding:0;margin:0}
#Products li div span{color:#fff;font-size:15px;padding:0 10px}
#Products li:last-child{clear:right}
#Products ul{clear:both;overflow:hidden;margin-bottom:10px;}

#Products{border-bottom:3px dashed #d4f3ff;}

#Technology>h1{color:#5CCFFF; font-weight:bold; font-style:italic;font-size:95px;margin:0;margin-bottom:40px;padding:0;display:block;border-bottom:3px dashed #5ccfff;}
#Technology{border-bottom:3px dashed #d4f3ff;}

#Solutions>h1{color:#5CCFFF; font-weight:bold; font-style:italic;font-size:95px;margin:0;padding:0;display:block;border-bottom:3px dashed #5ccfff;}
#Solutions{border-bottom:3px dashed #d4f3ff;}
#ListSolutions {
	width: 960px;
	list-style: none;
	margin: 0;
	padding: 40px 0 0 0;
    clear:both;overflow:hidden;margin-bottom:10px;
}
#ListSolutions li {
    width:33%;
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0;
	float:left;
	position:relative;
}

#ListSolutions li>div.pic{
	height:160px;
    background:#E3F5FF;
    display:block;
    text-align:center;
	margin:0 46px 10px 46px;
}
#ListSolutions li div.title{
	background:#5CCCFF;
	height:50px;
	padding-top:25px;
	display:block;
	text-align:center;
	margin:0 46px 10px 46px;
}
#ListSolutions li:first-child div.pic,#ListSolutions li:first-child div.title{margin-left:69px;margin-right:23px;}
#ListSolutions li:last-child div.pic,#ListSolutions li:last-child div.title{margin-right:69px;margin-left:23px;}
#ListSolutions li>div:after{
	content:"";
	width: 0; 
	height: 0; 
	border-left: 15px solid #5CCCFF;
	border-right: 15px solid #5CCCFF;
	border-top: 15px solid #fff;
	position:absolute;
	top:169px;
	left:50%;
	margin-left:-18px;
}
    #ListSolutions li:first-child > div:after {
        margin-left:10px;
    }
    #ListSolutions li:last-child > div:after {
        margin-left:-37px;
    }
#ListSolutions li div span{color:#fff;font-size:15px;font-weight:600}
#ListSolutions li:last-child div{margin-right:0}

#Solutions h2{color:#C9CBCC;border-bottom:3px dashed #5ccfff;font-style:italic;text-align:right;margin-bottom:20px;}
#Solutions .sublist{
    padding:0;
    margin:0 28px 20px 27px;
    display:block;
    overflow:hidden;
    width:905px;
    list-style:none;
}
#Solutions .sublist li{display:block;margin:0;padding:0;text-align:center;width:152px;color:#2CB9FF;font-weight:600;font-size:14px;float:left;}
#Solutions .sublist .plus{
    width:23px;height:30px;
}
#Solutions .sublist .equal{
    width:55px;height:30px;
}
#Solutions .sublist li:last-child{
    width:173px;
}

#Privacy>h1{color:#5CCFFF; font-weight:bold; font-style:italic;font-size:95px;margin:0;padding:0;display:block;border-bottom:3px dashed #5ccfff;}
#Privacy p, #Privacy h2{color:#808080;}

#ContactUs>h1{color:#5CCFFF; font-weight:bold; font-style:italic;font-size:95px;margin:0;padding:0;display:block;border-bottom:3px dashed #5ccfff;}
#ContactUs hr{clear:both;width:100%;border:0;height:0px;border-bottom:3px dashed #d4f3ff;}
#ContactUs #Map{float:left; width:640px;height:400px;margin:30px 0}
#ContactUs #Loc{float:right;width:300px;height:400px;margin:30px 0;padding:0;background:#A3E2FF;position:relative}
#ContactUs #Loc>a{background:#D6F1FF;color:#A3E2FF;font-size:20px;text-decoration:none;font-weight:bold;line-height:50px;display:inline-block;width:150px;height:50px;text-align:center}
#ContactUs #Loc > a:visited, #ContactUs #Loc a.tab:visited {color:#A3E2FF;}
#ContactUs #Loc .right{position:absolute;right:0;top:0}
#ContactUs #Loc .selected, #ContactUs #Loc a.selected:visited{background:#A3E2FF;font-size:30px;color:#fff;}
#ContactUs #Loc ul{padding:0;margin:10px;display:block;background:#5CCCFF;list-style:none;height:330px}
#ContactUs #Loc li{margin:0;padding:10px;padding-bottom:26px;display:block;padding-left:60px;position:relative;color:#fff}
#ContactUs #Loc li p{margin:0}
#ContactUs #Loc li a,#ContactUs #Loc li a:visited{color:#fff;}
#ContactUs #Loc li .icon{position:absolute;left:20px;top:10px;display:block;width:25px;height:25px;}
#ContactUs #Loc li .address{background-image:url(../images/icon-address.png);}
#ContactUs #Loc li .phone{background-image:url(../images/icon-phone.png);}
#ContactUs #Loc li .fax{background-image:url(../images/icon-fax.png);}
#ContactUs #Loc li .email{background-image:url(../images/icon-email.png);}
#ContactUs #Loc li .web{background-image:url(../images/icon-web.png);}
#ContactUs #Loc:after{clear:right}
#ContactUs form{margin:30px 20px;overflow:hidden}
#ContactUs form label{color:#66Cfff;display:inline-block;width:280px;text-transform:uppercase;height:40px;line-height:40px;vertical-align:top}
#ContactUs form input,#ContactUs form textarea{background:#D6F1FF;border:0;height:30px;line-height:30px;padding:0 10px;width:600px}
#ContactUs form textarea{height:180px}
#ContactUs button{height:50px;margin:20px;text-align:center;width:150px;line-height:50px;color:#fff;background:#5CCCFF;border:none;cursor:pointer;float:right}

#Design>h1{color:#5CCFFF; font-weight:bold; font-style:italic;font-size:95px;margin:0;padding:0;display:block;border-bottom:3px dashed #5ccfff;}
#Design{border-bottom:3px dashed #d4f3ff;}
#Design .DesignImages{height:480px;width:918px;margin:20px auto;border:1px solid #C9CBCC}
#Design .DesignImages img{width:918px;height:480px;position:absolute;-webkit-transition: visibility .7s ease;
       -moz-transition: visibility .7s ease;
       -ms-transition: visibility .7s ease;
       -o-transition: visibility .7s ease;
       transition: visibility .7s ease;}
#Design ul{width:960px;margin:0 auto;padding:0;list-style:none;overflow:hidden;margin-bottom:20px}
#Design li{padding:0;margin:0;width:25%;text-align:center;float:left;height:65px;}
#Design li div{cursor:pointer;height:30px;margin:0 20px;background:#DEF0FF;color:#9EDDFF;padding-top:35px;
               background-position:center 5px;background-repeat:no-repeat;background-size:30px;-webkit-transition: background .7s ease;
       -moz-transition: background .7s ease;
       -ms-transition: background .7s ease;
       -o-transition: background .7s ease;
       transition: background .7s ease;}
#Design li div.CI{background-image: url(../images/design-ci.png);}
#Design li div.Flyer{background-image: url(../images/design-flyer.png);}
#Design li div.Booklet{background-image: url(../images/design-booklet.png);}
#Design li div.UI{background-image: url(../images/design-ui.png);}
#Design li.Selected div {background-color:#2CB9FF;color:#fff;}
#Design li.Selected div.CI{background-image: url(../images/design-ci-white.png);}
#Design li.Selected div.Flyer{background-image: url(../images/design-flyer-white.png);}
#Design li.Selected div.Booklet{background-image: url(../images/design-booklet-white.png);}
#Design li.Selected div.UI{background-image: url(../images/design-ui-white.png);}
/*fix anchor*/
a#Solutions,a#Products,a#ContactUs,a#Design{position:relative;top:-71px;margin: 0;
  padding: 0;
  float: left;}