/* 모바일 - 작은화면 */
@media (max-width: 411px) and (min-width: 0px) {
    .grid {
        width: 320px !important;
    }

    .logo-area {
        display: none !important;
    }

    .neo-contents {
        font-size: 18px !important;
    }

    .neo-title {
        font-size: 40px !important;
    }

    .kakao_adfit_bottom_m {
        display: inline !important;
    }

    footer {
        margin-bottom: 50px;
    }

    .card-challenge-img-container{
        height: 200px !important;
    }
}

/* 모바일 - 큰화면 */
@media (max-width: 499px) and (min-width: 412px) {
    .grid {
        width: 392px !important;
        margin: 0 auto;
    }

    .logo-area {
        display: none !important;
    }

    .neo-contents {
        font-size: 18px !important;
    }

    .neo-title {
        font-size: 40px !important;
    }

    .kakao_adfit_bottom_m {
        display: inline !important;
    }

    footer {
        margin-bottom: 50px;
    }
    .card-challenge-img-container{
        height: 200px !important;
    }
}

/* PC - small */
@media (max-width: 575px) and (min-width: 500px) {
    .grid {
        width: 476px !important;
    }
    footer {
        margin-bottom: 50px;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 200px !important;
    }
    .neo-title {
        font-size: 48px !important;
    }
}

/* PC - 2col */
@media (max-width: 699px) and (min-width: 576px) {
    .grid {
        width: 392px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 200px !important;
    }
}

/* PC - 3col */
@media (max-width: 899px) and (min-width: 700px) {
    .grid {
        width: 476px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 200px !important;
    }
}

/* PC - 4col */
@media (max-width: 1199px) and (min-width: 900px) {
    .grid {
        width: 638px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 200px !important;
    }
}

/* PC - 5col */
@media (max-width: 1511px) and (min-width: 1200px) {
    .grid {
        width: 800px !important;
    }
    .card-challenge-img{
        margin-top: 60px;
    }
    .card-challenge-img-container{
        height: 220px !important;
    }
}

/* PC - 6col */
@media (max-width: 1763px) and (min-width: 1512px) {
    .grid {
        width: 962px !important;
    }
    .card-challenge-img{
        margin-top: 60px;
    }
    .card-challenge-img-container{
        height: 250px !important;
    }
}

/* PC - 7col */
@media (max-width: 2015px) and (min-width: 1764px) {
    .grid {
        width: 1124px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 300px !important;
    }
}

/* PC - 8col */
@media (max-width: 2267px) and (min-width: 2016px) {
    .grid {
        width: 1286px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 300px !important;
    }
}

/* PC - 9col */
@media (max-width: 2519px) and (min-width: 2268px) {
    .grid {
        width: 1448px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 300px !important;
    }
}

/* PC - 10col */
@media (max-width: 2771px) and (min-width: 2520px) {
    .grid {
        width: 1610px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 300px !important;
    }
}

/* PC - 11col */
@media (max-width: 3023px) and (min-width: 2772px) {
    .grid {
        width: 1772px !important;
    }
    .card-challenge-img{
        margin-top: 50px;
    }
    .card-challenge-img-container{
        height: 300px !important;
    }
}

.card-challenge-img-container{
    position: relative;
    height: 200px;
    overflow: hidden;
    border-top: 1px solid #d0d0d0
}

.grid-header-item {
    margin: 0 auto;
    margin-bottom: 10px;
}

.grid {
    margin: 0 auto;
}

/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* grid-item */
.grid-item {
    width: 100%;
    float: left;
    border-radius: 1rem;
    margin-bottom: .5rem;
}

/* canvas */
.animated-preview-widget {
    width: 100%;
    display: block;
    background-color: white;
    border-radius: 16px;
    border: 1px solid #dee2e6;
}

.header-animated-preview-widget {
    width: 100%;
    display: block;
    background-color: white;
    border-radius: 16px;
    border: 1px solid #dee2e6;
}

/* TAGS - 마우스오버 영역 */
.card-preview-actions-tags {
    position: absolute;
    bottom: 0;
    left: 1px;
    width: 100%;
    height: 100%;
    background-image: url(/img/pixelog-bg-btt.png);
    background-position: bottom;
    background-repeat: repeat-x;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.125);
}


