@charset "utf-8";

.title{font-size: 1.5em; padding: 20px 0; border-bottom: 4px solid #000; letter-spacing: -1px; }
.title span{margin: 0 10px; color: #ccc; }
.title .el-select{
    float: right;
    margin-top: -5px;
    font-size: 14px;
    width: 140px;
}

.tab{border-bottom: 1px solid #ccc; }
.tab a{padding: 0 15px; width: 20%; height: 60px; line-height: 60px; text-align: center; }
.tab .active{background-color: #71001a; color: #fff; }
.tab a:not(.active):hover{color: #71001a; }

.tag{padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc; }
.tag a{float: left; margin: 0 2px 2px 0; padding: 0 5px; background-color: #ddd; }
.tag a:hover,
.tag .active{background-color: #CE070E; color: #fff; }

.pagination{display: block; text-align: center; }
.pagination a{display: inline-block; vertical-align: middle; width: 40px; height: 40px; line-height: 40px; margin: -1px 0 0 -1px; border: 1px solid #CE070E; color: #CE070E; background-color: #fff; }
.pagination a:hover,
.pagination .active{background-color: #CE070E !important; border-color: #CE070E !important; color: #fff !important; }
.pagination .arrow{border: 0; background-color: transparent; }
.pagination span.active, .pagination span i{display: inline-block; vertical-align: middle; width: 40px; height: 40px; line-height: 40px; margin: -1px 0 0 -1px; border: 1px solid #CE070E; color: #CE070E; background-color: #fff; }

.lt-ranking{position: absolute; z-index: 2; bottom: 10px; right: 10px; font-size: 12px; color: #fff; background-color: #CE070E; width: 40px; height: 40px; line-height: 40px; border-radius: 100%; text-align: center; box-shadow: 5px 5px 10px #000; }
.lt-btngrp a,
.lt-btngrp button{float: left; width: 70%; height: 45px; line-height: 45px; text-align: center; background-color: #3d3d3d; color: #fff; }
.lt-btngrp a:first-child,
.lt-btngrp button:first-child{width: 30%; background-color: #ff0066; }

.pbox-line2{height: 47px; overflow: hidden; }
.pbox-line3{height: 75px; overflow: hidden; }

.profile{padding: 20px; border: 1px solid #ccc; background-color: #fff; }
.profile-title{border-bottom: 3px solid gray; color: gray; margin-bottom: 10px; }
.profile-info-title{font-size: 1.3em; }
.profile-info-title span{color: gray; }
.profile-info-thumb{display: block; width: 100%; margin-bottom: 30px; }
.profile-info-detail{margin: 30px 0; }
.profile-info-detail th{text-align: left; padding-right: 10px; }
.profile-info-detail th,
.profile-info-detail td{vertical-align: top }
.profile-btns a,
.profile-btns button{float: left; width: 33.3333%; height: 50px; line-height: 50px; padding: 0 10px; text-align: center; background-color: #000; color: #fff; }
.profile-btns .pcolor2{background-color: #ff0066; }
.profile-btns .pcolor3{background-color: #3d3d3d; }
.profile-comment{position: relative; width: 100%; padding: 10px 120px 10px 0; border-bottom: 1px solid #ddd; }
.profile-comment strong{position: absolute; top: 50%; right: 0; width: 120px; text-align: right; margin-top: -22px; line-height: 40px; }
.profile-photo img{display: block; width: 100%; }
.profile-photo .swiper-slide{width: 38% }
.profile-photo .wide{width: 70%; }
.profile-photo .more{width: 120px; line-height: 300px; background-color: #ededed; color: #CE070E; font-weight: bold; text-align: center; }

.comment-write{margin-top: 10px; }
.comment-write input,
.comment-write button{float: left; height: 45px; line-height: 45px; padding: 0 10px; border: 1px solid #ccc; border-right: 0; background-color: #f5f5f5; }
.comment-write .active1{width: 20%; }
.comment-write .active2{width: 60%; }
.comment-write button{float: left; width: 20%; border-color: #3d3d3d; background-color: #3d3d3d; color: #fff; }

.comment-star{display: inline-block; vertical-align: middle; margin: 0 10px 10px 0; }
.comment-star strong{display: block; font-size: 14px; }
.comment-star label{color: #CE070E; cursor: pointer; }
.comment-star input{position: absolute; width: 0; height: 0; opacity: 0; }
.comment-star input:checked ~ label{color: #ccc; }

.votebtns button{display: inline-block; vertical-align: middle; width: 250px; padding: 20px 15px; font-size: 16px; background-color: #f26; color: #fff; }
.votebtns button:last-child{background-color: #000; }

.lpop{ display: none; position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; padding: 50px 0; background-color: rgba(255, 255, 255, 0.95); overflow-y: scroll; -ms-overflow-style: none; }
.lpop > div{ display: table; width: 100%; height: 100%; table-layout: fixed; }
.lpop > div > div{ display: table-cell; vertical-align: middle; }
.lpop::-webkit-scrollbar{display: none; }
.lpop .swiper-width{ max-width: 100%; }
.lpop .swiper-height{ max-width: 100%; }
.lpop .swiper-slide{ padding-bottom: 50px; }
.lpop .swiper-button-prev{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23CE070E'%2F%3E%3C%2Fsvg%3E"); }
.lpop .swiper-button-next{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23CE070E'%2F%3E%3C%2Fsvg%3E"); }
.lpop .swiper-pagination-bullet{ width: 12px; height: 12px; }
.lpop .swiper-pagination-bullet-active{ background: #CE070E; }



@media (min-width: 1024px)
{
}
@media (max-width: 1023px) and (min-width: 640px)
{

    .profile-photo .more{width: 150px; line-height: 150px; }
}
@media (max-width: 639px)
{
    .title{font-size: 1.3em; padding: 15px 0; }

    .tab a{width: 33.3333%; height: 50px; line-height: 50px; letter-spacing: -1px; }

    .tag a{letter-spacing: -0.5px; }

    .pagination a{width: 35px; height: 35px; line-height: 35px; }
    .pagination span.active, .pagination span i {width: 35px; height: 35px; line-height: 35px; }

    .lt-btngrp a,
    .lt-btngrp button{width: 60%; height: 40px; line-height: 40px; letter-spacing: -1px; }
    .lt-btngrp a:first-child,
    .lt-btngrp button:first-child{width: 40%; }

    .pbox-line2{height: 40px; letter-spacing: -1px; }
    .pbox-line3{height: 64px; letter-spacing: -1px; }

    .profile-title{margin-top: 40px; }
    .profile-comment{padding: 10px 60px 10px 0; }
    .profile-comment strong{width: 60px; }
    .profile-photo .more{width: 120px; line-height: 120px; }

    .votebtns button{
        float: left;
        width: 50%;
    }
}