.navbar {
    padding: 0;
    display: block
}

header .navbar {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fff
}

[class*=" bg-pfx"] header .navbar,
header .navbar.pure {
    background: 0 0
}

header .navbar.side-nav-pl {
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%)
}

header .navbar .header-container {
    width: 100%;
    height: 80px;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important
}

header .navbar.side-nav-pl .header-container {
    height: 80px
}

.navbar .header-top {
    font-size: 1.2rem;
    color: #f3f3f3;
    background: #0091ea !important;
    justify-content: left
}

.navbar .header-top .container {
    height: 40px
}

.navbar .header-main,
.navbar .header-menu {
    position: relative;
    font-size: 1.6rem;
    background: #fff !important;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%)
}

.navbar .header-main {
    z-index: 1033
}

.navbar .header-menu {
    border-top: 1px solid #f0f0f0
}

.navbar.side-nav-pl .banner-inner>.navbar-brand-name {
    font-size: 1.8rem;
    font-weight: 500
}

.navbar .button-collapse-wrap,
.navbar.side-nav-pl .banner-inner>.navbar-brand,
.navbar.side-nav-pl .banner-inner>.navbar-brand-text {
    display: none !important
}

.navbar-brand {
    padding: 0
}

.navbar-brand img {
    width: 50px;
    border-radius: .25rem
}

.navbar-brand-text .sub-text {
    font-size: 1.2rem;
    font-weight: 400
}

.navbar .header-menu .container {
    height: 48px
}

.navbar li {
    position: relative
}

.navbar .header-menu ul {
    width: 90%;
    height: 100%
}

.navbar .navbar-toggler-inner .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.navbar .navbar-nav ul:not(.dropdown-menu) {
    position: relative;
    display: flex;
    height: 100%;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important
}

.navbar .navbar-nav li.nav-item {
    position: relative;
    display: inline-flex;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important
}

.navbar .navbar-nav li.nav-item a {
    overflow: initial
}

.navbar .header-menu li.nav-item {
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    background: #fff
}

.navbar .header-menu li.nav-item a {
    width: 100%;
    padding: 1rem 0
}

.navbar .header-menu li.border-hover {
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent
}

.navbar .header-menu li.border-hover.current,
.navbar .header-menu li.border-hover:hover {
    border-bottom: 3px solid #0091ea;
    background: #f3fbff;
    font-weight: 600
}

.navbar .header-menu li.nav-item:hover a {
    color: #0091ea
}

.navbar .header-main li.nav-item.current a,
.navbar .header-menu li.nav-item.current a {
    color: #0091ea
}

.navbar .header-main li.list-inline-item.divider::before,
.navbar .header-menu li.nav-item:not(:first-child)::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 15px);
    left: 0;
    width: 1px;
    height: 30px;
    background: #c4c4c454
}

.navbar .header-menu li.item a,
.navbar .header-menu li.item button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    padding: .5rem 0;
    font-weight: 500;
    text-decoration: none
}

.navbar .header-menu li.item a::before,
.navbar .header-menu li.item button::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-color .3s ease-out;
    background: rgba(255, 255, 255, 0);
    z-index: 1
}

.navbar-toggler-inner {
    display: none
}

.navbar.scrolling-navbar {
    padding: 0 !important
}

.sp-nav {
    display: none
}

.menu-list ul.main>li>.inner {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    padding: 1.4rem;
    cursor: pointer;
    height: auto;
    border-bottom: 1px solid #eaeaea
}

.menu-list .menu-sub-list {
    border: 0
}

.nav-list a {
    color: #212529
}

.menu-list .menu-icons.qbc-icons {
    font-size: 2.4rem;
    margin-right: .55rem
}

.menu-list ul>li a {
    color: #212529
}

.menu-list .menu-sub-list ul {
    background: #fff;
    overflow: hidden
}

.menu-list .menu-sub-list ul>li {
    padding: 1.4rem 1.6rem;
    cursor: pointer;
    border-bottom: 1px solid #eaeaea
}

.menu-list .menu-sub-list ul>li:last-child {
    border-bottom: 0
}

.menu-list ul>li.current,
.menu-list ul>li:hover {
    background: #e3e5e7
}

.menu-list .menu-sub-list ul>li img {
    width: 30px;
    vertical-align: middle;
    border-radius: 3px;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 3px #c5c5c5;
    -moz-box-shadow: 1px 1px 3px #c5c5c5;
    box-shadow: 1px 1px 3px #c5c5c5;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.navbar .dropdown-menu.navbar-nav {
    display: none
}

@media (max-width:767px) {

    .navbar .header-main,
    .navbar .header-menu {
        font-size: 1.4rem
    }

    .navbar .header-top .container {
        height: 30px
    }

    .navbar .header-main .container {
        height: 60px
    }

    .navbar .header-menu .container {
        height: 45px
    }

    header .navbar.has-scrolled {
        border-bottom: 1px solid #1919190a
    }

    header .navbar.side-nav-pl .header-container {
        height: 70px
    }

    .navbar .header-menu #spMenuList li.nav-item {
        height: auto
    }

    .navbar .dropdown-menu.navbar-nav.show {
        display: block
    }

    .navbar .dropdown-menu#spMenuList {
        margin-top: -48px
    }
}

@media (max-width:992px) {
    .navbar-brand img {
        width: 50px
    }

    .qbc-side-nav li.header .navbar-brand img {
        width: 60px
    }

    .navbar .header-menu {
        padding-left: 0;
        padding-right: 0
    }

    .navbar .header-menu .container {
        padding: 0
    }

    .navbar .header-menu ul {
        width: 100%
    }

    .navbar .header-menu li.item {
        padding: 0 1.5rem
    }

    .navbar-toggler {
        font-size: 2.8rem;
        padding: 0;
        padding-left: 6px;
        vertical-align: middle
    }

    .navbar-toggler-icon {
        width: auto;
        height: auto
    }

    .navbar-toggler-inner {
        display: flex
    }

    .md-nav {
        display: none
    }

    .sp-nav {
        display: flex
    }
}

@media (max-width:1024px) {
    .navbar li.toggler-item {
        display: none !important
    }
}

footer.page-footer {
    color: #212121
}

footer.page-footer.pure-footer {
    color: #fff;
    background-color: #00000033;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 5%), 0 -1px 3px 0 rgb(0 0 0 / 5%)
}

footer.page-footer.pure-footer .footer-wrap {
    background-color: transparent
}

footer.page-footer .footer-wrap {
    color: #fff;
    background-color: #65bcf2
}

footer.page-footer .waves-wrap svg.waves {
    height: 40px
}

footer.page-footer .waves-wrap {
    margin-bottom: -1px
}

footer.page-footer img.pfx-logo {
    width: 50px;
    border-radius: .25rem
}

footer.page-footer .footer-sitemap ul>li>a {
    font-size: 1.4rem;
    color: #212529;
    font-weight: 400
}

footer.page-footer .footer-sitemap ul>li>a:hover {
    text-decoration: underline
}

footer.page-footer .footer-contact {
    color: #fff;
    background-color: #65bcf2;
    padding-top: 4.8rem
}

footer.page-footer .footer-contact a {
    color: #fff;
    vertical-align: middle
}

footer.page-footer .footer-contact hr {
    border-top: 1px solid #cecece54;
    margin: 4.8rem 0
}

footer.page-footer .footer-contact h5 {
    font-size: 1.8rem
}

footer.page-footer .footer-contact .contact-wrap.main {
    margin-bottom: 4.8rem
}

footer.page-footer .footer-contact .contact-wrap .inner {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column
}

footer.page-footer .footer-contact .contact-wrap ul {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center
}

footer.page-footer .footer-contact .contact-wrap ul li {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    margin: 0
}

footer.page-footer .footer-contact .contact-wrap.others ul li {
    width: 25%;
    height: 100%
}

.contact-tel {
    font-size: 2.4rem;
    margin-bottom: .8rem
}

.contact-tel a {
    font-weight: 600
}

footer.page-footer .footer-contact .contact-wrap.others ul li .contact-tel:last-child {
    margin-bottom: 0
}

footer.page-footer .footer-contact .contact-wrap.main ul li:not(:first-child)::before {
    content: "";
    display: block;
    position: absolute;
    left: -4.8rem;
    width: 1px;
    height: 100%;
    background: #cecece54
}

@media (max-width:767px) {
    footer.page-footer .footer-contact .contact-wrap.main ul li:not(:first-child)::before {
        content: unset
    }

    footer.page-footer .footer-contact .contact-wrap.others ul li {
        width: 100%
    }
}

@media (min-width:767px) and (max-width:992px) {
    footer.page-footer .footer-contact .contact-wrap.main ul li:not(:first-child)::before {
        content: unset
    }

    footer.page-footer .footer-contact .contact-wrap.others ul li {
        width: 50%
    }
}

footer.page-footer .footer-copyright {
    font-size: 1rem;
    height: 30px;
    color: #fff;
    background-color: #65bcf2
}

.blue-border {
    border: 1px solid #0091ea
}

.blue-border.rounded table td {
    border-radius: .4rem !important
}

.title-border {
    position: relative;
    text-align: center;
    padding-bottom: 1rem
}

.title-border:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 15%;
    border: 0;
    height: 1.5px;
    background-image: linear-gradient(to right, rgb(0 0 0 / 0), #000, rgb(0 0 0 / 0));
    transform: translateX(-50%);
    animation: border_anim 3.5s linear forwards
}

@media (max-width:767px) {
    .title-border:before {
        width: 30%
    }
}

.border-dashed {
    border-style: dashed !important
}

@keyframes border_anim {
    0% {
        width: 3%
    }

    15% {
        width: 15%
    }
}

img.flag-thumbnail {
    display: inline-block;
    width: 4rem;
    padding: .1rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .4rem;
    max-width: 100%;
    height: auto
}

.avatar {
    height: 7rem;
    width: 7rem;
    min-width: 7rem;
    border-radius: 50%;
    padding: .2rem;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%), 0 1px 8px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%), 0 1px 8px 0 rgb(0 0 0 / 12%)
}

.avatar.sm {
    height: 6rem;
    width: 6rem;
    min-width: 6rem
}

.avatar.xsm {
    height: 5rem;
    width: 5rem;
    min-width: 5rem
}

.avatar.w5x {
    height: 5rem;
    width: 5rem;
    min-width: 5rem;
    padding: .1rem
}

.avatar.xs {
    height: 4rem;
    width: 4rem;
    min-width: 4rem;
    -webkit-box-shadow: 0 1px 5px 1px rgb(0 0 0 / 5%), 0 1px 5px 1px rgb(0 0 0 / 5%);
    box-shadow: 0 1px 5px 1px rgb(0 0 0 / 5%), 0 1px 5px 1px rgb(0 0 0 / 5%)
}

.avatar.w4x {
    position: relative;
    height: 4rem;
    width: 4rem;
    min-width: 4rem
}

.avatar img {
    width: 100%;
    height: 100%
}

.avatar img.flag {
    width: 4.5rem;
    height: auto;
    margin: 1.5rem auto;
    border-radius: .3rem !important
}

.avatar img.rounded-circle {
    margin: 0 auto;
    object-fit: cover
}

.avatar img.rounded-circle.object-fill {
    object-fit: fill
}

.avatar.w4x .avatar-ctry {
    position: absolute;
    bottom: -.3rem;
    right: -.8rem;
    font-size: 1.6rem;
    text-shadow: none;
    border-radius: 1.2rem;
    margin: auto;
    padding: 0 .35rem;
    width: 30px;
    height: 30px
}

.bank-image {
    height: 40px
}

.imageBox-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .9
}

.imageBox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2041;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0
}

.image-modal .modal-dialog .modal-content {
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none
}

.view.preview {
    cursor: pointer
}

.image-modal .modal-body button.close {
    opacity: 1;
    float: none;
    display: inline !important;
    background: #4c4c4c;
    border-radius: 10rem;
    padding: 1.5rem;
    color: #fff
}

img.invert70 {
    -webkit-filter: invert(100%);
    filter: invert(70%)
}

.view .mask-footer {
    position: absolute;
    color: #fff;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-attachment: fixed
}

.view .mask-footer.lighten-darken {
    background-color: #808185ad !important
}

.view.rounded-lg .mask-footer {
    border-bottom-left-radius: .48rem;
    border-bottom-right-radius: .48rem
}

@media (max-width:767px) {
    .avatar {
        height: 6rem;
        width: 6rem
    }
}

.required-mark {
    position: relative;
    padding-left: 20px
}

.required-mark::before {
    content: "※";
    display: block;
    position: absolute;
    top: 0;
    color: red;
    left: 0;
    z-index: 1
}

.qbc-form {
    position: relative;
    margin-top: 2.8rem
}

.qbc-form .input-group-append>.btn,
.qbc-form .qbc-select .btn.dropdown-toggle,
.qbc-form input {
    min-height: 55px;
    height: 55px !important
}

.qbc-form.lg .input-group-append>.btn,
.qbc-form.lg .qbc-select .btn.dropdown-toggle,
.qbc-form.lg input {
    min-height: 55px;
    height: 55px !important
}

.form-control.qbc-select.sm .btn.dropdown-toggle,
.qbc-form.sm .qbc-select .btn.dropdown-toggle,
.qbc-form.sm input {
    min-height: 45px;
    height: 45px !important
}

.qbc-form input.select-none.es-input {
    background: 0 0
}

.form-control.qbc-select.sm .btn.dropdown-toggle img.flag-thumbnail {
    width: 2.5rem
}

.form-control .dropdown-menu {
    width: 100%
}

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

.qbc-form input {
    background-color: #fff !important
}

.qbc-form input.form-control:disabled {
    background-color: #e9ecef !important
}

.qbc-form input.bg-gray {
    background: #f2f2f2 !important
}

.qbc-form.input-with-post-icon .form-control {
    padding-right: 4.32rem !important
}

.qbc-form.input-with-post-icon .input-prefix {
    right: 16px;
    left: initial
}

.qbc-form .input-prefix.active,
.qbc-form .qbc-moneyInput {
    color: #0091ea
}

.qbc-form .input-prefix {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: color .2s;
    transition: color .2s;
    color: rgba(0, 0, 0, .87);
    pointer-events: none
}

.qbc-form.form-row.mutil-input>.col,
.qbc-form.form-row.mutil-input>.col-6 {
    padding: 0
}

.qbc-form.form-row.mutil-input>.col-6:first-of-type,
.qbc-form.form-row.mutil-input>.col:first-of-type {
    padding-left: 5px
}

.qbc-form.form-row.mutil-input>.col-6:first-of-type input,
.qbc-form.form-row.mutil-input>.col:first-of-type input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px dashed #ced4da
}

.qbc-form.form-row.mutil-input>.col-6:last-of-type,
.qbc-form.form-row.mutil-input>.col:last-of-type {
    padding-right: 5px
}

.qbc-form.form-row.mutil-input>.col-6:last-of-type input,
.qbc-form.form-row.mutil-input>.col:last-of-type input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0
}

input.qbc-code {
    font-size: 1.8rem;
    color: #0091ea
}

input.qbc-moneyInput {
    font-size: 2.4rem;
    color: #0091ea
}

input.qbc-moneyInput:placeholder-shown {
    font-size: 1.6rem
}

.label-required:before {
    content: "※";
    color: red;
    font-size: 1.2rem
}

div.datepicker input~i.input-prefix {
    cursor: pointer;
    pointer-events: all
}

.picker .picker__frame {
    width: 35rem;
    max-width: 35rem
}

.qbc-daterangepicker input~i.input-prefix {
    position: absolute;
    right: 1.5rem;
    cursor: pointer;
    pointer-events: all
}

.daterangepicker .ranges li.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #0091ea !important
}

.daterangepicker td.in-range:not(.active) {
    background-color: #e1f3ff !important
}

.daterangepicker.show-calendar {
    box-shadow: 0 .46875rem 2.1875rem rgb(4 9 20 / 3%), 0 .9375rem 1.40625rem rgb(4 9 20 / 3%), 0 .25rem .53125rem rgb(4 9 20 / 5%), 0 .125rem .1875rem rgb(4 9 20 / 3%)
}

.datepicker table tr td span.active.active {
    background-color: #0091ea;
    border-color: #0091ea
}

@media (max-width:767px) {
    .qbc-daterangepicker input~i.input-prefix {
        right: 1.2rem;
        bottom: 9px
    }
}

@media screen and (max-width:320px) {
    .picker .picker__frame {
        width: 30rem;
        max-width: 30rem
    }
}

div.picker.datepicker .picker__box .picker__table {
    width: 95%;
    margin-left: auto;
    margin-right: auto
}

.picker__box .picker__table .picker__day--infocus {
    width: 36px;
    height: 36px;
    line-height: 1
}

.picker__box .picker__table .picker--focused,
.picker__box .picker__table .picker__day--selected,
.picker__box .picker__table .picker__day--selected:hover {
    transform: none;
    -webkit-transform: none
}

div.picker.datepicker .picker__box .picker__header.datepicker__box .picker__nav .picker__nav--prev {
    margin-right: 1rem
}

div.picker.datepicker .picker__box .picker__header.datepicker__box .picker__select-year {
    border-radius: .4rem
}

div.picker.datepicker .picker__box .picker__table .picker__year.picker__year--infocus {
    width: 90%;
    margin: auto
}

div.picker.datepicker .picker__box div.picker__footer button {
    border-radius: .4rem;
    color: #2979ff;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 0
}

.input-group.phone-input-group .qbc-select {
    width: 250px !important
}

.input-group.input-button-group .btn {
    margin: 0;
    min-width: 200px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.input-group.input-button-group button.btn-search {
    min-width: 100px !important
}

.input-group.input-button-group .input-group-append button {
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem
}

.input-group.input-money-group>input.form-control {
    height: 55px
}

.input-group.input-money-group button.dropdown-toggle {
    min-width: 200px !important
}

.input-group.button-group>.btn {
    border: 1px solid #ced4da;
    border-radius: .4rem;
    box-shadow: none
}

.input-group.button-group>.btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group.select-button-group>.input-group-append>.btn,
.input-group.select-button-group>.input-group-prepend>.btn {
    color: #212121;
    font-size: 1.4rem;
    margin: 0;
    min-width: 200px;
    height: 55px;
    border: 1px solid #ced4da;
    box-shadow: none
}

.input-group.select-button-group>.input-group-append>.btn {
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem
}

.input-group.select-button-group>.input-group-prepend>.btn {
    border-top-left-radius: .4rem;
    border-bottom-left-radius: .4rem
}

.input-group.select-button-group>.input-group-append>.btn:hover,
.input-group.select-button-group>.input-group-prepend>.btn:hover {
    background: #eaeaea
}

.input-group.select-button-group>.input-group-append>.btn.btn-primary {
    border: 0
}

.input-group.select-button-group .qbc-icons {
    font-size: 1.6rem
}

.continue-input-group input[type=number],
.continue-input-group input[type=password] {
    min-height: 50px !important;
    height: 50px !important;
    max-width: 65px;
    text-align: center !important;
    border-radius: .4rem !important;
    margin-right: 2rem;
    font-weight: 600;
    font-size: 1.8rem
}

.continue-input-group>.form-control:last-child {
    margin-right: 0 !important
}

.continue-input-group input[type=number]:focus,
.continue-input-group input[type=password]:focus {
    -webkit-box-shadow: 0 0 3px .1rem rgb(0 145 234 / 25%) !important;
    box-shadow: 0 0 3px .1rem rgb(0 158 255 / 25%) !important
}

.continue-input-group .invalid-message {
    display: none !important
}

@media (max-width:767px) {

    .continue-input-group input[type=number],
    .continue-input-group input[type=password] {
        margin-right: 1rem
    }
}

input.form-control.qbc-moneyInput {
    padding-top: .8rem
}

.qbc-form.required.invalid {
    background: #ffeaec;
    border: 1px solid #dc3545;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

.form-control.valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 1.2rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .3rem) center;
    background-size: calc(.75em + .6rem) calc(.75em + .6rem)
}

