/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
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: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

html { font-size: 75%; }

body { font-family: "Microsoft JhengHei", "LiHei Pro"; font-size: 1.25rem; line-height: 1.5; background: #f6f5f3; }

.loading { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: rgba(255, 255, 255, 0.75); z-index: 10001; }
.loading .pic { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; background-image: url("../images/loading.png"); overflow: hidden; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.mob { display: block; }
@media (min-width: 992px) { .mob { display: none; } }

.dsk { display: none; }
@media (min-width: 992px) { .dsk { display: block; } }

.anim { display: none; }

.hide { visibility: hidden; }

.wrapper { position: relative; width: 100%; overflow: hidden; }

.site-header { position: fixed; left: 0; top: 0; width: 100%; height: 70px; background: none; z-index: 10000; -moz-transition: background 0.4s; -o-transition: background 0.4s; -webkit-transition: background 0.4s; transition: background 0.4s; }
.site-header .btn-open { position: absolute; right: 15px; top: 15px; }
.site-header.active { background: rgba(255, 255, 255, 0.9); -moz-transition: background 0.4s; -o-transition: background 0.4s; -webkit-transition: background 0.4s; transition: background 0.4s; }
.site-header.active .site-nav ul li a { color: #000; -moz-transition: color 0.4s; -o-transition: color 0.4s; -webkit-transition: color 0.4s; transition: color 0.4s; }
.site-header.active .menui { background: #000; }
@media (min-width: 768px) { .site-header .btn-open { display: none; } }

.site-logo { position: absolute; left: 15px; top: 15px; text-indent: -9999px; }
.site-logo img { position: absolute; left: 0; top: 0; width: 166px; }
.site-logo img.black { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
@media (min-width: 768px) { .site-logo img { width: 222px; } }

.site-nav { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: rgba(246, 245, 243, 0.95); display: none; }
.site-nav ul { padding-top: 95px; }
.site-nav ul li a { font-size: 1.25rem; font-weight: bold; color: #000; text-decoration: none; text-align: center; line-height: 60px; width: 100%; display: block; -moz-transition: color 0.4s; -o-transition: color 0.4s; -webkit-transition: color 0.4s; transition: color 0.4s; }
.site-nav ul li a:hover { text-decoration: underline; }
@media (min-width: 768px) { .site-nav { position: absolute; right: 0; top: 0; width: auto; height: auto; background: none; display: block !important; }
  .site-nav ul { padding: 0; text-align: right; }
  .site-nav ul li { display: inline-block; }
  .site-nav ul li a { font-size: 1.33333rem; color: #fff; line-height: 70px; width: auto; padding: 0 25px; } }

.site-footer { position: relative; width: 100%; background: #dbd7d6; font-size: 1rem; text-align: center; padding: 15px 0; z-index: 6; }
@media (min-width: 768px) { .site-footer { font-size: 1.16667rem; } }

.btn-top { position: fixed; right: 15px; bottom: 50px; display: none; z-index: 7; }

section { position: relative; background: #f6f5f3; }

section.top { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1; }
section.top .bg-all .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
section.top .bg-all .bg.b1 { background-image: url("../images/top_bg1.jpg"); }
section.top .bg-all .bg.b2 { background-image: url("../images/top_bg2.jpg"); }
section.top .bg-all .bg.b3 { background-image: url("../images/top_bg3.jpg"); }
section.top .bg-all .bg.b4 { background-image: url("../images/top_bg4.jpg"); }
section.top .bg-all .bg.b5 { background-image: url("../images/top_bg5.jpg"); }
section.top .bg-all .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 9999; }
section.top .tit { position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; z-index: 9999; }
section.top .tit img { width: 100px; }
section.top .pagination { position: absolute; left: 0; bottom: 60px; width: 100%; text-align: center; z-index: 9999; }
section.top .pagination ul li { display: inline-block; margin-right: 4px; }
section.top .pagination ul li:last-child { margin-right: -4px; }
section.top .pagination ul li a { width: 8px; height: 8px; display: block; border: 2px solid rgba(255, 255, 255, 0.2); -moz-transition: border 0.4s; -o-transition: border 0.4s; -webkit-transition: border 0.4s; transition: border 0.4s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
section.top .pagination ul li a.active { border: 2px solid white; -moz-transition: border 0.4s; -o-transition: border 0.4s; -webkit-transition: border 0.4s; transition: border 0.4s; }
section.top .scroll { position: absolute; left: 50%; bottom: 15px; margin-left: -27.5px; width: 55px; height: 22px; background: url("../images/top_scroll.png") 0 0 no-repeat; background-size: 100%; z-index: 9999; }
section.top .scroll .arrow { width: 100%; }
@media (min-width: 768px) { section.top .tit { margin: -78px 0 0 -67px; }
  section.top .tit img { width: 134px; }
  section.top .pagination { right: 45px; top: 50%; left: auto; bottom: auto; margin-top: -50px; width: auto; }
  section.top .pagination ul li { display: block; margin: 0 0 10px 0; }
  section.top .pagination ul li:last-child { margin: 0; }
  section.top .pagination ul li a { width: 10px; height: 10px; border: 3px solid rgba(255, 255, 255, 0.2); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
  section.top .pagination ul li a.active { border: 3px solid white; -moz-transition: border 0.4s; -o-transition: border 0.4s; -webkit-transition: border 0.4s; transition: border 0.4s; }
  section.top .scroll { margin-left: -31.5px; width: 63px; height: 25px; } }

section.space { width: 100%; height: 100vh; }

section.point { padding: 40px; z-index: 3; }
section.point .inner { position: relative; width: 100%; border: 5px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 27px; text-align: center; letter-spacing: 1px; }
section.point .inner h2.tit { font-size: 1.5rem; color: #d8b339; }
section.point .inner p { font-size: 1.08333rem; color: #383838; }
section.point .inner .line { width: 100%; height: 9px; background: url("../images/point_line.png") center center no-repeat; margin: 20px 0; }
@media (min-width: 768px) { section.point { padding: 80px; }
  section.point .inner { max-width: 380px; margin: 0 auto; border: 10px solid #fff; padding: 50px; }
  section.point .inner h2.tit { font-size: 1.66667rem; }
  section.point .inner p { font-size: 1.25rem; }
  section.point .inner .line { background-size: 25%; } }

section.work { z-index: 4; }
section.work .kv { position: relative; width: 100%; height: 250px; background: url("../images/work_kv.jpg") center center no-repeat; background-size: cover; }
section.work .kv .tit { position: absolute; left: 50%; top: 50%; margin: -42px 0 0 -57.5px; }
section.work .kv .tit img { width: 115px; }
section.work .inner { padding: 65px 0; }
section.work .inner .item { text-align: center; margin-bottom: 20px; }
section.work .inner .item:last-child { margin: 0; }
section.work .inner .item p { font-size: 1rem; margin: 20px; }
section.work .inner .item .icon { width: 105px; }
section.work .inner .item .arrow { width: 9px; display: inline-block; }
section.work .inner .item .arrow.dsk { display: none; }
@media (min-width: 768px) { section.work .kv { height: 500px; }
  section.work .kv .tit { margin: -60px 0 0 -100.5px; }
  section.work .kv .tit img { width: 201px; }
  section.work .inner { padding: 100px 0; max-width: 980px; margin-left: auto; margin-right: auto; }
  section.work .inner:after { content: " "; display: block; clear: both; }
  section.work .inner .item { width: 25%; float: left; position: relative; }
  section.work .inner .item p { font-size: 1.33333rem; }
  section.work .inner .item .arrow.mob { display: none; }
  section.work .inner .item .arrow.dsk { position: absolute; right: -30px; top: 50px; width: auto; display: block; } }

section.contact { background: #fff; z-index: 5; }
section.contact .kv { position: relative; width: 100%; height: 250px; background: url("../images/contact_kv.jpg") center center no-repeat; background-size: cover; }
section.contact .kv .tit { position: absolute; left: 50%; top: 50%; margin: -42px 0 0 -123px; }
section.contact .kv .tit img { width: 246px; }
section.contact .map { position: relative; width: 100%; height: 350px; background: #000; }
section.contact .inner { padding: 40px 0; text-align: center; font-size: 1.16667rem; color: #383838; }
section.contact .inner p { font-size: 1rem; margin: 20px; }
section.contact .inner p:last-child { margin: 0; }
section.contact .inner p.company { font-size: 1.33333rem; }
section.contact .inner p a { color: #383838; text-decoration: none; }
@media (min-width: 768px) { section.contact .kv { height: 500px; }
  section.contact .kv .tit { margin: -60px 0 0 -210px; }
  section.contact .kv .tit img { width: 420px; }
  section.contact .map { height: 400px!important; }
  section.contact .map .inner { position: relative; width: 50%; height: 100%; float: right; padding: 40px 40px 40px 0; }
  section.contact .map .inner .box { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); padding-top: 80px; }
  section.contact .map .inner .box p { margin: 0 0 30px 0; font-size: 1.16667rem; letter-spacing: 2px; }
  section.contact .map .inner .box p.company { font-size: 2rem; }
  section.contact .map .inner .box p.addr { font-size: 1.33333rem; } }

#map-loader { position: absolute; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; }
.rwd-map {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.rwd-map iframe {
  position: absolute;
  width: 100%;
  height: 100%; 
  left: 0; 
  top: 0;
}