@charset "UTF-8";

@font-face {
    font-family: PlaywriteUSTrad;
    src: url(../fonts/PlaywriteUSTrad-Regular.ttf)
}

@font-face {
    font-family: REM;
    src: url(../fonts/REM-Regular.ttf)
}

@font-face {
    font-family: REM-light;
    src: url(../fonts/REM-Light.ttf)
}

@font-face {
    font-family: REM-LightItalic;
    src: url(../fonts/REM-LightItalic.ttf)
}

@font-face {
    font-family: REM-Italic;
    src: url(../fonts/REM-Italic.ttf)
}

@font-face {
    font-family: REM-Medium;
    src: url(../fonts/REM-Medium.ttf)
}

@font-face {
    font-family: REM-MediumItalic;
    src: url(../fonts/REM-MediumItalic.ttf)
}

@font-face {
    font-family: REM-SemiBold;
    src: url(../fonts/REM-SemiBold.ttf)
}

@font-face {
    font-family: REM-Bold;
    src: url(../fonts/REM-Bold.ttf)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body,
html {
    background-color: #f8f4e9;
    font-family: REM;
    font-size: 1rem;
    color: #575252
}

img {
    max-width: 100%;
    height: auto
}

button:focus {
    outline: 0
}

.title-global {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #575252;
    line-height: 1.25
}

@media (max-width:1440px) {
    .title-global {
        font-size: 1.75rem
    }
}

@media (max-width:992px) {
    .title-global {
        font-size: 1.5rem
    }
}

@media (max-width:576px) {
    .title-global {
        font-size: 2rem
    }
}

@media (max-width:380px) {
    .title-global {
        font-size: 1.75rem
    }
}

.fixed-container {
    position: fixed;
    z-index: 5;
    right: 3%;
    top: 20%
}

@media (max-width:1100px) {
    .fixed-container {
        right: 2%
    }
}

@media (max-width:576px) {
    .fixed-container {
        display: none
    }
}

.fixed-container .fixed-content {
    position: relative
}

.fixed-container .img-sticky-bg {
    width: 4.5vw;
    max-width: 10vw
}

@media (max-width:1250px) {
    .fixed-container .img-sticky-bg {
        width: 5vw
    }
}

@media (max-width:1150px) {
    .fixed-container .img-sticky-bg {
        width: 5vw
    }
}

@media (max-width:992px) {
    .fixed-container .img-sticky-bg {
        width: 60px
    }
}

.fixed-container .fixed-detail {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 8%
}

.fixed-container .fixed-detail {
    text-align: center
}

.fixed-container .fixed-title {
    white-space: nowrap;
    font-size: .8rem;
    color: #fff;
    margin-bottom: 1rem
}

@media (max-width:1150px) {
    .fixed-container .fixed-title {
        margin-bottom: .5rem
    }
}

.fixed-container .fixed-item {
    margin-bottom: 1rem
}

.fixed-container .fixed-item img {
    width: 50%;
    max-width: 32px
}

@media (max-width:1500px) {
    .fixed-container .fixed-item {
        margin-bottom: .65rem
    }
}

@media (max-width:1150px) {
    .fixed-container .fixed-item {
        margin-bottom: .5rem
    }
}

.mb {
    display: none !important
}

@media (max-width:576px) {
    .pc {
        display: none !important
    }

    .mb {
        display: block !important
    }
}

.page-container {
    padding: 0 12%
}

@media (max-width:1600px) {
    .page-container {
        padding: 0 10%
    }
}

@media (max-width:992px) {
    .page-container {
        padding: 0 5%
    }
}

@media (max-width:440px) {
    .page-container {
        padding: 0 15px
    }
}

.navbar {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    background-color: transparent;
    background-color: #f8f4e9;
    top: 0;
    width: 100%;
    padding: .5rem 12%
}

@media (max-width:1600px) {
    .navbar {
        padding: .5rem 10%
    }
}

@media (max-width:992px) {
    .navbar {
        padding: .25rem 5%
    }
}

.navbar .navbar-brand .logo {
    max-width: 180px
}

@media (max-width:1100px) {
    .navbar .navbar-brand .logo {
        max-width: 130px
    }
}

.navbar .navbar-brand .logo.color {
    display: none
}

@media (max-width:576px) {
    .navbar .navbar-brand .logo {
        max-width: 165px
    }
}

@media (max-width:768px) {
    .navbar .navbar-toggler-icon {
        background-image: url(../images/navbar-icon-mb.png)
    }
}

.navbar .navbar-collapse {
    justify-content: flex-end
}

@media (max-width:768px) {
    .navbar .navbar-collapse {
        padding: 1rem 0;
        -webkit-box-shadow: rgba(33, 35, 38, .1) 0 10px 10px -10px;
        -moz-box-shadow: rgba(33, 35, 38, .1) 0 10px 10px -10px;
        box-shadow: rgba(33, 35, 38, .1) 0 10px 10px -10px
    }
}

.navbar .navbar-collapse .nav-item {
    position: relative
}

.navbar .navbar-collapse .nav-item .nav-link {
    color: #2c2c2c;
    background-color: transparent;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center
}

@media (max-width:1200px) {
    .navbar .navbar-collapse .nav-item .nav-link {
        font-size: 90%;
        padding-left: 1rem;
        padding-right: 1rem
    }
}

@media (max-width:1024px) {
    .navbar .navbar-collapse .nav-item .nav-link {
        font-size: 80%;
        padding-left: .75rem;
        padding-right: .75rem
    }
}

@media (max-width:768px) {
    .navbar .navbar-collapse .nav-item .nav-link {
        width: max-content
    }
}

@media (max-width:576px) {
    .navbar .navbar-collapse .nav-item .nav-link {
        font-size: 1rem
    }
}

.navbar .navbar-collapse .nav-item .nav-link .icon-menu {
    width: 18px;
    margin-right: 5px
}

.navbar .navbar-collapse .nav-item .nav-link .icon-menu.black {
    display: none
}

@media (max-width:992px) {
    .navbar .navbar-collapse .nav-item .nav-link .icon-menu {
        width: auto;
        max-width: 15px;
        max-height: 15px
    }
}

.navbar .navbar-collapse .nav-item .nav-link.active {
    background: #2c2c2c;
    color: #fff
}

.navbar .navbar-collapse .nav-item .nav-link.active .icon-menu.black {
    display: block
}

.navbar .navbar-collapse .nav-item .nav-link.active .icon-menu.white {
    display: none
}

.navbar.scrolled {
    background: #f8f4e9
}

.navbar.scrolled .navbar-brand .logo.color {
    display: block !important
}

.navbar.scrolled .navbar-icon-custom .toggle-icon-mb {
    display: none
}

.navbar.scrolled .navbar-icon-custom .toggle-icon-mb.color {
    display: block !important
}

.navbar .btn-view-sample {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    font-size: 90%
}

.navbar .btn-view-sample .btn-icon {
    width: 16px;
    margin-left: 5px
}

.menu-custom-mb {
    display: none
}

@media (max-width:576px) {
    .menu-custom-mb {
        display: block
    }
}

.menu-custom-mb .menu-control {
    display: none
}

.menu-custom-mb .menu-control:checked+.sidebar {
    transform: translatex(0)
}

.menu-custom-mb .menu-control:checked+.sidebar .sidebar__close {
    transform: translatex(0) rotate(45deg)
}

.menu-custom-mb .menu-control:checked+.sidebar .sidebar__menu a {
    transform: translatex(0)
}

.menu-custom-mb .sidebar {
    overflow: hidden;
    height: 100vh;
    width: 320px;
    background-image: url(../images/bg-sidebar.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1111111;
    padding: 0 0 0 1rem;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .4s ease-in-out
}

.menu-custom-mb .sidebar__close {
    position: absolute;
    top: 12vh;
    left: 12px;
    background: 0 0;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, .03);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translatex(-100%);
    cursor: pointer;
    transition: transform .4s ease-in-out .2s
}

.menu-custom-mb .sidebar__close::after,
.menu-custom-mb .sidebar__close::before {
    content: "";
    height: 2px;
    background: #fff;
    width: 24px;
    display: block;
    position: absolute
}

.menu-custom-mb .sidebar__close::after {
    transform: rotate(90deg)
}

.menu-custom-mb .sidebar__menu {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    margin-top: 12vh;
    margin-bottom: 0;
    color: #f8f9fa
}

.menu-custom-mb .sidebar__menu a {
    color: currentcolor;
    text-decoration: none;
    transform: translatex(-80%);
    transition: transform .4s ease-in-out
}

.menu-custom-mb .sidebar__menu a::before {
    content: "";
    height: 2px;
    background: #898989;
    width: 120px;
    position: absolute;
    bottom: -2px;
    left: 0;
    transform: translatex(-50%);
    opacity: 0;
    transition: transform .4s ease-in-out, opacity .4s linear
}

.menu-custom-mb .sidebar__menu a:hover::before {
    transform: translatex(0);
    opacity: 1
}

.menu-custom-mb .sidebar__menu a:nth-child(1) {
    transition-delay: 50ms
}

.menu-custom-mb .sidebar__menu a:nth-child(2) {
    transition-delay: .1s
}

.menu-custom-mb .sidebar__menu a:nth-child(3) {
    transition-delay: .15s
}

.menu-custom-mb .sidebar__menu a:nth-child(4) {
    transition-delay: .2s
}

.menu-custom-mb .sidebar__menu a:nth-child(5) {
    transition-delay: .25s
}

.menu-custom-mb .sidebar .sidebar__logo {
    padding-left: 4rem;
    max-width: 75%;
    max-height: 40px;
    margin-bottom: 3rem
}

.menu-custom-mb .sidebar .sidebar__menu-content {
    color: #fff
}

.menu-custom-mb .sidebar .sidebar__menu-content .sidebar-item {
    font-family: REM;
    padding-left: 2rem;
    position: relative;
    margin-bottom: 1.5rem
}

.menu-custom-mb .sidebar .sidebar__menu-content .sidebar-item a {
    padding: .25rem 0
}

.menu-custom-mb .sidebar .sidebar__menu-content .sidebar-icon-menu {
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    width: auto
}

.menu-custom-mb .sidebar .sidebar__footer {
    white-space: nowrap;
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center
}

.menu-custom-mb .sidebar .sidebar__footer .sidebar__phone span {
    color: #888
}

.toggle-menu-mb-container {
    display: none;
    position: fixed;
    right: 2%;
    top: 30%;
    z-index: 11
}

@media (max-width:576px) {
    .toggle-menu-mb-container {
        display: block
    }
}

@media (max-width:540px) {
    .toggle-menu-mb-container {
        transform: scale(.85) translateX(5px)
    }
}

@media (max-width:360px) {
    .toggle-menu-mb-container {
        transform: scale(.7) translateX(5px)
    }
}

.toggle-menu-mb-container .toggle-menu-mb-wrapper {
    position: relative
}

.toggle-menu-mb-container #toggle {
    z-index: 1;
    position: relative;
    cursor: pointer;
    -webkit-animation: all 2s ease;
    -moz-animation: all 2s ease;
    -ms-animation: all 2s ease;
    -o-animation: all 2s ease;
    animation: all 2s ease;
    opacity: 1;
    padding: 15px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #a21313
}

.toggle-menu-mb-container #toggle::after,
.toggle-menu-mb-container #toggle::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid #a21313
}

.toggle-menu-mb-container #toggle::after {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3)
}

.toggle-menu-mb-container #toggle::before {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15)
}

.toggle-menu-mb-container #toggle .toggle-label-img {
    width: 25px
}

.toggle-menu-mb-container #toggle.on {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    mask: radial-gradient(7px at 20px 20px, transparent 98%, #000) -20px -20px;
    -webkit-mask: radial-gradient(7px at 20px 20px, transparent 98%, #000) -20px -20px
}

.toggle-menu-mb-container #toggle.on::after,
.toggle-menu-mb-container #toggle.on::before {
    opacity: 0
}

.toggle-menu-mb-container #menu-toggle-container {
    transform: translateY(-2rem);
    -webkit-transform: translateY(-2rem);
    -moz-transform: translateY(-2rem);
    -ms-transform: translateY(-2rem);
    -o-transform: translateY(-2rem);
    -webkit-animation: all .3s ease;
    -moz-animation: all .3s ease;
    -ms-animation: all .3s ease;
    -o-animation: all .3s ease;
    animation: all .3s ease;
    display: none;
    text-align: center;
    background-color: #a21313;
    padding: 2rem 0 1.5rem;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px
}

.toggle-menu-mb-container #menu-toggle-container .toggle-icon-img {
    width: 36px
}

.toggle-menu-mb-container #menu-toggle-container ul li {
    list-style: none;
    margin-bottom: 1rem
}

.toggle-menu-mb-container #menu-toggle-container .btn-toggle-close {
    background-color: #a21313;
    position: absolute;
    bottom: -22px;
    left: 50%;
    width: 55px;
    height: 55px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    padding: 15px;
    box-shadow: rgba(39, 24, 24, .3) 0 2px 8px 0;
    cursor: pointer
}

.toggle-menu-mb-container #menu-toggle-container .btn-toggle-close img {
    width: 25px
}

.toggle-menu-mb-container #menu-toggle-container .menu-toggle-content {
    overflow: hidden;
    position: relative;
    padding: 1rem 0 1rem
}

#header {
    padding: 12% 0 5%;
    position: relative
}

@media (max-width:576px) {
    #header {
        padding: 20% 0 5%
    }
}

#header .header-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between
}

#header .header-text-container {
    width: 60%
}

@media (max-width:1600px) {
    #header .header-text-container {
        width: 65%
    }
}

@media (max-width:768px) {
    #header .header-text-container {
        width: 100%
    }
}

#header .header-text-container .header-title {
    font-family: REM-light;
    font-size: 3rem;
    margin-bottom: 5rem;
}

@media (max-width:1600px) {
    #header .header-text-container .header-title {
        font-size: 2.5rem
    }
}

@media (max-width:1300px) {
    #header .header-text-container .header-title {
        font-size: 3vw
    }
}

@media (max-width:768px) {
    #header .header-text-container .header-title {
        font-size: 5vw;
        margin-bottom: 3rem
    }
}

@media (max-width:440px) {
    #header .header-text-container .header-title {
        font-size: 5.5vw
    }
}

#header .header-text-container .header-title span.gradient-text {
    font-family: PlaywriteUSTrad;
    background: -webkit-linear-gradient(0deg, #661bc2 31.28%, #ab36c2 61.24%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#header .header-text-container .header-title img {
    width: 120px;
}

@media (max-width:1200px) {
    #header .header-text-container .header-title img {
        width: 90px
    }
}

@media (max-width:992px) {
    #header .header-text-container .header-title img {
        width: 50px
    }
}


#header .header-text-container .header-list-container {
    width: 80%
}

@media (max-width:576px) {
    #header .header-text-container .header-list-container {
        width: 100%
    }
}

#header .header-text-container .header-list-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 1.25rem
}

#header .header-text-container .header-list-item .list-icon {
    margin-right: .75rem
}

#header .header-text-container .header-list-item .list-icon img {
    width: 36px
}

#header .header-text-container .header-list-item .list-content {
    font-size: 1.125rem;
    text-transform: uppercase
}

@media (max-width:1600px) {
    #header .header-text-container .header-list-item .list-content {
        font-size: 1rem
    }
}

@media (max-width:1300px) {
    #header .header-text-container .header-list-item .list-content {
        font-size: 1.15vw
    }
}

@media (max-width:768px) {
    #header .header-text-container .header-list-item .list-content {
        font-size: 2vw
    }
}

@media (max-width:576px) {
    #header .header-text-container .header-list-item .list-content {
        font-size: 2.5vw
    }
}

#header .header-text-container .header-list-item .list-content .list-title {
    margin-bottom: .5rem;
    font-family: REM-SemiBold;
    color: #575252;
    font-size: 130%;
    line-height: 1.2
}

