@charset "UTF-8";
*{font-family: PingFangTC,微軟正黑體,Microsoft JhengHei,Open Sans,sans-serif;}
body{width: 100%; overflow-x: hidden; background: #121212; font-size: 16px;}
.scrollfixed{overflow: hidden;}

body{ position: relative; width: 100%; margin: 0; padding: 0; }
a{ text-decoration: none; cursor: pointer; }
ul, li{ list-style: none; text-decoration: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, em{ margin: 0; padding: 0; }
em{ font-style: normal; text-transform: none; list-style: none; }

body{ background: url('/img/buyprocess_bg.jpg') no-repeat #121212; background-size: cover; background-position: center; min-height: 100vh;}

nav{ width: 100%; height: 60px; position: fixed; top: 0; left: 0; z-index: 10; }
nav.scrolled{ background: rgba(0, 0, 0, .5);}
.nav-logo{max-width: 140px; min-width: 100px; position: relative; margin: 18px 15px 0 15px; float: left;}
.nav-logo img{width: 100%; vertical-align: bottom;}

.order-content, .serial-content{ width: 90%; max-width: 380px; position: relative; margin: 0 auto; padding: 100px 0 50px 0;}
.order-title, .serial-title{ font-size: 1.3em; font-weight: 300; color: #ffffff; text-align: center; margin:20px auto;}

body.order-all p{ font-size: 1em; font-weight: 300; color: #ffffff; }
body.order-all td{ font-size: 1em; font-weight: 300; color: #ffffff; }
.order-info table td{ vertical-align: top; padding: 3px 0; }
.order-info table td:nth-child(1){min-width: 80px;}

.price-area{ width: 90%; position: relative; margin: 30px auto; background: rgba(89, 102, 129, .5); border: 1px solid #4B5D7A; border-radius: 10px; box-sizing: border-box; padding: 20px 10px; }
.price-area h2{ font-size: 1.25em; font-weight: 300; color: #ffffff; text-align: center; }
.price-area h1{ font-size: 1.25em; font-weight: 300; color: #ffffff; text-align: center; margin: 10px 0; }
.price-area h1 em{ font-weight: 700; }
.price-area h3{ font-size: 1.25em; font-weight: 400; color: #ffffff; text-align: center; margin: 15px 0 0 0; }
.price-area h3 em{ font-size: 2.2em; font-weight: 700; }
.price-tool{ width: 100%; position: relative; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.price-tool-text{ width: calc(97% - 80px); position: relative; border-bottom: 1px solid #b9b9b9; padding-bottom: 5px; }
.setting-btn{ width: 80px; height: 30px; position: relative; border-radius: 5px; color: #ffffff; text-align: center; line-height: 30px; font-size: 1em; font-weight: 400; background: #d9675d; transition: .15s linear; }
.setting-btn:hover{ color: #d9675d; background: #ffffff; }
.setting-btn.change{ background: #05BDFF; color: #ffffff; }
.setting-btn.change:hover{ color: #05BDFF; background: #ffffff; }
.price-summarize{ width: 100%; position: relative; margin: 10px auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.price-summarize p.price em{ font-weight: 700; font-size: 2em; }
.order-attention{ margin: 40px 0; }
.order-attention ul, .order-attention ul li{ list-style-image:url('/img/check_b.png'); margin: 5px 0; margin-left: 16px; }
.order-alert{ margin: 10px 0; }
.agree-check{ width: 100%; position: relative; margin: 20px 0; }
.agree-check input[type="checkbox"]{ width: 20px; height: 20px; vertical-align: sub; }
.agree-check label{ font-size: 1em; font-weight: 300; color: #ffffff; }
.agree-check label a{ color: #ffffff; text-decoration: underline; }
body.order-all .order-alert p{ color: #d9675d; vertical-align: bottom; text-align: center; }
.order-alert p span img{ width: 20px; vertical-align: bottom; }
.order-btn-container{ width: 100%; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.order-btn{ padding: 7px 22px; box-sizing: border-box; font-size: 1.2em; font-weight: 300; text-align: center; border-radius: 5000px; margin: 0 7px; color: #ffffff; border: 1px solid #ffffff; transition: .15s linear; }
.order-btn:hover{ background: #999999; }
.order-btn.confirm{ background: #1B62B4; border: 1px solid #1B62B4; }
.order-btn.confirm:hover{ background: #ffffff; border: 1px solid #ffffff; color: #1B62B4; }
.order-btn.confirm.disable{ background: #797D81; border: 1px solid #797D81; color:#B8B8B8; }
.order-btn.confirm.disable:hover{ background: #797D81; border: 1px solid #797D81; color:#B8B8B8; }
.order-remind{ min-width: 100%; padding: 5px 10px; box-sizing: border-box; color: #b9b9b9; border: 1px solid #b9b9b9; font-size: .9em; font-weight: 300; margin: 20px 0; }
footer{ width: 100%; position: relative; padding: 20px 0; background: #1E1E1E; }
footer.fixed{ position: absolute; top: 100vh; left: 0; transform: translate(0, -100%); }
.footer-content{ width: 90%; position: relative; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.footer-content li{ padding: 0 15px; margin: 5px 0; }
.footer-content li{ color: #ffffff; font-size: .9em; font-weight: 300; }
.footer-content li a{ color: #ffffff; transition: .15s linear; }
.footer-content li a:hover{ text-decoration: underline; }
.footer-content li:nth-last-child(1){ font-size: .8em; }
@media all and (min-width: 430px){ .footer-content li:nth-last-child(1){ border-left: 1px solid #ffffff; } }
.order-success-tip{ width: 100%; position: relative; margin: 20px auto; }
.situation-icon{ width: 40px; height: 40px; position: relative; margin: 5px auto; }
.situation-icon img{ width: 100%; vertical-align: bottom; }
.order-success-tip h4{ font-size: 1.2em; font-weight: 700; text-align: center; }
.order-success-tip h4.text-success{ color: #05BDFF; }
.order-success-tip h4.text-failed{ color: #d9675d; }
.order-info{ margin: 30px auto; width: 90%; max-width: 260px;}
.order-info p{ line-height: 1.8em; }


/* popup */
.popup-order{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 50; background: rgba(0, 0, 0, .9); opacity: 0; display: none; }
.agreement-container{ width: 90%; height:430px; max-width: 600px; max-height: 90vh; background: #ffffff; padding: 20px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow-y:auto; z-index: 10; }

.hideinfo{display:none;}

/* =======================================================
serial number
========================================================*/
.serial-content{ min-height: calc(100vh - 98px - 149px); }

@media all and (min-width: 430px){
    .serial-content{ min-height: calc(100vh - 70px - 149px); }
}

.serial-group{ margin: 20px 0; }
.serial-content-title{ font-size: 1em; font-weight: 300; color: #B9B9B9; text-align: left; margin-bottom: 5px; }
.serial-content-title p{ font-size: 16px; font-weight: normal; font-style: normal; color: #B9B9B9;font-family: PingFang TC; line-height: 22px;}
.serial-input-input{ width: 100%; height: 40px; position: relative; border: 1px solid #4B5D7A; background: rgba(89, 102, 129, .5); padding: 0 10px; box-sizing: border-box; border-radius: 5px; font-size: 1.125em; text-align: left; line-height: 40px; outline: none; color: #C4C4C4; }
.serial-input-input.wrong{ border: 1px solid #D9675D; }

.wrong-msg{ font-size: .875em; font-weight: 300; color: #D9675D; text-align: left; margin-top: 5px; display: none; }

.serial-input-fixed{ width: 100%; height: 40px; position: relative; border: 1px solid #4B5D7A; background: rgba(89, 102, 129, .5); padding: 0 10px; box-sizing: border-box; text-align: center; color: #C4C4C4; border-radius: 5px; font-size: 1.125em; text-align: center; line-height: 40px; }
.serial-content-text{ font-size: 1em; font-weight: 500; color: #fff; text-align: left; }
.serial-content-text div{ font-size: 1em; font-weight: 500; color: #fff; text-align: left; }
.serial-content-text span{ float: right; }
.serial-content-text span a{ color: #fff; text-decoration: underline; font-size: .875em; font-weight: 300; }
.serial-content-text div.text-title {background: #1B62B4; aopacity: 0.4; border-radius: 4px;}
.serial-content-text div.text-title .title1{font-family: PingFang TC; font-style: normal; font-weight: normal; font-size: 16px; line-height: 22px; float: left;}
.serial-content-text div.text-title .title2{font-family: PingFang TC; font-style: normal; font-weight: normal; font-size: 10px; line-height: 14px;}
.serial-content-text div.text-title .title3{background-image: url('/img/icon/vector.png'); background-color: #CECECE; transform: rotate(90deg);}
.serial-alert{ margin: 50px 0 10px 0; }
.serial-alert p{ color: #fff; font-size: 1em; font-weight: 300; text-align: center; }
.serial-alert p a{ color: #fff; text-decoration: underline; }
.serial-alert p.alert{ color: #d9675d; vertical-align: bottom; text-align: center; }
.serial-alert p.alert span img{ width: 20px; vertical-align: bottom; }

.serial-situation-icon{ width: 60px; height: 60px; }
.serial-text-success{ font-size: 1.2em; font-weight: 700; text-align: center; color: #05BDFF; margin-top: 10px; }
.serial-result{ width: 100%; position: relative; margin: 20px 0 30px 0; }

.serial-btn-container{ margin-top: 40px; }

.loading{display:block;margin:5% auto;width:100px;height:82px;background:url(/img/icon/loading.svg);background-size:100px 82px;text-indent:-9999px;}

/* coupon */
.serial-info-all{
    width: 100%;
    position: relative;
    border-radius: 4px;
    border: 1px solid #B9B9B9;
    box-sizing: border-box;
    cursor: pointer;
}

.serial-info-all:after{
    content: '';
    display: table;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(28, 7, 73, .9), rgba(28, 7, 73, 0));
}

.serial-info-title{
    width: 100%;
    position: relative;
    background: rgba(27, 98, 180, .4);
}

.serial-info-title-container{
    width: 90%;
    position: relative;
    margin: 0 auto;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.serial-info-title-container h6{
    font-size: 18px;
    font-weight: 500;
    color: #B9B9B9;
}

.serial-info-switch p{
    font-size: 12px;
    font-weight: 400;
    color: #B9B9B9;
}

.serial-info-switch p span{
    margin-left: 5px;
}

.serial-info-switch p span img{
    width: 12px;
}

.serial-info-content{
    width: 90%;
    position: relative;
    margin: 0 auto;
    padding: 10px 0;
    height: 160px;
    overflow: hidden;
}

.serial-info-content p{
    color: #b9b9b9;
	font-size: 15px;
	margin-bottom: 10px;
}

.serial-info-all.open .serial-info-content{
    height: 100%;
}

.serial-info-all.open:after{
    opacity: 0;
}

.serial-info-all.open .serial-info-switch span img{
    transform: rotate(180deg);
}


/* order page */
.qa-mark{
    position: relative;
}

.qa-mark img{
    width: 16px;
    vertical-align: bottom;
    margin-bottom: 2px;
    cursor: pointer;
}

.qa-mark:before{
    content: '';
    display: table;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    border-style: solid;
    border-width: 0px 5px 6px 5px;
    border-color: transparent transparent #fff transparent;
    border-radius: 1px;
    opacity: 0;
    transition: .15s linear;
}

.qa-mark:after{
    content: '';
    display: table;
    position: absolute;
    width: max-content;
    height: 24px;
    background: #fff;
    border-radius: 4px;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    padding: 0 6px;
    top: 100%;
    left: 100%;
    transform: translate(-25%, 5px);
    opacity: 0;
    transition: .15s linear;
}

.qa-mark.coupon:after{
    content: '點擊觀看使用說明';
}

.qa-mark.summarize:after{
    content: '點擊觀看計算說明';
}

.qa-mark:hover.qa-mark:before{
    opacity: 1;
}

.qa-mark:hover.qa-mark:after{
    opacity: 1;
}

.coupon_select{
    width: calc(100% - 120px);
    position: relative;
    background-image: url('../images/select-arrow_white.svg'),
                       linear-gradient(to right, #3F3E66,  #3F3E66);
    background-repeat: no-repeat,
                       no-repeat;
    background-position: calc(100% - 10px),
                       center;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 400;
    color: #e7e7e7;
    padding: 5px 30px 5px 10px;
    box-sizing: border-box;
    appearance: none;
    outline: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.coupon_select:after{
    content: '';
    display: table;
    position: absolute;
    width: 10px;
    height: 6px;
    top: calc(50% - 3px);
    right: 0;
    background: url(../images/select-arrow_white.svg) no-repeat;
    background-size: 10px 6px;
}



.popup-content-info{
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: #ffffff;
    padding: 20px 15px;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    overflow-y: auto;
    z-index: 10;
}

.popup-content ol, .popup-content ol li{
    list-style: decimal;
}

.popup-content ol li{
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-left: -18px;
    margin-bottom: 5px;
}


/* 以下是馬力歐註解掉的，
找不到對應的HTML是coupon的，
經對比以下Code都跟style.order.css的213行.coupon-popup一模一樣，但那邊有加上coupon，做class名稱區隔
因此推測此區可能是忘記改class名稱加上coupon，但會影響其他彈窗的Style，故註解掉 */
/* popup-coupon */ 
/* .scrollfixed{
    overflow: hidden;
}
  
.popup{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.8);
    z-index: 2000;
    opacity: 0;
    display: none;
}
  
.popup-container{
    width: 90%;
    max-width: 700px;
    max-height: 480px;
    height: 85vh;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 40px 0;
}
  
.popup-content{
    width: 90%;
    position: relative;
    margin: 0 auto;
    height: calc(100% - 40px);
}
  
.popup-content h6{
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0;
    margin-bottom: 12px;
}
  
.popup-content ol{
    position: relative;
    margin: 0;
    height: calc(100% - 40px);
    overflow: auto;
}
  
.popup-content ol::-webkit-scrollbar{
      width: 5px;
}
  
.popup-content ol::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #000000;
}
  
.popup-content ol::-webkit-scrollbar-thumb {
      background: #666666; 
      border-radius: 10px;
}
  
.popup-content ol::-webkit-scrollbar-thumb:hover {
      background: #444444; 
}

.popup-content ol, .popup-coupon-content ol li{
      list-style: decimal;
}
  
.popup-content ol li{
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-left: -16px;
    margin-bottom: 5px;
}
  
.popup-btn{
    width: 126px;
    height: 40px;
    background: #1B62B4;
    border: 1px solid #1B62B4;
    box-sizing: border-box;
    border-radius: 1000px;
    position: relative;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    font-weight: 400;
    transition: .15s linear;
}
  
.popup-btn:hover{
    background: none;
    color: #1B62B4;
} */