@charset "utf-8";


/*모바일 기준*/
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: center;
    font-style: normal;
}

li {
    list-style: none;
}

h4 {
    font: 1.4rem 'Nanum pen Script';
    color: #29353D;
}

table {
    border-spacing: 0;
}


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

#wrap {
    width: 100%;
    background: #E9E6E1;
}

/*////////////header////////////*/
#header {
    width: 100%;
    height: 15vh;
    background: #C4AE9E;
    overflow: hidden;
}

#slide {
    width: 100%;
    height: 15vh;
    margin: 0 auto;
    overflow: hidden;
}

#slide > ul {
    width: 100%;
    height: 15vh;
    position: relative;
}

#slide > ul > li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    animation: fade 15s infinite;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

#slide > ul > li:nth-child(1) {
    background: url(../imges/etc/banner01.jpg) center no-repeat;
    animation-delay: 0s
}

#slide > ul > li:nth-child(2) {
    background: url(../imges/etc/banner02.jpg) center no-repeat;
    animation-delay: 5s;
}

#slide > ul > li:nth-child(3) {
    background: url(../imges/etc/banner03.jpg) center no-repeat;
    animation-delay: 10s;
}

#slide > ul > li:nth-child(4) {
    background: url(../imges/etc/banner04.jpg) center no-repeat;
    animation-delay: 15s;
}

#gnb {
    display: none;
}


/*/////nav//////*/
nav {
    width: 100%;
    height: 45px;
    z-index: 10;
}

nav ul {
    max-width: 1024px;
    margin: 0 auto;
}

nav a {
    display: block;
    color: #29353D;
}

nav > div {
    float: left;
}


nav .sub,
nav .sub2 {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background: rgba(217, 210, 204, 0.8);
    font: .8rem/1.5rem 'Nanum Myeongjo';
}

nav li:hover .sub,
nav li:hover .sub2 {
    height: 150px;
    opacity: 1;
    z-index: 1;
    transition: all 0.6s ease-in-out;
}

/*/////상단nav//////*/

#navAll {
    position: sticky;
    top: 0;
    margin-bottom: 10px;
    font: 1rem/45px 'Nanum Myeongjo';
    border-bottom: 2px solid #DBC9BE;
    background: rgba(233, 230, 225, 0.8);
}

#lnb00 {
    width: 50px;
    height: 100%;
    position: relative;
    cursor: pointer;
}

#lnb00 > span {
    position: absolute;
    left: 10px;
    width: 25px;
    height: 3px;
    background: #29353D;
}

.line1 {
    top: 13px;
}

.line2 {
    top: 22px;
}

.line3 {
    top: 31px;
}


#lnb {
    width: calc(100% - 50px);
    height: 100%;
    position: relative;
}

#lnb > ul > li:nth-child(1) {
    opacity: 0;
    height: 0;
    line-height: 0;
    display: none;
}


#lnb > ul > li {
    width: calc(100% / 4);
    height: 100%;
    float: left;
}

#lnb > ul > li:nth-child(2) {
    display: none;
}

#lnb > ul > li:last-child {
    display: none;
}

#lnb > ul > li:hover {
    background: rgba(219, 201, 190, 0.8);
}

#lnb01 {
    background: rgba(219, 201, 190, 0.8);
    width: 45%;
    height: 80vh;
    z-index: 1;
    position: absolute;
    top: 45px;
    /*
    처음설정 position: reletive; top :45px(상단nav높이) >> 메뉴 클릭 시 위치문제 생김
    1차 해결책
    >>상단float: left문제로 판단
    clear: both; 추가
    top :45px;삭제
    >>가로사이즈에 따라 위치값이 달라짐
    2차 해결책
    position : absolute;
    top :45px;   다시 추가. 안하면 상단 nav내용과 겹침
    clear 속성이 없어도됨/
    */

}

#lnb01 > li {
    padding-top: 5px;
}

#lnb01 h5 {
    padding-top: 5px;
    font: .8rem/1.5rem 'Nanum Myeongjo';
}

#lnb01 a {
    display: block;
    width: 100%;
    font: bold 1rem/1.3rem 'Nanum Myeongjo';
    height: 1.3rem;
}

#lnb01 a:hover {
    color: rgba(41, 53, 61, 0.5);
}



#home {
    font: 1.2rem/1.4rem 'Nanum Myeongjo';
}

.sub_lnb,
#sub_lnb1 > a,
#sub_lnb2 > a,
#sub_lnb3 > a,
#sub_lnb4 > a,
#sub_lnb5 > a,
#sub_lnb6 > a {
    font: .7rem/1.5rem 'Nanum Myeongjo';
}


.lnb2 {
    display: none;
}


/*////////////contentwrap////////////////*/
#contentwrap {
    width: 100%;
    overflow: hidden;
    font-family: 'Nanum Myeongjo', '', '';
}

section {
    margin-bottom: 20px;
    background: #E9E6E1;
}

section h4 {
    margin: 20px 0 10px 0;
}


/*/////////////////////////////sec1////*/
#intro {
    padding: 10px;
    box-sizing: border-box;
}

#intro a:hover {
    background-color: rgba(41, 53, 61, 0.3);
}


#sec1 > ul {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#sec1 > ul > li {
    min-height: 200px;
    background-color: #fff;
    box-shadow: 2px 2px 3px #29353D;
}

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

#sec1 h5 {
    font: 2rem/5rem 'Nanum brush Script';
    position: relative;
    color: #29353D;
}

#sec1 > ul > li:nth-child(1) {
    grid-column: span 5;
    grid-row: span 2;
}

#sec1 > ul > li:nth-child(1) div {
    width: 90%;
    height: 70%;
    background: url(../imges/note/main_ring.JPG) center no-repeat;
    background-size: cover;
    transform: translate(5%, 10%);
}

#sec1 > ul > li:nth-child(1) h5 {
    transform: translate(30%, 40%);
}

#sec1 > ul > li:nth-child(2) {
    grid-column: span 3;
}

#sec1 > ul > li:nth-child(2) div {
    width: 70%;
    height: 80%;
    background: url(../imges/note/main_nec.jpg) center no-repeat;
    background-size: cover;
    transform: translate(30%, 10%);
}

#sec1 > ul > li:nth-child(2) h5 {
    writing-mode: tb-rl;
    transform: translate(-30%, -90%);
}

#sec1 > ul > li:nth-child(3) {
    grid-column: span 3;
}

#sec1 > ul > li:nth-child(3) div {
    width: 70%;
    height: 80%;
    background: url(../imges/note/main_br.jpg) center no-repeat;
    background-size: cover;
    transform: translate(30%, 10%);
}

#sec1 > ul > li:nth-child(3) h5 {
    writing-mode: tb-rl;
    transform: translate(-30%, -90%);
}

#sec1 > ul > li:nth-child(4) {
    grid-column: span 4;
}

#sec1 > ul > li:nth-child(4) div {
    width: 70%;
    height: 80%;
    background: url(../imges/note/main_ear.jpg) center no-repeat;
    background-size: cover;
    transform: translate(30%, 10%);
}

#sec1 > ul > li:nth-child(4) h5 {
    writing-mode: tb-rl;
    transform: translate(-20%, -100%);
}


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

#sec1 > ul > li:nth-child(5) div {
    width: 70%;
    height: 80%;
    background: url(../imges/note/main_fb.jpg) center no-repeat;
    background-size: cover;
    transform: translate(30%, 10%);
}

#sec1 > ul > li:nth-child(5) h5 {
    writing-mode: tb-rl;
    transform: translate(-20%, -100%);
}


/*///////////////sec2////*/

#sec2 > ul {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
}

#sec2 h5 {
    font: 1.7rem 'Nanum pen Script';
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #E9E6E1;
    text-shadow: 5px 5px 5px #29353D;
    display: none;
}

#sec2 a:hover h5 {
    display: block;
}

#sec2 > ul > li {
    min-height: 150px;
    background: #fff;
    box-shadow: 2px 2px 3px #29353D;
    z-index: 5;
}

#sec2 > ul > li > a {
    display: block;
    width: 90%;
    height: 90%;
    transform: translate(5%, 5%);
}