.form-control.invalid {
    border: 1px solid #dc3545 !important;
    padding-right: calc(1.5em + 1.2rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .3rem) center;
    background-size: calc(.75em + .6rem) calc(.75em + .6rem);
    z-index: 3
}

textarea.form-control.invalid {
    padding-right: calc(1.5em + 1.2rem);
    background-position: top calc(.375em + .3rem) right calc(.375em + .3rem)
}

li.list-checkbox .form-check-input[type=checkbox]+label {
    min-height: 2.5rem;
    height: unset
}

.custom-control-input.invalid~.custom-control-label,
.form-check-input.invalid~.form-check-label,
.form-check-input.invalid~.form-check-label a {
    color: #dc3545 !important
}

.custom-control-input.invalid+label:before,
.form-check-input[type=checkbox].invalid+label:after,
.form-check-input[type=checkbox].invalid+label:before {
    border-color: #dc3545 !important
}

.custom-control-input.invalid~.custom-control-label,
.form-check-input.invalid~.form-check-label {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

.form-control.qbc-select.invalid+.dropdown-toggle {
    border-color: #dc3545
}

.form-check-input:invalid,
.form-control.password-input-with-eyes.invalid,
.form-control.picker__input.invalid,
.form-control.qbc-select.invalid {
    background-image: none;
    padding-right: 0
}

.form-control.invalid~.invalid-message,
.form-control.valid~.valid-message {
    display: block
}

.valid-message {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .2rem .6rem;
    margin-top: .1rem;
    font-size: 1.2rem;
    font-size: 80%;
    line-height: 1.5;
    color: #fff;
    background-color: #28a745;
    border-radius: .4rem
}

.invalid-message {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .2rem .6rem;
    margin-top: .1rem;
    font-size: 1.2rem;
    font-size: 80%;
    line-height: 1.5;
    color: #fff;
    background-color: #dc3545;
    border-radius: .4rem;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@media (max-width:767px) {
    .input-group.phone-input-group .qbc-select {
        width: 150px !important
    }

    .input-group.input-button-group .btn,
    .input-group.input-money-group button.dropdown-toggle,
    .input-group.select-button-group>.input-group-append>.btn,
    .input-group.select-button-group>.input-group-prepend>.btn {
        min-width: 150px !important
    }

    .form-check {
        padding-left: 0
    }
}

input.password-input-with-eyes {
    padding-right: 4.32rem
}

input.password-input-with-eyes~.qbc-icons {
    position: absolute;
    right: 2rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: color .2s;
    transition: color .2s;
    font-size: 2rem;
    text-align: center;
    cursor: pointer
}

input.password-input-with-eyes~.qbc-icons.qbc-visible {
    color: #0091ea
}

input::-ms-clear,
input::-ms-reveal {
    display: none
}

.strength-container {
    display: none
}

.pwd-indicator {
    height: 7px;
    margin: 10px 0;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.pwd-indicator span {
    position: relative;
    height: 100%;
    width: 100%;
    background: #d3d3d3;
    border-radius: 5px;
    margin-right: 3px
}

.pwd-indicator span:last-child {
    margin: 0
}

.pwd-indicator span.excellent:before,
.pwd-indicator span.medium:before,
.pwd-indicator span.strong:before,
.pwd-indicator span.weak:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px
}

.pwd-indicator span.weak:before {
    background-color: #ff4757
}

.pwd-indicator span.medium:before {
    background-color: orange
}

.pwd-indicator span.strong:before {
    background-color: #23ad5c
}

.pwd-indicator span.excellent:before {
    background-color: #23ad5c
}

.strength-container .strength-text {
    font-size: 14px;
    font-weight: 500;
    text-align: right
}

.strength-container .strength-text .strength {
    padding-left: .3em
}

.strength-container .strength-text .strength.weak {
    color: #ff4757
}

.strength-container .strength-text .strength.medium {
    color: orange
}

.strength-container .strength-text .strength.strong {
    color: #23ad5c
}

.strength-container .strength-text .strength.excellent {
    color: #23ad5c
}

.qbc-select .btn.dropdown-toggle {
    font-size: 1.4rem;
    min-height: 55px;
    padding: 1rem;
    padding-top: 1.1rem;
    margin: 0;
    border-radius: .4rem;
    border: 1px solid #ced4da;
    outline: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.qbc-select.invalid~.btn.dropdown-toggle {
    border: 1px solid #dc3545
}

.md-form .qbc-select .btn.dropdown-toggle {
    border: 0;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    background: #fff !important;
    padding-left: 0
}

.qbc-form .qbc-select img.flag-thumbnail {
    width: 3.2rem
}

.qbc-select.pure+.btn.dropdown-toggle {
    border: 0;
    background: #fff !important;
    border-bottom: 1px solid #ced4da !important;
    border-radius: 0 !important
}

.qbc-select.small+.btn.dropdown-toggle {
    min-height: 40px !important
}

#floatButtonSection .fixed-action-btn {
    right: 150px;
    overflow: unset
}

#floatButtonSection .fixed-action-btn.qbc-float-comment {
    width: 180px;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important
}

#floatButtonSection .qbc-float-comment .btn-floating.btn-lg {
    width: 80px;
    height: 80px
}

.fixed-action-btn.qbc-float-comment.active {
    height: 110px
}

.qbc-float-comment .btn-floating.btn-lg i {
    font-size: 3.4rem;
    line-height: 80px
}

.qbc-float-comment .btn-floating.btn-lg~.tooltip.bs-tooltip-top {
    top: -30px !important;
    left: auto !important
}

.fixed-action-btn.qbc-float-btn ul {
    bottom: 0;
    margin-bottom: 0
}

.fixed-action-btn.qbc-float-btn ul li {
    margin-bottom: 0
}

.btn-outline-blue.light {
    border-width: 1px !important
}

.btn-outline-blue.border-light {
    border: 2px solid #2196f3b0 !important
}

.btn-outline-blue:not([disabled]):not(.disabled).active,
.btn-outline-blue:not([disabled]):not(.disabled):active,
.btn-outline-blue:not([disabled]):not(.disabled):focus,
.btn-outline-blue:not([disabled]):not(.disabled):hover {
    background-color: #0091ea !important;
    color: #fff !important;
    opacity: 100% !important
}

.btn-outline-blue:not([disabled]):not(.disabled).active i,
.btn-outline-blue:not([disabled]):not(.disabled).active i.i-light,
.btn-outline-blue:not([disabled]):not(.disabled):active i,
.btn-outline-blue:not([disabled]):not(.disabled):active i.i-light,
.btn-outline-blue:not([disabled]):not(.disabled):focus i,
.btn-outline-blue:not([disabled]):not(.disabled):focus i.i-light,
.btn-outline-blue:not([disabled]):not(.disabled):hover i,
.btn-outline-blue:not([disabled]):not(.disabled):hover i.i-light {
    color: #fff !important
}

.btn-outline-blue:not([disabled]):not(.disabled) i.i-light {
    color: #0091ea21 !important
}

.btn-outline-black.white,
.btn-outline-blue.white {
    background: #fff
}

.btn-outline-white.dark {
    background: #00000080 !important
}

.btn-outline-white.blue {
    background-color: #0091ea !important
}

.btn-outline-white.blue.active,
.btn-outline-white.blue:active,
.btn-outline-white.blue:active:focus,
.btn-outline-white.blue:focus,
.btn-outline-white.blue:hover {
    background-color: #1565c0 !important
}

.btn-link.blue-lighten-5 {
    background-color: #e3f2fd !important
}

.btn-link.blue-lighten-5:active,
.btn-link.blue-lighten-5:focus,
.btn-link.blue-lighten-5:hover {
    background-color: #bce3ff !important;
    text-decoration: none
}

@media (max-width:992px) {
    #floatButtonSection .fixed-action-btn {
        right: 0;
        bottom: 35px
    }

    #floatButtonSection .fixed-action-btn.qbc-float-comment {
        width: 120px
    }

    #floatButtonSection .qbc-float-comment .btn-floating.btn-lg {
        width: 60px;
        height: 60px
    }

    .fixed-action-btn.qbc-float-comment.active {
        height: 110px
    }

    .qbc-float-comment .btn-floating.btn-lg~.tooltip.bs-tooltip-top {
        font-size: 1.4rem;
        top: -15px !important
    }

    .qbc-float-comment .btn-floating.btn-lg i {
        font-size: 3rem;
        line-height: 60px
    }
}

.table-rounded {
    border: 1px solid #efefef;
    border-radius: .5rem
}

.table-rounded table tr td {
    border-radius: .5rem
}

.table.align-middle tr td,
.table.align-middle tr th {
    vertical-align: middle
}

.table-bordered td,
.table-bordered th {
    border: 1px solid #dee2e6 !important
}

table .th-sm {
    min-width: 6rem
}

.table-borderless tbody+tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
    border: 0 !important
}

.table-bordered thead.bold th {
    font-weight: 600
}

table.table-transaction {
    vertical-align: middle !important;
    margin-bottom: 0
}

table.table-transaction td,
table.table-transaction th {
    vertical-align: middle;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border: 1px solid #efefef
}

table.table-transaction td:first-of-type,
table.table-transaction th:first-of-type {
    border-left: 0;
    width: 33%;
    background: #00000008
}

table.table-transaction.bg-white td:first-of-type,
table.table-transaction.bg-white th:first-of-type {
    background: #fff
}

table.table-transaction td:last-of-type,
table.table-transaction th:last-of-type {
    border-right: 0
}

table.table-transaction tr:first-of-type td,
table.table-transaction tr:first-of-type th {
    border-top: 0
}

table.table-transaction tr:last-of-type td,
table.table-transaction tr:last-of-type th {
    border-bottom: 0
}

table.table-transaction tr.coupon .badge {
    font-size: 1.2rem
}

table.table-transaction tr.total td {
    font-weight: 600
}

table.table-transaction tr.total td:first-of-type {
    border-bottom-left-radius: .4rem
}

table.table-transaction tr.total td:last-of-type {
    font-size: 1.8rem;
    border-bottom-right-radius: .4rem
}

table.table-transaction.fz14 tr.total td:last-of-type {
    font-size: 1.6rem;
    border-bottom-right-radius: .4rem
}

.total-amount {
    font-weight: 600;
    font-size: 1.8rem;
    color: red
}

table.table-transaction.custom tr {
    height: 55px
}

table.table-history tbody tr {
    cursor: pointer
}

table.table-history.pointer-disabled tbody tr {
    cursor: default
}

table.table-history td {
    padding: 1.5rem 0
}

table.table-history td.select-icon {
    width: 6%
}

table.table-history td>img {
    margin: auto
}

table.table-history td>img.icon {
    margin: auto
}

table.table-history td>img.portrait {
    margin: auto
}

table.table-history td>.qbc-icons {
    font-size: 1.6rem
}

table.table-history td>.status {
    color: #fb3
}

table.table-history td>.amount {
    font-size: .9em
}

.table.fee-table tr th {
    font-weight: 700 !important
}

.table.fee-table tr td,
.table.fee-table tr th {
    vertical-align: middle;
    white-space: normal;
    min-width: 12rem
}

.table-card>.table-row {
    border-bottom: 1px solid #fff
}

img.transType-icon {
    width: 2.8rem
}

.table.table-remittance tr td:first-child {
    background-color: #fafafa;
    border-right: 1px solid #dee2e6
}

.table.table-remittance thead th {
    border-top: 1px solid #eaeef3 !important;
    border-bottom: 1px solid #eaeef3 !important
}

.table.table-bordered.bordered-bold td,
.table.table-bordered.bordered-bold th {
    border: 1px solid #cfd2d6 !important
}

.th-w10 {
    width: 10rem
}

.th-w15 {
    width: 15rem
}

.th-w20 {
    width: 20rem
}

table tbody td.select-cbx {
    position: relative
}

table tbody td.select-cbx:after,
table tbody td.select-cbx:before {
    display: block;
    position: absolute;
    left: 50%;
    margin-top: 0;
    width: 16px;
    height: 16px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    box-sizing: border-box
}

table tbody td.select-cbx:before {
    content: " ";
    margin-left: -6px;
    border: 1px solid #000;
    border-radius: 3px
}

table tr.selected td.select-cbx:before,
table tr.selected th.select-cbx:before {
    border: 1px solid #fff
}

table.dataTable tr.selected td.select-cbx:after,
table.dataTable tr.selected th.select-cbx:after {
    content: "✓";
    font-size: 20px;
    margin-top: -8px;
    margin-left: -6px;
    text-align: center;
    text-shadow: 1px 1px #b0bed9, -1px -1px #b0bed9, 1px -1px #b0bed9, -1px 1px #b0bed9
}

table th.country {
    width: 10rem !important
}

table th.beneficary {
    width: 15rem !important
}

table th.state {
    width: 8rem !important
}

table th.fee {
    width: 10rem !important
}

table.table-xs td,
table.table-xs th {
    padding-top: .2rem;
    padding-bottom: .2rem
}

table.dataTable {
    width: 100% !important;
    margin: 1rem auto !important;
    clear: both;
    border-collapse: separate;
    border-spacing: 0
}

.table.bt-0 tr:first-of-type td {
    border-top: 0
}

table.data-table tr td {
    vertical-align: middle;
    padding: .5rem
}

table.checkbox-table {
    margin-bottom: 0
}

table.table-fixed {
    table-layout: fixed
}

.checkbox-table tr {
    cursor: pointer
}

table.data-table tbody>tr {
    height: 50px
}

.checkbox-table.data-table tbody>tr {
    height: 40px
}

.data-table tbody>tr:hover {
    background: #e8edff !important
}

table.checkbox-table>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px #8e98be !important;
    color: #fff
}

table.checkbox-table>tbody>tr.selected .btn {
    color: #fff !important;
    border-color: #fff !important
}

table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_desc_disabled,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_desc_disabled {
    padding: 10px
}

table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before {
    right: 0
}

table.dataTable thead>tr>th.select-checkbox.sorting_asc:after,
table.dataTable thead>tr>th.select-checkbox.sorting_asc:before {
    content: none
}

div.dataTables_wrapper div.dataTables_paginate {
    margin-top: .8rem
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right !important
}

div.table-responsive>div.dataTables_wrapper>div.row {
    overflow-x: hidden
}

table.dataTable tbody td.select-checkbox:after,
table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody th.select-checkbox:after,
table.dataTable tbody th.select-checkbox:before {
    margin-top: 0;
    width: 16px;
    height: 16px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
    margin-top: -8px
}

.calendar-table {
    table-layout: fixed
}

.calendar-table tbody tr td.selected:not(.null),
.calendar-table tbody tr td:not(.null):hover {
    background-color: #f0f8ff;
    cursor: pointer
}

.calendar-table tbody tr td.null {
    cursor: default
}

table.calendar-table td,
table.calendar-table th {
    padding: .4rem .2rem
}

.calendar-table tr td,
.calendar-table tr th {
    width: 14.285714% !important;
    height: 56px
}

.calendar-table .text-value {
    font-size: 14px;
    font-weight: 500
}

.table.table-history #rewardContainer td:first-of-type {
    width: 6rem
}

.ctrl-btn:active,
.ctrl-btn:focus,
.ctrl-btn:hover {
    border: 1px solid #dee2e6 !important;
    background-color: #f0f8ff
}

.ctrl-btn.disabled {
    color: #c8cdd2 !important
}

@media (max-width:767px) {
    table.table-transaction.custom tr {
        height: 80px
    }

    table.table-history td:first-of-type {
        padding-left: .5rem;
        padding-right: .5rem
    }

    img.transType-icon {
        width: 2.5rem
    }

    .th-sm-w9 {
        width: 9rem !important
    }

    .calendar-table .text-value {
        font-size: 10px;
        letter-spacing: -.2px
    }
}

@media (max-width:1024px) {

    table.table-transaction td:first-of-type,
    table.table-transaction th:first-of-type {
        width: 45%
    }
}

.text-divider {
    position: relative
}

.text-divider .divider {
    flex: 1;
    border-bottom: 1px solid #dadada
}

.text-divider .text {
    font-size: 1.4rem;
    color: #4f4f4f !important;
    text-align: center;
    margin-left: 2rem;
    margin-right: 2rem
}

.qbc-divider-50 {
    margin: .5rem 0;
    width: 50%;
    border-top: 1px solid
}

.qbc-divider-50.blue,
hr.blue {
    border-top: 2px solid #0091ea
}

.qbc-divider-50.warning,
hr.warning {
    border-top: 2px solid #ffeeba
}

hr.bg-black-linear {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0))
}

hr.bg-brown-linear {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #795548, rgba(0, 0, 0, 0))
}

.text-off {
    color: red;
    font-size: 1.25rem;
    margin-right: .3rem
}

.text-history {
    display: inline;
    color: grey;
    margin-right: .3rem;
    text-decoration: line-through
}

.text-error {
    color: red;
    font-weight: 400
}

.pure-title {
    position: relative;
    padding-left: 1.2rem
}

.pure-title:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 1px;
    width: 4px;
    height: 100%;
    background: #0091ea;
    border-radius: 3px
}

