*{
    padding: 0;
    margin: 0;
}


body {
    width: 100%;
    font-family: 'Noto Serif TC', serif, "Helvetica", "Arial", "LiHei Pro", "黑體-繁", "微軟正黑體";
    font-style: normal;
    font-size: 14px;
    background-color: #15121d;
}
#side_open_pc {
    display: none;
}

.wrapper{
    width: 100%;
    position: relative;
}
.header{
    width: 100%;
    height: 133vw;
    position: relative;
    padding-top: 6vh;
    background: no-repeat top center url(../images/kv_m.jpg);
    background-size: 100%;
    background-color:#3d4c75;
}

.logo{
    display: none;
}
.nav_mob{
    width: 100%;
    height: 13vw;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: #000;
}
.icon_mob{
    width: 11%;
    height: 0;
    padding-bottom: 11%;
    background: no-repeat top center url(../images/icon.png);
    background-size: 100%;
    display: inline-block;
    margin: 0 2% 0 3%;
    position: relative;
}
.icon_mob:after{
    content: "光與夜之戀";
    display: block;
    width: 230%;
    text-decoration: none;
    color: #fff;
    position: absolute;
    left: 140%;
    top: 19%;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 4vw;
    letter-spacing: 0.5vw;
}
.website{
    width: 30vw;
    height: 9vw;
    background: no-repeat url(../images/website_bt_m.png);
    background-size: 100%;
    display: inline-block;
    margin: 1.2% 0 0 39%;
}
.nav{
    display: none;
}

#mobile-menu-button{
    width: 11%;
    height: 0;
    padding-bottom: 13%;
    background-size: 100%;
    position: absolute;
    top: 0;
    right: 2.5vw;
    padding-top: 3.5vw;
    display: flex;
    z-index: 999;
    flex-wrap: wrap;
    justify-content: center;
}
#mobile-menu-button span {
    display: block;
    background: #f5ddbb;
    width: 70%;
    height: 0;
    padding-bottom: 7%;
    -webkit-border-radius: 10vw;
    -moz-border-radius: 10vw;
    border-radius: 10vw;
    transform-origin: center;

    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
#mobile-menu-button span:nth-child(2) {
    margin: 18% 0;
}
#mobile-menu-button.toggled span:first-child {
    -webkit-transform: translateY(300%) rotate(45deg);
    -moz-transform: translateY(300%) rotate(45deg);
    -ms-transform: translateY(300%) rotate(45deg);
    -o-transform: translateY(300%) rotate(45deg);
    transform: translateY(300%) rotate(45deg);
}
#mobile-menu-button.toggled span:nth-child(2) {
    opacity: 0;
    margin: 8% 0;
}
#mobile-menu-button.toggled span:last-child {
    -webkit-transform: translateY(-100%) rotate(-45deg);
    -moz-transform: translateY(-100%) rotate(-45deg);
    -ms-transform: translateY(-100%) rotate(-45deg);
    -o-transform: translateY(-100%) rotate(-45deg);
    transform: translateY(-100%) rotate(-45deg);
}
/*--選單--*/
#mobile_nav_box{
    position: absolute;
    z-index: 99;
    top: 6vh;
    background: no-repeat center -2vw url(../images/burger_bg.jpg);
    background-color: rgba(0,0,0,0.8);
    overflow-y: scroll;
    width: 100%;
    height: 94vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-size: 100%;
    align-content: center;
}

#mobile_nav_box a{
    width: 82%;
    height: 0;
    padding-bottom: 8%;
    text-align: center;
    display: block;
    font-size: 5.75vw;
    font-weight: 600;
    text-decoration: none;
    margin: 4.5% auto;
    position: relative;
    font-family: 'Noto Serif TC', serif;
    background: rgb(224,209,198);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 30%, rgba(224,209,198,1) 71%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 30%, rgba(224,209,198,1) 71%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 30%, rgba(224,209,198,1) 71%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d1c6', endColorstr='#ffffff',GradientType=0 );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
#mobile_nav_box a+a:after {
    content: "";
    width: 22%;
    height: 0;
    padding-bottom: 4%;
    display: block;
    background: no-repeat url(../images/burger_line.png);
    background-size: 100%;
    margin: -16% auto 0;
    pointer-events: none;
}

