@charset "utf-8";

/*브라우저 초기화*/
* {
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: #000;
    letter-spacing: -0.5px;
}

.hidden {
    visibility: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

li {
    list-style: none;
}

button {
    cursor: pointer;
}

/*
까사미아 브랜드 컬러
옐로우
background-color: #f7d200;
그레이
background-color: #544f47;
*/

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#wrap {
    width: 100%;
}

#header {
    display: none;
}

#pclnb {
    display: none;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*네비게이션<nav>*/
#lnb {
    width: 100%;
    height: 60px;
    z-index: 5;
    position: relative;
    box-shadow: 0 5px 6px rgba(64, 64, 64, 0.1);
    background-color: #f7d200;
    position: sticky;
    top: 0px;
}

#lnb > div {
    max-width: 1200px;
    height: 60px;
    margin: 0 auto;
}

/*까사미아 로고*/
#logo {}

#logo a {
    float: left;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    top: calc(50% + 4px);
    padding: 10px;
}

#logo img {
    width: 150px;
}


/*메뉴버튼 영역*/
.menu_button {
    width: 40px;
    height: 40px;
    overflow: hidden;
    float: left;
    position: relative;
    top: 14px;
    position: relative;
    cursor: pointer;
    /*    transform: scale(0.8);*/
    z-index: 6;
}

.menu_button > span {
    width: 24px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 8px;
}

.line1 {
    transform: translate(0, 12px);
}

.deg45 {
    transform: translate(0px, 20px) rotate(45deg) scale(1.2, 1)
}

.line2 {
    transform: translate(0, 20px);
}

.line3 {
    transform: translate(0, 28px);
}

.deg-45 {
    transform: translate(0px, 20px) rotate(-45deg) scale(1.2, 1)
}


/*메뉴*/
.menu {
    width: 100%;
    max-width: 400px;
    position: absolute;
    top: 60px;
    z-index: 6;
    display: none;
}

.menu > li {}

.menu > li > a {
    display: block;
    height: 50px;
    background-color: #535353;
    text-align: left;
    color: #fff;
    font: 400 14px/50px 'Noto Sans KR';
    padding-left: 20px;
    position: relative;
}

/*섭메뉴_화살표 버튼*/
.btn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 15px;
    right: 20px;
    transition: all 0.2s ease-in-out;
}

.btn1 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 15px;
    right: 20px;
    transform: rotate(-90deg);
}

.rotate {
    transform: rotate(180deg);
}

/*섭메뉴*/
.submenu {
    background-color: #eee;
}

.submenu:nth-child(4) {
    display: inherit;
}

.submenu:nth-child(4) li {}

.submenu > li {
    width: 190px;
    height: 40px;
    text-align: left;
    color: #000;
    padding-left: 20px;
    font: 300 13px/40px 'Noto Sans KR';
    cursor: pointer;
}

/*제품 전체보기 텍스트*/
.submenu > li:nth-child(1) {
    font: 400 14px/40px 'Noto Sans KR';
}

.submenu > li:hover {
    text-decoration: underline;
}

/*메뉴 하단 : 아이콘 gnb*/
.lnb_gnb {
    background-color: #eee;
}

.lnb_gnb > ul {
    padding: 15px 20px 15px 20px;
    display: flex;
    justify-content: space-between;
    font: 400 12px/1.5 'Noto Sans KR';
}

.lnb_gnb > ul > li {
    float: left;
    cursor: pointer;
}

.lnb_gnb span {
    display: block;
    width: 50px;
    height: 50px;
    opacity: 0.7;
}

.lnb_gnb1 span {
    background: url(../img/lnb_icon_1.png)center no-repeat;
    background-size: cover;
}

.lnb_gnb2 span {
    background: url(../img/lnb_icon_3.png)center no-repeat;
    background-size: cover;
}

.lnb_gnb3 span {
    background: url(../img/lnb_icon_4.png)center no-repeat;
    background-size: cover;
}

.lnb_gnb4 span {
    background: url(../img/location_black.png)center no-repeat;
    background-size: cover;
}

.lnb_gnb5 span {
    background: url(../img/lnb_icon_5.png)center no-repeat;
    background-size: cover;
}


.lnb_rightwrap {
    float: right;
    width: 75px;
    height: 40px;
    position: relative;
    top: 15px;
}

.lnb_right {}

.lnb_right > li {
    float: left;
    width: 35px;
    height: 40px;
    display: block;
    cursor: pointer;
    background-size: 85%;
}

/*검색 아이콘*/
.search {
    background: url(../img/lnb_search.png) center no-repeat;
}

/*장바구니 아이콘*/
.shoppingbag {
    background: url(../img/lnb_shoppingbag.png) center no-repeat;
}

/*검색 팝업창*/
.popup {
    cursor: default;
    display: none;
}

.popup > span {
    display: block;
    width: 400px;
    height: 40px;
    background-color: #f7d200;
    position: relative;
    left: -400px;
    top: 1px;
}

.search_pop {
    height: 30px;
    float: right;
    text-align: left;
    padding-left: 10px;
    outline: none;
    border: 2px solid #e29400;
    border-radius: 99px;
    position: relative;
    top: -41px;
    left: -80px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(170, 170, 170, 0.3);
}


.view {
    display: block;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/


/*메뉴클릭 시 배경 어둡게*/
.bgclick {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: fixed;
    top: 0px;
    background-color: rgba(92, 92, 92, 0.5);
    display: none;
}

.show {
    display: block;
}






































































/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*콘텐츠 영역*/
#contentwrap {
    width: 100%;
    height: 100%;
}

#intro {
    width: 100%;
    overflow: hidden;
}

/*메인배너 슬라이드 영역*/
#main_banner {
    width: 100%;

    margin: 0 auto;
}

#main_banner > div {
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

#main_slide {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

#slide {
    width: 300%;
    position: relative;
    left: 0;
}

#slide > li {
    width: 33.333%;
    float: left;
    overflow: hidden;
    position: relative;
    background-color: aliceblue;
    cursor: pointer;
}

#slide > li > a {
    display: block;
    width: 1920px;
    /*    height: 400px;*/
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#slide > li > a > img {
    height: 400px;
}

/***********
min-width 설정 안됨 해결법
이미지를 <img>로 사용해서 a태그의 값을 지정해 줘야 함. 
display:block; 이미지의 width, height; 중앙정렬
상위 li태그에 overflow:hidden;
***********/



