@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');
/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');

.course_main{
    width: 90%;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}
.course_main > h1{
    width: 100%;
    border-bottom: 2px solid #F2DE99;
    text-align: center;
    color: #252839;
}
.course_main > h1 span{
    display: inline-block;
    letter-spacing: 5px;
    padding-left: 5px;
    box-sizing: border-box;
    border-bottom: 5px solid #E98C24;
}

.course_form{ width: 100%; }
.course_box{
    width: 98%;
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.course_content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

/* 課程列表 */
    /* 排序、搜尋 */
    .course_filterBox{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 20px auto;
    }
    .course_search{
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .course_search > input{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;
        display: block;
        width: 90%;
        margin: 0.25rem 2% 0.25rem 0;
        background-color: #FFF;
        border-bottom: 1px solid #CCC;
        padding: 0.5rem;
        box-sizing: border-box;
        font-size: 1.25rem;
        transition: all .3s;
    }
    .course_search > input:focus,
    .course_search > input:not(:placeholder-shown){ background-color: #EAEAEA; }
    .course_search > a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        border: 1px solid #f44336;
        background-color: #f44336;
        box-sizing: border-box;
        color: #fff;
        font-size: 1.25rem;
        border-radius: 50%;
        cursor: pointer;
        transition: all .5s;
    }
    .course_search > a:hover{
        background-color: #fff;
        color: #f44336;
    }
    .course_select{
        width: 18%;
        margin: 0 1%;
        padding: 5px 5px 5px 18px;
        box-sizing: border-box;
        font-size: 1.25rem;
        border-radius: 5px;
        border: 1px solid #99999f;
        color: #666666;
        cursor: pointer;
        text-align: center;
    }
    .coursePage_arrowbtn_number{ margin-right: 5px; }

    /* 關鍵字 */
    .courseKeywords_main{
        width: 100%;
        margin-bottom: 20px;
    }
    .courseKeywords_main ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .courseKeywords_main ul li{
        display: inline-block;
    }
    .courseKeywords_main ul li a{
        display: inline-block;
        padding: 5px 10px;
        box-sizing: border-box;
        margin-right: 5px;
        margin-bottom: 5px;
        background-color: #ffffff;
        color: #252839;
        border: 2px solid #252839;
        font-weight: bold;
        transition: all .3s;
    }
    .courseKeywords_main ul li .courseKeywords_click{
        background-color: #252839;
        color: #fff;
    }
    .courseKeywords_main ul li a:hover{
        background-color: #252839;
        color: #fff;
    }

    /* 頁碼選擇 */
    .coursePage_main{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10px;
    }
    .coursePage_arrowbtn_box{
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
    }
    .coursePage_arrowbtn{ display: inline-block; transition: all .3s;}
    .coursePage_arrowbtn span{
        display: inline-block;
        padding: 5px;
        box-sizing: border-box;
        color: #000;
        border: 1px solid #000;
    }
    .coursePage_arrowbtn_end span{
        background-color: #EAEAEA;
        color: #aeaeae;
        border: 1px solid #aeaeae;
    }
    .coursePage_arrowbtn:hover span{
        color: #fff;
        background-color: #000;
    }

    /* 課程區塊 */
    .course_prodsell{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
    }
    .course_prodsell_box{
        width: calc(100% / 3);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        margin: 40px auto 20px;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
    }

    /* 以下圖片設定
    .course_prodsell_box_img{
        width: 49%;
        margin-right: 1%;
        position: relative;
        display: block;
        transition: all .5s;
    }
    .course_prodsell_box_img > div{
        width: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 200px;
        transition: all .3s;
    }
    .course_prodsell_box_img > span{
        position: absolute;
        bottom: 0;
        background-color: rgba(0,0,0,.6);
        width: 100%;
        padding: 5px 5px 5px 10px;
        box-sizing: border-box;
        color: #fff;
        letter-spacing: 5px;
    }
    .course_prodsell_box_img > i{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: scale(0.5) rotate(180deg) translate(-50%,-50%);
        font-size: 2.5rem;
        display: block;
        opacity: 0;
        color: #fff;
        transition: all .3s;
        background-color: rgba(0,0,0,.5);
        padding: 20px;
        box-sizing: border-box;
        border-radius: 50%;
    }
    .course_prodsell_box_img:hover i{
        transform: scale(1) translate(-50%,-50%);
        opacity: 1;
    }*/


    /* 屬性標籤 */
    .course_prodsell_box_detaliTag{
        display: inline-block;
        position: absolute;
        top: -20px;
        padding: 5px 10px 5px 15px;
        background-color: #252839;
        box-sizing: border-box;
        color: #fff;
        letter-spacing: 5px;
        left: 10px;
        border-radius: 0 10px 0 0;
    }


    /* 課程簡述 */
    .course_prodsell_box_detali{
        width: 90%;
        position: relative;
        border: 2px solid #d7d7d7;
        box-sizing: border-box;
        padding: 5px;
        box-sizing: border-box;
    }
    .course_prodsell_box_detali h2{
        width: 100%;
        border-bottom: 2px solid #333;
        color: #252839;
        margin-bottom: 10px;
        font-size: 1.2rem;
        line-height: 2rem;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
    }
    .course_prodsell_box_detali p{
        width: 100%;
        margin-bottom: 10px;
    }

    /* 詳細說明按鈕 */
    .course_prodsell_box_detaliBtn{
        width: 10%;
        background-color: #f44336;
        color: #fff;
        padding: 5px 10px;
        box-sizing: border-box;
        border: 2px solid #f44336;
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .course_prodsell_box_detaliBtn:hover{
        background-color: #fff;
        color: #f44336;
    }
    .course_prodsell_box_detaliBtn > span{
        display: inline-block;
        -webkit-writing-mode: vertical-lr;
        font-size: 1.25rem;
        letter-spacing: 5px;
    }


    /* 頁碼數字選擇 */
    .coursePageNumber_main{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .coursePageNumber_box a{
        color: #252839;
        display: inline-block;
        margin: 0 5px;
        transition: all .3s;
    }
    .coursePageNumber_box .coursePageNumber_box_click{ color: #f44336; }
    .coursePageNumber_box a:hover{
        color: #f44336;
    }
    .coursePageNumber_arrowbtn{
        display: inline-block;
        margin: 0 10px;
        color: #000;
        transition: all .3s;
    }
    .coursePageNumber_arrowbtn:hover{
        color: #f44336;
    }
    .coursePageNumber_arrowbtn_end{
        color: #aeaeae;
    }
@media all and (max-width: 1120px){
    .course_prodsell_box{ width: 50%; }
}
@media all and (max-width: 850px){

    .course_main{
        width: 95%;
    }

    /* 課程列表、課程列表 */
    .course_search{ width: 100%; }
    .course_select{
        width: 48%;
        margin: 20px auto 0;
    }
    .course_prodsell_box_img,
    .course_prodsell_box_detali{
        width: 100%;
        margin: 0 auto;
    }
    .course_prodsell_box_detaliBtn{ width: 100%; }
    .course_prodsell_box_detaliBtn > span{ -webkit-writing-mode: initial; }

    .coursePageNumber_main{ justify-content: center; }
}
@media all and (max-width: 550px){
    .course_contentField h4,
    .course_contentField p{
        width: 100%;
    }
    .course_search > input{
        width: 80%;
    }
    .course_prodsell_box{ width: 100%; }
}