#sec2 > ul > li:nth-child(1) a {
    background: url(../imges/note/guide3.jpg) center;
    background-size: cover;
}

#sec2 > ul > li:nth-child(2) a {
    background: url(../imges/note/gauge.jpg) center;
    background-size: cover;
}

#sec2 > ul > li:nth-child(3) a {
    background: url(../imges/note/aboutus.jpg) center;
    background-size: cover;
}

#sec2 > ul > li:nth-child(4) a {
    background: url(../imges/note/qna.jpg) center;
    background-size: cover;
}

#sec2 > ul > li:nth-child(5) {
    display: none;
}

#sec2 > ul > li:nth-child(5) a {
    background: url(../imges/note/postcard01.jpg) center;
    background-size: cover;
}

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

#sec2 > ul > li:nth-child(6) a {
    background: url(../imges/note/AS02.jpg) center;
    background-size: cover;
}

/*////////////sec2sub*/
#info {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #29353D;
    font: 1rem/2rem 'kbizmjo';
}


/*---*/
.about {
    width: 100%;
}

.about h3 {
    font: 1.8rem/2.2rem 'Nanum Brush Script';
    padding-top: 50px;
    padding-bottom: 30px;
}

.sqt {
    background: url(../imges/etc/logo_bg.png) center no-repeat;
    background-size: 90%;
    line-height: 2rem;
}

.sqt > p {
    font: 1.6rem/1.8rem 'Nanum pen Script';
    margin-top: 15px;
}

.atelier {
    line-height: 2.2rem;
    background: url(../imges/note/at.jpg) center no-repeat;
}

.open {
    line-height: 2rem;
    background: url(../imges/note/squ_banner.jpg) center no-repeat;
    background-size: cover;
}

.open h4 {
    font: bold 1rem/2.5rem 'Nanum Myeongjo';
    margin-top: 20px;
}

.open p:last-child {
    font: 1.7rem/2.2rem 'Nanum pen Script';
    margin-bottom: 60px;
}

.open > img {
    width: 80%;
    margin: 30px 0;
}

/*---*/
.guide > div {
    margin-bottom: 20px;
}

.guide > div > h5 {
    font: 1.8rem/2rem 'Nanum Brush Script';
    padding-top: 50px;
    padding-bottom: 30px;
}

.guide input {
    cursor: pointer;
    font: 1.3rem 'Nanum Brush Script';
    width: 300px;
    background: #E9E6E1;
    color: #29353D;
    border: 1px solid #29353D;
    margin-bottom: 15px;
}

.guide input:hover {
    background-color: rgba(41, 53, 61, 0.3);
}


#guide0 {
    background: url(../imges/note/guide1-1.jpg) center;
    background-size: cover;
}


#gauge0 {
    background: url(../imges/note/gauge-1.jpg) center;
    background-size: cover;
}


#card0 {
    background: url(../imges/note/postcard02-1.jpg) center;
    background-size: cover;
}

#as0 {
    background: url(../imges/note/AS02-1.jpg) center;
    background-size: cover;
}

#as0 p {
    font: bold 1rem/2.5rem 'Nanum Myeongjo';
    margin-top: 20px;
}

/*---*/
.qna {
    width: 100%;
    color: #29353D;
}

.qna a {
    color: #29353D;
}

.qna > h3 {
    font: 1.8rem/2.2rem 'Nanum Brush Script';
    padding-top: 50px;
    padding-bottom: 30px;
}

.qna > div {
    width: 95%;
}

.qna input {
    cursor: pointer;
    font: 1.3rem 'Nanum Brush Script';
    width: 100px;
    background: #E9E6E1;
    color: #29353D;
    border: 1px solid #29353D;
    margin-bottom: 10px;
    float: right;
}

.qna input:hover {
    background-color: rgba(41, 53, 61, 0.3);
}

.t_qna {
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #29353D;
    line-height: 20px;
}

.t_qna th {
    border-bottom: 1px solid #29353D;
}

.t_qna td {
    height: 35px;
}

.board_btn {
    width: 100%;
}

.board_btn ul {
    width: 360px;
    margin: 0 auto;
}

.board_btn li {
    float: left;
    width: 50px;
}

.board_btn li a {
    display: block;
    line-height: 50px;
}


/*----------------main end*/

/*//////product////sec3-sec13//////////*/


.product {
    max-width: 1024px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;
}


