@charset "utf-8";
@import url("../fonts/font.css");

/* Total */
html,
body {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
}

html {
  position: relative;
  min-height: 100%;
  min-width: 320px;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover,
a:focus {
  cursor: pointer;
  /* text-decoration: none;
  color: inherit; */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
pre {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a.focus-visible:focus,
button.focus-visible:focus {
  outline: none;
  /* box-shadow: inset 0 0 0 2px #2cb693; */
  box-shadow: inset 0 0 0 2px #dcb7ff;
}

#page-container {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: calc(var(--vh, 1vh) * 100);
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.overflow-h {
  overflow: hidden;
}

.container {
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  width: calc(100% - 30px);
  max-width: 100%;
  box-sizing: border-box;
  min-height: 1px;
  padding: 0;
}

@media (min-width: 375px) {
  .container {
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 1px;
  }
}

@media (min-width: 768px) {
  .container {
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 1px;
  }
}

@media (min-width: 1024px) {
  .container {
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    width: calc(100% - 44px);
    max-width: 100%;
    box-sizing: border-box;
    min-height: 1px;
  }
}

@media (min-width: 1280px) {
  .container {
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    width: 1200px;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 1px;
  }
}

/* 배너 tpye */
.banner-tit01 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 36px;
}

.banner-tit01 span {
  display: inline-block;
  font-weight: 300;
  margin-right: 10px;
}

.banner-cont-img {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-type01.swiper-container {
  overflow: visible;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

.banner-type01 .cont {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px 35px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.banner-type01 .cont>a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.banner-type01 .cont .img {
  max-width: 50%;
  width: 100%;
  margin-right: 20px;
  border-radius: 8px;
}

.banner-type01 .cont .img::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.banner-type01 .cont .info {
  max-width: 50%;
  width: 100%;
  margin-left: 20px;
  padding: 20px 0 15px;
}

.banner-type01 .cont .info .info-title {
  font-size: 18px;
  font-weight: 500;
  color: #111;
  margin-bottom: 20px;
}

.banner-type01 .cont .info .info-text {
  font-size: 16px;
  color: #676767;
  font-weight: 300;
}

/* Header */
#header {
  position: sticky !important;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1042;
  border-bottom: 1px solid #eee;
}

#header .backBtn,
#header .historyBack {
  background-color: #fff;
  border: none;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

#header .backBtn:hover {
  background-color: #fff;
}

#header .header-cont {
  position: relative;
  z-index: 99;
}

.header-container {
  position: relative;
  max-width: 100%;
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  height: 100%;
}

.header-layout {
  height: 50px;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: space-between;
}

#header .offBtn {
  display: none;
}

@media (max-width: 768px) {

  #page-container:has(.prod-view) #header .offBtn,
  #page-container:has(.subpage-box) #header .offBtn,
  #page-container:has(.cartPage) #header .offBtn {
    display: block;
    font-size: 20px;
  }
}

.logo {
  display: block;
}

.logo .mlogo {
  display: none;
}

.logo .wlogo {
  display: block;
}

.util ul {
  padding: 0;
}

.util ul>li {
  position: relative;
  float: left;
  padding: 0 10px;
}

.util ul>li a {
  color: #333;
  font-size: 14px;
}

.util ul>li.icon-btn a {
  color: #999;
  display: block;
}

.util ul>li.icon-btn a i {
  font-size: 28px;
}

.util ul>li .dropdown-menu {
  max-width: 150px;
  right: 0;
  left: auto;
  margin-top: 10px;
}

.util ul>li .dropdown-menu>li {
  float: none;
  padding: 0;
}

.util ul>li .dropdown-menu>li>a {
  display: block;
  padding: 12px 10px;
  color: #333;
}

.util ul>li.login a {
  color: #999;
  font-size: 28px;
}

.util ul>li.login a:hover {
  color: #fff;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: "";
}

.cover-bg.on {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1015;
}

.nav-toggle {
  display: block;
  border-radius: 3px;
}

/* header new */
.head-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  position: relative;
  z-index: 1042;
  background-color: #fff;
}

.head-tl {
  display: flex;
  align-items: center;
  gap: 5px;
}

.util,
.util>ul li {
  display: flex;
  gap: 20px;
  align-items: center;
}

.head-tl .search_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  background-color: #eee;
  border-radius: 50px;
  padding: 0 10px 0 20px;
}

.head-tl .search_inner input {
  width: 260px;
  height: 30px;
  border: none;
  background: none;
  font-size: 16px;
}

@media (max-width: 500px) {
  .head-tl .search_inner input {
    width: 200px;
  }
}

.head-tl .search_inner input:focus {
  outline: none;
}

.head-tl .search_inner button {
  border: none;
  background: none;
}

.logo .img {
  width: 60px;
  height: 60px;
  border-radius: 1000px;
  background-color: #9627ff;
}

.mobile-show {
  display: none;
  font-size: 16px;
  font-weight: 700;
}

.mobileShow-txt {
  display: none;
  color: #212121;
  font-weight: 500;
}

.headerIcon {
  width: 24px;
  height: 24px;
  font-size: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headerIcon:hover {
  text-decoration: none;
}

.headerIcon.prodView-homeIcon {
  display: none;
}

.headerIcon .shopping-num {
  position: absolute;
  background-color: #f00;
  right: -4px;
  top: -4px;
  width: 14px;
  height: 14px;
  border: solid 1px #fff;
  border-radius: 50px;
  font-size: 8px;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

body:has(.edit-wrap) {
  overflow: auto;
}

@media (max-width: 768px) {
  #page-container:has(.prod-view) .headerIcon.prodView-homeIcon {
    display: block;
  }

  .headerIcon.moblie-userIcon {
    display: none;
  }

  .head-top {
    height: 56px;
    background-color: rgba(0, 0, 0, 0);
  }

  .logo {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .logo .img {
    width: 32px;
    height: 32px;
  }

  .logo span {
    display: none;
  }

  .mobile-hidden {
    display: none;
  }

  #page-container:has(.searchPage) .head-tl>.mobile-hidden {
    display: block;
  }

  #page-container:has(.searchPage) .head-tl>.logo,
  #page-container:has(.edit-wrap) .logo {
    display: none;
  }

  .mobile-show {
    display: block;
  }
}

.searchPage .result-mnf li a {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* header Search  */
.search_form {
  background: rgba(0, 0, 0, 0.85);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: table;
  padding: 0 10px;
  text-align: center;
}

.search_form .search_div {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.search_form .search_inner {
  position: relative;
  width: 100%;
  height: 40px;
  border-bottom: solid 2px #fff;
  overflow: hidden;
  z-index: 999;
  display: inline-block;
}

.search_form .search_inner .search_input {
  background: none;
  float: left;
  width: 100%;
  height: 40px;
  line-height: 48px;
  padding-left: 15px;
  font-size: 1.5rem;
  color: #fff !important;
  border: 0;
  outline: 0;
}

.search_form .search_inner .search_input::placeholder {
  color: #fff !important;
}

.search_form .search_inner .search_btn {
  position: absolute;
  background: none;
  top: 0;
  right: 0;
  width: 50px;
  height: 40px;
  border: 0;
  color: #fff;
}

.search_form .search_inner .search_btn i {
  font-size: 24px;
}

.search_form .search_inner .search_btn:hover {
  background: none;
}

.search_form .close {
  position: absolute;
  top: 12px;
  right: 10px;
  opacity: 1;
}

.search_form .close i {
  font-size: 32px !important;
  color: #fff;
}

.tag_search_form {
  position: static;
  padding: 0;
  display: block;
  height: auto;
  background: none;
}

/* 모바일 */
.m-util {
  display: none;
}

#m-sidemenu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: #f5f5f5;
  width: 100%;
  height: 100%;
  z-index: 1050;
  overflow-y: scroll;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

#m-sidemenu .side-header {
  position: relative;
  background: #fff;
  position: relative;
  height: 50px;
  border-bottom: 1px solid #f5f5f5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.side-header-list-top {
  border-bottom: 1px solid #eee;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
}

.side-header-list-top li {
  width: 50%;
}

.side-header-list-top li>a {
  display: block;
  padding: 12px 0;
  text-align: center;
  border-right: 1px solid #eee;
}

.side-header-list-top li:last-child>a {
  border-right: 0;
}

.side-header-list-top li>a .txt {
  display: block;
  margin: 0 auto;
  font-size: 13px;
  color: #676767;
}

.side-header-list-top li>a i {
  font-size: 16px;
  color: #103258;
}

.side-header-list-bottom {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  margin-bottom: 10px;
}

.side-header-list-bottom>li {
  width: 25%;
}

.side-header-list-bottom>li>a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 12px 0;
  border-right: 1px solid #eee;
}

.side-header-list-bottom>li:last-child>a {
  border-right: 0;
}

.side-header-list-bottom>li>a .flag {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.side-header-list-bottom>li>a .txt {
  display: block;
  font-size: 13px;
  font-weight: 300;
  margin-top: 5px;
}

.side-header-list-bottom>li>a .flag.en {
  background-image: url(/assets/common/img/basic/us.png);
}

.side-header-list-bottom>li>a .flag.jp {
  background-image: url(/assets/common/img/basic/jp.png);
}

.side-header-list-bottom>li>a .flag.cn {
  background-image: url(/assets/common/img/basic/cn.png);
}

.side-header-list-bottom>li>a img {
  max-width: 68px;
}

#m-sidemenu .side-header .logo {
  margin: 0px 0 0 8px;
}

#m-sidemenu .side-header .close-btn {
  position: absolute;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 0;
  text-align: center;
  color: #333;
  font-size: 24px;
}

.m-side-login {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 300;
}

.m-side-login:hover {
  color: #fff;
}

.m-side-admin-btn {
  display: inline-block;
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translate(0px, -50%);
}

#m-sidemenu .side-login .login-header {
  position: relative;
  background: #fff;
  padding: 15px 10px;
}

#m-sidemenu .side-login .login-header a {
  display: block;
  color: #333;
  text-decoration: none;
}

#m-sidemenu .side-login .login-header img {
  width: 40px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 50%;
}

#m-sidemenu .side-login .login-btn {
  width: 100%;
}

#m-sidemenu .side-login .login-btn ul::after {
  content: "";
  display: block;
  clear: both;
}

#m-sidemenu .side-login .login-btn ul li {
  position: relative;
  float: left;
  width: 33.3%;
}

#m-sidemenu .side-login .login-btn ul li:first-child:before {
  display: none;
}

#m-sidemenu .side-login .login-btn ul li:before {
  content: "";
  background: #ddd;
  position: absolute;
  left: 0;
  top: 50%;
  height: 20px;
  width: 1px;
  margin-top: -10px;
}

#m-sidemenu .side-login .login-btn ul li a {
  display: block;
  padding: 10px 0;
  color: #555;
  font-size: 15px;
  text-align: center;
}

#m-sidemenu .side-login .login-btn ul li.login-before {
  width: 50% !important;
}

#m-sidemenu .side-body-tit {
  font-size: 16px;
  padding: 10px 0;
  font-weight: 700;
  background-color: #fff;
}

#m-sidemenu .side-body {
  background: #fff;
}

#m-sidemenu .side-body .navi>li {
  position: relative;
  border-bottom: solid 1px #ddd;
  transition: all 0.3s;
}

#m-sidemenu .side-body .navi>li>a {
  display: block;
  padding: 18px 10px;
  font-size: 16px;
  color: #444;
}

#m-sidemenu .side-body .navi>li>a:hover {
  font-weight: bold;
}

#m-sidemenu .side-body .navi>li .dropdown-menu {
  position: relative;
  background: #fafafa;
  float: none;
  border: 0;
  border-top: solid 1px #ddd;
  box-shadow: none;
  padding: 10px;
  transition: all 0.3s;
}

#m-sidemenu .side-body .navi>li .dropdown-menu>ul>li>a {
  display: block;
  padding: 8px 5px;
  font-size: 15px;
  color: #777;
}

#m-sidemenu .side-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}

#m-sidemenu .side-footer>li {
  width: 33.3333%;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -moz-flex: 0 0 33.33333%;
  -webkit-flex: 0 0 33.33333%;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  padding: 5px;
  background-color: #fff;
}

#m-sidemenu .side-footer>li>a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#m-sidemenu .side-footer>li>a>img {
  max-width: 80px;
}

/* Footer */
#footer {
  position: relative;
  height: auto;
  border-top: 1px solid #eee;
  background-color: #fff;
  margin-bottom: 30px;
  color: #767676;
}

