html {
    scroll-behavior: smooth;
}

body {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    font-family: 'Roboto', 'Noto Sans TC', Arial, '微軟正黑體', '新細明體', Helvetica, sans-serif;
}

:root {
    scroll-padding-top: 1rem;
    --main-color: #00cc66;
    --Blue: #001e04;
    --Green1: #65e088;
    --Grenn2: #defee3;
    --Green3: #0f9347;
    --Gray: #d3dbe2;
}

p {
    font-size: 18px;
    line-height: 1.8;
}

a {
    color: var(--Blue);
    text-decoration: none;
}

a:hover {
    color: var(--main-color);
    text-decoration: none;
}

section {
    padding-top: 70px;
    padding-bottom: 70px;
    overflow: hidden;
}

/* btn-main */
.btn-main,
.btn-main:focus {
    position: relative;
    border: none;
    border-radius: 50px;
    background-position: center;
    background-color: var(--Blue);
    color: #fff;
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .2s;
    padding: 20px 38px;
}

.btn-main:hover {
    color: var(--Blue);
    background: var(--Green1) radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}



/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: var(--main-color);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 28px;
    color: var(--Blue);
    line-height: 0;
    padding-top: 10px;
}

.back-to-top:hover {
    background: #8cb300;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}


/*--------------------------------------------------------------
  # Disable aos animation delay on mobile devices
  --------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*====================================
# nav
==================================== */

.main-nav {
    padding: 0.5rem 0.6rem;
    background-color: var(--Blue);
    z-index: 100;
    box-shadow: 0 2px 3px #10365355;
}

.nav-main .navbar-brand {
    width: 330px;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
    text-align: center;
    font-weight: 600;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #389cfa;
}

.navbar-toggler {
    background-color: var(--main-color);
}


.main-nav .dropdown-menu {
    border: none;
    background-color: var(--main-color);
    border-radius: 5px;
    padding: 0;
}

.main-nav .dropdown-menu .dropdown-item {
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main-nav .dropdown-menu .dropdown-item:hover {
    background-color: var(--main-color);
    border-radius: 5px;
    color: var(--Blue);
}

.btn-signup {
    background-color: var(--main-color);
    padding: 8px 25px;
    border-radius: 30px;
    color: var(--Blue);
    font-weight: 600;
    border: 2px solid #fff;
    transition: all .3s ease;
}

.btn-signup:hover {
    color:var(--Blue);
    background-color: #fff;
}


.custom-toggler.navbar-toggler {
    border: none;
}




/* @media (min-width: 992px) {

    .navbar-nav {
        text-align: center;
    }

} */

@media (max-width:992px) {
    .main-nav {
        background: var(--Blue);
    }

    .main-nav .btn-signup {
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }

    .main-nav .dropdown-menu .dropdown-item {
        text-align: center;
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link:focus {
        color: var(--main-color);
    }
}

@media(max-width: 576px) {
    .nav-item {
        text-align: center;
        padding-bottom: 10px;
    }

}


/* ====================================================
# navbar-index "首頁限定"滾動變化設定
====================================================*/

.navbar-index {
    transition-duration: 1s;
    background-color: transparent;
    box-shadow: none;
}

.navbar-index .main .nav-link {
    padding: 20px 15px;
    color: #fff;
}


.navbar-index .nav-lang.active span {
    color: #fff;
    border-color: #fff;
}

/* .navbar-index .navbar-brand img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(186deg) brightness(102%) contrast(104%);
  } */

.navbar-index .nav-signup {
    background: none;
    border: 1px solid #fff;
}

@media (max-width:1200px) {
    .navbar-index .main {
        background-color: var(--Blue);
    }
}

@media (max-width:991px) {
    .navbar-index {
        background-color: var(--Blue);
    }
}




/*******************
    KV
 *******************/


.kv {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -100px;
}

.kv .content,
.kv-2 .content {
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.kv-2{
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 992px) {
    .kv {
        margin-top: -108px;
    }
}

@media (max-width: 991px) {
    .kv {
        margin-top: -15px;
    }
}


@media (max-width:767px) {
    .kv {
        position: static;
        margin-top: 0;
        width: 100%;
        height: auto;
        background-image: none;
    }
}


/*******************
    foreword
 *******************/
.sec-foreword{
background-color: #f7f9fc;
}
.top-title {
    margin-bottom: 22px;
    font-weight: 600;
    font-size: 28px;
    padding: 6px 20px;
    line-height: 1.5;
    color: var(--Blue);
    border-left: 6px solid var(--main-color);
}

.sec-foreword img {
    box-shadow: 0 5px 9px #eeeeee75;
    width: 80%;
    border: 1px solid var(--Blue);
}

.video {
    padding-top: 40px;
    padding-bottom: 30px;
    background: url(../img/bg.jpg) no-repeat 100% fixed;
}

.video-box {
    margin-bottom: 10px;
}

.foreword-box p {
    color: #fff;
    background-color: var(--main-color);
    padding: 5px 20px;
    transition: all .2s ease-in-out;
}
.foreword-box p:hover{
    transform: scale(1.01);
}

.foreword-box p::before {
    content: '|';
    font-size: 20px;
    font-weight: 800;
    margin-right: 10px;
}

.middle-title {
    text-align: center;
    font-size: 24px;
    color: #212121;
    letter-spacing: 2px;
    padding-bottom: 10px;
}


/*====================================
# sec-feat
==================================== */

.sec-feat {
    background-color: var(--Green1);
    /* background: linear-gradient(90deg, var(--Green1) 50.1%, #fff 50.2% ); */
}

.sec-feat .top-title {
    border-left: 6px solid #fff;
}
.feat-box{
    margin-top: 40px;
}
.feat-box p {
    color: #fff;
    margin-left: 20px;
    background-color: var(--Blue);
    padding: 5px 20px;
    transition: all .2s ease-in-out;
}
.feat-box p:hover{
    transform: scale(1.01);
}

.feat-box p::before {
    content: '●';
    font-size: 10px;
    vertical-align: middle;
    margin-right: 10px;
}

/*====================================
# sec-leader
==================================== */

.sec-leader .pic-box {
    border: 2px solid #236bf5;
    border-radius: 15px;
}

.leader-box p {
    color: #fff;
    background-color: var(--Blue);
    padding: 5px 20px;
    transition: all .2s ease-in-out;
}
.leader-box p:hover{
    transform: scale(1.01);
}

.leader-box p::before {
    content: '●';
    font-size: 10px;
    vertical-align: middle;
    margin-right: 10px;
}

.leader-area {
    margin: 1rem 0;
    transition: all .3s ease;
}
.leader-area:hover{
    transform: translateY(-5px);
}
.leader-area img{
    transition: all .3s ease;
}
.leader-area:hover img{
    box-shadow: 0 5px 0 var(--main-color);
}
.leader-area img{
    border: 2px solid var(--Gray);
    border-radius: 5px;
}




/************************ 
        sec-gift
************************/

.sec-gift {
    background-color: var(--Grenn2);
}
.sec-gift .top-title{
    color: var(--Blue);
    border: none;
    font-size: 40px;
    letter-spacing: 5px;
}
.sec-gift p{
    color: var(--Green3);
}
.sec-gift .btn-main,
.sec-gift .btn-main:focus {
    background-color: var(--main-color);
    color: #fff;
}

.sec-gift .btn-main:hover {
    color: #fff;
    background: var(--Blue) radial-gradient(circle, transparent 1%, #e3f309 1%) center/15000%;
}

.gift-box{
    max-width: 300px;
    animation: move 2s infinite;
}
@keyframes move {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

/************************ 
        form 
************************/
.help-block{
    color: var(--main-color);
    font-size: 15px;
}


.form .bottom-area {
    border-radius: 50px;
    padding: 15px;
    background-color: var(--main-color);
    border: none;
    font-size: 22px;
    transition: all .2s ease-in-out;
}

.form .bottom-area:hover {
    background-color: var(--Green1);
}



/************************ 
        thanks  
************************/

.thanks {
    padding: 40px 20px;
    background: url(../img/bg-2.jpg) no-repeat 100% fixed;
}


.thanks-content p{
    font-size: 22px;
}

.thanks .btn-main{
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    background-color: var(--main-color);
}
.thanks .btn-main:hover{
    background-color: var(--Blue);
}



/************************ 
        footer  
************************/

footer {
    padding-top: 30px;
    padding-bottom: 20px;
    overflow: hidden;
    background-color: var(--Blue);
}
footer p,
footer h4{
    color: #fff;
}
footer p {
    font-size: 14px;
}

footer a,
footer a:hover {
    color: #fff;
}

footer .area-btn {
    border-bottom: 2px solid #fff;
    padding: 4px 3px;
}

footer .fas {
    color: #fff;
    transition: transform .3s ease;
}

footer .area-btn:hover .fas {
    color: #fff;
    transform: translateX(3px);
}