@charset "utf-8";
/* CSS Document */
body, html{ margin:0 auto; padding:0; text-align:center; background-color:black }
.block { width:100%; height:100%; background-color:black; position:absolute; top:0; left:0; z-index:10000; margin:0 auto; padding:0; text-align:center; display:table; }
.btnBlock { border:solid white 0px; width:200px; height:60px; line-height:30px; color:white; font-family: 'Open Sans', sans-serif; font-size:14px; margin:0 auto; text-align:center; vertical-align:middle; display:table-cell}
h1 {font-family: 'Advent Pro', sans-serif; font-size:90px; line-height:90px; font-weight:200; text-transform: uppercase; margin:0; padding:0  }
.container { width:90%; margin:0 auto; padding:0; display:table; table-layout:fixed; height:100%; position:relative; overflow: hidden;}
.contentFix { width:90%; margin:0 auto; padding:0; text-align:right; border:red solid 0px; position:fixed; top:0; right:5%; z-index:1000; display:inline; height:auto}
.hd { margin:100px 0; padding:0; width:400px; text-align:left; margin-bottom:30px}
.s3 {width:20%}
.hpMenu { background:url(../images/menu.png) 0 0 no-repeat; width:22px; height:23px; position:absolute; left:10px; z-index:10; top:50px; background-size:cover; }
.tWhite { color:white }
.btn { border:solid white 2px; width:200px; height:40px; line-height:40px; color:white; font-family: 'Open Sans', sans-serif; font-size:18px; margin:50px 0 0 0;}
.logo { background:url(../images/copper.png) top left no-repeat; width:85px; height:85px; text-align:right; position:absolute; right:0; z-index:1000; top:20px; background-size:contain }
p { font-family: 'Open Sans', sans-serif; font-size:16px; color:white; margin:0; padding:0; text-align:left;}
.des {width:100%}
.bcg { background-position: top center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100%; width: 100%;}
#p1 .bcg { display:block; background:url(../images/projectTeamBg.jpg) top center no-repeat;}
#p2 .bcg { display:block; background:url(../images/projectGameBg.png) top center no-repeat;}
#p3 .bcg { display:block; background:url(../images/projectmotionBg.png) top center no-repeat;}
#p1 p { color: black; }
.content { max-width: 90%; display: table-cell; text-align: center; opacity:0.0; border:rgba(255,255,255,1.00) solid 0px;}
#preload { width: 1px; height: 1px; overflow: hidden; position: absolute; top: 0; left: 0; }
section {opacity: 0;}
.loaded section, .no-js section { opacity: 1; -webkit-transition: opacity 300ms ease-out; -moz-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out; }
.overlay { background-color:rgba(0,0,0,0.85); position:fixed; width:100%; height:100%; z-index:10; display:none}
.menu { width:50%; border:white solid 0px; position:absolute; top:100px; left:-800px; text-align:left}
.menu ul {list-style:none; display:inline-block; margin:0; padding:0}
.menu ul li { display:block; font-size:30px; font-family: 'Advent Pro', sans-serif; color:white; text-align:left; margin:0; padding:0; margin-bottom:20px; cursor: pointer}
.menu ul li:last-child {margin-bottom:0}
.menu ul li:hover{text-decoration: underline}
.ss { position:absolute; right:0; top:-40px; }
.ss ul { margin:0; padding:0; list-style:none}
.ss ul li { margin:0; padding:0; display:inline-block; width:31px; height:31px; margin-left:30px  }
.ss ul li.fb {background:url(../images/iconFb.png) top left no-repeat; background-size:cover}
.ss ul li.tw {background:url(../images/iconTw.png) top left no-repeat; background-size:cover}
.ss ul li.email {background:url(../images/iconEmail.png) top left no-repeat; background-size:cover}
.map { background:url(../images/map.png) top left no-repeat; width:353px; height:170px; position:relative; top:0; left:100px; background-size:cover }
.pin { background:url(../images/pin.png) top left no-repeat; position:absolute; top:50px; left:70px; width:63px; height:91px; z-index:10; background-size:cover}
.call { float: right}
.address { float:left; line-height:30px}
hr { background-color:rgba(255,255,255,0.30); border:none;height: 1px; }
a{ text-decoration: none }
.about-us { display: none; width:980px; margin: 0 auto;  margin-top:150px;}
.about-us p { font-size:32px; margin-bottom: 20px;font-family:'Advent Pro', sans-serif; }
.clientlist {  width:1200px;height:auto; margin: 0 auto; margin-top:150px;display: none; }
.clientlist ul { list-style: none }
.clientlist ul li { text-align: center; display:inline-block; width:200px;height:200px;border:0px solid red; opacity: .0; background-size: 100%; background-repeat: no-repeat; background-position: center center; }


