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, .9) 35%, rgba(0, 0, 0, .1)); 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('../images/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; /* border-right: 1px solid #eeeeee; */ }.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: #ffffff; }
.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('../images/star_none.svg') no-repeat; background-size: 200%; background-position: 0 50%; }
.stars-half:nth-child(2n){ background: url('../images/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: #ffffff; }
.scores-cross:after { content: ''; display: table; position: absolute; width: 2px; height: 20px; transform: rotate(-45deg); margin-left: 13px; background: #ffffff; }
.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{ font-size: 1.3em; font-weight: 300; color: #fff7dc; margin: 30px 0 0; line-height: 1.4em; }
.director-actors{ width: 100%; position: relative; 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: #eeeeee; text-decoration: underline; transition: .15s linear; }
.director-actors-td p a:hover{ color: #ffffff; }
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 #eeeeee; }
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: #ffffff; 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: #ffffff; color: #1A8BA6; }
.notification-btn{ width: 150px; height: 42px; position: relative; border-radius: 5000px; text-align: center; line-height: 42px; color: #ffffff; font-size: 1em; margin: 20px 0; transition: .15s linear; border: 1px solid #ffffff; 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: #ffffff; font-size: 1em; margin: 20px 0; transition: .15s linear; border: 1px solid #ffffff; display: inline-block; transition: .15s linear; }
.preorder-btn:hover{ background: #ffffff; 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); /* background: rgba(255, 255, 255, .3); */ 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 #ffffff; 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: #eeeeee; text-decoration: underline; transition: .15s linear; }
.video-tag p a:hover{ color: #ffffff; }
.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: 15px; }
.detail-title h4 span{ margin-left: 20px; font-size: .85em; font-weight: 300; color: #eeeeee; }
.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 #ffffff; 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: #ffffff; 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: rgba(0, 0, 0, 1.0); }
.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 s lid transparent; border-left: 20px solid #ffffff; }
.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: h dde ; 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: #eeeeee; 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: #ffffff; transform: rotate(45deg); }
.tip-close:after{ content: ''; display: table; position: absolute; top: 0; left: 11px; width: 1px; height: 28px; background: #ffffff; transform: rotate(-45deg); }


/*===============================================
popup
===============================================*/
.popup{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .9); z-index: 50; }
.popup-content{ z-index: 3; }
.popup.scroll{ overflow-y: scroll; }


/*===============================================
episode
===============================================*/
ul.episode-container{ width: 100%; /* height: 155px; */ max-height: 140px; 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; /* max-height: 6000px; transition: max-height .3s; */ }
@keyframes containerH{ 0%{ max-height: 155px; height: 155px; } 100%{ max-height: 60 00p ; height: auto; } }
ul.episode-container li{ width: 61px; height: 61px; position: relative; margin-right: 6px; margin-bottom: 0px; border: 1px solid #eeeeee; box-sizing: border-box; cursor: pointer; transition: .15s linear; color: #ffffff; margin-top: 6px; }
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: #ffffff; 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: #ffffff; color: #000000; }
ul.episode-container li.seen{ background: #b9b9b9; color: #000000; }
.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: #000000; }
.episode-content{ width: 100%; position: relative; background: #ffffff; }
.episode-content p{ width: 90%; position: relative; margin: 0 auto; padding: 15px 0; color: #000000; font-size: .9em; font-weight: 400; text-align: justify; line-height: 1.4em; }
.episode-triangle{ border-color: #ffffff transparent transparent transparent; border-style: solid solid solid solid; border-width: 10px; height: 0px; width: 0px; 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); }