/* 커뮤니티 */
.community-inner{
    width: 100%;
    margin: 0 auto;
    padding: 20px 15px 0;
}
.community-inner2{
    padding-left: 0;
    padding-right: 0;
}
.commu-top{
    display: flex;
    justify-content: space-between;
}
.commu-top h3{
    font-size: 22px;
    color: #1a1a1a;
    letter-spacing: -0.85px;
}
.commu-top .btn-wrap button{
    border-radius: 5px;
}
.comu-best-wrap{
    position: relative;
    margin: 20px auto 30px;
}
.comu-best-swiper .best-commu{
    height: 58.40vw;
    position: relative;
}
.comu-best-swiper .best-commu::before{
    content: "";
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
    width: 100%;
    height: 40%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0.6;
    border-radius: 8px;
}
.comu-best-swiper .swiper-slide {height: auto !important;}
.comu-best-wrap .comu-best-swiper {border-radius: 5px;}
.comu-best-wrap .swiper-button-prev{
    left:-18px;
}
.comu-best-wrap .swiper-button-next{
    right:-18px;
}
.comu-best-swiper .best-commu .text{
    position: absolute;
    left: 15px;
    bottom: 30px;
    z-index: 5;
}
.comu-best-swiper .best-commu h3{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: -0.75px;
    text-align: left;
    color: #f8f8f8;
}
.comu-best-swiper .best-commu p{
    font-size: 12px;
    font-weight: bold;
    letter-spacing: -0.33px;
    text-align: left;
    color: #f8f8f8;
    margin-bottom: 4px;
}
.commu-banner{
    width: 100%;
    /* height: 140px; */
}
.commu-banner img{
    width: 100%;
    border-radius: 5px;
    /* height: 100%; */
}
.commu-board table{
    border:1px solid #e5e8ea;
    width: 100%;
    border-spacing: 0px;
    padding: 0px;
}
.commu-board ul{
    display: inline-flex;
    flex-wrap: wrap;
    /* border-top: 1px solid #e5e8ea ;
    border-left: 1px solid #e5e8ea ; */
}
.commu-board ul li{
    /* padding:24px 24px 17px; */
    /* border-right: 1px solid #e5e8ea;
    border-bottom: 1px solid #e5e8ea ; */
    width: 100%;
    margin-bottom: 20px;
}

.commu-board-photo{
    width: 100%;
    height: 56vw;
    position:relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    border: 1px solid #e5e8ea;
}
.commu-board-photo img:not(.multiple-photos){
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* height: 100%; */
}
.commu-board-photo .multiple-photos{
    width: 22px;
    height: 22px;
    position:absolute;
    top:10px;right: 10px;
}
.commu-board-desc{
    /* margin-top: 13px; */
    border: 1px solid #e5e8ea;
    border-top: none;
    padding: 20px 16px;
    border-bottom:none;
}
.commu-board-desc p{
    letter-spacing: -0.4px;
}
.commu-board-desc span{
    letter-spacing: -0.35px;
    margin-top: 4px;
    display: inline-block;
}
.commu-board-line{
    width: 100%;
    height: 1px;
    background: #e5e8ea;
}
.commu-board-icons{
    display: flex;
    height: 50px;
    border: 1px solid #e5e8ea;
    /* border-top: 0; */
    line-height: 2.6;
    border-radius: 0 0 5px 5px;
    position: relative;
}
.commu-detail-contents .commu-board-icons {
    width: auto;
    height: auto;
    border-top: 0;
    border: 0;
    line-height: inherit;
    align-items: center;
    /* float: right;
    margin: 0 15px 20px 0; */
}

.commu-detail-text + .commu-board-icons { /* 커뮤니티 상세 글 - 내가 작성한 글 일때 좋아요 아이콘 및 댓글 수 표시 위치 */
    padding: 0 15px;
    justify-content: right;
    padding-bottom: 20px;
}

