@import url('83ca5a_css2.css');

body .u-ffMon {
    font-family: 'Montserrat', sans-serif !important;
}

body {
    font-size: 20px !important;
    line-height: 20px;
}

body .u-fs75 {
    font-size: 75px !important;
    line-height: 75px;
}

body .u-fs100 {
    font-size: 100px !important;
    line-height: 100px;
}

body .u-fs50 {
    font-size: 50px !important;
    line-height: 50px;
}

body .u-fs40 {
    font-size: 40px !important;
    line-height: 40px;
}

body .u-fs35 {
    font-size: 35px !important;
    line-height: 35px;
}

body .u-fs22 {
    font-size: 22px !important;
    line-height: 22px;
}

body .u-fs28 {
    font-size: 28px !important;
    line-height: 28px;
}

body .u-wblack {
    font-weight: 900 !important;
}

body .u-wsemi {
    font-weight: 600 !important;
}

body .u-wmedium {
    font-weight: 500 !important;
}

body .color_blueBlack {
    color: #323c54;
}

body .color_blueBold {
    color: #4373e7;
}

body .color_blueBold2 {
    color: #5782f8;
}

body .color_blue3 {
    color: #1c99c3
}

body .color_blue2 {
    color: #83b2ff;
}

body .color_blue {
    color: #17b0ec;
}

body .color_purple2 {
    color: #9b6ef3;
}
body .color_purple3 {
    color: #5545a7;
}


body .color_yellow {
    color: #fbc201;
}

body .color_purpleLight {
    color: #b962ef;
}

body .color_purple {
    color: #5444a6;
}

body .color_purple3 {
    color: #9559e4;
}

body .color_red {
    color: #ff555e;
}

body .color_green {
    color: #5fd46c;
}

body .color_green2 {
    color: #28ac9d;
}

body .color_greenLight {
    color: #95e878;
}

body .color_greenBana {
    color: #8cc510;
}

body .color_greenBold {
    color: #009a4b;
}

body .color_ogrange {
    color: #ff8650;
}

body.home #masthead .header-nav.nav.header-nav-main {
    display: none;
}

body p {
    margin-bottom: 10px !important;
}

body .has_margin35 {
    margin-bottom: 35px !important;
}

ul.non_margin {
    margin: 0px !important;
}

body .has_marginTop20 {
    margin-top: 20px !important;
}

body .divider {
    width: 100%;
    height: 1px;
    background-color: #5444a6;
}

body .underline {
    text-decoration: underline;
    text-underline-offset: 5px;
}

header#header {
    position: fixed;
    left: 0;
}

#header .stuck div#masthead {
    height: 100px !important;
}

header#header.sticky .header-wrapper {
    background-color: #ccf6c8;
}

#masthead .header-nav>.menu-item>a {
    font-weight: 400;
    color: #fff;
}

#masthead .header-nav>.menu-item {
    width: 165px;
    height: 95px;
    background-size: 100% 100%;
    margin: 0px;
    margin-left: -17px;
    display: flex;

}

#masthead .header-nav>.menu-item>a {
    padding: 0px;
    padding-bottom: 13px;
    padding-left: 35px;
    line-height: 18px;
    font-size: 18px;
    padding-bottom: 15px !important;
    padding-right: 15px;
    width: 100%;
    position: relative;
}

#masthead .current-dropdown ul.sub-menu.nav-dropdown.nav-dropdown-default {
    top: calc(100% - 10px);
}

#masthead .header-nav>.menu-item>a .icon-angle-down {
    position: absolute;
    bottom: 26px;
    right: 20px;
}

#masthead .header-nav>.menu-item.item-home {
    background-image: url('bcfabe_nav-1.png');
}

#masthead .header-nav>.menu-item.item-project {
    background-image: url('49b625_nav-2.png');
}

#masthead .header-nav>.menu-item.item-how-to-use {
    background-image: url('6e652d_nav-3.png');
}

#masthead .header-nav>.menu-item.item-chapter {
    background-image: url('4e2a8c_nav-4.png');
}

#masthead .header-nav>.menu-item.item-userful {
    background-image: url('67afe5_nav-5.png');
}

#masthead .header-nav>.menu-item.item-contact {
    background-image: url('5e056b_nav-7.png');
}

#masthead .header-nav>.menu-item.item-how-to-use>a,
#masthead .header-nav>.menu-item.item-userful>a {
    padding-right: 50px;
}

#masthead .header-nav>.menu-item.item-contact>a {
    padding-right: 55px;
}

#masthead #logo {
    width: auto;
    max-width: 550px;
}

#masthead #logo a {
    display: flex;
    align-items: center;
}

#masthead #logo a img.header-logo-dark {
    transform: scale(0.8);
}

.stuck #masthead #logo a img.header-logo-dark {
    transform: scale(0.8);
}

#masthead #logo a img.header-logo-dark {
    display: inline-block !important;
    margin-left: 15px;
    margin-top: 7px;
}

.copyright-footer {
    color: #96a5c6;
    font-size: 16px;
}

footer#footer {
    position: absolute !important;
    bottom: 0;
}

.ss_abs_footer {
    height: 100px;
}

ul.follow_social {
    display: flex;
    list-style: none;
    margin: 0px !important;
    border: none !important;
}

/*.home footer#footer .absolute-footer {
    background-color: #ccf6c8;
}*/


ul.follow_social li {
    margin-left: 20px !important;
    margin-bottom: 0px !important;
}

ul.follow_social li a {
    color: #96a5c6;
}

#footer .container {
    padding-top: 30px !important;
    position: relative;
    padding-bottom: 30px !important;
}

#footer .container:after {
    content: '';
    width: calc(100% - 30px);
    position: absolute;
    top: 0;
    height: 1px;
    background-color: #a1b6c7;
}

.home #footer .container:after {
    background-color: #000;
}

.home .copyright-footer {
    color: #000;
}

.home #footer .footer-secondary {
    display: none;
}

.container {
    max-width: 100% !important;
}

.row_card_nav .col {
    padding: 0px 2px;
}

.image_box_nav {
    position: relative;
}

.image_box_nav .box-text {
    position: absolute;
    cursor: pointer;
}

.image_box_nav .box-text h3 {
    color: #fff;
}

.image_box_nav .box-text {
    padding: 30px 30px 30px 50px !important;
    text-align: left;
}

