@charset "UTF-8";

/*========================================================
  FONT
=========================================================*/

/* Thin (100) */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-Thin_0.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-Light_0.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-Regular_0.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-Medium_0.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-Bold_0.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-Black_0.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Thin.otf') format('opentype');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Light.otf') format('opentype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Black.otf') format('opentype');
    font-weight: 900;
    font-display: swap;
}

/*========================================================
  RESET / BASE
=========================================================*/

* {
  box-sizing: border-box;
}

dl,
dt,
dd,
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

h2,
h3 {
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR';
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR';
}

.highlight {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.highlight:after {
  content: "";
  width: 0;
  height: 18px;
  display: inline-block;
  background: #f6ff00;
  position: absolute;
  bottom: 0;
  left: -2px;
  z-index: -1;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  transition: 0.5s all;
  top:-2px;
}

/*========================================================
  LAYOUT
=========================================================*/

/* 헤더 */
.index-header {
  height: 193px;
  width: 100%;
  min-width: 1600px;
  border-bottom: 1px solid #e4e4e4;
}

.index-header img {
  display: block;
  margin: 0 auto;
}

.index-main {
  min-height: 500px;
  background: #f2f5f8;
}

.index-main > section {
  width: 1600px;
  margin: 0 auto;
}

/* 푸터 */
.index-footer {
  height: 181px;
  width: 100%;
  min-width: 1600px;
  border-top: 1px solid #e4e4e4;
}

.index-line {
  border-top: 1px solid #e4e4e4;
}

.index-footer img {
  display: block;
  margin: 0 auto;
}

/*========================================================
  LICENSE TAB
=========================================================*/

.license-tab {
  padding: 85px 0 50px;
  margin: 0 auto;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.license-tab > .tab-item-title {
  height: 87px;
  width: 261px;
  white-space: nowrap;
  cursor: pointer;
}

/* gap 124px 대체 */
.license-tab > .tab-item-title:not(:first-child) {
  margin-left: 124px;
}

.license-tab > .tab-item-title > span {
  margin: 0 auto;
  height: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #74757a;
  letter-spacing: -0.025em;
  line-height: 1em;
  display: block;
  text-align: center;
}

.license-tab > .tab-item-title > h2 {
  margin: 10px auto 0;
  height: 35px;
  font-size: 35px;
  font-weight: 600;
  color: #74757a;
  letter-spacing: -0.025em;
  text-align: center;
  line-height: 1em;
}

.license-tab > .tab-item-title.active > span {
  color: #6284f0;
}

.license-tab > .tab-item-title.active > h2 {
  color: #6284f0;
}

.license-tab > .tab-item-title.active {
  border-bottom: 5px solid #6284f0;
}

/*========================================================
  LICENSE CAPTION
=========================================================*/

.license-caption {
  margin: 0 auto;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* gap 10px 대체 */
.license-caption > .caption-item:not(:first-child) {
  margin-left: 10px;
}

.license-caption > .caption-item {
  height: 66px;

  /* flexbox cross-browser (내용 가운데 정렬) */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  font-size: 18px;
  line-height: 17px;
  font-weight: 500;
  color: #36373b;
  letter-spacing: -0.025em;
  text-align: center;
  background: #ffffff;
  border-radius: 15px;
  white-space:nowrap;
  box-shadow: 0 0 25px #e9ecef;
}

.license-caption > .caption-item.ci1 {
  width: 695px;
}

.license-caption > .caption-item.ci2 {
  width: 460px;
}

.license-caption > .caption-item.ci3 {
  width: 225px;
}

.license-caption > .caption-item.ci4 {
  width: 286px;
}

/*========================================================
  LICENSE CARD (LIST)
=========================================================*/

.license-card {
  margin: 14px auto 20px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* gap 10px 대체 */
.license-card > .card-item:not(:first-child) {
  margin-left: 10px;
}

.license-card > .card-item {
  width: 225px;
  height: 820px;
  padding: 20px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 25px #e9ecef;
}

/* 타입별 색상 */
.license-card > .card-item[data-type='standard'] .card-features > li.active {
  border-color: #01b0b2;
  color: #01b0b2;
}


.license-card > .card-item[data-type='premium'] .card-features > li.active {
  border-color: #2092ff;
  color: #2092ff;
}


.license-card > .card-item[data-type='youtube'] .card-features > li.active {
  border-color: #27b556;
  color: #27b556;
}


.license-card > .card-item[data-type='single'] .card-features > li.active {
  border-color: #598cff;
  color: #598cff;
}


.license-card > .card-item[data-type='school'] .card-features > li.active {
  border-color: #9287f8;
  color: #9287f8;
}

.license-card > .card-item[data-type='standard']:hover {
  box-shadow: 0 0 0 3px #00c1c3;
}

.license-card > .card-item[data-type='premium']:hover {
  box-shadow: 0 0 0 3px #39adf7;
}

.license-card > .card-item[data-type='youtube']:hover {
  box-shadow: 0 0 0 3px #34ce66;
}

.license-card > .card-item[data-type='single']:hover {
  box-shadow: 0 0 0 3px #598cff;
}

.license-card > .card-item[data-type='school']:hover {
  box-shadow: 0 0 0 3px #9287f8;
}



.license-card > .card-item:hover .highlight {
  color: #006fd9;
}

.license-card > .card-item:hover .highlight:after {
  width: calc(100% + 6px);
}


.license-card > .card-item[data-type='standard'] .card-badge{
  background: #00c1c3;
}

.license-card > .card-item[data-type='premium'] .card-badge{
  background: #39adf7;
}

.license-card > .card-item[data-type='youtube'] .card-badge{
  background: #34ce66;
}

.license-card > .card-item[data-type='single'] .card-badge{
  background: #598cff;
}

.license-card > .card-item[data-type='school'] .card-badge{
  background: #9287f8;
}



/*========================================================
  LICENSE CARD - BADGE
=========================================================*/

.license-card .card-badge {
  height: 165px;
  width: 165px;
  border-radius: 165px;
  background: #00c1c3;
  margin: 20px auto 30px;
  color: #ffffff;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}


.license-card .card-badge > span {
  font-weight: 600;
  font-size: 19px;
  line-height: 18px;
  letter-spacing: -0.005em;
  text-align: center;
  margin-bottom: 10px;
}

.license-card .card-badge > h2 {
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 35px;
}

/*========================================================
  LICENSE CARD - RADIO
=========================================================*/

.license-card .card-radio {
  height: 20px;
  margin-bottom: 25px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.license-card .card-radio input[type='radio'] {
  display: none;
}

.license-card .card-radio input[type='radio'] + label {
  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  font-size: 15px;
  line-height: 14px;
  height: 20px;
  color: #36373b;
  letter-spacing: -0.025em;
  text-align: left;
  cursor: pointer;
}

/* 옵션 간 간격 */
.license-card .card-radio .card-month-1-2 {
  margin-left: 20px;
}


/* 라벨 내부(동그라미와 텍스트) 간격 */
.license-card .card-radio label > span {
  margin-right: 5px;
}

.license-card .card-radio input[type='radio'] + label span {
  height: 20px;
  width: 20px;
  border: 1px solid #36373b;
  border-radius: 20px;
  background: #ffffff;
}

.license-card .card-radio input[type='radio']:checked + label span::before {
  content: '';
  display: block;
  background: #36373b;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  box-sizing: border-box;
}

/*========================================================
  LICENSE CARD - FEATURES
=========================================================*/

.license-card .card-features {
  /* 구형 브라우저용: 그냥 block 리스트 */
  display: block;
}

.license-card .card-features > li {
  border: 1px solid #c2c2c2;
  color: #c2c2c2;
  width: 100%;
  height: 39px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* 세로 gap 3px 대체 */
.license-card .card-features > li:not(:first-child) {
  margin-top: 3px;
}

.license-card .card-features > li > img {
  margin-left: 10px;
  margin-right: 5px;
}

.license-card .card-features > li.active {
  border: 1px solid #c2c2c2;
  color: #c2c2c2;
}

/* 위에서 타입별로 border/color 재지정 */

/*========================================================
  LICENSE CARD - RECOMMEND
=========================================================*/

.license-card .card-recommend {
  margin: 25px 5px;
  width: 100%;
  height: 78px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.license-card .card-recommend > dt {
  font-weight: 700;
  font-size: 14px;
  line-height: 14px;
  color: #36373b;
  letter-spacing: -0.025em;
  text-align: left;
}

.license-card .card-recommend > dd {
  margin-top: 10px;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #858587;
  letter-spacing: -0.05em;
  text-align: left;
}

.license-card .card-line {
  border-top: 1px dashed #d1d1d1;
}

/*========================================================
  LICENSE CARD - PRICE
=========================================================*/

.license-card .card-price {
  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  margin: 25px auto;
}

.license-card .card-price-detail {
  /* 구형 브라우저: inline-block */
  display: inline-block;
  vertical-align: middle;
}

/* gap 12px 대체 */
.license-card .card-price-detail .order-price {
  margin-top: 15px;
}

.license-card .card-price-detail.card-discussion {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 28px;
  line-height:1em;
  height:26px;
  color: #36373b;
  letter-spacing: -0.05em;
  text-align: center;
  margin: 22px 0;
}

.license-card .card-discount {
  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.license-card .card-discount .discount-prc {
  font-family: 'Pretendard';
  font-weight: 400;
  line-height: 20px;
  font-size: 14px;
  color: #9c9ea4;
  letter-spacing: -0.025em;
  text-align: left;
  text-decoration: line-through;
}

.license-card .card-discount .discount-prc::after {
  content: '원';
  display: inline;
  font-size: 13px;
}

.license-card .card-discount .discount-pct {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  color: #ffffff;
  letter-spacing: -0.025em;
  text-align: center;
  background: #ff6b7b;
  border-radius: 20px;
  height: 24px;
  width: 69px;
  margin-left: 5px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.license-card .card-price .order-price {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 33px;
  line-height: 31px;
  height: 31px;
  color: #36373b;
  letter-spacing: -0.05em;
}

.license-card .card-price .order-price::after {
  content: '원';
  display: inline;
  font-weight: 400;
  letter-spacing: -0.025em;
  font-size: 18px;
}

/*========================================================
  LICENSE CARD - BUTTONS
=========================================================*/

.license-card .card-button {
  padding: 0 5px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* gap 5px 대체 */
.license-card .card-button button:not(:first-child) {
  margin-top: 5px;
}

.license-card .card-button button {
  width: 100%;
  height: 45px;
  border-radius: 21px;
  border: none;
  font-size: 15px;
  line-height: 12px;
  letter-spacing: -0.025em;
  text-align: center;
  cursor: pointer;
}

.license-card .card-button .card-estimate {
  box-shadow: 0 0 0 1px #36373b inset;
  color: #36373b;
  background: #ffffff;
  font-weight: 400;
}

.license-card .card-button .card-estimate:disabled {
  cursor: not-allowed;
  color: #c2c2c2;
  box-shadow: 0 0 0 1px #c2c2c2 inset;
}

.license-card .card-button .card-payment {
  color: #ffffff;
  background: #36373b;
  font-weight: 600;
}


.license-card > .card-item[data-type='standard'] .card-button .card-payment:hover{
  background: #00c1c3;
}

.license-card > .card-item[data-type='premium'] .card-button .card-payment:hover{
  background: #39adf7;
}

.license-card > .card-item[data-type='youtube'] .card-button .card-payment:hover{
  background: #34ce66;
}

.license-card > .card-item[data-type='single'] .card-button .card-payment:hover{
  background: #598cff;
}

.license-card > .card-item[data-type='school'] .card-button .card-payment:hover{
  background: #9287f8;
}



/*========================================================
  LICENSE CARD - PROVISION LINK
=========================================================*/

.license-card .card-provision {
  margin: 15px auto 20px;
  height: 15px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.license-card .card-provision > a {
  font-weight: 500;
  font-size: 13px;
  line-height: 14px;
  color: #5c5d62;
  letter-spacing: -0.025em;
  text-align: center;
  text-decoration: none;

  /* flexbox cross-browser: inline 수준 */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}


.license-card .card-provision > a > img {
  margin-top: 1px;
  margin-left:5px;
}

/*========================================================
  CUSTOMER AREA
=========================================================*/

.license-customer {
  padding: 0 0 100px;
  margin: 0 auto;
}

.license-customer .customer-list {
  margin: 0 auto;
  width: 1400px;
  height: 132px;
  padding: 0 60px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 25px #e9ecef;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* gap 70px 대체 */
.license-customer .customer-list li:not(:first-child) {
  margin-left: 70px;
}

.license-customer .customer-list li {
  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}



.license-customer .customer-counsel {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.license-customer .customer-counsel dl {
  margin: 37px 0 39px;
  width: 419px;
  height: 56px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.license-customer .customer-counsel dt {
  font-weight: 400;
  font-size: 16px;
  color: #36373b;
  letter-spacing: -0.05em;
  text-align: left;
  line-height: 16px;
}

.license-customer .customer-counsel dd {
  font-weight: 700;
  font-size: 28px;
  color: #36373b;
  letter-spacing: -0.05em;
  text-align: left;
  line-height: 27px;
}

.license-customer .customer-chat dl,
.license-customer .customer-call dl {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;

  padding: 9px 0 9px 13px;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* gap 10px 대체 */
.license-customer .customer-chat dl > dd,
.license-customer .customer-call dl > dd {
  margin-top: 10px;
}



.license-customer .customer-chat dt,
.license-customer .customer-call dt {
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  color: #36373b;
  letter-spacing: -0.05em;
  text-align: left;
}

.license-customer .customer-chat dd,
.license-customer .customer-call dd {
  font-weight: 400;
  font-size: 14px;
  line-height: 13px;
  color: #36373b;
  letter-spacing: -0.05em;
  text-align: left;
}

.license-customer .customer-call {
  margin: 38px 0 37px;
  width: 217px;
  height: 57px;
}

.license-customer .customer-chat {
  margin: 38px 0 37px;
  width: 261px;
  height: 57px;
}

.license-customer .customer-chat a {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;

  /* flexbox cross-browser */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  text-decoration: none;
}


/*========================================================
  TAB 상태에 따른 CUSTOMER LIST 크기 조정
=========================================================*/

.tab-item[data-tab='2'] .license-card > .card-item {
  width: 286px;
  height: 756px;
}

.tab-item[data-tab='2'] .license-card .card-recommend {
  height: 58px;
}

.tab-item[data-tab='2'] .license-card .card-features {
  height: 81px;
}

.tab-item {
  display: none;
}

.tab-item.active {
  display: block;
}


.license-customer[data-selecttab='2'] .customer-list {
  width: 1052px;
  padding: 37px 40px 39px;
}

.license-customer[data-selecttab='2'] .customer-list li:not(:first-child) {
  margin-left: 30px;
}

.license-customer[data-selecttab='2'] .customer-chat {
  width: 241px;
}