html,body{min-height: 100vh;overflow-x: hidden;}
    *{box-sizing: border-box;}
    a:hover{text-decoration: none;}


    body{background-color: #eee;font-family: '微軟正黑體'!important;}
    #logo{/*width: 20vw; display: flex;align-items: center;*/}
    #logo img{padding:20px 0 0 20px;}
    #warp{min-height: 740px;}
    header nav ul li a{display: block;padding:10px 0 10px 10px;border: 1px solid #542883;border-bottom-right-radius: 10px;border-top-right-radius: 10px;color: #542883;width: 90%;text-align: left;transition:.5s ease;opacity: 0.3;}
    header nav ul li a img{height: 30px;width: 30px;}
    header nav ul li a:hover{width: 100%;opacity: 1;border-right: 4px solid #542883;color: #542883;}
    .half_width{width: 45%;display: inline-block;}
    .bg_cover{background-repeat: no-repeat;background-size: cover;background-position: center;}
    #index_content{padding:20px ;}
    /*.index_box_section{border:2px solid #542883;border-radius: 10px;display: block;position: relative;overflow: hidden;}
    .index_box_section:before{position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;background-color: rgba(0,0,0,0.4);border-radius: 6px;transition:.5s ease;}
    .index_box_section h3{position: absolute;height: 100%;width: 100%;display:flex;align-items: center;top: 0;left: 0;margin: 0;text-align: center;justify-content: center;color: #fff;}
    .index_box_section:hover:before{background-color: transparent;}*/
    .index_video_box{padding-right: 20px;}
    .index_video_left_box{width: 42%;}

    .index_video_left_box a{height: 100%;display: flex;}
    .index_video_right_box{width: 58%;}

    .index_contact{margin-top: 40px!important;}
    .index_contact h3{position: relative;display: inline-block;padding-right: 20px;color: #542883;font-size: 20px;padding-top: 5px;}
    .index_contact h3:after{position: absolute;content: '';background-color: #542883;width: 4px;height: 30px;top: 5px;right: 0;}
    .index_contact .social_tab{color: #542883;text-align: center;height: 60px;position: relative;}
    .index_contact .social_tab i{font-size: 24px;transition:.5s ease;}
    .index_contact .social_tab h5{margin: 0;font-size: 14px;transition:.5s ease;position: relative;}
    .index_contact .social_tab h5:after{background-color: #542883;height: 4px;width: 60%;content: '';left: 20%;bottom: -5px;position: absolute;opacity: 0;transition: .5s ease;}
    .index_contact .social_tab:hover h5:after{opacity: 1;}
    .index_contact .social_tab:hover i{font-size: 32px;}
    .index_contact .social_tab:hover h5{font-size: 16px;}
    .social_tab.uk-grid-margin{margin-top: 10px;}





    .index_box_section{border-radius: 10px;display: block;position: relative;overflow: hidden;padding: 10px;height: 25vw;}
    .index_box_section:before{position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;background-color: rgba(255,255,255,0.3);border-radius: 6px;transition:.5s ease;}
    .index_box_section h3{height: 100%;width: 100%;display:flex;align-items: center;margin: 0;text-align: center;justify-content: center;color: #fff;color: #FFF;text-shadow: -1px 0 #81808e, 0 1px #81808e, 1px 0 #81808e, 0 -1px #81808e;font-size: 36px;letter-spacing: -10px;}
    html[lang="en-US"] .index_box_section h3{letter-spacing: 0px;}
    .index_video_left_box .index_box_section h3{height: 100%;}
    .index_border{border-radius: 10px;border:3px solid #fff;width: 100%;height: 100%;}
    .index_box_section_desc{border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;background-color: #aa9eaf;text-align: center;color: #fff;font-size: 26px;position: absolute;bottom: 0;left: 0;width: 100%;padding: 10px 0;transition:.5s ease;}
    .mob_index_img{display: none;}

    .index_box_section:hover:before{background-color: rgba(255,255,255,0);}
    .index_box_section:hover .index_box_section_desc{background-color: #6b5378;}



    .title_tag{position: relative;}
    .title_tag h4{color: #0f6db7;font-size: 36px;}
    .title_tag h5{color: #5f1a86;font-size: 48px;}
    .title_tag h6{color: #5f1a86;font-size: 24px;}
    .title_tag h4,.title_tag h5,.title_tag h6{text-align: center;font-weight: 800;width: 100%;margin: 0;}

    html[lang="en-US"] .title_tag h4{font-size: 28px;}
    html[lang="en-US"] .title_tag h5{font-size: 32px;}
    html[lang="en-US"] .title_tag h6{font-size: 28px;}



    .title_tag img{/*animation:rotate_img 3s infinite;animation-timing-function:linear;*/}
    .logged_info{position: absolute;width:100%;left: 0;top: 28%;}

    @keyframes rotate_img {
        100%  {transform: rotate(360deg);}
    }

    .pur_button{border:4px solid #9e87b3;padding: 5px;color: #9e87b3;background-color: #fff;display: inline-block;border-radius: 8px;font-weight: 800;margin: 5px auto;transition: .5s ease;}
    .pur_button img{width: 20px!important;margin: 0 10px;}

    .logined{display: block;padding: 10px;background-image: url(../images/r1.png);}
    .logined a{display: inline-block;color: #fff;width: 35%;margin-left: 10%;padding:5px 10px;text-align: center;}
    .logined .fa{font-size: 16px;margin-left: 10px;}

    .logined_setting{display: block;padding:30px 10px;background:#eeeeee;text-align: center;border-color: #9e87b3;border-left-width: 12px;border-style: solid;border-right: 0;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
    .distance_first{border-left-color: #543672;}
    .logined_setting h3{color: #a085b8;margin: 0;}
    .logined_setting h2{color: #543774;font-size: 50px;margin: 0;}
    .user_setting_button{font-size: 20px;color: #fff;}
    .user_setting_button:hover{color: #fff;}
    .logout_button{text-align: center;width: fit-content;margin: 10px auto;padding: 10px 20px;color: #fff;}

    .quick_reg_group {border: 1px solid #333;padding: 5px 10px;flex: 1;text-align: center;}
    .quick_reg_group:first-child{margin-right: 10px;}
    .quick_reg_group label{display: block;}
    .quick_reg_group input{display: none;}
    .quick_reg_group input:checked ~ label{background-color: #333;}

    .flip-clock-wrapper>.days,.flip-clock-wrapper>.flip:nth-child(1),.flip-clock-wrapper ul.flip:nth-child(2),.flip-clock-wrapper ul.flip:nth-child(3),.flip-clock-wrapper ul.flip:nth-child(4),.hours,.flip-clock-label{display: none!important;}
    .clock{display: flex;margin: 0;justify-content: center;}

    .right_timer{width: fit-content;display: inline-block;}
    .timer_upper{background-color: #bcbcbc;border-top-left-radius: 4px;border-top-right-radius: 4px;padding: 4px;color: #fff;font-size: 28px;}
    .timer_bottom{background-color: #939393;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;padding: 4px;color: #fff;font-size: 20px;}

    .free_reg{text-align: center;color: #7b5e9b;}
    .free_reg h3{text-align: center;font-size: 30px;font-weight: 800;color: #7b5e9b;margin: 0;}
    .free_reg .pur_button{display: block;font-size: 16px;}

    .pur_button:hover{background-color: #b470d6;color: #fff;}

    .right_timer_box>div{display: inline-block;vertical-align: middle;}
    .colon{font-size: 28px;margin: 0 5px;font-weight: 800;color: #bcbcbd;}




    .button-disable{background-color: #ccc;color: #333;}

    .readying{font-size: 24px;font-weight: 800;position: relative;text-align: center;width: 100%;margin: 20px 0 20px 40px;color:#611985; }
    .readying:after,.readying:before{content: "";width: 30%;height: 3px;position: absolute;background-color: #611985;}
    .readying:before{left: 0;top: 20px;}
    .readying:after{right: 0;top: 20px;}

/*
    #index_login{min-height: calc(100vh - 59px);}
    #index_login .one_mins{background-image: url(../images/r1.png);background-repeat: no-repeat;background-size: cover;padding:5px;display: flex;}
    .mins_circle{border-radius: 50%;border:1px solid #da2027;padding:10px;display: flex;align-items:center;justify-content: center;text-align: center;width:80px;height: 80px;color: #fff;margin:4px 10px;}
    .free_reg{text-align: center;color: #fff;padding:10px;font-size: 14px;}
    .pur_button{color: yellow;background-image: url(../images/r4.png);background-repeat: no-repeat;background-size: cover;padding:5px 10px;font-size: 14px;margin:5px auto;display: block;}
    .pur_button:hover{color: yellow;}
    .title_tag{background-image: url(../images/r_title.png);background-repeat: no-repeat;background-size: cover;background-position: left center;display: flex;align-items:center;justify-content: center;font-size: 18px;color: #fff;height: 60px;position: relative;left: -20px;width: calc(100% + 20px);}
*/
    #login_form{width: 100%;padding:2px;}
    #login_form table{margin: 0 auto;width: 100%;}
    #login_form img{width: 25px;}
    #login_form input[type=text],#login_form input[type=password]{border-radius: 10px;background-color: #fff;padding:6px 10px;border:none;width: 100%;font-size: 16px;}
    #login_form input[type=submit]{border-radius: 10px;background-image: url(../images/r4.png);background-repeat: no-repeat;background-size: cover;background-position: center;padding:5px 10px;color: #fff;border:none;width: 70%;}
    #login_form td{padding:4px 4px 6px;text-align: center;}
    #login_form td.forget_password{text-align: right;}
    #login_form td.forget_password a{color: #b4b4b4;font-size: 14px;text-decoration: underline;}

    .check_label{color: #2ab32d;}
    .check_label_error{color: red;}


    .quick_reg{position: relative;}
    .quick_reg_right h2{color: #333;}
    .quick_reg_right{width: 50%;height: 100%;background: #fff;margin-left: 50%;padding:100px 20px;}
    .quick_reg_form input{width: 100%;margin:10px 0;padding: 10px;display: block;border-radius: 20px;background-color: #e7e7e7; font-size: 14px;border:none;color: #333;}
    .quick_reg_form input[type=submit]{background-color: #2a1441;background-repeat: no-repeat;background-size: cover;background-position: center;padding:10px;color: #fff;border:none;width: 70%;margin: 20px auto;display: block;font-size: 16px;}

    .video_breadcrumb li a{font-size: 1rem;transition: 0.5s ease;}
    .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before{font-size: 1.4rem;margin: 0 5px;}

    .dse_time{background-image: url(../images/r5.png);height: calc(100% - 340px);}
    .dse_time_desc{background-image: url(../images/r3.png);padding:5px 10px;display: flex;align-items:center;padding:20px 5px 30px;text-align: center;color: #fff;justify-content: center;}
    .dse_days{background-image: url(../images/r4.png);padding:5px 10px;display: flex;align-items:center;text-align: center;position: relative;top: -20px;font-size: 36px;color: #fff;justify-content: center;width: 70%;left: 15%;}
    
    .dse_timer{display: flex;padding:0px 5px;width: 100%;}
    .dse_timer_hour{flex:1;margin:5%;text-align: center;color: #fff;}
    .timer_box{border:1px solid #fff;padding:10px 3px;margin-bottom: 10px;}

    .timer_img{display: block;margin: 10px auto;}
    .click_timetable{font-size: 20px;color: #fff;display: block;text-align: center;margin: 10px auto 0;padding:20px 0;}


    footer{background-color:#000;text-align: center;padding: 10px 20px; color: #fff;position: relative;z-index: 10;}
    footer *{color: #fff;font-size: 14px;}
    footer a{color: #fff;}
    footer h5{margin: 10px 0;}

    .uk-grid + .uk-grid, .uk-grid > .uk-grid-margin, * + .uk-grid-margin{margin-top: 10px;}


    .special_location{color: #db1515;font-weight: 800;font-size: 18px;}
    label.error{color: red;}

    /* ------------------- Dashboard -------------------  */
    .flex_div{display: flex;flex-wrap: wrap;}
    .align_center{align-items: center;}
    .dashboard_index_four_box .four_box_inner{display: flex;padding: 20px;background: #da2027;}
    .dashboard_index_four_box .four_box_inner>*{flex:1;}
    .dashboard_index_four_box .four_box_inner>i{font-size:60px;color: #fff; }
    .dashboard_index_four_box .four_box_inner{border-radius: 10px;}
    .dashboard_index_four_box .four_box_inner .box_title{text-align: right;}
    .dashboard_index_four_box .four_box_inner .box_title h3,.dashboard_index_four_box .four_box_inner .box_title h4{margin: 0;color: #fff;}

    .dashboard_search{position: relative;}
    .dashboard_search input{padding: 10px 20px 10px 40px;border-radius: 20px;border: none;}
    .dashboard_search i{position: absolute;left: 13px;top: 13px;}





    .question_table{width: 100%;}
    .question_table th{background-color: #611985;color: #fff;padding: 10px;}
    .question_table th,.question_table td{text-align: left;}
    .question_table td{padding: 8px 10px;color: #333;}
    .question_table tr:nth-child(odd) td{background-color: #e0e0e0;}
    .question_table td:first-child{text-align: left;}
    .question_table td a{color: #333;transition: 0.5s ease;}
    .question_table td a span{opacity: 0;transition: 0.3s ease;position: relative;}
    .question_table td a:hover{color: #de4a4f;}
    .question_table td a:hover span{opacity: 1;animation:img_move_right 0.5s; color: #de4a4f;}
    .question_topic_td{padding:0!important;text-align: left;}
    .question_topic_block{display: block;padding: 5px 10px;width: 100%;}
    .question_topic_block:last-child{border-bottom: 0;}


    @keyframes img_move_right {
        0%   {right: 0px;}
        25%  {right: -7px;}
        50%  {right: 0px;}
        75%  {right: -7px;}
        100% {right: 0px;}
    }
    

    .type_button_box{width: 100%;display: flex;justify-content: center;margin: 0;}
    .type_button{background-color: #fff;border:2px solid #7d439b;color: #7d439b;display: table-cell;border-right: 0;padding: 8px 10px;position: relative;transition: .5s ease;font-weight: 800;}
    .type_button:first-child{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
    .type_button:last-child{border-top-right-radius: 8px;border-bottom-right-radius: 8px;border-right: 2px solid #7d439b;}
    .type_button_active:before{position: absolute;width: 100%;height: 100%;content: '';left: -4%;top: -12%;z-index: 9;background-color: transparent;border:5px solid #9d88b1;}
    .type_button_active{background-color: #611985!important;color: #fff!important;}

    .type_button:first-child.type_button_active:before,.type_button:first-child.type_button:before{border-top-left-radius: 12px;border-bottom-left-radius: 12px;}
    .type_button:last-child.type_button_active:before,.type_button:last-child.type_button:before{border-top-right-radius: 12px;border-bottom-right-radius: 12px;}

    .type_button:hover:before{opacity: 1;}
    .type_button:hover{background-color: #611985!important;color: #fff!important;}

    .subject_box{border:4px solid #c6aed2;background-color: #b499c6;color: #fff;font-weight: 800;box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.44);padding: 10px 15px;margin: 20px 0;text-align: center;font-size: 18px;display: block;transition: .5s ease;}

    .subject_box:hover{background-color: #611985;color: #fff;box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.57);border-color: #a36cc8;}

    .video_breadcrumb a{font-size:26px;color: #6a2b8d;font-weight: 800; }
    .video_breadcrumb img{width: 40px;vertical-align: unset;display: inline-block;margin-left: 8px;}



    /* ------------------- Dashboard -------------------  */


    .coming_soon_subject{position: absolute;z-index: 10;bottom: -15px;right: -30px; padding: 4px 8px; font-size: 12px;color: #fff;border-radius: 5px;background-color: #611985;box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.22);}



    .discuss_blog.blog_review{padding-top: 0;}
    .blog_review{margin-top: 30px;padding-top: 30px;padding-left: 40px;}
    .blog_review h3{border-top: 1px solid #333;margin: 15px 0;padding-top: 20px;}
    .blog_review_box{border-bottom: 1px solid #9e87b3;margin-bottom: 20px;}
    .asker h5,.responder h5{font-style: italic;font-size: 24px;position: relative;padding-left: 10px;}
    .asker h5:after,.responder h5:after{position: absolute;top: 0;left: 0;content: '';height: 35px;width: 2px;background-color:#6a2b8d;}

    .review_content{font-size: 16px;margin-bottom: 20px;padding: 15px;border-radius: 4px;background: #8d6cab;color: #fff;}
    .responder .review_content{background-color: #a95b5b;}
    .responder{padding-left: 50px;}

    .respon_button{display: inline-block;padding: 5px 10px;background-color: #333;color: #fff;font-style: normal;margin-left: 10px;font-size: 16px;border-radius: 8px;cursor: pointer;border:1px solid #333;transition: 0.5s ease;position: relative;top: -5px;}
    .respon_button:hover{color: #333;background-color: transparent;}
    .user_gp{display: inline-block;padding: 5px 10px;color: #fff;font-style: normal;margin-left: 10px;font-size: 16px;border-radius: 8px;position: relative;top: -5px;}


    .create_review h2{font-size: 24px;color: #6a2b8d;position: relative;}
    .create_review h2:after{position: absolute;bottom: -10px;left: 0;content: '';height: 1px;width: 100px;background-color:#6a2b8d; }

    .create_review button{display: block;margin: 10px 0;padding: 5px 20px;}
    .create_review textarea{margin: 10px 0;height: 200px;resize: none;padding: 10px;border: 1px solid #6a2b8d;border-radius: 8px;}






    @media(min-width: 961px){
        .hamburger{display: none;}

    }
    @media screen and (min-width:960px) and (max-width:1600px){
        .index_contact h3{display: flex;align-self: center;}
        .index_contact h3:after{top: initial!important;}
    }

    @media(max-width: 1024px){
        .index_contact h3{font-size: 32px;}
        .index_contact h3:after{height:26px;}
        .index_box_section h3{font-size: 3vw;}
        #index_content .uk-grid > *{padding-left: 10px;}
        
        #index_content .uk-grid{margin-left: 0!important;}
        #index_content{padding:20px 20px 20px 40px;}
        .coming_soon_subject{right: calc(50% - 47px )!important;}
        .index_video_left_box {padding-left: 20px!important;}
        .index_video_left_box .index_box_section,.index_box_section{height: 35vh;}
        .index_video_left_box,.index_video_right_box{width: 100%;}

    }

    @media screen and (min-width:960px) and (max-width:1240px){
        #index_login .one_mins{display: block;}
        .mins_circle{margin: 4px auto;}
        .half_width{width: 100%;display: block;}

    }
    @media screen and (max-width:600px){
        #index_login .one_mins{display: block;}
        .mins_circle{margin: 4px auto;}
        .half_width{width: 100%;display: block;}

    }


    @media(max-width: 960px){
        header{background-color: #beadce;background-repeat: no-repeat;background-size: cover;padding: 20px;}
        #logo{padding: 20px 0 0 50px;width: inherit;}
        #logo img{height: 100px;padding:0;}
        nav{display: none;}
        .fat-nav__wrapper a img{width: 20px;}

        .index_box_section img{display: none;}
        .index_box_section h3{font-size: 8vw;}

        .index_contact h3{text-align: center;}
        .index_contact h3:after{height: 4px;width: 60px;left: calc(50% - 35px);bottom: -10px;top: inherit;}
        footer ul{display: block;}
        footer ul li{display: inline-block;width: 48%;margin-right: 1%;}
        footer ul li:not(:last-child) a:after{display: none;}


    }

    @media screen and (min-width:640px) and (max-width:960px){
        #index_login{margin-left: 20%;}

    }
    @media(max-width: 480px){
        .title_tag,.dse_time_desc,.dse_days,.dse_timer_hour,.click_timetable,#login_form input[type=submit] {font-size: 14px;}

        .index_box_section img{height: 80px;}
        .index_contact .social_tab{margin-top: 20px;}
        .index_contact .social_tab i{font-size: 28px;transition:.5s ease;}
        .index_contact .social_tab h5{margin: 0;font-size: 18px;transition:.5s ease;}
        .index_contact .social_tab:hover i{font-size: 24px;}
        .index_contact .social_tab:hover h5{font-size: 14px;}


        .video_breadcrumb li a{font-size: 1.2rem;}
        .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before{font-size: 1.2rem;}
    }




    @keyframes img_move {
        0%   {top: 0px;}
        25%  {top: -7px;}
        50%  {top: 0px;}
        75%  {top: -7px;}
        100% {top: 0px;}
    }

    @keyframes rotate_left {
        100%  {transform: rotate(360deg);left: 50px;opacity:1;}
    }
    @keyframes rotate_right {
        100%  {transform: rotate(360deg);right: 50px;opacity:1;}
    }

    @keyframes random_move1 {
        33%  {transform: translateX(25px);transform: translateY(10px);}
        66%  {transform: translateX(10px);transform: translateY(25px);}
        100%  {transform: translateX(0px);transform: translateY(0px);}
    }
    @keyframes random_move2 {
        33%  {transform: translateX(10px);transform: translateY(40px);}
        66%  {transform: translateX(30px);transform: translateY(20px);}
        100%  {transform: translateX(0px);transform: translateY(0px);}
    }
    @keyframes random_move3 {
        33%  {transform: translateX(14px);transform: translateY(60px);}
        66%  {transform: translateX(50px);transform: translateY(30px);}
        100%  {transform: translateX(0px);transform: translateY(0px);}
    }
    @keyframes random_move4 {
        33%  {transform: translateX(70px);transform: translateY(30px);}
        66%  {transform: translateX(40px);transform: translateY(80px);}
        100%  {transform: translateX(0px);transform: translateY(0px);}
    }