.image_box_nav.text_top .box-text {
    top: 0;
}

.image_box_nav .box-image {
    width: calc(125%);
    position: relative;
    padding-top: 100%;
}

.image_box_nav.need_height .box-image {
    width: 100%;
    padding-top: calc(120% + 5px);
}

.image_box_nav .box-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.image_box_nav.text_bottom .box-text {
    bottom: 0;
}

.image_box_nav.text_bottom .box-image {
    margin-top: calc(-24% - 3px);
}

.image_box_nav.text_bottom.need_height .box-image {
    margin-left: 0px;
    margin-top: calc(-44% - 5px);
    padding-top: calc(120% + 2px);
}

.col_contact .image_box_nav.text_bottom .box-image {
    width: calc(120% + 4px);
    margin-left: calc(-20% - 4px);
}

.col_studi .image_box_nav.text_bottom .box-image {
    width: 120%;
}

.col_case_studi .image_box_nav.text_bottom .box-image {
    margin-left: calc(-20% - 8px);
    width: calc(125% + 2px);
}

.col_template .image_box_nav.text_bottom .box-image {
    width: calc(103% + 2px);
}

.box_login_charpter {
    display: inline-block;
    position: relative;
}

.box_login_charpter p.login_text {
    font-weight: bold;
    margin: 0px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translateY(-50%);
}

.main_login_container {
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 15px;
    z-index: 9999;
}

.box_login_charpter:after {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('56310c_login-bg-border.png');
    background-size: 100% 100%;
    left: 7px;
    content: '';
    top: 7px;
}

