/*@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);*/

body {
    color: #fff;
    background-color: #272042;
    font-family: 'Noto Sans TC', serif;
    padding-top: 75px;
    padding-bottom: 90px;
}

a {
    text-decoration: none;
    color: #fff;
    transition: all .3s ease-out;
}

a:hover {
    color: #fff;
}

.wrap ::placeholder {
  color: #FFF;
}

.btn {
    color: #fff;
    border-width: 0;
}


h1 {
    font-size: calc(1.125rem + 1.2vw);
    margin-bottom: 1em;
    line-height: 1.4;
}

h2 {
    font-size: calc(1rem + .9vw);
    font-weight: 600;
    margin-top: calc(2rem + 1.9vw);
    margin-bottom: 1em;
    display: flex;
    align-items: center;
}

h2 span {
    position: relative;
    z-index: 2;
}


h2 span.ch {
    font-size: .9em;
    letter-spacing: 2px;
}

h2 span.en {
    position: absolute;
    text-transform: uppercase;
    z-index: 1;
    white-space: nowrap;
    font-size: 2em;
    font-weight: 900;
    color: #2a274d;
    transform: translateY(-.25rem);
}

h2 span.en.dark {
    color: #282045;
}

h3 {
    font-size: calc(1em + .1vw);
    margin-bottom: calc(.65rem + .2vw);
    margin-bottom: calc(.65rem + .35vw);
    margin-top: calc(.65rem + .2vw) ;
}

ol, ul {
    padding-left: 1.875rem;
}

.h4, h4 {
    font-size: calc(1.275rem + .3vw);
    margin-bottom: 1em;
    margin-top: 1em;
}

.wrap {
    overflow-y: scroll;
    /*margin-top: calc(2rem + 1.9vw);*/
    margin-bottom: calc(1.25rem + 1.2vw);
}

.bi {
    margin-right: calc(.125rem + .3vw);
}

main:not(.page-home) {
    padding-top: calc(.875rem + .9vw);
}

main .container {
    padding-bottom: calc(1.5rem + .9vw);
}

main #news .container {
    padding-left: 0;
    padding-right: 0;
}

footer {
    overflow: hidden;
}


/*********************** public ***********************/

    .fixed-top,
    .fixed-bottom {
        z-index: 1011;
    }

    .modal-backdrop {
        /*z-index: 1055;*/
    }

    .fa-share-square {
        font-size: calc(.8125rem + .2vw);
    }

    .more {
        font-size: calc(.875rem + .2vw);
        padding: .5rem 1.2rem;
        padding: .3125rem calc(.825rem + .75vw);
        padding: .3125rem calc(.725rem + .5vw);
        border-radius: calc(1.5rem + .5vw);
        background-color: #6847ba;
        width: 8em;
        width: 7em;
        text-align: center;
        white-space: nowrap;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .badges {
        height: calc(1.65rem + .2vw);
        width: calc(1.65rem + .2vw);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
    }

    .number {
        font-size: calc(.85rem + .25vw);
        color: #6b639c;
        line-height: .7rem;
        letter-spacing: .6px;
    }

    .datetime {
        display: flex;
        justify-content: center;
        letter-spacing: .6px;
    }

    .views,
    .rank {
        margin: calc(.25rem + .135vw) auto;
    }

    .btnbar {
        margin-bottom: calc(.5rem + .15vw);
    }

    .btnbar-inner {
        margin: auto auto calc(.25rem + .45vw);
        line-height: 2;
        padding: 1px 0;
    }

    .btn-custom {
        margin: 0 .875rem .875rem 0;
        margin: 0 .875rem 1.125rem 0;
        color: #9c94cc;
        font-weight: 600;
        font-size: 1rem;
        padding: 0;
        border: none;
    }

    .btn-custom:hover {
        color: #ffffff;
    }

    .btn-custom:focus {
        box-shadow:none;
    }

    .btn-custom-2 {
        font-size: calc(.9375rem + .125vw);
        background-color: #6647bf;
        border-radius: 1.5rem;
        padding-left: 3em;
        padding-right: 3rem;
    }

    .pagebar {
        margin: calc(3rem + 2vw) auto;
    }

    .page-item:first-child .page-link {
        border-top-left-radius: calc(.5rem + .25vw);
        border-bottom-left-radius: calc(.5rem + .25vw);
    }

    .page-item:last-child .page-link {
        border-top-right-radius: calc(.5rem + .25vw);
        border-bottom-right-radius: calc(.5rem + .25vw);
    }

    #fixed {
        position: fixed;
        z-index: 1700;
        right: calc(.875rem + .85vw);
        bottom: 100px;
        opacity: 0;
        transition: all .5s;
    }

    #fixed .btns {
        display: flex;
        flex-direction: column;
    }

    #fixed.show {
        opacity: 1;
    }

    .btns .btn {
        color: #fff;
        width: calc(2.75rem + .9vw);
        height: calc(2.75rem + .9vw);
        border-radius: 50%;
        text-align: center;
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
        margin-bottom: calc(.125rem + .3vw);
    }

    .btns .btn.gotop .bi::before {
        transform: translateY(-4px);        
    }

    .btns .btn .bi {
        font-size: calc(1.125rem + .75vw);
        margin-right: 0;
    }

    .btns .btn.gotop {
        background-color: #70b946;
    }

    .btns .btn.cs {
        background-color: #498cdb;
    }

    .btns .btn.cs .bi::before {
        font-weight: 900!important;
        font-size: calc(.9125rem + .75vw); 
    }


    .tag {
        font-size: calc(.6rem + .25vw);
        font-size: calc(.85rem + .15vw);
        white-space: nowrap;
        color: #9c94cc;
        /*padding-left: calc(.15rem + .25vw);*/
        /*padding-right: calc(.15rem + .25vw);*/
        margin-right: calc(.15rem + .5vw);
    }

    .tag:hover {
        color: #ffffff;
    }

    .page-link {
        padding: calc(.5rem + .3vw) calc(.5rem + .6vw);
        padding: calc(.5rem + .3vw) calc(.6rem + .6vw);
    }

    .page-link,
    .page-link:focus {
        color: #9c94cc;
        background-color: #332d59;
        border-width: 0;
        box-shadow: none;
    }

    .page-item.active .page-link {
        background-color: #3b3364;
    }

    .bg-badge {
        font-family: 'Microsoft JhengHei', serif;
        padding: calc(.05rem + .1vw) calc(.1rem + .3vw);
        background-color: #655d8e;
        border-radius: 50rem;
    }

    .btn-search {
        position: relative;
        margin-right: 1rem;
        width: 1.75rem;
        height: 1.75rem;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
        background-image: url(../images/ico/ico-search.webp);
    }

    .btn-search:hover {
        background-image: url(../images/ico/ico-search-on.webp);
    }

    .form-control-custom {
        border-radius: 1.125rem;
    }

    .border-end {
        border-right-width: 2px!important;
    }

