.linear_btn .ico_fb , .linear_btn .ico_email{
    background-repeat: no-repeat;
    background-position: calc(100% - 3px) 4px;
    padding-right: 70px;
    background-size: 40px;
}

.linear_btn .ico_fb{
    background-image: url( /images/student_branch_fb.svg) !important;
}.linear_btn .ico_email{
    background-image: url( /images/student_branch_email.svg) !important;
}


.owl-theme .owl-nav {
    margin: 0;
    height: 0;
    top: 40%;
    position: absolute;
    width: 100%
}
.owl-theme .owl-dots{
     position: absolute;
     width:100px;
     height: 15px;
     bottom:20px;
     right: 0px;
}
.owl-theme .owl-nav .owl-prev{
    float:left;
}
.owl-theme .owl-nav .owl-next{
    float:right;
}

@font-face {
font-family: 'Awesome'; /* Choose a descriptive name for your font */
src: url('../fonts/fontawesome-webfont.woff2') ; 
}
.owl-nav .prev:after ,.owl-nav .next:after{
    display: block;
    width: 30px;
    height: 30px;
    font-family: "Awesome";
    font-size: 15px;
    text-align: center;
    color: #FFF;
    line-height: 28px;
}

.owl-theme .owl-nav [class*=owl-]:hover{
    background: transparent !important
}
.owl-nav .prev:after {
    content: '\f177';
}
.owl-nav .next:after {    
    content: '\f178';
}
.owl-dot span{
    background: #FFF !important
}
.owl-dot.active span{
    background: #E01F1C !important
}
.owl-nav .prev ,.owl-nav .next{
    width: 30px;
    height:30px;
    background: #E01F1C ;
    border-radius: 100px;
    margin: 0 10px
    
}
    
a.add_arrow_s:after , add_arrow_s:after{
    display: block;
    content: '\f178';
    width: 30px;
    height: 20px;
    font-family: "Awesome";
    font-size: 15px;
    text-align: right;
    color: #FFF;
    float: right;
}
p{
        line-height: 27px;
        text-align: justify;
}

.div_lang_div{
    width:150px;
        position: absolute;
   
    display: block;
    text-align: center;
    top: 20px;
    z-index: 2;
}

.div_lang_div a{
    color: #000
}
.navbar-nav > .nav-item:hover > a{
    border-bottom: #E01F1C 5px solid
}
nav{
    padding-bottom: 0px !important;
}

.dropdown-menu  a , section.sounding_board a {
color:#3F3F3F
    
}
.page_body{
    padding: 90px 0 0px 0;
}
.div_upload_cpd  ,.div_check_member_2{
    display: none;
}
.award_announcement_of_finalists  .ui-tabs-nav li a > div{
   min-height: 90px; 
}
.award_announcement_of_finalists  .ui-tabs-nav li a {
color:#8E8E8E    
}

.link-icon{
    height:25px;
}

.ui-tabs .ui-tabs-nav li {
        white-space: normal !important;
}
.disabled:after{
        background-color: #CCC;
}

a.disabled ,  .disabled a{
     pointer-events: none;
  cursor: default; /* Optional: Change cursor to indicate non-interactivity */
}

/*
input:-internal-autofill-selected{
    background: transparent
}*/
/*
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
 transition: background-color 0s 600000s, color 0s 600000s !important;
}*/
.navbar-nav li.award .dropdown-menu {
    left:unset !important;
    right:0 !important;
}

.form-check-input , .form-check-input:focus {
    border-color: #999;
    outline: 0;
}
.form-control{
    background: #FFF ;
    border:solid 1px #999 !important;
    border-radius: 10px  !important;
}

.ui-tabs .ui-tabs-nav {
    margin: 0 !important;
    padding: 0  !important;
}

.ui-tabs .ui-tabs-panel{
    box-shadow: 0px 0px 20px #CCC;
    padding: 50px !important;
}

.award_announcement_of_finalists .require_slidebox{
    margin: 0 !important;
}

.main  .ui-widget.ui-widget-content{
    border:none;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #E33728   !important;

}

.ui-tabs .ui-tabs-nav li {
    height: 220px;
    padding-bottom: 50px
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: none !important;
    padding: 0 !important;
    text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 6px solid #E33728 !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none  !important;
    background: transparent  !important;
    color: #8E8E8E  !important;
}


.ui-tabs .ui-tabs-nav li {

    margin: 0 !important;

}
.main .ui-widget-header li{
    width: calc( 20% - 0px)
}
.main .ui-widget-header {
    border: none;
    background: transparent;
    color: #8E8E8E  !important;
    font-weight: bold;
    font-size:18px;
    text-align: center
}


.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: none !important;
    background: transparent  !important;

    color: #8E8E8E;
}


.div_award_finalists_img{
    float: right;
    padding: 0 0 20px 30px;
    max-width: 50%
}

.award_about_us .div_ec .item_line:after {
    display: block;
    content: '';
    width: 25px;
    left: calc( 80% - 11px);
    height: 25px;
    border:solid 5px #E33728;
    border-radius: 50px;
    background: #FFF;
    position: absolute;
    top: calc( 50% - 12px);
    z-index: 1;
}
.award_about_us .div_ec .item_line:before {
    display: block;
    content: '';
    width: 26px;
    left: calc( 20% - 12px);
    height: 26px;
    border:solid 5px #E33728;
    border-radius: 50px;
    background: #FFF;
    position: absolute;
    top: calc( 50% - 12px);
    z-index: 1;
}

.award_about_us .div_ec .item_line .left ,
.award_about_us .div_ec .item_line .right{
    width: 3px;
    position: absolute;
    height: 50%;
    background: repeating-linear-gradient(
        0deg,
        #E33728 0px,
        #E33728 10px,
        transparent 10px,
        transparent 20px
        );
}

.award_about_us .div_ec .item_line .left{
    left: calc( 20% - 2px);
}
.award_about_us .div_ec .item_line .right{
    right: calc( 20% - 3px);
    bottom: 0
}


.award_about_us .div_ec .item_line {
    background: #F9F9F9;
    background: linear-gradient(
        90deg,
        tomato 0px,
        tomato 2px,
        transparent 2px,
        transparent 9px
        );
    height:170px;
    position: relative;

    background: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 47%, rgba(223, 225, 225, 1) 47%, rgba(223, 225, 225, 1) 53%, rgba(255, 255, 255, 0) 52%);
}

.award_about_us .div_ec .item_box {
    height:170px;
    background: #FFF;
    margin: 0 15px;
    box-shadow: 0px 0px 20px #CCC;
}

.award_about_us .div_ec .item_box > div:nth-of-type(2){
    padding:30px 20px ;
}
.award_about_us .div_ec .item_box > div:nth-of-type(1){
    padding:5px 30px ;
    color: #FFF;
    width:80%
}

.div_info .start.head {
    border-top-left-radius: 10px;
}
.div_info .end.head {
    border-top-right-radius: 10px;
}

.div_info .head {

    background: #E33728;
    overflow: hidden
}

div[class*='btn']{
    cursor: pointer
}

 .div_info_2 .last .foot{
    border-bottom:none;
}
.div_info_2 .foot{

    border-bottom:1px dashed  #9D9D9D;
}

 .div_info > div:nth-of-type(1) .head,.div_info > div:nth-of-type(2) .head , .div_info_2 > div:nth-of-type(3) .head  {
    border-right:1px solid #FFF;
}

.no_brr{
    border-right:none !important;
}
 .div_info > div:nth-of-type(1) .foot, .div_info > div:nth-of-type(2) .foot , .div_info_2  .rl{
    border-right:1px dashed  #9D9D9D;
}

.bbd_l{
    border-bottom:1px dashed  #9D9D9D;
}

.activities_detail .head ,.div_info .head{ 
    color:#FFF;
    padding: 15px;
    font-size: 23px;
    font-weight: bold;
}
.activities_detail .foot{
    /*background: #F4F4F4;*/
    padding: 15px;
}


.photo_arrow{
    float:right;
    border-radius: 30px;
    ;
    background-color: #E01F1C;
    height: 20px;
    width: 60px;
    text-align: right;
    padding: 10px

}
.activities .date ,.award_gallery .date {
    color:#E01F1C;
    font-size:18px;
}
.activities .title ,.award_gallery .title {
    color: #000;
    font-size:21px;
    line-height: 26px;
}

.activities .cover_img , .award_gallery .cover_img{
    height: 200px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
    background: #CCC;
    background-size: cover !important;
}

.activities .desc ,.award_gallery .desc{
    min-height: 130px;
    background: #FFF
}

.activities .title ,.award_gallery .title{
    height: 90px;
    overflow: hidden
}


.activities_detail .desc , .bulletin_board_detail .desc{
    padding: 90px 100px;
    background: #FFF;
    border-radius: 10px;
    overflow: hidden;
}

.round_box_10{
    border-radius: 10px;
    overflow: hidden;
}
.activities_detail .item , .bulletin_board_detail .item{
    padding-top: 15px;
    filter: drop-shadow(0px 0px 10px #999);
}

.professional_diploma .item  .desc_bg,.certificate_courses .item .desc_bg,
.activities_detail .item  .desc_bg, .bulletin_board_detail .item .desc_bg{
    border-radius: 10px;
    overflow: hidden;
    padding-top: 10px;
    display: block;

    background: #E01F1C;

}

.box_1{
    padding: 40px 20px 40px 70px;
    border-left: 8px solid #E01F1C;
    background:#F4F4F4

}

.activities .item  ,.award_gallery .item{
    border-radius: 10px;
    overflow: hidden;
    display: block;
    filter: drop-shadow(0px 0px 10px #999);
    background: #E01F1C;
    padding-top: 10px;


}

.dsh{
/*    filter: drop-shadow(0px 0px 10px #999);*/
}

.activities_detail .div_info > div  > div:not(.head){
  background: #F4F4F4;
}
.activities_detail .main{
  
    background: linear-gradient(to bottom, #F4F4F4 0px,#F4F4F4 900px, #FFF 900px, #FFF 1000px);
}
.div_info  .last .child_first{
       border-bottom-left-radius: 10px;
       background: #FFF;
    overflow: hidden
}
.ico_share{
    height:25px !important;
}

.div_info  .last .child_end{
       border-bottom-right-radius: 10px;
    overflow: hidden
}

.brbl_10{
   border-bottom-left-radius: 10px; 
   overflow: hidden
}
.brbr_10{
    border-bottom-right-radius: 10px;
    overflow: hidden
}


.btn_arrow:after{
       content: '\f178';
    /*padding-right: 10px;*/
    flex-direction: row-reverse;
    width: 30px;
    height: 30px;
    overflow: hidden;
    font-family: "Awesome";
    font-size: 15px;
    text-align: right;
    color: #FFF;
    float: right;
    display: flex;
    align-content: center;
    align-items: center;
    
    flex-wrap: nowrap;
    margin-left: 15px;
}

.btn_arrow_1:after{
     content: '\f178';
      display: block;
    padding-right:10px;
    width: 30px;
    height: 20px;
    overflow: hidden;
    font-family: "Awesome";
    font-size: 15px;
    text-align: right;
    color: #FFF;
    float: right;
}
.btn_arrow_1{
    background: #E01F1C !important;
    color: #FFF;
    display: inline-block !important;
    width: 60px;
    border-radius: 100px;
}

.div_paging{
    display: flex;
    justify-content: center;
}
.div_paging  a{
    border: #BEBEBE 1px solid;
    padding: 11px 0px;
    line-height: 9px;
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
    color :#BEBEBE

}
.div_paging a.active{
    color:#000
}
.div_paging_m select{
    border: solid 1px #BEBEBE;
    border-radius: 10px;
    background:transparent   ;
    background-color:transparent   ;
}


.div_paging_m option{
    color :#BEBEBE;
    text-align: center;
}
.div_paging_m option:checked {
    color:#000
}

.div_paging .prev{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.div_paging .next{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.btn:hover {

    background-color: #E01F1C !important;

}
.btn_link_2{

    padding: 5px ;
    color: #FFF;
    border-radius: 100px;
    background: -webkit-linear-gradient(90deg,rgba(227, 55, 40, 1) 0%, rgba(227, 105, 97, 1) 100%);
    background: -moz-linear-gradient(90deg,rgba(227, 55, 40, 1) 0%, rgba(227, 105, 97, 1) 100%);
    background: linear-gradient(90deg,rgba(227, 55, 40, 1) 0%, rgba(227, 105, 97, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr="#E33728",
        endColorstr="#E36961",
        GradientType=1
        )
}

.btn_link_1 a{
    color: #FFF;
}
.btn_link_1{

    padding: 15px 30px;
    color: #FFF;
    border-radius: 100px;
    background: -webkit-linear-gradient(90deg,rgba(227, 55, 40, 1) 0%, rgba(227, 105, 97, 1) 100%);
    background: -moz-linear-gradient(90deg,rgba(227, 55, 40, 1) 0%, rgba(227, 105, 97, 1) 100%);
    background: linear-gradient(90deg,rgba(227, 55, 40, 1) 0%, rgba(227, 105, 97, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr="#E33728",
        endColorstr="#E36961",
        GradientType=1
        )
}

.member_page .div_left{
    border-right: #ADADAD solid 1px;
}

.br_b_1px{
    border-bottom: #ADADAD solid 1px;
}

.br_r_1px_dashed{
    border-right: #ADADAD dashed 1px;
}
.brr_t_15{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.brr_b_15{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.brr_15{
    overflow: hidden;
    border-radius: 15px;
    
}


.award_home .dsh >  .row:nth-child(odd) {
    background: #FFF
}

.award_about_us .main.mb-5 , .contact_us .main.mb-5 {
    margin-bottom: 0 !important;
}

.dsh{
    box-shadow: 0px 0px 20px #CCC;
}

.brc_aaa{
    border-color:#aaa !important
}
.br_2px{
    border: solid 2px;
}

.tbl_td_style_2 .red_c_1 span{
    font-size: 15px ;
    height: 14px;
}
.tbl_td_style_2 > div.position-relative{
    padding-right: 130px
}


.tbl_td_style_2.mh > div{
    min-height: 85px;
}

.tbl_td_style_2 .red_c_1{
    position: absolute;
    right: 40px;
    width: 45px;
    height: 45px;
    background: #e01f1c;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#FFF;
    font-weight: bold;
    font-size: 20px
}

.div_tbl_td_style_2 > .tbl_td_style_2:nth-of-type(odd)  , .div_tbl_td_style_3 > .tbl_td_style_3:nth-of-type(odd){
    background: #FFF
}

.div_tbl_td_style_1 > .tbl_td_style_1:last-of-type >div ,.div_tbl_td_style_2 > .tbl_td_style_2:last-of-type >div,.div_tbl_td_style_3 > .tbl_td_style_3:last-of-type >div{
    border-bottom: none
}

.tbl_td_style_1 > div:last-of-type ,.tbl_td_style_3 > div:last-of-type{
    border-right: none;
}

.tbl_td_style_1 > div{

    background-color:#FFF ;

}
.tbl_td_style_1 > div , .tbl_td_style_3 > div{
    border-right: #aaa  dashed  1px;
}


.tbl_td_style_1 > div, .tbl_td_style_2 > div, .tbl_td_style_3 > div{
    border-bottom: solid 1px #aaa ;


    padding-top: 1rem !important;
    padding-bottom: 1rem ;
    padding-right: 1.5rem ;
    padding-left: 1.5rem ;
    display: flex;
    align-items: center

}



.tbl_td_style_2 > div  , .tbl_td_style_1 > div ,.tbl_td_style_3 > div{
    padding-top: 1rem !important;
    padding-bottom: 1rem ;
    padding-right: 1.5rem ;
    padding-left: 1.5rem ;
    display: flex;
    align-items: center
}
.br_bottom_1px_aaa{
    border-bottom: solid 1px #aaa !important;
}

.br_top_1px_aaa{
    border-top: solid 1px #aaa !important;
}
.br_bottom_2px_aaa{
    border-bottom: solid 2px #aaa !important;
}
.br_bottom_2px_fff{
    border-bottom: solid 2px #fff !important;
}
.br_bottom_0px{
    border-bottom: none !important;
}
.br_1px{
    border: solid 1px;
}

.br_b1px{
    border-bottom: solid 1px;
}
.brc_gray{
    border-color:#BEBEBE;

}

.col_green{
    color:#198754;
}
.col_1B1B1E{
    color:#1B1B1E
}
.col_9D9D9D{
    color:#9D9D9D
}
.col_fff{
    color:#FFF
}
.col_red{
    color:#E01F1C
}
.bg_F9F9F9{
    background: #F9F9F9
}
.bg_red{
    background: #E01F1C !important
}
.bg_9B9B9B{
    background:  #9B9B9B
}
.bg_F4F4F4{
    background: #F4F4F4
}
.bg_BEBEBE{
    background:#BEBEBE;
}
.bg_fff{
    background: #FFF !important;
    background-color: #FFF !important
}

.custom-justify , .cj{
     text-align: justify;
}

.btn_arr_1:hover{
    color:#000
}
.btn_arr_1{
       height: 60px;
    background: url(/images/arrow_2_14.svg);
    background-repeat: no-repeat;
    width: 200px;
    text-align: center;
    line-height: 57px;
    color: #FFF;
}
.ico_ad_dl{
    width: 30px;
    cursor: pointer;
}
.ico_eye{
    width: 30px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    bottom: 18px;

}

.ico_login_passwd{
    width: 30px;
    cursor: pointer;
    position: absolute;
    left: 20px;
    bottom: 18px;

}
.ico_login_email{
    width: 30px;
    cursor: pointer;
    position: absolute;
    left: 20px;
    bottom: 18px;

}

.login #u_email ,.login #u_passwd{
    padding-left : 60px;
}

.bl_6{
    border-bottom: 6px solid #E01F1C;
}
.line_2{
    height: 2px;
    width: 100%;
}
.line_8{
    height: 8px;
    width: 100%;
}

.modal-body {
    font-size: 18px;
}
.col_000{
    color: #000
}
.col_9B9B9B{
    color: #9B9B9B
}
.fs_desc{
    font-size:16px;
}

.fs-16{
    font-size:16px;
}
.fs-20{
    font-size:20px;
}

.fs-22{
    font-size:22px;
}

.fs-26{
    font-size:26px;
}

.fs-30{
    font-size:30px;
}

.fs-40{
    font-size:40px;
}

.fs-45{
    font-size:45px;
}

.my-10{
    margin-top: 90px;
    margin-bottom: 90px;
}

.div_paging  .active{
    background: #F9F9F9
}


.bg2_color > div:nth-child(even){
    background: #F9F9F9
}

.bg_tran{
    background: transparent !important
}


.mt-10{
    margin-top: 90px;
}
.mb-10{
    margin-bottom: 90px;
}

.sb_hight{
    margin: 35px ;
}
ul{
    margin-bottom: 0 !important;
}

.useful_links li a{
    color:#423F3F;

}
.useful_links li::marker {
    color: #e01f1c;
}
.useful_links li{

    padding: 0px 0 ;

}
.div_status_row{

    padding: 10px 0 10px 0 ;
    border: #ADADAD solid 1px;
    border-radius: 10px;
    margin:15px 0;
}
.div_unpaid{
    color: #2F6430;
    background: #CBF3E0 !important;
    border-radius: 10px;
    text-align: center;
    padding: 3px;
}
.div_paid{
    color: #E01F1C;
    background: #FFE6E6 !important;
    border-radius: 10px;
    text-align: center;
    padding: 3px;
    width: fit-content;
    
}

.btn_submit{
    height: 60px;
    background: #E01F1C;
    color:#FFF;
    font-size: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.modal-content .btn-close{
    color:#E01F1C
}
.modal-header ,.modal-footer{
    border-bottom: none !important;
    border-top: none !important;
}
.no_li{
        list-style: none;
}
.member_page .div_left li{
    list-style: none;
    margin:  20px 0 ;
}

.member_page .div_left li:nth-of-type(1){
    background: url(/images/icon/icon-21.svg);
}
.member_page .div_left li:nth-of-type(2){
    background: url(/images/icon/icon-23.svg);
}
.member_page .div_left li:nth-of-type(3){
    background: url(/images/icon/icon-25.svg);
}
.member_page .div_left li:nth-of-type(4){
    background: url(/images/icon/icon-27.svg);
}


.member_page .div_left li.active{
    background-color: #FFE6E6 !important;
    color:#E01F1C;
    border-radius: 10px;
}

.member_page .div_left li.active:nth-of-type(1){
    background: url(/images/icon/icon-22.svg);
}
.member_page .div_left li.active:nth-of-type(2){
    background: url(/images/icon/icon-24.svg);
}
.member_page .div_left li.active:nth-of-type(3){
    background: url(/images/icon/icon-26.svg);
}
.member_page .div_left li.active:nth-of-type(4){
    background: url(/images/icon/icon-28.svg);
}


.member_page .div_left li{
    background-repeat: no-repeat !important;
    background-position: 20px center !important;
    background-size: 35px !important;
    padding: 15px 0 15px 70px;
    margin-right: 15px;

}

.member_page input[type=text] ,.member_page input[type=password] ,.member_page input[type=tel],.member_page input[type=date] ,.member_page input[type=email], .member_page textarea {
    background: transparent  ;
    border: 1px solid #ADADAD;
}

input[type=text] ,input[type=password] ,input[type=tel],input[type=date] ,input[type=email] , select  ,input[type=month]   {
    height: 60px;
    border: none;
    background: #F2F2F2 ;
    font-size: 18px;
    border-radius: 5px;
    padding: 0 15px;
}

select{
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    background-color: #f4f4f4;

    border-radius: 5px;
    color: #000000;
    cursor: pointer;
    outline: none;

}

.div_select{
    position: relative;
}

.div_select::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 50%;
    right: 30px;
    transform: translate(0, -50%);
    width: 12px;
    height: 12px;
    background-color: #e01f1c;
    clip-path: polygon(50% 80%, 0 20%, 100% 20%);
}



@font-face {
    font-family: noto-r;
    src: url('/includes/fonts/NotoSansTC-Regular.otf');
}



.c_red{
    color: #e01f1c;
}


body{
    font-family: noto-r;
     text-align: justify;

}

a{
    color: #e01f1c;
    text-decoration: unset;
}
.py-10{
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.ps-10{
    padding-left: 5rem;
}
.pe-10{
    padding-right: 5rem;
}
.px-10{
    padding-left: 5rem;
    padding-right: 5rem;
}

.pt-10{
    padding-top: 5rem;
}

.pb-10{
    padding-bottom: 5rem;
}
h1,h2,h3{
    font-weight: 600;
    margin-block: 0;
}

h4

.home h3{
    font-size: 24px;
}
table td{
    overflow-wrap: anywhere;
}
.main{
    margin-top: 120px;
}

header{
    z-index: 9999;
    position: fixed;
    background-color: #fff;
    padding: 0px 40px;
    top:0;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 18px;
    align-items: center;
    width: 100%;
    height:115px;
}

header .headerlogo{
    max-width: 450px;
    width: 450px;
    height: auto;
}

header .menu_box{
    padding-top:20px;
}

.menu_box_top{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 10;
    position: static;
}

header .login_btn , .login_btn{
    padding: 2px 40px 4px 40px;
    background-color: #e01f1c;
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    
}

header .border_line{
    border-left: 3px solid #000;
    margin: 0 40px;
    height: 35px;
    margin-right: 180px;
}

.ani_btn svg{
    
    height: 12px;
    top: -7px;
    position: relative;
}
.ani_btn{
    display: inline-block;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ani_btn:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e01f1c; /* Replace $color with actual value */
    z-index: -2;
}
.disabled.ani_btn:before ,.disabled.ani_btn:after {
    background-color: #ccc !important;
}

.ani_btn:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #B31816; /* Replace darken($color, 15%) with actual value */
    transition: all .3s;
    z-index: -1;
}

.ani_btn:hover:before {
    width:100%;
}

header .lang_div img{
    width: 20px;
    height: auto;
    margin-right: 10px;
}

.other_lang .active .fa-check{
    visibility: visible;
}
.other_lang .fa-check{
    visibility: hidden;
}
.lang_div{
    position: relative;
    display: block;
    align-items: center;
    padding: 4px;
  
}


.div_lang_div{
    background: #F4F5F9
}
.other_lang{
    font-size: 16px;
    border-radius: 5px;
    overflow: hidden;
    top:100%;
    background-color: #fff;
    color: #000;
    padding: 0 5px;
    right: 0;
    max-height: 0;
    overflow: hidden;
       
    transition: max-height 0.3s ease;
    z-index: 50;
    font-weight: 400;
}

.lang_div:hover .other_lang{
    max-height: 150px;
}

.other_lang div{
    padding: 10px 5px;
}

.other_lang div:hover a{
    color: #e01f1c!important;
}
/*
.other_lang div:nth-child(1){
    border-bottom: 1px solid #000;
}
*/


.navbar-expand-lg{
    padding-bottom: 0;
}

header nav a{
    position: relative;
    display: inline-block;
}

ul.navbar-nav>.nav-item>a{
    margin-left: 40px;
    font-size: 18px;
    color: #000;
}

header nav a.dropdown-item1{
    margin-left: 0;
}

header nav .dropdown-menu{
    border-radius: 0!important;
    border: 0px!important;
    left: 40px;
    padding: 0;
    background-color:#f4f4f4;
    margin-top: 0px;
}

header nav .dropdown:last-child .dropdown-menu{
    left: inherit;
    right: 0!important;
}

header nav .dropdown-menu a{
    font-size: 16px;
    font-weight: 400;
    max-width: 250px;
    padding: 16px;
    width: 250px;;
}

header nav .dropdown-menu a:hover{
    color: #e01f1c;
}

header nav .dropdown-menu li{
    border-bottom: 1px solid #9b9b9b;
    position: relative;
}

header nav .dropdown-menu li:last-child{
    border-bottom: 0px;
}

.nav-item:hover>.dropdown-menu{
    display: block;
}

.navbar-expand-lg .navbar-nav .nav-link{
    padding: 0;
}

header nav .nav-item>a{
    padding-bottom: 20px;
}

header nav .nav-item.active>a{
    border-bottom: 5px solid #e01f1c;
}

header nav .nav-item>a{
    border-bottom: 5px solid transparent;
}

header nav ul ul .dropdown-menu{
    background-color:#efefef;
}

header nav ul ul li:hover .dropdown-menu{
    display: block;
    left: 100%;
    top: 0;
}

footer img{
    width: 25px;
    height: auto;
    margin-right: 10px;
}

footer .footer_contact{
    display: flex;
    align-items: center;
    color:#FFF
}

footer .footer_copyright{
    text-align: right;
    color:#FFF
}

.text-justify{
    text-align: justify;
}

.home_section1{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    animation: zoom 10s forwards;
}

.home .owl-stage .item{
    overflow: hidden;
}

.linear_btn svg{
/*    margin-left: 16px;*/
}

.home_section1{
    height: calc( 100vw / 4.3 );
}


@keyframes zoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

nav .dropdown-menu[data-bs-popper]{
    left: 40px;
    margin-top: 0;
}


.home .banner_content1 {
    color: #fff;
    position: absolute;
    top: 26%;
    left: 2%;
    transform: translateY(-50%);
}

.home .banner_content1 .h1{
    font-size: 60px;
    color:#000;
    font-weight: 600;
    /*text-shadow: 0px 0px 10px #000;*/
}
.div_file_list li .btn_remove_apply_upload , .div_file_list li .btn_remove_cpd_upload {
    float:right
}

.div_file_list{
    width:500px;
    max-width: 95vw
}

.home .banner_content2 {
    text-align: center;
    color: #fff;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.committee_members .ui-accordion .ui-accordion-header.ui-state-active ,
.committee_members .ui-accordion .ui-accordion-header:hover{
    background: #E33728 !important;
    color:#FFF  !important;
    font-size: 20px;
    background: radial-gradient(circle,rgba(227, 55, 40, 1) 31%, rgba(255, 158, 153, 1) 68%, rgba(227, 55, 40, 1) 100%)  !important
}

.committee_members .ui-accordion .ui-accordion-header{
    border: 1px solid #ddd !important;
    font-size: 20px;
    color:#000 !important

}
.home .banner_img{
    margin: 0 auto 5px auto;
    width: 35px;
    height: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.home .home_news_grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}

.home .news-large{
    grid-column: span 2;
}

.home .news-cover{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: 0px -8px #e01f1c;
}

.home .news-grid-div{
    border-radius: 15px;
    box-shadow: 0px 0px 10px #ababab;
}

.home .news-flex{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
}

 

.home .news-date{
    color: #e01f1c;
}

ul.dashed {
  list-style-type: none;
  padding-left: 0;
}
ul.dashed > li {
  text-indent: -5px;
  padding: 10px 0;
}
ul.dashed > li:before {
  content: " - ";
  text-indent: -5px;
}

.home .news-content-div{
    position: relative;
    padding: 10px 10px 48px 10px;
    height: calc(100% - 200px);
    
}
.div_red_foot{
    background: #E01F1C;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 25px !important;
    margin-top: -10px;
}

.div_red_head{
    background: #E01F1C;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-bottom: 25px !important;
}
.div_red_head+div{
    margin-top: -10px;
}

.home .news-date{
    font-size: 20px
}
.home .news-title{
    height: 80px;
    overflow: hidden;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color:#000;
}

.home .news-flex .fa-arrow-right{
    color: #fff;
}

.home .news-flex .ani_btn{
    padding: 0px 10px 3px 25px;
    border-radius: 25px;
    height:20px;
}

.home .news-more-div{
    width: fit-content;
    margin: auto;
}

.contact_us_icon{
    width: 35px;
    height: 35px;
    
}
.linear_btn.add_arrow_s , .form_mtype .linear_btn ,a.linear_btn {
    padding: 10px 30px;
}
.linear_btn .add_arrow_s:after,
.btn_link_1 .add_arrow_s:after
{
    margin-top: 3px;
}
.linear_btn_s{
    font-size: 14px !important;
    padding: 5px 10px  !important;
}

.linear_btn a {
    color :#FFF;
     padding: 10px 30px;
}
.btn_join_us_submit{
    padding: 15px 30px;    
}

.linear_btn{
    background: linear-gradient(85deg, #e23324,#e75f4e, #e36a62);
    border-radius: 100px;
    color: #fff!important;
    font-size: 18px;
 
    width: fit-content;
    align-items: center;
    transition: all .3s;
    position: relative;
    /*margin-right: 32px;*/
}

.w-768{
    width: 768px;
    max-width: 100%;
    margin: auto;
}

.linear_btn:hover {
    background: linear-gradient(85deg, #e23324);
}

.linear_btn{
    display: flex;
    align-items: center;
}

.linear_btn img{
    width: 20px;
    height: auto;
    margin-right: 15px;
}

.news-more-btn a{
    color:#FFF
}
.news-more-btn{
    background: linear-gradient(85deg, #e23324,#e75f4e, #e36a62);
    border-radius: 25px;
    color: white;
    font-size: 18px;
    padding: 10px 60px 10px 30px;
    cursor: pointer;
    display: inline-block;
    align-items: center;
    transition: all .3s;
    position: relative;
    min-width: 150px;
}

.news-more-btn svg{
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translate(-50%,-50%);
    font-size: 14px;
}

.news-more-btn:hover {
    background: linear-gradient(85deg, #fc3c3c, #fc3c3c);
}

.err{
    background: #F00 !important
}

.join_div{
    position: relative;
}

.join_div img{
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    border-radius: 15px;
    z-index: -1;
}

.join_content_div{
    box-shadow: 0px 0px 20px #c1c1c1;
    width: 550px;
    max-width: 100%;
    border-radius: 15px;
    background-color: #fff;
    margin-top: 3rem;
}
.home .join_content{
    font-size: 19px;
}

.home .join_content_sup_div{
    box-shadow: 0px -15px #e01f1c;
    border-radius: 15px;
    padding: 40px 20px;
    font-size: 18px;
}

.home .join_btn{
    background:#f2f2f2;
    padding: 10px;
    cursor: pointer;
    border-radius: 40px;
    margin-bottom: 10px;
    text-align: center;
    width: 360px;
    border:1px solid #dddddd;
}

.home .join_btn:hover a{
    color: #fff;
}

.home .join_btn:hover{
    border:1px solid transparent;
    background: linear-gradient(85deg, #e23324,#e75f4e, #e36a62);
    color: #fff;
}

.home .sponsor_div{
    display: flex;
    flex-wrap: wrap;
}

.home .sponsor_div img{
    margin-right: 16px;
}

.home .acoustic_div .owl-stage {
    display: flex;
    align-items: center;
    transition-timing-function: linear !important;
}

.advertiser .advertiser_grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.main {
    font-size: 18px;
    padding-bottom: 90px
}

.advertiser_div{
    box-shadow: 0px 0px 20px #c1c1c1;
    border-radius: 15px;
}

.advertiser_supdiv{
    height: 100%;
    border-radius: 15px;
    padding: 16px;
    box-shadow: 0px -10px #e01f1c;
}

.advertiser_supdiv{
    display: flex;
    align-items: center;
}

.advertiser_logo{
    width: 32%;
}

.advertiser_logo img{
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
}

.advertiser_line{
    height:-webkit-fill-available;
    ;
    border-left: 1px solid #c4c4c4;
    margin: 0px 10px;
}

.advertiser_title{
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}

.advertiser_table{
    font-size: 18px;
    line-height: 20px;
    width: 100%;
}

.advertiser_table tr td:first-child{
    color: #e01f1c;
    width: 70px;
}

.advertiser_content{
    width:calc( 100% - 32% - 21px) ;
}

.dropdown-toggle::after{
    content: none!important;
}

.introduction_of_hkioa p a{
    color: #e01f1c;
}

.committee_members  .ui-accordion .ui-accordion-header{
    margin: 10px 0 10px 0;
    padding-left: 45px;
    border-radius: 8px;
}

.committee_members .ui-state-active{
    border:1px solid transparent;
}

.accordion .person_img{
    max-width: 300px;
    height: auto;
}

.committee_members .ui-state-default{
    background: #fff;
}

.committee_members .ui-state-active, .committee_members .ui-widget-content .ui-state-active,.committee_members  .ui-widget-header .ui-state-active,.committee_members  a.ui-button:active,.committee_members  .ui-button:active,.committee_members  .ui-button.ui-state-active:hover{
    background: linear-gradient(85deg,#e23324,#e75f4e, #e36a62);
    color: #fff;
}

.committee_members .ui-accordion .ui-accordion-content{
    margin-top: -15px;
    padding-top: 32px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.committee_members .ui-accordion .ui-accordion-content h4{
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 16px;
}

.committee_members .ui-icon{
    display: none;
}
.div_file_list li{
    height: 50px
}

.member_content{
    display: flex;
    flex-wrap: wrap
}

.lh22{
       line-height: 22px;
}

.member_content .member_subcontent ,.member_subcontent{
    text-align: justify;
    line-height: 22px;
    padding-right: 2.5rem;
}

.member_content .member_image{
    max-width: 300px;
    height: auto;
}

.chairmans_message b{
    color: #e01f1c;
}

.chairman_box{
    padding: 16px;
    background-color: #f4f4f4;
}

.chairman_box img{
    width: 100%;
    height: auto;
}

.chairman_box .chairman_name{
    color: #e01f1c;
    font-size: 20px;
    font-weight: 600;
}

.directory_box{
    background-color: #f4f4f4;
    height: 100%;
    padding-top: 40px;
    padding-left: 16px;
    padding-right: 16px;
    border-left:10px solid #e01f1c;
    text-align: right;
}

.directory_box .directory_num{
    color: #e01f1c;
    font-size: 32px;
    font-weight: 600;
}

.directory_box .directory_text{
    font-size: 16px;
    color: #000;
    margin-bottom: 32px;
}

.membership_list .list_tab{
    display: flex;
    cursor: pointer;
    border-bottom: 1px solid #777;
}


.membership_list .list_tab .tab_title{
    padding:8px 5px;
    color: #777;
    margin-right: 24px;
}

.membership_list .list_tab .tab_title.active{
    color: #e01f1c;
    border-bottom: 3px solid #e01f1c;
}

.membership_list .tab_content{
    display: none;
}

.membership_list .entext_grid{
    display: grid;
    grid-template-columns: repeat(26, 1fr);
}

.entext{
    font-size: 28px;
    color: #777;
}

.entext.active{
    color: #e01f1c;
}

.membership_list .memberdiv{
    display: flex;
}

.membership_list .member_text_div{
    width: 30px;
    font-size: 28px;
    color: #e01f1c;
    position: relative;
}

.membership_list .member_text_div .member_text{
    position: absolute;
    left: 0;
    top: -22px;
}

.membership_list .member_name_div{
    width: calc(100% - 30px);
}


.membership_list .member_name_div .member_name{
    padding: 40px;
    border-top:1px solid #b9b9b9;
}

.require_div .require_title{
    font-size: 20px;
    font-weight: 600;
    background-color: #e01f1c;
    color: #fff;
    text-align: center;
    padding: 10px;
    width: 100%;
    border-bottom:1px solid #aaa;
}

.require_div .require_slidebox{
    border:1px solid #aaa;
    border-top: 0px;
}

.require_div .require_suptitle{
    border-bottom:1px solid #aaa;
    border-top: 0px;
    position: relative;
    padding-right: 50px !important;
}

.require_slidebox .require_suptitle.col_fff{
    color: #FFF;
}

.require_slidebox .require_suptitle{
    background-color: #f6f6f6;
    color: #4f4f4f;
    padding: 25px;
    cursor: pointer;
}

.require_slidebox .require_content{
    padding: 25px;
  /* display: none;*/
}

.require_div .require_suptitle.col_fff .svg-inline--fa{
    position: absolute;
    background-color: #FFF ;
    top: 50%;
    color: #e01f1c;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    padding: 10px;
    right: 0;
    transform: translate(-50%, -50%);
}
.require_div .require_suptitle .svg-inline--fa{
    position: absolute;
    background-color: #e01f1c;
    top: 50%;
    color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    padding: 10px;
    right: 0;
    transform: translate(-50%, -50%);
}

table.fees_table{
    width: 100%;
    text-align: center;
}

table.fees_table thead{
    font-weight: 600;
    color: #fff;
    background-color: #e01f1c;
}

table.fees_table thead th{
    position: relative;
    padding: 10px;
    font-size: 20px;
}

table.fees_table td{
    width: 20%;
    padding: 10px;
}

table.fees_table thead th:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0%;
    right: -1px;
    height: 100%;
    border-right: 1px solid #aaa;
}

table.fees_table tbody tr{
    border-bottom: 1px solid #aaa;
}

table.fees_table tbody tr td{
    position: relative;
}

table.fees_table tbody tr td:nth-child(-n+4)::after{
    content: "";
    position: absolute;
    top: 0%;
    right: -1px;
    height: 100%;
    width: 1px;
    background-image: linear-gradient(to bottom, #aaa 0%, #aaa 50%, transparent 50%);
    background-size: 100% 10px;
    background-repeat: repeat-y;
}

table.fees_table tbody tr:first-child td:nth-child(1)::after,
table.fees_table tbody tr:first-child td:nth-child(4)::after{
    content: none;
}

ul.ul_style1 li::marker {
    color: #e01f1c;
}

.application_for_membership .main a{
    color: #e01f1c;
}

.apply_membership .section1 h3{
    font-size: 20px;
}

.form_grid_no_br .form_grid  input{
    border: none;
}

.form_grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
}

.form_grid label,
.qual_form .qual_box label{
    display: block;
    margin-bottom: 5px;
}

.form_grid input{
    width: 100%;
    background-color: #f4f4f4;
    padding: 10px;
    color: #000;
    border-radius: 8px;
    border: 1px solid #c7c7c7;
}

.qual_box input{
    width: 100%;
    background-color: #fff;
    padding: 10px;
    color: #000;
    border-radius: 8px;
    border: 1px solid #c7c7c7;
}

.detailqual_div textarea{
    width: 100%;
    border: solid 1px #CCC !important;
    border-radius: 10px !important;
    min-height: 80px;
}
.input_large{
    grid-column: span 2;
}

.qual_form .btn_remove_form{
    text-align: right;
    width:50px;
    position: absolute;
    right: 15px;
    padding: 0 10px;
}

.qual_form .qual_box{

    position: relative;
    display: flex;
    padding: 20px;
    background-color: #f4f4f4;
    color: #4d4d4d;
    border-radius: 8px;
    border: 1px solid #c7c7c7;
    gap: 20px;
    margin-bottom: 16px;
        flex-wrap: wrap;
}

.qual_form .qual_box .fromqual_div{
    width: 49%;
}

.qual_form .qual_box .toqual_div{
    width: 49%;
}
.form_mtype_11 .qual_form .qual_box .detailqual_div ,.form_mtype_12 .qual_form .qual_box .detailqual_div{
    width: 100%;
}

.qual_form .qual_box .detailqual_div{
    width: 100%;
}

.apply_membership h2{
    font-size: 28px;
}

.apply_membership .section2 h3{
    font-size: 20px;
}

.apply_membership  h4{
    font-size: 18px;
    font-weight: 400;
}

.apply_membership .qual_title{
    position: relative;
}


.apply_membership .qual_title .svg-inline--fa{
    position: absolute;
    background-color: #e01f1c;
    top: 50%;
    color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    padding: 5px;
    right: 0;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.apply_membership .attestation_div{
    padding: 40px 20px;
    color: #fff;
    background-color: #444;
    border-radius: 10px;
}

.apply_membership .attestation_div h4{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.apply_membership .section3 .linear_btn{
    /*width: */
}

.apply_membership .section3 .linear_btn svg{
    margin-left: 0;
}

.ac_ms_list_container{
    width: 1320px;
    overflow-x: scroll;
    margin-right: auto;
    margin-left: auto;
}

.amlist_table{
    border:1px solid #adadad;
    border-radius: 8px;
    overflow: hidden;
}

.amlist_table_top,.list_member .member_div1{
    display: flex;
    gap: 32px;
    position: relative;
}

.amlist_table_top{
    padding: 16px;
    border-bottom: 1px solid #adadad;
}

.list_member{
    padding: 16px;
}

.amlist_table_top .top_no,
.amlist_table_top .top_name,
.amlist_table_top .top_id,
.amlist_table_top .top_type .type_title,
.amlist_table_top .top_remark,
.amlist_table_top .top_icon,
.member_div2 .member_div2_title{
    color: #9b9b9b;
    font-size: 16px;
}

.list_member .member_div1{
    color: #000;
}


.amlist_table_top .top_no,.list_member .member_div1 .member_no{
    width: 36px;
}

.amlist_table_top .top_name,.list_member .member_div1 .member_name{
    width: 220px;
}

.amlist_table_top .top_id,.list_member .member_div1 .member_id{
    width: 90px;
}

.amlist_table_top .top_type,.list_member .member_div1 .member_type{
    width: 400px;
}

.amlist_table_top .top_remark,.list_member .member_div1 .member_remark{
    width: 300px;
}

.list_member .member_div1 .member_id{
    text-align: center;
}

.amlist_table_top .top_icon{
    position: absolute;
    right: 30px;
    top: 16px;
}

.list_member .member_div1 .member_icon{
    position: absolute;
    right: 95px;
    top: 1px;
}

.member_icon svg{
    background-color: #e01f1c;
    color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    padding: 5px;
}

.member_div2{
    padding: 15px 20px;
    background-color: #fff;
    border-radius:15px;
    display: flex;
    gap: 50px;
    border:1px solid #adadad;
    margin-top: 16px;
}


.type_div,.member_type{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    color:#e01f1c;
}

.amlist_table > div:nth-child(even){
    background-color: #f9f9f9;
}


.div_page_banner{
    height: calc(100vw / 4.25) !important;
    background-size: cover !important;
    background-position: center CENTER !important;
    position: relative;

}

.hk_sound_map {
       padding-bottom: 0px;
}

.div_page_banner h1{
    font-size: 70px;
    color:#FFF
}

.div_page_banner > .container{
    display: flex;
    align-items: center;
}

@media screen and (min-width: 1600px){

}

@media screen and (max-width:1600px){

}

@media screen and (max-width:1400px){

}

@media screen and (max-width:1200px){

}

@media screen and (max-width:991px){

}

@media screen and (max-width:991px){

}

@media screen and (max-width:767.9px){

}