@charset "UTF-8";
#shopMiddle.prodcat {
  padding-right: 90px;
}
@media screen and (max-width: 480px) {
  #shopMiddle.prodcat {
    padding-right: 20px;
  }
}
#shopMiddle.prodcat .prodcatInfo {
  margin-bottom: 40px;
  text-align: center;
}
#shopMiddle.prodcat .prodcatInfo h2 {
  display: inline-block;
  font-size: 36px;
  font-weight: 500;
  color: #000;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
}
#shopMiddle.prodcat .prodcatInfo .subCategory {
  font-size: 32px;
  font-weight: 400;
  color: #666;
}
#shopMiddle.prodcat .prodcatInfo .prodDescription {
  padding: 10px;
  margin-bottom: 20px;
}

#ContentArea {
  margin-bottom: 100px;
}
@media screen and (max-width: 480px) {
  #ContentArea {
    margin-bottom: 0;
  }
}

.heading-prodName {
  font-size: 28px;
  font-weight: 500;
  padding-top: 10px;
  margin-bottom: 20px;
  text-align: center;
}
.heading-prodName .desc {
  font-size: 14px;
  font-weight: 400;
}

.prodGrpListBox {
  margin-bottom: 150px;
}
@media screen and (max-width: 480px) {
  .prodGrpListBox {
    margin-bottom: 80px;
  }
}

.basicBox {
  margin-bottom: 50px;
}
.basicBox > h3 {
  font-size: 3.8rem;
  color: #000;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .basicBox > h3 {
    font-size: 28px;
  }
}
.basicBox > h3 + .subCopy {
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.3;
  color: #666;
  margin-bottom: 3rem;
  letter-spacing: -1px;
}
.basicBox .viewAllLink {
  padding: 5px 0;
  text-align: right;
  display: none;
}
.basicBox .viewAllLink .viewAll {
  height: auto;
  padding: 5px 10px;
  line-height: 1;
}

#BarNotice {
  display: none;
}

