html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  color: initial;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button {
  border: 0;
  cursor: pointer;
}
input[text],
input[number] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  display: block;
}
a {
  display: block;
  text-decoration: none;
  color: initial;
  font-size: 100%;
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: #003792;
}
body {
  font-family: "Pretendard Std Variable", "Pretendard Std", "Pretendard",
    "Noto Sans KR", "Roboto", sans-serif,
    -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue",
    "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 130%;
  word-break: keep-all;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4 !important;
}
sup {
  position: relative;
  font-size: 0.5em !important;
  top: -0.8em !important;
}
::-moz-selection {
  color: #fff;
  background: #2196f3;
}
::selection {
  color: #fff;
  background: #2196f3;
}
.pills-small-primary {
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 100px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  background-color: #2196f3;
}
.pills-small-primary.disabled {
  opacity: 0.5;
}
.pills-small-secondary {
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 100px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  background-color: #495057;
}
.pills-small-secondary.disabled {
  opacity: 0.5;
}
.pills-small-white {
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 100px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #343a40;
  background-color: #fff;
}
.pills-small-white.disabled {
  opacity: 0.5;
}
.pills-small-outblack {
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 100px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #212529;
  background-color: initial;
  border: 1px solid #212529;
}
.pills-small-outblack.disabled {
  opacity: 0.5;
}
.pills-small-outblack:hover {
  background-color: #212529;
  color: #fff;
}
.pills-standard-primary {
  padding: 0 16px;
  font-size: 14px;
  height: 38px;
  border-radius: 38px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  background-color: #2196f3;
}
.pills-standard-primary.disabled {
  opacity: 0.5;
}
.pills-standard-outblack {
  padding: 0 16px;
  font-size: 14px;
  height: 38px;
  border-radius: 38px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #212529;
  background-color: initial;
  border: 1px solid #212529;
}
.pills-standard-outblack.disabled {
  opacity: 0.5;
}
.pills-standard-outwhite {
  padding: 0 16px;
  font-size: 14px;
  height: 38px;
  border-radius: 38px;
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  background-color: initial;
  border: 1px solid #fff;
}
.pills-standard-outwhite.disabled {
  opacity: 0.5;
}
main.container {
  width: 100%;
  padding-top: 72px;
  padding-bottom: 122px;
  padding-left: 20px;
  padding-right: 20px;
}
main.container .head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0 22px;
}
main.container .head .title {
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
}
main.container .head .title p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0;
}
main.container .head .title p:after{
  display: block;
  content: "";
  clear: both;
}
main.container .head .title p i {
  width: 16px;
  height: auto;
  margin-left: 10px;
  margin-top: 3px;
}
main.container .head .title .level::after {
  display: block;
  /* content: ""; */
  width: 1px;
  height: 18px;
  background-color: rgba(0, 55, 146, 0.2);
  margin: 0 8px;
}
main.container .head .title a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 700;
  color: #003792;
}
main.container .head .title a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #0947ad;
  bottom: 0px;
}
main.container .head .title h2 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
/*main.container .head .title {*/
/*  display: inline-block;*/
/*}*/
main.container .head .title span.label {
  font-weight: 500;
}
main.container .head .title span:not(:first-child)::before{
  display: block;
  content: "";
  width: 1px;
  height: 18px;
  background-color: rgba(0, 55, 146, 0.2);
  margin: 0 8px;
  font-weight: bold;
}
main.container .main_my_grade{
  position: relative;
}
main.container .main_my_grade div:first-child{
  float: left;
  width: 60.769px;
}
main.container .main_my_grade.extended div:first-child{

}
main.container .head .title div:not(:first-child){
  font-weight: bold;
}
main.container .head .title a span:not(:first-child)::after {
  display: block;
  content: "";
  width: 1px;
  height: 18px;
  background-color: rgba(0, 55, 146, 0.2);
  margin: 0 8px;
}
main.container .head .btn-text {
  color: #003792;
  margin-top: 8px;
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;*/
  text-align: left;
  width: 240px;
  font-size: 15px;
}

.head .main_user_name {
  color: #003792;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.44px;
}

.head .main_user_name .user_name_text {
  display: inline-block;
  text-transform: uppercase;
}

main.container .head .main_my_glass .main_myopt_click {
  display: block !important;
  color: #003792;
  margin-top: 8px;
  text-align: left;
  width: 255px;
  font-size: 14px;
}
main.container .head .main_my_glass .main_myopt_click:before{
  display: block;
  content: '';
  clear: both;
}
main.container .head .btn-text::after {
  display: none;
}