/*********************** modal ***********************/

    .modal-backdrop {
        background-color: #1a1432;
    }

    .modal-backdrop.show {
        opacity: .75;
    }

    .modal-dialog {
        margin: 2rem;
    }

    .modal-content {
        min-height: 300px;
        box-shadow: 0 0 1rem rgba(0,0,0,.75)!important;
        background-color: #332d59;
        border: 1px solid #332d59;
        border-radius: 0.3rem;
    }

    .modal-body {
        display: flex;
        flex-direction: column;
        padding: 3rem;
    }

    .modal-body .user_info {
        display: flex;
        flex-direction: column;
        align-items: center!important;
        margin-bottom: 1rem;
    }

    .modal-body .user_info .user_photo {
        border-radius: 50%;
        width: calc(40px + 2.75vw);
        height: calc(40px + 2.75vw);
        overflow: hidden;
        margin-bottom: .5rem;
    }

    .modal-body .user_info .user_photo img {
        width: 100%;
    }

    .modal-body .user_info .user_name {
        font-size: 1.025rem;
        letter-spacing: 2px;
    }

    .modal-body .user_info .evaluation {        
        margin-bottom: .25rem;
    }

    .modal-body .user_info .evaluation .stars i:not(:last-child) {
        letter-spacing: 3px;
    }

    .modal-body .user_info .date {
        font-size: .9375rem;
        letter-spacing: 1px;
        color: #6b639c;
    }

    .modal-body .user_feedback {
        font-size: calc(.855rem + .1225vw);
        letter-spacing: 1px;
        line-height: 1.8;
    }

    .modal-footer {
        border-top-width: 0;
    }

    .modal-footer .bi {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: .25rem;
    }

    .modal-footer .bi:before {
        background-color: #438de2;
        color: #fff;
        font-size: 1.5rem;
        border-radius: 50%;
        font-weight: 900;
        padding: .3rem;
    }

/*********************** navbar-custom ***********************/

    .navbar-custom .navbar-nav a {
        color: #9c94cc;
        font-weight: 500;
        font-size: .8125rem;
        font-size: .9375rem;
        font-size: 1rem;
        display: flex;
        position: relative;
    }

    .navbar-custom .navbar-nav a.nav-link {
        padding: .5rem calc(.825rem + .75vw);
        position: relative;
    }

    .navbar-custom .navbar-nav a:hover,
    .navbar-custom .navbar-nav a.show {
        color: #fff;
    }

    .navbar-custom .navbar-nav a .badges {
        position: relative;
        display: flex;
        margin-right: 2rem;
    }

    .navbar-custom .navbar-nav a .bg-badge {
        padding: .35em .65em;
        transform: translate(-50%, -50%) !important;
        position: absolute;
        top: .5rem;
        left: 2.7rem;
    }

    .navbar-custom .navbar-toggler {
        background-image: url(../images/navbar-toggler.webp);
        padding: .8125rem .8125rem;
        border: none;
        border-radius: 50%;
        background-color: #6845c5;
    }

    .navbar-custom .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-custom .navbar-collapse.navbar-collapse-custom {
        max-height: calc(100vh - 75px - 75px - 1rem - 1rem + 1px);
        overflow-y: scroll;
        background-color: rgba(255, 255, 255, .2);
        background-color: #312c54;
        border-radius: 1rem;
        margin: 1rem auto;
    }