.ss_infor_home {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.ss_infor_home:after,
.ss_infor_home:before {
    content: '';
    width: 40px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}

.ss_infor_home:after {
    height: 100px;
}

.ss_infor_home:after {
    top: 170px;
    right: 0;
    background-image: url('7411e2_Ellipse-right.png');
}

.ss_infor_home:before {
    bottom: 100px;
    left: 0;
    background-image: url('014682_Ellipse-left.png');
}

section.section.ss_top {
    padding-top: 150px !important;
}

ul.list_has_bullet {
    list-style: none;
}

ul.list_has_bullet>li {
    margin-left: 0px !important;
    position: relative;
    padding-left: 20px;
}

ul.list_has_bullet>li:before {
    content: '';
    width: 7px;
    height: 7px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 10px;
    border-radius: 50%;
}

ul.list_has_bullet li li.bullet_orange:before {
    background-color: red;
}

ul.list_has_bullet li.bullet_orange:before {
    background-color: #ee8543;
}

ul.list_has_bullet li.bullet_blue:before {
    background-color: #17b0ec;
}

ul.list_has_bullet li.bullet_green:before {
    background-color: #5fd46c;
}

ul.list_has_bullet li.bullet_purple:before {
    background-color: #5545a7;
}

ul.list_has_bullet li.bullet_red:before {
    background-color: #ff555e;
}

ul.list_has_bullet li.bullet_purple2:before {
    background-color: #b962ef;
}

ul.list_has_bullet li.bullet_greenLight:before {
    background-color: #95e878;
}

.list_has_number li {
    list-style: none !important;
    margin-left: 0px !important;
    display: flex;
}

.list_has_number li span {
    display: block;
    padding-right: 15px;
}

ul.lis_generic_header {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    min-width: 500px;
}

ul.list_generic_content {
    min-width: 500px;
}

ul.lis_generic_header li {
    list-style: none;
    margin: 0px !important;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    width: 16%;
}

ul.list_generic_content li {
    list-style: none;
    margin-left: 0px !important;
    width: 100%;
    position: relative;
}

ul.list_generic_content li .title {
    display: inline-block;
    padding: 0px 30px 0px 0px;
    background-color: #ecf8fd;
    font-weight: 600;
    position: relative;
    z-index: 3;
}

.section {
    padding-top: 40px !important;
    padding-bottom: 0px !important;
}

.ss_chapter_has_cicle:after,
.ss_chapter_has_cicle:before {
    content: '';
    width: 3.5em;
    height: 3.5em;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.ss_chapter_has_cicle:after {
    left: 15px;
    top: -0.5em;
}

.ss_chapter_has_cicle:before {
    right: 15px;
    top: -3em;
}

.ss_over_flow.ss_chapter_has_cicle::before {
    background-color: #fff;
}

.ss_over_flow.ss_chapter_has_cicle::after {
    background-color: #ecf8fd;
}

.ss_weighing.ss_chapter_has_cicle:after {
    background-color: #fff;
}

.ss_weighing.ss_chapter_has_cicle:before {
    background-color: #fff7ef;
}

.ss_current_situation.ss_chapter_has_cicle:before {
    background-color: white;
}

.ss_current_situation.ss_chapter_has_cicle:after {
    background-color: #fff7ef;
}

.ss_chapter_summaries.ss_chapter_has_cicle:after {
    background-color: #fff;
}

.ss_chapter_summaries.ss_chapter_has_cicle:before {
    background-color: #ecf8fd;
}

.ss_member.ss_chapter_has_cicle:after {
    background-color: #ecf8fd;
}

.ss_member.ss_chapter_has_cicle:before {
    background-color: white;
}

.ss_cicle_white_blueGray.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_blueGray.ss_chapter_has_cicle:after {
    background-color: #eef3ff;
}

.ss_overview .section-content:after,
.ss_overview .section-content:before,
.ss_has_elip .section-content:after,
.ss_has_elip .section-content:before {
    content: '';
    width: 40px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}

.ss_overview .section-content:after,
.ss_has_elip .section-content:after {
    top: 10px;
    right: 0;
    background-image: url('8251b3_Ellipse-gray-right.png');
    background-position: top right;
    height: 100px;
}

.ss_overview .section-content:before,
.ss_has_elip .section-content:before {
    top: calc(16% - 30px);
    left: 0;
    background-image: url('66638c_Ellipse-gray-left.png');
    background-position: bottom left;
}

.ss_overview .section-content:before {
    background-position: top left;
    top: 13%;
}

.ss_overview.ss_what_capstone .section-content:before {
    top: 39%;
}

.ss_has_elip .section-content:before {
    top: initial;
    bottom: 30px;
}

.ss_has_elip.elip_left .section-content:before {
    display: none;
}

.ss_has_elip.elip_left.ss_hint .section-content:after {
    background-image: url('7411e2_Ellipse-right.png');
}

.ss_has_elip.elip_orange .section-content:before {
    background-image: url('f8cf29_Ellipse-orange-left.png');
}

.ss_has_elip.elip_orange .section-content:after {
    background-image: url('b8cad9_Ellipse-orange-right2.png');
}

.ss_has_elip.elip_orange.elip_leftBottom .section-content:before {
    top: initial;
    bottom: 50px;
}

.ss_has_elip.elip_blue .section-content:before {
    background-image: url('fc6a95_Ellipse-blue-left.png');
}

.ss_has_elip.elip_blue .section-content:after {
    background-image: url('7747ef_Ellipse-blue-right.png');
}

.ss_has_elip.elip_greenBana .section-content:before {
    background-image: url('12f76a_Ellipse-greenBana-left.png');
}

.ss_has_elip.elip_greenBana .section-content:after {
    background-image: url('0d4bef_Ellipse-greenBana-right.png');
}

.ss_has_elip.elip_purple .section-content:before {
    background-image: url('eda943_Ellipse-purple-left.png');
}

.ss_has_elip.elip_purple .section-content:after {
    background-image: url('29ae84_Ellipse-purple-right.png');
}

.ss_has_elip.elip_greenLight .section-content:before {
    background-image: url('1a153f_Ellipse-greenLight-left.png');
}

.ss_has_elip.elip_greenLight .section-content:after {
    background-image: url('d3f9f5_Ellipse-greenLight-right.png');
}

.ss_has_elip.elip_blueGray .section-content:before {
    background-image: url('c09a02_Ellipse-blueGray-left.png');
}

.ss_has_elip.elip_blueGray .section-content:after {
    background-image: url('0b854a_Ellipse-blueGray-right.png');
}

.ss_has_elip.elip_ping .section-content:before {
    background-image: url('969cfa_Ellipse-ping-left.png');
}

.ss_has_elip.elip_ping .section-content:after {
    background-image: url('906317_Ellipse-ping-right.png');
}

.ss_has_elip.elip_leftTop .section-content:before {
    top: 130px;
    bottom: initial;
}

ul.list_has_checked li {
    margin-left: 0px !important;
    list-style: none;
    padding-left: 40px !important;
    position: relative;
}

ul.list_has_checked.sub_list {
    margin: 20px 0px 0px 0px !important;
}

ul.large_space>li {
    margin-bottom: 30px;
}

.list_has_checked.checked_green li:before {
    color: #5fd46c;
}

.list_has_checked.checked_blue li:before {
    color: #4b84fb;
}

.list_has_padding {
    padding-left: 40px;
}

.list_has_checked li:before {
    content: '\f00c' !important;
    font-family: 'Font Awesome\ 5 Pro';
    color: #5546a7;
    width: 0px !important;
    height: 0px !important;
    top: 0px !important;
    left: 0px !important;
    position: absolute;
}

ul.list_generic_content li span.point {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #5444a6;
    display: inline-block;
    border-radius: 50%;
    top: calc(50% - 5px);
}

ul.list_generic_content li:after {
    content: '';
    width: 50%;
    height: 1px;
    background-color: #5444a6;
    position: absolute;
    left: 5px;
    top: calc(50% - 2px);
}

ul.list_generic_content li.strongly::after {
    width: 75%;
}

ul.list_generic_content li.strongly span.point {
    left: 75%;
}

ul.list_generic_content li span.point:after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #5444a6;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.4;
}

ul.list_generic_content li.moderately span.point {
    left: 61%;
}

ul.list_generic_content li.moderately::after {
    width: 61%;
}

ul.list_toturial li {
    list-style: none;
    margin-left: 0px !important;
    margin-bottom: 3px !important;
    display: flex;
    align-items: center;
}

ul.list_toturial {
    margin-bottom: 0px;
}

ul.list_toturial li span.title_toturial {
    display: flex;
    min-width: 160px;
    text-align: left;
    background-color: #ecf8fd;
    margin-right: 10px;
    padding: 10px 10px;
    line-height: 20px;
    align-items: center;
}

.list_process {
    margin-bottom: 0px;
    padding-left: 100px;
    position: relative;
}

.process_main .list_process {
    margin-bottom: 0px;
    position: relative;
    width: calc(100% - 100px);
    padding-left: 45px;

}

.process_main {
    display: flex;
}

.process_main .process_bar {
    width: 50px;
    height: 80%;
    content: '';
    top: 0;
    left: 0;
    border: 1px solid #5fd46c;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 330px;
}

.process_main .process_bar span {
    display: inline-block;
    width: 100%;
    height: 30px;
    background-color: #5fd46c;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.process_main .process_bar span.process50 {
    height: calc(50% - 5px);
}

.list_process li {
    position: relative;
    list-style: none;
    margin-left: 0px !important;
}

.list_process>li:after {
    content: '';
    display: inline-block;
    border-right: 13px solid;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    left: -25px;
    top: 7px;
}

.process_main .process_bar span.process10 {
    height: calc(20% - 5px);
}

.process_main .process_bar span.process40 {
    height: calc(40% - 5px);
}

.process_main .process_bar.large {
    min-height: 300px;
}

.process_main .process_bar.border_purple {
    border-color: #b458ee;
}

.process_main .process_bar span.bg_red {
    background-color: #ff555e;
}

.process_main .process_bar span.bg_orange {
    background-color: #ee8543;
}

.list_process>li.process_arrow_red:after {
    border-right-color: #ff555e;
}

.list_process>li.process_arrow_orange:after {
    border-right-color: #ff8650;
}

li.process_arrow_red.partA {
    margin-bottom: 60px;
    margin-top: 10px;
}

.process_main ul.list_process {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.has_bullet_arrow {
    padding-left: 30px;
    position: relative;
}

.has_bullet_arrow:after {
    content: '';
    display: inline-block;
    border-right: 13px solid;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    top: 8px;
    left: 5px;
}

.row_member .col:after {
    content: '';
    height: 150px;
    width: 1px;
    background-color: #4b84fb;
    position: absolute;
    left: 50%;
    top: -40px;
    z-index: -1;
}

.el_slider_img_video .row_member {
    padding-top: 40px !important;
}

.el_slider_img_video {
    margin-top: -40px;
}

.row_list_material .col_title p {
    margin-top: -100px;
}

.row_member.row_member_oranger .col::after {
    background-color: #ee8543;
}

.row_member.row_member_purple .col::after {
    background-color: #5545a7;
}

.row_member.row_member_green .col:after {
    background-color: #28ac9d;
}

.row_member.row_member_ping .col:after {
    background-color: #f1789d;
}

.row_member.row_member_orange .col:after {
    background-color: #ee8543;
}

.row_member.row_member_greenBana .col:after {
    background-color: #8cc50f;
}

.row_member.row_member_greenBold .col::after {
    background-color: #009a4b;
}

.row_member.row_member_blueLight .col:after {
    background-color: #72a2f9;
}

.row_member.row_member_purple3 .col:after {
    background-color: #9558e4;
}

.material_item .inner_image {
    margin-bottom: 20px;
}

.material_item .inner_image img {
    box-shadow: 9px 3px 13px -8px rgba(0, 0, 0, 0.5);
}

.material_item .inner_content {
    font-size: 16px;
    line-height: 20px;
}

.main_material_lists.slide .slick-slide {
    margin-right: 20px;
}

.main_material_lists.slide .slick-list {
    margin-right: -20px;
}

.main_material_lists.slide {
    position: relative;
}

.main_material_lists.slide .custom_arrow {
    position: absolute;
    top: 30%;
    color: #d2e0fe;
    font-size: 27px;
}

.main_material_lists.slide .custom_arrow.prev {
    left: -40px;
}

.main_material_lists.slide .custom_arrow.next {
    right: -20px;
}

.row_has_divider:after {
    content: '';
    width: 160px;
    height: 20px;
    position: absolute;
    background-color: #4b84fb;
    border-radius: 99px;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
}

.row_has_divider:before {
    width: calc(100% - 30px);
    left: 15px;
    height: 1px;
    background-color: #d3dee3;
    content: '';
    top: 0;
    position: absolute;
}

.row_has_divider {
    padding-top: 60px;
    position: relative;
    margin-top: 20px !important;
}

.row_has_divider.divider_orange:after {
    background-color: #ee8543;
}

.row_has_divider.divider_purple::after {
    background-color: #5545a7;
}

.row_has_divider.divider_greenBana:after {
    background-color: #8cc50f;
}

.row_has_divider.divider_green:after {
    background-color: #28ac9d;
}

.row_has_divider.divider_purple3:after {
    background-color: #9558e4;
}

.row_has_divider.non_pd {
    padding-top: 0px !important;
}

.row_has_divider.divider_ping::after {
    background-color: #f1789d;
}

.row_has_divider.divider_greenBold:after {
    background-color: #009a4b;
}

.row_has_divider.divider_blueLight:after {
    background-color: #72a2f9;
}

.ss_chapter_has_cicle.ss_hint::before {
    background-color: #e5fae9;
}

.ss_chapter_has_cicle.ss_hint::after {
    background-color: #fff;
}

table.table_chapter2 {
    border-collapse: collapse;
    margin-bottom: -30px;
}

table.table_chapter2 tr,
table.table_chapter2 td {
    border: 1px solid #abb7d2;
    text-align: center;
}

table.table_chapter2 td {
    width: 50%;
}

.table_chapter2 td.head {
    background-color: #4b84fb;
    color: #fff;
    border-color: #4b84fb;
}

table.table_chapter2 tr:first-child {
    border-top-left-radius: 20px;
    overflow: hidden;
}

.main_nav_chapter {
    display: flex;
}

.main_nav_chapter .col_button {
    width: 210px;
}

.main_nav_chapter .col_select {
    width: calc(100% - 420px);
    padding: 0px 20px;
}

.main_select_chapter {
    position: relative;
    border: 1px solid #4b84fb;
    border-radius: 10px;
}

.main_select_chapter ul.lists_chapter {
    margin: 0px;
    position: absolute;
    list-style: none;
    width: calc(100% + 2px);
    background-color: #fff;
    left: -1px;
    transition: max-height .3s;
    max-height: 0px;
    overflow: hidden;
    top: calc(100% - 7px);
}

.main_select_chapter span.label_chapter_selected {
    width: 100%;
    padding: 5px 20px;
    display: inline-block;
    font-weight: 600;
    cursor: pointer;
}

.main_select_chapter ul.lists_chapter li {
    margin-bottom: 0px !important;
}

.main_select_chapter ul.lists_chapter li a {
    font-weight: bold;
    display: block;
    padding: 5px 20px;
    transition: all .3s;
}

.main_select_chapter ul.lists_chapter li:hover a {
    background-color: #4b84fb;
    color: #fff;
}

.main_select_chapter:after {
    content: '';
    position: absolute;
    border-top: 7px solid #4b84fb;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    right: 20px;
    top: 17px;
}

.main_select_chapter.active ul.lists_chapter {
    border: 1px solid #4b84fb;
    border-top: none;
    max-height: 1000px;
}

.main_nav_chapter .col_button a.btn_action {
    display: block;
    text-align: center;
    padding: 7px 10px 12px 10px;
    background-size: 100% 100%;
    color: #fff;
}

.main_nav_chapter .col_button a.btn_action.btn_prev_chapter {
    background-image: url('cbb450_prev-chapter.png');
}

.main_nav_chapter .col_button a.btn_action.btn_next_chapter {
    background-image: url('b870fb_next-chapter.png');
}

.main_nav_chapter.up .main_select_chapter.active ul.lists_chapter {
    top: initial;
    bottom: calc(100% - 7px);
    border-bottom: none;
    border-top: 1px solid #4b84fb;
}

.ss_cicle_white_orange.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_orange.ss_chapter_has_cicle:after {
    background-color: #fdf3e9 !important;
}

.ss_cicle_purple_white.ss_chapter_has_cicle:after {
    background-color: #fff;
}

.ss_cicle_purple_white.ss_chapter_has_cicle:before {
    background-color: #f1eeff;
}

.ss_cicle_white_purple.ss_chapter_has_cicle:before {
    background-color: white;
}

.ss_cicle_white_purple.ss_chapter_has_cicle:after {
    background-color: #f1eeff;
}

.ss_cicle_white_blue.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_blue.ss_chapter_has_cicle:after {
    background-color: #ddfffb;
}

.ss_cicle_ping_white.ss_chapter_has_cicle:before {
    background-color: #ffedf2;
}

.ss_cicle_ping_white.ss_chapter_has_cicle:after {
    background-color: white;
}

.ss_cicle_white_ping.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_ping.ss_chapter_has_cicle:after {
    background-color: #ffedf2;
}

.ss_cicle_orange_white.ss_chapter_has_cicle:before {
    background-color: #fff1e6;
}

.ss_cicle_orange_white.ss_chapter_has_cicle:after {
    background-color: #fff;
}

.ss_cicle_white_green.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_green.ss_chapter_has_cicle:after {
    background-color: #efffcc;
}

.ss_cicle_white_pingLight.ss_chapter_has_cicle::before {
    background-color: #fff;
}

.ss_cicle_white_pingLight.ss_chapter_has_cicle::after {
    background-color: #ffe9fa;
}

.ss_chapter_has_cicle.ss_cicle_blue_white:before {
    background-color: #edf2fb;
}

.ss_chapter_has_cicle.ss_cicle_blue_white:after {
    background-color: #fff;
}

.ss_cicle_white_greenLight.ss_chapter_has_cicle::before {
    background-color: #fff;
}

.ss_cicle_white_greenLight.ss_chapter_has_cicle::after {
    background-color: #e4ffde;
}

.ss_cicle_white_bluegray.ss_chapter_has_cicle::before {
    background-color: #fff;
}

.ss_cicle_white_bluegray.ss_chapter_has_cicle::after {
    background-color: #edf8fe;
}

.ss_cicle_white_blueLight.ss_chapter_has_cicle::before {
    background-color: #fff;
}

.ss_cicle_white_blueLight.ss_chapter_has_cicle::after {
    background-color: #edf2fb;
}

.ss_cicle_white_bluepurple.ss_chapter_has_cicle::before {
    background-color: #fff;
}

.ss_cicle_white_bluepurple.ss_chapter_has_cicle::after {
    background-color: #dfe7fd;
}

.ss_chapter_has_cicle.ss_cicle_pingLight_white:before {
    background-color: #ffe9fa;
}

.ss_chapter_has_cicle.ss_cicle_pingLight_white:after {
    background-color: #fff;
}

ul.list_toturial.title_white li span.title_toturial {
    background-color: #fff;
}

table.table_section_checked {
    border-collapse: collapse;
    min-width: 700px;
}


table.table_section_checked td,
table.table_section_checked tr,
table.table_section_checked th {
    border: 1px solid #e0aef5;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    font-weight: 600;
}

table.table_section_checked th {
    padding: 15px 5px;
}

table.table_section_checked thead tr th {
    width: calc(100% / 7);
}

.table_section_checked span.checked {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #323c54;
    border-radius: 2px;
}

.table_section_checked span.checked:after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    color: #9b6ef3;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    font-size: 20px !important;
}

ul.list_has_arrow>li {
    list-style: none;
    margin-left: 0px !important;
    padding-left: 40px;
    position: relative;
}

ul.list_has_arrow>li:after {
    content: '';
    display: inline-block;
    border-right: 13px solid;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    left: 0;
    top: 7px;
}

ul.list_has_arrow li.arrow_red:after {
    border-right-color: #ff555e;
}

ul.list_has_arrow li.arrow_yellow:after {
    border-right-color: #fbc201;
}

ul.list_has_arrow li.arrow_purple:after {
    border-right-color: #b962ef;
}

ul.list_has_arrow li.arrow_green:after {
    border-right-color: #95e878;
}

ul.list_has_arrow>li.arrow_orange:after {
    border-right-color: #ff8650;
}

ul.list_has_arrow>li.arrow_blue:after {
    border-right-color: #87b5ff;
}

ul.list_has_arrow.arrow_top>li:after {
    top: 3px;
}

ul.list_has_arrow.large_magrin>li {
    margin-bottom: 30px;
}

.ss_nav_page {
    z-index: 10;
}

div#popup_container {
    position: fixed;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
}

