@charset "UTF-8";
/* CSS Document */
@font-face { font-family: verdana;src: url(ttf/Verdana%20Italic.ttf) format("opentype");}
@font-face { font-family: raleway;src:url(ttf/Raleway-Regular.otf) format("opentype");}
@font-face { font-family: ptn;src:url(ttf/PTN57F.ttf) format("opentype");}

body {}
div#home,div#aboutus,div#service,div#portfolio,div#contactus{ width:100%; clear:both;position:relative;}
div.content { display:block; }
div.content > img {width:100%; height:auto;}
div.content > div.container { position: absolute; top: 0; width: 100%;}
/*==============================================*/
/*                    右上選單                   */
/*==============================================*/
div#logo {position: fixed;left: 1%;top: 2%;z-index: 1000;color: #FFF;}
div#rightnav{ width:110px; position: fixed;right: 0;top: 1%;z-index: 1000;color: #FFF;padding-right: 30px;}
div#rightnav ul{ padding-top: 18px;}
div#rightnav ul li { width:100%; text-align:right;}
div#rightnav ul li a { font-family:raleway; font-size:13px; color:inherit; width: 100%;height: 30px; padding-right: 30px; display: block; background:url(img/btn.png) -9px -1px no-repeat; cursor:pointer;}
/*==============================================*/
/*                    首頁頁面                   */
/*==============================================*/
div.content > div.container > div.con { margin: 10% auto; width:500px; border:3px #fff solid; color:#fff; text-align:center; padding: 30px 0 50px 0;}
div.content > div.container > div.con > h1 { font-family:verdana; font-size:42px; }
div.content > div.container > div.con > h2 { font-size:20px; font-style:italic; }
div.content > div.container > div.con > div { font-family:raleway; font-size:12px; text-align:left; width: 90%; margin: 20px auto;}
/*==============================================*/
/*                    關於我們                   */
/*==============================================*/
div.content > div.container > div.con-aboutus {margin: 50px auto; color:#fff; text-align:center; }
div.content > div.container > div.con-aboutus > h1 { font-family:ptn; font-size:33px; }
div.content > div.container > div.con-aboutus > h2 { font-size:12px;margin-top: -15px;}
div.content > div.container > div.con-aboutus > h3 { font-size:18px; padding-top:50px;}
div.content > div.container > div.con-aboutus > div { line-height:30px; padding-top:30px;}
/*==============================================*/
/*                     服務                     */
/*==============================================*/
div.content > div.container > div.con-service { margin: 50px auto; color:#fff; text-align:center;}
div.content > div.container > div.con-service > h1 { font-family:ptn; font-size:33px; padding-top: 15%; }
div.content > div.container > div.con-service > h2 { font-size:12px;margin-top: -15px;}
div.content > div.container > div.con-service > div {}
/*==============================================*/
/*                    作品集                     */
/*==============================================*/
div.content > div.container > div.con-portfolio  { margin: 50px auto; color:#fff; text-align:center;}
div.content > div.container > div.con-portfolio > h1 { font-family:ptn; font-size:33px; }
div.content > div.container > div.con-portfolio> h2 { font-size:12px;margin-top: -15px;}
div.content > div.container > div.con-portfolio > div {}
/*==============================================*/
/*                   聯絡我們                    */
/*==============================================*/
div.content > div.container > div.con-contact  { margin: 50px auto; color:#fff; text-align:center;}
div.content > div.container > div.con-contact > h1 { font-family:ptn; font-size:33px; padding-top:50px;} 
div.content > div.container > div.con-contact > h2 { font-size:12px;margin-top: -15px; padding-bottom:35px;}
div.content > div.container > div.con-contact > div { display: block;width: 50%;margin: 0 auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 15px;padding: 65px 85px;text-align:left;}
div.content > div.container > div.con-contact > div > div.table { width:100%; border-top:1px solid #fff; line-height:50px;}
div.content > div.container > div.con-contact > div > div.table input { border:1px #fff solid; line-height:30px}
div.content > div.container > div.con-contact > div > div.table textarea { width:50%; border:1px #fff solid; height:150px; margin-top:10px; margin-bottom: 10px;vertical-align: middle; resize:none;}
div.content > div.container > div.con-contact > div > div.table span { display:inline-block; color:#000; width:120px;}
div.content > div.container > div.con-contact > div > div.table span i { font-style:normal;}
div.content > div.container > div.con-contact > div > div.table1 { text-align:center; }
div.content > div.container > div.con-contact > div > div.table1 > input { padding:15px 45px; background:#172b51; border:none; color:#fff; margin-top:10px; margin-left:10px; cursor:pointer;}
div.content > div.container > div.con-contact > div > div.table1 > input:hover{ background:#000;} 
/*==============================================*/
/*                   footer                     */
/*==============================================*/
div#footer > div.content { height:120px; background:url(img/bg-footer.jpg);text-align: center;}
div#footer > div.content > div { display:inline-block; }
div#footer > div.content > div > span { font-size:20px;}
div#footer > div.content > div > p { font-size:15px;}
div#footer > div.content > div.addrs > p { font-size:12px; line-height:18px;}

@media (max-width: 1280px){
	div#service > div.content,div#portfolio > div.content,div#contactus > div.content { overflow-x: hidden; }
	div#service > div.content > img { height:1173px; width:auto;}
	div#portfolio > div.content > img { height:1100px; width:auto;}
	div#contactus > div.content > img { height:1100px; width:auto;}
}
@media (min-width: 600px) and (max-width: 820px){
	div#home > div.content { overflow-x: hidden; }
	div#home > div.content > img { height: 550px; width:auto;}
	div#home > div.content > div.container > div.con { width:45%;margin: 134px auto;}
}
@media (min-width: 320px) and (max-width: 599px){
	div#rightnav { display:none;}
	div#home > div.content { overflow-x: hidden; }
	div#home > div.content > img { height: 400px; width:auto;}
	div#home > div.content > div.container > div.con { width: 80%;margin: 73px auto;}
	div.content > div.container > div.con > div{display: none;}
	div.content > div.container > div.con-contact > div {width: 85%;padding: 65px 22px;}
	
}