/*메인배너 텍스트*/
.slide_text {
    text-align: left;
    position: relative;
    top: -230px;
    max-width: 1200px;
    margin: 0 auto;
}

.slide_text > h4 {
    letter-spacing: 0.2px;
    text-align: left;
    margin-left: 60px;
}

#slide_text1 > h4 {
    font: 700 45px/0.9 'Playfair Display';
}

#slide_text2 > h4 {
    font: normal 45px/0.9 'Lobster';
    color: #fff;
}

#slide_text2 > p {
    color: #fff;
}

#slide_text3 {
    position: relative;
    top: -262px;
}

#slide_text3 > h4 {
    font: 600 40px/0.9 'Work Sans';
    color: #f7d200;
}

#slide_text3 > p {
    color: #fff;
}

.slide_text > p {
    font: 400 12px/1.5 'Noto Sans KR';
    text-align: left;
    margin: 40px auto 20px 60px;
}




/*메인배너 화살표 버튼*/
#main_banner > div {
    position: relative;
}

#main_banner > div > span {
    display: block;
    width: 20px;
    height: 35px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: scale(0.5) translateY(-50%);

}

/*메인배너 이전버튼*/
.prev {
    left: 1%;
}

.prev > img {
    transform: rotate(180deg);
}

/*메인배너 다음버튼*/
.next {
    right: 1%;
}






/*공통설정 영역*/
.article {
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.article_h3 {
    font: 200 25px/1.1 'Work Sans';
    letter-spacing: 0px;
    margin: 40px 0 10px 0;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#best > li > a,
#event,
#new > li,
#style > li,
.article > ul > li > a {
    border-radius: 20px;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*상품 텍스트 정보*/
.p_text {
    float: left;
    text-align: left;
    width: 100%;
    overflow: hidden;
    margin: 10px 0 20px 0;
    position: relative;
}

.p_text > li {
    text-align: left;
}

/*상품 상품명*/
.p_text > li:nth-child(1) {
    font: 400 13px/1.5 'Noto Sans KR';
}

/*상품 정상가*/
.p_text > li:nth-child(2) {
    font: 400 12px/2 'Rubik';
    letter-spacing: 0.x;
    text-decoration: line-through;
    color: #aaa;
    margin-top: 6px;
}

/*상품 판매가*/
.p_text > li:nth-child(3) {
    float: left;
    font: 400 16px/1 'Rubik';
    letter-spacing: -0.5px;
}

/*상품 할인률*/
.p_text > li:nth-child(4) {
    float: right;
    font: 500 16px/1 'Rubik';
    color: darkorange;
}

.hide {
    color: rgba(255, 255, 255, 0);
    opacity: 0;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*상품 상세페이지 텍스트 정보*/
.pd_text {
    float: left;
    text-align: left;
    width: 100%;
    overflow: hidden;
    margin: 10px 0 20px 0;
}

.pd_text > li {
    text-align: left;
}

/*상품 상품명*/
.pd_text > li:nth-child(1) {
    font: 400 13px/1.5 'Noto Sans KR';
}

/*상품 정상가*/
.pd_text > li:nth-child(2) {
    font: 400 12px/2 'Rubik';
    letter-spacing: 0.x;
    text-decoration: line-through;
    color: #aaa;
    margin-top: 6px;
}

/*상품 판매가*/
.pd_text > li:nth-child(3) {
    float: left;
    font: 400 16px/1 'Rubik';
    letter-spacing: -0.5px;
}

/*상품 할인률*/
.pd_text > li:nth-child(4) {
    float: right;
    font: 500 16px/1 'Rubik';
    color: darkorange;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/











/*베스트상품*/
#bestproduct {}

#best {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-gap: 15px;
    /*그리드 사이의 간격*/
    grid-template-columns: auto auto;
    /*col설정 row자동*/
}

#best > li {}

#best > li > a {
    display: block;
    width: 100%;
}

#best > li:nth-child(1) a {
    background: url(../img/00_best_1.jpg) center;
    background-size: cover;
}

#best > li:nth-child(2) a {
    background: url(../img/00_best_2.jpg) center;
    background-size: cover;
}

#best > li:nth-child(3) a {
    background: url(../img/00_best_3.jpg) center;
    background-size: cover;
}

#best > li:nth-child(4) a {
    background: url(../img/00_best_4.jpg) center;
    background-size: cover;
}

#best > li:nth-child(5) a {
    background: url(../img/00_best_5.jpg) center;
    background-size: cover;
}


#best > li > a:hover {
    opacity: 0.8;
}

/*반응형 정사각형으로 만들기*/
#best > li > a {
    position: relative;
}

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


/*PC웹 베스트상품 6개*/
#best > li:nth-child(5) {
    display: none;
}








/*이벤트 배너*/
#eventbanner {}

#event {
    width: 100%;
    height: 250px;
    background: url(../img/00_event_banner.jpg)center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    cursor: pointer;
}

/*이벤트 배너 텍스트*/
#event_text {
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

#event_text1 {
    font: 400 14px/1 'Noto Sans KR';
    letter-spacing: 3px;
    color: #000;
}

#event_text2 {
    font: 400 80px/1 'Work Sans';
    letter-spacing: 0px;
    margin: 10px 0 2px 0;
    color: #000;
}

#event_text3 {
    font: 300 23px/1 'Work Sans';
    letter-spacing: 3px;
    color: #000;
}



/*신상품*/
#newproduct {}

#new {
    display: grid;
    grid-gap: 15px;
    /*그리드 사이의 간격*/
    grid-template-columns: auto auto;
    /*col설정 row자동*/
}

#new > li {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#new > li a {
    display: block;
    width: 100%;
}

#new > li:nth-child(1) {
    grid-column: 1 / span 2;
    background: url(../img/00_new_1.jpg)center no-repeat;
    background-size: cover;
}

#new > li:nth-child(2) {
    background: url(../img/00_new_2.jpg)center no-repeat;
    background-size: cover;
}

#new > li:nth-child(3) {
    background: url(../img/00_new_3.jpg)center no-repeat;
    background-size: cover;
}

#new > li:nth-child(4) {
    background: url(../img/00_new_4.jpg)center no-repeat;
    background-size: cover;
}

#new > li:nth-child(5) {
    background: url(../img/00_best_3.jpg)center no-repeat;
    background-size: cover;
}

#new > li:nth-child(6) {
    display: none;
}

/*반응형 정사각형*/
#new > li {
    position: relative;
}

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