.footer-top {
  height: 50px;
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-top>* a:hover {
  text-decoration: none;
  color: #000;
}

.container {
  padding: 0;
}

.footer-top .footer-sns a {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 6px;
}

.footer-top .footer-sns a:last-child {
  margin-right: 0;
}

#footer .footer-menu {
  display: flex;
  align-items: center;
}

#footer .footer-menu>li {
  position: relative;
  margin-right: 20px;
}

#footer .footer-menu>li>a {
  font-size: 16px;
  color: #000;
}

#footer .footer-bottom {
  position: relative;
  margin: 30px 0 10px 0;
  display: flex;
  justify-content: space-between;
}

#footer .footer-info>div {
  display: flex;
}

#footer .footer-info>div+div {
  margin-top: 5px;
}

#footer .footer-info>div>p {
  font-size: 14px;
  color: #000;
  margin-right: 20px;
}

#footer .footer-info>div>p>b {
  color: #000;
}

#footer .footer-info .copyright {
  margin-top: 20px;
  font-size: 13px;
  color: #000;
  opacity: 0.7;
}

#footer .footer-info .info-arrow {
  background-color: #fff;
  border: none;
  font-size: 14px;
  display: none;
}

#footer .info-text {
  gap: 12px;
}

#footer .info-text>div {
  display: flex;
  gap: 12px;
}

.familyBtn {
  width: 200px;
  height: 36px;
  position: relative;
}

.familyBtn button {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: none;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.familySite {
  position: absolute;
  width: 100%;
  bottom: 36px;
  left: 0;
  background-color: #eee;

  border-radius: 8px 8px 0 0;
  height: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.familyBtn.active .familySite {
  height: 120px;
  transition: all 0.2s ease;
}

.familyBtn.active button {
  border-radius: 0 0 8px 8px;
  background-color: #f9f9f9;
}

.familySite ul {
  padding: 4px 0;
}

.familySite li a {
  display: block;
  padding: 8px 10px;
  margin: 4px;
}

.familySite li a:hover {
  color: #000;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.familySite li a:focus {
  text-decoration: none;
  color: #000;
}

.mobile-footer,
.web-footer {
  display: flex;
  font-size: 16px;
  align-items: center;
}

.mobile-footer {
  display: none;
  font-size: 12px;
  margin-bottom: 10px;
}

.web-footer li {
  margin-right: 20px;
}

.mobile-footer li {
  padding: 0 10px;
  border-right: solid 1px #767676;
}

.mobile-footer li:nth-child(1) {
  padding-left: 0;
}

.mobile-footer li:nth-last-child(1) {
  padding-right: 0;
  border: none;
}

.web-footer li:nth-last-child(1) {
  margin-right: 0;
}

.mobile-footer a {
  color: #767676;
}

@media (max-width: 768px) {
  #footer .footer-menu li:nth-child(1) {
    margin-right: 0;
  }

  .web-footer {
    display: none;
  }

  .mobile-footer {
    display: flex;
  }

  #footer .footer-bottom {
    flex-direction: column;
    gap: 20px;
  }

  #footer .footer-info h4 {
    display: flex;
  }

  #footer .footer-info .info-arrow {
    display: block;
  }

  #footer .info-arrow .fa-chevron-down.active::before {
    content: "\f077";
  }

  #footer .footer-info .info-text {
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s ease;
  }

  #footer .footer-info .info-text.active {
    min-height: 86px;
    max-height: 120px;
    transition: all 0.2s ease;
  }

  #footer .info-text>div {
    flex-direction: column;
    gap: 12px;
  }

  .familyBtn {
    width: 120px;
  }
}

.bottom-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1014;
}

.bottom-btn>* {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  border: none;
}

.bottom-btn .recent-btn {
  position: relative;
}

.bottom-btn .recent-img {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  border: solid 1px #fff;

  background-repeat: no-repeat;
  object-fit: cover;
}

.bottom-btn .recent-btn p {
  position: absolute;
  width: 100%;
  text-align: center;
  padding-top: 2px;
  height: 20px;
  bottom: -2px;
  border-radius: 50px;
  background-color: #9627ff;
  color: #fff;
}

.bottom-btn .btnTop {
  display: none;
}

@media (max-width: 768px) {
  .bottom-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .bottom-btn>* {
    width: 50px;
    height: 50px;
  }

  .bottom-btn .recent-btn img {
    height: 50px;
  }

  .bottom-btn .recent-btn p {
    display: none;
  }
}

/* swiper banner */
.main-banner-swiper,
.event-banner-swiper {
  width: 100%;
  height: auto;
}

.main-banner-swiper .swiper-slide,
.event-banner-swiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
}

.main-banner-swiper .swiper-slide {
  background-size: cover;
  background-position: 50%, 50%;
  background-repeat: no-repeat;
  height: 600px;
}

.event-banner-swiper .swiper-slide {
  background-size: cover;
  /* background-position: top center; */
  background-position: 50%, 50%;
  background-repeat: no-repeat;
  height: 180px;
}

.main-banner-swiper .inner,
.event-banner-swiper .inner {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
  background-position: top center;
  background-repeat: no-repeat;
}

.event-banner-swiper .inner {
  width: 100%;
}

.main-banner-swiper .inner .txt {
  max-width: 600px;
  padding-left: 20px;
  width: 100%;
  animation-name: fadeOuttxt;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.main-banner-swiper .swiper-slide-active .inner .txt.active {
  animation-name: fadeIntxt;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

.main-banner-swiper .inner .txt .tit {
  font-size: 42px;
  font-weight: 800;
  line-height: 62px;
  letter-spacing: 2px;
  margin-bottom: 10px;

  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  transition: all ease 0.4s;
}

.main-banner-swiper .inner .txt .sub {
  font-size: 18px;
  font-weight: 300;

  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: all ease 0.4s;
}

.main-banner-swiper .inner .txt .detailBtn {
  margin-top: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 140px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color ease 0.4s;
  color: #fff;

  transition: all ease 0.4s;
}

.main-banner-swiper .inner .txt .detailBtn:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.6);
  transition: background-color ease 0.4s;
}

@keyframes fadeIntxt {
  0% {
    transform: translateX(10%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOuttxt {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(10%);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .main-banner-swiper .inner .txt .tit {
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0px;
    margin-bottom: 12px;

    transition: all ease 0.4s;
  }

  .main-banner-swiper .inner .txt .sub {
    font-size: 14px;
    font-weight: 300;

    transition: all ease 0.4s;
  }

  .main-banner-swiper .inner .txt .detailBtn {
    margin-top: 8px;
    font-size: 12px;
    height: 30px;
    width: 80px;

    transition: all ease 0.4s;
  }
}

.main-banner-swiper .inner>div>p,
.event-banner-swiper .inner>div>p {
  font-size: 32px;
}

.main-banner-swiper .inner>div>.mainBtn,
.event-banner-swiper .inner>div>.mainBtn {
  border: solid 1px #7ebdb0;
  border-radius: 5px;
  display: inline-block;
  padding: 12px 35px;
  font-size: 18px;
}

.main-banner-swiper .inner>div>.mainBtn:hover {
  background: #7ebdb0;
  color: #fff;
}

.main-banner-swiper .inner>div>img,
.event-banner-swiper .inner>div>img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: inline-block;
  margin-bottom: 20px;
}

.main-banner-swiper .inner:after,
.event-banner-swiper .inner:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.main-banner-swiper .controls-rel {
  position: relative;
  width: 100%;
  height: 40px;
}

.main-banner-swiper .controls-abs {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.main-banner-swiper .arrow-box {
  display: block;
  width: 150px;
  position: relative;
}

.main-banner-swiper .swiper-pagination {
  width: 150px;
  display: flex;
  justify-content: center;
  color: #fff;
  gap: 10px;
  top: 12px;
}

.main-banner-swiper .controls-box {
  background: rgba(0, 0, 0, 0.4);
  width: 200px;
  height: 40px;
  position: absolute;
  bottom: 20px;
  right: 40px;
  margin-left: -100px;
  z-index: 100;
  overflow: hidden;
  border-radius: 5px;
}

.main-banner-swiper .controls-box .button-prev,
.main-banner-swiper .controls-box .button-next {
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 99;
}

.main-banner-swiper .controls-box .button-prev {
  left: 0;
}

.main-banner-swiper .controls-box .button-next {
  right: 0;
}

.main-banner-swiper .controls-box .button-next:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f105";
  font-weight: 900;
  color: #fff;
  font-size: 20px;
}

.main-banner-swiper .controls-box .button-prev:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f104";
  font-weight: 900;
  color: #fff;
  font-size: 20px;
}

@media (max-width: 768px) {
  .main-banner-swiper .controls-box {
    bottom: 10px;
    right: 20px;
    height: 26px;
    width: 70px;
    border-radius: 50px;
  }

  .main-banner-swiper .controls-box .swiper-autoplay,
  .main-banner-swiper .controls-box .button-prev,
  .main-banner-swiper .controls-box .button-next {
    display: none;
  }

  .main-banner-swiper .swiper-pagination {
    width: 70px;
    gap: 3px;
    top: 6px;
    font-size: 12px;
  }
}

@media (max-width: 500px) {
  .main-banner-swiper .controls-box {
    bottom: 10px;
    right: 10px;
  }
}

.sub-banner {
  margin-top: 40px;
  margin-bottom: 100px;
}

.event-banner-swiper .inner {
  display: none;
}

.event-banner-swiper .swiper-slide {
  border-radius: 10px;
}

.event-banner-swiper .swiper-controls {
  background: rgba(0, 0, 0, 0.4);
  width: 72px;
  height: 24px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  overflow: hidden;
  border-radius: 50px;
}

@media (max-width: 768px) {
  .event-banner-swiper .swiper-controls {
    background: rgba(0, 0, 0, 0.4);
    width: 48px;
    height: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    overflow: hidden;
    border-radius: 50px;
  }

  .event-banner-swiper .swiper-controls .controls-box {
    width: 48px !important;
  }

  .event-banner-swiper .swiper-controls .swiper-pagination {
    display: none;
  }
}

.event-banner-swiper .swiper-controls .controls-box {
  width: 72px;
  height: 24px;
  top: 0;
  left: 0%;
  position: relative;
  display: flex;
  align-items: center;
}

.event-banner-swiper .swiper-pagination {
  position: absolute;
  top: calc(50% - 8px);
  color: #ddd;
}

.event-banner-swiper .swiper-controls .controls-box .button-prev,
.event-banner-swiper .swiper-controls .controls-box .button-next {
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 99;
  border: none;
}

.event-banner-swiper .swiper-controls .controls-box .button-prev {
  left: 0;
}

.event-banner-swiper .swiper-controls .controls-box .button-next {
  right: 0;
}

.event-banner-swiper .swiper-controls .controls-box .button-next:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f105";
  font-weight: 900;
  color: #ddd;
  font-size: 14px;
  position: absolute;
  top: -8px;
  right: 8px;
}

.event-banner-swiper .swiper-controls .controls-box .button-prev:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f104";
  font-weight: 900;
  color: #ddd;
  font-size: 14px;
  position: absolute;
  top: -8px;
  left: 8px;
}

.swiper-autoplay {
  position: relative;
  float: right;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.swiper-autoplay .start-autoplay,
.swiper-autoplay .stop-autoplay {
  display: block;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

.swiper-autoplay .start-autoplay:before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: #fff;
  content: "\f04b";
}

.swiper-autoplay .stop-autoplay:before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: #fff;
  content: "\f0c8";
}

/* 브랜드 상품 콘텐츠 */
.brand {
  background-color: #f9f9f9;
  margin-bottom: 100px;
  padding: 80px 0;
}

.brand-box {
  gap: 2%;
}

.brand-info {
  margin-top: 20px;
  width: 32%;
}

.brand-goods-swiper {
  width: 64%;
  overflow: hidden;
}

.brand-goods .img {
  height: 270px;
  margin-bottom: 20px;
}

.brand-swiper {
  position: relative;
  width: 100%;
}

.brand-swiper .swiper-slide {
  background-color: #f9f9f9;
}

.brand .moreBtn {
  padding: 12px 24px;
  border-radius: 8px;
  border: solid 1px #ddd;
  background-color: #fff;
  font-size: 16px;
}

.brand .moreBtn:hover {
  background-color: #f9f9f9;
  text-decoration: none;
  color: #000;
}

.brand .brand-info>div:nth-child(2) p {
  font-size: 16px;
  font-weight: 700;
}