.product ul {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.product > ul > li {
    background: #fff;
    box-shadow: 2px 2px 3px #29353D;
    max-width: 100%;
    min-height: 250px;
}

.product > ul > li > a {
    display: block;
    width: 90%;
    height: 75%;
    margin: 10px auto;
}

.product li:hover {
    background-color: rgba(41, 53, 61, 0.3);
}

.product p {
    font: 0.9rem/18px 'Nanum Myeongjo';
    color: #29353D;
    position: relative;
    top: 90%;
    transform: translateY(32px);
}



/*/////////////////////////////sec3/ring///*/


.ring_drop > li:nth-child(1) a {
    background: url(../imges/rings/raindrop%20A-ring%2010mm.jpg) center;
    background-size: cover;
}

.ring_drop > li:nth-child(2) a {
    background: url(../imges/rings/raindrop%20angle%20ring.jpg) center;
    background-size: cover;
}

.ring_drop > li:nth-child(3) a {
    background: url(../imges/rings/raindrop%20big%20round%20ring.jpg) center;
    background-size: cover;
}

.ring_drop > li:nth-child(4) a {
    background: url(../imges/rings/raindrop%20first%20ring.jpg) center;
    background-size: cover;
}

.ring_drop > li:nth-child(5) a {
    background: url(../imges/rings/raindrop%20more%20ring.jpg) center;
    background-size: cover;
}

.ring_drop > li:nth-child(6) a {
    background: url(../imges/rings/raindrop%20soul%20ring.jpg) center;
    background-size: cover;
}

.ring_square > li:nth-child(1) a {
    background: url(../imges/rings/modern%20sqaure%20lady%20ring.jpg) center;
    background-size: cover;
}

.ring_classic > li:nth-child(1) a {
    background: url(../imges/rings/Classic%203mm%204mm.jpg) center;
    background-size: cover;
}

.ring_classic > li:nth-child(2) a {
    background: url(../imges/rings/classic%20edge%20ring%2002.jpg) center;
    background-size: cover;
}

.ring_classic > li:nth-child(3) a {
    background: url(../imges/rings/classic%20ring.jpg) center;
    background-size: cover;
}

.ring_classic > li:nth-child(4) a {
    background: url(../imges/rings/classic%20round%20ring.jpg) center;
    background-size: cover;
}

.ring_classic > li:nth-child(5) a {
    background: url(../imges/rings/Classic%20Round.jpg) center;
    background-size: cover;
}

.ring_classic > li:nth-child(6) a {
    background: url(../imges/rings/classic%20ring%202mm.jpg) center;
    background-size: cover;
}


.ring_roman > li:nth-child(1) a {
    background: url(../imges/rings/Roman%20Lace%20with%20Diamond.jpg) center;
    background-size: cover;
}

.ring_roman > li:nth-child(2) a {
    background: url(../imges/rings/Roman%20Lace.jpg) center;
    background-size: cover;
}

.ring_roman > li:nth-child(3) a {
    background: url(../imges/rings/Roman%20Love%203mm.jpg) center;
    background-size: cover;
}

.ring_roman > li:nth-child(4) a {
    background: url(../imges/rings/Roman%20Love%206mm.jpg) center;
    background-size: cover;
}

.ring_curve > li:nth-child(1) a {
    background: url(../imges/rings/Curve%20Ring%2004.jpg) center;
    background-size: cover;
}

.ring_curve > li:nth-child(2) a {
    background: url(../imges/rings/Curve%20Ring%2015.jpg) center;
    background-size: cover;
}

.ring_curve > li:nth-child(3) a {
    background: url(../imges/rings/Curve%20Ring%2016.jpg) center;
    background-size: cover;
}

.ring_curve > li:nth-child(4) a {
    background: url(../imges/rings/HRM%2001%20Ring.jpg) center;
    background-size: cover;
}

.ring_curve > li:nth-child(5) a {
    background: url(../imges/rings/HRM%2006%20Ring.jpg) center;
    background-size: cover;
}

.ring_curve > li:nth-child(6) a {
    background: url(../imges/rings/HRM%2008%20Ring.jpg) center;
    background-size: cover;
}


.ring_simple > li:nth-child(1) a {
    background: url(../imges/rings/Simple%20band.jpg) center;
    background-size: cover;
}

.ring_simple > li:nth-child(2) a {
    background: url(../imges/rings/Basics%20ring%2001.jpg) center;
    background-size: cover;
}


/*/////////////////////////////sec4//necklaces//*/


.nec_drop > li:nth-child(1) a {
    background: url(../imges/necklaces/raindrop%20bar%20necklace.jpg) center;
    background-size: cover;
}

.nec_drop > li:nth-child(2) a {
    background: url(../imges/necklaces/raindrop%20soul%20necklace.jpg) center;
    background-size: cover;
}

.nec_drop > li:nth-child(3) a {
    background: url(../imges/necklaces/raindrop%20lady%20necklac.jpg) center;
    background-size: cover;
}

.nec_drop > li:nth-child(4) a {
    background: url(../imges/necklaces/raindrop%20heart%20necklace.jpg) center bottom;
    background-size: cover;
}

.nec_drop > li:nth-child(5) a {
    background: url(../imges/necklaces/raindrop%20round%20necklace.jpg) left bottom;
    background-size: cover;
}

.nec_drop > li:nth-child(6) a {
    background: url(../imges/necklaces/raindrop%20cross%20necklace.jpg) center;
    background-size: cover;
}

.nec_square > li:nth-child(1) a {
    background: url(../imges/necklaces/modern%20sqaure%20rocking%20necklace.jpg) center;
    background-size: cover;
}

.nec_square > li:nth-child(2) a {
    background: url(../imges/necklaces/moredn%20square%20A-necklace.jpg) center;
    background-size: cover;
}


.nec_classic > li:nth-child(1) a {
    background: url(../imges/necklaces/Classic%20Bar%20Necklace.jpg) center;
    background-size: cover;
}

.nec_classic > li:nth-child(2) a {
    background: url(../imges/necklaces/Classic%20Hexagon%20Necklace.jpg) center bottom;
    background-size: cover;
}

.nec_classic > li:nth-child(3) a {
    background: url(../imges/necklaces/Classic%20Ring%20Necklace.jpg) center;
    background-size: cover;
}

.nec_curve > li:nth-child(1) a {
    background: url(../imges/necklaces/curve%20heart%20necklace.jpg) center;
    background-size: cover;
}

.nec_curve > li:nth-child(2) a {
    background: url(../imges/necklaces/HRM%2002.jpg) center bottom;
    background-size: cover;
}

.nec_curve > li:nth-child(3) a {
    background: url(../imges/necklaces/Curve%20Necklace%2005.jpg) center;
    background-size: cover;
}

.nec_curve > li:nth-child(4) a {
    background: url(../imges/necklaces/HRM%2009.jpg) center bottom;
    background-size: cover;
}

.nec_curve > li:nth-child(5) a {
    background: url(../imges/necklaces/HRM%20Heart.jpg) center;
    background-size: cover;
}

.nec_curve > li:nth-child(6) a {
    background: url(../imges/necklaces/curve%20necklace%2008.jpg) center;
    background-size: cover;
}


.nec_simple > li:nth-child(1) a {
    background: url(../imges/necklaces/Objet%20Curve%20Necklace%2001.jpg) right bottom;
    background-size: cover;
}

.nec_simple > li:nth-child(2) a {
    background: url(../imges/necklaces/Objet%20Curve%20Necklace%2002.jpg) left center;
    background-size: cover;
}

.nec_simple > li:nth-child(3) a {
    background: url(../imges/necklaces/Rivet%20Necklace,%20Gray%20Moostone.jpg) center;
    background-size: cover;
}

.nec_simple > li:nth-child(4) a {
    background: url(../imges/necklaces/Sentence%20Necklace.jpg) center;
    background-size: cover;
}

.nec_simple > li:nth-child(5) a {
    background: url(../imges/necklaces/simple%20chain%20necklace.jpg) center;
    background-size: cover;
}


/*/////////////////////////////sec5/bracelets///*/

.br_drop > li:nth-child(1) a {
    background: url(../imges/bracelets/raindrop%20cuff%20clean.jpg) center;
    background-size: cover;
}

.br_drop > li:nth-child(2) a {
    background: url(../imges/bracelets/raindrop%20lady%20bracelet.jpg) center;
    background-size: cover;
}

.br_drop > li:nth-child(3) a {
    background: url(../imges/bracelets/raindrop%20leaf%20bracelet.jpg) center;
    background-size: cover;
}

.br_drop > li:nth-child(4) a {
    background: url(../imges/bracelets/raindrop%20twin%20bracelet.jpg) center;
    background-size: cover;
}

.br_drop > li:nth-child(5) a {
    background: url(../imges/bracelets/raindrop%20beaute%20necklace_bracelet.jpg) center;
    background-size: cover;
}

.br_drop > li:nth-child(6) a {
    background: url(../imges/bracelets/petite%20heart%20bracelet.jpg) center;
    background-size: cover;
}

.br_square > li:nth-child(1) a {
    background: url(../imges/bracelets/modern%20sqaure%20rocking%20bracelet.jpg) center;
    background-size: cover;
}

.br_classic > li:nth-child(1) a {
    background: url(../imges/bracelets/classic%20cuff%2001.jpg) center;
    background-size: cover;
}

.br_classic > li:nth-child(2) a {
    background: url(../imges/bracelets/classic%20ring%20bracelet.jpg) center;
    background-size: cover;
}

.br_classic > li:nth-child(3) a {
    background: url(../imges/bracelets/CLASSIC%20toggle%20bracelet.jpg) center;
    background-size: cover;
}

.br_classic > li:nth-child(4) a {
    background: url(../imges/bracelets/half%20classic%20cuff.jpg) center;
    background-size: cover;
}

.br_curve > li:nth-child(1) a {
    background: url(../imges/bracelets/Curve%20Bracelet%2001.jpg) center;
    background-size: cover;
}

.br_curve > li:nth-child(2) a {
    background: url(../imges/bracelets/Curve%20Bracelet%2002.jpg) center;
    background-size: cover;
}

.br_curve > li:nth-child(3) a {
    background: url(../imges/bracelets/Curve%20Bracelet%2003.jpg) center;
    background-size: cover;
}

.br_simple > li:nth-child(1) a {
    background: url(../imges/bracelets/simple%20chain%20bracelet.jpg) center;
    background-size: cover;
}

.br_simple > li:nth-child(2) a {
    background: url(../imges/bracelets/mask%20bracelet.jpg) center;
    background-size: cover;
}

/*/////////////////////////////sec6//earrings//*/


.ear_drop > li:nth-child(1) a {
    background: url(../imges/earrings/raindrop%20classic%20earring.jpg) center;
    background-size: cover;
}


.ear_square > li:nth-child(1) a {
    background: url(../imges/earrings/modern%20sqaure%20classic%20earring.jpg) center;
    background-size: cover;
}

.ear_square > li:nth-child(2) a {
    background: url(../imges/earrings/modern%20sqaure%20classic%20earring%2002.jpg) center;
    background-size: cover;
}

.ear_classic > li:nth-child(1) a {
    background: url(../imges/earrings/classic%20lady%20earring.jpg) center;
    background-size: cover;
}

.ear_simple > li:nth-child(1) a {
    background: url(../imges/earrings/Basics%20ring%20earring.jpg) center;
    background-size: cover;
}

.ear_simple > li:nth-child(2) a {
    background: url(../imges/earrings/Basics%20ball%20earring%203mm.jpg) center;
    background-size: cover;
}

.ear_simple > li:nth-child(3) a {
    background: url(../imges/earrings/Basics%20ball%20earring%205mm.jpg) center;
    background-size: cover;
}

/*/////////////////////////////sec7//baby//*/

#baby_br {
    margin-top: 10px;
}