/*상품텍스트*/
#new > li:hover .textslide {
    top: 0px;
}

#new > li:hover {
    cursor: pointer;
}

.textslide {
    position: relative;
    top: -130px;
    margin-top: 0;
    transition: 0.3s all ease-in-out;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.4);
}



/*까사미아 스타일 플러스*/
#styleplus {
    max-width: none;
    width: 100%;
    background-color: rgb(237, 237, 237);

    margin-top: 50px;
}

#styleplus > h3 {
    margin: 15px 0 10px 0;
}

#style {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto;
}

#style > li {
    width: 100%;
    min-height: 300px;
    transition: 0.2s all ease-in-out;
}

#style > li:nth-child(1) {
    background: url(../img/00_style_1.jpg)center no-repeat;
    background-size: cover;
}

#style > li:nth-child(2) {
    background: url(../img/00_style_2.jpg)center no-repeat;
    background-size: cover;
}

#style > li:nth-child(3) {
    background: url(../img/00_style_3.jpg)center no-repeat;
    background-size: cover;
}

#style > li:nth-child(4) {
    background: url(../img/00_style_4.jpg)center no-repeat;
    background-size: cover;
}

#style > li > a {
    display: block;
    width: 100%;
    height: 100%;
}

#style > li:hover {
    opacity: 0.8;
    transition: 0.2s all ease-in-out;
}



/*탑버튼 : 맨 위로 이동*/
#topbutton {
    background-color: rgb(237, 237, 237);

    margin: 0 auto;
    padding: 30px 0 50px 0;
}

#topbtn > a {
    width: 45%;
    max-width: 250px;
    height: 35px;
    display: block;
    margin: 0 auto;
    border: 2px solid #f7d200;
    border-radius: 99px;
    box-sizing: border-box;
    transition: 0.5s all ease-in-out;
    background-color: rgba(255, 255, 255, 0);
}

#topbtn > a:hover {
    background-color: rgba(224, 224, 224, 0.2);
    transition: 0.5s all ease-in-out;
}

/*탑버튼>화살표*/
#top {
    margin-left: 15px;
    position: relative;
    top: 45%;
}

#top > span {
    display: block;
    width: 10px;
    height: 2px;
    background-color: #f7d200;

    float: left;
}

#top > span:nth-child(1) {
    transform: rotate(-45deg);
}

#top > span:nth-child(2) {
    transform: translateX(-3px) rotate(45deg);
}

/*탑버튼>텍스트*/
#top_text {
    color: #544f47;
    font: 400 13px/0 'Noto Sans KR';
    position: relative;
    top: 50%;
    left: -15px;
}









/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*카테고리 페이지*/
.category {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.category_banner {
    max-width: 1920px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.category_banner > div {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.category_banner > div > h3 {
    font: 500 30px/1.5 'Work Sans';
    color: #fff;
}

.category_banner > div > p {
    font: 300 16px/1.5 'Noto Sans kr';
    color: #fff;
}

/*카테고리 상품*/
.category_product {}

.category_p {
    width: 100%;
    overflow: hidden;
    margin-bottom: 50px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto auto;
}

.category_p > li {}

.category_p > li > a {
    display: block;
    width: 100%;
    background-size: cover;
    border-radius: 4px;
    position: relative;
}

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

/*1번째 상품*/
.category_p > li:nth-child(1) > a:hover {
    opacity: 0.8;
}


/*2,3,4번째 상품 : 안보이게*/
.category_p > li:nth-child(2) a,
.category_p > li:nth-child(3) a,
.category_p > li:nth-child(4) a {
    background-color: rgba(245, 245, 245, 1);
    cursor: default;
}

.category_p > li:nth-child(2) > ul,
.category_p > li:nth-child(3) > ul,
.category_p > li:nth-child(4) > ul {
    opacity: 0;
}


.category_p > li:nth-child(3),
.category_p > li:nth-child(4) {
    opacity: 0;
    display: none;
    cursor: default;
}


/*************************************************/
/*침실*/
/*카테고리 배너*/
#category_banner1 {
    background: url(../img/01_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

/*1번째 상품*/
#category_p1 > li:nth-child(1) a {
    background: url(../img/00_best_6.jpg) center;
    background-size: cover;
}

/*거실*/
#category_banner2 {
    background: url(../img/02_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

#category_p2 > li:nth-child(1) a {
    background: url(../img/00_best_1.jpg) center;
    background-size: cover;
}

/*주방*/
#category_banner3 {
    background: url(../img/03_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

#category_p3 > li:nth-child(1) a {
    background: url(../img/00_best_3.jpg) center;
    background-size: cover;
}

/*홈오피스*/
#category_banner4 {
    background: url(../img/04_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

#category_p4 > li:nth-child(1) a {
    background: url(../img/00_best_4.jpg) center;
    background-size: cover;
}

/*키즈학생*/
#category_banner5 {
    background: url(../img/05_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

#category_p5 > li:nth-child(1) a {
    background: url(../img/00_best_5.jpg) center;
    background-size: cover;
}

/*인테리어*/
#category_banner6 {
    background: url(../img/06_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

#category_p6 > li:nth-child(1) a {
    background: url(../img/product1.jpg) center;
    background-size: cover;
}

/*수납생활*/
#category_banner7 {
    background: url(../img/07_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

#category_p7 > li:nth-child(1) a {
    background: url(../img/product2.jpg) center;
    background-size: cover;
}

/*주방용품*/
#category_banner8 {
    background: url(../img/08_main_banner.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
}

#category_p8 > li:nth-child(1) a {
    background: url(../img/product3.jpg) center;
    background-size: cover;
}

#category9 {
    margin-bottom: 120px;
}

#category9 > article > div {
    cursor: pointer;
}

#category9 > article > div:hover {
    opacity: 0.8;
}






/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*세부 카테고리 페이지*/
.category_de {
    margin-top: 0px;
}

/*세부 카테고리 배너*/
.category_detail_banner {
    max-width: 1920px;
    height: 200px;
    margin: 0 auto;
}

.category_detail_banner > div {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}

.category_detail_banner > div > h3 {
    font: 500 18px/1.5 'Noto Sans Kr';
    color: #fff;
}

.category_detail_banner > div > h3 > small {
    font: 100 18px/1.5 'Work Sans';
    color: #fff;
}

/*세부 카테고리 상품*/
.category_product {}

.category_pp {
    width: 100%;
    overflow: hidden;
    margin-bottom: 50px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto auto;
}

