/* --- reset --- */

* {
    padding: 0;
    margin: 0;
    outline: none;
}

*, *:before, *:after {
    box-sizing: border-box;
}

a {
    text-decoration: none
}

img, button::-moz-focus-inner {
    border: none
}

button {
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer
}

button:focus {
    outline: none;
    border: none;
}

input, textarea, button, select, a, .burger, .li-account {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

span {
    display: inline-block;
}

div, section {
    position: relative;
    display: block;
}

section {
    width: 100%;
    height: auto;
}

img {
    image-rendering: auto;
}

input, textarea {
    border-radius: 0;
    border: none;
}

input[type=search] {
    -webkit-appearance: none
}

input:disabled {
    background: #FFF;
    opacity: 1;
    color: #000;
}

input:read-only {
    background: #f4f4f4;
    color: rgb(99, 99, 99);
}

ul, ol, li {
    list-style: none;
}

.disable-pointer {
    pointer-events: none;
}

/* --- typography --- */

* {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: serviceimizeLegibility;
}

html {
    font-size: 16px;
}

body, input, textarea {
    font-size: 1rem;
    font-weight: 400;
}

::selection {
    color: #000;
    background: #9bc2e9
}

::-moz-selection {
    color: #000;
    background: #9bc2e9
}

::-webkit-input-placeholder {
    font-family: Arial, Helvetica, sans-serif;
    color: #BCBCBC;
}

:-moz-placeholder {
    font-family: Arial, Helvetica, sans-serif;
    color: #BCBCBC;
}

::-moz-placeholder {
    font-family: Arial, Helvetica, sans-serif;
    color: #BCBCBC;
}

:-ms-input-placeholder {
    font-family: Arial, Helvetica, sans-serif;
    color: #BCBCBC;
}

b, .fw5 {
    font-weight: 500;
}

.textshadow {
    text-shadow: 2px 2px 10px #111;
}

.txtB {
    color: #000;
}

a, .txtW {
    color: #000;
}

h1 {
    /* 60px */
    font-size: 3.75rem;
    font-weight: 100;
    letter-spacing: .09rem;
}

h2 {
    /* 35px  */
    font-size: 2.1875rem;
    font-weight: 400;
    letter-spacing: .3125rem;
}

h3 {
    /* 30px  */
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: .06rem;
}

h4 {
    /* 25px  */
    font-size: 1.5625rem;
    font-weight: 400;
    letter-spacing: .05rem;
}

h5 {
    /* 20px  */
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: .05rem;
}

h6 {
    /* 18px  */
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: .02rem;
}

p {
    /* 18px  */
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: .02rem;
}

p a {
    letter-spacing: .02rem;
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.sans {
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --font: #2E431D;
    --dark-green: #2E431D;
    --light-green: #507C39;
    --grey: #F4F4F4;
}

.disable-pointer {
    pointer-events: none !important;
}

.hide {
    display: none !important;
}

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: all;
    visibility: visible;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .3s ease-in-out;
}

#loader-helper {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    pointer-events: none;
    visibility: hidden;
}

#loader .loader-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #FFF;
}

#loader.out {
    pointer-events: none;
    opacity: 0;
}

/* ---- Loading Bar ---- */
.page-loading {
    z-index: 1000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 10px;
    display: none;
    pointer-events: none;
}

.page-loading.show {
    display: block;
}

.page-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e2e2e2;
    animation: loading 2s linear infinite forwards;
    background: linear-gradient(to right, #e2e2e2 8%, #507C39 18%, #e2e2e2 33%);
}

@keyframes loading {
    0% {
        background-position: -100vw 0
    }

    100% {
        background-position: 100vw 0
    }
}

/* layout css */
.text-content * {
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
}

/* --- list style --- */

.list-alpha, .list-num, .list-roman, .list-disc, .list-square, .list-rhombus, .list-arrow, .list-hr {
    counter-reset: list;
    display: block;
}

.list-num {
    position: relative;
}

.list-num-nested {
    counter-reset: count;
    display: block;
}

.list-disc>li, .list-arrow>li, .list-square>li, .list-rhombus>li, .list-hr>li, .list-alpha>li, .list-num>li, .list-roman>li, .list-num-nested>li {
    list-style: none;
    position: relative;
    display: block;
    text-align: left;
    margin: .5em 0;
}

.list-alpha>li, .list-num>li, .list-roman>li, .list-num-nested>li {
    padding-left: 4ch;

}

.list-disc>li, .list-arrow>li, .list-square>li, .list-rhombus>li, .list-hr>li {
    padding-left: 2ch;
}

.list-hr.lg>li {
    font-size: 1rem;
}