.baby_nec > li:nth-child(1) a {
    background: url(../imges/baby/baby%20necklace%20SUN&MOON.jpg) center;
    background-size: cover;
}

.baby_nec > li:nth-child(2) a {
    background: url(../imges/baby/baby%20necklace.jpg) center;
    background-size: cover;
}

.baby_nec > li:nth-child(3) a {
    background: url(../imges/baby/blog001.jpg) center;
    background-size: cover;
}

.baby_nec > li:nth-child(4) a {
    background: url(../imges/baby/blog002.jpg) center;
    background-size: cover;
}

.baby_br > li:nth-child(1) a {
    background: url(../imges/baby/baby%20bracelet.jpg) center;
    background-size: cover;
}

/*/////////////////////////////sec8////*/


.drop_ring > li:nth-child(1) a {
    background: url(../imges/rings/Raindrop%20Round.jpg) center;
    background-size: cover;
}

.drop_ring > li:nth-child(2) a {
    background: url(../imges/rings/raindrop%20A-ring%205mm.jpg) center;
    background-size: cover;
}

.drop_ring > li:nth-child(3) a {
    background: url(../imges/rings/raindrop%20love%20with%20ring.jpg) center;
    background-size: cover;
}

.drop_ring > li:nth-child(4) a {
    background: url(../imges/rings/raindrop%20ms%20ring.jpg) center;
    background-size: cover;
}

.drop_ring > li:nth-child(5) a {
    background: url(../imges/rings/raindrop%20line%20ring.jpg) center;
    background-size: cover;
}

.drop_ring > li:nth-child(6) a {
    background: url(../imges/rings/raindrop%20more%20ring.jpg) center;
    background-size: cover;
}



.drop_nec > li:nth-child(1) a {
    background: url(../imges/necklaces/raindrop%20big%20cross%20necklace.jpg) center;
    background-size: cover;
}

.drop_nec > li:nth-child(2) a {
    background: url(../imges/necklaces/raindrop%20chalk%20necklace.jpg) center;
    background-size: cover;
}

.drop_nec > li:nth-child(3) a {
    background: url(../imges/necklaces/raindrop%20coin%20necklace.jpg) center;
    background-size: cover;
}

.drop_nec > li:nth-child(4) a {
    background: url(../imges/necklaces/raindrop%20cross%20necklace.jpg) center;
    background-size: cover;
}

.drop_nec > li:nth-child(5) a {
    background: url(../imges/necklaces/raindrop%20heart%20necklace.jpg) center;
    background-size: cover;
}

.drop_nec > li:nth-child(6) a {
    background: url(../imges/necklaces/raindrop%20round%20necklace.jpg) center;
    background-size: cover;
}


.drop_br > li:nth-child(1) a {
    background: url(../imges/bracelets/raindrop%20cuff%20black.jpg) center;
    background-size: cover;
}

.drop_br > li:nth-child(2) a {
    background: url(../imges/bracelets/raindrop%20lady%20bracelet.jpg) center;
    background-size: cover;
}

.drop_br > li:nth-child(3) a {
    background: url(../imges/bracelets/raindrop%20leaf%20bracelet.jpg) center;
    background-size: cover;
}

.drop_br > li:nth-child(4) a {
    background: url(../imges/bracelets/raindrop%20twin%20bracelet.jpg) center;
    background-size: cover;
}

.drop_br > li:nth-child(5) a {
    background: url(../imges/bracelets/raindrop%20beaute%20necklace_bracelet.jpg) center;
    background-size: cover;
}

.drop_br > li:nth-child(6) a {
    background: url(../imges/bracelets/raindrop%20coin%20bracelet.jpg) center;
    background-size: cover;
}


.drop_ear > li:nth-child(1) a {
    background: url(../imges/earrings/raindrop%20classic%20earring.jpg) center;
    background-size: cover;
}

.drop_baby > li:nth-child(1) a {
    background: url(../imges/baby/baby%20necklace%20SUN&MOON.jpg) center;
    background-size: cover;
}

.drop_baby > li:nth-child(2) a {
    background: url(../imges/baby/blog001.jpg) center;
    background-size: cover;
}

.drop_baby > li:nth-child(3) a {
    background: url(../imges/baby/blog003.jpg) center;
    background-size: cover;
}

/*/////////////////////////////sec9////*/

.square_ring > li:nth-child(1) a {
    background: url(../imges/rings/modern%20sqaure%20lady%20ring.jpg) center;
    background-size: cover;
}


.square_nec > li:nth-child(1) a {
    background: url(../imges/necklaces/modern%20sqaure%20rocking%20necklace.jpg) center;
    background-size: cover;
}

.square_nec > li:nth-child(2) a {
    background: url(../imges/necklaces/moredn%20square%20A-necklace.jpg) center;
    background-size: cover;
}

.square_br > li:nth-child(1) a {
    background: url(../imges/bracelets/modern%20sqaure%20rocking%20bracelet.jpg) center;
    background-size: cover;
}


.square_ear > li:nth-child(1) a {
    background: url(../imges/earrings/modern%20sqaure%20classic%20earring.jpg) center;
    background-size: cover;
}

.square_ear > li:nth-child(2) a {
    background: url(../imges/earrings/modern%20sqaure%20classic%20earring%2002.jpg) center;
    background-size: cover;
}


/*/////////////////////////////sec10////*/


.classic_ring > li:nth-child(1) a {
    background: url(../imges/rings/Classic%203mm%204mm.jpg) center;
    background-size: cover;
}

.classic_ring > li:nth-child(2) a {
    background: url(../imges/rings/classic%20edge%20ring%2001.jpg) center;
    background-size: cover;
}

.classic_ring > li:nth-child(3) a {
    background: url(../imges/rings/classic%20ring%202mm.jpg) center;
    background-size: cover;
}

.classic_ring > li:nth-child(4) a {
    background: url(../imges/rings/classic%20ring.jpg) center;
    background-size: cover;
}

.classic_ring > li:nth-child(5) a {
    background: url(../imges/rings/Classic%20Round.jpg) center;
    background-size: cover;
}

.classic_ring > li:nth-child(6) a {
    background: url(../imges/rings/classic%20round%20ring.jpg) center;
    background-size: cover;
}



.classic_nec > li:nth-child(1) a {
    background: url(../imges/necklaces/Classic%20Bar%20Necklace.jpg) center;
    background-size: cover;
}

.classic_nec > li:nth-child(2) a {
    background: url(../imges/necklaces/Classic%20Hexagon%20Necklace.jpg) center bottom;
    background-size: cover;
}

.classic_nec > li:nth-child(3) a {
    background: url(../imges/necklaces/Classic%20Ring%20Necklace.jpg) center;
    background-size: cover;
}


.classic_br > li:nth-child(1) a {
    background: url(../imges/bracelets/classic%20cuff%2001.jpg) center;
    background-size: cover;
}

.classic_br > li:nth-child(2) a {
    background: url(../imges/bracelets/CLASSIC%20toggle%20bracelet.jpg) left bottom;
    background-size: cover;
}

.classic_br > li:nth-child(3) a {
    background: url(../imges/bracelets/classic%20ring%20bracelet.jpg) center;
    background-size: cover;
}


.classic_ear > li:nth-child(1) a {
    background: url(../imges/earrings/classic%20lady%20earring.jpg) center;
    background-size: cover;
}

.classic_baby > li:nth-child(1) a {
    background: url(../imges/baby/baby%20necklace.jpg) center;
    background-size: cover;
}

.classic_baby > li:nth-child(2) a {
    background: url(../imges/baby/baby%20bracelet.jpg) center;
    background-size: cover;
}


/*/////////////////////////////sec11////*/


.roman_ring > li:nth-child(1) a {
    background: url(../imges/rings/Roman%20Lace%20with%20Diamond.jpg) center;
    background-size: cover;
}

.roman_ring > li:nth-child(2) a {
    background: url(../imges/rings/Roman%20Lace.jpg) center;
    background-size: cover;
}

