/* common */
@charset "utf-8";
@import url("https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css");

html {
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

body,
button,
p,
span {
  position: relative;
  font-family: "Spoqa Han Sans Neo", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", dotum, "돋움", helvetica, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.05em;
  font-weight: 400;
}

button span {
  color: #ffffff;
}

body {
  direction: ltr;
  -webkit-text-size-adjust: none;
  word-break: keep-all;
  word-wrap: break-word;
}

body,
ul,
li,
button {
  margin: 0;
  padding: 0;
}

div,
ul,
p {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: 0;
}

p {
  margin: 0;
}

button {
  position: relative;
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
}

button span {
  z-index: 10;
}

.hover {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
}

button:hover > .hover {
  background: rgba(0, 0, 0, 0.12);
}
.for_pc {
  display: block;
}
.for_mo {
  display: none;
}
/* typography */
.h1 {
  font-size: 36px;
  line-height: 56px;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.h3 {
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.05em;
}

.h4 {
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.05em;
}

.h5 {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.05em;
}

.h6 {
  font-size: 15px;
  line-height: 21px;
}


.light {
  font-weight: 300;
}
.mid {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

/* color  */
body {
  background-color: #ffffff;
  color: rgba(255, 255, 255, .81);
}
.txt_skt {
 color: #3617CE;
}
.txt_kt {
  color: #ED1C24;
}
.txt_lgu {
  color: #E0007C;
}
.txt_red {
  color: rgba(177, 56, 56, 0.86);
}
/* box */
.min_wrap {
  min-width: 360px;
  width: 100%;
}
.container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.flex_col {
  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;
}

.flex_row {
  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-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.grow {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

/* button */
.inner_button {
  width: 100%;
  height: 70px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 11px;
  padding: 0 22px;
}
.inner_button#go_target_skt { background-color: #3617CE; }
.inner_button#go_target_kt { background-color: #ED1C24; }
.inner_button#go_target_lgu { background-color: #EC008B; }
.btn_txt {
  width: 100%;
}
.btn_txt>span {
  width: 100%;
}

/* main */
.main_wrap {
  overflow: hidden;
  width: 100%;
  height: 700px;
  background: linear-gradient(180deg, #FAF3F2 0%, #F9E9E7 100%);

Colors
HSL
HSL
Background colors

}
.main {
  width: 504px;
  height: 100%;
  overflow: visible;
}
.main>* {
  position: absolute;
}
.logo {
  z-index: 50;
  width: 89px;
  left: calc(50% - 89px / 2);
  top: 42px;
}
.title_wrap {
  z-index: 10;
  top: 114px;
  width: 380px;
  left: calc(50% - 380px / 2);
  gap: 40px;
  text-align: center;
}
.main_title {
  width: 343px;
}
.sub_title_wrap {
  position: relative;
  padding: 3px 11px;
  background-color: #fff;
  border-radius: 140px;
  gap: 78px;
}
.icon_plus {
  position: absolute;
  width: 45px;
}
.sub_title {
  width: 140px;
}
/* img-wrap */
.img-wrap {
  width: 504px;
  height: 100%;
  position: absolute;
}
.img-wrap > img {
  position: absolute;
  z-index: 5;
}
.gra {
  z-index: 3;
  width: 658px;
  height: 658px;
  bottom: -133px;
  left: -49px;
  border-radius: 658px;
  background: radial-gradient(50% 50% at 50% 50%, #DBBAB3 0%, rgba(250, 212, 204, 0.00) 100%);
}
.img-phone {
  width: 284px;
  left: 122px;
  bottom: 0;
}
.coin-1 {
  width: 123px;
  right: 53px;
  bottom: 210px;
}
.coin-2 {
  width: 83px;
  left: 76px;
  bottom: 74px;
  z-index: 4 !important;
}
.coin-3 {
  width: 106px;
  left: 97px;
  top: 306px;
  z-index: 4 !important;

}
.particle-1 {
  width: 38px;
  top: 396px;
  left: 91px;
}
.particle-2 {
  width: 53px;
  top: 482px;
  left: 81px;
}
.particle-3 {
  width: 59px;
  top: 441px;
  right: 36px;
}

/* cont */
.cont_wrap {
  width: 100%;
  padding: 62px 11px;
  gap: 17px;
  background-color: #FCFBFA;
  color: rgba(34, 34, 34, 0.86);
}
/* tab */
.tab_list {
  display: none;
  gap: 12px;
  width: 100%;
}
.tab_item {
  cursor: pointer;
  text-align: center;
  border-radius: 11px;
  padding: 26px 22px;
  background-color: #fff;
  border: 1px solid rgba(88, 81, 79, 0.16);
}
.tab_icon {
  display: block;
  width: 78px;
  height: 78px;
  background-size: contain;
  background-position: center;
}
.tab_list .tab_item:nth-child(1) .tab_icon { background-image: url("../../static/images/lottecard_telecom_2506/icon_skt.png"); }
.tab_list .tab_item:nth-child(2) .tab_icon { background-image: url("../../static/images/lottecard_telecom_2506/icon_kt.png"); }
.tab_list .tab_item:nth-child(3) .tab_icon { background-image: url("../../static/images/lottecard_telecom_2506/icon_lgu.png"); }

.tab_item:hover { background-color: #f3f3f3; }
.tab_item.active { color: #fff; }
.tab_list .tab_item:nth-child(1).active { background-color: #3617CE; }
.tab_list .tab_item:nth-child(1).active .tab_icon { background-image: url("../../static/images/lottecard_telecom_2506/icon_skt_w.png"); }
.tab_list .tab_item:nth-child(2).active { background-color: #231F20; }
.tab_list .tab_item:nth-child(2).active .tab_icon { background-image: url("../../static/images/lottecard_telecom_2506/icon_kt_w.png"); }
.tab_list .tab_item:nth-child(3).active { background-color: #EC008B; }
.tab_list .tab_item:nth-child(3).active .tab_icon { background-image: url("../../static/images/lottecard_telecom_2506/icon_lgu_w.png"); }


/* card */
@keyframes fadeRight { 0% { transform: translateX(10%); opacity: 0; } 100% { transform: translateX(0); opacity: 1;} }
@-o-keyframes fadeRight { 0% { transform: translateX(10%); opacity: 0; } 100% { transform: translateX(0); opacity: 1;} }
@-moz-keyframes fadeRight { 0% { transform: translateX(10%); opacity: 0; } 100% { transform: translateX(0); opacity: 1;} }
@-webkit-keyframes fadeRight { 0% { transform: translateX(10%); opacity: 0; } 100% { transform: translateX(0); opacity: 1;} }
.card_wrap {
  align-items: flex-start;
  width: 100%;
  max-width: 1500px;
  overflow: hidden;
  gap: 17px;
}
.card_item {
  animation: fadeRight cubic-bezier(0.39, 0.575, 0.565, 1) .8s 1 forwards;
  border-radius: 11px;
  overflow: hidden;
  background-color: #fff;
  width: 100%;
}
/* item head */
.item_head {
  color: white;
  width: 100%;
}
.item_head > img {
  width: 46px;
}
.card_item:nth-child(1) .item_head { background-color: #3617CE; }
.card_item:nth-child(2) .item_head { background-color: #231F20; }
.card_item:nth-child(3) .item_head { background-color: #EC008B; }
/* item_cont */
.item_cont {
  overflow: hidden;
  width: 100%;
  padding: 34px 28px 22px;
  gap: 28px;
  border-radius: 0 0 11px 11px;
  border: 1.4px solid rgba(88, 81, 79, 0.16);
  height: 1534px;
  justify-content: flex-start;
}
.item_title {
  width: 100%;
  padding: 34px 0;
  border-bottom: 1.4px solid var(--line, rgba(88, 81, 79, 0.16));
}
.card_box {
  width: 100%;
  gap: 11px;
  align-items: flex-start;
  height: 100%;
}
.card_box_title {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
}
.box_title {
  border-left: 4px solid #2F2E2D;
  padding: 0 11px;
}
/* table */
table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  border-top: 1.4px solid rgba(88, 81, 79, 0.16);
  border-bottom: 1.4px solid rgba(88, 81, 79, 0.16);
}
th {

  height: 78px;
  background-color: rgba(88, 81, 79, 0.08);
}
td {
  height: 73px;
  text-align: center;
}
ul.item_caption {
  width: 100%;
  padding: 11px;
  background-color: rgba(88, 81, 79, 0.08);
  border-radius: 6px;
  color: #756F6E;
}
ul.item_caption li {
  position: relative;
  display: block;
  padding-left: 20px;
}
ul.item_caption li::before {
  position: absolute;
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  left: 8px;
  top: 8px;
  background-color: #756F6E;
}
.card_info_wrap {
  width: 100%;
  gap: 6px;
  flex-direction: column-reverse;
}
.card_img {
  width: 156px;
}
.card_item:nth-child(3) .card_img {
  width: 252px;
}
.info_txt {
  gap: 17px;
  width: 100%;
  padding: 22px 11px;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: flex-start;
}
.info_title {
  width: 100%;
}
.info_title p {
  width: 100%;
  text-align: center;
}
.info_caption {
  flex-direction: row;
  gap: 10px;
  width: 100%;
}
.info_txt > .flex_col {
  align-items: flex-start;
}
span.line {
  display: block;
  width: 100%;
  height: 1.4px;
  background-color: rgba(88, 81, 79, 0.16);
}
.btn_wrap {
  width: 100%;
  gap: 11px;
}
.btn_wrap > p {
  width: 100%;
  text-align: center;
  color: #756F6E;
}
.item_cont > p {
  color: #756F6E;
}

/* footer */
.footer_wrap {
  width: 100%;
  background: #E1DEDD;
  color: #2F2E2D;
}
.footer {
  max-width: 1000px;
  align-items: flex-start;
  padding: 70px 20px 180px 20px;
  gap: 20px;
}
.footer_title {
  gap: 8px;
}
.footer_title > img {
  width: 36px;
}
.footer ul {
  list-style: none;
}
.footer ul li {
  position: relative;
}
.footer ul li::before {
  position: absolute;
}
.footer .li_txt {
  display: block;
  width: 100%;
  padding-left: 16px;
}

.footer ul li.default { padding-left: 10px;}
.footer ul li.default::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 100%; background-color: #2F2E2D; top: 8px; }
.footer ul li.dashed::before { content: "-"; }
.hide {
  display: none;
}