/* 
說明:

- banner 統一會有 .content-bn-lecture
    再依據不同的頁面加上 .event-brand 或 .event-design ...
    例如: 講座資訊頁就是 .content-bn-lecture.event-it 

- section-lecture 依據不同的頁面加上 .event-brand 或 .event-design ...
    例如: landing 頁就是 .section-lecture.landing

- card-lecture 依據不同的卡片加上 .event-brand 或 .replay-design ...
    例如: 設計知識庫頁就是 .card-lecture.replay-design

- 燈箱按鈕是 .lecture-modal-btn，連結網頁是用 <a class="link">

*/
/* 
備註: 
- 這邊放所有講座系列頁共用的 css
- 還有放 landing page, replay pages 的 css
- landing page 內的 card 只有.card-lecture，沒有直接指定，像是 .card-lecture.replay-design，要用外層的 .section-lecture.landing 來指定

*/

/************************************** 
    所有講座系列頁共用 all lecture pages - start
***************************************/
.card:has(>a:active), .card:has(>a:hover), .card:has(>a:focus), .card:has(>a:target) {
    -webkit-box-shadow: 0 0 2px #888888;
            box-shadow: 0 0 2px #888888;
}
button:focus, button:hover, .btn:focus, .btn:hover {
    /* border-width: 0px; */
}
.btn-more {
    min-width: 220px;
}

.btn-brand {
    background: var(--course-color-brand) !important;
    color: #ffffff !important;
    border-width: 0px !important;
}

section:has(.nav-breadcrumb) {
    padding-top: 0;
}

/* Banner */
.content-bn-lecture {
    position: relative;
    margin-top: 0px;
    padding: 0;
}
.content-bn-lecture .container-content {
    position: relative;
    z-index: 1;
}
.content-bn-lecture .container-content .content-bn-textgroup {}
.content-bn-lecture .badge-title.lecture {}
.content-bn-lecture .content-bn-title {
    text-align: left;
}
.kv-mark {
    position: absolute;
    top: -1px;
    left: 7%;
    z-index: 1;
    width: 19%;
    max-width: 106px;
}
.kv-mark img {
    width: 100%;
}

@media screen and (min-width: 767px) {
    .kv-mark {
        left: 10.5%;
        width: 12%;
    }
}
@media screen and (min-width: 992px) {
    .kv-mark {
        width: 9%;
    }
}
@media screen and (min-width: 1200px) {
    .kv-mark {
        left: 12%;
        width: 8%;
    }
}





/* Section */
.section-lecture {
    background-color: var(--bg-content-light);
    padding-bottom: 10px;
}
.section-lecture .nav-breadcrumb {
    margin-top: 0px;
}
.section-lecture .container-lecture {}
.lecture-title {
    text-align: center;
    font-size: var(--fzSecTitle);
    margin: 2% 0 4%;
}