.roman_ring > li:nth-child(3) a {
    background: url(../imges/rings/Roman%20Love%203mm.jpg) center;
    background-size: cover;
}

.roman_ring > li:nth-child(4) a {
    background: url(../imges/rings/Roman%20Love%206mm.jpg) center;
    background-size: cover;
}

/*/////////////////////////////sec12////*/

.curve_ring > li:nth-child(1) a {
    background: url(../imges/rings/Curve%20Ring%2004.jpg) center;
    background-size: cover;
}

.curve_ring > li:nth-child(2) a {
    background: url(../imges/rings/Curve%20Ring%2006.jpg) center;
    background-size: cover;
}

.curve_ring > li:nth-child(3) a {
    background: url(../imges/rings/Curve%20Ring%2008.jpg) center;
    background-size: cover;
}

.curve_ring > li:nth-child(4) a {
    background: url(../imges/rings/HRM%2001%20Ring.jpg) center;
    background-size: cover;
}

.curve_ring > li:nth-child(5) a {
    background: url(../imges/rings/HRM%2006%20Ring.jpg) center;
    background-size: cover;
}

.curve_ring > li:nth-child(6) a {
    background: url(../imges/rings/HRM%2008%20Ring.jpg) center;
    background-size: cover;
}

.curve_nec > li:nth-child(1) a {
    background: url(../imges/necklaces/curve%20heart%20necklace.jpg) center;
    background-size: cover;
}

.curve_nec > li:nth-child(2) a {
    background: url(../imges/necklaces/curve%20love%20in%20us.jpg) center;
    background-size: cover;
}

.curve_nec > li:nth-child(3) a {
    background: url(../imges/necklaces/Curve%20Necklace%2006.jpg) center;
    background-size: cover;
}

.curve_nec > li:nth-child(4) a {
    background: url(../imges/necklaces/HRM%2004.jpg) center;
    background-size: cover;
}

.curve_nec > li:nth-child(5) a {
    background: url(../imges/necklaces/HRM%2009.jpg) center;
    background-size: cover;
}

.curve_nec > li:nth-child(6) a {
    background: url(../imges/necklaces/HRM%20Heart.jpg) center;
    background-size: cover;
}

.curve_br > li:nth-child(1) a {
    background: url(../imges/bracelets/Curve%20Bracelet%2001.jpg) center;
    background-size: cover;
}

.curve_br > li:nth-child(2) a {
    background: url(../imges/bracelets/Curve%20Bracelet%2002.jpg) center;
    background-size: cover;
}

.curve_br > li:nth-child(3) a {
    background: url(../imges/bracelets/Curve%20Bracelet%2003.jpg) center;
    background-size: cover;
}

/*/////////////////////////////sec13////*/

.simple_ring > li:nth-child(1) a {
    background: url(../imges/rings/Simple%20band.jpg) center;
    background-size: cover;
}

.simple_ring > li:nth-child(2) a {
    background: url(../imges/rings/Basics%20ring%2001.jpg) center;
    background-size: cover;
}


.simple_nec > li:nth-child(1) a {
    background: url(../imges/necklaces/simple%20chain%20necklace.jpg) center;
    background-size: cover;
}

.simple_nec > li:nth-child(2) a {
    background: url(../imges/necklaces/Sentence%20Necklace.jpg) center;
    background-size: cover;
}


.simple_br > li:nth-child(1) a {
    background: url(../imges/bracelets/simple%20chain%20bracelet.jpg) center;
    background-size: cover;
}


.simple_ear > li:nth-child(1) a {
    background: url(../imges/earrings/Basics%20ring%20earring.jpg) center;
    background-size: cover;
}

.simple_ear > li:nth-child(2) a {
    background: url(../imges/earrings/Basics%20ball%20earring%203mm.jpg) center;
    background-size: cover;
}

.simple_ear > li:nth-child(3) a {
    background: url(../imges/earrings/Basics%20ball%20earring%205mm.jpg) center;
    background-size: cover;
}

/*-------------product end*/

/*/////sec14  gnb-회원가입/로그인/마이페이지/장바구니목록*/
#sec14 {
    width: 100%;
}

#sec14 h4 {
    height: 45px;
    border-bottom: 1px solid #29353D;

}

.button input {
    cursor: pointer;
    font: 1.3rem 'Nanum Brush Script';
    width: 300px;
    background: #E9E6E1;
    color: #29353D;
    border: 1px solid #29353D;
    margin-bottom: 30px;
}

.button input:hover {
    background-color: rgba(41, 53, 61, 0.3);
}

/*join*/
#join {
    width: 100%;
    height: 50vh;
    padding-top: 100px;
    background: url(../imges/note/note3-1.jpg) center no-repeat;
    background-size: cover;
}

#join > div > div:first-child {
    margin-top: 30px;
}

/*login*/
#login {
    width: 100%;
    height: 50vh;
    font: 1.3rem 'Nanum Brush Script';
    padding-top: 100px;
}

#login > div {
    width: 80%;
    margin: 0 auto;
}

#login > div > div:first-child {
    margin-top: 30px;
}

#login a {
    color: #29353D;
    display: block;
    width: 100px;
}

.lo {
    cursor: text;
}

.find {
    width: 200px;
    margin: 0 auto;
}

.find li {
    border: 1px solid #29353D;
}

/*mypage*/
#mypage {
    width: 100%;
    height: 80vh;
    padding-top: 100px;
    background: url(../imges/note/at3-1.jpg) center no-repeat;
    background-size: cover;
}

#mypage > div {
    margin-top: 30px;
}


/*cart*/
#cart {
    width: 100%;
    height: 80vh;
    padding-top: 100px;
}

#cart li:hover {
    background: rgba(0, 0, 0, 0);
}

#cart a {
    display: block;
    width: 100%;
    height: 100%;
    color: #29353D;
}

#cart a:hover {
    background-color: rgba(41, 53, 61, 0.3);
}

#cart > div {
    width: 100%;
    margin-top: 30px;
}

#cart > div > ul {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#cart > div > ul > li:first-child {
    width: 100%;
    height: 150px;
    border: 1px solid #29353D;
    box-sizing: border-box;
    grid-column: span 2;
}

#cart > div > ul > li:nth-child(2) > div {
    width: 50%;
    border-bottom: 1px solid #29353D;
    display: inline-block;
}

#cart > div > ul > li:last-child {
    width: 100%;
    height: 50px;
    grid-column: span 2;
}


/*//---sec15--상세페이지*/

#sec15 {
    background: rgba(219, 201, 190, 0.3);
    width: 100%;
    color: #29353D;
    font-family: 'kbizmjo';
}