.clientlist ul li:nth-child(1) { background-image: url(../images/logo-dickson-group.png) }
.clientlist ul li:nth-child(2) { background-image: url(../images/logo-longreachgroup.png) }
.clientlist ul li:nth-child(3) { background-image: url("../images/logo-ofresh.png") }
.clientlist ul li:nth-child(4) { background-image: url("../images/logo-watson-water.png") }
.clientlist ul li:nth-child(5) { background-image: url("../images/logo-wellington.png") }

.info { position:relative}

@media only screen and (min-width : 480px) and (max-width : 840px){
	/*desktop*/
	.menu { width:100%;}
h1 {font-size:40px; line-height:50px; font-weight:200;}
#p1 .bcg { display:block; background:url("../images/projectTeamBgm.jpg") top center no-repeat; background-size:cover;}
#p2 .bcg { display:block; background:url(../images/projectGameBgm.png) top center no-repeat; background-size:cover;}
#p3 .bcg { display:block; background:url(../images/projectmotionBgm.png) top center no-repeat; background-size:cover;}
	.clientlist ul li { width:50%}
	.clientlist {  margin-top:0px; width:100%}
    .about-us { display: none; width:90%; overflow-y: scroll; height: 70%}
    .about-us p { font-size:26px; margin-bottom: 20px;font-family:'Advent Pro', sans-serif; }
}
@media only screen and (max-width : 479px){
	/*desktop*/
.menu { width:100%;}
h1 {font-size:40px; line-height:50px; font-weight:200;}
#p1 .bcg { display:block; background:url(../images/projectTeamBgm.jpg) top center no-repeat; background-size:cover;}
#p2 .bcg { display:block; background:url(../images/projectGameBgm.png) top center no-repeat; background-size:cover;}
#p3 .bcg { display:block; background:url(../images/projectmotionBgm.png) top center no-repeat; background-size:cover;}
.clientlist ul li { width:100%; height:200px; background-size:60%!important }
	.clientlist {  margin-top:0px; width:100%}
    .about-us { display: none; width:90%; overflow-y: scroll; height: 70%}
    .about-us p { font-size:26px; margin-bottom: 20px;font-family:'Advent Pro', sans-serif; }
}
@media screen and (min-device-width : 321px) and (max-device-width : 768px) and (orientation : portrait){
	/*iphone6 p l, iphone6+ p l, iphone5 l, iphone4 l, ipad p, ipad min*/
.hd { width:45%; margin-top:70px; margin-bottom:5px}
.btnBlock { border:solid white 1px; width:100px; height:60px; line-height:30px; color:white; font-family: 'Open Sans', sans-serif; font-size:14px; margin:0 auto; text-align:center}
.s2 {width:75%}
.s3 {width:40%}
.des {width:70%}
a:link { text-decoration:none; color:white}	
h1 {font-family: 'Advent Pro', sans-serif; font-size:50px; line-height:60px; font-weight:200; text-transform: uppercase; margin:0; padding:0; opacity:1; z-index:100; position:relative; width:70%}
.btn { border:solid white 1px; width:100px; height:30px; line-height:30px; color:white; font-family: 'Open Sans', sans-serif; font-size:14px; background-color:rgba(0,0,0,0.3); margin:15px 0;}
.btnBlock { border:solid white 1px; width:100px; height:60px; line-height:30px; color:white; font-family: 'Open Sans', sans-serif; font-size:14px; margin:0 auto; text-align:center}
.menu { width:100%; border:red solid 0px; top:70px; }
.menu ul li { font-size:30px; margin-bottom:30px;}
.pin { top:0px; left:15px; width:42px; height:60px;}
.map { background:url(../images/mapm.png) top left no-repeat; width:300px; height:103px; position:relative; top:0; left:20px; background-size:cover }
.address { line-height:20px; width:50%}
.hpMenu { top:30px; left:0}
.logo { width:50px; height:50px; right:0}
.menu ul li { font-size:30px; margin-bottom:20px;}
.ss ul li { margin:0; padding:0; display:inline-block; width:25px; height:25px; margin-left:20px  }
.container { width:90%; margin:0 auto; padding:0; display:table; height:100%; position:relative;}
.content { width:50%; margin:0 auto; padding:0; text-align:center; border:red solid 0px; position:relative; display:table-cell;}
#p1 .bcg { display:block; background:url(../images/projectTeamBgm.jpg) top center no-repeat; background-size:cover;}
#p2 .bcg { display:block; background:url(../images/projectGameBgm.png) top center no-repeat; background-size:cover;}
#p3 .bcg { display:block; background:url(../images/projectmotionBgm.png) top center no-repeat; background-size:cover;}
p { font-family: 'Open Sans', sans-serif; font-size:14px; color:white}
	.clientlist ul li { width:100%; height:400px; background-size:60%!important }
    .about-us { display: none; width:90%; overflow-y: scroll; height: 70%}
    .about-us p { font-size:26px; margin-bottom: 20px;font-family:'Advent Pro', sans-serif; }
}

