html,body,img,p,h1,h2,h3,ul,ol,li,hr,div,a{border:0; margin:0; padding:0; list-style-type:none; font-family: Microsoft JhengHei; text-decoration:none; color:inherit;}
input,select,textarea{ font-family: Microsoft JhengHei; font-size: initial;}
hr{clear:both; border:0;}
body{ background-color:#FFF;}

	
/*==========通用===========*/
p{ line-height: 2em; color: #3f3a39;}
@font-face{font-family:'welcome'; src:url('DFT_N7.TTC') format("opentype");}
@font-face{font-family:'cambriab'; src:url('cambriab.ttf') format("opentype");}


#allMask{width: 100%; overflow: hidden; font-size:1.33vw; background-color:#000;}
a.typeA{ display: inline-block; background-color: #c59c53; color: #FFF; font-weight: bold; letter-spacing: 0.5em; line-height: 1em; padding: 0.5em 1em;cursor:pointer;}
a.typeB{}

.triangleBg{position: absolute; bottom: 0; z-index: 1;}
.triangleBg.top{ top: 0; z-index: 0;}
.triangleBg.whiteR:after{content:''; position: absolute; height: 17em; width: 100vw; background-color: #FFF; transform: translateY(-50%) skewY(-10deg);}
.triangleBg.whiteL:after{content:''; position: absolute; height: 17em; width: 100vw; background-color: #FFF; transform: translateY(-50%) skewY(10deg);}
.triangleBg.blackR:after{content:''; position: absolute; height: 17em; width: 100vw; background-color: #3f3a39; transform: translateY(-50%) skewY(-10deg);}
.triangleBg.blackL:after{content:''; position: absolute; height: 17em; width: 100vw; background-color: #3f3a39; transform: translateY(-50%) skewY(10deg);}

{content:''; position: absolute; height: 17em; width: 100vw; background-color: #bc4d37b5; transform: translateY(-50%) skewY(10deg);}

.slideTool{ position: relative; z-index: 2;}
.slideTool .slideMask{ overflow: hidden; margin: auto;}
.slideTool .fullBox li{ float:left;}
.switchBtn { position: absolute; top: 50%; width: 100%;}
.switchBtn .iconA{position: absolute; top: 50%; transform: translateY(-50%); width: 1.7em; padding: 3em 0; text-align: center; background-color: #c59c53;}
.switchBtn .iconB{position: absolute; top: 50%; transform: translateY(-50%); width: 1.7em; padding: 3em 0; text-align: center; background-color: #000;}
.switchBtn .left{ left:0;}
.switchBtn .right{ right:0;}
.switchBtn img{ height:1.6em;}
.slideDot{text-align: center; position: relative; top: 2em;}
.slideDot a{ display:inline-block; width:2em; height:0.3em; background-color:#CCC;}
.slideDot a.use{ background-color:#c59c53;}

#topBar{position: fixed; z-index: 99;}
#topLogo{ width: calc(100vw - 4em); background: #000; padding: 1em 2em; position: relative; bottom: 4em; transition: all 0.7s;}
#topLogo img{ height:2em;}
#mainMenuSwitch{ display:none;}
#mainMenu{position: fixed; right: 0; top: 15vh; background-color:#FFF; transition: none;}
#mainMenu li{}
#mainMenu li a{display: inline-block; padding: 0.5em 3em 0.5em 1em; background-color: #FFF; font-weight: bold; transition:all 0.2s; color: #3f3a39; text-align: center;}
#mainMenu li a:hover{ color:#FFF;
background: rgb(198,156,84);
background: -moz-linear-gradient(-45deg,  rgba(198,156,84,1) 46%, rgba(224,181,83,1) 77%, rgba(196,143,58,1) 78%, rgba(196,143,58,1) 78%, rgba(198,156,84,1) 100%); 
background: -webkit-linear-gradient(-45deg,  rgba(198,156,84,1) 46%,rgba(224,181,83,1) 77%,rgba(196,143,58,1) 78%,rgba(196,143,58,1) 78%,rgba(198,156,84,1) 100%); 
background: linear-gradient(135deg,  rgba(198,156,84,1) 46%,rgba(224,181,83,1) 77%,rgba(196,143,58,1) 78%,rgba(196,143,58,1) 78%,rgba(198,156,84,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c69c54', endColorstr='#c69c54',GradientType=1 );}

#mainMenu li:nth-child(1){ display:none;}
#footer{position: relative; background-color: #c59c53; padding: 2em; text-align: center;}
#footer img{width: 17em; margin-bottom: 2em;}
#footer p{color: #FFF; font-size: 0.8em;}
#footer p span{ display:inline-block;}



.popup {position: fixed; z-index: 99;}
.popup .whiteBox{  position: fixed; z-index:1; background-color: #FFF; height: 100%; width: 65%; right: -65%; display:none;}
.popup .bar{border-bottom: 1px #DDD solid; position: relative; height:3em;}
.popup .bar:after{ content:''; display:block; width: 0.6em; height: 100%; background-color: #c59c53; position: absolute; top: 0;}
.popup .bar h2{font-family: 'welcome'; font-weight: 100; color: #3f3a39; font-size: 1.4em; position: absolute; top: 50%; left: 1.5em; transform: translateY(-50%);}
.popup .bar a{position: absolute; right: 1em; height: 1.6em; top: 50%; transform: translateY(-50%);cursor:pointer;}
.popup .bar a img{height: 100%;}
.popup .sBtn {position: absolute; background-color: #FFF; height: calc(100% - 3em); width: 3em;}
.popup .sBtn.left{border-right: 1px #DDD solid; left: 0;cursor:pointer;}
.popup .sBtn.right{border-left: 1px #DDD solid; right: 0;cursor:pointer;}
.popup .sBtn img{height: 1.8em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popup .content{height: calc(100% - 3em); margin: 0 3em;}
.popup .content .frame{width: 100%; height:calc(100vh - 3em); border: 0;overflow-y: auto;}
.popup .bkbg{position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none;}

#popupContent .photo{max-height: 50vh; overflow: hidden;}
#popupContent .photo img{width: 100%;}
#popupContent .text{padding: 1em 1em 6em;}
#popupContent.teamMember .text h1{ margin:auto; width:max-content; max-width:100%;font-family: 'welcome'; font-weight: 100;font-size:32px;padding-bottom:16px;}
#popupContent.serviceDetail .text h1{ margin:auto; width:max-content; max-width:100%;font-family: 'welcome'; font-weight: 100;font-size:32px;padding-bottom:16px;}
#popupContent.newsDetail .text h1{ margin:auto; width:max-content; max-width:100%;font-family: 'Microsoft JhengHei'; font-weight: bold;font-size:18px;padding-bottom:16px;}
#popupContent .text h3{ margin:auto; width:max-content; max-width:100%;}
/*#popupContent .text p{ margin-top:1em; padding-bottom:5em;}*/
#popupContent .text a{ color: #006ec5; text-decoration: underline;}

#popupContent.teamMember .photo{ height:100vw; text-align: center; background-color: #000;}
#popupContent.teamMember img{width: auto; height:100%;max-width: 100%;}
#popupContent.teamMember .text p{ text-align:center;font-size:16px}
#popupContent.teamMember .text .date{display:none;}
#popupContent.serviceDetail .text p{ font-size:16px}
#popupContent.serviceDetail .text .date{display:none;}
#popupContent.newsDetail .text p{ font-size:16px}
#popupContent.newsDetail .text .date{ text-align: right; padding-bottom: 0.5em; font-size: 12px; color: #888;}
#popupContent.serviceDetail{}
#popupContent.newsDetail{}

@media only screen and (max-width: 900px){
.read9{ font-size:1.33em;}
#popupContent.teamMember .photo{height:auto;}
#popupContent.teamMember img{width:100%;}
}
@media only screen and (max-width: 650px){
.read9{ font-size:3em;}
.popup .whiteBox{ width:100%; right:-100%;}

#mainMenuSwitch{ display:block; position: fixed; right: 3vw; top: 3vw; z-index:99;}
#mainMenuSwitch a{ display: block; width: 10vw; height: 10vw; position: absolute; right: 0;}
#mainMenuSwitch a.close{ display:none;}
#mainMenuSwitch.op a.open{ display:none;}
#mainMenuSwitch.op a.close{ display:block;}
#mainMenuSwitch img{ width:100%}
#mainMenu{top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); display:none;}
#mainMenu.use{ opacity: 1; right: 0;}
#mainMenu li{width: 100%; border-bottom: 1px solid #CCC;}
#mainMenu li:nth-child(1){ display:block; background-color:#000; padding: 1em 0;}
#mainMenu li:nth-child(1) a{width: 60%; display: block; margin: auto;}
#mainMenu li:nth-child(1) a:hover{ background: inherit;}
#mainMenu li:nth-child(1) a img{ width:100%;}
#mainMenu li a{padding: 0.8em 0; font-size: 1.3em; background-color: unset; width: 100%;}
}



/*==========HOME===========*/

#banner{ position: fixed; background-color: #000; height: 100vh; width: 100vw; background: center center no-repeat; background-size:cover; animation: banner 2s ease; animation-fill-mode:both; animation-delay: 0.5s;}
@keyframes banner{ 
	from{opacity:0;}
    to{opacity:1;}
}

#banner.home{ background-image:url(../images/banner1.jpg);}
#banner img{ position:absolute; left:10vw; top:15vw; width:30em;}
#banner.inBanner{height: 40em;}
#banner.inBanner img{ width: 22em;}
#banner.aboutBanner{ background-image:url(../images/banner2.jpg);}
#banner.aboutBanner img{ left: 50%; transform: translateX(-50%); top: 10vw; width: 16em;}
#banner.serviceBanner{ background-image:url(../images/banner3.jpg);}
#banner.newsBanner{ background-image:url(../images/banner4.jpg);}

#slogan{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -16em); z-index: 2;width: 100%; text-align: center; }
#slogan span{ color:#c59c53; display:inline-block; vertical-align:middle; font-size: 0.9em; margin: 0.3em; letter-spacing: 0.5em; font-family:'cambriab'; width: 10em;}
#slogan br.lay{ display:none;}
#slogan span.stemp{border: 0.5vw solid #c59c53; width: 6.5em; height: 6.5em; position: relative; font-size: 1.8em; }
#slogan span.stemp font{ line-height: 1.2em; position: absolute; width: 5em; text-align: center; left: 50%; top: 50%; color: #c59c53; transform: translate(-50%,-50%); letter-spacing:0; font-family:'welcome'; font-weight:100;}
#aboutUs{ position: relative; background-color: #FFF; z-index: 1; padding-top:2em; margin-top: 100vh;}
.contentBox{ position: relative; margin-bottom: 10em; z-index: 2;}
.contentBox img{ width: 58%;}
.contentBox::before{ content:'';display: block; width: 1.5vw; height: 100%; position: absolute; background-color: #c59c53; top: 0;}
.contentBox .txt{position: absolute; top: calc(100% - 7em); z-index: 1; width: 41vw; text-align: left; padding: 1em 4vw; background-color: #FFF;}
.contentBox h1{position: absolute; bottom: calc(100% + 1vw); font-size: 4.3em; line-height: 1em; font-family: 'welcome'; font-weight:100;color: #3f3a39; width: calc(100% - 8vw);}
.contentBox.left{ text-align: right;}
.contentBox.right{ text-align: left;}
.contentBox.Left::before{ left:0;}
.contentBox.Left .txt{ left:0; text-align: justify;}
.contentBox.right::before{ right:0;}
.contentBox.right .txt{ right:0; text-align: justify;}

#team{ position: relative; background-color: #FFF; padding: 8em 0 6em;}
#team .tag{ text-align: center; padding-bottom:3em;}
#team .tag h1{font-size: 3em; color: #3f3a39; font-family:'welcome'; font-weight:100;}
#team .tag span{font-size: 1.1em; letter-spacing: 0.5em; color: #c59c53;font-family:'cambriab';}
#team .slideMask{ width: 70vw; position: relative; z-index: 1;}
#team .fullBox li a{ display:block; margin: 0.4em; position:relative;cursor:pointer;}
#team .fullBox li a img{ width:100%}
#team .fullBox li a img:nth-child(1){ position:absolute; transition:all 0.3s;}
#team .fullBox li a:hover img:nth-child(1){ opacity:0;}
#team .fullBox li span{ font-size:0.9em; display:inline-block; margin:0 1em; vertical-align: sub;}
#team .fullBox li h2{ font-size:1.5em; display:inline-block; font-family: 'welcome'; font-weight:100; color: #3f3a39;}

#service{ position: relative; background-color: #FFF;}
#service .tag{ position: absolute; top: 39%; transform: translateY(calc(-50%)); left: 10vw; z-index: 2;}
#service .tag h1{ color: #FFF; font-size: 3em;font-family: 'welcome'; font-weight:100;}
#service .tag span{ font-size: 1.1em; letter-spacing: 0.5em; color: #FFF;font-family:'cambriab';}
#service .slideTool{ z-index:0;}
#service .fullBox li{ height: 55em; position: relative; background-position:center center; background-size:cover;}
#service .fullBox li:nth-child(1){ background-image:url(../images/service1.jpg);}
#service .fullBox li:nth-child(2){ background-image:url(../images/service2.jpg);}
#service .fullBox li:nth-child(3){ background-image:url(../images/service3.jpg);}
#service .fullBox li:nth-child(4){ background-image:url(../images/service4.jpg);}
#service .fullBox li:nth-child(5){ background-image:url(../images/service5.jpg);}
#service .fullBox li:nth-child(6){ background-image:url(../images/service6.jpg);}
#service .fullBox li:nth-child(7){ background-image:url(../images/service7.jpg);}
#service .fullBox li:nth-child(8){ background-image:url(../images/service8.jpg);}
#service .fullBox li:nth-child(9){ background-image:url(../images/service9.jpg);}
#service .fullBox li div{position: absolute; width: 16em; height: 13em; right: 15vw; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.6); padding: 1em;}
#service .fullBox li h2{color: #FFF; font-size: 1.7em; font-family: 'welcome'; font-weight:100; margin-bottom: 0.3em;}
#service .fullBox li p{color: #FFF; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}
#service .fullBox li a{ position: absolute; bottom: 1em; width: calc(100% - 4em); text-align: center;}
#service .more{position: absolute; bottom: 3em; text-align: center; width: 100%; z-index: 3;}
	
#news{ position: relative; background-color: #3f3a39; padding: 6em 0; z-index: 1;}
#news .tag{ text-align: center; padding-bottom:3em;}
#news .tag h1{font-size: 3em; color: #FFF;font-family: 'welcome'; font-weight:100;}
#news .tag span{font-size: 1.1em; letter-spacing: 0.5em; color: #FFF;font-family:'cambriab';}
#news .fullBox{width: 70vw; margin: auto; position: relative;}
#news .fullBox li{ width: 33.33%; float: left; margin: 1em 0;}
#news .fullBox .pic{}
#news .fullBox .pic a{display: block; margin: 0 0.4em; overflow: hidden; position: relative; width: calc(100% - 0.8em);cursor:pointer; }
#news .fullBox .pic a:after{ content:''; display:block; padding-top: 56.25%;}
#news .fullBox .pic img{ width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition:all 0.2s;}
#news .fullBox .pic img:hover{transform: translate(-50%, -50%) scale(1.3);}
#news .fullBox .info{margin: 0 0.4em; padding: 1em; background-color: #FFF; height: 8em;}
#news .fullBox .info a{font-size: 1.1em; color:#3f3a39; line-height:1.7em; font-weight: bold; display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;cursor:pointer;}
#news .fullBox .date{color: #FFF; font-size: 0.8em; margin: 0 1em; display: inline-block;}
#news .more{padding-top: 3em; text-align: center;}

#contactUs{ position: relative; background-color: #FFF; height: 20em;}
#contactUs .map{width: 50%; height: 100%; float: left;}
#contactUs .list{width: calc(50% - 4em); float: right; height: calc(100% - 4em); padding:2em;}
#contactUs .tag{ padding-bottom:1em;}
#contactUs .tag h1{font-size: 2.2em; color: #3f3a39; display: inline-block;font-family: 'welcome'; font-weight:100;}
#contactUs .tag span{font-size: 1.1em; letter-spacing: 0.3em; color: #3f3a39; margin: 0 0.5em;font-family:'cambriab';}
#personalInfo{width: calc(45% - 1em); float: left; margin: 0.5em;}
#personalInfo span{display: inline-block; width: 3em; vertical-align: middle; color:#3f3a39;}
#personalInfo input{vertical-align: middle; background-color: #EEE; border: 0; padding: 0.2em; font-size: 1em; width: calc(100% - 3.4em); margin: 0.3em 0;}
#personalMessage{width: calc(55% - 1em); float: left; margin: 0.5em;}
#personalMessage textarea{vertical-align: middle; background-color: #EEE; border: 0; padding: 0.2em; font-size: 1em; width: calc(100% - 0.4em); height: 6em; margin: 0.3em 0;}
#contactUs .send{ text-align:right; margin:0.5em;}
#contactUs .send a.typeA{letter-spacing: 0.2em;}

@media only screen and (max-width: 900px){
#aboutUs .contentBox h1{font-size: 3.5em;}
#team .slideMask{ width: 90vw; }
#news .fullBox{width:90%;}
}
@media only screen and (max-width: 650px){
#slogan {transform: translate(-50%, -18em);}
#slogan br.lay{ display:block;}

#banner img{width:70vw !important;}
#banner.aboutBanner img{ width: 40vw !important;}
#banner.inBanner{height: 35em;}
.contentBox{ margin-bottom: 3em;}
.contentBox img{ width: 90%;}
.contentBox h1{position: relative; font-size: 3em; padding-bottom:0.3em; width:auto;}
.contentBox .txt{position: relative; width: calc(100% - 5em); margin:auto;}
#service .tag {top: 30%;}
#service .fullBox li{ height: 50em;}
#service .fullBox li div { right: 50%; transform: translate(50%, -25%);}
#news .fullBox li{ width: 100%;}
#contactUs{ height: auto;}
#contactUs .list{width: calc(100% - 4em); height: auto;}
#contactUs .map{ width: 100%; height: 20em;}
#personalInfo { width: calc(100% - 1em);}
#personalMessage { width: calc(100% - 1em);}
}

/*==========inpage===========*/
.topSection{margin-top: 40em !important; padding: 0 0 3em !important;}
.inpageTag{position: absolute !important; top: -23vw !important; left: 8vw !important; text-align: left !important; padding-bottom: 0 !important; transform: none !important;}
.inpageTag:after{ content:''; position:absolute; height:100%; width:1em; top: 0; left:-1em; background-color:#c59c53;}
.inpageTag h1{ padding: 3em 3vw 0.2em; border-bottom: 1px solid #FFF;}
.inpageTag span{ font-size: 1.5em; letter-spacing: 0; padding: 0.2em 3vw; display: block;}
.inpageTag.bkTxt h1{ color:#3f3a39 !important; border-bottom: 1px solid #3f3a39;}
.inpageTag.bkTxt span{ color:#3f3a39 !important;}

#aboutBanner2{ position: relative; background-color: #000; height: 50em; width: 100vw; background: url(../images/about6.jpg) center center no-repeat; background-size: cover;}
#aboutBanner2 #slogan{ top: 50%; left: 50%; transform: translate(-50%, -30%);}
#aboutBanner2 #slogan span{ color:#FFF;}
#aboutBanner2 #slogan span.stemp{border: 0.5vw solid #FFF;}
#aboutBanner2 #slogan span.stemp font{ color: #FFF;}

.openTxt{position: relative; width: 70vw; margin: auto; text-align: center; margin-bottom: 2em;}
.openTxt h2{ font-size:1.6em; font-family: 'welcome'; font-weight: 100; color:#c59c53; line-height: 1.4em;}
.openTxt P{}
.serviceList{position: relative; background-color:#333; width: 100%;}
.serviceList a{display:block; width:33.33%; height:8em; float:left; position:relative;font-size:1.6em;font-family:'welcome'; background:center center no-repeat; background-size:cover;cursor:pointer;}
.serviceList a:after{ content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.3); transition:all 0.3s;}
.serviceList a:hover:after{background-color:rgba(0,0,0,0);}
.serviceList a span{color: #FFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);z-index: 1;}
.serviceList a:nth-child(1){ background-image:url(../images/service1.jpg);}
.serviceList a:nth-child(2){ background-image:url(../images/service2.jpg);}
.serviceList a:nth-child(3){ background-image:url(../images/service3.jpg);}
.serviceList a:nth-child(4){ background-image:url(../images/service4.jpg);}
.serviceList a:nth-child(5){ background-image:url(../images/service5.jpg);}
.serviceList a:nth-child(6){ background-image:url(../images/service6.jpg);}
.serviceList a:nth-child(7){ background-image:url(../images/service7.jpg);}
.serviceList a:nth-child(8){ background-image:url(../images/service8.jpg);}
.serviceList a:nth-child(9){ background-image:url(../images/service9.jpg);}

#loadingIMG{position:fixed;top:0;left:0;right:0;bottom:0;background: rgba(0, 0, 0, 0.5);z-index:999999;}
#loadingIMG span{position:absolute;top:50%;left:50%;}

@media only screen and (max-width: 900px){
.inpageTag{ top:-32vw !important;}
.serviceList a{ width: 50%; height: 30vw;}
}
@media only screen and (max-width: 650px){
.topSection{margin-top: 35em !important;}
.inpageTag{ top:-67vw !important;}
.openTxt {width: 80vw;}
.serviceList a{ width: 100%; height: 60vw;}
}