div#popup_container span#close_popup {
    color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    cursor: pointer;
    position: absolute;
    top: -30px;
    right: 0px;
    background-color: #000;
}

#popup_container div#loading {
    max-width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div#popup_content {
    width: 90%;
    height: auto;
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    max-width: 700px;
}

div#popup_content iframe.iframe_video {
    width: 100%;
    height: 400px;
}

div#popup_content {
    text-align: center;
    color: #fff;
}

div#popup_content h3 {
    color: #fff;
}

.row_member_scroll {
    flex-wrap: initial !important;
    overflow: scroll;
    padding-bottom: 30px;
    overflow-y: hidden;
    position: relative;
}


.row_member_scroll .col {
    min-width: 25%;
}

.row_member_scroll::-webkit-scrollbar {
    height: 16px !important;
}

.row_member_scroll::-webkit-scrollbar-track {
    background: transparent;
}

.row_member_scroll::-webkit-scrollbar-thumb {
    background: #4b84fb;
    border-radius: 999px
}

.row_member_scroll::-webkit-scrollbar-thumb:hover {
    background: #4b84fb;
}

.row_member_scroll.scroll_orange::-webkit-scrollbar-thumb {
    background: #ee8543;
}

.row_member_scroll.scroll_orange::-webkit-scrollbar-thumb:hover {
    background: #ee8543;
}