.category_pp > li {}

.category_pp > li > a {
    display: block;
    width: 100%;
    background-size: cover;
    border-radius: 4px;
    position: relative;
}

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

/*1번째 상품*/
.category_pp > li:nth-child(1) > a:hover {
    opacity: 0.8;
}

/*2,3,4번째 상품 : 안보이게*/
.category_pp > li:nth-child(2) a,
.category_pp > li:nth-child(3) a,
.category_pp > li:nth-child(4) a {
    background-color: rgba(245, 245, 245, 1);
    cursor: default;
}

.category_pp > li:nth-child(2) > ul,
.category_pp > li:nth-child(3) > ul,
.category_pp > li:nth-child(4) > ul {
    opacity: 0;
}

.category_pp > li:nth-child(3),
.category_pp > li:nth-child(4) {
    opacity: 0;
    display: none;
    cursor: default;
}


/*1번째 상품*/
#category_detail1 {
    background: url(../img/01_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-size: cover;
}

#category_pp1 > li:nth-child(1) a {
    background: url(../img/00_best_6.jpg) center;
    background-size: cover;
}

/*2번째 상품*/
#category_detail2 {
    background: url(../img/02_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-size: cover;
}

#category_pp2 > li:nth-child(1) a {
    background: url(../img/00_best_1.jpg) center;
    background-size: cover;
}

/*3번째 상품*/
#category_detail3 {
    background: url(../img/03_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-size: cover;
}

#category_pp3 > li:nth-child(1) a {
    background: url(../img/00_best_3.jpg) center;
    background-size: cover;
}

/*4번째 상품*/
#category_detail4 {
    background: url(../img/04_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-size: cover;
}

#category_pp4 > li:nth-child(1) a {
    background: url(../img/00_best_4.jpg) center;
    background-size: cover;
}

/*5번째 상품*/
#category_detail5 {
    background: url(../img/05_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-size: cover;
}

#category_pp5 > li:nth-child(1) a {
    background: url(../img/00_best_5.jpg) center;
    background-size: cover;
}

/*6번째 상품*/
#category_detail6 {
    background: url(../img/06_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-size: cover;
}

#category_pp6 > li:nth-child(1) a {
    background: url(../img/product1.jpg) center;
    background-size: cover;
}

/*7번째 상품*/
#category_detail7 {
    background: url(../img/07_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;

    background-size: cover;
}

#category_pp7 > li:nth-child(1) a {
    background: url(../img/product2.jpg) center;
    background-size: cover;
}

/*8번째 상품*/
#category_detail8 {
    background: url(../img/08_main_banner.jpg)center no-repeat;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;

    background-size: cover;
}

#category_pp8 > li:nth-child(1) a {
    background: url(../img/product3.jpg) center;
    background-size: cover;
}





















/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*상품 상세페이지*/
.productwrap {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin: 20px auto 20px auto;
}

.productwrap > div {
    margin: 0 auto;
}

/*상품좌측 대표 이미지*/
.product_top {
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 auto;
}


.product_img {
    width: 100%;
}

.product_img:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/*상품우측 텍스트*/
#product_text {
    width: 100%;
    height: 100px;
}

#product_text > ul {
    margin: 20px 0 30px 0;
}

#product_text > ul > li:nth-child(1) {
    font-size: 14px;
}

#product_text > ul > li:nth-child(2) {
    font-size: 16px;
}

#product_text > ul > li:nth-child(3) {
    font-size: 18px;
}

#product_text > ul > li:nth-child(4) {
    font-size: 18px;
}


#opt {
    width: 100%;
    float: left;
    padding: 20px 0 20px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: rgba(238, 238, 238, 0.5);
}

#opt > p {
    float: left;
    font: 400 13px/30px 'Noto Sans KR';
    padding: 0 20px;
}

/*디폴트 스타일 제거*/
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

#opt > select {
    float: left;
    width: 30%;
    height: 30px;
    border: 1px solid #aaa;
    padding-left: 10px;
    font: 400 13px/1.2 'Noto Sans KR';
    background: url(../img/option_icon.png) no-repeat 95% 50%;
    /* 화살표 모양의 이미지 */
    background-size: 10%;
    background-color: #fff;
}

#buybtn {
    float: left;
    width: 100%;
    margin: 30px 0 20px 0;
    display: flex;
}

#buybtn > input {
    border: none;
    box-sizing: border-box;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    margin-right: 15px;
    font: 400 14px/30px 'Noto Sans KR';
    cursor: pointer;
}

#buybtn > input:nth-child(1) {
    background-color: #838383;
    color: #fff;
}

#buybtn > input:last-child {
    margin-right: 0;
    background-color: #f7d200;
}

#buybtn > input:nth-child(1):hover {
    background-color: rgba(131, 131, 131, 0.8);
}

#buybtn > input:last-child:hover {
    background-color: rgba(247, 210, 0, 0.8);
}

/*중간 버튼*/
#product_middle {
    width: 100%;
    border-bottom: 2px solid #777;
    box-sizing: border-box;
    margin-bottom: 60px;
}


#product_middle > ul {
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    /*    양쪽끝에 정렬*/
    margin: 20px auto 30px auto;
}

#product_middle > ul > li {
    width: 100%;
    height: 30px;
    cursor: pointer;
    border: 1px solid #aaa;
    box-sizing: border-box;
    display: block;
    text-align: left;
    padding: 0 7px 0 7px;
    font: 500 12px/29px 'Work Sans';
    color: #3e3e3e;
    margin-right: 4px;
}

#product_middle > ul > li:last-child {
    margin-right: 0px;
}

#product_middle > ul > li:hover {
    background-color: #efefef;
}

/*화살표*/
#arrow {
    float: right;
    position: relative;
    top: 12px;
    transform: scale(0.8);
}

#arrow > span {
    display: block;
    width: 6px;
    height: 1px;
    background-color: #000;
    position: relative;
}

#arrow > span:nth-child(1) {
    transform: rotate(45deg);
}

#arrow > span:nth-child(2) {
    transform: rotate(-45deg);
    top: 3px;
}

/*상세페이지 하단*/
#product_bottom {
    max-width: 1200px;
}


#product_bottom > div {
    max-width: 1160px;
    margin: 0 auto;
}

/*상품 상세페이지 이미지*/
#product_bottom > div > img {
    max-width: 100%;
}

