body {

}
.bg_assessment{
    position: absolute;
    top: 6px;
    left: 54px;
    height: 96%;
}
.display_course_menu_section {

    width: 100%;
}

.bar_bg_1 {
    height: 78px;
    width: 100%;
    background-color: #00365C;
    position: absolute;
    z-index: 0;
}

.nav_bar_bottom {
    background-color: #00365C;
    height: 52px;
    width: 100%;
    position: absolute;
    bottom: 0px;
}

.bar_bg_1 .bg_img_title {
    height: 70px;
    position: absolute;
    left: 0px;
    top: 4px;
}

.bar_bg_1 .title_page {
    font-size: 20px;
    color: #F89938;
    position: absolute;
    left: 0px;
    top: 24px;
}

.sub_menu_link_section {
    position: absolute;
    color: #FFFFFF;
    font-size: 12px;
    right: 0px;
    top: 12px;
}

.course_menu_link .caption {
    bottom: 0px;
    font-size: 14px;
    position: absolute;
    text-align: center;
    width: 90%;
    margin-left: 5%;
}

.nav_bar_bottom .caption {
    font-size: 14px;
    color: #FFFFFF;
    position: absolute;
    left: 0px;
    top: calc(50% - (18px / 2));
}

.txt_orange {
    color: #F79838;
}

.main_box_content {
    width: 100%;
    height: 538px;
    position: absolute;
    top: 78px;
}

.caption a:hover {
    color: #9A3366;
}

.txt_t0 {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
    font-weight: bold;
}

.txt_t1 {
    font-size: 12px;
    line-height: 20px;
    width: 100%;
    margin-bottom: 24px;
    color: #1C3664;
    display: inline-block;
    margin-top: 12px;
}

.bg_txt_t2 {
    position: absolute;
    top: 165px;
    left: -38px;
    width: 328px;
}

.txt_t2 {
    position: absolute;
    font-size: 12px;
    line-height: 20px;
    top: 200px;
    width: 228px;
    color: #1C3664;
}

.txt_t3 {
    position: absolute;
    font-size: 12px;
    line-height: 20px;
    top: 360px;
    width: 228px;
    color: #1C3664;
}

.txt_t4 {
    color: #9A3366;
    font-size: 14px;
    font-style: italic;
    position: absolute;
    top: 508px;
    right: 256px;
}

.M_intro {
    position: absolute;
    right: 97px;
    top: 37px;
    width: 525px;
}

.reset_submit_section {
    width: 174px;
    height: 40px;
    position: absolute;
    right: 24px;
    bottom: 24px;
}

.reset_submit_section_nor {
    width: 174px;
    height: 40px;
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.reset_submit_section_nor_sub {
    width: 174px;
    height: 40px;
    position: absolute;
    right: 0px;
    bottom: -40px;
}

.reset_btn {
    position: absolute;
    height: 100%;
    left: 0px;
}

.submit_btn {
    position: absolute;
    height: 100%;
    right: 0px;    
    z-index: 5;
    cursor: pointer;
}

.feedback_btn {
    position: absolute;
    height: 100%;
    right: 0px;
    z-index: 5;
    cursor: pointer;
}

.certificate_btn {
    position: absolute;
    height: 100%;
    right: 0px;    
    z-index: 5;
    cursor: pointer;
}

.restart_btn {
    position: absolute;
    height: 100%;
    right: 0px;    
    z-index: 5;
    cursor: pointer;
}



#box_alex {
    width: 66px;
    height: 200px;
    position: absolute;
    top: 54px;
    left: 570px;
    z-index: 2;
}

.popup_box {
    width: 264px;
    height: 164px;
    position: absolute;
}

.popup_box .txt_box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 14px;
    color: #1C3664;
    font-family: Comic Sans MS, Comic Sans, cursive;
}

.popup_box_2 {
    width: 306px;
    height: 166px;
    position: absolute;
    top: 324px;
    left: 40px;
    z-index: 5;
}

.popup_box_2 .txt_box {
    width: 90%;
    height: 100%;
    box-sizing: border-box;
    padding: 32px 36px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 12px;
    color: #DD6226;
    font-family: Comic Sans MS, Comic Sans, cursive;
}

