/*************************************************************
 * 헤더 & 메인 영역
 */

@media screen and (min-width: 801px) {
    .header {
        width: 100vw;
        height: 100px;
        background: #FFF;
        box-shadow: 2px 2px 2px #EAEAEA;
    }
    .main {
        margin-top: 100px;
    }
}
@media screen and (min-width: 1061px) {
    .header {
        width: 0;
        height: 0;
        background: none;
        box-shadow: none;
    }
    .main {
        margin-top: 30px;
    }
}


/*--------------------------------------------
 * 배너
 */
.nail-bn > ul {
    font-size: 2rem;
    line-height: 3.5rem;
}

/*--------------------------------------------
 * 상품 목록
 */
.item-title {
    margin: 100px 10% 0;
    font-family: NanumSquareEB;
    font-size: 2rem;
}
.item-list {
    margin: 7% 10%;
    grid: auto / 1fr 1fr 1fr 1fr;
}

/*--------------------------------------
 * hover시 이미지 변경
 */
.item > div:hover::before,
.nail1 > a > div:hover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
}
.nail1 > a > div:hover::before {
    background-image: url("http://nail.joo.popol.website/images/thumbnail-starmoon-h.jpg");
}
.nail2 > div:hover::before {
    background-image: url("http://nail.joo.popol.website/images/nail/thumbnail-neon-h.jpg");
}
.nail3 > div:hover::before {
    background-image: url("http://nail.joo.popol.website/images/nail/thumbnail-sunday-h.jpg");
}
.nail4 > div:hover::before {
    background-image: url("http://nail.joo.popol.website/images/nail/thumbnail-dazzling-h.jpg");
}
.nail5 > div:hover::before {
    background-image: url("http://nail.joo.popol.website/images/nail/thumbnail-line-h.jpg");
}
.nail6 > div:hover::before {
    background-image: url("http://nail.joo.popol.website/images/nail/thumbnail-heart-h.jpg");
}
.nail7 > div:hover::before {
    background-image: url("http://nail.joo.popol.website/images/nail/thumbnail-kitch-h.jpg");
}

/*--------------------------------------
 * 상품 정보
 */
.item > ul {
    font-size: 1.5rem;
}
.item > ul > li:nth-of-type(3) {
    font-size: 1rem;
}


/*************************************************************
 * sub detail 페이지 공통
 */

/*--------------------------------------
 * 상단
 */
.detail-top {
    margin: 0 17%;
    grid-template: "img name"
                    "img info"
                    "img quantity"
                    "img total"
                    "img button" / 50% 50%;
}
.detail-top > div:nth-of-type(1) {
    margin-right: 10%;
}

/* 상품 정보 */
.item-info > li:nth-of-type(odd) {
    padding-right: 60%;
}

/* 구매하기 팝업 */
.buy-popup {
    left: calc(50% + 130px - 150px);
    width: 300px;
}
@media screen and (max-width: 1060px) {
    .buy-popup {
        left: calc(50% - 150px);
    }
}

/* 장바구니 팝업 */
.cart-popup {
    left: calc(50% + 130px - 175px);
    width: 350px;
}
@media screen and (max-width: 1060px) {
    .cart-popup {
        left: calc(50% - 175px);
    }
}

/*--------------------------------------
 * 콘텐츠
 */
.detail-content {
    margin: 17%;
}
.detail-content ul {
    font-size: 2rem;
    line-height: 3rem;
}

/* 청하가 선택한 */
.detail-content > ul:nth-of-type(1) {
    font-size: 2.3rem;
    line-height: 3.3rem;
}
/* 별이랑달이랑 */
.detail-content > ul:nth-of-type(2) > li:nth-of-type(1) {
    font-size: 2.5rem;
}
.detail-content > ul:nth-of-type(2) > li:nth-of-type(1) > span {
    font-size: 1.5rem;
}
/* Real Review, 별하랑 청하랑 */
.detail-content > ul:nth-of-type(4) > li:nth-of-type(1),
.detail-content > ul:nth-of-type(5) > li:nth-of-type(1) {
    font-size: 2.5rem;
    line-height: 3.5rem;
}
/* special point */
.special-point > li:nth-of-type(1) {
    padding: 5% 0;
}
.special-point > li:nth-of-type(2) {
    font-size: 2.5rem;
    padding-bottom: 3%;
}
/* made point */
.made-point > li:nth-of-type(1) {
    padding: 5% 0;
}
.made-point > li:nth-of-type(2),
.made-point > li:nth-of-type(3) {
    font-size: 2.5rem;
    padding-bottom: 1%;
}
.made-point:last-of-type > li:nth-of-type(3) {
    padding-bottom: 3%;
}
.made-point:last-of-type > li:nth-of-type(5) {
    padding-bottom: 5%;
}

/*--------------------------------------
 * 하단
 */
.detail-bottom {
    margin: 0 17%;
}
/* 주의사항 */
.detail-bottom > h1 {
    font-size: 2.5rem;
}
.detail-bottom > ul {
    font-size: 1.6rem;
    line-height: 3rem;
    padding-left: 30px;
}

/* 제품 상세 정보 */
.information {
    margin: 15% 0;
}
.information th {
    padding: 2% 0;
}
.information tr:nth-of-type(1) > th {
    font-size: 1.5rem;
}
.information tr:nth-of-type(2) > th {
    font-size: 1.3rem;
}
.information td {
    padding: 1% 5%;
    font-size: 1.2rem;
}
.information > caption {
    margin: 2% 0;
}

/*--------------------------------------
 * fixed 구매하기, 장바구니 버튼
 */
.fixed-btn {
    left: 260px;
}

@media screen and (max-width: 1060px) {
    .fixed-btn {
        left: 0;
    }
}