/*********************** promote ***********************/

    .navbar-custom .navbar-nav.promote .nav-link {
        font-size: .875rem;
        padding: .3125rem calc(.825rem + .75vw);
        border-radius: 1.5rem;
        color: #fff;
        background-color: #403270;
    }

    .navbar-custom .navbar-nav.promote .regist .nav-link {
        background-color: #6847ba;
    }

    .navbar-expand-xl .navbar-nav.promote {
        flex-direction: row;
    }

    .navbar-expand-xl .navbar-nav.promote .nav-item {
        margin-right: 0;
        margin-left: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-expand-xl .navbar-nav.promote .nav-item:not(:last-child) {
        margin-right: .25rem;
        margin-right: calc(.5rem + .15vw);

    }

/*********************** form-control ***********************/

    .form-control {
        color: #fff;
        background-color: #332d59;
        border-width: 0;
    }

    .form-control:focus {
        color: #fff;
        background-color: #332d59;
        box-shadow: none;
    }

/*********************** member ***********************/

    .navbar-custom .navbar-nav.member .nav-link {
        font-size: .875rem;
        padding: .3125rem calc(.825rem + .75vw);
        border-radius: 1.5rem;
        color: #fff;
        background-color: #403270;
    }

    .navbar-custom .navbar-nav.member.logined .nav-link {
        background-color: #6847ba;
    }

    .navbar-expand-xl .navbar-nav.member {
        margin-right: .5rem;
    }

    .navbar-nav.member .nav-item {
        margin-right: 0;
        margin-left: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-nav.member .nav-item:not(:last-child) {
        margin-right: .25rem;
        margin-right: calc(.5rem + .15vw);

    }

/*********************** shortcut ***********************/

    .navbar-custom.shortcut .navbar-nav .nav-item {
        padding-top: .125rem;
        padding-bottom: .125rem;
        width: 20%;
    }

    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link {
        padding: 0;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link:hover,
    .navbar-custom.shortcut .navbar-nav .nav-item.active .nav-link {
        color: #fff;
    }

    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link .badges {
        margin: .5rem auto auto;
    }
    
    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link.nav-link-user .badges { background-image: url(../images/ico/ico-user.webp);}
    .navbar-custom.shortcut .navbar-nav .nav-item.active .nav-link.nav-link-user .badges { background-image: url(../images/ico/ico-user-on.webp);}user


    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link.nav-link-home .badges { background-image: url(../images/ico/ico-home.webp);}
    .navbar-custom.shortcut .navbar-nav .nav-item.active .nav-link.nav-link-home .badges { background-image: url(../images/ico/ico-home-on.webp);}

    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link.nav-link-add-value .badges { background-image: url(../images/ico/ico-add-value.webp);}
    .navbar-custom.shortcut .navbar-nav .nav-item.active .nav-link.nav-link-add-value .badges { background-image: url(../images/ico/ico-add-value-on.webp);}


    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link.nav-link-introduction .badges { background-image: url(../images/ico/ico-introduction.webp);}
    .navbar-custom.shortcut .navbar-nav .nav-item.active .nav-link.nav-link-introduction .badges { background-image: url(../images/ico/ico-introduction-on.webp);}

    .navbar-custom.shortcut .navbar-nav .nav-item .nav-link.nav-link-search .badges { background-image: url(../images/ico/ico-search.webp);}
    .navbar-custom.shortcut .navbar-nav .nav-item.active .nav-link.nav-link-search .badges { background-image: url(../images/ico/ico-search-on.webp);}

/*********************** navigation ***********************/

    .navigation {
        background-color: #2e264d;        
        border-bottom-left-radius: calc(.5rem + .25vw);
        border-bottom-right-radius: calc(.5rem + .25vw);
    }

    .navigation-2 {
        background-color: transparent;
        margin-bottom: 1.5rem;
    }

/*********************** slick *************************/

    .slick-slider {
        z-index: 1600;        
    }

    .slick-slider img {
        width: 100%;
    }

    .slick-dotted.slick-slider {
        margin-bottom: 0px;
    }

    .slick-dots li button:before {
        color: #696296;
        opacity: 1;
        font-size: 18px;
    }

    .slick-dots li button:hover:before,
    .slick-dots li button:focus:before ,
    .slick-dots li.slick-active button:before {
        opacity: 1;
        color: #fff;
    }

    .slick-prev,
    .slick-next {
        border-radius: 50%;
        opacity: 0;
        transition: all .3s ease-out;
    }

    .slick-prev:before,
    .slick-next:before {
        font-size: 42px;
        opacity: 1;
        font-family: Courier New, Arial, sans-serif,Microsoft JhengHei;
        font-weight: bold;
    }

    .slick-next:before {
        content: '>';
    }

    .slick-prev:before {
        content: '<';
    }

    .slick.active .slick-prev,
    .slick.active .slick-next {
        opacity: .5;
    }

    .slick.active .slick-prev:hover,
    .slick.active .slick-prev:focus,
    .slick.active .slick-next:hover,
    .slick.active .slick-next:focus {
        opacity: 1;
    }

    .slick-prev ,
    .slick-next {
        z-index: 1;
    }

/*********************** ad ***********************/

    .ad .slick-slide {
        position: relative;
    }

    .ad .innerwrap {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end!important;
        align-items: center!important;
        padding: 0 2rem calc(3rem + .9vw);
        text-align: center;
    }

    .ad .innerwrap h2 {
        font-size: calc(1.75rem + 1.1vw);
        font-weight: 600;
        margin: 0 0 calc(.125em + .3vw);
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
    }

    .ad .innerwrap p {
        font-size: calc(1.125rem + 1.1vw);
        font-weight: 600;
        margin: 0 0 calc(.5em + 2vw);
        text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
    }

    .ad .innerwrap button {
        color: #fff;
        font-size: calc(.75rem + .5vw);
        font-weight: 600;
        margin: 0 auto;
        background-color: #6847ba;
        border: none;
        padding: calc(.25rem + .25vw) calc(.875rem + .75vw);
        border-radius: calc(.875rem + .5vw);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
    }

    .ad .slick-dots {
        bottom: 2%;
    }

    .ad .slick-prev {
        left: 1vw;
    }

    .ad .slick-next {
        right: 1vw;
    }

/*********************** dropdown-menu-custom ***********************/
    .dropdown-menu-custom {
        background-color: transparent;
        font-size: .75rem;
    }

    .dropdown-menu-custom {
        display: block;
        border: none;
        padding: 0;
    }

    .dropdown-menu-custom .dropdown-item {
        color: #9c94cc;
        padding: calc(.5rem + .2vw) calc(.825rem + .75vw);
    }

    .dropdown-menu-custom .dropdown-item:focus,
    .dropdown-menu-custom .dropdown-item:hover {
        color: #fff;
        background-color: transparent;
    }

    .bg-custom {
        background-color: #272042;
    }

/*********************** shortcut ***********************/

    .shortcut>div {
        display: block !important;
    }

    .shortcut .navbar-toggler {
        display: block;
        margin: auto;
    }

/*********************** card ***********************/

    .card {
        border-width: 0;
        border-radius: calc(.5rem + .25vw);
        background-color: #332d59;
        overflow: hidden;
        height: 100%;
    }

    .card .post-thumbnail img {
        transition: all .3s ease-out;
        border-top-left-radius: calc(.5rem + .25vw);
        border-top-right-radius: calc(.5rem + .25vw);
    }

    .card-title {
        font-size: calc(.975rem + .4vw);
        font-size: calc(1.125rem + .2vw);
        margin-top: auto;
        margin-bottom: calc(.25rem + .25vw);
        line-height: 1.67;
        position: relative;
        z-index: 2;
    }

    .card-body {
        padding: calc(.5rem + .9vw) calc(.5rem + .9vw);
        padding: calc(.25rem + .9vw) calc(.5rem + .9vw) calc(.5rem + .9vw);
        position: relative;
    }

    .card-body p {
        font-size: calc(.75rem + .3vw);
        line-height: 1.8;
        height: 3.5em;
        overflow: hidden;
    }

/*********************** featured ***********************/

    #featured  {
        padding-bottom: calc(1.5rem + .9vw);
    }

    #featured .container {
        width: 200vw;
    }

    #featured .post-thumbnail {
        overflow: hidden;
    }

    #featured .card:hover .post-thumbnail img {
        transform: scale(1.1);
        filter: brightness(1.35);
    }

    #featured .card:hover .card-body:after {
        left: -8%;
    }

    #featured .card-body:after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0%;
        left: -140%;
        width: 130%;
        height: 100%;
        background-color: #6847ba;
        transform: skewX(-20deg);
        transition: all .3s ease-out;
        display: none;
    }

/*********************** intro ***********************/

    #intro .wrap {
        margin-top: 0;
    }

    #intro h2 {
        margin-bottom: calc(.5rem + .9vw);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #intro .container-fluid {
        background-color: #2e264d;
        border-radius: calc(.5rem + .25vw) 0 0 calc(.5rem + .25vw);
    }

    #intro .content {
        padding: calc(2rem + .9vw) calc(1rem + .9vw);
        padding-top: calc(.75rem + 5vw);
    }

    #intro .content .tab-pane .col:nth-child(1) .more { background-color: #f65660;}
    #intro .content .tab-pane .col:nth-child(2) .more { background-color: #498cdb;}
    #intro .content .tab-pane .col:nth-child(3) .more { background-color: #d89a43;}
    #intro .content .tab-pane .col:nth-child(4) .more { background-color: #67b428;}
    #intro .content .tab-pane .col:nth-child(5) .more { background-color: #f27f48;}
    #intro .content .tab-pane .col:nth-child(6) .more { background-color: #d94b87;}

/*********************** about ***********************/

    #about  {
        margin-top: calc(8rem + .9vw);
        margin-bottom: calc(3rem + .9vw);
        text-align: center;
    }

    #about {
        background-image: url(../images/bg-about.webp);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }

    #about .wrap {
        margin-top: 0;
    }
    
    #about h2 {
        /*transform: translateY(0rem);*/
    }

    #about .card-title {
        font-size: calc(.6875rem + .3vw);
        font-size: calc(.7rem + .5vw);
        font-weight: 500;
    }
    
    #about .container {
        padding-top: calc(2rem + .9vw);
        padding-bottom: calc(2rem + .9vw);
        padding-left:  calc(4rem + .9vw);
        padding-right:  calc(4rem + .9vw);
    }
    
    #about .card {
        background-color: transparent;
    }

    #about .card .post-thumbnail img {
        width: calc(46% + 1.25vw);
    }

    #about .card .card-body {
        padding: calc(.25rem + .9vw) calc(.125rem + .9vw);
    }

    #about p {
        font-size: calc(.85rem + .25vw);
        font-size: calc(.95rem + .1vw);
        line-height: 1.8;
    }