.row_member_scroll.scroll_purple::-webkit-scrollbar-thumb {
    background: #5545a7;
}

.row_member_scroll.scroll_purple::-webkit-scrollbar-thumb:hover {
    background: #5545a7;
}

.row_member_scroll.scroll_green::-webkit-scrollbar-thumb {
    background: #28ac9d;
}

.row_member_scroll.scroll_green::-webkit-scrollbar-thumb:hover {
    background: #28ac9d;
}

.row_member_scroll.scroll_ping::-webkit-scrollbar-thumb {
    background: #f1789d;
}

.row_member_scroll.scroll_ping::-webkit-scrollbar-thumb:hover {
    background: #f1789d;
}

.row_member_scroll.scroll_greenBana::-webkit-scrollbar-thumb {
    background: #8cc50f;
}

.row_member_scroll.scroll_greenBana::-webkit-scrollbar-thumb:hover {
    background: #8cc50f;
}

.row_member_scroll.scroll_blueLight::-webkit-scrollbar-thumb {
    background: #72a2f9;
}

.row_member_scroll.scroll_blueLight::-webkit-scrollbar-thumb:hover {
    background: #72a2f9;
}

.row_member_scroll.scroll_purple3::-webkit-scrollbar-thumb {
    background: #9558e4;
}

