@charset "utf-8";

/*-----取消 Html 原有樣式-----------------------------------*/
body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;line-height:100%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
ol,ul{list-style:none;margin:0;padding:0;}
hr{margin:0px;}
img{max-width:100%;height:auto;}
div,p,span{line-height:inherit;}

/*-----基本-----------------------------------*/
html{overflow:-moz-scrollbars-vertical; overflow-y:scroll;z-index: 999;font-size:15px;}
/*body{font-family: palatino,Georgia,time roman,serif,"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#000;-webkit-text-size-adjust:none;background:#fff;}*/
body{font-family: 'Palatino Linotype',"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#000;-webkit-text-size-adjust:none;background:#fff;}
a,a:hover,a:focus{color:#000;text-decoration:none;}
html{overflow:hidden}
/*-----共用-----------------------------------*/
header{z-index:999;background:#fff;position:fixed;top:0;left:0;width:275px;height:100%;border-right:4px solid #000;overflow:auto;}
header .logo{width:172px;overflow:hidden;margin:70px auto;}
header .logo img{width:100%;}
header .navbar-header{width:100%;overflow:auto;}
header nav ul li{cursor:pointer;}
header nav ul li h2{height:40px;line-height:40px;text-align:center;font-size:14px;}
/*header nav ul li h2 a{font-size:14px;}*/
header nav ul li h2 span:hover{border-bottom:1px solid #000;}
#menu h2{font-family: 'Palatino Linotype';font-size: 14px;font-weight: bold !important;letter-spacing:2px; }
header nav ul li h2 span.on{border-bottom:1px solid #000;}
header nav ul li h2 a:hover{border-bottom:1px solid #000;}
header .info ul{text-align:center;}
header .info ul li{display:inline-block;margin:4px;}
header .info p{font-size:16px;text-align:center;margin-top:14px;margin-bottom:21px;}
.footer ul{text-align:center;}
.footer ul li{color:#1a1a1a;font-size:12px;/*height:20px;*/line-height:20px;}
.footer ul li:first-child{font-size:13px;}
.footer p{color:#1a1a1a;font-size:12px;text-align:center;margin:30px 0;}
.loadingPage{position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:1000;background:#fff;}
.loadingPage img{position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;}
.slogan{color:#b78042;font-size:32px;padding:45px 0;text-align:center;}
.content{font-size:18px;line-height:28px;text-align:center;padding-bottom:45px;}
.case{font-size:28px;padding-top:35px;padding-bottom:45px;}
.case span{display:inline-block;font-size:20px;float:right;padding:5px 15px 5px 0;}
.caseComment{color:#b78042;font-size:18px;line-height:24px;padding-bottom:45px;}
input:focus,
textarea:focus{outline-color:#b78042;}
/*-----home-----------------------------------*/
.flexslider{overflow:hidden;}
/*-----about-----------------------------------*/
.about .imgbg{background-repeat:no-repeat;background-size:cover;background-position:center center;}
.about .imgbg img{width:100%;/*margin:15px 0;*/}
.about table.table{margin-bottom:0;}
.about table.table tr td{border-top:0 none;padding:15px;vertical-align:middle;}
.about table.table tr td:nth-child(1){color:#b78042;font-size:18px;font-style: italic;}
.about table.table tr td:nth-child(2){font-size:14px;line-height:20px;}
.about .piece:last-child{margin-bottom:30px;}
/*-----projects-----------------------------------*/
.projects figure img{width:100%;}
.projects .piece{padding:0;border-right:1px solid #000;}
.projects .info{padding-left:25px;padding-right:15px;font-size:14px;line-height:20px;}
.projects  p.visit{font-size:17px;line-height:23px;padding-top:30px;padding-bottom:40px;}
.projects  p.visit span{display:inline-block;}
/*-----portfolio-----------------------------------*/
.award{padding-top:15px;text-align:right;}
.award img{display:inline-block;margin-left:20px;}
.portfolio  p.visit a:hover{color:#b78042;}
/*-----login-----------------------------------*/
.login .content{padding-top:50px;display:table;}
.login .piece{display:table-cell;vertical-align:middle;}
.login table.table{width:auto;max-width:310px;margin:0px auto;background:#eee;border-radius:5px;box-shadow:1px 1px 10px #ccc,-1px -1px 10px #ccc;}
.login table.table tr td{border-top:0 none;padding:10px 25px;text-align:left;font-size:14px;}
.login table.table tr:first-child td{padding-top:25px;}
.login table.table input{background:#e2e2e2;border:0 none;height:18px;line-height:18px;padding:0 10px;max-width:130px;}
.login table.table tr:last-child td{text-align:right;}
.login button{border:0 none;background:transparent;}
.login button:hover{color:#b78042;}
.login button span{border-bottom:1px solid #000;}
.login button:hover span{border-bottom:1px solid #b78042;}
/*-----contact-----------------------------------*/
.contact form{padding-top:55px;padding-left:15px;text-align:left;}
.contact .form-group{display:inline-block;margin-bottom:30px;}
.contact .content p.input{display:inline-block;float:left;width:150px;}
.contact input{height:36px;line-height:36px;padding:0 10px;border:0 none;background:#dedede;margin-right:30px;width:160px;}
.contact .content p{padding-bottom:10px;}
.contact .content textarea{resize:none;border:0 none;background:#dedede;width:100%;max-width:655px;height:105px;padding:10px;}
.contact .button{max-width:650px;text-align:right;}
.contact button{border:0 none;background:transparent;margin:5px 0;font-size:14px;}
.contact button:hover{color:#b78042}
.contact button span{border-bottom:1px solid #000;}
.contact button:hover span{border-bottom:1px solid #b78042;}
.contact ul{padding:20px 0;text-align:left;padding-left:15px;}
.contact ul li{font-size:14px;line-height:20px;padding-right:30px;display:inline-block;}
#map{height:400px;}


.newsList li{float:left;width:100%;margin-bottom:20px;padding-left:20px;text-align:left;font-weight:bold;}
.newsList span{float:left;color:#b78042;font-style: italic;font-size:15px;}
.newsList p{float:left;text-align:left;margin-left:20px;font-size:15px;width:400px;}

/*=====RWD===================================*/
/*768以下（480~768）*/
@media (max-width:767px){
header{position:fixed;height:auto;width:100%;border-right:0 none;}
#home{padding-top:88px;}
header .logo{width:150px;margin:15px auto;}
header button{position:fixed;top:0;left:0;padding:0;border:0 none;margin:0;}
/*button*/
#mobileButton{box-sizing:border-box;display:block;width:70px;height:40px;position:fixed;top:20px;left:10px;z-index:999;}
#mobileButton:before,
#mobileButton:after,
#mobileButton span{background:#000;content:'';display:block;width:30px;height:3px;position:absolute;left:20px;}
#mobileButton:before{top:10px;}
#mobileButton span{top:20px;}
#mobileButton:after{top:30px;}
/*animation*/
#mobileButton:before,
#mobileButton:after,
#mobileButton span{-webkit-transition:none 0.5s ease 0.5s;transition:none 0.5s ease 0.5s;-webkit-transition-property:-webkit-transform, top, bottom, left, opacity;transition-property:transform, top, bottom, left, opacity;}
.moblieOpen #mobileButton:before,
.moblieOpen #mobileButton:after{top:20px;}
.moblieOpen #mobileButton span{left:-50px;opacity:0;filter:alpha(opacity=0);}
.moblieOpen #mobileButton:before{-webkit-transform:rotate( 45deg );-ms-transform:rotate( 45deg );transform:rotate( 45deg );}
.moblieOpen #mobileButton:after{-webkit-transform:rotate( -45deg );-ms-transform:rotate( -45deg );transform:rotate( -45deg );}
header .navbar-header{width:auto;text-align:center;}
header.header nav ul li{height:60px;line-height:60px;}
header .info{position:fixed;top:10px;right:15px;margin-top:0;}
header .info p{margin-top:10px;margin-bottom:0px;font-size:12px;}
.footer{background:#fff;width:100%;padding:15px;border-top:1px solid #000;}
.footer p{margin:0;margin-top:10px;}
.loadingPage img{width:40px;height:40px;margin-left:-20px;margin-top:-20px;}
.page{padding-bottom:30px;}
.slogan{font-size:28px;}
.about table.table tr td:nth-child(1){font-size:18px;padding:10px;}
.projects .piece{border-right:0 none;margin-bottom:30px;}
#map{height:300px;}
.login{padding-top:88px;}
}


/*480以下*/
@media (max-width:479px){
#mobileButton{top:15px;left:5px;}
header .logo{width:130px;}
header .info{right:5px;}
.slogan{font-size:22px;}
.content{font-size:16px;line-height:28px;}
#map{height:250px;}
.newsList p{margin-left:0px;}
}


/*768~979*/
@media (min-width:768px) and (max-width:979px){
header{width:230px;}
header .logo{width:150px;}
/*header .info{margin-top:380px;}*/
.page{padding-left:230px;}
.projects .piece{border-right:0 none;margin-bottom:30px;}
#map{height:350px;}
.aboutPadding{padding-top:40px;padding-bottom:0px;}
}


/*980以上（980~1279）*/
@media (min-width:980px){
/*header .info{margin-top:380px;}*/
.page{padding-left:275px;}
.about table.table tr td:nth-child(1){padding-left:20px;}
.projects .piece:nth-child(3n){border-right:1px solid #fff;}
.projects.portfolio .piece{border-right:1px solid #000;}
.portfolio .piece:nth-child(2n){border-right:1px solid #000;}
.login .content:first-child{border-right:1px solid #000;}
.login .content{padding-top:100px;padding-bottom:100px;}
.login .content .news{text-align:left;}

.aboutPadding{padding-top:40px;padding-bottom:0px;}

}

/*768~979*/
@media (min-width:981px) and (max-width:1400px){
.about .piece{margin:15px 0;}
.about .piece:last-child{border-right:0 none;margin-bottom:15px;border-left:1px solid #000;}
.case{font-size:32px;}
.caseComment{font-size:21px;line-height:34px;}
.award{float:right;}
.contact ul{padding-left:50px;}
header .logo{margin:40px auto;}

.contact form{padding-top:55px;padding-left:15px;text-align:left;}
.contact .form-group{display:inline-block;margin-bottom:30px;margin-right:20px;}
.contact .content p.input{font-size:14px;width:110px;}
.contact input{padding-left:10px;margin-right:0px;width:130px;}
.contact .content p{padding-bottom:10px;}
.xheight{width:70px !important;}

.aboutPadding{padding-top:40px;padding-bottom:30px;}


}



/*1280以上*/
@media (min-width:1280px){
/*header .info{margin-top:500px;}*/
.aboutPadding{padding-top:40px;padding-bottom:30px;}
}

@media (min-width:1680px){
header .logo{margin:70px auto;}
.contact form{padding-left:50px;}
.aboutPadding{padding-top:40px;padding-bottom:30px;}
}