/*-------------------------------------------------------------------
  @ Layout
-------------------------------------------------------------------*/
#wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* header */
header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
}
header .gnb {
  position: relative;
  max-width: 1600px;
  height: 99px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}
header .gnb h1 {
  position: absolute;
  top: 27px;
  left: 0;
}
header .gnb h1 a {
  display: block;
  width: 92px;
  height: 45px;
  background: url(../images/common/logo.svg) center no-repeat;
  text-indent: -9999em;
}
header .gnb nav ul {
  display: inline-flex;
  padding: 27px 0;
}
header .gnb nav ul li {
  margin: 0 35px;
}
header .gnb nav ul li a {
  display: block;
  font-weight: 500;
  font-size: 18px;
  line-height: 45px;
  color: #222;
}
header .gnb nav ul li a.on {
  color: #ac33fa;
}
header .gnb .search-box {
  display: flex;
  position: absolute;
  top: 27px;
  right: 0;
  justify-content: space-between;
  align-items: center;
  width: 360px;
  height: 45px;
  padding: 0 20px 0 25px;
  border-radius: 50px;
  background: #f5f5f5;
  box-sizing: border-box;
}
header .gnb .search-box input[type="text"] {
  width: calc(100% - 40px);
  height: 30px;
  background: transparent;
}
header .gnb .search-box button {
  width: 30px;
  height: 30px;
  background: url(../images/common/ico_search.svg) center no-repeat;
  text-indent: -9999em;
}
header .app-down {
  position: relative;
  height: 56px;
}
header .app-down > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115.14deg,
    #6819e2 26.62%,
    #7731e3 38.63%,
    #ae159e 95.36%
  );
  transition: all 0.5s ease;
}
header .app-down .info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
}
header .app-down .info > div {
  display: inline-block;
  position: relative;
  width: auto;
}
header .app-down .info p {
  position: relative;
  font-weight: 400;
  font-size: 15px;
  line-height: 56px;
  color: #fff;
  cursor: default;
}
header .app-down .info p strong {
  font-weight: 700;
}
header .app-down .info p::before {
  position: absolute;
  top: -10px;
  left: -10px;
  content: url(../images/common/app_point.svg);
}
header .app-down .info .img {
  position: absolute;
  top: -11px;
  left: -85px;
  width: 53px;
}
header .app-down .info .img .char {
  position: relative;
  z-index: 10;
}
header .app-down .info .img .sdw {
  position: absolute;
  top: 59px;
  left: 12px;
  width: 30px;
}
header .app-down .info p {
  position: relative;
}
header .app-down .info i {
  position: absolute;
  top: 50%;
  right: -50px;
  width: 40px;
  height: 40px;
  background: url(../images/common/ico_app_down.svg) center no-repeat;
  transform: translateY(-50%);
}
header .app-down .info i img {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 11px;
  transform: translateX(-50%);
  animation: updown 0.6s infinite ease;
}
header .app-down .ext {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
}
header .app-down .ext > div {
  position: relative;
  width: 1280px;
  height: 100%;
  margin: 0 auto;
}
header .app-down .ext .img1 {
  position: absolute;
  bottom: 0;
  left: -65px;
  width: 209px;
  z-index: 10;
}
header .app-down .ext .img2 {
  position: absolute;
  bottom: 0;
  left: 60px;
  width: 218px;
}
header .app-down .ext .qr {
  display: flex;
  position: absolute;
  right: 110px;
  bottom: 16px;
  align-items: center;
  justify-content: center;
  width: 129px;
  height: 129px;
  background: #ffffff;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
}
header .app-down .ext .qr img {
  width: 91px;
}
header .app-down .ext p {
  display: flex;
  position: absolute;
  bottom: 56px;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}
header .app-down .ext p strong {
  font-weight: 900;
}
header .app-down .ext p a {
  display: inline-block;
  margin: 0 5px;
  vertical-align: baseline;
}
header .app-down .ext p a img {
  height: 48px;
}
header .app-down .ext p a:nth-of-type(1) {
  margin-left: 15px;
}
header .app-down.on > div {
  height: 162px;
}
header .app-down.on .info {
  opacity: 0;
}
header .app-down.on .ext {
  opacity: 1;
  overflow: visible;
}
body.page-main header {
  position: relative;
}
@keyframes updown {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -3px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@media all and (max-width: 1700px) {
  header .gnb {
    width: 94.117%;
  }
}

/* footer */
footer {
  margin-top: auto;
}
footer .in {
  margin-top: 100px;
  border-top: 1px solid #d9d9d9;
}
footer .in > div {
  display: flex;
  position: relative;
  align-items: center;
  width: 1600px;
  height: 78px;
  margin: 0 auto;
}
footer .menu {
  display: flex;
}
footer .menu li {
  position: relative;
  padding: 0 10px;
}
footer .menu li::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  background: #666;
  transform: translateY(-50%);
  content: "";
}
footer .menu li:first-child {
  padding-left: 0;
}
footer .menu li:first-child::after {
  display: none;
}
footer .menu li:last-child {
  padding-right: 0;
}
footer .menu li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: #222;
}
footer p {
  margin-left: 20px;
  font-size: 13px;
  color: #666;
}
footer .btn-top {
  position: fixed;
  bottom: 53px;
  right: 50%;
  margin-right: -850px;
  width: 50px;
  height: 50px;
  background: url(../images/common/btn_top.svg) center / 100% auto no-repeat;
  text-indent: -9999em;
  z-index: 200;
}
.page-main footer .btn-top {
  display: none;
}
@media all and (max-width: 1700px) {
  footer .in > div {
    width: 94.117%;
  }
}

/* dim */
#dimAll {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1200;
  background: #000;
  opacity: 0.4;
}
#dimAll.on {
  display: block;
}
#dim-page {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
}
#dim-page.on {
  display: block;
}
#dim-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  background: #000;
  opacity: 0.5;
}
#dim-header.on {
  display: block;
}

/* container */
main {
  width: 1280px;
  padding-top: 205px;
  margin: 0 auto;
}
main .sub .sub-top {
  margin-bottom: 30px;
}
main .sub .sub-top .btn-back {
  display: block;
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_back.svg) center / 100% auto no-repeat;
  text-indent: -9999em;
}

/*-------------------------------------------------------------------
  @ Componets
-------------------------------------------------------------------*/
/* default */
input[type="checkbox"] {
  display: block;
  position: absolute;
  overflow: hidden;
  height: 1px;
  border: 0;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}
input[type="radio"] + label,
input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 27px;
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
}
input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  cursor: pointer;
  box-sizing: border-box;
  content: "";
}
input[type="radio"] + label:before {
  background: url(../images/common/radio.svg) center / 100% auto no-repeat;
}
input[type="radio"]:checked + label:before {
  background: url(../images/common/radio_on.svg) center / 100% auto no-repeat;
}
input[type="checkbox"] + label:before {
  background: url(../images/common/checkbox.svg) center / 100% auto no-repeat;
}
input[type="checkbox"]:checked + label:before {
  background: url(../images/common/checkbox_on.svg) center / 100% auto no-repeat;
}
select {
  min-width: 180px;
  height: 48px;
  padding-left: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: url(../images/common/ico_select.svg) right 18px center / 13px auto
    no-repeat;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
}
select + select {
  margin-left: 7px;
}

/* heading */
.h2 {
  display: block;
  margin-bottom: 10px;
  font-size: 38px;
  line-height: 65px;
  font-weight: 400;
}
.h3 {
  display: block;
  margin: 70px 0 15px;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
}
.tab-menu + .h3 {
  margin-top: 40px;
}

/* button */
.btn-wrap {
  margin-top: 70px;
  text-align: center;
}
.btn-wrap.col2 {
  display: flex;
  justify-content: center;
}
.btn-wrap.col2 button,
.btn-wrap.col2 a {
  margin: 0 5px;
}
.btn-wrap.col2 .btn-type3 {
  margin: 0 7.5px;
}
.btn-type1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 60px;
  border: 1px solid #b2b2b2;
  background: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: #222;
  box-sizing: border-box;
}
.btn-type1 .f-small {
  display: inline-block;
  margin-left: 3px;
  font-size: 14px;
  font-weight: 500;
}
.btn-type2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 40px;
  border: 1px solid #b2b2b2;
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: #222;
  box-sizing: border-box;
}
.btn-type2.gr {
  border: 0;
  background: linear-gradient(
    115.14deg,
    #6819e2 26.62%,
    #7731e3 45.5%,
    #ae159e 111.41%
  );
  color: #fff;
}
.btn-type3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 75px;
  border: 1px solid #b2b2b2;
  background: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: #222;
  box-sizing: border-box;
}
.btn-type3.primary {
  border-color: #ac33fa;
  color: #ac33fa;
}
.btn-type4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 195px;
  height: 50px;
  border: 1px solid #666;
  background: #fff;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: #000;
  box-sizing: border-box;
}
.btn-type4.scd {
  border-color: #ac33fa;
  color: #ac33fa;
}
.btn-type4 .online {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  background: url(../images/common/ico_btn_online.svg) center / 100% auto
    no-repeat;
}
.btn-type4 .homepage {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  background: url(../images/common/ico_btn_homepage.svg) center / 100% auto
    no-repeat;
}

/* bullet */
.bul.dot > li {
  position: relative;
  padding-left: 10px;
}
.bul.dot > li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "\00B7";
  vertical-align: middle;
}

/* tab-menu */
.tab-menu-type1 {
  margin-bottom: 40px;
  border-bottom: 1px solid #d9d9d9;
}
.tab-menu-type1 ul {
  display: flex;
}
.tab-menu-type1 ul li a {
  display: block;
  position: relative;
  padding: 0 35px;
  font-weight: 500;
  font-size: 18px;
  color: #333;
  line-height: 60px;
  cursor: pointer;
}
.tab-menu-type1 ul li a.on {
  font-weight: 700;
  color: #ac33fa;
}
.tab-menu-type1 ul li a.on::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ac33fa;
  content: "";
  z-index: 1;
}
.tab-menu-type3 {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
}
.tab-menu-type3 ul {
  display: flex;
}
.tab-menu-type3 ul li {
  position: relative;
  flex: 1;
}
.tab-menu-type3 ul li::after {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 17px;
  background: #d9d9d9;
  content: "";
}
.tab-menu-type3 ul li:first-child::after {
  display: none;
}
.tab-menu-type3 ul li a,
.tab-menu-type3 ul li button {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background: none;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: #333;
}
.tab-menu-type3 ul li strong {
  display: block;
  font-family: "Montserrat";
  font-weight: 500;
}
.tab-menu-type3 ul li .on {
  color: #000;
  font-weight: 700;
}
.tab-menu-type3 ul li .on::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #222;
  content: "";
}
.tab-menu-type4 ul {
  display: flex;
}
.tab-menu-type4 ul li {
  margin-left: 10px;
}
.tab-menu-type4 ul li:first-child {
  margin-left: 0;
}
.tab-menu-type4 ul li a,
.tab-menu-type4 ul li button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 30px;
  border: 1px solid #666;
  border-radius: 40px;
  font-size: 16px;
  color: #333;
  line-height: 1;
  font-weight: 500;
  box-sizing: border-box;
}
.tab-menu-type4 ul li .on,
.tab-menu-type4 ul li .on {
  border-color: #ac33fa;
  color: #ac33fa;
}
.tab-menu-type1 + .tab-menu-type4 {
  margin-top: 40px;
}
.tab-menu-type6 ul {
  display: flex;
}
.tab-menu-type6 ul li {
  position: relative;
}
.tab-menu-type6 ul li::after {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 9px;
  background: #999;
  content: "";
}
.tab-menu-type6 ul li:first-child::after {
  display: none;
}
.tab-menu-type6 ul li:first-child a,
.tab-menu-type6 ul li:first-child button {
  padding-left: 0;
}
.tab-menu-type6 ul li a,
.tab-menu-type6 ul li button {
  display: flex;
  align-items: center;
  background: none;
  height: 30px;
  padding: 0 15px;
  font-weight: 500;
  font-size: 14px;
  color: #666;
  line-height: 1;
}
.tab-menu-type6 ul li .on {
  font-weight: 700;
  color: #000;
}

/* 이미지게시판 */
.img-list ul {
  display: flex;
  flex-wrap: wrap;
  width: 1320px;
  margin-left: -20px;
}
.img-list ul > li {
  width: 400px;
  margin: 40px 20px 0;
}
.img-list ul > li:nth-child(-n + 3) {
  margin-top: 0;
}
.img-list ul > li a {
  display: block;
}
.img-list ul > li .img {
  position: relative;
  width: 400px;
  height: 280px;
}
.img-list ul > li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-list ul > li .info {
  margin-top: 15px;
}
.img-list ul > li .info .tit {
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  /*
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  */
}
.img-list ul > li .info .date {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 24px;
  color: #666;
}

