.bottom_bar {
    display: none
}
@media (max-width:767px) {
    .header .-social {
        display: none !important;
        z-index: -1 !important
    }
    .bottom_bar {
        display: block;
        position: fixed;
        bottom: 0;
        margin: 0 auto;
        width: 100%;
        z-index: 1
    }
    .bottom_bar .social {
        position: relative;
        text-align: center;
        display: flex;
        margin: 0 40px;
        margin-bottom: 20px;
    }
    .bottom_bar .social .items {
        width: 50px
    }
    .bottom_bar .social .items a {
        display: block
    }
    .bottom_bar .social .items img {
        width: 100%;
        height: auto
    }
}
.padding_top {
    margin-top: 20px;
    margin-bottom: 20px
}
.row_max {
    position: relative;
    width: 100%;
    height: auto
}
.row_max.bg_white {
    background-color: #fff
}
.row_max .bg_grey {
    background-color: #dedbdb;
    transition: all .3s;
    display: inline-block
}
.row_max .bg_grey:hover {
    text-decoration: none;
    background-color: #fff003
}
.row_max .bg_grey.active {
    text-decoration: none;
    background-color: #fff003
}
.row_max .bg_grey.box a {
    height: 80px;
    line-height: 80px;
    word-break: break-word;
    color: #000;
    text-align: center;
    display: block;
    font-size: 18px;
    text-shadow: 0 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    padding: 0 10px;
    text-decoration: none;
    min-width: 132px
}
.row_max .padding_cell {
    float: left;
    width: 100%;
    height: auto;
    background-color: #fff
}
.row_max .padding_cell .map_display {
    border: 20px solid #fff003
}
.row_max .padding_cell .map_display #map_overlay {
    display: none;
    position: absolute;
    height: 600px;
    text-align: center;
    line-height: 600px;
    font-size: 20px;
    color: #fff;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.44)
}
.row_max .link_no_col {
    font-size: 0;
    color: inherit !important;
    text-decoration: none
}
.row_max .link_no_col:hover {
    text-decoration: none
}
.row_max .link_no_col.active {
    color: inherit !important
}
.row_max .link_no_col.active div {
    background-color: #fff003
}
.row_max .link_no_col div {
    font-size: 2rem;
    background-color: #d6d6d6;
    color: #333 !important;
    padding: 10px 15px;
    text-align: center
}
.row_max .col_item_1 {
    float: left;
    width: 100%;
    transition: all .3s
}
.row_max .col_item_3 {
    float: left;
    width: 33.33%;
    transition: all .3s
}
.row_max .col_item_3.grey {
    padding: 20px 25px;
    background-color: #b7b2b2;
    color: #fff003;
    font-size: 20px
}
.row_max .col_item_3.grey.active {
    background-color: #fff003;
    color: #333
}
.row_max .col_item_3.grey:hover {
    background-color: #fff003;
    color: #333
}
.row_max .col_item_5 {
    float: left;
    width: 20%;
    background-color: #d6d6d6;
    transition: all .3s
}
.row_max .col_item_5.active {
    background-color: #fff003
}
.row_max .col_item_5:hover {
    background-color: #fff003
}
.row_max .col_item_5 a {
    outline: none
}
.row_max .col_item_5 a:hover {
    text-decoration: none
}
.row_max .col_item_5 img {
    max-width: 100%;
    height: auto
}
.row_max .col_item_12 {
    float: left;
    width: 100%;
    height: auto
}
.row_max .content {
    padding: 20px
}
.row_max .content .blue {
    color: #468ec5;
    margin-top: 0
}
.row_max .content ol {
    list-style-type: circle
}
.row_max .content ol li {
    line-height: 40px;
    font-size: 1.1em
}
.row_max .block_slider {
    display: block;
    width: 100%;
    float: left
}
.row_max .block_slider .info {
    display: table;
    position: absolute;
    width: 100%;
    height: inherit
}
.row_max .block_slider .info .data {
    display: table-cell;
    height: auto;
    vertical-align: middle
}
.row_max .block_slider .info .data .data_1 {
    font-family: 'Kanit', sans-serif;
    color: #fff;
    padding: 0;
    margin: 10px 0;
    font-size: 30px;
    width: 100%;
    text-align: center
}
.row_max .block_slider .info .data .data_2 {
    font-family: 'Kanit', sans-serif;
    color: #fff;
    padding: 0;
    margin: 5px 0;
    font-size: 22px;
    width: 100%;
    text-align: center
}
.row_max .block_slider .background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%
}
.row_max .items_map_child {
    float: left;
    width: 100%;
    height: auto;
    margin: 20px 0
}
.row_max .items_map_child:hover .header_info {
    background-color: #cfc300;
    color: #000
}
.row_max .items_map_child:hover .info {
    background-color: #fff003;
    color: #333
}
.row_max .items_map_child .header_info {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    color: #fff;
    font-size: 21px;
    transition: all .3s
}
.row_max .items_map_child .header_info span {
    position: absolute;
    z-index: 2
}
.row_max .items_map_child .info {
    height: auto;
    max-height: 400px;
    overflow: hidden;
    padding: 15px;
    transition: all .3s
}
/*@media (max-width:1199px) {
    .row_max .items_map_child .info {
        height: 350px;
        max-height: 400px;
        overflow: hidden;
        padding: 15px;
        transition: all .3s
    }
}
@media (max-width:991px) {
    .row_max .items_map_child .info {
        height: 270px;
        max-height: 270px;
        overflow: hidden;
        padding: 15px;
        transition: all .3s
    }
}*/
.row_max .items_map_child .info [class^="level"] {
    font-size: 14px;
    font-family: sans-serif
}
.row_max .items_map_child .info .level_1 {
    padding-bottom: 10px
}
.row_max .items_map_child .info .level_3 {
    padding-bottom: 10px
}
.row_max .items_map_child .info .level_4 {
    color: #000;
    font-weight: bold
}
.row_max .items_map_child .info .level_4 .col-xs-6 {
    cursor: pointer;
    outline: none
}
.row_max .items_map_child .info a:not(.md-button) {
    color: #000 !important
}
.row_max .items_map_child .info a:not(.md-button):hover {
    text-decoration: underline
}
.pattern_dark_grey {
    background-color: #828282
}
.pattern_light_grey {
    background-color: #dedbdb
}
@media (max-width:767px) {
    .row_max .col_item_3.grey {
        padding: 10px 25px
    }
}
.type_q {
    color: #e5142a;
    font-size: 1.2em;
    margin-bottom: 10px
}
.type_q .overlay_txt {
    position: absolute;
    z-index: 1;
    color: #fff;
    left: 23px;
    top: 1px;
    font-size: 16px
}
.type_q .fa {
    color: #e5142a;
    font-size: 1.5em
}
.type_a {
    color: #2b6fba;
    font-size: 1.2em
}
.type_a .overlay_txt {
    position: absolute;
    z-index: 1;
    color: #fff;
    left: 23px;
    top: 1px;
    font-size: 16px
}
.type_a .fa {
    color: #2b6fba;
    font-size: 1.5em;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}