main.container .head .btn-text .postfix-right {
  display: flex;
  padding-left: 3px;
  text-align: left;
  width: 90%;
  overflow: hidden;
  /* position: relative; */
  text-overflow: ellipsis;
  margin-right: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

main.container .head .btn-text div {
  /*display: flex;
  align-items: center;
  max-width: 60%;
  position: relative;*/
  display: block;
  align-items: center;
  max-width: 58%;
  position: relative;
  width: auto;
  float: left;
}

main.container .head .btn-text .postfix-letter {
  /*display: flex;
  align-items: center;
  width: 1px;
  height: 18px;
  background-color: rgba(0, 55, 146, 0.2);
  margin: 0 8px;*/
  display: block;
  content: "";
  width: 1px;
  height: 18px;
  background-color: rgba(0, 55, 146, 0.2);
  margin: 0 8px;
  font-weight: bold;
}

main.container .head .btn-text .postfix-left {
  /*min-width: 30%;*/
  display: inline-block;
  float: left;
  width: 72px;
  font-weight: 500;
}
main.container .head .btn-text .postfix-left:after{
  display: block;
  position: absolute;
  left: 61px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 1px;
  height: 10px;
  background-color: rgba(0, 55, 146, 0.2);
  margin: 0 8px;
  font-weight: bold;
}
main.container .head .btn-text b::after {
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  position: absolute;
  right: 0px;
  top: 10%;
  transform: translate(0, -10%);
}

main.container-my {
  padding-top: 68px;
}
.section-head {
  font-size: 22px;
  margin: 12px 0;
  color: #003792;
  font-weight: 500;
  text-decoration: none;
}
.section-head.add-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
}
.section-head.add-btn::after {
  position: relative;
  width: 22px;
  height: 22px;
  content: "";
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  background-size: contain;
  opacity: 0.3;
}
.list-group-item {
  border: 0;
  background-color: #fff;
  padding: 0 20px;
}
.list-group-item:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.list-group-item:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.list-group-item:last-child a {
  border-bottom: 0;
}
.list-group-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: rgba(0, 55, 146, 0.5);
  line-height: initial;
}
main.container .list-group-item a {
  color: rgb(0 55 146 / 88%);
}
.list-group-item a::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  -webkit-filter: invert(84%) sepia(15%) saturate(413%) hue-rotate(180deg)
    brightness(91%) contrast(91%);
  filter: invert(84%) sepia(15%) saturate(413%) hue-rotate(180deg)
    brightness(91%) contrast(91%);
  background-size: contain;
}
main.container-point {
  padding-top: 84px;
  padding-bottom: 0;
}
.container-point .tabs-container {
  margin-top: 20px;
  background-color: #fff;
}
.container-point .sorting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  padding: 20px 20px 0;
}
.container-point .sorting .btn {
  width: 100%;
  border-radius: 100px;
}
.desc-list {
  font-size: 12px;
  color: rgba(0, 55, 146, 0.5);
  padding-left: 0px;
}
.desc-list li {
  position: relative;
  padding-left: 8px;
}
.desc-list li:not(:last-child) {
  padding-bottom: 4px;
}
.desc-list li::before {
  position: absolute;
  content: "";
  margin-right: 4px;
  width: 2px;
  height: 2px;
  left: 2px;
  top: 0.6em;
  background-color: rgba(0, 55, 146, 0.5);
}
.gray-box {
  padding: 16px;
  background-color: #f4f4f4;
}
/* .coupon-img.blue {
    -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg) brightness(97%) contrast(93%);
    filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg) brightness(97%) contrast(93%);
}
.coupon-img.green {
    -webkit-filter: invert(30%) sepia(51%) saturate(679%) hue-rotate(108deg) brightness(89%) contrast(100%);
    filter: invert(30%) sepia(51%) saturate(679%) hue-rotate(108deg) brightness(89%) contrast(100%);
}
.coupon-img.pink {
    -webkit-filter: invert(76%) sepia(56%) saturate(4604%) hue-rotate(290deg) brightness(108%) contrast(90%);
    filter: invert(76%) sepia(56%) saturate(4604%) hue-rotate(290deg) brightness(108%) contrast(90%);
} */
.coupon-img.gray {
  -webkit-filter: invert(73%) sepia(0%) saturate(1254%) hue-rotate(137deg)
    brightness(84%) contrast(92%);
  filter: invert(73%) sepia(0%) saturate(1254%) hue-rotate(137deg)
    brightness(84%) contrast(92%);
}
/* .coupon-img.color1 {
    -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg) brightness(97%) contrast(93%);
    filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg) brightness(97%) contrast(93%);
}
.coupon-img.color2 {
    -webkit-filter: invert(30%) sepia(51%) saturate(679%) hue-rotate(108deg) brightness(89%) contrast(100%);
    filter: invert(30%) sepia(51%) saturate(679%) hue-rotate(108deg) brightness(89%) contrast(100%);
}
.coupon-img.color3 {
    -webkit-filter: invert(76%) sepia(56%) saturate(4604%) hue-rotate(290deg) brightness(108%) contrast(90%);
    filter: invert(76%) sepia(56%) saturate(4604%) hue-rotate(290deg) brightness(108%) contrast(90%);
}
.coupon-img.color299 {
    -webkit-filter: invert(73%) sepia(0%) saturate(1254%) hue-rotate(137deg) brightness(84%) contrast(92%);
    filter: invert(73%) sepia(0%) saturate(1254%) hue-rotate(137deg) brightness(84%) contrast(92%);
} */
.coupon-img.color1 {
  /* background: #00A3E0; */
  filter: invert(39%) sepia(82%) saturate(1138%) hue-rotate(165deg)
    brightness(101%) contrast(101%);
}
.coupon-img.color2 {
  /* background: #00A9B6; */
  filter: invert(44%) sepia(99%) saturate(1271%) hue-rotate(149deg)
    brightness(92%) contrast(102%);
}
.coupon-img.color3 {
  /* background: #9D2B8D; */
  filter: invert(21%) sepia(53%) saturate(3259%) hue-rotate(288deg)
    brightness(88%) contrast(88%);
}
.coupon-img.color299 {
  /* background: #00A3E0; */
  filter: invert(44%) sepia(66%) saturate(2699%) hue-rotate(167deg)
    brightness(100%) contrast(101%);
}
.coupon-img.color7461 {
  /* background: #007DBA; */
  filter: invert(30%) sepia(73%) saturate(1906%) hue-rotate(176deg)
    brightness(92%) contrast(103%);
}
.coupon-img.color287 {
  /* background: #003087; */
  filter: invert(14%) sepia(57%) saturate(4312%) hue-rotate(214deg)
    brightness(84%) contrast(104%);
}
.coupon-img.color284 {
  /* background: #6CACE4; */
  filter: invert(62%) sepia(49%) saturate(455%) hue-rotate(168deg)
    brightness(97%) contrast(83%);
}
.coupon-img.color325 {
  /* background: #64CCC9; */
  filter: invert(83%) sepia(11%) saturate(1555%) hue-rotate(127deg)
    brightness(87%) contrast(93%);
}
.coupon-img.color3285 {
  /* background: #009681; */
  filter: invert(39%) sepia(81%) saturate(958%) hue-rotate(136deg)
    brightness(88%) contrast(103%);
}
.coupon-img.color320 {
  /* background: #009CA6; */
  filter: invert(37%) sepia(64%) saturate(2224%) hue-rotate(157deg)
    brightness(95%) contrast(101%);
}
.coupon-img.color2685 {
  /* background: #330072; */
  filter: invert(19%) sepia(40%) saturate(3022%) hue-rotate(249deg)
    brightness(79%) contrast(138%);
}
.coupon-img.color143 {
  /* background: #F1B434; */
  filter: invert(90%) sepia(26%) saturate(2535%) hue-rotate(330deg)
    brightness(97%) contrast(95%);
}
.coupon-img.color5000 {
  /* background: #FF8DB9; */
  filter: invert(76%) sepia(11%) saturate(3110%) hue-rotate(293deg)
    brightness(102%) contrast(101%);
}
.coupon-img.color5001 {
  /* background: #D23204; */
  filter: invert(22%) sepia(78%) saturate(6280%) hue-rotate(20deg)
    brightness(98%) contrast(97%);
}
.container-point .point-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 16px;
  background-color: #0947ad;
  color: #fff;
  border-radius: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.container-point .point-status .my-point {
  position: relative;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  font-size: 14px;
  padding: 15px 16px;
}
.container-point .point-status .my-point .point {
  display: block;
  color: #fff;
  font-size: 22px;
}
.container-point .point-status .my-point .btn_info_q {
  position: absolute;
  right: -6px;
  top: 18px;
  width: 15px;
  height: auto;
}
.container-point .point-status .my-point .point .date {
  display: inline-block;
  margin-top: 5px;
}
.container-point .point-status .divider {
  width: 1px;
  background-color: rgba(255, 255, 255, 0.05);
}
.container-point .point-status .point-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 16px;
}
.container-point .point-status .point-info p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
  font-weight: 700;
  line-height: 1.2em;
  margin-bottom: 0;
}
.container-point .point-status .point-info p:not(:last-child) {
  margin-bottom: 8px;
}
.tabs-container {
  margin-left: -20px;
  margin-right: -20px;
}
.slide-nav {
  margin: auto;
  position: relative;
  padding: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  background-color: #fff;
}
.slide-nav > .nav {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 0;
}
.slide-nav > .nav > .nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px 10px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  color: rgba(0, 55, 146, 0.5);
  background-color: #fff;
}
.slide-nav > .nav > .nav-link.active {
  color: #003792;
}
.slide-nav .underline {
  position: absolute;
  left: 0;
  -webkit-transition: top 0.2s ease-out, left 0.2s ease-out, right 0.2s ease-out,
    bottom 0.2s ease-out, width 0.2s ease-in;
  transition: top 0.2s ease-out, left 0.2s ease-out, right 0.2s ease-out,
    bottom 0.2s ease-out, width 0.2s ease-in;
  height: 2px;
  bottom: -2px;
  background-color: #003792;
}
.histoy-list {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}
.histoy-list .list {
  padding-left: 20px;
  padding-right: 20px;
}
.histoy-list .list .no-list {
  height: 70vh;
  padding: 20px 0;
  text-align: center;
}
.histoy-list .list:last-child a {
  border-bottom: 0;
}
.histoy-list .list a {
  width: 100%;
  text-decoration: none;
  padding: 32px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.histoy-list .list .title {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  line-height: 1.3em;
  max-height: 2.6em;
  margin-bottom: 4px;
  color: #333;
  padding-right: 32px;
}
.histoy-list .list .desc {
  color: #999;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.histoy-list .list .desc span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.2em;
}
.histoy-list .list .desc span:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 10px;
  margin: 0 8px;
  background-color: #d6d6d6;
  position: relative;
}
.histoy-list .list .desc .store {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: nowrap;
  line-height: 1.2em;
  height: 1.2em;
}
.histoy-list .list .point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.histoy-list .list .point .wrap {
  min-height: auto;
}
.histoy-list .list .point .tag {
  display: inline-block;
  border: 1px solid rgba(0, 55, 146, 0.5);
  border-radius: 100px;
  color: rgba(0, 55, 146, 0.5);
  font-size: 10px;
  padding: 4px 8px;
  margin-bottom: 2px;
  font-weight: 500;
}
.histoy-list .list .point .pt {
  margin-bottom: 0;
  line-height: 1.3em;
  font-size: 16px;
  font-weight: 700;
}
.histoy-list .list .point::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  -webkit-filter: invert(84%) sepia(15%) saturate(413%) hue-rotate(180deg)
    brightness(91%) contrast(91%);
  filter: invert(84%) sepia(15%) saturate(413%) hue-rotate(180deg)
    brightness(91%) contrast(91%);
  background-size: contain;
}

.histoy-list .list a.offBtn .point::after {
  opacity: 0;
}

.modal-point .modal-content {
  border-radius: 12px;
  border: 0;
}
.modal-point .modal-header {
  padding: 32px;
  border-bottom: 0;
}
.modal-point .modal-title {
  font-weight: 700;
}
.modal-point .modal-body {
  padding: 0 32px 32px;
}
.modal-point .modal-body .pdt-list {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 16px 20px;
  border-radius: 4px;
}
.modal-point .modal-body .pdt-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: #666;
}
.modal-point .modal-body .bills li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: #666;
}
.modal-point .modal-body .bills li .data {
  font-weight: 700;
  color: #333;
}
.modal-point .modal-body .bills li .data.primary {
  color: #003792;
}
.modal-point .modal-body p {
  margin: 10px 0;
  color: #999;
}
.modal-point .modal-body p.small {
  font-size: 12px;
}
.modal-point .modal-body p:last-child {
  margin-bottom: 0;
}
.modal-point .modal-footer {
  padding: 0 32px 32px;
  border: 0;
}
.modal-point .modal-footer .btn {
  margin: 0;
}

.modal-alert .modal-content {
  border-radius: 12px;
  border: 0;
}