/*상품 상세페이지 - 대표사진*************/
/*01침대*/
#product_img_1 {
    background: url(../img/00_best_6.jpg) center no-repeat;
    background-size: cover;
}

/*02소파*/
#product_img_2 {
    background: url(../img/00_best_1.jpg) center no-repeat;
    background-size: cover;
}

/*03식탁*/
#product_img_3 {
    background: url(../img/00_best_3.jpg) center no-repeat;
    background-size: cover;
}

/*04책상*/
#product_img_4 {
    background: url(../img/00_best_4.jpg) center no-repeat;
    background-size: cover;
}

/*05수납*/
#product_img_5 {
    background: url(../img/00_best_5.jpg) center no-repeat;
    background-size: cover;
}

/*06유리병*/
#product_img_6 {
    background: url(../img/product1.jpg) center no-repeat;
    background-size: cover;
}

/*07생활용품*/
#product_img_7 {
    background: url(../img/product2.jpg) center no-repeat;
    background-size: cover;
}

/*08주방용품*/
#product_img_8 {
    background: url(../img/product3.jpg) center no-repeat;
    background-size: cover;
}

/*10메이어*/
#product_img_10 {
    background: url(../img/00_best_2.jpg) center no-repeat;
    background-size: cover;
}






















/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*로그인페이지*/
#loginwrap {
    width: 100%;
    overflow: hidden;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 auto 0 auto;
    background-color: #ddd;
}

#loginpage {
    max-width: 400px;
    margin: 50px auto;
    background-color: #fff;
}

/*#house*/
#loginpage > div {}

#loginpage > div > div {
    padding: 40px 20px;
    box-sizing: border-box;
}

#house {}




#login_h3 {
    font: 600 40px/1.5 'Noto Sans KR';
}

#login_h3:after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 3px solid #000;
    margin: 30px auto;

}

#login_text {}

#login_text > input:nth-child(1),
#login_text > input:nth-child(2) {
    outline: none;
    width: 100%;
    height: 35px;
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

#login_text > input:nth-child(1) {
    margin-bottom: 10px;
}

#login_text > input:nth-child(2) {
    margin-bottom: 20px;
}

#login_text > button {
    outline: none;
    width: 100%;
    height: 50px;
    border: none;
    background-color: #f6d800;
    color: #fff;
    font: 400 15px/1.5 'Noto Sans KR';
    transition: 0.3s all ease-in-out;
}

#login_text > button:hover {
    background-color: #f0d300;
    transition: 0s all ease-in-out;
}


#login_snstext {
    font: 400 15px/1.5 'Noto Sans KR';
    margin: 50px auto 20px auto;
    cursor: pointer;
}

#login_snstext:hover {
    text-decoration: underline;
}

#login_sns {
    width: 200px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#login_sns > li {
    width: 40px;
    height: 40px;
    border-radius: 99px;
    float: left;
    cursor: pointer;
}

#login_sns > li:hover {
    opacity: 0.8;
}

#login_sns > li:nth-child(1) {
    background: url(../img/00_footer_sns-1.png)center no-repeat;
    background-color: #504e46;
    background-size: 80%;

}

#login_sns > li:nth-child(2) {
    background: url(../img/00_footer_sns-2.png)center no-repeat;
    background-color: #504e46;
    background-size: 80%;
}

#login_sns > li:nth-child(3) {
    background: url(../img/00_footer_sns-3.png)center no-repeat;
    background-color: #504e46;
    background-size: 80%;
}

#login_sns > li:nth-child(4) {
    background: url(../img/00_footer_sns-4.png)center no-repeat;
    background-color: #504e46;
    background-size: 80%;
}



#login_join {
    outline: none;
    width: 100%;
    height: 40px;
    border: 1px solid #aaa;
    border-radius: 99px;
    background-color: #fff;
    color: #6a6a6a;

    font: 400 13px/1.5 'Noto Sans KR';
    margin: 50px auto 0 auto;
    transition: 0.3s all ease-in-out;
}

#login_join:hover {
    background-color: #f7f7f7;
    transition: 0s all ease-in-out;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*매장안내 페이지*/

#storewrap {
    width: 100%;
    height: 600px;
    background-color: #efefef;
}



#storewrap > h3 {
    font: 400 35px/1.5 'Noto Sans KR';
    color: #000;
    padding-top: 30px;
}

#storewrap > p {
    font: 100 13px/1.5 'Noto Sans KR';
    color: #222;
    padding-top: 10px;
    margin-bottom: 30px;
}

#storegpage {
    width: 100%;
    height: 700px;
    background: url(../img/store_img.jpg)center no-repeat;
    background-size: cover;
    background-color: rgba(38, 37, 35, 0.84);
    background-blend-mode: overlay;
}

#storesearch {
    max-width: 1200px;
    margin: 0 auto;


}

#storesearch > span {
    width: 140px;
    height: 90px;
    display: block;
    background: url(../img/logo_white.png)center no-repeat;
    background-size: contain;
    margin: 0 auto;
}

/*매장검색*/
#storesear {
    margin: 0 auto;
}

#storesear > input {
    outline: none;
    text-align: left;
    width: 250px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 99px;
    background-color: rgba(255, 255, 255, 0);
    font: 100 20px/1.5 'Noto Sans KR';
    color: #fff;
    padding-left: 10px;
    position: relative;
    left: 20px;
}

#storesear > input::placeholder {
    font: 100 20px/1.5 'Noto Sans KR';
    color: #fff;
}

#storesear > button {
    width: 40px;
    height: 40px;
    background: url(../img/location.png)center no-repeat;
    background-size: contain;
    outline: none;
    border: none;
    position: relative;
    left: -30px;
    top: 10px;
}

#storeinfo {
    margin: 80px auto 0px auto;
    max-width: 1200px;
    background-color: #ddd;
    text-align: center;
    border-top: 1px solid #888;
}

#storeinfo > li {
    float: left;
    font: 400 15px/1.5 'Noto Sans KR';
    color: rgba(255, 255, 255, 0.6);
    width: 33.333333%;
    margin-top: 20px;
    border-right: 1px solid #888;
    box-sizing: border-box;
}

#storeinfo > li:last-child {
    border-right: none;
}

#storeinfo > li > p {
    font: 100 14px/1.5 'Noto Sans KR';
    color: #fff;
    letter-spacing: 0.5px;
    margin-top: 10px;
}


















/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*푸터 영역*/
#footer {
    width: 100%;
    overflow: hidden;
    padding-bottom: 50px;
    background-color: #544f47;
    float: left;
    /*상품 상세페이지 div float:left 적용 때문*/
}