.title{
    width: 82vw;
    height: 32vw;
    background: no-repeat url(../images/slogan_m.png);
    background-size: 100%;
    position: relative;
    margin: 78vw auto 0;
}

.dw_box{
    width: 86vw;
    margin: 5vw auto 0;
    display: flex;
    justify-content: center;
}
.dw{
    width: 42vw;
    display: inline-block;
}

.ios{
    width: 100%;
    height: 0;
    padding-bottom: 24%;
    display: block;
    background: no-repeat url(../images/dw_bt.png);
    background-size: 100%;
    position: relative;
    overflow: hidden;
}
.ad{
    width: 100%;
    height: 0;
    padding-bottom: 24%;
    display: block;
    background: no-repeat url(../images/dw_bt.png);
    background-size: 100%;
    position: relative;
    overflow: hidden;
}
.ios::after,.ad::after,.mv::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  background: rgba(255, 255, 255, 0.7);
  width: 5vw;
  height: 10vw;
  filter: blur(10px);
  animation: 3.5s hl ease infinite;
  transform: translateX(-40px) skewX(-20deg);
  opacity: 0;
}
@keyframes hl {
  0% {
    opacity: 0;
    transform: translateX(-2vw) skewX(-20deg);
  }
  
  40% {
    opacity: 1;
    transform: translateX(20vw) skewX(-20deg);
  }
  100% {
    opacity: 0;
    transform: translateX(32vw) translateY(10px) skewX(-20deg);
  }
}
.qrcode{
    display: none;
}
.mv{
    width: 42vw;
    display: inline-block;
    height: 10vw;
    background: no-repeat url(../images/mv_bt.png);
    background-size: 100%;
    position: relative;
    overflow: hidden;
}
.bg{
    width: 100%;
    position: relative;
    background: no-repeat top center url(../images/bg_m.jpg);
    background-size: cover;
    margin: auto;
    background-color: #15121d;
}
.content{
    width: 100%;
    padding-top: 0vw;
    overflow: hidden;
}
.title_01{
    width: 93vw;
    height: 57vw;
    position: relative;
    background: no-repeat top center url(../images/title_01_m.png);
    background-size: 100%;
    margin: 0 auto 0vw;
}
.bn{
    width: 100%;
    height: 122vw;
    margin: auto;
    background-size: 100%;
    position: relative;
}
.bn_pic{
    width: 100%;
    height: 105vw;
}
.bn_swiper{
    width: 100%;
    position: relative;
    height: 105vw;
}
.bn_swiper .swiper-slide{
    position: relative;
    height: 105vw;
}
.bn_swiper .swiper-slide div{
    width: 100%;
    display: block;
    height: 126vw;
    position: relative;
}
.b1{
    background: no-repeat top center url(../images/slider/s01_m.png);
    background-size: 100%;
}
.b2{
    background: no-repeat top center url(../images/slider/s02_m.png);
    background-size: 100%;
}
.b3{
    background: no-repeat top center url(../images/slider/s03_m.png);
    background-size: 100%;
}
.b4{
    background: no-repeat top center url(../images/slider/s04_m.png);
    background-size: 100%;
}
.b5{
    background: no-repeat top center url(../images/slider/s05_m.png);
    background-size: 100%;
}

.bn .swiper-button-next {
    width: 7vw;
    height: 16vw;
    position: absolute;
    background: no-repeat top center url(../images/next_bt_m.png);
    background-size: 100%;
    top: 62vw;
    right: 2vw;
    z-index: 10;
}
.bn .swiper-button-prev {
    width: 7vw;
    height: 16vw;
    position: absolute;
    background: no-repeat top center url(../images/pre_bt_m.png);
    background-size: 100%;
    top: 62vw;
    left: 2vw;
    z-index: 10;
}