@media screen and (max-device-width : 320px) and (orientation : portrait){
	/*iphone4, iphone5 p*/
    .about-us { display: none; width:90%; overflow-y: scroll; height: 70%}
    .about-us p { font-size:26px; margin-bottom: 20px;font-family:'Advent Pro', sans-serif; }
a:link { text-decoration:none; color:white}	
.block { width:100%; height:100%; }
.hd { width:45%; margin-top:70px; margin-bottom:5px}
.s2 {width:70%}
.s3 {width:35%}
.des {width:70%}
h1 {font-family: 'Advent Pro', sans-serif; font-size:40px; line-height:50px; font-weight:200; text-transform: uppercase; margin:0; padding:0; opacity:1; z-index:100; position:relative; width:70%}
.btn { border:solid white 1px; width:100px; height:30px; line-height:30px; color:white; font-family: 'Open Sans', sans-serif; font-size:14px; background-color:rgba(0,0,0,0.3); margin:15px 0;}
.btnBlock { border:solid white 1px; width:100px; height:60px; line-height:30px; color:white; font-family: 'Open Sans', sans-serif; font-size:14px; margin:0 auto; text-align:center}
.menu { width:100%; border:red solid 0px; top:70px}
.pin { top:0px; left:15px; width:42px; height:60px;}
.map { background:url(../images/mapm.png) top left no-repeat; width:242px; height:83px; position:relative; top:0; left:20px; background-size:cover }
.address { line-height:20px; width:50%}
.hpMenu { top:30px; left:0}
.logo { width:50px; height:50px; right:0}
.menu ul li { font-size:25px; margin-bottom:15px;}
.ss { top:5px; }
.ss ul li { margin:0; padding:0; display:inline-block; width:25px; height:25px; margin-left:20px  }
.container { width:90%; margin:0 auto; padding:0; display:table; height:100%; position:relative;}
.content { width:50%; margin:0 auto; padding:0; text-align:center; border:red solid 0px; position:relative; display:table-cell;}
#p1 .bcg { display:block; background:url(../images/projectHellodogBgm.png) top center no-repeat; background-size:cover;}
#p2 .bcg { display:block; background:url(../images/projectGameBgm.png) top center no-repeat; background-size:cover;}
#p3 .bcg { display:block; background:url(../images/projectmotionBgm.png) top center no-repeat; background-size:cover;}
p { font-family: 'Open Sans', sans-serif; font-size:13px; color:white}
	.clientlist ul li { width:100%; height:400px; background-size:60%!important }
}