.forum-container{
    margin-top: 50px;

    /* padding-left: 100px;
    padding-right: 100px; */
    padding: 0 calc(1.25vw * 2.5);

    width: 125%;
    margin-bottom: 50px;
    transform: scale(0.8);
    transform-origin: 0 0;
    margin-bottom: -130px;
}

.forum-title{
    font-size: 28px;
    font-weight: 700;
}

.forum-category {

    margin-top: 30px;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

}

.forum-category a{
    display: inline-flex;

    width: 280px;
    height: 70px;

    margin: 0px;

    justify-content: center;
    align-items: center;

    font-size: 20px;
    font-weight: 500;

    border: 0;
    box-shadow: none;

    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 100% 100%, 25px 100%, 0 calc(100% - 25px), 0 0);
    /* clip-path: polygon(25px 0%, 100% 0, 100% 100%, 0 100%, 0% 25px); */

    /* z-index: 2; */
}

.forum-category a:hover{
    cursor: pointer;
}

.forum-category::after{
    content: "";
    width:100px;
    height: 100%;

    background-color: #666666;

    position: absolute;
    z-index: -1;

    filter:none;

    /* right: 10px;  */
}

.forum-sort-container {
    display: flex;
    justify-content: end;

    position: relative;
    top: -15px;
}

.forum-sort-container a{
    font-size: 13px;
    margin-right: 10px;
    font-weight: 500;
}

.forum-sort-container a:hover{
    cursor: pointer;
}

.forum-sort-container .active{
    color: #3b8fff;
}

.searchAndPosts-container {
    width: 100%;
    box-shadow: 4px 4px 4px 2px rgba(45, 45, 45, 0.2);


}

.search-container{
    height: 100px;
    
}

.search-btn{
    height: 100%;
    padding: 0px 30px;

    border: none;

    font-size: 1.5em;
    font-weight: bolder;
}

.search-content{
    height: 100%;
    clip-path: polygon(25px 0%, 100% 0, 100% 100%, 0 100%, 0% 25px);
    
    font-size: 17px;
    font-weight: 600;

    padding: 20px;
}

.search-hero-container{
    width: 230px;
    height: 51px;
}

.search-hero-container img{
    width: 44px;
    margin-right: 3px;

    transition: 0.1s;
    /* aspect-ratio: 1/1; */
}

.search-hero-img:hover{
    cursor: pointer;
    /* filter: brightness(70%); */
}

.search-hero-img:hover img{
    /* cursor: pointer; */
    filter: brightness(70%);
}


.search-hero-container span {
    position: absolute;
    background-color: white;

    width: 20px;
    height: 5px;

    z-index: 1;
    right: 15px;
    bottom: 22px;

    box-shadow: 2px 2px 4px 2px rgba(45, 45, 45, 0.2);
    
    display: none;
}

.search-hero-img:hover span{
    display: block;

}


.search-hero-img{
    position: relative;
}

.search-content button{
    border: none;
    /* width: 240px; */
    /* height: 100%; */

    text-align: start;

    padding: 8px 15px;

    /* padding-left: 15px;
    padding-right: 15px; */

    margin: 0px 15px;
}

.hero-namesearch{
    height: 100%;
    width: 220px;
}

.content-search{
    width: 250px;
}

.content-dropdown-menu{
    position: relative;
    z-index: 1;

    width: 250px;
}

.content-dropdown-menu li{
    height: 40px;

    display: flex;
    align-items: center;

    padding-left: 15px;
    padding-right: 15px;

    font-size: 15px;
    font-weight: 500;

    border-bottom: 1px solid #c6c5c5;
    transition-duration: 0.1s;


}

.content-dropdown-menu li:hover{

    background-color: #e2e0e0;
}


.content-dropdown-menu{
    display: none;

    position: absolute;
    left: calc(50% + 170px);
    top: -29px;
    z-index: 1;
}

.content-dropdown-menu li:hover{
    cursor: pointer;
}

