@charset "UTF-8";

html {
    overflow-x: hidden;
}

html,
html a,
body {
    -webkit-font-smoothing: antialiased;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-size: 1rem;
    font-family:'Noto Sans TC', sans-serif;
    color: #735F3D;
    line-height: 1.6;
    background-color: #fff;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    /*font-family: 'Microsoft JhengHei', 'Noto Serif', sans-serif;*/
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.2;
    color: #242424;
    margin-top: 0;
    margin-bottom: .5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: capitalize;
    margin-bottom: 0.75rem;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #242424;
    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

h1 a:focus,
h1 a:hover,
h2 a:focus,
h2 a:hover,
h3 a:focus,
h3 a:hover,
h4 a:focus,
h4 a:hover,
h5 a:focus,
h5 a:hover,
h6 a:focus,
h6 a:hover {
    color: #735F3D;
    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

h1 {

    font-weight: bold;
    /*font-family: 'Permanent Marker', 'Microsoft JhengHei', serif;*/
    font-family: 'Permanent Marker',  'Noto Sans TC', sans-serif;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    border-left: solid 8px #735F3D;
    padding-left: 8px;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

em,
li {
    font-size: 1rem;
    font-weight: 300;
    color: azure;
}

em > a,
li > a {
    color: #242424;
}

em > a:hover,
li > a:hover {
    color: #735F3D;
}

small {
    color: #656565;
}

label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #242424;
    margin-bottom: .25rem;
}

i {
    line-height: 1;
}

/* Paragraph */
p {
    font-size: 0.9375rem;
    font-weight: 300;
    color: #656565;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 1rem;
}



/* Links */
a {
    font-weight: 300;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #a6a7aa;
    text-decoration: none;
}

a:focus {
    outline: none;
}



::selection {
    color: #fff;
    background: #735F3D;
    text-shadow: none;
}

::-webkit-selection {
    color: #fff;
    background: #735F3D;
    text-shadow: none;
}

::-moz-selection {
    color: #fff;
    background: #735F3D;
    text-shadow: none;
}

:active,
:focus {
    outline: none;
}

/* Section Seperator */
.section-seperator {
    border-bottom: 1px solid #edf0f2;
}

/* Content Wrapper Link */
.content-wrapper-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 3;
    text-decoration: none;
}

/*------modify-----------------*/

.welcome {

    font-size: 2em;
    color: #000;
    font-weight: bold;
    text-align: left;
    padding-top: 1.2em;
    padding-left: 1em;
}

.map {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6em;
}

.square {
    padding-top: 3em;
    margin-top: 3em;
    margin-bottom: 6em;
    margin-left: 1em;
    margin-right: 1em;
}


.big-square {
    padding-top: 1em;
    margin-top: 0em;
    margin-bottom: 8em;
    margin-left: 1em;
    margin-right: 2em;
}

/*for footer*/
.foot {
    margin-bottom: 2em;
    margin-right: 2em;
}

/*for marquee*/
.marq {
    height: auto;
    margin-top: 0em;
    margin-bottom: 0em;
}

.photo-frame {
    width: auto;
    height: auto;
}

.sticker {
    position: absolute;
    z-index: 1000;
    font-size: 14px;
    font-weight: 900;
    padding: 5px;
    border-radius: 1em;
    left: 1.5em;
    top: .5em;
    background-color: #ff1452;
    /*box-shadow:5px 5px 20px rgba(0,0,0,.2);*/
}

.under-sticker {
    z-index: 1;
}

.pic-button {
    border-radius: 50%;
    margin: 2em;
}

/*video-block------------------*/

.video-container {
    position: relative;
    padding-bottom: 48%;
    padding-top: 3em !important;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 1200px) {

    .video-container {
        padding-bottom: 25%;
        padding-top: 3em !important;
    }
}

/*-----for marquee----*/
.container-fluid {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
}

/*------------------------------------------------------------------
  	[Button]
------------------------------------------------------------------*/
.btn-theme {
    position: relative;
    display: inline-block;
    border-radius: 30px;
    line-height: 1.4;
    text-align: center;
    background: #735F3D;
    color: #f0f0f0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
    padding-left: 30px;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.btn-theme:focus, .btn-theme:active:focus, .btn-theme.active:focus, .btn-theme.focus, .btn-theme:active.focus, .btn-theme.active.focus {
    outline: none;
}

.btn-theme:hover {
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.btn-theme:hover, .btn-theme:focus, .btn-theme.focus {
    text-decoration: none;
}

.btn-theme:active, .btn-theme.active {
    background-image: none;
    outline: 0;
}

.btn-theme.disabled, .btn-theme[disabled],
fieldset[disabled] .btn-theme {
    cursor: not-allowed;
    box-shadow: none;
    opacity: .65;
    pointer-events: none;
}

.btn-white-brd {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    border-width: 1px;
}

.btn-white-brd:hover, .btn-white-brd:focus, .btn-white-brd.focus {
    color: #515769;
    background: #fff;
    border-color: transparent;
}

.btn-default-bg {
    color: #515769;
    background: #f3f4f5;
    border-color: transparent;
    border-width: 0;
}

.btn-default-bg:hover, .btn-default-bg:focus, .btn-default-bg.focus {
    color: #fff;
    background: #735F3D;
    border-color: transparent;
}

.btn-base-bg {
    color: #fff;
    background: #735F3D;
    border-color: transparent;
    border-width: 0;
}

.btn-base-bg:hover, .btn-base-bg:focus, .btn-base-bg.focus {
    color: #fff;
    background: #63cbd7;
    border-color: transparent;
}

.btn-theme-sm {
    font-size: 13px;
    font-weight: 600;
    padding: 15px 30px;
}

/*------------------------------------------------------------------
  	[Service]
------------------------------------------------------------------*/
.service {
    display: table-cell;
    padding: 50px;
}

.service .service-element,
.service .service-info {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.service .service-icon {
    display: table-cell;
    font-size: 45px;
    color: #735F3D;
    padding-right: 30px;
    padding-bottom: 30px;
}

.service .text {
    display: table-cell;
    vertical-align: top;
}

.service:hover .service-element {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.service:hover .service-info {
    -webkit-transform: translate3d(0, -30%, 0);
    -moz-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

/*------------------------------------------------------------------
  	[Header]
------------------------------------------------------------------*/
/* Fixed Top */
.navbar-fixed-top .navbar-collapse {
    max-height: 100%;
}

/* Navbar */
.header .navbar {
    margin-bottom: 0;
    border-bottom: 0px solid rgba(255, 255, 255, 0.2);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    border-radius: 0px !important;
}

/* Navbar Toggle */
.header .navbar-toggle {
    width: 25px;
    height: 25px;
    border: none;
    padding: 20px;
    margin: 0px 0;
}

.header .navbar-toggle .toggle-icon {
    position: relative;
    width: 21px;
    height: 1px;
    display: inline-block;
    background: #515769;
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .navbar-toggle .toggle-icon:before, .header .navbar-toggle .toggle-icon:after {
    position: absolute;
    left: 0;
    background: #515769;
    content: " ";
}

.header .navbar-toggle .toggle-icon:before {
    width: 10px;
    height: 1px;
    bottom: 10px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .navbar-toggle .toggle-icon:after {
    width: 16px;
    height: 1px;
    top: -5px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .navbar-toggle:hover .toggle-icon {
    background: #735F3D;
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .navbar-toggle:hover .toggle-icon:before, .header .navbar-toggle:hover .toggle-icon:after {
    width: 21px;
    height: 1px;
    background: #735F3D;
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .navbar-toggle:hover .toggle-icon.is-clicked {
    background: rgba(81, 87, 105, 0);
}

/* Navbar Logo */
.header .logo {
    width: 100px;
    height: auto;
    float: left;
    max-height: 95px;
    line-height: 65px;
}

.header .logo-wrap {
    display: inline-block;
    padding: 0;
}

.header .logo-wrap:focus, .header .logo-wrap:hover {
    text-decoration: none;
}

.header .logo-img {
    display: inline-block;
    width: 150px;
    height: auto;

    max-height: 100%;
    vertical-align: middle;
}

.header .logo-img-main {
    display: inline-block;
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .logo-img-active {
    display: none;
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

/* Navbar */

.header .navbar-nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

/* Nav */
.header .nav-item {
    position: relative;
    display: block;
}

.header .nav-item:last-child .nav-item-child {
    padding-right: 60px;
}

.header .nav-item-child {
    position: relative;
    display: block;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Noto Serif', 'Microsoft JhengHei', sans-serif;
    color: #fff;
    text-transform: uppercase;
    line-height: 30px;
    padding: 20px;
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}


.material-icons {
    font-size: inherit;
}

/* Media Queries below 767px */
@media (max-width: 768px) {
    /* Bootstrap collapse of navigation with a maximum width: 767px
      (Change it to any breakpoint you want to be collapsed) */
    .header {
        background: #fff;
    }

    .header .navbar-toggle {
        display: block;
    }

    .header .navbar-collapse.collapse {
        display: none !important;
    }

    .header .navbar-collapse.collapse.in {
        display: block !important;
    }

    .header .nav-collapse {
        padding-left: 0;
        padding-right: 0;
    }

    .header .navbar-nav {
        margin: 0;
        float: none;
    }

    .header .navbar-nav .nav-item {
        float: none;
    }

    /* Menu Container */
    .header .menu-container:before, .header .menu-container:after {
        content: " ";
        display: table;
    }

    .header .menu-container:after {
        clear: both;
    }

    /* Logo */
    .header .logo .logo-img-main {
        display: none;
    }

    .header .logo .logo-img-active {
        display: inline-block;
    }

    /* Navbar Nav */
    .header .nav-item-child {
        color: #515769;
        line-height: 1.4;
        padding: 12px 12px 12px 15px;
    }
}

/* Media Queries below 767px */
@media (max-width: 768px) {
    /* Menu Container */
    .header .menu-container {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .header .navbar > .container {
        width: auto;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .header .navbar > .container > .nav-collapse {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Media Queries above 767px */
@media (max-width: 768px) {
    /* Navbar */
    .header .navbar-nav-right {
        float: left;
    }
}

@media (min-width: 769px) {
    /* Navbar */
    .header .navbar-nav-right {
        float: right;
    }
}

/* Page On Scroll */
@media (min-width: 768px) {
    .page-on-scroll .header .navbar {
        background: #fff;
        border-bottom-color: #f0f0f0;
        transition-duration: 300ms;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
        box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.2);
    }
}

.page-on-scroll .header .logo-img-main {
    display: none;
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.page-on-scroll .header .logo-img-active {
    display: inline-block;
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.page-on-scroll .header .nav-item-child {
    color: #515769;
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

/* Dropdown
------------------------------ */

.dropdown-menu {
    display: none;
    /*overflow-y: scroll;*/
    font-size: 0.8125rem;
    min-width: 9rem;
    max-height: 20rem;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 0 0.3125rem 0.75rem rgba(34, 35, 36, 0.05);
    padding: .9375rem 0;
    margin-top: 0rem;

}

@media (max-width: 767px) {
    .dropdown-menu {
        position: static;
        float: none;
        box-shadow: none;
    }
}

@media (min-width: 768px) {

    .dropdown-toggle +.dropdown-on-hover {
        display: none;
    }

    .dropdown-toggle:hover +.dropdown-on-hover , .dropdown-on-hover:hover{
        display: block;
    }
}