.mediaPos {
    position: relative;
}
.mediaAbs {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: #fff;
}
.mediaTit {
    font-family: LeagueGothicRegular;
    font-size: 4.16vw;
    line-height: 4.16vw;
    
}
.mediaSubTit {
    font-family: RobotoCondensedRegular;
    font-size: 1.01vw;
    line-height: 1.4vw;
    padding: 1.66vw 0 2.86vw 0;
}
.mediaDown {
    padding: 4.42vw 18.95vw 6.25vw 18.95vw;
    font-family: RobotoCondensedRegular;
}
.mediaFlex {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
}
.mediaItem {
    width: 23%;
    transition: all .5s;
}
.mediaItem:hover {
    transform: translateY(-.3rem);
}
.mediaImg {
    text-align: center;
    background-color: #f3f3f3;
    padding: 1.01vw 3.04vw 0.93vw 2.7vw;
    border-radius: 5px;
    cursor: pointer;
}
.mediaImgs {
    padding: 1.04vw 0 1.3vw 0;
    width: 4.37vw;
}
.mediaItemTit {
    font-size: 1.5vw;
    line-height: 1.5vw;
    color: #000;
    font-weight: bold;
}
.mediaBtn {
    background-color: #000;
    font-size: 1.01vw;
    line-height: 1.4vw;
    color: #fff;
    padding: 0.17vw 0;
    border-radius: 50px;
    display: flex;
    align-items: center;
    column-gap: 10px;
    justify-content: center;
}
.mediaBtn:hover {
    background-color: #ff1d63;
}
.mediaBtnImg {
    padding: 0;
    width: 1.12vw;
}
.mediaInp {
    width: 33.85vw;
    position: relative;
}
.mediaInp input {
    padding-left: 1.5vw;
}
.mediaInp img {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-3%, -50%);
    cursor: pointer;
}
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
}
.dropdown-item {
    text-align: left;
    padding: 0.8vw 1.5vw;
    cursor: pointer;
    font-size: 1.01vw;
    color: #333;
    border-bottom: 1px solid #eee;
}
.dropdown-item:last-child {
    border-bottom: none;
}
.dropdown-item:hover {
    background-color: #f5f5f5;
}
.hidden {
    display: none !important;
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .mediaTit {
        font-size: 6vw;
        line-height: 6vw;
    }
    .mediaSubTit {
        font-size: 1.5vw;
        line-height: 2vw;
        padding: 2vw 0 3vw 0;
    }
    .mediaInp {
        width: 50vw;
    }
    .mediaDown {
        padding: 5vw 5vw 8vw 5vw;
    }
    .mediaItem {
        width: 31.3%;
    }
    .mediaItemTit {
        font-size: 2vw;
        line-height: 2vw;
    }
    .mediaBtn {
        font-size: 2.5vw;
        line-height: 2vw;
        padding: 1vw 0;
    }
    .mediaBtnImg {
        width: 2.5vw;
    }
    .mediaImgs {
        width: 9.35vw;
    }
}

@media only screen and (max-width: 768px) {
    .mediaAbs {
        width: 90%;
    }
    .mediaTit {
        font-size: 12vw;
        line-height: 12vw;
    }
    .mediaSubTit {
        font-size: 3.5vw;
        line-height: 4.5vw;
        padding: 4vw 0 6vw 0;
    }
    .mediaInp {
        width: 100%;
    }
    .mediaInp input {
        padding-left: 4vw;
        height: 10vw;
        font-size: 3.5vw;
    }
    .mediaInp img {
        width: 5vw !important;
        height: 5vw !important;
    }
    .mediaDown {
        padding: 8vw 4vw 12vw 4vw;
    }
    .mediaFlex {
        gap: 4vw;
    }
    .mediaItem {
        width: 47.5%;
    }
    .mediaImg {
        padding: 4vw 4vw 3vw 4vw;
    }
    .mediaImgs {
        padding: 3vw 0 4vw 0;
        width: 18vw;
    }
    .mediaItemTit {
        font-size: 4vw;
        line-height: 5vw;
        margin-bottom: 2vw;
    }
    .mediaBtn {
        font-size: 3.5vw;
        line-height: 5vw;
        padding: 1.5vw 0;
        column-gap: 5px;
    }
    .mediaBtnImg {
        width: 3.5vw;
    }
    .dropdown-item {
        font-size: 3.5vw;
        padding: 3vw 4vw;
    }
}