@media (max-width:576px) {
    #header .header-text-container .header-list-item .list-content .list-title {
        font-size: 125%
    }
}

#header .header-text-container .header-list-item .list-content .list-detail {
    color: #706666
}

#header .header-thumbnail-container {
    width: 33%;
    position: relative
}

@media (max-width:768px) {
    #header .header-thumbnail-container {
        width: 100%;
        text-align: center;
        padding: 1rem 15%
    }
}

@media (max-width:400px) {
    #header .header-thumbnail-container {
        padding: 1rem 10%
    }
}

#header .header-thumbnail-container img.thumbnail-face {
    width: 100%;
    margin-bottom: 2rem
}

#header .header-thumbnail-container .btn-analysis {
    width: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%)
}

#header .header-thumbnail-container .btn-analysis img.btn-img {
    max-height: 100px
}

@media (max-width:768px) {
    #header .header-thumbnail-container .btn-analysis {
        width: 55%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center
    }
}

@media (max-width:400px) {
    #header .header-thumbnail-container .btn-analysis {
        width: 62%
    }
}

#header .header-thumbnail-container .btn-analysis .ribbon-btn {
    position: absolute;
    width: 22px;
    top: -15px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s
}

#header .header-thumbnail-container .btn-analysis .ribbon-btn.left {
    left: -15px
}

#header .header-thumbnail-container .btn-analysis .ribbon-btn.right {
    right: -15px
}

#header .header-thumbnail-container .btn-analysis:hover .ribbon-btn.left {
    transform: translate(-3px, -3px);
    -webkit-transform: translate(-3px, -3px);
    -moz-transform: translate(-3px, -3px);
    -ms-transform: translate(-3px, -3px);
    -o-transform: translate(-3px, -3px)
}

#header .header-thumbnail-container .btn-analysis:hover .ribbon-btn.right {
    transform: translate(3px, -3px);
    -webkit-transform: translate(3px, -3px);
    -moz-transform: translate(3px, -3px);
    -ms-transform: translate(3px, -3px);
    -o-transform: translate(3px, -3px)
}

.btn-custom {
    width: fit-content;
    display: block;
    text-align: center;
    white-space: nowrap;
    padding: .5rem 3rem;
    font-family: REM;
    color: #fff;
    text-decoration: unset;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid #545454;
    box-shadow: 0 3px 0 0 rgba(24, 24, 24, .8), 0 5px 0 0 rgba(24, 24, 24, .2392156863), 0 7px 7px 0 rgba(24, 24, 24, .2705882353);
    background: radial-gradient(94.81% 100% at 50% 100%, rgba(212, 175, 55, .6) 0, rgba(212, 175, 55, 0) 68%), linear-gradient(90deg, #661bc2 0, #ab36c2 100%)
}

@media (max-width:992px) {
    .btn-custom {
        font-size: 90%
    }
}

.btn-custom:hover {
    background: radial-gradient(94.81% 100% at 50% 100%, #d4af37 0, rgba(212, 175, 55, 0) 68%), linear-gradient(90deg, #661bc2 0, #ab36c2 100%);
    color: #fff;
    text-decoration: unset
}

.btn-custom:active,
.btn-custom:visited {
    background: radial-gradient(94.81% 100% at 50% 100%, #d4af37 0, rgba(212, 175, 55, 0) 68%), linear-gradient(90deg, #661bc2 0, #ab36c2 100%);
    box-shadow: 3px 3px 12px 0 rgba(117, 117, 117, .4) inset, -3px -3px 16px 0 rgba(117, 117, 117, .0784313725) inset;
    color: #fff;
    text-decoration: unset
}

.page-title {
    text-align: center;
    font-size: 2.25rem;
    margin-bottom: 5rem
}

@media (max-width:1100px) {
    .page-title {
        font-size: 2rem
    }
}

@media (max-width:768px) {
    .page-title {
        font-size: 1.75rem
    }
}

@media (max-width:576px) {
    .page-title {
        margin-bottom: 2rem;
        font-size: 1.5rem
    }
}

.page-title .title-top {
    font-family: PlaywriteUSTrad;
    width: fit-content;
    margin: 0 auto;
    line-height: 2;
    font-size: 110%;
    background: -webkit-linear-gradient(90deg, #661bc2 34.61%, #ab36c2 65.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.page-title .title-bottom {
    color: #2c2c2c;
    font-family: REM
}

.page-title .title-note {
    margin-top: 1rem;
    width: 55%;
    margin: 0 auto;
    font-size: .9rem;
    color: #706666
}

@media (max-width:992px) {
    .page-title .title-note {
        width: 80%
    }
}

.analysis-form {
    background: #1a1a2e;
    padding: 10% 12%
}

@media (max-width:1440px) {
    .analysis-form {
        padding: 8% 10%
    }
}

@media (max-width:992px) {
    .analysis-form {
        padding: 6% 5%
    }
}

@media (max-width:576px) {
    .analysis-form {
        margin-top: -1px
    }
}

@media (max-width:440px) {
    .analysis-form {
        padding: 5% 15px
    }
}

.analysis-form .form-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width:576px) {
    .analysis-form .form-container {
        -webkit-flex-direction: column-reverse;
        -moz-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        -o-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

.analysis-form .form-container .form-wrapper {
    width: 43%
}

@media (max-width:1200px) {
    .analysis-form .form-container .form-wrapper {
        width: 48%
    }
}

@media (max-width:768px) {
    .analysis-form .form-container .form-wrapper {
        width: 100%
    }
}

.analysis-form .form-title {
    font-size: 1.25rem;
    font-family: REM-LightItalic;
    color: rgba(255, 255, 255, .6392156863)
}

@media (max-width:1200px) {
    .analysis-form .form-title {
        font-size: 1.125rem
    }
}

@media (max-width:768px) {
    .analysis-form .form-title {
        font-size: 1.075rem
    }
}

@media (max-width:576px) {
    .analysis-form .form-title {
        text-align: center;
        margin-bottom: 2rem
    }
}

.analysis-form .form-title span.gradient-text {
    font-family: REM-Medium;
    font-size: 160%;
    background: -webkit-linear-gradient(0deg, #b5a4fc 0, #e483f7 40.61%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width:768px) {
    .analysis-form .form-title span.gradient-text {
        font-size: 125%
    }
}

@media (max-width:576px) {
    .analysis-form .form-title span.gradient-text {
        display: block;
        font-size: 155%
    }
}

.analysis-form .form-title span.divider-line {
    font-family: REM-Bold;
    font-size: 120%;
    color: #fff
}

.analysis-form .form-title span.break-line {
    display: block
}

@media (max-width:576px) {
    .analysis-form .form-title span.break-line {
        display: inline-block
    }
}

.analysis-form .form-content-input .form-title-container {
    margin-bottom: 2.5rem
}

.analysis-form .form-content-input .form-item-block {
    margin-bottom: 1rem
}

.analysis-form .form-content-input .form-item-block .form-label {
    margin-left: .75rem;
    font-size: 90%;
    color: #fff;
    font-family: REM
}

.analysis-form .form-content-input .form-item-block .form-label span.required {
    color: red
}

.analysis-form .form-content-input .form-item-block .form-input-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

.analysis-form .form-content-input .form-item-block .form-input-row .select-birthday {
    width: 32%
}

.analysis-form .form-content-input .form-item-block .form-input-row .select-birthday select {
    max-height: unset;
    height: max-content;
    text-align: left;
    font-size: 90%;
    font-family: REM-Medium;
    padding: .5rem .75rem;
    width: 100%;
    color: #fff;
    border-bottom: 1px solid #41415c;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .12) 100%)
}

.analysis-form .form-content-input .form-item-block .form-input {
    outline: 0;
    border: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .22) 100%);
    width: 100%;
    padding: .5rem .75rem;
    color: #fff;
    font-family: REM-Medium
}

.analysis-form .form-content-input .form-item-block .form-input.mix {
    width: 70%
}

@media (max-width:576px) {
    .analysis-form .form-content-input .form-item-block .form-input.mix {
        width: 100%
    }
}

.analysis-form .form-content-input .form-item-block .form-input.no-bg {
    background: 0 0 !important;
    border-bottom: 1px solid rgba(253, 253, 253, .22)
}

.analysis-form .form-content-input .form-item-block .radio-sex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 29%;
    text-align: center
}

@media (max-width:576px) {
    .analysis-form .form-content-input .form-item-block .radio-sex {
        width: 100%;
        margin: 1.25rem 0;
        justify-content: flex-start
    }
}

.analysis-form .form-content-input .form-item-block .form-check .form-check-label {
    color: #fff;
    font-family: REM
}

.analysis-form .form-content-input .form-item-block .form-check .form-check-input[type=radio] {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    margin-right: .5rem;
    accent-color: #575252;
    background-color: #575252
}

.analysis-form .form-content-input .form-item-block .form-check .form-check-input[type=radio]:checked {
    accent-color: #2dc38c
}

.analysis-form .form-content-input .privacy-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    margin-top: 1.5rem
}

.analysis-form .form-content-input .privacy-wrapper .checkbox-privacy {
    position: relative;
    margin-right: .75rem;
    margin-top: 3px
}

.analysis-form .form-content-input .privacy-wrapper .checkbox-privacy input[type=checkbox] {
    opacity: 0;
    display: none
}

.analysis-form .form-content-input .privacy-wrapper .checkbox-privacy label.custom-checkbox {
    cursor: pointer;
    margin-bottom: 0;
    display: block;
    position: relative;
    width: 22px;
    height: 22px;
    border: .8px solid #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 0
}

.analysis-form .form-content-input .privacy-wrapper .checkbox-privacy label.custom-checkbox::after {
    transform: scaleX(-1) rotate(135deg);
    -webkit-transform: scaleX(-1) rotate(135deg);
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -o-transform: scaleX(-1) rotate(135deg);
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 3px solid transparent;
    border-top: 3px solid transparent;
    content: "";
    display: block;
    height: 20px;
    width: 10px;
    left: 0;
    top: 11px;
    position: absolute
}

.analysis-form .form-content-input .privacy-wrapper .checkbox-privacy input[type=checkbox]:checked+label.custom-checkbox {
    border-color: #2dc38c
}

.analysis-form .form-content-input .privacy-wrapper .checkbox-privacy input[type=checkbox]:checked+label.custom-checkbox::after {
    -webkit-animation: check .8s;
    -moz-animation: check .8s;
    -ms-animation: check .8s;
    -o-animation: check .8s;
    animation: check .8s;
    border-color: #2dc38c
}

.analysis-form .form-content-input .privacy-wrapper .text-privacy {
    font-family: REM;
    font-size: 92%;
    color: #fff
}

@media (max-width:1440px) {
    .analysis-form .form-content-input .privacy-wrapper .text-privacy {
        font-size: 88%
    }
}

@media (max-width:1300px) {
    .analysis-form .form-content-input .privacy-wrapper .text-privacy {
        font-size: 80%
    }
}

.analysis-form .form-content-input .privacy-wrapper .text-privacy a {
    text-decoration: underline;
    color: #fff
}

.analysis-form .btn-submit-form {
    width: 100%
}

@media (max-width:576px) {
    .analysis-form .form-content-upload {
        margin-bottom: 1.5rem
    }
}

.analysis-form .form-content-upload .content-preview {
    display: none;
    text-align: center;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 1.25rem;
    -webkit-border-radius: 1.25rem;
    -moz-border-radius: 1.25rem;
    -ms-border-radius: 1.25rem;
    -o-border-radius: 1.25rem;
    overflow: hidden
}

.analysis-form .form-content-upload .content-preview .action-remove {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 92px;
    height: 92px;
    background-color: #1a1a2e;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 1.25rem
}

@media (max-width:440px) {
    .analysis-form .form-content-upload .content-preview .action-remove {
        width: 72px;
        height: 72px
    }
}

.analysis-form .form-content-upload .content-preview .action-remove::after,
.analysis-form .form-content-upload .content-preview .action-remove::before {
    content: "";
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%
}

@media (max-width:440px) {

    .analysis-form .form-content-upload .content-preview .action-remove::after,
    .analysis-form .form-content-upload .content-preview .action-remove::before {
        width: 32px;
        height: 32px
    }
}

.analysis-form .form-content-upload .content-preview .action-remove::before {
    top: -46px;
    right: 0;
    -webkit-box-shadow: 15px 15px 0 0 #1a1a2e;
    -moz-box-shadow: 15px 15px 0 0 #1a1a2e;
    box-shadow: 15px 15px 0 0 #1a1a2e
}

@media (max-width:440px) {
    .analysis-form .form-content-upload .content-preview .action-remove::before {
        top: -32px
    }
}

.analysis-form .form-content-upload .content-preview .action-remove::after {
    bottom: 0;
    left: -46px;
    -webkit-box-shadow: 20px 20px 0 0 #1a1a2e;
    -moz-box-shadow: 20px 20px 0 0 #1a1a2e;
    box-shadow: 20px 20px 0 0 #1a1a2e
}

@media (max-width:440px) {
    .analysis-form .form-content-upload .content-preview .action-remove::after {
        left: -32px
    }
}

.analysis-form .form-content-upload .content-preview .action-remove .trash-img {
    cursor: pointer;
    width: 45px
}

@media (max-width:440px) {
    .analysis-form .form-content-upload .content-preview .action-remove .trash-img {
        width: 36px
    }
}

.analysis-form .form-content-upload .upload-thumb-img {
    cursor: pointer;
    width: 100%;
    margin-bottom: .5rem
}

.analysis-form .form-content-upload label {
    position: relative
}

.analysis-form .form-content-upload.has-img .content-preview {
    display: block;
    background-image: radial-gradient(rgba(51, 51, 48, .3137254902), #252c2a, #091410)
}

.analysis-form .form-content-upload.has-img .content-preview #preview-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    -o-object-fit: contain
}

.analysis-form .form-content-upload.has-img .upload-thumb-img {
    opacity: 0
}

@keyframes check {
    0% {
        height: 0;
        width: 0
    }

    25% {
        height: 0;
        width: 10px
    }

    50% {
        height: 20px;
        width: 10px
    }
}

.analysis-form .btn-suggest-img {
    width: max-content;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem auto 0;
    font-family: REM-light;
    font-size: 80%;
    color: #fff;
    border: 1px solid #3d3d3d;
    background: #2c2c2c;
    -webkit-box-shadow: 0 2px 0 0 #000;
    -moz-box-shadow: 0 2px 0 0 #000;
    box-shadow: 0 2px 0 0 #000;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 3px 5px
}

.analysis-form .btn-suggest-img img {
    width: 15px;
    margin-right: 4px
}

.analysis-form .btn-suggest-img:hover {
    text-decoration: unset
}

@media (max-width:440px) {
    .analysis-form .btn-suggest-img {
        margin: 2rem auto 0
    }
}

.modal-suggest-image .modal-body {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background: #2c2c2c;
    border: 1px solid #3d3d3d;
    box-shadow: 0 2px 0 0 #000;
    -webkit-box-shadow: 0 2px 0 0 #000;
    -moz-box-shadow: 0 2px 0 0 #000;
    box-shadow: 0 2px 0 0 #000;
    color: #fff
}

.modal-suggest-image .modal-body .title {
    font-family: REM-Medium
}

.modal-suggest-image .modal-body .ul-suggest-list {
    font-size: 90%;
    font-family: REM-light;
    padding-left: 1rem;
    margin-bottom: .25rem
}

.preview-five-senses {
    padding: 10% 0
}

.preview-five-senses .tab-preview-five-senses {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width:768px) {
    .preview-five-senses .tab-preview-five-senses {
        justify-content: center;
        margin-bottom: 3rem
    }
}

.preview-five-senses .tab-preview-five-senses .nav-tabs {
    width: 25%;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    border-bottom: 0
}

@media (max-width:768px) {
    .preview-five-senses .tab-preview-five-senses .nav-tabs {
        width: 50%;
        margin-bottom: 2rem
    }
}

@media (max-width:576px) {
    .preview-five-senses .tab-preview-five-senses .nav-tabs {
        width: 100%;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: space-around
    }
}

.preview-five-senses .tab-preview-five-senses .nav-tabs .nav-item {
    margin-bottom: 1rem
}

.preview-five-senses .tab-preview-five-senses .nav-tabs .nav-item .nav-link {
    cursor: pointer;
    -webkit-animation: .5s;
    -moz-animation: .5s;
    -ms-animation: .5s;
    -o-animation: .5s;
    animation: .5s;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    white-space: nowrap;
    align-items: center;
    text-align: left;
    padding-left: 1.25rem;
    font-size: 90%;
    color: #2c2c2c;
    font-family: REM;
    width: 100%;
    background-color: #fff;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border: 1px solid #e0e0e0
}

@media (max-width:1100px) {
    .preview-five-senses .tab-preview-five-senses .nav-tabs .nav-item .nav-link {
        font-size: 80%
    }
}

.preview-five-senses .tab-preview-five-senses .nav-tabs .nav-item .nav-link img.tab-label-img {
    width: 18px;
    margin-right: .5rem
}

.preview-five-senses .tab-preview-five-senses .nav-tabs .nav-item .nav-link.active {
    border: 1px solid #ab36c2;
    box-shadow: 0 2px 0 0 #ab36c2
}

@media (max-width:576px) {
    .preview-five-senses .tab-preview-five-senses .nav-tabs .nav-item .nav-link {
        width: fit-content
    }

    .preview-five-senses .tab-preview-five-senses .nav-tabs .nav-item .nav-link span {
        display: none
    }
}

.preview-five-senses .tab-preview-five-senses .tab-content {
    width: 66%
}

@media (max-width:1100px) {
    .preview-five-senses .tab-preview-five-senses .tab-content {
        width: 72%
    }
}

@media (max-width:768px) {
    .preview-five-senses .tab-preview-five-senses .tab-content {
        width: 100%
    }
}

.preview-five-senses .tab-preview-five-senses .tab-content-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

.preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-thumbnail {
    width: 50%;
    text-align: center
}

@media (max-width:1440px) {
    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-thumbnail {
        width: 47%
    }
}

.preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-thumbnail img {
    width: 76%
}

@media (max-width:576px) {
    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-thumbnail {
        width: 100%
    }

    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-thumbnail img {
        width: 50%
    }
}

.preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text {
    width: 43%
}

@media (max-width:1100px) {
    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text {
        width: 50%
    }
}

@media (max-width:576px) {
    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text {
        width: 100%
    }
}

.preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text .content-text-gradient {
    padding: .75rem;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    font-size: 90%;
    color: #2c2c2c;
    font-family: REM-light
}

@media (max-width:1440px) {
    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text .content-text-gradient {
        font-size: 88%
    }
}

@media (max-width:1100px) {
    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text .content-text-gradient {
        font-size: 80%
    }
}

@media (max-width:576px) {
    .preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text .content-text-gradient {
        font-size: 100%
    }
}

.preview-five-senses .tab-preview-five-senses .tab-content-container .tab-content-text .content-text-gradient span {
    font-family: REM-MediumItalic;
    color: #ab36c2
}

.outstanding-features .outstanding-features-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

.outstanding-features .outstanding-features-card {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    width: 23%;
    padding: 1rem .75rem;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%)
}

@media (max-width:768px) {
    .outstanding-features .outstanding-features-card {
        width: 48%
    }
}

@media (max-width:576px) {
    .outstanding-features .outstanding-features-card {
        width: 100%
    }
}

.outstanding-features .outstanding-features-card .of-card-title {
    font-family: REM-Medium;
    white-space: nowrap
}

.outstanding-features .outstanding-features-card .of-card-title span {
    background: linear-gradient(90deg, #661bc2 50.26%, #ab36c2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: PlaywriteUSTrad
}

@media (max-width:1200px) {
    .outstanding-features .outstanding-features-card .of-card-title {
        font-size: 90%
    }
}

@media (max-width:768px) {
    .outstanding-features .outstanding-features-card .of-card-title {
        font-size: 100%
    }
}

.outstanding-features .outstanding-features-card .of-card-thumbnail {
    padding: 4rem 0;
    text-align: center
}

@media (max-width:1200px) {
    .outstanding-features .outstanding-features-card .of-card-thumbnail {
        padding: 3rem 0
    }
}

@media (max-width:490px) {
    .outstanding-features .outstanding-features-card .of-card-thumbnail {
        padding: 4rem 0
    }
}

.outstanding-features .outstanding-features-card .of-card-thumbnail img {
    max-height: 140px
}

@media (max-width:1440px) {
    .outstanding-features .outstanding-features-card .of-card-thumbnail img {
        max-height: 110px
    }
}

@media (max-width:1200px) {
    .outstanding-features .outstanding-features-card .of-card-thumbnail img {
        max-height: 80px
    }
}

@media (max-width:576px) {
    .outstanding-features .outstanding-features-card .of-card-thumbnail img {
        max-height: 110px
    }
}

.outstanding-features .outstanding-features-card .of-card-description {
    font-family: REM-light;
    font-size: .8rem;
    line-height: 1
}

@media (max-width:768px) {
    .outstanding-features .outstanding-features-card .of-card-description {
        line-height: 1.2;
        font-size: .9rem
    }
}

.design-for-you {
    padding: 10% 0
}

.design-for-you .package-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

.design-for-you .package-card {
    width: 31%
}

@media (max-width:768px) {
    .design-for-you .package-card {
        width: 33%
    }
}

@media (max-width:576px) {
    .design-for-you .package-card {
        width: 100%;
        margin-bottom: 3rem
    }
}

.design-for-you .package-card .package-content {
    position: relative;
    color: #2c2c2c;
    border-radius: .25rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    -ms-border-radius: .25rem;
    -o-border-radius: .25rem;
    margin-bottom: .5rem;
    padding: 2.5rem 1rem 1.5rem 1.5rem;
    -webkit-box-shadow: 0 1px 0 0 rgba(204, 204, 204, .3176470588);
    -moz-box-shadow: 0 1px 0 0 rgba(204, 204, 204, .3176470588);
    box-shadow: 0 1px 0 0 rgba(204, 204, 204, .3176470588);
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%)
}

.design-for-you .package-card .package-content .pkg-mark-img {
    position: absolute;
    top: -20px;
    width: 40px;
    right: 4%
}

.design-for-you .package-card .package-content .package-promotion {
    position: absolute;
    top: -23px;
    left: 5%;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: .5rem 1rem;
    font-family: REM-light;
    background: #fff;
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc;
    color: #087f0a
}

.design-for-you .package-card .package-content .package-promotion span {
    font-family: REM
}

@media (max-width:576px) {
    .design-for-you .package-card .package-content .package-promotion {
        top: -20px
    }
}

.design-for-you .package-card .package-content .package-detail {
    position: relative;
    padding: 1.5rem 0;
    font-size: 1rem
}

.design-for-you .package-card .package-content .package-detail span.prefix {
    color: #ab36c2;
    font-size: .9rem
}

.design-for-you .package-card .package-content .package-detail span.price {
    color: #ab36c2;
    font-size: 1.75rem;
    margin-right: .5rem;
    font-family: REM-Medium
}

.design-for-you .package-card .package-content .package-view {
    font-size: .7rem
}

.design-for-you .package-card .package-footer .package-btn {
    background-color: #fff;
    display: block;
    width: 100%;
    text-align: center;
    padding: .4rem;
    color: #2c2c2c;
    font-size: .9rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 0 0 rgba(204, 204, 204, .3176470588);
    border-radius: .4rem;
    -webkit-border-radius: .4rem;
    -moz-border-radius: .4rem;
    -ms-border-radius: .4rem;
    -o-border-radius: .4rem;
    -webkit-animation: .5s;
    -moz-animation: .5s;
    -ms-animation: .5s;
    -o-animation: .5s;
    animation: .5s
}

.design-for-you .package-card .package-footer .package-btn:hover {
    color: #2c2c2c;
    text-decoration: unset;
    box-shadow: 0 2px 0 0 #ccc
}

#feedback {
    position: relative;
    overflow-x: hidden;
    margin-bottom: 5rem
}