.brand .brand-info>div:nth-child(2) p {
  font-size: 16px;
  line-height: 20px;
}

.brand .brand-info .main-tit {
  margin-bottom: 100px;
}

.brand .swiper-btn {
  width: 75px;
  height: 25px;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 50px;
}

.brand .swiper-pagination {
  position: absolute;
  top: 4px;
}

.brand .button-prev,
.brand .button-next {
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border: none;
  z-index: 9999;
}

.brand .button-prev {
  left: 0;
}

.brand .button-next {
  right: 0;
}

.brand .button-next:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f105";
  font-weight: 900;
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: -7px;
  right: 8px;
}

.brand .button-prev:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f104";
  font-weight: 900;
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: -7px;
  left: 8px;
}

.brand-txt {
  margin-bottom: 40px;
}

.brand-tit {
  margin-bottom: 20px;
}

.goods-name,
.price {
  font-size: 18px;
}

.tab-content>.active {
  display: flex;
}

.tab-content .brand-box {
  display: none;
  position: relative;
  z-index: 0;
}

.tab-content .brand-box.active {
  display: flex;
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  /* width: 100% !important; */
}

.mnf-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;

  width: auto;
  text-decoration: none;
}

.tab-nav-cont {
  display: flex;
  height: 60px;
  position: relative;
}

.all-tab-catagory {
  position: absolute;
  top: 50px;
  left: 0;
  background-color: #fff;
  width: 100%;
  z-index: 2;
  padding: 0 10px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  display: none;
}

.all-tab-catagory.active {
  display: block;
}

.all-tab-nav {
  display: flex;
  flex-wrap: wrap;
}

.all-tab-nav li:nth-child(-n + 4) {
  border-top: solid 1px #eee;
}

.all-mnf-item {
  width: 25%;
}

.all-mnf-item a:hover,
.all-mnf-item a:focus {
  text-decoration: none;
  color: inherit;
  background-color: rgba(220, 183, 255, 0.2);
}

.all-mnf-item.active {
  background-color: #dcb7ff;
}

.nav-bg {
  position: relative;
  z-index: 1;
}

.nav-bg::before {
  position: absolute;
  content: "";
  width: calc(var(--vw, 1vw) * 100);
  height: 50px;
  top: 133px;
  left: 0;
  background-color: #dcb7ff;
  z-index: -1;
}

.brand.nav-bg:has(.content-none)::before {
  position: relative;
}

.tab-scroll {
  overflow-y: hidden;
  overflow-x: auto;
  box-sizing: border-box;
  width: calc(100% - 100px);
}

.nav-mask-prev,
.nav-mask-next {
  position: absolute;
  content: "";
  width: 20px;
  height: 50px;
  top: 0;
  z-index: 2;
}

.nav-mask-prev {
  left: 0;
  background-image: linear-gradient(to right, #dcb7ff, rgba(0, 0, 0, 0));
}

.nav-mask-next {
  right: 100px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #dcb7ff);
}

.tab-plus {
  width: 80px;
  margin-left: 20px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: rgba(150, 39, 255, 0.2);
  font-weight: 700;

  transition: all 0.2s ease;
}

.tab-plus:hover,
.tab-plus.active {
  background-color: #9627ff;
  color: #fff;
  transition: all 0.2s ease;
}

.tab-nav {
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
}

.tab-scroll::-webkit-scrollbar {
  height: 4px;
}

.tab-scroll::-webkit-scrollbar-thumb {
  background-color: #dcb7ff;
  border-radius: 10px;
  border: none;
}

.tab-nav li a {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;

  padding: 16px 16px;
  height: 50px;
  transition: all ease 0.3s 0s;
}

.tab-nav li.active {
  z-index: 1;
  transition: background-color 0.2s linear;
}

.tab-nav li.active a {
  color: #000;
  position: relative;
  transition: all ease 0.3s 0s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-nav li a::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 10%;
  width: 0;
  transition: width 0.2s ease-out;
}

.tab-nav li.active a::after {
  width: 80%;
  height: 4px;
  background-color: #9627ff;
  transition: width 0.2s ease-out;
}

@media (max-width: 768px) {
  .nav-bg::before {
    top: 120px;
    height: 40px;
  }

  .tab-nav-cont {
    height: 40px;
  }

  .tab-scroll {
    height: 50px;
    width: calc(100% - 50px);
  }

  .tab-nav {
    height: 40px;
  }

  .tab-nav li a {
    height: 40px;
    padding: 12px 16px;
  }

  .tab-plus {
    height: 40px;
    width: 40px;
    margin-left: 10px;
  }

  .nav-mask-prev,
  .nav-mask-next {
    height: 40px;
  }

  .nav-mask-next {
    right: 50px;
  }

  .all-tab-catagory {
    top: 40px;
  }
}

@media (max-width: 500px) {

  .tab-scroll::-webkit-scrollbar,
  .tab-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {

  .brand-txt,
  .brand-tit {
    margin-bottom: 8px;
  }

  .brand .brand-info .main-tit {
    margin-bottom: 20px;
    font-size: 18px;
  }

  * .main-tit h2 {
    font-size: 18px;
  }

  .brand .brand-info>div:nth-child(2) p {
    font-size: 14px;
    line-height: 16px;
    color: #999;
  }

  .brand-box {
    flex-direction: column;
  }

  .brand-info {
    height: auto;
    width: 100%;
    margin-bottom: 20px;
  }

  .brand .moreBtn {
    padding: 4px 12px;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 12px;
    float: right;
  }

  .brand .img {
    margin-bottom: 8px;
  }

  .brand .swiper-btn {
    width: 75px;
    height: 25px;
    position: absolute;
    top: 0;
    left: calc(100% - 90px);
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50px;
  }

  .brand-goods {
    width: 100%;
  }

  .goods-name {
    font-size: 14px;
  }

  .price {
    font-size: 14px;
    font-weight: 700;
  }
}

/* 캘린더 */
.mainCalendar::after {
  content: "";
  display: block;
  clear: both;
}

.mainCalendar .calendar .visualmonthyear {
  font-weight: bold;
  font-size: 22px;
  color: #333;
}

.mainCalendar .calendar {
  width: 100%;
  height: auto;
  float: left;
  padding: 0;
  overflow: hidden;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.mainCalendar .calendar .table.header {
  margin: 0;
}

.mainCalendar .calendar .header {
  margin: 0;
  border: solid 1px #e5e5e5;
  border-bottom: 0;
}

.mainCalendar .calendar .header td {
  font-size: 18px;
  text-align: center;
  height: 60px;
  cursor: pointer;
}

.mainCalendar .calendar .header td i {
  font-size: 20px;
}

.mainCalendar .calendar .header td:hover {
  background: #f5f5f5;
  color: #00aff0;
}

.mainCalendar .calendar .header td:hover i {
  color: #00aff0;
}

.mainCalendar .calendar .header td.year {
  cursor: text;
  color: #333;
}

.mainCalendar .calendar .header td.year:hover {
  background: none;
}

.mainCalendar .calendar .daysmonth {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

.mainCalendar .calendar .daysmonth tr.week_days>td {
  font-size: 16px;
  color: #333;
  text-align: center;
  line-height: 58px;
}

.mainCalendar .calendar .daysmonth tr.week_days>td.first {
  color: #f0391a;
}

.mainCalendar .calendar .daysmonth tr.week_days>td.last {
  color: #2e7dd8;
}

.mainCalendar .calendar .daysmonth td {
  font-size: 16px;
  border: solid 1px #e5e5e5 !important;
  text-align: center;
  padding: 0;
}

.mainCalendar .calendar .daysmonth td a {
  line-height: 58px;
}

.mainCalendar .calendar .daysmonth td.first {
  border-left: 0;
  color: #f0391a;
}

.mainCalendar .calendar .daysmonth td.last {
  border-right: 0;
  color: #2e7dd8;
}

.mainCalendar .calendar .daysmonth td>a {
  display: block;
  color: #666;
}

.mainCalendar .calendar .daysmonth td>a:hover {
  background: #f5f5f5;
}

.mainCalendar .calendar .daysmonth td.event {
  background: #f7993f !important;
  color: #fff;
}

.mainCalendar .calendar .daysmonth td.event a {
  background: none;
  color: #fff;
}

.bootstrap-calendar .calendar .table.header td.year {
  border-top: 2px solid #e5e5e5 !important;
  border-right: 3px solid #e5e5e5 !important;
}

/* Sub Page */
#subContainer {
  width: 100%;
  padding: 0px 0px 100px;
  flex: 1;
}

#sub-menu {
  background: #f8f8f8;
  border-bottom: solid 1px #e2e2e2;
}

#sub-menu .container {
  padding: 0 !important;
  text-align: center;
  width: 100%;
}

#sub-menu .navi {
  display: inline-block;
}

#sub-menu .navi li {
  display: inline-block;
  margin: 0 16px;
  text-align: center;
}

#sub-menu .navi li a {
  display: block;
  color: #333;
}

#sub-menu .navi li a span {
  display: inline-block;
  height: 60px;
  padding: 20px 12px 0;
  font-size: 16px;
}

#sub-menu .navi li a:hover span,
#sub-menu .navi li.active a span {
  border-bottom: solid 1px #282828;
}

#sub-menu .navi li.dropdown:hover .dropdown-menu {
  display: block;
}

#sub-menu .navi li>.dropdown-menu {
  top: 90%;
  border: solid 1px #333;
}

#sub-menu .navi li>.dropdown-menu ul>li {
  width: 100%;
  text-align: left;
  padding: 5px 10px;
  margin: 5px 0;
}

#sub-menu .navi li>.dropdown-menu ul>li a span {
  border-bottom: 0;
  height: 22px;
  padding: 0;
  font-size: 14px;
}

#sub-menu .navi li>.dropdown-menu ul>li a:hover span,
#sub-menu .navi li>.dropdown-menu ul>li.active a span {
  color: #60bea3;
  border-bottom: solid 1px #60bea3;
}

