body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-size: 16px;
    color: #565656;
    margin: 0;
    padding: 0;
    font-family: "Microsoft JhengHei", sans-serif;
}
a{
    text-decoration: none;
    transition: all 0.2s linear 0s;
}
.hidden{ display: none;}
.main-container{
  flex: 1;
  position: relative;
}

/* ---------- 整體樣式 ---------- */
/* 基礎套用 */
.fs-22px{ font-size: 22px;}
.fs-18px{ font-size: 18px;}
.fs-17px{ font-size: 17px;}
.fs-15px{ font-size: 15px;}
.fs-14px{ font-size: 14px;}
.fs-13px{ font-size: 13px;}
.fs-12px{ font-size: 12px;}
.lh-28{ line-height: 28px;}
.lh-40{ line-height: 40px;}
.ls-2{ letter-spacing: 2px; text-indent: 2px;}
.ls-4{ letter-spacing: 4px; text-indent: 4px;}
.text-justify{ text-align: justify;}

.text-gray{ color: #565656;}
.text-blue{ color: #3084d3;}
.text-pink{ color: #ef5049;}
.text-lightgreen{ color: #a3e5cd;}

.bg-gray{ background-color: #4A4A4A;}
.bg-lightgray{ background-color: #F1F1F1;}
.bg-green{background-color: #22BCB9;}
.bg-lightgreen{ background-color: #EAF1D8;}
.bg-cyan{ background-color: #D3EDEB;}
.bg-pink{ background-color: #ef5049;}

.bg-finish{ background: #badf81;}
.bg-transport{ background: #3084D3;}

.link-main{ color: #6a6969;}
.link-main:hover{ color: #ef5049;}
/* 表單樣式 */
button,
.btn:focus,
.btn:active,
.btn:focus,
.navbar-toggler:focus,
a:focus,
.btn-close:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus,
.page-link:focus{
  outline: none;
  box-shadow: none;
}

.btn-blue{
    background: #3084d3;
    color: #ffffff;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 2px;
    transition: all 0.2s linear 0s;
}
.btn-blue.disabled{
    color: #b6b5b5;
    border: 1px solid #b6b5b5;
    background-color: #ffffff;
}
.btn-blue:hover{
    background: #ef5049;
    color: #ffffff;
}
.btn-pink{
    background: #ef5049;
    color: #ffffff;
    letter-spacing: 2px;
    transition: all 0.2s linear 0s;
    border: 2px solid #ef5049;
    padding: 0px 12px;
}
.btn-pink:hover{
    background: transparent;
    color: #ef5049;
    border-color: #ef5049;
}
.btn-more{
    font-size: 15px;
    color: #565656;
    background: transparent;
    padding: 5px 20px;
    border-radius: 25px;
    letter-spacing: 2px;
    border: 1px solid #565656;
    transition: all 0.2s linear 0s;
}
.btn-more:hover{
    color: #ffffff;
    background: #ef5049;
    border: 1px solid #ef5049;
}
.btn-gray{
    background: #d7d7d7;
    color: #565656;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 2px;
    transition: all 0.2s linear 0s;
}
.btn-gray:hover{
    color: #333333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
@media screen and (max-width: 575.9px){
    .form-control,
    .form-select,
    .form-check-label,
    .form-label{
        font-size: 15px;
    }
}
/* 標題 */
.border-title{
    padding: 0px 12px;
    border-left: 4px solid #53be83;
}
.sub-title{
    position: relative;
    padding-bottom: 18px;
    color: #737070;
}
.sub-title:before {
    content: "";
    position: absolute;
    width: 140px;
    bottom: 2px;
    left: 50%;
    margin-left: -70px;
    height: 1px;
    background: #a8a8a8;
}
.sub-title:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: #ef5049 transparent transparent transparent;
}
.rd-title{
    padding: 0px 10px;
    border-left: 4px solid #e5e5e5;
    font-weight: bold;
}
/* banner & breadcrumb */
.breadcrumb-area {
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 150px;
    z-index: 0;
}
.breadcrumb-area::before {
    position: absolute;
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 150px;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0.1;
    z-index: 1;
}
.breadcrumb-area .flex-grow-1{
    position: relative;
    z-index: 2;
}

.breadcrumb,
.breadcrumb a{
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 0px;
}
.breadcrumb > div:after{
    content: "/";
    margin: 0 8px;
}
.breadcrumb > div:last-child:after{
    content: "";
    margin: 0px;
}
/* 分頁 */
.page-num{
    border-top: 1px dashed #cfcfcf;
}
.page-num .page-item:first-child .page-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.page-num .page-item:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.page-num .page-item:first-child .page-link,
.page-num .page-item:last-child .page-link{
    color: #EF5049;
}
.page-num .page-item .page-link{ /* 20211214 change */
    color: #666666;
    font-size: 16px;
    padding: 0px;
    font-weight: 600;
    border: 1px solid #dddddd;
    width: 40px;
    height: 40px;
    line-height: 39px;
    text-align: center;
    background: #ffffff;
    margin: 0 4px;
}
.page-num .page-item.disabled .page-link{
    color: #e5e5e5;
    pointer-events: none;
    background-color: #fff;
}
.page-num .page-item.active .page-link{
    color: #ffffff;
    background: #53be83;
}
.page-num.course-page{ /* 20211214 add */
    border-top-width: 0px;
}
.page-num.course-page .page-item .page-link{ /* 20211214 add */
    width: 36px;
    height: 36px;
    line-height: 35px;
}
@media screen and (max-width: 575.9px){
    .page-num .page-item .page-link{
        font-size: 15px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0 2px;
    }
}
/* error page */
.bg-error{ height: 30vh;} /*20211227 add*/
.error{ /*20211227 add*/
    font-size: 20vw;
    line-height: 20vw;
    font-family: maven pro, sans-serif, Arial;
    font-weight: 900;
    -webkit-text-stroke: 8px #53BE83;
    margin-top: -20vh;
    letter-spacing: 5px;
    text-indent: -5px;
}
@media screen and (max-width: 575.9px){
    .page-num .page-item .page-link{
        font-size: 15px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0 2px;
    }
    .bg-error{ height: 120px;} /*20211227 add*/
    .error{ /*20211227 add*/
        font-size: 30vw;
        line-height: 30vw;
        -webkit-text-stroke: 4px #53BE83;
        margin-top: -80px;
    }
}
/* ---------- Header ---------- */
/* topbar */
.top-bar {
    padding: 0px;
    font-size: 14px;
    background: #e4e4e4;
}
.top-bar .cnt-account div{
    line-height: 12px;
    padding: 9px 12px 9px 7px;
    border-right: 1px solid #e5e5e5;
}
.top-bar .cnt-account a{
    color: #333333;
    padding: 0px;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.top-bar .cnt-account a:hover{
    color: #ef5049;
}
/* searchbar */
.top-search .form-select{
	flex: 0 0 120px;
	background-color: #f6f6f6;
	color: #666;
	font-size: 14px;
}
.top-search .form-control{
	padding: 10px;
    font-size: 14px;
    min-height: 45px;
}
.top-search .btn-search{
	flex: 0 0 48px;
	text-align: center;
	background-color: #ef5049;
	color: #ffffff;
	border: 1px solid #EF5049;
    border-radius: 0.25rem;
}
/* dropdown-item */
.dropdown-cart{
	padding: 0px 4px;
}
.btn-dropdown{
	background: #e4e4e4;
	color: #67645b;
	width: 46px;
	height: 46px;
	padding: 0px;
	line-height: 46px;
	text-align: center;
	border-radius: 50%;
}
.dropdown-toggle::after {
    display: none;
}
.basket-item-count {
    border-radius: 50%;
    height: 22px;
    width: 22px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    background: #4fa3f1;
    color: #fff;
    font-size: 11px;
    line-height: 20px;
}
.dropdown-cart .cart-item{
	width: 230px;
}
.dropdown-cart .cart-item li{
	border-bottom: 1px solid #e8e7e7;
	padding: 8px 0px;
}
.dropdown-cart.dropdown-mailbox .cart-item li{
	border-bottom: 1px dashed #a4a0a0;
}
.dropdown-cart .cart-item li:last-child{
	border-bottom-width: 0px;
}
.dropdown-cart .cart-item li h5 a{
	font-size: 15px;
	color: #666666;
    transition: all 0.2s linear 0s;
}
.dropdown-cart .cart-item li h5 a:hover{
	color: #ef5049;
}
.dropdown-cart .cart-item li p{
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 8px;
	color: #acacac;
}
.dropdown-cart .cart-total{
	background: #3084d3;
    color: #fff;
    border: none;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 2px;
    transition: all 0.2s linear 0s;
}
.dropdown-cart .cart-total:hover{
	background: #ef5049;
}
.dropdown-cart .cart-item li .cart-item-cover{
	flex: 0 0 40px;
	border: 1px solid #c0c0c0;
}
.dropdown-cart .cart-item li .name{
	margin-bottom: 4px;
	font-size: 13px;
}
.dropdown-cart .cart-item li .name a{
	font-size: 13px;
	line-height: 15px;
}
.dropdown-cart .cart-item li .price{
	font-weight: 700;
	color: #ef5049;
	font-size: 14px;
}
.dropdown-cart .cart-item li .cart-item-delete{
	flex: 0 0 18px;
	text-align: right;
}
.dropdown-cart .cart-item li .cart-item-delete a{
	color: #898989;
	font-size: 14px;
    transition: all 0.2s linear 0s;
}
.dropdown-cart .cart-item li .cart-item-delete a:hover{
	color: #ef5049;
}
/* navmenu */
.nav-menu{
	background: #53be83;
}
.nav-menu .navbar-nav .nav-item{
	padding: 0px;
}
.nav-menu .navbar-nav .nav-link{
	color: #FFFFFF;
    font-size: 19px;
    line-height: 20px;
    padding: 14px 21px;
    font-weight: bold;
    letter-spacing: 0.7px;
    border-left: 1px solid rgba(255,255,255,0.2);
    transition: all 0.2s linear 0s;
}
.nav-menu .navbar-nav .nav-link:hover{
	background: #ffc600;
    color: #555555;
}
.nav-menu .navbar-nav .nav-item.active .nav-link{
    background: #EF5049;
    color: #ffffff;
}
.nav-menu .btn-yellow{
	transition: all linear 0.2s;
    background: #ffc600;
    color: #000;
    font-size: 17px;
    padding: 4px 16px;
    border-radius: 20px;
    transition: all 0.2s linear 0s;
}
.nav-menu .btn-yellow:hover {
    background: #f85757;
    color: #fff;
}
.nav-menu .icon-bar{
	display: block;
    width: 22px;    
    height: 2px;
    border-radius: 1px;
	background-color: #fff;
	margin: 4px auto;
}
/* mobile bar */
.mobilebar{
    background-color: #525252;
    overflow: hidden;
    position: fixed;
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    z-index: 99;
}
.mobilebar a{
    display: block;
    position: relative;
    color: #f2f2f2;
    padding: 14px 0;
    transition: all 0.2s linear 0s;
}
.mobilebar a.active,
.mobilebar a:hover{
    background-color: #ef5049;
}
.mobilebar .basket-item-count{
    top: 4px;
    right: 4px;
}
/* footer */
.footer{
	background: #4c4a4a;
    color: #f7f7f7;
    font-size: 15px;
}
.footer .footer-link a{
	color: #ffffff;
    transition: all 0.2s linear 0s;
}
.footer .footer-link a:hover{
	color: #8b8686;
}
.footer .copyright-bar{
    border-top: 1px solid #727070;
}
.footer .social > div{
	color: #ffffff;
	font-size: 18px;
	height: 40px;
    width: 40px;
	line-height: 40px;
	text-align: center;
    border-radius: 50%;
    margin: 0 8px;
}
.footer .social .fb{
    background: #3C5B9B;
}
.footer .social .youtube{
    background: #F03434;
}
.footer .social .email{
    background: #fea44c;
}
.footer .social > div a{
    color: #ffffff;
}
.footer .copyright{
	color: #c4c3c3;
    font-size: 13px;
}
@media screen and (max-width: 991.9px){
	.nav-menu .navbar-nav .nav-link{
	    border-left-width: 0px;
	}
}
@media screen and (max-width: 767.9px){
    .footer{
        margin-bottom: 52px;
    }
}
/* ---------- 登入註冊 ---------- */
.social-login a{
    border-radius: 3px;
    padding: 10px 30px;
    font-size: 15px;
    display: inline-block;
    color: #fff;
    text-align: center;
    margin-right: 8px;
}
.social-login .fb-login{
    background-color: #3d5c98;
    transition: all 0.2s linear 0s;
}
.social-login .fb-login:hover{
    background-color: #153470;
}
.social-login .google-login{
    background-color: #e6423a;
    transition: all 0.2s linear 0s;
}
.social-login .google-login:hover{
    background-color: #ae2a23;
}
/* ---------- 首頁 ---------- */
.btn-login{
    background: #ffffff;
    color: #22BCB9;
    padding: 12px 32px;
    border-radius: 0;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid #ffffff;
    transition: all 0.2s linear 0s;
}
.btn-login:hover{
    background: #22BCB9;
    color: #ffffff;
}
/* banner 輪播 */
.carousel-control-next, 
.carousel-control-prev{
    width: 32px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
    background: rgba(34,34,34,0.5);
    line-height: 32px;
    font-size: 28px;
}
.index-container .carousel-indicators{
    background: rgba(34,34,34,0.5);
    width: 120px;
    margin: 12px auto;
    border-radius: 40px;
    padding: 8px;
}
.index-container .carousel-indicators button{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border-top: 0px;
    border-bottom: 0px;
}
/* 精選課程欄位 */
.course-card,
.activity-card{
    border-radius: 0px;
}
.course-card .card-bg{
    position: relative;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.course-card .card-body{ position: relative;}
.course-card .course-creator{
    position: absolute;
    top: -60px;
    left: 20px;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f9f9f9;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.course-card .course-creator:hover{
    border: 2px solid #EF5049;
}
.course-card .course-tag{
    position: absolute;
    top: -60px;
    right: 20px;
    height: 60px;
    width: 60px;
    background: #ef5049;
    text-align: center;
    font-size: 17px;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0px 1px 12px rgb(0 0 0 / 10%);
    padding-top: 9px;
    font-weight: 600;
    line-height: 21px;
}
.course-card .card-footer{
    background-color: #ffffff;
    border-top-width: 0px;
}
/* 活動會議欄位 */
.activity-card .card-bg{
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.activity-card .card-bg .activity-date{
    background: #01799e;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px;
    font-weight: bold;
}
.activity-card .card-bg .activity-date > span{
    font-size: 24px;
}
/* 最新消息輪播 */
.news-slider-content{
    background: #f4f4f4;
    border: 1px #d9d9d9 solid;
}
.news-slider .slider-box{
    padding: 16px;
}
.news-slider .slick-dots {
    bottom: -20px;
}
.news-slider h5{
    padding: 8px 12px;
    background: #53be83;
    margin-bottom: 15px;
    color: #ffffff;
    letter-spacing: 1px;
    text-indent: 1px;
    line-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: all 0.2s linear 0s;
}
.news-slider a:hover h5{
    color: #EF5049;
}
/* 最新消息條列 */
.news-card{
    border-radius: 0px;
    border-top: 4px solid #ef5049;
}
.news-card .news-card-title{
    padding: 12px 16px;
    background: #f2f2f2;
    color: #565656;
    letter-spacing: 0.5px;
    text-indent: 0.5px;
    font-weight: bold;
}
.news-card .list-group-item-action{
    padding: 6px 16px;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: all 0.2s linear 0s;
    line-height: 36px;
}
.news-card .list-group-item-action:hover{
    color: #EF5049;
}
@media screen and (max-width: 1199.9px){
    .activity-card .card-bg{
        height: 240px;
    }
}
@media screen and (max-width: 767.9px){
    .activity-card .card-bg{
        height: 200px;
    }
    .news-slider h5{ font-size: 18px;}
    .index-container .index-slider{
        height: 320px;
    }
    .index-container .carousel-item img{
        width: 100%;
        height: 320px;
        object-fit: cover;
    }
}
@media screen and (max-width: 575.9px){
    .index-container .index-slider,
    .index-container .carousel-item img{
        height: 240px;
    }
    .index-container .carousel-indicators{
        width: 100px;
        padding: 6px;
    }
    .index-container .carousel-indicators button{
        width: 8px;
        height: 8px;
    }
    .btn-login{
        padding: 8px 24px;
        font-size: 18px;
    }
    .course-card .card-body h5,
    .activity-card .card-body h5{ 
        font-size: 18px;
    }
    .activity-card .card-bg{
        height: 240px;
    }
    .news-card .list-group-item-action{
        padding: 8px 16px;
        -webkit-line-clamp: 2;
        line-height: 28px;
        font-size: 15px;
    }
    .index-slogan h4{ 
        font-size: 20px;
        margin-bottom: 16px;
    }

}
/* ---------- 關於我們 ---------- */
.about-container .about-title{
    bottom: 15%;
    right: 10%;
    letter-spacing: 16px;
    text-indent: 16px;
    font-size: 5vw;
}
.about-container p{
    font-size: 22px;
    line-height: 40px;
}
.about-container .services-block .col-6.col-lg-3{
    border-right: dotted 1px #bfc0c0;
}
.about-container .services-block .col-6.col-lg-3:last-child{
    border-right-width: 0px;
}
.about-container .step{
    background-color: #ececec;
}
.logo-slider .slider-box{
    border: 1px solid #e5e5e5;
    margin: 0 4px;
    text-align: center;
    transition: all 0.2s linear 0s;
}
.logo-slider .slider-box:hover{
    background-color: #FaFaFa;
}
.logo-slider .slider-box img{
    margin: 8px auto;
}
.slick-dots li {
    margin: 0;
}
.slick-dots li button:before{
    font-size: 40px;
    transition: all 0.2s linear 0s;
}
.slick-dots li.slick-active button:before,
.slick-dots li:hover button:before{
    color: #ef5049;
}
@media screen and (max-width: 991.9px){
    .about-container .services-block .col-6.col-lg-3:nth-child(3){
        border-right-width: 0px;
    }
}
@media screen and (max-width: 575.9px){
    .about-container .about-title{
        letter-spacing: 8px;
        text-indent: 8px;
        font-size: 28px;
        font-weight: bold;
    }
    .about-container p{
        font-size: 18px;
        line-height: 32px;
    }
}
/* ---------- 條款 和 FAQ---------- */
.term-container p{
    margin-bottom: 20px;
    margin-left: 36px;
}
.term-container ul.list-unstyled{
    margin-left: 36px;
}
.term-container ul.list-unstyled li,
.term-container ol li{
    margin-bottom: 12px;
}
/* FAQ  */
.faq-container .accordion-item{
    margin: 8px 0;
    border-width: 0px;
}
.faq-container .accordion-button{
    color: #333333;
    background-color: #f5f5f5;
    padding: 12px;
}
.faq-container .accordion-button:after{
    display: none;
}
.faq-container .accordion-button:not(.collapsed) {
    box-shadow: none;
}
.faq-container .accordion-button .faq-num{
    flex: 0 0 36px;
    background-color: #ef5049;
    color: #ffffff;
    padding: 16px;
    margin-right: 12px;
}
.faq-container .accordion-button > div:last-child{
    word-break: break-all;
}
@media screen and (max-width: 575.9px){
    .term-container p,
    .term-container ul.list-unstyled{
        margin-left: 0px;
        font-size: 15px;
    }
    .faq-container .accordion-button{
        font-size: 15px;
    }
    .faq-container .accordion-button .faq-num{
        padding: 12px;
    }
    .faq-container .accordion-body,
    .faq-container .accordion-body p{
        font-size: 15px;
    }
}
/* ---------- Sitemap ---------- */
.sitemap-card{
    background-color: #FFF;
    border: 1px solid #cecece;
    margin-bottom: 24px;
    border-radius: 0px;
}
.sitemap-card .list-group-item{
    border-width: 0px;
    border-top: 1px dotted #e7e7e7;
}
.sitemap-card .list-group-item:first-child{
    border-top-width: 0px;
}
.sitemap-card .list-group-item:first-child i{
    font-size: 30px;
    color: #ef5049;
    border: 1px solid #ef5049;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    margin: 12px 0px;
}
.sitemap-card .list-group-item-action{
    color: #6a6969;
    text-align: center;
    padding: 12px 20px;
}

/* ---------- 直播授課 ---------- */
.live-container .course-card,
.live-container .course-card .card-footer{
    background-color: #f7f7f7;
}
/* 講師推薦欄位 */
.recommend-card{
    border-top: 3px solid #3fcfee;
    padding: 15px 30px 20px;
}
.lecturer-img{
    height: 60px;
    width: 60px;
    margin-right: 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #eeeeee;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.lecturer-img:hover{
    border: 2px solid #EF5049;
}
/* 商品輪播欄位 */
.product-slider .slider-box{
    padding: 0px 4px;
}
.product-slider h5{ 
    font-size: 18px;
    line-height: 24px;
}
.product-slider h5,
.product-slider .description{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product-slider .product-box-img{
    flex: 0 0 124px;
    height: 124px;
    border: 1px solid #c5c4c4;
    padding: 4px;
    margin-right: 16px;
    transition: all 0.2s linear 0s;
    background: #ffffff;
}
.product-slider .product-box-img:hover{
    border: 1px solid #EF5049;
}
.slider-nav .prev-slide,
.slider-nav .next-slide{
    color: #9d9d9d;
    transition: all 0.2s linear 0s;
}
.slider-nav .prev-slide:hover,
.slider-nav .next-slide:hover{
    color: #EF5049;
}
@media screen and (max-width: 767.9px){
    .product-slider h5{ font-size: 17px;}
}
/* ---------- 影音課程 ---------- */
/* 影片種類選擇 */
.video-select{
    background: #E3EBEB;
}
.video-select h5{
    flex: 0 0 140px;
}
/* 影片課程欄位 */
.video-card{
    background: #f1f1f1;
    border: 1px solid #e5e5e5;
    border-radius: 0px;
}
.video-card:hover{
    border: 1px solid #EF5049;
}
.video-card .video-img{
    position: relative;
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.video-card .video-img:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f144';
    font-size: 4em;
    color: #ffffff;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.video-card h5{
    font-size: 18px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;  
    text-overflow: ellipsis;
}
@media screen and (max-width: 1199.9px){
    .video-card .video-img{ height: 200px;}
}
@media screen and (max-width: 767.9px){
    .video-card .video-img{ height: 160px;}
    .video-card h5{ font-size: 17px;}
}
@media screen and (max-width: 575.9px){
    .video-card .video-img{ height: 240px;}
}
/* ---------- 認證考試 ---------- */
.examlist-info{
    background: #E3ECE3;
}
.examlist-info .cover-img{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* GS1 TAIWAN 認證card */
.examlist-card{
    background: #F5EAB6;
    border-radius: 0px;
    border-width: 0px;
}
.examlist-card .examlist-bg{
    border: 1px solid #c5c4c4;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.examlist-card h5{
    font-size: 18px;
    border-bottom: 1px dotted #565656;
    padding-bottom: 12px;
    text-align: center;
}
.examlist-other .examlist-card{
    background: #ECE4DB;
}
@media screen and (max-width: 767.9px){
    .examlist-container .cover-img{
        width: 100%;
        height: 300px!important;
    }
}
@media screen and (max-width: 575.9px){
    .examlist-card .examlist-bg{ height: 240px;}
    .examlist-container p{ font-size: 15px;}
}
/* ---------- 單一認證考試 ---------- */
.examlist-sign{
    background: #fbfbfb;
    border-bottom: 2px solid #ff8400;
    border-top: 1px solid #dddddd;
    padding: 20px 30px;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 5px;
    text-indent: 5px;
}
.sign-icon{
    flex: 0 0 80px;
}
.sign-icon i{
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: #22bcb9;
    font-size: 28px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #22bcb9;
    transition: all 0.2s linear 0s;
}
.sign-icon:hover i{
    border-radius: 0px;
}
/* tab */
.examlist-tab .nav-tabs{
    flex-wrap: nowrap;
}
.examlist-tab .nav-tabs .nav-link{
    background: #f7f7f7;
    color: #565656;
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 0px;
    transition: all 0.2s linear 0s;
}
.examlist-tab .nav-tabs .nav-link:hover{
    border-color: #eee;
    border-top: 3px solid #dbd9d9;
}
.examlist-tab .nav-tabs .nav-item:last-child .nav-link{
    margin-right: 0px;
}
.examlist-tab .nav-tabs .nav-item.show .nav-link,
.examlist-tab .nav-tabs .nav-link.active {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    border-top: 3px solid #ef5049;
}
.examlist-tab .tab-content{
    border: 1px solid #dee2e6;
    border-top-width: 0px;
}

/* examlist table */
.table-examlist thead tr th{
    border-color: #DEE2E6!important;
    padding: 12px 8px;
    color: #333333;
    background: #ffffff;
    font-size: 17px;
    padding: 16px 12px;
}
.table-examlist tbody tr td{ 
    color: #565656;
    padding: 12px;
}
.table-examlist tbody tr:nth-child(odd){
    background: #f5f5f5;
}
.table-examlist tbody tr:last-child td{
    border-bottom-width: 0px;
}
.table-examlist .btn-more{
    background: #fbfbfb;
    border: 1px solid #bababa;
    padding: 4px 20px;
    transition: all 0.4s linear 0s;
}
.table-examlist .btn-more:hover{
    background: #ef5049;
    color: #fff;
    border: 1px solid #ef5049;
}
@media screen and (max-width: 767.9px) {
    .table-examlist thead{
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .table-examlist tbody tr{
        display: block;
    }
    .table-examlist tbody td{ 
        display: flex;
        flex-wrap: nowrap;
    }
    .table-examlist tbody td:last-child{
        align-items: center;
    }
    .table-examlist tbody td:before{
        content: attr(data-label);
        display: flex;
        flex: 0 0 60px;
        text-transform: uppercase;
        color: #333333;
        font-weight: bold;
    }
    .table-examlist tbody tr:last-child td{
        border-bottom-width: 1px;
    }
    .table-examlist tbody tr:last-child td:last-child{
        border-bottom-width: 0px;
    }
}
@media screen and (max-width: 575.9px) {
    .table-examlist tbody tr td{
        font-size: 15px;
    }
    .examlist-sign-info h5{ font-size: 17px;}
    .examlist-sign-info .flex-grow-1 div{
        font-size: 15px;
    }
    .table-examlist .btn-more{ font-size: 14px;}
    .examlist-tab .nav-tabs .nav-link{
        font-size: 15px;
        padding: 0.5rem 3px;
    }
}
/* ---------- 課程總覽/分類清單 ---------- */
.all-course .course-card,
.all-course .course-card .card-footer,
.other-course .course-card,
.other-course .course-card .card-footer{
    background: #F7F7F7;
}
.category-slider .btn-category{
    display: block;
    padding: 16px;
    margin: 0px 12px;
    text-align: center;
    color: #676767;
    background: #ededed;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.2s linear 0s;
}
.category-slider .btn-category:first-child{
    margin-bottom: 16px;
}
.category-slider .btn-category.active{
    background: #ffd64a;
    pointer-events: none;
}
.category-slider .btn-category:hover{
    background: #eaf1d8;
    transform: scale(1.04);
}
.category-slider .btn-category i{
    display: block;
    margin-bottom: 8px;
    font-size: 25px;
    color: #53be83;
}
.carousel .btn-category{
    display: block;
    padding: 16px;
    margin: 0px 12px;
    text-align: center;
    color: #676767;
    background: #ededed;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.2s linear 0s;
}
.carousel .btn-category:first-child{
    margin-bottom: 16px;
}
.carousel .btn-category.active{
    background: #ffd64a;
    pointer-events: none;
}
.carousel .btn-category:hover{
    background: #eaf1d8;
    transform: scale(1.04);
}
.carousel .btn-category i{
    display: block;
    margin-bottom: 8px;
    font-size: 25px;
    color: #53be83;
}
@media screen and (max-width: 991.9px) {
    .category-slider .btn-category{
        margin: 0px 12px 16px 12px;
    }
    .carousel .btn-category{
        margin: 0px 12px 16px 12px;
    }
}
/* ---------- 單一課程內容 ---------- */
.detail-container .icon-play{
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}
/* 課程背景和導覽 */
.detail-container .detail-bg{
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 80vh;
}
.detail-container .detail-bg .arrow-icon{
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    transition: all 0.5s ease 1.9s;
    z-index: 1;
}
.detail-container .detail-bg .arrow-icon i{
    color: #333333;
    font-size: 55px;
    animation: scrooldown 1000ms linear 0s infinite;
}
@keyframes scrooldown {
      0% { transform: translateY(-5px);}
     50% { transform: translateY(5px);}
    100% { transform: translateY(-5px);}
}
.detail-container .detail-nav{
    margin-top: -100px;
    border-bottom: 5px solid #eaeaea;
    z-index: 2;
    padding-top: 40px;
    padding-bottom: 28px;
}
.detail-container .detail-nav .nav-list a{
    display: inline-block;
    padding: 12px 8px;
    text-align: center;
    width: 110px;
    border-radius: 0px;
    border: 1px solid #686767;
    color: #686767;
    margin: 8px 8px;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s linear 0s;
}
.detail-container .detail-nav .nav-list a:hover{
    background: #fcf1e7;
    color: #ef5049;
    box-shadow: none;
    border: 1px solid #ef5049;
}
.detail-container .detail-nav .nav-list a i{
    font-size: 28px;
}
/* 課程資訊 */
.detail-container .detail-info{
    position: relative;
    background: #fcf1e7; 
    border-left: solid 4px #22bcb9; 
    padding: 40px 20px 20px; 
    margin-bottom: 20px;
}
.detail-container .info-sign{
    position: absolute;
    top: -16px;
    right: 0px;
}
.detail-container .info-sign > div{
    font-size: 20px;
    transition: all 0.2s linear 0s;
}
.detail-container .info-sign > div:last-child:hover{
    background: #FFCD07;
}
/* 線上學習樣式 */
.detail-examlist{
    border: 2px solid #9ccd50;
}
@media screen and (max-width: 991.9px) {
    .detail-container .detail-bg{
        height: 300px;
    }
    .detail-container .detail-nav{
        margin-top: -40px;
    }
}
@media screen and (max-width: 575.9px) {
    .detail-container .detail-info{
        border-left-width: 0px;
        padding: 0px 0px 20px;
    }
    .detail-container .info-sign{
        width: 100%;
        position: relative;
    }
    .detail-container .info-sign > div{
        font-size: 18px;
        text-align: center;
    }
    .detail-container .detail-bg{
        height: 200px;
    }
    .detail-container .detail-nav .nav-list a{
        margin: 6px 4px;
        font-size: 17px;
        width: 100px;
    }
    .detail-container .detail-nav h1{
        font-size: 24px;
    }
    .detail-container .intro,
    .detail-container .intro p{
        font-size: 16px;
    }
}
/* ---------- 單一講者介紹頁 ---------- */
.leader-container .leader-info{
    background: #F7F2DC;
}
.leader-info .cover-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 360px;
    position: relative;
}
.follow-bar{
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #000;
    opacity: 0.7;
    width: 100%;   
}
.follow-bar a{
    color: #ffffff;
    display: inline-block;
    border: 1px solid #ffffff;
    text-align: center;
    padding: 8px 20px;
    transition: all 0.4s linear 0s;
}
.follow-bar a:hover{
    border-radius: 40px;
}
.leader-container .course-card{
    background: #F7F7F7;
}
.leader-container .course-card .card-body{
    margin-top: 8px!important;
}
/* ---------- 樂購好物 ---------- */
/*單一列表樣式*/
.product-list .product-box{
    margin-bottom: 36px;
}
.product-list .product-box-img{
    flex: 0 0 195px;
    height: 195px;
    border: 1px solid #c5c4c4;
    margin-right: 24px;
    transition: all 0.2s linear 0s;
    background: #ffffff;
}
.product-list .product-box-img:hover{
    border: 1px solid #EF5049;
}
.product-list h5{
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.product-list .description{
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.btn-buy{
    border: 1px solid #a4a4a4;
    color: #464646;
    background: #fbfbfb;
    font-size: 15px;
    padding: 7px 20px;
    border-radius: 4px;
    transition: all 0.2s linear 0s;
}
.btn-buy:hover {
    background: #ef5049;
    border: 1px solid #ef5049;
    color: #fff;
}
/* 側邊輪播商品樣式 */
.sidebar-slider{
    background: #f4f4f4;
    border: 1px #d9d9d9 solid;
    padding: 12px 16px;
}
.shop-slider .product-box-img{
    border: 1px solid #e5e5e5;
    background: #ffffff;
}
.sidebar-slider .slick-slider {
    margin-bottom: 0px;
}
/* 側邊選單 */
.sidebar-menu{
    border: 1px #d9d9d9 solid;
    padding: 12px 16px;
}
.sidebar-menu .accordion-item {
    border-width: 0px;
}
.sidebar-menu .accordion-button,
.sidebar-menu .accordion-one{
    font-size: 15px;
    line-height: 28px;
    padding: 0px;
    color: #636363;
}
.sidebar-menu .accordion-one a{
    color: #636363;
    transition: all 0.3s ease 0s;
}
.sidebar-menu .accordion-one a:hover{
    color: #EF5049;
}
.sidebar-menu .accordion-button::after {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    background-image: none;
    color: #636363;
    content: "\f067";
}
.sidebar-menu .accordion-button:not(.collapsed){
    color: #ef5049;
    background: #ffffff;
    box-shadow: none);
}
.sidebar-menu .accordion-button:not(.collapsed)::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    background-image: none;
    color: #ef5049;
    content: "\f068";
    transform: rotate(0deg);
}
.sidebar-menu ul.list-unstyled li a{
    color: #666666;
}
.sidebar-menu ul.list-unstyled li:hover a{
    color: #EF5049;
}
.sidebar-menu ul.list-unstyled li a:before{
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 15px;
    margin: 0 8px 0 0;
    transition: all 0.3s ease 0s;
}
.sidebar-menu ul.list-unstyled li:hover a:before{
    margin: 0 12px 0 0;
}
@media screen and (max-width: 991.9px) {
    .shop-slider .slider-box{
        margin-right: 8px;
        margin-left: 8px;
    }
}
@media screen and (max-width: 767.9px) {
    .shop-slider .slider-box{
        margin-right: 8px;
        margin-left: 8px;
    }
    .product-list h5{
        font-size: 17px;
        -webkit-line-clamp: 2;
    }
}
@media screen and (max-width: 575.9px) {
    .product-list .product-box{
        flex-wrap: wrap;
        margin-bottom: 48px;
    }
    .product-list .product-box-img{
        flex: 0 0 100%;
        height: auto;
        margin-bottom: 12px;
    }   
}
/* ---------- 單一商品介紹 ---------- */
.product-info{
    position: relative;
}
/* slider */
.slider-for{
    border: 1px solid #8f8e8e;
    background: #fbfbfb;
    margin-bottom: 20px;
}
.slider-item .slider-box{
    border: 1px solid #8f8e8e;
    margin-right: 4px;
}
.slider-item .slider-box.slick-current{
    border-color: #EF5049;
}
/* 庫存 */
.in-stock{
    font-size: 15px;
    line-height: 22px;
    color: #8B8B8B;
    position: absolute;
    right: 15px;
    background: #b1b1b1;
    padding: 0px 8px;
    line-height: 28px;
    border-radius: 4px;
    color: #ffffff;
}
.in-stock:before {
    content: "\f1b2";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    font-size: 13px;
    vertical-align: middle;
}
.product-title{ padding-right: 120px;}
.item-ebook .product-title{ padding-right: 0px;}
/* 書籍版本連結 */
.book-nav{
    display: table;
    width: 100%;
}
.book-nav a{
    display: table-cell;
    width: calc(100% / 3);
    line-height: 24px;
    font-size: 17px;
    font-weight: 600;
    padding: 8px;
    text-align: center;
    color: #565656;
    border: 1px solid #aeaeae;
    transition: all 0.2s linear 0s;
}
.book-nav a.ebook{ color: #3fa8db;}
.book-nav a.active{
    border-color: #EF5049;
    pointer-events: none;
}
.book-nav a:hover{
    border-color: #EF5049;
}
.book-nav a p{ margin-bottom: 4px;}
.book-nav a .ebook-tag{
    background: #3fa8db;
    color: #ffffff;
    padding: 0px;
    font-size: 12px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-block;
    line-height: 16px;
    text-align: center;
    position: relative;
    top: -3px;
    margin-right: 4px;
}
/* 加入購物車 */
.add-cart{
    background: #FCEDD8;
    padding: 12px 20px;
}
.item-ebook .add-cart{
    background: #E7F2F1;
}
.add-cart .amount{ 
    width: 68px;
    border-radius: 0px;
    padding: 5px 8px;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
}
.add-cart .btn-cart{
    display: inline-block;
    color: #fff;
    font-size: 15px;
    background: #ef5049;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 0;
    border-width: 0.5px;
    vertical-align: middle;
    transition: all 0.2s linear 0s;
}
.item-ebook .add-cart .btn-cart{
    background: #3084d3;
}
.add-cart .btn-cart:hover {
    color: #fff;
    background: #3084d3;
}
.item-ebook .add-cart .btn-cart:hover{
    background: #EF5049;
}
/* tab */
.shop-tab .tab-pane{
    padding: 20px;
    text-align: justify;
    line-height: 28px;
}
.shop-tab .tab-pane p{
    text-align: justify;
    line-height: 28px;
    margin-bottom: 12px;
}
.shop-tab .tab-pane img{
    width: 100%;
    max-width: 100%;
    margin: 16px auto;
}
@media screen and (max-width: 1199.9px) {
    .product-title{ 
        padding-right: 0px;
        margin-top: 36px;
    }
    .item-ebook .product-title{
        margin-top: 0px;
    }
}
@media screen and (max-width: 575.9px) {
    .shop-tab .tab-pane{
        padding: 16px;
        font-size: 15px;
    }
    .shop-tab .tab-pane p,
    .short-info{ 
        font-size: 15px;
        line-height: 24px;
    }
}
/* ---------- 購物車 ---------- */
/* 步驟顯示 */
.step-checkout{
    position: relative;
}
.step-checkout .progress {
    position: relative;
    border-radius: 0px;
    height: 8px;
    box-shadow: none;
    margin: 20px 0;
    background: #FFFFFF;
}
.step-checkout:first-child .progress {
    left: 50%;
    width: 50%;
}
.step-checkout:last-child .progress {
    width: 50%;
}
.step-checkout .progress-bar {
    width: 0px;
    box-shadow: none;
    background: #ffc7d6;
}
.step-checkout.complete .progress-bar {
    width: 100%;
}
.step-checkout.active .progress-bar {
    width: 50%;
}
.step-checkout:last-child.active .progress-bar {
    width: 100%;
}
.step-checkout .step-stepnum {
    color: #595959;
    font-size: 18px;
    font-weight: bold;
}
.step-checkout a.step-dot{
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    background: #ffc7d6;
    top: 52px;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
}
.step-checkout.disabled a.step-dot{
    pointer-events: none;
    background: #ffffff;
}
.step-checkout.complete a.step-dot:after,
.step-checkout.active a.step-dot:after{
    content: ' ';
    width: 14px;
    height: 14px;
    background: #e9567e;
    border-radius: 50px;
    position: absolute;
    top: 8px;
    left: 8px;
}
/* 結帳區塊 */
.checkout-box{
    background-color: #ffffff;
    padding: 12px 20px;
    overflow: hidden;
    border: 1px #e5e5e5 solid;
    margin-bottom: 36px;
}
.checkout-box .checkout-title{
    font-size: 18px;
    color: #565656;
    font-weight: bold;
}
.checkout-title.checkout-item{
    display: block;
    background-color: #f5f5f5;
    padding: 16px;
}
/* 購物車項目 */
.table-cart .th-cart-img{ width: 120px;}
.table-cart .th-cart-romove{ width: 24px;}
.cart-img img{ width: 100px;}
.table-cart thead tr th{
    text-align: center;
    padding: 12px;
    font-size: 17px;
    color: #565656;
    border-bottom: 2px solid #eaeaea!important;
}
.cart-qty,
.cart-total,
.cart-amount{
    text-align: center;
    color: #565656;
}
.cart-amount .amount{
    width: 60px;
    border-radius: 0px;
    padding: 4px 8px;
    margin: 0 auto;
}
.table-cart .cart-total{ 
    font-weight: bold;
    font-size: 18px;
}
/* 加購 */
.checkout-box.additional .form-check-label{
    letter-spacing: 1px;
    text-indent: 1px;
    color: #707070;
}
.checkout-box .checkout-title[aria-expanded="true"]:after{
    content: "\f0d7";
    margin-left: 8px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: all 0.2s linear 0s;
}
.checkout-box .checkout-title[aria-expanded="false"]:after{
    content: "\f0d8";
    margin-left: 8px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: all 0.2s linear 0s;
}
/* 結帳總額 */
.cart-total-box{
   background: #f8f8f8; 
}
.cart-total-box td{ padding: 4px;}
.cart-total-box td:first-child{
    width: 70%;
}
.cart-total-box td:last-child{
    width: 30%;
}
.cart-total-box td hr{
    margin-top: 20px 0px;
    border: 0;
    border-top: 1px solid #bbbbbb;
}
.cart-total-box .btn-buy{
    line-height: 22px;
}
.checkout-btn{
    background: #ef5049;
    color: #ffffff;
    padding: 6px 20px;
    font-size: 16px;
    letter-spacing: 2px;
    text-indent: 2px;
    transition: all 0.2s linear 0s;
}
.checkout-btn:hover{
    background: #ffc000;
    color: #444444;
}
/* 運送方式 */
.shipping .row > div:last-child{
    border-left: 1px dotted #a2a2a2;
}
@media screen and (max-width: 767.9px) {
    .table-cart thead{
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .table-cart tbody tr{
        display: block;
        border-width: 1px;
        margin-bottom: 24px;
    }
    .table-cart tbody td{ 
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0px;
    }
    .table-cart tbody td div{
        flex: 0 0 calc(100% - 88px);
        padding: 8px;
        text-align: left;
    }
    .table-cart tbody td:before{
        content: attr(data-label);
        display: flex;
        flex: 0 0 88px;
        text-transform: uppercase;
        color: #565656;
        font-weight: bold;
        align-self: stretch;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #DEE2E6;
        padding: 8px;
    }
    .table-cart tbody tr td:last-child{
        border-bottom-width: 0px;
    }
    .table-cart .cart-amount .amount {
        margin: 0px;
    }
    .table-cart tbody td.cart-total{
        font-size: 16px;
    }
    .table-cart tbody td.cart-romove:before{
        background: #f5f5f5;
    }
    .table-cart .cart-romove div{
        text-align: right;
        background: #f5f5f5;
        padding: 12px;
    }
    .table-cart .cart-romove a{
        margin: 4px 0px;
        padding: 4px 12px;
        border-radius: 4px;
        border: 1px solid #a4a4a4;
        color: #464646;
        background: #fbfbfb;
        font-size: 15px;
        transition: all 0.2s linear 0s;
    }
    .table-cart .cart-romove a:after{
        content: "刪除";
        margin-left: 8px;
    }
    .table-cart .cart-romove a:hover{
        background: #EF5049;
        color: #ffffff;
        border-color: #EF5049;
    }
/*
    .table-cart{
        border: 1px solid #dddddd;
    }
    .table-cart table{
        min-width: 600px;
    }
    .table-cart table tbody tr:last-child td{
        border-bottom-width: 0px;
    }*/
    .shipping .row > div:last-child{
        border-left-width: 0px;
        border-top: 1px dotted #a2a2a2;
    }
}
@media screen and (max-width: 575.9px) {
    .checkout-box div{
        font-size: 15px;
    }
    .table-cart tbody td.cart-total{
        font-size: 15px;
    }
}
/* ---------- 學員中心:個人頁面&編輯 ---------- */
/* 左側導覽列 */
.member-card{
    border-top: 4px solid #ef5049;
    border-radius: 0px;
}
.member-img img{
    border-radius: 50%;
}
.member-img{
    border-bottom-width: 0px;
    border-top-width: 0px;
    text-align: center;
}
.member-level{
    background-color: #ef5049;
    text-align: center;
    font-size: 15px;
    padding: 10px 16px;
    color: #ffffff;
    letter-spacing: 2px;
    text-indent: 2px;
    border-bottom-width: 0px;
    border-top-width: 0px;
}
.member-card .list-group-item-action{
    padding: 12px 40px 12px 16px;
    color: #666666;
}
.member-card .list-group-item-action:first-child{
    border-top-width: 0px;
}
.member-card .list-group-item-action:hover{
    color: #EF5049;
    background-color: #f2f1f1;
}
.member-card .list-group-item-action.active{
    background-color: #f2f1f1;
    border-color: rgba(0,0,0,.125);
}
.member-card .list-group-item-action i{
    width: 32px;
    text-align: center;
    margin-right: 8px;
}
.member-card .badge-num{
    position: absolute;
    top: 50%;
    right: 16px;
    text-align: right;
    transform: translateY(-50%);
    font-size: 13px;
    color: #454545;
    font-family: Verdana;
}
/* 個人資訊 */
.table-member{
    border: 1px solid #dddddd;
}
.table-member tbody tr:nth-child(odd){
    background-color: #f5f5f5;
}
.table-member tbody tr td:first-child{
    min-width: 140px;
    width: 140px;
}
.table-member tbody tr td:nth-child(2){
    min-width: 180px;
}
.table-member tbody tr td{
    padding: 16px 20px;
    color: #565656;
}
.table-member img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
@media screen and (max-width: 575.9px) {
    .table-member tbody tr td:first-child{
        min-width: 88px;
        width: 88px
    }
    .table-member tbody tr td{
        padding: 12px 8px;
        font-size: 15px;
    }
    .table-member .form-control{
        font-size: 15px;
    }
    .table-member .d-flex.flex-wrap > span{
        width: 100%;
    }
    .table-member .upload-controls input{
        width: 200px;
    }
    .table-member .btn-buy{ 
        font-size: 14px;
        padding: 6px 20px;
    }
}
@media screen and (max-width: 359.9px) {
    .table-member .upload-controls input{
        width: 160px;
    }
}
/* ---------- 學員中心:收信箱&書櫃 ---------- */
.list-content{
    border: 1px solid #e5e5e5;
}
.list-box{
    display: flex;
    flex-wrap:nowrap;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 16px;
    transition: all 0.2s linear 0s;
}
.list-box:last-child{
    border-bottom-width: 0px;
}
.list-box:hover{
    background-color: #DFF1EC;
}
.list-box .list-img{
    flex: 0 0 140px;
}
.list-box .list-img img{
    border: 1px solid #c5c4c4;
    width: 110px;
}
.list-box .list-action{
    flex: 0 0 120px;
    padding-left: 8px;
}
/* 書櫃 */
.bookcase-search{
    padding: 16px 20px;
    background-color: #f8f8f8;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bookcase-search a.btn-buy{
    padding: 7px 20px;
    line-height: 22px;
}
@media screen and (max-width: 991.9px) {
    .list-box .list-action{
        flex: 0 0 100px;
    }
}
@media screen and (max-width: 575.9px) {
    .list-box{ flex-wrap:wrap;}
    .list-box .list-img{ flex: 0 0 112px;}
    .list-box .list-img img{ width: 100px;}
    .list-box .flex-grow-1{ 
        flex: 0 0 calc(100% - 112px);
    }
    .list-box .flex-grow-1 h5{ font-size: 17px}
    .list-box .list-action{ 
        flex: 0 0 100%;
        margin-top: 12px;
        padding-left: 0px;
    }
    .bookcase-search{ flex-wrap: wrap;}
    .bookcase-search > div{
        flex: 0 0 100%;
        margin-bottom: 8px;
    }
    .bookcase-search > div:last-child{
        margin-bottom: 0px;
    }
}
/* ---------- 學員中心:我的課程&追蹤清單 ---------- */
.member-nav > div{ 
    text-align: center;
    border: #e5e5e5 1px solid;
    transition: all 0.2s linear 0s;
}
.member-nav > div.active{
    background-color: #ECE8D9;
    border-color: #ECE8D9;
    pointer-events: none;
}
.member-nav > div:hover{
    background-color: #F7F7F7;
}
.member-nav > div a{
    display: block;
    font-weight: bold;
    letter-spacing: 4px;
    text-indent: 4px;
    color: #565656;
}
/* 課程區間搜尋 */
.myclub-search{
    padding: 16px 20px;
    background-color: #f8f8f8;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.myclub-search a.btn-buy{
    padding: 7px 20px;
    line-height: 22px;
}
.input-date{
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 我的課程&追蹤課程 card */
.following .course-card h5,
.myclub .course-card h5{
    font-size: 18px;
}
.following .course-card,
.following .card-footer,
.myclub .course-card,
.myclub .card-footer{
    background-color: #F2F2F2;
}
.following .card-footer,
.myclub .card-footer{
    margin: 0px 12px;
    padding: 12px 0px;
    border-top-width: 1px;
    text-align: center;
}
.myclub .card-footer{
    color: #EF5049;
    font-size: 15px;
}
.following .course-card .card-bg,
.myclub .course-card .card-bg{
    height: 180px;
}
.myclub .course-card{
    position: relative;
}
.myclub .course-flag{ 
    display: inline-block;
    position: absolute;
    top: 16px;
    left: -12px;
    padding: 4px 12px;
    width: 72px;
    font-size: 15px;
    color: #ffffff;
    background: #ef5049;
    z-index: 3;
}
.myclub .course-flag:after{
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 8px transparent;
    border-right: solid 12px #99211c;
}
/* leader box */
.follow-box{
    border: 1px #b4b4b4 solid;
    text-align: center;
    padding: 16px;
}
@media screen and (max-width: 1199.9px) {
    .myclub-search{ flex-wrap: wrap;}
    .myclub-search > div{ 
        flex: 0 0 100%;
        margin-bottom: 8px;
    }
    .myclub-search > div:last-child{
        margin-bottom: 0px;
        text-align: right;
    } 
}
@media screen and (max-width: 575.9px) {
    .follow-box{ padding: 12px;}
    .following .course-card h5,
    .myclub .course-card h5,
    .member-nav > div a{
        font-size: 17px;
    }
    .follow-box .btn-more,
    .following .course-card .btn-more{
        font-size: 14px;
        padding: 4px 12px;
        letter-spacing: 0px;
    }
    .input-date{ flex-wrap: wrap;}
    .input-date > div.input-group{
        flex: 0 0 100%;
        margin-bottom: 8px;
    }

}
/* ---------- 學員中心:折價券 ---------- */
.table-coupon{
    border: 1px solid #dddddd;
}
.table-coupon thead th{
    padding: 16px 12px;
    font-size: 14px;
    font-weight: bold;
    border-color: #dddddd!important;
}
.table-coupon tbody tr:nth-child(odd){
    background-color: #F5F5F5;
}
.table-coupon tbody tr td{
    padding: 16px 12px;
    color: #565656;
}
.table-coupon .coupon-price,
.table-coupon .coupon-use{
    width: 100px;
    min-width: 100px;
}
@media screen and (max-width: 1199.9px) {
    .table-coupon thead{
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .table-coupon tbody tr{ display: block;}
    .table-coupon tbody tr td{ 
        display: flex;
        flex-wrap: nowrap;
        padding: 12px;
        border-style: dotted;
        font-size: 15px;
    }
    .table-coupon tbody td:before{
        content: attr(data-th);
        display: flex;
        flex: 0 0 88px;
        text-transform: uppercase;
        color: #333333;
        font-weight: bold;
    }
    .table-coupon tbody tr:last-child td{
        border-bottom-width: 1px;
    }
    .table-coupon tbody tr:last-child td:last-child{
        border-bottom-width: 0px;
    }
}
@media screen and (max-width: 575.9px) {
    .table-coupon tbody td:before{
        flex: 0 0 76px;
    }
}
/* ---------- 學員中心:購買明細 ---------- */
.purchased-box{
    border: 1px solid #dddddd;
    border-top: 2px solid #ef5049;
}
.purchased-header{
    background-color: #F8F8F8;
    border-bottom: 1px solid #dddddd;
}
.purchased-header > div{
    display: inline-block;
    margin: 4px 8px 4px 0px;
}
.purchased-tag{
    display: inline-block;
    border-radius: 30px;
    padding: 4px 12px;
    font-size: 15px;
}
.purchased-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F1F1F1;
    border-top: 1px solid #dddddd;
}
.purchased-footer .btn-more{
    background: #ffffff;
}
.purchased-footer .btn-more:hover{
    background-color: #EF5049;
}
.purchased-items{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dddddd;
}
.p-items-img,
.p-items-name,
.p-items-price{
    padding: 12px;
}
.purchased-items:last-child{
    border-bottom-width: 0px;
}
.purchased-items .p-items-name{
    align-items: start;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.purchased-items .p-items-name p{
    text-align: justify;
}
.purchased-items .p-items-img{
    flex: 0 0 120px;
}
.purchased-items .p-items-img img{
    border: 1px solid #e5e5e5;
    width: 100px;
}
.purchased-items .p-items-price{
    flex: 0 0 108px;
}
.p-items-name{
    align-self: stretch;
    border: 1px solid #dddddd;
    border-width: 0px 1px;
}
/* 訂單明細 */
.purchased-detail .purchased-header{
    line-height: 28px;
}
.purchased-detail .purchased-footer{
    text-align: right;
    justify-content: end;
}
@media screen and (max-width: 575.9px) {
    .purchased-header,
    .purchased-footer{ 
        font-size: 15px;
    }
    .purchased-footer .btn-more,
    .purchased-tag{
        font-size: 14px;
    }
    .purchased-items .p-items-name p:first-child{
        font-size: 15px;
    }
    .purchased-items .p-items-name p:last-child{
        font-size: 13px;
    }
    .purchased-footer{ flex-wrap: wrap;}
    .purchased-footer > div{
        flex: 0 0 100%;
    }
    .p-items-img,
    .p-items-name,
    .p-items-img{
        padding: 8px;
    }
    .purchased-items .p-items-img{
        flex: 0 0 88px;
    }
    .purchased-items .p-items-img img{
        width: 80px;
    }
    .purchased-items .p-items-price{
        flex: 0 0 88px;
        font-size: 14px;
    }
}
@media screen and (max-width: 399.9px) {
    .purchased-items{ flex-wrap: wrap;}
    .purchased .purchased-items .p-items-img{
        flex: 0 0 68px;
    }
    .purchased .purchased-items .p-items-img img{
        width: 60px;
    }
    .purchased .purchased-items .p-items-name{
        flex: 0 0 calc(100% - 76px);
    }
    .purchased .purchased-items .p-items-price{
        text-align: right;
        padding: 4px 12px;
    }
    .purchased-event .purchased-items .p-items-img,
    .purchased-event .purchased-items .p-items-name,
    .purchased-items .p-items-price{ 
        flex: 0 0 100%;
    }
    .purchased-event .purchased-items .p-items-img img{
        width: 100%;
        max-width: 100%;
    }
    .p-items-name{
        border-width: 0px;
    }
}

.AAA {
    pointer-events: none;
}

.bg-breadcrumb {
  background-image: url(/courseFront/static/images/bg5.jpg);
}
.bg-breadcrumb1 {
  background-image: url(/courseFront/static/images/cover/c13.jpg);
}
.bg-breadcrumb2 {
  background-image: url(/courseFront/static/images/cover/creator7.jpg)
}
.bg-breadcrumb3 {
  background-image: url(/courseFront/static/images/cover/c15.jpg)
}
.bg-breadcrumb4 {
  background-image: url(/courseFront/static/images/cover/creator1.jpg)
}
.bg-breadcrumb5 {
  background-image: url(/courseFront/static/images/cover/c16.jpg)
}
.bg-breadcrumb6 {
  background-image: url(/courseFront/static/images/cover/creator2.jpg)
}
.bg-breadcrumb7 {
  background-image:url(/courseFront/static/images/bg10.jpg);
}
.bg-breadcrumb8 {
  background-image: url(/courseFront/static/images/bg6.jpg);
}
.bg-breadcrumb9 {
  background-image: url(/courseFront/static/images/cover/c8.jpg)
}
.bg-breadcrumb10 {
  background-image: url(/courseFront/static/images/video1.jpg);
}
.bg-breadcrumb11 {
  background-image: url(/courseFront/static/images/cover/video2.jpg)
}
.bg-breadcrumb12 {
  background-image: url(/courseFront/static/images/cover/video3.jpg)
}
.bg-breadcrumb13 {
  background-image: url(/courseFront/static/images/cover/c14.jpg)
}
.bg-breadcrumb14 {
  background-image: url(/courseFront/static/images/cover/c11.jpg)
}
.bg-breadcrumb15 {
  background-image: url(/courseFront/static/images/cover/c3.jpg)
}
.bg-breadcrumb16 {
  background-image: url(/courseFront/static/images/cover/c12.jpg)
}
.bg-breadcrumb17 {
  background-image: url(/courseFront/static/images/cover/c10.jpg)
}
.bg-breadcrumb18 {
  background-image:url(/courseFront/static/images/bg9.jpg);
}
.bg-breadcrumb19 {
  background-image:url(/courseFront/static/images/bg7.jpg);
}
.bg-breadcrumb20 {
  background-image: url(/courseFront/static/images/cover/c9.jpg)
}
.bg-breadcrumb21 {
  background-image: url(/courseFront/static/images/cover/c17.jpg)
}
.bg-breadcrumb22 {
  background-image:url(/courseFront/static/images/bg4.jpg);
}
.bg-breadcrumb23 {
  background-image: url(/courseFront/static/images/cover/creator5.jpg)
}
.bg-breadcrumb24 {
  background-image: url(/courseFront/static/images/cover/creator3.jpg)
}
.bg-breadcrumb25 {
  background-image: url(/courseFront/static/images/cover/creator4.jpg)
}
.bg-breadcrumb26 {
  background-image: url(/courseFront/static/images/bg3.jpg)
}

.card-bg-2 {
  background-size: cover;
  background-position: center;
}
.custom-style1{
  white-space:nowrap;
}
.custom-style2{
  margin: 0px auto; text-align: center
}
.custom-style3{
  margin: auto;
}
.custom-style4{
  white-space: pre-wrap;
}
.custom-style5{
  color:red
}
.custom-style6{
  height: 320px;
}