#feedback .feedback-container {
    padding: 5% 0
}

@media (max-width:440px) {
    #feedback .feedback-container {
        padding: 8% 0;
        overflow: hidden
    }
}

#feedback .feedback-slide-container {
    position: relative;
    padding-bottom: 2rem
}

#feedback .feedback-slide-container .feedback-mask-item {
    top: -10%;
    position: absolute;
    width: 20%;
    height: 120%;
    z-index: 1
}

#feedback .feedback-slide-container .feedback-mask-item.left {
    left: 0;
    background: linear-gradient(to left, rgba(248, 244, 233, 0) 0, #f8f4e9 100%)
}

#feedback .feedback-slide-container .feedback-mask-item.right {
    right: 0;
    background: linear-gradient(to right, rgba(248, 244, 233, 0) 0, #f8f4e9 100%)
}

#feedback .feedback-slide-container .slider-action {
    position: absolute;
    bottom: -10%;
    cursor: pointer
}

#feedback .feedback-slide-container .slider-action img {
    width: 36px
}

#feedback .feedback-slide-container .slider-action.next-slide-feedback {
    left: 51.5%
}

@media (max-width:1440px) {
    #feedback .feedback-slide-container .slider-action.next-slide-feedback {
        left: 52.5%
    }
}

@media (max-width:576px) {
    #feedback .feedback-slide-container .slider-action.next-slide-feedback {
        left: 54%
    }
}

#feedback .feedback-slide-container .slider-action.prev-slide-feedback {
    left: 48.5%
}

@media (max-width:1440px) {
    #feedback .feedback-slide-container .slider-action.prev-slide-feedback {
        left: 47.5%
    }
}

@media (max-width:1440px) {
    #feedback .feedback-slide-container .slider-action.prev-slide-feedback {
        left: 45%
    }
}

#feedback .feedback-card {
    border-radius: .25rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    -ms-border-radius: .25rem;
    -o-border-radius: .25rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 0 0 rgba(204, 204, 204, .3176470588);
    position: relative;
    background-color: #fff
}

#feedback .feedback-card .feeback-quote-img {
    position: absolute;
    top: -20px;
    width: 40px;
    left: 10%
}

#feedback .feedback-card .feedback-card-content {
    padding: 2rem 1.5rem 1rem;
    border-bottom: 1px solid #e0e0e0
}

#feedback .feedback-card .feedback-card-content .feedback-text {
    text-align: justify;
    color: #2c2c2c;
    font-size: .9rem;
    font-family: REM-light
}

#feedback .feedback-card .feedback-card-footer {
    padding: .5rem 1.5rem
}

#feedback .feedback-card .feedback-card-footer .feedback-user {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center
}

#feedback .feedback-card .feedback-card-footer .feedback-user .feedback-avatar {
    width: 40px;
    margin-right: 1rem
}

#feedback .feedback-card .feedback-card-footer .feedback-user .feedback-username {
    font-family: REM-Medium;
    color: #2c2c2c;
    font-size: .9rem
}

#feedback .feedback-card .feedback-card-footer .feedback-user .feedback-star {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center
}

#feedback .feedback-card .feedback-card-footer .feedback-user .feedback-star .feeback-star-img {
    width: 12px;
    margin-right: .35rem
}

#blog {
    padding: 2rem 0
}

@media (max-width:768px) {
    #blog .page-title {
        margin-bottom: 2rem
    }
}

#blog .blog-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2rem
}

#blog .blog-highlight-left {
    width: 47%
}

@media (max-width:768px) {
    #blog .blog-highlight-left {
        width: 100%
    }
}

#blog .blog-highlight-left .blog-line {
    width: 100%
}

@media (max-width:768px) {
    #blog .blog-highlight-left .blog-line {
        display: none
    }
}

#blog .blog-highlight {
    width: 100%;
    display: block;
    position: relative;
    margin-bottom: 2rem
}

@media (max-width:768px) {
    #blog .blog-highlight {
        margin-bottom: 1rem
    }
}

#blog .blog-highlight .blog-thumbnail {
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px
}

#blog .blog-highlight .blog-content {
    position: absolute;
    width: 90%;
    bottom: 5%;
    left: 3%
}

@media (max-width:768px) {
    #blog .blog-highlight .blog-content {
        position: relative;
        width: 100%;
        left: 0
    }
}

#blog .blog-highlight .blog-content .blog-title {
    color: #fff;
    font-family: REM-Medium;
    line-height: 1.2
}

@media (max-width:768px) {
    #blog .blog-highlight .blog-content .blog-title {
        color: #2c2c2c
    }
}

#blog .blog-highlight .blog-content .blog-date {
    font-family: REM-light;
    color: #dedede;
    font-size: 90%
}

@media (max-width:768px) {
    #blog .blog-highlight .blog-content .blog-date {
        color: #706666
    }
}

#blog .blog-tag-container {
    position: absolute;
    left: 3%;
    top: 5%;
    width: 90%
}

#blog .blog-tag-container .tag {
    padding: 5px 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    background: rgba(66, 66, 66, .6);
    color: #fff;
    font-size: 80%;
    margin-right: 4px
}

#blog .blog-list {
    width: 51%
}

@media (max-width:768px) {
    #blog .blog-list {
        width: 100%
    }
}

#blog .blog-list .blog-item {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width:768px) {
    #blog .blog-list .blog-item:last-child {
        display: none
    }
}

#blog .blog-list .blog-item .blog-item--thumbnail {
    position: relative;
    width: 38%
}

#blog .blog-list .blog-item .blog-item--thumbnail img {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    width: 100%
}

@media (max-width:768px) {
    #blog .blog-list .blog-item .blog-item--thumbnail {
        width: 100%
    }
}

#blog .blog-list .blog-item .blog-item-content {
    width: 60%
}

@media (max-width:768px) {
    #blog .blog-list .blog-item .blog-item-content {
        width: 100%
    }
}

#blog .blog-list .blog-item .blog-item-content .blog-item--title {
    color: #2c2c2c;
    font-family: REM-Medium;
    margin-bottom: .25rem;
    line-height: 1.2
}

#blog .blog-list .blog-item .blog-item-content .blog-item--date {
    font-family: REM-light;
    color: #706666;
    font-size: 80%
}

#blog .blog-action {
    text-align: center
}

#blog .blog-action .blog-view-more {
    display: inline-flex;
    align-items: center;
    padding: .5rem 2rem;
    margin: 0 auto;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc;
    color: #2c2c2c;
    font-family: REM-light;
    font-size: 90%
}

#blog .blog-action .blog-view-more span {
    margin-right: 5px;
    text-decoration: unset
}

#blog .blog-action .blog-view-more .btn-icon {
    width: 20px
}

#blog a:hover {
    text-decoration: unset
}

#faq {
    margin-bottom: 3rem
}

@media (max-width:490px) {
    #faq {
        min-height: unset;
        margin-bottom: 0
    }
}

#faq .section-container {
    padding: 5rem 12%
}

@media (max-width:1600px) {
    #faq .section-container {
        padding: 4rem 10%
    }
}

@media (max-width:992px) {
    #faq .section-container {
        padding: 3rem 5%
    }
}

@media (max-width:440px) {
    #faq .section-container {
        padding: 3rem 15px
    }
}

#faq .faq-content {
    padding: 2rem 3rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width:1300px) {
    #faq .faq-content {
        padding: 2rem 0
    }
}

#faq .faq__left {
    text-align: left;
    width: 45%
}

@media (max-width:1300px) {
    #faq .faq__left {
        width: 42%
    }
}

@media (max-width:576px) {
    #faq .faq__left {
        width: 100%;
        text-align: center;
        margin-bottom: 2.5rem
    }
}

#faq .faq__right {
    text-align: left;
    width: 50%
}

@media (max-width:1300px) {
    #faq .faq__right {
        width: 57%
    }
}