.row_member_scroll.scroll_purple3::-webkit-scrollbar-thumb:hover {
    background: #9558e4;
}

.row_member.row_member_scroll {
    padding-top: 40px;
    margin-top: -40px;
}

.row_member_container>.col:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #d3dee3;
    position: absolute;
    left: 0px;
    bottom: 8px;
    z-index: -1;
}

.row_member_container>.col {
    padding-bottom: 0px;
    position: relative;
}

.row_member_container {
    margin-bottom: 50px;
    position: relative;
}

.row_member_container .arrow_scroll {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 27px;
    color: #d2e0fe;
    cursor: pointer;
    display: flex;
    width: 40px;
    padding: 0px;
    align-items: center;
    justify-content: center;
    z-index: 3;

}

.row_member_container .arrow_scroll:after {
    display: none;
}

.row_member_container .arrow_scroll.prev {
    left: -40px;
}

.row_member_container .arrow_scroll.next {
    right: -40px;
}

.login_register_content .user-registration {
    border: none;
    padding: 0px;
    margin-bottom: 0px;
}

.login_register_content .user-registration .ur-button-container {
    display: flex;
    align-items: center;
}

.login_register_content .user-registration .ur-button-container button.btn.button.ur-submit-button {
    margin-left: 0px;
    background-color: #1b9a4b;
    padding: 0px 15px;
    min-width: 150px;
    line-height: normal;
}

.login_register_content .form_container .switch_form {

    cursor: pointer;
    color: #fc8650;
}

.login_register_content .form_container .switch_form:hover {
    text-decoration: underline;
}

.login_register_content .form_container {
    position: relative;
}

.login_register_content .form_register.form_container {
    display: none;
}

div#popup_login {
    position: fixed;
    width: 90vw;
    height: 100vh;
    top: 0;
    left: 5vw;
    display: none;
    z-index: 999;
}

div#popup_login div#popup_content {
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 750px;
    padding: 30px;
}

div#popup_login div#popup_content span#close_popup {
    color: #000;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #fff;
    font-weight: 500;
    font-size: 30px;
    cursor: pointer;
}

.login_register_content .user-registration label {
    text-align: left;
}

.login_register_content .user-registration form {
    margin-bottom: 0px;
}

.login_register_content div#user-registration {
    margin: 0px;
    border: none;
    box-shadow: none;
}

.login_register_content div#user-registration div#ur-frontend-form {
    padding: 0px;
    border: none;
}

.login_register_content div#user-registration .lost_password {
    text-align: left;
}

.login_register_content div#user-registration input.user-registration-Button.button {
    margin: 0px;
    background-color: #1b9a4b;
    padding: 0px 15px;
    line-height: normal;
}

.login_register_content .form_login.form_container .form_action {
    text-align: left;
}

.login_register_content div#user-registration .ur-form-grid {
    padding: 0px;
}

.login_register_content div#user-registration .user-registration-form__label-for-checkbox input#rememberme {
    margin-top: 10px;
}

.ss_has_elip.ss_intro_contact .section-content::before {
    bottom: initial;
    top: 29%;
    background-image: url(cdc62e_Ellipse-graypurple-left.png);
}

.ss_has_elip.ss_intro_contact .section-content::after {

    background-image: url(866ea3_Ellipse-graypurple-right.png);
}

.ss_has_elip.ss_intro_template .section-content::before {
    bottom: 30%;
    background-image: url(f385eb_Ellipse-blueRecent-left.png);
}

.ss_has_elip.ss_intro_template .section-content::after {
    background-image: url(792f8a_Ellipse-blueRecent-right.png);
}

.icon_box_contact {
    margin-bottom: 20px;
}


.ss_cicle_white_graypurple.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_graypurple.ss_chapter_has_cicle::after {
    background-color: #efeff7;
}

.ss_cicle_white_greenRecent.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_greenRecent.ss_chapter_has_cicle::after {
    background-color: #e5fae9;
}

.ss_cicle_white_bluegray.ss_chapter_has_cicle:before {
    background-color: #fff;
}

.ss_cicle_white_bluegray.ss_chapter_has_cicle::after {
    background-color: #edf8fe;
}

.frm_contact {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 850px;
}

.frm_contact .frmfield.haft {
    width: calc(50% - 15px);
}

.frm_contact .frmfield {
    width: 100%;
    margin-bottom: 30px;
}

.frm_contact input,
.frm_contact textarea {
    box-shadow: none !important;
    border-radius: 10px !important;
    margin-bottom: 0px !important;
}

.frm_contact input:focus,
.frm_contact textarea:focus {
    border-color: #4b84fb !important;

}

.frm_contact input::placeholder,
.frm_contact textarea::placeholder {
    color: #5b6376 !important;
}

.frm_contact input.wpcf7-form-control.wpcf7-submit {
    background-color: #5fd46c;
    margin: 0px !important;
}

.page-template-template-inner-page .ss_abs_footer:after {
    content: '';
    width: 3.5em;
    height: 3.5em;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: -3em;
    right: 15px;
}

.page-template-template-inner-page .ss_abs_footer.footer_cicle_orangeRecent:after {
    background-color: #fdf3e9;

}

.page-template-template-inner-page .ss_abs_footer.footer_cicle_pink:after {
    background-color: #ffedf2;

}

.page-template-template-inner-page .ss_abs_footer.footer_cicle_greenRecent:after {
    background-color: #e5fae9;

}

.page-template-template-inner-page #footer .container:after {
    display: none;
}

table.tb_template {
    border-collapse: collapse;
}

table.tb_template td {
    border: 1px solid #a6b3a8;
    color: #323c54;
    padding: 15px 10px;
}

table.tb_template thead td {
    border-color: #5ed66c;
    background-color: #5ed66c;
    font-weight: bold;
    color: #fff;
}

table.tb_template tbody tr:first-child td {
    border-top: none;
}

table.tb_template td.file_name {
    font-weight: bold;
}

table.tb_template td.file_name {
    width: 30%;
}