.modal-alert .modal-header {
  padding: 32px;
  border-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.modal-alert .modal-header .tag {
  font-size: 12px;
  color: #003792;
  background-color: #f3f4f8;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.modal-alert .modal-title {
  font-weight: 700;
  font-size: 22px;
  color: #333;
  display: block;
  width: 100%;
}

.modal-alert .modal-body {
  padding: 0 32px 32px;
}

.modal-alert .modal-body .noti-msg {
  color: #ff4343;
  font-size: 12px;
  margin-top: 16px;
  display: block;
}

.modal-alert .modal-body p {
  color: #999;
}

.modal-alert .modal-body p.small {
  font-size: 12px;
}

.modal-alert .modal-body p:last-child {
  margin-bottom: 0;
}

.modal-alert .modal-footer {
  padding: 0 32px 32px;
  border: 0;
}

.modal-alert .modal-footer .btn {
  margin: 0;
}

.modal-alert .modal-footer .btn-primary {
  background-color: #003792;
  border-color: #003792;
  color: #fff;
}

.modal-agree .modal-content {
  border-radius: 12px;
  border: 0;
}

.modal-agree .modal-header {
  padding: 32px;
  border-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.modal-agree .modal-header .tag {
  font-size: 12px;
  color: #003792;
  background-color: #f3f4f8;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.modal-agree .modal-title {
  font-weight: 700;
  font-size: 22px;
  color: #333;
}

.modal-agree .modal-body {
  padding: 0 32px 32px;
}

.modal-agree .modal-body .noti-msg {
  color: #ff4343;
  font-size: 12px;
  margin-top: 16px;
  display: block;
}

.modal-agree .modal-body p {
  color: #999;
}

.modal-agree .modal-body p.small {
  font-size: 12px;
}

.modal-agree .modal-body p:last-child {
  margin-bottom: 0;
}

.modal-agree .modal-footer {
  padding: 0 32px 32px;
  border: 0;
}

.modal-agree .modal-footer .btn {
  margin: 0;
}

.modal-agree .modal-footer .btn-primary {
  background-color: #003792;
  border-color: #003792;
  color: #fff;
}

.all-agree-box {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.all-agree-box .agree-check-wrap {
  padding: 16px;
}

.all-agree-box .agree-check-wrap a {
  display: block;
  color: #999;
  margin-left: auto;
  width: 20px;
  height: 20px;
  font-size: 12px;
  padding-top: 4px;
}

.all-agree-box .agree-check-wrap .form-check + .form-check {
  margin-top: 10px;
}

.all-agree-box .form-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #999;
  padding-left: 0;
}

.all-agree-box .form-check:not(.form-check-inline) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.all-agree-box .form-check .form-check-label {
  width: 100%;
  line-height: 24px;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.2;
}

.all-agree-box .form-check .form-check-label::before {
  content: "";
  width: 20px;
  height: 20px;
  font-size: 14px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Font Awesome 6 Pro";
}

.all-agree-box .form-check-all {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  color: #333;
  padding: 16px;
}

.all-agree-box .form-check-all .form-check-label {
  font-size: 14px;
}

.all-agree-box .form-check-all .form-check-label::before {
  content: "" !important;
  font-family: "Font Awesome 6 Pro";
  font-size: 20px;
  font-weight: lighter;
  color: #999;
}

.all-agree-box .form-check input[type="checkbox"]:checked ~ label::before,
.all-agree-box .form-check input[type="radio"]:checked ~ label::before {
  width: 20px;
  height: 20px;
  font-weight: bold;
  color: #003792;
}

.all-agree-box .form-check input {
  display: none;
}

.date-range .input-group {
  padding: 16px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}
.date-range .input-group input {
  font-size: 16px;
  text-align: center;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #0947ad;
}
#sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  visibility: visible;
  -webkit-transition: opacity 0.5s, visibility 0.5s;
  transition: opacity 0.5s, visibility 0.5s;
}
#sheet[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#sheet .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.5;
}
#sheet .contents {
  border-radius: 16px 16px 0 0;
  background-color: #0947ad;
  position: absolute;
  bottom: 0;
  overflow-y: hidden;
  --default-transitions: transform 0.5s, border-radius 0.5s;
  -webkit-transition: var(--default-transitions);
  transition: var(--default-transitions);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  max-height: 100vh;
  height: 30vh;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* padding: 20px; */
  padding-top: 3rem;
  width: 100%;
}
#sheet .contents:not(.not-selectable) {
  -webkit-transition: var(--default-transitions), height 0.5s;
  transition: var(--default-transitions), height 0.5s;
}
#sheet .contents.fullscreen {
  border-radius: 0;
  width: 100%;
}
#sheet .body {
  height: 100%;
  /* display: -webkit-box; */
  display: -ms-flexbox;
  /* display: flex; */
  /* -webkit-box-align: center; */
  -ms-flex-align: center;
  /* align-items: center; */
  /* -webkit-box-pack: center; */
  -ms-flex-pack: center;
  /* justify-content: center; */
  color: #fff;
  overflow-y: scroll;
  /* padding-top: 287px; */
}
#sheet .body .b-code {
  /* gap: 14px; */
  /* display: -webkit-box;
    display: -ms-flexbox; */
  /* display: flex; */
  /* -webkit-box-align: center;
    -ms-flex-align: center; */
  /* align-items: center; */
  /* -webkit-box-orient: vertical; */
  /* -webkit-box-direction: normal;
    -ms-flex-direction: column; */
  /* flex-direction: column; */
  width: 100%;
}
#sheet .body .bar-code-area {
  background: #fff;
  border-radius: 10px;
  padding: 40px 0 15px;
  position: relative;
  width: 92%;
  margin: 0 20px;
}
#sheet .body .bar-code-area .barcode-box {
  text-align: center;
  color: #000;
}
#sheet .body .bar-code-area .barcode-box p {
  text-align: center;
  color: #000;
  margin-bottom: 10px;
  font-weight: 600;
}
#sheet .body .bar-code-area .barcode-timer {
  display: inline-block;
  color: #000;
  position: absolute;
  right: 10px;
  top: 9px;
}
#sheet .body .bar-code-area .barcode-timer a {
  width: 20px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
#sheet .body .desc {
  color: #9fc4ff;
  text-align: left;
  font-weight: 500;
  line-height: 1.5em;
  font-size: 14px;
}
#sheet .body .title {
  /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; */
}
#sheet .body .title h2 {
  font-size: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-weight: 500;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#sheet .body .title h2 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#sheet .body .title h2 span:not(:first-child)::before {
  display: block;
  content: "";
  width: 1px;
  height: 18px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 8px;
}
#sheet .body .title h2 span.data {
  font-weight: 700;
}
#sheet .body .title .moptician_set_click {
  color: #fff;
  text-align: center;
  padding: 20px 10px 40px;
}
#sheet .body .title .moptician_set_click b {
  position: relative;
  display: inline-block;
  padding-right: 16px;
}
#sheet .body .title .moptician_set_click b:after {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  width: 16px;
  height: 16px;
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
}
#sheet .body .title .btn-text {
  color: #fff;
  margin-top: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: inherit;
}
#sheet .body .title .btn-text::after {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
}
#sheet .body .title .btn-text span {
  width: 145px;
}
#sheet .body .title .btn-text b {
  width: 70%;
  text-align: left;
}
#sheet .body .bar-code-area img {
  width: 100%;
  height: auto;
  margin-bottom: 3px;
}
#sheet[aria-hidden="true"] .contents {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
#sheet .draggable-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 3rem;
  margin: auto;
  padding: 1rem 0;
  cursor: -webkit-grab;
  cursor: grab;
}
#sheet .draggable-thumb {
  width: inherit;
  height: 0.25rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0.125rem;
}
#sheet .close-sheet {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  opacity: 0.5;
  width: 40px;
  height: 40px;
  font-size: 35px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#sheet .info_bar_text {
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  font-weight: 500;
  padding: 20px;
}
#sheet .info_bar_text strong {
  font-weight: 900;
}
#sheet .bar_coupon_box {
  padding: 0 20px;
}
#sheet .bar_coupon_box > p {
  color: #fff;
  font-size: 14px;
  position: relative;
  padding-bottom: 10px;
}
#sheet .none_coupon {
  width: 100%;
  height: 110px;
  text-align: center;
  line-height: 110px;
  color: #fff;
  border: 1px dashed #fff;
  border-radius: 10px;
  opacity: 0.5;
}
#sheet .none_coupon p {
  color: #fff;
  font-size: 14px;
}
#sheet .bar_coupon_box p a {
  color: #fff;
  position: absolute;
  right: 5px;
  top: 0;
  text-decoration: underline;
  opacity: 0.5;
}
#sheet .bar_coupon_box p a img {
  width: 7px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