@media (max-width:576px) {
    #faq .faq__right {
        width: 100%
    }
}

#faq .page-title {
    text-align: left
}

#faq .page-title .title-bottom {
    font-size: 80%;
    line-height: 1.2;
    margin-bottom: 1.5rem
}

#faq .page-title .title-note {
    margin-left: 0
}

@media (max-width:576px) {
    #faq .page-title {
        margin-bottom: 0;
        text-align: center
    }

    #faq .page-title .title-bottom {
        font-size: 1.5rem
    }

    #faq .page-title .title-bottom br {
        display: none
    }

    #faq .page-title .title-note {
        width: 100%
    }
}

#faq .accordion .card-header:after {
    cursor: pointer;
    position: absolute;
    color: #2c2c2c;
    top: 10px;
    right: 5%;
    font-family: REM-SemiBold;
    content: "−";
    transform: translateX(2rem);
    -webkit-transform: translateX(2rem);
    -moz-transform: translateX(2rem);
    -ms-transform: translateX(2rem);
    -o-transform: translateX(2rem)
}

@media (max-width:490px) {
    #faq .accordion .card-header:after {
        float: unset;
        font-size: 1.25rem;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%)
    }
}

#faq .accordion .card-header.collapsed:after {
    content: "+"
}

#faq .faq-list-question {
    margin-top: .15rem
}

#faq .collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .15s ease;
    -o-transition: height .15s ease;
    transition: height .15s ease
}

#faq #accordion-faq .card {
    background-color: transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border: 0
}

#faq #accordion-faq .card .card-header {
    border: 0;
    padding-left: 0;
    padding-right: 2rem;
    background-color: transparent
}

@media (max-width:490px) {
    #faq #accordion-faq .card .card-header {
        position: relative
    }
}

#faq #accordion-faq .card .card-header .card-title {
    cursor: pointer;
    font-size: 110%;
    font-family: REM-Medium;
    color: #2c2c2c;
    padding-left: 0
}

@media (max-width:1200px) {
    #faq #accordion-faq .card .card-header .card-title {
        font-size: 100%
    }
}

#faq #accordion-faq .card .card-header .card-title:hover {
    text-decoration: none;
    color: #af3689
}

@media (max-width:1024px) {
    #faq #accordion-faq .card .card-header .card-title {
        font-size: 100%
    }
}

@media (max-width:490px) {
    #faq #accordion-faq .card .card-header .card-title {
        font-size: 100%
    }
}

#faq #accordion-faq .card .card-body {
    position: relative;
    font-size: 90%;
    color: #2c2c2c;
    font-family: REM-light;
    padding: .5rem .5rem 1rem 2rem
}

#faq #accordion-faq .card .card-body::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-image: url(../images/curve-line.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

@media (max-width:440px) {
    #faq #accordion-faq .card .card-body {
        font-size: 98%;
        padding: .75rem .15rem 1.25rem 0
    }
}

@media (max-width:360px) {
    #faq #accordion-faq .card .card-body {
        font-size: 96%
    }
}

#banner {
    position: relative;
    padding: 2rem 12% 0;
    background-image: url(../images/banner-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

@media (max-width:1440px) {
    #banner {
        padding: 2rem 10% 0
    }
}

@media (max-width:992px) {
    #banner {
        padding: 4rem 5% 0
    }
}

@media (max-width:576px) {
    #banner {
        background-image: url(../images/banner-img-mb.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center
    }
}

#banner .banner-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

#banner .bstar {
    position: absolute
}

#banner .bstar.star1 {
    width: 48px;
    right: 15%;
    top: 7%
}

@media (max-width:576px) {
    #banner .bstar.star1 {
        width: 36px;
        right: 8%;
        top: 4%
    }
}

#banner .bstar.star2 {
    width: 30px;
    right: 33%;
    bottom: 8%
}

@media (max-width:576px) {
    #banner .bstar.star2 {
        right: 6%;
        width: 32px
    }
}

#banner .bstar.star3 {
    width: 25px;
    left: 29%;
    bottom: 24%
}

@media (max-width:576px) {
    #banner .bstar.star3 {
        left: 8%
    }
}

#banner .bstar.star4 {
    width: 30px;
    top: 15%;
    left: 10%
}

@media (max-width:576px) {
    #banner .bstar.star4 {
        display: none
    }
}

#banner .banner-left {
    width: 70%
}

@media (max-width:576px) {
    #banner .banner-left {
        width: 100%
    }
}

#banner .banner-left .banner-title {
    width: 70%;
    font-size: 1.5rem;
    margin: 0 0 3rem;
    color: #fff;
    font-family: REM
}

#banner .banner-left .banner-title span {
    font-family: REM-MediumItalic;
    color: rgba(255, 255, 255, .6784313725)
}

@media (max-width:1300px) {
    #banner .banner-left .banner-title {
        width: 80%
    }
}

@media (max-width:1200px) {
    #banner .banner-left .banner-title {
        font-size: 1.25rem
    }
}

@media (max-width:992px) {
    #banner .banner-left .banner-title {
        font-size: 1.125rem
    }
}

@media (max-width:576px) {
    #banner .banner-left .banner-title {
        width: 100%;
        font-size: 1.25rem
    }
}

#banner .banner-left .banner-action {
    position: relative;
    text-align: left
}

#banner .banner-left .banner-action .banner-pattern {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -90%;
    z-index: 0
}

#banner .banner-left .banner-action .banner-btn {
    position: relative;
    z-index: 1;
    width: fit-content;
    text-align: center;
    display: block;
    margin-bottom: 2rem;
    text-decoration: unset
}

@media (max-width:576px) {
    #banner .banner-left .banner-action .banner-btn {
        margin-bottom: 0
    }
}

#banner .banner-left .banner-action .banner-btn .banner-btn-bg {
    position: relative;
    z-index: 1;
    max-height: 60px
}

#banner .banner-left .banner-action .banner-btn .btn-text {
    z-index: 1;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    color: #fff;
    font-family: REM-Medium;
    font-size: 90%;
    white-space: nowrap
}

#banner .banner-right {
    width: 30%
}

@media (max-width:576px) {
    #banner .banner-right {
        margin-top: -10px;
        width: 100%;
        text-align: right
    }
}

#banner .banner-right .banner-mask-img {
    width: 100%
}

@media (max-width:576px) {
    #banner .banner-right .banner-mask-img {
        width: 50%
    }
}

#footer {
    background-color: #fff;
    padding: 3rem 12%
}

@media (max-width:1100px) {
    #footer {
        padding: 2.5rem 8% 1rem
    }
}

@media (max-width:992px) {
    #footer {
        padding: 2.5rem 5% 1rem
    }
}

@media (max-width:490px) {
    #footer {
        padding: 2rem 1rem
    }
}

#footer .footer-container {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#footer .footer__logo {
    width: 20%
}

@media (max-width:992px) {
    #footer .footer__logo {
        width: 30%
    }
}

@media (max-width:576px) {
    #footer .footer__logo {
        width: 100%
    }
}

#footer .footer__contact {
    width: 25%;
    margin-left: 5%
}

@media (max-width:1024px) {
    #footer .footer__contact {
        width: 45%;
        margin-left: 0
    }
}

@media (max-width:992px) {
    #footer .footer__contact {
        width: 60%;
        margin-left: 0
    }
}

@media (max-width:768px) {
    #footer .footer__contact {
        width: 70%;
        margin-left: 0
    }
}

@media (max-width:576px) {
    #footer .footer__contact {
        width: 100%;
        margin-bottom: 1rem;
        margin-left: 0
    }
}

#footer .footer__contact .contact-item {
    margin-bottom: 1.25rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    color: #2c2c2c;
    font-family: REM-light
}

#footer .footer__contact .contact-item.address {
    font-size: 120%;
    font-family: REM
}

#footer .footer__contact .contact-item:hover {
    text-decoration: none
}

#footer .footer__contact .contact-item span {
    font-size: 90%
}

@media (max-width:576px) {
    #footer .footer__contact .contact-item {
        margin-bottom: .75rem
    }
}

#footer .footer__privacy {
    width: 40%;
    text-align: center
}

@media (max-width:992px) {
    #footer .footer__privacy {
        width: 50%
    }
}

@media (max-width:576px) {
    #footer .footer__privacy {
        width: 100%
    }
}

#footer .footer__social {
    width: 10%;
    text-align: center
}

@media (max-width:992px) {
    #footer .footer__social {
        width: 50%
    }
}

@media (max-width:576px) {
    #footer .footer__social {
        width: 100%
    }
}

#footer .footer-logo {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

@media (max-width:576px) {
    #footer .footer-logo {
        justify-content: flex-start;
        margin-bottom: 1rem
    }
}

#footer .footer-logo .ft-logo-img {
    width: 150px;
    margin-right: 5px
}

#footer .footer-logo span {
    font-family: PlaywriteUSTrad;
    font-size: 140%;
    color: #fff
}

#footer .footer-logo span:hover {
    text-decoration: none
}

#footer .link-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 2rem
}

@media (max-width:992px) {
    #footer .link-container {
        margin-bottom: 1rem
    }
}

#footer .link-container .link-footer {
    text-align: right;
    width: 50%;
    white-space: nowrap;
    margin-bottom: 1rem;
    font-family: REM-Medium;
    font-size: 80%;
    color: #2c2c2c;
    text-decoration: unset
}

@media (max-width:576px) {
    #footer .link-container .link-footer {
        text-align: left
    }
}

#footer .link-container .link-footer:hover {
    color: #2c2c2c
}

#footer .footer-copyright {
    width: 60%;
    margin: 0 0 0 auto;
    color: #2c2c2c;
    text-align: left
}

@media (max-width:992px) {
    #footer .footer-copyright {
        width: 100%;
        margin: 0 auto;
        text-align: center
    }
}

#footer .footer-copyright .text-copyright {
    font-size: 90%;
    font-family: REM-light
}

#footer .social-list {
    margin-bottom: 1.5rem;
    text-align: right
}

@media (max-width:992px) {
    #footer .social-list {
        text-align: center
    }
}

#footer .social-list a.social-item {
    display: block;
    margin-bottom: .5rem;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease
}

@media (max-width:992px) {
    #footer .social-list a.social-item {
        display: inline-block;
        margin-right: .5rem
    }
}

#footer .social-list a.social-item img {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    width: 24px
}

#footer .social-list a.social-item:hover {
    text-decoration: none
}

#footer .social-list a.social-item:hover img {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2)
}

@media (max-width:576px) {
    #footer .social-list {
        text-align: left
    }

    #footer .social-list a.social-item img {
        width: 28px
    }

    #footer .social-list a.social-item:not(:last-child) {
        margin-right: .75rem
    }
}

.form-control {
    color: #888;
    margin-bottom: .75rem;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #dadde1;
    padding-left: 2rem
}

.form-control[name=booking_note] {
    margin-bottom: 1rem
}

.form-control:active,
.form-control:focus,
.form-control:hover,
.form-control:visited {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    outline: 0;
    border-color: #a21313
}

@media (max-height:750px) and (min-width:1400px) {
    .form-control {
        margin-bottom: .25rem
    }
}

@media (max-height:700px) and (min-width:1330px) {
    .form-control {
        height: calc(1.5em + .5rem + 2px)
    }
}

@media (max-width:1300px) {
    .form-control {
        margin-bottom: .5rem
    }
}

@media (max-width:1050px) {
    .form-control {
        height: calc(1.5em + .25rem + 2px);
        padding: .275rem .75rem
    }
}

.form-group {
    text-align: left;
    width: 100%;
    margin-bottom: .75rem
}

.form-group label {
    white-space: nowrap;
    color: #3d3d3d;
    font-size: 90%
}

.form-group label span {
    color: #ff3110
}

.form-group .form-text-help {
    color: #33f;
    font-size: 70%;
    white-space: nowrap
}

.form-group .invalid-feedback {
    font-size: 70%;
    margin-top: 0
}

@media (max-width:360px) {
    .form-group {
        margin-bottom: .5rem
    }
}

.form-control-select {
    color: #888;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    text-align: center;
    background-color: transparent;
    border: 0;
    border-bottom: 0;
    padding-left: 0;
    background: unset;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none
}

.form-control-select:active,
.form-control-select:focus,
.form-control-select:hover,
.form-control-select:visited {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    outline: 0
}

@media (max-height:700px) and (min-width:1330px) {
    .form-control-select {
        height: calc(1.5em + .5rem + 2px);
        padding: .3rem .75rem
    }
}

@media (max-width:1050px) {
    .form-control-select {
        height: calc(1.5em + .25rem + 2px);
        padding: .275rem .75rem
    }
}

@media (max-width:576px) {
    .form-control-select {
        width: 100%
    }
}

@media (max-width:400px) {
    .form-control-select {
        font-size: 90%
    }
}

.form-modal-group {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between
}

@media (max-width:576px) {
    .form-modal-group {
        margin-top: 0;
        flex-direction: column-reverse
    }
}

.form-modal-group .select-list {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0 5px
}

.form-modal-group .select-list:not(:last-child) {
    margin-bottom: 2.5rem
}

@media (max-width:576px) {
    .form-modal-group .select-list:not(:last-child) {
        margin-bottom: 0
    }
}

@media (max-width:380px) {
    .form-modal-group .select-list:not(:last-child) {
        margin-bottom: .5rem
    }
}

@media (max-width:576px) {
    .form-modal-group .select-list {
        margin-bottom: 0
    }
}

@media (max-width:380px) {
    .form-modal-group .select-list {
        margin-bottom: .5rem
    }
}

.form-modal-group .select-birthday-item {
    position: relative;
    border-bottom: 1px solid #dadde1;
    width: 32%
}

.form-modal-group .select-birthday-item:not(:last-child) {
    margin-right: 2%
}

.form-modal-group .select-birthday-item:not(:last-child)::after {
    content: "/";
    font-weight: 900;
    position: absolute;
    right: -5px;
    top: 0;
    color: #000
}

@media (max-width:576px) {
    .form-modal-group .select-birthday-item:not(:last-child)::after {
        line-height: 1;
        top: 25%;
        display: none
    }
}

.form-modal-group .select-birthday-item:hover {
    border-color: #a21313
}

.form-modal-group .select-hour-item {
    width: 50%;
    border-bottom: 1px solid #dadde1
}

.form-modal-group .select-hour-item:hover {
    border-color: #a21313
}

#marquee {
    display: none;
    background-color: #000;
    color: #fff;
    padding: .5rem 0;
    position: fixed;
    left: 0;
    top: 0;
    font-size: .75rem
}

.scroll-to-top {
    display: none;
    position: fixed;
    right: 5%;
    bottom: 10%;
    width: 40px;
    height: 40px;
    cursor: pointer
}

.scroll-to-top .scroll-top-content {
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 41.48%);
    border: 1px solid transparent
}

.scroll-to-top .scroll-top-content img {
    width: 20px
}

.scroll-to-top .scroll-top-content:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 41.48%) padding-box, linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #f8f4e9 60%, #661bc2 80%, #ab36c2 100%) border-box
}

#not-found {
    padding: 10% 0 8%
}

@media (max-width:992px) {
    #not-found {
        padding: 18% 0 16%
    }
}

@media (max-width:500px) {
    #not-found {
        padding: 25% 0
    }
}

#not-found .nf-content {
    margin: 0 auto;
    width: 60%;
    text-align: center
}

@media (max-width:1300px) {
    #not-found .nf-content {
        width: 70%
    }
}

@media (max-width:1100px) {
    #not-found .nf-content {
        width: 100%
    }
}

#not-found .nf-thumbnail {
    width: 70%;
    max-width: 50vw;
    margin: 0 auto 1rem
}

#not-found .nf-thumbnail img {
    width: 100%
}

@media (max-width:576px) {
    #not-found .nf-thumbnail {
        max-width: 80vw;
        width: 80%
    }
}

#not-found .nf-text {
    color: #706666;
    margin-bottom: 2rem
}