.bold_txt {
    font-weight: bold;
}

#popup_alex {
    top: 24px;
    left: 320px;
    z-index: 5;
}

.close_button {
    position: absolute;
    height: 32px;
    top: -12px;
    right: -12px;
}

.select_btn {
    position: absolute;
    height: 40px;
    bottom: -10px;
    left: 94px;
    cursor: pointer;
}

.answer_section {
    width: 100%;
}

.answer_section {
    color: #00365C;
    font-size: 12px;
}

.answer_box_txt {
    width: calc(100%);
    margin-left: 0px;
    font-size: 12px;
    box-sizing: border-box;
    padding: 12px;
    border: none;
    margin-top: 2px;
    margin-bottom: 10px;
}

.text_section_flow {
    width: 100%;
    color: #00365C;
}

.txt_intro_t {
    margin-bottom:12px;
    font-size: 20px;
    font-family: 'CenturyGothic' !important;
}

.txt_intro_t_2 {
    margin-bottom: 12px;
    font-size: 20px;
    font-family: 'CenturyGothic' !important;
}

.txt_topic_t {
    margin-top: 0px;
    margin-bottom: 18px;
    color: #CD0167;
    font-style: italic;
}

.txt_t {
    display: block;
    margin-top: 0px;
    margin-bottom: 12px;
    font-size: 12px;
    z-index: 0;
}

.txt_t05 {
    display: block;
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    z-index: 0;
}

.txt_radio {
    position: relative;
    margin-bottom: 14px;
    margin-left: 32px;
    cursor: pointer;
    display: table;
}

.txt_input {
    border: 1px solid gray;
    font-size: 12px;
    padding: 4px;
    cursor: text !important;
    border: ridge;
}

.border_box_ui {
    margin-top: 0px;
    display: inline-block;
}

.question_box {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    position: absolute;
    top: 0px;
    left: 12px;
    z-index: 1;
    box-sizing: border-box;
    padding: 24px;
    color: #00365C;
    line-height: 18px;
}

.normal_txt_box {
    width: calc(100%);
    height: calc(100% - 24px);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    box-sizing: border-box;
    padding-top: 0px;
    color: #00365C;
    line-height: 18px;
}

.kofi {
    height: 280px;
    position: absolute;
    bottom: 20px;
    left: 40px;
}

.mary {
    height: 240px;
    position: absolute;
    bottom: 20px;
    left: 190px;
}

.ola {
    height: 200px;
    position: absolute;
    bottom: 20px;
    left: 400px;
}

.nkosi {
    height: 200px;
    position: absolute;
    bottom: 20px;
    left: 540px;
}

.fatima {
    height: 190px;
    position: absolute;
    bottom: 20px;
    left: 680px;
}

.sheema {
    height: 120px;
    position: absolute;
    bottom: 20px;
    right: 40px;
}

