@font-face {
    font-family: 'Thongterm-Bold';
    src: url('/Content/Fonts/thongterm_bold-webfont.eot');
    src: url('/Content/Fonts/thongterm_bold-webfont.eot?') format('embedded-opentype'),url('/Content/Fonts/thongterm_bold-webfont.woff2') format('woff2'),url('/Content/Fonts/thongterm_bold-webfont.woff') format('woff'),url('/Content/Fonts/thongterm_bold-webfont.ttf') format('truetype'),url('/Content/Fonts/thongterm_bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-family: 'Thongterm-Roman';
    src: url('/Content/Fonts/thongterm_roman-webfont.eot');
    src: url('/Content/Fonts/thongterm_roman-webfont.eot?') format('embedded-opentype'),url('/Content/Fonts/thongterm_roman-webfont.woff2') format('woff2'),url('/Content/Fonts/thongterm_roman-webfont.woff') format('woff'),url('/Content/Fonts/thongterm_roman-webfont.ttf') format('truetype'),url('/Content/Fonts/thongterm_roman-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-family: 'Thongterm';
    src: url('/Content/Fonts/thongterm_light-webfont.eot');
    src: url('/Content/Fonts/thongterm_light-webfont.eot?') format('embedded-opentype'),url('/Content/Fonts/thongterm_light-webfont.woff2') format('woff2'),url('/Content/Fonts/thongterm_light-webfont.woff') format('woff'),url('/Content/Fonts/thongterm_light-webfont.ttf') format('truetype'),url('/Content/Fonts/thongterm_light-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-family: 'Krungsri-Condensed';
    src: url('/Content/Fonts/Krungsri%20Con.eot');
    src: url('/Content/Fonts/Krungsri%20Con.eot?') format('embedded-opentype'),url('/Content/Fonts/Krungsri%20Con.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-family: 'Krungsri-Condensed-Medium';
    src: url('/Content/Fonts/Krungsri%20Con%20Med.ttf');
    src: url('/Content/Fonts/Krungsri%20Con%20Med.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-family: 'Krungsri-Condensed-Bold';
    src: url('/Content/Fonts/Krungsri%20Con%20Bol.ttf');
    src: url('/Content/Fonts/Krungsri%20Con%20Bol.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: swap
}

a {
    color: #222
}

    a:hover, a:active {
        color: #222;
        text-decoration: none !important
    }

    a:focus {
        outline: none !important;
        box-shadow: none;
        text-decoration: none !important;
        color: #222
    }

ul {
    padding-inline-start: 20px;
    margin-bottom: 0
}

hr.yellow {
    border: 3px solid #ffc800
}

input.btn, button.btn {
    width: auto;
    min-width: 150px;
    height: 44px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #e8e8e8;
    font-family: 'Krungsri-Condensed-Bold';
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.14;
    letter-spacing: normal;
    text-align: center;
    color: #554242;
    outline: none !important;
    padding-left: 16px;
    padding-right: 16px
}

    input.btn:hover, button.btn:hover {
        border: solid 1px #c7c7c7 !important;
        color: #554242
    }

    input.btn:active, button.btn:active {
        box-shadow: inset 1px 2px 1px 0 rgba(0,0,0,.1) !important
    }

    input.btn:focus, button.btn:focus {
        outline: none !important;
        box-shadow: none
    }

    input.btn:disabled, button.btn:disabled {
        background-color: #f0efee;
        color: #bbb;
        border: 0;
        border: solid 0 #e8e8e8 !important
    }

        input.btn:disabled:hover, button.btn:disabled:hover {
            border: solid 0 #e8e8e8 !important
        }

    input.btn.btn-sm, button.btn.btn-sm {
        height: 38px
    }

    input.btn.btn-xs, button.btn.btn-xs {
        height: 30px
    }

    input.btn.--width-default, button.btn.--width-default {
        width: 170px;
    }

    input.btn.btn-primary, button.btn.btn-primary {
        color: #554242;
        background-color: #ffd400 !important;
        border: solid 0 #e8e8e8 !important
    }

        input.btn.btn-primary:hover, button.btn.btn-primary:hover {
            background-color: #ffc800 !important
        }

        input.btn.btn-primary:active, button.btn.btn-primary:active {
            background-color: #ffd400 !important;
            color: #554242 !important;
            box-shadow: inset 1px 2px 1px 0 rgba(0,0,0,.1) !important
        }

        input.btn.btn-primary:disabled, button.btn.btn-primary:disabled {
            background-color: #f0efee !important;
            color: #949494;
            border: 0
        }

        input.btn.btn-primary.btn-sm, button.btn.btn-primary.btn-sm {
            height: 38px
        }

            input.btn.btn-primary.btn-sm:disabled, button.btn.btn-primary.btn-sm:disabled {
                background-color: #f0efee !important;
                color: #bbb !important;
                border: 0
            }

        input.btn.btn-primary.btn-xs, button.btn.btn-primary.btn-xs {
            height: 30px
        }

            input.btn.btn-primary.btn-xs:disabled, button.btn.btn-primary.btn-xs:disabled {
                background-color: #f0efee !important;
                color: #bbb !important;
                border: 0
            }

    input.btn.btn-orange, button.btn.btn-orange {
        background-color: #ff6700 !important;
        color: white !important
    }

        input.btn.btn-orange:hover, button.btn.btn-orange:hover {
            background-color: #fc7e41 !important
        }

    input.btn.btn-browse, button.btn.btn-browse {
        background-color: #b7aeaf !important;
        color: white !important
    }

        input.btn.btn-browse:hover, button.btn.btn-browse:hover {
            background-color: #c8c3c3 !important
        }

    input.btn.btn-link, button.btn.btn-link {
        border: 0 !important;
        background-color: transparent;
        color: #6f5f5e;
        text-decoration: none !important
    }

        input.btn.btn-link:focus, button.btn.btn-link:focus {
            outline: none !important;
            box-shadow: none !important
        }

        input.btn.btn-link:hover, button.btn.btn-link:hover, input.btn.btn-link:active, button.btn.btn-link:active {
            text-decoration: underline !important
        }

        input.btn.btn-link:disabled, button.btn.btn-link:disabled {
            color: #bbb !important;
            text-decoration: none !important
        }

    input.btn.btn-reset, button.btn.btn-reset {
        background-color: #6f5f5e !important;
        color: white !important
    }

        input.btn.btn-reset:hover, button.btn.btn-reset:hover {
            background-color: #857777 !important
        }

    input.btn.btn-add, button.btn.btn-add {
        background-color: #ffd400;
        color: #6f5f5e !important;
        min-width: 40px;
        height: 40px;
        width: 40px;
        border-radius: 50%
    }

a.btn, div.btn {
    width: auto;
    height: 44px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #e8e8e8;
    font-family: Krungsri-Condensed-Bold;
    font-size: 16px;
    font-style: normal;
    font-stretch: normal;
    line-height: 27px;
    letter-spacing: normal;
    text-align: center;
    color: #554242;
    outline: none !important;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 10px;
    padding-bottom: 4px
}

    a.btn:hover, div.btn:hover {
        border: solid 1px #c7c7c7 !important;
        text-decoration: none !important
    }

    a.btn:active, div.btn:active {
        box-shadow: inset 1px 2px 1px 0 rgba(0,0,0,.1) !important;
        text-decoration: none !important
    }

    a.btn:focus, div.btn:focus {
        outline: none !important;
        box-shadow: none;
        text-decoration: none !important
    }

    a.btn:disabled, div.btn:disabled, a.btn.disabled, div.btn.disabled {
        background-color: #f0efee;
        color: #bbb;
        border: 0;
        border: solid 0 #e8e8e8 !important
    }

        a.btn:disabled:hover, div.btn:disabled:hover, a.btn.disabled:hover, div.btn.disabled:hover {
            border: solid 0 #e8e8e8 !important
        }

    a.btn.btn-primary, div.btn.btn-primary {
        color: #554242 !important;
        background-color: #ffd400 !important;
        border: solid 0 #e8e8e8 !important;
        height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 44px
    }

        a.btn.btn-primary:hover, div.btn.btn-primary:hover {
            background-color: #ffc800 !important;
            text-decoration: none !important
        }

        a.btn.btn-primary:active, div.btn.btn-primary:active {
            background-color: #ffd400 !important;
            box-shadow: inset 1px 2px 1px 0 rgba(0,0,0,.1) !important;
            text-decoration: none !important
        }

        a.btn.btn-primary:disabled, div.btn.btn-primary:disabled, a.btn.btn-primary.disabled, div.btn.btn-primary.disabled {
            background-color: #f0efee !important;
            color: #554242;
            border: 0
        }

            a.btn.btn-primary:disabled i, div.btn.btn-primary:disabled i, a.btn.btn-primary.disabled i, div.btn.btn-primary.disabled i, a.btn.btn-primary:disabled img.icon, div.btn.btn-primary:disabled img.icon, a.btn.btn-primary.disabled img.icon, div.btn.btn-primary.disabled img.icon {
                opacity: .75
            }

        a.btn.btn-primary.btn-sm, div.btn.btn-primary.btn-sm {
            height: 38px
        }

        a.btn.btn-primary.btn-xs, div.btn.btn-primary.btn-xs {
            height: 30px
        }

    a.btn.btn-back, div.btn.btn-back {
        border: 0 !important;
        font-family: 'Krungsri-Condensed-Bold';
        font-stretch: condensed;
        font-size: 24px;
        color: #554242
    }

        a.btn.btn-back .arrow, div.btn.btn-back .arrow {
            margin-right: 9.6px;
            text-decoration: none !important
        }

        a.btn.btn-back:hover, div.btn.btn-back:hover, a.btn.btn-back:active, div.btn.btn-back:active, a.btn.btn-back:focus, div.btn.btn-back:focus {
            text-decoration: underline !important;
            box-shadow: none !important
        }

            a.btn.btn-back:hover .arrow, div.btn.btn-back:hover .arrow, a.btn.btn-back:active .arrow, div.btn.btn-back:active .arrow, a.btn.btn-back:focus .arrow, div.btn.btn-back:focus .arrow {
                text-decoration: none !important
            }

    a.btn.btn-sm, div.btn.btn-sm {
        height: 38px;
        padding-top: 5px
    }

    a.btn.btn-xs, div.btn.btn-xs {
        height: 30px;
        padding-top: 0
    }

    a.btn.--width-default, div.btn.--width-default {
        width: 170px;
    }

    a.btn i, div.btn i {
        width: 24px;
        height: 15px;
        color: #554242
    }

    a.btn img.icon, div.btn img.icon {
        width: 24px;
        height: 15px;
        max-width: 100%;
        max-height: 100%
    }

.border-light {
    border-color: #e8e8e8 !important
}

.btn-secondary {
    font-family: Krungsri-Condensed-Bold;
    color: #554242 !important;
    background-color: #fff !important;
    width: 90px;
    padding: 11px !important;
    border: solid 1px #e8e8e8 !important
}

    .btn-secondary:hover {
        color: #463737 !important;
        background-color: #ffd400
    }

    .btn-secondary:focus {
        box-shadow: none !important
    }

    .btn-secondary.active {
        color: #554242;
        border: solid 1px #e8e8e8 !important;
        background-color: #ffc800 !important;
        width: 90px !important;
        padding: 11px !important;
        box-shadow: none !important
    }

        .btn-secondary.active:hover {
            color: #554242;
            border: solid 1px #e8e8e8 !important;
            background-color: #ffc800 !important;
            box-shadow: none !important
        }

        .btn-secondary.active:focus {
            box-shadow: none !important
        }

.btn-outline-secondary {
    font-family: Thongterm;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #554242;
    background-color: #ffd400;
    background-image: none;
    border: 0 !important;
    width: 90px;
    height: 38px
}

    .btn-outline-secondary:hover {
        color: #554242;
        background-color: #ffd400;
        border: 0 !important
    }

    .btn-outline-secondary:active {
        color: #554242 !important;
        background-color: #ffd400 !important;
        border: 0 !important;
        box-shadow: none !important
    }

    .btn-outline-secondary:focus {
        color: #554242 !important;
        background-color: #ffd400 !important;
        border: 0 !important;
        box-shadow: none !important
    }

.btn-group.btn-group-toggle label.btn-secondary {
    flex: 1
}

.a-link {
    color: #da7025 !important;
    text-decoration: none !important;
    cursor: pointer;
    font-family: Krungsri;
    font-size: 14px;
    margin-bottom: 16px
}

    .a-link:hover, .a-link:active {
        text-decoration: underline !important
    }

    .a-link.white {
        color: #fff !important;
        font-family: 'Thongterm'
    }

        .a-link.white:hover, .a-link.white:active {
            color: #ffd400 !important;
            text-decoration: none !important
        }

    .a-link.black {
        color: #5a5a5a !important;
        font-family: 'SukhumvitSet';
        text-decoration: underline !important
    }

    .a-link.yellow {
        color: #ffd400 !important;
        font-family: 'SukhumvitSet';
        text-decoration: underline !important
    }

    .a-link.panel {
        background-color: #f3f3f3;
        padding-left: 16px;
        padding-right: 16px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        margin-bottom: 8px
    }

    .a-link img.icon {
        width: 20px;
        height: 20px;
        max-height: 100%;
        max-width: 100%;
        margin-right: 8px
    }

    .a-link.left {
        justify-content: flex-start
    }

.i-link img {
    display: block;
    width: 26px;
    height: 22px;
    max-height: 100%;
    max-width: 100%
}

    .i-link img.hover, .i-link img.active {
        display: none
    }

.i-link:hover img {
    display: none
}

    .i-link:hover img.hover {
        display: block
    }

.i-link:active img, .i-link:active img.hover {
    display: none
}

    .i-link:active img.active {
        display: block;
        .ui.ks.dropdown
    }

.dropdown .btn {
    padding-left: 8px;
    padding-right: 8px
}

    .dropdown .btn .icon {
        margin-right: 5px
    }

        .dropdown .btn .icon > g {
            fill: #554242 !important
        }

    .dropdown .btn.btn-primary:focus {
        outline: none !important;
        box-shadow: none
    }

    .dropdown .btn.dropdown-toggle:after {
        content: "⌵";
        float: none;
        border: initial;
        vertical-align: middle;
        margin-left: auto;
        width: auto;
        height: auto
    }

    .dropdown .btn img.icon {
        width: 9px;
        height: 12px;
        max-width: 100%;
        max-height: 100%
    }

.dropdown-menu.show {
    min-width: 202px;
    height: auto;
    background-color: #fff;
    box-shadow: 1px 2px 4px 0 rgba(0,0,0,.2);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 8px;
    border-radius: 0
}

    .dropdown-menu.show .dropdown-item {
        border-bottom: 1px solid #e8e8e8;
        min-height: 39px;
        color: #5a5a5a;
        font-weight: bold;
        font-family: 'Thongterm-Roman';
        font-size: 14px;
        padding-right: 0;
        padding-left: 9.5px;
        padding-top: 8px;
        padding-bottom: 8px
    }

        .dropdown-menu.show .dropdown-item .icon {
            fill: #554242 !important;
            width: 9px;
            height: 12px;
            max-width: 100%;
            max-height: 100%;
            margin-top: -3px;
            margin-right: 5px;
            margin-left: 5px
        }

            .dropdown-menu.show .dropdown-item .icon > g > g {
                fill: #554242
            }

        .dropdown-menu.show .dropdown-item:last-child {
            border-bottom: 0 solid #e8e8e8
        }

        .dropdown-menu.show .dropdown-item:hover {
            display: block;
            color: #5a5a5a !important;
            background-color: #f3f3f3 !important
        }

            .dropdown-menu.show .dropdown-item:hover .icon > g > g {
                fill: #fff !important
            }

        .dropdown-menu.show .dropdown-item:active {
            background-color: #463737 !important;
            color: #f3f3f3 !important
        }

.form-group label, .input-group label {
    font-family: Thongterm-Roman;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.88;
    letter-spacing: normal;
    color: #5a5a5a
}

.form-group input.form-control, .input-group input.form-control, .form-group textarea.form-control, .input-group textarea.form-control {
    font-family: 'Thongterm-Bold';
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 34px;
    letter-spacing: normal;
    color: #222;
    height: 44px;
    border-radius: 3px;
    background-color: #fff
}

.form-group textarea.form-control {
    height: 120px
}

    .form-group input.form-control:focus, .input-group input.form-control:focus, .form-group textarea.form-control:focus, .input-group textarea.form-control:focus {
        border: solid 1px #c7c7c7;
        box-shadow: none
    }

    .form-group input.form-control:disabled, .input-group input.form-control:disabled, .form-group textarea.form-control:disabled, .input-group textarea.form-control:disabled {
        background-color: #f0efee !important
    }

    .form-group input.form-control::placeholder, .input-group input.form-control::placeholder, .form-group textarea.form-control::placeholder, .input-group textarea.form-control::placeholder {
        color: #bbb;
        font-family: Thongterm
    }

    .form-group input.form-control.WatermarkText, .input-group input.form-control.WatermarkText, .form-group textarea.form-control.WatermarkText, .input-group textarea.form-control.WatermarkText {
        font-family: Thongterm;
        font-size: 16px !important;
        line-height: 34px !important;
        color: #949494 !important
    }

    .form-group input.form-control.form-control-danger, .input-group input.form-control.form-control-danger, .form-group textarea.form-control.form-control-danger, .input-group textarea.form-control.form-control-danger {
        border: solid 1px #d00000
    }

    .form-group input.form-control.form-control-sm, .input-group input.form-control.form-control-sm, .form-group textarea.form-control.form-control-sm, .input-group textarea.form-control.form-control-sm {
        height: 38px
    }

.form-group .form-control-feedback, .input-group .form-control-feedback, .form-group EditingFormErrorLabel, .input-group EditingFormErrorLabel {
    display: none;
    height: 29px;
    font-family: 'Thongterm-Roman';
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: normal;
    margin-top: 4px
}

    .form-group .form-control-feedback.danger, .input-group .form-control-feedback.danger, .form-group EditingFormErrorLabel.danger, .input-group EditingFormErrorLabel.danger, .form-group .form-control-feedback .EditingFormErrorLabel, .input-group .form-control-feedback .EditingFormErrorLabel, .form-group EditingFormErrorLabel .EditingFormErrorLabel, .input-group EditingFormErrorLabel .EditingFormErrorLabel {
        color: #d00000;
        display: block
    }

.form-group.input-group-datetime:after, .input-group.input-group-datetime:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    color: #5b5b5b;
    position: absolute;
    top: 17%;
    right: 16px;
    content: "";
    z-index: 3
}

.form-group {
    margin-bottom: 16px
}

    .form-group.input-group-datetime {
        position: relative
    }

        .form-group.input-group-datetime:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 300;
            color: #000;
            position: absolute;
            top: 53%;
            right: 16px;
            content: "";
            z-index: 3
        }

.input-group {
    margin-top: 16px;
    margin-bottom: 16px
}

    .input-group .input-group-prepend .input-group-text, .input-group .input-group-append .input-group-text {
        background-color: #ffd400;
        border-radius: 5px;
        padding-left: 16px;
        padding-right: 16px
    }

        .input-group .input-group-prepend .input-group-text img, .input-group .input-group-append .input-group-text img {
            width: 20px;
            height: 20px;
            max-height: 100%;
            max-width: 100%
        }

    .input-group .input-group-prepend.disabled .input-group-text, .input-group .input-group-append.disabled .input-group-text {
        background-color: #f0efee
    }

    .input-group .input-group-prepend .input-group-text {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0
    }

    .input-group .input-group-append .input-group-text {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

    .input-group .input-group-append .ui.ks.dropdown {
        background-color: #ffc800;
        color: #463737;
        font-weight: bold;
        border-bottom-left-radius: 0 !important;
        border-top-left-radius: 0 !important;
        min-width: 50px !important
    }

        .input-group .input-group-append .ui.ks.dropdown.selection .text {
            padding-left: 17px;
            margin-right: 0;
            text-align: left
        }

@media screen and (min-width: 768px) {
    .input-group .input-group-append .ui.ks.dropdown.selection .text {
        padding-left: 17px
    }
}

@media screen and (max-width: calc(768px - 1px)) {
    .input-group .input-group-append .ui.ks.dropdown.selection .text {
        padding-left: 18px
    }
}

.input-group .input-group-append .ui.ks.dropdown .text {
    font-weight: bold
}

.input-group .input-group-append .ui.ks.dropdown .dropdown.icon {
    display: inline-table;
    top: 0 !important;
    bottom: 0 !important;
    right: 16px;
    margin: auto 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

    .input-group .input-group-append .ui.ks.dropdown .dropdown.icon:before {
        content: "";
        font-family: "Font Awesome 5 Pro";
        font-size: 20px;
        color: #463737
    }

.input-group .input-group-append .ui.ks.dropdown .default.text {
    color: #463737
}

.input-group .input-group-append .btn.btn-outline-secondary {
    background-color: #ffc800;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    height: 48px
}

    .input-group .input-group-append .btn.btn-outline-secondary.btn-sm {
        height: 38px
    }

.input-group.input-group-sm input.form-control {
    height: 38px
}

.input-group.input-group-sm .input-group-prepend, .input-group.input-group-sm .input-group-append {
    height: 38px
}

.radio, .checkbox {
    padding-left: 0 !important
}

.radio-inline input[type="radio"] {
    display: none
}

    .radio-inline input[type="radio"] + label, .radio-inline input[type="radio"] + span {
        padding-left: 2px;
        padding-right: 10px;
        display: inline-block;
        line-height: 30px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 16px;
        vertical-align: middle;
        cursor: pointer;
        color: #5a5a5a;
        font-family: Thongterm-Roman
    }

        .radio-inline input[type="radio"] + label:before, .radio-inline input[type="radio"] + span:before {
            font-size: 24px;
            vertical-align: sub;
            padding-right: 8px;
            content: "";
            font-family: "Font Awesome 5 Pro";
            color: #bbb;
            font-weight: 100
        }

    .radio-inline input[type="radio"]:checked + label, .radio-inline input[type="radio"]:checked + span {
        background-position: 0 -65px
    }

        .radio-inline input[type="radio"]:checked + label:before, .radio-inline input[type="radio"]:checked + span:before {
            color: #ffd400;
            font-weight: 900;
            content: "";
            font-family: "Font Awesome 5 Pro";
            padding-right: 8px
        }

    .radio-inline input[type="radio"]:checked:hover + label, .radio-inline input[type="radio"]:checked:hover + span {
        background-position: 0 -96px
    }

    .radio-inline input[type="radio"]:checked:disabled + label, .radio-inline input[type="radio"]:checked:disabled + span {
        background-position: 0 -190px;
        color: #bbb
    }

    .radio-inline input[type="radio"]:disabled + label, .radio-inline input[type="radio"]:disabled + span {
        background-position: 0 -160px;
        color: #bbb
    }

    .radio-inline input[type="radio"]:disabled:hover + label:before, .radio-inline input[type="radio"]:disabled:hover + span:before {
        color: #bbb;
        content: "";
        font-family: "Font Awesome 5 Pro"
    }

.radio-inline label, .radio-inline span {
    background-image: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.checkbox-inline input[type="checkbox"] {
    display: none
}

    .checkbox-inline input[type="checkbox"] + label, .checkbox-inline input[type="checkbox"] + span {
        padding-left: 2px;
        padding-right: 10px;
        display: inline-block;
        line-height: 30px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 16px;
        vertical-align: middle;
        cursor: pointer;
        color: #5a5a5a;
        font-family: Thongterm-Roman
    }

        .checkbox-inline input[type="checkbox"] + label:before, .checkbox-inline input[type="checkbox"] + span:before {
            font-size: 24px;
            line-height: 24px;
            vertical-align: sub;
            padding-right: 8px;
            content: "";
            font-family: "Font Awesome 5 Pro";
            color: #bbb;
            float: left;
            font-weight: 100
        }

    .checkbox-inline input[type="checkbox"]:checked + label:before, .checkbox-inline input[type="checkbox"]:checked + span:before {
        color: #ffd400;
        font-size: 24px;
        vertical-align: sub;
        padding-right: 8px;
        content: "";
        font-family: "Font Awesome 5 Pro";
        font-weight: 900
    }

    .checkbox-inline input[type="checkbox"]:hover + label:before, .checkbox-inline input[type="checkbox"]:hover + span:before {
        font-size: 24px;
        vertical-align: sub;
        padding-right: 8px;
        content: "";
        font-family: "Font Awesome 5 Pro"
    }

    .checkbox-inline input[type="checkbox"]:checked:hover + label, .checkbox-inline input[type="checkbox"]:checked:hover + span {
        background-position: 0 -57px
    }

    .checkbox-inline input[type="checkbox"]:checked:disabled + label, .checkbox-inline input[type="checkbox"]:checked:disabled + span {
        color: #bbb
    }

        .checkbox-inline input[type="checkbox"]:checked:disabled + label:before, .checkbox-inline input[type="checkbox"]:checked:disabled + span:before {
            color: #bbb;
            content: "";
            font-family: "Font Awesome 5 Pro"
        }

    .checkbox-inline input[type="checkbox"]:disabled + label, .checkbox-inline input[type="checkbox"]:disabled + span {
        color: #bbb
    }

        .checkbox-inline input[type="checkbox"]:disabled + label:before, .checkbox-inline input[type="checkbox"]:disabled + span:before {
            color: #bbb;
            content: "";
            font-family: "Font Awesome 5 Pro"
        }

.checkbox-inline label, .checkbox-inline span {
    background: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.breadcrumb {
    background-color: transparent;
    padding: 0
}

    .breadcrumb .breadcrumb-item {
        color: #5a5a5a;
        font-family: 'Thongterm-Roman';
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        font-stretch: condensed;
        line-height: normal;
        letter-spacing: normal
    }

        .breadcrumb .breadcrumb-item a {
            color: #5a5a5a;
            font-family: 'Thongterm-Roman';
            font-size: 14px;
            font-weight: 500;
            font-style: normal;
            font-stretch: condensed;
            line-height: normal;
            letter-spacing: normal
        }

        .breadcrumb .breadcrumb-item + .breadcrumb-item {
            padding-left: 0
        }

            .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
                display: inline-block;
                padding: 0 16px;
                content: "";
                font-weight: 300;
                font-family: "Font Awesome 5 Pro";
                font-size: 18px;
                line-height: normal;
                position: relative;
                top: 3px
            }

.card {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    padding: 24px;
    margin-bottom: 16px
}

    .card .card-body {
        padding: 0
    }

.well {
    border-radius: 3px;
    background-color: #fcfcfc;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px
}

    .well.marigold {
        background-color: #ffc800
    }

.nav.nav-tabs {
    border-bottom: 1px solid #e8e8e8;
    display: flex
}

    .nav.nav-tabs.border-bottom-0 {
        border-bottom: 0
    }

    .nav.nav-tabs .nav-item {
        font-family: Thongterm-Roman;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: condensed;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        color: #9b9b9b;
        flex: 1 1 auto
    }

        .nav.nav-tabs .nav-item .nav-link {
            color: #949494;
            font-size: 16px;
            line-height: 34px;
            font-family: Thongterm-Roman;
            border-bottom: 3px solid #f0efee
        }

            .nav.nav-tabs .nav-item .nav-link:hover {
                font-family: Thongterm-Bold;
                color: #5a5a5a;
                border-top: 0;
                border-left: 0;
                border-right: 0;
                border-bottom: 3px solid #ffd400
            }

            .nav.nav-tabs .nav-item .nav-link.active {
                font-family: Thongterm-Bold;
                color: #222;
                border-top: 0;
                border-left: 0;
                border-right: 0;
                border-bottom: 3px solid #ffd400;
                background-color: inherit
            }

            .nav.nav-tabs .nav-item .nav-link .nav-item {
                flex: 1 1 auto;
                display: flex
            }

.table thead ~ tbody tr:nth-of-type(even) {
    background: #f3f3f3
}

.table thead ~ tbody tr:nth-of-type(odd) {
    background: #fff
}

.table tbody tr:nth-of-type(even) {
    background: #fff
}

.table tbody tr:nth-of-type(odd) {
    background: #f3f3f3
}

.table tr th {
    background-color: #ffd400;
    vertical-align: middle !important;
    text-align: center;
    color: #545454;
    font-family: Thongterm-Bold;
    font-size: 16px;
    line-height: 29px;
    padding: 13px;
    border-top: 0;
    border-bottom: 0
}

.table tr td {
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 16px;
    line-height: 29px;
    vertical-align: middle;
    border-top: 0;
    padding: 10px
}

@media(max-width: 767px) {
    .table-scrollable {
        overflow-x: scroll;
        min-width: 767px
    }
}

.table.table-no-stripe > tbody > tr {
    background: none !important
}

.table.ks-exhange thead tr th, .table.ks-exhange thead tr td {
    background-color: #6f5f5e;
    border-color: #fff;
    color: #fff;
    text-align: center;
    vertical-align: middle
}

.table.ks-exhange tbody tr {
    background-color: #f3f3f3
}

    .table.ks-exhange tbody tr td {
        border: 0;
        text-align: center;
        padding: 0;
        vertical-align: middle;
        max-height: 50px;
        padding-left: 16px;
        padding-right: 16px;
        height: 50px
    }

    .table.ks-exhange tbody tr:nth-of-type(odd) {
        background-color: #fff
    }

.table.ks-exhange-preview {
    border: 0
}

    .table.ks-exhange-preview thead th, .table.ks-exhange-preview thead td {
        text-align: right;
        border-top: 0;
        border-bottom: 0;
        padding-bottom: 16px;
        font-family: Thongterm;
        font-size: 18px;
        font-weight: bold;
        background-color: transparent;
        color: #5a5a5a
    }

        .table.ks-exhange-preview thead th:nth-child(1) {
            text-align: left
        }

    .table.ks-exhange-preview tbody td {
        border-top: 0;
        border-bottom: 0;
        text-align: right;
        font-family: Thongterm-Roman;
        font-size: 16px
    }

        .table.ks-exhange-preview tbody td .icon-margin-right {
            margin-right: 12px
        }

        .table.ks-exhange-preview tbody td:nth-child(1) {
            text-align: left
        }

    .table.ks-exhange tbody tr td, .table.ks-exhange-preview tbody tr td {
        align-items: center
    }

.list-group .list-group-item {
    border: 0;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.88;
    letter-spacing: normal;
    color: #9b9b9b;
    border-radius: 0;
    padding: 16px
}

    .list-group .list-group-item.list-group-item-action {
        color: #222;
        font-family: Krungsri-Condensed-Bold;
        font-size: 16px;
        line-height: 24px;
        background: #f3f3f3
    }

.accordion .card {
    border-left: 0;
    border-right: 0;
    padding: 0;
    border-color: #e8e8e8;
    font-family: Thongterm-Roman;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: normal;
    color: #5a5a5a;
    margin-bottom: 0
}

    .accordion .card .card-header {
        width: 100%;
        height: auto;
        min-height: 64px;
        cursor: pointer;
        background-color: #fff;
        padding-left: 16px;
        padding-right: 0;
        border-bottom: 0 solid #e8e8e8;
        border-left: 3px solid transparent;
        padding-bottom: 0
    }

        .accordion .card .card-header.arrow .btn-link:hover {
            text-decoration: underline
        }

        .accordion .card .card-header.arrow:not(.collapsed):after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 300;
            font-size: 1.5rem;
            content: "";
            float: right;
            position: absolute;
            top: 18px;
            right: 20px;
            color: #5a5a5a;
            z-index: 0
        }

        .accordion .card .card-header.arrow.collapsed:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 300;
            font-size: 1.5rem;
            content: "";
            float: right;
            position: absolute;
            top: 18px;
            right: 20px;
            color: #5a5a5a;
            z-index: 0
        }

        .accordion .card .card-header .btn {
            width: 100%;
            height: auto;
            color: #222;
            font-size: 16px;
            font-family: Krungsri-Condensed-Bold;
            font-weight: normal;
            padding-left: 0;
            padding-right: 38px;
            text-align: left;
            word-wrap: break-word;
            white-space: normal
        }

            .accordion .card .card-header .btn:active {
                box-shadow: none !important
            }

            .accordion .card .card-header.active, .accordion .card .card-header .btn:hover {
                text-decoration: none !important;
                color: #222
            }

        .accordion .card .card-header.arrow {
            background: none
        }

            .accordion .card .card-header.arrow.active {
                background: none
            }

.accordion .collapse {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px
}

    .accordion .collapse .card-header {
        padding: 8px
    }

    .accordion .collapse .card-body {
        padding-left: 0;
        padding-right: 0
    }

        .accordion .collapse .card-body .item {
            padding-bottom: 8px
        }

.accordion .collapsing .card-body {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px
}

    .accordion .collapsing .card-body .item {
        padding-bottom: 8px
    }

.accordion > .card:first-of-type {
    border-bottom: 1px solid #e8e8e8
}

.accordion > .card:nth-child(2) {
    border-top: 0
}

.pagination {
    align-content: center;
    justify-content: center
}

.page-link {
    padding: 2px 8px;
    background-color: inherit
}

.pagination .page-item {
    padding-right: 2.5px
}

    .pagination .page-item.prev .page-link, .pagination .page-item.next .page-link {
        font-family: Thongterm-Roman
    }

    .pagination .page-item .page-link {
        font-family: Thongterm-Bold;
        font-size: 16px;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        text-align: center;
        border: 0;
        color: #545454;
        border-radius: 50%
    }

        .pagination .page-item .page-link:hover {
            background-color: inherit
        }

        .pagination .page-item .page-link:active, .pagination .page-item .page-link:focus {
            box-shadow: none
        }

    .pagination .page-item.active .page-link {
        background-color: #ffd400;
        padding: 2px 7px
    }

    .pagination .page-item.prev .page-link:hover, .pagination .page-item.next .page-link:hover {
        background-color: transparent
    }

.modal {
    max-height: 100%;
    border-radius: 3px
}

    .modal .dialog {
        width: 970px;
        height: 740px;
        max-height: 95%;
        background-color: #fff;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,.3)
    }

.table-responsive {
    max-width: 100%;
    width: 100%;
    position: relative
}

@media screen and (min-width: 768px) {
    .table-responsive {
        display: table;
        width: 100%
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .col-sm-6 {
        width: 50%
    }

    .table.ks-exhange-preview {
        border: 0
    }

        .table.ks-exhange-preview thead th {
            font-family: Krungsri;
            font-size: 14px;
            font-weight: bold
        }

        .table.ks-exhange-preview tbody td {
            font-family: Thongterm;
            font-size: 14px;
            font-weight: bold
        }

            .table.ks-exhange-preview tbody td:nth-child(1) {
                text-align: left
            }
}

@media screen and (max-width: 576px) {
    .d-xs-block {
        display: block !important
    }

    .col-xs-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-xs-5 {
        width: 49%
    }

    .col-xs-6 {
        width: 50%
    }

    .table.ks-exhange-preview {
        border: 0
    }

        .table.ks-exhange-preview thead th {
            font-family: Krungsri;
            font-size: 14px;
            font-weight: bold
        }

        .table.ks-exhange-preview tbody td {
            font-family: Thongterm;
            font-size: 14px;
            font-weight: bold
        }

            .table.ks-exhange-preview tbody td:nth-child(1) {
                text-align: left
            }
}

@media screen and (max-width: 767px) {
    .radio-inline {
        display: block
    }

    .checkbox-inline {
        display: block
    }
}

.icon-text {
    margin: -40px 15px;
    float: right
}

body {
    padding-top: 150px;
    background-color: #fcfcfc
}

table > thead > tr > th {
    background-color: #6f5f5e;
    color: #fff;
    vertical-align: middle !important;
    text-align: center
}

.ks-top-nav {
    background-color: #6f5f5e;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

    .ks-top-nav .menu--content {
        max-width: 1170px;
        margin: auto;
        height: 40px;
        display: flex;
        padding-top: 10px;
        padding-bottom: 10px
    }

        .ks-top-nav .menu--content .menu--logo {
            flex: 0 0 auto
        }

        /*  disable 2025-02-21 to use MasterpageKrungsri disable 2025-02-21 to use MasterpageKrungsri (personal.css)
            .ks-top-nav .menu--content .menu--logo img {
                width: 118px;
                height: 40px;
                max-height: none;
                max-width: 100%
            }*/

        .ks-top-nav .menu--content .navbar-toggler {
            color: #554242;
            outline: none;
            font-size: 16px;
            width: 40px;
            height: 26px
        }

        .ks-top-nav .menu--content .menu--customer-type {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex: 0 0 auto;
            margin-left: 52px;
            padding-top: 9px;
            padding-bottom: 9px
        }

            .ks-top-nav .menu--content .menu--customer-type a {
                color: #fff;
                outline: none;
                text-decoration: none;
                cursor: pointer;
                font-size: 14px;
                font-family: Krungsri-Condensed-Medium;
                padding-right: 30px;
                position: relative;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none
            }

                .ks-top-nav .menu--content .menu--customer-type a:hover {
                    color: #ffd400
                }

                .ks-top-nav .menu--content .menu--customer-type a:last-child {
                    padding-right: 0
                }

                .ks-top-nav .menu--content .menu--customer-type a.active {
                    color: #ffd400
                }

                    .ks-top-nav .menu--content .menu--customer-type a.active i {
                        color: #e6e6e6;
                        display: block
                    }

        .ks-top-nav .menu--content .menu--extension {
            position: relative;
            flex: 0 0 auto;
            display: flex;
            margin-right: 16px;
            margin-left: auto;
            padding-top: 9px;
            padding-bottom: 9px;
            align-items: center
        }

            .ks-top-nav .menu--content .menu--extension .menu--extension-1 {
                display: flex;
                flex: 0 0 auto;
                align-items: center;
                margin-left: auto;
                color: #fff;
                border-right: 1px solid white;
                padding-right: 18px
            }

            .ks-top-nav .menu--content .menu--extension .menu--extension-2 {
                display: flex;
                flex: 0 0 auto;
                align-items: center
            }

                .ks-top-nav .menu--content .menu--extension .menu--extension-2 > div {
                    flex: 0 0 auto
                }

            .ks-top-nav .menu--content .menu--extension .menu--search {
                display: flex;
                transition: width .3s ease,opacity .3s ease;
                width: 60%;
                overflow: visible;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 0;
                opacity: 0
            }

                .ks-top-nav .menu--content .menu--extension .menu--search.active {
                    width: 100%;
                    opacity: 1
                }

                .ks-top-nav .menu--content .menu--extension .menu--search .close {
                    flex: 0 0 auto;
                    font-family: Krungsri-Condensed-Medium;
                    font-size: 16px;
                    font-weight: normal;
                    font-style: normal;
                    font-stretch: normal;
                    line-height: normal;
                    letter-spacing: normal;
                    color: #fff;
                    background-color: #6f5f5e;
                    opacity: 1;
                    display: flex;
                    align-items: center;
                    text-shadow: none
                }

                    .ks-top-nav .menu--content .menu--extension .menu--search .close i {
                        padding: 0 12px;
                        color: #fff
                    }

                        .ks-top-nav .menu--content .menu--extension .menu--search .close i:before {
                            color: #fff;
                            font-size: 24px
                        }

                .ks-top-nav .menu--content .menu--extension .menu--search .ui.search {
                    flex: 1 1 auto
                }

                .ks-top-nav .menu--content .menu--extension .menu--search .ui.icon.input input {
                    height: 38px
                }

                .ks-top-nav .menu--content .menu--extension .menu--search .ui.icon.input i {
                    cursor: pointer;
                    pointer-events: none
                }

            .ks-top-nav .menu--content .menu--extension a {
                color: #fff;
                outline: none;
                text-decoration: none;
                cursor: pointer;
                font-size: 14px;
                font-family: Krungsri-Condensed-Medium;
                padding-right: 23px
            }

                .ks-top-nav .menu--content .menu--extension a:hover {
                    color: #ffd400
                }

                .ks-top-nav .menu--content .menu--extension a:last-child {
                    padding-right: 0
                }

                .ks-top-nav .menu--content .menu--extension a.dropdown-item {
                    color: #5a5a5a
                }

            .ks-top-nav .menu--content .menu--extension .nav-item.dropdown a {
                padding-top: 0;
                padding-right: 0
            }

        .ks-top-nav .menu--content .menu--logon {
            height: 30px;
            display: flex;
            padding-top: 0;
            flex: 0 0 auto;
            align-items: center;
            align-self: center
        }

            .ks-top-nav .menu--content .menu--logon > div.dropdown {
                margin-top: -2px
            }

        .ks-top-nav .menu--content .menu--bars {
            flex: 0 0 auto;
            margin-left: auto;
            padding: 10px 0
        }

    .ks-top-nav .submenu--content .group {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: none
    }

        .ks-top-nav .submenu--content .group.active {
            display: flex;
            justify-content: left
        }

        .ks-top-nav .submenu--content .group .item {
            flex: 0 0 auto;
            cursor: pointer;
            margin: auto;
            font-family: Krungsri-Condensed-Medium;
            color: #5a5a5a;
            text-decoration: none;
            outline: none;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

            .ks-top-nav .submenu--content .group .item hr {
                display: none;
                width: 100%;
                margin-top: 0;
                margin-bottom: 0;
                border-top: 3px solid #ffd400
            }

            .ks-top-nav .submenu--content .group .item .content {
                padding-left: 24px;
                padding-right: 24px;
                border-right: 1px solid #ccc
            }

                .ks-top-nav .submenu--content .group .item .content .header {
                    font-size: 20px
                }

                .ks-top-nav .submenu--content .group .item .content .description {
                    font-family: Thongterm-Roman;
                    font-size: 14px
                }

            .ks-top-nav .submenu--content .group .item:last-child .content {
                border-right: 0
            }

            .ks-top-nav .submenu--content .group .item:hover hr, .ks-top-nav .submenu--content .group .item.active hr {
                position: absolute;
                display: block;
                bottom: -15px
            }

.ks-content-wrapper {
    width: 100%;
    max-width: unset
}

.container-fluid {
    width: 100%;
    margin: 0 auto
}

.bg--dark {
    background-color: #3a2e27
}

.container--fullwidth {
    max-width: none;
    width: 100%;
    margin-left: -15px;
    margin-right: -15px
}

.container--cover {
    margin: 0 auto;
    margin-bottom: 64px;
    position: relative;
    width: 100%;
    max-width: 100% !important
}

@media screen and (max-width: 767px) {
    .container--cover {
        margin-bottom: 48px
    }
}

.container--cover.container--banner {
    max-height: 320px
}

    .container--cover.container--banner .image {
        max-height: 320px
    }

.container--cover .border-top-yellow {
    border-top: 3px solid #ffd400
}

.container--cover .card.block {
    padding: 0 !important
}

.container--cover .image {
    position: relative;
    overflow: hidden
}

    .container--cover .image > img {
        width: auto
    }

.container--cover .container--cover__layer {
    width: 100%;
    max-width: 1170px;
    margin: auto
}

@media screen and (max-width: 767px) {
    .container--cover .container--cover__layer {
        padding-left: 15px;
        padding-right: 15px
    }
}

.container--cover .cover-content-wrapper .banner-content {
    text-align: left !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    margin-bottom: 40px
}

@media screen and (max-width: 767px) {
    .container--cover .cover-content-wrapper .banner-content {
        margin-bottom: 20px
    }
}

.container--cover .container--cover__menubar {
    margin-top: -25px;
    width: 570px;
    height: 50px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 1px 3px 10px rgba(0,0,0,.05);
    z-index: 10
}

@media screen and (max-width: 767px) {
    .container--cover .container--cover__menubar {
        margin-top: -35px;
        width: 100%;
        height: unset;
        margin-left: 15px;
        margin-right: 15px;
        text-align: left !important
    }
}

.container--cover .container--cover__menubar ul {
    border-bottom: none !important
}

.container--cover .container--cover__menubar .nav-item {
    width: 170px;
    font-size: 16px
}

@media screen and (max-width: 767px) {
    .container--cover .container--cover__menubar .nav-item {
        width: 100%;
        text-align: left !important
    }
}

.container--cover .container--cover__menubar .nav-item .nav-link {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0
}

@media screen and (max-width: 767px) {
    .container--cover .container--cover__menubar .nav-item .nav-link {
        padding-left: 16px;
        border-bottom: 1px solid #f1f1f1 !important
    }

        .container--cover .container--cover__menubar .nav-item .nav-link::after {
            content: "";
            font-family: 'Font Awesome 5 Pro';
            font-size: 18px;
            font-weight: normal;
            text-decoration: inherit;
            color: #5a5a5a;
            display: inline;
            float: right;
            padding-right: 16px;
            padding-top: 4px
        }
}

.container--cover .container--cover__menubar .nav-item:nth-child(2) {
    margin: 0 30px
}

@media screen and (max-width: 767px) {
    .container--cover .container--cover__menubar .nav-item:nth-child(2) {
        margin: 0
    }
}

.container--cover .container--cover__card {
    border-top: 3px solid #ffd400;
    border-radius: 3px;
    background-color: white;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    margin-top: -320px
}

    .container--cover .container--cover__card.card-visa2 {
        margin-top: -25px;
        border-top: 0;
        z-index: 10
    }

@media screen and (min-width: 768px) and (max-width:1199px) {
    .container--cover .container--cover__card {
        margin-top: -330px
    }
}

@media screen and (max-width: 767px) {
    .container--cover .container--cover__card {
        margin-top: 24px
    }
}

.container--cover .container--cover__card .card-body {
    padding: 24px 32px
}

    .container--cover .container--cover__card .card-body.card-body-visa2 {
        padding: 0 0 0;
        height: 236px;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: nowrap
    }

        .container--cover .container--cover__card .card-body.card-body-visa2 > .menubar {
            width: 233px
        }

            .container--cover .container--cover__card .card-body.card-body-visa2 > .menubar > .icon-menu {
                height: 80px;
                margin-top: 40px
            }

                .container--cover .container--cover__card .card-body.card-body-visa2 > .menubar > .icon-menu i {
                    font-size: 60px
                }

        .container--cover .container--cover__card .card-body.card-body-visa2 > .line-text {
            height: 236px;
            width: 1px;
            border-left: 1px solid #f3f3f3
        }

@media screen and (max-width: 767px) {
    .container--cover .container--cover__card .card-body.card-body-visa2 {
        height: auto
    }

        .container--cover .container--cover__card .card-body.card-body-visa2 > .menubar {
            width: 129px;
            margin: 20px 20px 20px
        }

            .container--cover .container--cover__card .card-body.card-body-visa2 > .menubar > .icon-menu {
                width: 80px;
                height: auto;
                margin-top: auto
            }

                .container--cover .container--cover__card .card-body.card-body-visa2 > .menubar > .icon-menu i {
                    font-size: 40px
                }

        .container--cover .container--cover__card .card-body.card-body-visa2 > .menubarspan {
            width: 90%
        }

        .container--cover .container--cover__card .card-body.card-body-visa2 > .line-text {
            height: 2px;
            width: 100%;
            border-bottom: 1px solid #f3f3f3
        }
}

.container--cover .container--cover__card .title {
    font-family: Thongterm-Roman;
    font-size: 16px;
    font-weight: normal;
    color: #5a5a5a;
    margin: 16px 0
}

.container--banner {
    width: 100%;
    margin: auto;
    margin-bottom: unset
}

@media screen and (max-width: 767px) {
    .container--banner.min-height-200px-mobile {
        min-height: 200px
    }
}

@media screen and (max-width: 767px) {
    .container--banner.min-height-250px-mobile {
        min-height: 250px
    }
}

@media screen and (max-width: 767px) {
    .container--banner.min-height-300px-mobile {
        min-height: 300px
    }
}

.container--banner .block-banner {
    display: flex;
    justify-content: flex-end;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 auto
}

    .container--banner .block-banner .image {
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        max-width: calc(100vw - 1px);
        overflow: hidden
    }

        .container--banner .block-banner .image .blur-effect-1px {
            -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
            filter: blur(1px)
        }

        .container--banner .block-banner .image > img {
            width: 100%;
            max-width: calc(100vw - 1px);
            height: auto
        }

@media screen and (max-width: 767px) {
    .container--banner .block-banner .image > img {
        width: 100%;
        height: auto;
        min-height: unset
    }
}

.container--banner .block-banner .gradient {
    max-width: calc(100vw - 1px)
}

.container--banner .block-banner .cover-content-wrapper {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex
}

    .container--banner .block-banner .cover-content-wrapper .banner-content {
        padding-left: 0 !important
    }

@media screen and (max-width: 767px) {
    .container--banner .block-banner .cover-content-wrapper {
        position: relative;
        top: 0;
        bottom: 0;
        padding-left: 16px;
        padding-right: 16px;
        height: 100%
    }

        .container--banner .block-banner .cover-content-wrapper .banner-content {
            padding-left: 16px !important
        }

        .container--banner .block-banner .cover-content-wrapper.middle-mobile {
            position: absolute !important;
            vertical-align: middle;
            align-self: center;
            padding-left: 0
        }

            .container--banner .block-banner .cover-content-wrapper.middle-mobile .banner-content {
                position: static;
                margin: auto
            }
}

.container--banner .block-banner .banner-content {
    width: 100%;
    border: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding-bottom: 40px;
    padding-left: 54px
}

@media screen and (max-width: 767px) {
    .container--banner .block-banner .banner-content {
        padding: 16px;
        padding-bottom: 32px;
        width: 100%
    }

        .container--banner .block-banner .banner-content.center-on-mobile {
            text-align: center
        }

        .container--banner .block-banner .banner-content.pb-64px-mobile {
            padding-bottom: 64px
        }

        .container--banner .block-banner .banner-content.middle-mobile {
            height: 50%;
            padding-left: 16px;
            padding-right: 16px;
            overflow: visible;
            margin: 0 auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 50%;
            right: 0;
            display: flex;
            flex-flow: column;
            align-self: center;
            justify-content: center
        }
}

.container--banner .block-banner .banner-content .btn {
    padding: .375rem .75rem;
    padding-top: 4px;
    margin-top: 18px;
    height: 44px;
    text-align: center;
    vertical-align: middle
}

@media screen and (max-width: 767px) {
    .container--banner .block-banner .banner-content .btn {
        padding: .375rem .75rem;
        padding-top: 4px;
        margin-top: 18px;
        height: 44px;
        text-align: center;
        vertical-align: middle
    }
}

.container--banner .side-block .image.icon {
    padding-right: 16px
}

.container--banner .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 20px
}

.container--banner.text-over-image--not-used .image {
    position: relative
}

.container--banner.text-over-image--not-used .content {
    width: 100%;
    display: flex;
    position: absolute;
    flex-direction: column
}

@media screen and (min-width: 768px) {
    .container--banner.text-over-image--not-used .content {
        padding-left: 56px;
        bottom: 40px
    }
}

@media screen and (max-width: 767px) {
    .container--banner.text-over-image--not-used .content {
        justify-content: center;
        text-align: center;
        padding: 32px
    }
}

.container--banner.visa2--section {
    margin-bottom: 225px
}

@media screen and (max-width: 767px) {
    .container--banner.visa2--section {
        margin-bottom: 325px
    }
}

.container--nav {
    max-width: 1170px;
    margin: auto
}

.container--breadcrumb {
    max-width: 1170px;
    margin: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    justify-content: space-between;
    display: flex;
    padding: 0
}

    .container--breadcrumb .row {
        align-items: center
    }

    .container--breadcrumb nav ol {
        margin: auto 0
    }

    .container--breadcrumb div {
        flex: 1 1 auto
    }

        .container--breadcrumb div a, .container--breadcrumb div span {
            color: #545454;
            font-family: Thongterm-Roman;
            font-size: 14px;
            line-height: 26px
        }

        .container--breadcrumb div i {
            margin-right: 18px;
            font-size: 18px;
            top: 3px;
            position: relative
        }

.container--menu {
    margin: 32px auto;
    max-width: 1170px
}

    .container--menu > .row {
        align-items: center
    }

@media screen and (max-width: 1199px) {
    .container--menu > .row .block-white {
        border-radius: 3px;
        border: .5px solid #c3c3c3 !important;
        padding: 16px 16px 16px 8px !important;
        margin: 8px 0 !important;
        height: 90px
    }

    .container--menu > .row > div:nth-child(1) {
        order: 2
    }

    .container--menu > .row > div:nth-child(2) {
        order: 3
    }

    .container--menu > .row > div:nth-child(3) {
        order: 4
    }

    .container--menu > .row > div:nth-child(4) {
        order: 1
    }
}

.container--menu > .row .block-white {
    padding: 8px 0;
    margin: 0;
    border: 0
}

@media screen and (max-width: 767px) {
    .container--menu > .row .block-white {
        padding: 16px 16px 16px 8px;
        margin: 8px 0;
        border: .5px solid #c3c3c3
    }
}

.container--menu > .row .block-yellow {
    padding: 0;
    height: 90px;
    margin: 0 !important
}

    .container--menu > .row .block-yellow .image {
        width: 74px
    }

@media screen and (max-width: 767px) {
    .container--menu > .row .block-yellow {
        margin: 8px 0 !important
    }

        .container--menu > .row .block-yellow .image {
            margin: 0;
            padding-right: 8px;
            text-align: center
        }
}

.container--menu > .row .ks.card.block.block-white, .container--menu > .row .ks.card.block.block-yellow {
    display: flex;
    flex-direction: row;
    align-items: center
}

    .container--menu > .row .ks.card.block.block-white .circle, .container--menu > .row .ks.card.block.block-yellow .circle {
        width: 74px;
        height: 74px;
        flex: 0 0 auto;
        margin-right: 8px;
        background-color: #ffd400;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center
    }

        .container--menu > .row .ks.card.block.block-white .circle.padding-1, .container--menu > .row .ks.card.block.block-yellow .circle.padding-1 {
            padding: 8px
        }

        .container--menu > .row .ks.card.block.block-white .circle.padding-2, .container--menu > .row .ks.card.block.block-yellow .circle.padding-2 {
            padding: 16px
        }

@media screen and (max-width: 767px) {
    .container--menu > .row .ks.card.block.block-white .circle, .container--menu > .row .ks.card.block.block-yellow .circle {
        width: 50px;
        height: 50px;
        padding: 4px
    }

        .container--menu > .row .ks.card.block.block-white .circle.padding-2, .container--menu > .row .ks.card.block.block-yellow .circle.padding-2 {
            padding: 10px
        }
}

.container--menu > .row .ks.card.block.block-white .circle img, .container--menu > .row .ks.card.block.block-yellow .circle img {
    width: 100%;
    height: auto;
    max-width: 100%
}

.container--menu > .row .ks.card.block.block-white .content, .container--menu > .row .ks.card.block.block-yellow .content {
    width: 100%
}

    .container--menu > .row .ks.card.block.block-white .content > .header, .container--menu > .row .ks.card.block.block-yellow .content > .header {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .container--menu > .row .ks.card.block.block-white .content > .header > .title, .container--menu > .row .ks.card.block.block-yellow .content > .header > .title {
            font-family: SukhumvitSet;
            font-size: 20px;
            font-weight: 600;
            color: black
        }

        .container--menu > .row .ks.card.block.block-white .content > .header > .arrow, .container--menu > .row .ks.card.block.block-yellow .content > .header > .arrow {
            font-size: 24px;
            font-weight: 600
        }

@media screen and (max-width: 767px) {
    .container--menu > .row .ks.card.block.block-white .content > .header > .arrow, .container--menu > .row .ks.card.block.block-yellow .content > .header > .arrow {
        margin-top: 15px
    }
}

.container--menu > .row .ks.card.block.block-white .content .description, .container--menu > .row .ks.card.block.block-yellow .content .description {
    font-family: Thongterm-Roman;
    font-size: 12px;
    font-weight: normal;
    color: #949494
}

@media screen and (max-width: 767px) {
    .container--menu > .row .ks.card.block.block-white .content .description, .container--menu > .row .ks.card.block.block-yellow .content .description {
        color: #554242;
        font-size: 14px
    }
}

.container--menu > .row .ks.card.block.block-yellow {
    border-radius: 5px;
    padding: 16px 0;
    justify-content: center
}

@media screen and (max-width: 767px) {
    .container--menu > .row .ks.card.block.block-yellow {
        padding: 16px !important;
        justify-content: flex-start
    }
}

@media screen and (min-width: 768px) and (max-width:1199px) {
    .container--menu > .row .ks.card.block.block-yellow {
        justify-content: unset;
        padding-left: 16px
    }
}

.container--menu > .row .ks.card.block.block-yellow .content {
    width: unset
}

@media screen and (max-width: 767px) {
    .container--menu > .row .ks.card.block.block-yellow .content .description {
        color: #3a3a3a
    }
}

.container--exchange-and-calculator {
    padding: 24px;
    border: 1px solid #e8e8e8;
    height: 100%
}

    .container--exchange-and-calculator .exchange, .container--exchange-and-calculator .calculator {
        padding-right: 0
    }

    .container--exchange-and-calculator .exchange {
        border-right: 1px solid #dee2e6 !important
    }

    .container--exchange-and-calculator .content {
        padding-right: 16px
    }

@media screen and (max-width: 767px) {
    .container--exchange-and-calculator {
        padding: 0;
        border: none
    }

        .container--exchange-and-calculator .exchange, .container--exchange-and-calculator .calculator {
            padding-right: 16px
        }

        .container--exchange-and-calculator .calculator {
            margin-top: 16px;
            margin-bottom: 32px
        }

        .container--exchange-and-calculator .exchange {
            border-right: none !important
        }

        .container--exchange-and-calculator .content {
            padding-right: 0
        }
}

.container--content {
    margin: auto;
    margin-top: 40px;
    margin-bottom: 80px;
    max-width: 1170px
}

@media screen and (max-width: 767px) {
    .container--content {
        margin-top: 24px
    }
}

.container--content .image {
    position: relative;
    overflow: hidden;
    width: 100%
}

    .container--content .image img {
        width: 100%;
        height: auto
    }

.container--content.section {
    width: 100%;
    position: relative
}

.container--content.max-height-1317 {
    max-height: 1317px;
    overflow: hidden
}

.container--content .content-wrapper {
    max-width: 1170px;
    margin: auto
}

.container--content .ksgift--section {
    position: absolute;
    width: 100%;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
    max-width: 1170px
}

    .container--content .ksgift--section .circle {
        width: 120px;
        height: 120px;
        background-color: white;
        border: 8px solid #554242;
        border-radius: 50%;
        display: flex;
        flex-shrink: 0
    }

    .container--content .ksgift--section .square {
        width: 120px;
        height: 130px;
        background-color: white;
        border: 8px solid #554242;
        border-radius: 10px;
        display: flex;
        flex-shrink: 0
    }

    .container--content .ksgift--section .plus {
        margin: 0 6px;
        margin-top: 2px
    }

    .container--content .ksgift--section.section2 {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 83px;
        padding-bottom: 79px;
        position: relative
    }

@media screen and (max-width: 767px) {
    .container--content .ksgift--section.section2 {
        padding-top: 24px;
        padding-bottom: 48px
    }
}

.container--content .ksgift--section.section3 {
    padding: 48px 16px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto
}

@media screen and (max-width: 767px) {
    .container--content .ksgift--section.section3 {
        padding: 48px 16px
    }
}

.container--content .ksgift--section .ksgift-channel {
    border-radius: 3px;
    background-color: rgba(255,255,255,.6);
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
    margin-left: -15px;
    margin-right: -15px
}

    .container--content .ksgift--section .ksgift-channel .block {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        margin: auto;
        min-height: 100px;
        padding: 24px
    }

        .container--content .ksgift--section .ksgift-channel .block > div {
            font-family: Krungsri;
            font-size: 18px;
            font-weight: bold;
            font-style: normal;
            font-stretch: condensed;
            line-height: normal;
            letter-spacing: normal;
            text-align: center;
            color: #5a5a5a
        }

@media screen and (max-width: 767px) {
    .container--content .ksgift--section .ksgift-channel .block {
        border: .5px solid rgba(243,243,243,.7)
    }
}

.container--content .ksgift--section .ksgift--section__title {
    font-family: Thongterm;
    font-size: 24px;
    font-weight: bold;
    color: #222;
    text-align: center
}

.container--content .ksgift--section .container--icon-text {
    display: inline-flex;
    width: 120px;
    height: 120px;
    font-size: 70px;
    background-color: #554242;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding-bottom: 2px
}

    .container--content .ksgift--section .container--icon-text > i {
        margin: auto;
        color: #ffd400
    }

        .container--content .ksgift--section .container--icon-text > i::before {
            margin: auto
        }

@media screen and (max-width: 767px) {
    .container--content .ksgift--section .container--icon-text {
        width: 78px;
        height: 78px;
        font-size: 40px;
        padding: 4px;
        padding-bottom: 6px
    }

        .container--content .ksgift--section .container--icon-text.padding-2 {
            padding: 10px
        }
}

.container--content .big-circle {
    height: auto;
    width: 100%
}

.container--pagination {
    margin-top: 56px !important;
    margin-bottom: 123px !important;
    max-width: 1170px;
    margin: auto
}

@media screen and (max-width: 767px) {
    .container--pagination {
        margin-bottom: 72px !important
    }
}

.container--news {
    max-width: 1170px;
    margin: auto
}

.container--contact {
    background-color: #fcfcfc;
    border: solid 1px #e8e8e8;
    padding: 32px
}

@media screen and (max-width: 767px) {
    .container--contact {
        padding: 24px 16px !important
    }
}

.livechat {
    flex: 1 1 auto;
    text-align: right;
    width: 100%
}

    .livechat .btn {
        width: 100%
    }

.livechat-floating-mobile {
    display: none
}

.owl-carousel .owl-stage {
    padding-left: 0 !important
}

.ks-footer-nav-1 {
    width: 100%;
    background-color: #f3f3f3;
    margin: auto
}

    .ks-footer-nav-1 .header {
        margin-bottom: 16px
    }

        .ks-footer-nav-1 .header a, .ks-footer-nav-1 .header span {
            font-family: Krungsri-Condensed-Bold;
            font-size: 20px;
            font-weight: bold;
            font-style: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: normal;
            color: #222;
            border-bottom: 2px solid #ffd400
        }

    .ks-footer-nav-1 .content .item {
        margin-top: 8px
    }

        .ks-footer-nav-1 .content .item a {
            font-family: Thongterm-Roman;
            font-size: 14px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 26px;
            letter-spacing: normal;
            color: #545454;
            text-decoration: none;
            outline: none
        }

    .ks-footer-nav-1 .content .social {
        margin-top: 8px
    }

        .ks-footer-nav-1 .content .social .content {
            display: flex
        }

            .ks-footer-nav-1 .content .social .content a {
                color: #5b5b5b;
                flex: 0 0 auto;
                font-size: 18px;
                margin-right: 8px;
                text-decoration: none;
                outline: none
            }

.ks-footer-nav-2 {
    max-width: 1200px;
    margin: auto;
    padding-top: 16px
}

    .ks-footer-nav-2 .site-footer .content {
        display: flex;
        justify-content: space-between
    }

        .ks-footer-nav-2 .site-footer .content, .ks-footer-nav-2 .site-footer .content a, .ks-footer-nav-2 .site-footer .content span {
            padding: 0 16px;
            white-space: nowrap;
            font-family: Krungsri-Condensed-Medium;
            font-size: 14px;
            font-weight: 500;
            font-stretch: condensed;
            line-height: 22px;
            letter-spacing: normal;
            color: #5a5a5a
        }

            .ks-footer-nav-2 .site-footer .content .center {
                display: flex;
                justify-content: center;
                text-align: center;
                padding: 16px;
                padding-right: 0;
                flex: 1 1 auto;
                flex-flow: row
            }

    .ks-footer-nav-2 .site-footer .footer-links {
        display: flex;
        justify-content: space-between;
        font-family: Krungsri-Condensed-Medium;
        font-size: 12px;
        margin-bottom: 5px;
        line-height: 22px;
        color: #5a5a5a
    }

        .ks-footer-nav-2 .site-footer .footer-links a {
            color: #5a5a5a
        }

        .ks-footer-nav-2 .site-footer .footer-links > div {
            flex: 1 1 auto
        }

            .ks-footer-nav-2 .site-footer .footer-links > div:nth-child(2) {
                flex: 2 1 auto
            }

    .ks-footer-nav-2 .site-footer .goTop {
        margin: 22px 0
    }

        .ks-footer-nav-2 .site-footer .goTop .arrow {
            font-size: 32px;
            margin-bottom: -12px
        }

        .ks-footer-nav-2 .site-footer .goTop .header {
            color: #3a3a3a;
            font-family: Krungsri;
            font-size: 12px;
            font-weight: 500;
            font-stretch: condensed
        }

.max-width-1200 {
    max-width: 1200px;
    margin: auto
}

@media screen and (min-width: 1199px) {
    .menu--content .menu--bars {
        display: none
    }

    .menu--content-mobile {
        display: block !important
    }

        .menu--content-mobile .mobile-menu, .menu--content-mobile .mobile-menu-extionsions, .menu--content-mobile .mobile-menu-languages {
            display: none !important
        }
}

@media screen and (max-width: 1199px) {
    body {
        margin-top: 0;
        padding-top: 60px
    }

    .ks-content-wrapper {
        max-width: 100%;
        margin: auto
    }

    .ks-top-nav .menu--content .menu--customer-type, .ks-top-nav .menu--content .menu--extension, .ks-top-nav .menu--content .menu--logon {
        display: none !important
    }

    .ks-top-nav .menu--content-mobile {
        margin-left: -15px;
        margin-right: -15px;
        position: fixed;
        width: 100%;
        background-color: #fff;
        height: 94%;
        overflow-x: hidden;
        overflow-y: auto
    }

        .ks-top-nav .menu--content-mobile .mobile-menu {
            background-color: #6f5f5e
        }

        .ks-top-nav .menu--content-mobile .customper-type {
            cursor: pointer;
            padding-bottom: 16px;
            margin-bottom: 0;
            font-family: Krungsri-Condensed-Medium
        }

            .ks-top-nav .menu--content-mobile .customper-type .menu-arrow {
                display: none;
                content: "";
                width: 0;
                height: 0;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-bottom: 10px solid #fff;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                line-height: 0;
                -webkit-backdrop-filter: blur(23.2px);
                backdrop-filter: blur(23.2px);
                box-shadow: 0 1px 1px 0 rgba(90,90,90,.05);
                margin: 0 auto
            }

                .ks-top-nav .menu--content-mobile .customper-type .menu-arrow.yellow {
                    border-bottom: 10px solid #ffd400
                }

            .ks-top-nav .menu--content-mobile .customper-type.active {
                color: #ffc800 !important;
                font-family: Krungsri-Condensed-Bold
            }

                .ks-top-nav .menu--content-mobile .customper-type.active i {
                    display: block
                }

    .ks-top-nav .menu--bars {
        position: relative
    }

        .ks-top-nav .menu--bars .menu--bars--search {
            position: fixed;
            right: 80px;
            display: none;
            width: calc(100% - 100px);
            transition: width .3s ease;
            border: 0
        }

        .ks-top-nav .menu--bars buttom {
            float: right
        }

    .ks-top-nav .submenu--content {
        height: auto;
        background: #fff;
        position: relative
    }

        .ks-top-nav .submenu--content .group.active {
            display: block
        }

            .ks-top-nav .submenu--content .group.active .item {
                flex: none
            }

                .ks-top-nav .submenu--content .group.active .item .content {
                    border-right: 0;
                    border-bottom: 1px solid #e8e8e8;
                    margin-left: 24px;
                    margin-right: 24px;
                    padding: 0 8px;
                    min-height: 54px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center
                }

                    .ks-top-nav .submenu--content .group.active .item .content .header {
                        font-size: 14px;
                        width: 100%
                    }

                    .ks-top-nav .submenu--content .group.active .item .content .description {
                        font-size: 12px;
                        width: 100%;
                        color: #9b9b9b
                    }

                .ks-top-nav .submenu--content .group.active .item.active {
                    font-weight: normal
                }

                    .ks-top-nav .submenu--content .group.active .item.active:hover {
                        font-weight: bold
                    }

        .ks-top-nav .submenu--content #smLogin {
            background-color: #ffd400
        }

            .ks-top-nav .submenu--content #smLogin .item {
                font-weight: bold
            }

                .ks-top-nav .submenu--content #smLogin .item .content {
                    border-bottom: 1px solid #ffc800
                }

    .ks-top-nav .mobile-menu-languages {
        margin: 40px 32px 24px 32px
    }

        .ks-top-nav .mobile-menu-languages a:hover {
            color: #5a5a5a;
            font-weight: 500
        }

    .ks-footer-nav-1 .ks-content-wrapper .container-fluid .row div.col-xl-3 {
        padding-bottom: 32px
    }

        .ks-footer-nav-1 .ks-content-wrapper .container-fluid .row div.col-xl-3:nth-child(4) {
            padding-bottom: 16px
        }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    body {
        padding-top: 48px
    }

    .ks-top-nav {
        height: 48px
    }

        .ks-top-nav .menu--content {
            padding-top: 4px;
            padding-bottom: 4px;
            height: 48px
        }

            .ks-top-nav .menu--content .menu--logo {
                flex: 0 0 auto
            }

               /*   disable 2025-02-21 to use MasterpageKrungsri (personal.css)
               .ks-top-nav .menu--content .menu--logo img {
                    width: 77px;
                    height: 26px;
                    max-height: none;
                    max-width: 100%
                }*/

        .ks-top-nav .menu--content-mobile {
            margin-left: -15px;
            margin-right: -15px;
            position: fixed;
            width: 100%;
            background-color: #fff;
            height: 94%;
            overflow-x: hidden;
            overflow-y: auto
        }

            .ks-top-nav .menu--content-mobile .mobile-menu {
                background-color: #6f5f5e
            }

            .ks-top-nav .menu--content-mobile .customper-type {
                cursor: pointer;
                padding-bottom: 16px;
                margin-bottom: 0
            }

                .ks-top-nav .menu--content-mobile .customper-type .menu-arrow {
                    display: none;
                    content: "";
                    width: 0;
                    height: 0;
                    border-left: 12px solid transparent;
                    border-right: 12px solid transparent;
                    border-bottom: 10px solid #fff;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    line-height: 0;
                    -webkit-backdrop-filter: blur(23.2px);
                    backdrop-filter: blur(23.2px);
                    box-shadow: 0 1px 1px 0 rgba(90,90,90,.05);
                    margin: 0 auto
                }

                    .ks-top-nav .menu--content-mobile .customper-type .menu-arrow.yellow {
                        border-bottom: 10px solid #ffd400
                    }

                .ks-top-nav .menu--content-mobile .customper-type.active {
                    color: #ffc800 !important;
                    font-weight: bold
                }

                    .ks-top-nav .menu--content-mobile .customper-type.active i {
                        display: block
                    }

        .ks-top-nav .menu--bars {
            position: relative
        }

            .ks-top-nav .menu--bars .menu--bars--search {
                position: fixed;
                top: 4px;
                right: 80px;
                display: none;
                width: calc(100% - 80px);
                transition: width .3s ease
            }

                .ks-top-nav .menu--bars .menu--bars--search input.prompt {
                    height: 42px
                }

            .ks-top-nav .menu--bars .navbar-toggler {
                font-size: 16px
            }

            .ks-top-nav .menu--bars buttom {
                float: right
            }

        .ks-top-nav .submenu--content {
            height: auto;
            background: #fff;
            position: relative
        }

            .ks-top-nav .submenu--content .group.active {
                display: block
            }

                .ks-top-nav .submenu--content .group.active .item {
                    flex: none
                }

                    .ks-top-nav .submenu--content .group.active .item .content {
                        border-right: 0;
                        border-bottom: 1px solid #e8e8e8;
                        margin-left: 24px;
                        margin-right: 24px;
                        padding: 0 8px;
                        min-height: 54px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center
                    }

                        .ks-top-nav .submenu--content .group.active .item .content .header {
                            font-size: 14px;
                            width: 100%
                        }

                        .ks-top-nav .submenu--content .group.active .item .content .description {
                            font-size: 12px;
                            width: 100%
                        }

                    .ks-top-nav .submenu--content .group.active .item.active {
                        font-weight: normal
                    }

                        .ks-top-nav .submenu--content .group.active .item.active:hover {
                            font-weight: bold
                        }

            .ks-top-nav .submenu--content #smLogin {
                background-color: #ffd400
            }

                .ks-top-nav .submenu--content #smLogin .item {
                    font-weight: bold
                }

                    .ks-top-nav .submenu--content #smLogin .item .content {
                        border-bottom: 1px solid #ffc800
                    }

        .ks-top-nav .mobile-menu-languages {
            margin: 40px 32px 24px 32px
        }

            .ks-top-nav .mobile-menu-languages a, .ks-top-nav .mobile-menu-languages label {
                font-family: Krungsri;
                font-size: 12px;
                color: #9b9b9b;
                padding-right: 24px;
                font-weight: 500
            }

                .ks-top-nav .mobile-menu-languages a.active, .ks-top-nav .mobile-menu-languages label.active {
                    color: #5a5a5a;
                    font-weight: 500
                }

                .ks-top-nav .mobile-menu-languages a:hover {
                    color: #5a5a5a;
                    font-weight: 500
                }

    .ks-footer-nav-2 .meta {
        margin-top: 0
    }
}

@media screen and (min-width: 768px) {
    .desktop-align-vertical-center {
        align-items: center
    }

    .desktop-align-center {
        text-align: center;
        margin-left: auto;
        margin-right: auto
    }

    .owl-theme.fade-right .owl-stage-outer:after {
        display: none
    }
}

@media screen and (max-width: 767px) {
    body {
        padding-top: 48px
    }

    table > thead > tr > th {
        font-size: 12px;
        padding: 5px !important
    }

    table > tbody > tr > td {
        font-size: 12px;
        padding: 10px !important
    }

    .ks-content-wrapper {
        max-width: 100%
    }

    .menu--content .menu--customer-type, .menu--content .menu--extension, .menu--content .menu--logon {
        display: none !important
    }

    .container--banner .owl-item .item {
        width: 100%;
        min-height: unset
    }

        .container--banner .owl-item .item .block-banner {
            width: 100%
        }

            .container--banner .owl-item .item .block-banner .image {
                min-height: unset
            }

    .container--banner .owl-dots {
        display: block;
        position: absolute;
        width: 100%;
        bottom: 8px
    }

    .container--title--not-used {
        min-height: 250px;
        margin-bottom: 8px
    }

        .container--title--not-used .item .ks.card.block.block-banner {
            text-align: center;
            min-height: 260px
        }

            .container--title--not-used .item .ks.card.block.block-banner .content {
                padding: 0;
                left: 0 !important;
                bottom: 0 !important;
                position: relative;
                margin: auto 0
            }

        .container--title--not-used .item .ks.card.block .align-bottom {
            position: absolute;
            bottom: 40px
        }

        .container--title--not-used .owl-dots {
            bottom: 8px !important
        }

    .ks-top-nav {
        height: 48px
    }

        .ks-top-nav .menu--content {
            padding-top: 4px;
            padding-bottom: 4px;
            height: 48px
        }

            .ks-top-nav .menu--content .menu--logo {
                flex: 0 0 auto
            }

        /* disable 2025-02-21 to use MasterpageKrungsri (personal.css)
            .ks-top-nav .menu--content .menu--logo img {
                    width: 77px;
                    height: 26px;
                    max-height: none;
                    max-width: 100%
                }*/

        .ks-top-nav .menu--content-mobile {
            margin-left: -15px;
            margin-right: -15px;
            position: fixed;
            width: 100%;
            background-color: #fff;
            height: 94%;
            overflow-x: hidden;
            overflow-y: auto
        }

            .ks-top-nav .menu--content-mobile .mobile-menu {
                background-color: #6f5f5e
            }

            .ks-top-nav .menu--content-mobile .customper-type {
                cursor: pointer;
                padding-bottom: 16px;
                margin-bottom: 0
            }

                .ks-top-nav .menu--content-mobile .customper-type .menu-arrow {
                    display: none;
                    content: "";
                    width: 0;
                    height: 0;
                    border-left: 12px solid transparent;
                    border-right: 12px solid transparent;
                    border-bottom: 10px solid #fff;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    line-height: 0;
                    -webkit-backdrop-filter: blur(23.2px);
                    backdrop-filter: blur(23.2px);
                    box-shadow: 0 1px 1px 0 rgba(90,90,90,.05);
                    margin: 0 auto
                }

                    .ks-top-nav .menu--content-mobile .customper-type .menu-arrow.yellow {
                        border-bottom: 10px solid #ffd400
                    }

                .ks-top-nav .menu--content-mobile .customper-type.active {
                    color: #ffc800 !important;
                    font-weight: bold
                }

                    .ks-top-nav .menu--content-mobile .customper-type.active i {
                        display: block
                    }

        .ks-top-nav .menu--bars {
            position: relative
        }

            .ks-top-nav .menu--bars .menu--bars--search {
                position: fixed;
                left: 16px;
                display: none;
                min-width: 182px;
                width: calc(100% - 80px);
                max-width: 100%;
                transition: width .3s ease;
                z-index: 1
            }

                .ks-top-nav .menu--bars .menu--bars--search .ui.search, .ks-top-nav .menu--bars .menu--bars--search .ui.search input {
                    height: 34px
                }

            .ks-top-nav .menu--bars .navbar-toggler {
                font-size: 16px
            }

            .ks-top-nav .menu--bars buttom {
                float: right
            }

        .ks-top-nav .submenu--content {
            height: auto;
            background: #fff;
            position: relative
        }

            .ks-top-nav .submenu--content .group.active {
                display: block
            }

                .ks-top-nav .submenu--content .group.active .item {
                    flex: none
                }

                    .ks-top-nav .submenu--content .group.active .item .content {
                        border-right: 0;
                        border-bottom: 1px solid #e8e8e8;
                        margin-left: 24px;
                        margin-right: 24px;
                        padding: 0 8px;
                        min-height: 54px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center
                    }

                        .ks-top-nav .submenu--content .group.active .item .content .header {
                            font-size: 14px;
                            width: 100%
                        }

                        .ks-top-nav .submenu--content .group.active .item .content .description {
                            font-size: 12px;
                            width: 100%
                        }

                    .ks-top-nav .submenu--content .group.active .item.active {
                        font-weight: normal
                    }

                        .ks-top-nav .submenu--content .group.active .item.active:hover {
                            font-weight: bold
                        }

            .ks-top-nav .submenu--content #smLogin {
                background-color: #ffd400
            }

                .ks-top-nav .submenu--content #smLogin .item {
                    font-weight: bold
                }

                    .ks-top-nav .submenu--content #smLogin .item .content {
                        border-bottom: 1px solid #ffc800
                    }

        .ks-top-nav .mobile-menu-languages {
            margin: 40px 32px 24px 32px
        }

            .ks-top-nav .mobile-menu-languages a:hover {
                color: #5a5a5a;
                font-weight: 500
            }

    .ks-footer-nav-2 .meta {
        margin-top: 0
    }
}

label[for=RB4] {
    min-width: 90px
}

.row {
    text-align: unset !important;
    margin-bottom: auto !important
}

#sharedBarModal .row {
    text-align: center;
    margin-bottom: 30px
}

body {
    padding-top: 111px;
    background-color: #fff !important
}

@media screen and (max-width: 1199px) {
    body {
        margin-top: 0;
        padding-top: 48px
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    body {
        padding-top: 48px
    }
}

.ks-top-nav {
    background-color: #5a5a5a;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000
}

    .ks-top-nav .menu--content {
        max-width: 1170px;
        margin: auto;
        height: 46px;
        display: flex;
        padding-top: 0;
        padding-bottom: 0
    }

    .ks-top-nav .submenu--content .group.active {
        width: 1200px;
        display: flex;
        padding-left: 205px;
        justify-content: left;
        margin: 0 auto;
        float: left;
        width: calc(100% - 112px)
    }

@media screen and (max-width: 1199px) {
    .ks-top-nav .submenu--content .group.active {
        padding-left: 0;
        display: block
    }
}

.ks-top-nav .submenu--content .group .item {
    padding: 20px 0;
    margin: 0
}

.ks-top-nav .menu--content .menu--customer-type a i {
    display: none;
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid #5a5a5a;
    border-right: 10px solid #5a5a5a;
    border-bottom: 9px solid;
    top: 28.5px;
    left: 30%;
    position: absolute;
    line-height: 0;
    -webkit-backdrop-filter: blur(23.2px);
    backdrop-filter: blur(23.2px);
    box-shadow: 0 1px 1px 0 rgba(90,90,90,.05);
    box-shadow: none;
    margin: 0 auto
}

.ks-top-nav .menu--content .menu--customer-type a.active i {
    color: #fff;
    display: block
}

.ks-top-nav .submenu--content .group .item:hover hr, .ks-top-nav .submenu--content .group .item.active hr {
    position: absolute;
    display: block;
    bottom: -1px
}

.ks-top-nav .submenu--content .inner {
    display: block;
    justify-content: unset;
    width: 1170px;
    margin: 0 auto
}

.ks-top-nav .submenu--content .group .item .content .header {
    font-size: 16px
}

.ks-top-nav .submenu--content .group .item .content {
    padding-left: 12px;
    padding-right: 12px;
    border-right: 0 solid #ccc
}

.ks-top-nav .submenu--content .group .item hr {
    display: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 3px solid #ffd400;
    width: calc(100% - 22px)
}

.ks-top-nav .menu--content .menu--customer-type {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 0 0 auto;
    margin-left: 40px;
    padding-top: 7px;
    padding-bottom: 6px
}

.ks-top-nav .menu--content .menu--extension {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    margin-right: 0;
    margin-left: auto;
    padding-top: 7px;
    padding-bottom: 7px;
    align-items: center
}

@media screen and (max-width: 1199px) {
    .ks-top-nav .submenu--content {
        height: auto;
        background: #fff;
        position: relative
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ks-top-nav .submenu--content {
        height: auto;
        background: #fff;
        position: relative
    }
}

@media screen and (max-width: 1199px) {
    .ks-top-nav .submenu--content .group .item {
        padding: 0 0
    }

    .ks-top-nav .submenu--content .group.active .item {
        flex: none
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ks-top-nav .submenu--content .group.active .item {
        flex: none
    }
}

@media screen and (max-width: 1199px) {
    .ks-top-nav .submenu--content .group.active .item .content {
        border-right: 0;
        border-bottom: 1px solid #e8e8e8;
        margin-left: 24px;
        margin-right: 24px;
        padding: 0 8px;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%
    }

    .ks-top-nav .submenu--content .group {
        width: 1200px !important
    }

    .ks-top-nav .submenu--content .inner {
        width: 100%;
        display: flex
    }

    .ks-top-nav .submenu--content .group.active .item {
        display: flex !important
    }

    .ks-top-nav .submenu--content .group .item.active hr {
        display: none
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ks-top-nav .submenu--content .group.active .item .content {
        border-right: 0;
        border-bottom: 1px solid #e8e8e8;
        margin-left: 24px;
        margin-right: 24px;
        padding: 0 8px;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

@media screen and (max-width: 1199px) {
    .ks-top-nav {
        height: 56px;
        background-color: #fff;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
        position: fixed
    }
}

@media screen and (max-width: 1199px) {
    .ks-top-nav .menu--content {
        padding-top: 4px;
        padding-bottom: 4px;
        height: 56px;
        margin-left: -7px;
        margin-right: -7px
    }
}

.ks-top-nav .menu--content .menu--extension .nav-item.dropdown a .flag {
    width: 22px;
    height: 22px;
    border-radius: 50px;
    margin-top: -2px
}


/* disable 2025-02-21 to use MasterpageKrungsri (personal.css)
 .ks-top-nav .menu--content .menu--logo img {
    width: 165px;
    height: auto;
    max-height: none;
    max-width: 100%
}*/

@media screen and (max-width: 1199px) {
    /* disable 2025-02-21 to use MasterpageKrungsri (personal.css)
    .ks-top-nav .menu--content .menu--logo img {
        width: auto;
        height: 48px;
        max-height: none;
        max-width: 100%
    }*/

    .ks-top-nav .submenu--content .group .item:hover hr, .ks-top-nav .submenu--content .group .item.active hr {
        display: none
    }

    .ks-top-nav .submenu--content {
        z-index: 1
    }
}

.ks-top-nav .menu--content .menu--extension .menu--search .close {
    flex: 0 0 auto;
    font-family: Krungsri-Condensed-Medium;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    background-color: #5a5a5a;
    opacity: 1;
    display: flex;
    align-items: center;
    text-shadow: none
}

.ks-top-nav .menu--content .menu--extension a {
    color: #fff;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-family: Krungsri-Condensed-Medium;
    padding-right: 16px
}

.ks-top-nav .menu--content .menu--extension .menu--extension-1 {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: auto;
    color: #fff;
    border-right: 0 solid white;
    padding-right: 16px
}

    .ks-top-nav .menu--content .menu--extension .menu--extension-1:after {
        content: "";
        width: 1px;
        height: 20px;
        background-color: #fff;
        margin-left: 16px
    }

.ks-top-nav .menu--content .menu--extension .menu--extension-2 .bff {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-right: 0;
    padding-right: 0;
    padding-top: 2px
}

    .ks-top-nav .menu--content .menu--extension .menu--extension-2 .bff:after {
        content: "";
        width: 2px;
        height: 20px;
        background-color: #fff;
        margin-left: 16px
    }

.dropdown .btn.dropdown-toggle {
    font-family: 'SukhumvitSet-Bold'
}

    .dropdown .btn.dropdown-toggle:after {
        content: unset;
        float: none;
        border: initial;
        vertical-align: middle;
        margin-left: auto;
        width: auto;
        height: auto
    }

.ks.profile-image > img, .ks.profile-image img {
    width: 20px;
    height: 20px;
    border-radius: 50%
}

.ks.profile-image {
    display: inline;
    margin-right: 0
}

.ks-top-nav .menu--content .menu--extension .nav-item.dropdown .dropdown-menu.show {
    min-width: 79px;
    transform: translate3d(5px,28px,0) !important;
    border: 0 solid rgba(0,0,0,.15);
    top: 3px !important;
    right: 0;
    left: auto !important
}

    .ks-top-nav .menu--content .menu--extension .nav-item.dropdown .dropdown-menu.show .dropdown-item {
        border-bottom: 0 solid #e8e8e8;
        min-height: 34px;
        padding-bottom: 0
    }

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 8px;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    font-family: 'Font Awesome 5 Pro'
}

.menu--bars div.btn.btn-primary.btn-xs {
    margin-top: -8px;
    font-size: 16px;
    line-height: 30px
}

.ks-top-nav .submenu--content .menu--logon .dropdown a.btn.--width-default {
    width: 112px;
    font-size: 16px;
    line-height: 27px;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
    font-family: Krungsri-Condensed-Bold;
}

    .ks-top-nav .submenu--content .menu--logon .dropdown a.btn.--width-default: after {
        content: "";
        font-family: 'Font Awesome 5 Pro';
        font-weight: 400;
        margin-top: 48px;
    }

.ks-top-nav .submenu--content .menu--logon .dropdown.show a.btn.--width-default: after {
    content: ""
}

.ks-top-nav .submenu--content .menu--logon .dropdown a.btn.--width-default i {
    font-size: 20px;
}

.ks-top-nav .submenu--content .menu--logon .dropdown .dropdown-menu.show {
    top: 43px !important;
    left: auto !important;
    right: 0 !important;
    transform: translate3d(0,0,0) !important;
    min-width: 170px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding-top: 8px;
    padding-bottom: 8px
}

    .ks-top-nav .submenu--content .menu--logon .dropdown .dropdown-menu.show .dropdown-item {
        color: #5a5a5a;
        font-family: Thongterm-Roman;
        font-size: 16px;
        line-height: 30px;
        border-bottom: 0 solid #e8e8e8;
        padding-right: 6px;
        padding-left: 16px;
        padding-top: 4px;
        padding-bottom: 4px;
        min-height: auto
    }

        .ks-top-nav .submenu--content .menu--logon .dropdown .dropdown-menu.show .dropdown-item:active {
            background-color: #f3f3f3 !important;
            color: #5a5a5a !important
        }

.ks-top-nav .menu--bars .dropdown div.btn.btn-primary:hover {
    background-color: #ffd400 !important
}

.ks-top-nav .menu--bars .dropdown .dropdown-menu.dropdown-signin-m.show {
    top: -4px !important;
    left: -48px !important;
    border-radius: 4px
}

.dropdown-menu.show .dropdown-item:active {
    background-color: inherit !important;
    color: inherit !important
}

.ks-footer-nav-1 .social.mobile {
    padding-top: 24px;
    padding-bottom: 24px
}

    .ks-footer-nav-1 .social.mobile a {
        color: #5b5b5b;
        flex: 0 0 auto;
        font-size: 18px;
        margin-left: 11px;
        margin-right: 11px;
        text-decoration: none;
        outline: none
    }

.ks-footer-nav-2 .site-footer .footer-links {
    width: 221px;
    margin: 0 auto;
    margin-bottom: 5px
}

    .ks-footer-nav-2 .site-footer .footer-links > div:nth-child(2) {
        flex: auto
    }

    .ks-footer-nav-2 .site-footer .footer-links .border-right {
        border-right: 0 !important;
        background: url(/Krungsri2020/media/images/line-1px.jpg) center right no-repeat
    }

.ks-footer-nav-2 #footer2-on-mobile {
    padding-top: 8px;
    padding-bottom: 24px
}

    .ks-footer-nav-2 #footer2-on-mobile .meta {
        font-size: 12px;
        line-height: 22px;
        font-family: Krungsri-Condensed-Medium;
        color: #5a5a5a;
        text-align: center
    }

.ks-top-nav .mobile-menu-extionsions .inner > a {
    display: block;
    margin-bottom: 8px;
    font-family: Thongterm-Roman;
    font-size: 14px;
    line-height: 26px;
    color: #545454
}

.ks-top-nav .mobile-menu-extionsions {
    background: #f3f3f3
}

    .ks-top-nav .mobile-menu-extionsions .inner {
        padding: 16px 32px 16px 32px
    }

.ks-top-nav .mobile-menu-languages {
    margin: 16px 32px 24px 32px;
    background-color: #fff;
    text-align: center;
    display: -ms-inline-flexbox;
    display: inline-flex
}

    .ks-top-nav .mobile-menu-languages div {
        display: inline-block;
        margin-left: 12px;
        margin-right: 12px;
        color: #949494;
        font-family: Thongterm-Roman;
        font-size: 14px;
        line-height: 26px
    }

        .ks-top-nav .mobile-menu-languages div.active {
            color: #545454;
            background-color: #ffd400;
            border-radius: 50px;
            width: 32px;
            height: 32px;
            line-height: 32px;
            font-family: Thongterm-Bold
        }

.sub-level2 {
    transition: transform .4s ease,-webkit-transform .4s ease;
    animation-duration: .3s
}

    .sub-level2 .active {
        display: block !important
    }

    .sub-level2 .sub-item {
        padding-bottom: 8px
    }

    .sub-level2 .sub-head {
        color: #545454;
        font-family: Krungsri-Condensed-Bold;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 30px;
        margin-top: 24px;
        margin-bottom: 8px
    }

fadeInRight {
    0%

{
    opacity: 0;
    -webkit-transform: translateX(200px);
    transform: translateX(200px)
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

}

fadeInRight {
    0%

{
    opacity: 0;
    -webkit-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px)
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

}

.accordion#accordionMenu .collapse .card-body .item:first-child {
    font-family: Thongterm-Bold;
    color: #545454
}

    .accordion#accordionMenu .collapse .card-body .item:first-child:after {
        content: ""
    }

.accordion#accordionMenu .collapsing .card-body .item:first-child {
    font-family: Thongterm-Bold
}

    .accordion#accordionMenu .collapsing .card-body .item:first-child:after {
        content: ""
    }

.ks-footer-nav-1 .content .social a:hover img {
    background: #ffd400;
    border-radius: 50px
}

.ui.dropdown > .dropdown.icon:before {
    content: "" !important;
    font-family: "Font Awesome 5 Pro";
    font-size: 16px;
    line-height: 16px;
    color: #5a5a5a
}

.ui.dropdown > .text {
    color: #5a5a5a !important
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.text-ellipsis-2line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal
}

.text-ellipsis-2line-i {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important
}

.ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon {
    padding-right: 16px;
    top: 13px
}

.ui.selection.dropdown, .form-control {
    border: 1px solid #e8e8e8
}

#accordionMenu.accordion .collapse .card-body .item:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 20px;
    content: "";
    float: right;
    position: absolute;
    right: 20px;
    color: #5b5b5b;
    z-index: 0
}

#accordionMenu.accordion .collapsing .card-body .item:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 20px;
    content: "";
    float: right;
    position: absolute;
    right: 20px;
    color: #5b5b5b;
    z-index: 0
}

.CMSBreadCrumbsSeparator:before {
    display: inline-block;
    padding: 0 10px;
    content: "";
    font-weight: 300;
    font-family: "Font Awesome 5 Pro";
    font-size: 18px;
    line-height: normal;
    position: relative;
    top: 2px
}

.CMSBreadCrumbsLink {
    color: #545454;
    font-size: 14px;
    line-height: 26px;
    font-family: Thongterm-Roman
}

.CMSBreadCrumbsCurrentItem {
    color: #545454;
    font-size: 14px;
    line-height: 26px;
    font-family: Thongterm-Bold
}

@media(max-width: 1199px) {
    .ks-top-nav .submenu--content {
        display: none !important
    }
}

@media(max-width: 767px) {
    .text-ellipsis-m {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block
    }

    .CMSBreadCrumbsLink {
        font-size: 12px;
        line-height: 24px
    }

    .CMSBreadCrumbsCurrentItem {
        font-size: 12px;
        line-height: 24px
    }

    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto !important
    }
}

.ui.selection.dropdown:hover {
    border-color: #ffd400
}

.ks.card {
    flex: 1 1 auto;
    border-radius: 0;
    padding: 0
}

    .ks.card.download .badge {
        background-color: #ffc800;
        color: #fff
    }

.container--breadcrumb {
    max-width: 1170px;
    margin: auto;
    padding-top: 8px;
    margin-bottom: 8px
}

.container--header {
    max-width: 1170px;
    margin: auto;
    margin-top: 16px;
    margin-bottom: 16px
}

.container--content .accordion .card .card-header .btn {
    font-size: 20px;
    line-height: 30px
}

.bg-gray-xl {
    background-color: #f9f9f9
}

@media(max-width: 767px) {
    .bg-gray-xl {
        background-color: inherit
    }

    .container--content .accordion .card .card-header .btn {
        font-size: 18px
    }
}

.nav-menu-mobile .btn-secondary-menu {
    color: #554242;
    font-family: Krungsri-Condensed-Bold;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
    background-color: #ffd400;
    padding: 8px;
    border-radius: 3px;
    width: 270px
}

.nav-menu-mobile.fixed-menu-mobile {
    position: fixed;
    background-color: #fff;
    z-index: 30;
    width: 100%;
    top: 55px;
    left: 0;
    right: 0;
    padding-top: 16px;
    margin-top: 0
}

    .nav-menu-mobile.fixed-menu-mobile .mb-40px-all {
        margin-bottom: 16px
    }

.nav-secondary-menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    z-index: 99999
}

    .nav-secondary-menu .closebtn {
        position: absolute;
        top: 14px;
        right: 20px;
        font-size: 24px;
        margin-left: 50px
    }

.container-title {
    color: #222;
    font-family: Krungsri-Condensed-Bold;
    font-size: 20px;
    line-height: 30px;
    background-color: #f3f3f3;
    padding: 16px;
    margin-bottom: 4px
}

.list-group .list-group-item.active {
    background-color: #ffd400
}

.list-group .sub-item {
    background: #fff;
    border-left: 3px solid #fff;
    color: #545454;
    font-family: Thongterm-Roman;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px;
    padding: 16px
}

    .list-group .sub-item a {
        color: #545454
    }

    .list-group .sub-item.active {
        border-left: 3px solid #ffd400;
        font-family: Thongterm-Bold
    }

.list-group .list-group-item.list-group-item-action.arrow {
    padding-right: 44px
}

    .list-group .list-group-item.list-group-item-action.arrow:after {
        font-family: "Font Awesome 5 Pro";
        font-size: 16px;
        content: "";
        float: right;
        position: absolute;
        top: 16.5px;
        right: 16px;
        color: #5b5b5b
    }

.list-group .list-group-item.list-group-item-action.active.arrow:after {
    content: ""
}

@media(max-width: 767px) {
    .list-group .list-group-item.list-group-item-action {
        padding: 8px;
        background: #fff;
        padding-left: 32px
    }

    .list-group .list-group-item.active {
        background-color: #ffd400
    }

    .container-title {
        color: #222;
        font-family: Krungsri-Condensed-Bold;
        font-size: 18px;
        line-height: 30px;
        background-color: #fff;
        margin-bottom: 0
    }

    .list-group .sub-item {
        padding: 8px;
        padding-left: 30px
    }

        .list-group .sub-item.active {
            margin-left: 16px;
            padding-left: 16px
        }

    .list-group .list-group-item.list-group-item-action.arrow:after {
        top: 9.5px
    }
}

.container--content {
    max-width: 1170px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 80px
}

.ks.card.download {
    border: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
    margin-bottom: 16px;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    border-radius: 3px
}

    .ks.card.download .download-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 25px;
        max-height: 50%;
        height: 50%;
        margin-top: 10px;
        width: auto
    }

.download-icon.icon-big:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: "";
    font-size: 24px;
    color: ##5b5b5b;
    width: 28px;
    height: 28px;
    text-align: center
}

.ks.card.download .content {
    padding-left: 24px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    border-left: 1px solid #bbb;
    overflow: hidden;
    align-self: center;
    height: auto;
    width: auto
}

    .ks.card.download .content .filename {
        font-weight: bold;
        vertical-align: bottom;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        color: #222;
        font-family: Thongterm-Bold;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 34px
    }

    .ks.card.download .content .datetime {
        color: #5a5a5a;
        font-size: 14px;
        line-height: 30px
    }

.ks.card.download .filetype {
    height: 18px;
    border-radius: 3px;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: auto;
    margin-right: 22px;
    align-self: center
}

@media screen and (max-width: 767px) {
    .ks.card.download {
        align-items: normal
    }

        .ks.card.download .download-icon {
            margin: 10px 18px
        }

        .ks.card.download .content {
            flex: unset;
            max-width: 100%;
            overflow-y: hidden;
            border-left: 0;
            padding-left: 0;
            padding-right: 16px
        }

        .ks.card.download .filetype {
            width: 34px;
            height: 20px;
            border-radius: 3px;
            text-align: center;
            margin-left: 16px;
            margin-right: 16px;
            position: absolute;
            bottom: 14px
        }

    .container--banner--184px .image {
        width: 100%;
        height: 120px;
        overflow: hidden;
        position: relative
    }

        .container--banner--184px .image img {
            height: 120px;
            width: auto;
            position: absolute;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%
        }
}

@media only screen and (max-width: 767px) {
    .box-hand_touch {
        left: 50%;
        margin-left: -100px;
        position: absolute;
        vertical-align: middle;
        width: 200px;
        z-index: 999;
        cursor: pointer;
        text-align: center;
        top: 50%
    }

    .hand_touch {
        border-radius: 100%;
        background-color: #d8d8d8;
        color: #5a5a5a;
        width: 44px;
        height: 44px;
        text-align: center;
        padding: 14px
    }

    .full-width-mobile {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px
    }
}

.container--banner.container--banner--184px {
    max-height: 184px
}

    .container--banner.container--banner--184px .image {
        max-height: 184px;
        width: 100%;
        height: 184px;
        overflow: hidden;
        position: relative;
        text-align: center
    }

        .container--banner.container--banner--184px .image img {
            height: 184px
        }

.card-info.item.height122 {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    background-color: #fff;
    width: 100%
}

    .card-info.item.height122 .image {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px
    }

    .card-info.item.height122 .content {
        padding: 16px;
        height: 122px
    }

.container--cover.container--banner.banner-height-320px {
    max-height: 320px
}

    .container--cover.container--banner.banner-height-320px .image {
        width: 100%;
        height: 320px;
        overflow: hidden;
        position: relative;
        max-height: 320px
    }

        .container--cover.container--banner.banner-height-320px .image img {
            height: 320px;
            width: auto;
            position: absolute;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%
        }

.container--banner.banner-height-320px .block-banner .banner-content {
    top: -264px;
    text-shadow: none
}

    .container--banner.banner-height-320px .block-banner .banner-content .h1 {
        color: #fff;
        font-family: Krungsri-Condensed-Bold;
        font-size: 40px;
        line-height: 64px;
        text-shadow: 2px 0 1px rgba(0,0,0,.2);
        margin-bottom: 8px
    }

        .container--banner.banner-height-320px .block-banner .banner-content .h1.text-black {
            color: #222
        }

    .container--banner.banner-height-320px .block-banner .banner-content .description.text-black {
        color: #222
    }

    .container--banner.banner-height-320px .block-banner .banner-content .description {
        color: #fff;
        font-family: Thongterm-Bold;
        font-size: 24px;
        line-height: 50px
    }

    .container--banner.banner-height-320px .block-banner .banner-content .btn {
        font-family: Krungsri-Condensed-Bold;
        font-size: 16px;
        line-height: 27px;
        text-shadow: none;
        height: 44px !important;
        padding: 7px !important;
        width: 170px;
        margin-top: 32px
    }

.container--banner .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 2px !important
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
    width: 13px;
    height: 13px;
    margin-left: 12px;
    margin-right: 12px;
    background: transparent;
    border: 2px solid #fff
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffd400;
    border: 0
}

@media(max-width: 767px) {
    .container--banner.banner-height-320px .block-banner .banner-content {
        margin-bottom: 24px;
        top: auto;
        text-align: center !important;
        padding-bottom: 0
    }

        .container--banner.banner-height-320px .block-banner .banner-content .h1 {
            color: #fff;
            font-size: 24px;
            line-height: 42px;
            margin-bottom: 0
        }

        .container--banner.banner-height-320px .block-banner .banner-content .description {
            color: #fff;
            font-size: 18px;
            line-height: 36px
        }

    .container--banner.banner-height-320px .block-banner .ks-gradient {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: '';
        z-index: 1;
        opacity: unset !important;
        height: 238px;
        background: linear-gradient(180deg,rgba(90,90,90,0) 0%,rgba(0,0,0,.55) 100%);
        bottom: 0;
        top: 82px
    }
}

.container--cover.container--banner.banner-height-360px {
    max-height: 360px
}

    .container--cover.container--banner.banner-height-360px .image {
        width: 100%;
        height: 360px;
        overflow: hidden;
        position: relative;
        max-height: 360px
    }

        .container--cover.container--banner.banner-height-360px .image img {
            height: 360px;
            width: auto;
            position: absolute;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%
        }

.container--banner.banner-height-360px .block-banner .banner-content {
    top: -304px;
    text-shadow: none
}

    .container--banner.banner-height-360px .block-banner .banner-content .h1 {
        color: #222;
        font-family: Krungsri-Condensed-Bold;
        font-size: 40px;
        line-height: 60px;
        text-shadow: 2px 0 1px rgba(0,0,0,.2);
        margin-bottom: 8px
    }

    .container--banner.banner-height-360px .block-banner .banner-content .description {
        color: #222;
        font-family: Thongterm-Bold;
        font-size: 24px;
        line-height: 36px
    }

    .container--banner.banner-height-360px .block-banner .banner-content .btn {
        font-family: Krungsri-Condensed-Bold;
        font-size: 16px;
        line-height: 27px;
        text-shadow: none;
        height: 44px !important;
        padding: 7px !important;
        width: 170px;
        margin-top: 32px
    }

.container--banner .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 2px !important
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
    width: 13px;
    height: 13px;
    margin-left: 12px;
    margin-right: 12px;
    background: transparent;
    border: 2px solid #fff
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffd400;
    border: 0
}

@media(max-width: 767px) {
    .container--banner.banner-height-360px .block-banner .banner-content {
        margin-bottom: 24px;
        top: auto;
        text-align: center !important;
        padding-bottom: 0
    }

        .container--banner.banner-height-360px .block-banner .banner-content .h1 {
            color: #fff;
            font-size: 24px;
            line-height: 42px;
            margin-bottom: 0
        }

        .container--banner.banner-height-360px .block-banner .banner-content .description {
            color: #fff;
            font-size: 18px;
            line-height: 36px
        }

    .container--banner.banner-height-360px .block-banner .ks-gradient {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: '';
        z-index: 1;
        opacity: unset !important;
        height: 278px;
        background: linear-gradient(180deg,rgba(90,90,90,0) 0%,rgba(0,0,0,.55) 100%);
        bottom: 0;
        top: 82px
    }
}

.container--cover.container--banner.banner-height-480px {
    max-height: 480px
}

    .container--cover.container--banner.banner-height-480px .image {
        width: 100%;
        height: 480px;
        overflow: hidden;
        position: relative;
        max-height: 480px
    }

        .container--cover.container--banner.banner-height-480px .image img {
            height: 480px;
            width: auto;
            position: absolute;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%
        }

.container--banner.banner-height-480px .block-banner .banner-content {
    top: -364px;
    text-shadow: none
}

    .container--banner.banner-height-480px .block-banner .banner-content .h1 {
        color: #222;
        font-family: Krungsri-Condensed-Bold;
        font-size: 40px;
        line-height: 64px;
        text-shadow: 2px 0 1px rgba(0,0,0,.2);
        margin-bottom: 8px
    }

    .container--banner.banner-height-480px .block-banner .banner-content .description {
        color: #222;
        font-family: Thongterm-Bold;
        font-size: 24px;
        line-height: 36px
    }

    .container--banner.banner-height-480px .block-banner .banner-content .btn {
        font-family: Krungsri-Condensed-Bold;
        font-size: 16px;
        line-height: 27px;
        text-shadow: none;
        height: 44px !important;
        padding: 7px !important;
        width: 170px;
        margin-top: 32px
    }

.container--banner .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 2px !important
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
    width: 13px;
    height: 13px;
    margin-left: 12px;
    margin-right: 12px;
    background: transparent;
    border: 2px solid #fff
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffd400;
    border: 0
}

@media(max-width: 767px) {
    .container--cover.container--banner.banner-height-480px {
        max-height: 520px
    }

        .container--cover.container--banner.banner-height-480px .image {
            height: 520px;
            max-height: 520px
        }

            .container--cover.container--banner.banner-height-480px .image img {
                height: 520px
            }

    .container--banner.banner-height-480px .block-banner .banner-content {
        margin-bottom: 24px;
        top: auto;
        text-align: center !important;
        padding-bottom: 0
    }

        .container--banner.banner-height-480px .block-banner .banner-content .h1 {
            color: #fff;
            font-size: 24px;
            line-height: 42px;
            margin-bottom: 0
        }

        .container--banner.banner-height-480px .block-banner .banner-content .description {
            color: #fff;
            font-size: 18px;
            line-height: 36px
        }

        .container--banner.banner-height-480px .block-banner .banner-content .btn {
            width: 270px
        }

    .container--banner.banner-height-480px .block-banner .ks-gradient {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: '';
        z-index: 1;
        opacity: unset !important;
        height: 320px;
        background: linear-gradient(180deg,rgba(90,90,90,0) 0%,rgba(0,0,0,.55) 100%);
        bottom: 0;
        top: 200px
    }
}

.container--banner .block-banner .banner-content .btn.btn-primary {
    color: #554242 !important;
    background-color: #ffd400 !important
}

.container--banner .block-banner .banner-content .btn.btn-MaroonGrey {
    color: #ffd400 !important;
    background-color: #6f5f5e !important;
    border: solid 0 #e8e8e8 !important
}

@media(max-width: 767px) {
    .container--banner .block-banner .banner-content .btn.btn-MaroonGrey {
        color: #554242 !important;
        background-color: #ffd400 !important
    }
}

.accordion .card .card-header:hover, .accordion .card .card-header.active {
    border-left: 3px solid #ffd400
}

.accordion .card .collapse, .accordion .card .collapsing {
    border-left: 3px solid #ffd400
}

.accordion#accordionFooter .card .card-header:hover, .accordion#accordionFooter .card .card-header.active {
    border-left: 3px solid transparent
}

.accordion#accordionFooter .card .collapse, .accordion#accordionFooter .card .collapsing {
    border-left: 3px solid transparent
}

.container--content .card-info {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    background-color: #fff;
    width: 100%;
    margin-bottom: 30px
}

    .container--content .card-info .content {
        padding: 16px;
        height: 158px;
        position: relative
    }

        .container--content .card-info .content .header h2 {
            color: #222;
            font-family: Krungsri-Condensed-Bold;
            font-size: 24px;
            line-height: 36px;
            margin-bottom: 66px
        }

        .container--content .card-info .content .more-detail {
            position: absolute;
            bottom: 16px
        }

    .container--content .card-info .image {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px
    }

@media(max-width: 767px) {
    .container--content .card-info {
        margin-bottom: 8px
    }

        .container--content .card-info .image {
            width: 110px;
            float: left;
            border-top-left-radius: 3px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 3px
        }

        .container--content .card-info .content {
            padding: 8px;
            width: calc(100% - 110px);
            float: left;
            height: 110px
        }

            .container--content .card-info .content .header h2 {
                color: #222;
                font-family: Krungsri-Condensed-Bold;
                font-size: 16px;
                line-height: 30px;
                margin-bottom: 15px
            }

            .container--content .card-info .content .more-detail {
                position: absolute;
                bottom: 0
            }

            .container--content .card-info .content .Text-link {
                font-size: 10px;
                line-height: 22px
            }
}

.container--content .card-logo {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    background-color: #fff;
    width: 100%;
    margin-bottom: 30px
}

    .container--content .card-logo .content {
        padding: 16px;
        height: 192px;
        position: relative
    }

        .container--content .card-logo .content .detail {
            color: #5a5a5a;
            font-family: Thongterm-Roman;
            font-size: 16px;
            line-height: 34px
        }

        .container--content .card-logo .content .more-detail {
            position: absolute;
            bottom: 16px
        }

    .container--content .card-logo .image {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px
    }

@media(max-width: 767px) {
    .container--content .card-logo {
        margin-bottom: 16px
    }

        .container--content .card-logo .content {
            height: auto
        }

        .container--content .card-logo .image {
            height: 115px
        }

            .container--content .card-logo .image img {
                position: absolute;
                margin: auto;
                min-height: 100%;
                min-width: 100%;
                left: -100%;
                right: -100%;
                top: -100%;
                bottom: -100%;
                width: auto
            }

        .container--content .card-logo .content .more-detail {
            position: inherit;
            bottom: 0;
            padding-top: 8px
        }

        .container--content .card-logo .content .Text-link {
            font-size: 14px;
            line-height: 30px
        }
}

.container--content .card-list {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    background-color: #fff;
    width: 100%;
    margin-bottom: 16px
}

    .container--content .card-list .content {
        padding: 16px;
        height: 150px;
        position: relative;
        padding-left: 0;
        padding-right: 32px
    }

        .container--content .card-list .content .detail {
            color: #5a5a5a;
            font-family: Thongterm-Roman;
            font-size: 16px;
            line-height: 34px
        }

    .container--content .card-list .image {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px
    }

@media(max-width: 767px) {
    .container--content .card-list {
        margin-bottom: 16px;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px
    }

        .container--content .card-list .content {
            height: 139px;
            padding: 16px
        }

        .container--content .card-list .image {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

            .container--content .card-list .image .img-row {
                display: block;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                margin-right: -15px;
                margin-left: -15px
            }

            .container--content .card-list .image img {
                width: auto;
                height: auto
            }
}

.container--link {
    max-width: 1170px;
    margin: 40px auto
}

.secondary--Nav {
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(90,90,90,.2);
    margin-left: -15px;
    margin-right: -15px;
    z-index: 995 !important;
    position: relative
}

    .secondary--Nav .container--secondary--menu {
        max-width: 1170px;
        margin: auto
    }

    .secondary--Nav .secondary-menu {
        background-color: #fff
    }

        .secondary--Nav .secondary-menu .menuitem {
            display: block;
            padding-right: 0;
            padding: 0 24px;
            float: left
        }

            .secondary--Nav .secondary-menu .menuitem .inner {
                background: transparent;
                position: relative;
                overflow: hidden
            }

                .secondary--Nav .secondary-menu .menuitem .inner:after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: -100%;
                    width: 100%;
                    height: 3px;
                    background: #ffd400;
                    transition: .3s cubic-bezier(.445,.05,.55,.95)
                }

                .secondary--Nav .secondary-menu .menuitem .inner:hover:after, .secondary--Nav .secondary-menu .menuitem.active .inner:after {
                    -webkit-transform: translate3d(100%,0,0);
                    transform: translate3d(100%,0,0)
                }

                .secondary--Nav .secondary-menu .menuitem .inner a {
                    font-size: 20px;
                    font-family: Krungsri-Condensed-Medium;
                    color: #5a5a5a;
                    letter-spacing: 0;
                    line-height: 30px;
                    height: 78px;
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                    list-style-type: none
                }

            .secondary--Nav .secondary-menu .menuitem.active a {
                font-family: Krungsri-Condensed-Bold;
                color: #222
            }

        .secondary--Nav .secondary-menu.fixed-top {
            box-shadow: 0 1px 6px 0 rgba(90,90,90,.2)
        }

@media(max-width: 1199px) {
    .secondary--Nav {
        box-shadow: none;
        background-color: transparent
    }
}

.itemtag {
    padding: 0 8px
}

    .itemtag a {
        border: 1px solid #e8e8e8;
        padding: 4px 8px;
        border-radius: 4px
    }

        .itemtag a:hover {
            border: 1px solid #ffd400;
            background-color: #ffd400
        }

@media(max-width: 767px) {
    .itemtag {
        padding: 0 4px
    }
}

.box-contact {
    cursor: pointer
}

    .box-contact .img-contact {
        padding-left: 0;
        display: inline-block;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        text-align: center;
        float: left;
        margin-right: 8px
    }

    .box-contact:hover .img-contact {
        background-color: #ffd400;
        display: inline-block;
        border-radius: 50%;
        width: 40px;
        height: 40px
    }

    .box-contact .img-contact a {
        padding: 4px 8px;
        line-height: 40px
    }

    .box-contact.img .img-contact a {
        padding: 0 0;
        line-height: 32px
    }

    .box-contact .img-contact a i {
        font-size: 24px;
        color: #5e4b4b;
        position: relative;
        top: 5px
    }

    .box-contact .info-contact {
        float: left;
        padding-top: 8px
    }

    .box-contact.img .info-contact {
        float: left;
        padding-top: 4px;
        width: calc(100% - 48px)
    }

    .box-contact .info-contact .channel {
        color: #5a5a5a;
        font-family: "Krungsri-Condensed-Medium";
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 8px
    }

    .box-contact .info-contact .contact {
        color: #f76f00;
        font-family: Thongterm-Roman;
        font-size: 16px;
        line-height: 34px
    }

        .box-contact .info-contact .contact a {
            color: #f76f00;
            font-family: Thongterm-Roman;
            font-size: 16px;
            line-height: 34px
        }

@media(max-width: 767px) {
    .box-contact.img {
        padding-bottom: 24px
    }

        .box-contact.img:last-child {
            padding-bottom: 0
        }
}

.EditingFormErrorLabel {
    color: #d00000;
    font-family: Thongterm-Roman;
    font-size: 14px;
    line-height: 30px;
    padding-top: 4px
}

.secondary--Nav.fixed-top {
    z-index: 1001;
    position: fixed
}

.accordion#accordionMenu .card .card-header:hover, .accordion#accordionMenu .card .card-header.active {
    border-left: 3px solid transparent
}

.accordion#accordionMenu .card .card-header:hover, .accordion#accordionMenu .card .card-header.active {
    border-left: 3px solid transparent
}

.accordion#accordionMenu .card .collapse, .accordion#accordionMenu .card .collapsing {
    border-left: 3px solid transparent
}

.accordion#accordionMenu .card .card-header.arrow.collapsed:after {
    color: #5a5a5a;
    top: 24px;
    font-size: 20px
}

.accordion#accordionMenu .card .card-header.arrow:not(.collapsed):after {
    top: 24px;
    color: #5a5a5a;
    font-size: 20px
}

.accordion#accordionFooter .card .card-header.arrow.collapsed:after {
    color: #5a5a5a;
    top: 24px;
    font-size: 20px
}

.accordion#accordionFooter .card .card-header.arrow:not(.collapsed):after {
    top: 24px;
    color: #5a5a5a;
    font-size: 20px
}

.accordion.acc-form .card .collapse, .accordion.acc-form .card .collapsing {
    border-left: 3px solid transparent
}

.accordion.acc-form .card .card-header:hover, .accordion.acc-form .card .card-header.active {
    border-left: 3px solid transparent
}

.accordion.acc-form .card .card-header.arrow.collapsed:after {
    right: 12px;
    top: 30px
}

.accordion.acc-form .card .card-header.arrow:not(.collapsed):after {
    right: 12;
    top: 30px
}

.accordion.acc-form .card .card-header {
    width: 100%;
    height: auto;
    min-height: 78px;
    padding-left: 0;
    border-left: 3px solid transparent
}

    .accordion.acc-form .card .card-header .btn {
        padding-top: 12px
    }

@media(max-width: 767px) {
    .accordion.acc-form .card .card-header {
        padding-left: 16px
    }
}

.FormPanel #add-recaptcha {
    -webkit-transform: scale(.87);
    -moz-transform: scale(.87);
    -ms-transform: scale(.87);
    -o-transform: scale(.87);
    transform: scale(.87);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0
}

.color-even-odd-pt24-pb24 div.item {
    padding: 24px 16px;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

    .color-even-odd-pt24-pb24 div.item:nth-child(odd) {
        background: #f3f3f3
    }

    .color-even-odd-pt24-pb24 div.item:nth-child(even) {
        background: #fcfcfc
    }

@media(max-width: 767px) {
    .color-even-odd-pt24-pb24 div.item {
        padding: 16px 16px
    }

        .color-even-odd-pt24-pb24 div.item .item-title {
            font-family: Thongterm-bold;
            font-weight: bold;
            color: #545454
        }
}

.container--content-form {
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    max-width: 770px;
    margin-left: auto;
    margin-right: auto
}

    .container--content-form .content-form {
        padding: 40px 100px;
        margin: 0
    }

@media(max-width: 767px) {
    .container--content-form {
        box-shadow: unset
    }

        .container--content-form .content-form {
            padding: 24px 0
        }
}

body {
    font-family: Thongterm-Roman;
    font-size: 16px;
    line-height: 30px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    color: #5a5a5a
}

h1 {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    letter-spacing: 0;
    line-height: 48px;
    margin-bottom: 0
}

h2 {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 24px;
    letter-spacing: 0;
    line-height: 36px;
    margin-bottom: 0
}

h3 {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom: 0
}

h4 {
    color: #222;
    font-family: Thongterm-Bold;
    font-size: 16px;
    line-height: 30px
}

.Text-link, .Text-link a {
    color: #f76f00;
    font-family: Thongterm-Roman;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

    .Text-link:hover, .Text-link a:hover {
        color: #de6400
    }

.Text-link-small, .Text-link-small a {
    color: #f76f00;
    font-family: Thongterm-Roman;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px
}

    .Text-link-small:hover, .Text-link-small a:hover {
        color: #de6400
    }

.Text-tag {
    color: #545454;
    font-family: Thongterm-Roman;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px
}

.Text-back {
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 16px;
    line-height: 34px
}

p .gray, span.gray {
    color: #5a5a5a;
    font-family: Thongterm;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

p.gray, span.gray {
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

.roman-bold {
    font-family: Thongterm-Bold !important
}

.page-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    letter-spacing: 0;
    line-height: 48px;
    margin-bottom: 0
}

.h1-subtitle {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 24px;
    letter-spacing: 0;
    line-height: 36px;
    margin-bottom: 0
}

@media(max-width: 768px) {
    h1 {
        font-size: 26px;
        line-height: 38px
    }

    h3 {
        font-size: 18px;
        line-height: 30px
    }

    .Text-link {
        font-size: 14px;
        line-height: 26px
    }

    p.gray {
        color: #5a5a5a;
        font-family: Thongterm-Roman;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 22px
    }

    .page-title {
        font-size: 26px;
        line-height: 38px
    }

    .h1-subtitle {
        font-size: 24px;
        line-height: 36px
    }
}

.ui.input {
    width: 100%;
    border-radius: 5px;
    box-shadow: inset 1px 2px 1px 0 rgba(0,0,0,.1);
    background-color: #fff;
    background-color: var(--white-two);
    border: solid 0 #e8e8e8
}

    .ui.input .icon {
        opacity: 1 !important
    }

    .ui.input input {
        font-family: Thongterm-Roman;
        font-size: 16px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #e8e8e8;
        height: 48px
    }

        .ui.input input:focus {
            border: solid 1px #463737
        }

            .ui.input input:focus ~ i.icon {
                border: solid 1px #463737;
                border-left: none
            }

                .ui.input input:focus ~ i.icon::before {
                    padding-left: 1px
                }

        .ui.input input:disabled {
            background-color: #f0efee !important
        }

        .ui.input input::-ms-input-placeholder {
            color: #bbb
        }

        .ui.input input::placeholder {
            color: #bbb
        }

        .ui.input input.form-control-danger {
            border: solid 1px #d0021b
        }

.ui.search .input {
    border: 0
}

    .ui.search .input input.prompt {
        border-radius: 5px;
        box-shadow: inset 1px 2px 1px 0 rgba(0,0,0,.1)
    }

        .ui.search .input input.prompt.prompt-sm {
            height: 34px
        }

.ui.search > div.results {
    width: 100%;
    margin-top: 7px;
    border-radius: 0;
    padding-left: 5px;
    padding-right: 5px
}

    .ui.search > div.results .result {
        height: 42px;
        padding-left: 7px;
        padding-right: 7px
    }

        .ui.search > div.results .result .title {
            font-family: Thongterm-Roman;
            font-weight: normal;
            font-size: 14px;
            color: #5a5a5a
        }

.ui.search.exceed-sm > div.results {
    width: 135%
}

.ui.ks.dropdown {
    min-height: 44px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #e8e8e8;
    font-family: Thongterm-Roman;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 0;
    color: #5a5a5a;
    padding-left: 0;
    padding-right: 0
}

@media screen and (max-width: 767px) {
    .ui.ks.dropdown {
        padding: 0
    }
}

.ui.ks.dropdown.selection {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0
}

    .ui.ks.dropdown.selection .text {
        font-family: Thongterm-Bold;
        align-self: center;
        padding-top: 10px;
        padding-bottom: 7px;
        margin-right: 8px;
        overflow: hidden;
        color: #222 !important
    }

        .ui.ks.dropdown.selection .text.default {
            font-family: Thongterm
        }

@media screen and (max-width: 767px) {
    .ui.ks.dropdown.selection .text {
        padding: 0;
        padding-top: 10px;
        padding-bottom: 7px;
        padding-left: 15px;
        width: 80%
    }
}

.ui.ks.dropdown.selection .menu {
    box-sizing: border-box;
    width: calc(100% + 1px);
    margin-left: -.5px
}

    .ui.ks.dropdown.selection .menu .item {
        padding-left: 16px !important;
        padding-right: 16px !important
    }

        .ui.ks.dropdown.selection .menu .item:last-child {
            padding-bottom: 12px !important
        }

.ui.ks.dropdown.selection .dropdown.icon {
    display: inline-table;
    font-weight: normal
}

.ui.ks.dropdown.selection.active {
    border: solid 1px #c7c7c7 !important
}

.ui.ks.dropdown.selection:hover, .ui.ks.dropdown.selection:focus {
    border: solid 1px #e8e8e8
}

.ui.ks.dropdown:hover, .ui.ks.dropdown:focus {
    border: solid 0 #463737
}

.ui.ks.dropdown.dropdown-sm {
    padding-top: 6px;
    padding-bottom: 4px
}

    .ui.ks.dropdown.dropdown-sm .icon {
        top: 0 !important;
        bottom: 0 !important;
        margin: auto 0
    }

@media screen and (max-width: 767px) {
    .ui.ks.dropdown.dropdown-sm {
        padding-top: 6px;
        padding-bottom: 6px;
        min-height: unset
    }

        .ui.ks.dropdown.dropdown-sm .icon:before {
            font-size: 14px !important
        }
}

.ui.ks.dropdown.dropdown-sm .text {
    font-size: 12px !important;
    padding-right: 8px;
    color: #5a5a5a !important
}

.ui.ks.dropdown.disabled {
    background-color: #f0efee;
    border-color: #757573
}

.ui.ks.dropdown .text {
    width: 100%;
    color: #000;
    font-weight: normal;
    padding-left: 16px;
    padding-right: 35px;
    padding-top: 5px;
    padding-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none
}

@media screen and (max-width: 767px) {
    .ui.ks.dropdown .text {
        padding: 6px 8px;
        padding-bottom: 0
    }
}

.ui.ks.dropdown .dropdown.icon {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    transition: transform .15s linear
}

    .ui.ks.dropdown .dropdown.icon:before {
        content: "";
        font-family: "Font Awesome 5 Pro";
        font-size: 20px;
        font-weight: normal;
        color: #5a5a5a
    }

.ui.ks.dropdown .default.text {
    color: #949494 !important
}

.ui.ks.dropdown .menu {
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    padding-top: 0;
    border-top: none;
    min-width: unset !important;
    border: none;
    box-shadow: 1px 2px 4px 0 rgba(0,0,0,.2)
}

    .ui.ks.dropdown .menu .header {
        color: #9b9b9b;
        min-height: 40px;
        font-size: 16px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 18px;
        padding-top: 5px
    }

    .ui.ks.dropdown .menu .item {
        background-color: #fff;
        color: #5a5a5a;
        font-size: 16px;
        line-height: 1.5;
        margin-right: 0;
        padding-bottom: 8px !important;
        padding-left: 35px !important;
        padding-top: 8px !important;
        white-space: normal !important;
        word-wrap: normal !important;
        border-top-width: 0;
        user-select: none
    }

        .ui.ks.dropdown .menu .item:hover {
            background-color: #f3f3f3
        }

        .ui.ks.dropdown .menu .item.active {
            background-color: #ffd400;
            color: #5a5a5a;
            background-clip: padding-box !important
        }

.ui.ks.dropdown.active {
    border: solid 0 #463737 !important
}

    .ui.ks.dropdown.active .dropdown.icon:before {
        content: '' !important
    }

.ui.selection.active.dropdown {
    box-shadow: none !important
}

.ui.ks.dropdown.active .menu {
    border: solid 0 #a99f9e !important;
    box-shadow: 0 0 4px rgba(35,19,18,.2);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.ui.ks.dropdown.mobile {
    min-height: 30px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #e8e8e8;
    font-family: 'Thongterm';
    font-size: 16px;
    color: #5a5a5a;
    padding-top: 0;
    width: 170px;
    height: 44px
}

    .ui.ks.dropdown.mobile.active {
        border: solid 1px #c7c7c7 !important
    }

    .ui.ks.dropdown.mobile .text {
        font-family: Krungsri-Condensed-Bold;
        width: 100%;
        color: #554242;
        white-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 27px;
        text-align: center;
        font-size: 16px;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 8px;
        padding-bottom: 9px
    }

    .ui.ks.dropdown.mobile .left.menu {
        right: unset !important
    }

    .ui.ks.dropdown.mobile .menu {
        min-width: unset !important;
        margin-top: 16px;
        margin-right: -2px;
        padding: 16px 0;
        border-color: #e8e8e8 !important
    }

        .ui.ks.dropdown.mobile .menu:before {
            display: block !important;
            content: "";
            font-family: "Font Awesome 5 Pro";
            font-size: 20px;
            font-weight: normal;
            color: #9b9b9b !important;
            position: center;
            right: 18px;
            position: absolute;
            z-index: 100;
            color: #000;
            top: 12px
        }

    .ui.ks.dropdown.mobile .header {
        font-family: Thongterm;
        font-weight: bold;
        color: #9b9b9b;
        margin: 0;
        word-wrap: break-word;
        white-space: normal;
        padding-right: 32px
    }

    .ui.ks.dropdown.mobile .item {
        color: #000;
        min-height: 35px;
        background-color: #fff;
        font-family: Thongterm-Roman;
        line-height: 1.5;
        padding-left: 40px !important;
        word-wrap: break-word;
        white-space: normal
    }

        .ui.ks.dropdown.mobile .item:hover {
            background-color: #f3f3f3
        }

        .ui.ks.dropdown.mobile .item.selected {
            background-color: white;
            color: black
        }

    .ui.ks.dropdown.mobile .item-header {
        min-height: 40px;
        font-family: Thongterm-Roman;
        background-color: #fff;
        line-height: 1.5;
        color: #000;
        padding-left: 20px;
        padding-top: 10px;
        word-wrap: break-word;
        white-space: normal
    }

        .ui.ks.dropdown.mobile .item-header:hover {
            background-color: #f3f3f3
        }

        .ui.ks.dropdown.mobile .item-header.selected {
            background-color: white;
            color: black
        }

.ui.ks.unset-minwidth {
    min-width: unset !important
}

.ui.ks.dropdown.type-link {
    min-height: 30px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #e8e8e8;
    font-family: 'Thongterm';
    font-size: 16px;
    color: #5a5a5a;
    padding-top: 0;
    width: 170px;
    height: 44px
}

    .ui.ks.dropdown.type-link .text {
        font-family: Krungsri-Condensed-Bold;
        width: 100%;
        color: #554242;
        white-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 27px;
        text-align: center;
        font-size: 16px;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 8px;
        padding-bottom: 9px
    }

        .ui.ks.dropdown.type-link .text i {
            padding-left: 5px
        }

    .ui.ks.dropdown.type-link .left.menu {
        right: unset !important
    }

    .ui.ks.dropdown.type-link .menu {
        min-width: unset !important;
        margin-top: 16px;
        margin-right: -2px;
        padding: 8px 0;
        border-color: #e8e8e8 !important
    }

    .ui.ks.dropdown.type-link .header {
        font-family: Thongterm;
        font-weight: bold;
        color: #9b9b9b;
        margin: 0;
        word-wrap: break-word;
        white-space: normal;
        padding-right: 32px
    }

    .ui.ks.dropdown.type-link .item {
        color: #5a5a5a;
        min-height: 35px;
        background-color: #fff;
        font-family: Thongterm-Roman;
        font-size: 16px;
        line-height: 30px;
        padding-left: 40px !important;
        word-wrap: break-word;
        white-space: normal;
        padding-top: 6px !important;
        padding-bottom: 2px !important
    }

    .ui.ks.dropdown.type-link .menu .item:last-child {
        padding-bottom: 2px !important
    }

    .ui.ks.dropdown.type-link .item:hover {
        background-color: #f3f3f3
    }

    .ui.ks.dropdown.type-link .item.selected {
        background-color: white;
        color: black
    }

    .ui.ks.dropdown.type-link .item-header {
        min-height: 40px;
        font-family: Thongterm-Roman;
        background-color: #fff;
        line-height: 1.5;
        color: #000;
        padding-left: 20px;
        padding-top: 10px;
        word-wrap: break-word;
        white-space: normal
    }

        .ui.ks.dropdown.type-link .item-header:hover {
            background-color: #f3f3f3
        }

        .ui.ks.dropdown.type-link .item-header.selected {
            background-color: white;
            color: black
        }

@media(max-width: 767px) {
    .ui.ks.dropdown.type-link {
        width: 270px
    }

        .ui.ks.dropdown.type-link .text i {
            padding-left: 12px
        }
}

::placeholder {
    color: #949494 !important;
    opacity: 1
}

:-ms-input-placeholder {
    color: #949494 !important
}

::-ms-input-placeholder {
    color: #949494 !important
}

.position-static-all {
    position: static
}

.position-static-all-i {
    position: static !important
}

@media screen and (min-width: 1200px) {
    .position-static-xl {
        position: static
    }

    .position-static-xl-i {
        position: static !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .position-static-lg {
        position: static
    }

    .position-static-lg-i {
        position: static !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .position-static-md {
        position: static
    }

    .position-static-md-i {
        position: static !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .position-static-sm {
        position: static
    }

    .position-static-sm-i {
        position: static !important
    }
}

@media screen and (max-width: 576px) {
    .position-static-xs {
        position: static
    }

    .position-static-xs-i {
        position: static !important
    }
}

.position-relative-all {
    position: relative
}

.position-relative-all-i {
    position: relative !important
}

@media screen and (min-width: 1200px) {
    .position-relative-xl {
        position: relative
    }

    .position-relative-xl-i {
        position: relative !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .position-relative-lg {
        position: relative
    }

    .position-relative-lg-i {
        position: relative !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .position-relative-md {
        position: relative
    }

    .position-relative-md-i {
        position: relative !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .position-relative-sm {
        position: relative
    }

    .position-relative-sm-i {
        position: relative !important
    }
}

@media screen and (max-width: 576px) {
    .position-relative-xs {
        position: relative
    }

    .position-relative-xs-i {
        position: relative !important
    }
}

.position-absolute-all {
    position: absolute
}

.position-absolute-all-i {
    position: absolute !important
}

@media screen and (min-width: 1200px) {
    .position-absolute-xl {
        position: absolute
    }

    .position-absolute-xl-i {
        position: absolute !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .position-absolute-lg {
        position: absolute
    }

    .position-absolute-lg-i {
        position: absolute !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .position-absolute-md {
        position: absolute
    }

    .position-absolute-md-i {
        position: absolute !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .position-absolute-sm {
        position: absolute
    }

    .position-absolute-sm-i {
        position: absolute !important
    }
}

@media screen and (max-width: 576px) {
    .position-absolute-xs {
        position: absolute
    }

    .position-absolute-xs-i {
        position: absolute !important
    }
}

.position-fixed-all {
    position: fixed
}

.position-fixed-all-i {
    position: fixed !important
}

@media screen and (min-width: 1200px) {
    .position-fixed-xl {
        position: fixed
    }

    .position-fixed-xl-i {
        position: fixed !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .position-fixed-lg {
        position: fixed
    }

    .position-fixed-lg-i {
        position: fixed !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .position-fixed-md {
        position: fixed
    }

    .position-fixed-md-i {
        position: fixed !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .position-fixed-sm {
        position: fixed
    }

    .position-fixed-sm-i {
        position: fixed !important
    }
}

@media screen and (max-width: 576px) {
    .position-fixed-xs {
        position: fixed
    }

    .position-fixed-xs-i {
        position: fixed !important
    }
}

.position-sticky-all {
    position: sticky
}

.position-sticky-all-i {
    position: sticky !important
}

@media screen and (min-width: 1200px) {
    .position-sticky-xl {
        position: sticky
    }

    .position-sticky-xl-i {
        position: sticky !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .position-sticky-lg {
        position: sticky
    }

    .position-sticky-lg-i {
        position: sticky !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .position-sticky-md {
        position: sticky
    }

    .position-sticky-md-i {
        position: sticky !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .position-sticky-sm {
        position: sticky
    }

    .position-sticky-sm-i {
        position: sticky !important
    }
}

@media screen and (max-width: 576px) {
    .position-sticky-xs {
        position: sticky
    }

    .position-sticky-xs-i {
        position: sticky !important
    }
}

.top-0px-all {
    top: 0
}

.top-0px-all-i {
    top: 0 !important
}

@media screen and (min-width: 1200px) {
    .top-0px-xl {
        top: 0
    }

    .top-0px-xl-i {
        top: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .top-0px-lg {
        top: 0
    }

    .top-0px-lg-i {
        top: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .top-0px-md {
        top: 0
    }

    .top-0px-md-i {
        top: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .top-0px-sm {
        top: 0
    }

    .top-0px-sm-i {
        top: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .top-0px-xs {
        top: 0
    }

    .top-0px-xs-i {
        top: 0 !important
    }
}

.right-0px-all {
    right: 0
}

.right-0px-all-i {
    right: 0 !important
}

@media screen and (min-width: 1200px) {
    .right-0px-xl {
        right: 0
    }

    .right-0px-xl-i {
        right: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .right-0px-lg {
        right: 0
    }

    .right-0px-lg-i {
        right: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .right-0px-md {
        right: 0
    }

    .right-0px-md-i {
        right: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .right-0px-sm {
        right: 0
    }

    .right-0px-sm-i {
        right: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .right-0px-xs {
        right: 0
    }

    .right-0px-xs-i {
        right: 0 !important
    }
}

.bottom-0px-all {
    bottom: 0
}

.bottom-0px-all-i {
    bottom: 0 !important
}

@media screen and (min-width: 1200px) {
    .bottom-0px-xl {
        bottom: 0
    }

    .bottom-0px-xl-i {
        bottom: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .bottom-0px-lg {
        bottom: 0
    }

    .bottom-0px-lg-i {
        bottom: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .bottom-0px-md {
        bottom: 0
    }

    .bottom-0px-md-i {
        bottom: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .bottom-0px-sm {
        bottom: 0
    }

    .bottom-0px-sm-i {
        bottom: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .bottom-0px-xs {
        bottom: 0
    }

    .bottom-0px-xs-i {
        bottom: 0 !important
    }
}

.left-0px-all {
    left: 0
}

.left-0px-all-i {
    left: 0 !important
}

@media screen and (min-width: 1200px) {
    .left-0px-xl {
        left: 0
    }

    .left-0px-xl-i {
        left: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .left-0px-lg {
        left: 0
    }

    .left-0px-lg-i {
        left: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .left-0px-md {
        left: 0
    }

    .left-0px-md-i {
        left: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .left-0px-sm {
        left: 0
    }

    .left-0px-sm-i {
        left: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .left-0px-xs {
        left: 0
    }

    .left-0px-xs-i {
        left: 0 !important
    }
}

.mt--15px-all {
    margin-top: -15px
}

.mt--15px-all-i {
    margin-top: -15px !important
}

@media screen and (min-width: 1200px) {
    .mt--15px-xl {
        margin-top: -15px
    }

    .mt--15px-xl-i {
        margin-top: -15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt--15px-lg {
        margin-top: -15px
    }

    .mt--15px-lg-i {
        margin-top: -15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt--15px-md {
        margin-top: -15px
    }

    .mt--15px-md-i {
        margin-top: -15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt--15px-sm {
        margin-top: -15px
    }

    .mt--15px-sm-i {
        margin-top: -15px !important
    }
}

@media screen and (max-width: 576px) {
    .mt--15px-xs {
        margin-top: -15px
    }

    .mt--15px-xs-i {
        margin-top: -15px !important
    }
}

.mr--15px-all {
    margin-right: -15px
}

.mr--15px-all-i {
    margin-right: -15px !important
}

@media screen and (min-width: 1200px) {
    .mr--15px-xl {
        margin-right: -15px
    }

    .mr--15px-xl-i {
        margin-right: -15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr--15px-lg {
        margin-right: -15px
    }

    .mr--15px-lg-i {
        margin-right: -15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr--15px-md {
        margin-right: -15px
    }

    .mr--15px-md-i {
        margin-right: -15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr--15px-sm {
        margin-right: -15px
    }

    .mr--15px-sm-i {
        margin-right: -15px !important
    }
}

@media screen and (max-width: 576px) {
    .mr--15px-xs {
        margin-right: -15px
    }

    .mr--15px-xs-i {
        margin-right: -15px !important
    }
}

.mb--15px-all {
    margin-bottom: -15px
}

.mb--15px-all-i {
    margin-bottom: -15px !important
}

@media screen and (min-width: 1200px) {
    .mb--15px-xl {
        margin-bottom: -15px
    }

    .mb--15px-xl-i {
        margin-bottom: -15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb--15px-lg {
        margin-bottom: -15px
    }

    .mb--15px-lg-i {
        margin-bottom: -15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb--15px-md {
        margin-bottom: -15px
    }

    .mb--15px-md-i {
        margin-bottom: -15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb--15px-sm {
        margin-bottom: -15px
    }

    .mb--15px-sm-i {
        margin-bottom: -15px !important
    }
}

@media screen and (max-width: 576px) {
    .mb--15px-xs {
        margin-bottom: -15px
    }

    .mb--15px-xs-i {
        margin-bottom: -15px !important
    }
}

.ml--15px-all {
    margin-left: -15px
}

.ml--15px-all-i {
    margin-left: -15px !important
}

@media screen and (min-width: 1200px) {
    .ml--15px-xl {
        margin-left: -15px
    }

    .ml--15px-xl-i {
        margin-left: -15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml--15px-lg {
        margin-left: -15px
    }

    .ml--15px-lg-i {
        margin-left: -15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml--15px-md {
        margin-left: -15px
    }

    .ml--15px-md-i {
        margin-left: -15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml--15px-sm {
        margin-left: -15px
    }

    .ml--15px-sm-i {
        margin-left: -15px !important
    }
}

@media screen and (max-width: 576px) {
    .ml--15px-xs {
        margin-left: -15px
    }

    .ml--15px-xs-i {
        margin-left: -15px !important
    }
}

.mt-0px-all {
    margin-top: 0
}

.mt-0px-all-i {
    margin-top: 0 !important
}

@media screen and (min-width: 1200px) {
    .mt-0px-xl {
        margin-top: 0
    }

    .mt-0px-xl-i {
        margin-top: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-0px-lg {
        margin-top: 0
    }

    .mt-0px-lg-i {
        margin-top: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-0px-md {
        margin-top: 0
    }

    .mt-0px-md-i {
        margin-top: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-0px-sm {
        margin-top: 0
    }

    .mt-0px-sm-i {
        margin-top: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .mt-0px-xs {
        margin-top: 0
    }

    .mt-0px-xs-i {
        margin-top: 0 !important
    }
}

.mr-0px-all {
    margin-right: 0
}

.mr-0px-all-i {
    margin-right: 0 !important
}

@media screen and (min-width: 1200px) {
    .mr-0px-xl {
        margin-right: 0
    }

    .mr-0px-xl-i {
        margin-right: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-0px-lg {
        margin-right: 0
    }

    .mr-0px-lg-i {
        margin-right: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-0px-md {
        margin-right: 0
    }

    .mr-0px-md-i {
        margin-right: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-0px-sm {
        margin-right: 0
    }

    .mr-0px-sm-i {
        margin-right: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .mr-0px-xs {
        margin-right: 0
    }

    .mr-0px-xs-i {
        margin-right: 0 !important
    }
}

.mb-0px-all {
    margin-bottom: 0
}

.mb-0px-all-i {
    margin-bottom: 0 !important
}

@media screen and (min-width: 1200px) {
    .mb-0px-xl {
        margin-bottom: 0
    }

    .mb-0px-xl-i {
        margin-bottom: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-0px-lg {
        margin-bottom: 0
    }

    .mb-0px-lg-i {
        margin-bottom: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-0px-md {
        margin-bottom: 0
    }

    .mb-0px-md-i {
        margin-bottom: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-0px-sm {
        margin-bottom: 0
    }

    .mb-0px-sm-i {
        margin-bottom: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .mb-0px-xs {
        margin-bottom: 0
    }

    .mb-0px-xs-i {
        margin-bottom: 0 !important
    }
}

.ml-0px-all {
    margin-left: 0
}

.ml-0px-all-i {
    margin-left: 0 !important
}

@media screen and (min-width: 1200px) {
    .ml-0px-xl {
        margin-left: 0
    }

    .ml-0px-xl-i {
        margin-left: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-0px-lg {
        margin-left: 0
    }

    .ml-0px-lg-i {
        margin-left: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-0px-md {
        margin-left: 0
    }

    .ml-0px-md-i {
        margin-left: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-0px-sm {
        margin-left: 0
    }

    .ml-0px-sm-i {
        margin-left: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .ml-0px-xs {
        margin-left: 0
    }

    .ml-0px-xs-i {
        margin-left: 0 !important
    }
}

.mt-4px-all {
    margin-top: 4px
}

.mt-4px-all-i {
    margin-top: 4px !important
}

@media screen and (min-width: 1200px) {
    .mt-4px-xl {
        margin-top: 4px
    }

    .mt-4px-xl-i {
        margin-top: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-4px-lg {
        margin-top: 4px
    }

    .mt-4px-lg-i {
        margin-top: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-4px-md {
        margin-top: 4px
    }

    .mt-4px-md-i {
        margin-top: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-4px-sm {
        margin-top: 4px
    }

    .mt-4px-sm-i {
        margin-top: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-4px-xs {
        margin-top: 4px
    }

    .mt-4px-xs-i {
        margin-top: 4px !important
    }
}

.mr-4px-all {
    margin-right: 4px
}

.mr-4px-all-i {
    margin-right: 4px !important
}

@media screen and (min-width: 1200px) {
    .mr-4px-xl {
        margin-right: 4px
    }

    .mr-4px-xl-i {
        margin-right: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-4px-lg {
        margin-right: 4px
    }

    .mr-4px-lg-i {
        margin-right: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-4px-md {
        margin-right: 4px
    }

    .mr-4px-md-i {
        margin-right: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-4px-sm {
        margin-right: 4px
    }

    .mr-4px-sm-i {
        margin-right: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-4px-xs {
        margin-right: 4px
    }

    .mr-4px-xs-i {
        margin-right: 4px !important
    }
}

.mb-4px-all {
    margin-bottom: 4px
}

.mb-4px-all-i {
    margin-bottom: 4px !important
}

@media screen and (min-width: 1200px) {
    .mb-4px-xl {
        margin-bottom: 4px
    }

    .mb-4px-xl-i {
        margin-bottom: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-4px-lg {
        margin-bottom: 4px
    }

    .mb-4px-lg-i {
        margin-bottom: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-4px-md {
        margin-bottom: 4px
    }

    .mb-4px-md-i {
        margin-bottom: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-4px-sm {
        margin-bottom: 4px
    }

    .mb-4px-sm-i {
        margin-bottom: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-4px-xs {
        margin-bottom: 4px
    }

    .mb-4px-xs-i {
        margin-bottom: 4px !important
    }
}

.ml-4px-all {
    margin-left: 4px
}

.ml-4px-all-i {
    margin-left: 4px !important
}

@media screen and (min-width: 1200px) {
    .ml-4px-xl {
        margin-left: 4px
    }

    .ml-4px-xl-i {
        margin-left: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-4px-lg {
        margin-left: 4px
    }

    .ml-4px-lg-i {
        margin-left: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-4px-md {
        margin-left: 4px
    }

    .ml-4px-md-i {
        margin-left: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-4px-sm {
        margin-left: 4px
    }

    .ml-4px-sm-i {
        margin-left: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-4px-xs {
        margin-left: 4px
    }

    .ml-4px-xs-i {
        margin-left: 4px !important
    }
}

.mt-5px-all {
    margin-top: 5px
}

.mt-5px-all-i {
    margin-top: 5px !important
}

@media screen and (min-width: 1200px) {
    .mt-5px-xl {
        margin-top: 5px
    }

    .mt-5px-xl-i {
        margin-top: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-5px-lg {
        margin-top: 5px
    }

    .mt-5px-lg-i {
        margin-top: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-5px-md {
        margin-top: 5px
    }

    .mt-5px-md-i {
        margin-top: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-5px-sm {
        margin-top: 5px
    }

    .mt-5px-sm-i {
        margin-top: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-5px-xs {
        margin-top: 5px
    }

    .mt-5px-xs-i {
        margin-top: 5px !important
    }
}

.mr-5px-all {
    margin-right: 5px
}

.mr-5px-all-i {
    margin-right: 5px !important
}

@media screen and (min-width: 1200px) {
    .mr-5px-xl {
        margin-right: 5px
    }

    .mr-5px-xl-i {
        margin-right: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-5px-lg {
        margin-right: 5px
    }

    .mr-5px-lg-i {
        margin-right: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-5px-md {
        margin-right: 5px
    }

    .mr-5px-md-i {
        margin-right: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-5px-sm {
        margin-right: 5px
    }

    .mr-5px-sm-i {
        margin-right: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-5px-xs {
        margin-right: 5px
    }

    .mr-5px-xs-i {
        margin-right: 5px !important
    }
}

.mb-5px-all {
    margin-bottom: 5px
}

.mb-5px-all-i {
    margin-bottom: 5px !important
}

@media screen and (min-width: 1200px) {
    .mb-5px-xl {
        margin-bottom: 5px
    }

    .mb-5px-xl-i {
        margin-bottom: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-5px-lg {
        margin-bottom: 5px
    }

    .mb-5px-lg-i {
        margin-bottom: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-5px-md {
        margin-bottom: 5px
    }

    .mb-5px-md-i {
        margin-bottom: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-5px-sm {
        margin-bottom: 5px
    }

    .mb-5px-sm-i {
        margin-bottom: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-5px-xs {
        margin-bottom: 5px
    }

    .mb-5px-xs-i {
        margin-bottom: 5px !important
    }
}

.ml-5px-all {
    margin-left: 5px
}

.ml-5px-all-i {
    margin-left: 5px !important
}

@media screen and (min-width: 1200px) {
    .ml-5px-xl {
        margin-left: 5px
    }

    .ml-5px-xl-i {
        margin-left: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-5px-lg {
        margin-left: 5px
    }

    .ml-5px-lg-i {
        margin-left: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-5px-md {
        margin-left: 5px
    }

    .ml-5px-md-i {
        margin-left: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-5px-sm {
        margin-left: 5px
    }

    .ml-5px-sm-i {
        margin-left: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-5px-xs {
        margin-left: 5px
    }

    .ml-5px-xs-i {
        margin-left: 5px !important
    }
}

.mt-8px-all {
    margin-top: 8px
}

.mt-8px-all-i {
    margin-top: 8px !important
}

@media screen and (min-width: 1200px) {
    .mt-8px-xl {
        margin-top: 8px
    }

    .mt-8px-xl-i {
        margin-top: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-8px-lg {
        margin-top: 8px
    }

    .mt-8px-lg-i {
        margin-top: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-8px-md {
        margin-top: 8px
    }

    .mt-8px-md-i {
        margin-top: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-8px-sm {
        margin-top: 8px
    }

    .mt-8px-sm-i {
        margin-top: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-8px-xs {
        margin-top: 8px
    }

    .mt-8px-xs-i {
        margin-top: 8px !important
    }
}

.mr-8px-all {
    margin-right: 8px
}

.mr-8px-all-i {
    margin-right: 8px !important
}

@media screen and (min-width: 1200px) {
    .mr-8px-xl {
        margin-right: 8px
    }

    .mr-8px-xl-i {
        margin-right: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-8px-lg {
        margin-right: 8px
    }

    .mr-8px-lg-i {
        margin-right: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-8px-md {
        margin-right: 8px
    }

    .mr-8px-md-i {
        margin-right: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-8px-sm {
        margin-right: 8px
    }

    .mr-8px-sm-i {
        margin-right: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-8px-xs {
        margin-right: 8px
    }

    .mr-8px-xs-i {
        margin-right: 8px !important
    }
}

.mb-8px-all {
    margin-bottom: 8px
}

.mb-8px-all-i {
    margin-bottom: 8px !important
}

@media screen and (min-width: 1200px) {
    .mb-8px-xl {
        margin-bottom: 8px
    }

    .mb-8px-xl-i {
        margin-bottom: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-8px-lg {
        margin-bottom: 8px
    }

    .mb-8px-lg-i {
        margin-bottom: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-8px-md {
        margin-bottom: 8px
    }

    .mb-8px-md-i {
        margin-bottom: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-8px-sm {
        margin-bottom: 8px
    }

    .mb-8px-sm-i {
        margin-bottom: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-8px-xs {
        margin-bottom: 8px
    }

    .mb-8px-xs-i {
        margin-bottom: 8px !important
    }
}

.ml-8px-all {
    margin-left: 8px
}

.ml-8px-all-i {
    margin-left: 8px !important
}

@media screen and (min-width: 1200px) {
    .ml-8px-xl {
        margin-left: 8px
    }

    .ml-8px-xl-i {
        margin-left: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-8px-lg {
        margin-left: 8px
    }

    .ml-8px-lg-i {
        margin-left: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-8px-md {
        margin-left: 8px
    }

    .ml-8px-md-i {
        margin-left: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-8px-sm {
        margin-left: 8px
    }

    .ml-8px-sm-i {
        margin-left: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-8px-xs {
        margin-left: 8px
    }

    .ml-8px-xs-i {
        margin-left: 8px !important
    }
}

.mt-10px-all {
    margin-top: 10px
}

.mt-10px-all-i {
    margin-top: 10px !important
}

@media screen and (min-width: 1200px) {
    .mt-10px-xl {
        margin-top: 10px
    }

    .mt-10px-xl-i {
        margin-top: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-10px-lg {
        margin-top: 10px
    }

    .mt-10px-lg-i {
        margin-top: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-10px-md {
        margin-top: 10px
    }

    .mt-10px-md-i {
        margin-top: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-10px-sm {
        margin-top: 10px
    }

    .mt-10px-sm-i {
        margin-top: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-10px-xs {
        margin-top: 10px
    }

    .mt-10px-xs-i {
        margin-top: 10px !important
    }
}

.mr-10px-all {
    margin-right: 10px
}

.mr-10px-all-i {
    margin-right: 10px !important
}

@media screen and (min-width: 1200px) {
    .mr-10px-xl {
        margin-right: 10px
    }

    .mr-10px-xl-i {
        margin-right: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-10px-lg {
        margin-right: 10px
    }

    .mr-10px-lg-i {
        margin-right: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-10px-md {
        margin-right: 10px
    }

    .mr-10px-md-i {
        margin-right: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-10px-sm {
        margin-right: 10px
    }

    .mr-10px-sm-i {
        margin-right: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-10px-xs {
        margin-right: 10px
    }

    .mr-10px-xs-i {
        margin-right: 10px !important
    }
}

.mb-10px-all {
    margin-bottom: 10px
}

.mb-10px-all-i {
    margin-bottom: 10px !important
}

@media screen and (min-width: 1200px) {
    .mb-10px-xl {
        margin-bottom: 10px
    }

    .mb-10px-xl-i {
        margin-bottom: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-10px-lg {
        margin-bottom: 10px
    }

    .mb-10px-lg-i {
        margin-bottom: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-10px-md {
        margin-bottom: 10px
    }

    .mb-10px-md-i {
        margin-bottom: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-10px-sm {
        margin-bottom: 10px
    }

    .mb-10px-sm-i {
        margin-bottom: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-10px-xs {
        margin-bottom: 10px
    }

    .mb-10px-xs-i {
        margin-bottom: 10px !important
    }
}

.ml-10px-all {
    margin-left: 10px
}

.ml-10px-all-i {
    margin-left: 10px !important
}

@media screen and (min-width: 1200px) {
    .ml-10px-xl {
        margin-left: 10px
    }

    .ml-10px-xl-i {
        margin-left: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-10px-lg {
        margin-left: 10px
    }

    .ml-10px-lg-i {
        margin-left: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-10px-md {
        margin-left: 10px
    }

    .ml-10px-md-i {
        margin-left: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-10px-sm {
        margin-left: 10px
    }

    .ml-10px-sm-i {
        margin-left: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-10px-xs {
        margin-left: 10px
    }

    .ml-10px-xs-i {
        margin-left: 10px !important
    }
}

.mt-15px-all {
    margin-top: 15px
}

.mt-15px-all-i {
    margin-top: 15px !important
}

@media screen and (min-width: 1200px) {
    .mt-15px-xl {
        margin-top: 15px
    }

    .mt-15px-xl-i {
        margin-top: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-15px-lg {
        margin-top: 15px
    }

    .mt-15px-lg-i {
        margin-top: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-15px-md {
        margin-top: 15px
    }

    .mt-15px-md-i {
        margin-top: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-15px-sm {
        margin-top: 15px
    }

    .mt-15px-sm-i {
        margin-top: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-15px-xs {
        margin-top: 15px
    }

    .mt-15px-xs-i {
        margin-top: 15px !important
    }
}

.mr-15px-all {
    margin-right: 15px
}

.mr-15px-all-i {
    margin-right: 15px !important
}

@media screen and (min-width: 1200px) {
    .mr-15px-xl {
        margin-right: 15px
    }

    .mr-15px-xl-i {
        margin-right: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-15px-lg {
        margin-right: 15px
    }

    .mr-15px-lg-i {
        margin-right: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-15px-md {
        margin-right: 15px
    }

    .mr-15px-md-i {
        margin-right: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-15px-sm {
        margin-right: 15px
    }

    .mr-15px-sm-i {
        margin-right: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-15px-xs {
        margin-right: 15px
    }

    .mr-15px-xs-i {
        margin-right: 15px !important
    }
}

.mb-15px-all {
    margin-bottom: 15px
}

.mb-15px-all-i {
    margin-bottom: 15px !important
}

@media screen and (min-width: 1200px) {
    .mb-15px-xl {
        margin-bottom: 15px
    }

    .mb-15px-xl-i {
        margin-bottom: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-15px-lg {
        margin-bottom: 15px
    }

    .mb-15px-lg-i {
        margin-bottom: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-15px-md {
        margin-bottom: 15px
    }

    .mb-15px-md-i {
        margin-bottom: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-15px-sm {
        margin-bottom: 15px
    }

    .mb-15px-sm-i {
        margin-bottom: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-15px-xs {
        margin-bottom: 15px
    }

    .mb-15px-xs-i {
        margin-bottom: 15px !important
    }
}

.ml-15px-all {
    margin-left: 15px
}

.ml-15px-all-i {
    margin-left: 15px !important
}

@media screen and (min-width: 1200px) {
    .ml-15px-xl {
        margin-left: 15px
    }

    .ml-15px-xl-i {
        margin-left: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-15px-lg {
        margin-left: 15px
    }

    .ml-15px-lg-i {
        margin-left: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-15px-md {
        margin-left: 15px
    }

    .ml-15px-md-i {
        margin-left: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-15px-sm {
        margin-left: 15px
    }

    .ml-15px-sm-i {
        margin-left: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-15px-xs {
        margin-left: 15px
    }

    .ml-15px-xs-i {
        margin-left: 15px !important
    }
}

.mt-16px-all {
    margin-top: 16px
}

.mt-16px-all-i {
    margin-top: 16px !important
}

@media screen and (min-width: 1200px) {
    .mt-16px-xl {
        margin-top: 16px
    }

    .mt-16px-xl-i {
        margin-top: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-16px-lg {
        margin-top: 16px
    }

    .mt-16px-lg-i {
        margin-top: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-16px-md {
        margin-top: 16px
    }

    .mt-16px-md-i {
        margin-top: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-16px-sm {
        margin-top: 16px
    }

    .mt-16px-sm-i {
        margin-top: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-16px-xs {
        margin-top: 16px
    }

    .mt-16px-xs-i {
        margin-top: 16px !important
    }
}

.mr-16px-all {
    margin-right: 16px
}

.mr-16px-all-i {
    margin-right: 16px !important
}

@media screen and (min-width: 1200px) {
    .mr-16px-xl {
        margin-right: 16px
    }

    .mr-16px-xl-i {
        margin-right: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-16px-lg {
        margin-right: 16px
    }

    .mr-16px-lg-i {
        margin-right: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-16px-md {
        margin-right: 16px
    }

    .mr-16px-md-i {
        margin-right: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-16px-sm {
        margin-right: 16px
    }

    .mr-16px-sm-i {
        margin-right: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-16px-xs {
        margin-right: 16px
    }

    .mr-16px-xs-i {
        margin-right: 16px !important
    }
}

.mb-16px-all {
    margin-bottom: 16px
}

.mb-16px-all-i {
    margin-bottom: 16px !important
}

@media screen and (min-width: 1200px) {
    .mb-16px-xl {
        margin-bottom: 16px
    }

    .mb-16px-xl-i {
        margin-bottom: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-16px-lg {
        margin-bottom: 16px
    }

    .mb-16px-lg-i {
        margin-bottom: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-16px-md {
        margin-bottom: 16px
    }

    .mb-16px-md-i {
        margin-bottom: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-16px-sm {
        margin-bottom: 16px
    }

    .mb-16px-sm-i {
        margin-bottom: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-16px-xs {
        margin-bottom: 16px
    }

    .mb-16px-xs-i {
        margin-bottom: 16px !important
    }
}

.ml-16px-all {
    margin-left: 16px
}

.ml-16px-all-i {
    margin-left: 16px !important
}

@media screen and (min-width: 1200px) {
    .ml-16px-xl {
        margin-left: 16px
    }

    .ml-16px-xl-i {
        margin-left: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-16px-lg {
        margin-left: 16px
    }

    .ml-16px-lg-i {
        margin-left: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-16px-md {
        margin-left: 16px
    }

    .ml-16px-md-i {
        margin-left: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-16px-sm {
        margin-left: 16px
    }

    .ml-16px-sm-i {
        margin-left: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-16px-xs {
        margin-left: 16px
    }

    .ml-16px-xs-i {
        margin-left: 16px !important
    }
}

.mt-20px-all {
    margin-top: 20px
}

.mt-20px-all-i {
    margin-top: 20px !important
}

@media screen and (min-width: 1200px) {
    .mt-20px-xl {
        margin-top: 20px
    }

    .mt-20px-xl-i {
        margin-top: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-20px-lg {
        margin-top: 20px
    }

    .mt-20px-lg-i {
        margin-top: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-20px-md {
        margin-top: 20px
    }

    .mt-20px-md-i {
        margin-top: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-20px-sm {
        margin-top: 20px
    }

    .mt-20px-sm-i {
        margin-top: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-20px-xs {
        margin-top: 20px
    }

    .mt-20px-xs-i {
        margin-top: 20px !important
    }
}

.mr-20px-all {
    margin-right: 20px
}

.mr-20px-all-i {
    margin-right: 20px !important
}

@media screen and (min-width: 1200px) {
    .mr-20px-xl {
        margin-right: 20px
    }

    .mr-20px-xl-i {
        margin-right: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-20px-lg {
        margin-right: 20px
    }

    .mr-20px-lg-i {
        margin-right: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-20px-md {
        margin-right: 20px
    }

    .mr-20px-md-i {
        margin-right: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-20px-sm {
        margin-right: 20px
    }

    .mr-20px-sm-i {
        margin-right: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-20px-xs {
        margin-right: 20px
    }

    .mr-20px-xs-i {
        margin-right: 20px !important
    }
}

.mb-20px-all {
    margin-bottom: 20px
}

.mb-20px-all-i {
    margin-bottom: 20px !important
}

@media screen and (min-width: 1200px) {
    .mb-20px-xl {
        margin-bottom: 20px
    }

    .mb-20px-xl-i {
        margin-bottom: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-20px-lg {
        margin-bottom: 20px
    }

    .mb-20px-lg-i {
        margin-bottom: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-20px-md {
        margin-bottom: 20px
    }

    .mb-20px-md-i {
        margin-bottom: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-20px-sm {
        margin-bottom: 20px
    }

    .mb-20px-sm-i {
        margin-bottom: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-20px-xs {
        margin-bottom: 20px
    }

    .mb-20px-xs-i {
        margin-bottom: 20px !important
    }
}

.ml-20px-all {
    margin-left: 20px
}

.ml-20px-all-i {
    margin-left: 20px !important
}

@media screen and (min-width: 1200px) {
    .ml-20px-xl {
        margin-left: 20px
    }

    .ml-20px-xl-i {
        margin-left: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-20px-lg {
        margin-left: 20px
    }

    .ml-20px-lg-i {
        margin-left: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-20px-md {
        margin-left: 20px
    }

    .ml-20px-md-i {
        margin-left: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-20px-sm {
        margin-left: 20px
    }

    .ml-20px-sm-i {
        margin-left: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-20px-xs {
        margin-left: 20px
    }

    .ml-20px-xs-i {
        margin-left: 20px !important
    }
}

.mt-24px-all {
    margin-top: 24px
}

.mt-24px-all-i {
    margin-top: 24px !important
}

@media screen and (min-width: 1200px) {
    .mt-24px-xl {
        margin-top: 24px
    }

    .mt-24px-xl-i {
        margin-top: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-24px-lg {
        margin-top: 24px
    }

    .mt-24px-lg-i {
        margin-top: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-24px-md {
        margin-top: 24px
    }

    .mt-24px-md-i {
        margin-top: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-24px-sm {
        margin-top: 24px
    }

    .mt-24px-sm-i {
        margin-top: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-24px-xs {
        margin-top: 24px
    }

    .mt-24px-xs-i {
        margin-top: 24px !important
    }
}

.mr-24px-all {
    margin-right: 24px
}

.mr-24px-all-i {
    margin-right: 24px !important
}

@media screen and (min-width: 1200px) {
    .mr-24px-xl {
        margin-right: 24px
    }

    .mr-24px-xl-i {
        margin-right: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-24px-lg {
        margin-right: 24px
    }

    .mr-24px-lg-i {
        margin-right: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-24px-md {
        margin-right: 24px
    }

    .mr-24px-md-i {
        margin-right: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-24px-sm {
        margin-right: 24px
    }

    .mr-24px-sm-i {
        margin-right: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-24px-xs {
        margin-right: 24px
    }

    .mr-24px-xs-i {
        margin-right: 24px !important
    }
}

.mb-24px-all {
    margin-bottom: 24px
}

.mb-24px-all-i {
    margin-bottom: 24px !important
}

@media screen and (min-width: 1200px) {
    .mb-24px-xl {
        margin-bottom: 24px
    }

    .mb-24px-xl-i {
        margin-bottom: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-24px-lg {
        margin-bottom: 24px
    }

    .mb-24px-lg-i {
        margin-bottom: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-24px-md {
        margin-bottom: 24px
    }

    .mb-24px-md-i {
        margin-bottom: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-24px-sm {
        margin-bottom: 24px
    }

    .mb-24px-sm-i {
        margin-bottom: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-24px-xs {
        margin-bottom: 24px
    }

    .mb-24px-xs-i {
        margin-bottom: 24px !important
    }
}

.ml-24px-all {
    margin-left: 24px
}

.ml-24px-all-i {
    margin-left: 24px !important
}

@media screen and (min-width: 1200px) {
    .ml-24px-xl {
        margin-left: 24px
    }

    .ml-24px-xl-i {
        margin-left: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-24px-lg {
        margin-left: 24px
    }

    .ml-24px-lg-i {
        margin-left: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-24px-md {
        margin-left: 24px
    }

    .ml-24px-md-i {
        margin-left: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-24px-sm {
        margin-left: 24px
    }

    .ml-24px-sm-i {
        margin-left: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-24px-xs {
        margin-left: 24px
    }

    .ml-24px-xs-i {
        margin-left: 24px !important
    }
}

.mt-25px-all {
    margin-top: 25px
}

.mt-25px-all-i {
    margin-top: 25px !important
}

@media screen and (min-width: 1200px) {
    .mt-25px-xl {
        margin-top: 25px
    }

    .mt-25px-xl-i {
        margin-top: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-25px-lg {
        margin-top: 25px
    }

    .mt-25px-lg-i {
        margin-top: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-25px-md {
        margin-top: 25px
    }

    .mt-25px-md-i {
        margin-top: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-25px-sm {
        margin-top: 25px
    }

    .mt-25px-sm-i {
        margin-top: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-25px-xs {
        margin-top: 25px
    }

    .mt-25px-xs-i {
        margin-top: 25px !important
    }
}

.mr-25px-all {
    margin-right: 25px
}

.mr-25px-all-i {
    margin-right: 25px !important
}

@media screen and (min-width: 1200px) {
    .mr-25px-xl {
        margin-right: 25px
    }

    .mr-25px-xl-i {
        margin-right: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-25px-lg {
        margin-right: 25px
    }

    .mr-25px-lg-i {
        margin-right: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-25px-md {
        margin-right: 25px
    }

    .mr-25px-md-i {
        margin-right: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-25px-sm {
        margin-right: 25px
    }

    .mr-25px-sm-i {
        margin-right: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-25px-xs {
        margin-right: 25px
    }

    .mr-25px-xs-i {
        margin-right: 25px !important
    }
}

.mb-25px-all {
    margin-bottom: 25px
}

.mb-25px-all-i {
    margin-bottom: 25px !important
}

@media screen and (min-width: 1200px) {
    .mb-25px-xl {
        margin-bottom: 25px
    }

    .mb-25px-xl-i {
        margin-bottom: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-25px-lg {
        margin-bottom: 25px
    }

    .mb-25px-lg-i {
        margin-bottom: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-25px-md {
        margin-bottom: 25px
    }

    .mb-25px-md-i {
        margin-bottom: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-25px-sm {
        margin-bottom: 25px
    }

    .mb-25px-sm-i {
        margin-bottom: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-25px-xs {
        margin-bottom: 25px
    }

    .mb-25px-xs-i {
        margin-bottom: 25px !important
    }
}

.ml-25px-all {
    margin-left: 25px
}

.ml-25px-all-i {
    margin-left: 25px !important
}

@media screen and (min-width: 1200px) {
    .ml-25px-xl {
        margin-left: 25px
    }

    .ml-25px-xl-i {
        margin-left: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-25px-lg {
        margin-left: 25px
    }

    .ml-25px-lg-i {
        margin-left: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-25px-md {
        margin-left: 25px
    }

    .ml-25px-md-i {
        margin-left: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-25px-sm {
        margin-left: 25px
    }

    .ml-25px-sm-i {
        margin-left: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-25px-xs {
        margin-left: 25px
    }

    .ml-25px-xs-i {
        margin-left: 25px !important
    }
}

.mt-30px-all {
    margin-top: 30px
}

.mt-30px-all-i {
    margin-top: 30px !important
}

@media screen and (min-width: 1200px) {
    .mt-30px-xl {
        margin-top: 30px
    }

    .mt-30px-xl-i {
        margin-top: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-30px-lg {
        margin-top: 30px
    }

    .mt-30px-lg-i {
        margin-top: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-30px-md {
        margin-top: 30px
    }

    .mt-30px-md-i {
        margin-top: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-30px-sm {
        margin-top: 30px
    }

    .mt-30px-sm-i {
        margin-top: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-30px-xs {
        margin-top: 30px
    }

    .mt-30px-xs-i {
        margin-top: 30px !important
    }
}

.mr-30px-all {
    margin-right: 30px
}

.mr-30px-all-i {
    margin-right: 30px !important
}

@media screen and (min-width: 1200px) {
    .mr-30px-xl {
        margin-right: 30px
    }

    .mr-30px-xl-i {
        margin-right: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-30px-lg {
        margin-right: 30px
    }

    .mr-30px-lg-i {
        margin-right: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-30px-md {
        margin-right: 30px
    }

    .mr-30px-md-i {
        margin-right: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-30px-sm {
        margin-right: 30px
    }

    .mr-30px-sm-i {
        margin-right: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-30px-xs {
        margin-right: 30px
    }

    .mr-30px-xs-i {
        margin-right: 30px !important
    }
}

.mb-30px-all {
    margin-bottom: 30px
}

.mb-30px-all-i {
    margin-bottom: 30px !important
}

@media screen and (min-width: 1200px) {
    .mb-30px-xl {
        margin-bottom: 30px
    }

    .mb-30px-xl-i {
        margin-bottom: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-30px-lg {
        margin-bottom: 30px
    }

    .mb-30px-lg-i {
        margin-bottom: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-30px-md {
        margin-bottom: 30px
    }

    .mb-30px-md-i {
        margin-bottom: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-30px-sm {
        margin-bottom: 30px
    }

    .mb-30px-sm-i {
        margin-bottom: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-30px-xs {
        margin-bottom: 30px
    }

    .mb-30px-xs-i {
        margin-bottom: 30px !important
    }
}

.ml-30px-all {
    margin-left: 30px
}

.ml-30px-all-i {
    margin-left: 30px !important
}

@media screen and (min-width: 1200px) {
    .ml-30px-xl {
        margin-left: 30px
    }

    .ml-30px-xl-i {
        margin-left: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-30px-lg {
        margin-left: 30px
    }

    .ml-30px-lg-i {
        margin-left: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-30px-md {
        margin-left: 30px
    }

    .ml-30px-md-i {
        margin-left: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-30px-sm {
        margin-left: 30px
    }

    .ml-30px-sm-i {
        margin-left: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-30px-xs {
        margin-left: 30px
    }

    .ml-30px-xs-i {
        margin-left: 30px !important
    }
}

.mt-32px-all {
    margin-top: 32px
}

.mt-32px-all-i {
    margin-top: 32px !important
}

@media screen and (min-width: 1200px) {
    .mt-32px-xl {
        margin-top: 32px
    }

    .mt-32px-xl-i {
        margin-top: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-32px-lg {
        margin-top: 32px
    }

    .mt-32px-lg-i {
        margin-top: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-32px-md {
        margin-top: 32px
    }

    .mt-32px-md-i {
        margin-top: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-32px-sm {
        margin-top: 32px
    }

    .mt-32px-sm-i {
        margin-top: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-32px-xs {
        margin-top: 32px
    }

    .mt-32px-xs-i {
        margin-top: 32px !important
    }
}

.mr-32px-all {
    margin-right: 32px
}

.mr-32px-all-i {
    margin-right: 32px !important
}

@media screen and (min-width: 1200px) {
    .mr-32px-xl {
        margin-right: 32px
    }

    .mr-32px-xl-i {
        margin-right: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-32px-lg {
        margin-right: 32px
    }

    .mr-32px-lg-i {
        margin-right: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-32px-md {
        margin-right: 32px
    }

    .mr-32px-md-i {
        margin-right: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-32px-sm {
        margin-right: 32px
    }

    .mr-32px-sm-i {
        margin-right: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-32px-xs {
        margin-right: 32px
    }

    .mr-32px-xs-i {
        margin-right: 32px !important
    }
}

.mb-32px-all {
    margin-bottom: 32px
}

.mb-32px-all-i {
    margin-bottom: 32px !important
}

@media screen and (min-width: 1200px) {
    .mb-32px-xl {
        margin-bottom: 32px
    }

    .mb-32px-xl-i {
        margin-bottom: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-32px-lg {
        margin-bottom: 32px
    }

    .mb-32px-lg-i {
        margin-bottom: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-32px-md {
        margin-bottom: 32px
    }

    .mb-32px-md-i {
        margin-bottom: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-32px-sm {
        margin-bottom: 32px
    }

    .mb-32px-sm-i {
        margin-bottom: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-32px-xs {
        margin-bottom: 32px
    }

    .mb-32px-xs-i {
        margin-bottom: 32px !important
    }
}

.ml-32px-all {
    margin-left: 32px
}

.ml-32px-all-i {
    margin-left: 32px !important
}

@media screen and (min-width: 1200px) {
    .ml-32px-xl {
        margin-left: 32px
    }

    .ml-32px-xl-i {
        margin-left: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-32px-lg {
        margin-left: 32px
    }

    .ml-32px-lg-i {
        margin-left: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-32px-md {
        margin-left: 32px
    }

    .ml-32px-md-i {
        margin-left: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-32px-sm {
        margin-left: 32px
    }

    .ml-32px-sm-i {
        margin-left: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-32px-xs {
        margin-left: 32px
    }

    .ml-32px-xs-i {
        margin-left: 32px !important
    }
}

.mt-35px-all {
    margin-top: 35px
}

.mt-35px-all-i {
    margin-top: 35px !important
}

@media screen and (min-width: 1200px) {
    .mt-35px-xl {
        margin-top: 35px
    }

    .mt-35px-xl-i {
        margin-top: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-35px-lg {
        margin-top: 35px
    }

    .mt-35px-lg-i {
        margin-top: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-35px-md {
        margin-top: 35px
    }

    .mt-35px-md-i {
        margin-top: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-35px-sm {
        margin-top: 35px
    }

    .mt-35px-sm-i {
        margin-top: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-35px-xs {
        margin-top: 35px
    }

    .mt-35px-xs-i {
        margin-top: 35px !important
    }
}

.mr-35px-all {
    margin-right: 35px
}

.mr-35px-all-i {
    margin-right: 35px !important
}

@media screen and (min-width: 1200px) {
    .mr-35px-xl {
        margin-right: 35px
    }

    .mr-35px-xl-i {
        margin-right: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-35px-lg {
        margin-right: 35px
    }

    .mr-35px-lg-i {
        margin-right: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-35px-md {
        margin-right: 35px
    }

    .mr-35px-md-i {
        margin-right: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-35px-sm {
        margin-right: 35px
    }

    .mr-35px-sm-i {
        margin-right: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-35px-xs {
        margin-right: 35px
    }

    .mr-35px-xs-i {
        margin-right: 35px !important
    }
}

.mb-35px-all {
    margin-bottom: 35px
}

.mb-35px-all-i {
    margin-bottom: 35px !important
}

@media screen and (min-width: 1200px) {
    .mb-35px-xl {
        margin-bottom: 35px
    }

    .mb-35px-xl-i {
        margin-bottom: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-35px-lg {
        margin-bottom: 35px
    }

    .mb-35px-lg-i {
        margin-bottom: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-35px-md {
        margin-bottom: 35px
    }

    .mb-35px-md-i {
        margin-bottom: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-35px-sm {
        margin-bottom: 35px
    }

    .mb-35px-sm-i {
        margin-bottom: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-35px-xs {
        margin-bottom: 35px
    }

    .mb-35px-xs-i {
        margin-bottom: 35px !important
    }
}

.ml-35px-all {
    margin-left: 35px
}

.ml-35px-all-i {
    margin-left: 35px !important
}

@media screen and (min-width: 1200px) {
    .ml-35px-xl {
        margin-left: 35px
    }

    .ml-35px-xl-i {
        margin-left: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-35px-lg {
        margin-left: 35px
    }

    .ml-35px-lg-i {
        margin-left: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-35px-md {
        margin-left: 35px
    }

    .ml-35px-md-i {
        margin-left: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-35px-sm {
        margin-left: 35px
    }

    .ml-35px-sm-i {
        margin-left: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-35px-xs {
        margin-left: 35px
    }

    .ml-35px-xs-i {
        margin-left: 35px !important
    }
}

.mt-36px-all {
    margin-top: 36px
}

.mt-36px-all-i {
    margin-top: 36px !important
}

@media screen and (min-width: 1200px) {
    .mt-36px-xl {
        margin-top: 36px
    }

    .mt-36px-xl-i {
        margin-top: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-36px-lg {
        margin-top: 36px
    }

    .mt-36px-lg-i {
        margin-top: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-36px-md {
        margin-top: 36px
    }

    .mt-36px-md-i {
        margin-top: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-36px-sm {
        margin-top: 36px
    }

    .mt-36px-sm-i {
        margin-top: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-36px-xs {
        margin-top: 36px
    }

    .mt-36px-xs-i {
        margin-top: 36px !important
    }
}

.mr-36px-all {
    margin-right: 36px
}

.mr-36px-all-i {
    margin-right: 36px !important
}

@media screen and (min-width: 1200px) {
    .mr-36px-xl {
        margin-right: 36px
    }

    .mr-36px-xl-i {
        margin-right: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-36px-lg {
        margin-right: 36px
    }

    .mr-36px-lg-i {
        margin-right: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-36px-md {
        margin-right: 36px
    }

    .mr-36px-md-i {
        margin-right: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-36px-sm {
        margin-right: 36px
    }

    .mr-36px-sm-i {
        margin-right: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-36px-xs {
        margin-right: 36px
    }

    .mr-36px-xs-i {
        margin-right: 36px !important
    }
}

.mb-36px-all {
    margin-bottom: 36px
}

.mb-36px-all-i {
    margin-bottom: 36px !important
}

@media screen and (min-width: 1200px) {
    .mb-36px-xl {
        margin-bottom: 36px
    }

    .mb-36px-xl-i {
        margin-bottom: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-36px-lg {
        margin-bottom: 36px
    }

    .mb-36px-lg-i {
        margin-bottom: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-36px-md {
        margin-bottom: 36px
    }

    .mb-36px-md-i {
        margin-bottom: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-36px-sm {
        margin-bottom: 36px
    }

    .mb-36px-sm-i {
        margin-bottom: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-36px-xs {
        margin-bottom: 36px
    }

    .mb-36px-xs-i {
        margin-bottom: 36px !important
    }
}

.ml-36px-all {
    margin-left: 36px
}

.ml-36px-all-i {
    margin-left: 36px !important
}

@media screen and (min-width: 1200px) {
    .ml-36px-xl {
        margin-left: 36px
    }

    .ml-36px-xl-i {
        margin-left: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-36px-lg {
        margin-left: 36px
    }

    .ml-36px-lg-i {
        margin-left: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-36px-md {
        margin-left: 36px
    }

    .ml-36px-md-i {
        margin-left: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-36px-sm {
        margin-left: 36px
    }

    .ml-36px-sm-i {
        margin-left: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-36px-xs {
        margin-left: 36px
    }

    .ml-36px-xs-i {
        margin-left: 36px !important
    }
}

.mt-38px-all {
    margin-top: 38px
}

.mt-38px-all-i {
    margin-top: 38px !important
}

@media screen and (min-width: 1200px) {
    .mt-38px-xl {
        margin-top: 38px
    }

    .mt-38px-xl-i {
        margin-top: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-38px-lg {
        margin-top: 38px
    }

    .mt-38px-lg-i {
        margin-top: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-38px-md {
        margin-top: 38px
    }

    .mt-38px-md-i {
        margin-top: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-38px-sm {
        margin-top: 38px
    }

    .mt-38px-sm-i {
        margin-top: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-38px-xs {
        margin-top: 38px
    }

    .mt-38px-xs-i {
        margin-top: 38px !important
    }
}

.mr-38px-all {
    margin-right: 38px
}

.mr-38px-all-i {
    margin-right: 38px !important
}

@media screen and (min-width: 1200px) {
    .mr-38px-xl {
        margin-right: 38px
    }

    .mr-38px-xl-i {
        margin-right: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-38px-lg {
        margin-right: 38px
    }

    .mr-38px-lg-i {
        margin-right: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-38px-md {
        margin-right: 38px
    }

    .mr-38px-md-i {
        margin-right: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-38px-sm {
        margin-right: 38px
    }

    .mr-38px-sm-i {
        margin-right: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-38px-xs {
        margin-right: 38px
    }

    .mr-38px-xs-i {
        margin-right: 38px !important
    }
}

.mb-38px-all {
    margin-bottom: 38px
}

.mb-38px-all-i {
    margin-bottom: 38px !important
}

@media screen and (min-width: 1200px) {
    .mb-38px-xl {
        margin-bottom: 38px
    }

    .mb-38px-xl-i {
        margin-bottom: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-38px-lg {
        margin-bottom: 38px
    }

    .mb-38px-lg-i {
        margin-bottom: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-38px-md {
        margin-bottom: 38px
    }

    .mb-38px-md-i {
        margin-bottom: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-38px-sm {
        margin-bottom: 38px
    }

    .mb-38px-sm-i {
        margin-bottom: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-38px-xs {
        margin-bottom: 38px
    }

    .mb-38px-xs-i {
        margin-bottom: 38px !important
    }
}

.ml-38px-all {
    margin-left: 38px
}

.ml-38px-all-i {
    margin-left: 38px !important
}

@media screen and (min-width: 1200px) {
    .ml-38px-xl {
        margin-left: 38px
    }

    .ml-38px-xl-i {
        margin-left: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-38px-lg {
        margin-left: 38px
    }

    .ml-38px-lg-i {
        margin-left: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-38px-md {
        margin-left: 38px
    }

    .ml-38px-md-i {
        margin-left: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-38px-sm {
        margin-left: 38px
    }

    .ml-38px-sm-i {
        margin-left: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-38px-xs {
        margin-left: 38px
    }

    .ml-38px-xs-i {
        margin-left: 38px !important
    }
}

.mt-40px-all {
    margin-top: 40px
}

.mt-40px-all-i {
    margin-top: 40px !important
}

@media screen and (min-width: 1200px) {
    .mt-40px-xl {
        margin-top: 40px
    }

    .mt-40px-xl-i {
        margin-top: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-40px-lg {
        margin-top: 40px
    }

    .mt-40px-lg-i {
        margin-top: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-40px-md {
        margin-top: 40px
    }

    .mt-40px-md-i {
        margin-top: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-40px-sm {
        margin-top: 40px
    }

    .mt-40px-sm-i {
        margin-top: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-40px-xs {
        margin-top: 40px
    }

    .mt-40px-xs-i {
        margin-top: 40px !important
    }
}

.mr-40px-all {
    margin-right: 40px
}

.mr-40px-all-i {
    margin-right: 40px !important
}

@media screen and (min-width: 1200px) {
    .mr-40px-xl {
        margin-right: 40px
    }

    .mr-40px-xl-i {
        margin-right: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-40px-lg {
        margin-right: 40px
    }

    .mr-40px-lg-i {
        margin-right: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-40px-md {
        margin-right: 40px
    }

    .mr-40px-md-i {
        margin-right: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-40px-sm {
        margin-right: 40px
    }

    .mr-40px-sm-i {
        margin-right: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-40px-xs {
        margin-right: 40px
    }

    .mr-40px-xs-i {
        margin-right: 40px !important
    }
}

.mb-40px-all {
    margin-bottom: 40px
}

.mb-40px-all-i {
    margin-bottom: 40px !important
}

@media screen and (min-width: 1200px) {
    .mb-40px-xl {
        margin-bottom: 40px
    }

    .mb-40px-xl-i {
        margin-bottom: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-40px-lg {
        margin-bottom: 40px
    }

    .mb-40px-lg-i {
        margin-bottom: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-40px-md {
        margin-bottom: 40px
    }

    .mb-40px-md-i {
        margin-bottom: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-40px-sm {
        margin-bottom: 40px
    }

    .mb-40px-sm-i {
        margin-bottom: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-40px-xs {
        margin-bottom: 40px
    }

    .mb-40px-xs-i {
        margin-bottom: 40px !important
    }
}

.ml-40px-all {
    margin-left: 40px
}

.ml-40px-all-i {
    margin-left: 40px !important
}

@media screen and (min-width: 1200px) {
    .ml-40px-xl {
        margin-left: 40px
    }

    .ml-40px-xl-i {
        margin-left: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-40px-lg {
        margin-left: 40px
    }

    .ml-40px-lg-i {
        margin-left: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-40px-md {
        margin-left: 40px
    }

    .ml-40px-md-i {
        margin-left: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-40px-sm {
        margin-left: 40px
    }

    .ml-40px-sm-i {
        margin-left: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-40px-xs {
        margin-left: 40px
    }

    .ml-40px-xs-i {
        margin-left: 40px !important
    }
}

.mt-45px-all {
    margin-top: 45px
}

.mt-45px-all-i {
    margin-top: 45px !important
}

@media screen and (min-width: 1200px) {
    .mt-45px-xl {
        margin-top: 45px
    }

    .mt-45px-xl-i {
        margin-top: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-45px-lg {
        margin-top: 45px
    }

    .mt-45px-lg-i {
        margin-top: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-45px-md {
        margin-top: 45px
    }

    .mt-45px-md-i {
        margin-top: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-45px-sm {
        margin-top: 45px
    }

    .mt-45px-sm-i {
        margin-top: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-45px-xs {
        margin-top: 45px
    }

    .mt-45px-xs-i {
        margin-top: 45px !important
    }
}

.mr-45px-all {
    margin-right: 45px
}

.mr-45px-all-i {
    margin-right: 45px !important
}

@media screen and (min-width: 1200px) {
    .mr-45px-xl {
        margin-right: 45px
    }

    .mr-45px-xl-i {
        margin-right: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-45px-lg {
        margin-right: 45px
    }

    .mr-45px-lg-i {
        margin-right: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-45px-md {
        margin-right: 45px
    }

    .mr-45px-md-i {
        margin-right: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-45px-sm {
        margin-right: 45px
    }

    .mr-45px-sm-i {
        margin-right: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-45px-xs {
        margin-right: 45px
    }

    .mr-45px-xs-i {
        margin-right: 45px !important
    }
}

.mb-45px-all {
    margin-bottom: 45px
}

.mb-45px-all-i {
    margin-bottom: 45px !important
}

@media screen and (min-width: 1200px) {
    .mb-45px-xl {
        margin-bottom: 45px
    }

    .mb-45px-xl-i {
        margin-bottom: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-45px-lg {
        margin-bottom: 45px
    }

    .mb-45px-lg-i {
        margin-bottom: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-45px-md {
        margin-bottom: 45px
    }

    .mb-45px-md-i {
        margin-bottom: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-45px-sm {
        margin-bottom: 45px
    }

    .mb-45px-sm-i {
        margin-bottom: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-45px-xs {
        margin-bottom: 45px
    }

    .mb-45px-xs-i {
        margin-bottom: 45px !important
    }
}

.ml-45px-all {
    margin-left: 45px
}

.ml-45px-all-i {
    margin-left: 45px !important
}

@media screen and (min-width: 1200px) {
    .ml-45px-xl {
        margin-left: 45px
    }

    .ml-45px-xl-i {
        margin-left: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-45px-lg {
        margin-left: 45px
    }

    .ml-45px-lg-i {
        margin-left: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-45px-md {
        margin-left: 45px
    }

    .ml-45px-md-i {
        margin-left: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-45px-sm {
        margin-left: 45px
    }

    .ml-45px-sm-i {
        margin-left: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-45px-xs {
        margin-left: 45px
    }

    .ml-45px-xs-i {
        margin-left: 45px !important
    }
}

.mt-48px-all {
    margin-top: 48px
}

.mt-48px-all-i {
    margin-top: 48px !important
}

@media screen and (min-width: 1200px) {
    .mt-48px-xl {
        margin-top: 48px
    }

    .mt-48px-xl-i {
        margin-top: 48px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-48px-lg {
        margin-top: 48px
    }

    .mt-48px-lg-i {
        margin-top: 48px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-48px-md {
        margin-top: 48px
    }

    .mt-48px-md-i {
        margin-top: 48px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-48px-sm {
        margin-top: 48px
    }

    .mt-48px-sm-i {
        margin-top: 48px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-48px-xs {
        margin-top: 48px
    }

    .mt-48px-xs-i {
        margin-top: 48px !important
    }
}

.mr-48px-all {
    margin-right: 48px
}

.mr-48px-all-i {
    margin-right: 48px !important
}

@media screen and (min-width: 1200px) {
    .mr-48px-xl {
        margin-right: 48px
    }

    .mr-48px-xl-i {
        margin-right: 48px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-48px-lg {
        margin-right: 48px
    }

    .mr-48px-lg-i {
        margin-right: 48px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-48px-md {
        margin-right: 48px
    }

    .mr-48px-md-i {
        margin-right: 48px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-48px-sm {
        margin-right: 48px
    }

    .mr-48px-sm-i {
        margin-right: 48px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-48px-xs {
        margin-right: 48px
    }

    .mr-48px-xs-i {
        margin-right: 48px !important
    }
}

.mb-48px-all {
    margin-bottom: 48px
}

.mb-48px-all-i {
    margin-bottom: 48px !important
}

@media screen and (min-width: 1200px) {
    .mb-48px-xl {
        margin-bottom: 48px
    }

    .mb-48px-xl-i {
        margin-bottom: 48px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-48px-lg {
        margin-bottom: 48px
    }

    .mb-48px-lg-i {
        margin-bottom: 48px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-48px-md {
        margin-bottom: 48px
    }

    .mb-48px-md-i {
        margin-bottom: 48px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-48px-sm {
        margin-bottom: 48px
    }

    .mb-48px-sm-i {
        margin-bottom: 48px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-48px-xs {
        margin-bottom: 48px
    }

    .mb-48px-xs-i {
        margin-bottom: 48px !important
    }
}

.ml-48px-all {
    margin-left: 48px
}

.ml-48px-all-i {
    margin-left: 48px !important
}

@media screen and (min-width: 1200px) {
    .ml-48px-xl {
        margin-left: 48px
    }

    .ml-48px-xl-i {
        margin-left: 48px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-48px-lg {
        margin-left: 48px
    }

    .ml-48px-lg-i {
        margin-left: 48px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-48px-md {
        margin-left: 48px
    }

    .ml-48px-md-i {
        margin-left: 48px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-48px-sm {
        margin-left: 48px
    }

    .ml-48px-sm-i {
        margin-left: 48px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-48px-xs {
        margin-left: 48px
    }

    .ml-48px-xs-i {
        margin-left: 48px !important
    }
}

.mt-50px-all {
    margin-top: 50px
}

.mt-50px-all-i {
    margin-top: 50px !important
}

@media screen and (min-width: 1200px) {
    .mt-50px-xl {
        margin-top: 50px
    }

    .mt-50px-xl-i {
        margin-top: 50px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-50px-lg {
        margin-top: 50px
    }

    .mt-50px-lg-i {
        margin-top: 50px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-50px-md {
        margin-top: 50px
    }

    .mt-50px-md-i {
        margin-top: 50px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-50px-sm {
        margin-top: 50px
    }

    .mt-50px-sm-i {
        margin-top: 50px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-50px-xs {
        margin-top: 50px
    }

    .mt-50px-xs-i {
        margin-top: 50px !important
    }
}

.mr-50px-all {
    margin-right: 50px
}

.mr-50px-all-i {
    margin-right: 50px !important
}

@media screen and (min-width: 1200px) {
    .mr-50px-xl {
        margin-right: 50px
    }

    .mr-50px-xl-i {
        margin-right: 50px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-50px-lg {
        margin-right: 50px
    }

    .mr-50px-lg-i {
        margin-right: 50px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-50px-md {
        margin-right: 50px
    }

    .mr-50px-md-i {
        margin-right: 50px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-50px-sm {
        margin-right: 50px
    }

    .mr-50px-sm-i {
        margin-right: 50px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-50px-xs {
        margin-right: 50px
    }

    .mr-50px-xs-i {
        margin-right: 50px !important
    }
}

.mb-50px-all {
    margin-bottom: 50px
}

.mb-50px-all-i {
    margin-bottom: 50px !important
}

@media screen and (min-width: 1200px) {
    .mb-50px-xl {
        margin-bottom: 50px
    }

    .mb-50px-xl-i {
        margin-bottom: 50px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-50px-lg {
        margin-bottom: 50px
    }

    .mb-50px-lg-i {
        margin-bottom: 50px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-50px-md {
        margin-bottom: 50px
    }

    .mb-50px-md-i {
        margin-bottom: 50px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-50px-sm {
        margin-bottom: 50px
    }

    .mb-50px-sm-i {
        margin-bottom: 50px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-50px-xs {
        margin-bottom: 50px
    }

    .mb-50px-xs-i {
        margin-bottom: 50px !important
    }
}

.ml-50px-all {
    margin-left: 50px
}

.ml-50px-all-i {
    margin-left: 50px !important
}

@media screen and (min-width: 1200px) {
    .ml-50px-xl {
        margin-left: 50px
    }

    .ml-50px-xl-i {
        margin-left: 50px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-50px-lg {
        margin-left: 50px
    }

    .ml-50px-lg-i {
        margin-left: 50px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-50px-md {
        margin-left: 50px
    }

    .ml-50px-md-i {
        margin-left: 50px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-50px-sm {
        margin-left: 50px
    }

    .ml-50px-sm-i {
        margin-left: 50px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-50px-xs {
        margin-left: 50px
    }

    .ml-50px-xs-i {
        margin-left: 50px !important
    }
}

.mt-56px-all {
    margin-top: 56px
}

.mt-56px-all-i {
    margin-top: 56px !important
}

@media screen and (min-width: 1200px) {
    .mt-56px-xl {
        margin-top: 56px
    }

    .mt-56px-xl-i {
        margin-top: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-56px-lg {
        margin-top: 56px
    }

    .mt-56px-lg-i {
        margin-top: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-56px-md {
        margin-top: 56px
    }

    .mt-56px-md-i {
        margin-top: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-56px-sm {
        margin-top: 56px
    }

    .mt-56px-sm-i {
        margin-top: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-56px-xs {
        margin-top: 56px
    }

    .mt-56px-xs-i {
        margin-top: 56px !important
    }
}

.mr-56px-all {
    margin-right: 56px
}

.mr-56px-all-i {
    margin-right: 56px !important
}

@media screen and (min-width: 1200px) {
    .mr-56px-xl {
        margin-right: 56px
    }

    .mr-56px-xl-i {
        margin-right: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-56px-lg {
        margin-right: 56px
    }

    .mr-56px-lg-i {
        margin-right: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-56px-md {
        margin-right: 56px
    }

    .mr-56px-md-i {
        margin-right: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-56px-sm {
        margin-right: 56px
    }

    .mr-56px-sm-i {
        margin-right: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-56px-xs {
        margin-right: 56px
    }

    .mr-56px-xs-i {
        margin-right: 56px !important
    }
}

.mb-56px-all {
    margin-bottom: 56px
}

.mb-56px-all-i {
    margin-bottom: 56px !important
}

@media screen and (min-width: 1200px) {
    .mb-56px-xl {
        margin-bottom: 56px
    }

    .mb-56px-xl-i {
        margin-bottom: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-56px-lg {
        margin-bottom: 56px
    }

    .mb-56px-lg-i {
        margin-bottom: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-56px-md {
        margin-bottom: 56px
    }

    .mb-56px-md-i {
        margin-bottom: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-56px-sm {
        margin-bottom: 56px
    }

    .mb-56px-sm-i {
        margin-bottom: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-56px-xs {
        margin-bottom: 56px
    }

    .mb-56px-xs-i {
        margin-bottom: 56px !important
    }
}

.ml-56px-all {
    margin-left: 56px
}

.ml-56px-all-i {
    margin-left: 56px !important
}

@media screen and (min-width: 1200px) {
    .ml-56px-xl {
        margin-left: 56px
    }

    .ml-56px-xl-i {
        margin-left: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-56px-lg {
        margin-left: 56px
    }

    .ml-56px-lg-i {
        margin-left: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-56px-md {
        margin-left: 56px
    }

    .ml-56px-md-i {
        margin-left: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-56px-sm {
        margin-left: 56px
    }

    .ml-56px-sm-i {
        margin-left: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-56px-xs {
        margin-left: 56px
    }

    .ml-56px-xs-i {
        margin-left: 56px !important
    }
}

.mt-64px-all {
    margin-top: 64px
}

.mt-64px-all-i {
    margin-top: 64px !important
}

@media screen and (min-width: 1200px) {
    .mt-64px-xl {
        margin-top: 64px
    }

    .mt-64px-xl-i {
        margin-top: 64px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-64px-lg {
        margin-top: 64px
    }

    .mt-64px-lg-i {
        margin-top: 64px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-64px-md {
        margin-top: 64px
    }

    .mt-64px-md-i {
        margin-top: 64px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-64px-sm {
        margin-top: 64px
    }

    .mt-64px-sm-i {
        margin-top: 64px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-64px-xs {
        margin-top: 64px
    }

    .mt-64px-xs-i {
        margin-top: 64px !important
    }
}

.mr-64px-all {
    margin-right: 64px
}

.mr-64px-all-i {
    margin-right: 64px !important
}

@media screen and (min-width: 1200px) {
    .mr-64px-xl {
        margin-right: 64px
    }

    .mr-64px-xl-i {
        margin-right: 64px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-64px-lg {
        margin-right: 64px
    }

    .mr-64px-lg-i {
        margin-right: 64px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-64px-md {
        margin-right: 64px
    }

    .mr-64px-md-i {
        margin-right: 64px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-64px-sm {
        margin-right: 64px
    }

    .mr-64px-sm-i {
        margin-right: 64px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-64px-xs {
        margin-right: 64px
    }

    .mr-64px-xs-i {
        margin-right: 64px !important
    }
}

.mb-64px-all {
    margin-bottom: 64px
}

.mb-64px-all-i {
    margin-bottom: 64px !important
}

@media screen and (min-width: 1200px) {
    .mb-64px-xl {
        margin-bottom: 64px
    }

    .mb-64px-xl-i {
        margin-bottom: 64px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-64px-lg {
        margin-bottom: 64px
    }

    .mb-64px-lg-i {
        margin-bottom: 64px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-64px-md {
        margin-bottom: 64px
    }

    .mb-64px-md-i {
        margin-bottom: 64px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-64px-sm {
        margin-bottom: 64px
    }

    .mb-64px-sm-i {
        margin-bottom: 64px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-64px-xs {
        margin-bottom: 64px
    }

    .mb-64px-xs-i {
        margin-bottom: 64px !important
    }
}

.ml-64px-all {
    margin-left: 64px
}

.ml-64px-all-i {
    margin-left: 64px !important
}

@media screen and (min-width: 1200px) {
    .ml-64px-xl {
        margin-left: 64px
    }

    .ml-64px-xl-i {
        margin-left: 64px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-64px-lg {
        margin-left: 64px
    }

    .ml-64px-lg-i {
        margin-left: 64px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-64px-md {
        margin-left: 64px
    }

    .ml-64px-md-i {
        margin-left: 64px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-64px-sm {
        margin-left: 64px
    }

    .ml-64px-sm-i {
        margin-left: 64px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-64px-xs {
        margin-left: 64px
    }

    .ml-64px-xs-i {
        margin-left: 64px !important
    }
}

.mt-80px-all {
    margin-top: 80px
}

.mt-80px-all-i {
    margin-top: 80px !important
}

@media screen and (min-width: 1200px) {
    .mt-80px-xl {
        margin-top: 80px
    }

    .mt-80px-xl-i {
        margin-top: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-80px-lg {
        margin-top: 80px
    }

    .mt-80px-lg-i {
        margin-top: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-80px-md {
        margin-top: 80px
    }

    .mt-80px-md-i {
        margin-top: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-80px-sm {
        margin-top: 80px
    }

    .mt-80px-sm-i {
        margin-top: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-80px-xs {
        margin-top: 80px
    }

    .mt-80px-xs-i {
        margin-top: 80px !important
    }
}

.mr-80px-all {
    margin-right: 80px
}

.mr-80px-all-i {
    margin-right: 80px !important
}

@media screen and (min-width: 1200px) {
    .mr-80px-xl {
        margin-right: 80px
    }

    .mr-80px-xl-i {
        margin-right: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-80px-lg {
        margin-right: 80px
    }

    .mr-80px-lg-i {
        margin-right: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-80px-md {
        margin-right: 80px
    }

    .mr-80px-md-i {
        margin-right: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-80px-sm {
        margin-right: 80px
    }

    .mr-80px-sm-i {
        margin-right: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-80px-xs {
        margin-right: 80px
    }

    .mr-80px-xs-i {
        margin-right: 80px !important
    }
}

.mb-80px-all {
    margin-bottom: 80px
}

.mb-80px-all-i {
    margin-bottom: 80px !important
}

@media screen and (min-width: 1200px) {
    .mb-80px-xl {
        margin-bottom: 80px
    }

    .mb-80px-xl-i {
        margin-bottom: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-80px-lg {
        margin-bottom: 80px
    }

    .mb-80px-lg-i {
        margin-bottom: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-80px-md {
        margin-bottom: 80px
    }

    .mb-80px-md-i {
        margin-bottom: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-80px-sm {
        margin-bottom: 80px
    }

    .mb-80px-sm-i {
        margin-bottom: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-80px-xs {
        margin-bottom: 80px
    }

    .mb-80px-xs-i {
        margin-bottom: 80px !important
    }
}

.ml-80px-all {
    margin-left: 80px
}

.ml-80px-all-i {
    margin-left: 80px !important
}

@media screen and (min-width: 1200px) {
    .ml-80px-xl {
        margin-left: 80px
    }

    .ml-80px-xl-i {
        margin-left: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-80px-lg {
        margin-left: 80px
    }

    .ml-80px-lg-i {
        margin-left: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-80px-md {
        margin-left: 80px
    }

    .ml-80px-md-i {
        margin-left: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-80px-sm {
        margin-left: 80px
    }

    .ml-80px-sm-i {
        margin-left: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-80px-xs {
        margin-left: 80px
    }

    .ml-80px-xs-i {
        margin-left: 80px !important
    }
}

.mt-100px-all {
    margin-top: 100px
}

.mt-100px-all-i {
    margin-top: 100px !important
}

@media screen and (min-width: 1200px) {
    .mt-100px-xl {
        margin-top: 100px
    }

    .mt-100px-xl-i {
        margin-top: 100px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-100px-lg {
        margin-top: 100px
    }

    .mt-100px-lg-i {
        margin-top: 100px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-100px-md {
        margin-top: 100px
    }

    .mt-100px-md-i {
        margin-top: 100px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-100px-sm {
        margin-top: 100px
    }

    .mt-100px-sm-i {
        margin-top: 100px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-100px-xs {
        margin-top: 100px
    }

    .mt-100px-xs-i {
        margin-top: 100px !important
    }
}

.mr-100px-all {
    margin-right: 100px
}

.mr-100px-all-i {
    margin-right: 100px !important
}

@media screen and (min-width: 1200px) {
    .mr-100px-xl {
        margin-right: 100px
    }

    .mr-100px-xl-i {
        margin-right: 100px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mr-100px-lg {
        margin-right: 100px
    }

    .mr-100px-lg-i {
        margin-right: 100px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mr-100px-md {
        margin-right: 100px
    }

    .mr-100px-md-i {
        margin-right: 100px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mr-100px-sm {
        margin-right: 100px
    }

    .mr-100px-sm-i {
        margin-right: 100px !important
    }
}

@media screen and (max-width: 576px) {
    .mr-100px-xs {
        margin-right: 100px
    }

    .mr-100px-xs-i {
        margin-right: 100px !important
    }
}

.mb-100px-all {
    margin-bottom: 100px
}

.mb-100px-all-i {
    margin-bottom: 100px !important
}

@media screen and (min-width: 1200px) {
    .mb-100px-xl {
        margin-bottom: 100px
    }

    .mb-100px-xl-i {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mb-100px-lg {
        margin-bottom: 100px
    }

    .mb-100px-lg-i {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mb-100px-md {
        margin-bottom: 100px
    }

    .mb-100px-md-i {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mb-100px-sm {
        margin-bottom: 100px
    }

    .mb-100px-sm-i {
        margin-bottom: 100px !important
    }
}

@media screen and (max-width: 576px) {
    .mb-100px-xs {
        margin-bottom: 100px
    }

    .mb-100px-xs-i {
        margin-bottom: 100px !important
    }
}

.ml-100px-all {
    margin-left: 100px
}

.ml-100px-all-i {
    margin-left: 100px !important
}

@media screen and (min-width: 1200px) {
    .ml-100px-xl {
        margin-left: 100px
    }

    .ml-100px-xl-i {
        margin-left: 100px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .ml-100px-lg {
        margin-left: 100px
    }

    .ml-100px-lg-i {
        margin-left: 100px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .ml-100px-md {
        margin-left: 100px
    }

    .ml-100px-md-i {
        margin-left: 100px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .ml-100px-sm {
        margin-left: 100px
    }

    .ml-100px-sm-i {
        margin-left: 100px !important
    }
}

@media screen and (max-width: 576px) {
    .ml-100px-xs {
        margin-left: 100px
    }

    .ml-100px-xs-i {
        margin-left: 100px !important
    }
}

.pt-0px-all {
    padding-top: 0
}

.pt-0px-all-i {
    padding-top: 0 !important
}

@media screen and (min-width: 1200px) {
    .pt-0px-xl {
        padding-top: 0
    }

    .pt-0px-xl-i {
        padding-top: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-0px-lg {
        padding-top: 0
    }

    .pt-0px-lg-i {
        padding-top: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-0px-md {
        padding-top: 0
    }

    .pt-0px-md-i {
        padding-top: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-0px-sm {
        padding-top: 0
    }

    .pt-0px-sm-i {
        padding-top: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .pt-0px-xs {
        padding-top: 0
    }

    .pt-0px-xs-i {
        padding-top: 0 !important
    }
}

.pr-0px-all {
    padding-right: 0
}

.pr-0px-all-i {
    padding-right: 0 !important
}

@media screen and (min-width: 1200px) {
    .pr-0px-xl {
        padding-right: 0
    }

    .pr-0px-xl-i {
        padding-right: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-0px-lg {
        padding-right: 0
    }

    .pr-0px-lg-i {
        padding-right: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-0px-md {
        padding-right: 0
    }

    .pr-0px-md-i {
        padding-right: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-0px-sm {
        padding-right: 0
    }

    .pr-0px-sm-i {
        padding-right: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .pr-0px-xs {
        padding-right: 0
    }

    .pr-0px-xs-i {
        padding-right: 0 !important
    }
}

.pb-0px-all {
    padding-bottom: 0
}

.pb-0px-all-i {
    padding-bottom: 0 !important
}

@media screen and (min-width: 1200px) {
    .pb-0px-xl {
        padding-bottom: 0
    }

    .pb-0px-xl-i {
        padding-bottom: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-0px-lg {
        padding-bottom: 0
    }

    .pb-0px-lg-i {
        padding-bottom: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-0px-md {
        padding-bottom: 0
    }

    .pb-0px-md-i {
        padding-bottom: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-0px-sm {
        padding-bottom: 0
    }

    .pb-0px-sm-i {
        padding-bottom: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .pb-0px-xs {
        padding-bottom: 0
    }

    .pb-0px-xs-i {
        padding-bottom: 0 !important
    }
}

.pl-0px-all {
    padding-left: 0
}

.pl-0px-all-i {
    padding-left: 0 !important
}

@media screen and (min-width: 1200px) {
    .pl-0px-xl {
        padding-left: 0
    }

    .pl-0px-xl-i {
        padding-left: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-0px-lg {
        padding-left: 0
    }

    .pl-0px-lg-i {
        padding-left: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-0px-md {
        padding-left: 0
    }

    .pl-0px-md-i {
        padding-left: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-0px-sm {
        padding-left: 0
    }

    .pl-0px-sm-i {
        padding-left: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .pl-0px-xs {
        padding-left: 0
    }

    .pl-0px-xs-i {
        padding-left: 0 !important
    }
}

.pt-4px-all {
    padding-top: 4px
}

.pt-4px-all-i {
    padding-top: 4px !important
}

@media screen and (min-width: 1200px) {
    .pt-4px-xl {
        padding-top: 4px
    }

    .pt-4px-xl-i {
        padding-top: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-4px-lg {
        padding-top: 4px
    }

    .pt-4px-lg-i {
        padding-top: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-4px-md {
        padding-top: 4px
    }

    .pt-4px-md-i {
        padding-top: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-4px-sm {
        padding-top: 4px
    }

    .pt-4px-sm-i {
        padding-top: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-4px-xs {
        padding-top: 4px
    }

    .pt-4px-xs-i {
        padding-top: 4px !important
    }
}

.pr-4px-all {
    padding-right: 4px
}

.pr-4px-all-i {
    padding-right: 4px !important
}

@media screen and (min-width: 1200px) {
    .pr-4px-xl {
        padding-right: 4px
    }

    .pr-4px-xl-i {
        padding-right: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-4px-lg {
        padding-right: 4px
    }

    .pr-4px-lg-i {
        padding-right: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-4px-md {
        padding-right: 4px
    }

    .pr-4px-md-i {
        padding-right: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-4px-sm {
        padding-right: 4px
    }

    .pr-4px-sm-i {
        padding-right: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-4px-xs {
        padding-right: 4px
    }

    .pr-4px-xs-i {
        padding-right: 4px !important
    }
}

.pb-4px-all {
    padding-bottom: 4px
}

.pb-4px-all-i {
    padding-bottom: 4px !important
}

@media screen and (min-width: 1200px) {
    .pb-4px-xl {
        padding-bottom: 4px
    }

    .pb-4px-xl-i {
        padding-bottom: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-4px-lg {
        padding-bottom: 4px
    }

    .pb-4px-lg-i {
        padding-bottom: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-4px-md {
        padding-bottom: 4px
    }

    .pb-4px-md-i {
        padding-bottom: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-4px-sm {
        padding-bottom: 4px
    }

    .pb-4px-sm-i {
        padding-bottom: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-4px-xs {
        padding-bottom: 4px
    }

    .pb-4px-xs-i {
        padding-bottom: 4px !important
    }
}

.pl-4px-all {
    padding-left: 4px
}

.pl-4px-all-i {
    padding-left: 4px !important
}

@media screen and (min-width: 1200px) {
    .pl-4px-xl {
        padding-left: 4px
    }

    .pl-4px-xl-i {
        padding-left: 4px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-4px-lg {
        padding-left: 4px
    }

    .pl-4px-lg-i {
        padding-left: 4px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-4px-md {
        padding-left: 4px
    }

    .pl-4px-md-i {
        padding-left: 4px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-4px-sm {
        padding-left: 4px
    }

    .pl-4px-sm-i {
        padding-left: 4px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-4px-xs {
        padding-left: 4px
    }

    .pl-4px-xs-i {
        padding-left: 4px !important
    }
}

.pt-5px-all {
    padding-top: 5px
}

.pt-5px-all-i {
    padding-top: 5px !important
}

@media screen and (min-width: 1200px) {
    .pt-5px-xl {
        padding-top: 5px
    }

    .pt-5px-xl-i {
        padding-top: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-5px-lg {
        padding-top: 5px
    }

    .pt-5px-lg-i {
        padding-top: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-5px-md {
        padding-top: 5px
    }

    .pt-5px-md-i {
        padding-top: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-5px-sm {
        padding-top: 5px
    }

    .pt-5px-sm-i {
        padding-top: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-5px-xs {
        padding-top: 5px
    }

    .pt-5px-xs-i {
        padding-top: 5px !important
    }
}

.pr-5px-all {
    padding-right: 5px
}

.pr-5px-all-i {
    padding-right: 5px !important
}

@media screen and (min-width: 1200px) {
    .pr-5px-xl {
        padding-right: 5px
    }

    .pr-5px-xl-i {
        padding-right: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-5px-lg {
        padding-right: 5px
    }

    .pr-5px-lg-i {
        padding-right: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-5px-md {
        padding-right: 5px
    }

    .pr-5px-md-i {
        padding-right: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-5px-sm {
        padding-right: 5px
    }

    .pr-5px-sm-i {
        padding-right: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-5px-xs {
        padding-right: 5px
    }

    .pr-5px-xs-i {
        padding-right: 5px !important
    }
}

.pb-5px-all {
    padding-bottom: 5px
}

.pb-5px-all-i {
    padding-bottom: 5px !important
}

@media screen and (min-width: 1200px) {
    .pb-5px-xl {
        padding-bottom: 5px
    }

    .pb-5px-xl-i {
        padding-bottom: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-5px-lg {
        padding-bottom: 5px
    }

    .pb-5px-lg-i {
        padding-bottom: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-5px-md {
        padding-bottom: 5px
    }

    .pb-5px-md-i {
        padding-bottom: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-5px-sm {
        padding-bottom: 5px
    }

    .pb-5px-sm-i {
        padding-bottom: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-5px-xs {
        padding-bottom: 5px
    }

    .pb-5px-xs-i {
        padding-bottom: 5px !important
    }
}

.pl-5px-all {
    padding-left: 5px
}

.pl-5px-all-i {
    padding-left: 5px !important
}

@media screen and (min-width: 1200px) {
    .pl-5px-xl {
        padding-left: 5px
    }

    .pl-5px-xl-i {
        padding-left: 5px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-5px-lg {
        padding-left: 5px
    }

    .pl-5px-lg-i {
        padding-left: 5px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-5px-md {
        padding-left: 5px
    }

    .pl-5px-md-i {
        padding-left: 5px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-5px-sm {
        padding-left: 5px
    }

    .pl-5px-sm-i {
        padding-left: 5px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-5px-xs {
        padding-left: 5px
    }

    .pl-5px-xs-i {
        padding-left: 5px !important
    }
}

.pt-8px-all {
    padding-top: 8px
}

.pt-8px-all-i {
    padding-top: 8px !important
}

@media screen and (min-width: 1200px) {
    .pt-8px-xl {
        padding-top: 8px
    }

    .pt-8px-xl-i {
        padding-top: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-8px-lg {
        padding-top: 8px
    }

    .pt-8px-lg-i {
        padding-top: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-8px-md {
        padding-top: 8px
    }

    .pt-8px-md-i {
        padding-top: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-8px-sm {
        padding-top: 8px
    }

    .pt-8px-sm-i {
        padding-top: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-8px-xs {
        padding-top: 8px
    }

    .pt-8px-xs-i {
        padding-top: 8px !important
    }
}

.pr-8px-all {
    padding-right: 8px
}

.pr-8px-all-i {
    padding-right: 8px !important
}

@media screen and (min-width: 1200px) {
    .pr-8px-xl {
        padding-right: 8px
    }

    .pr-8px-xl-i {
        padding-right: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-8px-lg {
        padding-right: 8px
    }

    .pr-8px-lg-i {
        padding-right: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-8px-md {
        padding-right: 8px
    }

    .pr-8px-md-i {
        padding-right: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-8px-sm {
        padding-right: 8px
    }

    .pr-8px-sm-i {
        padding-right: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-8px-xs {
        padding-right: 8px
    }

    .pr-8px-xs-i {
        padding-right: 8px !important
    }
}

.pb-8px-all {
    padding-bottom: 8px
}

.pb-8px-all-i {
    padding-bottom: 8px !important
}

@media screen and (min-width: 1200px) {
    .pb-8px-xl {
        padding-bottom: 8px
    }

    .pb-8px-xl-i {
        padding-bottom: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-8px-lg {
        padding-bottom: 8px
    }

    .pb-8px-lg-i {
        padding-bottom: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-8px-md {
        padding-bottom: 8px
    }

    .pb-8px-md-i {
        padding-bottom: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-8px-sm {
        padding-bottom: 8px
    }

    .pb-8px-sm-i {
        padding-bottom: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-8px-xs {
        padding-bottom: 8px
    }

    .pb-8px-xs-i {
        padding-bottom: 8px !important
    }
}

.pl-8px-all {
    padding-left: 8px
}

.pl-8px-all-i {
    padding-left: 8px !important
}

@media screen and (min-width: 1200px) {
    .pl-8px-xl {
        padding-left: 8px
    }

    .pl-8px-xl-i {
        padding-left: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-8px-lg {
        padding-left: 8px
    }

    .pl-8px-lg-i {
        padding-left: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-8px-md {
        padding-left: 8px
    }

    .pl-8px-md-i {
        padding-left: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-8px-sm {
        padding-left: 8px
    }

    .pl-8px-sm-i {
        padding-left: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-8px-xs {
        padding-left: 8px
    }

    .pl-8px-xs-i {
        padding-left: 8px !important
    }
}

.pt-10px-all {
    padding-top: 10px
}

.pt-10px-all-i {
    padding-top: 10px !important
}

@media screen and (min-width: 1200px) {
    .pt-10px-xl {
        padding-top: 10px
    }

    .pt-10px-xl-i {
        padding-top: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-10px-lg {
        padding-top: 10px
    }

    .pt-10px-lg-i {
        padding-top: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-10px-md {
        padding-top: 10px
    }

    .pt-10px-md-i {
        padding-top: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-10px-sm {
        padding-top: 10px
    }

    .pt-10px-sm-i {
        padding-top: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-10px-xs {
        padding-top: 10px
    }

    .pt-10px-xs-i {
        padding-top: 10px !important
    }
}

.pr-10px-all {
    padding-right: 10px
}

.pr-10px-all-i {
    padding-right: 10px !important
}

@media screen and (min-width: 1200px) {
    .pr-10px-xl {
        padding-right: 10px
    }

    .pr-10px-xl-i {
        padding-right: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-10px-lg {
        padding-right: 10px
    }

    .pr-10px-lg-i {
        padding-right: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-10px-md {
        padding-right: 10px
    }

    .pr-10px-md-i {
        padding-right: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-10px-sm {
        padding-right: 10px
    }

    .pr-10px-sm-i {
        padding-right: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-10px-xs {
        padding-right: 10px
    }

    .pr-10px-xs-i {
        padding-right: 10px !important
    }
}

.pb-10px-all {
    padding-bottom: 10px
}

.pb-10px-all-i {
    padding-bottom: 10px !important
}

@media screen and (min-width: 1200px) {
    .pb-10px-xl {
        padding-bottom: 10px
    }

    .pb-10px-xl-i {
        padding-bottom: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-10px-lg {
        padding-bottom: 10px
    }

    .pb-10px-lg-i {
        padding-bottom: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-10px-md {
        padding-bottom: 10px
    }

    .pb-10px-md-i {
        padding-bottom: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-10px-sm {
        padding-bottom: 10px
    }

    .pb-10px-sm-i {
        padding-bottom: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-10px-xs {
        padding-bottom: 10px
    }

    .pb-10px-xs-i {
        padding-bottom: 10px !important
    }
}

.pl-10px-all {
    padding-left: 10px
}

.pl-10px-all-i {
    padding-left: 10px !important
}

@media screen and (min-width: 1200px) {
    .pl-10px-xl {
        padding-left: 10px
    }

    .pl-10px-xl-i {
        padding-left: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-10px-lg {
        padding-left: 10px
    }

    .pl-10px-lg-i {
        padding-left: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-10px-md {
        padding-left: 10px
    }

    .pl-10px-md-i {
        padding-left: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-10px-sm {
        padding-left: 10px
    }

    .pl-10px-sm-i {
        padding-left: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-10px-xs {
        padding-left: 10px
    }

    .pl-10px-xs-i {
        padding-left: 10px !important
    }
}

.pt-15px-all {
    padding-top: 15px
}

.pt-15px-all-i {
    padding-top: 15px !important
}

@media screen and (min-width: 1200px) {
    .pt-15px-xl {
        padding-top: 15px
    }

    .pt-15px-xl-i {
        padding-top: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-15px-lg {
        padding-top: 15px
    }

    .pt-15px-lg-i {
        padding-top: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-15px-md {
        padding-top: 15px
    }

    .pt-15px-md-i {
        padding-top: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-15px-sm {
        padding-top: 15px
    }

    .pt-15px-sm-i {
        padding-top: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-15px-xs {
        padding-top: 15px
    }

    .pt-15px-xs-i {
        padding-top: 15px !important
    }
}

.pr-15px-all {
    padding-right: 15px
}

.pr-15px-all-i {
    padding-right: 15px !important
}

@media screen and (min-width: 1200px) {
    .pr-15px-xl {
        padding-right: 15px
    }

    .pr-15px-xl-i {
        padding-right: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-15px-lg {
        padding-right: 15px
    }

    .pr-15px-lg-i {
        padding-right: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-15px-md {
        padding-right: 15px
    }

    .pr-15px-md-i {
        padding-right: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-15px-sm {
        padding-right: 15px
    }

    .pr-15px-sm-i {
        padding-right: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-15px-xs {
        padding-right: 15px
    }

    .pr-15px-xs-i {
        padding-right: 15px !important
    }
}

.pb-15px-all {
    padding-bottom: 15px
}

.pb-15px-all-i {
    padding-bottom: 15px !important
}

@media screen and (min-width: 1200px) {
    .pb-15px-xl {
        padding-bottom: 15px
    }

    .pb-15px-xl-i {
        padding-bottom: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-15px-lg {
        padding-bottom: 15px
    }

    .pb-15px-lg-i {
        padding-bottom: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-15px-md {
        padding-bottom: 15px
    }

    .pb-15px-md-i {
        padding-bottom: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-15px-sm {
        padding-bottom: 15px
    }

    .pb-15px-sm-i {
        padding-bottom: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-15px-xs {
        padding-bottom: 15px
    }

    .pb-15px-xs-i {
        padding-bottom: 15px !important
    }
}

.pl-15px-all {
    padding-left: 15px
}

.pl-15px-all-i {
    padding-left: 15px !important
}

@media screen and (min-width: 1200px) {
    .pl-15px-xl {
        padding-left: 15px
    }

    .pl-15px-xl-i {
        padding-left: 15px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-15px-lg {
        padding-left: 15px
    }

    .pl-15px-lg-i {
        padding-left: 15px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-15px-md {
        padding-left: 15px
    }

    .pl-15px-md-i {
        padding-left: 15px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-15px-sm {
        padding-left: 15px
    }

    .pl-15px-sm-i {
        padding-left: 15px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-15px-xs {
        padding-left: 15px
    }

    .pl-15px-xs-i {
        padding-left: 15px !important
    }
}

.pt-16px-all {
    padding-top: 16px
}

.pt-16px-all-i {
    padding-top: 16px !important
}

@media screen and (min-width: 1200px) {
    .pt-16px-xl {
        padding-top: 16px
    }

    .pt-16px-xl-i {
        padding-top: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-16px-lg {
        padding-top: 16px
    }

    .pt-16px-lg-i {
        padding-top: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-16px-md {
        padding-top: 16px
    }

    .pt-16px-md-i {
        padding-top: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-16px-sm {
        padding-top: 16px
    }

    .pt-16px-sm-i {
        padding-top: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-16px-xs {
        padding-top: 16px
    }

    .pt-16px-xs-i {
        padding-top: 16px !important
    }
}

.pr-16px-all {
    padding-right: 16px
}

.pr-16px-all-i {
    padding-right: 16px !important
}

@media screen and (min-width: 1200px) {
    .pr-16px-xl {
        padding-right: 16px
    }

    .pr-16px-xl-i {
        padding-right: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-16px-lg {
        padding-right: 16px
    }

    .pr-16px-lg-i {
        padding-right: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-16px-md {
        padding-right: 16px
    }

    .pr-16px-md-i {
        padding-right: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-16px-sm {
        padding-right: 16px
    }

    .pr-16px-sm-i {
        padding-right: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-16px-xs {
        padding-right: 16px
    }

    .pr-16px-xs-i {
        padding-right: 16px !important
    }
}

.pb-16px-all {
    padding-bottom: 16px
}

.pb-16px-all-i {
    padding-bottom: 16px !important
}

@media screen and (min-width: 1200px) {
    .pb-16px-xl {
        padding-bottom: 16px
    }

    .pb-16px-xl-i {
        padding-bottom: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-16px-lg {
        padding-bottom: 16px
    }

    .pb-16px-lg-i {
        padding-bottom: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-16px-md {
        padding-bottom: 16px
    }

    .pb-16px-md-i {
        padding-bottom: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-16px-sm {
        padding-bottom: 16px
    }

    .pb-16px-sm-i {
        padding-bottom: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-16px-xs {
        padding-bottom: 16px
    }

    .pb-16px-xs-i {
        padding-bottom: 16px !important
    }
}

.pl-16px-all {
    padding-left: 16px
}

.pl-16px-all-i {
    padding-left: 16px !important
}

@media screen and (min-width: 1200px) {
    .pl-16px-xl {
        padding-left: 16px
    }

    .pl-16px-xl-i {
        padding-left: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-16px-lg {
        padding-left: 16px
    }

    .pl-16px-lg-i {
        padding-left: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-16px-md {
        padding-left: 16px
    }

    .pl-16px-md-i {
        padding-left: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-16px-sm {
        padding-left: 16px
    }

    .pl-16px-sm-i {
        padding-left: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-16px-xs {
        padding-left: 16px
    }

    .pl-16px-xs-i {
        padding-left: 16px !important
    }
}

.pt-20px-all {
    padding-top: 20px
}

.pt-20px-all-i {
    padding-top: 20px !important
}

@media screen and (min-width: 1200px) {
    .pt-20px-xl {
        padding-top: 20px
    }

    .pt-20px-xl-i {
        padding-top: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-20px-lg {
        padding-top: 20px
    }

    .pt-20px-lg-i {
        padding-top: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-20px-md {
        padding-top: 20px
    }

    .pt-20px-md-i {
        padding-top: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-20px-sm {
        padding-top: 20px
    }

    .pt-20px-sm-i {
        padding-top: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-20px-xs {
        padding-top: 20px
    }

    .pt-20px-xs-i {
        padding-top: 20px !important
    }
}

.pr-20px-all {
    padding-right: 20px
}

.pr-20px-all-i {
    padding-right: 20px !important
}

@media screen and (min-width: 1200px) {
    .pr-20px-xl {
        padding-right: 20px
    }

    .pr-20px-xl-i {
        padding-right: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-20px-lg {
        padding-right: 20px
    }

    .pr-20px-lg-i {
        padding-right: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-20px-md {
        padding-right: 20px
    }

    .pr-20px-md-i {
        padding-right: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-20px-sm {
        padding-right: 20px
    }

    .pr-20px-sm-i {
        padding-right: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-20px-xs {
        padding-right: 20px
    }

    .pr-20px-xs-i {
        padding-right: 20px !important
    }
}

.pb-20px-all {
    padding-bottom: 20px
}

.pb-20px-all-i {
    padding-bottom: 20px !important
}

@media screen and (min-width: 1200px) {
    .pb-20px-xl {
        padding-bottom: 20px
    }

    .pb-20px-xl-i {
        padding-bottom: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-20px-lg {
        padding-bottom: 20px
    }

    .pb-20px-lg-i {
        padding-bottom: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-20px-md {
        padding-bottom: 20px
    }

    .pb-20px-md-i {
        padding-bottom: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-20px-sm {
        padding-bottom: 20px
    }

    .pb-20px-sm-i {
        padding-bottom: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-20px-xs {
        padding-bottom: 20px
    }

    .pb-20px-xs-i {
        padding-bottom: 20px !important
    }
}

.pl-20px-all {
    padding-left: 20px
}

.pl-20px-all-i {
    padding-left: 20px !important
}

@media screen and (min-width: 1200px) {
    .pl-20px-xl {
        padding-left: 20px
    }

    .pl-20px-xl-i {
        padding-left: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-20px-lg {
        padding-left: 20px
    }

    .pl-20px-lg-i {
        padding-left: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-20px-md {
        padding-left: 20px
    }

    .pl-20px-md-i {
        padding-left: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-20px-sm {
        padding-left: 20px
    }

    .pl-20px-sm-i {
        padding-left: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-20px-xs {
        padding-left: 20px
    }

    .pl-20px-xs-i {
        padding-left: 20px !important
    }
}

.pt-24px-all {
    padding-top: 24px
}

.pt-24px-all-i {
    padding-top: 24px !important
}

@media screen and (min-width: 1200px) {
    .pt-24px-xl {
        padding-top: 24px
    }

    .pt-24px-xl-i {
        padding-top: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-24px-lg {
        padding-top: 24px
    }

    .pt-24px-lg-i {
        padding-top: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-24px-md {
        padding-top: 24px
    }

    .pt-24px-md-i {
        padding-top: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-24px-sm {
        padding-top: 24px
    }

    .pt-24px-sm-i {
        padding-top: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-24px-xs {
        padding-top: 24px
    }

    .pt-24px-xs-i {
        padding-top: 24px !important
    }
}

.pr-24px-all {
    padding-right: 24px
}

.pr-24px-all-i {
    padding-right: 24px !important
}

@media screen and (min-width: 1200px) {
    .pr-24px-xl {
        padding-right: 24px
    }

    .pr-24px-xl-i {
        padding-right: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-24px-lg {
        padding-right: 24px
    }

    .pr-24px-lg-i {
        padding-right: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-24px-md {
        padding-right: 24px
    }

    .pr-24px-md-i {
        padding-right: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-24px-sm {
        padding-right: 24px
    }

    .pr-24px-sm-i {
        padding-right: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-24px-xs {
        padding-right: 24px
    }

    .pr-24px-xs-i {
        padding-right: 24px !important
    }
}

.pb-24px-all {
    padding-bottom: 24px
}

.pb-24px-all-i {
    padding-bottom: 24px !important
}

@media screen and (min-width: 1200px) {
    .pb-24px-xl {
        padding-bottom: 24px
    }

    .pb-24px-xl-i {
        padding-bottom: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-24px-lg {
        padding-bottom: 24px
    }

    .pb-24px-lg-i {
        padding-bottom: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-24px-md {
        padding-bottom: 24px
    }

    .pb-24px-md-i {
        padding-bottom: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-24px-sm {
        padding-bottom: 24px
    }

    .pb-24px-sm-i {
        padding-bottom: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-24px-xs {
        padding-bottom: 24px
    }

    .pb-24px-xs-i {
        padding-bottom: 24px !important
    }
}

.pl-24px-all {
    padding-left: 24px
}

.pl-24px-all-i {
    padding-left: 24px !important
}

@media screen and (min-width: 1200px) {
    .pl-24px-xl {
        padding-left: 24px
    }

    .pl-24px-xl-i {
        padding-left: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-24px-lg {
        padding-left: 24px
    }

    .pl-24px-lg-i {
        padding-left: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-24px-md {
        padding-left: 24px
    }

    .pl-24px-md-i {
        padding-left: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-24px-sm {
        padding-left: 24px
    }

    .pl-24px-sm-i {
        padding-left: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-24px-xs {
        padding-left: 24px
    }

    .pl-24px-xs-i {
        padding-left: 24px !important
    }
}

.pt-25px-all {
    padding-top: 25px
}

.pt-25px-all-i {
    padding-top: 25px !important
}

@media screen and (min-width: 1200px) {
    .pt-25px-xl {
        padding-top: 25px
    }

    .pt-25px-xl-i {
        padding-top: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-25px-lg {
        padding-top: 25px
    }

    .pt-25px-lg-i {
        padding-top: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-25px-md {
        padding-top: 25px
    }

    .pt-25px-md-i {
        padding-top: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-25px-sm {
        padding-top: 25px
    }

    .pt-25px-sm-i {
        padding-top: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-25px-xs {
        padding-top: 25px
    }

    .pt-25px-xs-i {
        padding-top: 25px !important
    }
}

.pr-25px-all {
    padding-right: 25px
}

.pr-25px-all-i {
    padding-right: 25px !important
}

@media screen and (min-width: 1200px) {
    .pr-25px-xl {
        padding-right: 25px
    }

    .pr-25px-xl-i {
        padding-right: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-25px-lg {
        padding-right: 25px
    }

    .pr-25px-lg-i {
        padding-right: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-25px-md {
        padding-right: 25px
    }

    .pr-25px-md-i {
        padding-right: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-25px-sm {
        padding-right: 25px
    }

    .pr-25px-sm-i {
        padding-right: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-25px-xs {
        padding-right: 25px
    }

    .pr-25px-xs-i {
        padding-right: 25px !important
    }
}

.pb-25px-all {
    padding-bottom: 25px
}

.pb-25px-all-i {
    padding-bottom: 25px !important
}

@media screen and (min-width: 1200px) {
    .pb-25px-xl {
        padding-bottom: 25px
    }

    .pb-25px-xl-i {
        padding-bottom: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-25px-lg {
        padding-bottom: 25px
    }

    .pb-25px-lg-i {
        padding-bottom: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-25px-md {
        padding-bottom: 25px
    }

    .pb-25px-md-i {
        padding-bottom: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-25px-sm {
        padding-bottom: 25px
    }

    .pb-25px-sm-i {
        padding-bottom: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-25px-xs {
        padding-bottom: 25px
    }

    .pb-25px-xs-i {
        padding-bottom: 25px !important
    }
}

.pl-25px-all {
    padding-left: 25px
}

.pl-25px-all-i {
    padding-left: 25px !important
}

@media screen and (min-width: 1200px) {
    .pl-25px-xl {
        padding-left: 25px
    }

    .pl-25px-xl-i {
        padding-left: 25px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-25px-lg {
        padding-left: 25px
    }

    .pl-25px-lg-i {
        padding-left: 25px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-25px-md {
        padding-left: 25px
    }

    .pl-25px-md-i {
        padding-left: 25px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-25px-sm {
        padding-left: 25px
    }

    .pl-25px-sm-i {
        padding-left: 25px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-25px-xs {
        padding-left: 25px
    }

    .pl-25px-xs-i {
        padding-left: 25px !important
    }
}

.pt-30px-all {
    padding-top: 30px
}

.pt-30px-all-i {
    padding-top: 30px !important
}

@media screen and (min-width: 1200px) {
    .pt-30px-xl {
        padding-top: 30px
    }

    .pt-30px-xl-i {
        padding-top: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-30px-lg {
        padding-top: 30px
    }

    .pt-30px-lg-i {
        padding-top: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-30px-md {
        padding-top: 30px
    }

    .pt-30px-md-i {
        padding-top: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-30px-sm {
        padding-top: 30px
    }

    .pt-30px-sm-i {
        padding-top: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-30px-xs {
        padding-top: 30px
    }

    .pt-30px-xs-i {
        padding-top: 30px !important
    }
}

.pr-30px-all {
    padding-right: 30px
}

.pr-30px-all-i {
    padding-right: 30px !important
}

@media screen and (min-width: 1200px) {
    .pr-30px-xl {
        padding-right: 30px
    }

    .pr-30px-xl-i {
        padding-right: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-30px-lg {
        padding-right: 30px
    }

    .pr-30px-lg-i {
        padding-right: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-30px-md {
        padding-right: 30px
    }

    .pr-30px-md-i {
        padding-right: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-30px-sm {
        padding-right: 30px
    }

    .pr-30px-sm-i {
        padding-right: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-30px-xs {
        padding-right: 30px
    }

    .pr-30px-xs-i {
        padding-right: 30px !important
    }
}

.pb-30px-all {
    padding-bottom: 30px
}

.pb-30px-all-i {
    padding-bottom: 30px !important
}

@media screen and (min-width: 1200px) {
    .pb-30px-xl {
        padding-bottom: 30px
    }

    .pb-30px-xl-i {
        padding-bottom: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-30px-lg {
        padding-bottom: 30px
    }

    .pb-30px-lg-i {
        padding-bottom: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-30px-md {
        padding-bottom: 30px
    }

    .pb-30px-md-i {
        padding-bottom: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-30px-sm {
        padding-bottom: 30px
    }

    .pb-30px-sm-i {
        padding-bottom: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-30px-xs {
        padding-bottom: 30px
    }

    .pb-30px-xs-i {
        padding-bottom: 30px !important
    }
}

.pl-30px-all {
    padding-left: 30px
}

.pl-30px-all-i {
    padding-left: 30px !important
}

@media screen and (min-width: 1200px) {
    .pl-30px-xl {
        padding-left: 30px
    }

    .pl-30px-xl-i {
        padding-left: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-30px-lg {
        padding-left: 30px
    }

    .pl-30px-lg-i {
        padding-left: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-30px-md {
        padding-left: 30px
    }

    .pl-30px-md-i {
        padding-left: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-30px-sm {
        padding-left: 30px
    }

    .pl-30px-sm-i {
        padding-left: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-30px-xs {
        padding-left: 30px
    }

    .pl-30px-xs-i {
        padding-left: 30px !important
    }
}

.pt-32px-all {
    padding-top: 32px
}

.pt-32px-all-i {
    padding-top: 32px !important
}

@media screen and (min-width: 1200px) {
    .pt-32px-xl {
        padding-top: 32px
    }

    .pt-32px-xl-i {
        padding-top: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-32px-lg {
        padding-top: 32px
    }

    .pt-32px-lg-i {
        padding-top: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-32px-md {
        padding-top: 32px
    }

    .pt-32px-md-i {
        padding-top: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-32px-sm {
        padding-top: 32px
    }

    .pt-32px-sm-i {
        padding-top: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-32px-xs {
        padding-top: 32px
    }

    .pt-32px-xs-i {
        padding-top: 32px !important
    }
}

.pr-32px-all {
    padding-right: 32px
}

.pr-32px-all-i {
    padding-right: 32px !important
}

@media screen and (min-width: 1200px) {
    .pr-32px-xl {
        padding-right: 32px
    }

    .pr-32px-xl-i {
        padding-right: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-32px-lg {
        padding-right: 32px
    }

    .pr-32px-lg-i {
        padding-right: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-32px-md {
        padding-right: 32px
    }

    .pr-32px-md-i {
        padding-right: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-32px-sm {
        padding-right: 32px
    }

    .pr-32px-sm-i {
        padding-right: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-32px-xs {
        padding-right: 32px
    }

    .pr-32px-xs-i {
        padding-right: 32px !important
    }
}

.pb-32px-all {
    padding-bottom: 32px
}

.pb-32px-all-i {
    padding-bottom: 32px !important
}

@media screen and (min-width: 1200px) {
    .pb-32px-xl {
        padding-bottom: 32px
    }

    .pb-32px-xl-i {
        padding-bottom: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-32px-lg {
        padding-bottom: 32px
    }

    .pb-32px-lg-i {
        padding-bottom: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-32px-md {
        padding-bottom: 32px
    }

    .pb-32px-md-i {
        padding-bottom: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-32px-sm {
        padding-bottom: 32px
    }

    .pb-32px-sm-i {
        padding-bottom: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-32px-xs {
        padding-bottom: 32px
    }

    .pb-32px-xs-i {
        padding-bottom: 32px !important
    }
}

.pl-32px-all {
    padding-left: 32px
}

.pl-32px-all-i {
    padding-left: 32px !important
}

@media screen and (min-width: 1200px) {
    .pl-32px-xl {
        padding-left: 32px
    }

    .pl-32px-xl-i {
        padding-left: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-32px-lg {
        padding-left: 32px
    }

    .pl-32px-lg-i {
        padding-left: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-32px-md {
        padding-left: 32px
    }

    .pl-32px-md-i {
        padding-left: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-32px-sm {
        padding-left: 32px
    }

    .pl-32px-sm-i {
        padding-left: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-32px-xs {
        padding-left: 32px
    }

    .pl-32px-xs-i {
        padding-left: 32px !important
    }
}

.pt-35px-all {
    padding-top: 35px
}

.pt-35px-all-i {
    padding-top: 35px !important
}

@media screen and (min-width: 1200px) {
    .pt-35px-xl {
        padding-top: 35px
    }

    .pt-35px-xl-i {
        padding-top: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-35px-lg {
        padding-top: 35px
    }

    .pt-35px-lg-i {
        padding-top: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-35px-md {
        padding-top: 35px
    }

    .pt-35px-md-i {
        padding-top: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-35px-sm {
        padding-top: 35px
    }

    .pt-35px-sm-i {
        padding-top: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-35px-xs {
        padding-top: 35px
    }

    .pt-35px-xs-i {
        padding-top: 35px !important
    }
}

.pr-35px-all {
    padding-right: 35px
}

.pr-35px-all-i {
    padding-right: 35px !important
}

@media screen and (min-width: 1200px) {
    .pr-35px-xl {
        padding-right: 35px
    }

    .pr-35px-xl-i {
        padding-right: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-35px-lg {
        padding-right: 35px
    }

    .pr-35px-lg-i {
        padding-right: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-35px-md {
        padding-right: 35px
    }

    .pr-35px-md-i {
        padding-right: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-35px-sm {
        padding-right: 35px
    }

    .pr-35px-sm-i {
        padding-right: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-35px-xs {
        padding-right: 35px
    }

    .pr-35px-xs-i {
        padding-right: 35px !important
    }
}

.pb-35px-all {
    padding-bottom: 35px
}

.pb-35px-all-i {
    padding-bottom: 35px !important
}

@media screen and (min-width: 1200px) {
    .pb-35px-xl {
        padding-bottom: 35px
    }

    .pb-35px-xl-i {
        padding-bottom: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-35px-lg {
        padding-bottom: 35px
    }

    .pb-35px-lg-i {
        padding-bottom: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-35px-md {
        padding-bottom: 35px
    }

    .pb-35px-md-i {
        padding-bottom: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-35px-sm {
        padding-bottom: 35px
    }

    .pb-35px-sm-i {
        padding-bottom: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-35px-xs {
        padding-bottom: 35px
    }

    .pb-35px-xs-i {
        padding-bottom: 35px !important
    }
}

.pl-35px-all {
    padding-left: 35px
}

.pl-35px-all-i {
    padding-left: 35px !important
}

@media screen and (min-width: 1200px) {
    .pl-35px-xl {
        padding-left: 35px
    }

    .pl-35px-xl-i {
        padding-left: 35px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-35px-lg {
        padding-left: 35px
    }

    .pl-35px-lg-i {
        padding-left: 35px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-35px-md {
        padding-left: 35px
    }

    .pl-35px-md-i {
        padding-left: 35px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-35px-sm {
        padding-left: 35px
    }

    .pl-35px-sm-i {
        padding-left: 35px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-35px-xs {
        padding-left: 35px
    }

    .pl-35px-xs-i {
        padding-left: 35px !important
    }
}

.pt-36px-all {
    padding-top: 36px
}

.pt-36px-all-i {
    padding-top: 36px !important
}

@media screen and (min-width: 1200px) {
    .pt-36px-xl {
        padding-top: 36px
    }

    .pt-36px-xl-i {
        padding-top: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-36px-lg {
        padding-top: 36px
    }

    .pt-36px-lg-i {
        padding-top: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-36px-md {
        padding-top: 36px
    }

    .pt-36px-md-i {
        padding-top: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-36px-sm {
        padding-top: 36px
    }

    .pt-36px-sm-i {
        padding-top: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-36px-xs {
        padding-top: 36px
    }

    .pt-36px-xs-i {
        padding-top: 36px !important
    }
}

.pr-36px-all {
    padding-right: 36px
}

.pr-36px-all-i {
    padding-right: 36px !important
}

@media screen and (min-width: 1200px) {
    .pr-36px-xl {
        padding-right: 36px
    }

    .pr-36px-xl-i {
        padding-right: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-36px-lg {
        padding-right: 36px
    }

    .pr-36px-lg-i {
        padding-right: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-36px-md {
        padding-right: 36px
    }

    .pr-36px-md-i {
        padding-right: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-36px-sm {
        padding-right: 36px
    }

    .pr-36px-sm-i {
        padding-right: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-36px-xs {
        padding-right: 36px
    }

    .pr-36px-xs-i {
        padding-right: 36px !important
    }
}

.pb-36px-all {
    padding-bottom: 36px
}

.pb-36px-all-i {
    padding-bottom: 36px !important
}

@media screen and (min-width: 1200px) {
    .pb-36px-xl {
        padding-bottom: 36px
    }

    .pb-36px-xl-i {
        padding-bottom: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-36px-lg {
        padding-bottom: 36px
    }

    .pb-36px-lg-i {
        padding-bottom: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-36px-md {
        padding-bottom: 36px
    }

    .pb-36px-md-i {
        padding-bottom: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-36px-sm {
        padding-bottom: 36px
    }

    .pb-36px-sm-i {
        padding-bottom: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-36px-xs {
        padding-bottom: 36px
    }

    .pb-36px-xs-i {
        padding-bottom: 36px !important
    }
}

.pl-36px-all {
    padding-left: 36px
}

.pl-36px-all-i {
    padding-left: 36px !important
}

@media screen and (min-width: 1200px) {
    .pl-36px-xl {
        padding-left: 36px
    }

    .pl-36px-xl-i {
        padding-left: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-36px-lg {
        padding-left: 36px
    }

    .pl-36px-lg-i {
        padding-left: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-36px-md {
        padding-left: 36px
    }

    .pl-36px-md-i {
        padding-left: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-36px-sm {
        padding-left: 36px
    }

    .pl-36px-sm-i {
        padding-left: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-36px-xs {
        padding-left: 36px
    }

    .pl-36px-xs-i {
        padding-left: 36px !important
    }
}

.pt-38px-all {
    padding-top: 38px
}

.pt-38px-all-i {
    padding-top: 38px !important
}

@media screen and (min-width: 1200px) {
    .pt-38px-xl {
        padding-top: 38px
    }

    .pt-38px-xl-i {
        padding-top: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-38px-lg {
        padding-top: 38px
    }

    .pt-38px-lg-i {
        padding-top: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-38px-md {
        padding-top: 38px
    }

    .pt-38px-md-i {
        padding-top: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-38px-sm {
        padding-top: 38px
    }

    .pt-38px-sm-i {
        padding-top: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-38px-xs {
        padding-top: 38px
    }

    .pt-38px-xs-i {
        padding-top: 38px !important
    }
}

.pr-38px-all {
    padding-right: 38px
}

.pr-38px-all-i {
    padding-right: 38px !important
}

@media screen and (min-width: 1200px) {
    .pr-38px-xl {
        padding-right: 38px
    }

    .pr-38px-xl-i {
        padding-right: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-38px-lg {
        padding-right: 38px
    }

    .pr-38px-lg-i {
        padding-right: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-38px-md {
        padding-right: 38px
    }

    .pr-38px-md-i {
        padding-right: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-38px-sm {
        padding-right: 38px
    }

    .pr-38px-sm-i {
        padding-right: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-38px-xs {
        padding-right: 38px
    }

    .pr-38px-xs-i {
        padding-right: 38px !important
    }
}

.pb-38px-all {
    padding-bottom: 38px
}

.pb-38px-all-i {
    padding-bottom: 38px !important
}

@media screen and (min-width: 1200px) {
    .pb-38px-xl {
        padding-bottom: 38px
    }

    .pb-38px-xl-i {
        padding-bottom: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-38px-lg {
        padding-bottom: 38px
    }

    .pb-38px-lg-i {
        padding-bottom: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-38px-md {
        padding-bottom: 38px
    }

    .pb-38px-md-i {
        padding-bottom: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-38px-sm {
        padding-bottom: 38px
    }

    .pb-38px-sm-i {
        padding-bottom: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-38px-xs {
        padding-bottom: 38px
    }

    .pb-38px-xs-i {
        padding-bottom: 38px !important
    }
}

.pl-38px-all {
    padding-left: 38px
}

.pl-38px-all-i {
    padding-left: 38px !important
}

@media screen and (min-width: 1200px) {
    .pl-38px-xl {
        padding-left: 38px
    }

    .pl-38px-xl-i {
        padding-left: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-38px-lg {
        padding-left: 38px
    }

    .pl-38px-lg-i {
        padding-left: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-38px-md {
        padding-left: 38px
    }

    .pl-38px-md-i {
        padding-left: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-38px-sm {
        padding-left: 38px
    }

    .pl-38px-sm-i {
        padding-left: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-38px-xs {
        padding-left: 38px
    }

    .pl-38px-xs-i {
        padding-left: 38px !important
    }
}

.pt-40px-all {
    padding-top: 40px
}

.pt-40px-all-i {
    padding-top: 40px !important
}

@media screen and (min-width: 1200px) {
    .pt-40px-xl {
        padding-top: 40px
    }

    .pt-40px-xl-i {
        padding-top: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-40px-lg {
        padding-top: 40px
    }

    .pt-40px-lg-i {
        padding-top: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-40px-md {
        padding-top: 40px
    }

    .pt-40px-md-i {
        padding-top: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-40px-sm {
        padding-top: 40px
    }

    .pt-40px-sm-i {
        padding-top: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-40px-xs {
        padding-top: 40px
    }

    .pt-40px-xs-i {
        padding-top: 40px !important
    }
}

.pr-40px-all {
    padding-right: 40px
}

.pr-40px-all-i {
    padding-right: 40px !important
}

@media screen and (min-width: 1200px) {
    .pr-40px-xl {
        padding-right: 40px
    }

    .pr-40px-xl-i {
        padding-right: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-40px-lg {
        padding-right: 40px
    }

    .pr-40px-lg-i {
        padding-right: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-40px-md {
        padding-right: 40px
    }

    .pr-40px-md-i {
        padding-right: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-40px-sm {
        padding-right: 40px
    }

    .pr-40px-sm-i {
        padding-right: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-40px-xs {
        padding-right: 40px
    }

    .pr-40px-xs-i {
        padding-right: 40px !important
    }
}

.pb-40px-all {
    padding-bottom: 40px
}

.pb-40px-all-i {
    padding-bottom: 40px !important
}

@media screen and (min-width: 1200px) {
    .pb-40px-xl {
        padding-bottom: 40px
    }

    .pb-40px-xl-i {
        padding-bottom: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-40px-lg {
        padding-bottom: 40px
    }

    .pb-40px-lg-i {
        padding-bottom: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-40px-md {
        padding-bottom: 40px
    }

    .pb-40px-md-i {
        padding-bottom: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-40px-sm {
        padding-bottom: 40px
    }

    .pb-40px-sm-i {
        padding-bottom: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-40px-xs {
        padding-bottom: 40px
    }

    .pb-40px-xs-i {
        padding-bottom: 40px !important
    }
}

.pl-40px-all {
    padding-left: 40px
}

.pl-40px-all-i {
    padding-left: 40px !important
}

@media screen and (min-width: 1200px) {
    .pl-40px-xl {
        padding-left: 40px
    }

    .pl-40px-xl-i {
        padding-left: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-40px-lg {
        padding-left: 40px
    }

    .pl-40px-lg-i {
        padding-left: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-40px-md {
        padding-left: 40px
    }

    .pl-40px-md-i {
        padding-left: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-40px-sm {
        padding-left: 40px
    }

    .pl-40px-sm-i {
        padding-left: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-40px-xs {
        padding-left: 40px
    }

    .pl-40px-xs-i {
        padding-left: 40px !important
    }
}

.pt-45px-all {
    padding-top: 45px
}

.pt-45px-all-i {
    padding-top: 45px !important
}

@media screen and (min-width: 1200px) {
    .pt-45px-xl {
        padding-top: 45px
    }

    .pt-45px-xl-i {
        padding-top: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-45px-lg {
        padding-top: 45px
    }

    .pt-45px-lg-i {
        padding-top: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-45px-md {
        padding-top: 45px
    }

    .pt-45px-md-i {
        padding-top: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-45px-sm {
        padding-top: 45px
    }

    .pt-45px-sm-i {
        padding-top: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-45px-xs {
        padding-top: 45px
    }

    .pt-45px-xs-i {
        padding-top: 45px !important
    }
}

.pr-45px-all {
    padding-right: 45px
}

.pr-45px-all-i {
    padding-right: 45px !important
}

@media screen and (min-width: 1200px) {
    .pr-45px-xl {
        padding-right: 45px
    }

    .pr-45px-xl-i {
        padding-right: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-45px-lg {
        padding-right: 45px
    }

    .pr-45px-lg-i {
        padding-right: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-45px-md {
        padding-right: 45px
    }

    .pr-45px-md-i {
        padding-right: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-45px-sm {
        padding-right: 45px
    }

    .pr-45px-sm-i {
        padding-right: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-45px-xs {
        padding-right: 45px
    }

    .pr-45px-xs-i {
        padding-right: 45px !important
    }
}

.pb-45px-all {
    padding-bottom: 45px
}

.pb-45px-all-i {
    padding-bottom: 45px !important
}

@media screen and (min-width: 1200px) {
    .pb-45px-xl {
        padding-bottom: 45px
    }

    .pb-45px-xl-i {
        padding-bottom: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-45px-lg {
        padding-bottom: 45px
    }

    .pb-45px-lg-i {
        padding-bottom: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-45px-md {
        padding-bottom: 45px
    }

    .pb-45px-md-i {
        padding-bottom: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-45px-sm {
        padding-bottom: 45px
    }

    .pb-45px-sm-i {
        padding-bottom: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-45px-xs {
        padding-bottom: 45px
    }

    .pb-45px-xs-i {
        padding-bottom: 45px !important
    }
}

.pl-45px-all {
    padding-left: 45px
}

.pl-45px-all-i {
    padding-left: 45px !important
}

@media screen and (min-width: 1200px) {
    .pl-45px-xl {
        padding-left: 45px
    }

    .pl-45px-xl-i {
        padding-left: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-45px-lg {
        padding-left: 45px
    }

    .pl-45px-lg-i {
        padding-left: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-45px-md {
        padding-left: 45px
    }

    .pl-45px-md-i {
        padding-left: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-45px-sm {
        padding-left: 45px
    }

    .pl-45px-sm-i {
        padding-left: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-45px-xs {
        padding-left: 45px
    }

    .pl-45px-xs-i {
        padding-left: 45px !important
    }
}

.pt-56px-all {
    padding-top: 56px
}

.pt-56px-all-i {
    padding-top: 56px !important
}

@media screen and (min-width: 1200px) {
    .pt-56px-xl {
        padding-top: 56px
    }

    .pt-56px-xl-i {
        padding-top: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-56px-lg {
        padding-top: 56px
    }

    .pt-56px-lg-i {
        padding-top: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-56px-md {
        padding-top: 56px
    }

    .pt-56px-md-i {
        padding-top: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-56px-sm {
        padding-top: 56px
    }

    .pt-56px-sm-i {
        padding-top: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-56px-xs {
        padding-top: 56px
    }

    .pt-56px-xs-i {
        padding-top: 56px !important
    }
}

.pr-56px-all {
    padding-right: 56px
}

.pr-56px-all-i {
    padding-right: 56px !important
}

@media screen and (min-width: 1200px) {
    .pr-56px-xl {
        padding-right: 56px
    }

    .pr-56px-xl-i {
        padding-right: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-56px-lg {
        padding-right: 56px
    }

    .pr-56px-lg-i {
        padding-right: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-56px-md {
        padding-right: 56px
    }

    .pr-56px-md-i {
        padding-right: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-56px-sm {
        padding-right: 56px
    }

    .pr-56px-sm-i {
        padding-right: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-56px-xs {
        padding-right: 56px
    }

    .pr-56px-xs-i {
        padding-right: 56px !important
    }
}

.pb-56px-all {
    padding-bottom: 56px
}

.pb-56px-all-i {
    padding-bottom: 56px !important
}

@media screen and (min-width: 1200px) {
    .pb-56px-xl {
        padding-bottom: 56px
    }

    .pb-56px-xl-i {
        padding-bottom: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-56px-lg {
        padding-bottom: 56px
    }

    .pb-56px-lg-i {
        padding-bottom: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-56px-md {
        padding-bottom: 56px
    }

    .pb-56px-md-i {
        padding-bottom: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-56px-sm {
        padding-bottom: 56px
    }

    .pb-56px-sm-i {
        padding-bottom: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-56px-xs {
        padding-bottom: 56px
    }

    .pb-56px-xs-i {
        padding-bottom: 56px !important
    }
}

.pl-56px-all {
    padding-left: 56px
}

.pl-56px-all-i {
    padding-left: 56px !important
}

@media screen and (min-width: 1200px) {
    .pl-56px-xl {
        padding-left: 56px
    }

    .pl-56px-xl-i {
        padding-left: 56px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-56px-lg {
        padding-left: 56px
    }

    .pl-56px-lg-i {
        padding-left: 56px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-56px-md {
        padding-left: 56px
    }

    .pl-56px-md-i {
        padding-left: 56px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-56px-sm {
        padding-left: 56px
    }

    .pl-56px-sm-i {
        padding-left: 56px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-56px-xs {
        padding-left: 56px
    }

    .pl-56px-xs-i {
        padding-left: 56px !important
    }
}

.pt-80px-all {
    padding-top: 80px
}

.pt-80px-all-i {
    padding-top: 80px !important
}

@media screen and (min-width: 1200px) {
    .pt-80px-xl {
        padding-top: 80px
    }

    .pt-80px-xl-i {
        padding-top: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pt-80px-lg {
        padding-top: 80px
    }

    .pt-80px-lg-i {
        padding-top: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pt-80px-md {
        padding-top: 80px
    }

    .pt-80px-md-i {
        padding-top: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pt-80px-sm {
        padding-top: 80px
    }

    .pt-80px-sm-i {
        padding-top: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .pt-80px-xs {
        padding-top: 80px
    }

    .pt-80px-xs-i {
        padding-top: 80px !important
    }
}

.pr-80px-all {
    padding-right: 80px
}

.pr-80px-all-i {
    padding-right: 80px !important
}

@media screen and (min-width: 1200px) {
    .pr-80px-xl {
        padding-right: 80px
    }

    .pr-80px-xl-i {
        padding-right: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pr-80px-lg {
        padding-right: 80px
    }

    .pr-80px-lg-i {
        padding-right: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pr-80px-md {
        padding-right: 80px
    }

    .pr-80px-md-i {
        padding-right: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pr-80px-sm {
        padding-right: 80px
    }

    .pr-80px-sm-i {
        padding-right: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .pr-80px-xs {
        padding-right: 80px
    }

    .pr-80px-xs-i {
        padding-right: 80px !important
    }
}

.pb-80px-all {
    padding-bottom: 80px
}

.pb-80px-all-i {
    padding-bottom: 80px !important
}

@media screen and (min-width: 1200px) {
    .pb-80px-xl {
        padding-bottom: 80px
    }

    .pb-80px-xl-i {
        padding-bottom: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pb-80px-lg {
        padding-bottom: 80px
    }

    .pb-80px-lg-i {
        padding-bottom: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pb-80px-md {
        padding-bottom: 80px
    }

    .pb-80px-md-i {
        padding-bottom: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pb-80px-sm {
        padding-bottom: 80px
    }

    .pb-80px-sm-i {
        padding-bottom: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .pb-80px-xs {
        padding-bottom: 80px
    }

    .pb-80px-xs-i {
        padding-bottom: 80px !important
    }
}

.pl-80px-all {
    padding-left: 80px
}

.pl-80px-all-i {
    padding-left: 80px !important
}

@media screen and (min-width: 1200px) {
    .pl-80px-xl {
        padding-left: 80px
    }

    .pl-80px-xl-i {
        padding-left: 80px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .pl-80px-lg {
        padding-left: 80px
    }

    .pl-80px-lg-i {
        padding-left: 80px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .pl-80px-md {
        padding-left: 80px
    }

    .pl-80px-md-i {
        padding-left: 80px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .pl-80px-sm {
        padding-left: 80px
    }

    .pl-80px-sm-i {
        padding-left: 80px !important
    }
}

@media screen and (max-width: 576px) {
    .pl-80px-xs {
        padding-left: 80px
    }

    .pl-80px-xs-i {
        padding-left: 80px !important
    }
}

.fz-8px-all {
    font-size: 8px
}

.fz-8px-all-i {
    font-size: 8px !important
}

@media screen and (min-width: 1200px) {
    .fz-8px-xl {
        font-size: 8px
    }

    .fz-8px-xl-i {
        font-size: 8px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-8px-lg {
        font-size: 8px
    }

    .fz-8px-lg-i {
        font-size: 8px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-8px-md {
        font-size: 8px
    }

    .fz-8px-md-i {
        font-size: 8px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-8px-sm {
        font-size: 8px
    }

    .fz-8px-sm-i {
        font-size: 8px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-8px-xs {
        font-size: 8px
    }

    .fz-8px-xs-i {
        font-size: 8px !important
    }
}

.fz-10px-all {
    font-size: 10px
}

.fz-10px-all-i {
    font-size: 10px !important
}

@media screen and (min-width: 1200px) {
    .fz-10px-xl {
        font-size: 10px
    }

    .fz-10px-xl-i {
        font-size: 10px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-10px-lg {
        font-size: 10px
    }

    .fz-10px-lg-i {
        font-size: 10px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-10px-md {
        font-size: 10px
    }

    .fz-10px-md-i {
        font-size: 10px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-10px-sm {
        font-size: 10px
    }

    .fz-10px-sm-i {
        font-size: 10px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-10px-xs {
        font-size: 10px
    }

    .fz-10px-xs-i {
        font-size: 10px !important
    }
}

.fz-12px-all {
    font-size: 12px
}

.fz-12px-all-i {
    font-size: 12px !important
}

@media screen and (min-width: 1200px) {
    .fz-12px-xl {
        font-size: 12px
    }

    .fz-12px-xl-i {
        font-size: 12px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-12px-lg {
        font-size: 12px
    }

    .fz-12px-lg-i {
        font-size: 12px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-12px-md {
        font-size: 12px
    }

    .fz-12px-md-i {
        font-size: 12px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-12px-sm {
        font-size: 12px
    }

    .fz-12px-sm-i {
        font-size: 12px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-12px-xs {
        font-size: 12px
    }

    .fz-12px-xs-i {
        font-size: 12px !important
    }
}

.fz-14px-all {
    font-size: 14px
}

.fz-14px-all-i {
    font-size: 14px !important
}

@media screen and (min-width: 1200px) {
    .fz-14px-xl {
        font-size: 14px
    }

    .fz-14px-xl-i {
        font-size: 14px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-14px-lg {
        font-size: 14px
    }

    .fz-14px-lg-i {
        font-size: 14px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-14px-md {
        font-size: 14px
    }

    .fz-14px-md-i {
        font-size: 14px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-14px-sm {
        font-size: 14px
    }

    .fz-14px-sm-i {
        font-size: 14px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-14px-xs {
        font-size: 14px
    }

    .fz-14px-xs-i {
        font-size: 14px !important
    }
}

.fz-16px-all {
    font-size: 16px
}

.fz-16px-all-i {
    font-size: 16px !important
}

@media screen and (min-width: 1200px) {
    .fz-16px-xl {
        font-size: 16px
    }

    .fz-16px-xl-i {
        font-size: 16px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-16px-lg {
        font-size: 16px
    }

    .fz-16px-lg-i {
        font-size: 16px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-16px-md {
        font-size: 16px
    }

    .fz-16px-md-i {
        font-size: 16px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-16px-sm {
        font-size: 16px
    }

    .fz-16px-sm-i {
        font-size: 16px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-16px-xs {
        font-size: 16px
    }

    .fz-16px-xs-i {
        font-size: 16px !important
    }
}

.fz-18px-all {
    font-size: 18px
}

.fz-18px-all-i {
    font-size: 18px !important
}

@media screen and (min-width: 1200px) {
    .fz-18px-xl {
        font-size: 18px
    }

    .fz-18px-xl-i {
        font-size: 18px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-18px-lg {
        font-size: 18px
    }

    .fz-18px-lg-i {
        font-size: 18px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-18px-md {
        font-size: 18px
    }

    .fz-18px-md-i {
        font-size: 18px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-18px-sm {
        font-size: 18px
    }

    .fz-18px-sm-i {
        font-size: 18px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-18px-xs {
        font-size: 18px
    }

    .fz-18px-xs-i {
        font-size: 18px !important
    }
}

.fz-20px-all {
    font-size: 20px
}

.fz-20px-all-i {
    font-size: 20px !important
}

@media screen and (min-width: 1200px) {
    .fz-20px-xl {
        font-size: 20px
    }

    .fz-20px-xl-i {
        font-size: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-20px-lg {
        font-size: 20px
    }

    .fz-20px-lg-i {
        font-size: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-20px-md {
        font-size: 20px
    }

    .fz-20px-md-i {
        font-size: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-20px-sm {
        font-size: 20px
    }

    .fz-20px-sm-i {
        font-size: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-20px-xs {
        font-size: 20px
    }

    .fz-20px-xs-i {
        font-size: 20px !important
    }
}

.fz-22px-all {
    font-size: 22px
}

.fz-22px-all-i {
    font-size: 22px !important
}

@media screen and (min-width: 1200px) {
    .fz-22px-xl {
        font-size: 22px
    }

    .fz-22px-xl-i {
        font-size: 22px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-22px-lg {
        font-size: 22px
    }

    .fz-22px-lg-i {
        font-size: 22px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-22px-md {
        font-size: 22px
    }

    .fz-22px-md-i {
        font-size: 22px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-22px-sm {
        font-size: 22px
    }

    .fz-22px-sm-i {
        font-size: 22px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-22px-xs {
        font-size: 22px
    }

    .fz-22px-xs-i {
        font-size: 22px !important
    }
}

.fz-24px-all {
    font-size: 24px
}

.fz-24px-all-i {
    font-size: 24px !important
}

@media screen and (min-width: 1200px) {
    .fz-24px-xl {
        font-size: 24px
    }

    .fz-24px-xl-i {
        font-size: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-24px-lg {
        font-size: 24px
    }

    .fz-24px-lg-i {
        font-size: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-24px-md {
        font-size: 24px
    }

    .fz-24px-md-i {
        font-size: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-24px-sm {
        font-size: 24px
    }

    .fz-24px-sm-i {
        font-size: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-24px-xs {
        font-size: 24px
    }

    .fz-24px-xs-i {
        font-size: 24px !important
    }
}

.fz-26px-all {
    font-size: 26px
}

.fz-26px-all-i {
    font-size: 26px !important
}

@media screen and (min-width: 1200px) {
    .fz-26px-xl {
        font-size: 26px
    }

    .fz-26px-xl-i {
        font-size: 26px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-26px-lg {
        font-size: 26px
    }

    .fz-26px-lg-i {
        font-size: 26px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-26px-md {
        font-size: 26px
    }

    .fz-26px-md-i {
        font-size: 26px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-26px-sm {
        font-size: 26px
    }

    .fz-26px-sm-i {
        font-size: 26px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-26px-xs {
        font-size: 26px
    }

    .fz-26px-xs-i {
        font-size: 26px !important
    }
}

.fz-28px-all {
    font-size: 28px
}

.fz-28px-all-i {
    font-size: 28px !important
}

@media screen and (min-width: 1200px) {
    .fz-28px-xl {
        font-size: 28px
    }

    .fz-28px-xl-i {
        font-size: 28px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-28px-lg {
        font-size: 28px
    }

    .fz-28px-lg-i {
        font-size: 28px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-28px-md {
        font-size: 28px
    }

    .fz-28px-md-i {
        font-size: 28px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-28px-sm {
        font-size: 28px
    }

    .fz-28px-sm-i {
        font-size: 28px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-28px-xs {
        font-size: 28px
    }

    .fz-28px-xs-i {
        font-size: 28px !important
    }
}

.fz-30px-all {
    font-size: 30px
}

.fz-30px-all-i {
    font-size: 30px !important
}

@media screen and (min-width: 1200px) {
    .fz-30px-xl {
        font-size: 30px
    }

    .fz-30px-xl-i {
        font-size: 30px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-30px-lg {
        font-size: 30px
    }

    .fz-30px-lg-i {
        font-size: 30px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-30px-md {
        font-size: 30px
    }

    .fz-30px-md-i {
        font-size: 30px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-30px-sm {
        font-size: 30px
    }

    .fz-30px-sm-i {
        font-size: 30px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-30px-xs {
        font-size: 30px
    }

    .fz-30px-xs-i {
        font-size: 30px !important
    }
}

.fz-32px-all {
    font-size: 32px
}

.fz-32px-all-i {
    font-size: 32px !important
}

@media screen and (min-width: 1200px) {
    .fz-32px-xl {
        font-size: 32px
    }

    .fz-32px-xl-i {
        font-size: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-32px-lg {
        font-size: 32px
    }

    .fz-32px-lg-i {
        font-size: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-32px-md {
        font-size: 32px
    }

    .fz-32px-md-i {
        font-size: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-32px-sm {
        font-size: 32px
    }

    .fz-32px-sm-i {
        font-size: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-32px-xs {
        font-size: 32px
    }

    .fz-32px-xs-i {
        font-size: 32px !important
    }
}

.fz-34px-all {
    font-size: 34px
}

.fz-34px-all-i {
    font-size: 34px !important
}

@media screen and (min-width: 1200px) {
    .fz-34px-xl {
        font-size: 34px
    }

    .fz-34px-xl-i {
        font-size: 34px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-34px-lg {
        font-size: 34px
    }

    .fz-34px-lg-i {
        font-size: 34px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-34px-md {
        font-size: 34px
    }

    .fz-34px-md-i {
        font-size: 34px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-34px-sm {
        font-size: 34px
    }

    .fz-34px-sm-i {
        font-size: 34px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-34px-xs {
        font-size: 34px
    }

    .fz-34px-xs-i {
        font-size: 34px !important
    }
}

.fz-36px-all {
    font-size: 36px
}

.fz-36px-all-i {
    font-size: 36px !important
}

@media screen and (min-width: 1200px) {
    .fz-36px-xl {
        font-size: 36px
    }

    .fz-36px-xl-i {
        font-size: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-36px-lg {
        font-size: 36px
    }

    .fz-36px-lg-i {
        font-size: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-36px-md {
        font-size: 36px
    }

    .fz-36px-md-i {
        font-size: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-36px-sm {
        font-size: 36px
    }

    .fz-36px-sm-i {
        font-size: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-36px-xs {
        font-size: 36px
    }

    .fz-36px-xs-i {
        font-size: 36px !important
    }
}

.fz-40px-all {
    font-size: 40px
}

.fz-40px-all-i {
    font-size: 40px !important
}

@media screen and (min-width: 1200px) {
    .fz-40px-xl {
        font-size: 40px
    }

    .fz-40px-xl-i {
        font-size: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-40px-lg {
        font-size: 40px
    }

    .fz-40px-lg-i {
        font-size: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-40px-md {
        font-size: 40px
    }

    .fz-40px-md-i {
        font-size: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-40px-sm {
        font-size: 40px
    }

    .fz-40px-sm-i {
        font-size: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-40px-xs {
        font-size: 40px
    }

    .fz-40px-xs-i {
        font-size: 40px !important
    }
}

.fz-42px-all {
    font-size: 42px
}

.fz-42px-all-i {
    font-size: 42px !important
}

@media screen and (min-width: 1200px) {
    .fz-42px-xl {
        font-size: 42px
    }

    .fz-42px-xl-i {
        font-size: 42px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-42px-lg {
        font-size: 42px
    }

    .fz-42px-lg-i {
        font-size: 42px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-42px-md {
        font-size: 42px
    }

    .fz-42px-md-i {
        font-size: 42px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-42px-sm {
        font-size: 42px
    }

    .fz-42px-sm-i {
        font-size: 42px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-42px-xs {
        font-size: 42px
    }

    .fz-42px-xs-i {
        font-size: 42px !important
    }
}

.fz-44px-all {
    font-size: 44px
}

.fz-44px-all-i {
    font-size: 44px !important
}

@media screen and (min-width: 1200px) {
    .fz-44px-xl {
        font-size: 44px
    }

    .fz-44px-xl-i {
        font-size: 44px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-44px-lg {
        font-size: 44px
    }

    .fz-44px-lg-i {
        font-size: 44px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-44px-md {
        font-size: 44px
    }

    .fz-44px-md-i {
        font-size: 44px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-44px-sm {
        font-size: 44px
    }

    .fz-44px-sm-i {
        font-size: 44px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-44px-xs {
        font-size: 44px
    }

    .fz-44px-xs-i {
        font-size: 44px !important
    }
}

.fz-48px-all {
    font-size: 48px
}

.fz-48px-all-i {
    font-size: 48px !important
}

@media screen and (min-width: 1200px) {
    .fz-48px-xl {
        font-size: 48px
    }

    .fz-48px-xl-i {
        font-size: 48px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-48px-lg {
        font-size: 48px
    }

    .fz-48px-lg-i {
        font-size: 48px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-48px-md {
        font-size: 48px
    }

    .fz-48px-md-i {
        font-size: 48px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-48px-sm {
        font-size: 48px
    }

    .fz-48px-sm-i {
        font-size: 48px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-48px-xs {
        font-size: 48px
    }

    .fz-48px-xs-i {
        font-size: 48px !important
    }
}

.fz-72px-all {
    font-size: 72px
}

.fz-72px-all-i {
    font-size: 72px !important
}

@media screen and (min-width: 1200px) {
    .fz-72px-xl {
        font-size: 72px
    }

    .fz-72px-xl-i {
        font-size: 72px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-72px-lg {
        font-size: 72px
    }

    .fz-72px-lg-i {
        font-size: 72px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-72px-md {
        font-size: 72px
    }

    .fz-72px-md-i {
        font-size: 72px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-72px-sm {
        font-size: 72px
    }

    .fz-72px-sm-i {
        font-size: 72px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-72px-xs {
        font-size: 72px
    }

    .fz-72px-xs-i {
        font-size: 72px !important
    }
}

.fz-144px-all {
    font-size: 144px
}

.fz-144px-all-i {
    font-size: 144px !important
}

@media screen and (min-width: 1200px) {
    .fz-144px-xl {
        font-size: 144px
    }

    .fz-144px-xl-i {
        font-size: 144px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .fz-144px-lg {
        font-size: 144px
    }

    .fz-144px-lg-i {
        font-size: 144px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .fz-144px-md {
        font-size: 144px
    }

    .fz-144px-md-i {
        font-size: 144px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .fz-144px-sm {
        font-size: 144px
    }

    .fz-144px-sm-i {
        font-size: 144px !important
    }
}

@media screen and (max-width: 576px) {
    .fz-144px-xs {
        font-size: 144px
    }

    .fz-144px-xs-i {
        font-size: 144px !important
    }
}

.w-0p-all {
    width: 0%
}

.w-0p-all-i {
    width: 0% !important
}

@media screen and (min-width: 1200px) {
    .w-0p-xl {
        width: 0%
    }

    .w-0p-xl-i {
        width: 0% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-0p-lg {
        width: 0%
    }

    .w-0p-lg-i {
        width: 0% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-0p-md {
        width: 0%
    }

    .w-0p-md-i {
        width: 0% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-0p-sm {
        width: 0%
    }

    .w-0p-sm-i {
        width: 0% !important
    }
}

@media screen and (max-width: 576px) {
    .w-0p-xs {
        width: 0%
    }

    .w-0p-xs-i {
        width: 0% !important
    }
}

.w-5p-all {
    width: 5%
}

.w-5p-all-i {
    width: 5% !important
}

@media screen and (min-width: 1200px) {
    .w-5p-xl {
        width: 5%
    }

    .w-5p-xl-i {
        width: 5% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-5p-lg {
        width: 5%
    }

    .w-5p-lg-i {
        width: 5% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-5p-md {
        width: 5%
    }

    .w-5p-md-i {
        width: 5% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-5p-sm {
        width: 5%
    }

    .w-5p-sm-i {
        width: 5% !important
    }
}

@media screen and (max-width: 576px) {
    .w-5p-xs {
        width: 5%
    }

    .w-5p-xs-i {
        width: 5% !important
    }
}

.w-10p-all {
    width: 10%
}

.w-10p-all-i {
    width: 10% !important
}

@media screen and (min-width: 1200px) {
    .w-10p-xl {
        width: 10%
    }

    .w-10p-xl-i {
        width: 10% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-10p-lg {
        width: 10%
    }

    .w-10p-lg-i {
        width: 10% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-10p-md {
        width: 10%
    }

    .w-10p-md-i {
        width: 10% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-10p-sm {
        width: 10%
    }

    .w-10p-sm-i {
        width: 10% !important
    }
}

@media screen and (max-width: 576px) {
    .w-10p-xs {
        width: 10%
    }

    .w-10p-xs-i {
        width: 10% !important
    }
}

.w-15p-all {
    width: 15%
}

.w-15p-all-i {
    width: 15% !important
}

@media screen and (min-width: 1200px) {
    .w-15p-xl {
        width: 15%
    }

    .w-15p-xl-i {
        width: 15% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-15p-lg {
        width: 15%
    }

    .w-15p-lg-i {
        width: 15% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-15p-md {
        width: 15%
    }

    .w-15p-md-i {
        width: 15% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-15p-sm {
        width: 15%
    }

    .w-15p-sm-i {
        width: 15% !important
    }
}

@media screen and (max-width: 576px) {
    .w-15p-xs {
        width: 15%
    }

    .w-15p-xs-i {
        width: 15% !important
    }
}

.w-20p-all {
    width: 20%
}

.w-20p-all-i {
    width: 20% !important
}

@media screen and (min-width: 1200px) {
    .w-20p-xl {
        width: 20%
    }

    .w-20p-xl-i {
        width: 20% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-20p-lg {
        width: 20%
    }

    .w-20p-lg-i {
        width: 20% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-20p-md {
        width: 20%
    }

    .w-20p-md-i {
        width: 20% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-20p-sm {
        width: 20%
    }

    .w-20p-sm-i {
        width: 20% !important
    }
}

@media screen and (max-width: 576px) {
    .w-20p-xs {
        width: 20%
    }

    .w-20p-xs-i {
        width: 20% !important
    }
}

.w-25p-all {
    width: 25%
}

.w-25p-all-i {
    width: 25% !important
}

@media screen and (min-width: 1200px) {
    .w-25p-xl {
        width: 25%
    }

    .w-25p-xl-i {
        width: 25% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-25p-lg {
        width: 25%
    }

    .w-25p-lg-i {
        width: 25% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-25p-md {
        width: 25%
    }

    .w-25p-md-i {
        width: 25% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-25p-sm {
        width: 25%
    }

    .w-25p-sm-i {
        width: 25% !important
    }
}

@media screen and (max-width: 576px) {
    .w-25p-xs {
        width: 25%
    }

    .w-25p-xs-i {
        width: 25% !important
    }
}

.w-30p-all {
    width: 30%
}

.w-30p-all-i {
    width: 30% !important
}

@media screen and (min-width: 1200px) {
    .w-30p-xl {
        width: 30%
    }

    .w-30p-xl-i {
        width: 30% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-30p-lg {
        width: 30%
    }

    .w-30p-lg-i {
        width: 30% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-30p-md {
        width: 30%
    }

    .w-30p-md-i {
        width: 30% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-30p-sm {
        width: 30%
    }

    .w-30p-sm-i {
        width: 30% !important
    }
}

@media screen and (max-width: 576px) {
    .w-30p-xs {
        width: 30%
    }

    .w-30p-xs-i {
        width: 30% !important
    }
}

.w-35p-all {
    width: 35%
}

.w-35p-all-i {
    width: 35% !important
}

@media screen and (min-width: 1200px) {
    .w-35p-xl {
        width: 35%
    }

    .w-35p-xl-i {
        width: 35% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-35p-lg {
        width: 35%
    }

    .w-35p-lg-i {
        width: 35% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-35p-md {
        width: 35%
    }

    .w-35p-md-i {
        width: 35% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-35p-sm {
        width: 35%
    }

    .w-35p-sm-i {
        width: 35% !important
    }
}

@media screen and (max-width: 576px) {
    .w-35p-xs {
        width: 35%
    }

    .w-35p-xs-i {
        width: 35% !important
    }
}

.w-40p-all {
    width: 40%
}

.w-40p-all-i {
    width: 40% !important
}

@media screen and (min-width: 1200px) {
    .w-40p-xl {
        width: 40%
    }

    .w-40p-xl-i {
        width: 40% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-40p-lg {
        width: 40%
    }

    .w-40p-lg-i {
        width: 40% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-40p-md {
        width: 40%
    }

    .w-40p-md-i {
        width: 40% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-40p-sm {
        width: 40%
    }

    .w-40p-sm-i {
        width: 40% !important
    }
}

@media screen and (max-width: 576px) {
    .w-40p-xs {
        width: 40%
    }

    .w-40p-xs-i {
        width: 40% !important
    }
}

.w-45p-all {
    width: 45%
}

.w-45p-all-i {
    width: 45% !important
}

@media screen and (min-width: 1200px) {
    .w-45p-xl {
        width: 45%
    }

    .w-45p-xl-i {
        width: 45% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-45p-lg {
        width: 45%
    }

    .w-45p-lg-i {
        width: 45% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-45p-md {
        width: 45%
    }

    .w-45p-md-i {
        width: 45% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-45p-sm {
        width: 45%
    }

    .w-45p-sm-i {
        width: 45% !important
    }
}

@media screen and (max-width: 576px) {
    .w-45p-xs {
        width: 45%
    }

    .w-45p-xs-i {
        width: 45% !important
    }
}

.w-50p-all {
    width: 50%
}

.w-50p-all-i {
    width: 50% !important
}

@media screen and (min-width: 1200px) {
    .w-50p-xl {
        width: 50%
    }

    .w-50p-xl-i {
        width: 50% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-50p-lg {
        width: 50%
    }

    .w-50p-lg-i {
        width: 50% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-50p-md {
        width: 50%
    }

    .w-50p-md-i {
        width: 50% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-50p-sm {
        width: 50%
    }

    .w-50p-sm-i {
        width: 50% !important
    }
}

@media screen and (max-width: 576px) {
    .w-50p-xs {
        width: 50%
    }

    .w-50p-xs-i {
        width: 50% !important
    }
}

.w-55p-all {
    width: 55%
}

.w-55p-all-i {
    width: 55% !important
}

@media screen and (min-width: 1200px) {
    .w-55p-xl {
        width: 55%
    }

    .w-55p-xl-i {
        width: 55% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-55p-lg {
        width: 55%
    }

    .w-55p-lg-i {
        width: 55% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-55p-md {
        width: 55%
    }

    .w-55p-md-i {
        width: 55% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-55p-sm {
        width: 55%
    }

    .w-55p-sm-i {
        width: 55% !important
    }
}

@media screen and (max-width: 576px) {
    .w-55p-xs {
        width: 55%
    }

    .w-55p-xs-i {
        width: 55% !important
    }
}

.w-60p-all {
    width: 60%
}

.w-60p-all-i {
    width: 60% !important
}

@media screen and (min-width: 1200px) {
    .w-60p-xl {
        width: 60%
    }

    .w-60p-xl-i {
        width: 60% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-60p-lg {
        width: 60%
    }

    .w-60p-lg-i {
        width: 60% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-60p-md {
        width: 60%
    }

    .w-60p-md-i {
        width: 60% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-60p-sm {
        width: 60%
    }

    .w-60p-sm-i {
        width: 60% !important
    }
}

@media screen and (max-width: 576px) {
    .w-60p-xs {
        width: 60%
    }

    .w-60p-xs-i {
        width: 60% !important
    }
}

.w-65p-all {
    width: 65%
}

.w-65p-all-i {
    width: 65% !important
}

@media screen and (min-width: 1200px) {
    .w-65p-xl {
        width: 65%
    }

    .w-65p-xl-i {
        width: 65% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-65p-lg {
        width: 65%
    }

    .w-65p-lg-i {
        width: 65% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-65p-md {
        width: 65%
    }

    .w-65p-md-i {
        width: 65% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-65p-sm {
        width: 65%
    }

    .w-65p-sm-i {
        width: 65% !important
    }
}

@media screen and (max-width: 576px) {
    .w-65p-xs {
        width: 65%
    }

    .w-65p-xs-i {
        width: 65% !important
    }
}

.w-70p-all {
    width: 70%
}

.w-70p-all-i {
    width: 70% !important
}

@media screen and (min-width: 1200px) {
    .w-70p-xl {
        width: 70%
    }

    .w-70p-xl-i {
        width: 70% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-70p-lg {
        width: 70%
    }

    .w-70p-lg-i {
        width: 70% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-70p-md {
        width: 70%
    }

    .w-70p-md-i {
        width: 70% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-70p-sm {
        width: 70%
    }

    .w-70p-sm-i {
        width: 70% !important
    }
}

@media screen and (max-width: 576px) {
    .w-70p-xs {
        width: 70%
    }

    .w-70p-xs-i {
        width: 70% !important
    }
}

.w-75p-all {
    width: 75%
}

.w-75p-all-i {
    width: 75% !important
}

@media screen and (min-width: 1200px) {
    .w-75p-xl {
        width: 75%
    }

    .w-75p-xl-i {
        width: 75% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-75p-lg {
        width: 75%
    }

    .w-75p-lg-i {
        width: 75% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-75p-md {
        width: 75%
    }

    .w-75p-md-i {
        width: 75% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-75p-sm {
        width: 75%
    }

    .w-75p-sm-i {
        width: 75% !important
    }
}

@media screen and (max-width: 576px) {
    .w-75p-xs {
        width: 75%
    }

    .w-75p-xs-i {
        width: 75% !important
    }
}

.w-80p-all {
    width: 80%
}

.w-80p-all-i {
    width: 80% !important
}

@media screen and (min-width: 1200px) {
    .w-80p-xl {
        width: 80%
    }

    .w-80p-xl-i {
        width: 80% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-80p-lg {
        width: 80%
    }

    .w-80p-lg-i {
        width: 80% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-80p-md {
        width: 80%
    }

    .w-80p-md-i {
        width: 80% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-80p-sm {
        width: 80%
    }

    .w-80p-sm-i {
        width: 80% !important
    }
}

@media screen and (max-width: 576px) {
    .w-80p-xs {
        width: 80%
    }

    .w-80p-xs-i {
        width: 80% !important
    }
}

.w-85p-all {
    width: 85%
}

.w-85p-all-i {
    width: 85% !important
}

@media screen and (min-width: 1200px) {
    .w-85p-xl {
        width: 85%
    }

    .w-85p-xl-i {
        width: 85% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-85p-lg {
        width: 85%
    }

    .w-85p-lg-i {
        width: 85% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-85p-md {
        width: 85%
    }

    .w-85p-md-i {
        width: 85% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-85p-sm {
        width: 85%
    }

    .w-85p-sm-i {
        width: 85% !important
    }
}

@media screen and (max-width: 576px) {
    .w-85p-xs {
        width: 85%
    }

    .w-85p-xs-i {
        width: 85% !important
    }
}

.w-90p-all {
    width: 90%
}

.w-90p-all-i {
    width: 90% !important
}

@media screen and (min-width: 1200px) {
    .w-90p-xl {
        width: 90%
    }

    .w-90p-xl-i {
        width: 90% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-90p-lg {
        width: 90%
    }

    .w-90p-lg-i {
        width: 90% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-90p-md {
        width: 90%
    }

    .w-90p-md-i {
        width: 90% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-90p-sm {
        width: 90%
    }

    .w-90p-sm-i {
        width: 90% !important
    }
}

@media screen and (max-width: 576px) {
    .w-90p-xs {
        width: 90%
    }

    .w-90p-xs-i {
        width: 90% !important
    }
}

.w-95p-all {
    width: 95%
}

.w-95p-all-i {
    width: 95% !important
}

@media screen and (min-width: 1200px) {
    .w-95p-xl {
        width: 95%
    }

    .w-95p-xl-i {
        width: 95% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-95p-lg {
        width: 95%
    }

    .w-95p-lg-i {
        width: 95% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-95p-md {
        width: 95%
    }

    .w-95p-md-i {
        width: 95% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-95p-sm {
        width: 95%
    }

    .w-95p-sm-i {
        width: 95% !important
    }
}

@media screen and (max-width: 576px) {
    .w-95p-xs {
        width: 95%
    }

    .w-95p-xs-i {
        width: 95% !important
    }
}

.w-100p-all {
    width: 100%
}

.w-100p-all-i {
    width: 100% !important
}

@media screen and (min-width: 1200px) {
    .w-100p-xl {
        width: 100%
    }

    .w-100p-xl-i {
        width: 100% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .w-100p-lg {
        width: 100%
    }

    .w-100p-lg-i {
        width: 100% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .w-100p-md {
        width: 100%
    }

    .w-100p-md-i {
        width: 100% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .w-100p-sm {
        width: 100%
    }

    .w-100p-sm-i {
        width: 100% !important
    }
}

@media screen and (max-width: 576px) {
    .w-100p-xs {
        width: 100%
    }

    .w-100p-xs-i {
        width: 100% !important
    }
}

.lh-0px-all {
    line-height: 0
}

.lh-0px-all-i {
    line-height: 0 !important
}

@media screen and (min-width: 1200px) {
    .lh-0px-xl {
        line-height: 0
    }

    .lh-0px-xl-i {
        line-height: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-0px-lg {
        line-height: 0
    }

    .lh-0px-lg-i {
        line-height: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-0px-md {
        line-height: 0
    }

    .lh-0px-md-i {
        line-height: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-0px-sm {
        line-height: 0
    }

    .lh-0px-sm-i {
        line-height: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .lh-0px-xs {
        line-height: 0
    }

    .lh-0px-xs-i {
        line-height: 0 !important
    }
}

.lh-14px-all {
    line-height: 14px
}

.lh-14px-all-i {
    line-height: 14px !important
}

@media screen and (min-width: 1200px) {
    .lh-14px-xl {
        line-height: 14px
    }

    .lh-14px-xl-i {
        line-height: 14px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-14px-lg {
        line-height: 14px
    }

    .lh-14px-lg-i {
        line-height: 14px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-14px-md {
        line-height: 14px
    }

    .lh-14px-md-i {
        line-height: 14px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-14px-sm {
        line-height: 14px
    }

    .lh-14px-sm-i {
        line-height: 14px !important
    }
}

@media screen and (max-width: 576px) {
    .lh-14px-xs {
        line-height: 14px
    }

    .lh-14px-xs-i {
        line-height: 14px !important
    }
}

.lh-18px-all {
    line-height: 18px
}

.lh-18px-all-i {
    line-height: 18px !important
}

@media screen and (min-width: 1200px) {
    .lh-18px-xl {
        line-height: 18px
    }

    .lh-18px-xl-i {
        line-height: 18px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-18px-lg {
        line-height: 18px
    }

    .lh-18px-lg-i {
        line-height: 18px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-18px-md {
        line-height: 18px
    }

    .lh-18px-md-i {
        line-height: 18px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-18px-sm {
        line-height: 18px
    }

    .lh-18px-sm-i {
        line-height: 18px !important
    }
}

@media screen and (max-width: 576px) {
    .lh-18px-xs {
        line-height: 18px
    }

    .lh-18px-xs-i {
        line-height: 18px !important
    }
}

.lh-20px-all {
    line-height: 20px
}

.lh-20px-all-i {
    line-height: 20px !important
}

@media screen and (min-width: 1200px) {
    .lh-20px-xl {
        line-height: 20px
    }

    .lh-20px-xl-i {
        line-height: 20px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-20px-lg {
        line-height: 20px
    }

    .lh-20px-lg-i {
        line-height: 20px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-20px-md {
        line-height: 20px
    }

    .lh-20px-md-i {
        line-height: 20px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-20px-sm {
        line-height: 20px
    }

    .lh-20px-sm-i {
        line-height: 20px !important
    }
}

@media screen and (max-width: 576px) {
    .lh-20px-xs {
        line-height: 20px
    }

    .lh-20px-xs-i {
        line-height: 20px !important
    }
}

.lh-24px-all {
    line-height: 24px
}

.lh-24px-all-i {
    line-height: 24px !important
}

@media screen and (min-width: 1200px) {
    .lh-24px-xl {
        line-height: 24px
    }

    .lh-24px-xl-i {
        line-height: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-24px-lg {
        line-height: 24px
    }

    .lh-24px-lg-i {
        line-height: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-24px-md {
        line-height: 24px
    }

    .lh-24px-md-i {
        line-height: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-24px-sm {
        line-height: 24px
    }

    .lh-24px-sm-i {
        line-height: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .lh-24px-xs {
        line-height: 24px
    }

    .lh-24px-xs-i {
        line-height: 24px !important
    }
}

.lh-32px-all {
    line-height: 32px
}

.lh-32px-all-i {
    line-height: 32px !important
}

@media screen and (min-width: 1200px) {
    .lh-32px-xl {
        line-height: 32px
    }

    .lh-32px-xl-i {
        line-height: 32px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-32px-lg {
        line-height: 32px
    }

    .lh-32px-lg-i {
        line-height: 32px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-32px-md {
        line-height: 32px
    }

    .lh-32px-md-i {
        line-height: 32px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-32px-sm {
        line-height: 32px
    }

    .lh-32px-sm-i {
        line-height: 32px !important
    }
}

@media screen and (max-width: 576px) {
    .lh-32px-xs {
        line-height: 32px
    }

    .lh-32px-xs-i {
        line-height: 32px !important
    }
}

.lh-36px-all {
    line-height: 36px
}

.lh-36px-all-i {
    line-height: 36px !important
}

@media screen and (min-width: 1200px) {
    .lh-36px-xl {
        line-height: 36px
    }

    .lh-36px-xl-i {
        line-height: 36px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-36px-lg {
        line-height: 36px
    }

    .lh-36px-lg-i {
        line-height: 36px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-36px-md {
        line-height: 36px
    }

    .lh-36px-md-i {
        line-height: 36px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-36px-sm {
        line-height: 36px
    }

    .lh-36px-sm-i {
        line-height: 36px !important
    }
}

@media screen and (max-width: 576px) {
    .lh-36px-xs {
        line-height: 36px
    }

    .lh-36px-xs-i {
        line-height: 36px !important
    }
}

.lh-40px-all {
    line-height: 40px
}

.lh-40px-all-i {
    line-height: 40px !important
}

@media screen and (min-width: 1200px) {
    .lh-40px-xl {
        line-height: 40px
    }

    .lh-40px-xl-i {
        line-height: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .lh-40px-lg {
        line-height: 40px
    }

    .lh-40px-lg-i {
        line-height: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .lh-40px-md {
        line-height: 40px
    }

    .lh-40px-md-i {
        line-height: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .lh-40px-sm {
        line-height: 40px
    }

    .lh-40px-sm-i {
        line-height: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .lh-40px-xs {
        line-height: 40px
    }

    .lh-40px-xs-i {
        line-height: 40px !important
    }
}

.h-100p-all {
    height: 100%
}

.h-100p-all-i {
    height: 100% !important
}

@media screen and (min-width: 1200px) {
    .h-100p-xl {
        height: 100%
    }

    .h-100p-xl-i {
        height: 100% !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-100p-lg {
        height: 100%
    }

    .h-100p-lg-i {
        height: 100% !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-100p-md {
        height: 100%
    }

    .h-100p-md-i {
        height: 100% !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-100p-sm {
        height: 100%
    }

    .h-100p-sm-i {
        height: 100% !important
    }
}

@media screen and (max-width: 576px) {
    .h-100p-xs {
        height: 100%
    }

    .h-100p-xs-i {
        height: 100% !important
    }
}

.h-24px-all {
    height: 24px
}

.h-24px-all-i {
    height: 24px !important
}

@media screen and (min-width: 1200px) {
    .h-24px-xl {
        height: 24px
    }

    .h-24px-xl-i {
        height: 24px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-24px-lg {
        height: 24px
    }

    .h-24px-lg-i {
        height: 24px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-24px-md {
        height: 24px
    }

    .h-24px-md-i {
        height: 24px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-24px-sm {
        height: 24px
    }

    .h-24px-sm-i {
        height: 24px !important
    }
}

@media screen and (max-width: 576px) {
    .h-24px-xs {
        height: 24px
    }

    .h-24px-xs-i {
        height: 24px !important
    }
}

.h-38px-all {
    height: 38px
}

.h-38px-all-i {
    height: 38px !important
}

@media screen and (min-width: 1200px) {
    .h-38px-xl {
        height: 38px
    }

    .h-38px-xl-i {
        height: 38px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-38px-lg {
        height: 38px
    }

    .h-38px-lg-i {
        height: 38px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-38px-md {
        height: 38px
    }

    .h-38px-md-i {
        height: 38px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-38px-sm {
        height: 38px
    }

    .h-38px-sm-i {
        height: 38px !important
    }
}

@media screen and (max-width: 576px) {
    .h-38px-xs {
        height: 38px
    }

    .h-38px-xs-i {
        height: 38px !important
    }
}

.h-40px-all {
    height: 40px
}

.h-40px-all-i {
    height: 40px !important
}

@media screen and (min-width: 1200px) {
    .h-40px-xl {
        height: 40px
    }

    .h-40px-xl-i {
        height: 40px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-40px-lg {
        height: 40px
    }

    .h-40px-lg-i {
        height: 40px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-40px-md {
        height: 40px
    }

    .h-40px-md-i {
        height: 40px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-40px-sm {
        height: 40px
    }

    .h-40px-sm-i {
        height: 40px !important
    }
}

@media screen and (max-width: 576px) {
    .h-40px-xs {
        height: 40px
    }

    .h-40px-xs-i {
        height: 40px !important
    }
}

.h-42px-all {
    height: 42px
}

.h-42px-all-i {
    height: 42px !important
}

@media screen and (min-width: 1200px) {
    .h-42px-xl {
        height: 42px
    }

    .h-42px-xl-i {
        height: 42px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-42px-lg {
        height: 42px
    }

    .h-42px-lg-i {
        height: 42px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-42px-md {
        height: 42px
    }

    .h-42px-md-i {
        height: 42px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-42px-sm {
        height: 42px
    }

    .h-42px-sm-i {
        height: 42px !important
    }
}

@media screen and (max-width: 576px) {
    .h-42px-xs {
        height: 42px
    }

    .h-42px-xs-i {
        height: 42px !important
    }
}

.h-44px-all {
    height: 44px
}

.h-44px-all-i {
    height: 44px !important
}

@media screen and (min-width: 1200px) {
    .h-44px-xl {
        height: 44px
    }

    .h-44px-xl-i {
        height: 44px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-44px-lg {
        height: 44px
    }

    .h-44px-lg-i {
        height: 44px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-44px-md {
        height: 44px
    }

    .h-44px-md-i {
        height: 44px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-44px-sm {
        height: 44px
    }

    .h-44px-sm-i {
        height: 44px !important
    }
}

@media screen and (max-width: 576px) {
    .h-44px-xs {
        height: 44px
    }

    .h-44px-xs-i {
        height: 44px !important
    }
}

.h-45px-all {
    height: 45px
}

.h-45px-all-i {
    height: 45px !important
}

@media screen and (min-width: 1200px) {
    .h-45px-xl {
        height: 45px
    }

    .h-45px-xl-i {
        height: 45px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-45px-lg {
        height: 45px
    }

    .h-45px-lg-i {
        height: 45px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-45px-md {
        height: 45px
    }

    .h-45px-md-i {
        height: 45px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-45px-sm {
        height: 45px
    }

    .h-45px-sm-i {
        height: 45px !important
    }
}

@media screen and (max-width: 576px) {
    .h-45px-xs {
        height: 45px
    }

    .h-45px-xs-i {
        height: 45px !important
    }
}

.h-46px-all {
    height: 46px
}

.h-46px-all-i {
    height: 46px !important
}

@media screen and (min-width: 1200px) {
    .h-46px-xl {
        height: 46px
    }

    .h-46px-xl-i {
        height: 46px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-46px-lg {
        height: 46px
    }

    .h-46px-lg-i {
        height: 46px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-46px-md {
        height: 46px
    }

    .h-46px-md-i {
        height: 46px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-46px-sm {
        height: 46px
    }

    .h-46px-sm-i {
        height: 46px !important
    }
}

@media screen and (max-width: 576px) {
    .h-46px-xs {
        height: 46px
    }

    .h-46px-xs-i {
        height: 46px !important
    }
}

.h-48px-all {
    height: 48px
}

.h-48px-all-i {
    height: 48px !important
}

@media screen and (min-width: 1200px) {
    .h-48px-xl {
        height: 48px
    }

    .h-48px-xl-i {
        height: 48px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .h-48px-lg {
        height: 48px
    }

    .h-48px-lg-i {
        height: 48px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .h-48px-md {
        height: 48px
    }

    .h-48px-md-i {
        height: 48px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .h-48px-sm {
        height: 48px
    }

    .h-48px-sm-i {
        height: 48px !important
    }
}

@media screen and (max-width: 576px) {
    .h-48px-xs {
        height: 48px
    }

    .h-48px-xs-i {
        height: 48px !important
    }
}

.border-0-all {
    border: 0
}

.border-0-all-i {
    border: 0 !important
}

@media screen and (min-width: 1200px) {
    .border-0-xl {
        border: 0
    }

    .border-0-xl-i {
        border: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .border-0-lg {
        border: 0
    }

    .border-0-lg-i {
        border: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .border-0-md {
        border: 0
    }

    .border-0-md-i {
        border: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .border-0-sm {
        border: 0
    }

    .border-0-sm-i {
        border: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .border-0-xs {
        border: 0
    }

    .border-0-xs-i {
        border: 0 !important
    }
}

.border-platinum-all {
    border: 1px solid #e8e8e8
}

.border-platinum-all-i {
    border: 1px solid #e8e8e8 !important
}

@media screen and (min-width: 1200px) {
    .border-platinum-xl {
        border: 1px solid #e8e8e8
    }

    .border-platinum-xl-i {
        border: 1px solid #e8e8e8 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .border-platinum-lg {
        border: 1px solid #e8e8e8
    }

    .border-platinum-lg-i {
        border: 1px solid #e8e8e8 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .border-platinum-md {
        border: 1px solid #e8e8e8
    }

    .border-platinum-md-i {
        border: 1px solid #e8e8e8 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .border-platinum-sm {
        border: 1px solid #e8e8e8
    }

    .border-platinum-sm-i {
        border: 1px solid #e8e8e8 !important
    }
}

@media screen and (max-width: 576px) {
    .border-platinum-xs {
        border: 1px solid #e8e8e8
    }

    .border-platinum-xs-i {
        border: 1px solid #e8e8e8 !important
    }
}

.text-defaultcolor-all {
    color: #5a5a5a
}

.text-defaultcolor-all-i {
    color: #5a5a5a !important
}

@media screen and (min-width: 1200px) {
    .text-defaultcolor-xl {
        color: #5a5a5a
    }

    .text-defaultcolor-xl-i {
        color: #5a5a5a !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .text-defaultcolor-lg {
        color: #5a5a5a
    }

    .text-defaultcolor-lg-i {
        color: #5a5a5a !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .text-defaultcolor-md {
        color: #5a5a5a
    }

    .text-defaultcolor-md-i {
        color: #5a5a5a !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .text-defaultcolor-sm {
        color: #5a5a5a
    }

    .text-defaultcolor-sm-i {
        color: #5a5a5a !important
    }
}

@media screen and (max-width: 576px) {
    .text-defaultcolor-xs {
        color: #5a5a5a
    }

    .text-defaultcolor-xs-i {
        color: #5a5a5a !important
    }
}

.text-white-all {
    color: #fff
}

.text-white-all-i {
    color: #fff !important
}

@media screen and (min-width: 1200px) {
    .text-white-xl {
        color: #fff
    }

    .text-white-xl-i {
        color: #fff !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .text-white-lg {
        color: #fff
    }

    .text-white-lg-i {
        color: #fff !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .text-white-md {
        color: #fff
    }

    .text-white-md-i {
        color: #fff !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .text-white-sm {
        color: #fff
    }

    .text-white-sm-i {
        color: #fff !important
    }
}

@media screen and (max-width: 576px) {
    .text-white-xs {
        color: #fff
    }

    .text-white-xs-i {
        color: #fff !important
    }
}

.text-yellow-all {
    color: #ffd400
}

.text-yellow-all-i {
    color: #ffd400 !important
}

@media screen and (min-width: 1200px) {
    .text-yellow-xl {
        color: #ffd400
    }

    .text-yellow-xl-i {
        color: #ffd400 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .text-yellow-lg {
        color: #ffd400
    }

    .text-yellow-lg-i {
        color: #ffd400 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .text-yellow-md {
        color: #ffd400
    }

    .text-yellow-md-i {
        color: #ffd400 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .text-yellow-sm {
        color: #ffd400
    }

    .text-yellow-sm-i {
        color: #ffd400 !important
    }
}

@media screen and (max-width: 576px) {
    .text-yellow-xs {
        color: #ffd400
    }

    .text-yellow-xs-i {
        color: #ffd400 !important
    }
}

.text-marigold-all {
    color: #ffc800
}

.text-marigold-all-i {
    color: #ffc800 !important
}

@media screen and (min-width: 1200px) {
    .text-marigold-xl {
        color: #ffc800
    }

    .text-marigold-xl-i {
        color: #ffc800 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .text-marigold-lg {
        color: #ffc800
    }

    .text-marigold-lg-i {
        color: #ffc800 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .text-marigold-md {
        color: #ffc800
    }

    .text-marigold-md-i {
        color: #ffc800 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .text-marigold-sm {
        color: #ffc800
    }

    .text-marigold-sm-i {
        color: #ffc800 !important
    }
}

@media screen and (max-width: 576px) {
    .text-marigold-xs {
        color: #ffc800
    }

    .text-marigold-xs-i {
        color: #ffc800 !important
    }
}

.font-krungsri-all {
    font-family: 'Krungsri'
}

.font-krungsri-all-i {
    font-family: 'Krungsri' !important
}

@media screen and (min-width: 1200px) {
    .font-krungsri-xl {
        font-family: 'Krungsri'
    }

    .font-krungsri-xl-i {
        font-family: 'Krungsri' !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .font-krungsri-lg {
        font-family: 'Krungsri'
    }

    .font-krungsri-lg-i {
        font-family: 'Krungsri' !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .font-krungsri-md {
        font-family: 'Krungsri'
    }

    .font-krungsri-md-i {
        font-family: 'Krungsri' !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .font-krungsri-sm {
        font-family: 'Krungsri'
    }

    .font-krungsri-sm-i {
        font-family: 'Krungsri' !important
    }
}

@media screen and (max-width: 576px) {
    .font-krungsri-xs {
        font-family: 'Krungsri'
    }

    .font-krungsri-xs-i {
        font-family: 'Krungsri' !important
    }
}

.font-thongterm-all {
    font-family: 'Thongterm'
}

.font-thongterm-all-i {
    font-family: 'Thongterm' !important
}

@media screen and (min-width: 1200px) {
    .font-thongterm-xl {
        font-family: 'Thongterm'
    }

    .font-thongterm-xl-i {
        font-family: 'Thongterm' !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .font-thongterm-lg {
        font-family: 'Thongterm'
    }

    .font-thongterm-lg-i {
        font-family: 'Thongterm' !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .font-thongterm-md {
        font-family: 'Thongterm'
    }

    .font-thongterm-md-i {
        font-family: 'Thongterm' !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .font-thongterm-sm {
        font-family: 'Thongterm'
    }

    .font-thongterm-sm-i {
        font-family: 'Thongterm' !important
    }
}

@media screen and (max-width: 576px) {
    .font-thongterm-xs {
        font-family: 'Thongterm'
    }

    .font-thongterm-xs-i {
        font-family: 'Thongterm' !important
    }
}

.font-thongterm-roman-all {
    font-family: 'Thongterm-Roman'
}

.font-thongterm-roman-all-i {
    font-family: 'Thongterm-Roman' !important
}

@media screen and (min-width: 1200px) {
    .font-thongterm-roman-xl {
        font-family: 'Thongterm-Roman'
    }

    .font-thongterm-roman-xl-i {
        font-family: 'Thongterm-Roman' !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .font-thongterm-roman-lg {
        font-family: 'Thongterm-Roman'
    }

    .font-thongterm-roman-lg-i {
        font-family: 'Thongterm-Roman' !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .font-thongterm-roman-md {
        font-family: 'Thongterm-Roman'
    }

    .font-thongterm-roman-md-i {
        font-family: 'Thongterm-Roman' !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .font-thongterm-roman-sm {
        font-family: 'Thongterm-Roman'
    }

    .font-thongterm-roman-sm-i {
        font-family: 'Thongterm-Roman' !important
    }
}

@media screen and (max-width: 576px) {
    .font-thongterm-roman-xs {
        font-family: 'Thongterm-Roman'
    }

    .font-thongterm-roman-xs-i {
        font-family: 'Thongterm-Roman' !important
    }
}

.font-sukhumvitset-all {
    font-family: 'SukhumvitSet'
}

.font-sukhumvitset-all-i {
    font-family: 'SukhumvitSet' !important
}

@media screen and (min-width: 1200px) {
    .font-sukhumvitset-xl {
        font-family: 'SukhumvitSet'
    }

    .font-sukhumvitset-xl-i {
        font-family: 'SukhumvitSet' !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .font-sukhumvitset-lg {
        font-family: 'SukhumvitSet'
    }

    .font-sukhumvitset-lg-i {
        font-family: 'SukhumvitSet' !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .font-sukhumvitset-md {
        font-family: 'SukhumvitSet'
    }

    .font-sukhumvitset-md-i {
        font-family: 'SukhumvitSet' !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .font-sukhumvitset-sm {
        font-family: 'SukhumvitSet'
    }

    .font-sukhumvitset-sm-i {
        font-family: 'SukhumvitSet' !important
    }
}

@media screen and (max-width: 576px) {
    .font-sukhumvitset-xs {
        font-family: 'SukhumvitSet'
    }

    .font-sukhumvitset-xs-i {
        font-family: 'SukhumvitSet' !important
    }
}

.font-sukhumvitsetsemi-all {
    font-family: 'SukhumvitSet-Semi'
}

.font-sukhumvitsetsemi-all-i {
    font-family: 'SukhumvitSet-Semi' !important
}

@media screen and (min-width: 1200px) {
    .font-sukhumvitsetsemi-xl {
        font-family: 'SukhumvitSet-Semi'
    }

    .font-sukhumvitsetsemi-xl-i {
        font-family: 'SukhumvitSet-Semi' !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .font-sukhumvitsetsemi-lg {
        font-family: 'SukhumvitSet-Semi'
    }

    .font-sukhumvitsetsemi-lg-i {
        font-family: 'SukhumvitSet-Semi' !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .font-sukhumvitsetsemi-md {
        font-family: 'SukhumvitSet-Semi'
    }

    .font-sukhumvitsetsemi-md-i {
        font-family: 'SukhumvitSet-Semi' !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .font-sukhumvitsetsemi-sm {
        font-family: 'SukhumvitSet-Semi'
    }

    .font-sukhumvitsetsemi-sm-i {
        font-family: 'SukhumvitSet-Semi' !important
    }
}

@media screen and (max-width: 576px) {
    .font-sukhumvitsetsemi-xs {
        font-family: 'SukhumvitSet-Semi'
    }

    .font-sukhumvitsetsemi-xs-i {
        font-family: 'SukhumvitSet-Semi' !important
    }
}

.bg-defaultcolor-all {
    background-color: #5a5a5a
}

.bg-defaultcolor-all-i {
    background-color: #5a5a5a !important
}

@media screen and (min-width: 1200px) {
    .bg-defaultcolor-xl {
        background-color: #5a5a5a
    }

    .bg-defaultcolor-xl-i {
        background-color: #5a5a5a !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .bg-defaultcolor-lg {
        background-color: #5a5a5a
    }

    .bg-defaultcolor-lg-i {
        background-color: #5a5a5a !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .bg-defaultcolor-md {
        background-color: #5a5a5a
    }

    .bg-defaultcolor-md-i {
        background-color: #5a5a5a !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .bg-defaultcolor-sm {
        background-color: #5a5a5a
    }

    .bg-defaultcolor-sm-i {
        background-color: #5a5a5a !important
    }
}

@media screen and (max-width: 576px) {
    .bg-defaultcolor-xs {
        background-color: #5a5a5a
    }

    .bg-defaultcolor-xs-i {
        background-color: #5a5a5a !important
    }
}

.bg-white-all {
    background-color: #fff
}

.bg-white-all-i {
    background-color: #fff !important
}

@media screen and (min-width: 1200px) {
    .bg-white-xl {
        background-color: #fff
    }

    .bg-white-xl-i {
        background-color: #fff !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .bg-white-lg {
        background-color: #fff
    }

    .bg-white-lg-i {
        background-color: #fff !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .bg-white-md {
        background-color: #fff
    }

    .bg-white-md-i {
        background-color: #fff !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .bg-white-sm {
        background-color: #fff
    }

    .bg-white-sm-i {
        background-color: #fff !important
    }
}

@media screen and (max-width: 576px) {
    .bg-white-xs {
        background-color: #fff
    }

    .bg-white-xs-i {
        background-color: #fff !important
    }
}

.bg-yellow-all {
    background-color: #ffd400
}

.bg-yellow-all-i {
    background-color: #ffd400 !important
}

@media screen and (min-width: 1200px) {
    .bg-yellow-xl {
        background-color: #ffd400
    }

    .bg-yellow-xl-i {
        background-color: #ffd400 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .bg-yellow-lg {
        background-color: #ffd400
    }

    .bg-yellow-lg-i {
        background-color: #ffd400 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .bg-yellow-md {
        background-color: #ffd400
    }

    .bg-yellow-md-i {
        background-color: #ffd400 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .bg-yellow-sm {
        background-color: #ffd400
    }

    .bg-yellow-sm-i {
        background-color: #ffd400 !important
    }
}

@media screen and (max-width: 576px) {
    .bg-yellow-xs {
        background-color: #ffd400
    }

    .bg-yellow-xs-i {
        background-color: #ffd400 !important
    }
}

.bg-marigold-all {
    background-color: #ffc800
}

.bg-marigold-all-i {
    background-color: #ffc800 !important
}

@media screen and (min-width: 1200px) {
    .bg-marigold-xl {
        background-color: #ffc800
    }

    .bg-marigold-xl-i {
        background-color: #ffc800 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .bg-marigold-lg {
        background-color: #ffc800
    }

    .bg-marigold-lg-i {
        background-color: #ffc800 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .bg-marigold-md {
        background-color: #ffc800
    }

    .bg-marigold-md-i {
        background-color: #ffc800 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .bg-marigold-sm {
        background-color: #ffc800
    }

    .bg-marigold-sm-i {
        background-color: #ffc800 !important
    }
}

@media screen and (max-width: 576px) {
    .bg-marigold-xs {
        background-color: #ffc800
    }

    .bg-marigold-xs-i {
        background-color: #ffc800 !important
    }
}

.bg-lightgray-all {
    background-color: #f3f3f3
}

.bg-lightgray-all-i {
    background-color: #f3f3f3 !important
}

@media screen and (min-width: 1200px) {
    .bg-lightgray-xl {
        background-color: #f3f3f3
    }

    .bg-lightgray-xl-i {
        background-color: #f3f3f3 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .bg-lightgray-lg {
        background-color: #f3f3f3
    }

    .bg-lightgray-lg-i {
        background-color: #f3f3f3 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .bg-lightgray-md {
        background-color: #f3f3f3
    }

    .bg-lightgray-md-i {
        background-color: #f3f3f3 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .bg-lightgray-sm {
        background-color: #f3f3f3
    }

    .bg-lightgray-sm-i {
        background-color: #f3f3f3 !important
    }
}

@media screen and (max-width: 576px) {
    .bg-lightgray-xs {
        background-color: #f3f3f3
    }

    .bg-lightgray-xs-i {
        background-color: #f3f3f3 !important
    }
}

.bg-snowgray-all {
    background-color: #f9f9f9
}

.bg-snowgray-all-i {
    background-color: #f9f9f9 !important
}

@media screen and (min-width: 1200px) {
    .bg-snowgray-xl {
        background-color: #f9f9f9
    }

    .bg-snowgray-xl-i {
        background-color: #f9f9f9 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .bg-snowgray-lg {
        background-color: #f9f9f9
    }

    .bg-snowgray-lg-i {
        background-color: #f9f9f9 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .bg-snowgray-md {
        background-color: #f9f9f9
    }

    .bg-snowgray-md-i {
        background-color: #f9f9f9 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .bg-snowgray-sm {
        background-color: #f9f9f9
    }

    .bg-snowgray-sm-i {
        background-color: #f9f9f9 !important
    }
}

@media screen and (max-width: 576px) {
    .bg-snowgray-xs {
        background-color: #f9f9f9
    }

    .bg-snowgray-xs-i {
        background-color: #f9f9f9 !important
    }
}

.opacity-0-all {
    opacity: 0
}

.opacity-0-all-i {
    opacity: 0 !important
}

@media screen and (min-width: 1200px) {
    .opacity-0-xl {
        opacity: 0
    }

    .opacity-0-xl-i {
        opacity: 0 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-0-lg {
        opacity: 0
    }

    .opacity-0-lg-i {
        opacity: 0 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-0-md {
        opacity: 0
    }

    .opacity-0-md-i {
        opacity: 0 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-0-sm {
        opacity: 0
    }

    .opacity-0-sm-i {
        opacity: 0 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-0-xs {
        opacity: 0
    }

    .opacity-0-xs-i {
        opacity: 0 !important
    }
}

.opacity-10-all {
    opacity: .1
}

.opacity-10-all-i {
    opacity: .1 !important
}

@media screen and (min-width: 1200px) {
    .opacity-10-xl {
        opacity: .1
    }

    .opacity-10-xl-i {
        opacity: .1 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-10-lg {
        opacity: .1
    }

    .opacity-10-lg-i {
        opacity: .1 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-10-md {
        opacity: .1
    }

    .opacity-10-md-i {
        opacity: .1 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-10-sm {
        opacity: .1
    }

    .opacity-10-sm-i {
        opacity: .1 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-10-xs {
        opacity: .1
    }

    .opacity-10-xs-i {
        opacity: .1 !important
    }
}

.opacity-15-all {
    opacity: .15
}

.opacity-15-all-i {
    opacity: .15 !important
}

@media screen and (min-width: 1200px) {
    .opacity-15-xl {
        opacity: .15
    }

    .opacity-15-xl-i {
        opacity: .15 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-15-lg {
        opacity: .15
    }

    .opacity-15-lg-i {
        opacity: .15 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-15-md {
        opacity: .15
    }

    .opacity-15-md-i {
        opacity: .15 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-15-sm {
        opacity: .15
    }

    .opacity-15-sm-i {
        opacity: .15 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-15-xs {
        opacity: .15
    }

    .opacity-15-xs-i {
        opacity: .15 !important
    }
}

.opacity-20-all {
    opacity: .2
}

.opacity-20-all-i {
    opacity: .2 !important
}

@media screen and (min-width: 1200px) {
    .opacity-20-xl {
        opacity: .2
    }

    .opacity-20-xl-i {
        opacity: .2 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-20-lg {
        opacity: .2
    }

    .opacity-20-lg-i {
        opacity: .2 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-20-md {
        opacity: .2
    }

    .opacity-20-md-i {
        opacity: .2 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-20-sm {
        opacity: .2
    }

    .opacity-20-sm-i {
        opacity: .2 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-20-xs {
        opacity: .2
    }

    .opacity-20-xs-i {
        opacity: .2 !important
    }
}

.opacity-25-all {
    opacity: .25
}

.opacity-25-all-i {
    opacity: .25 !important
}

@media screen and (min-width: 1200px) {
    .opacity-25-xl {
        opacity: .25
    }

    .opacity-25-xl-i {
        opacity: .25 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-25-lg {
        opacity: .25
    }

    .opacity-25-lg-i {
        opacity: .25 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-25-md {
        opacity: .25
    }

    .opacity-25-md-i {
        opacity: .25 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-25-sm {
        opacity: .25
    }

    .opacity-25-sm-i {
        opacity: .25 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-25-xs {
        opacity: .25
    }

    .opacity-25-xs-i {
        opacity: .25 !important
    }
}

.opacity-30-all {
    opacity: .3
}

.opacity-30-all-i {
    opacity: .3 !important
}

@media screen and (min-width: 1200px) {
    .opacity-30-xl {
        opacity: .3
    }

    .opacity-30-xl-i {
        opacity: .3 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-30-lg {
        opacity: .3
    }

    .opacity-30-lg-i {
        opacity: .3 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-30-md {
        opacity: .3
    }

    .opacity-30-md-i {
        opacity: .3 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-30-sm {
        opacity: .3
    }

    .opacity-30-sm-i {
        opacity: .3 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-30-xs {
        opacity: .3
    }

    .opacity-30-xs-i {
        opacity: .3 !important
    }
}

.opacity-35-all {
    opacity: .35
}

.opacity-35-all-i {
    opacity: .35 !important
}

@media screen and (min-width: 1200px) {
    .opacity-35-xl {
        opacity: .35
    }

    .opacity-35-xl-i {
        opacity: .35 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-35-lg {
        opacity: .35
    }

    .opacity-35-lg-i {
        opacity: .35 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-35-md {
        opacity: .35
    }

    .opacity-35-md-i {
        opacity: .35 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-35-sm {
        opacity: .35
    }

    .opacity-35-sm-i {
        opacity: .35 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-35-xs {
        opacity: .35
    }

    .opacity-35-xs-i {
        opacity: .35 !important
    }
}

.opacity-50-all {
    opacity: .5
}

.opacity-50-all-i {
    opacity: .5 !important
}

@media screen and (min-width: 1200px) {
    .opacity-50-xl {
        opacity: .5
    }

    .opacity-50-xl-i {
        opacity: .5 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-50-lg {
        opacity: .5
    }

    .opacity-50-lg-i {
        opacity: .5 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-50-md {
        opacity: .5
    }

    .opacity-50-md-i {
        opacity: .5 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-50-sm {
        opacity: .5
    }

    .opacity-50-sm-i {
        opacity: .5 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-50-xs {
        opacity: .5
    }

    .opacity-50-xs-i {
        opacity: .5 !important
    }
}

.opacity-75-all {
    opacity: .75
}

.opacity-75-all-i {
    opacity: .75 !important
}

@media screen and (min-width: 1200px) {
    .opacity-75-xl {
        opacity: .75
    }

    .opacity-75-xl-i {
        opacity: .75 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-75-lg {
        opacity: .75
    }

    .opacity-75-lg-i {
        opacity: .75 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-75-md {
        opacity: .75
    }

    .opacity-75-md-i {
        opacity: .75 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-75-sm {
        opacity: .75
    }

    .opacity-75-sm-i {
        opacity: .75 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-75-xs {
        opacity: .75
    }

    .opacity-75-xs-i {
        opacity: .75 !important
    }
}

.opacity-80-all {
    opacity: .8
}

.opacity-80-all-i {
    opacity: .8 !important
}

@media screen and (min-width: 1200px) {
    .opacity-80-xl {
        opacity: .8
    }

    .opacity-80-xl-i {
        opacity: .8 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-80-lg {
        opacity: .8
    }

    .opacity-80-lg-i {
        opacity: .8 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-80-md {
        opacity: .8
    }

    .opacity-80-md-i {
        opacity: .8 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-80-sm {
        opacity: .8
    }

    .opacity-80-sm-i {
        opacity: .8 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-80-xs {
        opacity: .8
    }

    .opacity-80-xs-i {
        opacity: .8 !important
    }
}

.opacity-90-all {
    opacity: .9
}

.opacity-90-all-i {
    opacity: .9 !important
}

@media screen and (min-width: 1200px) {
    .opacity-90-xl {
        opacity: .9
    }

    .opacity-90-xl-i {
        opacity: .9 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-90-lg {
        opacity: .9
    }

    .opacity-90-lg-i {
        opacity: .9 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-90-md {
        opacity: .9
    }

    .opacity-90-md-i {
        opacity: .9 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-90-sm {
        opacity: .9
    }

    .opacity-90-sm-i {
        opacity: .9 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-90-xs {
        opacity: .9
    }

    .opacity-90-xs-i {
        opacity: .9 !important
    }
}

.opacity-95-all {
    opacity: .95
}

.opacity-95-all-i {
    opacity: .95 !important
}

@media screen and (min-width: 1200px) {
    .opacity-95-xl {
        opacity: .95
    }

    .opacity-95-xl-i {
        opacity: .95 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-95-lg {
        opacity: .95
    }

    .opacity-95-lg-i {
        opacity: .95 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-95-md {
        opacity: .95
    }

    .opacity-95-md-i {
        opacity: .95 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-95-sm {
        opacity: .95
    }

    .opacity-95-sm-i {
        opacity: .95 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-95-xs {
        opacity: .95
    }

    .opacity-95-xs-i {
        opacity: .95 !important
    }
}

.opacity-100-all {
    opacity: 1
}

.opacity-100-all-i {
    opacity: 1 !important
}

@media screen and (min-width: 1200px) {
    .opacity-100-xl {
        opacity: 1
    }

    .opacity-100-xl-i {
        opacity: 1 !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .opacity-100-lg {
        opacity: 1
    }

    .opacity-100-lg-i {
        opacity: 1 !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .opacity-100-md {
        opacity: 1
    }

    .opacity-100-md-i {
        opacity: 1 !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .opacity-100-sm {
        opacity: 1
    }

    .opacity-100-sm-i {
        opacity: 1 !important
    }
}

@media screen and (max-width: 576px) {
    .opacity-100-xs {
        opacity: 1
    }

    .opacity-100-xs-i {
        opacity: 1 !important
    }
}

.text-left-all {
    text-align: left
}

.text-left-all-i {
    text-align: left !important
}

@media screen and (min-width: 1200px) {
    .text-left-xl {
        text-align: left
    }

    .text-left-xl-i {
        text-align: left !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .text-left-lg {
        text-align: left
    }

    .text-left-lg-i {
        text-align: left !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .text-left-md {
        text-align: left
    }

    .text-left-md-i {
        text-align: left !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .text-left-sm {
        text-align: left
    }

    .text-left-sm-i {
        text-align: left !important
    }
}

@media screen and (max-width: 576px) {
    .text-left-xs {
        text-align: left
    }

    .text-left-xs-i {
        text-align: left !important
    }
}

.text-center-all {
    text-align: center
}

.text-center-all-i {
    text-align: center !important
}

@media screen and (min-width: 1200px) {
    .text-center-xl {
        text-align: center
    }

    .text-center-xl-i {
        text-align: center !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .text-center-lg {
        text-align: center
    }

    .text-center-lg-i {
        text-align: center !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .text-center-md {
        text-align: center
    }

    .text-center-md-i {
        text-align: center !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .text-center-sm {
        text-align: center
    }

    .text-center-sm-i {
        text-align: center !important
    }
}

@media screen and (max-width: 576px) {
    .text-center-xs {
        text-align: center
    }

    .text-center-xs-i {
        text-align: center !important
    }
}

.text-right-all {
    text-align: right
}

.text-right-all-i {
    text-align: right !important
}

@media screen and (min-width: 1200px) {
    .text-right-xl {
        text-align: right
    }

    .text-right-xl-i {
        text-align: right !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .text-right-lg {
        text-align: right
    }

    .text-right-lg-i {
        text-align: right !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .text-right-md {
        text-align: right
    }

    .text-right-md-i {
        text-align: right !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .text-right-sm {
        text-align: right
    }

    .text-right-sm-i {
        text-align: right !important
    }
}

@media screen and (max-width: 576px) {
    .text-right-xs {
        text-align: right
    }

    .text-right-xs-i {
        text-align: right !important
    }
}

.w-100px {
    width: 100px;
    max-width: 100px
}

.w-120px {
    width: 100px;
    max-width: 100px
}

.bg-yellow {
    background-color: #ffda00
}

.mt-60px-all {
    margin-top: 60px
}

.mt-60px-all-i {
    margin-top: 60px !important
}

@media screen and (min-width: 1200px) {
    .mt-60px-xl {
        margin-top: 60px
    }

    .mt-60px-xl-i {
        margin-top: 60px !important
    }
}

@media screen and (max-width: 1199px) and (min-width:992px) {
    .mt-60px-lg {
        margin-top: 60px
    }

    .mt-60px-lg-i {
        margin-top: 60px !important
    }
}

@media screen and (max-width: 992px) and (min-width:768px) {
    .mt-60px-md {
        margin-top: 60px
    }

    .mt-60px-md-i {
        margin-top: 60px !important
    }
}

@media screen and (max-width: 768px) and (min-width:576px) {
    .mt-60px-sm {
        margin-top: 60px
    }

    .mt-60px-sm-i {
        margin-top: 60px !important
    }
}

@media screen and (max-width: 576px) {
    .mt-60px-xs {
        margin-top: 60px
    }

    .mt-60px-i {
        margin-top: 60px !important
    }
}

.font-Krungsri-Condensed-Bold {
    font-family: "Krungsri-Condensed-Bold"
}

.font-Krungsri-Condensed {
    font-family: "Krungsri-Condensed"
}

.font-Thongterm {
    font-family: Thongterm-Roman
}

.font-Thongterm-Bold {
    font-family: Thongterm-Bold
}

.kma .container--breadcrumb {
    max-width: 1170px;
    margin: auto;
    padding-top: 6px;
    padding-bottom: 6px
}

.kma .container--header {
    max-width: 1170px;
    margin: auto;
    margin-top: 16px;
    margin-bottom: 16px
}

.kma .container--content {
    max-width: 1170px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 80px
}

    .kma .container--content .item {
        display: inline-block;
        border-radius: 3px;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
        background-color: #fff;
        width: 100%;
        margin-bottom: 30px;
        overflow: hidden
    }

    .kma .container--content .content {
        padding: 16px;
        height: 150px
    }

        .kma .container--content .content .header h2 {
            color: #222;
            font-family: Krungsri-Condensed-Bold;
            font-size: 24px;
            line-height: 36px;
            margin-bottom: 66px
        }

        .kma .container--content .content .more-detail {
            position: absolute;
            bottom: 36px
        }

.kma .container--cover.container--banner.banner-height-480px {
    max-height: 480px
}

.kma .container--cover.container--banner.banner-height-360px {
    max-height: 360px
}

.kma .container--banner.banner-height-480px .block-banner .cover-content-wrapper .banner-content {
    text-shadow: none;
    top: 0;
    padding-top: 116px;
    margin-bottom: 0;
    padding-bottom: 0
}

.kma .container--banner.banner-secondary .block-banner .cover-content-wrapper .banner-content .description {
    text-shadow: 1px 2px 0 rgba(0,0,0,.2)
}

.container--banner.banner-text .block-banner .cover-content-wrapper .banner-content .banner-logo-top {
    position: absolute;
    top: 35px
}

    .container--banner.banner-text .block-banner .cover-content-wrapper .banner-content .banner-logo-top img {
        margin-left: 0;
        height: 50px
    }

.kma .container--banner.banner-height-480px .block-banner .cover-content-wrapper .banner-content .description {
    color: #222;
    font-family: Thongterm-Bold;
    font-size: 24px;
    line-height: 36px
}

.kma .container--cover.container--banner.banner-height-480px .image {
    max-height: 480px;
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative
}

.kma .container--cover.container--banner.banner-height-360px .image {
    max-height: 360px;
    width: 100%;
    height: 360px;
    overflow: hidden;
    position: relative
}

.kma .container--cover.container--banner .image img {
    min-width: 100% !important
}

.kma .container--banner .block-banner .banner-content .btn {
    color: #554242;
    font-family: Krungsri-Condensed-Bold;
    font-size: 16px;
    line-height: 27px;
    text-shadow: none;
    height: 44px !important;
    padding: 7px !important;
    width: 180px;
    margin-top: 32px
}

.kma .container--banner.banner-height-320px .block-banner .banner-content .btn {
    width: 170px
}

.kma .container--banner--footer .text1-footer-mobile {
    font-family: Krungsri-Condensed-Bold;
    color: #fff;
    font-size: 32px;
    line-height: 48px;
    text-shadow: 2px 1px 0 rgba(0,0,0,.2);
    padding-bottom: 1px
}

.kma .container--banner--footer .text2-footer-mobile {
    color: #fff;
    font-family: Thongterm-Roman;
    font-size: 16px;
    line-height: 30px;
    text-shadow: 2px 1px 0 rgba(0,0,0,.2)
}

.kma .container--banner--footer .btn.btn-primary {
    color: #554242 !important;
    font-family: Krungsri-Condensed-Bold;
    font-size: 16px;
    line-height: 30px;
    text-shadow: none;
    height: 44px !important;
    padding: 7px !important;
    width: 180px
}

.kma .container--banner.banner-height-360px .block-banner .cover-content-wrapper .banner-content .description {
    font-family: Thongterm-Roman;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 50px;
    text-shadow: 1px 2px 0 rgba(0,0,0,.2)
}

.kma .container--banner.container--banner--hero .cover-content-wrapper .banner-content .application-list {
    padding-top: 32px
}

    .kma .container--banner.container--banner--hero .cover-content-wrapper .banner-content .application-list img {
        width: 128px
    }

    .kma .container--banner.container--banner--hero .cover-content-wrapper .banner-content .application-list .app-list {
        float: left
    }

        .kma .container--banner.container--banner--hero .cover-content-wrapper .banner-content .application-list .app-list + .app-list {
            margin-left: 16px
        }

.kma .ui.ks.dropdown.mobile .text i {
    padding-left: 5px
}

.container--banner.container--banner--hero .image img {
    height: 480px
}

.container--banner.container--banner--hero.banner-height-360px .image img {
    height: 360px
}

.container--banner.banner-text .block-banner .banner-content {
    width: 100%;
    border: 0;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    z-index: 10;
    padding-bottom: 0;
    padding-top: 56px;
    padding-left: 0
}

.container--banner.banner-text .block-banner .cover-content-wrapper .banner-content .h1 {
    color: #222;
    font-family: Krungsri-Condensed-Bold;
    font-size: 40px;
    line-height: 60px;
    text-shadow: 1px 2px 0 rgba(0,0,0,.2);
    margin-bottom: 16px
}

.container--banner.banner-text .block-banner .cover-content-wrapper .banner-content .description {
    color: #222;
    font-family: Thongterm-Bold;
    font-size: 24px;
    line-height: 36px
}

.container--banner.banner-text .block-banner .cover-content-wrapper .banner-content .banner-qr img {
    height: 250px;
    position: absolute;
    top: 55px;
    right: 0
}

.container--banner.banner-fix-height.banner-text .owl-carousel .owl-item img {
    width: auto;
    margin: auto
}

.kma .container--cover.container--banner.banner-height-360px .block-banner .banner-content .btn {
    margin-top: 16px
}

@media(max-width: 1199px) {
    .container--banner .block-banner .cover-content-wrapper .banner-content {
        padding-left: 15px !important
    }

    .kma .container-title {
        background-color: #fff
    }

    .kma .nav-secondary-menu {
        top: 0
    }

    .kma .list-group .list-group-item.list-group-item-action {
        background: #fff
    }

        .kma .list-group .list-group-item.list-group-item-action.active {
            background-color: #ffd400
        }
}

@media(max-width: 767px) {
    .kma .container--header1 h1 {
        font-size: 26px;
        line-height: 38px
    }

    .kma .container--banner--footer .text1-footer-mobile {
        font-size: 24px;
        line-height: 42px;
        text-align: center;
        padding-bottom: 0
    }

    .kma .container--banner--footer .text2-footer-mobile {
        font-size: 18px;
        line-height: 36px;
        text-align: center
    }

    .kma .container--banner--footer .z_btn {
        text-align: center
    }

        .kma .container--banner--footer .z_btn .btn {
            display: inline-block;
            height: 44px;
            width: 270px;
            padding: 7px !important;
            margin-top: 16px !important
        }

    .kma .container--banner--footer .container--banner .block-banner .banner-content {
        padding-bottom: 24px;
        width: 100%;
        margin-bottom: 0
    }

    .kma .container--content .content {
        height: auto
    }

    .kma .container--content .image {
        width: 100%;
        float: left
    }

    .kma .container--content .content {
        padding: 8px;
        width: 66.666667%;
        float: left
    }

        .kma .container--content .content .header h2 {
            color: #222;
            font-family: Krungsri-Condensed-Bold;
            font-size: 16px;
            line-height: 30px;
            margin-bottom: 15px
        }

        .kma .container--content .content .Text-link {
            font-size: 10px;
            line-height: 22px
        }

    .kma .container--banner.banner-height-360px .block-banner .cover-content-wrapper .banner-content {
        text-align: center !important;
        top: 80px
    }

        .kma .container--banner.banner-height-360px .block-banner .cover-content-wrapper .banner-content .h1 {
            color: #fff;
            font-size: 24px;
            line-height: 42px;
            margin-bottom: 0
        }

        .kma .container--banner.banner-height-360px .block-banner .cover-content-wrapper .banner-content .description {
            color: #fff;
            font-size: 18px;
            line-height: 36px
        }

    .kma .container--banner .block-banner .banner-content .btn {
        margin-top: 16px;
        width: 270px
    }

    .kma .container--cover.container--banner.banner-mobile-height-520px {
        max-height: 520px
    }

    .kma .container--banner.banner-mobile-height-520px .owl-item .item .block-banner .image {
        height: 520px;
        max-height: 520px;
        min-width: auto
    }

        .kma .container--banner.banner-mobile-height-520px .owl-item .item .block-banner .image img {
            height: 520px;
            max-height: 520px;
            min-width: auto
        }

    .kma .container--banner.banner-height-480px .block-banner .cover-content-wrapper .banner-content .h1 {
        color: #fff;
        font-family: Krungsri-Condensed-Bold;
        font-size: 24px;
        line-height: 42px;
        text-shadow: 1px 2px 0 rgba(0,0,0,.2);
        margin-bottom: 16px
    }

    .kma .container--banner.banner-height-480px .block-banner .cover-content-wrapper .banner-content .description {
        color: #fff;
        font-family: Thongterm-Bold;
        font-size: 18px;
        line-height: 38px
    }

    .kma .container--cover.container--banner.banner-height-480px .image {
        max-height: 480px;
        width: 100%;
        height: 480px;
        overflow: hidden;
        position: relative
    }

    .kma .container--banner .block-banner .banner-content .btn {
        color: #554242 !important;
        font-family: Krungsri-Condensed-Bold;
        font-size: 16px;
        line-height: 27px;
        text-shadow: none;
        height: 44px !important;
        padding: 7px !important;
        width: 270px;
        margin-top: 32px
    }

    .kma .container--content {
        margin-top: 16px;
        margin-bottom: 56px
    }

    .kma .ui.ks.dropdown.mobile {
        width: 270px
    }

        .kma .ui.ks.dropdown.mobile .text i {
            padding-left: 12px
        }

    .kma .container--banner.container--banner--hero .owl-item .item .block-banner .image {
        position: absolute
    }

    .kma .container--banner.container--banner--hero.banner-mobile-height-520px .cover-content-wrapper {
        height: 520px
    }

    .kma .container--banner.container--banner--hero.banner-mobile-height-360px .cover-content-wrapper {
        height: 360px
    }

    .kma .container--banner.container--banner--hero.banner-static .block-banner .ks-gradient {
        display: none
    }

    .kma .container--banner.container--banner--hero.banner-static.banner-text .block-banner .ks-gradient {
        display: block
    }

    .kma .container--banner.container--banner--hero .cover-content-wrapper .banner-content {
        text-align: center !important;
        top: initial !important;
        bottom: 24px;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        text-shadow: 1px 2px 0 rgba(0,0,0,.2) !important
    }

    .kma .container--banner.container--banner--hero.banner-slide .cover-content-wrapper .banner-content {
        bottom: 48px
    }

    .kma .container--banner.container--banner--hero .owl-item .item .block-banner .image {
        position: absolute
    }

    .kma .container--banner.container--banner--hero .cover-content-wrapper .banner-content .application-list {
        padding-top: 8px;
        text-align: center
    }

        .kma .container--banner.container--banner--hero .cover-content-wrapper .banner-content .application-list .app-list {
            float: none;
            display: inline-block
        }

    .kma .container--banner--hero .cover-content-wrapper .banner-content .h1 {
        margin-bottom: 8px !important
    }

    .container--banner.banner-static.banner-text .block-banner .cover-content-wrapper .banner-content .description .banner-qr {
        display: none
    }

    .kma .container--banner.container--banner--hero.banner-static.banner-text .block-banner .image {
        position: absolute
    }

    .kma .container--cover.container--banner.banner-height-360px .block-banner .banner-content .btn {
        margin-top: 8px
    }

    .container--banner.banner-text .block-banner .cover-content-wrapper .banner-content .banner-logo-top {
        display: none
    }
}

.kma .container--banner .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 2px !important
}

.kma .owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
    width: 13px;
    height: 13px;
    margin-left: 12px;
    margin-right: 12px;
    background: transparent;
    border: 2px solid #fff
}

.kma .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffd400;
    border: 0
}

.kma .container--link {
    margin-top: 40px;
    margin-bottom: 40px;
    texe-align: center
}

.kma .CMSBreadCrumbsSeparator:before {
    display: inline-block;
    padding: 0 10px;
    content: "";
    font-weight: 300;
    font-family: "Font Awesome 5 Pro";
    font-size: 18px;
    line-height: normal;
    position: relative;
    top: 1.5px
}

.kma .CMSBreadCrumbsCurrentItem {
    color: #545454;
    font-family: Thongterm-Bold
}

@media screen and (max-width: 767px) {
    .kma .container--banner .owl-item .item .block-banner .image {
        width: 100%;
        height: 360px;
        overflow: hidden;
        position: relative
    }

    .kma .container--content .item {
        margin-bottom: 6px
    }

    .kma .container--content .content .more-detail {
        position: absolute;
        bottom: 22px
    }

    .kma .container--banner.banner-height-360px .block-banner .cover-content-wrapper .banner-content {
        text-align: center !important;
        top: 116px
    }
}

.kma .container--menu {
    max-width: 1170px;
    margin: auto
}

.kma .kmanav {
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(90,90,90,.2);
    margin-left: -15px;
    margin-right: -15px;
    z-index: 999;
    position: relative
}

    .kma .kmanav.fixed-top {
        z-index: 1001;
        position: fixed
    }

.kma .kma-menu .menuitem {
    display: block;
    padding-right: 0;
    padding: 0 24px;
    float: left
}

    .kma .kma-menu .menuitem .inner {
        background: transparent;
        position: relative;
        overflow: hidden
    }

        .kma .kma-menu .menuitem.active .inner a, .kma .kma-menu .menuitem.active2 .inner a, .kma .kma-menu .menuitem .inner a:hover {
            background: transparent
        }

        .kma .kma-menu .menuitem .inner:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: -100%;
            width: 100%;
            height: 3px;
            background: #ffd400;
            transition: .3s cubic-bezier(.445,.05,.55,.95)
        }

        .kma .kma-menu .menuitem .inner a {
            font-size: 20px;
            font-family: Krungsri-Condensed-Medium;
            color: #5a5a5a;
            letter-spacing: 0;
            line-height: 30px;
            height: 78px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            list-style-type: none
        }

    .kma .kma-menu .menuitem.active2 a {
        border-bottom: 3px solid #f9d848
    }

    .kma .kma-menu .menuitem.active a {
        font-family: Krungsri-Condensed-Bold;
        color: #222
    }

    .kma .kma-menu .menuitem .inner:hover:after, .kma .kma-menu .menuitem.active .inner:after {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

.kma .kma-menu-desktop {
    background-color: #fff
}

.kma .kmanav.fixed-top .nav-menu-mobile {
    display: none
}

@media(max-width: 1199px) {
    .kma-menu-desktop {
        display: none
    }

    .nav-menu-mobile {
        display: block;
        margin-top: 40px;
        background-color: #fff
    }

    .kma .kmanav {
        box-shadow: none;
        background-color: transparent
    }

        .kma .kmanav.fixed-top .nav-menu-mobile {
            padding-top: 15px;
            padding-bottom: 15px;
            top: 0;
            position: relative;
            margin-top: 0;
            box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.1);
            display: block
        }

            .kma .kmanav.fixed-top .nav-menu-mobile .btn-secondary-menu {
                margin-bottom: 0
            }
}

.kma .container--content {
    margin-bottom: 10px
}

.kma .recommend-product-zone {
    padding-bottom: 10px
}

.kma .viewmore {
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
    max-width: 270px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background-color: #fff;
    padding: 6px;
    margin: auto;
    margin-top: 24px
}

@media screen and (max-width: 767px) {
    .kma .recommend-product-zone .recomend-item {
        padding-bottom: 8px
    }

        .kma .recommend-product-zone .recomend-item:nth-child(2n+1) {
            padding-left: 4.5px
        }

        .kma .recommend-product-zone .recomend-item:nth-child(2n) {
            padding-right: 4.5px
        }

        .kma .recommend-product-zone .recomend-item:first-child {
            padding-left: 15px;
            padding-right: 15px
        }

    .kma .recommend-product-zone {
        padding-bottom: 56px
    }
}

.kma .knowledge-bock .item .header {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 27px
}

.kma .knowledge-zone .content {
    height: 122px
}

.kma .knowledge-zone .owl-item {
    padding: 0 10px
}

    .kma .knowledge-zone .owl-item:first-of-type {
        padding-left: 0;
        padding-right: 20px
    }

    .kma .knowledge-zone .owl-item:last-of-type {
        padding-right: 0;
        padding-left: 20px
    }

@media screen and (max-width: 767px) {
    .kma .knowledge-zone .content {
        height: 70px
    }

    .kma #knowledge-slide .image {
        width: auto;
        float: none
    }

    .kma #knowledge-slide .content {
        width: 100%;
        float: none;
        min-height: 64px
    }

    .kma .knowledge-zone .owl-item:first-of-type, .kma .knowledge-zone .owl-item.active {
        padding-left: 0;
        padding-right: 8px
    }

    .kma .knowledge-bock .item .header {
        font-size: 16px;
        letter-spacing: 0;
        line-height: 24px
    }
}

.kma .container--get--application {
    background-color: #ffd400;
    padding: 40px 0
}

    .kma .container--get--application .text {
        color: #222;
        font-size: 20px;
        letter-spacing: 0;
        line-height: 30px;
        text-align: center
    }

    .kma .container--get--application .application-list {
        padding-top: 32px
    }

    .kma .container--get--application .get-qr {
        left: -55px
    }

        .kma .container--get--application .get-qr img {
            height: 152px
        }

    .kma .container--get--application .application-list img {
        max-height: 60px
    }

@media screen and (max-width: 767px) {
    .kma .container--get--application {
        padding: 24px 0
    }

        .kma .container--get--application .application-list {
            padding-top: 16px
        }

        .kma .container--get--application .text {
            font-size: 18px;
            letter-spacing: 0;
            line-height: 30px
        }

        .kma .container--get--application .application-list img {
            max-height: 40px
        }

        .kma .container--get--application .application-list .application-list-item {
            padding: 0 8px
        }

            .kma .container--get--application .application-list .application-list-item:first-child {
                text-align: right
            }

            .kma .container--get--application .application-list .application-list-item:last-child {
                text-align: left
            }
}

.kma .kma-banner-footer .text1-footer-mobile {
    font-family: Krungsri-Condensed-Bold;
    color: #fff;
    font-size: 40px;
    letter-spacing: 0;
    line-height: 64px;
    text-shadow: 2px 1px 0 rgba(0,0,0,.2)
}

.text2-footer-mobile {
    color: #fff
}

.kma .kma-banner-footer .text2-footer-mobile {
    font-family: Thongterm-Bold;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 50px;
    text-shadow: 2px 1px 0 rgba(0,0,0,.2)
}

.banner-footer .ks-gradient {
    background-image: linear-gradient(to top,rgba(0,0,0,.7019607843137254),rgba(0,0,0,0)) !important;
    background-color: rgba(34,34,34,.050980392156862744) !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    z-index: 1;
    background-color: #222;
    background-image: none !important;
    opacity: .7 !important
}

.kma .container--cover.container--banner.banner-height-320px .image {
    max-height: 320px;
    width: 100%;
    height: 320px
}

.container--banner.banner-height-320px .image img {
    height: 320px
}

.kma .clearfix {
    clear: both
}

@media(max-width: 767px) {
    .kma .kma-banner-footer .text1-footer-mobile {
        color: #fff;
        font-size: 24px;
        line-height: 42px;
        text-align: center
    }

    .kma .kma-banner-footer .text2-footer-mobile {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 38px;
        text-align: center
    }

    .kma .kma-banner-footer .btn {
        display: block;
        margin: auto;
        margin-top: 16px !important
    }

    .kma .kma-banner-footer .banner-content {
        padding-top: 155px !important
    }
}

.step-cate-seemore {
    cursor: pointer;
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px;
    margin-top: 24px;
    display: inline-block
}

    .step-cate-seemore.mobile {
        display: none
    }

    .step-cate-seemore:after {
        content: "";
        font-family: 'Font Awesome 5 Pro';
        font-weight: 400;
        left: 10px;
        top: 1px;
        position: relative
    }

    .step-cate-seemore[aria-expanded="true"]:after {
        content: ""
    }

.register-category .step-desc-block {
    padding: 50px 0
}

.register-category .step-desc-block {
    color: #5a5a5a;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px;
    font-family: Thongterm-Roman
}

.step-item-image {
    max-width: 206px;
    margin: auto
}

.register-step-slider {
    margin-top: 40px;
    margin-bottom: 30px
}

    .register-step-slider .step-title, .banner-step-slider .step-title {
        color: #545454;
        font-family: Thongterm-Bold;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 34px;
        text-align: center;
        margin-top: 16px
    }

.title-line {
    position: relative;
    padding-bottom: 32px
}

    .title-line:after {
        content: "";
        position: absolute;
        bottom: 16px;
        left: 0;
        width: 100px;
        height: 3px;
        background: #ffd400
    }

.register-step-slider .step-desc, .banner-step-slider .step-desc {
    color: #545454;
    font-family: Thongterm-Roman;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px;
    text-align: center;
    margin-top: 16px;
    max-width: 240px;
    margin: auto
}

@media screen and (min-width: 320px) {
    .owl-theme.register-step-slider .owl-nav button.owl-prev, .owl-theme.register-step-slider .owl-nav button.owl-next, .owl-theme.banner-step-slider .owl-nav button.owl-prev, .owl-theme.banner-step-slider .owl-nav button.owl-next {
        height: 32px;
        width: 32px;
        background-color: #ffd400 !important;
        border-radius: 50% !important;
        opacity: 1 !important;
        top: 35%;
        box-shadow: 1px 2px 4px 0 rgba(35,19,18,.2);
        background-image: none
    }

    .owl-theme.register-step-slider .owl-nav button.disabled, .owl-theme.banner-step-slider .owl-nav button.disabled {
        background-color: #f0efee !important;
        opacity: 1 !important
    }

    .owl-theme.register-step-slider .owl-nav button span, .owl-theme.banner-step-slider .owl-nav button span {
        position: relative;
        font-size: 40px !important;
        top: -2px;
        color: #8f8f8f;
        right: -1px
    }

    .owl-theme.register-step-slider .owl-dots, .owl-theme.banner-step-slider .owl-dots {
        margin-top: 24px
    }

        .owl-theme.register-step-slider .owl-dots .owl-dot span, .owl-theme.banner-step-slider .owl-dots .owl-dot span {
            height: 13px;
            width: 13px;
            border: 2px solid #8f8f8f
        }

        .owl-theme.register-step-slider .owl-dots .owl-dot:hover span, .owl-theme.banner-step-slider .owl-dots .owl-dot:hover span {
            border: 2px solid #ffd400
        }

    .owl-theme.register-step-slider .owl-nav button.owl-prev, .owl-theme.banner-step-slider .owl-nav button.owl-prev {
        position: absolute;
        left: 0
    }

    .owl-theme.register-step-slider .owl-nav button.owl-next, .owl-theme.banner-step-slider .owl-nav button.owl-next {
        position: absolute;
        right: 0
    }

    .owl-theme.register-step-slider .owl-nav .disabled, .owl-theme.banner-step-slider .owl-nav .disabled {
        display: block
    }

    .owl-theme.register-step-slider .owl-nav, .owl-theme.banner-step-slider .owl-nav {
        display: block
    }
}

@media screen and (max-width: 1199px) {
    .register-category .step-desc-block {
        padding: 30px 0
    }

    .owl-theme.register-step-slider .owl-nav button.owl-prev {
        left: 15px
    }

    .owl-theme.register-step-slider .owl-nav button.owl-next {
        right: 15px
    }

    .kma .kmanav.fixed-top {
        top: 56px
    }

    .ks-top-nav.active {
        z-index: 1002
    }
}

@media screen and (max-width: 767px) {
    .title-line {
        position: relative;
        padding-bottom: 20px
    }

        .title-line:after {
            content: "";
            position: absolute;
            bottom: 9px;
            left: 0;
            width: 100px;
            height: 3px;
            background: #ffd400
        }

    .register-category .step-desc-block {
        padding: 16px 0 0
    }

    #register-category .step-register-block {
        padding-bottom: 30px
    }

        #register-category .step-register-block:first-child {
            padding-top: 0
        }

    .step-register-block + .step-register-block {
        padding-top: 30px !important
    }

    .step-cate-seemore {
        display: block;
        text-align: center;
        margin-top: 8px
    }

    .register-step-slider {
        margin-top: 24px;
        margin-bottom: 0
    }

    .owl-theme.register-step-slider .owl-nav button.owl-prev {
        left: 0
    }

    .owl-theme.register-step-slider .owl-nav button.owl-next {
        right: 0
    }

    .step-cate-seemore.mobile {
        display: none
    }

    .step-cate-seemore[aria-expanded="true"]:after {
        display: none
    }

    .step-cate-seemore.mobile[aria-expanded="true"], .step-cate-seemore.mobile[aria-expanded="true"]:after {
        display: block
    }

    .step-cate-seemore:after {
        position: absolute;
        top: auto;
        bottom: -25px;
        left: 50%;
        margin-left: -3px
    }
}

.KMA-LeftMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 2px solid #fff;
    font-size: 14px
}

.KMA-LeftMenu-Block {
    background-color: #f3f3f3
}

    .KMA-LeftMenu-Block h3 {
        padding: 16px
    }

.KMA-LeftMenu li.list-group-item {
    font-family: "Krungsri-Condensed-Bold";
    color: #222;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    padding: 16px;
    border: 0;
    background-color: #f3f3f3
}

    .KMA-LeftMenu li.list-group-item.active {
        background: #fdd800;
        background-position: 20px 10px;
        border: 0
    }

    .KMA-LeftMenu li.list-group-item a {
        color: #222;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 24px
    }

.kma-content-block-detail .kma-content-desc {
    color: #5a5a5a;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

    .kma-content-block-detail .kma-content-desc ul {
        padding-left: 20px
    }

        .kma-content-block-detail .kma-content-desc ul.list-unstyled {
            padding-left: 0
        }

.kma-content-block {
    padding-top: 40px;
    padding-bottom: 40px
}

.kma-content-block-detail .kma-content-desc .note {
    padding-left: 15px;
    position: relative
}

    .kma-content-block-detail .kma-content-desc .note:before {
        content: "*";
        position: absolute;
        left: 0
    }

.kma-content-block .image {
    max-width: 400px
}

.banner-cate-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    padding-bottom: 24px
}

.banner-step-slider {
    padding: 0 80px
}

    .banner-step-slider .step-desc {
        max-width: 200px
    }

.step-register-block {
    padding-top: 24px;
    padding-bottom: 24px
}

    .step-register-block + .step-register-block {
        padding-top: 46px
    }

.kma-content .faq-category .faq-item .question {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px
}

@media screen and (max-width: 1199px) {
    .KMA-LeftMenu-Block {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .kma-content-block {
        display: block
    }

        .kma-content-block .image {
            max-width: none;
            width: 100%;
            text-align: center
        }

            .kma-content-block .image img {
                max-width: 400px;
                margin: auto
            }

        .kma-content-block .detail {
            max-width: none;
            width: 100%
        }
}

.faq-cat-title {
    padding: 8px 0;
    margin-bottom: 8px
}

.faq-category .faq-item .question {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
    cursor: pointer;
    padding-right: 30px
}

    .faq-category .faq-item .question:after {
        content: "";
        font-family: 'Font Awesome 5 Pro';
        font-weight: 400;
        right: 20px;
        top: 1px;
        position: absolute
    }

.faq-category .faq-item[aria-expanded="true"] .question:after {
    content: ""
}

.faq-category .faq-item {
    border-left: 3px solid transparent
}

.faq-category .faq-category-list {
    border-left: 3px solid transparent
}

.faq-category .faq-item-block {
    border-top: 1px solid #e8e8e8
}

    .faq-category .faq-item-block:first-child {
        border-bottom: 0
    }

    .faq-category .faq-item-block:last-child {
        border-bottom: 1px solid #e8e8e8
    }

.faq-category .faq-item[aria-expanded="true"], .faq-category .faq-item[aria-expanded="true"] + .faq-category-list {
    border-left: 3px solid #ffd400
}

.faq-category .faq-item .faq-category-list {
    padding-top: 0;
    padding: 15px
}

.faq-category .faq-category-list .answer {
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

@media screen and (max-width: 767px) {
    .faq-category .faq-item .question {
        font-size: 18px;
        line-height: 30px;
        padding-right: 45px
    }

        .faq-category .faq-item .question:after {
            right: 15px
        }
}

.recomend-product-list .item .content .header {
    height: 60px
}

.kma .container--content .recomend-product-list .item .content {
    height: auto
}

.list-viewmore-block {
    margin-top: 40px
}

a.list-viewmore {
    color: #f76f00;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px
}

.container--cover.container--banner #recommend-banner-slide .banner-bg {
    height: 360px;
    max-height: none;
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat
}

.container--cover.container--banner.banner-height-360px {
    max-height: 360px
}

.container--cover.container--banner #recommend-banner-slide .banner-bg .banner-title {
    color: #222;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 64px;
    text-shadow: 1px 2px 0 rgba(0,0,0,.2);
    padding-top: 56px
}

@media screen and (max-width: 767px) {
    .container--cover.container--banner #recommend-banner-slide .banner-bg .container {
        display: table;
        height: 100%
    }

    .container--cover.container--banner #recommend-banner-slide .banner-bg .banner-title-block {
        vertical-align: bottom;
        display: table-cell
    }

    .container--cover.container--banner #recommend-banner-slide .banner-bg .banner-title {
        color: #fff;
        font-size: 24px;
        letter-spacing: 0;
        line-height: 42px;
        text-align: center;
        padding-bottom: 24px
    }

    .recommend-kma .kma-content-block {
        padding-top: 20px;
        padding-bottom: 20px
    }

        .recommend-kma .kma-content-block .image {
            margin-bottom: 16px
        }
}

.kma-content-block-detail .kma-content-desc h3 {
    padding-bottom: 8px
}

.recommend-detail.kma-content-block-detail ul {
    line-height: 29px
}

.kma-content-block-detail .kma-content-desc h4 {
    color: #5a5a5a;
    font-family: Thongterm-Bold;
    letter-spacing: 0;
    font-size: 20px;
    line-height: 36px
}

.recommend-detail.kma-content-block-detail .faq-category .faq-item, .recommend-detail.kma-content-block-detail .faq-category .faq-category-list, .recommend-detail.kma-content-block-detail .faq-category .faq-item .faq-category-list, .recommend-detail.kma-content-block-detail .faq-category .faq-item[aria-expanded="true"], .recommend-detail.kma-content-block-detail .faq-category .faq-item[aria-expanded="true"] + .faq-category-list {
    border-left: 0
}

.faq-category-list {
    width: 100%
}

.recommend-detail.kma-content-block-detail .faq-category .faq-item-block {
    border-bottom: 0
}

.recommend-detail.kma-content-block-detail .faq-category .faq-item {
    border-bottom: 1px solid #e8e8e8
}

.recommend-detail.kma-content-block-detail .faq-category .faq-category-list .answer {
    line-height: 26px
}

.recommend-detail .nav.nav-tabs .nav-item .nav-link {
    color: #949494
}

.recommend-detail .nav.nav-tabs .nav-item {
    color: #222;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

    .recommend-detail .nav.nav-tabs .nav-item .nav-link {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 4px solid #f0efee
    }

.recommend-detail .nav-tabs {
    border-bottom: 0
}

.recommend-detail .nav.nav-tabs .nav-item .nav-link.active {
    border-bottom: 4px solid #ffd400;
    color: #222
}

.recommend-detail .tab-content {
    padding: 32px 0 40px
}

.recommend-detail .step-item-detail {
    border: 3px solid #ffd400;
    border-radius: 4px;
    padding: 24px;
    height: 416px;
    width: 270px
}

    .recommend-detail .step-item-detail .step-item-detail-header {
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 20px;
        letter-spacing: 0;
        line-height: 30px;
        margin-bottom: 0
    }

.line-yellow {
    height: 3px;
    width: 100%;
    border-radius: 4px;
    background-color: #ffd400;
    margin: 24px 0 20px
}

.check-true {
    color: #319d19;
    font-size: 26px;
    position: relative;
    top: 3px;
    padding-right: 5px
}

.recommend-detail .step-item-detail .step-item-detail-desc {
    padding: 12px 0 0
}

    .recommend-detail .step-item-detail .step-item-detail-desc ul li {
        display: table-row
    }

        .recommend-detail .step-item-detail .step-item-detail-desc ul li > * {
            display: table-cell
        }

.recommend-detail .banner-step-slider .step-desc {
    max-width: 240px
}

.btn-yellow {
    border-radius: 3px;
    background-color: #ffd400;
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 27px;
    text-align: center;
    padding: 9px 35px
}

#related-content-slider .owl-stage {
    right: -15px;
    left: 0
}

#related-content-slider .box-product {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 27px
}

    #related-content-slider .box-product .product-title {
        padding: 16px
    }

    #related-content-slider .box-product .product-title {
        height: 120px
    }

.recomend-product-pager {
    margin-bottom: 80px
}

@media screen and (min-width: 320px) {
    .recommend-detail .owl-theme.register-step-slider .owl-nav button span, .recommend-detail .owl-theme.banner-step-slider .owl-nav button span {
        top: -3px
    }
}

@media screen and (max-width: 1200px) {
    .kma .kma-menu .menuitem {
        padding: 0 25px
    }
}

@media screen and (max-width: 991px) {
    .kma .kma-menu .menuitem {
        padding: 0 15px
    }

    .recomend-product-list .item .content h3 {
        font-size: 18px;
        line-height: 28px
    }

    .recomend-product-list .item .content .header {
        height: auto
    }
}

@media screen and (max-width: 860px) {
    .kma .kma-menu .menuitem {
        padding: 0 10px
    }
}

@media screen and (max-width: 767px) {
    .kma .container--cover.container--banner.banner-height-360px {
        height: 360px
    }

        .kma .container--cover.container--banner.banner-height-360px .image {
            position: absolute
        }

            .kma .container--cover.container--banner.banner-height-360px .image.knowledge-detail-kma {
                position: relative
            }

    .step-item-detail {
        margin: auto
    }

    .banner-step-slider {
        padding: 0 40px
    }

    .recommend-detail .step-item-detail {
        padding: 15px;
        width: 245px
    }

    .recommend-detail.kma-content-block-detail .nav.nav-tabs .nav-item .nav-link {
        padding-right: 0;
        padding-left: 0
    }

    .kma-content-block-detail .kma-content-desc h4 {
        font-size: 18px;
        line-height: 38px
    }

    .kma-content .faq-category .faq-item .question {
        font-size: 18px;
        line-height: normal
    }

        .kma-content .faq-category .faq-item .question:after {
            top: 5px
        }

    #related-content-slider .box-product .product-title {
        padding: 8px
    }

    #related-content-slider .box-product .product-title {
        height: 100px
    }

    .recomend-product-list .item .content h3 {
        height: 56px;
        overflow: hidden
    }

    .kma .container--content .recomend-product-list .item {
        display: flex;
        margin-bottom: 16px;
        height: 110px
    }

    .recomend-product-list .item .image {
        max-width: 110px
    }

    .recomend-product-list .item .content {
        width: auto;
        max-width: none;
        padding: 8px 8px 4px
    }

    .recomend-product-list .item .image {
        min-width: 110px
    }

        .recomend-product-list .item .image img {
            height: 110px;
            width: auto
        }

    .recomend-product-list .list-viewmore-block {
        margin-top: 12px
    }

    .recomend-product-pager {
        margin-bottom: 40px
    }
}

.knowledge-block-detail {
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    padding: 40px;
    margin-top: -90px
}

.border-section {
    height: 2px;
    width: 100%;
    background: #f3f3f3
}

.back-in-detail {
    color: #5a5a5a;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px;
    margin-top: 35px;
    display: inline-block
}

@media screen and (max-width: 767px) {
    .knowledge-block-detail {
        background-color: #fff;
        box-shadow: none;
        padding: 0;
        margin-top: 0
    }

    .knowledge-list .item .image img {
        height: 110px;
        width: auto
    }

    .img-oversize {
        margin: 0 -15px;
        width: calc(100% + 30px);
        max-width: none
    }

    .back-in-detail {
        margin-bottom: 35px
    }
}

.ygc .nav.nav-tabs .product-home .nav-item {
    padding: 0;
    text-align: left;
    border: none
}

.ygc .nav.nav-tabs .product-home .nav-item {
    font-family: Thongterm-Roman;
    font-size: 16px;
    line-height: 30px;
    color: #5a5a5a
}

.ygc .nav.nav-tabs {
    border-bottom: 1px solid transparent
}

.ygc .tab-detail {
    height: 0;
    transition: all .2s;
    overflow: hidden
}

    .ygc .tab-detail.open {
        height: 100%
    }

.ygc .tab-mobile {
    display: none
}

@media screen and (max-width: 767px) {
    .ygc .tab-mobile .content {
        width: 100% !important;
        padding-right: 16px;
        padding-left: 16px
    }
}

@media(max-width: 575px) {
    .ygc .tab-mobile {
        display: block;
        width: 100%;
        padding-right: 0;
        padding-left: 0
    }

        .ygc .tab-mobile .nav-link {
            padding: 0
        }

        .ygc .tab-mobile .item:hover, .ygc tab-mobile .item.active {
            background-color: #ffd400
        }

    .ygc .tab-desktop {
        display: none
    }
}

.ygc .nav-tabs .blog-product-home {
    webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

    .ygc .nav-tabs .blog-product-home:hover {
        transform: translateY(-5px)
    }

.ygc .nav-tabs .product-home.card-info.item:hover, .ygc .nav-tabs .product-home.card-info.item.active {
    background-color: #ffd400;
    position: relative;
    bottom: 15px
}

.ygc .nav-tabs .product-home.card-info.item:after {
    height: auto
}

.ygc .nav-tabs .product-home.card-info.item .nav-item.active {
    background-color: #ffd400
}

a.list-detailmore {
    color: #f76f00;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px
}

.ygc .product-list .item {
    padding-top: 39px;
    padding-left: 16px;
    padding-right: 16px;
    height: 358px;
    border-top: 8px solid #ffd400
}

.ygc .product-list .height-box {
    height: 153px
}

    .ygc .product-list .height-box .product-title {
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 16px;
        letter-spacing: 0;
        line-height: 29px
    }

.ygc .product-list .content {
    padding: 5px 16px 16px
}

.ygc .block-banner-content {
    margin-bottom: 30px
}

    .ygc .block-banner-content .cover-content-wrapper {
        max-width: 1170px;
        width: 100%;
        margin: 0 auto;
        position: relative;
        display: flex
    }

        .ygc .block-banner-content .cover-content-wrapper .image {
            max-height: 360px;
            width: 100%;
            height: 360px;
            overflow: hidden;
            position: relative
        }

        .ygc .block-banner-content .cover-content-wrapper .banner-content {
            width: 100%;
            border: 0;
            position: absolute;
            bottom: 0;
            top: 0;
            left: 0;
            z-index: 10;
            padding-bottom: 0;
            padding-top: 56px;
            padding-left: 0;
            padding-right: 54px
        }

            .ygc .block-banner-content .cover-content-wrapper .banner-content .h1 {
                color: #222;
                font-family: "Krungsri-Condensed-Bold";
                font-size: 40px;
                letter-spacing: 0;
                line-height: 64px
            }

        .ygc .block-banner-content .cover-content-wrapper .description {
            font-family: "Thongterm-Bold";
            font-size: 24px;
            line-height: 50px;
            color: #5a5a5a
        }

        .ygc .block-banner-content .cover-content-wrapper .btn {
            width: 170px;
            height: 44px
        }

.ygc .content-box {
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
}

.ygc .content-title {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px
}

.ygc .content-detail-title {
    font-family: Thongterm-Bold;
    font-size: 16px;
    line-height: 34px;
    color: #5a5a5a
}

.ygc .faq-category .faq-item .question {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    position: relative;
    cursor: pointer;
    padding-right: 30px
}

.ygc .acc-category .acc-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    position: relative;
    cursor: pointer;
    padding-right: 30px
}

.ygc .acc-category .acc-item .acc-title:after {
    content: "";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    right: 20px;
    top: 1px;
    position: absolute
}

.ygc .acc-category .acc-item[aria-expanded="true"] .acc-title:after {
    content: ""
}

.ygc .acc-category .acc-item-block:first-child {
    border-bottom: 0
}

.ygc .acc-category .acc-item-block:last-child {
    border-bottom: 1px solid #e8e8e8
}

.ygc .acc-category .acc-item-block {
    border-top: 1px solid #e8e8e8
}

.ygc .acc-category .acc-item {
    border-left: 3px solid transparent
}

    .ygc .acc-category .acc-item[aria-expanded="true"], .acc-category .acc-item[aria-expanded="true"] + .acc-category-list {
        border-left: 3px solid #ffd400
    }

.ygc .acc-category-list {
    width: 100%
}

.ygc .acc-category .acc-category-list {
    border-left: 3px solid transparent
}

.ygc .accordion .card .card-header.arrow.collapsed:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 1.5rem;
    content: "";
    float: right;
    position: absolute;
    top: 18px;
    right: 20px;
    color: #222;
    z-index: 0
}

.ygc .accordion .card .card-header.arrow:not(.collapsed):after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 1.5rem;
    content: "";
    float: right;
    position: absolute;
    top: 18px;
    right: 20px;
    color: #222;
    z-index: 0
}

.ygc .studentcard_banner {
    background: url('/getmedia/3accbee2-50d3-407e-bb4d-5f979828595a/studentcard_banner.png.aspx');
    background-size: cover;
    height: 317px
}

.ygc .banner-second-card .cover-content-wrapper .banner-content .detail {
    float: right;
    text-align: right
}

.ygc .logo-partner-text {
    color: #222;
    font-size: 24px;
    font-family: Thongterm-Bold;
    letter-spacing: 0;
    line-height: 50px;
    padding-top: 36px;
    padding-bottom: 36px
}

.ygc .video-detail-news iframe {
    width: 100%;
    height: 501px
}

.ygc .faq-student-credit {
    height: 662px;
    overflow: hidden
}

    .ygc .faq-student-credit.more {
        height: auto
    }

.ygc .btn-white {
    border: solid 1px #e8e8e8;
    background-color: #fff;
    padding: 8px 0;
    border-radius: 4px;
    font-family: Krungsri-Condensed-Bold;
    font-size: 16px;
    color: #554242;
    line-height: 27px;
    width: 170px;
    height: 44px;
    display: block;
    margin: auto;
    margin-top: 24px
}

.ygc .container--banner.banner-height-360px .block-banner .cover-content-wrapper .banner-promotion {
    text-shadow: none;
    top: 0;
    padding-top: 31px;
    margin-bottom: 0;
    padding-bottom: 0
}

.ygc .banner-promotion .h3 {
    color: #222;
    font-size: 24px;
    font-family: Thongterm-Bold;
    line-height: 50px;
    margin-top: 8px
}

.ygc .banner-promotion .h1 {
    position: relative;
    top: 20px
}

.ygc .icon .img-icon-banner {
    width: 125px !important;
    height: 100%
}

.ygc .banner-promotion .detail-banner-promotion {
    color: #5a5a5a;
    font-size: 24px;
    font-family: Thongterm-Bold;
    line-height: 50px
}

.ygc .ygc-promotion-list .item .content {
    height: 158px
}

.ygc .tag-cl .title-tg {
    display: inline-block;
    font-size: 16px;
    font-family: Thongterm-Bold;
    line-height: 34px;
    color: #5a5a5a;
    margin-right: 16px
}

.ygc .tag-cl .ctn-tag {
    display: inline;
    border: solid 1px #e8e8e8;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 14px;
    line-height: 30px;
    color: #545454;
    padding: 4px 8px
}

    .ygc .tag-cl .ctn-tag:hover {
        cursor: pointer;
        background-color: #ffd400
    }

.ygc .pmt-title-detail {
    font-size: 20px;
    font-family: "Thongterm-Bold";
    line-height: 42px;
    color: #5a5a5a
}

.ygc .container--content .news-list .item .content {
    height: 187px
}

    .ygc .container--content .news-list .item .content .box {
        height: 107px
    }

    .ygc .container--content .news-list .item .content .date-news-list {
        font-family: Thongterm-Bold;
        font-size: 16px;
        line-height: 30px;
        margin-top: 16px
    }

.ygc .news-list .list-viewmore-block {
    margin-top: 24px
}

.ygc .bg-yellow-news {
    background-color: #ffd400
}

.ygc .container--cover.container--banner.bannertop-news {
    max-height: 360px;
    width: 1170px
}

.ygc .container--banner .bannertop-news .cover-content-wrapper {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    background-color: #ffd400;
    padding-right: 0;
    padding-top: 55px
}

.ygc .container--banner.banner-text .bannertop-news .cover-content-wrapper .h1 {
    color: #222;
    font-family: Krungsri-Condensed-Bold;
    font-size: 40px;
    line-height: 60px;
    text-shadow: 1px 2px 0 rgba(0,0,0,.2);
    margin-bottom: 16px
}

.ygc .container--banner .bannertop-news .banner-content .btn {
    color: #554242 !important;
    font-family: Krungsri-Condensed-Bold;
    font-size: 16px;
    line-height: 27px;
    text-shadow: none;
    height: 44px !important;
    padding: 7px !important;
    width: 180px;
    margin-top: 32px
}

.ygc .knowledge-block-detail {
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    padding: 52px 40px 40px 40px;
    margin-top: -90px;
    margin-bottom: 40px
}

    .ygc .knowledge-block-detail h1 {
        margin-top: 18px
    }

.ygc .img-box .length-box {
    height: 215px;
    overflow: hidden
}

.ygc .knowledge-block-detail .title-news-detail {
    font-family: Krungsri-Condensed-Bold;
    font-size: 20px;
    line-height: 30px;
    color: #545454
}

.ygc #gallery-1 {
    width: 600px;
    margin: auto
}

.ygc .rsOverflow {
    overflow: hidden;
    float: left
}

.ygc .rsSlide {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    display: block;
    height: 100%;
    width: 100%
}

.ygc .rsContainer, .rsOverflow {
    position: relative;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    width: 100%
}

.ygc .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsThumbs, .rsDefault .rsVideoFrameHolder {
    background: #151515
}

.ygc .royalSlider {
    width: 600px;
    height: 400px;
    position: relative;
    direction: ltr
}

.ygc .rsThumbs {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    float: left;
    z-index: 22
}

.ygc .rsDefault .rsThumbsHor {
    padding-bottom: 4px;
    width: 100%;
    height: 72px
}

.ygc .rsDefault .rsThumb {
    float: left;
    overflow: hidden;
    width: 96px;
    height: 72px
}

.ygc .rsDefault .rsFullscreenIcn {
    display: block;
    margin: 6px;
    width: 32px;
    height: 32px;
    background: url(/Krungsri2020/media/Payroll_image/activity/activity-campaign/rs-default.png);
    background-color: rgba(0,0,0,.75);
    border-radius: 2px
}

.ygc .rsDefault .rsFullscreenBtn {
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    z-index: 22;
    display: block;
    position: absolute;
    cursor: pointer
}

.ygc .rsDefault.rsHor .rsArrowLeft, .rsDefault.rsVer .rsArrowLeft {
    top: 0;
    left: 0
}

.ygc .rsDefault.rsHor .rsArrowRight {
    right: 0;
    top: 0
}

.ygc .rsDefault .rsArrow {
    height: 100%;
    width: 44px;
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 21
}

.ygc .rsHidden {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s linear .3s,opacity .3s linear
}

.ygc .rsDefault.rsHor .rsArrowLeft .rsArrowIcn {
    background-position: -64px -32px
}

.ygc .rsDefault.rsHor .rsArrowRight .rsArrowIcn {
    background-position: -64px -64px
}

.ygc .rsDefault .rsArrowIcn {
    width: 32px;
    height: 32px;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    position: absolute;
    cursor: pointer;
    background: url(/Krungsri2020/media/Payroll_image/activity/activity-campaign/rs-default.png);
    background-color: rgba(0,0,0,.75);
    border-radius: 2px
}

.ygc .rsDefault .rsThumbsArrow {
    height: 100%;
    width: 20px;
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 21;
    background: #000;
    background: rgba(0,0,0,.75)
}

.ygc .rsDefault .rsThumbsArrowIcn {
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
    cursor: pointer;
    background: url(/Krungsri2020/media/Payroll_image/activity/activity-campaign/rs-default.png)
}

.ygc .rsDefault.rsWithThumbsHor .rsThumbsArrowLeft .rsThumbsArrowIcn {
    background-position: -128px -32px
}

.rsDefault.rsWithThumbsHor .rsThumbsArrowRight .rsThumbsArrowIcn {
    background-position: -128px -48px
}

.rsDefault.rsWithThumbsHor .rsThumbsArrowRight {
    right: 0;
    top: 0
}

.ygc .rsDefault.rsWithThumbsHor .rsThumbsArrowLeft {
    left: 0;
    top: 0
}

.rsDefault .rsThumbsArrowDisabled {
    display: none !important
}

.ygc .rsDefault .rsThumb.rsNavSelected img {
    opacity: .3;
    filter: alpha(opacity=30)
}

.ygc div#gallery-modal {
    background-color: rgb(000/42%)
}

    .ygc div#gallery-modal .modal-dialog {
        max-width: none;
        width: auto
    }

        .ygc div#gallery-modal .modal-dialog .modal-content {
            background-color: transparent;
            border: 0
        }

            .ygc div#gallery-modal .modal-dialog .modal-content .modal-header {
                border-bottom: 0
            }

                .ygc div#gallery-modal .modal-dialog .modal-content .modal-header button {
                    text-shadow: none;
                    color: #fff;
                    opacity: unset
                }

                    .ygc div#gallery-modal .modal-dialog .modal-content .modal-header button:focus {
                        outline: none
                    }

.ygc .img-box-zone .img-box {
    cursor: pointer
}

    .ygc .img-box-zone .img-box:nth-child(3n+1) {
        padding-left: 0;
        padding-right: 10px
    }

    .ygc .img-box-zone .img-box:nth-child(3n+2) {
        padding-left: 5px;
        padding-right: 5px
    }

    .ygc .img-box-zone .img-box:nth-child(3n+3) {
        padding-left: 10px;
        padding-right: 0
    }

.ygc .detail-menunav {
    background-color: rgba(255,255,255,.7)
}

    .ygc .detail-menunav .kma-menu {
        background-color: rgba(255,255,255,.7)
    }

.ygc .bg-light-gray {
    background-color: rgba(255,255,255,.7)
}

    .ygc .bg-light-gray .container--content {
        margin-bottom: 80px
    }

.ygc .ygc-menu-newsdetail {
    box-shadow: none
}

.ygc .ygc-knowledge-list .item .content {
    height: 158px
}

@media screen and (max-width: 767px) {
    .ygc .text-ellipsis-1line {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .ygc .Text-link {
        line-height: 30px
    }

    .ygc .banner-secondary-ygc .block-banner .ks-gradient {
        opacity: 0 !important
    }

    .ygc .banner-secondary-ygc .block-banner .banner-content {
        background-color: #ffd400;
        height: 181px;
        bottom: 0 !important
    }

    .ygc .banner-secondary-ygc .owl-item .item .block-banner .image {
        height: 160px
    }

        .ygc .banner-secondary-ygc .owl-item .item .block-banner .image img {
            height: 160px !important;
            max-height: 160px !important
        }

    .ygc .container--content .content {
        width: 61.666667%
    }

    .ygc .product-list .item {
        height: auto;
        display: inline-block;
        margin-bottom: 0;
        padding-top: 28px;
        padding-bottom: 16px
    }

    .ygc .product-list .height-box {
        height: auto
    }

    .ygc .product-list .content {
        padding: 0;
        width: auto;
        float: left
    }

    .ygc .bullet-zone {
        display: none
    }

    .studentcard-block {
        padding-right: 16px;
        padding-left: 16px
    }

    .ygc .item.studentcard {
        background-color: #fff !important;
        min-height: 398px;
        padding-bottom: 16px
    }

    .ygc .studentcard .btn {
        width: 270px !important
    }

    .ygc .logo-partner .owl-theme .owl-nav.disabled + .owl-dots {
        margin-top: 0 !important
    }

    .ygc .studentcard_banner {
        background: url('/getmedia/3accbee2-50d3-407e-bb4d-5f979828595a/studentcard_banner.png.aspx');
        background-size: cover;
        height: 470px
    }

    .ygc .studentcard-block .image {
        max-width: 200px;
        margin: auto;
        float: unset
    }

    .ygc .studentcard-block .studentcard .content {
        width: 100%;
        height: auto;
        padding: 0;
        float: unset;
        margin-top: 27px
    }

    .ygc .privilege-item:nth-child(3n) {
        padding-left: 16px;
        padding-right: 16px
    }

    .ygc .privilege-item:nth-child(3n+1) {
        padding-right: 16px;
        padding-left: 16px
    }

    .ygc .privilege-item:nth-child(3n+2) {
        padding-left: 16px;
        padding-right: 16px
    }

    .ygc .container--content .privilege-item .content {
        background-color: #fff;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
        width: 100%;
        height: 110px !important;
        float: unset
    }

    .ygc .container--content .privilege-item .image {
        width: 110px;
        height: 110px
    }

    .ygc .privilege-item .text {
        height: auto;
        width: 64%;
        float: right;
        position: unset;
        bottom: 0;
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 18px;
        letter-spacing: 0;
        line-height: 28px;
        text-align: unset;
        z-index: 2;
        text-shadow: unset;
        padding: 8px 0;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .ygc .banner-second-card .cover-content-wrapper .banner-content .h1 {
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 26px;
        letter-spacing: 0;
        line-height: 40px;
        float: left;
        margin-bottom: 0
    }

    .ygc .banner-second-card .cover-content-wrapper .description {
        font-family: "Thongterm-Roman";
        font-size: 16px;
        line-height: 34px;
        color: #5a5a5a;
        float: left;
        padding-right: 30px
    }

        .ygc .banner-second-card .cover-content-wrapper .description br {
            display: none
        }

    .ygc .banner-second-card .cover-content-wrapper .btn {
        width: 270px;
        height: 44px
    }

    .ygc .banner-second-card .cover-content-wrapper .banner-content {
        padding-right: 0;
        padding-top: 24px;
        padding-left: 16px;
        padding-right: 16px;
        top: 156px
    }

    .ygc .content-zone .search-branch {
        background-color: #fff;
        margin: 0 -15px
    }

    .ygc .bg-wrapper-studentcard .banner-second-card .cover-content-wrapper {
        height: 381px
    }

    .ygc .banner-second-card .cover-content-wrapper .image img {
        height: 160px
    }

    .ygc .banner-second-card .cover-content-wrapper .banner-content .detail {
        float: none;
        text-align: left
    }

    .ygc .img-center-mobile {
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .ygc .block-banner-content {
        border: transparent
    }

    .ygc .products-interested .image {
        width: 110px
    }

    .ygc .banner-promotion .detail-banner-promotion {
        color: #fff;
        font-size: 18px;
        font-family: Thongterm-Bold;
        line-height: 38px;
        text-shadow: 0 2px 1px 0 rgba(0,0,0,.2)
    }

    .ygc .banner-promotion .h1 {
        text-align: left;
        position: relative;
        top: 0
    }

    .ygc .icon .img-icon-banner {
        width: auto !important;
        height: 58px
    }

    .ygc .container--cover.container--banner.banner-mobile-height-398px {
        max-height: 398px
    }

    .ygc .container--banner.container--banner--hero.banner-mobile-height-398px .cover-content-wrapper {
        height: 398px
    }

    .kma .container--banner.banner-mobile-height-398px .owl-item .item .block-banner .image img {
        height: 398px;
        max-height: 398px;
        min-width: auto
    }

    .ygc .container--banner.banner-height-360px .block-banner .cover-content-wrapper .banner-promotion {
        text-align: center !important
    }

    .ygc .container--banner .owl-item .item .block-banner .image-promotion {
        height: 398px;
        max-height: 398px
    }

    .ygc .container--banner.banner-mobile-height-398px .block-banner .ks-gradient {
        height: 360px
    }

    .ygc #gallery-1 {
        width: 300px
    }

    .ygc .container--cover.container--banner.bannertop-news {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%
    }

    .ygc .container--content .news-list .item .content {
        height: auto
    }

    .ygc .bg-yellow-news {
        background-color: transparent
    }

    .ygc .container--banner .bannertop-news .cover-content-wrapper {
        background-color: transparent
    }

    .ygc .container--banner.banner-text .bannertop-news .image {
        position: absolute
    }

    .ygc .container--banner .bannertop-news .cover-content-wrapper .banner-content {
        z-index: 99;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        top: 27% !important
    }

    .ygc .container--banner.banner-text .bannertop-news .cover-content-wrapper .h1 {
        color: #fff;
        font-size: 24px;
        line-height: 42px
    }

    .ygc .container--banner .bannertop-news .banner-content .btn {
        background-color: #ffd400;
        border: transparent;
        width: 270px;
        margin-top: 16px
    }

    .ygc .container--content .news-list .item .content .box {
        height: auto
    }

    .ygc .img-box-zone .more-img {
        border-radius: 4px
    }

    .ygc .bg-detail-mobile {
        background-color: #f9f9f9
    }

    .ygc .knowledge-block-detail {
        background-color: #f9f9f9;
        box-shadow: none;
        padding: 0;
        margin-top: 0;
        padding-top: 16px
    }

    .ygc .video-detail-news iframe {
        width: 100%;
        height: auto
    }

    .ygc .detail-menunav {
        background-color: transparent
    }

        .ygc .detail-menunav .kma-menu {
            background-color: transparent
        }

    .ygc .bg-light-gray {
        background-color: transparent
    }

        .ygc .bg-light-gray .container--content {
            margin-bottom: 40px
        }

    .ygc .back-in-detail {
        margin-top: 24px;
        margin-bottom: 24px
    }

    .ygc .ygc-list .zone-title:first-child {
        margin-top: 0
    }

    .ygc .ygc-product-list {
        padding-bottom: 22px
    }

        .ygc .ygc-product-list .item {
            margin-bottom: 8px
        }

    .ygc .ygc-knowledge-home-list .item .content .summary {
        -webkit-line-clamp: 1
    }

    .ygc .ygc-knowledge-list .item .content .summary {
        display: none
    }
}

@media(min-width: 768px) and (max-width:991px) {
    .ygc .img-box .length-box {
        height: 157px;
        border-radius: 4px
    }
}

@media(max-width: 1024px) {
    .ygc .nav-secondary-menu .list-group .list-group-item.list-group-item-action.arrow:after {
        display: none
    }
}

@media(min-width: 375px) and (max-width:414px) {
    .ygc .img-box .length-box {
        height: 80px;
        border-radius: 4px
    }
}

@media(min-width: 361px) and (max-width:374px) {
    .ygc .img-box .length-box {
        height: 102px;
        border-radius: 4px
    }
}

@media(max-width: 360px) {
    .ygc .img-box .length-box {
        height: 58px;
        border-radius: 4px
    }
}

@media(max-width: 320px) {
    .ygc .home-studentcard-banner#banner-slide-secondary .h2 {
        font-size: 18px !important
    }

    .ygc .home-studentcard-banner#banner-slide-secondary p.description {
        font-size: 14px !important
    }
}

.kma .kma-menu .menuitem {
    padding: 0 20px
}

.kma .container--cover.container--banner .image img {
    min-width: inherit
}

.be .container--banner.banner-height-480px .block-banner .banner-content .btn {
    background-color: #ffd400 !important
}

.be .secondary--Nav.detail {
    position: inherit
}

.be .be-menu-detail .menuitem {
    padding: 0 20px
}

.be .content-detail {
    letter-spacing: 0;
    line-height: 34px
}

.be .container--banner.banner-height-480px .block-banner .cover-content-wrapper .banner-content .description {
    line-height: 50px
}

.be .banner-with-vdo .block-banner .cover-content-wrapper .banner-content .h1 {
    padding-top: 92px !important
}

.be .modal .modal-content {
    height: 542px;
    width: 970px
}

.be .third-menu {
    height: 41px;
    border-bottom: 4px solid #f0efef
}

    .be .third-menu .third-menu-line:hover, .be .third-menu .third-menu-line.active {
        border-bottom: 4px solid #ffd400;
        margin-top: 3px;
        width: 390px
    }

    .be .third-menu .third-menu-title {
        font-family: Thongterm-Roman;
        font-size: 16px;
        line-height: 34px;
        color: #949494
    }

        .be .third-menu .third-menu-title.active {
            font-family: Thongterm-Bold;
            font-size: 16px;
            line-height: 34px;
            color: #222
        }

.tab-third-menu:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 4px;
    background: #ffd400;
    transition: .3s cubic-bezier(.445,.05,.55,.95)
}

.be .tab-third-menu {
    background: transparent;
    position: relative;
    overflow: hidden
}

    .be .tab-third-menu:hover:after {
        webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

.be .title-third-menu {
    margin-top: 32px;
    margin-bottom: 24px
}

.be .business-Insights-list .content {
    height: 158px;
    max-height: 158px
}

.be .business-insights-detail .avatarimg img {
    width: 52px;
    height: 52px;
    border-radius: 100%
}

.be .business-insights-detail .by {
    margin-left: 22px;
    color: #000;
    line-height: 34px
}

.be .container--cover.container--banner.banner-height-184px {
    max-height: 184px
}

.be .container--banner.container--banner--hero.banner-height-184px .image img {
    height: 184px
}

.be .title-news-detail {
    font-family: Krungsri-Condensed-Bold;
    font-size: 20px;
    color: #5a5a5a;
    line-height: 30px
}

.be .coming-seminar-list .item {
    border-radius: 0;
    margin-bottom: 40px
}

    .be .coming-seminar-list .item .box-content {
        background-color: #ffd400
    }

        .be .coming-seminar-list .item .box-content .detail {
            height: 340px
        }

            .be .coming-seminar-list .item .box-content .detail .detail-up {
                height: 164px;
                padding-top: 17px;
                padding-bottom: 31px;
                padding-left: 16px;
                padding-right: 16px
            }

                .be .coming-seminar-list .item .box-content .detail .detail-up div:first-child {
                    margin-bottom: 6px;
                    line-height: 34px
                }

                .be .coming-seminar-list .item .box-content .detail .detail-up .header h2 {
                    line-height: 42px
                }

            .be .coming-seminar-list .item .box-content .detail .detail-down {
                height: 175px;
                padding-top: 17px;
                padding-bottom: 25px;
                padding-left: 16px;
                padding-right: 16px
            }

                .be .coming-seminar-list .item .box-content .detail .detail-down .date-content-list {
                    line-height: 42px
                }

                .be .coming-seminar-list .item .box-content .detail .detail-down .summary-content-list {
                    margin-bottom: 10px;
                    line-height: 34px
                }

                .be .coming-seminar-list .item .box-content .detail .detail-down .btn {
                    width: 170px;
                    padding: 8px 33px;
                    border-radius: 3px;
                    border: none
                }

            .be .coming-seminar-list .item .box-content .detail hr {
                border: 1px solid #fff;
                margin-left: 16px;
                margin-top: 0;
                margin-bottom: 0
            }

        .be .coming-seminar-list .item .box-content .content .header h2 {
            margin-bottom: 31px
        }

    .be .coming-seminar-list .item .image {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        height: 340px
    }

        .be .coming-seminar-list .item .image img {
            height: 340px
        }

.be .coming-seminar-list .owl-theme .owl-dots .owl-dot.active span {
    border: none
}

.be .coming-seminar-list .owl-theme .owl-dots .owl-dot span {
    border: 1px solid #8f8f8f
}

.be .seminar-list .content {
    padding: 16px;
    height: 224px
}

.be .container--content .seminar-list .item .content .date-content-list {
    font-family: Thongterm-Bold;
    line-height: 30px;
    margin-top: 16px
}

.be .container--content .seminar-list .item .content .summary-content-list {
    margin-top: 8px
}

.be .seminar-list .list-viewmore-block {
    margin-top: 0;
    position: absolute;
    bottom: 10px
}

.be .btn-right-detail {
    width: 215px !important;
    height: 44px
}

.be .se-detail-banner {
    position: absolute;
    z-index: 9;
    left: 22%;
    top: 30%
}

    .be .se-detail-banner .first-text-white {
        line-height: 72px;
        font-size: 58px;
        color: #fff
    }

    .be .se-detail-banner .second-text-yellow {
        line-height: 72px;
        font-size: 58px;
        color: #ffd400
    }

.be .location-detail {
    line-height: 34px
}

.be .ks.card.download:last-child {
    margin-bottom: 0
}

.be .download-title {
    font-family: Krungsri-Condensed-Bold;
    font-size: 24px;
    color: #222;
    line-height: 36px;
    margin-bottom: 24px
}

.be .dowload-list .download-icon.icon-small:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: "";
    font-size: 24px;
    color: #5a5a5a;
    margin: 0 10px
}

.be .dowload-list .content .filename a {
    font-family: Thongterm-Bold;
    line-height: 34px;
    color: #222
}

.be .dowload-list .content .date {
    font-size: 14px
}

.be .dowload-list .filetype a {
    color: #fff
}

@media screen and (max-width: 767px) {
    .be .banner-mobile-height-184px .image {
        position: absolute;
        max-height: 184px;
        width: 100%;
        height: 184px;
        overflow: hidden;
        text-align: center
    }

        .be .banner-mobile-height-184px .image img {
            height: 184px;
            width: auto;
            position: absolute;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%
        }

    .be .secondary--Nav .nav-secondary-menu .list-group .list-group-item.list-group-item-action.arrow:after {
        display: none
    }

    .be .nav-secondary-menu .list-group .list-group-item.list-group-item-action.arrow:after {
        display: none
    }

    .be .container--cover.container--banner.banner-height-360px .image {
        position: relative
    }

    .be #vdomodal .modal-dialog {
        padding-left: 0
    }

    .be .modal .modal-content {
        height: 300px !important
    }

    .be .product-block .item .image, .ygc .seminar-list .item .image {
        max-width: 110px
    }

    .be .container--banner.container--banner--hero.banner-mobile-height-184px .cover-content-wrapper {
        height: 184px
    }

    .be .title-third-menu {
        margin-top: 24px;
        margin-bottom: 16px
    }

    .be .third-menu {
        height: 75px
    }

    .be .business-Insights-list .content {
        height: auto
    }

    .be .business-Insights-list .image {
        width: 110px
    }

    .be .business-Insights-list .list-viewmore-block {
        position: absolute;
        bottom: 0;
        top: 38px
    }

    .be .business-insights-detail .avatarimg img {
        width: 55px;
        height: 55px
    }

    .be .business-insights-detail .by {
        margin-left: 20px;
        color: #222
    }

        .be .business-insights-detail .by .txtby {
            display: none
        }

    .be .title-news-detail {
        font-size: 18px;
        line-height: 28px
    }

    .be .location-detail {
        color: #222
    }

    .be .coming-seminar-list .item {
        margin-bottom: 22px
    }

        .be .coming-seminar-list .item .image {
            max-width: 360px !important;
            max-height: 160px
        }

            .be .coming-seminar-list .item .image img {
                height: 100%
            }

        .be .coming-seminar-list .item .box-content .detail hr {
            margin-left: 0
        }

        .be .coming-seminar-list .item .box-content .detail .detail-down .btn {
            width: 270px;
            margin: auto;
            display: block
        }

    .be .seminar-list .content {
        padding: 8px;
        height: auto
    }

    .be .seminar-list .list-viewmore-block {
        position: absolute;
        bottom: 0;
        top: 74px
    }

    .be .se-detail-banner {
        left: 27%;
        top: 74%
    }

        .be .se-detail-banner .first-text-white {
            line-height: 36px;
            font-size: 24px
        }

        .be .se-detail-banner .second-text-yellow {
            line-height: 36px;
            font-size: 24px
        }
}

@media screen and (max-width: 420px) {
    .be .tab-third-menu:last-child {
        padding-left: 10px
    }
}

@media screen and (max-width: 320px) {
    .be .third-menu {
        height: 108px
    }

        .be .third-menu .third-menu-line:hover, .be .third-menu .third-menu-line.active {
            border-bottom: 4px solid #ffd400;
            margin-top: 36px
        }
}

.secondary--Nav {
    z-index: 1001
}

    .secondary--Nav .secondary-menu .menuitem {
        padding: 0 16px
    }

        .secondary--Nav .secondary-menu .menuitem:first-child {
            padding-left: 0
        }

        .secondary--Nav .secondary-menu .menuitem:last-child {
            padding-right: 0
        }

        .secondary--Nav .secondary-menu .menuitem .inner a {
            font-size: 18px
        }

.bg-gray {
    background-color: #f9f9f9
}

.container--banner.banner-follow-research .block-banner .banner-content {
    text-align: right !important;
    padding-top: 37px
}

.container--banner.banner-follow-research.banner-text .block-banner .cover-content-wrapper .banner-content .description {
    line-height: 45px
}

.container--banner.banner-follow-research.banner-text .block-banner .cover-content-wrapper .banner-content .h1 h1 {
    font-size: 40px;
    line-height: 64px
}

.container--banner.banner-follow-research .block-banner .banner-content .btn {
    margin-top: 24px
}

.research .container--content .home-content-list .card-info .content {
    height: 145px
}

.home-content-list .date-news-list {
    color: #5a5a5a;
    font-size: 16px;
    font-family: Thongterm-Bold;
    letter-spacing: 0;
    line-height: 34px;
    padding-top: 10px
}

.home-content-list .list-title {
    font-family: Thongterm;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px;
    padding-top: 8px;
    height: 34px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ResearchForecast-table table tr td {
    padding: 10px 16px;
    color: #545454;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 29px
}

    .ResearchForecast-table table tr td:not(firs-child), .ResearchForecast-table table tr th:not(firs-child) {
        border-left: 1px solid #e8e8e8
    }

.ResearchTalk .research-block .research-block-wrapper {
    border-radius: 3px;
    position: relative
}

.ResearchTalk .research-block.inner + .inner {
    padding-top: 30px
}

.ResearchTalk .research-text {
    position: absolute;
    bottom: 15px;
    margin-left: 15px
}

.ResearchTalk .research-title {
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,.2)
}

.ResearchTalk .research-date {
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    line-height: 29px;
    color: #fff;
    padding-top: 5px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.2)
}

.ResearchTalk .research-block .research-block-wrapper:after {
    background-color: rgba(34,34,34,.050980392156862744) !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    z-index: 1;
    background-image: none !important;
    opacity: .7 !important
}

.ks-template-1.research .LeftMenu li.list-group-item {
    padding: 0;
    border: none
}

    .ks-template-1.research .LeftMenu li.list-group-item .menu-item {
        display: block;
        padding: 16px;
        line-height: 24px;
        font-family: "Krungsri-Condensed-Bold";
        background-color: #f3f3f3
    }

    .ks-template-1.research .LeftMenu li.list-group-item.active {
        color: #485057;
        background-color: transparent;
        border: none
    }

        .ks-template-1.research .LeftMenu li.list-group-item.active > .menu-item {
            background-color: #ffd400
        }

.ks-template-1.research .LeftMenu .list-group-item.lv1 .leftsubmenu {
    display: none
}

.ks-template-1.research .LeftMenu .list-group-item.lv1.active .leftsubmenu {
    display: block
}

.ks-template-1.research .LeftMenu .list-group-item .leftsubmenu, .ks-template-1.research .LeftMenu .list-group-item .leftsubmenu li.list-group-item {
    background-color: #fff
}

    .ks-template-1.research .LeftMenu .list-group-item .leftsubmenu .menu-item {
        font-family: Thongterm-Roman;
        font-size: 14px;
        border-left: 3px solid transparent;
        background-color: #fff
    }

    .ks-template-1.research .LeftMenu .list-group-item .leftsubmenu li.active .menu-item {
        background-color: #fff;
        border-color: #ffd400;
        font-family: "Krungsri-Condensed-Bold"
    }

    .ks-template-1.research .LeftMenu .list-group-item .leftsubmenu li .menu-item.active {
        background-color: #fff
    }

.ks-template-1.research .LeftMenu li.list-group-item.lv1 > .menu-item:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 20px;
    content: "";
    float: right;
    position: absolute;
    top: 18px;
    right: 20px;
    color: #222;
    opacity: .9;
    z-index: 0
}

.ks-template-1.research .LeftMenu li.list-group-item.lv1.active > .menu-item:after {
    content: ''
}

.ks-template-1.research .LeftMenu li.list-group-item.lv1.no-submenu.active > .menu-item:after, .ks-template-1.research .LeftMenu li.list-group-item.lv1.no-submenu > .menu-item:after {
    content: ''
}

.research-tab-group {
    font-size: 16px;
    font-family: Thongterm-Roman;
    letter-spacing: 0
}

.research-tab-group-block {
    padding: 0 15px
}

.research-tab-group {
    position: relative;
    padding: 8px 0
}

.research-tab-group-item.active h3 {
    font-family: Thongterm-Bold
}

.research-tab-group-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #f0efee;
    transition: .3s cubic-bezier(.445,.05,.55,.95)
}

.research-tab-group-item.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #ffd400;
    transition: .3s cubic-bezier(.445,.05,.55,.95)
}

.research-list-group-block .research-list-image {
    background-color: #725e60;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important
}

    .research-list-group-block .research-list-image img {
        max-height: 150px;
        margin: auto;
        display: block;
        width: auto;
        max-width: 100%
    }

.research .research-list-group-block .container--content .card-info {
    display: flex !important;
    border-radius: 0 !important;
    margin-bottom: 25px
}

.research-list-group-block .card-info .date-news-list {
    color: #5a5a5a;
    font-family: Thongterm-Bold;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 29px
}

.research-list-group-block .content.research-list-content {
    padding-left: 0;
    padding-right: 0
}

.research-list-group-block-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.research .leftmenu-title {
    background-color: #f3f3f3;
    padding: 16px;
    border-bottom: 4px solid #fff
}

@media(max-width: 767px) {
    .research-list-group-block .content.research-list-content {
        width: 100%;
        padding: 16px 0
    }

    .research-list-group-block .research-list-image img {
        max-width: 100%;
        margin: auto;
        display: block;
        height: 115px;
        width: auto
    }

    .research-list-group-block .item {
        margin-bottom: 16px !important
    }

    .research-tab-group-block {
        height: 44px;
        overflow: hidden
    }

        .research-tab-group-block.open {
            height: auto
        }

    .research-tab-group {
        padding: 8px 0 2px
    }

    .research-tab-group-item {
        border: 1px solid #e8e8e8;
        border-radius: 3px;
        background-color: #fff
    }

        .research-tab-group-item:after {
            display: none
        }

        .research-tab-group-item h3 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            padding-right: 40px
        }

            .research-tab-group-item h3 br {
                display: none
            }

    .research-tab-group-item {
        order: 1;
        margin-top: -1px
    }

        .research-tab-group-item.active {
            order: 0;
            margin-top: 0
        }

            .research-tab-group-item.active:before {
                font-family: "Font Awesome 5 Pro";
                font-weight: 300;
                font-size: 20px;
                content: "";
                float: right;
                position: absolute;
                top: 7px;
                right: 15px;
                color: #545454;
                z-index: 0
            }
}

.dowload-list .filetype a {
    color: #fff
}

.download-icon.icon-small:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: "";
    font-size: 24px;
    color: #5a5a5a;
    margin: 0 10px
}

.ks-template-1 .tag-cl .title-tg {
    display: inline-block;
    font-size: 16px;
    font-family: Thongterm-Bold;
    line-height: 34px;
    color: #5a5a5a;
    margin-right: 16px
}

.ks-template-1 .tag-cl .ctn-tag:hover {
    cursor: pointer;
    background-color: #ffd400
}

.ks-template-1 .tag-cl .ctn-tag {
    display: inline;
    border: solid 1px #e8e8e8;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 14px;
    line-height: 30px;
    color: #545454;
    padding: 4px 8px
}

.avatarimg img {
    width: 52px;
    height: 52px
}

.by {
    margin-left: 22px;
    color: #000
}

.banner-detail-360px img {
    height: 360px
}

.reseachtalk-block-detail {
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    padding: 40px;
    margin-top: -90px
}

.researchfollowform {
    margin-bottom: 80px
}

    .researchfollowform .checkbox-inline input[type="checkbox"] + label, .researchfollowform .checkbox-inline input[type="checkbox"] + span {
        padding-left: 30px;
        margin-top: 8px;
        padding-right: 0
    }

        .researchfollowform .checkbox-inline input[type="checkbox"] + label:before, .researchfollowform .checkbox-inline input[type="checkbox"] + span:before {
            padding-right: 0 !important;
            margin-left: -30px !important;
            top: 3px;
            position: relative
        }

    .researchfollowform .checkbox-desc {
        color: #5a5a5a;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 34px
    }

.form-title-desc {
    margin-top: 15px;
    margin-bottom: 0
}

.ui.dropdown .menu > .item {
    margin-bottom: 0
}

@media(max-width: 767px) {
    .researchfollowform {
        margin-bottom: 0
    }

        .researchfollowform .sec-submit {
            text-align: center
        }

        .researchfollowform .form-with-step .step-detail {
            padding: 0 0 40px 0
        }
}

.research-content-detail .research-tab-group-block {
    margin: 25px -15px !important
}

.research-content-detail .ks.card.download .date {
    font-size: 14px
}

@media(max-width: 1199px) {
    .container--banner.banner-follow-research .block-banner .cover-content-wrapper .banner-content {
        padding-left: 15px !important;
        padding-right: 15px
    }

    .secondary--Nav.fixed-top .nav-menu-mobile {
        box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.1)
    }

    .nav-menu-mobile {
        padding-top: 15px;
        padding-bottom: 15px;
        top: 0;
        margin-top: 25px;
        margin-bottom: 25px;
        position: relative
    }
}

@media(max-width: 767px) {
    .research_content_group-list .card-info .image {
        max-width: 110px
    }

    .research .container--content .home-content-list .item {
        display: flex;
        margin-bottom: 16px
    }

    .research .home-content-list .content {
        width: 66%;
        padding: 8px
    }

    .research .container--content .home-content-list .card-info .content {
        height: 110px
    }

    .research .home-content-list .list-title {
        font-size: 14px;
        color: #545454;
        padding-top: 0
    }

    .ks-template-1.research .container--content {
        margin-top: 40px
    }

    .container--banner.banner-follow-research.banner-text .block-banner .cover-content-wrapper .banner-content .h1 {
        margin-bottom: 0 !important
    }

    .container--banner.banner-follow-research.banner-text .block-banner .cover-content-wrapper .banner-content {
        bottom: auto !important;
        top: 120px !important
    }

        .container--banner.banner-follow-research.banner-text .block-banner .cover-content-wrapper .banner-content .h1 h1 {
            font-size: 24px;
            line-height: 42px
        }

        .container--banner.banner-follow-research.banner-text .block-banner .cover-content-wrapper .banner-content .description {
            font-size: 18px;
            line-height: 38px;
            height: 66px
        }

    .container--banner.banner-follow-research .block-banner .banner-content .btn {
        margin-top: 20px
    }

    .home-content-list-with-feature.ResearchTalk .research-block-wrapper {
        margin-bottom: 16px
    }

    .ResearchTalk .research-block.inner + .inner {
        padding-top: 0
    }

    .ResearchTalk .research-title br {
        display: none
    }

    .research_content_group-list .card-info.item .content {
        height: 110px;
        position: relative
    }

    .research_content_group-list .card-info.item .list-viewmore-block {
        margin-top: 0;
        bottom: 5px;
        position: absolute
    }

    .research-content-detail .dowload-list {
        padding-left: 15px
    }

    .research-content-detail .download .filetype {
        right: 0;
        bottom: 30px !important
    }

    .researchfollowform .checkbox-desc {
        line-height: 29px;
        display: block
    }

    .research .container--content .research_content_group-list .item {
        display: flex;
        margin-bottom: 16px
    }

        .research .container--content .research_content_group-list .item .header h3 {
            line-height: 28px
        }
}

@media(max-width: 1199px) {
    .secondary--Nav.fixed-top {
        top: 56px
    }

    .research .secondary--Nav.fixed-top .nav-menu-mobile {
        margin-top: 0
    }
}

.research_content_group-list .card-info.item .list-viewmore-block {
    margin: 0;
    position: absolute;
    bottom: 8px
}

.ResearchForecast-table {
    overflow-x: auto
}

    .ResearchForecast-table table {
        min-width: 960px
    }

.list-group .list-group-item.list-group-item-action.not-show-sub.arrow:after {
    display: none
}

#survay .Lmgff {
    margin-left: 50px
}

table.RadioList input[type="radio"], table.RadioList input[type="checkbox"] {
    vertical-align: top;
    margin: 4px 8px 0 7px
}

@media(min-width: 250px) and (max-width:480px) {
    .LText {
        width: 230px
    }

    #survay .Lmgff {
        margin-left: 0
    }
}

@media(min-width: 481px) and (max-width:767px) {
    .LText {
        width: 400px
    }

    #survay .Lmgff {
        margin-left: 0
    }
}

@media only screen and (min-width: 768px) and (max-width:1024px) {
    .LText {
        width: 100%
    }

    #survay .Lmgff {
        margin-left: 50px
    }
}

@media only screen and (min-width: 1224px) {
    .LText {
        width: 100%
    }

    #survay .Lmgff {
        margin-left: 50px
    }
}

.table-responsive-planyourmoney {
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%
}

.table-responsive {
    margin-bottom: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%
}

.table-responsive-exclu {
    margin-bottom: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%
}

.table-container {
    width: 100%;
    overflow-y: hidden;
    _overflow: auto;
    overflow-x: scroll;
    margin: 0 0 1em
}

    .table-container::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 14px;
        height: 14px
    }

    .table-container::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 3px solid #fff;
        background-color: rgba(0,0,0,.3)
    }

@media only screen and (max-width: 800px) {
    #flip-scroll .cf:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0
    }

    #flip-scroll * html .cf {
        zoom: 1
    }

    #flip-scroll :first-child + html .cf {
        zoom: 1
    }

    #flip-scroll table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0
    }

    #flip-scroll th, #flip-scroll td {
        margin: 0;
        vertical-align: top
    }

    #flip-scroll th {
        text-align: left
    }

    #flip-scroll table {
        display: block;
        position: relative;
        width: 100%
    }

    #flip-scroll thead {
        display: block;
        float: left
    }

    #flip-scroll tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap
    }

    #flip-scroll thead tr {
        display: block
    }

    #flip-scroll th {
        display: block;
        text-align: right
    }

    #flip-scroll tbody tr {
        display: inline-block;
        vertical-align: top
    }

    #flip-scroll td {
        display: block;
        min-height: 1.25em;
        text-align: left
    }

    #flip-scroll th {
        border-bottom: 0;
        border-left: 0
    }

    #flip-scroll td {
        border-left: 0;
        border-right: 0;
        border-bottom: 0
    }

    #flip-scroll tbody tr {
        border-left: 1px solid #babcbf
    }

    #flip-scroll th:last-child, #flip-scroll td:last-child {
        border-bottom: 1px solid #babcbf
    }
}

#smesclink {
    border-top: 1px solid #ccc
}

.BlogPTitleDetail {
    font-size: 26px;
    line-height: 30px
}

.BlogPTitleE {
    font-weight: blod;
    color: red
}

.BlogPBodyE {
    background-color: #f6f6f4;
    border: 1px solid #ededed;
    border-radius: 3px;
    padding: 10px
}

    .BlogPBodyE .teaser {
        float: left;
        margin-right: 20px
    }

.Blogimage {
    float: left
}

.EditingFormCategoryRow td {
    padding-left: 20px
}

.table-container {
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    mangin: 0 0 1em
}

.MediaLibrarySort {
    margin-bottom: -20px;
    text-indent: -9999px;
    color: #ededed;
    font-size: 1px
}

.EditingFormLabel {
    padding-top: 10px;
    margin-top: 10px
}

.calendarwidget {
    margin-top: -27px
}

.Calendar {
    margin-bottom: 10px;
    background: #fff;
    padding: 0 30px 15px;
    border-radius: 20px;
    margin-top: 0
}

    .Calendar .Title {
        height: 40px;
        background: #fff;
        font-weight: 700
    }

        .Calendar .Title .nextMonth {
            margin-right: 10px
        }

        .Calendar .Title .prevMonth {
            margin-left: 10px
        }

    .Calendar .DayHeader {
        background: #fff;
        height: 31px;
        padding-bottom: 10px;
        vertical-align: baseline;
        padding-top: 8px;
        text-align: center;
        color: #ff6602
    }

.EventCalendar td {
    padding: 0
}

.EventCalendar {
    width: 100%;
    max-width: 931px
}

.OtherMonth, .Day, .Weekend, .OtherMonth, .Today {
    height: 30px;
    border-right: 0 dotted none;
    border-left: 0 dotted none;
    padding: 5px 0 !important;
    vertical-align: top;
    font-weight: 700
}

    .OtherMonth .gap, .Day .gap, .Weekend .gap, .OtherMonth .gap, .Today .gap {
        height: 4px
    }

.IE7 .OtherMonth, .IE7 .Day, .IE7 .Weekend, .IE7 .OtherMonth, .IE7 .Today {
    padding: 0 1px
}

.EventManagerRegistration .EventManagerRegText {
    width: 300px
}

.OtherMonth, .Day .Content, .Weekend .Content {
    color: #f1f1f1;
    max-width: 132px
}

.selectedEvent, .dayEvent {
    width: 100%;
    margin-left: -1px;
    margin-top: -1px;
    font-weight: 400
}

    .selectedEvent a, .dayEvent a {
        text-decoration: none;
        padding: 0
    }

.IE7 .selectedEvent a, .IE7 .dayEvent a, .IE8 .selectedEvent a, .IE8 .dayEvent a, .Opera .selectedEvent a, .Opera .dayEvent a {
    padding: 0
}

.selectedEvent a:hover, .dayEvent a:hover, .dayEvent-org a:hover {
    text-decoration: underline;
    color: #ff6700
}

.Safari .selectedEvent, .Safari .dayEvent {
    margin-left: 0;
    margin-top: 0;
    position: relative;
    left: -1px
}

.calendarwidget .dayEvent-org, .calendarwidget.dayEvent-org {
    background: url(/assets/dot40.html) no-repeat center center;
    padding: 2px 20px 4px;
    color: #fff;
    width: 40px;
    height: 40px;
    margin-top: -26px;
    margin-left: -2px;
    z-index: 1000;
    background-size: 24px
}

.dayEvent-org {
    background: url(/assets/dot40.html) no-repeat center center;
    padding: 2px 20px 4px;
    color: #fff;
    width: 40px;
    height: 40px;
    margin-top: -26px;
    margin-left: -2px;
    z-index: 1000;
    background-size: 24px
}

    .dayEvent-org a:hover, a.dayEvent-org:hover, {
        padding: 4px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        color: #fff;
        width: 30px;
        height: 30px;
        margin-top: -26px;
        z-index: 1000
    }

.dayEvent {
    font-size: 11px;
    line-height: 10px
}

.selectedEvent {
    background: #ff6602;
    color: #fff;
    font-size: 11px
}

a.selectedEvent .inner:hover {
    background: #fff;
    color: #ff6602;
    font-size: 11px
}

.selectedEvent a {
    color: #fff
}

.selectedEvent .inner a:hover {
    color: #554242
}

.IE7 .selectedEvent, .IE7 .dayEvent {
    width: 99%;
    margin-left: -1px;
    margin-top: -1px
}

.dottedLine {
    width: 100%;
    height: 1px;
    background: url(/App_Themes/CorporateSite/Images/border_dottedHorizontal.png) repeat-x left top;
    margin: 5px 0
}

.dottedLineBlack {
    width: 100%;
    height: 1px;
    background: url(/App_Themes/CorporateSite/Images/border_dottedHorizontalBlack.png) repeat-x left top
}

.EventManagerRegistration .EventManagerRegLabel {
    color: #737373
}

.EventDetail {
    margin-bottom: 30px
}

.EventManagerRegError {
    color: red;
    display: block
}

.EventManagerRegInfo {
    display: block
}

.EventManagerOutlookLink {
    float: left;
    margin-top: 10px
}

.IE8 .EventManagerOutlookLink, .Opera .EventManagerOutlookLink {
    margin-bottom: 80px
}

.selectedEvent .inner, .dayEvent .inner {
    padding: 2px;
    overflow: hidden;
    max-width: 121px;
    font-siz: 11px;
    line-height: 14px
}

.IE7 .selectedEvent .inner, .IE7 .dayEvent .inner, .IE8 .selectedEvent .inner, .IE8 .dayEvent .inner, .Opera .selectedEvent .inner, .Opera .dayEvent .inner {
    padding: 5px 0
}

.irmediaItem {
    margin-bottom: 10px;
    padding: 10px 20px
}

.listBoxTwoColumns .header, .listBoxWithTeaser .header, .listBoxWithoutTeaser .header {
    color: #554242;
    font-size: 15px
}

.bold {
    font-weight: 700
}

#survay .CaptchaTable {
    border-collapse: collapse;
    margin-top: 5px
}

    #survay .CaptchaTable td {
        padding: 2px !important
    }

#survay .CaptchaTextBox {
    width: 75px !important;
    height: 31px
}

#survay .CaptchaTextBoxSmall {
    width: 15px !important;
    margin-left: 5px;
    margin-right: 5px;
    height: 31px
}

#survay .CaptchaAfterText {
    padding: 10px
}

#p_lt_ctl18_ksP_p_lt_ctl03_wT_ucEditableText_widget1_ctl00_viewBiz_ctl00_SV_code_captchaControl_lblSecurityCode {
    float: left;
    width: 1px
}

.sv-lable-fill {
    float: left;
    width: 240px
}

.sv-lable {
    display: block;
    float: left;
    width: 50px;
    font-weight: 700
}

.boxsurvay {
    border: 3px solid #000
}

.target {
    overflow: hidden;
    width: 100%;
    border: 1px solid #ccc;
    min-height: 200px;
    padding: 5px 5px 30px
}

.control-group {
    margin-bottom: 20px
}

.control-label {
    float: left;
    padding-top: 5px;
    text-align: left;
    width: 160px;
    display: block;
    margin-bottom: 5px
}

#survay .Lmgff {
    margin-left: 50px
}

@media(min-device-width: 320px) and (max-device-width:767px) {
    .control-label {
        float: left;
        padding-top: 5px;
        text-align: center;
        width: 160px;
        display: block;
        margin-bottom: 5px
    }

    #survay .Lmgff {
        margin-left: 0
    }
}

@media(min-device-width: 768px) and (max-device-width:1024px) and (orientation:portrait) {
    .control-label {
        float: left;
        padding-top: 5px;
        text-align: center;
        width: 160px;
        display: block;
        margin-bottom: 5px
    }

    #survay .Lmgff {
        margin-left: 0
    }
}

.controls {
    margin-left: 180px
}

.radio.inline, .checkbox.inline {
    display: inline-block;
    margin-bottom: 0;
    padding-top: 5px;
    vertical-align: middle
}

.EditingFormControlNestedControl td, th {
    padding-right: 6px;
    vertical-align: top
}

.endLine {
    border: 2px solid #fed403;
    margin-bottom: 15px;
    margin-top: 10px
}

.legend {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color -moz-use-text-color #e5e5e5;
    border-image: none;
    border-style: none none solid;
    border-width: 0 0 1px;
    color: #333;
    display: block;
    font-size: 21px;
    line-height: 40px;
    margin-top: 14px;
    margin-bottom: 8px;
    padding: 0;
    width: 100%
}

.radio, .checkbox {
    min-height: 20px;
    padding-left: 20px
}

label {
    display: block;
    margin-bottom: 5px
}

select {
    background-color: #fff;
    border: 1px solid #ccc;
    width: 220px
}

select, input[type="file"] {
    height: 30px;
    line-height: 30px
}

.input-xlarge {
    width: 270px
}

.input-xlarge2 {
    width: 270px;
    margin-top: 20px
}

input.search-query {
    border-radius: 18px;
    margin-bottom: 0;
    padding-left: 14px;
    padding-right: 14px
}

.watermark {
    color: #999
}

input[type=text].watermark {
    color: #999
}

.watermarkexc {
    color: #999
}

.CalendarIcon {
    background: #ece9e9 url(/App_Themes/Krungsri/images/s/Jobs/icon-calendar.gif) no-repeat right;
    width: 36px;
    height: 35px
}

.CalendarTextBox {
    height: 40px;
    background-color: #ece9e9;
    border: 1px solid #dcd5d5
}

.EditingFormTable {
    width: 100%
}

.EditingFormLabelCell {
    text-align: right;
    padding-right: 10px;
    width: 20%
}

input[type="radio"], input[type="checkbox"] {
    line-height: normal;
    margin: 4px 8px 0 7px
}

.Bizformselect {
    background: #ece9e9 url(/CMSPages/down-arrow.png) no-repeat right;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: .01px;
    width: 100%;
    height: 38px;
    margin: 10px 0;
    border: 1px solid #ece9e9
}

.BizformselectW90P {
    background: #ece9e9 url(/CMSPages/down-arrow.png) no-repeat right;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: .01px;
    width: 90%;
    height: 38px;
    margin: 10px 0;
    border: 1px solid #ece9e9
}

input[type=text].BizFormFillnumber {
    background-color: #ece9e9;
    height: 38px;
    border: 1px solid #dcd5d5;
    margin: 10px 0;
    width: 100%
}

    input[type=text].BizFormFillnumber:focus {
        background-color: #fff;
        border: 3px solid #ffda00;
        height: 38px;
        margin: 10px 0;
        width: 100%;
        color: #554242
    }

textarea.BizFormFillarea {
    background-color: #ece9e9;
    border: 1px solid #dcd5d5;
    margin: 10px 0;
    padding-left: 5px;
    padding-top: 10px;
    color: #554242;
    width: 100%
}

    textarea.BizFormFillarea:focus {
        background-color: #fff;
        border: 3px solid #ffda00;
        margin: 10px 0;
        color: #554242;
        width: 100%
    }

input[type=text].BizFormFill {
    background-color: #ece9e9;
    height: 38px;
    border: 1px solid #dcd5d5;
    margin: 10px 0;
    width: 100%
}

input[type=text].BizFormFillW90 {
    background-color: #ece9e9;
    height: 38px;
    border: 1px solid #dcd5d5;
    margin: 10px 0;
    width: 90%
}

input[type=text].BizFormFill-Exc {
    background-color: #ece9e9;
    height: 38px;
    border: 1px solid #dcd5d5;
    margin: 10px 0;
    width: 100%;
    color: #554242
}

input[type=text].BizFormFill-Job {
    background-color: #fff;
    border: 3px solid #ffda00;
    margin: 10px 0;
    height: 44px;
    width: 94%;
    color: #554242
}

.formselect {
    background-color: #ece9e9;
    border: 1px solid #dcd5d5;
    margin: 10px 0;
    padding-left: 5px;
    padding-top: 10px;
    width: 70%
}

input[type=text].BizFormFilljob {
    background-color: #fff;
    border: 3px solid #ffda00;
    margin: 10px 0
}

input[type=text].BizFormFill:focus {
    background-color: #fff;
    border: 3px solid #ffda00;
    height: 38px;
    margin: 10px 0;
    width: 100%;
    color: #554242
}

input[type=text].BizFormFillW90:focus {
    background-color: #fff;
    border: 3px solid #ffda00;
    height: 38px;
    margin: 10px 0;
    width: 90%;
    color: #554242
}

input[type=text].BizFormfocus {
    background-color: #fff;
    border: 3px solid #ffda00;
    height: 38px;
    margin: 10px 0;
    width: 100%;
    color: #554242
}

    input[type=text].BizFormfocus:focus {
        background-color: #ece9e9;
        border: 3px solid #dcd5d5;
        height: 38px;
        margin: 10px 0;
        width: 100%;
        color: #554242
    }

.img-bdlight {
    border: 5px solid #dcd5d5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.setbox {
    height: 55px;
    padding: 12px 10px;
    border-bottom: 1px solid #dcd5d5
}

    .setbox:hover {
        color: #554242;
        background: #ece9e9;
        height: 55px;
        padding: 12px 10px
    }

.setboxEX {
    height: 55px;
    padding: 12px 10px;
    border-bottom: 1px solid #b18d12;
    color: #b9b1af
}

    .setboxEX:hover {
        color: #b9b1af;
        background: #3b2e28;
        height: 55px;
        padding: 12px 10px
    }

#colorbox-items .setboxEX .colorboxSlider {
    color: #b9b1af;
    height: 55px
}

a.colorboxSlider:hover {
    color: #554242;
    height: 55px
}

.boxtestimonail {
    min-height: 240px
}

.boxlistgraySubsidiaries {
    min-height: 254px;
    padding: 12px
}

.boxlistexclusivepromo {
    padding: 0 5px;
    margin: 10px 5px 15px
}

.boxlistexclusivepromo2 {
    min-height: 355px;
    padding: 0 5px;
    margin: 10px 5px 15px
}

.bg-bm-w {
    padding: 30px;
    background: #fff;
    color: #554242;
    font-size: 22px;
    border: 10px solid #f6f6f6
}

    .bg-bm-w:hover {
        padding: 30px;
        background: #ffda00;
        color: #554242;
        font-size: 22px;
        border: 10px solid #f6f6f6;
        text-decoration: none
    }

    .bg-bm-w:focus {
        padding: 30px;
        background: #ffda00;
        color: #554242;
        font-size: 22px;
        border: 10px solid #f6f6f6;
        text-decoration: none
    }

.bg-bm-main {
    padding: 30px;
    background: #ffda00;
    color: #554242;
    font-size: 22px;
    border: 10px solid #f6f6f6
}

    .bg-bm-main:hover {
        padding: 30px;
        background: #fedd50;
        color: #554242;
        font-size: 22px;
        border: 10px solid #f6f6f6;
        text-decoration: none
    }

    .bg-bm-main:focus {
        padding: 30px;
        background: #ffda00;
        color: #554242;
        font-size: 22px;
        border: 10px solid #f6f6f6;
        text-decoration: none
    }

.bg-bm-main1 {
    padding: 10px;
    background: #ffda00;
    color: #554242;
    font-size: 14px;
    border: 3px solid #f6f6f6
}

    .bg-bm-main1:hover {
        background: #fedd50;
        color: #554242;
        font-size: 14px;
        border: 3px solid #f6f6f6;
        text-decoration: none
    }

    .bg-bm-main1:focus {
        padding: 10px;
        background: #ffda00;
        color: #554242;
        font-size: 14px;
        border: 3px solid #f6f6f6;
        text-decoration: none
    }

a.a-bg-bm-main1 {
    text-decoration: none;
    color: #000
}

    a.a-bg-bm-main1:hover {
        text-decoration: none;
        color: #000
    }

a.a-bg-bm-main2 {
    text-decoration: none;
    color: #fff
}

    a.a-bg-bm-main2:hover {
        text-decoration: none;
        color: #fff
    }

.bg-bm-main2 {
    padding: 10px;
    background: #ece9e9;
    color: #554242;
    font-size: 14px;
    border: 3px solid #f6f6f6
}

    .bg-bm-main2:hover {
        padding: 10px;
        background: #fedd50;
        color: #554242;
        font-size: 14px;
        border: 3px solid #f6f6f6;
        text-decoration: none
    }

    .bg-bm-main2:focus {
        padding: 10px;
        background: #ffda00;
        color: #554242;
        font-size: 14px;
        border: 3px solid #f6f6f6;
        text-decoration: none
    }

a.bg-bm-main3, a.bg-bm-main3:hover, a.bg-bm-main3:focus {
    color: #ff6700 !important
}

.guru-bg-bm-main2 {
    padding: 10px;
    background: #000;
    color: #fff;
    font-size: 14px;
    border: 3px solid #403c3c
}

    .guru-bg-bm-main2:hover {
        padding: 10px;
        background: #181818;
        color: #554242;
        font-size: 14px;
        border: 3px solid #403c3c;
        text-decoration: none
    }

    .guru-bg-bm-main2:focus {
        padding: 10px;
        background: #181818;
        color: #554242;
        font-size: 14px;
        border: 3px solid #403c3c;
        text-decoration: none
    }

.guru-bg-bm-main1 {
    padding: 10px;
    background: #ffda00;
    color: #554242;
    font-size: 14px;
    border: 3px solid #403c3c
}

    .guru-bg-bm-main1:hover {
        padding: 10px;
        background: #fedd50;
        color: #554242;
        font-size: 14px;
        border: 3px solid #403c3c
    }

    .guru-bg-bm-main1:focus {
        padding: 10px;
        background: #fedd50;
        color: #554242;
        font-size: 14px;
        border: 3px solid #403c3c
    }

a.bg-bm-wlink {
    text-decoration: none;
    color: #554242
}

    a.bg-bm-wlink:hover {
        text-decoration: none;
        color: #554242
    }

.boxfeed {
    min-height: 222px
}

.boxfeedA {
    min-height: 341px
}

.boxlistgraysme {
    min-height: 300px;
    padding: 8px 5px 0;
    margin: 0 5px 15px
}

.boxlistgraypromo {
    min-height: 325px;
    padding: 8px 5px 0;
    margin: 0 5px 15px
}

.boxlistAyudhyabulletin {
    min-height: 350px;
    padding: 8px 5px 0;
    margin: 0 5px 15px
}

    .boxlistAyudhyabulletin:hover {
        min-height: 350px;
        padding: 8px 5px 0;
        margin: 0 5px 15px;
        background: #ede9ea
    }

.boxlistgraynews {
    min-height: 400px;
    padding: 8px 5px 0;
    margin: 0 5px 15px
}

.boxlistyellowpointhone {
    min-height: 310px;
    padding: 8px 5px 0;
    margin: 0 5px 15px
}

.boxlistbm {
    min-height: 200px;
    padding: 15px
}

.boxpdcalendar {
    padding: 5px 30px 10px
}

.boxpdcalendar2 {
    padding: 5px 30px 10px;
    margin-right: 10px
}

.boxpd {
    padding: 5px 30px 10px
}

.boxpadding {
    padding: 20px
}

.boxmglb {
    margin: 0 5px 15px
}

.boxpd:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #ece9e9 transparent transparent;
    left: -30px;
    top: 30px
}

.boxlistgray {
    min-height: 395px;
    padding: 15px
}

.bg-maroon-light-border-News:hover {
    background-color: #e5e5e5;
    color: #554242
}

.bg-maroon-light-border-News {
    background-color: none;
    border: 4px solid #f6f6f6
}

.boxlist {
    min-height: 230px;
    margin: 0 5px 15px;
    padding: 5px 20px 10px
}

.boxlistA {
    min-height: 260px;
    margin: 0 5px 15px;
    padding: 5px 10px 10px
}

.boxlistB {
    min-height: 230px;
    padding: 20px
}

.boxlistBTMU {
    min-height: 60px;
    padding-left: 20px;
    padding-top: -10px
}

.boxlistBtext {
    min-height: 200px;
    padding: 10px 20px 0
}

.boxlistBTMUtext {
    min-height: 50px;
    padding: 10px 20px 0
}

.boxlistC {
    min-height: 150px;
    margin: 0 5px 15px;
    padding: 5px 10px 10px
}

.boxlist-border-planyourmoney {
    min-height: 273px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 20px;
    padding: 5px;
    border: 0 solid #554242
}

.boxlist-border-exculsive {
    min-height: 150px;
    margin: 0 5px 15px;
    padding: 4px 0 0 14px;
    border: 1px solid #2b2929
}

.boxlist-border {
    min-height: 150px;
    margin: 0 5px 15px;
    padding: 5px;
    border: 1px solid #dcd5d5
}

.boxlist-border2 {
    border: 1px solid #dcd5d5;
    margin: 0 5px 15px;
    min-height: 125px;
    padding-bottom: 20px
}

.boxlist-border3 {
    min-height: 130px;
    margin: 0 5px 15px;
    padding: 5px;
    border: 1px solid #dcd5d5
}

.boxlist-border4 {
    margin: 0 5px 15px;
    padding: 5px;
    border: 1px solid #dcd5d5
}

.boxlist-border5 {
    min-height: 140px;
    margin: 0 5px 15px;
    padding: 5px;
    border: 1px solid #dcd5d5
}

.boxlist-border6 {
    height: 230px;
    margin: 0 5px 15px
}

.boxlist-border7 {
    height: 80px
}

.boxlist-border h3 {
    padding: 10px 16px;
    margin-top: 10px
}

.boxright {
    min-height: 130px;
    margin-right: 0;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid #dcd5d5
}

.line-yellow {
    border-color: #ffda00
}

.line-maroon-light {
    border-color: #ece9e9
}

.line--dark-grey {
    border-color: #554242
}

.bg-brownM {
    background-color: #322c2c
}

.bg-palegreen {
    background-color: #90a0a0
}

.bg-dark {
    background-color: #1a1818
}

.bg-light-gray {
    background-color: #e9e5e5
}

.bg-blue {
    background-color: #1984bc
}

.bg-light {
    background-color: #f6f6f6
}

.bg-turquouse {
    background-color: #008ea3
}

.bg-yellow {
    background-color: #ffda00
}

.bg-orange {
    background-color: #ff6801
}

.bg-cyan {
    background-color: #03a49e
}

.bg-dark-grey {
    background-color: #554242
}

.bg-maroon-grey {
    background-color: #715f5f;
    color: #fff
}

.bg-maroon-light-border:hover {
    background-color: #efeeee;
    color: #554242
}

.bg-maroon-light-border {
    background-color: #ece9e9;
    border: 4px solid #f6f6f6
}

.bg-maroon-light:hover {
    background-color: #e6e3e3;
    border: 4px solid #e6e3e3
}

.bg-maroon-light {
    background-color: #ece9e9;
    border: 4px solid #ece9e9
}

.bg-maroon-light2 {
    background-color: #ece9e9
}

@media(min-width: 480px) {
    .bg-maroon-light2 {
        background-color: #ece9e9
    }
}

@media(min-width: 767px) {
    .bg-maroon-light2 {
        background-color: #ece9e9
    }
}

@media(min-width: 992px) {
    .bg-maroon-light2 {
        background-color: #ece9e9
    }
}

.bg-maroon-light3 {
    background-color: #ece9e9
}

.bg-maroon-light-color {
    background-color: #ece9e9
}

.bg-maroon-color {
    background-color: #73696a
}

.bg-maroon-drak {
    background-color: #322c2c;
    color: #bbb3b1
}

.bg-exculsive-dark {
    background-color: #1a1818
}

.bg-exculsive {
    background-color: #3b2e28
}

.bg-inactive {
    background-color: #ede9ea
}

.bg-exclusive-light-border:hover {
    background-color: #3b2e28;
    border: 4px solid none;
    color: #bab4b4
}

.bg-exclusive-light-border {
    background-color: none;
    border: 4px solid none;
    color: #bab4b4
}

.bg-maroon-light-border-News:hover {
    background-color: #e5e5e5;
    color: #554242
}

.bg-maroon-light-border-News {
    background-color: none;
    border: 4px solid #f6f6f6
}

.bg-maroon-light-border-Subsidiaries:hover {
    background-color: #e5e5e5;
    color: #554242
}

.bg-maroon-light-border-Subsidiaries {
    background-color: none;
    border: 4px solid #f6f6f6
}

.bg-yellowcat {
    background-color: #ffce12
}

.bg-white {
    background-color: #fff
}

.bg-black {
    background-color: #000
}

.bg-turquoise {
    background-color: #1abc9c
}

.bg-green-sea {
    background-color: #16a085
}

.bg-emerland {
    background-color: #2ecc71
}

.bg-nephritis {
    background-color: #27ae60
}

.bg-peter-river {
    background-color: #3498db
}

.bg-belize-hole {
    background-color: #2980b9
}

.bg-amethyst {
    background-color: #9b59b6
}

.bg-wisteria {
    background-color: #8e44ad
}

.bg-wet-asphalt {
    background-color: #34495e
}

.bg-midnight-blue {
    background-color: #2c3e50
}

.bg-sun-flower {
    background-color: #f1c40f
}

.bg-carrot {
    background-color: #e67e22
}

.bg-pumpkin {
    background-color: #d35400
}

.bg-alizarin {
    background-color: #e74c3c
}

.bg-pomegranate {
    background-color: #c0392b
}

.bg-clouds {
    background-color: #ecf0f1
}

.bg-silver {
    background-color: #bdc3c7
}

.bg-concrete {
    background-color: #95a5a6
}

.bg-asbestos {
    background-color: #7f8c8d
}

.bg-base {
    background-color: #34495e
}

.bg-firm {
    background-color: #1abc9c
}

.bg-success {
    background-color: #2ecc71
}

.bg-danger {
    background-color: #e74c3c
}

.bg-warning {
    background-color: #f1c40f
}

.bg-info {
    background-color: #3498db
}

.bg-lightgray {
    background-color: #f3f1f1
}

.bg-brown {
    background-color: #322020
}

.bg-redbtmu {
    background-color: #e60000
}

.bordered {
    border-style: solid
}

    .bordered.bg-turquoise {
        border-color: #16a085
    }

    .bordered.bg-emerland {
        border-color: #27ae60
    }

    .bordered.bg-peter-river {
        border-color: #2980b9
    }

    .bordered.bg-amethyst {
        border-color: #8e44ad
    }

    .bordered.bg-wet-asphalt {
        border-color: #2c3e50
    }

    .bordered.bg-sun-flower {
        border-color: #f39c12
    }

    .bordered.bg-carrot {
        border-color: #d35400
    }

    .bordered.bg-alizarin {
        border-color: #c0392b
    }

    .bordered.bg-clouds {
        border-color: #bdc3c7
    }

    .bordered.bg-concrete {
        border-color: #7f8c8d
    }

.f-white {
    color: #fff
}

a.f-white {
    color: #fff
}

.f-white a {
    color: #fff
}

.f-yellow {
    color: #ffda00
}

.f-yellow-exclusive {
    color: #ffd400
}

.f-dark-grey {
    color: #554242
}

.f-orange {
    color: #ff6700
}

.f-maroon-light {
    color: #bbb3b1
}

.f-exclusive {
    color: #bab4b4
}

.f-orange1 {
    color: #f27c44
}

.f-red {
    color: red
}

.panel-footer2 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top: 1px solid #ddd;
    padding: 10px 0
}

.test-backgroundmap {
    background-image: url(/assets/map.html)
}

.lb-yellow {
    border-color: #ffda00;
    border-style: solid;
    border-width: 0 0 0 3px;
    padding-left: 20px
}

.dotstar {
    color: #fc7e41
}

.color-icon {
    color: #5e5e5e
}

.h-mt--1px {
    margin-top: -1px
}

@media screen and (max-width: 991px) {
    .h-pc {
        display: inline
    }

    .h-tablet {
        display: none
    }
}

@media screen and (min-width: 992px) {
    .h-pc {
        display: none
    }

    .h-tablet {
        display: inline
    }
}

#detailSub2 .text-readdetail {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 18px;
    letter-spacing: 0;
    line-height: 42px
}

#detailSub2 .text-detail {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

#detailSub2 .text-readdetail-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 26px;
    font-weight: bold
}

/*body {
    padding-top: 0
}
*/
.btn-subscribe {
    font-size: 16px;
    font-family: "Krungsri-Condensed-Bold";
    color: #554242
}

.display-hide {
    display: none
}

.bg-black {
    background-color: #000
}

.lh-initial {
    line-height: initial
}

#detailSub a:hover {
    cursor: pointer
}

#detailSub .text-detail {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

#detailSub .container_1 {
    display: table;
    height: 100%
}

.margin-tb-read {
    margin-top: 40px;
    margin-bottom: 40px
}

#detailSub .text-readdetail {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 20px;
    letter-spacing: 0;
    line-height: 42px
}

#detailSub .text-readdetail-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    font-weight: bold
}

@media(max-width: 992px) {
    .margin-tb-read {
        margin-top: 24px;
        margin-bot: 40px
    }

    #detailSub .text-detail {
        color: #5a5a5a;
        font-family: "Thongterm-Roman";
        font-size: 16px;
        letter-spacing: 0;
        line-height: 34px
    }

    #detailSub .text-readdetail {
        color: #5a5a5a;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 28px
    }

    #detailSub .container_1 {
        display: table;
        height: 100%;
        width: 100%
    }

    #detailSub .text-readdetail-title {
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 26px;
        font-weight: bold
    }
}

#sharedBarModal2 .row {
    text-align: center !important;
    margin-bottom: 30px !important
}

.box {
    background-color: #fff6cb;
    padding: 10px;
    margin: -5px;
    display: block;
    border-radius: 20px
}

.box2 {
    background-color: #fff6cb;
    padding: 10px;
    margin: -5px;
    display: block;
    border-radius: 20px;
    height: 405px
}

.clear {
    height: 0;
    line-height: 0;
    font-size: 0;
    clear: both;
    margin: 0;
    padding: 0;
    width: 100%
}

.ifinmb-desc {
    margin-top: 30px;
    position: relative;
    background: #fdfaeb;
    display: inline-block;
    padding: 30px 20px;
    width: 100%
}

.z-center {
    font-size: 16pt;
    background: none repeat scroll 0% 0% #4d4646;
    border-radius: 100px;
    margin-top: 50px;
    width: 50px;
    height: 50px;
    padding: 10px;
    vertical-align: middle;
    text-align: center
}

.input-button-subscrib {
    height: 44px;
    width: 105px;
    border-radius: 0 3px 3px 0;
    background-color: #ffd400;
    border: unset;
    margin-left: -10px
}

.logo-mobile-menu {
    height: 37px;
    width: 188px
}

.div-onclick {
    cursor: pointer
}

.ct-tag {
    border: 1px solid #e8e8e8;
    background-color: #fff;
    border-radius: 4px;
    display: inline-table;
    padding: 4px 8px;
    height: 26px;
    color: #545454;
    font-size: 14px;
    font-family: "Thongterm-Roman";
    letter-spacing: 0;
    line-height: 30px;
    margin-right: 16px;
    margin-bottom: 16px
}

.ct-tags-group {
    padding: 16px 0;
    max-height: 1810px;
    overflow-y: auto
}

.bg-brown {
    background-color: #222
}

.footer-height {
    height: 59px
}

.bg-yellow {
    background-color: #ffd400
}

.align-middle {
    align-items: center
}

.pt-unset {
    padding-right: unset;
    padding-left: unset
}

.rm-margin-lr {
    margin-right: 0 !important;
    margin-left: 0 !important
}

ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.hide-pc {
    display: none !important
}

.hide-pc-top {
    display: none !important
}

.hide-mobile-top {
    display: inline !important
}

#footer a:hover, #footer a:focus {
    color: #ffd400
}

@media(max-width: 991px) {
    .hide-pc-top {
        display: inline !important
    }

    .hide-mobile-top {
        display: none !important
    }
}

@media(min-width: 769px) {
    .container_1 {
        width: 100%;
        height: 100%
    }
}

@media(min-width: 1200px) {
    .container_1 {
        width: 1170px;
        height: 100%
    }
}

.ar-zonetop-img {
    margin-top: 112px
}

.container_1 {
    margin-right: auto;
    margin-left: auto
}

.container_m {
    padding: 0
}

.display-footermid {
    display: none
}

.zonefootermid {
    height: 59px;
    background-color: #222;
    text-align: center
}

.zonetop a:hover, .zonetop a:focus {
    color: #ffd400;
    text-decoration: none;
    cursor: pointer
}

.zonemainmenu a:hover, .zonemainmenu a:focus, .lineActive {
    color: #222 !important;
    font-weight: bold;
    border-bottom: 3px solid #ffd400;
    padding-bottom: 0;
    cursor: pointer
}

.zonemainmenu .nonline a:hover, .zonemainmenu .nonline a:focus {
    color: #222 !important;
    font-weight: bold;
    border-bottom: unset;
    padding-bottom: 0;
    cursor: pointer
}

.menuitem-podcast a:hover, .menuitem-podcast a:focus {
    font-family: "Krungsri-Condensed-Bold";
    color: #fff !important;
    border-bottom: unset
}

.plearn {
    background: #fff;
    font-family: "Krungsri-Condensed-Medium"
}

.testbottom {
    margin-top: 800px
}

.zonetop {
    height: 32px;
    background: #000;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1
}

.zonefooter {
    height: 59px;
    background: linear-gradient(to right,#ffd400 0%,#ffd400 75%,#222 75%,#222 100%);
    width: 100%
}

.zonefootertop {
    height: 257px;
    width: 100%;
    background-color: #000
}

.zonetop .container_1 {
    display: table;
    height: 100%
}

.zonefootertop .container_1 {
    display: table;
    height: 100%
}

.zonefooter .container_1 {
    display: table;
    height: 100%
}

.zonetop .inner {
    display: table-cell;
    vertical-align: middle
}

.zonefootertop .inner {
    display: table-cell;
    vertical-align: middle
}

.zonefooter .inner {
    display: table-cell;
    vertical-align: middle
}

.zonetop a:hover, .zonetop a:focus {
    color: #ff6700;
    text-decoration: none
}

.zonetop a {
    color: #e8e8e8;
    text-decoration: none
}

.pull-left {
    float: left !important
}

    .pull-left .aboutplearn-top {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px;
        padding-right: 24px
    }

    .pull-left .guru-top {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px
    }

.pull-right {
    float: right !important
}

    .pull-right .krungsri {
        color: #ffd400 !important;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px;
        text-align: center
    }

.menuzonefooter {
    height: 177px
}

.zonemainmenu ul li {
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    display: table-cell;
    vertical-align: middle;
    text-align: left
}

.box-zonemenu {
    position: absolute;
    top: 32px;
    top: 45px;
    width: 100%;
    z-index: 1;
    height: 80px;
    background-color: #fff
}

.box-zonemenu2 {
    position: fixed;
    top: 112px;
    width: 100%;
    z-index: 1;
    height: 80px;
    background-color: #fff
}

.img-plearn-logo {
    height: 48px;
    width: 244px;
    cursor: pointer
}

.img-krungsri-bot-logo {
    height: 43px;
    width: 93.17px;
    margin-left: 8px
}

.img-plearn-podcast {
    height: 30px;
    width: 30px
}

.img-plearn-podcast-footer {
    height: 24px;
    width: 24px;
    margin-right: 5px
}

.img-plearn-share {
    height: 24px;
    width: 24px;
    margin-top: -5px;
    cursor: pointer
}

.img-plearn-search {
    height: 20px;
    width: 18px;
    cursor: pointer
}

.img-plearn-logo-w {
    height: 47px;
    width: 241px
}

.img-plearn-follow {
    height: 38px;
    width: 38px;
    cursor: pointer
}

.menuitem {
    padding-right: 38px
}

.logo-top {
    padding-right: 50px
}

.menuitem-top {
    color: #5a5a5a;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center
}

.menuitem-podcast {
    height: 80px;
    width: 143px;
    background-color: #554242;
    text-align: center !important;
    cursor: pointer;
    align-items: center
}

.menuitem-search {
    padding-left: 42px
}

.menuitem-share {
    padding-left: 20px
}

.menuitem-menu {
    display: none !important
}

.menuitem-podcast img {
    vertical-align: top
}

.item-podcast {
    font-family: "Krungsri-Condensed-Bold";
    color: #fff;
    font-size: 20px;
    letter-spacing: 0;
    height: 30px;
    padding-left: 8px
}

.text-cr {
    font-family: Thongterm-Roman;
    color: #222;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px
}

.cr-bg {
    width: 255px;
    height: 59px;
    background-color: #222
}

.menu-footer {
    color: #ffd400;
    font-family: "Thongterm-Bold";
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    cursor: pointer
}

.text-powered-by {
    color: #fff;
    font-family: "Krungsri-Condensed";
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 23px;
    text-align: right;
    line-height: 59px;
    margin-left: 24px
}

.text-left-footer {
    color: #e8e8e8;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px
}

.text-right-footer1 {
    color: #e8e8e8;
    font-family: Thongterm-Bold;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px
}

.text-right-footer2 {
    color: #e8e8e8;
    font-family: "Thongterm-Roman";
    font-size: 14px;
    letter-spacing: 0;
    cursor: pointer
}

.text-right-footer-line {
    width: 1px;
    border-right: 1px solid;
    margin-right: 16px;
    margin-left: 16px
}

.tagline {
    color: #e8e8e8;
    font-family: "Thongterm-Bold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 34px
}

.ml-18px-lg {
    margin-left: 18px
}

.ml-7_92px-all {
    margin-left: 7.92px
}

.mt-8px-all {
    margin-top: 8px
}

.mt-11px-all {
    margin-top: 11px
}

.mt-21px-lg {
    margin-top: 21px
}

.inputemail input[type="text"] {
    max-width: 295px;
    height: 44px;
    border-radius: 3px;
    border: none;
    padding-left: 16px
}

    .inputemail input[type="text"]:focus, .inputemail input[type="submit"]:focus {
        outline: none
    }

.inputemail input[type="submit"] {
    margin-left: -3px;
    height: 44px;
    width: 105px;
    background: #ffd400;
    border-radius: 0 3px 3px 0;
    border: none;
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    text-align: center
}

::placeholder {
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold
}

@media screen and (min-width: 992px) {
    .pp-pd-rl-16px {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media screen and (min-width: 769px) and (max-width:991px) {
    .pp-mr-16px {
        margin-right: 16px
    }

    .pp-ml-16px {
        margin-left: 16px
    }

    .pp-pd-rl-16px {
        padding-left: 16px;
        padding-right: 16px
    }

    .pp-pt-16px-md {
        padding-top: 16px
    }
}

@media screen and (max-width: 991px) {
    .zonefootertop {
        height: 448px
    }

    .menuzonefooter {
        height: unset;
        text-align: center
    }

    .hide-tablet {
        display: none !important
    }

    .show-tablet {
        display: inline !important
    }
}

@media(max-width: 768px) {
    .zonefooter {
        background: #ffd400
    }

    .mt--footer {
        margin-top: -15px
    }

    ::placeholder {
        color: #d6d6d6;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 16px;
        font-weight: bold
    }

    .ar-zonetop-img {
        margin-top: 102px
    }

    .zonefooter {
        height: 40px
    }

    .zonefootertop {
        height: 581px;
        width: 100%;
        background-color: #000
    }

    .zonefootertop {
        height: 448px
    }

    .menuzonefooter {
        height: unset;
        text-align: center
    }

    .zonemainmenu {
        padding-left: 1px;
        padding-right: 1px
    }

    .pull-left .guru-top {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px;
        padding-left: 16px
    }

    .box-zonemenu {
        top: 32px;
        height: 70px
    }

    .pull-left .aboutplearn-top {
        padding-right: 0
    }

    .menuitem-search {
        padding-left: 8px
    }

    .menuitem-share {
        padding-left: 11px
    }

    .menuitem-menu {
        display: table-cell !important;
        padding-left: 11px
    }

    .pull-line-top {
        margin-left: 16px;
        border-right: 1px solid
    }

    .hide-mobile {
        display: none !important
    }

    .display-footermid {
        display: inherit
    }

    .hide-pc {
        display: inline !important
    }

    .img-plearn-logo {
        height: 37px;
        width: 188px
    }

    .container_m {
        padding: 16px 0
    }

    .text-cr {
        color: #222;
        font-family: "Krungsri-Condensed-Medium";
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px
    }

    .inputemail input[type="text"] {
        width: 207px;
        height: 44px;
        border-radius: 3px;
        border: none;
        padding-left: 16px
    }

    .img-plearn-logo-w {
        height: 42px;
        width: 215px
    }

    .menu-footer {
        font-size: 16px
    }

    .img-plearn-podcast-footer {
        height: 30px;
        width: 30px
    }

    .text-left-footer {
        font-size: 16px
    }

    .text-right-footer1 {
        font-size: 16px
    }

    .zonefootertop .inner {
        display: unset;
        vertical-align: unset
    }

    .ml-18px-lg {
        margin-left: unset
    }

    .mt-21px-lg {
        margin-top: unset
    }
}


.container--tab {
    max-width: 1200px;
    margin: auto
}

.bg-menu-tab {
    background-color: white;
    width: auto;
    margin-left: -15px;
    margin-right: -15px;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(90,90,90,.2)
}

.tab-title-text {
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .tab-title-text > a.border-line {
        font-family: Krungsri-Condensed-Medium;
        font-size: 18px;
        color: #5a5a5a;
        line-height: 30px;
        height: 78px;
        display: table-cell;
        vertical-align: middle
    }

        .tab-title-text > a.border-line.active {
            font-family: Krungsri-Condensed-Bold;
            font-size: 18px;
            margin-right: 48px;
            margin-top: 24px;
            margin-bottom: 24px;
            color: #222;
            line-height: 30px;
            height: 78px;
            display: table-cell;
            vertical-align: middle
        }

    .tab-title-text:hover > a:after {
        transform: translate3d(100%,0,0)
    }

    .tab-title-text > a.active:after {
        transform: translate3d(100%,0,0)
    }

    .tab-title-text > a {
        background: transparent;
        position: relative;
        overflow: hidden
    }

        .tab-title-text > a:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: -100%;
            width: 100%;
            height: 3px;
            background: #ffd400;
            transition: .3s cubic-bezier(.445,.05,.55,.95)
        }

        .tab-title-text > a:hover {
            background: transparent
        }

    .tab-title-text .sub {
        position: absolute;
        overflow: hidden;
        background: #fff;
        box-shadow: 1px 2px 0 0 rgba(35,19,18,.2);
        border-radius: 4px;
        z-index: 5;
        list-style: none;
        padding: 0;
        transform: translate(0,0);
        max-height: 0;
        transition: .2s ease-in transform,.4s ease max-height;
        min-width: 270px
    }

        .tab-title-text .sub li {
            padding-left: 16px;
            padding-right: 16px;
            padding-top: 4px;
            padding-bottom: 4px;
            font-family: 'Thongterm-Roman';
            font-size: 16px;
            color: #5a5a5a;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

            .tab-title-text .sub li:hover {
                background-color: #f3f3f3
            }

            .tab-title-text .sub li a {
                font-family: 'Thongterm-Roman';
                font-size: 16px;
                color: #5a5a5a
            }

    .tab-title-text.active--sub .sub {
        padding-top: 8px;
        padding-bottom: 8px;
        max-height: 900px;
        transform: translate(0,4px)
    }

.zone-white {
    background: #fff
}

.zone-ghostWhite {
    background: #f9f9f9
}

.accordion .card .card-header {
    padding-bottom: 0
}

.accordion .card .collapse {
    padding-top: 0 !important
}

.card-logo.download .header {
    max-width: calc(100% - 50px)
}

.card-logo.download .content {
    height: 104px;
    position: relative
}

.card-logo.download .image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 270px
}

    .card-logo.download .image img {
        width: auto;
        height: 100%
    }

.card-logo.download .badge {
    position: absolute;
    top: 16px;
    right: 16px
}

    .card-logo.download .badge.filetype {
        background: #ffc800;
        color: #fff;
        min-width: 34px;
        height: 18px;
        font-family: 'SukhumvitSet-Semi';
        font-weight: bold;
        border-radius: 3px;
        padding: 0;
        padding-left: 2px;
        padding-top: 4px;
        text-align: center
    }

.card-logo.download i {
    position: absolute;
    bottom: 27px;
    right: 21px
}

    .card-logo.download i:before {
        font-size: 24px;
        color: #222
    }

.card-logo.download .header h2 {
    overflow: hidden
}

.card-logo.link .content {
    height: 91px
}

@media(max-width: 1199px) {
    .tab-title-text:first-child {
        padding-left: 24px
    }

    .tab-title-text:last-child {
        padding-right: 24px
    }
}

@media(max-width: 991px) {
    .bg-menu-tab {
        display: none
    }

    .nav-menu-mobile .btn-secondary-menu {
        cursor: pointer
    }

    .nav-secondary-menu a {
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .nav-secondary-menu .main.active .arrow:after {
        transform: rotateX(180deg)
    }

    .nav-secondary-menu .sub {
        display: none
    }
}

@media(max-width: 767px) {
    .container--content {
        margin-bottom: 40px
    }

    .card-logo.download .image {
        min-height: 243px;
        height: 100%
    }

    .card-logo.download .content {
        height: 74px;
        padding: 8px;
        padding-left: 10px
    }

    .card-logo.download i {
        position: relative;
        top: 11px;
        left: auto;
        right: auto;
        bottom: auto;
        padding-right: 10px
    }

        .card-logo.download i:before {
            font-size: 16px
        }

    .card-logo.download .badge {
        top: 16px
    }

    .card-logo.download .header {
        display: flex
    }

        .card-logo.download .header h2 {
            font-size: 16px;
            font-family: 'Thongterm-Roman';
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

    .card-logo.link .image {
        height: auto
    }

        .card-logo.link .image img {
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%
        }

    .zone-mob-gapless {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px
    }

    .scroll-tooltip {
        position: relative;
        overflow: auto
    }

        .scroll-tooltip:before {
            content: '';
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: #5a5a5a;
            background-color: #d8d8d8;
            opacity: .6;
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .scroll-tooltip.img img {
            width: auto !important;
            max-width: none !important
        }

        .scroll-tooltip.hideTp:before {
            display: none
        }
}

@media screen and (min-width: 768px) {
    .tab-title-text {
        padding-left: 10px;
        padding-right: 10px
    }

        .tab-title-text:first-child {
            padding-left: 0
        }

        .tab-title-text:last-child {
            padding-right: 0
        }
}

@media screen and (max-width: 1199px) {
    .nav-menu-mobile {
        padding-bottom: 0;
        margin-bottom: 0
    }
}

.gotoTop {
    line-height: 32px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: none;
    background-color: #fcfcfc;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 3px 7px 0 rgba(0,0,0,.3);
    float: right;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99
}

    .gotoTop:after {
        content: '';
        font-family: 'Font Awesome 5 Pro';
        color: #5a5a5a;
        font-size: 18px
    }

@media(max-width: 767px) {
    .gotoTop {
        line-height: 44px;
        width: 44px;
        height: 44px;
        bottom: 16px;
        right: 16px
    }

        .gotoTop:after {
            font-size: 24px
        }
}

@media(max-width: 768px) {
    .pull-line-top {
        margin-left: 4px !important
    }

    .pull-left .guru-top {
        padding-left: 4px !important
    }

    .pull-left .guru-top {
        font-size: 12px !important
    }
}

.text-img-center {
    position: absolute;
    top: 0% !important;
    left: 50%;
    transform: translate(-50%,100%)
}

@media(max-width: 768px) {
    .text-img {
        height: auto !important
    }
}



.color-icon {
    color: #5e5e5e
}

.h-mt--1px {
    margin-top: -1px
}

@media screen and (max-width: 991px) {
    .h-pc {
        display: inline
    }

    .h-tablet {
        display: none
    }
}

@media screen and (min-width: 992px) {
    .h-pc {
        display: none
    }

    .h-tablet {
        display: inline
    }
}

#detailSub2 .text-readdetail {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 18px;
    letter-spacing: 0;
    line-height: 42px
}

#detailSub2 .text-detail {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

#detailSub2 .text-readdetail-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 26px;
    font-weight: bold
}

/*body {
    padding-top: 0
}
*/
.btn-subscribe {
    font-size: 16px;
    font-family: "Krungsri-Condensed-Bold";
    color: #554242
}

.display-hide {
    display: none
}

.bg-black {
    background-color: #000
}

.lh-initial {
    line-height: initial
}

#detailSub a:hover {
    cursor: pointer
}

#detailSub .text-detail {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

#detailSub .container_1 {
    display: table;
    height: 100%
}

.margin-tb-read {
    margin-top: 40px;
    margin-bottom: 40px
}

#detailSub .text-readdetail {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 20px;
    letter-spacing: 0;
    line-height: 42px
}

#detailSub .text-readdetail-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    font-weight: bold
}

@media(max-width: 992px) {
    .margin-tb-read {
        margin-top: 24px;
        margin-bot: 40px
    }

    #detailSub .text-detail {
        color: #5a5a5a;
        font-family: "Thongterm-Roman";
        font-size: 16px;
        letter-spacing: 0;
        line-height: 34px
    }

    #detailSub .text-readdetail {
        color: #5a5a5a;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 28px
    }

    #detailSub .container_1 {
        display: table;
        height: 100%;
        width: 100%
    }

    #detailSub .text-readdetail-title {
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 26px;
        font-weight: bold
    }
}

#sharedBarModal2 .row {
    text-align: center !important;
    margin-bottom: 30px !important
}

.box {
    background-color: #fff6cb;
    padding: 10px;
    margin: -5px;
    display: block;
    border-radius: 20px
}

.box2 {
    background-color: #fff6cb;
    padding: 10px;
    margin: -5px;
    display: block;
    border-radius: 20px;
    height: 405px
}

.clear {
    height: 0;
    line-height: 0;
    font-size: 0;
    clear: both;
    margin: 0;
    padding: 0;
    width: 100%
}

.ifinmb-desc {
    margin-top: 30px;
    position: relative;
    background: #fdfaeb;
    display: inline-block;
    padding: 30px 20px;
    width: 100%
}

.z-center {
    font-size: 16pt;
    background: none repeat scroll 0% 0% #4d4646;
    border-radius: 100px;
    margin-top: 50px;
    width: 50px;
    height: 50px;
    padding: 10px;
    vertical-align: middle;
    text-align: center
}

.input-button-subscrib {
    height: 44px;
    width: 105px;
    border-radius: 0 3px 3px 0;
    background-color: #ffd400;
    border: unset;
    margin-left: -10px
}

.logo-mobile-menu {
    height: 37px;
    width: 188px
}

.div-onclick {
    cursor: pointer
}

.ct-tag {
    border: 1px solid #e8e8e8;
    background-color: #fff;
    border-radius: 4px;
    display: inline-table;
    padding: 4px 8px;
    height: 26px;
    color: #545454;
    font-size: 14px;
    font-family: "Thongterm-Roman";
    letter-spacing: 0;
    line-height: 30px;
    margin-right: 16px;
    margin-bottom: 16px
}

.ct-tags-group {
    padding: 16px 0;
    max-height: 1810px;
    overflow-y: auto
}

.bg-brown {
    background-color: #222
}

.footer-height {
    height: 59px
}

.bg-yellow {
    background-color: #ffd400
}

.align-middle {
    align-items: center
}

.pt-unset {
    padding-right: unset;
    padding-left: unset
}

.rm-margin-lr {
    margin-right: 0 !important;
    margin-left: 0 !important
}

ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.hide-pc {
    display: none !important
}

.hide-pc-top {
    display: none !important
}

.hide-mobile-top {
    display: inline !important
}

#footer a:hover, #footer a:focus {
    color: #ffd400
}

@media(max-width: 991px) {
    .hide-pc-top {
        display: inline !important
    }

    .hide-mobile-top {
        display: none !important
    }
}

@media(min-width: 769px) {
    .container_1 {
        width: 100%;
        height: 100%
    }
}

@media(min-width: 1200px) {
    .container_1 {
        width: 1170px;
        height: 100%
    }
}

.ar-zonetop-img {
    margin-top: 112px
}

.container_1 {
    margin-right: auto;
    margin-left: auto
}

.container_m {
    padding: 0
}

.display-footermid {
    display: none
}

.zonefootermid {
    height: 59px;
    background-color: #222;
    text-align: center
}

.zonetop a:hover, .zonetop a:focus {
    color: #ffd400;
    text-decoration: none;
    cursor: pointer
}

.zonemainmenu a:hover, .zonemainmenu a:focus, .lineActive {
    color: #222 !important;
    font-weight: bold;
    border-bottom: 3px solid #ffd400;
    padding-bottom: 0;
    cursor: pointer
}

.zonemainmenu .nonline a:hover, .zonemainmenu .nonline a:focus {
    color: #222 !important;
    font-weight: bold;
    border-bottom: unset;
    padding-bottom: 0;
    cursor: pointer
}

.menuitem-podcast a:hover, .menuitem-podcast a:focus {
    font-family: "Krungsri-Condensed-Bold";
    color: #fff !important;
    border-bottom: unset
}

.plearn {
    background: #fff;
    font-family: "Krungsri-Condensed-Medium"
}

.testbottom {
    margin-top: 800px
}

.zonetop {
    height: 32px;
    background: #000;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1
}

.zonefooter {
    height: 59px;
    background: linear-gradient(to right,#ffd400 0%,#ffd400 75%,#222 75%,#222 100%);
    width: 100%
}

.zonefootertop {
    height: 257px;
    width: 100%;
    background-color: #000
}

.zonetop .container_1 {
    display: table;
    height: 100%
}

.zonefootertop .container_1 {
    display: table;
    height: 100%
}

.zonefooter .container_1 {
    display: table;
    height: 100%
}

.zonetop .inner {
    display: table-cell;
    vertical-align: middle
}

.zonefootertop .inner {
    display: table-cell;
    vertical-align: middle
}

.zonefooter .inner {
    display: table-cell;
    vertical-align: middle
}

.zonetop a:hover, .zonetop a:focus {
    color: #ff6700;
    text-decoration: none
}

.zonetop a {
    color: #e8e8e8;
    text-decoration: none
}

.pull-left {
    float: left !important
}

    .pull-left .aboutplearn-top {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px;
        padding-right: 24px
    }

    .pull-left .guru-top {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px
    }

.pull-right {
    float: right !important
}

    .pull-right .krungsri {
        color: #ffd400 !important;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px;
        text-align: center
    }

.menuzonefooter {
    height: 177px
}

.zonemainmenu ul li {
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    display: table-cell;
    vertical-align: middle;
    text-align: left
}

.box-zonemenu {
    position: absolute !important;
    top: 32px;
    top: 45px;
    width: 100%;
    z-index: 1;
    height: 80px;
    background-color: #fff
}

.box-zonemenu2 {
    position: fixed;
    top: 112px;
    width: 100%;
    z-index: 1;
    height: 80px;
    background-color: #fff
}

.img-plearn-logo {
    height: 48px;
    width: 244px;
    cursor: pointer
}

.img-krungsri-bot-logo {
    height: 43px;
    width: 93.17px;
    margin-left: 8px
}

.img-plearn-podcast {
    height: 30px;
    width: 30px
}

.img-plearn-podcast-footer {
    height: 24px;
    width: 24px;
    margin-right: 5px
}

.img-plearn-share {
    height: 20px;
    width: 18px;
    margin-top: -5px;
    cursor: pointer
}

.img-plearn-search {
    height: 20px;
    width: 18px;
    cursor: pointer
}

.img-plearn-logo-w {
    height: 47px;
    width: 241px
}

.img-plearn-follow {
    height: 38px;
    width: 38px;
    cursor: pointer
}

.menuitem {
    padding-right: 38px
}

.logo-top {
    padding-right: 50px
}

.menuitem-top {
    color: #5a5a5a;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center
}

.menuitem-podcast {
    height: 80px;
    width: 143px;
    background-color: #554242;
    text-align: center !important;
    cursor: pointer;
    align-items: center
}

.menuitem-search {
    padding-left: 42px
}

.menuitem-share {
    padding-left: 20px
}

.menuitem-menu {
    display: none !important
}

.menuitem-podcast img {
    vertical-align: top
}

.item-podcast {
    font-family: "Krungsri-Condensed-Bold";
    color: #fff;
    font-size: 20px;
    letter-spacing: 0;
    height: 30px;
    padding-left: 8px
}

.text-cr {
    font-family: Thongterm-Roman;
    color: #222;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px
}

.cr-bg {
    width: 255px;
    height: 59px;
    background-color: #222
}

.menu-footer {
    color: #ffd400;
    font-family: "Thongterm-Bold";
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    cursor: pointer
}

.text-powered-by {
    color: #fff;
    font-family: "Krungsri-Condensed";
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 23px;
    text-align: right;
    line-height: 59px;
    margin-left: 24px
}

.text-left-footer {
    color: #e8e8e8;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px
}

.text-right-footer1 {
    color: #e8e8e8;
    font-family: Thongterm-Bold;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px
}

.text-right-footer2 {
    color: #e8e8e8;
    font-family: "Thongterm-Roman";
    font-size: 14px;
    letter-spacing: 0;
    cursor: pointer
}

.text-right-footer-line {
    width: 1px;
    border-right: 1px solid;
    margin-right: 16px;
    margin-left: 16px
}

.tagline {
    color: #e8e8e8;
    font-family: "Thongterm-Bold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 34px
}

.ml-18px-lg {
    margin-left: 18px
}

.ml-7_92px-all {
    margin-left: 7.92px
}

.mt-8px-all {
    margin-top: 8px
}

.mt-11px-all {
    margin-top: 11px
}

.mt-21px-lg {
    margin-top: 21px
}

.inputemail input[type="text"] {
    max-width: 295px;
    height: 44px;
    border-radius: 3px;
    border: none;
    padding-left: 16px
}

    .inputemail input[type="text"]:focus, .inputemail input[type="submit"]:focus {
        outline: none
    }

.inputemail input[type="submit"] {
    margin-left: -3px;
    height: 44px;
    width: 105px;
    background: #ffd400;
    border-radius: 0 3px 3px 0;
    border: none;
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    text-align: center
}

::placeholder {
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold
}

@media screen and (min-width: 992px) {
    .pp-pd-rl-16px {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media screen and (min-width: 769px) and (max-width:991px) {
    .pp-mr-16px {
        margin-right: 16px
    }

    .pp-ml-16px {
        margin-left: 16px
    }

    .pp-pd-rl-16px {
        padding-left: 16px;
        padding-right: 16px
    }

    .pp-pt-16px-md {
        padding-top: 16px
    }
}

@media screen and (max-width: 991px) {
    .zonefootertop {
        height: 448px
    }

    .menuzonefooter {
        height: unset;
        text-align: center
    }

    .hide-tablet {
        display: none !important
    }

    .show-tablet {
        display: inline !important
    }
}

@media(max-width: 768px) {
    .zonefooter {
        background: #ffd400
    }

    .mt--footer {
        margin-top: -15px
    }

    ::placeholder {
        color: #d6d6d6;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 16px;
        font-weight: bold
    }

    .ar-zonetop-img {
        margin-top: 102px
    }

    .zonefooter {
        height: 40px
    }

    .zonefootertop {
        height: 581px;
        width: 100%;
        background-color: #000
    }

    .zonefootertop {
        height: 448px
    }

    .menuzonefooter {
        height: unset;
        text-align: center
    }

    .zonemainmenu {
        padding-left: 1px;
        padding-right: 1px
    }

    .pull-left .guru-top {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px;
        padding-left: 16px
    }

    .box-zonemenu {
        top: 32px;
        height: 70px
    }

    .pull-left .aboutplearn-top {
        padding-right: 0
    }

    .menuitem-search {
        padding-left: 8px
    }

    .menuitem-share {
        padding-left: 11px
    }

    .menuitem-menu {
        display: table-cell !important;
        padding-left: 11px
    }

    .pull-line-top {
        margin-left: 16px;
        border-right: 1px solid
    }

    .hide-mobile {
        display: none !important
    }

    .display-footermid {
        display: inherit
    }

    .hide-pc {
        display: inline !important
    }

    .img-plearn-logo {
        height: 37px;
        width: 188px
    }

    .container_m {
        padding: 16px 0
    }

    .text-cr {
        color: #222;
        font-family: "Krungsri-Condensed-Medium";
        font-weight: 500;
        letter-spacing: 0;
        line-height: 22px
    }

    .inputemail input[type="text"] {
        width: 207px;
        height: 44px;
        border-radius: 3px;
        border: none;
        padding-left: 16px
    }

    .img-plearn-logo-w {
        height: 42px;
        width: 215px
    }

    .menu-footer {
        font-size: 16px
    }

    .img-plearn-podcast-footer {
        height: 30px;
        width: 30px
    }

    .text-left-footer {
        font-size: 16px
    }

    .text-right-footer1 {
        font-size: 16px
    }

    .zonefootertop .inner {
        display: unset;
        vertical-align: unset
    }

    .ml-18px-lg {
        margin-left: unset
    }

    .mt-21px-lg {
        margin-top: unset
    }
}


.custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
    width: 100%;
    font-family: "Thongterm-Roman"
}

    .custom-select-wrapper select {
        display: none
    }

.custom-select {
    position: relative;
    display: contents
}

.custom-select-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 0 16px;
    font-size: 16px;
    font-weight: normal;
    color: #222;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    line-height: 44px;
    min-height: 46px;
}

    .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        top: 50%;
        right: 16px;
        margin-top: -3px;
        border-bottom: 1px solid #222;
        border-right: 1px solid #222;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
    }

.custom-select.opened .custom-select-trigger:after {
    margin-top: 3px;
    transform: rotate(-135deg) translateY(-50%)
}

.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 100%;
    margin: 1px 0;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px)
}

.custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0)
}

.plearn .custom-option.category.active {
    background: #efefef;
}

.option-hover:before {
    background: #f9f9f9
}

.custom-option {
    position: relative;
    display: block;
    padding: 0 22px;
    font-size: 16px;
    font-weight: normal;
    color: #222;
    line-height: 44px;
    cursor: pointer;
    transition: all .4s ease-in-out
}

    .custom-option:first-of-type {
        border-radius: 4px 4px 0 0
    }

    .custom-option:last-of-type {
        border-bottom: 0;
        border-radius: 0 0 4px 4px
    }

    .custom-option:hover {
        background: #efefef
    }

    .custom-option.selection {
        background: #efefef
    }

.plearn {
    font-family: "Krungsri-Condensed-Medium"
}

.gr-box-back {
    display: none
}

select {
    color: #555
}

.gr-more {
    display: none
}

.gr-img-profile {
    height: 230px;
    width: 230px;
    border-radius: 50%
}

.gr-title-name {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 36px
}

.gr-text-detail {
    margin-top: 24px;
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 34px;
    white-space: unset;
    overflow: unset;
    text-overflow: unset
}

.gr-text-remark {
    margin-top: 24px;
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 34px
}

.pd-detail {
    padding-left: 50px
}

.gr-header-img {
    width: 100%
}

.gr-title-top {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 48px;
    margin-top: 40px;
    padding: unset
}

.gr-title-article {
    margin: 40px 0 24px 0;
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 36px
}

.ct-text-tags {
    color: #5a5a5a;
    font-family: "Thongterm-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px
}

.ui.ks.dropdown {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: unset
}

.ct-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 48px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.ct-header-img {
    width: 100%
}

.hide-pc {
    display: none
}

.ct-pr {
    padding-right: 12px
}

.ct-pl {
    padding-left: 12px
}

.ct-prl {
    padding-right: 12px;
    padding-left: 12px
}

.pd-rl-16px {
    padding-right: 16px;
    padding-left: 16px
}

.pd-rm {
    padding-right: unset;
    padding-left: unset
}

.mg-rm {
    margin-right: unset;
    margin-left: unset
}

.rectangle {
    min-height: 473px;
    border-radius: 3px;
    background-color: #ffd400;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    padding: 24px
}

.card-content {
    min-height: 473px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    border-top: 7px solid #ffd400
}

.card-content-img {
    width: 100%;
    min-height: 270px;
    object-fit: cover
}

.card-content-type {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold;
    padding: 16px 16px 8px 16px;
    text-align: left
}

.card-content-type2 {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 14px
}

.card-content-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 18px;
    font-weight: bold;
    height: 60px;
    padding: 0 16px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left
}

.card-content-name {
    padding: 15px 16px 0 16px;
    color: #000;
    font-family: Thongterm-Roman;
    font-size: 14px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left
}

.bottom-bar-content {
    display: none
}

.card-content-readmore {
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 14px
}

.title-mobile {
    padding: 24px 16px 24px 32px;
    margin-top: -24px;
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 38px
}

@media(max-width: 768px) {
    .gr-text-back {
        color: #5a5a5a;
        font-family: "Thongterm-Roman";
        font-size: 16px;
        letter-spacing: 0;
        line-height: 34px;
        margin-left: 17px
    }

    .gr-box-back {
        cursor: pointer;
        display: inline-block;
        margin-top: 40px
    }

    .gr-more {
        margin-top: 24px;
        color: #f76f00;
        font-family: "Thongterm-Roman";
        font-size: 14px;
        letter-spacing: 0;
        line-height: 30px;
        display: inline-block
    }

    .gr-text-detail {
        margin-top: 8px;
        color: #5a5a5a;
        font-family: "Thongterm-Roman";
        font-size: 16px;
        font-weight: normal;
        letter-spacing: 0;
        line-height: 34px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .pd-detail {
        padding-left: 32px
    }

    .gr-img-profile {
        height: 213px;
        width: 213px;
        border-radius: 50%
    }

    .gr-header-img {
        object-fit: cover;
        overflow: hidden;
        height: 184px
    }

    .gr-title-top {
        font-size: 26px;
        line-height: 38px;
        margin-top: 24px;
        padding: 0 16px
    }

    .gr-title-article {
        margin: 16px
    }

    .ckContent div:nth-child(n+4) .card-content {
        border-top: none;
        min-height: unset;
        height: 110px;
        display: flex;
        padding: 0 16px
    }

        .ckContent div:nth-child(n+4) .card-content .card-content-img {
            width: 110px;
            height: 110px;
            object-fit: cover;
            min-height: unset
        }

        .ckContent div:nth-child(n+4) .card-content .bottom-bar-content {
            display: flex;
            padding: 12px 8px
        }

        .ckContent div:nth-child(n+4) .card-content .card-content-title {
            padding: 8px
        }

        .ckContent div:nth-child(n+4) .card-content .card-content-type {
            display: none
        }

        .ckContent div:nth-child(n+4) .card-content .card-content-name {
            display: none
        }

        .ckContent div:nth-child(n+4) .card-content .bottom-bar {
            display: none
        }

    .container--content {
        margin-top: 24px;
        margin-bottom: 40px
    }

    .pr-rm-m {
        padding-right: unset
    }

    .hide-mobile {
        display: none
    }

    .hide-pc {
        display: inline
    }

    .pd-rm-m {
        padding-right: unset;
        padding-left: unset
    }

    .mg-rm-r-m {
        margin-right: unset
    }

    .mg-rm-m {
        margin-right: unset;
        margin-left: unset
    }
}


.text-color {
    color: #ff8c00 !important
}

.bullet-color ul {
    list-style: none
}

    .bullet-color ul li::before {
        content: "•";
        color: #fd0;
        font-weight: bold;
        font-size: 20px;
        display: inline-block;
        width: 1.3em
    }

.ab-text {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px
}

.ab-title-footer {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px
}

.ab-sub-title {
    margin-top: 40px;
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    padding-left: 16px;
    border-left: 10px solid #ffd400
}

.ab-mt-box {
    margin-top: 24px
}

.ab-content {
    margin-top: 40px
}

.ab-content-box {
    margin-top: 24px
}

.ab-text-footer1 {
    display: inline-flex;
    margin-left: 50px
}

.ab-text-footer2 {
    display: inline-flex;
    margin-left: 40px
}

.ab-li-text {
    color: #6f5f5e;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold
}

.ab-li-text2 {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    font-weight: normal
}

.ab-title-text {
    color: #6f5f5e;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
    width: 100%
}

.ab-box {
    width: 196px;
    height: 198px
}

.box-top {
    height: 108px;
    width: 196px;
    background-color: #ffd400;
    border-radius: 3px 3px 0 0;
    align-items: center
}

.ab-text-boxT {
    color: #554242;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center
}

.ab-text-boxB {
    height: 58px;
    width: 170px;
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0;
    line-height: 34px;
    text-align: center
}

.box-bottom {
    height: 90px;
    width: 196px;
    background-color: #f3f3f3;
    align-items: center
}

.btn-link:hover, .btn-link:focus {
    color: #ff6700 !important;
    text-decoration: underline;
    background-color: transparent
}

.bottom-line {
    border-bottom: 2px solid #ffda00;
    line-height: 35px
}

.hry1 {
    border: 1px solid #fed403;
    margin-top: 10px;
    margin-bottom: 15px
}

@media(max-width: 992px) {
    .ab-text-footer1 {
        margin: 9px 0
    }

    .ab-text-footer2 {
        margin: 9px 0
    }
}

.ar-content-img-f {
    width: 100%;
    max-height: 255px;
    object-fit: cover
}

.ar-content-img-f2 {
    width: 100%;
    height: 245px;
    object-fit: cover
}

.footer-content-card-f {
    height: 428px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
}

@media(max-width: 767px) {
    .ar-content-img-f {
        width: 100%;
        max-height: 152px;
        object-fit: cover
    }

    .ar-content-img-f2 {
        width: 100%;
        height: 152px;
        object-fit: cover
    }

    .footer-content-card-f {
        height: 306px;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
    }

    .ab-content {
        margin-top: 24px
    }

    .ab-title-footer {
        font-size: 18px
    }

    .ab-text-footer1 {
        margin: 9px 0
    }

    .ab-text-footer2 {
        margin: 9px 0
    }

    .ab-sub-title {
        margin-top: 24px;
        font-size: 18px;
        line-height: 28px;
        padding-left: 16px;
        border-left: 10px solid #ffd400
    }

    .ab-title-text {
        font-size: 18px;
        width: 320px
    }

    .ab-content-box {
        margin-top: 16px
    }

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: scroll;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch
    }

        .table-responsive > .table {
            margin-bottom: 0
        }

            .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {
                white-space: nowrap;
                font-size: 12px
            }

        .table-responsive > .table-bordered {
            border: 0
        }

            .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child {
                border-left: 0
            }

            .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child {
                border-right: 0
            }

            .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > th, .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > td {
                border-bottom: 0
            }
}

.ar-header-img {
    width: 100%
}

.bg-hg-card {
    background: linear-gradient(#ffd400 0%,#ffd400 1.2%,#fff 1.2%,#fff 100%)
}

.hg-height-top {
    height: 510px
}

.hg-title-article {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 64px;
    width: 436px;
    height: 128px;
    margin-top: 99px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.hg-img-article {
    width: 100%;
    height: 438px
}

.ar-content-img {
    width: 100%;
    min-height: 255px;
    object-fit: cover
}

.ar-pd-rm {
    padding-right: unset;
    padding-left: unset
}

.ar-pd-l-rm {
    padding-left: unset
}

.ar-pd-r-rm {
    padding-right: unset
}

.ar-mg-rm {
    margin-right: unset;
    margin-left: unset
}

.ar-card {
    background-color: #fff
}

.ar-top {
    margin-top: -40px
}

.ar-card {
    padding: 40px
}

.ar-box-title {
    line-height: 48px;
    border-left: 10px solid #ffd400
}

.ar-text-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 48px;
    padding-left: 16px;
    border-left: 10px solid #ffd400
}

.ar-text-sub-title {
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 48px;
    padding-left: 16px;
    border-left: 10px solid #ffd400
}

.ar-bullet-decimal {
    list-style: decimal
}

.ar-bullet-circle {
    list-style: circle
}

.ar-profile-img {
    height: 48px;
    width: 48px;
    border-radius: 25px
}

.ar-profile-name {
    color: #222;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    vertical-align: middle;
    margin-left: 24px;
    font-style: italic
}

.ar-pull-right {
    text-align: right
}

.ar-share-img {
    height: 38px;
    width: 38px;
    cursor: pointer
}

.ar-text-content {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px
}

.ar-sub-title {
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    margin-left: 16px
}

.ar-content-img {
    width: 100%
}

.ar-text-credit {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    letter-spacing: 0
}

    .ar-text-credit a {
        color: #f76f00;
        cursor: pointer
    }

        .ar-text-credit a:hover, .ar-text-credit a:focus {
            color: #f76f00
        }

.ar-tag {
    color: #5a5a5a;
    font-family: "Thongterm-Bold";
    font-size: 16px;
    font-weight: bold
}

.ar-tag-name {
    color: #545454;
    font-family: "Thongterm Roman";
    font-size: 14px
}

.ar-tag-footer {
    height: 34px;
    border: 1px solid #e8e8e8;
    color: #545454;
    font-family: "Thongterm-Roman";
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer
}

.ar-display-table {
    display: table
}

.ar-display-table-cell {
    display: table-cell;
    vertical-align: middle
}

.ar-box-back {
    width: 96px;
    cursor: pointer
}

.ar-text-back {
    color: #5a5a5a;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    padding-left: 17px
}

.ar-text-content2 {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 24px;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left
}

.ar-content2 {
    padding: 40px 65px
}

.pt-content-footer {
    margin-top: 40px
}

.pt-content-footer2 {
    margin-top: 80px
}

.footer-content-card {
    min-height: 428px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05)
}

.footer-content-all {
    color: #f76f00 !important;
    font-family: "Thongterm-Roman";
    font-size: 14px;
    font-weight: normal
}

.footer-content-card-content {
    min-height: 508px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    border-top: 7px solid #ffd400
}

.footer-content-card-content-f {
    max-height: 508px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
    border-top: 7px solid #ffd400
}

.footer-content-type {
    color: #5a5a5a;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 16px;
    font-weight: bold;
    padding: 16px 16px 8px 16px;
    text-align: left
}

.footer-content-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 18px;
    font-weight: bold;
    height: 60px;
    padding: 0 16px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left
}

.footer-content-name {
    padding: 45px 16px 9px 16px;
    color: #000;
    font-family: Thongterm-Roman;
    font-size: 14px;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left
}

.footer-content-div-read {
    padding: 9px 16px
}

.footer-content-read {
    color: #5a5a5a;
    font-family: Thongterm-Roman;
    font-size: 14px
}

.img-content-footer {
    width: 100%
}

.mt-footer {
    margin-bottom: 40px
}

.ar-footer-center {
    text-align: unset
}

.mt-ar-text1 {
    margin-top: 24px
}

.footer-content-card .text-title, .footer-content-card-f .text-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 16px 16px 8px 16px;
    white-space: break-spaces;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left
}

.footer-content-card .text-detail, .footer-content-card-f .text-detail {
    color: #5a5a5a;
    height: 58px;
    font-size: 16px;
    letter-spacing: 0;
    padding: 0 16px 16px 16px;
    overflow: hidden;
    white-space: break-spaces;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left
}

@media(max-width: 768px) {
    .footer-content-card-content-f {
        max-height: 350px;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,.05);
        border-top: 7px solid #ffd400
    }

    .footer-content-name {
        padding: 0 16px;
        color: #000;
        font-family: Thongterm-Roman;
        font-size: 14px;
        white-space: break-spaces;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-align: left
    }

    .bg-hg-card {
        background: unset
    }

    .hg-height-top {
        height: unset
    }

    .hg-title-article {
        width: 100%;
        height: unset;
        margin-top: unset;
        font-size: 26px;
        letter-spacing: 0;
        line-height: 38px
    }

    .footer-content-card .text-title, .footer-content-card-f .text-title {
        font-size: 18px
    }

    .ar-text-title {
        font-size: 26px
    }

    .ar-card {
        padding: 24px 16px
    }

    .ar-top {
        margin-top: unset
    }

    .pt-content-footer {
        margin-top: 16px
    }

    .pt-content-footer2 {
        margin-top: 32px
    }

    .mt-footer {
        margin-bottom: 16px
    }

    .ar-header-img {
        height: 360px;
        width: 100%;
        object-fit: cover
    }

    .ar-footer-center {
        text-align: center
    }

    .mt-24px-xs {
        margin-top: 24px
    }

    .mt-ar-text1 {
        margin-top: 16px
    }

    .ar-text-title {
        color: #222;
        font-family: "Krungsri-Condensed-Bold";
        font-size: 26px;
        font-weight: bold;
        line-height: 48px;
        padding-left: 8px;
        margin-left: unset;
        border-left: 10px solid #ffd400
    }
}


/* mobile */
@media only screen and (max-width: 767px) {
    .hwcCustomization .modal {
        padding: 0 !important;
    }

        .hwcCustomization .modal .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

    .hwcCustomization .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .hwcCustomization .modal .modal-body {
        overflow-y: auto;
    }

    .vertical-center {
        padding: 40% 20px 0px 20px;
    }
}

/* tablet-pc */
@media only screen and (min-width: 768px) {
    .hwcCustomization .modal-content {
        height: 320px;
        width: 570px;
        border-radius: 3px;
        background-color: #FFFFFF;
        box-shadow: 1px 2px 20px 0 rgba(35,19,18,0.05);
    }

    .hwcCustomization .modal-body {
        padding: 0px 50px 0px 50px;
    }
}

/*custom plearn header*/

.plearn .justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.plearn .align-middle {
    vertical-align: middle !important;
}

.plearn .row-header {
    display: flex;
    flex-wrap: wrap;
}

.plearn .zonemainmenu .menuitem-top a {
    color: #222;
    text-decoration: none;
}
   

.plearn .zonefootertop a {
    /* color: #222; */
    text-decoration: none;
}

.plearn .mg-rm {
    margin-right: unset;
    margin-left: unset
}

.plearn .pd-rl-16px {
    padding-right: 16px;
    padding-left: 16px
}

/*end custom plearn header*/
/* #region custom plearn search */
.plearn-search {
    height: 75px !important;
    width: auto !important;
}

.hwcCustomization .input-group .form-control.search-input {
    height: 44px;
    border-radius: 3px 0 0 3px;
    padding-left: 18px;
    padding-top: 8px;
    padding-bottom: 7px;
    border: solid #e8e8e8 1px;
    box-shadow: none;
    font-weight: bold;
}

.hwcCustomization .input-group .input-group-append .btnYellowForSearch {
    background: none;
    border-radius: 0 3px 3px 0;
    background: #ffd400 !important;
    width: 52px !important;
    height: 44px;
    min-width: auto;
}

.hwcCustomization .btnYellowForSearch {
    cursor: pointer;
    background: url("../../CustomizationFullPhase/images/btnSearch.png") no-repeat 0px center !important;
    /*font-size: 22pt;*/
    color: #3c3a3a;
    border-radius: 10px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari and Chrome */
    border: none;
    width: 240px !important;
    height: 40px;
}

    .hwcCustomization .btnYellowForSearch:Hover {
        cursor: pointer;
        background: url("../../CustomizationFullPhase/images/btnSearch.png") no-repeat 0px center !important;
        /*font-size: 22pt;*/
        color: #3c3a3a;
        border-radius: 10px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
        -moz-border-radius: 10px; /* Firefox */
        -webkit-border-radius: 10px; /* Safari and Chrome */
        border: none;
        width: 240px !important;
        height: 40px;
    }

.input-group {
    margin-top: 16px;
    margin-bottom: 16px;
}

.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}
    /* #endregion custom plearn search */

 body 
{
    background-color: #fff !important
}

.mt-30 {
    margin-top: 30px !important
}

.word-break {
    word-break: break-word
}

.ss-img {
    height: 75px
}

.hide-mobile {
    display: inherit
}

.ui-autocomplete {
    position: absolute;
    cursor: default;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 30px
}

.hwcCustomization .bg-bm-main {
    background: none repeat scroll 0 0 #ffda00;
    border: 10px solid #f6f6f6;
    color: #554242;
    font-size: 22px;
    padding: 30px
}

    .hwcCustomization .bg-bm-main:hover {
        background: none repeat scroll 0 0 #fedd50;
        border: 10px solid #f6f6f6;
        color: #554242;
        font-size: 22px;
        padding: 30px;
        text-decoration: none
    }

    .hwcCustomization .bg-bm-main:focus {
        background: none repeat scroll 0 0 #ffda00;
        border: 10px solid #f6f6f6;
        color: #554242;
        font-size: 22px;
        padding: 30px;
        text-decoration: none
    }

.hwcCustomization .bg-bm-main1 {
    background: none repeat scroll 0 0 #ffda00;
    border: 3px solid #f6f6f6;
    color: #554242;
    font-size: 14px;
    padding: 5px
}

    .hwcCustomization .bg-bm-main1:hover {
        background: none repeat scroll 0 0 #fedd50;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

    .hwcCustomization .bg-bm-main1:focus {
        background: none repeat scroll 0 0 #ffda00;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

.hwcCustomization .bg-bm-main2 {
    background: none repeat scroll 0 0 #ece9e9;
    border: 3px solid #f6f6f6;
    color: #554242;
    font-size: 14px;
    padding: 5px
}

    .hwcCustomization .bg-bm-main2:hover {
        background: none repeat scroll 0 0 #fedd50;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

    .hwcCustomization .bg-bm-main2:focus {
        background: none repeat scroll 0 0 #ffda00;
        border: 3px solid #f6f6f6;
        color: #554242;
        font-size: 14px;
        padding: 5px;
        text-decoration: none
    }

.hwcCustomization a.bg-bm-wlink {
    color: #554242;
    text-decoration: none
}

    .hwcCustomization a.bg-bm-wlink:hover {
        color: #554242;
        text-decoration: none
    }

.hwcCustomization .height60pxForSearch {
    height: 60px
}

.hwcCustomization .txtSearchWidth {
    width: 94%
}

.hwcCustomization .myBox {
    width: auto
}

.control-label {
    width: 0
}

@media screen and (max-width: 320px) {
    .width80per {
        width: 100% !important
    }
}

@media screen and (max-width: 640px) {
    .width30per {
        width: 100% !important
    }
}

@media screen and (max-width: 767px) {
    .m-ml-0 {
        margin-left: 0 !important
    }

    .m-plr-1 {
        padding-left: 1px !important;
        padding-right: 1px !important
    }

    .m-plr-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .hwcCustomization .height60pxForSearch {
        height: 110px !important
    }

    .hide-mobile {
        display: none
    }
}

@media screen and (max-width: 1029px) {
    .hwcCustomization .txtSearchWidth {
        width: 90%
    }
}

@media screen and (max-width: 529px) {
    .hwcCustomization .txtSearchWidth {
        width: 80%
    }
}

@media(max-device-width: 767px) and (min-device-width:320px) {
    .control-label {
        width: 0
    }
}

.hwcCustomization .txtSearch {
    font-size: 48px;
    height: 72px;
    line-height: normal !important;
    border: none
}

    .hwcCustomization .txtSearch:focus {
        border: none
    }

::placeholder {
    color: #d9d9db
}

.search-container {
    margin-top: 40px
}

@media screen and (max-width: 576px) {
    .search-container {
        min-height: 224px
    }
}

@media screen and (min-width: 768px) {
    .search-container {
        min-height: 464px
    }
}

.hwcCustomization .input-group .form-control.search-input {
    height: 44px;
    border-radius: 3px 0 0 3px;
    padding-left: 18px;
    padding-top: 8px;
    padding-bottom: 7px;
    border: solid #e8e8e8 1px;
    box-shadow: none;
    font-weight: bold
}

    .hwcCustomization .input-group .form-control.search-input:focus {
        border-color: #c7c7c7
    }

    .hwcCustomization .input-group .form-control.search-input::-webkit-input-placeholder {
        font-weight: 400 !important
    }

.hwcCustomization .input-group .input-group-append .btnYellowForSearch {
    background: none;
    border-radius: 0 3px 3px 0;
    background: #ffd400 !important;
    width: 52px !important;
    height: 44px;
    min-width: auto
}

    .hwcCustomization .input-group .input-group-append .btnYellowForSearch:focus {
        outline: none
    }

.hwcCustomization .myContent .wrapper .waterMarkNoBor.hwcBar {
    border-bottom: solid 1px #f3f3f3;
    margin-bottom: 8px
}

.hwcCustomization .myBox .myContent span.header-font {
    color: #545454;
    font-size: 14px
}

@media screen and (max-width: 640px) {
    .hwcCustomization .wrapper table {
        width: 100%
    }
}

.result-store .result-item:not(:first-child) {
    margin-top: 40px
}

.result-store .result-item {
    word-break: break-all
}

    .result-store .result-item a {
        text-decoration: none
    }

    .result-store .result-item .result-item-title {
        font-size: 24px;
        line-height: 36px;
        font-weight: normal;
        color: #222
    }

        .result-store .result-item .result-item-title .hwcCustomization_a {
            color: #222;
            font-weight: normal;
            font-family: "Krungsri-Condensed-Bold"
        }

    .result-store .result-item .result-item-content, .result-store .result-item .result-item-link a {
        font-size: 16px;
        font-weight: normal
    }

        .result-store .result-item .result-item-link a:hover {
            color: #de6400
        }

    .result-store .result-item .result-item-content {
        color: #5a5a5a
    }

    .result-store .result-item .result-item-link a {
        color: #f76f00;
        word-wrap: break-word
    }

    .result-store .result-item .result-item-sublink {
        margin-right: 16px;
        font-size: 14px;
        border: solid 1px #e8e8e8;
        border-radius: 4px;
        padding: 4px 8px;
        float: left;
        margin-top: 5px
    }

        .result-store .result-item .result-item-sublink:hover {
            background-color: #ffd400;
            border-color: transparent
        }

    .result-store .result-item .nonhover:hover {
        background-color: unset;
        border: solid 1px #e8e8e8
    }

.result-pagination-store {
    margin-bottom: 40px
}

    .result-pagination-store .result-page {
        width: 24px;
        display: inline-block
    }

    .result-pagination-store a {
        text-decoration: none !important
    }

    .result-pagination-store .result-current-page {
        width: 24px;
        display: inline-block;
        background-color: #ffd400;
        border-radius: 24px;
        line-height: 24px
    }

.predictiveSearchHolder {
    margin-top: -12px
}

    .predictiveSearchHolder .predictiveSearchResults {
        background-color: white;
        border-radius: 4px;
        box-shadow: rgba(35,19,18,.2) 1px 2px 4px
    }

        .predictiveSearchHolder .predictiveSearchResults span {
            padding: 4px 16px;
            display: block
        }

            .predictiveSearchHolder .predictiveSearchResults span:first-child {
                padding-top: 12px
            }

            .predictiveSearchHolder .predictiveSearchResults span:last-child {
                padding-bottom: 12px
            }

            .predictiveSearchHolder .predictiveSearchResults span:hover {
                background-color: #f3f3f3;
                cursor: pointer
            }

@media screen and (max-width: 767px) {
    .hwcCustomization .result-store .result-item table {
        margin-left: 0
    }

        .hwcCustomization .result-store .result-item table > tbody > tr > td {
            padding: 10px 0 !important
        }

    .result-store .result-item .result-item-sublink {
        margin-right: 8px;
        margin-bottom: 8px;
        float: left
    }
}

 .search-container {
    margin-top: 40px
}

@media screen and (max-width: 576px) {
     .search-container {
        min-height: 224px !important;
    }
}

@media screen and (min-width: 768px) {
     .search-container {
        min-height: 464px !important;
    }
}

/*#region Plearn article */
.ar-header-img {
    width: 100%;
}

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

.ar-pd-rm {
    display: flex;
    justify-content: center;
    padding-right: unset;
    padding-left: unset;
}

.ar-card {
    padding: 40px;
    background-color: #fff;
    max-width: 950px;
}

.ar-mg-rm {
    margin-right: unset;
    margin-left: unset;
}

.ar-text-title {
    color: #222;
    font-family: "Krungsri-Condensed-Bold";
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 48px;
    padding-left: 16px;
    border-left: 10px solid #ffd400;
}

.ar-profile-img {
    height: 48px;
    width: 48px;
    border-radius: 25px;
}

.ar-profile-name {
    color: #222;
    font-family: "Thongterm-Roman";
    font-size: 16px;
    vertical-align: middle;
    margin-left: 24px;
    font-style: italic;
}

.ar-pull-right {
    text-align: right;
}

.box-add-line.add-line {
    position: relative;
    color: #fff;
    background: #4cb234;
    padding: 0 16px;
    border-radius: 15px;
    margin-left: auto;
    cursor: pointer;
    margin-top: 3px;
    float: right !important;
    font-size: 14px;
    font-family: 'Krungsri-Condensed-Medium';
    margin-left: 8px;
    line-height: 28px;
}

.ar-flex-container {
    display: flex;
    justify-content: space-between;
}

.ar-profile {
    flex: 1 1 50%;
}

.ar-pull-right.ar-pull-share {
    flex: 1 1 50%;
    text-align: right;
    justify-content: end;
}

.ar-social-container {
    display: flex;
    width: 100%;
}



@media (max-width: 768px) {
    .ar-card {
        padding: 24px 16px;
    }

    .ar-flex-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .ar-profile {
        flex: 1 1 100%;
    }

    .ar-pull-right.ar-pull-share {
        flex: 1 1 100%;
        text-align: unset;
    }

    .ar-social {
        flex: 1 1 50%;
    }
}
/* #endregion*/