@media (max-width:440px) {
    #not-found .nf-text {
        font-size: 90%
    }
}

@media (max-width:400px) {
    #not-found .nf-text {
        font-size: 3.5vw
    }
}

#not-found .nf-action .btn-back-home img {
    height: 50px;
    width: unset
}

#not-found .nf-action .btn-back-home:hover {
    text-decoration: unset
}

.toast-container {
    z-index: 9999;
    right: 1rem;
    top: 1rem
}

@media (max-width:420px) {
    .toast-container {
        top: 1.5rem
    }
}

@media (max-width:440px) {
    .toast-container {
        right: 5vw
    }
}

.toast-container .toast-header {
    color: #2c2c2c;
    padding: .35rem .5rem;
    font-family: REM-Medium;
    background-color: transparent;
    font-size: 100%;
    border-bottom: 2px dotted rgba(0, 0, 0, .05);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.2
}

.toast-container .toast-body {
    color: #706666;
    font-family: REM-light;
    font-size: 96%;
    padding: .5rem .5rem
}

.toast-container .toast {
    overflow: hidden;
    min-height: 65px;
    position: relative;
    background: rgba(36, 44, 50, .3333333333);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    -webkit-box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .04), 0 2px 15px -3px rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .04), 0 2px 15px -3px rgba(0, 0, 0, .07);
    box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .04), 0 2px 15px -3px rgba(0, 0, 0, .07)
}

@media (max-width:440px) {
    .toast-container .toast {
        max-width: 100%;
        width: 90vw
    }
}

.toast-container .toast .toast-icon {
    display: none;
    width: 12px;
    margin-right: 5px
}

.toast-container .toast.default {
    background: #fff
}

.toast-container .toast.default .toast-header {
    border-color: rgba(0, 0, 0, .4);
    color: #2c2c2c
}

.toast-container .toast.default .toast-body {
    color: #706666
}

.toast-container .toast.default .toast-icon.default-icon {
    display: block
}

.toast-container .toast.info {
    background: #e6fcff
}

.toast-container .toast.info .toast-header {
    border-color: rgba(198, 230, 241, .5);
    color: #1a7986
}

.toast-container .toast.info .toast-body {
    color: #1a7986
}

.toast-container .toast.info .toast-icon.info-icon {
    display: block
}

.toast-container .toast.warn {
    background: #fff9e6
}

.toast-container .toast.warn .toast-header {
    border-color: rgba(137, 109, 7, .4);
    color: #896d07
}

.toast-container .toast.warn .toast-body {
    color: #896d07
}

.toast-container .toast.warn .toast-icon.warn-icon {
    display: block
}

.toast-container .toast.success {
    background: #e5ffe6
}

.toast-container .toast.success .toast-header {
    border-color: rgba(199, 242, 199, .5);
    color: #087f0a
}

.toast-container .toast.success .toast-body {
    color: #087f0a
}

.toast-container .toast.success .toast-icon.success-icon {
    display: block
}

.toast-container .toast.error {
    background: #fee6e7
}

.toast-container .toast.error .toast-header {
    border-color: rgba(244, 200, 207, .5);
    color: #c3131e
}

.toast-container .toast.error .toast-body {
    color: #c3131e
}

.toast-container .toast.error .toast-icon.error-icon {
    display: block
}

.popover {
    background-color: transparent
}

.popover.popover-custom {
    width: max-content;
    max-width: max-content;
    border: 0;
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0
}

.popover.popover-custom .arrow::after,
.popover.popover-custom .arrow::before {
    display: none !important
}

@media (max-width:576px) {
    .popover.popover-custom .arrow {
        width: 30px;
        height: 30px;
        background-image: url(../images/btn-close-popover.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center
    }
}

@media (max-width:440px) {
    .popover.popover-custom.bs-popover-top>.arrow {
        bottom: calc(-.5rem - 18px)
    }
}

@media (max-width:400px) {
    .popover.popover-custom.bs-popover-top>.arrow {
        bottom: calc(-.5rem - 12px)
    }
}

.popover.popover-custom .popover-header {
    opacity: 0;
    text-align: center;
    background-color: transparent;
    border: 0 !important;
    font-family: REM-Medium;
    font-size: 1.25rem;
    padding-bottom: 0
}

.popover.popover-custom .popover-header span {
    font-size: 60%;
    font-family: REM-light
}

.popover.popover-custom .popover-body {
    width: max-content;
    text-align: center;
    background-color: transparent;
    border: 0 !important;
    color: #fff;
    font-family: REM;
    padding: 0
}

.popover.popover-custom .popover-body>div {
    text-align: left
}

.popover.popover-custom .popover-body .img-suggest-bg {
    background-image: url(../images/popover-suggest-img.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 500px;
    height: 360px
}

@media (max-width:992px) {
    .popover.popover-custom .popover-body .img-suggest-bg {
        width: 450px;
        height: 325px
    }
}

@media (max-width:576px) {
    .popover.popover-custom .popover-body .img-suggest-bg {
        width: 400px;
        height: 300px
    }
}

@media (max-width:440px) {
    .popover.popover-custom .popover-body .img-suggest-bg {
        width: 98vw;
        height: 327px
    }
}

#header-result {
    padding: 8% 0;
    position: relative
}

@media (max-width:576px) {
    #header-result {
        padding: 20% 0 5%
    }
}

#header-result .header-result-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    transform: translate(-50%, -38%);
    -webkit-transform: translate(-50%, -38%);
    -moz-transform: translate(-50%, -38%);
    -ms-transform: translate(-50%, -38%);
    -o-transform: translate(-50%, -38%)
}

@media (max-width:768px) {
    #header-result .header-result-img {
        width: 60%
    }
}

@media (max-width:576px) {
    #header-result .header-result-img {
        width: 85%
    }
}

@media (max-width:490px) {
    #header-result .header-result-img {
        width: 96%
    }
}

#header-result .overview-content {
    position: relative;
    text-align: center;
    z-index: 1
}

#header-result .title-container {
    font-size: 1.5rem;
    color: #2c2c2c;
    margin-bottom: 3rem
}

#header-result .title-container .title-top {
    font-family: PlaywriteUSTrad;
    background: -webkit-linear-gradient(0deg, #661bc2 31.28%, #ab36c2 61.24%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 20px;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    padding: 1rem 0 1.25rem;
    display: inline-block
}

#header-result .title-container .title-bottom {
    text-transform: uppercase;
    font-family: REM-light
}

#header-result .avatar-container {
    margin-bottom: 5rem
}

@media (max-width:490px) {
    #header-result .avatar-container {
        margin-bottom: 3rem
    }
}

#header-result .avatar-container .user-avatar {
    position: relative;
    width: fit-content;
    margin: 0 auto 2rem
}

#header-result .avatar-container .payment-status {
    position: absolute;
    top: -13px;
    right: -67px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: .25rem 1rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    background-color: #504f4d;
    color: #fff
}

@media (max-width:490px) {
    #header-result .avatar-container .payment-status {
        right: -2%
    }
}

#header-result .avatar-container .payment-status.payment-success {
    background-color: #38b866
}

#header-result .avatar-container .payment-status.payment-success .not-payment {
    display: none
}

#header-result .avatar-container .payment-status.not-payment {
    background-color: #b84800
}

#header-result .avatar-container .payment-status.not-payment .payment-success {
    display: none
}

#header-result .avatar-container .payment-status .payment-status-icon {
    margin-right: 5px;
    width: 15px
}

#header-result .avatar-container .payment-status .payment-text {
    font-family: REM-Medium;
    font-size: 75%
}

#header-result .avatar-container .user-avatar-img {
    max-width: 30vw;
    max-height: 360px;
    border-radius: 4rem 1rem 1rem 1rem;
    -webkit-border-radius: 4rem 1rem 1rem 1rem;
    -moz-border-radius: 4rem 1rem 1rem 1rem;
    -ms-border-radius: 4rem 1rem 1rem 1rem;
    -o-border-radius: 4rem 1rem 1rem 1rem
}

@media (max-width:768px) {
    #header-result .avatar-container .user-avatar-img {
        max-width: 40vw
    }
}

@media (max-width:576px) {
    #header-result .avatar-container .user-avatar-img {
        max-width: 50vw
    }
}

@media (max-width:490px) {
    #header-result .avatar-container .user-avatar-img {
        max-width: 90vw;
        width: 90%;
        max-height: unset
    }
}

#header-result .avatar-container .user-name {
    font-family: REM-Medium;
    margin-bottom: .75rem;
    font-size: 1.25rem
}

#header-result .avatar-container .user-email {
    color: #706666;
    font-family: REM-light
}

#header-result .overview-user {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    padding: 1.5rem 0;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px
}

@media (max-width:490px) {
    #header-result .overview-user {
        justify-content: space-between;
        text-align: left;
        padding: .5rem
    }
}

#header-result .overview-user .overview-user__item {
    font-size: 90%;
    font-family: REM-Medium
}

#header-result .overview-user .overview-user__item span {
    font-family: REM-light
}

@media (max-width:576px) {
    #header-result .overview-user .overview-user__item {
        max-width: 50%;
        min-width: 40%;
        margin-bottom: 1rem
    }

    #header-result .overview-user .overview-user__item:last-child {
        width: 100%;
        max-width: 100%
    }
}

@media (max-width:360px) {
    #header-result .overview-user .overview-user__item {
        font-size: 80%
    }
}

.result-container {
    padding: 0 12%
}

@media (max-width:1440px) {
    .result-container {
        padding: 0 10%
    }
}

@media (max-width:992px) {
    .result-container {
        padding: 0 8%
    }
}

@media (max-width:768px) {
    .result-container {
        padding: 0 5%
    }
}

@media (max-width:440px) {
    .result-container {
        padding: 0 15px
    }
}

.text-block-content {
    font-size: 100%
}

@media (max-width:1440px) {
    .text-block-content {
        font-size: 90%
    }
}

.result-block-title {
    padding: 1.5rem 0;
    background: linear-gradient(90deg, #ffe8fd 0, #f5effc 100%)
}

@media (max-width:400px) {
    .result-block-title {
        padding: 1rem 0
    }
}

.result-block-title .result-block-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-family: REM-Medium
}

.result-block-title .result-block-content .result-block-text {
    text-transform: uppercase;
    font-size: 1.5rem;
    color: #a963c7
}

@media (max-width:490px) {
    .result-block-title .result-block-content .result-block-text {
        font-size: 1.25rem
    }
}

@media (max-width:400px) {
    .result-block-title .result-block-content .result-block-text {
        font-size: 1.125rem
    }
}

.result-block-title .result-block-content .result-block-stt {
    width: fit-content;
    font-size: 4rem;
    background: linear-gradient(270deg, rgba(169, 99, 199, .4) 0, rgba(169, 99, 199, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width:490px) {
    .result-block-title .result-block-content .result-block-stt {
        font-size: 3rem
    }
}

@media (max-width:400px) {
    .result-block-title .result-block-content .result-block-stt {
        font-size: 2.75rem
    }
}

#analysis-results {
    padding: 2rem 0
}

#analysis-results .title {
    text-align: center;
    font-size: 1.75rem;
    font-family: REM-Medium;
    text-transform: uppercase;
    margin-bottom: 2rem
}

#analysis-results .physiognomy-overview-container {
    padding: 2rem 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

@media (max-width:576px) {
    #analysis-results .physiognomy-overview-container {
        justify-content: center;
        padding-bottom: 0
    }
}

#analysis-results .physiognomy-overview-container .physiognomy-block {
    width: 48%;
    margin-bottom: 1rem;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px
}

@media (max-width:576px) {
    #analysis-results .physiognomy-overview-container .physiognomy-block {
        width: 100%
    }
}

@media (max-width:400px) {
    #analysis-results .physiognomy-overview-container .physiognomy-block {
        padding: 2rem 1rem 1rem
    }
}

#analysis-results .physiognomy-overview-container .physiognomy-block .physiognomy__label {
    font-family: REM-Medium;
    margin-bottom: 1rem
}

#analysis-results .physiognomy-details-title {
    font-family: REM-Medium;
    font-size: 1.35rem;
    margin-bottom: 2rem
}

@media (max-width:440px) {
    #analysis-results .physiognomy-details-title {
        font-size: 1.25rem
    }
}

@media (max-width:380px) {
    #analysis-results .physiognomy-details-title {
        font-size: 1.125rem;
        white-space: nowrap
    }
}

#analysis-results .physiognomy-details-container {
    padding: 2rem 0
}

@media (max-width:576px) {
    #analysis-results .physiognomy-details-container {
        padding: 2rem 0 0
    }
}

#analysis-results .physiognomy-details-container .face-shape-wrapper {
    position: relative;
    padding-left: 25%
}

@media (max-width:576px) {
    #analysis-results .physiognomy-details-container .face-shape-wrapper {
        padding-left: 0
    }
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape-thumbnail {
    position: absolute;
    left: 5%;
    top: 5%;
    width: auto;
    height: 80%
}

@media (max-width:1100px) {
    #analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape-thumbnail {
        left: -5%
    }
}

@media (max-width:576px) {
    #analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape-thumbnail {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%)
    }
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape-content {
    width: 100%
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group .face-shape--line {
    text-align: center;
    width: 15%
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group .face-shape--line .face-shape-line-img {
    width: 80%
}

@media (max-width:576px) {
    #analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group .face-shape--line {
        display: none
    }
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group .face-shape--block {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    width: 83%;
    padding: .5rem
}

@media (max-width:576px) {
    #analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group .face-shape--block {
        width: 100%
    }
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group .face-shape--block .face-shape__label {
    font-family: REM-Medium;
    margin-bottom: 1rem
}

#analysis-results .physiognomy-details-container .face-shape-wrapper .face-shape--group .face-shape--block .face-shape__list {
    font-family: REM;
    padding-left: 1.25rem
}

#analysis-results .five-senses-result {
    padding: 2rem 0
}

#analysis-results .five-senses-result .physiognomy-details-title {
    margin-bottom: 4rem
}

#analysis-results .five-senses-result .five-senses-result-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 2rem
}

@media (max-width:576px) {
    #analysis-results .five-senses-result .five-senses-result-wrapper {
        margin-bottom: 0
    }
}

#analysis-results .five-senses-result .five-senses__block {
    position: relative;
    padding: 2.5rem .5rem .5rem;
    width: 47%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    margin-bottom: 2rem
}

@media (max-width:576px) {
    #analysis-results .five-senses-result .five-senses__block {
        width: 100%
    }

    #analysis-results .five-senses-result .five-senses__block:last-child {
        margin-bottom: 0
    }
}

#analysis-results .five-senses-result .five-senses__block:nth-child(1) {
    margin-right: 6%
}

@media (max-width:576px) {
    #analysis-results .five-senses-result .five-senses__block:nth-child(1) {
        margin-right: 0
    }
}

#analysis-results .five-senses-result .five-senses__block:nth-child(3) {
    margin-right: 6%
}

@media (max-width:576px) {
    #analysis-results .five-senses-result .five-senses__block:nth-child(3) {
        margin-right: 0
    }
}

#analysis-results .five-senses-result .five-senses__block .five-senses__label {
    position: absolute;
    top: -14%;
    left: -7%;
    padding: .5rem 1.25rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    font-family: REM-Medium;
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc
}

@media (max-width:576px) {
    #analysis-results .five-senses-result .five-senses__block .five-senses__label {
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        font-size: 90%
    }
}

@media (max-width:490px) {
    #analysis-results .five-senses-result .five-senses__block .five-senses__label {
        width: max-content;
        justify-content: center;
        top: -9%
    }
}

#analysis-results .five-senses-result .five-senses__block .five-senses__label .five-senses-icon {
    width: 20px;
    margin-right: 5px
}

@media (max-width:576px) {
    #analysis-results .five-senses-result .five-senses__block .five-senses__label .five-senses-icon {
        width: 18px
    }
}

#analysis-results .five-senses-result .five-senses__block .five-senses__label span {
    white-space: nowrap
}