.menuScroll {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.menuScroll::-webkit-scrollbar {
  display: none;
}

/* SNS버튼 */
.btn-facebook {
  color: #fff;
  background-color: #3a5795;
  border-color: #334c83;
}

.btn-facebook.active,
.btn-facebook:active,
.btn-facebook:hover,
.open>.dropdown-toggle.btn-facebook {
  color: #fff;
  background-color: #2c4270;
  border-color: #223357;
}

.btn-twitter {
  color: #fff;
  background-color: #59adea;
  border-color: #59adea;
}

.btn-twitter.active,
.btn-twitter:active,
.btn-twitter:hover,
.open>.dropdown-toggle.btn-twitter {
  color: #fff;
  background-color: #4897d0;
  border-color: #4897d0;
}

.btn-kakao {
  color: #3c1e1e;
  background-color: #ffeb00;
  border-color: #ffeb00;
}

.btn-kakao.active,
.btn-kakao:active,
.btn-kakao:hover,
.open>.dropdown-toggle.btn-kakao {
  color: #3c1e1e;
  background-color: #ffde00;
  border-color: #ffde00;
}

.btn-naver {
  color: #fff;
  background-color: #1fcb02;
  border-color: #1fbc02;
}

.btn-naver.active,
.btn-naver:active,
.btn-naver:hover,
.open>.dropdown-toggle.btn-naver {
  color: #fff;
  background-color: #1fbc02;
  border-color: #1fbc02;
}

.divider {
  position: relative;
  overflow: hidden;
  margin: 20px 0;
  color: #e5e5e5;
  width: 100%;
}

.divider:after,
.divider.divider-center:before,
.divider.divider-center.divider-short:before {
  content: "";
  position: absolute;
  width: 100%;
  top: 8px;
  left: 30px;
  height: 0;
  border-top: 1px solid #ddd;
}

.divider.divider-center {
  text-align: center;
}

.divider.divider-center:before {
  left: -50% !important;
  right: 0;
  margin-left: -20px;
}

.divider.divider-center:after {
  left: 50% !important;
  right: 0;
  margin-left: 20px;
}

/* web a */
.checkSearch {
  position: relative;
  max-width: 500px;
  margin: 100px auto 0;
  text-align: center;
}

.checkSearch .main_logo {
  margin: 0 0 35px;
}

.checkSearch .main_logo img {
  max-width: 100%;
  height: auto;
}

.checkSearch .searchCont {
  background: #fff;
  display: block;
  height: 50px;
  padding: 8px 0;
  box-shadow: 0 2px 3px #bbb;
}

.checkSearch .searchCont .searchInput {
  width: 100%;
  padding: 0 15px;
  line-height: 35px;
  font-size: 15px;
  border: 0;
  outline: none;
}

.checkSearch .searchBtn {
  margin: 20px 0 0;
}

.checkSearch .searchBtn .search_toggle {
  background: #eee;
  border: solid 1px #ccc;
  padding: 10px 15px;
  color: #888;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
}

.checkSearch .searchBtn .search_toggle:hover {
  border: solid 1px #aaa;
  color: #333;
  font-weight: bold;
}

.alert {
  position: relative;
  word-break: keep-all;
}

.alert i {
  position: absolute;
  height: 20px;
  top: 50%;
  left: 20px;
  margin-top: -18px;
}

.alert .pull-left {
  padding: 0 0 0 60px;
}

/* board */
.download_list {
  display: -webkit-flex;
  display: flex;
}

.download_list h2 {
  display: -webkit-flex;
  display: flex;
  width: 20%;
  font-size: 16px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
}

.download_list ul {
  background: #ffffff;
  align-items: center;
  border-left: 1px solid #e2e7eb;
}

.download_list ul li a {
  display: inline-block;
  font-size: 12px;
  padding: 10px 15px;
  background: #f9f9f9;
  border-radius: 50px;
  margin: 5px 5px;
  color: #565656;
}

.download_list ul li a:hover {
  text-decoration: underline;
  text-underline-position: under;
}

/** 필드값 체크 **/
.has-error .label-txt {
  color: #ff4343;
}

.has-error .form-control {
  border-color: #ff4343 !important;
}

.has-error .form-control:focus {
  border-color: #ff4343 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.has-error .text-danger {
  margin-top: 10px;
  color: #ff4343;
}

.has-error .input-group-addon {
  color: #ff4343;
}

.has-success .label-txt {
  color: #103257;
}

.has-success .form-control {
  border-color: #103257 !important;
  color: #111 !important;
}

.has-success .input-group-addon {
  border-color: #103257 !important;
  color: #111 !important;
  background-color: #eee;
}

.has-success .label-txt {
  color: inherit;
}

.has-success .form-control {
  border-color: inherit;
}

.has-success .form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn.apply-btn {
  color: #979797;
}

.btn.apply-btn.apply-change {
  border: 1px solid #103257 !important;
  color: #103257 !important;
  font-weight: 700;
}

.btn.apply-btn input {
  margin-right: 5px;
  margin-top: 0px;
}

/** =======================
 * Contenedor Principal
===========================*/

.tab {
  position: relative;
  display: flex;
}

.tab .tabGroup {
  position: absolute;
  width: 100%;
  top: 50px;
  display: none;
  overflow: auto;
  height: calc(100% - 50px);
}

.tab .tabLink {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  flex-grow: 1;
  flex-basis: 100%;
  border: none;
  border-bottom: solid 2px #dcdcdc;
  font-size: 16px;
}

.tab .tabLink.active,
.tab .tabLink:hover {
  font-weight: 700;
  border-bottom: solid 2px #000;
}

.accordion {
  position: relative;
  overflow: auto;
  background-color: #eee;
  height: 100%;
  -ms-overflow-style: none;
}

.accordion::-webkit-scrollbar {
  display: none;
}

.accordion a:hover,
.accordion a:focus {
  color: inherit;
  text-decoration: none;
}

.accordion>li {
  width: 35%;
}

.accordion>li>.link>a {
  width: 100%;
  padding: 20px 14px;
  display: flex;
  justify-content: space-between;
}

.accordion>li>.link>a:hover {
  font-weight: 700;
}

.accordion>li:has(.submenu.active)>.link>a {
  background-color: #fff;
  font-weight: 700;
  color: #9627ff;
}

.submenu {
  position: fixed;
  display: none;
  width: 65%;
  top: 85px;
  right: 0;
  background: #fff;
  font-size: 14px;
  height: calc(100% - 85px);
  overflow: auto;
}

.submenu.active {
  display: block;
}

.submenu>li {
  background-color: #ffffff;
}

.submenu li a {
  width: 100%;
  display: block;
  text-decoration: none;
  color: #333;
  padding: 20px;
}

.submenu li a:hover {
  font-weight: 700;
}

.depth03 {
  margin-top: 0;
  padding: 10px;
  background: #efefef;
}

.depth03 li a {
  text-align: left;
  position: relative;
  padding-left: 10px;
  font-size: #797979;
}

.depth03 li a::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 2px;
  background: #797979;
  border-radius: 10px;
  width: 3px;
  height: 3px;
}

/* subpage */
.pageHeader-title-wrap .pageHeader-title {
  position: relative;
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  color: var(--bs-inverse);
  margin-bottom: 30px;
}

.pageHeader-title-wrap .breadcrumb {
  margin: 30px 0;
}

.pageHeader-title-wrap .breadcrumb>li {
  display: inline-block;
  font-size: 13px;
  color: var(--bs-inverse);
}

.pageHeader-title-wrap .breadcrumb>li+li::before {
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  color: #212121;
  padding: 0 8px;
  opacity: 0.3;
}

.subMenu-width {
  width: 20%;
  margin-right: 40px;
}

.page-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.page-nav a {
  position: relative;
  display: inline-block;
  font-size: 19px;
  padding: 12px 0;
  color: #676767;
  font-weight: 300;
}

.page-nav a.active {
  font-weight: 700;
  color: #111;
}

.nav-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-column>a {
  font-size: 14px;
  padding-left: 10px;
}

.nav-column>a:nth-child(1) {
  height: 50px;
  font-weight: 700;
  color: #000;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding-left: 5px;
  border-bottom: solid 1px #ddd;
}

.nav-column>a:nth-last-child(1) {
  border-bottom: solid 1px #ddd;
}

.page-nav a:last-child::after {
  display: none;
}

.page-nav-3depth {
  margin-top: -40px;
}

.page-nav-3depth .page-nav a {
  font-size: 17px;
}

.page-nav-3depth .page-nav a.active {
  font-weight: 500;
}

.page-nav-3depth .page-nav a.active::before {
  display: none;
}

.page-nav-select-wrap {
  display: none;
}

.page-nav-select {
  position: relative;
}

.page-nav-select .nav-select-toggle {
  position: relative;
  display: block;
  padding: 0 15px;
  line-height: 46px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  font-weight: 500;
  user-select: none;
}

.page-nav-select .nav-select-toggle::after {
  content: "\f107";
  font-family: "Font Awesome 6 pro";
  position: absolute;
  right: 23px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 500;
  height: 14px;
  line-height: 14px;
  width: 14px;
  text-align: center;
}

.page-nav-select.no_sub .nav-select-toggle::after {
  color: #ccc;
}

.page-nav-select.open .nav-select-toggle::after {
  transform: translateY(-50%) rotate(180deg);
}

.page-nav-select.open::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}

.select-dropdown {
  position: fixed;
  width: 100%;
  height: calc(var(--vh, 1vh) * 68);
  background-color: #fff;
  bottom: -200%;
  left: 0;
  z-index: 9999;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  transition: 0.2s ease-out;
}

.page-nav-select.open .select-dropdown {
  box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.1);
  bottom: 0;
}

.select-scroll-layout {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.select-scroll-layout .scroll-content {
  overflow-y: scroll;
  right: -18px;
  padding-right: 18px;
  position: absolute;
  top: 0;
  left: 0;
  right: -18px;
  bottom: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.select-scroll-layout .scroll-content .page-nav-select-tit {
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
}

.select-scroll-layout .scroll-content .page-nav-select-tit button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  background: none;
  border: 0;
  font-size: 16px;
  font-weight: 700;
}

.select-scroll-layout .scroll-content .page-nav-select-tit button i {
  margin-right: 7px;
  font-weight: 700;
  margin-top: 2px;
}

.select-scroll-layout .menu-list .item:nth-child(1) {
  border-bottom: solid 1px #ddd;
  background-color: #f9f9f9;
}

.select-scroll-layout .menu-list .item a {
  position: relative;
  display: block;
  height: 54px;
  line-height: 54px;
  padding: 0px 60px 0px 20px;
  font-size: 15px;
  color: #565656;
}

.select-scroll-layout .menu-list .item a {
  padding-left: 40px;
}

.select-scroll-layout .menu-list .item:nth-child(1) a {
  padding-left: 20px;
}

.select-scroll-layout .menu-list .item:nth-child(1) a:hover,
.select-scroll-layout .menu-list .item:nth-child(1) a:focus {
  text-decoration: none;
  background-color: inherit;
}

.select-scroll-layout .menu-list .item:nth-child(1) a::after {
  display: none !important;
}

.select-scroll-layout .menu-list .item a.active {
  font-weight: 700;
  color: #212121;
}

.select-scroll-layout .menu-list .item a::after {
  font-family: "Font Awesome 6 pro";
  content: "\f105";
  position: absolute;
  right: 40px;
  font-size: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
}

.select-scroll-layout .menu-list .item a:hover {
  background-color: #eaeaea;
}

.select-scroll-layout .menu-list .item a[aria-expanded="true"] {
  background-color: #f5f5f5;
}

.select-scroll-layout .menu-list .item a[data-toggle="collapse"]::after {
  content: "\f107";
}

.select-scroll-layout .menu-list .item a[data-toggle="collapse"][aria-expanded="true"]::after {
  content: "\f106";
}

.select-scroll-layout .menu-list .item .collapse,
.select-scroll-layout .menu-list .item .collapsing {
  border-bottom: 1px solid #eee;
  background: #fafafa;
}

.select-scroll-layout .menu-list .item .collapse>a,
.select-scroll-layout .menu-list .item .collapsing>a {
  font-size: 13px;
  height: 50px;
  line-height: 50px;
}

.modal-dialog.video-modal {
  width: 75%;
  max-width: 1400px;
}

#confirmIframe .modal-dialog {
  vertical-align: top !important;
}

@media (max-height: 960px) {
  .modal-dialog.video-modal {
    width: 75%;
    max-width: 1200px;
  }
}

@media (max-height: 900px) {
  .modal-dialog.video-modal {
    width: 75%;
    max-width: 900px;
  }
}

.modal-dialog.video-modal .modal-content {
  background: none;
  overflow: visible;
  box-shadow: none;
}

.modal-dialog.video-modal .modal-body {
  padding: 0;
}

.modal-dialog.video-modal .close-cont {
  position: relative;
  width: 100%;
  height: 50px;
}

.modal-dialog.video-modal .close-cont .close {
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  text-indent: 0;
  opacity: 1;
  font-size: 35px;
  width: 50px;
  height: 50px;
  color: #fff;
  text-shadow: none;
  background-color: #000;
  border-radius: 4px 4px 0 0;
  opacity: 0;
  transition: 0.4s ease-in;
}

.modal.in .modal-dialog.video-modal .close-cont .close {
  opacity: 1;
}

.video-popup-box {
  position: relative;
}

.video-popup-box::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.video-popup-box iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video-popup-container {
  background-color: #000;
}

.video-popup-container .swiper-slide::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
}

.video-popup-container .swiper-slide .oooo {
  position: absolute;
  width: 300px;
  height: 50px;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: #000;
}

.video-popup-thumbs {
  background-color: #000;
  max-height: 148px;
}

.video-popup-thumbs .swiper-wrapper {
  padding: 5px;
  height: 100%;
}

.video-popup-thumbs .swiper-slide .cover {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.video-popup-thumbs .swiper-slide .cover::after {
  content: "";
  display: block;
  padding-top: 50%;
}

.video-popup-thumbs .swiper-slide.swiper-slide-active .cover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid red;
  position: absolute;
  top: 0;
  left: 0;
}

.video-popup-button-next,
.video-popup-button-prev {
  width: 72px;
  height: 72px;
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: absolute;
  top: calc(50% - 45px);
  transform: translateY(-50%);
  z-index: 10;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
}

.swiper-button-disabled.video-popup-button-next,
.swiper-button-disabled.video-popup-button-prev {
  opacity: 0.5;
  display: none;
}

.video-popup-button-next:hover,
.video-popup-button-prev:hover {
  background-color: rgba(0, 0, 0, 1);
  opacity: 1;
  color: #fff;
}

.video-popup-button-prev {
  left: -90px;
}

.video-popup-button-next {
  right: -90px;
}

.video-popup-container .media {
  position: relative;
}

.video-popup-container .youtube_img {
  width: 100%;
  padding-bottom: 56.25%;
}