.btn-flex-wrap {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.btn-flex-wrap.hidden {
    display: none
}

.btn-flex-wrap .btn {
    position: relative;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 380px;
    min-width: 140px;
    max-width: 100%;
    font-weight: 500;
    border-radius: .6rem
}

.btn-flex-wrap .btn.rounded-10em {
    border-radius: 10em
}

.btn-flex-wrap .btn.rounded-1 {
    border-radius: 1rem
}

.btn-flex-wrap .btn.disabled,
.btn:disabled {
    background: #919191 !important
}

.btn-flex-wrap .btn[class*=btn-outline-].disabled,
.btn[class*=btn-outline-]:disabled {
    background: #919191 !important;
    color: #fff !important;
    border-color: #fff !important
}

.btn.btn-sub {
    color: #fff;
    background-color: #6c63ff !important
}

.btn.btn-outline-sub {
    color: #6c63ff;
    border: 2px solid #6c63ff;
    background-color: #fff !important
}

.btn.btn-outline-sub:active,
.btn.btn-outline-sub:focus,
.btn.btn-outline-sub:hover {
    background-color: transparent !important
}

.btn-flex-wrap .btn.btn-login,
.btn-flex-wrap .btn.btn-register {
    color: #fff;
    max-width: 100%;
    margin-left: 2rem;
    margin-right: 2rem
}

.btn-flex-wrap .btn.btn-login>.qbc-icons,
.btn-flex-wrap .btn.btn-register>.qbc-icons {
    font-size: 2.4rem
}

.btn.btn-top {
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    font-size: 2rem;
    font-weight: 600;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-left: 0;
    margin-right: 0;
    height: 70px;
    width: 415px;
    border-radius: 10px !important;
    max-width: 100%
}

.btn.btn-top.blue-outline {
    background: #fff;
    color: #0091ea !important;
    border: 3px solid #0091ea !important
}

.btn.btn-top,
.btn.btn-top>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.btn.btn-outline-gray.light {
    border: 1px solid #e1e1e1 !important;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%)
}

.btn {
    line-height: normal !important;
    text-transform: none
}

.btn.btn-block {
    border-radius: .4rem
}

.btn.btn-qbc {
    position: relative
}

.btn.btn-qbc.head {
    padding: .8rem 2.8rem;
    font-size: 1.6rem
}

.btn.btn-qbc.main {
    min-width: 350px
}

.btn.btn-qbc.action {
    height: 55px
}

.btn.btn-outline-qbc {
    padding: .5rem 1.5rem;
    border-width: 1px !important
}

.btn.btn-outline-qbc:hover {
    color: #fff !important;
    background: #0091ea;
    background: -webkit-linear-gradient(right, #00b9ff 0, #0079c3 100%) !important;
    background: -moz-linear-gradient(top, #00b9ff 0, #0079c3 100%) !important;
    background: linear-gradient(to right, #00b9ff 0, #0079c3 100%) !important;
    background: linear-gradient(40deg, #00b9ff, #0079c3) !important;
    border-color: transparent !important
}

.btn.btn-sm.btn-outline-qbc {
    padding: .5rem 1.5rem;
    font-size: 1.2rem;
    line-height: 1.2
}

.btn.btn-outline-qbc.btn-coupon:hover {
    background: #fff !important;
    color: #ffc107 !important;
    border-color: transparent !important
}

.selected .btn.btn-outline-qbc.btn-coupon:hover {
    color: #0091ea !important
}

.btn-outline-gray {
    color: #858585 !important;
    background-color: transparent !important;
    border: 1px solid #bfbfbf !important
}

.btn.btn-coupon-select {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    width: 100%;
    min-height: 55px;
    font-size: 1.4rem;
    padding: 1rem;
    margin: 0;
    border: 0;
    border-radius: .5rem;
    background: #ffe1a4;
    box-shadow: none;
    -webkit-box-shadow: none
}

.btn.btn-coupon-select.selected {
    color: #fff;
    background: #0091ea !important
}

.btn.btn-coupon-select .qbc-arrow-down {
    text-shadow: 0 0 #000
}

.btn.btn-total {
    display: block;
    width: 100%;
    font-size: 1.6rem;
    margin: 3rem 0;
    margin-bottom: 1rem
}

a.btn-link {
    color: #0091ea !important;
    padding: .8rem 1rem
}

a.btn-link:hover {
    text-decoration: underline !important;
    background-color: rgba(18, 102, 241, .05) !important;
    outline: 0
}

a.btn-link.bg-none:hover {
    background-color: none !important
}

.position-icon {
    position: absolute;
    font-size: 2rem;
    margin: 0;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%)
}

.position-icon.fz-init {
    font-size: initial
}

.position-icon.top {
    top: 1rem;
    transform: none
}

.position-icon.right {
    right: 2rem;
    left: auto
}

.position-icon.left {
    left: 2rem;
    right: auto
}

input.invalid~.position-icon {
    display: none
}

.btn:not(:disabled):hover .position-icon.right.animated,
input:not(:disabled):hover~.position-icon.right.animated {
    right: calc(2rem - 5px)
}

.btn:not(:disabled):hover .position-icon.left.animated,
input:not(:disabled):hover~.position-icon.left.animated {
    left: calc(2rem - 5px)
}

@media (max-width:767px) {
    .btn.btn-qbc.head {
        font-size: 1.4rem;
        padding: .5rem 1.5rem;
        margin-top: .2rem;
        margin-bottom: .2rem
    }

    .btn.btn-qbc.main {
        min-width: 333px
    }

    .btn.btn-coupon-select>div.coupon-icon-wrap {
        padding: 1rem .5rem
    }

    .btn.btn-coupon-select .qbc-arrow-down {
        padding-right: .8rem
    }
}

.badge-notification {
    position: absolute;
    font-size: .96rem;
    margin-top: -.5rem;
    margin-left: -.8rem;
    padding: .52em .72em
}

.badge-dotto {
    position: absolute;
    right: 1rem;
    top: 1rem;
    padding: 5px
}

.badge-dotto:empty {
    display: block
}

.qbc-cart+.badge-notification {
    margin-left: -1.5rem
}

.badge.badge-qbc {
    padding: .4em .8em;
    font-weight: 400
}

.badge-lighten-dark {
    color: #fff !important;
    background-color: #5b5b5b !important
}

.badge-outline-primary {
    color: #0091ea !important;
    background-color: #fff !important;
    border: 1px solid #0091ea;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: .5rem;
    font-weight: 500
}

.badge-outline-gray {
    color: #4b4b4b !important;
    background-color: #fff !important;
    border: 1px solid #8c8c8c;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: .5rem;
    font-weight: 500
}

.badge.badge-pure {
    padding: .5rem;
    border-radius: .4rem;
    box-shadow: none
}

.badge.badge-light {
    color: #464646 !important;
    font-weight: 500 !important
}

.badge.badge-status {
    font-weight: 400;
    min-width: 62px;
    line-height: 1;
    padding: .5em .7em;
    border-radius: .4rem
}

.navgar .navbar-nav {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important
}

.navbar-menu .navbar-item {
    position: relative;
    margin: 5px 0
}

.navbar-menu .navbar-link {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    vertical-align: bottom;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    font-size: .89rem;
    padding: 1rem 1.5rem;
    height: 3rem;
    color: unset;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.navbar-menu .navbar-link.right-arrow::after {
    font-family: qbc-icons;
    content: "\e959";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out
}

.navbar-menu .navbar-link.right-arrow:not(.collapsed):after {
    font-family: qbc-icons;
    content: "\e957";
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.navbar-menu a {
    color: #4b5563
}

.navbar-link:active,
.navbar-link:focus,
.navbar-link:hover {
    color: #1266f1;
    background-color: rgba(18, 102, 241, .05);
    outline: 0
}

.navbar-link .qbc-icons {
    color: #9fa6b2
}

.dropdown-menu {
    border: 0;
    box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
    -webkit-box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0 3px 8px rgb(0 0 0 / 25%)
}

.dropdown-toggle.lang-switch-menu {
    cursor: pointer
}

.dropdown-toggle::after {
    content: none
}

.dropdown-toggle.lang-switch-menu+.dropdown-menu,
.dropdown-toggle.top-bar-menu+.dropdown-menu {
    top: 60px;
    right: 0;
    left: auto
}

.dropdown-toggle.lang-switch-menu .lang-text,
.dropdown-toggle.lang-switch-menu+.dropdown-menu .lang-text {
    vertical-align: middle;
    padding: 0 .5rem
}

.dropdown-toggle.lang-switch-menu .lang-icon,
.dropdown-toggle.lang-switch-menu+.dropdown-menu .lang-icon {
    width: 28px;
    vertical-align: middle;
    border-radius: .2rem;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 3px #c5c5c5;
    -moz-box-shadow: 1px 1px 3px #c5c5c5;
    box-shadow: 1px 1px 3px #c5c5c5;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.side-nav-pl {
    padding-left: 320px
}

.side-nav2.qbc-side-nav {
    width: 320px;
    background-color: #fff;
    color: #212529 !important;
    -webkit-box-shadow: 1px 0 3px 0 rgb(0 0 0 / 5%), 1px 0 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 1px 0 3px 0 rgb(0 0 0 / 5%), 1px 0 3px 0 rgb(0 0 0 / 5%)
}

.qbc-side-nav .fix-brand {
    padding: .4rem 1.4rem
}

.qbc-side-nav li.header {
    width: 100%;
    padding: 1.4rem 1.6rem;
    min-height: 80px;
    background-image: url(../img/payforex-mv-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.qbc-side-nav li.header.corp {
    background-position: center;
    background-image: url(../img/pfx-top-bg02-d55f27e3a64da0b9fc5c99df89a524ff.jpg)
}

.qbc-side-nav li.header.corp2 {
    background-image: url(../img/pfx-top-bg03-56594c875f107739b57532a4489cfe39.jpg)
}

.qbc-side-nav li.header.corp3 {
    background-image: url(../img/pfx-top-bg05-e84992c351c50f702c3d661b10211243.jpg)
}

.qbc-side-nav li.header.corp4 {
    background-image: url(../img/pfx-top-bg06-b21c007c0ff682dbcea732d3ca4f6ed8.jpg)
}

.qbc-side-nav.side li.header {
    min-height: 90px
}

.qbc-side-nav .close {
    width: 3rem;
    height: 3rem
}

.nav-list,
.side-nav2 .nav-list {
    list-style: none;
    padding: 1.5rem;
    font-size: 1.6rem
}

.side-nav2 .collapsible>li.active div.collapsible-body {
    opacity: .85;
    box-shadow: rgba(0, 0, 0, .12) 5px 1px 8px 0 inset !important
}

.side-nav2 .collapsible a {
    font-size: 1.6rem
}

.side-nav2 .collapsible>li a.collapsible-header.active {
    background-color: rgba(18, 102, 241, .05) !important;
    font-weight: 500
}

.side-nav2 .collapsible ul.inner-list>li a.collapsible-header.active {
    color: #0091ea;
    font-weight: 400;
    background-color: rgb(94 140 216 / 5%) !important
}

.side-nav2 .collapsible ul.inner-list>li a.collapsible-header.active .menu-icons.qbc-icons,
.side-nav2 .collapsible>li a.collapsible-header.active .menu-icons.qbc-icons {
    font-weight: 500
}

.nav-list li>a.nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    padding: 1.4rem;
    height: auto;
    color: unset;
    border-radius: 5px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.nav-list .qbc-icons {
    font-size: 1.6rem
}

.nav-list .menu-icons.qbc-icons {
    font-size: 2.4rem;
    margin-right: 1rem
}

.nav-list .collapsible-body li,
.nav-list.collapsible>li {
    border-radius: 0 !important;
    border-bottom: 1px solid #cadae866 !important
}

.nav-list .collapsible-body li>.nav-link {
    font-size: 1.4rem;
    padding: 1.2rem 1.4rem;
    padding-left: 2.2rem
}

.nav-list .collapsible-body li>.nav-link .menu-icons.qbc-icons {
    font-size: 2rem
}

.nav-list ul>li:last-child {
    border-bottom: 0 !important
}

.nav-list ul>li img {
    width: 30px;
    vertical-align: middle;
    border-radius: 3px;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 3px #c5c5c5;
    -moz-box-shadow: 1px 1px 3px #c5c5c5;
    box-shadow: 1px 1px 3px #c5c5c5;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
    background-color: rgba(18, 102, 241, .05) !important;
    outline: 0
}

@media (max-width:1366px) {
    .side-nav-pl {
        padding-left: 0
    }

    .navbar .button-collapse-wrap,
    .navbar.side-nav-pl .banner-inner>.navbar-brand,
    .navbar.side-nav-pl .banner-inner>.navbar-brand-text {
        display: block !important
    }

    .navbar.side-nav-pl .banner-inner>.navbar-brand-name {
        display: none
    }
}

@media (max-width:767px) {
    .qbc-side-nav li.header {
        min-height: 70px
    }

    .qbc-side-nav.side li.header {
        min-height: 80px
    }

    .navbar .banner-inner>.navbar-brand-text,
    .navbar.side-nav-pl .banner-inner>.navbar-brand-text {
        display: none !important
    }

    .dropdown-toggle.lang-switch-menu+.dropdown-menu,
    .dropdown-toggle.top-bar-menu+.dropdown-menu {
        left: auto;
        right: 0
    }
}

.modal .modal-header {
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.modal .modal-pure .modal-header {
    border-bottom: 0;
    padding-bottom: 0
}

.modal .close.abs-close,
.modal .modal-header .close {
    float: none;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    z-index: 1051
}

.modal .close.abs-close.t2p5 {
    top: 2.5rem
}

.modal .modal-header.p-0 .close {
    top: .8rem
}

.modal .modal-body .close {
    display: block !important
}

.modal .modal-content.sp-content {
    overflow: hidden;
    max-height: 80vh;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem
}

.modal .modal-content,
.modal-dialog-scrollable .modal-content {
    max-height: 92vh;
    overflow: hidden
}

.modal .modal-content .modal-body,
.modal .modal-content.sp-content .modal-body {
    overflow-y: auto
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
}

.modal-fullscreen .modal-header {
    border-radius: 0
}

.modal-fullscreen .modal-body {
    overflow-y: auto
}

.modal-fullscreen .modal-footer {
    border-radius: 0
}

.modal .modal-full-height {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 400px;
    height: auto;
    min-height: 100%;
    margin: 0
}

.modal .modal-full-height .modal-content {
    max-height: 100vh
}

.modal .modal-dialog.modal-bottom {
    bottom: 0
}

.modal .modal-full-height.modal-bottom,
.modal .modal-full-height.modal-top {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto
}

.modal .modal-full-height.modal-bottom {
    top: auto;
    min-height: 0
}

.modal-backdrop {
    width: 100%
}

.modal-dialog-scrollable {
    max-height: calc(100% - 20rem)
}

@media (max-width:767px) {
    .modal .modal-full-height.modal-bottom .pure-title {
        margin-left: 1.6rem;
        margin-right: 1.6rem
    }

    .modal-dialog-scrollable {
        max-height: calc(100% - 10rem)
    }
}

ul.list-group-light li {
    background: 0 0;
    border: 0
}

ul.list-style-disc {
    list-style: disc !important
}

ul.list-style-inside {
    list-style: inside !important
}

.caption-calculator {
    position: relative
}

.caption-calculator .calc-tree {
    width: 100%;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.3rem;
    border-color: #c5c5c5
}

.calc-tree>li {
    display: block;
    position: relative;
    border-color: #c5c5c5;
    padding-top: 10px
}

.calc-tree>li:first-child {
    padding-top: 10px;
    margin-top: 0
}

.calc-tree>li:before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 2;
    border: 5px solid;
    border-color: inherit;
    outline: 0;
    margin-left: -27px;
    margin-top: 3px
}

.calc-tree>li:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    left: -23px;
    top: 0;
    border: 0 solid;
    border-color: inherit;
    outline: 0;
    background-color: #c5c5c5;
    background-size: 200% 200%;
    background-position: 0 0
}

.calc-tree li:last-child {
    padding-bottom: 5px !important;
    margin-bottom: 0
}

.calc-tree>li:first-child:after {
    height: calc(100% - 8px);
    top: auto;
    bottom: 0
}

.calc-tree>li:last-child:after {
    height: calc(100% - 7px)
}

.calc-tree li>.calc-item {
    display: inline-block
}

.calc-tree li>.calc-item.item-left,
.calc-tree li>.calc-item.item-left.bn-bd,
.calc-tree li>.calc-item.item-left.ja-jp {
    width: 20%;
    color: #919191
}

.calc-tree li>.calc-item.item-left.en-us,
.calc-tree li>.calc-item.item-left.fil-ph {
    width: 22%
}

.calc-tree li>.calc-item.item-left.th-th,
.calc-tree li>.calc-item.item-left.vi-vn {
    width: 25%
}

.calc-tree li>.calc-item.item-right {
    display: inline;
    position: absolute
}

.calc-item.item-right .label-status {
    vertical-align: text-bottom;
    margin-left: 1em
}

@media (max-width:767px) {
    .caption-calculator .calc-tree {
        padding-left: 2rem
    }

    .calc-tree>li:before {
        border: 6px solid;
        margin-left: -20px;
        color: #c5c5c5
    }

    .calc-tree>li:after {
        left: -15px
    }

    .calc-tree>li:last-child {
        padding-bottom: 10px !important
    }

    .calc-tree>li:last-child:after {
        height: calc(100% - 8px)
    }

    .calc-tree li>.calc-item.item-left,
    .calc-tree li>.calc-item.item-left.bn-bd,
    .calc-tree li>.calc-item.item-left.ja-jp {
        width: 28%
    }

    .calc-tree li>.calc-item.item-left.en-us,
    .calc-tree li>.calc-item.item-left.fil-ph,
    .calc-tree li>.calc-item.item-left.mn-mn {
        width: 22%
    }

    .calc-tree li>.calc-item.item-left.th-th,
    .calc-tree li>.calc-item.item-left.vi-vn {
        width: 25%
    }

    .calc-tree li>.calc-item.item-right {
        display: inline
    }
}

.card {
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%)
}

.card.shadow {
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%) !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%) !important
}

.card.block-card {
    border: 1px solid #dee2e6;
    -webkit-box-shadow: none;
    box-shadow: none
}

.card.login-card {
    position: relative;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

.card.tab-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.card.tab-card:before {
    content: '';
    position: absolute;
    top: -6px;
    width: 100%;
    height: 8px;
    background-color: #fff;
    z-index: 1
}

.card.block-card>.pure-title {
    margin: 1.6rem
}

.rd-bg-pfx .card.login-card,
.rd-biz-bg .card.login-card {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

.card.normal,
.card.rounded-3,
.service-section .card,
.top-view .card {
    -webkit-box-shadow: 0 2px 5px 0 rgb(4 4 4 / 10%), 0 2px 5px 0 rgb(4 4 4 / 10%);
    box-shadow: 0 2px 5px 0 rgb(4 4 4 / 10%), 0 2px 5px 0 rgb(4 4 4 / 10%)
}

.card.rounded-3 .card-img,
.card.rounded-3 .card-img-top {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem
}

.card-step-shape {
    position: absolute;
    top: -1px;
    left: 0;
    height: 5rem;
    width: 5rem;
    border-radius: 2.5rem 0 3rem 0;
    background-color: #65bcf2;
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center
}

.card-step-shape>span {
    border-bottom: 1px solid #fff;
    line-height: initial;
    font-size: 1.6rem
}

.card.select-card {
    position: relative;
    border: 1px solid #dee2e6;
    cursor: pointer
}

.card.select-card:before {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: #919191;
    font-size: 2.2rem;
    text-shadow: none
}

.card.select-card.selected {
    border: 2px solid #0091ea;
    color: #0091ea
}

.card.select-card.lt-select {
    border: 2px solid #dee2e6
}

.card.select-card.lt-select.selected {
    border: 2px solid #0091ea;
    color: initial;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important
}

.card.select-card.lt-select:before {
    content: "";
    font-size: 3rem;
    top: 1.5rem;
    left: 1.5rem
}

.card.select-card.lt-select.selected:before {
    content: "\e93a"
}

.card.select-card.selected:before {
    color: #0091ea
}

.notice-card {
    padding: 1rem .5rem
}

.notice-card .notice-title {
    margin-bottom: 1.2rem
}

.alert-warning .notice-card .alert-title,
.alert-warning .notice-card .alert-title:before {
    color: #f55a00
}

.notice-card .notice-content {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    min-height: 50px
}

.notice-card .action-wrap {
    min-width: 150px;
    margin-top: .8rem
}

.notice-card .notice-content .action-wrap {
    text-align: right;
    margin-left: 1.6rem;
    margin-top: 0
}

.notice-card .action-wrap .btn {
    margin: 0
}

.notice-card .notice-content .action-wrap .btn {
    width: 100%
}

.notice-card .action-btn {
    width: 1
}

.card.message-card {
    border: 1px solid #dee2e6 !important
}

.message-truncate {
    width: 100%;
    max-height: 6rem;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.login-card .card-up {
    color: #fff;
    height: 120px;
    overflow: hidden;
    border-top-left-radius: .4rem
}

.card .btn-sns {
    min-width: 90px;
    margin-top: 0;
    margin-bottom: 0;
    padding: .8rem 2rem
}

.card .btn-sns img {
    height: 24px;
    display: inline-block
}

.card img.app {
    width: 145px;
    border-radius: .8rem
}

.mask.logout-mask {
    cursor: pointer
}

.mask.logout-mask:hover {
    background-color: rgb(177 126 126 / 73%)
}

.mask.logout-mask:after {
    position: abosulte;
    font-family: qbc-icons;
    content: "\e959";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out
}

.card.card-cascade .view.view-cascade.gradient-card-header {
    position: relative;
    padding: 2rem .5rem;
    -webkit-box-shadow: 0 1px 10px 0 rgb(0 0 0 / 18%), 0 2px 10px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 18%), 0 2px 10px 0 rgb(0 0 0 / 15%)
}

.card.card-cascade .view.view-cascade.cascade-header {
    position: relative;
    padding: 2rem .5rem;
    color: #212121;
    text-align: center;
    box-shadow: none;
    -webkit-box-shadow: none
}

.card.card-cascade .view.view-cascade.cascade-header.bg-primary {
    color: #fff
}

.card.card-cascade.narrower .view.view-cascade {
    margin-top: -3rem
}

.card.card-cascade.qbc-title-card .view.view-cascade.gradient-card-header {
    padding: 1.5rem
}

.card .view.view-cascade.gradient-card-header.flat-header {
    color: #212529;
    border: 1px solid #dee2e6;
    border-bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important
}

.card.narrower .view.view-cascade.gradient-card-header.flat-header,
.card.wider .view.view-cascade.gradient-card-header.flat-header {
    border-radius: .4rem !important
}

.card .view.view-cascade.gradient-card-header .left-top-title {
    position: absolute;
    left: 3%;
    top: 10%
}

.card.total-card .card-body,
.card.transaction-card .card-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.card .card-body.qbc-card-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.card.flat-card,
.card.pure-card {
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none
}

.card.flat-card>pure-title,
.card.pure-card>pure-title {
    margin-left: 1.6rem !important;
    margin-top: 1.6rem !important;
    margin-bottom: 1.6rem !important
}

.card.flat-card .flat-header~.card-body {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.card.flat-card .card-body {
    border: 1px solid #dee2e6;
    border-radius: .4rem
}

.card.result-card.bee-card .card-icon {
    position: absolute;
    top: -3rem;
    left: 3rem
}

.card.result-card.bee-card .card-icon.modal-icon {
    top: 1.2rem;
    left: 3rem
}

.card.bee-card .card-header,
.card.result-card.bee-card .view.view-cascade.gradient-card-header {
    background: url(../img/bee-bg-0dbbe606f4ac1d92b383f23c2ae180d8.png);
    background-repeat: no-repeat;
    background-position: right bottom 100%;
    overflow: initial
}

.card.bee-card.primary .view.view-cascade.card-header,
.card.result-card.primary .view.view-cascade.gradient-card-header {
    background-color: #0091ea !important;
    color: #fff
}

.card.result-card .view.view-cascade.gradient-card-header .text-fail {
    color: #795548
}

.card.bee-card .card-header-result-title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 1.8rem;
    margin-bottom: 1.8rem
}

.card.bee-card .card-body.content-section,
.card.bee-card .card-header-result-title.done,
.card.bee-card.done .card-body.content-section .error-wrap,
.card.bee-card.done .card-header .loading-section,
.card.bee-card.done .card-header-result-title.loading,
.card.bee-card.error .card-header .loading-section {
    display: none
}

.card.bee-card .card-header-result-title.loading,
.card.bee-card.done .card-body.content-section,
.card.bee-card.done .card-body.content-section .done-wrap,
.card.bee-card.done .card-header-result-title.done,
.card.bee-card.error .card-body.content-section,
.card.bee-card.error .card-body.content-section .done-wrap,
.card.bee-card.error .card-body.content-section .error-wrap {
    display: block
}

.card.result-card .view.view-cascade.gradient-card-header #errorStatus p.text-content,
.card.result-card .view.view-cascade.gradient-card-header #manualStatus p.text-content {
    background: #ffeaea;
    color: #795548
}

.card.bee-card.success .view.view-cascade.card-header {
    color: #fff;
    background-color: #28a745 !important
}

.card.bee-card .view.view-cascade.card-header.bg-white {
    color: #212529;
    background-color: #fff !important
}

.card.block-card .view.view-cascade.gradient-card-header.flat-header {
    border: 0
}

.card.result-card.success .view.view-cascade.gradient-card-header {
    background-color: #28a745 !important;
    color: #fff;
    background: url(../img/bee-bg-0dbbe606f4ac1d92b383f23c2ae180d8.png);
    background-repeat: no-repeat;
    background-position: right bottom 100%;
    overflow: initial
}

.card.bee-card .qbc-error,
.card.bee-card .qbc-info,
.card.bee-card .qbc-success,
.card.result-card .qbc-error,
.card.result-card .qbc-info,
.card.result-card .qbc-success {
    text-shadow: none
}

.card.bee-card .qbc-error,
.card.bee-card .qbc-success,
.card.result-card .qbc-error,
.card.result-card .qbc-success {
    display: none
}

.card.bee-card.fail .qbc-info,
.card.bee-card.fail .qbc-success,
.card.result-card.fail .qbc-info,
.card.result-card.fail .qbc-success {
    display: none
}

.card.bee-card.fail .qbc-error,
.card.result-card.fail .qbc-error {
    display: block
}

.card.bee-card.success .qbc-error,
.card.bee-card.success .qbc-info,
.card.result-card.success .qbc-error,
.card.result-card.success .qbc-info {
    display: none
}

.card.bee-card.success .qbc-success,
.card.result-card.success .qbc-success {
    display: block
}

.card.result-card .loading-section {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    height: 100%
}

.card.result-card .loading-section .loading-icon {
    position: relative;
    padding: .3rem;
    cursor: default;
    pointer-events: none
}

.card.result-card .loading-section .loading-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.card.result-card .loading-section .loading-icon .spinner.spinner2,
.card.result-card .loading-section .qbc-icons .spinner.spinner2 {
    top: -1rem;
    left: -1rem;
    width: 10rem;
    height: 10rem;
    border-top-color: #0091ea;
    border-bottom-color: #0091ea
}

.card.result-card .loading-section .loading-icon .spinner.spinner3,
.card.result-card .loading-section .qbc-icons .spinner.spinner3 {
    top: -1rem;
    left: -1rem;
    width: 10rem;
    height: 10rem;
    border-color: #0091ea
}

.card.result-card.fail .loading-section .loading-icon img {
    -webkit-filter: grayscale(100%) opacity(.7);
    -moz-filter: grayscale(100%) opacity(.7);
    -o-filter: grayscale(100%) opacity(.7);
    filter: grayscale(100%) opacity(.7);
    filter: gray
}

.card.result-card.fail .loading-section .loading-icon,
.card.result-card.fail .loading-section .qbc-icons {
    box-shadow: none !important;
    -webkit-box-shadow: none !important
}

.card.result-card.fail .loading-section .loading-icon .spinner.spinner2,
.card.result-card.fail .loading-section .loading-icon .spinner.spinner3,
.card.result-card.fail .loading-section .qbc-icons .spinner.spinner2,
.card.result-card.fail .loading-section .qbc-icons .spinner.spinner3 {
    animation: auto;
    border-color: #848484
}

.card .card-footer {
    border-top: 1px solid #dee2e6
}

.card.operate-card .view.view-cascade {
    position: relative;
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
    margin-bottom: 2.6rem !important
}

.card.operate-card .operate-switch {
    position: absolute;
    font-size: 1.4rem;
    margin: 0;
    left: auto;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%)
}

.card.operate-card .operate {
    display: none;
    cursor: pointer;
    z-index: 2
}

.card.operate-card.on tr {
    cursor: default
}

.card.operate-card.on .operate-content .operate {
    display: block
}

.card.operate-card.on .operate-content .qbc-icons.qbc-arrow-right {
    display: none !important
}

.qbc-card {
    width: 100%;
    padding: 1rem 1.6rem;
    border-radius: .4rem;
    border: 1px solid #dee2e6
}

.coupon-card {
    height: 100%;
    border-radius: 1rem;
    --main-color: #EC407A;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%) !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%) !important
}

.coupon-card.theme1 {
    border-radius: 1rem;
    --main-color: #EC407A
}

.coupon-card.used .view::after {
    border-bottom: 10px dotted #e5e5e5
}

.coupon-card .view img.card-img-top {
    height: 100%
}

.coupon-card.used .view .mask {
    background-color: rgba(62, 69, 81, .7)
}

.coupon-card.used .card-body {
    background-color: rgba(0, 0, 0, .1)
}

.coupon-card .coupon-value {
    font-size: 3.4rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 60%)
}

.coupon-card .coupon-unit {
    margin-left: .4rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 60%)
}

.coupon-card .card-title .text {
    color: #fff;
    font-weight: 600;
    -ms-flex: 1;
    flex: 1
}

.coupon-card .activator {
    position: inherit;
    cursor: pointer
}

.coupon-card.coupon-expired {
    filter: grayscale(90%);
    opacity: .85
}

.coupon-card .coupon-limit {
    color: #fff !important;
    line-height: 1.5;
    box-shadow: none;
    -webkit-box-shadow: none;
    font-size: 11px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.coupon-card .coupon-limit.app-coupon {
    color: #fff !important;
    border: 1px solid red;
    background-color: red
}

.coupon-card .card-body {
    padding-bottom: 1.2rem
}

.coupon-card .coupon-limit.app-coupon {
    color: #fff !important;
    border: 1px solid #fff;
    background-color: #f44336
}

.coupon-limit.badge {
    padding: 0 .4em .1em !important
}

.coupon-card.selected::after {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: #388e3c;
    font-size: 2.2rem;
    text-shadow: none;
    background-color: #fff;
    border-radius: 5rem;
    padding: 0 .5rem 0;
    background: radial-gradient(circle at 49%, #fff, #fcfcfc 50%, #ffffff00 75%, #ffffff00 75%)
}

.coupon-reveal .container.detail div,
.coupon-reveal .container.detail p {
    margin-bottom: .3rem
}

.coupon-reveal .container.detail hr {
    margin-bottom: .8rem;
    margin-top: .8rem
}

#detailBody.expired .coupon-reveal .container.detail p.title,
#detailBody.expired .coupon-reveal .container.detail p.title i,
.coupon-reveal .container.detail p.title,
.coupon-reveal .container.detail p.title i {
    font-weight: 400
}

.coupon-reveal .container.detail p.text {
    padding-left: 1.4rem;
    font-size: 1.4rem
}

.coupon-card .left-container {
    width: 65%;
    padding-right: 10px
}

.coupon-card .right-container {
    width: 32%
}

.card-title .line-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.4
}

.coupon-card .view-height {
    height: 160px !important
}

#fragCouponList .coupon-card .view-height {
    height: 140px !important
}

#detailBody.expired .expired-stamp {
    bottom: 80%;
    padding: .6rem 2.5rem;
    font-size: 2rem
}

#detailBody.expired .badge-primary {
    background-color: #e0e0e0 !important;
    color: #000 !important
}

