.rank-slide-wrapper {margin: 3rem 0;border: 1px solid #C39A17;box-shadow: 0 0 3px #555;}
.rank-slide-wrapper .rank-slide-head {position: relative; background: url(../../images/page/rank/bg-rank-slide.png) center center; background-size: 100% 100%;}
.rank-slide-wrapper .rank-slide-head:before{
    width: 100%;
    content: "";
    display: block;
    padding-bottom: 5.1%;
}
.rank-slide-wrapper .rank-slide-head h3 {
    text-align: center;
    margin-bottom: 0px;
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.rank-slide-wrapper .rank-slide-body {min-height: 180px;padding: 1.5rem 1rem;overflow: hidden;}
.rank-slide-wrapper .rank-slide-body .member-photo{border-radius: 50%;}
.rank-slide-wrapper .rank-slide-body .member-name {text-align: center; color : #fff; background: #424447;margin: 1rem 1rem 0.2rem;}
.rank-slide-wrapper .rank-slide-body .item {display: none;}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item {display: block;}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item img.member-photo {width:80%;margin: auto;position:absolute;top: 55%; left: 50%;transform: translateY(-60%) translateX(-50%);border: 3px solid #0087CB }
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item.rank-0 img.member-photo {border-color: #0087CB}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item.rank-1 img.member-photo {border-color: #DA9A7F}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item.rank-2 img.member-photo {border-color: #BFC2C7}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item.rank-3 img.member-photo {border-color: #EBC117}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item {position: relative;overflow: hidden;}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item:before {width: 100%;content: "";display: block;padding-bottom: 110%;}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item .member-rank {position: absolute; width: 100%; text-align: center; top: 0px; font-weight: bold;}
.rank-slide-wrapper .rank-slide-body .item.rank-0 .member-rank {color: #0087CB}
.rank-slide-wrapper .rank-slide-body .item.rank-1 .member-rank {color: #DA9A7F}
.rank-slide-wrapper .rank-slide-body .item.rank-2 .member-rank {color: #BFC2C7}
.rank-slide-wrapper .rank-slide-body .item.rank-3 .member-rank {color: #EBC117}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item.center {}
.rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item.center img.member-photo {width:100%}
.rank-slide-wrapper .rank-slide-foot {min-height: 65px;background-color: rgba(0,0,0,0.8);border-top: 2px solid #C39A17;text-align: center;}
.rank-slide-wrapper .rank-slide-foot .rank-profile {
    display: inline-block;
    margin: 1rem auto;
    border-radius: 5px;
    text-align: left;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    line-height: 1.5rem;
    background: #fff;
    min-width: 360px;
    max-width: 80%;
    word-break: break-all;
}
.container-rank {
    background: #EAEAEA;
    padding: 2rem 0rem;
}
@media (max-width: 767px) {
    .rank-slide-wrapper {margin-left: -25px; margin-right: -25px;}
    .rank-slide-wrapper .rank-slide-head {background-size: 120% 100%;}
    .rank-slide-wrapper .rank-slide-head h3 {font-size: 1.15rem;}
    .rank-slide-wrapper .rank-slide-head:before {padding-bottom: 8%;}
    .rank-slide-wrapper .rank-slide-body .owl-stage .owl-item .item.center img.member-photo {width:80%}
    .rank-slide-wrapper .rank-slide-body .member-name {font-size: 0.8rem;margin: 1rem 0 0.1rem;max-width:100%;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .rank-slide-wrapper .rank-slide-foot .rank-profile {min-width: 240px;}
}

@media (max-width: 556px) {
    .rank-slide-wrapper .rank-slide-head {background-size: 160% 100%;}
    .rank-slide-wrapper .rank-slide-head h3 {font-size: 0.95rem;}
    .rank-slide-wrapper .rank-slide-head:before {padding-bottom: 10%;}
    .rank-title {font-size: 1.5rem;}
    .headline-01 {font-size: 1.3rem;}
}
.row-rank {}
.row-rank > [class*="col-"]  {padding: 0.5rem 0.5rem;}

.block-rank .block-comment {background: #CC3C61; padding: 0.5rem; text-align: center;position:relative;color: #fff;border-radius: 10px;font-weight: 600;line-height: 1.3rem;margin: 0.8rem 0.5rem;}
.block-rank .block-comment:before{content: " ";display: inline-block;width: 0;height: 0;border-style: solid;border-width: 0 7.5px 10px 7.5px;border-color: transparent transparent #CC3C61 transparent;position: absolute;top: -10px;left: 50%;transform: translateX(-50%);}
.block-rank {border: 2px solid #DA9A7F;height: 100%;min-height: 300px;background-color: #fff;}
.row-keep-condition .block-rank {min-height: 180px;}
.block-rank.block-rank-bronze {}
.block-rank.block-rank-silver {border-color: #BFC2C7}
.block-rank.block-rank-gold {border-color: #EBC117}

.block-rank .block-rank-head {background-color: #DA9A7F;position: relative;padding: 0.5rem 0.5rem 0.5rem 2.5rem; font-size: 1.1rem; font-weight: bold; color: #000; line-height: 2rem;}

.block-rank.block-rank-silver .block-rank-head {background-color: #BFC2C7;}
.block-rank.block-rank-gold .block-rank-head {background-color: #EBC117;}

.block-rank .block-rank-head:before {position:absolute; left:0.3rem; top: 0.5rem; width:32px; height: 32px; content: ' '; display: inline-block; background: transparent url(../../images/page/rank/icon-bronze.png) no-repeat;background-size: 100% 100%;}
.block-rank.block-rank-silver .block-rank-head:before {background-image: url(../../images/page/rank/icon-silver.png);}
.block-rank.block-rank-gold .block-rank-head:before {background-image: url(../../images/page/rank/icon-gold.png);}

.block-rank .block-rank-content {padding: 1rem 0.5rem;font-size: 0.9rem;line-height: 1.8rem;background-color: #fff;}
.block-rank .block-rank-content ul {padding-left: 1rem;}
.block-rank .block-rank-content ul > li {position: relative;}
.block-rank .block-rank-content ul > li:before {position: absolute; display: inline-block; content: ' '; background-color: #DA9A7F; width: 12px; height: 12px;left:-1rem;top:0.37rem;}

.block-rank.block-rank-silver .block-rank-content ul > li:before {background-color: #BFC2C7;}
.block-rank.block-rank-gold .block-rank-content ul > li:before {background-color: #EBC117;}


.rank-process {}
.rank-process .rank-process-head{font-size: 1.3rem; font-weight: bold; line-height: 3.2rem; background-color: #0087CB; text-align: center;color: #fff;}
.rank-process .rank-process-wrapper {display: block; text-align: center;}
.rank-process .rank-process-wrapper .rank-process-item {width:19.7%;min-width: 188px;margin: 20px 0;display:inline-block; text-align: center;}
.rank-process .rank-process-wrapper .rank-process-item .condition {display: inline-block;padding: 0.2rem 0.5rem;color: #fff;background-color: #CC3C61;font-weight: 600;margin: 0.3rem auto 1.2rem;}
.rank-process .rank-process-wrapper .rank-process-item .circular-bar strong {
    display: block;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    position: absolute;
    top: 18%;
    text-align: center;
}

.circular-bar label {
    display: block;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    position: absolute;
    top: 50%;
    width: 80%;
    left: 10%;
    text-align: center;
}
.circular-bar label .benchmark {font-size: 28px;}
@media screen and (max-width:767px) {
    .rank-process .rank-process-head {font-size: 1.1rem;}
    .rank-process .rank-process-wrapper .rank-process-item {width:46.8%;min-width: 99px;margin: 10px 0;}
    .rank-process .rank-process-wrapper .rank-process-item .circular-bar strong {font-size: 12px;line-height: 18px;top: 15%;}

    .circular-bar label {font-size: 12px;line-height: 20px;}
    .circular-bar label .benchmark {font-size: 16px;}
}