@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

header a {

    cursor: pointer;

    color: white;

    text-decoration: none;

}

header a:hover {

    cursor: pointer;

    color: white;

    text-decoration: none;

}

.nav_link > ul {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;

    height: 100%;

}

.nav_link a {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    height: 100%;

    cursor: pointer;

    color: #9c202b;

    text-decoration: none;

}

.nav_link a:hover {

    cursor: pointer;

    color: #9c202b;

    text-decoration: none;

}

.nav_icon a {

    cursor: pointer;

    color: #9c202b;

    text-decoration: none;

}

.nav_icon a:hover {

    cursor: pointer;

    color: #9c202b;

    text-decoration: none;

}

._sep {

    border-right: 1px solid #000;

    height: 20px;

    width: 0;

    display: inline-block;

}

.menu_list {

    display: none;

    position: absolute;

    width: 100%;

    height: 100vh;

    min-height: 480px;

    background: #4a281f;

    z-index: 999;

}

.list_on {

    display: -webkit-box !important;

    display: -webkit-flex !important;

    display: -ms-flexbox !important;

    display: flex !important;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column;

}

.menu_listTop {

    min-height: 200px;

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-justify-content: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}

.menu_listLogo {

    height: 2em;

    width: 11.55em;

    background: url('../imgs/logo_w.png') no-repeat;

    background-size: cover;

    margin-bottom: 1.5em;

}

.menu_listIcon ul {

    padding: 0;

    margin: 0;

    text-align: center;

}

.menu_listIcon ul li {

    display: inline-block;

    margin: 0 0.5em 0 0.5em;

    list-style-type: none;

}

.menu_listIcon ul li img {

    height: 1.5em;

}

.menu_listMid {

    text-align: center;

}

.menu_listMid ul {

    padding: 0;

}

.menu_listMid > ul > li {

    list-style-type: none;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 2em;

}

.collapsing_list {

    cursor: pointer;

}

.collapsing_list > span {

    margin-left: 0.5em;

    display: inline-block;

    -webkit-animation: jumpingY 1s infinite;

}

.collapsing_listItem {

    text-align: center;

    max-height: 0;

    -webkit-transition: max-height 1s ease-out;

    -o-transition: max-height 1s ease-out;

    transition: max-height 1s ease-out;

    overflow: hidden;

}

.collapsing_listItem ul li {

    font-size: 0.9em;

    list-style-type: none;

    margin-top: 1em;

}

.menu_listBot {

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-justify-content: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    position: relative;

    bottom: 0;

    margin: auto;

}

.menu_listBot ._sep {

    border-color: white;

    margin: 0 1em 0 1em;

    border-width: 2px;

}

.menu_listBot ul {

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 0;

}

.menu_listBot > ul > li {

    display: inline;

    list-style-type: none;

    color: rgba(255, 255, 255, .8);

}

header {

    background: white;

    width: 100%;

}

.header_pre {

    position: relative;

    z-index: 999;

}

.header_post {

    position: fixed;

    z-index: 999;

    -webkit-box-shadow: 7px 7px 10px rgba(150, 150, 150, 0.5);

    box-shadow: 7px 7px 10px rgba(150, 150, 150, 0.5);

}

header nav {

    width: 100%;

    position: relative;

    z-index: 999;

}

.myNav {

    height: 4vw;

    min-height: 50px;

}

.nav_logoBox {

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-justify-content: flex-end;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    height: 100%;

    width: 15%;

    min-width: 177px;

    float: left;

}

.nav_logo {

    height: 1.5vw;

    min-width: 145.625px;

    min-height: 25px;

    /*width: 11.65vw; *//*取logo長寬比*/

}

.nav_link {

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    float: left;

    position: relative;

    height: 100%;

    width: 53%;
    margin-left: 2%;

}

.nav_link ul {

    font-size: 1vw;

    position: relative;

    padding: 0;

    margin: 0;

    width: 100%;

}

.nav_link ul li {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    /*padding: 0 1.57vw 0 1.57vw;*/

    list-style-type: none;

    cursor: pointer;

    height: 100%;

    width: 15%;

    position: relative;

}

.nav_link_collapseList {
    /*border-top: 5px transparent;*/
    height: 100%;
}

.collapse_on {

    display: block !important;

    height: auto !important;

    -webkit-box-shadow: 0 0 3px rgba(100, 100, 100, .7) !important;

    box-shadow: 0 0 3px rgba(100, 100, 100, .7) !important;

    border-top: 5px solid #9c202b !important;

}

.show_on {

    display: block !important;

}