#sheet .barCouponSwiper .swiper-slide {
  background: none;
}
#sheet .barCouponSwiper .swiper-slide p {
  position: absolute;
  left: 25px;
  top: 25px;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  z-index: 200;
  text-align: left;
}
#sheet .barCouponSwiper .swiper-slide span {
  position: absolute;
  left: 25px;
  top: 80px;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  z-index: 200;
  text-align: left;
  font-weight: 500;
}
#sheet .bar_noti_box {
  position: relative;
  margin-top: 30px;
}
#sheet .bar_noti_box p {
  background: #fff;
  color: #1e1e1e;
  height: 44px;
  line-height: 44px;
  padding: 0 20px;
  position: relative;
}
#sheet .bar_noti_box p:after {
  display: block;
  content: "";
  position: absolute;
  right: 20px;
  top: 15px;
  background: url(/img/myacuvue/common_v2/ic_down.png) no-repeat left top;
  width: 16px;
  height: 9px;
  background-size: 16px auto;
  transform: rotate(180deg);
}
#sheet .bar_noti_box span {
  position: absolute;
  right: 10px;
  bottom: 0;
  z-index: 100;
  color: #999;
  font-size: 10px;
}
#sheet .bar_noti_box.on p:after {
  transform: rotate(0deg);
}
#sheet .bar_noti_box.on ul {
  display: none;
}
#sheet .bar_noti_box ul {
  background: #f4f4f4;
  color: #999;
  padding: 20px;
  font-size: 12px;
}
#acuvueAccordion .accordion-item {
  margin-top: -2px;
}
#acuvueAccordion .accordion-button {
  outline: 0;
  border: 0;
  border-radius: 0;
}
#acuvueAccordion .accordion-button:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#acuvueAccordion .accordion-collapse {
  font-size: 12px;
}
#acuvueAccordion .accordion-collapse ul {
  padding-left: 12px;
}
#membership #acuvueAccordion .accordion-collapse ul {
  margin-bottom: 1rem;
}
#acuvueAccordion .accordion-collapse ul li {
  list-style: circle;
}
#acuvueAccordion .accordion-collapse ul li:not(:last-child) {
  margin-bottom: 5px;
}
#membership #acuvueAccordion .accordion-collapse h6 {
  margin-bottom: 0.5rem;
}
#acuvueAccordion .accordion-collapse ul li a {
  display: inline-block;
}
#acuvueAccordion .table:last-child th,
#acuvueAccordion .table:last-child td {
  text-align: center;
  font-weight: 500;
}
#acuvueAccordion .table th {
  text-align: center;
  color: #666;
  font-weight: 700;
}
#acuvueAccordion .table td:first-child {
  text-align: center;
  font-weight: 700;
  color: #666;
}
#acuvueAccordion .table th,
#acuvueAccordion .table td {
  border: 1px solid #dee2e6;
  font-size: 12px;
  vertical-align: middle;
}
#acuvueAccordion .table-02 td {
  color: #666;
}
#acuvueAccordion .table-02 td:first-child {
  font-weight: 500;
}
#acuvueAccordion .table-02 td:last-child {
  font-weight: 500;
}
.class-lv img {
  width: 100px;
  height: 100px;
}
.class-badge {
  position: relative;
  min-width: 90px;
  min-height: 90px;
  border-radius: 49px;
  overflow: hidden;
  isolation: isolate;
}
.btn,
button.btn,
label.btn {
  outline: none;
  font-weight: 500;
  padding: 16px 20px;
  line-height: 1.2em;
  border-radius: 4px;
  color: inherit;
}
.btn:focus,
button.btn:focus,
label.btn:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.btn-outline,
button.btn-outline,
label.btn-outline {
  color: #333;
  border: 1px solid #333;
}
.btn-outline-alpha,
button.btn-outline-alpha,
label.btn-outline-alpha {
  color: rgba(0, 55, 146, 0.5);
  border: 1px solid rgba(0, 55, 146, 0.2);
}
.btn-outline-alpha:hover,
.btn-outline-alpha:focus,
button.btn-outline-alpha:hover,
button.btn-outline-alpha:focus,
label.btn-outline-alpha:hover,
label.btn-outline-alpha:focus {
  color: #003792;
  border-color: #003792;
}
.btn-text,
button.btn-text,
label.btn-text {
  position: relative;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
}
.btn-text::after,
button.btn-text::after,
label.btn-text::after {
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
}
.btn-floating,
button.btn-floating,
label.btn-floating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 20px;
  font-weight: 700;
}
.sorting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  padding: 20px 20px 0;
}
.sorting label {
  width: 100%;
  color: rgba(51, 51, 51, 0.5);
  border: 1px solid rgba(51, 51, 51, 0.5);
  text-align: center;
  border-radius: 100px;
  padding: 8px 12px;
  line-height: 1.3em;
  font-weight: 500;
}
.sorting .btn-check:checked + label {
  color: #333;
  border: 1px solid #333;
  font-weight: 700;
}
/* .container-main .head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 130px;
}
.container-main .head h2 {
    font-size: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.container-main .head h2 span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 700;
}
.container-main .head h2 span:not(:first-child)::before {
    display: block;
    content: "";
    width: 1px;
    height: 18px;
    background-color: rgba(0, 55, 146, .2);
    margin: 0 8px;
} */
.container-main .head .btn-text {
  color: #003792;
  margin-top: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
.my-card {
  background-color: #0947ad;
  color: #fff;
  margin-bottom: 44px;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0;
}
.my-card .btn {
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.3em;
  border-radius: 0;
  outline: none;
  border: 0;
  padding: 25px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.smartOrderBtn {
  display: none;
}
.my-card .btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.my-card .btn:hover {
  background-color: #083d95;
}
.my-card .btn .label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 14px;
  line-height: 1.3em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
  margin-right: -4px;
}
.my-card .btn .label::after {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  opacity: 0.5;
}
.my-card .btn .data {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3em;
}
.my-card .btn span {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3em;
}
.main-cards + .main-cards {
  margin-top: 40px;
}
.main-cards.bg-green .card {
  background-color: #009287;
}
.main-cards.bg-sky .card {
  background-color: #0d90d0;
}
.main-cards.bg-blue {
  background-color: inherit;
  color: inherit;
}
.main-cards.bg-blue .card {
  background-color: #0947ad;
}
.main-cards.event {
  margin-left: -20px;
  margin-right: -20px;
}
.main-cards.event > p {
  margin-top: 50px;
  padding: 0 20px;
  color: #999;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  word-break: keep-all;
}
.main-cards.event > p > .no-date-view {
  display: inline-block;
  white-space: normal;
}
.main-cards.event .section-head {
  padding-left: 20px;
  padding-right: 20px;
}
.main-cards .card {
  border: 0;
  color: #fff;
  border-radius: 12px;
}
.main-cards .card-body {
  position: relative;
  padding: 28px 28px 64px;
  z-index: 1;
}
.main-cards .card-footer {
  position: relative;
  border-top: 0;
  background-color: rgba(0, 0, 0, 0);
  color: inherit;
  padding: 0 28px 32px 28px;
  z-index: 1;
}
.main-cards .card-footer .btn {
  color: inherit;
  font-size: 14px;
}
.main-cards .card-footer .btn::after {
  -webkit-filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(355deg)
    brightness(103%) contrast(102%);
  filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(355deg)
    brightness(103%) contrast(102%);
}
.main-cards .card .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.main-cards .card .bg img {
  position: absolute;
  width: auto;
  bottom: -10px;
}
.main-cards .card .bg.img-jewel img {
  width: 128px;
  height: 128px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.main-cards .card .tag {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  line-height: 1.1em;
  padding: 6px 8px;
  border: 1px solid #fff;
  border-radius: 100px;
}
.main-cards .card h3 {
  color: #fff;
  margin: 8px auto;
  font-size: 22px;
  line-height: 1.2em;
}
.main-cards .card .desc {
  opacity: 0.5;
  font-size: 14px;
}
.eventSwiper, .productInfoSwiper {
  overflow: hidden;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.eventSwiper .swiper-slide, .productInfoSwiper .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
}

.eventSwiper .swiper-pagination, .productInfoSwiper .swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 12px;
}
.eventSwiper .swiper-pagination-bullet, .productInfoSwiper .swiper-pagination-bullet {
  border: 1px solid rgba(0, 55, 146, 0.5);
  background-color: rgba(0, 0, 0, 0);
}
.eventSwiper .swiper-pagination-bullet-active, .productInfoSwiper .swiper-pagination-bullet-active {
  background-color: #0947ad;
}

.frequncy-card {
  border-radius: 8px;
  overflow: hidden;
}

.frequncy-box {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.frequncy-count {
  position: absolute;
  right: 11%;
  top: 71%;
  width: 20%;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.frequncy-count h5 {
  width: 100%;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
  color: #ffd43b;
  line-height: 1;
}
.frequncy-count .count {
  width: 100%;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.frequncy-count .count span {
  color: #ffd43b;
}

.frequncy-list {
  position: absolute;
  left: 11.3%;
  top: 69.3%;
  width: 52.5%;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4.5%;
}
.frequncy-list .frequncy-item {
  padding-bottom: 100%;
  background: url(/img/myacuvue/eventPromotion/summerDive/frequency-item.png)
    no-repeat;
  background-size: 0%;
}
.frequncy-list .frequncy-item.active {
  background-size: 100%;
}

.frequncy-login .login-status {
  display: none;
}
.frequncy-login.active .login-status {
  display: block;
}
.frequncy-login.active .non-login-status {
  display: none;
}

.container-my .head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.container-my .head h2 {
  font-size: 22px;
}
.container-my .head h2 span {
  font-weight: 700;
}
.container-my .head .badge {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 100px;
  background-color: #0947ad;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1.3em;
  overflow: hidden;
  isolation: isolate;
}
.container-my .head .badge .txt {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.container-my .head .badge .discount {
  font-size: 28px;
  font-weight: 800;
  line-height: 1em;
  margin-bottom: 2px;
}
.container-my .head .badge::before {
  position: absolute;
  content: "";
  width: 85%;
  height: 85%;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 10;
}
.container-my .head .badge .gradient {
  position: absolute;
  z-index: 0;
  --size: 90px;
  --speed: 5s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  width: var(--size);
  height: var(--size);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(hsla(191, 83%, 63%, 0.9)),
    to(hsl(252, 82%, 57%))
  );
  background-image: linear-gradient(
    hsla(191, 83%, 63%, 0.9),
    hsl(252, 82%, 57%)
  );
  -webkit-animation: rotate var(--speed) var(--easing) infinite;
  animation: rotate var(--speed) var(--easing) infinite;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  border-radius: 100px;
  opacity: 0.45;
}
.container-my .head .btn-text {
  color: #003792;
  margin-top: 12px;
}
.container-my .members-kv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.container-my .members-level {
  background-color: #0947ad;
  color: #fff;
  padding: 28px 20px;
  border-radius: 12px;
  margin-top: 15px;
}
.container-my .members-level .level-step {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 46px;
}
.container-my .members-level .level-step::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  top: 50%;
  z-index: 0;
  margin-top: -0.5px;
}
.container-my .members-level .level-step li {
  position: relative;
}
.container-my .members-level .level-step li span {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: -28px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.container-my .members-level .level-step .lv-icon {
  position: relative;
  width: 49px;
  height: 49px;
  background-repeat: no-repeat;
  z-index: 1;
}
.container-my .members-level .level-step .lv1 {
  width: 43px;
  height: 43px;
  background-image: url(/img/myacuvue/common_v2/lv1.svg);
}
.container-my .members-level .level-step .lv1.active {
  background-image: url(/img/myacuvue/common_v2/lv1-active.svg);
}
.container-my .members-level .level-step .lv2 {
  background-image: url(/img/myacuvue/common_v2/lv2.svg);
}
.container-my .members-level .level-step .lv2.active {
  background-image: url(/img/myacuvue/common_v2/lv2-active.svg);
}
.container-my .members-level .level-step .lv3 {
  background-image: url(/img/myacuvue/common_v2/lv3.svg);
}
.container-my .members-level .level-step .lv3.active {
  background-image: url(/img/myacuvue/common_v2/lv3-active.svg);
}
.container-my .members-level .level-step .lv4 {
  background-image: url(/img/myacuvue/common_v2/lv4.svg);
}
.container-my .members-level .level-step .lv4.active {
  background-image: url(/img/myacuvue/common_v2/lv4-active.svg);
}
.container-my .members-level .level-step .cover {
  position: relative;
  z-index: 10;
}
.container-my .members-level .level-step .cover img {
  display: block;
  position: relative;
  z-index: 10;
  width: 100%;
}
.container-my .members-level .level-step .color-bar {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 0%;
  height: 100%;
  top: 0;
  padding: 0;
  margin: 0;
  z-index: 0;
  background-color: #00a3e0;
}
.container-my .members-level > span {
  display: block;
  text-align: center;
  opacity: 0.5;
  font-size: 14px;
  line-height: 1.5em;
}
.container-my .members-update {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: rgba(255, 255, 255, 0.5);
  background-color: #0d90d0;
  margin-top: 12px;
  border-radius: 12px;
  padding: 24px 28px;
  font-size: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.container-my .members-update > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  line-height: 1em;
  gap: 12px;
}
.container-my .members-update > div span {
}
.container-my .members-update .divider {
  width: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}
.container-my .members-update .use-date {
  font-size: 14px;
}
.container-my .members-update .level {
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  line-height: 1em;
}
.container-my .link-list {
  margin-top: 12px;
}
.container-my .link-list li + li {
  margin-top: 12px;
}
.container-my .link-list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px 20px;
  background-color: #fff;
  border-radius: 12px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 28px;
}
.container-my .link-list a .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  color: #003792;
  line-height: 28px;
}
.container-my .link-list a .title img {
  width: auto;
}
.container-my .link-list a .title span {
  color: #009fff;
  font-weight: 700;
}
.container-my .link-list a::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  background-size: contain;
  opacity: 0.3;
}
.container-coupon {
  padding-bottom: 48px;
}
.container-coupon .section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 33px;
}
.container-coupon .section-head span {
  padding: 0;
  color: #003792;
  font-size: 14px;
  font-weight: 500;
}
.container-coupon .coupon-wrap {
  max-width: 282px;
  margin: 0 auto;
  padding: 0;
  margin-top: 32px;
}
.container-coupon .coupon-body {
  position: relative;
}
.container-coupon .coupon-list + .coupon-list {
  margin-top: 28px;
}
.container-coupon .coupon-list-info {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  z-index: 10;
  padding: 28px 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.container-coupon .coupon-list-info h3 {
  color: #fff;
}
.container-coupon .coupon-list-info .use-date {
  display: inline-block !important;
  margin-top: auto;
  font-size: 12px;
  opacity: 0.5;
  color: #fff;
}
.container-coupon .coupon-list-info .use-date a {
  display: inline-block !important;
}
.container-coupon .coupon-list .coupon-img {
  z-index: -1;
}
.container-coupon .coupon-list .btn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: #003792;
  padding: 16px 20px;
  background-color: #fff;
  border-radius: 0;
}
.container-coupon .coupon-list .btn:hover {
  color: #003792;
}
.container-coupon .coupon-list .btn.collapsed::after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.container-coupon .coupon-list .btn::after {
  width: 16px;
  height: 16px;
  content: "";
  background-image: url(/img/myacuvue/common_v2/icon-angle-up.svg);
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
}
.collapse:not(.show) {
  display: none;
}
.container-coupon .coupon-desc {
  padding: 0px 20px 16px;
  background-color: #fff;
}
.container-coupon .coupon-desc .barcode {
  position: relative;
  padding: 10px 10px 30px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  text-align: center;
}
.container-coupon .coupon-desc .barcode .barcode-timer {
  position: absolute;
  right: 10px;
  bottom: 5px;
}
.container-coupon .coupon-desc .barcode .coupon-barcode-refresh {
  display: inline-block;
  width: 20px;
  height: auto;
  vertical-align: middle;
}
.container-coupon .coupon-desc .barcode img {
  width: 100%;
}
.container-coupon .coupon-desc .desc-list {
  margin: 20px 0;
}
.container-coupon .coupon-desc .gray-box {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}
.container-coupon .no-coupon {
  height: 67vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container-coupon .no-coupon p {
  color: #333;
  font-size: 18px;
}
.container-coupon .no-coupon span {
  display: block;
  font-size: 14px;
  padding: 10px 0;
}
.container-coupon .no-coupon a {
  display: inline-block;
  background: #003792;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
}
.purchase-list {
  padding: 0 20px 0;
  margin-top: 20px;
}
.purchase-list .card {
  padding: 20px;
  border: 0;
  border-radius: 12px;
}
.purchase-list .card + .card {
  margin-top: 12px;
}
.purchase-list .card-header {
  color: #003792;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 20px;
  border-bottom: 0;
  background-color: #fff;
}
.purchase-list .card-body {
  padding: 0 0 20px;
}
.purchase-list .card-body ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 16px;
  color: #666;
}
.purchase-list .card-body ul li .primary {
  color: #003792;
}
.purchase-list .card-body ul li:not(:last-child) {
  margin-bottom: 8px;
}
.purchase-list .card-footer {
  padding: 20px 0 0;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.purchase-list .card-footer ul {
  padding: 0;
  font-size: 14px;
  color: #999;
}
.purchase-list .card-footer ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.gradient {
  --size: 98px;
  --speed: 5s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  width: var(--size);
  height: var(--size);
  -webkit-filter: blur(calc(var(--size) / 6));
  filter: blur(calc(var(--size) / 6));
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(hsla(191, 83%, 63%, 0.9)),
    to(hsl(252, 82%, 57%))
  );
  background-image: linear-gradient(
    hsla(191, 83%, 63%, 0.9),
    hsl(252, 82%, 57%)
  );
  -webkit-animation: rotate var(--speed) var(--easing) infinite;
  animation: rotate var(--speed) var(--easing) infinite;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.container-menu {
  display: grid;
  row-gap: 44px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-bottom: 48px;
}
.container-menu h3 {
  font-size: 16px;
  font-weight: 700;
}
.container-menu .form-switch {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: rgba(0, 55, 146, 0.5);
  font-size: 16px;
  padding: 20px 0;
  position: relative;
}
.container-menu .form-switch .btn_pop_q {
  display: inline-block;
  position: absolute;
  left: 180px;
  width: 20px;
  height: 20px;
}
.container-menu .form-switch .btn_pop_q2 {
  left: 125px;
}
.container-menu .form-switch .form-check-input {
  margin: 0;
  float: none;
  width: 40px;
}
.container-menu .form-switch .form-check-input:checked {
  border-color: #0947ad;
  background-color: #0947ad;
}
.container-menu .form-check-input {
  height: 20px;
  width: 40px;
}
.container-menu .divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}
.container-menu .quick-menu {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}
.container-menu .quick-menu li {
  width: 100%;
}
.container-menu .quick-menu li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #0947ad;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 25px 10px;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  gap: 12px;
  text-align: center;
}
.container-menu .quick-menu li a img {
  width: auto;
}
.container-menu .version {
  color: rgba(0, 55, 146, 0.5);
  padding: 16px;
  line-height: 2em;
}
.container-menu .version .data {
  color: #003792;
  margin-left: 80px;
}
.container-menu .check-my {
  padding: 20px 24px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
  border-radius: 12px;
}
.container-menu .check-my .title {
  color: rgba(0, 55, 146, 0.5);
  margin-bottom: 4px;
}
.container-menu .check-my .data {
  color: #003792;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.container-menu .check-my .data a {
  font-size: 14px;
  color: #003792;
  padding: 0;
}
.container-menu .custom-service .service {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}
.container-menu .custom-service .service > div {
  width: 100%;
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
}
.container-menu .custom-service .service > div span {
  display: block;
  margin-top: 8px;
  color: #003792;
  font-size: 14px;
}
.container-menu .custom-service .service .pdt .item {
  color: rgba(0, 55, 146, 0.7);
  font-size: 16px;
  font-weight: 700;
}
.container-menu .custom-service .service .pdt .item img {
  display: inline-block;
}
.container-menu .custom-service .service .use {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: rgba(0, 55, 146, 0.5);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3em;
}
.container-menu .custom-service .service .use .ing {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.container-menu .custom-service .btn {
  margin-top: 12px;
  width: 100%;
}
.container-menu .sns-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px;
}
.container-menu .sns-list a {
  width: 42px;
  height: 42px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}
