@charset "utf-8";
@font-face {  font-family: engraversGothic; src: url(../font/engraversgothicbt.ttf);}

html {width: 100%; height: 100%; overflow: hidden; line-height: 1.8em; font-size: 14px;}
body { width: 100%; height: 100%; margin: 0; min-height: 520px; position: relative; display: flex; align-items: center; overflow: hidden;}
img { border: 0; vertical-align: middle;}
a { text-decoration: none;}
h1, h2, h3, h4, h5, p { clear: both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */ 


/**---------------- padding and border no width ---------------------**/
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}


/**----所有連結漸變---**/
a {transition: all 0.3s ease 0s;}


/** 首頁 **/
.index-text-m { position: absolute;  width:365px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; }
.index-text-m img { height: auto; width: 100%; max-width:250px; margin:0 auto 20px auto; display: block;  }
.index-note { color: #ffffff; font-family:Microsoft JhengHei;}

.col-mid {
	display: -webkit-flex;
    display:flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center; 
}
.col-01 { -webkit-flex: 1;  flex: 1;  }
.index-enter { padding: 15px 0;}

.index-enter a { display: block; color: #C7C7C7; text-decoration: none; background: rgba(0,0,0,0.5); font-family: engraversGothic, Microsoft JhengHei; font-size: 16px; padding: 5px 15px; max-width: 150px; margin: 0 auto; color: #C7C7C7; border: 1px #5E5E5E solid; text-align: center;  transition: all 0.3s ease 0s; }
.index-enter a:hover { background: rgba(0,0,0,0.9); transition: all 0.3s ease 0s; color: #ffffff; border: 1px #ffffff solid; }

@keyframes fadeOut {
  from {  opacity: 0; }
  to { opacity: 1; }
}

body.index {   animation-duration: 3s;  animation-name: fadeOut;}
body {  animation-duration: 2s;  animation-name: fadeOut;}


/** 主框架 **/
.wallper {  width:100%; height: 100%; overflow: auto; padding:104px 0 55px 0;}
.wallper02 {  width:100%; height: 100%; overflow: auto; padding:60px 0 55px 0;}

.page-main {  max-width: 1000px; width: 90%; min-height: 400px; height: 100%; margin: 0 auto; padding:20px;  font-family:Microsoft JhengHei; position: relative; }
.main-title {  font-size: 44px; margin: 0; padding: 5px 0 20px 0px; text-align: center; font-family: engraversGothic, Microsoft JhengHei; letter-spacing: 2px; line-height: 1em;}

/** 內頁選單 **/
.in-head { position: fixed; top: 60px; padding: 10px 0 0 0; width: 100%; text-align: center; z-index: 999; background: rgba(255,255,255,0.9);}
.in-menu { font-family: engraversGothic, Microsoft JhengHei;}
.in-menu ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.in-menu ul li { display: inline-block; position: relative; height: 25px; min-width: 120px; overflow: hidden;  }
.in-menu ul li a { color: #000000; font-size: 16px; display:block; line-height: 25px; padding: 0 10px; text-decoration: none; position: absolute; top: 0; left: 0; width: 100%;}
.in-menu ul li:hover a, .in-menu ul li.active a { color: #8E8E8E; top: -25px;}
.in-menu ul li a span { display: block;}
.in-menu ul li a span.en { font-size: 16px;}
.in-menu ul li span.dot { background: #B7B7B7; display: block; width: 7px; height: 7px; position: absolute; top: 7px; left: -7px; transition: all 0.3s ease 0s;}
.in-menu ul li:hover span.dot, .in-menu ul li.active span.dot { left: 5px; transition: all 0.3s ease 0s;}


.pc-menu {  font-family: engraversGothic, Microsoft JhengHei; }
.pc-menu ul { list-style: none; margin: 0; padding: 20px 30px 0 0; text-align: right; } 
.pc-menu ul li { display: inline-block; min-width: 100px; text-align: center; height: 25px; overflow: hidden; position: relative; }
.pc-menu ul li a { color: #000000; text-align: center; display: block; position: absolute; top: 0; left: 0; width: 100%;}
.pc-menu ul li:hover a { top: -20px; color:#B7B7B7 ; }
.pc-menu ul li a span { display:block; font-size: 18px; line-height: 25px;}


@media screen and (max-width: 900px) {
	.in-menu { display: block}
	.pc-menu { display:none;}
	.in-menu ul li:hover a, .in-menu ul li.active a { top: -20px;}
}

/** 圖片動態 **/
.img-move img {  opacity: 0.2; -webkit-transition: opacity 0.4s linear; -moz-transition: opacity 0.4s linear; -o-transition: opacity 0.4s linear; transition: opacity 0.4s linear;}
.img-move:hover img {   opacity: 0.6;}



/** 聯絡我們 **/
.contact {  display: flex; padding: 20px 0 70px 0;}
.google-map { background: #CCCCCC; padding: 10px; margin-left: 20px;}
.cont-box { padding-bottom: 30px;color: #6C6C6C; line-height: 1.4em;}
.cont-box a { color: #6C6C6C;}
.contact-title { font-size: 16px; margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px #BFBFBF dashed;  color: #111111; font-weight: normal; }

.cart-btn {  padding:10px 0; text-align:center; margin-top:15px; }
.contact-body { padding:0;}
.btn-send { font-size:13px;} 
.form-box input, .form-box img { vertical-align:middle;}
a.btn-send { background: #373737; padding: 7px  20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px;}
a.btn-send:hover { background: #504b3d;}
a.btn-reset { background:#6c5418;  padding: 7px 20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px;}
a.btn-reset:hover { background:#58430f;}
a.btn-send-over { background: #834c04; padding: 7px  20px; text-align:center; font-size:13px; color:#fff; width:100px; margin:2px; }
a.btn-send-over:hover { background: #673c03;}

.opinion { margin-bottom:5px; }
.opinion-left01 { background: #131313; float:left; width:30%; border-right:5px #353535 solid; padding:5px 3%; font-size:14px; font-family:"微軟正黑體"; color:#ffffff; line-height:20px;}
				  
.opinion-right01 { float:left; width:7.5%; padding:0px 2%; font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; line-height:20px; border-left:0;}
				  
.input-main-style01 { float:left; width:55%; margin:0; padding:5px 3%; font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; line-height:20px;}
.input-main-style02 { background:#f0e7e7; float:left; width:70%; border: 0; margin:0; padding:5px 3%; font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; line-height:20px;}			
.input-main-style03 { background:#f0e7e7; float:left; width:93.3333%; margin:0; border: 0; padding:5px 3%; font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; line-height:20px; text-align:center; }						 
					 
.select-style { background: #8a6e0c; font-size:15px; color:#ffffff; line-height:20px; padding:5px 10px; border: 0; }
.input-style01 { background:#f0e7e7; border: 0; padding:5px 3%; line-height:20px; font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; width:100%; margin-bottom:5px; }

.order-numb { color:#FF0004;}
.question-btn { padding: 20px 0;}
.question-btn a { display: block; width: 200px;  margin: 20px 0; color: #C9C9C9; padding: 5px 15px; margin: 0 auto; border: 1px #C9C9C9 solid; text-align: center;}

.question-btn:hover a { color:#767676; border: 1px #767676 solid;}

/** 最新消息 **/
.news-bg { background: url(../images/banner001.jpg); background-size: cover;} 
.news {  padding: 20px 0 70px 0; }
.news ul { margin: 0; padding: 0; list-style: none;}
.news ul li { position: relative; width: 31.3333%; margin: 1%; float: left; }
.news ul li> img { width: 100%; height: auto; display: block;} 
.news ul li>a {display: block;} 
.news ul li .pro-note { background: rgba(255,255,255,0.9); position: absolute; top: 0; bottom:0; left: 0; right: 0; display: flex; transition: all 0.3s ease 0s; opacity: 0; overflow: hidden;
	-webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.news ul li:hover .pro-note { opacity: 1;  transition: all 0.3s ease 0s;} 
.news ul li .pro-note> div { width: 80%;}
.news ul li .pro-note h3 { display: block; width: 100%; }
.news ul li .pro-note h3 { color: #111111;}
.news ul li .pro-note .time { font-size: 14px; color:#6A673E; }
.news ul li .pro-note p { width:100% ; padding: 0; margin: 0; color: #111111;
display:block; /* 將資料內容分段顯示 */
word-break:break-all; /* 強制文字斷行 */
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;}



/** 報章雜誌 **/
.report-bg { background: url(../images/banner001.jpg); background-size: cover;} 
.report {  padding: 20px 0 70px 0; }
.report ul { margin: 0; padding: 0; list-style: none;}
.report ul li { position: relative;  margin:0; display: table; margin-bottom: 20px;}
.report .cover img { width: 100%; height: auto; }
.report ul li a {  display: block;  padding: 10px; }
.report ul li a:hover { background: rgba(244,244,244,1.00);  display: block;  padding: 10px; }

.report ul li .photo { width: 40%; display: table-cell; }
.report ul li .photo img { width: 100%; height: auto;}

.report .pro-note { color: #111111;  display: table-cell; vertical-align: top; padding-left: 20px; }
.report .pro-note h3 { font-weight: normal; margin:0 0 5px 0; font-size: 18px; #111111 }
.report .pro-note .time { color: #A8A493;}
.report .pro-note p { color:#575757;}
.report .pro-note .more { float: right; font-size: 12px; line-height: 1.2em; color:#C8C8C8; padding: 3px 7px; border: 1px #C8C8C8 solid;}

.report-de-box { }
.report-de-box h3.de-title { margin: 10px 0 0px 0;}
.report-de-box .de-time { font-size: 14px; color: #4979A6; margin-bottom: 10px;}


/** 案件 **/
.project-bg { background: url(../images/banner001.jpg); background-size: cover;} 
.project {padding-bottom: 70px; }
.project ul { margin: 0; padding: 0; list-style: none;}
.project ul li { position: relative; height: 250px; width: 49%; display: inline-block; vertical-align: middle;}
 .project ul li:nth-child(odd)  { margin: 0 0.5% 1% 0; }
 .project ul li:nth-child(even) { margin: 0 0 1% 0.5%; }
.project .cover { background: #000000;} 
.project .cover img { width: 100%; height: auto; opacity: 0.5; }
.project ul li a { 　width: 100%; height: 100%;
	             display: -webkit-flex;
                 display: flex;
                 -webkit-align-items: center;
                         align-items: center;
                 -webkit-justify-content: center;
                         justify-content: center;  
                }

.project ul li .photo { background: #000000; height: 100%; width: 100%; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 0; }
.project ul li .photo img { width: 100%; height: auto; opacity: 0.2;}
.project ul li:hover .photo img {  opacity: 0.4;}
.project .pro-note { position: relative; z-index: 100; color: #ffffff; width: 80%; height: 80%; text-align: center;}
.project .pro-note h3 { font-weight: normal; margin-bottom: 5px;}
.project .pro-note .time { color: #A8A493;}
.project .pro-note p { height: 7.5em; overflow: hidden; font-size: 12px; line-height: 1.5em; margin-top: 5px; }



.project-de-box { }
.project-de-box h3.de-title { margin: 10px 0 0px 0;}
.project-de-box .de-time { font-size: 12px; color: #4979A6;}


.project-move { max-width: 800px; width: 100%; margin: 20px auto; padding: 20px 0; border-top: 1px #e0e0e0 solid;}
.project-move .prev { background: #000000;  float: left; width: 49%; overflow: hidden; margin-right: 1%; position: relative; height: 150px;}
.project-move .next { background: #000000;  float: left; width: 49%; overflow: hidden; margin-left: 1%; position: relative; height: 150px;}
.project-move img { opacity: 0.2; position: absolute; top: 0; left: 0; width: 100%; height: auto;} 


.project-move .note { width: 100%; height:100%; position: absolute; top:0; left: 0; color: #ffffff; vertical-align: middle; text-align: center; cursor: pointer;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}



/** 關於我們 **/
.about-bg { background: url(../images/banner004.jpg); background-size: cover;} 
.about { display:flex;  }
.left-photo {  text-align: center; padding: 50px 0; vertical-align: middle;}
.about-text { color:#555555; position: relative;}
.about-img { width:40%; height: auto; padding: 50px 0;}
.cont-title { font-size: 20px; line-height: 1.5em; font-weight: normal; margin-top: 0; padding-bottom: 10px; color: #000000; border-bottom: 1px #a5a5a5 dotted; text-align: center;}
.about .cont-box { padding-bottom: 70px; }
.about .cont-box img { width: 100%; height: auto;  }

/*** 頭部 ***/
.logo { width: 335px; height: auto; position: absolute; top: 8px; left: 30px; }
.top {  position: absolute; top: 0; left: 0; right: 0; height: 60px;}
header {  background: rgba(255,255,255,0.9); position: fixed; top:0; width: 100%; z-index: 1000; height: 60px;}
header.index {  background:none; }
header.index .mobile-nav-button { display: block; }
header.index .mobile-nav-button .mobile-nav-button__line {background: rgba(236,236,236,1.00); }
.mobile-nav-button { display: none;}

/*** 頁碼 ***/
.page { padding: 20px; font-size: 14px; text-align: center; color: #525252; margin-top: 15px; border-top: 1px #d0d0d0 dotted;}
.page a { display: inline-block; vertical-align: top; padding: 7px 12px; color: #525252; border: 1px #d0d0d0 solid; line-height: 1em; margin-bottom: 3px;}
.page a:hover { background: #525252; color: #ffffff;}
.page br { height: 30px;}
.page .portal { padding-top: 5px; color: #4E70B5;}

/*** 底部 ***/
footer { background: #000000; padding:18px; text-align: right; color: #373736; font-size: 12px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 100; font-family:Microsoft JhengHei;}

@media screen and (max-device-width: 480px) {
	.mobile-menu>ul>li {color: #ffffff; font-size: 26px; }
	.mobile-menu ul.sub li { font-size: 18px; width: 30%;}
	.index-text-m { display: block;  padding: 15% 0;}
	.mobile-menu>ul>li span.ch-text { font-size: 12px; }
}



/*** 圖片列表效果 ***/
.l-alllist { padding:0; -webkit-flex: 1 1 0; -ms-flex: 1 1 0; flex: 1 1 0; margin-top: 10px;}
.l-alllist > ul.grid { list-style: none; margin: 0; padding: 0; }
.l-alllist > ul li {position: relative; width: 20%  }
.l-alllist > ul li img { width: 100%; display: block; padding: 1px; background: #ffffff; box-sizing: border-box;}
.l-alllist > ul li a { display: block; transition: all .3s ease;}
	.l-alllist > ul li a p { margin: 0; padding: 0;}
.l-alllist > ul li a:hover,
.l-alllist > ul li a:hover img { opacity: 1; -webkit-filter: brightness(100%); filter: brightness(100%);}
.l-alllist > ul li a:hover div { color: #ffffff;}
.l-alllist > ul li .h-cuurent {  opacity: 1; -webkit-filter: brightness(100%);  filter: brightness(100%);}
.l-alllist > ul li .h-cuurent div {  color:#ffffff;}

.l-alllist > ul li div {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  position: absolute;
  bottom: 10%;
  left: 35px;
  letter-spacing: 1px;
  color: #fff;
   }

.l-alllist > ul li div {  top: 1px; left: 1px; bottom: 1px; right: 1px; background: rgba(2,2,2,0.81); opacity:0; display: flex; vertical-align: middle; text-align: center;transition: all 0.3s ease 0s;
-webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.l-alllist > ul li:hover div { opacity: 1; transition: all 0.3s ease 0s; color: #ffffff;}
.l-alllist nav { background: rgba(255,255,255,0.9); font-family: engraversGothic, Microsoft JhengHei;  position: fixed; top:60px; width: 100%; z-index: 998;  }
.l-alllist nav ul { margin: 0; padding:10px 0; list-style: none; text-align: center; }
.l-alllist nav ul li { display: inline-block; position: relative; height: 25px; min-width: 120px; overflow: hidden;  }
.l-alllist nav ul li .m-f-nav { color: #000000; font-size: 14px; display:block; line-height: 25px; padding: 0 20px; text-decoration: none; position: absolute; top: 0; left: 0; width: 100%; cursor: pointer; transition: all 0.3s ease 0s;}

.l-alllist nav ul li:hover .m-f-nav, .l-alllist nav ul li.current .m-f-nav { color: #8E8E8E; top: -25px; transition: all 0.3s ease 0s;}

.l-alllist nav ul li span { display: block; font-size: 14px; line-height: 25px;}
.l-alllist nav ul li span.en { display: block; font-size: 16px; line-height: 25px;}
.l-alllist nav ul li span.dot { background: #B7B7B7; display: block; width: 7px; height: 7px; position: absolute; top: 8px; left: -7px; transition: all 0.3s ease 0s;}
.l-alllist nav ul li:hover span.dot, .l-alllist nav ul li.current span.dot { left: 5px; transition: all 0.3s ease 0s;}



/** 手機設定 **/

@media screen and (max-width: 900px) {
	
	.index-note { font-size: 12px; width: 275px; margin: 0 auto; letter-spacing: -1px; }
	
	.col-mid { display: -webkit-block;  display:block; }
    .col-01 {display:block;  }
	.logo { width: 230px;  top: 12px; left: 20px; }
	.wallper { padding:116px 0 61px 0;}
    .wallper02 {padding:60px 0 61px 0;}
	
	.mobile-nav-button { display: block; }
	.in-menu ul li { min-width: 90px; height: 20px;}
	.in-menu ul li:hover a { color: #8E8E8E; top: -20px;}
	.in-menu ul li a { padding: 0; line-height: 20px;}
	.in-menu ul li a span { font-size: 14px; line-height: 20px;}
	.in-menu ul li a span.en { font-size: 12px;}
	.in-menu ul li span.dot {  width: 5px; height: 5px; top: 7px; left: -5px;}
	
	.pc-menu { display:none;}
	
	.l-alllist > ul li { width: 50%;}
	.l-alllist nav { }
	.l-alllist nav ul { padding:0;}
	.l-alllist nav ul li { min-width: 90px; height: 20px; }
	.l-alllist nav ul li:hover .m-f-nav, .l-alllist nav ul li.current .m-f-nav  { top: -20px;}
	.l-alllist nav ul li span { font-size: 12px; line-height: 20px; text-align: left;}
    .l-alllist nav ul li span.en { font-size: 12px; line-height: 20px;}
	.l-alllist nav ul li span.dot { width: 5px; height: 5px;  top: 5px; left: -5px;}
	
	.l-alllist > ul li div {  }
	
	
	.news ul li {  width: 48%; margin-bottom: 30px; }
	.news ul li .pro-note { background: rgba(255,255,255,0.8); opacity: 1; position: relative; }
	.news ul li .pro-note>div { width: 100%;}
	.news ul li .pro-note>div h3 { height: 2.4em; overflow: hidden; line-height: 1.2em;}
	
	
	.report ul li { display:block; margin-bottom: 20px;}
	.report ul li .photo { width: 100%; display: block; }
	.report .pro-note {  display: block; padding:10px 0 20px 0; }
	
	.contact {  display: block;}
	.google-map {padding: 10px; margin-left: 0px;}
}