@charset "UTF-8";
@import url("https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/css/icofont.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Quicksand:300,400,500,700");
@import url("line-awesome.min.css");
@import url("https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/css/fonts/meteocons/style.css");
@import url("https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/css/fonts/simple-line-icons/style.css");
@import url("https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/css/fonts/feather/style.min.css");
@import url("https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/css/fonts/flag-icon-css/css/flag-icon.min.css");

.reorganize_btn {
    text-align: right !important;
}
.reorganize_btn .btn {
    color: #979797 !important;
}
.bg-transparent {
    background-color: transparent !important;
}
.womo_pc_header_burger {
    display: none !important;
}
.nav-user-more-settings i.icon-user-more-settings {
    position: relative;
    top: -2px;
    width: 26px;
    height: 26px;
    background: url('https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_more.svg') no-repeat;
    background-size: cover;
}

.home-page-block.vertical-content-menu .content-body {
    margin-left: 0px !important;
}
.home-page-block.vertical-content-menu .content .content-wrapper {
    max-width: 100% !important;
}

html body .content.app-content {
    overflow: hidden;
    overflow-x: hidden;
}
.border-round-gray {
    border: #f2f2f2 1px solid; 
    border-radius: 15px;
}
.w-70 {
    width: 70px !important;
}

.btn-line {
    background-color: #35c301;
    padding: 10px 25px;
}
.btn-line:hover {
    background-color: #059430;
}
.desc-rule ol {
    padding-left: 20px;
    font-size: 1.3rem;
}
.desc-rule ol li {
    list-style: decimal;
}


.womo-about-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
    padding: 20px 30px;
    width: 100%;
    border-top: #f3f3f3 1px solid;
}
.womo-about-list.off {
    display: none;
}
.womo-about-list.on {
    display: flex;
}
.womo-about-list li {
    width: 33.33%;
    margin: 10px 0;
}
.womo-about-list span {
    text-align: center;
}
.womo-about-list img {
    width: 30px;
    margin-right: 10px;
}
.womo-about-list .txt {
    font-size: 0.9rem
}
.user_btn_item .btn-open {
    display: block;
}
.user_btn_item .btn-open i {
    position: absolute;
    right: 0;
    display: inline-block;
    transition: 0.3s;
    font-size: 1.5rem;
    margin-right: 10px;
}
.btn-open.active i {
    transform: rotate(180deg);
}
@media (max-width: 768px) {
    .womo-about-list {
        padding: 5px 15px;
    }
    .womo-about-list li {
        width: 50%;
    }
}



/*================================================================================
    profile-card
================================================================================*/
.profile-card-with-stats .btn-float {
    padding: 8px 14px 4px 14px;
}
.profile-card-with-cover .card-profile-image {
    position: absolute;
    top: 130px;
    width: 100%;
    text-align: center;
}
.profile-card-with-cover .card-profile-image img.img-border {
    border: 5px solid #fff;
}
.profile-card-with-cover .profile-card-with-cover-content {
    padding-top: 4rem;
}
#user-profile .profile-with-cover .profil-cover-details {
    position: absolute;
    margin-top: 210px;
}
#user-profile .profile-with-cover .profil-cover-details .profile-image img.img-border {
    border: 5px solid #fff;
}
#user-profile .profile-with-cover .profil-cover-details .card-title {
    color: #FFFFFF;
    text-shadow: 1px 1px 4px #464855;
}
#user-profile .navbar-profile {
    margin-left: 130px;
}



/*================================================================================
    croppie
================================================================================*/
.croppie-container {
    width: 100%;
    height: 100%;
}
.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}
.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: 2px solid #fff;
    border-radius: 100%;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}
.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none;
}
.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}
.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}
.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}
.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}
.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}
.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}
.croppie-container .cr-original-image {
    display: none;
}
.croppie-container .cr-vp-circle {
    border-radius: 50%;
}
.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    touch-action: none;
}
.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}
.croppie-result {
    position: relative;
    overflow: hidden;
}
.croppie-result img {
    position: absolute;
}
.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.cr-slider {
    -webkit-appearance: none;
/*removes default webkit styles*/
    /*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
/*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}
.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}
.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}
.cr-slider:focus {
    outline: none;
}
.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}
.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}
/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}
.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
    border-width: 6px 0;
    color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}
.cr-slider::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
    background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
    background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;
}
.cr-rotate-controls button {
    border: 0;
    background: none;
}
.cr-rotate-controls i:before {
    display: inline-block;
    font-style: normal;
    font-weight: 900;
    font-size: 22px;
}
.cr-rotate-l i:before {
    content: '↺';
}
.cr-rotate-r i:before {
    content: '↻';
}



/*================================================================================
    switchery
================================================================================*/
.switchery {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    position: relative;
    vertical-align: middle;
    width: 50px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
    background-clip: content-box
}

.switchery>small {
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    height: 30px;
    position: absolute;
    top: 0;
    width: 30px
}

.switchery-small {
    border-radius: 25px;
    height: 25px;
    width: 43px
}

.switchery-small>small {
    height: 25px;
    width: 25px
}

.switchery-large {
    border-radius: 40px;
    height: 40px;
    width: 66px
}

.switchery-large>small {
    height: 40px;
    width: 40px
}




/*sub-banner-block*/
.sub-banner-block {
    margin-bottom: 30px;
    text-align: center;
    padding: 80px 0;
    font-size: 1.7rem;
    color: #FFF;
    background: #da5271;
    /*background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);*/
}
.sub-banner-block a {
    color: #FFF;
    text-decoration: underline;
}
.sub-banner-block .txt2 {
    font-size: 0.9rem;
}


/*guide page style*/
.guide-content-block h1.guide-title {
    text-align: center;
    margin: 70px 50px 10px 50px;
    line-height: 2.5rem;
    font-size: 1.74rem;
}
.guide-content-block .date {
    color: #919191;
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .sub-banner-block {
        padding: 40px 0;
        margin: -2rem -7px 0 -7px;
    }
    .guide-content-block h1.guide-title {
        text-align: center;
        margin: 50px 0 10px 0;
        font-size: ;
    }
}
.guide-content-block {
    max-width: 1015px;
    margin: 0 auto;
    padding: 0 30px;
}
.guide-content-row {
    position: relative;
    display: flex;
    padding-left: 250px;
}
.guide-content-left {
    position: relative;
    margin-right: 40px;
    left: 0;
    width: 200px !important;
}
.guide-category-menu-block {
    font-size: 1.2rem;
    width: 100%;
}
.guide-category-menu-block h4 {
    border-bottom: #CCC 1px solid;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}
.guide-category-menu-block ul {
    padding: 0;
}
.guide-category-menu-block li {
    margin-bottom: 10px;
}
.guide-category-menu-block.main-menu.menu-light .navigation>li.open>a {
    color: #da5171;
    background: none;
    border-right: 0;
}
.guide-category-menu-block.main-menu.menu-light .navigation li.has-sub > a:after {
    display: block;
    content: "\f112";
    font-family: 'LineAwesome';
    position: absolute;
    right: 20px;
    top: 11px;
    transform: rotate(0deg);
    transition: -webkit-transform 0.2s ease-in-out;
}
.guide-category-menu-block.main-menu.menu-light .navigation li.has-sub.open > a:after {
    transform: rotate(90deg);
}
.guide-category-menu-block.main-menu.menu-light .navigation>li>a {
    padding: 10px 0;
}
.main-menu.menu-light .navigation>li ul li {
    margin-bottom: 0
}
.guide-category-menu-block.guide-category-menu-block li a {
    position: relative;
    display: flex;
    line-height: 1;
    padding: 7px 10px;
    color: #545353;
}
.guide-category-menu-block li a.active {
    color: #000;
    background: #eddee1;
    border-radius: 5px;
}
.guide-category-menu-block.main-menu.menu-light .navigation>li>ul {
    background: transparent;
}
.guide-category-menu-block.main-menu.menu-light .navigation>li ul li>a {
    padding: 10px 10px 10px 20px !important;
}
.guide-category-menu-block.main-menu.menu-light .navigation>li ul li>a.active {
    background: #eddee1;
    border-radius: 5px;
}
.guide-category-menu-m-block .form-control:after {
    float: right;
}
.guide-category-menu-m-block .dropdown-menu {
    width: calc(100% - 30px);
    height: 250px;
    overflow: scroll;
}
.guide-category-menu-m-block .dropdown-item.active:after {
    display: none;
}
.guide-content-right {
    flex: 1;
}
.quick-guide-link-block, 
.guide-content-desc-block blockquote {
    border: 1px solid #e3e3e3;
    margin: 50px 0;
    background: #FFF;
    padding: 20px 50px;
    border-radius: 15px;
}
.guide-content-desc-block blockquote table {
    width: 100%;
}
.guide-content-desc-block blockquote strong {
    font-weight: normal;
}
.quick-guide-link-block .title, 
.guide-content-desc-block blockquote tr:first-child span {
    position: relative;
    top: -39px;
    border: 1px solid #e3e3e3;
    width: fit-content;
    padding: 5px 5rem;
    margin: 0 auto;
    background: #ffffff;
    text-align: center;
    color: #000;
    font-size: 1.5rem;
    border-radius: 30px;
    text-decoration: none;
}
.guide-content-desc-block blockquote tr:first-child td {
    text-align: center;
}
.guide-content-desc-block blockquote th, 
.guide-content-desc-block blockquote td {
    border: 0;
}
.quick-guide-link-block ul {
    padding-left: 20px;
    font-size: 1.4rem;
}
.quick-guide-link-block ul li {
    list-style: decimal;
    color: #377ff3;
}
.quick-guide-link-block ul li a, 
.guide-content-desc-block blockquote td > a {
    color: #377ff3;
    text-decoration: underline;
    font-size: 1.4rem;
    font-weight: normal;
}
.quick-guide-link-block ul li + li {
    margin-top: 10px;
}
.guide-content-desc-block h2 {
    margin: 50px 0 30px 0;
    font-size: 1.32rem;
}
.article-desc-content {
    font-size: 1.1rem;
    line-height: 2rem;
    margin-bottom: 50px; 
}
.article-desc-content img {
    max-width: 100%;
}
.article-desc-content ul {
    padding-left: 20px;
}
.article-desc-content ul li {
    list-style: disc;
}
.article-desc-content ol li {
    list-style: decimal;
}
.article-desc-content p {
    margin-bottom: 15px;
}
.guide-list-block {
    background: #FFF;
    border-radius: 10px;
    padding: 15px 30px;
}
.guide-list-block ul {
    padding: 0;
}
.guide-list-block ul li {
    list-style: none;
    /*list-style: decimal inside;*/
    /*background: #FFF;
    border-radius: 7px;*/
    margin-bottom: 10px;
    font-size: 1.2rem;
    border-bottom: 1px solid #eeeff6;
}
.guide-list-block ul li::marker {
    color: #c8506d;
}
.guide-list-block ul li a {
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.guide-list-block ul li a .txt {
    flex: 1;
}
.guide-list-block ul li a .date {
    color: #b3b3b3;
    font-size: 1rem;
    margin-bottom: 0;
}
.search-bar-border-gray {
    border: 1px solid #d9d9d9;
    border-bottom: 3px solid #d6d6d6 !important;
    border-radius: 8px;
}
.guide-category-list-block ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 30px -10px;
}
.guide-category-list-block ul li {
    width: 25%;
    padding: 0 10px;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.guide-category-list-block ul li a {
    display: block;
    padding: 5px 10px;
    border-radius: 7px;
    border: #ebebeb 1px solid;
    border-bottom: 3px solid #d6d6d6;
    background: #FFF;
    text-align: center;
    transition: 0.3s;
}
.guide-category-list-block ul li a:hover, 
.guide-category-list-block ul li a.active {
    color: #FFF;
    background: #333;
    border-bottom-color: #000;
}
.guide-content-bg-gray {
    background-color: #eee; 
    text-align: center; 
    padding: 15px; 
    margin-bottom: 3px;
}
.guide-content-bg-gray2 {
    background-color: #eee; 
    text-align: center; 
    padding: 15px; 
    color: #000;
}

/*step-box*/
.step-box, ul.step-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 980px;
    padding-left: 0;
}
.step-box li {
    list-style: none !important;
    position: relative;
    flex: 0 0 31.33%;
    margin: 0 1%;
    padding: 20px;
}
.step-box.step-row2-box li {
    flex: 0 0 48%;
}
/*.step-box li:after {
    display: block;
    font-family: 'Line Awesome Free';
    font-weight: 900;
    color: #0a65c2;
    content: "\f061";
    position: absolute;
    font-size: 1.6rem;
    top: 50%;
    right: -12%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}*/
.step-box li:last-child:after {
    display: none;
}
.step-box li .num {
    text-align: center;
    font-size: 0.9rem;
}
.step-box li .num span {
    display: inline-block;
    color: #FFF;
    background: #0a65c2;
    padding: 3px 15px;
    border-radius: 30px;
}
.step-box li .pic {
    position: relative;
    display: block;
    margin: 20px 0 10px 0;
    border-radius: 30px;
    overflow: hidden;
}
/*.step-box li .pic:after {
    display: block;
    font-family: 'Line Awesome Free';
    font-weight: 900;
    color: #666;
    content: "\f00e";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 100%;
    background: #f2f2f2;
    transition: all 0.3s ease;
}
.step-box li .pic:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    content: " ";
    width: 100%;
    height: 100%;
    background: url(../images/pic_phone.png) no-repeat 0 0;
    background-size: 100%;
}*/
.step-box li .pic img {
    width: 100%;
} 
.step-box li .txt .title {
    padding: 15px 25px;
    text-align: center;
}
.step-two-col li {
    flex: 100%;
}
.step-two-col li .step-content {
    display: flex;
}
.step-two-col li .pic {
    flex: 0 0 35%;
    padding: 7% 10px;
}
.step-two-col li .txt .title {
    text-align: left;
    padding-left: 8%;
}
.step-two-col li .title {
    position: relative;
    color: #cc506c;
    font-size: 1.3rem;
    margin-top: 30px;
    margin-bottom: 10px;
}
.step-two-col li .pic:after {
    bottom: 38px;
    display: none;
}
.btn-pup {
    position: relative;
    display: block;
    margin: 30px auto 0 auto;
    color: #FFF;
    background: #C7552E;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 2px 2px 1px #AA4124;
}
.btn-pup:hover {
    background: #b14723;
    transform: translateX(2px) translateY(2px);
    box-shadow: 1px 1px 1px #AA4124;
}
.btn-pup i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}


@media (max-width: 768px) {
    .quick-guide-link-block, 
    .guide-content-desc-block blockquote {
        padding: 20px;
    }
    .guide-content-row {
        padding-left: 30px;
    }
    .guide-list-block ul li a {
        display: block;
    }
    .guide-list-block ul li a span {
        display: block;
    }
    .guide-category-list-block ul li {
        width: 50%;
    }

    .step-box li {
        flex: 0 0 98%;
        padding: 0;
        margin-bottom: 30px;
    }
}

/*quick_btn_download_app_block*/
body.download_app_bar .fixed-top {
    /*padding-top: 70px;*/
    flex-wrap: wrap;
    flex-flow: wrap;
}
.quick_btn_download_app_block {
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    background: #da5271;
    /*background: linear-gradient(to left, #cc4f6c 0%, #e27828 100%);*/
    z-index: 99999;
    display: flex;
    align-items: center;
    color: #FFF;
    padding: 10px;
}
.quick_btn_download_app_block a {
    color: #FFF;
}
.quick_btn_download_app_block .btn-close {
    font-size: 2rem;
    margin-right: 10px;
}
.quick_btn_download_app_block .pic {
    margin-right: 10px;
}
.quick_btn_download_app_block .pic img {
    width: 44px;
}
.quick_btn_download_app_block .txt {
    flex: 1;
    white-space: nowrap;
}
.quick_btn_download_app_block h5 {
    color: #FFF;
    margin-bottom: 0;
    font-size: 1.3rem;
}
.quick_btn_download_app_block p {
    margin-bottom: 0;
    font-size: 0.9rem;
}
.go-download-btn-list {
    display: flex;
}
.go-download-btn-list a {
    display: block;
    width: 50%;
    margin: 0 5px;
}
.go-download-btn-list a img {
    width: 100%;
}
.go-download-btn-list a {
}
a.btn-outline-white {
    border: #FFF 1px solid;
    padding: 5px;
}
a.btn-outline-white:hover {
    color: #000 !important;
}

@media (max-width: 768px) {
    body.download_app_bar {
        padding-top: 127px !important;
    }
    body.download_app_bar .quick_btn {
        top: 138px;
    }
    body.download_app_bar .header-navbar.navbar-brand-center .navbar-wrapper {
        position: relative;
    }
    body.download_app_bar .header-navbar.navbar-brand-center .navbar-header {
        position: relative;
    }
}
@media (min-width: 768px) {
    .quick_btn_download_app_block {
        display: none !important;
    }
}

.bg-w-border {
    margin: 15px 0;
    border: #f4f4f4 1px solid;
    padding: 15px;
    background: #FFF;
    border-radius: 10px;
}
.bg-w-m {
    background: #FFF;
}
@media(max-width: 768px) {
    .bg-w-m {
        margin: 0 -7px !important;
    }
}

.slideup-style-fancybox {
    border-radius: 15px;
}
@media(max-width: 768px) {
    .slideup-style-fancybox {
        width: 100%;
        margin: 0px !important;
        max-width: 500px !important;
        overflow-y: auto !important;
        max-height: 100vh;
        bottom: 0;
        position: absolute;
        left: 0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
.fancybox-slide--html .slideup-style-fancybox .fancybox-close-small {
    color: #000;
    background: #FFF;
    top: 5px;
    right: 5px;
}
.slideup-style-fancybox h5 {
    padding: 10px 0;
    text-align: center;
}
.change-admin-brand-list .media {
    border: 0 !important;
    padding: 10px 0;
    align-items: center;
    color: #000;
}
.change-admin-brand-list .media a {
    display: flex;
    align-items: center;
    color: #000;
}
.change-admin-brand-list .media .pic {
    margin-right: 15px;
}
.change-admin-brand-list .media .pic img {
    width: 55px;
}
.change-admin-brand-list .btn-add-brand {
    margin: 10px 0;
    color: #000;
    font-size: 1rem;
}
.change-admin-brand-list .btn-add-brand i {
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    padding: 0;
    color: #666;
    background: #e8e8e8;
    margin-right: 15px;
}

.user-info-detail-content {
    margin-top: 20px;
}
.user-info-detail-content .media {
    border: 0 !important;
}
.user-info-detail-content .media .pic img {
    width: 80px;
}
.user-info-detail-content .media-body {
    text-align: left;
    margin-left: 15px;
    margin-top: 10px;
}
.user-info-detail-content .media-body h4 {
    margin-top: 10px;
}
.user-info-more-detail {
    margin-top: 20px;
    border-top: #efefef 1px solid;
    border-bottom: #efefef 1px solid;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
}
.user-info-more-detail .form-group:last-child {
    margin-bottom: 0;
}
.user-info-more-detail .form-group .label-control {
    padding-right: 0;
}
.user-info-more-statistics {
    margin-top: 30px;
}
.user-info-more-statistics ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: space-between;
}
.user-info-detail-content .media-right {
    align-self: center;
}
.btn-edit-info {
    
}
.btn-edit-info i {
    padding: 5px;
    font-size: 1.3rem;
    background: #faf5f5;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #c3c3c3;
    border-radius: 30px;
    border: #eee 1px solid;
}
@media(min-width: 768px) {
    .user-info-detail-content .media .pic img {
        width: 110px;
    }
    .user-info-more-statistics li {
        width: 33.33%;
    }
}


.womo_header .navbar-nav.float-right>li a.nav-link-label-addnew i, 
.womo_header .navbar-nav.float-right>li a.nav-link-label-givecoin i {
    background: #da5271;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
    border-radius: 7px;
    color: #FFF;
    width: 27px;
    height: 27px;
    line-height: 22px;
    text-align: center;
    font-weight: bold;
    font-size: 1.4rem !important;
    border: #6B6F82 2px solid;
    /*border: #FFF 2px solid;
    box-shadow: 1px 1px 9px #00000030;*/
}
.womo_header .navbar-nav.float-right>li a.nav-link-label-addnew .txt {
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffe1e1;
    border-radius: 30px;
    color: #b35068;
    font-size: 1.1rem;
    padding: 4px 10px 3px 10px;
    border: #f3b5b5 1px solid;
    white-space: nowrap;
    box-shadow: 1px 1px 4px #00000033;
    transition: 0.3s;
    -webkit-animation: baloon_2 0.5s infinite;
    -moz-animation: baloon_2 0.5s infinite;
    -ms-animation: baloon_2 0.5s infinite;
    -o-animation: baloon_2 0.5s infinite;
    animation: baloon_2 0.5s infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes baloon_2 {
    0% { bottom: -10px;}
    100% {bottom: -5px;}
}
@-moz-keyframes baloon_2 {
    0% { bottom: -10px;}
    100% {bottom: -5px;}
}
@-ms-keyframes baloon_2 {
    0% { bottom: -10px;}
    100% {bottom: -5px;}
}
@-o-keyframes baloon_2 {
    0% { bottom: -10px;}
    100% {bottom: -5px;}
}
@keyframes baloon_2 {
    0% { bottom: -10px;}
    100% {bottom: -5px;}
}
.womo_header .navbar-nav.float-right>li a.nav-link-label-addnew .txt:before {
    display: block;
    content: " ";
    position: absolute;
    border: solid transparent;
    border-bottom: 7px solid #ffe1e1;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
.womo_header .navbar-nav.float-right>li a.nav-link-label-addnew .txt:after {
    display: block;
    content: " ";
    position: absolute;
    border: solid transparent;
    border-bottom: 7px solid #f57070;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
}
.headroom--unpinned-top.womo_header .navbar-nav.float-right>li a.nav-link-label-addnew .txt {
    display: none;
}
.womo_header .navbar-nav.float-right>li a.nav-link-label-givecoin i {
    font-style: normal;
    font-weight: normal;
    font-size: 1.3rem !important;
}
.womo_header .navbar-nav.float-right>li a.nav-link-label.nav-link-label-follow {
    background: #efefef;
    margin-top: 19px;
    margin-left: 5px;
    padding: 5px !important;
    height: fit-content !important;
    border-radius: 5px;
}
.womo_header .navbar-nav.float-right>li a.nav-link-label.nav-link-label-follow i {
    font-size: 1.2rem
}

#input-need-number, 
#input-need-number2, 
#input-need-number3 {
    position: relative;
    padding-right: 30px;
}
#input-need-number:after, 
#input-need-number2:after, 
#input-need-number3:after {
    position: absolute;
    right: 5px;
    top: 10px;
    content: "顆";
    z-index: 99;
}
/*intro-fancybox*/
.intro-fancybox {
    border-radius: 15px !important;
    padding: 30px;
}
.intro-box-bg {
    background: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
}
.intro-box-bg .pic img {
    width: 90px;
}
.intro-box-bg h5 {
    margin-top: 10px;
}
.intro-box-bg ul {
    padding: 0 15px 0 25px;
    margin: 0;
}
.intro-box-bg ul li {
    list-style: disc;
    margin: 5px 0;
}
.who-mate-block {
    text-align: center;
}
.mate-user .txt {
    margin-top: 5px;
}
.mate-user img {
    width: 80px !important;
    /*border: #f7565f 2px solid;*/
}
@media(max-width: 768px) {
    .mate-user img {
        width: 80px !important;
    }
}
.icon-mate-vs {
    align-self: center;
}
.icon-mate-vs img {
    width: 80px;
    margin: 0 5px;
}

.selectboxit-options [data-icon]:before {
    display: none !important;
}
.selectboxit-container {
  width: 100%; }

.selectboxit-optgroup-option .selectboxit-option-anchor {
  padding-left: 1.2rem !important; }

.selectboxit-container .selectboxit-options {
  max-height: 240px; }

.selectboxit-container .selectboxit-btn {
  background-image: none;
  border: 1px solid #ca4f6d; 
  color: #ca4f6d;
}

.selectboxit-container span, .selectboxit-container .selectboxit-options a {
    height: 40px;
    line-height: 40px;
}
.selectboxit-container .selectboxit-option-icon.selectboxit-container {
  margin: 0.7rem 0 0 0;
  font-size: 1.4rem;
}

.selectboxit.selectBox-right-icon .selectboxit-arrow-container .selectboxit-arrow {
  top: 25%; }

.selectboxit.custom-bootstrap-icon .selectboxit-arrow-container .selectboxit-arrow {
  top: 30%; }

.selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor {
  background-image: none !important;
  background-color: #E0E0E0 !important;
  color: #424242 !important; }

.input-group-addon + .selectBox + .selectboxit-container .selectboxit {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.selectBox + .selectboxit-container + .input-group-btn .btn {
  padding: 0.225rem 1rem; }

/* # Sizing
-------------------------------------------------- */
.selectBox-fixed + .selectboxit-container,
.selectBox-fixed + .selectboxit-options {
  width: 260px; }

.selectboxit.selectBox.selectBox-auto, .selectBox-auto + .selectboxit-container,
.selectBox-auto + .selectboxit-options {
  width: auto; }

.selectboxit.selectBox.selectBox-auto, .selectBox-auto + .selectboxit-container {
  display: inline-block; }

.selectboxit.selectBox.selectBox-auto {
  padding-right: 2rem; }

.selectBox-xl + .selectboxit-container .selectboxit {
  padding: 9px 5px;
  padding-right: 0px;
  height: 40px;
  font-size: 1.25rem; }

.selectBox-xl + .selectboxit-container span {
  line-height: 20px;
  height: auto; }

.selectBox-lg + .selectboxit-container .selectboxit {
  padding: 7px 5px;
  padding-right: 22px;
  height: 34px;
  font-size: 1.1rem; }

.selectBox-lg + .selectboxit-container span {
  line-height: 17px;
  height: auto; }

.selectBox-xl ~ .selectboxit-container .selectboxit-arrow-container, .selectBox-lg ~ .selectboxit-container .selectboxit-arrow-container, .selectBox-sm ~ .selectboxit-container .selectboxit-arrow-container {
  top: 45%; }

.selectBox-sm + .selectboxit-container .selectboxit {
  padding: 6px 5px;
  padding-right: 25px;
  height: 28px;
  font-size: 0.85rem;
  line-height: 1.6666667; }

.selectBox-sm + .selectboxit-container span {
  line-height: 14px;
  height: auto; }

.selectboxit-btn {
  background-color: #ffffff !important; }
.selectboxit-btn[class*='bg-'] {
    background-image: none; }
.selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus {
    background-position: 0 0 !important; 
}
.selectboxit-arrow-container {
    /*background: #FFF url(../images/icon/arrow-down-sign-to-navigate.svg) no-repeat right center;*/
}
.selectboxit-default-arrow {
    /*display: none;*/
    border-top: 7px solid #ca4f6d;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}







/*select-list-block*/
.select-list-block .btn-accordion, .select-list-block .btn-accordion:hover {
    color: #969696;
    right: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    background: #ededed;
    border-radius: 8px;
    padding: 5px;
    top: 0;
}
.select-list-block .btn-accordion.active {
    top: 0;
}
.select-list-block .btn-accordion i {
    line-height: 0;
    font-size: 1rem;
}
.select-list-block {
    position: relative;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    height: 40px;
    overflow: hidden;
    padding-right: 53px;
}
.select-list-block.on {
    height: auto;
}
.select-list-item label {
    color: #d4646b;
    width: 100%;
    text-align: center;
    border: solid 1px #d4646b;
    background: #FFF;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    padding: 3px 8px;
}
.select-list-item input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.select-list-r4 .select-list-item {
    /*width: 25%;*/
    padding-right: 6px;
}
.select-list-r4 .select-list-item:first-child, 
.select-list-r4 .select-list-item:nth-child(2) {
    /*width: 50%;*/
}
.select-list-item input:checked+label {
    color: #FFF;
    border: solid 1px #d4646b;
    background: #d4646b;
}
.select-list-item.disabled label {
    color: #c9caca;
    border: solid 1px #c9caca;
}
.mycoin-intro-content {
    display: none;
}
.mycoin-intro-content .polist-media {
    margin: 0 0 10px 0;
}
.mycoin-intro-content .po-title .right, 
.mycoin-intro-content .po-title .po-interaction-area, 
.mycoin-intro-content .po-title .ft-external-link {
    display: none;
}
.add-mycoin-intro-block {
    /*position: absolute;
    top: 0;
    left: 0;*/
    display: flex;
    align-items: center;
    background: #efefef;
    padding: 15px;
    border-radius: 15px;
}
.select-list-item .add-mycoin-intro-block {
    display: none;
}
.select-list-item input:checked~.add-mycoin-intro-block {
   /* display: flex;*/
}
.add-mycoin-intro-block .pic {
    width: 90px;
    margin-right: 15px;
}
.add-mycoin-intro-block .pic img {
    width: 100%;
}
.add-mycoin-intro-block .txt {
    flex: 1;
}
.add-mycoin-intro-block h5 {
    color: #d4646b;
}
.add-mycoin-intro-block h5 a {
    display: inline-block;
    position: relative;
    top: 2px;
    color: #d4646b;
    margin-left: 5px;
}
.add-mycoin-intro-block p {
    margin-bottom: 0;
}
.fancybox_btn.fixed-fancybox-btn {
    
}
@media (max-width: 430px) {
    .select-list-block {
        
    }
    .select-list-r4 .select-list-item {
        width: 33.33%;
    }
    .select-list-r4 .select-list-item:first-child {
        /*width: 66.66%;*/
    }
    .add-mycoin-intro-block .pic {
        width: 70px;
    }
}
@media (max-width: 375px) {
    .select-list-block {
        
    }
    
}




.share-user-info-fancybox {
    width: 100%;
    padding: 20px;
}
@media (min-width: 768px) {
    .share-user-info-fancybox {
        max-width: 500px !important;
    }
}
.txt-tip-how-do {
    position: relative;
    width: 50px;
    height: 50px;
}
.txt-tip-how-do:before {
    display: block;
    position: absolute;
    left: 0;
    bottom: -13px;
    content: " ";
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_click_hand.png) no-repeat center center;
    background-size: 100%;
    width: 50px;
    height: 50px;
    -webkit-animation: baloon_1 0.5s infinite;
    -moz-animation: baloon_1 0.5s infinite;
    -ms-animation: baloon_1 0.5s infinite;
    -o-animation: baloon_1 0.5s infinite;
    animation: baloon_1 0.5s infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes baloon_1 {
    0% { transform:translateY(10px);}
    100% {transform:translateY(25px);}
}

@-moz-keyframes baloon_1 {
    0% { transform:translateY(10px);}
    100% {transform:translateY(25px);}
}

@-ms-keyframes baloon_1 {
    0% { transform:translateY(10px);}
    100% {transform:translateY(25px);}
}

@-o-keyframes baloon_1 {
    0% { transform:translateY(10px);}
    100% {transform:translateY(25px);}
}

@keyframes baloon_1 {
    0% { transform:translateY(10px);}
    100% {transform:translateY(25px);}
}
.step-tip-list-block {
    position: relative;
    margin-bottom: 30px;
    border: #f1f1f1 1px solid;
    border-radius: 10px;
    padding: 15px;
}
.step-tip-list-block + .step-tip-list-block:after {
    position: absolute;
    display: block;
    content: " ";
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border: solid transparent;
    border-top: 10px solid #5aab9b;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.step-num {
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    background: #5aab9b;
    color: #FFF;
}
.step-tip-list-block .polist-media {
    margin: 0;
    border: #f4f5fa 1px solid;
}


/*---- sliderTab ----*/
.sliderTab {
    margin: 15px 0;
}
.sliderTab .swiper-wrapper {
    /*justify-content: center;
    transform: translate3d(0px, 0px, 0px) !important;*/
}
.sliderTab .swiper-slide {
    width: auto !important;
    padding: 0 5px;
}
.sliderTab .swiper-slide span {
    text-align: center;
    display: block;
}
.sliderTab .swiper-slide span.txt {
    margin-top: 5px;
}
.sliderTab .swiper-slide span.txt span {
    display: block;
    font-size: 0.9rem;
    color: #939393;
}
.sliderTab .swiper-slide {
    transition: 0.3s;
    opacity: 0.5;
}
.sliderTab .swiper-slide.on {
    opacity: 1;
}
.sliderTab .swiper-slide .pic {
    transform: scale(0.92);
    transition: 0.3s;
}
.sliderTab .swiper-slide.on .pic {
    transform: scale(1.05);
}
.sliderTab .swiper-slide.on .pic img {
    border: #d4646b 3px solid;
}
.swiper-tabs-container {
    overflow: hidden;
}
.swiper-tabs-container .content {
    padding: 10px;
    text-align: center;
}
.system-give-coin-block .card-header {
    border-bottom: #fff3f3 1px solid;
    background: #fff6f6;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 15px;
}
.system-give-coin-block .btn {
    padding: 8px 30px;
    width: 120px;
    transition: 0.3s;
}
.system-give-coin-block .wallet_coin {
    position: relative;
}
.system-give-coin-block .wallet_coin .badge {
    position: absolute;
    top: 8px;
    right: -27px;
    z-index: 10;
    transform: rotate(5deg);
}
.badge-w-sd {
    font-size: 0.9rem;
    color: #c74949;
    background: #FFF;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 17%);
}
@media (min-width: 768px) {
    .system-give-coin-block .btn:hover {
        transform: scale(1.05);
    }
}
.swiper-tabs-container .btn-area {
    margin-bottom: 15px;
}
.swiper-tabs-container .btn-area .btn-outline-icon .icon {
    width: 80px;
    height: auto;
    margin-bottom: 10px;
}
.swiper-tabs-container .btn-area .btn-outline-icon .icon img {
    width: 100%;
}

/*------- article-page-block ------*/
.article-page-block .gallery-fancybox-box {
    display: block;
    margin: 0 auto;
    position: relative;
    max-width: 600px !important;
}
.article-page-block .fixed_bottom_menu {
    display: none !important;
}
.header-navbar-style1, .header-navbar-style2 {
    display: none;
}
.header-navbar-style1.on, .header-navbar-style2.on {
    display: block;
}
.header-navbar.off {
    display: none;
}
.newpage_view {
    padding-top: 50px;
}
.newpage_view .btn-fancybox-back {
    display: none;
}
.newpage_view .gallery-fancybox-box {
    /*overflow: inherit !important;*/
    overflow: initial;
}

@media (max-width: 768px) {
    .intro-txt-border {
        border-bottom: #F4F5FA 3px solid;
    }
}


.tab-content-block .privilege-list-block {
    margin: 0 !important;
}
.privilege-list-block2 {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 -5px !important;
}
.privilege-list-block2 .privilege-list {
    
}
.privilege_info {
    min-height: 60px;
}
.privilege_info .right-btn {
    text-align: right;
}
.privilege_info .store-city {
    display: block;
    color: #c2c2c2;
    font-size: 0.8rem;
}
.privilege_info .store-city a {
    color: #FFF;
    display: flex;
    align-items: center;
}
.privilege_provider {
    /*border-top: #f6f5f5 1px solid;
    padding: 5px 10px;
    margin: 10px;
    background: #f2f2f2;
    color: #a6a4a4;*/
    color: #f7dfdf;
    font-size: 0.8rem;
}
.privilege_provider .privilege_store img {
    width: 30px;
    margin-left: 5px;
}
.privilege_provider .privilege_store_name {
    margin-left: 5px;
    color: #636363;
    min-height: 41px;
}
.privilege-list .privilege_content +  .privilege_content {
    margin-bottom: 20px;
    margin-top: 10px;
}
.privilege_content_condition {
    border-bottom: #f6f5f5 1px solid;
    margin-bottom: 25px;
}
/*.vertical-content-menu.menu-expanded .content-body {
    margin-left: 0 !important;
}
.vertical-content-menu.menu-expanded .main-menu {
    display: none !important;
}*/

@media(min-width: 767px) {
    .home-page-block .womo_pc_header_burger {
        display: none;
    }
}

/*--- home-banner-big-block ----*/
.home-banner-top-block {
    /*margin: 0 -7px 50px -7px !important;*/
    margin: 50px 0 50px 0;
}
.home-banner-top-inner {
    /*max-width: 1100px;*/
    width: 100%;
    margin: 0 auto;
}
.home-banner-list {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}
.home-banner-list .pic.pic_mobile {
    display: none;
}
.home-banner-list .pic {
    /*max-width: 1150px;*/
    width: 100%;
    margin: 0 auto;
}
.home-banner-list .pic img {
    width: 100%;
}
.home-banner-list .gallery_swiper_item > .gallery_swiper_video {
    padding-bottom: 45.9%;
}
.home-banner-list .home-banner-act-polist {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
    /*background-color: #FFF;*/
    border-radius: 15px;
}
.home-banner-list .act-polist-media-block {
    margin-bottom: 0;
}
.home-banner-list .act-polist-media .info-box .txt {
    -webkit-line-clamp: 1;
    margin-top: 0;
}
.home-banner-list .act-polist-media .author {
    /*margin-top: -19px;*/
}
.home-content-block {
    max-width: 1015px; 
    margin: 0 auto;
}
.act-polist-media-viewall {
    background: #f2f2f2 !important;
    margin-right: 10px !important;
}
.act-polist-media-viewall a {
    display: block;
    height: 100%;
}
.act-polist-media-viewall span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.act-polist-media-viewall i {
    display: block;
    font-size: 2rem;
}

/*home-my-feeling-block*/
.home-my-feeling-block {
    margin-bottom: 30px;
    text-align: center;
    padding: 40px 0 60px 0;
    font-size: 1.7rem;
    color: #FFF;
    background: #da5271 url(https://d1q14jmvwk39e0.cloudfront.net/public/assets/images/bg_emoij.png) no-repeat center center;
}
.home-my-feeling-inner {
    max-width: 700px;
    margin: 0 auto;
}
.home-my-feeling-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 9px;
}
.home-my-feeling-header .user-pic {
}
.home-my-feeling-header .btn-my-coin-setting .btn {
    width: 110px;
}
.home-my-feeling-content {
    position: relative;
    margin: 0;
    border-radius: 15px;
    box-shadow: 3px 4px #cb4a68;
}
.home-my-feeling-content .card-header .title{
    display: flex;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 0 0 0 20px;
    align-items: center;
    border-radius: 30px;
    text-align: left;
    font-size: 20px;
}
.home-my-feeling-content:before, 
.user-label-card:before {
    position: absolute;
    top: -24px;
    left: 7px;
    content: " ";
    width: 18px;
    height: 37px;
    background: url(https://d1q14jmvwk39e0.cloudfront.net/public/assets/images/icon/icon_label_line_left.svg);
    background-size: cover;
    z-index: 10;
    transform: rotate(-10deg);
}
.home-my-feeling-content:after, 
.user-label-card:after {
    position: absolute;
    top: 6px;
    left: 7px;
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #da5271;
    z-index: 9;
}
.user-label-card-gray:after {
    background-color: #d8dadf;
}
.label-user-pic {
    margin-bottom: -6px;
}

/*coin-slot-block*/
.coin-slot-inner {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}
.coin-slot-mask {
    position: absolute;
    left: 44px;
    top: 44px;
    width: 30px;
    height: 60%;
    background-color: #b6c4c7;
    transform: rotate(-20deg);
    z-index: 15;
}
.coin-slot-circle {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    background-color: #d1dde0;
}
.coin-slot-circle:before {
    position: absolute;
    top: 11px;
    left: calc(50% + 7px);
    content: " ";
    width: 24px;
    height: 80%;
    background-color: #4f575b;
    transform: rotate(-20deg) translateX(-50%);
    border-radius: 14px;
    z-index: 10;
}
.coin-slot-circle:after {
    position: absolute;
    content: " ";
    left: 16px;
    top: -3px;
    width: 143px;
    height: 150px;
    border-radius: 100%;
    background-color: #b6c4c7;
    z-index: 9;
}
.coin-slot-pic {
    position: absolute;
    top: -36px;
    right: -72%;
    z-index: 11;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1;  
    animation-direction: normal; 
    animation-duration: 0.5s; 
    animation-delay: 0.5s;
    animation-name:anim_ptn03;
    animation-fill-mode:forwards;
}
@keyframes anim_ptn03{
    0%{
        top: -36px;
        right: -72%;
    }
    100%{
        top: -13px;
        right: -31%;
    }
}
.coin-slot-emoji {
    position: absolute;
    top: -10px;
    right: -10px;
}
.coin-slot-emoji {
    transform: rotate(10deg);
}
.coin-slot-emoji img {
    width: 60px;
}

@media (max-width: 767px) {
    /*home-my-feeling-block*/
    .home-my-feeling-block {
        margin: -28px -7px 50px -7px;
        padding: 32px;
    }
    .home-my-feeling-block .card-header, 
    .home-my-feeling-block .card-body {
        padding: 15px;
    }
    .home-my-feeling-content .card-header .title {
        font-size: 15px;
        padding-left: 10px;
    }
    .home-my-feeling-content .card-header .title .btn {
        font-size: 12px;
        padding: 10px;
    }
    .home-my-feeling-header .btn-my-coin-setting .btn {
        width: 84px;
    }
    .home-my-feeling-content .select_my_feeling_list_block {
        flex-wrap: nowrap;
    }
    .home-my-feeling-content .select_my_feeling_list_block li label {
        padding: 0;
        border: 0;
        background: transparent;
    }
    .home-my-feeling-content .select_my_feeling_list_block li label img {
        opacity: 0.6;
        transform: scale(0.9);
    }
    .home-my-feeling-content .select_my_feeling_list_block li input:checked ~ label img {
        opacity: 1;
        transform: scale(1);
    }


    .home-banner-top-block {
        margin-bottom: 30px !important;
    }
    .home-banner-list .home-banner-act-polist {
        /*bottom: 5px;*/
        padding: 0 0 0 20px;
    }
    .home-banner-list .pic.pic_mobile {
        /*display: block;*/
    }
    .home-banner-list .pic.pic_web {
        /*display: none;*/
    }
    .home-banner-list .gallery_swiper_item > .gallery_swiper_video {
        /*padding-bottom: 88.8%;*/
    }
    .act-polist-media .info-box .txt {
        margin: 5px !important;
    }
    .act-polist-media-block1 .swiper-button-next, 
    .act-polist-media-block1 .swiper-button-prev {
        display: flex !important;
        z-index: 200 !important;
    }
    .home-content-block {
        margin: 0 -7px;
    }
    .home-content-block .content-title {
        padding: 0 15px;
    }
    .home-block {
        padding: 0 15px !important;
    }
    .home-ad-block {
        margin: 0 15px !important;
    }
}


.content-title {
    position: relative;
}
.content-title .btn_more {
    top: 5px;
}
.content-title .btn-addnew-article {
    margin-left: 5px;
}
.content-title .btn-addnew-article i {
    font-size: 1.7rem;
}
.swiper-pagination-bullet-active {
    background: #e37929 !important;
}
.home-banner-top-block .swiper-pagination {
    position: relative;
    margin-top: 20px;
}
.home-banner-top-block .swiper-pagination-bullet {
    /*background: #FFF !important;
    opacity: 0.5 !important;*/
}
.home-banner-top-block .swiper-pagination-bullet-active {
    /*background: #e37929 !important;*/
    /*background: #FFF !important;
    opacity: 1 !important;*/
}

/*----- topic-coin-category-block ------*/
.topic-coin-list-block .topic-coin-category-inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
}
.topic-coin-list-block .topic-coin-list {
    width: 20%;
    padding: 0 20px;
}
.topic-coin-category-block {
    margin: 40px 0 50px 0;
}
.topic-coin-category-block .swiper-pagination {
    position: relative;
}
.topic-coin-category-inner {
    /*display: flex;
    flex-wrap: wrap;*/
}
.topic-coin-list {
    text-align: center;
    width: 14.2%;
    margin-bottom: 30px;
    padding: 0 5px;
}
.topic-coin-list .m-coins-pic, 
.topic-coin-list .w-coins-pic {
    max-width: 140px;
    width: 100%;
    height: auto;
    padding: 15px;
}
.topic-coin-list .txt {
    color: #000;
    margin-top: 10px;
    font-size: 1.2rem;
}
@media (max-width: 767px) {
    .topic-coin-category-block {
        margin-top: 30px;
        /*margin: 30px 0 50px -15px !important;*/
        padding: 0 20px !important;
    }
    .content-title {
        padding: 0 20px;
    }
    .content-title-center h3 {
        text-align: center;
    }
    .content-title-center .btn_more {
        position: static;
        text-align: center;
        width: 100%;
        display: block;
        margin-top: 15px;
    }
    .topic-coin-list-block .topic-coin-list, 
    .topic-coin-category-block .topic-coin-list {
        width: 33.33%;
    }
    .topic-coin-list .m-coins-pic, 
    .topic-coin-list .w-coins-pic {
        padding: 13px;
    }
}

/*----- index-ad-block -----*/
.home-ad-block img {
    width: 100%;
    border-radius: 15px;
}

/*----- home-privilege-list-block -----*/
.home-block {
    margin-bottom: 40px !important;
}
.home-privilege-list-block {
    display: flex;
    flex-wrap: wrap;
}
.home-privilege-list {
    width: 48%;
    border-radius: 14px;
    overflow: hidden;
    background-color: #d8a9a9;
    box-shadow: 0px 0px 9px rgb(0 0 0 / 10%);
    margin: 15px 0;
}
.privilege-list-block-row .home-privilege-list-block-inner {
    display: flex;
    flex-wrap: wrap;
}
.privilege-list-block-row .home-privilege-list {
    margin: 15px 1%;
}
.home-privilege-list-m {
    background-color: #a4c9c7;
}
.home-privilege-list-top {
    position: relative;
    background-color: #000;
    /*padding-bottom: 20px;*/
    padding-bottom: 66%;
}
.home-privilege-list-top .store_pic_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.9;
}
.home-privilege-list-top .text-info {
    display: none;
    position: relative;
    padding: 20px 0;
    color: #FFF;
}
.home-privilege-list-top .text-info div div {
    display: none;
}
.home-privilege-list-top .text-info h5 {
    color: #FFF;
    margin: 15px 0;
}
.home-privilege-list-top .text-info h5 a {
    color: #FFF;
    margin-left: 5px;
}
.privilege-gift {
    position: relative;
    background: #FFF;
    border-radius: 12px;
    padding: 10px;
    margin: -30px 15px 10px 15px;
    box-shadow: 0px 0px 9px rgb(0 0 0 / 5%);
}
.media-btn-right {
    position: absolute;
    right: 11px;
    top: 10px;
    z-index: 50;
}
.media-btn-right a {
    color: #FFF;
    /*font-size: 1.2rem;*/
}
.author-info {
    position: relative;
    z-index: 30;
    color: #FFF;
    padding: 10px;
    font-size: 0.9rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}
.author-info img {
    margin-right: 5px;
    width: 30px !important;
    border-radius: 30px;
    border: rgb(255 255 255 / 90%) 2px solid;
}
.badge-label-school {
    padding-right: 0.6rem !important;
}
.badge-label-status {
    margin-top: 5px;
}
.badge-label-status span {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding-right: 9px;
}
.badge-label-status span:after {
    position: absolute;
    top: 5px;
    right: 1px;
    content: " 〉";
    font-size: 0.7rem;
}
.badge-label-status span i {
    line-height: 0;
}
.birth-mark {
    position: absolute;
    left: 54%;
    transform: translateX(-50%) rotate(5deg);
    top: -1px;
    z-index: 10;
    width: 40px;
    height: 40px;
    background-image: url(https://d1q14jmvwk39e0.cloudfront.net/public/assets/images/icon/icon_birth_hat.png);
    background-size: cover;
}
.badge-pink {
    background-color: #ef8bbd;
}
.author-info .badge-label-school, 
.user-info .media-heading .badge-label-school, 
.header_logo .badge-label-school {
    margin-left: 5px;
}
.user-info .media-heading .badge-label-school {
    position: relative;
    top: -2px;
}
.author-info .mark-label-arrow2 {
    top: 0;
}
.privilege-gift-row {
    display: flex;
    align-items: center;
}
.privilege-gift-row .coin-merge-m .w-coins-pic.coin-s-40 {
    margin-left: -40px;
}
.privilege-gift-row .coin-merge-m .w-coins-pic.coin-s-40 img {
    opacity: 0;
}
.privilege-gift-row .wm-coins {
    font-size: 1.4rem !important;
}
.exchange-coin-num {
    display: inline-flex;
    align-items: center;
}
.exchange-coin-num .coin-merge {
    display: flex;
}
.exchange-coin-num .icon {
    margin: 0 10px;
    font-size: 1.4rem;
}
.privilege-gift-row-right {
    margin-left: auto;
}
.num-info-block {
    padding: 10px;
    color: #FFF;
    font-size: 0.9rem;
    margin-top: 5px;
}
.num-info-block a {
    color: #FFF;
}
.user-have-list {
    display: inline-flex;
    margin-left: 12px;
    cursor: pointer;
}
.user-have-list span {
    margin-left: -12px;
}
.user-have-list span:first-child {
    position: relative;
    z-index: 8;
}
.user-have-list span:nth-child(2) {
    position: relative;
    z-index: 3;
}
.user-have-list img {
    width: 25px;
    border-radius: 25px;
    border: #FFF 2px solid;
}
.privilege_info .user_privilege_total_num .user-have-list img {
    width: 20px;
}
.txt-user-info {
    flex: 1;
    margin-left: 5px;
}
.btn-get-coin {
    min-width: 119px;
    margin-top: 10px;
    border-radius: 30px;
    padding: 10px 15px;
    color: #FFF;
}
.btn-get-coin-red {
    background-color: #ea5848;
}
.btn-get-coin-green {
    background-color: #5cb2a1;
}
.btn-get-coin:hover {
    color: #FFF;
}
.num-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}
.num-total .num {
    color: #FFF;
}
.privilege-num-info {
    text-align: center;
    color: #FFF;
    margin-top: 3px;
}
.privilege-num-info a {
    color: #FFF;
    text-decoration: underline;
}

/*----- home-article-list-block ------*/
.home-article-list-block {
    margin: 15px;
}
.home-article-list-block .polist-media {
    box-shadow: none;
    margin: 0;
}
@media (min-width: 768px) {
    .home-article-list-block .polist-media {
        max-width: 35%;
    }
}

/*----- social-check-list-block ------*/
.social-check-list-block .act-polist-media-block-inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1%;
}
.social-check-list-block .act-polist-media {
    position: relative;
    width: 31.33%;
    margin: 1%;
}
.social-gallery-fancybox {
    width: 100%;
    max-width: 400px !important;
}
.social-gallery-fancybox .act-polist-media {
    max-width: 100%;
}
.social-gallery-fancybox .check-social-num {
    left: 5px;
    right: inherit;
}
@media (max-width: 768px) {
    .home-privilege-list {
        width: 98%;
    }
    .social-check-list-block .act-polist-media {
        width: 48%;
    }
}

/*.home-privilege-list-block2 .home-privilege-list {
    display: flex;
    margin-bottom: 20px;
}
.home-privilege-list-right {
    flex: 1;
    background: #FFF;
    border-radius: 13px;
    margin-left: 20px;
    box-shadow: 0px 0px 9px rgb(0 0 0 / 5%);
}
.home-privilege-list-block2 .author-info {
    padding: 5px 15px;
}
.home-privilege-list-block2 .text-info {
    display: flex;
    padding: 0 15px;
}
.home-privilege-list-block2 .text-info .pic {
    width: 30%;
    min-width: 100px;
    margin-right: 15px;
}
.text-info .pic img {
    width: 100%;
    border-radius: 10px;
}
.home-privilege-list-block2 .privilege-gift {
    text-align: left;
}
.home-privilege-list-block2 .num-info-block {
    padding: 10px 15px;
}
@media (min-width: 678px) {
    .home-privilege-list-block2 .num-info-block {
        display: flex;
        align-items: center;
    }
}
.btn-area-block {
    margin-top: 15px;
    border-top: #eeeeee 1px solid;
    border-bottom: #eeeeee 1px solid;
}
.btn-area-block {
    display: flex;
}
.btn-area-block .btn {
    width: 100%;
    border-radius: 0;
}
.btn-area-block a + a {
    border-left: #eeeeee 1px solid;
}*/


.nav-cointype {
    display: flex;
    position: relative;
    padding-bottom: 120px;
    margin-bottom: 15px;
}
.nav-cointype-list {
    margin-right: 20px;
}
.nav-cointype label {
    cursor: pointer;
}
.nav-cointype label .m-coins-pic, 
.nav-cointype label .w-coins-pic {
    background-color: #b2b1b1 !important;
    -webkit-box-shadow: 4px 2px #999898;
    -moz-box-shadow: 4px 2px #999898;
    box-shadow: 4px 2px #999898;
    padding: 13px !important;
}
.nav-cointype label .txt {
    display: block;
    text-align: center;
    margin-top: 5px;
}
.nav-cointype input {
    opacity: 0;
    visibility: hidden;
    height: 0;
    position: absolute;
    z-index: -1;
}
.cointype-content {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    align-items: center;
}
.cointype-content .intro-txt-block {
    margin-bottom: 0;
    margin-left: 15px;
}

#cointype_free:checked + label .m-coins-pic {
    background-color: #5cb2a1 !important;
    -webkit-box-shadow: 4px 2px #4a9183;
    -moz-box-shadow: 4px 2px #4a9183;
    box-shadow: 4px 2px #4a9183;
}
#cointype_free:checked + label .txt {
    color: #309e8a;
}
.nav-cointype #cointype_free:checked ~ #cointype_free_content, 
.nav-cointype #cointype_value:checked ~ #cointype_value_content {
    display: flex;
}
#cointype_value:checked + label .w-coins-pic {
    background-color: #ea5848 !important;
    -webkit-box-shadow: 4px 2px #b44033;
    -moz-box-shadow: 4px 2px #b44033;
    box-shadow: 4px 2px #b44033;
}
#cointype_value:checked + label .txt {
    color: #d4646b;
}

.nav-cointype-btn-label {
    color: #4E5154;
    border: #4E5154 1px solid;
    background: #FFF;
    border-radius: 7px;
    padding: 5px 20px;
    margin-right: 10px !important;
    white-space: nowrap;
    cursor: pointer;
}
@media (max-width: 768px) {
    .nav-cointype-btn-label {
        padding: 5px 10px;
    }
    .decs-cointype-block .txt-tip-border-green {
        margin-left: -110px;
        margin-top: 10px;
        width: auto;
    }
    .decs-cointype-block2 .txt-tip-border-green {
        margin-top: 50px !important;
    }
}
@media (max-width: 390px) {
    .nav-cointype-btn-label {
        padding: 5px;
        margin-right: 5px !important;
    }
}
input.nav-cointype-btn {
    position: absolute;
    opacity: 0;
}
.decs-cointype-block {
    display: none;
    align-items: flex-start;
    margin: 15px 0;
    border: #f4f4f4 1px solid;
    padding: 15px;
    background: #FFF;
    border-radius: 10px;
}
.txt-tip-border-green {
    /*display: none;*/
    color: #000;
    background: #e9f2d8;
    padding: 10px 15px;
    border-radius: 7px;
    margin: 0 15px;
    width: 100%;
}
.txt-tip-border-green a {
    color: #28a511 !important;
}
.flex-align-items-start {
    align-items: flex-start;
}
.flex-align-items-center {
    align-items: center;
}
.flex-justify-center {
    justify-content: center !important;
}
.text-line-through {
    text-decoration: line-through;
}
.btn-yellow {
    border-color: #e1ac1d !important;
    background-color: #e1ac1d !important;
    color: #FFFFFF;
}
 .btn-yellow:hover {
    border-color: #c39418 !important;
    background-color: #c39418 !important;
    color: #FFF !important;
}
.btn-yellow:focus, .btn-yellow:active {
    border-color: #c39418 !important;
    background-color: #c39418 !important;
    color: #FFF !important;
}
.pl-30 {
    padding-left: 30px;
}
.decs-cointype-block.on {
    display: flex;
}
#decs-cointype-free h5, 
#decs-cointype-free a {
    color: #5cb2a1;
}
#decs-cointype-value h5, 
#decs-cointype-value a, 
#decs-cointype-value-alluser h5, 
#decs-cointype-value-alluser a {
    color: #ea5848;
}
.decs-cointype-block .txt {
    margin-left: 25px;
}
.decs-cointype-block .txt i {
    font-size: 1.3rem;
    margin-left: 5px;
    position: relative;
    top: 1px;
}
.decs-cointype-block .form-group {
    margin-bottom: 0;
}
.decs-cointype-block .txt p {
    margin-bottom: 0;
}
.decs-cointype-block .txt p > img {
    margin: 0 5px;
    width: 32px;
}
.decs-cointype-block .txt .coin-s-30 {
    margin-left: 5px;
}
.nav-cointype-free:checked ~ label, 
.nav-cointype-free ~ label.active {
    color: #FFF;
    background: #5cb2a1;
    border: #5cb2a1 1px solid;
} 
.nav-cointype-free:checked ~ label:before, 
.nav-cointype-value:checked ~ label:before, 
.nav-cointype-value-alluser:checked ~ label:before, 
.nav-cointype-btn-label.active:before {
    font-family: feather !important;
    content: "\e926";
    margin-right: 5px;
}
.nav-cointype-value:checked ~ label, 
.nav-cointype-value-alluser:checked ~ label, 
.nav-cointype-value ~ label.active, 
.nav-cointype-value-alluser ~ label.active {
    color: #FFF;
    background: #ea5848;
    border: #ea5848 1px solid;
}

/*type-article-interact-list*/
.type-article-interact-list {
    margin-bottom: 10px;
}
.type-article-interact-list .control .txt {
    margin-top: 9px;
}
.type-article-interact-list .control .txt strong {
    color: #cc4f6d;
    margin-right: 10px;
}
.type-article-interact-list > label {
    display: flex;
    flex-wrap: wrap;
    background-color: #FFF;
    border: #e4e4e4 1px solid;
    border-radius: 5px;
    padding: 5px 10px 5px 35px;
    min-height: 50px;
}
@media (max-width: 768px) {
    .type-article-interact-list > label {
        flex-wrap: nowrap;
    }
}
.type-article-interact-list label .control__indicator {
    top: 14px;
    left: 10px;
}

/*select-radio-cointype-block*/
.select-radio-cointype-block {
    display: none;
    width: 100%;
    margin-top: 10px;
}
.select-radio-cointype-list {
    position: relative;
}
.select-radio-cointype-block .radio_cointype {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.select-radio-cointype-block label {
    cursor: pointer;
    display: flex;
    align-items: center;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 7px;
    margin-bottom: 10px;
}
.select-radio-cointype-block label .control__indicator {
    position: relative;
    top: inherit;
    left: inherit;
}
.select-radio-cointype-block .control .txt {
    margin: 0 10px;
}
.type_article_interact2:checked ~ .select-radio-cointype-block {
    display: block;
}
/*.select-radio-cointype-block .radio_cointype:checked ~ label:before {
    position: absolute;
    display: block;
    top: -7px;
    left: -7px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 30px;
    background: #ca4f6d;
    color: #fff;
    font-family: feather !important;
    content: "\e926";
}*/

/*select_my_feeling_list_block*/
.select_my_feeling_list_block {
    display: flex;
    padding: 0;
    margin: 0 -5px;
}
.select_my_feeling_list_block li {
    margin: 0 5px;
}
.select_my_feeling_list_block li input {
    text-indent: -99999px;
    position: absolute;
    z-index: -1;
}
.select_my_feeling_list_block li label {
    position: relative;
    cursor: pointer;
    border: #CCC 1px solid;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
}
.select_my_feeling_list_block li input:checked ~ label {
    border-color: #ca4f6d;
}
.select_my_feeling_list_block li input:checked ~ label:before {
    position: absolute;
    display: block;
    top: -7px;
    left: -7px;
    width: 20px;
    height: 20px;
    font-size: 1rem;
    line-height: 20px;
    text-align: center;
    border-radius: 30px;
    background: #ca4f6d;
    color: #fff;
    font-family: feather !important;
    content: "\e926";
    z-index: 10;
}
.select_my_feeling_list_block img {
    width: 100%;
}
@media (max-width: 768px) {
    .select_my_feeling_list_block {
        flex-wrap: wrap;
    }
    .select_my_feeling_list_block li {
        width: calc(25% - 10px);
    }
}

/*award-task-intro-block*/
.award-task-intro-list {
    align-items: center;
}
.award-task-intro-list + .award-task-intro-list {
    margin-top: 20px;
}
.award-task-intro-list .media-left {
    margin-right: 15px;
}
.award-task-intro-list .media-body {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #000;
}
.award-task-intro-list .media-body .m-coins-pic, 
.award-task-intro-list .media-body .w-coins-pic {
    margin: 0 7px;
}
@media (max-width: 768px) {
    .label-user-pic {
        margin-bottom: 9px;
    }
    .award-task-intro-list {
        flex-wrap: wrap;
        background-color: #FFF;
        padding: 15px;
        border-radius: 15px;
        border: #e9e9e9 1px solid;
    }
    .award-task-intro-list .media-left {
        margin-right: 0;
        flex: 1;
    }
    .award-task-intro-list .media-body {
        flex: 0 0 100%;
    }
    .award-task-intro-list .media-left .bg-peach-arrow-r:after {
        top: inherit;
        right: inherit;
        bottom: -15px;
        transform: rotate(90deg);
        margin-top: -8px;
        left: 11px;
        border-left-color: #cd6bd4;
    }

}

.gallery_swiper_music .bg {
    background-color: none;
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%) !important
}

.custom-file-input:lang(zh) ~ .custom-file-label::after {
    content: "選擇";
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.green-audio-player {
    width: 400px;
    min-width: 300px;
    height: 56px;
    -webkit-box-shadow: 0 4px 16px 0 rgba(0,0,0,.07);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,.07);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff
}

.green-audio-player img,.green-audio-player svg {
    display: block
}

.green-audio-player .play-pause-btn {
    display: none;
    cursor: pointer
}

.green-audio-player .loading .loading__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #b0b0b0;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spin .4s linear infinite;
    animation: spin .4s linear infinite
}

.green-audio-player .slider {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background-color: #d8d8d8;
    cursor: pointer;
    position: relative
}

.green-audio-player .slider .progress {
    background-color: #44bfa3;
    border-radius: inherit;
    position: absolute;
    pointer-events: none
}

.green-audio-player .slider .progress .pin {
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background-color: #44bfa3;
    position: absolute;
    pointer-events: all;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.32);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.32)
}

.green-audio-player .controls {
    font-family: Roboto,sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: #55606e;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 24px;
    margin-right: 24px
}

.green-audio-player .controls .controls__slider {
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 2px;
    height: 4px
}

.green-audio-player .controls .controls__slider .controls__progress {
    width: 0;
    height: 100%
}

.green-audio-player .controls .controls__slider .controls__progress .progress__pin {
    right: -8px;
    top: -6px
}

.green-audio-player .controls span {
    cursor: default
}

.green-audio-player .volume {
    position: relative
}

.green-audio-player .volume .volume__button {
    cursor: pointer
}

.green-audio-player .volume .volume__button.open path {
    fill: #44bfa3
}

.green-audio-player .volume .volume__controls {
    width: 30px;
    height: 135px;
    background-color: rgba(0,0,0,.62);
    border-radius: 7px;
    position: absolute;
    left: -3px;
    bottom: 52px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.green-audio-player .volume .volume__controls.hidden {
    display: none
}

.green-audio-player .volume .volume__controls.top {
    bottom: 52px;
    left: -3px
}

.green-audio-player .volume .volume__controls.middle {
    bottom: -54px;
    left: 54px
}

.green-audio-player .volume .volume__controls.bottom {
    bottom: -164px;
    left: -3px
}

.green-audio-player .volume .volume__controls .volume__slider {
    margin-top: 12px;
    margin-bottom: 12px;
    width: 6px;
    border-radius: 3px
}

.green-audio-player .volume .volume__controls .volume__slider .volume__progress {
    bottom: 0;
    height: 100%;
    width: 6px
}

.green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin {
    left: -5px;
    top: -8px
}






.gallery_swiper_video {
    display: block;
    position: relative;
    padding-bottom: 75%;
}

.video-play,
.gallery_swiper_video iframe,
.gallery_swiper_video object,
.gallery_swiper_video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gallery_swiper_video iframe,
.gallery_swiper_video object,
.gallery_swiper_video embed {
    /*pointer-events: none;*/
}

.gallery_swiper_audio {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
    /*background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);*/
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}
.ready-player-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

.rapAudio{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    padding: 0 15px;
    transform: translate(-50% , -50%);
}
.rapAudio audio{
    width:100%;
}

.rapAudio canvas{
    width:100%;
}





/* Audio Player Styles
================================================== */
.js-player {
    width: 100% !important;
}

audio {
}
.audiowrap,
#plwrap {
margin:0 auto;
position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 0 15px;
    transform: translate(-50%, -50%);
}

#tracks {
font-size:0;
position:relative;
text-align:center;
}

#nowPlay {
display:block;
font-size:0;
}

#nowPlay span {
display:inline-block;
font-size:1.05rem;
vertical-align:top;
}

#nowPlay span#npAction {
padding:21px;
width:30%;
}

#nowPlay span#npTitle {
padding:21px;
text-align:right;
width:70%;
}

#plList li {
cursor:pointer;
display:block;
margin:0;
padding:21px 0;
}

#plList li:hover {
background-color:rgba(0, 0, 0, .1);
}

.plItem {
position:relative;
}

.plTitle {
left:50px;
overflow:hidden;
position:absolute;
right:65px;
text-overflow:ellipsis;
top:0;
white-space:nowrap;
}

.plNum {
padding-left:21px;
width:25px;
}

.plLength {
padding-left:21px;
position:absolute;
right:21px;
top:0;
}

.plSel,
.plSel:hover {
background-color:rgba(0, 0, 0, .1);
color:#fff;
cursor:default !important;
}

#tracks a {
border-radius:3px;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:2.3rem;
height:40px;
line-height:.2;
margin:0 5px 30px;
padding:12px;
text-decoration:none;
transition:background .3s ease;
}

#tracks a:hover,
#tracks a:active {
background-color:rgba(0, 0, 0, .1);
color:#fff;
}

#tracks a::-moz-focus-inner {
border:0;
padding:0;
}


/* Plyr Overrides
================================================== */

.plyr--audio .plyr__controls {
background-color:transparent;
border:none;
color:#fff;
font-family:"Source Sans Pro", arial, sans-serif;
padding:20px 20px 20px 13px;
width:100%;
border-radius: 50px !important;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 13%);
}

a.plyr__controls__item.plyr__control:hover,
.plyr--audio .plyr__controls button:hover,
.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr__play-large {
background-color:rgba(0, 0, 0, .1);
}

.plyr__progress--played,
.plyr__volume--display {
color:rgba(0, 0, 0, .1);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
background-color:rgba(0, 0, 0, .1);
}

.plyr--audio .plyr__progress--buffer {
color:rgba(0, 0, 0, .1);
}

.plyr__controls .plyr__controls__item.plyr__time {
font-size:14px;
margin-left:7px;
}


/* Media Queries
================================================== */

@media only screen and (max-width:600px) {
    #nowPlay span#npAction { display:none; }
    #nowPlay span#npTitle { display:block; text-align:center; width:100%; }
}




#cropImagePop {
    z-index: 99999 !important;
}

.btn-pic-s {
    padding: 7px 5px;
}
.btn-pic-s span {
    display: inline-block;
    margin: 0 5px;
}
.btn-pic-s span.pic img {
    width: 25px;
    border-radius: 20px;
    border: rgb(255 255 255 / 75%) 2px solid;
}

/*---- encourage-list-block  ----*/
.encourage-list-block {
    margin-top: 20px;
}

.encourage-list {
    /*display: table;
    width: 100%;*/
}
.encourage-list .media {
    /*display: table-row;*/
    position: relative;
    padding: 10px 0;
    align-items: center;
    border-top: 1px solid #ffffff;
    flex-wrap: wrap;
}
.encourage-list .media:first-child {
    border-top: 0;
}
.encourage-list .media > div, 
.encourage-list .media > span {
    /*display: table-cell;
    padding: 5px;
    border-top: #f1f1f1 1px solid;*/
}
.encourage-list .media .media-left img {
    width: 45px;
}
.encourage-list .media-body {
    margin: 0 10px;
}
.encourage-list .media .media-heading {
    margin-bottom: 0;
    font-size: 1.1rem;
}
.encourage-list .media .media-right {
    width: 200px;
    text-align: right;
}
.encourage-list .media .media-right a {
    width: 60px;
}
.btn-outline-green {
    color: #61ab9a;
    border-color: #61ab9a;
}
.btn-outline-green:hover {
    color: #FFF !important;
    background-color: #61ab9a;
    border-color: #61ab9a;
}
.btn-add-follow-user.on {
    color: #FFF;
    background-color: #61ab9a;
}
.encourage-list .media .encourage-num {
    display: flex;
    align-items: center;
    width: 60px;
    color: #8a8a8a;
}
.icon-thermometer-gray {
    display: inline-block;
    width: 20px;
    height: 28px;
}
.icon-thermometer-gray:before {
    display: inline-block;
    width: 100%;
    margin-top: 3px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/low-temperature-thermometer.svg);
}
@media (max-width: 767px) {
    .encourage-list .media .encourage-num {
        width: 100%;
        margin-top: 10px;
    }
    .encourage-list .media .media-right {
        position: absolute;
        bottom: 10px;
        right: 0;
    }
}

/**/
#buy-faceai-fancybox {
    max-width: 450px;
    width: 90%;
    padding: 1rem 1.5rem;
}
.buy-faceai-top-block {
    display: flex;
    align-items: center;
    border-bottom: #f5efef 1px solid;
    margin: -1rem -1.5rem 1rem -1.5rem;
    padding: 1rem 1.5rem;
    background: #fef8f8;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.buy-faceai-top-block .pic {
    background: #dcac2e;
    border: #FFF 4px solid;
    margin-right: 15px;
    width: 80px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 20%);
}
.buy-faceai-top-block .pic img {
    width: 100%;
}
.buy-faceai-top-block .txt h5 {
    color: #969696;
    margin-top: 5px;
}


/*dashboard*/
.user-pic-coin {
    position: relative;
    display: inline-block;
}
.user-pic-coin .media-object {
    width: 100px;
}
.user-pic-coin .w-coins-pic {
    position: absolute;
    bottom: 0;
    right: -5px;
}

.my-coin-price {
    display: inline-flex;
    align-items: flex-end;
}
.my-coin-price .icon {
    position: relative;
    display: inline-block;
    border: #e1ac1d 2px solid;
    padding: 0 44px 0 15px;
    border-radius: 30px;
    margin-top: 20px;
    font-size: 1.5rem;
    background: #FFF;
}
.my-coin-price .icon:after {
    position: absolute;
    display: block;
    content: " ";
    top: -11px;
    left: 62%;
    margin-left: -4px;
    border: solid transparent;
    border-bottom: 8px solid #e1ac1d;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.my-coin-price .friend-interaction {
    position: relative;
    margin-left: 8px;
    margin-bottom: 0;
}
.my-coin-price .txt {
    font-size: 1rem;
    color: #959595;
    margin-right: 5px;
}
.my-coin-price .icon a {
    margin-left: 10px;
}
.my-coin-price .icon a img {
    height: 33px;
}
.my-coin-price a.btn-add-myprice {
    position: absolute;
    right: -3px;
    top: 0px;
    /*display: inline-block;
    color: #FFF;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    text-align: center;
    line-height: 22px;
    background: #e1ac1d;
    position: relative;
    top: -1px;
    font-size: 1.2rem;*/
}
.add-myprice-btn-list dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: #d4762b 1px solid;
    padding: 5px 15px;
    border-radius: 30px 
}
.add-myprice-btn-list dt {
    color: #d4762b;
}
.add-myprice-btn-list dt img {
    width: 40px;
    margin-left: -5px;
}
.add-myprice-btn-list dd {
    margin: 0 0 0 15px;
}
.add-myprice-btn-list dd .btn {
    margin: 0;
}

/*-- my-coin-level --*/
.my-coin-level-block {
    flex-grow: 2;
}
.my-coin-level {
    position: relative;
    width: fit-content;
    margin: 20px 0 25px 10px;
}
.my-coin-level .w-coins-pic, 
.my-coin-level .m-coins-pic {
    position: absolute;
    top: -8px;
    left: -10px;
}
.level-num-bar {
    display: block;
    background-color: #d05645;
    border-radius: 8px;
    padding: 0 15px;
    min-width: 127px;
    text-align: left;
}
.my-coin-value .level-num-bar, 
.my-coin-free .level-num-bar {
    color: #f3d7d7;
    padding: 2px 5px 4px 42px;
}
.level-num-bar span {
    display: inline-block;
}
.level-num-bar .level-num1 {
    display: inline-block;
    color: #FFF;
    font-size: 1.3rem;
    border-radius: 8px;
}
.level-num-bar .level-num2 {
    display: inline-block;
    color: #FFF;
    margin-left: -5px;
}
.my-coin-free .level-num-bar .level-txt {
    font-size: 1.3rem;
    margin-top: 2px;
    margin-bottom: -2px;
    color: #f6fdfc;
}
.w-coins-pic .level-num-bar, 
.m-coins-pic .level-num-bar {
    text-align: center;
    white-space: nowrap;
    min-width: 63px;
    padding: 0 5px;
    margin-left: -7px;
}
.w-coins-pic .level-num-bar .level-num1, 
.m-coins-pic .level-num-bar .level-num1 {
    font-size: 1.1rem;
}
.my-coin-free .level-num-bar, 
.m-coins-pic .level-num-bar {
    background-color: #5aab9b;
}
.my-coin-level .btn {
    padding: 3px;
    position: relative;
    top: -2px;
    margin-left: 5px;
}
.my-coin-free .btn {
    padding: 3px;
    position: relative;
    top: 5px;
    margin-left: 5px;
    float: right;
    color: #5aab9b;
}
.my-coin-level .friend-interaction {
    position: absolute;
    right: -40px;
    top: -3px;
}
.btn-set {
    position: absolute;
    right: 0;
    top: 0;
    color: #FFF;
    height: 26px;
    background: #bc4332;
    padding: 0 6px;
    display: flex;
    align-items: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.my-coin-free .btn-set {
    background: #348f7d;
}
.btn-set img {
    width: 19px;
    margin-top: -1px;
}
.btn-set.disabled {
    filter: grayscale(100%);
    pointer-events: visible;
}
.btn-set:hover {
    color: #FFF;
}
@media (max-width768px) {
    .my-coin-level {
        min-width: 173px;
    }
}

.buy-mycoin-info-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    /*background: #fff2f2;*/
    background-color: #FFF;
    padding: 10px;
    border-radius: 5px;
}
.buy-mycoin-info p {
    margin-bottom: 10px;
    color: #d4762b;
}
.buy-mycoin-info p img {
    width: 20px;
}
.buy-mycoin-info-list .buy-mycoin-info-num .form-group {
    margin-bottom: 0 !important;
}
.buy-mycoin-info-list .buy-mycoin-info-num {
    width: 120px;
}
.buy-mycoin-info-list .buy-mycoin-info-num .form-control, 
.buy-mycoin-info-list .buy-mycoin-info-num .btn {
    padding: 0.5rem;
}
.buy-mycoin-info-list .icon img {
    width: 20px;
    margin-left: 5px;
}
.buy-mycoin-info-list .txt {
    margin: 0 30px 0 15px;
}
.buy-mycoin-info-list .total {
    flex: 1;
    text-align: right;
    font-size: 1.1rem !important;
}
.buy-mycoin-info-total-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-top: #ededed 1px solid;
    padding-top: 10px;
}
.buy-mycoin-info-current-num {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: -20px;
    margin-bottom: 20px;
    border: #e4e0e0 1px solid;
    border-radius: 30px;
    padding: 0 10px;
    color: #a1a1a1;
    background: #f2f2f2;
}
.buy-mycoin-info-current-num .txt {
    margin-right: 5px;
    font-size: 0.9rem;
}
.buy-mycoin-info-current-num .total {
    font-size: 1.4rem;
}

.coupon_exchange_img .status {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99;
}
.coupon_exchange_img .status .badge {
    margin-right: 5px;
}
.coupon_exchange_title {
    position: relative;
    background-color: #494949;
    color: #FFF;
    text-align: center;
    font-size: 1.3rem;
    padding: 10px;
    z-index: 999;
}
.coupon_exchange_title .w-coins-pic, 
.coupon_exchange_title .m-coins-pic {
    margin: 0 10px;
}

.withdraw_recode_count {
    justify-content: space-between !important;
    color: #000;
    font-size: 1.1rem;
}
.withdraw_recode_item.media-heading {
    color: #000;
    font-weight: bold;
    font-size: 1.1rem;
    background-color: #f2f2f2;
    padding: 1rem 1.5rem;
}
.withdraw_recode_item.media-heading .media-left {
    flex: 1;
}
.withdraw_recode_item.media-heading .media-body{
    text-align: right;
}
.withdraw_recode_item .media-heading .icon.wm-coins, 
.withdraw_recode_item .media-heading .icon.w-coins {
    font-size: 1.3rem;
}
.withdraw_recode_item .media-heading .w-coins-pic {
    margin: 0 8px 0 5px;
}
.withdraw-notice-txt {
    background: #f2f2f2;
    padding: 15px;
}
.withdraw-notice-txt ul{
    margin-bottom: 0;
    padding-left: 1.5rem !important;
}
.withdraw-notice-txt li{
    list-style: disc;
    float: none !important;
    text-align: left !important;
}
.go-withdraw-step2 {
    visibility: hidden;
    position: relative;
    z-index: -1;
    height: 0;
    overflow: hidden;
}
.go-withdraw-step2.on {
    visibility: visible;
    z-index: 10;
    height: auto;
}
.signature-block {
    position: relative;
    background: #FFF;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    padding: 15px;
}
.signature-panel {
    border: #e2dfdf 1px solid;
}
.signature-panel .jSignature {
    padding: 40px 0;
    height: 200px;
}
.signature-panel2 {
    height: 200px;
    border: #e2dfdf 1px solid;
}
.clear-button {
    position: absolute;
    right: 15px;
    top: 7px;
}
#signature_capture {
    visibility: hidden;
    height: 0;
}

.order-return-set-num-block {
    background: #fff5f5;
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
}
.order-total-return-num {
    margin-top: 15px;
    color: #000;
    padding: 10px 15px;
    background: #ffefef;
    border-radius: 5px;
    border: #e6b7b7 1px solid;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.order-total-return-num .icon {
    font-size: 2.2rem;
}
.order-total-return-num .icon img {
    height: 25px;
}
.order-total-return-block .btn-full-w {
    color: #000;
}
.order-total-return-block .media {
  align-items: center;
}
.order-total-return-block .media .icon {
    margin: 0 20px;
}

.privilege-list .media-top {
    display: flex;
    flex: 0 0 100%;
    padding: 10px 16px;
    min-width: 0;
    align-items: center;
}
.privilege-list .media-top .badge {
    position: relative;
    font-size: 0.8rem;
    top: -2px;
    left: 0;
    height: 23px;
    display: inline-flex;
    align-items: center;
}
.privilege-list .media-top .w-coins-pic, 
.privilege-list .media-top .m-coins-pic {
    margin-right: 10px;
}
.privilege-list .media-top .w-coins, 
.privilege-list .media-top .m-coins, 
.privilege-list .media-top .wm-coins {
    font-size: 1.5rem;
}
.privilege-list .media-top .store-name {
    display: block;
    font-size: 1.1rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
    /*color: #1f9086;*/
    color: #000;
}
.privilege-list .media-top .icon {
    line-height: 1.8rem;
}
.privilege-list .media-top .media-btn-right {
    position: absolute;
    right: 10px;
    top: 10px;
}
.privilege-list .media-top .media-btn-right a {
    color: #424242;
    font-size: 1rem;
}
.privilege-list .status {
    position: absolute;
    top: 9px;
    left: 7px;
    z-index: 90;
}
@media (max-width: 768px) {
    .privilege-list .status {
        left: 15px;
    }
}
.privilege-list .status > a {
   
}
.privilege-list .status .badge {
    display: inline-flex;
    align-items: center;
    position: static;
    margin-bottom: 5px;
    margin-right: 5px;
    height: 22px;
}
.icon-que-bg-w:after {
    position: relative;
    top: -1px;
    display: inline-block;
    content: "?";
    font-family: arial;
    font-style: normal;
    vertical-align: middle;
    color: #FF4961;
    background-color: #FFF;
    width: 13px;
    height: 13px;
    line-height: 15px;
    text-align: center;
    border-radius: 13px;
    margin-left: 3px;
    font-size: 0.85rem;
}
.privilege_info {
    /*min-height: 60px;*/
}
.privilege-list .mycoin-num-block {
    flex: 0 0 100%;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    margin-top: -10px;
    width: 100%;
}
.privilege-list .mycoin-num {
    display: flex;
    align-items: center;
    width: 100%;
    color: #E55942;
    /*background: #FCE9E9;*/
    background: #e9e9e9;
    padding: 3px 20px 3px 10px;
    margin-right: -20px;
    border-radius: 30px;
}
.privilege-list .mycoin-num .coin-s-25 {
    margin: 0 5px;
}
.privilege-list .mycoin-num .m-coins, 
.privilege-list .mycoin-num .w-coins {
    font-size: 1.2rem;
}
.privilege-list .mycoin-num a {
    /*color: #E55942;*/
    color: #006d99;
}
.privilege-list .mycoin-num img {
    position: relative;
    top: -1px;
    width: 20px;
}
.privilege-list .mycoin-num-block .btn {
    margin-bottom: 0;
}
.privilege-list .mycoin-num-block .btn.btn-red {
    color: #fff;
    background-color: #000 !important;
    border-color: #000 !important;
}
.privilege-list .mycoin-num-block .btn.btn-outline-gray {
    border-color: #d4646b !important;
    background-color: #d4646b !important;
    color: #FFFFFF;  
}
.privilege-list .media-btn {
    padding-top: 0;
}
.privilege-list .media-btn .btn {
    margin-top: 0;
}
.privilege-list .media-btn .btn + .btn {
    margin-left: 5px;
}
.btn-outline-gray {
    color: #727272;
    border-color: #cfcfcf;
}
.btn-outline-gray:hover {
    color: #727272;
    background-color: #cfcfcf;
}
.privilege-list .btn-add-favor, 
.privilege-row-list .btn-add-favor {
    position: absolute;
    top: 8px;
    right: 8px;
    box-shadow: 0px 1px 5px 1px rgb(62 57 107 / 20%);
    background: #FFF !important;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    padding: 7px 0;
    text-align: center;
    white-space: nowrap;
    z-index: 99;
}
.privilege-list .other-btn-block {
    padding: 10px;
    margin-top: -10px;
}
.privilege-list .privilege_info .reach-mark {
    position: absolute;
    top: -75px;
    right: 15px;
    transform: rotate(-10deg);
    z-index: 10;
}
.privilege-list .privilege_info .reach-mark img {
    width: 110px;
}
.privilege-list.sold-out {
    opacity: 0.8;
}


/*.privilege-row-list-block*/
.privilege-row-list {
    position: relative;
    padding: 15px;
    flex-wrap: wrap;
}
.privilege-row-list + .privilege-row-list {
    border-top: #f9f8f8 1px solid;
}
.privilege-row-list .media-btn-right {
    position: static;
    margin: 4px 0 0 10px;
}
.privilege-row-list .media-right {
}
.privilege-row-list .media-btn-right a {
    color: #000;
}
.privilege-row-list .btn-add-favor {
    top: 5px;
    left: 5px;
}
.privilege-row-list .pic {
    position: relative;
    width: 180px;
    margin-right: 15px;
    border-radius: 5px;
    padding-right: 0 !important;
    overflow: hidden;
}
.privilege-row-list .pic img {
    width: 100%;
}
.privilege-row-list .off .off-info-inner img {
    width: 50px !important;
}
.privilege-row-list .secret-icon-info .txt, .off .off-info .txt {
    font-size: 1rem !important;
}
.privilege-row-list h4 {
    margin: 10px 30px 0 0;
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.privilege-row-list .coin-num {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.privilege-row-list .coin-num .badge-outline-danger {
    margin: 6px 0 0 5px;
}
.privilege-row-list .coin-num .user-pic-round {
    margin-top: 5px;
    margin-right: 5px;
}
.user-pic-round img {
    width: 45px;
    border-radius: 45px;
    background: #FFF;
    padding: 3px !important;
    box-shadow: 0px 0px 10px 0px rgb(107 111 130 / 40%);
}
.privilege-row-list .coin-num .coin-s-30 {
    margin-right: 5px !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    padding: 6px !important;
}
.privilege-row-list .coin-num .text-coins {
    margin-left: 5px;
}
.privilege-row-list .coin-num .text-coins .txt {
    word-break: break-all;
    margin-bottom: 0;
}
.privilege-row-list .coin-num .text-coins .font-medium-3, 
.privilege-row-list .coin-num .text-coins .font-medium-1 {
    display: block;
    padding-top: 20px;
}
.privilege-row-list .privilege_content {
    display: none;
    margin-top: 5px;
}
.privilege-row-list .media-right .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    border-radius: 30px;
}
.privilege-row-list .media-right .btn.btn-icon-coin {
    padding: 2px 0.75rem;
    display: flex;
    align-items: center;
}
.privilege-row-list .media-right .btn + .btn {
    margin-top: 5px;
}
.privilege-row-list .media-body .status {
    display: none;
}
.privilege-row-list .gift-info-content {
    display: flex;
    margin: 10px 0 8px 0;
    font-size: 0.9rem;
}
.privilege-row-list .gift-info-content dl {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.privilege-row-list .gift-info-content dl, 
.privilege-row-list .gift-info-content dl a {
    color: #309e8a;
}
.privilege-row-list .gift-info-content dl + dl {
    margin-left: 15px;
}
.privilege-row-list .gift-info-content dl dt {
    margin-right: 5px;
    line-height: 0;
}
.privilege-row-list .gift-info-content dl dt {
    font-size: 1.2rem;
}
.privilege-row-list .gift-info-content dl dd {
    margin-bottom: 0;
}

.gift-info-content-block .txt {
    display: block;
    margin: 3px 0;
}
.gift-info-content-block .gift-info-content dl dd {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    
}
.update-filter-block {
    display: flex;
    padding: 1rem 1.3rem;
}
.update-filter-btn {
    position: relative;
    display: flex;
    flex: 1;
    height: 38px;
    background: #f5f5f5;
    padding: 0 0 0 50px;
    align-items: center;
    border-radius: 30px;
    text-align: left;
    font-size: 1.1rem;
}
.update-filter-btn .pic {
    position: absolute;
    left: -5px;
    top: -5px;
}
.update-filter-btn .pic img {
    width: 45px;
    height: 45px;
    border-radius: 45px;
}
.update-filter-btn .txt {
    flex: 1;
    color: #888888;
}
.update-filter-btn .btn {
    margin-top: -3px !important;
}
.btn-icon-gray {
    font-size: 1.6rem;
    line-height: 0;
    color: #6c6c6c;
    background-color: #efefef;
    border-radius: 7px;
    padding: 7px;
}


@media (max-width: 430px) {
    .privilege-row-list .gift-info-content dl + dl {
        margin-left: 5px;
    }
    .gift-info-content-block .gift-info-content.r2 dl dd {
        max-width: 105px;
    }
}
@media (max-width: 429px) {
    .gift-info-content-block .gift-info-content.r2 dl dd {
        max-width: 90px;
    }
}
@media (max-width: 413px) {
    .gift-info-content-block .gift-info-content.r2 dl dd {
        max-width: 59px;
    }
}

/*.mate-bonus-ticket*/
.mate-bonus-ticket.voucher-list {
    padding-left: 73px;
    margin: 20px 0 10px 0;
    order: 1;
}
.mate-bonus-ticket.voucher-list:before, 
.mate-bonus-ticket.voucher-list:after {
    display: none;
}
.mate-bonus-ticket.voucher-list .mark {
    display: flex;
    align-items: center;
    -webkit-writing-mode: inherit;
    writing-mode: initial;
    font-size: 0.9rem;
    padding: 0 10px;
}
.mate-bonus-ticket.voucher-list .mark:before, 
.mate-bonus-ticket.voucher-list .mark:after {
    height: 10px;
    width: 10px;
    right: -6px;
    background-color: #FFF;
}
.bg-border-red .mate-bonus-ticket.voucher-list .mark:before, 
.bg-border-red .mate-bonus-ticket.voucher-list .mark:after {
    background-color: #fcf7f7;
}
.mate-bonus-ticket.voucher-list .mark:before {
    /*box-shadow: inset 0px -2px 6px #e4e4e4;*/
    top: -4px;
}
.mate-bonus-ticket.voucher-list .mark:after {
    /*box-shadow: inset 0px 2px 6px #dfdfdf;*/
    bottom: -4px;
}
.mate-bonus-ticket.voucher-list .pic {
    width: 60px;
    flex: 0 0 60px;
    margin: 10px;
}
.mate-bonus-ticket.voucher-list .info {
    display: flex;
    padding: 0;
    margin: 0;
    align-items: center;
}
.mate-bonus-ticket.voucher-list .info .title {
    color: #000;
    font-size: 1rem;
    line-height: 1.3rem;
}
.mate-bonus-ticket.voucher-list .info .btn {
    font-size: 0.9rem;
    padding: 5px 8px;
    margin: 0 5px;
}

.mate-bonus-ticket2 {
    width: 100%;
}
.mate-bonus-ticket2 .text-bar {
    position: relative;
    color: #000;
    background: #f9eee5;
    padding: 0.75rem 1rem;
    margin-top: 15px;
    border: #f5ce73 1px solid;
    text-align: left;
    box-shadow: 0 1px 9px 1px rgb(0 0 0 / 7%);
}
.mate-bonus-ticket2 .text-bar span.icon {
    position: absolute;
    top: -11px;
    left: -11px;
    transform: rotate(-7deg);
    height: 22px;
    padding: 4px;
    z-index: 99;
    font-size: 0.8rem;
    border-radius: 5px;
    color: #FFF;
    background: #ff9800;
}
.mate-bonus-ticket2 .text-bar span.txt {
    color: #FFF;
    border-radius: 30px;
    padding: 2px 5px;
    background-color: #000;
    font-size: 0.9rem;
    margin-left: 5px;
}
@media (max-width: 768px) {
    .gift_filter_article {
        padding-right: 15px;
    }
    .privilege-row-list .media-btn-right {
        position: absolute;
        right: 11px;
        top: 10px;
        z-index: 50;
        margin: 0;
    }
    .privilege-row-list .media-right {
    }
    .privilege-row-list .pic {
        width: 120px;
    }
    .privilege-row-list .off .off-info-inner img {
        width: 30px !important;
    }
    .privilege-row-list .off .off-info .txt {
        font-size: 0.8rem !important;
    }
    .privilege-row-list .off .off-info .txt i {
        font-size: 1rem;
    }
    .privilege-row-list .privilege_content {
        position: absolute;
        z-index: 1;
        left: 15px;
        width: calc(100% - 30px);
        background: #f4f4f4;
        padding: 3px 10px;
        border-radius: 30px;
    }
    .privilege-row-list .media-right {
        position: relative;
        z-index: 10;
        width: 100%;
        text-align: right;
        margin-top: 8px;
        display: flex;
    }
    .privilege-row-list .media-right > a {
        width: 100%;
        border-radius: 30px;
    }
    .privilege-row-list .media-right .btn-outline-red {
        /*color: #FFF;
        background-color: #d4646b;
        border-radius: 30px;
        width: 100%;*/
    }
    .privilege-row-list .media-right .btn + .btn {
        margin-left: 10px;
        margin-top: 0;
    }
    .mate-bonus-ticket.voucher-list {
        margin: 10px 0 6px 0;
        order: 0;
    }
}




.line-box {
    border: #f4f4f4 1px solid;
}
.line-box .card-body {
    background: #FFF !important;
}
.womo_pc_header_nav .get_coin_notice {
    width: 135px !important;
}
@media (max-width: 767px) {
    html body .content .content-wrapper {
        padding: 2rem 7px 48px 7px !important;
    }
}


.notice-quick-btn-list {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 100px;
    border: #f2f2f2 1px solid;
    margin-bottom: 15px;
    transition: 0.3s;
    box-shadow: 1px 1px 6px rgb(0 0 0 / 6%);
}
.notice-quick-btn-list:hover {
    background: #f2f2f2;
    color: #000;
}
.notice-quick-btn-list:after {
    display: block;
    content: "\e929";
    font-family: feather!important;
    font-size: 2.3rem;
    color: #FFF;
    text-align: center;
    line-height: 45px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 60px;
    background: #E37929;
}
.notice-quick-btn-list .pic {
    width: 80px;
    height: 80px;
}
.notice-quick-btn-list .pic img {
    width: 100%;
}
.notice-quick-btn-list .txt {
    font-size: 1.1rem;
}
.notice-quick-btn-list .txt b {
    font-weight: normal;
    color: #E37929;
    display: block;
}
.notice-quick-btn-red .txt b {
    color: #d4646b;
}
.notice-quick-btn-red:after {
    background: #d4646b;
}
.badge-red {
    color: #FFF;
    background: #de6456;
}
.badge-org {
    background: #eca723;
}
.badge-green {
    background: #b5b526;
}
.badge-green2 {
    background: #76b44f;
}
.badge-green3 {
    background: #47b0b4;
}
.badge-blue {
    background: #4c6eae;
}
.badge-pure {
    background: #af3f88;
}
.badge-pink {
    background: #eb76a1;
}
.my_coin_notice_list .media {
    /*display: none;*/
    padding: 10px;
}
.my_coin_notice_list .media-th {
    background: #eeeeef;
}
.my_coin_notice_list .media-left {
    width: 74px;
    text-align: center;
}
.my_coin_notice_list .media-body .badge {
    margin-right: 5px;
    border-radius: 30px;
    padding: 5px 10px;
}
.my_coin_notice_list .media-body .date {
    color: #cbcbcb;
    font-size: 0.9rem;
}
.my_coin_notice_count {
    box-shadow: 1px 1px 6px rgb(0 0 0 / 10%);
    padding: 5px 15px;
    border-radius: 10px;
    margin: 20px 0 25px 0;
    background: #FFF;
}
.my_coin_notice_count_left span, .my_coin_notice_count_right a {
    display: block;
}
.my_coin_notice_count_left span {
    margin: 15px 0;
}
.my_coin_notice_count_right .btn {
    margin: 5px 0 !important;   
}
.my_coin_notice_count_left .status {
    color: #d4646b;
}
.my_coin_notice_count .my_coin_notice_count_right .btn-go-manage {
    color: #FFF;
    background: #d4646b;

}
.my_coin_notice_count.on .my_coin_notice_count_right .btn-go-manage {
    background: #61ab9a;
}
.my_coin_notice_count.on .my_coin_notice_count_left .status {
    color: #61ab9a;
}
.btn-green {
    color: #FFF;
    background: #61ab9a;
}
.btn-green:hover {
    color: #FFF;
    background: #408776;
}
.btn-yallow {
    color: #FFF;
    background: #e1ac1d;
}
.btn-yallow:hover {
    color: #FFF;
    background: #c39517;
}
.btn-outline-yallow {
    color: #e1ac1d;
    border-color: #e1ac1d;
}
.btn-outline-yallow:hover {
    color: #e1ac1d;
    border-color: #c39517;
}

.my_coin_notice_kind {
    max-width: 400px !important;
    border-radius: 10px;
    padding: 30px;
}
.my_coin_notice_kind h4 {
    background: #eeeeef;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1.2rem;
}
.my_coin_notice_kind_item {
    font-size: 1.1rem;
}
.my_coin_notice_kind .notice_kind_tag {
    margin-right: 10px;
}
@media (max-width: 376px) {
    .my_coin_notice_list .media .media-right {
        padding-left: 15px !important;
        width: auto !important;
        margin-top: 0 !important;
    }
}



/**/
.btn-add-brand {
    color: #1f9086;
    display: flex;
    align-items: center;
    margin: 20px 0 15px 15px;
    font-size: 1.2rem;
}
.btn-add-brand i {
    color: #FFF;
    background: #1f9086;
    margin-right: 10px;
    border-radius: 30px;
    padding: 5px;
    font-size: 1.4rem;
}
.btn-how-addbrand {
    position: absolute;
    right: 15px;
    top: 26px;
    color: #8d8d8d;
    display: flex;
    align-items: center;
}
.btn-how-addbrand:hover {
    text-decoration: underline;
}
.btn-how-addbrand i {
    margin-right: 3px;
}
.table-store-account table {
    margin-bottom: 0;
}
.table-store-account .pic img {
    width: 60px;
    margin-right: 10px;
}
.table-store-account .btn {
    padding: 10px 15px;
}
.table-store-account thead {
    background: #f2f2f2;
}
.table-store-account table tr:last-child td {
    border: 0 !important;
}
.table-store-account td:first-child {
    padding-left: 15px;
}
@media (max-width: 413px) {
    .table-store-account .pic img {
        width: 42px;
        margin-right: 3px;
    }
}
@media (max-width: 374px) {
    .btn-how-addbrand {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        text-align: right;
        width: 100%;
        padding: 5px;
    }
}
.txt-red {
    color: #d4646b !important;
}
.txt-black {
    color: #000 !important;
}

/**/
.po-title .title-mark {
    color: #FFF;
    /*background: #D4762B;*/
    background: #cd506e;
    margin: -8px 0 -8px -10px;
    padding: 10px;
    display: flex;
    align-items: center;
}
.po-title .title-mark i {
    width: 25px;
}
.privilege_info_two_col .title-mark {
    width: 112px !important;
}
.privilege-intro-list-block {
    background: #f2f2f2;
    border-radius: 7px;
    padding: 10px 30px;
    max-width: 500px;
}
.privilege-intro-list-block img {
    max-width: 100%;
}
.privilege-intro-block h3 {
    font-size: 1.5rem;
    margin: 30px 0 20px 0;
    line-height: 2.3rem;
}
.privilege-intro-block h3 .txt-s {
    font-size: 1.3rem;
}
.privilege-intro-list {
    font-size: 1.3rem;
    color: #000;
    margin: 10px 0;
}
.privilege-intro-list .w-coins-pic {
    margin: 0 20px 0 10px;
}

.privilege-list .btn-area.btn-area2 {
    display: flex;
}
.privilege-list .btn-area.btn-area2 .btn.btn-block + .btn.btn-block {
    margin-top: 0;
}

/*================================================================================
    common
================================================================================*/
li {
    list-style: none;
}
.help-block ul {
  margin: 0  !important;
  padding: 0 !important;
}
.help-block ul li {
    list-style: none; 
    color: #cc9b9b;
}

.btn-ss {
    padding: 3px 6px !important;
}
.fixed-top {
    z-index: 9996 !important;
}
.badge-danger.badge-glow {
    box-shadow: 0px 0px 5px #ff4961a6;
    font-size: 0.8rem !important;
}
.nav-sub-tabs .badge-up {
    position: static;
}
.badge-outline-danger {
    border: #ecacb5 1px solid;
    background: #FFF;
    color: #e97d8b;
}
.badge-outline-danger i {
    margin-right: 3px;
}
.bg-border-red {
    background: #fcf7f7 !important;
    border: #ffd2d2 1px solid !important;
}
.fancybox-navigation {
    /*display: none !important;*/
}
.fancybox-navigation .fancybox-button {
    opacity: 0.5 !important;
    background: transparent !important;
}
.fancybox-navigation .fancybox-button > div{
    background: rgba(30, 30, 30, .6);
    border-radius: 100%;
}
.fancybox-navigation .fancybox-button[disabled] {
    display: none;
}

/*login & register*/
.login-logo {
    
}
.login-logo img {
    width: 100%;
    max-width: 400px
}
.login-logo-b img {
    width: 180px;
}
.phone-login-block.off, 
.social-login-block.off {
    display: none;
}
.login-slogn-txt-block {
    margin: 3rem 0;
    text-align: center;
}
.login-slogn-txt-block h2 {
    font-size: 2rem;
    letter-spacing: 2px;
    color: #6d6d6d;
}
@media (max-width: 676px) {
    .login-logo {
        margin-top: 10%;
    }
    .login-slogn-txt-block {
        margin: 2rem 0;
    }
    .login-slogn-txt-block h2 {
        font-size: 1.5rem;
    }
}
@media (max-width: 374px) {
    .login-slogn-txt-block h2 {
        font-size: 1.2rem;
    }
}
.login-slogn-txt-block span {
    color: #e06c1a;
    margin-left: 5px;
    letter-spacing: 2px;
}
.mycoin-feature-txt-block {
    background: #FFF;
    border-radius: 15px;
    padding: 20px 10px 10px 10px;
    margin-bottom: 30px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 5%);
}
.mycoin-feature-txt-block h3 {
    padding-bottom: 15px;
    margin: 0 -10px;
    border-bottom: #f3f3f3 2px solid;
}
.mycoin-feature-txt-block .txt-tip {
    background: #fff0f0;
    padding: 3px 0;
    border-radius: 6px;
    margin-top: 20px;
    margin-bottom: 0;
    color: #cf4c4c;
    text-align: center;
}
.mycoin-feature-txt ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0;
    justify-content: space-around;
}
.mycoin-feature-txt ul li {
    /*width: 47%;
    background: #FFF;*/
    border-radius: 30px;
    font-size: 1.2rem;
    text-align: center;
}
@media (max-width: 374px) {
    .mycoin-feature-txt ul li {
        width: 50%;
        margin: 5px 0;
    }
}
.mycoin-feature-txt ul li span {
    display: block;
}
.mycoin-feature-txt ul li .icon {
    margin-bottom: 2px;
}
.mycoin-feature-txt ul li .icon img {
    height: 60px;
}
.mycoin-feature-txt ul li i {
    /*color: #25be13;*/
    color: #ea9d3f;
    font-size: 1rem;
    margin-right: 3px;
}
.icon-avatar-price {
    position: absolute;
    right: -32px;
    bottom: -10px;
    /*width: 48px;
    height: 76px;*/
    width: 58px;
    height: 90px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_avatar_price.svg) no-repeat;
    background-size: 100%;
    z-index: 10;
}
.icon-avatar-price:after {
    position: absolute;
    content: " ";
    /*width: 22px;
    height: 23px;
    top: 27px;
    left: 10px;*/
    width: 26px;
    height: 25px;
    top: 35px;
    left: 14px;
    transform: rotate(-15deg);
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/coin_womo2.svg) no-repeat;
    background-size: cover;
}
.add-mycoin-service-fancybox {
    padding: 15px;
}
.my_coin_header .icon-avatar-price {
    right: -39px;
    bottom: 10px;
    width: 54px;
    height: 90px;
    transform: rotate(-31deg);
}
.my_coin_header .icon-avatar-price:after {
    width: 21px;
    height: 20px;
    top: 28px;
    left: 12px;
}
.icon-avatar-price2 {
    position: absolute;
    right: -98px;
    bottom: -8px;
    width: 130px;
    height: 45px;
    transform: rotate(19deg);
    background: url(../images/icon/icon_avatar_price2.svg) no-repeat;
    background-size: 100%;
    z-index: 10;
    padding: 2px 10px 0 36px;
}
.icon-avatar-price2 .txt {
    font-size: 1.8rem;
    color: #FFF;
    margin: 0 10px;
}
.icon-avatar-price2 img {
    width: 20px;
}
.form-privacy_policy label {
    display: inline;
}


/*ks-cboxtags*/
ul.ks-cboxtags {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}
ul.ks-cboxtags li{
    width: 33.33%;
    padding: 0 5px;
}
ul.ks-cboxtags li label{
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid rgba(139, 139, 139, .3);
    color: #adadad;
    border-radius: 10px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}
ul.ks-cboxtags li label {
    padding: 8px 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 2px solid #f3b485;
    background-color: #e3792a;
    color: #fff;
    transition: all .2s;
}
ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
  border: 2px solid #f3b485;
}
.btn-return a {
    color: #a1a1a1;
    text-decoration: underline;
}



.sendloading-block {
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(0 0 0 / 70%);
    cursor: wait;
    position: fixed;
    opacity: 0;
    z-index: -1;
}
.sendloading-block.on {
    opacity: 1;
    /*z-index: 999999 !important;*/
    z-index: 10000 !important;
}
.sendloading-block-inner {
    position: fixed;
    padding: 0px;
    margin: 0px;
    width: fit-content;
    /*top: 40%;
    left: 35%;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #FFF;
    z-index: 999998 !important;
}
.sendloading-block-inner .load-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/logo_s.png) no-repeat;
    background-size: 100%;
}
.sendloading-block-inner .load-txt {
    display: block;
}
.sendloading-block-inner .w-coins-pic {
    position: relative;
    width: 250px !important;
    height: 250px !important;
    padding: 11% !important;
}
.sendloading-block-inner .w-coins-pic:after, 
.sendloading-block-inner .ai-pic:after {
    content: " ";
    position: absolute;
    top: 11%;
    left: 11%;
    width: 78%;
    height: 78%;
    border-radius: 97%;
    background: #000;
}
.sendloading-block-inner .w-coins-pic img, 
.sendloading-block-inner .ai-pic img {
    position: relative;
    opacity: 0.3;
    z-index: 9;
}
.sendloading-block-inner .w-coins-pic .load-txt, 
.sendloading-block-inner .ai-pic .load-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;   
}
.sendloading-block-inner .w-coins-pic .load-txt .txt, 
.sendloading-block-inner .ai-pic .load-txt .txt {
    white-space: nowrap;
}

.sendloading-block-inner .ai-pic {
    position: relative;
    width: 250px !important;
    height: 250px !important;
}
.sendloading-block-inner .ai-pic img {
    width: 100%;
}

span[class^="dot-"]{
  opacity: 0;
}
.dot-one{
  animation: dot-one 2s infinite linear
}
.dot-two{
  animation: dot-two 2s infinite linear
}
.dot-three{
  animation: dot-three 2s infinite linear
}
@keyframes dot-one{
  0%{
    opacity: 0;
  }
  15%{
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

@keyframes dot-two{
  0%{
    opacity: 0;
  }
  25%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

@keyframes dot-three{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  75%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}
.creat_ai_pic_block {
    background-color: rgb(0 0 0 / 90%);
}
.creat_ai_pic_block.active {
    cursor: pointer;
}
.creat-aipic-success {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    top: 0;
    left: 0;
    padding: 11%;
    transition: 0.3s;
}
.creat-aipic-success.on {
    visibility: visible;
    opacity: 100;
    z-index: 150;
}
.creat-aipic-success img {
    opacity: 1 !important;
}
.creat-aipic-txt-success {
    display: none;
}
.creat-aipic-txt-success.on {
    display: block;
}
.creat-aipic-txt-success .title-bar {
    color: #66be34;
    margin: 30px 0;
}


.blockUI {
    z-index: 999999 !important;
}
.blockUI.blockOverlay {
    z-index: 999998 !important;
}
.blockUI.blockPage {
    color: #FFF !important;
    text-align: center;
    border: 0 !important;
    background: none !important;
}
.blockUI .load-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/logo_s.png) no-repeat;
    background-size: 100%;
}
.blockUI .load-txt {
    display: block;
}


.po-area-block {
    padding: 15px;
    margin-top: 15px;
}
.po-area-block .pic {
    z-index: 11;
    position: relative;
    flex: 0 0 60px;
}
.po-area-block .pic img {
    width: 50px;
}
.po-area-block .pic .icon-avatar-price {
    position: absolute;
    width: 30px;
    height: 50px;
    right: -19px;
    bottom: -5px
}
.po-area-block .pic .icon-avatar-price:after {
    width: 16px;
    height: 15px;
    top: 17px;
    left: 6px;
}
.po-area-block .media {
    align-items: center;
}
.po-area-block .btn-go-po {
    flex: 1;
}
.po-area-block .btn-go-po a {
    width: 100%;
    height: 40px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    border-bottom-left-radius: 0 !important;
    border-width: 0;
    background: #f4e9e9;
    outline: 0;
    display: flex;
    align-items: center;
    margin-left: -20px;
    padding-left: 45px;
}
.po-area-block .txt {
    position: relative;
    color: #595757;
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 45px;
    color: #FFF;
    height: 40px;
    background: #ea5848;
    border-top-left-radius: 100px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 100px;
    margin-left: -50px;
    z-index: 10;
    line-height: 1.2rem;
}
.po-area-block .txt:before, .po-area-block .txt:after {
    content: '';
    position: absolute;
    right: -9px;
    border-right: 10px solid transparent;
}
.po-area-block .txt:before {
    border-top: 27px solid #ea5849;
    top: 0;
}
.po-area-block .txt:after {
    border-bottom: 27px solid #ea5849;
    bottom: 0;
}
.po-area-block .user-price {
    font-size: 1.7rem;
    color: #ea5849;
    margin: 0 10px 0 20px;
    display: flex;
    align-items: center;
    
}
.po-area-block .user-price span {
    font-size: 1rem;
    margin-left: 2px;
}
.po-area-block .user-price span img {
    width: 20px;
    margin-left: 5px;
}
.btn-po-gpt {
    padding: 0;
    color: #FFF;
    width: 30px;
    height: 30px;
    background: #E37929;
    border-radius: 30px;
    margin-left: -10px;
    z-index: 10;
}
.btn-po-gpt img {
    width: 100%;
}
.article-po-fancybox {
    background: transparent;
    padding: 0;
}
.article-po-fancybox h4 {
    color: #FFF;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    letter-spacing: 1px;
}
.dialog-box {
    position: absolute;
    top: 6px;
    right: -20px;
    transform: translateX(-50%) rotate(15deg);
    height: 22px;
    padding: 4px;
    z-index: 99;
    font-size: 0.8rem;
    border-radius: 5px;
    color: #FFF;
    background: #ff9800;
}
.dialog-box:after {
    position: absolute;
    display: block;
    content: " ";
    bottom: -12px;
    left: 50%;
    margin-left: -6px;
    border: solid transparent;
    border-top: 12px solid #ff9800;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.po-quick-btn-list {
    width: 100vw;
    max-width: 320px;
}
@media (max-width: 374px) {
    .po-quick-btn-list {
        max-width: 100%;
    }
}
.po-quick-btn-list a {
    position: relative;
    display: flex;
    align-items: center;
    background: #FFF;
    padding: 0 30px 0 0;
    border-radius: 50px;
    margin-bottom: 20px;
    transition: 0.3s;
    color: #000;
    font-size: 1.2rem;
}
.po-quick-btn-list a:hover {
    transform: scale(1.05);
}
.po-quick-btn1 {

}
.po-quick-btn-list .pic {
    margin: -5px 0;
    margin-right: 10x;
}
.po-quick-btn-list .pic img {
    width: 80px;
}
.po-quick-btn-list .txt {
    flex: 1;
}
.po-quick-btn-list .txt b {
    display: block;
    color: #E37929;
}
.po-quick-btn-list .icon {
    margin-right: -15px;
}
.txt-org {
    color: #E37929;
}
.po-quick-sub-list {
    padding-left: 60px;
}
.po-quick-sub-list a {
    padding: 10px 20px;
    margin-bottom: 15px;
}
.po-quick-sub-list a .pic {
    margin-right: 15px;
}
.po-quick-sub-list a .pic img {
    width: 45px;
}
.article-po-fancybox .fancybox-close-small {
    background: #666565 !important;
    right: -10px !important;
    top: -50px !important;
}


.icon_womo_gift_tab {
    width: 100%;
    height: 40px;
    background-repeat: no-repeat;
    background-size: auto 200%;
    background-position: center top;
}
.nav-tabs.nav-icon2 .nav-item .nav-link {
    color: #AFAFB0;
}
.nav-tabs.nav-icon2 .nav-item .nav-link:hover, 
.nav-tabs.nav-icon .nav-item .nav-link.active {
    color: #C8506D;
}
.nav-tabs.nav-icon .nav-item .nav-link, 
.nav-tabs.nav-icon .nav-item .nav-link:active {
    outline: 0;
}
.nav-icon .nav-link:hover .icon_womo_gift_tab, 
.nav-icon .nav-link.active .icon_womo_gift_tab {
    background-position: center bottom;
}
.nav-tabs.nav-icon .nav-item .nav-link i.icon_womo_gift_tab {
    margin-bottom: 0;
}
.icon_womo_gift_tab1 {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_womo_gift_tab1.svg);
}
.icon_womo_gift_tab2 {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_womo_gift_tab2.svg);
}
.icon_womo_gift_tab3 {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_womo_gift_tab3.svg);
}
.icon_womo_gift_tab4 {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_womo_gift_tab4.svg);
}
.icon_womo_gift_tab5 {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_womo_gift_tab5.svg);
}
.icon_womo_gift_tab6 {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_womo_gift_tab6.svg);
}
@media (max-width: 768px) {
    .btn-po-gpt .txt {
        /*display: none;*/
    }
}

.polist_block .po-message-list .txt .tag-txt {
    display: none;
}
.polist-media {
    margin: 0 -7px 0 -7px;
    background: #fff;
    border-bottom: #f4f5fa 5px solid;
}
@media (min-width: 768px) {
    .polist-media {
        margin: 0 0 10px 0;
        border-radius: 0.5rem;
        box-shadow: 0 8px 30px rgba(0,0,0,.05);
        border-bottom: 0;
    }
    .user-profile-block .polist-media {
        border-radius: 0;
    }
}
.po-header {
    display: flex;
    align-items: center;
    padding: 6px 15px;
}
.po-header .pic {
    margin: 5px 10px 5px 0;
}
.po-header .pic img {
    width: 40px;
}
.po-header .pic .m-coins-pic, 
.po-header .pic .w-coins-pic, 
.po-header .pic .coins-pic {
    display: inline-block;
    width: 45px;
    height: 45px;
    padding: 6px;
}
.po-header .wm-coins {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin-top: -2px;
}
.po-header .wm-coins img {
    height: 14px;
    margin-left: 3px;
}
.po-header .wm-coins .txt {
    font-size: 0.8rem
}
.po-header .wm-coins .num {
    margin-left: 3px;
}
.po-header .feeling-pic img {
    width: 20px;
    margin-left: 5px;
    margin-top: -3px;
}
.badge-award-money {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}
.badge-award-money:after {
    position: absolute;
    top: 0;
    right: 0;
    content: " ";
    display: block;
    border-top: 80px solid #f8960e;
    border-left: 100px solid transparent;
}
.badge-award-money .badge {
    transform: rotate(38deg);
    position: relative;
    background-color: transparent;
    font-size: 0.9rem;
    padding: 6px 6px 4px 6px;
    z-index: 10;
    position: absolute;
    top: 7px;
    right: -17px;
}
.badge-award-money .badge i:after {
    font-weight: bold;
    color: #f8960e;
}
.badge-award-money .num {
    display: block;
    font-size: 1.4rem;
    margin-top: 3px;
    width: 80px;
}
.badge-award-money .num.num-zh {
    font-size: 1.2rem;
}
.po-gallery {
    position: relative;
    z-index: 1;
}
.po-gallery .swiper-wrapper {
    height: auto !important;
}
.po-gallery > a {
    display: block;
    position: relative;
    cursor: pointer;
}
.po-gallery > .off-info {
    z-index: 99;
}
.po-gallery-img {
    width: 100%;
    padding-bottom: 75%;
    background-position: center center;
    background-size: cover;
}
.po-gallery iframe {
    width: 100%;
}
.off .po-gallery-swiper .swiper-wrapper {
    background-color: #000;
}
.gallery_swiper_video {
    position: relative;
    /*padding-bottom: 56.25%;*/
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.gallery_swiper_video_shorts {
    padding-bottom: 178%;
}
.gallery_swiper_video_shorts.gallery_swiper_pic .bg {
    padding-bottom: 178%;
    background-color: #646464;
}
.gallery_swiper_video_tiktok {

}
.gallery_swiper_video_tiktok.gallery_swiper_pic .bg {
    
}

.gallery_swiper_video iframe, .gallery_swiper_video object, .gallery_swiper_video embed {
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
}
.gallery_swiper_video .tiktok-embed {
    max-width: 100%; 
    position: absolute;
    height: 100%;
    margin: 0;
}
/*.off > .po-gallery:after {
    color: #FFF;
    font-size: 1.2rem;
    content: "關閉中";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    z-index: 10;
}*/
.off .off-info, .disabled_cover .off-info {
    height: 100%;
    /*height: calc(100% - 80px);*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.off .off-info + .off-info {
    z-index: 1;
}
.polist-media.off .off-info {
    height: calc(100% - 56px);
}
.polist-media .po-gallery.off > .galleryvideo_link .off-info {
    height: 100%;
}
.polist-media .po-gallery.off > .galleryvideo_link .off-info:after {
    background-color: rgb(0 0 0 / 40%);
}
.polist-media .po-article-content {
    padding: 5px 15px;
    font-size: 15px;
    line-height: 23px;
    white-space: pre-line;
}
.polist-media .po-article-content p {
    margin-bottom: 1.5rem;
}
.polist-media .po-article-content h3 {
    font-size: 18px;
}
.polist-media .po-article-content a {
    color: #1877F2;
}
.off .off-info-inner, .disabled_cover .off-info-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    z-index: 30;
    color: #FFF;
    font-size: 1rem;
    text-align: center;
}
.off .off-info-inner, .disabled_cover .off-info-inner img {
    /*width: 80px;*/
    width: fit-content;
}
.off .off-info-inner img, .disabled_cover .off-info-inner img {
    width: 80px !important;
}
.off .off-info i, .disabled_cover .off-info i {
    font-size: 1.6rem;
}
.off .off-info span, .disabled_cover .off-info span {
    display: block;
}
.off .off-info:after, .disabled_cover .off-info:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 20;
    background-color: rgb(0 0 0 / 60%);
}
.secret-icon-info .txt, 
.off .off-info .txt {
    font-size: 1.1rem;
    margin-top: 10px;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
}
.secret-icon-info .txt i, 
.off .off-info .txt i {
    margin-right: 5px;
}
.privilege-list.off .off-info:after {
    /*height: calc(100% - 80px);*/
    height: 100%;
}
.off .po-gallery-swiper .swiper-wrapper .swiper-slide {
    /*opacity: 0.5;*/
}
.coupon_exchange_img.off .off-info, 
.mycoupon-kol-list .coupon-pic.off .off-info {
    height: 100% !important;
}
@media (max-width: 768px) {
    .privilege-list .media-header .media-right {
        margin-right: 10px;
    }
    .store-privilege-block .privilege_content {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}
.po-gallery-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.po-gallery-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.po-title {
    display: flex;
    position: relative;
    z-index: 100;
    width: 100%;
    color: #000;
    padding: 8px 10px;
    /*align-items: center;*/
    /*background: rgb(0 0 0 / 70%);*/
    background: rgb(255 240 240);
}
.po-title.bg-black {
    position: absolute;
    bottom: 0;
    align-items: center;
    background-color: color(srgb 0 0 0 / 0.4) !important;
}
.po-title.bg-black .title, .po-title.bg-black .title a {
    color: #FFF;
}
.po-title.bg-black .txt {
    margin-left: 0;
}
.po-title.bg-black .title a span {
    display: block;
}
.polist-media2 .gallery_pagination {
    bottom: 55px !important;
}
.bg-black .store-name, .bg-black .store-name a {
    color: #FFF !important;
}
.polist-media2 .info-box {
    position: relative;
    z-index: 1000;
}
.polist-media2 .author {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    color: #FFF;
}
.polist-media2 .author .outline-pic {
    display: inline-block;
    width: 30px;
    border-radius: 30px;
    border: #FFF 2px solid;
}
.polist-media2 .author .outline-pic img {
    width: 100% !important;
}
.polist-media-video .po-title {
}
.po-title .pic {
    /*align-self: flex-start;*/
}
.po-title .pic img {
    width: 40px;
}
.po-title .store-name, 
.po-title .store-name a {
    color: #FFF;
    font-size: 0.8rem;
    /*color: #C8506D;*/
    color: #787878;
    text-decoration: underline;
    margin-top: 1px;
}
.po-title .title a {
    color: #000;
}
.po-title .title a i {
    position: relative;
    top: 2px;
    color: #d4762c;
    font-size: 1.2rem;
    margin-left: 5px;
}
.po-title .txt {
    flex: 1;
    margin: 0 10px 0 10px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.po-title .right {
    align-self: center;
}
.po-title .btn-get {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    height: 31px;
    padding: 3px 10px;
    border-radius: 30px;
    margin-top: 5px;
    white-space: nowrap;
}
.po-title .btn-get-org {
    background: #D4762B;
}
.po-title .btn-get-red {
    background: #C8506D;
}
.po-title .btn-get-gray {
    background: #838383;
}
.po-title .btn-get:first-child {
    margin-top: 0;
}
.po-title .btn-get.active {
    background: #797979;
}
.po-title .btn-get i {
    width: 25px;
}

.polist-media-show .po-title {
    /*background-color: rgb(255 255 255 / 60%);*/
}
.po-title-author {
    position: relative;
    bottom: 0;
    background: rgb(0 0 0 / 60%);
    align-items: center;
}
.po-title-author .store-name, 
.po-title-author .store-name a, 
.po-title-author .title, 
.po-title-author .title a {
    color: rgb(255, 255, 255) !important;
}
.po_author_list {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}
.po_author_list .po_author_item {
    position: relative;
    margin: 0 5px;
}
.po_author_list .po_author_item:after, .po-message-priority .pic:after {
    position: absolute;
    top: -10px;
    right: -10px;
    content: " ";
    display: block;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_chat_outline.svg) no-repeat;
    width: 20px;
    height: 20px;
    background-size: 100%;
}
.po-message-priority .message-reply-list .pic:after {
    display: none;
}
.po_author_list .po_author_item.on:after {
    display: none;
}
.po_author_list .coin-small {
    width: 40px;
    height: 40px;
}
.po_author_list .po_author_item .pic {
    position: relative;
}
.po_author_list .po_author_item .po_author_dialog_txt:after, 
.po_author_list .po_author_item .po_author_dialog_txt:before {
    position: absolute;
    display: block;
    content: " ";
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border: solid transparent;
    border-top: 8px solid #FFF;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    z-index: 10;
}
.po_author_list .po_author_item .po_author_dialog_txt:before {
    z-index: 9;
    bottom: -10px;
    border-top-color: #000;
}
.po_author_list .pic img {
    border: #FFF 2px solid;
}
.po_author_list .po_author_dialog_txt {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    color: #6c6c6c;
    background: #FFF;
    border-radius: 44px;
    width: 150px;
    border: #000 2px solid;
    box-shadow: 1px 1px 7px rgb(0 0 0 / 50%);
}
.po_author_list .po_author_dialog_txt a.user_name {
    display: inline-block;
    text-decoration: underline;
    margin-right: 5px;
}
.gallery-fancybox-box .po_author_list .po_author_item:first-child .po_author_dialog_txt {
        left: 0;
        transform: translateX(0);
        border-bottom-left-radius: 48px;
}
.gallery-fancybox-box .po_author_list .po_author_item:first-child .po_author_dialog_txt .txt {
        border-bottom-left-radius: 48px;
}
.gallery-fancybox-box .po_author_list .po_author_item:first-child .po_author_dialog_txt:after, 
.gallery-fancybox-box .po_author_list .po_author_item:first-child .po_author_dialog_txt:before {
        left: 15px;
        transform: translateX(0);
        border-top-width: 15px;
}
.gallery-fancybox-box .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt {
        left: initial;
        right: -10px;
        transform: translateX(0);
        border-bottom-right-radius: 48px;
}
.gallery-fancybox-box .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt .txt {
        border-bottom-right-radius: 48px;
}
.gallery-fancybox-box .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt:after, 
.gallery-fancybox-box .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt:before {
        left: initial;
        right: 25px;
        transform: translateX(0);
        border-top-width: 15px;
}
.po_author_list .po_author_item.on .po_author_dialog_txt {
    display: block;
}
.po_author_list .po_author_dialog_txt .txt {
    position: relative;
    display: block;
    padding: 15px;
    margin: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 60px;
    word-break: break-all;
    white-space: pre-line;
    z-index: 11;
}
.btn_dialog_close {
    position: absolute;
    top: -3px;
    right: -6px;
    color: #FFF;
    background: #000;
    text-align: center;
    line-height: 25px;
    border-radius: 30px;
    width: 25px;
    height: 25px;
    z-index: 15;
}
@media (max-width: 768px) {
    .po_author_list .po_author_item:first-child .po_author_dialog_txt {
        left: 0;
        transform: translateX(0);
        border-bottom-left-radius: 48px;
    }
    .po_author_list .po_author_item:first-child .po_author_dialog_txt .txt {
        border-bottom-left-radius: 48px;
    }
    .po_author_list .po_author_item:first-child .po_author_dialog_txt:after, 
    .po_author_list .po_author_item:first-child .po_author_dialog_txt:before {
        left: 15px;
        transform: translateX(0);
        border-top-width: 15px;
    }
    .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt {
        left: initial;
        right: -10px;
        transform: translateX(0);
        border-bottom-right-radius: 48px;
    }
    .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt .txt {
        border-bottom-right-radius: 48px;
    }
    .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt:after, 
    .po_author_list .po_author_item:nth-child(6) .po_author_dialog_txt:before {
        left: initial;
        right: 25px;
        transform: translateX(0);
        border-top-width: 15px;
    }
}
@media (max-width: 413px) {
    .po_author_list {
        overflow-x: auto;
        padding-top: 150px;
        padding-right: 15px;
        margin-top: -150px;
        margin-right: 15px;
        pointer-events: none;
    }
    .po_author_list .po_author_item {
        pointer-events: visible;
    }
}



/*#priority-add-message-fancybox*/
#priority-add-message-fancybox .form-group .mess-text {
    width: 100vw;
    max-width: 500px;
    max-height: 250px;
}
.d-flex-align-items-end {
    display: inline-flex;
    align-items: end;
}

.po-total {
    display: flex;
    padding: 8px 15px;
}
.po-total .num {
    flex: 1;
    display: flex;
    align-items: center;
}
.other-num-right {
    font-size: 0.95rem;
    margin-top: 2px;
}
.po-total .other-num-right span {
    display: inline-block;
    color: #7d7d7e;
}
.po-total .other-num-right span a {
    color: #7d7d7e;
}
.po-btn {
    display: flex;
    padding: 6px;
    margin: 0 5px;
    align-items: center;
    justify-content: flex-end;
    border-top: #E9E9EA 1px solid;
    border-bottom: #E9E9EA 1px solid;
}
.po-btn a.po-btn-leavemess, 
.po-btn a.po-btn-share, 
.po-btn a.po-btn-like, 
.po-btn a.po-btn-good, 
.po-btn a.po-btn-icon {
    display: flex;
    align-items: center;
    height: 20px;
    color: #8a8a8a;
    padding: 0 5px 0 20px;
    margin: 5px 0;
    background-repeat: no-repeat;
    background-size: auto 40px;
    background-color: transparent;
}
.po-btn a.po-btn-icon {
    display: flex;
    padding-left: 0;
}
.po-btn a.po-btn-icon span {
    display: flex;
    align-items: center;
}
.po-btn a.po-btn-icon iconify-icon {
    font-size: 1.7rem;
    color: #99999a;
    margin-top: -2px;
}
.po-btn a.po-btn-icon:hover iconify-icon, 
.po-btn a.po-btn-icon.active iconify-icon {
    color: #C8506D;
}
.po-btn a + a {
    margin-left: 5px !important;
}
.po-btn a span {
    display: none;
}
.po-btn .po-btn-right {
    margin-left: auto;
}
.po-btn .po-btn-right a span {
    display: block;
}
.po-btn .btn {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px 0;
}
.po-btn .btn:hover {
    color: #FFF;
}
.po-btn .btn.btn-color:hover {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px 0;
}
.po-btn .btn.btn-coin-left {
    padding-left: 40px !important;
}
.po-btn a.btn-givesocial, 
.po-btn a.btn-buycoin, 
.po-btn a.btn-outline-warning {
    display: block;
    margin-right: auto;
    margin-top: 0;
}
.po-btn2 a.btn-givesocial, 
.po-btn2 a.btn-buycoin, 
.po-btn2 a.btn-outline-warning {
    margin-left: auto;
    margin-right: 0;
    order: 1;
}
.po-btn a.po-btn-leavemess {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_po_btn_message.svg);
}
.po-btn a.po-btn-share {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_po_btn_share.svg);
}
.po-btn a.po-btn-like {
    padding-left: 20px;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_po_btn_favor.svg);
}
.po-btn a.po-btn-good {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_po_btn_good.svg);
}
.po-btn a:hover, .po-btn a.active {
    color: #C8506D;
    background-position: 0 bottom;
}
a.btn-givesocial {
    border: #FF9149 1px solid;
    color: #FF9149;
    border-radius: 30px;
    padding: 5px 14px 5px 30px;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/low-temperature-thermometer_org.svg);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 20px;
}
a.btn-givesocial:hover, .show > .btn-givesocial.dropdown-toggle {
    color: #FFF;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/low-temperature-thermometer_w.svg);
    background-color:  #FF9149;
    background-position: 8px center;
    background-size: 20px;
}
.btn-buycoin {
    height: 33px;
    line-height: 16px;
    font-size: 1rem;
}
.po-message-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 20px 0 20px;
    margin-bottom: -25px;
}
.po-message-list .pic {
    position: relative;
}
.po-message-list .right {
    padding: 10px 0 10px 15px;
    flex: 1;
}
.po-message-list .right .tag-name {
    margin-top: 5px;
}
.po-message-list .right .tag-name a, 
.po-message-list .right .tag-name span {
    color: #1877F2;
    margin-right: 7px;
}
.po-message-list .pic img, 
.po-message-reply .pic img {
    width: 40px;
}
.po-message-list .txt {
    word-break: break-all;
    white-space: pre-line;   
}
.po-message-list .txt.txt-block {
    position: relative;
    word-break:initial;
    white-space: initial;
}
.po-message-list .txt .name {
    display: inline-block;
    margin-right: 10px;
}
.po-message-reply {
    display: flex;
    align-items: center;
    /*padding: 0 20px 20px 20px;*/
    padding: 30px 20px 20px 20px;
    margin-top: -15px;
}
.po-message-reply .pic {
    margin-right: 10px;
}
.po-message-reply .pic a {
    position: relative;
    display: flex;
    align-items: center;
}
.po-message-reply .pic a .icon-bg {
    display: block;
    background-color: #FFF;
    color: #185d9a;
    position: absolute;
    right: -9px;
    bottom: 0;
    font-size: 1.6rem;
    border-radius: 20px;
    line-height: 0;
    z-index: 10;
}
.po-message-reply .dropdown-menu-exchange-user {
    overflow: auto;
    max-height: calc(100vh - 60px);
}
.po-message-reply .dropdown-menu-exchange-user span.h-bar {
    display: block;
    padding: 5px 10px;
}
.po-message-reply .dropdown-menu-exchange-user a {
    padding: 5px 10px;
}
.po-message-reply .dropdown-menu-exchange-user img {
    width: 30px;

}
.po-message-reply .txt {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 30px;
}
.po-message-reply .txt a.no-login {
    color: #99999A;
    margin-left: 5px;
}
.po-message-reply button {
    display: none;
    border: 0;
    outline: 0;
    white-space: nowrap;
    background: none;
    /*color: #FFF;
    background: #C8506D;
    border-radius: 30px;
    padding: 2px 5px;*/
    font-size: 0rem;
    text-indent: -99999px;
}
.po-message-reply button:before {
    display: block;
    content: " ";
    width: 25px;
    height: 23px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_message_send.svg) no-repeat;
    background-size: 100%;
    margin-top: 2px;
}
.po-message-reply button.active {
    display: block;
}
.po-message-reply textarea, 
.po-message-reply .mess-text {
    /*border: 0;*/
    width: 100%;
    height: 30px;
    max-height: 80px;
    overflow: auto;
    padding: 5px;
    border: 0;
    outline: 0;
    resize: none;
    background: #FFF;
}
.po-message-reply .txt textarea::placeholder {
    color: #CCC;
}

.home_polist_block .po-message-list .right, 
.polist_block .po-message-list .right {
    padding: 0 0 25px 0;
}
.home_polist_block .po-message-list .pic, 
.polist_block .po-message-list .pic {
    display: none;
}
.home_polist_block .po-message-list .txt, 
.polist_block .po-message-list .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-overflow-scrolling: touch;
    max-height: 61px;
    margin-bottom: 5px;
}
.home_polist_block .po-message-list, 
.polist_block .po-message-list {
    margin-bottom: 0;
}
.home_polist_block .po-message-reply, 
.polist_block .po-message-reply {
    display: none !important;
}

.act-label-group label a {
  color: #000;
  text-decoration: none;
}

.act-label-group .badge {
  margin-right: 5px;
  margin-bottom: 10px;
  padding: 5px 10px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
}

.act-label-group .badge a {
    display: inline-block;
  color: #cc4f6d !important;
  margin-left: 5px;
  margin-right: -5px;
  height: 16px;
  font-size: 1.2rem;
}
.act-label-group .badge a i {
    margin-left: 0;
    font-size: 1rem;
    top: 0;
}
.badge-outline-red {
  color: #cc4f6d !important;
  border: #cc4f6d 1px solid;
  background-color: #f2dcdc;
}

.tag-user-list-block {
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
    bottom: 0px;
    transform: translateY(100%);
    border: #D4762B 1px solid;
    background: #FFF;
    border-radius: 5px;
    max-height: 200px;
    overflow: auto;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    word-break: initial;
    white-space: initial;
}
.polist-media:last-child .tag-user-list-block, 
.fancybox-content .tag-user-list-block {
    /*top: inherit;
    bottom: 30px;
    transform: translateY(0);*/
    top: 0;
    transform: translateY(-100%);
    min-height: 200px;
}
.fancybox-content .media.tag-user-list {
    margin: 0;
    padding: 0;
}
.tag-user-list-block.on {
    display: block;
}
.tag-user-list {
    border-top: #f3f3f3 1px solid !important;
}
.tag-user-list a {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    padding: 5px 10px;
}
.tag-user-list a:hover {
    background: #f2f2f2;
}
.tag-user-list .pic img {
    width: 30px;
}
.tag-user-list:first-child {
    border: 0;
}
.tag-user-list .txt {
    display: block;
    line-height: 1;
}
.tag-user-list .txt .womo-id {
    font-size: 0.9rem;
}
.tag-user-list .txt .name {
    color: #887e7e;
}
.tag-user-list .txt2 {
    flex: 0 0 100%;
    color: #989898;
}
.message-reply-list { 
    display: none;
    width: 100%;
    padding-left: 55px;
}
.message-reply-list.on {
    display: block;
}
.message-reply-list .message-reply-list {
    padding-left: 40px;
}
.message-reply-list .po-message-list {
    width: 100%;
    padding: 0 !important
}
.message-reply-list .pic img {
    width: 30px;
}
.message-reply-list .right {
    padding: 5px 0 5px 10px;
}
.btn-read-more-reply {
    width: 100%;
    display: block;
    margin-top: -10px;
    margin-bottom: 10px;
    padding-left: 53px;
    color: #99999A;
    font-size: 0.9rem;
}
.btn-edit-area {
    margin: 5px 0 10px 0;
}
.btn-edit-area, 
.btn-edit-area a {
    color: #99999A;
    font-size: 0.9rem;
}
.btn-edit-area span, 
.btn-edit-area a {
    display: inline-block;
    margin-right: 10px;
}
.btn-edit-area a:hover {
    text-decoration: underline;
}
.btn-see-all-mess {
    color: #D4762B;
}
.gallery-fancybox-box .po-message-list {
    padding: 0 20px;   
    margin: 0;
}
.gallery-fancybox-box > .polist-media > .po-content > .po-message-block > .po-message-list {
    /*display: none;*/
}
.gallery-fancybox-box .po-message-block {
    padding: 20px 0 60px 0;
}
.gallery-fancybox-box .po-message-reply {
    position: fixed;
    width: 100%;
    max-width: 600px;
    z-index: 9998;
    margin: 0 auto;
    bottom: 0;
    background: #f8f7f7;
    padding: 10px 10px 10px 20px;
}
.gallery-fancybox-box .po-message-reply button {
    display: block;
    background: transparent;
    color: #C8506D;
    margin-left: 5px;
}
.gallery-fancybox-box .btn-see-all-mess {
    display: block;
    margin: 0 0 30px 75px;
}
.icon-store-special, 
.icon-store-special-gift, 
.icon-store-special-gift-coin, 
.icon-po-num-temp, 
.icon-po-gift-link {
    display: inline-block;
    margin-right: 5px;
}
.icon-store-special:before {
    display: inline-block;
    width: 100%;
    margin-top: 3px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_special_w.svg);
}
.icon-service-sercet:before {
    display: inline-block;
    width: 100%;
    margin-top: 3px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/add_mycoin_service1_w.svg);
}
.icon-store-special-gift:before {
    display: inline-block;
    width: 100%;
    margin-top: 3px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_special_gift_w.svg);
}
.icon-store-special-gift-coin:before {
    display: inline-block;
    width: 100%;
    margin-top: 9px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_special_gift_coin_w.svg);
}
.icon-po-num-temp:before {
    display: inline-block;
    width: 100%;
    margin-top: 2px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/low-temperature-thermometer_w.svg);
}
.icon-po-gift-link:before {
    display: inline-block;
    width: 100%;
    margin-top: 1px;
    padding: 2px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_po_gift_link.svg);
}
.btn-get .icon-po-gift-link:before {
    margin-top: 5px;
    padding: 3px;
}
.icon-store-special.icon-circle-color, 
.icon-po-num-temp.icon-circle-color, 
.icon-po-gift-link.icon-circle-color {
    width: 23px;
    height: 23px;
    border-radius: 30px;
    color: #FFF;
    padding: 0 2px;
    text-align: center;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
}
.icon-add-user-frirnd-off:before {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: 3px;
    /*background-image: url(https://cdn-icons-png.flaticon.com/512/10104/10104036.png);*/
    /*background-image: url(https://cdn-icons-png.flaticon.com/512/748/748137.png);*/
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_topnav_add_friend.svg);
    background-size: 25px;
    background-position: top center;
    background-repeat: no-repeat;
    content: ' ';
}
.nav-link-label-addfriend.invite .icon-add-user-frirnd-off:before {
    background-position: center center;
}
.nav-link-label-addfriend.on .icon-add-user-frirnd-off:before {
    background-position: bottom center;
}

#edit-po-fancybox, .edit-po-fancybox {
    min-width: 500px;
    max-width: 500px;
    padding: 0 15px 30px 15px;
}
@media (max-width: 414px) {
    #edit-po-fancybox, .edit-po-fancybox {
        min-width: 330px;
        max-width: 330px;
    }
}
@media (max-width: 300px) {
    #edit-po-fancybox, .edit-po-fancybox {
        min-width: 240px;
        max-width: 240px;
    }
}
#edit-po-fancybox.fancybox-content h4.title-header, 
.edit-po-fancybox.fancybox-content h4.title-header {
    /*margin: 15px -15px;*/
}
.edit-po-fancybox.fancybox-content h4.title-header span {
    color: #acacac;
    margin-left: 15px;
    font-size: 1rem;
}
.edit-po-fancybox.fancybox-content h4.title-header span a {
    display: inline-block;
    text-decoration: underline;
    color: #d4646b;
    margin-left: 5px;
}
#main-cropper, 
#main-cropper2 {
    position: relative;
}
#main-cropper, 
#main-cropper2, 
#edit-po-fancybox .po-gallery-img.off, 
.edit-po-fancybox .po-gallery-img.off {
    display: none;
}
#main-cropper.on, 
#main-cropper2.on {
    display: block;
}
.edit-po-pic {
    position: relative;
}
.edit-po-link {
    position: relative;
    padding: 0 15px;
}
.btn-upload-po-pic {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 999;
    display: inline-block;
    box-shadow: 0px 1px 5px 1px rgb(103 103 103 / 10%);
    background: rgb(255 255 255 / 0.95);
    color: #585858;
    border-radius: 30px;
    padding: 2px 8px;
}
.btn-upload-po-pic input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#main-cropper .btn-upload-po-pic, 
#main-cropper2 .btn-upload-po-pic {
    right: 15px;
}
#edit-po-fancybox .po-message-list, 
.edit-po-fancybox .po-message-list {
    padding: 10px 20px;
    margin: 15px -15px 0 -15px;
    border-top: #efefef 1px solid;
    border-bottom: #efefef 1px solid;
    background: #f2f2f2;
}
#edit-po-fancybox .po-message-list .pic, 
.edit-po-fancybox .po-message-list .pic {
    margin-top: 7px;
}
#edit-po-fancybox .po-message-list .pic img, 
.edit-po-fancybox .po-message-list .pic img {
    width: 60px;
}
#inputBox.off {
    display: none;
}


/*================================================================================
    act-polist-media-block
================================================================================*/
.swiper-button-next, .swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    border-radius: 40px !important;
    background: #FFF !important;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 8%);
}
@media (max-width: 767px) {
    .swiper-button-next, .swiper-button-prev {
        display: none !important;
    }
}
.swiper-button-next:after, .swiper-button-prev:after {
    color: #a8a8a8;
    font-size: 1rem !important;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important;
}

.act-polist-media-block {
    /*display: flex;
    margin: 0 -1% 20px -1%;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    scroll-behavior: smooth;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;*/
    margin-bottom: 10px;
}
.go-tag-page {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: flex;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 40px !important;
    background: #FFF !important;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 8%);
    z-index: 99 !important;
}
.go-tag-page:after {
    font-family: swiper-icons;
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    content: 'next';
    color: #a8a8a8;
    font-size: 1rem !important;
}
.store-news-block .act-polist-media-block {
    padding: 15px;
    background: #FFF;
}
.act-polist-media-block-inner {
    padding: 10px 0;
    z-index: 100 !important;
}
.act-polist-media {
    /*width: 25%;*/
    max-width: 250px;
    height: auto !important;
    background: #FFF;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 8%);
}
.act-polist-media .pic {
    width: 100%;
    padding-bottom: 75%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: -30px;
}
 .act-polist-media .gallery_swiper_video, 
 .act-polist-media .gallery_swiper_feeling_pic {
    margin-bottom: -30px;
}
.act-polist-media .pic img {
    display: none;
    width: 100%;
}
.act-polist-media .gallery_swiper_item {
    position: relative;
}
.reply-who-info {
    border-bottom: #ffeded 1px solid;
    padding: 5px 10px;
    color: #a78989;
}
.reply-who-info a {
    color: #6f1a1a;
}
.act-polist-media .author {
    padding: 0 10px;
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 99;
}
.act-polist-media .outline-pic {
    width: 45px;
    border: #FFF 3px solid;
    border-radius: 45px;
    background-color: #FFF;
}
.act-polist-media .outline-pic img {
    width: 100% !important;
}
.act-polist-media .author .name {
    flex: 1;
    margin-bottom: 5px;
    padding-left: 10px;
    font-size: 0.9rem;
    color: #309e8a;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.act-polist-media .author .message-floor-num {
    margin-bottom: 5px;
    color: #000;
}
.act-polist-media .info-box .txt {
    margin: 10px 5px;
    text-align: center;
    color: #6d6d6d;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.act-polist-media .info-box .txt a {
    color: #6d6d6d;
}
.act-polist-media .info-box .po-btn {
    border: 0;
    justify-content: center;
    padding-top: 0;
    margin-bottom: 5px;
}
.act-polist-media .info-box .po-btn a.btn-givesocial {
    margin-right: initial;
    padding: 4px 14px 4px 30px;
    background-color: #fff0e8;
}
.act-polist-media .info-box .po-btn a.btn-givesocial:hover {
    background-color: #FF9149;
}
.btn-add-act-po {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 1.7rem;
    color: #FFF;
    margin: 0 auto;
    line-height: 37px;
    background: #C8506D;
    border-radius: 40px;
    /*box-shadow: 1px 1px 5px rgb(0 0 0 / 8%);*/
    transition: 0.3s;
    border: #FFF 3px solid;
}
.btn-add-act-po:hover {
    transform: scale(1.1);
    color: #FFF;
}
.act-polist-media-title .info-box .txt {
    font-size: 1.2rem;
    margin-top: 5px;
    color: #000;
}
.act-polist-media-title .info-box .txt a {
    color: #000;
}
.btn-go-socail {
    background: #F0F0F0;
    border: #E7E7E7 1px solid;
    padding: 5px 15px;
    color: #000 !important;
}
.btn-go-socail img {
    width: 20px;
}
.check-social-num {
    position: absolute;
    top: 5px;
    right: 5px;
    border: #EEEEEE 1px solid;
    border-radius: 30px;
    padding: 0 8px 0 0;
    background: #FFF;
}
.check-social-num img {
    width: 20px;
    margin-right: 5px;
}


/*shorts-polist-media-block*/
.shorts-polist-media-block .gallery_swiper_video, 
.shorts-polist-media-block .gallery_swiper_pic .bg {
    padding-bottom: 178%;
}
.shorts-polist-media-block .info-box {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
}
.shorts-polist-media-block .act-polist-media .author {
    margin: 10px 0;
}
.shorts-polist-media-block .act-polist-media .outline-pic {
    width: 35px;
    border: #FFF 2px solid;
}
.shorts-polist-media-block .act-polist-media .author .name {
    padding-left: 5px;
    color: #FFF;
}
.shorts-polist-media-block .act-polist-media {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0 !important;
}
.polist-media-pic {
    position: relative;
    background: #FFF;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 8%);
    cursor: pointer;
}
.polist-media-title {
    margin-top: 10px;
}
.tags-title {
    margin-top: 5px;
    margin-bottom: 10px;
}
.polist-media-title .txt, .tags-title .txt {
    color: #000;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.shorts-polist-media-block .act-polist-media .gallery_swiper_video {
    margin-bottom: 0;
}
.polist-media-title .txt2, .tags-title .txt2 {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}
.polist-media-title .txt2 .num, .tags-title .txt2 .num {
    margin-top: 4px;
}
.polist-media-title .btn-givesocial, .tags-title .btn-givesocial {
    padding: 2px 7px 2px 17px;
    background-size: 14px;
    background-position: 3px 5px; 
    margin-left: auto;
    margin-right: 2px;
}
.polist-media-title .btn-givesocial:hover, .tags-title .btn-givesocial:hover {
    background-size: 14px;
    background-position: 3px 5px; 
}


/*================================================================================
    privilege
================================================================================*/
.privilege-list-user-block {
    background-color: #FFF;
    padding: 15px;
}
.privilege-list-user {
    /*border: #d4646b 1px solid;*/
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0px 1px 5px 1px rgb(62 57 107 / 20%);
    overflow: hidden;
}
.privilege-list-user-header {
    color: #FFF;
    background-color: #ec791e;
    padding: 5px 15px;
}
.privilege-list-self .privilege-list-user-header {
    background-color: #d4646b;
}
.privilege-list-user-header img {
    display: inline-block;
    width: 40px;
    border-radius: 30px;
    margin-right: 10px;
}
.privilege-list-user-content {
    padding: 15px;
}
.privilege-list-store {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}
.privilege-list-store:last-child {
    margin-bottom: 0;
}
.privilege-list-store .pic {
    width: 120px;
    margin-right: 15px;
}
.privilege-list-store .pic img {
    width: 100%;
    border-radius: 5px;
}
.privilege-list-store > .txt {
    flex: 1;
    align-self: flex-start;
    padding-top: 5px;
}
.privilege-list-store > .txt span {
    display: block;
}
.privilege-list-store .txt .store-name {
    color: #d4646b;
    text-decoration: underline;
    margin-bottom: 5px;
}
.privilege-list-store .txt .title {
    color: #000;font-size: 1.1rem;
}
.privilege-list-store .right-btn a.btn-get-privilege {
    display: flex;
    align-items: center;
    color: #d4646b;
    border: #d4646b 1px solid;
    border-radius: 30px;
    transition: 0.3s;
    min-width: 165px;
    padding: 1px 8px 1px 13px;
}
.privilege-list-store .right-btn a.btn-get-privilege:hover, 
.privilege-list-store .right-btn a.btn-get-privilege.active {
    color: #FFF;
    background: #d4646b;
}
.privilege-list-store .btn-get-privilege .from-user img {
    width: 36px;
    border-radius: 30px;
    border: rgb(255 255 255 / 36%) 2px solid;
}
.privilege-list-store .btn-get-privilege .txt {
    display: flex;
    align-items: center;
    flex: 1;
}
.privilege-list-store .btn-get-privilege span {
    display: inline-block;
}
.privilege-list-store .btn-get-privilege span .from-user {
    margin: 0 3px;
}
.privilege-list-store .btn-get-privilege span .name {
    display: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 85px;
    margin-right: 3px;
}
.privilege-list-store .btn-get-privilege:after {
    display: inline-block;
    content: "\e929";
    font-family: feather!important;
    margin-left: 2px;
    position: relative;
    top: 1px;
}
@media (max-width: 768px) {
    .privilege-list-user-block {
        margin: 0 -7px
    }
    .privilege-list-store {
        padding-bottom: 10px;
    }
    .privilege-list-store:after {
        position: absolute;
        content: " ";
        border-bottom: #ececec 1px solid;
        width: calc(100% + 30px);
        bottom: 0;
        left: 0;
        margin: 0 -15px;
    }
    .privilege-list-store:last-child {
        padding-bottom: 0;
    }
    .privilege-list-store:last-child:after {
        display: none;
    }
    .privilege-list-store .right-btn {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .privilege-list-store .right-btn a {
        justify-content: center;
    }
    .privilege-list-store .btn-get-privilege .txt {
        flex: inherit;
    }
}

/*---privilege offline ---*/
.shop-offline-block {
    max-width: 550px !important;
    margin: 0 auto;
    background: #FFF;
    border-radius: 15px;
    padding: 15px;
    margin-top: 70px;
}
.shop-offline-block2 {
    background-color: transparent;
    margin-top: 0;
}
.shop-offline-block .line-on-side span {
    background: #FFF;
}
.shop-offline-info-block {
    
}
.shop-offline-info-box {
    
}
.shop-offline-info-box .store-coin-box {
    display: block;
    margin: 0 auto;
    width: fit-content;
    margin-top: -70px;
    margin-bottom: 20px;
    z-index: 10;
}
.shop-offline-info-box .follow-info-list-bg-box {
    background: #f2f2f2;
}
.shop-offline-info-status-list {
    border: #f1d4db 1px solid;
    color: #765f64;
    background: #fff5f5;
    padding: 10px;
    border-radius: 7px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden;
}
.shop-offline-info-status-list h5 {
    line-height: 1.6rem;
}
.shop-offline-info-status-list .txt {
    border-bottom: #cd506e 2px solid;
    margin: 0 5px;
    color: #cd506e;
}
.btn-other-bonus {
    display: block;
    flex: 0 0 100%;
    text-align: center;
    background: #dc8787;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: -10px;
    padding: 7px 5px;
}
.btn-other-bonus:hover {
    color: #FFF;
}
#other-bonus-intro-modal.topic-get-success-box .fancybox-close-small {
    top: -17px;
}
#other-bonus-intro-modal.topic-get-success-box .slot-content-area {
    margin-top: 0;
}
.bonus-cobo-plus {
    margin: 10px 0 5px 0;
    font-size: 2.5rem;
    color: #cd506e;
}
.bonus-coins-block {
    border: #f1d4db 1px solid;
    background: #fff5f5;
    padding: 10px;
    border-radius: 10px;
    color: #d4646b;
    margin-bottom: 20px;
    font-size: 1.1rem;
}
.bonus-coins-title {
    text-align: center;
}
.bonus-coins-store {
    text-align: center;
    margin-top: 15px;
}
.bonus-coins-store a {
    font-size: 1.2rem;
    color: #309e8a;
    text-decoration: underline;
}
.bonus-coins-pic {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.bonus-coins-txt .card-title {
    font-size: 1.2rem;
}
.bonus-coins-txt {
    text-align: center;
}
.bonus-coins-txt p {
    color: #d4646b;
    font-size: 1.1rem;
    margin: 5px 0 !important;
}
@media (max-width: 374px) {
    .shop-offline-info-status-list i {
        flex: 0 0 100%;
        text-align: center;
    }
    .shop-offline-info-status-list i:after {
        display: inline-block;
        transform: rotate(90deg);
    }
}
.shop-offline-info-status-list .w-coins-pic {
    margin: 0 10px 0 2px;
}
.shop-offline-info-status-list .icon {
    font-size: 1.2rem;
    margin-right: 5px;
}
.icon-arrow {
    margin: 0 5px;
}
.icon-arrow:after {
    display: block;
    content: " ";
    top: 13px;
    right: 0;
    border: solid transparent;
    border-left: 6px solid #765f64;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.shop-offline-info-box .shop-offline-info-status-list .coin-s-30 {
}
.shop-offline-info-block .privilege-list {
    border-radius: 10px;
}
.shop-offline-info-block .privilege-list > .po-gallery {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}
.login-form-fancybox-intro {
    margin-top: 100px !important;
}
.login-before-intro-block {
    margin-top: -80px;
    margin-bottom: 20px;
    text-align: center;
    color: #ffa1a1;
}
.login-before-intro-block h4 {
    color: #FFF;
}
@media (max-width: 768px) {
    .shop-offline-info-block {
        margin-top: 30px;
        padding-top: 0 !important;
    }
    .shop-offline-info-block h4.content-header-title {
        font-size: 1.1rem;
    }
}

/*================================================================================
    common
================================================================================*/
.taco_banner {
    margin-top: -32px;
    margin-bottom: 10px;
}
.taco_banner img {
    width: 100%;
}
@media (max-width: 767px) {
    .taco_banner {
        margin-left: -7px;
        margin-right: -7px;
        margin-top: -5px;
    }
}
/**/
.login-form-fancybox-content {
    max-width: 550px !important;
    background: #f4f5fa;
    padding: 10px !important;
}
@media (max-width: 320px) {
    .login-form-fancybox-content {
        padding: 0 !important;
    }
}
.login-form-fancybox-content .text-right .card-link {
    display: block;
    margin-top: 0.7rem;
}

/**/
.privilege-media iframe {
    width: 100%;
}
.privilege-media-ig .coupon_item_img, 
.privilege-media-fb .coupon_item_img {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
} 
.privilege-media-tk .coupon_item_img {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 150%;
}
.privilege-media-ig .coupon_item_img iframe, 
.privilege-media-fb .coupon_item_img iframe, 
.privilege-media-tk .coupon_item_img blockquote {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.privilege-media-ig .coupon_item_img iframe {
    top: -55px;
}

/**/
.codeway_fancybox_block {
    max-width: 600px !important;
}
.codeway_fancybox_block .nav.nav-tabs.nav-underline.nav-icon2 .nav-item:first-child a.nav-link span.icon img {
    width: 25px !important;
}
.codeway_fancybox_block .tab-content img {
    max-width: 100%;
    border: #f2f2f2 1px solid;
}
.codeway_fancybox_block .tab-content p {
    margin: 30px 0 10px 0;
    color: #d56f1e;
    font-size: 1.2rem;
}
.codeway_fancybox_block .tab-content p span {
    display: inline-block;
    background: #d56f1e;
    color: #FFF;
    border-radius: 5px;
    padding: 2px 5px;
    margin-right: 10px;
    font-size: 1rem;
}

/*--- poway-select ----*/
.poway-select ul {
  display: flex;
  justify-content: center;
  margin: 0 10px;
  padding: 0;
}
.poway-select ul li img {
  width: 100%;
}
.poway-select ul li {
  display: block;
  margin: 10px;
  width: 50%;
}
.poway-select ul li label {
  display: block;
  background: #FFF;
  border: #d6d6d6 2px solid;
  border-radius: 15px;
  padding: 10px;
  text-align: center;
  /*max-width: 150px;*/
  height: 100%;
  cursor: pointer;
  opacity: 0.7;
}
.poway-select ul li span {
    display: block;
}
.poway-select ul li .txt {
    color: #000;
    white-space: nowrap;
}
.poway-select ul li .pic {
    width: 80%;
    margin: 0 auto;
}
.poway-select ul li .pic img {
    width: 100%;
}
.poway-select ul li input {
  position: absolute;
  visibility: hidden;
}
.poway-select ul li.active label {
  border-color: #da5171;
  background: #FFF;
  opacity: 1;
}
form .form-section.form-section-org {
    color: #E5874A;
    border-bottom: 1px solid #f2f2f2;
}
@media (min-width: 767px) {
    .poway-select ul li label {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: center;
    }
    .poway-select ul li .pic {
        width: 20%;
        margin: 0 15px 0 0;
    }
    .poway-select ul li .txt {
        font-size: 1.2rem;
    }
}
.comment_recommend .accordion .custom-control {
    padding-left: 0 !important;
}
.custom-control-input {
    /*width: 30px;
    height: 50px;
    z-index: 99;*/
}
.comment_recommend .accordion .custom-control-label {
    display: flex;
    align-items: center;
}
.comment_recommend .accordion .custom-control-label.custom-check-label h4 {
    margin: 0 15px 0 30px;
    color: #d4646b;
    min-width: 40px;
    text-align: center;
}
.comment_recommend .accordion .custom-control-label.custom-check-label .w-coins-pic {
    margin-right: 35px;
}
.comment_recommend .accordion .custom-control-label.custom-check-label .txt {
    font-size: 1.2rem;
}
@media (max-width: 413px) {
    .comment_recommend .accordion .card-header {
        padding: 1rem;
    }
    .comment_recommend .accordion .custom-control-label.custom-check-label .w-coins-pic {
        margin-right: 15px;
    }
    .comment_recommend .accordion .custom-control-label.custom-check-label h4 {
        margin: 0 5px 0 25px;
    }
    .comment_recommend .accordion .custom-control-label.custom-check-label .txt {
        font-size: 0.9rem;
    }
}
.comment_recommend .card-body {
    border-top: #faf1f1 1px solid;
    background: #fffbfb;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.comment_recommend .card-header3 {
    border-bottom: #faf1f1 1px solid;
    background: #fffbfb;
}
.comment_recommend .card-header3 p {
    color: #a2a2a2;
    margin-bottom: 0;
}
.comment_recommend .accordion .custom-control-label .pic {
    margin: 0 20px 0 30px;
}
.comment_recommend .accordion .custom-control-label .pic img {
    width: 50px;
}
.comment_recommend .accordion .custom-control-label .txt h4 {
    color: #E37929;
}
.comment_recommend .accordion .custom-control-label .txt p {
    margin-bottom: 0;
}
.txt-must {
    color: #ff0000;
    display: block;
    position: absolute;
    z-index: 10;
    top: 2px;
    left: 0px;
}
.card-header .txt-must {
    top: 50% !important;
    margin-top: -8px !important;
    left: 8px !important;
}
.comment_recommend .txt-notice {
    margin: 10px 0 0 0;
    color: #a48787;
}
.comment_recommend .accordion .txt-notice-red {
    
}
.comment_recommend .txt-notice a {
    display: none;
    color: #950000;
    margin-left: 5px;
}
.comment_recommend .txt-notice i {
    margin-right: 5px;
}
.comment_recommend .form-group {
    position: relative;
}
.form-group-gptinput {
    /*display: flex;
    border: #e4e4e4 1px solid;*/
    border-radius: 5px;
    padding: 15px 20px;
    background: #fff2f2;
}
.form-group-gptinput .media {
    display: flex;
    /*border-top: #fffafa 1px solid !important;*/
    /*padding: 20px 15px 5px 15px;
    margin: 10px -15px 0 -15px;*/
}
.form-group-gptinput .pic {
    margin-right: 10px;
}
.form-group-gptinput .pic img {
    width: 40px;
}
.form-group-gptinput .txt, 
.form-group-text .txt {
    position: relative;
    flex: 1;
}
.form-group-gptinput .txt .tag-user-list-block, 
.form-group-text .txt .tag-user-list-block {
    transform: translateY(-100%);
    top: 0;
    bottom: initial;
}
#radio-po-gpt {
    padding-left: 25px;
    position: relative;
    margin-top: 10px;
}
#radio-po-gpt .icheckbox_flat-grey {
    position: absolute;
    left: 0;
}
#radio-po-gpt label {
    margin: 0;
    color: #000;
}
#radio-po-gpt .txt-gpt-num {
    color: #d5646b;
    margin-left: 10px;
}
@media (max-width: 767px) {
    #radio-po-gpt .txt-gpt-num {
        display: block;
        margin-left: -25px;
        margin-top: 12px;
        width: 105%;
    }
}
.form-group .mess-text {
    min-height: 160px;
    user-select: text;
    white-space: pre-wrap;
    word-break: break-word;
}
[contenteditable=true]:empty::before {
    content: attr(placeholder);
    pointer-events: none;
    display: block;
    color: #c0c5cd;
}
.tag-txt {
    color: #00376b;
}
.form-group-gptinput .txt-notice:first-child {
    
    border-bottom: #fffafa 1px solid !important;
    padding: 0 15px 10px 15px;
    margin: 0 -15px 15px -15px;
}
.custom-radio-check-red .custom-control-label::before {
    width: 1.5rem;
    height: 1.5rem;
    top: 1.3rem;
    border: #e3e3e3 1px solid;
    background-color: transparent;
}
.custom-radio.custom-radio-check-red .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #d54e21;
    border-color: #d54e21;
}
.custom-radio-check-red .custom-control-label::after {
    background-image: none !important;
}
.custom-radio-check-red .custom-control-input:checked ~ .custom-control-label::after {
    font-family: feather!important;
    content: "\e926";
    color: #FFF;
    top: 1.35rem;
    left: 3px;
    font-weight: bold;
}
.agree_checkbox {
    position: relative;
    margin: 1rem 0;
}
.agree_checkbox .icheckbox_square-red {
    position: absolute;
    top: 0;
    left: 0;
}
.agree_checkbox label {
    margin: 0 !important;
}

.article-front-view-block {
    display: none;
}
.article-front-view-block.show {
    display: block;
}
.article-front-view-block .polist-media {
    border-bottom: 0;
}
.article-front-view-block .po-message-list {
    margin-bottom: 0;
}

.btn-add-buy-womogift {
    display: block;
    border: 1px dashed #c7c7c7;
    color: darkgrey;
    background-color: #FFF;
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buy-womogift-block, .btn-add-buy-womogift-block.off {
    display: none;
}
.buy-womogift-block.on {
    display: flex;
    padding: 20px 0;
    background: #FFF;
}
.buy-womogift-block .pic {
    margin-bottom: 10px;
}
.buy-womogift-block .pic img {
    width: 100%;
}
.buy-womogift-block .title {
    color: #000;
    font-size: 1.1rem;
}
.buy-womogift-block .num {
    margin: 5px 0;
}
.input-checkbox-right {
    position: absolute;
    right: 15px;
    top: 49px;
}
@media (min-width: 768px) {
    .buy-womogift-block.on {
        padding: 0;
        background: none;
    }
    .input-checkbox-right {
        right: 20%;
        top: 9px;
    }
    .edit-po-fancybox .input-checkbox-right {
        right: 0;
    }
}

/**/
.po-tag-friend-block .tag-user-list-block {
    bottom: inherit !important;
    transform: none !important;
    top: 40px;
    width: 100%;
}
.po-tag-friend-block .tag-user-list a {
    padding: 10px;
}
.po-tag-friend-block .tag-user-list .pic {
    margin-right: 10px;
}
.po-feat-friend-list-block h5 {
    margin-bottom: 20px;
}
.po-feat-friend-list-block h5 span {
    color: #acacac;
    margin-left: 15px;
    font-size: 1rem;
}
.po-feat-friend-list-block h5 span a {
    display: inline-block;
    text-decoration: underline;
    color: #d4646b;
    margin-left: 5px;
}
.po-feat-friend-list .media {
    border-top: 0 !important;
    align-items: center;
    margin-bottom: 10px;
}
.po-feat-friend-list .media .media-left {
    margin-right: 10px;
}
.po-feat-friend-list .media .media-left img {
    width: 40px;
}
.po-feat-friend-list .media .name {
    flex: inherit;
    width: 100px;
}
.po-feat-friend-list .media .media-right {
    margin-left: 10px;
}
.po-feat-friend-list .media .media-right .btn {
    width: 30px;
    height: 30px;
    padding: 7px 0;
    text-align: center;
}
#add-feat-list .float-right a {
    margin-right: -15px;
    margin-top: 0;
}





/**/
body .overlay {
    display: block;
    background: rgba(29, 29, 31, .8);
    z-index: 9995 !important;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
}
body.menu-open .overlay, .overlay.open {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
}
.main-menu.menu-fixed {
    z-index: 999999 !important;
}
.vertical-content-menu.columns-one .content-body {
    margin-left: 0 !important;
}
.text-content {
    padding: 25px 0;
}
.text-content ol li {
    list-style: outside decimal;
}
.get-num {
    display: block;
    background: #ffe9e9;
    border-radius: 30px;
    padding: 2px 10px;
    margin-top: 10px;
}
#content-line {
    clear: both;
}
.store-rate {
    display: none !important;
}
.list-style1 li {
    list-style: disc;
}
.text-gray {
    color: #9c9c9c;
}
.text-black {
    color: #000;
}
.max-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    min-height: 100vh;
    margin: 0 auto;
    border: #eaeaea 1px solid;
}
.max-content .give-coins-top, .max-content .btn-fixed-bot {
    left: inherit;
    max-width: 600px;
}
.max-content .filter-fancybox {
    padding-bottom: 0 !important;
}
.max-content .give-coins-top {
    border-right: #eaeaea 1px solid;
}
.max-content .give-coins-top .sliderTab {
    overflow: hidden;
    background: #FFF;
    padding: 20px 15px;
    margin-bottom: 0;
}
.max-content .give-coins-top .sliderTab .swiper-slide {
    opacity: 1;
}
.max-content .sliderTab .swiper-slide span.txt {
    height: 38px;
}
.max-content .give-coins-top .sliderTab .btn {
    display: block;
    padding: 3px 15px;
    width: fit-content;
    margin: 3px auto;
}
.text-underline {
    text-decoration: underline;
}
.noscroll {
    overflow: hidden;
}

.btn_more {
    position: absolute;
    top: 20px;
    right: 10px;
    color: #909090;
    font-size: 0.9rem;
}

.btn-add-wishlist {
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: center;
    line-height: 35px;
    margin: 10px;
}

.btn-more-bot {
    display: block;
    padding: 1rem;
    font-size: 1rem;
}

.btn-full-w {
    display: block;
    padding: 15px;
    margin: 0 -7px;
    text-align: center;
    border-radius: 0;
    color: #666;
    background: #FFF;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}
.btn-full-w.zindex-1 {
    position: relative;
    z-index: 100;
}
.btn-social {
    border: #e0e0e0 1px solid;
    background-color: #FFF;
}
.btn-social> :first-child, .btn-social-icon> :first-child {
    border-right: 1px solid rgb(0 0 0 / 12%);
}
.btn-social .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-social .icon img {
    width: 23px;
}
.btn-social-google {
    white-space: normal;
}
.text-info .btn-s {
    position: relative;
    z-index: 99;
    background: #1E9FF2;
}
.btn-line {
    background-color: #07b53b;
    color: #fff;
    border-color: #fff;
}
.btn-line:hover {
    color: #fff;
    border-color: #07b53b;
}
.btn-ig {
    background-color: #4158D0;
    background-image: linear-gradient(240deg, #4158D0 0%, #C850C0 74%);
    color: #fff;
    border-color: #fff;
}
.btn-ig:hover, .btn-ig:active {
    color: #fff;
    background-color: #4158D0;
    border-color: #7a3cb2;
}
.swal-overlay {
    overflow-y: auto !important;
}
.swal-modal {
    width: calc(100% - 40px);
    max-width: 400px;
    min-height: 220px;
}
.swal-title {
    font-size: 20px;
}
.swal-text {
    text-align: center !important;
}
.swal-icon-to-user {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swal-icon-to-user .icon {
    font-size: 2rem;
}
.swal-icon-to-user .icon i {
    color: #5cb2a1;
}
.swal-footer {
    text-align: center;
}
.swal-button {
    color: #FFF !important;
    outline: 0;
    background: #d4646b;
}
.swal-button:focus, .swal-button:hover {
    background: #b54f55;
}
.swal-button--cancel {
    background-color: #333 !important;
}
.swal-button--cancel:hover {
    background-color: #000 !important;
}

.swal-button--cancel:focus {
    box-shadow: none !important;
}

.btn-add-wishlist span {
    display: none;
}

.btn-add-wishlist:hover,
.btn-add-wishlist.active {
    background-color: #FF4961;
    border-color: #FF4961;
}
.btn-datepicker {
    width: 100px;
    height: 28px;
}
.btn-datepicker:hover::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFF;
  opacity: 1; /* Firefox */
}
.btn-datepicker:hover:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFF;
}
.btn-datepicker:hover::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFF;
}
.btn-choice-shop {
    position: relative;
}
.btn-choice-shop:after {
    position: absolute;
    top: 11px;
    right: 7px;
    font: normal normal normal 16px/1 LineAwesome;
    content: "\f112";
}
select.form-control {
    background: #FFF url(../images/icon/arrow-down-sign-to-navigate.svg) no-repeat right center;
    background-size: 30px;
    padding-right: 25px;
}
.bs-callout-danger {
    display: block;
    border-color: #FF4961 !important;
    background-color: #ffecef;
    border-radius: 0.25rem;
    color: #49000a;
}
.disabled {
    pointer-events: none;
}
/*-----card----------*/
.card-no-bg {
    background: transparent;
    box-shadow: none;
}
.card-header {
    position: relative;
}

.card-header .card-title {
    
}
.card-header .card-title .title-icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    color: #FFF;
    background: #d4646b;
    padding: 15px;
    margin-top: 0;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    box-shadow: inset -15px 0px 10px -15px #00000054;
}

.title-icon-wishlist img {
    width: 20px; 
    margin: 1px 4px;
}

.title-icon-book img {
    width: 26px; 
    margin: 5px 1px;
}

.title-icon-bg-b {
    background: #4267b2 !important;
}

.title-icon-bg-g {
    background: #32b900 !important;
}

.card-header .title-icon i {
    display: block;
    position: relative;
    font-size: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.card-header .title-icon.no-b-l-r {
    border-bottom-left-radius: 0;
}

.card-header .btn-addnew {
    position: absolute;
    top: 17px;
    right: 15px;
    font-size: 0.8rem;
}
.card-header2 {
    padding: 1.5rem 10px;
}
.card-header2 .card-title {
    padding-left: 0;
    font-size: 1.3rem;
}

/*------media---------*/
.media-list-card .media {
    background: #FFF;
    border-radius: 0.5rem;
    margin-bottom: 10px;
    border: 0;
}
.media-v-m {
    align-items: center;
}
.media-object {
    width: 70px;
}

.progress {
    position: relative;
}

.progress:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background: #EEE;
    border-radius: 100%;
}

/*------media---------*/
.dropdown-menu-right .dropdown-item {
    border-top: 1px solid rgb(0 0 0 / 5%);
}
.dropdown-menu-right .dropdown-item iconify-icon {
    font-size: 1.4rem;
    margin-right: 5px;
}
.dropdown-menu-member {
}
.dropdown-menu-member .dropdown-item {
      
}

footer.footer {
    margin-top: 50px;
}

.text-copyright a {
    color: #6d787d;
    text-decoration: underline;
}

.content-header {
    margin: 20px 0;
}

.content-header .filter-right-block {
    float: right;
    margin-top: 18px;
}

.content-header .content-header-left .filter-right-block {
    margin-top: 0;
}

.sub-content {
    /*margin-top: -70px;*/
}

.img-border {
    border: #FFF 5px solid;
}

img.store-pic {
    width: 70px;
}

.icon img {
    
}

/*------icon---------*/
.icon-chat:after {
    display: inline-block;
    content: "coupon";
    margin-right: 0px;
    width: 20px;
    text-indent: -9999px;
    background: url("../../assets/images/icon/chat.svg") no-repeat 0 0;
    background-size: 17px;
}
.icon-youtube:after {
    display: inline-block;
    content: "youtube";
    margin-right: 0px;
    width: 20px;
    text-indent: -9999px;
    background: url("../../assets/images/icon/youtube.svg") no-repeat 0 0;
    background-size: 20px;
}
.icon-expansion {
    display: inline-block;
    content: "expansion";
    margin-right: 0px;
    width: 12px;
    height: 11px;
    text-indent: -9999px;
    background: url("../../assets/images/icon/icon_coupon_expansion_org.svg") no-repeat 0 0;
    background-size: 12px;
}
.btn-icon:hover .icon-expansion {
    background-image: url("../../assets/images/icon/icon_coupon_expansion_w.svg");
}
.icon-expansion-w {
    display: inline-block;
    content: "expansion";
    margin-right: 0px;
    width: 12px;
    height: 11px;
    text-indent: -9999px;
    background: url("../../assets/images/icon/icon_coupon_expansion_w.svg") no-repeat 0 0;
    background-size: 12px;
}
/*------- nav-icon --------*/
.nav-icon-block {
    margin: 10px 0;
}
.nav-tabs.nav-icon {
    border: 0;
}
.nav-icon .nav-link.active, .nav-icon .nav-item.show .nav-link {
    border: 0;
    color: #d4646b;
    background-color: transparent !important;
}
.nav-tabs.nav-icon .nav-item .nav-link i {
    display: block;
    margin:0;
    font-size: 1.6rem;
    margin-bottom: 5px;
}
.nav-tabs.nav-icon .nav-item .nav-link i:before {
    display: inline-block;
    background: #fff;
    border-radius: 100%;
    padding: 5px;
    width: 34px;
    height: 34px;
}
.nav-tabs.nav-icon .nav-item .nav-link i.ft-image:before {
    font-size: 1.2rem;
    padding-top: 9px !important;
}
.nav-icon .nav-link.active .txt {
    padding-bottom: 5px;
    border-bottom: #d4646b 2px solid;
}
.nav-tabs.nav-icon .nav-item .nav-link.active i:before {
    /*color: #FFF;
    background: #d56a72;*/
}
.column-1-page .top-nav-menu {
    display: none;
}

/*--------- 手機版選單展開 --------*/
.content-body {
    transition: transform 200ms linear;
}
.menu-open .header-navbar.navbar-shadow, .menu-open .content-body, .menu-open .left-fixed {
    transform: translateX(260px);
}
.main-menu.menu-fixed {
    padding-top: 0 !important;
}
.menu-open .main-menu.menu-fixed {
    width: 260px;
}

/*----------- table -------------*/
.table-style1 {
    text-align: center;
}
.table-style1 .table th, 
.table-style1 .table td {
    vertical-align: middle;
}
.table-style1 .table thead td {
    white-space: nowrap;
}
.table-style1 .table-pic img {
    width: 60px;
}
.table-style1 .table-btn {
}
.tr-bg-gray {
    background: #f0f0f0;
}

/*----------- login-fixed-bot ------------*/
.login-fixed-bot {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    width: 100%;
    bottom: -20px;
    left: 0;
    z-index: -1;
    padding: 20px 0;
    margin: 0;
    text-align: center;
    border-radius: 8px;
    background: rgb(255 255 255);
    box-shadow: 0px 1px 15px 1px rgb(101 101 101 / 0.34);
    transition: 0.3s;
}
.login-fixed-bot.on {
    visibility: visible;
    opacity: 1;
    z-index: 999999;
    bottom: 0;
}
.login-fixed-bot .line-on-side {
    border-bottom: 1px solid #efefef;
    margin-bottom: 25px;
}
.login-fixed-bot .line-on-side span {
    color: #000;
    background: #FFF;
    font-size: 1rem;
}
.login-fixed-bot .btn {
    width: 120px;
    margin: 0 15px;
}
.login-fixed-bot .btn-area span {
    color: #afafaf;
}

/*================================================================================
    quill editor
================================================================================*/
.quill-wrap {
  max-width:900px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  background: #FFF;
}
.quill-wrap .ql-active {
  border: 1px solid #ccc !important;
  border-radius:4px;
}
.quill-wrap button, .quill-wrap .ql-picker {
  margin-right:2px
}
.quill-wrap .ql-editor {
    height: 300px;
}
.ql-toolbar.ql-snow, .ql-container.ql-snow {
    border: #e4e4e4 1px solid !important;
}
.ql-container.ql-snow {
    border-top: 0 !important;
}
/*--------html editor-------*/
.ql-html-popupContainer {
    background: #eaeaea !important;
    border-radius: 0 !important;
}
.ql-html-textContainer {
    width: 100% !important;
    height: 100% !important;
}
.ql-html-textContainer pre {
    background: initial;
}
.ql-html-textArea {
    left: 20px !important;
    height: calc(100% - 100px) !important;
}
.ql-html-buttonGroup button {
    outline: 0;
    font-size: 12px;
    background: #ffffff;
    border: #CCC 1px solid;
    padding: 2px 10px;
    border-radius: 3px;
}

/*================================================================================
    loader-ellips
================================================================================*/

.loader-ellips {
  font-size: 20px;
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555;
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}


/*================================================================================
    form
================================================================================*/
.form-section-sub {
    margin-bottom: 20px;
}

.form-line {
    border-bottom: #e8e8e8 1px solid;
    padding-bottom: 1.5rem;
}

.font-txt-tip {
    display: block;
    color: #666;
}

/*---sort-list----*/
.sort-list {
    margin: 0;
    padding: 0;
}

.sort-list li {
    position: relative;
    list-style: decimal inside;
    padding: 1rem;
    border: 1px solid #e4e4e4;
    background: #FFF;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.sort-list li:after {
    position: absolute;
    top: 1.3rem;
    right: 1rem;
    color: #b3b3b3;
    font: normal normal normal 16px/1 LineAwesome;
    content: "\f126";
}

/*badge*/
.badge a.tip {
    vertical-align: middle;
    line-height: initial;
}

/*================================================================================
    header
================================================================================*/
.top_btn_scan,
.top_btn_map {

}
.top_btn_back,
.top_btn_close {
    position: absolute;
    top: 15px;
    font-size: 1.5rem;
    z-index: 1000;
}
.top_btn_back {
    left: 10px;
}
.top_btn_close {
    right: 10px;
}
.top_btn_block i {
    font-size: 1.8rem !important;
}

.top_btn_scan img,
.top_btn_map img {
    width: 30px;
}

/*----- nav-item-user ------*/
.nav-link i {
    font-size: 2.1rem;
}

/*.top_btn_map i {
    font-size: 1.7rem;
    margin-top: 5px;
    display: block;
}*/
.top-nav-user a.nav-link i, .top-nav-user a.nav-link i.la {
    font-size: 2.4rem;
    position: relative;
    top: -2px;
}
.top-nav-user .mega-dropdown-menu {
    position: absolute !important;
    margin: 0;
    width: 100%;
    height: calc(100vh - 62px);
    border-radius: 0;
    border: 0;
    padding: 1rem 2rem 5rem 2rem;
    overflow: auto;
}

.top-nav-user .mega-dropdown-menu li {
    width: 100%;
    font-size: 1.1rem;
}

.top-nav-user .mega-dropdown-menu li a {
    display: block;
    padding: 1.5rem 0;
    border-bottom: #efefef 1px solid;
}

/*----- quick btn ------*/
.quick_btn1 {
    display: none;
}
.quick_btn {
    position: absolute;
    top: 73px;
    left: 0;
    padding: 0 7px;
    margin-left: -2%;
    width: 102%;
}
.quick_btn ul {
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-bottom: 5px;
}

.quick_btn li {
    display: block;
    float: left;
    width: 48%;
    margin-left: 2%;
    text-align: center;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.35rem;
    box-shadow: 1px 1px 5px 1px rgba(62, 62, 62, 0.07);
}

.quick_btn li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 17px;
    min-width: 120px;
}

.quick_btn li a span {
    position: relative;
    display: inline-block;
    margin-left: 7px;
    top: 1px;
}

.quick_btn li a span.quick_user_pic{
    display: inline-block;
    margin-left:0;
}
.quick_btn li a span.quick_user_pic .w-coins-pic {
    width: 30px !important;
    height: 30px !important;
    padding: 4px !important;
    box-shadow: 2px 1px #b44033;
    margin-left: 0;
}
.quick_btn li a span.quick_user_pic .w-coins-pic img{
    vertical-align: top;
}
.quick_btn li a span.quick_btn_icon{
    margin-left:0;
    width: 30px;
    height: 30px;
    top: 0;
}
.quick_btn li a span.quick_btn_icon img{
    width: 95%;
    vertical-align: middle;
}

.quick_btn_give {
    /*background: url("assets/images/icon/quick_btn_give.svg") no-repeat ;*/
}
.quick_btn_2 li {
    width: 48%;
}
.pt-8 {
    padding-top: 80px !important;
}
/*-----dropdown-notification------*/
.notification-filter .filter-block {
    width: 100%;
}
.notification-filter .filter-block select, 
.notification-filter .filter-block input, 
.notification-filter .filter-block button {
    font-size: 0.9rem;
    height: 30px !important;
}
.dropdown-notification .dropdown-menu-media {
    width: 30rem !important;
}
@media (max-width:768px) {
    .dropdown-notification .dropdown-menu-media {
         max-width: 100%;
    }
}
.dropdown-notification li.scrollable-container a:first-child .media {
    /*padding-top: 0 !important;*/
}
.dropdown-notification .pic img {
    width: 45px;
}
.dropdown-notification .ueser-name {
    margin-bottom: 3px;
}
.dropdown-notification .ueser-name .badge {
    border-radius: 30px;
    margin-left: 5px;
    font-size: 0.8rem;
}
.dropdown-notification .media h6 {
    margin-bottom: 2px;
}
.dropdown-notification .media {
    position: relative;
    align-items: center;
    padding-left: 25px !important;
    opacity: 0.8;
}
.dropdown-notification .media.no-read {
    opacity: 1;
}
.dropdown-notification .media .media-left .icon-message {
    width: 45px;
    height: 45px;
}
.dropdown-notification .media .media-left i {
    width: 45px;
    height: 45px;
    margin: 0;
    font-size: 1.4rem;
    /* line-height: 35px; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropdown-notification .media .media-right {
    font-size: 0.8rem;
    margin-bottom: 5px;
}
.dropdown-notification .media .media-right .btn {
    padding: 5px 10px;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

/*================================================================================
    content
================================================================================*/
.breadcrumb-wrapper {
    display: none;
}

/*================================================================================
    left menu
================================================================================*/
.main-menu {
    position: absolute !important;
}
.main-menu.menu-fixed {
    position: fixed !important;
}
.main-menu .left_personalinfo, 
.main-menu .left_personalinfo .media-left, 
.main-menu .left_personalinfo .media-object {
    transition: 0.3s;
}
.main-menu .left_personalinfo {
    padding: 5px 0 15px 15px;
}
.main-menu .left_personalinfo .media {
    align-items: center;
}
.main-menu .left_personalinfo .media-left {
    margin-right: 10px;
}
.main-menu .left_personalinfo .media-body .media-heading {
    margin-bottom: 0;
}
.main-menu .left_personalinfo .media-body span {
    display: block;
    margin-top: 0.5rem;
}
.main-menu .left_personalinfo .media-object {
    width: 50px;
}
.vertical-content-menu.menu-collapsed .main-menu .left_personalinfo .media-body {
    display: none;
}
.vertical-content-menu.menu-collapsed .main-menu .left_personalinfo {
    padding: 0;
}
.vertical-content-menu.menu-collapsed .main-menu .left_personalinfo .media-left {
    padding: 8px 20px;
}
.vertical-content-menu.menu-collapsed .main-menu .left_personalinfo .media-object {
    width: 30px;
}

.main-menu.menu-light .navigation>li>a i, 
.main-menu.menu-light .navigation>li>a iconify-icon, 
.main-menu.menu-light .navigation>li>a span.pic {
    position: relative;
    border-radius: 100%;
    padding: 4px;
    width: 30px;
    height: 30px;
    color: #da5171;
    border: #ffffff 1px solid;
    margin-right: 12px;
    background: #FFF;
    float: left;
    font-size: 1.4rem;
    text-align: center;
    box-shadow: 1px 1px 5px rgb(204 204 204 / 50%);
}
.main-menu.menu-light .navigation>li:hover>a span.pic{
    transform: translateX(0);
}
.main-menu.menu-light .navigation>li>a span.pic {
    line-height: 17px;
}
.main-menu.menu-light .navigation>li>a span img {
    width: 100%;
}
.main-menu.menu-light .navigation li a span.menu-tip {
    display: block;
    color: #ababab;
    font-size: 1rem;
}

/*================================================================================
    personalinfo_block
================================================================================*/
.acc-way-block {
    padding: 0 5px;
}
.acc-way-block .col,
.acc-way-block [class*=col-]{
    padding-right:10px;
    padding-left:10px;
}
.acc-way-block .card {
    margin: 10px 0;
}
@media(max-width: 767px) {
    .acc-way-block .col,
    .acc-way-block [class*=col-]{
        padding-right:5px;
        padding-left:5px;
    }
    .acc-way-block .card {
        margin: 5px 0;
    }
}
.acc-way-block .pic img {
    width: 30px;
}
.acc-way-block h4 {
    margin: 10px 0 5px 0;
}
.acc-way-block .txt {
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;

}
.personalinfo_block .media-list .media {
    padding: 10px 40px;
}
.personalinfo_block .media-list .media.media-v-m{
    padding: 40px;
}
@media (max-width:768px) {
    .personalinfo_block figure {
        margin: 20px 0 0 20px !important;
    }
    .shop-offline-info-block .personalinfo_block figure {
        margin: 0 !important;
    }
    .personalinfo_block .media-list .media.media-v-m {
        padding: 20px 15px 20px 20px;
    }
}

.personalinfo_block .media-left img {
    width: 90px;
    border: #FFF 5px solid;
    box-shadow: 2px 2px 15px 1px rgba(62, 62, 62, 0.07);
}

.personalinfo_block .media-heading {
    margin: 5px 0 10px 0;
}

.personalinfo_block .media-heading i {
    font-size: 1rem;
    margin-top: 3px;
    margin-left: 5px;
}

.ability-list {
    display: block;
    float: left;
    position: relative;
    text-align: center;
    font-size: 0.8rem;
    color: #a2a2a2;
}
.ability-list a {
    color: #a2a2a2;
}
.ability-list div {
    font-size: 1.5rem;
    color: #da5171;
}
.ability-list:nth-child(3), 
.ability-list:last-child {
    padding-left: 15px;
    margin-left: 15px;
    border-left: #d8d8d8 1px solid;
}
.follow-num {
    position: absolute;
    right: 1.5rem;
    top: 45px;
}
.follow-num .ability-list {
    font-size: 0.8rem;
}
.follow-num .ability-list:nth-child(3), 
.follow-num .ability-list:last-child {
    padding-left: 10px;
    margin-left: 10px;
}
.follow-num .ability-list div {
    font-size: 1.3rem;
    color: #000;
}
.ability-list.user_privilege {
    display: none;
    margin-right: 15px;
}

.ability-list span {
    position: absolute;
}

.ability-body {
    position: relative;
    padding-left: 65px;
    padding-top: 6px;
    padding-right: 35px;
}

.ability-list .progress {
    height: 6px;
    margin-bottom: 15px;
}

.ability-list .progress-percent {
    right: 0;
    top: 0;
    font-size: 0.8rem;
}
.user_privilege a span.num {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 43px;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    padding-top: 3px;
    font-size: 1.2rem;
    font-family: arial;
    color: #FFF;
}
.user_privilege a span.num {
    background-image: url(../images/icon/icon_user_privilege_off.svg);
}
.user_privilege.on a span.num {
    background-image: url(../images/icon/icon_user_privilege_on.svg);
}
.user_privilege a span.txt {
    display: inline-block;
    position: relative;
    left: -15px;
    top: 9px;
    white-space: nowrap;
    color: #FFF;
    padding: 1px 15px;
    z-index: 5;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.user_privilege a span.txt {
    background: #a6a6a6;
    border: #d5d5d5 2px solid;
}
.user_coins img {
    width: 23px;
    position: relative;
    top: -2px;
}
/*.user_coins a span {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    margin-top: 3px;
    margin-right: 7px;
    font-size: 1.2rem;
    font-family: arial;
    color: #FFF;
}
.user_coins a span {
    background-image: url(../images/icon/user_coin.svg);
}*/
.friend-list-block .user_privilege {
    display: none;
    position: relative;
}
.friend-list-block .user_privilege a span.num {
    position: absolute;
    top: -5px;
    right: -25px;
    margin-right: 0;
    margin-top: 0;
    width: 35px;
    font-size: 1rem;
    padding-top:2px;
}
.friend-profile-card .user_privilege a {
    display: inline-block;
    margin-right: 0;
    margin-top: -5px;
    margin-bottom: 5px;
    width: 40px;
}

/*================================================================================
    croppie
================================================================================*/
.modal.fade .modal-dialog {
    transform: translate(0, -50%) !important;
}
.card-body-right {
    float: left;
}
.personalinfo_block .img-thumbnail {
    width: 100px;
    height: 100px;
    padding: 0;
    overflow: hidden;
    border-radius: 100%;
    border: #FFF 5px solid;
    box-shadow: 2px 2px 15px 1px rgba(62, 62, 62, 0.18);
}
.personalinfo_block label.cabinet {
  display: block;
  cursor: pointer;
}

.personalinfo_block label.cabinet input.file {
  position: relative;
  height: 100%;
  width: 120px;
  opacity: 0;
  -moz-opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  margin-top:-30px;
  cursor: pointer;
}

#upload-demo {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  padding-bottom:25px;
}
.personalinfo_block figure {
    margin: 30px 0 0 30px;
}
.personalinfo_block figure figcaption {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    padding-left: 9px;
    padding-bottom: 5px;
    text-shadow: 0 0 10px #000;
}
.personalinfo_block label.cabinet .w-coins-pic {
    width: 100px;
    height: 100px;
    padding: 10px;
}
@media(min-width: 768px) {
    .personalinfo_block label.cabinet .w-coins-pic {
        width: 120px;
        height: 120px;
        padding: 14px;
    }
}


.nav-user-coin-pic-list {

    padding: 5px;
    border-radius: 20px;
}
.nav-user-coin-pic-list:has(.nav-user-coin-pic-red:checked) {
    background: #ffeaea;
}
.nav-user-coin-pic-list:has(.nav-user-coin-pic-org:checked) {
    background: #fdf4ed;
}
.nav-user-coin-pic-list + .nav-user-coin-pic-list {
    margin-top: 5px;
}
.nav-user-coin-pic-list .txt-tip {
    display: none;
    margin-top: 5px;
}
.nav-user-coin-pic:checked ~ .txt-tip {
    display: block;
    padding: 0 5px;
    margin-top: 7px;
}
.nav-user-coin-pic-list .btn {
    display: none;
    padding: 0;
    pointer-events: none;
    opacity: 0.65;
    -webkit-appearance: button;
    background: transparent;
}
.nav-user-coin-pic:checked ~ .btn {
    display: inline-block;
    pointer-events: initial;
    opacity: 1;
    margin: 0 5px;
}
@media (max-width:768px) {
    .nav-user-coin-pic:checked ~ .btn {
        margin-top: 10px;
    }
}
.nav-user-coin-btn-label {
    border:#CCC 1px solid;
    border-radius: 30px;
    padding: 3px 15px;
    cursor: pointer;
    width: 110px;
    text-align: center;
    margin-bottom: 0;
    background: #FFF;
}
.nav-user-coin-pic {
    position: absolute;
    opacity: 0;
}
.nav-user-coin-pic:checked ~ label:before {
    font-family: feather !important;
    content: "\e926";
    margin-right: 5px;
}
.nav-user-coin-pic-red:checked ~ label {
    color: #FFF;
    background: #d4646b;
    border: #d4646b 1px solid;
} 
.nav-user-coin-pic-org:checked ~ label {
    color: #FFF;
    background: #E37929;
    border: #E37929 1px solid;
} 


#upload-square, .upload-square, .upload-square2 {
  width: 100% !important;
}
#upload-square.croppie-container .cr-boundary, 
.upload-square.croppie-container .cr-boundary {
    width: 432px;
    height: 173px;
}
@media(max-width: 468px) {
    #upload-square.croppie-container .cr-boundary, 
    .upload-square.croppie-container .cr-boundary {
        width: 292px;
        height: 117px;
    }
}
#upload-square.croppie-container .cr-viewport, 
#upload-square.croppie-container .cr-resizer, 
.upload-square.croppie-container .cr-viewport, 
.upload-square.croppie-container .cr-resizer {
    width: 100% !important;
    height: 100% !important;
    border: 2px solid #d8d8d8 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#upload-square2.croppie-container .cr-boundary, 
.upload-square2.croppie-container .cr-boundary {
    width: 100% !important;
    padding-bottom: 75%;
}
.upload-square2.croppie-container .cr-viewport, 
.upload-square2.croppie-container .cr-resizer {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#crop-galleryImagePop .modal-body {
    padding: 0;
}

.cabinet_banner {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}
.cabinet_banner figure {
    margin-bottom: 0;
}
.cabinet_banner .item-img {
    display: none;
}

.cropImagePop-1-1 .croppie-container .cr-boundary {
    width: 100% !important;
    padding-bottom: 100% !important;
}
.cropImagePop-4-3 .croppie-container .cr-boundary {
    width: 100% !important;
    padding-bottom: 75% !important;
}
.cropImagePop-5-2 .croppie-container .cr-boundary {
    width: 100% !important;
    padding-bottom: 40% !important;
}
.cropImagePop-new .croppie-container .cr-viewport, 
.cropImagePop-new .croppie-container .cr-resizer {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.cropImagePop-new .modal-body {
    padding: 0;
}
/*================================================================================
    wishlist
================================================================================*/
.wishlist_block .card-header {
    border-bottom: 1px solid #eaeaea;
}
.coinsbook_block .card-header .card-title, 
.wishlist_block .card-header .card-title {
    padding-left: 55px;
}

.wishlist_block .wish-list .media {
    position: relative;
    padding: 1rem;
    border-bottom: 1px solid #eaeaea;
}
.wishlist_block .wish-list .media.reach {
    background: #fff5f5;
}
.wishlist_block .wish-list .media .reach-mark {
    display: inline-block;
    position: relative;
    z-index: 10;
    margin-top: 15px;
    width: 47px;
    transform: rotate(-13deg);
}
.wishlist_block .wish-list .media .reach-mark img {
    width: 70px;
    margin-left: -30px; */
}
.wishlist_block .wish-list .media.coin-over:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 20;
    background-color: rgb(0 0 0 / 50%);
}
.wishlist_block .wish-list .media.coin-over .off-info {
    height: calc(100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.wishlist_block .wish-list .media.coin-over .off-info-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    z-index: 30;
    color: #FFF;
    font-size: 1.2rem;
    text-align: center;
}
.wishlist_block .wish-list .media.coin-over .off-info-inner a {
    color: #FFF;
    position: relative;
    top: 1px;
    margin-left: 2px;
}
.wishlist_block .wish-list {
    position: relative;
    z-index: 10;
}

.wishlist_block .wish-list .rounded-circle {
    border: #e2e2e2 1px solid;
    width: 60px;
}

.wishlist_block .wish-list .media-body {
    padding-right: 1.2rem;
}

.wishlist_block .wish-list .title {
    margin-top: 5px;
    position: relative;
    padding-right: 50px;
}

.wishlist_block .wish-list .degree {
    position: absolute;
    top: 0;
    right: 0;
    color: #d0656a;
}

.wishlist_block .wish-list .progress {
    height: 17px;
    margin-top: 10px;
    margin-bottom: 0;
}

.wishlist_block .wish-list .surplus {
    font-size: 0.8rem;
    text-align: center;
    color: #9e9e9e;
    margin-top: 5px;
}

.dropdown-wishlist-link {
    width: 25px;
}

.wishlist_block .wish-list a.btn-givesocial {
    align-self: center;
}
.wishlist_block .wish-list .media-right {
    padding-left: 0;
}
.wishlist_block .wish-list .media-right a {
    display: block;
    margin: 7px 0;
}

/*================================================================================
    fixed bottom menu
================================================================================*/
.fixed_bottom_menu {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: #FFF;
    border-top: #f1f1f1 1px solid;
}
.fixed_bottom_menu_content{
    position: relative;
}
.get_coin_notice{
    position: absolute;
    width: 100%;
    height: 40px;
    text-align: center;
    left: 0;
    top: -40px;
    padding: 8px 7px 4px 7px;
    background-color: #FCE9E9;
    /*background-color: #edf2f1;*/
    font-size: 12px;
    /*color: #E55942;*/
    color: #4d4d4d;
}
.get_coin_notice span.count{
    background-color: #d4646b;
    /*background-color: #61ab9a;*/
    border-radius: 2px;
    color: #fff;
    padding: 0 4px;
    margin-left: 4px;
}
.get_coin_notice span.open{
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #424242;
    background-color: #FCE9E9;
}
.get_coin_notice span.open i{
    font-size: 13px;
}
.get_coin_notice span.open.active{
    color: #fff;
    background-color: #d4646b;
    /*background-color: #61ab9a;*/
}
.get_coin_notice span.open.active i{
    animation: openup 1s infinite;
    opacity: 0;
}
#my_coin_notice h4.title-header, 
#fancybox_my_coin_notice h4.title-header {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes openup {
    from {
        transform: translateY(-12px);
        opacity: 0;
    }

    to {
        transform: translateY(4px);
        opacity: 1;
    }
  }
.fixed_bottom_menu ul {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

.fixed_bottom_menu li {
    display: block;
    float: left;
    width: 20%;
    text-align: center;
    background-color: #fff;
}

.fixed_bottom_menu li a {
    display: block;
    padding: 10px 5px 5px 5px;
}

.fixed_bottom_menu li a.active {
    color: #d4646b;
}
.fixed_bottom_menu li a span.icon-outer {
    position: relative;
    display: inline-block;
}
.fixed_bottom_menu li a span.icon-outer .badge {
    top: -2px;
    right: -8px;
    font-size: 0.7rem;
    z-index: 10;
}
.fixed_bottom_menu li a.bot-menu-profile span.icon-outer .badge {
    top: -16px;
    right: -5px;
}
.fixed_bottom_menu li a span.icon {
    position: relative;
    display: inline-block;
    height: 30px;
    width: 30px;
    overflow: hidden;
}
.fixed_bottom_menu li a span.icon img{
    width: 100%;
}
.fixed_bottom_menu li a.active span.icon img{
    margin-top: -92px;
    /*margin-top: -30px;*/
}
.fixed_bottom_menu li a span.header_nav_pic {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-top: -20px;
}
.fixed_bottom_menu li a.active span.header_nav_pic::after {
    position: absolute;
    content: "";
    right: -18px;
    top: 18px;
    width: 50px;
    height: 50px;
    background-color: #C95360;
    transform: rotate(45deg);
    z-index: 1;
}

.fixed_bottom_menu li a span.icon i:last-child {
    display: none;
}

.fixed_bottom_menu li a i {
    font-size: 1.8rem;
}

.fixed_bottom_menu li a span.icon .badge-up {
    top: -5px;
    right: -9px;
    position: absolute;
}

.fixed_bottom_menu li a span.txt {
    display: block;
    font-size: 12px;
    margin-top: -5px;
}

/*================================================================================
    hot-product-block
================================================================================*/
.hot-product-block {}

.hot-product-block .slick-list {
    /*overflow: visible;*/
    padding-bottom: 20px;
}

.hot-product-block .card-header .card-title {
    padding-left: 20px;
}

.hot-product-block .card-header .title-icon {
    padding: 5px;
    width: 30px;
    height: 30px;
    top: 15px;
    border-radius: 100%;
    text-align: center;
}

.hot-product-block .card-header .title-icon i {
    font-size: 1.3rem;
}
.hot-product-block .card-img-fluid {
    height: 120px;
}
.hot-product-block .card .card-title {
    font-size: 1rem;
    margin-bottom: 5px;
    white-space: normal;
    /*height: 36px;*/
}

.hot-product-block .card-body {
    padding: 1rem;
    text-align: center;
}

.hot-product-block .card-body p {
    white-space: nowrap;
    margin-bottom: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}
.hot-product-block .card-outdeck {
    margin: 0 -7px;
    /*overflow-y: hidden*/
}

.hot-product-block .card-deck {
    display: block;
    white-space: nowrap;
    /*overflow-x: auto;
    padding: 0px 7px 30px 7px;*/
    margin-bottom: 20px;
}
.hot-product-block .slick-slider .slick-list {
    padding: 10px 5px;
    margin: 0 -5px;
}
.hot-product-block .card-slide {
    padding: 0 5px;
}
.hot-product-block .card-deck .card {

}

.hot-product-block .card-deck .card:last-child {
    margin-right: 0;
}
.hot-product-block .price {
    color: #dd551a;
}
.hot-product-block .store_pic img {
    display: inline-block !important;
    width: 20px !important;
    margin-right: 5px;
}
/*================================================================================
    hot series
================================================================================*/
.hot-wish-coins-block .media-list {
    display: flex;
    flex-flow: wrap;
    background: #FFF;
}
.hot-wish-coins-block .media {
    float: left;
    width: 50%;
    border-top: #f1f1f1 1px solid;
    border-left: #f1f1f1 1px solid;
}
.hot-wish-coins-block .media:nth-child(2) {
    border-top: 0;
}
.hot-wish-coins-block .media-left {
    position: relative;
}
/*---- hot-user-block ------*/
.hot-user-block .owl-stage-outer {
    
}
.hot-user-block .slick-slide {
    padding-right: 10px;
    box-sizing: border-box;
}
.hot-user-block .pic {
    position: relative;
}
.hot-user-block .media {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: 10px;
}
.hot-user-block .media .pic img {
    display: inline-block;
    width: 70px;
}
.hot-user-block .media h5 {
    margin: 10px 0;
    text-overflow: ellipsis;
    overflow: hidden;
}
.hot-user-block .media .receive-total {
    margin-bottom: 10px;
    font-size: 0.8rem;
}
.hot-user-block .top-num, .hot-wish-coins-block .top-num {
    position: absolute;
    top: -30px;
    left: -10px;
    min-width: 30px;
    color: #FFF;
    font-size: 1rem;
    padding: 0px 7px 2px 7px;
    background-color: #75c7cb; 
    border-radius: 50px;
}
.hot-user-block .top-num.top-num1, 
.hot-user-block .top-num.top-num2, 
.hot-user-block .top-num.top-num3 {
    left: -15px;
    padding-left: 25px;
    background: url(../../assets/images/icon/crown.svg) #d87379 no-repeat 8px 3px;
    background-size: 15px;
    transform: rotate(-20deg);
}
.hot-wish-coins-block .top-num {
    left: -5px;
    right: inherit;
    top: -10px;
    padding-left: 25px;
    background: url(../../assets/images/icon/crown.svg) no-repeat 8px 3px;
    background-size: 15px;
    background-color: #d87379;
    transform: rotate(-20deg);
}
/*--------top-onair-list-block---------*/
.top-onair-list-block .nav-item a.nav-link {
    background: #f5f5f5;
    border-bottom: #f3f4f9 1px solid !important;
}
.top-onair-list-block .nav-item a.nav-link.active {
    background: #FFF;
    border-bottom: #f3f4f9 1px solid !important;
}
.top-onair-list-block .nav .nav-item i {
    display: block;
    font-size: 1.5rem;
}
.top-onair-list-block .onair-list .media {
    border-bottom: #f3f4f9 1px solid;
}
.top-onair-list-block .onair-list .media:last-child {
    border-bottom: 0; 
}
.top-onair-list-block .media .num {
    display: block;
    color: #d87379;
    margin-bottom: 5px;
}
.top-onair-list-block .media .num i {
    color: #FFF;
    background: #d87379;
    padding: 5px;
    font-size: 0.8rem;
    border-radius: 100%;
    margin-right: 5px;
}

/*================================================================================
    top_rank page
================================================================================*/
/*---------- nav-rank-block ----------*/
.nav-rank-block .nav.nav-tabs {
    background: #FFF;
    border-radius: 30px;
    border: 0;
}
.nav-rank-block .nav.nav-tabs .nav-item .nav-link {
    opacity: 0.7;
    font-size: 1.2rem;
}
.nav-rank-block .nav.nav-tabs .nav-item .nav-link img {
    display: none;
}
.nav-rank-block .nav.nav-tabs .nav-item .nav-link.active {
    background: #f07f2a;
    border-radius: 30px;
    opacity: 1;
    color: #ffffff;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    border: 0;
}
/*.nav-rank-block .nav.nav-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.nav-rank-block .nav.nav-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}*/

/*------- coin-list ---------*/
.kol-rank-block .coin-pic {
  width: 100%;
  padding: 14% 18% 12% 15%;
  background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/coin_bg.png) no-repeat;
  background-size: 100%;
}
.kol-rank-block .rank-list-m .coin-pic {
  background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/coin_bg_m.png);
}

.coin-pic img {
  width: 100%;
  border-radius: 100%;
}

.coin-list .name {
  position: relative;
  color: #000;
  font-size: 1.1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.coin-list .rank {
  text-align: center;
  margin-bottom: 10px;
}

/*------- all-rank-block ------*/
.all-rank-block {
  max-width: 800px;
  margin: 50px auto;
  text-align: center;
}

.all-rank-block-inner {
  display: flex;
  flex-wrap: wrap;
}

.all-rank-block .rank-list:nth-child(1),
.all-rank-block .rank-list:nth-child(2),
.all-rank-block .rank-list:nth-child(3) {
  position: relative;
  width: 29%;
  padding: 30px;
  align-self: flex-end;
  margin: 0;
  padding: 0;
  display: block;
  background: transparent;
  box-shadow: none;
}

.all-rank-block .rank-list:nth-child(1) {
  width: 36%;
}

.all-rank-block .rank-list:nth-child(2) {
  order: -1;
  margin-left: 3%;
}
.all-rank-block .rank-list:nth-child(3) {
  margin-right: 3%;
}

.rank-list {
  position: relative;
  display: flex;
  width: 98%;
  background: #FFF;
  padding: 10px;
  margin: 0 1%;
  box-shadow: 0px 1px 15px 1px rgb(62 57 107 / 7%);
  align-items: center;
  /*background: #fff8f8;
  border-radius: 100px;
  margin: 0 1% 20px 1%;
  padding: 10px;
  align-items: center;
  box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 30%);*/
}
.rank-list:nth-child(4) {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.rank-list:last-child {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.all-rank-block .mark {
  color: #FFF;
  min-width: 40px;
  border-radius: 30px;
  padding: 5px;
  box-shadow: 2px 2px 1px #e6e6e6;
  background: #7d92d9;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #7d92d9 0%, #df6295 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #7d92d9 0%, #df6295 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #7d92d9 0%, #df6295 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d92d9', endColorstr='#df6295', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.all-rank-block .rank-list:nth-child(1) .mark,
.all-rank-block .rank-list:nth-child(2) .mark,
.all-rank-block .rank-list:nth-child(3) .mark {
    position: absolute;
    top: -7%;
    left: 20%;
    transform: rotate(-15deg);
    z-index: 3;
    border-radius: 0;
    background-size: 100%;
    box-shadow: none;
    width: 50px;
    height: 37px;
    line-height: 35px;
}

.all-rank-block .rank-list:nth-child(1) .mark {
    top: -6%;
    left: 23%;
    transform: rotate(-18deg);
    background-image: url(../images/icon/icon_crown_num1.png); 
}

.all-rank-block .rank-list:nth-child(2) .mark {
    background-image: url(../images/icon/icon_crown_num2.png); 
}

.all-rank-block .rank-list:nth-child(3) .mark {
    background-image: url(../images/icon/icon_crown_num3.png); 
}
.user-rank-block .rank-list:nth-child(1) .mark, 
.user-rank-block .rank-list:nth-child(2) .mark, 
.user-rank-block .rank-list:nth-child(3) .mark {
    top: -2%;
    left: 27%;
}

.user-rank-block .rank-list:nth-child(1) .mark {
    top: 0;
    left: 29%;
}

.rank-list .mark {
  top: 50%;
    left: -5px;
    transform: translateY(-50%);
    position: absolute;
    border-top-left-radius: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 10px;
}

.rank-list .coin-pic {
  width: 90px;
  padding: 13px 16px 12px 13px;
  margin-left: 60px;
}
.rank-list:nth-child(1) .coin-pic, 
.rank-list:nth-child(2) .coin-pic, 
.rank-list:nth-child(3) .coin-pic {
    position: relative;
    z-index: 2;
    width: 80%;
    padding: 11% 15% 10% 12%;
    margin: 0 auto;
}
.user-rank-block .rank-list:nth-child(1) .coin-pic img, 
.user-rank-block .rank-list:nth-child(2) .coin-pic img, 
.user-rank-block .rank-list:nth-child(3) .coin-pic img {
    border: #ffffff 6px solid;
    box-shadow: 0px 0px 5px 1px rgb(62 62 62 / 8%);
}

.rank-list .name {
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: left;
    margin: 0;
    background: 0;
    border: 0;
    box-shadow: none;
    padding: 0 30px;
}
.rank-list:nth-child(1) .name, 
.rank-list:nth-child(2) .name, 
.rank-list:nth-child(3) .name {
    text-align: center;
}
.kol-rank-block .rank-list:nth-child(1) .name, 
.kol-rank-block .rank-list:nth-child(2) .name, 
.kol-rank-block .rank-list:nth-child(3) .name {
    position: relative;
    color: #000;
    background: #FFF;
    border: #D05445 3px solid;
    border-radius: 30px;
    padding: 3px;
    margin: -36px 30px 50px 30px;
    font-size: 1.1rem;
    box-shadow: 3px 3px 0px #A53E32;
}
.kol-rank-block .rank-list-m:nth-child(1) .name, 
.kol-rank-block .rank-list-m:nth-child(2) .name, 
.kol-rank-block .rank-list-m:nth-child(3) .name {
    border: #5cb3a2 3px solid;
    box-shadow: 3px 3px 0px #4b9284;
}
.user-rank-block .rank-list:nth-child(1) .name, 
.user-rank-block .rank-list:nth-child(2) .name, 
.user-rank-block .rank-list:nth-child(3) .name {
    margin-top: -10px;
    margin-bottom: 40px;
}

@media (max-width: 600px) {
    .all-rank-block .rank-list:nth-child(1) .mark,
    .all-rank-block .rank-list:nth-child(2) .mark,
    .all-rank-block .rank-list:nth-child(3) .mark {
        top: -14%;
        left: 15%;
    }
    .all-rank-block .rank-list:nth-child(1) .mark {
        top: -10%;
        left: 16%;
    }
    .user-rank-block .rank-list:nth-child(1) .mark,
    .user-rank-block .rank-list:nth-child(2) .mark,
    .user-rank-block .rank-list:nth-child(3) .mark {
        top: -11%;
    }
    .user-rank-block .rank-list:nth-child(1) .mark {
        top: -9%;
    }
    .rank-list .coin-pic {
        margin-left: 30px;
    }
    .rank-list .name {
        padding: 0 10px;
    }
    .kol-rank-block .rank-list:nth-child(1) .name, 
    .kol-rank-block .rank-list:nth-child(2) .name, 
    .kol-rank-block .rank-list:nth-child(3) .name {
        margin: -20px 15px 50px 15px;
    }
    .user-rank-block .rank-list:nth-child(1) .coin-pic, 
    .user-rank-block .rank-list:nth-child(2) .coin-pic, 
    .user-rank-block .rank-list:nth-child(3) .coin-pic {
        padding: 5px;
    }
    .user-rank-block .rank-list:nth-child(1) .name, 
    .user-rank-block .rank-list:nth-child(2) .name, 
    .user-rank-block .rank-list:nth-child(3) .name {
        margin-top: 5px;
}
}

.all-rank-block .rank {
  margin: 0 20px 0 0;
  color: #a7a7a7;
  font-size: 0.9rem;
}

.all-rank-block .rank-list:nth-child(1) .rank, 
.all-rank-block .rank-list:nth-child(2) .rank, 
.all-rank-block .rank-list:nth-child(3) .rank {
    position: relative;
    background: #efefef;
    padding: 10px 0;
    margin: 0;
}
.all-rank-block .rank-list:nth-child(1) .rank {
    padding: 30px 0;
    background: #f3f2f2;
}
.all-rank-block .rank-list:nth-child(1) .rank:before, 
.all-rank-block .rank-list:nth-child(2) .rank:before, 
.all-rank-block .rank-list:nth-child(3) .rank:before {
    display: block;
    content: " ";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: #FFF;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.all-rank-block .rank-list:nth-child(1) .rank:before {
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
} 
.all-rank-block .rank-list:nth-child(2) .rank:before {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
} 
.all-rank-block .rank-list:nth-child(3) .rank:before {
    clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 0% 100%);
}
.all-rank-block .rank1 .rank span,
.all-rank-block .rank2 .rank span,
.all-rank-block .rank3 .rank span {
  display: block;
  font-size: 1.4rem;
}

.all-rank-block .rank span {
  color: #dc8f56;
  display: block;
  font-size: 1.3rem;
}
.all-rank-block .author {
    position: relative;
    z-index: 1;
}
.all-rank-block .author .txt {
    display: block;
    color: #000;
    margin: 5px 0;
    font-size: 1.2rem;
}

.all-rank-block .author .outline-pic img {
    width: 60px;
    border: #FFF 2px solid;
    border-radius: 60px;
}
.all-rank-block .rank-list:nth-child(1) .author .outline-pic img {
    width: 70px;
    border-radius: 70px;
}

.all-rank-block .author-out {
    margin-bottom: 37px;
}
.all-rank-block .author-out .outline-pic img {
    width: 80px;
    border-radius: 80px;
}
.all-rank-block .rank-list:nth-child(1) .author-out .outline-pic img {
    width: 90px;
    border-radius: 90px;
}


/*---------- --------------*/
.user-rank-list {
    display: flex;
    flex-wrap: wrap;
}
.user-rank-list .media {
    position: relative;
    width: 98%;
    padding: 1rem;
    background: #FFF;
    border: 0;
    /*margin: 1%;
    border-radius: 10px;*/
    box-shadow: 0px 0px 5px 1px rgb(62 62 62 / 8%);
}
.user-rank-list .media:first-child {
    width: 38%;
}
.user-rank-list .media:nth-child(2), 
.user-rank-list .media:nth-child(3) {
    width: 28%;
}
.user-rank-list .media:nth-child(2) {
    order: -1;
    margin-left: 2%;
}
.user-rank-list .media:nth-child(1), 
.user-rank-list .media:nth-child(2), 
.user-rank-list .media:nth-child(3) {
    background: transparent;
    box-shadow: none;
    align-self: flex-end;
    padding: 0;
}
.user-rank-list .media:nth-child(4) {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.user-rank-list .media:last-child {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.user-rank-list .media:nth-child(1) .pic, 
.user-rank-list .media:nth-child(2) .pic, 
.user-rank-list .media:nth-child(3) .pic {
    position: relative;
    z-index: 2;
}
.user-rank-list .media:nth-child(1) .pic img, 
.user-rank-list .media:nth-child(2) .pic img, 
.user-rank-list .media:nth-child(3) .pic img {
    border: #ffffff 4px solid;
    box-shadow: 0px 0px 5px 1px rgb(62 62 62 / 8%);
}
.user-rank-list .media:nth-child(1) h5, 
.user-rank-list .media:nth-child(2) h5, 
.user-rank-list .media:nth-child(3) h5 {
    position: relative;
    z-index: 2;
    margin-bottom: 50px;
}
.user-rank-list .media:nth-child(1) .media-content, 
.user-rank-list .media:nth-child(2) .media-content, 
.user-rank-list .media:nth-child(3) .media-content {
    position: relative;
    background: #efefef;
    padding: 10px 0;
}
.user-rank-list .media:nth-child(1) .media-content {
    padding: 30px 0;
    background: #f3f2f2;
}
.user-rank-list .media:nth-child(1) .media-content:before, 
.user-rank-list .media:nth-child(2) .media-content:before, 
.user-rank-list .media:nth-child(3) .media-content:before {
    display: block;
    content: " ";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: #FFF;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.user-rank-list .media:nth-child(1) .media-content:before {
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
} 
.user-rank-list .media:nth-child(2) .media-content:before {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
} 
.user-rank-list .media:nth-child(3) .media-content:before {
    clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 0% 100%);
}
.user-rank-list .media .media-body {
    display: flex;
    align-items: center;
}
.user-rank-list .media:nth-child(1) .media-body, 
.user-rank-list .media:nth-child(2) .media-body, 
.user-rank-list .media:nth-child(3) .media-body {
    display: block;
    text-align: center;
}

.user-rank-list .top-num {
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translate(0, -50%);
    color: #FFF;
    min-width: 30px;
    border-radius: 30px;
    padding: 5px;
    text-align: center;
    box-shadow: 2px 2px 1px #e6e6e6;
    background: #7d92d9;
    background: -moz-linear-gradient(-45deg, #7d92d9 0%, #df6295 100%);
    background: -webkit-linear-gradient(
-45deg, #7d92d9 0%, #df6295 100%);
    background: linear-gradient(
135deg, #75c7cb 0%, #30b2b9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d92d9', endColorstr='#df6295', GradientType=1);
    border-top-left-radius: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 10px;
}
.user-rank-list .top-num.top-num1, 
.user-rank-list .top-num.top-num2, 
.user-rank-list .top-num.top-num3 {
    top: -10px;
    left: 50%;
    margin-left: -50px;
    padding-left: 25px;
    background: url(../../assets/images/icon/crown.svg) #d87379 no-repeat 8px 3px;
    background-size: 15px;
    transform: rotate(-20deg);
}
.user-rank-list .media .pic {
    margin-left: 40px; 
}
.user-rank-list .media:nth-child(1) .pic, 
.user-rank-list .media:nth-child(2) .pic, 
.user-rank-list .media:nth-child(3) .pic {
    margin-left: 0; 
}
.user-rank-list .media:first-child .pic img {
    width: 120px;
}
.user-rank-list .media h5 {
    flex: 1;
    margin: 10px 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.user-rank-list .media .receive-total {
    /*font-size: 0.8rem;*/
    color: #a7a7a7;
    font-size: 0.9rem;
    text-align: center;
}
.user-rank-list .media .receive-total span {
    color: #dc8f56;
    display: block;
    font-size: 1.3rem;
}
@media(max-width: 600px) {
    .user-rank-list .media {
        width: 98%;
    }
}

/*================================================================================
    btn-radio-props-pack-block
================================================================================*/
.btn-radio-props-pack-block {
    display: flex;
    padding: 0;
}
.btn-radio-props-pack-block li {
    margin-right: 5px;
    flex: 1;
}
.btn-radio-props-pack-block li label {
    border: #e4e4e4 1px solid;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
.btn-radio-props-pack-block li input {
    visibility: hidden;
    height: 0;
    position: absolute;
    z-index: -1;
}
.upgrad-props-cart-modal {
    width: 90%;
    max-width: 300px !important;
}
.upgrad-props-cart-modal .pic img {
    width: 120px;
}
.btn-radio-props-pack-block li input:checked + label {
    color: #cc4f6d;
    border-color: #cc4f6d;
    background-color: #f2dcdc;
}


/*================================================================================
    my-coin-info-num-block
================================================================================*/
.my-coin-info-num-block {
    display: flex;
    margin-bottom: 15px;
}
.my-coin-info-num-block .card {
    flex: 1;
    margin: 0 7px;
}
.my-coin-info-num-block .card-body {
    padding: 40px 20px 30px 20px;
    align-items: center;
    flex-wrap: wrap;
}
.my-coin-info-num-block .card-body .txt {
    margin: 0 20px;
    flex: 1;
    font-size: 1.1rem;
}
.my-coin-info-num-block .card-body .txt span {
    display: block;
    margin: 5px 0;
}
.txt-mark {
    position: absolute;
    top: -8px;
    left: -5px;
    color: #FFF;
    padding: 5px;
    border-top-left-radius: 5px;
}
.bg-green {
    background-color: #61ab9a;
}
@media (max-width:768px) {
    .my-coin-info-num-block .card-body {
        text-align: center;
        justify-content: center;
    }
    .my-coin-info-num-block .media-right {
        flex: 0 0 100%;
    }
    .my-coin-info-num-block .card-body .txt {
        margin: 0;
        flex: 0 0 100%;
    }
}

/*mywallet-quick_btn*/
.mywallet-quick_btn {
    display: block; 
    position: relative; 
    top: 0 !important;
    margin: 0;
    width: 100%;
}
.quick_btn li {
    margin: 0px;
    flex: 1;
}
.quick_btn li + li {
    margin-left: 10px;
}
.quick_btn li a {
    padding: 10px;
    min-width: inherit;
}

/*================================================================================
    mybag_block
================================================================================*/
/*.mybag_block {
    width: 102%;
    text-align: center;
    margin-left: -1%;
}

.mybag_block_top {
    background: url("../../assets/images/bag_bg_top.png") no-repeat top;
    background-size: 100%;
    padding: 40px 25px 0 25px;
}

.mybag_block_bottom {
    min-height: 50px;
    background: url("../../assets/images/bag_bg_bottom.png") no-repeat top;
    background-size: 100%;
}

.mybag_block_bottom2 {
    min-height: 110px;
    background: url("../../assets/images/bag_bg_bottom2.png") no-repeat top;
    background-size: 100%;
}*/
.mybag_block {
    position: relative;
    width: 102%;
    text-align: center;
    margin-left: -1%;
    margin-top: 50px;
    margin-bottom: 10px;
}
.mybag_block:before, .mycoins_list_block:before {
    position: absolute;
    content: " ";
    top: -21px;
    left: 50%;
    margin-left: -28px;
    background: url("../../assets/images/bag_acc_web.jpg") no-repeat;
    width: 63px;
    height: 31px;
    z-index: 10;
}
.max-w-content .mybag_block:before, 
.max-w-content .mycoins_list_block:before {
    display: none;
}
.mycoins_list_block:after {
    position: absolute;
    content: " ";
    bottom: -21px;
    left: 50%;
    margin-left: -28px;
    background: url("../../assets/images/bag_acc2_web.jpg") no-repeat;
    width: 63px;
    height: 31px;
    z-index: 10;
}

.mybag_block_top {
    background: url("../../assets/images/bag_bg_top_web_l.jpg") #FFF no-repeat left top;
    padding-left: 15px;
}
.mybag_block_top .mybag_block_inner {
    position: relative;
    z-index: 9;
    background: url("../../assets/images/bag_bg_top_web_r.jpg?v=20211027") no-repeat right top;
    padding: 27px 20px 0 5px;
    margin: 0;
}
.mybag_block_top .row {
    margin: 0;
}
.mybag_block_top:before, .mybag_block_top:after {
    position: absolute;
    content: " ";
    top: 110px;
    width: 24px;
    height: calc(100% - 155px);
}
.mybag_block_top:before {
    left: 0;
    background: url("../../assets/images/bag_bg_loop_web_l.jpg") repeat-y left top;
}
.mybag_block_top:after {
    width: 26px;
    right: 0;
    background: url("../../assets/images/bag_bg_loop_web_r.jpg") repeat-y left top;
}

.mybag_block_bottom {
    position: relative;
    min-height: 54px;
    background: url("../../assets/images/bag_bg_bottom_web_l.jpg") no-repeat left top;
}
.mybag_block_bottom:after {
    position: absolute;
    content: " ";
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: url("../../assets/images/bag_bg_bottom_web_r.jpg") no-repeat right top;
}

.mybag_block_bottom2 {
    position: relative;
    min-height: 110px;
    background: url("../../assets/images/bag_bg_bottom2_web_l.jpg") no-repeat left bottom;
}
.mybag_block_bottom2:after {
    position: absolute;
    content: " ";
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: url("../../assets/images/bag_bg_bottom2_web_r.jpg") no-repeat right bottom;
}

.mybag_block .mybag_list {
    padding: 20px 7px 20px 7px;
    margin-bottom: -40px;
    border-left: #d6d6d6 1px dashed;
}

.mybag_block .mybag_list:first-child {
    border: none;
}

.mybag_block .mybag_list .coin {
    display: inline-block;
    position: relative;
}

.mybag_block .mybag_list .coin .badge-up {
    top: -3px;
    right: -2px;
}

.mybag_block .mybag_list .coin img {
    height: 54px;
}

.mybag_block .mybag_list .title {
    color: #796956;
    background: #f1dcc7;
    padding: 2px 5px;
    margin: 15px 0;
    -webkit-clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%, 0 0);
    clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%, 0 0);
}

.mybag_block .mybag_list:last-child .title {
    letter-spacing: -2px;
}

.mybag_block .title:after {
    -webkit-clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%, 0 0);
    clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%, 0 0);
}

.mybag_block .title .tip {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 15px;
    font-size: 0.7rem;
    margin-left: 3px;
    color: #FFF;
    background: #b5b4b5;
}

.mybag_block .total_coins {
    font-size: 1.5rem;
}

.mybag_block .mybag_list .btn_manage {
    display: inline-block;
    color: #9fa0a0;
    padding: 0 10px;
    margin-top: 5px;
    font-size: 0.8rem;
    border: #9fa0a0 2px solid;
    border-radius: 15px;
    cursor: pointer;
}
.mybag_block_top .nav-right-tabs {
    text-align: center;
    float: none;
    display: block;
    margin: -15px -25px 30px -15px;
    padding-bottom: 20px;
    border-bottom: #dcdddc 1px dashed;
}
.mybag_block_top .nav-right-tabs li {
    display: inline-block;
}
.mybag_block_top .btn-group {
    margin-top: -5px;
}
.nav-mycoin-tabs-block {
    border-bottom: #dcdddc 1px dashed;
    margin-top: -30px;
    /*padding: 15px 30px;*/
    padding: 0;
}
.nav-mycoin-tabs-block .nav-user-tabs-block {
    margin-top: 0;
    margin-bottom: -2px;
    background: none;
}
.nav-mycoin-tabs-block .nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link {
    padding: 2rem 1rem;
    height: 100%;
}
.nav-mycoin-tabs-block .nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link span.icon img {
    height: 38px;
}
.nav-mycoin-tabs-block .nav-user-tabs-block .txt {
    font-size: 1.3rem !important;
    bottom: -2px;
    position: relative;
}
.nav-mycoin-tabs-block .nav-user-tabs-block .txt.m-coins, 
.nav-mycoin-tabs-block .nav-user-tabs-block .txt.w-coins, 
.nav-mycoin-tabs-block .nav-user-tabs-block .txt.wm-coins {
    font-size: 2.3rem !important;
    bottom: -9px;
    line-height: 1 !important;
}
.coins-list-filter-block .total {
    padding: 4px 15px;
    color: #a5a5a5;
}
.coins-list-filter-block {
    padding: 30px 20px;
    text-align: center;
}
.coins-list-filter-block {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.search-input-block {
    margin-right: 15px;
}
.search-input-block .input-group {
    border: #e4e4e4 1px solid;
    border-radius: 3px;
}
.search-input-block input.form-control, 
.search-input-block button {
    padding: 5px 10px;
    border: 0;
}
.search-input-block button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: #f7f4f4;
}
.coins-list-filter-block .btn-outline-secondary{
    border-color: #dfdfdf !important;
    padding: 10px;
    height: 32.5px;
    background: #FFF;
}
.coins-list-filter-block .btn-outline-secondary:hover {
    color: #000;
}
@media (min-width: 768px) {
    .nav-mycoin-tabs-block .nav-user-tabs-block a span {
        display: inline-block !important;
    }
    .nav-mycoin-tabs-block .nav-user-tabs-block .txt {
        margin-left: 5px;
    }
    .coins-list-filter-block {
        justify-content: end;
        margin-bottom: 0;
    }
}
@media (max-width: 768px) {
    .coins-list-filter-block {
        background: #f8f8f8;
        margin: 0 -6px 30px -6px;
        border-bottom: #f3f3f3 1px solid;
    }
    .search-input-block button {
        background: #FFF;
    }
}

/*================================================================================
    mycoins_list
================================================================================*/
.mycoins_list_block {
    margin-bottom: 35px;
}
.mycoins_list_block .mybag_block_top .mybag_block_inner {
    padding-top: 60px;
}
.mycoins_list_box.hide_box {
    /*background: url(../images/bg_hide.png);*/
}
.mycoins_list_over_box {
    border-top: #dcdddc 1px dashed;
}
.mycoins_list_box.hide_box .mycoins_list .store_pic {
    position: relative;
}
.mycoins_list_box.hide_box .mycoins_list .store_pic:before {
    position: absolute;
    content: " ";
    width: calc(100% + 4px);
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.mycoins_list_box.hide_box .mycoins_list .store_pic:after {
    position: absolute;
    font-family: 'feather' !important;
    /*content: "\e971";*/
    content: " ";
    width: 55px;
    height: 50px;
    background: url(../images/icon/icon_prop_cloak_w.svg) no-repeat center center;
    background-size: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-55%);
    color: #FFF;
    font-size: 1.6rem;
}
.mycoins_list {
    padding: 30px 15px;
    /*border-bottom: #dcdddc 1px dashed;*/
}
.mycoins_list:nth-child(even) {
    /*background: #f7f7f7;*/
}
.mycoins_list a {
    display: block;
    position: relative;
}
.mycoins_list a .mark-label-school {
    position: absolute;
    top: 0;
    left: 0;
}
.mycoins_list a .mark-label-arrow2 {
    top: 5px;
    margin-left: 5px;
}

.mycoins_list .tip-expire {
    display: none;
    position: absolute;
    top: 35px;
    left: 17%;
    width: 22px;
    height: 22px;
    padding: 4px;
    z-index: 99;
}

.mycoins_list .tip-expire:before,
.mycoins_list .tip-new:before {
    margin-right: 0;
}
.mycoins_list .badge:nth-child(2) {
    
}
.mycoins_list .tip-new {
    position: absolute;
    top: 10px;
    right: 5px;
    transform: translateX(-50%) rotate(15deg);
    height: 22px;
    padding: 4px;
    z-index: 99;
    font-size: 0.8rem;
    border-radius: 5px;
    background: #ff9800;
}
.mycoins_list .tip-new:after, 
.mycoins_list .tip-privilege:after {
    position: absolute;
    display: block;
    content: " ";
    bottom: -12px;
    left: 50%;
    margin-left: -6px;
    border: solid transparent;
    border-top: 12px solid #ff9800;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.mycoins_list .tip-privilege {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    height: 22px;
    padding: 4px;
    z-index: 99;
    background: none;
}
.mycoins_list .tip-privilege:before {
    display: inline-block;
    position: absolute;
    top: -6px;
    left: -14px;
    width: 36px;
    margin-top: 3px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_special_org.svg);
}
.mycoins_list .tip-new.tip-privilege:before {
    display: inline-block;
    position: absolute;
    top: -20px;
    width: 25px;
    margin-top: 3px;
    content: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_special_org.svg);
}
.tip-event {
    position: absolute;
    right: 8px;
    top: -3px;
    width: 13px;
    height: 13px;
    padding: 0;
    border: #fff 2px solid;
}

/*my-feeling-pic*/
.my-feeling-pic {
    position: absolute;
    top: -5px;
    left: -2px;
    z-index: 100;
    background-color: #FFF;
    width: 32px;
    height: 32px;
    border-radius: 100%;
}
.user-detail-pic .my-feeling-pic {
    top: -2px;
    left: -1px;
}
.my-feeling-pic img {
    width: 30px;
}

.mycoins_list .store_pic,
.m-coins-pic,
.w-coins-pic {
    width: 100%;
    background-color: #5cb2a1;
    background-image: url("../../assets/images/coins_dot.png") !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% !important;
    border-radius: 100%;
    padding: 12%;
    -webkit-box-shadow: 4px 2px #4a9183;
    -moz-box-shadow: 4px 2px #4a9183;
    box-shadow: 4px 2px #4a9183;
}
.coins_outline_m .store_pic {
    background-color: #5cb2a1 !important;
    -webkit-box-shadow: 4px 2px #4a9183 !important;
    -moz-box-shadow: 4px 2px #4a9183 !important;
    box-shadow: 4px 2px #4a9183 !important;
}
.coins_outline_m .total_coins {
    border: #5cb2a1 5px solid !important;
    -webkit-box-shadow: 3px 1px #4a9183 !important;
    -moz-box-shadow: 3px 1px #4a9183 !important;
    box-shadow: 3px 1px #4a9183 !important;
}
.coins_outline_m.btn-add-hide-coins .total_coins {
    background: #5cb2a1 !important;
}

.m-coins-pic,
.w-coins-pic,
.coins-pic {
    display: inline-block;
    width: 60px;
    height: 60px;
    padding: 8px;
    line-height: initial;
    flex: 0 0 60px;
}

.coin-xs {
    flex: 0 0 30px;
}

.coin-s-20 {
    display: inline-block;
    width: 20px !important;
    height: 20px !important;
    padding: 2px 2px !important;
    flex: 0 0 20px !important;
}
.coin-s-20 img{
    position: relative;
    /*top: -3px !important;*/
}

.coin-s-25 {
    display: inline-block;
    width: 25px !important;
    height: 25px !important;
    padding: 3px 3px !important;
    flex: 0 0 25px !important;
}
.coin-s-25 img{
    position: relative;
    /*top: -3px !important;*/
}
.m-coins-pic.coin-s-25 {
    box-shadow: 1px 1px #4a9183 !important;
}
.w-coins-pic.coin-s-25 {
    box-shadow: 1px 1px #b44033 !important;
}

.coin-s-30 {
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    padding: 4px !important;
}
.m-coins-pic.coin-s-30 {
    box-shadow: 2px 1px #4a9183 !important;
}
.w-coins-pic.coin-s-30 {
    box-shadow: 2px 1px #b44033 !important;
}
.coin-s-30 img{
    position: relative;
    /*top: -3px !important;*/
}

.coin-s-35 {
    display: inline-block;
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
    padding: 4px !important;
}
.m-coins-pic.coin-s-35 {
    box-shadow: 2px 1px #4a9183 !important;
}
.w-coins-pic.coin-s-35 {
    box-shadow: 2px 1px #b44033 !important;
}

.coin-s-40 {
    display: inline-block;
    width: 40px !important;
    height: 40px !important;
    padding: 4px 4px !important;
    flex: 0 0 40px !important;
}
.coin-s-40 img{
    position: relative;
    /*top: -3px !important;*/
}

.coin-s-50 {
    display: inline-block;
    width: 50px !important;
    height: 50px !important;
    padding: 6px 6px !important;
    flex: 0 0 50px !important;
}
.coin-s-50 img{
    position: relative;
    /*top: -3px !important;*/
}

.coin-big-250 {
    display: inline-block;
    width: 250px !important;
    height: 250px !important;
    padding: 32px !important;
    flex: 0 0 250px !important;
}
.coin-big-200 {
    display: inline-block;
    width: 200px !important;
    height: 200px !important;
    padding: 23px !important;
    flex: 0 0 200px !important;
}
.coin-big-80 {
    display: inline-block;
    width: 80px !important;
    height: 80px !important;
    padding: 8px !important;
    flex: 0 0 80px !important;
}
.coin-big-100 {
    display: inline-block;
    width: 100px !important;
    height: 100px !important;
    padding: 12px !important;
    flex: 0 0 100px !important;
}
.coin-big {
    display: inline-block;
    width: 120px !important;
    height: 120px !important;
    padding: 15px !important;
    flex: 0 0 120px !important;
}
.coin-big-140 {
    display: inline-block;
    width: 140px !important;
    height: 140px !important;
    padding: 18px !important;
    flex: 0 0 140px !important;
}
.coin-big-outline-w {
    border-radius: 120px;
    background: #FFF;
    padding: 5px !important;
    box-shadow: 0px 0px 10px 0px rgb(107 111 130 / 40%);
}
.coin-big-outline-w img {
    width: 100%;
    border-radius: 120px;
}
.coin-big-outline-w.hide_coin {
    background: #3023ae; /* Old browsers */
    background: -moz-linear-gradient(45deg, #3023ae 0%, #c86dd7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #3023ae 0%,#c86dd7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #3023ae 0%,#c86dd7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3023ae', endColorstr='#c86dd7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
.coin-big-outline-w.hide_coin:after {
    display: block;
    content: " ";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/iconCircleCloakPur@3x.png) no-repeat;
    background-size: 100%;
}
.coin-small {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 6px !important;
    margin-right: 10px;
    flex: 0 0 50px !important;
}

.mycoins_list .store_pic img,
.m-coins-pic img,
.w-coins-pic img,
.coins-pic img {
    width: 100% !important;
    height: auto !important;
    border-radius: 100%;
    vertical-align: top;
    position: relative;
    top: 0px !important;
}
.coins-pic {
    border-radius: 100%;
    border: #e8e8e8 1px solid;
    box-shadow: 0px 0px 5px 1px rgba(128, 128, 128, 0.15);
    padding: 3px;
}
.coins-pic img {
    
}

.pic-b {
    width: 80px;
    height: 80px;
    padding: 12px;
}

.mybag_block .mycoins_list .total_coins, 
.store_pic .total_coins, 
.w-coins-pic-outline .total_coins, 
.m-coins-pic .total_coins, 
.w-coins-pic .total_coins {
    position: relative;
    z-index: 10;
    padding: 5px;
    font-size: 1.5rem;
    background: #FFF;
    margin: -20px 5px 0 5px;
    border: #5cb2a1 5px solid;
    border-radius: 40px;
    line-height: 0.8;
    font-size: 1.2rem;
    -webkit-box-shadow: 3px 1px #4a9183;
    -moz-box-shadow: 3px 1px #4a9183;
    box-shadow: 3px 1px #4a9183;
}
.m-coins-pic .total_coins, 
.w-coins-pic .total_coins {
    margin: -10px -5px 0 -5px;
}

.mycoins_list .title {
    margin-top: 5px;
}
.mycoins_list_w .mycoins_list .store_pic,
.w-coins-pic, 
.mybag_block .mycoins_list.coins_outline_w .store_pic {
    background-color: #ea5848 !important;
    -webkit-box-shadow: 4px 2px #b44033;
    -moz-box-shadow: 4px 2px #b44033;
    box-shadow: 4px 2px #b44033;
}

.mycoins_list_w .mycoins_list .total_coins, 
.w-coins-pic .total_coins, 
.mybag_block .mycoins_list.coins_outline_w .total_coins, 
.w-coins-pic-outline .total_coins {
    font-size: 1.2rem;
    border-color: #ea5848;
    -webkit-box-shadow: 3px 1px #b44033;
    -moz-box-shadow: 3px 1px #b44033;
    box-shadow: 3px 1px #b44033;
}

.mycoins_list_merge .mycoins_list .store_pic {
    padding: 5%;
    /*background: #FFF;*/
    -webkit-box-shadow: 0px 0px 9px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0px 0px 9px rgb(0 0 0 / 20%);
    box-shadow: 0px 0px 9px rgb(0 0 0 / 20%);
}
.mycoins_list_merge .mycoins_list .store_pic.w-coins-pic, 
.mycoins_list_merge .mycoins_list .store_pic.m-coins-pic {
    padding: 12%;
    height: auto;
}
.mycoins_list_merge .mycoins_list .total_coins {
    color: #e55942;
    border: 0;
    margin-bottom: 10px;
    bottom: 0;
    -webkit-box-shadow: 0px 0px 9px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0px 0px 9px rgb(0 0 0 / 20%);
    box-shadow: 0px 0px 9px rgb(0 0 0 / 20%);
}
.mycoins_list_merge .mycoins_list .total_coins.total_coins-m {
    color: #5cb2a1;
}
.mycoins_list_merge .mycoins_list .total_coins img {
    display: none;
    height: 15px;
}
.mycoins_list_merge .mycoins_list.off .store_pic, 
.mycoins_list_merge .mycoins_list.off-over .store_pic, 
.mycoins_list_merge .mycoins_list.off .title, 
.mycoins_list_merge .mycoins_list.off-over .title, 
.mycoins_list_merge .mycoins_list.off .total_coins span, 
.mycoins_list_merge .mycoins_list.off-over .total_coins span {
    opacity: 0.7;
}
.mycoins_list_merge .mycoins_list.off .off-txt, 
.mycoins_list_merge .mycoins_list.off-over .off-txt {
    position: absolute;
    color: #FFF;
    background: #faa062;
    margin: -20px 0 10px 0;
    padding: 4px;
    border-radius: 7px;
    white-space: nowrap;
    min-width: 124px;
    font-size: 0.9rem;
    width: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media (max-width: 374px) {
    .mycoins_list_merge .mycoins_list.off .off-txt, 
    .mycoins_list_merge .mycoins_list.off-over .off-txt {

    }
}
.mycoins_list_merge .mycoins_list.off-over .off-txt {
    background: #e57c7c;
}
.mycoins_list_merge .mycoins_list.off-over .off-txt a {
    color: #FFF;
}
.mycoins_list_merge .mycoins_list.hide_coin .store_pic {
    position: relative;
    background: #3023ae; /* Old browsers */
    background: -moz-linear-gradient(45deg, #3023ae 0%, #c86dd7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #3023ae 0%,#c86dd7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #3023ae 0%,#c86dd7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3023ae', endColorstr='#c86dd7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
.mycoins_list_merge .mycoins_list.hide_coin .store_pic:after {
    display: block;
    content: " ";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 28px;
    height: 28px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/iconCircleCloakPur@3x.png) no-repeat;
    background-size: 100%;
}

.w-coins-pic-outline {
    text-align: center;
}
.w-coins-pic-outline img {
    border:0 !important;
}

.mycoins_list_s .mycoins_list .store_pic {
    background-color: #a9a9a9;
    -webkit-box-shadow: 4px 2px #7d7d7d;
    -moz-box-shadow: 4px 2px #7d7d7d;
    box-shadow: 4px 2px #7d7d7d;
}

.mycoins_list_s .mycoins_list .total_coins {
    color: #63b3a1;
    border-color: #a9a9a9;
    -webkit-box-shadow: 3px 1px #7d7d7d;
    -moz-box-shadow: 3px 1px #7d7d7d;
    box-shadow: 3px 1px #7d7d7d;
}

.mycoins_list_s .mycoins_list .total_coins span {
    position: relative;
    top: 2px;
    display: inline-block;
    margin-left: 5px;
}

.mycoins_list_s_w .mycoins_list .total_coins {
    color: #e55942;
}

.mycoins_list fieldset.choice-store-public {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: left;
}
.mycoins_list fieldset.choice-store-public.on {
    display: block;
}
.mycoins_list fieldset.choice-store-public h5 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0;
    color: #000;
}
.mycoins_list fieldset.choice-store-public div {
    position: relative;
    color: #6f6f6f;
}
.mycoins_list fieldset.choice-store-public .btn-secondary {
    background-color: #b7b7b7;
    border-color: #b7b7b7;
    border-radius: 0.5rem;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}
.mycoins_list fieldset.choice-store-public label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 999;
}
.mycoins_list fieldset.choice-store-public input {
    -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;     /* FireFox */
    appearance: none;
}
.mycoins_list fieldset .icheckbox_flat-grey {
    width: 22px;
    height: 22px;
    border: #99a9aa 1px solid;
    background-color: #FFF;
    border-radius: 7px;
    z-index: 99;
    margin-right: 0;
    position: absolute;
    top: 25px;
    left: 50%;
    margin-left: -11px;
}
.btn-select-public, .btn-all-public.off {
    display: none;
}
.btn-select-public.on {
    display: inline-block;
}

.mycoins_list_block2 {
    justify-content: center;
}
.mycoins_list_block2 .mycoins_list {
    border-bottom: 0;
}

.mybag_block .mycoins_list.btn-add-hide-coins .total_coins {
    background: #5cb2a1;
    color: #FFF;
    padding: 6px 2px;
    font-size: 0.8rem;
}
.mybag_block .mycoins_list.btn-add-hide-coins .total_coins, 
.mybag_block .mycoins_list.coins_outline_m.btn-add-hide-coins .total_coins {
    background: #5cb2a1;
}
.mycoins_list_w .mycoins_list.btn-add-hide-coins .total_coins, 
.mybag_block .mycoins_list.coins_outline_w.btn-add-hide-coins .total_coins {
    background: #ea5748;
}
.mycoins_list.empty .store_pic,
.mycoins_list.empty .title {
    /*opacity: 0.2;
    background-image: url(../images/icon/icon_shop.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center center;*/
}
.mycoins_list.empty .store_pic:before, 
.mycoins_list.empty .store_pic:after, 
.mycoins_list.btn-add-hide-coins .store_pic:before, 
.mycoins_list.btn-add-hide-coins .store_pic:after {
    display: none;
}
.mycoins_list.btn-go-hide-m a, 
.mycoins_list.btn-go-hide-w a {
    display: block;
    padding: 20px 5px;
    border: #5bb2a1 5px solid;
    text-align: center;
    color: #acadad;
    border-radius: 0.5rem;
    box-shadow: 0px 1px 15px 1px rgba(169, 169, 169, 0.39);
}
.mycoins_list.btn-go-hide-m a {
    border: #5bb2a1 5px solid;
}
.mycoins_list.btn-go-hide-w a {
    border: #ea5848 5px solid;
}
.mycoins_list.btn-go-hide-m .icon, 
.mycoins_list.btn-go-hide-w .icon {
    font-size: 2rem;
    width: 30px;
    height: 30px;
    margin: 0 auto 10px auto;
    line-height: 30px;
    border-radius: 100%;
    border: #acadad 2px solid;
}

.mycoins_list .store-rate {
    position: absolute;
    top: 28px;
    left: 17px;
}

/*================================================================================
    mycoins_store_list_block
================================================================================*/
.mycoins_store_list_block .media {
    position: relative;
    background: #FFF;
    margin-bottom: 5px;
    padding: 15px;
    flex-wrap: wrap;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}

.mycoins_store_list_block .media .suspend-mark {
    width: 75px;
    top: 60px;
    left: 10px;
}

.mycoins_store_list_block .media .store_pic img {
    width: 60px;
    border: #e8e8e8 1px solid;
}

.mycoins_store_list_block .media .tip-new {}
.mycoins_store_list_block .media .media-heading {
    font-size: 1.15rem;
}
.mycoins_store_list_block .media .media-content {
    font-size: 0.8rem;
    line-height: 1.5rem;
}

.mycoins_store_list_block .media .tip-expire {
    margin-top: 5px;
}

.tip-expire:before {
    font: normal normal normal 13px/1 LineAwesome;
    content: "\f24b";
    margin-right: 5px;
}

.tip-new:before {
    /*font-family: meteocons !important;
    content: "\e901";*/
}

.mycoins_store_list_block .media .media-body {
    position: relative;
}
.mycoins_store_list_block .media-right .distance-num {
    color: #d4646b;
    text-align: center;
}
.mycoins_store_list_block .media .media-right.icon {
    /*position: absolute;
    top: 0;
    right: 0;*/
    display: block;
    font-size: 1.5rem;
    margin-top: -5px;
    padding-right: 20px;
    text-align: right;
}
.mycoins_store_list_block .media .store-rate {
    margin: 5px 0;
}
.mycoins_store_list_block .media .media-right.icon {
    display: inline-block;
    margin-top: -2px;
    padding-right: 0;
    font-size: 0.7rem !important;
}

.mycoins_store_list_block .media .icon span {
    position: relative;
    display: inline-block;
    top: 2px;
}
.mycoins_store_list_block .media .icon span.txt {
    display: block;
    font-size: 0.9rem;
    color: #b3b3b3;
}
.store-bg-card .media .icon span.txt {
    font-size: 0.9rem;
    color: #d0d0d0;
}
.egg-bg-card .media .icon span.txt {
    color: #696969;
}

.m-coins,
.w-coins,
.wm-coins {
    font-size: 2rem;
    color: #63b3a1;
}

.w-coins {
    color: #e55942;
}
.wm-coins {
    color: #e1ac1d;
}
.egg-coins {
    color: #70a2b5;
}
.text-coins {
    line-height: 0;
    margin: 16px 0;
}
.text-coins .txt {
    display: block;
    font-size: 1rem;
    margin-bottom: 12px;
    color: #000000;
}
.hammer-coins {
    color: #9c5555;
}

.m-coins img,
.w-coins img ,
.wm-coins img {
    height: 19px;
    position: relative;
    top: -2px;
}

.media .media-link {
    display: flex;
    width: 100%;
    border-top: #eaeaea 1px solid;
    margin-top: 15px;
    margin-bottom: -10px;
    padding-top: 5px;
}

.media .media-link a {
    flex: 1;
    color: #7b7b7b;
    text-align: center;
    border-left: #eaeaea 1px solid;
}
.media .media-link a.btn-block {
    width: 100%;
}

.media .media-link a:first-child {
    border: none;
}
.mycoins_store_list_block .media-list .media .media-right {
    text-align: right;
}
.hide-coins {
    position: relative;
    top: -8px;
    margin-left: 5px;
    display: inline-block;
    text-align: center;
    margin-top: 5px;
    margin-right: 15px;
    font-size: 0.7rem;
    color: #ababab;
    background: #FFF;
    border-radius: 15px;
    padding: 2px 5px;
    box-shadow: 0px 1px 0px 2px rgba(110, 106, 144, 0.12);
}
.hide-coins span {
    display: block;
    font-size: 0.9rem;
}
.mycoins_store_list_block .media .dropdown-more {
    position: absolute;
    top: 0;
    right: 5px;
}
.btn-s2 {
    font-size: 0.8rem;
    font-weight: normal;
    color: #904d4d;
    background: #FFF;
    border-radius: 15px;
    padding: 2px 5px;
    margin-left: 5px;
    box-shadow: 0px 1px 0px 2px rgba(110, 106, 144, 0.12);
}
.btn-s {
    font-size: 0.8rem;
    font-weight: normal;
    color: #fffefe;
    background: #bbb;
    border-radius: 15px;
    padding: 2px 5px;
    margin: 2px 0;
    display: inline-block;
    transition: 0.3s;
}
.btn-s:hover {
    color: #FFF;
    background: #333;
}
.icon-bookmark {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
}
.icon-bookmark:before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 3px;
    background-image: url(../images/icon/bookmark.svg);
    background-size: 100%; 
}
.btn-add-favor.active .icon-bookmark:before {
    background-image: url(../images/icon/bookmark_b.svg);
}

.icon-heart-mark {
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
}
.icon-heart-mark:before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/btn_circle_favor_w@2x.png);
    background-size: 100%; 
}
.btn-add-favor.active .icon-heart-mark:before {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/btn_circle_favor_w_on@2x.png);
}

/*------- mycoins_kol_list ------------*/
.mycoins_kol_list .media {
    border-radius: 8px;
    align-items: center;
}
.mycoins_kol_list .media .media-left {
    padding-right: 20px;
}
.mycoins_kol_list .media .media-left .w-coins-pic {
    position: relative; 
    padding: 10px; 
    width: 80px; 
    height: 80px;
}
.mycoins_kol_list .media .media-content {
    font-size: 1rem;
}
.mycoins_kol_list .media-list .media .media-right {
    margin-top: 5px;
    align-self: flex-start;
}
.mycoins_kol_list .media .media-heading {
    margin: 5px 0;
}
.mycoins_kol_list .media .media-heading span {
    display: inline-block;
    margin-right: 5px;
    font-size: 0.9rem;
}
.kol-list-activity-info {
    display: flex;
    align-items: center;
    position: relative;
    float: left;
    width: 100%;
    padding: 10px;
    overflow: hidden;
    margin: 15px 0;
    border-radius: 8px;
    background: #fff3f3;
    border: #efefef 1px solid;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
}
.kol-list-activity-info h5 {
    margin: 5px 0;
    font-size: 1.1rem;
}
.kol-list-activity-info .btn-right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.kol-list-activity-info .activity-pic {
    margin-bottom: 10px;
    margin-left: -10px;
    margin-right: -10px;
}
.kol-list-activity-info .activity-pic img {
    max-width: 100%;
}
.kol-list-activity-info .info-left {
    margin-right: 20px;
}
.kol-list-activity-info .info-right {
    flex: 1;
    padding-right: 80px;
}
/*-------- kol index list ---------*/
.kol-index-list .kol-list-activity-info {
    display: flex;
    padding: 10px;
    align-items: center;
}
.kol-index-list .kol-list-activity-info .activity-pic {
    margin-left: 0;
    margin-right: 0;
    border-radius: 5px;
    overflow: hidden;
}
.kol-index-list .kol-list-activity-info .info-left {
    margin-right: 20px;
}
.kol-index-list .kol-list-activity-info .info-right {
    flex: 1;
    padding-right: 80px;
}
.kol-index-list .kol-list-activity-info .store_pic img {
    border: 0;
}
.kol-index-list .kol-list-activity-info .btn-right {
    
}
/*---------- kol detail -------*/

@media (max-width: 600px) {
    .kol_detail_block .store-slide {
        
    }
}
.kol_detail_block .store-slide > a img, .kol_detail_block .store-slide .cabinet_banner {
    
}
.kol_detail_block .store-info {
    position: relative;
}
.kol_detail_block .store-info .media-heading {
    margin-top: 20px;
}
/*.btn-go-kol-page {
    margin-top: 18px;
    display: inline-block;
    background: #ffffff;
    padding: 5px;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 2px rgba(62, 62, 62, 0.12);
}
*/
.btn-go-kol-page {
    margin-top: 18px;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 30px;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
}
.btn-go-kol-page i.ft-home, 
.btn-go-kol-page i.la {
    position: relative;
    top: 2px;
    width: 20px;
    height: 20px;
    font-size: 1rem !important;
    color: #FFF;
    margin-right: 5px;
    text-align: center;
    border-radius: 20px;
    padding: 3px;
    background: rgb(255 255 255 / 0.1);
}
.btn-go-kol-page span {
    color: #FFF;
}

/*---------- kol profile -------*/
.kol-list-activity-info-outer {
    display: flex;
    width: 100%;
    padding: 0 1rem;
    background: #FFF;
}
.user-profile-block .kol-list-activity-info {
    margin: 0 0 30px 0;
    /*margin: 0 1rem 10px 1rem;
    width: calc(100% - 2rem);*/
}

/*================================================================================
    mycoins_store_list_detail_block
================================================================================*/
.topic_activity_desc_block {
    margin: 15px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 1px 1px 10px #01010124;
}
.topic_activity_desc_block .pic img {
    width: 100%;
}
.topic_activity_desc_block .txt a {
    display: block;
    padding: 15px;
}
.topic_activity_desc_block .txt .badge {
    margin-right: 10px;
}
.store-slide {
    position: relative;
    margin: -2rem -7px 0 -7px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #f2f2f2;
}

.store-slide img {
    width: 100%
}

.topic-pic {
    background-color: #000;
}
.topic-pic > img {
}
.kol_detail_block .topic-pic > img {
    opacity: 1;
}
.topic-pic .store-coin-box {
    position: absolute;
    bottom: -30px;
    left: 50%; 
    transform: translateX(-50%);
}
#nav-tabs-fixed.on {
    position: fixed;
}
.mycoins_store_list_detail_block .filter-block {
    text-align: left;
}

.mycoins_store_list_detail_block .filter-block .btn {
    height: 29px;
}
.mycoins_store_list_detail_block .filter-block .btn.btn-red {
    height: auto;
}
.filter-select-btn-block {
    margin-bottom: 0;
}
.filter-select-btn-block select, 
.filter-select-btn-block input, 
.filter-select-btn-block .btn {
    height: 35px !important;
}
.filter-select-btn-block input, 
.filter-select-btn-block .btn {
    padding: 5px;
}
.filter-select-btn-block input {
    width: 120px !important;
}
@media (max-width: 414px) {
    .filter-select-btn-block input {
        width: 90px !important;
    }
}


.mycoins_store_list_detail_block .filter-block .btn.btn-filter-i {
    position: relative;
    padding-left: 27px;
}

.mycoins_store_list_detail_block .filter-block .btn.btn-filter-i i {
    position: absolute;
    left: 10px;
    top: 7px;
}

.btn-filter-store-list-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    background: #fbfbfb;
}
.sourcefrom-txt {
    margin: 10px 10px 0 10px;
    color: #9b9b9b;
}
.branch-store-list-block .sourcefrom-txt {
    margin: -10px 0 10px 0;
    text-align: left;
}
@media (max-width: 768px) {
    .sourcefrom-txt {
        width: 100%;
        text-align: right;
        background: #FFF;
        margin: 15px 0px -15px 0px;
        padding: 10px;
        border-bottom: 1px solid #f4f5fa;
    }
    .branch-store-list-block .sourcefrom-txt {
        margin: 0;
        background: none;
        margin-top: -15px;
        text-align: left;
    }
}
.btn-filter-store-list-block .nav {
    border-bottom: 0 !important;
}
.btn-filter-store-list {
    margin: 15px 15px 0 15px; 
}
.btn-filter-store-list a {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 7px;
    border: #fbfbfb 1px solid;
}
.btn-filter-store-list .pic {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 30px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.btn-filter-store-list a.active {
    color: #ca4f6d;
    border: #ca4f6d 1px solid;
}
.btn-filter-store-list a:hover .pic, 
.btn-filter-store-list a.active .pic {
    /*background-position: bottom center;*/
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    filter: gray;
}
/*.btn-filter-store-list1 .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_store_list_filter1.svg);
}
.btn-filter-store-list2 .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_store_list_filter2.svg);
}
.btn-filter-store-list3 .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_store_list_filter3.svg);
}*/
.btn-filter-store-list.filter-btn .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_store_list_filter_btn.svg);
}
.btn-filter-store-list.filter-btn {
    flex: 1;
    text-align: right;
}
.btn-filter-store-list.filter-btn .pic {
    margin-right: 0;
}

.mycoins_store_list_detail_block > .card {
    background: transparent !important;
    box-shadow: none !important;
}
.mycoins_store_list_detail_block > .card > .card-header  {
    background: #FFF;
    border-radius: 0;
}
.mycoins_store_list_detail_block .tab-content > .tab-pane, 
.mycoins_store_list_detail_block .tab-content > .tab-pane .message-box-empty {
    background: #FFF;
}
.mycoins_store_list_detail_block .tab-content > .tab-pane.store-news-block {
    background: none;
}
@media (max-width: 767px) {
    .store-news-block .act-polist-media-block {
        background: #f1f2f7;
    }
    .mycoins_store_list_detail_block .store-info {
        background: none;
    }
}

.mycoins_store_list_detail_block .media {
    position: relative;
    flex-wrap: wrap;
    border-top: 3px solid #f4f5fa;
    padding: 1rem 1.3rem;
}

.mycoins_store_list_detail_block .media .store_pic img {
    width: 70px;
    box-shadow: 0px 2px 10px 0px rgba(107, 111, 130, 0.3);
    border: #FFF 3px solid;
}
.store-rate .icon {
    display: inline-block;
    position: relative;
    top: -3px;
    margin-bottom: 5px;
}
.store-rate .icon img {
    width: 25px;
}
.store-rate .txt {
    display: inline-block;
    margin-left: -5px;
}
.store-rate.rate1 .txt {
    background-color: #28D094;
}
.store-rate.rate2 .txt {
    background-color: #1E9FF2;
}
.store-rate.rate3 .txt {
    background-color: #f96189;
}
.store-rate.rate4 .txt {
    background-color: #c14eff;
}
.store-rate.rate5 .txt {
    background-color: #fcb300;
}

.store-info .btn-outline-secondary, 
.icon-btn-r-block .btn-outline-secondary, 
.icon-btn-l-block .btn-outline-secondary {
    color: #727272;
    border-color: #cfcfcf;
    display: inline-flex;
    align-items: center;
    height: 30px;
    justify-content: center;
}
.icon-btn-r-block .btn-outline-secondary.invite, 
.icon-btn-r-block .btn-outline-secondary.on, 
.personal-btn-block .btn-outline-secondary.invite, 
.personal-btn-block .btn-outline-secondary.on {
    color: #FFF;
    border-color: #cfcfcf;
    display: inline-flex;
    align-items: center;
    height: 30px;
    justify-content: center;
}
.icon-btn-r-block .btn-outline-secondary.invite, 
.personal-btn-block .btn-outline-secondary.invite {
    background-color: #999db3;
}
.icon-btn-r-block .btn-outline-secondary.on, 
.personal-btn-block .btn-outline-secondary.on {
    background-color: #6B6F82;
}
.store-info .btn-add-favor-store.on {
    color: #FFF;
    background: #727272;
}
.icon-btn-r-block .btn-outline-secondary.dropdown-toggle::after, 
.icon-btn-r-block .btn-secondary.dropdown-toggle::after, 
.icon-btn-l-block .btn-outline-secondary.dropdown-toggle::after {
    top: -6px;
    margin: 0 0.5em 0 0;
}
.dropdown-more2:after {
    display: none;
}
.store-info .btn-outline-secondary:hover, 
.icon-btn-r-block .btn-outline-secondary:hover, 
.icon-btn-r-block .btn-secondary:hover, 
.icon-btn-l-block .btn-outline-secondary:hover {
    color: #FFF;
}
.mycoins_store_list_detail_block .media .distance-num {
    color: #d4646b;
    text-align: center;
}

.icon-btn-r-block {
    position: absolute;
    top: 15px;
    right: 1rem;
    text-align: right;
    z-index: 10;
}
.icon-btn-r-block .btn-outline-secondary, 
.icon-btn-l-block .btn-outline-secondary {
    background-color: rgb(255 255 255 / 90%);
}
.icon-btn-r-block .btn-outline-secondary:hover, 
.icon-btn-l-block .btn-outline-secondary:hover {
    background-color: #6B6F82;
}
.icon-btn-r-block .btn-outline-secondary i, 
.icon-btn-l-block .btn-outline-secondary i {
    /*margin-right: 3px;*/
}
.icon-btn-r-block i.ft-user-plus, 
.icon-btn-r-block i.ft-user-check {
    font-size: 1.1rem;
    margin-right: -1px;
}
.icon-btn-l-block {
    position: absolute;
    top: 15px;
    left: 1.5rem;
    text-align: center;
}
.btn-color, .btn-color:hover {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1;
    border-radius: 2rem;
    color: #FFF;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
}
.btn-color img {
    width: 18px;
    position: relative;
    margin-top: -2px;
}
.btn-give-green, .btn-give-red {
    padding: 5px 15px;
}
.btn-give-green {
    color: #FFF;
    background: #309e8a;
}
.btn-give-red {
    color: #FFF;
    background: #cd506d;
}
.btn-give-green:hover {
    color: #FFF;
    background: #248976;
}
.btn-give-red:hover {
    color: #FFF;
    background: #cd506d;
}
@media(max-width: 600px) {
    .icon-btn-r-block .btn-outline-secondary.dropdown-toggle::after {
        display: none;
    }
    .icon-btn-r-block .btn-outline-secondary, 
    .icon-btn-r-block .btn-secondary {
        border-radius: 100%;
        width: 30px;
        height: 30px;
        padding: 8px 5px;
    }
    .icon-btn-r-block {
        /*width: 100%;*/
        right: 0;
        padding: 0 5px;
    }
    .icon-btn-l-block {
        left: 1rem;
    }
    .icon-btn-r-block a span {
        display: none;
    }
    .icon-btn-r-block .btn-add-follow-user {
        width: auto;
        border-radius: 20px;
        float: left;
        padding: 8px 10px;
    }
    .icon-btn-r-block .btn-add-follow-user span {
        display: block;
    }
}

.store-info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.store-info .shop_detail {
    width: 100%;
    margin: 0 auto;
    margin-top: -50px;
    text-align: center;
}
.store-info .media-heading {
    margin-top: 30px;
    color: #000;
    font-size: 1.2rem;
}
.store-info .media-heading .text-gray {
    color: #6b6b6b;
}

.store-info .media-heading .store-rate {
    font-size: 0.8rem;
}

.store-info .media-content {
    margin-top: 10px;
}

@media(min-width: 768px) {
    .store-info .tip-expire {
        top: -7px;
        margin-left: 7px;
    }
}


.btn-add-favor-store {
    padding: 6px 10px;
}
.btn-add-favor-store.on .la-heart-o:before {
    color: #db546d;
    content: "\f233";
}
@media(max-width: 600px) {
    .btn-add-favor-store {
        padding-top: 7px !important;
    }
    .btn-add-favor-store.on {
        background: #db546d;
    }
    .btn-add-favor-store.on .la-heart-o:before {
        color: #FFF;
    }
}

.store-info .media .btn.btn-give {
    display: inline-block;
    position: relative;
    top: -3px;
    padding: 1px 10px;
    font-size: 0.8rem;
}

.btn-back-topic-list {
    position: absolute;
    top: -30px;
    right: 0;
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #FFF;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    box-shadow: -5px 0px 15px 1px rgb(62 57 107 / 12%);
}
.store-coin-box {
    position: relative;
    display: inline-block;
}
.task-desc {
    display: inline-block;
    /*color: #FFF;
    background: #c37979;*/
    border: #efd6c4 1px solid;
    color: #d6905d;
    background: #fff9f5;
    border-radius: 3px;
    padding: 2px 10px;
    margin-bottom: 5px;
}
.task-desc.suspend-on {
    border: #f5c2c2 1px solid;
    color: #d65d5d;
    background: #f9f0f0;
}
.suspend-mark {
    position: absolute;
    top: 79px;
    left: 68px;
    width: 100px;
    transform: rotate(-5deg);
    background: rgb(255 255 255 / 80%);
    border-radius: 5px;
}
.store-info .task-desc.suspend-on {
    margin: 10px 20px 0 20px;
}
.store-info2 {
    margin-top: -30px;
}
.store-info2 .media {
    flex: 1;
}
.store-info2 .task-desc.suspend-on {
    margin-right: 0;
    margin-left: 0;
}
.store-info2 .suspend-mark {
    top: 90px;
    left: 60px;
}
.topic-pic .suspend-mark {
    left: -50px;
    top: 70px;
    transform: rotate( 
5deg
 );
}
.suspend-mark img {
    width: 100%;
}

/*--- nav-icon2 ---*/
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item {
    position: relative;
    border-bottom: 1px solid #f4f5fa;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item:before {
    position: absolute;
    top: 15%;
    left: 0;
    content: " ";
    display: none;
    border-left: rgb(231,231,231) 1px solid;
    width: 1px;
    height: 70%;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item:first-child:before {
    display: none;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link {
    padding: 0.5rem;
    display: inline-block;
    overflow: visible;
    margin: 0;
    border: 0;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link > span {
    display: block;
    font-size: inherit;
    line-height: 1.7;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link > span.icon {
    display: inline-block;
    position: relative;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link span.icon img {
    height: 22px;
    opacity: 0.7;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link > span.icon .badge-up {
    z-index: 10;
    top: -2px;
    right: -10px;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link.active {
    font-weight: normal !important;
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item.nav-store-coupon a.nav-link.active {
    background: rgb(255 241 241);
}
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item .nav-store-coupon .icon.no-login img {
    height: 25px;
    margin-bottom: -2px;
}
/*.nav.nav-tabs.nav-underline.nav-icon2 .nav-item:first-child a.nav-link span.icon img, */
.nav.nav-tabs.nav-underline.nav-icon2 .nav-item a.nav-link.active span.icon img {
    opacity: 1;
}

/*nav-outline*/
.nav-main-tabs {
    border-bottom: #f4f5fa 2px solid;
}
.nav.nav-tabs.nav-underline.nav-outline {
    padding: 15px 10px;
}
.nav.nav-tabs.nav-underline.nav-outline .nav-item {
    padding: 0 5px;
    width: fit-content;
    flex-grow: inherit;
}
.nav.nav-tabs.nav-underline.nav-outline .nav-item a.nav-link {
    border: #efefef 1px solid;
    background-color: #efefef;
    border-radius: 8px;
    width: fit-content;
    overflow: visible;
}
.nav.nav-tabs.nav-underline.nav-outline .nav-item a.nav-link:hover {
    border: #d4646b 1px solid;
}
.nav.nav-tabs.nav-underline.nav-outline .nav-item a.nav-link.active:focus, 
.nav.nav-tabs.nav-underline.nav-outline .nav-item a.nav-link.active {
    font-weight: bold;
    color: #FFF;
    background-color: #d4646b;
    border: #d4646b 1px solid;
}
.nav.nav-tabs.nav-underline.nav-outline .nav-item a.nav-link .tip-event {
    right: -3px;
    top: -5px;
    width: 10px;
    height: 10px;
}

/*-nav-sub-tabs-*/
.nav-sub-tabs {
    display: flex;
    margin-bottom: 0;
    padding: 0;
    border-bottom: #f7f7f7 1px solid;
}
.nav-sub-tabs li {
    text-align: center;
    margin: 0 20px;
}
.nav-sub-tabs li a {
    position: relative;
    display: block;
    padding: 10px 0;
    color: #99999a;
}
.nav-sub-tabs li a.active {
    color: #000;
    border-bottom: #000 2px solid;
}
.nav-sub-tabs li a .tip-event {
    position: static;
    width: 10px;
    height: 10px;
}


/*--- nav-icon3 ---*/
.nav-icon3 a {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/*--- nav-icon-border-red ----*/
.nav-icon-border-red {
    display: flex !important;
    align-items: center;
}
.nav-icon-border-red li {   
}
.nav-icon-border-red li + li {
    margin-left: 10px;
}
.nav-icon-border-red li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 7px;
    border: #FFF 1px solid;
}
.comment_recommend .card-body .nav-icon-border-red li a {
    background-color: #f2f2f2;
}
.nav-icon-border-red li a:hover {
    color: #ca4f6d;
}
.nav-icon-border-red a i {
    margin-right: 5px;
    font-size: 1.4rem !important;
}
.nav-icon-border-red a.active {
    color: #ca4f6d;
    border: #ca4f6d 1px solid;
    background-color: #FFF !important;
}
.nav-icon-border-red a label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
}
.nav-icon-border-red a.active label {
    color: #ca4f6d;
}
.nav-icon-border-red a.active label:before {
    position: absolute;
    display: block;
    top: -7px;
    left: -7px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 30px;
    background: #ca4f6d;
    color: #fff;
    font-family: feather !important;
    content: "\e926";
}
.nav-icon-border-red a input {
    visibility: hidden;
    position: absolute;
    z-index: -1;
}

.tab-pane11 {
    display: none;
}
#secret_article_img:checked ~ #btn-upload-gallery,
#secret_article_video:checked ~ #btn-upload-video,
#secret_article_music:checked ~ #btn-upload-music {display: block;}

.custom-file-label {
    color: #aaaaaa;
    border: #e4e4e4 1px solid;
    margin: 0 !important;
}
.custom-file-label.selected {
    color: #7d7d7d;

}
.custom-file-input:lang(zh) ~ .custom-file-label::after {
    border-left: #e4e4e4 1px solid;
}


/**/
.store-desc-content {
    padding: 1.5rem;
}
.store-desc-content .task-desc {
    margin: 10px 0 1rem 0;
}
.desc-content-txt img {
    max-width: 100%;
    height: auto !important;
}
.desc-content-txt ul, .desc-content-txt ol {
    padding-left: 20px;
}
.desc-content-txt ul li {
    list-style: cjk-ideographic inside;
    padding-right: 20px;
    margin-bottom: 10px;
}
.desc-content-txt ul li li {
    list-style: decimal;
    padding-right: 20px;
}
.desc-content-txt ol li {
  padding-right: 20px;
  margin-bottom: 10px;
}
.ql-align-center {
    text-align: center;
}
.ql-align-left {
    text-align: left;
}
.ql-align-right {
    text-align: right;
}
.media-btn-social2 {
    margin-bottom: 20px;
}
.media-btn-social2 h5 {
    padding-left: 1.5rem;
}
.media-btn-social2 .outer-bar div {
    display: flex;
    padding: 1rem 1.5rem;
}
.media-btn-social2 .outer-bar div a {
    flex: 0 0 70px;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    border-radius: 8px;
    padding: 5px;
    background: #FFF;
    box-shadow: 0px 1px 15px 1px rgb(62 57 107 / 14%);
}
.media-btn-social2 .outer-bar div a:last-child {
    margin-right: 0;
}
.media-btn-social2 .outer-bar div a span {
    display: block;
    font-size: 0.6rem;
    margin-top: 5px;
    white-space: nowrap;
}
.media-btn-social2 .outer-bar div a img {
    width: 40px;
}

.media-btn-social3 .outer-bar div a {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 0;
    margin: 0 5px;
    text-align: center;
    border-radius: 8px;
    padding: 3px;
    /*background: #c4c4c4;*/
    background: #262626;
    transition: 0.3s;
}
.media-btn-social3 .outer-bar div a img {
    width: 100%;
}
.media-btn-social3 .outer-bar div a.new-on:after {
    display: block;
    position: absolute;
    top: -3px;
    right: -3px;
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #28D094;
    border: #F4F5FA 2px solid;
}
.dashboard-quick-list .media-btn-social3 .outer-bar div a.new-on:after {
    border-color: #FFF;
}
.media-btn-social3 .outer-bar div a:hover.media-btn-social-fb, 
.media-btn-social3 .outer-bar div a.on.media-btn-social-fb {
    background: #395494;
}
.media-btn-social3 .outer-bar div a:hover.media-btn-social-ig, 
.media-btn-social3 .outer-bar div a.on.media-btn-social-ig {
    background: #e13880;
}
.media-btn-social3 .outer-bar div a:hover.media-btn-social-tiktok, 
.media-btn-social3 .outer-bar div a.on.media-btn-social-tiktok {
    background: #000;
}
.media-btn-social3 .outer-bar div a:hover.media-btn-social-yt, 
.media-btn-social3 .outer-bar div a.on.media-btn-social-yt {
    background: #d33c2f;
}
.media-btn-social3 .outer-bar div a:hover.media-btn-social-line, 
.media-btn-social3 .outer-bar div a.on.media-btn-social-line {
    background: #3BC031;
}
.media-btn-social3 .outer-bar div a:hover.media-btn-social-blog, 
.media-btn-social3 .outer-bar div a.on.media-btn-social-blog {
    background: #e88100;
}

.form-group.icon-social-block label {
    margin: 5px 0 !important;
}
.icon-social {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 0;
    margin: 0 5px;
    text-align: center;
    border-radius: 8px;
    padding: 3px;
}
.icon-social img {
    width: 100%;
}
.icon-social-fb {
    background: #395494;
}
.icon-social-ig {
    background: #e13880;
}
.icon-social-tiktok {
    background: #000;
}
.icon-social-yt {
    background: #d33c2f;
}
.icon-social-line {
    background: #3BC031;
}
.icon-social-blog {
    background: #e88100;
}

.nav-user-tabs-block {
    background: #FFF;
    margin-top: 30px;
}
.nav-user-tabs-block .scroll {
    position: relative;
}
.nav-user-tabs-block .btn-add-creat-new {
    right: 18px;
    top: 13px;
    position: absolute;
}
@media (max-width: 768px) {
    .nav-user-tabs-block {
        margin-left: -7px;
        margin-right: -7px;
    }
    .tab-content-block .nav-user-tabs-block {
        margin-left: 0;
        margin-right: 0;
    }
}

.nav-user-category-tabs {
    padding: 20px 0;
}
.nav-user-category-tabs .nav-tabs {
    border-bottom: 0;
}
.nav-user-category-tabs .nav-tabs .nav-item {
    text-align: center;
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-activity, 
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-show {
    flex: 1;
}
.nav-user-category-tabs .nav-tabs .nav-item a, 
.nav-user-category-tabs .nav-tabs .nav-item a:hover, 
.nav-user-category-tabs .nav-tabs .nav-item a.active {
    text-align: center;
    background: #f5f8ff;
    border-color: #dee8ff;
    color: #0057ff;
    border-style: solid;
    border-width: 1px;
    border-radius: 30px !important;
    margin: 0 5px;
    padding: 5px !important;
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-activity a, 
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-show a, 
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-show a.active {
    display: block;
    
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-activity a, 
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-activity a:hover {
    color: #cd506d;
    border-color: #cd506d !important;
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-activity a.active {
    color: #FFF;
    background: #cd506d;
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-show a, 
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-show a:hover {
    color: #e37929;
    border-color: #e37929 !important;
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-show a.active {
    color: #FFF;
    background: #e37929;
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-give {
    position: relative;
    top: -2px;
    height: 41px;
    width: 41px;
    padding: 2px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: 0px 0px 5px 2px rgb(62 62 62 / 12%);
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-give a {
    margin: 0;
    position: relative;
    display: block;
    color: #FFF;
    width: 37px;
    height: 37px;
    padding: 4px 0px 4px 1px !important;
    border-radius: 45px;
    text-align: center;
    /*border-color: #cc4f6c;*/
    border: 0;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-give a img {
    width: 20px;
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-give a span {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    /*background: #00000096;*/
    padding: 0 15px;
    border-radius: 30px;
    transition: 0.3s;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
}
.nav-user-category-tabs .nav-tabs .nav-item.nav-item-give a:hover span {
    visibility: visible;
    opacity: 1;
    top: -30px;
}
.user-profile-block .card {
    box-shadow: none;
}

.btn-give-to-user {
    margin: 15px 0;
}
.btn-give-to-user a {
    margin: 0;
    position: relative;
    display: block;
    color: #FFF;
    padding: 4px 10px 4px 10px !important;
    border-radius: 45px;
    text-align: center;
    /*border-color: #cc4f6c;*/
    border: #FFF 2px solid;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
    box-shadow: 0px 0px 5px 2px rgba(62, 62, 62, 0.12);
    width: fit-content;
    margin: 0 auto;
}
.btn-give-to-user img {
    width: 18px;
    margin-top: -3px;
}

.tab-content-block {
    background: #FFF;
    padding: 10px;
}
@media (max-width: 768px) {
    .tab-content-block {
        margin: 0 -7px;
    }
}
.intro-txt {
    margin: 0 10px;
}
.intro-txt h4 {
    text-align: center;
    font-size: 1.5rem !important;
    /*color: #b03139;*/
    margin: 10px 0;
}
.intro-txt .m-coins-pic, 
.intro-txt .w-coins-pic {
    margin-left: 5px;
}

/*--- branch-store-list-block ---*/
.branch-store-list-block h4.media-heading {
    font-size: 1.2rem;
    margin-top: 5px;
}
.branch-store-list-block .store_pic {
    margin-right: 10px;
}
.branch-store-list-block .store_pic img {
    width: 150px !important;
}
.branch-store-info {
    line-height: 1.8rem;
    margin-top: 5px;
}
.branch-store-info-google {
    margin-top: 5px;
}
.branch-store-info-google dl {
    display: flex;
    margin-bottom: 0;
}
.branch-store-info-google dt {
    color: #1a73e8;
    margin-right: 10px;
    font-size: 1.5rem;
}
.branch-store-info-google dt i {
    font-size: 1.8rem !important;
}
.branch-store-info-google dt img {
    width: 20px;
    margin-right: 3px;
}
.branch-store-info-google dd {
    padding-top: 7px;
    word-break: break-all;
}
.btn-google-map img {
    width: 18px;
    position: relative;
    top: -2px;
}
.open-status {
    /*color: #b06000;*/
}
.btn-open-time .icon {
    position: relative;
    display: inline-block;
    transition: all 0.3s;
    top: 1px;
}
.btn-open-time .icon a {
    color: #424242;
}
.btn-open-time.active .icon {
    top: -2px;
    transform: rotate(180deg);
}
.branch-opentime {
    display: none;
}
.branch-opentime > div {
    margin-top: 10px;
}
.branch-opentime.on {
    display: block;
}
.branch-opentime dt, .branch-opentime dd {
    padding: 5px;
}
.branch-opentime dt {
    font-size: 1rem;
    white-space: nowrap;
    padding-top: 6px;
    padding-left: 0;
    color: #000;
}
.branch-store-comment {
    position: relative;
    width: 100%;
    margin-top: 20px;
    background: #f6f6f6;
    padding: 15px;
    border-radius: 10px;
}
.branch-store-comment h5 {
    color: #37afbc;
    font-size: 1.1rem;
    margin-bottom: 0;
}
.btn-open-comment a {
    display: block;
    position: absolute;
    top: 13px;
    right: 15px;
    font-size: 1.3rem;
    text-align: center;
    color: #37afbc;
    transform: rotate(0);
    transform-origin:center center;
    transition: all 0.3s;
}
.btn-open-comment.on a {
    transform: rotate(180deg);
    top: 10px;
}
.branch-store-comment .pic {
    margin: 10px 0;
}
.branch-store-comment .pic img {
    width: 45px;
}
.branch-store-comment .pic span {
    margin-left: 10px;
}
.branch-store-comment .branch-store-comment-list-block {
    position: relative;
    margin-top: 10px;
    padding-top: 10px;
}
.branch-store-comment .branch-store-comment-list-block:before {
    position: absolute;
    content: " ";
    top: 0;
    width: calc(100% + 30px);
    margin-left: -15px;
    border: #f9f9f9 1px solid;
}
.branch-store-comment .branch-store-comment-list-block.off {
    display: none;
}
.branch-store-comment .branch-store-comment-list + .branch-store-comment-list {
    margin-top: 10px;
    border-top: #ededed 1px solid;
}
.branch-store-comment-list .ratings-bar {
    margin-bottom: 5px;
}
.branch-store-comment-list .ratings {
    margin-left: 0;
}

/*google ratings*/
.ratings-bar {
    display: flex;
    align-items: center;
}
.ratings {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    color: #caccce;
    overflow: hidden;
    letter-spacing: 1px;
    margin: 0 5px;
}
.full-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #fcbc07;
}
.empty-stars:before, .full-stars:before {
    content:"\2605\2605\2605\2605\2605";
    font-size: 10pt;
}
.empty-stars:before {
    
}
.full-stars:before {
    
}
/* Webkit-text-stroke is not supported on firefox or IE */

/* Firefox */
 @-moz-document url-prefix() {
    .full-stars {
        color: #fcbc07;
    }
}
/* IE */
.full-stars {
    color: #fcbc07;
}



/*--- right-fixed-quick-btn -----*/
.right-fixed-quick-btn-block {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;
    transition: transform 200ms linear;
}
@media (max-width: 768px) {
    .right-fixed-quick-btn-block {
        bottom: 120px;
    }
}
.right-fixed-quick-btn-block a {
    position: relative;
    display: flex;
    margin-bottom: 15px;
    color: #eaeaea;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.right-fixed-quick-btn-block a:hover {
    color: #FFF;
}
.right-fixed-quick-btn-block a .pic {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: 15px;
    border-radius: 50px;
    background-color: #FFF;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.3s;
}
.right-fixed-quick-btn-block a:hover .pic {
    transform: scale(1.1);
}
a.right-fixed-quick-btn-open .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_po.svg);
    background-color: #d4762c;
}
a.right-fixed-quick-btn-open.on .pic {
    background-color: #666565;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_po_close.svg);
}
.right-fixed-quick-btn1 .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_po1.svg);
}
.right-fixed-quick-btn2 .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_po2.svg);
}
.right-fixed-quick-btn3 .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_emoij.svg);
}
.right-fixed-quick-btn-give .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_give.svg);
}
.right-fixed-quick-btn-addfri .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_friend.svg);
}
.right-fixed-quick-btn-addwish .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_wishlist.svg);
}
.right-fixed-quick-btn-qr .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_qr.svg);
}
.right-fixed-quick-btn-addbrand .pic {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_brand.svg);
}
.right-fixed-quick-btn-block .right-fixed-quick-btn-give, 
.right-fixed-quick-btn-block .right-fixed-quick-btn-addfri, 
.right-fixed-quick-btn-block .right-fixed-quick-btn-addwish {
    display: none;
}
.right-fixed-quick-btn-block a .txt {
    /*position: absolute;
    left: -85px;
    top: 50%;
    transform: translateY(-50%);*/
}
.right-fixed-quick-btn-list {
    display: none;
}
.right-fixed-quick-btn-list.on {
    display: block;
}
.right-fixed-quick-btn-open.off {
    display: none;
}

.top-fixed-quick-btn-block .right-fixed-quick-btn-open {
    display: none;
}
.top-fixed-quick-btn-block.top-on .right-fixed-quick-btn-open {
    display: block;
}
.top-fixed-quick-btn-open i {
    transition: all 0.3s;
}
.top-fixed-quick-btn-open.on i {
    transform: rotate(45deg);
    /*background: #6B6F82;
    color: #FFF;
    border-radius: 38px;
    padding: 2px;
    font-size: 22px !important;*/
}
.top-fixed-quick-btn-open.on i:before {
    /*content: "\e99d" !important;*/
}
.top-fixed-quick-btn-block .right-fixed-quick-btn-list {
    margin-right: 5px;
}
.top-fixed-quick-btn-block a {
    flex-direction: row;
    justify-content: inherit;
}
.top-fixed-quick-btn-block a .txt {
    margin: 0 15px;
}
@media (max-width: 767px) {
    .top-fixed-quick-btn-block {
        left: 0;
        right: inherit;
        width: 100%;
    }
    .top-fixed-quick-btn-block .right-fixed-quick-btn-list {
        margin-left: 30px;
    }
    .top-fixed-quick-btn-block.top-on .right-fixed-quick-btn-open {
        display: block;
        position: absolute;
        top: 0;
        right: 30px;
    }
}
.right-fixed-quick-btn-block.top-on {
    top: 120px;
}
.right-fixed-quick-btn-block.top-on .right-fixed-quick-btn-give, 
.right-fixed-quick-btn-block.top-on .right-fixed-quick-btn-addfri, 
.right-fixed-quick-btn-block.top-on .right-fixed-quick-btn-addwish {
    display: flex;
}
.menu-open .right-fixed-quick-btn-block {
    transform: translateX(260px);
}

/*---- top-fixed-search-block ----*/
.top-fixed-search-block {
    
}
.top-fixed-search-block-inner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    transition: transform 200ms linear;
    width: 100%;
    height: calc(100vh - 69px);
    max-width: 500px;
    padding: 140px 20px 10px 20px;
}
.top-fixed-search-block.off {
    display: none;
}
.top-fixed-search-block .po-tag-friend-block {
    position: relative;
    height: 100%;
    padding-top: 40px;
}
.top-fixed-search-block .input-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.top-fixed-search-block .tag-user-list-block {
    overflow: auto;
    min-height: 200px;
    max-height: 100%;
}
.top-fixed-search-block .coin-s-40, .search-coin-list .coin-s-40 {
    
}
.top-fixed-search-block .tag-user-list .txt .name {
    color: #000;
}
.top-fixed-search-block .tag-user-list .txt .tip {
    color: #929191;
    font-size: 0.8rem;
    margin-top: 5px;
}
a.btn-fixed-close {
    display: block;
    position: absolute;
    top: 85px;
    right: 15px;
}
a.btn-fixed-close .pic {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.3s;
    background-color: #666565;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_user_add_po_close.svg);
}
a.btn-fixed-close:hover .pic {
    transform: scale(1.1);
}
.search-all-block .input-search-friend-list {
    border: 0;
}
.btn-search-all {
    background: #FFF;
    border-top-left-radius: 0px;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 0px
}

.search-coin-list {
    margin-bottom: 15px;
}
.search-coin-list a {
    display: flex;
}
.search-coin-list .pic {
    margin-right: 15px;
}
.search-coin-list .txt .name {
    color: #000;
}
.search-coin-list .txt .tip {
    color: #929191;
    font-size: 0.8rem;
    margin-top: 5px;
}

/*---card full---*/
.card-full {
    margin: 0 -7px;
    border-radius: 0;
}

.card-full .card-header {
    padding: 0;
}

.nav.nav-tabs.nav-underline {
    border-radius: 0;
    /*border-bottom: 1px solid #e8e8e8;*/
    border-bottom: none;
    background: transparent;
}

.nav.nav-tabs.nav-justified .nav-link {
    margin-bottom: 0;
}

.nav.nav-tabs.nav-underline .nav-item a.nav-link {
    color: #8c8c8c;
    border-bottom: 3px solid #f4f5fa;
    border-radius: 0;
}

.nav.nav-tabs.nav-underline .nav-item a.nav-link:hover {
    color: #000;
    border-bottom: 3px solid #f4f5fa;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active:focus, 
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active {
    font-weight: bold;
    color: #000;
    border-bottom: 3px solid #000;
}

.nav.nav-tabs.nav-underline .nav-item a.nav-link:before {
    display: none;
    background: #000;
}
.nav.nav-tabs.nav-btn-ouline-color .nav-item + .nav-item {
    margin-left: 10px;
}
.nav.nav-tabs.nav-btn-ouline-color .nav-item .btn-outline-red.active {
    border-color: #d4646b !important;
    background-color: #d4646b !important;
    color: #FFFFFF;
}
.nav.nav-tabs.nav-btn-ouline-color .nav-item .btn-outline-warning.active {
    border-color: #FF7E39 !important;
    background-color: #FF9149 !important;
    color: #FFFFFF;
}
.nav.nav-tabs.nav-btn-ouline-color .nav-item .btn-outline-green.active {
    border-color: #5aab9b !important;
    background-color: #5aab9b;
    color: #FFFFFF;
}
.scroll .nav.nav-tabs, .nav.nav-tabs2, .nav.nav-tabs3 {
    display: flex;
    flex-wrap: nowrap;
}
.nav.nav-tabs2 .nav-item {
    background: #f5f5f5;
}
.nav.nav-tabs2 .nav-item a.nav-link.active {
    background-color: #FFF !important;
}
.nav.nav-tabs3.nav-underline .nav-item a.nav-link {
    border-bottom: #FFF 1px solid;
}
.nav.nav-tabs4 {
    border-bottom: #f4f5fa 1px solid;
}
.nav.nav-tabs4 .nav-item a.nav-link.active {
    color: #d4646b;
    border-bottom: #d4646b 1px solid;
}
.scroll {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; 
}
.scroll::-webkit-scrollbar {
   display: none;
}
.scroll .nav.nav-tabs4 {
    display: flex;
    flex-wrap: nowrap;
}
.card-full .card-body {
    padding: 0;
}

.card-full .card-body h4 {
    font-size: 1.1rem;
}

.card-full .card-body .store_pic img {
    width: 80px;
}

.friend-want-pic-list-block {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: #e8e8e8 1px solid;
}

.friend-want-pic-list-block .btn-givesocial {
    margin-top: 3px;
}

.friend-want-title,
.friend-want-pic-list {
    display: inline-block;
}

.friend-want-title {
    position: relative;
    top: -6px;
    margin-right: 7px;
}

.friend-want-pic-list.users-list li+li {
    margin-left: 0;
}
.avatar-more {
    width: auto;
}

.store-info .tip-expire {
    position: relative;
}

.tip-expire .btn-biggive {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 5px 10px;
    background: #d25261;
    margin-left: 0;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

/*.tip-expire .btn-biggive:before {
    content: " ";
    display: block;
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    border-left: #FFF 1px solid;
}*/
.friend-want-list {
    margin-top: 30px;
}
.friend-want-list .media {
    align-items: center;
}

.friend-want-list .media-left img {
    width: 50px;
}
.friend-want-list .icon img {
    height: 19px;
    position: relative;
    top: -2px;
}

/*-------coins-history-list--------*/
.coins-history-list .media {
    position: relative;
    padding: 1rem 1.5rem 2rem 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/**/
.coins-history-list .media {
    padding: 1rem 1.5rem 2rem 1.5rem !important;
}
.coins-history-list .media-left {
    padding-left: 0 !important;
}
.coins-history-list .media .media-right {
    width: auto !important;
    padding-right: 0 !important;
}
.coins-history-list.tab-pane .media {
    padding: 1rem 0 0 0 !important;
}
.coins-history-list.tab-pane .media-left {
    padding-left: 1.5rem !important;
}
.coins-history-list.tab-pane .media .media-right {
    padding-right: 1.5rem !important;
}
/**/


.coins-history-list .media-left {
    position: relative;
}

.coins-history-list .media .media-right {
    height: 66px;
}

.coins-history-list .media .media-right div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.coins-history-list .media .total-sum {
    display: block;
    color: #909090;
}

.coins-history-list .txt {
    flex: 0 0 100%;
    margin: 10px 0;
    font-size: 1.1rem;
}

.coins-history-list .date {
    width: 100%;
    color: #adadad;
    padding: 0 10px;
    padding-left: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: #f2f2f2 1px solid;
}

.coins-history-list .pic {
    position: relative;
}
.coins-history-list .pic img {
    width: 60px;
}
.mark-txt{
    position: absolute;
    top: 0px;
    right: 8px;
    width: 22px;
    height: 22px;
    color: #FFF;
    padding-top: 2px;
    text-align: center;
    font-size: 0.8rem;
    background-color: #75c7cb;
    border-radius: 50px;
    border: #FFF 2px solid;
}

.coins-history-list .arrow {
    padding: 20px 30px 20px 10px;
}

.coins-history-list .arrow-receive {
    color: #28D094;
}

.coins-history-list .arrow-give {
    color: #FF4961;
}

.coins-history-list .arrow i {
    font-size: 1.5rem;
}

.coins-history-list .media .btn {
    display: block;
}

.coins-history-list .media a.btn+a.btn {
    margin-top: 5px;
}
.coins-history-list .m-coins-pic, .coins-history-list .w-coins-pic {
    padding: 7px;
}

/*-------store-news--------*/
#store-news .date {
    display: block;
    color: #a9a9a9;
    margin-bottom: 5px;
}

#store-news .btn {
    margin-top: 5px;
}

#friend-profile-card {
    width: 90%;
    max-width: 350px;
}

.fancybox-slide--html .friend-profile-card .fancybox-close-small {
    color: #FFF;
}

/*------friend-scramble-block------*/
.friend-scramble-fancybox .card-body:first-child {
    padding-bottom: 0;
}
.friend-scramble-fancybox .card-body .badge.badge-striped {
    margin-bottom: 0;
}
.scramble-total {
    padding: 20px 0;
}

.scramble-total ul {
    padding: 0;
    margin: 0;
}

.scramble-total li {
    display: block;
    float: left;
    width: 50%;
    padding: 15px;
    box-sizing: border-box;
}

.scramble-total li+li {
    border-left: #eaeaea 1px solid;
}
.scramble-total .time-over {
    border-top: #f3f4f9 1px solid;
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
}

.pic-bg {
    background: no-repeat center;
    background-size: 100%;
}

.friend-scramble-share-block {
    padding-top: 20px;
    max-width: 700px;
    margin: 0 auto;
}
.friend-scramble-share-block .card-body h4 {
    margin-right: 70px;
}
.friend-scramble-share-block .card-profile-image {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}
.friend-scramble-share-block .card-profile-image img {
    width: 80px;
}

.friend-scramble-share-block .store_pic img {
    width: 70px;
    border: #FFF 3px solid;
    margin-right: 10px;
}

.friend-scramble-share-block .media-heading {
    margin-top: 5px;
}
.friend-scramble-share-block .media-heading a {
    color: #FFF;
}
.friend-scramble-share-block .scram-num {
    margin-bottom: 5px;
}
.friend-scramble-share-block .date {
    color: #a7a7a7;
}
.friend-scramble-share-block .scramble-pannel {
    overflow: hidden;
}
.friend-scramble-share-block .scramble-pannel .store_pic {
    padding: 8px; 
    width: 70px; 
    height: 70px; 
    display: inline-block;
}
.friend-scramble-share-block .scramble-pannel .store_pic img {
    border: 0;
}
.friend-scramble-share-block .scramble-pannel h4 {
    margin-top: 10px;
}
.friend-scramble-share-block .scramble-info {
    background-color: #f7f7f7;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
}
.friend-scramble-share-block .scramble-info div {
    padding: 5px;
}
.friend-scramble-share-block .scramble-info div i {
    position: relative;
    top: 2px;
    margin-right: 5px;
    color: #9a9a9a;
}
.scramble-pannel-progress {
    /*border-top: #f3f4f9 1px solid;
    background: #f9f9f9;
    padding: 20px 0;
    margin-bottom: -20px;*/
}
.scramble-pannel-progress .time-over {
    
}

.btn-i-want .btn {
    background: #f79238;
    color: #FFF;
    margin-top: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.btn-i-want-over .btn {
    background: #9497a5;
}

.get-already {
    margin-top: 15px;
    color: #b7b7b7;
}

.store-bg-card {
    position: relative;
    background: #000;
}

.store-bg-card .pic-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.5;
    background-size: cover;
}
.egg-bg-card {
    background-color: #f9f5f5;
}
.egg-bg-card .pic-bg {
    background-image: url(../images/bg_egg_gift2.png);
    background-repeat: repeat;
    background-size: 80%;
}

.store-bg-card .card-body {
    z-index: 10;
    position: relative;
}
.friend-scramble-share-block .store-bg-card .media {
    align-items: center;
}
.user-plus-pic-s {
    position: relative;
    display: inline-block;
    top: 22px;
    margin-left: -32px;
}
.user-plus-pic .w-coins-pic {
    width: 90px;
    height: 90px;
    padding: 12px;
}
.user-plus-txt {
    display: inline-flex;
    align-items: center;
}
.user-plus-txt .txt {
    position: relative;
    display: inline-flex;
    color: #D4646B;
    background: #FCE9E9;
    border-radius: 30px;
    padding: 3px 15px;
}
.user-plus-txt .icon {
    display: inline-block;
    color: #ca5042;
    font-size: 2.2rem;
    margin-right: 7px;
    line-height: 0;
}
.user-plus-txt a {
    color: #D4646B;
    margin-left: 5px;
}

.friend-scramble-share-block .store-bg-card .media .user-plus-txt {
    margin: 5px 0;
    display: inline-flex;
}
.friend-scramble-share-block .store-bg-card .media .icon {
    display: block;
}
@media (min-width: 768px) {
    .friend-scramble-share-block .store-bg-card .media .user-plus-pic-s {
        top: 17px;
        margin-right: 30px;
        margin-left: -42px;
    }
}

.get-store-coin-block {
    text-align: center;
}
.get-store-coin-block h5 {
    margin: 20px 0;
}
.get-user-plus-coin-block {
    padding: 0 20px;
}
#get-coins-success-modal .get-user-plus-coin-block {
    padding: 0;
}
#get-coins-success-modal .get-user-plus-coin-inner {
    margin-bottom: 0;
}
#get-coins-success-modal .btn {
    margin-top: 20px;
}
.get-user-plus-coin-inner {
    max-width: 400px;
    margin: 60px auto 20px auto;
    background: #FFF;
    border: #FEF3F3 2px solid;
    border-radius: 20px;
    text-align: center;
}
.get-user-plus-coin-block .title {
    margin-top: -15px;
}
.get-user-plus-coin-block .title span {
    position: relative;
    display: inline-block;
    color: #FFF;
    background: #F9AD30;
    border: #E99304 2px solid;
    box-shadow: 2px 2px #E99304;
    border-radius: 30px;
    padding: 5px 30px 5px 75px;
}
.get-user-plus-coin-block .title span img {
    position: absolute;
    top: -30px;
    left: 20px;
}
.get-user-plus-coin-block .coin-box {
    margin: 20px 0 15px 0;
}
.user-coin-random-block {
    position: relative;
    width: 140px; 
    height: 170px; 
    overflow: hidden; 
    display: inline-block; 
    text-align: center;
}
.user-coin-random-inner {
      -webkit-animation: 2s rowup ease-out normal;
      animation: 2s rowup ease-out normal;
      animation-fill-mode: forwards;
}

@-webkit-keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-filter: blur(5px);
    }

    80% {
        -webkit-transform: translate3d(0, -85%, 0);
        transform: translate3d(0, -85%, 0);
        -webkit-filter: blur(1px);
    }

    100% {
        -webkit-transform: translate3d(0, -90%, 0);
        transform: translate3d(0, -90%, 0);
        -webkit-filter: blur(0px);
    }
}

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-filter: blur(5px);
    }

    80% {
        -webkit-transform: translate3d(0, -85%, 0);
        transform: translate3d(0, -85%, 0);
        -webkit-filter: blur(1px);
    }

    100% {
        -webkit-transform: translate3d(0, -90%, 0);
        transform: translate3d(0, -90%, 0);
        -webkit-filter: blur(0px);
    }
}
.user-coin-list-item {
    margin-bottom: 10px;
}
.get-user-plus-coin-block .coin-box h5 {
    margin-top: 15px;
    margin-bottom: 0;
}
.get-user-plus-coin-block .txt-leave-num {
    color: #8E7148;
    border-top: #FCF2E2 1px solid;
    padding: 10px 10px 0 10px;
}
.get-user-plus-coin-block .txt-leave-num a {
    color: #8E7148;
}

/*---------- kol detail ------*/
.intro-desc-content {
    padding: 20px;
}
.intro-desc-content img {
    max-width: 100%;
    height: auto !important;
}
.intro-desc-content iframe {
    max-width: 100% !important;
}
.issuedway_list .social-media-embed-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}
.issuedway_list .social-media-embed-list .media {
    width: 50%;
    padding: 10px;
    border: 0;
}
.issuedway_list .social-media-embed-list .media iframe {
    width: 100%;
}
@media (max-width: 767px) {
    .issuedway_list .social-media-embed-list .media {
        width: 100%;
        padding: 0;
    }
}

/*================================================================================
    mycoins-womo
================================================================================*/
.womo-manage {
    text-align: center;
    margin-top: 10px;
    padding-bottom: 20px;
}
.womo-manage .media{
    justify-content: center;
    align-items: center;
}
.womo-manage .media-body {
    flex: none;
}
.womo-manage .media-body h5 {
    color: #888;
    font-weight: normal;
    font-size: 1rem;
    margin-top: 5px;
}
.womo-manage .media-body .wm-coins {
    font-size: 1rem;
}
.womo-manage .media-body .wm-coins span {
    font-size: 3rem;
}
.womo-manage .womo-title {
    display: block;
    margin-bottom: 5px;
}
.womo-manage .womo-total {
    color: #e55942;
}
.womo-manage .womo-total span {
    font-size: 2rem;
}
.womo-btn-block {
    margin-top: 20px;
    padding-top: 15px;
    border-top: #f2f2f2 1px solid;
}
.womo-btn {
    flex: 1;
    text-align: center;
    color: #656565;
}
.womo-btn i {
    display: block;
    margin-bottom: 3px;
    font-size: 2rem !important;
}
.coins-womo-list .media {
    padding-bottom: 1rem;
}
.coins-womo-list .badge {
    margin-right: 5px;
}
.coins-womo-list .date2 {
    margin-top: 5px;
    color: #bdbdbd;
}
.coins-womo-list .media-right {
    height: auto !important;
    text-align: right;
    align-self: center;
}
.coins-womo-list .total {
    display: block;
    font-size: 1.3rem;
}
.coins-womo-list .balance {
    color: #bdbdbd;
}
.txt-b {
    color: #75c7cb;
}
.txt-r {
    color: #d4646b;
}
.bank-account-block {
    margin: 0 15px;
}
.bank-account-list {
    padding: 10px 0;
    border-bottom: #FFF 1px solid;
}
.bank-account-list .title {
    color: #a9a9a9;
}
.bank-account-list .txt {
    font-size: 1rem;
    margin-top: 5px;
}
.bank-account-list .txt.withdraw-price-input {
    position: relative;
    background: #ffffff;
    padding: 5px 5px 5px 30px;
}
.bank-account-list .txt.withdraw-price-input span {
    font-size: 0.8rem;
    position: absolute;
    bottom: 10px;
    left: 5px;
}
.bank-account-list .money-list {
    margin-top: 5px;
    display: flex;
}
.bank-account-list .money-list a {
    text-align: center;
    width: 25%;
    padding: 8px 20px;
    margin: 0 1px;
    color: #757575;
    background: #fff;
    border: #f1f1f1 1px solid;
    border-radius: 4px;
}
.bank-account-list .money-list a:hover,
.bank-account-list .money-list a:focus,
.bank-account-list .money-list a.active {
    border-color: #d4646b;
    color: #d4646b;
}
.deposit-price::-webkit-input-placeholder {
    font-size: 1.8rem;
    color: #CCC;
}
/*Firefox 4-18瀏覽器專用*/
.deposit-price input::-moz-placeholder {
    font-size: 1.8rem;
    color: #CCC;
}
/*Firefox 19+瀏覽器專用*/
.deposit-price input::-moz-placeholder{
    font-size: 1.8rem;
    color: #CCC;
}
/*IE10瀏覽器專用*/
.deposit-price:-ms-input-placeholder{
    font-size: 1.8rem;
    color: #CCC;
}
.bank-account-list .txt input.deposit-price {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #6B6F82;
    font-size: 1.5rem;
}
.bank-account-block .btn-area {
    margin-top: 20px;
}
.bank-account-block .current-total {
    margin-top: 10px;
}
.bank-account-block .txt-notice {
    background: #FFF;
    padding: 5px;
    margin-top: 10px;
}
.bank-account-block .txt-notice i {
    position: relative;
    top: 3px;
    margin-right: 5px;
}
.bank-account-block .current-total label {
    margin-bottom: 0;
}
/*================================================================================
    friend-profile-card
================================================================================*/
.friend-profile-card .profile-card-with-cover .card-profile-image img.img-border {
    width: 40%;
}

.friend-profile-card .card .card-title {
    margin-bottom: 0;
}

.friend-profile-card .card .icon {
    display: block;
    margin-bottom: 20px;
}

.friend-profile-card .card-subtitle {
    margin-bottom: 30px;
}
.friend-profile-card .btn {
    padding: 0.5rem;
}
.friend-profile-card .btn i {
    font-size: 1.2rem;
}

/*---search-friend-card----*/
.search-friend-card {}

.search-friend-card .card {
    padding-top: 1.5rem;
}
/*---search-friend-card2----*/
.search-friend-card2 .card {
    padding: 0;
    margin-bottom: 10px;
}
.search-friend-card2 .card-body {
    padding: 1.2rem;
}
.search-friend-card2 .media {
    align-items: center;
}
.search-friend-card2 .media-left {
    margin-right: 10px;
}
.search-friend-card2 .media-left.pic img {
    width: 60px;
}
.search-friend-card2 .media-heading {
    margin: 5px 0 0 0;
}
.search-friend-card2 .card .icon {
    margin-bottom: 0;
}
.search-friend-card2 .btn {
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
}


/*================================================================================
    load data jquery
================================================================================*/
#end-message {
    margin-top: 20px;
    text-align: center;
    color: #9c9c9c;
}
.is-on {
    position: relative !important;
    transition: all .5s ease;
} 

.is-on::before, #preloader {
    content: "";
    text-align: center;
    /*background:#f4f4f4;*/
    background: #f6f6f6;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.is-on::after, #status {
    content: "";
    display: inline-block;
    background-image: url("https://womophoto.s3.ap-northeast-1.amazonaws.com/public/images/giphy.gif");
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 150px;
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*================================================================================
    news_detail_block
================================================================================*/
.news_detail_block {
    max-width: 700px;
    margin: 0 auto;
}
.news_detail_block .card {
    background: transparent;
    box-shadow: none;
}

.news_detail_block .card-body img {
    max-width: 100%;
    height: auto !important;
}
.news_detail_block .card-body .icon img {
    width: 30px;
}
.news_detail_block .card-body .card-title {
    margin-bottom: 10px;
}

.news_detail_block .card-body .date, 
.coupon-detail-block .card-body .date {
    color: #9e9e9e;
    margin-bottom: 10px;
}
.news_detail_block .card-body .date span, 
.coupon-detail-block .card-body .date span {
    color: #000;
}
.coupon-detail-block .card-body .icon_items {
    display: flex;
    color: #757575;
    margin-bottom: 10px;
}
.coupon-detail-block .card-body .icon_items .dt {
    color: #000;
    margin: 0 5px;
    white-space: nowrap;
}
.coupon-detail-block .card-body .icon_items .dt, 
.coupon-detail-block .card-body .icon_items .dd {
    /*margin-top: 3px;*/
}
.coupon-detail-block .card-body .icon_items iconify-icon {
    color: #fb9149;
    font-size: 1.4rem;
    /*transform: scale(0.8);*/
}
.coupon-detail-block .card-body .icon_items .store-address {
}
.coupon-detail-block .card-body .icon_items .store-address iconify-icon {
    transform: scale(0.7);
    color: #686868;;
}
.news_detail_block .video-container {
    margin: 10px 0;
}
.news_detail_block .card .card {
    background: #FFF;
    box-shadow: 0px 1px 15px 1px rgb(62 57 107 / 7%);
}
.news_detail_block .desc iframe, .news_detail_block .desc img {
    max-width: 100%;
}
@media (max-width:768px) {
    .news_detail_block .card .card-body-bg-w {
        margin: 0 -7px 10px -7px;
    }
}

/*================================================================================
    store-coupon-list
================================================================================*/
.store-coupon-block .tab-title {
    display: flex;
    background: rgb(255, 241, 241);
}
.store-coupon-block .tab-title .tab-title-l {
    flex: 1;
}
.store-coupon-block .tab-title .tab-title-l span {
    display: inline-block;
    font-size: 1.1rem;
    background: #FFF;
    color: #cd506d;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 10px 20px;
    margin: 20px 20px 0 20px;
    box-shadow: 3px 0px 1px rgb(228 203 203);
}
.store-coupon-block .tab-title .tab-title-r {
    margin: 15px;
}
.store-coupon-list .media-left {
    position: relative;
    width: 27%;
    padding-right: 0 !important;
    margin-right: 1.2rem;
}
.store-coupon-list .store_pic img {
    width: 100% !important;
}
.store-coupon-list .btn-add-favor, .store-slide .btn-add-favor {
    position: absolute;
    top: 8px;
    left: 8px;
    box-shadow: 0px 1px 5px 1px rgb(62 57 107 / 20%);
    background: #FFF !important;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    padding: 7px 0;
    text-align: center;
    white-space: nowrap;
}
.store-slide .btn-add-favor {
    top: 10px;
    right: 10px;
    left: initial;
    bottom: initial;
    transform: none;
    z-index: 99;
}
.store-coupon-list .media-right .btn {
    display: block;
    margin-bottom: 10px;
}
.store-coupon-list .media {
    position: relative;
    flex-wrap: wrap;
}
.store-coupon-list .media .store-name, 
#store-news .media .store-name, 
.coupon-detail-block .store-name, 
.news_detail_block .store-name, 
.chats .media-info .media-body .store-name {
    display: block;
    margin-bottom: 5px;
    color: #1f9086;
    font-size: 1rem;
    padding: 0;
    background: transparent !important;
}
.store-news-block .media .media-body .store-name img {
    display: none;
}
.store-coupon-list .media .badge {
    display: inline-block;
    position: relative;
    font-size: 0.8rem;
    top: -2px;
}
.store-coupon-list .media .badge.bg-blue-grey, 
.chats .media-info-coupon .badge.bg-blue-grey {
    position: relative;
    color: #428ca2;
    top: -6px;
    margin-bottom: 10px;
    margin-left: 5px;
    border-radius: 5px;
    padding: 8px;
    font-size: 1rem !important;
    box-shadow: 0px 1px 5px 1px rgb(62 57 107 / 20%);
    background: #FFF !important;
}
.store-coupon-list .media .badge.bg-blue-grey a.tip, 
.chats .media-info-coupon .badge.bg-blue-grey a.tip, 
.coupon-detail-block .badge.bg-blue-grey a.tip {
    position: absolute;
    display: inline-block;
    background-color: #1f9086;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    right: -28px;
    top: 6px;
}
.store-coupon-list .media .price b {
    font-weight: normal;
    font-size: 1.3rem;
    color: #000;
}
.price-report {
    border: #90291d 1px solid;
    border-radius: 30px;
    padding: 0 5px;
    font-size: 0.8rem;
    color: #90291d;
    position: relative;
    top: -2px;
    margin-left: 5px;
}
.price-report.price-check {
    color: #26936c;
    border: #26936c 1px solid;
}
.store-coupon-list .media .media-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}
.store-coupon-list .media .media-right {
       
}
.notice-desc {
    display: block;
    color: #b15f5f;
    background: #fbeaea;
    border-radius: 5px;
    border: #f5e2e2 1px solid;
    padding: 5px 10px;
    margin-top: 10px;
}
.notice-desc a {
    color: #4e4a4a;
}
.notice-desc a.tip {
    display: inline-block;
    margin-left: 5px;
    position: relative;
    color: #b15f5f;
    top: 2px;
}
.store-coupon-list .reach:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background: #000;
}
.store-coupon-list .reach .store_pic, 
.store-coupon-list .reach .media-body {
    opacity: 0.7;
}
.store-coupon-list .reach-mark {
    position: absolute;
    top: 15px;
    right: 15px;
    transform: rotate(-10deg);
    z-index: 10;
}
.myfavor-list.store-coupon-list .reach-mark {
    left: 55px;
    right: initial;
}
.store-coupon-list .reach-mark img {
    width: 110px;
}
.store-unboxing-ad {
    max-width: 500px;
    margin-bottom: 10px;
}
.store-unboxing-ad iframe {
    max-width: 100%;
}
.store-unboxing-list img {
    width: 100%;
}
.video-container {
        position: relative;
        padding-bottom: 56.25%;
        overflow: hidden;
}
.video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
}

.icon-coupon:before {
    display: inline-block;
    content: "coupon";
    margin-right: 0px;
    width: 20px;
    text-indent: -9999px;
    background: url("../../assets/images/icon/coupon.svg") no-repeat 0 0;
    background-size: 17px;
}
.icon-coupon-w:before {
    display: inline-block;
    content: "coupon";
    margin-right: 0px;
    width: 100%;
    text-indent: -9999px;
    background: url(../../assets/images/icon/coupon_w.svg) no-repeat center center;
    background-size: 24px;
}
.icon-magic-w:before {
    display: inline-block;
    content: "magic";
    margin-right: 0px;
    width: 100%;
    text-indent: -9999px;
    background: url(../../assets/images/icon/icon_magic_w.svg) no-repeat center center;
    background-size: 35px;
}
.icon-privilege-w:before {
    display: inline-block;
    content: "privilege-w";
    margin-right: 0px;
    width: 100%;
    text-indent: -9999px;
    background: url(../../assets/images/icon/icon_privilege_w.svg) no-repeat center center;
    background-size: 40px;
}
.icon-privilege-gem1:before, 
.icon-privilege-gem2:before, 
.icon-privilege-gem3:before, 
.icon-privilege-gem4:before, 
.icon-privilege-gem5:before, 
.icon-privilege-gem6:before {
    display: inline-block;
    content: "privilege-w";
    margin-right: 0px;
    width: 100%;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 35px;
}
.icon-privilege-gem1:before {
    background-image: url(../images/icon/puzzle/puzzle1_1.png);
}
.icon-privilege-gem2:before {
    background-image: url(../images/icon/puzzle/puzzle1_2.png);
}
.icon-privilege-gem3:before {
    background-image: url(../images/icon/puzzle/puzzle1_3.png);
}
.icon-privilege-gem4:before {
    background-image: url(../images/icon/puzzle/puzzle1_4.png);
}
.icon-privilege-gem5:before {
    background-image: url(../images/icon/puzzle/puzzle1_5.png);
}
.icon-privilege-gem6:before {
    background-image: url(../images/icon/puzzle/puzzle1_6.png);
}

/*---.coupon-detail-block ---*/
.card-body-bg-w {
    background-color: #FFF;
    margin-bottom: 10px;
}
.coupon-detail-block .store-name a {
    color: #309e8a;
    text-decoration: underline;
    display: inline-flex
}
.coupon-detail-block .store-name img {
    width: 23px;
    height: 23px;
    margin-right: 5px;
    border: #e4e4e4 1px solid;
}
.coupon-detail-block h4.card-title {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
}
.coupon-detail-block h4.card-title img {
    margin: -10px 0px -10px -10px;
}
.exchange-store-block {
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
}
.exchange-store-list {
    flex: 1;
    margin-right: 10px;
}
.exchange-store-block .btn {
    border: #61ab9a 2px solid;
    color: #61ab9a;
}
.coupon-detail-block .badge.bg-blue-grey {
    position: relative;
    margin-top: 10px;
    color: #428ca2;
    top: -6px;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 8px;
    font-size: 1rem !important;
    box-shadow: 0px 1px 5px 1px rgb(62 57 107 / 20%);
    background: #FFF !important;
}
.coupon-detail-block .badge.num-limit {
    position: relative;
    top: -6px;
    margin-left: 10px;
}
.coupon-detail-block .m-coins, 
.coupon-detail-block .w-coins {
}
.exchange_coins > span, 
.exchange_coins_pic span:nth-child(2) {
    margin-left: 5px;
}
.coupon-detail-block .media-btn {
    position: absolute;
    top: 15px;
    right: 1rem;
}
.coupon-detail-block .price b {
    font-weight: normal;
}
.coupon-detail-block .privilege_content {
    /*display: flex;
    justify-content: space-between;
    border-bottom: #edeaea 1px solid;
    padding-bottom: 10px;
    margin-bottom: 20px;*/
    margin-bottom: 20px;
}
.coupon-detail-block .privilege_content dl {
    display: flex;
    align-items: center;
    margin: 0 0 5px 0;
}
.coupon-detail-block .privilege_content dl dt {
    font-size: 1rem;
    font-weight: normal;
    color: #000;
}
.coupon-detail-block .privilege_content dl dd {
    color: #FF9149;
    font-size: 1.2rem;
    margin: 0;
    top: -1px;
    position: relative;
    margin-left: 5px;
}
.coupon-panel {
    background: #FFF;
    margin: 0 -30px 20px -30px;
    padding: 20px 30px;
}
.card-body-bg-w .coupon-panel {
    margin: 0 !important;
    padding: 0 !important;
}
.imgCode {
    background: #f7f7f7;
    padding: 10px;
}
.imgCode-inner {
    display: flex;
    align-items: center;
}
.imgCode-input {
    flex: 1;
}
.imgCode .txt-tip {
    color: #9b9b9b;
}

input.nav-tabs-btn {
    position: absolute;
    opacity: 0;
}
.nav-tabs-btn-g:checked ~ label {
    color: #FFF;
    background: #5cb2a1;
    border: #5cb2a1 1px solid;
} 
.nav-tabs-btn:checked ~ label:before {
    font-family: feather !important;
    content: "\e926";
    margin-right: 5px;
}
.nav-tabs-btn-red:checked ~ label {
    color: #FFF;
    background: #ea5848;
    border: #ea5848 1px solid;
}
.num-group {
    display: flex;
    align-items: center;
    background: rgb(255 248 243);
    padding: 5px 10px;
    border-radius: 6px;
    border: #f9be97 1px solid;
    margin-bottom: 15px;
}
.decs-tabs-block {
    display: none;
}
.decs-tabs-block.on {
    display: flex
}
.num-group .title-l {
    flex: 1;
}
.num-current-group {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
    justify-content: space-between;
}
.qua-group {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
}
.qua-group label {
    margin-right: 15px;
    margin-bottom: 0;
    color: #000;
    white-space: nowrap;
}
.qua-group .input-group {
    flex: 1;
}
.coupon-detail-block .desc {
    white-space: pre-line;
    margin-bottom: 1rem;
}
.coupon-detail-block .desc ul {
    padding-left: 25px;
}
.coupon-detail-block .desc ul li {
    list-style: disc;
}

/*================================================================================
    thermometer_bar
================================================================================*/
.thermometer-bar-block {
    width: 100%;
    padding: 40px 2.2rem 10px 2.4rem;
    margin: 15px 0 10px 0;
    background: #FFF;
    border-radius: 5rem;
    box-shadow: 0px 1px 15px 1px rgb(70 67 97 / 12%);
}

.thermometer-bar {
    display: block;
    position: relative;
    width: 100%;
    height: 6px;
    background: #D7E0EA;
    border-radius: 3px;
}

.thermometer-bar:after,
.thermometer-range:after {
    display: block;
    content: " ";
    position: absolute;
    top: -7px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: #D7E0EA;
    border-radius: 100%;
}

.thermometer-range-outline {
    position: relative;
    top: -7px;
    height: 20px;
    /*overflow: hidden;*/
}

.thermometer-range {
    position: relative;
    background-color: #e05a3b;
    /*width: calc(100vw - 113px);*/
    height: 6px;
    border-radius: 3px;
    z-index: 10;
    top: 7px;
    left: 0;
}

.thermometer-range:after {
    background-color: #e05a3b;
}

.thermometer-current-pin {
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 0;
    border-color: transparent;
    transition: border 0.4s ease;
    transform: rotateZ(45deg);
    top: -25px;
    margin-left: -10px;
    background-color: #e05a3b;
}

.thermometer-current-pin span {
    display: block;
    text-align: center;
    padding: 2px;
    font-size: 0.8rem;
    color: #FFF;
    transform: rotateZ(-45deg);
}

.thermometer-scale {
    width: 100%;
    display: table;
    table-layout: fixed;
    font-size: 0.8rem;
    margin-top: 5px;
}

.thermometer-scale-line {
    display: table-cell;
    position: relative;
    vertical-align: top;
}

.thermometer-scale-line:first-child:before {
    content: "0";
    position: absolute;
    top: 8px;
    left: -3px;
}

.thermometer-scale-line:after {
    position: absolute;
    top: 0;
    right: -1px;
    content: " ";
    background: #D7E0EA;
    width: 2px;
    height: 6px;
}

.thermometer-scale-line .thermometer-num {
    display: block;
    position: relative;
    width: 20px;
    right: -10px;
    float: right;
    text-align: center;
    margin-top: 10px;
    z-index: 100;
}

.thermometer-scale-line .thermometer-num span,
.thermometer-scale-line .thermometer-num a {
    display: block;
}

.thermometer-scale-line:last-child .thermometer-num {
    width: auto;
    right: -9px;
}

.thermometer-scale-line .thermometer-num a i {
    position: relative;
    transition: 0.2s;
}

.thermometer-scale-line .thermometer-num a:hover i {
    top: 1px;
}

/*store-coupon-reach*/
.store-coupon-reach {
    padding: 10px 20px;
}
.store-coupon-reach .card {
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.12);
}
.store-coupon-reach .card-body {
    padding: 0;
}
.store-coupon-reach .media {
    padding: 1rem;
    flex-wrap: wrap;
}

.store-coupon-reach .media .store_pic {
    width: 60px;
}

.store-coupon-reach .media .media-heading {
    font-size: 1rem;
}
.store-coupon-reach .line-on-side span {
    background: #FFF;
}

/*================================================================================
    social-share-btn
================================================================================*/
.social-share-btn {
    margin: 10px 1rem;
    text-align: center;
    border-top: #e8e8e8 1px solid;
}

.social-share-btn ul {
    position: relative;
    display: inline-block;
    margin: 0;
    top: -20px;
    padding: 0;
    background-color: #F4F5FA;
}

.social-share-btn li {
    margin: 3px;
    display: inline-block;
    color: #000;
}

.social-share-btn li:first-child {}

.social-share-btn li a {
    display: block;
    color: #000;
    font-size: 18px;
    filter: alpa(opacity=90);
    /* old IE */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90, FinishOpacity=15, Style=3, StartX=0, FinishX=100, StartY=0, FinishY=16);
    /*supported by current IE*/
    -moz-opacity: 0.9;
    /* Moz + FF */
    opacity: 0.9;
    /* 支持新版瀏覽器 */
}

.social-share-btn li a:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    filter: alpa(opacity=100);
    /* old IE */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=15, Style=3, StartX=0, FinishX=100, StartY=0, FinishY=16);
    /*supported by current IE*/
    -moz-opacity: 1;
    /* Moz + FF */
    opacity: 1;
    /* 支持新版瀏覽器*/
}

.social-share-btn li.btn_pro_fb a {
    color: #4267B2;
}
.social-share-btn li.btn_pro_mail a {
    color: #d64236;
    font-size: 34px;
}
.social-share-btn li.btn_pro_whats a {
    color: #30bea5;
}
.social-share-btn li.btn_pro_twitter a {
    color: #1ea1f2;
}
.social-share-btn li.btn_pro_womo a {
}
.icon-social-womo:after {
    position: relative;
    display: inline-block;
    content: " ";
    width: 56px;
    height: 56px;
    top: 10px;
    background: url(../images/logo.png) no-repeat center center;
    background-size: 42px;
}
.btn_pro_line img {
    width: 20px;
    vertical-align: middle;
    margin-top: -3px;
}
.btn_pro_telegram img {
    width: 37px;
    vertical-align: middle;
}
.social-share-btn li.btn_pro_more a {
    width: 37px;
    height: 37px;
    margin-left: 10px;
    border-radius: 50px;
    color: #b5405b;
    border: #b5405b 2px solid;
}

.social-share-btn2 {
    border: none;
    margin: 50px 0 30px 0;
}

.social-share-btn2 ul {
    top: 0;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 320px;
    margin: 30px auto 40px auto;
}

.social-share-btn2 .line-on-side span {
    background-color: #F4F5FA;
}

.social-share-btn2 i.la {
    font-size: 3.3rem;
}

.social-share-btn2 .btn_pro_line img {
    width: 45px;
    vertical-align: middle;
}

.share-fancybox .social-share-btn2 .line-on-side span {
    background-color: #FFF;
    font-size: 1.1rem;
}
.share-fancybox .social-share-btn-other #scramble-link-copy {
    position: absolute;
    z-index: -1;
    top: -9999999px;
}
.social-share-btn-other {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
}
.social-share-btn-other li {
    margin-bottom: 10px;
    flex: 0 0 46%;
    margin: 2%;
}
.social-share-btn-other li .btn {
    border: #dcdcdc 1px solid;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 3px !important;
    background: #f9f9f9;
    padding: 0.75rem 0rem;
}
.social-share-btn-other li .btn:hover {
    background: #333;
}
.social-share-btn-other li .btn i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.social-share-btn-other2 li {
    flex: 0 0 100%;
    margin: 10px 0;
}
.social-share-btn-other2 li .btn i {
    display: inline-block;
    font-size: 1rem;
    margin-bottom: 0;
}
.c_3 li {
    flex: 0 0 29.33%;
}
.social-share-btn-other2.c_1 {
    margin-top: 10px;
    padding: 0;
}
.social-share-btn-other2.c_1  li {
    margin: 5px 0;
}

/*---social-share-btn3---*/
.social-share-btn3 {
    width: 100%;
    text-align: center;
    border: 0;
}

.social-share-btn3 ul {
    background: none;
    top: 0;
}
.friend-scramble-share-block .share-to-friend-block {
    margin-bottom: 60px;
}
.friend-scramble-share-block .social-share-btn2 .line-on-side span {
    font-size: 1.3rem;
}

/*--- social-share-btn-circle ---*/
.social-share-btn.social-share-btn-circle li a {
    border-radius: 30px;
    width: 50px;
    height: 50px;
    line-height: 63px;
    color: #ffffff;
}
.social-share-btn.social-share-btn-circle .btn_pro_line img {
    width: 35px;
    margin-top: -14px;
}
.social-share-btn.social-share-btn-circle i.la {
    font-size: 2.5rem;
}

.social-share-btn.social-share-btn-circle li.btn_pro_fb a {
    background: #4267B2;
}
.social-share-btn.social-share-btn-circle li.btn_pro_line a {
    background: #46bf1a;
}
.social-share-btn.social-share-btn-circle li.btn_pro_twitter a {
    background: #1ea1f2;
}
.social-share-btn.social-share-btn-circle li.btn_pro_email a{
    background: #c1272d;
}
.social-share-btn.social-share-btn-circle li.btn_pro_message a {
    background: #2aa74c;
}

/*================================================================================
    friend-list-block
================================================================================*/
.friend-list-block .media {
    padding: 1rem 1.5rem;
}

.friend-list-block .media .media-heading {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 5px;
}

.friend-list-block .media .media-body > .icon {
    display: block;
    margin-top: -0.3rem;
    color: #868686;
}
.friend-list-block .media .media-body .icon .txt {
    
    
}
.friend-list-block .media .media-body .icon .icon {
    display: inline-block;
    font-size: 1.5rem;
    margin-right: 5px;
}
.icon .no-friend {
    font-size: 0.8rem;
}
.friend-list-block .media .media-body .icon img {
    height: 19px;
}

.friend-list-block .pic img {
    width: 60px;
}

.friend-list-block .media .media-body,
.friend-list-block .media .media-right {
    align-self: center;
}

.btn-add-friend {
    padding: 4px;
    background: #b5b5b5;
    color: #FFF;
    border-radius: 100%;
}

.btn-add-friend:hover {
    background: #969696;
}
.friend-list-block .media .egg-pic {
    width: 60px;
    text-align: center;
}

/*================================================================================
    search-bar
================================================================================*/
.search-bar {
    border-bottom: 3px solid #eeeff6;
}
.search-bar-tabs {
    background: #f4f5fa;
    transition: 0.3s;
}
.search-bar-tabs.off {
    opacity: 0;
    height: 0;
    visibility: hidden;
}
.search-bar-tabs.on {
    opacity: 1;
    height: 46px;
    visibility: visible;
}
 [class*='owl-'] {

 }

.search-bar input,
.search-bar .btn {
    border-radius: 0;
    padding: 1.3rem 1.5rem;
    color: #666;
    background: transparent;
}

.search-bar input:hover,
.search-bar .btn:hover {
    color: #000;
}

.search-bar input {
    border: 0;
    padding-right: 0;
}

.search-bar .btn {
    border: 0;
    border-left: 2px solid #eeeff6;
}

.search-bar .btn i {
    font-size: 1.6rem;
}

.search-bar input:hover,
.search-bar input:focus {
    border: 0;
    outline: 0;
    background: transparent;
}

.search-bar .btn.btn-search {
    border: 0;
}
.btn-delete-fh {
    display: none;
    width: 28px;
    height: 28px;
    padding: 5px;
}
.btn-delete-fh i.la {
    font-size: 1.1rem;
}
.btn-delete-fh.on, .btn-delete-fh-all.on {
    display: block;
}
/*.search-bar .btn.btn-delete-fh-all {
    width: 100%;
    border-top: 2px solid #eeeff6;
    border-left: 0;
}*/
.btn-delete-fh {
    align-self: center;
    margin-left: 5px;
}
#btn-select-friend-h:before {
    font: normal normal normal 16px/1 LineAwesome;
    content: "\f17e";
    margin: 0 2px;
}

/*================================================================================
    filter-fancybox
================================================================================*/
.filter-fancybox {
    /*padding: 105px 0 100px 0 !important;*/
    padding: 105px 0 40px 0 !important;
    background-color: #F4F5FA;
    overflow: hidden !important;
}
.fancybox-full-box2 {
    padding:47px 1.5rem 0 1.5rem !important;
    background-color: #F4F5FA;
}
.fancybox-full-box3 {
    padding:47px 0 0 0 !important;
    background-color: #F4F5FA;
}

.filter-fancybox h5.title, 
.fancybox-full-box2 h5.title, 
.fancybox-full-box3 h5.title {
    background: #FFF;
    padding: 0.8rem 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.filter-fancybox h5.title.pic-title-bar, 
.fancybox-full-box2 h5.title.pic-title-bar, 
.fancybox-full-box3 h5.title.pic-title-bar {
    /*height: 47px;*/
    padding: 0.5rem 1rem;
}
.pic-title-bar .pic {
    margin: 0;
    padding: 0;
}
.pic-title-bar .pic img {
    width: 32px;
}
.give-coins-fancybox .pic-title-bar .m-coins, 
.give-coins-fancybox .pic-title-bar .w-coins {
   font-size: 1.5rem; 
}
.give-coins-fancybox .pic-title-bar .wm-coins {
   font-size: 1.8rem; 
}
.pic-title-bar .m-coins img, 
.pic-title-bar .w-coins img, 
.pic-title-bar .w-coins img {
   width: 20px; 
}

.filter-list-block {
    /*padding: 1rem;*/
    overflow: auto;
    height: 100%;
}
.filter-list-block h6 {
    padding: 10px 10px 0 10px;
}
.filter-list-block .search-bar-block {
    margin: 20px 10px !important;
    padding-right: 0;
    border: 0;
}
.filter-p-50 {
    padding-top: 50px !important;
}

.filter-list-block ul {
    display: block;
    margin: 0;
    padding: 0;
}

.filter-list-block li {
    display: block;
    float: left;
    text-align: center;
}

.filter-list-block li a {
    display: block;
    padding: 10px;
    color: #6B6F82;
    border: #FFF 2px solid;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}
.filter-list-block li a img {
    width: 100%;
}

.filter-list-block li a:hover,
.filter-list-block li a.active {
    border-color: #d4646b;
    color: #d4646b;
}

.filter-list-2 li {
    width: 46%;
    margin: 2%;
}

.filter-list-3 li {
    width: 31.33%;
    margin: 1%;
}
.filter-list-img {
    padding: 10px;
}
.filter-list-img li a {
    padding: 5px;
}
.filter-list-img li a span {
    display: block;
    height: 95px;
    overflow: hidden;
}
.filter-list-img li.btn-buy-more i {
    color: #FFF;
    background: #d4646b;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 35px;
    margin-top: 14px;
    margin-bottom: 5px;
}
.filter-list-img li.btn-buy-more b {
    display: block;
}

.btn-fixed-bot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.btn-fixed-bot > .btn {
    border-radius: 0;
}
.btn-fixed-bot .txt-block {
    background: #fde1e1;
    padding: 10px 15px;
    align-items: center;
}
.filter-list-block .search-bar .input-group input {
    padding-left: 10px;
}
.filter-fancybox .btn-area {
    padding: 20px;
    margin-top: 30px;
}
.filter-fancybox .btn-area button {
    margin-bottom: 20px;
}
.filter-fancybox .btn-area button .icon {
    margin-right: 5px;
}
.filter-fancybox .btn-area button .icon img {
    width: 20px;
}
.filter-fancybox .btn-area button .icon i {
    font-size: 1.6rem;
    position: relative;
    top: 3px;
    margin-top: -5px;
}

/*---give-filter-shop-block-----*/
#give-filter-shop-block {
    padding-top: 203px !important;
}
#give-filter-share-block {
    padding-top: 148px !important;
}
#give-coins-friend-fancybox {
    padding-top: 348px !important;
}
#give-filter-shop-block .nav.nav-tabs.nav-underline .nav-item a.nav-link, 
#give-coins-friend-fancybox .nav.nav-tabs.nav-underline .nav-item a.nav-link, 
#give-filter-share-block .nav.nav-tabs.nav-underline .nav-item a.nav-link, 
.filter-modal-fancybox .nav.nav-tabs.nav-underline .nav-item a.nav-link {
    border: 0;
    border-bottom: 3px solid #eeeff6;
    font-size: 1.1rem;
}
#give-filter-shop-block .nav.nav-tabs.nav-underline .nav-item a.nav-link.active, 
#give-coins-friend-fancybox .nav.nav-tabs.nav-underline .nav-item a.nav-link.active, 
#give-filter-share-block .nav.nav-tabs.nav-underline .nav-item a.nav-link.active {
    color: #000;
}
#give-filter-shop-block .nav.nav-tabs.nav-underline .nav-item a.nav-link .pic img, 
#give-coins-friend-fancybox .nav.nav-tabs.nav-underline .nav-item a.nav-link .pic img, 
#give-filter-share-block .nav.nav-tabs.nav-underline .nav-item a.nav-link .pic img, 
.coin-tabs .nav-item a.nav-link .pic img {
    width: 25px;
    margin-right: 5px;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active.nav-link-m, 
.tab-content > #coins-m.active, 
.tab-content > #coins-m2.active, 
.tab-content > #coins-m3.active {
    background: #e3f3ef;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active.nav-link-w, 
.tab-content > #coins-w.active, 
.tab-content > #coins-w2.active, 
.tab-content > #coins-w3.active {
    background: #ffeeec;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active.nav-link-womo, 
.tab-content > #coins-womo.active {
    background: #f3eedf;
}

/*---emoticons-----*/
.emoticon-title {
    width: 35px;
    height: 100px;
    padding: 10px 5px;
    text-align: center;
    border-right: #eaeaea 1px solid;
}
/*.emoticon-pic {
    padding: 15px;
    border-right: #eaeaea 1px solid;
}
.emoticon-pic img {
    width: 70px;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}*/
.emoticon-right {
    flex: 1;
    height: 100px;
    text-align: center;
}
.emoticon-right ul {
    padding: 0;
    margin: 0;
}
.emoticon-right li, .emoticon-dropdown-menu li {
    float: left;
    width: 25%;
    border-right: #eaeaea 1px solid;
    border-bottom: #eaeaea 1px solid;
}
.emoticon-right li:nth-child(5), 
.emoticon-right li:nth-child(6), 
.emoticon-right li:nth-child(7), 
.emoticon-right li:nth-child(8) {
    border-bottom: 0;
}
.emoticon-right li:nth-child(4), 
.emoticon-right li:nth-child(8) {
    border-right: 0;
}
.emoticon-right li a, .emoticon-dropdown-menu li a {
    display: block;
    width: 100%;
    height: 50px;
    padding: 10px 5px;
    border: transparent 1px solid;
}
.emoticon-right li.btn-choice-emoticon a:hover, 
.emoticon-dropdown-menu li.btn-choice-emoticon a:hover, 
.emoticon-right li.btn-choice-emoticon a:focus, 
.emoticon-dropdown-menu li.btn-choice-emoticon a:focus, 
.emoticon-right li.btn-choice-emoticon a.on, 
.emoticon-dropdown-menu li.btn-choice-emoticon a.on {
    border: #d0d0d0 1px solid;
}
.emoticon-right li img, 
.emoticon-dropdown-menu li img {
    height: 100%;
}
.btn-choice-more {
    line-height: 27px;
    font-size: 0.8rem;
}

.emoticon-pic img {
    width: 100%;
}
/*---emoticon-dropdown-menu-----*/
.btn-choice-more .dropdown-toggle::after {
    display: none;    
}
.emoticon-dropdown-menu {
    width: calc(100% - 20px);
    transform: translate3d(0px, 147px, 0px) !important;
    margin: 0 10px;
    border: 0;
    box-shadow: 1px 1px 29px rgba(0,0,0,.2);
}
.emoticon-dropdown-menu:before, .emoticon-dropdown-menu:after {
    position: absolute;
    display: block;
    content: '';
    clear: both;
    z-index: 10;
    top: -15px;
    right: 7%;
    margin-bottom: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 15px 10px;
    border-color: transparent transparent #FFF transparent;
}
.emoticon-dropdown-menu:after {
    z-index: 9;
    top: -16px;
    border-width: 0 11px 16px 11px;
    border-color: transparent transparent #f3f3f3 transparent;
}
.emoticon-dropdown-menu .tab-content, 
.emoticon-dropdown-menu .emoticon-group-tabs-block {
    float: left;
    width: 100%;
}
.emoticon-group-tabs-block {
    position: relative;
    border-top: 1px solid #ececec;
}
.emoticon-dropdown-menu .nav-tabs {
    /*height: 50px;*/
    margin-right: 55px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    display: flex;
    flex-wrap: nowrap;
}
.emoticon-dropdown-menu .nav-tabs .nav-item {
    position: relative;
    float: none;
    width: auto;
    border: 0;
    margin: 0;
}
.emoticon-dropdown-menu .nav-tabs .nav-item:last-child {
    /*padding-right: 55px;*/
}
.emoticon-dropdown-menu .nav-tabs .nav-item .nav-link {
    padding: 0.5rem;
    border: 0;
}
.emoticon-dropdown-menu .nav-tabs .nav-item .nav-link.active {
    background-color: #f2f2f2;
    border-radius: 0;
    border: 0;
}
.emoticon-dropdown-menu .nav-tabs .nav-item.emo-recently .nav-link {
    padding: 0.9rem;
}
.emoticon-dropdown-menu .nav-tabs .nav-item.emo-recently .nav-link img {
    opacity: 0.3;
}
.emoticon-dropdown-menu .slick-slide {
   
}
.emoticon-dropdown-menu .tab-content {
    height: 250px;
    overflow: auto;
    padding: 0.5rem;
    text-align: center;
}
.emoticon-dropdown-menu .tab-content ul {
    padding: 0;
}
.emoticon-dropdown-menu .tab-content li {
    width: 33.33%;
    border: 0;
}
.emoticon-dropdown-menu .tab-content li a {
    width: auto;
    height: 100px;
    border: 0;
    padding: 10px 0;
}
.emoticon-dropdown-menu .tab-content  li.btn-choice-emoticon a:hover, 
.emoticon-dropdown-menu .tab-content  li.btn-choice-emoticon a:focus, 
.emoticon-dropdown-menu .tab-content  li.btn-choice-emoticon a.on {
    border: 0;
}
.delete-emoticon {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 55px;
    text-align: center;
    background: rgb(255 255 255 / 90%);
}
.delete-emoticon a {
    position: absolute;
    top: 12px;
    right: 5px;
    color: #b98d8d;
    font-size: 0.8rem;
    padding: 3px;
    border-radius: 30px;
    border: #f2f2f2 1px solid;
    background: #FFF;
    box-shadow: 0px 1px 5px 1px rgb(62 57 107 / 20%);
}
.btn-delete-emoticon {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
}
.btn-delete-emoticon i {
    position: absolute;
    top: 5px;
    right: 0;
    width: 15px;
    line-height: 1;
    height: 15px;
    margin-right: 0;
}
.btn-delete-emoticon.on {
    display: block;
}
.btn-delete-emoticon:hover, 
.btn-delete-emoticon:foucs, 
.btn-delete-emoticon:active {
    padding: 0;
    border: 0;
    outline: 0;
}
.emoticon-swal .swal-icon img {
    width: 150px;
}
@media (min-width: 768px) {
    .emoticon-dropdown-menu .tab-content  li.btn-choice-emoticon a:hover {
        transform: scale(1.1);
    }
}

.follow-swal {
    max-width: 320px;
    border-radius: 15px;
}
.follow-swal .swal-icon {
    margin-bottom: 15px;
}
.follow-swal .swal-icon img {
    width: 110px;
    border-radius: 110px;
}
.follow-swal .swal-title {
    padding: 0;
    margin: 0;
}
.follow-swal .swal-content {
    margin-top: 10px;
}
.swal-txt-success, .swal-txt-cancel, .swal-txt-org {
    display: inline-flex;
    align-items: center;
    font-size: 1.5rem;
}
.swal-txt-success i, .swal-txt-cancel i {
    margin-right: 5px;
    font-size: 2.2rem;
}
.swal-txt-success {
    color: #66be34;
}
.swal-txt-cancel {
    color: #ee4d4d;
}
.swal-txt-org {
    color: #ee924d;
}
.swal-button--close {
    border: #8b8b8b 1px solid;
    color: #6d6d6d;
    padding: 7px 25px;
    background: #FFF;
}
.swal-button--small {
    padding: 7px 25px;
}

/*--friend list---*/
.filter-fancybox .friend-list-block .pic img {
    width: 35px;
}

.filter-fancybox .friend-list-block .media {
    display: flex;
    position: relative;
    padding: 0.5rem 1rem;
    align-items: center;
    border-top: 1px solid #f9f9f9;
}
.filter-fancybox .friend-list-block .media label {
    display: flex;
    width: 100%;
}
.filter-fancybox .friend-list-block .media.self-coin {
    background: #ffffff;
    border: #8cafa8 1px solid;
    margin: 5px;
    border-radius: 7px;
    box-shadow: 1px 1px 3px color(srgb 0 0 0 / 0.15);
}
.filter-fancybox .friend-list-block .media .tip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #FFF;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
}
.filter-fancybox .friend-list-block .media .tip span {
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
}
.filter-fancybox .friend-list-block .media .tip i {
    position: relative;
    top: 2px;
}
.bg-color-y {
    background: #f3eedf;
}

.filter-fancybox .friend-list-block .media-right .btn {
    padding: 5px 15px;
}
.give-coins-row2 {
    display: flex;
    flex-wrap: wrap;
}
.give-coins-row2 .media {
    flex: 0 0 100%;
}
.give-coins-row2 .media:first-child {
    border-right: 1px solid #f9f9f9;
}
.give-coins-row2 .media .pic i {
    margin: 0 5px;
}
/*---店家籌碼、網紅籌碼收合---*/
.btn-flip {
    display: block;
    padding: 1.2rem;
    margin: 0;
    color: #000;
    border-top: 1px solid #f9f9f9;
    cursor: pointer;
}
.btn-flip:hover {
    color: #000;
}
.btn-flip:after {
    margin-top: 1px;
    float: right;
    font: normal normal normal 16px/1 LineAwesome;
    content: "\f110";
    transition: 0.5s;
}
.btn-flip.on:after {
    transform: rotate(180deg);
}
.btn-flip span {
    font-weight: normal;
    font-size: 1rem;
    color: #757575;
    margin-left: 10px;
}

/*================================================================================
    user-profile-block
================================================================================*/
.user-profile-block {
    position: relative;
}
.user-slide {
    margin: 0 -7px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.user-slide img {
    width: 100%
}
.user-profile-block .user-slide {
    display: none;
    padding-bottom: 20%;
}
.user-profile-block .user-slide img, 
.user-profile-block .user-slide .cabinet_banner {
    display: none;
}

.user-profile-block .user-info .media {
    position: relative;
    flex-wrap: wrap;
    border: 0;
    padding: 2rem 1rem;
}

.user-info .media .media-right {
    margin-top: 20px;
}

.user-profile-block .media .user_pic {
    margin-top: -40px;
}

.user-profile-block .media .user_pic img {
    width: 80px;
    /*box-shadow: 0px 2px 10px 0px rgba(107, 111, 130, 0.3);*/
    border: #FFF 5px solid;
    background: #f1f1f1;
}

.user-btn-block {
    display: flex;
    width: 101%;
    margin-left: -1%;
}

.user-btn-block .media-btn {
    margin-top: 20px;
    /*width: 32.33%;*/
    margin-left: 1%;
}

.user-btn-block .media-btn:first-child {
    flex: 1;
}

.user-btn-block .media-btn .btn {
    display: block;
    margin-bottom: 5px;
}
.user-btn-block .media-btn-social {
    position: absolute;
    right: 15px;
    top: 0;
}
.user-btn-block .media-btn-social div {
    display: flex;
    align-items: center;
}
.user-btn-block .media-btn-social a {
    display: inline-block;
    padding: 5px;
    margin-left: 5px;
    transition: 0.2s;
}
.user-btn-block .media-btn-social a:hover {
    transform: scale(1.1);
}
.user-btn-block .media-btn-social img {
    width: 32px;
}
.user-btn-block .media-btn-social i {
    font-size: 2rem !important;
}
.user-btn-block .media-btn-social a:hover.media-btn-social-fb {
    color: #4267b2;
}
.user-btn-block .media-btn-social a:hover.media-btn-social-ig {
    color: #b23593;
}
.user-btn-block .media-btn-social a:hover.media-btn-social-g {
    color: #da4f43;
}
.user-btn-block .media-btn-social a.media-btn-social-line {
    width: 27px;
    height: 27px;
    background-image: url("../images/icon/line.svg");
    background-size: 100%;
}
.user-btn-block .media-btn-social a:hover.media-btn-social-line {
    background-image: url("../images/icon/line-g.svg");
}
.user-btn-block .media-btn-social a:hover.media-btn-social-tube {
    color: #f90f00;
}

.user-info {
    /*background: #FFF;*/
    margin: 0 -7px;
    padding-bottom: 30px;
    margin-bottom: -30px !important;

    /*margin: -10px 55px;
    border-radius: 10px;
    position: relative;
    padding-bottom: 20px;
    border: #f1efef 1px solid;
    box-shadow: 0px 1px 15px 1px rgb(62 57 107 / 7%);*/
}

.user-detail {
    width: 100%;
    /*max-width: 270px;
    margin: 0 auto;
    text-align: center;*/
    display: flex;
    flex-wrap: wrap;
    margin-top: -30px;
    margin-bottom: 25px;
    /*padding: 0px 25px;*/
}
.user-detail-pic {
    /*flex-grow: 1;*/
    position: relative;
    margin-right: 50px;
}
.user-detail-pic .friend-interaction {
    position: absolute;
    bottom: 7px;
    right: -4px;
}
.user-detail-pic .btn-info-setting {
    position: absolute;
    bottom: 16px;
    right: -4px;
}
.user-detail-pic .btn-info-setting img {
    width: 30px;
}
.user-detail-content {
    width: 100%;
}
.user-detail-desc {
    display: none;
}
.user-detail-desc.on {
    display: block;
}
.user-detail-desc .media-btn {
    margin-left: -5px;
}
.user-statistics-block {
    display: flex;
}
.user-statistics-block dl {
    margin-right: 40px;
    margin-bottom: 0;
    text-align: center;
}
.user-statistics-block dt {
    color: #000;
    font-size: 1.3rem;
}
.user-statistics-block dd {
    color: #898989;
}
.shop_detail .user-statistics-block {
    justify-content: center;
}
.shop_detail .user-statistics-block dl {
    margin: 0 15px;
}
.user-info .media-heading {
    margin-top: 30px;
    color: #000;
    font-size: 1.2rem;
}
.user-info .media-heading span {
    position: relative;
    display: inline-block;
    width: fit-content;
    padding-right: 40px;
}
.icon-user-verified {
    display: inline-block !important;
    width: 27px !important;
    height: 27px;
    padding: 0 !important;
    margin-right: 5px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_brand_verified_on.png) no-repeat;
    background-size: cover;
}
.user-info .media-heading span.icon-user-verified, 
.user-info-detail-content .media-body h4 .icon-user-verified {
    position: relative;
    top: 6px;
}
.user-info .media-heading a.btn-accordion {
    display: inline-block;
    color: #000;
    top: 4px;
}
.user-info .media-heading a.btn-accordion.active {
    top: 2px;
}
.user-info .btn-outline-secondary {
    color: #727272;
    border-color: #cfcfcf;
    display: inline-flex;
    align-items: center;
    height: 29px;
    justify-content: center;
}
.user-info .btn-outline-secondary:hover {
    color: #FFF;
}
.user-info .btn-add-follow-user span {
    display: block;
}
.user-info .btn-add-follow-user.on {
    color: #FFF;
    background: #727272;
}
.personal-btn-block {
    display: flex;
    width: 100%;
    margin: 0 -3px;
    margin-top: 10px;
}
.personal-btn-block > a {
    width: 35px;
    height: auto !important;
    background: #FFF;
    margin: 0 3px;
    padding: 10px;
    border-radius: 8px;
}
.personal-btn-block > a:first-child, 
.personal-btn-block > a:nth-child(2), 
.personal-btn-block > a:nth-child(3) {
    flex: 1;
}
.personal-btn-block > a.flex-none {
    flex: none;
}
.btn-accordion {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #FFF;
    font-size: 1.2rem;
}
.btn-accordion.active {
    top: 5px;
}
.btn-accordion:hover {
    color: #FFF;
}
.btn-accordion i {
    display: block;
    transition: all 0.3s;
    transform-origin: center;
}
.btn-accordion.active i {
    transform-origin: center;
    transform: rotate(180deg);
}
.user-coin-info .btn-accordion, 
.user-coin-info .btn-accordion:hover {
    color: #000;
    top: 11px;
}
.user-coin-info .media-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 15px 0;
    transition: all 0.3s;
    background: #FFF;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top: #f2f2f2 1px solid;
}
.user-coin-info .media-content.on {
    height: auto;
    overflow: hidden;
    opacity: 1;
}
.user-coin-info .media-content.off {
    height: 0px;
    overflow: hidden;
    opacity: 0;
}
.user-coin-info .my-coin-num-block {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    font-size: 1.8rem;
    color: #c3c3c3;
}
.user-coin-info .my-coin-num-block .icon {
    flex: none  !important;
}
.coin-merge {
    margin-right: 10px;
    white-space: nowrap;
}
.coin-merge .coin-big, 
.coin-merge .coin-big-100, 
.coin-merge .coin-small, 
.coin-merge .coin-s-40, 
.coin-merge .coin-s-30, 
.coin-merge .coin-s-25 {
    position: relative;
    z-index: 10;
}
.coin-merge .coin-big + .coin-big {
    margin-left: -110px;
    z-index: 9;
}
.coin-merge .coin-big-100 + .coin-big-100 {
    margin-left: -88px;
    z-index: 9;
}
.coin-merge .coin-small + .coin-small {
    margin-left: -50px;
    z-index: 9;
}
.coin-merge .coin-s-40 + .coin-s-40 {
    /*margin-left: -34px;*/
    margin-left: -27px;
    margin-right: 7px;
    z-index: 9;
}
.coin-merge .coin-s-30 + .coin-s-30 {
    margin-left: -25px;
    margin-right: 7px;
    z-index: 9;
}
.coin-merge .coin-s-25 + .coin-s-25 {
    margin-left: -18px;
    margin-right: 7px;
    z-index: 9;
}
.coin-merge2 {
    display: flex;
}
.coin-merge2 .coin-s-30 + .coin-s-30 {
    margin-left: -7px;
    margin-right: 5px;
}
.coin-merge2 .coin-s-40 + .coin-s-40 {
    margin-left: -7px;
    margin-right: 5px;
}
.coin-merge-m .m-coins-pic {
    /*position: relative;
    z-index: 20;
    margin-left: 0 !important;*/
}
.coin-merge-m .w-coins-pic.coin-s-40 {
    /*margin-left: -34px;*/
}
.mx-s-5 {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
.mt-s-5 {
    margin-top: 5px !important;
}
.ml-s-5 {
    margin-left: 5px !important;
}
.mr-s-5 {
    margin-right: 5px !important;
}
.p-s-5 {
    padding: 5px !important;
}
.pt-s-10 {
    padding-top: 10px !important;
}
.user-coin-info .media-content .icon {
    flex: 1;
    padding: 0 5px;
}
.user-coin-info .media-content > .icon {
    padding: 0 15px;
}
.user-coin-info .media-content .icon span {
    margin-right: 5px;
}
.user-coin-info .media-content .icon img {
    height: 29px;
}
.user-info .tip-expire {
    margin: 10px 0;
}

.user-info .media .btn.btn-give {
    display: inline-block;
    position: relative;
    top: -3px;
    padding: 1px 10px;
    font-size: 0.8rem;
}
.user-profile-hide {
    background-color: #FFF;
    padding: 15px;
}
.user-profile-hide span {
    display:block;
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}
.user-coin-info {
    position: relative;
    display: block;
    /*width: 100%;*/
    top: 0;
    left: 0;
    /*background: #f9f0f2;
    border-radius: 10px;
    border: #cd506d 1px solid;*/
    text-align: left;
    box-shadow: 1px 1px 5px #0000000a;
    border-radius: 10px;
}
.user-info .user-coin-info {
    width: 100%
}
.user-coin-info:before, 
.user-coin-info:after {
    position: absolute;
    display: none;
    content: " ";
    left: 32px;
    border: solid transparent;
    border-top-style: solid;
    border-top-width: 13px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}
.user-coin-info:before {
    z-index: 5;
    bottom: -16px;
    border-top-color: #cd506d;
}
.user-coin-info:after {
    z-index: 6;
    bottom: -14px;
    border-top-color: #f9f0f2;
}
.user-coin-info p {
    display: block;
    width: 100%;
    margin-bottom: 0;
    color: #000;
    padding: 10px 15px;
    background: #f8f8f8;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.user-coin-info br {
    display: none;
}
.user-coin-info .btn {
    border: 0;
    padding: 7px 10px !important;
    border-radius: 10px;
    color: #262626;
    background: #efefef;
    margin-right: 10px;
}
.user-coin-info .btn:hover {
    color: #FFF;
    background: #ca4f6d;
}
.user-coin-info .btn:last-child {
    margin-right: 15px;
}

.user-icon-btn-block {
    position: absolute;
    top: 15px;
    left: 1rem;
    text-align: left;
}

.user-icon-btn-l-block {
    position: absolute;
    top: -15px;
    right: 1.5rem;
    text-align: center;
}

.btn-follow {
    color: #d4646b;
    font-size: 1.1rem;
    padding: 0;
    background: transparent;
}

.friend-interaction {
    margin-bottom: 5px;
    width: 34px;
    height: 34px;
    display: inline-block;
    background: #FFF;
    padding: 2px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-radius: 30px; 
    font-size: 1.6rem;
    box-shadow: 0px 0px 5px 2px rgba(62, 62, 62, 0.12);
}

.friend-interaction > a {
    display: block;
    width: 30px;
    height: 30px;
    color: #FFF;
    text-align: center;
    line-height: 20px;
    border-radius: 30px;
    padding: 3px 2px 3px 4px;
    background: #ef7c25;
    /* Old browsers */
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
    /* IE6-9 */
}
.friend-interaction > a.disabled {
    filter: grayscale(100%);
}
.friend-interaction a span {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem !important;
    color: #FFF !important;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
    border-radius: 30px;
    padding: 5px 10px;
    transition: 0.2s;
    white-space: nowrap;
    z-index: -1;
}

/*user-coin-info-num-block*/
.user-coin-info-num-block {
    display: flex;
    width: 100%;
}
.user-coin-info-num-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 0 15px;
    flex: 1;
    align-items: center;
}
.user-coin-info-num-block .user-coin-info-num-list + .user-coin-info-num-list {
    border-left: #f2f2f2 1px solid;
}
.user-coin-info-num-list .media-btn {
    width: 100%;
    margin-top: 15px;
}

@media(min-width: 768px) {
    .user-coin-info-num-list .media-btn {
        width: auto;
        margin-top: 0;
    }
    .friend-interaction a:hover span {
        visibility: visible;
        opacity: 1;
        bottom: 40px;
        z-index: 1;
    }

    .user-detail {
        display: block;
        padding-left: 170px;
        position: relative;
    }
    .user-detail-pic {
        position: absolute;
        left: 0;
        top: 0;
    }
    .my-coin-level-block {
        display: flex;
    }
    .my-coin-level-block .my-coin-value {
        margin-right: 79px;
    }
    .level-num-bar {
        min-width: 122px;
    }
    .user-detail-content {
        width: auto;
    }
    .user-info .media-heading {
        margin-top: 10px;
    }
}
@media(max-width: 768px) {
    .user-detail {
        margin-bottom: 0;
    }
    .user-detail-desc .media-btn {
        margin-bottom: 25px;
    }

    .user-info .media-heading {
        
    }
    .user-info .user-icon-btn-block .btn-outline-secondary, 
    .user-info .user-icon-btn-block .btn-secondary {
        border-radius: 100%;
        width: 30px;
        height: 30px;
        padding: 8px 5px;
    }
    .user-info .user-icon-btn-block .btn-outline-secondary.btn-add-follow-user, 
    .user-info .user-icon-btn-block .btn-secondary.btn-add-follow-user {
        width: auto;
        border-radius: 13px;
    }
    .user-info .user-icon-btn-block .btn-outline-secondary.dropdown-toggle::after {
        display: none;
    }
    .shop_detail .user-icon-btn-block {
        /*right: 1rem;*/
        left: 0px;
    }
    .user-icon-btn-l-block {
        /*left: 1rem;*/
    }
    .user-icon-btn-block a span {
        display: none;
    }
    .user-icon-btn-block a.btn-add-favor-store span {
        display: block;
    }
    .get_certification_icon {
        right: 5px !important;
    }
    .user-coin-info {
        
    }
    .user-coin-info br {
        display: none;
    }
    .user-coin-info p {
        
    }
}


@media(max-width: 768px) {
    .user-info .coin-big {
        display: inline-block;
        width: 80px !important;
        height: 80px !important;
        padding: 4px !important;
        flex: 0 0 120px !important;
    }
    .user-info .user-detail-pic {
        margin-right: 20px;
    }
    .user-detail-desc.on {
        margin-top: 5px;
    }
    .user-detail .user-detail-content {
        width: auto;
        flex: 1;
    }
    .user-statistics-block dt {
        margin-bottom: 5px;
    }
    .user-statistics-block dl {
        margin-right: 25px;
    }
    .user-detail-desc .media-btn {
        margin-left: 0;
    }
    .media-btn-social3 .outer-bar div a {
        margin: 0 1px;
    }
}
@media(max-width: 374px) {
    .user-info .user-detail {
        justify-content: center;
    }
    /*.user-info .coin-big {
        width: 100px !important;
        height: 100px !important;
        padding: 5px !important;
    }
    .user-info .user-detail-pic {
        margin-right: 0;
    }*/
    .user-info .my-coin-level-block {
        text-align: center;
        margin-top: 5px;
    }
    .user-info .my-coin-level {
        display: inline-block;
        margin: 15px 0;
    }
    .user-icon-btn-block {
        left: 0.5rem !important;
    }
}


/*-------- friend-interaction-fancybox ---------*/
.friend-interaction-fancybox {
    padding: 40px;
    border: #de5b61 1px solid;
    border-radius: 15px !important;
    font-size: 1.1rem;
}

.title-icon {
    text-align: center;
    margin-bottom: 15px;
    margin-top: -60px;
}

.title-icon span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    color: #FFF;
    text-align: center;
    font-size: 2rem;
    background: #ef7c25;
    /* Old browsers */
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
}

.friend-interaction-fancybox h2 {
    font-size: 1.4rem;
    text-align: center;
}

.count-block {
    /*background: #f9eaea;
    border-radius: 10px;
    padding: 15px;*/
    padding: 0;
    margin: 15px 0;
}

.count-block li {
    margin-bottom: 5px;
    padding: 5px 20px;
    color: #cd506d;
    background: #fbf3f3;
    border-left: #cd506d 6px solid;
    border-radius: 5px;
    border-bottom: #fff1f1 1px solid;
}

.count-block li:before {
    /*content: " ";
    border-left: #CCC 3px solid;
    margin-right: 10px;*/
}

.btn-list {
    margin-bottom: 10px;
}

.btn-list a {
    display: block;
    color: #333;
}

.friend-interaction-fancybox .fancybox-close-small {
    display: none;
}

.friend-interaction-fancybox .btn-list.btn-close {
    text-align: center;
    border-top: #CCC 1px solid;
    margin: 20px -40px -40px -40px;
    padding: 10px 0;
}
.friend-interaction-fancybox .btn-list.btn-close a {
    color: #898989;
}

/*------ my-kolcoin-fancybox --------*/
.my-kolcoin-fancybox .coin-info-box {
    margin: 30px;
    align-items: center;
    border: 0 !important;
}
.my-kolcoin-fancybox .coin-info-box .media-left {
    margin-right: 45px;
}
@media(max-width: 600px) {
    .my-kolcoin-fancybox .coin-info-box {
        margin: 30px 0;
    }
    .my-kolcoin-fancybox .coin-info-box .media-left {
        margin-right: 25px;
    }
}
.my-kolcoin-fancybox .coin-info-box h5 {
    font-size: 1.3rem;
    margin-bottom: 0;
}
.my-kolcoin-fancybox .coin-info-box p {
    font-size: 1.1rem;
    margin-bottom: 3px
}
.my-kolcoin-fancybox .coin-info-box p span {
    font-size: 1.5rem;
    margin: 0 5px;
}
.my-kolcoin-fancybox .coin-info-box p.no-login span {
    margin-top: 5px;
    display: inline-block;
    font-size: 1.2rem;
}
.my-kolcoin-fancybox .coin-info-box p img {
    width: 19px;
}
.btn-red-org, .btn-red-org:active, .btn-red-org:focus .btn-red-org:hover {
    padding: 7px 20px;
    margin-bottom: 5px;
    font-size: 1rem;
    border: 0;
    color: #FFF !important;
    background: #ef7c25;
    background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%) !important;
    background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%) !important;
    background: linear-gradient(to right, #ef7c25 0%, #da5271 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
}

.my-kolcoin-fancybox .coin-info-box .media-right div {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.my-kolcoin-fancybox .coin-info-box .media-right div .btn-wishlist {
    color: #d9979f;
    margin-right: 5px;
}
.my-kolcoin-fancybox .coin-info-box .btn-wishlist {
    display: flex;
    align-items: center;
}
.my-kolcoin-fancybox .coin-info-box .btn-wishlist .icon-on, 
.my-kolcoin-fancybox .coin-info-box .btn-wishlist.on .icon-off {
    display: none;
}
.my-kolcoin-fancybox .coin-info-box .btn-wishlist .icon-off, 
.my-kolcoin-fancybox .coin-info-box .btn-wishlist.on .icon-on {
    display: inline-block;
}
.my-kolcoin-fancybox .coin-info-box .btn-wishlist .icon-off {
    margin-right: 2px;
}
.my-kolcoin-fancybox .coin-info-box .btn-wishlist .icon-on {
    margin-left: 3px;
}
.my-kolcoin-fancybox .txt-tip {
    padding: 20px 0;
    text-align: center;
    color: #8f7474;
    background: #f7f7f7;
    margin-bottom: 0;
}
.my-kolcoin-fancybox .txt-tip span {
    color: #d4646b;
    font-size: 1.3rem;
    margin: 0 10px 0 5px;
}
.my-kolcoin-fancybox .media-list .media {
    padding: 10px 20px;
}
.my-kolcoin-fancybox .media-list .media .media-left {
    align-self: flex-start;
}
.my-kolcoin-fancybox .media-list .media h5.media-heading {
    margin-bottom: 3px;
    font-size: 1rem;
}
.my-kolcoin-fancybox .w-coins, 
.my-kolcoin-fancybox .m-coins {
    font-size: 1.5rem;
}
.my-kolcoin-fancybox .media-list .media.on-mate {
    background: #fff0f0;
    border: #fdc7c7 1px solid;
}

/*who-mate-list-block*/
.who-mate-list-block > .media {
    flex-wrap: wrap;
}
.who-mate-list-block .media-right-info {
    flex-wrap: wrap;
}
.mate-num {
    width: 100%;
    margin-top: 10px;
    padding: 5px;
    background: #f7eeee;
    border-radius: 5px;
}
.mate-num > div {
    margin: 5px 0;
    display: flex;
    align-items: flex-end;
}
.mate-num .icon {
    line-height: 1;
    margin: 0 5px;
}
.mate-num .icon .w-coins-pic, 
.mate-num .icon .m-coins-pic {
    line-height: 1;
}
.who-mate-list-block .date {
    width: 100%;
    text-align: right;
    margin-top: 10px;
    color: #959595;
}
.who-mate-list-block .media-right-info .author img {
    width: 35px;
}
.who-mate-list-block .media-right-info .author span {
    margin-left: 10px;
    font-size: 1.2rem;
}
.who-mate-list-block .media-right-info .media-body {
    align-self: center;
}
.mate-num .right-btn {
    display: inline-block;
    text-align: right;
    flex: 1;
    align-items: center;
}
.mate-num .right-btn a {
    margin: 0;
    padding: 5px 10px;
}
.who-mate-list-block .media-right-info .btn {
    display: inline-block;
    margin-top: 0 !important;
}
.who-mate-list-block .media-right-info .btn.disabled {
    opacity: 1;
}
.who-mate-list-block .media-right-info h5 {
    margin-top: 5px;
}
.who-mate-list-block .media-right-info h4 {
    margin-top: 5px;
    margin-right: 0;
}
.who-mate-list-block .media-right-info .media-right {
    padding-left: 0;
}
.privilege-row-list .media-right-info .media-right .btn-outline-red {
    color: #d4646b;
    background-color: #ffffff;
    border-color: #d4646b;
}
.privilege-row-list .media-right-info .media-right .btn-outline-red:hover {
    background-color: #d4646b;
}
.fancybox-content .who-mate-list-block .media .btn + .btn {
    margin-left: 5px;

}
@media (min-width:768px) {
    .who-mate-list-block .media-right-info .media-right {
        position: absolute;
        right: 1.5rem;
        top: 20px;
    }
    .who-mate-list-block .privilege-row-list {
        padding-left: 220px;
    }
    .who-mate-list-block .privilege-row-list .pic {
        position: absolute;
        left: 1.5rem;
    }
}

/*------ new-coins-block -------*/
.new-coins-block {
    display: none;
    background: #FFF;
    margin: 0 -7px;
    padding: 0 1.2rem 1.5rem 1.2rem;
}

.new-coins-block .horizontal-scroll {
    padding: 2px;
}

.new-coins-list {
    display: flex;
    padding: 10px 0;
}

.new-coins-list .media {
    padding: 1rem;
    background: #FFF;
    border: 0;
    margin-right: 10px;
    /*margin-left: 5px;*/
    border-radius: 10px;
    box-shadow: 0px 0px 5px 1px rgba(62, 62, 62, 0.08);
}
.new-coins-list .owl-stage-outer {
    padding: 5px;
    margin-left: -5px;
}
.new-coins-list .media.slick-slide {
    display: flex !important;
}
.new-coins-list .media h5 {
    white-space: nowrap;
}

.buy-user-message {
    padding: 0;
    display: flex;
    margin-left: 2%;
}
.buy-user-message.off {
    display: none;
}
.buy-user-message .media {
    background-color: #ffe2e2;
    align-items: center;
    text-align: left;
    margin: 0;
    flex: 1;
    color: #8a5a5a;
    border: #efd5d5 1px solid;
}
.buy-user-message .media .media-left {
    margin-right: 15px;
}
.buy-user-message .media h5 {
    margin-bottom: 0;
    color: #8a5a5a;
    white-space: normal;
}
.message-talk-num {
    text-align: center;
}
.message-talk-num.off {
    display: none;
}
.message-talk-num span {
    display: inline-block;
    background-color: #ffe2e2;
    color: #8a5a5a;
    padding: 5px 15px;
    border-radius: 30px;
    border: #efd5d5 1px solid;
}


/*================================================================================
    mate-join-list
================================================================================*/
.mate-join-list {
    padding: 0 2px !important;
}
.mate-join-list .mate-join-list-inner {
    display: flex;
    padding: 10px 0;
}
.mate-join-list .media {
    position: relative;
    width: 20%;
    padding: 1rem 1.5rem;
    background: #FFF;
    border: 0;
    text-align: center;
    margin-right: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 1px rgba(62, 62, 62, 0.08);
}
@media (max-width: 768px) {
    .mate-join-list .media {
        width: 25%;
    }
}
@media (max-width: 640px) {
    .mate-join-list .media {
        width: 40%;
    }
}
.mate-join-list .media .badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.mate-join-list .media .pic img {
    width: 60px;
}
.mate-join-list .media h5 {
    margin: 10px 0;
}
.mate-join-list .media .txt-status {
    color: #fb9149;
}

/*================================================================================
    join-po-message-block
================================================================================*/
.join-po-message-block .po-message-list {
    margin: 0 0 10px 0;
    padding: 0;
}


/*================================================================================
    store-detail
================================================================================*/
.store-detail-coins-list {
    display: flex;
    width: 100%;
    margin: 30px 20px;
    padding: 15px;
    background: #eef9f7;
    border-radius: 10px;
    align-items: center;
    -webkit-box-shadow: 0px 0px 9px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 0px 9px rgb(0 0 0 / 10%);
    box-shadow: 0px 0px 9px rgb(0 0 0 / 10%);
}
.store-detail-coins-list > div {
    padding: 0 20px;
}
.store-detail-coins-list > div:first-child {
    flex: 1;
    border-right: #e2e2e2 1px solid;
    padding-left: 0;
}
.store-detail-coins-list > div:last-child {
    padding-right: 0;
}
.store-detail-coins-list div .m-coins, .store-detail-coins-list div .w-coins {
    display: block;
}
.store-detail-coins-list div .m-coins.no-login {
    font-size: 1.3rem;
    margin-top: 10px;
    margin-bottom: 5px;
}
.store-detail-coins-list div .m-coins.no-login a {
    color: #63b3a1;
}
.store-detail-coins-list div .btn-give {
    padding: 2px 10px;
}
.store-detail-coins-list div .txt {
    color: #000;
    font-size: 1.1rem;
}
#animatedModal_wmintro .media {
    border: 0;
}
#animatedModal_wmintro .media-left {
    margin-right: 15px;
}
#animatedModal_wmintro .media-left img {
    width: 50px;
}

/*================================================================================
    gallery-list-block
================================================================================*/
.gallery-list {}

.gallery-video {}

.gallery-video a:before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    font: normal normal normal 2rem LineAwesome;
    content: "\f38c";
    color: #FFF;
    margin-left: -14px;
    transform: translateY(-50%);
}

.gallery-fancybox-box {
    padding: 0 !important;
}
.btn-fancybox-back {
    position: absolute;
    top: 12px;
    left: 10px;
    color: #898c9b;
}
.gallery-fancybox-box .media, 
.gallery-fancybox-box .polist-media .po-header {
    position: relative;
    padding: 0.5rem 1.2rem;
    border: 0;
    margin-top: 45px;
}
.article-page-block .gallery-fancybox-box .polist-media .po-header {
    margin-top: 0;
}
@media (min-width: 768px) {
    .article-page-block .gallery-fancybox-box .polist-media .po-header {
        margin-top: 15px;
    }
}
.gallery-fancybox-box .polist-media {
    margin: 0;
    border-bottom: 0;
    box-shadow: none;
}
.gallery-fancybox-box .dropdown-more-link {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 1.5rem;
}
.gallery-fancybox-box .dropdown-more-link:after {
    display: none;
}

.gallery-fancybox-box .user_pic img {
    width: 50px;
}

.gallery-fancybox-box .media .media-heading {
    align-self: center;
}

.gallery-fancybox-box .gallery-img img {
    width: 100%;
}

.gallery-title {
    position: relative;
    padding: 1.2rem;
    color: #565656;
    text-align: left;
}

.gallery-title h5.title {
    margin-top: 20px;
}
.gallery-title p.desc {
    margin-top: 10px;
}
.btn-thermometer, 
.btn-like,
.btn-share {
    height: 28px;
    color: #8a8a8a;
    padding: 0 5px 0 20px !important;
    margin-right: 5px;
    background-position:  0 3px;
    background-repeat: no-repeat;
    background-size: 20px;
    background-color: transparent;
}
.btn-thermometer:hover, 
.btn-like:hover,
.btn-share:hover {
    background-color: #f2f2f2;
}
.btn-like {
    display: inline-block;
    background-image: url(../images/icon/bookmark.svg);
}
.btn-like.active {
    background-image: url(../images/icon/bookmark_b.svg)!important;
}
.ft-addfavor {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 14px;
    height: 18px;
    background: url(../images/icon/bookmark_dark.svg) no-repeat center;
    background-size: auto 100%;
}
.btn-addfavor.active .ft-addfavor, 
.active .ft-addfavor {
    background-image: url(../images/icon/bookmark_b.svg)!important;
}
.btn-addfavor.active:after {
    display: none;
}
.btn-addfavor.btn span {
    position: relative;
    top: -2px;
}
.ft-addfavor-org {
    position: relative;
    top: 0;
    display: inline-block;
    width: 12px;
    height: 13px;
    background: url(../images/icon/icon_bookmark_org_off.png) no-repeat center;
    background-size: auto 100%;
}
.btn-addfavor:hover .ft-addfavor-org, .btn-addfavor.active .ft-addfavor-org {
    background-image: url(../images/icon/icon_bookmark_org_on.png)!important;
}
.ft-addfavor-red {
    position: relative;
    top: 0;
    display: inline-block;
    width: 12px;
    height: 13px;
    background: url(../images/icon/icon_bookmark_red_off.png) no-repeat center;
    background-size: auto 100%;
}
.btn-addfavor:hover .ft-addfavor-red, .btn-addfavor.active .ft-addfavor-red {
    background-image: url(../images/icon/icon_bookmark_red_on.png)!important;
}
.btn-share {
    background-image: url(../images/icon/icon_share.svg);
}
.btn-thermometer {
    margin-left: -5px;
    background-image: url(../../assets/images/icon/low-temperature-thermometer.svg);
    
}

.gallery-fancybox-box .btn.btn-givesocial {
    padding: 0.5rem 1rem !important;
}

/*.gallery-fancybox-box .btn-area {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 5px 10px;
}*/


/*================================================================================
    chat
================================================================================*/
.chat-application {
    padding-top: 0 !important;
}
.chat-application .app-content,
.chat-application .content-right,
.chat-application .content-wrapper,
.chat-application .content-body {
    /*height: 100%;*/
}
.chat-application .content-wrapper {
    padding: 0 !important;
}
.chat-application .sidebar-left {
    border-right: 1px solid #E4E7ED;
    z-index: 999;
    padding-top: 70px;
}
.chat-application .chat-fixed-search {
    position: fixed;
    z-index: 999;
    background: #FFFFFF;
    width: 300px;
    border-bottom: 1px solid #E4E7ED;
}
.chat-application .users-list-padding {
    padding-top: 83px;
}
.chat-application .chat-app-window {
    padding: 85px 30px 100px 30px;
    text-align: center;
    /*overflow-y: scroll;
  height: calc(100% - 83px);*/
    background-color: #fff;
}
.chat-application .chat-app-form {
    position: fixed;
    z-index: 99;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px 20px 15px 320px;
    background-color: #edeef0;
    overflow: hidden;
}
@media (max-width: 992px) {
    .chat-application .chat-app-form {
        padding: 10px;
    }
}
.chat-application .chats {
    padding: 0;
}
.chat-application .chats .chat-body {
    display: block;
    margin: 10px 30px 0 0;
    overflow: hidden;
}
.chat-application .chats .chat-body .chat-content {
    text-align: right;
    position: relative;
    display: block;
    float: right;
    padding: 8px 15px;
    margin: 0 20px 10px 35px;
    clear: both;
    color: #fff;
    background-color: #1E9FF2;
    border-radius: 4px;
}
.chat-application .chats .chat-body .chat-content:before {
    position: absolute;
    top: 10px;
    right: -10px;
    width: 0;
    height: 0;
    content: '';
    border: 5px solid transparent;
    border-left-color: #1E9FF2;
}
.chat-application .chats .chat-body .chat-content+.chat-content:before {
    border-color: transparent;
}
.chat-application .chats .chat-body .chat-content p {
    margin: 0;
}
.chat-application .chats .chat-avatar {
    float: right;
}
.chat-application .chats .chat-avatar .avatar {
    width: 50px;
    margin-top: -10px;
}
.chat-application .chats .time {
    color: #BABFC7;
    font-size: 12px;
    text-align: center;
    margin: 40px 0;
}
.chat-application .chats .chat-left .chat-avatar {
    float: left;
}
.chat-application .chats .chat-left .chat-body {
    margin-right: 0;
    margin-left: 30px;
}
.chat-application .chats .chat-left .chat-content {
    text-align: left;
    float: left;
    margin: 0 35px 10px 20px;
    color: #6B6F82;
    background-color: #edeef0;
}
.chat-application .chats .chat-left .chat-content+.chat-content:before {
    border-color: transparent;
}
.chat-application .chats .chat-left .chat-content:before {
    right: auto;
    left: -10px;
    border-right-color: #edeef0;
    border-left-color: transparent;
}
.chat-application .form-control-position {
    cursor: pointer;
}
.chat-application .form-control-position.control-position-right {
    right: 18px;
    top: 2px;
    cursor: pointer;
}
@media (max-width: 767.98px) {
    .chat-application .chat-app-window {
        padding: 85px 15px 100px 15px;
    }
}
.horizontal-layout.chat-application .app-content {
    height: calc(100% - 144px) !important;
    min-height: calc(100% - 144px) !important;
    margin-top: 0 !important;
}
.horizontal-layout.chat-application .app-content .chat-app-window {
    height: -webkit-calc(100% - 83px) !important;
}

.chat-content .media {
    background: rgba(255, 255, 255, 0.95);
    padding: 8px;
    margin: 0 -7px;
    align-items: center;
    border-radius: 3px;
}

.chat-content .m-coins-pic,
.chat-content .w-coins-pic, 
.chat-content .pic {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}
.chat-content .pic img {
    width: 100%;
}

.chats .new-coins-list {}

.chats .new-coins-list .media {
    flex: 1;
    text-align: left;
    align-items: center;
    padding: 10px;
    margin: 0;
}
.chats .media-info-shop {
    align-items: flex-start;
}
.chats .media-info-shop .pic {
    width: auto;
    height: auto;
    margin-right: 0;
}
.chats .media-info-shop .store_pic img,
.chats .media-info-shop .pic img {
    width: 90px;
}
.chats .media-info-shop .media-body {
    color: #868686;
    max-width: 120px;
    text-align: left;
    margin-left: 15px;
    align-self: center;
}
.chats .media-info-coupon {
    max-width: 250px;
    display: block;
    text-align: left;
}
.chats .media-info-coupon .store_pic, 
.chats .media-info-coupon .store_pic img  {
    width: 100%;
}
.chats .media-info-coupon .store-name {
    margin-top: 5px;
}
.chats .media-info-coupon .date {
    margin-top: 5px;
}
.chats .media-info-coupon .date span:first-child {
    display: block;
}
.chats .media-info-video {
    max-width: 250px;
    display: block;
}
.chats .media-info-video .store_pic, 
.chats .media-info-video .store_pic img {
    width: 100%;
}
.chats .media-info-video .media-body{
    text-align: center;
    margin-top: 10px;
}
.chat .btn-chats-share {
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #6b6b6b;
    background: #dcdcdc;
    border-radius: 20px;
}
.chat-left .btn-chats-share {
    left: inherit;
    right: -35px;
}

.chats .new-coins-list .media-left {
    padding-right: 25px;
}
.chat-app-form.closed {
    bottom: -112px;
    transition: 0.3s;
}
.chat-app-form.opened {
    bottom: 0;
    transition: 0.3s;
}
.chat-app-form .chat-app-input .btn, 
.chat-app-form .chat-app-input input {
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}
.chat-app-form .chat-app-input input[type="text"]:disabled {
    background-color: #bcbcbc;
}
.chat-app-form .chat-app-input input[type="text"]::placeholder{
    color: #7d7d7d;
}
.btn-chat-open-otherbtn.off i:before {
    content: "\e9e6";
}
.chat-app-btn ul {
    display: flex;
    text-align: center;
    padding: 20px 0 0 0;
    margin: 0 0 10px 0;
}
.chat-app-btn ul li a {
    display: block;
    margin-right: 15px;
    background: #FFF;
    padding: 10px;
    border-radius: 5px;
}
.chat-app-btn ul li i {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #FFF;
    background: #929292;
    border-radius: 40px;
    font-size: 1.5rem;
}
.chat-app-btn ul li span {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
}
.filter-tabs {
    padding-top: 148px !important;
}
.collect-select-list {

}
.collect-select-list .media {
    display: flex;
    align-items: center;
    background: #FFF;
    border-radius: 5px;
    padding: 0;
    margin: 10px;
    border-radius: 5px;
    border:#f3f3f3 2px solid;
}
.collect-select-list .media .skin {
    padding-left: 15px;
}
.collect-select-list .media label {
    display: flex;
    flex: 1;
    padding: 15px;
    margin-bottom: 0;
    align-items: center;
}
.collect-select-list .media .pic {
    position: relative;
}
.collect-select-list .media .pic img.media-object {
    width: 50px;
    border: #f2f2f2 1px solid;
}
.collect-select-list .media .media-heading {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.7rem;
}
.collect-select-list .media .media-heading .media-object {
    width: 20px;
}
.collect-select-list .media .media-heading .badge {
    font-size: 0.8rem;
    margin-right: 10px;
}
.collect-select-list .media .media-content {
    margin-top: 5px;
}
.badge-yellow {
    background-color: #dcb700;
}
.chats .show-po-wishlist .media {
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 250px;
}
.chats .show-po-wishlist .media-body {
    margin-left: 15px;
    text-align: left;
}
.chats .show-po-wishlist .media-body .title {
    padding: 0;
}
.chats .show-po-wishlist .media-body .title span.name {
    text-decoration: underline;
    margin: 0 5px;
}
.chats .show-po-wishlist .media-body .media-object {
    width: 20px;
}
.chats .show-po-wishlist .media-right {
    position: relative;
    flex:0 0 100%;
    padding-right: 55px;
}
.chats .show-po-wishlist .media-right .btn {
    margin: 0;
    position: absolute;
    top: 7px;
    right: 0;
}
.chat-application .users-list-padding .media .media-body .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 170px;
    display: block;
}
.chat-application .chats .chat .chat-content {
    word-break: break-all;
    color: #FFF;
}
.chat-application .chats .chat.chat-left .chat-content {
    color: #6B6F82;
}
.chat-img {
    position: relative;
    max-width: 80%;
    float: right;
    margin: 0 20px 10px 35px;
}
.chat-img img {
    max-width: 100%;
}
.chat-left .chat-img {
    float: left;
    margin: 0 35px 10px 20px;
}

/*================================================================================
    myfavor-list
================================================================================*/
.myfavor-list .media .media-body .media-heading {
    
}

.myfavor-list .media .store-rate {
    margin: 5px 0;
}

.myfavor-list .media .media-right.icon {
    display: inline-block;
    margin-top: -2px;
    padding-right: 0;
    z-index: 9;
    font-size: 0.7rem !important;
}

.myfavor-list .store_pic img {
    width: 100px !important;
}
.myfavor-list .w-coins-pic.coin-big {
    margin-right: 1rem;
    width: 100px;
    height: 100px;
}
.myfavor-list  .media.coin-name-list .media-body, .myfavor-list  .media.coin-name-list .media-right.icon {
    align-self: center;
}
.myfavor-list.store-coupon-list .media-left {
    width: auto;
}

/*================================================================================
    Form
================================================================================*/
.form-block {
    margin: 0 5px;
}

.form-block .form-group {
    align-items: center;
}

.form-block .form-group label {
    padding-right: 0;
    margin-top: 0.5rem;
    align-self: flex-start;
}
.form-horizontal .form-group label {
    align-self: flex-start !important;
    margin: 0.7rem 0;
}
.form-style1 label {
    
}
.txt-verification {
    position: absolute;
    right: 20px;
    top: 6px;
    font-size: 0.8rem
}
.txt-verification span {
    display: inline-block;
    margin-top: 7px;
    margin-right: 5px;
}
.register-form-block .txt-verification, 
.has-icon-left .txt-verification {
    right: 6px;
}
.register-form-block .select2-container--default .select2-selection--single {
    padding-left: calc(2.75rem + 2px);
}
.register-form-block .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #a5a5a5;
    padding-left: 0 !important;
}
.help-block ul li {
    color: #e25555;
    font-size: 1rem;
    margin-top: 3px;
}
.btn-light {
    color: #a5a5a5;
    background-color: #ffffff;
    border-color: #e4e4e4;
    outline: 0;
}
.has-icon-left .btn-light {
    padding-left: calc(2.75rem + 2px);
}
.btn-light:hover, 
.btn-light:focus, 
.btn-light:active, 
.show > .btn-light.dropdown-toggle {
    background-color: #ffffff;
    border-color: #e4e4e4;
    outline: 0 !important;
}
.bs-searchbox .form-control {
    padding: 10px;
}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: 0 !important;
}
.bootstrap-select .dropdown-toggle .filter-option {
    color: #4E5154;
}
.bootstrap-select .dropdown-menu {
    max-width: 100%;
}
.bootstrap-select .dropdown-menu li a span.text {
    white-space: break-spaces;
}
.select-school.bootstrap-select>.dropdown-toggle:after {
    margin-top: -18px;
    margin-right: 7px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
}
.form-input-phone .form-control {
    padding-right: 110px;
}
.form-input-mail .form-control {
    padding-right: 94px;
 }
.form-input-phone.ver-success .form-control ,
.form-input-mail.ver-success .form-control {
    padding-right: 67px;
}
.select-style1 {
    left: 0;
    border: 0;
    outline: 0;
    color: #f4f5fa;
    position: absolute;
    top: 0;
    height: 35px;
    text-indent: -9999px;
    background: transparent;
    -webkit-appearance:none;
}
.btn-select-style1 {
    display: inline-block;
    margin: 7px 5px;
    color: #945656;
    border-bottom: #945656 1px solid;
}
.mt--1 {
    margin-top: -10px;
}
.city-selector-set div, .row-more div {
    margin-bottom: 10px;
}
.city-selector-set div:last-child {
    margin-bottom: 0;
}
/*-----------*/
.add_video_friend_list .media {
    margin-bottom: 10px;
}
.add_video_friend_list .media-left .media-object {
    width: 40px;
}
.add_video_friend_list .media-left, 
.add_video_friend_list .media-body {
    margin-right: 15px;
}
.add_video_friend_list .media-right .btn {
    width: 30px;
    height: 30px;
    padding: 7px 0;
    margin-top: 5px;
    text-align: center;
}
.btn-add-video-friend {
    color: #969696;
}
.btn-add-video-friend:hover {
    color: #333;
}
.btn-add-video-friend .btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin-right: 8px;
    color: #fff;
    background: #d8d8d8;
    border-radius: 100%;
    /*border: #e4e4e4 1px solid;*/
}

/**/
.form-user-info {
    margin-top: 20px;
}
.form-user-info .card {
    border-radius: 0;
}
.form-user-info .card .card-header {
    border-bottom: #f2f2f2 1px solid;
}
.form-user-info .card .card-header h5 {
    margin-bottom: 0;
}
.form-user-info .bg-gray {
    background: #f2f2f2;
    margin-bottom: 0;
}

/*================================================================================
    thanks-card
================================================================================*/
.thanks-card {
    border-radius: 15px;
    max-width: 600px;
    margin: 1.3rem auto;
}

.thanks-card .card-img-top {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 200px;
}

.thanks-card .card-profile-image {
    width: auto;
    left: 50%;
    top: 100px;
    width: 170px;
    height: 170px;
    background: #FFF;
    border-radius: 100%;
    padding: 25px;
    margin-left: -85px;
}
.thanks-card .card-profile-image img {
    width: 100%;
}
.thanks-card .card-profile-image img.current-emoticon {
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.thanks-card .profile-card-with-cover-content {
    margin-top: 30px;
}

.thanks-card h4.card-title {
    font-size: 2rem;
    font-weight: normal;
}

.thanks-card .thanks-card-sign {
    border-top: #ececec 1px solid;
    height: 88px;
}

.thanks-card .thanks-card-sign .media-object {
    width: 40px;
}
.thanks-card-list-nav {
    margin-top: -112px;
    margin-bottom: 10px;
    padding: 0 30px;
}
.thanks-card-list-nav .slick-track {
    margin:auto;
}
.thanks-card-list-nav .owl-item {
    padding: 10px;
    opacity: 0.6;
    transition: 0.3s;
    text-align: center;
}
.thanks-card-list-nav .owl-item.current {
    opacity: 1;
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
}
.thanks-card-list-nav .pic, .thanks-card-list-nav .txt {
    display: inline-block;
}
.thanks-card-list-nav .txt {
    display: none;
    text-align: center;
    font-size: 0.8rem;
    margin-top: -3px;
}
.thanks-card-list-nav .owl-item.current .txt {
    display: block;
}
.thanks-card-list-nav .owl-item img {
    width: 40px !important;
}

.btn-choice {
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0px 1px 5px 1px rgb(103 103 103 / 10%);
    background: rgb(255 255 255 / 0.95);
    color: #585858;
    border-radius: 30px;
    padding: 2px 8px;
}

.btn-choice:before {
    font-family: 'feather' !important;
    content: "\e94d";
    font-size: 0.8rem;
    margin-right: 5px;
}
.btn-choice:after {
    content: "編輯圖片";
}
.btn-choice-friend {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}
.thanks-card .btn-choice-emo {
    top: 210px;
    right: 38%;
}
.thanks-card .btn-choice-emo:after {
    display: none;
}
.thanks-card .emoticon-dropdown-menu {
    transform: translate3d(0px, 250px, 0px) !important;
    margin: 0;
}
.thanks-card .emoticon-dropdown-menu:before, .thanks-card .emoticon-dropdown-menu:after {
    right: 47%;
}
.thanks-card .emoticon-dropdown-menu .tab-content {
    height: 200px;   
}
/*================================================================================
    mycoupon-list
================================================================================*/
.mycoupon-list {
    margin: 0;
}
.mycoupon-list .media {
    border: 0;
    padding: 10px;
}
.mycoupon-list .media > a, .mycoupon-list .media > div {
    display: block;
    flex: 1;
    background: #FFF;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
.mycoupon-list .media .media-body {
    position: relative;
    padding: 15px;
    float: left;
    width: 100%;
}
.mycoupon-list .media .media-body .date:last-child {
    margin-bottom: 35px;
}
.mycoupon-list .media .check-user {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    color: #ca9472;
    background: #efefef;
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 0.9rem;
}
.mycoupon-list .media .check-user.active {
    color: #74ca72;
}
.mycoupon-list .media .media-body .btn {
    float: right;
    margin-top: -4px;
}
.mycoupon-list .media .media-left {
    position: relative;
    padding: 5px;
    width: 100%;
}
.mycoupon-list .store_pic, 
.mycoupon-list .coupon-pic {
    display: block;
    float: left;
    overflow: hidden;
    border: #ececec 1px solid;
}
.mycoupon-list .store_pic img,
.mycoupon-list .coupon-pic img {
    width: 100%
}
.mycoupon-list .store_pic {
    width: 30%;
    border-right: 0;
}
.mycoupon-list .coupon-pic {
    position: relative;
    overflow: hidden;
    width: 70%;
    border-left: 0;
    background: #f3ecec url(../images/bg_egg_gift2.png);
    background-size: 170%;
}
.mycoupon-list .coupon-pic > img {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.mycoupon-line {
    position: absolute;
    height: 1px;
    width: 100%;
    border-top: 1px #ddd dashed;
    content: ' ';
    bottom: 0px;
    left: 0px;
}
.mycoupon-line:before, .mycoupon-line:after {
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    content: ' ';
    top: -5px;
    left: -4px;
    background: #f4f5fa;
}
.mycoupon-line:before {
    box-shadow: inset -4px 0px 3px #e4e4e4;
}
.mycoupon-line:after {
    box-shadow: inset 4px 0px 3px #dfdfdf;
    left: initial;
    right: -5px;
}
.mycoupon-list-used .store_pic,
.mycoupon-list-used .coupon-pic {

}
.mycoupon-list-used .store_pic img,
.mycoupon-list-used .coupon-pic img {
    opacity: 0.7;
}
.mycoupon-list .media .media-btn {
    padding: 10px;
    text-align: center;
}
/*---- coupon fancybox -----*/
.privilege-shop-name {
    position: absolute;
    text-align: center;
    top: 10px;
    left: -15px;
    z-index: 10;
    color: #868686;
    background: #ffffff;
    border-radius: 7px;
    padding: 4px 15px 5px 30px;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 9%);
}
.coupon-card-fancybox {
    width: 90%;
    max-width: 500px !important;
    overflow: auto;
    margin: 0;
}
.coupon-card-fancybox .card {
    margin-bottom: 10px;
}
.coupon-card-fancybox .card-img-top {
    overflow: hidden;
    background-color: #D9EBFF !important;
}
.coupon-card-fancybox .card-img-top img {
    width: 100%;
}
.coupon-card-fancybox .profile-card-with-cover-content {
    position: relative;
    padding-top: 1.5rem;
    /*height: calc(100vh - 310px);
    height: calc(var(--vh, 1vh) * 100 - 310px);*/
    overflow: hidden;
}
.coupon-card-fancybox .card-profile-image .coin-big {
    position: relative;
}
.coupon-card-fancybox .card-profile-image img {
    width: 100px;
    background: #FFF;
}
.coupon-card-fancybox .card-profile-image img.shop-img {
    position: absolute;
    width: 50px !important;
    border: #FFF 2px solid;
    bottom: 3px;
    right: -20px;
    top: inherit !important;
}
.coupon-card-fancybox .card-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.coupon-card-fancybox .card-title-expansion {
    color: #FFF;
    background: #FF9149;
    border-radius: 30px;
    padding: 3px 10px 3px 0;
    transform: translateY(-12px);
    display: inline-block;
    font-size: 15px;
}
.coupon-card-fancybox .card-title-expansion span {
    background: #d66f2b;
    border-radius: 30px;
    padding: 4px 10px;
    margin-right: 5px;
}
.coupon-card-fancybox .card-subtitle {
    border-top: #efefef 1px solid;
    border-bottom: #efefef 1px solid;
    line-height: 1.5rem;
    padding: 10px 0;
    margin: 20px 0 10px 0;
}
.coupon-card-fancybox .card-subtitle .txt {
    color: #000;
}
.coupon-card-fancybox .card-subtitle .exchange-store-block {
    margin-top: 5px;
}
.coupon-card-fancybox .desc-header {
    position: relative;
    color: #FFF;
    background: #000;
    text-align: left;
    padding: 5px 10px;
    border-radius: 5px;
}
.coupon-card-fancybox .desc.off {
    display: none;
}
.coupon-card-fancybox .desc {
    text-align: left;
    padding: 15px;
    background: #f2f2f2;
}
.coupon-card-fancybox .desc .txt {
    margin-bottom: 1rem;
    word-break: break-all;
    white-space: pre-line;
}
.coupon-card-fancybox .desc ul {
    padding-left: 20px;

}
.coupon-card-fancybox .desc li {
    list-style: disc;
}
.coupon-card-fancybox .barcode {
    border: #efefef 1px solid;
    padding: 10px;
    background: #f7f7f7;
}
.coupon-card-fancybox .barcode img {
    width: 30px;
    transform: rotate(20deg);
}
.coupon-card-fancybox .barcode span {
    display: block;
    margin-top: 10px;
}
.coupon-card-fancybox .barcode .btn-red {
    min-width: 170px;
    max-width: 100%;
}
.coupon-card-fancybox .barcode .exchange-way-block {
    display: none;
    margin: 10px 0 5px 0;
}
.coupon-card-fancybox .barcode .exchange-way-pwd.on, 
.coupon-card-fancybox .barcode .exchange-way-nopwd.on {
    display: block;
}
.coupon-card-fancybox .barcode span.highlight {
    display: inline-block;
}
.w-180-center {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}
.coupon-status {
    position: absolute;
    top: -40px;
    right: 20px;
    z-index: 5;
}
.coupon-card-fancybox .coupon-status {
    top: 30px;
}
.coupon-status img {
    width: 100px;
}
.coupon-card-btn .btn {
    width: 100%;
    float: left;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 0.75rem 1rem;
}
.coupon-card-btn .btn.off {
    display: none;
}
/*.coupon-card-btn .btn:first-child {
    border-bottom-right-radius: 0px;
}
.coupon-card-btn .btn:last-child {
    border-bottom-left-radius: 0px;
}*/
.coupon-card-btn .btn.btn-block {
    width: 100%;
    border-bottom-right-radius: 0.21rem;
    border-bottom-left-radius: 0.21rem;
}
.coupon-timer {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 5px 15px 5px 63px;
    border-radius: 30px;
    color: #b54f55;
    background: #FFF;
    font-size: 1.3rem;
    box-shadow: 1px 1px 5px 2px rgb(0 0 0 / 19%);
    transition:top 0.3s;
    white-space: nowrap;
}
.coupon-timer i {
    display: block;
    position: absolute;
    top: -9px;
    left: 0;
    color: #FFF;
    font-size: 3.6rem;
    padding: 1px;
    background: #b54f55;
    border-radius: 100%;
    box-shadow: 1px 1px 5px 2px rgb(0 0 0 / 10%);
}
.coupon-timer.on {
    opacity: 1;
    visibility: visible;
    z-index: 99;
    top: 60px;
}
.nav-right-tabs {
    /*float: right;
    width: auto;
    margin-top: -10px;*/
    white-space: nowrap;
}
.nav-right-tabs .nav-link.active .txt {
    color: #d4646b;
    padding-bottom: 5px;
    border-bottom: #d4646b 2px solid;
}
/*----- expansion fancybox -----*/
.pic-expansion {
    text-align: center;
}
.pic-expansion img {
    width: 95%;
}
.expansion-info {
    position: relative;
    margin: 0 -1.5rem;
    background: #ECECEC;
    min-height: 70px;
    padding: 20px 20px 20px 110px;
    margin-bottom: 30px;
}
.expansion-info .store_pic {
    position: absolute;
    top: -30px;
    left: 1.5rem;
}
.expansion-info .store_pic img {
    width: 80px;
    border: #ECECEC 5px solid;
}

/*------ secret-gallery-fancybox -------*/
.secret-gallery-fancybox {
    background: #000;
}
.secret-txt-content {
    border: 0 !important;
    align-items: center;
    margin-top: 20px;
    color: #CCC;
}
.secret-txt-content .pic {
    
}
.secret-txt-content .name {
    color: #FFF;
    margin: 0 5px 0 5px;
}
.secret-txt-content .pic img {
    width: 45px;
}
.swiper-button-next {
    right: 0;
}
.swiper-button-prev {
    left: 0;
}
.swiper-button-next, .swiper-button-prev {
    z-index: 200 !important;
    /*z-index: 1;
    background-size: 10px auto;
    transition: border-color 0.3s;
    border: 1px solid #1182ff;
    border-radius: 50%;
    width: 40px;
    height: 40px;*/
}

/*================================================================================
    qrcode-box
================================================================================*/
#receive-coins-fancybox {
    padding-top: 60px !important;
}
.qrcode-box {
    max-width: 350px;
    margin: 30px auto 0 auto;
}
.qrcode-image {
    position: relative;
    text-align: center;
    padding: 0 20px 0 20px;
    margin-bottom: 15px;
}
.qrcode-image canvas {
    width: 100%;
    max-width: 350px;
}
.qrcode-image .user-pic {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
}
.qrcode-image .user-pic img {
    width: 60px;
    border: #FFF 5px solid;
}
.qrcode-image .user-pic i {
    position: absolute;
    right: 0;
    bottom: 0;
}
.qrcode-image .qr-logo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25px;
    height: 25px;
    color: #FFF;
    background: url(../../assets/images/logo_s.png) no-repeat;
    background-size: 25px;
    border-radius: 50px;
    padding: 0 5px;
    font-size: 0.8rem;
}

/*================================================================================
    on air
================================================================================*/
.onair-list .media {
    margin: 0 0px 5px 0px;
    border: 0;
    align-items: center;
}
.onair-list .onair-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    color: #FFF;
    background: #000;
    border-radius: 100%;
    text-align: center;
}
.onair-list .media-heading {
    line-height: 1.7rem; 
    font-size: 1.1rem;
}
.onair-list .media .icon {
    padding-right: 0;
    margin-left: 10px;
}
.onair-type {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    text-align: center;
    color: #FFF;
    padding: 3px 10px;
    background: #92ccc6;
}
.onair-type-now {
    background: #d4646b;
}
.onair-type-end {
    background: #a7a7a7;
}
.onair-list .media-content .desc, 
.onair-list .media-content .location, 
.onair-list .media-content .date {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 5px;
}
.onair-list .media-content .location, 
.onair-list .media-content .date {
    font-size: 1rem;
    color: #4c4c4c;
}
.onair-now-progress-block {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}
.onair-now-progress {
    position: relative;
    padding: 10px;
    padding-right: 100px;
}
.onair-now-progress .progress {
    margin-bottom: 0;
    height: 17px;
    margin-top: 10px;
}
.onair-now-progress .progress-percent {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 0.8rem;
    margin-bottom: 0;
}
.onair-now-progress .btn-end {
    position: absolute;
    top: 10px;
    right: 10px;
}
.onair-now-progress-block .text-notice {
    padding: 10px;
    color: #FFF;
    font-size: 0.9rem;
    background: #d8c7c7;
    border-top: #f1f1f1 1px solid;
}
.btn-m-5 {
    margin: 5px 0;
}
.onair-list .distance-num {
    padding-left: 10px;
    color: #b37b7f;
    font-size: 1.2rem;
}

/*==============================================================================
  tom-select
================================================================================*/
.ts-wrapper {
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
}

.ts-wrapper.plugin-drag_drop.multi>.ts-control>div.ui-sortable-placeholder {
    visibility: visible !important;
    background: #f2f2f2 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: 0 none !important;
    box-shadow: inset 0 0 12px 4px #fff;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
    content: '!';
    visibility: hidden;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
    margin-right: 0.5rem;
}

.plugin-clear_button .ts-control {
    padding-right: calc(1em + (3 * 6px)) !important;
}

.plugin-clear_button .clear-button {
    opacity: 0;
    position: absolute;
    top: 8px;
    right: calc(8px - 6px);
    margin-right: 0 !important;
    background: transparent !important;
    transition: opacity 0.5s;
    cursor: pointer;
}

.plugin-clear_button.single .clear-button {
    right: calc(8px - 6px + 2rem);
}

.plugin-clear_button.focus.has-items .clear-button,
.plugin-clear_button:hover.has-items .clear-button {
    opacity: 1;
}

.ts-wrapper .dropdown-header {
    position: relative;
    padding: 10px 8px;
    border-bottom: 1px solid #d0d0d0;
    background: #f8f8f8;
    border-radius: 3px 3px 0 0;
}

.ts-wrapper .dropdown-header-close {
    position: absolute;
    right: 8px;
    top: 50%;
    color: #303030;
    opacity: 0.4;
    margin-top: -12px;
    line-height: 20px;
    font-size: 20px !important;
}

.ts-wrapper .dropdown-header-close:hover {
    color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
    box-shadow: none;
    border: 1px solid #d0d0d0;
}

.plugin-dropdown_input .dropdown-input {
    border: 1px solid #d0d0d0;
    border-width: 0 0 1px 0;
    display: block;
    padding: 8px 8px;
    box-shadow: none;
    width: 100%;
    background: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input {
    min-width: 0;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input {
    flex: none;
    min-width: 4px;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder {
    color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
    display: flex;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
    border-right: 1px solid #f2f2f2;
    border-top: 0 none;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
    border-right: 0 none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:before {
    display: none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
    border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
    display: inline-flex;
    align-items: center;
    padding-right: 0 !important;
}

.ts-wrapper.plugin-remove_button .item .remove {
    color: inherit;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
    padding: 2px 6px;
    border-left: 1px solid #d0d0d0;
    border-radius: 0 2px 2px 0;
    box-sizing: border-box;
    margin-left: 6px;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ts-wrapper.plugin-remove_button .item.active .remove {
    border-left-color: #cacaca;
}

.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
    background: none;
}

.ts-wrapper.plugin-remove_button.disabled .item .remove {
    border-left-color: white;
}

.ts-wrapper.plugin-remove_button .remove-single {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 23px;
}

.ts-wrapper {
    position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
    color: #303030;
    font-family: inherit;
    font-size: 13px;
    line-height: 18px;
    font-smoothing: inherit;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
    background: #fff;
    cursor: text;
}

.ts-control {
    border: #e4e4e4 1px solid;
    padding: 8px 8px;
    width: 100%;
    height: calc(2.75rem + 2px);
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    background: #FFF url(../images/icon/arrow-down-sign-to-navigate.svg) no-repeat right center;
    background-size: 30px;
    padding-right: 25px;
}

.ts-wrapper.multi.has-items .ts-control {
    padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
}

.full .ts-control {
    background-color: #fff;
}

.disabled .ts-control,
.disabled .ts-control * {
    cursor: default !important;
}

.focus .ts-control {
    box-shadow: none;
}

.ts-control>* {
    vertical-align: baseline;
    display: inline-block;
}

.ts-wrapper.multi .ts-control>div {
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    background: #f2f2f2;
    color: #303030;
    border: 0 solid #d0d0d0;
}

.ts-wrapper.multi .ts-control>div.active {
    background: #e8e8e8;
    color: #303030;
    border: 0 solid #cacaca;
}

.ts-wrapper.multi.disabled .ts-control>div,
.ts-wrapper.multi.disabled .ts-control>div.active {
    color: #7d7c7c;
    background: white;
    border: 0 solid white;
}

.ts-control>input {
    flex: 1 1 auto;
    min-width: 7rem;
    display: inline-block !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-indent: 0 !important;
    border: 0 none !important;
    background: none !important;
    line-height: inherit !important;
    user-select: auto !important;
    box-shadow: none !important;
}

.ts-control>input::-ms-clear {
    display: none;
}

.ts-control>input:focus {
    outline: none !important;
}

.has-items .ts-control>input {
    margin: 0 4px !important;
}

.ts-control.rtl {
    text-align: right;
}

.ts-control.rtl.single .ts-control:after {
    left: 15px;
    right: auto;
}

.ts-control.rtl .ts-control>input {
    margin: 0 4px 0 -2px !important;
}

.disabled .ts-control {
    opacity: 0.5;
    background-color: #fafafa;
}

.input-hidden .ts-control>input {
    opacity: 0;
    position: absolute;
    left: -10000px;
}

.ts-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    border: #e4e4e4 1px solid;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    text-align: left;
}

.ts-dropdown [data-selectable] {
    cursor: pointer;
    overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
    background: rgba(125, 168, 208, 0.2);
    border-radius: 1px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: 8px;
}

.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
    cursor: inherit;
    opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
    opacity: 1;
    cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
    border-top: 0 none;
}

.ts-dropdown .optgroup-header {
    color: #303030;
    background: #fff;
    cursor: default;
}

.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
    background-color: #f5fafd;
    color: #495c68;
}

.ts-dropdown .active:after {
    font-family: feather !important;
    content: "\e926";
    color: #d4646b;
    /* float: right; */
}

.ts-dropdown .create:hover.create,
.ts-dropdown .option:hover.create,
.ts-dropdown .active.create {
    color: #495c68;
}

.ts-dropdown .create {
    color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown .spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 5px 8px;
}

.ts-dropdown .spinner:after {
    content: " ";
    display: block;
    width: 24px;
    height: 24px;
    margin: 3px;
    border-radius: 50%;
    border: 5px solid #d0d0d0;
    border-color: #d0d0d0 transparent #d0d0d0 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.ts-dropdown-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px;
    overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.ts-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}



/*================================================================================
    radio-btn-square
================================================================================*/
.iCheck-helper {
    z-index: 999999 !important;
    transform: translatez(9000000px);
}
.radio-btn-square {
    display: flex;
}
.radio-btn-square .custom-radio {
    position: relative;
    width: 50%;
    color: #FFF;
    text-align: center;
    border: #d4646b 3px solid;
    border-left: 0;
}
.radio-btn-square .custom-radio:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: #d4646b 3px solid;
}
.radio-btn-square .custom-radio:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.radio-btn-square .custom-radio.checked {
    background: #d4646b;
}
.radio-btn-square .iradio_square-red {
    width: 100%;
    height: 100%;
    position: absolute !important;
    left: 0;
    margin: 0;
    background: none;
}
.radio-btn-square label {
    color: #d4646b;
    margin: 0;
    padding: 10px;
    margin: 0 !important;
}
.radio-btn-square .custom-radio.checked label {
    color: #FFF;
}

/*================================================================================
    upimage
================================================================================*/
#upBox {
    text-align: center;
    width: 500px;
    padding: 20px;
    border: 1px solid #666;
    margin: auto;
    margin-top: 150px;
    margin-bottom: 200px;
    position: relative;
    border-radius: 10px;
}

#inputBox, .actionUpload {
    width: 100px;
    height: 100px;
    border: 1px dashed #c7c7c7;
    color: darkgrey;
    border-radius: 5px;
    position: relative;
    text-align: center;
    /*line-height: 100px;*/
    overflow: hidden;
    background: #FFF;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 1.1rem;
}

#inputBox input, .actionUpload input {
    width: 100px;
    height: 100px;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
}

#inputBox i, .actionUpload i {
    font-size: 1.2rem;
}

#inputBox span, .actionUpload span {
    display: block;
    font-size: 0.9rem;
    width: 100%;
}

#item-galleryimg-output2 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#imgBox {
    text-align: left;
    padding: 1rem;
}

.imgContainer {
    display: inline-block;
    width: 32%;
    margin-right: 1%;
    position: relative;
    margin-top: 10px;
    box-sizing: border-box;
}

.imgContainer img {
    width: 100%;
    vertical-align: top;
    cursor: pointer;
}

.imgContainer p {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    background: black;
    text-align: center;
    line-height: 25px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}
.imgContainer p:before {
    font: normal normal normal 16px/1 LineAwesome;
    content: "\f34d";
}

.imgContainer:hover p {
    display: block;
}

/*================================================================================
    upimage+croppie
================================================================================*/
.upload-box {
}
.upload-box .item {
    position: relative;
    display: inline-block;
    width: 31.33%;
    padding-bottom: 25%;
    margin: 0 1% 5px 1%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    outline: 1px solid #dbdbdb; 
}
.upload-box .item:ntn-child(5n), .upload-box .upload:ntn-child(5n) {
    margin-right: 0; 
}
.upload-box .item i, .upload-box .upload i {
    z-index: 2;
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 16px;
    text-align: center;
    line-height: 19px;
    background-color: #FFF;
    box-shadow: 1px 1px 5px rgb(204 204 204 / 50%);
    top: 6px;
    right: 6px;
    font-style: normal;
    border-radius: 30px; 
}
.upload-box .upload:after {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '+';
    font-size: 60px;
    font-weight: bolder;
    text-align: center;
    line-height: 66px;
    color: #ccc; }
.upload-box input[type="file"] {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0; }

#J_file_box {
    display: none;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5); 
 }
.crop-group {
    display: none;
    z-index: 100000;
    position: fixed;
    width: 100%;
    height: 50px;
    top: 15px;
    color: #666;
    text-align: center; 
}
.crop-group input {
    display: none; 
}
.crop-group span {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 2px solid #fff;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.84); 
}
.crop-group input:checked + span {
    color: #fff;
    background-color: rgba(43, 137, 232, 0.84); 
}
.btn-group {
    /*display: none;
    z-index: 100001;
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 15px;
    color: #fff;
    text-align: center; */
}
.btn-group span {
    display: inline-block;
    padding: 4px 20px;
    background: #d4646b;
    border-radius: 5px; 
}
.btn-group span.multiselect-selected-text {
    background: no-repeat;
    padding: 0;
}
.multiselect {
    width: 100%;
    text-align: left;
    border: #e4e4e4 1px solid;
    background: #FFF;
}
.multiselect::after {
    float: right;
}
.multiselect-container {
    width: 100%;
    background: #f7f7f7;
}
.multiselect-container>li>a>label {
    padding: 3px 15px !important;
    width: 100%;
    border-bottom: #FFF 1px solid;
}
.select-store-list .btn-group {
    width: 100%;
}
#J_cancel {
  margin-right: 30px;
  background: #ccc; 
}

/*!
 * Cropper v0.1.0
 * https://github.com/fengyuanchen/cropperjs
 *
 * Copyright (c) 2015 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2015-09-25T09:19:58.017Z
 */.cropper-container {
    position: relative;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr!important;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

.cropper-container img {
    display: block;
    width: 100%;
    min-width: 0!important;
    max-width: none!important;
    height: 100%;
    min-height: 0!important;
    max-height: none!important;
    image-orientation: 0deg!important
}

.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.cropper-drag-box {
    background-color: #fff;
    filter: alpha(opacity=0);
    opacity: 0
}

.cropper-dashed,.cropper-modal {
    filter: alpha(opacity=50);
    opacity: .5
}

.cropper-modal {
    background-color: #000
}

.cropper-view-box {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: #39f solid 1px;
    outline-color: rgba(51,153,255,.75)
}

.cropper-dashed {
    position: absolute;
    display: block;
    border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
}

.cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    filter: alpha(opacity=75);
    opacity: .75
}

.cropper-center:after,.cropper-center:before {
    position: absolute;
    display: block;
    content: " ";
    background-color: #eee
}

.cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
}

.cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
}

.cropper-face,.cropper-line,.cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=10);
    opacity: .1
}

.cropper-face {
    top: 0;
    left: 0;
    background-color: #fff
}

.cropper-line,.cropper-point {
    background-color: #39f
}

.cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
}

.cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
}

.cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
}

.cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
}

.cropper-point {
    width: 5px;
    height: 5px;
    filter: alpha(opacity=75);
    opacity: .75
}

.cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
}

.cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
}

.cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
}

.cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
}

.cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
}

.cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
}

.cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
}

.cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    filter: alpha(opacity=100);
    opacity: 1
}

.cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: " ";
    background-color: #39f;
    filter: alpha(opacity=0);
    opacity: 0
}

@media (min-width:768px) {
    .cropper-point.point-se {
        width: 15px;
        height: 15px
    }
}

@media (min-width:992px) {
    .cropper-point.point-se {
        width: 10px;
        height: 10px
    }
}

@media (min-width:1200px) {
    .cropper-point.point-se {
        width: 5px;
        height: 5px;
        filter: alpha(opacity=75);
        opacity: .75
    }
}

.cropper-bg {
    /*background-image: url(data:image/png;
    base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)*/
}

.cropper-invisible {
    filter: alpha(opacity=0);
    opacity: 0
}

.cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0
}

.cropper-hidden {
    display: none!important
}

.cropper-move {
    cursor: move
}

.cropper-crop {
    cursor: crosshair
}

.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point {
    cursor: not-allowed
}



/*----*/
.cropper-pic-list-block {
    display: none;
    width: 100%;
    margin-top: 15px;
    padding: 0 8px;
    flex-wrap: wrap;
}
.cropper-pic-list-block.on {
    display: flex;
}
.cropper-pic-list {
    position: relative;
    width: 31.33%;
    margin: 1%;
}
.cropper-pic-list img {
    width: 100%;
}
.cropper-pic-list .btn-move-pic, 
.cropper-pic-list .btn-delete-pic {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    z-index: 999;
    box-shadow: 0px 1px 5px 1px rgb(103 103 103 / 10%);
    background: rgb(255 255 255 / 0.95);
    color: #585858;
    border-radius: 30px;
    padding: 2px 0;
}
.cropper-pic-list .btn-move-pic {
    left: 5px;
}
.cropper-pic-list .btn-delete-pic {
    right: 5px;
}

/*================================================================================
    card-video
================================================================================*/
.card-video .media {
    margin-top: 10px;
    align-items: flex-start;
}
.card-video .media .media-object {
    width: 50px;
}
.card-video .card-body {
    padding: 10px;
}
.card-video .media-heading, 
.dropdown-menu-userlist .media .media-heading {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: normal;
    padding: 0 10px;
}
.card-video .btn-area {
    margin: 0 -10px;
    margin-top:10px;
    padding: 10px 10px 0 10px;
    border-top: #e8e8e8 1px solid;
}
.video-list-block .top-num {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 99;
    color: #FFF;
    font-size: 1.2rem;
    font-family: ;
    padding: 5px 10px 5px 35px;
    background: url(../images/icon/crown.svg) #75c7cb no-repeat 10px center;
    background-size: 17px;
}
.video-box {
    position: relative;
}
.video-box img {
    width: 100%;
    height:auto;
}
.play-btn-area, .play-btn, .play-btn-s {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.play-btn span {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 60px;
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/icon/youtube_play_b.svg) no-repeat;
    background-size: 100%;
    opacity: 0.8;
}
.play-btn:hover span {
    background-image: url(../images/icon/youtube_play_red.svg);
}
.play-btn-s span {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 40px;
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/icon/youtube_play_b.svg) no-repeat;
    background-size: 100%;
    opacity: 0.8;
}
.play-btn-s:hover span {
    background-image: url(../images/icon/youtube_play_red.svg);
}
.countdown-getegg {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 5px 10px 5px 25px;
    border-radius: 15px;
    color: #e4a748;
    background: #FFF;
    font-size: 0.8rem;
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.08);
    transition: width 0.3s;
}
/*.countdown-getegg:before {
    position: absolute;
    display: block;
    content: " ";
    top: -11px;
    left: -23px;
    width: 45px;
    height: 50px;
    transform: rotate(10deg);
    background: url(../images/egg_gift_s_fixed.png) no-repeat;
    background-size: 40px;
}*/
.countdown-getegg:before {
    position: absolute;
    display: block;
    content: " ";
    top: -7px;
    left: -23px;
    width: 45px;
    height: 50px;
    transform: rotate(10deg);
}
.countdown-getegg.get-mcoin:before {
    background: url(../images/coin_m.svg) no-repeat;
    background-size: 40px;
}
.countdown-getegg.get-wcoin:before {
    background: url(../images/coin_w.svg) no-repeat;
    background-size: 40px;
}
.countdown-getegg .txt, 
.countdown-getegg .time, 
.countdown-getegg .success-txt {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.countdown-getegg .time, .countdown-getegg .success-txt {
    display: none;
}
.countdown-getegg.on .success-txt {
    display: block;
}
.countdown-getegg.on {
    visibility: visible;
    opacity: 0;
    -webkit-animation-duration:1s;
    animation-duration:2s;
    /*animation-delay: 2s;*/
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    -webkit-animation-name: success-fadeOutUp;
    animation-name: success-fadeOutUp;
}
@-webkit-keyframes success-fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }
    70% {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-20px);
    }
}
         
@keyframes success-fadeOutUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/*----------- dropdown-menu-userlist ----------------*/
.btn-givesocial {

}
.dropdown-toggle.btn-givesocial {
    
}
.dropdown-toggle.btn-givesocial:after {
    top: 1px;
    transform: scale(0.8);
}
.show > .btn-givesocial.dropdown-toggle {
    color: #FFF !important;
    background-color: #FF9149;
}
.dropdown-menu-userlist .dropdown-menu-header {
    padding: 5px 0;
}
.dropdown-menu-userlist .dropdown-menu-header a {
    position: absolute;
    top: 10px;
    right: 15px;
}
.dropdown-menu-userlist {
    padding: 5px 15px;
    border: 0;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    max-width: 100%;
}
.dropdown-menu-userlist.dropdown-menu-right {
    margin-left: 2px;
    margin-right: -2px;
}
.dropdown-menu-userlist .media {
    margin-top: 0;
    padding: 8px 2px;
    align-items: center;
    border-top: #f2f2f2 1px solid !important;
}
.dropdown-menu-userlist .media .media-heading {
    margin: 0;
    padding: 0;
    white-space: initial;
    word-break: break-all;
}
.dropdown-menu-userlist .media:first-child {
    border-top: 0 !important;
}
.dropdown-menu-userlist .media .media-object {
    width: 30px;
}
.dropdown-menu-userlist .btn-thermometer {
    margin-right: 10px;
    text-align: left;
}
.dropdown-menu-userlist .media-left, 
.dropdown-menu-userlist .media-right, 
.dropdown-menu-userlist .media-body, 
.dropdown-menu-userlist .btn.btn-thermometer {
    
}
.dropdown-menu-userlist .media-right .btn {
    padding: 5px 10px;
    margin-left: 2px;
}
.dropdown-menu-userlist .dropdown-menu-footer {
    margin-top: 10px;
}

/*================================================================================
    Map
================================================================================*/
.top-map-fixed {
    position: fixed;
    bottom: 70px;
    left: 50%;
    margin-left: -65px;
    z-index: 999;
    color: #FFF;
    background: #d4646b;
    padding: 10px 30px;
    border-radius: 50px;
    box-shadow: 1px 1px 5px 1px rgba(62, 62, 62, 0.07);
}
.vertical-content-menu .top-map-fixed {
    margin-left: 50px;
}
.vertical-content-menu.menu-collapsed .top-map-fixed {
    margin-left: -20px;
}
.top-map-fixed:hover {
    color: #FFF;
    background: #af4e54;
}
#map-fancybox {
   max-width: 100%;
}
.searchBtn {
    margin: 10px;
    padding: 10px 20px !important;
}
#perform-map { 
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
}
#perform-map .gm-style .gm-style-iw-d {
    overflow: scroll !important;
}
#perform-map .gm-style .gm-style-iw-d > div {
    padding: 0 15px 10px 0;
}
/*#perform-map .gm-style div div div div img[src] {
    border: #FFF 3px solid !important;
    border-radius: 100%;
}
#perform-map .gm-style div div div div div img[src] {
    border: 0 !important;
    border-radius: 0;
}*/
#perform-map .badge {
    margin-right: 5px;
}
.map .media-content .desc {
    margin-bottom: 5px;
}
#store-map {
    height: 350px;
    margin: 0 -7px;
}
.map .labels {
    overflow: inherit !important;
}
.map .labels span {
    display: block;
    border: #FFF 3px solid !important;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: url(../../assets/images/store/no-img.jpg) no-repeat;
    background-size: cover;
}
/*.map .labels:after {
    position: absolute;
    display: block;
    content: " ";
    bottom: -12px;
    left: 50%;
    border: solid transparent;
    border-top: 10px solid #FFF;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}*/
.map .labels img {
    display: block;
    width: 100%;
    border: #f2f2f2 1px solid;
}
#perform-map .labels span {
    border-radius: 100%;
}
#perform-map .labels img {
    border:0;
}
.labels_sq {
    overflow: inherit !important;
}
.labels_sq div {
    position: absolute;
    top:-60px;
    left: -30px;
    width: 70px;
    height: 70px;
    border: #FFF 3px solid !important;
    border-radius: 100%;
    overflow: hidden;
}
.labels_sq div img {
    width: 100%;
}

/*================================================================================
    message-list
================================================================================*/
.message-list .media {
    position: relative;
    align-items: center;
    padding: 0 0 0 10px;
    opacity: 0.8;
}
.message-list .ueser-name {
    margin-bottom: 5px;
}
.message-list .ueser-name .badge {
    border-radius: 30px;
    margin-left: 5px;
    font-size: 0.8rem;
}
.no-read {
    background: #fff2f2;
    opacity: 1;
}
.no-read:before {
    display: inline-block;
    content: " ";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #FF4961;
    border-radius: 10px;
    margin-right: 5px;
}
.message-list a {
    position: relative;
    display: flex;
    flex: 1;
    /*width: 100%;*/
    align-items: center;
}
.message-list .media > a {
    padding: 1.5rem;
}
.message-list .media > .media-right {
    padding-right: 1.5rem;
}
.message-list .media .media-right .btn {
    padding: 5px 10px;
    font-size: 0.8rem;
    margin-bottom: 5px;
}
.message-list .media .media-right time.text-muted {
    color: #b7b7b7 !important;
}
.message-list .pic img {
    width: 60px;
}
.message-list .date {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    color: #999;
}
.message-list .date2 {
    color: #999;
    margin-top: 5px;
}
.message-list .media .media-body {
    width: 100%;
}
.message-list .media .txt {
    word-break: break-all;
}
.message-list .txt span.name {
    color: #000;
    text-decoration: underline;
    margin-right: 5px;
}
.message-list .txt span.badge {
    margin-right: 5px;
}
.message-list .media-right .badge {
    margin-top: 20px;
}
.icon-message {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #CCC;
    text-align: center;
    color: #FFF;
}
.icon-message i {
    font-size: 25px;
    line-height: 62px;
}
.icon-message i.la {
    font-size: 30px;
    line-height: 60px;
}
.icon-message.icon-bg-b {
    background: #75c7cb;
}
.icon-message.icon-bg-r {
    background: #d4646b;
}
.icon-message.icon-bg-o {
    background: #ef7d24;
}
.icon-message.icon-bg-pur {
    background: #5a3ea0;
}
.icon-message.icon-bg-peach {
    background: #c471ed; /* Old browsers */
    background: -moz-linear-gradient(45deg, #c471ed 1%, #f64f59 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #c471ed 1%,#f64f59 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #c471ed 1%,#f64f59 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c471ed', endColorstr='#f64f59',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bg-peach {
    position: relative;
    color: #FFF;
    padding: 10px;
    border-radius: 7px;
    background: #ee5473;
    background: -moz-linear-gradient(45deg, #c471ed 1%, #f64f59 100%);
    background: -webkit-linear-gradient(45deg, #c471ed 1%, #f64f59 100%);
    background: linear-gradient(45deg, #c471ed 1%, #f64f59 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c471ed', endColorstr='#f64f59',GradientType=1 );
}
.bg-peach-arrow-r:after {
    position: absolute;
    display: block;
    content: " ";
    top: 50%;
    margin-top: -8px;
    right: -12px;
    border: solid transparent;
    border-left: 15px solid #ee5473;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
.icon-message.puzzle-list-1 {
    background: #c23043;
}
.icon-message.puzzle-list-2 {
    background: #de863c;
}
.icon-message.puzzle-list-3 {
    background: #51a54f;
}
.icon-message.puzzle-list-4 {
    background: #2960d7;
}
.icon-message.puzzle-list-5 {
    background: #892bbd;
}
.icon-message.puzzle-list-6 {
    background: #54b298;
}
.icon-easter-egg {
    display: inline-block;
    width: 24px;
    height: 28px;
    background: url(../images/icon/icon_message_mark6.svg) no-repeat;
    background-size: 100%;
    margin-top: 16px;
}
/*------message card--------*/
.message-card {
    border-radius: 10px;
    margin: 100px 20px 20px 20px;
    border: #eaeaea 1px solid;
    box-shadow: 3px 3px 0px 1px rgba(199, 199, 199, 0.27);
}
..message-card .card-img-top {
    background-size: 200px;
    background-repeat:no-repeat;
    background-position: center; 
}
.message-card .card-img-top .emoticons-pic {

}
.message-card .card-profile-image {
    text-align: center;
    margin-top: 20px;
    background: #ffffff;
    border-radius: 100%;
    padding: 20px;
    left: 50%;
    margin-left: -60px;
    width: auto;
    top: -80px;
    border: #eaeaea 2px solid;
}
.message-card .card-profile-image img {
    width: 80px;
}
.message-card .pic {
    margin-right: 10px;
}
.message-card .pic img {
    width: 50px;
}
.message-card .message-content {
    margin: 20px;
    border-radius: 10px;
    background: #f2f3f8;
}
.message-card .media {
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
}
.message-card .card-title {
    margin-bottom: 0;
    line-height: 2rem;
}
.message-card-coin {
    margin: 20px;
}
.message-card .store_pic, .message-card .icon {
    display: inline-block;
}
.message-card .store_pic {
    padding: 8px;
}
.message-card .icon {
    top: 6px;
    margin-left: 10px;
    position: relative;
}
.message-card .message-card-bot {
    padding: 20px;
    border-top: #eaeaea 1px solid;
    text-align: right;
}
.message-list .pic {
    position: relative;
}
.message-list .badge.badge-follow, 
.f-show-list .badge.badge-follow  {
    margin-top: 0;
    position: absolute;
    bottom: 0;
    right: 10px;
}

.message-list .media .btn-add-friend-chat {
    padding: 5px 7px;
    flex: none;
    margin: 0 10px;
}
.message-list .w-coins-pic {
    padding: 8px !important;
    margin-right: 20px;
}

/*------------coins-message-list-------------*/
.coins-message-list .media {
    flex-wrap: wrap;
    margin: 15px;
    padding: 1rem 1rem 4rem 120px !important;
    border-radius: 5px;
    border: #e8e8e8 1px solid;
    box-shadow: 2px 2px 0px 1px rgba(199, 199, 199, 0.27);
}
.coins-message-list .media:first-child {
    border-top: #e8e8e8 1px solid;
}
.coins-message-list .media .media-left {
    padding-right: 5px;
}
.coins-message-list .arrow {
    padding: 20px 10px 20px 0;
}
.coins-message-list .media-txt {
    flex: 0 0 100%;
    margin: 0;
}
.coins-message-list .media-txt .txt2 a {
    display: inline-block;
    color: #777;
    background: #fde2e2;
    padding: 2px 10px;
    margin-top: 10px;
    border-radius: 30px;
}
.coins-message-list .date {
    padding: 5px 10px 5px 75px;
}
.coins-message-list .media-txt .badge {
    margin-right: 8px;
}
.emoij-pic {
    position: absolute;
    height: calc(100% - 49px);
    top: 0;
    left: 0;
    width: 110px;
    overflow: hidden;
    border-right: #eaeaea 1px solid;
    text-align: center;
}
.emoij-pic a {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
}
.emoij-pic img {
    width: 100%;
}
.emoij-pic .badge {
    margin-bottom: 5px;
}
.follow-pic img {
    width: 65px;
    margin: 5px 0;
}
.emoij-pic .name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.coins-message-list .media .media-right {
    display: block !important;
    width: 100% !important;
    height: auto;
    padding-left: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 0 !important;
    background: #FFF;
    border-top: #f2f2f2 1px solid;
}
.coins-message-list .media .media-right div {
    display: flex;
    flex-wrap: wrap;
    transform: translateY(0);
}
.coins-message-list .media .btn {
    /*flex: 0 0 48%;*/
    flex: 1;
    margin: 0 1%;
    margin-top: 0 !important;
}

/*-----------  f-show-list -----------*/
.f-show-list .media {
    flex-wrap: wrap;
    border-top: 5px solid #f4f5fa;
}
.f-show-list .polist-media {
    border-top: 5px solid #f4f5fa;
    box-shadow: none;
}
.f-show-list .userprofile_item .polist-media {
    border: 0;
}
.f-show-list .media .pic {
    position: relative;
}
.f-show-list .media .pic img {
    width: 50px;
}
.f-show-list .media .media-body {
    align-self: center;
}
.f-show-list .media .date {
    color: #999;
    font-size:0.8rem;
}
.f-show-list .media .media-right {
    margin-top: 7px;
    text-align: right;
}
.show-po-box {
    flex: 0 0 100%;
    margin-top: 10px;
}
.show-po-inner {
    overflow: hidden;
    border-radius: 8px;
    border: #efefef 1px solid;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
}
.show-po-box img {
    width: 100%;
}
.show-po-info {
    padding: 15px;
    line-height: 1.4rem;
}
.show-po-info .title {
    line-height: 1.5rem;
}
.show-po-info p {
    margin-bottom: 0;
}
.show-po-btn .dropdown-menu-userlist.dropdown-menu-right {
    margin-right: 15px;
}
.show-po-wishlist .media {
    position: relative;
    padding: 15px;
}
.show-po-wishlist .media .title {
    position: relative;
    padding-right: 55px;
}
.show-po-wishlist .media-left img {
    width: 70px;
    border: #e2e2e2 1px solid;
}
.show-po-wishlist .media-left .w-coins-pic img{
    border: rgb(255 255 255 / 20%) 1px solid;
}
/*---- progress ---*/
.progress-outer {
    display: flex;
    align-items: center;
}
.progress {
    flex: 1;
    height: 17px !important;
    margin: 15px 0;
    overflow: inherit;
    border-radius: 20px;
}
.progress:before,
.progress-bar:before {
    display: block;
    content: " ";
    position: absolute;
    z-index: 1;
    top: -5px;
    left: -1px;
    width: 26px;
    height: 26px;
    background: #eeeeee;
    border-radius: 100%;
}
.progress:after {
    position: absolute;
    top: 5px;
    width: calc(100% - 10px);;
    height: 7px;
    z-index: 2;
    left: 5px;
    content: "";
    background: #f3f3f3;
    border-radius: 20px;
}
.progress-outer .w-coins-pic {
    margin-right: 15px;
}
.progress-bar {
    position: relative;
    z-index: 3;
    margin: 5px;
    border-radius: 50px;
}
.progress-bar:before {
    top: -4px;
    left: 0;
    width: 14px;
    height: 14px;
    background-color: #d4646b !important;
}
.show-po-wishlist .degree {
    position: absolute;
    top: -3px;
    right: 0;
    color: #d0656a;
    font-size: 1.3rem;
}
.show-po-wishlist .surplus {
    font-size: 0.8rem;
    color: #9e9e9e;
    text-align: right;
    margin-top: 5px;
    margin-bottom: -10px;
    margin-right: -55px;
}

.show-po-wishlist a.btn {
    margin-left: 15px;
}
.show-po-wishlist .media .reach-mark {
    display: inline-block;
    position: absolute;
    z-index: 10;
    right: 10px;
    top: 15px;
    transform: rotate(-13deg);
}
.show-po-wishlist .media .reach-mark img {
    width: 60px;
}
.reach .show-po-wishlist .degree {
    display: none;
}
.show-po-btn {
    display: flex;
    width: 100%;
    margin-top: 20px;
    align-items: center;
}
.show-po-btn-left {
    flex: 1;
}
.show-po-btn-left a, 
.show-po-btn-left .btn {
}
@media (min-width: 768px) {
    .show-po-box, .show-po-btn {
        /*padding: 0 25px 0 65px;*/
    }
}
/*================================================================================
    give-coins-fancybox
================================================================================*/
.user-coin-num-list {
    background: #FFF;
    box-shadow: 1px 1px 10px rgb(0 0 0 / 4%);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 25px;
}
.user-coin-num-list .user-coin-num {
    display: flex;
    /*background: #fef0f0;*/
    padding: 20px 10px;
    border-radius: 5px;
    text-align: left;
}
.user-coin-num .w-coins-pic, 
.user-coin-num .m-coins-pic {
    margin-right: 20px;
}
.user-coin-num-list .user-coin-num .txt h5 {
    margin-top: 10px;
}
.user-coin-num-list .user-coin-num-btn {
    background: #d4646b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-coin-num-list-m .user-coin-num-btn {
    background: #4a9183;
}
.user-coin-num-list .user-coin-num-btn a {
    width: 100%;
    color: #FFF;
    padding: 10px;
    font-size: 1.1rem;
}
.user-coin-num-list .user-coin-num-btn a:first-child {
    border-right: rgb(255 255 255 / 30%) 1px solid;
}
.user-coin-num-list .user-coin-num-btn a img {
    width: 35px;
    margin-right: 5px;
}
@media(max-width: 414px) {
    .user-coin-num-list .user-coin-num-btn a {
        font-size: 1rem;
    }
    .user-coin-num-list .user-coin-num-btn a img {
        width: 30px;
    }
}

.give-coins-block .tip {
    display: inline-flex;
    justify-content: center;
    color: #a36569;
    background: #f9dede;
    border-radius: 30px;
    padding: 3px 10px;
    min-width: 150px;
}
.give-coins-block .btn-area {
    padding-top: 40px;
}
.btn-list-border-block {
    border: #ecccce 1px solid;
    border-radius: 0.25rem;
}
.btn-outline-icon {
    border-color: #ecccce;
    background: #FFF;
    padding: 30px 5px !important;
    white-space: normal;
    user-select: auto !important;
}
.btn-outline-icon .icon {
    display: block;
    max-width: 80px;
    width: 100%;
    height: 80px;
    margin: 0 auto 20px auto;
    user-select: auto !important;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.btn-outline-icon .icon.w-60 {
    max-width: 60px;
    height: 60px;
    margin-bottom: 10px;
}
.btn-outline-icon .icon.w-60 img {
    width: 100%;
}
.btn-outline-icon.btn-choice-i-shop .icon {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_choice_wallet.svg);
}
.btn-outline-icon.btn-choice-i-friend .icon {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_choice_friend.svg);
}
.btn-outline-icon.btn-choice-i-giftlink .icon {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_choice_social.svg);
}
.btn-outline-icon.btn-choice-i-resetlink .icon {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_choice_reset.svg);
}
.btn-outline-icon.btn-choice-i-ai .icon {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_give_freecoin_ai.svg);
}
.btn-outline-icon.btn-choice-i-sharelink .icon {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_give_freecoin_link.svg);
}
.btn-outline-icon .title {
    color: #000;
    font-size: 1.1rem;
}
.btn-outline-icon .txt {
    margin-top: 5px;
    color: #828282;
}
.content-txt-row {
    display: flex;
    justify-content: space-around;
}
.content-txt {
    flex: 1;
    background: #f4f4f4;
    padding: 10px;
    border-radius: 15px;
    margin: 20px 10px 0 10px;
}
.content-txt dl {
    display: flex;
    align-items: center;
    margin: 5px;
    padding: 5px 0;
}
.content-txt dt {
    color: #000;
}
.content-txt dd {
    flex: 1;
    text-align: right;
    margin-bottom: 0;
}
.content-txt dd .btn {
    width: 55px;
    margin-top: 0 !important;
}
.content-txt dd .form-group {
    margin-bottom: 0;
}
.content-txt dd label {
    margin-bottom: 0;
}
.content-txt .txt-notice {
    text-align: left;
    margin: 20px 5px 10px 5px;
}
.content-txt .qrcode-image-link {
    width: 100%;
    padding: 0 10px;
}
@media (max-width: 600px) {
    .content-txt .qrcode-image-link {
        padding: 0 5px;
    }
}
.content-txt .social-share-btn {
    margin: 0;
}
.content-txt .social-share-btn ul {
   margin: 25px auto 10px auto;
   justify-content: space-around;
}
.content-txt .social-share-btn li {
    margin: 5px;
}
.content-txt .social-share-btn li img {
    width: 100%;
    max-width: 80px;
}
.content-txt .copy_link_input {
    border-radius: 30px;
    padding: 5px 10px;
    margin-bottom: 10px;
}
.form-group-radio-list {
    margin: 5px 0;
}
.form-group-radio-list span {
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
}
.form-group-radio-list span label {
    margin-left: 5px;
}
.border-bottom-gray {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
    border-bottom: #e3e3e3 1px solid;
}
.open-more-setting {
    border-top: #e3e3e3 1px solid;
}
.qrcode-image-link {
    position: relative;
    width: 130px;
}
.qrcode-image-link canvas {
    width: 100%;
}
.qrcode-image-link .coin-s-40 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.form-group-switchery {
    display: inline-block;
    position: relative;
}
.switchery-txt {
    font-size: 0.8rem;
    color: #b0b0b0;
    position: absolute;
    right: 5px;
    top: 6px;
    cursor: pointer;
    margin: 0 !important;
}
.switchery-txt:after {
    content: "關閉";
}
.switchery:checked ~ label.switchery-txt {
    color: #FFF;
    left: 8px;
    right: initial;
}
.switchery:checked ~ label.switchery-txt:after {
    content: "開啟";
}
.switchery-small {
    width: 55px;
    height: 28px;
}
.switchery-small>small {
    top: 1px;
    height: 22px !important;
    width: 22px !important;
}
.input-group-s-red .form-control {
    height: 29px;
    margin-right: -21px;
    padding-right: 30px;
    border-radius: 2rem;
}
.input-group-s-red .btn {
    border-radius: 2rem !important;
    height: 29px;
    z-index: 100;
}
.content-txt .input-group-s-red {
    padding: 15px 0 0 15px;
}
.d-flex-align-end {
    align-self: flex-end;
}
#give-coins-to-user-fancybox .btn-area {
    padding-top: 25px;
}
@media (max-width: 375px) {
    .btn-choice-i-sharelink .content-txt dl {
        display: block;
    }
    .btn-choice-i-sharelink .qrcode-image-link {
        width: 100%;
    }
    .btn-choice-i-sharelink dd {
        margin-top: 15px;
    }
    .btn-choice-i-sharelink .btn-download-qrcode {
        width: 100%;
    }
    .btn-choice-i-sharelink .content-txt .input-group-s-red {
        padding-left: 0;
    }
}


.give-coins-fancybox {
    padding-top: 260px !important;
}
.give-coins-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f4f5fa;
    padding-top: 42px;
    z-index: 99;
}
.filter-modal-fancybox .give-coins-top {
    padding-top: 48px;
}
.give-coins-top .btn-close {
    position: absolute;
    top: 14px;
    right: 13px;
}

.give-coins-top-info {
    margin: 16px 20px;
    /*align-items: center;*/
}
.give-coins-top-info .pic {
    padding: 5px;
    background: #FFF;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}
.give-coins-top-info .pic img {
    width: 60px;
}
.give-coins-top-info .media-body {
    margin-left: 15px;
}
.give-coins-top-info .name {
    display: block;
    color: #000;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.give-coins-top-info .coupon-img img {
    height: 70px;
    width: auto !important;
}
.give-coins-top-info .num {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 5px;
}
.give-coins-top-info .num .icon {
    margin-left: 5px;
}
.qua-num {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
}
.qua-num .txt-s {
    position: absolute;
    top: -20px;
    right: 0;
}
.qua-num .txt {
    margin-left: 5px;
}

/*give-way-block*/
.give-way-block {
}
.give-way-block .btn-give-way, 
.support-buy-btn {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.give-way-block .btn-give-way {
    text-align: left;
    display: flex;
    align-items: center;
    padding: 5px 7px 5px 10px;
    border: #d4646b 2px solid;
    font-size: 1.1rem;
}
.give-way-block .btn-give-way .txt {
    flex: 1;
}
.give-way-block .btn-give-way .pic img {
    width: 30px;
}
.support-buy-btn {
    border: #d4646b 2px solid;
    border-radius: 25px;
}
.support-buy-btn > .txt {
    position: relative;
    padding: 5px;
    color: #d4646b;
    cursor: pointer;
}
.support-buy-btn > .txt .btn-accordion {
    color: #d4646b;
}
.exchange-media-block {
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 10px !important;
    margin-bottom: 10px !important;
}
.exchange-media-block.on {
    height: auto;
    overflow: hidden;
    opacity: 1;
    margin-bottom: 15px !important;
}
.exchange-media-block .pic {
    margin-bottom: 0;
}
.exchange-media-block .info-box {
    text-align: left;
}
.exchange-media-block .author {
    min-height: auto !important;
    margin-top: 5px;
}
.exchange-media-block .author .name {
    padding-left: 0;
    margin-bottom: 0;
}
.exchange-media-block .info-box .txt {
    margin: 0 10px 10px 10px;
    text-align: left;
}


/*donate_wallet_fancybox*/
.donate_wallet_fancybox {
    padding: 147px 0 40px 0 !important;
}
.donate_wallet_fancybox .give-coins-top, 
.donate_wallet_fancybox .btn-fixed-bot {
    left: initial;
    max-width: 600px;
}
.donate_wallet_fancybox .give-coins-top .title {
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
}
.donate_wallet_fancybox .give-coins-top .title .coin-big-outline-w {
    padding: 2px !important;
    margin: 0 5px;
}
.donate_wallet_fancybox > .fancybox-close-small {
    display: none !important;
}
.no-random-bar {
    padding-top: 98px !important;
}

/*more-exchange-list-fancybox*/
.more-exchange-list-fancybox > .card {
    margin: 0 -1.5rem;
}
.nav-more-scroll nav.nav-tabs.nav-underline {
    border-bottom: 3px solid #f4f5fa;
}
.nav-more-scroll .nav-item {
    flex-basis: auto !important;
    width: auto !important;
    margin: 0 5px;
}
.nav-more-scroll .nav.nav-tabs.nav-underline .nav-item a.nav-link {
    padding: 7px 3px !important;
    border-bottom: 3px solid transparent;
}
.nav-more-scroll .nav.nav-tabs.nav-underline .nav-item a.nav-link.active {
    border-bottom: 3px solid #000;
}


/*exchange-coins-fancybox*/
.exchange-coins-fancybox {
    padding-top: 247px !important;
}
.exchange-coins-fancybox .give-coins-random-bar {
    background: #fff8f8;
}
@media (max-width: 768px) {
    .exchange-coins-fancybox {
        padding-top: 293px !important;
    }
    .exchange-coins-fancybox .give-coins-top-info .num {
        margin-top: 10px;
    }
    .qua-num {
        width: 100%;
        margin-top: 15px;
    }
    .qua-num .txt-s {
        position: static;
        margin-right: 5px;
        font-size: 1rem !important;
    }
}
.give-coins-top-info .num .input-group {
    width: 100px;
    align-items: center;
}
.btn-choice-emoij {
    position: relative;
    display: block;
    padding: 7px;
    text-align: center;
    width: 70px;
    height: 70px;
    font-size: 0.8rem;
    color: #9a9a9a;
    border: #eaeaea 1px solid;
    background: #fff;
    border-radius: 0.25rem;
}
.btn-choice-emoij i {
    display: block;
    font-size: 2rem !important;
    margin-bottom: 5px;
}
.btn-edit-emoij:before {
    position: absolute;
    right: -7px;
    top: -7px;
    z-index: 10;
    width: 20px;
    height: 20px;
    line-height: 17px;
    text-align: center;
    border-radius: 100%;
    font-family: 'feather' !important;
    content: "\e94d";
    font-size: 0.8rem;
    color: #9a9a9a;
    border: #eaeaea 1px solid;
    background: #fff;
}
.emoticon-pic, .emoticon-pic-no.off {
    display: none;
}
.emoticon-pic.active {
    display: block;
}

/*.give-coins-top-info {
    border-top: 0 !important;
    border-bottom: #eaeaea 1px solid;
}
.give-coins-top-info .pic {
    padding: 15px 5px 15px 20px
}
.give-coins-top-info .media-body {
    padding: 15px 10px;
    align-self: center;
}
.give-coins-top-info .media-heading {
    margin: 0;
}
.give-coins-top-info .media-right {
    padding: 15px 20px;
    border-left: #eaeaea 1px solid;
}
.give-coins-top-info .emoticon-pic {
    position: relative;
    height: 100px;
}
.give-coins-top-info .emoticon-pic .btn-choice {
    bottom: -10px;
    top: inherit;
    right: -5px;
    width: 20px;
    height: 20px;
    padding-top: 0;
}*/
.choice-list-block {
    position: relative;
    height: 56px;
}
.choice-list {
    position: absolute;
    width: 100%;
    padding: 10px;
    padding-left: 40px;
    background: #FFF;
    border-bottom: #eaeaea 1px solid;
    z-index: 50;
    transition:all 0.3s;
}
.choice-list.choice-list-p60 {
    padding-left: 60px;
}
.choice-list .icon {
    position: absolute;
    top: 12px;
    left: 7px;
    font-size: 2rem;
    color: #a5a5a5;
}
.choice-list .txt {
    position: absolute;
    top: 18px;
    left: 7px;
    font-size: 1rem;
    color: #a5a5a5;
}
.choice-list .choice-list-btn {
    width: 100%;
    overflow: hidden;
    background: #FFF;
    padding: 5px 30px 0 5px;
    margin: 0;
    max-height: 35px;
    transition: all 0.3s ease-out;
}
.choice-list .choice-list-btn ul {
    padding: 0;
    margin: 0;
}
.choice-list.opened .choice-list-btn {
    min-height: 35px;
    max-height: 500px;
    transition: all 0.3s ease-in;
}
.choice-list .btn-open {

    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 100;
    transition: all 0.5s;
    color: #333;
}
.choice-list.scroll-arrow .btn-open {
    display: none;
}
.choice-list .btn-open.opened {
    transform:rotate(180deg);
}
.choice-list .btn-open:before {
    font: normal normal normal 16px/1 LineAwesome;
    content: "\f110";
}
.choice-list li {
    display: inline-block;
    color: #FFF;
    background: #d4646b;
    border-radius: 3px;
    padding-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.choice-list li span {
    display: inline-block;
    border: #FFF 1px solid;
    border-radius: 17px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    line-height: 15px;
    text-align: center;
    font-size: 0.7rem;
    -webkit-transform : scale(0.9);
    margin-left: 3px;
    position: relative;
    top: -1px;
}
.choice-list li .btn-delete {
    display: inline-block;
    padding: 0 3px;
    margin-left: 5px;
    border-left: #de9b9f 1px solid;
}
.choice-list li .la {
    color: #FFF;
    font-size: 1rem;
}
.give-coins-fancybox .search-bar input, .search-bar .btn {
    padding: 1rem 1.5rem;
}
.give-coins-fancybox .friend-list-block .media-body {
    margin-right: 10px;
}
.give-coins-fancybox .friend-list-block .media-right .input-group {
    width: 100px;
    margin-bottom: 5px;
}
.give-coins-fancybox .friend-list-block .media-right .input-group input {
    padding: 3px;
    height: 30px;
    text-align: center;
}
.give-coins-fancybox .friend-list-block .media .media-heading {
    margin-bottom: 0;
}
.give-coins-fancybox .m-coins, .give-coins-fancybox .w-coins {
    font-size: 1.8rem;
    margin-top: -2px;
}
.give-coins-fancybox .m-coins span, .give-coins-fancybox .w-coins span {
    position: relative;
    top: 2px;
}
.give-coins-fancybox .friend-list-block .media .media-right {
    align-self: flex-start;
    margin-top: 5px;
    margin-left: 5px;
    text-align: center;
}
.give-coins-fancybox .friend-list-block .media .media-right .num {
    font-size: 0.8rem;
}
.give-coins-fancybox .friend-list-block .media-right .btn {
    padding: 3px;
    background-color: #ffffff;
    border-color: #eaeaea;
    color: #bfbfbf;
}
.give-coins-fancybox .friend-list-block .media-right .btn.bootstrap-touchspin-up, 
.give-coins-fancybox .friend-list-block .media-right .btn.bootstrap-touchspin-down {
    width: 30px;
}
.give-coins-fancybox .friend-list-block .media-right .form-control {
    border: 1px solid #eaeaea;
}
.give-coins-random-bar {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    border-bottom: #eaeaea 1px solid;
}
.give-coins-random-bar .form-group {
    margin: 0 10px;
}
.give-coins-random-bar select {
    height: 30px !important;
}

.give-coins-random-bar input[type="checkbox"]{
    display: none;
}
.give-coins-random-bar input[type="radio"] {
    opacity: 0;
    position: absolute;
}
.give-coins-random-bar input[type="checkbox"]+label {
}
.give-coins-random-bar label::before {
    content: "";
    display: inline-block;
    position: relative;
    top: -2px;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    background: #d7dcde;
    vertical-align: middle;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-right: 6px;
    margin-left: 5px;
}
.give-coins-random-bar input[type="checkbox"]:checked+label::before, 
.give-coins-random-bar input[type="radio"]:checked+label::before{
    color: #FFF;
    background-color: #d4646b;
    font-family: 'feather' !important;
    content: "\e926";
}
.give-coins-random-bar label {
    margin: 0;
}
.give-coins-random-bar .input-group {
    width: 70px;
    margin: 0 10px;
}
.give-coins-random-bar .input-group input {
    padding: 3px;
    height: 25px;
    text-align: center;
}
.give-coins-random-bar .input-group .form-control {
    border: 1px solid #eaeaea;
}
.give-coins-random-bar .input-group .btn {
    padding: 3px;
    height: 25px;
    background-color: #ffffff;
    border-color: #eaeaea;
    color: #bfbfbf;
}
.give-coins-random-bar .btn.btn-reset {
    padding: 3px 10px;
    height: 25px;
}
.give-coins-random-bar .btn.btn-reset i {
    font-size: 1rem;
}
#give-coins-friend-fancybox {
    
}
#give-coins-random.opened ,#choice-list-random.opened ,.search-bar.opened ,
#give-coins-self.opened ,#choice-list-self.opened {
    display: block;   
}
.coin-tabs.opened {
    display: flex;
}
#give-coins-random ,#choice-list-random ,#give-coins-friend-fancybox .search-bar.closed ,
#give-coins-random.closed ,#choice-list-random.closed,
#give-coins-self.closed ,#choice-list-self.closed, .coin-tabs.closed {
    display: none;
}
#give-coins-friend-fancybox.opened {
    /*padding-top: 251px !important;*/
    padding-top: 295px !important;
}
#give-coins-random {
    opacity: 0.7;
}
#give-coins-random .friend-list-block .media-left.pic, 
.filter-fancybox .friend-list-block .media.active .media-left.pic {
    position: relative;
}
#give-coins-random .friend-list-block .media-left.pic:before, 
.filter-fancybox .friend-list-block .media.active .media-left.pic:before {
    position: absolute;
    display: block;
    font-size: 0.9rem;
    top: -4px;
    left: -5px;
    width: 17px;
    height: 17px;
    line-height: 18px;
    text-align: center;
    border-radius: 30px;
    background: #ca4f6d;
    color: #fff;
    font-family: feather !important;
    content: "\e926";
    z-index: 10;
}

@media (max-width: 375px) {
    .give-coins-random-bar select {
        width: 80px;
    }
    .give-coins-random-bar .btn.btn-reset i {
        display: none;
    }
}



/*================================================================================
    stamp-block
================================================================================*/
.stamp-block {
    width: 80%;
    max-width: 450px;
    height: 80%;
    margin: 40px auto 0 auto;
    text-align: center;
}
.stamp-block .store-pic {
    position: relative;
    display: inline-block;
}
.stamp-block .store-pic img {
    width: 150px;
}
.stamp-block .store-pic .num {
    position: absolute;
    display: inline-block;
    top: 5px;
    right: -5px;
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
    line-height: 28px;
    border-radius: 35px;
    color: #5cb2a1;
    background: #FFF;
    border: #5cb2a1 4px solid;
    text-align: center;
}
.stamp-block .media-heading {
    margin: 20px 0;
}
.icon-stamp {
    max-width: 300px;
    margin: 30px auto;
    padding: 30px 0;
    background: #FFF;
    border: #FFF 5px solid;
    border-radius: 1rem;
}
.icon-stamp .icon {
    display: inline-block;
    margin-bottom: 25px;
}
.icon-stamp img {
    width: 40px;
}
.icon-stamp p {
    font-size: 1.2rem;
    color: #a2a2a2;
}
.icon-stamp img {
    margin-left: 10px;
    transform: rotate(20deg);
}

.icon-b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.icon-b .icon {
    background: #FFF;
    display: inline-block;
    border-radius: 100%;
    padding: 25px;
    width: 150px;
    height: 150px;
}
.icon-b img {
    width: 80px;
}
.icon-b p {
    margin-top: 30px;
    font-size: 1.5rem;
    color: #a2a2a2;
}
/*----------stamp fancybox-------*/
.store-stamp-lock {
    position: relative;
    text-align: center;
}
.store-stamp-lock ul {
    margin: 0;
    padding:0;
}
.store-stamp-lock ul li {
    position: relative;
    float: left;
    width: 33.3%;
    height: 80px;
    text-align: center;
}
.store-stamp-lock ul li:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #FFF;
}
.store-stamp-lock ul li img {
    position: relative;
    z-index: 10;
    width: 70px;
    border-radius: 50%;
    border: #FFF 5px solid;
}
.store-stamp-lock a {
    display: block;
}
.store-stamp-lock img {
    position: relative;
    z-index: 10;
    width: 150px;
    border-radius: 50%;
    border: #FFF 5px solid;
}
.store-stamp-fancybox .title {
    color: #b1b1b1;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 40px;
}
.store-stamp-fancybox .input-group {
    padding-top: 50px;
    clear: both;
}
.store-stamp-fancybox .touchspin-color {
    border: 0;
    background: #fff;
}
.store-stamp-fancybox .bootstrap-touchspin-up, 
.store-stamp-fancybox .bootstrap-touchspin-down {
    background: #f2f2f2;
}

.input-stamp-password {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background: #FFF;
    border: #dadada 1px solid;
    border-radius: 5px;
    outline: 0;
}
.cloak-hide-now.store-stamp-lock img {
    border-color: #5a3ea0;
}
.cloak-hide-mark {
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    white-space: nowrap;
    line-height: 30px;
    padding: 0px 20px 0px 15px;
    color: #FFF;
    background: #5a3ea0;
    border-radius: 2rem;
}
.cloak-hide-mark span {
    font-size: 0.8rem;
    margin-top: -5px;
    display: block;
    color: #bfb4da;
}
.cloak-hide-mark .icon-prop-cloak-w:before {
    background-size: 100%;
    width: 30px;
    height: 30px;
}
.cloak-hide-tip {
    margin-top: 30px;
    color: #adadad;
    background: #f2f2f212;
    border-radius: 2rem;
    padding: 7px 15px;
    text-align: center;
    max-width: 350px;
}
.cloak-hide-tip a {
    color: #FFF;
    text-decoration: underline;
}

/*================================================================================
    invite
================================================================================*/
.content-header-desc {
    font-size: 1.1rem;
    padding: 0 5px;
    margin-top: 10px;
}
.invite-friend-block .share-to-friend-block {
    margin: 0 auto;
    max-width: 600px;
}
.invite-friend-block .social-share-btn {
}

/*================================================================================
    Fancybox
================================================================================*/
/*.fancybox-caption {
    background: transparent; !important;
    padding: 0;
}
.fancybox-is-open .fancybox-bg {
    opacity: 1 !important;
    background: #FFF !important;
}*/



.fancybox-infobar {
    display: none !important;
}

.fancybox-navigation .fancybox-button {
    top: 30%;
}

.fancybox-slide--html {
    padding: 0;
    /*overflow: hidden;*/
}
.fancybox-container {
    z-index: 9998 !important;
}
.datepickers-container {
    z-index: 99999 !important;
}
.fancybox-content {
    overflow: initial;
    max-width: 90%;
    margin: 15px;
}
.w-max-450 {
    width: 90%;
    max-width: 450px;
}
.fancybox-content .media, 
.fancybox-content .polist-media .po-header {
    border-top: 1px solid #f1f1f1;
}

.fancybox-content h4.title {
    margin: 20px 0;
}

.fancybox-content h4.title-header {
    margin: 20px -30px;
    padding: 0 30px 10px 30px;
    border-bottom: #efefef 1px solid;
}

.fancybox-content .btn {
    /*padding: 0.75rem 1rem;*/
}
.fancybox-content .btn-sm {
    margin-top: 5px;
}

.fancybox-slidedown {
    /* Custom styling */
    padding: 10px 30px 30px 30px;
    border-radius: 4px;

    /* Custom transition - fade from top*/
    opacity: 0;
    transform: translateY(-20px);
    transition: all .3s;
}

.fancybox-slide--complete .fancybox-slidedown {
    opacity: 1;
    transform: translateY(0);
}

.fancybox-slideup {
    /* Custom styling */
    padding: 10px 30px 30px 30px;

    /* Custom transition - fade from top*/
    opacity: 0;
    transform: translateY(30px);
    transition: all .3s;
}

.fancybox-slide--complete .fancybox-slideup {
    opacity: 1;
    transform: translateY(0);
}

.fancybox-full-box {
    width: 100%;
    max-width: 100vw !important;
    height: 100%;
    margin: 0 0 0 -4px;
    overflow: auto;
}
@media (min-width:600px) {
    .fancybox-full-box {
        max-width: 600px !important;
        margin: 0;
    }
}
.coupon-card-fancybox {
    margin: 0;
    overflow: auto;
}
.fancybox-slide--html .fancybox-full-box .fancybox-close-small, 
.fancybox-slide--html .coupon-card-fancybox .fancybox-close-small {
    background: none;
    color: #7d7d7d;
    top: 0;
    right: 0;
}
.fancybox-slide--html .coupon-card-fancybox .fancybox-close-small {
    color: #FFF;
}

.fancybox-nopadding-box {
    padding: 0;
    background: transparent;
}

.fancybox-m-box {
    max-width: 350px;
    width: 100%;
}

.fancybox-slide--html .fancybox-close-small {
    background: #fa657b;
    color: #FFF;
    top: -15px;
    right: -15px;
    border-radius: 30px;
    opacity: 1;
}

/*======= Styles for animated modal ========*/

/* Start state */
.animated-modal {
    border-radius: 4px;
    /*overflow: hidden;*/
    transform: translateY(-50px);
    transition: all .7s;
}
@media (min-width:600px) {
    .animated-modal {
        max-width: 500px;
    }
}

.animated-modal h2,
.animated-modal p {
    transform: translateY(-50px);
    opacity: 0;

    transition-property: transform, opacity;
    transition-duration: .4s;
}

/* Final state */
.fancybox-slide--current .animated-modal,
.fancybox-slide--current .animated-modal h2,
.fancybox-slide--current .animated-modal p {
    transform: translateY(0);
    opacity: 1;
}

/* Reveal content with different delays */
.fancybox-slide--current .animated-modal h2 {
    transition-delay: .1s;
}

.fancybox-slide--current .animated-modal p {
    transition-delay: .3s;
}

/*

Advanced example - Confirm dialog

*/


.fc-container .fancybox-bg {
  background: #eee;
}

.fancybox-is-open.fc-container .fancybox-bg {
  opacity: 0.95;
}

.fc-content {
  margin: 20px;
  max-width: 550px;
  padding: 50px;
  box-shadow: 10px 10px 60px -25px;
  border-radius: 4px;
}

.fc-content h3 {
  margin-top: 0;
  font-size: 1.6em;
  letter-spacing: normal;
}

.fc-content p {
  color: #666;
  line-height: 1.5;
}

.fc-content p:last-child {
  margin-bottom: 0;
}

/* Custom animation */
.fancybox-fx-material.fancybox-slide--previous,
.fancybox-fx-material.fancybox-slide--next {
  transform: translateY(-60px) scale(1.1);
  opacity: 0;
}

.fancybox-fx-material.fancybox-slide--current {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*================================================================================
    upgrade-card
================================================================================*/
.upgrade-card {
    width: 100%;
    max-width: 350px;
}
.upgrade-card .card-header .card-title {
    color: #FFF;
    background: #000;
    padding: 7px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
}
.upgrade-card .upgrade-price {
    
}
.upgrade-card .btn {
    padding: 7px 20px;
    margin-top: 15px;
}
.intro-desc {
    margin: 10px auto;
    font-size: 0.8rem;
    color: #7d7d7d;
}
.intro-desc ul {
    padding: 0;
}
.intro-desc li {
    list-style: circle inside;
}
.big-icon {
    display: inline-block;
    background: #ffffff;
    width: 150px;
    height: 150px;
    margin: 10px auto;
    padding: 30px;
    font-size: 50px;
    border-radius: 100%;
    color: #CCC;
}
.big-icon img {
    width: 100%;
}
.small-icon {
    width: 120px;
    height: 120px;
    line-height: 90px;
    color: #989898;
}
.small-icon .txt {
    font-size: 0.8rem;
    display: block;
    line-height: 1px;
}
.report-mess-block {
    text-align: center;
    padding: 0 15px;
}
.big-icon-box {
    margin-top: 50px;
}
.big-icon-box .coin-big {
    position: relative;
}
.big-icon-box .notice-pic {
    border-radius: 40px;
    background: #FFF;
    position: absolute;
    right: 0;
    top: 0;
}
.big-icon-box .notice-pic img {
    width: 40px !important;
}
.opacity-70 {
    opacity: 0.7;
}
.report-mess-block h4 {
    margin-top: 20px;
    line-height: 1.8rem;
}
.report-mess-block .form-actions .btn {
    display: block;
    margin-top: 10px;
}
.report-mess-block .tip {
    color: #d4646b;
}

/*================================================================================
    confirm-card
================================================================================*/
.confirm-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}
.confirm-card h4.title {
    font-size: 1.5rem;
}
.confirm-card p {
    font-size: 1rem;
    line-height: 1.6rem;
}

/*================================================================================
    login
================================================================================*/
.bg-login {
    background: #da5171; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #da5171 0%, #ef7d25 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #da5171 0%,#ef7d25 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #da5171 0%,#ef7d25 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da5171', endColorstr='#ef7d25',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*================================================================================
    Step list
================================================================================*/
.step-list {
    display: table;
    width: 100%;
    padding: 0;
    margin: 0;
}
.step-list li {
    display: table-cell;
    width: 33.33%;
    vertical-align: top;
    text-align: center;
    position: relative;
    color: #999999;
}
.step-list li a {
    position: relative;
    padding-top: 45px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    color: #c3c3c3;
    cursor: default;
}
.step-list li:before, .step-list li:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 9;
    top: 38px;
    width: 50%;
    height: 5px;
    background-color: #d8d8d8;
}
.step-list li:before {
    left: 0;
}
.step-list li:after {
    right: 0;
}
.step-list li:first-child:before {
    display: none;
}
.step-list li:last-child:after {
    display: none;
}
.step-list li.current a, .step-list li.visited a {
    color: #75c7cb;
}
.step-list li.current:before {
    background-color: #75c7cb;
}
.step-list li.visited:before, .step-list li.visited:after {
    background-color: #75c7cb;
}
.step-list li span.num {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -20px;
    z-index: 10;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 30px;
    border: 5px solid #d8d8d8;
    background: #FFF;
    font-size: 1.3rem;
    border-radius: 50%;
}
.step-list li.current span.num, .step-list li.visited span.num {
    border-color: #75c7cb;
}
.step-list li span.txt {
    font-size: 0.9rem;
}
.btn-send-code {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
}
.icon-success img {
    margin-top: 10px;
}

/*================================================================================
    chat
================================================================================*/
/*.chat-application .chat-app-window {
        padding-top: 25px;
}*/
.chat-application .sidebar-left {
    z-index: 9999 !important;
}
@media (min-width: 768px) {
    .chat-app-window.not-friend {
        padding-top: 210px;
    }
}
@media (max-width: 768px) {
    .chat-app-window.not-friend {
        margin: 0 -7px;
    }
}
.chat-app-window .quick_btn {
    position: fixed;
    top: 70px;
    z-index: 999;
}
@media (min-width: 992px) {
    .fixed_bottom_menu {
        display: none;
    }
    .chat-app-window.not-friend {
        padding-top: 160px;
    }
    .chat-app-window .quick_btn {
        position: fixed;
        top: 90px;
        z-index: 999;
        padding-left: 315px;
    }
}

/*================================================================================
    nologin-coins
================================================================================*/
@media (max-width: 767.98px) {
    .header-navbar .navbar-header .navbar-brand {
        padding: 15px 0;
    }
}
.header-navbar .navbar-header .navbar-brand .brand-logo {
    width: auto;
    height: 33px;
}
.header-navbar .navbar-header .navbar-brand .brand-text {
    display: none;
}
.header-navbar .navbar-nav.float-right {
    align-items: center;
}
.header-navbar .navbar-container ul.nav.navbar-nav.float-right li a.dropdown-user-link {
    padding-top: 0;
    padding-bottom: 0;
}
.nologin-coins-list .card {
    margin-bottom: 10px;
}
.nologin-coins-list .media {
    align-items: center;
}
.nologin-coins-list .media .media-body span {
    
}
.text-success-get img {
    width: 60px;
    background: #FFF;
    border-radius: 100%;
    padding: 10px;
}
.text-success-get h3 {
    display: inline-block; 
    /*color: #da5071;*/
}
.get-coin-content-txt {
    text-align: center;
}
.get-coin-content-txt .get-coin-area {
    margin: 30px 0;
}
.get-coin-content-txt p {
    color: #787878;
}
.get-coin-content-txt p span {
    color: #E73828;
    font-size: 1.4rem;
}
.get-coin-content-txt .other-give-btn {
    width: fit-content;
    margin: 30px auto;
}
.nav-nologin-coins {
    position: relative;
}
/* .nav-nologin-coins .badge-up {
    top: -7px;
} */
.nav-nologin-coins .txt {
    display: none;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 70px;
    width: 200px;
    line-height: 1.5rem;
    background: #FFF;
    padding: 10px;
    border-radius: 0.35rem;
    border: 1px solid #E4E5EC;
    box-shadow: 0px 5px 75px 2px rgba(64, 70, 74, 0.2) !important;
}
.nav-nologin-coins:hover .txt {
    display: block;
}
.nav-nologin-coins .txt:after {
    position: absolute;
    display: block;
    content: " ";
    border-color: transparent transparent #fff;
    border-style: solid;
    border-width: 0 10px 10px;
    height: 0;
    top: -10px;
    right: 10px;
    width: 0;
    z-index: 12;
    box-shadow: 0px 5px 75px 2px rgba(64, 70, 74, 0.2);
}
@media (max-width: 768px) {
    .nav-nologin-coins {
        padding-top: 0.7rem !important;
        margin-left: 5px;
    }
    .nav-nologin-coins .badge-up {
        position: absolute;
        top: 0;
        right: -10px;
    }
    .nav-nologin-coins .txt {
        right: -5px;
        top: 55px;
    }
}

.mark-label-school {
}
.mark-label-arrow {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    position: relative;
    top: -3px;
    margin: 0 16px 8px 25px;
    padding: 0 10px 0 12px !important;
    background: #FF9800;    
    -webkit-border-bottom-right-radius: 3px;    
    border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;    
    border-top-right-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    color: #fff;
    font-size: 12px;
    font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-weight: bold;
}
.mark-label-arrow:before {
    content: "";
    position: absolute;
    top:0;
    left: -12px;
    width: 0;
    height: 0;
    border-color: transparent #FF9800 transparent transparent;
    border-style: solid;
    border-width: 12px 12px 12px 0;        
}
.mark-label-arrow2 {
    position: relative;
    top: -2px;
    border: #1c85a9 1px solid;
    border-radius: 30px;
    padding: 1px 6px 1px 16px !important;
    font-size: 0.8rem;
    margin-left: 20px;
    background: #cef6fa;
    color: #1c85a9;
}
.mark-label-arrow2:before {
    display: block;
    content: " ";
    position: absolute;
    top: -4px;
    left: -8px;
    width: 24px;
    height: 24px;
    background-image: url(https://cdn-icons-png.flaticon.com/512/11495/11495212.png);
    background-size: 100%;
}

/*================================================================================
    lottery-detail-block
================================================================================*/
.lottery-detail-block {
    border-radius: 15px;
    overflow: hidden;
}
.lottery-detail-block .card-header h4.card-title {
    font-size: 1.3rem;
}
.pic-slide img {
    width: 100%;
}
.lottery-detail-info {
    width: 100%;
    padding: 25px;
}
.lottery-detail-info dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.lottery-detail-info dt {
    display: flex;
    align-items: center;
}
.lottery-detail-info dt img {
    width: 20px;
}
.lottery-detail-info dt i {
    font-size: 1.5rem;
}
.lottery-detail-info dt i, .lottery-detail-info dt img {
    margin-right: 10px;
}
.lottery-detail-info dd {
    margin-bottom: 0;
    flex: 1;
}
.lottery-detail-info dl.lottery-item-need dd {
    /*flex: 100%;*/
}
.lottery-kol-list-block {
    background: #fbf4f4;
    border-radius: 15px;
    padding: 15px 0;
    width: 100%;
}
.lottery-kol-list-block-inner {
    overflow-y: auto;
    border: 0 !important;
    height: 230px;
    padding-top: 15px;
}
.lottery-kol-list-block-inner.ps-container {
    padding: 15px 0 0 0;
    touch-action: inherit !important;
}
.lottery-kol-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 10px;
}
.lottery-kol-list .media {
    position: relative;
    width: 31.33%;
    align-items: center;
    background: #FFF;
    border-radius: 10px;
    margin: 1%;
    border: 0;
    padding: 0;
}
.lottery-kol-list .media > a {
    display: flex;
    align-items: center;
    padding: 5px;
    width: 100%;
}
.lottery-kol-list .media .w-coins-pic {
    width: 50px;
    height: 50px;
}
.lottery-kol-list .media .media-heading {
    font-size: 1.1rem;
    font-weight: normal;
    white-space: nowrap;
    margin-bottom: 0;
}
.lottery-kol-list .media .btn-get-award {
    padding: 5px 10px;
    margin-top: 3px;
}
.lottery-kol-list .media.active {
    border: #28d094 2px solid;
}
.badge-award {
    display: block;
    content: " ";
    position: absolute;
    top: -19px;
    left: -8px;
    width: 30px;
    height: 34px;
    background: url('https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_lottery_award.svg') no-repeat;
    background-size: 100%;
    transform: rotate(-15deg);
}
.badge-award span.txt {
    position: absolute;
    bottom: -3px;
    width: fit-content;
    text-align: center;
    padding: 3px;
    font-size: 1rem;
    font-weight: bold;
}
@media(max-width: 600px) {
    .lottery-kol-list .media {
        width: 48%;
    }
    .lottery-frinde-invite .media {
        width: 98%;
    }

}
@media(max-width: 370px) {
    .tabs-category .mr-1 {
        margin-right: 0.3rem!important;
    }
    .lottery-kol-list .media {
        width: 98%;
    }
}
/*----- lottery-num-block ----*/
.lottery-num-block {
    margin: 15px 0;
}
.lottery-kol-list .media .media-left {
    height: 100%;
    padding-right: 10px;
}
.lottery-kol-list .media .icon-message.icon-bg-peach {
    width: 50px;
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
}

/*------ lottery-frinde-invite -------*/
.lottery-kol-list .media .username {
    margin: 5px 10px;
    display: flex;
    white-space: nowrap;
    align-items: center;
}
.lottery-kol-list .media .username .author {
    margin: 0 3px;
    display: flex;
    align-items: center;
}
.lottery-kol-list .media .username .author .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-all;
}
.lottery-kol-list .media .username .pic {
    margin-right: 3px;
}
.lottery-kol-list .media .username .pic img {
    width: 25px;
}
.lottery-frinde-invite .media .media-body {
    padding: 5px 0 10px 0;
}
.lottery-frinde-invite .media .media-heading {
    display: flex;
    align-items: center;
    background: #f9e8e8;
    border-radius: 30px;
    margin: 0 10px;
    text-align: center;
}
.lottery-frinde-invite .media .icon-message.icon-bg-peach {
    height: 24px;
}
.lottery-frinde-invite .media.media-onlynum .icon-message.icon-bg-peach {
    height: 100%;
}
.lottery-frinde-invite .media.media-onlynum .media-heading {
    background-color: #FFF;
    margin: 0;
}
.lottery-frinde-invite .media .media-heading span {
    padding: 0 5px;
    white-space: nowrap;
}
.lottery-frinde-invite .media .media-body .btn {
    padding: 3px 5px;
    margin-left: 3px;
    margin-left: auto;
}
@media (max-width:415px) {
    .lottery-frinde-invite .media .icon-message.icon-bg-peach {
        width: 36px;
    }
    .lottery-frinde-invite .media .media-heading span {
        font-size: 0.9rem;
    }
}

#select-kol-list {
    padding-top: 105px !important;
}

/*------- lottery-list-block --------*/
.lottery-list-block .card {
    border-radius: 15px;
    overflow: hidden;
}
.lottery-list-block .card .card-header {
    padding: 15px;
}
.lottery-list-block .card .card-header .card-title {
    position: relative;
    display: flex;
    padding: 5px 0;
    padding-right: 85px;
}
.lottery-list-block .card .card-header .card-title .text-secondary {
    color: #bb8e8e !important;
    margin-bottom: 5px;
}
.lottery-list-block .card .card-header .pic {
    margin-right: 15px;
}
.lottery-list-block .card .card-header .pic {
    width: 100px;
}
.lottery-list-block .card .card-header p {
    margin-bottom: 0;
    margin-right: 20px;
}
.lottery-list-block .card .card-header .icon {
    margin-left: 5px;
}
.lottery-list-block .card .card-header .num {
    margin-top: 10px;
}
.lottery-list-block .card .card-header .heading-elements {
    top: 13px;
    right: 15px;
}
.lottery-list-block .card .card-header .heading-elements .txt {
    margin-top: 5px;
}
.lottery-list-block .card .card-content {
    display: flex;
    justify-content: space-between;
    border-top: #efefef 1px solid;
    padding: 15px;
}
.lottery-list-block .card .card-content .date span {
    display: block;
}
@media(max-width: 600px) {
    .lottery-list-block .card .card-header .heading-elements a.btn {
        display: block;
        margin-bottom: 5px;
    }
}
.lottery-num-bar {
    display: flex;
    margin: 0 15px;
}
.lottery-num-bar p {
    margin-bottom: 0;
}
.lottery-num-bar p:first-child {
    flex: 1;
}
.user-profile-block .lottery-list-block .card {
    border-radius: 0;
    border-bottom: #f1f2f7 2px solid;
    margin-bottom: 0;
}
#lottery-user-award-list-fancybox h4.title-header, 
.user-list-content-fancybox h4.title-header {
    border-bottom: 0;
}
.user-list-content-fancybox h4.title-header .txt {
    font-size: 0.9rem;
    color: #9d9d9d;
    margin-left: 10px;
}
.award-user-list-fancybox-block .media:first-child {
    border-top: 0 !important;
}
.award-user-list-fancybox-block .media + .media {
    border-top: #f2f2f2 1px solid;
}
.award-user-list-fancybox-block .media {
    flex-wrap: wrap;
    border-top: #f2f2f2 1px solid;
    padding: 10px 0;
}
.award-user-list-fancybox-block .media .media-body .icon .txt {
    display: block;
    font-size: 0.9rem;
}
.award-user-list-fancybox-block .media .media-body .icon .txt .btn {
    padding: 3px;
    position: relative;
    font-size: 0.8rem;
    display: block;
    width: fit-content;
}
.award-user-list-fancybox-block .media .media-right {
    position: relative;
    display: flex;
    align-items: center;
    align-self: flex-start;
    padding-top: 5px;
}
.award-user-list-fancybox-block .media .media-right a {
    margin-top: 0;
    margin-left: 10px;
}
.deliver-info-content-block {
    position: relative;
    width: 100%;
}
.deliver-info-content-block .btn-accordion {
    position: absolute;
    top: -20px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    text-align: center;
    background: #f2f2f2;
    color: #a9a9a9;
}
.deliver-info-content-block .btn-accordion.active {
    line-height: 0;
}
.deliver-info-content-block .btn-accordion i {
    display: inline-block;
}
.deliver-info-content {
    display: none;
    width: 100%;
    padding: 10px;
    background: #f2f2f2;
    margin-top: 10px;
}
.deliver-info-content.on {
    display: table;
}
.deliver-info-content dl {
    display: table-row;
    margin-bottom: 0;
}
.deliver-info-content dt {
    padding-right: 15px;
    display: table-cell;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .award-user-list-fancybox-block .media {
        padding: 10px 0 !important;
    }
    .award-user-list-fancybox-block .media .media-body .icon .txt .btn {
        display: inline-block;
        margin-left: 10px;
        top: -3px;
    }
}
/*------ lottery_notice_fancybox --------*/
.lottery-notice-fancybox {
    max-width: 700px;
    padding: 0;
    background: transparent;
}
.lottery-notice-fancybox .pic-slide {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    overflow: hidden;
}
.lottery-notice-fancybox .desc {
    white-space: pre-line;
    padding: 25px;
    background: #FFF;
    border-bottom-right-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

/*------ message-box-empty --------*/
.message-box-empty {
    width: 100%;
    padding: 50px 0;
    text-align: center;
}
.message-box-empty a {
    text-decoration: underline;
}
.message-box-empty a.btn, .message-box-empty a.tip {
    text-decoration: none;
}
a.tip-qu i {
    position: relative;
    font-size: 1.8rem;
    top: 5px;
    color: #d4646b;
}
.message-box-empty img {
    width: 80px;
}
.message-box-empty.box-empty-circle span {
    display: inline-block;
    background: #FFF;
    border-radius: 100%;
    padding: 20px;
}
.message-box-empty.box-empty-circle img {
    width: 70px;
}
.message-box-empty.box-empty-circle.bg-gray span {
    background: #f7f7f7;
}
.message-box-empty.box-empty-circle.txt-gray p {
    color: #afadad;
}
.message-box-empty.box-empty-circle.pic-s img {
    width: 50px;
}
.message-box-empty.box-empty-circle span.icon:after {
    content: " ";
    width: 50px;
    height: 50px;
    display: block;
}
.message-box-empty.box-empty-circle span.icon-no-data:after {
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_data_empty.png) no-repeat center center;
    background-size: 100%;
}
.message-box-empty.box-empty-circle span.icon-no-pic:after {
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_image_gallery.png) no-repeat center center;
    background-size: 100%;
}
.message-box-empty.box-empty-circle span.icon-no-coin:after {
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_wallet_empty.png) no-repeat center center;
    background-size: 100%;
}

.mybag_block_inner .message-box-empty {
    padding: 60px 0 10px 0;
    margin: 0;
}

/*--------- list-style ----------*/
.list-style ul {
  padding-left: 20px;
}
.list-style ul li {
  list-style: decimal;
}
.list-style ul li span {
  color: #af4900;
}
.list-style ul li span.txt-red-s, .txt-red-s {
  color: #de0505;
  font-size: 1rem;
}
.list-style ul li li {
  list-style: disc;
}

/*================================================================================
    shop-banner
================================================================================*/
.search-bar-block {
    margin: 10px;
    padding-right: 47px;
    border-bottom: 3px solid #eeeff6;
}
.search-bar-block .search-bar {
    border-bottom: 0;
    border-right: 3px solid #eeeff6;
}
.search-bar-block .search-bar .btn {
    padding: 1rem;
}
.search-bar-block .btn-add-cart {
    position: absolute;
    right: 0;
    top: 0;
    width: 47px;
    height: 100%;
}
.search-bar-block .btn-add-cart a {
    display: block;
    height: 100%;
    padding: 11px 9px;
}
.btn-add-cart i.la {
    font-size: 2rem;
}
.btn-add-cart .badge-danger.badge-glow {
    top: 9px;
    right: 8px;
    font-size: 8px;
    line-height: 9px;
    width: 15px;
    height: 15px;
    box-shadow: none;
}
.content-header {
    position: relative;
}
.content-header .btn-add-cart {
    position: absolute;
    right: 5px;
    top: -12px;
}
.content-header .btn-add-cart a {
    display: block;
    background: #FFF;
    border-radius: 7px;
    padding: 5px;
    box-shadow: 0px 1px 15px 1px rgb(62 57 107 / 7%);
}
.content-header .btn-add-cart .badge-danger.badge-glow {
    top: 4px;
    right: 4px;
}
.shop-banner {
    margin: 0 -7px;
}
.shop-banner img {
    /*width: 100%;*/
}

/*emoji-block*/
.hot-emoji-block {
    margin: 20px 10px 20px 10px;
}
.home-emoji-block .media-list .media {
    display: none;
}
.home-emoji-block .media-list .media.show {
    display: flex;
}
.btn-loadmore {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: #c2c2c2;
    border-top: 1px solid #efefef;
    padding: 10px;
}
.btn-loadmore i.la {
    font-size: 0.8rem;
}
/*emoji-detail*/
.title-border {
    color: #a9a9a9;
    font-size: 1.1rem;
    margin: 20px 0;
    text-align: center;
    background: #FFF;
    border-top: #FFF 1px solid;
    border-bottom: #FFF 1px solid;
}
.title-border span {
    margin: 10px 0;
    display: inline-block;
}
.title-border .nav.nav-tabs2 .nav-item {
    background: #ffffff;
}
.title-border2 {
    color: #a9a9a9;
    text-align: center;
    font-size: 1.1rem;
    background: #FFF;
    border-bottom: #FFF 1px solid;
    padding: 10px 0;
}
.shop-detail-block {
    background: transparent;
    box-shadow:none;
}
.shop-detail-block .detail-left {
    float: left;
    width: 40%;
}
.shop-detail-block .detail-left .pic {
    padding-right: 30px;
    position: relative;
}
.shop-detail-block .detail-left .pic .type-coins {
    top: -10px;
    left: -15px;
    width: 45px;
    height: 45px;
    border-color: #f4f5fa;
}
.shop-detail-block .detail-left .pic img {
    width: 100%;
}
.shop-detail-block .detail-right {
    float: right;
    width: 60%;
}
.shop-detail-block .detail-right .media-heading {
    font-size: 1.5rem;
    margin-bottom: 15px;
}
.shop-detail-block .detail-right .desc {
    color: #a2a2a2;
}
.shop-detail-block .detail-right .badge {
    margin-bottom: 10px;
    margin-right: 5px;
}
.shop-detail-block .detail-right.detail-cart-block {
    width: 100%;
    margin: 40px 0 20px 0;
}
.shop-detail-block .detail-right .bootstrap-touchspin {
    margin-bottom: 20px;
}
.shop-detail-block .detail-right .bootstrap-touchspin .btn, 
.touchspin-gray .bootstrap-touchspin .btn {
    color: #969696;
    background: #f2f2f2;
    border: #e4e4e4 1px solid;
}
.detail-btn {
    position: relative;
    padding-right:70px; 
}
.detail-btn div {
    padding-right: 0;
}
.detail-btn .btn-favor .btn {
    display: block;
    position: absolute;
    top: 0;
    right: 15px;
    width: 40px;
    height: 40px;
}
.detail-btn .btn-favor .btn:after {
    font: normal normal normal 16px/1 LineAwesome;
    content: "\f234";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.4rem;
    transform: translateX(-50%) translateY(-50%);
}
.detail-btn .btn-favor:hover .btn, .detail-btn .btn-favor.active .btn {
    color: #d4646b;
    border-color: #d4646b;
    background: transparent; 
}
.detail-btn .btn-favor:hover .btn:after, .detail-btn .btn-favor.active .btn:after {
    content: "\f233";
}
.detail-desc {
    float: left;
    width: 100%;
}
.detail-desc-edit {
    padding: 20px; 
}
.detail-desc-edit img {
    max-width: 100%;
    height: auto;
}
.emoji-detail-list-block {
    margin: -10px;
}
.emoji-detail {
    display: flex;
    flex-wrap: wrap;
}
.emoji-detail-list {
    width: 33.33%;
    padding: 10px;
    transition: 0.3s;
}
.emoji-detail-list:hover {
    transform: scale(1.05);
}
.emoji-detail-list img {
    width: 100%;
}
.related-list h5 {
    margin-top: 10px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4rem;
    color: #666;
}
.related-list .emoji-detail-list {
    position: relative;
    padding: 20px;
    width: 100%;
}
.related-list .emoji-detail-list .type-coins {
    top: 10px;
    left: 5px;
}

.news_detail_block .emoji-exchange-detail .card {
    background: #FFF;
}
.news_detail_block .emoji-exchange-detail .social-share-btn ul {
    background-color: #FFF;
}


/**/
.product-list-block {
    margin: 0 5px;
}
.product-list-block .product-list {
    padding-left: 5px;
    padding-right: 5px;
}
.product-list-block .card-body {
    position: relative;
    padding: 10px;
    text-align: center;
}
.product-list-block .card .card-title {
    margin-bottom: 5px;
    font-size: 1rem;
}
.product-list-block .card-body .reach-mark {
    position: absolute;
    top: -70px;
    right: 10px;
}
.product-list-block .card-body .reach-mark img {
    width: 100px;
}
.product-list-block .card.sold-out .card-img-top, 
.product-list-block .card.sold-out .card-title, 
.product-list-block .card.sold-out .icon {
    opacity: 0.7;
}
.product-list-block .card-body .badge {
    position: absolute;
    top: -29px;
    left: 9px;
}
.product-list-block .wm-coins, 
.womoshop-coins .wm-coins {
    font-size: 1.5rem;
}
.womoshop-product .slick-list {
    overflow: initial;
}
.womoshop-product .card-header {
    padding: 10px;
    margin-bottom: 10px;
}
/*-------womoshop-coins---------*/
.womoshop-coins .hot-wish-coins-block {
    margin-bottom: 20px;
}
.womoshop-coins .hot-wish-coins-block .card-header {
    padding: 0;
    margin-top: 20px;
}
.womoshop-coins .media-list {
    padding: 10px;
}
.womoshop-coins .media-list .media {
    border: 0;
    padding: 1rem 0 1rem 1rem;
}
.womoshop-coins .store_pic img {
    width: 60px;
    border: #eaeaea 1px solid;
}
.product-list-block .wm-coins img, 
.womoshop-coins .wm-coins img {
    width: 20px !important;
    display: inline-block !important;
}
.type-coins {
    position: absolute;
    top: -10px;
    left: -10px;
    overflow: hidden;
    width: 30px;
    height: 30px;
    background: #FFF;
    padding: 0;
    text-align: center;
    border: #FFF 3px solid;
    border-radius: 100%;
    box-sizing: border-box;
}
.type-coins img {
    width: 25px;
}
.womoshop-coins-subcontent {
    margin: 0 10px;
    background: #FFF;
}

/*cart*/
.cart-list-block {
    
}
.cart-list-block .cart-table {
    display: table;
    width: 100%;
}
.cart-row-th {
    text-align: center;
}
.cart-list-block .cart-table .cart-row {
    display: table-row;
    background: #FFF;
    margin-bottom: 5px;
    padding: 15px;
    flex-wrap: wrap;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}
.cart-list-block .cart-table .cart-row > div {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 20px;
}
.cart-list-block .cart-table .cart-row.cart-row-th > div {
    color: #666;
    font-size: 1rem;
}
.cart-list-block .cart-table .cart-row .pic {
    position: relative;
    width: 120px;
}
.cart-list-block .cart-table .cart-row .pic .type-coins {
    top: -5px;
    left: 10px;
}
.cart-list-block .cart-table .cart-row .quantity {
    width: 150px;
    color: #a9a9a9;
    font-size: 1.3rem;
}
.cart-list-block .cart-table .cart-row .quantity .sold-error {
    color: #e31212;
    font-size: 1.1rem;
}
.cart-list-block .cart-table .cart-row .quantity .bootstrap-touchspin {
    margin-bottom: 0;
}
.cart-list-block .cart-table .cart-row .quantity .bootstrap-touchspin .btn {
    color: #969696;
    background: #f2f2f2;
    border: #e4e4e4 1px solid;
}
.cart-list-block .cart-table .cart-row .delete {
    text-align: right;
}
.cart-list-block .cart-table .cart-row .delete a {
    margin-left: 5px;
}
.cart-list-block .cart-table .cart-row .delete a i {
    color: #bbb;
    font-size: 1.2rem;
    width: 25px;
    height: 25px;
    line-height: 23px;
    text-align: center;
    border: #bbb 1px solid;
    border-radius: 100%;
}
.cart-discount {
    border-top: #e4e4e4 1px solid;
    border-bottom: #e4e4e4 1px solid;
    padding: 1.5rem;
    margin: 1.5rem -1.5rem;
}
.cart-total {
    
}
.cart-price {
    display: table;
    width: 100%;
}
.cart-price dl {
    display: table-row;
}
.cart-price dt, .cart-price dd {
    display: table-cell;
    padding-bottom: 10px;
}
.cart-price dd {
    text-align: right;
}
.price-total {
    color: #d4646b;
}
.btn-open {
    margin-top: 3px;
    transition: 0.3s;
    transform: rotate(0deg);
}
.collapsed .btn-open {
    transform: rotate(180deg);
}

/*-----order----------*/
.order-list-block .cart-table .cart-row {
    
}

/*------cart-------*/
.content-body.content-right {
    position: relative;
    z-index: 10;
}
.right-block {
    position: relative;
}
.right-block .right-content-block {
    margin-top: 10px;
}
/*--------table--------*/
.table-box {
    display: table;
}
.table-row {
    display: table-row;
}
.table-box .table-row > div {
    display: table-cell;
    padding: 5px;
}
.table-box .table-row .table-td {
    padding-left: 15px;
}
.table-box .table-row .table-td {
    color: #a2a2a2;
}

/*-------- list-box --------*/
.list-box-row {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
}
.list-row-3 .list-box {
    width: 33.33%;
}
.list-box {
    padding: 5px;
}
.list-box img {
    width: 100%;
}
.list-box .txt {
    padding: 5px;
}
.list-box .txt h5 {
    font-size: 1rem;
    line-height: 1.4rem;
    font-weight: normal;
}
@media (max-width: 768px) {
    .youtube-list-block .list-box {
        width: 50%;
    }
}
/*----------myegg-list-box-------------*/
.egg-desc-box {
    max-width: 450px;
    margin: 0 15px;
}
.egg-desc-box .egg-card {
    overflow: hidden;
}
.egg-desc-box .btn-go .float-right {
    margin-top: 8px;
    color: #cecece;
}
.myegg-list-box .media:first-child {
    background: linear-gradient(135deg, #E6F9FF 0%,#C9F0FF 100%);
}
.myegg-list-box .media:first-child .icon {
    color: #3f96b5;
    box-shadow: 1px 1px 2px 2px rgb(188, 227, 241) inset;
}
.myegg-list-box .media:nth-child(2) {
    background: linear-gradient(135deg, #FFE6E9 0%,#FFC9CF 100%);
}
.myegg-list-box .media:nth-child(2) .icon {
    box-shadow: 1px 1px 2px 2px rgb(199, 175, 178) inset;
}
.myegg-list-box .btn-go a {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    border-top: 1px solid #f1f1f1;
    background: linear-gradient(135deg, #f1f1f1 0%,#d2d2d2 100%);
}
.myegg-list-box .media .pic img {
    width: 80px;
}
.myegg-list-box .media .tip {
    display: inline-block;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 100%;
    margin-left: 5px;
}
.myegg-list-box .media .btn {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
}
.myegg-list-box .media .icon {
    font-size: 1.3rem;
    padding: 1px 10px;
    background: #FFF;
    margin-left: 10px;
    border-radius: 30px;
}
.myegg-list-box .media .txt-tip {
    color: #9c6060;
    margin-top: 5px;
}
.myegg-list-box-2 .media {
    border-radius: 0.7rem;
    margin-bottom: 1.3rem;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}
#give-egg-friend-block {
    padding-top:  105px !important;
}

/*----------egg gift-------------*/
#egg-gift-box, .egg-gift-get-box {
    width: 90%;
    max-width: 407px;
    height: 484px;
}
.btn-egg-gift {
    display: block;
    position: fixed;
    z-index: 999;
    right: -5px;
    bottom: 22%;
    width: 56px;
    height: 69px;
    background: url(../images/egg_gift_s_fixed.png) no-repeat;
    text-align: center;
    animation-name:egg_anim_r;
    animation-duration:3s;
    animation-iteration-count:infinite;
    animation-timing-function:step-start;
}
@keyframes egg_anim_r{
    0%{
        
        transform: rotate(-15deg);
    }
    7%{
        transform: rotate(-25deg);
    }
    10%{
        
        transform: rotate(-19deg);
    }
    12%{
        transform: rotate(-23deg);
    }
    15%{
        
        transform: rotate(-15deg);
    }
    100%{
        
        transform: rotate(-15deg);
    }
}
.btn-egg-gift:hover {
    animation-play-state: paused;
}
.btn-egg-gift span {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    width: 50px;
    font-size: 12px;
    transition: 0.3s;
    transform: translateY(-30px);
}
.btn-egg-gift:hover span {
    visibility: visible;
    opacity: 1;
    transform: translateY(-35px);
}
.egg-card {
    border-radius: 0.7rem;
}
.egg-card .card-img-top {
    position: relative;
    overflow: hidden;
    background-color: #FFC9CF;
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
}
.egg-card .card-img-top span {
    display: block;
    content: " ";
    position: absolute;
    top: -70px;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    height: 600px;
    background: url(../images/bg_egg_gift_bling.png) center center;
}
.rotate-out {
    background-size: cover;
    animation-name:bling_rotate;
    animation-duration:2s;
}
@keyframes bling_rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(180deg);
    }
}
.egg-card .card-img-top span.ribbons {
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/award_ribbons_bg.png) center center;
    background-size: 100%;
}
.egg-card .card-profile-image {
    top: 70px;
    text-align: center;
}
.egg-card .card-profile-image a#btn-egg-hammer {
    display: inline-block;
    position: relative;
    cursor: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/egg_hammer.cur),pointer;
}
.egg-card .card-profile-image  a#btn-egg-hammer span.tip {
    position: absolute;
    z-index: 10;
    display: block;
    text-align: center;
    line-height: 32px;
    top: 15px;
    left: 0;
    width: 37px;
    height: 32px;
    font-size: 11px;
    color: #8B572A;
    background: url(../images/egg_dialog_bg.png);
    transition: 0.3s;
    animation-name:egg_dialog;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes egg_dialog{
    0%{
        
        transform: rotate(-15deg);
    }
    7%{
        transform: rotate(-25deg);
    }
    10%{
        
        transform: rotate(-19deg);
    }
    12%{
        transform: rotate(-23deg);
    }
    15%{
        
        transform: rotate(-15deg);
    }
    100%{
        
        transform: rotate(-15deg);
    }
}
.egg_lg {
    position: relative;
    display: block;
    width: 150px;
    height: 204px;
}
.egg_lg:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    width: 150px;
    height: 204px;
    z-index: 10;
    background: url(../images/egg_gift@2x.png) no-repeat bottom;
    background-size: 100%;
    transition: 0.3s;
}
.egg-card .card-profile-image a:hover#btn-egg-hammer span {
    top: 5px;
}
.egg-card a:hover#btn-egg-hammer .egg_lg:before {
    top:-10px;
}
.egg-card .egg-knock-all {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -10px;
    right: -10px;
    color: #8B572A;
    font-size: 1.3rem;
    transition: 0.3s;
}
.egg-card .egg-knock-all.on {
    visibility: visible;
    opacity: 1;
    top: -30px;
    transform: translateX(-50%;);
}
.egg-card .egg-hammer {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 30px;
    right: -40px;
    transform: rotate(20deg);
    width: 54px;
    height: 50px;
    background: url(../images/egg_hammer.png);
    z-index: 100;
    transition: 0.3s;
}
.egg-card .egg-hammer.on {
    visibility: visible;
    opacity: 1;
    top: 60px;
    right: -20px;
    transform: rotate(0deg);
}
.egg-card .hammer-total {
    position: absolute;
    z-index: 30;
    top: 20px;
    right: 20px;
    font-size: 0.8rem;
    color: #9c5555;
    padding: 0 8px 0 30px;
    background: #ffe2e5 url(../images/egg_hammer.png) no-repeat 8px center;
    background-size: 20px;
    border: #bf7749 2px solid;
    border-radius: 100px;
    transition: 0.3s;
    box-shadow: 1px 1px 3px 1px rgb(252, 201, 207) inset;
}
.egg-card .hammer-total span {
    font-size: 1.3rem;
    margin: 0 3px;
}
.egg-card .hammer-total a {
    position: relative;
    top: -3px;
    right: -6px;
    color: #FFF;
    padding: 3px 10px;
    background: #bf7649;
    border-radius: 50px;
}
.egg-card .card-profile-image a#btn-egg-hammer:hover .hammer-total {
    top: 10px;
}
.on.egg-card .egg_lg:before {
    background: url(../images/egg_gift_break@2x.png) no-repeat bottom;
    background-size: 100%;
    top: 0;
}
.egg_lg:after {
    content: " ";
    display: block;
    position: absolute;
    z-index: 5;
    bottom: -5px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 20px;
    background: #8D7C2F;
    opacity: 0.2;
    border-radius: 50px / 10px;
    transition: 0.3s;
}
.egg-card .egg_lg:hover:after {
    margin-left: -45px;
    width: 90px;
}
.egg-card .profile-card-content {
    margin-top: 20px;
}
.egg-card .card-title {
    margin: 10px 0 30px 0;
    font-size: 1.6rem;
    transform: scale(0.5);
    opacity: 0;
    transition: all .6s;
}
.egg-card h6.card-subtitle {
    margin-top: 20px;
    padding: 5px;
    border-radius: 3px;
    color: #6B6F82;
    line-height: 1.3rem;
    background: #f2f2f2;
    border: #E7E7E7 1px solid;
}
#egg-gift-box .card-profile-image {
    transform: translateY(-100px);
    opacity: 0;
    transition: all .7s;
}
.fancybox-slide--current #egg-gift-box .card-profile-image {
    transform: translateY(0);
    opacity: 1;
    transition-delay: .2s;
}
.fancybox-slide--current #egg-gift-box .card-title {
    transform: scale(1);
    opacity: 1;
    transition-delay: .3s;
}
.egg-card .womo-total {
    color: #70a2b4;
    font-size: 1.2rem;
}
.egg-card .text-expired {
    display: block;
}
.egg-card .text-expired span {
    display: inline-block;
    background: #f3f3f3;
    padding: 3px 15px;
    border-radius: 30px;
    margin-top: 5px;
    color: #a9a9a9;
    font-size: 0.9rem;
    border: #eaeaea 1px solid;
}
.btn-egg-area {
    display: flex;
    flex-wrap: wrap;
}
.btn-egg-area a {
    flex: 0 0 48%;
    margin: 0 1%;
}
.btn-egg-area a:last-child {
    width: 100%;
    flex: 0 0 98%;
    margin-top: 10px;
}

#award-user-big-modal {
    width: 100%;
}
@media (min-width: 600px) {
    #award-user-big-modal {
        max-width: 400px;
    }
}
/*------ egg-get-sucess ------*/
.bg-card-blue {
    background-color: #D9EBFF!important;
}
.bg-card-red {
    background-color: #f3eae9!important;
}
.bg-card-green {
    background-color: #d9eae7!important;
}
.bg-card-purple {
    background-color: #e4d9ff!important;
}
.bg-card-gray {
    background-color: #ececec!important;
}
.bg-card-peach {
    background-color: #ffe2ef!important;
}
.bg-card-red-org {
    background: -webkit-linear-gradient(-45deg, #ffd9bc 0%, #e0477f 100%);
}
.egg-get-sucess .card-img-top {
    height: 220px;
}
.egg-get-sucess .card-img-top span {
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    margin-left: 0 !important;
    background: url(../images/bg_egg_gift2.png) center center;
    background-size: cover;
}
.egg-get-sucess .card-profile-image {
    padding: 0 35px;
    top: 85px;
}
.media.egg-get-info {
    border-top: 0;
    display: inline-flex;
    align-items: center;
    text-align: left;
}
.media.egg-get-info .icon {
    font-size: 2rem;
}
.egg-get-sucess .store_pic {
    margin-right: 20px;
}
.egg-get-sucess .store_pic img {
    width: 100px;
    border: #FFF 5px solid;
    box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
}
.egg-get-sucess .m-coins-pic, .egg-get-sucess .w-coins-pic {
    width: 100px;
    height: 100px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    margin-bottom: 30px;
    margin-top: -45px;
    margin-right: 0;
}
.egg-get-sucess .m-coins-pic img, .egg-get-sucess .w-coins-pic img,
.egg-get-sucess .wm-coins-pic img {
    border: 0;
    box-shadow: none;
}
.egg-get-sucess .wm-coins-pic img {
    width: 90px;
}
.egg-get-sucess .store_pic .total_coins {
    margin: -10px -5px 0 -5px;
}
.egg-get-sucess .profile-card-content {
    margin-top: 0;
}
.egg-get-sucess .media-body {
    margin-top: 5px;
}
.egg-get-sucess .line-on-side span {
    background: #FFF;
}
.egg-get-sucess .desc {
    height: 120px;
    overflow: auto;
}
.egg-gift-mark {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 100;
    padding: 5px 20px;
    background: #FFF;
    box-shadow: 0 1px 6px 0 rgba(62, 57, 107, 0.16);
}
.egg-gift-mark:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    right: -15px;
    width: 0;
    height: 0;
    border-color: transparent #FFF;
    border-width: 0 0 15px 15px;
    border-style: solid;
}
.egg-gift-mark:after {
    content: " ";
    display: block;
    position: absolute;
    top: 15px;
    right: -15px;
    width: 0;
    height: 0;
    border-color: #FFF transparent;
    border-width: 0 15px 15px 0;
    border-style: solid;
}
.card-figure .card-profile-image {
    top: 80px;
}
.card-figure .card-img-top {
    height: 290px;
}
.pic_figure img {
    width: 180px;
}
.card-figure .profile-card-content {
    text-align: center;
}
.card-figure .media-heading {
    margin-top: 10px;   
}
.card-figure .desc {
    height: 40px;
}

/*-----------egg list-------------*/
.madia-header-title {
    padding: 8px 15px;
    margin: 20px 20px 10px 20px;
    border-top: #efefef 3px solid;
    background: #f3f3f3;
    border-radius: 100px;
}
.madia-header-title h5 {
    margin-bottom: 0;
}
.card-divide-line {
    border-top: #f4f5fa 5px solid;
}
.egg_task_block .egg-list .media {
    align-items: flex-start;
}
.egg-list .media {
    padding: 1rem 1.5rem;
}
.egg-list .media:first-child {
    border:0;
}
.egg-list .store_pic {
    position: relative;
}
.egg-list .store_pic img {
    width: 60px !important;
    border: #e2e2e2 1px solid;
    border-radius: 100%;
}
.egg-list .m-coins-pic img, 
.egg-list .w-coins-pic img, 
.egg-list .coins-pic img {
    width: 100% !important;
    border: 0;
}
.egg-list .store_pic .badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 25px;
    display: block;
    background: #ef7d24;
    border-radius: 100%;
    padding: 0;
}
.egg-list .store_pic .badge .icon-prop-expansion-w:before {
    background-size: 17px;
}
.egg-list .txt2 {
    margin-top: 5px;
    color: #bdbdbd;
}
.egg-list .num, 
.egg-shop-list .num,
.filter-fancybox h5.title .num {
    font-size: 1.8rem;
    color: #70a2b5;
}
.filter-fancybox h5.title .num {
    display: inline-block;
    font-size: 1.5rem;
    margin-top: -15px;
}
.egg-list .num span, 
.egg-shop-list .num span,
.filter-fancybox h5.title .num span {
    display: inline-block;
    margin-left: 10px;
    font-size: 1rem;
}
.egg-gift-xs {
    display: inline-block;
    width: 17px;
    height: 21px;
    background: url(../images/icon/egg_gift_xs.png) no-repeat;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-gift-s {
    display: inline-block;
    width: 24px;
    height: 30px;
    background: url(../images/icon/egg_gift_xs.png) no-repeat;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-gift-l {
    display: inline-block;
    width: 40px;
    height: 50px;
    background: url(../images/egg_gift@2x.png) no-repeat 0 -5px;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-gift-xl {
    display: inline-block;
    width: 70px;
    height: 90px;
    background: url(../images/egg_gift@2x.png) no-repeat center -7px;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-give-xs {
    display: inline-block;
    width: 20px;
    height: 23px;
    background: url(../images/icon/egg_give_xs.png) no-repeat;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-hammer-xs {
    display: inline-block;
    width: 20px;
    height: 23px;
    background: url(../images/egg_hammer.png) no-repeat;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-hammer-s {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../images/egg_hammer.png) no-repeat;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-hammer-l {
    display: inline-block;
    width: 40px;
    height: 50px;
    background: url(../images/egg_hammer.png) no-repeat 0 center;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-hammer-xl {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(../images/egg_hammer_b.png) no-repeat 0 center;
    background-size: 100%;
    transform: translateY(2px);
}
.egg-list .num.num-egg-hammer, 
.egg-shop-list .num.num-egg-hammer, 
.filter-fancybox h5.title .num.num-egg-hammer {
    color: #9c5555;
}
.egg-list .media .media-right {
    height: auto;
}
.egg-list .media .wm-coins-pic img {
    width: 63px;
}

.egg-shop-list .txt2 {
    display: inline-block;
    color: #FFF;
    background: #c37979;
    border-radius: 3px;
    padding: 2px 10px;
    margin-bottom: 5px;
}

/*--------- myprivilege page -----------*/
.myprivilege-list-top {
    position: relative;
    padding: 30px 0 0 0;
    text-align: center;
    background: #000;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    overflow: hidden;
}
.over .myprivilege-list-top {
    opacity: 0.3;
}
.over .collect-puzzle li {
    pointer-events: none;
}
.myprivilege-list-top .store_pic_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.8;
}
.myprivilege-list-top .store_pic {
    position: relative;
    display: inline-block;
    border: #FFF 3px solid;
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.13);
}
.myprivilege-list-top .store_pic img {
    border: #f3f3f3 1px solid;
}
.myprivilege-list-top span.btn {
    position: relative;
    margin: 0 10px;
    margin-top: -12px;
    background: #FFF;
    border: #d0d0d0 2px solid;
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.08);
}
.myprivilege-list-top .title {
    margin: 15px 0;
    color: #FFF;
}
.myprivilege-list-block .user_privilege {
    position: relative;
    margin: 10px;
}
.myprivilege-list-block .user_privilege a {
    display: inline-block;
}
.myprivilege-list-block .user_privilege a span.num {
    font-size: 1rem;
    padding-top: 5px;
}
.circle-list-block {
    display: none;
    position: relative;
    padding: 10px;
    /*padding-left: 145px;*/
}
.privilege-btn {
    float: right;
}
.privilege-btn a {
    display: block;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    background: #848484;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    /*pointer-events: none;*/
}
.privilege-btn.on a {
    color: #FFF;
    background: #d4646b;
    pointer-events: visible;
}
.privilege-btn a span:first-child {
    margin-right: 15px;
}
.privilege-btn a span i {
    color: #28D094;
    margin-right: 5px;
}
.circle-list-left {
    display: none;
    position: absolute;
    top: 15px;
    left: 30px;
    padding-right: 30px;
    border-right: #e2e2e2 1px solid;
}
.circle-list-left span {
    display: block;
}
.circle-list-left span.store_pic {
    border: #FFF 3px solid;
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.13);
}
.circle-list-left span.store_pic img {
    border: #f3f3f3 1px solid;
}
.circle-list-left span.btn {
    position: relative;
    margin: 0 10px;
    margin-top: -12px;
    background: #FFF;
    border: #d0d0d0 2px solid;
    box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.08);
}
.myprivilege-list-block .card {
    /*border-radius: 0.6rem;
    padding: 1px;
    box-shadow: 0px 0px 8px 1px rgba(62, 57, 107, 0.2);*/
    background: #0c0c0c;
    box-shadow: 0px 0px 7px 1px rgba(187, 187, 187, 0.5);
}
.myprivilege-list-block .puzzle-info {
    position: relative;
    padding: 20px 0;
    height: 108px;
    /*background: linear-gradient(180deg, hsla(0, 0%, 0%, 0) 0%,rgba(0, 0, 0, 0.8) 70%);*/
    padding: 10px 0 15px 0;
    /*background: linear-gradient(180deg, hsla(0, 0%, 81%, 0.39) 0%,rgba(255, 255, 255, 0.54) 70%);*/
    background: rgba(255, 255, 255, 0.5);
    border: #dedede 1px solid;
    margin: 15px;
    border-radius: 5px;
}
.myprivilege-list-block .puzzle-info .text-center .btn,
.myprivilege-list-block .puzzle-info .text-center .btn.disabled {
    background: #FFF !important;
    opacity: 1;
}
.myprivilege-list-block .puzzle-info .counter-analog3 span.part.part2, 
.myprivilege-list-block .puzzle-info .counter-analog3 span.part.part4, 
.myprivilege-list-block .puzzle-info .counter-analog3 span.part.part6, 
.myprivilege-list-block .puzzle-info .counter-analog3 span.separator.separator3, 
.myprivilege-list-block .puzzle-info .counter-analog3 span.separator.separator5 {
    display: none;
}

.myprivilege-list-block .puzzle-info .counter-analog3.less-one-day span.part.part2, 
.myprivilege-list-block .puzzle-info .counter-analog3.less-one-day span.part.part4, 
.myprivilege-list-block .puzzle-info .counter-analog3.less-one-day span.part.part6, 
.myprivilege-list-block .puzzle-info .counter-analog3.less-one-day span.separator.separator3, 
.myprivilege-list-block .puzzle-info .counter-analog3.less-one-day span.separator.separator5 {
    display: inline-block;
}
/*------------- counter-analog3-------------*/
.counter-analog3 span.part {
    display: inline-block;
    margin-top: 15px;
}

.counter-analog3 span.separator {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    color: #FFF;
}

.counter-analog3 span.part span.digit {
    display: inline-block;
    padding: 3px 7px;
    vertical-align: middle;
    text-align: center;
    /* font: 0/0 a; */
    /* text-shadow: none; */
    color: black;
    margin: 0;
}

.counter-analog3 span.part span.digit {
    background: rgba(45, 45, 45, 0.5);
    border: #dedede 1px solid;
    border-radius: 5px;
    margin: 0 3px;
    font-size: 1.5rem;
    color: #FFF;
}

/*----------puzzle----------*/
.puzzle-list-block .puzzle-list {
    text-align: center;
    padding: 5px;
}
.puzzle-list-block .puzzle-list .pic,
.puzzle-list-fancybox .pic {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 100%;
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.13);
}
.puzzle-list-fancybox .pic {
    width: 60px;
    height: 60px;
}
.puzzle-list-block .puzzle-list .pic,
.puzzle-list-fancybox .pic, 
.puzzle-content .card-img-top {
    background: #e0e0e0; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #e0e0e0 0%, #a5a5a5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #e0e0e0 0%,#a5a5a5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #e0e0e0 0%,#a5a5a5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 */
}
.puzzle-content .card-img-top span {
    background-image: url(../images/bg_egg_gift2_w.png) !important;
}
.puzzle-content .card-profile-image {
    top: 60px;
}
.puzzle-list-block .puzzle-list .pic img,
.puzzle-list-fancybox .pic img {
    width: 100%;
}
.puzzle-list-block .puzzle-list .pic .num {
    display: none;
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 100%;
    color: #ababab;
    background: #FFF;
    border:#CCC 2px solid;
}
.puzzle-list-block .puzzle-list .media-heading {
    display: none;
    font-size: 1rem;
    margin-top: 5px;
    color: #909090;
}
.puzzle-mark {
    position: absolute;
    top: -15px;
    left: -15px;
}
.puzzle-mark2 {
    margin: 20px;
    margin-bottom: 0;
    position: relative;
}
.puzzle-mark2 .user_privilege a span.txt {
    position: absolute;
    left: 35px;
    top: 10px;
    width: calc(100% - 40px);
}

.puzzle-list-1 .user_privilege.on a span.num {
    background-image: url(../images/icon/icon_user_privilege_on_red.svg);
}
.puzzle-list-1 .user_privilege.on a span.txt {
    border: #ed6362 2px solid;
}
.puzzle-list-1 .puzzle-list .pic .num {
    color: #cf3c50;
    border-color: #e04d60;
}
.puzzle-list-1 .puzzle-list.on .pic, 
.puzzle-list-fancybox .puzzle-list-1.on .pic, 
.puzzle-list-1 .user_privilege.on a span.txt, 
.puzzle-content1.on .card-img-top {
    background: #c23043; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #eb596c 0%, #c23043 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #eb596c 0%,#c23043 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #eb596c 0%,#c23043 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb596c', endColorstr='#c23043',GradientType=1 ); /* IE6-9 */
}
.myprivilege-list-block .puzzle-list-1 .puzzle-info {
    
}
.puzzle-list-2 .user_privilege.on a span.num {
    background-image: url(../images/icon/icon_user_privilege_on_org.svg);
}
.puzzle-list-2 .user_privilege.on a span.txt {
    border: #f5bb4f 2px solid;
}
.puzzle-list-2 .puzzle-list .pic .num {
    color: #de863c;
    border-color: #de863c;
}
.puzzle-list-2 .puzzle-list.on .pic, 
.puzzle-list-fancybox .puzzle-list-2.on .pic, 
.puzzle-list-2 .user_privilege.on a span.txt, 
.puzzle-content2.on .card-img-top {
    background: #de863c; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #f1b547 0%, #de863c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #f1b547 0%,#de863c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #f1b547 0%,#de863c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1b547', endColorstr='#de863c',GradientType=1 ); /* IE6-9 */
}
.myprivilege-list-block .puzzle-list-2 .puzzle-info {
    
}
.puzzle-list-3 .user_privilege.on a span.num {
    background-image: url(../images/icon/icon_user_privilege_on_green.svg);
}
.puzzle-list-3 .user_privilege.on a span.txt {
    border: #84e983 2px solid;
}
.puzzle-list-3 .puzzle-list .pic .num {
    color: #51a54f;
    border-color: #51a54f;
}
.puzzle-list-3 .puzzle-list.on .pic, 
.puzzle-list-fancybox .puzzle-list-3.on .pic, 
.puzzle-list-3 .user_privilege.on a span.txt, 
.puzzle-content3.on .card-img-top {
    background: #51a54f; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #84e983 0%, #51a54f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #84e983 0%,#51a54f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #84e983 0%,#51a54f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84e983', endColorstr='#51a54f',GradientType=1 ); /* IE6-9 */
}
.myprivilege-list-block .puzzle-list-3 .puzzle-info {
    
}
.puzzle-list-4 .user_privilege.on a span.num {
    background-image: url(../images/icon/icon_user_privilege_on_blue.svg);
}
.puzzle-list-4 .user_privilege.on a span.txt {
    border: #5897f6 2px solid;
}
.puzzle-list-4 .puzzle-list .pic .num {
    color: #2960d7;
    border-color: #2960d7;
}
.puzzle-list-4 .puzzle-list.on .pic, 
.puzzle-list-fancybox .puzzle-list-4.on .pic, 
.puzzle-list-4 .user_privilege.on a span.txt, 
.puzzle-content4.on .card-img-top {
    background: #2960d7; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #5897f6 0%, #2960d7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #5897f6 0%,#2960d7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #5897f6 0%,#2960d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5897f6', endColorstr='#2960d7',GradientType=1 ); /* IE6-9 */
}
.myprivilege-list-block .puzzle-list-4 .puzzle-info {
    
}
.puzzle-list-5 .user_privilege.on a span.num {
    background-image: url(../images/icon/icon_user_privilege_on_purple.svg);
}
.puzzle-list-5 .user_privilege.on a span.txt {
    border: #c467eb 2px solid;
}
.puzzle-list-5 .puzzle-list .pic .num {
    color: #892bbd;
    border-color: #892bbd;
}
.puzzle-list-5 .puzzle-list.on .pic, 
.puzzle-list-fancybox .puzzle-list-5.on .pic, 
.puzzle-list-5 .user_privilege.on a span.txt, 
.puzzle-content5.on .card-img-top {
    background: #892bbd; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c467eb 0%, #892bbd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #c467eb 0%,#892bbd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #c467eb 0%,#892bbd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c467eb', endColorstr='#892bbd',GradientType=1 ); /* IE6-9 */
}
.myprivilege-list-block .puzzle-list-5 .puzzle-info {
    
}
.puzzle-list-6 .user_privilege.on a span.num {
    background-image: url(../images/icon/icon_user_privilege_on_cyan.svg);
}
.puzzle-list-6 .user_privilege.on a span.txt {
    border: #82d9c6 2px solid;
}
.puzzle-list-6 .puzzle-list .pic .num {
    color: #54b298;
    border-color: #54b298;
}
.puzzle-list-6 .puzzle-list.on .pic, 
.puzzle-list-fancybox .puzzle-list-6.on .pic, 
.puzzle-list-6 .user_privilege.on a span.txt, 
.puzzle-content6.on .card-img-top {
    background: #f5bb4f; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #82d9c6 0%, #54b298 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #82d9c6 0%,#54b298 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #82d9c6 0%,#54b298 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d9c6', endColorstr='#54b298',GradientType=1 ); /* IE6-9 */
}
.myprivilege-list-block .puzzle-list-6 .puzzle-info {
    
}
.puzzle-content .card-img-top span {
    opacity: 0.3;
}
.puzzle-num-bar {
    text-align: center;
    margin-top: 30px;
}
.puzzle-num-bar span {
    padding: 2px 10px;
    color: #bfbfbf;
    background: #FFF;
    border-radius: 20px;
}
.puzzle-content1.on .puzzle-num-bar span {
    color: #cc394d;
}

.upgrade-card2 .expansion-info {
    min-height: auto;
    margin-bottom: 15px;
}
.upgrade-card2 .pic-expansion {
    position: relative;
}
.upgrade-card2 .pic-expansion img {
    width: 60%;
}
.upgrade-card2 .pic-expansion .reach-mark {
    position: absolute;
    top: 30px;
    right: 10px;
    transform: rotate(10deg);
}
.upgrade-card2 .pic-expansion .reach-mark img {
    width: 120px;
}
.over-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    white-space: nowrap;
    transform: translateX(-50%) translateY(-50%);
    border: #af4545 1px solid;
    color: #af4545;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 15px;
    font-size: 1.3rem;
    border-radius: 2rem;
}
.upgrade-card2 .media-heading {
    margin-bottom: 0;
}
.upgrade-card2.fancybox-content .btn {
    padding: 0.75rem 2rem;
}
.desc-scroll {
    margin: 0 10px 10px 10px;
    height: 80px;
    overflow: auto;
}
.desc-scroll .card-subtitle {
    margin-top: 0;
    line-height: 1.5rem;
}
.collect-puzzle {
    text-align: center;
}
.collect-puzzle ul {
    display: inline-block;
    padding: 0;
    margin-bottom: 10px;
}
.collect-puzzle li {
    display: inline-block;
    width: 40px;
    height: 38px;
    cursor: pointer;
    background-size: 100%;
}
.myprivilege-list-block .card .text-center .btn span {
    color: #FFF;
    display: inline-block;
    padding: 5px 10px;
    margin: -5px -8px -5px 0.75rem;
    border-radius: 2rem;
}
.collect-puzzle li.puzzle-c1 {
    background-image: url(../images/icon/puzzle/puzzle1_1_gray.png);
}
.collect-puzzle li.puzzle-c2 {
    background-image: url(../images/icon/puzzle/puzzle1_2_gray.png);
}
.collect-puzzle li.puzzle-c3 {
    background-image: url(../images/icon/puzzle/puzzle1_3_gray.png);
}
.collect-puzzle li.puzzle-c4 {
    background-image: url(../images/icon/puzzle/puzzle1_4_gray.png);
}
.collect-puzzle li.puzzle-c5 {
    background-image: url(../images/icon/puzzle/puzzle1_5_gray.png);
}
.collect-puzzle li.puzzle-c6 {
    background-image: url(../images/icon/puzzle/puzzle1_6_gray.png);
}
.puzzle-list-1 .collect-puzzle li.puzzle-c1.on {
    background-image: url(../images/icon/puzzle/puzzle1_1_red.png);
}
.puzzle-list-1 .collect-puzzle li.puzzle-c2.on {
    background-image: url(../images/icon/puzzle/puzzle1_2_red.png);
}
.puzzle-list-1 .collect-puzzle li.puzzle-c3.on {
    background-image: url(../images/icon/puzzle/puzzle1_3_red.png);
}
.puzzle-list-1 .collect-puzzle li.puzzle-c4.on {
    background-image: url(../images/icon/puzzle/puzzle1_4_red.png);
}
.puzzle-list-1 .collect-puzzle li.puzzle-c5.on {
    background-image: url(../images/icon/puzzle/puzzle1_5_red.png);
}
.puzzle-list-1 .collect-puzzle li.puzzle-c6.on {
    background-image: url(../images/icon/puzzle/puzzle1_6_red.png);
}
.myprivilege-list-block .puzzle-list-1 .text-center .btn, 
.myprivilege-list-block .puzzle-list-1 .text-center .btn:hover {
    border-color: #c33447;
    color: #c33447;
}
.myprivilege-list-block .puzzle-list-1 .text-center .btn span {
    background: #c33447;
}
.myprivilege-list-block .puzzle-list-1 .text-center .btn:hover span {
    background: #9e2a3a; 
}
.puzzle-list-2 .collect-puzzle li.puzzle-c1.on {
    background-image: url(../images/icon/puzzle/puzzle1_1_org.png);
}
.puzzle-list-2 .collect-puzzle li.puzzle-c2.on {
    background-image: url(../images/icon/puzzle/puzzle1_2_org.png);
}
.puzzle-list-2 .collect-puzzle li.puzzle-c3.on {
    background-image: url(../images/icon/puzzle/puzzle1_3_org.png);
}
.puzzle-list-2 .collect-puzzle li.puzzle-c4.on {
    background-image: url(../images/icon/puzzle/puzzle1_4_org.png);
}
.puzzle-list-2 .collect-puzzle li.puzzle-c5.on {
    background-image: url(../images/icon/puzzle/puzzle1_5_org.png);
}
.puzzle-list-2 .collect-puzzle li.puzzle-c6.on {
    background-image: url(../images/icon/puzzle/puzzle1_6_org.png);
}
.myprivilege-list-block .puzzle-list-2 .text-center .btn, 
.myprivilege-list-block .puzzle-list-2 .text-center .btn:hover {
    border-color: #cc7b39;
    color: #cc7b39;
    background: transparent;
}
.myprivilege-list-block .puzzle-list-2 .text-center .btn span {
    background: #cc7b39;
}
.myprivilege-list-block .puzzle-list-2 .text-center .btn:hover span {
    background: #a9642c; 
}
.puzzle-list-3 .collect-puzzle li.puzzle-c1.on {
    background-image: url(../images/icon/puzzle/puzzle1_1_green.png);
}
.puzzle-list-3 .collect-puzzle li.puzzle-c2.on {
    background-image: url(../images/icon/puzzle/puzzle1_2_green.png);
}
.puzzle-list-3 .collect-puzzle li.puzzle-c3.on {
    background-image: url(../images/icon/puzzle/puzzle1_3_green.png);
}
.puzzle-list-3 .collect-puzzle li.puzzle-c4.on {
    background-image: url(../images/icon/puzzle/puzzle1_4_green.png);
}
.puzzle-list-3 .collect-puzzle li.puzzle-c5.on {
    background-image: url(../images/icon/puzzle/puzzle1_5_green.png);
}
.puzzle-list-3 .collect-puzzle li.puzzle-c6.on {
    background-image: url(../images/icon/puzzle/puzzle1_6_green.png);
}
.myprivilege-list-block .puzzle-list-3 .text-center .btn, 
.myprivilege-list-block .puzzle-list-3 .text-center .btn:hover {
    border-color: #5aac59;
    color: #5aac59;
    background: transparent;
}
.myprivilege-list-block .puzzle-list-3 .text-center .btn span {
    background: #5aac59;
}
.myprivilege-list-block .puzzle-list-3 .text-center .btn:hover span {
    background: #459444; 
}
.puzzle-list-4 .collect-puzzle li.puzzle-c1.on {
    background-image: url(../images/icon/puzzle/puzzle1_1_blue.png);
}
.puzzle-list-4 .collect-puzzle li.puzzle-c2.on {
    background-image: url(../images/icon/puzzle/puzzle1_2_blue.png);
}
.puzzle-list-4 .collect-puzzle li.puzzle-c3.on {
    background-image: url(../images/icon/puzzle/puzzle1_3_blue.png);
}
.puzzle-list-4 .collect-puzzle li.puzzle-c4.on {
    background-image: url(../images/icon/puzzle/puzzle1_4_blue.png);
}
.puzzle-list-4 .collect-puzzle li.puzzle-c5.on {
    background-image: url(../images/icon/puzzle/puzzle1_5_blue.png);
}
.puzzle-list-4 .collect-puzzle li.puzzle-c6.on {
    background-image: url(../images/icon/puzzle/puzzle1_6_blue.png);
}
.myprivilege-list-block .puzzle-list-4 .text-center .btn, 
.myprivilege-list-block .puzzle-list-4 .text-center .btn:hover {
    border-color: #174cc3;
    color: #174cc3;
    background: transparent;
}
.myprivilege-list-block .puzzle-list-4 .text-center .btn span {
    background: #174cc3;
}
.myprivilege-list-block .puzzle-list-4 .text-center .btn:hover span {
    background: #123d9e; 
}
.puzzle-list-5 .collect-puzzle li.puzzle-c1.on {
    background-image: url(../images/icon/puzzle/puzzle1_1_pur.png);
}
.puzzle-list-5 .collect-puzzle li.puzzle-c2.on {
    background-image: url(../images/icon/puzzle/puzzle1_2_pur.png);
}
.puzzle-list-5 .collect-puzzle li.puzzle-c3.on {
    background-image: url(../images/icon/puzzle/puzzle1_3_pur.png);
}
.puzzle-list-5 .collect-puzzle li.puzzle-c4.on {
    background-image: url(../images/icon/puzzle/puzzle1_4_pur.png);
}
.puzzle-list-5 .collect-puzzle li.puzzle-c5.on {
    background-image: url(../images/icon/puzzle/puzzle1_5_pur.png);
}
.puzzle-list-5 .collect-puzzle li.puzzle-c6.on {
    background-image: url(../images/icon/puzzle/puzzle1_6_pur.png);
}
.myprivilege-list-block .puzzle-list-5 .text-center .btn, 
.myprivilege-list-block .puzzle-list-5 .text-center .btn:hover {
    border-color: #8025b1;
    color: #8025b1;
    background: transparent;
}
.myprivilege-list-block .puzzle-list-5 .text-center .btn span {
    background: #8025b1;
}
.myprivilege-list-block .puzzle-list-5 .text-center .btn:hover span {
    background: #681b92; 
}
.puzzle-list-6 .collect-puzzle li.puzzle-c1.on {
    background-image: url(../images/icon/puzzle/puzzle1_1_cyan.png);
}
.puzzle-list-6 .collect-puzzle li.puzzle-c2.on {
    background-image: url(../images/icon/puzzle/puzzle1_2_cyan.png);
}
.puzzle-list-6 .collect-puzzle li.puzzle-c3.on {
    background-image: url(../images/icon/puzzle/puzzle1_3_cyan.png);
}
.puzzle-list-6 .collect-puzzle li.puzzle-c4.on {
    background-image: url(../images/icon/puzzle/puzzle1_4_cyan.png);
}
.puzzle-list-6 .collect-puzzle li.puzzle-c5.on {
    background-image: url(../images/icon/puzzle/puzzle1_5_cyan.png);
}
.puzzle-list-6 .collect-puzzle li.puzzle-c6.on {
    background-image: url(../images/icon/puzzle/puzzle1_6_cyan.png);
}
.puzzle-list-6 .text-center .btn-outline-secondary.disabled {
    border-color: #40a589;
    color: #40a589;
}
.myprivilege-list-block .puzzle-list-6 .text-center .btn, 
.myprivilege-list-block .puzzle-list-6 .text-center .btn:hover {
    border-color: #40a589;
    color: #40a589;
    background: transparent;
}
.myprivilege-list-block .puzzle-list-6 .text-center .btn span {
    background: #40a589;
}
.myprivilege-list-block .puzzle-list-6 .text-center .btn:hover span {
    background: #2f846c; 
}
.badge-endtime {
    text-align: center;
    margin: 15px 0 40px 0;
}
.badge-endtime span {
    position: relative;
    display: inline-block;
    padding: 2px 15px;
    border-radius: 15px;
    border-style: solid;
    border-width: 2px;
}
.puzzle-list-1 .badge-endtime span {
    color: #c33244;
    background: #f4cece;
    border-color: #c33244;
}
.puzzle-list-2 .badge-endtime span {
    color: #de873e;
    background: #fae4d2;
    border-color: #de873e;
}
.puzzle-list-3 .badge-endtime span {
    color: #5aac59;
    background: #d2f3d1;
    border-color: #5aac59;
}
.puzzle-list-4 .badge-endtime span {
    color: #3266d9;
    background: #d3e0fd;
    border-color: #3266d9;
}
.puzzle-list-5 .badge-endtime span {
    color: #8a2dbe;
    background: #efdafb;
    border-color: #8a2dbe;
}
.puzzle-list-6 .badge-endtime span {
    color: #55b399;
    background: #bff2e4;
    border-color: #55b399;
}
.counter-time-box {
    display: block;
    color: #4A4A4A;
    padding: 25px 10px;
    margin-top: 10px;
    text-align: center;
}
.privilege-stamp-block .counter-time-box {
    background: #F5F3D7;
}
.counter-time-box .counter-time-inner {
    display: inline-block;
}
.counter-time-box .day-bar {
    display: flex;
    height: 33px;
    background: #FFD800;
    border-radius: 30px;
    padding: 5px 15px;
    margin-top: 10px;
    align-items: center;
    font-size: 1.1rem;
}
.counter-time-box .day-bar span.day-num {
    display: inline-block;
    width: 76px;
    height: 86px;
    line-height: 90px;
    color: #FFF;
    background: url(../images/counter_clock_day.png) no-repeat;
    background-size: 100%;
    top: -4px;
    position: relative;
    font-size: 1.9rem;
    font-weight: bold;
    text-align: center;
    margin: 0 5px;
    animation-name:clock_day_anim;
    animation-duration:3s;
    animation-iteration-count:infinite;
    animation-timing-function:step-start;
}
@keyframes clock_day_anim{
    0%{
        
        transform: rotate(0deg);
    }
    7%{
        transform: rotate(-5deg);
    }
    10%{
        
        transform: rotate(3deg);
    }
    12%{
        transform: rotate(-5deg);
    }
    15%{
        
        transform: rotate(3deg);
    }
    100%{
        
        transform: rotate(0deg);
    }
}
.counter-time-box .day-bar span.counter {
    margin-left: 5px;
}
.counter-time-box .time-bar {
    background: #F5A623;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 15px 15px 5px 15px;
    margin: 0 22px;
    font-size: 1.2rem;
    color: #FFF;
}
.counter-time-box .txt {
    color: #B7610C;
}
.counter-time-box .time-bar .txt {
    font-size: 1rem;
    margin-left: 10px;
}
.counter-time-box .part0,  
.counter-time-box .separator1 {
    display: none;
}
.privilege-stamp-block .badge-endtime {
    margin: 15px 0;
    margin-top: -15px;
}
.privilege-stamp-block .badge-endtime span {
    border-radius: 30px;
}
.badge-endtime span b {
    font-size: 1.7rem;
    display: inline-block;
    margin: 0 5px;
}
.privilege-stamp-block .stamp-block {
    position: relative;
    width: 90%;
    margin: 30px auto 0 auto;
}
.privilege-stamp-content {
    padding-top: 10px;
    margin-top: -15px;
    background: #FFF;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
.privilege-stamp-block .puzzle-mark2 {
    margin: 0 25px 0 -20px;
    text-align: left;
}
.privilege-stamp-block .store-pic {
    float: right;
    position: absolute;
    z-index: 15;
    right: -20px;
    top: -15px;
}
.privilege-stamp-block .store-pic img {
    width: 70px;
}
.privilege-stamp-block .barcode {
    display: inline-block;
    padding: 5px 15px;
    margin: 20px 0;
    
    border-radius: 30px;
}
.privilege-stamp-block .barcode img {
    width: 20px;
    transform: rotate(20deg);
    margin-bottom: 10px;
}
.privilege-stamp-block .pic-expansion img {
    width: 50%;
}
.privilege-stamp-block .media-heading {
    margin: 0;
    padding: 20px 0;
    /*background: #F5F3D7;*/
    font-size: 1.3rem;
}
.privilege-stamp-block .card-subtitle {
    text-align: left;
    border-top: #efefef 1px solid;
    border-bottom: #efefef 1px solid;
    line-height: 1.5rem;
    padding: 10px 0;
}

/*================================================================================
    prop
================================================================================*/
.icon-prop-back-org:before {
    display: inline-block;
    content: " ";
    width: 20px;
    height: 20px;
    margin-right: 5px;
    transform: translateY(3px);
    text-indent: -9999px;
    background: url(../images/icon/icon_backpack_org.svg) no-repeat center center;
    background-size: 100%;
}
.icon-privilege-red:before {
    display: inline-block;
    content: " ";
    width: 20px;
    height: 20px;
    margin-right: 5px;
    transform: translateY(3px);
    text-indent: -9999px;
    background: url(../images/icon/icon_privilege_red.svg) no-repeat center center;
    background-size: 100%;
}
.btn-prop {
    display: block;
    position: fixed;
    z-index: 999;
    right: 3px;
    bottom: 10%;
    width: 45px;
    height: 65px;
    transform: rotate(0deg);
    text-indent: -9999px;
    background: url(../images/icon/prop_backpack.svg) no-repeat;
    background-size: 100%;
    text-align: center;
}
.icon-prop-expansion-w:before, 
.icon-prop-cloak-w:before, 
.icon-raffle-ticket-w:before {
    display: inline-block;
    margin-right: 0px;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.icon-prop-expansion-w:before {
    content: "expansion";
    background: url(../images/icon/icon_coupon_expansion_w.svg) no-repeat center center;
    background-size: 25px;
}
.icon-prop-cloak-w:before {
    content: "cloak";
    background: url(../images/icon/icon_prop_cloak_w.svg) no-repeat center center;
    background-size: 45px;
}
.icon-raffle-ticket-w:before {
    content: "raffle";
    background: url(../images/icon/icon_raffle_ticket_w.svg) no-repeat center center;
    background-size: 30px;
}
.prop-box {
    max-width: 800px;
}
.fancybox-content .btn-right {
    float: right;
    margin-top: 5px;
    margin-right: 15px;
}
.prop-box .store_pic {
    position: relative;
}
.badge.badge-num {
    margin-top: 0;
    position: absolute;
    top: 3px;
    right: 10px;
    width: 23px;
    height: 23px;
    color: #FFF;
    line-height: 20px;
    font-size: 0.8rem;
    padding: 0;
    border: #FFF 1px solid;
    background: #5a3ea0;
}
.prop-box .media {
    background: #FFF;
    border-top: 0;
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
}
.prop-box .media .media-body {
    margin-right: 10px;
}
.fancybox-content .btn-right .btn {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
}
.prop-box .media .user_privilege a span.num {
    width: 60px;
    height: 55px;
    padding-top: 8px;
    margin-right: 0;
    font-size: 1.3rem;
}

.card-prop .card-profile-image {
    top: 60px;
}
.card-prop .card-img-top {
    height: 280px;
}
.card-prop .media-heading {
    margin: 0 0 30px 0;
    text-align: center;
}
.card-prop .desc {
    height: 90px;
}

.prop-style1 .card-img-top {
    background-color: #fbe5e5;
}

/*================================================================================
    activity2復仇者
================================================================================*/
.activity-banner {
    margin: 10px 0;
    background: #eed101;
    border-radius: 15px;
    overflow: hidden;
}
.activity-banner a {
    display: flex;
    width: 100%;
}
.activity-banner span {
    display: block;
}
.activity-banner span img {
    display: block;
    width: 100%;
}
@media(max-width: 600px) {
    .activity-banner a {
        display: block;
    }
}
#rank-self-box {
    border-radius: 10px;
    margin-top: 90px;
    /*border: 5px solid transparent;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(to right, gold, deeppink);
    background-origin: border-box;
    background-clip: content-box, border-box;*/   
}
#rank-self-box .activity-card {
    max-width: 500px;
    background: #EED100;
    border: #c34d19 5px solid;
    border-radius: 60px;
}
#rank-self-box .fancybox-close-small {
    background: #c34d19;
    top: -9px;
    right: -7px;
}
.activity-title {
    text-align: center;
    margin-top: -80px;
    padding-right: 40px;
}
.activity-title img {
    width: 100%;
}
.activity-title2 {
    text-align: center;
    margin: 5px 0 0 0;
}
.activity-title2 img {
    width: 100%;
    max-width: 300px;
}
.activity-card h5 {
    text-align: center;
    font-size: 1.5rem;
    /*color: #0e5299;*/
    color: #FFF;
    margin-bottom: 0;
}
.activity-pic img {
    width: 100%;
}
.activity-txt {
    color: #000;
    font-size: 1.2rem;
    text-align: center;
    padding: 10px 30px;
}
.activity-txt span {
    color: #c30d23;
    font-size: 1.4rem;
    margin: 0 1px;
}
.activity-txt p {
    margin-bottom: 8px;
    font-size: 1.1rem;
    /*color: #4a4a4a;*/
    color: #cfbbcd;
    line-height: 1.6rem;
}
.activity-btn-go {
    display: inline-block;
    font-size: 1.1rem;
    color: #45267a;
    background-color: #FFF;
    border-radius: 6px;
    padding: 12px 15px;
    margin: 0 30px 10px 30px;
    width: auto;
    text-align: center;
    box-shadow: 2px 4px 1px #41216e;
}
.activity-btn-go i {
    display: inline-block;
    color: #FFF;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    padding: 3px 2px;
    background: #47267a;
    margin-left: 5px;
}
.activity-btn-go:hover {
    
}
.activity-btn-go img {
    width: 40px;
    margin-right: 10px;
}
.activity-text-tip {
    color: #4caf50;
}

.btn-rank-total {
    position: relative;
    display: block;
    position: fixed;
    z-index: 999;
    right: 10px;
    bottom: 5%;
    background: #EED100;
    text-align: center;
    border-radius: 100%;
    border: #c34d19 3px solid;
    box-shadow: 2px 4px 1px rgb(0 0 0 / 20%);
    /*border: 3px solid transparent;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 5px);*/
    /*box-shadow: 0px 1px 5px 2px rgb(74 74 80 / 10%);
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, gold, deeppink);
    background-origin: border-box;
    background-clip: content-box, border-box;*/
}
.btn-rank-total span.pic {
    display: block;
    width: 80px;
    height: 80px;
    background: url(../images/icon/icon_self_score.png) no-repeat center center;
    background-size: 100%;
}
.btn-rank-total span.pic img {
    width: 40px;
}
.btn-rank-total span.pic:before {
    /*position: absolute;
    top: -1px;
    left: -12px;
    display: block;
    content: " ";
    width: 100px;
    height: 35px;
    background: url(../images/icon/icon_self_score_txt.png) no-repeat center center;
    background-size: 100%;*/
}
.btn-rank-total span.txt {
    font-size: 0.8rem;
    display: block;
    transform: scale(0.9);
    white-space: nowrap;
    margin-left: 0;
    margin-bottom: 3px;
    color: #ae2538;
}



.btn-right-fixed-task {
    position: relative;
    display: block;
    position: fixed;
    z-index: 997;
    right: 10px;
    bottom: 160px;
}
.btn-right-fixed-task span.pic {
    display: block;
    width: 55px;
    height: 55px;
    background: url(https://d1q14jmvwk39e0.cloudfront.net/public/assets/images/icon/icon_right_fixed_btn_task2.png) no-repeat center center;
    background-size: 100%;
}
.btn-right-fixed-task span.pic img {
    width: 100%;
}
.btn-right-fixed-task span.txt {
    text-align: center;
    display: block;
    margin-top: 5px;
    color: #6e3c2d;
    font-size: 0.9rem;
}
.btn-right-fixed-task span.txt i {
    width: 13px;
    height: 13px;
    border-radius: 13px;
    line-height: 13px;
    color: #FFF;
    background-color: #6e3c2d;
    margin-left: 3px;
    margin-right: -3px;
    font-size: 0.8rem;
}
.btn-right-fixed-ar {
    position: relative;
    display: block;
    position: fixed;
    z-index: 997;
    right: 10px;
    bottom: 90px;
}
.btn-right-fixed-ar span.pic {
    display: block;
    width: 57px;
    height: 57px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_right_fixed_btn_ar.png) no-repeat center center;
    background-size: 100%;
}
.btn-right-fixed-ar span.pic img {
    width: 100%;
}


.btn-aff-activity {
    position: relative;
    display: block;
    position: fixed;
    z-index: 999;
    right: 10px;
    bottom: 5%;
    background: #a33377;
    text-align: center;
    border-radius: 100%;
    border: #37247a 3px solid;
    box-shadow: 2px 4px 1px rgb(0 0 0 / 20%);
}
.btn-aff-activity span.pic {
    display: block;
    width: 80px;
    height: 80px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/activity3/icon_fixed_btn.png) no-repeat center center;
    background-size: 100%;
}
.btn-aff-activity span.pic img {
    width: 40px;
}
#aff-activity-box .activity-card {
    max-width: 350px !important;
    background: -webkit-linear-gradient(137deg, #a33377 -20%, #37247a 100%);
    background: -moz-linear-gradient(137deg, #a33377 -20%, #37247a 100%);
    background: -o-linear-gradient(137deg, #a33377 -20%, #37247a 100%);
    background: -ms-linear-gradient(137deg, #a33377 -20%, #37247a 100%);
    background: linear-gradient(137deg, #a33377 -20%, #37247a 100%);
}
#aff-activity-box .activity-pic {
    text-align: center;
    padding: 20px;
}
#aff-activity-box .activity-pic img {
    max-width: 220px;
}
.drink-txt-box {
    padding: 15px;
    border-radius: 10px;
    color: #FFF;
    background: #a33377;
    border: #37247a 3px solid;
}
.drink-txt-box .pic {
    float: left;
    width: 100px;
    border-radius: 100%;
    background: #8b2763;
    padding: 5px;
}
.drink-txt-box .pic img {
    width: 100%;
}
.drink-txt-box .title {
    margin: 20px 0 35px 0;
    color: #e7d2df;
    font-size: 1.4rem;
}
.drink-txt-box .title span {
    display: inline-block;
    font-size: 1rem;
    background: #8b2764;
    padding: 2px 9px;
    border-radius: 30px;
}
.drink-txt-box .txt {
    clear: both;
    color: #e5cddc;
    background: #af4485;
    padding: 5px;
    margin: 0 -15px;
}
.drink-txt-box .txt h5 {
    font-size: 1.3rem;
    margin-top: 20px;
    margin-bottom: 10px;
}
.drink-txt-box .txt ul {
    text-align: left;
}
.drink-txt-box .txt li span {
    display: inline-block;
    color: #ffffff;
    background: #37247a;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 30px;
    margin-right: 10px;
}
.drink-txt-box .txt2 {
    margin-top: 15px;
}
.drink-txt-box .txt2 p {
    margin-bottom: 3px;
}
.drink-txt-box .txt2 p:nth-child(2) {
    font-size: 1.2rem;
    color: #f7a6d7;
}
.drink-txt-box .txt2 p span, .drink-txt-box .txt h5 span {
    font-size: 1.8rem;
}


@media(max-width: 600px) {
    .btn-rank-total, .btn-aff-activity {
        bottom: 6px;
    }
    .btn-rank-total span.pic, .btn-aff-activity span.pic {
        width: 70px;
        height: 70px;
    }
    .fixed_bottom_menu {
        /*padding-right: 90px;*/
    }
    .activity-txt {
        padding: 10px 20px;
    }
}

/*------- activity-quick-btn -------*/
.activity-quick-btn ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}
.activity-quick-btn ul li {
    width: 22%;
    margin: 0 1.5% 4% 1.5%;
    text-align: center;
}
.activity-quick-btn ul li a {
    display: block;
    padding: 5px;
    border-radius: 20px;
    /*box-shadow: 2px 4px 1px #a33377;
    background: #a33377;
    border: #37247a 3px solid;*/
    text-align: center;
    box-shadow: 2px 4px 1px #41216e;
    background: #ffffff;
    border: #37247a 3px solid;
}
.activity-quick-btn ul span {
    display: block;
    white-space: nowrap;
}
.activity-quick-btn ul span.pic {
    padding: 0 10px;
    text-align: center;
}
.activity-quick-btn ul span.pic img {
    width: 100%;
}
.activity-quick-btn ul span.txt {
    font-size: 0.9rem;
}
.activity-quick-btn ul li.activity-quick-w-100 {
    width: 100%;
}
.activity-quick-btn ul li.activity-quick-w-100 a {
    padding: 0;
    overflow: hidden;
    border: #4d9384 3px solid;
    box-shadow: 2px 4px 1px rgb(49 114 101);
}
@media(min-width: 600px) {
    .activity-btn-go:hover {
        /*transform: translate(1px, 2px);
        box-shadow: 1px 2px 1px rgb(255 255 255);*/
    }
    .activity-quick-btn ul li a:hover {
        transform: translate(1px, 2px);
        box-shadow: 1px 2px 1px #41216e;
    }
    .activity-quick-btn ul li.activity-quick-w-100 a:hover {
        box-shadow: 1px 2px 1px rgb(49 114 101);
    }
}
.activity-quick-btn ul li.activity-quick-w-100 span.pic {
    padding: 0;
    width: 100%;
}
.activity-manage {
    padding: 10px 20px;
    margin-top: 10px;
    border-top: 2px solid #fde42e !important;
    border-bottom: 2px solid #fde42e;
}
.activity-manage .media-left span {
    display: block;
}
.activity-manage .media-left {
    margin-right: 20px;
}
.activity-manage .pic img {
    width: 100px;
    border: #f9ec8a 3px solid;
}
.activity-manage .name {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 10px;
    color: #000;
}
.activity-manage .media-body > span {
    display: block;
    /*background: rgb(255 255 255 / 50%);*/
    border-radius: 10px;
    padding: 5px 15px;
    margin: 10px 0;
    color: #000;
    background: #fbf7d8;
    border-radius: 10px;
    font-size: 1.2rem;
}
.activity-manage .media-body span > span {
    color: #B84D5E;
    font-size: 2rem;
    margin-left: 15px;
}
.activity-manage .media-body span span a {
    color: #a34545;
    font-size: 1.3rem;
}
.activity-manage .media-body span.score {
    position: relative;
}
.activity-manage .media-body span.score p {
    font-size: 1rem;
    color: #cb9b42;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    border-top: #ebe197 1px solid;
}
.activity-manage .media-body span.score .score-plus {
    position: relative;
    padding: 20px 10px 5px 10px;
    border: #fde42f 1px solid;
    background: #fff;
    border-radius: 15px;
}
.activity-manage .media-body span.score .score-plus .mark {
    position: absolute;
    right: -5px;
    top: -5px;
    color: #FFF;
    background-color: #16bb82;
    border-radius: 30px;
    padding: 3px 30px 3px 10px;
    font-size: 1rem;
}
.activity-manage .media-body span.score .score-plus .mark:after {
    position: absolute;
    top: -5px;
    right: -8px;
    width: 35px;
    height: 35px;
    content: " ";
    display: block;
    background: url(../images/activity_double11_icon_plus.png) no-repeat;
    background-size: 100%; 
}
.activity-manage .media-body span.score .score-plus span {
    margin-left: 5px;
}
.activity-manage .media-body span.score .score-plus span.total {
    color: #ff6b00;
}

    #rank-self-box {
        margin-top: 70px;
    }
    .activity-title {
        margin-top: -60px;
    }
    .activity-manage .media-body > span {
        text-align: center;
    }
    .activity-manage .media-body span span {
        display: block;
        margin-left: 0;
    }
    #rank-self-box .card-body {
        padding: 25px 15px;
    }
    .activity-quick-btn ul li {
        width: 47%;
    }
    .activity-quick-btn ul li a {
        border-radius: 10px;
        display: flex;
        align-items: center;
    }
    .activity-quick-btn ul span.pic {
        width: 35%;
        padding: 0;
    }
    .activity-quick-btn ul span.txt {
        font-size: 1.1rem;
    }

@media(max-width: 300px) {
    .activity-title {
        margin-top: -35px;
    }
    .activity-manage .media-left {
        margin-right: 0;
    }
    .activity-manage .media-left span {
        text-align: center;
    }
    .activity-manage {
        display: block;
    }
    .activity-manage .media-left {
        margin-right: 0;
    }
    .activity-quick-btn ul li a {
        display: block;
    }
    .activity-quick-btn ul span.pic {
        width: 50%;
        margin: 0 auto;
    }
}

/*---- method-text-block ------*/
.method-text-block img {
    max-width: 100%;
}

/*================================================================================
    activity3展場
================================================================================*/
.register-form-block .personalinfo_block, 
.register-form-block .personalinfo_block figure {
    position: relative;
    margin: 0 auto;
    width: fit-content;
}
.register-form-block .personalinfo_block label.cabinet .w-coins-pic {
    width: 150px !important;
    height: 150px !important;
    padding: 17px !important;
}
.register-form-block .personalinfo_block .btn-upload-pic {
    position: relative;
    margin-top: -40px;
    margin-bottom: 40px;
}
.register-form-block .personalinfo_block .btn-upload-pic .btn {
    padding: 7px 30px;
    border-color: #ea5848;
    color: #FFF;
    background: #ea5848;
    cursor: pointer;
    font-size: 1.2rem;
    -webkit-box-shadow: 3px 1px #b44033;
    -moz-box-shadow: 3px 1px #b44033;
    box-shadow: 3px 1px #b44033;
}
#pictureInput {
    display: block;
    margin: 0;
    text-align: center;
}
#pictureInput input {
    visibility: hidden;
    position: absolute;
    z-index: -1;
}
#phone-verifycode, #btn-send-phone-join {
    visibility: hidden;
    height: 0px;
    margin-bottom: 0;
    transition: 0.3s;
    opacity: 0;
}
#phone-verifycode.is-visible, #btn-send-phone-join.is-visible {
    visibility: visible;
    height: auto;
    margin-bottom: 1.5rem;
    opacity: 1;
}
#btn-send-phone-join {
    margin-bottom: 0 !important;
    padding: 0;
}
#btn-send-phone-join.is-visible {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem !important;
}
.form-control.error, .error ~ .iCheck-helper {
    border: 1px solid #e36868 !important;
    opacity: 0.5 !important;
}
label.error {
    color: #e36868;
}
#privacy_policy-error {
    position: absolute;
    white-space: nowrap;
    top: 21px;
}
#upload-error {
    display: none !important;
}



.activity3_title {
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 2rem;
}
.activity3_title div span {
    margin: 0 3px;
}
.activity3_title .text-green {
    color: #549589;
}
.activity3_title .text-red {
    color: #b9685f;
}
.activity3_title p {
    font-size: 1.7rem;
}

.intro-carousel-block {
    background: #FFF;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 20px;
}
.intro-box-list-box {
    padding-top: 45px;
    margin-top: 15px
}
.intro-box-list-box.owl-theme .owl-dots {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.intro-box-inner {
    position: relative;
    text-align: center;
}
.intro-box-inner p {
    margin-bottom: 5px;
}
.intro-box-inner p.txt-tip {
    color: #995444;
    background: #f1f0e0;
    padding: 14px 15px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 1.2rem;
}
.intro-box-inner p.txt-tip span {
    display: block;
    font-size: 1.1rem;
    margin-top: 10px
}
.intro-box-inner .text-red {
    color: #df3c3c;
}
.intro-box-inner .text-green {
    color: #3da12a;
}
.intro-box-inner a {
    margin-top: 20px;
}
.intro-box-inner .mark {
    display: inline-block;
    color: #003366;
    background: #fbfbd6;
    border: 2px solid #003366;
    border-radius: 30px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 5px 30px;
    margin-bottom: 15px;
}
.intro-box-inner .mark2 {
    /*position: absolute;
    top: -40px;
    left: -46px;
    width: 76px;
    height: 76px;
    border-radius: 100%;*/
}
.intro-box-inner h5 {
    color: #003366;
    font-size: 1.3rem;
    font-weight: 500;
}
.intro-box-inner img {
    width: 100% !important; 
    display: inline-block !important;
}

.intro-box-list .mark {
    margin-top: 30px;
    border: 0;
    background: #CCC;
    display: none;
}
.intro-box-list h5 {
    color: #a35c5c;
}
.intro-box-list h5 span {
    display: inline-block;
    color: #FFF;
    background: #a35c5c;
    margin-right: 5px;
    border-radius: 30px;
    padding: 0px 10px;
    font-size: 1.2rem;
}


/*================================================================================
    topic-activity-list-block
================================================================================*/
.subtitle-bar {
    color: #CC5D1E;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.topic-activity-list-inner {
    display: flex;
    flex-wrap: wrap;
}
.topic-activity-list {
    display: none;
    position: relative;
    width: 48%;
    margin: 1%;
    background: #FFF;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
}
.topic-activity-list:hover {
    background: #f6f1f1;
}
.topic-activity-list .pic {
    overflow: hidden;
}
.topic-activity-list .pic span {
    display: block;
    width: 100%;
    background: #f2f2f2;
    padding-top: 66.6%;
    background-size: cover;
    background-position: center center;
    transition: 0.3s;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.topic-activity-list a:hover > .pic span {
    transform: scale(1.05);
}
.topic-activity-list .txt {
    padding: 10px 15px;
}
.topic-activity-list .title {
    color: #000;
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.buttonToogle {
    margin: 20px 20px 40px 20px;
    text-align: center;
}
.buttonToogle .showMore {
    display: inline-block;
    background: #FFF;
    padding: 10px 50px;
    border: #8d8d8d 3px solid;
    border-radius: 5px;
    transition: 0.3s;
}
.buttonToogle .showMore:hover {
    color: #000;
    border-color: #000;
}
.creat-mygift-info-block {
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    background: #F1F1F1;
    border-radius: 15px;
    overflow: hidden;
}
.creat-mygift-info-block .banner-pic {
    margin-bottom: 40px;
}
.creat-mygift-info-block .banner-pic img {
    width: 100%;
    border-radius: 15px;
}
.creat-mygift-info-block h5 {
    font-size: 1.5rem;
    text-align: center;
}
.creat-mygift-info-block h6 {
    text-align: center;
    margin-bottom: 30px;
}
.creat-mygift-step-block {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
}
.mygift-step-list {
    width: 23%;
    margin: 1%;
    text-align: center;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 1px 2px 0 #E2E2E2;
    padding-bottom: 15px;
}
.mygift-step-list .mark {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: #FFF;
    background: #000;
    border-radius: 30px;
    margin-top: -12px;
    top: -8px;
    position: relative;
}
.mygift-step-list .pic {
    padding: 15px 30px;
}
.mygift-step-list .pic img {
    width: 100%;
}
.mygift-step-list .title {
    color: #000;
    font-size: 1.2rem;
    padding: 0 15px 10px 15px;
}
.mygift-step-list .title span {
    color: #9B9B9B;
    font-size: 1rem;
    display: block;
}
.btn-go-yt-info {
    display: inline-block;
    background: #FFF;
    border-radius: 30px;
    padding: 5px 10px;
    margin: 10px 0;
    color: #000;
}
.btn-go-yt-info img {
    margin-right: 7px;
}
.go-gift-link-block {
    padding: 30px;
}
.btn-go-gift {
    display: flex;
    align-items: center;
    background: #FFF;
    border-radius: 10px;
    padding: 5px 15px;
    max-width: 500px;
    margin: 0 auto 20px auto;
}
.btn-go-gift .txt {
    flex: 1;
    margin: 0 10px;
    font-size: 1.2rem;
}
.btn-go-gift i {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 1rem !important;
    font-weight: bold;
    color: #FFF;
}
.btn-go-gift:hover {
    transform: translate(2px, 3px);
}
.btn-go-gift-user {
    color: #D4646B;
    border: #D4646B 2px solid;
    box-shadow: 3px 4px #AF464C;
}
.btn-go-gift-user:hover {
    box-shadow: 1px 2px #AF464C;
}
.btn-go-gift-user i {
    background: #D4646B;
}
.btn-go-gift-store {
    color: #296B6E;
    border: #296B6E 2px solid;
    box-shadow: 3px 4px #296B6E;
}
.btn-go-gift-store:hover {
    color: #296B6E;
    box-shadow: 1px 2px #296B6E;
}
.btn-go-gift-store i {
    background: #296B6E;
}
.btn-go-create-store {
    display: flex;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 5px 20px;
    color: #FFF;
    background: #458C8F;
    border-radius: 30px;
}
.btn-go-create-store .txt {
    flex: 1; 
}
.btn-go-create-store i {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    line-height: 15px;
    text-align: center;
    font-size: 0.8rem !important;
    font-weight: bold;
    color: #458C8F;
    background: #FFF;
}
.btn-go-create-store:hover {
    color: #FFF;
    background: #3b7779;
}
.btn-go-create-store:hover i {
    transform: translateX(-5px);
}
@media (max-width: 767px) {
    .topic-activity-list {
        width: 96%;
        margin: 2%;
    }
    .creat-mygift-info-block {
        margin-left: -7px;
        margin-right: -7px;
        border-radius: 0;
    }
    .creat-mygift-info-block .banner-pic img {
        border-radius: 0;
    }
    .mygift-step-list {
        width: 46%;
        margin: 4% 2%
    }
    /*header*/
    .main-menu .left_personalinfo
}


/*================================================================================
    topic-activity-block
================================================================================*/
.topic-activity-block {
    margin-top: -2rem;
}
.topic-activity-banner {
    /*padding: 60px 15px;*/
    position: relative;
    margin: 0 -7px;
    background-repeat: no-repeat;
   /* background-size: cover;*/
    background-position: center 0;
}
.topic-activity-banner img {
    width: 100%;
}
.topic-activity-banner .txt-slogn {
    color: #000;
    text-align: center;
    font-size: 1.3rem;
    margin: 40px 0 60px 0;
}
.topic-activity-banner .txt-slogn.txt-w {
    color: #FFF;
}
.topic-activity-banner .banner-mobile {
    display: none;
}
.topic-activity-banner .btn-view-rule {
    position: absolute;
    right: 20px;
    bottom: 30px;
    width: 60%;
    font-size: 1.4rem;
    box-shadow: 1px 1px #d3d3d3;
}

/*------ activity-get-coin-block -------*/
.activity-get-coin-block {
    margin: 0 -7px;
    padding-bottom: 20px;
}
.topic-coins-list-block {
    position: relative;
    /*display: flex;
    justify-content: center;*/
    margin-top: -80px;
    text-align: center;
}
.topic-coins-list-block .coin-list {
    display: inline-block;
    text-align: center;
    margin: 20px 10px;
}
.topic-coins-list-block .coin-list .title {
    margin: 10px 0;
    color: #000000;
    font-size: 1.2rem;
}
.topic-coins-list-block .coin-list .btn-get-coin {
    display: inline-block;
    color: #4B847A;
    background: #FFF;
    border: #4B847A 3px solid;
    border-radius: 10px;
    padding: 5px 20px;
    font-size: 1.3rem;
    box-shadow: 3px 3px 0 #0a4d42;
}
.topic-coins-list-block .coin-list .btn-get-coin:hover {
    transform: translate(2px , 2px);
    box-shadow: 1px 1px 0 #0a4d42;
}
.topic-coins-list-block .coin-list.coin-list-w .btn-get-coin {
    border-color: #dd5041;
    box-shadow: 3px 3px 0 #81312b;
    color: #ea5848;
}
.topic-coins-list-block .coin-list.coin-list-w .btn-get-coin:hover {
    box-shadow: 1px 1px 0 #81312b;
}
.btn-activity-add-po {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #d14434;
    background: #f7a8a8;
    border-radius: 60px;
}

/*------ activity-article-block -------*/
.activity-article-block {
    padding: 50px 20px 30px 20px;
    margin: 0 -7px;
}
.activity-article-block .btn_more {
    color: #000;
    opacity: 0.3;
}

/*------ activity-store-info-block -------*/
.activity-store-info-block {
    padding: 50px 20px 30px 20px;
    margin: 0 -7px;
}
.activity-store-info-block .act-polist-media .pic {
    margin-bottom: 0;
}
.activity-store-info-block .act-polist-media .info-box {
    padding: 10px;
}
.activity-store-info-block .act-polist-media .branch-store-info-google dd {
    margin-bottom: 0;
    padding-top: 0;
}
.activity-store-info-block .act-polist-media .branch-store-info-google dt {
    margin-right: 5px;
    font-size: 1rem;
}
.activity-store-info-block .act-polist-media .branch-store-info-google dt img {
    width: 15px;
}

/*------ activity-get-info-block -------*/
.activity-get-info-block {
    /*margin: 0 -7px;*/
    padding: 50px 30px 20px 30px;
}
.tip-info-coin {
    position: relative;
    color: #FFF;
    border-radius: 30px;
}
.tip-info-coin span {
    display: block;
}
.tip-info-coin span.pic {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    z-index: 10;
}
.tip-info-coin span.pic.p-l {
    left: 0;
}
.tip-info-coin span.pic.p-r {
    right: 0;
}
.tip-info-coin span.pic img {
    width: 40px;
}
.tip-info-coin span.txt {
    padding: 5px 50px;
}
.tip-info-coin-m {
    background: #569F90;
}
.tip-info-coin-mw {
    background: #569f90; /* Old browsers */
    background: -moz-linear-gradient(left, #569f90 1%, #d15547 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #569f90 1%,#d15547 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #569f90 1%,#d15547 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#569f90', endColorstr='#d15547',GradientType=1 ); /* IE6-9 */
}
.tip-info-coin-w {
    background: #D15547;
}
.tip-info-coin-m span.txt {
    padding-right: 15px;
}
.tip-info-coin-w span.txt {
    padding-left: 15px;
}
.btn-interaction-area ul {
    padding: 0;
    margin: 0;
    text-align: center;
}
.btn-interaction-area li a {
    display: block;
    padding: 10px 0;
    color: #FFF3A7;
}
.btn-interaction-area li a .pic img {
    max-width: 100%;
}
.btn-interaction-area li.col-pic a .pic img {
    width: 48px;
}
.btn-interaction-area li a .txt {
    margin-left: 5px;
}
.btn-interaction-area li a .txt i.la {
    font-size: 1.1rem;
}
.btn-interaction-area li:first-child {
    /*border-bottom: rgb(255 255 255 / 30%) 2px solid;*/
}
.btn-interaction-area2 {
    text-align: center;
}

.line-keyword-block {
    margin: 20px 0;
    padding: 0 15px;
}
.line-keyword-block p {
    text-align: center;
    color: #000;
    font-size: 1.2rem;
}
.line-keyword-block .input-group {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}
.line-keyword-block .input-group input {
    padding: 10px;
    height: 35px;
    border-radius: 12px !important;
}
.line-keyword-block .input-group .btn {
    border-radius: 12px !important;
}

/*---- activity-guide-block ----*/
.activity-guide-block {
    margin: 0 -7px;
    padding-top: 20px;
}
.pic-title {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}
.pic-title img {
    max-width: 100%;
}
.activity-guide-block .pic-title {
    /*padding: 0 20px;*/
}
.activity-guide-pic img {
    max-width: 100%;
}
.activity-guide-pic .guide-pic-mobile {
    display: none;
}
.activity-guide-list {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    padding: 0 15px;
    margin-bottom: 50px;
}
.activity-guide-list:after {
    position: absolute;
    content: " ";
    left: 0;
    bottom: -20px;
    display: block;
    width: 100%;
    height: 3px;
    background: #FFF;
    opacity: 0.4;
    transform: rotate(5deg);
}
.activity-guide-list .mark {
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #000;
    padding: 3px 15px;
}
.activity-guide-list .mark1 {
    background: #AECDC1;
}
.activity-guide-list .mark2 {
    background: #FFF3A7;
}
.activity-guide-list .mark3 {
    background: #EB93B5;
}
.activity-guide-list .pic img {
    max-width: 100%;
}
@media (max-width: 768px) {
    .topic-activity-banner .banner-web, .activity-guide-pic .guide-pic-web {
        display: none;
    }
    .topic-activity-banner .banner-mobile, .activity-guide-pic .guide-pic-mobile {
        display: block;
    }
    .activity-guide-list .pic {
        display: block;
        float: right;
        margin-left: 15px;
    }
    .activity-guide-list:nth-child(2) .pic {
        float: left;
    }
}
@media (min-width: 768px) {
    .activity-guide-list-block {
        display: flex;
    }
    .activity-guide-list {
        width: 33.33%;
    }
}
.activity-guide-list .txt {
    display: block;
    color: #FFF;
    font-size: 1.2rem;
}
.tip-return-gift-block {
    text-align: center;
    margin-bottom: -30px;
}
.tip-return-gift-block img {
    max-width: 100%;
}

/*---- activity-method-block ----*/
.activity-method-block {
    position: relative;
    background: #FFF;
    border-radius: 20px;
    padding: 40px 20px 20px 20px;
    margin: 0 10px;
    border: #F0F0F0 1px solid;
    box-shadow: 0px 2px 2px 1px rgb(70 67 97 / 12%);
}
.activity-method-block .title span, 
.activity-gift-block .title span {
    display: inline-block;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
    color: #E55942;
    background: #FFF;
    border: #F0F0F0 1px solid;
    padding: 5px 15px;
    font-size: 1.2rem;
}
.activity-method-block .title span img, 
.activity-gift-block .title span img {
    width: 20px;
}
.activity-method-block .txt {
    margin-top: 5px;
}
.activity-method-block .txt span.title {
    color: #000;
}
.activity-method-block .txt span.desc {
    display: block;
    background: #fff6f6;
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
}

/*---- activity-gift-block ----*/
.activity-gift-block {
    background: #f3d7b3;
    position: relative;
    padding: 20px 20px 20px 20px;
    /*border-radius: 20px;
    margin: 0 10px 30px 10px;
    box-shadow: 0px 2px 2px 1px rgb(108 43 43 / 12%);*/
    margin: 0 -7px 0 -7px;
}
.activity-gift-block .title span {
    position: relative;
}
.activity-gift-block .title span img {
    position: relative;
    top: -3px;
}
.activity-gift-block .sub-title {
    text-align: center;
    color: #4A0E0E;
    font-size: 1.1rem;
    line-height: 2.2rem;
}
.activity-gift-block .sub-title span {
    color: #E55A42;
}
.gift-list-block {
    position: relative;
    max-width: 500px;
    margin: 20px auto;
    text-align: center;
}
.gift-list-block .gift-title {
    display: inline-flex;
    align-items: center;
    color: #E55942;
}
.gift-list-block .gift-title .icon {
    position: relative;
}
.gift-list-block .gift-title .txt {
    margin-left: -20px;
    padding: 5px 20px 5px 35px;
    border-radius: 30px;
    background: #FFF;
    font-size: 1.2rem;
    color: #63b3a1;
    border: #63b3a1 2px solid;
}
.gift-list-block .gift-title .txt.border-red {
    color: #E55942;
    border: #EA5848 2px solid;
}
.gift-list-block .gift-title-pic {
    margin-bottom: 15px;
}
.gift-list-block .gift-title-pic img {
    max-width: 100%;
}
.gift-list-block .gift-content {
    /*background: #FFEBEB;
    border-radius: 15px;
    padding: 40px 5px 10px 5px;*/
    max-width: 400px;
    margin: 0 auto;
    margin-top: -30px;
    background: rgb(255 255 255 / 40%);
    border-radius: 15px;
    padding: 50px 0px 20px 0px;
}
.gift-list-block .gift-content .gift-list {
    position: relative;
    margin-bottom: 15px;
    padding: 0 20px;
    padding-bottom: 15px;
    border-bottom: rgb(255 255 255 / 30%) 1px solid;
    /*width: 29.33%;
    margin: 2%;
    background: #FFF;
    border-radius: 15px;
    box-shadow: 0px 2px 2px 2px rgb(63 63 63 / 5%);*/
}
.gift-list-block .gift-content .gift-list .gift-list-content {
    display: block;
    display: flex;
    text-align: left;
}
.gift-list-block .gift-content .gift-list .gift-list-content > div {
    width: 50%;
}
.gift-list-block .gift-content .gift-list .pic {
    padding-right: 15px;
}
.gift-list-block .gift-content .gift-list .pic img {
    width: 100%;
    border-radius: 5px;
}
.gift-list-block .gift-content .gift-list .title {
    color: #000;
    margin: 5px 0;
    font-size: 1.2rem;
}
.gift-list-block .gift-content .gift-list .icon {
    display: flex;
    align-items: center;
}
.gift-list-block .gift-content .gift-list .icon .w-coins-pic, 
.gift-list-block .gift-content .gift-list .icon .m-coins-pic {
    margin-right: 5px;
}
.gift-list-pic {
    position: absolute;
    left: 0;
    bottom: 0;
}
.gift-list-pic img {
    width: 90px;
}
.btn-go-exchange {
    display: inline-block;
    color: #AC3F32;
}
.btn-go-exchange i.la {
    position: relative;
    top: 1px;
    font-size: 1.1rem;
}
@media (max-width: 768px) {
    /*.gift-list-block .gift-content .gift-list {
        padding: 5px 5px 43px 5px;
    }
    .gift-list-block .gift-content .gift-list .icon {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }*/
}
.activity-gift-block .txt-notice {
    color: #000;
    padding-top: 15px;
    margin-bottom: 0;
    text-align: center;
    clear: both;
}
.btn-txt-blue {
    color: #4A90E2;
    text-decoration: underline;
}
.btn-txt-blue:hover {
    color: #3977c0;
}
@media (min-width: 768px) {
    .gift-list-block .gift-content {
        
    }
    .gift-list-pic img {
        width: 130px;
    }
}
@media (max-width: 374px) {
    .gift-list-block .gift-title .txt {
        padding: 5px 10px 5px 25px;
    }
}
/*---------- coin-war-block -----------*/
.gift-title-txt {
    color: #996361;
    font-size: 1.4rem;
    margin: 25px 0;
}
.coin-total-block {
    border-radius: 15px;
    background: #e5b125;
    margin: 20px auto;
    text-align: center;
    max-width: 350px;
    padding: 0 10px 20px 10px;
}
.coin-total-block .title-bar {
    display: inline-flex;
    align-items: center;
    margin-top: -10px;
    margin-bottom: 10px;
}
.coin-total-block .title-bar .pic img {
    width: 60px;
}
.coin-total-block .title-bar .txt {
    color: #FFF;
    font-size: 1.3rem;
    margin-top: 10px;
    margin-left: 10px;
}
.coin-num-list ul {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.coin-num-list li {
    margin: 0 5px;
    color: #7f5e0a;
    background: #FFF;
    border-radius: 5px;
    font-size: 2.3rem;
    line-height: 2rem;
    padding: 10px;
    font-weight: bold;
}
.coin-war-block .gift-title .txt {
    border-color: #e5ab1a;
    color: #e5ab1a;
}
.coin-war-block .btn-go-exchange {
    color: #aa8533;
}
@media (max-width: 374px) {
    .coin-num-list li {
        margin: 0 3px;
        padding: 6px;
    }

}

/*---------- nav-round-block ----------*/
.topic-activity-banner .nav-round-block {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
    padding: 10px 0;
}
.nav-round-block .nav.nav-tabs {
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    overflow-y:hidden;
    flex-wrap: nowrap;
    padding: 0 5px;
}
.nav-round-block .nav.nav-tabs .nav-item {
    position: relative;
    margin: 0 3px;
}
.nav-round-block .nav.nav-tabs .nav-item .nav-link {
    opacity: 0.7;
    font-size: 1.1rem;
    padding: 0 10px;
    white-space: nowrap;
    background: #FFF;
    border-radius: 10px;
    height: 100%;
}
.nav-round-block .nav.nav-tabs .nav-item .nav-link span.txt2 {
    display: block;
    font-size: 0.8rem;
    margin-top: -5px;
    color: #898989;
}
.nav-round-block .nav.nav-tabs .nav-item .nav-link img {
    display: none;
}
.nav-round-block .nav.nav-tabs .nav-item .nav-link.active {
    background: #D4646B;
    opacity: 1;
    color: #ffffff;
    /*position: absolute;
    width: 100%;
    top: -5px;
    padding: 5px;*/
}
.nav-round-block .nav.nav-tabs .nav-item .nav-link.active span.txt2 {
    color: #f6d2d2;
}

/*---- activity-task-block ----*/
.btn-quick-task {
    position: fixed;
    bottom: 75px;
    right: 10px;
    z-index: 20;
    opacity: 0;
    transition: all 0.2s ease-out;
}
.btn-quick-task.show {
    opacity: 1;
}
.activity-task-block {
    margin: 0 -7px;
    padding: 20px;
}
.task-list-block {
    border-radius: 15px;
    margin: 20px 10px;
}
.task-list-block .media .icon .num {
    position: relative;
    top: -2px;
    font-size: 1rem;
    color: #a9a7a7;
}
.task-list-block .media {
    flex-wrap: wrap;
}
.task-list-block .media .store_pic img {
    width: 60px;
}
.task-list-block .media .media-right a.btn-outline-success {
    margin-right: 5px;
}
.task-reach-txt {
    width: 100%;
    text-align: center;
    background: #fff3ea;
    color: #cd8427;
    padding: 2px;
    border-radius: 30px;
    margin-top: 10px;
}
@media (max-width: 767px) {
    .task-list-block .media .media-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        margin-top: 10px;
    }
    .task-list-block .media .media-right a {
        flex: 1;
        margin: 0 5px;
    }
}

/*---- activity-sharetxt-block ----*/
.activity-sharetxt-block {
    position: relative;
    margin: 0 -7px;
    text-align: center;
    padding: 40px 20px 30px 20px;
}
.activity-sharetxt-block h5 {
    color: #347F89;
    font-size: 2rem;
    margin-bottom: 15px;
}
.activity-sharetxt-block .txt {
    font-size: 1.3rem;
    color: #000;
    line-height: 2.1rem;
    white-space: pre-line;
}
.activity-sharetxt-block .pic {
    text-align: right;
}
.activity-sharetxt-block .social-share-btn {
    margin: 30px 0 10px 0;
}
.activity-sharetxt-block .social-share-btn ul {
    display: inline-flex;
    margin: 0;
}
.activity-sharetxt-block .social-share-btn li {
    margin: 3px 7px;
}
@media (min-width: 768px) {
    .activity-sharetxt-block .pic {
        margin-top: -30px;
    }
    .activity-sharetxt-block .social-share-btn li {
        margin: 3px 10px;
    }
    .social-share-btn.social-share-btn-circle li.btn_pro_message {
        display: none;
    }
}
@media (max-width: 374px) {
    .activity-sharetxt-block .social-share-btn li {
        margin: 3px 4px;
    }
    .social-share-btn.social-share-btn-circle li a {
        width: 40px;
        height: 40px;
        line-height: 48px;
    }
    .social-share-btn.social-share-btn-circle .btn_pro_line img {
        width: 30px;
        margin-top: -12px;
    }
    .social-share-btn.social-share-btn-circle i.la {
        font-size: 2rem;
    }
}

/*---- activity-qatxt-block -----*/
.activity-qatxt-block {
    margin: 0 -7px;
    text-align: center;
    padding: 30px;
}
.activity-qatxt-block h5 {
    display: inline-block;
    font-size: 1.6rem;
    background: #FFBC5A;
    border-radius: 8px;
    padding: 5px 15px;
}
.activity-qatxt-block .txt {
    font-size: 1.3rem;
    color: #000;
    margin: 15px 0;
    line-height: 2.1rem;
    white-space: pre-line;
}
.activity-qatxt-block .txt span {
    display: block;
}
.activity-qatxt-block a {
    display: inline-block;
    background: #DA4A54;
    border: #000 4px solid;
    border-radius: 10px;
    padding: 5px 20px;
    color: #FFF;
    margin-top: 20px;
    font-size: 1.2rem;
    width: 80%;
    max-width: 300px;
}
.activity-qatxt-block a:hover {
    background: #c2333d;
}
.activity-qatxt-block a span {
    font-size: 1rem;
    margin-left: 5px;
}

/*---- tip-desc-block -----*/
.tip-desc-block {
    position: relative;
    background: #FFF;
    border-radius: 20px;
    padding: 40px 20px 20px 20px;
    margin: 30px 10px 60px 10px;
    border: #F0F0F0 1px solid;
    box-shadow: 0px 2px 2px 1px rgb(70 67 97 / 12%);
}
.tip-desc-block .title span {
    display: inline-block;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
    color: #FFF;
    background: #C8A063;
    border: #F0F0F0 1px solid;
    padding: 5px 15px;
    font-size: 1.2rem;
}
.tip-desc-block .title2 {
    color: #d5646b;
    font-size: 1.3rem;
    background: #fef5f5;
    padding: 10px 20px;
    margin: 0 -20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.tip-list {
    position: relative;
    display: flex;
    margin: 10px 0;
}
.tip-list .pic {
    width: 80%;
}
.tip-list .pic img {
    width: 100%;
}
.tip-list .txt {
    position: absolute;
    right: 0;
    bottom: 15%;
    width: 35%;
}
.tip-list:last-child .txt {
    bottom: 25%;
}

/**/
.activity-form-title {
    display: flex;
    margin: 0 -20px;
    background: #ffe5e5;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.activity-form-title .pic {
    background: rgb(255 255 255 / 40%);
    padding: 5px;
    border-radius: 10px;
    margin-right: 15px;
    align-self: baseline;
}
.activity-form-title .pic img {
    width: 90px;
}
.topic-coin-intro-block {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 15px;
    border: #ededed 1px solid;
    margin-top: 20px;
}
/*.topic-coin-intro-block.off {
    display: none;
}*/
.topic-coin-intro-block .media-left {
    margin-right: 25px;
    text-align: center;
}
.topic-coin-intro-block .media-right {
    max-width: 100%;
    overflow: hidden;
    flex: 1;
}
.intro-content-block {
}
.topic-coin-intro-slide-block {
    position: relative;
}
.topic-coin-intro-slide-block .topic-coin-intro-slide-list-block {
    text-align: center;
    display: flex;
    position: relative;
    padding-right: 50px;
    justify-content: space-around;
}
.topic-coin-intro-slide-block .pic {
    margin-bottom: 10px;
}
.topic-coin-intro-slide-block .pic img {
    width: 60px;
    border-radius: 10px;
}
.topic-coin-intro-slide-list + .topic-coin-intro-slide-list {
    margin-left: 10px;
}
.topic-coin-intro-slide-block .btn-view-more {
    display: block;
    position: absolute;
    right: -5px;
    top: 50%;
    font-size: 2rem;
    transform: translateY(-50%);
}
.topic-coin-intro-slide-block .btn-view-more i {
    color: #000;
}
.intro-content-block .txt-red {
    font-size: 1.2rem;
}
.topic-coin-intro-slide-block .swiper-button-next, 
.topic-coin-intro-slide-block .swiper-button-prev {
    background: transparent !important;
    box-shadow: none;
    width: 20px !important;
}
.topic-coin-intro-slide-block .swiper-button-prev {
    left: 0 !important;
}
.topic-coin-intro-slide-block .swiper-button-next {
    right: 0 !important;
}
.topic-coin-intro-slide-block .swiper-button-next:after, 
.topic-coin-intro-slide-block .swiper-button-prev:after {
    font-size: 1.3rem !important;
    font-weight: bold;
    color: #000;
}
#topic-coin-brand-list-modal {
    padding: 20px;
}
.topic-coin-brand-list-block ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 -8px;
}
.topic-coin-brand-list-block ul li {
    width: 25%;
    padding: 8px;
    margin-bottom: 10px;
    text-align: center;
}
.topic-coin-brand-list-block ul li .pic {
    max-width: 60px;
    display: inline-block;
}
.topic-coin-brand-list-block ul li .pic img {
    width: 100%;
    border-radius: 15px;
    border: #f2f2f2 1px solid;
}

@media (max-width: 768px) {
    .topic-coin-intro-block {
        flex-wrap: wrap;
        justify-content: center;
    }
    .topic-coin-intro-block .media-left {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .topic-coin-intro-block .media-right {
        flex: 0 0 100%;
    }
    .topic-coin-intro-slide-list {
        /*display: none;*/
    }
    .topic-coin-intro-slide-list:nth-child(1), 
    .topic-coin-intro-slide-list:nth-child(2) {
        display: block;
    }
}

/*control*/
.control {
  display: inline-block;
  position: relative;
  /*width: 20px;*/
  padding-left: 20px;
  /*height: 20px;*/
  cursor: pointer;
  /*font-size: 18px;*/
  margin-bottom: 0;
}

table tr>td.text-right .control {
  margin-right: 10px;
}

.control > input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}
.control .txt {
  display: inline-block;
  margin-left: 5px;
  margin-top: 2px;
}
.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  border: 2px solid #ccc;
  background: transparent; }

.control--radio .control__indicator {
  border-radius: 50%; }
.control--radio + .control--radio {
  margin-left: 15px !important;
}
.control:hover > input ~ .control__indicator,
.control > input:focus ~ .control__indicator {
  border: 2px solid #cc4f6d; }

.control > input:checked ~ .control__indicator {
  border: 2px solid #cc4f6d;
  background: #cc4f6d; }

.control > input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
  border: 2px solid #ccc; }

.control__indicator:after {
  font-family: 'icomoon';
  content: '\e5ca';
  position: absolute;
  display: none;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M21.546 5.111a1.5 1.5 0 0 1 0 2.121L10.303 18.475a1.6 1.6 0 0 1-2.263 0L2.454 12.89a1.5 1.5 0 1 1 2.121-2.121l4.596 4.596L19.424 5.111a1.5 1.5 0 0 1 2.122 0'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.control > input:checked ~ .control__indicator:after {
  display: block;
  color: #fff; }

.control .control__indicator:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -52%);
  -ms-transform: translate(-50%, -52%);
  transform: translate(-50%, -52%); }

.control > input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b; }

.control > input:disabled:checked ~ .control__indicator {
  background-color: #007bff;
  opacity: .2;
  border: 2px solid #007bff; }

.on-must-hide .txt-must {
  display: none;
}

.control .bootstrap-touchspin .btn.disabled, 
.control .bootstrap-touchspin .btn:disabled {
    /*background-color: #ECEFF1;
    border-color: #eaeaea;*/
}
.control .bootstrap-touchspin input.disabled, 
.control .bootstrap-touchspin input:disabled {
    color: #CCC;
}
.filter-fancybox .friend-list-block .media .control {
    padding-left: 30px;
}
.filter-fancybox .friend-list-block .media .control .pic {
    align-self: center;
}
.filter-fancybox .friend-list-block .media.active .control .media-left.pic:before {
    display: none;
}
.filter-fancybox .friend-list-block .media .control__indicator {
    top: 50%;
    transform: translateY(-50%);
}

/*.control > input:checked ~ .media-right input, 
.control > input:checked ~ .media-right button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #ECEFF1;
}*/

/*---- task-fancybox-block ----*/
.task-fancybox-block {
    padding: 0;
}
@media (min-width: 768px) {
    .task-fancybox-block {
        width: 450px;
    }
}
.task-info-top {
    text-align: center;
    padding: 20px;
}
.task-info-top .icon-message {
    display: inline-block;
}
.task-info-top .txt {
    background: #fff6f6;
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
}
.task-title {
    padding: 0 20px;
    margin-top: 10px;
}
.task-info-top .task-reach-txt {
    display: inline-block;
    width: auto;
    background: #db8748;
    color: #ffffff;
    padding: 2px 15px;
    margin: 10px auto 0 auto;
}
.task-shop-list {
    margin-bottom: 20px;
}
.task-shop-list .media {
    border: #F0F0F0 1px solid;
    box-shadow: 0px 2px 10px 1px rgb(0 0 0 / 10%);
    margin: 10px 20px;
    padding: 10px;
}
.task-shop-list .reach-num {
    background: #fff3ea;
    color: #cd8427;
    font-size: 1.2rem;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
.task-fancybox-block .intro-carousel-block {
    border: #F0F0F0 1px solid;
    box-shadow: 0px 2px 2px 1px rgb(70 67 97 / 12%);
    padding: 15px;
    margin: 0 20px 20px 20px;
}
.task-fancybox-block .intro-carousel-block .mark {
    margin-top: 15px;
}

/*---- tip-notice-block -----*/
.tip-notice-block {
    position: absolute;
    bottom: 30px;
    left: 30%;
}
.tip-notice-box {
    background: #FFF;
    border: #b28247 3px solid;
    border-radius: 15px;
    padding: 10px;
}
/*.tip-notice-box:before {
    display: block;
    content: " ";
    position: absolute;
    bottom: -10px;
    left: -45px;
    width: 38px;
    height: 60px;
    background: url(../images/tip_arrow_brown.png) no-repeat;
}*/

@media (min-width: 768px) {
    .topic-activity-block {
        margin-top: -32px
    }
    .task-list-block {
        margin: 20px 10px !important;
    }
    .tip-list-block {
        display: flex;
    }
    .tip-notice-block {
        display: none;
    }
}


/*================================================================================
    slot
================================================================================*/
@media(min-width:600px) {
    #slot-box {
        max-width: 500px;
    }
}
#slot-box .fancybox-close-small {
    top: -5px;
    right: 20px;
}
#slot-box .fancybox-close-small {
    display: none;
}
#slot-box .slotBox .fancybox-close-small {
    display: block;
}
.slot-label img {
    max-width: 300px;
    width: 100%;
}
.slot-top-txt {
    position:relative;
    background-color:#f6c803;
    padding:18px 18px 0 18px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 0 35px;
}
.slot-top-txt span.txt {
    display: block;
    color: #FFF;
    font-size: 1.3rem;
    text-align: center;
    padding:15px;
    background-color: #f29f05;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.slot-num-box .slot-top-txt span.txt {
    display: flex;
    align-items: center;
}
#playBtn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: block;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: -30px;
}
.slot-top-txt span.txt .pic {
    margin-right: 10px;
}
.slot-top-txt span.txt img {
    border-radius: 10px;
    height: 70px;
}
.slot-top-txt span.txt .txt-title {
    text-align: center;
    flex: 1;
    font-size: 1.5rem;
}
.slot-top-txt:before, .slot-top-txt:after {
    position: absolute;
    top: 10%;
    display: block;
    content: " ";
    width: 60px;
    height: 57px;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}
.slot-top-txt:before {
    left: -50px;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/activity4/slot_wing_l.png);
}
.slot-top-txt:after {
    right: -50px;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/activity4/slot_wing_r.png);
}
.slot-top-txt .slot-dot-h {
    top: 5px;
}
.slot-bar-block {
    position: absolute;
    right: -33px;
    top: 40%;
}
.tip-pullme {
    position: absolute;
    top: -150px;
    left: 10px;
    width: 50px;
    height: 53px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/activity4/slot_pullme.png) no-repeat;
}
.slot-bar-top {
    position: absolute;
    top: -90px;
    cursor: pointer;
}
.slot-bar-top:active {
    top: -80px;
}
.slot-bar-top:active .m-coins-pic, 
.slot-bar-top:active .w-coins-pic {
    transform: translateY(10px);
}
.slot-bar-top .m-coins-pic, 
.slot-bar-top .w-coins-pic {
    position: relative;
    margin-bottom: -30px;
}
.slot-bar-pole {
    width: 38px;
    height: 82px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/activity4/slot_bar_2.png) no-repeat;
}
.slot-bar-bot {
    width: 34px;
    height: 72px;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/activity4/slot_bar_1.png) no-repeat;
}
.slotBox{
    position: relative;
    max-width:500px;
    display: block;
    margin:0 auto;
    padding:5px 15px 0 15px;
}
.slot-dot span {
    height: 18px;
}
.slot-dot span:before {
    display:inline-block;
    content: " ";
    width: 10px;
    height: 10px;
    background: #FA8000;
    border-radius: 15px;
    box-shadow: 2px 2px 0 rgb(235 197 36);
}
.slot-dot span:nth-child(2n):before {
    background: #F8F7F8;
}
.dot-reverse span:before {
    background: #F8F7F8;
}
.dot-reverse span:nth-child(2n):before {
    background: #FA8000;
}
.slot-dot {
    position: absolute;
    display: flex;
    justify-content: space-between;
}
.slot-dot-v {
    left: 0;
    width: 100%;
    padding: 0 10px;
}
.slot-dot-h {
    top: 0;
    flex-direction: column;
    height: 100%;
    width: 18px;
    padding: 0;
    text-align: center;
}
.slot-dot-v.slot-dot-top {
    top: 0;
}
.slot-dot-v.slot-dot-bot {
    bottom: 0;
}
.slot-dot-h.slot-dot-left {
    left: 0;
}
.slot-dot-h.slot-dot-right {
    right: 0;
}
.slot-dot-h span:first-child, .slot-dot-h span:last-child {
    opacity: 0;
}


.slotBox .slot-top-area{
    position: relative;
    z-index: 5;
    background-color:#FECD00;
    margin:0 20px;
    padding:18px;
    box-sizing: border-box;
    /*box-shadow: 0 -10px 0 #fceda8,0 2px 0 #b07300;*/
    border-radius:15px;
}

.slotBox .slot-top-area .dotBox{
    width:100%;
    padding:3px 0;
    margin:0 auto;
}
.slotBox .slot-top-area .dotBox img{
    width:100%;
    display: block;
    margin:0 auto;
}
.slotBox .slot-top-area .wheelArea{
    display: flex;
    flex-wrap: wrap;
    margin:0 auto;
    padding:5px;
    background-color: #f29f05;
    border-radius:10px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}
.slotwrapper > div, 
.slotBox .slot-top-area .wheelArea .wheelbox {
    background-color: #fff;
    overflow: hidden;
    margin: 0;
    flex: 1;
    height: 65px;
    padding: 0 5px;
    margin: 1%;
    position: relative;
    font: normal 60px / 69px Arial;
    color: #333;
    vertical-align: middle;
    border-radius: 15px;
    box-shadow: 0 5px 0 #D38A09;
} 
.slotBox .slot-top-area .wheelArea .wheelbox li {
    line-height: 1.1 !important;
}
.slotBox .slot-top-area .wheelArea .wheel0box,
.slotBox .slot-top-area .wheelArea .wheel1box,
.slotBox .slot-top-area .wheelArea .wheel2box{
    background-color:#fff;
    overflow:hidden;
    margin:0;
    width: 31.33%;
    height: 150px;
    padding: 0 5px;
    margin: 1%;
    position: relative;
    font:normal 130px/130px Arial;
    color:#333;
    vertical-align: middle;
    border-radius: 15px; 
    box-shadow: 0 5px 0 #D38A09;
}
.slotBox .slot-top-area .wheelArea .wheel0box img, 
.slotBox .slot-top-area .wheelArea .wheel1box img, 
.slotBox .slot-top-area .wheelArea .wheel2box img {
    width: 100%;
    border-radius: 100px; 
}
.slotBox .slot-top-area .wheelArea .wheel0box{
    /*border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;*/
}
.slotBox .slot-top-area .wheelArea .wheel2box{
    /*border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;*/
}
.slotBox .slot-top-area .wheelArea .wheel0box .w-coins-pic, 
.slotBox .slot-top-area .wheelArea .wheel1box .w-coins-pic,
.slotBox .slot-top-area .wheelArea .wheel2box .w-coins-pic, 
.slotBox .slot-top-area .wheelArea .wheel0box .m-coins-pic, 
.slotBox .slot-top-area .wheelArea .wheel1box .m-coins-pic,
.slotBox .slot-top-area .wheelArea .wheel2box .m-coins-pic {
    width: 100% !important;
    height: auto !important;
    line-height: 0;
    display: block;
    padding: 11px;
    flex: 1;
    margin: 0 4px;
}
.slotBox .slot-top-area .wheelArea .wheel0box  .slotMachineContainer,
.slotBox .slot-top-area .wheelArea .wheel1box  .slotMachineContainer {
    width:100%;
}

.slotBox .slot-top-area .wheelArea .wheel0box .slotMachineContainer div,
.slotBox .slot-top-area .wheelArea .wheel1box .slotMachineContainer div,
.slotBox .slot-top-area .wheelArea .wheel2box .slotMachineContainer div, 
.slotBox .slot-top-area .wheelArea .wheel_list {
    height:130px;
    display: block;
}
.slotBox .slot-top-area .wheelArea .wheel_list {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.slotBox .slot-top-area .wheelArea .wheel0box  .slotMachineContainer div,
.slotBox .slot-top-area .wheelArea .wheel1box  .slotMachineContainer div,
.slotBox .slot-top-area .wheelArea .wheel2box  .slotMachineContainer div {
    /*height:150px;
    display: block;*/
}
.slot-coin-box #playBtn {
    top: -87px;
}
.slot-coin-box .slot-top-txt span.txt .text-danger {
    color: #a90c0c !important;
}
.givebtnArea {
    display: flex;
    width: 100%;
    margin: 15px 0;
}
.givebtnArea.on {
    
}
.givebtnArea a {
    display: block;
    width: 31.33%;
    margin: 0 1%;
    padding: 10px 0;
    text-align: center;
    font-size: 1.2rem;
    color: #FFF;
    background: #EB671C;
    border-radius: 30px;
    box-shadow: 3px 3px 0 #DE5309;
}
.givebtnArea a:hover {
    transform: translate(2px,2px);
    box-shadow: 1px 1px 0 #DE5309;
}
.givebtnArea a.off {
    pointer-events:none;
    color: #fcd7c3;
    cursor:default;
}
.slotBox .slot-mid-area {
    width:100%;
    max-width:980px;
    display: block;
    margin:0 auto;
}
.slotBox .slot-bottom-area {
    display: block;
    margin: -70px auto 0 auto;
    position: relative;
    background: #EFA000;
    border-radius: 40px;
    padding: 90px 20px 20px 20px;
    text-align: center;
}
.slotBox .slot-bottom-area span {
    display: inline-block;
    color: #FFF;
    background: #CE8505;
    font-size: 1.3rem;
    padding: 5px 30px;
    border-radius: 30px;
}
.slot-content-area {
    background: #f8f1e8;
    /*background: #F9E3C5;*/
    border-radius: 20px;
    margin-top: -60px;
    padding: 60px 20px 20px 20px;
    /*box-shadow: 5px 5px 0 #C4A283;*/
    box-shadow: 5px 5px 0 #c29e7c;
}
.slot-content-area p {
    text-align: center;
    font-size: 1.2rem;
    color: #000;
}
.slot-content-area p span {
    color: #E73828;
    font-size: 1.4rem;
}
.slot-content-txt {
    padding: 20px;
}
.slot-content-txt p {
    margin: 15px 0 20px 0;
}
.slotwrapper {
    overflow: hidden;
    display: flex;
    width: 100%;
  }
.slotwrapper ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
.slotwrapper ul {
    /*width: 200px;
    height:200px;
    font-size: 200px;
    line-height: 200px;*/
    text-align: center;
}
.or-line {
    position: relative;
    text-align: center;
}
.or-line:before {
    position: absolute;
    top: 50%;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 2px;
    background: #CE8505;
}
.or-line span {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50px;
    font-size: 1.4rem;
    color: #FFF;
    background: #CE8505;
}
.other-give-btn a {
    position: relative;
    display: block;
    color: #FFF;
    font-size: 1.5rem;
    background: #EB671C;
    padding: 7px 55px 7px 15px;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 5px 5px 0 #DE5309;
}
.other-give-btn a:hover {
    transform: translate(3px,3px);
    box-shadow: 2px 2px 0 #DE5309;
}
.other-give-btn a img {
    margin-right: 10px;
}
.other-give-btn a:after {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 40px;
    font-size: 1.7rem;
    text-align: center;
    color: #FFF;
    content: "\f112";
    font-family: 'LineAwesome';
    background: #DE5309;
}
.return-gift-box {
    border: #DDC699 3px dotted;
    padding: 20px;
    border-radius: 15px;
    background: #fdf5e6;
}
.return-gift-box img {
    max-width: 100%;
}
.return-gift-list {
    display: flex;
    border-radius: 15px;
    padding: 5px 10px;
    background: #f6e7d2;
}
.return-gift-list span {
    display: block;
    padding: 10px;
}
.return-gift-list span img {
    width: 100%;
}
.return-gift-box .tip-txt {
    color: #A05F5F;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 0;
}
.award-num-txt-block {
  width: 100%;
  color: #FFF;
  text-align: center;
  margin-top: 5px;
}
.award-num-txt-block h5, 
.award-num-txt-block h4 {
    color: #FFF !important;
}
.award-num-txt-block h4 span {
  color: #ca4f6d;
  font-size: 2.1rem;
}
.award-user-list-block {
  background: #FFF;
  border-radius: 10px;
  margin: 10px 5px;
  border: #ca4f6d 1px solid;
  overflow: hidden;
  width: 100%;
}
.award-user-list-block h4 {
  color: #FFF;
  font-size: 1.1rem;
  padding: 7px 15px;
  background: #ca4f6d;
}
.award-user-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  overflow: auto;
  height: 140px;
  width: 100%;
}
.award-user-list > div {
  width: 25%;
  padding: 0 8px;
  margin-bottom: 15px;
}
.award-user-list .w-coins-pic {
  width: 100%;
  height: auto;
}
.award-user-list > div .name {
  color: #ca4f6d;
  margin-top: 5px;
  display: block;
}
.award-user-list img {
  width: 100%;
  border-radius: 100%; 
}

.award-user-show-block {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50% , -50%);
    transition: 0.5s;
    z-index: -1;
    opacity: 0;
}
.award-user-show-block.on {
    top: 50%;
    z-index: 10;
    opacity: 1;
}
.award-user-show-block.off {
    top: 60%;
    opacity: 0;
    transition: 1s;
}

/*------ topic-get-success-box -------*/
.topic-get-success-box {
   
}
@media (min-width: 200px) {
    .topic-get-success-box {
        max-width: 250px;
        min-width: 200px;
    }
}
@media (min-width: 375px) {
    .topic-get-success-box {
        min-width: 300px;
        max-width: 340px;
    }
}
@media (min-width: 376px) {
    .topic-get-success-box {
        min-width: 300px;
        max-width: 350px;
    }
}
.topic-get-success-box .get-coin-area {
    text-align: center;
    margin-top: -90px;
    margin-bottom: 20px;
}
.topic-get-success-box .slot-content-txt {
    padding: 0;
}
.topic-get-success-box .slot-content-txt .title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.topic-get-success-box .slot-content-txt .title-bar i {
    color: #25be13;
    font-size: 2.2rem;
    margin-right: 10px;
}
.topic-get-success-box .slot-content-txt .title-bar-red i {
    color: #25be13;
    font-size: 2rem;
    margin-right: 5px;
    position: relative;
    top: 5px;
}
@media (max-width: 374px) {
    .topic-get-success-box .slot-content-txt .title-bar {
        font-size: 0.8rem;
    }
    .topic-get-success-box .slot-content-txt .title-bar-red {
        font-size: 1rem;
    }
    .topic-get-success-box .slot-content-txt .title-bar-red i {
        font-size: 1.4rem;
        margin-right: 0;
    }
    .follow-info-list-bar h3.title-bar .icon.icon-check-circle {
        width: 23px;
        height: 23px;
    }
    .follow-info-list .media-right .coin-s-30 {
        margin-left: 5px !important;
    }
}
.topic-get-success-box .slot-content-txt p {
    color: #787878;
}
.topic-get-success-box .slot-content-txt p.card-subtitle > span {
    background-color: #f9f1e8;
    font-size: 0.9rem;
    color: #9e9e9e;
}
.topic-get-success-box .slot-content-txt p.card-subtitle > span .w-coins-pic {
    margin-bottom: -17px;
    top: -2px;
    position: relative;
    padding: 3px 4px !important;
}
.topic-get-success-box .slot-content-area {
    margin-top: 70px;
    padding: 20px;
}
.topic-get-success-box .other-give-btn {
    /*background: #FFF;
    border-radius: 15px;
    padding: 15px;*/
}
.topic-get-success-box .return-gift-box {
    margin: 0;
}
.topic-get-success-box .fancybox-close-small {
    top: 55px;
}

/*-- get-privilege-modal --*/
.topic-get-success-box .womo-gift-list {
    justify-content: center;
}
.topic-get-success-box .womo-gift-list .media {
    width: 58%;
    white-space: wrap !important;
}
.topic-get-success-box .womo-gift-list.two-media .media {
    width: 48%;
}
.topic-get-success-box .privilege-list {
    border-radius: 10px;
}
.follow-info, .no-follow-info.off {
    display: none;
}
.follow-info.on {
    display: block;
}
.title-bar2 {
    color: #cd506e;
    text-align: center;
}
.box-title-bar {
    width: 107%;
    color: #cd506e;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: #f9f1e8 1px solid;
    margin: 0 -10px 
}
.bonus-coins-block .box-title-bar {
    border-color: #f7dede;
}
.follow-info-gift-tip {
    background: #fff8f8;
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    border: #f1f2f1 1px solid;
}
.follow-info-gift-tip h5 {
    color: #D4762B;
    position: relative;
    margin-bottom: 0;
    font-size: 1.2rem;
}
.follow-info-gift-tip h5 .btn-accordion {
    color: #FFF;
    top: 0px;
    right: 0;
    font-size: 1rem;
    background: #d4762c;
    border-radius: 30px;
    padding: 2px;
}
.follow-info-gift-tip .user-detail-desc {
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 0;
    text-align: left;
    text-align:justify;
    /*line-height: 1rem;
    white-space: pre-line;*/
}
.follow-info-gift-tip .user-detail-desc p:last-child {
    margin-bottom: 0;
}
.follow-info-gift-tip .txt-notice {
    color: #b1aaaa;
}
.follow-info-gift-tip .txt-notice2 {
    font-size: 1.1rem;
    display: inline-block;
    background: #ececec;
    padding: 5px 10px;
    margin: 5px 0 5px -5px;
}
.follow-info-gift-tip p {
    margin-bottom: 5px;
}
.follow-info-gift-tip p .txt-tip {
    color: #d5646b;
    text-decoration: underline;
}
.txt-green {
    color: #309e8a !important;
}
.follow-info-gift-tip .user-detail-desc h5 {
    margin-bottom: 15px;
}
.follow-info-gift-tip .btn {
    color: #FFF;
    background: #D4762B;
    margin: 15px 0;
    border-radius: 8px;
    padding: 10px 30px;
}
.follow-info-gift-tip .btn:hover {
    opacity: 0.8;
}
.follow-info-gift-tip.active {
    background: #f4f6f5;
}
.follow-info-gift-tip.active h5 {
    color: #309e8a;
}
.follow-info-gift-tip.active .btn, 
.follow-info-gift-tip.active h5 .btn-accordion {
    background: #309e8a;
}
.follow-info-gift-tip.no-active {
    background: #fbf6f6;
}
.follow-info-gift-tip.no-active h5 {
    color: #d4646b;
}
.follow-info-gift-tip.no-active .btn, 
.follow-info-gift-tip.no-active h5 .btn-accordion {
    background: #d4646b;
}
.follow-info-list {
    margin-bottom: 20px;
    border: 0 !important;
    flex-wrap: wrap;
}
.follow-info-list-bg-box {
    background: #FFF;
    padding: 10px;
    border-radius: 10px;
}
.follow-info-list-bar {
    display: flex;
    align-items: center;
}
.follow-info-list-bar h3.title-bar {
    flex: 1;
}
.follow-info-list-bar h3.title-bar .icon {
    flex: none;
    margin-right: 10px;
    align-self: center;
    /*font-size: 1.3rem;*/
    font-size: 2.5rem;
}
.follow-info-list-bar h3.title-bar .icon img {
    width: 36px;
}
.conditions-bar {
    padding: 0 10px;
    margin-top: 20px;
    border-radius: 10px;
}
.conditions-bar-green {
    background: #ecf6ec;
    border: #b9ddb3 1px solid;
}
.conditions-bar-red {
    background: #f6ecec;
    border: #ddb3b3 1px solid;
}
.conditions-bar h3.title-bar {
    margin: 5px 0 !important;
}
.follow-info-list .media-left {
    flex: 1;
    margin-right: 15px;
    max-width: 122px;
    min-width: 65px;
    position: relative;
}
.follow-info-list .media-left.img-90 {
    max-width: 90px;
}
.follow-info-list .media-left img {
    width: 100%;
    border-radius: 7px;
}
.follow-info-list .media-left .off-info {
    height: 100%;
    overflow: hidden;
    border-radius: 7px;
}
.follow-info-list .media-left .off-info img {
    width: 45px !important;
}
.follow-info-list .media-right {
    align-self: center;
    flex: 1;
}
.follow-info-list .media-right .pic {
    margin-bottom: 10px;
}
.follow-info-list .media-right .pic, 
.follow-info-list .media-right .pic a {
    font-size: 1.2rem;
    color: #309e8a;
    text-decoration: underline;
    display: inline-flex;
}
.follow-info-list .media-right .pic img {
    width: 23px;
    height: 23px;
    margin-right: 5px;
    border: #e4e4e4 1px solid;
}
.follow-info-list .media-right h3 {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    margin-top: 10px;
    margin-right: 15px;
    justify-content: flex-start !important;
}
.follow-info-list .coin-num {
    display: flex;
    align-items: center;
}
.exchange-related-gift-block {
    width: 100%;
    max-width: 400px; 
    margin: 0 auto;
    background: #f4f5fa;
    border-bottom-right-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
}
.follow-info-list2 {
    margin-bottom: 10px;
    padding: 0;
}
.follow-info-list2 > a, 
.follow-info-list2 > label {
    position: relative;
    display: flex;
    padding: 10px;
    flex: 1;
}
.follow-info-list2 .btn.btn-go {
    padding: 5px 6px;
    align-self: center;
    margin-top: 0;
    margin-left: 5px;
}
.follow-info-list2 > label {
    flex: 1;
    border-radius: 10px;
    border: #FFF 1px solid;
}
.follow-info-list2 input.radio-related-exchange-gift {
    visibility: hidden;
    position: absolute;
    z-index: -1;
}
.follow-info-list2 label:before {
    align-self: center;
    margin-right: 5px;
    display: block;
    top: -7px;
    left: -7px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 30px;
    background: #CCC;
    color: #fff;
    font-family: feather !important;
    content: "\e926";
    z-index: 100;
}
.follow-info-list2 .radio-related-exchange-gift:checked ~ label {
    border: #e1bbc4 1px solid;
    background-color: #fff5f8;
}
.follow-info-list2 .radio-related-exchange-gift:disabled ~ label {
    background: #e7e7e7;
}
.follow-info-list2 .radio-related-exchange-gift:checked ~ label:before {
    background: #ca4f6d;
}
.follow-info-list2 .media-right h3 {
    font-size: 1.1rem;
    margin-top: 0;
}
.follow-info-list2 .media-right .icon {
    flex: initial !important;
}
@media (max-width: 375px) {
    .follow-info-list .media-right h3 {
        font-size: 0.9rem;
    }
}
.follow-info-list .media-right h3 + h3 {
    margin-bottom: 0;
}
.follow-info-list .media-right .btn {
    border-radius: 7px;
    /*border: 0;*/
}
.follow-info-list .coin-info {
    display: flex;
    align-items: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 30px;
    padding: 3px;
    width: 100%;
    margin-top: 10px;
}
.follow-info-list .coin-info-on {
    border-color: #61ab9a;
    background: #f0fffb;
}
.follow-info-list .coin-info-off {
    border-color: #d4646b;
    background: #f4e4e5;
}
.follow-info-list .coin-info .icon {
    flex: 1;
    font-size: 1.2rem;
    align-self: flex-end;
    margin-left: 10px;
}
.icon-check-circle {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-size: 100%; 
}
.icon-check-circle {
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_uncheck_circle_red.svg);
}
.active .icon-check-circle {
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_check_circle_green.svg);
}
.follow-info-list .media-right .w-coins-pic {
    width: 45px;
    height: 45px;
    padding: 6px;
    margin-right: 10px;
}
.follow-info-list .media-right .icon {
    font-size: 1rem;
    flex: 1;
    align-self: flex-end;
}
.follow-info-list .media-right .coin-s-30 {
    
}
.follow-info-list .coin-info .btn {
    border-radius: 30px;
    margin-top: 0;
    width: 55px;
    padding: 0.5rem 0rem;
    margin-left: 5px;
}
.title-bar-red {
    color: #C8506D;
    font-size: 1.3rem;
    text-align: center;
}
.txt-triple-getcoin {
    margin-top: 20px;
    margin-bottom: -30px;
    position: relative;
    z-index: -1;
}
.txt-triple-getcoin img {
    width: 100%;
    opacity: 0.3;
}
.no-follow-slogn {
    font-size: 1.8rem;
    text-align: center;
    color: #FFF;
    position: absolute;
    left: 0;
    top: -120px;
    width: 100%;
    line-height: 3.5rem;
}

.get-gift-modal-fancybox .fancybox-close-small {
    top: 135px;
}

/*---- select-shop-privilege-list-block ----*/
.select-shop-privilege-list-block .search-bar {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 0;
    align-items: stretch;
}
.select-shop-privilege-list-block .search-bar fieldset, 
.select-shop-privilege-list-block .search-bar .btn-filter {
    
}
.select-shop-privilege-list-block .search-bar fieldset {
    flex: 1;
    background: #FFF;
    border-radius: 5px;
    border-bottom: 3px solid #eeeff6;
}
.select-shop-privilege-list-block .search-bar .btn-filter {
    background: #FFF;
    border-radius: 5px;
    border-left: 0;
    margin-left: 10px;
    border-bottom: 3px solid #eeeff6;
    font-size: 1rem;
    display: flex;
    align-items: center;
}
.select-shop-privilege-list-block .search-bar .btn-filter i {
    font-size: 1.3rem;
    margin-right: 5px;
}
.select-shop-privilege-list-block .store-privilege-list .iradio_square-red {
    background-color: #d4d0c9;
    border-radius: 22px;
}
.store-privilege-list {
    position: relative;
    background: #FFF;
    border-radius: 10px;
    border: #FFF 2px solid !important;
    transition: 0.3s;
    padding: 0 !important;
}
.store-privilege-list.oncheck {
    border: #d54e21 2px solid !important;
}
.store-privilege-list label {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 15px;
    width: 100%;
}
.store-privilege-list .media-left {
    max-width: 200px;
    border-radius: 10px;
    overflow: hidden;
    border: #f2f2f2 1px solid;
    padding-right: 0 !important;
}
.store-privilege-list .media-right {
    align-self: flex-start;
    padding-left: 0 !important;
}
.store-privilege-list .radio-input {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 20;
}
.store-privilege-list .shop-offline-info-status-list {
    flex: 0 0 100%;
    margin: 15px 0;
}
.store-privilege-list .media-info {
    display: flex;
    width: 100%;
    align-items: flex-end;
}
.store-privilege-list .media-info .date {
    flex: 1;
    color: #000;
}
.store-privilege-list .media-info .date a {
    margin-left: 10px;
    color: #a8a8a8;
}
.store-privilege-list .media-info .distance {
    color: #72B7A8;
    font-size: 1.2rem;
}
.store-privilege-list.off .off-info, 
.store-privilege-list.disabled_cover .off-info {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.store-privilege-list.off .radio-input, 
 .store-privilege-list.disabled_cover .radio-input {
    display: none;
}
.store-privilege-list.media.disabled_cover::before {
    display: none;
}
.btn-radio-select-bonus-block label {
    display: block;
    background-color: #FFF;
    border: #CCC 1px solid;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-left: 36px;
    color: #000;
    font-size: 1.1rem;
}
.btn-radio-select-bonus-block label .control__indicator {
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    background-color: #f2f2f2;
}
.select_bonus_yes_show {
    display: none;
}
.select_bonus_yes_show.on {
    display: block;
}
.select_bonus_yes_show .media > label {
    display: none;
}
.select_bonus_yes_show.active .media > label {
    display: flex;
}
.form-mate-info-block .comment_recommend {
    margin-top: 15px;
}
.select-bonus-ticket-block .store-privilege-list .media-left {
    max-width: 120px;
}
.store-privilege-list .media-right .dropdown {
    margin-top: 6px;
}
.btn-select-shop-branch {
    white-space: initial;
    text-align: left;
}
.btn-select-shop-branch::after {
    position: absolute;
    top: 14px;
    right: 17px;
}
.select-shop-branch-list li + li {
    border-top: #f2f2f2 1px solid;
}
.btn-select-shop-branch .store-name, 
.select-shop-branch-list .store-name {
    font-weight: bold;
}
.btn-select-shop-branch .store-name {
    margin-bottom: 10px;
}
.btn-select-shop-branch p, 
.select-shop-branch-list p {
    margin-bottom: 0;
}
.scroll-list-content {
    overflow: auto;
    height: 100%;
    padding: 10px 1rem 50px 1rem;
}
@media (max-width: 768px) {
    .store-privilege-list .radio-input {
        top: 13px;
        left: 13px;
    }
    .follow-info-list .media-right .btn {
        padding: 0.75rem 1.4rem 0.75rem 1rem;
    }
}


@media (max-width: 374px) {
    .txt-triple-getcoin {
        margin-bottom: -15px;
    }
    .get-gift-modal-fancybox .fancybox-close-small {
        top: 122px;
    }
    .no-follow-slogn {
        font-size: 1.3rem;
        white-space: nowrap;
    }
}

/*@media only screen and (max-width:800px) {*/
    .slotBox .slot-top-area .wheelArea .wheelbox {
        font: normal 29px/45px Arial;
        height: 45px;
        border-radius: 7px;
        box-shadow: 0 2px 0 #D38A09;
    }
    .slotBox .slot-top-area .wheelArea .wheelbox li {
        line-height: 1.5 !important;
    }
    .award-user-list > div {
        float: left;
        width: 100%;
        text-align: left;
    }
    .award-user-list .w-coins-pic {
        width: 60px;
        float: left;
        margin-right: 20px;
    }
    .slotBox .slot-top-area .wheelArea .wheel0box,
    .slotBox .slot-top-area .wheelArea .wheel1box,
    .slotBox .slot-top-area .wheelArea .wheel2box{
        position: relative;
        font:bold 110px/110px Arial;
        height:130px;
    }
    .slotBox .slot-top-area .wheelArea .wheel0box  .slotMachineContainer div,
    .slotBox .slot-top-area .wheelArea .wheel1box  .slotMachineContainer div{
        height:130px;
        /*font:bold 90px/90px Arial;*/
    }
/*}*/
@media only screen and (max-width:460px) {
    .slotBox {
        padding: 5px 10px 0 10px;
    }
    .slotBox .slot-top-area .wheelArea .wheel0box,
    .slotBox .slot-top-area .wheelArea .wheel1box,
    .slotBox .slot-top-area .wheelArea .wheel2box{
        position: relative;
        font:bold 83px/83px Arial;
        height:100px;
    }
    .slotBox .slot-top-area .wheelArea .wheel0box .w-coins-pic, 
    .slotBox .slot-top-area .wheelArea .wheel1box .w-coins-pic,
    .slotBox .slot-top-area .wheelArea .wheel2box .w-coins-pic, 
    .slotBox .slot-top-area .wheelArea .wheel0box .m-coins-pic, 
    .slotBox .slot-top-area .wheelArea .wheel1box .m-coins-pic,
    .slotBox .slot-top-area .wheelArea .wheel2box .m-coins-pic {
        padding: 9px;
    }
    .slotBox .slot-top-area .wheelArea .wheel0box  .slotMachineContainer div, 
    .slotBox .slot-top-area .wheelArea .wheel1box  .slotMachineContainer div, 
    .slotBox .slot-top-area .wheelArea .wheel2box  .slotMachineContainer div {
        height:100px;
        /*font:bold 55px/55px Arial;*/
    }
    .slotBox .slot-top-area .wheelArea .wheel0box .slotMachineContainer div, .slotBox .slot-top-area .wheelArea .wheel1box .slotMachineContainer div, .slotBox .slot-top-area .wheelArea .wheel2box .slotMachineContainer div, .slotBox .slot-top-area .wheelArea .wheel_list {
        height: 100px;
    }
    .slot-top-txt {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .slot-top-txt span.txt {
        font-size: 1rem;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .slot-top-txt:before {
        left: -47px;
    }
    .slot-top-txt:after {
        right: -47px;
    }
    .slot-bar-block {
        transform: scale(0.7);
        right: -28px;
        top: 30%;
    }
    .givebtnArea {
        margin: 5px 0 10px 0;
    }
    .givebtnArea a {
        font-size: 1rem;
    }
    .slot-content-txt {
        padding: 20px 0;
    }
    .other-give-btn a {
        font-size: 1.3rem;
        /*padding: 7px 15px;*/
    }
    .other-give-btn a img {
        margin-right: 10px;
    }
    .slot-top-txt:before, .slot-top-txt:after {
        transform: scale(0.7);
    }
    #slot-box .fancybox-close-small {
        
    }

    .slotBox .slot-top-area .wheelArea .wheel0box, 
    .slotBox .slot-top-area .wheelArea .wheel1box, 
    .slotBox .slot-top-area .wheelArea .wheel2box {
        background-color: #ffffffc4;
        padding: 1px;
        box-shadow: none;
    }

    .slotBox .slot-top-area .wheelArea .wheel0box img, 
    .slotBox .slot-top-area .wheelArea .wheel1box img, 
    .slotBox .slot-top-area .wheelArea .wheel2box img {
        /*border: #f7c872 3px solid;*/
    }
    .topic-get-success-box .womo-gift-list {
        
    }
    .topic-get-success-box .womo-gift-list.two-media {
        width: 120%;
    }
}
@media only screen and (max-width:360px) {
    .slotBox .slot-top-area .wheelArea .wheel0box,
    .slotBox .slot-top-area .wheelArea .wheel1box,
    .slotBox .slot-top-area .wheelArea .wheel2box{
        position: relative;
        font:bold 60px/60px Arial;
        height:70px;
    }
    .slotBox .slot-top-area .wheelArea .wheel0box  .slotMachineContainer div,
    .slotBox .slot-top-area .wheelArea .wheel1box  .slotMachineContainer div{
        height:70px;
        font:bold 60px/60px Arial;
    }
    .givebtnArea a {
        font-size: 0.9rem;
    }
    .slotBox .slot-bottom-area {
        margin-top: -50px;
        padding-top: 70px;
    }

    .slotBox {
        padding: 5px 15px 0 0;
    }
    .award-user-list > div {
        width: 50%;
    }
    .slot-top-txt span.txt img {
        height: 30px;
    }
}

/*================================================================================
    homepage
================================================================================*/
/*------ activity-banner-block -------*/
.activity-banner-list-block {
    margin-top: 20px;
}
.activity-banner-list {
    width: 80vw;
    max-width: 500px;
    border-radius: 15px;
    overflow: hidden;
}
.activity-banner-list img {
    width: 100%;
}
.activity-banner-list.btn-activity-more {
    width: 18vw;
    min-width: 150px;
    background: #efe5d7;
}
.activity-banner-list.btn-activity-more span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    color: #c78c4d;
}
.activity-banner-list.btn-activity-more span i {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50px;
    background: rgb(255 255 255 / 50%);
    margin-bottom: 10px;
}
.activity-banner-list.btn-activity-more span b {
    display: block;
}
.activity-banner-list.btn-activity-more a {
    display: block;
    height: 100%;
}

/*---- home-quickbtn-block ----*/
.home-quickbtn-block {
    margin-top: 40px;
    margin-bottom: 20px;
}
.home-quickbtn-block h4 {
    font-weight: 600;
    margin-bottom: 10px;
}
.home-quickbtn-list-block {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1%;
}
.home-quickbtn-list {
    display: flex;
    width: 23%;
    background: #FFD9D9;
    border-radius: 15px;
    margin: 1%;
}
.home-quickbtn-list > a {
    display: flex;
    width: 100%;
    padding: 15px;
}
.home-quickbtn-list.col-w-1 {
    width: 48%;
}
.home-quickbtn-list .pic img {
    min-width: 45px;
}
.home-quickbtn-list .txt {
    flex: 1;
}
.home-quickbtn-list .txt span {
    display: block;
}
.home-quickbtn-list .txt .title {
    color: #000;
    font-size: 1.5rem;
    margin-bottom: 5px;
    font-weight: 400;
}
.home-quickbtn-list .txt .title2 {
    color: #5E6060;
}
.quickbtn-getmore {
    padding: 15px;
}
.quickbtn-getmore a {
    position: relative;
    display: inline-block;
    padding: 0 10px;
}
.quickbtn-getmore a:hover {
    transform: scale(1.05);
}
.quickbtn-getmore a:last-child {
    padding-right: 0;
}
.quickbtn-getmore a:first-child:after {
    display: block;
    position: absolute;
    top: 0;
    right: -5px;
    content: " ";
    width: 1px;
    height: 100%;
    background: #F1C0C0;
    transform: rotate(10deg);
}
.quickbtn-getmore .txt .title2 {
    margin-bottom: 10px;
}
.quickbtn-creatcoin .txt {
    text-align: right;
}
.quickbtn-creatcoin .txt .title2 {
    margin-bottom: 10px;
}
.quickbtn-green {
    background: #BBE6DC;
}
.quickbtn-red {
    background: #FCD2E4;
}
.quickbtn-yallow {
    background: #FBE0B3;
}
.quickbtn-blue {
    background: #BED7F5;
}

/*------ home-gift-block -------*/
.home-gift-block {
    margin-top: 30px;
}
.home-gift-block .btn-readmore {
    float: right;
}
.home-gift-block .btn-readmore a {
    color: #878787;
}

@media (max-width: 768px) {
    .activity-banner-list-block {
        margin-left: 15px;
        margin-right: -7px;
    }
    .home-quickbtn-block, .home-gift-block {
        margin-left: 15px;
        margin-right: 15px;
    }
    .home-quickbtn-list-block {
        margin: 0 -1.5%;
    }
    .home-quickbtn-list {
        width: 47%;
        margin: 1.5%;
    }
    .home-quickbtn-list.col-w-1 {
        width: 97%;
    }
    
    .main-menu .left_personalinfo {
        padding: 20px 0 15px 15px;
    }
}

/*================================================================================
    womo gift
================================================================================*/
.filter-bar-block {
    padding-bottom: 10px;
    box-shadow: none;
}
.filter-bar-block.border-bottom-gray {
    border-color: #f7f7f7;
}
.filter-bar-block .search-bar {
    background: #F3F3F3;
    border-radius: 30px;
    margin: 15px;
}
.filter-bar-block .search-bar .input-group {
    height: 40px;
}
.filter-bar-block .search-bar .input-group input, 
.filter-bar-block .search-bar .btn.btn-search {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 40px;
}
.filter-btn-area {
    position: relative;
    /*padding-right: 175px;*/
    margin: 10px 15px 5px 15px;
}
.filter-btn-area a {
    border-left: #E7E7E7 1px solid;
    padding: 3px 15px;
}
.filter-btn-area a:first-child {
    border-left: 0;
    padding-left: 5px;
}
.btn-create-coin {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 30px;
    padding: 5px;
    background: #FFF;
    display: inline-flex;
    align-items: center;
}
.btn-create-coin img {
    width: 20px;
    margin-right: 5px;
}
.btn-create-coin-shop {
    color: #5CB3A2;
    border: #5CB3A2 1px solid;
    box-shadow: 1px 1px 1px #4B9284;
}
.btn-create-coin-shop:hover {
    color: #4c9b8c;
    box-shadow: 0 0 1px #4B9284;
    transform: translate(1px, 1px);
}
.btn-create-coin-user {
    color: #D4646B;
    border: #D4646B 1px solid;
    box-shadow: 1px 1px 1px #B24249;
}
.btn-create-coin-user:hover {
    color: #c25158;
    box-shadow: 0 0 1px #B24249;
    transform: translate(1px, 1px);
}

/*---- womo-gift-list -----*/
.womo-gift-list {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}
.womo-gift-list .media {
    width: 31.33%;
    margin: 1%;
    background: #FFF;
    box-shadow: 0px 0px 9px rgb(0 0 0 / 10%);
    padding: 0;
    border-radius: 10px;
    /*overflow: hidden;*/
    border: 0;
    align-content: flex-start;
    padding-bottom: 45px;
}
.womo-gift-list .media .media-top {
    flex: 0 0 100%;
    padding: 10px;
    padding-left: 80px;
    min-width: 0;
}
.womo-gift-list .media .media-top .w-coins-pic {
    position: absolute;
    top: 5px;
    left: 10px;
    padding: 8px;
    width: 60px;
    height: 60px;
    display: inline-block;
    margin-right: 10px;
}
.womo-gift-list .media .media-top .w-coins-pic a {
    margin: 0 !important;
}
.womo-gift-list .media .media-top .w-coins {
    font-size: 1.5rem;
}
.womo-gift-list .media .badge {
    height: 23px;
    display: inline-flex;
    align-items: center;
}
.womo-gift-list .media .status {
    position: absolute;
    top: 11px;
    left: 7px;
    z-index: 90;
}
.womo-gift-list .media .status .badge.border-success {
    background: #FFF;
}
.womo-gift-list .media .store-name {
    font-size: 1.1rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
}
.womo-gift-list .media h4.media-heading .store-name {
    color: #9c3f3f;
    margin-bottom: 5px;
    font-size: 1rem;
}
.womo-gift-list .media .store_pic {
    flex: 0 0 100%;
    padding-right: 0;
    margin-bottom: 15px;
    margin-right: 0;
    overflow: hidden;
    background: #f2f2f2;
}
.womo-gift-list .media .store_pic a.pic_img {
    display: block;
    padding-top: 71%;
    background-size: cover;
    background-position: center center;
}
.womo-gift-list .media .btn-add-favor {
    right: 8px;
    left: inherit;
    z-index: 10;
}
.womo-gift-list .media .media-body {
    position: relative;
    flex: 0 0 100%;
    padding: 0 10px;
    min-width: 0;
}
.womo-gift-list .media .media-body .reach-mark {
    top: -85px;
}
.womo-gift-list .media.sold-out .media-top, 
.womo-gift-list .media.sold-out .store_pic, 
.womo-gift-list .media.sold-out .media-body h4.media-heading, 
.womo-gift-list .media.sold-out .media-right {
    opacity: 0.7;
}
.womo-gift-list .media .media-body h4.media-heading {
    font-size: 1.2rem;
}
.womo-gift-list .media .media-right {
    flex: 0 0 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.womo-gift-list .media .media-right .mycoin-num {
    width: 100%;
    color: #E55942;
    background: #FCE9E9;
    padding: 3px 20px 3px 10px;
    margin-right: -20px;
    border-radius: 30px;
}
.womo-gift-list .media .media-right .mycoin-num a {
    color: #E55942;
}
.womo-gift-list .media .media-right .mycoin-num img {
    position: relative;
    top: -1px;
    width: 20px;
}
.womo-gift-list .media .media-right .btn {
    margin-bottom: 0;
}

.womo-gift-list .media .media-right .coin-num {
    display: flex;
    align-items: center;
    flex: 1;
    flex-grow: 3;
}
.womo-gift-list .media .media-right .coin-num .mycoin-num.no-reach {
    color: #EFABA0;
}
.womo-gift-list .media .media-btn-right {
    position: absolute;
    right: 10px;
    top: 10px;
}
.womo-gift-list .off .off-info {
    height: calc(100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.womo-gift-list .reach:after {
    display: none;
}
.womo-gift-list .reach .store_pic {
    overflow: visible;
    opacity: 1;
}
.womo-gift-list .reach .store_pic > .po-gallery:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    background: #FFF;
}
.womo-gift-list .reach .coupon-status {
    position: absolute;
    bottom: -40px;
    top: inherit;
    right: 10px;
    z-index: 5;
    width: 110px;
}

.coin-cart-row dl {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20px;
}
.coin-cart-row dt {
    flex: 1;
    white-space: nowrap;
    margin-right: 40px;
}
.coin-cart-row dd, .coin-cart-row .input-group {
    margin-bottom: 0;
}
.coin-cart-row .input-group {
    width: 150px;
}
.coin-cart-row .input-group input {
    text-align: center;
}
.coin-cart-row .cart-coin-price {
    border-bottom: #ebebeb 1px solid;
    padding-bottom: 7px;
}
.coin-cart-row .cart-coin-price dd .icon, 
.coin-cart-row .coin-cart-total dd .icon {
    margin-left: 5px;
}
.coin-cart-row .coin-cart-num dt {
    color: #e55942;
}
.coin-cart-row .coin-cart-total {
    background: #f2f2f2;
    padding: 10px;
}
.coin-cart-row .coin-cart-btn {
    display: flex;
}
.coin-cart-row .coin-cart-btn button {
    flex: 1;
}
.coin-cart-row .cart-coin-price, 
.coin-cart-row .coin-cart-total {
    align-items: baseline;
}
.coin-cart-row .cart-coin-price dd, 
.coin-cart-row .coin-cart-total dd {
    line-height: 1;
}
#buy-coin-gift-cart-block > .card {
    overflow: hidden;
}
#buy-coin-gift-cart-block .card-img-top > .po-gallery, 
#buy-coin-gift-cart-block .coin-cart-row {
    width: 100%;
    max-width: 400px;
}
.coin-cart-row .w-coins-pic {
    width: 40px;
    height: 40px;
    padding: 5px;
    margin-right: 10px;
    margin-left: 5px;
}
#buy-coin-gift-cart-block .coin-cart-row .coin-cart-num2 dd {
    display: flex;
    align-items: center;
}
#buy-coin-gift-cart-block .coin-cart-row dd .w-coins {
    min-width: 30px;
    margin-left: 5px;
}
#buy-coin-gift-cart-block .badge {
    white-space: pre-wrap;
    text-align: left;
    line-height: inherit;
    background-color: #f9f0f0;
    color: #c08b8b;
}
.coin-cart-row .title {
    border-bottom: #ebebeb 1px solid;
    padding: 0 0 15px 0;
}
.coin-cart-row .title .store-name {
    display: block;
    color: #9c3f3f;
    margin-bottom: 5px;
    font-size: 1rem;
}

/*================================================================================
    figurine-list-block
================================================================================*/
.figurine-list-block {
    padding: 0 10px;
}
.figurine-list-block .col-xl-4, 
.figurine-list-block .col-lg-4, 
.figurine-list-block .col-6 {
    padding-right: 10px;
    padding-left: 10px;
}
.figurine-list-block .pic_figure img {
    width: 100%;
}
.figurine-list-block .media-heading {
    margin: 20px 0;
}

/*================================================================================
    kol
================================================================================*/
.kol-activity-list .card-title span.badge {
    margin-right: 10px;
}
.kol-activity-list .card-title span.date {
    color: #777777;
    display: block;
    background: #f3f3f3;
    border-radius: 30px;
    padding: 5px 15px;
    margin-top: 15px;
}
.kol-activity-list .card-content .card-body {
    padding-top: 0;
}
.kol-activity-list .card-header .card-title {
    font-size: 1.2rem;
}
.kol-activity-tab {
    font-size: 1.1rem;
}
.kol-activity-list .table-style1 .table td h5 {
    font-size: 1rem;
}
.table-pic .w-coins-pic {
    padding: 6px;
    display: inline-block;
    width: 50px;
    height: 50px;
 }
.table-btn a.btn-more-icon {
    font-size: 1.3rem;
    margin: 0 3px;
}
.table-pic .w-coins {
    font-size: 1.5rem;
}
.table-style1 .table-title {
    min-width: 100px;
}
.kol-activity-list .table-num, 
.kol-activity-list .table-btn {
    white-space: nowrap;
}
a.txt-expired {
    color: #af5757;
}

.kol-activity-list .callout-border-left {
    display: table;
    width: 100%;
    padding: 15px;
    margin: 0 0 15px 0;
}
.kol-activity-list .callout-border-left p {
    margin: 0;
}
.kol-activity-list .kol-statistics-list {
    display: table-row;
}
.kol-activity-list .kol-statistics-list-th {
    display: table-cell;
}
.kol-activity-list .kol-statistics-list-td {
    display: table-cell;
    width: 30px;
}
.kol-activity-list .kol-statistics-list a {
    font-size: 0.8rem;
    position: relative;
    top:1px;
    color: #b57377;
}


.table-responsive::-webkit-scrollbar-track-piece {
  background-color: #FFF;
  border-left: 1px solid #FFF;
}
.table-responsive::-webkit-scrollbar {
  width: 2px;
  height: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color: #ccc;
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 10px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/*------------ kol gift addnew -------------*/
.scroll-img-list {
    background: #FFF;
}
.scroll-img-list #imgBox {
    padding: 0.7rem 0;
}
.scroll-img-list .imgContainer {
    margin-top: 0;
}

/*------------- kol gift shipment --------------*/
.kol-gift-shipment-list tbody td .btn {
    padding: 3px 6px;
}
.btn-shipment-status select {
    padding: 0.2rem;
    color: #6B6F82;
    background-color: transparent;
    background-image: none;
    border-color: #6B6F82;
    border-radius: 0.21rem;
    outline: 0;
}
.kol-gift-order-detail tbody th {
    background: #f2f2f2;
    width: 120px;
}
.kol-gift-order-detail table .btn {
    padding: 0.5rem 0.75rem;
    margin-left: 10px;
}
.table th, .table td {
    border-bottom: 1px solid #e3ebf3;
}

/*----------- kol coins infinite share page ------------*/
.left-fixed {
    margin: 20px 10px 0 10px;
}
.kol-edit-ad-block .card-banner {
    position: relative;
    background: #f5f5f5;
    min-height: 150px;
}
.kol-edit-ad-block .card-banner img {
    max-width: 100%;
}
.kol-edit-ad-block, .get-coins-block {
    padding: 0 10px;
}
.get-coins-block .nologin-coins-list .card {
    box-shadow: 0px 1px 8px 1px rgb(0 0 0 / 10%) !important;
    margin: 0 5px;
}
.get-coins-block .nologin-coins-list .card .media .store_pic img {
    border: 0;
}
.left-kol-info-panel .w-coins-pic {
    display: inline-block; 
    padding: 7px; 
    width: 60px; 
    height: 60px;
}
.left-kol-info-panel h4 {
    margin: 20px 0 0 0;
}
.left-kol-social-btn {
    padding: 20px 0;
}
.left-kol-social-btn a i.la {
    top: 2px;
    position: relative;
    font-weight: normal;
}

.left-kol-info-panel .heading-elements-toggle {
    margin-top: 22px;
}
.left-kol-info-panel .heading-elements.visible {
    box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
    background: #FFF;
    border: 0;
    border-radius: 5px;
}
@media (max-width: 768px) {
    .left-kol-social-btn {
        padding: 0 !important;
    }
    .left-kol-social-btn ul.list-inline li {
        padding: 5px;
        flex: 1;
        border-left: #f3f3f3 1px solid;
    }
    .left-kol-social-btn a i {
        font-size: 1.5rem;
    }
    .left-kol-social-btn a i.la {
        font-size: 1.9rem;
    }
    .left-kol-social-btn span {
        color: #000;
    }
    .left-kol-social-btn.heading-elements.visible {
        top: 60px;
    }
    .left-kol-social-btn.heading-elements.visible .list-inline {
        display: flex;
    }
    .left-kol-social-btn span {
        display: block;
    }
    .left-kol-social-btn .btn-soc-profile a, 
    .left-kol-social-btn .btn-soc-show a {
        top: 5px;
        position: relative;
    }

}@media (min-width: 768px) {
    .left-kol-social-btn a {
    display: inline-block;
    position: relative;
    margin: 0 3px;
    /*border: #CCC 1px solid;*/
    border-radius: 100%;
    width: 25px;
    height: 25px;
    background: #f3f3f3;
    line-height: 1.7rem;
    font-weight: bold;
    text-align: center;
}
    .left-kol-social-btn span {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    border-radius: 30px;
    font-size: 0.8rem;
    padding: 0 10px;
    transition: 0.4s;
    white-space: nowrap;
    color: #FFF;
}
.left-kol-social-btn a:hover span {
    visibility: visible;
    opacity: 1;
    top: -25px;
}
}

.btn-soc-fb a {
    color: #4267B2;
}
.btn-soc-ig a {
    color: #da5171;
}
.btn-soc-profile a {
    color: #28D094;
}
.btn-soc-show a {
    color: #e48a05;
}

.kol-intro-block {
    
}
.kol-intro-block-inner {
    height: 300px;
    overflow: hidden;
    transition:all 0.3s;
}
.kol-intro-block-inner.on {
    
}
.btn-read-more {
    display: block;
    padding: 10px 0;
    text-align: center;
    border-top: #e6e6e6 1px solid;
}
.btn-read-more.off:after {
    font-family: feather!important;
    content: "\e927";
}
.btn-read-more:after {
    font-family: feather!important;
    content: "\e92a";
}
.kol-intro-block img {
    max-width: 100%;
    height: auto !important;
}
.kol-intro-block iframe {
    max-width: 100%;
}
.left-kol-btn {
    padding-top: 0;
}
#get-kol-coins-success {
    max-width: 250px;
}
#get-kol-coins-success .w-coins-pic {
    display: inline-block;
}
#get-kol-coins-success h4.card-title {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 1.3rem;
    line-height: 2rem;
}
#get-kol-coins-success span.num {
    display: inline-block;
    margin-left: 10px;
    font-size: 2rem;
    color: #d43737;
    position: relative;
    top: 25px;
}
@media (min-width: 768px) {
    /*-----------*/
    .left-fixed {
        position: absolute !important;
        width: 250px;
        margin: 0;
    }
    .left-kol-info-panel {
        text-align: center;
    }
    .left-kol-info-panel .w-coins-pic {
        width: 80px;
        height: 80px;
        padding: 10px; 
    }
    .left-kol-desc {
        text-align: center;
        padding-top: 0;
    }

}
@media (max-width: 768px) {
    .left-kol-info-panel .card {
        margin-bottom: 0;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    .left-kol-info-panel .w-coins-pic, 
    .left-kol-info-panel h4 {
        float: left;
    }
    .left-kol-info-panel h4 {
        margin-left: 20px;
        margin-top: 25px;
    }
    .left-kol-desc {
        display: none;
    }
    .left-kol-btn {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9999;
        background: #FFF;
        padding: 10px 5px;
        width: 100%;
    }
    .left-kol-btn a {
        margin: 0 5px;
        margin-top: 0 !important;
    }
    .left-kol-btn a.btn-share-infinite {
        width: auto;
    }
    .left-kol-btn a.btn-share-infinite span {
        display: inline-block;
        text-indent: -9999px;
    }
    .get-coins-list .media {
        flex-wrap: wrap;
    }
    .get-coins-list .media-right {
        flex: 0 0 100%;
        margin-top: 20px;
        padding-left: 0 !important;
    }
    .get-coins-list .media-right a {
        display: block;
        border-radius: 0.21rem;
    }
}

/*-----recommend-link--------*/
.recommend-link {
    padding: 0 10px;
    margin-top: 20px;
}
.recommend-link .pic {
    border-radius: 7px;
    overflow: hidden;
}
.recommend-link .pic a {
    display: block;
    height: 150px;
    transition: 0.3s;
    transform: scale(1);
}
.recommend-link .pic a:hover {
    transform: scale(1.1);
}
.recommend-link .pic img {
    width: 100%;
}
.recommend-link h5 {
    margin: 10px 0;
    line-height: 1.6rem;
    font-size: 1rem;
}
.recommend-link .row > div {
    margin-bottom: 20px;
    text-align: center;
}

/*-------- acitivity card --------*/
.activity-card-fancybox {
    max-width: 350px;
}
.activity-card {
    min-width: 300px;
}
@media (min-width: 375px) {
    .activity-card-fancybox {
        min-width: 300px;
        width: 90%
    }
}
.activity-card .card-img-top {
    height: 220px;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 0.7rem;
    border-top-right-radius: 0.7rem;
}
.activity-card .card-img-top span {
    display: block;
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    margin-left: 0 !important;
    background-size: cover;
}
.bg-card-activity1 span {
    background-image: url(../images/bg_activity_over.jpg);
}
.bg-card-activity2 span {
    background-image: url(../images/bg_activity_over2.jpg);
}
.bg-card-activity3 span {
    background-image: url(../images/bg_activity_over3.jpg);
}
.activity-card .card-profile-image {
    padding: 0 35px;
    top: 60px;
}
.activity-card .card-profile-image img {
    width: 130px;
}
.activity-card .w-coins-pic {
    display: inline-block;
    width: 110px;
    height: 110px;
    padding: 13px;
}
.activity-card .media-heading {
    margin-bottom: 15px;
}
.activity-card .text-line-bar {
    position: relative;
    color: #000;
    background: #e7fbf1;
    padding: 0.75rem 1rem;
    margin-top: 15px;
    border: #00b900 1px solid;
}
.activity-card .text-line-bar strong {
    color: #00b900;
}
.activity-card .text-line-bar span.icon {
    position: absolute;
    top: -11px;
    left: -11px;
    transform: rotate(-7deg);
    height: 22px;
    padding: 4px;
    z-index: 99;
    font-size: 0.8rem;
    border-radius: 5px;
    color: #FFF;
    background: #ff9800;
}
.activity-card .text-line-bar span.icon:after {
    position: absolute;
    display: block;
    content: " ";
    bottom: -12px;
    left: 50%;
    margin-left: -6px;
    border: solid transparent;
    border-top: 12px solid #ff9800;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.activity-card .text-line-bar span.txt {
    color: #FFF;
    border-radius: 30px;
    padding: 2px 5px;
    background-color: #00b900;
    font-size: 0.9rem;
    margin-left: 5px;
}
.activity-card .text-line-bar span.txt:hover {
    background-color: #059205;
}

.activity-get-coin-card {
    /*max-width: 300px;*/
}
.activity-get-coin-card .card-profile-image img {
    width: 120px;
    margin-top: 20px;
}
.activity-get-coin-card .card-profile-image .pic {
    position: absolute;
    top: -25px;
    right: 70px;
}
.activity-get-coin-card .card-profile-image .pic img {
    border-radius: 100%;
    width: 70px;
    border: #d8daf0 3px solid;
    margin-top: 0;
}
.activity-get-coin-card .card-profile-image .pic.w-coins-pic, 
.activity-get-coin-card .card-profile-image .pic.m-coins-pic {
    top: 5px;
    right: 50px;
    width: 80px;
    height: 80px;
    padding: 10px;
}
.activity-get-coin-card .card-profile-image .pic.w-coins-pic img, 
.activity-get-coin-card .card-profile-image .pic.m-coins-pic img {
    border: 0;
}
.get-wg-card-list {
    max-width: 700px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    display: flex;
}
.get-wg-card-list .card {
    min-width: 300px;
    margin: 0 10px;
}
.activity-card-fancybox .txt-notice {
    background: #f4e8df;
    color: #be6503;
    border-radius: 30px;
    padding: 3px 5px;
}

.activity-card .card-profile-image .coin_inwallet {
    margin-top: -20px;
}
.activity-card .card-profile-image .coin_inwallet img {
    width: 100px;
}


/*exchange-pk-fancybox*/
.exchange-coin-type-label {
    padding: 10px 15px;
    margin-bottom: 0;
    background: #FFF;
    width: 100%;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 1.1rem;
}
.exchange-coin-type-label input {
    margin-right: 5px;
}
.exchange-pk-fancybox {
    max-width: 400px;
    width: 90%;
}

.exchange-pk-fancybox .activity-get-coin-card {
    max-width: 100%;
}
.exchange-pk-fancybox .activity-card .card-img-top {
    height: 325px;
}
.pk-progress {
    display: flex;
    position: absolute;
    top: 40px;
    width: calc(100% - 70px);
}
.pk-progress .progress {
    flex: 1;
}
.pk-progress .progress:first-child {
    /*transform: rotate(180deg);*/
    margin-right: -10px;
}
.progress:before, .progress-bar:before {
    display: none;
}
.pk-user-info {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    margin: 0 -35px;
    margin-top: 30px;
}
.pk-user-info .pic {
    position: relative !important;
    top: 0 !important;
    left: inherit !important;
    right: inherit !important;
    
}
/*.exchange-pk-fancybox .activity-get-coin-card .card-profile-image .pic.left-pic {
    left: 50px;
    right: inherit;
}
.exchange-pk-fancybox .activity-get-coin-card .card-profile-image .pic.right-pic {
    right: 50px;
}*/
.pic-coin-bag img {
    width: 66px !important;
    padding-top: 24px;
    margin-left: -18px;
}
.pk-user-info .pic img {
    width: 70px;
}
.pk-user-info .pic.winner {
    transition: 0.3s;
    animation:scale-big 1s forwards;
    animation-delay: 1.5s;
}
@keyframes scale-big {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.1);
    }
}
.pk-user-info .pic.winner img {
    animation:border_red .6s forwards;
    animation-delay: 1.5s;
}
@keyframes border_red {
    0%{   
    }
    100%{
        border-color: #f93c7e;
    }
}
.pk-user-info .pic .txt {
    color: #000;
}
.pk-user-info .pic .txt span {
    display: block;
    margin: 3px 0;
    background-color: #6B6F82;
}
.pk-user-info .pic.winner .txt span {
    animation:bg_red .6s forwards;
    animation-delay: 1.5s;
}
@keyframes bg_red {
    0%{   
        background-color: #6B6F82;
    }
    100%{
        background-color: #FF4961;
    }
}
.pk-user-info .pic.winner:after {
    opacity: 0;
    content: " ";
    display: block;
    position: absolute;
    top: -21px;
    width: 35px;
    height: 40px;
    background: url(https://cdn-icons-png.flaticon.com/512/4937/4937998.png) no-repeat;
    background-size: 100%;
    animation:fadeIn .6s forwards;
    animation-delay: 1.5s;
}
.pk-user-info .pic.left-pic:after {
    left: 3px;
    transform: rotate(-20deg);
}
.pk-user-info .pic.right-pic:after {
    right: 3px;
    transform: rotate(20deg);
}
.pk-user-info .pk-tie {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) rotate(10deg) scale(1.4);
    opacity: 0;
}
.zoom-rotate-in {
    animation:zoom_rotate_in .6s forwards;
    animation-delay: 1s;
}
@keyframes zoom_rotate_in {
    0%{
        transform: translateX(-50%) rotate(10deg) scale(1.6);
        opacity: 0;
    }
    100%{
        transform: translateX(-50%) rotate(10deg) scale(1.2);
        opacity: 1;
    }
}
.pk-user-info .pic.winner img {
    animation:border_red .6s forwards;
    animation-delay: 1.5s;
}
.exchange-pk-wm-coin-block {
    position: relative;
    margin-top: -65px;
}
.exchange-pk-wm-coin-block.move-r {
    animation:move_right .6s ease-in-out 0s 1 alternate forwards;
    animation-delay: 1s;
} 
@keyframes move_right {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(30px);
    }
}
.exchange-pk-wm-coin-block.move-l {
    animation:move_left .6s ease-in-out 0s 1 alternate forwards;
    animation-delay: 1s;
} 
@keyframes move_left {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-30px);
    }
}
.exchange-pk-wm-coin {
    display: inline-flex;
    align-items: flex-end;
}
.exchange-pk-wm-coin img {
    width: 67px !important;
    margin-top: 0 !important;
}
.exchange-pk-wm-coin .wm-coins {
    font-size: 1.8rem;
}
.exchange-pk-wm-coin.active {
    animation:coin-fall 1s ease-in-out 0s 1 alternate forwards;
} 
@keyframes coin-fall {
    0%{
        transform: translateY(-50px);
    }
    100%{
        transform: translateY(0);
    }
}
.exchange-pk-title {
    width: fit-content;
    margin: 0 auto;
    background: #fcfeff;
    border-radius: 30px;
    padding: 7px 12px;
    border: #d5d8ef 1px solid;
    font-size: 0.9rem;
    position: relative;
    margin-bottom: 5px;
}
.exchange-pk-title span {
    line-height: 1;
    margin: 0 3px;
}
.exchange-pk-txt {
    text-align: center;
    font-size: 2rem;
    color: #676ee8;
}
.exchange-pk-txt img {
    width: 100px !important;
    margin-top: 0 !important;
}
.exchange-pk-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #8e706e;
    background: #f8ede2;
    border-radius: 5px;
    padding: 3px 5px;
    margin: 0 -15px;
}
.exchange-pk-info span {
    margin: 0 3px;
    font-size: 1.6rem;
}
.exchange-pk-info a {
    margin-left: 5px;
}
.ft-help-circle-fill {
    display: inline-block;
    background: #bf4646;
    color: #FFF;
    border-radius: 30px;
    text-align: center;
    width: 17px;
    height: 17px;
    line-height: 17px;
}
.ft-help-circle-fill:after {
    content: "?";
}


/*more-coins-record-fancybox*/
.more-coins-record-list .card {
    border: #e9e9e9 1px solid;
    min-width: 280px;
}
.more-coins-record-list .card .media-heading {
    margin-top: 5px;
}
.btn-more-coins-record {
    padding: 3px 7px;
    font-size: 0.8rem;
}

/*--------- kol coupon ----------*/
.header-tabs .nav-right-tabs {
    margin-top: 10px;
}
.tabs-category {
    padding: 15px 5px 0 5px;
}
.tabs-category .noread-num {
    background: #FF4961;
    color: #FFF;
    border-radius: 30px;
    margin-left: 5px;
    padding: 0 5px;
}
.tabs-category a {
    position: relative;
}
.tabs-category .badge {
    position: absolute;
    right: -8px;
    top: -7px;
    font-size: 0.9rem;
    padding: 3px 0;
    width: 17px;
    height: 17px;
    box-shadow: 0px 0px 3px #FF4961;
}
.tabs-category2 {
    background: #FFF;
    position: relative;
    z-index: 100;
    padding: 0;
}
.tabs-category2 a {
    margin-right: 5px;
    padding: 7px 30px;
}
.tabs-category2 .badge {
    width: 6px;
    height: 6px;
    padding: 0;
    box-shadow: none;
    border: 0;
    top: -3px;
    right: -3px;
}
.tabs-category2 .dropdown-item .badge {
    position: static;
    margin-left: 5px;
}
.dropdown-item.active:after {
    font-family: feather !important;
    content: "\e926";
    color: #d4646b;
    /*float: right;*/
}
.btn-add-new-pri {
    font-size: 1.2rem;
    margin-right: 10px;
}
.filter-block_row {
    display: flex;
    justify-content: space-between;
    border-bottom: #fff7f7 1px solid;
    margin: 0;
}
.filter-block_row .text-right {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}
.who-chat-list {
    flex-wrap: wrap;
    background: #fbfbfb;
    border-bottom: #efe6e6 1px solid;
}
.who-chat-list h5 {
    flex: 1;
    text-align: left;
    font-size: 1.1rem;
    color: #b19090;
    margin-bottom: 12px;
}
.d-flex-1 {
    flex: 1;
}
.filter-block .form-control-box {
    padding: 0 5px;
}
@media (max-width: 768px) {
    .filter-block_row {
        margin: 0 -7px;
    }
    .tab-content-block .filter-block_row {
        margin: 0;
    }
    .tabs-category2 {
        display: flex;
        float: none;
        /*margin: 0 -7px;
        box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.04);*/
    }
    .tabs-category2 a {
        flex: 1;
    }
    .tabs-category2 a + a {
        /*margin-left: 10px;
        margin-right: 0;*/
    }
}
.mycoupon-kol-list .store_pic {
    position: absolute;
    left: 0;
    top: 0;
    border: 0;
}
.mycoupon-kol-list .kol-info div {
    display: flex;
    align-items: center;
    margin: 10px 10px 5px 10px;
    background: rgb(255 255 255 / 0.7);
    text-align: center;
    border-radius: 30px;
}
.mycoupon-kol-list .kol-info div span.txt {
    font-size: 0.8rem;
    display: inline-block;
    margin-left: 5px;
}
.mycoupon-kol-list .kol-info img {
    width: 30px;
    border-radius: 100%;
    /*border: #FFF 4px solid;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);*/
}
.mycoupon-kol-list .kol-info .btn {
    float: right;
    margin-right: 5px;
}
.mycoupon-kol-list .coupon-pic {
    width: 100%;
}
.mycoupon-kol-list .btn-right {
    position: absolute;
    top: 20px;
    right: 20px;
    box-shadow:none !important;
}
.mycoupon-kol-list .btn-right a {
    display: inline-block;
}
.coupon-card-fancybox .desc.h-120 {
    /*max-height: 120px;*/
}


/*--------- report-price-fancybox ----------------*/
.report-price-fancybox {
    max-width: 500px;
}
.report-price-fancybox .form-block {
    margin: 0;
}
.report-price-fancybox p {
    margin-bottom: 20px;
}
.report-price-fancybox .form-group label {
    color: #000;
}

/*------- about-womo-block ---------*/
.register-activity-block .activity-txt p {
    /*color: #505050;
    font-size: 1.1rem;*/
}
.register-activity-block .activity-txt h5 {
    font-size: 1.2rem;
    color: #1e6a8f;
    margin-top: 10px;
}
.register-activity-block .activity-btn-go {
    font-size: 1.1rem;
    color: #FFF;
    background-color: #c34d19;
    border: #c34d19 2px solid;
}
.text-tip {
    color: #4d7e9b;
    font-size: 1.2rem;
}
.about-womo-block {
  position: relative;
  float: left;
  width: 100%;
  min-height: 900px;
  padding: 20px 0;
  background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/about_womo.jpg) no-repeat center bottom;
  text-align: center;
}
.womo-slogn {
  text-align: center;
  color: #FFF;
  margin-bottom: 10px;
  font-size: 2.2rem;
  text-shadow: -1px -1px 0 #d67718, 1px -1px 0 #d67718, -1px 1px 0 #d67718, 1px 1px 0 #d67718, 3px 3px 0px #d67718;
}
.womo-logo {
  text-align: center;
  margin: 10px 0;
}
.womo-logo img {
  width: 200px;
}
.about-womo-block .txt {
  display: inline-block;
  color: #FFF;
  padding: 7px 12px;
  font-size: 1.4rem;
  border: #FFF 1px solid;
}
.about-womo-block .desc {
    max-width: 700px; 
    margin: 0 auto; 
    color: #FFF;
    background: rgb(0 0 0 / 17%);
    padding: 25px;
    font-size: 1.2rem;
    line-height: 2rem;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
    text-align: justify;
}
.about-womo-block .btn-area {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 30px;
}
.btn-round-border {
  min-width: 300px;
  display: inline-block;
  font-size: 1.4rem;
  border-width: 2px;
  border-style: solid;
  background: #FFF;
  border-radius: 30px;
  outline: 0 !important;
  cursor: pointer;
  padding: 8px 30px;
  box-shadow: 5px 5px 1px #e6e6e6;
  transition: 0.1s;
}
.btn-round-border:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 1px #e6e6e6;
}
.btn-org {
    border-color: #fb9929;
    color: #fb9929;
}

/*------ brand_new_guide_block -------*/
.brand_new_guide_block {
    position: relative;
    height: 100%;
    min-height: calc(100vh - 133px);
    padding: 30px 30px 80px 30px;
    background: linear-gradient(to bottom,  #cc4f6c 0%,#e27828 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.brand_new_logo {
    max-width: 300px;
    padding: 0 20px;
    margin: 0px auto 20px auto;
}
.brand_new_logo img {
    width: 100%;
}
.brand_new_guide_list_block {
    max-width: 400px;
    margin: 0 auto;
}
.brand_new_guide_content {
    background: #803546;
    border: rgb(255 255 255 / 80%) 3px solid;
    border-radius: 15px;
    padding: 20px;

}
.brand_new_guide_list .txt {
    display: block;
    text-align: center;
    letter-spacing: 2px;
}
.brand_new_guide_list h4 {
    color: #FFF;
    font-size: 1.7rem;
    margin: 15px 0;
}
.brand_new_guide_list h5 {
    color: #ffb96b;
    font-size: 1.7rem;
    margin-bottom: 10px;
    line-height: 1.8rem;
}
.brand_new_guide_list .pic {
    display: block;
    padding: 0 30px;
}
.brand_new_guide_list .pic img {
    width: 100%;
}
.brand_new_guide_block .but {
    display: block;
    margin-top: 20px;
}
.brand_new_guide_block .but a {
    display: block;
    color: #FFF;
    background: #63b3a1;
    border: #FFF 2px solid;
    border-radius: 30px;
    padding: 5px 30px;
    text-align: center;
    font-size: 1.3rem;
}
.brand_new_guide_list_block.owl-carousel .owl-stage-outer {
    z-index: 100;
}
.brand_new_guide_list_block .owl-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1000;
}
.brand_new_guide_list_block.owl-theme .owl-dots .owl-dot {
    outline: 0;
    border: 0;
}
.brand_new_guide_list_block.owl-theme .owl-dots .owl-dot span {
    background: #FFF;
}
.brand_new_guide_list_block.owl-theme .owl-dots .owl-dot.active span, 
.brand_new_guide_list_block.owl-theme .owl-dots .owl-dot:hover span {
    background: #63b3a1;
}
.brand_new_guide_list_block.owl-theme .owl-nav {
    margin: 0;
}

/*--- .brand_new_guide_list .pic ---*/
.activity-article-list-modal .brand_new_guide_list_block .owl-dots {
    bottom: 19px;
}
.activity-article-list-modal .brand_new_guide_list_block {
    /*max-width: 450px;*/
    width: 100%;
    max-width: 100%;
}
.activity-article-list-modal.modal.fade .modal-dialog {
    transform: translate(0, 0) !important; 
    top: 0; 
    margin: 15px auto;
    max-width: 550px;
}
.activity-article-list-modal .brand_new_guide_block {
    padding: 0;
    min-height: fit-content;
}
.activity-article-list-modal .brand_new_guide_list .pic {
    padding: 0;
    overflow: hidden;
    border-bottom-left-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}
.activity-article-list-modal .brand_new_guide_content {
    padding: 0;
    border: 0;
    border-radius: 0;
}
.activity-article-list-modal .brand_new_guide_block .but {
    position: absolute;
    bottom: 15px;
    width: 100%;
    padding: 0 15px;
}
.activity-article-list-modal .brand_new_guide_block .but a {
    background-color: #C8506D;
}
.activity-article-list-modal .brand_new_guide_block .but a + a {
    margin-top: 10px;
}
.activity-article-list-modal .brand_new_guide_list_block.owl-theme .owl-dots .owl-dot span {
    border: #CCC 1px solid;
}
.activity-article-list-modal .brand_new_guide_list_block.owl-theme .owl-dots .owl-dot.active span, 
.activity-article-list-modal .brand_new_guide_list_block.owl-theme .owl-dots .owl-dot:hover span {
    background: #FFF;
    border: #000 1px solid;
}


@media only screen and (max-width: 600px) {
  .about-womo-block {
    padding: 30px 0;
    min-height: inherit;
    background: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/about_womo_m.jpg) no-repeat center bottom;
    background-size: 100%;
  }
  .womo-slogn {
    font-size: 1.6rem;
  }
  .womo-logo {
    margin: 10px 0;
  }
  .womo-logo img {
    width: 120px;
  }
  .about-womo-block .txt {
    font-size: 1rem;
  }
  .about-womo-block .desc {
    margin: 20px 15px 80% 15px;
  }
  .about-womo-block .btn-area {
    margin-bottom: 20px;
  }
  .about-womo-block .btn-round-border {
    font-size: 1rem;
    transform: scale(0.8);
  }
} 


/*------- nav-radio-tabs-group -------*/
.nav-radio-tabs-group {
    border-bottom: 0;
    display: flex;
    margin: 0 -2%;
}
.nav-radio-tabs-group a {
    position: relative;
    display: inline-block;
    width: 21%;
    max-width: 100px;
    margin: 0 2%;
    
}
.nav-radio-tabs-group a + a {
    
}
.nav-radio-tabs-group a label {
    position: relative;
    border-radius: 10px;
    background-color: #FFF;
    padding: 5px;
    /*transition: 0.3s;*/
    text-indent: -99999px;
    border: #FFF 2px solid;
    box-shadow: 1px 1px 8px rgb(0 0 0 / 10%);
    display: block;
    
}
.nav-radio-tabs-group a label:after {
    display: block;
    content: " ";
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    width: 100%;
    height: 0;
    margin: 0 !important;
    cursor: pointer;
    padding-bottom: 100%;
}
.nav-radio-tabs-group a input {
    visibility: hidden;
    position: absolute;
    z-index: -1;
}
.nav-radio-tabs-group a .txt {
    display: block;
    text-align: center;
    color: #a9a9a9;
}
.nav-radio-tabs-group a.active .txt {
    color: #cc6666;
}
.nav-radio-tabs-group a.active label {
    border: #cc6666 2px solid;
    box-shadow: 1px 1px 8px rgb(181 0 0 / 20%);
}
.nav-radio-tabs-group a.active label:after {
    background-position: bottom;
}
.nav-radio-tabs-group a.nav-radio-tabs-btn1 label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_type1.svg);
}
.nav-radio-tabs-group a.nav-radio-tabs-btn2 label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_type2.svg);
}
.nav-radio-tabs-group a.nav-radio-tabs-btn3 label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_type3.svg);
}
.nav-radio-tabs-group a.nav-radio-tabs-btn4 label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_type4.svg);
}
.nav-radio-tabs-group a.nav-radio-tabs-btn-lottery label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_way3.svg);
}
.nav-radio-tabs-group a.nav-radio-tabs-btn-sticker label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_way7.svg);
}

.nav-radio-tabs-group a.nav-radio-tabs-way-btn1 label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_way1.svg);
}
.nav-radio-tabs-group a.nav-radio-tabs-way-btn2 label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_way2.svg);
}

.nav-radio-tabs-group a.nav-radio-tabs-lottery-self label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_type_lottery_self.svg);
}
.nav-radio-tabs-group a.nav-radio-tabs-lottery-auto label:after {
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_privilege_type_lottery_auto.svg);
}
.nav-radio-tabs-group .disabled_txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FFF;
    background: #00000080;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    padding: 10px;
    text-align: center;
    line-height: 1.3rem;
    border-radius: 10px;
    text-indent: initial;
}
@media (max-width: 430px) {
    .nav-radio-tabs-group .disabled_txt {
        /*padding: 15px;*/
    }
}

.btn-upgrade-lock {
    display: flex;
    align-items: center;
    color: #f08b4b;
    text-decoration: underline;
}
.btn-upgrade-lock img {
    width: 15px;
    margin-right: 5px;
}


.intro-txt-block {
    margin-bottom: 25px;
}
.intro-txt-block .title {
    margin-bottom: 5px;
}
.intro-txt-block .title span {
    margin-right: 10px;
}
.intro-txt-block2 {
    background: #FFF;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
    margin-top: 10px;
}
.intro-txt-block2 ul {
    padding-left: 25px;
}
.intro-txt-block2 ul li {
    list-style: disc;
    margin: 5px 0;
}
.intro-txt-block2 .row {
    margin-left: 0;
}
.intro-txt-block2 .form-group {
    margin-bottom: 0;
}

.upload-verified-list {
    background-color: #FFF;
    border: #e4e4e4 1px solid;
    font-size: 1.1rem;
    text-align: center;
    padding: 20px 10px;
    border-radius: 10px;
}
.upload-verified-list h5 {
    margin-bottom: 15px;
}
.upload-verified-list input {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}
.upload-verified-list .btn-upload-verified {
    display: block;
    color: #8d8d8d;
    background-color: #f1f1f1;
    border: #e4e4e4 1px dashed;
    /*border: 1px dashed #c7c7c7;*/
    padding: 30px 15px 30px 15px !important;
    margin: 0 20px 20px 20px;
    text-align: center;
    border-radius: 10px;
}
.upload-verified-list label {
    margin-top: 30px;
}
.upload-verified-list label i {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #b2b2b2;
    border-radius: 40px;
    line-height: 40px;
    color: #FFF;
    margin-bottom: 15px;
}
.upload-verified-list label span {
    display: block;
}
.upload-verified-list .imgbox img {
    width: 100%;
}

/*================================================================================
    voucher-list
================================================================================*/
.voucher-block {
  max-width: 900px;
  margin: 80px auto;
  text-align: center;
}

.voucher-block-inner {
  display: flex;
  flex-wrap: wrap;
}
.voucher-give.voucher-block {
  margin-top: 20px;
}
.voucher-give .voucher-block-inner {
  justify-content: center;
}

.voucher-list {
  position: relative;
  width: 100%;
  padding-left: 65px;
  background: #FFF;
  border-radius: 5px;
  box-shadow: 0px 1px 8px 0px rgb(0 0 0 / 15%);
}

.voucher-list:before,
.voucher-list:after {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  content: ' ';
  top: 50%;
  margin-top: -15px;
  background: #f4f5fa;
  z-index: 9;
}

.voucher-list:before {
  box-shadow: inset -2px 0px 3px #e4e4e4;
  left: -19px;
}

.voucher-list:after {
  box-shadow: inset 2px 0px 1px #dfdfdf;
  right: -19px;
}

.voucher-list {
  display: flex;
  flex-wrap: wrap;
}
.voucher-list a.disabled {
  pointer-events: none;
  cursor: default;
}

.voucher-list .mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  text-align: center;
  color: #FFF;
  padding: 0 10px 0 15px;
  background-color: #ababab;
  border-right: #f1f1f1 2px dotted;
  border-left: #f1f1f1 1px dotted;
  font-size: 1.4rem;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: #c471ed;
  background: -moz-linear-gradient(45deg, #c471ed 1%, #f64f59 100%);
  background: -webkit-linear-gradient(45deg, #c471ed 1%, #f64f59 100%);
  background: linear-gradient(45deg, #c471ed 1%, #f64f59 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c471ed', endColorstr='#f64f59',GradientType=1 );
}

.voucher-list .mark:before,
.voucher-list .mark:after {
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  content: ' ';
  right: -10px;
  background:#f4f5fa;
}

.voucher-list .mark:before {
  box-shadow: inset 0px -2px 3px #e4e4e4;
  top: -8px;
}

.voucher-list .mark:after {
  box-shadow: inset 0px 2px 3px #dfdfdf;
  bottom: -8px;
}

.voucher-list.voucher1-on .mark {
  background: #D468A1;
  border-right: #fbe7f2 2px dotted;
}

.voucher-list.voucher2-on .mark {
  background: #1BBC9C;
  border-right: #ddf1ec 2px dotted;
}

.voucher-list.voucher3-on .mark {
  background: #2396da;
  border-right: #c6eaff 2px dotted;
}

.voucher-list .pic {
  width: 120px;
  flex: 0 0 120px;
  text-align: center;
  margin: 20px 10px;
}

.voucher-list .pic img {
    width: 100%;
}

@media (max-width:768px) {
    .voucher-list .pic {
        width: 80px;
        flex: 0 0 80px;
    }
}

.voucher-store-name {
  display: inline-block;
  background: #efefef;
  padding: 5px;
  margin-top: 5px;
  border: #e8e8e8 1px solid;
  border-radius: 5px;
  text-align: center;
}
.voucher-store-name span {
  display: inline-block;
  margin-right: 3px;
  color: #bb5050;
}
.voucher-store-name a {
  color: #FFF;
  background: #bb5050;
  display: inline-block;
  border-radius: 30px;
  padding: 1px 10px;
  font-size: 0.8rem;
}

.voucher-list .info {
  flex: 1; 
  position: relative;
  color: #666 !important;
  text-align: left;
  margin: 20px 20px 20px 0;
}

.voucher-list .info .title {
  color: #000;
  font-size: 1.2rem;
}
.voucher-list .info .title2 {
  color: #1b8090;
  font-size: 1.1rem;
  background: #f2f2f2;
  padding: 3px 7px;
  border-radius: 30px;
  margin: 6px 0;
}
.voucher-list .info .title a {
  color: #000;
}
.voucher-list .lottery-num {
    display: flex;
    align-items: center;
    background: #f9e8e8;
    border-radius: 30px;
    text-align: center;
    color: #e37929;
    font-size: 1.3rem;
    margin-top: 10px;
}
.voucher-list .icon-message.icon-bg-peach {
    height: 27px;
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
    margin-right: 10px;
    background: #e37929;
    font-size: 1.1rem;
    width: fit-content;
    padding: 3px 7px;
}
.voucher-list .voucher-status {
  position: absolute;
  top: 0;
  left: -50px;
}
.voucher-list .voucher-status img {
  width: 100px;
}
.voucher-list .btn-block {
  flex: 0 0 100%;
  margin-bottom: 20px;
}

/*================================================================================
    dashboard
================================================================================*/
#my_coin_notice, #fancybox_my_coin_notice {
    width: 90%;
    max-width: 400px !important;
    margin-top: 20px;
    border-radius: 15px;
    background-color: #fff;
}
.my_coin_header {
    margin-top: 25px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.my_coin_box {
    background: #fff3f3;
    border: #ff8383 1px solid;
    border-radius: 20px;
    padding: 25px 20px;
    width: 100%;
    max-width: 220px;
    margin: 0 auto 30px auto;
}
.my_coin_box .my_coin_info {
    position: relative;
    display: flex;
    align-items: center;
    color: #FFF;
    background: #ea5849;
    padding: 0px 20px;
    margin: 15px -32px 0 -32px;
    border-bottom-left-radius: 5px;
}
.ribbon-edge-topleft {
    position: absolute;
    z-index: 1;
    border-style: solid;
    border-width: 6px 12px 0 0;
    height: 0px;
    width: 0px;
    top: -6px;
    left: 0px;
    border-color: transparent #9B1724 transparent transparent;
}
.my_coin_box .my_coin_info:before, .my_coin_box .my_coin_info:after {
    content: '';
    position: absolute;
    right: -9px;
    border-right: 10px solid transparent;
}
.my_coin_box .my_coin_info:before {
    border-top: 27px solid #ea5849;
    top: 0;
}
.my_coin_box .my_coin_info:after {
    border-bottom: 27px solid #ea5849;
    bottom: 0;
}
.my_coin_box .my_coin_info .txt {
    background: rgb(255 255 255 / 65%);
    padding: 2px 10px;
    border-radius: 30px;
    color: #000;
    font-size: 0.9rem;
    margin-top: 4px
}
.my_coin_box .my_coin_info .icon img {
    width: 25px;
}
.my_coin_box .my_coin_info .price {
    font-size: 2.3rem;
    margin: 0 10px;
}
.my_coin_info .level-num-bar {
    background: none;
    text-align: center;
    min-width: fit-content;
    padding: 0;
    margin-left: 5px;
}
.my_coin_box2 .my_coin_info {
    position: relative;
    /*display: flex;*/
    display: none;
    align-items: center;
    width: fit-content;
    margin: -29px auto 0 auto;
    border-radius: 3rem;
    padding: 8px 20px;
    border-color: #ea5848;
    color: #FFF;
    background: #ea5848;
    cursor: pointer;
    font-size: 1rem;
    -webkit-box-shadow: 3px 3px #b44033;
    -moz-box-shadow: 3px 3px #b44033;
    box-shadow: 3px 3px #b44033;
}
.my_coin_box2 .my_coin_info .txt {
    align-self: flex-end;
    color: #f3d7d7;
}
.my_coin_box2 .my_coin_info .icon img {
    width: 25px;
}
.my_coin_box2 .my_coin_info .price {
    font-size: 2rem;
    margin: 0 10px;
    line-height: 0;
}
.my_coin_header h4 {
    color: #717071;
}
@media (max-width: 374px) {
    .my_coin_header h3 {
        font-size: 1.3rem;
    }
    .my_coin_header h4 {
        font-size: 1.2rem;
    }
}
.my_coin_header .w-coins-pic, 
.my_coin_header .m-coins-pic {
    position: relative;
    width: 120px !important;
    height: 120px !important;
    padding: 14px !important;
}
.my_coin_header .icon-avatar-price {
    /*right: -52px;
    bottom: 5px;*/
    right: -48px;
    bottom: -5px;
    width: 47px;
    height: 82px;
}
.coin-merge .icon-avatar-price {
    right: -81px;
}
#buy-mycoin-fancybox .my_coin_header .icon-avatar-price {
    right: -46px;
}
.info-dialog-box {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -15px;
    z-index: 10;
    text-align:center;
    background:#fff;
    border: solid 1px #954d4d;
    padding: 15px;
    border-radius: 50px;
    box-shadow: 1px 1px 10px rgb(0 0 0 / 14%);
}
.info-dialog-box span {
    display: block;
}
/*箭頭右*/
.info-dialog-box .arrow_r_int{
    width:0px;
    height:0px;
    border-width:10px;
    border-style:solid;
    border-color: transparent transparent transparent #954d4d;
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    right:-19px;
}
/*箭頭右-邊框*/
.info-dialog-box .arrow_r_out{
    width:0px;
    height:0px;
    border-width:10px;
    border-style:solid;
    border-color:transparent transparent transparent #fff;
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    right:-18px;
}
.dashboard-quick-list-block {
    position: relative;
    /*display: flex;
    flex-wrap: wrap;*/
}
.dashboard-quick-list-block:after {
    /*display: block;
    content: " ";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #c8c9ca;*/
}
.dashboard-quick-list {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 20px 0;
    text-align: left;
    justify-content: space-between;
    border: #d4762b 1px solid;
    padding: 5px 10px;
    border-radius: 50px;
}
.dashboard-quick-list .pic {
    width: 60px;
}
.dashboard-quick-list .pic img {
    width: 100%;
}
.dashboard-quick-list .txt {
    position: relative;
    flex: 1;
    margin-right: 15px;
}
.dashboard-quick-list .txt img {
    margin-right: 10px;
}
.dashboard-quick-list .border-line {
    display: none;
    width: 100%;
    height: 1px;
    background-color: #c8c9ca;
    margin: 5px 0;
}
.dashboard-quick-list .title {
    font-size: 1.2rem;
    color: #E37929;
}
.dashboard-quick-list .title a {
    color: #E37929;
    position: absolute;
    right: 11px;
    font-size: 1.7rem;
    transition: 0.3s;
    top: 50%;
    transform: translateY(-50%);
}
.dashboard-quick-list .outer-bar div a {
    width: 22px;
    height: 22px;
    margin: 0;
    background-color: #c8c9ca;
    border-radius: 4px;
}
.dashboard-quick-list .num {
}
.dashboard-quick-list:first-child .num {
    display: block;
}
.dashboard-quick-list .title a.btn-social-checkin {
    font-size: 0.8rem;
    padding: 5px 10px;
    right: 9px;
}
.social-swal .swal-icon img {
    width: 80px;
}
@media(min-width: 767px ) {
    /*.dashboard-quick-list .title a:hover {
        transform: scale(1.1);
    }*/
}
@media(max-width: 767px ) {
    /*.dashboard-quick-list-block {
        padding: 30px 0;
    }
    .dashboard-quick-list {
        width: 100%;
        margin: 10px;
        background: #FFF;
        z-index: 1;
        border-radius: 100px;
        border: #dedede 1px solid;
        box-shadow: 1px 1px 6px rgb(0 0 0 / 6%);
    }
    .dashboard-quick-list .border-line {
        display: none;
    }
    .dashboard-quick-list .title {
        position: static;
    }
    .dashboard-quick-list .title a {
        font-size: 2rem;
        top: 50%;
        transform: translateY(-50%);
    }
    .dashboard-quick-list .txt img {
        display: block;
        max-height: 20px;
    }
    .dashboard-quick-list .num {
        text-align: left;
        width: 100%;
        height: 22px;
        margin: 0;
    }
    .dashboard-quick-list .media-btn {
        margin-top: 5px;
        margin-bottom: -5px;
    }*/
    .info-dialog-box {
        top: -15px;
        left: -10px;
        font-size: 0.8rem;
    }
}
@media(max-width: 430px ) {
    .dashboard-quick-list .title {
        font-size: 1.3rem;
    }
    
}
@media(max-width: 374px ) {
    .dashboard-quick-list:first-child .title a {
        top: -1px;
        transform: none;
    }
}
@media(min-width: 768px ) {
    /*.dashboard-quick-list:nth-child(2n) {
        top: 55px;
        flex-direction: row-reverse;
        text-align: right;
    }
    .dashboard-quick-list:nth-child(2n) .title {
        padding-left: 45px;
        padding-right: 0;
    }
    .dashboard-quick-list:nth-child(2n) .title a {
        left: 20px;
        right: inherit;
    }*/
}


/*================================================================================
    womo-service-into-fancybox
================================================================================*/
.womo-service-intro-fancybox {
    padding: 25px;
    width: 90%;
    max-width: 350px;
    border-radius: 20px;
    display: inline-block;
    background: #ffffff;
}
.womo-service-intro-content {
    margin: -25px -25px 30px -25px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding-top: 20px;
    background-image: url(https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/bg_activity_over.jpg);
    background-size: cover;
}
.womo-service-intro-fancybox h3 {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 2px;
}
.womo-service-intro {
    text-align: center;
}
.exchange-coin-pic {
    margin-top: -70px;
}
.exchange-coin-row {
    display: flex;
    text-align: center;
    justify-content: space-around;
}
.exchange-coin-row > div {
    /*background: #daebe7;
    box-shadow: 3px 3px #daebe7;*/
    padding: 15px;
    border-radius: 10px;
    flex: 1;
}
.exchange-coin-row > div:last-child {
    /*background: #f7e0dd;
    box-shadow: 3px 3px #f7e0de;*/
}
.exchange-coin-box {
    background: #fbfbfb;
    border: #f2f2f2 1px solid;
    margin: 0 10px;
}
.exchange-coin-box .box-header {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: #f2f2f2 1px solid;
    margin: 0 -15px 20px -15px;
    padding-bottom: 10px;
    height: 41px;
}
.exchange-coin-box .box-header .pic {
    margin-right: 5px;
}
.exchange-coin-box .box-header .pic img {
    width: 30px;
}
.exchange-coin-row .icon {
    margin: 10px 0;
    /*-webkit-filter: grayscale(100%); 
    filter: grayscale(100%);*/
    margin-top: -50px;
}
.exchange-coin-row .icon img {
    width: 35px;
}
.exchange-coin-row .mid-icon {
    flex: initial;
    padding: 0;
    align-self: center;
}
.icon.flip {
    /*-moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);*/
}
.exchange-coin-row .txt {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 1px 1px #FFF;
}

/*================================================================================
    discuss
================================================================================*/
.discuss-reply-block .title-header {
    border-top: #f4f5fa 1px solid;
    padding: 15px 1.5rem 0 1.5rem;
    margin: 10px -1.5rem;
}

/*discuss-polist-media-block*/
.discuss-polist-media-block {
    margin: 0 -7px;
    background-color: #FFF;
    padding: 10px;
}
.discuss-polist-media-block .act-polist-media-block-inner {
    display: flex;
    flex-wrap: wrap;
}
.discuss-polist-media-block .act-polist-media {
    width: 48%;
    margin: 1%;
    box-shadow: 0px 1px 8px 1px rgb(62 57 107 / 15%);
}
.act-polist-media .author {
    min-height: 40px;
}


/*discuss-message-block*/
.discuss-message-block {
    padding: 15px;
}
.discuss-message-block .act-polist-media-block-inner {
    /*display: flex;
    flex-wrap: wrap;*/
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari 和 Chrome */
    column-count:2;
    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    padding: 0;
}
.discuss-message-block .act-polist-media {
    display: block !important;
    position: relative;
    /*width: 48%;
    max-width: 48%;*/
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    overflow: auto;
    margin-bottom: 15px;
    box-shadow: 0px 1px 8px 1px rgb(62 57 107 / 15%);
    background-color: #fadede;
}
.discuss-message-block .act-polist-media.act-polist-media-title {
    background: #FFF;
}
.act-polist-media.fancybox-content {
    padding: 0;
    width: 100%;
    max-width: 300px;
}
.act-polist-media.fancybox-content .pic {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.act-polist-media.fancybox-content .txt {
    padding: 10px;
    text-align: left;
}
.act-polist-media.fancybox-content .btn-go-link {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.discuss-message-block .info-box .txt {
    display: block;
    text-align: left;
    padding: 0px 10px;
    font-size: 1.1rem;
}
.btn-go-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFF;
    background-color: #f1c7c7;
    padding: 5px 15px;
}
.btn-go-link span {
    display: block;
}
.btn-edit-po-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #FFF;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    box-shadow: 0px 1px 8px 1px rgb(62 57 107 / 15%);
}
.discuss-reply-list-block {
    padding: 0 10px 10px 10px;
}
.discuss-reply-list {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 30px;
    background-color: #f2f2f2;
    margin-bottom: 5px;
}
.discuss-reply-list .pic-img {
    margin-right: 5px;
}
.discuss-reply-list .pic-img img {
    display: block;
    width: 25px;
    border-radius: 25px;
}
.discuss-reply-list .txt {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/**/
.media-discuss-list {
    background-color: #f2f2f2;
}
.media-discuss-list a {
    display: flex;
    align-items: center;
}
.media-discuss-list .pic {
    width: 200px;
}
.media-discuss-list .pic .bg {
    padding-bottom: 100%;
    width: 100%;
}
.media-discuss-list .info-box {
    padding: 15px;
}
.media-discuss-list .author img {
    width: 30px;
}
.media-discuss-list .txt {
    margin-top: 10px;
    font-size: 1.2rem;
    color: #000;
}

@media (min-width: 768px) {
    .discuss-polist-media-block {
        margin: 0;
    }
    .discuss-polist-media-block .act-polist-media {
        width: 31.33%;
    }
    .discuss-message-block {
        padding: 15px 15px 70px 15px;
    }
    .discuss-message-block .act-polist-media-block-inner {
        column-count: 3;
    }
}


/*================================================================================
    womo chat
================================================================================*/
.have-coin-user-list-block {
    display: flex;
    border: 0;
    padding: 0;
}
.have-coin-user-list-block.ps-active-x {
    padding-bottom: 18px;
}
.have-coin-user-list {
    margin-right: 5px;
}
.have-coin-user-list img {
    width: 40px;
}
.btn-add-chat {
    position: relative;
    height: 40px;
}
.btn-add-chat a {
    position: absolute;
    top: 10px;
    margin-left: -103px;   
}
.btn-add-chat.on {
    
}
.btn-add-chat.on a {
    position: fixed;
    top: 15px;
    z-index: 1000;
}
.download_app_bar .btn-add-chat.on a {
    top: 74px;
}
@media (max-width:768px) {
    .btn-add-chat a {
        right: 0;
         margin-left: 0;
    }
    .btn-add-chat.on a {
        right: 15px;
    }
}




/*================================================================================
    grayscale
================================================================================*/
.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    filter: gray
}

.grayscale.grayscale-fade {
    transition: filter .5s
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .grayscale.grayscale-fade {
        -webkit-transition: -webkit-filter .5s;
        transition: -webkit-filter .5s
    }
}

.grayscale.grayscale-fade:hover,
.grayscale.grayscale-off {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.grayscale.grayscale-replaced {
    -webkit-filter: none;
    filter: none
}

.grayscale.grayscale-replaced>svg {
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    opacity: 1
}

.grayscale.grayscale-replaced.grayscale-fade:hover>svg,
.grayscale.grayscale-replaced.grayscale-off>svg {
    opacity: 0
}




/*================================================================================
    品牌專業付費方案
================================================================================*/
.social_credit_price_box {
    margin-top: 30px;
}
.social_credit_owl_box{
    padding: 30px 30px 20px 30px;
    background: linear-gradient(to bottom, #cc4f6c 0%,#e27828 100%);
    margin-bottom: 40px;
}
.social_credit_owl{
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.social_credit_content{
    background: #803546;
    border: rgb(255 255 255 / 80%) 3px solid;
    border-radius: 15px;
    padding: 20px;
    color: #fff;
    min-height: 300px;
}
.social_credit_owl .owl-nav [class*='owl-']{
    top: calc(50% - 15px);
}
.social_credit_price_list{
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -40px;
}
.social_credit_price_item{
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 40px;
    width: 50%;
}
.social_credit_price_card{
    box-shadow: 0px 1px 8px 1px rgba(62, 57, 107, 0.07);
    border-radius: 15px;
    overflow: hidden;
}
.social_credit_title{
    padding: 15px;
}
.social_credit_title h5 {
    color: #ffff;
    margin-bottom: 0;
    font-size: 1.3rem;
}
.social_credit_price_card.green .social_credit_title {
    background-color: #63b3a1;
}
.social_credit_price_card.orange .social_credit_title {
    background-color: #e88442;
}
.social_credit_deposit {
    background-color: #f3f3f3;
    padding: 2rem 1rem 2rem 2rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.45;
}
.social_credit_deposit span{
    font-size: 2.8rem;
    margin-right: 8px;
}
.social_credit_price_card.green .social_credit_deposit {
    color: #63b3a1;
}
.social_credit_price_card.orange .social_credit_deposit {
    color: #e88442;
}
.social_credit_price_card .card-body {
    flex: 1 1 auto;
    padding: 1.5rem;
    background-color: #fff;
}
.social_credit_feature_list>h4{
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0;
}
.social_credit_feature_list .media{
    margin-top: 5px;
    padding-left: 1rem;
    border-bottom: 1px solid #efefef;
    padding: 0.5rem 1rem;
    border-top: 0;
}
.social_credit_btn{
    margin-top: 1.5rem;
}
.social_credit_btn .btn{
    width: 100%;
}
.taste_social_credit_btn{
    margin-top: 1rem;
    text-align: center;
}
.social_credit_bonus{
    margin-top: 1.5rem;
}
.social_credit_bonus_item{
    display: flex;
}
.social_credit_bonus_item+.social_credit_bonus_item{
    margin-top: 0.5rem;
}
.social_credit_bonus_item .icon{
    width: 16px;
    padding-top: 1px;
}
.social_credit_bonus_item .txt{
    flex: 1;
    padding-left: 4px;
}
.social_credit_bonus_item .txt svg{
    margin-left: 2px;
    margin-right: 2px;
}
.social_credit_tips{
    margin-top: 1.5rem;
}
.social_credit_tips_item{
    display: flex;
}
.social_credit_tips_item+.social_credit_tips_item{
    margin-top: 1rem;
}
.social_credit_tips_item .icon{
    width: 16px;
}
.social_credit_tips_item .icon img{
    width: 100%;
    position: relative;
    top: -1px;
}
.social_credit_tips_item .txt{
    flex: 1;
    padding-left: 4px;
}
.social_credit_tips_item .txt h5{
    margin-bottom: 4px;
    font-weight: 600;
    color: #000;
}
.social_credit_tips_item .txt p {
    margin-bottom: 0;
}
.social_credit_discount{
    display: block;
    border: solid 1px #cc4f6d;
    padding: 8px 16px 8px 0;
    margin-top: 1.5rem;
    border-radius: 15px;
    background-color: #fff;
}
.social_credit_discount_txt{
    padding-left: 16px;
    flex: 1;
}
.social_credit_discount_txt h5 {
    margin-bottom: 4px;
    font-weight: 600;
    color: #000;
}
.social_credit_discount_price .original_price .price{
    text-decoration:line-through;
}
.social_credit_discount_price .special_price{
    margin-left: 8px;
}
.social_credit_discount_content{
    display: flex;
    align-items: center;
}
.social_credit_discount_tag{
    position: relative;
    left: -4px;
    height: 28px;
    background-color: #cc4f6d;
    color: #fff;
    padding: 4px 8px;
    border-radius: 2px 0 0 2px;
}
.social_credit_discount_tag::after {
    background: transparent;
    border-bottom: 14px solid transparent;
    border-left: 10px solid #cc4f6d;
    border-top: 14px solid transparent;
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
}
.social_credit_bonus_title h4{
    color: #e88442;
}
.social_credit_bonus_content{
    margin-top: 1.5rem;
    font-size: 1.3rem;
    background-color: #f7f8f9;
    padding: 16px;
    line-height: 1.5;
    border-radius: 4px;
    color: #000;
}
.bonus_directions_list{
    margin-top: 1rem;
    margin-bottom: 0;
    list-style: disc;
    padding-left: 2rem;
}
.bonus_directions_item+.bonus_directions_item{
    margin-top: 8px;
}
.social_credit_advance_txt{
    margin-top: 1rem;
}
.social_credit_payday{
    padding: 8px;
}
.social_credit_payday a{
    justify-content: center;
    color: #9a9b9d;
}
.social_credit_payday a svg{
    margin-left: 4px;
}
.social_credit_advance_cancel{
    margin-top: 1.5rem;
}
.social_credit_advance_cancel a{
    text-decoration: underline;
}
.social_credit_view_bill{
    margin-top: 1rem;
}

@media screen and (max-width: 1199px){
    .social_credit_price_item{
    }
}
@media screen and (max-width: 991px){
    .social_credit_price_item{
        width: 100%;
    }
}
@media screen and (max-width: 414px) {
    .social_credit_owl_box{
        margin-left: -30px;
        margin-right: -30px;
    }
}

/*================================================================================
    tags-list-block
================================================================================*/
.search-bar-border {
    position: relative;
    padding: 5px;
    margin-bottom: 10px;
}
.search-bar-border .btn-search-all {
    position: absolute;
    right: 5px;
    top: 5px;
    background: transparent;
}
.search-bar-border .form-control {
    border-radius: 30px;
    padding-right: 40px;
}
.tags-list-block {
    display: flex;
    flex-wrap: wrap;
    padding: 0 3px;
}
.tags-list {
    position: relative;
    width: 33.33%;
    padding: 2px;
}
.tags-list-r4 {
    width: 25%;
}
.tags-list a {
    display: block;
    position: relative;
}
.tags-list .pic img {
    width: 100%;
}
.tags-list .gallery_swiper_pic {
    background-color: #000;
}
.tags-list .gallery_swiper_pic .bg {
    opacity: 0.75;
}
.gallery_swiper_feeling_pic {
    opacity: 0.8;
    background: #f2a367;
    background: -moz-linear-gradient(left, #f2a367 0%, #e27d94 100%);
    background: -webkit-linear-gradient(left, #f2a367 0%, #e27d94 100%);
    background: linear-gradient(to right, #f2a367 0%, #e27d94 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2a367', endColorstr='#e27d94', GradientType=1);
}
.gallery_swiper_feeling_pic .bg {
    opacity: 1;
    background-size: 50% !important;
    background-color: transparent !important;
}
.tags-num {
    visibility: hidden;
    z-index: -1;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 30%);
    color: #FFF;
    transition: 0.3s;
}
.tags-num-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}
.tags-list a:hover .tags-num {
    z-index: 15;
    opacity: 1;
    visibility: visible;
}
.tags-num img {
    width: 20px;
    margin-right: 10px;
}

.tags-list .gallery_swiper_music .bg, 
.act-polist-media .gallery_swiper_music .bg {
    /*background-size: 27%;*/
    background-size: cover;

}
.tags-list .gallery_swiper_video, 
.act-polist-media .gallery_swiper_video {
    background-color: #000;
}
.shorts-ranking-list .gallery_swiper_video:after, 
.tags-list .gallery_swiper_video:after, 
.act-polist-media .gallery_swiper_video:after, 
.home-article-list-block .gallery_swiper_video:after, 
.privilege-row-list .pic-video a:after {
    display: block;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 60px;
    transform: translate(-50%, -50%);
    background-image: url('https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_youtube_w.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    content: " ";
}
.privilege-row-list .pic-music a:after {
    display: block;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 60px;
    transform: translate(-50%, -50%);
    background-image: url('https://womophoto.s3.ap-northeast-1.amazonaws.com/public/assets/images/icon/icon_musical.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    content: " ";
}
.privilege-row-list .pic-feeling {
    text-align: center;
    background: #f2a367;
    background: -moz-linear-gradient(left, #f2a367 0%, #e27d94 100%);
    background: -webkit-linear-gradient(left, #f2a367 0%, #e27d94 100%);
    background: linear-gradient(to right, #f2a367 0%, #e27d94 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2a367', endColorstr='#e27d94', GradientType=1);
}
.privilege-row-list .pic-feeling a {
    display: block;
    padding: 25px 10px !important;
}
.privilege-row-list .pic-feeling img {
    width: 50%;
}
.tags-list .off .off-info, 
.act-polist-media .off .off-info {
    height: 100% !important;
    z-index: 11;
}
.btn-add-article a {
    background: #FFF;
    margin: 10px 0;
}

/*short*/
.shorts-ranking-block {
    /*display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 30px 0;*/
}
.shorts-ranking-list {
    position: relative;
    width: 23%;
    margin: 0 2%;
    padding: 7px;
    background: #FFF;
    box-shadow: rgb(0 0 0 / 11%) 1px 1px 20px;
    border-radius: 20px;
}
.shorts-ranking-list1 {
    width: 27%;
}
.shorts-ranking-list:nth-child(1) .mark, 
.shorts-ranking-list:nth-child(2) .mark, 
.shorts-ranking-list:nth-child(3) .mark {
    top: -4% !important;
    left: 5% !important;
}
.shorts-ranking-video {
    position: relative;
    margin: 0px 10% 40px 10%;
}
.tags-shorts-list-block .tags-list {
    padding: 5px;
}
.tags-shorts-list-block .tags-list .rank-num {
    position: absolute;
    top: 2px;
    left: 4px;
    background-color: #000000;
    color: #FFF;
    padding: 5px 15px;
    z-index: 10;
    border-radius: 6px;
    border-top-left-radius: 17px;
    border-bottom-right-radius: 10px;
}
.shorts-ranking-list .info-box, 
.tags-list .info-box {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 12;
}
.shorts-ranking-list .info-box .author, 
.tags-list .info-box .author {
    display: flex;
    align-items: center;
    color: #FFF;
}
.shorts-ranking-list .info-box .outline-pic, 
.tags-list .info-box .outline-pic {
    width: 35px;
    margin-right: 10px;
    border: #FFF 2px solid;
    border-radius: 35px;
}
.shorts-ranking-list .info-box .outline-pic img, 
.tags-list .info-box .outline-pic img {
    width: 100%;
}
.shorts-ranking-list .gallery_swiper_video_shorts, 
.tags-shorts-list-block .gallery_swiper_video_shorts, 
.tags-shorts-list-block .tags-num {
    border-radius: 15px;
}
.mark-num {
    position: absolute;
    left: -11px;
    top: -11px;
    border-radius: 30px;
    border: #CCC 3px solid;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    background: #FFF;
    z-index: 10;
}

.mark-num {
    background-image: url(../images/icon/icon_crown_num1.png);
}

@media (max-width: 768px) {
    .tags-list-block {
        margin: 0 -9px;
        padding: 0;
    }
    .tags-shorts-list-block {
        margin: 0;
    }
    .tags-list-r4 {
        width: 50%;
    }
    .search-bar-border {
        margin-top: 20px;
    }
    .tags-num {
        display: none !important;

    }
}

/*================================================================================
    womo-task-block
================================================================================*/
.womo-task-block {
    margin: 0;
}
.task-banner-block {
    position: relative;
}
.task-banner-block img {
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.task-banner-block .btn {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 5px 8px;
}
.egg_task_block h5.bg-black {
    width: fit-content;
    color: #FFF;
    background-color: #000;
    border-radius: 30px;
    padding: 5px 15px;
    margin: -8px -15px;
}
.womo-task-block .madia-header-title {
    position: relative;
}
.task-process-num {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.task-process-num .btn {
    padding: 4px 12px;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
}
.womo-task-list .media .txt {
    font-size: 1.1rem;
}
.womo-task-list .txt-bonus {
    margin-top: -5px;
}
.womo-task-list .media-right {
    text-align: right;
}
.womo-task-list .media .btn {
    display: inline-flex;
    align-items: center;
}
.womo-task-list .media .btn i {
    line-height: 0;
}

/*womo-task-list-block*/
.womo-task-list-block .topic-activity-list .txt {
    flex: 1;
}
.womo-task-list-block .topic-activity-list .txt h3 {
    margin-top: 10px;
}
.womo-task-list-block .topic-activity-list .txt .title {
    position: relative;
    color: #c17171;
    font-size: 1.2rem;
}
.womo-task-list-block .topic-activity-list .txt .title .num {
    position: absolute;
    right: 0;
    top: 0;
}
.womo-task-list-block .topic-activity-list .progress-box {
    padding-top: 10px;
    margin-top: 10px;
    border-top: #f5f5f5 1px solid;
}
.womo-task-list-block .topic-activity-list .progress {
    margin-top: 0;
}
.womo-task-list-block .topic-activity-list .progress:after {
    display: none;
}
.womo-task-list-block .progress-bar {
    margin: 0;
}
@media (min-width: 768px) {
    .womo-task-list-block .topic-activity-list {
        width: 98%;
    }
    .womo-task-list-block .topic-activity-list a {
        display: flex;
    }
    .womo-task-list-block .topic-activity-list .pic {
        width: 250px;
    }
    .womo-task-list-block .topic-activity-list .pic span {
        border-top-right-radius: 0;
    }
}


/*================================================================================
    earning-intro-banner-block
================================================================================*/
.earning-intro-banner-block {
    margin-bottom: 30px;
}
.earning-intro-banner-block .item-list img {
    width: 100%;
    border-radius: 20px;
}
.earning-intro-banner-block .swiper-pagination {
    position: relative;
    margin-top: 20px;
}
.earning-intro-banner-block .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}
.earning-intro-banner-block .swiper-pagination-bullet-active {
    background-color: #000 !important;
}
#earnings-rules .withdraw_rule_item {
    padding: 10px;
}


/*================================================================================
    store-coinExchange-block
================================================================================*/
.coinExchange-info {
    align-items: center;
}
.coinExchange-info .media-left {
    margin-right: 15px;
}
.coinExchange-info .media-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.coinExchange-info .media-body .left-info {
    flex: 1;
}
.coinExchange-info .pic img {
    width: 60px;
}
.coinExchange-info .media-body .left-info > .txt {
    margin-bottom: 10px;
}
.exchange-info-block {
    display: flex;
    align-items: center;
}
.exchange-info-list {
    display: inline-flex;
    align-items: center;
}
.exchange-info-list + .exchange-info-list {
    border-left: #ebebeb 1px solid;
    margin-left: 10px;
    padding-left: 10px;
}
.coinExchange-list:last-child {
    padding-bottom: 1px;
}
.coinExchange-list .media {
    border-top-width: 1px;
}
.coinExchange-list .new-mess {
    padding: 7px;
    background-color: #f9f9f9;
    border-radius: 30px;
    margin: 0 1rem 1rem 1rem;
    font-size: 0.9rem;
}
/*coinExchange-modal*/
.coinExchange-modal .exchange-coin-row .txt {
    font-size: 1.2rem;
    color: #000;
}
.coinExchange-modal .exchange-coin-row .m-coins {
    line-height: 1;
}

@media (max-width: 768px) {
    .coinExchange-info .media-left {
        align-self: flex-start;
    }
    .coinExchange-info .media-body .right-btn {
        width: 100%;
        margin-top: 15px;
        display: flex;
    }
    .coinExchange-info .media-body .right-btn a {
        flex: 1;
    }
    .coinExchange-info .media-body .right-btn a + a {
        margin-left: 10px;
    }
}


/*================================================================================
    card-hot-coin-list-block
================================================================================*/
.card-hot-coin-list-block {
    margin-bottom: 50px;
    border-radius: 13px;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 8%);
}
.card-hot-coin-list-block h4 {
    margin-bottom: 20px;
    color: #494949;
}
.hot-coin-list {
    flex: 1;
    align-items: center;
}
.hot-coin-list + .hot-coin-list {
    /*margin-top: 25px;*/
}
.hot-coin-list .pic, 
.related-user-list .pic {
    margin-right: 15px;
}
.hot-coin-list .pic img, 
.related-user-list .pic img {
    border-radius: 100%;
    width: 60px;
}
.hot-coin-list .username, 
.related-user-list .username {
    color: #000;
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.hot-coin-list .media-right {
    display: flex;
    text-align: center;
}
.hot-coin-list .media-right span + span, 
.hot-coin-list .media-right span + a {
    margin-left: 10px;
}
.hot-coin-list .media-right .btn, 
.related-user-list .media-right .btn {
    padding: 5px 10px;
}
.hot-coin-list .media-right span .txt, 
.related-user-list .media-right span .txt {
    display: block;
    margin-top: 5px;
}
.hot-coin-list .media-right .btn.btn-w-b {
    width: 106px;
}
.btn.btn-coin-left {
    position: relative;
    padding: 5px 10px 5px 49px !important;
}
.btn-coin-left .m-coins-pic, 
.btn-coin-left .w-coins-pic {
    position: absolute;
    top: -7px;
    left: -1px;
}

.related-user-list-block {

}
.related-user-list {
    align-items: center;
    background: #FFF;
    padding: 10px;
    border-radius: 10px;
}
.related-user-list + .related-user-list {
    margin-top: 7px;
}
.related-user-list .pic img {
    width: 50px;
}

.btn-more-bg-gray {
    display: block;
    background: #f3f3f3;
    border-radius: 30px;
    padding: 5px;
}

.no-user-status-block .icon img {
    width: 80px;
}

@media (min-width: 767px) {
    .hot-coin-list-block {
        display: flex;
        justify-content: center;
    }
    .hot-coin-list {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
    }
    .hot-coin-list + .hot-coin-list {
        border-left: #e6e6e6 1px solid;
    }
    .hot-coin-list .media-body {
        flex: none;
    }
    .hot-coin-list .media-right {
        width: 100%;
        justify-content: center;
        margin-top: 20px;
    }

    /*hot-coin-list-block2*/
    .hot-coin-list-block2 {
        flex-wrap: wrap;
    }
    .hot-coin-list-block2 .hot-coin-list {
        padding: 30px 0;
        width: calc(50% - 20px);
        margin: 10px;
        box-shadow: 1px 1px 5px rgb(0 0 0 / 8%);
        background-color: #FFF;
        border-radius: 15px;

    }
}
@media (max-width: 767px) {
    .card-hot-coin-list-block {
        margin-left: 15px;
        margin-right: 15px;
    }
    .hot-coin-list + .hot-coin-list {
        margin-top: 20px;
        padding-top: 20px;
        border-top: #ededed 1px solid;
    }
    .hot-coin-list .media-right {
        flex-wrap: wrap;
        width: 110px;
    }
    .hot-coin-list .media-right span {
        display: block;
        width: 100%;
    }
    .hot-coin-list .media-right span + span {
        margin-left: 0;
        margin-top: 5px;
    }
    .hot-coin-list .media-right span + span .btn-coin-left {
        margin-top: 12px;
    }
    .hot-coin-list .media-right span + a.btn-coin-left {
        margin-top: 20px;
    }
    .hot-coin-list .media-right .btn {
        width: 100% !important;
    }

    /*hot-coin-list-block2*/
    .hot-coin-list-block2 {
        margin: 0 10px;
    }

}

/*================================================================================
    RWD
================================================================================*/
@media (max-width: 768px) {
    html body.fixed-navbar {
        padding-top: 64px;
    }
    .right-content-block .card {
        border-radius: 0;
    }
    #my-favor-article-modal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #my-favor-article-modal .polist-media {
        margin: 0 !important;
    }
    #my-favor-article-modal .btn-add-article {
        padding: 0 10px;
    }

    /*--------myfavor-list--------*/
    .myfavor-list .media .media-right.icon {
        width: 100%;
        padding: 0;
        margin-top: 15px;
        display: flex;
    }
    .myfavor-list .media .media-right.icon .btn {
        flex: 1;
    }

    /*---------user-----------*/
    .user-profile-block .user-info .media {
        display: block;
    }
    .follow-num {
        top: 15px;
    }
    .user-profile-hide span {
        padding: 25px;
    }

    /*---------message-------------*/
    .message-list2 .media {
        flex-flow: column;
    }
    .message-list2 .media a {
        width: 100%;
    }
    .message-list2 .date {
        position: relative;
        right: 0;
        top: 0;
    }
    .message-list2 .media a.btn-add-friend-chat {
        margin-bottom: 1.5rem;
        display: block;
        width: 90%;
    }

    /*----------store--------------*/
    .store-info .media .media-right {
        width: 100%;
        padding: 10px 0;
        display: flex;
    }
    .store-info .media-btn .btn {
        padding: 10px;
        margin: 0 2px;
    }
    .store-info .media-btn .btn:first-child {
        flex: 1;
    }
    .store-info2 .media-btn .btn {
        flex: 1;
    }
    .store-info .media .hide-coins span {
        display: inline-block;
    }
    .store-info .store-rate {
        position: absolute;
        top: 60px;
        right: 1rem;
    }
    .store-info2 .store-rate {
        display: block;
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px;
    }
    .store-coupon-list .media-right {
        flex: 0 0 100%;
        padding-left: 0 !important;
        margin-top: 15px;
        display: flex;
    }
    .store-coupon-list .media-right a {
        flex: 1;
        margin: 0 5px;
    }
    #store-coupon-reach .media .btn {
        width: 100%;
    }
    .btn-back-topic-list {
        padding-right: 10px;
        right: -10px;
        top: 20px;
    }
    .store-info2 .media-body {
        flex: 0 0 100%;
    }
    .store-info2 .media-heading {
        margin-top: 20px;
    }
    .store-info2 .task-desc {
        margin: 5px 0;
    }
    .store-info2 .media-btn-social2 {
        margin: 0 -1.5rem;
    }
    .media-btn-social2 .outer-bar div {
        overflow: auto;
    }
    .suspend-mark {
        top: 75px;
        left: 68px;
        width: 80px;
    }
    .store-info .task-desc.suspend-on {
        
    }
    .store-info2 .task-desc.suspend-on {
        margin: 10px 0;
    }
    .store-info2 .suspend-mark {
        top: 50px;
        left: 60px;
    }
    .topic-pic .suspend-mark {
        left: 50px;
        top: 80px;transform: rotate( -5deg);
    }

    /*---------kol------------*/
    .btn-go-kol-page {
        float: right;
        margin-top: 40px;
        border-radius: 5px;
        margin-right: 5 !important;
        background: #FFF;
        box-shadow: 0px 0px 5px 2px rgba(62, 62, 62, 0.12);
    }
    .kol_detail_block .store-info .media-heading {
        margin-top: 40px;
    }
    .btn-go-kol-page i.ft-home, 
    .btn-go-kol-page i.la {
        margin-right: 0 !important;
        background: #ef7c25;
        background: -moz-linear-gradient(left, #ef7c25 0%, #da5271 100%);
        background: -webkit-linear-gradient(left, #ef7c25 0%, #da5271 100%);
        background: linear-gradient(to right, #ef7c25 0%, #da5271 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c25', endColorstr='#da5271', GradientType=1);
    }
    .btn-go-kol-page span {
        display: block;
        color: #8a8a8a;
        margin-top: 5px;
    }

    /*---------cart-----------*/
    .cart-list-block .cart-table .cart-row {
        position: relative;
        display: block;
        padding-left: 120px;
    }
    .cart-list-block .cart-table .cart-row > div {
        display: block;
        padding: 5px;
    }
    .cart-list-block .cart-table .cart-row .pic {
        float: left;
        margin-left: -120px;
        margin-top: 10px;
        padding-left: 20px;
    }
    .cart-list-block .cart-table .cart-row .title {
        padding-left: 0;
        padding-right: 35px;
    }
    .cart-list-block .cart-table .cart-row .title .media-heading {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    .cart-list-block .cart-table .cart-row .quantity {
        width: 100%;
    }
    .cart-list-block .cart-table .cart-row .icon.wm-coins {
        font-size: 1.5rem;
    }
    .cart-list-block .cart-table .cart-row .quantity, 
    .cart-list-block .cart-table .cart-row .title .icon, 
    .cart-list-block .cart-table .cart-row .number, 
    .cart-list-block .cart-table .cart-row .time, 
    .cart-list-block .cart-table .cart-row .total {
        display: block;
        padding-left: 50px;
        position: relative;
    }
    .cart-list-block .cart-table .cart-row .quantity:before, 
    .cart-list-block .cart-table .cart-row .title .icon:before, 
    .cart-list-block .cart-table .cart-row .number:before, 
    .cart-list-block .cart-table .cart-row .time:before, 
    .cart-list-block .cart-table .cart-row .total:before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: 15px;
        color: #ababab;
    }
    .cart-list-block .cart-table .cart-row .quantity:before {
        content: "數量";
    }
    .cart-list-block .cart-table .cart-row .title .icon:before {
        content: "單價";
       
    }
    .cart-list-block .cart-table .cart-row .total:before {
        content: "總計";
    }
    .cart-list-block .cart-table .cart-row .delete a.btn-delete {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .cart-list-block .cart-table .cart-row.cart-row-th {
        display: none;
    }
    .wish-list-block .cart-table .cart-row .title .icon {
        padding-left: 0;
    }
    .wish-list-block .cart-table .cart-row .title .icon::before {
        display: none;
    }
    .wish-list-block .cart-table .cart-row .delete {
        display: flex;
        margin-left: -115px;
        margin-top: 20px;
    }
    .wish-list-block .cart-table .cart-row .delete a {
        width: 50%;
        margin-left: 10px;
    }
    /*------order-list--------*/
    .order-list-block .cart-table .cart-row {
        padding-left: 20px;
    }
    .order-list-block .cart-table .cart-row .number, 
    .order-list-block .cart-table .cart-row .time, 
    .order-list-block .cart-table .cart-row .total {
        padding-left: 80px;
    }
    .order-list-block .cart-table .cart-row .delete a {
        margin-left: 0;
        width: 100%;
    }
    .order-list-block .cart-table .cart-row .number:before {
        content: "訂單編號";
    }
    .order-list-block .cart-table .cart-row .time:before {
        content: "購買時間";
    }
    .order-list-block .cart-table .cart-row .total:before {
        content: "購買金額";
    }

    /*---------invite----------*/
    .privilege-card {
        margin: 0 20px;
    }

    /*----------my egg-----------*/
    .btn-egg-gift span {
        display: none;
    }

    /*-----------share------------*/
    .share-fancybox {
    }

    /*----------FANCYBOX----------------*/
    .confirm-card {
        width: 90%;
    }

    /*----------scramble-share----------------*/
    .friend-scramble-share-block .store-bg-card .media {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .friend-scramble-share-block .media-list .media .media-left {
        margin-right: 0 !important;
    }
    .friend-scramble-share-block .media-list .media .media-content {
        display: block;
        margin-top: 15px;
        width: 100%;
    }

}
@media (max-width: 415px) {
    #store-coupon-reach .store-coupon-list .date span {
        /*display: block;*/
    }
    .store-coupon-list .media {
        box-shadow: 0px 0px 9px rgb(0 0 0 / 10%);
        margin: 15px;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 0;
    }
    .store-coupon-list .media .store_pic {
        flex: 0 0 100%;
        padding-right: 0;
        margin-bottom: 15px;
    }
    .store-coupon-list .media .store_pic img {
        width: 100% !important;
        border: 0;
        box-shadow: none;
    }
    .store-coupon-list .media .media-body {
        margin: 0 15px !important;
    }
    .store-coupon-list .media .media-right {
        padding: 0 10px !important;
    }
    .store-coupon-list .btn-add-favor {
        right: 10px;
        top: 10px;
        bottom: initial;
        left: initial;
        transform: none;
    }
    .store-coupon-list .reach-mark {
        top: 30%;
    }
    .myfavor-list.store-coupon-list .reach-mark {
        right: 15px;
        left: initial;
    }

    /*---- store-news-block ------*/
    .store-news-block .media-list .media {
        padding: 0;
        border: 0;
    }
    .store-news-block .media-list .media .media-left {
        width: 100%;
        padding: 0;
    }
    .store-news-block .media .store_pic img {
        width: 100%;
        border: 0;
        box-shadow: none;
    }
    #store-news.store-news-block .media .media-body .store-name {
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        background: #FFF !important;
        padding: 15px !important;
        color: rgb(114 113 113);
    }
    .store-news-block .media .media-body .store-name img {
        display: inline-block;
        width: 30px;
        margin-right: 10px;
        border: #FFF 2px solid;
        box-shadow: 0px 2px 10px 0px rgb(107 111 130 / 30%);
    }
    .store-news-block .media .media-body h4.media-heading {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        margin: 0;
        background: rgb(255 255 255 / 60%);
        padding: 15px;
    }
    .store-news-block .media .media-body h4.media-heading a {
        color: #000;
    }
    .store-news-block .media .media-body .date, 
    .store-news-block .media .media-body .media-content {
        display: none !important;
    }

}

@media (max-width: 768px) {
    .womo-gift-list .media {
        width: 98%;
        overflow: visible;
    }
    .womo-gift-list .media .media-right {
        padding: 10px !important;
    }
    .womo-gift-list .media-right a {
        margin: 0;
    }
}

@media (max-width: 415px) {
    .womo-gift-list .media {
        margin: 1% !important;
        padding-bottom: 75px;
    }
    .womo-gift-list .media .media-body {
        margin: 0 !important;
    }
    .womo-gift-list .media .media-right {
        padding: 10px 5px !important;
        flex-wrap: wrap;
    }
    .womo-gift-list .media .media-top {
        padding-left: 65px;
    }
    .womo-gift-list .media .media-top .w-coins-pic {
        left: 5px;
        padding: 7px;
        width: 50px;
        height: 50px;
    }
    .womo-gift-list .media .media-right .btn {
        width: 100%;
        margin-top: 5px;
    }
    .mycoins_list_box .mycoins_list.col-4 {
        /*flex: 0 0 50%;
        max-width: 50%;*/
    }
    .mycoins_list .tip-new {
        top: 16px;
        right: -15px;
        transform: translateX(-50%) rotate(15deg) scale(0.8);
        height: 21px;
    }
    .my-feeling-pic {
        top: -5px;
        left: -2px;
        width: 26px;
        height: 26px;
    }
    .my-feeling-pic img {
        width: 24px;
    }
}
@media (max-width: 300px) {
    .womo-gift-list .media {
        width: 98%;
    }
}

@media (min-width: 1200px) {
    /*---------dropdown-menu-userlist---------*/
    .video-list-block .dropdown-menu-userlist .media {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .video-list-block .dropdown-menu-userlist .btn-thermometer {
        width: 50%;
        margin-top: 5px;
    }
    .video-list-block .dropdown-menu-userlist .media-right {
        margin-top: 5px;
    }
}
@media (min-width: 991.98px) {
    /*--------cart page----------*/
    .content-body.content-right {
        margin-right: 260px;
        margin-left: 0;
    }
    .right-block {
        min-height: 460px;
    }
    .right-block .right-content-block {
        position: absolute;
        top: 0;
        right: 0;
        width: 220px;
        margin-top: 0;
    }
    /*----------egg gift-------------*/
    .egg-card .card-img-top span {
        margin-left: -375px;
        width: 750px;
    }
    
}
@media (min-width: 768px) {
    html body.fixed-navbar {
        padding-top: 70px;
    }
    body.vertical-content-menu .content .content-wrapper {
        max-width: 1080px;
        margin: 0 auto;
        padding: 2.2rem 1rem 2.2rem 1rem;
    }
    /*-------common--------*/
    .card-full, .btn-full-w, .user-slide, .user-info, .new-coins-block {
        margin: 0;
    }
    .sub-content {
        margin-top: 0;
    }
    .max-w-content .content-wrapper {
        max-width: 700px !important;
        margin: 0 auto;
    }
    .form-actions {
        text-align: center;
    }
    .form-actions .btn.btn-block {
        min-width: 20%;
        width: auto;
        display: inline-block;
        margin: 0;
    }
    .nav.nav-tabs2 .nav-item {
        background: #FFF;
    }
    .content-header .content-header-left .float-right {
        margin-top: 0 !important;
        position: relative;
        /*top:1.5rem;*/
        z-index: 10;
    }
    .report-mess-block .form-actions .btn {
        display: inline-block;
        width: 40%;
        margin: 0 1%;
    }

    /*--------emoij----------*/
    .emoticon-dropdown-menu .tab-content li {
        width: 20%;
    }

    /*--------form----------*/
    .dropdown-menu-userlist.dropdown-menu-right {
        max-width: 500px;
        margin-left: 10px;
        margin-right: -10px;
    }

    /*-------header-------*/
    .fixed-top {
        height: 70px;
    }
    .quick_btn1 {
        width: 100%;
        top: 80px;
        right: 0;
        left: inherit;
        padding-left: 260px;
    }
    .quick_btn1 li {
        float: none;
        width: auto;
        margin-left: 8px;
        margin-right: 8px;
        margin-bottom: 0;
        transform: translateX(0);
        transition: 0.1s;
    }
    .quick_btn1 li a {
        min-width: 200px;
    }
    .quick_btn1 li:hover {
        transform: scale(1.05);
    }
    .top_btn_back, .top_btn_close {
        top: 18px;
    }

    /*-------- content ------------*/
    .breadcrumb-wrapper {
        display: block;
    }

    /*-------- mywallet ------------*/
    .personalinfo_block {
        margin-bottom: 30px;
    }
    .personalinfo_block .media .media-left {
        padding-right: 3rem;
    }
    .personalinfo_block .media .media-left img {
        width: 120px;
    }
    .personalinfo_block .media .media-body {
        margin-top: 10px;
    }
    .personalinfo_block .media-heading {
        margin-bottom: 15px;
    }
    .ability-list {
        font-size: 1rem;
    }
    .ability-list div {
        font-size: 2rem;
        /*margin-right: 10px;*/
    }
    .follow-num .ability-list:nth-child(3), .follow-num .ability-list:last-child {
        padding-left: 15px;
        margin-left: 15px;
    }
    .ability-list.user_privilege {
        margin-right: 20px;
    }
    .mybag_block {
        margin-top: 55px;
    }
    .mybag_block .mybag_list {
        padding: 20px;
    }
    .mybag_block .total_coins {
        font-size:2rem;
        margin-bottom: 5px;
    }
    .mybag_block .mybag_list .coin img {
        height: 63px;
    }
    .mybag_block .mybag_list .title {
        padding: 5px;
    }
    .mybag_block .title .tip {
        width: 15px;
        height: 15px;
        margin-left: 5px;
    }
    .mycoins_list {
        padding: 30px 25px;
    }
    .mycoins_store_list_block .media .media-right.icon {
        font-size: 2.5rem;
    }
    .m-coins img, .w-coins img {
        
    }
    .hide-coins span {
        display: inline-block;
        margin:0 5px;
        font-size: 1.1rem;
    }
    .mycoins_store_list_block .media .dropdown-more {
        top: 10px;
    }

    .mark-txt{
        padding-top: 0;
    }

    /*-------- wishlist --------------*/
    .wishlist_block .wish-list .media-right {
        align-self: center;
    }
    .wishlist_block .wish-list .media-right a {
        display: inline-block;
    }

    /*-------- hot ------------------*/
    .nav-icon-block {
        margin-bottom: 20px;
    }
    .hot-user-block .owl-stage-outer {
        margin: 0 -5px;
        padding: 5px;
    }

    /*--------- friend -------------*/
    .friend-list-block .media {
        padding: 1.5rem 2rem;
    }
    .give-coins-row2 .media {
        flex: 1;
    }

    /*--------- user ---------------*/
    .user-profile-block {
        margin-top: 20px;
        /*box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);*/
    }
    .user-profile-block .user-info {
        /*box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);*/
    }
    .user-slide {
        display: none;
    }
    .user-profile-block .media .user_pic {
        margin-top: -80px;
        margin-bottom: 20px;
        margin-left: 10px;
    }
    .user-profile-block .media .user_pic img {
        width: 150px;
    }
    .follow-num {
        top: 55px;
    }
    .user-btn-block .media-btn:first-child {
        flex: none;
        width: 30%;
    }
    .personalinfo_block .img-thumbnail {
        width: 120px;
        height: 120px;
    }

    /*--------- store ----------------*/
    .mycoins_store_list_detail_block {
        /*background: #FFF;
        box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);*/
    }
    .store-slide {
        margin: 0;
        margin-top: -31px;
    }
    /*.store-info {
        position: relative;
        margin-top: -20px;
        min-height: 170px;
    }
    .store-info .media-left.store_pic {
        margin-top: -25px;
        padding-right: 2rem;
        margin-left: 10px;
    }
    .store-info .media-heading {
        margin-right: 290px;
        margin-top: 30px;
    }*/
    .store-info2 .media-heading {
        margin-top: 30px;
    }
    .store-info2 .store-rate {
        display: block;
        margin-top: 15px;
    }
    /*.mycoins_store_list_detail_block .media {
        padding: 1.5rem;
    }
    .mycoins_store_list_detail_block .media .store_pic img {
        width: 120px;
    }*/
    .store-info .media .media-right {
        margin-top: 25px;
        position: absolute;
        right: 20px;
    }
    .store-info .media-btn .btn {
        display: inline-block;
    }

    .store-detail-coins-list {
        
    }
    .store-detail-coins-list div {
    }
    .store-detail-coins-list div .m-coins, 
    .store-detail-coins-list div .w-coins, 
    .store-detail-coins-list div .btn-give {
        display: inline-block;
        margin-bottom: 0;
        font-size: 2.5rem;
    }
    .store-detail-coins-list div .btn-give {
        font-size: 0.8rem;
        margin-left: 5px;
    }
    .store-detail-coins-list div .txt {
        display: block;
    }
    .store-info2 {
        position: relative;
        margin-top: -20px;
        min-height: 170px;
    }
    .store-info2 .media-left.store_pic {
        margin-top: -25px;
        padding-right: 2rem;
        margin-left: 10px;
    }
    .store-info2 .store-desc {
        margin-top: 10px;
    }
    .store-info2 .task-desc {
        margin-top: 10px;
    }
    .friend-want-pic-list-block {
        position: absolute;
        width: auto;
        top: 90px;
        right: 1.5rem;
        border: 0;
    }
    .btn-addfavor.btn {
        height: 29px;
    }
    .thermometer-bar-block {
        /*margin-top: 20px;*/
        margin-top: 40px;
    }
    .media-btn-social2 .outer-bar div {
        display: block;
        padding: 1rem 1.5rem;
    }
    .media-btn-social2 .outer-bar div a {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 15px;
        border-radius: 30px;
        padding: 3px;
        background: #FFF;
        text-align: left;
        box-shadow: 0px 1px 15px 1px rgb(62 57 107 / 14%);
    }
    .media-btn-social2 .outer-bar div a span {
        display: inline-block;
        font-size: 1rem;
        margin:0 5px;
    }
    .media-btn-social2 .outer-bar div a img {
        width: 40px;
    }
    .store-info2 .media-btn-social2 .outer-bar div {
        padding: 1rem 0;
    }
    .store-info2 .media-btn-social2 h5 {
        padding-left: 0;
    }

    /*--------- store map ------------*/
    #store-map {
        margin: 0;
    }


    /*--------- mycoupon-list ----------*/
    .mycoupon-list .media {
        /*width: 48%;
        float: left;
        margin: 0 1%;
        margin-bottom: 20px;*/
    }
    /*-------thank card-------*/
    .thanks-card .card-img-top {
        height: 250px;
    }
    .thanks-card .card-profile-image {
        width: 200px;
        height: 200px;
        top: 120px;
        margin-left: -105px;
    }
    .thanks-card .card-profile-image img.current-emoticon {
        max-height: 100%;
    }
    .thanks-card .emoticon-dropdown-menu {
        transform: translate3d(0px, 300px, 0px) !important;
    }
    .thanks-card .btn-choice-emo {
        top: 260px;
        right: 40%;
    }

    /*-------.coins-message-list-----------*/
    .coins-message-list .media {
        padding-bottom: 1rem !important;
    }
    .coins-message-list .media .media-right {
        width: 100px !important;
        top: 10px;
        right: 15px;
        left: inherit;
        border: 0;
        align-self: flex-start;
        background: transparent;
    }
    .coins-message-list .media .media-right div {
        top: 0;
    }
    .coins-message-list .media .btn {
        flex: 0 0 100%;
        margin: 0 0 10px 0;
    }
    .emoij-pic {
        height: 100%;
    }

    /*--------kol---------*/
    .kol-index-list .kol-list-activity-info {
        margin-left: 80px;
    }
    .btn-go-kol-page {
        top: -20px;
        right: 0;
    }


    /*-------footer-------*/
    footer.footer {
        padding: 0.8rem;
    }
    body.vertical-content-menu footer.footer {
        /*padding-left: 260px;*/
        clear: both;
    }

    /*------shop--------*/
    .card-header2 {
        padding: 1.5rem 0;
        margin-top: 20px;
    }
    .shop-banner, .womoshop-coins .hot-wish-coins-block {
        margin: 0;
    }
    .product-list-block {
        margin: 0 -5px;
    }
    .product-list-block .product-list {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px;
    }
    .hot-emoji-block {
        margin-top: 20px;
    }
    .womoshop-product .slick-list {
        overflow: hidden;
    }
    .womoshop-product.hot-theme {
        padding-top: 40px;
    }
    .womoshop-coins .media-list .media {
        width: 33.33%;
        margin-bottom: 20px;
    }
    .womoshop-coins-subcontent .media-list {
        padding: 20px;
    }
    .womoshop-coins-subcontent .media-list .media {
        width: 33.33%;
        display: block;
        padding: 30px;
    }
    .womoshop-coins-subcontent .media-list .media .media-left {
        width: 100%;
        padding: 0;
    }
    .womoshop-coins-subcontent .store_pic img {
        width: 100%;
    }
    .womoshop-coins-subcontent .media-list .media-body {
        text-align: center;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    .womoshop-coins-subcontent .type-coins {
        width: 40px;
        height: 40px;
    }
    .womoshop-coins-subcontent .type-coins img {
        width: 35px;
    }
    /*---------shop detail-------------*/
    .shop-detail-block {
        background: #FFF;
        box-shadow: 0px 1px 15px 1px rgba(62, 57, 107, 0.07);
    }
    .shop-detail-block .detail-left .pic {
        padding: 20px 50px 10px 30px;
    }
    .shop-detail-block .detail-right {
        padding: 20px;
    }
    .shop-detail-block .detail-right.detail-cart-block {
        width: 60%;
        margin-top: 0;
        padding-top: 0;
    }
    .emoji-detail-list {
        width: 25%;
    }
    .shop-detail-block .detail-left .pic .type-coins {
        top: 10px;
        left: 15px;
        border-color: #fff;
    }
    .title-border {
        border-top: #efefef 1px solid;
        border-bottom: #efefef 1px solid;
        background: transparent;
    }
    .title-border2 {
        padding: 10px 0 15px 0;
        border-bottom: #efefef 1px solid;
    }
    /*--------cart page----------*/
    .content-body.content-right {
        margin-left: 0 !important;
        margin-bottom: 50px;
    }
    .cart-list-block .cart-table .cart-row .quantity, 
    .cart-list-block .cart-table .cart-row .total {
        text-align: center;
    }
    /*----------order---------------*/
    .order-list-block .cart-table .cart-row {
        text-align: center;
    }

    .myegg-list-box-2 {
        display: flex;
        flex-wrap: wrap;
    }
    .myegg-list-box-2 .media {
        flex: 50%;
    }

    /*-----------privilege---------*/
    .myprivilege-list-block {
        display: flex;
        flex-wrap: wrap;
    }
    .myprivilege-list-block .card {
        flex: 0 0 48%;
        margin: 0 1%;
        margin-bottom: 1.3rem;
    }
    .badge-endtime {
        margin-bottom: 15px;
    }
    .privilege-stamp-block .pic-expansion img {
        width: 70%;
    }

    /*-----------prop--------------*/
    .prop-box .prop-list {
        display: flex;
        flex-wrap: wrap;
    }
    .prop-box .media {
        width: 50%;
    }

}
@media (min-width: 376px) {
    .upgrade-card2 {
        max-width: 450px;
    }
}

@media (max-width: 320px) {
    .personalinfo_block .media-list .media {
        padding: 10px;
    }
    .mybag_block .mybag_list {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .mybag_block .mybag_list:last-child {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 43px;
        border-top: #d6d6d6 1px dashed;
        border-left: 0;
    }
    .fixed_bottom_menu li a {
        padding: 10px 0 5px 0;
    }
}


@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
    -webkit-animation-duration:1.5s;
    animation-duration:1.5s;
    -webkit-animation-duration:1.5s;
    animation-delay: 1.5s;
    -webkit-animation-name:bounce;
    animation-name: bounce;
    animation-iteration-count: infinite;
    transform-origin: center bottom;
}

@-webkit-keyframes bounceIn{
    0%,20%,40%,60%,80%,to{
        -webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    20%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    40%{
        -webkit-transform:scale3d(.9,.9,.9);
        transform:scale3d(.9,.9,.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
        -webkit-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)
    }
    to{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
@keyframes bounceIn{
    0%,20%,40%,60%,80%,to{
        -webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    20%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    40%{
        -webkit-transform:scale3d(.9,.9,.9);
        transform:scale3d(.9,.9,.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
        -webkit-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)
    }
    to{
        opacity:1;
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
}
.bounceIn{
    -webkit-animation-duration:.75s;
    animation-duration:.75s;
    -webkit-animation-name:bounceIn;
    animation-name:bounceIn
}
@-webkit-keyframes bounceInDown{
    0%,60%,75%,90%,to{
        -webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,-3000px,0);
        transform:translate3d(0,-3000px,0)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(0,25px,0);
        transform:translate3d(0,25px,0)
    }
    75%{
        -webkit-transform:translate3d(0,-10px,0);
        transform:translate3d(0,-10px,0)
    }
    90%{
        -webkit-transform:translate3d(0,5px,0);
        transform:translate3d(0,5px,0)
    }
    to{
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
@keyframes bounceInDown{
    0%,60%,75%,90%,to{
        -webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0%{
        opacity:0;
        -webkit-transform:translate3d(0,-3000px,0);
        transform:translate3d(0,-3000px,0)
    }
    60%{
        opacity:1;
        -webkit-transform:translate3d(0,25px,0);
        transform:translate3d(0,25px,0)
    }
    75%{
        -webkit-transform:translate3d(0,-10px,0);
        transform:translate3d(0,-10px,0)
    }
    90%{
        -webkit-transform:translate3d(0,5px,0);
        transform:translate3d(0,5px,0)
    }
    to{
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
.bounceInDown{
    -webkit-animation-duration:.75s;
    animation-duration:.75s;
    -webkit-animation-name:bounceInDown;
    animation-name:bounceInDown
}

@-webkit-keyframes flipInX{
    0%{
        -webkit-transform:perspective(400px) rotateX(90deg);
        transform:perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        opacity:0
    }
    40%{
        -webkit-transform:perspective(400px) rotateX(-20deg);
        transform:perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    60%{
        -webkit-transform:perspective(400px) rotateX(10deg);
        transform:perspective(400px) rotateX(10deg);
        opacity:1
    }
    80%{
        -webkit-transform:perspective(400px) rotateX(-5deg);
        transform:perspective(400px) rotateX(-5deg)
    }
    to{
        -webkit-transform:perspective(400px);
        transform:perspective(400px)
    }
}
@keyframes flipInX{
    0%{
        -webkit-transform:perspective(400px) rotateX(90deg);
        transform:perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        opacity:0
    }
    40%{
        -webkit-transform:perspective(400px) rotateX(-20deg);
        transform:perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    60%{
        -webkit-transform:perspective(400px) rotateX(10deg);
        transform:perspective(400px) rotateX(10deg);
        opacity:1
    }
    80%{
        -webkit-transform:perspective(400px) rotateX(-5deg);
        transform:perspective(400px) rotateX(-5deg)
    }
    to{
        -webkit-transform:perspective(400px);
        transform:perspective(400px)
    }
}
.flipInX{
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    -webkit-animation-name:flipInX;
    animation-name:flipInX
}
@-webkit-keyframes flipInY{
    0%{
        -webkit-transform:perspective(400px) rotateY(90deg);
        transform:perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        opacity:0
    }
    40%{
        -webkit-transform:perspective(400px) rotateY(-20deg);
        transform:perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    60%{
        -webkit-transform:perspective(400px) rotateY(10deg);
        transform:perspective(400px) rotateY(10deg);
        opacity:1
    }
    80%{
        -webkit-transform:perspective(400px) rotateY(-5deg);
        transform:perspective(400px) rotateY(-5deg)
    }
    to{
        -webkit-transform:perspective(400px);
        transform:perspective(400px)
    }
}
@keyframes flipInY{
    0%{
        -webkit-transform:perspective(400px) rotateY(90deg);
        transform:perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        opacity:0
    }
    40%{
        -webkit-transform:perspective(400px) rotateY(-20deg);
        transform:perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    60%{
        -webkit-transform:perspective(400px) rotateY(10deg);
        transform:perspective(400px) rotateY(10deg);
        opacity:1
    }
    80%{
        -webkit-transform:perspective(400px) rotateY(-5deg);
        transform:perspective(400px) rotateY(-5deg)
    }
    to{
        -webkit-transform:perspective(400px);
        transform:perspective(400px)
    }
}
.flipInY{
    opacity: 1;
    -webkit-animation-duration:.75s;
    animation-duration:.75s;
    /*animation-delay: 2s;*/
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    -webkit-animation-name:flipInY;
    animation-name:flipInY
}

@-webkit-keyframes fadeOutUp {
            0% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
}
         
@keyframes fadeOutUp {
            0% {
               opacity: 1;
               transform: translateY(0);
            }
            100% {
               opacity: 0;
               transform: translateY(-20px);
            }
}
         
.fadeOutUp {
    opacity: 1;
    -webkit-animation-duration:.75s;
    animation-duration:.75s;
    /*animation-delay: 2s;*/
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
            -webkit-animation-name: fadeOutUp;
            animation-name: fadeOutUp;
}