﻿/* 스켈레톤 */
:root {--skeleton_bgColor: #F6F6F6; --skeleton_txtColor: #EFEFEF;}
.skeleton_bgColor {
    position: relative;
    overflow: hidden;
    border-radius: 14px; 
    background-color: var(--skeleton_bgColor) !important;
}
.skeleton_txtColor {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 4px; 
    background-color: var(--skeleton_txtColor) !important;
}
.skeleton_txtColorAll {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 4px; 
}
.skeleton_bgColor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 46%, rgba(255,255,255,0) 100%);
    animation: 1s linear infinite skeleton-animation;
}
.skeleton_txtColor, .skeleton_txtColorAll > * {overflow: hidden; position: relative; border-radius: 4px;  background-color: var(--skeleton_txtColor);}
.skeleton_txtColor::after, .skeleton_txtColorAll > *::after {
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 130%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 46%, rgba(255,255,255,0) 100%);
    animation: 1s linear infinite skeleton-animation;
}
@keyframes skeleton-animation {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}
.check_btns a strong.skeleton_txtColor {display: block; height: 23px;}
h2.skeleton_txtColor, h2.skeleton_bgColor {width: 145px;height: 32px; border-radius: 4px;}
.consulting h2.skeleton_txtColor {height: 26px;}
.skeleton_wrapper .slick-slide {display: block;}
.skeleton_txtColorAll > * {display: block; height: 20px;}
.skeleton_txtColorAll .num {width: 20px;}
.skeleton_txtColorAll strong {width: 240px;}
.skeleton_txtColorAll .sub {width: 208px;}
.skeleton_txtColorAll .like {width: 88px;}
#container .landing_more.skeleton_txtColor {width: 80px; height: 32px; background-image: none;}
.skeleton_bgColor::before  {display: none !important;}
.landing_channel ul li .skeleton_bgColor div > * {width: 90px; height: 20px !important;}
.landing_review ul li .skeleton_txtColor {height: 26px;}
.landing_written span.skeleton_txtColor {width: 208px;height: 20px;}
.landing_written strong.skeleton_txtColor {height: 20px;}
.banner_bottom .inner.skeleton_bgColor, .banner_bottom .inner.skeleton_bgColor + .skeleton_bgColor {background-image: none;}
.channel-cointainer h2.skeleton_txtColor, .channel-cointainer h2 span.skeleton_txtColor {display: inline-block; width: 145px; height: 32px;}
.channel-cointainer h2 button.skeleton_txtColor {width: 80px; height: 32px; border: 0; background-image: none;}
.topic_slick .text.skeleton_txtColorAll strong {width: 152px;}
.skeleton_txtColor.subscribing, .skeleton_txtColor.subscribe {height: 34px; border: 0; background-image: none;}
.exposure_tag > ul li a .skeleton_txtColor {height: 20px;}
.exposure_tag > ul li a span.skeleton_txtColor {width: 88px;}
.exposure_tag > ul li a div.skeleton_txtColor, .exposure_tag > ul li a p.skeleton_txtColor {width: 424px;}
.exposure_tag .skeleton_txtColorAll > .date {width: 120px; margin-right: 8px;}
.exposure_tag > ul li a > .img {position: absolute; right: 0; top: 30px; width: 89px; height: 89px; border-radius: 8px;}
.channel-cointainer .exposure_tag > ul li a > .img {width: 81px; height: 81px;}
.topic_detail .img.skeleton_bgColor {border-radius: 0;}
.detail_parts .icon.skeleton_txtColor {border: 0;}
.detail_parts .skeleton_txtColor:not(.icon) {height: 16px;}
.detail_parts > span.skeleton_txtColor {width: 56px;}
.detail_parts > strong.skeleton_txtColor {width: 140px;}
.detail_parts .skeleton_txtColorAll.number span {display: inline-block; width: 60px;}
.topic_detail .share.skeleton_txtColor {background-image: none;}
.exposure_tag .sort.skeleton_txtColor {float:right; width: 70px; height: 24px;}
.exposure_tag .sort.skeleton_txtColor + ul {clear: both;}
.consult__wrapper .skeleton_txtColorAll.consult__tool > * {width: 82px; height: 40px; border: 0; background-image: none;} 
.community-container .skeleton_txtColorAll.inner {position: static;}
.community-container .skeleton_txtColorAll.inner span {width: 84px; height: 16px;}
.community-container .skeleton_txtColorAll.inner .tit {width: 655px; height: 24px;}
.community-container .skeleton_txtColorAll.inner p {width: 396px; height: 20px;}
.community-container .skeleton_txtColorAll.inner::before {content:''; display: block; position: absolute; top: 33px; right: 0; width: 89px; height: 89px; border-radius: 8px; background-color: #F6F6F6;}
.community_wrap .rig h3.skeleton_txtColor {width: 68px; height: 24px; }
.community_wrap .rig ol li a.skeleton_txtColorAll p {width: 185px;}
.community_wrap .rig ol li a.skeleton_txtColorAll span:last-child {width: 29px; height: 20px; background-image: none;}
.subpage_tab.skeleton_bgColor {border-bottom-color: #F6F6F6; background-color: transparent !important;}
.subpage_tab.skeleton_bgColor::after {display: none;}
.subpage_tab .skeleton_bgColor { margin-left: 12px; margin-bottom: 17px; border-radius: 4px;}
.subpage_tab .skeleton_bgColor a {display: inline-block; width: 60px; height: 21px; padding: 0; }
.subpage_tab .skeleton_bgColor.active a::after {display:  none;} 
.board_list li a .skeleton_txtColor {height: 20px;}
.board_list li a .tit.skeleton_txtColor {width: 208px;}
.board_list li a span.skeleton_txtColor {width: 96px;}
.community_detail .board_view .subject .tag.skeleton_txtColor {display: inline-block; width: 84px; height: 16px;}
.community_detail .board_view .subject p.skeleton_txtColor {width: 360px; height: 24px;}
.community_detail .subject .profile__wrap .name__.skeleton_txtColor {width: 77px; height: 16px;}
.community_detail .subject .profile__wrap .date.skeleton_txtColor {width: 104px; height: 16px;}
.board_view .subject .share .tool__share.skeleton_txtColor, .board_view .subject .share .tool__police.skeleton_txtColor {background: none;}
.board_content .profile__wrap.skeleton_bgColor {width: 200px; height: 83px; border-radius: 8px; border: 0;}
.community_detail .ai_summation.skeleton_bgColor {height: 87px;}
.community_detail .board_edit.skeleton_txtColorAll p {margin-bottom: 6px;}
.community_detail .board_content .tag span.skeleton_txtColor {display: inline-block; width: 50px; height: 30px;}
.community_detail .board_content .like_bookmark button.skeleton_txtColor {display: inline-block; width: 43px; height: 24px; margin-right: 20px; background: none;}
.community_detail .comment_tit.skeleton_txtColor {width: 56px; height: 29px;}
.fact_check.skeleton_txtColor {position: absolute; right: 0;width: 84px; height: 24px;}
.popular_slick a .num.skeleton_txtColor {display: inline-block; width: 20px; height: 20px;}
.popular_slick .inner.skeleton_txtColorAll {margin-left: 4px;}
.popular_slick .inner.skeleton_txtColorAll strong {display: inline-block; width: 240px; height: 20px;}

.popular_consult .skeleton_txtColorAll .swiper-slide {height: 158px; border: 0;}
.consult__main .guide__ .btn_ span.skeleton_txtColor {width: 65px; height: 65px; border-radius: 50%; margin-right: 14px;}
.consult__main .guide__ .btn_ .skeleton_txtColorAll strong {width: 110px; height: 24px;}
.consult__main .guide__ .btn_ .skeleton_txtColorAll p {width: 256px; height: 24px;}
.consult__main .guide__ .btn_ button.skeleton_txtColor {position: absolute; right: 0; width: 36px; height: 36px;}
.consult__list li > a .part_top.skeleton_txtColorAll span {width: 54px; height: 24px; vertical-align: top;}
.consult__list li > a .part_top.skeleton_txtColorAll span + span {background-color: #F3F3F3;}
.consult__list .detail__ .subject.skeleton_txtColor {width: 195px; height: 24px; margin: 8px 0;}
.consult__list .detail__ .desc.skeleton_txtColor {width: 100%; height: 20px;}
.consult__list .detail__ .view__.skeleton_txtColorAll span {display: inline-block; width: 45px; height: 16px; margin-right: 4px;}
.counsel_tag.skeleton_bgColor {height: 300px;}
.mypage_top .use__.skeleton_txtColor, .mypage_cont .rig h2.border.skeleton_txtColor {border: 0}
.mypage_top .use__.skeleton_txtColor > * {display: none;}
.mypage_top_r.skeleton_txtColor {margin-left: 200px; margin-top: -48px; border-radius: 15px;}
.mypage_top_r.skeleton_txtColor .name span.skeleton_txtColor:after {display: none;}
.mypage_banner.skeleton_txtColor {width: 970px; height: 47px; margin-left: 0; border-radius: 10px;}
.mypage_cont .left ul li.skeleton_txtColorAll span {width: 90px}
.mypage_cont .left ul li.skeleton_txtColorAll a {width: 80px}
.new_pet.skeleton_txtColor {width: 75px; height: 24px;;}
.new_pet.skeleton_txtColor::before {display: none;}
.animal_list > div:last-child .profile_add.skeleton_txtColor, .animal_list .box.skeleton_txtColor {background: none; box-shadow: none;}
.wish_area .btn_more.skeleton_txtColor {position: absolute; width: 70px; height: 24px; background: none;}
.skeleton_txtColorAll.pro_name .rate {background: none;}
.pro_name.skeleton_txtColorAll > span:first-child {width: 100px;}
.pro_name.skeleton_txtColorAll .discount ~ span {width: 61px;}
.animal_list.skeleton_txtColor {display: flex; background: none !important;}
.popular_consult .swiper-slide.skeleton_bgColor {height: 158px; border: 0;}

@media (max-width: 767px) {
    .skeleton_wrapper.slick-initialized .slick-slide {display: block;}
    #container .landing_more.skeleton_txtColor {display: none;}
    .skeleton_bgColor.landing_slick {height: 100px;}
    .check_btns a strong.skeleton_txtColor {height: 15px;}
    .landing_new h2.skeleton_txtColor, h2.skeleton_txtColor {height: 24px;}
    .skeleton_txtColorAll > * {height: 18px;}
    .landing_review .product_list li .img.skeleton_bgColor {width: 140px !important; height: 140px !important;}
    .exposure_tag > ul li a div.skeleton_txtColor, .exposure_tag > ul li a p.skeleton_txtColor, .community-container .skeleton_txtColorAll.inner p {width: 220px !important;}
    .exposure_tag > ul li a .skeleton_txtColor {height: 16px;}
    .exposure_tag > ul li a > .img {top: 9px; width: 63px !important; height: 63px !important;}
    .skeleton_txtColorAll .like {width: 60px;}
    .landing_channel.topic ul li .skeleton_bgColor div > * {width: 60px; height: 17px;}
    .landing_channel.topic ul li .skeleton_bgColor span:first-child {margin-bottom: 4px;}
    .landing_popular h2.skeleton_txtColor {height: 24px; margin-bottom: -4px;}
    .consult__wrapper .skeleton_txtColorAll.consult__tool > * {width: 66px; height: 36px;}
    .community_wrap.skeleton {margin-right: -20px;}
    .community_wrap.skeleton .left.consult__wrapper {overflow: hidden;}
    .skeleton_txtColorAll.consult__tool {width: 570px;}
    .community-container .skeleton_txtColorAll.inner .tit {width: 220px; height: 16px; margin-top: 8px;}
    .community-container .skeleton_txtColorAll.inner::before {top: 20px; width: 63px; height: 63px;}
    .board_list li a .skeleton_txtColor {height: 16px;}
    .board_list li a .skeleton_txtColor.tag {width: 50px;}
    .board_list li a .tit.skeleton_txtColor {width: 52vw;}
    .board_list li a span.skeleton_txtColor {width: 140px;}
    .community_detail .tag.skeleton_txtColor { margin-top: 48px;}
    .community_detail .board_view .subject p.skeleton_txtColor  {width: 100%;}
    .community_detail .ai_summation.skeleton_bgColor {height: 84px;}
    .community_detail .share.skeleton {position: fixed !important; right: 0; top: 12px; height: auto;}
    .community_detail .comment_tit.skeleton_txtColor {width: 88px; height: 24px;}
    .topic_slick .slick-slide.skeleton { padding-top: 20px; padding-bottom: 20px;  border-top: 1px solid #E9E9E9;}
    .topic_slick .slick-slide.skeleton:first-child {padding-top: 0; border-top: 0;}

    .consult__wrapper.skeleton_hidden {overflow: hidden;}
    .popular_consult .skeleton_txtColorAll .swiper-slide {height: 127px; background-color: #F3F3F3;}
    .consult__main .guide__ .btn_ span.skeleton_txtColor {width: 36px; height: 36px;}
    .consult__main .guide__ .btn_ button.skeleton_txtColor {display: none;}

    .mypage_top .use__.skeleton_txtColor > * {display: inline-block;}
    .mypage_banner.skeleton_txtColor {display: none;}
    .mypage_top .use__.skeleton_txtColor, .animal_list.skeleton_txtColor {background: none !important;}
    .mypage_top .use__.skeleton_txtColor::after {display: none;}
    .mypage_top_r .inner_wrap .profile .name .temperature.skeleton_txtColor {width: 48px; margin-left: 0; border-radius: 30px;}
    .mypage_top .name strong.skeleton_txtColor {display: block; width: 76px; height: 26px;}
    .mypage_top .name button.skeleton_txtColor {position: absolute; top: 12px; right: 0; width: 26px; height: 26px; background-image: none; transform: rotate(0deg);}
    .animal_list.skeleton_txtColor {display: flex; margin-top: 11px;}
    .animal_list.skeleton_txtColor > .box {width: 75.5vw; height: 102px; margin-bottom: 0;}
    .animal_list.skeleton_txtColor div a.skeleton_txtColor {width: 24.5vw; padding-left: 24.5vw; border-radius: 10px 0 0 10px;}
    .invite_slick.skeleton_txtColor {height: 62px;}
    .my_shopping a.skeleton_txtColorAll span {width: 42px;}
    .my_shopping a.skeleton_txtColorAll strong {width: 77px;}
    .my_shopping .bottom a.skeleton_txtColorAll span {width: 56px; height: 21px;}
    .my_shopping .bottom a.skeleton_txtColorAll strong {width: 21px; height: 21px;}
    .my_shopping.skeleton_bg .top, .my_shopping.skeleton_bg .bottom {border: 0; background-color: #F6F6F6;;}
    #myPageMenu .skeleton_txtColorAll {display: block;}
    .mypage_cont .left ul li.skeleton_txtColorAll span {width: 80px;}
    .mypage_cont .left ul li.skeleton_txtColorAll a {position: static; width: 96px; height: 24px;}
    .mypage_cont .left ul li.skeleton_txtColorAll a::after {top: 27px; background-image: none;}
    .mypage_cont .left ul li.skeleton_txtColorAll a::before {content: ''; display: inline-block; position: absolute; right: 0; width: 24px; height: 24px; border-radius: 4px; background-color: #F3F3F3;} 
    .popular_consult .swiper-slide.skeleton_bgColor {height: 127px;}
    .mypage_top_r.skeleton_txtColor {height: auto; margin-left: 0; margin-top: 0; padding: 0; border-radius: 0; background-color: transparent !important;}
    .mypage_top_r.skeleton_txtColor::after, .mypage_top_r.skeleton_txtColor .inner_wrap .profile .name strong::after {display: none;}
    .mypage_top_r.skeleton_txtColor .inner_wrap {width: auto; padding: 0;}
    .mypage_top_r.skeleton_txtColor .img.skeleton_txtColor {width: 50px; height: 50px; margin-right: 16px; border-radius: 50%;}
    .mypage_top_r.skeleton_txtColor .name span.skeleton_txtColor:after {display: block;}
    .mypage_top_r.skeleton_txtColor .profile {align-items: flex-start;}
    .mypage_top_r.skeleton_txtColor .name {flex: 1;}
}