/* SECTION */

section {
    margin-top: 20vw;
    border-bottom: 1px solid var(--black);
    overflow: hidden;
    margin-top: 3.5vw;
}
@media screen and (max-width:1440px) {
  section {
    margin-top: 5vw;
  }
}
@media screen and (max-width:1000px) {
  section {
    margin-top: 15vw;
  }
}


section #mainimg {
    position: relative;
    padding: 20vw;
    border-bottom: 1px solid var(--black);
}

section #mainimg img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

section #descript {}

section #descript #above {
    padding: 5vw 5vw 0;
}

section #descript #above #h3 span {
    font-size: 4.2vw;
}

section #descript #above #h3 {
    display: flex;
    flex-direction: column;
    margin-bottom: 5vw;
}

section #descript #above #h3 h3+h3 {
    margin-bottom: 2vw;
}

section #descript #above #h3 h3+span {
    margin-bottom: 2vw;
}

section #descript .more {
    margin-bottom: 2vw;
}

section #descript .more+div {
    border-bottom: 1px solid var(--gray);
    padding-bottom: 5vw;
    margin: 0;
}

section #descript .more span {
    font-size: 3.5vw;
    font-family: 'Pretendard';
    font-weight: 500;
    text-decoration: underline;
    text-underline-position: under;
}

section #descript .more p {
  font-weight: 300;
    font-size: 2.8vw;
    margin-top: 1vw;
}

section #btns {
    text-align: center;
    padding: 0 3vw 3vw;
    font-size: 2.8vw;
    overflow: hidden;
}

section #btns div {
    padding: 2vw;
    border-radius: 2vw;
    width: 46%;
    float: left;
    margin: 2%;
    border: 1px solid var(--black);
}

section #btns #addc {
    background-color: var(--black);
    color: var(--white);
}

section #btns #addw {
    background-color: var(--primary-color);
}





/* DETAIL */
div#detail {
    overflow: hidden;
}

div#detail div #h2 {
    margin-bottom: 2vw;
}

div#detail div p {
    text-align: center;
    font-size: 3.5vw;
}

div#detail #btmimg {
    padding: 10vw 15vw 0;
    overflow: hidden;
    margin-bottom: -1vw;
}

div#detail #detailimg {
  background-color: var(--detailbg);
}
div#detail #detailimg img {
  width: 50%;
  display: block;
  margin: 0 auto;
}



/* RECCOMMEND*/
div#reco {
    border-top: 1px solid var(--black);
    overflow: hidden;
}

div#reco>div {
    width: 50%;
    float: left;
    overflow: hidden;
    height: 50vw;
    position: relative;
}

div#reco #perfumes {
    border-right: 1px solid var(--black);
}

div#reco #handcreams {}

div#reco .recotxt {
    position: absolute;
    bottom: 1vw;
    right: 2vw;
    border-bottom: 1px solid var(--black);
}

div#reco .recotxt span {
    float: left;
}

div#reco .recotxt span:first-child {
    font-family: "Rubik Mono One", monospace;
    font-size: 2.5vw;
}

div#reco .recotxt .material-symbols-outlined {
    font-weight: 400;
    font-size: 4vw;
    display: block;
    margin-top: -.7vw;
}


@media screen and (max-width:768px) {
  div#detail #detailimg img {
    width: 100%;
  }
}