.video-popup-container .play::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  cursor: pointer;
}

.video-popup-container .play::after {
  content: "\f04b";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  z-index: 1;
  color: #fff;
  cursor: pointer;
}

.video-popup-container .play-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 56px);
  background-color: rgba(245, 91, 91, 0.2);
}

.video-popup-container .play-btn::after {
  content: "\f04b";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  z-index: 1;
  color: #fff;
  cursor: pointer;
}

.video-popup-container .pause-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 56px);
  background-color: rgba(131, 91, 245, 0.2);
}

.video-popup-container .pause-btn::after {
  content: "\f04c";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  z-index: 1;
  color: #fff;
  cursor: pointer;
}

.video-popup-container .thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {

  .swiper-button-disabled.video-popup-button-next,
  .swiper-button-disabled.video-popup-button-prev {
    display: inline-flex;
    opacity: 0.5;
  }

  .video-popup-button-next,
  .video-popup-button-prev {
    top: calc(100% + 44px);
    width: 56px;
    height: 56px;
    font-size: 24px;
    background-color: #000;
  }

  .video-popup-button-next {
    right: calc(50% - 61px);
  }

  .video-popup-button-prev {
    left: calc(50% - 61px);
  }
}

.filterWrap {
  border-radius: 8px;
  border: solid 1px #ddd;
  width: 100%;
  font-size: 16px;
  margin-bottom: 30px;
}

.filterWrap table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border-style: hidden;
}

.filterWrap tr,
.filterWrap td,
.filterWrap th {
  border: solid 1px #ddd;
  border-collapse: collapse;
}

.filterWrap table tr:nth-child(1) th {
  border-radius: 8px 0 0 0;
}

.filterWrap table tr:nth-child(1) td {
  border-radius: 0 8px 0 0;
}

.filterWrap table tr:nth-last-child(1) th {
  border-radius: 0 0 0 8px;
}

.filterWrap table tr:nth-last-child(1) td {
  border-radius: 0 0 8px 0;
}

.filterWrap tr,
.filterWrap td,
.filterWrap th {
  padding: 20px;
}

.filterWrap th {
  background-color: #eee;
  width: 20%;
  text-align: center;
  word-break: keep-all;
}

.filterWrap .subpage-category {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.filterWrap tr:nth-child(1) td {
  padding: 20px 20px 10px 20px;
}

.filterWrap tr:nth-child(2) td {
  padding: 10px 20px;
}

.filterWrap tr:nth-last-child(1) td {
  padding: 10px 20px !important;
}

.filterWrap .subpage-category li {
  flex-basis: 20%;
  padding-right: 10px;
  margin-bottom: 10px;
}

.filterWrap .filter-select>div button {
  background-color: #fff !important;
  width: 300px;
  /* width: 200px; */
}

.filterWrap .filter-select>div button span {
  font-size: 16px;
  text-overflow: ellipsis;
}

.filterWrap .filter-select>div>.dropdown-menu.open>.dropdown-menu.inner {
  width: 300px;
  /* width: 200px; */
}

.filterWrap .filter-select>div>div>ul li {
  font-size: 16px;
}

.filterWrap .filter-select>div>div>ul li a {
  padding: 8px 20px;
  display: flex;
  align-items: center;
  white-space: wrap;
  word-break: break-all;
}

.filterWrap .searchForm {
  max-width: 300px;
  height: 40px;
  border-radius: 100px;
  border: solid 1px #ddd;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filterWrap .searchForm form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.filterWrap .searchForm input {
  border: none;
  width: 100%;
}

.filterWrap .searchForm input:focus {
  outline: none;
}

.filterWrap .searchForm .search-btn {
  background-color: #fff;
  border: none;
  color: #333;
  width: 32px;
  height: 32px;
  transform: translateX(4px);
}

.filterWrap .mobile-filter {
  width: 100%;
  display: none;
  align-items: center;
  gap: 16px;
}

.filterWrap .mobile-filter>div {
  display: flex;
  height: 50px;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.filterWrap .mobile-filter>div>h5,
.filterWrap .mobile-filter>div>.filter-select,
.filterWrap .mobile-filter>.searchForm {
  border: solid 1px #ddd;
  border-radius: 8px;
  height: 50px;
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.filterWrap .mobile-filter>div>h5 {
  background-color: #eee;
  flex-basis: 20%;
  justify-content: center;
  padding-left: 0;
}

.filterWrap .mobile-filter>div>.filter-select {
  flex-basis: 80%;
}

.filterWrap:has(.recent-keyword) {
  margin-bottom: 10px;
  padding-bottom: 0px;
}

.filterWrap:has(.recent-keyword),
.filterWrap:has(.recent-keyword) .searchForm {
  border: none;
}

.filterWrap:has(.recent-keyword) td,
.filterWrap:has(.recent-keyword) .searchForm {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.filterWrap:has(.recent-keyword) .searchForm {
  height: auto;
}

.mypage-css .recent-keyword {
  flex-wrap: nowrap;
}

.mypage-css .custom-scroll:has(.recent-keyword) {
  overflow-x: auto;
}

.mypage-css .custom-scroll:has(.recent-keyword)::-webkit-scrollbar {
  height: 6px;
}

.filterWrap .recent-keyword li {
  background-color: #fff;
  border: solid 1px #ddd;
}

.filterWrap .recent-keyword li a {
  font-weight: 700;
  color: #767676;
}

.filterWrap .recent-keyword li.active {
  background-color: #eee;
  border: none;
}

.filterWrap .recent-keyword li.active a,
.filterWrap .recent-keyword li a:hover,
.filterWrap .recent-keyword li a:focus {
  text-decoration: none;
  color: #000;
}

@media (max-width: 1280px) {
  .filterWrap .subpage-category li {
    flex-basis: 25%;
  }

  .completionCart .form--inputgroup {
    width: 100%;
    color: rgba(0, 0, 0, 0.6);
    flex: none !important;
  }

  .completionCart .form--label {
    display: none;
  }

  .mobileShow-txt {
    display: inline;
  }
}

@media (max-width: 900px) {
  .filterWrap .subpage-category li {
    flex-basis: 33.33%;
  }
}

@media (max-width: 768px) {
  .filterWrap table tr:nth-child(1) {
    display: none;
  }

  .filterWrap table tr:nth-child(2) th {
    border-radius: 8px 0 0 0;
  }

  .filterWrap table tr:nth-child(2) td {
    border-radius: 0 8px 0 0;
  }

  .filterWrap.oneDep tr:nth-child(1) {
    display: table-row;
  }

  .filterWrap:has(.recent-keyword) {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .filterWrap:has(.recent-keyword) tr:nth-last-child(1) td {
    padding-top: 0;
    padding-bottom: 0;
  }

  .mypage-css .filterWrap {
    border: none;
  }

  .mypage-css .filterWrap table {
    display: none;
  }

  .mypage-css .filterWrap .mobile-filter {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 8px;
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .filterWrap {
    border: none;
  }

  .filterWrap table {
    display: none;
  }

  .filterWrap .mobile-filter {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 8px;
    flex-direction: column;
  }

  .filterWrap .mobile-filter form {
    width: 100%;
  }

  .filterWrap .mobile-filter form>div {
    width: 100%;
  }

  .filterWrap .mobile-filter form>div h5 {
    padding-left: 8px;
    padding-bottom: 4px;
  }

  .filterWrap .mobile-filter .filter-select>div button {
    border: solid 1px #ddd;
  }

  .filterWrap .mobile-filter .searchForm {
    margin-top: 16px;
    max-width: 100%;
  }

  .filterWrap .mobile-filter .filter-select>div,
  .filterWrap .mobile-filter .filter-select>div button,
  .filterWrap .mobile-filter .filter-select>div>.dropdown-menu {
    width: 100% !important;
  }

  .filterWrap .mobile-filter .filter-select>div button span {
    font-size: 14px;
  }

  .filterWrap .mobile-filter .filter-select>div>div>ul li {
    font-size: 14px;
  }
}

.filterWrap .subpage-category li.active {
  font-weight: 700;
}

.etc-cont {
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-items: flex-end;
  margin-bottom: 24px;
}

.etc-cont .board-write-wrap {
  margin: 0;
}

.etc-cont .board-write-wrap a {
  border-radius: 8px;
}

.subpage-box .goods-cont {
  flex-wrap: wrap;
}

.subpage-box .goods-box {
  width: calc(25% - 10.5px);
}

.subpage-box .cart-img {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: scale(1);
  object-fit: cover;
  transition: all ease 0.3s 0s;
}

.subpage-box .goods-box:hover .cart .cart-img {
  transform: scale(1.1);
  transition: all ease 0.3s 0s;
}

.content-none {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  color: #767676;
}

.search-none {
  width: 100%;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #767676;
  border-radius: 8px;
}

.content-none i,
.search-none i {
  font-size: 32px;
  padding-bottom: 5px;
}

.content-none span,
.search-none span {
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 768px) {

  .content-none i,
  .search-none i {
    font-size: 24px;
    padding-bottom: 5px;
  }

  .content-none span,
  .search-none span {
    font-size: 16px;
    font-weight: 700;
  }
}

/* ----- form 관련 */
.contact-panel {
  position: relative;
}

.contact-panel .row {
  --bs-gutter-x: 40px;
}

.contact-title {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 15px;
  border-bottom: 2px solid #111;
}

.searchPage>div:nth-child(1) .contact-title {
  margin-bottom: 0;
}

.cartPage .contact-title {
  padding-top: 20px;
}

.completionCart .form--box {
  margin-bottom: 0px;
  padding-bottom: 10px;
}

.completionCart .orderComplete-gdnc {
  border-top: solid 2px #ddd;
  border-bottom: solid 2px #ddd;
}

.contact-title h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
}

.contact-title .required-txt {
  font-size: 16px;
  font-weight: 300;
  color: #ff3232;
}

.contact-footer {
  margin-top: 50px;
}

.mobile-category-cont .contact-panel {
  margin-top: 20px;
  margin-bottom: 20px;
}

.offcanvas .contact-title,
.mobile-category-cont .contact-title {
  text-align: left;
  background-color: #fff;
  border: none;
  border-bottom: solid 2px #111 !important;
  display: flex !important;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 1px;
  padding: 12px 6px;
  width: 100%;
  height: 48px;
}

.mobile-category-cont .mobile-category {
  display: flex;
  margin-top: 20px;
}

.mobile-category-cont .mobile-category>ul {
  width: 50%;
}

.mobile-category-cont .mobile-category,
.mobile-category-cont .content-tit+div {
  display: flex;
  overflow: hidden;
}

.mobile-category-cont .result-mnf {
  overflow: hidden;
  height: 100%;
}

.mobile-category-cont .category-list,
.mobile-category-cont .category-list-2depth {
  padding-bottom: 20px;
}

.mobile-category-cont .category-list li {
  margin-top: 20px;
}

.mobile-category-cont .category-list li:nth-child(1) {
  margin-top: 0;
}

.mobile-category-cont .category-list-1depth button {
  background-color: #fff;
  border: none;
  text-decoration: none;
  color: #abb2be;
  font-size: 16px;
  letter-spacing: -0.8px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-category-cont .category-list-1depth.active button {
  color: #1b1e23;
  font-weight: 500;
}

.mobile-category-cont .category-list-1depth button::after {
  display: block;
  width: 0;
  height: 2px;
  transition: width 0.2s ease-out;
  background-color: #1b1e23;
  content: "";
}

.mobile-category-cont .category-list-1depth.active button::after {
  width: 100%;
  transition: width 0.2s ease-out;
}

.mobile-category-cont .category-list-2depth {
  display: none;
  margin-top: 4px;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.mobile-category-cont .category-list-2depth.active {
  display: flex;
}

.mobile-category-cont .category-list-2depth a {
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  letter-spacing: -0.7px;
  color: #1b1e23;
  font-weight: 500;
}

.agreement-group .agreement-title {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin-bottom: 15px;
}

.agreement-group .agreement-cont {
  border: 1px solid #eee;
  background-color: #f5f5f5;
  padding: 15px 20px;
  color: #676767;
  min-height: 100px;
  max-height: 150px;
  overflow: auto;
}

.agreement-group .agreement-check {
  margin-top: 15px;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.agreement-group .agreement-check>div {
  font-weight: 700;
  font-size: 18px;
}

.agreement-group .agreement-check .ck-box label {
  margin: 0;
  font-weight: 300;
}

/* recommend area */
.goods-box {
  width: calc(25% - 10.5px);
}

.goods-box:hover {
  text-decoration: none;
}

.goods-box .img {
  border: solid 1px #eee;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.img {
  width: 100%;
  height: 100%;
  position: relative;
}

.cart-img {
  position: absolute;
  background-repeat: no-repeat;
  transform: scale(1);
  background-position: center;
  background-size: cover;

  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: auto;
  transition: all ease 0.3s 0s;
}

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

.goods-box:hover .img .cart-img {
  transform: scale(1.1);
  transition: all ease 0.3s 0s;
}

.goods-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-txt,
.state {
  padding: 0 5px;
}

.new-box,
.popul-box {
  height: 20px;
  font-size: 12px;
  border-radius: 4px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  color: #fff;
}

.new-box {
  background-color: #ff2323;
}

.popul-box {
  background-color: #dc03ff;
}

@media (max-width: 768px) {

  .goods-box,
  .subpage-box .goods-box {
    width: calc(50% - 10.5px);
  }

  .contact-title {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .contact-title h2 {
    font-size: 18px;
  }

  .contact-title .required-txt {
    font-size: 13px;
  }

  .agreement-group .agreement-check {
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .agreement-group .agreement-check>div {
    text-align: center;
    word-break: keep-all;
  }

  .agreement-group .agreement-check .ck-box {
    margin-top: 30px;
    font-weight: 300;
  }

  .pageHeader-title-wrap {
    display: none;
  }

  #page-container:has(.prodIndex) .pageHeader-title-wrap {
    display: block;
  }
}

/* form 관련 ----- */
@media (max-width: 1024px) {

  /* Header */
  #header {
    width: 100%;
    border-bottom: solid 1px #e5e5e5;
    z-index: 1015;
  }

  .header-cont {
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
  }

  .header-cont>.m-util {
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* toggle */
  .nav-toggle {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    padding: 12px;
    text-align: center;
    z-index: 1016;
  }

  .nav-toggle span {
    height: 2px;
    background: #eee;
    margin: 5px 0;
    display: block;
    width: 20px;
  }

  .nav-toggle span:nth-child(2) {
    width: 20px;
  }

  .nav-toggle span:nth-child(3) {
    width: 20px;
  }

  .search-toggle {
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #eee;
    z-index: 1016;
    display: block;
  }

  .search-toggle i {
    line-height: inherit;
    font-size: 18px;
  }

  .arrow-down {
    border-top: 5px solid #505050;
    position: absolute;
    top: 20px;
    right: 10px;
  }

  /* sub-banner */
  .event-banner-swiper {
    position: relative;
  }

  .event-banner-swiper .swiper-controls {
    margin-left: calc(50% - 92px);
  }

  .event-banner-swiper .swiper-controls .controls-box {
    left: 0;
    right: 0;
    position: absolute;
  }

  .event-banner-swiper .swiper-controls .controls-box .button-prev {
    left: 0;
  }

  .event-banner-swiper .swiper-controls .controls-box .button-next {
    right: 0;
  }

  .swiper-autoplay {
    width: 40px;
    height: 40px;
  }

  .swiper-autoplay .start-autoplay,
  .swiper-autoplay .stop-autoplay {
    display: block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }

  #sub-menu .navi li {
    margin: 0px;
  }

  #sub-menu .navi li a {
    display: inline-block;
    padding: 12px 13px;
    vertical-align: middle;
  }

  #sub-menu .navi li a span {
    display: inline-block;
    height: auto;
    padding: 0;
    font-size: 1rem;
  }

  #sub-menu .navi li a:hover span,
  #sub-menu .navi li.active a span {
    border-bottom: 0;
  }

  .navi li.active a span {
    font-weight: 700;
    color: #333;
  }

  /* 갤러리 */
  .gallery_wrap .owl-stage {
    padding-left: 0 !important;
  }

  .gallery_wrap li.gallery_box {
    padding: 0;
    margin: 0 5px;
  }

  .gallery_wrap li.gallery_box div.gallery_list {
    margin: 0 5px;
    height: auto;
  }

  .gallery_wrap li.gallery_box div.gallery_list dl {
    padding-top: 100%;
  }

  .gallery_wrap li.gallery_box div.gallery_list dl dd.desc {
    -webkit-line-clamp: 1;
  }

  /* footer */
  #footer {
    height: auto;
  }

  #subContainer {
    margin: 0px 0 40px;
  }

  #footer {
    position: relative;
  }

  .page-nav a {
    font-size: 14px;
  }

  .cartPage .input-btn {
    height: 48px !important;
  }
}

@media (max-width: 768px) {
  #header {
    width: 100%;
    height: 56px;
    border-bottom: solid 1px #e5e5e5;
    z-index: 1015;
  }

  #header .header-text:hover {
    color: inherit;
    text-decoration: none;
  }

  .head-nav-back.active {
    display: none !important;
  }

  .logo .mlogo {
    display: block;
  }

  .logo .wlogo {
    display: none;
  }

  .logo span {
    font-size: 16px !important;
    line-height: .8 !important;
  }

  .util li.user {
    display: none;
  }

  .util ul>li {
    padding: 0;
  }

  .util ul>li.w-login {
    display: none;
  }

  .util ul>li.login {
    position: inherit;
  }

  .util ul>li.login a {
    position: absolute;
    top: 0;
    right: 50px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #eee;
    z-index: 1016;
    display: block;
  }

  .util ul>li a span {
    display: inline-block;
    text-indent: -9999999px;
  }

  .page-nav-select-wrap {
    display: block;
  }

  .subMenu-width,
  .page-nav-3depth {
    display: none;
  }

  #page-container:has(.mypage-css .recentOrdInfo.mypage) .subMenu-width {
    display: flex;
  }

  .mypage-css .recentOrdInfo.mypage {
    display: none;
  }

  .modal-dialog.video-modal {
    width: 98%;
    margin: 0;
  }

  .video-popup-container .button-next,
  .video-popup-container .button-prev {
    font-size: 24px;
  }

  #sub-menu .navi {
    display: flex;
    flex: 1;
  }

  .menuScroll {
    overflow-x: auto;
  }

  #footer {
    height: auto;
    padding-bottom: 64px;
  }

  #footer a {
    font-size: 14px !important;
  }

  #page-container:has(.total-cont.cart-none) #footer {
    padding-bottom: 200px !important;
  }
}

