@charset "utf-8";
/* CSS Document */
html,body {
    height: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{width:100%;font-family:"微軟正黑體",Verdana, Geneva, sans-serif;}
a{text-decoration:none;outline:none;color: #6c757d;}
a:hover {text-decoration: none;}
li{list-style:none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.clear{clear:both;line-height:0;font-size:0px;display:block;}
.margin-t5{margin-top:5px;}.margin-t10{margin-top:10px;}.margin-t15{margin-top:15px;}.margin-t20{margin-top:20px;}.margin-t25{margin-top:25px;}.margin-t30{margin-top:30px;}
.margin-b5{margin-bottom:5px;}.margin-b10{margin-bottom:10px;}.margin-b15{margin-bottom:15px;}.margin-b20{margin-bottom:20px;}.margin-b25{margin-bottom:25px;}.margin-b30{margin-bottom:30px;}
.padding-t30{padding-top:30px;}
.p-0_5{padding:.15rem!important;}
.p-2_5{padding:.75rem!important;}
.pt-2_5,.py-2_5{padding-top:.75rem!important;}
.pb-2_5,.py-2_5{padding-bottom:.75rem!important;}
.pr-2_5,.px-2_5{padding-right:.75rem!important;}
.pl-2_5,.px-2_5{padding-left:.75rem!important;}
.tooltip{font-family:"微軟正黑體",Verdana, Geneva, sans-serif;}
.highlight{background:yellow;}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fab {     display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome 5 Brands';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
.fas {
  display: inline-block;
    font: normal 900 normal 14px/1 'Font Awesome 5 Free';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
.fa-home:before{content:"\f015";}
.fa-bars:before{content:"\f0c9";}
.fa-industry:before{content:"\f275";}
.fa-chalkboard-teacher:before{content:"\f51c";}
.fa-graduation-cap:before{content:"\f19d";}
.fa-address-card:before{content:"\f2bb";}
.fa-film:before{content:"\f008";}
.fa-thumbs-up:before{content:"\f164";}
.fa-university:before{content:"\f19c";}
.fa-briefcase:before{content:"\f0b1";}
.fa-newspaper:before{content:"\f1ea";}
.fa-search:before{content:"\f002";}
.fa-user:before{content:"\f007";}
.fa-user-circle:before{content:"\f2bd";}
.fa-lock:before{content:"\f023";}
.fa-sign-in-alt:before{content:"\f2f6";}
.fa-exclamation-circle:before{content:"\f06a";}
.fa-times:before{content:"\f00d";}
.fa-envelope:before{content:"\f0e0";}
.fa-mobile-alt:before{content:"\f3cd";}
.fa-phone:before{content:"\f095";}
.fa-user-tie:before{content:"\f508";}
.fa-user-lock:before{content:"\f502";}
.fa-map-marker-alt:before{content:"\f3c5";}
.fa-calendar-day:before{content:"\f783";}
.fa-city:before{content:"\f64f";}
.fa-user-plus:before{content:"\f234";}
.fa-user-edit:before{content:"\f4ff";}
.fa-globe:before{content:"\f0ac";}
.fa-user-graduate:before{content:"\f501";}
.fa-facebook-f:before{content:"\f39e";}
.fa-google-plus-g:before{content:"\f0d5";}
.fa-twitter:before{content:"\f099";}
.fa-line:before{content:"\f3c0";}
.fa-list-alt:before{content:"\f022";}
.fa-square:before{content:"\f0c8";}
.fa-angle-right:before{content:"\f105";}
.fa-angle-up:before{content:"\f106";}
.fa-angle-down:before{content:"\f107";}
.fa-angle-double-up:before{content:"\f102";}
.fa-angle-double-down:before{content:"\f103";}
.fa-angle-double-right:before{content:"\f101";}
.fa-info:before{content:"\f129";}
.fa-question:before{content:"\f128";}
.fa-comments:before{content:"\f086";}
.fa-handshake:before{content:"\f2b5";}
.fa-sitemap:before{content:"\f0e8";}
.fa-telegram-plane:before {content:"\f3fe";}
.fa-ellipsis-h:before{content:"\f141";}
.fa-check:before{content:"\f00c";}
.fa-trash-alt:before{content:"\f2ed";}
.fa-sliders-h:before{content:"\f1de";}
.fa-shopping-cart:before{content:"\f07a";}
.fa-cart-arrow-down:before{content:"\f218";}
.fa-shopping-basket:before{content:"\f291";}
.fa-youtube:before{content:"\f167";}
.fa-sync-alt:before{content:"\f2f1";}
.fa-sort:before{content:"\f0dc";}
.fa-star:before{content:"\f005";}
.fa-frown:before{content:"\f119";}
.fa-eye:before{content:"\f06e";}
.fa-heart:before{content:"\f004";}
.fa-shield-alt:before{content:"\f3ed";}
.fa-skull-crossbones:before{content:"\f714";}
.fa-hand-o-right:before {content: "\f0a4";}
.fa-plus:before { content: "\f067";}
.fa-clock-o:before { content: "\f017";}
.fa-times::before {content: "\f00d";}
.fa-line:before { content: "\f3c0"; }
.fa-telegram:before { content: "\f2c6"; }
.fa-book:before { content: "\f02d"; }
.fa-facebook-square:before {
  content: "\f082"; }
.fa-file:before {
  content: "\f15b"; }
  .fa-step-backward:before {
  content: "\f048"; }
  .fa-step-forward:before {
  content: "\f051"; }
  .fa-angle-left:before {
  content: "\f104"; }
.fa-angle-right:before {
  content: "\f105"; }
.fa-comment:before {
  content: "\f075"; }
.fa-camera:before {
  content: "\f030"; }
.fa-eye:before {
  content: "\f06e"; }
.fa-video:before {
  content: "\f03d"; }
.fa-envelope:before {
  content: "\f0e0"; }
  .fa-circle:before {
  content: "\f111"; }
@font-face{font-family:'FontAwesome';src:url('/css/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('/css/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('/css/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('/css/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('/css/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('/css/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/css/fonts/fa-brands-400.eot");
  src: url("/css/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("/css/fonts/fa-brands-400.woff2") format("woff2"), url("/css/fonts/fa-brands-400.woff") format("woff"), url("/css/fonts/fa-brands-400.ttf") format("truetype"), url("/css/fonts/fa-brands-400.svg#fontawesome") format("svg"); }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.flex-1 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.w-60 {
    width: 60% !important;
}
.h-auto {
    height: auto !important;
}
/* 免費/付費影音項目 */
.min-height423 {
    min-height: 455px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}
/* main.css */
.dark-bg {
    background: #232122;
}
.dark2-bg {
    background: #363636;
}
.purple-bg {
    background: #2D005D;
}
.gray-bg {
    background: #F2F2F2;
}
.green-bg {
    background: #00D09E;
}
.dark-green-bg {
    background: #01859E;
}
.lightblue-bg {
    background: #E7FDFE;
}
.white-bg {
    background: #ffffff;
}
.bought-bg {
    background: #808080 !important;
}
.light-yellow-bg {
    background: #FEFFED;
}
.light-purple-bg {
    background: #D1E2FF;
}
.light-purple-bg2 {
  background: #EAE0F9;
}
.yellow-bg {
    background: #FCFFE1 !important;
}
.darkdarkblue-bg {
    background: #010E2E;
}
.border-purple {
    border: 2px solid #554988  !important;
    background: transparent !important;
    transition: all .3s;
}
.border-purple:focus {
    outline: none;
}
.border-purple:hover {
    border: 2px solid transparent !important;
    color: #fff !important;
    background: #554988 !important;
}
.txt-white {
    color: #fff !important;
}
.txt-yellow-white {
    color: #FFFFEA !important;
}
.txt-yellow {
    color: #F3F202 !important;
}
.txt-light-yellow {
    color: #F8FFA2 !important;
}
.txt-light-blue {
    color: #C3FFFF !important;
}
.txt-red {
    color: #FF1751 !important;
}
.txt-dark-red {
    color: #C30101 !important;
}
.txt-purple {
    color: #4E0073 !important;
}
.txt-darkblue {
    color: #004EB9 !important;
}
.txt-darkdarkblue {
    color: #030461 !important;
}
.txt-blue {
    color: #2D00E7 !important;
}
.txt-blue2 {
    color: #4555FF !important;
}
.txt-black {
    color: #000 !important;
}
.txt-pink {
    color: #FB0081 !important;
}
.txt-gray {
    color: #525252 !important;
}
.txt-collected {
    color: #D02900 !important;
}
.txt-green {
    color: #007D8B !important;
}

.custom-user {
    color: #BAFFE8;
}
.teacher-user {
    color: #FFFFC2;
}
.telegram-color:hover {
    color: #26B0EE;
}
.facebook-color:hover {
    color: #44578F;
}
.line-color:hover {
    color: #01B900;
}
.heart-color:hover,
.heart-color.active {
    color: #DF5947;
}
.plus-color:hover,
.plus-color.active {
    color: #D02900;
    cursor: pointer;
}
.disabled {
    cursor: not-allowed;
}
.fwb {
    font-weight: bold;
}
.fz16 {
    font-size: 16px !important;
}
.fz18 {
    font-size: 18px !important;
}
.fz20 {
    font-size: 20px !important;
}
.fz22 {
    font-size: 22px !important;
}
.fz24 {
    font-size: 24px !important;
}
.fz30 {
    font-size: 30px !important;
}
.fz40 {
    font-size: 40px !important;
}
.fz50 {
    font-size: 50px !important;
}
.pb-100px {
    padding-bottom: 100px;
}
@media (max-width: 575px) {
    /*.fz30 {
        font-size: 18px !important;
    }*/
    .buy-btn {
        font-size: 18px !important;
    }
    .fz40 {
        font-size: 30px !important;
    }
}
/* avoid scrollbar */
.row {
    margin-right: -10px;
    margin-left: -10px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 10px;
    padding-right: 10px;
}
/* 麵包屑 */
.breadcrumb {
    background-color: transparent;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: '>';
}
@media (max-width: 767px) {
    .breadcrumb {
        font-size: 14px !important;
    }
}
/* 客製化 simplebar 捲軸 */
.simplebar-scrollbar:before {
    background: #fff !important;
}
.simplebar-content ul {
    padding-left: 20px;
}
.simplebar-content li {
    list-style: initial;
}
/* 頁籤內容高度限制 */
.tab-limit-height {
    height: 480px;
    overflow-y: auto;
}
@media (max-width: 991px) {
    .tab-limit-height {
        height: 200px;
    }
}
/* 頁碼 */
.advanced-page li > a {
    color: #FB0199;
    background-color: transparent;
    border: none;
    padding: 0.47rem;
}
/*.page-item:first-child span:first-child::before {
    content: '';
    display: inline-block;
    border-right: 10px solid;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid transparent;
}
.page-item:last-child span:first-child::before {
    content: '';
    display: inline-block;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid;
    border-top: 5px solid transparent;
}*/
.advanced-page  ul {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.advanced-page li.active {
    z-index: 2;
    padding: .5rem;
    line-height: 1.25;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.advanced-page li > a:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.pagination a[rel="next10"],
.pagination a[rel="prev10"]{display:none}
/*.advanced-page li > a[rel="start"]::before {
    content: "\f048";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.advanced-page li > a[rel="end"]::before {
    content: "\f051";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.advanced-page li > a[rel="prev"]::before {
    content: "\f104";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.advanced-page li > a[rel="next"]::before {
    content: "\f105";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

/* 影片資訊 */
@media (max-width: 991px) {
    .video-info .col-md-6 {
        text-align: center !important;
    }
}


/* GO TOP */
.goTop {
display:block;
position:fixed;
cursor:pointer;
right:10px;
bottom:10px;
z-index:100;
width:40px;
height:40px;
background-image:url(/images/icon-top.png?3f626122d4928d2afa2ee0e6e95520c9);
background-size:40px;
opacity:0;
transition:opacity .5s ease
}
.is-showed {
    opacity: 1;
}
.container,.wrap {
position:relative
}

.wrap {
max-width:1200px;
margin:0 auto;
}
.mw-885px {
    max-width: 885px;
    margin: 0 auto;
}
.wrapper--pages {
padding:0 10px
}
.sections {
padding:30px 0
}
.sections__title {
text-align:center;
font-size:22px;
margin-bottom:40px
}

.sections__title>span {
    display: inline-block;
    padding: 5px 10px;
    border-left: 9px solid #ffce47;
}

.pic {
display:inline-block
}

.pic>img {
width:100%
}

.buyCourse__image,.course__pic,.movies__container .cover,.mycourses__image {
position:relative;
overflow:hidden
}

.buyCourse__image>img,.course__pic>img,.movies__container .cover>img,.mycourses__image>img {max-width: 100%;/* max-width: 100%; */}

.buyCourse__image:after,.course__pic:after,.movies__container .cover:after,.mycourses__image:after {
content:"";
display:block;
position:absolute;
width:100%;
height:60%;
left:0;
bottom:0;
background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.65));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000",endColorstr="#a6000000",GradientType=0)
}

.course {
/* background-color:#fff; */
box-sizing:border-box
}

.item {
    background-color: #fff;
    overflow: hidden;
}

.course,.course__pic {
display:block;
/*max-height: 290px;*/
}

.min-height423 .course__pic {
    /* max-height: 290px; */
}
.course__pic>img {
-webkit-transform:scale(1);
transform:scale(1);
transition:-webkit-transform .5s ease;
transition:transform .5s ease;
transition:transform .5s ease,-webkit-transform .5s ease
}

.course__tag {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 105px;
    height: 105px;
    border-radius: 0;
}

.course__tag--now>span {
color: #fff;
}

.course__tag--now:after {
    border-top-color: #E70046;
}
.course__tag--now.free:after {
    border-top-color: #682EFE;
}
.course__tag>span {
position: absolute;
z-index: 2;
font-size: 18px;
top: 7px;
right: 7px;
font-weight: 700;
width: 36px;
height: 54px;
}
@media(max-width:575px) {
    .course__tag>span {
        top: 3px;
        right: 16px;
    }
}
.course__tag:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-right: none;
    border-bottom: none;
    border-top-width: 105px;
    border-top-style: solid;
    border-left: 105px solid transparent;
}

.course__text {
padding:15px
}

.course__main .info { display:block; width: 100%;padding-right:10px;/* border-right:1px solid #9599a2; */vertical-align:middle;color:#4f5767;box-sizing:border-box;}

.course__main .info__name {
display:inline-block;
font-size:22px;
font-weight:700;
}

.course__main .price {
    display: inline-block;
    width: 100%;
    /*padding-left: 10px;*/
    margin-left: 0;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}

.course__main .price>.priceNum {
display:block
}
.course__sub {
margin-top:10px
}

.course__sub .status {
display:inline-block;
width:100%;
vertical-align:middle;
color:#9599a2
}

.course__sub .status__time {
    display: inline-block;
    margin-right: 5px;
    width: 48%;
    text-align: center;
}

.course__sub .status__view {
    display: inline-block;
    width: 48%;
    text-align: center;
}
.course__sub .action {
display:none;
width:40%;
margin-left:-6px;
text-align:center;
vertical-align:middle
}
@media (min-width:768px) {
    .course:hover .course__pic>img {
    -webkit-transform:scale(1.15);
    transform:scale(1.15)
    }
}
.priceNum--actually {
    font-size: 22px;
    font-weight: 700;
    color: #008BD0;
}

/* loading */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #222222;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;
                transition: all 0.3s 1s ease-out;
    }


/* For CKeditor style to article */

blockquote
{
	font-style: italic;
	font-family: Georgia, Times, "Times New Roman", serif;
	padding: 2px 0;
	border-style: solid;
	border-color: #ccc;
    border-width: 0;
    padding-left: 20px;
	padding-right: 8px;
	border-left-width: 5px;
}

/* 右側浮動選單 */

.float-menu {
  position: fixed;
  width: 0;
  right: -42px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.float-menu .item {
  background: #ffffff;
  display: block;
  width: 80px;
  height: 40px;
  position: absolute;
  right: 13px;
  line-height: 40px;
  padding: 3px;
  margin-bottom: 5px;
  transition: all .3s;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.float-menu .item:nth-child(2) {
  margin-top: 45px;
}
.float-menu .item:nth-child(3) {
  margin-top: 90px;
}
.float-menu .item:nth-child(4) {
  margin-top: 135px;
}
.float-menu i {
  width: 20px;
  font-size:20px;
  margin-left: 12px;
}
.float-menu .item:hover {
  width: 150px;
}
.float-menu .item:hover, .float-menu .item:hover i {
  color: #ffffff !important;
}
.float-menu .item:hover .menu-text {
  opacity: 1;
}
.float-menu .menu-text {
  margin-left: 5px;
  color: #ffffff !important;
  opacity: 1;
}
.text-purple {
  color:#401686;
}
.bg-purple:hover {
  background: #401686;
}
.text-orange {
  color: #ff5b3b;
}
.bg-orange:hover {
  background: #ff5b3b;
}
.text-lightBlue {
  color: #4064ac;
}
.bg-lightBlue:hover {
  background: #4064ac;
}
.text-blue {
  color: #0084fc;
}
.bg-blue:hover {
  background: #0084fc;
}

/* 線上互動課程上課提醒視窗 Start. */
.online-box {
  /*width: 40%;*/
  margin: 0 auto;
  padding: 35px;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.online-button {
  font-size: 1em;
  padding: 7px 20px;
  color: #fff;
  font-size: 16px;
  border: 2px solid #1862cb;
  border-radius: 26px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
  background: #1862cb;
}

.online-button:hover {
  background: #123b76;
  color: #ffffff;
}

.online-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  display: none;
  z-index: 100;
/*   visibility: hidden; */
/*   opacity: 0; */
}
.online-overlay.active {
  display:block;
}
/* .online-overlay:target {
  visibility: visible;
  opacity: 1;
} */

.online-popup {
	margin: auto;
    padding: 5px;
    background-image: url(https://www.1111edu.com.tw/edm/test02/1.png);
    background-repeat: no-repeat;
    background-position: center center;
    color: #20486b;
    position: absolute;
    width: 500px;
    height: 500px;
    max-width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.online-popup h2 {
	text-align: center;
    margin-top: 280px;
    margin-bottom: 20px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
}

.online-popup .online-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.online-popup .online-close:hover {
  color: #c7c7c7;
}

.online-popup .online-content {
  max-height: 50%;
  font-size: 16px;
  line-height: 24px;
  overflow: auto;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}
/* 線上互動課程上課提醒視窗 End. */

/* 對齊 */
.text-average {
    text-align-last: justify;
    text-align: justify;
    text-justify: distribute-all-lines;
}