#fragCouponList .col-12.col-md-6.p-lr:nth-child(even) {
    padding-left: .8rem
}

#fragCouponList .col-12.col-md-6.p-lr:nth-child(odd) {
    padding-right: .8rem
}

#fragCouponList .coupon-card .coupon-value {
    font-size: 2.2rem !important
}

.rgba-light-hover:hover {
    background-color: rgba(0, 0, 0, .3) !important
}

#couponDetailModal .badge-pill {
    line-height: 1.5
}

.img-card {
    max-width: 40rem !important;
    min-width: 32rem !important;
    min-height: 24rem
}

.card-img-border {
    border-radius: 15px 15px 15px 15px !important
}

.card-img-body {
    background-color: #383c69;
    border-radius: 0 0 15px 15px
}

.SMBC .card-img-body {
    background-color: #004830
}

@media (max-width:767px) {
    .card-step-shape {
        height: 4.5rem;
        width: 4.5rem;
        border-radius: 2.5rem 0 2rem 0
    }

    .card-step-shape>span {
        line-height: 2.2
    }

    .card.block-card,
    .card.login-card {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .card.block-card.qbc-ribbon {
        overflow: hidden
    }

    .card.block-card>.pure-title {
        margin-left: 0;
        margin-right: 0
    }

    .card.block-card .card-body,
    .card.block-card .card-footer,
    .card.block-card .card-title {
        padding-left: 0;
        padding-right: 0
    }

    .card.block-card .card-footer {
        border-bottom: 0
    }

    .card.card-cascade.narrower .view.view-cascade {
        margin: 0;
        margin-top: -2.5rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .card.block-card.card-cascade.narrower .view.view-cascade {
        border-radius: .4rem
    }

    .card .card-body ul.card-text {
        padding-left: 2rem
    }

    .card .btn-sns {
        min-width: 80px;
        padding: .5rem 2rem
    }

    .card .btn-sns img {
        height: 30px
    }

    body.rd-bg-pfx .card.login-card,
    body.rd-biz-bg .card.login-card {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .notice-card .action-wrap {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        padding-left: 2rem;
        padding-right: 2rem
    }

    .notice-card .notice-content .action-wrap {
        margin-top: 1rem;
        padding-left: 2rem;
        padding-right: 2rem
    }

    .notice-card .action-wrap .btn {
        width: 100%
    }

    .card.operate-card .operate-switch {
        position: relative;
        float: right;
        margin: 0;
        margin-right: 3rem;
        padding: 0 !important;
        top: auto;
        right: auto;
        transform: none
    }

    .coupon-card .coupon-value {
        font-size: 2rem
    }

    .coupon-card .view-height {
        height: 130px !important
    }

    .card-title .line-2 {
        font-size: 12px
    }

    #fragCouponList .col-12.p-lr {
        padding-right: 15px !important;
        padding-left: 15px !important
    }

    #detailBody.expired .expired-stamp {
        padding: .25rem 2rem;
        font-size: 1.6rem
    }

    .coupon-card .coupon-limit {
        font-size: 10px
    }
}

.carousel-multi-item .controls-top.controls-leftRight {
    position: absolute;
    width: 100%;
    top: 50%;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important
}

.carousel.account-promot-carousel {
    border-radius: .4rem
}

.carousel.account-promot-carousel .carousel-indicators {
    margin: auto;
    width: fit-content
}

.carousel.account-promot-carousel .carousel-indicators li {
    background-color: #8b8b8b
}

.carousel.account-promot-carousel .carousel-item {
    width: 100%;
    background: #fff;
    background-image: url(/img/scoupon/banner2-726d032fce72ef8413a46e02c443a236.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    border-radius: .5rem;
    overflow: auto
}

.carousel.account-promot-carousel .carousel-item .view img,
.carousel.account-promot-carousel .carousel-item>div {
    height: 90px;
    border-radius: .2rem
}

.banner-intro-img {
    height: 90px;
    padding: 1.2rem
}

.carousel-fade .carousel-inner .carousel-item {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition-property: opacity
}

.carousel-fade .carousel-inner .active.carousel-item-left,
.carousel-fade .carousel-inner .active.carousel-item-right,
.carousel-fade .carousel-inner .carousel-item {
    opacity: 0
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
    opacity: 1
}

.carousel-vertical .carousel-inner .carousel-item-next.carousel-item-left,
.carousel-vertical .carousel-inner .carousel-item-prev.carousel-item-right {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.carousel-vertical .carousel-inner .active.carousel-item-left,
.carousel-vertical .carousel-inner .carousel-item-prev {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.carousel-vertical .carousel-inner .active.carousel-item-right,
.carousel-vertical .carousel-inner .carousel-item-next {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.carousel-multi-item .carousel-inner {
    padding: 0
}

.carousel-multi-item .carousel-indicators li {
    width: 1.5rem;
    height: 1.5rem
}

.carousel-multi-item .carousel-indicators .active {
    width: 1.8rem;
    height: 1.8rem
}

.carousel-multi-item .carousel-inner.v-3 .carousel-item-next,
.carousel-multi-item .carousel-inner.v-3 .carousel-item-prev,
.carousel-multi-item .carousel-inner.v-3 .carousel-item.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-flex
}

.carousel-thumbnails.top-carousel .carousel-indicators>li {
    margin-right: 4px;
    margin-left: 4px;
    border-radius: .4rem
}

.carousel-thumbnails.top-carousel .carousel-indicators>li img {
    width: 15rem;
    height: 10rem
}

@media (min-width:1200px) {
    .carousel-multi-item .controls-top.controls-leftRight {
        width: 110%;
        left: -5%
    }
}

@media (max-width:1024px) {

    .banner-intro-img,
    .carousel.account-promot-carousel .carousel-item .view img,
    .carousel.account-promot-carousel .carousel-item>div {
        height: 72px
    }
}

@media (max-width:992px) {

    .banner-intro-img,
    .carousel.account-promot-carousel .carousel-item .view img,
    .carousel.account-promot-carousel .carousel-item>div {
        height: 105px
    }
}

@media (max-width:767px) {

    .banner-intro-img,
    .carousel.account-promot-carousel .carousel-item .view img,
    .carousel.account-promot-carousel .carousel-item>div {
        height: 65px
    }

    .banner-intro-img {
        padding: .8rem
    }

    .carousel-thumbnails.top-carousel .carousel-indicators {
        display: -webkit-box;
        margin-right: 15px;
        margin-left: 15px
    }

    .carousel-thumbnails.top-carousel .carousel-indicators>li img {
        width: 12rem;
        height: 8rem
    }
}

.main-container {
    padding-top: 80px;
    min-height: calc(100vh - 90px)
}

.main-container.login,
.main-container.pure {
    min-height: calc(100vh - 153px)
}

.sim .main-container {
    padding-top: 120px
}

.main-container.app {
    padding-top: 0 !important;
    min-height: 100vh
}

.main-container.top {
    background: #fcfcfc
}

.side-nav-pl .main-container {
    padding-top: 80px
}

.main-container .main-inner {
    padding-top: 3rem;
    padding-bottom: 4rem
}

.main-container .main-inner.narrow {
    padding-left: 10rem;
    padding-right: 10rem
}

.main-container .main-inner.narrower {
    padding-left: 15rem;
    padding-right: 15rem
}

.main-container.false,
.main-container.outer,
.main-container.sim {
    padding-top: 120px
}

.main-container .top-height {
    height: 90px
}

.main-container .scroll-container {
    position: relative;
    max-height: 100vh;
    padding: 2rem 1.6rem;
    border-radius: .3rem;
    overflow-y: auto;
    flex-wrap: nowrap;
    background: #fff;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)
}

.top-container {
    position: relative;
    height: 100%
}

.top-container .top-view {
    min-height: 60vh;
    padding-top: 8rem
}

.top-container-margin {
    margin: 25rem 0
}

.top-container .inner-container {
    margin: auto 15px
}

.card-container {
    background: #fff;
    border-radius: .4rem;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%) !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%) !important
}

.card-container .rt-container {
    position: relative;
    width: 90%;
    margin: 1.6rem auto 5rem
}

.card-container .rt-container .card.block-card {
    -webkit-box-shadow: none;
    box-shadow: none
}

.fixed-container {
    position: fixed;
    z-index: 2
}

.position-center {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%)
}

.position-x-center {
    left: 50%;
    transform: translateX(-50%)
}

.position-y-center {
    top: 50%;
    transform: translateY(-50%)
}

.scroll-vertical-container {
    position: relative;
    max-height: 43.5vh;
    overflow-y: auto;
    border-radius: .4rem !important;
    border-bottom: 1px solid #dee2e6 !important
}

.scroll-x-wrap {
    position: relative;
    overflow-x: auto
}

.list-header {
    position: relative;
    border-bottom: 1px solid #f3f3f3
}

.list-header .label {
    position: absolute;
    padding: .5rem 1rem;
    font-size: 1.4rem
}

.list-header .left-top {
    top: 0;
    border-bottom-right-radius: .4rem;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6
}

.list-header .right-bottom {
    bottom: 0;
    right: 0;
    border-top-left-radius: .4rem;
    border-top: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6
}

.list-display-container {
    position: relative;
    width: 100%;
    color: #212529;
    font-size: 1.6rem
}

.list-display-container .list-sub-header {
    font-weight: 600;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem
}

.list-display-container .list-row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.list-display-container .list-row .row-item .text-info,
.list-display-container .list-row .row-item.text-primary.text-code {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #0091ea !important
}

.list-display-container .list-row:not(:last-of-type) {
    border-bottom: 1px solid #f3f3f3
}

.list-display-container .list-row>.row-item {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: flex-end;
    flex: 1 auto;
    padding: 1.2rem 1rem;
    min-height: 45px;
    word-break: break-word !important;
    word-wrap: break-word !important
}

.list-display-container.sm .list-row>.row-item {
    padding: .8rem 1rem;
    min-height: 37px
}

.list-display-container.form-height .list-row>.row-item {
    min-height: 55px
}

.list-display-container .list-row>.row-item:first-of-type {
    flex: 0 auto;
    width: 40%;
    min-width: 40%;
    justify-content: flex-start;
    white-space: normal !important;
    color: #636363;
    font-size: 1.4rem
}

.list-display-container .list-row>.row-item:last-of-type {
    text-align: right
}

.list-display-container .list-row.divided {
    border-top: 1px dashed #838383
}

.list-display-container .list-row.important>.row-item,
.list-display-container .list-row.total>.row-item {
    font-weight: 600;
    font-size: 1.15em;
    color: #212121
}

.list-display-container .list-row.important>.row-item:last-of-type {
    font-size: 2.2rem
}

.list-display-container .list-row.total>.row-item:last-of-type {
    font-size: 1.8rem;
    color: red
}

.list-display-container .list-row>.row-item .item-total {
    font-size: 2.2rem;
    font-weight: 600
}

.currency-amount {
    position: relative
}

.currency-amount::after {
    position: absolute;
    content: "JPY";
    top: .3rem;
    bottom: 0;
    margin-left: .3rem;
    color: #6e6e6e;
    font-size: .85em;
    font-weight: 500
}

@media (max-width:1024px) {
    .main-container .inner-container {
        width: 90%
    }

    .main-container .main-inner {
        padding-top: 3rem
    }

    .main-container .main-inner.narrow,
    .main-container .main-inner.narrower {
        padding-left: 0;
        padding-right: 0
    }
}

@media (max-width:767px) {
    .main-container {
        padding-top: 100px
    }

    .sim .main-container {
        padding-top: 90px
    }

    .main-container.false,
    .main-container.outer,
    .main-container.sim {
        padding-top: 60px
    }

    .side-nav-pl .main-container {
        padding-top: 70px
    }

    .main-container .main-inner {
        padding-top: 2rem
    }

    .card-container {
        -webkit-box-shadow: none !important;
        box-shadow: none !important
    }

    .card-container .rt-container {
        width: 100%
    }

    .top-container-margin {
        margin: 15rem 0
    }

    .list-display-container .list-row.sp-row {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }

    .list-display-container .list-row>.row-item {
        min-height: 33px;
        padding: 1.4rem 1rem;
        width: 100% !important
    }

    .list-display-container.form-height .list-row>.row-item {
        padding: 1.2rem;
        min-height: 50px
    }

    .list-display-container .list-row>.row-item:first-of-type {
        min-height: auto;
        border-bottom: 0;
        border-right: 0
    }

    .list-display-container.form-height .list-row>.row-item {
        padding: .6rem 1.2rem;
        min-height: 40px
    }
}

.payforex-bg {
    background-image: url(../img/payforex-mv-bg-6203887449b0e1ecd4045ce952e4c098.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: .95
}

.payforex-bg2 {
    background-image: url(../img/payforex-mv-bg2-15336f6f8cfb5150f7452f581c140498.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: .95
}

.wave-bg {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 48" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /></defs><g class=""><use xlink:href="#gentle-wave" x="60" y="2" fill="rgba(255,255,255)" /></g></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: .95
}

.rotate-180 {
    transform: rotate(180deg)
}

.top-view>.campaign-container,
.top-view>.container {
    min-height: 400px;
    padding-bottom: 12rem !important
}

.top-view>.campaign-container.customize,
.top-view>.container.customize {
    min-height: 668px
}

section#service-intro1 {
    margin-top: -22rem
}

section img.intro-image {
    height: 160px;
    margin: auto
}

section img.intro-image.sm {
    height: 160px !important
}

section img.app-image {
    height: 380px;
    margin: auto
}

section .card-deck img.intro-image {
    height: 200px;
    padding: 1rem;
    padding-top: 0;
    margin: auto
}

.view.payforex-bg.top-title-bg {
    height: 300px
}

.waves-wrap {
    position: relative;
    width: 100%
}

.waves-wrap svg.waves {
    position: relative;
    width: 100%;
    height: 150px
}

.bg-waves .waves {
    position: relative;
    width: 100%;
    height: 10vh;
    min-height: 100px;
    max-height: 150px
}

.bg-wave-light {
    background-color: rgba(250, 250, 250, .5)
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0)
    }

    100% {
        transform: translate3d(85px, 0, 0)
    }
}

