@charset "utf-8";


/* base */
body {
  font-family: Pretendard, sans-serif;
  word-wrap: break-word;
}
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
em,
address {
  font-style: normal;
  box-sizing: border-box;
}
dl,
dt,
dd,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
input,
button,
p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
  border: none;
  outline: none;
}
img {
  border: none;
  box-sizing: border-box;
  width: 100%;
  background-size: cover;
  background-position: center center;
}
div,
span,
ul,
li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
footer,
header,
section,
article {
  padding: 0;
  box-sizing: border-box;
}
form,
fieldset,
blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
legend,
caption,
hr {
  display: none;
  box-sizing: border-box;
}
textarea {
  overflow: auto;
  -webkit-appearance: none;
  border-radius: 0;
  font-family: "Pretendard", sans-serif;
  box-sizing: border-box;
}
input {
  font-family: "Pretendard", sans-serif;
  box-sizing: border-box;
}
input[type="image"] {
  -webkit-appearance: none;
  border-radius: 0;
}

input:focus {
  outline: none;
}
input[type="submit"],
button {
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}
input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0;
}
input[type="password"] {
  -webkit-appearance: none;
  border-radius: 0;
}
input[type="checkbox"] {
  border-radius: 0;
}
input[type="reset"] {
  border-radius: 0;
}
input[type="button"] {
  border-radius: 0;
}
select {
  border-radius: 0;
  font-family: "Pretendard", sans-serif;
}

/* ANCHOR */
a {
  color: #4c4c4c;
  text-decoration: none;
}

a:link {
  color: #4c4c4c;
  text-decoration: none;
}
a:visited {
  color: #4c4c4c;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}

/* 숨김영역 */
.skip {
  display: none !important;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  border: 0;
  visibility: hidden;
}

template {
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}


button{
-webkit-appearance: none;
    border-radius: 0;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
}
form, fieldset, blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
legend, caption, hr {
    display: none;
    box-sizing: border-box;
}
div, span, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
footer, header, section, article {
    padding: 0px;
    box-sizing: border-box;
}



.popupAllowWrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    height: calc(var(--vh, 1vh) * 100);
}
.popupAllowWrap .wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: calc(var(--vh, 1vh) * 100);
}
.showBottom {
    height: 320px !important;
    transition-duration: 400ms;
}
.hideBottom {
    height: 0px !important;
    transition-duration: 400ms;
}

.popupAllowWrap .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background: rgba(16,22,35,.3);
    z-index: 0;
}
.popupAllowWrap .popupAllow {
    position: fixed;
    padding: 32px 16px 4px;
    bottom:0;
    height: 0px;
    border-radius: 16px 16px 0 0;
    background: #fff;
    width: 100%;
}
.checkboxWrap {
    margin-top: 14px;
    margin-bottom: 14px;
}
.checkboxWrap .item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkboxWrap .item .text{
    padding-left: 8px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: #1c1c1e;
    letter-spacing: 0;
}
.checkboxWrap .item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkboxWrap .checkmark .active {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8.5" stroke="%238CA040"/><circle cx="12" cy="12" r="4" fill="%238CA040"/></svg>');
}