table.tb_template td.desctiption {
    width: 40%;
}

table.tb_template td.link {
    width: 30%;
}

table.tb_template td.link a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.row_chapter .col_chapter .col-inner {
    height: 100%;
}

/*
.row_chapter .col_chapter .col-inner a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 2em 4.5em;
}*/

/*.row_chapter .col_chapter.chapter-1 .col-inner {
    background-image: url(0ab8e8_Bg-Chapter-1.png);
}
.row_chapter .col_chapter.chapter-2 .col-inner {
    background-image: url(fed35c_Bg-Chapter-2.png);
}
.row_chapter .col_chapter.chapter-3 .col-inner {
    background-image: url(c11e5d_Bg-Chapter-3.png);
}
.row_chapter .col_chapter.chapter-4 .col-inner {
    background-image: url(508dcf_Bg-Chapter-4.png);
}
.row_chapter .col_chapter.chapter-5 .col-inner {
    background-image: url(808988_Bg-Chapter-5.png);
}
.row_chapter .col_chapter.chapter-6 .col-inner {
    background-image: url(f6ea2c_Bg-Chapter-6.png);
}
.row_chapter .col_chapter.chapter-7 .col-inner {
    background-image: url(a00c5d_Bg-Chapter-7.png);
}
.row_chapter .col_chapter.chapter-8 .col-inner {
    background-image: url(1fc445_Bg-Chapter-8.png);
}
.row_chapter .col_chapter.chapter-9 .col-inner {
    background-image: url(bf21a8_Bg-Chapter-9.png);
}
.row_chapter .col_chapter.chapter-10 .col-inner {
    background-image: url(8f9498_Bg-Chapter-10.png);
}*/
.col_chapter .col-inner {
    height: 100%;
}

.col_chapter .box:not(.image_box_nav) .box-text {
    width: 100%;
    background-color: transparent !important;
    text-align: left;
    margin: 0px !important;
    padding: 0px 10%;
    box-shadow: none;
    transform: initial !important;
    left: initial !important;
    top: 20%;
    opacity: 1 !important;
    height: max-content !important;
    cursor: pointer;
}

.col_chapter .box:not(.image_box_nav) .box-image {
    height: 100%;
    width: 100%;
}

.col_chapter .box:not(.image_box_nav) .box-text h3 {
    margin-bottom: 20px;
    color: #fff;
}

.col_chapter .box:not(.image_box_nav) .box-text p {
    color: #fff;
    font-weight: 500;
}

.col_chapter .box:not(.image_box_nav) {
    height: 100%;
}

.col_chapter.chapter-1 .box .box-image,
.col_chapter.chapter-4 .box .box-image,
.col_chapter.chapter-5 .box .box-image,
.col_chapter.chapter-8 .box .box-image,
.col_chapter.chapter-9 .box .box-image {
    width: calc(108% + 2px)
}

.col_chapter.chapter-4 .box .box-image,
.col_chapter.chapter-8 .box .box-image {
    left: calc(-8% - 2px);
}

.col_chapter.chapter-1 {
    position: relative;
    z-index: 3;
}

.col_chapter.chapter-2 {
    position: relative;
    z-index: 1;
}

.col_chapter * {
    overflow: visible !important;
}

.col_chapter.chapter-3 {
    margin-top: calc(-8% - 6px);
}

.col_chapter.chapter-10 {
    margin-top: calc(-8% - 4px);
}

.col_chapter.chapter-4 {
    margin-top: calc(-4% - 3px);
}

.col_chapter.chapter-5,
.col_chapter.chapter-6,
.col_chapter.chapter-7,
.col_chapter.chapter-8,
.col_chapter.chapter-9 {
    margin-top: calc(-4% - 2px);
}

.col_chapter.chapter-3 .box .box-text,
.col_chapter.chapter-10 .box .box-text {
    top: calc(28% + 5px);
}

.box_start_capstone {
    max-width: 250px;
    position: relative;
}

.box_start_capstone .box .box-text {
    position: absolute;
    top: 50%;
}

.box_start_capstone .box-text {
    top: 50%;
    position: absolute;
    padding: 0px;
    transform: translateY(-50%);
    cursor: pointer;
}

.box_start_capstone .box-text * {
    color: #fff;
}
.ss_has_elip.ss_intro_capstone_project .section-content:before {
    bottom: 17%;
}
@media(min-width: 1551px) {

    .ss_overview .section-content:after,
    .ss_has_elip .section-content:after,
    .ss_infor_home:after {
        height: 230px;
        width: 55px;
    }

    .ss_overview .section-content:before,
    .ss_has_elip .section-content:before,
    .ss_infor_home:before {
        height: 226px;
        width: 85px;
    }

    .ss_chapter_has_cicle:after,
    .ss_chapter_has_cicle:before {
        width: 110px;
        height: 110px;
    }

    .ss_chapter_has_cicle:after {
        top: -20px;
    }

    .ss_chapter_has_cicle:before {
        top: -80px;
    }



}

@media(max-width: 1550px) {
    .main_login_container {
        max-width: 150px;
    }

    .box_login_charpter p.login_text {
        left: 33%;
    }

    #masthead #logo {
        max-width: 400px;
    }

    #masthead #logo img {
        max-width: 50%;
    }

    #masthead .header-nav>.menu-item {
        width: 120px;
        height: 70px;
        margin-left: -14px !important;
    }

    #masthead .header-nav>.menu-item>a {
        padding-left: 25px !important;
        font-size: 16px;
        line-height: 16px;
    }

    #masthead .header-nav>.menu-item.item-how-to-use>a,
    #masthead .header-nav>.menu-item.item-userful>a {
        padding-right: 30px;
    }


}

@media(max-width: 1366px) {
    .main_material_lists.slide .custom_arrow.prev {
        left: 10px;
        z-index: 3;
    }

    .main_material_lists.slide .custom_arrow.next {
        right: 10px;
        z-index: 3;
    }

    #masthead #logo {
        width: 300px;
    }

    .row_member_container .arrow_scroll.prev {
        left: 15px;
    }

    .row_member_container .arrow_scroll.next {
        right: 15px;
    }
}