/*********************** feedback ***********************/
    
    #feedback {
        background-image: url(../images/bg-feedback.webp);
        background-repeat: no-repeat;
        background-position: center top;
        padding: 1px 0 calc(3rem + 1.5vw);
        background-size: cover;
    }

    #feedback .wrap {
        overflow: hidden;
    }
    
    .feedback .slick-list {
        padding-top: 50px !important;
        padding-top: 70px !important;
    }

    .feedback .item {
        height: 30rem;
        position: relative;
        background-color: #2e264d;
        border-radius: calc(.5rem + .25vw);
        padding: 3.5rem calc(1.5rem + .8vw);
    }

    .feedback .item h4 {
        text-align: center;
        margin-bottom: .5em;
        line-height: 2.2rem;
    }
    
    .feedback .item .user_photo {
        position: absolute;        
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
    }
    
    .feedback .item .user_photo img {
        border-radius: 50%;
        width: 20%;
        margin: 0 auto;
        transform: translateY(-50%);
    }

    .feedback .item .user_name {
        text-align: center;
        margin-bottom: .75em;
        font-size:1.2rem;
        font-weight: 300;
    }

    .feedback .item .btnbar-inner {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 2rem;
    }

    .feedback .item .user_feedback {
        overflow: hidden;
        font-size: calc(.95rem + .1vw);
        line-height: 1.8;
    }
    
    #feedback .slick-slide {
        padding: 0 calc(.5rem + .9vw);
    }

    #feedback .slick-prev,
    #feedback .slick-next {
        width: calc(2.75rem + .9vw);
        height: calc(2.75rem + .9vw);
        background-color: #4a8bdb;
        opacity: 1;
    }

    #feedback .slick-prev:hover,
    #feedback .slick-prev:focus,
    #feedback .slick-next:hover,
    #feedback .slick-next:focus {
        opacity: 1;
    }

    #feedback .slick-next {
        transform: translateX(-50%);
    }

    #feedback .slick-prev {
        transform: translateX(50%);
    }

    #feedback .slick-prev:before,
    #feedback .slick-next:before {
        font-size: calc(1.125rem + .75vw);;
        opacity: 1;
        position: relative;
        font-family: bootstrap-icons !important;
    }

    #feedback .slick-next:before {
        content: "\f231";
    }

    #feedback .slick-prev:before {
        content: "\f22d";
    }

    #feedback .more {
        font-size: calc(.75rem + .2vw);
        padding: .3125rem calc(.725rem + .5vw);
    } 

/*********************** news ***********************/

    #news .slick-slide {
        padding: 0 calc(1.125vw);
    }

    #news .slick-dots {
        bottom: -3rem;
    }

    #news .wrap {
        padding-bottom: calc(3rem + .9vw);
        overflow: hidden;
    }

/*********************** hot ***********************/

    #hot .slick-slide {
        padding: 0 calc(.45rem + .45vw);
    }

    #hot .wrap {
        padding-bottom: calc(3rem + .9vw);
    }

    #hot .card {
        flex-direction: row;
    }

    #hot .card >div.post-thumbnail {
        flex-basis: 50%;
    }

    #hot .card >div.post-thumbnail .card-img {
        border-radius: 0;
    }

    #hot .card >div.card-body  {
        flex-basis: 50%;
    }

/*********************** accordion ***********************/

    .accordion-item {
        background-color: #3b3364;
        border-width: 0;
        width: 100%;
    }

    .accordion-button {
        font-size: calc(.75rem + .5vw);
        font-size: calc(.85rem + .5vw);
        padding: calc(.75rem + .3vw) calc(.875rem + .9vw) calc(.75rem + .3vw) calc(3rem + .9vw);
        padding: calc(.65rem + .3vw) calc(.875rem + .9vw) calc(.75rem + .3vw) calc(2.65rem + 1.1vw);
        color: #ffffff;
        background-color: #352e58;
        position: relative;
    }

    .accordion-item,    
    .accordion-button {
        margin-bottom: 1rem;
    }
    .accordion-header {
        margin: auto;
    }

    .accordion-body {
        padding: 0 calc(2rem + .3vw) calc(2rem + .3vw) calc(3rem + .9vw);
    }

    .page-post .accordion-body {
        padding: 0 calc(1.875rem + .3vw) calc(2rem + .3vw) calc(.875rem + .3vw);
    }

    .accordion-body p {
        font-size: calc(.6875rem + .3vw);
        font-size: calc(.875rem + .3vw);
        margin-bottom: calc(.75rem + .3vw);
        font-weight: 500;
        letter-spacing: 1px;
    }
    .accordion-button:focus {
        border-color: transparent;
        box-shadow: none;
    }

    .accordion-button:not(.collapsed) {
        color: #ffffff;
        background-color: #3b3364;
        border-width: 0;
        box-shadow: none;
    }

    .accordion-item:last-of-type .accordion-button.collapsed,
    .accordion-button,
    .accordion-item:not(:first-of-type),
    .accordion-item:first-of-type,
    .accordion-item:first-of-type .accordion-button {
        border-radius: calc(.5rem + .25vw);
    }

    .accordion-button::before {
        position: absolute;
        left: calc(.875rem + .5vw);
        width: calc(.975rem + .5vw);
        height: calc(.975rem + .5vw);
        width: calc(1.25rem + .5vw);
        height: calc(1.25rem + .5vw);
        font-size: calc(.975rem + .5vw);
        line-height: 1;
        font-weight: 900;        
        margin-left: auto;
        content: "";
        color: #9c94cc;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
        transition: all .3s ease-out;
    }

    .accordion-button::before{
        background-image: url(../images/ico/ico-qna-on.webp);
    }

    .accordion-button.collapsed::before{
        background-image: url(../images/ico/ico-qna.webp);
    }
    

    .accordion-button::after {
        width: calc(.975rem + .5vw);
        height: calc(.975rem + .5vw);
        width: calc(1.25rem + .5vw);
        height: calc(1.25rem + .5vw);
        font-size: calc(.975rem + .5vw);
        line-height: 1;
        font-weight: 900;
        content: "+";
        color: #9c94cc;
        background-image: none;
        transition: all .3s ease-out;
        transform: translateX(8px);

    }

    .accordion-item:hover .accordion-button::after {
        color: #ffffff;
    }

    .accordion-button:not(.collapsed)::after{
        transform: rotate(0deg);
        content: "--";
        color: #ffffff;
        letter-spacing: -3px;
        background-image: none;  
        transform: translateX(8px);     
    }

/*********************** quick_link ***********************/
    
    .quick_link { 
        line-height: 1;
    }

    .quick_link ul {
        margin-bottom: calc(1.325rem + .9vw);
    }

    .quick_link ul li a {
        color: #9c94cc;
        font-weight: 500;
        white-space: nowrap;
    }

    .quick_link ul li a:hover {
        color: #fff;
    }

/*********************** copyright ***********************/

    .copyright {
        font-size: calc(.6rem + .25vw);
        color: #9c94cc;
        margin-bottom: calc(1.325rem + .9vw);
    }

