/**********************************************************
 * 뷰포트 해상도와 관계없이 사용되는 코드
 * --------------------------------------------
 * main 영역에 있는 콘텐츠 대상
 */

/****************************************
 * 공지 팝업
 */
.main {
    position: relative;
}
.notice-popup {
    width: 400px;
    height: 300px;
    background: #FFF;
    box-shadow: 0 0 3px #999;
    border-radius: 10px;
    position: fixed;
    left: calc(50% - 200px);
    top: calc(50% - 150px);
    z-index: 100;
    opacity: 1;
    transition: opacity 0.3s;
}
.notice-popup > span {
    font-family: NanumSquareEB;
    font-size: 2.5rem;
    padding-left: calc(400px - 35px);
    cursor: pointer;
}
.notice-popup > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 35px;
    font-size: 1.5rem;
    line-height: 3rem;
    text-align: center;
}


/****************************************
 * 슬라이더
 */
.slider {
    width: 100%;
    height: auto;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.slider > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: calc(100% * 3);
    height: auto;
    position: absolute;
    left: 0;
    position: relative;
}
.slider > ul > li {
    flex-grow: 1;
    flex-basis: 100%;
}
.slider > ul > li > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.slider-navi {
    width: 20%;
    position: absolute;
    bottom: 5%;
    left: calc(50% - 10%);
    display: flex;
    gap: 7%;
    justify-content: center;
    align-items: center;
    font-family: NanumSquareB;
}
.slider-navi > span:nth-of-type(1),
.slider-navi > span:nth-of-type(5) {
    background: #000;
    color: #FFF;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}
.slider-navi > span:nth-of-type(2),
.slider-navi > span:nth-of-type(3),
.slider-navi > span:nth-of-type(4) {
    cursor: default;
}
.slider-navi > span:nth-of-type(2) {
    color: #7DB1FF;
}

/*****************************************
 * HOT ITEM
 */
.hot-item-title {
    text-align: center;
}
.hot-item-list {
    display: grid;
    grid: auto / 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    column-gap: 5%;
}
.item {
    display: grid;
    grid: "thumbnail"
            "item-info";
    margin-bottom: 20%;
}

/*--------------------------------------
 * 상품 이미지
 */
.item > div,
.hot1 > a > div {
    grid-area: thumbnail;
    position: relative;
}
.item > div {
    cursor: not-allowed;
}
.item > div > img,
.hot1 > a > div > img {
    width: 100%;
    height: 100%;
}
/* HOT 아이콘 */
.item > div::after,
.hot1 > a > div::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("http://nail.joo.popol.website/images/icon_hot.png");
    background-size: cover;
    animation: blink 0.7s infinite;
}
/* NEW 아이콘 */
.hot1 > a > div::after {
    background-image: url("http://nail.joo.popol.website/images/icon_new.png");
}

/*--------------------------------------
 * 상품 정보
 */
.item > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    grid-area: item-info;
    display: grid;
    grid: auto / auto;
    font-family: NanumSquareB;
    color: #999;
}
.item > ul > li:nth-of-type(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin-top: 20px;
}
.hot1 > ul > li:nth-of-type(1) {
    color: #000;
}
.item > ul > li:nth-of-type(2) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    color: #FFEE3B;
}
.item > ul > li:nth-of-type(3) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    text-align: right;
    font-family: NanumSquareR;
    color: #CCC;
    text-decoration: line-through #CCC solid;
}
.item > ul > li:nth-of-type(4) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    text-align: right;
}
.hot1 > ul > li:nth-of-type(4) {
    color: #000;
}