@charset "UTF-8";
body.video-information{background:#12172c}
.scrollfixed{overflow:hidden}
.video-information p{ font-size: .95em; font-weight: 300; transition: .15s linear; line-height: 1.6em; }
.video-information p.gray{ color: #eeeeee; }
.video-information p.grayblack{ color: #333333; }
.video-information p.white{ color: #ffffff; }
.video-information p.yellow{ color: #FFFDE4; }
.video-information p.center{ text-align: center; }

header.video-main{ position: relative; width: 100%; min-width: 970px; margin: 0 auto; min-height: 100vh; }
header.video-main:before{ content: ''; display: table; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to right, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, .1) 50%); z-index: 2; }
.video-main-pic{ position: absolute; width: 70%; height: 100%; top: 0; right: 0; z-index: 1; overflow: hidden; }
.video-main-pic img{ width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-object-fit: cover; -webkit-object-position: center; -moz-object-fit: cover; -moz-object-position: center; -ms-object-fit: cover; -ms-object-position: center; -o-object-fit: cover; -o-object-position: center; }
/* ie */
.video-main-pic{ width: 80%\0; }
.video-main-pic img{ width: auto\0; }
.video-main-mask-ie{ width: 70%\0; height: 100%\0; position: absolute\0; top: 0\0; left: 0\0; background: url('/img/main_bg-mask.png') no-repeat\0; background-size: 100% 100%; z-index: 3\0; }
.video-main .header-content{ width: 100%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 80px 0; z-index: 3; }
.video-main .header-text{ width: 55%; position: relative; }
.video-main .header-btns{ width: 40%; position: relative; }
.video-main .header-text-container{ width: 90%; position: relative; margin: 0 auto; }
.video-main h6.video-feature{ font-size: 1em; font-weight: 300; line-height: 1.2em; color: #ffffff; margin: 15px auto; letter-spacing: .05em; }
.video-main h6.video-feature .grading{ border: 1px solid #ffffff; box-sizing: border-box; padding: 2px 4px; font-size: .9em; }

/* 5 stars */
.star-scores{width:100%;position:relative;display:flex;justify-content:flex-start;align-items:flex-end;flex-wrap:wrap}
.scores-average-number{display:flex;justify-content:flex-start;align-items:flex-end;flex-wrap:wrap;padding-right:10px}
.scores-average{display:flex;justify-content:flex-start;align-items:center;margin-right:10px}
.star-icon{width:25px;position:relative;margin-right:5px}
.star-icon img{width:100%;vertical-align:bottom}
.star-number{font-size:1.1em;font-weight:400;color:#ff8400}
.star-number em{font-size:1.3em;font-weight:700}
.scores-people p{line-height:30px}
.scores-yours-btn{width:80px;height:28px;position:relative;border-radius:5000px;border:1px solid #ff8400;color:#ff8400;font-size:.9em;font-weight:400;text-align:center;line-height:28px;margin-left:10px;transition:.15s linear;cursor:pointer}
.scores-yours-btn a{position:absolute;width:100%;height:100%;top:0;left:0}
.scores-yours-btn:hover{background:#ff8400;color:#fff}
.scores-popup{width:300px;padding:30px 0;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:10px;background:rgba(0,0,0,.9);border:1px solid #979797;box-sizing:border-box;z-index:5;opacity:0;display:none}
.scores-popup p{text-align:center;font-size:1.2em}
.stars-five{width:225px;position:relative;margin:10px auto}
.stars-half{width:20px;height:40px;position:relative;overflow:hidden;float:left;cursor:pointer}
.stars-half:hover img{opacity:1}
.stars-half:nth-child(2n-1){ background: url('/img/star_none.svg') no-repeat; background-size: 200%; background-position: 0 50%; }
.stars-half:nth-child(2n){ background: url('/img/star_none.svg') no-repeat; background-size: 200%; background-position: 100% 50%; margin-right: 5px; }
.stars-half img{width:200%;position:absolute;top:0;opacity:0;transition:.1s linear}
.stars-half:nth-child(2n-1) img{left:0}
.stars-half:nth-child(2n) img{right:0}
.stars-half.active img{opacity:1}
.scores-close{width:40px;height:40px;position:absolute;top:0;right:0;cursor:pointer}
.scores-cross{width:20px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.scores-cross:before{content:'';display:table;position:absolute;width:2px;height:20px;transform:rotate(45deg);margin-left:13px;background:#fff}
.scores-cross:after{content:'';display:table;position:absolute;width:2px;height:20px;transform:rotate(-45deg);margin-left:13px;background:#fff}
.scores-mask{width:100vw;height:100vh;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}

/* collect */
.collect-share{ width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; margin-top: 15px; }
.collect-area, .notification-area{ position: relative; display: flex; justify-content: flex-start; align-items: center; cursor: pointer; margin-right: 50px; }
.collect-share-btn{ width: 36px; height: 36px; position: relative; border-radius: 50%; border: 1px solid #ffffff; transition: .15s linear; margin-right: 15px; cursor: pointer; }
.bookmark{ width: 50%; position: relative; margin: 6px auto; }
.notification{ width: 60%; position: relative; margin: 6px auto; }
.bookmark img, .notification img{ width: 100%; vertical-align: text-bottom; }
.bookmark img:nth-child(2), .notification img:nth-child(2){ position: absolute; width: 100%; top: 0; left: 0; opacity: 0; transition: .15s linear; }
.collect-area:hover .collect-icon, .notification-area:hover .notification-icon{ background: #ffffff; }
.collect-area:hover .bookmark img:nth-child(2), .notification-area:hover .notification img:nth-child(2){ opacity: 1; }
.collect-area:hover p, .notification-area:hover p{ color: #ffffff; }
.collect-icon.active, .notification-icon.active{ background: #ffffff; }
.collect-icon.active .bookmark img:nth-child(2), .notification-icon.active .notification img:nth-child(2){ opacity: 1; }
.copy_coupon{ display: none; }
.share-area{ display: flex; justify-content: flex-start; align-items: center; }
.share-area p{ margin-right: 15px; }
.share-area p i{ color: #ffffff; }
.fb-icon, .link-icon{ text-align: center; line-height: 37px; font-size: 1.2em; color: #ffffff; transition: .15s linear; }
.fb-icon:hover, .link-icon:hover{ background: #ffffff; color: #1B62B4; }

/* director actors */
h3.subtitle{margin: 30px 0 0;color:#fff7dc;font-weight:300;font-size:1.3em;line-height:1.4em}
.director-actors{position:relative;width:100%;margin-top: 15px;}
.table-display{display:table}
.table-tr{display:table-row}
.table-td{display:table-cell}
.director-actors-td:nth-child(1){width:76px}
.director-actors-td p a{color:#eee;text-decoration:underline;transition:.15s linear}
.director-actors-td p a:hover{color:#fff}
p.storyline{margin:20px 0;text-align:justify}
.program-area{margin:30px 0}
.program-area .table-td:nth-child(1){width:76px}
span.program-item{padding:0 10px 0 5px;border-right:1px solid #eee}
span.program-item:nth-last-child(1){border-right:none}

/* digital collect btn */
.digital-collect-btn{width:180px;height:42px;position:relative;border-radius:5000px;text-align:center;line-height:42px;color:#fff;background:#1a8ba6;font-size:1em;margin:20px 0;transition:.15s linear}
.digital-collect-btn a{position:absolute;width:100%;height:100%;top:0;left:0}
.digital-collect-btn:hover{background:#fff;color:#1a8ba6}
.notification-btn{width:150px;height:42px;position:relative;border-radius:5000px;text-align:center;line-height:42px;color:#fff;font-size:1em;margin:20px 0;transition:.15s linear;border:1px solid #fff;display:inline-block;margin-right:10px;transition:.15s linear}
.notification-btn.active{background:#1b62b4;border:1px solid #1b62b4}
.notification-btn:hover{background:#1b62b4;border:1px solid #1b62b4}
.preorder-btn{width:180px;height:42px;position:relative;border-radius:5000px;text-align:center;line-height:42px;color:#fff;font-size:1em;margin:20px 0;transition:.15s linear;border:1px solid #fff;display:inline-block;transition:.15s linear}
.preorder-btn:hover{background:#fff;color:#1a8ba6}

/* play-btn */
.play-btn{position:absolute;top:calc(50vh - 60px);left:40%;transform:translate(-50%,-50%);cursor:pointer}
.play-circle{width:80px;height:80px;position:relative}
.play-circle-black{width:80px;height:80px;position:relative;border-radius:50%;background:rgba(0,0,0,.7);background:linear-gradient(-135deg,#2b4cb8,#3928a3,#953ab3);z-index:2}
.play-circle:before{content:'';display:table;border-radius:50%;width:20px;height:20px;background:rgba(61,35,170,.7);position:absolute;top:37%;left:37%;transform:translate(-50%,-50%);animation:playCirclePurple 1.5s forwards infinite;z-index:1}
@keyframes playCirclePurple{0%{transform:scale(1);opacity:0}
50%{opacity:1}
100%{transform:scale(6);opacity:0}
}
.play-triangle{position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:25px solid #fff;display:inline-block;z-index:2}
.play-btn p{text-align:center;font-size:1.1em;font-weight:400;text-shadow:2px 2px 2px rgba(0,0,0,.5);margin-top:10px}
.teaser-btn{width:120px;height:100px;position:absolute;right:0;top:calc(50vh - 60px);transform:translate(0,-50%);background:rgba(0,0,0,.7);border-top-left-radius:10px;border-bottom-left-radius:10px}
.teaser-btn a{position:absolute;width:100%;height:100%;top:0;left:0}
.teaser-btn.none{display:none}
.teaser-content{width:60%;position:absolute;top:50%;left:10%;transform:translate(0,-50%)}
.teaser-icon{width:50%;position:relative;margin:5px auto}
.teaser-icon img{width:100%;vertical-align:bottom}
.teaser-content p{text-align:center;text-shadow:2px 2px 2px rgba(0,0,0,.5)}

/*===============================================
video detail
===============================================*/
section.video-detail{width:100%;position:relative;margin:0 auto;padding:60px 0;background:#12172c}
.video-detail-container{width:95%;position:relative;margin:0 auto;display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap}
.video-detail-all{width:100%;position:relative;margin-bottom:50px}
.video-detail-half{width:45%;position:relative;margin-bottom:50px}
.video-tag p{line-height:2em}
.video-tag p a{color:#eee;text-decoration:underline;transition:.15s linear}
.video-tag p a:hover{color:#fff}
.detail-title{position:relative}
.detail-title h4{font-size:1.15em;font-weight:400;text-align:left;color:#fffde4;padding-left:13px;border-left:3px solid #fffde4;box-sizing:border-box;margin-bottom:10px}
.detail-title h4 span{margin-left:20px;font-size:.85em;font-weight:300;color:#eee}
.detail-title p.more{position:absolute;bottom:0;right:0;z-index:1}
.detail-title p.more a{color:#fffde4}
.episode-btns:after{content:'';display:table;clear:both}
.episode-btns h4{float:left}
.notification-episode{ display: flex; justify-content: flex-start; align-items: center; float: left; margin-left: 20px; margin-top: 2px; }
.noti-switch{width:56px;height:26px;position:relative;border-radius:5000px;border:2px solid #fff;box-sizing:border-box;cursor:pointer;margin-left:10px}
.noti-switch.active{background:#1b62b4}
.noti-circle{width:28px;height:28px;border-radius:50%;position:absolute;top:0;left:0;background:#fff;box-shadow:3px 3px 6px rgba(0,0,0,.3);margin-left:-3px;margin-top:-3px}
.detail-all-container{width:100%;position:relative;margin:10px auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}
.detail-all-item{width:16%;position:relative;margin-right:.8%;transition:.15s linear;z-index:1}
.detail-all-item.drama-related-item{width:24%;position:relative;margin-right:1.33%}
.detail-all-item.drama-related-item:nth-last-child(1){margin-right:0}
.drama-related-item .related-content{ width: 100%; padding-bottom: 66.6667%; position: relative; overflow: hidden; }
.drama-related-item .related-content img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;}
/* ie */
.drama-related-item .related-content img{ height: auto\0; }
.detail-all-item:nth-last-child(1){margin-right:0}
.detail-all-item a:hover .play-icon{background:#000}
.tidbits-content{width:100%;height:0;padding-bottom:56.25%;position:relative}
.tidbits-content img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute}
/* ie */
.tidbits-content img{ height: auto\0; }
.play-icon{width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,.5);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.15s linear}
.play-icon .play-triangle{border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:20px solid #fff}
.tidbits-text{width:100%;position:relative;background:rgba(0,0,0,.8)}
.tidbits-text p{padding:5px 10px;box-sizing:border-box;height:32px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.video-photos .detail-all-item:hover{opacity:.8}
.photos-content{width:100%;height:0;padding-bottom:66.67%;position:relative;background:rgba(0,0,0,.5)}
.photos-content img{width:100%;height:100%;object-fit:contain;object-position:center;position:absolute}
.related-content{width:100%;height:0;padding-bottom:148%;position:relative;background:rgba(0,0,0,.5)}
.related-content img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute}
.related-text{width:100%;position:relative;background:rgba(0,0,0,.8);padding:8px 10px;box-sizing:border-box;transition:.15s linear}
.related-text h5{font-size:1.1em;font-weight:400;color:#eee;height:26px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.related-content .feature-item{position:absolute;top:0;left:0;margin-right:0}
.related-content .program-item{position:absolute;bottom:0;right:0;margin-right:0}
.video-related .detail-all-item:hover{box-shadow:3px 4px 12px rgba(0,0,0,.8);z-index:2}
.video-related .detail-all-item:hover .related-text{background:#121212}

/*===============================================
tip fixed
===============================================*/
.tip-fixed{width:100%;height:46px;position:fixed;bottom:0;left:0;background:rgba(0,135,255,.9);z-index:20;opacity:0;display:none}
.tip-fixed p{font-size:1.1em;line-height:46px;text-align:center;font-weight:400}
.tip-close{width:24px;height:24px;position:absolute;right:15px;top:10px;cursor:pointer}
.tip-close:before{content:'';display:table;position:absolute;top:0;right:12px;width:1px;height:28px;background:#fff;transform:rotate(45deg)}
.tip-close:after{content:'';display:table;position:absolute;top:0;left:11px;width:1px;height:28px;background:#fff;transform:rotate(-45deg)}

/*===============================================
episode
===============================================*/
ul.episode-container{width:100%;max-height:155px;position:relative;margin:0 auto;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;overflow:hidden}
ul.episode-container.open{animation:containerH 1s linear forwards}
@keyframes containerH{0%{max-height:155px;height:155px}
100%{max-height:60000px;height:auto}
}
ul.episode-container li{width:61px;height:61px;position:relative;margin-right:6px;margin-bottom:0px;margin-top:6px;border:1px solid #eee;box-sizing:border-box;cursor:pointer;transition:.15s linear;color:#fff}
ul.episode-container li.free{border:1px solid #c04983}
ul.episode-container li.free:after{content:"免費";display:table;position:absolute;top:0;right:0;background:#c04983;padding:0 2px;color:#fff;font-size:.5em}
ul.episode-container li p{width:90%;font-size:1em;line-height:1.2em;font-weight:400;text-align:center;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)}
ul.episode-container li:hover{background:#fff;color:#000}
ul.episode-container li.seen{background:#b9b9b9;color:#000}
.episode-info{width:250px;position:absolute;top:28px;transform:translate(0,-100%);z-index:5;opacity:0;display:none}
.episode-num{width:100%;position:relative;margin:0 auto;padding:8px 0;background:#f5f5f5}
.episode-num h6{width:90%;position:relative;margin:0 auto;text-align:left;font-size:.9em;font-weight:500;color:#000}
.episode-content{width:100%;position:relative;background:#fff}
.episode-content p{width:90%;position:relative;margin:0 auto;padding:15px 0;color:#000;font-size:.9em;font-weight:400;text-align:justify;line-height:1.4em}
.episode-content h6{width:90%; position: relative; margin: 0 auto; padding: 15px 0 0 0; color: #000000; font-size: 1em; font-weight: 500; text-align: left; line-height: 1.4em; }
.episode-triangle{border-color:#fff transparent transparent transparent;border-style:solid solid solid solid;border-width:10px;height:0;width:0;position:absolute;top:28px;left:35px;transform:translate(-50%,0);opacity:0;display:none}
.stretch-btn{width:80px;position:relative;margin:0 auto;cursor:pointer}
.stretch-btn img{width:100%}
.stretch-btn.rotate{transform:rotate(180deg)}

/* ============================================================
text popup
============================================================ */
.popup-content-4k, .popup-content-multi{ width: 90%; max-width: 600px; background: #ffffff; padding: 20px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

.popup-voucher{ width: 100%; max-width: 360px; background: #ffffff; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding-bottom: 15px; border-radius: 5px; overflow: hidden; }
.popup-voucher h3{ text-align: center; color: #000000; font-size: 1.2em; font-weight: 500; height: 52px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.popup-voucher h3.voucher-ok-title{ height: auto; }
.popup-voucher p{ color: #333333; }
.popup-voucher h6{ width: calc(100% - 30px); position: relative; text-align: left; color: #1B62B4; font-size: 1em; font-weight: 400; }
.switch-arrow{ position: absolute; width: 20px; height: 20px; top: 1px; right: -20px; cursor: pointer; }
.switch-arrow.turn{ transform: rotate(180deg); }
.switch-arrow img{ width: 100%; vertical-align: bottom; }
.voucher-container{ display: none; width: 90%; margin: 0 auto; }
.voucher-container a{ text-decoration: none; }
.popup-voucher.open{ top: 0; transform: translate(-50%, 0); }
.voucher-ok{ display: none; opacity: 0; padding-top: 20px; }

.voucher-info{ width: 90%; margin: 0 auto; }

.voucher-title{ width: 100%; position: relative; margin: 0 auto; background: #1B62B4; padding: 12px 0 0px 0; margin-bottom: 10px; }
.voucher-title-container{ width: 90%; position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;padding-bottom: 13px; }
.voucher-title-container h4{ font-size: 1em; font-weight: 400; width: 80px; text-align: center; color: #f5f5f5; text-decoration: underline; }
.voucher-title-container h3{ width: calc(100% - 80px); text-align: left; padding: 0 5px; box-sizing: border-box; color: #ffffff; }

.voucher-ticket{ width: 100%; position: relative; margin: 10px auto; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.voucher-content{ width: calc(100% - 80px); padding: 10px; box-sizing: border-box; background: #f7f7f7; border-radius: 5px; border: 1px solid #dadada; transition: .15s linear; }
.voucher-content.active{ box-shadow: 0px 6px 4px rgba(0, 0, 0, .4); background: #ffffff; }
.voucher-content h4{ font-size: 1.15em; font-weight: 700; text-align: left; color: #000000; margin-bottom: 5px; }
.voucher-content h4 em{ font-weight: 400; color: #666666; font-size: .8em; }
.voucher-content p{ font-size: .9em; font-weight: 400; text-align: left; color: #1B62B4; }
.voucher-sheets{ width: 80px; padding: 10px; box-sizing: border-box; background: #00a4dfa8; border-radius: 5px; border-left: 2px dotted #ffffff; transition: .15s linear; position: relative; }
.voucher-sheets.active{ box-shadow: 0px 6px 4px rgba(0, 0, 0, .4); background: #00a4df; }
.voucher-sheets h5{ font-size: 1em; font-weight: 300; color: #ffffff; text-align: center; }
.voucher-sheets h5 em{ font-size: 1.8em; font-weight: 700; }
@media all and (min-width: 1024px) and (orientation: landscape){
    .voucher-ticket:hover .voucher-content{box-shadow: 0px 6px 4px rgba(0, 0, 0, .4); background: #ffffff;}
    .voucher-ticket:hover .voucher-sheets{box-shadow: 0px 6px 4px rgba(0, 0, 0, .4); background: #00a4df;}
}

.voucher-checked{ width: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; }
.voucher-sheets.active .voucher-checked{ display: block; }
.voucher-checked img{ width: 100%; vertical-align: bottom; }

/* ============================================================
order popup
============================================================ */
.order-section{ width: 90%; max-width: 970px; min-height: 95vh; position: relative; margin: 20px auto; background: #ffffff; z-index: 3;}
.order-name{ width: 100%; position: relative; background: url('/img/web/buyprocess_bg.jpg') no-repeat; background-size: cover; background-position: top right;}
.order-poster{ width: 22%; padding-bottom: 32.6%; position: absolute; top: 50px; left: 5%; box-shadow: 2px 3px 5px rgba(0, 0, 0, .3);}
.order-poster img{ width: 100%; vertical-align: bottom; position: absolute; top: 0; left: 0;}
.order-name-text{ width: 70%; position: relative; margin-left: 30%; padding: 50px 20px; box-sizing: border-box;}
.order-name-text h3{ font-size: 1.3em; font-weight: 300; color: #ffffff; text-align: left; margin-bottom: 10px;}
.order-name-text h2{ font-size: 2.2em; font-weight: 500; color: #ffffff; text-align: left; height: 52px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.order-program{ width: 70%; position: relative; margin-left: 30%; padding: 20px; box-sizing: border-box;}
.tab-area{ width: 100%; height: 40px; position: relative; border-bottom: 1px solid #089BD2; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.tab-item{ width: 110px; position: relative; font-size: 1.2em; font-weight: 300; color: #1e1e1e; text-align: center; line-height: 40px; cursor: pointer; margin-right: 20px; box-sizing: border-box; transition: .15s linear;}
.tab-item.active{ color: #089BD2; font-weight: 500; border-bottom: 3px solid #089BD2;}
.tab-item:hover{ border-bottom: 3px solid #089BD2;}
.tab-content{ width: 100%; position: relative;}
.tab-content-item{ width: 100%; position: relative; opacity: 0; display: none;}
.tab-program{ width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin: 10px 0;}
.tab-program input{ width: 30px; position: relative; margin: 0; margin-top: 16px;}
.tab-program label{ width: calc(100% - 30px); position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding: 0 12px 10px; box-sizing: border-box; border-bottom: 1px solid #eeeeee; margin-top: 10px;}
.tab-program-content{ width: calc(100% - 60px); position: relative; vertical-align: top;}
.tab-price{ width: 60px; position: relative; vertical-align: top; color: #1e1e1e; font-size: 1.2em; font-weight: 500; text-align: right;}
.tab-program-content h4{ font-size: 1.1em; font-weight: 500; color: #1e1e1e;}
.tab-program-content p{ font-size: 1em; font-weight: 300; color: #1e1e1e;}
.tab-program-content p em{ font-size: .85em; font-weight: 300; color: #D9675D;}
.tab-program-content p.tab-program-info {font-size: .85em;font-weight: 300;color: #1B62B4;display: -webkit-box;}
.tab-toggle-content{ width: 100%; position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.tab-toggle-btn{ width: 90%; position: relative; margin-left: 42px; cursor: pointer; padding: 5px 0;}
.tab-toggle-btn h4{ font-size: 1.1em; font-weight: 500; color: #999999; text-align: left;}
.tab-toggle-btn h4.toggle-arrow{ position: absolute; right: 0; top: 0;}
.tab-toggle-btn h4.active{ color: #1B62B4;}
.tab-normal-btn{ max-width: 120px; min-width: 90px; height: 40px; position: relative; margin: 10px auto; border-radius: 5000px; box-sizing: border-box; background: #1B62B4; border: 1px solid #1B62B4; color: #ffffff; font-size: 1.1em; font-weight: 300; text-align: center; line-height: 40px; cursor: pointer; transition: .15s linear;}
.tab-normal-btn:hover{ background: #ffffff; color: #1B62B4;}
h5.tab-text{ width: 100%; position: relative; font-size: 1.2em; font-weight: 300; color: #1e1e1e; text-align: center; margin: 20px 0;}

.order-popup-close{ width: 30px; height: 30px; position: absolute; top: 10px; right: 10px; cursor: pointer;}
.order-popup-close:before{ content: ''; display: table; position: absolute; width: 1px; height: 30px; transform: rotate(45deg); margin-left: 15px; background: #ffffff;}
.order-popup-close:after{ content: ''; display: table; position: absolute; width: 1px; height: 30px; transform: rotate(-45deg); margin-left: 15px; background: #ffffff;}

/* ============================================================
album popup
============================================================ */
.popup-content-poster, .popup-content-more, .popup-content-highlight{ width: 100%; top: 0; left: 0; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.popup-content-order{width: 100%;}
.popup-player-area{ width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;}
.popup-album-pic{ width: calc(100% - 250px); min-height: 100vh; position: relative;}
.popup-album-container{ width: 80%; height: 80vh; position: relative; top: 10vh; left: 10%;}
.popup-album-show{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 1; display: contents;}
.popup-album-show img{ width: 100%; height: 100%; object-fit: contain; object-position: center;}
/* ie */
.popup-album-show{ height: auto\0; }
.popup-control-close{ width: 40px; height: 40px; position: absolute; top: 0; right: 0; background: rgba(30,30,30,.6); cursor: pointer; transition: .15s linear; cursor: pointer; z-index: 3;}
.popup-control-close:hover{ background: rgba(30,30,30,1);}
.album-popup-close{ width: 24px; height: 24px; position: absolute; top: 8px; right: 8px; cursor: pointer;}
.album-popup-close:before{ content: ''; display: table; position: absolute; width: 2px; height: 24px; transform: rotate(45deg); margin-left: 12px; background: #ffffff;}
.album-popup-close:after{ content: ''; display: table; position: absolute; width: 2px; height: 24px; transform: rotate(-45deg); margin-left: 12px; background: #ffffff;}
.popup-album-pic-close{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
.switch-controlbar-album{ width: 20px; height: 50px; position: absolute; top: 50px; right: 0; border-radius: 10px 0 0 10px; background: rgba(30,30,30,.6); cursor: pointer; z-index: 2;}
.switch-controlbar-album a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2;}
.controlbar-img-album{ width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.controlbar-img-album img{ width: 100%; vertical-align: bottom;}

.popup-album-items{ width: 250px; height: 100vh; position: relative; background: #1e1e1e; overflow-y: scroll; }
.popup-album-items ul{ width: 100%; position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap;}
.popup-album-btn{ width: 46%; position: relative; padding-bottom: 32%; margin: 2%; background: rgba(0, 0, 0, .5); cursor: pointer;}
.popup-album-btn img{ width: 100%; height: 100%; object-fit: contain; object-position: center; position: absolute;}
.popup-btn-highlight{ width: 96%; position: relative; margin: 0 auto; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; background: #1e1e1e; transition: .15s linear;}
.popup-btn-highlight:hover{ background: #555555;}
.popup-btn-highlight.active{ background: #555555;}
.btn-highlight-pic{ width: 50%; padding-bottom: 33.3333%; position: relative;}
.btn-highlight-pic img{ width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute;}
.btn-highlight-pic.free:after{ content: "免費"; display: table; width:25px; height:10px; position: absolute; top: 0; right: 0; background: #C04983; padding: 0 2px; color: #ffffff; font-size: .5em; }
.btn-highlight-text{ width: 46%; position: relative; font-size: 1em; line-height: 1.4em; font-weight: 400; text-align: left; height: 66px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #ffffff;}

.popup-video-container{ width: 100%; padding-bottom: 56.25%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.popup-video-container iframe{ position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.infor-btn-container{width:160%;position:relative;display:flex;align-items:center;flex-wrap:wrap}
.promote-btn{width:100%;height:42px;position:relative;border-radius:500em;text-align:center;line-height:42px;color:#fff;background:#ffffff47;font-size:1em;transition:.15s linear;display:inline-flex;padding-right:10px}
.promote-btn .btn-box img{padding:0 10px}
.promote-btn .btn-box{border-right:1px solid #ffffff30;margin-right:10px}
.promote-btn:hover{background:#ffffff80}

ul.episode-container li {width: 58px;}

.player-episode-all{ position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 4;}
.player-episode-mask{ width: calc(100% - 340px); height: 100%; position: absolute; top: 0; left: 0;}
.player-episode-content{ position: absolute; width: 250px; height: 100%; top: 0; right: 0;}
.player-episode-container{ width: 85%; height: calc(100% - 40px); position: relative; margin: 0 auto; padding: 20px 0;}
.player-choose-epi{ font-size: .9em; font-weight: 300; color: #eeeeee; margin-bottom: 10px;}
.player-choose-epi select{ width: calc(100% - 85px); border: 1px solid #f5f5f5; box-sizing: border-box; border-radius: 5px; background: none; color: #f5f5f5; padding: 5px; appearance:none;   -moz-appearance:none;   -webkit-appearance:none;  background: url('/img/icon/select-arrow-down.svg') no-repeat 95% center transparent; background-size: 10px;}
.player-choose-epi select:focus{ border: 1px solid #f5f5f5; outline: none;}
.player-choose-epi select option{ width: 100%; position: relative; padding: 5px; box-sizing: border-box; background: rgba(0, 0, 0, .9); color: #f5f5f5; text-align: left; font-size: 1em; font-weight: 300; transition: .15s linear;}

ul.episode-player{ width: 100%; max-height: calc(100% - 70px); position: relative; overflow: auto;}
ul.episode-player:after{ content: ''; display: table; height: 30px;}
ul.episode-player::-webkit-scrollbar{ width: 8px }
ul.episode-player::-webkit-scrollbar-track { background: rgba(255, 255, 255, .1);}
ul.episode-player::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.4);  border-radius: 5000px;}

.epi-player-item{ max-height: 100px; width: 100%; position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid #666666; padding: 17px 0; padding-right: 20px; padding-left: 12px; box-sizing: border-box; transition: .15s linear;}
.epi-player-item.seen{ background: #333333;}
.epi-player-item.current{ border: 1px solid #ffffff;}
.epi-player-item:hover{ border: 1px solid #999999;}
.epi-player-text{ width: 100%; position: relative; color: #ffffff; cursor: pointer;}
.epi-player-time{ width: 50px; position: relative; font-size: .8em; font-weight: 300; color: #999999; text-align: right;}
.epi-player-text h6{ width: 100%; font-size: .9em; font-weight: 500; text-align: left; margin-bottom: 5px; position: relative; height: 20px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.epi-player-text h5{ width: 100%; font-size: .8em; font-weight: 300; text-align: left; position: relative; height: 18px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.epi-player-down{ width: 14px; position: absolute; bottom: 0; right: 0; cursor: pointer;}
.epi-player-down img{ width: 100%; vertical-align: bottom;}
.epi-player-down.active{ transform: rotate(180deg);}
.epi-player-intro{ width: 95%; position: relative; margin: 10px auto; display: none;}
.epi-player-intro p{ font-size: .8em; font-weight: 300; color: #f5f5f5; text-align: justify;}

.popup-album-items.popup-album-items-drama {overflow-y: unset;}

.loading{width: 80px;height: 80px;background-size: 80px 80px;}

.custom-select-wrapper{position:relative;user-select:none;width:calc(100% - 75px);float:right}
.custom-select{position:relative;display:flex;flex-direction:column;border-width:1px;border-style:solid;border-color:#fff;border-radius:5px}
.custom-select__trigger{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 7px;cursor:pointer;height:25px}
.custom-options{position:absolute;display:block;top:100%;left:0;right:0;border:1px solid #fff;border-top:0;background:#fff;transition:all .5s;opacity:0;visibility:hidden;pointer-events:none;z-index:2}
.custom-select.open .custom-options{opacity:1;visibility:visible;pointer-events:all;max-height:400px;overflow:auto}
.custom-option{position:relative;display:block;padding:0 0 0 10px;color:#fff;line-height:25px;cursor:pointer;transition:all .5s;background:#000}
.custom-option:hover{cursor:pointer;background-color:#000}
.custom-option.selected{color:#fff;background-color:#333}
.arrow{position:relative;height:10px;width:10px}
.arrow::after,.arrow::before{content:"";position:absolute;bottom:0;width:.15rem;height:100%;transition:all .5s}
.arrow::before{left:-1px;transform:rotate(45deg);background-color:#fff}
.arrow::after{left:5px;transform:rotate(-45deg);background-color:#fff}
.open .arrow::before{left:-1px;transform:rotate(-45deg)}
.open .arrow::after{left:5px;transform:rotate(45deg)}