@font-face {

    font-family: 'Roboto';

    src: url('/static/fonts/Roboto-Black.ttf');

}

@font-face {

    font-family: 'Roboto-Bold';

    src: url('/static/fonts/Roboto-Bold.woff.ttf');

}

@font-face {

    font-family: 'Roboto-Regular';

    src: url('/static/fonts/Roboto-Regular.woff.ttf');

}

@font-face {

    font-family: 'Roboto-Light';

    src: url('/static/fonts/Roboto-Light.woff.ttf');

}



@font-face {

    font-family: 'Arimo-Regular';

    src: url('/static/fonts/Arimo-Regular.ttf');

}



@font-face {

    font-family: 'AvantGardeLT-Bold';

    src: url('/static/fonts/AvantGardeLT-Bold.otf');

}



body{

    background-color: #242933;

}

*{

    font-family: Roboto-Regular;

    --bs-body-font-family: Roboto-Regular;

}

   

a{

    text-decoration: none;

}



.layout-content-container{

    width: 100%;

    margin: 0 auto;

}



.layout-overspread-container{

    width: 100%;

}



@media (min-width: 1200px){

    .layout-content-container{

        width: 1200px;

    }

}



@media (min-width: 1560px){

    .layout-content-container{

        width: 1560px;

    }

}



@media (min-width: 768px) and (max-width: 1200px){

    .layout-content-container{

        width: 1200px;

    }

    .layout-overspread-container{

        width: 1200px;

    }

}





.widget-card{

    padding:0 1rem;

    width: 100%;

}



.widget-card.widget-card-tb{

    text-align: center;

}



.widget-card.widget-card-lr{

    display: flex;

    align-items: center;

}



.widget-card.widget-card-lr > .widget-card-right{

    margin-left: 1rem;

}



.widget-card > .widget-card-img{

    width: 90px;

    height: 90px;

    display: inline-block;

}



.widget-card > .widget-card-img > img{

    object-fit: cover;

    width: inherit;

    height: inherit;

}



.widget-card .widget-card-title{

    font-size: 18px;

    font-weight:bold;

    color: #fff;

    margin-top: 0.5rem;

    letter-spacing: 1.5px;

}

.widget-card .widget-card-desc{

    font-size: 14px;

    color:#b9b9b9;

    display: block;

    padding: 0.75rem 0;

    word-wrap:break-word;

    word-break:break-word;

}



.widget-rich-text-content > p{

    margin: 0;

}



@media (max-width: 768px) {

    .widget-card .widget-card-desc{

        font-size: 12px;

        padding: 0;

    }

    .widget-card .widget-card-title{

        font-size: 14px;

        letter-spacing: inherit;

    }

    .widget-card > .widget-card-img{

        width: 80px;

        height: 80px;

    }

}





.score-card-wrapper{

    height: auto;

    color: #d4d4d4;

    width:100%;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 4px;

    padding: 1rem;

}



.score-card-wrapper-top{

    display: flex;

    align-items: center;

}



.score-card-wrapper-left{

    margin-right: 1rem;

}



.score-card-wrapper-portrait{

    border-radius: 50%;

    width: 45px;

    height: 45px;

    overflow: hidden;

    display: flex;

}



.score-card-wrapper-portrait > .default-portrait{

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: solid 1px #cccccc4a;

}



.score-card-wrapper-portrait > img{

    width:45px;

}



.score-card-wrapper-nickname{

    font-size: 16px;

    font-family: Roboto-Regular, Roboto;

    color: #c9c9c9;

}