.b_1 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 0px;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.bbb_1 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 44px;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.b_2 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 0px;
    left: 25%;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.bbb_2 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 44px;
    left: 25%;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.b_3 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 0px;
    right: 25%;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.bbb_3 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 44px;
    right: 25%;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.b_4 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.bbb_4 {
    width: 25%;
    height: 320px;
    position: absolute;
    bottom: 44px;
    right: 0px;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.select_combo {
    width: 120px;
    height: 18px;
    margin-left: calc(50% - (120px / 2));
}

.box_txt_b {
    width: 55%;
    position: absolute;
    right: 0px;
    top: 40px;
}

.box_txt_b_2 {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 40px;
}

.pic_b {
    position: absolute;
    bottom: 80px;
    right: 60%;
}
.pic_b_size{
    position: absolute;
    top: 36px;
    right: 60%;
}
.pic_b_size_new{
    position: absolute;
    top: 224px;
    right: 60%;
}
.pic_b_new {
    position: absolute;
    bottom: 80px;
    right: 65%;
}
.pic_b_1 {
    height: 160px;
}
.pic_b_1_new{
    width:  calc(68px * 1.15);
}

.pic_b_2 {
    height: 130px;
}
.pic_b_2_new {
    width:  calc(27px * 1.15);
}
.pic_b_3 {
    height: 100px;
}
.pic_b_3_nkosi{
    width:  calc(32px * 1.15);
}
.pic_b_4_jack{
    width:  calc(41px * 1.15);
}
.pic_b_3_new {
    width:  calc(37px * 1.15);
}
.pic_b_4 {
    height: 180px;
}
.pic_b_4_new {
    width:  calc(52px * 1.15);
}
.QA_section_box {
    width: 70%;
}

.QA_pic_info {
    position: absolute;
    right: 100px;
    bottom: 100px;
    height: 240px;
}

.Q_box {
    width: fit-content;
}
.close_p1{
    height: 28px;
    right: 46px;
    top: 24px;
    z-index: 51;
    position: absolute;
    cursor: pointer;
}
.close_p2{
    height: 28px;
    right: 46px;
    top: 24px;
    z-index: 51;
    position: absolute;
    cursor: pointer;
}
.close_p3{
    height: 28px;
    right: 46px;
    top: 24px;
    z-index: 51;
    position: absolute;
    cursor: pointer;
}
.close_p4{
    height: 28px;
    right: 46px;
    top: 24px;
    z-index: 51;
    position: absolute;
    cursor: pointer;
}
.pic_b_b_2_1 {
    position: absolute;
    /* height: 160px; */
    /* top: 40px; */
    right: 60%;
}

.size_p1{
    width: 71%; 
    height: 71%; 
    left:0px;
     top:36px;
      z-index:50;
}
.pic_b_b_2_1_new{
    position: absolute;
    width:  calc(32px * 1.15);
    bottom: 80px;
    right: 65%;
}
.pic_b_b_2_2 {
    position: absolute;
    /* height: 160px; */
    top: 36px;
    right: 60%;
}
.size_p2{
    width: 71%;
     height: 71%;
      left:0px; 
      top:36px;
       z-index:50; 
}
.pic_b_b_2_2_new{
    position: absolute;
    width:  calc(68px * 1.15);
   bottom: 80px;
    right: 65%;
}
.pic_b_b_2_3 {
    position: absolute;
    top: 36px;
    right: 0px;
}
.size_p3{
    width: 71%;
    height: 71%; 
    top:36px; 
    left:0px; 
    z-index:50;
}
.pic_b_b_2_3_new{
    position: absolute;
    width:  calc(100px * 1.15);
   bottom: 80px;
    right: 24%;
}
.close_c9_p1, .close_c9_p2, .close_c9_p3, .close_c9_p4{
    height: 28px;
    right: 18px;
    top: 24px;
    z-index: 51;
    position: absolute; 
    cursor: pointer;
}
.close_c8_p1{
    height: 28px;
    left: 188px;
    top: 212px;
    z-index: 51;
    position: absolute; 
    cursor: pointer;
}
.close_c8_p2{
    height: 28px;
    left: 430px;
    top: 212px;
    z-index: 51;
    position: absolute; 
    cursor: pointer;
}
.close_c8_p3{
    height: 28px;
    right: 226px;
    top: 212px;
    z-index: 51;
    position: absolute; 
    cursor: pointer;
}
.close_c8_p4{
    height: 28px;
    right: -12px;
    top: 212px;
    z-index: 51;
    position: absolute; 
    cursor: pointer;
}
.pic_b_1_8_1_paula{
    width:  calc(35px * 1.15);
}
.pic_b_b_2_3_new_adam{
    width:  calc(100px * 1.15);
}
.pic_b_2_ola_new{
    position: absolute;
    width:  calc(30px * 1.15);
   bottom: 80px;
   right: 65%;
}
.pic_b2_ola_width{
    width:  calc(30px * 1.15);
}
.pic_b_b_2_4 {
    position: absolute;
    height: 160px;
    top: 36px;
    right: 60%;
}
.size_p4{
    width: 71%; 
    height: 71%;
     top:36px; 
     left:0px;
      z-index:50;
}
.pic_b_b_2_4_new {
    position: absolute;
    width:  calc(27px * 1.15);
    bottom: 80px;
    right: 65%;
}

.img_info_des {
    text-align: center;
    margin-top: 24px;
}

.pic_b_b_3_1 {
    position: absolute;
    height: 60px;
    bottom: 85px;
    left: 340px;
    opacity: 0.2;
}

.pic_b_b_3_2 {
    position: absolute;
    height: 110px;
    bottom: 85px;
    right: 150px;
    opacity: 0.2;
}

.radio_table_box {
    position: relative; 
    text-align: center;
}

.box_b_6_1 {
    width: 40%;
    height: 140px;
    position: absolute;
    top: 130px;
    left: 40px;
    box-sizing: border-box;
    padding: 10px 0px;
}

.box_b_6_2 {
    width: 40%;
    height: 140px;
    position: absolute;
    top: 269px;
    left: 40px;
    box-sizing: border-box;
    padding: 10px 0px;
    padding-top: 20px;
}

.box_b_6_3 {
    width: 50%;
    height: 280px;
    position: absolute;
    top: 136px;
    right: 40px;
    box-sizing: border-box;
    padding: 10px 0px;
    box-sizing: border-box;
    padding-left: 30px;
}

.border_ver {
    height: 100%;
    position: absolute;
    left: -20px;
}

.border_hor {
    width: 100%;
    position: absolute;
    top: -20px;
}

.border_all_img {
    position: absolute;
    width: 105%;
    height: 330px;
    left: -20px;
    z-index: -1;
}

.pic_b_b_6_1 {
    position: absolute;
    height: 100px;
    top: 20px;
    left: 0px;
}

.pic_b_b_6_2 {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
}

.box_group_drop {
    width: 70%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
}

.box_drop {
    width: 100%;
    height: 25px;
    margin-bottom: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding-left: 4px;
    padding-top: 3px;
}

.drop_txt {
    position: absolute;
    text-shadow: 2px 2px 3px gray;
    cursor: pointer;
}

.drop_txt_1 {

}

.drop_txt_2 {
    top: 25px;
}

.drop_txt_3 {
    top: 50px;
}

.drop_txt_4 {
    top: 75px;
}

.drop_txt_5 {
    top: 100px;
}

.drop_txt_6 {
    top: 125px;
}

.drop_txt_7 {
    top: 150px;
}

.box_b_7_1 {
    width: 50%;
}

.pic_b_b_7_1 {
    position: absolute;
    height: 400px;
    top: 0px;
    right: 30px;
}

.half_box {
    width: 50%;
}

.p60_box {
    width: 60%;
}

.box_media {
    position: absolute;
    width: 40%;
    height: 420px;
    right: 40px;
    top: 0px;
}

.box_media_frame {
    height: 100%;
}

.media_select_page {
    position: absolute;
    left: 20px;
    bottom: 15px;
    cursor: pointer;
}

.media_show {
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;
}

table img {
    border: 1px solid #FFFFFF;
    cursor: pointer;
}

table img:hover {
    /* border: 1px solid #00365C; */
}

.hold_drop {
    position: absolute;
    bottom: 20px;
    right: 110px;
}

td:hover img {
    border: 1px solid #00365C;
}

.img_des_1:hover img {
    border: 1px solid #00365C;
}

.img_des_b_1_8_1:hover img {
    border: 1px solid #00365C;
}

.img_des_b_1_8_2:hover img {
    border: 1px solid #00365C;
}

.img_des_b_1_8_3:hover img {
    border: 1px solid #00365C;
}

.img_center {
    text-align: center;
}

.text_info_des_img {
    width: 140px;
    position: absolute;
    top: 0px;
    left: calc(50% - (140px / 2));
    top: 40px;
    text-align: center;
    cursor: pointer;
}

.img_des_1 img {
    border: 1px solid #FFFFFF;
}

.img_des_1 img:hover {
    border: 1px solid #00365C;
}

.img_des_1 {
    position: absolute;
    right: 40px;
    top: 20px;
    width: 160px;
    z-index: 1;
}

.box_b_1_class_4 {
    width: 200px;
    height: 220px;
    position: absolute;
    top: 180px;
    right: 60px;
    box-sizing: border-box;
}

.pic_b_1_class_4_1 {
    height: 160px;
    position: absolute;
    right: 0px;
    bottom: 20px;
}

.b_class_1_8_1 {
    width: 25%;
    height: 300px;
    position: absolute;
    top: 100px;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.b_class_1_8_2 {
    width: 25%;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 25%;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.b_class_1_8_3 {
    width: 25%;
    height: 300px;
    position: absolute;
    top: 100px;
    right: 25%;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.b_class_1_8_4 {
    width: 25%;
    height: 300px;
    position: absolute;
    top: 100px;
    right: 0px;
    padding: 12px;
    box-sizing: border-box;
    z-index: 5;
}

.pic_b_1_8_1 {
    height: 100px;
}

.pic_b_1_8_2 {
    height: 140px;
}

.pic_b_1_8_3 {
    height: 140px;
}

.pic_b_1_8_4 {
    height: 160px;
}

.img_des_b_1_8_1 {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 160px;
    z-index: 6;
    cursor: pointer;
}

.img_des_b_1_8_1 img {
    border: 1px solid #FFFFFF;
}

.img_des_b_1_8_1 img:hover {
    border: 1px solid #00365C;
}

.img_des_b_1_8_2 {
    position: absolute;
    left: 180px;
    bottom: 0px;
    width: 160px;
    z-index: 6;
    cursor: pointer;
}

.img_des_b_1_8_2 img {
    border: 1px solid #FFFFFF;
}

.img_des_b_1_8_2 img:hover {
    border: 1px solid #00365C;
}

.img_des_b_1_8_2 .text_info_des_img {
    cursor: pointer;
}


.img_des_b_1_8_3 {
    position: absolute;
    left: 360px;
    bottom: 0px;
    width: 160px;
    z-index: 6;
    cursor: pointer;
}

.img_des_b_1_8_3 img {
    border: 1px solid #FFFFFF;
}

.img_des_b_1_8_3 img:hover {
    border: 1px solid #00365C;
}

.img_des_b_1_8_3 .text_info_des_img {
    cursor: pointer;
}


.notic_txt {
    position: absolute;
    bottom: 40px;
}

.b_drapndrop_class_10_1 {
    width: 25%;
    height: 230px;
    box-sizing: border-box;
    padding: 12px;
    position: absolute;
    bottom: 40px;
}

.b_drapndrop_class_10_2 {
    width: 25%;
    height: 230px;
    box-sizing: border-box;
    padding: 12px;
    position: absolute;
    bottom: 40px;
    left: 25%;
}

.b_drapndrop_class_10_3 {
    width: 25%;
    height: 230px;
    box-sizing: border-box;
    padding: 12px;
    position: absolute;
    bottom: 40px;
    right: 25%;
}

.b_drapndrop_class_10_4 {
    width: 25%;
    height: 230px;
    box-sizing: border-box;
    padding: 12px;
    position: absolute;
    bottom: 40px;
    right: 0px;
}

.topic_Q:hover {
    font-weight: bold;
}

.img_logo_bg_1 {
    position: absolute;
    height: 360px;
    bottom: 20px;
    z-index: 0;
    left: 10px;
}

.img_logo_bg_2 {
    position: absolute;
    height: 360px;
    bottom: 0px;
    left: 10px;
    z-index: 0;
}

.img_logo_bg_M3_U1 {
    position: absolute;
    height: 455px;
    bottom: -20px;
    z-index: 0;
    left: -10px;
}

.img_logo_bg_M3_U2 {
    position: absolute;
    height: 450px;
    bottom: -40px;
    z-index: 0;
    left: 20px;
}

.box_animated {
    width: 40%;
    height: 100%;
    position: absolute;
    right: 40px;
    top: 0px;
    box-sizing: border-box;
    padding: 12px;
}

.body_1_1 {
    position: absolute;
    height: 100px;
    top: 40px;
    left: 50px;
    cursor: pointer;
}

.body_1_2 {
    position: absolute;
    height: 130px;
    top: 125px;
    left: 0px;
    cursor: pointer;
}

.body_1_3 {
    position: absolute;
    height: 160px;
    top: 190px;
    left: 25px;
    cursor: pointer;
}

.box_show_detail {
    position: absolute;
    width: 180px;
    height: 180px;
    right: 10px;
    top: 40px;
    z-index: -1;
}

.box_show_detail .title {
    width: 100%;
    height: 20px;
    background-color: #F89938;
    box-sizing: border-box;
    padding: 2px;
    padding-left: 6px;
    color: #FFFFFF;
    z-index: -1;
}

.box_show_detail .title_2 {
    width: 100%;
    height: 40px;
    background-color: #F89938;
    box-sizing: border-box;
    padding: 2px;
    padding-left: 6px;
    color: #FFFFFF;
}

.box_show_detail .info {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    color: #F89938;
}

.border_2 {
    border: 1px solid #009ACC !important;
    height: 160px;
}

.color_2 {
    color: #009ACC !important;
}

.bgcolor_2 {
    background-color: #009ACC !important;
}

.border_3 {
    border: 1px solid #990099 !important;
    height: 100px;
}

.color_3 {
    color: #990099 !important;
}

.bgcolor_3 {
    background-color: #990099 !important;
}

.box_show_detail_img {
    width: 40%;
    height: 80%;
    position: absolute;
    right: 0px;
    top: 0px;
}

.pic_b_1_2_vc_2_1 {
    position: absolute;
    height: 180px;
    bottom: 0px;
    left: -40px;
    z-index: 1;
}

.pic_b_1_2_vc_2_2 {
    position: absolute;
    height: 360px;
    bottom: -50px;
    left: 0px;
}

.box_show_detail_img .txt_info{
    position: absolute;
    right: 0px;
    width: 120px;
    bottom: 0px;
}

.body_2_1 {
    position: absolute;
    height: 340px;
    top: 40px;
    left: 0px;
    z-index: -2;
}

.bb_1 {
    width: 50px;
    height: 80px;
    position: absolute;
    left: 30px;
    top: 50px;
    cursor: pointer;
}

.bb_2 {
    width: 50px;
    height: 90px;
    position: absolute;
    left: 85px;
    top: 40px;
    cursor: pointer;
}

.bb_3 {
    width: 90px;
    height: 80px;
    position: absolute;
    left: -10px;
    top: 130px;
    cursor: pointer;
}

.bb_4 {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 80px;
    top: 130px;
    cursor: pointer;
}

.bb_5 {
    width: 60px;
    height: 130px;
    position: absolute;
    left: 20px;
    top: 200px;
    cursor: pointer;
}

.bb_6 {
    width: 60px;
    height: 140px;
    position: absolute;
    left: 80px;
    top: 210px;
    cursor: pointer;
}

.popup_small_lable {
    position: absolute;
    color: #FFFFFF;
    padding: 3px;
}

.position_2_ic_1 {
    top: 40px;
}

.position_2_ic_2 {
    top: 40px;
    left: 80px;
}

.position_2_ic_3 {
    top: 120px;
}

.position_2_ic_4 {
    top: 120px;
    left: 80px;
}

.position_2_ic_5 {
    top: 240px;
}

.position_2_ic_6 {
    top: 240px;
    left: 80px;
}

.bgcolor_2_ic_1 {
    background-color: #990099 !important;
}

.bgcolor_2_ic_2 {
    background-color: #99CC00 !important;
}

.bgcolor_2_ic_3 {
    background-color: #009ACC !important;
}

.bgcolor_2_ic_4 {
    background-color:#662244 !important;
}

.bgcolor_2_ic_5 {
    background-color: #F89938 !important;
}

.bgcolor_2_ic_6 {
    background-color: #003366 !important;
}

.color_2_ic_1 {
    color: #990099 !important;
}

.color_2_ic_2 {
    color: #99CC00 !important;
}

.color_2_ic_3 {
    color: #009ACC !important;
}

.color_2_ic_4 {
    color:#662244 !important;
}

.color_2_ic_5 {
    color: #F89938 !important;
}

.color_2_ic_6 {
    color: #003366 !important;
}

.border_2_ic_1 {
    border: 1px solid #990099 !important;
}

.border_2_ic_2 {
    border: 1px solid #99CC00 !important;
    height: 200px;
}

.border_2_ic_3 {
    border: 1px solid #009ACC !important;
}

.border_2_ic_4 {
    border: 1px solid #662244 !important;
}

.border_2_ic_5 {
    border: 1px solid #F89938 !important;
}

.border_2_ic_6 {
    border: 1px solid #003366 !important;
}

.bbc_1 {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 15px;
    top: 120px;
    cursor: pointer;
    
}

.bbc_2 {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 65px;
    top: 160px;
    cursor: pointer;
    
}

.bbc_3 {
    width: 30px;
    height: 40px;
    position: absolute;
    left: 100px;
    top: 160px;
    cursor: pointer;
    
}

.bbc_4 {
    width: 50px;
    height: 30px;
    position: absolute;
    left: 65px;
    top: 195px;
    cursor: pointer;
    
}

.bbc_5 {
    width: 40px;
    height: 30px;
    position: absolute;
    left: 75px;
    top: 220px;
    cursor: pointer;
    
}

.bbc_6 {
    width: 30px;
    height: 25px;
    position: absolute;
    left: 60px;
    top: 240px;
    cursor: pointer;
    
}

.bbc_7 {
    width: 30px;
    height: 35px;
    position: absolute;
    left: 110px;
    top: 225px;
    cursor: pointer;
    
}

.bbc_8 {
    width: 30px;
    height: 55px;
    position: absolute;
    left: 130px;
    top: 160px;
    cursor: pointer;
    
}

.bgcolor_2_co_1 {
    background-color: #CC0066 !important;
}

.bgcolor_2_co_2 {
    background-color: #99CC00 !important;
}

.bgcolor_2_co_3 {
    background-color: #009ACC !important;
}

.bgcolor_2_co_4 {
    background-color:#400000 !important;
}

.bgcolor_2_co_5 {
    background-color: #662244 !important;
}

.bgcolor_2_co_6 {
    background-color: #F89938 !important;
}

.bgcolor_2_co_7 {
    background-color: #003366 !important;
}

.bgcolor_2_co_8 {
    background-color: #990099 !important;
}

.color_2_co_1 {
    color: #CC0066 !important;
}

.color_2_co_2 {
    color: #99CC00 !important;
}

.color_2_co_3 {
    color: #009ACC !important;
}

.color_2_co_4 {
    color:#400000 !important;
}

.color_2_co_5 {
    color: #662244 !important;
}

.color_2_co_6 {
    color: #F89938 !important;
}

.color_2_co_7 {
    color: #003366 !important;
}

.color_2_co_8 {
    color: #990099 !important;
}

.border_2_co_1 {
    border: 1px solid #CC0066 !important;
}

.border_2_co_2 {
    border: 1px solid #99CC00 !important;
    height: 300px;
}

.border_2_co_3 {
    border: 1px solid #009ACC !important;
}

.border_2_co_4 {
    border: 1px solid #400000 !important;
}

.border_2_co_5 {
    border: 1px solid #662244 !important;
}

.border_2_co_6 {
    border: 1px solid #F89938 !important;
}

.border_2_co_7 {
    border: 1px solid #003366 !important;
}

.border_2_co_8 {
    border: 1px solid #990099 !important;
}

.position_2_co {
    top: 40px;
}

.bbw_1 {
    position: absolute;
    height: 40px;
    width: 40px;
    left: 60px;
    top: 110px;
    z-index: 2;
    cursor: pointer;
    
}

.bbw_2 {
    position: absolute;
    height: 40px;
    width: 40px;
    left: 120px;
    top: 150px;
    z-index: 2;
    cursor: pointer;
    
}

.bbw_3 {
    position: absolute;
    height: 40px;
    width: 40px;
    left: 70px;
    top: 185px;
    z-index: 2;
    cursor: pointer;
    
}

.bbw_4 {
    position: absolute;
    height: 40px;
    width: 40px;
    left: 115px;
    top: 255px;
    z-index: 2;
    cursor: pointer;
    
}

.bbw_5 {
    position: absolute;
    height: 40px;
    width: 40px;
    left: 40px;
    top: 275px;
    z-index: 2;
    cursor: pointer;
    
}

.bgcolor_2_bw_1 {
    background-color: #990099 !important;
}

.bgcolor_2_bw_2 {
    background-color: #009ACC !important;
}

.bgcolor_2_bw_3 {
    background-color: #F89938 !important;
}

.bgcolor_2_bw_4 {
    background-color: #003366 !important;
}

.bgcolor_2_bw_5 {
    background-color: #99CC00 !important;
}

.color_2_bw_1 {
    color: #990099 !important;
}

.color_2_bw_2 {
    color: #009ACC !important;
}

.color_2_bw_3 {
    color: #F89938 !important;
}

.color_2_bw_4 {
    color: #003366 !important;
}

.color_2_bw_5 {
    color: #99CC00 !important;
}

.border_2_bw_1 {
    border: 1px solid #990099 !important;
}

.border_2_bw_2 {
    border: 1px solid #009ACC !important;
}

.border_2_bw_3 {
    border: 1px solid #F89938 !important;
}

.border_2_bw_4 {
    border: 1px solid #003366 !important;
}

.border_2_bw_5 {
    border: 1px solid #99CC00 !important;
}

.Q_img_side {
    position: absolute;
    right: 60px;
    top: 40px;
}

.validate_icon {
    position: absolute;
    left: -16px;
    width: 16px;
    border: 0 !important;
    cursor: auto !important;
}

.bg_QA {
    position: absolute;
    width: 100%;
    height: 40px;
    z-index: -1;
}

.img_info_M1_U1_WHAT_8 {
    width: 350px;
    height: 150px;
    position: absolute;
    right: 160px;
    top: 150px;
}

.img_info_M1_U1_WHAT_8 .img_1 {
    display: inline-block;
    height: 100%;
}

.img_info_M1_U1_WHAT_8 .img_2 {
    display: inline-block;
    height: 65%;
}

.img_info_M1_U1_WHAT_8 .img_3 {
    display: inline-block;
    height: 23%;
}

.QA_M1_U1_WHAT_1 {
    height: 60px;
    top: 60px;
    width: 105%;
    left: -20px;
}

.QA_M1_U1_WHAT_3 {
    height: 36px;
    top: 86px;
    width: 105%;
    left: -20px;
}

.QA_M1_U1_WHAT_5 {
    height: 30px;
    top: 55px;
    width: 400px;
    left: -20px;
}

.QA_M1_U1_WHAT_6 {
    height: 30px;
    top: 75px;
    width: 105%;
    left: -20px;
}

.QA_M1_U1_WHAT_8 {
    height: 30px;
    top: 50px;
    width: 105%;
    left: -20px;
}

.QA_M1_U1_CLASS_4 {
    height: 70px;
    top: 170px;
    width: 110%;
    left: -20px;
}

.QA_M1_U1_CLASS_5 {
    height: 40px;
    top: 170px;
    width: 60%;
    left: -20px;
}

.QA_M1_U1_CLASS_6 {
    height: 40px;
    top: 205px;
    width: 60%;
    left: -20px;
}

.QA_M1_U1_CLASS_7 {
    height: 50px;
    top: 30px;
    width: 105%;
    left: -20px;
}

.QA_M1_U1_CLASS_8 {
    height: 50px;
    top: 30px;
    width: 105%;
    left: -20px;
}

.QA_M1_U1_CLASS_9 {
    height: 50px;
    top: 30px;
    width: 105%;
    left: -20px;
}

.QA_M1_U1_CLASS_10 {
    height: 50px;
    top: 100px;
    width: 105%;
    left: -20px;
}

.QA_M2_U1_CLASS_10 {
    height: 40px;
    top: 25px;
    width: 60%;
    left: -20px;
}


.box_width_area_half {
    width: 55%;
    height: 100px;
    position: absolute;
    top: 180px;
}

.box_width_area_half_2 {
    top: 240px;
}

.box_submit_M1_U2_intro_1 {
    position: absolute;
    top: 245px;
    width: 100%;
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    .display_course_menu_section {

    }
    .main_box_content {
        height: calc(100vh - (52px + 78px + 28px));
    }
}