@media (max-width: 576px) {
  .main-sns .sns-link .txt p {
    font-size: 13px;
  }

  .main-sns .sns-link .img-box img {
    width: 20px;
    height: 20px;
  }
}

/* product view */
.base-btn,
.base-btn {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  color: #e6230a;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

.base-btn-none {
  color: #999;
}

.prod-view {
  margin-bottom: 20px;
  padding-top: 50px;
}

.prod-view .loginBtn {
  display: none;
  align-items: center !important;
  justify-content: space-between;
  width: 100%;
}

.prod-view .loginBtn.web {
  display: flex;
  white-space: wrap !important;
  text-align: left;
  word-break: keep-all;
}

@media (max-width: 767px) {
  .prod-view .loginBtn {
    display: flex;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 0;
  }
}

.prod-view-header {
  display: flex;
  gap: 4% !important;
}

.prod-view-header>div {
  width: 48%;
  overflow: hidden;
}

.prod-swiperbox {
  width: 100%;
  margin-bottom: 100px;
}

.prod-swiperbox .prodSwiper2 {
  margin-bottom: 20px;
  position: relative;
}

.prod-swiperbox .prodSwiper2 .swiper-slide {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #eee inset;
  cursor: pointer;
}

.prod-swiperbox .prodSwiper2 .swiper-pagination {
  display: none;
  bottom: 10px;
  left: calc(100% - 56px);
  width: 40px;
  height: 20px;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

.prod-swiperbox .prodSwiper .swiper-slide {
  opacity: 0.5;
  border-radius: 8px;
  max-width: 84px;
  max-height: 84px;
  box-shadow: 0 0 0 1px #999 inset;
  cursor: pointer;
}

.prod-swiperbox .prodSwiper .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: 0 0 0 2px #212121 inset;
}

.prod-img {
  display: block;
  width: 100%;
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

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

.prod-infobox {
  font-size: 16px;
  padding-bottom: 100px;
}

.prod-infobox .info-top {
  border-bottom: solid 1px #ddd;
  margin-bottom: 20px;
}

.prod-infobox .strong-font {
  font-size: 24px;
}

.prod-infobox .info-top>div {
  margin-bottom: 20px;
}

.prod-infobox .info-top .info-shop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prod-infobox .info-top .info-shop .shop-link {
  display: flex;
  gap: 10px;
  align-items: center;
}

.prod-infobox .info-detail>div {
  margin-bottom: 20px;
}

.prod-infobox .detail-box {
  display: flex;
  align-items: center;
}

.prod-infobox .detail-box .name {
  width: 120px;
  color: #767676;
}

.prod-infobox .option-area.active .dropdown-menu.inner {
  overflow-y: auto;
  max-height: 120px;
}

.prod-infobox .option-area.active .dropdown-menu.inner::-webkit-scrollbar {
  width: 6px;
}

.prod-infobox .option-area.active .dropdown-menu.inner::-webkit-scrollbar-track {
  background: #ddd;
}

.prod-infobox .option-area.active .dropdown-menu.inner::-webkit-scrollbar-thumb {
  background-color: #9f9f9f;
  border-radius: 6px;
  border: 0px none #ffffff;
}

.prod-infobox .detail-box .dlvByCnd {
  display: flex;
  gap: 10px;
  align-items: center;
  width: calc(100% - 120px);
  word-break: keep-all;
}

.prod-infobox .detail-box .dlvByCnd .deliverInfoBtn {
  height: 24px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 12px;
}

.prod-infobox .option-area .detail-box {
  padding-bottom: 20px;
  border-bottom: solid 1px #000;
  margin-bottom: 20px;
}

.prod-infobox .detail-box .form-control {
  width: calc(100% - 120px);
  border-radius: 8px;
}

.prod-infobox .detail-box .form-control>button {
  height: 50px;
  background-color: #fff;
  border-radius: 8px;
  border: solid 1px #ddd;
  color: #767676 !important;
}

.prod-infobox .detail-box .form-control .dropdown-menu {
  padding: 0;
  border-radius: 8px;
}

.prod-infobox .detail-box .form-control .dropdown-menu>li>a {
  padding: 12px 12px 12px 16px;
  border-radius: 8px;
}

.prod-infobox .detail-box>div:nth-last-child(1) {
  height: 50px;
  width: calc(100% - 120px);
}

.prod-infobox .info-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.prod-infobox .info-total>div {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.prod-infobox .info-total>div>p:nth-child(1) {
  transform: translateY(-2px);
}

.prod-infobox .info-total>div>p:nth-last-child(1) {
  font-size: 16px;
  color: #9627ff;
}

.prod-infobox .option-area #selectProductOption {
  width: calc(100% - 120px) !important;
}

.prod-infobox .option-area>#productOptionSelDiv {
  border-radius: 8px;
  overflow: hidden;
}

.prod-infobox .option-area>#productOptionSelDiv>div {
  border: none;
  background-color: #f5f5f5;
  border-bottom: dashed 1px #ddd;
  color: #000;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prod-infobox .option-area>#productOptionSelDiv>div:nth-last-child(1) {
  border: none;
}

.prod-infobox .option-area>#productOptionSelDiv .option-box {
  justify-content: space-between;
}

.prod-infobox .option-area>#productOptionSelDiv .option-box .amountDiv,
.cartPage .amountDiv {
  position: relative;
  display: flex;
  width: 120px;
  height: 34px;
  border-radius: 50px;
  background-color: #fff;
}

.option-box .amountDiv .decreaseAmount,
.option-box .amountDiv .increaseAmount,
.cartPage .amountDiv .decreaseAmount,
.cartPage .amountDiv .increaseAmount {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50px;
  background-color: #fff;
  border: solid 1px #ddd;
  z-index: 99;
  top: 0;
  line-height: 0;
}

.option-box .amountDiv .input-group-text:hover,
.cartPage .amountDiv .input-group-text:hover {
  background-color: #f5f5f5;
}

.option-box .amountDiv .increaseAmount,
.cartPage .amountDiv .increaseAmount {
  right: 0 !important;
}

.option-box .amountDiv .inputAmount,
.cartPage .amountDiv .inputAmount {
  border-radius: 50px !important;
  text-align: center;
}

.prod-infobox .option-area .offcanvas-header {
  display: none;
}