.ProductB {
  margin-bottom: 30px;
}
.ProductBList li {
  text-align: center;
}
.ProductB .bx-wrapper {
  height: 354px !important;
}
.ProductB .bx-wrapper .bx-controls {
  position: relative;
  bottom: 10px;
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: right;
  line-height: 1;
  z-index: 51;
}
.ProductB .bx-wrapper .bx-controls .bx-pager {
  display: inline-block;
  margin-right: 10px;
  font-size: 0;
  letter-spacing: 0;
  vertical-align: middle;
}
.ProductB .bx-wrapper .bx-controls .bx-pager .bx-pager-item {
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
.ProductB .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #DDD;
  border-radius: 5px;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0;
  text-indent: -4000px;
  overflow: hidden;
}
.ProductB .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active {
  width: 30px;
  background: #000;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-auto {
  display: inline-block;
  font-size: 0;
  letter-spacing: 0;
  vertical-align: middle;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-auto-item {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  font-size: 10px;
  line-height: 0;
  letter-spacing: 0;
  text-align: center;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-auto-item a {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  color: #CCC;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-auto-item a.active {
  color: #333;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-auto-item .bx-start {
  display: inline-block;
  background: url("/skopi/images/common/ico/ico-play.svg") no-repeat 50% 50%/contain;
  opacity: 1;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-auto-item .bx-stop {
  display: inline-block;
  background: url("/skopi/images/common/ico/ico-stop.svg") no-repeat 50% 50%/contain;
  opacity: 1;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-auto-item .bx-start.active,
.ProductB .bx-wrapper .bx-controls .bx-controls-auto-item .bx-stop.active {
  opacity: 0.2;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction {
  display: none;
  width: 0;
  height: 0;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction a {
  position: absolute;
  top: 50%;
  display: block;
  width: 40px;
  height: 40px;
  text-align: left;
  text-indent: -9000px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction .bx-prev {
  left: 10px;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction .bx-next {
  right: 10px;
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction .bx-prev:before {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #333;
  content: "";
  -webkit-transform: rotate(-45deg) translateY(-10px);
  transform: rotate(-45deg) translateY(-10px);
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction .bx-prev:after {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #333;
  content: "";
  -webkit-transform: rotate(-135deg) translateY(-10px);
  transform: rotate(-135deg) translateY(-10px);
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction .bx-next:before {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #333;
  content: "";
  transform: rotate(45deg) translateY(-10px);
  transform: rotate(45deg) translateY(-10px);
}
.ProductB .bx-wrapper .bx-controls .bx-controls-direction .bx-next:after {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #333;
  content: "";
  transform: rotate(-45deg) translateY(-10px);
  transform: rotate(-45deg) translateY(-10px);
}
.ProductB .bx-viewport {
  height: 354px !important;
}
.ProductB .bx-viewport > ul > li > img {
  width: 100%;
}

.skinCategory {
  text-align: center;
}
.skinCategory_container {
  margin-bottom: 40px;
}
.skinCategory > li {
  display: inline-block;
  padding: 3px 10px;
  height: 40px;
  line-height: 34px;
}
.skinCategory > li.all {
  position: relative;
  margin-right: 10px;
}
.skinCategory > li.all a {
  display: inline-block;
  margin-right: 10px;
  color: #F60;
}
.skinCategory > li.all::after {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 15px;
  border: 1px solid #CCC;
  content: "";
  transform: translateY(-50%);
}
.skinCategory > li.on {
  background-color: #000;
  border-radius: 20px;
  padding: 3px;
}
.skinCategory > li.on > a {
  display: inline-block;
  padding: 0 15px;
  color: #FFF;
}
.skinCategory > li.on .skinCategory_sub {
  background-color: #FFF;
  border-radius: 18px;
}
.skinCategory > li a {
  font-weight: bold;
}
.skinCategory_sub {
  display: inline-block;
  height: 34px;
}
.skinCategory_sub li {
  display: inline-block;
  padding: 0 10px;
}
.skinCategory_sub li.on a {
  font-weight: 700;
  color: #F60;
}
.skinCategory_sub li a {
  font-weight: normal;
}

.prodGrpList {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 100%;
  font-size: 0;
  line-height: 0;
}
@media screen and (max-width: 1024px) {
  .prodGrpList {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 720px) {
  .prodGrpList {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
.prodGrpList li {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1.2;
  vertical-align: top;
}
.prodGrpList .imgview {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #FAFAFA;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35);
  font-size: 0;
  overflow: hidden;
}
.prodGrpList .imgview a {
  display: block;
  min-height: 40px;
}
.prodGrpList .imgview img {
  width: initial;
  max-width: 100%;
}
.prodGrpList .infoview {
  text-align: center;
}
.prodGrpList .infoview .prodName {
  font-weight: 500;
  color: #000;
}
.prodGrpList .infoview .deliveryFree,
.prodGrpList .infoview .meshSale {
  display: inline-block;
  padding: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #FFF;
  background: #FF8A00;
  vertical-align: bottom;
  border-radius: 5px;
}

.prodInfo__container .tabContents {
  padding-top: 10rem;
}
.prodInfo__tab {
  position: relative;
  display: table;
  width: 70px;
  padding: 5px;
  z-index: 1;
}
.prodInfo__tab_box {
  position: fixed;
  top: 210px;
  right: 10px;
  background: #ffa933;
  border-radius: 40px;
  transition: top 0.3s ease-out;
}
@media screen and (max-width: 480px) {
  .prodInfo__tab_box {
    display: none;
  }
}
.prodInfo__tab li {
  display: table-row;
  padding: 0;
  width: 60px;
  height: 60px;
  text-align: center;
}
.prodInfo__tab li a {
  display: table-cell;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: #FFF;
  vertical-align: middle;
}
.prodInfo__tab li.on a {
  font-weight: 700;
  color: #333;
}
.prodInfo__back {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  content: "";
  background: #FFF;
  transition: top 0.3s ease-out;
  z-index: 0;
}

.productWrap {
  padding: 3px 1px;
  margin-bottom: 10rem;
}

section.prodDetail {
  margin-bottom: 80px;
}
section.prodDetail .basicBox {
  margin-bottom: 0;
}
section .prodDetail_option dl, section .prodDetail_delivery dl {
  display: flex;
  flex-wrap: wrap;
}
section .prodDetail_option dl.process, section .prodDetail_delivery dl.process {
  margin-top: 6rem;
}
section .prodDetail_option dt, section .prodDetail_delivery dt {
  flex: 0 0 15rem;
  position: relative;
  padding: 10px 15px;
  font-weight: 700;
  color: #9d9583;
}
section .prodDetail_option dt:after, section .prodDetail_delivery dt:after {
  position: absolute;
  content: "";
  top: 10px;
  right: 0;
  bottom: 0;
  width: 0;
  border-right: 1px solid #CCC;
}
section .prodDetail_option dd, section .prodDetail_delivery dd {
  flex: 0 0 calc(100% - 15rem);
  position: relative;
  padding: 10px 15px;
}
section .description {
  padding: 0 20px 20px;
}
section .description .title {
  font-size: 20px;
  font-weight: 700;
}

.themeList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
@media screen and (max-width: 1024px) {
  .themeList {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media screen and (max-width: 720px) {
  .themeList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .themeList {
    grid-template-columns: repeat(2, 1fr);
  }
}
.themeList li .midThumb {
  margin-bottom: 10px;
}
.themeList li .midThumb img {
  width: 100%;
}
.themeList li .sel {
  display: block;
  font-size: 1.6rem;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .themeList li .sel {
    font-size: 14px;
  }
  .themeList li .sel .jq-radio,
  .themeList li .sel input[type=radio] {
    display: none !important;
  }
  .themeList li .sel .jq-radio + label {
    margin-right: 5px;
  }
}
.themeList .view_sample {
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 2;
  min-width: 0;
  background: #AAA;
}

/* 주문옵션 */
.orderOption {
  position: fixed;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding: 0;
  border-top: 2px solid #E8132C;
  background: #F9F9F9;
  transition: height 0.3s ease-out;
  z-index: 999;
}
@media screen and (max-width: 480px) {
  .orderOption {
    display: none;
  }
}
.orderOption .optionTitle {
  position: absolute;
  top: 0;
  left: -4000px;
  max-width: 1280px;
  margin: 0 auto 1rem;
  opacity: 0;
}
.orderOption__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  top: 20px;
  height: calc(100% - 40px);
}
.orderOption__container .process {
  margin-bottom: 10px;
  font-size: 16px;
}
.orderOption__container .process strong {
  font-size: 26px;
  color: #000;
}
.orderOption__container .selectedTheme {
  text-align: center;
}
.orderOption__container .thumb {
  display: inline-block;
  width: 150px;
  height: 150px;
}
.orderOption__container .thumb:nth-child(2) {
  margin-left: 15px;
}
.orderOption__container .thumb.selected {
  border: 2px solid #FF8A00;
  border-radius: 15px;
  padding: 5px;
  overflow: hidden;
}
.orderOption__container .thumb img {
  display: block;
  margin: 0 auto;
  height: 100%;
}
.orderOption__container .orderMake {
  text-align: center;
}
.orderOption__step {
  flex: 0 0 30%;
}
.orderOption .prodOption {
  display: flex;
  align-items: center;
}
.orderOption .prodOption dt {
  flex: 0 0 80px;
}
.orderOption .prodOption dd {
  flex: 0 0 calc(100% - 80px);
  padding: 0.5rem 0;
}
.orderOption .prodOption dd .priceColor {
  font-weight: 700;
  color: #F60;
}
.orderOption .prodOption .pageCdBox {
  height: 30px;
  line-height: 2;
}
.orderOption .closeOption {
  position: absolute;
  top: -30px;
  left: 50%;
  padding-left: 10px;
  transform: translateX(-50%);
  width: 110px;
  height: 30px;
  background-color: #E8132C;
  border-radius: 5px 5px 0 0;
  text-align: center;
  cursor: pointer;
}
.orderOption .closeOption .ico_close {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #FFF;
  text-indent: 10px;
  line-height: 30px;
  overflow: hidden;
}
.orderOption .closeOption .ico_close::before {
  position: absolute;
  top: 60%;
  left: 10%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%) rotate(225deg);
  transform-origin: 50% 50%;
  display: block;
  content: "";
  color: #FFF;
  border-right: 3px solid #FFF;
  border-bottom: 3px solid #FFF;
}
.orderOption.open {
  height: 250px;
}
.orderOption.open .closeOption .ico_close::before {
  top: 35%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 공개앨범 */
.openAlbum {
  display: block;
}
.openAlbumList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media screen and (max-width: 720px) {
  .openAlbumList {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .openAlbumList {
    grid-template-columns: repeat(2, 1fr);
  }
}
.openAlbum li {
  width: 100%;
  padding: 1.5rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  vertical-align: top;
}
@media screen and (max-width: 480px) {
  .openAlbum li {
    margin-bottom: 0;
  }
}
.openAlbum li.empty {
  flex: 0 0 100%;
  width: 100%;
}
.openAlbum li.empty span {
  flex-grow: 1;
  text-align: center;
}
.openAlbum li .prodName {
  font-size: 14px;
  font-weight: 500;
  color: #999;
  text-align: center;
}
.openAlbum li .title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}
.openAlbum li .thumb {
  width: 100%;
  aspect-ratio: 1/0.8;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #EFEFEF;
  overflow: hidden;
}
.openAlbum li .thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.openAlbum li .thumb a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.openAlbum li .info {
  width: 100%;
  margin-top: 10px;
}
.openAlbum li .info .prodName {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.openAlbum li .info .title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 8px;
}
.openAlbum li .info .smallInfo {
  margin-bottom: 8px;
}
.openAlbum li .info .contents {
  font-size: 1.2rem;
  line-height: 1.2;
  color: #999;
}

/* 베스트 상품  */
.bestSeller {
  margin-bottom: 180px;
}
@media screen and (max-width: 480px) {
  .bestSeller {
    display: none;
  }
}
.bestSellerList {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
.bestSellerList li {
  flex: 0 0 25%;
}
.bestSellerList li:nth-child(1) {
  order: 2;
}
.bestSellerList li:nth-child(1) .prideBox {
  box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.2);
}
.bestSellerList li:nth-child(2) {
  order: 1;
  padding-top: 40px;
}
.bestSellerList li:nth-child(2) .prideBox {
  box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.28);
}
.bestSellerList li:nth-child(3) {
  order: 3;
  padding-top: 80px;
}
.bestSellerList li:nth-child(3) .prideBox {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.bestSellerList li .prideBox {
  position: relative;
  max-width: 250px;
  width: 100%;
  padding: 20px;
  border: 1px solid #BCBCBC;
  border-radius: 20px;
  overflow: hidden;
}
.bestSellerList li .prideBox .themeThumb {
  width: 100%;
}
.bestSellerList li .prideBox .themeThumb img {
  width: 100%;
}
.bestSellerList li .txtInfo {
  text-align: center;
}
.bestSellerList li .txtInfo .prodName {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}
.bestSellerList li .txtInfo .themeName {
  display: block;
  font-size: 1.3rem;
}
.bestSellerList li .badge {
  position: absolute;
  top: 0;
  left: 20px;
  width: 44px;
  height: 50px;
  text-indent: -4000px;
  z-index: 800;
}
.bestSellerList li .badge.rank1 {
  background: url("/skopi/images/front/prodcat/badge_first.png") no-repeat 50% 0/contain;
}
.bestSellerList li .badge.rank2 {
  background: url("/skopi/images/front/prodcat/badge_second.png") no-repeat 50% 0/contain;
}
.bestSellerList li .badge.rank3 {
  background: url("/skopi/images/front/prodcat/badge_third.png") no-repeat 50% 0/contain;
}

/* 사용후기 */
@media screen and (max-width: 480px) {
  .review {
    display: none;
  }
}
.reviewList {
  width: 100%;
  font-size: 1.2rem;
  text-align: center;
  border-top: 1px solid #333;
}
.reviewList th {
  padding: 15px 10px;
  background: #EFEFEF;
}
.reviewList td {
  padding: 15px 10px;
  border-bottom: 1px solid #CCC;
}
.reviewList tr:last-child td {
  border-bottom: 0;
}
.reviewList .prodName {
  white-space: nowrap;
}
.reviewList .recommand {
  white-space: nowrap;
}
.reviewList .title {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: left;
}
.reviewList .content {
  text-align: left;
  line-height: 1.2;
}

/** 전체 공개앨범 **/
.orderOpenProd {
  position: absolute;
  right: 20px;
  top: 50px;
}
.orderOpenProd .button {
  display: block;
  background: #485776;
}
.orderOpenProd .button:hover {
  color: #FFF;
}

/** Preview **/
.popup__contents.preview {
  background: #EFEFEF;
}
.popup__contents.preview .condition {
  padding: 10px;
}
.popup__contents.preview .themePreview {
  width: 800px;
  margin: 20px auto;
}
.popup__contents.preview .themePreview li img {
  width: 100%;
}
.popup__contents.preview .themePreview .bx-pager {
  text-align: center;
}
.popup__contents.preview .themePreview .bx-pager-item {
  display: inline-block;
  margin: 0 3px;
  line-height: 0;
}
.popup__contents.preview .themePreview .bx-pager-link {
  display: inline-block;
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #CCC;
  text-indent: -4000px;
  overflow: hidden;
}
.popup__contents.preview .themePreview .bx-pager-link.active {
  background: #E8132C;
}

/** Preview 끝 **/

/*# sourceMappingURL=skopi_prod.css.map */