* {
    direction: rtl;
}

body,
html {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

body,
p {
    font: 1.8rem/1.8 "Arial", "Noto Sans TC", "Noto Sans SC", sans-serif;
    /************ 黑體 *************/
}

.p-large {
    font: 400 1rem/1.625rem "Arial", "Noto Sans TC", "Noto Sans SC", sans-serif;
    /************ 黑體 *************/
}

.p-small {
    font: 400 0.875rem/1.375rem "Noto Sans TC", sans-serif;
    /************ 黑體 *************/
}

.p-heading {
    margin-bottom: 3.5rem;
    text-align: center;
    color: #fff;
}

.li-space-lg li {
    margin-bottom: 0.375rem;
}

.indent {
    padding-left: 1.25rem;
}

h1 {}

h2 {
    margin: 0 auto;
    width: fit-content;
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: bold;
    font-style: italic;
    font-family: "Arial", "Montserrat", "Noto Sans TC", "Noto Sans SC", sans-serif;
}

h3 {
    font-family: "Arial", "Montserrat", "Noto Sans TC", "Noto Sans SC", sans-serif;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}

h4 {
    font-family: "Arial", "Montserrat", "Noto Sans TC", "Noto Sans SC", sans-serif;
}

h5 {
    color: #fff;
    font-family: "Arial", "Montserrat", "Noto Sans TC", "Noto Sans SC", sans-serif;
    line-height: 1.5;
    font-weight: bold;
    /***** 黑體 *****/
}

h6 {
    color: #484a46;
    font: 700 1rem/1.375rem "Arial", "Montserrat", "Noto Sans TC", "Noto Sans SC", sans-serif;
    /***** 黑體 *****/
}

a {
    color: #787976;
}

a:hover {
    color: #787976;
}


/*******************************************************/


/*     03. Navigation     */


/******************************************************/

.navbar-custom {
    padding-top: 0.375rem;
    padding-bottom: 0.675rem;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
    font: 600 1.1rem/0.575rem "Noto Sans TC", "Noto Sans SC", sans-serif;
    transition: all 0.2s;
}

.navbar-custom .navbar-brand {
    font-size: 0;
}

.navbar-custom .navbar-brand.logo-image img {
    width: auto;
    height: 3rem;
    -webkit-backface-visibility: hidden;
}

.navbar-custom .navbar-brand.logo-text {
    margin-top: 0.05rem;
    margin-bottom: 0.05rem;
    font: 700 2.25rem/0.5rem "Noto Sans TC", "Noto Sans SC", sans-serif;
    color: #fff;
    text-decoration: none;
}

.navbar-custom .nav-item .nav-link {
    padding: 0.25rem 0.75rem 0.325rem 0.75rem;
    color: #FFF;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.25rem;
}

.navbar-custom .nav-item .nav-link {
    padding: 0.625rem 0.75rem 0.625rem 0.75rem;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.navbar-custom .nav-item .nav-link:hover,
.navbar-custom .nav-item .nav-link.active {
    color: #f00;
}


/* Dropdown Menu */

.navbar-custom .dropdown:hover>.dropdown-menu {
    display: block;
    /* this makes the dropdown menu stay open while hovering it */
    min-width: auto;
    animation: fadeDropdown 0.2s;
    /* required for the fade animation */
}

@keyframes fadeDropdown {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.navbar-custom .dropdown-toggle:focus {
    /* removes dropdown outline on focus  */
    outline: 0;
}

.navbar-custom .dropdown-menu {
    margin-top: 0;
    border: none;
    border-radius: 0.05rem;
    background-color: #113448;
}

.navbar-custom .dropdown-item {
    color: #fff;
    text-decoration: none;
}

.navbar-custom .dropdown-item:hover {
    background-color: #113448;
}

.navbar-custom .dropdown-item .item-text {
    font: 600 0.875rem/0.875rem "Noto Sans TC", "Noto Sans SC", sans-serif;
}

.navbar-custom .dropdown-item:hover .item-text {
    color: #14bf98;
}

.navbar-custom .dropdown-items-divide-hr {
    width: 100%;
    height: 1px;
    margin: 0.25rem auto 0.25rem auto;
    border: none;
    background-color: #b5bcc4;
    opacity: 0.2;
}


/* end of dropdown menu */

.navbar-custom .social-icons {
    display: none;
}

.navbar-custom .navbar-toggler {
    border: none;
    color: #fff;
    font-size: 2rem;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-times {
    display: none;
}

.navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-bars {
    display: inline-block;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-bars {
    display: none;
}

.navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-times {
    display: inline-block;
    margin-right: 0.125rem;
}

@media (min-width: 768px) {
    .navbar-custom {
        padding: .5rem 1.5rem .5rem 2rem;
        box-shadow: none;
    }
    .navbar-custom .navbar-brand.logo-text {
        color: #fff;
    }
    .navbar-custom .navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: auto;
    }
    .navbar-custom .nav-item .nav-link {
        padding: 0.25rem 0.75rem 0.25rem 0.75rem;
        font-size: 0.825rem;
    }
    .navbar-custom .nav-item .nav-link:hover,
    .navbar-custom .nav-item .nav-link.active {
        color: #f00;
    }
    .navbar-custom.top-nav-collapse {
        padding: 0.375rem 1.5rem 0.375rem 2rem;
        box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
        background-color: rgba(0, 0, 0, 0.7);
    }
    .navbar-custom.top-nav-collapse .navbar-brand.logo-text {
        color: #fff;
    }
    .navbar-custom.top-nav-collapse .nav-item .nav-link {
        color: #fff;
    }
    .navbar-custom.top-nav-collapse .nav-item .nav-link:hover,
    .navbar-custom.top-nav-collapse .nav-item .nav-link.active {
        color: #f00;
    }
    .navbar-custom .dropdown-menu {
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-top: 0.75rem solid rgba(0, 0, 0, 0);
        border-radius: 0.25rem;
        box-shadow: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.03);
    }
    .navbar-custom.top-nav-collapse .dropdown-menu {
        border-top: 0.125rem solid rgba(0, 0, 0, 0);
    }
    .navbar-custom .dropdown-item {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .navbar-custom .dropdown-items-divide-hr {
        width: 84%;
    }
}

@media (min-width: 992px) {
    .navbar-custom .social-icons {
        display: block;
        margin-left: 0.5rem;
    }
    .navbar-custom .fa-stack {
        margin-left: 0.375rem;
        font-size: 0.8125rem;
    }
    .navbar-custom .fa-stack .hexagon {
        width: 1.625rem;
        height: 1.625rem;
        position: absolute;
        background: url('../images/hexagon-green.svg') center center no-repeat;
        background-size: 1.625rem 1.625rem;
        transition: all 0.2s ease;
    }
    .navbar-custom .fa-stack:hover .hexagon {
        background: url('../images/hexagon-white.svg') center center no-repeat;
        background-size: 1.625rem 1.625rem;
    }
    .navbar-custom .fa-stack-1x {
        font-size: 0.6875rem;
        line-height: 1.625rem;
        color: #fff;
        transition: all 0.2s ease;
    }
    .navbar-custom .fa-stack:hover .fa-stack-1x {
        color: #14bf98;
    }
}

@media (min-width: 1200px) {
    .navbar-custom .nav-item .nav-link {
        padding: 0.25rem 0.75rem 0.25rem 0.75rem;
        font-size: 1.1rem;
    }
    .navbar-custom.top-nav-collapse {
        padding-right: 5rem;
        padding-left: 5rem;
    }
    .navbar-custom .navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: auto;
    }
}

@media (min-width: 1600px) {
    .navbar-custom {
        padding-right: 12rem;
        padding-left: 12rem;
    }
    .navbar-custom.top-nav-collapse {
        padding-right: 12rem;
        padding-left: 12rem;
    }
    .navbar-custom .navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: auto;
    }
}


/*********************/


/*    Header     */


/*********************/

.header {
    background: url('../images/KV_bg_mobile.jpg') bottom center no-repeat #000;
    height: 800px;
}

.header .header-content {
    padding-top: 5rem;
    padding-bottom: 2.125rem;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.header h1 {
    text-align: center;
    width: fit-content;
    line-height: 1;
    color: #fff;
    font-size: 4.5rem;
    margin: 1rem auto;
    font-style: italic;
    text-shadow: 0px 0px 10px #000, 0px 0px 10px #000;
}

.header h1 img {
    max-width: 100px;
    height: auto;
}

.header h2 {
    text-align: center;
    margin-right: 0;
    margin-bottom: .8rem;
    filter: drop-shadow(0px 0px 10px #000);
}

.header h3 {
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: normal;
    text-shadow: 0px 0px 10px #000, 0px 0px 10px #000;
    font-style: italic;
    line-height: 1.5;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .header {
        background: url('../images/KV_bg.jpg') bottom center no-repeat;
        background-size: cover;
        height: 600px;
    }
    .header .header-content {
        padding-top: 8rem;
        padding-bottom: 2.125rem;
        text-align: right;
        width: 50%;
        margin-right: 45%;
    }
    .header h1 {
        text-align: right;
        width: fit-content;
        font-size: 4rem;
        margin-bottom: 1.5rem;
        margin-top: 1rem;
        margin-right: 0;
    }
    .header h3 {
        text-align: right;
        font-size: 2rem;
    }
}

@media (min-width: 992px) {
    .header {
        height: 700px;
    }
    .header .header-content {
        padding-top: 8rem;
        padding-bottom: 2.125rem;
        text-align: right;
        width: 50%;
        margin-right: 50%;
    }
    .header h1 {
        margin-top: 1rem;
    }
    .header h3 {
        margin-top: 6rem;
    }
}

@media (min-width: 1200px) {
    .header {
        background: url('../images/KV_bg.jpg') bottom center no-repeat;
        background-size: cover;
        height: 990px;
    }
    .header .header-content {
        padding-top: 8rem;
        padding-bottom: 2.125rem;
        text-align: right;
        width: 45%;
        margin-right: 55%;
    }
    .header h1 {
        text-align: right;
        width: fit-content;
        font-size: 8rem;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
        padding-right: 1rem;
    }
    .header h3 {
        margin-top: 10rem;
        text-align: right;
        font-size: 1.8rem;
    }
}


/**********************************/


/*    prize    */


/*********************************/

.prize {
    width: 100%;
    max-width: 1920px;
    margin: 0;
    padding: 0 0 2rem;
    box-sizing: border-box;
}

.prize h1 {
    color: #000;
    text-align: center;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1;
    margin: 0 0 1rem;
    padding: 0;
}

.prize h2 {
    font-size: 3rem;
    color: #000;
    margin: 3rem auto;
}

.prize img {
    width: 100%;
    height: auto;
}

.prize h3 {
    font-size: 1.5rem;
    margin: 1.2rem 0;
    text-align: right;
    line-height: 1.2;
    color: #000;
    padding: 0 1rem;
}

.prize h4 {
    color: #000;
    text-align: right;
    line-height: 1.5;
    font-size: 1.2rem;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.show_pc {
    display: none;
}

.show_mobi {
    display: block;
}

@media (min-width: 768px) {
    .show_pc {
        display: block;
    }
    .show_mobi {
        display: none;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .prize {
        position: relative;
        padding-bottom: 0;
    }
    .prize h1 {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 0 0 2rem;
    }
    .prize h2 {
        font-size: 5rem;
    }
    .prize h3 {
        font-size: 3rem;
        padding: 4rem 6rem 1.5rem;
    }
    .prize h4 {
        padding: 0 6rem;
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    .show_pc {
        display: block;
    }
    .show_mobi {
        display: none;
    }
}


/********************/


/*     Promo     */


/********************/

.promo {
    padding-top: 5rem;
}

.promo h2 {
    font-size: 3rem;
    color: #000;
    margin: 0 auto;
    padding: 0 0 8rem;
    text-align: center;
}

.promo h3 {
    font-size: 2.5rem;
    color: #242424;
    margin: 0 auto;
    padding: 0 0 1rem;
    text-align: center;
}

.promo-item {
    background-color: #f6f6f6;
    width: 90%;
    margin: 1rem auto 8rem;
    padding: 0 1rem 2rem;
    text-align: center;
}

.promo-item .up {
    margin-top: -8rem;
}

.promo-item h4 {
    font-size: 1.8rem;
    color: #000;
    line-height: 1.2;
    margin: .5rem 0 0;
}

.promo-item p {
    color: #666;
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
    padding: 1rem;
    text-align: center;
}

.promo-item h5 {
    border-top: 1px solid #aaa;
    width: 90%;
    margin: 0 auto;
    color: #104274;
    font-size: 2rem;
    padding: 1.5rem 0;
}

.promo-item .shop_list {
    width: 90%;
    margin: 0 auto;
}

.promo-item .shop_list a {
    width: 46%;
    display: inline-block;
    margin: 1rem auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 0.2rem 0.5rem;
    line-height: 1;
}

.promo-item .shop_list a:hover {
    background-color: #fff;
}

.promo-item .shop_list a img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .promo {
        margin-bottom: 5rem;
    }
    .promo h2 {
        font-size: 3rem;
        color: #000;
        margin: 0 auto;
        padding: 0 0 8rem;
        text-align: center;
    }
    .promo-item {
        width: 45%;
        margin: 1rem auto;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .promo {
        margin-bottom: 5rem;
        padding-top: 0rem;
    }
    .promo h2 {
        font-size: 4.5rem;
        margin: 0 auto 12rem;
        padding: 5rem 0 2rem;
    }
    .promo-item {
        width: 45%;
        margin: 1rem auto 6rem;
        box-sizing: border-box;
    }
    .promo-item .up {
        margin-top: -12rem;
    }
    .promo-item p {
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
        font-size: 1.4rem;
    }
    .promo-item h4 {
        font-size: 2rem;
        color: #000;
        line-height: 1.2;
        margin: .5rem 0;
    }
    .promo-item h5 {
        border-top: 1px solid #aaa;
        font-size: 2rem;
        padding: 1.5rem 0 1rem;
    }
    .promo-item .shop_list a {
        width: 30%;
        display: inline-block;
        margin: 1rem 1%;
    }
}


/********************/


/*     video     */


/********************/

.video {
    width: 100%;
    max-width: 1920px;
    background-color: #ccc;
    max-height: 1100px;
    margin: 0;
    padding: 0 0 3rem;
    box-sizing: border-box;
    text-align: center;
}

.video h2 {
    color: #000;
    font-size: 2rem;
    margin: 0 auto;
    padding: 3rem 0 2rem;
    text-align: center;
}

.video p {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.pdv_area {
    background: url('../images/vbg.jpg') center center no-repeat;
    background-size: cover;
    margin: 0;
    padding: 3rem 0;
}

.pd_video {
    width: 80%;
    margin: 0 auto;
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px #000;
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .video {
        background-color: #ccc;
        max-height: 1100px;
        height: 1000px;
    }
    .video h2 {
        font-size: 4rem;
        margin: 0 auto 2rem;
        padding: 6rem 0 1rem;
    }
    .video p {
        font-size: 1.2rem;
    }
    .pdv_area {
        background: url('../images/vbg.jpg') center center no-repeat;
        margin: 0;
        padding: 6rem 0;
    }
    .pd_video {
        width: 80%;
        margin: 0 auto;
        border: 5px solid #fff;
        box-shadow: 3px 3px 10px #000;
    }
}


/*************************/


/*     specification     */


/*************************/

.specification {
    margin-bottom: 5rem;
}

.specification h2 {
    color: #000;
    font-size: 2.3rem;
    margin: 0 auto;
    padding: 3rem 0;
    text-align: center;
}

.s_list {
    border-bottom: 1px solid #aaa;
    margin-bottom: 1rem;
    margin: 0 1rem 2rem;
    text-align: right;
}

.s_list:last-child,
.s_list:nth-child(15) {
    border-bottom: none;
}

.s_list h4 {
    font-size: 1.5rem;
}

.s_list p {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #666;
}

@media (min-width: 768px) {
    .s_list:nth-child(15) {
        border-bottom: 1px solid #aaa;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .specification h2 {
        font-size: 4rem;
        margin: 0 auto 2rem;
        padding: 6rem 0 1rem;
    }
    .s_list {
        border-bottom: 1px solid #aaa;
        margin-bottom: 1rem;
        margin: 0 1rem 3rem;
    }
    .s_list h4 {
        font-size: 2rem;
    }
    .s_list p {
        font-size: 1.3rem;
    }
}


/*************************/


/*     Copyright     */


/*************************/

.copyright {
    padding: 1.5rem 0;
    text-align: center;
    border-top: 1px solid #ccc;
    color: #666;
    font-size: 1rem;
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}


/**********************************/


/*     Back To Top Button     */


/**********************************/

a.back-to-top {
    position: fixed;
    z-index: 999;
    right: 0.75rem;
    bottom: 0.75rem;
    display: none;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 1.875rem;
    background: #14bf98 url("../images/up-arrow.png") no-repeat center 47%;
    background-size: 1.125rem 1.125rem;
    text-indent: 9999px;
}

a:hover.back-to-top {
    background-color: #13aa87;
}