.container-menu .sns-list a img {
  width: 24px;
  height: 24px;
}
.container-menu .sns-list a.fb {
  background-color: #3a559f;
}
.container-menu .sns-list a.ig {
  background: linear-gradient(
    42.71deg,
    #f3c82e 5.65%,
    #ff1733 34.97%,
    #492cfc 92.32%,
    rgba(252, 44, 70, 0) 92.32%
  );
}
.container-menu .sns-list a.yt {
  background-color: #ea3323;
}
.container-menu .sns-list a.kt {
  background-color: #f8df00;
}

.isms-wrap {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 12px;
}

.isms-wrap img {
  width: 42px;
  height: 40px;

  -webkit-user-drag: none;
}

.isms-wrap p {
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0;

  color: #999999;
}

.isms-wrap span {
  display: inline-block;
}

.container-membership {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.container-membership .accordion-button:not(.collapsed) {
  background-color: #fff;
  font-weight: 700;
  color: #003792;
}
.container-membership .kv {
  position: relative;
}
.container-membership .kv img {
  display: block;
  width: 100%;
}
.container-membership .kv .vicio {
  position: absolute;
  width: 100%;
  bottom: 80px;
  padding-left: 32px;
  padding-right: 32px;
}
.container-membership .tabs-container {
  margin-left: 0;
  margin-right: 0;
}
.container-membership .tabs-container img {
  display: block;
  width: 100%;
}
.container-membership .slide-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 68px;
}
.container-membership .sec-01 {
  background-color: #0947ad;
}
.container-membership .sec-01 .desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
  color: #71a6ff;
  padding-bottom: 60px;
}
.container-membership .sec-02 {
  padding-bottom: 60px;
}
.container-membership .sec-02 .ct {
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}
.container-membership .couponSwiper {
  background-color: rgba(0, 0, 0, 0);
  padding-bottom: 82px;
}
.container-membership .couponSwiper .swiper-slide {
  background-color: rgba(0, 0, 0, 0);
}
.container-membership .couponSwiper .swiper-pagination {
  bottom: 50px;
}
#membership {
  padding-top: 68px;
  background-color: #fff;
}
/* #membership .header-wrap .back-arrow {
    -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg) brightness(106%) contrast(103%);
    filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg) brightness(106%) contrast(103%);
}
/* #membership .header-wrap .header-title {
	color: #fff;
} */
#membership .header-wrap.fixed_v2 .back-arrow {
  -webkit-filter: none;
  filter: none;
  line-height: 40px;
}
#membership .header-wrap.fixed_v2 .header-title {
  color: #003792;
}
#membership .banners {
  padding-left: 20px;
  padding-right: 20px;
}
main.container-smartorder {
  padding-bottom: 40px;
}
main.container-smartorder .order-status.ing .progress-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
main.container-smartorder .order-status.ing .progress-none {
  display: none;
}
main.container-smartorder .order-status.none .order-progress {
  padding-bottom: 40px;
}
main.container-smartorder .order-status.none .progress-bar {
  display: none;
}
main.container-smartorder .order-status.none .progress-none {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
main.container-smartorder .order-progress {
  background-color: #0947ad;
  padding: 24px 20px;
  border-radius: 12px;
  margin-bottom: 12px;
}
main.container-smartorder .order-progress .progress-none {
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0.5;
  margin-top: 32px;
}
main.container-smartorder .order-progress .progress-bar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  background-color: rgba(0, 0, 0, 0);
  padding: 0 20px 50px;
  margin-top: 32px;
}
main.container-smartorder .order-progress .progress-bar > div {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background-color: #448bff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
  color: #448bff;
}
main.container-smartorder .order-progress .progress-bar > div::after {
  color: inherit;
  margin-top: 24px;
  font-weight: 700;
}
main.container-smartorder .order-progress .progress-bar .step1::after {
  content: "예약접수";
}
main.container-smartorder .order-progress .progress-bar .step2::after {
  content: "제품 준비중";
}
main.container-smartorder .order-progress .progress-bar .step3::after {
  content: "준비 완료";
}
main.container-smartorder .order-progress .progress-bar .bar {
  position: absolute;
  height: 1px;
  top: 4px;
  left: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.1);
}
main.container-smartorder .order-progress .progress-bar .bar .gage {
  display: block;
  width: 0%;
  height: 1px;
  background-color: #fff;
}
main.container-smartorder .order-progress .progress-bar.status1 .step1 {
  color: #fff;
  background-color: #fff;
}
main.container-smartorder .order-progress .progress-bar.status2 .step1 {
  color: #fff;
  background-color: #fff;
}
main.container-smartorder .order-progress .progress-bar.status2 .step2 {
  color: #fff;
  background-color: #fff;
}
main.container-smartorder .order-progress .progress-bar.status2 .gage {
  width: 50%;
}
main.container-smartorder .order-progress .progress-bar.status3 .step1 {
  color: #fff;
  background-color: #fff;
}
main.container-smartorder .order-progress .progress-bar.status3 .step2 {
  color: #fff;
  background-color: #fff;
}
main.container-smartorder .order-progress .progress-bar.status3 .step3 {
  color: #fff;
  background-color: #fff;
}
main.container-smartorder .order-progress .progress-bar.status3 .gage {
  width: 100%;
}
main.container-smartorder .order-progress .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: #fff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
main.container-smartorder .order-progress .header h5 {
  color: #fff;
  margin: 0;
  font-size: 16px;
}
main.container-smartorder .order-progress .header .btn {
  color: #fff;
  opacity: 0.5;
  padding: 0;
}
main.container-smartorder .order-progress .header .btn::after {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
}
main.container-smartorder .order-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}
main.container-smartorder .order-menu a {
  width: 100%;
  padding: 24px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 12px;
  height: 126px;
  background-color: #0947ad;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
main.container-smartorder .order-menu a img {
  width: 24px;
  height: 24px;
  margin-bottom: auto;
}
main.container-smartorder .my-lens {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}
main.container-smartorder .my-lens-box .section-head span {
  gap: 8px;
}
main.container-smartorder .my-lens-box {
  position: relative;
}
main.container-smartorder .my-lens-box .section-head span img {
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  opacity: 0.3;
}
main.container-smartorder .my-lens-box > img {
  width: auto;
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  opacity: 0.3;
  position: absolute;
  left: 95px;
  top: 4px;
  z-index: 100;
}
main.container-smartorder .my-lens .lens {
  background-color: #fff;
  border-radius: 12px;
  padding: 18px 16px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
main.container-smartorder .my-lens .lens img {
  width: 100%;
  margin-bottom: 20px;
}
main.container-smartorder .my-lens .lens .title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 55, 146, 0.7);
  margin-bottom: 8px;
  word-break: break-all;
}
main.container-smartorder .my-lens .lens .desc {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 55, 146, 0.5);
  line-height: 1.2em;
}
main.container-smartorder .my-lens .lens .btn {
  margin-top: 16px;
  width: 100%;
  font-size: 14px;
  color: #003792;
  border-color: #003792;
  padding: 8px 10px;
}
main.container-smartorder .my-optician {
  background-color: #0d90d0;
  border-radius: 12px;
  margin-top: 36px;
  padding: 24px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
main.container-smartorder .my-optician .tag {
  opacity: 0.5;
  font-size: 16px;
  font-weight: 700;
}
main.container-smartorder .my-optician .store {
  margin-top: 5px;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}
main.container-smartorder .my-optician .btn {
  color: #fff !important;
  opacity: 0.5;
  font-weight: 500;
}
main.container-smartorder .my-optician .btn::after {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
}
.event-list .card {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.event-list .card + .card {
  margin-top: 12px;
}
.event-list .card.end::before {
  inset: 1em;
  content: "이벤트 종료";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 20;
}
.event-thumb {
  position: relative;
  padding-bottom: 100%;
  width: 100%;
}

.product-thumb {
  position: relative;
  padding-bottom: 83%;
  width: 100%;
}

.product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  /* 구형 오페라 브라우저용 */
  -o-object-fit: cover;
  object-fit: contain;
}

.event-thumb .tag {
  top: 28px;
  left: 28px;
  position: absolute;
  display: inline-block;
  font-size: 12px;
  color: #003792;
  line-height: 1.1em;
  padding: 6px 8px;
  border: 1px solid #fff;
  background-color: #fff;
  border-radius: 100px;
  z-index: 10;
}

.productInfoSwiper .badge-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: flex-start;
  width: 40%;
  gap: 6px;
  position: absolute;
  top: 8%;
  left: 10%;
  z-index: 10;
  font-size: 16px;
}