.content-dropdown-container {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.forum-search-result-title{
    width: 100%;
}

.hero-search-container{
    /* display: grid;
    grid-template-rows: 60px 1fr; */

    width: 850px;
    height: 400px;

    background-color: #3f3f50;

    /* border: 2px solid #BFC3D4; */

    overflow: hidden;

    position: absolute;
    z-index: 1;
    

    left: calc(50% - 360px);
    top: -29px;
    
    font-size: 17px;
    font-weight: 500;

    box-shadow: 0px 10px 8px 7px rgba(0, 0, 0, 0.5);

    display: none;

}


.hero-search-top{
    height: 60px;
}


.hero-search-top input{
    /* display: inline-block; */
    padding: 6px 10px;
    margin-left: 8px;
}

input[name="hero-class"]{
    width: 130px;
    text-align: center;
    margin-right: 25px;
}

input[name="hero-type"]{
    width: 80px;
    text-align: center;
    margin-right: 25px;
}

input[name="hero-name"]{
    width: 200px;
}

.hero-search-bottom{
    height: 340px;
}

.selected-hero-container{
    width: calc(50% - 3px);
    margin-right: 3px;

    position: relative;
}

.selected-heros{
    height: 100%;
}

.selected-hero-container .selected-num{
    background-color: #BFC3D4;
    padding: 7px;
    width: 65px;

    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 100% 100%, 6px 100%, 0 calc(100% - 6px), 0 0);
    text-align: center;
}

.searched-hero-container{
    width: calc(50% - 3px);
    margin-left: 3px;

    overflow-x: hidden;
    overflow-y: scroll;
}

.searched-hero-container::-webkit-scrollbar{
    /* display: none; */
    width: 5px;
}

.searched-hero-container::-webkit-scrollbar-thumb {
    min-height: 30%; /* 스크롤바의 길이 */
    background: #3b8fff; /* 스크롤바의 색상 */
    
    border-radius: 10px;
}

.searched-hero-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);  /*스크롤바 뒷 배경 색상*/
}

.selected-btn{
    position: absolute;
    bottom: 5px;
    width: 100%;

    padding: 15px;

    height: 75px;
}

.selected-btn button{
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 100% 100%, 6px 100%, 0 calc(100% - 6px), 0 0);
    box-shadow: inset -1px 1px 1px 0.5px rgba(255, 255, 255, 0.535);

    height: 100%;
    border: 0;

}

.selected-btn .btn-blue{
    width: 100px;
}

.selected-btn .btn-red{
    width: 50px;
    margin-right: 10px;

    font-size: 20px;
}

.searching-hero{
    width: 100%;
    height: 21%;
    border-bottom: 3px solid #666666;

    display: flex;
    align-items: center;

    padding: 5px 8px;

    position: relative;
}

.searching-hero button{
    width: 55px;
    height: 2.8em;
    
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 100% 100%, 6px 100%, 0 calc(100% - 6px), 0 0);
    box-shadow: inset -1px 1px 1px 0.5px rgba(255, 255, 255, 0.535);

    border: none;

    position: absolute;

    

    right: 0px;
    bottom: -22px;
}

.searching-hero button::after{
    content: "";
    display: block;

    width: 65%;
    height: 5px;
    background-color: white;

    position: absolute;
    right: 10px;
    top: 47%;
}

.btn-plus button::before{
    content: "";
    display: block;

    width: 5px;
    height: 65%;
    background-color: white;

    position: absolute;
    right: 45%;
    top: 10px;
}

.searching-hero img{
    /* height: 3.2em; */
    width: 47px;
    margin-right: 10px;
}

.searching-hero .class-img{
    /* height: 2.5em;  */
    width: 39.4px;
    margin-left: 3px;
}

.forum-preview-posts{
    margin-top: 30px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    /* grid-template-rows: repeat(auto-fill, minmax(370px, 1fr)); */
    place-items: center;

    column-gap: 20px;
    row-gap: 20px;
}

.searchAndPosts-container .dots_div{
    top : 5px;
}

.pagenation{
    margin-top: 80px;
    font-size:  16px;
    align-items: center;
}

.pagenation a{
    color:white;
    margin: 3px;
}

.pagenation .active{
    color: #ffed49;
}

.pagenation .jumps{
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagenation .jumps a{
    /* padding: auto; */
    border: #1d1d26 1px solid;
    width: 28px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagenation > div:nth-child(2){
    margin: 0 25px;
}


@media screen and (max-width: 1500px) {
    /* .forum-container{
        padding: 0 calc(1vw * 2.5);
    } */
}