.bg-wave-light {
    background-color: rgba(250, 250, 250, .5)
}

@media (max-width:1024px) {

    section .card-deck img.intro-image,
    section img.intro-image {
        height: 150px
    }

    section img.app-image {
        height: 350px
    }
}

@media (max-width:767px) {
    .view.payforex-bg.top-title-bg {
        height: 280px
    }

    section#service-intro1 {
        margin-top: -18rem
    }

    section img.intro-image {
        height: 165px
    }

    section img.app-image {
        height: 250px
    }
}

.data-item-scroll {
    position: relative;
    overflow-x: auto;
    flex-wrap: nowrap
}

.data-item {
    display: block;
    position: relative;
    text-align: center;
    padding: 1.5rem 0
}

.data-item.block-item {
    border-radius: .4rem;
    margin: auto 1rem
}

.data-item.block-item .badge-dotto,
.data-item.block-item .badge-notification {
    top: 2rem
}

.data-item.block-item:hover {
    background: #e9f0f7
}

.data-item.block-item:hover .qbc-icons {
    color: #0091ea
}

.data-item.white-item {
    background: #fff;
    padding: 1.5rem 1rem;
    margin: 0 1rem
}

.data-item.white-item.flex-item {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    flex: 0 1 12%
}

.data-item.white-item .qbc-icons {
    font-size: 4rem;
    margin-bottom: .5rem
}

.data-item .item-img {
    margin: auto;
    display: inline-block
}

.data-item .item-img img {
    width: 6rem;
    border-radius: .3rem;
    margin-bottom: .5rem;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)
}

.data-item .item-text {
    font-size: 1.4rem;
    margin-bottom: 0
}

@media (max-width:767px) {
    .data-item.block-item {
        padding: 1.2rem 0;
        margin: 0
    }

    .data-item .item-text {
        font-size: 1.2rem
    }

    .data-item.block-item .badge-dotto,
    .data-item.block-item .badge-notification {
        top: 1rem;
        right: 0
    }
}

.amount-select-item {
    position: relative;
    color: #0091ea;
    text-align: center;
    border: 1px solid #0091ea;
    border-radius: .4rem;
    padding: 1rem;
    transition: box-shadow .2s ease, transform .2s ease, z-index 0s .2s ease
}

.amount-select-item.selected,
.amount-select-item:hover {
    color: #fff !important;
    background: #0091ea;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%) !important;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%) !important;
    transition: box-shadow .2s ease, transform .2s ease, z-index 0s 0s ease
}

.amount-select-item:hover {
    transform: scale(1.05)
}

.amount-select-item.selected .sub-text,
.amount-select-item:hover .sub-text {
    color: #fff
}

.amount-select-item .sub-text {
    color: #6c757d
}

@media (max-width:767px) {
    .amount-select-item {
        padding: .8rem 1rem;
        font-size: 1.4rem
    }
}

.select-item {
    position: relative;
    text-align: center;
    padding: 1rem;
    box-shadow: 1px 1px 1px 0 #dee2e6;
    cursor: pointer;
    transition: transform .1s ease
}

.select-item.selected,
.select-item:hover {
    color: #fff !important;
    background: #0091ea;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%) !important;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%) !important;
    transition: transform .1s ease
}

.select-item.bank:hover {
    background: #fff
}

.select-item:hover {
    z-index: 2;
    transform: scale(1.1)
}

.col.select-item,
.col.select-item.conbini {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(25%);
    flex: 0 0 calc(25%);
    max-width: calc(25%)
}

.col.select-item.bank {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.33333%);
    flex: 0 0 calc(33.33333%);
    max-width: calc(33.33333%)
}

.select-item img {
    width: 50%;
    height: auto;
    margin: 0 auto;
    border-radius: .4rem
}

.select-item.conbini img {
    width: 50%
}

.select-item.bank img {
    width: 80%
}

.check-item::after {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    bottom: .5rem;
    right: 1rem;
    color: #f1f1f1;
    font-size: 2rem
}

.check-item.top::after {
    top: .5rem;
    bottom: 0
}

.check-item.top.lg::after {
    top: 2rem;
    bottom: 0;
    right: 1.5rem;
    font-size: 2.5rem
}

.check-item:not(.select-item).selected {
    background-color: #f0f8ff !important
}

.check-item.selected::after {
    color: #0091ea
}

.select-item.check-item.selected::after,
.select-item.check-item:hover::after {
    color: #fff
}

.btn-select-items .btn-select-item {
    background-color: #fff !important;
    min-width: 200px !important
}

@media (max-width:767px) {
    .select-item {
        padding: .8rem;
        font-size: 1.4rem
    }

    .col.select-item,
    .col.select-item.conbini {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.33333%);
        flex: 0 0 calc(33.33333%);
        max-width: calc(33.33333%)
    }

    .col.select-item.bank {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50%);
        flex: 0 0 calc(50%);
        max-width: calc(50%)
    }

    .col.select-item.check-item::after {
        right: .5rem;
        bottom: 0
    }
}

.md-accordion .card.border .card-header {
    padding: 1.4rem 2rem;
    margin-bottom: 0;
    border-bottom: 0
}

.md-accordion .card.border .card-header a:hover {
    color: initial
}

.md-accordion .card.border .card-header .qbc-icons {
    margin-top: .5rem
}

.search-input-group input {
    height: 55px
}

.search-input-group {
    width: 100%
}

.search-input-group .input-group-text {
    width: 8rem;
    cursor: pointer;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important
}

.list-group-item.disabled>*,
.list-group-item:disabled>* {
    color: #9b9b9b
}

.list-group-item>a.active {
    background-color: #f0f9ff;
    border-color: #afe1ff
}

.search-list-group {
    width: 100%;
    border-radius: .4rem;
    border: 1px solid #dee2e6
}

.search-list-group .input-group {
    border-bottom: 1px solid #dee2e6
}

.search-list-group .input-group .input-group-text {
    background-color: #fff;
    border-color: transparent;
    padding: .6rem 2rem
}

.search-list-group .input-group>input {
    border: 0 !important;
    height: 55px
}

.search-list-group .list-container {
    position: relative;
    max-height: 43.5vh;
    overflow-y: auto
}

.search-list-group .list-group-item {
    padding: 0;
    border-radius: 0
}

.search-list-group .list-group-item.optgroup {
    font-size: 1.4rem;
    background: #f9f9f9;
    padding: .6rem 1.5rem;
    color: #919191;
    white-space: nowrap;
    cursor: default
}

.search-list-group .list-group-item .inner-item {
    padding: 1.2rem 2rem;
    color: #6c757d !important
}

.certWrap table a,
.list-group-item.cert-display-item a {
    display: inline;
    color: #0091ea
}

.list-group-item .inner-item,
.list-group-item a {
    display: block;
    width: 100%;
    font-weight: 400;
    text-align: inherit;
    clear: both
}

.list-group-item .inner-item:active,
.list-group-item .inner-item:hover {
    background-color: #f9f9f9;
    color: #6c757d !important
}

.list-group-item .inner-item img {
    display: inline-block;
    width: 3.5rem;
    vertical-align: middle;
    border-radius: 2px;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 3px #c5c5c5;
    -moz-box-shadow: 1px 1px 3px #c5c5c5;
    box-shadow: 1px 1px 3px #c5c5c5;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.list-group-item .inner-item img.provider {
    width: 5rem
}

.list-group.list-accordion .list-group-item {
    padding: 0
}

.content-wrap .collapse-item,
.list-group.list-accordion .list-group-item>.content-wrap .collapse-item {
    position: relative;
    cursor: pointer;
    padding: 1.5rem;
    min-height: 75px
}

.list-group.list-accordion .list-group-item.list-checkbox>.content-wrap .collapse-item {
    min-height: auto
}

.list-group.list-accordion .list-group-item>.content-wrap .collapse-item.disabled {
    background: #ccc
}

content-wrap .collapse-item.partBalancePay {
    padding: 1rem
}

.content-wrap .collapse-item.partBalancePay.selected {
    color: #0091ea;
    background: #e9f7ff
}

.list-group.list-accordion .list-group-item>.content-wrap .inner-item-wrap {
    padding: 1.2rem;
    padding-top: 2rem;
    flex-wrap: wrap
}

.list-group.list-accordion .list-group-item>.content-wrap .collapse-item.selected {
    background-color: #f1fcff
}

.content-wrap .collapse-item.partBalancePay::after,
.content-wrap .collapse-item.selected::before,
.list-group.list-accordion .list-group-item>.content-wrap .collapse-item.selected::before {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 1rem;
    color: #0091ea;
    font-size: 2rem
}

.content-wrap .collapse-item.mutilple-item.selected::after,
.list-group.list-accordion .list-group-item>.content-wrap .collapse-item.mutilple-item.selected::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f14a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 1.5rem;
    color: #0091ea;
    font-size: 2rem
}

.content-wrap .collapse-item.partBalancePay::after {
    color: #9c9c9c
}

.content-wrap .collapse-item.selected.partBalancePay::after {
    color: #0091ea
}

.d-flex .f-block-item.selected::before {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    top: .5rem;
    right: 1rem;
    color: #0091ea;
    font-size: 2rem
}

.content-wrap .collapse-item.selected.bottom-0p5::before,
.d-flex .f-block-item.selected.bottom-0p5::before,
.list-group.list-accordion .list-group-item>.content-wrap .collapse-item.selected.bottom-0p5::before {
    top: auto;
    bottom: .5rem
}

.content-wrap .collapse-item.selected.bottom-0::before,
.list-group.list-accordion .list-group-item>.content-wrap .collapse-item.selected.bottom-0::before {
    top: auto;
    bottom: 0
}

.list-group.list-accordion .list-group-item>.content-wrap:not(.false) .collapse-item[aria-expanded=true]:not(.collapsed) {
    background-color: #ecfbff;
    -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 5%), 0 2px 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 5%), 0 2px 3px 0 rgb(0 0 0 / 5%)
}

.list-group.list-accordion .inner-item-wrap .f-block-item:not(.false):hover {
    background-color: #ecfbff;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    filter: drop-shadow(3px 3px 5px #c5c5c5)
}

.list-group.list-accordion .collapse-item.hover:hover,
.list-group.list-accordion .content-wrap:not(.false) .collapse-item:hover {
    background-color: #ecfbff
}

.list-group.list-accordion .inner-item-wrap .f-block-item.selected {
    border: 1px solid #00a8d4;
    background-color: #ecfbff;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    filter: drop-shadow(3px 3px 5px #c5c5c5)
}

.content-wrap .collapse-item .item-icon.left-icon,
.list-accordion .item-icon.left-icon {
    border-right: 1px solid #eee;
    margin-right: 1.2rem;
    padding-right: 1.2rem
}

.content-wrap .collapse-item .item-icon.left-icon img,
.list-accordion .item-icon.left-icon img {
    width: 4rem
}

.content-wrap .collapse-item.partBalancePay .item-icon.left-icon img {
    width: 3rem
}

.d-flex.f-icon-wrap {
    display: none !important
}

.d-flex.f-icon-wrap.true {
    display: inherit !important
}