/*********************** tab-content ***********************/
    
    .tab-content {
    }

    .tab-pane .thumbnail {
        position: relative;
        border-radius: calc(.5rem + .25vw);
        overflow: hidden;
        margin-bottom: calc(1rem + .2vw);
    }

    .tab-pane .thumbnail img {
        border-radius: calc(.5rem + .25vw);
        width: 100%;
        height: auto;
    }

    .tab-pane .thumbnail .mask {
        flex-direction: column;
        text-transform: uppercase;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        background-color: rgba(46, 36, 77, .75);
        font-size: 3rem;
        transition: all .3s ease-out;
        transform: translateY(100%);
        border-radius: 1rem;
        border-radius:calc(.5rem + .25vw);
    }

    .tab-pane .item:hover .thumbnail .mask {
        transform: translateY(0);
    }

    .tab-pane .thumbnail .mask span {
        white-space: nowrap;
    }

    .tab-pane .thumbnail .mask span.en {
        font-size: calc(1rem + .75vw);
        font-weight: bold;
    }

    .tab-pane .thumbnail .mask span.ch {
        font-size: calc(.45rem + .5vw);
        letter-spacing: .5em;
    }

    .tab-pane .detail {
        display: flex;
        flex-direction: row;
        padding-bottom: .5em;       
    }

    .tab-pane .detail .ico {
        margin-right: 5%;
        width: calc(22% + .125vw);
        width: 25%;
    }

    .tab-pane .detail .ico img {
        width: 100%;
        height: auto;
        background-color: #332d59;
        border-radius: 50%;
    }

    .tab-pane .detail h3 {
        font-size: calc(.875rem + .4vw);
        margin-top: auto;
        margin-bottom: .25rem;
    }

    .tab-pane .detail p {
        font-size: calc(.75rem + .2vw);
        font-size: calc(.75rem + .4vw);
        color: #7f76a5;
        margin-bottom: .25rem;
    }

    .tab-pane .detail .more {
        font-size: calc(.6rem + .2vw); 
        font-weight: 100;
        margin: 0;
        padding: .05em 1em .3em;
        border-radius: .9em;
        letter-spacing: 1px;
    }

/*********************** sidebar ***********************/

    .sidebar {
        background-color: #312b51;
        padding: .9vw 1.2vw;
        border-radius: calc(.5rem + .25vw) calc(.5rem + .25vw) 0 0;
    }

    main:not(.page-home) .sidebar {
        max-width: calc(14rem + 2vw);
        border-radius: calc(.5rem + .25vw);
        padding: 1px 0;
    }

    .inner-wrap {
        padding: 1rem 1.5rem;
    }

    .sidebar ul {
        list-style: none;
        margin-bottom: 0;
        display: flex;
        flex-wrap: nowrap;
        border-bottom-width: 0px;
    }

    .sidebar ul li {
        margin:  calc(.125rem + .9vw) calc(.25rem + .9vw);
        margin:  calc(.125rem + .9vw) calc(.125rem + .5vw);
        margin:  calc(.125rem + .9vw) calc(.125rem + .75vw); 
        margin: calc(.125rem + .9vw) calc(.25rem + .9vw);
        font-weight: 500;
        white-space: nowrap;
    }

    .sidebar ul li a {
        color: #9c94cc;
        display: flex;
        align-items: center;
        flex-direction: column;  
        font-size: .9375rem;
        margin-bottom: 0px;
        border: none;
        border-top-left-radius:0;
        border-top-right-radius: 0;
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        min-width: 60px;
    }

    .sidebar ul li a span {
        white-space: nowrap;
    }

    .btnbar-inner .bg-badge,
    .sidebar ul li a .bg-badge {
        margin-left: calc(.1rem + .3vw);
        padding: .35em .65em;
        border-radius: .25rem;
        border-radius: 5rem;
    }

    .sidebar ul li:hover a,
    .sidebar ul li a.active {
        color: #ffffff;
    }

/*********************** breadcrumb ***********************/

    .breadcrumb  {
        font-size: calc(.75rem + .2vw);
        color: #9c94cc;
    }

    .breadcrumb .bi {
        margin-right: calc(.2rem + .1vw);
    }

    .breadcrumb a {
        color: #9c94cc;
    }

    .breadcrumb a:hover {
        color: #fff;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        transform: scale(.65);
        color: #9c94cc;
    }

    .breadcrumb-item.active {
        color: #57449b;
        display: none;
    }
/*********************** page-home ***********************/

    main.page-home h2 {
        justify-content: center;
        margin-bottom: calc(2rem + 1.9vw);
        font-size: calc(1rem + 1.2vw);
        font-size: calc(1.2rem + 1.2vw);
    }

    main.page-home #news .card-title {
        text-align: center;
    }

    main.page-home .badges {
        height: calc(1.45rem + 1.25vw);
        width: calc(1.45rem + 1.25vw);
    }

     main.page-home .sidebar ul li:nth-of-type(1) a .badges,
     main.sidebar ul li:nth-of-type(1) a.active .badges {background-image: url(../images/ico/article_sport.webp);}

     main.page-home .sidebar ul li:nth-of-type(2) a .badges,
     main.page-home .sidebar ul li:nth-of-type(2) a.active .badges {background-image: url(../images/ico/article_baccarat.webp);}

     main.page-home .sidebar ul li:nth-of-type(3) a .badges,
     main.page-home .sidebar ul li:nth-of-type(3) a.active .badges {background-image: url(../images/ico/article_esports.webp);}

     main.page-home .sidebar ul li:nth-of-type(4) a .badges,
     main.sidebar ul li:nth-of-type(4) a.active .badges {background-image: url(../images/ico/article_lottery.webp);}

     main.page-home .sidebar ul li:nth-of-type(5) a .badges,
     main.page-home .sidebar ul li:nth-of-type(5) a.active .badges {background-image: url(../images/ico/article_electronic.webp);}

/*********************** page-inner ***********************/

    .page-inner .sidebar ul li {
        margin: calc(.125rem + .35vw) 0;
    }

    .page-inner .content .datetime {
        justify-content: flex-end;
    }

/*********************** page-post ***********************/


    .page-post .content  {
        letter-spacing: .05rem;
    }

    .page-post .content h2 {
        margin-top: 2rem;
    }

    .page-post .content h3 {
        font-size: calc(1rem + .5vw);
    }
    
    .page-post .content article img {
        max-width: 100%;
        margin-bottom: 1rem;
        border-radius: calc(.5rem + .25vw);
    }

    .page-post .content a:not(.tag) {
        color: #5f8bd4;
    }

    .page-post .content a:not(.tag):hover {
        text-decoration: underline;
    }

    .page-post .content #index a {
        color: #fff;
    }
    
    .page-post .content .ads {
        margin-bottom: 1rem;
        text-align: right;
    }

    .page-post .content .table-responsive {
        margin-bottom: 1rem;
    }

    .page-post .content table>:not(caption)>*>* {
        /*padding: .35rem 1rem;*/
        padding-left: 1rem;
        padding-right:  1rem;
        border-width: 1px;
        border-color: #352d52;
        color: #fff;
        white-space: nowrap;
        text-align: center;
    }

    .page-post .content strong {
        color: #9c94cc;
    }    

    .page-post .content >:not(.recommend) .datetime {
        color: #ffffff;
        justify-content: flex-start;
        margin-bottom: 2em;
        font-size: 1.00125rem;
    }

    .page-post .content .excerpt {
        font-size: 1.03125rem;
        font-size: 1.06125rem;
        line-height: 2;
        margin-bottom: 2em;
    }

    .page-post .content .btnbar-inner {
        margin-bottom: 1.5em;
    }

    .page-post .content .tag {
        font-size: 1.03125rem;
        margin-right: calc(1.125rem + .75vw);
    }

    .page-post article .btn {
        font-size: calc(1rem + .2vw);
        border-radius: calc(.5rem + .25vw);
        background-color: #332d5b;
        color: #9c94cc;
        padding: calc(.5rem + .25vw) calc(.9rem + .325vw);        
    }

    .page-post article .btn.active {
        background-color: #3b3460;
    }

    .page-post article .btn.active,
    .page-post article .btn:hover {
        color: #fff;
    }

    .page-post .content p,
    .page-post .content ol {
        line-height: 2;
        margin-bottom: 1em;
    }

    .page-post .content p {
        font-size: 1.03125rem;
    }

    .page-post .content ol {
        font-size: calc(.875rem + .125vw);
    }

    .page-post article .accordion {
        display: flex;
    }
    
    .page-post .content article .accordion-item .accordion-button {
        margin-bottom: 0;
        font-size: calc(.875rem + .125vw);
        border-radius: calc(.5rem + .25vw);
    }

    .page-post article .accordion-button::before{
        background-image: url(../images/ico/ico-post-on.webp);
    }

    .page-post article .accordion-button.collapsed::before{
        background-image: url(../images/ico/ico-post.webp);
    }

    .page-post article .accordion-button::after {
        display: none;
    }

    .page-post .content .recommend {
        margin-top: calc(2rem + 1.9vw);
        margin-bottom: calc(2rem + 1.9vw);
        padding-top: 1px;
    }

    .page-post .content .recommend h2 {
        justify-content: center;
        font-size: calc(1rem + 1.2vw);
        margin-bottom: calc(2rem + 1.9vw);
    }

    .page-post .content .recommend h3 {
        font-size: calc(.875rem + .4vw);
        margin-bottom: calc(.25rem + .125vw);
    }

    .page-post .content .recommend .btnbar-inner {
        margin-bottom: calc(.25rem + .125vw);
        margin-bottom: calc(.25rem + .45vw);
    }

    .page-post .content .recommend a:not(.tag) {
        color: #fff;
    }

    .page-post .content .recommend a.tag {
        font-size: calc(.55rem + .25vw);
        font-size: calc(.85rem + .15vw);
        margin-right: calc(.125rem + .25vw);
    }