.badge-wrap div {
  padding: 4% 0;
  justify-content: center;
  align-items: center;
  width: 50%;
  border-radius: 4px;
  border: 1px solid #48A1DB;
  color: #48A1DB;
  font-family: Pretendard;
  font-size: 0.75em;
  font-weight: 500;
}

.event-thumb img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.product-thumb img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: contain !important;
  object-fit:   contain  !important;;
}

.event-info {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  text-align: left;
  padding: 24px 16px 26px 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.event-info::after {
  position: relative;
  width: 10%;
  height: 22px;
  content: "";
  background-image: url(/img/myacuvue/common_v2/icon-angle-right.svg);
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.3;
}
.event-info .title {
  width: 90%;
}
.event-info .title p {
  font-size: 20px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
.event-info .title .desc {
  display: block;
  font-size: 16px;
  line-height: 1.3em;
  color: #003792;
}
.mission-Acivue .bg-green,
.mission-Acivue.bg-green {
  background: radial-gradient(
      171.93% 94.63% at 3.73% 4.73%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #178179;
  background-blend-mode: soft-light, normal;
}
.mission-Acivue .bg-green .tag,
.mission-Acivue.bg-green .tag {
  color: #178179;
}
.mission-Acivue .bg-pink,
.mission-Acivue.bg-pink {
  background: radial-gradient(
      171.93% 94.63% at 3.73% 4.73%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #854ace;
  background-blend-mode: soft-light, normal;
}
.mission-Acivue .bg-pink .tag,
.mission-Acivue.bg-pink .tag {
  color: #854ace;
}
.mission-Acivue .btn-floating {
  position: fixed;
  border-radius: 0;
  padding: 24px 32px;
  font-weight: 700;
  border: none;
  z-index: 100;
}
.mission-Acivue .badge-position {
  position: relative;
}
.mission-Acivue .mission-kv {
  min-height: auto;
  text-align: center;
  padding-bottom: 60px;
}
.mission-Acivue .mission-kv h2 {
  margin-top: 82px;
  font-size: 33px;
  font-weight: 800;
  color: #fff;
  line-height: 1.4em;
}
.mission-Acivue .mission-kv h2 span {
  position: relative;
}
.mission-Acivue .mission-kv h2 span::before {
  width: 4px;
  height: 4px;
  content: "";
  position: absolute;
  background-color: #fff;
  top: -0.15em;
  left: 50%;
  margin-left: -2px;
  border-radius: 4px;
}
.mission-Acivue .mission-kv h2 .badge {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25),
    inset 0px 0px 15px rgba(255, 255, 255, 0.6);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25),
    inset 0px 0px 15px rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 300px;
  -webkit-transform: rotate(-13.61deg);
  transform: rotate(-13.61deg);
  top: -8px;
}
.mission-Acivue .mission-kv .date {
  display: inline-block;
  padding: 6px 20px;
  font-weight: 700;
  color: #04554f;
  background-color: rgba(255, 255, 255, 0.2509803922);
  border-radius: 100px;
  margin-top: 24px;
  font-size: 18px;
}
.mission-Acivue .mission-kv .desc {
  color: #fff;
  opacity: 0.5;
  font-size-adjust: 16px;
  margin-top: 8px;
  display: block;
}
.mission-Acivue .mission-kv .exclamation {
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.6980392157);
  font-size: 12px;
  margin-top: 40px;
  display: block;
}
.mission-Acivue .mission-kv img {
  display: block;
  margin: 40px auto !important;
}
.mission-Acivue .mission-cards .card {
  border: 0;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
}
.mission-Acivue .mission-cards .card + .card {
  margin-top: 16px;
}
.mission-Acivue .mission-cards .card.bg-sky {
  background-color: #0d90d0;
}
.mission-Acivue .mission-cards .card.bg-blue {
  background-color: #0947ad;
}
.mission-Acivue .mission-cards .card-body {
  position: relative;
  height: 344px;
  padding: 28px;
  z-index: 1;
}
.mission-Acivue .mission-cards .card-body .position {
  position: relative;
}
.mission-Acivue .mission-cards .card-body .badge {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25),
    inset 0px 0px 15px rgba(255, 255, 255, 0.6);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25),
    inset 0px 0px 15px rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 300px;
  -webkit-transform: rotate(-13.61deg) translateX(125%);
  transform: rotate(-13.61deg) translateX(125%);
  top: 60%;
  font-size: 28px;
}
.mission-Acivue .mission-cards .card-footer {
  position: relative;
  border-top: 0;
  background-color: rgba(0, 0, 0, 0);
  color: inherit;
  padding: 0 28px 28px 28px;
  z-index: 1;
}
.mission-Acivue .mission-cards .card-footer .btn {
  color: inherit;
  font-size: 14px;
}
.mission-Acivue .mission-cards .card-footer .btn::after {
  -webkit-filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(355deg)
    brightness(103%) contrast(102%);
  filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(355deg)
    brightness(103%) contrast(102%);
}
.mission-Acivue .mission-cards .card .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.mission-Acivue .mission-cards .card .bg img {
  position: absolute;
  width: auto;
  bottom: 10px;
}
.mission-Acivue .mission-cards .card .tag {
  display: inline-block;
  font-size: 12px;
  line-height: 1.1em;
  padding: 6px 8px;
  border: 1px solid #fff;
  border-radius: 100px;
  background-color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
}
.mission-Acivue .mission-cards .card h3 {
  color: #fff;
  margin: 8px auto;
  line-height: 1.2em;
  font-weight: 800;
  font-size: 38px;
}
.mission-Acivue .mission-cards .card .desc {
  margin-top: auto;
  font-size: 14px;
}
.mission-Acivue .timer {
  position: relative;
  margin-top: 10px;
}
.mission-Acivue .timer > svg {
  width: 200px;
  height: 200px;
}
.mission-Acivue .timer > svg > circle {
  fill: none;
  stroke-opacity: 0.3;
  stroke: #fff;
  stroke-width: 10;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.mission-Acivue .timer > svg > circle + circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-opacity: 1;
}
.mission-Acivue .timer.animatable > svg > circle + circle {
  -webkit-transition: stroke-dashoffset 0.3s ease;
  transition: stroke-dashoffset 0.3s ease;
}
.mission-Acivue #timeLeft {
  font-size: 50px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}
