/* main basic css */
@charset "utf-8";

body,
input,
button,
select,
.form-control {
    font-family: "微軟正黑體", Helvetica, Arial, sans-serif;
    font-size: 16px;
}

html,
body {
    margin: 0;
}

body {
    background-color: #FFF;
    line-height: 1.67;
    background-repeat: no-repeat;
}

a {
    color: #000;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover,.nav-tabs>li>a:hover,.nav-tabs>li>a{
    color: unset;
    background-color: unset;
    border: unset;
}
img {
    max-width: 100%;

}

a:hover {
    text-decoration: none;
}
/* end main basic css */




/* navbar */
.navbar-inverse{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3e3355+0,4d4891+100 */
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top,  #000000d3 20%,#00000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #000000d3 20%,#00000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #000000d3 20%,#00000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000d3', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    border: none;
}
#navbar{
    width: 100%;
    max-width: 1440px;
    margin: auto;
    height: 74px;
    
}


.navbar-brand{
    max-width: 150px;
    padding: 10px 0 10px 10px
}
.navbar-brand>img {
    width: 100%;
    /* margin: -15px 10px 0 -15px; */
    /* float: left; */
}

.navbar-brand>span {
    white-space: nowrap;
}

.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
    max-height: none;
}

.dropdown-menu {
    font-size: inherit;
}
.navbar-nav{
    display: flex;
    align-items: center;
    margin: 10px 0 10px 10px;


}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-brand:hover {
    color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a.active,
.navbar-inverse .navbar-nav>li>a:hover {
    color: rgb(110, 110, 110);
}

.navbar-inverse .navbar-toggle {
    background-color: #333;
}

.navbar-nav .open .dropdown-menu>li>a {
    line-height: inherit;
}

#navbar .navbar-nav li > a > img {
    width: 100%;
}
#navbar ul:nth-child(1) > li:nth-of-type(1){
    width: 100%;
    max-width: 171px;
}
#navbar ul:nth-child(1) > li a{
    padding: 0;
}
.navbar-right{
    position: absolute;
    display: flex;
    align-items: center;
    margin: 20px 0px 20px 0px;
    left: 50%;
    transform: translateX(-50%);
}
.navbar-right li a{
    position: relative;
    padding: 0px;
}
.navbar-right li a:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    pointer-events: none;
    transition: .3s all;
}
.navbar-right li a:hover:after{
    opacity: 1;
}

.navbar-right li:nth-of-type(1) a:after{
    background: url('../images/navbar_01_on.png') no-repeat center center;
    background-size: contain;
}

.navbar-right li:nth-of-type(2) a:after{
    background: url('../images/navbar_02_on.png') no-repeat center center;
    background-size: contain;
}
.navbar-right li:nth-of-type(3) a:after{
    background: url('../images/navbar_03_on.png') no-repeat center center;
    background-size: contain;
}
.navbar-right li:nth-of-type(4) a:after{
    background: url('../images/navbar_04_on.png') no-repeat center center;
    background-size: contain;
}
.navbar-right li:nth-of-type(5) a:after{
    background: url('../images/navbar_05_on.png') no-repeat center center;
    background-size: contain;
}

.logo-mobile{
    display: none;
}


.fb_reset {
    display: none;
}

.nav>li>a>img{
    max-width: 100%;
}

/* end navbar */


.header{
    position: relative;
    height: 100vh;
    min-height: 1200px;
    overflow: hidden;
    background: url('../images/page_bg.jpg') no-repeat center;
    background-size: cover;
    z-index: 0;
}
.header::before{
    content: '';
    position: absolute;
    width: 24px;
    height: 142px;
    left: 20%;
    bottom: 30%;
    transform: translate(-50%,-50%);
    background: url('../images/role_deco.png') no-repeat center center;
    background-size: contain;
}
.header::after{
    content: '';
    position: absolute;
    width: 24px;
    height: 142px;
    right: 20%;
    top: 20%;
    transform: translate(50%,-50%);
    background: url('../images/role_deco.png') no-repeat center center;
    background-size: contain;
}
@media screen and (max-width:1440px){
    .header::after,
    .header::before{
        display: none;
    }
}