/*********************** information ***********************/

    .information .btnbar-inner {
    }

    .information a {
        display: inline-block;
        white-space: nowrap;
        color: #9c94cc;
        margin: auto calc(.5rem + .9vw) calc(.25rem + .5vw);
    }

    .information a:hover{
        color: #ffffff;
    }    

/*********************** page-search ***********************/

    .page-search .breadcrumb {
        display: none;
    }

    .page-search .information {
        margin-top: 2rem;
    }

    .page-search .information .search-errorm-msg {
        text-align: left;
        color: #9c94cc;
        margin-left: 1.25rem;
        margin-top: .25rem;
    }

    .page-search .search-box {
        position: relative;        
        color: #666084;
    }

    .page-search .search-icon {
        position: absolute;
        top: .4rem;
        left: 1rem;
    }    

    .page-search .form-control-custom {
        padding: .45rem .75rem;
        padding-left: 2.75rem;
        color: #8a85a3;    
    }

    .page-search ::placeholder {
      color: #666084;
    }

/*********************** page-promote ***********************/

    .page-promote h2 {
        justify-content: center;
        margin-bottom: calc(2rem + 1.9vw);
        font-size: calc(1.2rem + 1.2vw);
    }

    .page-promote .bi {
        margin-left: calc(.125rem + .3vw);
        margin-right: 0;
    }

    .page-promote .row>* {
        padding-right: calc(var(--bs-gutter-x) * .25);
        padding-left: calc(var(--bs-gutter-x) * .25);
        padding-top: calc(var(--bs-gutter-x) * .5);
        padding-bottom: calc(var(--bs-gutter-x) * .5);
        border-radius: calc(.5rem + .25vw);
    }

    .page-promote .col:hover {
        background-color: #332d59;
    }

    .page-promote .card {
        flex-direction: row;
        background-color: transparent;
        border-radius: 0;
    }

    .page-promote .card-body {
        padding: 0 calc(.35rem + .75vw);
    }

    .page-promote .card-title {
        margin-bottom: calc(.25rem + .125vw);
    }

    .page-promote .card .order {
        font-size: 1.25rem;
        font-weight: 700;
        color: #6b639c;
        padding-left: 1rem;
        padding-right: 1rem;
        align-items: center;
        display: flex;
        padding-bottom: 1.5rem;
    }

    .page-promote .card >div.post-thumbnail {
        flex-basis: 27%;
        max-width: 100px;
    }

    .page-promote .card >div.post-thumbnail .card-img {
        border-radius: calc(.5rem + .25vw);
    }

    .page-promote .comment {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        transform: translateY(-6px);
        margin-top: -2px;
    }

    .page-promote .comment .comments {
        font-size: .8725rem;
        color: #6b639c;
        line-height: 1.67;
        letter-spacing: .6px;
    }

    .page-promote .comment .customer {
        height: 30px;        
    }

    .page-promote .comment .customer img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: relative;
        margin-right: -8px;
        z-index: 1;
        cursor: pointer;
    }

    .page-promote .comment .customer img+img {
        z-index: 0;
    }

    .page-promote .comment .customer img+img+img {
        z-index: -1;
        margin-right: 0px;
    }

    .page-promote .btns:not(#fixed .btns) {
        font-size: calc(.9rem + .1vw);
        border-radius: calc(1.5rem + .5vw);
        background-color: #6847ba;
        padding: .1em .85em .2em;
        text-align: center;
        white-space: nowrap;
        font-weight: 600;
        letter-spacing: 1px;
        border: none;
        color: #fff;
        line-height: 1.5;
    }

    .page-promote .btnbar-inner {
        margin-bottom: 0;
    }

    .page-promote .btns:not(#fixed .btns)+.btns {
        margin-left: .25rem;
    }

