@charset "utf-8";
/***************************************
    copyright by MakeWeb.com.tw 
***************************************/
/*.course_list .tab_title_box {
	margin: 0;
	padding: 20px 0 60px 0;
}*/
.filter_box {
    display: flex;
    /*margin: 0px auto;*/
    padding: 6px 0;
    /*flex-wrap:wrap;*/
    justify-content: center;
    gap: 2px;
    /*align-items: center;*/
}
.filter_box > div {
    flex-shrink: 0;
}

.course_list figure {
    margin: 24px 8px 0;
    padding: 20px 26px;
    background: #f4f0ee;
    border-left: 12px solid #583052;
    /*align-items:flex-end;*/
    /*box-shadow: 2px 2px 3px rgba(20%,20%,40%,0.5);*/
    /*box-shadow: 0px 0px 3px 2px #DDD;*/
}
.course_list figure .title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.course_list figure h3 {
    margin: 0;
}
.course_list figure span {
    flex-shrink: 0;
    margin: 4px 2px;
}

.course_list figure .title .status {
    /*flex-shrink: 0;*/
}
.course_list figure .content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.content_l_title {
}
.content_l_title p {
    color: #888;
}
.content_l_title .content_subtitle {
    font-weight: bolder;
    color: #777;
}
.course_list figure .content_r_box {
    flex-shrink: 0;
}
.course_list figure .content_r_box a {
    float: right;
}
.course_list figure.day {
    border-left: 12px solid #7fcfeb;
}
.course_list figure.night {
    border-left: 12px solid #777;
}
.course_list figure .note {
    color: red;
    clear: both;
}
.course_list figure.is_hidden {
    display: none;
}
/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
/* Portrait and Landscape */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}*/

/*iPad Pro*/
@media screen and (max-width: 1279px) {
}

/*iPad*/
@media screen and (max-width: 1023px) {
}

/*iPhone*/
@media screen and (max-width: 767px) {
    .course_list figure {
        padding: 10px 15px;
    }
    .course_list figure .content {
        flex-direction: column;
        align-items: revert;
        gap: 20px;
    }
    .btn {
        padding: 8px 20px;
    }
}

.promo_tag { display:inline-block; padding:1px 6px; margin-left:4px; font-size:0.85em; border-radius:10px; color:#fff; }
.promo_tag.promo_early_bird { background:#5cb85c; }
.promo_tag.promo_limited    { background:#f0ad4e; }