.checkboxWrap .checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -12px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8.5" stroke="%23C7C7CC"/></svg>');
}
.checkboxLinkWrap {
    display: flex;
    margin-bottom: 1px;
    align-items: center;
}
.checkboxLinkWrap .item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkboxLinkWrap .item .text{
    padding-left: 8px;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.checkboxLinkWrap .item .text.color, .checkboxLinkWrap .item .text.active{
    color: #f04b18;
}
.checkboxWrap .item .text.color, .checkboxWrap .item .text.active {
    color: #f04b18;
}
.checkboxLinkWrap .item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkboxLinkWrap .checkmark{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -12px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 9.80769L9.30952 13.5L15.5 7.5" stroke="%238E8E93" stroke-linecap="round"/></svg>');
}
.checkboxLinkWrap .checkmark.active{color: #f04b18;}
.checkboxLinkWrap  .checkmark .active{
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 9.80769L9.30952 13.5L15.5 7.5" stroke="%238CA040" stroke-linecap="round"/></svg>');
}

.checkboxLinkWrap .link {
    margin-left: 4px;
    text-decoration: underline;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
    background-color: white;
    width: 50px;
}

.btnStyle.type1 {
    background-color: #f2f2f7;
    color: #c7c7cc;
}
.popupAllowWrap .btnHide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    border-bottom: 1px solid #f2f2f7;
}
.icon {
    display: flex;
}

.inputItem, .inputItem .inputWrap {
    position: relative;
}
.inputItem .input {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin-bottom: 8px;
    line-height: 48px;
    border: 1px solid #c7c7cc;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
}
.inputItem .deleted {
    position: absolute;
    right: 12px;
    top: 14px;
}
.inputItem .msg {
    margin-top: -4px;
    margin-bottom: 20px;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #ba0000;
    letter-spacing: 0;
}
.inputItem.check .msg {
    color: #ff9330;
}
.inputItem .pwShow {
    position: absolute;
    right: 48px;
    top: 14px;
}

.btnDeleted {
    cursor: pointer;
}
.skip{
	display: none!important;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border: 0;
    visibility: hidden;
}

.layoutStyle .pn{
	padding-top: 48px;
}
.layoutStyle.pn .contents{
	min-height: calc(var(--vh, 1vh) * 100 - 106px);
}
.layoutStyle .contents{
	max-width: 768px;
    margin: auto;
}
.headerSub{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
    height: 48px;
    background-color: #fff;
}
.headerSub .bdn{
	border: none;
}
.headerSub .headerSubWrap{
	position: relative;
    max-width: 768px;
    margin: auto;
}
.headerSub .headerSubTitle{
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: Pretendard,sans-serif;
    font-size: 18px;
    line-height: 48px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.headerSub .back{
	position: absolute;
    top: 12px;
    left: 16px;
}


.loginLayout {
    padding: 0 16px;
}
.loginLogo {
    display: flex;
    margin-top: 50px;
    margin-bottom: 56px;
    justify-content: center;
}
.loginInputFormWrap{
    margin-bottom: 8px;
}
.btnStyleJoin {
    position: relative;
    top: 20px;
    left: 50%;
    width: 100%;
    transform: translate(-50%);
    height: 48px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #77519B;
    font-family: Pretendard,sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    transition: .25s ease;
}
.btnStyle {
    position: relative;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%);
    max-width: 768px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #77519B;
    font-family: Pretendard,sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    transition: .25s ease;
}

.linkFormWrap {
    margin-bottom: 32px;
}
.linkFormWrap .linkFormStyle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.linkFormWrap .linkFormStyle li {
    position: relative;
    display: flex;
    margin-right: 16px;
    margin-left: 16px;
}
.linkFormWrap .linkFormStyle li .linkFormTitle {
    display: inline-block;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.loginSnsWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.loginSnsWrap .loginSnsTitle {
    margin-bottom: 16px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 700;
    color: #48484a;
    letter-spacing: 0;
}
.loginSnsWrap .loginSnsList {
    display: flex;
}
.loginSnsWrap .loginSnsList>li {
    margin: 0 16px;
}




.HeaderProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
    background-color: #fff;
    border: 1px solid #e5e5ea;
    height: 48px;
    z-index: 100;
}


.HeaderProgress .HeaderProgressWrap{
    position: relative;
    max-width: 768px;
    margin: auto;
}
.HeaderProgressWrap .title{
    display: flex;
    justify-content: center;
    height: 48px;
    color: var(--system-color-black-1, #1C1C1E);
    text-align: center;
    align-items: center;
    /* pretendard_bold/18 fontsize */
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 144.444% */
}

.HeaderProgress .back {
    position: absolute;
    top: 12px;
    left: 16px;
}
.layoutForm {
    position: relative;
    padding: 64px 20px 16px;
    max-width: 768px;
    margin: auto;
    margin-bottom: 100px;
}
.layoutForm .layoutFormTitle{
    margin-bottom: 24px;
    font-family: Pretendard,sans-serif;
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}





.mainHeader {
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e5ea;
}
.mainHeader, .subHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
}
.mainHeader .headerWrap, .subHeader .headerWrap {
    position: relative;
    height: 56px;
    max-width: 768px;
    padding: 8px 16px 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mainHeader .headerBtnWrap, .subHeader .headerBtnWrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainHeader .btnSearch, .mainHeader .btnAlarm {
    display: flex;
    margin-right: 12px;
}
.link {
    display: inline-block;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #e5e5ea;
}
.link.bd {
    border: 1px solid #c7c7cc;
}
.link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mainTitle{
    font-family: Pretendard,sans-serif;
    font-size: 18px;
    line-height: 21px;
    font-weight: 800;
    color: #f0831e;
    letter-spacing: 0;
}
.mainHeader .headerBtnWrap, .subHeader .headerBtnWrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainHeader .btnSearch, .mainHeader .btnAlarm {
    display: flex;
    margin-right: 12px;
}

.mygrade{
    display: flex;

height: 19px;

justify-content: center;
flex-shrink: 0;
    color: #48484A;
font-family: Inter;
font-size: 12.391px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}

.contentWrap{
    position: relative;
    padding-left: 16px;
    
}
.contentWrap .more {
    position: absolute;
    top: 8px;
    right: 16px;
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: rgb(142, 142, 147);
    letter-spacing: 0px;
}

.contentWrap .contentWrapTitle {
    margin-left: 2px;
    margin-bottom: 16px;
    font-family: Pretendard, sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: rgb(28, 28, 30);
    letter-spacing: 0px;
}
.TabStyle {
    padding-bottom: 12px;
    max-height: 70px;
}

.TabStyle .tabBtn {
    height: 34px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid #d1d1d6;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 33px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
    transition: .25s ease;
}
.TabStyle .tabBtn.active {
    border-color: #6D7F28;;
    background-color: #77519B;
    color: #fff;
}

.cardStyleEventWrap{
    position: relative;
    min-height: 237px;
    margin-bottom: 47px;
    max-height: 250px;
}
.cardStyleEventWrap .cardStyleLike {
    width: 268px;
    margin-right: 8px;
}
.cardStyleEventWrap .cardContents {
    position: relative;
    width: 100%;
    height: 100%;
}
.cardStyleEventWrap .cardContents .cardTitle {
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: "0";
}
.cardStyleEventWrap .cardContents .cardProfileWrap {
    display: flex;
    align-items: center;
}
.cardStyleEventWrap .cardContents .cardProfileWrap .cardProfile{
    position: relative;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #636366;
    letter-spacing: 0;
    margin-right: 10px;
}
.cardStyleEventWrap .cardContents .cardProfileWrap .cardDate {
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -85px;
    z-index: 10;
}
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -85px;
    z-index: 10;
}

.cardStyleProfileWrap {
    position: relative;
    margin-bottom: 37px;
    min-height: 203px;
    max-height: 250px;
}
.cardStyleProfileWrap .cardStyleProfile {
    width: 192px;
    height: 232px;
    margin-right: 8px;
}
.cardStyleProfileWrap .cardContents {
    position: relative;
    padding: 80px 16px 16px;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 1px solid #c7c7cc;
}
.cardStyleProfileWrap .cardContents .cardTitle{
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cardStyleProfileWrap .cardContents .imgWrap {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #7bc361;
    background-color: #f7f7f7;
}
.cardStyleProfileWrap .cardContents .nonImg {
    position: absolute;
    top: 16px;
    left: 16px;
}
.cardStyleProfileWrap .cardContents .cardTxt{
    margin-bottom: 8px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: "0";
}
.cardStyleProfileWrap .cardContents .cardInfo {
    display: flex;
    margin-bottom: 8px;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #636366;
    letter-spacing: 0;
}
.cardStyleProfileWrap .cardContents .cardInfo .cardAddress {
    position: relative;
    margin-right: 10px;
}
.cardStyleProfileWrap .cardContents .cardTag {
    display: flex;
    flex-wrap: wrap;
}
.cardStyleProfileWrap .cardContents .cardTag li {
    margin-right: 6px;
    font-family: Pretendard,sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.cardStyleProfileWrap .cardStyleProfile {
    width: 192px;
    height: 232px;
    margin-right: 8px;
}

.cardStyleWrap {
    position: relative;
    width: calc(100% - 32px);
    margin: 80px 16px 37px;
    height: 429px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(116deg, rgb(236, 236, 236) 0%, rgb(234, 234, 234) 100%);
}

.imgStyleWrap{
    position: relative;
    width: 100%;
    height: 152px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: linear-gradient(116deg,#ececec 0%,#eaeaea 100%);
    overflow: hidden;
}
.imgStyleWrap .img {
    width: 100%;
    height: 100%;
}
.imgStyleWrap .btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
}
.like {
    display: flex;
}

.cardStyleLikeWrap {
    position: relative;
    margin-bottom: 47px;
    
}
.cardStyleLikeWrap .cardStyleLike {
    width: 152px;
    margin-right: 8px;
}
.cardStyleLikeWrap .cardContents {
    position: relative;
    width: 100%;
    height: 100%;
}
.cardStyleLikeWrap .cardContents .cardTitle {
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: "0";
}
.cardStyleLikeWrap .cardContents .cardDate {
    /* display: flex; */
    margin-bottom: 1px;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #48484a;
    letter-spacing: 0;
}

.cardStyleLikeWrap .cardContents .cardPrice {
    display: flex;
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
}

.cardStyleLikeWrap .cardContents .cardPrice .cardPriceNum {
    position: relative;
    font-family: Pretendard,sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}

.cardStyleLikeWrap .cardContens .cardPrice .cardDiscountPercent {
    position: relative;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 26px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}

.cardStyleLikeWrap .cardContents .cardProfileWrap {
    display: flex;
    align-items: center;
}
.cardStyleLikeWrap .cardContents .cardProfileWrap .cardImg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #d9d9d9;
}
.cardStyleLikeWrap .cardContents .cardProfileWrap .cardProfile {
    font-family: Pretendard,sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.faceIcon {
    position: relative;
    display: flex;
    border-radius: 50%;
}



.homeBannerWrap {
    width: 100%;
    height: 173px;
    padding: 0px 16px;
    margin-bottom: 40px;
    overflow: hidden;
}

.homeBannerWrap .homeBanner {
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(116deg, rgb(236, 236, 236) 0%, rgb(234, 234, 234) 100%);
}
.homeBannerWrap .imgWrap{
    position: relative;
    width: 100%;
    height: 173px;
    border-radius: 16px;
    overflow: hidden;
}
.homeBannerWrap .imgWrap button {
    width: 100%;
    height: 100%;
}

.footerStyle {
    margin: auto;
    max-width: 768px;
    padding: 24px 16px 116px;
    background-color: #f2f2f7;
}
.snsListWrap {
    margin-bottom: 16px;
}
.snsListWrap .snsList{
    display: flex;
    align-items: center;
}
.snsListWrap li {
    margin-right: 8px;
}

.linkStyleWrap {
    margin-bottom: 12px;
}
.linkStyleWrap .linkStyle{
    display: flex;
    flex-wrap: wrap;
}
.linkStyleWrap .linkStyle li {
    display: flex;
    margin-right: 4px;
    margin-bottom: 4px;
}
.linkStyleWrap .linkStyle li .linkTitle {
    display: inline-block;
    padding: 4px 5px;
    border: 1px solid #d1d1d6;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: 0;
}
.linkStyleWrap .linkStyle li .linkTitle.color {
    color: #636366;
}

.textStyleWrap {
    margin-bottom: 16px;
    font-family: Pretendard,sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.textStyleWrap .textStyle {
    display: flex;
}
@media screen and (max-width: 766px) {
    .textStyleWrap .textStyle {
        display: flex;
        flex-direction: column;
    }
    .textStyleWrap .textStyle>li:nth-child(even) {
        margin-left: 0px !important;
    }
    .textStyleWrap .textStyleTitle {
        padding-top: 10px !important;
    }
      }

.textStyleWrap .textStyle>li:nth-child(even) {
    margin-left: 8px;
}
.textStyleWrap .textStyleTitle {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
    color: #636366;
    letter-spacing: 0;
    word-break: auto-phrase;
}
.textStyleWrap .textStyleTitle span {
    margin-left: 11px;
    font-family: Pretendard,sans-serif;
    font-size: 10px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.textStyleWrap .textStyleInfo {
    display: flex;
}
.textStyleWrap .textStyleInfo .textStyleInfoTitle {
    margin-right: 4px;
    min-width: 40px;
    word-break: auto-phrase;
}
.footerStyle .footerExplan {
    margin-bottom: 8px;
}
.footerStyle .footerExplan, .footerStyle .copyright{
    font-family: Pretendard,sans-serif;
    font-size: 10px;
    line-height: 18px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}

.quickMenu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 100;
    height: 60px;
    padding: 4px 0 8px;
    box-shadow: 0 -2px 16px 2px #1f202329;
    box-sizing: border-box;
}
.quickMenu ul{
    display: flex;
    width: 100%;
    max-width: 768px;
    margin: auto;
    justify-content: space-evenly;
}
.quickMenuItem {
    min-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
}
.quickMenuItem .quickMenuLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Pretendard,sans-serif;
    font-size: 11px;
    line-height: 18px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.quickMenuItem .quickMenuLink .active {
    color: #1c1c1e;
}
.icon_home.active {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.39005 8.95261L3.4189 8.93439L3.44597 8.91362L11.1939 2.97158C11.6836 2.67614 12.3164 2.67614 12.8061 2.97158L20.554 8.91362L20.5811 8.93439L20.6099 8.95261C21.0208 9.2121 21.25 9.63546 21.25 10.0702V20.5224C21.25 21.0385 21.1466 21.1214 21.141 21.1259L21.1408 21.1261C21.1014 21.1596 20.9359 21.25 20.3333 21.25H15.2222C15.0842 21.25 14.9722 21.1381 14.9722 21V16.3119C14.9722 14.6973 13.6028 13.4566 12 13.4566C10.3972 13.4566 9.02778 14.6973 9.02778 16.3119V21C9.02778 21.1381 8.91585 21.25 8.77778 21.25H3.66667C3.06414 21.25 2.89863 21.1596 2.8592 21.1261L2.85901 21.1259C2.85342 21.1214 2.75 21.0385 2.75 20.5224V10.0702C2.75 9.63546 2.97919 9.2121 3.39005 8.95261Z" fill="%231C1C1E" stroke="%231C1C1E" stroke-width="1.5"/></svg>');
}
.icon_people.active {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3234 21C19.1964 21 20 20.4233 20 19.5639C20 16.0073 16.4183 13.1242 12 13.1242C7.58172 13.1242 4 16.0073 4 19.5639C4 20.4233 4.80363 21 5.67665 21H18.3234Z" fill="%231C1C1E"/><ellipse cx="12" cy="7.50048" rx="4.57143" ry="4.50047" fill="%231C1C1E"/></svg>');
}
.icon_goods.active {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="7.51001" y="19.905" width="1.5" height="2.09293" rx="0.75" fill="%231C1C1E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 6.15533C5.39543 6.15533 4.5 7.05077 4.5 8.15534V18.8537C4.5 19.9583 5.39543 20.8537 6.5 20.8537H17.5C18.6046 20.8537 19.5 19.9583 19.5 18.8537V8.15533C19.5 7.05076 18.6046 6.15533 17.5 6.15533H6.5ZM12 8.60507C11.5858 8.60507 11.25 8.94086 11.25 9.35507V17.654C11.25 18.0682 11.5858 18.404 12 18.404C12.4142 18.404 12.75 18.0682 12.75 17.654V9.35507C12.75 8.94086 12.4142 8.60507 12 8.60507ZM8 9.35507C8 8.94086 8.33579 8.60507 8.75 8.60507C9.16421 8.60507 9.5 8.94086 9.5 9.35507V17.654C9.5 18.0682 9.16421 18.404 8.75 18.404C8.33579 18.404 8 18.0682 8 17.654V9.35507ZM15.25 8.60507C14.8358 8.60507 14.5 8.94086 14.5 9.35507V17.654C14.5 18.0682 14.8358 18.404 15.25 18.404C15.6642 18.404 16 18.0682 16 17.654V9.35507C16 8.94086 15.6642 8.60507 15.25 8.60507Z" fill="%231C1C1E"/><rect x="15.0132" y="19.9071" width="1.5" height="2.09293" rx="0.75" fill="%231C1C1E"/><path d="M8.75 4C8.75 3.30964 9.30964 2.75 10 2.75H14C14.6904 2.75 15.25 3.30964 15.25 4V6.85431H8.75V4Z" stroke="%231C1C1E" stroke-width="1.5"/></svg>');
}
.icon_news.active {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.75 5.75H20C20.6904 5.75 21.25 6.30964 21.25 7V17C21.25 17.6904 20.6904 18.25 20 18.25H17.75V5.75Z" fill="%231C1C1E" stroke="%231C1C1E" stroke-width="1.5"/><mask id="path-2-inside-1_770_17594" fill="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C2.89543 3 2 3.89543 2 5V19C2 20.1046 2.89543 21 4 21H14C15.1046 21 16 20.1046 16 19V5C16 3.89543 15.1046 3 14 3H4ZM5.75 6.91676C5.33579 6.91676 5 7.25255 5 7.66676C5 8.08098 5.33579 8.41676 5.75 8.41676H12.25C12.6642 8.41676 13 8.08098 13 7.66676C13 7.25255 12.6642 6.91676 12.25 6.91676H5.75ZM5 10.662C5 10.2478 5.33579 9.91198 5.75 9.91198H12.25C12.6642 9.91198 13 10.2478 13 10.662C13 11.0762 12.6642 11.412 12.25 11.412H5.75C5.33579 11.412 5 11.0762 5 10.662ZM5.75 12.907C5.33579 12.907 5 13.2428 5 13.657C5 14.0712 5.33579 14.407 5.75 14.407H12.25C12.6642 14.407 13 14.0712 13 13.657C13 13.2428 12.6642 12.907 12.25 12.907H5.75Z"/></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C2.89543 3 2 3.89543 2 5V19C2 20.1046 2.89543 21 4 21H14C15.1046 21 16 20.1046 16 19V5C16 3.89543 15.1046 3 14 3H4ZM5.75 6.91676C5.33579 6.91676 5 7.25255 5 7.66676C5 8.08098 5.33579 8.41676 5.75 8.41676H12.25C12.6642 8.41676 13 8.08098 13 7.66676C13 7.25255 12.6642 6.91676 12.25 6.91676H5.75ZM5 10.662C5 10.2478 5.33579 9.91198 5.75 9.91198H12.25C12.6642 9.91198 13 10.2478 13 10.662C13 11.0762 12.6642 11.412 12.25 11.412H5.75C5.33579 11.412 5 11.0762 5 10.662ZM5.75 12.907C5.33579 12.907 5 13.2428 5 13.657C5 14.0712 5.33579 14.407 5.75 14.407H12.25C12.6642 14.407 13 14.0712 13 13.657C13 13.2428 12.6642 12.907 12.25 12.907H5.75Z" fill="%231C1C1E"/><path d="M3.5 5C3.5 4.72386 3.72386 4.5 4 4.5V1.5C2.067 1.5 0.5 3.067 0.5 5H3.5ZM3.5 19V5H0.5V19H3.5ZM4 19.5C3.72386 19.5 3.5 19.2761 3.5 19H0.5C0.5 20.933 2.067 22.5 4 22.5V19.5ZM14 19.5H4V22.5H14V19.5ZM14.5 19C14.5 19.2761 14.2761 19.5 14 19.5V22.5C15.933 22.5 17.5 20.933 17.5 19H14.5ZM14.5 5V19H17.5V5H14.5ZM14 4.5C14.2761 4.5 14.5 4.72386 14.5 5H17.5C17.5 3.067 15.933 1.5 14 1.5V4.5ZM4 4.5H14V1.5H4V4.5ZM6.5 7.66676C6.5 8.08098 6.16421 8.41676 5.75 8.41676V5.41676C4.50736 5.41676 3.5 6.42412 3.5 7.66676H6.5ZM5.75 6.91676C6.16421 6.91676 6.5 7.25255 6.5 7.66676H3.5C3.5 8.9094 4.50736 9.91676 5.75 9.91676V6.91676ZM12.25 6.91676H5.75V9.91676H12.25V6.91676ZM11.5 7.66676C11.5 7.25255 11.8358 6.91676 12.25 6.91676V9.91676C13.4926 9.91676 14.5 8.9094 14.5 7.66676H11.5ZM12.25 8.41676C11.8358 8.41676 11.5 8.08098 11.5 7.66676H14.5C14.5 6.42412 13.4926 5.41676 12.25 5.41676V8.41676ZM5.75 8.41676H12.25V5.41676H5.75V8.41676ZM5.75 8.41198C4.50736 8.41198 3.5 9.41934 3.5 10.662H6.5C6.5 11.0762 6.16421 11.412 5.75 11.412V8.41198ZM12.25 8.41198H5.75V11.412H12.25V8.41198ZM14.5 10.662C14.5 9.41934 13.4926 8.41198 12.25 8.41198V11.412C11.8358 11.412 11.5 11.0762 11.5 10.662H14.5ZM12.25 12.912C13.4926 12.912 14.5 11.9046 14.5 10.662H11.5C11.5 10.2478 11.8358 9.91198 12.25 9.91198V12.912ZM5.75 12.912H12.25V9.91198H5.75V12.912ZM3.5 10.662C3.5 11.9046 4.50736 12.912 5.75 12.912V9.91198C6.16421 9.91198 6.5 10.2478 6.5 10.662H3.5ZM6.5 13.657C6.5 14.0712 6.16421 14.407 5.75 14.407V11.407C4.50736 11.407 3.5 12.4144 3.5 13.657H6.5ZM5.75 12.907C6.16421 12.907 6.5 13.2428 6.5 13.657H3.5C3.5 14.8996 4.50736 15.907 5.75 15.907V12.907ZM12.25 12.907H5.75V15.907H12.25V12.907ZM11.5 13.657C11.5 13.2428 11.8358 12.907 12.25 12.907V15.907C13.4926 15.907 14.5 14.8996 14.5 13.657H11.5ZM12.25 14.407C11.8358 14.407 11.5 14.0712 11.5 13.657H14.5C14.5 12.4143 13.4926 11.407 12.25 11.407V14.407ZM5.75 14.407H12.25V11.407H5.75V14.407Z" fill="%231C1C1E" mask="url(%23path-2-inside-1_770_17594)"/></svg>');
}
.icon_feed.active {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM11.8487 14.8253L9.38061 12.0663L9.20176 11.8308C8.59368 11.1579 8.62945 10.1148 9.30907 9.50919C9.98869 8.90355 11.0318 9.18157 11.6398 9.8545L11.9975 10.2583L12.4268 9.82086C13.0706 9.18157 14.1021 8.97085 14.746 9.61013C15.3898 10.2494 15.3898 11.2925 14.746 11.9317L14.1737 12.5037L11.8487 14.8253Z" fill="%231C1C1E"/></svg>');
}
.icon_home {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.39005 8.95261L3.4189 8.93439L3.44597 8.91362L11.1939 2.97158C11.6836 2.67614 12.3164 2.67614 12.8061 2.97158L20.554 8.91362L20.5811 8.93439L20.6099 8.95261C21.0208 9.2121 21.25 9.63546 21.25 10.0702V20.5224C21.25 21.0385 21.1466 21.1214 21.141 21.1259L21.1408 21.1261C21.1014 21.1596 20.9359 21.25 20.3333 21.25H15.2222C15.0842 21.25 14.9722 21.1381 14.9722 21V16.3119C14.9722 14.6973 13.6028 13.4566 12 13.4566C10.3972 13.4566 9.02778 14.6973 9.02778 16.3119V21C9.02778 21.1381 8.91585 21.25 8.77778 21.25H3.66667C3.06414 21.25 2.89863 21.1596 2.8592 21.1261L2.85901 21.1259C2.85342 21.1214 2.75 21.0385 2.75 20.5224V10.0702C2.75 9.63546 2.97919 9.2121 3.39005 8.95261Z" stroke="%238E8E93" stroke-width="1.5"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
}

.icon_people {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="path-1-inside-1_770_19371" fill="white"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.3457 21C19.2063 21 20 20.4243 20 19.5638C20 16.0073 16.4183 13.1241 12 13.1241C7.58172 13.1241 4 16.0073 4 19.5638C4 20.4243 4.79375 21 5.65428 21H18.3457Z"/></mask><path d="M12 14.6241C15.9101 14.6241 18.5 17.1232 18.5 19.5638H21.5C21.5 14.8914 16.9265 11.6241 12 11.6241V14.6241ZM5.5 19.5638C5.5 17.1232 8.08991 14.6241 12 14.6241V11.6241C7.07353 11.6241 2.5 14.8914 2.5 19.5638H5.5ZM5.65428 22.5H18.3457V19.5H5.65428V22.5ZM2.5 19.5638C2.5 21.5147 4.2541 22.5 5.65428 22.5V19.5C5.60519 19.5 5.55955 19.4916 5.52189 19.4786C5.48382 19.4654 5.46314 19.4509 5.45681 19.4457C5.45131 19.4412 5.46379 19.4499 5.47797 19.4782C5.49374 19.5096 5.5 19.5425 5.5 19.5638H2.5ZM18.5 19.5638C18.5 19.5425 18.5063 19.5096 18.522 19.4782C18.5362 19.4499 18.5487 19.4412 18.5432 19.4457C18.5369 19.4509 18.5162 19.4654 18.4781 19.4786C18.4404 19.4916 18.3948 19.5 18.3457 19.5V22.5C19.7459 22.5 21.5 21.5147 21.5 19.5638H18.5Z" fill="%238E8E93" mask="url(%23path-1-inside-1_770_19371)"/><path d="M15.8214 7.50047C15.8214 9.56079 14.1216 11.2509 12 11.2509C9.87838 11.2509 8.17857 9.56079 8.17857 7.50047C8.17857 5.44016 9.87838 3.75 12 3.75C14.1216 3.75 15.8214 5.44016 15.8214 7.50047Z" stroke="%238E8E93" stroke-width="1.5"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
}
.icon_goods {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5.25" y="6.90533" width="13.5" height="13.1984" rx="1.25" stroke="%238E8E93" stroke-width="1.5"/><rect x="7.51001" y="19.905" width="1.5" height="2.09293" rx="0.75" fill="%238E8E93"/><rect x="11.25" y="8.60506" width="1.5" height="9.79892" rx="0.75" fill="%238E8E93"/><rect x="8" y="8.60506" width="1.5" height="9.79892" rx="0.75" fill="%238E8E93"/><rect x="14.5" y="8.60506" width="1.5" height="9.79892" rx="0.75" fill="%238E8E93"/><rect x="15.0132" y="19.9071" width="1.5" height="2.09293" rx="0.75" fill="%238E8E93"/><path d="M8.75 4C8.75 3.30964 9.30964 2.75 10 2.75H14C14.6904 2.75 15.25 3.30964 15.25 4V6.85431H8.75V4Z" stroke="%238E8E93" stroke-width="1.5"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
}
.icon_news {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.75" y="3.75" width="12.5" height="16.5" rx="1.25" stroke="%238E8E93" stroke-width="1.5"/><path d="M15.2456 5.75H20C20.6904 5.75 21.25 6.30964 21.25 7V17C21.25 17.6904 20.6904 18.25 20 18.25H15.2456V5.75Z" stroke="%238E8E93" stroke-width="1.5"/><rect x="5.375" y="7.3783" width="7.25" height="0.75" rx="0.375" fill="black" stroke="%238E8E93" stroke-width="0.75"/><rect x="5.375" y="10.3735" width="7.25" height="0.75" rx="0.375" fill="black" stroke="%238E8E93" stroke-width="0.75"/><rect x="5.375" y="13.3685" width="7.25" height="0.75" rx="0.375" fill="black" stroke="%238E8E93" stroke-width="0.75"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
}
.icon_feed {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3.75" y="3.75" width="16.5" height="16.5" rx="1.25" stroke="%238E8E93" stroke-width="1.5"/><path d="M9.38061 12.0663L11.8487 14.8253L14.1737 12.5037L14.746 11.9317C15.3898 11.2924 15.3898 10.2494 14.746 9.61012C14.1022 8.97083 13.0706 9.18156 12.4268 9.82084L11.9975 10.2582L11.6398 9.85449C11.0318 9.18156 9.98868 8.90354 9.30907 9.50918C8.62945 10.1148 8.59368 11.1579 9.20176 11.8308L9.38061 12.0663Z" stroke="%238E8E93" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
}




.headerDetailStyle {
    position: relative;
    max-width: 768px;
    margin: auto;
    display: flex;
    z-index: 100;
}
.headerDetailStyle .headerDetailFixed {
    position: fixed;
    width: 100%;
    max-width: 768px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,0) 100%);
    transition: .25s ease;
}
.headerDetailStyle .back {
    margin-top: 12px; 
    margin-left: 16px;
    transition: .25s ease;
}
.headerDetailStyle .btnWrap {
    display: flex;
}
.headerDetailStyle .likeBtn {
    margin-right: 16px;
    margin-top: 12px;
    transition: .25s ease;
}
.headerDetailStyle .align {
    margin-right: 12px;
    margin-top: 12px;
    transition: .25s ease;
}
.like {
    display: flex;
}
.popupBtn {
    position: relative;
    display: flex;
}
.headerDetailStyle .imgWrap {
    width: 100%;
    
    overflow: hidden;
}
.orderCountWrap{
    display: flex;
    border: 1px solid #DDE0E3;
}
.orderCountWrap .act{
    width: 44px;
    height: 44px;
    background-color: #F1F2F4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.orderCountWrap .num{
    width: 55px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layoutDetailStyle .contents {
    max-width: 768px;
    margin: auto!important;
    padding-bottom: 136px;
}
.TitleBox{
    padding: 24px 16px 8px;
    border-bottom: 1px solid #f2f2f7;
}
.TitleBox .titleWrap .wrap{
    display: flex;
    flex-direction: column-reverse;
}
.TitleBox .titleWrap .title{
    font-family: Pretendard,sans-serif;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.TitleBox .titleWrap .tagList{
    display: flex;
    flex-wrap: wrap;
}
.TitleBox .titleWrap .tagList .tag {
    margin-right: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.TitleBox .priceWrap {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    margin-top: 32px;
}
.TitleBox .priceWrap .priceInfo {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.TitleBox .priceWrap .price {
    font-family: Pretendard,sans-serif;
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.TitleBox .priceWrap .unit {
    font-family: Pretendard,sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}

.TitleBox .priceWrap .numWrap {
    display: flex;
    align-items: center;
}
.TitleBox .priceWrap .numWrap {
    margin-bottom: 16px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #48484a;
    letter-spacing: 0;
}
.TitleBox .priceWrap .numWrap .txt {
    display: flex;
    align-items: center;
    margin-right: 8px;
    font-family: Pretendard,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #ff9330;
    letter-spacing: 0;
}
.TitleBox .priceWrap .numWrap .txt .icon{
    margin-right: 4px;
}
.TitleBox .priceWrap .numWrap .num {
    margin-right: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.TitleBox .priceWrap .numWrap .total {
    margin-left: 4px;
}
.TitleBox .news {
    text-align: right;
}
.TitleBox .news .utils {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.TitleBox .news .utils .like {
    margin-right: 8px;
}
.TitleBox .news .utils .like, .TitleBox .news .utils .views {
    display: flex;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.programInfoList {
    position: relative;
    padding: 16px 16px 32px;
}

.programInfoList:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    clear: both;
    width: 100%;
    height: 8px;
    background: var(--system-color-grey-9, #f2f2f7);
    box-shadow: 0 1px 2px #3b404b14 inset;
}

.programInfoList.pd {
    padding-bottom: 24px;
}

.programInfoList .programInfoTitle {
    margin-bottom: 16px;
    font-family: Pretendard,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #000;
    letter-spacing: 0;
}
.programInfoList .titleBold {
    display: flex;
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.programInfoList .txt {
    position: relative;
    padding-left: 16px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
    margin-bottom: 8px;
}
.programInfoList .title {
    display: flex;
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
}
.TabOtherStyle {
    display: flex;
    margin-bottom: 12px;
    background-color: #fff;
}
.TabOtherStyle .TabOtherList {
    display: flex;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
}
.TabOtherStyle .TabOtherList .tab {
    width: 100%;
}
.TabOtherStyle .tabBtn {
    display: block;
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #e5e5ea;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 44px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: 0;
    transition: .25s ease;
}
.TabOtherStyle .tabBtn.active {
    border-color: #77519B;
    color: #77519B;
}
.LayoutContentOther {
    position: relative;
    padding: 24px 16px 0px;
}
.mt {
    position: relative;
    margin-bottom: 22px;
    /* height: 1200px; */
    /* max-height: 1600px;
    height: 100%; */
}

.contentBox {
    position: relative;
    padding: 30px 0 0px 0;
    border-top: 1px solid #e3e3e3;
}


.imgBox{
    padding: 0px 0 20px 0;
}


.detailImg {
    position: relative;
}
.detailImg .imgWrap {
    /* overflow: hidden; */
}
.contentWrap {
    position: relative;
    padding-left: 16px;
}
.contentWrap .contentWrapTitle {
    margin-left: 2px;
    margin-bottom: 16px;
    font-family: Pretendard,sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}






.popupStyleSelectWrap>div {
    max-width: 767px;
    margin: auto;
    width: 100%;
    box-shadow: 0 -2px 16px 2px #1f202329;
    background: none;
    border-radius: 16px 16px 0 0;
}
.popupStyleSelectWrap .popupSelectContent {
    position: relative;
    padding: 41px 16px 19px;
    border-radius: 16px 16px 0 0;
    background: #fff;
}
.popupStyleSelectWrap .popupSelectContent.popupPdn {
    padding: 0 16px;
    height: 0;
    overflow: hidden;
}
.popupStyleSelectWrap .popupSelectContent .popupSelectList {
    padding-bottom: 4px;
}
.popupStyleSelectWrap .popupSelectContent .popupSelectList .list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.popupStyleSelectWrap .popupSelectContent .selectTitle {
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
}
.popupStyleSelectWrap .btnWrap {
    display: flex;
    padding: 4px 6px;
    border-radius: 56px;
    border: 1px solid #f2f2f7;
    background: #fff;
    align-items: center;
    justify-content: space-between;
}
.popupStyleSelectWrap .btnWrap .num {
    display: block;
    text-align: center;
    width: 33px;
}
.popupStyleSelectWrap .popupSelectContent .priceInfo {
    display: flex;
    justify-content: space-between;
}
.popupStyleSelectWrap .popupSelectContent .priceInfo .title {
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.popupStyleSelectWrap .popupSelectContent .priceInfo .price {
    font-family: Pretendard,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.popupStyleSelectWrap .applyBtn {
    position: fixed;/* relative */
    z-index: 10;
    padding: 6px 16px 1px;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%);
    max-width: 768px;
    background-color: #fff;
}
.popupStyleSelectWrap .applyBtn2 {
    position: relative;
    z-index: 10;
    padding: 6px 16px 1px;
    background-color: #fff;
}
.popupStyleSelectWrap .btn {
    margin-bottom: 5px;
}



.cartList {
    position: relative;
    padding: 16px 16px 16px;
    border-bottom: 1px solid #E5E5EA;
}

.cartItem{
    width: 100%;
    display: block;
    margin-left: 8px;
}
.cartItem img{
    display: flex;
    width: 62px;
    height: 62px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    object-fit: cover;
}
.cartItem .info{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.cartItem .info .goodsName{
    color: var(--system-color-black-1, #1C1C1E);
/* pretendard_medium/13 fontsize */
font-family: Pretendard;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 153.846% */
margin-left: 8px;
margin-right: 8px;
}
.cartItem .price{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}
.cartItem .price .orderPrice{
    color: var(--system-color-black-1, #1C1C1E);
font-family: Pretendard;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 160% */

    display: flex;
    justify-content: center;
    align-items: center;
}
.cartOrderCountWrap{
    display: flex;
    border: 1px solid #DDE0E3;
}
.cartOrderCountWrap .act{
    width: 28px;
    height: 28px;
    background-color: #F1F2F4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cartOrderCountWrap .num{
    width: 55px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.cartSum{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
}
.cartSum .sumText{
    color: var(--system-color-grey-4, #8E8E93);
/* pretendard_medium/15 fontsize */
font-family: Pretendard;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 160% */
}
.cartSum .sumPrice{
    color: var(--system-color-black-1, #1C1C1E);
text-align: right;
/* pretendard_bold/16 fontsize */
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
}



.cartPay{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.cartPay .payText{
    color: var(--system-color-black-1, #1C1C1E);
/* pretendard_medium/15 fontsize */
font-family: Pretendard;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 160% */
}
.cartPay .payPrice{
    color: var(--system-color-black-1, #1C1C1E);
text-align: right;
/* pretendard_bold/22 fontsize */
font-family: Pretendard;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 145.455% */
}

.cartInfoList {
    position: relative;
    padding: 5px 16px 30px;
}

.cartInfoList:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    clear: both;
    width: 100%;
    height: 8px;
    background: var(--system-color-grey-9, #f2f2f7);
    box-shadow: 0 1px 2px #3b404b14 inset;
}
.layoutForm2 {
    position: relative;
    padding: 48px 0px 0px;
    max-width: 768px;
    margin: auto;
}
.cartItem .pay{
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
.cartItem .pay .goodsName{
    color: var(--system-color-black-1, #1C1C1E);
/* pretendard_medium/13 fontsize */
font-family: Pretendard;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 153.846% */
margin-left: 8px;
margin-right: 8px;
}

.addressBtn{
    width: 170px;
    height: 44px;

    color: var(--system-color-primary, #77519B);
/* pretendard_medium/14 fontsize */
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 157.143% */


    display: inline-flex;
padding: 2px 8px;
justify-content: center;
align-items: center;
border-radius: 56px;
border: 1px solid var(--system-color-primary, #77519B);
}

.mileageBtn{
    width: 90px;
    height: 30px;
margin-left: 10px;
    color: var(--system-color-primary, #77519B);
/* pretendard_medium/14 fontsize */
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 157.143% */


    display: inline-flex;
padding: 2px 8px;
justify-content: center;
align-items: center;
border-radius: 56px;
border: 1px solid var(--system-color-primary, #77519B);
}

.paymethod{
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
        flex-wrap: wrap;
}
.paymethod .item{
    color: var(--system-color-grey-4, #8E8E93);
/* pretendard_medium/15 fontsize */
font-family: Pretendard;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 160% */
    display: flex;
width: 120px;
padding: 6px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 4px;
border: 1px solid var(--system-color-grey-4, #8E8E93);
}
.paymethod .active{
    color: #FFF;
	background-color:#77519B;
    border: 1px solid var(--system-color-primary, #77519B);

}



.layoutSearchStyle {
    padding-top: 48px;
    padding-bottom: 100px;
}
.layoutSearchStyle.more, .layoutSearchStyle.setting {
    padding-bottom: 0;
}
.headerPopupStyle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 101;
}
.headerPopupStyle .headerPopupStyleWrap {
    position: relative;
    max-width: 768px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background-color: #fff;
}
.headerPopupStyle .headerPopupTitle {
    font-family: Pretendard,sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.headerPopupStyle .back {
    position: absolute;
    top: 12px;
    left: 16px;
}
.headerPopupStyle .more, .headerPopupStyle .setting {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.layoutSearchStyle .contents {
    max-width: 768px;
    margin: auto;
    overflow-x: hidden;
    min-height: calc(var(--vh, 1vh) * 100 - 148px);
}
.profileWrap {
    padding: 16px 16px 0;
}
.profile.myprofile {
    margin-bottom: 18px;
}
.profile .profileWrap {
    display: flex;
}
.profile .profileWrap .profile_img {
    min-width: 80px;
    max-width: 80px;
    height: 80px;
}
.profile .profileWrap .profile_text {
    margin-left: 16px;
}
.profile .profileWrap .profile_text .nickname_wrap {
    display: flex;
    align-items: center;
}
.profile .profileWrap .profile_text .nickname_wrap .nickname {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: #000;
}
.profile .profileWrap .profile_text .nickname_wrap .location {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    margin-left: 6px;
    color: #1c1c1e;
}
.profile .profileWrap .profile_text .introduction {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #48484a;
    margin-top: 4px;
    display: block;
}
.profile .correction{
   /*  display: flex;
    align-items: center;
    justify-content: flex-end; */
    margin-top: 10px;
}
.profile .correction .correction_btn {
    display: flex;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.followWrap {
    position: relative;
    background-color: #f2f2f7;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    padding: 16px 0;
    margin-bottom: 16px;
}
.followWrap .follow {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.followWrap .follow .follow_list{
    text-align: center;
    width: 33.3333333333%;
}
.followWrap .follow .follow_list .number {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    color: #1c1c1e;
}
.followWrap .follow .follow_list .number_text {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #8e8e93;
}
.followWrap .follow .follow_list {
    text-align: center;
    width: 33.3333333333%;
}
.lineBox {
    border: 1px solid #e5e5ea;
    background-color: #fff;
    border-radius: 8px;
    margin: 16px 0;
    padding: 0 16px;
}
.lineBox .myLineBox .link2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f7;
    padding: 8px 0;
}
.lineBox .myLineBox .lineBoxText {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #1c1c1e;
}
.lineBox .myLineBox .lineBoxNmWrap {
    display: flex;
    align-items: center;
}
.lineBox .myLineBox .lineBoxNmWrap .lineBoxNm {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: #8e8e93;
}
.btnStyle.h36 {
    height: 36px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
}
.profile .profileWrap .profile_img img {
    border-radius: 80px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile .profileWrap .profile_img .bd {
    border: 1px solid #c7c7cc;
}
.headerPopupStyle .headerBtn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: Pretendard,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: 0;
}
.headerPopupStyle .headerBtn.active {
    color: #007aff;
}
.editProfileWrap {
    max-width: 768px;
    width: 100%;
    margin: auto;
    padding: 16px;
}
.inputImageWrap {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.inputImageWrap .inputWrap {
    position: relative;
    display: inline-block;
}
.inputImageWrap .inputWrap .imgWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.inputImageWrap .inputWrap .img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 1px solid #c7c7cc;
    border-radius: 50%;
    margin-bottom: 8px;
}
.inputImageWrap .inputWrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inputImageWrap .inputWrap .btn {
    padding: 0 16px;
    border-radius: 56px;
    border: 1px solid #c7c7cc;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 32px;
    font-weight: 500;
    color: #2c2c2e;
    letter-spacing: 0;
}
.inputImageWrap .inputWrap .input {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    height: 57px;
    border: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.editList {
    margin-top: 12px;
}
.editList label {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #1c1c1e;
}
.editList .inputWrap {
    border-bottom: 1px solid #e5e5ea;
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.editList .inputWrap input {
    width: 100%;
    background-color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #1c1c1e;
    border: 1px solid #d5d5d5;
    padding: 5px 10px;
}
.settingWrap .setting {
    border-bottom: 8px solid #f2f2f7;
}
.settingWrap .setting .setting_title{
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: #1c1c1e;
    padding: 12px 16px;
}
.setting_list .link2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #1c1c1e;
}
.setting_list .setting_text {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #1c1c1e;
}
.logout {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 86px;
    display: flex;
    justify-content: center;
    padding: 16px;
}
.logout .logoutClick{
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #8e8e93;
    border-bottom: 1px solid #8e8e93;
}



.layoutSubStyle {
    padding-top: 100px;
}

.regionBtn {
    position: relative;
    height: auto;
    padding: 6px 34px 6px 16px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
    border: 1px solid #c7c7cc;
    border-radius: 22px;
}
.regionBtn .regionIcon {
    position: absolute;
    top: 6px;
    right: 12px;
}
.popupBtn {
    position: relative;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
    padding-right: 22px;
}
.popupBtn span {
    display: flex;
}
.popupBtn .popupArrowIcon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}


.layoutSubStyle .contents {
    max-width: 768px;
    margin: auto;
    padding-bottom: 136px;
}
.cardProfileTagWrap {
    margin: 16px 16px 0;
    padding-bottom: 20px;
    display: flex;
    border-bottom: 1px solid #f2f2f7;
}
.cardProfileTagWrap .link2 {
    display: flex;
    width: 100%;
}
.cardProfileTagWrap .cardProfileTagImgWrap {
    position: relative;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 1px solid #c7c7cc;
    background-color: #e5e5ea;
    border-radius: 5px;
    margin-right: 16px;
}
.cardProfileTagWrap .cardProfileTagImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cardProfileTagWrap .cardProfileTagContent {
    display: flex;
    flex-direction: column;
    width: calc(100% - 96px);
}
.cardProfileTagWrap .cardProfileTagContent .title {
    margin-bottom: 2px;
    font-family: Pretendard,sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.cardProfileTagWrap .cardProfileTagContent .subTitle {
    width: 100%;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cardProfileTagWrap .cardProfileTagContent .cardExplan {
    display: flex;
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #636366;
    letter-spacing: 0;
}
.cardProfileTagWrap .cardProfileTagContent .cardExplan .address {
    position: relative;
    margin-right: 10px;
}
.cardProfileTagWrap .cardProfileTagContent .cardTagWrap {
    display: flex;
}
.cardProfileTagWrap .cardProfileTagContent .cardTagWrap .tag {
    display: flex;
    flex-wrap: wrap;
    font-family: Pretendard,sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.cardProfileTagWrap .cardProfileTagContent .cardTagWrap .tag li {
    margin-right: 4px;
}


.programList {
    position: relative;
}



.cardStyleLikeVerticalWrap .cardStyleLikeVertical {
    padding: 0 8px 0 16px;
    display: flex;
    flex-wrap: wrap;
}

.cardStyleLikeVerticalWrap .cardStyleLike {
    width: 25%;
    padding-right: 8px;
    margin-bottom: 24px;
}
.cardStyleLikeVerticalWrap .cardContents {
    position: relative;
    width: 100%;
    height: 100%;
}
.cardStyleLikeVerticalWrap .cardContents .cardTitle {
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: "0";
}
.cardStyleLikeVerticalWrap .cardContents .cardDate {
    display: block;
    margin-bottom: 1px;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #48484a;
    letter-spacing: 0;
}

.cardStyleLikeVerticalWrap .cardContents .cardPrice {
    display: flex;
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
}

.cardStyleLikeVerticalWrap .cardContents .cardPrice .cardPriceNum {
    position: relative;
    font-family: Pretendard,sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: 0;
}
.cardStyleLikeVerticalWrap .cardContents .cardProfileWrap {
    display: flex;
    align-items: center;
}
.cardStyleLikeVerticalWrap .cardContents .cardProfileWrap .cardImg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #d9d9d9;
}
.cardStyleLikeVerticalWrap .cardContents .cardProfileWrap .cardProfile {
    font-family: Pretendard,sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}



.cardStyleEventVerticalWrap .cardStyleEventVertical {
    padding-left: 16px;
    display: flex;
    flex-wrap: wrap;
    padding-right: 7px;
}
.cardStyleEventVerticalWrap .cardStyleLike {
    width: 25%;
    padding-right: 9px;
    margin-bottom: 24px;
}
.cardStyleEventVerticalWrap .cardContents {
    position: relative;
    width: 100%;
    height: 100%;
}
.cardStyleEventVerticalWrap .cardContents .cardTitle {
    margin-bottom: 4px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: "0";
}
.cardStyleEventVerticalWrap .cardContents .cardProfileWrap {
    display: flex;
    align-items: center;
}
.cardStyleEventVerticalWrap .cardContents .cardProfileWrap .cardProfile{
    position: relative;
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #636366;
    letter-spacing: 0;
    margin-right: 10px;
}
.cardStyleEventVerticalWrap .cardContents .cardProfileWrap .cardDate {
    font-family: Pretendard,sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}
.myinfoBtn{
	padding: 8px 16px;
    margin-left: 10px;
    border-radius: 56px;
    border: 1px solid #c7c7cc;
    font-family: Pretendard,sans-serif;
    font-size: 14px;
    line-height: 32px;
    font-weight: 500;
    color: #2c2c2e;
    letter-spacing: 0;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nodata {
    padding-top: 120px;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 200px;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #8e8e93;
    letter-spacing: 0;
}

.navi{
    display: flex;
    justify-content: center;
    margin-top: 100px;
}
.navi .naviWrap{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 373px;
}

.navi .naviWrap .naviIcon{
    
}
.navi .naviWrap .naviNumWrap{
    display: flex;
    justify-content: center;
    justify-content: space-around;
    width: 160px;
}
.navi .naviWrap .naviNum{
    color: #8E8E93;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 26px;
}

.navi .naviWrap .on{
    color: #77519B;

text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 900;
line-height: 26px; /* 185.714% */
}

.select_renewal {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin-bottom: 8px;
    line-height: 48px;
    border: 1px solid #c7c7cc;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Pretendard,sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0;
}

@media (max-width: 768px){
.cardStyleLikeVerticalWrap .cardStyleLike {
    padding-right: 9px;
    width: 50%;
}
.cardStyleLikeVerticalWrap .imgStyleWrap {
    width: 100%;
    height: calc(47vw - 35px);
    overflow: hidden;
}
.cardStyleEventVerticalWrap .cardStyleLike {
    width: 50%;
}
.cardStyleEventVerticalWrap .imgStyleWrap {
    width: 100%;
    height: calc(34vw - 24px);
}
}