.score-card-wrapper-mark{

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.score-card-wrapper-date{

    margin-left: 1rem;

    color: #D8D8D8;

    font-size: 14px;

}



.score-card-wrapper-score{

    width: 100%;

}



.score-card-wrapper-middle{

    padding: 1rem 0;

    font-size: 18px;

    font-family: Roboto-Regular, Roboto;

    overflow : hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    word-break: keep-all;

    color: #FFFFFF;

}



.score-card-wrapper-bottom{

    display: flex;

}

.score-card-wrapper-picture{

    margin-right: 1rem;

    font-size: 0.75rem;

    display: flex;

    align-items: center;

    width: 120px;

    border: solid 1px #adadad26;

}



.score-card-wrapper-picture > span{

    overflow : hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    word-break: keep-all;

}



.score-card-wrapper-desc{

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.score-card-wrapper-text{

    width: 100%;

    overflow : hidden;

    word-break: break-word;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

    font-size: 14px;

}



.score-card-wrapper-picture > div{

    width: 120px;

    height: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.score-card-wrapper-picture > div > img{

    width: 120px;

    height: auto;

    margin-bottom: 4px;

}



.score-card-wrapper-more{

    text-align: right;

}



.score-card-wrapper-more > a{

    color: #3385ff;

}



.score-card-wrapper-more > a:hover{

    color: #3385ff;

    text-decoration:underline;

}



@media (max-width: 768px) {

    .score-card-wrapper{

        padding: 0.75rem;

    }

    .score-card-wrapper-portrait{

        border-radius: 50%;

        width:40px;

        height:40px;

        overflow: hidden;

        margin-right: 0.6rem;

    }



    .score-card-wrapper-portrait > .default-portrait{

        width: 40px;

        height: 40px;

    }



    .score-card-wrapper-portrait > img{

        width:40px;

    }



    .score-card-wrapper-nickname{

        font-size:0.75rem;

    }



    .score-card-wrapper-star > img{

        width: 16px;

        margin-right: -2px;

    }



    .score-card-wrapper-left{

        margin-right: 0.2rem;

    }



    .score-card-wrapper-middle{

        padding: 0.75rem 0;

        font-size:0.85rem;

        /*font-family:inherit*/

    }



    .score-card-wrapper-date{

        margin-left: 0.5rem;

        font-size:10px;

    }

    .score-card-wrapper-text{

        font-size: 0.75rem;

        -webkit-line-clamp:2;

    }



    .score-card-wrapper-picture{

        width: 60px;

    }



    .score-card-wrapper-picture > div{

        width: 60px;

        height: 60px;

    }



    .score-card-wrapper-picture > div > img{

        width: 60px;

    }



    .score-card-wrapper-more > a{

        font-size: 0.75rem;

    }



}









/*-----------toast--------------*/



.feedback-message-box{

    z-index: 99999;

    margin: 0px auto;

    top: 0px;

    width: 500px;

}



.feedback-message-box > .toast{

    background-color: rgb(255,255,255)!important;;

    color: #474748;

    border: solid 3px rgba(143,143,143,0.8);

    font-size: 16px;

    border-radius: 5px;

}



.feedback-message-box > .toast > .toast-body{

    display: flex;

    align-items: center;

    justify-content: space-between;

}



@media (max-width: 768px) {



    .feedback-message-box{

        width: 100%;

        margin: 0px auto;

        bottom: -100px;

        top: initial;

    }



    .feedback-message-box > .toast{

        font-size: 0.75rem;

    }



    .feedback-message-box > .show{

        margin-bottom: 100px;

    }

}





/*---------footer------------*/



.footer-v4{

    background-color: #1A1C24;

    padding: 2rem 0 1rem 0;

    color: #BBBBBB;

    font-size: 14px;

    margin-top: 2.8rem;

}

.footer-v4 > div ul{

    padding: 0;

}

.footer-v4 > div ul > li{

    list-style: none;

    padding: 0.5rem 0;

}

.footer-v4 > div ul > li a{

    color: #BBBBBB;

}



.footer-v4 > div ul > li a:hover{

    color: #fff;

}



.footer-v4 .footer-v4-content{

    display: flex;

    margin: 0 auto;

    justify-content: space-between;

}



.footer-v4 .footer-v4-content-about{

    max-width: 35%;

    padding: 0 2rem;

}



.footer-v4 .footer-v4-content-about .intro{

    color: #9a9a9a;

}



.footer-v4  .footer-v4-content-department{

    max-width: 30%;

}



.footer-v4 > .footer-v4-payment{

    text-align: center;

    padding: 1rem;

}



.footer-v4 > .footer-v4-payment > span{

    margin: 0 0.3rem;

    max-height: 30px;

    display: inline-block;

}



.footer-v4 > .footer-v4-payment > span img{

    max-height: 30px;

}



.footer-v4 > .footer-v4-copyright{

    text-align: center;

}



.footer-v4 > .footer-v4-copyright > p{

    margin: 0;

}



.footer-v4 .footer-v4-content-about .account > a > svg > path{

    fill: #cfcfcf;

}



.footer-v4 .footer-v4-content-amazon .account > a > svg > path{

    fill: #cfcfcf;

}



.footer-v4 .footer-v4-content-menu-head{

    font-size: 20px;

    font-weight: 900;

    color: #FEFEFE;

    margin-bottom: 1rem;

    letter-spacing: 1.5px;

}



.footer-v4 .footer-v4-content-department-head{

    font-size: 20px;

    font-weight: 900;

    color: #FEFEFE;

    margin-bottom: 1rem;

    letter-spacing: 1.5px;

}

.footer-v4 .footer-v4-content-about .logo{

    margin-bottom: 1rem;

}

.footer-v4 .footer-v4-content-about .account{

    margin-bottom: 1rem;

}

.footer-v4 .footer-v4-content-about .account > a{

    margin: 0.5rem;

    display: inline-block;

}



.footer-subscribe-title{

    margin-bottom: 12px;

    padding: 0.5rem 0;

}



.footer-v4 .footer-v4-content-amazon .account > a{

    margin: 0.5rem;

    display: inline-block;

}



.footer-v4 .footer-v4-content-about > .logo img{

    height: 42px;

}





@media (min-width: 1560px) {

    .footer-v4 .footer-v4-content-about{

        max-width: 25%;

        padding: 0;

    }

}



@media (min-width: 768px) {

    .footer-v4 .footer-menu-collapse{

        display: none;

    }

    .footer-v4 .footer-menu{

        display: block;

    }

}



@media (max-width: 768px) {

    .footer-v4 {

        margin-top: 1rem;

        padding:0;

    }



    .footer-v4 .footer-v4-content{

        display: flex;

        margin: 0 auto;

        justify-content: initial;

        flex-direction: column;

    }



    .footer-v4 .footer-v4-content-about {

        max-width: initial;

        padding:1.5rem 1rem;

    }



    .footer-v4 .footer-v4-content-about .logo {

        margin-bottom: 0.2rem;

        width: 49%;

        display: inline-block;

    }



    .footer-v4 .footer-v4-content-about > .logo img{

        height:24px;

    }



    .footer-v4 .footer-v4-content-about .account {

         width: 49%;

         margin-bottom: 0.5rem;

         display: inline-block;

    }



    .footer-v4 .footer-v4-content-about .account > a{

        width: 22px!important;

        height: 22px!important;

        margin: 0 0.2rem;

    }



    .footer-v4 .footer-v4-content-about .account > a > svg {

        width: 22px!important;

        height: 22px!important;

    }



    .footer-v4 .footer-v4-content-about .intro{

        margin-top: 0.5rem;

    }



    .footer-v4 .footer-v4-content-department{

        max-width: initial;

        width: 100%;

    }



    .footer-v4 .footer-v4-content > div.footer-menu-collapse{

        display: block;

        border-bottom: solid 1px #5f5f5f;

        padding: 1rem;

    }



    .footer-v4 .footer-v4-content > div.footer-v4-content-menu.footer-menu-collapse{

        border-top: solid 1px #5f5f5f;

    }



    .footer-v4 .footer-v4-content > .footer-menu{

        display: none;

    }



    .footer-v4 .footer-v4-content-menu-head{

        font-size: 1rem;

        margin:0;

    }



    .footer-v4 .footer-v4-content-department-head{

        font-size: 1rem;

        margin:0;

    }



    .footer-v4 > .footer-v4-payment > span{

        margin: 0 2px;

        max-height: 22px;

    }



    .footer-v4 > .footer-v4-payment > span img{

        max-height: 22px;

    }



    .footer-v4 > .footer-v4-copyright{

        font-size: 10px;

        padding:1rem 1.5rem;

        word-break: break-word;

    }



    .accordion-body{

        padding: 1rem 0 1rem 1.25rem!important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    .footer-v4 .accordion-item{

        background: none;

        border: none;

    }

    .footer-v4 .accordion-button{

        background: none;

        color: #FFFFFF;

        padding: 0;

    }

    .footer-v4 .accordion-button:not(.collapsed){

        color:inherit;

        background: none;

        box-shadow:none;

    }

    .footer-v4 .accordion-item:first-of-type .accordion-button {

        border-top-left-radius: inherit;

        border-top-right-radius: inherit;

    }

    .footer-v4 .accordion-button:not(.collapsed)::after,

    .footer-v4 .accordion-button::after{

        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

    }

    .footer-v4 .accordion-button:not(.collapsed)::after{

        transform: rotate(-180deg);

    }



}





 /*---------icon----------*/

.st0 { clip-path: url(#SVGID_2_); }

.st1 { clip-path: url(#SVGID_4_); fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }