.show-pad {
    display: none !important;
}

.show-sm {
    display: none !important;
}

.show-xs {
    display: none !important;
}

.text-center {
    text-align: center;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.container.lg-fix {
    max-width: 1464px;
    width: calc(100% - 436px);
    margin: 0 auto;
    position: relative;
}

.container {
    max-width: 1464px;
    width: calc(100% - 200px);
    margin: 0 auto;
    position: relative;
}

.container-sm {
    max-width: 776px;
    width: calc(100% - 200px);
    margin: 0 auto;
    position: relative;
}

.form-note {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.1em;
    margin-bottom: 28px;
}

.radio-btn-row {
    display: flex;
    margin: 0 -4px 12px -4px;
}

.radio-btn {
    display: block;
    width: 100%;
    padding: 0 4px;

}

.radio-btn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-btn .tag-mark {
    display: block;
    font-size: 16px;
    line-height: 48px;
    color: #6F788B;
    font-weight: 400;
    border-radius: 24px;
    cursor: pointer;
    text-align: center;
    background-color: #F2F4F7;
}

.radio-btn:hover .tag-mark {
    color: #fff;
    background-color: #31E4CF;
}

.radio-btn input:checked~.tag-mark {
    color: #fff;
    background-color: #04BFB4;
}

.radio-btn input:disabled~.tag-mark {
    color: #A1A9B4;
    background-color: #F2F4F7;
}

.form-label {
    color: #4D5262;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 8px;
}

.input-group {
    position: relative;
    margin-bottom: 12px;
}

.font-weight-700 {
    font-weight: 700;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.yuan {
    color: #111;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    display: inline-block;
    position: absolute;
    right: 24px;
    top: 14px;
}

::placeholder {
    color: #6F788B;
}

.form-input {
    width: 100%;
    color: #111;
    font-size: 16px;
    font-weight: 400;
    line-height: 46px;
    padding: 0 24px;
    border: none;
    background-color: #F2F4F7;
    border-radius: 24px;
     font-family: 'Chivo Mono', 'JhengHei', sans-serif;
    border: 1px solid #F2F4F7;
}

.form-input.fix {
    padding-right: 45px;
}

.form-input:disabled {
    cursor: default;
    pointer-events: none;
    color: #A1A9B4;
}

.form-input:focus {
    outline: none;
}

.form-input.error {
    border: 1px solid #FF5A50;
}

.error-msg {
    display: block;
    color: #FF5A50;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

select.form-input {
    width: 100%;
    appearance: none;
    background-image: url(../images/select.svg);
    background-repeat: no-repeat;
    background-position: center right 24px;
    background-size: 24px;
    padding-right: 48px;
     font-family: 'Chivo Mono', 'JhengHei', sans-serif;
}

.form-input[type="date"]::after {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('../images/date.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    position: absolute;
    right: 24px;
    top: 12px;
}

::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.select-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/select.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    position: absolute;
    right: 24px;
    top: 12px;
}

.btn-green {
     font-family: 'Chivo Mono', 'JhengHei', sans-serif;
    justify-content: center;
    display: inline-flex;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.12em;
    border-radius: 40px;
    padding: 12px 34px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 3;
    text-wrap: nowrap;
    outline: none;
    border: none;
    cursor: pointer;
}

.btn-green:disabled {
    pointer-events: none;
    touch-action: none;
    color: #A1A9B4;
}

.btn-green:disabled:after {
    background-color: #EFF3F7;
}

.btn-green::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #029093;
    z-index: -2;
}

.btn-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #06ADAD;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.btn-green:hover::before {
    width: 100%;
}

.btn-green span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/arrow-next.svg);
    background-repeat: no-repeat;
    background-size: 24px;
}

.btn-green span.fix {
    background-image: url(../images/arrow-dw-w.svg);
    background-size: 20px;
    background-position: center center;
}

.btn-green.active span.fix {
    background-image: url(../images/arrow-dw-w-1.svg);
}