.list-alpha>li:before {
    content: "("counter(list, lower-alpha) ") ";
    counter-increment: list;
    width: 5ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.list-alpha.big>li:before {
    content: counter(list, upper-alpha)".";
}

.list-alpha.with-right-bra>li:before {
    content: counter(list, lower-alpha)") ";
}

.list-num-nested>li::before {
    counter-increment: count;
    content: counters(count, ".", decimal) ". ";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.list-num>li::before {
    counter-increment: list;
    content: counter(list, decimal) ". ";
    width: 4ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.list-num.list-num-bra>li::before {
    content: "("counter(list, decimal) ") ";
}

.list-num.with-dot>li:before {
    content: counter(list, decimal) ". ";
}

.list-roman>li:before {
    content: "("counter(list, lower-roman) ") ";
    counter-increment: list;
    width: 5ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    /* line-height: 1.5; */
}

.list-disc>li:before {
    content: counter(list, disc) " ";
    counter-increment: list;
    width: 3ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.list-square>li:before {
    content: counter(list, square) " ";
    counter-increment: list;
    width: 3ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.list-rhombus>li:before {
    content: "\2b29 ";
    counter-increment: list;
    width: 3ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.list-rhombus.big>li:before {
    content: "\25c6 ";
}

.list-arrow>li:before {
    content: "\25ba ";
    counter-increment: list;
    width: 3ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.list-hr>li:before {
    content: "- ";
    counter-increment: list;
    width: 3ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.bg {
    background-color: #F8F8F8;
    margin-bottom: 20px;
}

.bg-wrapper {
    padding-top: calc(70px + 5vh);
}

.template {
    display: none;
}

.page-wrapper {
    width: 100%;
    padding: 5% 0;
    margin: 0;
    outline: none;
}

.container-wrapper {
    width: 100%;
    padding: 5% 3%;
    margin: 0;
    outline: none;
}

.container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.container.md {
    max-width: 1100px;
}

.container.sm {
    max-width: 800px;
}

.main-content {
    width: 100%;
}

.main-content .moblie {
    display: none;
}

.swiper {
    overflow: hidden;
}

h2.section-title {
    color: var(--dark-green);
    margin-bottom: 10%;
    font-weight: 500;
}

.section-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.section-container .content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fade {
    display: none;
    opacity: 0;
    transition: opacity .1s ease;
}

.fade.active {
    display: block;
}

.fade.active.show {
    opacity: 1;
}

.card-page-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
}

.card-page {
    flex: 10 0 auto;
    width: 100%;
}

.page-head .desktop {
    display: block;
}

.page-head .page-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    /* padding-top: 5%; */
    padding-bottom: 5%;
    padding-left: calc((100vw - 1400px)/2);
}

.page-head .page-head-title-wrapper {
    width: 100%;
    padding: 5% 3% 0;
    margin: 0;
    outline: none;
}

.page-head-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-head .page-wrapper.hide, .page-head .page-head-title-wrapper.hide, .page-title-wrapper.hide {
    display: none;
}

.page-title {
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    color: #2E431D;
    font-size: 1.875rem;
    font-weight: 700;
}

.page-title>small {
    font-size: 1rem;
    font-weight: 500;
}

.main-content .page-title.moblie, .main-content .page-title.normal {
    margin-bottom: 5%;
}

.main-content .page-title.less {
    margin-bottom: 1%;
}

.page-head-container .page-title::before {
    content: '';
    position: absolute;
    bottom: 150%;
    left: 0;
    width: 20%;
    min-width: 25px;
    height: 5px;
    background-color: #2E431D;
}

.page-title.hide, .main-content .page-title.moblie.hide {
    display: none;
}

.page-head-container .page-head-bg {
    width: 70%;
    height: 30vh;
    max-height: 330px;
    border-radius: 12.5rem 0 0 12.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/assets/img/header_banner.jpg');
}

.course-advance .page-head-container .page-head-bg {
    background-image: url('/assets/img/header_banner_advance.jpg');
}

.course-motorbike .page-head-container .page-head-bg {
    background-image: url('/assets/img/header_banner_motorbike.jpg');
}

.course-privateandvan .page-head-container .page-head-bg {
    background-image: url('/assets/img/header_banner_privateandvan.jpg');
}

.course-retake .page-head-container .page-head-bg {
    background-image: url('/assets/img/header_banner_retake.jpg');
}

.btn-back-record {
    color: #2E431D;
}

.page-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.page-content.center {
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.tab.moblie {
    display: none;
    /* overflow-x: auto; */
    width: 100%;
}

.tab.moblie .block-list::-webkit-scrollbar {
    height: 5px;
}

.tab.moblie .block-list::-webkit-scrollbar-track {
    background-color: var(--dark-green);
}

.tab.moblie .block-list::-webkit-scrollbar-thumb {
    background-color: var(--light-green);
}

.tab.moblie .block-list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    z-index: 99;
    background-color: #2E431D;
    overflow-x: auto;
}

.tab.moblie .block-list li {
    position: relative;
    display: block;
    background-color: #2E431D;
    height: 100%;
    padding: 3%;
    cursor: pointer;
}

.tab.moblie .block-list li .block-title {
    display: block;
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    padding-bottom: 10px;
    color: white;
    white-space: nowrap;
}

.tab.moblie .block-list li.active .block-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: white;
}

.page-content .main {
    width: 70%;
    max-width: 1000px;
    height: auto;
}

.wrapper {
    width: 100%;
}

.page-content .tab {
    width: 29%;
    max-width: 350px;
    height: auto;
    position: sticky;
    top: 0;
    right: 0;
}

.page-content .page-block, .page-content .tab-block {
    width: 100%;
    height: auto;
    padding: 1.5em;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 1.25rem;
    margin-bottom: 5%;
}

.page-content .page-block.sm {
    padding: 10%;
}

.page-content .page-block.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-content .tab .tab-block {
    padding: 5%;
}

.page-content .block-title {
    display: block;
    position: relative;
    color: var(--dark-green);
    padding-left: 1.25rem;
    height: fit-content;
    height: -moz-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: 500;
    margin-bottom: 5%;
    letter-spacing: .125rem;
}

.page-content .block-title.middle-title {
    padding-left: 0;
    margin-bottom: 1em;
    margin-top: 5%;
}

.page-block .block-title {
    font-size: 1.25rem;
}

.page-content .tab .block-title {
    color: #000000;
    margin-bottom: 0;
}

.page-content .tab .block-list>li.active .block-title, .page-content .tab .block-list>li:hover .block-title {
    color: var(--dark-green);
}

.page-content .main .block-title::before, .page-content .tab .block-list>li.active .block-title::before, .page-content .tab .block-list>li:hover .block-title::before {
    content: '';
    position: absolute;
    height: 110%;
    width: 4px;
    background-color: #2E431D;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.page-content .block-title.middle-title::before {
    display: none;
}

.page-content .tab .block-list>li {
    cursor: pointer;
}

.page-content .block-list, .page-content .block-list>li {
    width: 100%;
    display: block;
    position: relative;
}

.page-content .block-list>li {
    padding: 3% 0;
}

.page-content .block-list>li:not(:last-of-type) {
    border-bottom: 1px solid #CECECE;
}

.page-content .block-list>li.step {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3%;
}

.page-content .block-list>li.step .num {
    width: 10%;
    font-size: 3.125rem;
    letter-spacing: 2px;
    font-weight: 100;
    color: var(--dark-green);
    line-height: 1;
}

.page-content .block-list>li.step .content {
    width: 89%;
}

.page-content .block-list>li.step .content .step-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3%;
}

.page-content .block-list>li.step .content .step-title .icon {
    width: 10%;
    max-width: 58px;
    background-color: var(--dark-green);
    border-radius: 50%;
}

.page-content .block-list>li.step .content .step-title .icon .ratio-obj {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-content .block-list>li.step .content .step-title .icon img {
    width: 50%;
    height: 80%;
    object-fit: contain;
}

.page-content .block-exam .block-list>li.step .content .step-title .icon img {
    filter: brightness(10);
}

.page-content .block-list>li.step .content .step-title h5 {
    display: block;
    width: 89%;
    color: var(--dark-green);
    font-size: 1.125rem;
    font-weight: 500;
}

.page-content p,
.page-content li,
.contact-info * {
    color: #2B2B2B;
    line-height: 1.8;
    font-size: 1.125rem !important;
}

.page-content li {
    line-height: 1.5;
}



.page-content .step-des li {
    padding-left: 2ch;
    display: block;
    position: relative;
    line-height: 2;
}

.page-content .step-des li::before {
    content: '-';
    color: #2B2B2B;
    counter-increment: list;
    width: 3ch;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
}

.page-content small {
    font-size: 1rem;
}

.fee-table {
    position: relative;
    width: 100%;
    max-width: 800px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #CCCCCC;
}

.fee-table * {
    font-size: 1.125rem;
}

.fee-table__row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.fee-table__row:last-of-type .fee-table__title,
.fee-table__row:last-of-type .fee-table__data {
    border-bottom: none !important;
}


.fee-table__title {
    position: relative;
    width: 45%;
    background-color: #E6EBE3;
    font-weight: 500;
    padding: 1em 2.2em;
    min-width: 150px;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

.fee-table__data {
    width: 55%;
    padding: 1em 2.2em;
    font-weight: 500;
    min-width: 250px;
    border-bottom: 1px solid #CCCCCC;
}

.fee-table__row.total-row .fee-table__title,
.fee-table__row.total-row .fee-table__data {
    background-color: #2E431D;
    color: #ffffff;
    border-right: none !important;
}

.fee-table__data.split {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.fee-table__data.split>div {
    padding: 1em 2.2em;
    width: 50%;
    font-weight: 500;
}

.fee-table__data.split>div:first-of-type {
    border-right: 1px solid #CCCCCC;
}

/* --- aspect ratio box --- */

.ratio-box {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 50% 0 0 0;
}

.ratio-box.sq {
    padding: 100% 0 0 0;
}

.ratio-box.hd {
    padding: 56.25% 0 0 0;
}

.ratio-box.vga {
    padding: 75% 0 0 0;
}

.ratio-box.wide {
    padding: 42.857% 0 0 0;
}

.ratio-obj {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.ratio-obj>* {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ratio-obj.contain>* {
    object-fit: contain;
}

.ratio-obj.top>* {
    object-position: top;
}

.ratio-obj.bottom>* {
    object-position: bottom;
}

/* firepop css */

.firePop-wrapper {
    position: fixed;
    width: 300px;
    top: 15%;
    right: 20px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    cursor: pointer;
    background-color: white;
    border-radius: .625rem;
    padding: .9375rem 1.25rem;
    transform: translateX(100px);
    pointer-events: none;
    opacity: 0;
    z-index: 999;
    transition: all .3s ease-in-out;
}

.firePop-wrapper.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: unset;
}

.firePop-wrapper .left .icon {
    box-sizing: border-box;
    width: 3.125rem;
    height: 3.125rem;
    margin-right: 20px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    background-color: white;
    border-radius: 50%;
    position: relative;
}

.firePop-wrapper .left .icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.firePop-wrapper.success .left .icon::after {
    width: 70%;
    height: 70%;
    background: url('/assets/icon/tick.svg') center/contain no-repeat;
}

.firePop-wrapper.fail .left .icon::after {
    width: 50%;
    height: 50%;
    background: url('/assets/icon/cross.svg') center/contain no-repeat;
}

.firePop-wrapper .top, .firePop-wrapper .bot {
    width: 100%;
    height: auto;
    text-align: left;
}

.firePop-wrapper .top {
    color: black;
    font-weight: 600;
    font-size: 1.125rem;
}

.firePop-wrapper .bot {
    margin-top: 10px;
    color: rgb(23, 23, 23);
    font-size: .9375rem;
    font-weight: 200;
    display: block;
}

.firePop-wrapper .bot.hide {
    display: none;
}

/* header css */

header {
    position: fixed;
    top: 5%;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1600px;
    width: 100%;
    height: 70px;
    z-index: 999;
    box-sizing: border-box;
    padding: 0 3%;
}

header nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

header .main {
    width: 80%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    border-radius: 6.25rem 20px 20px 6.25rem;
    box-shadow: 0 0 5px #2e431d38;
}

header .main .head-logo {
    width: 25%;
    height: 100%;
}

header .main .head-logo>a {
    display: block;
    width: 80%;
    height: 100%;
    position: relative;
}

header .main .head-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

header .main .head-link {
    width: 70%;
    height: 100%;
}

header .main .head-link>ul {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: stretch;
}

header .main .head-link .link {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

header .main .head-link .link a {
    font-size: 1.125rem;
    color: var(--font);
    font-weight: 400;
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    white-space: nowrap;
}

header .main .head-link .link:hover>a::after, header .lang-link>div a:hover::after, header .main .head-link .link .dropdown li a:hover::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--font);
    top: 100%;
    left: 0;
    position: absolute;
}

header .lang-link>div {
    display: flex;
    align-items: center;
}

header .nav-left {
    width: 18%;
    height: 100%;
}

header .nav-left>a {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--light-green);
    justify-content: center;
    align-items: center;
    border-radius: 20px 6.25rem 6.25rem 20px;
    color: white;
    font-size: 1.25rem;
    font-weight: 500;
    transition: .3s ease-in-out;
    box-shadow: 0 0 5px #2e431d38;
}

header .nav-left>a:hover {
    background-color: var(--dark-green);
}

header .auth-link a {
    display: none;
}

header .auth-link a.active {
    display: block;
}

header .main .head-link .link.moblie, header .moblie {
    display: none;
}

header .menu-btn {
    display: none;
    /* position: absolute; */
    cursor: pointer;
    /* top: 50%;
    right: 3%;
    transform: translateY(-50%); */
    z-index: 300;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 3px;
    background-color: #000000;
    margin: 10px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    transform: rotate(-45deg) translate(-10px, 10px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

/* header dropdown */

header .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 143px;
    max-height: 0;
    background-color: white;
    border: 1px solid #707070;
    padding: 20px;
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50px);
    z-index: -1;
    transition: .3s ease-in-out;
}

header .main .head-link .link:hover .dropdown {
    max-height: 1000px;
    opacity: 1;
    transform: translate(-50%, 0);
}

header .dropdown li {
    white-space: nowrap;
}

header .dropdown li:not(:last-of-type) {
    margin-bottom: 10px;
}

header .dropdown li.disabled, footer .middle>ul .link>ul>li.disabled {
    pointer-events: none;
}

header .main .head-link .link .dropdown li.disabled a, footer .middle>ul .link>ul>li.disabled a {
    color: #8B8B8B;
}

header .main .head-link .link .dropdown li a {
    color: var(--light-green);
    font-size: 1.125rem;
}

/* footer css */

footer {
    position: relative;
    width: 100%;
    height: auto;
    /* padding: 3% 3% 1% 3%; */
    background-color: var(--grey);
    border-top: 2px solid #707070;
}

footer .footer-nav {
    width: 100%;
    max-width: 1400px;
    display: block;
    margin: 0 auto;
}

footer .top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 5%;
    padding-bottom: 5%;
}

footer .top .footer-logo {
    display: block;
    position: relative;
    width: 50%;
    max-width: 366px;
}

footer .top .footer-logo>img {
    width: 100%;
    height: auto;
    object-position: left;
    object-fit: contain;
}

footer .top .footer-contact .icon img {
    width: auto;
    height: 100%;
    object-position: left;
    object-fit: contain;
}

footer .top .footer-contact {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

footer .top .footer-contact>div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

footer .top .footer-contact>div:not(:last-of-type) {
    margin-bottom: 10px;
}

footer .top .footer-contact .icon {
    width: 5%;
}

footer .top .footer-contact .text {
    width: 95%;
}

footer .top .footer-contact .text,
footer .top .footer-contact .text>* {
    cursor: pointer;
    color: var(--font);
    font-size: 1rem;
}

footer .top .footer-contact .text>* {
    display: block;
    margin-bottom: 5px;
}

footer .middle {
    padding-bottom: 3%;
    /* padding: 0 3% 3% 3%; */
}

footer .middle>ul {
    width: 100%;
    max-width: 850px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

footer .middle>ul .link>a {
    font-size: 1.125rem;
    color: var(--font);
    font-weight: 400;
    display: block;
    position: relative;
}

footer .middle>ul .link>a, footer .middle>ul .link>ul>li {
    margin-bottom: 10px;
}

footer .middle>ul .link>ul>li>a {
    font-size: .875rem;
    color: var(--font);
    font-weight: 400;
    display: block;
    position: relative;
}

footer .hor-line {
    width: 100%;
    height: 1px;
    background-color: #2E431D;
}

footer .bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1% 0;
}

footer .bot .left {
    width: 100%;
    max-width: 450px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .bot .left>div {
    max-width: 180px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .bot span, footer .bot a {
    font-size: .8125rem;
    color: #3E3E3E;
}

/* exam info css */

.exam-wrapper {
    position: fixed;
    width: 0;
    bottom: 5%;
    left: 0;
    z-index: 99;
}

.exam-wrapper.inactive {
    display: none;
}

.exam-wrapper li {
    display: block;
    position: relative;
}

.exam-wrapper>ul li:nth-of-type(odd) {
    background-color: #507C39;
}

.exam-wrapper>ul li:nth-of-type(even) {
    background-color: #2E431D;
}

.exam-wrapper .exam-block {
    z-index: 99;
    width: calc((100vw - 1400px) / 2 - 20px);
    min-width: 13.375rem;
    cursor: pointer;
    padding: .3125em .625em;
    border-radius: 0 6.25rem 6.25rem 0;
    margin-top: .625em;
}

.exam-wrapper .exam-block .ratio-box.outer-box {
    padding: 20.083% 0 0 0;
    border-radius: 0 6.25rem 6.25rem 0;
}

.exam-wrapper .exam-block .exam-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exam-wrapper .exam-block .icon {
    width: 15%;
    border-radius: 50%;
    background-color: #A8CF39;
}

.exam-wrapper .exam-block .icon .ratio-obj.inner-obj {
    display: flex;
    justify-content: center;
    align-items: center;
}

.exam-wrapper .exam-block .icon .ratio-obj.inner-obj>img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    object-position: center;
}

.exam-wrapper .exam-block .info {
    width: 80%;
    color: white;
    font-size: .9375rem;
}

.exam-wrapper .exam-block .info .date {
    margin-left: 5px;
}

/* pop-up css */

.popup {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

.popup.show {
    display: flex;
}

.popup .popup-container {
    width: 90%;
    max-width: 800px;
    height: 50vh;
    background-color: white;
    box-shadow: 0 3px 11px rgb(0 0 0 / 60%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 4em 3% 3%;
}

.popup .popup-container.lg {
    height: 75vh;
    min-height: 660px;
}

.popup .popup-container.center .text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.popup .popup-container .text-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: left;
}

.popup .popup-container .text-container>* {
    color: #2E431D;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

.popup .popup-container a {
    color: rgb(0, 123, 255);
    font-weight: bold;
    cursor: pointer;
}

.popup .popup-container .title {
    font-weight: bold;
}

.popup .popup-container .sub-title {
    text-decoration: underline;
    margin-bottom: .5em;
}

.popup .popup-container .blod-text {
    font-weight: 900;
}

.popup .popup-container button {
    border: none;
    background: url(/assets/icon/cross_green.svg) center/ contain no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 7%;
    right: 3%;
    z-index: 1;
    cursor: pointer;
}

.apply-link {
    cursor: pointer;
}

/* whatsapp css */

.whatsapp .whatsapp-container {
    height: 50px;
    width: 50px;
    box-sizing: border-box;
    background-color: white;
    position: fixed;
    bottom: 5%;
    right: 20px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    z-index: 99;
    cursor: pointer;
    display: block;
}

.whatsapp .whatsapp-container>img {
    width: 60%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: center;
    cursor: pointer;
}

/* home banner css */

.main-content.home {
    background-color: white;
}

.home-banner .swiper, .home-banner .swiper-wrapper, .home-banner .swiper-slide {
    width: 100%;
    height: 100%;
}

.home-banner .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-banner .banner-des {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 0 3%;
}

.home-banner .banner-des .des-container {
    height: 100%;
}

.home-banner .banner-des .slogan {
    /* position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 100%;
    color: white;
    /* font-size: 3.25rem; */
    font-size: 3vw;
    font-weight: 500;
    transform: translateY(-20%);
}

.home-banner .banner-des .scroll {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 30%;
    max-height: 156px;
    display: flex;
    align-items: center;
}

.home-banner .banner-des .scroll .scroll-label {
    height: 100%;
    width: 1px;
    background-color: white;
}

.home-banner .banner-des .scroll .text {
    color: white;
    text-transform: uppercase;
    text-orientation: mixed;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    margin-right: 10px;
    font-size: .9375rem;
    font-weight: lighter;
}

.home-banner .coupon-des {
    position: absolute;
    padding: 3%;
    background-color: rgb(164 223 133 / 68%);
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
    transform: translateY(-40%);
    display: flex;
    justify-content: flex-end;
}

.home-banner .coupon-des p {
    color: white;
    font-size: 1.5vw;
    font-weight: 400;
}

.home-banner .coupon-des h2 {
    font-size: 1.8vw;
    color: white;
    letter-spacing: 1px;
    font-weight: 500;
}


/* home course css */

.home-course .course-bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
    max-width: 1400px;
    width: 100%;
    height: 75%;
    background-color: var(--grey);
    border-radius: 0 0 50px 0;
}

.home-course .course-content {
    z-index: 2;
}

.home-course .course-content .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.home-course .course-content .verticle-title {
    margin-right: 20px;
    color: #000000;
    font-size: 2.8125rem;
    font-weight: 500;
    text-orientation: upright;
    writing-mode: vertical-lr;
}

.home-course .course-content .content {
    width: 100%;
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.home-course .block {
    max-width: 330px;
    width: 30%;
}

.home-course .course-content .content::after {
    content: '';
    pointer-events: none;
    display: block;
    max-width: 330px;
    width: 30%;
}

.home-course .block a {
    display: block;
    position: relative;
    width: 100%;
}

.home-course .block .img {
    width: 100%;
}

.home-course .block .img .ratio-box {
    padding: 120.121% 0 0 0;
    border-radius: 0 0 50px 0;
}

.home-course .block a:hover .hover-bg {
    display: flex;
}

.home-course .block a .hover-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(46, 67, 29, 0.81);
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5625rem;
    display: none;
}

.home-course .block h4 {
    color: #151515;
    text-align: center;
    font-weight: 500;
    margin-top: .3em;
}

.home-course .block.block2, .home-course .block.block5 {
    margin-top: 70px;
}

.home-course .block.block3, .home-course .block.block6 {
    margin-top: 140px;
}

/* process css */

.home-process {
    background: url('/assets/img/exam_process_background.jpg') center/cover no-repeat;
}

.home-process .content {
    width: 100%;
}

.home-process .tab-wrapper {
    max-width: 850px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10%;
}

.home-process .tab-wrapper .tab {
    width: 40%;
    height: 3vw;
    min-height: 50px;
    border-radius: 6.25rem;
    border: 3px solid var(--dark-green);
    color: var(--dark-green);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: transparent;
    transition: .3 ease-in-out;
}

.home-process .tab-wrapper .tab:hover {
    background: var(--dark-green);
    color: white;
}

.home-process .tab-wrapper .tab.active {
    background: var(--dark-green);
    color: white;
}

.home-process .tab-wrapper .tab.active::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid var(--dark-green);
}

.home-process .tab-wrapper .tab>* {
    font-weight: 700;
}

.home-process .page {
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.home-process .page.fade.active {
    display: flex;
}

.home-process .step {
    width: 30%;
    /* width: 25%; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 5%;
}

.home-process .step .arrow {
    background: url('/assets/icon/arrow_green.svg') center/contain no-repeat;
    width: 1rem;
    height: 1.5625rem;
    position: absolute;
    left: 98%;
    top: 50%;
    transform: translateY(-50%);
}

.home-process .step .top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
}

.home-process .step .block {
    width: 75%;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 0 25px #2e431d38;
}

.home-process .step .block:hover {
    background-color: var(--dark-green);
}

.home-process .step .block:hover img {
    filter: brightness(10);
}

.home-process .step .block:hover .block-text .num, .home-process .step .block:hover .block-text .title {
    color: white;
}

.home-process .step .block .block-text {
    /* width: 90%;
    height: 90%; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.home-process .step .block .block-text .num {
    font-size: 2.8125rem;
    margin-bottom: 5%;
    color: var(--dark-green);
}

.home-process .step .block .block-text .title {
    color: var(--dark-green);
    text-align: center;
    font-weight: 700;
}

.home-process .step.step7 .block .block-text .icon {
    width: 25%;
}

.home-process .step .block .block-text .icon {
    width: 35%;
    height: auto;
    margin-top: 5%;
}

.home-process .step .block .block-text .icon>img {
    width: 100%;
    height: auto;
    object-position: center;
    object-fit: contain;
}

.home-process .step .step-empty {
    width: 8%;
}

.home-process .step .step-line {
    width: 8%;
    height: .1875rem;
    background-color: var(--dark-green);
}

.home-process .step .bot {
    padding: 0 4%;
    max-width: 23.75rem;
}

.home-process .step .bot .step-text {
    text-align: center;
    color: var(--font);
    font-size: 1.125rem;
}

/* feature css */

.feature .block-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.feature .block {
    /* width: 25%; */
    width: 20%;
    padding: 1% 2%;
    margin-bottom: 5%;
}

.feature .block .ratio-box {
    padding: 131.6129% 0 0 0;
    box-shadow: 0 0 10px rgb(0 0 0 / 16%);
    border-radius: 20px;
    overflow: visible;
    background-color: white;
}

.feature .block .num {
    position: absolute;
    bottom: 100%;
    left: 10%;
    transform: translateY(50%);
    color: #2E431D;
    font-weight: 500;
    letter-spacing: .3125rem;
    font-size: 3.125rem;
}

.feature .block .block-text {
    width: 100%;
    height: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    padding: 5%;
}

.feature .block .block-text .icon-wrapper {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature .block .block-text .title {
    height: 40%;
    width: 100%;
    text-align: center;
}

.feature .block .block-text .title h5 {
    color: var(--font);
    /* font-size: 1.25rem; */
    font-size: 1.125rem;
}

.feature .block .block-text .icon {
    width: 40%;
    height: 40%;
}

.feature .block .block-text .icon>img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

/* home faq css */

.home-faq {
    background-color: var(--grey);
}

.home-faq .container {
    max-width: 1000px;
}

.home-faq .tab-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10%;
}

.home-faq .tab-wrapper .tab {
    width: 33.333%;
    height: 5vw;
    min-height: 70px;
    border-bottom: 1px solid #707070;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.home-faq .tab-wrapper .tab.active {
    border-bottom: 0;
    border-top: 1px solid #707070;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
}

.home-faq .tab-wrapper .tab h5 {
    color: var(--font);
    text-align: center;
}

.home-faq .page {
    width: 100%;
}

.faq-block-wrapper {
    width: 100%;
    display: block;
    position: relative;
}

.faq-block-wrapper .faq {
    width: 100%;
    box-shadow: 20px 9px 20px 0px rgb(0 0 0 / 7%);
    margin-bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.faq-block-wrapper .faq-block {
    width: 100%;
    display: block;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #507C39;
    padding: .2em .2em 0 .2em;
    cursor: pointer;
    z-index: 1;
}

.faq-block-wrapper .faq-block .faq-inner {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2em 2em 1em 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: none;
}

.faq-block-wrapper .faq-bot {
    width: 100%;
    height: 1em;
    background-color: #507C39;
    padding: 0 .2em .2em .2em;
    -webkit-clip-path: polygon(0% 0%, 102% 0%, 100% 100%, 2% 100%, 0% 15%);
    clip-path: polygon(0% 0%, 102% 0%, 100% 100%, 2% 100%, 0% 15%);
    margin-top: -1px;
}

.faq-bot .faq-bot-inner {
    -webkit-clip-path: polygon(0% 0%, 102% 0%, 100% 100%, 2% 100%, 0% 15%);
    clip-path: polygon(0% 0%, 102% 0%, 100% 100%, 2% 100%, 0% 0%);
    width: 100%;
    height: 100%;
    background-color: white;
    border: none;
}

.faq-block-wrapper .faq-block .faq-content {
    width: 80%;
}

.faq-block-wrapper .faq-block .faq-content .question {
    width: 100%;
    font-size: 1.25rem;
    color: var(--font);
    font-weight: 400;
}

.faq-block-wrapper .faq-block .faq-content .question::before {
    content: 'Q';
    position: absolute;
    top: 50%;
    right: 105%;
    font-size: 2.1875rem;
    color: #2E431D;
    transform: translateY(-50%);
    font-weight: 100;
}

.faq-block-wrapper.num-list {
    counter-reset: block;
}

.faq-block-wrapper.num-list .faq {
    counter-increment: block;
}

.faq-block-wrapper.num-list .faq-block .faq-content .question::before {
    content: counter(block);
}

.faq-block-wrapper .faq-block .faq-content .question::after {
    content: '\FF0B';
    position: absolute;
    top: 50%;
    left: 105%;
    font-size: 2.6875rem;
    font-weight: 500;
    color: #2E431D;
    transform: translateY(-50%) rotate(0);
    cursor: pointer;
    transition: transform .3s ease-in-out;
}

.faq-block-wrapper .faq-block .faq-content .answer {
    width: 100%;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: .3s ease-in-out;
    font-size: 1.25rem;
}

.faq-block-wrapper .faq-block .faq-content .answer>*, .faq-block-wrapper .faq-block .faq-content .answer>*>* {
    font-size: 1.25rem;
}

.faq-block-wrapper .faq-block.active .faq-content .answer {
    max-height: 2000px !important;
    margin-top: 2em !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.faq-block-wrapper .faq-block.active .faq-content .question::after {
    content: '\2212';
    transform: translateY(-50%) rotate(360deg);
}

/* address css */

.home-address h2.section-title {
    margin-bottom: 5%;
}

.home-address .address-content {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 5%;
}

.home-address .address-content .block {
    max-width: 1660px;
    width: 100%;
}

.home-address .address-content .ratio-box {
    padding: 24.9397% 0 0 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

.home-address .address-content .ratio-obj {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.home-address .address-content .map {
    width: 60%;
    height: 100%;
}

.home-address .address-content .list.desktop {
    display: block;
    position: relative;
    width: 40%;
    height: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    z-index: 1;
}

.home-address .address-content .list.desktop>li, .home-address .address-content .list.moblie .dropdown li {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
    padding: 5% 10%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    background-color: white;
    cursor: pointer;
}

.home-address .address-content .list.desktop>li h5 {
    color: var(--font);
}

.home-address .address-content .list.desktop>li small {
    color: var(--font);
    line-height: 1.5;
    font-weight: 400;
}

.home-address .address-content .list.desktop>li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 1px;
    background-color: #C9C9C9;
}

.home-address .address-content .list.desktop>li.active {
    width: 110%;
    background-color: #2E431D;
}

.home-address .address-content .list.desktop>li.active::after {
    display: none;
}

.home-address .address-content .list.desktop>li.active h5, .home-address .address-content .list.desktop>li.active small {
    color: white;
}

.home-address .address-content .list.desktop>li.active::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('/assets/icon/arrow.svg') center/contain no-repeat;
}

.home-address .address-content .list.moblie {
    width: 100%;
    height: auto;
    display: none;
}

.home-address .address-content .list.moblie .current-address {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
    padding: 5% 10%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    cursor: pointer;
    background-color: #2E431D;
    color: white;
}

.home-address .address-content .list.moblie .current-address::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) rotate(90deg);
    width: 10%;
    height: 20px;
    background: url('/assets/icon/arrow.svg') center/contain no-repeat;
}

.home-address .address-content .list.moblie .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    z-index: 1;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    /* padding: 5% 10%; */
    transition: max-height .3s ease-in-out;
}

.home-address .address-content .list.moblie.active .dropdown {
    max-height: 1000px !important;
}

.home-address .address-content .list.moblie .dropdown li:not(:last-of-type)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 1px;
    background-color: #C9C9C9;
}

.home-address .address-content .list.moblie .dropdown li:hover {
    background-color: rgb(221, 235, 213);
}

.home-address .address-content .list.moblie .dropdown li.active {
    display: none;
}

/* process page */

.process .tab-wrapper,
.block-timetable .tab-wrapper {
    width: 100%;
    border-bottom: 1px solid #CECECE;
    padding-top: 3%;
}

.process .tab-wrapper .tab-container,
.block-timetable .tab-wrapper .tab-container {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.process .tab-wrapper .tab-container>div,
.block-timetable .tab-wrapper .tab-container>div {
    width: 33.333%;
    font-size: 1.125rem;
    color: #8B8B8B;
    padding-bottom: 3%;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.process .tab-wrapper .tab-container>div.active, .process .tab-wrapper .tab-container>div.hover,
.block-timetable .tab-wrapper .tab-container>div.active, .block-timetable .tab-wrapper .tab-container>div.hover {
    color: #000000;
    font-weight: 400;
}

.process .tab-wrapper .tab-container>div.active::after, .process .tab-wrapper .tab-container>div:hover::after,
.block-timetable .tab-wrapper .tab-container>div.active::after, .block-timetable .tab-wrapper .tab-container>div:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-color: #507C39;
    z-index: 1;
}

.process .block-route .card-page {
    padding: 5%;
}

.process .block-exam .card-page,
.block-timetable .card-page {
    padding: 5% 0;
}

.process .block-route .ratio-box {
    padding: 144% 0 0 0;
}

.process .block-route .ratio-obj>* {
    object-fit: contain;
}

/* course css */

.course .course-tab-wrapper {
    width: 100%;
    border-bottom: 1px solid #E8E8E8;
    background-color: #F8F8F8;
    z-index: 99;
    padding-top: 3%;
    display: block;
}

.course .course-tab-wrapper .container {
    overflow-x: auto;
    display: flex;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.course .course-tab-wrapper .container a {
    width: 20%;
    cursor: pointer;
    padding: 0 1% 1%;
    display: block;
    position: relative;
    height: auto;
}

.course .course-tab-wrapper .container>a:not(:last-of-type)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 80%;
    width: 1px;
    background-color: #E8E8E8;
}

.course .course-tab-wrapper .container>a p {
    display: block;
    font-size: 1rem;
    color: #8B8B8B;
    text-align: center;
    /* white-space: nowrap; */
}

.course .course-tab-wrapper .container>a:hover p, .course .course-tab-wrapper .container>a.active p {
    color: #000000;
    font-weight: 400;
}

.course .course-tab-wrapper .container>a:hover::before, .course .course-tab-wrapper .container>a.active::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #507C39;
    transform: translateX(-50%);
}

.course .apply-btn {
    width: 100%;
    max-width: 367px;
    height: 3.125rem;
    border-radius: .625rem;
    padding: 1%;
    background-color: #2E431D;
    font-size: 1rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-top: 3%;
    transition: .3s ease-in-out;
}

.course .apply-btn.moblie {
    display: none;
}

.course .apply-btn:hover {
    background-color: var(--light-green);
}

.course .block-location a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.125rem;
}

.course .block-location .address-info {
    margin-bottom: 3%;
}

.course .block-location .address-des {
    padding-left: 20px;
}

.course .block-location .address {
    width: 80%;
    max-width: 370px;
}

.course .block-location .route {
    width: 80%;
}

.course .go-icon {
    margin-left: 1em;
    background: url('/assets/icon/location_navigation.svg') center/contain no-repeat;
    height: 30px;
    width: 30px;
}

.course .list-route>li {
    position: relative;
    list-style: none;
    display: flex;
    align-items: flex-start;
    margin: .8em 0;
}

.course .list-route>li>p {
    white-space: nowrap;
}

.course .list-route>li>div {
    flex: 1;
}

.course .list-route .map-container {
    width: 100%;
    padding: 55% 0 0 0;
    position: relative;
    overflow: hidden;
    margin: 1em 0;
    border: 1px solid #CCCCCC;
}

.course .list-route .map-container>div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* Course (3-points) css */
.timetable-wrapper {
    width: 100%;
    overflow: auto;
}

.timetable-wrapper .table {
    width: 100%;
    min-width: 300px;
}

.timetable-wrapper table th, .timetable-wrapper table td {
    padding: 1em;
    width: 50%;
    text-align: left;
    white-space: nowrap;
}

.timetable-wrapper table th {
    font-weight: 900;
    font-size: 1.125rem;
}

.timetable-wrapper table td {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
}

.timetable-wrapper thead {
    border: 1px solid #CCCCCC;
    background-color: #E6EBE3;
}

.timetable-wrapper tbody tr {
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.timetable-wrapper .no-record-block {
    width: 100%;
    min-width: unset;
    background-color: white;
    border: 1px solid #CCCCCC;
    display: none;
    justify-content: center;
    align-items: center;
    color: #2B2B2B;
    font-size: 1rem;
    padding: 1em;
    font-weight: 400;
    text-align: center;
}

.timetable-wrapper .no-record-block.show {
    display: flex;
}

.table-loader {
    display: none;
    width: 100%;
    height: 80px;
    background-color: white;
    border: 1px solid #CCCCCC;
    position: relative;
}

.table-loader.show {
    display: block;
}

.table-loader::before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    background: url('/assets/img/loading.svg') center/contain no-repeat;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.timetable-container.hide {
    display: none;
}

.block-timetable .paginate-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5em;
}

.block-timetable .paginate-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .5em;
}

.block-timetable .paginate-wrapper .btn-page {
    width: 2.5vw;
    height: 2.5vw;
    min-width: 50px;
    min-height: 50px;
    border-radius: 10px;
    background-color: #E8E8E8;
    border: none;
    cursor: pointer;
    position: relative;
    transition: bacground-color .3s ease-in-out;
}

.block-timetable .paginate-wrapper .btn-page:hover {
    background-color: #E6EBE3;
}

.block-timetable .paginate-wrapper .btn-page::after {
    content: '';
    width: 100%;
    height: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('/assets/icon/icon_arrow_page.svg') center/ contain no-repeat;
}

.block-timetable .paginate-wrapper .btn-page.btn-page-next::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.block-timetable .paginate-wrapper .selector {
    width: 2.5vw;
    height: 2.5vw;
    min-width: 50px;
    min-height: 50px;
    margin: 0 0.5em;
}

.block-timetable .paginate-wrapper .selector .selector-input {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #E8E8E8;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
}

.block-timetable .paginate-container.error .selector-input {
    border: 2px solid #000;
    animation-name: error-effect;
    animation-duration: .5s;
}

@keyframes error-effect {
    0% {
        transform: translateX(-.5px);
    }

    25% {
        transform: translateX(.5px);
    }

    50% {
        transform: translateX(-.5px);
    }

    75% {
        transform: translateX(.5px);
    }

    100% {
        transform: translateX(-.5px);
    }
}


.block-timetable .paginate-wrapper .selector select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
}

.block-timetable .select-container {
    width: 100%;
    z-index: 1;
    max-width: 300px;
}

.block-timetable .select-container select {
    background: transparent;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/assets/icon/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: 95% center;
    cursor: pointer;
    width: 100%;
    font-size: 1.125rem;
    padding: .8rem 2.5rem .8rem .8rem;
    border: 1px solid #CCCCCC;
}

.block-timetable .select-box {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #CCCCCC;
    background-color: white;
    top: 0;
    left: 0;
    z-index: -1;
}

.block-timetable .select-box.disabled {
    background-color: #F8F8F8;
}


/* about us css */

.about .intro {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: justify;
    margin-bottom: 10%;
}

.about .intro p {
    color: #101010;
}

.about .section-title {
    margin-bottom: 5%;
}

/* account css */

.block-record.page-block {
    padding: 0;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.table-wrapper table {
    min-width: 800px;
    width: 100%;
}

table {
    border-collapse: collapse;
}

.table-wrapper table th, .table-wrapper table td {
    padding: 3%;
    width: 15%;
    text-align: left;
    white-space: nowrap;
}

table th.record-name, table td.record-name {
    width: 40%;
}

table th.record-amount, table td.record-amount {
    min-width: 200px;
}

table td.record-payment {
    white-space: unset;
    text-align: center;
}

.table-wrapper table thead th, .table-wrapper table tbody td {
    color: #2B2B2B;
    font-size: 1.125rem;
    letter-spacing: .125rem;
}

.table-wrapper table thead th {
    font-weight: 500;
    border-bottom: 2px solid #2E431D;
}

table tbody td {
    font-weight: 300;
}

.table-wrapper table tbody tr:not(:last-of-type) td {
    border-bottom: 1px solid #CCCCCC;
}

.block-record table tbody tr {
    cursor: pointer;
}

.block-record table tbody tr:hover {
    background-color: rgb(240, 240, 240);
}

table tbody .record-payment,
.details-payment {
    text-transform: uppercase;
}

.table-wrapper .no-record-block {
    width: 100%;
    min-width: 800px;
    background-color: white;
    display: none;
    justify-content: center;
    align-items: center;
    color: var(--dark-green);
    font-size: 1.125rem;
    padding: 3%;
    border-radius: 0 0 1.25rem 1.25rem;
    font-weight: 500;
}


.block-record-details .details-time>*,
.block-record-details .details-courseCode>* {
    display: block;
}

/* contact us css */

.contact-info {
    margin-bottom: 10%;
}

.contact-info>* {
    display: flex;
}

.contact-info>*>div {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.contact-info>*>span {
    width: 200px;
    text-align: left;
}

.contact-title {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--dark-green);
}

.faq-page .button-wrapper {
    width: 100%;
    margin-bottom: 3%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.faq-page .button-wrapper>a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 197px;
    height: 54px;
    background-color: #2E431D;
    color: white;
    border-radius: .625rem;
    font-size: 1rem;
    padding: 1% 1% 1% 3rem;
    cursor: pointer;
    transition: .3s ease-in-out;
    position: relative;
}

.faq-page .button-wrapper>a::after {
    content: '';
    height: 1.5rem;
    width: 1.5rem;
    background: url('/assets/icon/pdf_file.svg') center/contain no-repeat;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
}

.faq-page .button-wrapper>a:hover {
    background-color: #507C39;
}

.page-payment .page-content .left {
    width: 65%;
    margin-right: 1.5em;
}

.page-payment .page-content .right {
    width: 35%;
}

.page-payment .payment-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.page-payment .payment-container>div {
    display: none;
    width: 30%;
    border: 1px solid #D0D0D0;
    margin-bottom: 3%;
    cursor: pointer;
}

.page-payment .payment-container>div:not(:nth-of-type(3n)) {
    margin-right: 1.5em;
}

.page-payment .payment-container>div.active {
    display: block;
}

.page-payment .payment-container>div.selected {
    border: 2px solid #2E431D;
}

.page-payment .payment-container .ratio-box {
    padding: 61.739% 0 0 0;
}

.page-payment .payment-container .ratio-obj {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-payment .payment-container .ratio-obj>* {
    width: 80%;
    object-fit: contain;
}

.page-payment .coupon-des>*,
.page-payment .coupon-des {
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: .02rem;
    color: #2B2B2B;
    line-height: 2;
}

.payment-method-container, .payment-details {
    width: 100%;
    overflow: hidden;
}

.payment-method-container {
    margin-bottom: 3%;
}

.payment-title {
    color: #2E431D;
    margin-bottom: 1em;
    font-weight: 400;
}

.payment-details {
    display: none;
}

.payment-details.active {
    display: block;
}

.payment-upload-container .upload-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.payment-upload-container .upload-info .qr-code {
    width: 0;
}

.payment-upload-container .upload-info .qr-code.show {
    width: 25%;
    margin-right: 1.5em;
}

.payment-upload-container .upload-info .qr-code.show img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.payment-upload-container .upload-info .info {
    width: 100%;
    /* max-width: 337px; */
}

.payment-upload-container .upload-info .info .info-text>* {
    font-size: 1rem;
}

.payment-upload-container .upload-info .info .info-text {
    margin-bottom: 3%;
}

.payment-upload-container .upload-info .info .info-text p {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.payment-upload-container .upload-info .info .info-text .title {
    width: 15%;
    margin-right: 1em;
}

.payment-upload-container .upload-info .info .info-text .content {
    width: 75%;
}

.payment-upload-container .upload-info .info .input-col {
    width: 100%;
    max-width: 337px;
}

.payment-upload-container .upload-info .info .form-btn {
    border-radius: 10px;
}

.page-payment .amount-details>p,
.page-payment .amount-details .extra-item-list>p {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-payment .amount-details .content.total>* {
    font-size: 1.5625rem;
    font-weight: 500;
}

.page-payment .amount-details>p#payment-cc-charge-container {
    display: none !important;
}

.page-payment .amount-details>p#payment-cc-charge-container.show {
    display: flex !important;
}

.page-success .success-row {
    width: 100%;
    margin-bottom: 1.5em;
}

.page-success .success-row:not(:last-of-type) {
    border-bottom: 1px solid #2E431D;
}

.page-success .success-row p {
    margin-bottom: .5em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.page-success .success-row p>* {
    font-weight: 400;
}

.page-success .success-row .title {
    margin-right: 1.5em;
    white-space: nowrap;
}

.apply-consent {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 3%;
}

.apply-consent.show {
    display: flex;
}

.apply-consent .consent-container {
    max-height: 900px;
    max-width: 700px;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 5%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.apply-consent .consent-container>* {
    line-height: 2;
}

.apply-consent .consent-container h4 {
    font-weight: 500;
    text-decoration: underline;
}

.apply-consent .consent-container .content-wrapper {
    margin: 1.5em 0;
    width: 100%;
    height: 100%;
    max-height: 450px;
    overflow: auto;
    padding: .5em;
    text-align: left;
}

.apply-consent .consent-container .content-wrapper .content>*, .apply-consent .consent-container .content-wrapper .content p {
    font-size: 1rem;
}

.apply-consent .consent-container .content-wrapper .list-item {
    margin: .5em 0;
}

.apply-consent .consent-container .content-wrapper * {
    font-weight: 400;
}

.apply-consent .consent-container .content-wrapper .list-item>span,
.apply-consent .consent-container .content-wrapper strong {
    font-weight: 700;
}

.apply-consent .input-col {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

.apply-consent .input-col input[type="checkbox"] {
    margin-right: .5em;
}

.apply-consent button {
    margin-top: 1.5em;
    height: 2.75rem;
}

.apply-consent .consent-container .btn-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
}

.apply-consent .consent-container .btn-close::after {
    content: '\2716';
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2rem;
    color: #BCBCBC;
    cursor: pointer;
}

.apply-consent .consent-container .btn-close:hover::after {
    color: #2E431D;
}

.apply-consent input[type="checkbox"] {
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
    position: relative;
}

.apply-consent input[type="checkbox"]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 1px solid #BCBCBC;
    top: 0;
    left: 0;
    z-index: 1;
}

.apply-consent input[type="checkbox"].error::after {
    border: 1px solid red;
}

.course-date-container {
    width: 100%;
}

.or-text {
    margin: 3% 0;
}

.btn-text {
    display: block;
}

.btn-text.hide {
    display: none;
}

.cert-remind {
    width: 100%;
    margin-bottom: 1.5em;
    font-weight: 400;
    color: var(--dark-green);
}

.page-error .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.page-error .main-content {
    padding-top: 15%;
    padding-bottom: 5%;
}

.page-error .container img {
    width: 70%;
}


@media(max-width:1400px) {
    footer .top {
        padding: 5% 3% 5% 3%;
    }

    footer .middle {
        padding: 0 3% 3% 3%;
    }

    footer .bot {
        padding: 1% 3% 1% 3%;
    }

    .exam-wrapper .exam-block .info {
        font-size: .875rem;
    }

    .page-head .page-wrapper {
        padding-left: 3%;
    }

    .exam-wrapper .exam-block {
        transform: translateX(-80%);
        transition: .3s ease-in-out;
    }

    .exam-wrapper .exam-block .exam-content {
        flex-direction: row-reverse;
    }

    .exam-wrapper .exam-block.active {
        transform: translateX(0);
    }

    .exam-wrapper .exam-block.active .exam-content {
        flex-direction: row;
    }
}

@media(max-width:1300px) {
    header {
        top: 0;
        left: 0;
        transform: none;
        padding: 0;
    }

    header .main {
        width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 0 5%;
    }

    header .main .head-logo {
        width: 80%;
        height: 50%;
    }

    header .main .head-link {
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        height: calc(100vh - 70px);
        /* background-color: var(--light-green); */
        max-height: 0;
        overflow: hidden;
        transition: .3s ease-in-out;
    }

    header .main .head-link.active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: calc(var(--vh, 1vh) * 100);
        width: 100%;
        background-color: var(--light-green);
        z-index: 1;
    }

    header .main .head-link.active {
        max-height: 1000px !important;
    }

    header .main .head-link .link {
        margin-bottom: 5%;
    }

    header .dropdown {
        position: relative;
        z-index: 1;
        opacity: 1;
        top: 0;
        left: 0;
        transform: none;
        border: noe;
        border: none;
        padding: 0;
        background-color: var(--light-green);
    }

    header .dropdown.active, header .main .head-link .link:hover .dropdown {
        max-height: 1000px !important;
        opacity: 1;
        padding-top: 2%;
        transform: none;
    }

    header .main .head-link .link .dropdown li a, header .main .head-link .link a, header .lang-link span {
        color: white;
    }

    header .main .head-link .link.dropdown-link {
        flex-direction: column;
        align-items: flex-start;
    }

    header .main .head-link>ul {
        flex-direction: column;
        justify-content: flex-start;
        padding: 5%;
        overflow: auto;
        z-index: 3;
    }

    header .main .head-link .link.lang-link {
        display: none;
    }

    header .moblie.lang-link {
        display: block;
        /* width: 100%;
        position: absolute;
        bottom: 0;
        background-color: var(--light-green);
        z-index: 3;
        padding: 5%;
        margin-bottom: 0; */
    }

    /* header .moblie.lang-link a {
        color: white;
    } */
    header .nav-left {
        display: none;
    }

    header .menu-btn, header .main .head-link .link.moblie, header .moblie {
        display: block;
    }

    header .main .head-link .link:hover>a::after, header .lang-link>div a:hover::after, header .main .head-link .link .dropdown li a:hover::after {
        display: none;
    }

    .home-banner {
        margin-top: 70px;
    }

    /* .home-banner .banner-des .slogan {
        font-size: 2.1875rem;
    } */

    .home-banner .coupon-des {
        transform: translateY(0);
    }

    .home-banner .banner-des .scroll .text {
        font-size: .875rem;
    }

    .home-address .address-content .list>li h5 {
        font-size: 1rem;
    }

    .home-address .address-content .list>li.active::before {
        width: 15px;
        height: 15px;
    }

    .page-head .desktop {
        display: none;
    }

    .main-content .page-title.moblie, .tab.moblie {
        display: block;
    }

    .tab.moblie.scroll .block-list {
        position: fixed;
        top: 70px;
        left: 0;
    }

    .page-content .tab {
        display: none;
    }

    .page-head-container .page-head-bg {
        width: 100%;
        border-radius: 0;
    }

    .page-head .page-wrapper {
        padding-left: 0;
        padding-top: 0;
    }

    .bg-wrapper {
        padding-top: 70px;
    }

    .page-content .main {
        width: 100%;
    }

    .course .apply-btn.moblie {
        display: flex;
    }

    .page-payment .page-content {
        flex-direction: column;
    }

    .page-payment .page-content .left, .page-payment .page-content .right {
        width: 100%;
        margin: 0;
    }

    .feature .block .block-text .title h5 {
        font-size: 1rem;
    }
}

@media(max-width:1040px) {
    footer .top {
        flex-direction: column;
    }

    footer .top .footer-contact {
        width: 100%;
        margin-top: 3%;
    }

    footer .middle>ul, footer .bot, footer .bot .left {
        flex-direction: column;
    }

    footer .middle>ul .link {
        margin-bottom: 3%;
    }

    footer .bot .left, footer .bot .left span {
        margin-bottom: 10px;
    }

    .faq-block-wrapper .faq-block .faq-content .question::before, .faq-block-wrapper .faq-block .faq-content .question::after, h2, .home-process .step .block .block-text .num, .home-course .course-content .verticle-title {
        font-size: 1.875rem;
    }

    h4, .home-course .block a .hover-bg {
        font-size: 1.25rem;
    }

    h5, .faq-block-wrapper .faq-block .faq-content .question {
        font-size: 1.125rem;
    }

    .page-success .success-row p>* {
        font-size: 1rem;
    }

    .faq-block-wrapper .faq-block .faq-content .answer, .faq-block-wrapper .faq-block .faq-content .answer>*, .faq-block-wrapper .faq-block .faq-content .answer>*>* {
        font-size: 1rem;
    }

    .home-process .step .bot .step-text {
        font-size: 1.125rem;
    }

    .home-process .step .arrow {
        width: 0.875rem;
        height: 1.3rem;
    }

    .feature .block {
        width: 33.333%;
    }

    .home-address .address-content .ratio-obj {
        flex-direction: column;
    }

    .home-address .address-content .ratio-box {
        padding: 66.89855% 0 0 0;
    }

    .home-address .address-content .list.desktop {
        display: none;
    }

    .home-address .address-content .map {
        width: 100%;
    }

    .home-address .address-content .list.moblie {
        display: block;
    }

    /* .page-content .step-des p {
        font-size: 1rem;
    } */
    .page-content .block-list>li.step .num {
        font-size: 2.5rem;
    }

    .page-content .block-list>li.step .content .step-title .icon {
        width: 8%;
    }

    table thead th, table tbody td, table .no-record-block {
        font-size: 1rem;
    }

    .home-banner .banner-des .slogan {
        font-size: 4vw;
    }

    .home-banner .coupon-des p {
        font-size: 2vw;
    }

    .home-banner .coupon-des h2 {
        font-size: 2.2vw;
    }
}

@media(max-width: 850px) {
    .home-process .step .block .block-text .num {
        font-size: 1.375rem;
    }

    .home-process .step .block .block-text .title, .home-process .step .bot .step-text {
        font-size: 1rem;
    }

    .home-process .step .step-line, .home-process .step .step-empty, .home-process .step .arrow {
        display: none;
    }
}

@media(max-width: 700px) {
    .home-banner .banner-des .slogan {
        justify-content: center;
    }

    .home-course .block,
    .home-course .course-content .content::after {
        width: 45%;
        margin-bottom: 10%;
    }

    .home-course .block.block2, .home-course .block.block5, .home-course .block.block3, .home-course .block.block6 {
        margin-top: 0;
    }

    .home-course .course-content .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .home-course .course-content .verticle-title {
        margin-bottom: 10%;
        writing-mode: horizontal-tb;
    }

    .home-process .step {
        width: 100%;
    }

    .home-process .step .block {
        width: 40%;
    }

    .feature .block {
        width: 50%;
    }

    .faq-block-wrapper .faq-block .faq-content .question::before {
        display: none;
    }

    .faq-block-wrapper .faq-block .faq-content {
        width: 90%;
    }

    h5, .faq-block-wrapper .faq-block .faq-content .question,
    .page-content .block-list>li.step .content .step-title h5 {
        font-size: 1rem;
    }

    .faq-block-wrapper .faq-block .faq-content .answer, .faq-block-wrapper .faq-block .faq-content .answer>*, .faq-block-wrapper .faq-block .faq-content .answer>*>* {
        font-size: .875rem;
    }

    .feature .block .num {
        font-size: 1.5625rem;
    }

    .faq-block-wrapper .faq-block .faq-inner {
        justify-content: flex-start;
        padding: 1em;
    }

    .faq-block-wrapper .faq-block {
        padding: .2em;
    }

    .faq-block-wrapper .faq-bot {
        display: none;
    }

    .page-content .block-list>li.step .num {
        font-size: 2.1875rem;
    }

    .main-content .page-title.moblie {
        font-size: 1.5625rem;
    }

    .course .course-tab-wrapper {
        display: none;
    }

    .course .go-icon {
        height: 25px;
        width: 25px;
    }

    .about .intro p, .page-content .step-des>*, .course p, .list-num>li, .about .intro p,
    .fee-table * {
        font-size: 1rem;
    }

    .page-content p,
    .page-content li,
    .contact-info * {
        font-size: 1rem !important;
    }

    .fee-table__title,
    .fee-table__data,
    .fee-table__data.split>div {
        padding: 1em 1.5em;
    }

    .faq-page .button-wrapper>a {
        width: 150px;
        height: 40px;
        padding: 1% 1% 1% 1.5rem;
        font-size: .825rem;
    }

    .faq-page .button-wrapper>a::after {
        height: 1rem;
        width: 1rem;
        left: 1rem;
    }

    .payment-details .input-col-container.center {
        align-items: flex-start;
    }

    .page-payment .payment-container>div {
        width: 48%;
    }

    .page-payment .payment-container>div:not(:nth-of-type(3n)) {
        margin-right: unset;
    }

    .page-payment .payment-container>div:nth-of-type(2n) {
        margin-right: .5em;
    }

    .payment-upload-container .upload-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .payment-upload-container .upload-info .qr-code.show {
        width: 50%;
    }

    .payment-upload-container .upload-info .info .info-text .title {
        width: 30%;
    }

    .payment-upload-container .upload-info .info .info-text .content {
        width: 65%;
    }

    .home-banner .banner-des .slogan {
        font-size: 4.5vw;
        transform: translateY(0);
    }

    .home-banner .coupon-des p {
        font-size: 2.5vw;
    }

    .home-banner .coupon-des h2 {
        font-size: 2.8vw;
    }

    .home-banner .coupon-des {
        position: relative;
        transform: unset;
        bottom: unset;
        background-color: #507C39;
    }

    .text-content * {
        font-size: 1rem;
    }
}

@media(max-width:500px) {
    footer .top .footer-contact .icon {
        width: 10%;
    }

    footer .top .footer-contact .text {
        width: 90%;
    }

    footer .middle>ul .link>a {
        font-size: 1rem;
    }

    footer .middle>ul .link>ul>li>a {
        font-size: .875rem;
    }

    .home-course .course-content .verticle-title {
        margin-bottom: 10%;
        writing-mode: horizontal-tb;
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .faq-block-wrapper .faq-block .faq-content .question::after, .home-course .block a .hover-bg, h4 {
        font-size: 1rem;
    }

    .home-faq .tab-wrapper .tab {
        width: fit-content;
        width: -moz-fit-content;
        height: fit-content;
        height: -moz-fit-content;
        border: none;
    }

    .home-faq .tab-wrapper .tab.active {
        border: none;
    }

    .home-faq .tab-wrapper .tab.active h5 {
        color: #507C39;
        font-weight: 500;
    }

    .home-faq .tab-wrapper .tab.active::after {
        content: '';
        width: 100%;
        height: .1875rem;
        background-color: #507C39;
        position: absolute;
        top: 100%;
        left: 0;
    }

    .home-address .address-content .list.moblie h5, .feature .block .block-text .title h5, .home-process .step .bot .step-text {
        font-size: .875rem;
    }

    .home-address .address-content .list.moblie .current-address::after {
        width: 2%;
    }

    .page-content .block-list>li.step .num, .main-content .page-title.moblie {
        font-size: 1.25rem;
    }

    .process .tab-wrapper .tab-container>div {
        font-size: 1rem;
    }

    .tab.moblie .block-list li p, .course p, .course .block-location a {
        font-size: 1rem;
    }

    .page-content p,
    .page-content li,
    .contact-info * {
        font-size: 1rem !important;
    }


    .tab.moblie .block-list::-webkit-scrollbar-thumb {
        background-color: var(--dark-green);
    }

    .course .go-icon {
        height: 20px;
        width: 20px;
    }

    .page-content .step-des>*, table thead th, table tbody td, table .no-record-block, .fee-table * {
        font-size: .9375rem;
    }

    .contact-title, .contact-info>* {
        font-size: 1rem;
    }

    .page-content small {
        font-size: .875rem;
    }
}

@media(max-width:440px) {
    .page-content .block-list>li.step .content .step-title {
        align-items: flex-start;
    }

    .home-banner .banner-des .slogan {
        font-size: 5vw;
    }
}

@media(max-width:380px) {
    .home-course .block a .hover-bg, h4 {
        font-size: .825rem;
    }

    .home-process .step .block {
        width: 50%;
    }

    .course p, .list-num>li, .about .intro p {
        font-size: .9375rem;
    }

    .page-content p,
    .page-content li,
    .contact-info * {
        font-size: .9375rem !important;
    }


    .course .block-location .address {
        width: 90%;
    }
}