* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding: 0; }
ul, li { list-style: none;	margin: 0; padding: 0; }
html { height: 100%; width: 100%; position: fixed; overflow: hidden; -ms-touch-action: none; }
body { font-family: "Times New Roman", "Noto Sans TC", "Noto Sans CJK TC", "Helvetica", "LiHei Pro", "黑體-繁", "微軟正黑體", sans-serif; color: #333; -webkit-overflow-scrolling: touch; }
hr { border-color: black; }

a[data-target]:not(.active),
a[data-photoset]:not(.active),
a[data-services]:not(.active),
a[data-func]:not(.active),
.radio{ cursor: pointer; }
a{ color: black; transition: all .2s ease; }
a:hover, a:active, a:focus{ color: #00000080; text-decoration: none; }

.nav>li[data-hidden=true]{ display: none!important; }

/* Layout */
.layout{ position: absolute; top: -100%; right: 0; width: 100%; height: 100%; overflow: hidden; z-index: 100; }
.layout.active{ z-index: 200; top: 0!important; }
.layout.active.init{ transition: all 0s!important; }
.layout.hidden{ z-index: -1; }
.layout[data-horizontal]{ top: 0; right: 0; }
.layout[data-dark]{ color: white; }
.layout[data-dark] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #333; }
.layout[data-dark] .mCSB_scrollTools .mCSB_draggerRail{ background-color: white; }

/* Navbar */
.navbar{ margin-bottom: 0; }
.navbar-left{ display: none; }
.navbar-default{ background: transparent; border-color: transparent; min-height: 150px; }
.nav.navbar-nav{ display: flex; width: 100%; padding: 0 100px; top: 65px; position: relative; }
.nav.navbar-nav>li{ flex: 1; }
.navbar-logo{ color: transparent; background-image: url('../images/logo.png'); background-repeat: no-repeat; background-size: 100%; width: 80px; height: 80px; position: absolute; top: 65px; margin-left: -40px; }
*[data-dark] .navbar-logo{ background-image: url('../images/logo.white.png'); }

.section .navbar-logo{ width: 4em; height: 4em; margin-left: -2.5em; }

.hidden{ display: none; } /*for ANCHORS*/
.disabled-show{ color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  }
.disabled-select{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  }

.navbar-brand{ height: 70px; padding: 0; }
.navbar-brand>span{ display: none; }
.navbar-button{ float: right }

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover>p,
.navbar-default .navbar-nav>li>a:focus>p{ color: black; }
.navbar-default .navbar-nav>li>a:not(.active):hover>p:before,
.navbar-default .navbar-nav>li>a:not(.active):focus>p:before{ width: 85px; }
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a.active>*{ color: #333; }
.navbar-default .navbar-nav>li>a.active>p:before{ width: 85px; background-color: #333; }
.navbar-default .navbar-nav>li>a{ height: 80px; text-align: center; color: #00000080; font-weight: 700; }
.navbar-default .navbar-nav>li>a>span{ display: block; margin-top: 7px; }
.navbar-default .navbar-nav>li>a>p{ font-weight: 600; text-transform: uppercase; }
.navbar-default .navbar-nav>li>a>p:before{ content: ''; position: absolute; left: 0%; right: 0%; top: 51px; width: 0px; height: 1px; background-color: black; margin: 0 auto; transition: all .2s ease; }

@media (min-width: 768px){
  *[data-dark] .navbar-default .navbar-nav>li>a{ color: #ffffff40; }
  *[data-dark] .navbar-default .navbar-nav>li>a:hover,
  *[data-dark] .navbar-default .navbar-nav>li>a:focus,
  *[data-dark] .navbar-default .navbar-nav>li>a:hover>p,
  *[data-dark] .navbar-default .navbar-nav>li>a:focus>p{ color: white; }
  *[data-dark] .navbar-default .navbar-nav>li>a.active,
  *[data-dark] .navbar-default .navbar-nav>li>a.active>*{ color: #efefef; }
  *[data-dark] .navbar-default .navbar-nav>li>a.active>p:before{ width: 85px; background-color: #efefef; }
  *[data-dark] .navbar-default .navbar-nav>li>a>p:before{ background-color: white; }
}

.navbar-default .navbar-toggle{ border: 0px transparent; font-size: 14pt; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ background: transparent; }
.navbar-default .navbar-toggle .icon-bar { background-color: black; }
*[data-dark] .navbar-default .navbar-toggle.collapsed .icon-bar{ background-color: white; }
*[data-dark] .navbar-default .navbar-toggle:not(.collapsed) .icon-bar{ background-color: black; }
.navbar-toggle{ padding: 0; margin-right: 10px; margin-top: -9px; height: 60px; transition: all .2s ease; }
.navbar-toggle .icon-bar { display: block; width: 30px; height: 1px; margin-top: 12.5px!important; transition: all .2s ease; }
.navbar-toggle .icon-bar:first-child{ width: 20px; }
.navbar-toggle .icon-bar:last-child{ width: 20px; float: right; }
.navbar-default .navbar-collapse, .navbar-default .navbar-form{ border: 0; transition: all .2s ease; }

/* Mobile */
.mobile{ visibility: hidden; }
.mobile-container{ display: inline-flex; position: absolute; top: 0; padding: 7.5px 0; width: calc(100% - 30px); z-index: 900; }
.mobile-container a{ text-align: center; padding: 15px; margin: auto; opacity: 0; }
.mobile-container a:first-child{ height: 70px; width: 70px; padding: 23px; margin: 0; font-size: 14pt; text-align: center; }
.mobile-toggle{ background: transparent; border: 0px transparent; outline: 0; margin: 0; padding: 0; height: 70px; width: 70px; font-size: 14pt; text-align: center; }
.mobile-container a[data-target],
.mobile-container a[data-photoset]{ opacity: 1; }

/* Sidebar */
.sidebar{ position: absolute; left: 3em; z-index: 101; height: calc(100vh - 200px); margin-top: 50px; width: calc(50vw - 570px - 3em); }
.sidebar-content{ overflow-y: auto; height: 100%; }
.sidebar-content h1{ font-size: 18pt; margin-bottom: 1em; }
.sidebar-vertical{ position: absolute; height: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.sidebar-category+.sidebar-category,
.sidebar-list+.sidebar-list{ margin-top: 20px; }
.sidebar-title{ font-weight: 600; }
.sidebar-title h2{ font-size: inherit; display: inline; font-weight: 600; }
.sidebar-title.collapsed:before{ content: '\25B8'; }
.sidebar-title:not(.collapsed):before{ content: '\25BE'; }
.sidebar-item{ margin-top: 10px; margin-left: 15px; }
.sidebar-item small{ color: gray; margin-left: 10px; }

/* Section */
.section{ margin-top: 50px; height: calc(100vh - 250px); position: relative; z-index: 100; }
.section .container{ position: absolute; height: 100%; overflow: hidden;  z-index: 1; margin: 0 auto; left: 0%; right: 0%; }
.section-left{ width: 20px; height: 100%; position: absolute; left: 5px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; }
.section-right{ width: 20px; height: 200px; right: 0; position: absolute; }
.section-logo{ display: block; margin: 100px 0 10px; font-weight: 900; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); transition: all .2s ease; }
.section-button{ padding: 2px; text-align: center; display: block; margin: 20px 0; transition: all .2s ease; }
.section-middle{ width: calc(100% - 30px); height: 100%; position: absolute; }
.section>[data-scroll=true] .section-middle{ overflow-x: hidden; overflow-y: auto; }
.section-middle .section-content{ position: unset; margin: 0 auto; padding: 0 30px; float: none; min-height: 100%; }
.section-controller{ height: 100%; }
.section-left .section-border,
.section-right .section-border{ display: inline-block; background: black; height: 1px; width: 1px; margin-left: 9.5px; transition: all .5s ease; }
*[data-dark] .section-border{ background: white; }
.section-buttons{ margin: 20px 0; text-align: center; }
.section-buttons[data-margin=large]{ margin-top: 50px; margin-bottom: 50px; }
.section-buttons a{ display: inline-block; font-size: 120%; line-height: 32px; min-height: 32px; width: 20px; transition: all .2s ease; }
.section-buttons a:last-child{ min-height: 0; }
.section-buttons iframe{ border: 0; height: 32px; width: 20px; margin-bottom: -6px; display: inline-block; transition: all .2s ease; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }
.section-buttons iframe:hover, .section-buttons iframe:focus{ opacity: 0.7; }
*[data-dark] a{ color: white; transition: all .2s ease; }
*[data-dark] .radio.active{ cursor: auto; }
*[data-dark] .radio:not(.active){ color: rgba(64, 64, 64, 0.8); }
*[data-dark] .radio:not(.active):hover,
*[data-dark] .radio:not(.active):focus,
*[data-dark] a:hover, *[data-dark] a:focus{ color: #ffffff80; }
*[data-dark] .radio:hover, *[data-dark] .radio:focus{ color: white; }

.section-buttons a>hr{ width: 10px; }
.section-namespace{ font-size: 8pt; font-weight: 600; line-height: 12pt; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; }
.section-nav{ position: absolute; margin-top: calc(50vh - 550px / 2); }
.section-nav>li>a{ color: #00000080; font-size: 64px; line-height: 60px; text-transform: uppercase; }
.section-nav>li>a:hover, .section-nav>li>a:active, .section-nav>li>a:focus{ color: black; }
*[data-dark] .section-nav>li>a{ color: white; }
*[data-dark] .section-nav>li>a:hover, .section-nav>li>a:active, .section-nav>li>a:focus{ color: #ffffff80; }

/* Title h1*/
.section-about h1,
.section-blog h1,
.section-portfolio h1,
.section-sitemap h1,
.section-artisan h1{ font-weight: bold; margin: 1em auto; }
.section-tag h1{ font-size: 30px; text-align: center; }
.section-tag h1:after{ content: ''; display: block; background: url(../images/slogan.png) bottom/45% no-repeat; height: 120px; }
h1.slogan{ font-size: 10pt; position: absolute; bottom: 2em; text-align: center; }
.gold,
*[data-dark] a.gold{ color: #c6a36e; }
*[data-dark] a.gold:hover, a.gold:focus{ color: #c6a36eb3; }

/* layout About */
.section-about>.section-block{ min-height: 6.5em; padding: 0 1em; margin-top: 4em; float: left; }
.section-about>.section-block:last-child{ margin-bottom: 3em; }
.section-about h4{ margin: 25px 0; }
.section-about h4:after{ content: ''; display: block; margin-top: 10px; width: 200px; height: 1px; background: white; }
.section-about>.section-block p{ font-size: 14pt; line-height: 28pt; margin-bottom: 36px; }
.section-vertical{ -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; display: flex; justify-content: center; align-items: center; position: relative; left: calc(50% - 30px); }

/* layout services */
.section-services h1{ font-size: 26pt; text-align: center; letter-spacing: 4px; margin: 3em auto -5em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; background-repeat: no-repeat; background-size: 100%; width: 60px; }
.section-services h1[data-type=wedding]{ background-image: url('../images/icon/wedding.png'); }
.section-services h1[data-type=prewedding]{ background-image: url('../images/icon/prewedding.png'); }
.section-services h3{ font-weight: 900; color: #c6a36e; margin-left: 0em; margin-top: 0; font-size: 4em; }
.section-services h4{ margin-left: 0.5em; font-size: 20px; font-weight: 600; }
.section-services h6{  display: inline-block; width: 50px; height: 50px; margin: 1em; padding: 7px; text-align: center; color: white; background: #000; border: 1px solid #000; border-radius: 50%;}
.section-services hr{ margin: 3.33em 2em; width: 2em; display: inline-block; }
.section-services small{ color: black; font-weight: 600; }
.section-services .row{ margin: 0; }
.section-services .section-border{ width: 1px; height: 100%; position: absolute; top: 20em; margin: auto; left: 10px; right: 0%; background: black; transition: all .5s ease; }
.section-services .section-refs{ padding: 0em; margin: 0em auto; display: block; text-align: center; }
.section-services .section-refs a{ font-size: 2.5em; color: #00000080; padding: .5em; cursor: pointer; position: relative; top: -.3em; }
.section-services .section-refs a:hover,
.section-services .section-refs a:focus{ color: black; }
.section-services .section-refs ul{ display: inline-block; min-height: 2.5em; }
.section-services .section-refs li{ display: inline-block; position: relative; color: #00000080; border-top: 2px solid #00000080; height: 35px; margin: 0; font-size: 80%; width: 8.5em; text-align: center; line-height: 3em; cursor: pointer; transition: all .2s ease; }
.section-services .section-refs li:hover{ color: black; border-color: black; }
.section-services .section-refs li.active{ color: #333; }
.section-services .section-refs li.active:before{ content: ''; position: absolute; top: -4px; left: 0; width: 100%; height: 3px; border: 3px solid white; border-radius: 1em; }
.section-services .section-refs+.section-block{ margin-bottom: 1em; }
.section-services .section-refs+.section-block+.section-block{ text-align: left; margin-bottom: 1em; }
.section-services .section-bottom>.section-block{ margin-top: 3em; }
.section-services .section-bottom>.section-block:last-child{ margin-bottom: 72px; }
.section-services .section-bottom>.section-block[data-column=process]{ padding-top: 2.5em; padding-bottom: 2.5em; }
.section-services .section-bottom>.section-block[data-column=process] b{ font-size: 110%; }
.section-services .section-bottom>.section-block[data-column=process] p{ margin-bottom: 1em; }
.section-services .section-bottom>.section-block[data-column=contact]{ text-align: center; }
.section-services .section-stype{ position: fixed; left: .85em; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); writing-mode: vertical-lr; color: white; letter-spacing: 5px; }
@media (min-width: 768px){
  .section-services .section-block[data-column=provide]{ text-align: right; padding-right: 2em; }
}

.section-services *:not(.section-description)>h5{ color: #c6a36e; letter-spacing: .1em; margin-left: .5em; margin-bottom: 2em; text-transform:uppercase; font-weight: 600; }
.section-services .section-description{ font-size: 1.1em; line-height: 2.5em; }
.section-services .section-description small{ margin-left: 1em; color: #00000080; }
.section-services .section-description small+span{ color: #00000080; }
.section-services .section-description h5{ color: #c6a36e; letter-spacing: 0.1em; margin-left: .5em; text-transform: uppercase; font-weight: 600; }
.section-services .section-description s{ font-weight: bold; color: #00000080; text-decoration: none; }
.section-services .section-description p{ padding-left: 2em; }

/* layout Sitemap */
.section-sitemap>ul{ margin-left: 10px; }
.section-sitemap>ul>li{ margin: 10px auto; font-size: 12pt; }

/* Model Loader */
.section-loader{ position: absolute; top: calc(50% - 3em); left: 0; right: 0; margin: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; }
.section-loader.white{ color: white; }
.section-loader>span{ position: absolute; left: 0%; right: 0%; margin: auto; font-size: 2em; top: 3.5em; }
.section-loader>.fa-fx{ font-size: 6em; }

/* layout Blog */
.section-blog .row+.row { margin-top: 2em; }
.section-blog .section-story{ display: block; width: 90%; margin: 1em auto; }
.section-blog .section-story:nth-child(odd) .section-wrapper:first-child { float: right; }
.section-blog .section-story:nth-child(even) .section-wrapper:first-child { float: left; }
.section-blog .section-wrapper { height: 15em; overflow: hidden; }
.section-blog .section-wrapper:first-child a img{ position: absolute; margin: 0 auto; left: 0%; right: 0%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.section-blog .section-wrapper:first-child a img{ height: auto; width: 70%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }
.section-blog .section-wrapper:first-child a:hover img{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); transition: all .5s ease; }
.section-blog .section-block>a>h2{ font-weight: 600; margin-top: 40px;  }
.section-blog .section-block>span{ letter-spacing: 2px; }
.section-blog .section-block>p{ margin: 1em .5em; color: #888; }

.section-post h1{ text-align: center; color: #c6a36e; font-weight: 600; margin: 50px 0; }
.section-post .section-matter{ width: 80%; margin: auto; }
.section-post .section-matter p{ margin-top: 0.86em; margin-left: 24pt; font-size: 20px; line-height: 32pt; }
.section-post .section-matter .row{ margin: 40px -35px; }
.section-post .section-matter figure{ margin: 0 auto; padding: 5px; }
.section-post .section-matter figcaption{ margin: 10px auto; text-align: center; }
.section-post .section-matter img{ width: 100%; height: auto; }
.section-post .section-matter h3{ text-align: center; font-weight: bold; line-height: 30pt; }
.section-post .section-matter h4{ margin-top: 2.37em; font-size: 18pt; font-weight: bold; }
.section-post .section-matter ol { margin-top: 0.86em; }
.section-post .section-matter ol li{ line-height: 28px; font-size: 20px; margin-top: 0.86em; margin-top: 2.14em; margin-left: 53px; list-style-type: decimal; }
.section-post .section-matter ol li::marker{ unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-transform: none; text-indent: 0px !important; text-align: start !important; text-align-last: start !important; }
.section-post .section-matter blockquote{ border-left: 0; font-size: 24pt; font-weight: 600; }
.section-post .section-matter>a{ display: block; text-align: center; }
.section-post .section-matter>img:last-child{ display: none; }

/* layout Portfolio */
.section-portfolio .section-photosets{ padding: 0; margin: 1em; opacity: .0; transition: all .5s ease; }
@media (min-width: 768px){ .section-portfolio .section-photosets{ height: calc((650px/3 - 2em) * 9 / 16 + 4em); width: calc(33.33% - 2em); } }
@media (min-width: 768px){ .section-tag .section-photosets{ height: calc((650px/2 - 2em) * 9 / 16 + 4em); width: calc(50% - 2em); } }
@media (min-width: 992px){ .section-portfolio .section-photosets{ height: calc((870px/3 - 2em) * 9 / 16 + 4em); } }
@media (min-width: 992px){ .section-tag .section-photosets{ height: calc((870px/2 - 2em) * 9 / 16 + 4em); } }
@media (min-width: 1200px){ .section-portfolio .section-photosets{ height: calc((1070px/3 - 2em) * 9 / 16 + 4em); } }
@media (min-width: 1200px){ .section-tag .section-photosets{ height: calc((1070px/2 - 2em) * 9 / 16 + 4em); } }
@media (max-width: 768px){ .section-portfolio .section-photosets{ height: calc((100vw - 6em) * 9 / 16 + 4em); margin: 1em 0; } }
.section-photosets .section-wrapper{ position: absolute; left: 0; width: 100%; height: calc(100% - 4em); overflow: hidden; z-index: 3; }
.section-photosets .section-mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
.section-photosets .section-block h2{ font-size: 20px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100%); }
.section-photosets .section-block span{ letter-spacing: 2px; color: #888; float: left; }
.section-photosets .section-block span:last-child{ float: right; }
.section-portfolio .section-photosets .section-block{ position: absolute; bottom: -10px; height: 70px; width: 100%; font-size: 10pt; padding: 0; z-index: 2; transition: all .5s ease; }
.section-photosets a img{ position: absolute; height: auto; width: 100%; margin: 0 auto; left: 0%; right: 0%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.section-photosets:hover .section-block{ opacity: 1; }
.section-photosets:after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top : 0; opacity: .0; background-color: rgba(0,0,0,.33); transition: all .5s ease; z-index: 1; }
.section-photosets:hover:after{ /*opacity: 1;*/ }
.section-photosets a:hover img{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); transition: all .5s ease; }

/* Model Image */
.mockup{ transition: opacity 600ms ease-in; }
.fade-out,
img.lazy{ opacity: 0; }
img.loaded{ opacity: 1; transition: all .5s ease; }
.loading{ animation: loading 1s ease infinite; }
@keyframes loading{ from { background-position-x: 100%; } to { background-position-x: 0%; } }

/* layout Photoset */
.section-photoset>.section-photos picture.photoset-item{ display: block; margin-bottom: 1em; min-height: 25vh; transition: all 0s; cursor: zoom-in; }
.section-photoset>.section-photos img{ display: block; width: 100%; height: 100%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.section-photoset>.section-photos[data-masonry=true] picture.photoset-item{ min-height: 100px; }

.section-photoset .section-block{ display: inline-block; }
.section-photoset>.section-block>h1{ font-size: 3em; line-height: 1.5em; margin: 0; width: fit-content; }
.section-photoset>.section-block>h2{ font-size: 9pt; margin-left: 1em; margin-top: 4em; letter-spacing: 4px; font-weight: 900; clear: both; }
.section-photoset>.section-block>h2 small{ display: block; margin-top: 1em; padding-top: 1em; letter-spacing: 0px; font-size: 120%; color: white; border-top: 1px solid; width: 200px; }
.section-photoset>.section-block>h3{ position: relative; top: -15em; font-size: 10pt; margin-left: 1em; letter-spacing: 4px; text-transform: uppercase; }

.section-photoset hr{ border-color: white; margin: 50px auto; }
.section-photoset .section-video iframe{ position: relative; top:0; left:0; width:100%; height: 23.5vw; border: 0; }
.section-photoset .section-video-content{ margin: 6em auto; text-align: center; font-size: 14pt; }
.section-photoset .section-bottom{ text-align: center; margin: 150px auto; width: 100%; }
.section-photoset .section-bottom h5{ color: gray; }
.section-photoset .section-description{ margin-top: 6em; margin-bottom: 2em; clear: both; font-size: 1em; letter-spacing: 1px; line-height: 2em; text-align:justify; }
.section-photoset .section-description p{ font-size: 14pt; text-indent: 0em; line-height: 2em; letter-spacing: 0; margin: 0; }
.section-photoset .section-description>small{ display: block; text-align: center; }
.section-photoset .section-description>small:after{ content: ''; display: block; width: 50px; height: 1px; background: white; margin: 4em auto; }
.section-photoset .section-hashtag{ margin: 4em 0; text-align: center; }
.section-photoset .section-hashtag a{ margin: 0 5px; }
.section-photoset .section-hashtag h4{ margin-bottom: 2.5em; }
.section-photoset .section-hashtag a+a:before{ content: ''; margin-right: 10px; border-left: 1px solid white;; }
.section-photoset .section-viewmore{ display: block; height: 435px; }
.section-photoset .section-viewmore .section-photosets{ height: 250px; }
.section-photoset .section-viewmore .section-photosets .section-wrapper{ left: 1em; width: calc(100% - 2em); }
.section-photoset .section-viewmore h4{ margin-bottom: 3.5em; text-align: center; }
.section-photoset .section-viewmore h4 span{ display: inline-block; position: relative; bottom: 5px; width: 50px; height: 1px; background: white; margin: 0 10px; }
.section-photoset .section-viewmore .section-photosets .section-block{ position: absolute; bottom: -1em; left: 1em; width: calc(100% - 2em); text-align: center; font-size: 10pt; padding: 0; z-index: 4; transition: all .5s ease; }
.section-photoset .section-footer{ margin: 4em 0 8em; text-align: center; height: 20px; }
.section-photoset .section-footer .col-xs-4:not(:last-child){ border-right: 1px solid gray; }
.section-photoset .section-footer h6,
.section-photoset .section-video-content h6{ font-weight: 100; color: gray; }

/* Model Player */
.section-music{ display: block; margin-top: 40px; margin-bottom: 150px; height: 40px; position: relative; }
.section-player{ background-color: #efefef; color: #333; height: 40px; width: 100%; padding: 10px; position: absolute; top: 0; z-index: 0; }
.section-player-left{ float: left; }
.section-player-right{ float: right; }
.section-player-left *,
.section-player-right *{ max-height: 40px; margin-right: 0.5em; }
.section-player a, .section-player a:hover{ color: black; }
.section-player [data-type]{ cursor: pointer; }
.section-player+div:last-child{ background-color: darkgray; height: 5px; width: 0%; position: absolute; left: 0; bottom: 0; z-index: 2; }

/* Model Gallery */
.gallery{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 100; }
.gallery-background{ height: 100%; width: 100%; background-color: black; background-size: 100%; background-position: center; background-repeat: no-repeat; -webkit-filter: blur(5px); }
.gallery-wrap{ position: absolute; top: 0; left: 0%; right: 0%; margin: 0 auto; height: 100%; width: 100%; }
.gallery-item{ cursor: pointer; }
.gallery-item>img{ height: 85%; width: auto; margin: 0 auto; position: absolute; left: 0%; right: 0%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
@media (max-width: 768px){ .gallery-item>img{ height: auto; width: 100%; } .gallery-ui{ display: none; } }
.gallery-button{ color: white; }
.gallery-counter{ float: left; margin-top: 1em; }
.gallery-topbar{ position: absolute; top: 1em; width: calc(100% - 4em); margin: 0 auto; left: 0%; right: 0%; z-index: 100; }
.gallery-topbar .gallery-button{ float: right; padding: 1em; }
.gallery-button{ border: 0; background: transparent; outline: 0; }
.gallery-arrow-left{ position: absolute; left: 0; top: 50%; height: 100%; width: 5em; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.gallery-arrow-right{ position: absolute; right: 0; top: 50%; height: 100%; width: 5em; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.gallery-button i{ width: 100%; }
.gallery[data-show*=false]{ display: none; }

/* layout Artisa */
.section-artisan .section-area{ padding: 0 0 1.5em; margin-bottom: 3em; }
.section-artisan .section-area:first-child{ margin-top: 3em; }
.section-artisan .section-area[data-hidden=true]{ display: none!important; }
.section-artisan .section-area h3{ padding: .2em 1.2em; float: right; text-align: right; font-size: 12pt; font-weight: 900; }
.section-artisan .section-area h3 span{ display: none; }
.section-artisan .section-area h3 p{ margin: 10px 0; }
.section-artisan .section-area h6.section-artisan-area{padding: 0.5em; width: 50px; text-align: center; color: #c6a36e; border: 1px solid #c6a36e; }
.section-artisan .section-area h6.section-artisan-area:nth-child(n+2){ margin-top: 20px; }
.section-artisan .section-area li{ max-width: 100%; margin: 1em; font-size: 12pt; letter-spacing: 2px; text-transform:uppercase;  }
.section-artisan .section-area li a{ margin-left: 1em; }
.section-artisan .section-area li img{ margin-left: 1em; border-radius: 50%; -webkit-filter: grayscale(33%); -moz-filter: grayscale(33%); -ms-filter: grayscale(33%); -o-filter: grayscale(33%); filter: grayscale(33%); filter: gray; }
.section-artisan .section-area li .section-description{ display: block; margin: 1em; padding-left: 2.5em; color: #c6a36e; }
.section-artisan .section-area.price span.section-artisan-price{ display: block; margin: 1em; padding-left: 1em; color: #c6a36e; }
.section-artisan .section-area:not(.price) span.section-artisan-price{ display: none!important; }
.section-artisan .section-area li:before{ content: ''; height: 1px; width: 0%; position: absolute; margin-top: .62em!important; background: black; transition: all .2s ease; z-index: -1; }
*[data-dark] .section-artisan .section-area li:before{ background: white; }
.section-artisan .section-area li:hover:before{ width: 350px; max-width: 100%; }
.section-artisan iframe{ pointer-events: auto; margin: 0 auto; width: 100%; border: 0; }

/* Footer */
.footer{ min-height: 50px; text-transform: uppercase; }
.footer-border{ width: 0; height: 1px; background: black; margin: 0 auto; transition: all .5s ease; }
*[data-dark] .footer-border{ background: white; }
.footer-block{ margin: 15px 0px; }
.footer-block>li{ display: inline-block; }
.footer-block>li:nth-child(2){ color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.footer-block>li:last-child{ float: right; text-align: right; }
.footer [hidden]{ display: none; }

/* Background */
.background{ position: absolute; top: 0; left: 0%; right: 0%; margin: auto; width: 100%; height: 100%; z-index: -1; background-color: white; }
.background-block:before{ content: ''; position: absolute; top: 0; left: 0; background-color: rgba(237,234,229,0.85); width: 100%; height: 100%; z-index: +999; }
*[data-dark] .background-block:before{ background-color: #2c2c2ce0; }
*[data-film] .background-block:before{ background-color: #222; }
*[data-brush*=ture] .background-block:before{ background-color: transparent; }
.background-block li{ position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; background-color: transparent; background-repeat: no-repeat; opacity: .0; transition: all .5s ease; }
.background-block li.active{ opacity: 0.8; }

/* Mobile Layout */
@media (max-width: 768px){
  .navbar-header{ position: absolute; z-index: 900; width: 100%; }
  .navbar-default{ position: absolute; width: 100%; height: 100%; top: 0; }
  .navbar-default .navbar-nav>li>a>p:before{ top: 46px; }
  .navbar-default .navbar-nav{ display: block; margin: 0; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  .navbar-brand{ float: none; }
  .navbar-logo{ width: 72px; height: 72px; margin: 0 auto; left: 0%; right: 0%; top: 8px; }
  .navbar-collapse{ display: block; position: absolute; background: #fff; top: 0; left: 0%; right: 0%; margin: auto; height: 100%; z-index: 900; }
  .navbar-toggle{ margin-top: 0; }
  .navbar-left{ display: block; position: absolute; left: 1.1em; top: .5em; font-size: 22pt; z-index: 900; }
  .navbar-left .navbar-toggle:not(.collapsed){ color: white; }
  .navbar-right{ position: absolute; top: 0.5em; right: 1.3em; z-index: 999; }
  .navbar-collapse.collapse.in{ opacity: 0; visibility: hidden; }
  .navbar-collapse.collapse:not(.in){ opacity: 1; visibility: visible; }

  .mobile{ visibility: visible; }

  .sidebar.collapse:not(.in){ display: block; z-index: -1; }
  .sidebar.in{ opacity: 1; z-index: 200; }
  .sidebar:before{ content: ''; position: absolute; top: -6em; left: 0; width: 100%; height: 6em; background: black; }
  .sidebar{ width: 100%; height: calc(100% - 6em); margin-top: 0; background: black; color: white; top: 84px; left: 0; opacity: 0; transition: all .2s ease; }
  .sidebar-content{ display: block; padding: 2em; font-size: 14pt; }
  .sidebar-category+.sidebar-category,
  .sidebar-list+.sidebar-list{ margin-top: 2em; }
  .sidebar a{ color: white; transition: all 0s; }

  .section{ margin-top: 6em; height: calc(100vh - 6em); }
  .section[data-mobile*=true]{ margin-top: 6em; height: calc(100vh - 6em); }
  .section.is-safari{ margin-top: 6em; height: calc(100vh - 6em - 82px); }
  .section.is-safari:after{ content: ''; height: 6em; width: 100%; }
  .section-left, .section-right{ display: none; }
  .section-middle .section-content{ padding: 0 15px; }

  .section-blog .section-story{ width: 100%; }
  .section-blog .section-block>a>h2{ margin-top: 20px; font-size: 14pt; }
  .section-post .section-matter{ width: 100%; padding: 0; }
  .section-post .section-matter .row{ margin: 0; }
  .section-post .section-matter p{ margin-left: 0; line-height: 24pt; }
  .section-post .section-matter ol li{ margin-left: 20px; font-size: 18px; }

  .section-portfolio .section-block>* { margin-left: 0; }
  .section-photoset{ margin: 0 -15px; }
  .section-photoset .section-block{ padding: 0 15px; }
  .section-photoset>.section-block>h1{ font-size: 28pt; margin-top: 1em; }
  .section-photoset>.section-block>h3{ top: 0; }
  .section-photoset .section-photosets:last-child{ margin: 3em 0; }
  .section-photoset .section-viewmore{ height: 680px; }
  .section-photoset .section-footer{ margin: 10em 0 4em; }
  .section-photoset .section-video iframe{ height: 24vh; }
  .section-photoset .section-description p{ text-indent: 0; }

  .section-loader>span{ font-size: 1.5em; }
  .section-loader>.fa-fx{ font-size: 4em; }

  .section-music{ visibility: hidden; display: none; }
  .section-player{ display: inline-flex; }
  .section-player-left span{ display: none; }
  .section-player-right{ width: calc(100% - 20px); }
  .section-player-right i{ position: relative; top: -5px; margin: 8px .2em; }
  .section-player-right>i{ float: right; }
  .section-player-right i+span{ position: relative; top: -5px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 70px); }

  /* services 看能不能不要用margin調整位子 */
  .section-services h1{ margin: 0 auto; }
  .section-services .section-refs+.section-block+.section-block{ text-align: center; }
  .section-services .section-border{ top: 13em; }
  .section-services .section-refs a{ display: none; }
  .section-services .section-refs ul { margin: 50px -15px; }

  .section-nav>li>a{ font-size: 40px; line-height: 36px; }

  .section-about h1,
  .section-blog h1,
  .section-portfolio h1,
  .section-sitemap h1,
  .section-artisan h1{ text-align: center;}
  .section-about>.section-block{ clear: both; }

  .section-tag h1:after{ background: url(../images/slogan.png) bottom/85% no-repeat; height: 90px; }

  .section-artisan .section-area li{ margin-left: -.5em; font-size: 11pt; text-align: left; }
  .section-artisan .section-area h3{ float: none; margin: 1em auto; text-align: center; }
  .section-artisan .section-area h3 span{ display: block; border-bottom: 1px solid white; padding-bottom: 1em; width: 4em; margin: 0 auto; }
  .section-artisan .section-area h3 p{ font-size: 30pt; }
  .section-artisan .section-area li:before{ left: 0%; right: 0%; margin: auto; }
  *[data-dark] .section-artisan .section-area h3{ border-color: white; }

  .footer{ opacity: 0; transition: all 0s; color: transparent; }

  *[data-film] .background-block:before{ background-color: transparent; }

  /* Browser Scrollbar */
  .layout[data-dark=ture] *::-webkit-scrollbar-track{ background-color: #333; }
  .layout[data-dark=ture] *::-webkit-scrollbar{ width: 1px; background-color: #333; transition: all .5s ease; }
  .layout[data-dark=ture] *::-webkit-scrollbar-thumb{ background-color: white; }
  .layout:not([data-dark]) *::-webkit-scrollbar-track{ background-color: white; }
  .layout:not([data-dark]) *::-webkit-scrollbar{ width: 1px; background-color: white; transition: all .5s ease; }
  .layout:not([data-dark]) *::-webkit-scrollbar-thumb{ background-color: #333; }
}

/* Table Layout */
@media (min-width: 768px){
  .layout[data-dark=ture] *::-webkit-scrollbar-track{ background-color: #333; }
  .layout[data-dark=ture] *::-webkit-scrollbar{ width: 3px; background-color: #333; transition: all .5s ease; }
  .layout[data-dark=ture] *::-webkit-scrollbar-thumb{ background-color: white; }
  .layout:not([data-dark]) *::-webkit-scrollbar-track{ background-color: transparent; }
  .layout:not([data-dark]) *::-webkit-scrollbar{ width: 3px; background-color: transparent; transition: all .5s ease; }
  .layout:not([data-dark]) *::-webkit-scrollbar-thumb{ background-color: #333; }

  .navbar>.container .navbar-brand{ margin-left: 0; }
  .navbar-toggle{ display: block; }
  .navbar-right:hover .navbar-toggle .icon-bar{ transform:rotate(-45deg); margin-top: 4px!important; }
  .navbar-right:hover .navbar-toggle .icon-bar:first-child{ transform:rotate(45deg); }
  .navbar-right:hover .navbar-toggle .icon-bar:last-child{ transform:rotate(45deg); }
  .navbar-right:hover .navbar-toggle.collapsed .icon-bar{ transform:rotate(0deg); width: 30px; margin-top: 7.5px!important; }
  .navbar-right:hover .navbar-toggle.collapsed .icon-bar:first-child{ transform:rotate(-90deg); width: 15px; margin-left: 7.5px; }
  .navbar-right:hover .navbar-toggle.collapsed .icon-bar:last-child{ transform:rotate(-90deg); width: 15px; margin-right: 7.5px; }

  .collapse{ opacity: 0; visibility: hidden; }
  .collapse.in{ opacity: 1.0; visibility: visible; }
  .sidebar.collapse.in{ display: none; visibility: hidden; opacity: 0; }
  .section[data-mobile*=true]{ margin-top: 0; height: calc(100vh); }
  .section-about>.section-block{ height: auto; width: 50%; }
  .section-about>.section-block.section-vertical{ margin-top: -2.5em; }

  .section[data-footer*=false]{ height: calc(100vh - 200px); }
  .section[data-navbar*=false]{ margin-top: 0; height: calc(100vh); }
}

/* Desktop computer Layout */
@media (min-width: 1600px){
  .sidebar{ display: block; visibility: visible; opacity: 1;}
  .sidebar>.sidebar-content[data-hidden*=true]{ display: none; }
}