.prod-infobox .option-area>#productOptionSelDiv .option-box .price-box {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  z-index: 99;
  height: 34px;
}

.prod-infobox .option-area>#productOptionSelDiv .deleteProductOption {
  width: 24px;
  height: 24px;
  border: none;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
}

.prod-infobox .option-area>#productOptionSelDiv .alert i {
  position: relative;
  top: 0;
  left: 0;
  height: auto;
  margin-top: 0;
}

.btn-box {
  display: flex;
  gap: 2%;
}

.btn-box>button,
.btn-box>a {
  width: 49%;
}

.prod-view-body .prod-tabs ul {
  background-color: #fff;
  height: 50px;
  display: flex;
  align-items: center;
  z-index: 2;
  border-bottom: solid 1px #ddd;
}

.prod-view-body .prod-tabs li {
  color: #000;
  width: 50%;
  height: 100%;
}

.prod-view-body .prod-tabs li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-tabs {
  position: sticky;
  top: 140px;
  left: 0;
  /* z-index: 1014; */
  z-index: 1;
}

.prod-view-body .prod-tabs li.active a {
  border-bottom: solid 2px #9627ff;
}

.prod-view-body .prod-tabs li.active a,
.prod-view-body .prod-tabs li:hover a {
  color: #9627ff;
  font-weight: 700;
  text-decoration: none;
}

.prod-view-body .prod-desc {
  width: 80%;
  padding: 16px 0 20px 0;
  margin: 0 auto;
}

.prod-view-body .prod-desc .image {
  width: 100%;
}

.prod-view-body .prod-desc .image>img {
  width: 100%;
  margin: 0 auto !important;
}

.prod-view-body .prod-desc,
.prod-view-body .prod-inquiry {
  padding-top: 50px;
  display: none;
}

.prod-view-body .prod-desc.active,
.prod-view-body .prod-inquiry.active {
  display: block;
}

.prod-view-body .prod-inquiry h3 {
  width: 100%;
  padding-bottom: 16px;
  border-bottom: solid 2px #000;
}

.prod-view-body .prod-desc p,
.prod-view-body .prod-desc ul li,
.prod-view-body .prod-inquiry p,
.prod-view-body .prod-inquiry ul li {
  word-break: keep-all;
  padding-top: 12px;
}

.prod-view-body .prod-desc ul,
.prod-view-body .prod-inquiry ul {
  list-style-type: "- ";
}

.prod-view-body .prod-desc ul,
.prod-view-body .prod-inquiry ul {
  padding-left: 20px;
}

.prod-view-body .prod-desc p:has(strong),
.prod-view-body .prod-inquiry p:has(strong) {
  padding-top: 20px;
}

.prod-view .moblie-wrap-btn {
  display: none;
  padding: 7px 16px;
  background-color: #fff;
  border-top: solid 1px #ddd;
  width: 100%;
  z-index: 1014;
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2);
}

#page-container:has(.prod-view)~.popover,
#page-container:has(.completionCart)~.popover {
  width: 250px;
  z-index: 1;
}

#page-container:has(.prod-view)~.popover .popover-title {
  padding: 10px 14px;
  font-size: 14px;
}

#page-container:has(.prod-view)~.popover .popover-content {
  padding: 14px;
}

#page-container:has(.prod-view)~.popover .popover-content>div {
  border-bottom: solid 1px #ddd;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

#page-container:has(.prod-view)~.popover .popover-content>div:nth-last-child(1) {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

#page-container:has(.prod-view)~.popover .popover-content>div>div {
  margin-bottom: 0;
  font-size: 12px;
}

#page-container:has(.recentPage) .pageHeader-title-wrap {
  margin-top: 60px;
}

.prod-view .backdrop {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1044;
}

.prod-view .backdrop.active {
  display: block;
}

.cartGuide {
  width: 320px;
  height: 400px;
  padding: 20px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  background-color: #fff;
  z-index: 1046;
  position: fixed;
  top: calc(50% - 100px);
  left: calc(50% - 160px);
  opacity: 0;
}

.cartGuide.active {
  display: flex;
  top: calc(50% - 200px);

  animation-name: upCont;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}

@keyframes upCont {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

body:has(.cartGuide.active) {
  overflow: hidden;
}

.cartGuide .success-txt {
  text-align: center;
  font-size: 20px;
}

.cartGuide .success-txt>i {
  font-size: 100px;
  color: rgba(150, 39, 255, 0.6);
  margin-bottom: 30px;
}

.cartGuide .backBtn {
  border: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.cartGuide .backBtn:hover {
  background-color: none;
}

.cartGuide .btn-box button {
  font-size: 15px;
}

/* 장바구니 cartPage */
.all_clicker {
  position: sticky;
  z-index: 999;
  top: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  width: 100%;
  padding: 16px;
  font-size: 16px;
  margin-bottom: 0;
}

.all_clicker>label {
  display: flex;
  align-items: center;
}

.all_clicker>label>span {
  margin-top: 4px;
}

.cartPage.payment .webzine-list {
  margin-top: 0 !important;
}

.cartPage.payment .form--inputgroup .btn {
  box-shadow: none;
}

.cartPage.payment .dropdown-menu {
  padding: 0;
}

.cartPage.payment .dropdown-menu>li>a {
  padding: 8px 20px;
}

.cartPage.payment .loginForm-input {
  margin-top: 0;
  /* margin-bottom: 4px; */
}

.cartPage.payment .flex-input-box .input-btn {
  margin-left: 0;
  height: auto;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .cartPage.payment .modal_link i {
    display: none;
  }
}

@media (max-width: 500px) {
  .cartPage.payment .form--inputgroup {
    width: 100%;
  }

  .cartPage.payment .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
  }

  .cartPage.payment .bootstrap-select.btn-group .dropdown-menu {
    font-size: 12px !important;
  }

  .cartPage .price {
    padding: 10px 15px 20px 15px !important;
  }

  .cartPage.completionCart .price {
    padding: 10px 15px 10px 15px !important;
  }
}

@media (max-width: 360px) {
  .cartPage.payment .modal_link i {
    display: block;
    padding: 4px 2px;
  }

  .cartPage.payment .modal_link span {
    display: none;
  }
}

.cartPage .cart-wrap {
  display: flex;
  gap: 2%;
}

.cartPage .cart-wrap .cart-cont {
  flex-basis: calc(98% - 300px);
}

.cartPage .cart-wrap .sticky-cont {
  width: 300px;
}

.cartPage .cart-wrap .sticky-cont .total-cont {
  position: sticky;
  top: 160px;
}

.cartPage .form-checkbox {
  margin-right: 30px;
}

.cartPage input[type="checkbox"] {
  position: relative;
  margin-left: 3px;
  margin-right: 19px;
}

.cartPage input[type="checkbox"]::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: 4px;
  cursor: pointer;
}

#page-container:has(.deliveryAddress) #iframe .cartPage input[type="checkbox"]::before {
  top: calc(50% - 12px);
}

.cartPage input[type="checkbox"]:checked::before {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  content: "\2713";
  border: none;
  background-color: #9627ff;
}

.cartPage .cart-prod {
  width: 100%;
}

.cartPage .cart-prod-info {
  flex-basis: 60%;
  align-items: center;
}

.cartPage .cart-prod-name {
  width: 100%;
  justify-content: space-between;
  padding-right: 20px;
  align-items: center;
}

.cartPage .webzine-title {
  font-size: 16px;
}

.cartPage .webzine-title>* {
  display: block;
  display: -webkit-box;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.cartPage .board-category-list {
  color: #767676;
  margin-top: 3px;
}

.cartPage .cartDeleteBtn {
  margin-left: 20px;
  transform: translate(8px, -12px);
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
  z-index: 0 !important;
}

.cartPage .board-category-list:nth-child(1) {
  margin-top: 0;
}

.cartPage .cart-prod-num {
  flex-basis: 40%;
}

.cartPage .cart-prod-count {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: center;
  flex-basis: 40%;
}

.cartPage .prod-plus {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cartPage .updateProductOptionDiv {
  display: flex;
  justify-content: center;
}

.cartPage .updateProductOptionDiv button {
  border: solid 1px #ddd;
  border-radius: 50px;
  padding: 4px 12px;
  background-color: #fff;
}

.cartPage .updateProductOptionDiv button:hover {
  background-color: #f5f5f5;
}

.cartPage .rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  flex-basis: 60%;
  gap: 4px;
}

.cartPage .brand-total-price {
  padding: 30px 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 18px;
}

.brand-color-back {
  background-color: #9627ff !important;
}

.brand-color-txt {
  color: #9627ff;
  font-size: 20px;
}

.cartPage .webzine-list-thumb {
  max-width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.cartPage .webzine-img.default_photo {
  background-color: #f9f9f9;
  background-image: url(/assets/common/img/user/image_icon.png);
  background-size: 14%;
  padding-bottom: 100%;
  border-radius: 8px;
}

.cartPage .webzine-img {
  padding-bottom: 100%;
  border-radius: 8px;
}

.cartPage .webzine-list {
  margin-top: 30px;
  border: none;
}

.cartPage.completionCart .webzine-list {
  margin-top: 0;
}

.cartPage .webzine-list-item {
  border: none !important;
  padding: 0 !important;
}

.cartPage .webzine-list-item ul {
  width: 100%;
}

.cartPage .webzine-list-item li {
  display: flex;
  border-bottom: solid 1px #ddd;
  padding: 16px;
  width: 100%;
}

.cartPage .company-prodBox {
  border-top: solid 1px #000;
  border-bottom: solid 1px #ddd;
}

.cartPage .company-prodBox:nth-last-child(1) {
  margin-bottom: 40px;
}

.cartPage .company-tit {
  font-size: 16px;
  padding: 16px;
  border-bottom: solid 1px #ddd;

  background-color: #fcfcfc;
}

.cartPage .total-box {
  margin-bottom: 20px;
  font-size: 18px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.cartPage.completionCart .total-box {
  margin-bottom: 0;
}

.cartPage .total-box .info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 15px 10px 15px;
  gap: 10px;
  font-size: 16px;
  color: #212121;
}

.cartPage .total-box .info li {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.cartPage .total-box .info li:nth-last-child(1) {
  width: 100%;
  text-align: right;
  padding-bottom: 10px;
  border-bottom: solid 1px #000;
}

.cartPage .price {
  padding: 10px 20px 20px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cartPage .price>div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.cartPage .total-box .btn {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0);
}

.cartPage .total-box .btn:focus {
  border: none;
  outline: none;
}

.cartPage .content-none {
  width: 300px;
  margin: 0 auto;
  gap: 20px;
  height: auto !important;
}

.cartPage .content-none i {
  font-size: 80px;
}

.cartPage .content-none .none-txt span {
  display: block;
  text-align: center;
  font-weight: 500;
  padding-bottom: 4px;
}

.cartPage .cart-prod-name>div .board-category-list {
  transform: translateY(16px);
}

#page-container:has(.recentPage) .recent-btn {
  display: none;
}

.recentPage {
  margin-top: 20px;
}

.recentPage .goods-box {
  position: relative;
}

.recentPage .goods-del {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: #fff;
  top: 0;
  right: 0;
  border-radius: 0 8px 0 8px;
  border: solid 1px #eee;
}

.recentPage .goods-del:hover {
  background-color: #f9f9f9;
}

.completionCart .form--label {
  font-size: 16px;
  margin-bottom: 0 !important;
}

.completionCart .form--inputgroup {
  display: flex;
  align-items: center !important;
  font-size: 16px;
  word-break: keep-all;
}

.deco-title {
  position: relative;
  margin: 20px 20px 10px 20px;
}

.deco-title::after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: -12px;
  width: 4px;
  height: 16px;
  background-color: #9627ff;
}

@media (max-width: 768px) {
  .cartPage.onlyCart .price {
    background-color: #fff;
    padding: 10px 4px;
    justify-content: space-between;
  }

  .cartPage.onlyCart .price>div {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .cartPage.onlyCart .total-box {
    margin-bottom: 10px;
  }

  .cartPage.onlyCart .total-box .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    gap: 10px;
  }

  .cartPage .cart-prod-name {
    padding-right: 40px;
  }

  .cartPage.payment,
  .cartPage.completionCart {
    margin-top: 20px;
  }

  .cartPage.payment .price>div {
    align-items: center;
    font-size: 14px;
  }

  .cartPage.payment .brand-color-txt {
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  .cartPage.onlyCart .total-box {
    margin-bottom: 10px;
  }

  #page-container:has(.cart-none) .bottom-btn {
    bottom: 230px;
  }

  #page-container:has(.completionCart) .bottom-btn {
    bottom: 20px;
  }

  #page-container:has(.cartPage.payment) .bottom-btn {
    bottom: 84px;
  }

  .cartPage .cartDeleteBtn {
    margin-left: 0;
    float: right;
    position: absolute;
    top: -190px;
    /* right: 0px !important; */
    transform: translate(0, 0);
  }

  .cartPage.payment .total-box .info {
    font-size: 14px !important;
  }
}

