@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;900&display=swap');
/*top button*/
html {scroll-behavior: smooth} @media screen and (prefers-reduced-motion: reduce) {html {scroll-behavior: auto}}
a.top {position:absolute;top:0;right:30px;width:12px;writing-mode: vertical-lr;text-orientation:mixed;color: #6a6a6a;padding: 11em 0 0;font-family: Myriad Pro}
a.top:before {position: absolute;top:0;content:"";right:6px;width: 1px;height: 10em;background-color: #6a6a6a}
.sp {display: none!important;}

html, body, h1, h2, h3, h4, h5, h6, p, a {font-family: Microsoft JhengHei, sans-serif, Arial, Helvetica, sans-serif;font-size: 100%;margin: 0;}
a {text-decoration: none;outline: medium none;hlbr: expression(this.onFocus=this.blur());}
ul {padding:0;list-style-type: none;}
a, a:active, a:focus, a:hover{outline: none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;text-decoration: none;}

body {overflow-x: hidden;background: #efefef;}
header {position: absolute;left:50%;width: 100%;z-index: 5;max-width:1920px;margin: 0 auto;transform: translateX(-50%);box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);}
header > div {height: 95px}
header .inner {position: relative;width: 100%;max-width: 90%;}
.navbar {display:none}
.navbar-inverse {background-color: transparent;border-color: transparent;margin:0;border:none}
.navbar-inverse .navbar-nav>li>a {color:#fff;padding:12px 35px}
.logo {position:absolute;top:0;left:15px;color: #fff;width: 230px;height: 230px;;text-align: center;z-index: 99;}
.logo:hover {color: #1a1a1a}
.logo img {position: absolute;top:50%;left:50%;max-width:294px;vertical-align:top;display: inline-block;transform: translate(-50%, -50%);}
.logo a {display: block;width: 100%;height: 100%;color: #1a1a1a}
.overlay {height: 0%;width: 100%;position: fixed;z-index: 10;top: 0;left: 0;background-color:#2a2a2a;overflow-y: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 25%;width: 100%;text-align: center;margin-top: 30px;}
.overlay a {padding: 8px;text-decoration: none;font-size: 36px;color: #818181;display: block;transition: 0.3s;}
.overlay a:hover, .overlay a:focus {color: #bc0d23;}
.overlay .closebtn {position: absolute;top: 20px;right: 45px;font-size: 60px;}
.mobile {display:none!important;}
.brand-logo {position:absolute;top:0;left:10%;z-index:9}
.btn-cart {position: absolute;right: 15px;top:50%;width: 36px;height: 36px;display: inline-block;background: #815839 url(../img/icon-cart.svg) no-repeat center;background-size: 28px;border-radius: 99px;transform: translateY(-50%)}

#menubox {position: absolute;bottom:0;right: 0;display: block;width:80%;z-index: 9;font-size: 16px}
ul.unit-menu {display: block;text-align:right;position: relative;margin:0;line-height: 95px;}
ul.unit-menu li {position: relative;display:inline-block;min-width: 95px;}
ul.unit-menu a {position: relative;display:inline-block;padding: 0 1.58rem;color:#fff;font-size:18px;letter-spacing: 1.65px;vertical-align: bottom;font-family: Microsoft JhengHei, cursive;}
ul.unit-menu li:hover span, ul.unit-menu a.active {color: #fccf03}
ul.unit-menu span {position: relative;height: 18px}
ul.unit-menu i {font-size: 1.25em;}
ul.unit-menu ul {padding: 0;line-height: 1}
ul.unit-menu ul li {display: block;width: 100%;}
ul.unit-menu ul a {display: block;width: 100%;line-height: 1!important;}

/* 右側快選 */
.btn-link {position: fixed;bottom: calc(100% - 50vh);right: 15px;z-index: 1;width: 64px;z-index: 99;transition: .3s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transform: scale(1.1);-webkit-transform: scale(1.1);}
.btn-link img {max-width: 32px;margin: -3px auto 0;}
.btn-link a {display: block;background: #947061;line-height: 64px;border-radius: 100em;text-align: center;margin-bottom: .5em;color: #fff;}
.btn-link a:hover {background: #947061;transition: .3s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);}
.btn-link span {display: none;}
/*.btn-link a.fb:hover {background: #3282f4;}
.btn-link a.tel:hover {background: #fbbc04;}
.btn-link a.line:hover {background: #00cc1d;}
.btn-link a.map:hover {background: #ea4335;}*/


.dropdown-menu {position: absolute;top:100%;left:inherit;display: none;float: none;min-width: inherit;padding: 0;margin: 0;font-size: 1rem;color: inherit;text-align: left;list-style: none;background-color: rgba(0, 0, 0, 0.5);background-clip: padding-box;border: none;border-radius: 0;width: 230px;}
.dropdown:hover .dropdown-menu {position: fixed;top:100%;left:inherit;opacity:1;visibility:visible;opacity: 1;transition: .3s}
.dropdown .navbox {background-color: #bc0d23;position: fixed;left:0;top:120px;width: 100vw;height: 65px;display: none;}
.dropdown-menu a {color: #fff!important;display: inline-block;padding:20px 18px!important;}
.dropdown-menu a:hover {background: transparent;padding:20px 18px!important;color: #e70e12!important;}

#menubox .nav_contact {display: block;border-radius: 99px;line-height: 42px;color:#fff;padding:0 30px 0 56px;text-align: center;position: absolute;top:50%;right: 2%;fbackground-size:21px;background: #f3b024 url(../img/icon_letter.svg) no-repeat 26px center;background-size:21px;}

#loading {position:fixed;left:0;top:0;width:100%;height:100vh;z-index:999;text-align: center;}
#loading img {position: absolute;top: 40%;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);z-index: 999;display: inline-block;border-radius: 99rem;border: 2px #facc80 solid;}
#content-wrapper {visibility:hidden;max-width: 1920px;margin: 0 auto;}
.filmbox {position: relative;height: calc(100vh - 95px);margin-bottom: 0;overflow: hidden;}
.filmbox video {position: absolute;top: 50%;display: block;left: 50%;z-index: 1;width: auto;min-width: 100%;min-height: 100vh;transform: translate(-50%, -50%);}
#btn-back-to-top {position: fixed;bottom: 88px;right: 15px;display: none;border-radius: 99px;background: #485d68;border: none;width: 64px;height: 64px;line-height: 64px;vertical-align: middle;padding: 0;z-index: 9;}
#btn-back-to-top:focus {outline: none!important;box-shadow: none!important;}
#btn-back-to-top img {vertical-align: baseline;}

/* vision */
.vision {position: relative;vertical-align: middle;padding:0;text-align: right;overflow: hidden;max-height:1030px;}
.vision .title-area {position: absolute;top: 40%;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);color: #fff;width: 80%;text-align: left;font-family: 'Lato', sans-serif;}
.vision .title-area p {font-size: 4em;font-family: 'Bebas Neue', cursive;}
.vision img {max-width: 100%;}
.vision .titlebox {position: absolute;bottom: 120px;left: 5%;color: #fff;z-index: 9;text-align:left;line-height: 1.28;}
.vision .titlebox p {font-size: 6.6vw;font-weight: bold;-webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.2));filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.2));font-family: 'Open Sans', sans-serif;}
.vision .subject {text-align: right;}
.vision .subject span {display: block;width: 100%;margin: 0 0 -1.5rem;letter-spacing: 5px;font-size: .825em;font-weight: 500;}
.vision .carousel-indicators {background: #fff;margin:0;padding: 32px 0;}
.vision .carousel-indicators li {border-radius: 99em;width: 16px;height: 16px;background: #d1d1d1;border:none;margin:0 5px;}
.vision .carousel-indicators li.active {background: #52c1e0}
.vision a.downbox {position: absolute;bottom: 96px;left: 50%;min-height:56px;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);color: #fff;z-index: 9;width: 426px;z-index: 9;background: url(../img/icon_down.svg) no-repeat center bottom;background-size: 11px;}
.vision .inner {position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);color: #fff;z-index: 9;}
.vision .inner h1 {font: bold 3.75em/1 Inria Sans}
.vision  p.txt {position: absolute;right: 20px;top: 50%;width: 16px;font-size: small;color:#fff;z-index: 3;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;transform: translateY(-50%);letter-spacing: 3px;font-family: 'Open Sans', sans-serif;text-align: left}

.banner {min-height: 200px;}
.banner .title-area {position: absolute;top: 40%;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);color: #333;width: 80%;text-align: center;font-family: 'Lato', sans-serif;padding-top: 95px;}

.title-box {text-align: center;}
.title-box span {font-size: 2.5em;font-family:font-family: 'Open Sans', sans-serif;font-weight: 200;color: #808080;}
.title-box h1 {font-size: 1.5em;margin: 0;letter-spacing: 5px;font-weight: 500;}

.EditBox {text-align: left;padding: 2em 1em;border-top: 1px solid #dee2e6;}
.EditBox h1 {font-size: 1.5em;margin:0 0 16px;}
.EditBox p {word-break: break-all;margin: 0 0 1em;line-height: 1.8;color: #6a6a6a;}
.EditBox span.date {font-size: small;color: #868686;}
.EditBox img {max-width: 100%;margin:0 auto 1.25em;}
.EditBox .btnBox {margin:2em 0 0;text-align: center;}
.EditBox a.back {display: inline-block;width: 188px;background: #1d1d1f;color: #fff;text-align: center;border-radius: 99em;padding: 12px 36px;font-size: .825em;margin: 1em 0 0;}

#nav-tab {border:none;margin:0 0 66px;}
#nav-tab .nav-link {border-radius:0;text-align: center;background: #868994;line-height: 46px;color: #fff;border:none;margin: 0 .5px;}
#nav-tab .nav-link.active {background: #97bd12}
#nav-tab .owl-unit01 {margin:0;}


main {position: relative;top:0;padding: 0;max-width: 1200px;margin: 0 auto;overflow: hidden;font-size: 18px;}
main .container-fluid {padding: 0;background: #fff;}
main .container {max-width: 1200px;margin:0 auto;}
main .contentArea {position: relative;max-width: 1200px;margin:0 auto;}
.titleBox {position: relative;font-size: 3.45em;padding:0 0 30px;margin:0 0 46px;letter-spacing: .03em;color: #4c4948;max-height: 104px}
.titleBox:after {position: absolute;left:0;bottom:0;content: "";background: #dd3324;width: 100%;height: 2px}
.unit {position: relative;text-align: center;}
.unit h2 {color: #815839;font-size: 3rem;text-align: center;}
/*.unit h2, .unit p {display: none;}*/
.unit img.title {max-width: 50%;}
.unit img {display: inline-block;max-width: 100%;}
.unitA {position: relative;z-index: 2;}
.unitA .contentArea {position: relative;background: url(../img/unit01-bg.jpg) no-repeat left top;min-height: 852px;}
.unitA .brand-area {position:absolute;right: 5%;top: 50%;width: 192px;transform: translateY(-50%);}
.unitA .case-name {position:absolute;left: 50%;top: 116px;}
.unitA .txt01 {position:absolute;left: 38%;top: 74px;transform: translateX(-50%);writing-mode:vertical-rl;text-orientation:upright;}
.unitA .txt02 {position:absolute;left: 40%;bottom: 11%;max-width: 328px;}
.unitA .txt03 {position:absolute;left: 52%;bottom: 5%;max-width: 156px;}
.unitA .pic01 {position:absolute;right: 5%;top: 36%;text-align: left;}
.unitB {position: relative;min-height: 850px;background: url(../img/unit02-bg.jpg) no-repeat center;}
.unitB .contentArea {min-height: 850px;}
.unitB .txt01 {position:absolute;left: 20%;bottom: 18px;max-width: 710px;color: #cfbdac;}
.unitB .pic01 {position:absolute;right: 5%;top: 37%;width: 192px;transform: translateY(-50%);}
.unitB .box-area {position:absolute;left: 5%;top: 50%;transform: translateY(-50%);display: flex;flex-direction: row;max-width: 820px;}
.unitB .box-area .box {position:relative;margin: 0 5px;padding: 0 0 20px;flex: 1;align-items: stretch;}
.unitB .box-area .box:after {position: absolute;bottom: 6px;left: 0;content: '';background: url(../img/unit02-box-shadow.png) no-repeat center;width: 100%;height: 20px;z-index: -1;}
.unitB .box-area .box img {width: 100%;}
.unitB .box-area .txtBox {padding: 10px 40px 26px;text-align: left;color: #916f61;background: #fff;min-height: 266px;}
.unitB .box-area .txtBox h3 {font-weight: 600;text-align: center;min-height: 65px;}
.unitB .box-area .txtBox span {font-size: small;}
.unitB .box-area .txtBox p {font-size: 13px;padding-top: 5px;}
.unitC {min-height:850px;}
.unitC .contentArea {min-height: 850px;background: url(../img/unit03-bg.jpg) no-repeat center;}
.unitC .txt01 {position:absolute;left: 42px;top: 45%;max-width: 238px;}
.unitC .txt02 {position:absolute;left: 60px;bottom: 20px;max-width: 710px;}
.unitC .pic01 {position:absolute;right: 8%;top: 35%;width: 558px;transform: translateY(-50%);}
.unitD .contentArea {min-height: 850px;background: url(../img/unit04-bg.jpg) no-repeat center top;}
.unitD .txt01 {position: absolute;left: 10%;top: 45%;color: #cfbdac;text-align: left;}
.unitD .txt02 {position: absolute;left: 50%;bottom: 18%;;color: #cfbdac;}
.unitD .pic01 {position:absolute;right: 5%;top: 50%;width: 192px;transform: translateY(-50%);}
.unitD .pic02 {position:absolute;left: 10%;top: 5%;width: 455px;}
.unitD .pic02:after {position: absolute;bottom: -15px;left: 0;content: '';background: url(../img/unit04-box-shadow.png) no-repeat center;width: 100%;height: 20px;z-index: -1;}
.unitD .pic03 {position:absolute;left: 35%;top: 32%;width: 455px;z-index: 5;}
.unitD .pic03:after {position: absolute;bottom: -15px;left: 0;content: '';background: url(../img/unit04-box-shadow.png) no-repeat center;width: 100%;height: 20px;z-index: -1;}
.unitD .pic04 {position:absolute;left: 8%;bottom: 8%;width: 470px;}
.unitD .pic04:after {position: absolute;bottom: -15px;left: 0;content: '';background: url(../img/unit04-box-shadow.png) no-repeat center;width: 100%;height: 20px;z-index: -1;}
.unitE .contentArea {min-height: 850px;background: url(../img/unit05-bg.jpg) no-repeat center;}
.unitE .txt01 {position:absolute;right: 7%;top: 35%;max-width: 514px;}
.unitE .txt02 {position:absolute;left: 35px;top:44%;max-width: 258px;}
.unitE .pic01 {position:absolute;Left: 0px;top: -120px;max-width: 580px;}
.unitF .contentArea {min-height: 850px;background: url(../img/unit06-bg.jpg) no-repeat center;}
.unitF .txt01 {position:absolute;left: 100px;top: 168px;max-width: 466px;}
.unitF .txt02 {position:absolute;left: 120px;top: 320px;max-width: 432px;}
.unitF .pic01 {position:absolute;right: 60px;top: 50%;max-width:192px;transform: translateY(-50%);}
.unitF .pic02 {position:absolute;right: 28%;top: 33%;max-width:32px;overflow: hidden;}
.unitG {background: #3a3a3a;}
.unitG .contentArea {min-height: 850px;background: url(../img/unit07-bg.jpg) no-repeat center;}
.unitG .pic01 {position:absolute;left: 45%;top: 10%;width: 192px;transform: translateX(-50%);}
.unitG .pic01 img {width: 100%;}
.unitG .pic02 {position:absolute;left: 60px;top:20%;max-width: 88px;}
.unitG .pic03 {position:absolute;left: 30%;bottom:10%;max-width: 365px;z-index: 9;animation-delay: 1s;}
.unitG .txt01 {position:absolute;left: 0;bottom: 10px;color: #cfbdac;width: 100%;text-align: center;}
.unitG .txt02 {position:absolute;left: 60px;top: 12%;}
.unitG .txt01 a {color: #cfbdac;font-size: 1em!important;}
.unitH .contentArea {min-height: 850px;background: #485d68 url(../img/unit08-bg.png) no-repeat top left;}
.unitH .pic01 {position:absolute;left: 50%;top: 10%;width: 80%;max-width: 1150px;transform: translateX(-50%);}
.unitH .pic02 {position:absolute;right: 10%;top:5%;max-width: 126px;}
.unitH .txt01 {position:absolute;right: 10%;top: 21.5%;width: 120px;overflow: hidden;}
.unitH .txt02 {position:absolute;left: 5%;bottom: 10%;width: 358px;overflow: hidden;}
form.simple-form.white:not(.none-style) {padding: 0;box-shadow: none;border-radius: 0;}
form.simple-form.white input.error {background: #fff;border: 1px #ff4081 solid;}
form.simple-form.white input.error {border: 2px #ff4081 solid!important;}
.unitI input, .unitI textarea {border: 1px #dfdfdf solid!important;background-color: #fff!important;}
.unitI input {width: 100%;border: 1px #efefef solid;padding: 5px;margin: 0 0 .5em;color: #4a4a4a!important;border-radius: 0!important;}
.unitI textarea {width: 100%;border: 1px #efefef solid;background: transparent!important;padding: 5px;color: #3a3a3a!important;min-height: 100px;border-radius: 0!important;}
.unitI button {background: #3a3a3a!important;display: block;width: 100%;border-radius: 0!important;color: #000;padding: 8px;border: none;}
.unitI label {width: 100%;}
.unitI input.simple-consent-checkbox{width: auto!important;color: #fff}
.unitI label.custom-checkbox-label {font-size: .8em!important;color: #3a3a3a!important;margin: 10px 0 0!important;text-align: left;}
.unitI label.custom-checkbox-label a {color: #fff!important;}
.unitI .f-logo {padding-top: 50px;}
::-webkit-input-placeholder {color: #3a3a3a!important;}
:-ms-input-placeholder {color: #3a3a3a!important;}
::placeholder {color: #3a3a3a!important;}
.sliderBox-set01 {position: relative;}
.sliderBox-set01 .owl-dots {position: absolute;top: -35px;left: 0;width: 100%;}
.sliderBox-set01 .owl-dots span {background: #e1e1e1;border: 1px #e1e1e1 solid;width: 12px;height: 12px;}
.sliderBox-set01 .owl-dots button.active span {background: #a1a1a1;border: 1px #e1e1e1 solid;width: 12px;height: 12px;}
.sliderBox-set02 {padding: 0 15px;margin: 0 auto 2em;}
.sliderBox-set02 .owl-carousel {border-radius: 26px;overflow: hidden;}

.sliderBox-set02 .owl-nav {position: absolute;top: calc(50% - 20px);left: 0;display: block;width: 100%;}
.sliderBox-set02 .owl-nav button {width: 50%;float: left;}
.sliderBox-set02 .owl-nav span {display: inline-block;background: rgba(0, 0, 0, .5);width: 40px;line-height: 40px;text-align: center;border-radius: 99px;color: #fff;}
.sliderBox-set02 .owl-nav .owl-prev {text-align: left;}
.sliderBox-set02 .owl-nav .owl-next {text-align: right;}

.sliderBox-set02 img {}
.sliderBox-set02 .owl-dots {display: none;}
.sliderBox-set03 {position: absolute;top: 62%;left: 50%;width: 80%;padding: 0 15px;transform: translateX(-50%);}
.sliderBox-set03 .owl-nav {position: absolute;top: 40%;left: -5%;display: block;width: 110%;}
.sliderBox-set03 .owl-nav button {width: 50%;float: left;}
.sliderBox-set03 .owl-nav span {display: inline-block;background: rgba(0, 0, 0, .5);width: 40px;line-height: 40px;text-align: center;border-radius: 99px;color: #fff;}
.sliderBox-set03 .owl-nav .owl-prev {text-align: left;}
.sliderBox-set03 .owl-nav .owl-next {text-align: right;}
.sliderBox-set03 .owl-dots {display: none;}
.sliderBox-set04 {position: absolute;top: 43%;width: 1200px;padding: 0 15px;}
.sliderBox-set04 .owl-dots span {background: #fff;border: 1px #fff solid;width: 10px;height: 10px;}
.sliderBox-set04 .owl-dots button.active span {background: #9e9f9f;border: 1px #9e9f9f solid;}
/*輪播*/
.owl-nav {display: none;}
.owl-carousel {max-width: 1458px;margin: 0 auto;}
.owl-carousel .owl-dots.disabled {display: block;text-align: center;margin-top: 1em;}
.owl-dots {text-align: center;}
.owl-dots button {display: inline-block;margin:0 5px;}
.owl-dots button.active span {background: #bfa367;}
.owl-dots span {display: block;width: 8px;height: 8px;background: transparent;border-radius: 10px;border: 1px #bfa367 solid;}

/* 右側快選 */
.float_right_box {position: fixed;right:20px;top:5%;width: 72px;z-index: 9}
.float_right_box a {width: 72px;height: 72px;display: block;border-radius: 99px;text-align: center;color: #bfa367;border: #bfa367 3px solid;position: relative;background: #2a2a2a}
.float_right_box a:hover {transform: translateY(-8px)}
.float_right_box span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}


/*for ie10 、 ie11*/
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
#filebox a span {background-size: 50px;}
}

.open {position: relative;display: block;}
span.down {cursor: pointer;position: absolute;right:0;top:0;color: #c00d23;padding-right: 50px;font-size: 1.5em;display: inline-block;line-height: 2.2em}
span.down::after {position: absolute;right:0;top:0;width: 50px;height: 59px;background: url(../img/icon_down.svg) no-repeat 90% center;background-size: 30px;content: ""}
#unitbox {display: block;margin: 0 0 60px;display: none}

/* sideNav */
#sideNav {max-width: 300px;float: left;border: 5px #bfa367 solid;margin-right: 2em;background: #fff;}
#sideNav ul {margin:0;}
#sideNav ul li {border-bottom: 1px #e6e6e6 solid;padding: .5em 1em;text-align: left;}
#sideNav ul a {color: #074f77;font-size: 1.125em;padding:10px 0;display: block;font-weight: bold;}
#sideNav .imgBox {position: relative;width: 88px;height: 88px;display: inline-block;border: 1px #e6e6e6 solid;padding: 5px;text-align: center;margin-right: .5em;}
#sideNav img {max-height: 68px;vertical-align: middle;}

/*單元分類*/
ul.itembox  {text-align:center}
ul.itembox li {position: relative;display: inline-block;margin: 0 -2px}
ul.itembox li::before {position: absolute;top:0;left: 0;content:"";width: 1px;height: 1em;background-color: #e5e5e5}
ul.itembox li:last-child::after{position: absolute;top:0;right: 0;content:"";width: 1px;height: 1em;background-color: #e5e5e5}
ul.itembox a {font-size:1em;color: #3a3a3a;padding: 0 20px}
ul.itembox a:hover {color: #d7aa38}
ul.itembox a.active {color: #d7aa38}

/* 麵包屑 */

/* footer */
footer {position:relative;letter-spacing: .05vw;background: #202123;color: #606060;background: #1d1d1f url(../img/footer-bg.jpg) no-repeat center top;}
footer > div {padding: 0!important;}
footer .container {max-width: 1280px;}
footer .inner {padding: 10em 0 5em;}
footer .linkbox {text-align: right;}
footer .linkbox ul {display: block;width: 100%;text-align: right;}
footer .linkbox ul li {display: inline-block;margin-right: 1.8rem;flex: 1;text-align: center;}
footer .linkbox ul li:last-child {margin-right:0;}
footer .linkbox ul li > a {display:block;color: #fff;}
footer .linkbox a {margin-left: 12px;}
footer .linkbox img {vertical-align: text-top;}
footer .info-area {position: relative;top: 10px;display: inline-block;}
footer .info-area span {display: block;margin-top: 2rem;color: #fff}
footer .info-area p.adr {display: block;color: #fff;font-size: 1rem;}
footer .info-area p.tel {display: block;color: #fff;font-size: 1.75rem;}
footer a.tel {background: url(../img/icon-tel.png) no-repeat left center;padding-left: 26px;display: inline-block;color: #606060;font-family: 'Bebas Neue', cursive;font-size: 1.5em;}
footer ul a {color: #606060;padding: 0 0 15px;display: block;width: 100%;font-size: 18px;}
footer ul a:hover {color: #fff;opacity: .8}
footer .rightBox {position: absolute;top: -10em;right: 0;width: 40em;}
footer .copyright {text-align: center;background: #1a1a1a;padding: 2rem 0;}
footer .copyright a {color: #4a4a4a;}

.clearfix {width: 100%;}
.clearfix:after {content: "";display: block;clear: both;}


/* 單元選單 */
#nav_menu {width: 100%}
#nav_menu a.item {display: none;}

/* 分頁 */
.pagebox {width: 100%;}
.navigation {width: 100%;}
.pagination {justify-content:center!important;}
.page-link, .page-link:hover {color: #6a6a6a;} 
.page-link:hover {background: #efefef;}
.page-item.active .page-link {background: #1d1d1f;border-color: #1d1d1f;}

@media only screen and (max-width: 1200px) {
img.pc {display:none!important;}
img.sp {display:block!important;}
header {background-size: 100% 20px;}
header > div {background: #fff;height: 72px}
.navbar {display:block}
.logo, .unit-menu, header .search-container {display:none}
#nav_menu a.item {position: relative;margin: 0 15px 20px;background:#52c1e0;display: block;line-height: 50px;color: #fff;text-align: center;border-radius: 6px;}
#nav_menu .fa-angle-down {display: block;font-size: 15px;position: absolute;right: 10px;top: 50%;margin-top: -6px;}
#nav_menu .fa-angle-down:before {content: "\f107";}
#nav_menu .undefinedOver .fa-angle-down:before {content: "\f106";}
header {position:fixed;top:0;left:0;width: 100%;padding:0;z-index: 99;transform: inherit;}
header .container {padding:0;display: none;}
header .home {display:block;width: 100%!important;}
header.index {height: auto;}
header .contact, header .order, header .booking-line {display:block;}
header.page {height: auto;}
header .sp {position: inherit;}
header .search-container {height: 40px;width: 100%;display: block;margin:10px 0 0;}
header .search-container button, header .search-container input[type=text] {padding: 12px 10px;}
#menubox {display: none;height: 50px}
.navbar {margin-bottom:0;border:none}
.navbar-brand {position:fixed;top:0;left:0}
.navbar-inverse, .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background-color:transparent!important;}
.navbar-toggle {border:0;border-radius:0;z-index:99;margin:0;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {position: fixed;top: 0;left:0;width:100%;border:none;box-shadow:none;z-index:99;}
.navbar-collapse {margin:0!important;padding:0!important;}
.navbar-nav {padding:20px;margin:6em 0 1em;text-align:center;text-align: left;}
.navbar-inverse .navbar-nav>li {float:left;width:100%;padding:8px 1em;border-bottom: 1px solid #ececec;}
.navbar-inverse .navbar-nav>li>a {display:block;padding:0;font-size:1.88ex;color:#1a1a1a;letter-spacing: .1em;}
.navbar-inverse .navbar-nav>li span {display:block;width:100%;font-size:21px;color:#1a1a1a;letter-spacing: 1.65px;position: relative;}
.navbar-inverse .navbar-nav>li .item span::after {position: absolute;right: 15px;content: '+';color:#434343;}
.navbar-inverse .navbar-nav>li .undefinedOver span::after {position: absolute;right: 15px;content: '-';color: #1a1a1a;}
.navbar-inverse .navbar-nav>li ul {margin: 18px 0 0;display: none;}
.navbar-inverse .navbar-nav>li ul a {font-size: 1em;color: #6a6a6a;line-height: 32px;padding-left: 1em;}
.navbar-inverse .navbar-nav>li.language a {display: inline-block;padding-right: 10px;font-size: 21px;}
.navbar-top {display:none;}
.navbar-toggle .icon-bar {width: 27px;height: 1px;}
.navbar-toggle .icon-bar+.icon-bar {margin-top:8px;}
.navbar-inverse .navbar-nav, .navbar-inverse .navbar-nav>li {background:none}

.navbar-brand {position:relative;}
.navbar-inverse {background-color:#fff!important;padding:10px 0}
.brand-logo {padding: 0}
.brand-logo img {width:auto;height:48px}
.brandBox {position: relative;top:5em;left:30px;}
main .contentArea {padding: 0 15px;}
#navbarCollapse .infobox {padding: 0 2em}
#navbarCollapse .infobox a {font-size: 21px;color: #1a1a1a;}

.social {top:0;left:0}
.telbox {width:100%;text-align:center;margin: 20px 0 0}
.telbox span {position: relative;display:block;width:158px;margin:0 auto 12px;color:#fff;letter-spacing: 1.65px}
.telbox span:before {content: " ";position: absolute;bottom: 8px;left: 0;margin-left:0;width: 26px;height: 1px;background-color: #fff;}
.telbox span:after {content: " ";position: absolute;bottom: 8px;right: 0;margin-right:0;width: 26px;height: 1px;background-color: #fff;}
.telbox a {display:block;color:#f4df3a;font-size:28px}

.overlay {position: fixed;background: #fff;top: 0;left: 0;width: 100%;height: 0%;opacity: 0;visibility: hidden;-webkit-transition: opacity .35s, visibility .35s, height .35s;transition: opacity .35s, visibility .35s, height .35s;  overflow: hidden;z-index:99;border: 10px #815839 solid;}
.overlay.open {opacity: 1;visibility: visible;height:100%}
.button_container {position:fixed;top:20px;right:15px;height: 28px;width: 40px;cursor: pointer;z-index: 100;-webkit-transition: opacity .25s ease;transition: opacity .25s ease;z-index:999;background: transparent;}
.button_container:hover {opacity: .7;}
.button_container.active .top {
  -webkit-transform: translateY(12px) translateX(0) rotate(45deg);
          transform: translateY(12px) translateX(0) rotate(45deg);
  background: #1d1d1f;
}
.button_container.active .middle {opacity: 0;background: #FFF;}
.button_container.active .bottom {
  -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
          transform: translateY(-12px) translateX(0) rotate(-45deg);
  background: #1d1d1f;
}
.button_container span {background: #1d1d1f;border: none;height: 2px;border-radius: 20px;width: 100%;position: absolute;top: 0;left: 0;-webkit-transition: all .35s ease;transition: all .35s ease;cursor: pointer;}
.button_container span:nth-of-type(2) {top: 12px;}
.button_container span:nth-of-type(3) {top: 24px;}
}

/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
}

@media only screen and (max-width: 768px) {
body {overflow-x: hidden;background: #040000;}
a:focus, button {display:block}
*:focus {outline: none;}
.sp {display: block!important;}
.pc {display: none;}
#loading img {max-width: 168px;border-radius: 99rem;border: 2px #facc80 solid;}
header .infobox {text-align: center;}
header .infobox span {display: inline-block;vertical-align: middle;}
header .infobox .tel {font-size: 1em;font-weight: 600;margin: 0 0 .5rem;}
header .link {padding: 0 20px;text-align: center;}
header .link a {color: #216d36;font-size: 1.68em;margin:0 .5rem;}
header .language {text-align: center;}
header .language a {display: block;float: left;margin-right: 15px;}
header .language a.active {color: #e70e11;}
.container {max-width: 100%}
.row {display: block;}
img {max-width: 100%}

.float_right_box {display: none;}
.vision .title-area {top:15%;text-align: center;}
.vision .title-area p {font-size: 1.25em;}
.vision .title-area span {font-size: .9em;}


/* 首頁設定 */
.unit  {padding: 0;margin: 0;text-align: left;}
.unit h2, .unit p {display: block;}
.unit h2 {font-size: 2rem;line-height: 1.5;font-family: 'Noto Serif TC', serif;font-weight: 600;}
.unit img {max-width: 100%;}
.unit img.title {max-width: 80%;}
.contentArea {min-height: calc(100vh - 80px)!important;}
.unitA {margin: 0;text-align: center;}
.unitA .contentArea {background-size: contain!important;background: #81beda url(../img/unit01-bg-m.jpg) no-repeat center bottom;min-height: 80vh;}
.unitA .brand-area {width: 60%;right: 20%;top: 58px;transform: inherit;}
.unitA .brand-area img {width: 80%;}
.unitA .case-name {width: 60%;top: 25%;left: 50%;transform: translateX(-50%);}
.unitA .txt01 {left: 0%;top: 46%;width: 100%;transform: translateY(-50%);writing-mode: inherit;text-orientation: inherit;font-size: 1.25rem;}
.unitA .txt02 {left: 50%;transform: translateX(-50%);width: 80%;bottom: 30%;}
.unitA .txt03 {left: 48%;}
.unitA .pic01 {bottom: 0;right: 0;width:120px}.unitA .pic01 img {width: 100%;}
.unitB .contentArea {min-height: 380px;padding-top: 11rem;padding-bottom: 3rem;}
.unitB .box-area {flex-direction: column;position: static;transform: inherit;}
.unitB {padding: 0 10px;background: #485d68 url(../img/unit02-bg-m.jpg) no-repeat center top;background-size: contain;}
.unitB .pic01 {left:35%;top: 0;width: 30%;transform: translateX(-50%);padding: 2rem 0;}
.unitB .txt01 {position: absolute;bottom: 1rem;left: 10px;width: 80%}
.unitB .txt02 {max-width: 96%;left: inherit;top: 85%;right: 35%;}
.unitB .txt01 h2 {color: #161616!important;font-size: 1.25em!important;text-align: left;}
.unitB p {font-size: 14px;}
.unitC {min-height:80vh;}
.unitC .contentArea {background: #86b3ea url(../img/unit03-bg-m.jpg) no-repeat center bottom;background-size: contain;}
.unitC .pic01 {right: 10%;top: 40%;width: 80%;}
.unitC .txt01 {position: static;width: 100%;text-align: center;color: #fff;max-width: 100%;}
.unitC .txt01 p {font-size: 1.5rem;padding: 5rem 0 0;}
.unitC .txt02 {max-width: 80%;left: 28px;top: 216px;right: inherit;font-size: 1em!important;text-align: left;}
.unitD .contentArea {background-color: #42565f;}
.unitD .pic01, .unitD .pic02, .unitD .pic03, .unitD .pic04 {position: static;width: 100%;text-align: center;}
.unitD .txt01, .unitD .txt02 {position: static;width: 100%;padding: 2rem 15px;}
.unitD .pic01 {transform: inherit;padding: 2rem 0;}
.unitD .pic01 img {width: 50%;}
.unitD .txt01 {max-width: 80%;left: 10px;top: 80px;right: inherit;}
.unitD .txt01 h2 {color: #161616!important;font-size: 1.25em!important;text-align: left;}
.unitD .txt02 {max-width: 80%;left: 28px;top: 216px;right: inherit;font-size: 1em!important;text-align: left;}
.unitE .contentArea {background: #040000 url(../img/unit05-bg-m.jpg) no-repeat center top;background-size: cover;min-height: 600px!important;}
.unitE .pic01 {right: -20px;top: -46px;width: 55%;}
.unitE .txt01 {max-width: 90%;left: 5%;top: 36%;}
.unitE .txt01 h2 {color: #161616!important;font-size: 1.25em!important;text-align: left;}
.unitE .txt02 {max-width: 38vw;left: 50%;top: 10%;font-size: 1em!important;text-align: left;color: #161616!important;transform: translateX(-50%);}
.unitF .contentArea {background: #040000 url(../img/unit06-bg-m.jpg) no-repeat center top;background-size: cover;padding-bottom: 10px;}
.unitF .pic01 {right: inherit;left: 50%;top: 5.5vh;width: 24vw;transform: translateX(-50%);}
.unitF .pic02 {top: 27vh;max-width: 100%;}
.unitF .pic02 p {color: #fff;font-size: 1.25em;}
.unitF .txt01 {max-width: 80%;left: 10px;top: 34vh;right: inherit;}
.unitF .txt02 {max-width: 88%;left: 28px;top: inherit;bottom: 0;right: inherit;font-size: 1em!important;text-align: left;color: #161616!important;height: 42vh;}
.unitG .contentArea {background: #040000 url(../img/unit07-bg-m.jpg) no-repeat center top;background-size: contain;}
.unitG .pic01 {top: 3%;left: 50%;width: 28%;}
.unitG .pic02 {right: inherit;top: 35%;width: 12vw;}
/*.unitG .pic02 img {width: 70%;}*/
.unitG .pic03 {width: 65vw;left: 5%;bottom: 60px;}
.unitG .txt01 {left: 5%;bottom: 20px;text-align: left;color: #cfbdac;}
.unitG .txt01 a {color: #cfbdac;font-size: 1em!important;}
.unitH .contentArea {background-size: 80%;}
.unitH .pic01 {top: 35%;width: 95%;}
.unitH .pic02 {top: 10%;right: inherit;left: 50%;transform: translateX(-50%);}
.unitH .txt01 {top: 20%;width: 60px;}
.unitH .txt02 {bottom: 8%;width: 90%;}
.unitH .owl-location {top: 25%;left: 45px;}
.unitH .owl-location img {height: 320px;}
.unitI {background-size: cover;background: url(../img/unit01-bg-m.jpg) no-repeat center top;background-size: contain;}
.unitI .contentArea {min-height: inherit;height: 88vh;}
.unitI .txt01 h2 {color: #161616!important;font-size: 1.25em!important;text-align: left;}
.unitI .txt01 {top: 33%;width: 100%;}
.unitI .txt02 {width: 60%;top: 50%;left: 50%;transform: translateX(-50%);text-align: center;}
.unitI .pic01 {width: 68%;top: 10%;left: 50%;transform: translateX(-50%);}
.unitI .btn01 {bottom: 30%;}
.unitI .btn02 {bottom: 18%;}
.unitJ iframe {width: 100%;height: 360px;}
a.more-btn {margin:0 auto;}
.owl-carousel {}
main {padding: 0 0 76px}
main .contentArea {padding: 0;}
main .contentArea .row {margin: 0;}

/* 單元 */
.topBox p.title {font-size: 2em;}
.vision {height: 320px;}
.banner {min-height: 160px;background-size: cover;}

footer {padding: 20px 0 0;margin:0;}
footer .inner {width: 100%;max-width: 100%;text-align: center;padding: 20px 0;}
footer .f-logo {margin:0;padding: 0;}
footer .f-logo::after {width: 0}
footer .info-area {padding: 0 0 20px;}
footer .linkbox ul {display: none;margin: 0;text-align: center;}
footer ul li {margin-right: 10px;}
footer .row {display: block;margin: 0;}
footer .linkbox {text-align: center;}
footer .rightBox {width: 20em;}
footer .copyright {font-size: small;}

.btn-link {position: fixed;bottom: 0;right: 4%;z-index: 1;width: 92%;z-index: 99;border-top: 1px #fff solid;}
.btn-link a {display: block;float: left;width: calc(100%/3);line-height: 18px;border-radius: 0;text-align: center;margin: 0;padding: 10px;border-right: 1px #fff solid;background: #947061;}
.btn-link span {display: block;width: 100%;font-size: .8rem;margin: 5px 0 0;}

#btn-back-to-top {width: 50px;height: 50px;line-height: 50px;}#btn-back-to-top img {width: 50%;}
}

@media (min-width: 380px) and (max-width: 600px) {
.unitE .txt02 {top: 10%;} .unitF .pic01 {top: 8.5%;}
}