.coupon .container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    padding-top: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.coupon .container .wrap{
    width: 800px;
    max-width: 100%;
    margin-top: 250px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.coupon .container::before{
    content: '';
    position: absolute;
    width: 360px;
    height: 123px;
    max-width: 100%;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
    background: url('../images/coupon_title.png') no-repeat center;
    background-size: contain;
}

.coupon .container form{
    position: relative;
    width: 100%;
    min-height: 700px;
    background: url('../images/coupon_form_bg.png') repeat center center;
    background-size: cover;
    border: 1px solid #fff;
    filter: drop-shadow(0px 0px 5px #484542);
    border-radius: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    padding: 30px 15px;
}
.coupon .container form .title{
    padding-top: 15px;
}
@media screen and (max-width:480px){
    .coupon .container form .title{
        padding-top: 20px;
    }
}
.coupon .container form .row{
    display: flex;
    justify-content: space-between;
    width: 70%;
}
@media screen and (max-width:480px){
    .coupon .container form .row{
        flex-direction: column;
        align-items: center;
        width: 85%;
        padding-bottom: 15px;
    }
}

.coupon .container form .row .txt{
    width: 20%;   
}
.coupon .container form .row input{
    background: #ffffff3f;
    border: 1px solid #fff;
    border-radius: 8px;
    letter-spacing: 2px;
    width: 350px;
    max-width: 80%;
    padding-right: 15px;
    padding-left: 15px;
    transition: .3s all;
}
.coupon .container form .row input:focus-visible,
.coupon .container form .row input:hover{
    filter: drop-shadow(0px 0px 15px #ffffff9f);
}
.coupon .container form .row input::placeholder {
    color: #fff;
    opacity: .6;
}
.coupon .container form button.submit{
    background: unset;
    border: unset;
    transition: .3s all;
}
.coupon .container form button.submit:hover{
    filter: brightness(110%);
}
.coupon .container form .notice{
    width: 80%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    
}
.coupon .container form .notice h3{
    position: relative;
    width: 100%;
    padding-left: 30px;
    margin-bottom: 50px;
}

.coupon .container form .notice h3::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0px;
    bottom: -25px;
    background: #fff;
    opacity: .8;
}
.coupon .container form .notice h3::after{
    content: '';
    position: absolute;
    left: 20px;
    bottom: -35px;
    width: 22px;
    height: 23px;
    background: url('../images/news_deco.png') no-repeat center center;
    background-size: contain;
}
.coupon .container form .notice .content{
    color: #fff;
    padding-left: 30px;
    width: 100%;
    text-indent: -15px;
}


/* footer */
.footer{
    overflow: hidden;
}

.swal2-popup {
    font-size: 1.5rem;
}

@media (max-width: 1024px) {
}
@media (max-width: 994px) {

}
@media (max-width: 770px) {
    .navbar > .navbar-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .navbar > .navbar-header > .logo-mobile{
        flex-grow: 1;
    }
    
    .navbar .navbar-toggle{
        margin: 8px 0 8px 0;
    }

    .navbar-nav>li:nth-of-type(4)> a > span,
    .navbar-nav>li:nth-of-type(5)> a > span {
        display: inline-block;
    }






    #footer{
        padding: 10px 0 10px 0;
    }
    .fixed-top {
        position: absolute;
    }
    .copyright img{
        max-height:unset;
    }
    .copyright li:nth-child(1){
        padding:10px 0 0 0;
    }
    .copyright li:nth-child(2){
        width: 100px;
        margin-left: 10px;
        padding-left: 0px;
    }

    .copyright li:nth-child(3){
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-left: 0px;
        margin: 0 0 0 10px;
    }
    .copyright li:nth-child(3) img{
        width: 100%;
        max-width: 94px;
        height: 100%;
    }
    .copyright li:nth-child(4){
        text-align: center;
    }
}
@media (max-width: 767px) {
    #navbar{
        height: unset;
    }
    .navbar-right{
        position: relative;
    }
    .nav>li{
        padding-bottom: 15px;
    }
    .logo-mobile{
        line-height: 3;
        padding-left: 10px;
        display: inline-block;
    }
    #navbar ul:nth-of-type(1){
        
        justify-content: center;
    }
    .navbar-right{
        flex-direction: column;
        font-size: 18px;
        padding: 10px 0;
    }

    .container>.navbar-header{
        padding: 10px 0;
    }
    .navbar-brand{
        padding: 0;
    }


}

@media (max-width: 480px) {


}
@media (max-width: 390px) {


}
@media (max-height:599px){ 

}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {}

/*----MS Edge Browser CSS Start----*/
@supports (-ms-ime-align:auto) {}

/*----MS Edge Browser CSS End----*/