.cartPage .total-priceBox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cartPage .total-box p:nth-last-child(1) {
  font-size: 14px;
}

.cartPage .btnBox {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.cartPage .paySntlBox {
  word-break: keep-all;
  display: flex;
  width: 100%;
  gap: 10px;
}

.cartPage .paySntl {
  margin-right: 0 !important;
}

.cartPage .totalPriceBox {
  padding-right: 8px;
}

.cartPage .totalPrice {
  padding-right: 2px;
}

.cartPage .moblie-show {
  display: none;
}

@media (max-width: 400px) {
  #page-container:has(.searchPage) .header-text {
    display: none;
  }

  .cartPage .cart-prod-count {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .cartPage .webzine-list-thumb {
    display: none;
  }

  .cartPage.onlyCart .total-box {
    padding: 20px 30px;
  }

  .cartPage .cart-prod-name>div .board-category-list {
    transform: translateY(0);
  }

  .cartPage .cartDeleteBtn {
    top: -148px !important;
    right: -10px !important;
  }
}

@media (max-width: 500px) {

  .prod-infobox .info-top>div,
  .prod-infobox .info-detail>div {
    font-size: 14px;
  }

  .prod-infobox .info-top>div:nth-child(2) {
    margin-bottom: 8px;
  }

  .prod-infobox .info-top>.strong-font {
    font-size: 16px;
  }

  .cartPage .brand-total-price,
  .cartPage .total-box {
    font-size: 14px;
    word-break: keep-all;
  }

  .cartPage .brand-total-price {
    padding: 20px;
    align-items: flex-end;
    gap: 10px;
    flex-direction: column;
  }

  .cartPage .brand-total-price p:nth-last-child(1) {
    width: 90%;
    text-align: right;
    border-top: solid 1px #000;
    padding-top: 10px;
  }

  .cartPage .brand-total-price .cartPage .webzine-list-item li {
    padding: 16px 0;
  }

  .cartPage.payment .cart-prod,
  .cartPage.completionCart .cart-prod {
    flex-direction: column;
    gap: 10px;
  }

  .cartPage.payment .cart-prod-num,
  .cartPage.completionCart .cart-prod-num {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 10px;
    justify-content: space-between;
  }

  .cartPage.payment .cart-prod-count {
    flex-direction: row;
    gap: 20px;
    flex-basis: 50%;
  }

  .cartPage.payment .rating {
    flex-basis: 50%;
    padding-left: 0;
  }

  .cartPage .cart-prod-num {
    flex-basis: 45%;
    word-break: keep-all;
  }

  .cartPage.completionCart .cart-prod-name {
    padding-right: 0;
    padding-left: 10px;
  }
}

@media (max-width: 1024px) {
  .cartPage .board-category-list:has(.cartDeleteBtn) {
    position: relative;
  }

  .cartPage .cartDeleteBtn {
    margin-left: 0;
    float: right;
    position: absolute;
    top: -190px;
    right: -10px;
    transform: translate(0, 0);
  }

  .cartPage.onlyCart .cart-prod {
    flex-direction: column;
    gap: 10px;
  }

  .cartPage.onlyCart .cart-prod-num {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 20px;
    justify-content: space-between;
  }

  .cartPage.onlyCart .cart-prod-count {
    flex-direction: row;
    gap: 12px;
    flex-basis: 65%;
  }

  .cartPage.onlyCart .rating {
    flex-basis: 35%;
    padding-left: 0;
  }

  .cartPage .brand-total-price,
  .cartPage .total-box {
    word-break: keep-all;
  }

  .cartPage.onlyCart .themeBtn {
    width: 100%;
  }

  .cartPage .brand-color-txt {
    font-size: 16px;
  }

  .cartPage.completionCart .brand-color-txt {
    font-size: 18px;
  }

  .cartPage .brand-total-price {
    padding: 20px 14px;
    font-size: 14px;
  }

  .cartPage input[type="checkbox"] {
    display: inline-block;
    height: 20px;
  }

  .cartPage input[type="checkbox"]::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 0;
    left: calc(50% - 10px);
    background-color: #fff;
    border: solid 1px #ddd;
    border-radius: 4px;
    cursor: pointer;
  }

  .cartPage input[type="checkbox"]:checked::before {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    content: "\2713";
    border: none;
    background-color: #9627ff;
  }

  .completionCart .form--label {
    width: 150px;
  }
}

@media (max-width: 768px) {
  .cartPage .moblie-show {
    display: block;
  }

  .cartPage .paySntlBox {
    padding-left: 4px;
    align-items: center;
  }

  .cartPage .paySntlBox p {
    transform: translateY(2px);
  }

  .all_clicker {
    border-top: none;
    top: 56px;
    width: calc(100% + 30px);
    transform: translateX(-15px);
  }

  .cartPage .cart-wrap {
    flex-direction: column;
  }

  #page-container:has(.cartPage.payment) .bottom-btn {
    bottom: 84px;
  }

  .cartPage.payment .total-box {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  #subContainer:has(.cartPage.payment) {
    margin-bottom: 10px;
  }

  #page-container:has(.completionCart) #subContainer {
    margin-bottom: 0;
  }

  #page-container:has(.mobile-navi) .bottom-btn,
  #page-container:has(.moblie-wrap-btn) .bottom-btn {
    bottom: 80px;
  }

  #page-container:has(.recentPage) #header .offBtn {
    display: none;
  }

  .cartPage.onlyCart .total-box {
    flex-direction: row;
    background-color: #fff;
    border: none;
    padding: 0 8px;
    justify-content: space-between;
  }

  .cartPage .total-cont {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    padding: 16px 6px 7px 6px;
    background-color: #fff;
    z-index: 999;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.2);
  }

  .cartPage.payment .total-cont {
    padding: 7px 16px;
  }

  .cartPage.payment .themeBtn {
    width: 100%;
  }

  .cartPage.onlyCart .total-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .cartPage.onlyCart .total-box>strong {
    transform: translateY(0);
  }

  .cartPage .total-priceBox {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
  }

  #subContainer>.container:has(.prod-view) {
    width: 100%;
  }

  #subContainer:has(.cartPage) {
    margin-bottom: 120px;
  }

  .prod-view {
    padding-top: 0;
  }

  .prod-view-header {
    flex-direction: column;
  }

  .prod-view-header>div {
    width: 100%;
  }

  .prod-swiperbox {
    margin-bottom: 24px;
  }

  .prod-swiperbox .prodSwiper2 {
    margin-bottom: 0;
  }

  .prod-swiperbox .prodSwiper2 .swiper-slide {
    border-radius: 0;
  }

  .prodSwiper2 .swiper-pagination {
    display: flex !important;
    padding: 0 6px;
    justify-content: space-around;
    align-items: center;
  }

  .prod-swiperbox .prodSwiper {
    display: none;
  }

  .prod-infobox {
    width: calc(100% - 30px) !important;
    margin: 0 auto;
    padding-bottom: 40px;
  }

  .prod-infobox .info-top {
    border-bottom: solid 3px #ddd;
  }

  .prod-infobox .info-top>div {
    margin-bottom: 12px;
  }

  .prod-infobox .info-top>div:nth-child(1) {
    margin-bottom: 8px;
  }

  .prod-infobox .info-top>div:nth-last-child(1) {
    margin-bottom: 20px;
  }

  .prod-infobox .option-area {
    transition: bottom ease 0.3s 0s;
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1045;
    padding: 10px 16px;
    border-radius: 12px 12px 0 0;
  }

  .prod-infobox .option-area .offcanvas-header {
    display: block;
  }

  .prod-infobox .option-area .detail-box {
    margin-top: 20px;
  }

  .prod-infobox .option-area.active {
    bottom: 0;
  }

  .option-area.offcanvas {
    transition: bottom 0.4s ease-in-out;
  }

  .option-area.offcanvas.active {
    transition: bottom 0.4s ease-in-out;
  }

  body:has(.prod-infobox .option-area.active) {
    overflow: hidden;
  }

  .prod-infobox .strong-font {
    font-size: 18px;
  }

  .prod-infobox .info-detail>div {
    margin-bottom: 12px;
    align-items: flex-start;
  }

  .prod-infobox .detail-box>div:nth-last-child(1) {
    height: auto;
  }

  .prod-infobox .detail-box .dlvByCnd {
    flex-wrap: wrap;
  }

  .prod-view-body .prod-tabs ul {
    width: 100%;
  }

  .prod-view-body .prod-desc {
    width: 100%;
  }

  .prod-view-body .prod-desc,
  .prod-view-body .prod-inquiry {
    padding-top: 20px;
  }

  .prod-view-body .prod-inquiry {
    padding-top: 70px;
  }

  .prod-view-body .prod-desc p,
  .prod-view-body .prod-desc ul,
  .prod-view-body .prod-inquiry {
    padding-left: 16px;
    padding-right: 16px;
  }

  .prod-view-body .prod-desc ul {
    padding-left: 30px;
  }

  .prod-tabs {
    top: 56px;
  }

  .prod-view .blnBar {
    display: block;
  }

  .prod-view .moblie-wrap-btn {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  #page-container:has(.prod-view) .head-tl {
    display: none;
  }

  #page-container:has(.prod-view) .historyBack {
    display: flex;
  }

  .deco-title {
    margin-top: 0;
  }
}

@media (max-width: 768px) {

  #page-container:has(.cartPage) .headerIcon:has(.fa-cart-shopping),
  #page-container:has(#loginContainer) .head-tl,
  #page-container:has(#loginContainer) .headerIcon:has(.fa-cart-shopping) {
    display: none !important;
  }

  #page-container:has(.cartPage) .headerIcon:has(.fa-cart-shopping),
  #page-container:has(#loginContainer) .historyBack,
  #page-container:has(.cartPage) .headerIcon.prodView-homeIcon,
  #page-container:has(#loginContainer) .headerIcon.prodView-homeIcon {
    display: flex;
  }
}

@media (max-width: 499px) {
  #page-container:has(#loginContainer) #footer {
    display: none;
  }

  #page-container:has(#loginContainer) .member-layout {
    margin-top: 60px;
  }

  #page-container:has(#loginContainer) .member-layout .join-area {
    padding-top: 24px;
  }

  .bootstrap-select.btn-group .dropdown-menu li a span.text {
    white-space: wrap;
    text-overflow: ellipsis;
  }
}

.modal-open .modal {
  z-index: 1043 !important;
}

.fade.in {
  z-index: 1043;
}

.modal-backdrop.fade.in {
  z-index: 1042;
}

.tab-content .fade.in {
  z-index: 1;
}

.cover-upload-wrap a:has(.cover-upload-btn):hover {
  color: inherit;
}

#loginContainer .loginForm-inputBox .flex-input-box {
  align-items: flex-end;
}

#page-container:has(#loginContainer) .modal_close_box button,
#page-container:has(.onlyCart) .modal_close_box button {
  font-size: 16px;
  font-weight: 700;
}

#page-container:has(#loginContainer) .modal-body {
  word-break: keep-all;
}

#page-container:has(.deliveryAddress) #iframe .flex-input-box .input-btn,
#page-container:has(.cartPage.payment) .modal .modal-body .flex-input-box .input-btn {
  height: auto;
  border-radius: 4px;
  margin-left: 0;
}

#page-container:has(.deliveryAddress) #iframe .loginForm-input,
#page-container:has(.cartPage.payment) .modal .modal-body .loginForm-input {
  margin-top: 0;
}

#page-container:has(.deliveryAddress) #iframe .cartPage {
  cursor: pointer;
}

#page-container:has(.deliveryAddress) #iframe .themeBtn-border,
#page-container:has(.cartPage.payment) .modal .modal-body .themeBtn-border {
  background-color: #fff;
}

#page-container:has(.deliveryAddress) #iframe .themeBtn-border:hover,
#page-container:has(.cartPage.payment) .modal .modal-body .themeBtn-border:hover {
  background-color: #eee;
}