﻿/*************** custom ***************/
/* custom-select */
.custom-select {-webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 8px; width: 72px; height: 24px;  border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 13px; letter-spacing: -0.7px; transition: border-color 0.3s; cursor: pointer; outline: none; background: #0d0d0d url(../images/ico_select.svg) no-repeat right 8px center / 8px auto;}
.custom-select:focus {outline: none; border: 1px solid #fff; background-color: rgb(13, 13, 13);}
.custom-select:disabled {opacity: .3;}
.custom-select::-webkit-scrollbar {width: 6px;}
.custom-select::-webkit-scrollbar-track {background: #0D0D0D;}
.custom-select::-webkit-scrollbar-thumb {background: #787878; border-radius: 3px;}
.custom-select::-webkit-scrollbar-thumb:hover {background: #999;}
.custom-select option {color: #fff; cursor: pointer;}
.custom-select.h-32 {padding: 0 11px; height: 32px; font-size: 16px; background: #0d0d0d url(../images/ico_select.svg) no-repeat right 11px center / 11px auto;}
.custom-select.h-40 {padding: 0 15px; height: 40px; font-size: 18px; background: #0d0d0d url(../images/ico_select.svg) no-repeat right 15px center / 13px auto;}
/* custom-scroll */
.custom-scroll {overflow-y: auto;}
.custom-scroll::-webkit-scrollbar {width: 16px; padding: 0 3px;}
.custom-scroll::-webkit-scrollbar-track {border-left: 1px solid rgba(255, 255, 255, .1); border-right: 1px solid rgba(255, 255, 255, .1);}
.custom-scroll::-webkit-scrollbar-thumb {background: #787878; background-clip: padding-box; border: 4px solid transparent; border-radius: 8px;}
/*************** sub-tit ***************/
.sub-tit a {cursor:pointer;}
.sub-tit.mt-80 {margin-top: 80px;}
.sub-tit .info {position: relative; margin-right: 14px;}
.sub-tit .info-btn {opacity: .4; position: relative; display: block; width: 22px; height: 22px; margin-left: 12px; background: url(../images/ico_search_info.svg) no-repeat center/cover; text-indent: -9999px; font-size: 1px;}
.sub-tit .info-msg {position: absolute; top: 26px; left: 50%; transform: translateX(-50%); z-index: 2; display: none; padding: 24px; border-radius: 8px; border: 1px solid #d2d2d2; background: #fff; text-wrap: nowrap; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15));}
.sub-tit .info-msg::before {content: ''; position: absolute; top: -8px; left: calc(50% + 6px); transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; border-radius: 1px; border-top: 1px solid #d2d2d2; border-left: 1px solid #d2d2d2; background: #fff; border-top-left-radius: 4px;}
.sub-tit .info-msg.on {display: block;}
.sub-tit .info-msg h4 {margin-bottom: 14px; font-family: 'mbcnew-bold';}
.sub-tit .info-msg p {margin-bottom: 10px; font-size: 13px; line-height: 1.4;}
.sub-tit .info-msg span.fc-p {font-family: 'mbcnew-bold'; color: #6706D3;}
.sub-tit .info-msg span.fw-b {font-family: 'mbcnew-bold';}
.sub-tit .info-msg span.ico-img {display: inline-block; margin-top: -1px; width: 14px; height: 14px; background: url(../images/ico_info_img.svg) no-repeat center; background-size: 12px 13px; background-position: center; vertical-align: middle;}
.sub-tit .info-msg .sub li {position: relative; margin-bottom: 5px; padding-left: 10px; font-size: 13px; line-height: 1.4;}
.sub-tit .info-msg .sub li::before {content: '-'; position: absolute; left: 0px; top: 1px; margin-right: 1px;}
.sub-tit .more-btn {display: inline-block; margin-left: auto; padding-right: 10px; color: #b4b4b4; font-size: 16px; }
.sub-tit .more-btn::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 7px; height: 12px; background: url(../images/ico_tit_arrow.svg) no-repeat center/cover;}
/*************** top-slide ***************/
.top-slide {width: 1464px; margin: 0 auto 60px;}
.top-slide a {cursor:pointer;}
.top-slide li {overflow: hidden; position: relative; margin: 0 12px; width: 464px !important; height: 261px; border-radius: 8px;}
.top-slide li.active {border: 4px solid #6706d3;}
.top-slide li .img {width: 100%; height: 100%;}
.top-slide li .img img {width: 100%; height: 100%; object-fit: cover; transition: .5s;}
.top-slide li:hover .img img {transform: scale(1.1);}
.top-slide li .txt {position: absolute; top: 0; left: 0; z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, .5);}
.top-slide li .txt span {color: #fff; font-family: 'mbcnew-bold'; font-size: 28px; letter-spacing: -1.4px; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.60);}
.top-slide .slick-arrow {position: absolute; top: 99px; z-index: 10; width: 64px; height: 64px; border-radius: 50%; backdrop-filter: blur(7.5px); text-indent: -9999px; font-size: 1px;}
.top-slide .slick-prev {left: -20px; background: rgba(0, 0, 0, .4) url(../images/ico_slide_arrow_left.svg) no-repeat center/cover;}
.top-slide .slick-next {right: -20px; background: rgba(0, 0, 0, .4) url(../images/ico_slide_arrow_right.svg) no-repeat center/cover;}
.top-slide .slick-track {display: flex; justify-content: flex-start !important; width: 100% !important;}
/*************** flex-wrap ***************/
.flex-wrap {display: flex; flex-direction: column; margin: 0 auto 40px;}
.flex-wrap.mb-0 {margin: 0 auto;}
.flex-wrap [class^="row-"]:not(:last-of-type):not(.row-tit) {margin-bottom: 24px;}
/* row-btn */
.row-btn {display: flex; align-items: center;}
.row-btn .btn {display: flex; justify-content: center; align-items: center; width: 128px; height: 32px; background: #3c3c3c; border-radius: 100px; color: #f0f0f0;cursor:pointer;}
.row-btn .btn::before {content: ''; display: inline-block; margin-right: 7px; width: 7px; height: 12px; background: url(../images/ico_arrow_left.svg) no-repeat center/cover;}
.row-btn .btn.btn-prev {width: 98px;}
.row-btn .list-tit {position: relative; display: flex; align-items: center; margin-left: 33px; color: #fff; font-family: 'mbcnew-medium'; font-size: 20px;}
.row-btn .list-tit::before {content: ''; position: absolute; top: 50%; left: -16px; transform: translateY(-50%); width: 1px; height: 20px; background: rgba(255, 255, 255, .3);}
.row-btn .home-btn {display: inline-block; margin-left: 10px; width: 18px; height: 20px; background: url(../images/ico_home.svg); font-size: 1px; text-indent: -9999px;}
/* row-video */
.row-video {position: relative; display: flex; width: 100%;}
.row-video .left, .row-video .right {position: relative; height: 467px; background: #262626;}
.row-video .left {overflow: hidden; width: 830px;}
.row-video .left img {width: 100%; height: 100%; object-fit: cover;}
.row-video .left .buy-wrap {position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, .6);}
.row-video .left .buy-wrap a {cursor:pointer;}
.row-video .left .buy-wrap .txt {margin-bottom: 32px; color: #fff; font-size: 24px;}
.row-video .left .buy-wrap .btn {display: flex; justify-content: center; align-items: center; width: 224px; height: 56px; border-radius: 6px; background: #6706d3; color: #fff; font-family: 'mbcnew-medium'; font-size: 20px;}
.row-video .left .buy-wrap .btn::before {content: ''; margin-right: 7px; width: 20px; height: 16px; background: url(../images/ico_form_btn2.svg);}
.row-video .left .login-wrap {position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, .6);}
.row-video .left .login-wrap a {cursor:pointer;}
.row-video .left .login-wrap .txt {margin-bottom: 32px; color: #fff; font-size: 24px;}
.row-video .left .login-wrap .btn {display: flex; justify-content: center; align-items: center; width: 224px; height: 56px; border-radius: 6px; background: #6706d3; color: #fff; font-family: 'mbcnew-medium'; font-size: 20px;}
.row-video .left .login-wrap .btn::before {content: ''; margin-right: 7px; width: 16px; height: 18px; background: url(../images/ico_form_btn1.svg);}
.row-video .right {position: relative; display: flex; flex-direction: column; justify-content: center; margin-left: auto; padding: 0px 68px 80px 32px; width: 586px;}
.row-video .right h5 {color: #fff; font-size: 30px; line-height: 1.4;}
.row-video .right p {margin-top: 24px; color: #b4b4b4; font-size: 16px; line-height: 1.8;}
.row-video .right span.time {margin-top: 32px; color: #ff4141; font-size: 18px;}
.row-video .right .btn {position: absolute; bottom: 32px; right: 32px; width: 192px; height: 48px; background: #3c3c3c; border-radius: 4px; color: #f0f0f0; font-family: 'mbcnew-medium'; font-size: 18px; text-align: center; line-height: 48px; cursor:pointer;}
/* row-timeline */
.row-timeline {width: 100%; max-height: 260px; background: #262626;}
.row-timeline .timeline-list {padding: 32px 96px 32px 80px;}
.row-timeline .timeline-list a {cursor:pointer;}
.row-timeline .timeline-list .txt {margin-bottom: 16px; color: #fff; font-size: 20px;}
.row-timeline .timeline-list .txt span.fc-p {color: #8f83ef;}
.row-timeline .timeline-list ul {border-top: 1px solid #4d4d4d; border-bottom: 1px solid #4d4d4d;}
.row-timeline .timeline-list ul li {padding: 0 16px; width: 100%; height: 48px;}
.row-timeline .timeline-list ul li.on {background: rgba(255, 255, 255, .1);}
.row-timeline .timeline-list ul li a {display: block; width: 100%; height: 48px; line-height: 48px; color:#fff;}
.row-timeline .timeline-list ul li:not(:last-of-type) {border-bottom: 1px solid #4d4d4d;}
.row-timeline .timeline-list ul li span.time {display: inline-block; margin-right: 32px; color: #b4b4b4;}
.row-timeline .timeline-list ul li span.tit {color: #fff;}
.row-timeline .timeline-list ul li:hover span.tit {text-decoration: underline;}
.row-timeline .timeline-list ul li a em {position: relative; display: inline-block; color: inherit;}
.row-timeline .timeline-list ul li a em::after {opacity: .4; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffff00;}
/* row-searchForm */
.row-searchForm {padding: 40px 80px; width: 100%; background: #262626;}
.row-searchForm .search-form .row {display: flex; align-items: center; width: 100%; height: 32px; color: #fff; font-size: 20px;}
.row-searchForm .search-form .row:not(:last-of-type) {margin-bottom: 20px;}
.row-searchForm .search-form .row .row-tit {display: inline-block; margin-right: 40px; width: 104px; color: #fff; font-size: 18px;}
.row-searchForm .search-form .chk-label, .row-searchForm .search-form input[type="text"] {color: #fff; font-size: 16px;}
.row-searchForm .search-form .chk-label {line-height: 22px;}
.row-searchForm .search-form .chk-label.chk-right {margin-left: auto;}
.row-searchForm .search-form .chk-label input[type="checkbox"] {appearance: none; -webkit-appearance: none; position: relative; top: 3px; margin-right: 8px; width: 16px; height: 16px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .3); background: #0d0d0d; font-size: 16px; cursor: pointer;}
.row-searchForm .search-form .chk-label input[type="checkbox"]:checked {border: 1px solid #d2d2d2; background: #d2d2d2 url(../images/ico_form_check.svg) no-repeat center; background-size: 12px 8px;}
.row-searchForm .search-form .custom-select {margin-right: 12px; width: 128px;}
.row-searchForm .search-form input[type="text"] {padding: 0px 12px; width: 480px; height: 32px; border: 1px solid rgba(255, 255, 255, .3); background: #0d0d0d; color: #fff; font-family: 'mbcnew-light'; font-size: 16px;}
.row-searchForm .search-form input[type="text"]:focus-visible {outline: none; border: 1px solid rgba(255, 255, 255, 1); transition: border-color .3s;}
.row-searchForm .search-form input[type="text"]:-webkit-autofill, .row-searchForm .search-form input[type="text"]:-webkit-autofill:hover, .row-searchForm .search-form input[type="text"]:-webkit-autofill:focus {font-family: 'mbcnew-light'; border: 1px solid rgba(255, 255, 255, .3); -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0px 1000px #0d0d0d inset; transition: background-color 9999s ease-in-out 0s;}
.row-searchForm .search-form input[type="text"].date {margin-right: 9px; width: 128px; color: #b4b4b4; text-align: center; letter-spacing: -.8px;}
.row-searchForm .search-form input[type="text"].date:-webkit-autofill, .row-searchForm .search-form input[type="text"].date:-webkit-autofill:hover, .row-searchForm .search-form input[type="text"].date:-webkit-autofill:focus {font-family: 'mbcnew-light'; border: 1px solid rgba(255, 255, 255, .3); -webkit-text-fill-color: #b4b4b4; -webkit-box-shadow: 0 0 0px 1000px #0d0d0d inset; transition: background-color 9999s ease-in-out 0s;}
.row-searchForm .search-form .ui-datepicker-trigger {width: 20px; height: 20px; vertical-align: middle; cursor: pointer;}
/* datepicker */
.ui-datepicker {margin-top: 6px; padding: 12px 8px 8px; width: 282px; background: #262626; border-radius: 8px; border: 1px solid #4d4d4d;}
.ui-widget.ui-widget-content {border: 1px solid #4d4d4d;}
.ui-datepicker .ui-datepicker-header {margin-bottom: 8px; padding: 0px; height: 30px; background: #262626; border-radius: 0; border: none;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top: 0; width: 30px; height: 30px; border: 1px solid #262626; cursor: pointer;}
.ui-datepicker .ui-datepicker-prev {left: 4px; background: url(../images/ico_calendar_left.svg);}
.ui-datepicker .ui-datepicker-next {right: 4px; background: url(../images/ico_calendar_right.svg);}
.ui-datepicker .ui-datepicker-title {display: flex; justify-content: center; align-items: center; height: 30px;}
.ui-datepicker .ui-datepicker-title select {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; height: 24px; color: #fff; font-family: 'mbcnew-medium'; font-size: 16px; cursor: pointer; outline: none; border: 1px solid  #262626; background: #262626 url(../images/ico_calendar_select.svg) no-repeat right 3px center / 9px auto;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {padding: 0 3px; width: 56px;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {margin-right: 13px; padding: 0 3px; width: 76px;}
.ui-datepicker .ui-datepicker-title select:focus option {background-color: rgb(13, 13, 13);}
.ui-datepicker .ui-datepicker-title select::-webkit-scrollbar {width: 6px;}
.ui-datepicker .ui-datepicker-title select::-webkit-scrollbar-track {background: #0D0D0D;}
.ui-datepicker .ui-datepicker-title select::-webkit-scrollbar-thumb {background: #787878; border-radius: 3px;}
.ui-datepicker .ui-datepicker-title select option {color: #fff; cursor: pointer;}
.ui-datepicker .ui-datepicker-calendar {margin: 0; padding: 0 8px;}
.ui-datepicker th, .ui-datepicker td {width: 38px; height: 38px; padding: 4px;}
.ui-datepicker th span, .ui-datepicker td span, .ui-datepicker td a {display: inline-block; padding: 0; width: 100%; height: 100%; text-align: center; line-height: 30px;}
.ui-datepicker td span, .ui-datepicker td a {border-radius: 4px;}
.ui-datepicker th span {color: #ebebeb; text-align: center; line-height: 30px;}
.ui-state-default, .ui-widget-content .ui-state-default {color: #ebebeb; background: #262626; border: none;}
.ui-state-disabled, .ui-widget-content .ui-state-disabled {opacity: 1;}
.ui-widget-header .ui-state-disabled {opacity: .3;}
.ui-state-disabled .ui-state-default {color: #787878;}
.ui-state-default:hover {background: #3c3c3c;}
.ui-widget-header .ui-icon {background: none;}
.ui-state-default.ui-state-active {background: #6706D3; color: #fff;}
.ui-state-default.ui-state-highlight {background: #ebebeb; color: #000;}
.row-searchForm .search-btn {margin-left: 16px; width: 96px; height: 32px; background: #ebebeb; font-family: 'mbcnew-medium'; font-size: 16px;}
/* row-select */
.row-select {margin-top: 16px; background: #262626;}
.row-select .select-bx {padding: 40px 80px; display: flex; justify-content: center; width: 100%;}
.row-select .select-bx li {position: relative; display: flex; justify-content: center; align-items: center;}
.row-select .select-bx>li:not(:last-of-type) {margin-right: 81px;}
.row-select .select-bx>li:not(:last-of-type)::after {content: ''; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); display: block; width: 1px; height: 24px; background: rgba(255, 255, 255, .15);}
.row-select .select-bx li span {display: inline-block; margin-right: 16px; color: #fff; font-size: 18px;}
.row-select .select-bx li .custom-select {width: 400px;}
.row-select.content-select {margin-bottom: 20px;}
.row-select.content-select .select-bx li .custom-select {width: 360px;}
.row-select.content-select .select-bx li .custom-select.local-select {width: 224px;}
/* row-detail */
.row-detail {position: relative; display: flex; width: 100%;}
.row-detail .left, .row-detail .right {position: relative; height: 784px; background: #262626;}
.row-detail .left {overflow: hidden; width: 830px;}
.row-detail .left .video-wrap {width: 100%; height: 467px;}
.row-detail .left .txt-wrap {padding: 24px; height: 317px;}
.row-detail .left .txt-wrap h5 {margin-bottom: 32px; color: #fff; font-size: 32px; line-height: 1.1;}
.row-detail .left .time-control {margin: 0 auto; width: 670px;}
.row-detail .left .total {display: flex; justify-content: flex-end; align-items: center; margin-bottom: 30px; color: #fff; text-align: right; font-size: 18px;}
.row-detail .left .total::before {content: ''; display: inline-block; margin-right: 8px; width: 18px; height: 18px; background: url(../images/ico_clock.svg);}
.row-detail .left .total .fc-r {color: #ff4141;}
.row-detail .left .time-range {display: flex; align-items: center;}
.row-detail .left .time-range .range {width: 430px; margin-right: 80px;}
.row-detail .left .time-range .range .row {display: flex; align-items: center;}
.row-detail .left .time-range .range .row:first-of-type {margin-bottom: 16px;}
.row-detail .left .time-range .range .row .row-tit {display: inline-block; margin-right: 16px; color: #fff; font-size: 16px;}
.row-detail .left .time-range .range .row .colons {display: inline-block; margin: 0 8px; width: 2px; height: 8px; background: url(../images/ico_colons.svg); font-size: 1px; text-indent: -9999px;}
.row-detail .left .time-range .range .row .select-btn {margin-left: 12px; width: 96px; height: 32px; background: #3c3c3c; line-height: 32px; color: rgb(240,240,240); font-size: 16px;}
.row-detail .left .time-range .range input[type="text"] {width: 80px; height: 32px; border: 1px solid rgba(255, 255, 255, .3); background: #0d0d0d; color: #b4b4b4; text-align: center; font-family: 'mbcnew-light'; font-size: 16px; letter-spacing: -.8px;}
.row-detail .left .time-range .range input[type="text"]:focus-visible {outline: none; border: 1px solid rgba(255, 255, 255, 1); transition: border-color .3s;}
.row-detail .left .time-range .btns {display: flex; flex-direction: column; width: 160px;}
.row-detail .left .time-range .btns button {width: 160px; height: 40px; border-radius: 4px; background: #ebebeb; line-height: 40px; color: #000; font-size: 18px; font-family: 'mbcnew-medium';}
.row-detail .left .time-range .btns button:first-of-type {margin-bottom: 16px;}
.row-detail .right {position: relative; margin-left: auto; width: 586px;}
.row-detail .right .detail-tab {display: flex; align-items: center; border-bottom: 1px solid #4d4d4d;}
.row-detail .right .detail-tab li {width: calc(100% / 3); height: 50px;}
.row-detail .right .detail-tab li a {display: block; text-align: center; line-height: 50px; color: #787878; font-family: 'mbcnew-medium'; font-size: 16px; cursor:pointer;}
.row-detail .right .detail-tab li:hover a {color: #ebebeb;}
.row-detail .right .detail-tab li.on {border-bottom: 2px solid #fff;}
.row-detail .right .detail-tab li.on a {color: #fff;}
.row-detail .right .custom-scroll {height: 734px;}
.row-detail .right .detail-wrap>div{display: none;}
.row-detail .right .detail-wrap>div.on{display: block;}
.row-detail .right .seg-wrap {padding: 16px;}
.row-detail .right .seg-wrap h5 {position: relative; margin-bottom: 10px; padding-left: 19px;}
.row-detail .right .seg-wrap h5 button {color: #b4b4b4; font-size: 14px; line-height: 15px; text-align: left;}
.row-detail .right .seg-wrap h5 button:hover {text-decoration: underline;}
.row-detail .right .seg-wrap h5 button span.highlight {position: relative; display: inline-block; color: inherit;}
.row-detail .right .seg-wrap h5 button span.highlight::after {opacity: .4; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffff00;}
.row-detail .right .seg-wrap h5::before {content: ''; position: absolute; left: 0; top: 50%; z-index: 2; transform: translateY(-50%); width: 13px; height: 13px; background: url(../images/ico_seg_t.svg);}
.row-detail .right .seg-wrap ul {position: relative;}
.row-detail .right .seg-wrap ul::before {content: ''; position: absolute; left: 6px; top: -17px; width: 1px; height: calc(100% + 6px); background: url(../images/ico_seg_bar.svg);}
.row-detail .right .seg-wrap ul li {position: relative;}
.row-detail .right .seg-wrap ul li.depth1 {padding-left: 39px;}
.row-detail .right .seg-wrap ul li.depth2 {padding-left: 57px;}
.row-detail .right .seg-wrap ul li.depth1::before {content: ''; position: absolute; left: 6px; top: 5px; z-index: 2; width: 25px; height: 13px; background: url(../images/ico_seg_g.svg);}
.row-detail .right .seg-wrap ul li.depth1.line::after {content: ''; position: absolute; left: 24px; top: 17px; width: 1px; height: calc(100% - 17px); background: url(../images/ico_seg_bar.svg);}
.row-detail .right .seg-wrap ul li.depth2::before {content: ''; position: absolute; left: 25px; top: 5px; z-index: 2; width: 25px; height: 13px; background: url(../images/ico_seg_g.svg);}
.row-detail .right .seg-wrap ul li.depth2::after {content: ''; position: absolute; left: 24px; top: 0px; width: 1px; height: 100%; background: url(../images/ico_seg_bar.svg);}
.row-detail .right .seg-wrap ul li.depth2.e-line::after {content: ''; position: absolute; left: 24px; top: 0px; width: 1px; height: 12px; background: url(../images/ico_seg_bar.svg);}
.row-detail .right .seg-wrap ul li button {color: #b4b4b4; font-size: 14px; line-height: 23px; text-align: left; cursor: pointer;}
.row-detail .right .seg-wrap ul li button:hover {text-decoration: underline;}
.row-detail .right .seg-wrap ul li button span.highlight {position: relative; display: inline-block; color: inherit;}
.row-detail .right .seg-wrap ul li button span.highlight::after {opacity: .4; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffff00;}
.row-detail .right .table-wrap {padding: 16px;}
.row-detail .right .table-wrap table {width: 100%;}
.row-detail .right .table-wrap table tr {height: 40px; border-top: 1px solid #4d4d4d;}
.row-detail .right .table-wrap table tr:last-of-type {border-bottom: 1px solid #4d4d4d;}
.row-detail .right .table-wrap table tr th, .row-detail .right .table-wrap table tr td {padding: 12px 20px; vertical-align: middle; font-size: 14px; line-height: 1.5;}
.row-detail .right .table-wrap table tr th {color: #fff;}
.row-detail .right .table-wrap table tr td {color: #b4b4b4;}
.row-detail .right .table-wrap table tr th {background: rgba(255, 255, 255, .05); text-align: center;}
.row-detail .right .preview-wrap ul {display: flex; flex-wrap: wrap; padding: 16px;}
.row-detail .right .preview-wrap ul li {width: calc(25% - 7.5px);}
.row-detail .right .preview-wrap ul li:not(:nth-of-type(4n)) {margin-right: 10px;}
.row-detail .right .preview-wrap ul li {margin-bottom: 16px;}
.row-detail .right .preview-wrap ul li .img {overflow: hidden; margin-bottom: 8px; width: 100%; height: 71px;}
.row-detail .right .preview-wrap ul li .img img {width: 100%; height: 100%; object-fit: cover; transition: .5s;}
.row-detail .right .preview-wrap ul li .time {display: inline-block; width: 100%; color: #fff; text-align: center;}
.row-detail .right .preview-wrap ul li a {display: block;cursor:pointer;}
.row-detail .right .preview-wrap ul li:hover .img img {transform: scale(1.1);}
.row-detail .right .preview-wrap ul li:hover .time {text-decoration: underline;}
/* row-order */
.row-order {display: flex; height: 452px; padding: 40px 80px; background: #262626;}
.row-order .left {position: relative; padding-top: 15px; width: 660px; margin-right: 128px;}
.row-order .left::after {content: ''; position: absolute; top: 50%; right: -48px; transform: translateY(-50%); width: 1px; height: 372px; background:rgba(255, 255, 255, .1);}
.row-order .left .line {position: relative; display: flex; align-items: center; width: 516px;}
.row-order .left .line:nth-of-type(1) {height: 32px; margin-bottom: 30px;}
.row-order .left .line:nth-of-type(2) {height: 36px; margin-bottom: 32px;}
.row-order .left .line:nth-of-type(3) {margin-bottom: 40px;}
.row-order .left .line:nth-of-type(4) {margin-bottom: 40px;}
.row-order .left .line:nth-of-type(5) {margin-bottom: 38px;}
.row-order .left .tit {color: #fff; font-size: 20px;}
.row-order .left .tit .fc-g {color: #b4b4b4; font-size: 16px;}
.row-order .left .field-txt {display: none; margin-left: 24px; color: #787878; font-size: 18px;}
.row-order .left .line.line-period .txt {line-height: 32px;}
.row-order .left .line .price {display: flex; align-items: center; margin-left: auto; color: #fff; font-size: 20px;}
.row-order .left .line .price .fc-r {margin-right: 3px; color: #ff4141; font-size: 24px; font-family: 'mbcnew-medium'; line-height: 26px;}
.row-order .left .select-bx {display: flex; margin-left: 24px;}
.row-order .left .line:not(.default) .select-bx {display: none;}
.row-order .left .select-bx .custom-select:not(:first-of-type) {margin-left: 16px;}
.row-order .left .custom-select {color: #b4b4b4;}
.row-order .left .custom-select:disabled {opacity: .4; cursor: default;}
.row-order .left .custom-select.h-32 {width: 200px;}
.row-order .left .custom-select.global-select {position: absolute; top: 50%; right: -144px; transform: translateY(-50%); width: 128px;}
.row-order .left .radio-bx {position: relative; display: none; margin-left: auto; width: 249px;}
.row-order .left .radio-bx input[type="radio"] {-webkit-appearance: none; appearance: none; margin-right: 8px; width: 16px; height: 16px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .3); background: #0d0d0d; color: #fff; font-size: 18px; vertical-align: middle; cursor: pointer;}
.row-order .left .radio-bx input[type="radio"]:checked {border: 5px solid #d2d2d2;}
.row-order .left .radio-bx .radio-label {display: flex; align-items: center; color: #fff; font-size: 18px;}
.row-order .left .radio-bx .radio-label:nth-of-type(2) {margin-left: auto;}
.row-order .left .line.show-txt .field-txt {display: block;}
.row-order .left .line.show-txt .select-bx, .row-order .left .line.show-txt .radio-bx {display: none;}
.row-order .left .line.show-field .field-txt {display: none;}
.row-order .left .line.show-field .select-bx, .row-order .left .line.show-field .radio-bx {display: flex;}
.row-order .right {width: 492px;}
.row-order .right .btns {display: flex; justify-content: center; margin: 72px auto 40px;}
.row-order .right .btns button {display: inline-block; width: 224px; height: 56px; color: #fff; font-family: 'mbcnew-medium'; font-size: 20px; text-align: center; line-height: 56px; border-radius: 6px; background: #6706d3; transition: all .3s;}
.row-order .right .btns button:first-of-type {margin-right: 24px;}
.row-order .right .btns button:disabled {background: #3c3c3c; color: #787878; cursor: default;}
.row-order .right ul li {position: relative; padding-left: 11px; color: #b4b4b4; font-size: 14px; line-height: 1.5;}
.row-order .right ul li a {color: #b4b4b4; font-size: 14px; line-height: 1.5;}
.row-order .right ul li::before {content: '*'; position: absolute; top: 1px; left: 0px;}
.row-order .right ul li:not(:last-of-type) {margin-bottom: 10px;}
.row-order .right ul li:first-of-type {text-decoration: underline;}
/*************** list-wrap ***************/
/* search-result */
.list-wrap .search-result {padding-top: 20px; margin-bottom: 24px; color: #fff; font-size: 18px;}
.list-wrap .search-result .fc-p {color: #8f83ff;}
/* list-tab */
.list-tab {margin-bottom: 40px; width: 100%; font-size: 0;}
.list-tab ul li {display: inline-block; margin: 0; width: 180px; height: 50px; border-bottom: 1px solid #4d4d4d;}
.list-tab ul li a {display: block; width: 100%; height: 100%; text-align: center; line-height: 50px; color: #787878; font-family: 'mbcnew-medium'; font-size: 16px; cursor:pointer;}
.list-tab ul li:hover a {color: #ebebeb;}
.list-tab ul li.on {border-bottom: 2px solid #fff;}
.list-tab ul li.on a {color: #fff;}
.list-tab ul li:last-of-type {background: #262626;}
/* list-top */
.list-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;}
.list-top h3 {color: #fff; font-family: 'mbcnew-medium'; font-size: 20px;}
.list-top .action {display: flex; margin-left: auto;}
.list-top .custom-select {margin-right: 12px;}
.list-top .custom-select:last-of-type {margin-right: 24px;}
.list-top .sort li {display: inline-block; width: 22px; height: 22px;}
.list-top .sort li:not(:last-of-type) {margin-right: 14px;}
.list-top .sort li button {opacity: .3; display: block; width: 100%; height: 100%; font-size: 1px; text-indent: -9999px;}
.list-top .sort li button.ico-album {background: url(../images/ico_sort_v2.svg) no-repeat center/cover;}
.list-top .sort li button.ico-list {background: url(../images/ico_sort_v1.svg) no-repeat center/cover;}
.list-top .sort li button.on {opacity: 1;}
.list-top .breadcrumb, .list-top .breadcrumb a, .list-top .breadcrumb span {color: #fff; font-family: 'mbcnew-medium'; font-size: 20px;}
/* type-album */
.type-album {display: flex; flex-wrap: wrap; width: 100%;}
.type-album li {overflow: hidden; position: relative; margin-bottom: 60px; width: calc(25% - 18px);}
.type-album li:not(:nth-of-type(4n)) {margin-right: 24px;}
.type-album li:nth-last-of-type(1), .type-album li:nth-last-of-type(2), .type-album li:nth-last-of-type(3), .type-album li:nth-last-of-type(4) {margin-bottom: 0;}
.type-album li a {display: block; width: 100%; height: 100%; cursor:pointer;}
.type-album li span.num {display: inline-block; margin-bottom: 7px; color: #b4b4b4; font-size: 14px;}
.type-album li .tag-wrap {margin: 3px 0 10px; min-height: 22px; font-size: 0;}
.type-album li .tag-wrap span {display: inline-block; padding: 5px 10px; border-radius: 4px; background: #3c3c3c; color: #f0f0f0; font-family: 'mbcnew-medium'; font-size: 12px;}
.type-album li .tag-wrap span:not(:last-of-type) {margin-right: 8px;}
.type-album li .img-wrap {overflow: hidden; position: relative; width: 100%; height: 192px; border-radius: 6px; transition: .2s;}
.type-album li .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: .5s;}
.type-album li:hover .img-wrap img, .type-album li a:focus .img-wrap img {transform: scale(1.1);}
.type-album li .img-wrap::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 48px; height: 48px; background: url(../images/ico_play.svg) no-repeat center / cover;}
.type-album li.on .img-wrap::before {content: ''; position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 6px; border: 4px solid #6706d3;}
.type-album li .img-wrap .cate {position: absolute; top: 8px; left: 8px; display: flex;}
.type-album li .img-wrap .cate span {display: inline-block; padding: 5px 10px; border-radius: 4px; color: #fff; font-family: 'mbcnew-medium'; font-size: 12px; letter-spacing: -.6px;}
.type-album li .img-wrap .cate span.fc-p {background: #6706d3;}
.type-album li .img-wrap .cate span.fc-p2 {background: #4664e6;}
.type-album li .img-wrap .cate span.fc-g {background: #d2d2d2; color: #000;}
.type-album li .img-wrap .cate span:not(:last-of-type) {margin-right: 8px;}
.type-album li .img-wrap .time {position: absolute; bottom: 8px; right: 8px; padding: 5px 10px; background: rgba(0, 0, 0, .7); border-radius: 4px; color: rgba(255, 255, 255, .7); font-family: 'mbcnew-medium'; font-size: 12px; letter-spacing: -.6px;}
.type-album li .img-wrap .match-time {position: absolute; top: 8px; right: 8px; padding: 5px 10px; background: rgba(0, 0, 0, .7); border-radius: 4px; color: rgba(255, 255, 255, .7); font-family: 'mbcnew-medium'; font-size: 12px; letter-spacing: -.6px;}
.type-album li .txt-wrap {margin-top: 20px;}
.type-album li .txt-wrap .tit {color: #fff; font-size: 20px; line-height: 1.4; letter-spacing: -.8px;}
.type-album li:hover .txt-wrap .tit, .type-album li a:focus .txt-wrap .tit {text-decoration: underline; text-underline-offset: 2px;}
.type-album li .txt-wrap .txt {margin-top: 8px; color: #b4b4b4; font-size: 16px; line-height: 1.4; letter-spacing: -.8px;}
.type-album li .txt-wrap .date {display: inline-block; margin-top: 8px; color: #b4b4b4; font-size: 16px; line-height: 1.4; letter-spacing: -.8px;}
.type-album li .txt-wrap .local {margin-top: 8px; color: #b4b4b4; font-size: 16px; line-height: 1.4; letter-spacing: -.8px;}
.type-album li .txt-wrap span.fw-b {font-family: 'mbcnew-medium'; color: #fff;}
.type-album li .txt-wrap span.highlight {position: relative; display: inline-block; color: inherit;}
.type-album li .txt-wrap span.highlight::after {opacity: .4; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffff00;}
.type-album.program-album li {width: calc(20% - 32px);}
.type-album.program-album li:not(:nth-of-type(5n)) {margin-right: 40px;}
.type-album.program-album li:nth-of-type(5n) {margin-right: 0;}
.type-album.program-album li:nth-last-of-type(1), .type-album.program-album li:nth-last-of-type(2), .type-album.program-album li:nth-last-of-type(3), .type-album.program-album li:nth-last-of-type(4), .type-album.program-album li:nth-last-of-type(5) {margin-bottom: 0;}
.type-album.program-album li .img-wrap {height: 361px; border-radius: 8px;}
.type-album.program-album li .img-wrap::after {display: none;}
/* type-table */
.type-table table {width: 100%;}
.type-table table thead th {position: relative; padding: 13px 0; border-bottom: 1px solid #4d4d4d; background: #262626; color: #fff; font-size: 14px;}
.type-table table thead th:not(:last-of-type)::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 16px; background: rgba(255, 255, 255, .15);}
.type-table table td {padding: 17px 16px; border-bottom: 1px solid #4d4d4d; color: #b4b4b4; font-size: 14px; text-align: center; line-height: 1.5; vertical-align: middle;}
.type-table table td.fc-w {color: #fff;}
.type-table table td .local-txt {max-width: 150px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; word-wrap: break-word; -webkit-line-clamp: 2; color: #fff; line-height: 1.5; word-break: keep-all;}
.type-table table td .img {overflow: hidden; margin: 0 auto; width: 156px; height: 88px; border-radius: 4px; cursor: pointer;}
.type-table table td .img a {display: block; width: 100%; height: 100%;}
.type-table table td .img img {width: 100%; height: 100%; transition: .5s;}
.type-table table tr:not(:has(.more-btn:hover)):hover td .img img {transform: scale(1.1);}
.type-table table td.align-left {text-align: left;}
.type-table table td span.tit {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; word-wrap: break-word; -webkit-line-clamp: 2; margin-bottom: 8px; color: #fff; font-family: 'mbcnew-medium'; font-size: 16px; line-height: 1.2;}
.type-table table tr:not(:has(.more-btn:hover)):hover span.tit {text-decoration: underline;}
.type-table table tr.on:not(.sub-tr) {background: rgba(103, 6, 211, .1);}
.type-table table td a {cursor:pointer;}
.type-table table td p.sub {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; word-wrap: break-word; -webkit-line-clamp: 2; color: #b4b4b4; font-size: 14px; line-height: 1.5;}
.type-table table td .program-sub {overflow: hidden;}
.type-table table td .program-sub p {max-width: 568px; width: 100%; color: #b4b4b4; line-height: 1.5;}
.type-table table td span.ico {display: block; margin: 0 auto; width: 16px; height: 16px;}
.type-table table td span.ico img {width: 100%; height: 100%;}
.type-table table td .tag-wrap {margin: 3px 0 10px; font-size: 0;}
.type-table table td .tag-wrap span {display: inline-block; padding: 5px 10px; border-radius: 4px; background: #3c3c3c; color: #f0f0f0; font-family: 'mbcnew-medium'; font-size: 12px;}
.type-table table td .tag-wrap span:not(:last-of-type) {margin-right: 8px;}
.type-table table td span.fw-b {font-family: 'mbcnew-medium'; color: #fff;}
.type-table table td span.highlight {position: relative; display: inline-block; color: inherit;}
.type-table table td span.highlight::after {opacity: .4; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffff00;}
.type-table table tr.sub-tr td {padding: 0; border-bottom: none; transition: border-width 0.3s ease .2s;}
.type-table table tr.sub-tr.on td {border-bottom: 1px solid #4d4d4d;}
.type-table table tr.sub-tr td .timeline {max-height: 0px; background: rgba(255, 255, 255, .05); transition: max-height .5s;}
.type-table table tr.sub-tr.on td .timeline {max-height: 254px;}
.type-table table tr.sub-tr.short td .timeline {overflow: hidden;}
.type-table table tr.sub-tr td .timeline .cont {padding: 16px 0; margin-left: 496px; width: 41.67%; text-align: left; color: #b4b4b4; line-height: 1.6;}
.type-table table td .more-btn {position: relative; box-sizing: border-box; display: flex; align-items: center; margin-top: 12px; margin-bottom: -17px; padding-bottom: 17px; line-height: 15px; height: 32px; color: #fff;}
.type-table table td .more-btn::after {content: ''; display: inline-block; margin-left: 5px; width: 12px; height: 7px; background: url(../images/ico_arrow_bottom.svg) no-repeat center/cover;}
.type-table table td .more-btn::before {content: ''; position: absolute; left: 0; bottom: 17px; display: none; width: 100%; height: 1px; background: #fff;}
.type-table table td .more-btn.on::after {transform: rotate(180deg);}
.type-table table td .more-btn:hover::before {display: block;}
/* pagination */
.pagination {display: flex; justify-content: center; margin-top: 60px;}
.pagination li {position: relative; display: inline-block; min-width: 40px; height: 40px; background: #1a1a1a;}
.pagination li.on {background: #ebebeb;}
.pagination li a {display: block; padding: 0 14px; width: 100%; height: 100%; color: #b4b4b4; text-align: center; line-height: 40px;}
.pagination li.on a {color: #1a1a1a;}
.pagination li.btn {display: flex; justify-content: center; align-items: center; font-size: 1px; text-indent: -9999px;}
.pagination li.prev {margin-right: 15px;}
.pagination li.next {margin-left: 15px;}
.pagination li.off {cursor: default;}
.pagination li:not(.off) {cursor:pointer;}
.pagination li.off img {opacity: .3;}
.pagination li.btn img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* list-btn */
.list-btn {margin-top: 60px; text-align: center;}
.list-btn .more-btn {display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 160px; height: 40px; background: #3c3c3c; border-radius: 100px; color: #f0f0f0;}
.list-btn .more-btn::after {content: ''; display: inline-block; margin-left: 7px; width: 12px; height: 7px; background: url(../images/ico_arrow_bottom.svg);}
/* loading */
.list-wrap .loading {padding: 40px 0 100px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.list-wrap .loading h5 {margin-top: 32px; color: #fff; font-size: 24px;}
.list-wrap .loading .txt {margin-top: 16px; color: #b4b4b4; font-size: 16px; text-align: center; line-height: 1.5;}
.list-wrap .loading .txt.type2 {margin-top: 32px; color: #8f83ef;}
.list-wrap .loading .spinner {width: 90px; height: 90px;}
.list-wrap .loading .spinner.spinner-0d {background: url(../images/img_spinner_0d.gif) no-repeat center/cover;}
.list-wrap .loading .spinner.spinner-1a {background: url(../images/img_spinner_1a.gif) no-repeat center/cover;}
.list-wrap .loading.loading-full {padding: 120px 0 200px;}
/* empty */
.list-wrap .empty {padding: 236px 0 100px; display: flex; justify-content: center; align-items: center;}
.list-wrap .empty h5 {position: relative; color: #fff; font-size: 24px;}
.list-wrap .empty h5::before {content: ''; position: absolute; top: -264px; left: 50%; transform: translateX(-50%); width: 360px; height: 240px; background: url(../images/img_search_empty.png);}
.list-wrap .empty.empty-full {padding: 304px 0 200px;}
.list-wrap .empty.empty-full2 {padding: 264px 0 200px;}