html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

a:focus, button {text-decoration: none;outline:none;display:none}

/*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}

body {background-color:#fff}
html, body, h1, h2, h3, h4, h5, h6, p, a {font-family:'微軟正黑體', Arial, Helvetica, sans-serif}
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;}
header {background-color: #f4e93e;}
.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}
header .home, header .contact, header .order, header .booking-line {display:none}

body.page {background-image: url(../img/dot.png), url(../img/dot.png), url(../img/dot.png), url(../img/dot.png), url(../img/dot.png);background-repeat: repeat-y;background-position: 20%,35%,50%,65%,80%;background-color: #efefef}

.logo {position:absolute;top:15px;left:2%;padding:0;z-index:9}
.logo img {width:auto;height:58px}
.social {position:absolute;top:20px;right:5%;width:50px;height:50px;padding:0;z-index:9;text-align:center;line-height:50px}
.social img {vertical-align: middle;}
a.scrolldown {position: absolute;bottom:80px;left: 50%;width:80px;height: 30px;display: block;margin-left: -40px;padding: 10px 15px;color: #fff}
a.scrolldown:after {position: absolute;bottom: -100px;left: 50%;content: "";width:1px;height: 90px;background:#fff;}

.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: #f1f1f1;}
.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}

#menubox {position: relative;top:0;width:100%;height:88px;display: block;z-index: 9;font-size: 0}
header.page #menubox {position: relative;;background-color:#fff}
header.page {height: 88px;}
header.page ul.unit-menu a {color:#58453c;}
ul.unit-menu {display: block;text-align:center}
ul.unit-menu li {display:inline-block}
ul.unit-menu a {position: relative;display:inline-block;height:88px;padding:0 26px;color:#58453c;font-size:16px;letter-spacing: 1.65px;line-height: 88px;vertical-align: bottom;font-weight: bold;}
ul.unit-menu a:after {content: "";width: 0;height: 2px;background: #58453c;opacity: 0;transition: all .4s ease;position: absolute;top: 65px;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%)}
ul.unit-menu a:hover:after {width: 70px;opacity: 1}
#menubox a.fb {display:inline-block;width:40px;height:40px;background: #58453c url(../img/fb.svg) no-repeat center center;border-radius: 99px;line-height: 40px;padding:0;position: absolute;top: 24px;right: 2%;}
#menubox a.fb:hover:after {width:0!important}

.owl-unit01 {padding-bottom: 30px}
.carousel-indicators {z-index: 8}

#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;}
#content-wrapper {visibility:hidden;}
.filmbox {position: relative;height: calc(100vh - 88px);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%);
}

/* banner */
.banner {position: relative;vertical-align: middle;padding:0;text-align: center;overflow: hidden;}
.banner img {width: 100%;height: auto;}
.banner .titlebox {position: absolute;top: 40%;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);color: #fff}
.banner .titlebox span {font-size: 1.25em;font-weight: 600;-webkit-filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.5));filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.5))}
.banner .titlebox p {font-family: 'Merriweather', serif;font-size: 3.625em;letter-spacing: 2px;margin-bottom: 10px;-webkit-filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.5));filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.5))}