.commu-detail-contents .commu-icon-like, .commu-detail-contents .commu-icon-bubble {width: auto;}
.commu-detail-contents .commu-icon-like {margin-right: 22px;}
.commu-detail-contents .commu-icon-like::after {content: none;}
.commu-icon-more {
    background: url("../img/sub/more_icon3.png") center top / 24px 24px no-repeat;
    width: 24px;
    height: 24px;
}
.commu-icon-more img {width: 100%;}
.commu-detail-contents .commu-board-icons span{
    font-family: "NotoSansMedium", sans-serif;
    letter-spacing: -0.35px;
    font-size: 16px;
    margin-left: 6px;
    vertical-align: middle;
}


.commu-icon-like, .commu-icon-bubble{
    /* margin-right: 10px; */
    width: 50%;
    text-align: center;
}
.commu-icon-like::after {
    content: "";
    position: absolute;
    height: 21px;
    width: 1px;
    background: #F2F2F2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.commu-board-icons a,
.commu-board-icons button{
    border:none;
    background: none;;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}
.commu-icon-like button{
    background-image: url(../img/common/heartbig_off.png);
    

}
.commu-icon-like button.active{
    background-image: url(../img/common/heartbig_on.png);
}
.commu-icon-bubble a{
    background-image: url(../img/common/bubble-icon.png);
}
.commu-board-icons span{
    font-family: "NotoSansMedium", sans-serif;
    letter-spacing: -0.35px;
    font-size: 14px;
    margin-left: 4px;
    vertical-align: middle;
}

/* 커뮤니티 상세 */
.commu-detail-contents{
    /* display: flex;
    justify-content: space-between; */
}
.commu-detail-cont{
    width: 100%;
    overflow: hidden;
    /* padding:0 0 0 18px */
}
.commu-detail-tit{
    border-bottom: 1px solid #e5e8ea;
    padding-right: 28px;
}
.commu-detail-tit h4{
    letter-spacing: -0.63px;
}
.commu-detail-sub-wrap{display: flex; justify-content: space-between; padding: 0 15px;align-items: center;}
/* .commu-detail-sub {
    margin-top: 12px;
} */
.commu-detail-sub span{
    position: relative;
    color: #363e4a;
    letter-spacing: -0.45px;
    font-size: 18px;
    display: inline-block;
    vertical-align: top;
    padding-left:16px;
    margin-left: 16px;
    height: 27px;
    line-height: 27px;
}
.commu-detail-sub span::after{
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: #d6d6d6;
    content: "";
    display: block;
}
.commu-detail-sub span:first-child{
    margin-left: 0;
    padding-left: 0;
}
.commu-detail-sub span:first-child:after{
    display: none;
}
/* .commu-detail-icons{
    line-height: 40px;
    justify-content: right;
} */
.commu-detail-desc{
    padding: 20px 0 0;
}
.commu-detail-desc img{
    max-width:100%
}
.commu-detail-desc span {display: inline-block;padding: 20px 15px 30px;}
.commu-detail-slide-wrap{
    width: 680px;
    height: 450px;
    position: relative;
    background: #f8f8f8;
}
.commu-detail-silde{
    overflow:hidden;
}
.commu-detail-silde img{
    width: 100%;
    height: 100%;
}
.commu-detail-silde .swiper-button-next{
    right: -18px;
}
.commu-detail-silde .swiper-button-prev{
    left:-18px
}
.commu-detail-silde .swiper-pagination{
    position: static;
}
.commu-detail-silde .swiper-pagination-bullet{
    width: 4px;
    height: 4px;
    background: #363e4a;
    opacity: 0.2;
    border-radius: 0;
    margin:0 3px !important;
}
.commu-detail-silde .swiper-pagination-bullet-active{
    width: 18px;
    height: 4px;
    opacity: 1;
}
.commu-detail-text{
    display: flex;
    justify-content: space-between;
    padding: 0 15px 20px;
    
}
.commu-detail-sub h4{
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.81px;
    text-align: left;
    color: #363e4a;
}
.commu-detail-text p{
    letter-spacing: -0.38px;
    line-height: 1.6;
     font-size: 14px;
    text-align: left;
    color: #363e4a;
}

.commu-detail-comment{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.commu-detail-comment-top{
    background: #f8f8f8;
    padding:19px 20px;
    border-bottom: 1px solid #e6e8ea;
    border-radius: 10px 10px 0 0;
}
.commu-detail-comment-contents{
    /* padding:10px 0; */
}
/* 2022-09-28 댓글리스트 더보기 수정*/
.commu-detail-comment-contents button{
    border: 0;
    background: none;
    width: 24px;
    height: 24px;
    margin: 24px auto;
    display: block;
}
.commu-detail-comment-contents button img{
    width: 100%;
    height: 100%;

}
/* //2022-09-28 댓글리스트 더보기 수정*/
.commu-detail-comment-contents .scroll-bar-type2{
    overflow-y: scroll;
    height: 100%;
    /* padding-right: 12px; */
}
.commu-detail-comment-cont{
    display: flex;
    /* margin-top: 20px; */
    border-bottom: 1px solid #e6e8ea;
    padding:15px;
}
.commu-detail-comment-cont:first-child{
    /* margin-top:10px; */
}
.comment-icon{
    background:url(../img/sub/comment-icon1.png)no-repeat center;
    width: 35px;
    height: 35px;
    background-size: 35px;
    /* margin-top: 4px; */
}
.comment-icon2{
    background-image: url(../img/sub/comment-icon2.png);
}
.commu-detail-comment-cont .comment-text{
    width: calc(100% - 35px);
    margin: 0 auto 0 10px;
}
.commu-detail-comment-cont .comment-text p{
    font-family: "NotoSansRegular", sans-serif;
    display: inline-block;
    font-size: 15px;
    letter-spacing: -0.38px;
    line-height: 1.6;
    color: #6e7683;
    margin-bottom: 6px;
    word-break: break-all;
}
.commu-detail-comment-cont .comment-text p.comment-user-info {
    position: relative;
    width: 100%;
    display: block;
}
.commu-detail-comment-cont .comment-text p.comment-user-info > span{
    font-family: "NotoSansBold", sans-serif;
    display: block;
}
.commu-detail-comment-cont .comment-text p.comment-user-info > span.comment-user-id{
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.3px;
    text-align: left;
    color: #6e7683;
}
.commu-detail-comment-cont .comment-text p.comment-user-info > span.comment-date{
    font-size: 11px;
    letter-spacing: -0.28px;
    text-align: left;
    color: #aaa;
}
.commu-detail-comment-cont .comment-text > span{
    font-family: "NotoSansRegular", sans-serif;
    font-size: 12px;
    color:#aaa;
    display: block;
}
.commu-detail-comment-cont .comment-text p.comment-user-info button{
    width: 47px;
    height: 24px;
    border:1px solid #363e4a;
    border-radius: 4px;
    letter-spacing: -0.3px;
    position: absolute;
    right:0;
    top:0;
}

.commu-detail-comment-cont .comment-text p.comment-user-text{
    margin: 5px 0px 0 0;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: -0.35px;
    text-align: left;
    color: #363e4a;
}
.commu-detail-comment-bottom{
    margin-top: auto;
    max-height: 196px;
    /* border-top: 1px solid #e6e8ea; */
    /* background: #f8f8f8; */
    /* padding:18px 15px 34px 15px; */
    padding:18px 15px 15px 15px;
    /* border-radius: 10px 10px 0 0; */
    width: 100%;
    background: #fff;
    /* border: 1px solid #e5e8ea; */
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2;
}
.commu-detail-comment-bottom .comment-bo-text{
    display: flex;
    flex-wrap: wrap;
}
.commu-detail-comment-bottom .comment-icon{
    margin-top: 5px;
}
.comment-bo-cont{
    width: calc(100% - 125px);
    /* border-bottom: 1px solid #4b82ee; */
    /* padding-bottom: 9px; */
}
.comment-bo-cont h6{
    letter-spacing: -0.38px;
    margin-bottom: 6px;
}
.comment-bo-cont p{
    letter-spacing: -0.3px;
}
.comment-bo-cont .textara-wrap{
    position: relative;
}
.comment-bo-cont textarea{
        height: 44px;
    resize:none;
    width: calc(100% - 5px );
    background: none;
    border:none;
    padding: 12px 0 12px 9px;
    line-height: 1.5em;
    max-height: 72px;
    /* outline: none; */
    font-size: 14px;
      border-radius: 4px;
    border: solid 1px #e5e8ea;
    background-color: #fafafb;
}
.comment-bo-cont .textara-wrap textarea + span{
    position: absolute;
    bottom:-2px;
    left:50%;
    width: 0;;
    background: #4b82ee;
    height: 2px;
    display: block;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}
/* .comment-bo-cont .textara-wrap textarea:focus + span,
.comment-bo-cont .textara-wrap textarea:active+ span{
    width: 100%;
    left:0;
} */
.commu-detail-comment-bottom .btn-wrap{
    width: 80px;
}
.commu-detail-comment-bottom button{
    border:0;
    width: 80px;
    height: 44px;
    border-radius: 4px;
    background-color: #363e4a;
     font-size: 12px;
    font-weight: 500;
    line-height: 1.67;
    letter-spacing: -0.3px;
    text-align: center;
    color: #f9fafb;
    align-self: flex-end;
}
.commu-detail-comment-bottom button:hover{
    background-color: #363e4a;
}
/* 사진올리기 팝업 */
.community-upload-contents th{
    padding:26px 0 28px 25px; 
}
.community-upload-contents th span{
    color:#4b82ee;
}

.community-upload-contents input,
.community-upload-contents textarea{
    color: #363e4a;
}

/* 2021-12-31 추가 - community 사진 올리기 */
.upload-tit{
    padding: 15px 14px;
    border-bottom: 1px solid #e5e8ea;
}
.upload-tit input[id="upload-tit"]{
    font-family: "NotoSansRegular", sans-serif;
    padding: 12px 10px;
    width: 100%;
    border-radius: 5px;
    border:1px solid #e5e8ea;
    font-size: 14px;
    letter-spacing: -0.63px;
}

.upload-con{
    /* max-height: 436px;
    overflow-y: auto; */
    padding: 15px 14px 0 14px;
    border-bottom: 1px solid #e5e8ea;
}
.upload-con input[type="file"]{
    display: none;
}

.upload-con input[type="file"] + label{
    display: inline-block;
    width: 100%;
    height: 46px;
    border-radius: 5px;
    text-align: center;
    line-height: 46px;
}

.upload-con .commu-file-upload-box img{
    width: 18px;
    margin-right: 10px;
    margin-bottom: 4px;
} 

.upload-con .commu-file-upload-text{
    display: block;
    font-size: 11px;
    color: #aaa;
    margin: 8px 0 11px 0;
    letter-spacing: -0.28px;
}

.upload-chk{
    padding: 18px 15px 0 15px;
}

.upload-chk .chk-title{
    background-color: #f5f6f7;
    padding: 16px 15px 16px 40px;
}

.upload-chk .chk-title .input-chk{
    display: none;
}

.upload-chk .chk-title label{
    position: relative;
    letter-spacing: -0.35px;
}

.upload-chk .chk-title label::before{
    content: '';
    position: absolute;
    left: -20px;
    top: 2px;
    transform: translateX(-50%);
    background-image: url(../img/common/checkbox-type2.png);
    background-position: 100% 100%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.upload-chk .chk-title .input-chk:checked + label::before{
    background-image: url(../img/common/checkbox-type2-active.png);
}
/************************************************************************/

.commu-form-cont{
    padding:15px 0 15px 15px !important;
}
.commu-form-cont.commu-form-keyword{
    padding:20px 0 20px 15px !important;
}
.commu-form-cont input[id="upload-tit"]{
    font-family: "NotoSansRegular", sans-serif;
    padding: 12px 20px;
    width: 100%;
    border-radius: 5px;
    border:1px solid #eaeaea;
    font-size: 15px;
    letter-spacing: -0.38px;
}
.commu-form-cont input::placeholder,
.commu-form-cont textarea::placeholder,
.commu-form-keyword input::placeholder{
    color:#aaa;
}
.commu-form-cont input:-ms-input-placeholder,
.commu-form-cont textarea:-ms-input-placeholder,
.commu-form-keyword input:-ms-input-placeholder{/*IE*/
    color:#aaa;
}
.commu-form-cont textarea{
    font-family: "NotoSansRegular", sans-serif;
    padding: 12px 20px;
    width: 100%;
    height: 210px;
    resize: none;
    border: 1px solid #d9dcde;
    border-radius: 5px;
    font-size: 15px;
    letter-spacing: -0.38px;
    color: #aaa;
}
.commu-form-keyword{
    font-size: 0;
}
.commu-form-keyword input{
    padding:8px 16px;
    display: inline-block;
    width: 111px;
    height: 36px;
    border: 1px solid #e5e8ea;
    background: #fafafa;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    letter-spacing: -0.35px;
    margin-right: 10px;
    vertical-align: top;
}
.commu-form-keyword span{
    height: 36px;
    display: inline-block;
    padding:8px 16px;
    background: #fafafa;
    border-radius: 20px;
    font-size: 14px;
    color:#4b82ee;
    border:1px solid #4b82ee;
    letter-spacing: -0.35px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.commu-form-cont input[type="file"]{
    display: none;
}
.commu-form-cont input[type="file"] + label{
    display: inline-block;
    width: 97px;
    height: 46px;
    border-radius: 5px;
    text-align: center;
    line-height: 46px;
    margin-right: 13px;
}
/* 2021-12-31 수정 */
.commu-file-img-wrap{
    /* display: flex; */
}
.commu-file-img{
    display: flex;
    margin-bottom: 12px;
    /* margin-right: 27px; */
}
.commu-file-img-box.ver-img{
    height: auto !important;
    max-height: none !important;
}

.commu-file-img-box.hor-img{
    width: auto;
}

.commu-file-img:last-child{
    margin-right: 0;
}

.commu-file-text{
    margin-bottom: 20px;
}

.commu-file-text textarea{
    width: 100%;
    height: 150px;
    padding: 10px;
    font-size: 14px;
    letter-spacing: -0.35px;
    border-radius: 5px;
    border: solid 1px #e5e8ea;
    resize: none;
}

.commu-file-img-box{
    width: 90px;
    height: 90px;
    margin-right: 8px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #e5e8ea;
}
/* 2021-12-31 수정 */
.commu-file-img-box img{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
.commu-file-img-del{
    width: 22px;
    height: 22px;
    background: url(../img/common/close-icon5.png)no-repeat center;
    background-size: 22px;
    border:0;
}
.upload-text{
    margin: 28px 0 30px;
    width: 100%;
    height: 54px;
    padding:16px 40px;
    background: #f5f6f7;
    border-radius: 5px;
}
.upload-text p{
    letter-spacing: -0.38px;
}
.upload-text p span{
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #6e7683;
    vertical-align: middle;
    margin-right: 10px;
}
.community-upload-contents .btn-wrap{
    text-align: center;
}
.community-upload-contents .upload-btn{
    width: 206px;
    height: 56px;
    border-radius: 5px;
    padding: 16px 0;
    border: 1px solid #4b82ee;
    letter-spacing: -0.4px;
}
.community-upload-contents .upload-btn-can{
    margin-right: 6px;
}

.commu-file-upload-box label.active{
    outline:1px solid #000;
}


/* new page */
.new-products-list-wrap{
    
}
/* .new-products-list-wrap .products-items.products-items{
    display: inline-flex;
    
    border-left: solid 1px #e5e8ea;
    border-top: solid 1px #e5e8ea;
} */
.new-products-list-top{
    position: relative;
    width: 100%;
    margin: 20px auto 10px;
    display: flex;
    justify-content: center;
}
.new-products-list-top .radio-type-new.radio{
    position: relative;
    z-index: 2;
}

.new-products-list-top .swiper-slide{width: auto;margin-left: 10px;}
.new-products-list{
    width: 100%;
    margin: 0 auto;
}
.new-products-list .products-items {justify-content: space-between;}
.new-products-list .products-items .products-item {width: 49%;}
.activeBox{
    position: absolute;
    left:48px;
    top:0;
    height: 50px;
    background-color: #363e4a;
    border-radius:25px;
    width: 82px;
    transition: width 0.3s ease-in-out 0.1s
}
/* 
    sale sale 페이지
 */
 #contents .swiper-slide {height: auto !important;}
.sale-wrap{
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: auto;
}
.swiper-wrapper{height: auto;}
.sale-wrap .swiper-pagination.swiper-pagination-type-2{
    margin-top: 12px;
}
.sale-wrap .sale-swiper img{
    width: 100%;
}

.sale-list{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 15px;
    
}
.sale-list-item{
    width: 100%;
}
/* .sale-list-item .img {height: 50vw;} */
.sale-list .img img{
    width: 100%;
    /* height: 100%; */
    border-radius: 8px;
}
.sale-list .text{
    padding-top: 12px;
    padding-bottom: 30px;
}
.sale-list .text h3{
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.45px;
    text-align: left;
    color: #363e4a;
}
.sale-list .text h3 span{color: #eb4d72;}
.sale-list .text p{
    font-size: 12px;
    letter-spacing: -0.4px;
    text-align: left;
}
.sale-list .text p.slg{
  color: #363e4a;
  margin-top: 10px;
}
.sale-list .text p.date{
  color: #999;
  margin-top: 4px;

}

.sale-view-top{
    height: 64vw;
}

.sale-view-contents{
    width: 100%;
    margin: 0 auto;
    padding-top: 30px;
}
.sale-type-content{
    padding-bottom: 100px;
}
.sale-view-type-title{
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -1.08px;
    text-align: center;
    color: #363e4a;
    margin-bottom: 10px;
}
.sale-type-content{}
.sale-item-wrap .products-items{
    display: inline-flex;
    /* border-top: solid 1px #e5e8ea;
    border-left: solid 1px #e5e8ea; */
}

/* 랭킹페이지 */

.ranking-wrap{}
.ranking-wrap .ranking-contents{}
.ranking-wrap .ranking-contents .top-rank{
  padding: 35px 0;
  background-color: #f5f7f8;
}
.ranking-wrap .ranking-contents .other-rank{
    /* padding-top: 35px; */
    width: 100%;
    margin: 0 auto;
}
.ranking-wrap .ranking-contents .top-rank .products-items{
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.ranking-wrap .ranking-contents .other-rank .products-items{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.rank-item-box{
    position: relative;
    width: 49%;
    margin-bottom: 10%;
}
.rank-item-box .products-item{
    width: 100%;
}
.rank-item-box .num{
    position: absolute;
    left:20px;
    top:10px;        
    font-weight: bold;
    color: #2e3238;
    font-size: 20px;
    z-index: 5;
}

.top-rank .rank-item-box .num{font-size: 40px;}
.other-rank .rank-item-box .num{font-size: 20px;}


/* 
    brand 페이지
 */
.brand-wrap{
    position: relative;
    height: auto;
}
.swiper-wrapper{height: auto;}
.brand-wrap .swiper-pagination.swiper-pagination-type-2{
    margin-top: 18px;
}
.brand-wrap .brand-swiper img{
    width: 100%;
}
.brand-top{
    position: relative;
    background-color: #f5f7f8;
    display: none;
}
.brand-top-inner{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
}
.brand-top-inner .swiper-button-prev,
.brand-top-inner .swiper-button-next{

}
.brand-top-inner .swiper-button-prev{
    left:-18px
}
.brand-top-inner .swiper-button-next{
    right: -18px
}

.brand-contents-filter-wrap{
    width: 100%;
    margin: 0 auto;
}
.brand-search{
    margin-top: 20px;
    position: relative;
    width: 100%;
    height: 40px;
    padding: 10px;
    border-radius: 4px;
    border: solid 1px #e5e8ea;
    background-color: #fafafb;
}
.brand-search input{
    border:none;
    width: 100%;
    height: 100%;
    letter-spacing: -0.5px;
    text-align: left;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-family: "NotoSansMedium", sans-serif;
    color: #353e4a;
    padding-right: 40px;
    background: none;
}
.brand-search input::placeholder{
    color: #aaaaaa;
}
.brand-search input + span.motion{
    width: 0;
    position: absolute;
    bottom:0;
    left:50%;
    height: 2px;
    background: #363e4a;
}
.brand-search input:focus + span.motion{
    width: 100%;
    left:0;
}
.brand-search button{
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    position: absolute;
    right: 10px;
    top: 10px;
}
.brand-search button img{width: 100%;}
.brand-contents {    padding: 0 15px;}
.brand-contents-filter{
    margin-top: 20px;
    /* display: flex; */
    
}
.brand-contents-filter .brand-filter{
    /* display: flex;
    align-items: flex-start; */
}

.brand-contents-filter .brand-filter.brand-filter-top {
    display: flex;
    height: 44px;
    border: 1px solid #e5e8ea;
    border-radius: 5px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.brand-filter-left{
    width: 50%;
    margin-left: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: -0.5px;
    color: #363e4a;
    font-family: "NotoSansMedium", sans-serif;
    line-height: 44px;
    height: 44px;
}
.brand-filter-left span{
    display: block;
}
.brand-filter-left.active {
    background: #363e4a;
    color: #fff;
    /* border-radius: 5px 0 0 5px; */
}
.brand-filter-left.active a {color: #fff;}
.brand-filter-left .radio.brand-radio input[type="radio"] + label{padding: 0;}

.brand-filter-right .brand-radio{
    margin-left: 0;
    
}
.brand-filter-right .brand-radio:first-child{
    /* margin-left: 0; */
}
.radio.brand-radio{margin-left: 0;}
.radio.brand-radio input[type="radio"] {}
.radio.brand-radio input[type="radio"] + label{
    font-size: 15px;
    font-weight: 500;
    line-height: 44px;
    height: 44px;
    letter-spacing: -0.5px;
    text-align: center;
    color: #aaaaaa;
    font-family: "NotoSansMedium", sans-serif;
    padding: 0 12.5px;
    border-right: 0;
    border-top: 1px solid #e5e8ea;
    border-left: 1px solid #e5e8ea;
    border-bottom: 1px solid #e5e8ea;
    position: relative;
}
.radio.brand-radio input[type="radio"]:checked + label{
    color: #4b82ee;
    border: 1px solid #4b82ee;
    z-index: 10;
}

.radio.brand-radio input[type="radio"] + label::before{display: none;}
.filter-swiper2,
.filter-swiper {margin-top: 20px;}
.filter-swiper2  .swiper-slide,
.filter-swiper  .swiper-slide{
    width: auto;
    margin-left: -1px;
    padding-left: 1px;
}
.swiper-scrollbar{height: 5px; margin-top: 5px;}
.brand-filter-all .radio.brand-radio{
    margin-left: 0;
    width: 80px;
    line-height: 44px;
    height: 44px;
    text-align: center;
    
    color: #aaaaaa;
}
.brand-filter-all .radio.brand-radio input[type="radio"] + label{
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.brand-filter-all .radio.brand-radio:nth-child(n+9):nth-child(-n+16) {border-top: 0;}
.brand-filter-all .radio.brand-radio:nth-child(8),
.brand-filter-all .radio.brand-radio:nth-child(16) {border-right: 1px solid #e5e8ea;}
.brand-filter-all span{
    text-align: center;
    display: block;
    line-height: 44px;
}

.brand-filter-other{
    /* display: flex;
    flex-direction: column; */
}
.brand-filter-inner {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}
.brand-content{
    width: 1280px;
    margin: 30px auto 0;
}
.brand-wrap{}
.brand-sort-name{
    font-size: 50px;
    font-weight: 500;
    letter-spacing: 5px;
    text-align: left;
    color: #363e4a;
    height: 74px;
    line-height: 74px;
    font-family: "NotoSansBold", sans-serif;
}
.brand-inner-wrap{
    padding:10px 0;
}
.brand-inner-wrap{
    display: flex;
    flex-wrap: wrap;
    /* padding-bottom: 40px; */
}
.brand{
    /* border-right: solid 1px #e5e8ea; */
    height: 53px;
    width: 100%;
    margin-bottom: 30px;
}
.brand:nth-child(4n){
    border-right: 0;
    margin-right: 0;
}
.brand a{}
.brand a h3{
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.35px;
    text-align: left;
    color: #6e7683;
    /* font-family: "NotoSansMedium", sans-serif; */
}
.brand a h4{
    font-weight: 500;
    letter-spacing: -0.35px;
    text-align: left;
    font-size: 18px;
    color: #363e4a;
    font-family: "NotoSansBold", sans-serif;
}


/*브랜트 - 뷰 페이지*/

.brand-view-top{
    position: relative;
    height: 80vw;
}
.brand-view-top-bg{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 80vw;
    /* background-color: rgba(0, 0, 0, 0.4); */
    background-color: #2b2b2b;
}
.brand-view-top-contents{
    padding: 40px 0 0 15px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.brand-view-top-contents>div{font-size: 0;}
.brand-view-top-contents>div>h2,
.brand-view-top-contents>div>h4{display: inline-block;}
.brand-view-top-contents h2{
    font-size: 30px;
    font-weight: bold;
    letter-spacing: -1.25px;
    text-align: left;
    color: #fff;
}
.brand-view-top-contents span{
    margin-left: 10px;
    opacity: 0.5;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.4px;
    text-align: left;
    color: #fff;
}
.brand-view-top-contents h5{
    font-size: 12px;
    font-weight: bold;
    letter-spacing: -0.4px;
    text-align: left;
    color: #fff;
}
.brand-view-top-contents p{
    margin: 13px 0 0;
    padding-right: 15px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.69;
    letter-spacing: -0.33px;
    text-align: left;
    color: #e5e8ea;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-view-contents{
    margin:0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}


.brand-view-top-event{
    position: relative;
}

.brand-view-top-event .brand-view-top-swiper .swiper-slide img{
    width: 100%;
}
.brand-view-top-event .swiper-button-prev{
    left:-18px
}
.brand-view-top-event .swiper-button-next{
    right: -18px
}
.brand-view-lists{
    width: 100%;
    margin: 0 auto 0;
}
.event-top ,
.brand-view-lists-top{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #e5e8ea;
}
.event-top > div,
.brand-view-lists-top > div{
    width: 50%;
    height: 45px;
    
}
.event-top .left,
.brand-view-lists-top .left{
    font-size: 14px;
    /* font-weight: bold; */
    letter-spacing: -0.35px;
    text-align: left;
    color: #6e7683;
    line-height: 45px;
    border-right: 1px solid #e5e8ea;
    padding-left: 15px;
}
.event-top .left span,
.brand-view-lists-top .left span{
  font-family: "NotoSansBold", sans-serif;
  font-weight: 700;
   /* color: #363e4a; */
}
.event-top .right select,
.brand-view-lists-top .right select{
    width: 100%;
    height: 100%;
    padding-left: 15px;
    background: none;
    border:none;
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/common/drop_icon3.png) calc(100% - 15px) center no-repeat;
    background-size: 10px;
    font-size: 14px;
      color: #363e4a;
}
.brand-view-list{
    display: inline-flex;
    flex-wrap: wrap;
}


.commu-hash{
    font-size: 0;
    border-left: 1px solid #e5e8ea;
    border-right: 1px solid #e5e8ea;
    padding: 0px 16px 20px;
}
.commu-hash .hash{
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #4b82ee;
    margin-left: 5px;
    
}
.commu-hash .hash:first-child{margin-left: 0px;}


.commu-detail-footer{
    padding: 15px;
    background-color: #f8f8f8;
    border-top:1px solid #e5e8ea;
    border-bottom:1px solid #e5e8ea;
    /* margin-top: 30px; */
}
/* .commu-detail-footer span{
    font-size: 12px;
    letter-spacing: -0.3px;
    text-align: left;
    color: #6e7683;
} */

.commu-detail-number span {
    font-size: 12px;
    letter-spacing: -0.3px;
    text-align: left;
    color: #6e7683;
}