.type_i {
    font-size: 14px;
    font-style: italic;
    padding-top: 10px
}
.type_l {
    border-bottom: 2px solid #eee;
    padding-right: 20px
}
.qa_row {
    margin-top: 15px;
    padding-left: 20px
}
.grey_menu.mobile ul li {
    display: inline-block
}
.grey_menu ul {
    list-style: none;
    padding: 0;
    margin: 0
}
.grey_menu ul li {
    padding: 0;
    width: 100%
}
.grey_menu ul li a {
    background-color: #dedbdb;
    color: #333;
    padding: 25px 10px 25px 25px;
    text-align: left;
    display: block;
    font-size: 16px;
    line-height: 22px;
    border-bottom: 4px solid #fff;
    text-decoration: none
}
.grey_menu ul li a.active {
    background-color: #fff003;
    color: #000
}
.grey_menu ul li a:hover {
    background-color: #fff003;
    text-decoration: none;
    color: inherit
}
.row_image div[class^="col-"] {
    margin-bottom: 15px
}
.row_image img {
    max-width: 100%;
    width: 100%
}
.six_menu {
    float: left;
    height: 732px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center
}
.six_menu .padding {
    margin-top: 240px
}
.six_menu .left, .six_menu .right {
    float: left;
    margin-bottom: 1%
}
.six_menu .left img, .six_menu .right img {
    max-width: 100%;
    width: 80%
}
.six_menu .left {
    width: 40%;
    margin-left: 9%;
    margin-right: 1%;
    text-align: right
}
.six_menu .right {
    width: 40%;
    margin-left: 1%;
    margin-right: 9%;
    text-align: left
}
.class_items {
    position: absolute;
    z-index: 1;
    top: 0;
    padding-left: 220px;
    padding-top: 20px
}
.class_items .items {
    float: left;
    width: 23%;
    margin-bottom: 5px;
    margin-right: 5px
}
.class_items .items img {
    width: 100%
}
.about_us .menu_2 {
    margin-top: 15px
}
.about_us .menu_2 .col-xs-12, .about_us .menu_2 .col-xs-6 {
    background-color: #b7b2b2
}
.about_us .menu_2 .col-xs-12.active, .about_us .menu_2 .col-xs-6.active {
    background-color: #fff003
}
.about_us .menu_2 .col-xs-12 a, .about_us .menu_2 .col-xs-6 a {
    display: block
}
.about_us .menu_2 .col-xs-12 a img, .about_us .menu_2 .col-xs-6 a img {
    max-width: 100%
}
.about_us .menu_3 {
    height: 70px;
    background-color: #b7b2b2;
    width: 100%
}
.about_us .menu_3 td {
    text-align: center
}
.about_us .menu_3 a {
    padding: 20px 5px;
    display: block;
    color: #fff003;
    font-size: 16px;
    line-height: 18px
}
.about_us .menu_3 a:hover {
    text-decoration: none
}
.head_of_page {
    background-color: #e4e4e4;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px
}
.head_of_page img {
    height: auto;
    width: auto;
    max-width: 100%
}
.couse_picker {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px
}
.couse_picker .couse_item {
    margin: 0;
    padding: 0;
    border: 5px solid #fff003;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 #c5c4c4;
    transition: all .3s;
    cursor: pointer
}
.couse_picker .couse_item:hover {
    border: 5px solid #fff
}
.couse_picker .couse_item img {
    width: 100%;
    height: auto
}
.main_head {
    color: #155cab;
    margin-top: 0;
    margin-bottom: 10px
}
.sub_head {
    color: #808080;
    margin-top: 10px;
    margin-bottom: 10px
}
.product_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px
}
.product_container .items_block {
    width: 33.33%;
    padding-right: 10px;
    margin-bottom: 10px;
    height: auto;
    min-height: 475px
}
.product_container .items_block .overlay {
    float: left;
    width: 100%;
    height: auto
}
.product_container .items_block .overlay .bages {
    float: left;
    width: 50%
}
.product_container .items_block .overlay .bages_1 {
    position: absolute
}
.product_container .items_block .overlay .bages_1 img, .product_container .items_block .overlay .bages_1 svg, .product_container .items_block .overlay .bages_1 i {
    width: 40px;
    height: auto
}
.product_container .items_block .overlay .bages_2 {
    width: 40px;
    display: inline-block;
    height: 50px;
    position: absolute;
    z-index: 0
}
.product_container .items_block .overlay .bages_2 .bg-1 {
    width: 40px;
    height: 30px;
    background-color: #f00
}
.product_container .items_block .overlay .bages_2 .bg-2 {
    width: 28px;
    height: 28px;
    background-color: #f00;
    transform: rotate(45deg);
    margin: -14px 0 0 6px
}
.product_container .items_block .overlay .score {
    position: absolute;
    z-index: 2
}
.product_container .items_block .overlay .score .number {
    top: 0;
    width: 40px;
    height: 30px;
    text-align: center;
    line-height: 10px
}
.product_container .items_block .overlay .score .number .n1 {
    color: #fff;
    font-size: 10px;
    font-family: sans-serif
}
.product_container .items_block .overlay .score .number .n1-title {
    color: #fff;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: bold
}
.product_container .items_block .overlay .score .number .n2 {
    color: #fff003;
    font-size: 15px;
    font-family: sans-serif;
    font-style: italic;
    font-weight: bold
}
.product_container .items_block .overlay .score .number .n3 {
    color: #fff;
    font-size: 9px;
    font-family: sans-serif
}
.product_container .items_block .cover {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px
}
.product_container .items_block .block_info {
    float: left;
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #f3f3f3
}
.product_container .items_block .block_info [class^="t_"] {
    font-size: 14px
}
.product_container .items_block .block_info .t_1 {
    color: #616161
}
.product_container .items_block .block_info .t_1_2 {
    color: #000
}
.product_container .items_block .block_info .t_2 {
    color: #f00;
    height: 50px;
    max-height: 50px;
    overflow: hidden
}
.product_container .items_block .block_info .t_3 {
    width: 100%;
    height: auto;
    float: left;
    margin: 5px 0
}
.product_container .items_block .block_info .t_3 .t_3_sub_1 {
    float: left;
    width: 30%
}
.product_container .items_block .block_info .t_3 .t_3_sub_1.bold {
    font-weight: bold
}
.product_container .items_block .block_info .t_3 .t_3_sub_2 {
    float: left;
    width: 70%
}
.product_container .items_block .block_info .t_3 .t_3_sub_2 span {
    display: block;
    clear: both
}
.product_container .items_block .block_info .t_4 {
    width: 100%;
    height: auto;
    float: left;
    margin: 5px 0;
    border-bottom: 1px solid #d8d5d5;
    margin-bottom: 10px
}
.product_container .items_block .block_info .t_5 {
    width: 100%;
    height: auto;
    float: left;
    padding-bottom: 15px
}
.product_container .items_block .block_info .t_5 a {
    color: #155cab
}
.product_pagination_container {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    opacity: .8
}
.product_pagination_container .icon_nav {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border: 0 solid #fff
}
.product_pagination_container .icon_nav.number {
    border-radius: 50%;
    border: 1px solid #000;
    color: #000;
    line-height: 28px;
    outline: none
}
.product_pagination_container .icon_nav.active {
    background-color: #000 !important;
    color: #fff !important
}
.product_pagination_container .icon_nav:hover {
    text-decoration: none
}
.product_pagination_container .icon_nav img {
    width: 30px;
    height: 30px
}
.header .-social {
    position: relative;
    margin-top: 40px
}
@media (min-width:768px) {
    .header:not(.-fixed-) .desktop-menu {
        height: 259px
    }
    .header:not(.-fixed-) {
        height: 260px !important
    }
    .header:not(.-fixed-) .yellow_menu {
        display: flex;
        justify-content: flex-start;
        background-color: #fff003;
        color: #000;
        min-height: 40px;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap
    }
    .header:not(.-fixed-) .yellow_menu .y_nav {
        float: left;
        color: #000;
        font-size: 16px;
        line-height: 40px;
        border-right: 1px solid #ece355;
        padding: 0 12px
    }
    .header:not(.-fixed-) .yellow_menu .y_nav:hover {
        color: #2c6fba!Important;
        text-decoration: none
    }
    .header.-clone- .yellow_menu {
        display: flex;
        justify-content: center;
        background-color: #fff003;
        color: #000;
        min-height: 40px;
        height: auto
    }
    .header.-clone- .yellow_menu .y_nav {
        float: left;
        color: #000;
        font-size: 16px;
        line-height: 40px;
        border-right: 1px solid #ece355;
        padding: 0 12px
    }
    .header.-clone- .yellow_menu .y_nav:hover {
        color: #2c6fba!Important;
        text-decoration: none
    }
}
@media screen and (max-width:767px) {
    .yellow_menu {
        display: none
    }
}
.apl_header {
    font-size: 14px;
    font-family: 'Kanit';
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 5px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee
}
.apl_header .nav_link {
    display: inline;
    color: #000
}
.apl_header .nav_divide {
    padding: 20px 0;
    color: #808080
}
.apl_header .nav_active {
    color: #9c9c9c
}
.apl_header .nav_active:hover {
    color: #9c9c9c;
    text-decoration: none
}
.apl_header a {
    font-size: 14px
}
.apl_header a[href]:hover {
    color: #000
}
.content_header_title {
    font-size: 32px;
    margin: 0 0 20px 0
}
.content_image_display {
    margin: 20px 0;
    width: 100%;
    text-align: center
}
.content_image_display img {
    margin: 0 auto;
    max-width: 100%;
    height: auto
}
.content_display_detail {
    margin: 20px 0
}
.content_display_detail * {
    max-width: 100%;
    height: auto;
    font-family: 'Kanit';
    line-height: 1.7;
    font-size: 16px;
    color: #202020
}
.content_extra_information {
    margin: 20px 0;
    float: left;
    width: 100%;
    height: auto
}
.content_extra_information .rows_header {
    background-color: #dadada;
    color: #000;
    padding: 5px;
    font-size: 20px;
    margin-bottom: 10px
}
.content_extra_information .rows_content {
    padding-bottom: 15px;
    width: 100%;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 10px;
    margin-top: 10px;
    float: left
}
.content_extra_information .rows_content .bold {
    font-weight: bold
}
.post_container_block {
    float: left;
    width: 100%;
    height: auto
}
.post_container_block .p_items {
    margin-bottom: 20px;
    width: 100%;
    display: block;
    background-color: #efefef;
    padding: 10px;
    padding-bottom: 20px
}
.post_container_block .p_items a:not(.md-button):hover {
    text-decoration: none !important
}
.post_container_block .p_items .cover {
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    border: 1px solid #fff
}
.post_container_block .p_items .no_cover {
    height: 300px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    background-color: #fff003;
    border: 1px solid #fff
}
.post_container_block .p_items .p_title {
    margin: 10px 0 5px;
    color: #000;
    font-size: 18px
}
.post_container_block .p_items .p_enter a {
    font-size: 16px;
    text-decoration: none;
    color: #2c6fba
}
.post_container_block .p_items .p_enter a:hover {
    color: #00f
}
a:not(.md-button):hover {
    text-decoration: none
}
.postvideo_container_block {
    float: left;
    width: 100%;
    height: auto
}
.postvideo_container_block .p_items {
    margin-bottom: 5px;
    display: block;
    background-color: #efefef;
    padding-bottom: 20px;
    float: left;
    height: 240px;
    margin-right: 5px
}
.postvideo_container_block .p_items .cover {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%
}
.postvideo_container_block .p_items .no_cover {
    height: 150px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    background-color: #fff003
}
.postvideo_container_block .p_items .p_title {
    margin: 10px 0 5px;
    height: 40px;
    overflow: hidden;
    padding: 0 10px
}
.postvideo_container_block .p_items .p_title * {
    color: #202020;
    font-size: 14px
}
.postvideo_container_block .p_items .p_count {
    padding: 0 10px;
    font-size: 14px;
    color: #808080
}
.contact_container_block {
    padding: 20px
}
.contact_container_block .imgContact {
    max-width: 100%;
    margin: 0 auto;
    height: auto
}
.contact_container_block ._form {
    margin-bottom: 20px
}
.contact_container_block ._form ._label {
    line-height: 40px
}
.contact_container_block ._form .input_small {
    width: 100%;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 5px;
    outline: none;
    padding: 5px
}
.contact_container_block ._form .input_big {
    width: 100%;
    height: 80px;
    border: 1px solid #eee;
    border-radius: 5px;
    outline: none;
    padding: 5px
}
.contact_container_block ._form ._submitBtn {
    margin: 20px 0;
    background-color: #0071bb;
    color: #fff;
    padding: 10px 30px;
    display: inline-block;
    outline: none;
    transition: all .3s;
    cursor: pointer
}
.contact_container_block ._form ._submitBtn:hover {
    background-color: #005288
}
.contactlist_container_block {
    border-top: 1px solid #eee;
    padding-top: 40px
}
.contactlist_container_block table.contact_branch_container {
    width: 100%
}
.contactlist_container_block table.contact_branch_container thead tr {
    background-color: #808080
}
.contactlist_container_block table.contact_branch_container thead tr th {
    color: #fff;
    text-align: center;
    padding: 7px 0;
    width: 33.33%;
    border-right: 1px solid #ada8a8;
    font-family: sans-serif
}
.contactlist_container_block table.contact_branch_container thead tr th:last-child {
    border-right: 0
}
.contactlist_container_block table.contact_branch_container tbody tr {
    background-color: #e8e6e6
}
.contactlist_container_block table.contact_branch_container tbody tr td {
    color: #202020;
    text-align: left;
    padding: 7px;
    font-size: 14px;
    border-right: 1px solid #ada8a8
}
.contactlist_container_block table.contact_branch_container tbody tr td:last-child {
    border-right: 0
}
.why_us_items {
    float: left;
    width: 100%;
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    margin-bottom: 40px;
    background-color: #fff
}
.why_us_items .text_1 {
    font-size: 28px;
    line-height: 32px;
    color: #0071bb
}
.why_us_items .text_1 span {
    font-size: 44px
}
.why_us_items .text_2 {
    color: #8a8a8a
}
.why_us_items img {
    width: 100%;
    height: auto;
    margin: 0 auto
}
.why_us_items .ajarn_items .imgAJ {
    text-align: center
}
.why_us_items .ajarn_items .imgAJ img {
    max-width: 100%;
    width: 200px;
    height: auto;
    margin: 15px 0
}
.why_us_items .ajarn_items .name {
    font-size: 22px;
    line-height: 22px;
    color: #0071bb
}
.why_us_items .ajarn_items .info {
    color: #8a8a8a;
    margin: 10px 0;
    margin-bottom: 15px
}
.why_us_items .ajarn_items .link {
    background-color: #0071bb;
    color: white !Important;
    padding: 5px 7px;
    text-decoration: none;
    height: 31px;
    display: inline-block;
    line-height: 19px
}
.how_to_course .c_head {
    width: 100%;
    height: auto;
    padding: 10px 20px;
    background-color: #777;
    margin-bottom: 20px
}
.how_to_course .c_head * {
    color: #fff
}
.how_to_course .c_head .h_1 {
    font-size: 32px
}
.how_to_course .c_head .h_2 {
    font-size: 16px
}
.how_to_course .c_info {
    width: 100%;
    height: auto;
    padding: 10px 20px;
    margin-bottom: 20px
}
.how_to_course .c_info .i_head {
    font-size: 26px;
    padding-bottom: 10px;
    color: #0071bb;
    border-bottom: 3px solid #0071bb;
    display: inline-block;
    margin-bottom: 10px
}
.how_to_course .c_info .i_sub_header {
    font-size: 28px;
    padding-bottom: 10px;
    color: #000;
    display: inline-block
}
.how_to_course .c_info .i_sub_card {
    width: 100%;
    float: left;
    height: auto
}
.how_to_course .c_info .i_sub_card .card_items {
    width: 215px;
    float: left;
    margin-right: 3%
}
.how_to_course .c_info .i_sub_card .card_items .step {
    position: absolute;
    display: inline;
    color: #2c6fba;
    border: 2px solid #2c6fba;
    background-color: #fff;
    padding: 3px 10px;
    transform: translate3d(-10px, -10px, 0)
}
.how_to_course .c_info .i_sub_card .card_items .info {
    height: 400px;
    background-color: #ecebeb;
    padding: 15px;
    border: 1px solid #2c6fba;
    margin-bottom: 40px
}
.how_to_course .c_info .i_sub_card .card_items .info.bold {
    background-color: #2c6fba
}
.how_to_course .c_info .i_sub_card .card_items .info.bold ul li {
    color: #fff
}
.how_to_course .c_info .i_sub_card .card_items .info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 20px
}
.how_to_course .c_info .i_sub_card .card_items .info ul li {
    font-size: 14px
}
.how_to_course .c_info .i_sub_card .card_items .info ul li .hilight {
    color: #e5152b;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 15px 0;
    display: inline-block;
    width: 100%
}
.how_to_course .c_info .i_sub_card .card_items .info ul li .sublight {
    color: #000;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    display: inline-block;
    border-bottom: 1px dashed #828282;
    width: 100%
}
.how_to_course .c_info .i_sub_card .card_items .info ul li .headSubLight {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    font-family: sans-serif;
    display: block;
    text-align: center
}
.how_to_course .c_info .i_detail {
    font-size: 16px;
    line-height: 1.7;
    color: #212121
}
.how_to_course .c_info .dl_file {
    background-color: #0071bb;
    color: #fff;
    font-size: 32px;
    text-align: center;
    padding: 15px 0;
    width: 100%;
    display: block
}
.how_to_course .c_info .alert_info {
    background-color: #e12736;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    color: #fff;
    margin-top: 40px;
    font-size: 24px
}
.isls_block {
    width: 100%;
    height: auto
}
.isls_block .img {
    width: 100%;
    height: auto
}
.isls_block .action {
    width: 100%;
    height: 50px;
    margin-top: -50px
}
.isls_block .action img {
    height: 40px;
    width: auto
}
.isls_block .action img.normal {
    opacity: 1
}
.isls_block .action img.hover {
    opacity: 0;
    margin-top: -56px;
    transition: all .3s
}
.isls_block .action a {
    text-align: center;
    display: block
}
.isls_block .action .btn_1:hover img.hover {
    opacity: 1
}
.isls_block .action .btn_2:hover img.hover {
    opacity: 1
}
.course_other_link {
    float: left;
    width: 100%;
    padding-right: 30px;
    height: auto;
    margin-bottom: 30px
}
.course_other_link .link_head {
    background-color: #555;
    color: #fff;
    padding: 7px;
    font-size: 1.3em
}
.course_other_link ul {
    padding-left: 0;
    margin: 0;
    list-style: none
}
.course_other_link ul li:last-child a {
    border-bottom: 0
}
.course_other_link ul li a {
    display: block;
    background-color: #eee;
    color: #000;
    padding: 7px;
    line-height: 1.5;
    border-bottom: 1px solid #ccc;
    outline: none
}
.course_other_link ul li a:hover {
    background-color: #b9b7b7;
    color: #000
}
.course_pick_content {
    float: left;
    width: 100%;
    margin-bottom: 30px;
    padding: 10px;
    background-color: #eee;
    border-radius: 5px;
    transition: all .3s;
    cursor: pointer
}
.course_pick_content:hover {
    background-color: #cec8c8;
    box-shadow: 0 0 12px 0 #c5c4c4
}
.course_pick_content .content_cover {
    width: 100%;
    height: 350px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}
.course_pick_content .content_name {
    font-size: 1.75em;
    padding: 5px 0;
    color: #fff;
    text-align: center;
    height: 70px;
    max-height: 70px;
    overflow: hidden;
    background-color: #2c6fba;
    line-height: 1.3;
    border-radius: 5px
}
.course_content_detail {
    font-size: 16px;
    line-height: 1.7;
    font-family: sans-serif;
    color: #212121
}
.course_content_detail * {
    max-width: 100%
}
.ref_head {
    font-size: 1.5em;
    color: #e12736;
    padding-left: 20px;
    border-bottom: 1px solid #e12736;
    padding-bottom: 10px
}
.ref_info {
    background-color: #fffcd1;
    padding: 10px
}
.ref_info p {
    font-size: 16px;
    line-height: 1.5em;
    color: #000
}
@media (max-width:991px) {
    .card_items {
        width: 47% !important
    }
}
@media (max-width:543px) {
    .card_items {
        width: 97% !important
    }
}