.btn-orange {
     font-family: 'Chivo Mono', 'JhengHei', sans-serif;
    justify-content: center;
    display: inline-flex;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.12em;
    border-radius: 40px;
    padding: 12px 36px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 3;
    text-wrap: nowrap;
}

.btn-orange::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FF5A50;
    z-index: -2;
}

.btn-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #F1253E;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.btn-orange:hover::before {
    width: 100%;
}

.btn-orange span,.btn-orange i {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/chat.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    margin-left: 4px;
}

.btn-white {
     font-family: 'Chivo Mono', 'JhengHei', sans-serif;
    justify-content: center;
    display: inline-flex;
    color: #06ADAD;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.12em;
    border-radius: 40px;
    padding: 12px 36px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 3;
    text-wrap: nowrap;
    outline: none;
    border: none;
    cursor: pointer;
}

.btn-white::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -2;
}

.btn-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #9DA8B6;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.btn-white:hover::before {
    width: 100%;
}

.btn-white:hover {
    color: #fff;
}

.btn-white span,.btn-white i {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/edit.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    margin-left: 4px;
}

.btn-white:hover span,.btn-white:hover i {
    background-image: url(../images/edit-1.svg);
}

.btn-white span.fix {
    background-image: url(../images/arrow-left.svg);
}

.btn-white:hover span.fix {
    background-image: url(../images/arrow-left-1.svg);
}

.btn-link {
    justify-content: center;
    display: inline-flex;
    color: #06ADAD;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.12em;
    padding: 16px 36px;
    text-decoration: none;
    text-wrap: nowrap;
    outline: none;
    border: none;
    cursor: pointer;
}

button.btn-link {
    padding: 0 36px;
    line-height: 48px;
     font-family: 'Chivo Mono', 'JhengHei', sans-serif;
    background-color: transparent;
    border-radius: 24px;
}

.btn-link span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-image: url(../images/arrow-left.svg);
    transform: translateY(-1px);
}

.btn-link:hover {
    color: #029093;
}

.btn-link:hover span {
    background-image: url(../images/arrow-left-2.svg);
}

.btn-link span.fix {
    background-image: url(../images/arrow-add.svg);
}

.btn-link:hover span.fix {
    background-image: url(../images/arrow-add-2.svg);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.h1 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.08em;
}

.h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.h6 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.12em;
}

.p1 {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.13em;
}

.green-0 {
    color: #F2F4F7 !important;
}

.green-100 {
    color: #89FFEA !important;
}

.green-200 {
    color: #31E4CF !important;
}

.green-300 {
    color: #04BFB4 !important;
}

.green-400 {
    color: #06ADAD !important;
}

.green-500 {
    color: #029093 !important;
}

.green-600 {
    color: #015F6C !important;
}

.green-700 {
    color: #084D56 !important;
}

.blue-gray-100 {
    color: #E4E9F0 !important;
}

.blue-gray-200 {
    color: #9DA8B6 !important;
}

.blue-gray-500 {
    color: #4B5B69 !important;
}

.blue-gray-700 {
    color: #232F47 !important;
}

.gray-100 {
    color: #F8FBFD !important;
}

.gray-200 {
    color: #F2F5F9 !important;
}

.gray-300 {
    color: #D6DDE8 !important;
}

.gray-400 {
    color: #BDC4CB !important;
}

.gray-500 {
    color: #A1A9B4 !important;
}

.gray-600 {
    color: #6F788B !important;
}

.gray-700 {
    color: #4D5262 !important;
}

.gray-800 {
    color: #313639 !important;
}

.gray-900 {
    color: #111 !important;
}

.white {
    color: #fff !important;
}

.orange-200 {
    color: #FF736A !important;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    padding: 0 12px;
    margin-bottom: 24px;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.3%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.34%;
}

.col-8 {
    width: 66.7%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.34%;
}

.col-11 {
    width: 91.67%;
}

.col-12 {
    width: 100%;
}

.w-100 {
    width: 100%;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 12px !important;
}

.mb-2 {
    margin-bottom: 16px !important;
}

.mb-3 {
    margin-bottom: 24px !important;
}

.mb-4 {
    margin-bottom: 32px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 12px !important;
}

.mt-2 {
    margin-top: 16px !important;
}

.mt-3 {
    margin-top: 24px !important;
}

.mt-4 {
    margin-top: 32px !important;
}

.mt-5 {
    margin-top: 100px !important;
}

@media (max-width:1440px) {

    .container,
    .container.lg-fix {
        max-width: 1176px;
        width: calc(100% - 264px);
        margin: 0 auto;
    }

}

@media (max-width:1024px) {

    .btn-orange,
    .btn-white,
    .btn-green {
        padding: 8px 36px;
    }

    button.btn-link {
        padding: 0 36px;
        line-height: 40px;
    }

    .container,
    .container.lg-fix {
        max-width: 863px;
        width: calc(100% - 160px);
        margin: 0 auto;
    }

    .container-sm {
        max-width: 776px;
        width: calc(100% - 160px);
        margin: 0 auto;
    }

    .mb-block {
        width: 100% !important;
    }

    .mb-50 {
        width: 50% !important;
    }

    .row {
        margin: 0 -8px;
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        padding: 0 8px;
        margin-bottom: 16px;
    }

    .md-col-6 {
        width: 50%;
        padding: 0 8px;
        margin-bottom: 16px;
    }

    .h1 {
        font-size: 42px;
    }

    .h2 {
        font-size: 40px;
    }

    .h5 {
        font-size: 18px;
    }

    .h6 {
        font-size: 15px;
    }

    .p1 {
        font-size: 16px;
    }

    .show-pad {
        display: block !important;
    }

    .hide-pad {
        display: none !important;
    }

}

@media (max-width:768px) {
    .form-note {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .radio-btn-row {
        margin: 0 -4px 8px -4px;
    }

    .input-group {
        margin-bottom: 8px;
    }

    .form-label {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .yuan {
        font-size: 14px;
        right: 14px;
        top: 11px;
    }

    .form-input {
        font-size: 14px;
        line-height: 38px;
        padding: 0 12px;
        border: 1px solid #F2F4F7;
    }

    select.form-input {
        background-position: center right 14px;
        padding-right: 38px;
    }

    select.form-input {
        width: 100%;
        appearance: none;
        background-image: url(../images/select.svg);
        background-repeat: no-repeat;
        background-position: center right 24px;
        background-size: 24px;
        padding-right: 48px;
    }

    .form-input[type="date"] {
        min-width: calc(100% - 16px);
        height: 40px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: calc(100% - 110px);
        white-space: nowrap;
    }

    .form-input[type="date"]::after {
        right: 14px;
        top: 8px;
    }

    .radio-btn .tag-mark {
        font-size: 14px;
        line-height: 40px;
    }

    .container,
    .container.lg-fix {
        max-width: 638px;
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    .container-sm {
        width: calc(100% - 60px);
    }

    .sm-block {
        width: 100% !important;
    }

    .sm-50 {
        width: 50% !important;
    }

    .sm-mb-1 {
        margin-bottom: 12px !important;
    }

    .hide-sm {
        display: none !important;
    }

    .show-sm {
        display: block !important;
    }

    .h1 {
        font-size: 36px;
    }

    .h2 {
        font-size: 32px;
    }

    .h5 {
        font-size: 16px;
    }

    .h6 {
        font-size: 14px;
    }

    .p1 {
        font-size: 15px;
    }

    .btn-orange,
    .btn-white,
    .btn-green {
        padding: 8px 24px;
    }

}

@media (max-width:540px) {
    .xsm-block {
        width: 100% !important;
    }
}

@media (max-width:430px) {
    .hide-xs {
        display: none !important;
    }

    .show-xs {
        display: block !important;
    }

    .xs-block {
        width: 100% !important;
    }

    .xs-50 {
        width: 50% !important;
    }

    .xs-mt-0 {
        margin-top: 0 !important;
    }

    .xs-mt-1 {
        margin-top: 4px !important;
    }
    
}