#footer > div {}

/*푸터상단*/
#footertop {
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 30px auto 0 auto;
}

/*푸터상단>로고*/
#footertop > h3 {
    float: left;
    opacity: 0.6;
}

#footertop > h3 img {
    width: 130px;
}

#footertop > h3 img:hover {
    opacity: 0.6;
    transition: 0.2s all ease-in-out;
}

/*푸터상단>SNS*/
#footersns {
    float: right;
    margin-top: 1px;
    opacity: 0.6;
}

#footersns > li {
    float: left;
    margin-left: 5px;
    width: 26px;
    height: 26px;
    display: block;
    border: 1px solid #fff;
    border-radius: 99px;
    transition: 0.2s all ease-in-out;
}

#footersns > li:first-child {
    margin-left: 0;
}

#footersns > li > a {
    width: 26px;
    height: 26px;
    display: block;
}

#footersns > li:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transition: 0.2s all ease-in-out;
}

#footersns > li:nth-child(1) a {
    background: url(../img/00_footer_sns-1.png)center no-repeat;
    background-size: 70%;
}

#footersns > li:nth-child(2) a {
    background: url(../img/00_footer_sns-2.png)center no-repeat;
    background-size: 70%;
}

#footersns > li:nth-child(3) a {
    background: url(../img/00_footer_sns-3.png)center no-repeat;
    background-size: 70%;
}

#footersns > li:nth-child(4) a {
    background: url(../img/00_footer_sns-4.png)center no-repeat;
    background-size: 70%;
}

/*푸터상단>전화*/
#footercall {
    float: left;
    width: 100%;
    margin-top: 30px;
    opacity: 0.6;
}

#footercall > li {
    text-align: left;
    font: 400 12px/1.2 'Noto Sans KR';
    color: #fff;
}

#footercall > li > p {
    text-align: left;
    letter-spacing: 0.5px;
    font: 700 18px/1.5 'Noto Sans KR';
    color: #fff;
}

#footercall > li:nth-child(1) {}

#footercall > li:nth-child(2) {
    margin: 10px 0;
}

#footercall > li:nth-child(3) {
    font: 100 12px/1.2 'Noto Sans KR';
    letter-spacing: 0px;
}

/*푸터중간*/
#footermiddle {
    width: 100%;
    height: 30px;
    overflow: hidden;
    background-color: rgba(72, 69, 65, 0.5);
    margin-top: 30px;
}

#footermiddle > div {
    max-width: 1200px;
    margin: 0 auto;
}

#fm {
    width: 100%;

    padding: 0 20px;
    box-sizing: border-box;
}

#fm > li {}

#fm > li > a {
    float: left;
    width: 20%;
    color: #d1d1d1;
    font: 500 12px/30px 'Noto Sans KR';
}

#fm > li > a:hover {
    text-decoration: underline;
}

/*푸터하단*/
#footerbottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    opacity: 0.7;
}

#footerbottom > address {
    font: 100 8px/1.5 'Noto Sans KR';
    color: #fff;
    margin: 20px auto 20px auto;
    letter-spacing: 0px;
}

#footerbottom > small {
    font: 100 8px/1.5 'Noto Sans KR';
    color: #fff;
    letter-spacing: 0.8px;
}














/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/