/*********************** page-promote-info ***********************/

    div.page-promote-info main {
        padding-top:0;
    }

    div.page-promote-info main h2 {
        margin-top: 0;
        margin-bottom: 0;
        margin-bottom: .25rem;
        font-size: calc(.9725em + 1vw);
        font-size: 1.35rem;
    }

    div.page-promote-info .masthead {
        height: 598px;
        height: 408px;
        background-image: url(../images/bg-promote-m.webp);
        background-repeat: no-repeat;
        background-position: 50% 0;
        display: flex;
        align-items: flex-end;
        padding-bottom: 130px;
        padding-bottom: 80px;
        background-size: cover;
    }

    div.page-promote-info .wrap {
        width: 100%;
        padding: 0 1.5rem;
        overflow-y: visible;
    }

    div.page-promote-info .masthead h1 {
        font-size: 64px;
        margin-bottom: .25em;
    }

    div.page-promote-info .masthead .card-title {
        font-size: calc(1.475rem + .4vw);
        line-height: 1.2;
        margin-bottom: calc(.25rem + .25vw);
        letter-spacing: 1px;
    }

    div.page-promote .card {
        margin-bottom: 1.875rem;
        height: auto;
    }

    div.page-promote-info .card >div.post-thumbnail {
        max-width: 50px;
        max-width: 70px;
    }

    div.page-promote-info .card >div.post-thumbnail .card-img {
        border-radius: calc(.25rem + .125vw);
    }

    div.page-promote-info .comment {
        transform: translateY(0px);
        margin-top: 0px;
    }

    div.page-promote-info .masthead .number ,
    div.page-promote-info .masthead .comment .comments {
        color: #fff;
    }

    div.page-promote-info .btns:not(#fixed .btns) {
        padding: .3125rem calc(.725rem + .75vw) .4125rem;
    }

    div.page-promote-info .btns:not(#fixed .btns)+.btns:not(button) {
        background-color: transparent;
    }

    .comment-info {
        display: flex!important;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }

    .comment-info .level {
        font-size: calc(3.125rem + 1.2vw);
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 3px;
        transform: translateX(3px);
    }

   .comment-info .comments {        
        font-size: .8125rem;
        color: #6b639c;
        letter-spacing: .6px;
    }

    .stars {
        font-size: .75rem;
        margin-bottom: .35rem;
    }

    .stars i {
        color: #7a75b8;
    }

    .stars i.bi-star-fill-y {
        color: #d49f5d;
    }

    .stars i:not(:last-child) {
        letter-spacing: 1px;
    }

    .reviews {
        margin-bottom: 1.5rem;
        margin-bottom: 2rem;
        margin-bottom: 2.5rem;
    }

    .reviews .customer .datetime {
        display: inline;
        color: #7a75b8;        
        font-size: .8125rem;
        margin-left: .875rem;
        letter-spacing: 1px;
    }

    .reviews .customer .feedbacks {
        padding: .5rem 0;
        font-size: 1rem;
        font-size: .9375rem;
        line-height: 2;
    }

    .view_all {
        font-size: .875rem;
        font-size: 1.125rem;
        cursor: pointer;
        margin-bottom: 5rem;
    }

    .post_comment h3,
    .post_comment .star {
        text-align: center;
        display: block;
        margin-bottom: .25rem;
    }

    .post_comment .btnbar-inner {
        text-align: center;
    }

    .post_comment .star {
        margin-bottom: 1rem;
    }

    .post_comment textarea {
        display: block;
        width: 100%;
        height: 8rem;
        line-height: 1.25;
        color: #fff;
        background-color: #403270;
        border: none;
        border-radius: calc(.25rem + .125vw);
        padding: .75rem .75rem;
        font-size: .875rem;
        margin-bottom: 1rem;
    }


    .post_comment textarea::placeholder {
        color: #7a75b8;
    }

    :focus-visible {
        outline: none;
    }

    .reviews .customer img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        position: relative;
        margin-right: calc(4px + .4vw);
        z-index: 1;
    }

    .reviews .customer .nickname {
        font-size: 1.125rem;
    }


    .tab-tabs {
        margin-bottom: 2rem;
    }

    .tab-tabs li {
        padding: 3px .325rem;
        margin-bottom: .325rem;
        width: 33%;
    }

    .tab-tabs li .btns {
        width: 100%;
        display: inline-block;
    }
    .tab-tabs li .btns:not(#fixed .btns).active {
        background-color: #403270;
    }

    .page-promote-info .col:hover {
        background-color: transparent;
    }


/*********************** login-btns ***********************/
    
    .login-btns {
        margin-bottom: 3em;
    }
    
    .login-btns a {
        color: #9c94cc;
        margin: auto 1.5em;
    }
    
    .login-btns a:hover {
        color: #fff;
    }

/*********************** links ***********************/
    
    .links {
        font-size: .9375rem;
        margin-bottom: 3em;
    }


    .links a {
        color: #9c94cc;
        padding-left: 2em;
        padding-right: 2em;
    }
    
    .links a:not(:last-child) {
        border-right: 2px solid #453f6c;
    }
    
    .links a:hover {
        color: #fff;
    }

.invalid-feedback {
    color: #654ab3;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 1px rgba(255,255,255,1);
}

/*********************** page-member ***********************/

    .page-member {
        font-size: calc(1em + .1vw);
    }
    
    .page-member h3 {
        position: relative;
        margin-bottom: 2em;
    }
    
    .page-member h3:before,
    .page-member h3:after {
        content: "";
        height: 1px;
        width: calc(50% - 4em);
        background-color: #453f6c;
        position: absolute;
        top: 50%;
    }
    
    .page-member h3:before{
        left: 0;
    }

    .page-member h3:after {
        right: 0;
    }
        
    .page-member .navbar-custom .navbar-nav.member {
        flex-direction: row;
    }

    .page-member .navbar-custom .navbar-nav.member .nav-link {
        background-color: transparent;
        color: #9c94cc;
    }

    .page-member .navbar-custom .navbar-nav.member .nav-link.current {
        background-color: #403270;
        color: #fff;
    }

    .page-member .form-check-inline {
        line-height: 36px;
    }

    .page-member .form-check .form-check-input {
        margin-top: 10px;
    }

    .page-member .col-form-label {
        text-align: right;
        padding-left: 0;
    }

    .page-member .member-connect .social {
        display: flex;
        justify-content: space-between;
        background-color: #332d59;
        padding: .75rem calc(.875rem + 1vw) .5rem;
    }

    .page-member .member-connect .social span {
        margin-left: 1rem;
    }

    .page-member .member-connect .social .bind {
        color: #9c94cc;
    }

    .page-member .member-connect .connect {
        display: flex;
        justify-content: center;
        background-color: #3b3364;
        padding: .5rem 1rem;
    }

    .page-member .member-connect .connect span {
        width: 100%;
        text-align: center;
        cursor: pointer;
    }

    .page-member .member-connect .connect .bi {
        font-size: 2rem;
        line-height: 1;
        vertical-align: -.2em;
        margin-right: 0;

    }

    .page-member .user-data {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #332d59;
        padding: 1.25rem calc(.875rem + 1vw);
        border-radius: .75rem;
    }

    .navbar .user-data {
        margin-right: 1rem;
    }

    .navbar .user-data img,
    .page-member .user-data img {
        border-radius: 50%;
        position: relative;
        margin-right: calc(4px + 0.4vw);
        z-index: 1;
    }

    .page-member .user-data img {
        width: 48px;
        height: 48px;
    }

    .navbar .user-data img {
        width: 40px;
        height: 40px;
    }

    .page-member .user-data .btn-custom-2 {
        padding: .18125rem .75rem;
    }


/*********************** page-member-data ***********************/

    .page-member-data .form-control:disabled,
    .page-member-data .form-control[readonly] {
        background-color: inherit;
    }

    .page-member-data .form-check {
        padding-left: .75rem;
    }

    .page-member-data-modify .form-check {
        padding-left: 1.5em;
    }


    .page-member-connect {}


@media (min-width: 576px) {

    body {
        padding-bottom: 0;
    }

    .modal-dialog {
        margin-left: auto;
        margin-right: auto;
    }

    .modal-body {
        flex-direction: row;
    }

    .modal-body .user_info {
        flex: 0 0;
        flex-basis: calc(100px + 1vw);
        margin-right: 1rem;
    }

    .modal-body .user_feedback {
       /* display: flex;*/
       /* align-items: center;*/
    }

    #featured .container,
    #news .container {
        max-width: 135vw;
    }
    
    footer .navbar-custom {
        right: auto;
        top: 76px;
    }
    
    footer .navbar-custom .navbar-nav {
        flex-direction: column;
    }

    .fixed-bottom {
        height: calc(100vh - 75px);
    }

    .navbar-custom .navbar-collapse.navbar-collapse-custom {
        max-height: calc(100vh - 75px - 1rem - 1rem);
        margin-left: 75px;
    }
    .navbar-custom.shortcut .navbar-nav .nav-item {
        width: auto;
    }

    .news .item,
    .feedback .item {
    }

    .news .item .user_feedback
    .feedback .item .user_feedback {
    }

    .card-body p {
        height: 5em;
    }

    .ad,
    main:not(.page-post) h2,
    .wrap,
    .btnbar {
        margin-left: 5rem;
    }

    .feedback .item .user_photo img {
        width: 30%;
    }

}