/* 게시판상세 */
.board-view {
  display: flex;
  justify-content: space-between;
}
.board-view .content {
  width: 880px;
}
.board-view .side {
  width: 340px;
}
.board-view .top-box .tit {
  display: block;
  font-weight: 500;
  font-size: 32px;
  line-height: 47px;
}
.board-view .top-box .desc {
  margin-top: 10px;
  font-size: 18px;
  line-height: 30px;
  color: #222;
}
.board-view .top-box .btm {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.board-view .top-box .btm .editor {
  display: flex;
  align-items: center;
  padding-right: 20px;
  font-size: 14px;
  line-height: 20px;
  color: #222;
  line-height: 20px;
}
.board-view .top-box .btm .editor .btn-email {
  display: block;
  margin-left: 10px;
  width: 24px;
  height: 24px;
  background: url(../images/common/ico_email.svg) center / 24px auto no-repeat;
  text-indent: -9999em;
}
.board-view .top-box .btm .date {
  display: block;
  font-size: 14px;
  line-height: 1;
  color: #666;
}
.board-view .top-box .share {
  display: flex;
  margin-top: 15px;
}
.board-view .top-box .share li {
  margin-left: 20px;
}
.board-view .top-box .share li:first-child {
  margin-left: 0;
}
.board-view .top-box .share li .btn-fb {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_fb.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.board-view .top-box .share li .btn-kakao {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_kakao.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.board-view .top-box .share li .btn-url {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_url.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.board-view .top-box-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.board-view .top-box-profile .profile {
  display: flex;
  align-items: center;
}
.board-view .top-box-profile .profile .img {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
}
.board-view .top-box-profile .profile .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board-view .top-box-profile .profile .info {
  flex: 1;
  margin-left: 20px;
}
.board-view .top-box-profile .profile .info .user {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}
.board-view .top-box-profile .profile .info .user img {
  display: block;
  width: 27px;
  margin-left: -3px;
  margin-right: 5px;
  margin-top: 3px;
}
.board-view .top-box-profile .profile .info .txt {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  color: #666;
  line-height: 1;
}
.board-view .top-box-profile .profile .info .date {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 24px;
  color: #666;
}
.board-view .top-box-profile .share {
  display: flex;
  align-self: flex-end;
}
.board-view .top-box-profile .share li {
  margin-left: 20px;
}
.board-view .top-box-profile .share li:first-child {
  margin-left: 0;
}
.board-view .top-box-profile .share li .btn-fb {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_fb.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.board-view .top-box-profile .share li .btn-kakao {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_kakao.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.board-view .top-box-profile .share li .btn-url {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_url.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.board-view .text {
  padding: 40px 0 20px 0;
  margin-top: 40px;
  border-top: 1px solid #222;
  border-bottom: 1px solid #d9d9d9;
  font-size: 16px;
  line-height: 30px;
  color: #222;
}
.board-view .text .concomment {
  padding-top: 30px;
  font-size: 12px;
  color: #000;
}
.board-view .text figure {
  display: table;
}
.board-view .text figure figcaption {
  display: table-caption;
  caption-side: bottom;
  margin-top: 10px;
  font-size: 14px;
  line-height: 19px;
  color: #666;
}
.board-view .text figure.image {
  margin: 0 auto;
}
.board-view .text img {
  max-width: 100%;
}
.board-view .comment-list {
  margin-top: 35px;
}
.board-view .comment-list h3 {
  display: flex;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #222;
}
.board-view .related {
  margin-top: 50px;
}
.board-view .related h3 {
  display: flex;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #222;
}
.board-view .related .list {
  margin-top: 20px;
}
.board-view .related .list li {
  margin-top: 20px;
}
.board-view .related .list li:first-child {
  margin-top: 0;
}
.board-view .related .list li a {
  display: flex;
  justify-content: space-between;
}
.board-view .related .list li .img {
  position: relative;
  width: 100px;
  height: 100px;
}
.board-view .related .list li .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.board-view .related .list li .info {
  display: flex;
  align-items: center;
  width: calc(100% - 110px);
  margin-left: 10px;
}
.board-view .related .list li .info > div {
  width: 100%;
}
.board-view .related .list li .info .ctg {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 21px;
}
.board-view .related .list li .info .ctg .arw {
  width: 5px;
  height: 10px;
  margin: 0 5px;
  background: url("../images/common/ico_arw04_right.svg") center / 5px auto
    no-repeat;
  text-indent: -9999em;
}
.board-view .related .list li .info .tit {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-view .related .list li .info .rating {
  display: flex;
  align-items: center;
  margin-top: 7px;
  font-family: "Montserrat";
}
.board-view .related .list li .info .rating .score {
  display: block;
  padding-left: 21px;
  background: url(../images/common/ico_rating.svg) left center / 18px auto
    no-repeat;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
}
.board-view .related .list li .info .rating .num {
  display: block;
  margin-left: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: #666;
}
.board-view .related .list li .info .tag-wrap {
  display: flex;
  margin-top: 7px;
}
.board-view .related .list li .info .tag-wrap .tag {
  display: flex;
  height: 22px;
  padding: 0 12px;
  border: 1px solid #f3eddf;
  background: #f3eddf;
  font-weight: 500;
  font-size: 11px;
  color: #9b884f;
  line-height: 18px;
  box-sizing: border-box;
}
.board-view .related .list li .info .tag-wrap .tag.type2 {
  border: 1px solid #f3eddf;
  background: #fff;
  color: #9b884f;
}
.board-view .related .list li .info .tag-wrap .tag + .tag {
  margin-left: 4px;
}
.board-view .related .list li .info .company {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}
.board-view .related .list.type2 li .img {
  width: 120px;
  height: 120px;
}
.board-view .related .list.type2 li .info {
  display: flex;
  align-items: center;
  width: calc(100% - 130px);
  margin-left: 10px;
}

/* 댓글리스트 */
.comment-list .list {
  margin-top: 20px;
  border-top: 1px solid #222;
}
.comment-list .list > li {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #d9d9d9;
}
.comment-list .list > li .img {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 100%;
}
.comment-list .list > li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-list .list > li .info {
  width: 790px;
}
.comment-list .list > li .info .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment-list .list > li .info .top .user {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.comment-list .list > li .info .top .user img {
  display: block;
  width: 20px;
  margin-left: -3px;
  margin-right: 2px;
  margin-top: 3px;
}
.comment-list .list > li .txt {
  margin-top: 10px;
  font-size: 14px;
  line-height: 22px;
  color: #222;
}
.comment-list .list > li .date {
  display: block;
  margin-top: 10px;
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #666;
}

/* 리스트 */
.list-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.list-top.right {
  justify-content: right;
}
.list-top .total {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
}
.list-top .total strong {
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 600;
  color: #ac33fa;
}
.list-top .txt {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #222;
}
.tab-menu + .tab-menu + .list-top {
  margin-top: 40px;
}

/* 상품리스트 */
.gds-list ul {
  display: flex;
  flex-wrap: wrap;
  width: 1300px;
  margin-left: -10px;
}
.gds-list ul > li {
  width: 240px;
  margin: 50px 10px 0;
}
.gds-list ul > li:nth-child(-n + 5) {
  margin-top: 0;
}
.gds-list ul > li a {
  display: block;
}
.gds-list ul > li .img {
  position: relative;
  width: 240px;
  height: 240px;
}
.gds-list ul > li .img .no {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #a175db;
  background: #fbfbfb;
  font-family: "montserrat";
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: #a175db;
  box-sizing: border-box;
}
.gds-list ul > li .img .no1 {
  border-color: #ac33fa;
  background: #ac33fa;
  color: #fff;
}
.gds-list ul > li .img .no2,
.gds-list ul > li .img .no3 {
  border-color: #a175db;
  background: #a175db;
  color: #fff;
}
.gds-list ul > li .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gds-list ul > li .info {
  margin-top: 15px;
}
.gds-list ul > li .info .top {
  display: flex;
}
.gds-list ul > li .info .top span {
  display: block;
  position: relative;
  font-size: 13px;
  line-height: 19px;
}
.gds-list ul > li .info .top .ctg {
  font-weight: 500;
}
.gds-list ul > li .info .top .company {
  flex: 1;
  margin-left: 10px;
  padding-left: 10px;
}
.gds-list ul > li .info .top .company::after {
  position: absolute;
  left: 0;
  top: 10px;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: #999;
  content: "";
}
.gds-list ul > li .info .tit {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.gds-list ul > li .info .rating {
  display: flex;
  align-items: center;
  margin-top: 7px;
  font-family: "Montserrat";
}
.gds-list ul > li .info .rating .score {
  display: block;
  padding-left: 21px;
  background: url(../images/common/ico_rating.svg) left center / 18px auto
    no-repeat;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
}
.gds-list ul > li .info .rating .num {
  display: block;
  margin-left: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: #666;
}
.gds-list ul > li .info .tag-wrap {
  display: flex;
  margin-top: 17px;
}
.gds-list ul > li .info .tag-wrap .tag {
  display: flex;
  height: 22px;
  padding: 0 12px;
  border: 1px solid #f3eddf;
  background: #f3eddf;
  font-weight: 500;
  font-size: 11px;
  color: #9b884f;
  line-height: 18px;
  box-sizing: border-box;
}
.gds-list ul > li .info .tag-wrap .tag.type2 {
  border: 1px solid #f3eddf;
  background: #fff;
  color: #9b884f;
}
.gds-list ul > li .info .tag-wrap .tag + .tag {
  margin-left: 4px;
}

/* 스토리 리스트 */
.story-list ul {
  display: flex;
  flex-wrap: wrap;
  width: 1308px;
  margin-left: -14px;
}
.story-list ul > li {
  width: 299px;
  margin: 40px 14px 0;
}
.story-list ul > li:nth-child(-n + 4) {
  margin-top: 0;
}
.story-list ul > li a {
  display: block;
}
.story-list ul > li .img {
  position: relative;
  width: 299px;
  height: 214px;
}
.story-list ul > li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-list ul > li .info {
  margin-top: 15px;
}
.story-list ul > li .info .tit {
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-list ul > li .info p {
  width: 100%;
  margin-top: 4px;
  font-size: 16px;
  line-height: 28px;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 인증 리스트 */
.picture-list ul {
  display: flex;
  flex-wrap: wrap;
  width: 1312.5px;
  margin-left: -16.25px;
}
.picture-list ul > li {
  width: 230px;
  margin: 50px 16.25px 0;
}
.picture-list ul > li:nth-child(-n + 5) {
  margin-top: 0;
}
.picture-list ul > li a {
  display: block;
}
.picture-list ul > li .img {
  position: relative;
  width: 230px;
  height: 230px;
}
.picture-list ul > li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.picture-list ul > li .info {
  margin-top: 20px;
}
.picture-list ul > li .info .profile .user {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.picture-list ul > li .info .profile .user img {
  width: 25px;
  margin-left: -3px;
  margin-right: -3px;
}
.picture-list ul > li .info .profile .txt {
  font-size: 13px;
  line-height: 19px;
  color: #666;
}
.picture-list ul > li .info > p {
  display: -webkit-box;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  line-height: 22px;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 리뷰리스트 */
.review-list .tab {
  margin-bottom: 15px;
}
.review-list .top-head {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d9d9d9;
  padding-top: 30px;
  margin: 20px 0;
}
.review-list .top-head .view-option label {
  font-size: 14px;
}
.review-list .top-head .tab {
  margin-bottom: 0;
}
.review-list .list > li {
  padding: 10px 0;
}
.review-list .list > li:first-child {
  padding-top: 0;
}
.review-list .list > li .user-box {
  padding: 15px 20px;
  border-radius: 10px;
  background: #f7f7f7;
}
.review-list .list > li .user-box .profile {
  display: flex;
  align-items: center;
}
.review-list .list > li .user-box .profile .img {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  overflow: hidden;
}
.review-list .list > li .user-box .profile .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-list .list > li .user-box .profile .info {
  flex: 1;
  margin-left: 15px;
}
.review-list .list > li .user-box .profile .info .top {
  display: flex;
  align-items: center;
}
.review-list .list > li .user-box .profile .info .top .user {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.review-list .list > li .user-box .profile .info .top .user img {
  display: block;
  width: 20px;
  margin-left: -3px;
  margin-right: 2px;
  margin-top: 3px;
}
.review-list .list > li .user-box .profile .info .top .txt {
  margin-left: 20px;
  font-size: 13px;
  line-height: 25px;
  color: #666;
}
.review-list .list > li .user-box .profile .info .rating-box {
  display: flex;
  align-items: center;
  padding-top: 10px;
  margin-top: 5px;
  border-top: 1px solid #d9d9d9;
}
.review-list .list > li .user-box .profile .info .rating-box .rating {
  display: flex;
  align-items: center;
}
.review-list
  .list
  > li
  .user-box
  .profile
  .info
  .rating-box
  .rating
  .star-rating {
  width: 85px;
  height: 17px;
}
.review-list .list > li .user-box .profile .info .rating-box .rating .date {
  margin-left: 10px;
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  color: #666;
}
.review-list .list > li .user-box .profile .info .rating-box .eval {
  display: flex;
  align-items: center;
  margin-left: 45px;
}
.review-list .list > li .user-box .profile .info .rating-box .eval dl {
  display: flex;
  margin-left: 18px;
}
.review-list
  .list
  > li
  .user-box
  .profile
  .info
  .rating-box
  .eval
  dl:nth-of-type(1) {
  margin-left: 0;
}
.review-list .list > li .user-box .profile .info .rating-box .eval dl dt {
  font-weight: 500;
  font-size: 12px;
  color: #222;
  line-height: 17px;
}
.review-list .list > li .user-box .profile .info .rating-box .eval dl dd {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.review-list
  .list
  > li
  .user-box
  .profile
  .info
  .rating-box
  .eval
  dl
  dd
  .star-rating {
  width: 85px;
  height: 17px;
}
.review-list .list > li > .txt {
  margin-top: 20px;
  font-size: 14px;
  line-height: 24px;
  color: #222;
}
.review-list .list > li .photo-list {
  position: relative;
  margin-top: 10px;
  box-sizing: border-box;
}
.review-list .list > li .photo-list .swiper-slide {
  width: auto;
  margin-right: 20px;
}
.review-list .list > li .photo-list .swiper-slide .img {
  width: 105px;
  height: 105px;
  overflow: hidden;
}
.review-list .list > li .photo-list .swiper-slide .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.review-list .list > li .btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.review-list .list > li .btm .like {
  display: flex;
  align-items: center;
}
.review-list .list > li .btm .like .btn-like {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background: url(../images/common/ico_like.svg) center / 30px auto no-repeat;
  text-indent: -9999em;
  cursor: default;
}
.review-list .list > li .btm .like .btn-like.on {
  background-image: url(../images/common/ico_like_on.svg);
}
.review-list .list > li .btm .like p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.review-list .list > li .btm .like p strong {
  display: inline-block;
  margin-right: 5px;
  font-family: "montserrat";
  font-weight: 600;
  font-size: 16px;
  color: #ac33fa;
}
.review-list .list > li .btm .btn-report {
  display: inline-block;
  padding-left: 18px;
  background: url(../images/common/ico_report.png) left center / 14px auto
    no-repeat;
  font-weight: 500;
  font-size: 11px;
  color: #222;
  line-height: 24px;
}

/* 페어링 */
.pairing .item1 {
  background-image: url(../images/common/ico_pairing01.svg);
}
.pairing .item2 {
  background-image: url(../images/common/ico_pairing02.svg);
}
.pairing .item3 {
  background-image: url(../images/common/ico_pairing03.svg);
}
.pairing .item4 {
  background-image: url(../images/common/ico_pairing04.svg);
}
.pairing .item5 {
  background-image: url(../images/common/ico_pairing05.svg);
}
.pairing .item6 {
  background-image: url(../images/common/ico_pairing06.svg);
}
.pairing .item7 {
  background-image: url(../images/common/ico_pairing07.svg);
}
.pairing .item8 {
  background-image: url(../images/common/ico_pairing08.svg);
}
.pairing .item9 {
  background-image: url(../images/common/ico_pairing09.svg);
}
.pairing .item10 {
  background-image: url(../images/common/ico_pairing10.svg);
}
.pairing .item11 {
  background-image: url(../images/common/ico_pairing11.svg);
}
.pairing .item1.on {
  background-image: url(../images/common/ico_pairing01_on.svg);
}
.pairing .item2.on {
  background-image: url(../images/common/ico_pairing02_on.svg);
}
.pairing .item3.on {
  background-image: url(../images/common/ico_pairing03_on.svg);
}
.pairing .item4.on {
  background-image: url(../images/common/ico_pairing04_on.svg);
}
.pairing .item5.on {
  background-image: url(../images/common/ico_pairing05_on.svg);
}
.pairing .item6.on {
  background-image: url(../images/common/ico_pairing06_on.svg);
}
.pairing .item7.on {
  background-image: url(../images/common/ico_pairing07_on.svg);
}
.pairing .item8.on {
  background-image: url(../images/common/ico_pairing08_on.svg);
}
.pairing .item9.on {
  background-image: url(../images/common/ico_pairing09_on.svg);
}
.pairing .item10.on {
  background-image: url(../images/common/ico_pairing10_on.svg);
}
.pairing .item11.on {
  background-image: url(../images/common/ico_pairing11_on.svg);
}

/* 사진확대팝업 */
.photo-pop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1400;
}
.photo-pop.on {
  display: flex;
}
.photo-pop .cont {
  position: relative;
  width: 700px;
  height: 700px;
}
.photo-pop .cont .btn-close {
  position: absolute;
  top: 0;
  right: -70px;
  width: 50px;
  height: 50px;
  background: url(../images/common/ico_close_white.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.photo-pop .cont .img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 700px;
  height: 700px;
}
.photo-pop .cont .img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.photo-pop .cont .swiper-button-prev {
  left: -95px;
  top: 50%;
  transform: translateY(-50%);
  width: 75px;
  height: 75px;
  margin: 0;
  background: url(../images/common/ico_btn_prev.svg) no-repeat;
}
.photo-pop .cont .swiper-button-prev::after {
  display: none;
}
.photo-pop .cont .swiper-button-next {
  right: -95px;
  top: 50%;
  transform: translateY(-50%);
  width: 75px;
  height: 75px;
  margin: 0;
  background: url(../images/common/ico_btn_next.svg) no-repeat;
}
.photo-pop .cont .swiper-button-next::after {
  display: none;
}
.photo-pop .cont .swiper-pagination {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 60px;
  height: 26px;
  padding: 0 0;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  box-sizing: border-box;
}
.photo-pop .cont .swiper-pagination.on {
  display: inline-flex;
}
.photo-pop .cont .swiper-pagination > div {
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #fff;
}
.photo-pop .cont .swiper-pagination > div .curr {
  font-weight: 600;
}

/* 별점 */
.star-rating {
  display: inline-flex;
  position: relative;
  width: 170px;
  height: 34px;
  background: url(../images/common/rating_bg.svg) center / 100% auto no-repeat;
}
.star-rating .val {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: url(../images/common/rating.svg) left center / 100% auto no-repeat;
}

/* 검색결과 없음 */
.no-result {
  padding-top: 100px;
}
.no-result p {
  padding-top: 142px;
  background: url(../images/common/ico_exc.svg) center top / 132px auto
    no-repeat;
  font-size: 24px;
  line-height: 65px;
  text-align: center;
}
.no-result p strong {
  font-weight: 700;
  color: #ac33fa;
}

/* 텍스트스타일 */
.txt-empty {
  padding: 80px 0;
}
.txt-empty p {
  padding-top: 70px;
  background: url(../images/common/ico_exc02.svg) center top / 60px auto
    no-repeat;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
}

/*-------------------------------------------------------------------
  @ Utilities
-------------------------------------------------------------------*/
/* font */
.f-primary {
  color: #821d21;
}

/* margin */
.mg-t30 {
  margin-top: 30px;
}
.mg-t40 {
  margin-top: 40px;
}

/* align */
.txt-left {
  text-align: left !important;
}
.txt-center {
  text-align: center !important;
}
.txt-right {
  text-align: right !important;
}

/*-------------------------------------------------------------------
  @ Contents
-------------------------------------------------------------------*/
/* 메인 */
body.page-main header {
  border-bottom: 1px solid #d9d9d9;
}
body.page-main header .app-down {
  display: none;
}
body.page-main main {
  width: 100%;
  padding-top: 0;
}
.main {
  width: 100%;
  overflow: hidden;
}
.main .visualtemp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 830px;
  
  flex-direction: column;
}
.main .visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 830px;
  background: url(../images/main/visual.jpg) center / cover no-repeat;
  flex-direction: column;
}
.main .visual .info {
  text-align: center;
  opacity: 0;
  transition: all 1s 0.3s ease;
}


/* 230721 수정 */
.main .visual .info .txt1 {
  font-size: 65px;
  line-height: 80px;
  color: #000;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.1));
}
.main .visual .info .txt1 .gr {
  display: inline-block;
  padding: 0 10px 7px;
  background: linear-gradient(
    147.17deg,
    #7625f3 -71.1%,
    #6016d2 3.63%,
    #ae159e 55.42%,
    #ae159e 91.93%
  );
}
.main .visual .info .txt2 {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #fff;
  color: #fff;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.1));
}
.main .visual .btn {
  display: inline-flex;
  margin-top: 50px;
  opacity: 0;
  transition: all 1s 0.3s ease;
  gap: 10px;
}
.main .visual .btn a {
  display: block;
}
.main .visual.on .info {
  opacity: 1;
}

.main .visual.on .btn {
  opacity: 1;
}

.main .ranking > div {
  position: relative;
  left: 50%;
  width: 1920px;
  height: 930px;
  margin-left: -960px;
  overflow: hidden;
  background: url(../images/main/bg_ranking.jpg) center bottom / 1920px
    no-repeat;
}
.main .ranking .title {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  z-index: 10;
}
.main .ranking .title h3 {
  display: block;
  font-size: 40px;
  line-height: 65px;
  color: #000;
  font-weight: 300;
}
.main .ranking .title h3 strong {
  font-size: 50px;
}
.main .ranking .title .desc {
  margin-top: 20px;
  font-size: 18px;
  line-height: 26px;
  color: #666;
}
.main .ranking .title a {
  display: inline-block;
  padding-right: 31px;
  margin-top: 40px;
  background: url(../images/common/ico_arw_circle03.svg) right center / 26px
    auto no-repeat;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #ac33fa;
}
.main .ranking .icon {
  position: absolute;
  top: 328px;
  left: 138px;
  animation: bubble 2s infinite ease-in-out;
}
.main .search {
  position: relative;
  background: #a275dc;
}
.main .search > div {
  position: relative;
  left: 50%;
  width: 1920px;
  margin-left: -960px;
  height: 930px;
  background: url(../images/main/bg_search.jpg) center / 1920px no-repeat;
}
.main .search .title {
  position: absolute;
  top: 303px;
  left: 161px;
}
.main .search .title h3 {
  display: block;
  font-size: 50px;
  line-height: 65px;
  color: #fff;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.main .search .title h3 strong {
  font-size: 50px;
}
.main .search .title .desc {
  margin-top: 25px;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}
.main .search .item li {
  position: relative;
  padding: 0 7px;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #fff;
}
.main .search .item li span {
  position: relative;
  z-index: 2;
}
.main .search .item li::after {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 16px;
  background: #7a3ccb;
  opacity: 0.5;
  content: "";
}
.main .search .item li:nth-child(1) {
  position: absolute;
  left: 736px;
  top: 750px;
}
.main .search .item li:nth-child(2) {
  position: absolute;
  left: 1037px;
  top: 750px;
}
.main .search .camera {
  position: absolute;
  left: 700px;
  top: 217px;
  width: 236px;
  filter: drop-shadow(-15px 15px 30px rgba(0, 0, 0, 0.25));
}
.main .search .camera img {
  width: 100%;
}
.main .search .camera .txt {
  position: absolute;
  left: 35px;
  top: 97px;
  width: 166px;
  z-index: 5;
}

/* 230707 수정 */
.main .search .camera .barcode {
  position: absolute;
  left: 28.5px;
  top: 143px;
  width: 178px;
  z-index: 5;
}

.main .search .camera .btn {
  position: absolute;
  left: 33px;
  top: 356px;
  width: 170px;
  z-index: 5;
}
.main .search .camera .slide {
  position: absolute;
  left: 12px;
  top: 11px;
  width: 212px;
  border-radius: 30px;
  overflow: hidden;
}
.main .search .phone {
  position: absolute;
  left: 1350px;
  top: 92px;
  width: 365px;
  filter: drop-shadow(-15px 15px 30px rgba(0, 0, 0, 0.25));
  transform: translateX(100%);
  opacity: 0;
  transition: all 1s ease;
}
.main .search .phone .frame {
  position: relative;
  width: 100%;
}
.main .search .phone .screen {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: 326px;
  height: 724px;
  overflow: hidden;
  border-radius: 40px;
}
.main .search .phone .screen img {
  width: 100%;
}
.main .search .phone .page.on {
  animation: scroll 8s 1 linear;
}
.main .search .phone .screen .sdw {
  position: absolute;
  left: 50%;
  top: 643px;
  transform: translateX(-50%);
  width: 404px;
}
.main .search .phone .screen .btm {
  position: absolute;
  left: 50%;
  top: 676px;
  transform: translateX(-50%);
  width: 299px;
}
.main .search .phone.on {
  transform: translateX(0);
  opacity: 1;
}
.main .pairing {
  position: relative;
}

/* 230712 배경색 수정 */
.main .pairing > div {
  position: relative;
  left: 50%;
  width: 1920px;
  margin-left: -960px;
  height: 930px;
  background-color: #fff;
}

/* 230712 수정 */
.main .pairing .title {
  text-align: center;
  z-index: 10;
  margin-top: 90px;
}

.main .pairing .pairing_icon{
  display: block;
  margin: 8px auto 0px;
}

.main .pairing .pairing_icon img{
  display: block;
  margin: 0 auto;
}

.main .pairing .title h3 {
  display: block;
  font-size: 50px;
  line-height: 65px;
  color: #000;
  font-weight: 300;
}
.main .pairing .title h3 strong {
  font-size: 50px;
}
.main .pairing .title .desc {
  margin-top: 20px;
  font-size: 18px;
  line-height: 26px;
  color: #666;
}
.main .pairing .txt dt {
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #000;
}
.main .pairing .txt dd {
  margin-top: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #666;
}
.main .story {
  position: relative;
  background: #eee3ff;
}
.main .story > div {
  position: relative;
  left: 50%;
  width: 1920px;
  height: 930px;
  overflow: hidden;
  margin-left: -960px;
}
.main .story .title {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  z-index: 10;
}
.main .story .title h3 {
  display: block;
  font-size: 50px;
  line-height: 65px;
  color: #000;
  font-weight: 300;
}
.main .story .title h3 strong {
  font-size: 50px;
}
.main .story .title .desc {
  margin-top: 25px;
  font-size: 18px;
  line-height: 26px;
  color: #666;
}
.main .story .title a {
  display: inline-block;
  padding-right: 31px;
  margin-top: 40px;
  background: url(../images/common/ico_arw_circle03.svg) right center / 26px
    auto no-repeat;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #ac33fa;
}
.main .story .slide {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 1670px;
}
.main .story .slide .swiper-slide {
  position: relative;
  width: 350px;
  height: 523px;
}
.main .story .slide .swiper-slide .phone {
  position: absolute;
  left: 50%;
  top: 185px;
  transform: translateX(-50%);
  width: 280px;
  opacity: 0.6;
  transition: all 0.7s ease;
}
.main .story .slide .swiper-slide .phone .frame {
  position: relative;
  width: 100%;
  opacity: 0;
  transition: all 0.7s ease;
}
.main .story .slide .swiper-slide .phone .screen {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: 253px;
  overflow: hidden;
  border-radius: 40px;
  transition: all 0.7s ease;
}
.main .story .slide .swiper-slide .phone .screen img {
  width: 100%;
}
.main .story .slide .swiper-slide-first .phone {
  margin-left: 15px;
}
.main .story .slide .swiper-slide-prev .phone {
  margin-left: -30px;
}
.main .story .slide .swiper-slide-next .phone {
  margin-left: 30px;
}
.main .story .slide .swiper-slide-last .phone {
  margin-left: -15px;
}
.main .story .slide .swiper-slide-active .phone {
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  width: 350px;
  filter: drop-shadow(-15px 15px 30px rgba(0, 0, 0, 0.25));
  opacity: 1;
  transition: all 0.7s ease;
}
.main .story .slide .swiper-slide-active .phone .frame {
  opacity: 1;
}
.main .story .slide .swiper-slide-active .phone .screen {
  width: 314px;
}
.main .award > div {
  position: relative;
  width: 1470px;
  margin: 0 auto;
}
.main .award .title {
  padding-top: 87px;
  text-align: center;
}
.main .award .title h3 {
  display: block;
  font-size: 50px;
  line-height: 65px;
  color: #000;
  font-weight: 300;
}
.main .award .title h3 strong {
  font-size: 50px;
}
.main .award .title .desc {
  margin-top: 25px;
  font-size: 18px;
  line-height: 26px;
  color: #666;
}
.main .award .title a {
  display: inline-block;
  padding-right: 31px;
  margin-top: 40px;
  background: url(../images/common/ico_arw_circle03.svg) right center / 26px
    auto no-repeat;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #ac33fa;
}
.main .award h4 {
  display: block;
  margin: 60px 0 25px;
  font-weight: 700;
  font-size: 24px;
  line-height: 26px;
  color: #000;
}
.main .award .slide {
  position: relative;
}
.main .award .slide .swiper-slide {
  width: 220px;
  margin-right: 30px;
}
.main .award .slide .swiper-slide:last-child {
  margin-right: 0;
}
.main .award .slide a {
  display: block;
}
.main .award .slide .img {
  position: relative;
  width: 220px;
  height: 220px;
}
.main .award .slide .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main .award .slide .info {
  margin-top: 15px;
}
.main .award .slide .info .top {
  display: flex;
}
.main .award .slide .info .top span {
  display: block;
  position: relative;
  font-size: 12px;
  line-height: 18px;
}
.main .award .slide .info .top .ctg {
  font-weight: 500;
}
.main .award .slide .info .top .company {
  flex: 1;
  margin-left: 10px;
  padding-left: 10px;
}
.main .award .slide .info .top .company::after {
  position: absolute;
  left: 0;
  top: 10px;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: #999;
  content: "";
}
.main .award .slide .info .tit {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.main .award .slide .info .rating {
  display: flex;
  align-items: center;
  margin-top: 12px;
  font-family: "Montserrat";
}
.main .award .slide .info .rating .score {
  display: block;
  padding-left: 21px;
  background: url(../images/common/ico_rating.svg) left center / 18px auto
    no-repeat;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
}
.main .award .slide .info .rating .num {
  display: block;
  margin-left: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: #666;
}
.main .award .slide .swiper-button-prev {
  display: none;
  position: absolute;
  left: -60px;
  top: 95px;
  width: 30px;
  height: 30px;
  margin: 0;
  background: url(../images/main/btn_prev.svg) center / 30px auto no-repeat;
}
.main .award .slide .swiper-button-prev::after {
  display: none;
}
.main .award .slide .swiper-button-prev.on {
  display: block;
}
.main .award .slide .swiper-button-next {
  display: none;
  position: absolute;
  right: -60px;
  top: 95px;
  width: 30px;
  height: 30px;
  margin: 0;
  background: url(../images/main/btn_next.svg) center / 30px auto no-repeat;
}
.main .award .slide .swiper-button-next::after {
  display: none;
}
.main .award .slide .swiper-button-next.on {
  display: block;
}
.main .award .slide .swiper-button-disabled {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
@media all and (max-width: 1700px) {
  .main .ranking > div {
    background-image: url(../images/main/bg_ranking_s.jpg);
  }
  .main .ranking .icon {
    position: absolute;
    top: 355px;
    left: 138px;
    animation: bubble_s 2s infinite ease-in-out;
  }
  .main .search > div {
    background-image: url(../images/main/bg_search_s.jpg);
  }
  .main .search .title {
    position: absolute;
    top: 303px;
    left: 261px;
  }
  .main .search .item li:nth-child(1) {
    left: 766px;
  }
  .main .search .item li:nth-child(2) {
    left: 1037px;
  }
  .main .search .camera {
    position: absolute;
    left: 732px;
    top: 217px;
    transform: scale(0.95);
  }
  .main .search .phone {
    left: 1300px;
    transform: translateX(100%) scale(0.95);
  }
  .main .search .phone.on {
    transform: translateX(0) scale(0.95);
    opacity: 1;
  }
  .main .pairing > div {
    background-image: url(../images/main/bg_pairing_s.jpg);
  }
  .main .pairing .txt1 {
    left: 260px;
  }
  .main .pairing .txt2 {
    left: 978px;
  }
  .main .pairing .txt3 {
    left: 1426px;
    top: 740px;
  }
  .main .story .slide {
    bottom: -34px;
    transform: translateX(-50%) scale(0.87);
  }
  .main .award > div {
    width: 1325px;
  }
  .main .award .slide .swiper-slide {
    width: 200px;
    margin-right: 25px;
  }
  .main .award .slide .img {
    position: relative;
    width: 200px;
    height: 200px;
  }
  .main .award .slide .swiper-button-prev {
    left: -40px;
  }
  .main .award .slide .swiper-button-next {
    right: -40px;
  }
}
@keyframes bubble {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bubble_s {
  0% {
    transform: translateY(0) scale(0.9);
  }
  50% {
    transform: translateY(-25px) scale(0.9);
  }
  100% {
    transform: translateY(0) scale(0.9);
  }
}
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-80.2%);
  }
  80% {
    transform: translateY(-80.2%);
  }
  95% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }

}

/* qr */
#qr {
  position: fixed;
  right: 25px;
  bottom: 15px;
  width: 130px;
  z-index: 100;
}

/* 검색 */
.keyword_result .btn-wrap {
  margin-top: 40px;
}
.keyword_result .banner {
  margin: 70px 0;
}
.keyword_result .banner img {
  max-width: 100%;
}

/* 술정보 */
.gds-wrap {
  display: flex;
  justify-content: space-between;
}
.gds-wrap .list-box {
  width: 940px;
}
.gds-wrap .list-box .gds-list ul {
  display: flex;
  flex-wrap: wrap;
  width: 960px;
  margin-left: -10px;
}
.gds-wrap .list-box .gds-list ul > li {
  width: 220px;
  margin: 50px 10px 0;
}
.gds-wrap .list-box .gds-list ul > li:nth-child(-n + 4) {
  margin-top: 0;
}
.gds-wrap .list-box .gds-list ul > li .img {
  position: relative;
  width: 220px;
  height: 220px;
}
.gds-wrap .list-box .gds-list ul > li .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gds-wrap .filter-box {
  width: 280px;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
}
.gds-wrap .filter-box .top-wrap {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 20px 10px 5px 10px;
}
.gds-wrap .filter-box .top-wrap .ctr {
  display: flex;
  align-items: center;
}
.gds-wrap .filter-box .top-wrap .ctr .btn-reset {
  padding-left: 25px;
  background: url(../images/common/ico_reset.svg) left center / 22px auto
    no-repeat;
  font-size: 13px;
  line-height: 22px;
}
.gds-wrap .filter-box .list-wrap {
  padding: 0 24px 35px 24px;
  box-sizing: border-box;
}
.gds-wrap .filter-box .list-wrap .list > li {
  margin-top: 30px;
}
.gds-wrap .filter-box .list-wrap .list > li:first-child {
  margin-top: 0;
}
.gds-wrap .filter-box .list-wrap .list > li .title {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #222;
}
.gds-wrap .filter-box .list-wrap .list > li .title h4 {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.gds-wrap .filter-box .list-wrap .list > li .title h4 .arw {
  width: 6px;
  height: 20px;
  margin: 0 7px;
  background: url("../images/common/ico_arw04_right.svg") center 6px / 6px auto
    no-repeat;
  text-indent: -9999em;
}
.gds-wrap .filter-box .list-wrap .list > li .con h5 {
  display: block;
  margin: 20px 0 5px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.gds-wrap .filter-box .list-wrap .list > li .con h5:nth-of-type(1) {
  margin-top: 15px;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list li {
  margin-top: 7px;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list li:first-child {
  margin-top: 0;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list.col2 {
  display: flex;
  flex-wrap: wrap;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list.col2 li {
  width: 50%;
}
.gds-wrap
  .filter-box
  .list-wrap
  .list
  > li
  .con
  .chk-list.col2
  li:nth-child(-n + 2) {
  margin-top: 0;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list.col2 li.w-auto {
  width: auto;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list.col3 {
  display: flex;
  flex-wrap: wrap;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list.col3 li {
  width: 80px;
}
.gds-wrap
  .filter-box
  .list-wrap
  .list
  > li
  .con
  .chk-list.col3
  li:nth-child(3n + 0) {
  flex: 1;
}
.gds-wrap
  .filter-box
  .list-wrap
  .list
  > li
  .con
  .chk-list.col3
  li:nth-child(-n + 3) {
  margin-top: 0;
}
.gds-wrap .filter-box .list-wrap .list > li .con .chk-list.col3 li.w-auto {
  width: auto;
}
.gds-wrap
  .filter-box
  .list-wrap
  .list
  > li
  .con
  .chk-list.col3.n2
  li:nth-child(2) {
  width: 50%;
}
.gds-wrap
  .filter-box
  .list-wrap
  .list
  > li
  .con
  .chk-list.col3.n2
  li:nth-child(3) {
  margin-top: 7px;
}
.gds-wrap .filter-box .list-wrap .list > li .con .pairing-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}
.gds-wrap .filter-box .list-wrap .list > li .con .pairing-list li {
  margin-top: 10px;
  margin-right: 10px;
}
.gds-wrap
  .filter-box
  .list-wrap
  .list
  > li
  .con
  .pairing-list
  li:nth-child(-n + 3) {
  margin-top: 0;
}
.gds-wrap
  .filter-box
  .list-wrap
  .list
  > li
  .con
  .pairing-list
  li:nth-child(3n + 0) {
  margin-right: 0;
}
.gds-wrap .filter-box .list-wrap .list > li .con .pairing-list li button {
  width: 70px;
  height: 70px;
  padding-top: 40px;
  vertical-align: top;
  background-position: center 9px;
  background-size: 35px auto;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 10.5px;
  line-height: 11px;
  box-sizing: border-box;
}
.gds-wrap .filter-box .list-wrap .list > li .con .pairing-list li button.on {
  border-color: #a175db;
  font-weight: 500;
  color: #7651a6;
}
.gds-wrap .filter-box .list-wrap .btn-wrap {
  margin-top: 20px;
}

/* 술정보 : 상세 */
.goods-view {
  display: flex;
  justify-content: space-between;
}
.goods-view .side {
  width: 450px;
}
.goods-view .side > div {
  position: sticky;
  top: 260px;
}
.goods-view .side .visual {
  position: relative;
  width: 450px;
  height: 480px;
}
.goods-view .side .visual .swiper-slide {
  width: 100%;
  height: 480px;
}
.goods-view .side .visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.goods-view .side .visual .progress {
  display: none;
  position: absolute;
  bottom: -25px;
  left: 50%;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  width: 225px;
  box-sizing: border-box;
  z-index: 10;
}
.goods-view .side .visual .progress.on {
  display: flex;
}
.goods-view .side .visual .progress .scrollbar {
  position: relative;
  width: 100%;
  height: 3px;
  background: #939393;
}
.goods-view .side .visual .progress .scrollbar .scrollbar-drag {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #000;
  transition: width 0.7s ease;
}
.goods-view .side .share {
  display: flex;
  justify-content: center;
  margin: 60px 0 40px;
}
.goods-view .side .share li {
  margin: 0 15px;
}
.goods-view .side .share li .btn-fb {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_fb.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.goods-view .side .share li .btn-kakao {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_kakao.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.goods-view .side .share li .btn-url {
  width: 45px;
  height: 45px;
  background: url(../images/common/ico_share_url.svg) center / 100% auto
    no-repeat;
  text-indent: -9999em;
}
.goods-view .side .ranking {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 22px;
  background: #f5ecff;
}
.goods-view .side .ranking dt {
  width: 155px;
  padding-left: 30px;
  background: url(../images/common/ico_ranking.svg) left center / 22px auto
    no-repeat;
  font-weight: 500;
  font-size: 14px;
  box-sizing: border-box;
}
.goods-view .side .ranking dd {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}
.goods-view .side .award {
  display: flex;
  padding: 0 22px;
  margin-top: 10px;
}
.goods-view .side .award dt {
  width: 155px;
  height: 30px;
  padding-left: 30px;
  background: url(../images/common/ico_award.svg) left center / 22px auto
    no-repeat;
  font-weight: 500;
  font-size: 14px;
  line-height: 30px;
  box-sizing: border-box;
}
.goods-view .side .award dd {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 30px;
}
.goods-view .content {
  width: 770px;
}
.goods-view .content .info-box .ctg {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
}
.goods-view .content .info-box .ctg .arw {
  display: block;
  width: 6px;
  height: 20px;
  margin: 0 7px;
  background: url(../images/common/ico_arw04_right.svg) center 6px / 6px auto
    no-repeat;
}
.goods-view .content .info-box .tit {
  display: block;
  margin-top: 10px;
  font-weight: 500;
  font-size: 35px;
  line-height: 52px;
}
.goods-view .content .info-box p {
  margin-top: 5px;
  font-size: 14px;
  line-height: 21px;
}
.goods-view .content .info-box .add {
  margin-top: 20px;
}
.goods-view .content .info-box .rating {
  display: flex;
  align-items: center;
}
.goods-view .content .info-box .rating .star-rating {
  width: 100px;
  height: 20px;
}
.goods-view .content .info-box .rating .score {
  margin: 0 10px 0 5px;
  font-family: "Montserrat";
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.goods-view .content .info-box .rating .total {
  font-size: 13px;
  line-height: 1;
}
.goods-view .content .info-box .rating .total strong {
  font-family: "Montserrat";
  font-size: 14px;
  font-weight: 500;
}
.goods-view .content .tab-menu {
  margin: 50px 0 30px;
}
.goods-view .tab-menu:nth-of-type(1) {
  margin-top: 0;
}
.goods-view .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 40px 0 20px;
}
.goods-view .head.bd-b {
  padding-bottom: 18px;
  border-bottom: 1px solid #d9d9d9;
}
.goods-view .head h3 {
  display: block;
  font-weight: 500;
  font-size: 20px;
  color: #222;
  line-height: 30px;
}
.goods-view .head .btn-more {
  display: block;
  padding-right: 31px;
  background: url(../images/common/ico_arw_circle02.svg) right center / 26px
    auto no-repeat;
  font-weight: 500;
  font-size: 14px;
  line-height: 30px;
}
.goods-view .tab-menu + .head {
  margin-top: 40px;
}
.goods-view .tbl-basic {
  width: 100%;
  border-top: 1px solid #d9d9d9;
}
.goods-view .tbl-basic th,
.goods-view .tbl-basic td {
  border-bottom: 1px solid #d9d9d9;
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
}
.goods-view .tbl-basic th {
  background: #f7f7f7;
  padding-left: 40px;
  text-align: left;
  color: #222;
}
.goods-view .tbl-basic td {
  padding: 13px 40px;
  text-align: left;
  color: #222;
}
.goods-view .tbl-basic td .list {
  display: flex;
  flex-wrap: wrap;
}
.goods-view .tbl-basic td .list li {
  margin-left: 25px;
}
.goods-view .tbl-basic td .list li:nth-child(1),
.goods-view .tbl-basic td .list li:nth-child(5) {
  margin-left: 0;
}
.goods-view .desc {
  font-size: 14px;
  line-height: 24px;
}
.goods-view .tbl-basic + .desc {
  margin-top: 15px;
}
.goods-view .alertment {
  margin-top: 20px;
  font-size: 12px;
}
.goods-view .tasting {
  margin: 25px 0 40px;
}
.goods-view .tasting > li {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.goods-view .tasting > li:first-child {
  margin-top: 0;
}
.goods-view .tasting > li .tit {
  display: block;
  width: 140px;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 20px;
}
.goods-view .tasting > li .score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 356px;
  height: 15px;
}
.goods-view .tasting > li .score span {
  display: block;
  width: 55px;
  font-size: 14px;
  color: #222;
}
.goods-view .tasting > li .score span:last-child {
  text-align: right;
}
.goods-view .tasting > li .score ul {
  display: flex;
  overflow: hidden;
  width: 246px;
}
.goods-view .tasting > li .score ul li {
  flex: 1;
  height: 20px;
  margin: 0 0px;
  border: 1px solid #d9d9d9;
  border-left: 0;
  text-align: center;
  text-indent: -9999em;
  box-sizing: border-box;
}
.goods-view .tasting > li .score ul li:first-child {
  border-radius: 10px 0 0 10px;
  border-left: 1px solid #d9d9d9;
}
.goods-view .tasting > li .score ul li:last-child {
  border-radius: 0 10px 10px 0;
}
.goods-view .tasting > li .score ul li.on {
  border-color: #ac33fa;
  background: #ac33fa;
}
.goods-view .pairing {
  padding: 50px 0;
  border-radius: 10px;
  background: #f7f7f7;
  text-align: center;
}
.goods-view .pairing ul {
  display: inline-flex;
  flex-wrap: wrap;
  width: 640px;
}
.goods-view .pairing ul li {
  position: relative;
  width: 160px;
  padding-top: 45px;
  margin-top: 30px;
  background-position: center top;
  background-size: 35px auto;
  background-repeat: no-repeat;
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
}
.goods-view .pairing ul li::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 50px;
  background: #d9d9d9;
  content: "";
}
.goods-view .pairing ul li:nth-child(-n + 4) {
  margin-top: 0;
}
.goods-view .pairing ul li:nth-child(4n + 1)::after {
  display: none;
}
.goods-view .pairing + .desc {
  margin-top: 15px;
}
.goods-view .company-info .name {
  display: flex;
  align-items: center;
  padding-left: 5px;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 14px;
  line-height: 26px;
}
.goods-view .company-info .name .logo {
  width: auto;
  height: 33px;
}
.goods-view .company-info .name .link {
  display: inline-block;
  padding-right: 12px;
  margin-left: 25px;
  background: url(../images/common/ico_arw05_right.svg) right center / 6px auto
    no-repeat;
  font-size: 14px;
}
.goods-view .company-info + .btn-wrap {
  margin-top: 30px;
}
.goods-view .rating-review {
  display: flex;
  height: 165px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-sizing: border-box;
}
.goods-view .rating-review > div {
  width: 50%;
  box-sizing: border-box;
}
.goods-view .rating-review .rating-box {
  display: flex;
  position: relative;
  align-items: center;
  padding-left: 45px;
  text-align: center;
}
.goods-view .rating-review .rating-box::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 80px;
  background: #d9d9d9;
  content: "";
}
.goods-view .rating-review .rating-box .score {
  width: 130px;
  font-family: "Montserrat";
  font-weight: 600;
  font-size: 55px;
}
.goods-view .rating-review .rating-box .total {
  font-size: 14px;
}
.goods-view .rating-review .rating-box .total strong {
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 14px;
}
.goods-view .rating-review .review-guide {
  display: flex;
  position: relative;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.goods-view .rating-review .review-guide p {
  display: block;
  padding-top: 28px;
  background: url(../images/common/ico_msg.svg) center top / 24px auto no-repeat;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.goods-view .rating-review .review-guide a {
  display: inline-block;
  padding-right: 31px;
  margin-top: 10px;
  background: url(../images/common/ico_arw_circle.svg) right center / 26px auto
    no-repeat;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #ac33fa;
}
.goods-view .review-list {
  margin-top: 40px;
}
.goods-view .banner {
  margin: 50px 0;
}
.goods-view .banner img {
  max-width: 100%;
}
.goods-view .story {
  margin-bottom: 40px;
}
.goods-view .story .slide {
  margin-top: 20px;
}
.goods-view .story .slide .swiper-slide {
  width: 240px;
  margin-right: 25px;
}
.goods-view .story .slide .swiper-slide:last-child {
  margin-right: 0;
}
.goods-view .story .slide .swiper-slide .img {
  width: 240px;
  height: 160px;
}
.goods-view .story .slide .swiper-slide .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.goods-view .story .slide .swiper-slide .info {
  padding: 10px 0;
}
.goods-view .story .slide .swiper-slide .info .tit {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.goods-view .story .slide .swiper-slide .info p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 20px;
  color: #666;
}
.goods-view .story .slide .progress {
  display: none;
}
.goods-view .picture {
  margin-bottom: 40px;
}
.goods-view .picture .slide {
  margin-top: 20px;
}
.goods-view .picture .slide .swiper-slide {
  width: 140px;
  margin-right: 17.5px;
}
.goods-view .picture .slide .swiper-slide:last-child {
  margin-right: 0;
}
.goods-view .picture .slide .swiper-slide .img {
  width: 140px;
  height: 140px;
}
.goods-view .picture .slide .swiper-slide .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.goods-view .picture .slide .progress {
  display: none;
}
.goods-view .recomm {
  margin-top: 20px;
}
.goods-view .recomm .slide {
  margin-top: 20px;
}
.goods-view .recomm .slide .swiper-slide {
  width: 170px;
  margin-right: 30px;
}
.goods-view .recomm .slide .swiper-slide:last-child {
  margin-right: 0;
}
.goods-view .recomm .slide .swiper-slide .img {
  width: 170px;
  height: 170px;
}
.goods-view .recomm .slide .swiper-slide .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.goods-view .recomm .slide .swiper-slide .info {
  padding: 10px 0;
}
.goods-view .recomm .slide .swiper-slide .info .tit {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods-view .recomm .slide .swiper-slide .info .rating {
  display: flex;
  align-items: center;
  margin-top: 9px;
}
.goods-view .recomm .slide .swiper-slide .info .rating .score {
  display: block;
  padding-left: 22px;
  background: url(../images/common/ico_rating.svg) left center / 18px auto
    no-repeat;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.goods-view .recomm .slide .swiper-slide .info .rating .num {
  display: block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  color: #666;
}
.goods-view .recomm .slide .progress {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  box-sizing: border-box;
  z-index: 10;
}
.goods-view .recomm .slide .progress.on {
  display: flex;
}
.goods-view .recomm .slide .progress .scrollbar {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
}
.goods-view .recomm .slide .progress .scrollbar .scrollbar-drag {
  position: absolute;
  top: -1.5px;
  left: 0;
  width: 0;
  height: 3px;
  background: #000;
  transition: width 0.7s ease;
}
.goods-view .recomm .slide .progress .pagination {
  width: auto;
  font-family: "Montserrat";
  font-size: 12px;
  color: #000;
  line-height: 13px;
}

/* 술정보 : 전체리뷰보기 */
.goods-review {
  display: flex;
  justify-content: space-between;
}
.goods-review .side {
  width: 450px;
}
.goods-review .side > div {
  position: sticky;
  top: 260px;
}
.goods-review .side .visual {
  position: relative;
  width: 450px;
  height: 480px;
}
.goods-review .side .visual .swiper-slide {
  width: 100%;
  height: 480px;
}
.goods-review .side .visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.goods-review .side .visual .progress {
  display: none;
  position: absolute;
  bottom: -25px;
  left: 50%;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  width: 225px;
  box-sizing: border-box;
  z-index: 10;
}
.goods-review .side .visual .progress.on {
  display: flex;
}
.goods-review .side .visual .progress .scrollbar {
  position: relative;
  width: 100%;
  height: 3px;
  background: #939393;
}
.goods-review .side .visual .progress .scrollbar .scrollbar-drag {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #000;
  transition: width 0.7s ease;
}
.goods-review .side .info-box {
  margin-top: 50px;
}
.goods-review .side .info-box .ctg {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
}
.goods-review .side .info-box .ctg .arw {
  display: block;
  width: 6px;
  height: 20px;
  margin: 0 7px;
  background: url(../images/common/ico_arw04_right.svg) center 6px / 6px auto
    no-repeat;
}
.goods-review .side .info-box .tit {
  display: block;
  margin-top: 10px;
  font-weight: 500;
  font-size: 35px;
  line-height: 52px;
}
.goods-review .side .info-box p {
  margin-top: 5px;
  font-size: 14px;
  line-height: 21px;
}
.goods-review .side .info-box .add {
  margin-top: 20px;
}
.goods-review .side .info-box .rating {
  display: flex;
  align-items: center;
}
.goods-review .side .info-box .rating .star-rating {
  width: 100px;
  height: 20px;
}
.goods-review .side .info-box .rating .score {
  margin: 0 10px 0 5px;
  font-family: "Montserrat";
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.goods-review .side .info-box .rating .total {
  font-size: 13px;
  line-height: 1;
}
.goods-review .side .info-box .rating .total strong {
  font-family: "Montserrat";
  font-size: 14px;
  font-weight: 500;
}
.goods-review .content {
  width: 770px;
}

/* 술정보 : 술랭킹 테마상세 */
.ranking-thema-view .info-box {
  padding-top: 20px;
}
.ranking-thema-view .info-box .tit {
  display: block;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: #000;
}
.ranking-thema-view .info-box p {
  font-size: 16px;
  line-height: 28px;
  color: #222;
}
.ranking-thema-view .info-box .date {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 18px;
  color: #666;
}
.ranking-thema-view .gds-list {
  padding-top: 50px;
  margin-top: 50px;
  border-top: 1px solid #d9d9d9;
}

/* 술이야기 : 주류뉴스 */
.story-news {
  margin-top: -40px;
}
.story-news .new-article {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  padding: 80px 0;
  margin-bottom: 80px;
  background: #f7f7f7;
}
.story-news .new-article ul {
  display: flex;
  justify-content: space-between;
  width: 1280px;
  margin: 0 auto;
}
.story-news .new-article ul li {
  width: 620px;
}
.story-news .new-article ul li a {
  display: block;
}
.story-news .new-article ul li .img {
  width: 620px;
  height: 400px;
}
.story-news .new-article ul li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-news .new-article ul li .info {
  margin-top: 15px;
}
.story-news .new-article ul li .info .tit {
  display: block;
  display: -webkit-box;
  width: 100%;
  font-weight: 500;
  font-size: 24px;
  line-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
}

/* 이용약관 */
.doc h3 {
  display: block;
  margin-top: 70px;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
}
.doc h3:nth-of-type(1) {
  margin-top: 0;
}
.doc h4 {
  display: block;
  margin: 30px 0 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}
.doc p {
  font-size: 15px;
  line-height: 25px;
  color: #222;
}
.doc ul {
  margin-top: 5px;
}
.doc ul > li {
  font-size: 12px;
  line-height: 18px;
  color: #222;
}
.doc ol {
  counter-reset: number 0;
}
.doc ol > li {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  line-height: 34px;
  color: #222;
}
.doc ol > li:first-child {
  margin-top: 0;
}
.doc ol > li::before {
  position: absolute;
  top: 0;
  left: 0;
  counter-increment: number 1;
  content: counter(number) ".";
}
.doc ol > li ol {
  margin-bottom: 10px;
}
.doc ol > li ol li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 28px;
  color: #222;
}
.doc ol > li ol li:first-child {
  margin-top: 0;
}
.doc ol > li ol li::before {
  position: absolute;
  top: 0;
  left: 0;
}
.doc ol > li ol li:nth-child(1)::before {
  content: "가.";
}
.doc ol > li ol li:nth-child(2)::before {
  content: "나.";
}
.doc ol > li ol li:nth-child(3)::before {
  content: "다.";
}
.doc ol > li ol li:nth-child(4)::before {
  content: "라.";
}
.doc ol > li ol li:nth-child(5)::before {
  content: "마.";
}
.doc ol > li ol li:nth-child(6)::before {
  content: "바.";
}
.doc ol > li ol li:nth-child(7)::before {
  content: "사.";
}
.doc a {
  vertical-align: top;
}
.doc .previous {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-bottom: 50px;
}
.doc .previous .tit {
  margin-right: 20px;
  font-weight: 500;
  font-size: 18px;
  color: #222;
}
.doc .previous select {
  width: 300px;
}
.doc .bul li {
  font-size: 15px;
  line-height: 25px;
}

/* 시스템안내 */
.page-error {
  padding-top: 25px;
}
.page-error .info {
  padding-top: 178px;
  background: url(../images/common/bg_error.svg) center top / 150px auto
    no-repeat;
  text-align: center;
}
.page-error .info h4 {
  display: block;
  font-weight: 400;
  font-size: 38px;
  line-height: 65px;
}
.page-error .info p {
  margin-top: 15px;
  font-size: 18px;
  line-height: 34px;
  color: #222;
}
.page-error .info p strong {
  font-weight: 500;
}
.page-error .info p + p {
  margin-top: 25px;
}
.page-error .info .contact {
  width: 1057px;
  margin: 45px auto 20px;
  background: #f7f7f7;
  text-align: center;
}
.page-error .info .contact ul {
  display: inline-flex;
  align-items: center;
  height: 86px;
}
.page-error .info .contact ul li {
  margin: 0 10px;
  font-size: 18px;
  line-height: 24px;
  color: #222;
}
.page-error .info .contact ul li a {
  vertical-align: top;
}

blockquote {
  border-left: 5px solid #ccc;
  font-style: italic;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  padding-left: 1.5em;
  padding-right: 1.5em;
}




/* 20230707 텍스트 롤링 추가 */
/* #spin {
  color:#fff;
}
#spin:after {
  content:"힙한";
  animation: spin 4s linear infinite;
}
@keyframes spin {
  20% { content:"힙한"; }
  37.5% { content:"꽂힌"; }
  55% { content:"궁금한"; }
  77.5% { content:"마시고 싶은"; }
  100% { content:"힙한"; }
}
*/
.main .search .camera .phoneButton{
  position: absolute;
  width: 42px;
  top: 394px;
  left: calc(50% - 21px);
  z-index: 2;
}

.textSlide{
  width: auto!important;
  height: 88px!important;
  overflow: hidden;
  transition: all .5s ease-in-out;
}

.textSlide.active1{
  width: 130px!important;
}

.textSlide.active2{
  width: 130px!important;
}

.textSlide.active3{
  width: 195px!important;
}

.textSlide.active4{
  width: 320px!important;
}


.main .search .camera .swiper-pagination {
  position: absolute;
  left: 21px;
  top: 345px;
  width: 170px;
  z-index: 5;
  text-align: unset;
  display: flex;
  gap: 10px;
}

/* 230721 수정 */
.swiper-flex{
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px 7px;
  background: linear-gradient(
    147.17deg,
    #7625f3 -71.1%,
    #6016d2 3.63%,
    #ae159e 55.42%,
    #ae159e 91.93%
  );
  font-weight: 700;
  letter-spacing: -0.02em;
}

.swiper-flex .side_wrap{
}

.textSlide .swiper-slide span{
  display: none;
}

.textSlide.active1 .swiper-slide span.text1 {
  display: block;
  position: absolute;
  width: 130px;
  left:calc( 50% - 65px );
  animation: slideUd .7s 1 ease-in;
}

.textSlide.active2 .swiper-slide span.text2 {
  display: block;
  position: absolute;
  width: 130px;
  left:calc( 50% - 65px );
  animation: slideUd .7s 1 ease-in;
}

.textSlide.active3 .swiper-slide span.text3 {
  display: block;
  position: absolute;
  width: 195px;
  left:calc( 50% - 97.5px );
  animation: slideUd .7s 1 ease-in;
}

.textSlide.active4 .swiper-slide span.text4 {
  display: block;
  position: absolute;
  width: 320px;
  left:calc( 50% - 160px );
  animation: slideUd .7s 1 ease-in;
}


@keyframes slideUd {
    0%   {transform: translateY(100px);}
    75%  {transform: translateY(-10px);}
    100% {transform: translateY(-0px);}
}

.textSlide.active1 .swiper-slide span.text1{
  display: block;
}
.textSlide.active2 .swiper-slide span.text2{
  display: block;
}
.textSlide.active3 .swiper-slide span.text3{
  display: block;
}
.textSlide.active4 .swiper-slide span.text4{
  display: block;
}

.main .search .camera .swiper-pagination span{
  width: 100%;
  height: 28px;
  display: block;
  border-radius: 0;
  opacity: 1;
}

.main .search .camera .swiper-pagination span:nth-child(1){
  background: url(../images/main/btn_label.png) center no-repeat;
  background-color: rgba(255, 255, 255, 0.5);
}

.main .search .camera .swiper-pagination span:nth-child(1).swiper-pagination-bullet-active{
  background-color: rgba(255, 255, 255, 1);
}

.main .search .camera .swiper-pagination span:nth-child(2){
  background: url(../images/main/btn_barcode.png) center no-repeat;
  background-color: rgba(255, 255, 255, 0.5);
}

.main .search .camera .swiper-pagination span:nth-child(2).swiper-pagination-bullet-active{
  background-color: rgba(255, 255, 255, 1);
}


/* 페어링 새로운 레이아웃 추가 230712 */

.pairing-flex{
  display: flex;
  gap: 75px;
  align-items: center;
  justify-content: center;
}


.pairing-flex > div{
  display: flex;
}

.pairing-flex > div img{
  display: block;
}

.pairing-flex .pf-left {
  flex-direction: row;
  align-items: flex-end;
}

.pairing-flex .pf-center {
  flex-direction: column;
  margin-top: 40px;
}

.pairing-flex .pf-center img{
  margin: -5px 0 0  -10px;
  width: 392px;
}

.pairing-flex .pf-right{
  margin-top:  -52px;
  flex-direction: column;
}
.pairing-flex .pf-right img{
  width: 389px;
}

.main .pairing .txt{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main .pairing .txt1{
  background: url(../images/main/pairing_1_icon.png) right top/92px no-repeat;
  z-index: 10;
  padding-top: 109px;
  margin-right: 26px;
  margin-bottom: 56px;
  text-align: right;
}

.main .pairing .txt2{
  height: 92px;
  margin-left: 21px;
  background: url(../images/main/pairing_2_icon.png) left center/92px no-repeat;
  z-index: 10;
  padding-left: 108px;
}

.main .pairing .txt3{
  height: 108px;
  margin-top: 13px;
  background: url(../images/main/pairing_3_icon.png) left top/92px no-repeat;
  z-index: 10;
  padding-left: 119px;
}