@charset 'utf-8';

.container { padding:0; }

#main-slide { position:relative; background-color:#5B009A; min-height:5.5rem; }
#main-slide .title { position:absolute; left:0; right:0; top:1.5rem; text-align:center; font-size:2.0rem; line-height:1.35; font-family:'LaundryGothic'; color:#fff; font-weight:700; color:#fff; z-index:101; }
#main-slide .swiper-slide { background-color:#5B009A; }
#main-slide .swiper-slide a { display:block; height:100%; }
#main-slide .inbox { position:relative; padding:5.0rem 1.0rem 1.8rem 1.0rem; box-sizing:border-box; /*height:100%;*/ }
#main-slide .inbox .info2 { position:absolute; right:1.5rem; top:2.3rem; }
#main-slide .inbox .info2 span { color:#fff; }
#main-slide .inbox .info2 span.like { background-image:url('../img/icons/ic_like_w.svg'); }
#main-slide .inbox .info2 span.like.on { background-image:url('../img/icons/ic_like_w_on.svg'); }
#main-slide .inbox .info2 span.comment { background-image:url('../img/icons/ic_comment_w.svg'); }

#main-slide .inbox .w-img { margin-top:1.25rem; aspect-ratio:2.0; overflow:hidden; }
#main-slide .inbox .w-img img { width:100%; height:100%; object-fit: cover; }

#main-slide .inbox .w-text { font-size:16px; line-height:1.35; text-align:center; color:#fff; margin-top:1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

#main-slide .contral-box { position:absolute; left:1.5rem; top:1.7rem; z-index:101; }
#main-slide .contral-box .swiper-pagination { position:static; }
#main-slide .swiper-pagination .swiper-pagination-bullet { width:0.5rem; height:0.5rem; background-color:#fff; opacity:1; }
#main-slide .swiper-pagination .swiper-pagination-bullet-active { width:3.5rem; background-color:#FFBD43; border-radius:0.5rem; }

.category-menu { padding:1.9rem 2.4rem; display:grid; grid-template-columns:repeat(5, 1fr); gap:1.0rem; }
.category-menu li { font-size:1.4rem; line-height:1.45; text-align:center; font-weight:700; }
.category-menu li a { position:relative; display:block; color:#5B009A; }
.category-menu li a:before { content:""; display:block; width:100%; aspect-ratio: 1 / 1; background-color:#FFBD43; background-repeat:no-repeat; background-position:center; border-radius:100%; margin-bottom:0.5rem; }

.category-menu li.dog a:before { background-image:url('../img/icons/ic_dog.svg'); background-size:58% auto; }
.category-menu li.cat a:before { background-image:url('../img/icons/ic_cat.svg'); background-size:50% auto; }
.category-menu li.bird a:before { background-image:url('../img/icons/ic_bird.svg'); background-size:67% auto; }
.category-menu li.fish a:before { background-image:url('../img/icons/ic_fish.svg'); background-size:60% auto; }
.category-menu li.etc a:before { background-image:url('../img/icons/ic_etc.svg'); background-size:45% auto; }

section.sec { background-color:#F1F1F1; padding:1.8rem 0.8rem; }
section.sec .sec-hd { position:relative; margin-bottom:0.5rem; }
section.sec .sec-hd h3 { font-size:20px; line-height:1.35; font-family:'LaundryGothic'; color:#000; font-weight:700; padding-left:1.0rem; }
section.sec .sec-hd .unit { position:absolute; right:1.0rem; bottom:0.5rem; display:flex; gap:1.5rem; }
section.sec .sec-hd .unit .btn { display:block; width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:100% auto; cursor:pointer; border:0; outline:none; }
section.sec .sec-hd .unit .btn.btn-search { background-image:url('../img/icons/ic_search.svg'); }
section.sec .sec-hd .unit .btn.btn-positioning { background-image:url('../img/icons/ic_positioning@2x.png'); width:17px; height:20px; }
section.sec .sec-hd .unit .btn.btn-refresh { background-image:url('../img/icons/ic_refresh.svg'); }

section.sec .sec-content { position:relative; }