@charset "utf-8";

/*브랜드 상단이미지*/
/*브랜드 컬러 노랑 #fdc30f  남색 #214084*/

#p_img {
    max-width: 100%;
    height: 30vh;
    margin: 0 auto;
    padding: 0;
    clear: both;
    transform: translateY(-5px);
    background-color: #000;
    position: relative;
   
}

.top_img {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: url(../img/top_banner2.jpg) center no-repeat;

    background-size: cover;
    opacity: 0.4;
}

#p_img h3 {
    position: absolute;
    color: #fff;
    font:bold 2em/1.2 'Noto Sans KR', sans-serif;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/********************선택***********************/
#tabtn {
    width: 60%;
    height: 50px;
    margin: 0 auto;

}

#tabtn li {
    float: left;
    width: 50%;
    border: 1px solid #fff;
    box-sizing: border-box;
    background-color: #214084;
    font:bold 1em/3 'Noto Sans KR', sans-serif;

}

#tabtn li a {
    display: block;
    color: #fff;
}

#tabtn > li:nth-child(2) {
    background-color: #fdc30f;
}

/***********************************************************************************강아지탭*********/

#dog > h3 {
    font: bold 1.6em/1.2 'Noto Sans KR', sans-serif;
    margin-bottom: 70px;
 
}
#dog > h3 > img {
 transform: translate(0px, 30px);
    margin-left: 10px;
}
#dog_p {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 15px;


}

#dog_p > li {
    height: 100%;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 25px;
    box-sizing: border-box;
    overflow: hidden;


}

#dog_p > li > a {
    display: block;
    background-color: #d8e0ff;


}

#dog_p > li:nth-child(1) a {
    background: url(../img/best_product2.png) center no-repeat;
    background-size: cover;
  
}

#dog_p > li:nth-child(2) a {
        background: url(../img/dog1.png) center;
    background-size: cover;
  
}

#dog_p > li:nth-child(3) a {
        background: url(../img/dog2.png) center;
    background-size: cover;
   
}
#dog_p > li:nth-child(4) a {
        background: url(../img/dog3.png) center;
    background-size: cover;
   
}
#dog_p > li:nth-child(5) a {
        background: url(../img/dog4.png) center;
    background-size: cover;
   
}
#dog_p > li:nth-child(6) a {
        background: url(../img/dog5.png) center;
    background-size: cover;
   
}
#dog_p > li:nth-child(7) a {
        background: url(../img/dog6.png) center;
    background-size: cover;
   
}
#dog_p > li:nth-child(8) a {
        background: url(../img/dog7.png) center;
    background-size: cover;
   
}

#dog_p > li:nth-child(9) a {
        background: url(../img/dog8.png) center;
    background-size: cover;
   
}

#dog_p > li:nth-child(10) a {
        background: url(../img/dog9.png) center;
    background-size: cover;
   
}


#dog_p > li:nth-child(11) a {
        background: url(../img/dog10.png) center;
    background-size: cover;
   
}

#dog_p > li:nth-child(12) a {
        background: url(../img/dog11.png) center;
    background-size: cover;
   
}


/*****가리기*******/
#dog_p > li:nth-child(11),#dog_p > li:nth-child(12) {
      display: none;

}



#dog_p > li > a::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

 .best_text {
        width: 225px;
        margin: 0 auto;
   

    }


/***********************************************************************************고양이탭*********/
#cat > h3 {
    font: bold 1.6em/1.2 'Noto Sans KR', sans-serif;
    margin-bottom: 70px;
  

}
#cat > h3 > img {
 transform: translate(0px, 30px);
    margin-left: 10px;
}
#cat_p {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 15px;


}

#cat_p > li {
    height: 100%;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 25px;
    box-sizing: border-box;
    overflow: hidden;


}

#cat_p > li > a {
    display: block;
    background-color: #ffe7c6;


}

#cat_p > li:nth-child(1) a {
    background: url(../img/cat1.png) center no-repeat;
    background-size: cover;
 
}

#cat_p > li:nth-child(2) a {
        background: url(../img/cat2.png) center;
    background-size: cover;
  
}

#cat_p > li:nth-child(3) a {
        background: url(../img/cat3.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(4) a {
        background: url(../img/cat4.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(5) a {
        background: url(../img/cat5.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(6) a {
        background: url(../img/cat6.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(7) a {
        background: url(../img/cat7.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(8) a {
        background: url(../img/cat8.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(9) a {
        background: url(../img/cat9.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(10) a {
        background: url(../img/best_product1.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(11) a {
        background: url(../img/cat10.png) center;
    background-size: cover;
   
}
#cat_p > li:nth-child(12) a {
        background: url(../img/cat11.png) center;
    background-size: cover;
   
}

/**가리기**/

#cat_p > li:nth-child(11),#dog_p > li:nth-child(12) {
      display: none;

}



#cat_p > li > a::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}















/******************************************/
@media all and (min-width:768px) {
    /******강아지********/
    #dog_p {
        grid-template-columns: auto auto auto;

    }


    #dog_p > li:nth-child(10) {
        display: none;
        /*태블릿에서는 10~11 (11~12는 모바일none;) 안보이게*/
    }
    /*******고양이******/
    #cat_p {
        grid-template-columns: auto auto auto;

    }


    #cat_p > li:nth-child(10) {
        display: none;
        /*태블릿에서는 10~11 (11~12는 모바일none;) 안보이게*/
    }
    
}

/******************************************/
@media all and (min-width:1200px) {
   /******강아지********/
    
    #dog_p {
        grid-template-columns: auto auto auto auto;

    }
    
    #dog_p > li:nth-child(10),
    #dog_p > li:nth-child(11),
    #dog_p > li:nth-child(12) {
        display: block;
        /*피씨에서는 숨긴 10-12번 다 보이기*/
    }
    
    
     /*******고양이******/
     #cat_p {
        grid-template-columns: auto auto auto auto;

    }
    
    #cat_p > li:nth-child(10),
    #cat_p > li:nth-child(11),
    #cat_p > li:nth-child(12) {
        display: block;
        /*피씨에서는 숨긴 10-12번 다 보이기*/
    }
    
}