.sub_page {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.item_t {
    height: 30vh;
    border-bottom: 1px solid #29353D;
    position: relative;
    margin-top: 10px;
    font: 1.6rem 'Nanum Brush Script';
}

.item_t > ul {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.item_t > ul > li {
    width: 100%;
    min-height: 130px;
    margin: 0px auto;
}

.item_t > ul > li:nth-child(1) {
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 2px 2px 3px #29353D;
}

.item_t > ul > li:nth-child(1) a {
    display: block;
    width: 80%;
    height: 90%;
    background: url(../imges/sub/soulring_01.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.item_t li:hover {
    background-color: rgba(0, 0, 0, 0);
}

.item_option {
    width: 100%;

}

.item_option > ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}

.item_option a {
    color: #29353D;
}

.item_option select {
    width: 100px;
    border: 0;
    border-bottom: 1px solid #29353D;
    background: rgba(233, 230, 225, 0);
    text-align: center;
    font: 1rem 'kbizmjo';
}


.item_option > ul > li {
    width: 100%;
}

.item_option > ul > li:nth-child(1) {

    grid-column: span 3;
    margin-bottom: 15px;
}

.item_option > ul > li:nth-child(2) {
    grid-column: span 3;
    margin-bottom: 10px;
    font: 0.9rem 'Nanum Myeongjo';
}

.item_option > ul > li:nth-child(3) {
    grid-column: span 3;
    margin-bottom: 10px;
    font: 0.9rem 'Nanum Myeongjo';
}

.item_option > ul > li:nth-child(4) {
    grid-column: span 3;
    margin-bottom: 10px;
    font: 0.9rem 'Nanum Myeongjo';
}

.item_option > ul > li:nth-child(5) {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.item_option > ul > li:nth-child(5) a {
    display: block;
    float: left;
    width: 25px;
    margin-left: 15px;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.item_option > ul > li:nth-child(5) a:nth-child(1) {
    grid-column: 2;
}

.item_option > ul > li:nth-child(5) img {
    width: 100%;
}


.item_m {
    width: 100%;
    clear: both;
    border-bottom: 1px solid #29353D;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    line-height: 2rem;
}

.item_m > div {
    margin-bottom: 50px;
}

.item_m > div:nth-child(1) {
    margin-top: 50px;
    max-height: 800px;
    background: rgba(255, 255, 255, 0.8);
    grid-column: 2 / span 6;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

.p01 {
    width: 90%;
    height: 40%;
    background: url(../imges/sub/soulring_02.jpg) center;
    background-size: cover;
    position: relative;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.p01_sub {
    width: 90%;
    line-height: 1.6rem;
    position: relative;
    top: 8%;
    left: 50%;
    transform: translate(-50%, -5%);
}

.p02 {
    writing-mode: tb-rl;
    font: 3rem 'Nanum Brush Script';
    color: #29353D;
    position: relative;
    top: 0%;
    left: 125%;
    transform: translate(-125%, -20%);
    z-index: 5;
}


.item_m > div:nth-child(2) {
    min-height: 600px;
    background: rgba(219, 201, 190, 0.8);
    grid-column: 4/span 4;
    margin-top: 120px;
    position: relative;
}

.p03 {
    width: 100%;
    min-height: 500px;
    background: url(../imges/sub/soulring_05.jpg) center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.p03_sub {
    padding: 10px;
    position: relative;
    top: 100%;
    left: 0%;
    transform: translate(-70%, -100%);
    line-height: 1.7rem;
}

.item_m > div:nth-child(3) {
    min-height: 200px;
    background: url(../imges/sub/soulring_04.jpg) center;
    background-size: cover;
    grid-column: 1 / span 6;
}

.item_m > div:nth-child(4) {
    min-height: 400px;
    background: rgba(219, 201, 190, 0.8);
    grid-column: 3/span 5;
    margin-top: 25px;
    position: relative;
}

.p04 {
    width: 100%;
    min-height: 400px;
    background: url(../imges/sub/soulring_06.jpg) center;
    background-size: cover;
    position: absolute;
    top: 40%;
    right: 0;
    transform: translate(20%, -50%);
}


.box {
    width: 100%;
    min-height: 250px;
    grid-column: 2 / span 6;
    background: #fff;
    box-shadow: 2px 2px 3px #29353D;
    margin-top: 80px;
    position: relative;

}

.t01 {
    width: 80px;
    z-index: 1;
    position: absolute;
    top: 0%;
    left: 45%;
    transform: translateY(-50%);
    transform: rotate(-45deg);
}

.box p {
    position: relative;
    top: 0;
}

.box_img {
    width: 200px;
    height: 200px;
    margin: 10px auto;
    position: relative;
    top: 30px;
}

.box_text {
    position: relative;
    top: 20px;
    padding: 10px;
    margin-bottom: 20px;
    font: 0.8rem/1.5rem 'kbizmjo';
}

.box_img01 {
    background: url(../imges/sub/soulring_01.jpg) center;
    background-size: cover;
}

.box_img02 {
    background: url(../imges/sub/soulring_03.jpg) center;
    background-size: cover;
}

.box_img03 {
    background: url(../imges/sub/note.jpg) center;
    background-size: cover;
}

.item_b > h4 {
    text-align: left;
    padding-left: 20px;
    font: 1rem 'Nanum Myeongjo';
}

.item_b > ul > li {
    background: #fff;
    box-shadow: 2px 2px 3px #29353D;
    max-width: 100%;
    min-height: 250px;
}

.item_b > ul > li > a {
    display: block;
    width: 90%;
    height: 75%;
    margin: 10px auto;
}

.item_b > ul > li > a > p {
    font: 1rem/15px 'Nanum Myeongjo';
    color: #29353D;
    position: relative;
    top: 123%;
    left: 50%;
    transform: translate(-50%, -123%);
}

.item_b > ul > li:nth-child(1) a {
    background: url(../imges/rings/raindrop%20angle%20ring.jpg) center;
    background-size: cover;
}

.item_b > ul > li:nth-child(2) a {
    background: url(../imges/rings/raindrop%20big%20round%20ring.jpg) center;
    background-size: cover;
}

.item_b > ul > li:nth-child(3) {
    display: none;
}

.item_b > ul > li:nth-child(3) a {
    background: url(../imges/rings/raindrop%20first%20ring.jpg) center;
    background-size: cover;
}

.item_b > ul > li:nth-child(4) {
    display: none;
}

.item_b > ul > li:nth-child(4) a {
    background: url(../imges/rings/raindrop%20more%20ring.jpg) center;
    background-size: cover;
}

.item_b > ul > li:nth-child(5) {
    display: none;
}

.item_b > ul > li:nth-child(5) a {
    background: url(../imges/rings/raindrop%20soul%20ring.jpg) center;
    background-size: cover;
}

.item_b > ul > li:nth-child(6) {
    display: none;
}

.item_b > ul > li:nth-child(6) a {
    background: url(../imges/rings/raindrop%20A-ring%2010mm.jpg) center;
    background-size: cover;
}




/*/////nav//////*/
/*/////하단nav//////*/


.fnb {
    background: rgba(219, 201, 190, 0.8);
    height: 45px;
    position: sticky;
    bottom: 0;
    font: 1rem/45px 'Nanum Myeongjo';
}

.fnb > ul > li {
    float: left;
    width: calc((100% - 10px) / 6);
    height: 100%;
    margin: 0 auto;
}

.fnb h5 {
    display: none;
    line-height: 30px;
}

.fnb > ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
}

.fnb > ul > li:nth-child(1) > a {
    background: url(../imges/icon/icon_fnb_01.png) center no-repeat;
    background-size: 35%;
}

.fnb > ul > li:nth-child(2) > a {
    background: url(../imges/icon/icon_fnb_02.png) center no-repeat;
    background-size: 35%;
}

.fnb > ul > li:nth-child(3) > a {
    background: url(../imges/icon/icon_fnb_03.png) center no-repeat;
    background-size: 35%;
}

.fnb > ul > li:nth-child(4) > a {
    background: url(../imges/icon/icon_fnb_04.png) center no-repeat;
    background-size: 35%;
}

.fnb > ul > li:nth-child(5) > a {
    background: url(../imges/icon/icon_fnb_05.png) center no-repeat;
    background-size: 35%;
}

.fnb > ul > li:nth-child(6) > a {
    background: url(../imges/icon/icon_fnb_06.png) center no-repeat;
    background-size: 35%;
}

.fnb > ul > li:hover {
    background: rgba(196, 174, 158, 0.3);
}

.fnb > ul > li:hover ul {
    width: calc((100% - 10px) / 6);
    height: initial;
    bottom: 100%;
}


.sub2 {
    position: absolute;
}

/*//////footer//////////*/
#footer {
    width: 100%;
    height: 150px;
    border-top: 1px solid #29353D;
    background: #E9E6E1;
    font: .7rem 'Nanum Myeongjo';
    color: #29353D;
    padding-top: 10px;
}

#footer a {
    color: #29353D;
}

#footer > ul {
    width: 95%;
    height: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 80px 1fr 40px;
}

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

#footer > ul > li:nth-child(1) a {
    background: url(../imges/etc/sqt_logo.png) center no-repeat;
    background-size: 100%;
}

address {
    padding-bottom: 7px;
    line-height: 20px;
}

address > h6 {
    font: 1.3rem/2rem 'Nanum brush Script';
}

small {
    width: 95%;
    height: 20px;
}

#footer > ul > li:nth-child(3) a:nth-child(1) {
    height: 40px;
    background: url(../imges/icon/icon_blog.png) center no-repeat;
    background-size: 100%;
}

#footer > ul > li:nth-child(3) a:nth-child(2) {
    height: 40px;
    background: url(../imges/icon/icon_in.png) center no-repeat;
    background-size: 100%;
}

#footer > ul > li:nth-child(3) a:nth-child(3) {
    height: 40px;
    background: url(../imges/icon/icon_yt.png) center no-repeat;
    background-size: 100%;
}