.nav_link_collapseList > div {

    height: 4vw;

    background: white;

    -webkit-box-shadow: 0 0 3px rgba(200, 200, 200, 0);

    box-shadow: 0 0 3px rgba(200, 200, 200, 0);

    position: absolute;

    top: 0;

    border-radius: 0 0 .3vw .3vw;

    border-top: 5px solid transparent;

    overflow: hidden;

    -webkit-transition: .5s;

    -o-transition: .5s;

    transition: .5s;

    width: 100%;

}

.nav_link_collapseList > div > ul {

}

.nav_link_collapseList > div > ul li {

    text-align: center;

    height: calc(4vw - 8px);

    color: #9c202b;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    padding: 0;

    width: 100%;

}

.nav_link_collapseList > div > ul li {

    padding: 0vw;

}

.nav_link_collapseList > div > ul li a {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 100%;

    color: #9c202b;

    text-align: center;

    width: 100%;

}

.nav_link_collapseList > div > ul li:first-child a {

    display: block;

    height: 100%;

    color: #9c202b;

    text-align: center;
    padding: 1vw 0 0 0;
}

.nav_link_collapseList > div > ul li:hover {

    background: #9c202b;

}

.nav_link_collapseList > div > ul li:hover a {

    color: white;

}

.nav_link_collapseList > div > ul li:first-child {

    margin-bottom: 3px;

}

.nav_link_collapseList > div > ul li:first-child:hover {

    background: white;

}

.nav_link_collapseList > div > ul li:first-child:hover a {

    color: #9c202b;

}

.nav_link_collapseList > div > ul > li:last-child {

    border-bottom: none;

}

.nav_icon {

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-justify-content: flex-start;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    height: 100%;

    /*width: 20.6vw;*/

    min-width: 260px;

    float: right;

}

.nav_icon ul {

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 0;

    margin-bottom: 0;

}

.hide_title > p {

    margin: 0;

}

.nav_icon ul li {

    font-size: .9vw;

    margin-right: 0.75vw;

    display: inline-block;

}

.nav_icon ul li a {

    -webkit-display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.nav_icon ul li a.hide_title img {

    margin-right: 0.5em;

}

.nav_icon ._sep {

    margin-right: 0.75vw

}

.hamburger {

    display: none;

    position: relative;

    z-index: 1000;

    padding: 15px 5px 15px 15px;

    outline: 0px !important;

}

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {

    height: 2px;

    width: 30px;

}

.nav_burger.is-active .hamburger-box .hamburger-inner {

    background-color: white !important;

}

.nav_burger.is-active .hamburger-box .hamburger-inner:before {

    background-color: white !important;

}

.nav_burger.is-active .hamburger-box .hamburger-inner:after {

    background-color: white !important;

}

/*前寬度部分已有 width break-point 1250px 1098(控制nav_icon縮排標題用) 1000px*/

/*------------------------------*/

@media (max-width: 1250px) {

    .nav_link ul {

        font-size: 12.5px

    }

    .nav_link ul li {

    }

    .nav_link_collapseList > div {

        height: 50px;

    }

    .nav_link_collapseList > div > ul li:first-child {

        height: 42.5px;

    }

}

/*------------------------------*/

@media (max-width: 1098px) {

    .hide_title p {

        display: none;

    }

    .nav_icon {

        -webkit-justify-content: flex-end;

        -webkit-box-pack: end;

        -ms-flex-pack: end;

        justify-content: flex-end;

    }

}

/*------------------------------*/

@media (max-width: 1000px) {

    .nav_link {

        display: none;

    }

    ul.nav_iconR {

        display: none;

    }

    .nav_icon ._sep {

        display: none;

    }

    .nav_icon {

        min-width: 0;

    }

    .hamburger {

        display: block

    }

}

/*------------------------------*/

@media (max-width: 900px) {

    .nav_icon {

        width: auto;

    }

}

.to_url {

    cursor: pointer;

}

.banner_section {

    width: 100%;

    height: 24vw;

    overflow: hidden;

    background-position: center 50%;

    background-size: 100%;

}

.banner_section > img {

    width: 100%;

}

.main {

    width: 100%;

    font-family: 'Noto Sans TC';

}

* {

    font-family: 'Noto Sans TC';

}

.headline_coffee img {

    width: 100%;

}

.headline_coffee {

    position: absolute;

    width: 30vw;

    height: auto;

    top: 15vw;

    right: 0;

}

.first_sectionTop img {

    width: 3vw;

    min-width: 3em;

    margin: 0 1em 0 1em;

}

.first_sectionTop {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end;

    color: #8b3e0f;

    height: 13em;

    padding-bottom: 2em;

}

.current_hover :hover {
    background: #9c202b !important;

}

.current_hover a:hover {

    color: white !important;
}

.current {

    border-top: 5px #9c202b solid !important;

    height: calc(100% - 5px);

}

.current > a {
    margin-top: -5px !important;

}

.current_collapse_on {
    margin-top: -5px;
}