#analysis-results .five-senses-result .five-senses__block .five-senses__result {
    font-family: REM;
    padding-left: 1.25rem
}

#analysis-results .face-analysis-3point {
    padding: 2rem 0;
    margin-bottom: 2rem
}

@media (max-width:576px) {
    #analysis-results .face-analysis-3point {
        padding: 2rem 0 1rem;
        margin-bottom: 0
    }
}

#analysis-results .face-analysis-3point .face-analysis__block {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 1.75rem
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block {
    width: 32%;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    text-align: center;
    padding: 1rem .5rem .5rem
}

@media (max-width:576px) {
    #analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block {
        width: 100%;
        margin-bottom: 1rem
    }
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block .face-analysis--label-top {
    width: fit-content;
    margin: 0 auto .5rem;
    background: linear-gradient(90deg, #661bc2 31.28%, #ab36c2 61.24%);
    font-family: PlaywriteUSTrad;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.25rem
}

@media (max-width:1100px) {
    #analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block .face-analysis--label-top {
        font-size: 1.125rem
    }
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block .face-analysis--label-bottom {
    margin-bottom: .5rem;
    font-family: REM-Medium
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block .face-analysis--highlight {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block .face-analysis--highlight .dots {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: rgba(44, 44, 44, .1607843137)
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block .face-analysis--highlight .polygon {
    width: 36px
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__square-block .face-analysis--highlight div:nth-child(2) {
    margin: 0 8px
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__row-block {
    width: 63%
}

@media (max-width:576px) {
    #analysis-results .face-analysis-3point .face-analysis__block .face-analysis__row-block {
        width: 100%
    }
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__row-block ul {
    margin-bottom: 0
}

#analysis-results .face-analysis-3point .face-analysis__block .face-analysis__row-block .face-analysis--row {
    width: 100%;
    background-color: #fff;
    padding: .35rem;
    padding-left: 2rem;
    margin-bottom: .5rem;
    border: 1px solid #e0e0e0;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc
}

#analysis-results .twelve-destiny-container {
    padding: 2rem 0;
    margin-bottom: 2rem;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between
}

#analysis-results .twelve-destiny-container .twelve-destiny-face {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%)
}

@media (max-width:576px) {
    #analysis-results .twelve-destiny-container .twelve-destiny-face {
        display: none
    }
}

#analysis-results .twelve-destiny-container .twelve-destiny__block {
    margin-bottom: .75rem;
    padding: .5rem;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    background: linear-gradient(102.44deg, #fff 57.94%, rgba(255, 255, 255, 0) 99.01%)
}

@media (max-width:576px) {
    #analysis-results .twelve-destiny-container .twelve-destiny__block {
        background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%)
    }
}

#analysis-results .twelve-destiny-container .twelve-destiny__block .twelve-destiny__block--label {
    width: fit-content;
    background: linear-gradient(90deg, #661bc2 31.28%, #ab36c2 61.24%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: PlaywriteUSTrad;
    line-height: 1.5;
    padding-bottom: 5px;
    transform: translateY(2px);
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -o-transform: translateY(2px)
}

#analysis-results .twelve-destiny-container .twelve-destiny__block .twelve-destiny__block--description {
    font-family: REM-Medium;
    margin-bottom: 1.25rem
}

@media (max-width:1440px) {
    #analysis-results .twelve-destiny-container .twelve-destiny__block .twelve-destiny__block--description {
        margin-bottom: 1rem
    }
}

#analysis-results .twelve-destiny-container .twelve-destiny__block .twelve-destiny__block--text {
    font-size: .9rem
}

#analysis-results .twelve-destiny-container .twelve-destiny-column {
    width: 31.5%
}

@media (max-width:576px) {
    #analysis-results .twelve-destiny-container .twelve-destiny-column {
        width: 100%
    }
}

#analysis-results .twelve-destiny-container .twelve-destiny-column:nth-child(3) {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: space-between
}

#analysis-results .twelve-destiny-container .twelve-destiny-column:nth-child(3) .twelve-destiny__block {
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%)
}

@media (max-width:576px) {
    #analysis-results .twelve-destiny-container .twelve-destiny-column:nth-child(3) .twelve-destiny__block {
        background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%)
    }
}

#analysis-results .twelve-destiny-container .twelve-destiny-column:nth-child(3) .twelve-destiny__block:last-child {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 41.48%)
}

@media (max-width:576px) {
    #analysis-results .twelve-destiny-container .twelve-destiny-column:nth-child(3) .twelve-destiny__block:last-child {
        background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%)
    }
}

@media (max-width:576px) {
    #analysis-results .twelve-destiny-container .twelve-destiny-column:nth-child(3) {
        display: block
    }
}

#analysis-results .twelve-destiny-container .twelve-destiny-column:nth-child(4) .twelve-destiny__block {
    background: linear-gradient(259.62deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%)
}

#analysis-results .outstanding-strengths-container {
    padding: 2rem 0;
    margin-bottom: 3rem
}

@media (max-width:576px) {
    #analysis-results .outstanding-strengths-container {
        margin-bottom: 0
    }
}

#analysis-results .outstanding-strengths-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width:576px) {
    #analysis-results .outstanding-strengths-wrapper {
        padding: 2rem 0
    }
}

#analysis-results .outstanding-strengths-wrapper .outstanding-strengths-left {
    width: 62%
}

@media (max-width:576px) {
    #analysis-results .outstanding-strengths-wrapper .outstanding-strengths-left {
        width: 100%
    }
}

#analysis-results .outstanding-strengths-wrapper .outstanding-strengths__block {
    position: relative;
    text-align: center;
    margin-bottom: 2.5rem;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    padding: 2.5rem .5rem 1rem;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px
}

#analysis-results .outstanding-strengths-wrapper .outstanding-strengths__block .outstanding-strengths__block--ribbon {
    position: absolute;
    background-color: #fff;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    border: 1px solid #e0e0e0;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc;
    font-family: REM-Medium;
    padding: .25rem 1rem;
    width: max-content
}

#analysis-results .outstanding-strengths-wrapper .outstanding-strengths-right {
    width: 34%
}

@media (max-width:576px) {
    #analysis-results .outstanding-strengths-wrapper .outstanding-strengths-right {
        width: 100%;
        text-align: center
    }
}

#analysis-results .block-note {
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, #f0b978 58.52%, rgba(240, 185, 120, 0) 100%);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    color: #804;
    padding: .75rem
}

@media (max-width:576px) {
    #analysis-results .block-note {
        width: 80%;
        margin: 0 auto
    }
}

@media (max-width:400px) {
    #analysis-results .block-note {
        width: 90%
    }
}

#analysis-results .block-note::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='crimson' stroke-width='3' stroke-dasharray='5%2c 6' stroke-dashoffset='13' stroke-linecap='square'/%3e%3c/svg%3e")
}

#analysis-results .block-note .note-icon {
    z-index: 2;
    position: absolute;
    left: -25px;
    top: -25px;
    width: 50px
}

#analysis-results .block-note .block-note--title {
    font-family: REM-Medium;
    margin-bottom: 1rem
}

#analysis-results .block-note .block-note--list {
    padding-left: 1.5rem
}

@media (max-width:576px) {
    #analysis-results .suggested-changes-container .physiognomy-details-title {
        margin-bottom: 0
    }
}

#analysis-results .suggested-changes-wrapper {
    padding: 2rem 0;
    margin-bottom: 2rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between
}

@media (max-width:576px) {
    #analysis-results .suggested-changes-wrapper {
        margin-bottom: 0
    }
}

#analysis-results .suggested-changes-wrapper .block-note {
    width: 48%
}

@media (max-width:576px) {
    #analysis-results .suggested-changes-wrapper .block-note {
        margin-top: 2rem;
        width: 80%
    }
}

@media (max-width:400px) {
    #analysis-results .suggested-changes-wrapper .block-note {
        width: 90%
    }
}

#analysis-results .suggested-changes-block {
    position: relative;
    width: 48%;
    padding: .5rem 11% 1rem .75rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px
}

@media (max-width:576px) {
    #analysis-results .suggested-changes-block {
        padding-right: 80px;
        width: 100%
    }
}

#analysis-results .suggested-changes-block .suggested-changes-block--thumbnail {
    position: absolute;
    right: 0;
    top: 0
}

#analysis-results .suggested-changes-block .suggested-changes-block--thumbnail img {
    max-width: 110px
}

@media (max-width:1100px) {
    #analysis-results .suggested-changes-block .suggested-changes-block--thumbnail img {
        max-width: 80px
    }
}

#analysis-results .suggested-changes-block .suggested-changes-block--label {
    font-family: REM-Medium;
    margin-bottom: .5rem
}

.note-container {
    padding: 2rem 0;
    text-align: center;
    font-family: REM-LightItalic;
    color: #706666;
    font-size: 80%
}

@media (max-width:576px) {
    .note-container {
        padding: .5rem 0
    }
}

.btn-black {
    color: #fff;
    border: 1px solid #545454;
    background: #2c2c2c;
    padding: .5rem 1.5rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-box-shadow: 0 4px 0 0 rgba(24, 24, 24, .8), 0 6px 0 0 rgba(24, 24, 24, .24), 0 8px 8px 0 rgba(24, 24, 24, .27), 3px 3px 12px 0 rgba(255, 255, 255, .4) inset, -3px -3px 16px 0 rgba(255, 255, 255, .08) inset;
    -moz-box-shadow: 0 4px 0 0 rgba(24, 24, 24, .8), 0 6px 0 0 rgba(24, 24, 24, .24), 0 8px 8px 0 rgba(24, 24, 24, .27), 3px 3px 12px 0 rgba(255, 255, 255, .4) inset, -3px -3px 16px 0 rgba(255, 255, 255, .08) inset;
    box-shadow: 0 4px 0 0 rgba(24, 24, 24, .8), 0 6px 0 0 rgba(24, 24, 24, .24), 0 8px 8px 0 rgba(24, 24, 24, .27), 3px 3px 12px 0 rgba(255, 255, 255, .4) inset, -3px -3px 16px 0 rgba(255, 255, 255, .08) inset
}

.share-banner {
    margin-bottom: 5rem
}

.share-banner .share-container {
    position: relative;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 2rem 30% 2rem 2rem;
    background-image: url(../images/bg-banner-summary1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

@media (max-width:1200px) {
    .share-banner .share-container {
        padding-right: 22%
    }
}

@media (max-width:768px) {
    .share-banner .share-container {
        padding: 1rem
    }
}

.share-banner .share-container .share-content .share-title {
    font-family: REM-Medium;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 2rem
}

@media (max-width:576px) {
    .share-banner .share-container .share-content .share-title {
        font-size: 1.125rem;
        margin-bottom: 1.5rem
    }
}

@media (max-width:440px) {
    .share-banner .share-container .share-content .share-title {
        font-size: 1rem
    }
}

.share-banner .share-container .share-content .share-action {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 3rem
}

@media (max-width:768px) {
    .share-banner .share-container .share-content .share-action {
        display: block
    }
}

@media (max-width:576px) {
    .share-banner .share-container .share-content .share-action {
        margin-bottom: 2rem
    }
}

.share-banner .share-container .share-content a:hover {
    text-decoration: unset
}

.share-banner .share-container .share-content .btn-share-copy {
    margin-right: 1rem
}

@media (max-width:1100px) {
    .share-banner .share-container .share-content .btn-share-copy {
        margin-bottom: 1rem
    }
}

@media (max-width:768px) {
    .share-banner .share-container .share-content .btn-share-copy {
        display: inline-block
    }
}

.share-banner .share-container .share-content .share-label {
    color: rgba(255, 255, 255, .56);
    font-family: REM-light;
    margin-right: 1rem
}

@media (max-width:768px) {
    .share-banner .share-container .share-content .share-label {
        display: block;
        margin-bottom: 1rem
    }
}

.share-banner .share-container .share-content .share-social-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    transform: translateY(6px);
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px)
}

.share-banner .share-container .share-content .share-social-list a {
    display: inline-block;
    margin-right: .25rem
}

.share-banner .share-container .share-content .share-social-list a img {
    width: 50px
}

@media (max-width:440px) {
    .share-banner .share-container .share-content .share-social-list a {
        margin-right: .1rem
    }

    .share-banner .share-container .share-content .share-social-list a img {
        width: 45px
    }
}

.share-banner .share-container .share-mask-img {
    position: absolute;
    right: 0;
    height: 90%;
    width: unset;
    top: 5%
}

@media (max-width:768px) {
    .share-banner .share-container .share-mask-img {
        display: none
    }
}

.loading-result {
    padding: 4rem 0;
    text-align: center
}

.loading-result .loading-result-wrapper {
    margin-bottom: 8rem
}

@media (max-width:768px) {
    .loading-result .loading-result-wrapper {
        margin-bottom: 4rem
    }
}

.loading-result .loader {
    margin: 2rem auto;
    width: 100px;
    aspect-ratio: 1;
    display: grid
}

@media (max-width:440px) {
    .loading-result .loader {
        margin: 0 auto 2rem
    }
}