@media (min-width: 768px) {

    body {
        padding-bottom: 90px
    }

    .modal-dialog {
        max-width: 670px;
    }

    .modal-body {
        padding-top: 5rem;
    }

    .ad .innerwrap h2 {
        font-size: calc(3.5rem + 1.2vw);
    }

    .ad .innerwrap p {
        font-size: calc(3.25rem + 1.2vw);
    }

    .ad .innerwrap button {
        font-size: calc(.5rem + .5vw);
    }


    .tab-pane .detail .ico {
        width: 22.25%;
        width: 20%;
    }

    #featured .container {
        max-width: 155vw;
    }

    #intro .container-fluid {
        max-width: 720px;
    }
    
    footer .navbar-custom {
        /*right: 0;*/
    }
    
    footer .navbar-custom .navbar-nav {
        /*flex-direction: row;*/
    }

    .fixed-bottom {
        height: auto;
    }

    .sidebar ul li a,
    .navbar-custom.shortcut .navbar-nav .nav-link,
    .navbar-custom .navbar-nav .nav-link,
    .dropdown-menu-custom .dropdown-item,
    .navbar-custom .navbar-nav a{
        font-size: 1rem;
    }

    .sidebar ul li.small a {
        font-size: .75rem;
    }

    .sidebar ul li a {
        /*flex-direction: row;*/
    }

    #about h2 {
        transform: translateY(15rem);
    }
    
    #about .container {
        padding-top: calc(15rem + .9vw);
        padding-bottom: calc(15rem + .9vw);
        padding-left:  calc(2rem + .9vw);
        padding-right:  calc(2rem + .9vw);
        max-width: 960px;
        background-size: auto;
    }

    .news .item,
    .feedback .item {
    }

    .feedback .item .user_feedback {
    }

    .card-body p {
        height: 5em;
    }

    .feedback .item .user_photo img {
        width: 20%;
    }

    main.page-promote .comment {
        transform: translateY(-2px);
    }

    main.page-promote .comment .comments {
        font-size: calc(.75rem + .25vw);
    }

}

@media (min-width: 992px) {

    .wrap {
        overflow-y: hidden;
    }

    #hot .container,
    #featured .container,
    #intro .container-fluid {
        max-width: 960px;
    }

    .card-body p {
        height: 5.5em;
    }

    .navbar-custom .navbar-collapse.navbar-collapse-custom {
        max-height: calc(100vh - 75px - 75px - 1rem - 1rem);
        max-width: calc(100vw);
        margin-left: 0px;
    }

    footer .navbar-custom {
        right: 0;
        top: auto;
    }
    
    footer .navbar-custom .navbar-nav {
        flex-direction: row;
    }

    .ad,
    main:not(.page-post) h2,
    .wrap,
    .btnbar {
        margin-left: 0;
    }

    .navbar-custom .navbar-nav.member .nav-link,
    .navbar-custom .navbar-nav.promote .nav-link {
        font-size: 1rem;
    }

}

@media (min-width: 1200px) {

    body {
        padding-bottom: 0;
    }

    .wrap {
        overflow-y: visible;
    }

    .navigation {
        padding-left: 0;
        padding-left: 0;
    }

    div.page-promote-info .wrap {
        margin: 0 auto;
        max-width: 1160px;
    }

    div.page-promote-info .masthead {
        height: 600px;
        background-image: url(../images/bg-promote.webp);
    }

    div.page-promote-info .card >div.post-thumbnail {
        max-width: 50px;
    }

    div.page-promote-info main h2 {
        font-size: calc(.5em + .9vw);
        justify-content: left;
    }

    .comment-info {
        align-items: start;
        margin-right: 1rem;
    }

    .comment-info .level {
        font-size: calc(2.5rem + .9vw);
        letter-spacing: 3px;
        transform: translateX(3px);
    }


    .comment-info .comments,
    .comment-info .star {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 1.67;
    }

    .comment-info .comments {
        color: #fff;
    }

    .tab-tabs li {
        padding-left: 0;
        padding-right: 0;
        width: 7rem;
    }

    .tab-tabs li:not(last-child) {
        margin-right: .5rem;
    }

    div.page-promote-info .tab-tabs li .btns:not(#fixed .btns) {
        padding-left: 0;
        padding-right: 0;
    }


    div.page-promote-info #comment .col > div:first-of-type {
        display: flex;
        align-items: flex-end
    }

    div.page-promote-info main .bi {
        margin-right: calc(.125rem + .3vw);
        margin-left: 0;
    }

    div.page-promote-info main .bi:last-child {
        margin-right: 0;
    }

    .reviews .customer img {
        width: 54px;
        height: 54px;
    }

    .reviews .customer .nickname {
        font-size: calc(.5em + .6vw);
    }

    .reviews .customer div+div {
        transform: translate(70px, -20px);
    }

    .reviews .customer .feedbacks {
        margin-top: -1.5rem;
        margin-left: 70px;
    }

    .post_comment h3, .post_comment .star {
        text-align: left;
    }

    #hot .container,
    #featured .container,
    #news .container,
    #qna .container {
        max-width: 1140px;
    }

    #intro .container-fluid {
        max-width: 100vw;
    }

    .promote {
        /*position: absolute;
        top: 1.35rem;
        right: .75rem;*/
    }

    .navbar-custom .navbar-nav. .nav-link {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .dropdown-menu-custom {
        display: none;
        padding: .5rem 0;
        border-radius: 0px;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .55);
        background-color: #272042;
        display: none;
    }

    .dropdown-menu-custom.show {
        display: block;
    }

    .navbar-custom .navbar-collapse.navbar-collapse-custom {
        max-height: none;
        overflow-y: visible;
        background-color: inherit;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    .sidebar {
        border-radius: calc(.5rem + .25vw) 0 0 calc(.5rem + .25vw);
    }

    main.page-home .sidebar {
        padding-top: 4rem;
    }

    .sidebar ul {
        flex-direction: column;        
        overflow-y: visible;
        /*margin-left: 1.5rem;*/
        margin-bottom: 1rem;
    }

    .sidebar ul li a {
        flex-direction: row;
    }

    .sidebar ul li a .badges {
        margin-right: calc(.25rem + .5vw);
    }
    
    footer {
        padding: calc(1.5rem + .9vw) 0;        
        font-weight: 600;
        letter-spacing: 1px;
    }

}

@media (min-width: 1400px) {

    #featured .container,
    #news .container,
    #hot .container,
    #qna .container {
        max-width: 1520px;
    }

    .card-body p {
        height: 9.5em;
        height: auto;
    }

    .g-xxl-6,.gx-xxl-6 {
        --bs-gutter-x: 4rem
    }

    .g-xxl-6,.gy-xxl-6 {
        --bs-gutter-y: 4rem
    }

    .ms-xxl-6 {
        margin-left: 3rem!important;
        margin-left: 4rem!important;
    }

}