a:hover,button:hover{
    -webkit-filter: brightness(110%);
    filter: brightness(110%);
    transition: 0.2s;
}


body {
    width: 100%;
    font-family: 'Noto Serif TC', serif, "Helvetica", "Arial", "LiHei Pro", "黑體-繁", "微軟正黑體";
    font-style: normal;
    font-size: 14px;
    background-color: #15121d;
}
#side_open_mob {
    display: none;
}
.wrapper{
    width: 100%;
    position: relative;
}
.header{
    width: 100%;
    height: 68.5vw;
    position: relative;
    background: no-repeat top center url(../images/kv.jpg);
    background-size: 100%;
    overflow: hidden;
}

.logo{
    width: 13%;
    height: 0;
    padding-bottom: 7%;
    position: fixed;
    background: no-repeat top center url(../images/logo.png);
    background-size: 100%;
    z-index: 99;
    left: 0;
    top: 0;
}
.nav_mob{
    display: none;
}
.nav{
    background: no-repeat top left url(../images/nav.png);
    padding: 0 1% 0 5%;
    display: flex;
    float: right;
    background-size: cover;
    height: 4.3vw;
    z-index: 99;
    position: fixed;
    right: 0;
    top: 0;
}

.nav_btbox{
    display: flex;
}
.nav_btbox li{
    width: 6vw;
    margin: 1.5% 2%;
    display: inline-block;
    position: relative;
    background: rgb(0,0,0); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 56%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 56%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 56%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.nav_btbox li+li:after{
    content: "";
    display: block;
    width: 1px;
    height: 0;
    padding-bottom: 20%;
    background-color: #a99371;
    position: absolute;
    left: -21%;
    top: 34%;
}
.nav_btbox li a{
    width: 100%;
    text-align: center;
    display: block;
    font-size: 1.25vw;
    font-weight: 600;
    line-height: 2;
    text-decoration: none;
    font-family: 'Noto Serif TC', serif;
    background: rgb(224,209,198); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 30%, rgba(224,209,198,1) 71%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 30%, rgba(224,209,198,1) 71%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 30%, rgba(224,209,198,1) 71%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d1c6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.nav_btbox li a:hover{
    color: #fff;
    text-shadow: 0 0 8px #fff;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}
.website{
    width: 10.8vw;
    height: 3vw;
    background: no-repeat url(../images/website_bt.png);
    background-size: 100%;
    display: inline-block;
    margin: 1.2% 0 0;
}
.title{
    width: 48vw;
    height: 8.5vw;
    background: no-repeat url(../images/slogan.png);
    background-size: 100%;
    position: relative;
    margin: 26.5% auto 0;
}

.dw_box{
    width: 38%;
    margin: 2% auto 0;
    background-size: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}
.qrcode{
    width: 26.5%;
    height: 0;
    padding-bottom: 23%;
    display: block;
    background: no-repeat url(../images/qrcode.png);
    background-size: 100%;
}
.dw{
    width: 38.5%;
    margin: 0 2.2%;
}
.ios{
    width: 100%;
    height: 0;
    padding-bottom: 25.8%;
    display: block;
    background: no-repeat url(../images/ios_bt.png);
    background-size: 100%;
    margin-bottom: 4%;
    position: relative;
    overflow: hidden;
}
.ios::after,.ad::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  background: rgba(255, 255, 255, 0.7);
  width: 50px;
  height: 70px;
  filter: blur(10px);
  animation: 5s hl ease infinite;
  transform: translateX(-40px) skewX(-20deg);
  opacity: 0;
}
@keyframes hl {
  0% {
    opacity: 0;
    transform: translateX(-40px) skewX(-20deg);
  }
  50% {
    transform: translateX(-40px) skewX(-20deg);
  }
  100% {
    opacity: 1;
    transform: translateX(281px) translateY(10px) skewX(-20deg);
  }
}
.ad{
    width: 100%;
    height: 0;
    padding-bottom: 25.8%;
    display: block;
    background: no-repeat url(../images/ad_bt.png);
    background-size: 100%;
    position: relative;
    overflow: hidden;
}
.mv{
    width: 27%;
    height: 0;
    padding-bottom: 21.5%;
    display: block;
    background: no-repeat center url(../images/mv.jpg);
    background-size: 111%;
    border-radius: 10px;
    border: solid 2px #eacfb9;
    position: relative;
    transition: 0.3s;
}
.mv:hover{
    background-size: 120%;
}
.mv:after{
    content: "";
    display: block;
    width: 21%;
    height: 0;
    padding-bottom: 21%;
    background: no-repeat url(../images/mv_play.png);
    background-size: 100%;
    position: absolute;
    top: 37%;
    left: 39.5%;
}
.bg{
    width: 100%;
    position: relative;
    background: no-repeat top center url(../images/bg.jpg);
    background-size: 103%;
    background-color: #15121d;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.content{
    width: 69%;
    min-width: 1000px;
    margin: auto;
    margin-top: -16%;
}
.title_01{
    width: 75%;
    height: 0;
    padding-bottom: 26%;
    position: relative;
    background: no-repeat top center url(../images/title_01.png);
    background-size: 100%;
    margin: 0 auto 0.5%;
}
.bn{
    width: 80%;
    height: 0;
    padding-bottom: 45%;
    margin: 0 auto;
    position: relative;
    background: no-repeat top center url(../images/slider_box.png);
    background-size: 100%;
}
.bn_pic{
    width: 100%;
    height: 0;
    padding-bottom: 54%;
}
.bn_swiper{
    width: 100%;
    position: relative;
    height: 20vw;
}
.bn_swiper .swiper-slide{
    position: relative;
    height: 18.9vw;
}
.bn_swiper .swiper-slide div{
    width: 100%;
    display: block;
    height: 0;
    padding-bottom: 62%;
    position: relative;
    cursor: pointer;
}

.b1{
    background: no-repeat top center url(../images/slider/s01.png);
    background-size: 100%;
}
.b2{
    background: no-repeat top center url(../images/slider/s02.png);
    background-size: 100%;
}
.b3{
    background: no-repeat top center url(../images/slider/s03.png);
    background-size: 100%;
}
.b4{
    background: no-repeat top center url(../images/slider/s04.png);
    background-size: 100%;
}
.b5{
    background: no-repeat top center url(../images/slider/s05.png);
    background-size: 100%;
}

.bn .swiper-button-next {
    width: 5%;
    height: 0;
    padding-bottom: 7%;
    position: absolute;
    background: no-repeat top center url(../images/next_bt.png);
    background-size: 100%;
    top: 49%;
    right: -5.5%;
}
.bn .swiper-button-prev {
    width: 5%;
    height: 0;
    padding-bottom: 7%;
    position: absolute;
    background: no-repeat top center url(../images/pre_bt.png);
    background-size: 100%;
    top: 49%;
    left: -5.5%;
}
.title_02{
    width: 63.7%;
    height: 0;
    padding-bottom: 16%;
    position: relative;
    background: no-repeat top center url(../images/title_02.png);
    background-size: 100%;
    margin: 7% auto 2%;
}
.ev01,.ev02,.ev03,.ev04,.ev05{
    width: 100%;
    height: 0;
    position: relative;
    margin: 2% auto 6%;
}
.ev01{
    background: no-repeat top center url(../images/ev1.png);
    background-size: 100%;
    padding-bottom: 58%;
}
.ev02{
    background: no-repeat top center url(../images/ev2.png);
    background-size: 100%;
    padding-bottom: 57%;
}
.ev03{
    background: no-repeat top center url(../images/ev3.png);
    background-size: 100%;
    padding-bottom: 43%;
}
.ev04{
    background: no-repeat top center url(../images/ev4.png);
    background-size: 100%;
    padding-bottom: 42%;
}
.ev05{
    background: no-repeat top center url(../images/ev5.png);
    background-size: 100%;
    padding-bottom: 36%;
}


.feature{
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 70%;
    margin-bottom: 8%;
}

.feature_pic{
    width: 76%;
    height: 0;
    padding-bottom: 65%;
    margin: auto;
    overflow: hidden;
    padding-top: 2%;
    position: relative;
}
.fe_swiper{
    width: 135.5%;
    height: 36vw;
    position: relative;
    margin: auto;
    transform: translateX(-13%);
}

.fe_swiper .swiper-wrapper{
    width: 100%;
    position: relative;
}

.fe_swiper .swiper-slide div{  
    width: 100%;
    display: block;
    height: 0;
    padding-bottom: 216%;
    position: relative;
    cursor: pointer;
    z-index: 2;
}

.f01{
    background: no-repeat top center url(../images/feature/f_01.jpg);
    background-size: 100%;
}
.f02{
    background: no-repeat top center url(../images/feature/f_02.jpg);
    background-size: 100%;
}
.f03{
    background: no-repeat top center url(../images/feature/f_03.jpg);
    background-size: 100%;
}
.f04{
    background: no-repeat top center url(../images/feature/f_04.jpg);
    background-size: 100%;
}
.f05{
    background: no-repeat top center url(../images/feature/f_05.jpg);
    background-size: 100%;
}
.f06{
    background: no-repeat top center url(../images/feature/f_06.jpg);
    background-size: 100%;
}


.fe_swiper .swiper-slide {   
    position: relative;
    -webkit-filter: brightness(40%);
    filter: brightness(40%);
    box-shadow: 0 0 30px #00000087;
}
.fe_swiper .swiper-slide-active {   
    position: relative;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}
.fe_swiper .swiper-slide-active:after {   
    content: "";
    display: block;
    width: 113.8%;
    height: 0;
    padding-bottom: 230%;
    pointer-events: none;
    background: no-repeat url(../images/f_pic_bg.png);
    background-size: 100%;
    z-index: 1;
    position: absolute;
    top: -3.6%;
    left: -7.4%;
}
.feature .swiper-button-prev{
    width: 3%;
    height: 0;
    padding-bottom: 7%;
    position: absolute;
    background: no-repeat top center url(../images/pre.png);
    background-size: 100%;
    top: 40%;
    left: 7%;
}
.feature .swiper-button-next{
    width: 3%;
    height: 0;
    padding-bottom: 7%;
    position: absolute;
    background: no-repeat top center url(../images/next.png);
    background-size: 100%;
    top: 40%;
    right: 7%;
}
.feature .swiper-button-prev:after,.feature .swiper-button-next:after,.bn .swiper-button-prev:after,.bn .swiper-button-next:after{
    display: none;
}
.feature .swiper-pagination{
    width: 100%;
    display: flex;
    justify-content: center;
}
.feature .swiper-pagination-bullet{
    width: 9%;
    height: 0;
    padding-bottom: 1.11%;
    opacity: 1;
    background: no-repeat bottom center url(../images/dot.png);
    background-size: 100%;
    border-radius: 0;
}
.feature .swiper-pagination-bullet-active{
    background: no-repeat top center url(../images/dot.png);
    background-size: 100%;
}

.copyright{
    width: 66%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 3% 17%;
    background-color: #000;
}
.firm_logo{
    width: 52%;
    height: 0;
    padding-bottom: 10%;
    display: inline-block;
    background: no-repeat center url(../images/copyright.png);
    background-size: 100%;
    margin-right: 2%;
}
.w_box{
    width: 45%;
    display: inline-block;
}
.w_box span{
    width: 100%;
    display: block;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.7vw;
    color: #c4c4c4;
    line-height: 1.5;
    font-weight: 200;
    letter-spacing: 0.1vw;
}