body{
    background: url(../images/bg.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.custom_content img{
    max-width: 100%!important;
    height: auto!important;
}
.custom_content p{
    letter-spacing:.1rem;
    line-height: 2;
}

.text-brand1{color: #6AC2B3;}
.text-brand2{color: #419f8f;}
.text-brand3{color: #f39100;}
.text-brand4{color: #F5A85D;}
.text-brand5{color: #A6CE84;}

.bg-brand1{background-color: #6AC2B3;}
.bg-brand2{background-color: #419f8f;}
.bg-brand3{background-color: #f39100;}
.bg-brand4{background-color: #F5A85D;}
.bg-brand5{background-color: #A6CE84;}
.bg-brand-gradient{
    background-image: -webkit-linear-gradient(330deg, #ffe8cc 0%, #d2ffee 100%);
    background-image: -o-linear-gradient(330deg, #ffe8cc 0%, #d2ffee 100%);
    background-image: linear-gradient(120deg, #ffe8cc 0%, #d2ffee 100%);
}

.border-brand1{border-color: #6AC2B3!important;}
.border-brand2{border-color: #419f8f!important;}
.border-brand3{border-color: #f39100!important;}
.border-brand4{border-color: #F5A85D!important;}
.border-brand5{border-color: #A6CE84!important;}

/* 輪播圖 */
.myBanner{
    max-height: 75vh;    
}

.btn-brand1{
    background-color: #6AC2B3;
    color:white;
    margin: 0.25rem 0.125rem;
}
.btn-brand1:hover{
    background-color: #419f8f;
    color:white;
}

.logo{
    height: 4rem;
}
.nav_icon{
    max-width: 1.5rem;
}
.nav-link:hover{
    color: #6AC2B3!important;
}
.rounded_custom1{
    border-radius: 1rem;
}
.mask{
    width: 100%;
    height: 10rem;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
}
.card_img{
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    transition: transform .2s;
}
.card:hover .card_img{
    transform: scale(1.3);
}
.activity_title{
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    /* white-space: nowrap; */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    
}
.activity_text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.3rem;     /* fallback */
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
}
.course_icon{
    max-width: 4rem;
}
.course01_step{
    height: 6rem;
}
.swiper-pagination-bullet-active{
    color: #419f8f;
}

.swiper {
    height: auto;
  }

.paginate svg{
    max-width: 2rem;
}
.paginate a{
    color:#419f8f;
    text-decoration: none;
}
.dropdown-item:focus{
    color: #f39100;
    background: transparent;
}
.story_txt{
    width: 100%;
    height: 20rem;
    overflow: hidden;
}
.story_cover{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* transition: background-size .5s;
    -moz-transition:  background-size .5s;
    -ms-transition:  background-size .5s;
    -o-transition:  background-size .5s;
    -webkit-transition:  background-size .5s; */
}

.story_cover:hover{
    background-size: contain;
    /* transition: background-size .5s;
    -moz-transition:  background-size .5s;
    -ms-transition:  background-size .5s;
    -o-transition:  background-size .5s;
    -webkit-transition:  background-size .5s; */
    /* transform: scale(.9); */
}
.story_cover h2{
    background-color: rgba(255, 255, 255, .9);
    border-radius: 1rem;
    box-shadow: 0rem .05rem .2rem #333;
    /* color: #6AC2B3; */
    color: #419f8f;
    
    /* color: #f39100; */
    /* color: #F5A85D; */
    /* color: #A6CE84; */

    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}
.story_cover:hover h2{
    color: #ffffff;
    background-color: transparent;
    text-shadow: 0rem 0.01rem 0.1rem #6AC2B3;
    box-shadow: none;

    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}

.teacher_cover{
    border-radius: 1rem 1rem 0 0;
    height:15rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    transition: all .5s;
    -moz-transition:  all .5s;
    -ms-transition:  all .5s;
    -o-transition:  all .5s;
    -webkit-transition:  all .5s;
}

.teacher_cover:hover{
    background-size: 105% auto;
    transition: all .5s;
    -moz-transition:  all .5s;
    -ms-transition:  all .5s;
    -o-transition:  all .5s;
    -webkit-transition:  all .5s;
    /* transform: scale(.9); */
}

.fast_article_cover{
    border-radius: 1rem 1rem 0 0;
    height:10rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    transition: all .5s;
    -moz-transition:  all .5s;
    -ms-transition:  all .5s;
    -o-transition:  all .5s;
    -webkit-transition:  all .5s;
}

.fast_article_cover:hover{
    background-size: 105% auto;
    transition: all .5s;
    -moz-transition:  all .5s;
    -ms-transition:  all .5s;
    -o-transition:  all .5s;
    -webkit-transition:  all .5s;
    /* transform: scale(.9); */
}

.fast_article_text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.3rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}



/* story title */
.g-font01{
    font-family: 'Noto Sans TC', sans-serif;
}
.g-font02{
    font-family: 'Noto Serif TC', serif;
}

.paginate > nav > div:first-child,
.paginate > nav > div:nth-child(2) > div:first-child{
    display: none;
}
.custom_scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

.footer_logo{
    max-width: 12rem;
}

.w-md-75{
    width:75%
}


@media screen and (max-width:1400px){
    .teacher_cover{
        height:12rem;
    }
}
@media screen and (max-width:1200px){
    .teacher_cover{
        height:10rem;
    }
}
@media screen and (max-width:992px){
    .teacher_cover{
        height:7rem;
    }
    .w-md-75{
        width:100%
    }
}
@media screen and (max-width:768px){
    .teacher_cover{
        height:12rem;
    }
}
@media screen and (max-width:576px){
    .teacher_cover{
        height:10rem;
    }
}
@media screen and (max-width:480px){
    .teacher_cover{
        height:8rem;
    }
    .course_list{
        font-size: 1.0rem;
    }
}