.loading-result .loader::after,
.loading-result .loader::before {
    content: "";
    grid-area: 1/1;
    --c: no-repeat radial-gradient(farthest-side, rgba(102, 27, 194, 1) 92%, #0000);
    background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
    background-size: 12px 12px;
    -webkit-animation: l12 1s infinite;
    -moz-animation: l12 1s infinite;
    -ms-animation: l12 1s infinite;
    -o-animation: l12 1s infinite;
    animation: l12 1s infinite
}

.loading-result .loader::before {
    margin: 4px;
    filter: hue-rotate(45deg);
    background-size: 8px 8px;
    animation-timing-function: linear
}

.loading-result .loader25 {
    margin: 2rem auto 4rem;
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #a963c7;
    -webkit-mask: radial-gradient(circle closest-side at 50% 40%, rgba(0, 0, 0, 0) 94%, #000);
    transform-origin: 50% 40%;
    animation: l25 1s infinite linear
}

@keyframes l25 {
    100% {
        transform: rotate(1turn)
    }
}

@keyframes l12 {
    100% {
        transform: rotate(.5turn);
        -webkit-transform: rotate(.5turn);
        -moz-transform: rotate(.5turn);
        -ms-transform: rotate(.5turn);
        -o-transform: rotate(.5turn)
    }
}

.loading-result .loading-result-text {
    font-family: REM-Medium;
    color: #2c2c2c
}

.loading-result .loading-result-note {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 90%
}

@media (max-width:768px) {
    .loading-result .loading-result-note {
        display: block
    }
}

.loading-result .loading-result-note .arrow-down-img {
    width: 20px;
    margin: 0 5px
}

.loading-result .loading-result-note span {
    font-family: REM-light;
    color: #706666
}

@media (max-width:768px) {
    .loading-result .loading-result-note span {
        display: block
    }
}

.error-result {
    text-align: center
}

.error-result .result-face-error {
    padding: 5rem 0;
    margin: 0 auto
}

@media (max-width:440px) {
    .error-result .result-face-error {
        padding: 3rem 0
    }
}

.error-result .result-face-error .result-error--thumbnail {
    margin: 0 auto 3rem;
    max-width: 270px
}

@media (max-width:440px) {
    .error-result .result-face-error .result-error--thumbnail {
        max-width: 80%
    }
}

.error-result .result-face-error .result-error--title {
    color: #b84800;
    font-family: REM-Medium;
    font-size: 1.25rem;
    margin-bottom: 1rem
}

.error-result .result-face-error .result-face--descripton {
    color: #706666;
    font-family: REM-light;
    font-size: 80%;
    margin-bottom: 2rem
}

.error-result .result-face-error .btn-reload {
    font-size: 90%
}

.error-result .result-face-error .btn-reload img {
    width: 18px;
    margin-left: 5px
}

.error-result .result-face-error .btn-reload:hover {
    text-decoration: unset
}

.result-locked {
    padding: 4rem 0
}

.result-locked .result-locked__block {
    position: relative;
    width: 100%;
    padding: 4rem 10% 1rem;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    text-align: center
}

@media (max-width:768px) {
    .result-locked .result-locked__block {
        padding: 4rem 1rem 1rem
    }
}

@media (max-width:440px) {
    .result-locked .result-locked__block {
        padding: 3rem .5rem 1rem
    }
}

.result-locked .result-locked__block .result-locked__block--label {
    position: absolute;
    left: 50%;
    top: -20px;
    width: max-content;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    padding: .35rem 1.25rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    font-family: REM-Medium
}

.result-locked .result-locked__block .result-locked__block--label span {
    color: #2c2c2c
}

.result-locked .result-locked__block .result-locked__block--label img {
    width: 20px;
    margin-right: 4px
}

.result-locked .result-locked__block .result-locked__block--title {
    font-family: REM-Medium;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: #2c2c2c
}

.result-locked .result-locked__block .result-locked__block--text {
    margin-bottom: 1rem;
    color: #706666
}

.result-locked .result-locked__block .result-locked__block--action {
    text-align: center
}

.result-locked .result-locked__block .result-locked__block--action .btn-unlock-result {
    margin: 0 auto
}

.modal-unlock .modal-dialog {
    width: 80%;
    max-width: 1200px
}

@media (max-width:1100px) {
    .modal-unlock .modal-dialog {
        width: 92%
    }
}

@media (max-width:576px) {
    .modal-unlock .modal-dialog {
        width: 90%;
        margin: 1rem auto 0
    }
}

@media (max-width:440px) {
    .modal-unlock .modal-dialog {
        margin: -2rem auto 0;
        width: 96%
    }
}

@media (max-width:380px) {
    .modal-unlock .modal-dialog {
        width: 92%;
        margin: 0 auto
    }
}

.modal-unlock .modal-content {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0
}

.modal-unlock .modal-payment-body {
    position: absolute;
    left: 10%;
    top: 5%;
    width: 80%;
    height: 90%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

@media (max-width:768px) {
    .modal-unlock .modal-payment-body {
        left: 5%;
        width: 90%
    }
}

@media (max-width:576px) {
    .modal-unlock .modal-payment-body {
        align-items: flex-start;
        top: 10%;
        height: 80%
    }
}

@media (max-width:490px) {
    .modal-unlock .modal-payment-body {
        top: 5%
    }
}

.modal-unlock .modal-payment-wrapper {
    width: 100%
}

.modal-unlock .modal-payment-header {
    text-align: center;
    color: #fff;
    margin-bottom: 5%
}

@media (max-width:576px) {
    .modal-unlock .modal-payment-header {
        margin-bottom: 1.5rem
    }
}

.modal-unlock .modal-payment-header .modal-payment-title {
    text-transform: uppercase;
    font-family: REM-Medium;
    font-size: 2vw
}

@media (max-width:576px) {
    .modal-unlock .modal-payment-header .modal-payment-title {
        font-size: 4vw;
        margin-bottom: .5rem
    }

    .modal-unlock .modal-payment-header .modal-payment-title span {
        display: block
    }
}

@media (max-width:440px) {
    .modal-unlock .modal-payment-header .modal-payment-title {
        font-size: 4.5vw
    }
}

.modal-unlock .modal-payment-header .modal-payment-subtitle {
    font-family: REM-light
}

.modal-unlock .modal-package-container {
    padding: 0 5%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

@media (max-width:1100px) {
    .modal-unlock .modal-package-container {
        padding: 0
    }
}

.modal-unlock a {
    text-decoration: unset
}

.modal-unlock a:hover {
    text-decoration: unset
}

.modal-unlock .modal-package-payment {
    position: relative;
    width: 31%;
    display: block
}

@media (max-width:576px) {
    .modal-unlock .modal-package-payment {
        width: 100%;
        margin-bottom: 1.5rem
    }
}

@media (max-width:440px) {
    .modal-unlock .modal-package-payment {
        margin-bottom: 1rem
    }
}

.modal-unlock .modal-package-payment .modal-package-payment--content {
    margin-bottom: 1rem;
    padding: 1.5rem 1rem;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%) padding-box, linear-gradient(180deg, #e0e0e0 0, rgba(224, 224, 224, 0) 100%) border-box;
    border: 1px solid transparent
}

@media (max-width:992px) {
    .modal-unlock .modal-package-payment .modal-package-payment--content {
        padding: 1.25rem .5rem
    }
}

@media (max-width:380px) {
    .modal-unlock .modal-package-payment .modal-package-payment--content {
        padding: .5rem;
        margin-bottom: 0
    }
}

.modal-unlock .modal-package-payment .modal-package-payment--mark {
    position: absolute;
    top: -20px;
    right: 15px;
    width: 40px;
    height: 40px
}

.modal-unlock .modal-package-payment .modal-package-payment--mark img {
    width: 100%
}

@media (max-width:768px) {
    .modal-unlock .modal-package-payment .modal-package-payment--mark {
        width: 32px;
        height: 32px;
        top: -15px
    }
}

.modal-unlock .modal-package-payment .modal-package-payment--name {
    color: #2c2c2c;
    font-family: REM-light;
    margin-bottom: 1.5rem;
    font-size: 90%
}

@media (max-width:1200px) {
    .modal-unlock .modal-package-payment .modal-package-payment--name {
        margin-bottom: .75rem
    }
}

.modal-unlock .modal-package-payment .modal-package-payment--detail {
    margin-bottom: 1.5rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    font-size: .9rem
}

@media (max-width:1200px) {
    .modal-unlock .modal-package-payment .modal-package-payment--detail {
        margin-bottom: .75rem
    }
}

.modal-unlock .modal-package-payment .modal-package-payment--detail .prefix {
    color: #ab36c2;
    text-decoration: underline;
    margin-bottom: -9px
}

.modal-unlock .modal-package-payment .modal-package-payment--detail .price {
    margin: 0 15px 0 5px;
    font-family: REM;
    font-size: 2rem;
    color: #ab36c2
}

@media (max-width:768px) {
    .modal-unlock .modal-package-payment .modal-package-payment--detail .price {
        font-size: 1.5rem
    }
}

.modal-unlock .modal-package-payment .modal-package-payment--detail .unit {
    color: #2c2c2c;
    font-family: REM-light;
    margin-bottom: -9px
}

.modal-unlock .modal-package-payment .modal-package-payment--view {
    font-family: REM-light;
    font-size: 80%;
    color: #fff
}

@media (max-width:576px) {
    .modal-unlock .modal-package-payment .modal-package-payment--footer {
        display: none
    }
}

.modal-unlock .modal-package-payment .modal-package-payment--footer .modal-package-payment--button {
    display: block;
    padding: .35rem;
    font-size: 90%;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc;
    color: #fff;
    font-family: REM-light;
    text-decoration: unset
}

.modal-unlock .modal-package-payment .modal-package-payment--footer .modal-package-payment--button:hover {
    text-decoration: unset
}

.modal-unlock .btn-close-modal {
    position: absolute;
    left: 50%;
    bottom: -10%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%)
}

@media (max-width:576px) {
    .modal-unlock .btn-close-modal {
        bottom: 2%
    }
}

@media (max-width:420px) {
    .modal-unlock .btn-close-modal {
        bottom: -5%
    }
}

@media (max-width:380px) {
    .modal-unlock .btn-close-modal {
        bottom: 0
    }
}

.modal-unlock .btn-close-modal img {
    width: 32px
}

#payment {
    padding: 10% 0 5%
}

@media (max-width:768px) {
    #payment {
        padding: 15% 0 6%
    }
}

@media (max-width:440px) {
    #payment {
        padding: 22% 0 6%
    }
}

#payment .payment-container {
    padding: 0 12%
}

@media (max-width:992px) {
    #payment .payment-container {
        padding: 0 6%
    }
}

@media (max-width:440px) {
    #payment .payment-container {
        padding: 0 15px
    }
}

#payment .payment-header {
    position: relative;
    text-align: center;
    color: #2c2c2c;
    margin-bottom: 3rem
}

@media (max-width:576px) {
    #payment .payment-header {
        margin-bottom: 1.5rem
    }
}

#payment .payment-header .payment-header-action {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    width: max-content;
    color: #2c2c2c
}

#payment .payment-header .payment-header-action img {
    width: 35px;
    margin-right: .5rem
}

#payment .payment-header .payment-header-action:hover {
    color: #2c2c2c
}

@media (max-width:768px) {
    #payment .payment-header .payment-header-action {
        position: relative
    }
}

#payment .payment-header .payment-title {
    text-transform: uppercase;
    font-size: 1.75rem;
    font-family: REM-Medium
}

@media (max-width:480px) {
    #payment .payment-header .payment-title {
        font-size: 5vw
    }
}

#payment .payment-header .payment-title .success-icon {
    max-width: 120px;
    margin-bottom: 1rem
}

#payment .payment-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between
}

@media (max-width:768px) {
    #payment .payment-content {
        -webkit-flex-direction: column-reverse;
        -moz-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        -o-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

#payment .payment-content .payment-guide-wrapper,
#payment .payment-content .payment-info {
    width: 48%
}

@media (max-width:800px) {

    #payment .payment-content .payment-guide-wrapper,
    #payment .payment-content .payment-info {
        width: 49%
    }
}

@media (max-width:768px) {

    #payment .payment-content .payment-guide-wrapper,
    #payment .payment-content .payment-info {
        width: 100%
    }
}

#payment .payment-content .payment-guide,
#payment .payment-content .payment-info {
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    padding: 1.5rem 1.25rem;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px
}

@media (max-width:400px) {

    #payment .payment-content .payment-guide,
    #payment .payment-content .payment-info {
        padding: 1rem .5rem
    }
}

#payment .payment-content .payment-guide .title,
#payment .payment-content .payment-info .title {
    font-family: REM-SemiBold;
    color: #2c2c2c;
    font-size: 1.125rem;
    margin-bottom: 2.5rem
}

#payment .payment-content .payment-guide ul,
#payment .payment-content .payment-info ul {
    margin-bottom: .5rem;
    padding-left: 1rem
}

#payment .payment-content .payment-guide ul.type-number,
#payment .payment-content .payment-info ul.type-number {
    list-style-type: decimal
}

#payment .payment-content .payment-guide {
    margin-bottom: 1.25rem
}

#payment .payment-content .payment-guide .payment-guide-group {
    margin-top: 1.5rem;
    font-size: 90%
}

#payment .payment-content .payment-guide .payment-guide-group .payment-guide-subtitle {
    font-family: REM-SemiBold;
    color: #2c2c2c
}

#payment .payment-content .payment-guide .payment-guide-text span {
    color: #2c2c2c;
    font-family: REM-SemiBold;
    font-size: 1rem
}

#payment .payment-content .payment-guide-video .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}

#payment .payment-content .payment-guide-video .video-container .video-poster {
    cursor: pointer;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/Youtube.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

#payment .payment-content .payment-guide-video .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#payment .payment-content .payment-info .payment-process {
    width: 70%;
    margin-left: 15%;
    text-align: center
}

@media (max-width:1200px) {
    #payment .payment-content .payment-info .payment-process {
        width: 90%;
        margin-left: 5%
    }
}

@media (max-width:440px) {
    #payment .payment-content .payment-info .payment-process {
        width: 100%;
        margin-left: 0
    }
}

#payment .payment-content .payment-info .payment-status {
    width: max-content;
    min-height: 55px;
    margin: 0 auto 1rem;
    padding: .5rem 1rem;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center
}

#payment .payment-content .payment-info .payment-status .loading-content {
    width: 60px;
    height: 40px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

#payment .payment-content .payment-info .payment-status .check-icon {
    width: 20px;
    margin-right: .35rem
}

#payment .payment-content .payment-info .payment-status span {
    font-size: 90%;
    font-family: REM-Medium
}

#payment .payment-content .payment-info .payment-status.success {
    background: linear-gradient(90deg, rgba(199, 255, 219, 0) 0, #c7ffdb 50%, rgba(199, 255, 219, 0) 100%)
}

#payment .payment-content .payment-info .payment-status.success .waiting {
    display: none
}

#payment .payment-content .payment-info .payment-status.success span {
    color: #38b866
}

#payment .payment-content .payment-info .payment-status.waiting {
    background: linear-gradient(90deg, rgba(255, 237, 223, 0) 0, #ffeddf 50%, rgba(255, 237, 223, 0) 100%)
}

#payment .payment-content .payment-info .payment-status.waiting .success {
    display: none
}

#payment .payment-content .payment-info .payment-status.waiting span {
    color: #b84800
}

#payment .payment-content .payment-info .loader {
    width: 60px;
    aspect-ratio: 4;
    --c: rgba(184, 72, 0, 1) 90%, #0000;
    background: radial-gradient(circle closest-side at left 4px top 50%, var(--c)), radial-gradient(circle closest-side, var(--c)), radial-gradient(circle closest-side at right 4px top 50%, var(--c));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-animation: three-dot 1.2s infinite alternate;
    -moz-animation: three-dot 1.2s infinite alternate;
    -ms-animation: three-dot 1.2s infinite alternate;
    -o-animation: three-dot 1.2s infinite alternate;
    animation: three-dot 1.2s infinite alternate;
    margin-right: .5rem
}

@keyframes dot-spin {
    to {
        background-position: 150%
    }
}

@keyframes three-dot {
    to {
        width: 20px;
        aspect-ratio: 1
    }
}

#payment .payment-content .payment-info .qr-code {
    margin-bottom: .5rem
}

#payment .payment-content .payment-info .qr-code .qr-code-img {
    width: 50%;
    margin: 0 auto
}

@media (max-width:400px) {
    #payment .payment-content .payment-info .qr-code .qr-code-img {
        width: 60%
    }
}

#payment .payment-content .payment-detail {
    border: 1.5px dashed #f7eeee;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: .75rem
}

@media (max-width:400px) {
    #payment .payment-content .payment-detail {
        padding: .5rem
    }
}

#payment .payment-content .payment-detail .payment-detail-title {
    color: #2c2c2c;
    font-family: REM-Medium;
    margin-bottom: .75rem;
    font-size: 88%
}

#payment .payment-content .table-payment-detail {
    color: #2c2c2c;
    width: 100%;
    font-size: 88%
}

#payment .payment-content .table-payment-detail td {
    padding: .3rem 0
}

@media (max-width:1440px) {
    #payment .payment-content .table-payment-detail td {
        padding: .2rem 0
    }
}

@media (max-width:400px) {
    #payment .payment-content .table-payment-detail {
        font-size: 84%
    }
}

@media (max-width:360px) {
    #payment .payment-content .table-payment-detail {
        font-size: 80%
    }
}

#payment .payment-content .table-payment-detail .text-label {
    text-align: left;
    font-family: REM-light
}

#payment .payment-content .table-payment-detail .text-value {
    text-align: right;
    font-family: REM-Medium
}

#payment .payment-content .table-payment-detail .copy-icon {
    width: 16px;
    margin-left: 3px;
    cursor: pointer;
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px)
}

#payment .btn-black {
    display: block;
    margin: 0 auto 2rem;
    width: fit-content;
    padding: .4rem 1rem;
    background: #2c2c2c;
    color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border: 1px solid #545454;
    box-shadow: 0 4px 0 0 rgba(24, 24, 24, .8);
    -webkit-box-shadow: 0 6px 0 0 rgba(24, 24, 24, .24), 0 8px 8px 0 rgba(24, 24, 24, .27), 3px 3px 12px 0 rgba(255, 255, 255, .4) inset, -3px -3px 16px 0 rgba(255, 255, 255, .08) inset;
    -moz-box-shadow: 0 6px 0 0 rgba(24, 24, 24, .24), 0 8px 8px 0 rgba(24, 24, 24, .27), 3px 3px 12px 0 rgba(255, 255, 255, .4) inset, -3px -3px 16px 0 rgba(255, 255, 255, .08) inset;
    box-shadow: 0 6px 0 0 rgba(24, 24, 24, .24), 0 8px 8px 0 rgba(24, 24, 24, .27), 3px 3px 12px 0 rgba(255, 255, 255, .4) inset, -3px -3px 16px 0 rgba(255, 255, 255, .08) inset;
    text-decoration: unset;
    font-size: 90%;
    font-family: REM-light
}

