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:'Noto Sans', sans-serif, '微軟正黑體', Arial, Helvetica, sans-serif;font-size: 100%} a, a:active, a:focus, a:hover{margin:0;line-height: 1;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: #fff;} .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:50%;left:2%;padding:0;z-index:9;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} .logo img {width:auto;height:8vh;} .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:162px;display: block;z-index: 9;font-size: 16px} header.page {border-bottom: 1px #52c1e0 solid} 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:162px;padding:0 1rem;color:#4a4a4a;font-size:1.125em;letter-spacing: 1.65px;line-height: 162px;vertical-align: bottom;font-weight: bold;} ul.unit-menu a:hover, ul.unit-menu a.active {color: #f3b024} #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%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);background-size:21px;background: #f3b024 url(../img/icon_letter.svg) no-repeat 26px center;background-size:21px;} .owl-unit01 {padding-bottom: 30px} .container {max-width: 1200px} /* banner */ .banner {position: relative;vertical-align: middle;padding:0;text-align: center;overflow: hidden;min-height: 292px} .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;z-index: 9;width: 426px} .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))} .banner .carousel-indicators {background: #fff;margin:0;padding: 32px 0;} .banner .carousel-indicators li {border-radius: 99em;width: 16px;height: 16px;background: #d1d1d1;border:none;margin:0 5px;} .banner .carousel-indicators li.active {background: #52c1e0} .banner 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;} .banner .inner {position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);color: #fff;z-index: 9;} .banner .inner h1 {font: bold 3.75em/1 Inria Sans} .unitA {background: url(../img/banner_news.jpg) no-repeat center center;background-size: cover;} .unitB {background: url(../img/banner_products.jpg) no-repeat center center;background-size: cover;} .unitC {background: url(../img/banner_qc.jpg) no-repeat center center;background-size: cover;} .unitD {background: url(../img/banner_guide.jpg) no-repeat center center;background-size: cover;} .unitE {background: url(../img/banner_process.jpg) no-repeat center center;background-size: cover;} .unitarea {padding: 0;max-width: 100%;overflow: hidden;} .unitarea .imgbox {position: relative;animation: fadein 2s; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; transition: opacity 2s ease-in;} .unitarea .set01 {background: url(../img/unitA.jpg) no-repeat center center;background-size: cover;} .unitarea .set02 {background: url(../img/unitC.jpg) no-repeat center center;background-size: cover;} .unitarea .imgbox .inner {position: absolute;top:50%;width:100%;text-align: center;z-index: 2;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} .unitarea .imgbox .inner p {animation: fadeInDown 3s;-webkit-transition: opacity 3s ease-in;-moz-transition: opacity 3s ease-in;-o-transition: opacity 3s ease-in;-ms-transition: opacity 3s ease-in;transition: opacity 3s ease-in;} .unitarea .imgbox p {font:bold 2.8em/1.2 'Inria Sans', sans-serif;color:#fff;} .unitarea .txtbox {background: #e2e2de;padding: 6% 120px;font:bold 16px/1 'Noto Sans', sans-serif;color:#606060} .unitarea .txtbox h2 {font-size: 2.25em;margin-bottom: 26px;} .unitarea .txtbox p {line-height: 2;margin-bottom: 40px;} .unitarea a.more {display: inline-block;background: #f3b024;border-radius: 99em;line-height: 42px;color:#fff;min-width: 126px;text-align: center;} @keyframes fadein { from {opacity:0;} to {opacity:1;} } @-moz-keyframes fadein { /* Firefox */ from {opacity:0;} to {opacity:1;} } @-webkit-keyframes fadein { /* Safari and Chrome */ from {opacity:0;} to {opacity:1;} } @-o-keyframes fadein { /* Opera */ from {opacity:0;} to {opacity: 1;} } .unitSet2 {padding: 100px 0;text-align: center;font:bold 16px/1 'Noto Sans', sans-serif;} .unitSet2 h2 {font-size: 2em;margin:0 0 24px;color: #606060;position: relative;padding:0 0 18px;margin:0 auto 36px;} .unitSet2 h2::before {position: absolute;bottom: 0;left: 50%;background: #52c1e0;width:40px;height: 6px;content: "";-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);} .unitSet2 .leftbox {background: #52c1e0;color: #fff;padding: 50px 10px 68px;background-size: 156px;} .unitSet2 .leftbox img {max-width: 156px;margin:0 auto 38px;} .unitSet2 .leftbox h3 {font-size: 1.5em;margin:0 0 24px;} .unitSet2 .leftbox p {line-height: 2;margin:0 0 38px;} .unitSet2 .leftbox a.more {display: inline-block;border-radius: 99em;line-height: 42px;color:#fff;min-width: 126px;text-align: center;border: 1px #fff solid} .unitSet2 .centerbox, .unitSet2 .rightbox {padding: 0} .unitSet2 .imgbox {flex-direction:row;} .unitSet2 .imgbox > div {flex-direction:column;padding: 0;align-content:space-between;padding-left: 10px} .unitSet2 .imgbox div:first-child {margin:0 0 10px;} .unitSet2 .imgbox div:last-child {margin:10px 0 0;} .unitSet2 .imgbox img {width: 100%;height: auto;} 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 {overflow: hidden;} 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);} .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;} /* news */ #news {padding:88px 15px;} #news .unitbox {display: block;width: 100%;margin:0 0 60px;} #news .unitbox p.en {color: #f3b024;font: normal 2.25em/1 Inria Sans;padding: 0 0 12px;margin:0} #news h2 {position:relative;color: #1a81d6;font-size: 1.325em;font-weight: bold;padding:0 0 20px;margin:0 0 40px;} #news h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #news ul.unit {margin:0 0 88px;text-align: center;width: 100%} #news ul.unit li {display: inline-block;margin:0 10px;} #news ul.unit a {display: block;width: 132px;line-height: 48px;color:#606060;font-weight: bold;} #news ul.unit a:hover, #news ul.unit a.active {color:#1a81d6;border:1px #52c1e0 solid} #news ul.list {display: flex;flex-wrap: wrap;align-items:stretch;justify-content:space-between;} #news ul.list li {max-width: 30.3333%;flex:0 0 30.3333%;-ms-flex:0 0 30.3333%;display:inline-flex;margin:0 1.5% 2rem;} #news ul.list a {display: block;width: 100%;border:1px #c1c7c973 solid;padding:24px;color: #1a1a1a} #news ul.list .imgbox {margin:0 0 18px;height: 182px;} #news ul.list img {max-width: 100%} #news ul.list p {line-height: 1.5;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;} #news ul.list span {display:block;color: #1a81d6;margin:36px 0;} #post {padding:88px 15px;} #post .unitbox {display: block;width: 100%;margin: 0 15px 60px;} #post .unitbox p.en {color: #f3b024;font: normal 2.25em/1 Inria Sans;padding: 0 0 12px;margin:0} #post h2 {position:relative;color: #1a81d6;font-size: 1.325em;font-weight: bold;padding:0 0 20px;margin:0 0 40px;} #post h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #post span {color: #d87567} #post .contentbox {display: flex;} #post .contentbox .txtbox {position: relative;display: block;} #post .contentbox .txtbox p {line-height: 1.68;margin:0 0 2.25rem;} #post .contentbox .goodsbox {position: relative;display:grid;margin:30px 0 0;} #post .contentbox .listbox {position: relative;display: grid;max-width: 100%;overflow: hidden;margin:30px 0;} #post .contentbox ul.list {margin:36px 0;} #post .contentbox ul.list li {padding:20px;border: 1px #c1c7c973 solid;} #post .contentbox ul.list img {max-width: 100%;width: 100%;} #post .contentbox ul.list a {color: #606060;text-align: center;} #post .contentbox ul.list p {padding:2rem 0;} #post h3 {position:relative;font-size: 1.325em;font-weight: bold;color: #1a81d6;padding:0 0 20px;} #post h3:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #post .contentbox .btnbox {position: relative;} #post .contentbox a.back {color: #52c1e0;border: 1px #52c1e0 solid;padding: 22px 32px;display: inline-block;} #post .albumbox {padding-left: 30px} #post .albumbox img {padding:20px;border: 1px #c1c7c973 solid;margin: 0 0 1rem;max-width: 100%;width: 100%} /* products */ #products {padding:88px 15px;width: 80%;max-width: inherit;} #products > div {padding:0 15px;} #products.unitbox {display: block;width: 100%;margin:0 0 60px;} #products .unitbox p.en {color: #f3b024;font: normal 2.25em/1 Inria Sans;padding: 0 0 12px;margin:0} #products h2 {position:relative;color: #1a81d6;font-size: 1.325em;font-weight: bold;padding:0 0 20px;margin:0 0 40px;} #products h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #products .leftbox {float: left;width: calc(50% - 10px);padding-right: 10px} #products .rightbox {float: right;width: calc(50% - 10px);padding-left: 10px} #products .topbox {position:relative;} #products ul.list {margin:30px 0 0;padding: 0 15px;width: 100%;overflow: hidden;} #products ul.list li:first-child, #products ul.list li:nth-child(2) {width: calc(50% - 10px);margin:0 5px 10px;} #products ul.list li {position: relative;display: block;float: left;width: calc(100%/4 - 10px);margin:0 5px 10px;} #products .imgbox {overflow: hidden;height: 359px;background-size: cover!important;} #products .imgbox img {width: 100%;max-width: 100%;-webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -o-transition: all 1s ease; /* IE 9 */ -ms-transition: all 1s ease; /* Opera */ transition: all 1s ease;} #products 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);} #products .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%);} #products .txtbox p {font: normal 2em/1 Inria Sans;margin:0 0 10px;} #products .txtbox h3 {font-size:1.125em;font-weight: bold;} #products-inner {position: relative;display: block;width: 100%} #products_type {padding:88px 15px;width: 80%;max-width: inherit;} #products_type .unitbox h2 {color: #f3b024;font-size: 2.25em;font-weight: bold;padding: 0 0 12px;margin:0} #products_type .unitbox p.en{position:relative;color: #1a81d6;font-size: 1.325em;font-weight: normal;padding:0 0 20px;margin:0 0 40px;} #products_type .unitbox p.en:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #products_type .contentbox {width: calc(100% - 345px);padding-left: 40px;position: relative;right:0;float: right;} #products_type ul.goods {max-width: 100%;overflow: hidden;margin:0 0 20px;} #products_type ul.goods li {border: #c1c7c9 1px solid;width: calc(100%/4 - 2%);margin:0 1rem 1rem 0;float: left;padding:20px;} #products_type ul.goods li:nth-child(4n) {margin:0 0 1rem;} #products_type ul.goods a {color: #1a1a1a} #products_type ul.goods a:hover img {opacity: .8} #products_type ul.goods .imgbox {height: 185px;background-size: cover!important;} #products_type ul.goods img {width: 100%} #products_type ul.goods p {text-align: center;height:55px;line-height: 1.25;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;padding:15px 0;} #products_type h3.title {position:relative;font-size: 1.325em;font-weight: bold;color: #1a81d6;padding:0 0 20px;} #products_type h3.title:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #products_type .listbox {margin:20px 0 0;} #products_type ul.favor_list li {padding:20px;border: 1px #c1c7c973 solid;} #products_type ul.favor_list a {color: #606060;} #products_type ul.favor_list p {text-align: center;height: 55px;line-height: 1.25;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;padding: 15px 0;} #products_type .related {margin:56px 0 0} #products_type .listbox {margin:20px 0 0;} #products_type ul.related_list li {padding:20px;border: 1px #c1c7c973 solid;} #products_type ul.related_list a {color: #606060;} #products_type ul.related_list p {text-align: center;height: 55px;line-height: 1.25;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;padding: 15px 0;} #products_type .btnbox {position: relative;margin:56px 0 0;text-align: center;} #products_type a.back {color: #52c1e0;border: 1px #52c1e0 solid;padding: 22px 32px;display: inline-block;} #products_list {padding:88px 15px;width: 80%;max-width: inherit;} #products_list .unitbox {display: block;} #products_list .unitbox h2 {color: #f3b024;font-size: 2.25em;font-weight: bold;padding: 0 0 12px;margin:0} #products_list .unitbox p.en{position:relative;color: #1a81d6;font-size: 1.325em;font-weight: normal;padding:0 0 20px;margin:0 0 40px;} #products_list .unitbox p.en:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #products_list .contentbox {position: relative;right:0;width: calc(100% - 345px);padding-left: 40px;float: right;} #products_list .count {font-size: small;color: #606060;padding:20px 0;} #products_list ul.goods {width: 100%;max-width: 100%;display: block;float: left;} #products_list ul.goods li {border: #c1c7c9 1px solid;width: calc(100%/5 - 15px);margin:0 15px 1rem 0;float: left;padding:20px;} #products_list ul.goods a {color: #1a1a1a} #products_list ul.goods a:hover img {opacity: .8} #products_list ul.goods .imgbox {height: 135px;background-size: cover!important;} #products_list ul.goods img {width: 100%} #products_list ul.goods p {text-align: center;max-height:60px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;padding:25px 0;display: block;line-height: 1.25;font-size: .9em} #products_list .btnbox {display: block;width: 100%;text-align: center;margin:30px 0;float: left;} #products_list .btnbox a {display: inline-block;color: #52c1e0;border: 1px #52c1e0 solid;padding:15px 25px;} #products_list .btnbox a:hover {color: #fff;background: #52c1e0} #products_detail {padding:88px 15px;width: 70%;max-width: inherit;} #products_detail .unitbox {margin:0 0 36px;} #products_detail .unitbox h2 {position:relative;color: #f3b024;font-size: 2.25em;font-weight: bold;padding: 0 0 12px;margin:0} #products_detail .unitbox h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #products_detail .contentbox {width: calc(100% - 345px);padding-left: 40px;position: relative;right:0;float: right;} #products_detail .goodsbox {margin:0 0 60px;} #products_detail .imgbox {border: 1px #efefef solid;padding:35px;} #products_detail .imgbox img {width:100%;max-width: 100%} #products_detail .txtbox {padding-left: 50px} #products_detail .txtbox h3 {color: #52c1e0;font-size: 1.25em;margin:0 0 20px;font-weight: bold;} #products_detail .txtbox li {margin:0 0 10px;} #products_detail .btn-inquire {border: 1px #52c1e0 solid;color: #074f77;line-height: 58px;width: 100%;display: block;text-align: center;margin:40px 0 0;} #products_detail .btn-inquire:hover {color: #fff;background: #52c1e0} #products_detail .btn-inquire span {display: inline-block;padding-left: 5px;} #products_detail i.coin {width:22px;height:22px;background-image:url(../img/icon_coin.svg) ;display: inline-block;vertical-align: text-bottom;-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;} #products_detail .btn-inquire:hover i {background-image:url(../img/icon_coin_hover.svg) ;-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;} #products_detail .unitbox {margin:0 0 36px;} #products_detail .unitbox h3 {position:relative;color: #1a81d6;font-size: 1.25em;padding: 0 0 12px;margin:0 0 20px;font-weight: bold;} #products_detail .unitbox h3:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #products_detail ul.related_list li {padding:20px;border: 1px #c1c7c973 solid;} #products_detail ul.related_list a {color: #1a1a1a} #products_detail ul.related_list p {text-align: center;max-height:60px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;padding:25px 0;display: block;line-height: 1.25;font-size: .9em} #products_detail .btnbox {display: block;width: 100%;text-align: center;margin:30px 0;float: left;} #products_detail .btnbox a {display: inline-block;color: #52c1e0;border: 1px #52c1e0 solid;padding:15px 25px;} #products_detail .btnbox a:hover {color: #fff;background: #52c1e0} .box_set {height: 220px;background-size: cover!important;} #slider .flex-direction-nav {display: none;} #carousel {margin:10px 0 0;position: relative;padding: 0 26px;z-index: 0} #carousel .slides {position:relative;z-index: 5} #carousel .slides li {padding:5px;cursor: pointer;border: 2px #fff solid;} #carousel li.flex-active-slide {border: 2px #52c1e0 solid;transition: all .4s ease;} #carousel .flex-direction-nav {position: absolute;top:30px;left:0;width: 100%} #carousel a {color: rgba(0, 0, 0, 0);width: 17px;height: 29px;display: block;} #carousel .flex-nav-prev {position:relative;float: left;background: url(../img/icon_left.png) no-repeat;width: 17px;height: 29px;z-index: 8;} #carousel .flex-nav-next {position:relative;float: right;background: url(../img/icon_right.png) no-repeat;width: 17px;height: 29px;z-index: 8;} /* .sideNav */ #sideNav {width: 345px;float: left;} #sideNav a.all {display: none;} #sideNav a.item {display: block;} #sideNav ul.all-goods ul {display: none;} #sideNav ul a {color: #074f77;font-size: 1.125em;padding:10px 0;display: block;font-weight: bold;} #sideNav ul li > a:hover {color:#f3b024;} #sideNav ul li ul a {color: #1a81d6;padding-left: 15px;position: relative;font-size: .925em} #sideNav ul li ul a:before {position: absolute;content:'';width: 5px;height: 3px;background: #1a81d6;top:50%;left:0;} #sideNav ul li ul a:hover:before {background: #db0068;color:#db0068} #sideNav ul li ul a:hover, #sideNav ul li ul a.active {color:#db0068} #sideNav ul li ul a.active:before {position: absolute;content:'';width: 5px;height: 3px;background: #db0068;top:50%;left:0;} /* quote */ #quote {padding:88px 15px;max-width: 80%} #quote .unitbox {display: block;width: 100%;margin:0 0 60px;} #quote .unitbox h2 {color: #f3b024;font-size: 2.25em;padding: 0 0 12px;margin:0} #quote p.en {position:relative;color: #1a81d6;font: normal 1.325em/1 Inria Sans;padding:0 0 20px;margin:0 0 40px;} #quote p.en:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #quote .selectbox {width: 100%;margin:0 0 25px;padding: 30px 20px; background: linear-gradient(360deg, #1A81D6 0%, #52C1E0 80%); background: -moz-linear-gradient(360deg, #1A81D6 0%, #52C1E0 80%); background: -webkit-linear-gradient(360deg, #1A81D6 0%, #52C1E0 80%); background: -o-linear-gradient(360deg, #1A81D6 0%, #52C1E0 80%); } #quote .selectbox select {width: 100%;line-height:40px;border:none;padding: 10px 0;} #quote .quotebox {width: 100%;margin:0 0 32px;overflow: hidden;} #quote table {float: left;width: 100%;text-align: center;} #quote th {background: #e1e8ea;border: 1px #fff solid;width: 50%;line-height: 50px;font-weight: bold;} #quote td {border-bottom: 1px #e1e8ea solid;width: 50%;line-height: 42px} #quote .txtbox h3 {display: block;width: 100%;color: #1a81d6;margin:0 0 32px;font-size: 1.125em;font-weight: bold;} #quote .txtbox p {line-height: 1.8;font-weight: bold;} #quote .linkbox {display: block;width: 100%;text-align: center;margin:10rem 0 0;color: #1a81d6;line-height: 1.5;font-size: 1.125em;font-weight: bold;} #quote .linkbox img {max-width: 98px;margin:0 auto;margin:0 0 26px;} /* qc */ #qc {padding:88px 15px;} #qc .unitbox {display: block;width: 100%;margin:0 auto 60px;overflow: hidden;} #qc .unitbox p.en {color: #f3b024;font: normal 2.25em/1 Inria Sans;padding: 0 0 12px;margin:0} #qc h2 {position:relative;color: #1a81d6;font-size: 1.325em;font-weight: bold;padding:0 0 20px;margin:0 0 40px;} #qc h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #qc .unitbox p {line-height: 1.68;margin:0 0 40px;font-size: 1.125em} #qc .imgbox img {width: 100%;height: auto} #qc .imgbox p {color: #52c1e0;display: block;text-align: center;padding:20px 0 0;font-size: 1.125em} #qc .factory p {margin:0 0 50px;line-height: 2} #qc .factory img {float: right;margin-right:-168px;} #qc .equipments h3 {font-size: 1.25em;font-weight: bold;margin:0 0 26px;} #qc .equipments p {margin:0 0 30px;line-height: 2} #qc .equipments ul {margin: 0 0 26px;} #qc .equipments li {margin:0 0 16px;background: url(../img/arrow_ok.svg) no-repeat left top;background-size: 16px;padding:0 0 0 26px;} #qc ul.machine {width: 80%;overflow: hidden;margin: 0 auto;} #qc .machine li {float: left;width: 100%;height: 45vh;margin: 0 0 5rem;} #qc .machine li img {max-height: 100%;} #qc .machine li.set01 img {float: right;} #qc .machine li.set02 img {float: left;} #qc .machine li.set03 img {float: right;} /* #qc .machine li.set01 img {float: right;margin: 0 10% 0 0;} #qc .machine li.set02 img {float: left;margin: -10% 0 0 5%;} #qc .machine li.set03 img {float: right;margin: -15% 10% 0 0;}*/ /* process */ #process {padding:88px 15px;} #process .unitbox {display: block;width: 100%;margin:0 0 60px;} #process .unitbox p.en {color: #f3b024;font: normal 2.25em/1 Inria Sans;padding: 0 0 12px;margin:0} #process h2 {position:relative;color: #1a81d6;font-size: 1.325em;font-weight: bold;padding:0 0 20px;margin:0 0 40px;} #process h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #process ul.step {} #process ul.step li {float:left;width:100%;margin:0 0 42px;position: relative;} #process ul.step li:last-child {margin:0} #process ul.step .top {position:relative;width: 170px;height: 122px;float:left;background: url(../img/ybox.svg) no-repeat center center;text-align: center;color: #fff;margin-right: 46px} #process ul.step .inner {position: absolute;top: 50%;left: 50%;width: 90%;transform: translate(-50%,-50%);} #process ul.step .top span {display: block;width: 100%;font-size: 2.25em;margin: 0 0 6px;} #process ul.step .txt {float: left;width:calc(100% - 226px);font-size: 1.15em;color: #606060;line-height: 1.5} #process ul.step .txt span {font-size: .8em} #process ul.step .txt strong {display: inline-block;background: #db0068;width: 118px;min-height:66px;border-radius: 16px;text-align: center;color: #fff;font-size: .8em;padding:16px 20px;line-height: 1.2;margin:0 0 16px;} #process ul.step p.title {margin:0 0 12px;} #process ul.step p.note {font-size: .825em;min-height: 66px;} #process ul.step p.info {margin:15px 0 20px;text-align: left;} #process ul.step img {-webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3))} #process ul.step .setbox {max-width: 520px;text-align: center;} #process ul.list {float: left;width:calc(100% - 226px);font-size: 1.15em;color: #606060;line-height: 1.5;background: url(../img/dot.gif) repeat-y 84px top;} #process ul.list .subject {width: 198px;text-align: center;background: #fff;padding: 5px 0;} #process ul.list .number {display: inline-block;width: 60px;height: 60px;background: #52c1e0;border-radius: 99px;text-align: center;color: #fff;line-height: 60px;font-size: 1.5em;margin:0 0 12px;} #process ul.list .subject p {display: block;width: 100%;color: #52c1e0;font-size: 1.15em;font-weight: bold;} #process ul.list .subject span {font-size: .75em} #process .contentbox {width: calc(100% - 228px);margin-left: 20px;} #process .contentbox ul li {float: left;width: calc(100% / 3);text-align: center;margin:0;} #process .contentbox ul li p {display: block;width: 100%} #process .contentbox i {display: block;width: 37px;height: 37px;margin:0 auto 14px;} #process .contentbox i.set01 {background: url(../img/icon01.svg) no-repeat 0 0;} #process .contentbox i.set02 {background: url(../img/icon02.svg) no-repeat 0 0;} #process .contentbox i.set03 {background: url(../img/icon03.svg) no-repeat 0 0;} #process .contentbox p {display: inline-block;} #process .contentbox span {display: block;width: 100%;color: #db0068;font-size: .825em} #process .contentbox ul.type {max-width: 588px} #process .contentbox ul.type li {position: relative;float: left;width: calc(88% / 6);text-align: center;background: #d87567;color: #fff;height:96px;border-radius: 6px;margin:0 1% 35px;max-width: 70px} #process .contentbox ul.type li span.en {position: absolute;color: #fff} #process .contentbox ul.type li span.en:first-child {font-size: 1.15em;top:10px;padding:0 0 3px;} #process .contentbox ul.type li span.en:first-child:before {position: absolute;left: 50%;bottom:0;margin-left: -5.5px;background: #fff;width: 11px;height: 2px;content:''} #process .contentbox ul.type li span.en:last-child {bottom:18px;line-height: 1;vertical-align: middle;height: 18px} #process .contentbox ul.type li span.tw {position: absolute;bottom:10px;color: #fff;line-height: 1.1;min-height: 30px;} #process .contentbox ul.type p.comment-1 {position: absolute;bottom:-65px;left:-68px;font-size: small;color: #6b6b6b;width: 138px;text-align: justify;} #process .contentbox ul.type p.comment-2 {position: absolute;bottom:-45px;left:0;font-size: small;color: #6b6b6b;width: 78px;text-align: justify;} #infoTXT {float: left;text-align: left;font-size: 1.25em;} #infoTXT span {font-size: inherit;} #process ul.step .setbox button {float:left;display: block;width: 118px;line-height: 56px;text-align: center;color: #fff;border-radius: 12px;border: none;margin:12px 0 0;background: #1a81d6;} /* guide */ #guide {padding:88px 15px;} #guide .unitbox {display: block;width: 100%;margin:0 0 45px;} #guide .unitbox p.en {color: #f3b024;font: normal 2.25em/1 Inria Sans;padding: 0 0 12px;margin:0} #guide h2 {position:relative;color: #1a81d6;font-size: 1.325em;font-weight: bold;padding:0 0 20px;} #guide h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #guide .txtbox {margin:0 0 30px;padding-left: 50px} #guide .txtbox p {line-height: 1.5;color: #444;font-size: 1.15em;margin:0 0 5px;} #guide .txtbox p strong {display: inline-block;vertical-align: top;min-width: 40px;text-align: right;padding-right:10px;} #guide .txtbox p span {display: inline-block;width: calc(100% - 50px);vertical-align: bottom;} #guide .txtbox p span.software {background: url(../img/guide_img01.jpg) no-repeat 80% center;} #guide .guide-inner {padding: 0;margin:36px 0;} #guide .guide-inner img {width: 100%;height: auto} #guide .setbox {float: left;width: 100%;margin:20px 0;} #guide .redbox {background: #db0068} #guide .bluebox {background: #52c1e0} #guide .circle {position:relative;float: left;width: 110px;height: 110px;color: #fff;text-align: center;border-radius: 99px} #guide .circle p {width: 100%;line-height: 1;color: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-weight: bold;} #guide .circle p span {font-size: .8em} #guide ul.list {float: left;width:calc(100% - 160px);margin: 0 0 0 50px;} #guide ul.list li {padding-left: 26px;background: url(../img/arrow01.svg) no-repeat 0 center;background-size: 10px;} #guide ul.list li p {color: #0665c4} #guide .top-style {padding-top: 26px} /* about */ #about {padding:88px 15px;} #about .unitbox {display: block;width: 100%;margin:0 0 88px;} #about .unitbox p.en {color: #f3b024;font: normal 2.25em/1 Inria Sans;padding: 0 0 12px;margin:0} #about h2 {position:relative;color: #1a81d6;font-size: 1.325em;font-weight: bold;padding:0 0 20px;margin:0 0 40px;} #about h2:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #about .basic p {margin:0 0 50px;line-height: 2} #about .basic ul li {margin:0 0 15px;} #about .about-inner img {width: 100%} #about .certificates ul {} #about .certificates li {width: calc(100%/3);float: left;padding: 0 10px;} #about .certificates li img {width: 100%} #about .certificates li p {padding:20px 0 0;display: block;text-align: center;} #about .history {margin: 60px 0 0;background: url(../img/about_txt01.svg) no-repeat left top;background-size:150px;} #about .history .inner {margin: 60px 0 0;background: url(../img/about_txt02.svg) no-repeat right 30%;background-size:60%;} #about .history ul {} #about .history ul li {margin:0 0 30px;} #about .history span {color: #db0068;font: normal 2.25em/1 Inria Sans;padding:0 0 10px;display: block;} #about .factory p {margin:0 0 50px;line-height: 2} #about .factory img {float: right;margin-right:-168px;} #about .equipments h3 {font-size: 1.25em;font-weight: bold;margin:0 0 26px;} #about .equipments p {margin:0 0 30px;line-height: 2} #about .equipments ul {margin: 0 0 26px;} #about .equipments li {margin:0 0 16px;background: url(../img/arrow_ok.svg) no-repeat left center;padding:0 0 0 26px;} #about ul.machine {width: 75%;overflow: hidden;margin: 0 auto;} #about .machine li {float: left;width: 100%;height: 35vh} #about .machine li img {max-height: 100%;} #about .machine li.set01 img {float: right;margin: 0 10% 0 0;} #about .machine li.set02 img {float: left;margin: -10% 0 0 5%;} #about .machine li.set03 img {float: right;margin: -15% 10% 0 0;} /* contact */ #contact {padding:88px 15px;width: 70%;max-width: inherit;margin: 0 auto 5rem;} #contact .unitbox {display: block;width: 100%} #contact .unitbox h2 {color: #f3b024;font-size: 2.25em;font-weight: bold;padding: 0 0 12px;margin:0} #contact .unitbox p.en{position:relative;color: #1a81d6;font-size: 1.325em;font-weight: normal;padding:0 0 20px;margin:0 0 40px;} #contact .unitbox p.en:before {position: absolute;content:'';width: 24px;height: 5px;background: #1a81d6;bottom:0} #contact .contentbox {width: 100%} #contact .infobox p {max-width: 580px;line-height: 1.5} #contact .infobox form {display: block;width: 80%;margin:55px 0 0;} #contact .infobox input {border-radius: 0} #contact .infobox textarea {min-height: 222px} #contact .infobox a.replace {color: #0665c4;text-decoration:underline;font-size: .925em;margin:10px 0 0;display: block;width: 100%;} #contact .infobox a.replace:hover {text-decoration: none;} #contact .infobox .btnbox {padding:30px 15px 0;} #contact .infobox .btn-send {background: #52c1e0;color: #fff;width: 158px;line-height: 58px;padding: 0;border-radius: 0} #contact .mapbox h3 {display: block;color: #1a81d6;font-size: 1.5em;font-weight: bold;} #contact .mapbox small {display: block;color: #d87567;padding-top: 5px;font-size: .825em;} #contact .mapbox iframe {display: block;width: 100%;margin: 30px 0 0;height:calc(100% - 250px);} #contact .form-check-inline {width: 100%;margin-bottom: 12px;} #contact .codebox {line-height: 38px;margin-top: -22px;border: 1px solid #ced4da;width: calc(33.333333% - 15px);flex:inherit;} /*單元分類*/ 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 {position:relative;padding: 40px 0 108px;border-top: 1px #aab8c1 solid} footer .inner {width: 88%;max-width: 88%;} footer .factory {margin-bottom: 28px} footer h4 {display: block;font-weight: bold;font-size: 1.625em;margin-bottom: 20px} footer ul.qlink {float:right;} footer ul.qlink a {display: block;color: #4a4a4a;padding: 10px} footer ul.qlink a:hover {opacity: .5} footer ul.qlink li {display: inline-block;} footer .footer-social {float: right;display:block;width:100%;height: 28px;text-align: right;margin-top: 38px} footer .footer-social img {width: 28px;margin:0 5px;} 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;padding:0 10px 0 0;} /* 置頂 */ #toTop {display: none;text-decoration: none;position: fixed;bottom: 20%;right: 1%;overflow: hidden;width: 50px;height: 50px;border: none;text-indent: 100%;background: url(../img/arrow_top.svg) no-repeat center center;background-size: 17px;z-index:9;border-radius: 99px;border: 2px #52c1e0 solid} #toTopHover {background: url(../img/arrow_top.svg) no-repeat center center;background-size: 17px;width: 50px;height: 50px;display: block;overflow: hidden;float: left;opacity: 0;-moz-opacity: 0;filter: alpha(opacity=0);} #toTop:active, #toTop:focus {outline:none;} /* 單元選單 */ #nav_menu {width: 100%} #nav_menu a.item {display: none;} @media (min-width: 1024px) and (max-width: 1600px) { #products .imgbox {height: 308px;} footer p span {padding:0 10px 5px 0;} } /* 1366 */ @media (min-width: 1024px) and (max-width: 1366px) { ul.unit-menu {padding-left: 4rem;} ul.unit-menu a {font-size: 14px;padding: 0 10px;} #products .imgbox {height: 227px;} } @media only screen and (max-width: 1280px) { body {overflow-x: hidden;} a:focus, button {display:block} .pc {display:none!important;} .mobile {display:block!important;} .navbar {display:block} .logo, .unit-menu {display:none} .container {max-width: 100%} ul.unit {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} 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: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:15% 0 0;text-align:center;text-align: left;} .navbar-inverse .navbar-nav>li {float:left;width:100%;padding:20px 0;border-bottom: 1px solid #ececec;} .navbar-inverse .navbar-nav>li>a {display:block;padding:0;font-size:1.88ex;color:#434343;letter-spacing: .1em;} .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-inverse li.social {position: relative;border:none;text-align: right;padding:15px 0 0;} .navbar-inverse li.social:before {content: 'Follow Us';position: absolute;left: 0;top: 10px;font-size: 15px} .navbar-inverse li.social a {display: inline-block;width: 26px;margin:0 0 0 12px;;} .navbar-inverse li.social img {display: block;max-width: 20px} .navbar-inverse .nav_contact img {display: none} .main-visual {height:auto} .mapbox iframe {height:240px} #products .imgbox {height: 156px;} .titlebox h1 {font-size:2em;margin:0} .titlebox p {font-size:1em;letter-spacing:0} a.scrolldown {bottom: 28px} #products_list ul.goods li {width: calc(100%/3 - 15px);} footer .inner {width: 100%;max-width: 100%;} /* 手機選單*/ .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: #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;} .overlay.open {opacity: 1;visibility: visible;height:100%} .button_container {position:fixed;top:17.5px;right:15px;height: 27px;width: 32px;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(8px) translateX(0) rotate(45deg); transform: translateY(8px) translateX(0) rotate(45deg); background: #606060; } .button_container.active .middle {opacity: 0;background: #FFF;} .button_container.active .bottom { -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); transform: translateY(-8px) translateX(0) rotate(-45deg); background: #606060; } .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: 8px;} .button_container span:nth-of-type(3) {top: 16px;} #products_type ul.goods li {width: calc(100%/2 - 3%)} } @media only screen and (max-width: 1280px) { .row {margin: 0} footer .inner {width: 100%;max-width: 100%;} } @media only screen and (max-width: 768px) { body {overflow-x: hidden;} a:focus, button {display:block} .pc {display:none!important;} .mobile {display:block!important;} .navbar {display:block} .logo, .unit-menu {display:none} .container {max-width: 100%} .row {display: block;} ul.unit {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";}*/ #sideNav {float: none;width: 100%;margin: 0;} #sideNav ul {display: none;margin: 0 20px 3rem;} #sideNav a.all {position: relative;margin: 0 15px 20px;background:#52c1e0;display: block;line-height: 50px;color: #fff;text-align: center;border-radius: 6px;} #sideNav a.all .fa-angle-down {display: block;font-size: 15px;position: absolute;right: 10px;top: 50%;margin-top: -6px;} #sideNav a.all .fa-angle-down:before {content: "\f107";} #sideNav a.open .fa-angle-down:before {content: "\f106";} header {position:fixed;top:0;left:0;width: 100%;padding:0;z-index: 99} 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: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:15% 0 0;text-align:center;text-align: left;} .navbar-inverse .navbar-nav>li {float:left;width:100%;padding:20px 0;border-bottom: 1px solid #ececec;} .navbar-inverse .navbar-nav>li>a {display:block;padding:0;font-size:1.88ex;color:#434343;letter-spacing: .1em;} .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-inverse li.social {position: relative;border:none;text-align: right;padding:15px 0 0;} .navbar-inverse li.social:before {content: 'Follow Us';position: absolute;left: 0;top: 10px;font-size: 15px} .navbar-inverse li.social a {display: inline-block;width: 26px;margin:0 0 0 12px;;} .navbar-inverse li.social img {display: block;max-width: 20px} .navbar-inverse .nav_contact img {display: 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} /* 首頁設定 */ .unitarea {padding: 0 15px;} .unitarea .set01, .unitarea .set02 {min-height: 258px} .unitarea .imgbox p {font: bold 1.8em/1.2 'Inria Sans', sans-serif;} .unitarea .imgbox .inner {left: 0;} .unitarea .txtbox {padding: 25px 15px;} .unitarea .txtbox h2 {font-size: 1.8em;margin-bottom: 15px;} .unitarea .txtbox p {margin-bottom: 26px;line-height: 1.8;} .unitSet2 {padding: 50px 15px;} .unitSet2 h2 {font-size:1.8em;} .unitSet2 .leftbox {padding: 40px 10px;} .unitSet2 .imgbox div:last-child {margin:0 0 10px;} .unitSet2 .imgbox > div {padding:0;} main {padding: 20px 0 0;} .contactbox a {font-size:2em;padding-left: 40px} .contactbox a:before {top: 5px} .video-container {height: 248px} .banner {min-height:inherit;top:50px;margin:0 0 50px;padding: 0 0 30px;} .banner .inner {width: 100%;top: 40%;} .banner .inner h1 {font-size: 1.5em} .banner .carousel-indicators {background: transparent;padding:5px 0;} .banner .carousel-indicators li {width: 8px;height: 8px;} .banner .titlebox {width: 188px;top:15%;} .banner a.downbox {width: 188px;min-height: 40px;bottom:36px;font-size:small;background-size: 10px;} .carousel-control-prev, .carousel-control-next {display: none;} .unitA, .unitB, .unitC, .unitD, .unitE {min-height: 150px!important} #casearea .toparea {padding: 30px 0 18px;} .main-visual .title {font-size: 1.5em} #news {padding:0 10px 40px;overflow: hidden;} #news .unitbox {margin: 0 15px 40px;width: inherit;} #news ul.list {margin: 0 10px;width: auto;} #news ul.list li {max-width: 48%;flex:0 0 483%;-ms-flex:0 0 48%;} #news ul.unit {margin: 0 10px 40px;width: auto;} #news ul.unit li {display: block;} #news ul.unit a {width: inherit;} #news ul.list span {margin: 24px 0;} #products {width: inherit;margin:0 10px 0;padding: 58px 0;} #products > div {padding:0;margin: 0;} #products ul.list {padding:0;} #products ul.list li:first-child, #products ul.list li:nth-child(2) {width:100%!important;margin: 0 0 10px;} #products ul.list li {width: calc(100%/2 - 5px);margin: 0 0 10px;} #products ul.list li:nth-child(odd) {float: left;} #products ul.list li:nth-child(even) {float: right;} #products .txtbox {padding: 10px} #products_type {width: inherit;margin:0 10px 0;padding: 58px 0;} #products_type .contentbox {float:none;margin: 0 15px;width: inherit;padding:0;} #products_type ul.goods li {width: calc(50% - 10px);padding: 10px;margin: 0 5px 16px;} #products_type ul.goods p {max-height: 60px;line-height: 1.2} #products_type .owl-nav {display: none;} #products_list {width: inherit;margin:0 10px 0;padding: 58px 0;} #products_list .contentbox {width: inherit;padding: 0} #products_list .unitbox {margin: 0 15px 20px;width: inherit;} #products_list .unitbox p.en {margin: 0 0 20px;} #products_list ul.goods {width:inherit;margin: 0 10px 0;} #products_list .count {margin: 0 10px 0;} #products_list ul.goods li {width: calc(100%/2 - 5px);margin:0 0 10px;} #products_list ul.goods li:nth-child(odd) {float: left;} #products_list ul.goods li:nth-child(even) {float: right;} #products-inner {width: inherit;} #products_detail {width: inherit;margin:0 10px 0;padding: 58px 0;} #products_detail .contentbox {margin: 0 15px;width: inherit;padding:0;float:none;} #products_detail .goodsbox img {max-width: 100%} #products_detail .imgbox {margin:0 0 30px;} #products_detail .owl-nav {display: none;} #post {padding:0 10px 50px;} #post .unitbox {margin: 0 15px 40px;} #post .contentbox ul.list {margin: 36px 0;} #post .contentbox .owl-nav {display: none;} #post .contentbox a.back {display: block;text-align: center;} #quote {width: inherit;margin:0 15px 0;max-width:100%;} #quote .unitbox {margin: 0 10px 40px;width: inherit;} #quote .linkbox {margin: 5rem 0 0;} #quote .txtbox p {margin: 0 0 15px;} #guide {padding:0 10px 50px;} #guide .txtbox {padding-left:0;} #qc {padding:0 10px 40px;overflow: hidden;} #qc .unitbox {margin: 0 10px 60px;width:inherit;} #qc ul.machine {width: 98%;} #qc .machine li {margin: 0 0 1rem;height: 30vh;} #qc .machine li img {width: 100%;} #guide .txtbox p span.software {padding-bottom: 130px;background: url(../img/guide_img01.jpg) no-repeat 50% 90%;} #guide .txtbox p.style01 {text-indent: -1em;margin-left: 1em;} #guide .circle {width: 100%;height: 60px;} #guide ul.list {width: auto;margin: 0 0 0 25px;padding-top:25px;} #process {padding:0 10px 50px;} #process .unitbox {margin: 0 15px 60px;width:inherit;} #process h2 {} #process ul.step {text-align: center;} #process ul.step .top {width: 100%;margin:0 0 24px;} #process ul.list {width: 100%;background: url(../img/dot.gif) repeat-y 50% top;} #process ul.list .subject {width: 100%;margin: 0 0 30px;} #process .contentbox {width: 100%;margin:0;background: #fff;overflow: hidden;} #process .contentbox ul {text-align: center;} #process .contentbox ul li {width: 100%} #process .contentbox ul.type {margin: 0 10px 0;} #process .contentbox ul.type li {width: 100%;max-width:inherit;margin: 0 0 10px;position: relative;} #process .contentbox ul.type li.empty {margin: 0 0 40px} #process .contentbox ul.type p.comment-1 {bottom: -25px;left:0;width: 100%;text-align: center;} #process .contentbox ul.type p.comment-2 {bottom: -25px;left:0;width: 100%;text-align: center;} #process ul.step .txt {width:96%;margin:0 auto 10px;float:none;} #process ul.step .txt strong {margin:0 0 10px;} #process ul.step p.note {margin:0 0 30px;min-height: 40px;} #process ul.step p.info {text-align: center;margin: 15px 0 20px;} #process ul.step img {margin:0 auto 50px;} #about {padding:0 10px 40px;overflow: hidden;} #about .unitbox {margin: 0 0 60px;width:inherit;} #about .basic ul li {line-height: 1.5} #about .certificates li {width: calc(100%/2);margin:0 0 15px;} #about .certificates li p {padding: 10px 0 0;} #about .history .inner {background: none;} #about .equipments li {background: url(../img/arrow_ok.svg) no-repeat left top;background-size: 20px;line-height: 20px;margin: 0 0 15px;} #about .factory img {max-width: 100%;margin:0 0 20px;} #about ul.machine {width: 100%;text-align: center;} #about .machine li {height:auto;margin: 0 0 15px!important} #about .machine img {max-width: 100%;margin:0 0 20px!important;float: none!important} #contact {padding:50px 10px 0;overflow: hidden;width: 100%;margin: 0 auto 2rem;} #contact .unitbox {margin: 0 10px 60px;width:inherit;} #contact .contentbox {width:auto;padding: 0 10px;padding: 0;margin: 0;} #contact .infobox {margin: 0 0 60px;} #contact .infobox form {width:inherit;margin: 30px 0 0;} #contact .form-check-inline {margin:0 0 10px;display: block;} #contact .col-form-label {width: 100%} #contact .codebox {margin: 10px 15px 0;width: calc(100% - 30px);} #contact .infobox .btnbox {padding: 0 15px 0;} #contact .infobox .btn-send {width: 100%;line-height:48px;} #contact .mapbox iframe {margin: 15px 0 0;} .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 .inner {width: 100%;max-width: 100%;} footer .row {display: block} footer .col-4, footer .linkarea, footer ul.qlink {display: none} footer h4 {margin: 0 0 15px;font-size: 1.25em;font-weight: 700} footer p {margin: 0 0 8px;font-size: 14px} footer p span {padding: 0 10px 5px 0;} 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 .footer-social {text-align: center;margin: 20px auto;} 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: #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;} .overlay.open {opacity: 1;visibility: visible;height:100%} .button_container {position:fixed;top:17.5px;right:15px;height: 27px;width: 32px;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(8px) translateX(0) rotate(45deg); transform: translateY(8px) translateX(0) rotate(45deg); background: #606060; } .button_container.active .middle {opacity: 0;background: #FFF;} .button_container.active .bottom { -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); transform: translateY(-8px) translateX(0) rotate(-45deg); background: #606060; } .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: 8px;} .button_container span:nth-of-type(3) {top: 16px;} }