.mission-Acivue .timer > svg > text {
  font-size: 50px;
  color: #fff;
}
.mission-Acivue .mission-details {
  margin-left: -20px;
  margin-right: -20px;
  background-color: #f4f4f4;
}
.mission-Acivue .mission-details img {
  width: 100%;
}
.mission-Acivue .mission-details .swiper-wrap {
  padding: 0 20px;
}
.mission-Acivue .mission-details .swiper-wrap .swiper-pagination {
  padding: 12px 0;
  position: relative;
  bottom: 0;
}
.mission-Acivue .mission-details .mySwiper {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
}
.mission-Acivue .mission-details .notice {
  font-size: 12px;
  font-weight: 400;
  word-break: keep-all;
  padding: 60px 20px;
  color: #999;
}
.mission-Acivue .mission-details .notice h6 {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 0.75em;
  margin-top: 2em;
  color: #666;
}
.mission-Acivue .mission-details .notice ul {
  padding-left: 1em;
  list-style: disc;
}
.mission-Acivue .mission-details .notice ul li {
  list-style: disc;
}
.mission-Acivue .mission-details .notice ul li a {
  display: inline-block !important;
}
.mission-Acivue .mission-details .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
#missionDetail {
  background-color: #fff;
}
#missionDetail .header-wrap .back-arrow {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
}
#missionDetail .header-wrap .header-title {
  color: #fff;
}
#missionDetail .header-wrap.fixed .back-arrow {
  -webkit-filter: none;
  filter: none;
}
#missionDetail .header-wrap.fixed .header-title {
  color: #003792;
}
#missionDetail .mission-kv img {
  margin: 40px 0;
}
#missionDetail .mission-level {
  background-color: #04554f;
  padding: 24px;
  border-radius: 12px;
  color: #fff;
}
#missionDetail .mission-level .level-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1882352941);
  padding-bottom: 16px;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