/*태블릿 설정 : w768이상*/
@media all and (min-width:768px) {
    #lnb {
        position: sticky;
        top: 0px;
    }

    #logo img {
        width: 150px;
    }

    /*메뉴버튼 영역*/
    .menu_button {
        transform: scale(1);
    }

    .popup > span {
        display: none;
    }




    /*메인배너 슬라이드*/
    #main_slide {
        height: 500px;
        overflow: hidden;
    }

    #slide > li > a > img {
        height: 500px;
    }


    /*메인배너 텍스트*/
    .slide_text {
        text-align: left;
        position: relative;
        top: -330px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .slide_text > h4 {
        letter-spacing: 0.2px;
        text-align: left;
        margin-left: 60px;
    }

    #slide_text1 > h4 {
        font: 700 60px/0.9 'Playfair Display';
    }

    #slide_text2 > h4 {
        font: normal 60px/0.9 'Lobster';
        color: #fff;
    }

    #slide_text2 > p {
        color: #fff;
    }

    #slide_text3 {
        position: inherit;
        top: -366px;
    }

    #slide_text3 > h4 {
        font: 600 50px/0.9 'Work Sans';
        color: #f7d200;
    }

    #slide_text3 > p {
        color: #fff;
    }

    .slide_text > p {
        font: 400 16px/1.5 'Noto Sans KR';
        text-align: left;
        margin: 40px auto 20px 60px;
    }



    /*메인배너 화살표 버튼*/
    #main_banner > div > span {
        transform: scale(1) translateY(-50%);
    }














    /*article h3 */
    .article_h3 {
        font: 200 40px/1.5 'Work Sans';
        letter-spacing: 0px;
        margin: 50px 0 20px 0;
    }


    /*그리드 시스템*/
    #best,
    .category_p,
    .category_pp {
        grid-template-columns: auto auto auto auto;
    }

    /*이벤트 배너*/
    #eventbanner {}

    #event {
        width: 100%;
        height: 300px;
        background-blend-mode: darken;
        background-color: rgba(0, 0, 0, 0);
    }

    #event_text {
        position: relative;
        top: 50%;
        transform: translateY(-50%)
    }

    /*이벤트 배너 텍스트*/
    #event_text1 {
        font: 400 16px/1 'Noto Sans KR';
        letter-spacing: 3px;
        color: #000;
    }

    #event_text2 {
        font: 400 100px/1 'Work Sans';
        letter-spacing: 0px;
        margin: 10px 0 2px 0;
        color: #000;
    }

    #event_text3 {
        font: 300 26px/1 'Work Sans';
        letter-spacing: 3px;
        color: #000;
    }


    #new {}

    #new > li:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }









    /*신상품*/
    #newproduct {}

    #new {
        display: grid;
        grid-gap: 15px;
        /*그리드 사이의 간격*/
        grid-template-columns: auto auto auto auto auto;
        /*col설정 row자동*/
        width: 100%;
    }

    #new > li {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #new > li a {
        display: block;
        width: 100%;
    }

    #new > li:nth-child(1) {
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
        background: url(../img/00_new_1.jpg)center no-repeat;
        background-size: cover;
    }

    #new > li:nth-child(2) {
        background: url(../img/00_new_2.jpg)center no-repeat;
        background-size: cover;
    }

    #new > li:nth-child(3) {
        background: url(../img/00_new_3.jpg)center no-repeat;
        background-size: cover;
    }

    #new > li:nth-child(4) {
        background: url(../img/00_new_4.jpg)center no-repeat;
        background-size: cover;
    }

    #new > li:nth-child(5) {
        background: url(../img/00_new_5.jpg)center no-repeat;
        background-size: cover;
    }

    #new > li:nth-child(6) {
        display: none;
        background: url(../img/00_new_5.jpg)center no-repeat;
        background-size: cover;
    }

    /*반응형 정사각형*/
    #new > li {
        position: relative;
    }

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

    /*상품텍스트*/
    #new > li:hover .textslide {
        top: -10px;
    }

    #new > li:hover {
        cursor: pointer;
    }

    .textslide {
        position: relative;
        top: -130px;
        margin-top: 0;
        transition: 0.3s all ease-in-out;
        padding: 10px;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.4);
    }


    /*상품 텍스트 정보*/
    #new > li > .p_text {
        float: left;
        text-align: left;
        overflow: hidden;
        margin: 10px 0 20px 0;
    }

    #new > li > .p_text > li {
        text-align: left;
    }

    /*상품 상품명*/
    #new > li > .p_text > li:nth-child(1) {
        font: 400 13px/1.5 'Noto Sans KR';
    }

    /*상품 정상가*/
    #new > li > .p_text > li:nth-child(2) {
        font: 400 12px/2 'Rubik';
        letter-spacing: 0.x;
        text-decoration: line-through;
        color: #aaa;
        margin-top: 6px;
    }

    /*상품 판매가*/
    #new > li > .p_text > li:nth-child(3) {
        float: left;
        font: 400 16px/1 'Rubik';
        letter-spacing: -0.5px;
    }

    /*상품 할인률*/
    #new > li > .p_text > li:nth-child(4) {
        float: right;
        font: 500 16px/1 'Rubik';
    }










    #style {
        grid-template-columns: auto auto auto auto auto auto auto auto;
    }

    #style > li {
        min-height: 400px;
    }

    #style > li:nth-child(1) {
        grid-column: 1 / span 5;
    }

    #style > li:nth-child(2) {
        grid-column: 6 / span 3;
    }

    #style > li:nth-child(3) {
        grid-column: 1 / span 3;
    }

    #style > li:nth-child(4) {
        grid-column: 4 / span 5;
    }

    /*검색, 장바구니 버튼*/
    .lnb_rightwrap {
        width: 80px;
    }

    .lnb_right > li {
        width: 40px;
        background-size: 80%;
    }

    .search_pop {
        left: -80px;
    }

    /*검색 팝업창*/
    .popup {
        background-color: rgba(255, 255, 255, 0);
    }





    /*카테고리 페이지*/
    .category_banner > div > h3 {
        font: 500 60px/1.5 'Work Sans';
    }

    .category_banner > div > p {
        font: 300 18px/1.5 'Noto Sans kr';
    }


    .category_p > li:nth-child(3),
    .category_p > li:nth-child(4) {
        opacity: 1;
        display: block;
    }

    .category_pp > li:nth-child(3),
    .category_pp > li:nth-child(4) {
        opacity: 1;
        display: block;
    }



    /*세부 카테고리 페이지*/
    .category_detail_banner > div > h3 {
        font: 500 25px/1.5 'Noto Sans Kr';
        color: #fff;
    }

    .category_detail_banner > div > h3 > small {
        font: 100 25px/1.5 'Work Sans';
        color: #fff;
    }










    /*상품 상세페이지*/
    #product_top {
        display: flex;
        justify-content: space-around;
    }

    #product_top > div {
        width: 100%;
        margin-right: 15px;
    }

    #product_top > div:nth-child(1) {
        background-color: antiquewhite;
    }

    #product_top > div:last-child {
        margin-right: 0;
    }

    /*상품 상세페이지 > 텍스트*/
    #product_text > ul > li:nth-child(1) {
        margin: 20px 0 30px 0;
        font: 400 16px/1.5 'Noto Sans KR';
    }





    /*푸터*/
    #footertop > h3 img {
        width: 180px;
    }

    #footersns {
        float: left;
        position: relative;
        top: 60px;
        left: -180px;
    }

    #footersns > li {
        float: left;
        margin-left: 10px;
        width: 35px;
        height: 35px;
        display: block;
        border: 1px solid #fff;
        border-radius: 99px;
        transition: 0.2s all ease-in-out;
    }

    #footersns > li > a {
        width: 35px;
        height: 35px;
        display: block;
    }

    #footercall {
        width: auto;
        float: right;
        margin-top: 0;
    }

}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*PC웹 설정 : w1024이상*/
@media all and (min-width:1024px) {

    #wrap {}

    #contentwrap {}

    /*헤더<header> 영역*/
    /*gnb 영역*/
    #header {
        width: 100%;
        height: 20px;
        padding-top: 20px;
        position: relative;
        z-index: 5;
        background-color: #f7d200;
        display: block;
    }

    #gnb {
        max-width: 1200px;
        margin: 0 auto;
    }

    #gnb > ul {
        width: 315px;
        float: right;
    }

    #gnb > ul > li {}

    #gnb > ul > li > a {
        float: left;
        font: 300 12px/0.8 'Noto Sans KR';
        padding: 0 12px;
        border-left: 1px solid #000;
        color: #000;
    }

    #gnb > ul > li:first-child > a {
        border: none;
        padding-left: 0;
    }

    #gnb > ul > li:last-child > a {
        padding-right: 0;
    }

    #gnb > ul > li > a:hover {
        text-decoration: underline;
    }

    /*네비게이션<nav>*/
    #lnb {
        display: none;
    }

    #pclnb {
        display: block;
        width: 100%;
        height: 100%;
        z-index: 10;
        position: sticky;
        top: -40px;
        box-shadow: 0 5px 6px rgba(64, 64, 64, 0.1);
        background-color: #f7d200;
    }

    #pclnb > div {
        max-width: 1200px;
        height: 90px;
        margin: 0 auto;
    }

    /*까사미아 로고*/
    #logo {
        float: left;
        width: 20%;
        height: 50px;
        position: relative;
        top: 40px;
        padding-left: 20px;
        box-sizing: border-box;
    }

    #logo a {
        display: block;
        width: 150px;
        height: 50px;
        position: relative;
        top: 25px;
        left: 75px;
        padding: 0px;
        float: left;
    }

    #logo img {
        width: 150px;
        display: block;
        float: left;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;

    }


    /*메뉴버튼 영역*/
    .menu_button {
        display: none;
    }


    /*메뉴*/
    .menuwrap {
        width: 80%;
        height: 40px;
        float: right;
        position: relative;
        top: 40px;
    }

    .menu {
        position: absolute;
        max-width: none;
        width: 100%;
        height: 50px;
        z-index: 10;
        box-shadow: 0 0 0 0;
        display: block;
        top: 0px;
    }

    .menu > li {
        width: 11.111111%;
        height: 50px;
        float: left;
        border-bottom: none;
    }

    .menu > li:nth-child(9):after {
        content: "";
        display: block;
        width: 2px;
        height: 16px;
        background-color: #e39d00;
        position: relative;
        top: -31px;
    }

    .menu > li > a {
        height: 50px;
        display: block;
        background-color: rgba(255, 255, 255, 0);
        text-align: center;
        color: #000;
        font: 400 14px/50px 'Noto Sans KR';
        position: relative;
        padding: 0px;
        transition: 0.2s all ease-in-out;
    }

    .menu > li > a:hover {}


    /*섭메뉴*/
    .submenu {
        display: none;
        width: 120px;
        background-color: rgb(109, 109, 109);
        position: relative;
        left: -7px;
    }

    /*메뉴 슬라이드 다운*/
    .menu > li:hover .submenu {
        display: block;
    }

    .submenu:nth-child(4) {
        display: inherit;
    }

    .submenu > li {
        cursor: pointer;
        width: 100%;
        height: 35px;
        overflow: hidden;
        text-align: center;
        padding-left: 0;
        font: 200 12px/35px 'Noto Sans KR';
        letter-spacing: 0px;
        color: #fff;
        transition: 0.2s all ease-in-out;
    }

    /*제품 전체보기 텍스트*/
    .submenu > li:nth-child(1) {
        font: 400 12px/40px 'Noto Sans KR';
        display: none;
    }

    .submenu > li:hover {
        background-color: rgb(134, 134, 134);
        text-decoration: none;
    }

    /*섭메뉴_화살표 버튼*/
    .btn,
    .btn1 {
        display: none;
    }

    /*메뉴 하단 : 아이콘 gnb*/
    .lnb_gnb {
        display: none;
    }




    /*--------------*/
    /*검색 장바구니 버튼*/
    .lnb_rightwrap {
        width: 65px;
        height: 40px;
        position: relative;
        top: -42px;
        float: right;
    }

    .lnb_right,
    #search_box {
        position: relative;
    }

    .lnb_right > li {
        float: left;
        width: 30px;
        height: 40px;
        display: block;
        cursor: pointer;
        background-size: 85%;
    }

    /*검색 아이콘*/
    .search {
        background: url(../img/lnb_search_black.png) center no-repeat;
    }

    /*장바구니 아이콘*/
    .shoppingbag {
        background: url(../img/lnb_shoppingbag_black.png) center no-repeat;
    }

    /*검색 팝업창*/
    .search_pop {
        height: 25px;
        width: 150px;
        left: -65px;
        top: -35px;
        background-color: rgba(255, 255, 255, 0);
        border-radius: 0px;
        border-color: rgba(0, 255, 255, 0);
        border-bottom: 1px solid #000;
        box-shadow: none;
        padding-left: 0px;
    }

    .search_pop::placeholder {
        color: rgba(0, 0, 0, 0.5);
    }

    .popup {
        cursor: default;
        background-color: rgba(255, 255, 255, 0);
        display: block;
    }

    .popup > span {
        display: none;
    }


    /*메뉴클릭 시 배경 어둡게*/
    .bgclick {
        display: none;
    }

    /*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/








    /*메인배너 슬라이드*/
    #main_slide {
        height: 700px;
        overflow: hidden;
    }





    #slide > li > a > img {
        height: 700px;

    }


    /*메인배너 텍스트*/
    .slide_text {
        text-align: left;
        position: relative;
        top: -500px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .slide_text > h4 {
        letter-spacing: 0.2px;
        text-align: left;
        margin-left: 60px;
    }

    #slide_text1 > h4 {
        font: 700 80px/0.9 'Playfair Display';
    }

    #slide_text2 > h4 {
        font: normal 80px/0.9 'Lobster';
        color: #fff;
    }

    #slide_text2 > p {
        color: #fff;
    }

    #slide_text3 {
        position: relative;
        top: -550px;
    }

    #slide_text3 > h4 {
        font: 600 70px/0.9 'Work Sans';
        color: #f7d200;
    }

    #slide_text3 > p {
        color: #fff;
    }

    .slide_text > p {
        font: 400 18px/1.5 'Noto Sans KR';
        text-align: left;
        margin: 40px auto 20px 60px;
    }

    .slide_text > h4 {
        font: normal 80px/0.9 'Rozha One';
        letter-spacing: 0.2px;
    }









    #best {
        /*그리드 사이의 간격*/
        grid-template-columns: auto auto auto auto auto;
        /*col설정 row자동*/
    }

    #best > li:nth-child(5) {
        display: block;
    }



    #style > li {
        min-height: 500px;
    }


    /*이벤트 배너 텍스트*/
    #event {
        height: 360px;
    }

    #event_text1 {
        font: 400 18px/1 'Noto Sans KR';
        letter-spacing: 3px;
        color: #000;
    }

    #event_text2 {
        font: 400 120px/1 'Work Sans';
        letter-spacing: 0px;
        margin: 10px 0 2px 0;
        color: #000;
    }

    #event_text3 {
        font: 300 28px/1 'Work Sans';
        letter-spacing: 3px;
        color: #000;
    }




    /*카테고리*/
    .category_banner {}







    /*상품 상세페이지*/
    #productwrap {}

    #product_top {
        display: flex;
        justify-content: space-around;
    }

    #product_top > div {
        width: 100%;
        margin-right: 15px;
    }

    #product_top > div:last-child {
        margin-right: 0;
    }

    /*상품 상세페이지 > 텍스트*/
    #product_text > ul > li:nth-child(1) {
        margin: 20px 0 30px 0;
        font: 400 20px/1.5 'Noto Sans KR';
    }


    /*매장안내*/
    #storewrap {
        height: 800px;
    }
}