.title_02{
    width: 87vw;
    height: 27vw;
    position: relative;
    background: no-repeat top center url(../images/title_02_m.png);
    background-size: 100%;
    margin: 8vw auto;
}
.ev01,.ev02,.ev03,.ev04,.ev05{
    width: 100%;
    height: 0;
    position: relative;
    margin: 2% auto 6%;
}
.ev01{
    background: no-repeat top center url(../images/ev1_m.png);
    background-size: 100%;
    padding-bottom: 82vw;
}
.ev02{
    background: no-repeat top center url(../images/ev2_m.png);
    background-size: 100%;
    padding-bottom: 97vw;
}
.ev03{
    background: no-repeat top center url(../images/ev3_m.png);
    background-size: 100%;
    padding-bottom: 84vw;
}
.ev04{
    background: no-repeat top center url(../images/ev4_m.png);
    background-size: 100%;
    padding-bottom: 73vw;
}
.ev05{
    background: no-repeat top center url(../images/ev5_m.png);
    background-size: 100%;
    padding-bottom: 68vw;
}

.feature{
    width: 100%;
    position: relative;
    margin: 0 auto 26%;
}

.feature_pic{
    width: 70%;
    margin: auto;
    padding-top: 4.5%;
    position: relative;
}
.fe_swiper_m{
    width: 88%;
    position: relative;
    margin: auto;
}

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

.fe_swiper_m .swiper-slide div{  
    width: 100%;
    display: block;
    height: 0;
    padding-bottom: 216%;
    position: relative;
    cursor: pointer;
    z-index: 2;
}
.fe_swiper_m .swiper-slide {   
    position: relative;
    -webkit-filter: brightness(40%);
    filter: brightness(40%);
    box-shadow: 0 0 30px #00000087;
    height: 133vw;
}
.fe_swiper_m .swiper-slide-active {   
    position: relative;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}
.fe_swiper_m .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.2%;
    left: -7%;
}
.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%;
}
.feature .swiper-button-prev{
    width: 6vw;
    height: 15vw;
    position: absolute;
    background: no-repeat top center url(../images/pre_m.png);
    background-size: 100%;
    top: 64vw;
    left: 6vw;
}
.feature .swiper-button-next{
    width: 6vw;
    height: 15vw;
    position: absolute;
    background: no-repeat top center url(../images/next_m.png);
    background-size: 100%;
    top: 64vw;
    right: 6vw;
}
.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: 62%;
    height: 4vw;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 19%;
    top: 107%;
}
.feature .swiper-pagination-bullet{
    width: 2.5vw;
    height: 2.5vw;
    border: solid 1px #ac8f61;
    box-sizing: border-box;
    background-color: #000;
    border-radius: 0;
    transform: rotate(45deg);
    opacity: 1;
}
.feature .swiper-pagination-bullet-active{
    background-color: #ac8f61;
}

.copyright{
    width: 92%;
    background-color: #000;
    padding: 5% 4% 16%;
    position: relative;
    bottom: 0;
}
.firm_logo{
    width: 100%;
    height: 12vw;
    background: no-repeat center url(../images/copyright_m.png);
    background-size: 100%;
    margin: auto;
}
.w_box{
    width: 100%;
    margin: auto;
}
.w_box span{
    width: 100%;
    display: block;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 3.5vw;
    color: #c4c4c4;
    line-height: 1.25;
    font-weight: 200;
}
.wrapper.pg{
    width: 100%;
    min-height: 99vh;
    position: relative;
    background: no-repeat top center url(../images/m_list_bg.jpg);
    background-size: 100%;
    margin: auto;
}
.header.page{
    height: 3vw;
    background: none;
    overflow: visible;
}
.list_content{
    width: 100%;
    position: relative;
    margin: auto;
}
.newspage_title{
    width: 60%;
    height: 0;
    padding-bottom: 28%;
    position: relative;
    background: no-repeat top center url(../images/newslist_title_m.png);
    background-size: 100%;
    margin: 0 auto 5%;
}
.newslist{
    width: 96%;
    margin: auto;
    position: relative;
}
.newslist:after{
    content: "";
    display: block;
    width: 100.5%;
    height: 0;
    padding-bottom: 30%;
    position: absolute;
    background: no-repeat top center url(../images/list_d_m.png);
    background-size: 100%;
    top: -22.5%;
    left: -1%;
    z-index: 1;
}