/* 마우스오버 영역 */
.card-preview-actions {
    position: absolute;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 24px;
    border-radius: 0px 0px 16px 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

.card-preview-contents-tags {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.neo-contents-tags {
    font-size: 16px;
    color: #ffffff;
    /*filter: drop-shadow(-2px 0 0 black) drop-shadow(2px 0 0 black) drop-shadow(0 -1px 0 black) drop-shadow(0 2px 0 black);*/
    max-width: 140px;
    padding-left: 10px;
}


/* 마우스오버 높이 */
.card-preview-container:hover .card-preview-actions {
    opacity: 1;
    visibility: visible;
}

/* 마우스오버-닉네임버튼 */
.card-preview-action {
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    margin-left: 8px;
    line-height: 24px;
}

.card-preview-action:hover {
    color: #ffc107 !important;
    text-decoration: none;
}

.card-preview-action.right {
    float: right;
    margin-right: 8px
}

/* 마우스오버-PIXELOG버튼 */
.card-preview-pixelog {
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    margin-left: 8px;
    line-height: 24px;
}

.card-preview-pixelog:hover {
    color: #007bff !important;
    text-decoration: none;
}

.card-preview-pixelog.left {
    float: left;
    margin-left: 8px
}

.gif-icon {
    width: 20px;
    position: absolute;
    background-color: #f8f9fa !important;
    border-radius: 50%;
    height: 20px;
    line-height: 1.8;
    left: 7px;
    top: 7px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid black;
}

/*좋아요 아이콘*/
.likes-icon {
    width: 20px;
    position: absolute;
    height: 20px;
    line-height: 2;
    right: 6px;
    top: 6px;
    font-size: 11px;
    color: #dc3545 !important;
    z-index: 1;
}

.likes-spinner {
    width: 20px;
    position: absolute;
    height: 20px;
    line-height: 2;
    right: 6px;
    top: 6px;
    font-size: 11px;
    z-index: 1;
}


/* 좋아요-마우스오버 높이 */
.card-preview-container:hover .likes-no-icon {
    height: 20px;
}

/* 좋아요-마우스오버 영역 */
.likes-no-icon {
    overflow: hidden;
    height: 0;
    transition: height 0.3s;
    width: 20px;
    position: absolute;
    line-height: 2;
    right: 6px;
    top: 6px;
    font-size: 11px;
    color: #6c757d !important;
    z-index: 1;
}

/*메인 스피너*/
.spin-container {
    width: 100%;
    text-align: center;
}

.neo {
    font-family: NeoDunggeunmoPro !important;
}

.neo-title {
    /*background: linear-gradient(transparent 50%, black 50%);*/
    display: inline;
    font-size: 64px;
    color: #ffffff;
    filter: drop-shadow(-2px 0 0 black) drop-shadow(2px 0 0 black) drop-shadow(0 -2px 0 black) drop-shadow(0 2px 0 black);
}

.neo-contents {
    display: inline;
    font-size: 20px;
    color: #ffffff;
    filter: drop-shadow(-2px 0 0 black) drop-shadow(2px 0 0 black) drop-shadow(0 -1px 0 black) drop-shadow(0 2px 0 black);
}

.neo-shadow {
    text-shadow: 5px 5px 5px #000000;
}

.neo-span {
    background: linear-gradient(90deg, var(--white) 0, var(--primary) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    box-decoration-break: slice;
    -webkit-box-decoration-break: slice;
}

.kakao_adfit_bottom_m {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0px;
    text-align: center;
    z-index: 99999;
    display: none;
    top: auto;
    bottom: 0px;
    overflow: hidden;
}

/* sns로그인시 header nick부분 길게나와서 */
@media (max-width: 904px) and (min-width: 768px) {
    .header-nick {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
    }
}

/* sm부터  */
@media (min-width: 576px) {
    .main-btn-left, .main-btn-right {
        line-height: 3.0;
        padding: 0px !important;
    }
    .main-logo-height{
        height: 77px;
    }
}

/* xs  */
@media (max-width: 575px) {
    .header-container {
        padding-top: 0px !important;
    }
    .main-logo-height{
        height: 50px;
    }
    .main-btn-right{
        margin-top: 3px;
    }
}

/* iOS에서 호버 동작 안하게 설정 호버 동작시 클릭을 2depth로 해야함 */
.is_apple .card-preview-container:hover .card-preview-actions {
    display: none;
}
.is_apple .card-preview-container:hover .likes-no-icon {
    display: none;
}