#missionDetail .mission-level .status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  color: #69fff5;
  font-size: 14px;
}
#missionDetail .mission-level .status .point {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#missionDetail .mission-level .status .point::before {
  width: 1px;
  height: 70%;
  background-color: #fff;
  opacity: 0.2;
  content: "";
}
#missionDetail .mission-level .level-step {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#missionDetail .mission-level .level-step li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  font-size: 12px;
}
#missionDetail .mission-level .level-step li::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  height: 1px;
  background-color: #04423d;
  top: 11px;
  z-index: 0;
}
#missionDetail .mission-level .level-step li::before {
  width: 22px;
  height: 22px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  content: "2";
  font-weight: bold;
  background-color: #04423d;
  font-size: 12px;
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.1882352941);
  z-index: 5;
}
#missionDetail .mission-level .level-step li:first-child::before {
  content: "1";
}
#missionDetail .mission-level .level-step li:first-child::after {
  left: 50%;
}
#missionDetail .mission-level .level-step li:last-child::before {
  content: "3";
}
#missionDetail .mission-level .level-step li:last-child::after {
  right: 50%;
}
#missionDetail .mission-level .level-step li.active::before {
  background-color: #fff;
  color: #04423d;
  font-weight: bold;
}
#missionPlay {
  background-color: #fff;
}
#missionPlay .header-wrap img {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
}
#missionPlay .header-wrap .header-title {
  color: #fff;
}
#missionPlay .header-wrap.fixed img {
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
}
#missionPlay .header-wrap.fixed .header-title {
  color: #003792;
}
#missionPlay main.container-mission {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 20px;
}
#missionPlay main.container-mission .mission-kv h2 {
  margin-top: 0;
}
main.container-mission {
  padding-bottom: 72px;
}
.object {
  position: absolute;
}
.area {
  position: relative;
  width: 218px;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#objectA {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
}
#objectA .video {
  width: 100%;
}
#objectB {
  display: none;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@-webkit-keyframes float {
  0%,
  100% {
    -webkit-transform: translateX(-50%) translateY(0px);
    transform: translateX(-50%) translateY(0px);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(-25px);
    transform: translateX(-50%) translateY(-25px);
  }
}
@keyframes float {
  0%,
  100% {
    -webkit-transform: translateX(-50%) translateY(0px);
    transform: translateX(-50%) translateY(0px);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(-25px);
    transform: translateX(-50%) translateY(-25px);
  }
}
@-webkit-keyframes vid-out {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    -webkit-transform: translateX(-50%) scale(3);
    transform: translateX(-50%) scale(3);
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}
@keyframes vid-out {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  70% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    -webkit-transform: translateX(-50%) scale(3);
    transform: translateX(-50%) scale(3);
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}
@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(-100px) translateX(-50%) scaleY(0.9);
    transform: translateY(-100px) translateX(-50%) scaleY(0.9);
    opacity: 0;
  }
  5% {
    opacity: 0.7;
  }
  50% {
    -webkit-transform: translateY(0px) translateX(-50%) scaleY(1);
    transform: translateY(0px) translateX(-50%) scaleY(1);
    opacity: 1;
  }
  65% {
    -webkit-transform: translateY(-17px) translateX(-50%) scaleY(0.9);
    transform: translateY(-17px) translateX(-50%) scaleY(0.9);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateY(-22px) translateX(-50%) scaleY(0.9);
    transform: translateY(-22px) translateX(-50%) scaleY(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0px) translateX(-50%) scaleY(1);
    transform: translateY(0px) translateX(-50%) scaleY(1);
    opacity: 1;
  }
}
@keyframes drop {
  0% {
    -webkit-transform: translateY(-100px) translateX(-50%) scaleY(0.9);
    transform: translateY(-100px) translateX(-50%) scaleY(0.9);
    opacity: 0;
  }
  5% {
    opacity: 0.7;
  }
  50% {
    -webkit-transform: translateY(0px) translateX(-50%) scaleY(1);
    transform: translateY(0px) translateX(-50%) scaleY(1);
    opacity: 1;
  }
  65% {
    -webkit-transform: translateY(-17px) translateX(-50%) scaleY(0.9);
    transform: translateY(-17px) translateX(-50%) scaleY(0.9);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateY(-22px) translateX(-50%) scaleY(0.9);
    transform: translateY(-22px) translateX(-50%) scaleY(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0px) translateX(-50%) scaleY(1);
    transform: translateY(0px) translateX(-50%) scaleY(1);
    opacity: 1;
  }
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.acuvue-footer {
  background-color: #fff;
  padding: 0;
  word-break: keep-all;
  font-size: 12px;
  margin-top: 40px;
}
.acuvue-footer .footer-top {
  border-bottom: 1px solid #f0f0f0;
}
.acuvue-footer .footer-top .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.acuvue-footer .footer-top .footer-region {
  font-size: 14px;
  margin: 0;
}
.acuvue-footer .footer-top .footer-region ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.acuvue-footer .footer-top .footer-region li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.acuvue-footer .footer-top .footer-region li:not(:last-child)::after {
  content: "";
  display: block;
  position: relative;
  width: 1px;
  height: 90%;
  background-color: #dedede;
  margin: 0 12px;
}
.acuvue-footer .footer-top .footer-region a {
  margin: 0;
  color: #6a7382;
  line-height: 1em;
}
.acuvue-footer .footer-top .footer-sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.acuvue-footer .footer-top .footer-sns a {
  width: 28px;
  height: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 8px;
  margin: 0;
}
.acuvue-footer .footer-top .footer-sns a img {
  width: 16px;
  height: 16px;
}
.acuvue-footer .footer-top .footer-sns a.fb {
  background-color: #3a559f;
}
.acuvue-footer .footer-top .footer-sns a.ig {
  background: linear-gradient(
    42.71deg,
    #f3c82e 5.65%,
    #ff1733 34.97%,
    #492cfc 92.32%,
    rgba(252, 44, 70, 0) 92.32%
  );
}
.acuvue-footer .footer-top .footer-sns a.yt {
  background-color: #ea3323;
}
.acuvue-footer .footer-top .footer-sns a.kt {
  background-color: #f8df00;
}
.acuvue-footer .footer-bottom .inner {
  padding: 40px 20px;
  color: #999;
}
.acuvue-footer .footer-bottom .footer-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
}
.acuvue-footer .footer-bottom .footer-info a {
  display: inline-block;
}
.acuvue-footer .footer-bottom .footer-info p {
  color: #999;
}
.acuvue-footer .footer-bottom .footer-info > * {
  margin: 0;
  display: inline-block;
}
.acuvue-footer .inner {
  max-width: 960px;
  margin: 0 auto;
}
.mobileWebEventSwiper {
  margin-top: 68px;
}
.mobileWebEventSwiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid #fff;
}
.mobileWebEventSwiper .swiper-pagination-bullet-active {
  background-color: #fff;
}
.acuvuePdtSwiper {
  background-color: #fff;
}
.acuvuePdtSwiper .swiper-slide {
  padding: 48px 0;
}
.container-mobile {
  padding-top: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.container-mobile .card-wrap-members {
  padding-left: 20px;
  padding-right: 20px;
}
.container-mobile .log-out {
  margin-bottom: 44px;
}
.container-mobile .log-out .btn-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  background-color: #0947ad;
  color: #fff;
  border-radius: 12px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 32px;
  font-size: 20px;
}
.container-mobile .log-out .btn-text::after {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(104deg)
    brightness(106%) contrast(103%);
  opacity: 0.5;
}
.container-mobile .section-head {
  padding-left: 20px;
  margin-bottom: 20px;
}
.container-mobile .pdt-list {
  margin-top: 52px;
}
.container-mobile .main-cards {
  padding-left: 20px;
  padding-right: 20px;
}
.container-mobile .main-cards .section-head {
  padding-left: 0px;
}
@media all and (max-width: 320px) {
  .head .btn-text {
    display: -webkit-box !important;
  }
}
.header-wrap {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding: 14px;
}
.header-wrap .back-arrow {
  width: 40px;
  height: 40px;
  background-image: url(/img/myacuvue/common_v2/icon-back.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.header-wrap.type-home {
  opacity: 1;
}
.header-wrap.type-home .header-menu {
  opacity: 0.5;
}
.header-wrap.type-home + main {
  margin-bottom: 82px;
}
.header-wrap.type-sub > * {
  opacity: 0.5;
}
.header-wrap.type-page {
  padding: 14px;
}
.header-wrap.type-page .header-title {
  width: 100%;
  text-align: center;
  padding-right: 40px;
  opacity: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.header-wrap.type-page + main {
  margin-bottom: 40px;
}
.header-wrap .brand-logo {
  padding-left: 8px;
}
.header-wrap.fixed_v2::before {
  opacity: 0;
}
.header-wrap.fixed_v2 .back-arrow {
  background-image: url(/img/myacuvue/common_v2/icon-back_blue.svg);
}
.header-wrap.fixed_v2::after {
  position: absolute;
  inset: -0.1rem 0rem 0rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.6);
  content: "";
  z-index: -1;
  bottom: -0.1rem;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  opacity: 1;
}
.header-menu {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin: 0;
}
.header-menu li {
  width: 40px;
  height: 40px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.header-menu li .his_back {
  color: #003792;
}
.header-menu li img {
  width: auto;
  -webkit-filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
  filter: invert(14%) sepia(49%) saturate(6697%) hue-rotate(214deg)
    brightness(97%) contrast(93%);
}
.header-title {
  font-size: 20px;
  font-weight: 700;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #003792;
  opacity: 0.5;
}
.nav-bar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.nav-bar-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background-color: #fff;
}
.nav-bar li {
  position: relative;
  width: 100%;
}
.nav-bar li.active .ico {
  background-position: 0px -28px;
}
.nav-bar li.active a {
  color: #003792;
}
.nav-bar li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  text-decoration: none;
  line-height: 14px;
}
.nav-bar li span {
  display: block;
  position: relative;
}
.nav-bar li .ico {
  display: block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 28px auto;
  margin-bottom: 8px;
}
.nav-bar li .ico-home {
  background-image: url(/img/myacuvue/common_v2/nav-home.svg);
}
.nav-bar li .ico-my {
  background-image: url(/img/myacuvue/common_v2/nav-my.svg);
}
.nav-bar li .ico-event {
  background-image: url(/img/myacuvue/common_v2/nav-event.svg);
}
.nav-bar li .ico-coupon {
  background-image: url(/img/myacuvue/common_v2/nav-coupon.svg);
}
.nav-bar li .ico-menu {
  background-image: url(/img/myacuvue/common_v2/nav-menu.svg);
}
.coupon-box img {
  margin: 0 auto;
}
.og-noti-box p {
  text-align: left;
}
.og-noti-box div p a,
.og-noti-box div p dl dd {
  display: inline-block;
}

/* 알림노티 */
.noti_alarm {
  position: relative;
}
.noti_alarm:after {
  display: block;
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  z-index: 100;
  background: red;
  border-radius: 10px;
}
/* main 마이등급, mvip 여부 노출 부분*/
.main_cards_wrap {
  display: flex;
  align-items: flex-start;
  gap: 3%;
  height: 110px;
  margin-bottom: 12px;
}
.main_my_grade_wrap {
  width: 30%;
  height: 100%;
  transition: width .4s ease-out
}
.main_my_grade_wrap.on {
  width: 67%;
  transition: width .4s ease-out
}
.mvip-status-wrap.on {
  width: 67%;
  height: 100%;
  transition: width .4s ease-out
}
.mvip-status-wrap {
  width: 30%;
  height: 100%;
  transition: width .4s ease-out
}
.main_my_grade_wrap .main_my_grade.narrow, .mvip-status.narrow {
  display: flex;
  width: 100%;
  height: 110px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 3.59% 3.59%;
  border-radius: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  background: #C5E7FF;
}
.main_my_grade_wrap .main_my_grade.extended {
  justify-content: flex-start;
}
.mvip-status.narrow {
  padding: 4% 4%;
  display: none;
}
.main_my_grade_wrap .main_my_grade.narrow .text{
  color: #003792;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  opacity: 0.5;
}
.main_my_grade_wrap .main_my_grade.narrow .data {
  color: #003792;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.main_my_grade_wrap .main_my_grade.narrow .class-lv img{
  width: 40.513px;
  height: 40.513px;
}
.main_my_grade_wrap .main_my_grade.extended .class-lv img{
  width: 60.513px;
  height: 60.513px;
}
.main_my_grade_wrap .main_my_grade.narrow .class-lv {
  margin-bottom: 5px;
}
.main_my_grade.extended, .mvip-status.extended {
  display: flex;
  width: 100%;
  height: 110px;
  padding: 7.5% 6%;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 12px;
  background: #FFF;
}
.main_my_grade.extended {
  display: none;
  flex-direction: row;
}
.main_my_grade.extended > div:last-child > p:first-child {
  color: #003792;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.main_my_grade.extended > div:last-child > p:first-child > .data {
  position: relative;
  padding-left: 6px;
  margin-left: 6px;
  color: #003792;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.main_my_grade.extended .data:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(0, 55, 146, 0.20);
}
.main_my_grade.extended > div:last-child > p:last-child {
  color: #003792;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.56px;
  opacity: 0.5;
}
.mvip-status.narrow img {
  width: 40.04px;
  height: 32.129px;
  margin: 5% 0;
}
.mvip-status.extended img{
  width: 58.058px;
  height: 46.586px;
}
.mvip-status.narrow > p {
  color: #888;
  font-family: "Pretendard", "Noto Sans KR", "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.mvip-status.narrow > p:first-child {
  opacity: 0.5;
}
.mvip-status.narrow > .status {
  color: #888;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 23.4px */
}
.mvip-status.extended div p:first-child {
  margin-bottom: 4px;
  color: #003792;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.mvip-status.extended div p:last-child {
  color: #AAA;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.56px;
}
.mvip-status.extended div p .status {
  position: relative;
  padding-left: 6px;
  margin-left: 6px;
  color: #888;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.mvip-status.extended div p .status:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(0, 55, 146, 0.20);
}
/* 마이페이지 mvip 달성 미달성 박스 추가 */
.max-membership {
  margin-top: 12px;
}
.membership-progress {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 7% 8.5%;
  border-radius: 12px 12px 0 0;
  background: #0C1666;
}
.mvip-title-wrap {
  display: flex;
  flex-direction: row;
  flex: 1 1 0;
}
.mvip-title-wrap.incomplete, .mvip-title-wrap.complete{
  display: none;
}
.mvip-title-wrap div {
  color: #FFF;
  font-family: Pretendard;
  font-weight: 700;
}
.mvip-title-wrap div > span:first-child {
  font-size: 12px;
  opacity: 0.5;
}
.mvip-title-wrap div p {
  margin-top: 8px;
  font-size: 22px;
  color: #FFF;
}
.mvip-title-wrap.incomplete > div:last-child {
  position: relative;
  padding-left: 18%;
}
.mvip-title-wrap.incomplete > div:last-child:before {
  content: '';
  position: absolute;
  margin: 0 24px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  opacity: 0.1;
  background: #FFF;
}
.mvip-title-wrap img {
  margin-right: 7%;
}
.mvip-title-wrap.complete img {
  margin-left: -19px;
  margin-top: -14px;
  width: 78px;
  height: 72px;
}
.mvip-title-wrap.incomplete img {
  width: 58.096px;
  height: 46.616px;
}
.membership-status-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 28px;
  background: #040D56;
}
.membership-status-content dl {
  display: flex;
  flex-direction: row;
  color: #FFF;
  font-family: Pretendard;
}
.membership-status-content dt {
  position: relative;
  width: 48%;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.5;
}
.membership-status-content dd {
  width: 52%;
  font-size: 13px;
  font-weight: 500;
}
.membership-status-content dd > .status {
  position: relative;
  font-style: normal;
  margin: 0 6px;
  padding: 0 6px;
}
.membership-status-content dd > .status:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 7px;
  opacity: 0.2;
  background: #FFF;
}
.quantity-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quantity-status .text-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.quantity-status .text-wrap p, .quantity-status .text-wrap span {
  color: #FFF;
  font-family: Pretendard;
  font-weight: 600;
  font-size: 12px;
}
.quantity-status .text-wrap p:first-child {
  opacity: 0.5;
}
.quantity-status .text-wrap p:last-child {
  color: #FFF;
  font-weight: 400;
}
.quantity-status .text-wrap p .quantity {
  font-weight: 600;
  opacity: 1;
}
.quantity-status .text-wrap p span:last-child {
  display: inline;
  margin-left: 2px;
  opacity: 0.5;
  font-weight: 400;
  letter-spacing: 1px;
}
.quantity-status .progress-bar {
  display: flex;
  flex-direction: row;
  gap: 1.2%;
  width: 100%;
  height: 4px;
  background: url("/img/myacuvue/mvipBenefitZone/background_mvip_progress_bar.webp") no-repeat;
  background-size: cover;
}
.quantity-status .progress-bar div {
  width: 25%;
  height: 100%;
  background: #fff;
}
.quantity-status .progress-bar div.on {
  background: transparent;
}
.max-membership a img {
  background: #0C1666;
  border-radius: 0 0 12px 12px;
}
/*# sourceMappingURL=acuvue.min.css.map */