.d-flex .f-block-item {
    position: relative;
    flex: 0;
    flex-basis: calc(calc(100% / 3) - 1.2rem);
    align-self: stretch;
    text-align: center;
    padding: 1rem;
    margin: .6rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: .3rem;
    box-shadow: 0 2px 3px rgb(0 0 0 / 5%), 0 3px 10px rgb(0 0 0 / 5%);
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.d-flex .f-block-item.disabled {
    background: #ccc
}

.d-flex .f-block-item.disabled .badge {
    opacity: .8
}

.d-flex .f-block-item .item-icon img {
    height: 4rem;
    width: auto;
    margin: auto
}

.d-flex .f-block-item .select-icon {
    position: absolute;
    display: none;
    cursor: pointer;
    top: 5%;
    right: 5%
}

.d-flex .flex-item {
    white-space: normal
}

.list-group-coupon>.list-group-item {
    border: 0;
    padding: .5rem 2rem
}

.list-group-item .coupon-wrap {
    min-height: 120px;
    background-image: url(/img/scoupon/couponm0-d6c9294ff37bb48ec37ae5b05afcd9fa.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

.list-group.link-list {
    width: 100%;
    padding: 0
}

.list-group.link-list li.list-group-item {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    min-height: 55px;
    border: 1px solid #dee2e6 !important;
    border-radius: .4rem !important
}

.list-group.link-list .list-group-item:active,
.list-group.link-list .list-group-item:hover {
    background-color: #ecfbff;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    filter: drop-shadow(3px 3px 5px #c5c5c5);
    outline: 0
}

.list-group.link-list.narrow-list {
    border: 1px solid #dee2e6 !important;
    border-radius: .4rem !important
}

.list-group.link-list.narrow-list li.list-group-item {
    border: 0 !important;
    border-radius: 0 !important
}

.list-group.link-list.narrow-list li.list-group-item:not(:last-of-type) {
    border-bottom: 1px solid #dee2e6 !important
}

.list-group.link-list.narrow-list li.list-group-item:first-of-type {
    border-top-left-radius: .4rem !important;
    border-top-right-radius: .4rem !important
}

.list-group.link-list.narrow-list li.list-group-item:last-of-type {
    border-bottom-left-radius: .4rem !important;
    border-bottom-right-radius: .4rem !important
}

.list-group.list-group-select .list-group-item {
    position: relative;
    cursor: pointer
}

.list-group.list-group-select .list-group-item.selected {
    background-color: #ecfbff
}

.list-group.list-group-select .list-group-item:after {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    bottom: .5rem;
    right: 1rem;
    color: #c7c7c7;
    font-size: 2.3rem
}

.list-group.list-group-select .list-group-item.selected:after {
    color: #0091ea
}

.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 1px
}

.list-accordion.list-group-flush>.list-group-item:last-child,
.list-group-flush.list-group-lg>.list-group-item:last-child {
    border-bottom-width: 0
}

.list-group-item .flex-title {
    width: 20%;
    font-weight: 600
}

.list-group-item .flex-detail {
    width: 80%;
    font-weight: 300
}

.white-pill {
    border-radius: 80rem;
    background-color: #fff;
    padding: .1rem 1.6rem;
    -webkit-box-shadow: 0 .2rem .4rem rgb(0 0 0 / 8%);
    box-shadow: 0 .2rem .4rem rgb(0 0 0 / 8%)
}

.white-pill img.flag-thumbnail {
    width: 3.5rem !important
}

.white-pill .bootstrap-select>.dropdown-toggle,
.white-pill .bootstrap-select>.dropdown-toggle:hover {
    background-color: #fff !important;
    background: #fff !important
}

.white-pill button.dropdown-toggle {
    border: none !important
}

.white-pill .bootstrap-select>.dropdown-toggle:after {
    content: ""
}

.white-pill-action-btn {
    width: 4rem;
    height: 4rem;
    border-radius: 50%
}

.white-pill-action-btn {
    padding: .3rem !important;
    margin: auto
}

@media (max-width:992px) {
    .list-group-flush.list-group-lg>.list-group-item {
        border-bottom: 0
    }

    .list-group-item .flex-detail,
    .list-group-item .flex-title {
        width: 100%
    }
}

@media (max-width:767px) {
    .search-list-group {
        border-left: 0;
        border-right: 0;
        border-radius: 0
    }

    .search-list-group .list-group-item .inner-item {
        padding: 1.2rem
    }

    .d-flex .f-block-item {
        flex: 0;
        -ms-flex-preferred-size: calc(50% - 1.2rem);
        flex-basis: calc(50% - 1.2rem)
    }

    .list-group.list-accordion .list-group-item>.content-wrap .inner-item-wrap {
        padding: 1.2rem 0
    }

    .list-group.list-accordion .list-group-item>.content-wrap .inner-item-wrap .f-block-item {
        padding: 1rem .5rem
    }

    .list-group.list-accordion .list-group-item>.content-wrap .inner-item-wrap .badge {
        white-space: normal;
        margin-bottom: .4rem
    }
}

.has-float-label {
    position: relative;
    width: 100%
}

.has-float-label.focus .form-control.required+label {
    font-size: 1.4rem !important;
    opacity: 1 !important;
    top: -.65em !important;
    left: 1.5rem !important
}

.has-float-label div.input-group-prepend~.form-control:placeholder-shown:not(:focus)+input+label,
.has-float-label div.input-group-prepend~.form-control:placeholder-shown:not(:focus)+label,
.has-float-label div.input-group-prepend~.form-control:placeholder-shown:not(:focus)+span,
.has-float-label label,
.has-float-label.phone-input-group div.input-group-prepend~.form-control+span,
.has-float-label>span,
.has-float-label>span.active {
    position: absolute;
    cursor: text;
    font-size: 75%;
    opacity: 1;
    max-width: 95%;
    top: -.65em;
    left: 1rem;
    padding: 0 1px;
    z-index: 3;
    -webkit-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.has-float-label.phone-input-group div.input-group-prepend~.form-control+span {
    position: absolute;
    cursor: text;
    font-size: 75% !important;
    opacity: 1 !important;
    max-width: 80%;
    top: -.65em !important;
    left: 1rem !important;
    padding: 0 1px;
    z-index: 3 !important;
    -webkit-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.has-float-label.md-form label,
.has-float-label.md-form>span {
    color: #757575;
    left: 0
}

.has-float-label .required+input+label,
.has-float-label .required~label,
.has-float-label .required~span,
.has-float-label .required~span.active {
    left: 1rem;
    padding: 1px 1px 1px 1.5rem !important
}

.has-float-label .form-control::-webkit-input-placeholder,
.has-float-label div.input-group-prepend~.form-control:not(:focus)::-webkit-input-placeholder,
.has-float-label div.input-group-prepend~.form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
    font-size: .85em;
    opacity: 1;
    -webkit-transition: all .3s;
    transition: all .3s
}

.has-float-label .form-control::-moz-placeholder,
.has-float-label div.input-group-prepend~.form-control:not(:focus)::-moz-placeholder,
.has-float-label div.input-group-prepend~.form-control:placeholder-shown:not(:focus)::-moz-placeholder {
    font-size: .85em;
    opacity: 1;
    transition: all .3s
}

.has-float-label .form-control:-ms-input-placeholder,
.has-float-label div.input-group-prepend~.form-control:not(:focus):-ms-input-placeholder,
.has-float-label div.input-group-prepend~.form-control:placeholder-shown:not(:focus):-ms-input-placeholder {
    font-size: .85em;
    opacity: 1;
    transition: all .3s
}

.has-float-label .form-control::placeholder,
.has-float-label div.input-group-prepend~.form-control:not(:focus)::placeholder,
.has-float-label div.input-group-prepend~.form-control:placeholder-shown:not(:focus)::placeholder {
    font-size: .85em;
    opacity: 1;
    -webkit-transition: all .3s;
    transition: all .3s
}

.has-float-label:not(.focus) .form-control:not(:focus)::-webkit-input-placeholder,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
    opacity: 0
}

.has-float-label:not(.focus) .form-control:not(:focus)::-moz-placeholder,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)::-moz-placeholder {
    opacity: 0
}

.has-float-label:not(.focus) .form-control:not(:focus)::-ms-input-placeholder,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)::-ms-input-placeholder {
    opacity: 0
}

.has-float-label:not(.focus) .form-control:not(:focus)::placeholder,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)::placeholder {
    opacity: 0
}

.has-float-label:not(.focus) .form-control:invalid+input+label,
.has-float-label:not(.focus) .form-control:invalid+label,
.has-float-label:not(.focus) .form-control:invalid+span,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)+input+label,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)+label,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)+span {
    font-size: 1.4rem;
    opacity: .5;
    top: 30%
}

.has-float-label:not(.focus) .form-control.required:invalid+input+label,
.has-float-label:not(.focus) .form-control.required:invalid+label,
.has-float-label:not(.focus) .form-control.required:invalid+span,
.has-float-label:not(.focus) .form-control.required:placeholder-shown:not(:focus)+input+label,
.has-float-label:not(.focus) .form-control.required:placeholder-shown:not(:focus)+label,
.has-float-label:not(.focus) .form-control.required:placeholder-shown:not(:focus)+span {
    font-size: 1.4rem;
    opacity: .5;
    top: 30%;
    left: 1.5rem;
    z-index: 0
}

.has-float-label textarea.form-control.required:invalid+label,
.has-float-label textarea.form-control.required:invalid+span,
.has-float-label textarea.form-control.required:placeholder-shown:not(:focus)+label,
.has-float-label textarea.form-control.required:placeholder-shown:not(:focus)+span {
    top: 10% !important
}

.has-float-label label::after,
.has-float-label>span::after {
    content: " ";
    display: block;
    position: absolute;
    background: #fff;
    height: 5px;
    top: 30%;
    left: -.2em;
    right: -.2em;
    z-index: -1
}

.has-float-label.phone-input-group div.input-group-prepend~.form-control+span::after {
    background: #fff !important
}

.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)+label::after,
.has-float-label:not(.focus) .form-control:placeholder-shown:not(:focus)+span::after {
    background: 0 0
}

.has-float-label .required+input+label::before,
.has-float-label .required~label::before,
.has-float-label .required~span::before {
    content: "※";
    display: block;
    position: absolute;
    color: red;
    left: 0;
    z-index: 1
}

.display-block {
    width: 100%;
    padding: 1rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .3rem
}

.row #alertSection {
    width: 100%
}

.alert {
    width: 100%;
    border-radius: .4rem;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%), 0 1px 3px 0 rgb(0 0 0 / 5%)
}

.alert.border {
    box-shadow: none;
    -webkit-box-shadow: none
}

.alert.alert-pure-note {
    border: 0;
    border-left: 6px solid
}

.alert.alert-full-width {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none !important;
    -webkit-box-shadow: none !important
}

.alert .alert-content,
.alert .alert-title {
    position: relative;
    padding-left: 2.5rem;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important
}

.alert .alert-content:not(:first-child) {
    padding-left: 0
}

.alert.pure .alert-title:before,
.alert.pure>.alert-content:first-child:before {
    content: "" !important
}

.alert.alert-pure-note.pure>.alert-content {
    padding-left: 0
}

.alert .alert-title:before,
.alert>.alert-content:first-child:before {
    font-family: qbc-icons;
    content: "\e982";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    top: .1rem;
    line-height: 1;
    left: 0;
    font-size: 2rem;
    font-weight: 500
}

.alert .notice-card .alert-title:before {
    bottom: .1rem;
    top: auto
}

.alert.alert-default {
    background: #eee !important
}

.alert.alert-default .alert-content {
    color: #6c757d !important
}

.alert.alert-primary .alert-title:before,
.alert.alert-primary>.alert-content:first-child:before {
    content: "\e982"
}

.alert.alert-success .alert-title:before,
.alert.alert-success>.alert-content:first-child:before {
    content: "\e93a"
}

.alert.alert-warning .alert-title:before,
.alert.alert-warning>.alert-content:first-child:before {
    content: "\e947"
}

.alert.alert-danger .alert-title:before,
.alert.alert-danger>.alert-content:first-child:before,
.alert.alert-error .alert-title:before,
.alert.alert-error>.alert-content:first-child:before {
    content: "\e974"
}

.alert .alert-title>.title-text {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    font-weight: 600;
    padding-top: .2rem
}

.alert .alert-content>ul {
    width: 100%;
    padding-left: 0;
    list-style: none;
    margin: 0
}

.alert .alert-content>ul a {
    color: #0091ea
}

.alert.notice-alert .alert-content>ul li.done,
.alert.notice-alert .alert-content>ul li.error,
.alert.notice-alert .alert-content>ul li.todo {
    position: relative;
    text-indent: 2.5rem
}

.alert.notice-alert .alert-content>ul li:before {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    line-height: 1;
    top: 50%;
    left: -2.5rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #bfbfbf;
    font-size: 1.8rem
}

.alert.notice-alert .alert-content>ul li.todo:before {
    color: #bfbfbf
}

.alert.notice-alert .alert-content>ul li.done:before {
    color: green
}

.alert hr {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.alert-primary {
    background-color: #deebff
}

.alert-primary .alert-content:first-child:before,
.alert-primary .alert-title:before {
    color: #0052cc
}

.alert-success {
    background-color: #c3e6d4
}

.alert-success .alert-content:first-child:before,
.alert-success .alert-title:before {
    color: #00875a
}

.alert-danger,
.alert-error {
    color: #721c24;
    background-color: #ffd2c7
}

.alert-error.lighten {
    background-color: #ffe2db
}

.alert-danger .alert-content:first-child:before,
.alert-danger .alert-title:before,
.alert-error .alert-content:first-child:before,
.alert-error .alert-title:before {
    color: #de350b
}

.alert-warning {
    background-color: #fff3c4
}

a.alert {
    display: block
}

.alert-warning.light {
    background-color: #fff5d3
}

.alert-warning.border {
    border-color: #ffdf84 !important
}

.alert-warning hr {
    border-top-color: #ffdf84
}

.alert-warning .alert-content:first-child:before,
.alert-warning .alert-title:before {
    color: #f57c00
}

.alert-modal .alert {
    padding: 1.2rem 1rem;
    margin-bottom: 0
}

.modal.alert-modal .modal-side {
    width: 50rem
}

.alert-block {
    width: 100%;
    padding: 1.8rem;
    font-size: 1.4rem;
    border: 1px solid #dee2e6 !important;
    border-radius: .4rem !important
}

.alert-block.info,
.alert-block.warning {
    background-color: #fff8e1 !important;
    border: 1px solid #ff9800 !important
}

.alert-block.error {
    color: #721c24 !important;
    background-color: #ffd2c7 !important;
    border: 1px solid #ff8162 !important
}

.alert-block.warning b {
    font-weight: 600;
    color: #ff2f00
}

@media (max-width:767px) {
    .alert {
        padding: 1.2rem .8rem;
        font-size: 1.4rem;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .modal.alert-modal .modal-side {
        width: auto
    }
}

.pageLoader-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    opacity: 1;
    display: none
}

.pageLoader-container.loading {
    display: block
}

.pageLoader-container.loaded {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    animation-fill-mode: both;
    -webkit-animation-name: loaderFadeOut;
    animation-name: loaderFadeOut
}

.pageLoader-container .inner-wrap {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    height: 100%
}

.pageLoader-container .page-logo {
    position: relative;
    padding: .3rem;
    margin-top: -4.8rem !important;
    margin-bottom: 1.6rem !important;
    width: 120px;
    height: 120px;
    cursor: default;
    pointer-events: none
}

.pageLoader-container .page-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.pageLoader-container .page-logo .spinner.spinner2 {
    width: 100%;
    height: 100%;
    border-top-color: #0091ea;
    border-bottom-color: #0091ea
}

.pageLoader-container .page-logo .spinner.spinner3 {
    width: 100%;
    height: 100%;
    border-color: #0091ea
}

.pageLoader-container .logo-desc {
    font-size: 1.4rem;
    font-weight: 600
}

.loaderFadeOut {
    -webkit-animation-name: loaderFadeOut;
    animation-name: loaderFadeOut
}

@keyframes loaderFadeOut {
    from {
        opacity: 1
    }

    to {
        display: none;
        opacity: 0;
        z-index: -1
    }
}

.cp-spinner {
    width: 48px;
    height: 48px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

.cp-bubble {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-block;
    box-sizing: border-box;
    background: #0091ea;
    animation: cp-bubble-animate 1s linear infinite
}

.cp-bubble:before {
    border-radius: 50%;
    content: " ";
    width: 15px;
    height: 15px;
    display: inline-block;
    box-sizing: border-box;
    background-color: #0091ea;
    position: absolute;
    left: -30px;
    animation: cp-bubble-animate-before 1s ease-in-out infinite
}

.cp-bubble:after {
    border-radius: 50%;
    content: " ";
    width: 15px;
    height: 15px;
    display: inline-block;
    box-sizing: border-box;
    background-color: #0091ea;
    position: absolute;
    right: -30px;
    animation: cp-bubble-animate-after 1s ease-in-out infinite
}

@keyframes cp-bubble-animate {
    0% {
        opacity: .5;
        transform: scale(1) translateX(0)
    }

    25% {
        opacity: 1;
        transform: scale(1.1) translateX(-15px)
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateX(15px)
    }

    100% {
        opacity: .5;
        transform: scale(1) translateX(0)
    }
}

.scanning img {
    position: relative
}

.scanning::before {
    z-index: 999;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15%;
    width: 6px;
    background: #00b9ff;
    box-shadow: 16px 20px 70px 20px #00b9ff;
    clip-path: inset(0);
    animation: scannx 4s ease-in-out infinite alternate, scanny 8s ease-in-out infinite
}

@keyframes scannx {
    to {
        transform: translateX(-100%);
        left: 85%
    }
}

@keyframes scanny {
    20% {
        clip-path: inset(0 0 0 -100px)
    }

    50% {
        clip-path: inset(0 0 0 0)
    }

    80% {
        clip-path: inset(0 -100px 0 0)
    }
}

.d-table {
    display: table;
    width: 100%
}

.d-table>.d-table-cell {
    display: table-cell !important;
    vertical-align: middle
}

.d-table>.d-table-cell.left-icon-cell {
    min-width: 7%;
    vertical-align: baseline
}

.d-table>.d-table-cell.center-text-cell {
    text-align: left
}

.d-table>.d-table-cell.right-icon-cell {
    width: 7%;
    text-align: right
}

.nav-stepper-container {
    position: relative;
    font-size: 1.2rem;
    width: 100%;
    margin: 1rem 0
}

ul.qbc-nav-stepper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0;
    margin: auto;
    overflow-x: auto
}

.qbc-nav-stepper>li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex: 1 25%;
    margin: 0 !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    align-self: stretch !important;
    -ms-flex-item-align: stretch !important;
    -ms-grid-row-align: stretch !important;
    -webkit-transition: .5s;
    transition: .5s
}

.qbc-nav-stepper li.block {
    cursor: default;
    pointer-events: none
}

.qbc-nav-stepper li:not(.block):hover {
    background-color: rgba(0, 0, 0, .06)
}

.qbc-nav-stepper:not(.arrow-style) li:not(:first-child):before,
.qbc-nav-stepper:not(.arrow-style) li:not(:last-child):after {
    position: absolute;
    height: 1px;
    top: 2.2rem;
    width: 42%;
    content: "";
    background-color: rgba(0, 0, 0, .1)
}

.qbc-nav-stepper:not(.arrow-style) li:not(:first-child):before {
    left: 0
}

.qbc-nav-stepper:not(.arrow-style) li:not(:last-child):after {
    right: 0
}

.qbc-nav-stepper:not(.arrow-style) li.active:not(:first-child):before,
.qbc-nav-stepper:not(.arrow-style) li.active:not(:last-child):after,
.qbc-nav-stepper:not(.arrow-style) li.completed:not(:first-child):before,
.qbc-nav-stepper:not(.arrow-style) li.completed:not(:last-child):after {
    background-color: #009aea
}

.qbc-nav-stepper.arrow-style li:not(:last-child):after {
    font-family: qbc-icons;
    content: "\e959";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 3rem;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out
}

ul.qbc-nav-stepper li a {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    padding: 0 .5rem;
    width: 100%
}

ul.qbc-nav-stepper.arrow-style li a {
    flex: 1
}

ul.qbc-nav-stepper li a .circle {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    line-height: 2.5rem
}

ul.qbc-nav-stepper li a .label {
    margin-top: .8rem
}

ul.qbc-nav-stepper li.completed {
    opacity: .85
}

ul.qbc-nav-stepper li.completed a .label {
    font-weight: 500
}

ul.qbc-nav-stepper li.completed a .circle {
    background-color: #36aef7 !important
}

.stepper-tabs .nav {
    position: relative;
    overflow-x: hidden;
    white-space: nowrap
}

.stepper-tabs .nav li {
    position: relative;
    width: 33.33%;
    flex: 1
}

.stepper-tabs .nav li a {
    display: block;
    text-align: center;
    padding: 1rem;
    padding-top: 1.8rem;
    color: #0091ea;
    white-space: normal !important
}

.stepper-tabs .nav li a,
.stepper-tabs .nav li a>.qbc-icons {
    color: #0086d8
}

.stepper-tabs .nav li.active a,
.stepper-tabs .nav li.active a>.qbc-icons {
    color: #0da3ff
}

.stepper-tabs .nav li.active~li a,
.stepper-tabs .nav li.active~li a>.qbc-icons {
    color: #9da2a7
}

.stepper-tabs .nav li:first-child:before,
.stepper-tabs .nav li:last-child:after {
    content: none
}

