body{background:url('/image/bg.jpg') #b4b7bf no-repeat center bottom;background-size:cover;background-attachment:fixed;overflow-x:hidden}

#page1{position:relative;margin:200px 0 0 50px;z-index:10}
#page1 .box{width:500px;margin-bottom:-60px;white-space:nowrap}
#page1 .box .dd{width:500px;height:202px;background:url('/image/dd.png');background-size:100% 100%}
#page1 .box .boxx{position:relative;background:#222;margin-top:-30px;color:#fff;padding:65px 0 30px 0}
#page1 .box .boxx .logo{width:500px;height:35px;background:url('/image/logo.png');background-size:100% 100%;position:absolute;top:30px;right:0}
#page1 .box .boxx h3{color:#0096e0;padding:40px;font-size:30px;line-height:1.2;font-weight:normal}
#page1 .box .boxx p{font-size:14px;line-height:1.6;padding:40px;margin-top:-70px}
#page1 .box .boxx u{text-decoration:none;border-bottom:1px solid #0096e0}
#page1 .box .boxx small{color:#777}
#page1 .box .boxx a{color:#fff;text-decoration:none}

#page2{position:relative;background:#fff;padding:100px 0}

#page3{position:relative;background:#fff;padding:100px 0}
#page3 h1{color:#0096e0;margin:25px 60px;font-size:40px;line-height:1.2;font-weight:normal}
#page3 p{margin:-10px 65px 30px 65px}
#page3 p.description{color:#999;line-height:1.5}
#page3 .do{color:#0096e0;margin:10px 15px}

#page3 .dowhat{margin:0 50px 30px 50px}

#page3 ul{list-style:none}
#page3 ul li{position:relative;line-height:1;padding-bottom:50px;overflow:auto;margin-left:-10px}
#page3 ul li .thumbnails{margin:0 0 0 65px;padding:10px 10px 5px 0;border-bottom:1px solid #ddd;white-space:nowrap;overflow:auto;-webkit-overflow-scrolling:touch}
#page3 ul li .thumbnails .thumbnail{width:200px;height:200px;background-size:cover;border:1px solid #ddd;background-position:center center;background-color:#eee;display:inline-block;margin:5px}
#page3 ul li .content{padding:0 60px;font-size:16px}
#page3 ul li .content h4{position:relative;font-weight:bold;font-size:16px;padding:15px 0 20px 10px;font-weight:normal;color:#999;line-height:30px}
#page3 ul li .content h4 strong{margin-right:5px;color:#000;font-size:20px}
#page3 ul li .content h4 span{font-weight:normal;padding:3px 10px;background:#0096e0;color:#fff;font-size:16px}
#page3 ul li .content h4 span.mosaic{background:url('/image/mosaic.jpg') no-repeat center center;background-size:cover;width:50px;opacity:0.4;display:inline-block;height:20px;position:relative;top:5px}
#page3 ul li .content h4 span.date{background:transparent;color:#fff;margin:0 5px 3px 0;background:#ddd;padding:3px 10px}
#page3 ul li .content h4 span.project{background:#222}
#page3 ul li .content h4 span.school{background:#999}
#page3 .date{padding:5px 11px 12px 6px;color:#bbb;margin:0 15px 10px 10px;text-align:right}
#page3 .product{padding:0 9px;border-left:2px solid #ddd;margin-left:10px}
#page3 .product .develop{display:inline-block;font-size:14px;background:#0773a9;color:#fff;padding:5px 10px;margin:3px 1px;border-radius:100px}
#page3 .product .design{display:inline-block;font-size:14px;background:#3da0d1;color:#fff;padding:5px 10px;margin:3px 1px;border-radius:100px}
#page3 .role{padding:0 9px;border-left:2px solid #ddd;margin-left:10px}
#page3 .role .develop{display:inline-block;font-size:14px;background:#999;color:#fff;padding:5px 10px;border-radius:100px;margin:3px 1px}
#page3 .role .design{display:inline-block;font-size:14px;background:#ccc;color:#fff;padding:5px 10px;border-radius:100px;margin:3px 1px}
#page3 .technology{padding:5px 17px 5px 17px;color:#bbb;letter-spacing:1px;line-height:1.5;font-size:14px;border-left:2px solid #ddd;margin-left:10px}

#page3 .totop{font-size:14px;text-align:center;color:#bbb;width:100px;padding-top:15px;margin:0 auto;text-decoration:none;display:block;margin-top:30px}

@media only screen and (max-height:1100px){
	body{background-position:center center}
}

@media only screen and (max-width:600px){
	#page1{margin:200px 0 0 0}
	#page1 .box{width:400px}
	#page1 .box .dd{width:400px;height:162px}
	#page1 .box .boxx{margin-top:-25px;padding-top:58px}
	#page1 .box .boxx .logo{width:400px;height:28px}
	
	#page3 .dowhat{margin:0 30px 30px 30px}
	#page3 h1{margin:25px 40px}
	#page3 p{margin-left:40px}
	#page3 ul li{margin-left:0}
	#page3 ul li .content{padding:0 30px}
	#page3 ul li .thumbnails{margin:0 0 0 40px}
}

@media only screen and (max-width:400px){
	body{background-size:100% auto;background-position:center -200px}
	
	#page1 .box{width:100%;overflow:hidden}
	#page1 .box .boxx h3{padding:40px 35px}
	#page1 .box .boxx p{padding:40px 35px}
}