.n_list_content{
    width: 94%;
    position: relative;
    margin: 0 auto 7%;
    z-index: 2;
}
.n_list_box{
    width: 100%;
    display: block;
}
.n_list_box li{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: solid 1px #444341;
    padding: 0.25% 0 2% 0;
}

.list_icon {
    width: 10%;
    height: 0;
    padding-bottom: 6%;
    position: relative;
    margin: 2.8% 4% 0 0;
    padding-left: 7.2%;
    font-size: 3.25vw;
    letter-spacing: 0.1vw;
    line-height: 1.4;
    font-weight: 400;
}
.list_w {
    width: 78%;
    height: 6vw;
    color: #ededed;
    font-size: 4vw;
    padding-top: 1.25%;
    text-decoration: none;
    display: block;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.05vw;
    overflow: hidden;
    font-weight: 400;
}
.list_w:hover{
    text-shadow: 0 0 8px #d5ab7d, 0 0 5px #d5ab7d;
}
.list_date {
    width: 78%;
    color: #a99371;
    font-size: 3.25vw;
    padding-left: 21.5%;
}
.newlist_btbox {
    width: 100%;
    margin: 0 auto 4%;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    z-index: 2;
    position: relative;
}
.newlist_btbox li {
    width: 21%;
    display: inline-block;
    margin: 0 2%;
}
.newlist_btbox li a {
    width: 100%;
    height: 7.6vw;
    display: block;
    color: #a99371;
    text-align: center;
    font-size: 4.75vw;
    padding-top: 4%;
    letter-spacing: 0.6vw;
    text-decoration: none;
    font-weight: 600;
    background: no-repeat top center url(../images/list_bt_d.png);
    background-size: 100%;
}
.newlist_btbox li a.click {
    background: no-repeat top center url(../images/list_bt_l.png);
    background-size: 100%;
    color: #fff6e8;
    text-shadow: 0 0 5px #766a5d;
}
.page_n{
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 0 auto 10%;
}
.page_n a{
    color: #fff;
    text-decoration: none;
    font-size: 3.5vw;
    letter-spacing: 0.1vw;
    display: table;
}
.page_n a:hover{
    color: #fff0bd;
}
.pre{
    margin-right: 7%;
    position: relative;
}
.pre:after{
    content: "";
    display: block;
    background: no-repeat bottom center url(../images/light.png);
    background-size: 100%;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    position: absolute;
    top: 23%;
    right: -38%;
}
.nxt{
    margin-left: 7%;
    position: relative;
}
.nxt:after{
    content: "";
    display: block;
    background: no-repeat bottom center url(../images/light.png);
    background-size: 100%;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    position: absolute;
    top: 23%;
    left: -38%;
}
.first_n{
    position: relative;
    margin-right: 6%;
    text-align: left;
}
.first_n:after{
    content: "...";
    display: block;
    position: absolute;
    color: #a59779;
    top: -8%;
    left: 124%;
    letter-spacing: 0;
    font-size: 3.5vw;
}
.last_n{
    text-align: right;
    margin-left: 6%;
    position: relative;
}
.last_n:after{
    content: "...";
    display: block;
    position: absolute;
    color: #a59779;
    top: -8%;
    right: 124%;
    letter-spacing: 0;
    font-size: 3.5vw;
}
.no+.no:after{
    content: "／";
    display: block;
    position: absolute;
    left: -207%;
    top: 12%;
    color: #a59779;
    font-size: 2vw;
}
.no+.no{
    margin-left: 6%;
}
.no{
    text-align: center;
    position: relative;
}
.no.now{
    border-bottom: 2px solid #a59779;
    color: #fff0bd;
}
.page_box{
    width: 94%;
    margin: auto;
    position: relative;
    padding-top: 13%;
}
.pg_title:after{
    content: "";
    display: block;
    background: no-repeat top center url(../images/page_d_m.png);
    background-size: 100%;
    width: 98vw;
    height: 30vw;
    position: absolute;
    bottom: -6vw;
    left: -2.4vw;
    z-index: 1;
}
.pb_back{
    width: 10%;
    color: #ffead8;
    font-size: 3.5vw;
    position: absolute;
    text-decoration: none;
    top: 2.8vw;
    left: 7vw;
    letter-spacing: 0.1vw;
    z-index: 99;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 200;
}
.pb_back:before{
    content: "";
    display: block;
    background: no-repeat top center url(../images/back.png);
    background-size: 100%;
    position: absolute;
    left: -43%;
    top: 11%;
    width: 35%;
    height: 0;
    padding-bottom: 49%;
}
.link{
    position: absolute;
    right: 0;
    top: 2.6vw;
    text-align: right;
    width: 76%;
    z-index: 99;
}
.link a{
    display: inline-block;
    color: #d9d9d9;
    font-size: 3.5vw;
    position: relative;
    text-decoration: none;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 200;
}
.link a+a{
    margin-left: 3%;
}
.link a+a:before{
    content: ">";
    display: block;
    position: absolute;
    top: -3%;
    left: -18%;
}
.pa_content{
    width: 100%;
    position: relative;
    z-index: 10;
}
.pg_title{
    display: table;
    margin: auto;
    position: relative;
}