@media(max-width: 1024px) {

    body #header .flex-col.show-for-medium.flex-right {
        display: block !important;
    }

    body #header .flex-col.hide-for-medium.flex-right {
        display: none;
    }

    body {
        font-size: 16px !important;
        line-height: 16px;
    }

    body .u-fs75 {
        font-size: 50px !important;
        line-height: 50px;
    }

    body .u-fs40 {
        font-size: 28px !important;
        line-height: 28px;
    }

    body .u-fs100 {
        font-size: 80px !important;
        line-height: 80px;
    }

    body .u-fs50 {
        font-size: 38px !important;
        line-height: 38px;
    }

    body .u-fs40 {
        font-size: 32px !important;
        line-height: 32px;
    }

    body .u-fs35 {
        font-size: 28px !important;
        line-height: 28px;
    }

    body .only_desk {
        display: none;
    }

    div#popup_content iframe.iframe_video {
        width: 100%;
        height: 350px;
    }

    .col_chapter.chapter-1 .box .box-text,
    .col_chapter.chapter-3 .box .box-text,
    .col_chapter.chapter-5 .box .box-text,
    .col_chapter.chapter-7 .box .box-text,
    .col_chapter.chapter-9 .box .box-text {
        padding-right: 60px;
    }

    .col_chapter.chapter-2 .box .box-text,
    .col_chapter.chapter-4 .box .box-text,
    .col_chapter.chapter-6 .box .box-text,
    .col_chapter.chapter-10 .box .box-text {
        padding-left: 60px;
    }


}

@media(min-width: 851px) {
    #header div#masthead {
        padding: 0px 20px;
    }


}

@media(max-width: 850px) {
    .image_box_nav .box-image {
        width: 128%;
    }

    .image_box_nav .box-image {
        width: 128%;
    }

    .image_box_nav.text_bottom .box-image {
        margin-top: calc(-27% - 3px);
    }

    .col_case_studi .image_box_nav.text_bottom .box-image {
        margin-left: calc(-20% - 6px);
        width: calc(128% + 2px);
    }

    .col_contact .image_box_nav.text_bottom .box-image {
        width: calc(119% + 4px);
        margin-left: calc(-19% - 4px);
    }

    .col_template .image_box_nav.text_bottom .box-image {
        width: calc(105% + 3px);
        margin-top: calc(-47% - 5px);
    }

    .main_login_container {
        display: none;
    }

    .main_nav_chapter .col_select {
        width: calc(100% - 300px);
    }

    .main_nav_chapter .col_button {
        width: 150px;
    }

    .ss_abs_footer {
        height: 200px;
    }

    .row_list_material .col_title p {
        margin-top: 0px;
    }

    .box_table_point {
        overflow-x: scroll;
    }

    .frm_contact .frmfield.haft {
        width: 100%;
    }

    .col_chapter.chapter-3 {
        margin-top: calc(-8% - 3px);
    }

    .col_chapter.chapter-10 {
        margin-top: calc(-8% - 2px);
    }

    .col_chapter.chapter-4 {
        margin-top: calc(-4% - 2px);
    }

    .col_chapter.chapter-1 .box .box-image,
    .col_chapter.chapter-4 .box .box-image,
    .col_chapter.chapter-5 .box .box-image,
    .col_chapter.chapter-8 .box .box-image,
    .col_chapter.chapter-9 .box .box-image {
        width: 108%;
    }

    .col_chapter.chapter-4 .box .box-image,
    .col_chapter.chapter-8 .box .box-image {
        left: -8%;
    }

    .col_chapter.chapter-5,
    .col_chapter.chapter-6,
    .col_chapter.chapter-7,
    .col_chapter.chapter-8,
    .col_chapter.chapter-9 {
        margin-top: -4%;
    }


}

@media(max-width: 767px) {
    body {
        font-size: 14px !important;
        line-height: 14px;
    }

    body .u-fs75 {
        font-size: 30px !important;
        line-height: 30px;
    }

    body .u-fs100 {
        font-size: 50px !important;
        line-height: 50px;
    }

    body .u-fs50 {
        font-size: 30px !important;
        line-height: 30px;
    }

    body .u-fs40 {
        font-size: 25px !important;
        line-height: 25px;
    }

    body .u-fs35 {
        font-size: 24px !important;
        line-height: 24px;
    }

    #logo img {
        max-width: 40%;
    }

    #masthead #logo {
        max-width: 250px;
    }

    section.section.ss_top {
        padding-top: 100px !important;
    }

    ul.list_toturial li span.title_toturial {
        min-width: 90px;
    }

    .list_toturial li {
        line-height: 17px;
    }

    .process_main .process_bar {
        width: 30px;
    }

    .process_main .list_process {
        width: calc(100% - 40px);
    }

    .main_nav_chapter {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .main_nav_chapter .col_select .col_select {
        width: 100%;
    }

    .main_nav_chapter .col_select {
        width: 100%;
        order: 1;
        margin-bottom: 20px;
        padding: 0px;
    }

    .main_nav_chapter .col_button {
        order: 2;
        width: 150px;
    }

    .container_table_checked {
        overflow-x: scroll;
    }

    div#popup_content iframe.iframe_video {
        width: 100%;
        height: 250px;
    }

    .row_member_scroll .col {
        min-width: 50%;
    }

    table.tb_template {
        min-width: 600px;
    }

    .col_table_info .col-inner {
        overflow-x: scroll;
    }

}

@media(max-width: 550px) {
    #header .stuck div#masthead {
        height: 70px !important;
    }

    .row_card_nav .image_box_nav .box-image {
        width: 100% !important;
        margin: 0px !important;
    }

    .col_project .col-inner {
        background-color: #009a4b;
    }

    .col_how_to_use .col-inner {
        background-color: #83b2ff;
    }

    .col_chapter .col-inner {
        background-color: #9b6ef3;
    }

    .col_template .col-inner {
        background-color: #ff555e;
    }

    .col_case_studi .col-inner {
        background-color: #ff8650;
    }

    .col_contact .col-inner {
        background-color: #f6cd62;
    }

    .image_box_nav .box-text h3 {
        font-size: 30px !important;
    }

    .image_box_nav .box-text {
        bottom: initial !important;
        top: 50% !important;
        transform: translateY(-50%);
    }

    .row_member .col:after {
        display: none;
    }

    ul.list_toturial li {
        align-items: center;
    }

    .material_item .inner_image img {
        margin: 0 auto;
    }

}