#payment .btn-black:hover {
    text-decoration: unset
}

#payment .payment-success-content {
    padding: 1rem 28%;
    text-align: center
}

@media (max-width:1600px) {
    #payment .payment-success-content {
        padding: 1rem 25%
    }
}

@media (max-width:1300px) {
    #payment .payment-success-content {
        padding: 1rem 20%
    }
}

@media (max-width:992px) {
    #payment .payment-success-content {
        padding: 1rem 17%
    }
}

@media (max-width:768px) {
    #payment .payment-success-content {
        padding: 1rem 0
    }
}

#payment .payment-success-content .payment-description {
    font-family: REM-light;
    color: #706666;
    white-space: nowrap;
    margin-bottom: .5rem
}

@media (max-width:576px) {
    #payment .payment-success-content .payment-description {
        white-space: normal;
        text-align: left
    }
}

#payment .payment-success-content .payment-link-input {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem
}

@media (max-width:576px) {
    #payment .payment-success-content .payment-link-input {
        flex-wrap: wrap
    }
}

#payment .payment-success-content .payment-link-input .input-link-copy {
    text-align: left;
    width: 78%;
    padding: .5rem;
    background: linear-gradient(180deg, rgba(44, 44, 44, 0) 0, rgba(44, 44, 44, .12) 100%);
    border-bottom: 1px solid #41415c;
    font-family: REM-Medium;
    font-size: 90%
}

@media (max-width:576px) {
    #payment .payment-success-content .payment-link-input .input-link-copy {
        width: 100%;
        margin-bottom: .5rem
    }
}

#payment .payment-success-content .payment-link-input .btn-link-copy {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    width: 20%;
    cursor: pointer
}

@media (max-width:576px) {
    #payment .payment-success-content .payment-link-input .btn-link-copy {
        width: 30%
    }
}

#payment .payment-success-content .payment-link-input .btn-link-copy img {
    width: 35px;
    margin-right: 5px
}

#payment .payment-success-content .payment-link-input .btn-link-copy span {
    white-space: nowrap;
    font-family: REM-light
}

#payment .payment-success-content .btn-view-result {
    margin: 0 auto 3rem;
    padding: .5rem 1rem
}

#payment .payment-success-content .btn-view-result img {
    width: 25px;
    margin-right: 5px
}

#payment .get-info-form {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1rem
}

#payment .get-info-form .info-form-group {
    width: 48.5%
}

@media (max-width:576px) {
    #payment .get-info-form .info-form-group {
        width: 100%;
        margin-bottom: .5rem
    }
}

#payment .get-info-form .form-group label {
    font-family: REM;
    font-size: 90%;
    color: #2c2c2c
}

#payment .get-info-form .form-group label span {
    color: #ff0010
}

#payment .get-info-form .form-group .form-control {
    background: linear-gradient(180deg, rgba(44, 44, 44, 0) 0, rgba(44, 44, 44, .12) 100%);
    padding: .35rem 1rem;
    border-bottom: 1px solid #41415c;
    color: #2c2c2c
}

#payment .get-info-form .form-group .form-control::-webkit-input-placeholder {
    font-family: REM-light;
    font-size: 1rem;
    color: #888;
    text-align: left
}

#payment .get-info-form .form-group .form-control:-ms-input-placeholder {
    font-family: REM-light;
    font-size: 1rem;
    color: #888;
    text-align: left
}

#payment .get-info-form .form-group .form-control::placeholder {
    font-family: REM-light;
    font-size: 1rem;
    color: #888;
    text-align: left
}

#blog {
    padding: 8% 0 4%;
    position: relative
}

@media (max-width:576px) {
    #blog {
        padding: 10% 0 5%
    }
}

@media (max-width:440px) {
    #blog {
        padding: 15% 0 5%
    }
}

@media (max-width:400px) {
    #blog {
        padding: 17% 0 5%
    }
}

@media (max-width:360px) {
    #blog {
        padding: 20% 0 5%
    }
}

#blog .blog-container {
    padding: 0 12%
}

@media (max-width:1200px) {
    #blog .blog-container {
        padding: 0 10%
    }
}

@media (max-width:576px) {
    #blog .blog-container {
        padding: 0 5%
    }
}

@media (max-width:440px) {
    #blog .blog-container {
        padding: 0 15px
    }
}

#blog .title-container {
    position: relative;
    padding: 1rem 0;
    margin-bottom: 2rem
}

@media (max-width:440px) {
    #blog .title-container {
        margin-bottom: .5rem
    }
}

#blog .title-container .blog-title .title {
    font-family: REM;
    text-transform: uppercase;
    color: #2c2c2c;
    font-size: 2rem;
    display: inline;
    margin-right: 15px
}

@media (max-width:400px) {
    #blog .title-container .blog-title .title {
        font-size: 1.5rem
    }
}

#blog .title-container .category {
    display: inline
}

#blog .title-container .category .sprites {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none
}

#blog .title-container .select-category {
    transform: translateY(-7px);
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    position: relative;
    min-width: 100px;
    margin-bottom: 0
}

@media (max-width:400px) {
    #blog .title-container .select-category {
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px)
    }
}

#blog .title-container .select-category svg {
    position: absolute;
    right: 12px;
    top: calc(50% - 3px);
    width: 10px;
    height: 6px;
    stroke-width: 2px;
    stroke: #fff;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none
}

#blog .title-container .select-category select {
    -webkit-appearance: none;
    padding: 5px 45px 5px 35px;
    width: 100%;
    border: none;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background: radial-gradient(50% 50% at 50% 50%, #233529 0, #2c2c2c 100%);
    -webkit-box-shadow: 3px 2px 10px 0 #808581 inset;
    -moz-box-shadow: 3px 2px 10px 0 #808581 inset;
    box-shadow: 3px 2px 10px 0 #808581 inset;
    font-family: REM;
    color: #fff;
    box-shadow: 0 1px 3px -2px #9098a9;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    transition: all 150ms ease
}

@media (max-width:420px) {
    #blog .title-container .select-category select {
        font-size: 90%;
        padding: 4px 40px 4px 30px
    }
}

@media (max-width:360px) {
    #blog .title-container .select-category select {
        padding: 4px 30px 4px 15px
    }
}

#blog .title-container .select-category select:required:invalid {
    color: #5a667f
}

#blog .title-container .select-category select option {
    color: #fff;
    text-align: center
}

#blog .title-container .select-category select option[value=""][disabled] {
    display: none
}

#blog .title-container .select-category select:focus {
    outline: 0
}

#blog .title-container .blog-back-home {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 90%;
    font-family: REM-Medium;
    color: #2c2c2c
}

#blog .title-container .blog-back-home span {
    margin-left: 10px
}

#blog .title-container .blog-back-home img {
    width: 28px
}

@media (max-width:768px) {
    #blog .title-container .blog-back-home {
        display: none
    }
}

#blog .blog-grid {
    display: grid;
    display: -moz-grid;
    display: -ms-grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 15px;
    margin-bottom: 2.5rem
}

@media (max-width:1024px) {
    #blog .blog-grid {
        gap: 15px 10px
    }
}

@media (max-width:768px) {
    #blog .blog-grid {
        gap: 15px 10px;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:576px) {
    #blog .blog-grid {
        gap: 15px 0;
        grid-template-columns: repeat(1, 1fr)
    }
}

#blog .blog-grid .blog-item {
    color: #2c2c2c
}

@media (max-width:768px) {
    #blog .blog-grid .blog-item:nth-child(n+7) {
        display: none
    }
}

#blog .blog-grid .blog-item:hover {
    text-decoration: unset
}

#blog .blog-grid .blog-item .blog--thumbnail {
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
    margin-bottom: .5rem;
    overflow: hidden
}

#blog .blog-grid .blog-item .blog--thumbnail img {
    width: 100%
}

@media (max-width:1024px) {
    #blog .blog-grid .blog-item .blog-content {
        font-size: 90%
    }
}

@media (max-width:576px) {
    #blog .blog-grid .blog-item .blog-content {
        font-size: 100%
    }
}

#blog .blog-grid .blog-item .blog--title {
    font-family: REM;
    line-height: 1.2;
    margin-bottom: .2rem
}

#blog .blog-grid .blog-item .blog--date {
    font-family: REM-light;
    font-size: 90%
}

#blog .blog-pagination {
    text-align: center
}

#blog .blog-pagination nav {
    margin: 0 auto;
    width: max-content
}

#blog .blog-pagination .pagination .page-item {
    margin: 0 5px
}

#blog .blog-pagination .pagination .page-item .pagination-arrow-icon {
    width: 15px
}

#blog .blog-pagination .pagination .page-item .page-link {
    line-height: 1;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid transparent;
    background-color: transparent;
    color: #706666;
    font-family: REM-light
}

#blog .blog-pagination .pagination .page-item.active .page-link {
    background-color: #fff;
    font-family: REM-Medium;
    color: #2c2c2c;
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 2px 0 0 #ccc;
    -moz-box-shadow: 0 2px 0 0 #ccc;
    box-shadow: 0 2px 0 0 #ccc
}

#blog .blog-pagination .pagination .page-item:hover .page-link {
    font-family: REM-Medium;
    color: #2c2c2c
}

#blog .blog-content-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

#blog .blog-content-wrapper .blog-content {
    width: 70%
}

@media (max-width:992px) {
    #blog .blog-content-wrapper .blog-content {
        width: 100%;
        margin-bottom: 1.5rem
    }
}

#blog .blog-content-wrapper .blog-content .blog-content--title {
    font-family: REM-Medium;
    font-size: 1.5rem;
    margin-bottom: 1rem
}

#blog .blog-content-wrapper .blog-content .blog-content--thumbnail {
    margin-bottom: 1rem
}

#blog .blog-content-wrapper .blog-content .blog-content--thumbnail img {
    width: 100%
}

#blog .blog-content-wrapper .blog-content .blog-content--detail {
    font-size: 90%;
    font-family: REM-light
}

#blog .blog-content-wrapper .blog-content .blog-content--detail .title {
    font-family: REM-Medium
}

#blog .blog-content-wrapper .content-summary-container {
    width: 27%
}

@media (max-width:992px) {
    #blog .blog-content-wrapper .content-summary-container {
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start
    }
}

#blog .blog-content-wrapper .content-summary-container .content-summary {
    color: #2c2c2c;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    padding: 1rem;
    background: linear-gradient(180deg, #fff 58.52%, rgba(255, 255, 255, 0) 100%);
    margin-bottom: 1.5rem;
    margin-top: 22%
}

@media (max-width:992px) {
    #blog .blog-content-wrapper .content-summary-container .content-summary {
        margin-top: 0;
        width: 55%
    }
}

@media (max-width:576px) {
    #blog .blog-content-wrapper .content-summary-container .content-summary {
        width: 100%
    }
}

#blog .blog-content-wrapper .content-summary-container .content-summary .summary-title {
    font-family: REM-Medium;
    font-family: 105%;
    margin-bottom: 1rem
}

#blog .blog-content-wrapper .content-summary-container .content-summary .summary-item {
    font-family: REM-light;
    font-size: 90%;
    margin-bottom: .5rem
}

#blog .blog-content-wrapper .content-summary-container .summary-action {
    position: relative;
    background-color: #1a1a2e;
    padding: 2rem 1.5rem;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: hidden;
    background-image: url(../images/bg-banner-summary1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

@media (max-width:1200px) {
    #blog .blog-content-wrapper .content-summary-container .summary-action {
        padding: 1rem .75rem
    }
}

@media (max-width:992px) {
    #blog .blog-content-wrapper .content-summary-container .summary-action {
        width: 42%
    }
}

@media (max-width:576px) {
    #blog .blog-content-wrapper .content-summary-container .summary-action {
        width: 100%
    }
}

#blog .blog-content-wrapper .content-summary-container .summary-action .summary-action-title {
    color: #fff;
    font-family: REM-Medium;
    font-size: 100%;
    margin-bottom: 2rem
}

@media (max-width:1200px) {
    #blog .blog-content-wrapper .content-summary-container .summary-action .summary-action-title {
        margin-bottom: 1rem
    }
}

#blog .blog-content-wrapper .content-summary-container .summary-action .banner-btn {
    text-align: center
}

#blog .blog-content-wrapper .content-summary-container .summary-action .banner-btn-bg {
    margin: 0 auto;
    padding: .4rem 1rem;
    position: relative;
    z-index: 1;
    font-size: 90%
}

#blog .blog-content-wrapper .content-summary-container .summary-action .banner-pattern {
    position: absolute;
    bottom: -15%;
    width: 100%;
    left: 0;
    opacity: .5
}

@media (max-width:576px) {
    #blog .blog-content-wrapper .content-summary-container .summary-action .banner-pattern {
        bottom: -65%
    }
}

@media (max-width:440px) {
    #blog .blog-content-wrapper .content-summary-container .summary-action .banner-pattern {
        bottom: -40%
    }
}

@media (max-width:400px) {
    #blog .blog-content-wrapper .content-summary-container .summary-action .banner-pattern {
        bottom: -27%
    }
}

.button-action-container {
    position: relative;
    margin: 3rem auto 1rem;
    padding: 0 15%
}

@media (max-width:1200px) {
    .button-action-container {
        padding: 0 3%
    }
}

@media (max-width:576px) {
    .button-action-container {
        padding: 0;
        margin: 1rem auto
    }
}

.button-action-container .btn-layer-img {
    width: 100%
}

.button-action-container .btn-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: max-content;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    padding: .4rem .75rem;
    font-family: REM-light;
    font-size: 90%
}

@media (max-width:380px) {
    .button-action-container .btn-preview {
        max-width: 100%
    }
}

.button-action-container .btn-preview .btn-star {
    width: 15px
}

.button-action-container .btn-preview span {
    margin: 0 5px
}

@media (max-width:380px) {
    .button-action-container .btn-preview span {
        font-size: 3.7vw
    }
}

.button-action-container .btn-preview .btn-ribbon {
    position: absolute;
    width: 16px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s
}

.button-action-container .btn-preview .btn-ribbon.rt {
    right: -10px;
    top: -10px
}

.button-action-container .btn-preview .btn-ribbon.rb {
    right: -10px;
    bottom: -12px
}

.button-action-container .btn-preview .btn-ribbon.lt {
    left: -10px;
    top: -10px
}

.button-action-container .btn-preview .btn-ribbon.lb {
    left: -10px;
    bottom: -12px
}

.button-action-container .btn-preview:hover .btn-ribbon.rt {
    transform: translate(3px, -3px);
    -webkit-transform: translate(3px, -3px);
    -moz-transform: translate(3px, -3px);
    -ms-transform: translate(3px, -3px);
    -o-transform: translate(3px, -3px)
}

.button-action-container .btn-preview:hover .btn-ribbon.rb {
    transform: translate(3px, 3px);
    -webkit-transform: translate(3px, 3px);
    -moz-transform: translate(3px, 3px);
    -ms-transform: translate(3px, 3px);
    -o-transform: translate(3px, 3px)
}

.button-action-container .btn-preview:hover .btn-ribbon.lt {
    transform: translate(-3px, -3px);
    -webkit-transform: translate(-3px, -3px);
    -moz-transform: translate(-3px, -3px);
    -ms-transform: translate(-3px, -3px);
    -o-transform: translate(-3px, -3px)
}

.button-action-container .btn-preview:hover .btn-ribbon.lb {
    transform: translate(-3px, 3px);
    -webkit-transform: translate(-3px, 3px);
    -moz-transform: translate(-3px, 3px);
    -ms-transform: translate(-3px, 3px);
    -o-transform: translate(-3px, 3px)
}