.subject{
    color: #ffead8;
    font-size: 5.5vw;
    margin-bottom: 2%;
    letter-spacing: 0.6vw;
    text-align: center;
    line-height: 1.4;
}
.pg_date{
    font-size: 3.5vw;
    color: #b19b74;
    text-align: center;
    letter-spacing: 0.2vw;
    font-family: 'Noto Sans TC', sans-serif;
}
.pg_w{
    width: 88%;
    padding: 10% 6% 14%;
    color: #fff;
    line-height: 1.8;
    font-size: 4vw;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 200;
    letter-spacing: 0.4vw;
}
.pg_w img{
    width: 100%;
    height: auto;
}

/*pop*/

.pop_box {
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.pop_s {
    width: 92vw;
    height: 91vw;
    line-height: 1.5;
    font-size: 4.25vw;
    background: no-repeat top center url(../images/pop_bg_m.jpg);
    background-size: 100%;
    text-align: center;
    font-weight: 400;
    z-index: 5;
    display: flex;
    justify-content: center;
    font-family: 'Noto Sans TC', sans-serif;
    position: relative;
    flex-wrap: wrap;
    align-content: center;
}
.close {
    width: 9%;
    height: 0;
    padding-bottom: 12%;
    position: absolute;
    right: 1px;
    top: 1px;
    background: no-repeat top center url(../images/pop_close.png);
    background-size: 100%;
    border: none;
    cursor: pointer;
}
.search_title {
    width: 55%;
    height: 0;
    padding-bottom: 8%;
    background: no-repeat top center url(../images/pop_data_m.png);
    background-size: 100%;
    margin: 0 auto 7%;
}
.phone_pop {
    width: 74%;
    display: flex;
    padding: 0 13% 1%;
}
.pop_tips {
    width: 78%;
    font-size: 3.25vw;
    font-family: 'Noto Sans TC', sans-serif;
    margin: auto;
    display: block;
    color: #d67b7b;
}
.phone_pop>.select_area {
    background: no-repeat 90% center url(../images/row_m.png)#eee1d1;
    background-size: 11%;
    color: #523f2d;
    box-shadow: 0 0 38px #e5d9ca inset;
    border: 0;
    font-size: 4vw;
    height: 9vw;
}
.select_area {
    width: 44%;
    height: 9vw;
    font-size: 4vw;
    color: #fff;
    padding: 0 0 1% 3%;
    margin-right: 2%;
    line-height: 1;
    box-shadow: inset 0 0 15px #95918f;
    background: no-repeat 94% center url(../images/row_2.png)#000000;
    background-size: 10%;
    border: 0;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-tap-highlight-color: rgba(0, 0, 0, 0);
    -o-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    font-family: 'Noto Sans TC', sans-serif;
}
::placeholder { /* CSS 3 標準 */
    color: #b19678;
    font-size: 4vw;
}

::-webkit-input-placeholder { /* Chrome, Safari */
    color: #b19678;
    font-size: 4vw;
}

::-ms-input-placeholder { /* IE 10+ */
    color: #b19678;
    font-size: 4vw;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #b19678;
    font-size: 4vw;
    opacity: 1;
}
.phone_pop>.phone_number {
    color: #523f2d;
    box-shadow: 0 0 38px #e5d9ca inset;
    border: 0;
    font-size: 4vw;
    height: 8.2vw;
    background-color: #eee1d1;
}
.phone_number {
    width: 56%;
    height: 8.3vw;
    font-size: 4vw;
    color: #fff;
    padding: 0 2% 1%;
    text-align: center;
    outline: none;
    font-family: 'Noto Sans TC', sans-serif;
    appearance: none;
    box-shadow: inset 0 0 15px #95918f;
}
.confirm {
    width: 30%;
    height: 0;
    padding-bottom: 11%;
    border: none;
    cursor: pointer;
    margin: 2% 35%;
    background: no-repeat top center url(../images/pop_confirm_m.png);
    background-size: 100%;
}
.black {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    background-color: #000000bd;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    outline: none;
    border: 0;
}
.pop_l {
    width: 92vw;
    height: 104vw;
    background: no-repeat top center url(../images/pop_data_bg_m.jpg);
    background-size: 100%;
    font-weight: bold;
    z-index: 5;
    display: flex;
    justify-content: center;
    font-family: 'Noto Sans TC', sans-serif;
    position: relative;
    flex-wrap: wrap;
    align-content: center;
}
.code_box {
    width: 90%;
    margin: auto;
    font-family: 'Noto Serif TC', serif;
    color: #655454;
}
.code_box li {
    width: 98%;
    position: relative;
    display: flex;
    margin: auto;
}
.code_box li+li {
    margin-top: 5%;
}
.sh_title {
    font-size: 4.25vw;
    position: absolute;
    top: -48%;
    left: 6%;
    z-index: 2;
    text-shadow: 0 0 10px #fdfdfd, 0 0 10px #fdfdfd, 0 0 10px #fdfdfd, 0 0 10px #fdfdfd;
}
.pop_tip{
    font-size: 2.75vw;
    margin: -3% auto 0;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: 1.25;
}
.code {
    width: 54%;
    border: solid 1px #bab095;
    color: #8c7763;
    text-align: center;
    padding: 1.125% 1% 0;
    display: inline-block;
    font-weight: 200;
    margin-right: 2.5%;
    margin-left: 9%;
    font-size: 4vw;
    position: relative;
    height: 7vw;
}
.pop_copy {
    width: 23%;
    height: 0;
    padding-bottom: 12%;
    background: no-repeat top center url(../images/pop_copy_m.jpg);
    background-size: 100%;
    display: inline-block;
}
#loadingDiv > div {
    background: url(../images/loading.gif) no-repeat;
    background-size: 60%;
}
.story_p{
    width: 5px;
    height: 5px;
    position: absolute;
    top: 206vw;
}
.role_p{
    width: 5px;
    height: 5px;
    position: absolute;
    top: 369vw;
}
.mv_p{
    width: 5px;
    height: 5px;
    position: absolute;
    top: 532vw;
}
.social_p{
    width: 5px;
    height: 5px;
    position: absolute;
    top: 824vw;
}

/*鬧鐘*/

.time_title {
    width: 48.5%;
    height: 8vw;
    font-size: 4.5vw;
    letter-spacing: 0.5vw;
    border-right: 1px solid;
    padding-right: 6%;
    margin-right: 7%;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.time_box {
    width: 90%;
    margin: auto;
    font-family: 'Noto Serif TC', serif;
    color: #655454;
}
.time_box li {
    width: 98%;
    position: relative;
    display: flex;
    margin: auto;
}
.time_box li+li {
    margin-top: 5%;
}
.pop_time {
    width: 55%;
    height: 0;
    padding-bottom: 8%;
    background: no-repeat top center url(../images/ev/pop_time_m.png);
    background-size: 100%;
    margin: 0 auto 7%;
}
.dw_bt {
    width: 22%;
    height: 0;
    padding-bottom: 11%;
    background: no-repeat top center url(../images/ev/dw_bt_m.png);
    background-size: 100%;
    margin-right: 15%;
}