@import url("jssor.css");
@import url("layout.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');/*黑體*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url("all.css");
html{
  scroll-behavior: smooth;
}

#loader.loadComplete,
#loader.loadComplete > span {
  visibility: hidden;
  opacity: 0;
}

.delighter {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}

.delighter.started {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
@media print, screen and (min-width: 768px) {
  .solution-item.delighter.started {
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
  }
}

/* loader */
#loader {
  -webkit-transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  -moz-transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  -o-transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  position: fixed;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #FFF;
  top: 0;
  left: 0;
  z-index: 99999;
  visibility: visible;
  opacity: 1;
}

#loader > span {
  -webkit-transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  -moz-transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  -o-transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
  background-image: url(../images/loader-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 30vw;
  max-width: 120px;
  height: 124px;
  background-position: 50%;
  display: block;
  position: absolute;
  top: -10px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-animation: loaderAnime 0.5s ease-in-out;
  animation: loaderAnime 0.5s ease-in-out;
}
@-webkit-keyframes loaderAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.aboutbg{
	background:url(../images/aboutbg2.png) no-repeat top right #112432;
}
.about-wrap{
	padding:2% 0;
	box-sizing:border-box;
}
.about-inner{
	width:1280px;
	margin:0 auto;
	color:#fff;
}
.about-style-1{
	background:url(../images/aboutbg1.png) no-repeat;
	font-size:1.15rem;
	padding:150px 0 150px 170px;
	box-sizing:border-box;
	color:#fff;
	margin:0 0 0 7%;
}
.about-style-2{
	font-family: 'Noto Serif TC', serif;
	color:#b69b7d;
	font-size:2.8rem;
	letter-spacing:8px;
	text-shadow:1px 1px 2px #333;
}
.about-style-3{
	font-family: 'Noto Sans TC', sans-serif;
	font-size:1.3rem;
	line-height:1.8;
	font-weight:300;
	letter-spacing:3px;
	padding:5% 0;
	box-sizing:border-box;
	width:55%;
}
.recruit-style{
	font-size:1.3rem;
	color:#fff;
	line-height:1.8;
	letter-spacing:2.4px;
	width:75%;
	float:left;
	padding:3% 0 0 0;
	box-sizing:border-box;
}
.recruit-web{
	height:50px;
	font-size:1.3rem;
	line-height:50px;
	width:25%;
	float:left;
	text-align:right;
	padding:3% 0 0 0;
	box-sizing:border-box;
}
.recruit-web a{
	display:block;
	color:#d8b26e;
	background:url(../images/icon08.png) no-repeat 50% center;
}
.recruit-img{
	margin:5% 0;
}
.recruit{
	border-top:1px solid #989da6;
}
.recruit li{
	border-bottom:1px solid #989da6;
}
.recruit li a{
	display:block;
	color:#fff;
	padding:50px 0;
	box-sizing:border-box;
	overflow:hidden;
	background:url(../images/ar02.png) no-repeat 98% center;
}
.recruit li a:hover{
	color:#d8b26e;
	background:url(../images/ar01.png) no-repeat 98% center;
}
.recruit li a:hover .r-date{
	color:#d8b26e;
}
.r-date{
	font-size:1.1rem;
	line-height:30px;
	color:#d0d1d3;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	width:18%;
	float:left;
	text-align:center;
}
.r-title{
	font-size:1.5rem;
	line-height:30px;
	width:82%;
	float:left;
}
.r-date-2{
	font-size:1.1rem;
	color:#989da6;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	text-align:center;
	padding:22px 0;
	box-sizing:border-box;
}
.r-title-2{
	font-size:2.6rem;
	text-align:center;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight:400;
	letter-spacing:3px;
}
.subtitle{
	font-size:2.7rem;
	color:#ae9789;
	-webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr ;
	letter-spacing:8px;
}
.backbt{
	width:180px;
	height:50px;
	font-size:1.2rem;
	line-height:50px;
	font-weight:bold;
	text-align:right;
	float:right;
}
.backbt a{
	display:block;
	color:#000;
	background:url(../images/back.png) no-repeat 15% center;
}
.backbt a:hover{
	background:url(../images/back.png) no-repeat 5% center;
}
.recruit-content{
	clear:both;
	padding:5% 0;
	box-sizing:border-box;
}
.applybt{
	width:150px;
	margin:0 auto;
	font-size:1.5rem;
	font-weight:bold;
	text-align:center;
	letter-spacing:2px;
}
.applybt a{
	display:block;
	color:#000;
	background:url(../images/send.png) no-repeat top center;
	padding:75px 0 0 0;
	box-sizing:border-box;
}
.applybt a:hover{
	background:url(../images/send.png) no-repeat 90% top;
}
.r-list{
	display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    overflow:hidden;
	margin:5% 0;
}
.r-list li{
	float:left;
	border-bottom:1px solid #bcc0c6;
	padding:2.4% 0;
	box-sizing:border-box;
	font-size:1.24rem;
	line-height:1.6;
	color:#112432;
	letter-spacing:1.5px;
}
.r-list li:nth-child(odd){
	width:22%;
	text-indent:50px;
	font-weight:bold;
}
.r-list li:nth-child(even){
	width:78%;
}
.abb{
	overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.newsbg{
	background: url(../images/bg002.png) no-repeat #112432;
}
.n-left{
	width:60%;
	float:left;
}
.n-right{
	width:40%;
	float:left;
	padding:5% 0 0 5%;
	box-sizing:border-box;
}
.newstitle{
	font-size:1.5rem;
	color:#d8b26e;
	padding:50px 0;
	box-sizing:border-box;
}
.newssub{
	font-size:1.15rem;
	line-height:1.8;
	color:#fff;
	font-weight:normal;
	letter-spacing:2px;
}
.newsdate{
	font-size:1.1rem;
	color:#989da6;
	font-weight:400;
	font-family: 'Roboto', sans-serif;
}
.newsclass{
}
.newsclass li{
	font-size:1.3rem;
	font-weight:bold;
	letter-spacing:1px;
	margin:0 0 30px 0;
}
.newsclass li a{
	display:block;
	padding:10px 0;
	box-sizing:border-box;
	color:#112432;
	background:url(../images/dot.png) no-repeat -10% center;
}
.newsclass li a:hover{
	background:url(../images/dot.png) no-repeat left center;
	text-indent:45px;
}
.newsclass li.active a{
	background:url(../images/dot.png) no-repeat left center;
	text-indent:45px;
}
.news{
	overflow:hidden;
}
.news li{
	float:left;
}
.news li a{
	color:#112432;
}
.news li:nth-child(odd){
	width:48%;
	margin:0 2% 3% 0;
}
.news li:nth-child(even){
	width:48%;
	margin:0 0 3% 2%;
}
.news_link{
	position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.newsimg{
	position: relative;
	overflow:hidden;
}
.newsimg img{
	display:block;
	-webkit-transform: scale(1.0);
	-webkit-transition:0.5s;
}
.readmore{
	font-size:1.1rem;
	font-weight:300;
	line-height:30px;
	width:50%;
	float:left;
}
.readmore span {
    display: inline;
    padding-bottom: 1px;
    background-image: linear-gradient(180deg,transparent calc(100% - 1px),#112432 0);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size .3s ease-in-out;
	font-family: 'Roboto', sans-serif;
}
.news_link:hover .readmore span {
    background-size: 100% 100%;
}
.news_link:hover .newsimg img{
	-webkit-transform: scale(1.1);
}
.newstt{
	font-size:1.4rem;
	padding:20px 5px;
	box-sizing:border-box;
	border-bottom:1px solid #112432;
	margin:0 0 10px 0;
}
.newslabel{
	font-size:1.1rem;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	line-height:30px;
	text-align:right;
	width:50%;
	float:left;
}
.news-left{
	width:40%;
	float:left;
	padding:2% 9% 2% 0;
	box-sizing:border-box;
}
.news-right{
	width:60%;
	float:left;
	padding:2% 0;
	box-sizing:border-box;
}
.newsback{
	font-size:1.3rem;
	line-height:30px;
	font-weight:bold;
	margin:0 0 100px 0;
}
.newsback a{
	display:block;
	color:#232f3c;
	background:url(../images/back.png) no-repeat 15px center;
	padding:0 0 0 95px;
	box-sizing:border-box;
}
.newsback a:hover{
	background:url(../images/back.png) no-repeat left center;
}
.news2title{
	color:#93634a;
	font-size:1.6rem;
	line-height:1.6;
	letter-spacing:2px;
	margin:0 0 8% 0;
}
.newstxt{
	font-size:1.15rem;
	line-height:1.8;
	font-weight:normal;
	letter-spacing:2px;
	margin:3% 0;
}
.newsdetail{
	width:100%;
	overflow:hidden;
	display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.newsdetail li{
	width:33.333%;
	float:left;
	font-size:1.3rem;
	text-align:center;
	font-weight:bold;
	background:#fff;
}
.newsdetail li i{
	margin:0 20px 0 0;
}
.newsdetail li:nth-child(3) i{
	margin:0 0 0 20px;
}
.newsdetail li a{
	display:block;
	color:#112432;
	padding:15% 0 14% 0;
	box-sizing:border-box;
	background-image: linear-gradient(to right, #d0d1d3 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-size: 201% 100%;
    transition: background-position .7s cubic-bezier(289, 209, 211, 1);
}
.newsdetail li a:hover{
	background-position-x: 0;
    transition: background-position 1.1s cubic-bezier(289, 209, 211, 1);
}
.more{
	width:100%;
	font-size:1.1rem;
	line-height:30px;
	margin:20px 0 0 0;
}
.more a{
	display:block;
	color:#fff;
}
.moret{
	display: inline-block;
	width:34%;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	text-align:right;
}

.moreline{
	display: inline-block;
	width:66%;
	height:1px;
    background-image: linear-gradient(180deg,transparent calc(100% - 1px),#fff 0);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .3s ease-in-out;
}
.more a:hover .moreline{
	background-size: 100% 100%;
}
.servicebg{
	background:url(../images/bg005.png) no-repeat top left #ebebeb;
}
.contact-wrap{
	width:950px;
	margin:0 auto;
	clear:both;
	padding:5% 0 0 0;
	box-sizing:border-box;
}
.subnav{
	width:11%;
	margin:0 0 0 89%;
}
.subnav li{
	font-size:1.25rem;
	letter-spacing:2px;
	margin:10px 0;
	position:relative;
}
.subnav li a{
	display:block;
	padding:10px 0 10px 40px;
	box-sizing:border-box;
	color:#333;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight:300;
}
.subnav li a:hover{
}
.subnav li.active a{
	color:#93634a;
}
.subnav li.active::before {
	content:'';
	display:block;
	width:20px;
	height:2px;
	background:#93634a;
	position:absolute;
	left: 0;
    top: 50%;
}
.contact-txt{
	font-size:1.3rem;
	line-height:1.6;
	text-align:center;
	color:#93634a;
	margin:0 0 5% 0;
}
.contact{
	overflow:hidden;
	display:flex;
    flex-wrap:wrap;
}
.contact li{
	float:left;
	font-size:1.25rem;
	line-height:48px;
	margin:0 0 40px 0;
}
.contact li p{
	color:#112432;
}
.contact li:nth-child(odd){
	width:20%;
	text-align:right;
	padding:0 20px 0 0;
	box-sizing:border-box;
}
.contact li:nth-child(even){
	width:80%;
}
.contact li.form-c{
	text-align:center;
}
.contact li:nth-last-child(3){
	width:100%;
	text-align:left;
}
.contact li:nth-last-child(2){
	width:100%;
}
.contact li:last-child{
	width:100%;
	text-align:left;
	padding:0;
}
.contact li input[type="text"]{
	width:100%;
	height:48px;
	background:#d0d1d3;
	border:1px solid #93634a;
	padding:5px; 
	box-sizing:border-box;
}
.contact li input[type="submit"]{
	font-size:1.7rem;
	text-align:center;
	color:#112432;
	font-weight:500;
	letter-spacing:5px;
	width:100%;
	height:80px;
	background:#ebebeb;	
	font-family: 'Noto Sans TC', sans-serif;
	border:1px solid #112432;
}
.contact li input[type="radio"]{
	margin:-5px 5px 0 0;
}
.contact li input[type="checkbox"]{
	margin:-4px 8px 0 0;
}
.contact li textarea{
	width:99%;
	height:96px;
	background:#d0d1d3;
	border:1px solid #93634a;
	max-height:96px;
	max-width:99%;
	display: block;
}
.contact li label{
	margin:0 20px 0 0;
}
.cw-50{
	width:50%;
	float:left;
}
.cw-50 img{
	width:100px;
	height:auto;
	float:left;
	margin:8px 10px 0 10px;
}
.cw-50 a{ 
	display: inline-block;
	float:left;
	height:48px;
	font-size:1rem;
	line-height:48px;
	color:#112432;
	background:url(../images/reset.png) no-repeat left center;
	padding:0 0 0 25px;
	box-sizing:border-box;
}
.privacy{
	font-size:1rem;
	line-height:1.6;
	background:#fff;
	letter-spacing:1.5px;
	padding:15px;
	box-sizing:border-box;
}
.reapair-wrap{
	width:100%;
	clear:both;
}
.re-left{
	width:47%;
	float:left;
	margin:12% 0 0 0;
	overflow:hidden;
}
.re-right{
	width:53%;
	float:left;
	background:#fff;
	padding:5% 7%;
	box-sizing:border-box;
	box-shadow:0px 6px 50px #ccc;
	margin:5% 0 0 0;
}
.re01{
	width:10%;
	float:left;
	-webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
	text-transform:uppercase;
	font-size:1.2rem;
	color:#112432;
	letter-spacing:3px;
}
.re01 span{
	padding:0 0 20px 0;
	box-sizing:border-box;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:1.1rem;
}
.re02{
	width:75%;
	float:left;
	display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.re02 li{
	float:left;
}
.re02 li:nth-child(odd){
	width:25%;
	text-align:center;
	background: url(../images/reline.png) repeat-y top center;
}
.re02 li:nth-last-child(2){
	background:none;
}
.re02 li:nth-child(even){
	width:75%;
}
.repair-txt{
	font-size:1.3rem;
	line-height:1.8;
	text-align:center;
	color:#93634a;
	width:80%;
	margin:0 auto 50px auto;
}
.retxt01{
	font-size:1.4rem;
	padding:13px 0;
	box-sizing:border-box;
}
.retxt01 span{
	display:inline-block;
	width:50px;
	font-family: 'Roboto', sans-serif;
}
.retxt02{
	font-size:1.15rem;
	line-height:1.6;
	letter-spacing:2px;
	font-weight:normal;
	padding:0 0 25px 50px;
	box-sizing:border-box;
}
.repair{
	overflow:hidden;
}
.repair li{
	margin:0 0 30px 0;
	border-bottom:1px solid #ccc;
	
}
.repair li:nth-child(8){
	width:45%;
	float:left;
}
.repair li:nth-child(9){
	width:55%;
	float:left;
	border-bottom:none;
}
.repair li:last-child{
	clear:both;
	border-bottom:none;
}
.repair-ps{
}
.repair input[type="text"]{
	width:100%;
	height:50px;
	border:0;
	padding:10px;
	box-sizing:border-box;
	font-size:1.24rem;
	color:#112432;
}
.repair input[type="submit"]{
	font-size:1.7rem;
	text-align:center;
	color:#112432;
	font-weight:500;
	letter-spacing:5px;
	width:100%;
	height:80px;
	background:#fff;	
	font-family: 'Noto Sans TC', sans-serif; 
	border:1px solid #112432;
}
.repair select{
	width:100%;
	height:50px;
	border:0;
	padding:10px;
	box-sizing:border-box;
}
.repair textarea{
	width:99%;
	height:120px;
	background:#fff;
	border:0px solid #93634a;
	max-height:120px;
	max-width:99%;
	display: block;
	padding:10px;
	box-sizing:border-box;
	font-size:1.24rem;
	color:#112432;
}
.repair-ps img{
	width:100px;
	height:auto;
	float:left;
	margin:8px 10px 0 10px;
}
.repair-ps a{
	display: inline-block;
	float:left;
	width:200px;
	height:48px;
	font-size:1rem;
	line-height:48px;
	color:#112432;
	background:url(../images/reset.png) no-repeat left center;
	padding:0 0 0 25px;
	box-sizing:border-box;
}
.casebg{
	background:url(../images/cadebg0.png) no-repeat #112432;
}
.casenav{
	width:12%;
	float:right;
}
.casenav li{
	font-size:1.24rem;
	letter-spacing:2px;
	margin:10px 0;
	position:relative;
}
.casenav li a{
	display:block;
	padding:10px 0 10px 40px;
	box-sizing:border-box;
	color:#d0d1d3;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight:300;
}
.casenav li a:hover{
}
.casenav li.active a{
	color:#ae9789;
}
.casenav li.active::before {
	content:'';
	display:block;
	width:20px;
	height:2px;
	background:#ae9789;
	position:absolute;
	left: 0;
    top: 50%;
}
.casestyle{
	width:500px;
	float:left;
	margin:8% 0 0 20%;
}
.craft-wrap{
	width:100%;
	clear:both;
	padding:5% 0 0 0;
	box-sizing:border-box;
}
.craftlist{
	overflow:hidden;
	width:95%;
	margin:5% auto;
}
.craftlist li{
	width:31%;
	float:left;
	margin:0 3.5% 3% 0;
	position:relative;
	overflow:hidden;
}
.craftlist li:nth-child(3n+3){
	margin:0 0 3% 0;
}
.craftlist li a {
	display:block;
	font-size:1.4rem;
	color:#fff;
}
.hot_body {
  background: rgba(17, 36, 50, 0.7);
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding:0;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.hot_body:hover {
  background: rgba(17, 36, 50, 0.2);
}
.craftlist li a:hover .newsimg img{
	-webkit-transform: scale(1.1);
}
.craftpic img{
	margin:0 0 5% 0;
}
.craftpic img:last-child{
	margin:0;
}
.rent{
	border-bottom:1px solid #fff;
}
.rent li{
	border-top:1px solid #fff;
	padding:4%;
	box-sizing:border-box;
	overflow:hidden;
}
.rent-left{
	width:45%;
	float:left;
	padding:0 6% 0 0;
	box-sizing:border-box;
}
.rent-right{
	width:55%;
	float:right;
}
.relist{
	overflow:hidden;
	border-bottom:none;
	margin:6% 0 10% 0;
}
.relist li{
	border-top:none;
	font-size:1.33rem;
	line-height:1.6;
	color:#fff;
	float:left;
	padding:10px 0;
	box-sizing: border-box;
}
.relist li:nth-child(odd){
	width:25%;
	font-weight:bold;
}
.relist li:nth-child(even){
	width:75%;
}
.rentname{
	font-size:1.8rem;
	color:#ad9789;
	display:inline;
	vertical-align:middle;
}
.rentname a{
	vertical-align:middle;
	margin:0 0 0 10px;
}
.askbtn{
	align-self: center;
    width:120px;
	font-size:1.5rem;
	margin:15% auto 0 auto;
	text-align:center;
}
.askbtn a{
	display:block;
	color:#fff;
}
/*ーーーーーーーーーーーーーーーーーーーー underline*/
.underline {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding-bottom:15px;
  opacity: .6; 
}
.underline:before, .underline:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    top: auto;
    bottom: 0;
    height: 1px;
    background-color: #ccc;
}
.underline:before {
    opacity: .6; }
.underline:after {
    width: 0;
    left: auto;
    right: 0;
    opacity: 1;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition-duration: 0.3s;
    -ms-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: #fff;
     }
.underline:hover, .underline:active {
    opacity: 1; }
.underline:hover:after, .underline:active:after {
      width: 100%;
      right: auto;
      left: 0; }
.loginbg{
	background:url(../images/workbg.png) no-repeat right top #112432;
}
.login-wrap{
	width:800px;
	margin:0 0 0 10%;
}
.login-txt{
	font-size:1.5rem;
	text-align:center;
	color:#fff;
	line-height:1.8;
	padding:30px 0;
	box-sizing:border-box;
}
.login{
	margin:5% 0;
}
.login li{
	padding:12px 0;
	box-sizing:border-box;
	overflow:hidden;
}
.login li p{
	font-size:1.2rem;
	color:#fff;
	font-weight:normal;
	line-height:1.8;
}
.login li p span{
	color:#ee6263;
}
.login li p a{
	color:#fff;
	text-decoration:underline;
}
.login li label{
	font-size:1.3rem;
	color:#fff;
	font-weight:normal;
	line-height:1.8;
	margin:0 10px 0 0;
}
.log-50{
	width:50%;
	float:left;
}
.log-50 img{
	width:130px;
	height:auto;
	float:left;
	margin:0 10px;
}
.log-50 a{
	display: inline-block;
	float:left;
	height:42px;
	font-size:1rem;
	line-height:42px;
	color:#fff;
	background:url(../images/reset2.png) no-repeat left center;
	padding:0 0 0 25px;
	box-sizing:border-box;
}
.form-box{
	margin:34px 0 0 5px;
	height:48px;
}
.login input[type="text"]{
	width:100%;
	height:48px;
	background:#ebebeb;
	border:0;
	padding:5px;
	box-sizing:border-box;
}
.login input[type="password"]{
	width:100%;
	height:48px;
	background:#ebebeb;
	border:0;
	padding:5px;
	box-sizing:border-box;
}
.login input[type="submit"] {
	-webkit-appearance: none; 
	font-family:Arial, "微軟正黑體"; 
	cursor:pointer;
	border:1px solid rgba(219,162,60,0.7);
	width:100%;
	height:80px;
	background:none;
	font-size:1.8rem;
	color:#fff;
	font-weight:bold;
	margin:2% 0 0 0;
}
.listbg{
	background:url(../images/workbg2.png) no-repeat top left #ebebeb;
}
.worklist{
	width:100%;
	margin:5% 0;
}
.worklist li{
	border-bottom:1px solid #989da6;
}
.worklist li a{
	display:block;
	padding:25px;
	box-sizing:border-box;
	overflow:hidden;
}
.worklist li a:hover{
	background:rgba(255,255,255,0.5);
}
.work-left{
	width:23%;
	float:left;
}
.work-right{
	width:73%;
	float:right;
}
.work-title{
	font-size:1.6rem;
	color:#112432;
	padding:20px 0;
	box-sizing:border-box;
}
.work-date{
	font-size:1.1rem;
	color:#989da6;
	font-family: 'Roboto', sans-serif;
	font-weight:500;
}
.work-date:after{
	content:'';
	display:block;
	width:60px;
	height:2px;
	background:#112432;
	margin:8px 0 15px 0;
}
.work-sub{
	overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
	font-size:1.22rem;
	line-height:1.6;
	color:#112432;
	letter-spacing:2px;
}
.work-date2{
	font-size:1.1rem;
	color:#989da6;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	padding:20px 0;
	box-sizing:border-box;
}
.catalog{
	width:160px;
	float:left;
}
.caselist{
	width:80%;
	float:right;
}
.cata{
	font-size:1.4rem;
	color:#fff;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	border-bottom:1px solid #d0d1d3;
	color:#d0d1d3;
	position:relative;
	padding:0 0 15px 0;
	box-sizing:border-box;
	margin:0 0 15px 0;
}
.cata:after{
	content:'';
	display:block;
	width:20px;
	height:1px;
	background:#fff;
	position: absolute;
	right:0;
	top:10px;
}
.catalist{
}
.catalist li{
	font-size:1.3rem;
}
.catalist li a{
	display:block;
	color:#d0d1d3;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	padding:15px;
	box-sizing:border-box;
}
.catalist li a:hover{
	color:#fff;
}

.catalog select{
	width:100%;
	height:48px;
	background:#112432;
	color:#fff;
	display:none;
}
.p-list {
	width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	padding:0 0 10% 0;
	box-sizing:border-box;
}
.p-works__list__item {
    width: 50%;
    position: relative;
	margin-bottom: 20vh;
}
.p-works__list__item:nth-of-type(2n) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
	top: 14.375vw;
}
.p-works__list__item:nth-of-type(odd) {
	padding:0 3% 0 0;
	box-sizing:border-box;
}
.p-works__list__item:nth-of-type(even) {
	padding:0 0 0 3%;
	box-sizing:border-box;
}
.p-works__list__item a:hover .newsimg img{
	-webkit-transform: scale(1.1);
}
.p-year{
	font-size:1.75rem;
	color:#fff;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-style:italic;
	position:relative;
	top:0;
	left:0;
	z-index:2;
}
.p-title{
	font-size:1.75rem;
	color:#ae9789;
	padding:20px 0;
	box-sizing:border-box;
}
.p-sub{
	font-size:1.12rem;
	color:#fff;
	line-height:1.6;
	letter-spacing:2px;
	font-weight:normal;
	overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}
/*
.caseareabg{
	background:url(../images/casebg1.jpg) no-repeat;
}
*/
.casedetailinfo{
	width:90%;
	margin:0 auto;
}
.d-info{
	overflow:hidden;
	margin:0 0 5% 0;
}
.d-info li{
	width:50%;
	float:left;
}
.d-year{
	font-size:1.15rem;
	color:#112432;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	padding:0 0 20px 0;
	box-sizing:border-box;
}
.d-title{
	font-size:2.5rem;
	color:#112432;
}
.d-txt{
	font-size:1.2rem;
	line-height:1.8;
	letter-spacing:2px;
	color:#112432;
}
.d-intro{
	width:55%;
	margin:5% 0 0 45%;
	overflow:hidden;
}
.d-intro li{
	font-size:1.2rem;
	line-height:1.6;
	color:#333;
	padding:6px 0;
	box-sizing:border-box;
}
.d-intro li:nth-child(odd){
	width:15%;
	float:left;
	font-weight:bold;
}
.d-intro li:nth-child(even){
	width:35%;
	float:left;
}
.backbtn{
	width:100%;
	font-size:1.5rem;
	line-height:100px;
	text-align:center;
}
.backbtn a{
	display: block;
	color:#fff;
	border:1px solid #90999f;
	background-image: linear-gradient(to right, #b69b7d 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-size: 201% 100%;
    transition: background-position .7s cubic-bezier(182, 155, 125, 1);
}
.backbtn a i{
	margin:0 10px 0 0;
}
.backbtn a:hover{
	background-position-x: 0;
    transition: background-position 1.1s cubic-bezier(182, 155, 125, 1);
	border:1px solid #b69b7d;
}
.slogan{
	font-size:2.2rem;
	color:#b69b7d;
	margin:0 0 0 160px;
	letter-spacing:2.5px;
}
.scroll-wrap{
	position:relative;
	width:100%;
	clear:both;
	padding:100px 0;
	box-sizing:border-box;
}
.scroll-wrap:before{
	content:'';
	display:block;
	width:1px;
	height:100px;
	background:#e5e5e5;
	margin:0 auto;
}
.btn_scroll{
	position: absolute;
	top:230px;
	left: 50.2%;
}
.btn_scroll span{position: absolute; top: 0; left: 50%; width: 22px; height: 35px; margin-left: -15px; border: 2px solid #fff; border-radius: 50px; box-sizing: border-box;}
.btn_scroll span:after{content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight:900; font-size: 18px; color: #fff;top:35px; left:1px;position: absolute;}
.btn_scroll span:before{ position: absolute; top:8px; left: 57%; content: ''; width:3px; height: 13px; margin-left: -3px; background-color: #fff; border-radius: 10px; -webkit-animation: sdb10 2s infinite; animation: sdb10 2s infinite; box-sizing: border-box;}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.section{
	height:100vh;
    background-size: cover;
}
.item{
  width: 100%; 
  height:100vh;
  overflow:hidden;
}
.itemphone{
	display:none;
	width: 100%; 
}
.leftbox{
	width:42%;
	height:100%;
	clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
	background:#ebebeb;
	float:left;
}
.rightbox{
	width:22%;
	height:100%;
	clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0 100%);
	background:#ebebeb;
	float:right;
}
.leftbox-02{
	width:42%;
	height:100%;
	clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
	background:#112432;
	float:left;
}
.rightbox-02{
	width:22%;
	height:100%;
	clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0 100%);
	background:#112432;
	float:right;
}
.caseblock{
	width:400px;
	margin:60% 0 0 17%;
}
.item-title{
	font-size:3rem;
	color:#ae9789;
	letter-spacing:3px;
}
.item-info, .item-info-02{
	overflow:hidden;
	padding:20px 0;
	box-sizing:border-box;
	margin:0 0 50px 0;
}
.item-info li{
	font-size:1.2rem;
	line-height:1.8;
	color:#112432;
	float:left;
}
.item-info li:nth-child(1), .item-info-02 li:nth-child(1){
	width:40%;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	letter-spacing:2px;
}
.item-info li:nth-child(2){
	width:60%;
	font-weight:bold;
	background:url(../images/map2.png) no-repeat left center;
	padding:0 0 0 30px;
	box-sizing:border-box;
}
.item-info-02 li{
	font-size:1.2rem;
	line-height:1.8;
	color:#fff;
	float:left;
}
.item-info-02 li:nth-child(2){
	width:60%;
	font-weight:bold;
	background:url(../images/map.png) no-repeat left center;
	padding:0 0 0 30px;
	box-sizing:border-box;
}
.item-text{
	font-size:1.2rem;
	line-height:1.8;
	color:#112432;
	letter-spacing:2px;
	overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
}
.item-text-02{
	font-size:1.2rem;
	line-height:1.8;
	color:#fff;
	letter-spacing:2px;
	overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
}
.casemenu{
	width:50px;
	height:auto;
	margin:20% 0 0 60%;
}
.casemenu li{
	font-size:1.2rem;
	line-height:1.8;
	font-weight:bold;
	letter-spacing:4px;
	-webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr ;
}
.casemenu li a{
	color:#112432;
	padding:20px 10px;
	box-sizing:border-box;
}
.casemenu li a:hover{
	color:#ae9789;
}
.casemenu li.active a{
	color:#93634a;
}
.video{
}
.video iframe{
	width:100%;
	height:500px;
}
.rightbox-02 .casemenu li a{
	color:#ae9789;
}
.{
}
.{
}
.viewbtn, .viewbtn-02{
	width:150px;
	font-size:1.13rem;
	font-family: 'Roboto', sans-serif;
	font-weight:600;
	margin:50px 0 0 0;
}
.viewbtn a{
	display:block;
	color:#112432;
	background:url(../images/ar04.png) no-repeat 95% center;
}
.viewbtn a:hover{
	background:url(../images/ar04.png) no-repeat right center;
}
.viewbtn-02 a{
	display:block;
	color:#fff;
	background:url(../images/ar03.png) no-repeat 95% center;
}
.viewbtn-02 a:hover{
	background:url(../images/ar03.png) no-repeat right center;
}





@media (max-width: 1600px) {
.p-list__item:nth-of-type(2n) {
    top: 230px;
}
.subnav {
    width:15%;
    margin: 0 0 0 85%;
}
}
@media (max-width: 1366px) {
.caseblock{
	width:350px;
	margin:60% 0 0 10%;
}
}

@media (max-width: 1280px) {
.about-inner{
	width:90%;
}
.about-style-1{
	font-size:1.2rem;
	margin:0;
}
.video iframe{
	height:400px;
}
}

@media (max-width: 1024px) {
.subnav {
    width:50%;
    margin: 0 0 0 50%;
}
.contact-wrap{
	width:90%;
	padding:5% 0 0 0;
}
.re-left{
	width:100%;
	float:none;
	margin:0;
	padding:5% 0 0 0;
	box-sizing:border-box;
}
.re-right{
	width:100%;
	float:none;
	padding:5% 7%;
}
.login-wrap{
	width:82%;
	margin:0 auto;
}
.news-left{
	width:50%;
}
.news-right{
	width:50%;
}
.n-left{
	width:60%;
	float:left;
	padding:5% 0 0 0;
	box-sizing:border-box;
}
.newsclass{
	overflow:hidden;
}
.newsclass li{
	float:left;
}
.newsclass li a{
	padding:10px;
	background:none;
}
.newsclass li a:hover{
	background:none;
	text-indent:0px;
}
.newsclass li.active a{
	background:#112432;
	text-indent:0px;
	color:#fff;
}
.casenav{
	width:200px;
	float:none;
	margin:0 auto;
}
.casestyle{
	width:75%;
	float:none;
	margin:5% 0 0 0 ;
}
.craftlist{
	width:100%;
	margin:5% 0;
}
.rent-left{
	width:50%;
}
.rent-right{
	width:50%;
}

.catalog{
	width:100%;
	float:none;
	margin:0 0 20px 0;
}
.catalist{
	display:none;
}
.catalog select{
	display:block;
}
.caselist{
	width:100%;
	float:none;
}
.casedetailinfo{
	width:100%;
}
.d-info li{
	width:100%;
	float:none;
}
.d-intro{
	width:100%;
	margin:5% 0 0 0;
}
.d-txt{
	padding:20px 0 0 0;
	box-sizing:border-box;
}
.slogan{
	font-size:1.8rem;
	margin:0 0 0 5%;
}
.backbtn{
	margin:5% 0 0 0;
}
.rightbox{
	display:none;
}
.rightbox-02{
	display:none;
}
.caseblock{
	width:300px;
	margin:40% 0 0 8%;
}
.item-info li:nth-child(1), .item-info-02 li:nth-child(1){
	width:100%;
}
.item-info li:nth-child(2){
	width:100%;
}
}

@media (max-width: 768px) {
.contact li{
	line-height:40px;
	float:none;
	margin:0 0 10px 0;
}
.contact li:nth-child(odd){
	width:100%;
	text-align:left;
	padding:0;
}
.contact li:nth-child(even){
	width:100%;
}
.login-wrap{
	width:100%;
}
.work-left{
	width:40%;
}
.work-right{
	width:55%;
}
.work-title{
	font-size:1.4rem;
	padding:10px 0;
}
.recruit-style{
	width:65%;
}
.recruit-web{
	width:35%;
}
.r-list li:nth-child(odd){
	width:28%;
	text-indent:0;
	text-align:center;
}
.r-list li:nth-child(even){
	width:72%;
}
.news-left{
	width:100%;
	float:none;
	padding:2% 0;
}
.news-right{
	width:100%;
	float:none;
}
.newstt{
	font-size:1.3rem;
	padding:15px 5px;
}
.newslabel{
	display:none;
}
.rent-left{
	width:100%;
	float:none;
	padding:2% 0 ;
}
.rent-right{
	width:100%;
	float:none;
}
.item{
	display:none;
}
.itemphone{
	display:block;
}
.leftbox{
	width:100%;
	height:auto;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	float:none;
	padding:5%;
	box-sizing:border-box;
}
.leftbox-02{
	width:100%;
	height:auto;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	float:none;
	padding:5%;
	box-sizing:border-box;
}
.caseblock{
	width:100%;
	margin:0;
}
.item-title {
    font-size: 2.2rem;
}
.recruit li a{
	background-size:90px 38px;
}
.recruit li a:hover{
	background-size:90px 38px;
}
.casestyle{
	display:none;
}
.scroll-wrap{
	display:none;
}
.p-year{
	font-size:1.4rem;
}
.about-style-1{
    padding:30px 0 30px 5%;
}
}

@media (max-width: 640px) {
.subnav {
    width:150px;
    margin: 0 auto;
}
.about-style-2{
	font-size:2.2rem;
}
.about-style-3{
	width:100%;
}
.cw-50{
	width:100%;
	float:left;
}
.cw-50 img{
	margin:8px 10px 0 0;
}
.re02 {
    width:85%;
}
.repair-txt {
    width: 100%;
}
.repair li:nth-child(8){
	width:100%;
	float:none;
}
.repair li:nth-child(9){
	width:100%;
	float:none;
	overflow:hidden;
}
.log-50{
	width:100%;
	float:none;
}
.form-box {
    margin:0 ;
}

.recruit-style{
	width:100%;
}
.recruit-web{
	width:100%;
}
.recruit-web a{
	background:url(../images/icon08.png) no-repeat 80% center;
}
.r-date{
	width:100%;
	float:none;
	text-align:left;
}
.r-title{
	width:100%;
	float:none;
}
.n-left{
	width:100%;
	float:none;
	padding:5% 0;
}
.n-right{
	width:100%;
	float:none;
	padding:5% 0;
}
.craftlist li{
	width:48%;
	margin:1%;
}
.craftlist li:nth-child(3n+3){
	margin:1% 1% 1% 1%;
}
.d-intro li:nth-child(odd){
	width:30%;
}
.d-intro li:nth-child(even){
	width:70%;
}
.video iframe{
	height:330px;
}
.casestyle{
	width:100%;
}
.subtitle{
	font-size:2.3rem;
}
}

@media (max-width: 480px) {
.subtitle{
	font-size:2rem;
	writing-mode: horizontal-tb;
	letter-spacing:1px;
}
.casenav li a{
	padding:10px 0 10px 30px;
}
.recruit-web a{
	background:url(../images/icon08.png) no-repeat 77% center;
	background-size:35px 35px;
}
.recruit-style {
	font-size:1.15rem;
}
}
