@charset "utf-8";


/**
 * main count
 */
.main-count{padding: 15px; background-color: #ededed; text-align: center; }


/**
 * comment
 */
.main-comment{height: 60px; line-height: 60px; background-color: #fff; }
.main-comment-title{float: left; width: 200px; background-color: #414141; color: #fff; text-align: center; }
.main-comment-slider{height: inherit; padding: 0 20px; margin-left: 200px; border: 1px solid #ddd; border-left: 0; overflow: hidden; }
.main-comment-slider a:hover{text-decoration: underline; }
.main-comment-slider strong{margin-left: 10px; color: #CE070E; }
/**
 * box1
 */
.mainbx1{padding: 20px 30px 20px; border: 1px solid #ddd; background-color: #fff; }
.mainbx1-title strong{margin-right: 5px; color: #CE070E; }
.mainbx1-title-tag{display: inline-block; vertical-align: baseline; }
.mainbx1-title-tag small{display: inline-block; vertical-align: middle; height: 26px; line-height: 26px; padding: 0 10px; border-radius: 30px; border: 2px solid #909090; color: #909090; font-size: 50%; letter-spacing: -1px; }
.mainbx1-title-tag .active{border-color: #CE070E; color: #CE070E; }
.mainbx1-desc{position: relative; padding-right: 100px; margin: 10px 0 20px; letter-spacing: -0.5px; }
.mainbx1-desc a{position: absolute; top: 0; right: 0; width: 100px; text-align: right; }
.mainbx1-desc a:hover{color: #CE070E; text-decoration: underline; }
.mainbx1-list-txt{margin-top: 10px; }
.mainbx1-list-txt a{display: block; text-align: center; font-weight: bold; }
.mainbx1-list-txt a:hover{text-decoration: underline; color: #CE070E; }
.mainbx1-list-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; }
/**
 * box2
 */
.mainbx2{background-color: #fff; }
.mainbx2 .active{border: 1px solid #ddd; }
.mainbx2 h1{border: 1px solid #ddd; }
.mainbx2-list{display: block; width: 100%; padding: 10px 25px; border: 1px solid #ddd; border-top: 0; font-weight: bold; font-size: 120%; }
.mainbx2-list:hover{color: #e70213; }
.mainbx2-list strong{margin-right: 15px; color: #e70213; }
.mainbx2-list-img{display: inline-block; vertical-align: middle; margin-right: 15px; border-radius: 100%; max-width: 46px; height: 46px; overflow: hidden; }
.mainbx2-list-img img{display: block; width: 100%; }
/**
 * box3
 */
.mainbx3{border: 1px solid #ddd; }
.mainbx3 .swiper-pagination{top: 10px; left: auto; bottom: auto; right: 10px; text-align: right; }
.mainbx3 .swiper-pagination span{width: 12px; height: 12px; }
/**
 * box4
 */
.mainbx4{position: relative; padding: 20px 30px 20px; border: 1px solid #ddd; background-color: #fff; }
.mainbx4-title{margin-bottom: 20px; }
.mainbx4-title strong{margin-right: 5px; color: #CE070E; }
.mainbx4-list a{position: relative; display: block; margin-top: 7px; padding-right: 90px; }
.mainbx4-list a:hover{text-decoration: underline; color: #CE070E; }
.mainbx4-list span{position: absolute; top: 0; right: 0; width: 90px; letter-spacing: -0.5px; text-align: right; color: #aaa; }
.mainbx4-list strong{margin-right: 5px; padding: 0 5px; background-color: #CE070E; color: #fff; border-radius: 4px; font-size: 14px; }
.mainbx4-more{position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; text-decoration-line: center; text-align: center; color: gray; font-size: 30px; }
.mainbx4-more:hover{color: #CE070E; }

@media (max-width: 1023px) and (min-width: 640px)
{
    .mainbx1-type1{margin: 0 -30px; }
    .mainbx1-type1 .swiper-container{padding: 0 30px; }
    .mainbx1-type1 .swiper-slide{width: 22%; }
    .mainbx1-type2{margin: 0 -30px; }
    .mainbx1-type2 .swiper-container{padding: 0 30px; }
    .mainbx1-type2 .swiper-slide{width: 45%; }
}
@media (max-width: 639px)
{
    .main-comment{height: 40px; line-height: 40px; }
    .main-comment-title{width: 110px; }
    .main-comment-slider{padding: 0 15px; margin-left: 110px; }

    .mainbx1{border-left: 0; border-right: 0; }
    .mainbx1-desc{padding-right: 60px; letter-spacing: -1px; }
    .mainbx1-desc a{width: 60px; color: #CE070E; font-weight: bold; }
    .mainbx1-type1{margin: 0 -30px; }
    .mainbx1-type1 .swiper-container{padding: 0 30px; }
    .mainbx1-type1 .swiper-slide{width: 37%; }
    .mainbx1-type2{margin: 0 -30px; }
    .mainbx1-type2 .swiper-container{padding: 0 30px; }
    .mainbx1-type2 .swiper-slide{width: 80%; }

    /*.mainbx3{margin: 0 auto; max-width: 250px; }*/
    .mainbx3{margin: 0 auto; max-width: 100%; }
}