.top-slider{position: relative;}
.top-slider .slider.slider-for .slick-list .slick-track .slick-slide{width: 100%;max-width: 1386px;padding: 0 10px;background: white;}
.top-slider .slider.slider-nav{background-repeat: repeat;padding: 23px 0 25px;max-width: 870px;}.top-slider .slider.slider-nav div img{width: 100%;height: auto;}
.top-slider .slider.slider-nav .slick-list{width: 870px;padding: 0 !important;}
.top-slider .slider.slider-nav .slick-list .slick-track{left: 0 !important;margin: 0;}
.top-slider .slider.slider-nav .slick-list .slick-track .slick-slide{margin-right: 8px;-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.top-slider .slider.slider-nav .slick-list .slick-track .slick-slide.slick-current{opacity: 0.25;-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.top-slider .slider.slider-nav .slick-list .slick-track .slick-slide: hover{cursor: pointer;}
.top-slider .slider.slider-nav .slick-prev, .top-slider .slider.slider-nav .slick-next{width: 30px;height: 35px;display: block;text-indent: -9999px;position: absolute;top: 46px;z-index: 99;}
.top-slider .slider.slider-nav .slick-prev{background: url(/common/img/icon_prev.png) 0 0 no-repeat;left: -14px;background-size: contain;}
.top-slider .slider.slider-nav .slick-next{background: url(/common/img/icon_next.png) 0 0 no-repeat;right: -7px;background-size: contain;}
.top-slider .wrap_slider_nav{max-width: 1366px;margin: auto;}.top-slider .bnr_fixed{position: absolute;bottom: 0;right: calc((100% - 1340px) / 2);-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.top-slider .bnr_fixed img{display: block;}

p.mark {background: #e3ded8;line-height: 36px;text-align: center;color: #1a1b1b}

#casearea {padding-bottom: 108px;line-height: 26px}
#casearea .toparea {padding: 130px 0 18px}
#casearea .toparea h3 {display: inline-block;font-size: 1.625em}
#casearea .toparea a {float: right;color: #1a1b1b;font-family: Open Sans, Arial, Helvetica;font-size: .9em;background: url(../img/icon01.svg) no-repeat right center;background-size: 16px 16px;padding-right: 28px}

main.page {background: url(../img/main_bg.jpg) no-repeat center center;background-size: cover;padding-bottom: 94px;}
.content {background: #fff;min-height: 600px;margin-top: -50px;position: relative;z-index: 5;background-image: url(../img/content_bg.gif);}

/* about */
.UnitPage {margin:  0 auto;max-width: 1080px;text-align: center;}
.UnitPage li {display: inline-block;margin:0 1%;}
.UnitPage li a {display: block;padding: 15px 30px;font-size: 1.25em;color: #8a8a8a;border: #efefef 1px solid;background: #fff;font-weight: bold;}
.UnitPage li a:hover {color: #333;}
.UnitPage li a.active {border: #333 1px solid;color: #333;}

#about {padding:50px 0 60px;}
#about h1 {font-size: 2.25em;color: #1a1a1a;margin:0 0 16px}
#about h2 {font-size: 1em;color: #6a6a6a;margin:0 0 28px}
#about p {color: #6a6a6a;line-height: 1.5}
#about .unit01 {padding: 88px 140px 58px}
#about .unit01 p {max-width: 620px}
#about .unit02 {position: relative;padding: 0 100px 0 90px;overflow: hidden;}
#about .unit02:before {position: absolute;content:"";background: url(../img/txt01.svg) no-repeat left top;width: 100%;height: 148px;left: 0;z-index: -1;opacity: 0.58;}
#about .unit02 img {float: right;}
#about .unit02 p {position: relative;float: left;max-width: 777px;background-color:rgba(255,255,255,0.8);padding:0 50px 20px;z-index: 9}
#about .unit02 p.top {margin-top: -88px;padding:36px 50px;}
#about .unit03 {position: relative;padding: 36px 100px 200px 140px;}
#about .unit03:before {position: absolute;content:"";background: url(../img/txt02.svg) no-repeat right bottom;width: 100%;height: 148px;left: 0;bottom:0;z-index: -1;opacity: 0.58;}

/* works */
#works {padding:50px 0 60px;}
#works .TopUnit {position: relative;background: url(../img/diamond.png) no-repeat 90% 50px;background-size: 506px 304px;text-align: left;}
#works .txtBox {max-width: 1080px;margin: 0 auto;padding:100px 0 50px;min-height: 358px}
#works h1 {font-size: 2.25em;color: #1a1a1a;margin:0 0 16px}
#works .UnitBox {position: relative;}
#works .UnitBox .TitleBox {margin-bottom: 15px}
#works .set01 {background: url(../img/work_txt01.svg) no-repeat 100% 40%;background-size: auto 150px;}
#works .set02 {background: url(../img/work_txt02.svg) no-repeat 0% 40%;background-size: auto 150px;}
#works .set03 {background: url(../img/work_txt03.svg) no-repeat 100% 40%;background-size: auto 150px;}
#works .set04 {background: url(../img/work_txt04.svg) no-repeat 0% 40%;background-size: auto 150px;}
#works .set05 {background: url(../img/work_txt05.svg) no-repeat 100% 40%;background-size: auto 150px;}
#works .SeatBox {position: relative;max-width: 1080px;margin: 0 auto;padding:0 0 66px;min-height: 358px}
#works .SeatBox h2 {position: relative;padding-left: 20px;color: #a68253;font-size: 2em}
#works .SeatBox h2:before {position: absolute;left: 0;top: 6px;width: 6px;height: 24px;content: "";background: #a68253}
#works .UnitBox strong {position: relative;font-size: 0.66em;padding-left: 40px;vertical-align:middle;}
#works .SeatBox strong:before {position: absolute;left: 8px;top: 14px;width: 24px;height: 2px;content: "";background: #a68253}
#works .setLeft a {position: absolute;bottom: 10%;left: 50%;background: #a68253 url(../img/arrow02.svg) no-repeat 10% 50%;background-size: 26px 16px;line-height: 66px;display: inline-block;width: 350px;text-align: center;color: #fff;z-index: 9;}
#works .setLeft a:hover {background: #a68253 url(../img/arrow02.svg) no-repeat 15% 50%;background-size: 26px 16px;}
#works .imgBox img {max-width: 600px}
#works .SeatBox .boxA {position: relative;right: 0;width: 100%;}
#works .SeatBox .boxB {position: relative;right: 0;width: 100%;}
#works .boxB .TitleBox, #works .boxB .imgBox {margin-left: 44.5%;}
#works .setRight a {position: absolute;bottom: 10%;left: 20%;background: #a68253 url(../img/arrow02.svg) no-repeat 10% 50%;background-size: 26px 16px;line-height: 66px;display: inline-block;width: 350px;text-align: center;color: #fff;z-index: 9;}
#works .setRight a:hover {background: #a68253 url(../img/arrow02.svg) no-repeat 15% 50%;background-size: 26px 16px;}
#works .ImagesBox {display: none;}

/* architect */
#architect {padding:50px 0 60px;}
#architect h1 {font-size: 2.25em;color: #1a1a1a;margin:0 0 16px}


/* case */
#case {padding:105px 50px 60px;background: #fff}
#case .caseName {border-left: #f4e93e 5px solid;font-size: 2em;padding-left: 10px;margin: 0 auto 20px;max-width: 1080px}
#case ul.list {margin: 36px auto 20px;max-width: 1080px;overflow: hidden;}
#case ul.list li {position: relative;width: calc(50% - 10px);margin:0 0 26px;}
#case ul.list li:nth-child(odd) {float: left;}
#case ul.list li:nth-child(even) {float: right;}
#case ul.list .imgbox {position: relative;overflow: hidden;}
#case ul.list .imgbox img {width: 100%;max-width:100%;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
#case ul.list a:hover .imgbox img {opacity:1;-webkit-transform: scale(1.1); /* Safari and Chrome */-moz-transform: scale(1.1); /* Firefox */-ms-transform: scale(1.1); /* IE 9 */-o-transform: scale(1.1); /* Opera */transform: scale(1.1);}	
#case ul.list .txtbox {position: absolute;width: 100%;bottom: 0;z-index: 9;color: #fff;padding: 25px;background: linear-gradient(90deg, rgba(0, 0, 0, 0.5)45%, rgba(0, 0, 0, 0)95%);background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.5)45%, rgba(0, 0, 0, 0)95%);    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.5)45%, rgba(0, 0, 0, 0)95%);background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.5)45%, rgba(0, 0, 0, 0)95%);}
#case ul.list .txtbox h2 {font-size: 1.625em;font-weight: bold;}

#case .coverBox {text-align: center;}
#case .nearby-pic {border:none;}
#case .flexslider {max-width: 1080px;margin: 20px auto}
#case p.note {max-width: 1080px;margin: 20px auto;text-align: center;}
#case .btnbox {display:block;width:100%;text-align: center;margin: 46px 0 10px;}
#case .back {display: inline-block;width: 252px;line-height: 52px;background: #f4e93e;color: #58453c;font-size: 1.15em;text-align: center;transition: all .4s ease;}
#case .back:hover {background: #f4e93e;transition: all .4s ease;}
#carousel img {cursor: pointer;opacity: .5;transition: all .4s ease;}
#carousel img:hover {cursor: pointer;opacity: 1;transition: all .4s ease;}
#carousel .flex-active-slide img {opacity: 1;}
.tab-content  {max-width: 1080px;margin: 20px auto 80px;text-align: center;}
.nav-tabs, .nav-tabs .nav-link {border:none;}
.nav-tabs {max-width: 1080px;margin: 50px auto 20px}
.nav-tabs .nav-item {text-align: center;padding:0 .5px;}
.nav-tabs .nav-link {background: #868994;color: #fff;margin:0;border-radius:0;padding:20px}
.nav-tabs .nav-link.active {background: #b4946a;color: #fff}
.tab-content img {max-width: 100%}

/* progress */
#progress {padding:95px 105px;background: #fff}
#progress .titleName {border-left: #f4e93e 5px solid;font-size: 2em;padding-left: 10px;margin: 0 auto 20px;max-width: 1080px}
#progress .row, #progress .pic, #progress .txt {padding:0;}
#progress .row {border: #efefef 1px solid}
#progress .pic img {width: 100%;height: auto;vertical-align:top;}
#progress .txt {padding: 95px 40px}
#progress h1 {margin-bottom: 28px;color: #6a6a6a}
#progress .form-control {margin-bottom: 16px;border-color:#cfcfcf;line-height: 52px;border-radius:0;height: calc(1.5em + .75rem + 16px);}
#progress p {margin-bottom: 40px;}
#progress button {background:#f4e93e url(../img/arrow01.svg) no-repeat 90% center;background-size:26px 16px;border-color:#f4e93e;border-radius:0;color: #58453c;text-align: left;padding: .65rem 2rem;width: 260px;-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;}
#progress button:hover {background:#f4e93e url(../img/arrow01.svg) no-repeat 95% center;background-size:26px 16px;-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;}
#progress ul.list {overflow: hidden;padding: 15px 0 0;}
#progress ul.list li {float: left;width: calc(100%/3 - 20px);margin:0 10px 24px;background: #f5f5f5;-webkit-transition: all .2s ease;transition: all .2s ease}
#progress ul.list li:hover{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}
#progress ul.list li img {width: 100%}
#progress ul.list .txtbox {padding:22px 15px;}
#progress ul.list a .txtbox h2 {font-size: 1.5em;margin:0 0 10px;color: #1a1a1a}
#progress ul.list a .txtbox small {color: #808080}

.fancybox-slide>* {background-color:transparent;}

/* construction */
#construction {padding: 150px 100px}
#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;}
#construction .owl-dots {position: absolute;bottom: 20px;display: block;width: 100%;text-align: center;}
#construction .owl-dot {display: inline-block;width: 8px;height: 8px;margin: 0 4px;border-radius: 99em;background: #fff;border: #fff 1px solid}
#construction button.active {background: transparent;border: #fff 1px solid}
#construction .owl-nav {position: absolute;top: calc(50% - 29px);width: 100%}
#construction .owl-prev {position:absolute;left:2%;display: block;border: #fff 1px solid;width: 58px;height: 58px;border-radius: 99em;background: url(../img/arrow-left.svg) no-repeat center center;background-size:26px 16px;text-indent: -9999px;}
#construction .owl-next {position:absolute;right:2%;display: block;border: #fff 1px solid;width: 58px;height: 58px;border-radius: 99em;background: url(../img/arrow-right.svg) no-repeat center center;background-size:26px 16px;text-indent: -9999px;}

/* joinus */
#joinus {background: #fff url(../img/joinus_pic01.jpg) no-repeat 90% 80%;padding: 88px 140px;min-height: 780px}
#joinus h1 {font-size: 2.35em;color: #1a1a1a;font-weight: bold;margin-bottom: 10px}
#joinus h2 {font-size: 1.35em;color: #1a1a1a;font-weight: bold;margin-bottom: 10px;margin-bottom: 24px}
#joinus p {color: #6a6a6a;margin-bottom: 52px}
#joinus a.link {display: inline-block;width:206px;line-height:58px;background: #f4e93e url(../img/arrow01.svg) no-repeat 88% center;background-size:26px 16px;color: #58453c;font-size: 1.15em;text-align: center;}
#joinus a.link:hover {background: #f4e93e url(../img/arrow01.svg) no-repeat 92% center;background-size:26px 16px;}

/* contact */
#contact {padding:99px 108px;}
#contact .topbox {text-align: center;margin-bottom: 36px;line-height: 1.5;color: #8a8a8a;}
#contact .title {display: flex;background: #dbdbdd;align-items: center;justify-content: right}
#contact .title p {width: 120px;;text-align: right;}
#contact .fill-in {background: #f0f0f2;padding:10px;}
#contact .requires {background: #f7931e;color: #fff;font-size: .825em;padding: 5px 8px;display: inline-block;margin-left: 10px}
#contact .select-style {display:inline-block;float: left;padding-right: 25px}
#contact .select-style label {cursor: pointer;padding: 11px 5px}
#contact .code {}
#contact .form-control {border-radius:0;}
#contact .btnbox {display:block;width:100%;text-align: center;margin: 46px 0 10px;}
#contact .send {display: inline-block;width: 252px;line-height: 52px;background: #f4e93e url(../img/arrow01.svg) no-repeat 88% center;background-size: 26px 16px;color: #58453c;font-size: 1.15em;text-align: center;transition: all .4s ease;}
#contact .send:hover {background: #f4e93e url(../img/arrow01.svg) no-repeat 92% center;background-size: 26px 16px;transition: all .4s ease;}
#contact .service-Tel {text-align: center;line-height: 42px;}
#contact .service-Tel span {padding: 0 10px;vertical-align:super;}
#contact .service-Tel a {font-size: 2em;color: #f15a24}

/*單元分類*/
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}

/*casebox*/
.casebox {padding: 50px 15px}
.casebox img {width:100%;height: auto;}
.casebox .L-info {padding: 0 100px}
.casebox .R-pic {padding: 0}
.casebox h2 {font-size: 2em}
.casebox p {}
.casebox span {display: block;marg:0 0 10px;}
.casebox a.tel {display: block;color: #d7aa38;font-size: 2em;margin: 15px 0}
.casebox a.link {display: inline-block;background:#666464;width:268px;line-height: 60px;text-align:center;color:#fff;}

/* contactbox */
.contactbox {padding:85px 0;background: url(../img/contact_img.jpg) no-repeat center center;background-size:cover;text-align:center}
.contactbox h3 {font-size: 1.5em;margin:0 0 40px;}
.contactbox a {position: relative;display: inline-block;font-size: 3em;color: #1a1a1a;margin:0 0 20px;padding-left: 50px}
.contactbox a:before {position: absolute;content:"";width: 28px;height: 28px;top: 14px;left: 0;background: url(../img/tel.svg) no-repeat center center}
.contactbox p {}

footer {position:relative;background: #1770d1;color: #fff}
footer > div {padding: 40px 0}
footer h4 {display: block;max-width: 294px}
footer ul.qlink {float:right;max-width: 368px;margin-top: 50px}
footer ul.qlink a {color: #fff;padding: 10px 20px 10px 36px;}
footer ul.qlink a:hover {opacity: .5}
footer ul.qlink li {display: inline-block;margin-bottom: 26px}
footer p {padding-bottom: 10px;letter-spacing: 1px}
footer p.address {color: #7abbff;margin: 40px 0 20px;padding:0;}
footer p.address a {color: #7abbff;padding-left: 10px;font-family: Open Sans, Arial, Helvetica;font-size: .8em}
footer p span {min-width: 46px;display: inline-block;}
footer .linkarea {float: right;text-align: right;margin-top:26px;width: 100%}
footer .linkarea a {display: inline-block;width: 46px;height: 46px;border-radius: 99px;background: #7abbff;text-align: center;line-height: 46px;color: #1770d1;font-size: 1.15em;margin-left: 15px}
footer .copyright {color: #7abbff;font-size: .825em;background: #004a9c;text-align: center;padding: 0;line-height: 52px}
footer .copyright p {margin: 0;padding:0;font-family: Open Sans, Arial, Helvetica}
footer .visit {width: 100%;color: #7abbff;display: block;margin: 26px 0 0}

@media (min-width: 1366px) and (max-width: 	4860px) {
main .content {max-width: 1280px}
}

@media only screen and (max-width: 768px) {
a:focus, button {display:block}
.pc {display:none!important;}
.mobile {display:block!important;}
.navbar {display:block}
.logo, .unit-menu {display:none}
header {position:relative;top:0;left:0;width: 100%;padding:0;z-index: 9}
header .container {padding:0}
header .home {display:block;width: 100%!important;}
header.index {height: auto;}
header .contact, header .order, header .booking-line {display:block;}
header.page {height: auto;}
#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;}
button.navbar-toggle, button.navbar-toggle:focus {background-color:transparent!important}
.social {left: 5%}
.navbar-toggle {border:0;border-radius:0;z-index:99;margin:12px 0 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-inverse .navbar-nav>li {float:left;width:100%;padding:20px 0}
.navbar-inverse .navbar-nav>li>a {display:block;padding:0;font-size:2.25ex;color:#b9af96;letter-spacing: 1.65px}
.navbar-top {display:none;}
.navbar-toggle .icon-bar {width: 27px;height: 1px;}
.navbar-toggle .icon-bar+.icon-bar {margin-top:8px;}
.navbar-nav {padding-top:88px;margin:0;text-align:center;}
.navbar-inverse .navbar-nav, .navbar-inverse .navbar-nav>li {background:none}
.main-visual {height:auto}
.mapbox iframe {height:240px}
.titlebox h1 {font-size:2em;margin:0}
.titlebox p {font-size:1em;letter-spacing:0}
a.scrolldown {bottom: 28px}

.contactbox a {font-size:2em;padding-left: 40px}
.contactbox a:before {top: 5px}

.video-container {height: 248px}

.banner {min-height:inherit;}
#casearea {padding-bottom: 58px;}
#casearea .toparea {padding: 30px 0 18px;}

.main-visual .title {font-size: 1.5em}
.owl-unit01 .owl-nav {display: none;}

.casebox {display: block;flex-wrap: inherit;padding: 30px 15px;}
.casebox div {width: 100%;flex:100%;max-width:100%;margin: 0 0 15px}
.casebox .L-info {padding: 0}
.casebox a.link {width: 100%;line-height: 40px}
.coverBox img {max-width: 100%}

.contactbox {padding: 25px 0}
.contactbox h3 {margin: 0 0 20px}

.about {padding: 36px 0}
.about .container {padding: 20px 15px}

.process ul.list li {width: 90%;margin: 0 5% 15px}
.process h2 {margin: 0px 0 10px;}
.process .txt-title, .process .selectbox {text-align: center;}
.process .selectbox {margin-bottom: 20px}

.brand {padding: 36px 0 220px;background-size: contain}
.brand .container {padding: 20px 15px}
.brand .txtbox {width:auto;padding:0}
.brand h2 {font-size: 1.5em}

footer {padding: 20px 0 0}
footer > div {padding: 20px 0;text-align: center;}
footer .row {display: block}
footer .col-4, footer .linkarea, footer ul.qlink {display: none}
footer h4 {margin: 0 auto 15px;font-size: 1.25em;font-weight: 700}
footer p {margin: 0 0 8px;font-size: 14px}
footer .copyright {margin:0}
footer .copyright p {text-align:center;margin:0;padding:0;}
footer .copyright a.mail, footer .copyright a.fb{display: none}
footer .visit {display: none}

a.top {padding: 5em 0 0}
a.top:before {height: 4em}



/* 手機選單*/
.navbar-brand {position:relative;}
.navbar-inverse {height:50px;background-color:#385045;padding:0}
.brand-logo {margin:0 auto;padding: 0}
.brand-logo img {width:auto;height:48px}
.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: #3a3a3a;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;}
.overlay.open {opacity: 1;visibility: visible;height:100%}
.button_container {position:fixed;top:0;right:15px;height: 27px;width: 35px;cursor: pointer;z-index: 100;-webkit-transition: opacity .25s ease;transition: opacity .25s ease;z-index:999;}
.button_container:hover {opacity: .7;}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {opacity: 0;background: #FFF;}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {background: #b9af96;border: none;height: 2px;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: 11px;}
.button_container span:nth-of-type(3) {top: 22px;}
}