/*///////////*/
/*미디어쿼리*/
/*태블릿*/
@media all and (min-width:768px) {

    #lnb00,
    #lnb01 {
        display: none;
    }

    #lnb {
        width: 100%;
    }

    #lnb > ul > li {
        width: calc(100% / 7);
        height: 100%;
        float: left;
    }

    #lnb > ul > li > a {
        width: 100%;
        height: 100%;
    }

    #lnb > ul > li:nth-child(1) {
        opacity: 1;
        height: 45px;
        line-height: 45px;
        display: block;
    }

    #lnb > ul > li:nth-child(2) {
        display: block;
    }


    #lnb > ul > li:last-child {
        display: block;
    }


    #pc_home {
        background: url(../imges/icon/icon_home.png) center no-repeat;
        background-size: 30%;
    }

    #sec1 > ul {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    #sec1 > ul > li {
        min-height: 250px;
    }

    #sec1 > ul > li:nth-child(1) {
        grid-column: span 8;
        grid-row: span 1;
    }

    #sec1 > ul > li:nth-child(1) h5 {
        transform: translate(30%, 10%);
    }

    #sec1 > ul > li:nth-child(2) {
        grid-column: span 4;
    }

    #sec1 > ul > li:nth-child(2) h5 {
        transform: translate(-10%, -90%);
    }

    #sec1 > ul > li:nth-child(3) {
        grid-column: span 4;
    }

    #sec1 > ul > li:nth-child(3) h5 {
        writing-mode: tb-rl;
        transform: translate(-30%, -90%);
    }

    #sec1 > ul > li:nth-child(4) {
        grid-column: span 4;
    }

    #sec1 > ul > li:nth-child(4) h5 {
        writing-mode: tb-rl;
        transform: translate(-20%, -100%);
    }


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

    #sec1 > ul > li:nth-child(5) h5 {
        writing-mode: tb-rl;
        transform: translate(-20%, -100%);
    }

    #sec2 > ul {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #sec2 > ul > li:nth-child(1) {
        grid-column: span 1;
    }

    #sec2 > ul > li:nth-child(2) {
        grid-column: span 1;

    }

    #sec2 > ul > li:nth-child(3) {
        grid-column: span 1;

    }

    .sqt {
        background: url(../imges/etc/logo_bg.png) center no-repeat;
        background-size: 70%;
    }


    .m_slide {
        height: 150px;
        overflow: hidden;
    }

    .product ul {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .product > ul li {
        min-height: 250px;
    }


    .ring_square > li {
        grid-column: 2;
    }

    .ring_roman > li:nth-child(4) {
        grid-column: 2;
    }

    .br_square > li {
        grid-column: 2;
    }

    .br_classic > li:nth-child(4) {
        grid-column: 2;
    }

    .ear_drop > li {
        grid-column: 2;
    }

    .ear_classic > li {
        grid-column: 2;
    }


    .baby_nec > li:nth-child(4) {
        grid-column: 2;
    }

    .baby_br > li {
        grid-column: 2;
    }

    .drop_ear > li {
        grid-column: 2;
    }

    .square_ring > li {
        grid-column: 2;
    }

    .square_br > li {
        grid-column: 2;
    }

    .classic_ear > li {
        grid-column: 2;
    }

    .simple_br > li {
        grid-column: 2;
    }

    .item_t {
        height: 40vh;
        margin-top: 30px;

    }

    .item_t > ul {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .item_t > ul > li:nth-child(1) {
        height: 300px;
        margin-left: 40px;
    }

    .item_t > ul > li:nth-child(1) a {
        background-size: cover;
    }


    .item_option > ul {
        display: grid;
        grid-template-columns: 1fr;
    }

    .item_option > ul > li {
        line-height: 30px;
        font: 1.8rem 'Nanum Brush Script';
    }

    .item_option > ul > li:nth-child(1) {
        margin-top: 20px;

    }

    .item_option > ul > li:nth-child(5) {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .item_option > ul > li:nth-child(5) a {
        display: block;
        float: left;
        width: 25px;
        margin-left: 15px;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .item_option > ul > li:nth-child(5) a:nth-child(1) {
        grid-column: 3;
    }


    .item_m {
        width: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .item_m > div:nth-child(1) {
        height: 550px;
        grid-column: 2 / span 8;
    }

    .p01 {
        width: 90%;
        height: 60%;
        position: relative;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
    }

    .p01_sub {
        padding-top: 20px;
    }

    .p02 {
        font: 4rem 'Nanum Brush Script';
        position: relative;
        top: 0%;
        right: 0;
        transform: translate(-100%, -20%);
        z-index: 5;
    }


    .item_m > div:nth-child(2) {
        grid-column: 8/span 4;
        margin-top: 200px;
    }

    .p03 {
        width: 100%;
        min-height: 500px;
        background: url(../imges/sub/soulring_05.jpg) center no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    .p03_sub {
        position: relative;
        top: 100%;
        left: 0%;
        transform: translate(-150%, -100%);
    }

    .item_m > div:nth-child(3) {
        grid-column: 1 / span 9;
        min-height: 500px;
    }

    .item_m > div:nth-child(4) {
        grid-column: 4/span 8;
        min-height: 700px;
        margin-top: 120px;
    }

    .p04 {
        width: 100%;
        min-height: 700px;
        position: absolute;
        top: 40%;
        right: 0;
        transform: translate(12%, -50%);
    }

    .box {
        grid-column: 2/span 10;
        min-height: 350px;
    }

    .item_b > ul {
        width: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .item_b > h4 {
        text-align: center;
        margin-bottom: 15px;
        font: 1rem 'Nanum Myeongjo';
    }

    .item_b > ul > li:nth-child(3) {
        display: block;
    }


    .item_b > ul > li:nth-child(4) {
        display: block;
    }



    .fnb h5 {
        display: block;
        line-height: 45px;
    }

    .fnb > ul > li:nth-child(1) > a {
        background: url(../imges/icon/icon_fnb_01.png) left no-repeat;
        background-size: 20%;
    }

    .fnb > ul > li:nth-child(2) > a {
        background: url(../imges/icon/icon_fnb_02.png) left no-repeat;
        background-size: 20%;
    }

    .fnb > ul > li:nth-child(3) > a {
        background: url(../imges/icon/icon_fnb_03.png) left no-repeat;
        background-size: 20%;
    }

    .fnb > ul > li:nth-child(4) > a {
        background: url(../imges/icon/icon_fnb_04.png) left no-repeat;
        background-size: 20%;
    }

    .fnb > ul > li:nth-child(5) > a {
        background: url(../imges/icon/icon_fnb_05.png) left no-repeat;
        background-size: 20%;
    }

    .fnb > ul > li:nth-child(6) > a {
        background: url(../imges/icon/icon_fnb_06.png) left no-repeat;
        background-size: 20%;
    }

    address {
        margin-top: 20px;
    }

}









/*pc*/
@media all and (min-width:1024px) {
    #header {
        position: relative;
    }

    #gnb {
        display: block;
        width: 1000px;
        margin: 0 auto;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    #gnb > ul {
        float: right;
    }

    #gnb > ul > li {
        float: left;
    }

    #gnb > ul > li > a {
        display: block;
        width: 50px;
        height: 30px;
    }

    #gnb > ul > li:nth-child(1) > a {
        background: url(../imges/icon/icon_gnb01.png) center no-repeat;
        background-size: contain;
    }

    #gnb > ul > li:nth-child(2) > a {
        background: url(../imges/icon/icon_gnb02.png) center no-repeat;
        background-size: contain;
    }

    #gnb > ul > li:nth-child(3) > a {
        background: url(../imges/icon/icon_gnb03.png) center no-repeat;
        background-size: contain;
    }

    #gnb > ul > li:nth-child(4) > a {
        background: url(../imges/icon/icon_gnb04.png) center no-repeat;
        background-size: contain;
    }

    nav .sub,
    nav .sub2 {
        height: 0;
        overflow: hidden;
        opacity: 0;
        background: rgba(217, 210, 204, 0.3);
        font: 1.2rem/1.5rem 'Nanum pen Script';
    }

    nav li:hover .sub,
    nav li:hover .sub2 {
        height: 0;
        overflow: hidden;
        opacity: 0;
        z-index: 1;
        transition: all 0.6s ease-in-out;
    }


    .fnb {
        display: none;
    }

    .lnb2 {
        display: block;
        background: rgba(219, 201, 190, 0.8);
        height: 30px;
        position: sticky;
        top: 45px;
        font: 1rem/5vh 'Nanum Myeongjo';
    }

    .lnb2 > ul > li {
        float: left;
        width: calc((100% - 10px) / 6);
        height: 100%;
        margin: 0 auto;
    }

    .lnb2 > ul > li:hover {
        background: rgba(196, 174, 158, 0.3);
    }

    .lnb2 h5 {
        display: block;
        line-height: 30px;
    }

    .lnb2 > ul > li > a {
        display: block;
        width: 100%;
        height: 100%;
    }


    .lnb2 > ul > li:hover ul {
        width: calc((100% - 10px) / 6);
        height: initial;
        bottom: 100%;
    }


    .lnb2 > ul > li:nth-child(1) > a {
        background: url(../imges/icon/icon_fnb_01.png) left no-repeat;
        background-size: 15%;
    }

    .lnb2 > ul > li:nth-child(2) > a {
        background: url(../imges/icon/icon_fnb_02.png) left no-repeat;
        background-size: 15%;
    }

    .lnb2 > ul > li:nth-child(3) > a {
        background: url(../imges/icon/icon_fnb_03.png) left no-repeat;
        background-size: 15%;
    }

    .lnb2 > ul > li:nth-child(4) > a {
        background: url(../imges/icon/icon_fnb_04.png) left no-repeat;
        background-size: 15%;
    }

    .lnb2 > ul > li:nth-child(5) > a {
        background: url(../imges/icon/icon_fnb_05.png) left no-repeat;
        background-size: 15%;
    }

    .lnb2 > ul > li:nth-child(6) > a {
        background: url(../imges/icon/icon_fnb_06.png) left no-repeat;
        background-size: 15%;
    }

    .lnb2_sub > li > a {
        display: block;
        width: calc((100% - 10px) / 6);
        height: 150px;
    }


    #contentwrap {
        max-width: 1110px;
        margin: 45px auto 0 auto;
    }

    #sec1 > ul > li {
        min-height: 300px;
    }

    #sec1 > ul > li:nth-child(1) {
        grid-column: span 6;
    }

    #sec1 > ul > li:nth-child(2) {
        grid-column: span 6;
    }

    #sec1 > ul > li:nth-child(2) h5 {
        writing-mode: tb-rl;
        transform: translate(10%, -90%);
    }

    #sec1 > ul > li:nth-child(3) {
        grid-column: span 4;
    }

    #sec1 > ul > li:nth-child(3) h5 {
        writing-mode: tb-rl;
        transform: translate(-10%, -80%);
    }

    #sec1 > ul > li:nth-child(4) {
        grid-column: span 4;
    }

    #sec1 > ul > li:nth-child(4) h5 {
        writing-mode: tb-rl;
        transform: translate(-10%, -80%);
    }

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

    #sec1 > ul > li:nth-child(5) h5 {
        writing-mode: tb-rl;
        transform: translate(-10%, -80%);
    }

    #sec2 > ul {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }


    #sec2 > ul > li:nth-child(1) {
        grid-column: 2;
        grid-row: 1;
    }

    #sec2 > ul > li:nth-child(2) {
        grid-column: 4;
        grid-row: 1;

    }

    #sec2 > ul > li:nth-child(3) {
        grid-column: 1;
        grid-row: 1;

    }

    #sec2 > ul > li:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
    }

    #sec2 > ul > li:nth-child(5) {
        display: block;
        grid-row: 1;
    }

    #sec2 > ul > li:nth-child(6) {
        display: block;
        grid-row: 1;
    }

    
    #info {
    font: 1.1rem/2rem 'kbizmjo';
}
    
    .about h3 {
        text-align: right;
        line-height: 3rem;
        padding-right: 50px;
    }

    
    .sqt {
        background: url(../imges/etc/logo_bg.png) center no-repeat;
        background-size: 50%;
        text-align: right;
        padding-right: 50px;
    }

    .sqt > p {
        text-align: right;
    }

    .atelier {
        text-align: right;
        padding-right: 50px;
        background-size: 120%;
    }

    .atelier h3 {
        padding-right: 50px;
    }

    .open {
        text-align: right;
        padding-right: 50px;
        background-size: 100%;
    }

    .open h3 {
        padding-right: 50px;
    }

    .open h4 {
        margin-top: 30px;
        font: 1.2rem 'Nanum Myeongjo';
        text-align: right;
    }

    .open > p {
        padding-right: 50px;
        text-align: right;
    }

    .open > img {
        width: 50%;
    }

    .guide {
        text-align: right;
        padding-right: 50px;
    }

    .guide > div {
        margin-bottom: 20px;
    }

    .guide > div > h5 {
        font: 1.8rem/2rem 'Nanum Brush Script';
        text-align: right;
        padding-top: 50px;
        padding-bottom: 30px;
    }

    #guide0 {
        width: 100%;
        text-align: right;
        padding-right: 50px;
    }

    #guide0 h5 {
        padding-right: 50px;
    }

    #gauge0 {
        width: 100%;
        text-align: right;
        padding-right: 50px;
    }

    #gauge0 h5 {
        padding-right: 50px;
    }

    #card0 {
        width: 100%;
        text-align: right;
        padding-right: 50px;
    }

    #card0 h5 {
        padding-right: 50px;
    }

    #as0 {
        width: 100%;
        text-align: right;
        padding-right: 50px;
    }

    #as0 p {
        text-align: right;
        padding-right: 50px;
    }

    #as0 h5 {
        padding-right: 50px;
    }

    .product > ul > li {
        min-height: 320px;
    }

    .product > ul > li > a {

        margin: 15px auto;
    }

    .product p {
        transform: translateY(35px);
    }

    .item_t {
        font: 1.8rem 'Nanum Brush Script';
    }

    .item_option select {
        font: 1rem 'kbizmjo';
    }


    .item_option > ul > li:nth-child(2) {
        font: 1rem 'Nanum Myeongjo';
    }

    .item_option > ul > li:nth-child(3) {
        font: 1rem 'Nanum Myeongjo';
    }

    .item_option > ul > li:nth-child(4) {
        font: 1rem 'Nanum Myeongjo';
    }

    .p01_sub {
        padding-top: 0px;
        font: 1.1rem/2rem 'kbizmjo';
        position: relative;
        top: 5%;
        left: 50%;
        transform: translate(-50%, -5%);
    }

    .p02 {
        font: 5rem 'Nanum Brush Script';
        position: relative;
        top: 0%;
        left: 127%;
        transform: translate(-127%, -0%);
        z-index: 5;
    }

    .item_m > div:nth-child(2) {
        grid-column: 8/span 4;
        margin-top: 400px;
    }

    .p03_sub {
        font: 1.1rem/2rem 'kbizmjo';
    }

    .box_text {
        font: 1rem/1.8rem 'kbizmjo';
    }

    .item_b > h4 {
        font: 1.2rem 'Nanum Myeongjo';
    }

    .item_b > ul {
        width: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .item_b > ul > li > a > p {
        position: relative;
        top: 123%;
        left: 50%;
        transform: translate(-50%, -123%);
    }

    .item_b > ul > li:nth-child(5) {
        display: block;
    }


    .item_b > ul > li:nth-child(6) {
        display: block;
    }


    #footer > ul {
        max-width: 1000px;
    }

    address {
        margin-top: 30px;
    }
}