/* card group & title */
.card-lecture-group {
    gap: 20px 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
            /* background-color: #ffffff; */
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
}
.card-lecture {
    height: unset;
    max-width: 500px;
    margin: auto;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.card-lecture .lecture-modal-btn {
    text-align: left;
    padding: 0;
    border-width: 0px;
    border-radius: 10px;
    height: 100%;    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-lecture:has(.lecture-modal-btn):hover,
.card-lecture:has(.lecture-modal-btn):focus {
    /* box-shadow: 0px 0px 8px #aaa; */
    -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.card-lecture .link {}
.card-lecture figure {
    position: relative;
    /* min-height: 100%; */
    background-color: #333333;
}
.card-lecture figure .icon-play {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: #00000025;
}
.card-lecture figure:hover .icon-play, .card-lecture figure:focus .icon-play {    
    background-color: transparent;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.card-lecture figure .icon-play svg {
    fill: #ffffff;
    width: 100px;
    height: 100px;
    margin: auto;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    will-change: transform;
    -webkit-filter: drop-shadow(0px 0px 3px #00000055);
            filter: drop-shadow(0px 0px 3px #00000055);
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.card-lecture figure:hover .icon-play svg, .card-lecture figure:focus .icon-play svg {    
    will-change: transform;
    /* fill: var(--jgun-red); */
    -webkit-filter: drop-shadow(0 0 3px #00000077);
            filter: drop-shadow(0 0 3px #00000077);
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
}

.card-lecture .img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}


.card-lecture .card-body {
    text-align: left;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-lecture .tag {
    margin: 2px 2px 2px 0;
}

/* 觀看數 */
.card-lecture .view {
    color: var(--light-bk);
    font-size: var(--fzXs);
    font-family: system-ui;
    font-weight: bolder;
    margin: 5px 0 0 auto;
}
.card-lecture .view i {}
.card-lecture .view .num {}

.card-lecture .tag.tag-brand {
    background: var(--course-color-brand);
}

.card-lecture .card-body-head {
    font-size: var(--fz4);
    margin: 8px 0 20px;
    height: 52px; /* font-size 20px* line-heifht 1.4 = 52px */
}
.card-lecture .card-body-text {}
.card-lecture time {
    font-family: system-ui, serif;
    font-size: var(--fzXs);
    letter-spacing: 0.5px;
}
.card-lecture .card-body-footer {}


/* filter */
.filter-control {
    padding: 10px 8px 20px;
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.filter-control .btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    margin-left: auto;
    width: 100%;
}
.filter-control .btn {    
    border-width: 0px;
    padding: 15px 20px;
    line-height: 1;
    background-color: #ffffff;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.filter-control .btn:hover, .filter-control .btn:focus {
    color: var(--link-hover);
}
.filter-control .btn.active {
    /* border-width: 0px; */
    color: var(--jgun-red);
    border-bottom: 2px solid var(--jgun-red);
}
.filter-control .btn.active, .filter-control .btn.active:hover, .filter-control .btn.active:focus {
    cursor: default;
}

/* filter tabs */

.list-sub-tabs {
    padding: 15px 0 0;
}
.list-sub-tabs .tab {
    background-color: #ffffff;
    border: 1px solid #DEE2E6;
    padding: 3px 8px;
    margin: 0px 2px 8px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    word-break: keep-all;
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.list-sub-tabs .tab:hover,
.list-sub-tabs .tab:focus,
.list-sub-tabs .tab:active {
    border-color: #818181;
}
.list-sub-tabs .tab.active {
    background-color: #E4E4E4;
    border-color: #818181;
    cursor: auto;
}



/* 控制 lightbox 的按鈕 */
.lecture-modal-btn {}

/* lightbox */
.lecture-modal {}
.lecture-modal .modal-content {}
.lecture-modal .btn-close {
    background-color: transparent;
    display: block;
    margin-left: auto;
    width: 40px;
    height: 40px;
    /* border-radius: 100px;
    margin-top: -10px;
    margin-right: -10px;
    opacity: 1;
    box-shadow: 0 0 3px #6b6b6b; */
}
.lecture-modal .modal-content .modal-body {}
.lecture-modal .modal-body .modal-video {}
.lecture-modal .modal-body .modal-video iframe {}
.lecture-modal .modal-body .modal-text {}
.lecture-modal .card-body-head {
    height: unset;
    font-size: var(--fz4);
}
.lecture-modal .card-body-text {
    font-size: var(--fzSm);
}
.lecture-modal .modal-footer {}



/* Event page */
.main-event {
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: 0% 0%, 0% 0%;
    background-color: #ffffff;
    background-attachment: fixed, fixed;
    overflow-y: hidden;
}


.page-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* Event page 用的報名表 */
.regist-form {
    padding: 30px 20px 20px;
    margin: 20px auto;
    border-radius: 10px;
    max-width: 500px;    
    background-color: #ffffff;
    color: var(--text-bk);
}
.regist-form .head {
    font-size: var(--fz2);
    text-align: center;
}
.regist-form .form-group {
    margin: 0;
}
.regist-form .form-input {
    margin-bottom: 0.3rem;
}
.regist-form .form-note {
    font-size: var(--fzSm);
    /* margin-top: 0.5rem;
    margin-bottom: 1rem; */
    line-height: 1.6;
}
.regist-form .form-check {
    text-align: center;
}
.regist-form .read-link {
    color: #333333;
}
.regist-form .submit-btn {}
.regist-form .submit-btn:hover {} 

@media screen and (min-width: 992px) {
    /* Banner */
    .content-bn-lecture {
        padding: 0;
    }
    .content-bn-lecture .container-content {}
    .content-bn-lecture .container-content .content-bn-textgroup {}
    .content-bn-lecture .badge-title.lecture {}
    .content-bn-lecture .content-bn-title {}

    /* Section */
    .section-lecture {}
    .section-lecture .nav-breadcrumb {}
    .section-lecture .container-lecture {}
    .lecture-title {}

    /* card group & title */
    .card-lecture-group {
        -webkit-box-pack: flex-start;
        -ms-flex-pack: flex-start;
            justify-content: flex-start;
    }
    .card-lecture {}
    .card-lecture .lecture-modal-btn {
        /* display: block; */
    }
    .card-lecture figure {
        margin: 0;
    }
    .card-lecture figure .icon-play {}
    .card-lecture figure .icon-play svg {}
    .card-lecture figure:hover .icon-play svg, .card-lecture figure:focus .icon-play svg {}

    .card-lecture .img {}


    .card-lecture .card-body {
        padding: 15px;
    }
    .card-lecture .tag {}

    /* 觀看數 */
    .card-lecture .view {}
    .card-lecture .view i {}
    .card-lecture .view .num {}

    .card-lecture .tag.tag-brand {}

    .card-lecture .card-body-head {
        margin: 2% 0;
    }
    .card-lecture .card-body-text {}
    .card-lecture .card-body-text time {}
    .card-lecture .card-body-footer {
        padding-top: 10px;
    }

    /* filter */
    .filter-control {
        padding: 10px 15px 20px;
    }
    .filter-control .btn-group {
        /* display: inline-block; */
        margin-left: auto;
        width: auto;
    }
    .filter-control .btn { }
    .filter-control .btn:hover, .filter-control .btn:focus {}
    .filter-control .btn.active {}
    .filter-control .btn.active, .filter-control .btn.active:hover, .filter-control .btn.active:focus {}

    /* 控制 lightbox 的按鈕 */
    .lecture-modal-btn {}

    /* lightbox */
    .lecture-modal {}
    .lecture-modal .modal-content {}
    .lecture-modal .btn-close {}
    .lecture-modal .modal-content .modal-body {}
    .lecture-modal .modal-body .modal-video {}
    .lecture-modal .modal-body .modal-video iframe {}
    .lecture-modal .modal-body .modal-text {}
    .lecture-modal .card-body-head {}
    .lecture-modal .card-body-text {
        font-size: 1rem;
    }
    .lecture-modal .modal-footer {}

    /* Event page */
    .main-event {
        background-position: 0% 0%, 100% 100%;
    }

    /* Event page 用的報名表 */
    .regist-form {
        margin: 20px;
    }
    .regist-form .head {
        font-size: var(--fztSecContenTitle);
    }
    .regist-form .form-group {}
    .regist-form .form-input {}
    .regist-form .form-note {}
    .regist-form .form-check {}
    .regist-form .read-link {}
    .regist-form .submit-btn {}
    .regist-form .submit-btn:hover {} 
}











/* nav-lecture */
.nav-lecture {
    background-color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 8px 6px 6px;
    border-radius: 10px;
    /* -webkit-box-shadow: 1px 1px 0 #00000025;
            box-shadow: 1px 1px 0 #00000025; */
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.nav-lecture > .nav-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 25%;
            flex: 1 1 25%;
}
.nav-lecture .nav-item:not(:first-of-type) {
    border-left: 2px solid #efefef;
}
.nav-lecture .nav-item-link {
    display: block;
    color: var(--text-bk);
    border-radius: 3px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.nav-lecture .nav-item-link:hover,.nav-lecture .nav-item-link:focus {
    opacity: 0.8;
    color: var(--lecture-theme-color);
    fill: var(--lecture-theme-color);
    /* background: radial-gradient(#ffffff 0%, #e9e9e9 60%, #d1d1d1 100%); */
}
.nav-lecture .nav-item .nav-item-contnet {
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
.nav-lecture .nav-item .nav-icon {
    display: block;
    width: 50px;
    margin: 0 auto 5px;
    text-align: center;
}
.nav-lecture .nav-item .nav-icon svg {
    fill: var(--lecture-theme-color);
    width: 80%;
}
.nav-lecture .nav-item .nav-text {
    font-size: 13px;
    font-weight: bolder;
}

@media screen and (min-width: 992px) {
    /* nav-lecture */
    .nav-lecture {
        padding: 10px;
        /* margin-left: 0px;
        margin-right: 0px; */
    }
    .nav-lecture .nav-item {}
    .nav-lecture .nav-item-link {}
    .nav-lecture .nav-item .nav-item-contnet {        
        display: -webkit-box;        
        display: -ms-flexbox;        
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .nav-lecture .nav-item .nav-icon {
        width: 40px;
        margin: 0 10px 2%;
    }
    .nav-lecture .nav-item .nav-icon svg {
        fill: var(--text-bk);
        width: 100%;
    }
    .nav-lecture .nav-item .nav-text {
        font-size: var(--fz4);        
    }
}
/************************************** 
    所有講座系列頁共用 all lecture pages - end
***************************************/

















/************************************** 
    講座 landing pages - start
    NOTE: layout
    + content-bn-lecture landing
    + section-lecture landing
        - lecture-intro
***************************************/
/* banner */
.content-bn-lecture.landing {    
    background: #D3F6FB;
    overflow: hidden;
    background: -o-linear-gradient(top, #f3fdff 50%, #D5F6FB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f3fdff), to(#D5F6FB));
    background: linear-gradient(180deg, #f3fdff 50%, #D5F6FB 100%);
    padding-top: 30px;
    /* background: url('../images/lecture/kv-lecture.webp') no-repeat center bottom /cover; */
}
.content-bn-lecture.landing .container-content {}
.content-bn-lecture.landing .container-content .content-bn-textgroup {
    text-align: center;
}
.content-bn-lecture.landing .content-bn-text {
    font-size: var(--fz4);
}
.content-bn-lecture.landing .badge-title.lecture {}
.content-bn-lecture.landing .content-bn-title {
    margin: 20px 10px;
    /* font-size: 40px; */
    text-align: center;
    font-weight: bolder;
    background-image: -o-linear-gradient(342deg, #004D58 0%, #0B7687 50%, #22C1DA 70%);
    background-image: linear-gradient(108deg, #004D58 0%, #0B7687 50%, #22C1DA 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content-bn-lecture.landing .content-bn-title small {
    /* display: block; */
}

/* section */
.section-lecture.landing {
    background-color: #D3F6FB;
    background-image:-o-linear-gradient(top, #D3F6FB 0%, #D3F6FB 100%);
    background-image:-webkit-gradient(linear, left top, left bottom, from(#D3F6FB), to(#D3F6FB));
    background-image:linear-gradient(to bottom, #D3F6FB 0%, #D3F6FB 100%);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
    /* background-attachment: fixed; */
    padding: 0;
}
.section-lecture.landing .nav-breadcrumb {}
.section-lecture.landing .nav-breadcrumb .breadcrumb {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.section-lecture.landing .nav-breadcrumb .breadcrumb .breadcrumb-item {}
.section-lecture.landing .nav-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--text-bk);
}

.section-lecture.landing .section-lecture {
    margin-top: -8%;
    padding: 0 0 8%;
}

.section-lecture.landing .lecture-intro {
    /* background-color: #D3F6FB; */
    padding: 5% 3.5%;
}
.section-lecture.landing .lecture-intro.tech {}
.section-lecture.landing .lecture-intro.design {}
.section-lecture.landing .lecture-intro.brand {
    padding-bottom: 30px;
}

.section-lecture.landing .lecture-intro .container-lecture {
    background-repeat: no-repeat, no-repeat;
    background-size: 30%, 30%;
    background-position: 0% 0%, 100% 100%;
    padding: 2% 0% 5%;
    border-radius: 10px;
    max-width: 1400px;
}

/* 最新場次 */
.lecture-intro.latest {
    position: relative;
    padding: 1% 5% 0;
    /* background-color: #EEFEFF; */
    border-radius: 10px;
    margin: 0;
}
.lecture-intro.latest::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    background: url('../images/lecture/bg-kv-lecture-3.svg') no-repeat left top / 100%;
    width: 100%;
    height: 600px;
    opacity: 0.6;
}
.lecture-intro.latest::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    background: url('../images/lecture/bg-kv-lecture-2.svg') no-repeat left top / 100%;
    width: 100%;
    height: 600px;
    opacity: 0.4;
}
.lecture-intro.latest .lecture-title {}
.lecture-intro.latest .container-lecture {
    position: relative;
    z-index: 1;
}

.lecture-intro.latest .card-lecture-group {
    padding-bottom: 40px;
}
.lecture-intro.latest .card-lecture-group .swiper-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.lecture-intro.latest .card-lecture-group .swiper-slide {}

/* 最新場次 card */
.card-lecture.latest {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}
.card-lecture.latest:hover,
.card-lecture.latest:focus,
.card-lecture.latest:active {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

.card-lecture.latest .card-mark {
    position: absolute;
    top: 0;
    left: 3%;
    width: 100%;
    max-width: 60px;
    z-index: 1;
}
.card-lecture.latest figure {
    height: 295px;
    -o-object-fit: cover;
       object-fit: cover;
}
.card-lecture.latest figure .img {}
.card-lecture.latest .card-body {}
.card-lecture.latest .card-body-header {    
    display: -webkit-box;    
    display: -ms-flexbox;    
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.card-lecture.latest time {}
.card-lecture.latest .attend {
    color: var(--light-bk);
    font-size: var(--fzXs);
}
.card-lecture.latest .attend .num {}
.card-lecture.latest .card-body-head {}
.card-lecture.latest .tag {}
.card-lecture.latest .link {
    display: block;
    position: relative;
    font-weight: bolder;
    color:  var(--lecture-theme-color);
    background-color: #2c2c2c;
    padding: 10px 10px;
    text-align: center;
}

@supports not ((width: -webkit-fit-content) or (width: -moz-fit-content) or (width: fit-content)) {
    .card-lecture.latest .link {
      width: auto;
    }
}
.card-lecture.latest .link::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    background: #F4F4F4;
    width: 120%;
    height: 102%;
    left: -10%;
    z-index: 0;    
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    transition: -webkit-transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    -o-transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1), -webkit-transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.card-lecture.latest .link:hover::before {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
}
.card-lecture.latest .link:hover,
.card-lecture.latest .link:focus {
    color: #ffffff;
}
.card-lecture.latest .link .link-text {
    position: relative;
    z-index: 1;
    color: var(--text-bk);
}
.card-lecture.latest .link:hover .link-text,
.card-lecture.latest .link:focus .link-text {
    color: #ffffff;
}
.card-lecture.latest .link i {
    font-size: var(--fzXs);
}


/*  */
.card-lecture.latest.brand {}    
.card-lecture.latest.brand figure {
    height: 234px;
}
.card-lecture.latest.brand .brand-date {
    margin: 5px 5px 5px 0;
}
.card-lecture.latest.brand .brand-date time {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 1;
    display: block;
    padding: 0;
    border-radius: 6px;
    color: #6f6f6f;
    margin-bottom: 8px;
}
.card-lecture.latest.brand .sold-out-badge { 
    display: inline-block;
    background-color: #e53935;
    color: white;
    padding: 4px 8px 3px;
    margin-left: 2px;
    font-size: 12px;
    border-radius: 3px;
}
.card-lecture.latest.brand .time-out-badge {
    display: inline-block;
    background-color: #5c5c5c;
    color: white;
    padding: 4px 8px 3px;
    margin-left: 2px;
    font-size: 12px;
    border-radius: 3px;
}


/* 最新場次 pagination */
.lecture-intro.latest .swiper-pagination {}

@media screen and (min-width: 992px) {    
    .section-lecture.landing .lecture-intro .container-lecture {
        padding: 2% 0%;
    }

    /* 最新場次 */
    .lecture-intro.latest {}
    .lecture-intro.latest::before {
        top: 50px;
        left: 0;
        opacity: 0.8;
    }
    .lecture-intro.latest::after {
        top: 70px;
        left: 0;
        opacity: 0.6;
    }
    .lecture-intro.latest .lecture-title {
        margin: 20px 0;
    }
    .lecture-intro.latest .container-lecture {}
    .lecture-intro.latest .card-lecture-group {
        padding-bottom: 20px;
    }
    .lecture-intro.latest .card-lecture-group .swiper-wrapper {}
    .lecture-intro.latest .card-lecture-group .swiper-slide {}

    /* 最新場次 card */
    .card-lecture.latest {}
    .card-lecture.latest:hover,
    .card-lecture.latest:focus,
    .card-lecture.latest:active {}
    
    .card-lecture.latest .card-mark {
        max-width: 80px;
    }
    .card-lecture.latest figure {}
    .card-lecture.latest figure .img {}
    .card-lecture.latest .card-body {}
    /* .card-lecture.latest .row {
        flex-wrap: nowrap;
    } */
    .card-lecture.latest .card-body-header {}
    .card-lecture.latest time {}
    .card-lecture.latest .attend {
        text-align: right;
        font-size: 1rem;
    }
    .card-lecture.latest .attend .num {}
    .card-lecture.latest .card-body-head {}
    .card-lecture.latest .tag {}
    .card-lecture.latest .link {
        margin-top: 10px;
    }    
    .card-lecture.latest .link::before {
        content: "";
    }
    .card-lecture.latest .link:hover::before {}
    .card-lecture.latest .link:hover,
    .card-lecture.latest .link:focus {}
    .card-lecture.latest .link .link-text {}
    .card-lecture.latest .link:hover .link-text,
    .card-lecture.latest .link:focus .link-text {
        color: #ffffff;
    }
    .card-lecture.latest .link i {}


    /*  */
    .card-lecture.latest.brand {}    
    .card-lecture.latest.brand time {}
}


/* @media screen and (min-width: 667px) {    
    .content-bn-lecture.landing .content-bn-title small {
        display: inline;
    }
} */

/* 資訊知識庫 */
.section-lecture.landing .lecture-intro.tech .container-lecture {
    background-color: #ffffffaa;
    background-image: url('../images/lecture/card-lecture-tech.webp'), url('../images/lecture/card-lecture-tech-r.webp');
}

/* 設計知識庫 */
.section-lecture.landing .lecture-intro.design .container-lecture {
    background-color: #ffffffaa;
    background-image: url('../images/lecture/card-lecture-design.webp'), url('../images/lecture/card-lecture-design-r.webp');
}

/* 原廠活動 */
.section-lecture.landing .lecture-intro.brand .container-lecture {
    background-color: #ffffffaa;
    background-image: url('../images/lecture/card-lecture-brand.webp'), url('../images/lecture/card-lecture-brand-r.webp');
}

/* 原廠活動-影音紀錄 */
.brand-showcase {}

/* 原廠活動-照片花絮 */
.brand-gallery {}


/* landing頁共用 */
.section-lecture.landing .card-lecture-group {
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
    align-items: stretch;
}

.section-lecture.landing .lecture-title {
    color: #0098b1;
    margin: 20px 0 20px;
}

/* 資訊知識庫 title */
.section-lecture.landing .lecture-intro.tech .lecture-title {
    color: var(--course-color-cs);
}
/* 設計知識庫 title */
.section-lecture.landing .lecture-intro.design .lecture-title {
    text-align: center;
    color: var(--course-color-design);
}
/* 
.section-lecture.landing .lecture-intro .card-lecture {
    margin-bottom: 10px;
}
.section-lecture.landing .lecture-intro .card-lecture .row {}
.section-lecture.landing .lecture-intro .card-lecture .row .col {
    flex-basis: content;
}
.section-lecture.landing .lecture-intro .card-lecture .row .col:first-child {} */

/* 資訊知識庫 card */
.card-lecture.replay-it {
    border-bottom: 3px solid var(--course-color-cs);
    height: 100%;
}
.card-lecture.replay-it .lecture-modal-btn {}
.card-lecture.replay-it .lecture-modal-btn {}
.card-lecture.replay-it .lecture-modal-btn figure {}
.card-lecture.replay-it .lecture-modal-btn figure .img {}
.card-lecture.replay-it .lecture-modal-btn i {}
.card-lecture.replay-it .lecture-modal-btn svg {}
.card-lecture.replay-it .card-body {}
.card-lecture.replay-it .card-body-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    /* justify-content: space-between; */
    -webkit-box-align: flex-end;
        -ms-flex-align: flex-end;
            align-items: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.card-lecture.replay-it .tag {}
.card-lecture.replay-it .view {}
.card-lecture.replay-it .view i {}
.card-lecture.replay-it .view .num {}


/* 設計知識庫 card */
.card-lecture.replay-design {
    border-bottom: 3px solid var(--course-color-design);
    height: 100%;
}
.card-lecture.replay-design .lecture-modal-btn {}
.card-lecture.replay-design .lecture-modal-btn {}
.card-lecture.replay-design .lecture-modal-btn figure {}
.card-lecture.replay-design .lecture-modal-btn figure .img {}
.card-lecture.replay-design .lecture-modal-btn i {}
.card-lecture.replay-design .lecture-modal-btn svg {}
.card-lecture.replay-design .card-body {}
.card-lecture.replay-design .card-body-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            /* justify-content: space-between; */
            -webkit-box-align: flex-end;
                -ms-flex-align: flex-end;
                    align-items: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.card-lecture.replay-design .tag {}
.card-lecture.replay-design .view {}
.card-lecture.replay-design .view i {}
.card-lecture.replay-design .view .num {}

/* 原廠活動 card */
.lecture-intro.brand .card-lecture {
    border-bottom: 3px solid #5d587d;
}
/* 原廠活動 card 影音紀錄 */
.card-lecture.showcase {}
.card-lecture.showcase .lecture-modal-btn {}
.card-lecture.showcase .lecture-modal-btn {}
.card-lecture.showcase .lecture-modal-btn figure {}
.card-lecture.showcase .lecture-modal-btn figure .img {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.card-lecture.showcase .lecture-modal-btn:hover figure .img,
.card-lecture.showcase .lecture-modal-btn:focus figure .img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
.card-lecture.showcase .lecture-modal-btn i {}
.card-lecture.showcase .lecture-modal-btn svg {}
.card-lecture.showcase .card-body {}
.card-lecture.showcase .card-body-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            /* justify-content: space-between; */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.card-lecture.showcase .tag {}
.card-lecture.showcase .view {}
.card-lecture.showcase .view i {}
.card-lecture.showcase .view .num {}

/* 原廠活動 card 照片花絮 */
.card-lecture.gallery {}
.card-lecture.gallery .link {}

.card-lecture.gallery figure {
    -o-object-fit: cover;
       object-fit: cover;
    height: 200px;
}
.card-lecture.gallery figure .img {}
.card-lecture.gallery .link figure::after {
    content: '';
    background-color: #00000025;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.card-lecture.gallery .link:hover figure::after,
.card-lecture.gallery .link:focus figure::after {
    background-color: transparent;
}
.card-lecture.gallery .link i {}
.card-lecture.gallery .link svg {}
.card-lecture.gallery .card-body {}
.card-lecture.gallery .card-body-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.card-lecture.gallery .tag-group {}
.card-lecture.gallery .tag {}
.card-lecture.gallery .i-gallery {
    margin-left: 8px;
    color: var(--light-bk);
    font-size: 20px;
    vertical-align: middle;
}
.card-lecture.gallery .view {}
.card-lecture.gallery .view i {}
.card-lecture.gallery .view .num {}



/* 資訊知識庫 section-btn */
.section-lecture.landing .lecture-intro.tech .section-btn {
    background-color: var(--course-color-cs);
    color: #ffffff;
}
/* 設計知識庫 section-btn */
.section-lecture.landing .lecture-intro.design .section-btn {
    background-color: var(--course-color-design);
    color: #ffffff;
}
/* 原廠活動 section-btn */
.section-lecture.landing .lecture-intro.brand .section-btn {
    background: var(--course-color-brand);
    color: #ffffff;
    border-width: 0px;
}


@media screen and (min-width: 992px) {
    /* banner */
    .content-bn-lecture.landing { }
    .content-bn-lecture.landing .container-content {}
    .content-bn-lecture.landing .container-content .content-bn-textgroup {}
    .content-bn-lecture.landing .content-bn-text {}
    .content-bn-lecture.landing .badge-title.lecture {}
    .content-bn-lecture.landing .content-bn-title {
        /* font-size: 42px; */
        margin: 10px 0 5px;
    }
    .content-bn-lecture.landing .content-bn-title small {}

    /* section */
    .section-lecture.landing {}
    .section-lecture.landing .nav-breadcrumb {}
    .section-lecture.landing .nav-breadcrumb .breadcrumb {}
    .section-lecture.landing .nav-breadcrumb .breadcrumb .breadcrumb-item {}
    .section-lecture.landing .nav-breadcrumb .breadcrumb .breadcrumb-item a {}
    .section-lecture.landing .content-bn-text {}


    .section-lecture.landing .section-lecture {}

    .section-lecture.landing .lecture-intro {
        padding: 2% 2% 0;
    }
    .lecture-intro.tech {}
    .lecture-intro.design {}
    .lecture-intro.brand {}
    .lecture-intro .container-lecture {
        padding: 3% 2% 1%;
    }
    .lecture-intro.latest .container-lecture {
        padding: 0;
    }
    .lecture-intro.tech .container-lecture {}
    .lecture-intro.design .container-lecture {}
    .lecture-intro.brand .container-lecture {}

    .brand-showcase {}

    .brand-gallery {
        padding-top: 3%;
    }

    .section-lecture.landing .card-lecture-group {
        padding-left: 0px;
        padding-right: 0px;
    }

    .section-lecture.landing .lecture-title {
        margin: 1% 0 2%;
    }
    .section-lecture.landing .lecture-intro.tech .lecture-title {}
    .section-lecture.landing .lecture-intro.design .lecture-title {}

    /* .section-lecture.landing .lecture-intro .card-lecture {} */

    /* 資訊知識庫 card */
    .card-lecture.replay-it {}
    .card-lecture.replay-it .lecture-modal-btn {}
    .card-lecture.replay-it .lecture-modal-btn {}
    .card-lecture.replay-it .lecture-modal-btn figure {}
    .card-lecture.replay-it .lecture-modal-btn figure .img {}
    .card-lecture.replay-it .lecture-modal-btn i {}
    .card-lecture.replay-it .lecture-modal-btn svg {}
    .card-lecture.replay-it .card-body {}
    .card-lecture.replay-it .card-body-footer {}
    .card-lecture.replay-it .tag {}
    .card-lecture.replay-it .view {}
    .card-lecture.replay-it .view i {}
    .card-lecture.replay-it .view .num {}

    /* 設計知識庫 card */
    .card-lecture.replay-design {}
    .card-lecture.replay-design .lecture-modal-btn {}
    .card-lecture.replay-design .lecture-modal-btn {}
    .card-lecture.replay-design .lecture-modal-btn figure {}
    .card-lecture.replay-design .lecture-modal-btn figure .img {}
    .card-lecture.replay-design .lecture-modal-btn i {}
    .card-lecture.replay-design .lecture-modal-btn svg {}
    .card-lecture.replay-design .card-body {}
    .card-lecture.replay-design .card-body-footer {}
    .card-lecture.replay-design .tag {}
    .card-lecture.replay-design .view {}
    .card-lecture.replay-design .view i {}
    .card-lecture.replay-design .view .num {}

    /* 原廠活動 card */
    .lecture-intro.brand .card-lecture {}
    /* 原廠活動 card 影音紀錄 */
    .card-lecture.showcase {}
    .card-lecture.showcase .lecture-modal-btn {}
    .card-lecture.showcase .lecture-modal-btn {}
    .card-lecture.showcase .lecture-modal-btn figure {}
    .card-lecture.showcase .lecture-modal-btn figure .img {}
    .card-lecture.showcase .lecture-modal-btn i {}
    .card-lecture.showcase .lecture-modal-btn svg {}
    .card-lecture.showcase .card-body {}
    .card-lecture.showcase .card-body-footer {}
    .card-lecture.showcase .tag {}
    .card-lecture.showcase .view {}
    .card-lecture.showcase .view i {}
    .card-lecture.showcase .view .num {}
    /* 原廠活動 card 照片花絮 */
    .card-lecture.gallery {}
    .card-lecture.gallery .link {}
    .card-lecture.gallery figure {}
    .card-lecture.gallery figure .img {}
    .card-lecture.gallery .link figure::after {}
    .card-lecture.gallery .link i {}
    .card-lecture.gallery .link svg {}
    .card-lecture.gallery .card-body {}
    .card-lecture.gallery .card-body-footer {}
    .card-lecture.gallery .tag-group {}
    .card-lecture.gallery .tag {}
    .card-lecture.gallery .i-gallery {}
    .card-lecture.gallery .view {}
    .card-lecture.gallery .view i {}
    .card-lecture.gallery .view .num {}

    /* 資訊知識庫 section-btn */
    .section-lecture.landing .lecture-intro.tech .section-btn {}
    /* 設計知識庫 section-btn */
    .section-lecture.landing .lecture-intro.design .section-btn {}
    /* 原廠活動 section-btn */
    .section-lecture.landing .lecture-intro.brand .section-btn {}
}
/************************************** 
    講座 landing pages - end
***************************************/