@charset "UTF-8";

/* Reputation */
.pr-repu {overflow: hidden; text-align: center; font-size: 0;}
.pr-repu .container {display: inline-block; position: relative; height: 760px; padding-bottom: 78px;}
.broken .pr-repu .container,
.edit .pr-repu .container {margin-bottom: 100px;}
.pr-repu .title {position: relative; right: -50px; opacity: 0; float: right; width: 717px; text-align: left;}
.pr-repu .title > strong {display: block; padding-top: 25px; font-family: 'Gmarket Bold'; font-size: 25px; color: #1e3a79;}
.pr-repu .title .desc {margin-top: 20px; font-family: 'Dream Medium'; font-size: 30px; letter-spacing: -2px; color: #202020;}
.pr-repu .title .desc em {font-family: 'Dream Medium';}
.pr-repu .title .desc strong {font-family: 'Dream Bold'; font-size: 60px; color: #22b2e9;}
.pr-repu .title .desc strong span {position: relative;}
.pr-repu .title .desc strong span::after {content: ''; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; background: #22b2e9; border-radius: 100%;}

.pr-repu .list {position: relative; left: -5%; top:4%; float: left; width: calc(100% - 760px);}
.pr-repu .list ul {display: inline-block; width: 105%; max-width: 1000px; margin-bottom: 25px;}
.pr-repu .list .row1,
.pr-repu .list .row3 {padding-left: 100px;}
.pr-repu .list .row2 {padding-right: 100px;}

.pr-repu .list ul li {filter: blur(8px); opacity: 0; float: left; width: 20%; padding-right: 30px; text-align: center;}
.pr-repu .list ul li:nth-child(odd) {margin-top: 45px;}
.pr-repu .list ul li:nth-child(even) {margin-top: 5px;}
.pr-repu .list img {box-shadow: 3px 3px 3px rgba(0,0,0,.1);}

.pr-repu .detail {display: flex; align-items: end; position: absolute; left: -6%; bottom: -70px; opacity: 0; width: 112%;}

.pr-repu .detail .detail-thumb {flex:1; display:flex; align-items:flex-end;}
.pr-repu .detail .button {flex-grow: 1; padding-right: 40px; text-align: right; line-height: 1;}
.pr-repu .detail .state {display: inline-block; letter-spacing: -1px;}
.pr-repu .detail .state p {display: inline-block; margin-left: 3px; font-family: 'Play Bold'; font-size: 30px; color: #9c9c9c;}
.pr-repu .detail .state .now {font-family: 'Play Bold'; font-size: 110px; color: #c4b7af;}
.pr-repu .detail .state .now::before {content: '0';}
.pr-repu .detail .state .now.ten::before {content: '';}
.pr-repu .detail .state .slash,
.pr-repu .detail .state .total {font-family: 'Play Bold'; font-size: 30px; color: #9c9c9c;}
.pr-repu .detail .state .total {margin-left: 10px;}
.pr-repu .detail .control {display: inline-block; margin-left: 60px;}
.pr-repu .detail .control button {display: inline-block; width: 45px; height: 15px; text-indent: -9999px;}
.pr-repu .detail .control .prev {background: url('../images/btn-location-prev.png') no-repeat center;}
.pr-repu .detail .control .prev:hover {background: url('../images/btn-location-prev-on.png') no-repeat center;}
.pr-repu .detail .control .next {margin-left: 20px; background: url('../images/btn-location-next.png') no-repeat center;}
.pr-repu .detail .control .next:hover {background: url('../images/btn-location-next-on.png') no-repeat center;}

.pr-repu .detail .slider {width: 550px;}
.pr-repu .detail .slider::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 3px solid #d3d3d3;}
.pr-repu .detail .slider .slick-slide > div > li {background: #fff;}
.pr-repu .detail .slider .thumb {position: relative;}
.pr-repu .detail .slider-desc {width: 886px; background: #f3f3f3; text-align: left;}
.pr-repu .detail .slider-desc .slick-slide > div > li {min-height: 410px; padding: 35px 130px 0 66px;}
.pr-repu .detail .slider-desc .subject {font-family: 'Dream Medium'; font-size: 30px; color: #202020;}
.pr-repu .detail .slider-desc .hash {margin: 15px 0 20px 0; font-family: 'Dream Regular'; font-size: 18px; color: #00428e;}
.pr-repu .detail .slider-desc .hash strong {margin-right: 24px;}
.pr-repu .detail .slider-desc .point li {margin-bottom: 10px; padding-left: 20px; background: url('../images/bul-eval.png') no-repeat left 10px; font-family: 'Dream Regular'; font-size: 14px; color: #222;}

@media (max-width: 1835px) {
  /* .pr-repu .detail .state .now {font-size: 70px;} */
  .pr-repu .detail .state .slash,
  .pr-repu .detail .state .total {font-size: 25px;}
  .pr-repu .detail .control {margin-left: 20px;}
}

@media (max-width: 1700px) {
  .pr-repu .title > strong {font-size: 22px;}
  /* .pr-repu .title .desc {font-size: 40px;} */
  /* .pr-repu .title .desc strong {font-size: 50px;} */
  .pr-repu .list {width: calc(100% - 735px);}
}

@media (max-width: 1650px) {
  .pr-repu .detail .slider {width: 450px;}
  .pr-repu .detail .button {padding-right: 20px;}
  .pr-repu .detail .state .now {font-size: 40px;}
}

@media (max-width: 1550px) {
  .pr-repu {height: auto;}
  .pr-repu .container {height: 870px;}
  .pr-repu .title {right: 0; opacity: 1; width: 100%; text-align: center;}
  .pr-repu .title > strong {padding-top: 0;}
  .pr-repu .title .response {display: none;}
  .pr-repu .list {left: 0; width: 100%; margin-top: 40px;}
  .pr-repu .list ul li {filter: blur(0px); opacity: 1;}
  .pr-repu .detail {left: 0; bottom: 0; opacity: 1; width: 100%;}
  .pr-repu .detail .slider-desc {width: 530px;}
  .pr-repu .detail .slider-desc .slick-slide > div > li {padding: 30px 30px 0 30px;}
  .pr-repu .detail .slider-desc .subject {font-size: 22px;}
  .pr-repu .detail .slider-desc .hash strong {font-size: 16px;}
  .pr-repu .detail .slider-desc .point li {font-size: 14px; background-position: left 7px;}
}

@media (max-width: 1245px) {
  .pr-repu .list {padding-right: 20%;}
  .pr-repu .detail .slider-desc .subject {width:70%; display: inline-block;}
  .pr-repu .detail .slider {padding-left: 20px;}
  .pr-repu .detail .slider-desc {flex-grow: 1;}
  .pr-repu .detail .button {position: absolute; right: 0; bottom: 320px; z-index: 1; width: auto;}
  .pr-repu .detail .control {margin-left: 10px;}
  .pr-repu .detail .control .next {margin-left: 10px;}
}

@media (max-width: 1100px) {
  .pr-repu .detail .slider-desc {width: 500px;}
  .pr-repu .detail .button {bottom:370px;}
}


@media (max-width: 940px) {
  .pr-repu .container {height:1050px;}
  .pr-repu .title > strong {font-size: 20px;}
  .pr-repu .title .desc {font-size: 30px;}
  .pr-repu .title .desc strong {font-size: 35px;}
  .pr-repu .detail .slider-desc .subject {width:100%;}
}

@media (max-width: 930px) {
  .broken .pr-repu .container,
  .edit .pr-repu .container {margin-bottom: 0;}
  .pr-repu .list {padding-right: 0;}
  .pr-repu .detail {flex-direction: column; align-items: center}
  .pr-repu .detail .state .now {font-size: 25px;}
  .pr-repu .detail .slider {position: relative; z-index: 1; padding-left: 0;}
  .pr-repu .detail .slider .thumb {max-width: 80%; margin: 0 auto;}
  .pr-repu .detail .slider-desc {margin-top: -40px; width: 100%;}
  .pr-repu .detail .slider-desc .slick-slide > div > li {padding: 80px 30px 50px 30px;}
  .pr-repu .detail .button {bottom: 20px;}
}
@media (max-width: 730px) {
  .pr-repu .detail {align-items:end;}
  .pr-repu .detail .slider {width:400px; margin-right:20px;}

}

@media (max-width: 660px) {
  .pr-repu .list .row1, .pr-repu .list .row3 {padding-left:0;}
  .pr-repu .detail .slider-desc .slick-slide > div > li {min-height: 505px; padding: 100px 30px 20px 30px;}
  .pr-repu .detail .state p {margin-left: 12px; font-size: 25px;}
  .pr-repu .list {margin-top: 10px;}
  /* .pr-repu .title .desc {font-size: 22px;} */
  .pr-repu .title .desc strong span::after {display: none;}
  .pr-repu .detail .slider {width:320px;}
  /* .pr-repu .detail .button {bottom: 283px;} */
  .pr-repu .detail .detail-thumb {position: relative;}
  .pr-repu .detail .button {bottom: -45px;}

}