.stepper-tabs .nav li:after,
.stepper-tabs .nav li:before {
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border-top: solid 2px #697b91;
    border-right: solid 2px #697b91;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    right: 0;
    margin-top: -4px
}

.stepper-tabs .nav li:before {
    left: -9px
}

.stepper-tabs .nav li a .qbc-icons {
    margin-bottom: .8rem
}

.stepper-tabs .tab-content {
    padding: 1rem
}

.nav-progress-stepper .md-progress.cert .progress-bar {
    background: #212121
}

.nav-progress-stepper .md-progress .progress-bar {
    background: #212121;
    background: linear-gradient(90deg, #0091ea 40%, rgb(140 211 255) 75%)
}

.nav-progress-stepper .md-progress.step-1 .progress-bar {
    width: 50%;
    background: linear-gradient(90deg, #0091ea 50%, rgb(140 211 255) 100%)
}

.nav-progress-stepper .md-progress.step-1 .progress-desc {
    display: none
}

.nav-progress-stepper .md-progress.step-2 .progress-bar {
    width: 100%;
    background: linear-gradient(90deg, #0091ea 50%, rgb(140 211 255) 100%)
}

.nav-progress-stepper .md-progress.step-2 .progress-desc {
    width: calc((100% / 3) * 2)
}

.nav-progress-stepper .md-progress.step-2.false .progress-bar,
.nav-progress-stepper .md-progress.step-3 .progress-bar {
    width: 100%;
    background: linear-gradient(90deg, #0091ea 50%, rgb(140 211 255) 100%)
}

.nav-progress-stepper .md-progress.step-3 .progress-desc {
    width: 100%
}

.nav-progress-stepper.w4reupload .md-progress .progress-bar {
    background: #212121;
    background: linear-gradient(90deg, #0091ea 40%, #fa0 75%)
}

.nav-progress-stepper.w4reupload .md-progress .progress-bar {
    background: #212121;
    background: linear-gradient(90deg, #0091ea 40%, #fa0 75%)
}

.nav-progress-stepper .step-content {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important
}

.nav-progress-stepper .step-content .action-wrap {
    min-width: 150px;
    text-align: right;
    margin-left: 1.6rem
}

.nav-progress-stepper .step-content .action-wrap .btn {
    margin: 0;
    width: 100%
}

ul.qbc-progress-stepper {
    position: relative;
    width: 100%;
    font-size: 1.2rem
}

ul.qbc-progress-stepper li {
    flex: 1 1 auto
}

.qbc-step.step {
    list-style: none;
    margin: 0
}

.qbc-step .step-element {
    display: flex;
    padding: 1rem 0
}

.qbc-step .step-number {
    position: relative;
    width: 7rem;
    flex-shrink: 0;
    text-align: center
}

.qbc-step .step-number .number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #4facfe;
    font-size: 2rem;
    font-weight: 700;
    width: 4rem;
    height: 4rem;
    border-radius: 10rem
}

.qbc-step .step-number::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 48px;
    bottom: -2rem;
    margin-left: -1px;
    border-left: 2px dashed #eaeff4
}

.qbc-step.step .step-element:last-child .step-number::before {
    bottom: 1rem
}

@media (max-width:767px) {
    .qbc-nav-stepper>li {
        min-width: 50%
    }

    .nav-progress-stepper .step-content .action-wrap {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 1.6rem
    }

    .nav-progress-stepper {
        font-size: 1.4rem
    }

    .stepper-tabs .nav li {
        width: 100%;
        flex: auto
    }

    .stepper-tabs .nav li a {
        font-size: 1.4rem;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .stepper-tabs .nav li:after,
    .stepper-tabs .nav li:before {
        content: none
    }

    .stepper-tabs .nav li a .qbc-icons {
        margin-bottom: 0;
        margin-right: .8rem
    }
}

.nav-tabs.qbc-tabs {
    position: relative;
    z-index: 1;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.nav-tabs.qbc-tabs.tab-card {
    z-index: auto
}

.nav-tabs.qbc-tabs.rounded-top-3 {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem
}

.nav-tabs.qbc-tabs .nav-item {
    margin: 0 1rem;
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-bottom: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.nav-tabs.qbc-tabs.tab-card .nav-item {
    border: none;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

.nav-tabs.qbc-tabs.rounded-top-3 .nav-item {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem
}

.nav-tabs.qbc-tabs .nav-item:first-of-type {
    margin-left: 0
}

.nav-tabs.qbc-tabs .nav-item:last-of-type {
    margin-right: 0
}

.nav-tabs.qbc-tabs .nav-link {
    margin: 0;
    padding: 1.6rem;
    padding-bottom: 1.7rem;
    color: #212121;
    border: 0;
    background-color: #f2f2f2 !important;
    height: 100%
}

.nav-tabs.qbc-tabs.tab-card .nav-link {
    padding-bottom: 1.9rem;
    color: #8b8b8b
}

.nav-tabs.qbc-tabs .nav-item.show .nav-link {
    border-radius: 0;
    border-color: transparent
}

.nav-tabs.qbc-tabs .nav-link.active,
.nav-tabs.qbc-tabs .nav-link:focus,
.nav-tabs.qbc-tabs .nav-link:hover {
    color: #0091ea;
    background-color: #fff !important
}

.nav-tabs.qbc-tabs .dropdown {
    position: initial
}

.nav-tabs.qbc-tabs .dropdown-menu {
    margin-top: 0;
    box-shadow: inset 0 1px 2px 1px rgb(0 0 0 / 15%), 0 2px 6px 0 rgb(0 0 0 / 18%);
    -webkit-box-shadow: inset 0 1px 2px 1px rgb(0 0 0 / 15%), 0 2px 6px 0 rgb(0 0 0 / 18%);
    -moz-box-shadow: inset 0 1px 2px 1px rgb(0 0 0 / 15%), 0 2px 6px 0 rgb(0 0 0 / 18%)
}

.filter-toggle.dropdown-toggle::after {
    content: none;
    border: 0
}

.nav-tabs.qbc-tabs~.tab-content {
    margin-top: -1px;
    border: 1px solid #dee2e6;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem
}

.nav-tabs.qbc-tabs.rounded-top-3~.tab-content,
.nav-tabs.qbc-tabs.rounded-top-3~.tab-content .tab-pane {
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem
}

.nav-tabs.qbc-pure-tabs {
    position: relative;
    z-index: 1;
    background-color: #fff;
    padding: 0;
    border: 0
}

.nav-tabs.qbc-pure-tabs .nav-link {
    border: 0;
    border-radius: 0;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem
}

.nav-tabs.qbc-pure-tabs .nav-link~div.bar {
    width: 60px;
    height: 3px;
    margin: auto;
    border-radius: .4rem
}

.nav-tabs.qbc-pure-tabs .nav-link.active,
.nav-tabs.qbc-pure-tabs .nav-link:active,
.nav-tabs.qbc-pure-tabs .nav-link:focus,
.nav-tabs.qbc-pure-tabs .nav-link:hover {
    color: #0091ea;
    background-color: #fff !important;
    outline: 0
}

.nav-tabs.qbc-pure-tabs .nav-link.active~div.bar,
.nav-tabs.qbc-pure-tabs .nav-link:active~div.bar,
.nav-tabs.qbc-pure-tabs .nav-link:focus~div.bar,
.nav-tabs.qbc-pure-tabs .nav-link:hover~div.bar {
    background-color: #0091ea
}

.modal-tab.nav-tabs .nav-link.active,
.modal-tab.nav-tabs .nav-link:active,
.modal-tab.nav-tabs .nav-link:focus,
.modal-tab.nav-tabs .nav-link:hover {
    background: #fff;
    font-weight: 600;
    color: #0091ea;
    border-radius: 5px;
    border: 1px solid
}

@media (max-width:767px) {
    .nav-tabs.qbc-tabs {
        margin-right: 0;
        margin-left: 0
    }

    .nav-tabs.qbc-tabs .nav-item {
        margin: 0 .5rem
    }

    .nav-tabs.qbc-tabs~.tab-content.border-sm-0 {
        border-left: 0;
        border-right: 0;
        border-top: 0
    }

    .nav-progress-stepper .step-content {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important
    }
}

.termsHelpsTitle {
    font-weight: 600;
    border-bottom: solid 4px #0091ea;
    padding-bottom: .5rem
}

.stepBox {
    position: relative;
    padding: 2rem 1rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
    border-radius: .4rem;
    border: 3px solid #ddd
}

.stepBox:not(:last-of-type):after {
    content: '';
    margin: 0 auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: solid 25px #ddd;
    border-left: solid 35px transparent;
    border-right: solid 35px transparent
}

.stepBox h6 {
    font-size: 1.4rem;
    font-weight: 600;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid #ddd
}

.stepBox p.stepContent {
    margin-top: 1.6rem;
    margin-bottom: 0;
    text-align: center
}

.stepBox .stepContent img {
    vertical-align: bottom;
    width: 85%
}

.stepBox .stepContent img.apphelps {
    width: 45%
}

.terms-section {
    font-size: 1.4rem
}

.terms-section h2 {
    font-size: 2rem;
    font-weight: 600;
    margin: 2rem 0
}

.terms-section h3 {
    font-size: 1.6rem;
    font-weight: 600;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid #0091ea
}

.terms-section table {
    width: 100%;
    margin-bottom: 2rem
}

.qrcode-wrap {
    display: flex;
    justify-content: center;
    align-items: center
}

.qrcode-wrap.has-label {
    padding: 2rem 0
}

.qrcode-wrap>canvas {
    width: 12rem;
    background-color: #fff;
    padding: .8rem;
    border: 1px solid #eaeaea;
    border-radius: .4rem;
    -webkit-box-shadow: 0 1px 5px 0 rgb(0 0 0 / 16%), 0 1px 5px 0 rgb(0 0 0 / 12%) !important;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 16%), 0 1px 5px 0 rgb(0 0 0 / 12%) !important;
    transition: transform .35s ease
}

.qrcode-wrap.large>canvas {
    width: 20rem
}

.qrcode-wrap.small>canvas {
    width: 8rem;
    padding: .4rem
}

.qrcode-wrap.rem10>canvas {
    width: 10rem
}

#qrCodeContent {
    pointer-events: none
}

#qrCodeContent.qrcode-wrap>canvas:hover {
    transform: none
}

.qrcode-wrap>canvas:hover {
    transform: scale(1.1);
    cursor: zoom-in
}

@media (max-width:767px) {
    .qrcode-wrap.has-label {
        padding: 4.5rem 0
    }
}

.navigation {
    width: 100%;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    border-top: 1px solid #dee2e6
}

.navigation .button-wrap,
.navigation .finish-wrap,
.navigation .loading-wrap {
    height: 5rem
}

.navigation.finish,
.navigation.loading {
    border-top: 0
}

.navigation.finish {
    margin-top: 0
}

.navigation .finish-wrap,
.navigation .loading-wrap,
.navigation.finish .button-wrap,
.navigation.loading .button-wrap {
    display: none
}

.navigation.loading .loading-wrap {
    display: block
}

.navigation.finish .finish-wrap {
    display: block
}

.upload-section .uploadzone {
    font-size: 16px;
    background: #fff;
    box-sizing: border-box
}

.default-section,
.preview-section {
    position: relative;
    display: none;
    vertical-align: middle;
    text-align: center;
    margin: .5rem
}

.uploadzone .preview-section.active {
    display: block
}

.uploadzone .default-section {
    display: block;
    cursor: pointer
}

.uploadzone.preview .default-section {
    display: none
}

.default-section .default-image {
    padding: 1rem;
    max-height: 20rem;
    margin: auto
}

.preview-section .upload-image {
    padding-top: 1rem;
    overflow: hidden;
    width: inherit;
    height: inherit;
    position: relative;
    display: inline-block;
    z-index: 10
}

.preview-section .upload-image img {
    max-height: 20rem;
    max-width: 50rem;
    border-radius: .4rem
}

.uploadzone.preview.mutiple {
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    min-height: 230px
}

.uploadzone.preview.mutiple .uploadzone.preview .preview-section {
    display: inherit;
    align-self: stretch;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center
}

.uploadzone.preview.mutiple .preview-section .upload-image {
    padding-bottom: 0
}

.uploadzone.preview.mutiple .preview-section .upload-image img {
    height: 130px
}

.uploadzone.preview .preview-section .remove-image {
    position: absolute;
    cursor: pointer;
    display: block;
    font-size: 1.2rem;
    width: 3rem;
    top: 1.5rem;
    right: 1rem;
    z-index: 9999;
    background-color: rgba(255, 255, 255, .8);
    padding: .3rem;
    border-radius: 3px
}

.uploadzone.preview .preview-section .remove-image .qbc-font {
    color: #000;
    font-size: 1.4em
}

.preview-section:hover .upload-image img {
    -webkit-transform: scale(1.01, 1.01);
    -moz-transform: scale(1.01, 1.01);
    -ms-transform: scale(1.01, 1.01);
    -o-transform: scale(1.01, 1.01);
    transform: scale(1.01, 1.01);
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.preview-section .upload-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    font-size: 1rem;
    padding: 2em 1em;
    margin: auto;
    opacity: 0;
    color: rgba(0, 0, 0, .9);
    -webkit-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -ms-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.preview-section:hover .upload-details {
    opacity: 1;
    margin: auto;
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.preview-section:hover .upload-details .up-filename,
.preview-section:hover .upload-details .up-size {
    background-color: rgba(255, 255, 255, .4);
    padding: .3em;
    border-radius: 3px;
    margin-bottom: .3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.btn-section {
    position: relative;
    text-align: center;
    border-top: 1px solid #f2f2f2;
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding-top: .5rem
}

.upload-btn-action a.btn {
    padding-top: .5rem
}

@media (max-width:767px) {
    .uploadzone .preview-section.mutiple:last-child {
        margin-bottom: 1rem
    }

    .btn-section .btn-other-upload {
        width: 350px;
        font-size: 20px
    }

    .default-section .default-image {
        max-height: 16rem
    }

    .preview-section .upload-image img {
        max-height: 16rem
    }
}

.tick {
    width: 50%;
    max-width: 280px;
    padding-top: 1rem;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
}

.tick>div {
    font-size: 3.2rem !important
}

.tick-label {
    font-size: .435em;
    text-align: center;
    font-weight: 700
}

.tick-group {
    margin: 0 .25em;
    text-align: center
}

.tick .tick-credits {
    display: none
}

.tick-flip-panel-back-text,
.tick-flip-panel-front-text {
    font-weight: 700
}

@media (max-width:767px) {
    .tick {
        width: 100%;
        max-width: 300px;
        padding-top: 2rem
    }
}

.qbc-countdown {
    position: relative;
    font-size: 1.6rem;
    color: #212121
}

.qbc-countdown.expired {
    color: #f55a00
}

.qbc-countdown ul {
    margin: 0;
    display: inline-flex;
    padding: 0
}

.qbc-countdown li {
    display: inline-block;
    list-style-type: none;
    padding: 0 .3rem;
    text-transform: uppercase
}

.qbc-countdown li .unit {
    font-size: .65em;
    color: #626262;
    font-weight: 500;
    margin-left: .5rem
}

.qbc-load-page>.container {
    padding: 0
}

.btn.tag {
    min-width: 150px
}

.btn.tag.all {
    color: #212121 !important;
    border: 2px solid #212121 !important
}

.btn.tag.notice {
    color: #66bdf2 !important;
    border: 2px solid #66bdf2 !important
}

.btn.tag.blog,
.btn.tag.release {
    color: #6c63ff !important;
    border: 2px solid #6c63ff !important
}

.btn.tag.campaign {
    color: #f9619f !important;
    border: 2px solid #f9619f !important
}

.btn.tag.all.active {
    color: #fff !important;
    background-color: #212121 !important
}

.badge.tag {
    padding: .8em .4em;
    line-height: 1;
    min-width: 110px
}

.badge.tag.notice,
.btn.tag.notice.active {
    color: #fff !important;
    background-color: #66bdf2 !important
}

.badge.tag.blog,
.badge.tag.release,
.btn.tag.blog.active,
.btn.tag.release.active {
    color: #fff !important;
    background-color: #6c63ff !important
}

.badge.tag.campaign,
.btn.tag.campaign.active {
    color: #fff !important;
    background-color: #f9619f !important
}

.breadcrum-wrap {
    background: #fdfdfd
}

.breadcrum-wrap .breadcrumb {
    background: 0 0;
    margin-bottom: 0;
    padding: 1rem 1.6rem;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.2rem
}

.breadcrum-wrap .breadcrumb a:hover {
    text-decoration: underline !important
}

.breadcrumb-item.active {
    color: #484848
}

.bg-banner-0 {
    background-image: url(/img/scoupon/banner1-e6c7f5b084e08ad5d64a334ecc75b22f.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.bg-banner-1 {
    background-image: url(/img/scoupon/banner2-726d032fce72ef8413a46e02c443a236.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.bg-banner-2 {
    background-image: url(/img/scoupon/banner3-63136548d5cc1dea49aa618f9193c2d0.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.bg-banner-3 {
    background-image: url(/img/scoupon/banner4-cf31d0a16bb813e8847ba68ce157fd7d.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.bg-banner-4 {
    background-image: url(/img/scoupon/banner5-27cb729fc55665da9273606a34a9910c.jpg);
    background-repeat: no-repeat;
    background-size: cover
}

.bankCardImg {
    width: 400px;
    position: relative;
    margin: 0 auto
}

.bankCardImg .img-element {
    position: absolute;
    font-size: 1.8rem;
    letter-spacing: 2px;
    text-shadow: -1px 0 #bdbdbd, 0 -1px #858585, 1px 0 #404040, 0 1px #9b9b9b;
    background: -moz-linear-gradient(45deg, #bdc0c2, #e9eaea 50%, #bdc0c2);
    background: -webkit-linear-gradient(45deg, #bdc0c2, #e9eaea 50%, #bdc0c2);
    background: linear-gradient(45deg, #bdc0c2, #e9eaea 50%, #bdc0c2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.bankCardImg.yccard .accountNo {
    top: 140px;
    left: 110px
}

.bankCardImg.yccard .seriesCode {
    top: 185px;
    left: 110px
}

@media (max-width:767px) {
    .bankCardImg {
        width: 300px
    }

    .bankCardImg .img-element {
        font-size: 1.6rem
    }

    .bankCardImg.yccard .accountNo {
        top: 105px;
        left: 60px
    }

    .bankCardImg.yccard .seriesCode {
        top: 138px;
        left: 60px
    }
}

.ribbon-wrap {
    text-align: center
}

.qbc-ribbon {
    --d: 5px;
    --c: #ff1f1f;
    --f: 12px;
    position: relative
}

.qbc-ribbon::after {
    content: attr(data-ribbon);
    position: absolute;
    font-size: var(--f);
    top: 0;
    right: 0;
    min-width: 100px;
    max-width: 140px;
    max-height: 60px;
    transform: translate(29.29%, -100%) rotate(45deg);
    color: #fff;
    text-align: center;
    border: 1px solid transparent;
    border-bottom: 0;
    transform-origin: bottom left;
    padding: 5px 28px calc(var(--d) + 5px);
    background: linear-gradient(rgba(0, 0, 0, .5) 0 0) bottom/100% var(--d) no-repeat var(--c);
    background: -webkit-linear-gradient(to right, #ff4928, #f51044);
    background: linear-gradient(to right, #ff4928, #f51044);
    background-clip: padding-box;
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)), 0 100%);
    -webkit-mask: linear-gradient(135deg, transparent calc(50% - var(--d) * .707), #fff 0) bottom left, linear-gradient(-135deg, transparent calc(50% - var(--d) * .707), #fff 0) bottom right;
    -webkit-mask-size: 300vmax 300vmax;
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    z-index: 3
}

.qbc-ribbon.left::after {
    left: 0;
    right: auto;
    transform: translate(0, 145%) rotate(-45deg)
}

.qbc-ribbon.mw180::after {
    max-width: 180px
}

.qbc-ribbon.mw140::after {
    max-width: 140px
}

.qbc-ribbon.left::before {
    left: 0;
    right: auto;
    transform: translate(-29.29%, -100%) rotate(-45deg);
    transform-origin: bottom right
}

.qbc-ribbon2 {
    display: inline-block;
    position: relative;
    height: 45px;
    text-align: center;
    box-sizing: border-box;
    -webkit-animation: main 250ms;
    -moz-animation: main 250ms;
    -ms-animation: main 250ms;
    animation: main 250ms
}

.qbc-ribbon2:before {
    content: '';
    position: absolute;
    width: 10px;
    bottom: -25px;
    left: -35px;
    z-index: -2;
    border: 25px solid #3ca8ff;
    border-left-color: transparent;
    -webkit-animation: back .6s;
    -moz-animation: back .6s;
    -ms-animation: back .6s;
    animation: back .6s;
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.qbc-ribbon2:after {
    content: '';
    position: absolute;
    width: 10px;
    bottom: -25px;
    right: -35px;
    z-index: -2;
    border: 25px solid #3ca8ff;
    border-right-color: transparent;
    -webkit-animation: back .6s;
    -moz-animation: back .6s;
    -ms-animation: back .6s;
    animation: back .6s;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
}

.qbc-ribbon2 .ribbon-text {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 1rem 2rem;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    background: #0091ea;
    min-width: 300px
}

.qbc-ribbon2 .ribbon-text:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #397eb5;
    -webkit-animation: edge .5s;
    -moz-animation: edge .5s;
    -ms-animation: edge .5s;
    animation: edge .5s
}

.qbc-ribbon2 .ribbon-text:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #397eb5;
    -webkit-animation: edge .5s;
    -moz-animation: edge .5s;
    -ms-animation: edge .5s;
    animation: edge .5s
}

@-webkit-keyframes main {
    0% {
        -webkit-transform: scaleX(0)
    }

    100% {
        -webkit-transform: scaleX(1)
    }
}

@-webkit-keyframes edge {

    0%,
    50% {
        -webkit-transform: scaleY(0)
    }

    100% {
        -webkit-transform: scaleY(1)
    }
}

@-webkit-keyframes back {

    0%,
    75% {
        -webkit-transform: scaleX(0)
    }

    100% {
        -webkit-transform: scaleX(1)
    }
}

@-moz-keyframes main {
    0% {
        -moz-transform: scaleX(0)
    }

    100% {
        -moz-transform: scaleX(1)
    }
}

@-moz-keyframes edge {

    0%,
    50% {
        -moz-transform: scaleY(0)
    }

    100% {
        -moz-transform: scaleY(1)
    }
}

@-moz-keyframes back {

    0%,
    75% {
        -moz-transform: scaleX(0)
    }

    100% {
        -moz-transform: scaleX(1)
    }
}

@keyframes main {
    0% {
        transform: scaleX(0)
    }

    100% {
        transform: scaleX(1)
    }
}

@keyframes edge {

    0%,
    50% {
        transform: scaleY(0)
    }

    100% {
        transform: scaleY(1)
    }
}

@keyframes back {

    0%,
    75% {
        transform: scaleX(0)
    }

    100% {
        transform: scaleX(1)
    }
}

@media (max-width :767px) {

    .qbc-ribbon2:after,
    .qbc-ribbon2:before {
        content: none
    }
}

.article h5.title {
    border-bottom: 1px solid #0091ea;
    border-top: 1px solid #0091ea;
    margin-bottom: 2rem
}

.article h5>.pure-title {
    font-weight: 600;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    margin-left: 1.5rem
}

.article h6.title {
    font-weight: 500;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 1.5rem;
    background-color: #f1f2f3 !important
}

.article h5>.pure-title {
    font-weight: 600;
    margin-bottom: 1.5rem
}

.article ul.list-group-flush>li:last-child {
    border-bottom: none !important
}

.article ol,
.article p,
.article ul {
    line-height: 3rem
}

.cor-img {
    height: 35rem;
    width: 35rem;
    border-radius: 50%;
    padding: .2rem;
    margin: 0 auto
}

.cor-img img {
    width: 100%;
    height: auto
}

.bg-corp {
    background: url(/img/top/pfx-biz-bg-b8a3154e00a3560f632c56259153570b.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: space
}

.bg-supportdial {
    background: url(/img/corporate/pfx-newweb-ba-supportdial-bg-df4a99fa26cf239b241b1c3fb34be844.jpg);
    background-repeat: space;
    background-size: cover
}

.border-arrow {
    position: relative;
    display: inline-block;
    margin: 6.5rem 0;
    width: 100%;
    border-bottom: solid 4px #212121;
    box-sizing: border-box
}

.border-arrow:before {
    content: "";
    position: absolute;
    border: 26px solid transparent;
    border-top: 26px solid #fff;
    z-index: 2;
    top: -2px;
    left: 50%;
    transform: translateX(-50%)
}

.border-arrow:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border: 30px solid transparent;
    border-top: 30px solid #212121;
    z-index: 1
}

.text-title-underline {
    position: relative;
    display: inline-block
}

.text-title-underline::before {
    position: absolute;
    height: 4px;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    bottom: -12px;
    background: #0091ea;
    border-radius: 0 2px 2px 0
}

.title-bar {
    border-bottom: 4px solid #dee2e6;
    position: relative
}

.bg-supportdial {
    background-position-y: top
}

.bg-primary-light {
    background-color: #65bcf2
}

.text-highlight {
    background: linear-gradient(to bottom, #ffb01e59, orange);
    height: 15px;
    line-height: 0;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 100% 45%
}

.bg-oblique-blue {
    background: #fff;
    background: linear-gradient(174deg, #fff 25%, #65bcf2 25.1% 50%, #65bcf2 50.1% 65%, #fff 65.1%)
}

@media only screen and (max-width :992px) {
    .bg-supportdial {
        background-position: 60%
    }
}

@media(max-width:575.98px) {
    .cor-img {
        height: 30rem;
        width: 30rem
    }

    .bg-supportdial {
        background-position: 20%
    }

    .text-title-underline {
        display: block
    }
}

.filter-wrap .filter-controls {
    width: 100%;
    overflow-x: auto;
    padding-bottom: .8rem;
    margin-bottom: 2.6rem
}

.filter-controls.btn-group .btn.btn-filter {
    font-size: 1.6rem;
    min-width: 180px;
    margin: 0;
    padding: 1.6rem;
    font-weight: 700;
    border: 2px solid #0091ea;
    border-right: 0;
    box-shadow: none;
    -webkit-box-shadow: none
}

.filter-controls.btn-group .btn.btn-filter:first-of-type {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem
}

.filter-controls.btn-group .btn.btn-filter:last-of-type {
    border-right: 2px solid #0091ea;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem
}

.btn-filter.active,
.btn-filter:active,
.btn-filter:focus {
    color: #fff;
    background-color: #0091ea
}

.btn-filter:hover {
    color: #212121;
    background-color: #f2f2f2
}

.filter-wrap .filter-item {
    display: none;
    margin-bottom: 2.8rem
}

.filter-wrap .filter-item.show {
    display: block
}

@media(max-width:768px) {
    .filter-controls.btn-group .btn.btn-filter {
        min-width: 180px
    }
}

.note-label:before {
    content: "※";
    padding-right: 2px;
    font-size: 1rem
}

.disc-label:before {
    content: "・";
    padding-right: 2px;
    font-size: 1rem;
    font-weight: 600
}

.cursor-not-allowed {
    cursor: not-allowed !important
}

.cursor-default {
    cursor: default !important
}

.num-ls {
    letter-spacing: .25rem
}

.text-3d {
    text-shadow: #000 2px 2px 6px
}

.text-3d-light {
    text-shadow: #c9c9c9 2px 2px 6px
}

.text-black {
    color: #000
}

.add-info {
    color: #0091ea !important
}

.minus-info {
    color: #ff3547 !important
}

.invalid-info {
    color: #c5c5c5 !important
}

.sticky-download,
.sticky-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    padding: 1.6rem 0;
    background-color: #eaf6fde8;
    min-height: 50px
}

.sticky-footer.inner {
    padding-left: 320px
}

.sticky-footer .btn-close {
    top: -1rem;
    color: #8b8b8b
}

.sticky-footer .btn-top-right {
    top: -2rem;
    right: .8rem;
    color: #8b8b8b;
    transform: none
}

.sticky-flex {
    display: flex
}

.date-format {
    color: #0091ea
}

#recaptcha2 {
    margin-bottom: 2.4rem
}

#recaptcha2:empty {
    margin-bottom: 0
}

.tooltip {
    z-index: 1050
}

#pcoin-card .tooltip {
    z-index: 1020
}

.tooltip.black-tooltip.show .tooltip.red-tooltip.show {
    opacity: 1
}

.tooltip.bs-tooltip-top.black-tooltip,
.tooltip.bs-tooltip-top.red-tooltip {
    top: -20px !important
}

.red-tooltip .arrow::before {
    border-top-color: red !important
}

.black-tooltip .arrow::before {
    border-top-color: #000 !important
}

.red-tooltip .tooltip-inner {
    background: red
}

.black-tooltip .tooltip-inner {
    background: #000
}

.accOpenNavCol.col-12 .card.block-card {
    background: #fff5d3 !important
}

.corp-owner-required::before {
    content: "※";
    display: block;
    position: absolute;
    color: red;
    left: 5px;
    z-index: 1
}

#language .row .checked {
    background: linear-gradient(to right, #c3b6b6 30%, #a0ecff)
}

#language .row .checked::after {
    position: absolute;
    content: ' ';
    width: 10px;
    height: 10px;
    right: 2.2rem;
    bottom: .8rem;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 18%), 0 2px 3px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 18%), 0 2px 3px 0 rgb(0 0 0 / 15%);
    background: -webkit-gradient(radial, center center, 0, center center, 100, from(#fff), to(#006c88));
    background: -webkit-radial-gradient(center, circle cover, #fff, #006c88);
    background: -moz-radial-gradient(center, circle cover, #fff, #006c88);
    background: -o-radial-gradient(center, circle cover, #fff, #006c88);
    background: radial-gradient(#fff, #006c88)
}

.hoverable:hover {
    -webkit-box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
    box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
    -webkit-transition: all .55s ease-in-out !important;
    transition: all .55s ease-in-out !important
}

.copy-wrap {
    cursor: pointer
}

.diagonal-container {
    --dcolor: #000;
    --dsize: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--dcolor)
}

.diagonal-container.text-orange {
    --dcolor: #ff3800
}

.diagonal-container.sm {
    --dsize: 40px
}

.diagonal-container.xsm {
    --dsize: 30px
}

.diagonal-text {
    font-weight: 600
}

.diagonal {
    width: var(--dsize);
    height: var(--dsize);
    margin: 0;
    position: relative;
    overflow: hidden
}

.diagonal:before {
    border-top: 2px solid var(--dcolor);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: -50%;
    transform: rotate(66deg);
    transform-origin: 0 0
}

.diagonal.right:before {
    right: 0;
    left: -50%;
    transform: rotate(-66deg);
    transform-origin: 100% 0
}

@media(max-width:768px) {
    .sticky-flex {
        display: flex;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important
    }

    .accOpenNavCol.col-12 {
        background: #fff5d3 !important
    }

    .accOpenNavCol.col-12 .card.block-card {
        border: 0
    }
}

@media(max-width:1366.98px) {
    .sticky-footer.inner {
        padding-left: 0
    }
}

.bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.bubble li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    background: #4facfe;
    background: -webkit-linear-gradient(to top, rgba(79, 172, 254, .4), rgba(0, 242, 254, .4));
    background: linear-gradient(to top, rgba(79, 172, 254, .4), rgba(0, 242, 254, .4));
    animation: bubble 25s linear infinite;
    bottom: 0;
    z-index: -99
}

.bubble li:nth-child(1) {
    left: 15%;
    width: 80px;
    height: 80px;
    overflow: hidden;
    animation-delay: 0s
}

.bubble li:nth-child(2) {
    left: 25%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s
}

.bubble li:nth-child(3) {
    left: 35%;
    width: 20px;
    height: 20px;
    animation-delay: 4s
}

.bubble li:nth-child(4) {
    left: 4%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 6s
}

.bubble li:nth-child(5) {
    left: 50%;
    width: 20px;
    height: 20px;
    animation-delay: 0s
}

.bubble li:nth-child(6) {
    left: 75%;
    width: 85px;
    height: 85px;
    animation-delay: 6s
}

.bubble li:nth-child(7) {
    left: 65%;
    width: 65px;
    height: 65px;
    animation-delay: 3s
}

.bubble li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 5s;
    animation-duration: 45s
}

.bubble li:nth-child(9) {
    left: 80%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s
}

.bubble li:nth-child(10) {
    left: 95%;
    width: 70px;
    height: 70px;
    animation-delay: 0s;
    animation-duration: 11s
}

.bg-campaign1 {
    background-color: #a2e6c9
}

.bg-campaign2 {
    background-color: #fdf5e5
}

#campaignCarousel .carousel-control-next,
#campaignCarousel .carousel-control-prev {
    top: 50%;
    color: #6e6c6c
}

#campaignCarousel .carousel-item {
    transition-duration: .33s
}

.blockOverlay {
    border-radius: 1rem;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .6;
    z-index: 55;
    background-color: #cdcdcd;
    position: absolute
}

.blockLoader-wrap {
    position: absolute;
    top: 0;
    display: flex;
    align-content: center;
    align-items: center;
    z-index: 66;
    height: 100%;
    width: 100%
}

.blockLoader-wrap .loader {
    margin: 0 auto
}

.line-scale-pulse-out>div {
    background-color: #3f6ad8;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    animation-fill-mode: both;
    display: inline-block;
    animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85)
}

.line-scale-pulse-out>div:nth-child(1),
.line-scale-pulse-out>div:nth-child(5) {
    animation-delay: -.2s !important
}

.line-scale-pulse-out>div:nth-child(2),
.line-scale-pulse-out>div:nth-child(4) {
    animation-delay: -.4s !important
}

.line-scale-pulse-out>div:nth-child(3) {
    animation: line-scale-pulse-out .6s 0s infinite ease-in-out
}

@keyframes line-scale-pulse-out {
    0% {
        transform: scaley(1)
    }

    50% {
        transform: scaley(.4)
    }

    100% {
        transform: scaley(1)
    }
}

ul.timeline.timeline-hstry {
    margin: 0
}

.timeline-main .timeline.timeline-hstry li a,
.timeline-main .timeline.timeline-hstry li:not(:last-child):after {
    left: 40% !important
}

.timeline-main .timeline.timeline-hstry li a .circle {
    width: 55px !important;
    height: 55px !important;
    background-color: #fff !important
}

.timeline.timeline-hstry li .between-content {
    width: 100%;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.timeline.timeline-hstry li .between-content .date-content {
    width: 40%;
    text-align: right;
    padding-right: 50px;
    margin-top: 25px;
    margin-right: 50px
}

.timeline.timeline-hstry li .between-content .date-content span {
    font-size: 1.8rem;
    font-weight: 500
}

.timeline.timeline-hstry li .between-content .step-content {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1.6rem !important;
    width: auto;
    border-radius: 10px !important;
    padding: 2rem
}

.timeline.timeline-hstry li.now .between-content .step-content {
    color: #fff;
    background: #00a6e5db;
    background: linear-gradient(40deg, #00a6e5db, #008adfde) !important
}

.timeline-main .stepper.stepper-vertical.timeline li.now .step-content:after {
    border-right-color: #00a6e5db !important;
    border-left-color: #00a6e5db !important
}

.timeline.timeline-hstry li .between-content .step-content .item-rslt {
    color: #6c757d;
    font-size: 2rem
}

.timeline.timeline-hstry li.now .between-content .step-content .item-rslt {
    color: #fff;
    font-size: 2.4rem
}

ul.timeline.timeline-hstry dl dd {
    margin-bottom: .4rem
}

ul.timeline.timeline-hstry dl dd:last-of-type {
    margin-bottom: 0
}

@media(max-width:768px) {
    ul.timeline.timeline-hstry {
        padding: 1.4rem
    }

    .timeline-main .timeline.timeline-hstry li a,
    .timeline-main .timeline.timeline-hstry li:not(:last-child):after {
        left: 38% !important
    }

    .timeline.timeline-hstry li .between-content .date-content {
        padding-right: 20px;
        margin-right: 20px;
        width: 35% !important
    }

    .timeline.timeline-hstry li .between-content .date-content span {
        font-size: 1.6rem
    }

    .timeline.timeline-hstry li .between-content .step-content {
        left: 0 !important;
        margin-left: 25px !important;
        width: 40% !important
    }

    .timeline-main .timeline.timeline-hstry li a .circle {
        margin-left: -50px !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 35px !important
    }

    .timeline-main .timeline.timeline-hstry li a .circle img {
        width: 3.2rem !important
    }
}

.bg-contest {
    background-image: url(/img/contest/winner_red_curtains-2dae6a97f2c905a439b03a381c43b28b.png);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: space
}

.expired-stamp {
    transform: rotate(23deg);
    color: #555;
    font-size: 1.6rem;
    font-weight: 600;
    border: .25rem solid #555;
    display: inline-block;
    padding: .25rem 1rem;
    text-transform: uppercase;
    border-radius: 1rem;
    position: absolute;
    line-height: 1.8;
    bottom: 30%;
    right: 10%
}

.pcoin-gradient {
    background-image: linear-gradient(25deg, #dcaf28 30%, #ebc21c 20%, #dcaf28 60%)
}

ul.ratings {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0
}

ul.ratings li {
    display: inline
}

ul.ratings li .fa-regular.fa-star {
    color: #6c757d
}

ul.ratings li .fa-regular.fa-star {
    color: #6c757d
}

ul.ratings li .fa-solid.fa-star {
    color: orange
}

#channelCommentModal .modal-content.sp-content {
    max-height: 90vh
}

.comment-body {
    height: 55vh
}

.comment-body .comment-content a {
    color: #0091ea
}

.comment-footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border: 0;
    box-shadow: 0 0 13px #a6a6a680
}

.comment-footer>* {
    margin: 0
}

.channel-icon {
    position: absolute;
    z-index: 9;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%)
}

.read-all {
    display: none;
    color: #0091ea;
    text-align: right;
    padding-right: 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    cursor: pointer
}

.read-all.active {
    display: block
}

.select-view {
    opacity: .6
}

.select-view.selected {
    opacity: 1
}

.select-view.selected::after {
    font-family: qbc-icons;
    content: "\e93a";
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #0091ea;
    font-size: 2.6rem;
    text-shadow: none;
    background-color: #fff;
    border-radius: 5rem;
    padding: 0 .5rem 0;
    background: radial-gradient(circle at 49%, #fff, #fcfcfc 50%, #ffffff00 75%, #ffffff00 75%)
}