@charset "UTF-8";
@import url(./main.css);
@import url(./account.css);
@import url(./community.css);
@import url(./mypage.css);

/* #### ?�품?�개 #### */
.product__inner section {
  padding: 120px 0;
}

section.product__download {
  padding-top: 80px;
}

.tab--typeA {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}

.tab--typeA li {
  display: inline-block;
  padding: 0 16px;
  width: auto;
  height: 41px;
  border-radius: 100px;
  background-color: #F1F1F5;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #999;
  line-height: 41px;
}

.tab--typeA li.active {
  background-color: #111;
  color: #fff;
}

.tab--typeA li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 1.4;
}

.product__title {
  text-align: center;
}

.badge-type {
  display: inline-block;
  width: auto;
  padding: 0 16px;
  height: 34px;
  line-height: 34px;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
}

.product__title h2 {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 34px;
  font-weight: 700;
  color: #111;
}

.product__title p {
  line-height: 1.5;
  color: #333;
}

.product__download .download_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  gap: 24px;
}

.product__img {
  width: 100%;
  height: 720px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 40px;
}

.product__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manual__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.manual__list .manual__item {
  padding: 20px;
  background-color: #fff;
  border-radius: 16px;
  flex: 1;
}

.manual__item .manual_thum {
  display: inline-block;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.manual__item .manual_thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manual__item h3.manual_tit {
  margin: 16px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
}

.manual__item p {
  line-height: 1.5;
  color: #333;
  min-height: 72px;
}

.manual__item .btn_show_manual {
  height: 46px;
  line-height: 46px;
  font-weight: 600;
  margin-top: 24px;
}

.product-info__list {
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 80px;
}

.product-info__item {
  background-color: #fff;
  margin-bottom: 120px;
  border-radius: 16px;
}

.product-info__item:last-of-type {
  margin-bottom: 0;
}

.product-info__item>h3,
.product-info>h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
  margin-bottom: 24px;
}

.product-info__box {
  display: flex;
  gap: 40px;
}

.product-info__box .product-info {
  flex: 1.2;
  align-self: stretch;
}

.product-info__box .product-info p.product-info__cnts {
  margin-top: 16px;
  line-height: 1.5;
  color: #333;
}

.product-info__box .product__thum {
  flex: 1;
  border-radius: 16px;
  aspect-ratio: 4 / 2.8;
  overflow: hidden;
  align-self: stretch;
  background-color: #f4f4F4;
}

.product-info__box .product__thum img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.product-info__box .product__thum img.on {
  display: block;
}

.info-toggle__list .info-toggle__item {
  padding: 12px 0;
}

.info-toggle__list .info-toggle__item:first-child {
  padding-top: 0;
}

.info-toggle__item .info_tit {
  font-size: 20px;
  font-weight: 700;
  color: #999;
  position: relative;
  padding-left: 32px;
  line-height: 1.5;
  transition: 0.35s;
  cursor: pointer;
}

.info-toggle__item .info_tit::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.35s;
  background: url(/_img/icon/icon_toggle.svg) no-repeat center center / contain;
}

.info-toggle__item.open .info_tit {
  color: var(--color-brand);
}

.info-toggle__item.open .info_tit::before {
  transform: translateY(-50%) rotate(-90deg);
  background-image: url(/_img/icon/icon_toggle_on.svg);
}

.info-toggle__item .cnts {
  max-height: 0;
  overflow: hidden;
  background-color: #F7F7FB;
  border-radius: 0 8px 8px 8px;
  transition: max-height 0s;
}

.info-toggle__item .cnts p {
  line-height: 1.5;
  color: #333;
  padding: 16px;
}

.info-toggle__item.open .cnts {
  max-height: 300px;
  margin-top: 10px;
  transition: max-height 0.23s;
}

.product__etf .product-info__list {
  padding: 0;
  margin-top: 40px;
}

.product__etf .product-info {
  align-self: stretch;
  flex: 1;
  padding: 40px;
  border: 1px solid #F1F1F5;
  min-height: 470px;
  border-radius: 12px;
}

.product__etf .product__thum {
  align-self: stretch;
  padding: 0px 16px;
  border: 1px solid #F1F1F5;
  border-radius: 12px;
  height: 485px;
}

.product__etf .product__thum img {
  border-radius: 12px;
}

.product__etf .info-toggle__item {
  padding: 18px 20px;
}

.product__etf .info-toggle__list .info-toggle__item:first-child {
  padding-top: 18px;
}

.product__etf .info-toggle__item.open {
  background-color: #F8F8FA;
  border-radius: 8px;
}

.product__etf .thum_wrap {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

.product__etf .info-toggle__item .info_tit {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding-left: 0;
  color: #000;
}

.product__etf .info-toggle__item .info_tit::before {
  content: none;
}

.product__etf .info-toggle__item.open .info_tit {
  color: #000;
}

.product__etf .info-toggle__item .cnts p {
  padding: 0;
}

.product__flex {
  display: flex;
  gap: 40px;
}

.product__flex .product__inner {
  flex: 1;
}

.simulation__inner {
  overflow: hidden;
}

.simulation__inner .product__img {
  height: 480px;
}

.simulation__inner .product__download {
  padding-top: 80px;
  padding-bottom: 80px;
}

.simulation__inner .product__info {
  padding-top: 80px;
  padding-bottom: 120px;
}

.simulation__inner .product-info__item:not(:last-child) {
  margin-bottom: 80px;
}

.simulation__inner .product-info__box .product__thum {
  height: 330px;
}

.product__info.bg_gray .product-info__item .product__thum {
  aspect-ratio: 4 / 3.8;
}

.product__info.bg_gray .product-info__box {
  margin-bottom: 0;
}

.product__info.bg_gray .product-info__item {
  padding: 32px;
}

.product-info__item.type2 .product-info__box {
  align-items: center;
}

.product-info__item.type2 .product-info__box .product-info {
  align-self: initial;
}

.product__notice {
  margin-top: 40px;
}

.product__notice h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: #111;
}

.product__notice .notice__box {
  margin-top: 8px;
  background-color: #F7F7FB;
  border-radius: 12px;
  padding: 16px 20px;
}

.product__notice .notice__box p {
  line-height: 1.6;
  color: #333;
}

.product__purchase {
  position: sticky;
  top: 200px;
  align-self: baseline;
  width: 405px;
  flex-shrink: 0;
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 120px;
  background-color: #fff;
  box-shadow: 0 0 20px rgb(0, 0, 0, 0.1);
}

.purchase_mo_btn {
  display: none;
}

.purchase__content {
  position: relative;
}

.btn_share_hidden {
  visibility: hidden;
  display: none;
}

.product__purchase .btn_share {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(/_img/icon/icon_share.svg) no-repeat center / contain;
}

.product__purchase .purchase__title {
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F1F5;
  margin-bottom: 16px;
}

.product__purchase .purchase__title h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #111;
  font-weight: 600;
  margin-bottom: 4px;
}

.product__purchase .purchase__title p {
  line-height: 1.5;
  padding-right: 24px;
  outline-color: #333;
}

.purchase__price h4 {
  font-weight: 600;
  color: #111;
  line-height: 1.5;
}

.purchase__price h4 span {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #767676;
}

.purchase__price .price__list {
  margin-top: 12px;
}

.purchase__price .price__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.purchase__price .price__list li:last-child {
  margin-bottom: 0;
}

.purchase__price .price__list li span.period,
.purchase__price .price__list li p.price {
  line-height: 1.5;
  color: #333;
}

.purchase__btns {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.purchase__btns .btn_history {
  width: 93px;
  flex-shrink: 0;
}

.purchase__btns .btn_brand {
  flex: 1;
}

.purchase__inner {
  padding: 120px 20px;
}

.form_purchase {
  max-width: 600px;
  margin: 0 auto
}

.form_purchase h2 {
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  color: #111;
}

.purchase__notice {
  margin-top: 40px;
}

.purchase__notice h3 {
  font-size: 24px;
  font-weight: 600;
  color: #111;
}

.purchase__notice .notice__box {
  margin-top: 20px;
  border-radius: 12px;
  background-color: #F7F7FB;
  padding: 16px 20px;
}

.purchase__notice .notice__box p {
  line-height: 1.6;
  color: #333;
}

.purchase__agree {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.purchase__agree .btn_show_agree {
  width: auto;
  padding: 0 24px;
  height: 46px;
  line-height: 46px;
  background-color: #fff;
  border: 1px solid #111;
  color: #111;
  font-weight: 600;
  border-radius: 8px;
}

.purchase__info {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #F1F1F5;
}

.purchase__info h3 {
  font-size: 24px;
  font-weight: 600;
  color: #111;
  line-height: 1.5;
  margin-bottom: 20px;
}

.purchase__price {
  margin: 40px 0;
  border-radius: 12px;
  background-color: #F7F7FB;
  padding: 16px 20px;
}

.purchase__price .item__info h5 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.purchase__price .item-info__price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-top: 8px;
  margin-bottom: 40px;
}

.purchase__price .item-info__price p {
  font-size: 18px;
  color: #111;
}

.purchase__price .item-info__price p.price {
  flex-shrink: 0;
}

.item-total__price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-total__price p {
  font-size: 28px;
  font-weight: 700;
  color: #111;
}

.item-total__price h2 {
  font-size: 28px;
}

.purchase__btn {
  margin-top: 40px;
}

/* ?�료?�이지 */
.purchase-complete__inner {
  padding: 0 20px;
  padding-top: 80px;
  padding-bottom: 120px;
}

.purchase-complete {
  max-width: 600px;
  margin: 0 auto;
}

.p-complte_title {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #F1F1F5;
}

.p-complte_title h3 {
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  color: #111;
}

.p-complete_contents h5 {
  font-size: 24px;
  font-weight: 600;
  color: #111;
}

.p-complete_infos {
  margin-top: 20px;
  padding: 24px;
  border-radius: 12px;
  background-color: #F7F7FB;
}

.p-complete_infos li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding: 5px 0;
}

.p-complete_infos li span.info_tit {
  display: inline-block;
  width: 64px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.p-complete_infos li .info_cnts {
  font-weight: 500;
  color: #111;
  line-height: 1.6;
}

.p-complete_infos .complete_result {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-complete_infos .complete_result .btn_receipt {
  height: 36px;
  line-height: 36px;
}

.purchase-complete .btn_area .btn {
  width: 100%;
}

/* ?�용?��? */
.term__inner {
  padding: 120px 0;
}

.term__header {
  text-align: center;
  margin-bottom: 40px;
}

.term__header .logo {
  width: 133px;
  height: 28px;
}

.term__header h2 {
  margin-top: 20px;
  font-size: 34px;
  font-weight: 700;
  color: #111;
}

.term__content {
  background-color: #F7F7FB;
  padding: 40px;
  padding-right: 16px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1.6;
}

.term__content .term_wrap {
  overflow-y: auto;
  height: 45vh;
}

.term__content .term_wrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.term__content p {
  font-size: 18px;
  line-height: 1.6;
}

.term__btns {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.term__btns .btn {
  width: 100%;
  max-width: 560px;
}

@media screen and (min-width: 768px) and (max-width:1440px) {
  .manual__list {
    flex-wrap: wrap;
  }

  .manual__list .manual__item {
    min-width: 246px;
  }
}

@media screen and (max-width:1200px) {
  .product__purchase {
    position: fixed;
    bottom: 0;
    left: 0;
    top: auto;
    width: 100%;
    padding: 20px;
    z-index: 100;
    margin-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 0 20px rgb(0, 0, 0, 0.2);
  }

  .purchase_mo_btn {
    display: block;
    width: 100%;
    height: 16px;
    background: url(/_img/icon/icon_purchase_btn.svg) no-repeat center center / 16px 8px;
  }

  .purchase__content {
    display: none;
  }

  .product__purchase.open .purchase__content {
    display: block;
  }

  .product__purchase.open .purchase_mo_btn {
    transform: scaleY(-1);
  }

  .product__purchase .purchase__title {
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .product__purchase .purchase__title h3 {
    font-size: 18px;
  }

  .product__purchase .purchase__title p {
    font-size: 14px;
    padding-right: 20px;
  }

  .purchase__price h4 {
    font-size: 14px;
  }

  .purchase__price h4 span {
    font-size: 12px;
  }

  .purchase__price .price__list {
    margin-top: 8px;
  }

  .purchase__price .price__list li {
    margin-bottom: 4px;
  }

  .purchase__price .price__list li span.period,
  .purchase__price .price__list li p.price {
    font-size: 14px;
  }

  .purchase__btns {
    margin-top: 20px;
  }

  .purchase__btns .btn {
    height: 46px;
    line-height: 46px;
  }

  .purchase__btns .btn_history {
    width: 87px;
  }
}

@media screen and (max-width:767px) {
  .product__inner section {
    padding: 40px 0;
  }

  .tab--typeA {
    gap: 4px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .tab--typeA li {
    height: 36px;
    padding: 4px 11px;
    font-size: 14px;
  }

  .tab--typeA li a {
    line-height: 1.2;
  }

  .tab--typeA.domestic li {
    flex: 1;
  }

  .product__title .badge-type {
    height: 25px;
    line-height: 25px;
    font-size: 12px;
  }

  .product__title h2 {
    font-size: 20px;
  }

  .product__title p {
    font-size: 14px;
  }

  .product__download .download_btns {
    margin-top: 20px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .product__download .download_btns .btn {
    min-width: 98px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    line-height: 1.4;
    height: 60px;
    font-size: 14px;
    padding: 0 8px;
  }

  .download_btns.overseas .btn {
    height: 40px;
  }

  .product__img {
    margin-top: 20px;
    height: auto;
    border-radius: 8px;
  }

  .manual__list {
    flex-direction: column;
    row-gap: 20px;
  }

  .manual__list .manual__item {
    width: 100%;
    flex: none;
  }

  .manual__item .manual_thum {
    width: 40px;
    height: 40px;
  }

  .manual__item h3.manual_tit {
    margin: 8px 0;
    font-size: 18px;
  }

  .manual__item p {
    min-height: 48px;
  }

  .manual__item .btn_show_manual {
    height: 40px;
    line-height: 40px;
    margin-top: 16px;
  }

  .product-info__list {
    margin-top: 20px;
  }

  .product-info__box {
    flex-direction: column-reverse;
    gap: 20px;
    padding: 0;
    margin-bottom: 40px;
  }

  .product-info__item {
    margin-bottom: 40px;
  }

  .product-info__item:nth-child(2n) .product-info__box {
    flex-direction: column;
  }

  .product-info__item .product-info {
    flex: none;
    align-self: initial;
  }

  .product-info__item>h3,
  .product-info>h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .product-info__item .product__thum {
    flex: none;
    align-self: initial;
    height: auto;
    width: 100%;
  }

  .info-toggle__list .info-toggle__item {
    padding: 8px 0;
  }

  .info-toggle__item .info_tit {
    font-size: 18px;
  }

  .info-toggle__item .cnts p {
    padding: 8px;
    font-size: 14px;
  }

  .product__etf .product-info__list {
    margin-top: 20px;
  }

  .product__etf .product-info {
    flex: none;
    min-height: 120px;
    padding: 12px;
  }

  .product__etf .product-info__item .product-info h3 {
    margin-bottom: 8px;
  }

  .product__etf .product__thum {
    padding: 12px;
  }

  .product__etf .info-toggle__item {
    padding: 12px;
  }

  .product__info.bg_gray .product-info__item {
    padding: 12px;
  }

  .product__info.bg_gray .product-info__item .product__thum {
    aspect-ratio: 4 / 2.5;
  }

  .product__flex {
    gap: 0;
  }

  .simulation__inner .product__img {
    height: auto;
  }

  .simulation__inner .product__download {
    padding: 40px 0;
  }

  .simulation__inner .product__info {
    padding: 40px 0;
  }

  .simulation__inner .product__download .download_btns .btn {
    height: 40px;
  }

  .simulation__inner .product-info__box {
    flex-direction: column;
  }

  .simulation__inner .product-info__box.mo_reverse,
  .simulation__inner .product-info__item:nth-child(2n) .product-info__box {
    flex-direction: column-reverse;
  }

  .simulation__inner .product-info__item:not(:last-child) {
    margin-bottom: 40px;
  }

  .simulation__inner .product-info__box .product__thum {
    height: auto;
  }

  .product__notice h3 {
    font-size: 18px;
  }

  .product__notice .notice__box {
    padding: 8px;
  }

  .product__notice .notice__box p {
    font-size: 14px;
  }

  .purchase__inner {
    padding: 40px 20px;
  }

  .form_purchase h2 {
    font-size: 20px;
  }

  .purchase__notice {
    margin-top: 20px;
  }

  .purchase__notice h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .purchase__notice .notice__box {
    margin-top: 8px;
    padding: 12px 8px;
  }

  .purchase__notice .notice__box p {
    font-size: 14px;
  }

  .purchase__agree {
    margin-top: 8px;
  }

  .purchase__agree .btn_show_agree {
    height: 40px;
    line-height: 40px;
  }

  .purchase__info {
    margin-top: 20px;
    padding-top: 20px;
  }

  .purchase__info h3 {
    font-size: 18px;
  }

  .purchase__info h3.mt40 {
    margin-top: 20px;
  }

  .purchase__price {
    margin: 20px 0;
    padding: 12px 8px;
  }

  .purchase__price .item__info h5 {
    font-size: 16px;
  }

  .purchase__price .item-info__price {
    margin: 12px 0;
  }

  .purchase__price .item-info__price p {
    font-size: 16px;
  }

  .item-total__price p {
    font-size: 18px;
  }

  .item-total__price h2 {
    font-size: 18px;
  }

  .purchase__btn {
    margin-top: 20px;
  }

  .purchase__btn .btn {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
  }

  .purchase-complete__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .p-complte_title {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .p-complte_title h3 {
    font-size: 20px;
  }

  .p-complete_contents h5 {
    font-size: 18px;
  }

  .p-complete_infos {
    margin-top: 8px;
    padding: 12px;
  }

  .p-complete_infos li {
    padding: 7px 0;
  }

  .p-complete_infos li span.info_tit {
    width: 56px;
    font-size: 14px;
  }

  .p-complete_infos li .info_cnts {
    font-size: 14px;
  }

  .purchase-complete .btn_area {
    margin-top: 8px;
  }

  .purchase-complete .btn_area .btn {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
  }

  /* ?�용?��? */
  .term__inner {
    padding: 40px 0;
  }

  .term__header {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F1F1F5;
  }

  .term__header .logo {
    width: 85px;
    height: 18px;
  }

  .term__header h2 {
    margin-top: 8px;
    font-size: 20px;
  }

  .term__content {
    padding: 8px;
    padding-right: 0;
    font-size: 14px;
  }

  .term__content .term_wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .term__content p {
    font-size: 14px;
  }

  .term__btns {
    margin-bottom: 20px;
  }

  .term__btns .btn {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
  }
}

/* #### 주요기능 #### */
.function__inner {
  padding-top: 80px;
  padding-bottom: 93px;
}

.function__title .tab--typeA {
  margin-top: 32px;
}

.function_layout {
  margin-top: 32px;
  display: flex;
  gap: 40px;
}

.function_layout img {
  vertical-align: middle;
}

.function_content {
  flex: 1;
}

.function_box {
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  scroll-margin-top: 160px;
}

.function_box:last-child {
  margin-bottom: 0;
}

.function_box p {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
}

.function_box h3.depth1_title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.35;
  padding-left: 32px;
  position: relative;
  margin-bottom: 24px;
}

.function_box h3.depth1_title::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/_img/manual/icon/icon_blue_arrow.svg) no-repeat center / contain;
}

.function_depth2_box:not(:last-child) {
  margin-bottom: 24px;
}

.function_depth2_box {
  scroll-margin-top: 160px;
}

.function_depth2_box h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
}

.function_depth2_box h4 img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.function_box .img_box {
  margin-top: 12px;
  margin-bottom: 12px;
  max-width: 100%;
}

.function_box .btn_download {
  display: inline-flex;
  width: auto;
  align-items: center;
  padding: 0 20px;
}

.function_content .btn_area {
  margin-top: 32px;
}

.function_content .btn_go {
  border: 1px solid #111111;
}

.function_content .explaination_info {
  padding: 24px 28px;
  background-color: #EBEDF3;
  max-width: 1400px;
  border-radius: 8px;
  margin-top: 12px;
}

.function_content span.function_badge {
  display: inline-block;
  margin-bottom: 4px;
  width: auto;
  padding: 0 16px;
  height: 28px;
  line-height: 28px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
}

.function_float {
  width: 240px;
  position: sticky;
  top: 152px;
  right: 0;
  padding: 24px;
  padding-right: 8px;
  height: min-content;
  border-radius: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.1);
}

.function_float .float_menu {
  max-height: calc(100dvh - 240px);
  overflow-y: auto;
}

.float_menu .float_1depth:not(:last-child) {
  margin-bottom: 16px;
}

.float_menu .depth1_link {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}

.float_menu .depth1_link.active {
  color: var(--color-brand);
}

.float_menu .float_2detph {
  padding-left: 16px;
}

.float_menu .float_2detph li:not(:last-child) {
  margin-bottom: 8px;
}

.float_menu .float_2detph .depth2_link {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

.float_menu .float_2detph .depth2_link.active {
  color: var(--color-brand);
}

@media screen and (max-width:820px) {
  .function_float {
    display: none;
  }
}

@media screen and (max-width:767px) {
  .function__inner {
    padding: 40px 0;
  }

  .function__title .tab--typeA {
    margin-top: 20px;
  }

  .function__title .tab--typeA li {
    flex: 1;
    min-width: 145px;
  }

  .function_layout {
    margin-top: 20px;
  }

  .function_box {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .function_box p {
    font-size: 14px;
  }

  .function_box h3.depth1_title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .function_box h3.depth1_title::before {
    width: 20px;
    height: 20px;
  }

  .function_depth2_box h4 {
    font-size: 14px;
  }

  .function_depth2_box h4 img {
    width: 20px;
    height: 20px;
  }

  .function_content .explaination_info {
    padding: 16px;
  }

  .function_content .explaination_info p {
    font-size: 12px;
  }

  .function_box .btn_download {
    height: 48px;
    font-size: 16px;
  }

  .function_content .btn_area {
    margin-top: 20px;
  }

  .function_content .btn_go {
    justify-content: center;
    width: 100%;
    height: 48px;
  }

  .function_content .btn_go span {
    font-size: 16px;
  }
}

/* #### 강의??#### */
.classroom__inner {
  padding-top: 40px;
}

.classroom__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px 24px;
  margin-top: 40px;
}

.classroom__list .classroom__item {
  width: calc((100% / 3) - 24px);
}

.classroom__item .classroom_thum {
  width: 100%;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
}

.classroom__item .classroom_thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.classroom__item .classroom_desc {
  margin-top: 16px;
}

.classroom__item .classroom_desc h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  line-height: 1.4;
  height: 25px;
}

.classroom__item .classroom_desc p {
  font-size: 16px;
  line-height: 1.5;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  line-height: 1.5;
  height: 48px;
  margin-bottom: 8px;
}

.reg_yesstock {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reg_yesstock img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
}

.reg_yesstock span {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.classroom__item.row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.classroom__item.row .classroom_thum {
  height: 360px;
  flex: 1;
}

.classroom__item.row .classroom_desc {
  flex: 1;
}

.classroom__item.row .classroom_desc h3 {
  font-size: 24px;
  height: 34px;
}

.classroom__item.row .classroom_desc p {
  overflow: visible;
  text-overflow: initial;
  height: auto;
  display: block;
}

.class-dtl__thum {
  width: 100%;
  height: 560px;
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
}

.class-dtl__thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.class-dtl__iframe {
  width: 100%;
  height: 558.99px;
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
}

.class-dtl__iframe iframe {
  width: 100% !important;
  height: 100% !important;
}

.class-dtl__cnts {
  margin-bottom: 40px;
}

.class-dtl__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E5E5EC;
}

.class-dtl__info h2 {
  font-size: 28px;
  font-weight: 700;
  color: #111;
}

.class-dtl__cnts .cnts {
  margin-top: 32px;
  line-height: 1.7;
  font-size: 18px;
}

.class-dtl__cnts .cnts * {
  line-height: 1.7;
}

.class-dtl__cnts .cnts p {
  line-height: 1.7;
  font-size: 18px;
}

.class-dtl__cnts .cnts h3 {
  font-size: 22px;
  font-weight: 700;
}

.class-dtl__cnts .cnts .link {
  text-decoration: underline;
}

.class-dtl__cnts .cnts .img_box {
  margin-top: 12px;
  margin-bottom: 24px;
  max-width: 100%;
}

.class-dtl__cnts .cnts .img_box.center {
  text-align: center;
}

.class-dtl__cnts .cnts .explaination_info {
  padding: 24px 28px;
  background-color: #EBEDF3;
  max-width: 1400px;
  border-radius: 8px;
  margin-top: 12px;
  margin-bottom: 24px;
}

.class-dtl__cnts .tbl--typeA {
  min-width: 1102px;
  width: 100%;
}

.class-dtl__cnts .tbl--typeA tbody th,
.class-dtl__cnts .tbl--typeA tbody td {
  border-bottom: 1px solid #E5E5EC;
  padding: 4px 12px;
  word-break: keep-all;
}

.class-dtl__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid #F1F1F5;
}

.class-dtl__btns .btn {
  width: 100px;
}

/* 태블릿 미디어 쿼리 */
@media screen and (min-width: 768px) and (max-width:1200px) {
  .class-dtl__iframe {
    height: 250px;
    margin-bottom: 32px;
  }

  .class-dtl__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .class-dtl__info h2 {
    font-size: 12px;
  }
}

@media screen and (max-width:767px) {
  .classroom__inner {
    padding-top: 20px;
  }

  .class-dtl__iframe {
    height: 250px;
    margin-bottom: 24px;
    border-radius: 12px;
  }

  .class-dtl__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
  }

  .class-dtl__info h2 {
    font-size: 20px;
    line-height: 1.4;
  }

  .class-dtl__cnts .cnts {
    margin-top: 24px;
    font-size: 16px;
  }

  .class-dtl__btns .btn {
    width: 100%;
    padding: 16px;
  }

  .classroom__list {
    margin-top: 20px;
    flex-direction: column;
    gap: 20px;
  }

  .classroom__list .classroom__item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  .classroom__item .classroom_thum {
    width: 154px;
    height: 104px;
    flex-shrink: 0;
  }

  .classroom__item .classroom_desc h3 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    height: auto;
    font-size: 16px;
  }

  .classroom__item .classroom_desc {
    margin-top: 8px;
    flex: 1;
    width: 100%;
  }

  .classroom__item .classroom_desc p {
    display: none;
  }

  .reg_yesstock img {
    width: 24px;
    height: 24px;
  }

  .reg_yesstock span {
    font-size: 14px;
  }

  .classroom__item.row {
    flex-direction: column;
    gap: 12px;
  }

  .classroom__item.row .classroom_thum {
    width: 100%;
    height: 218px;
    flex: none;
  }

  .classroom__item.row .classroom_desc h3 {
    font-size: 18px;
    height: 25px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .classroom__item.row .classroom_desc {
    margin-top: 0;
  }

  .classroom__item.row .classroom_desc p {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 42px;
  }

  .class-dtl__thum {
    height: 218px;

  }

  .class-dtl__cnts {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .class-dtl__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 12px;
  }

  .class-dtl__info h2 {
    font-size: 18px;
  }

  .class-dtl__cnts .cnts {
    margin-top: 20px;
    font-size: 16px;
  }

  .class-dtl__cnts .cnts h3 {
    font-size: 20px;
  }

  .class-dtl__cnts .cnts p {
    font-size: 16px;
  }

  .class-dtl__cnts .tbl--typeA {
    min-width: 500px;
  }

  .class-dtl__cnts .tbl--typeA tbody th,
  .class-dtl__cnts .tbl--typeA tbody td {
    font-size: 14px;
  }

  .class-dtl__btns {
    padding: 20px;
  }

  .class-dtl__btns .btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
  }
}

/* #### 매매?�호 #### */
.analysis__inner {
  overflow: hidden;
}

.analysis__inner section {
  padding: 120px 0;
}

section.section_analysis {
  padding-top: 80px;
  background-color: #F5F7FC;
}

.analysis__title {
  text-align: center;
  margin-bottom: 40px;
}

.analysis__title .badge-type {
  margin-bottom: 8px;
}

.form_search_analysis {
  max-width: 560px;
  margin: 0 auto;
  margin-top: 40px;
}

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

.form_search_analysis .input_analysis .form-control {
  height: 48px;
}

.form_search_analysis .input_analysis .btn_search {
  height: 48px;
  line-height: 48px;
  width: 100px;
}

.section_analysis .analysis__img {
  width: 100%;
  margin-top: 40px;
  height: 720px;
  border-radius: 12px;
  overflow: hidden;
}

.section_analysis .analysis__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section_system .reason__list {
  max-width: 100%;
}

.section_system .reason__list .reason__item {
  width: calc((100% / 3) - 24px);
  background-color: #F1F1F5;
  min-width: 300px;
}

.section_system .reason__list .reason__item p,
.service__affiliate .reason__list .reason__item p {
  min-height: auto;
}

.section_direction .example-review__list {
  max-width: 1080px;
  margin: 0 auto;
  margin-top: 80px;
}

/* 매매?�호 > 공통 ?�세?�이지 */
.stock-dtl__inner {
  padding-top: 80px;
  padding-bottom: 120px;
}

.stock-dtl__inner .container {
  max-width: 1120px;
}

.stock-dtl__title {
  padding-bottom: 40px;
  border-bottom: 1px solid #F1F1F5;
}

.stock-dtl__title h2.title {
  text-align: left;
}

.stock-dtl__inner .form_search_analysis {
  margin: 40px 0;
}

.stock-dtl__table .dtl-table__info h2.stock_name {
  text-align: left;
}

.stock-dtl__table .stock-date_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  color: #767676;
}

.dtl-table__info .tbl_signal_dtl table {
  /* table-layout: auto; */
}

.dtl-table__info .tbl_signal_dtl th,
.dtl-table__info .tbl_signal_dtl td {
  padding: 0 9px;
}

.mo-dtl-table__info {
  padding-bottom: 20px;
}

.mo-dtl-table__info .mo-stock-info__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mo-dtl-table__info .mo-stock-info h3.stock_name {
  font-size: 20px;
  font-weight: 600;
}

.mo-dtl-table__info .mo-stock-info p {
  font-size: 14px;
  color: #767676;
}

.mo-dtl-table__info .mo-stock-info h1 {
  margin-top: 4px;
  margin-bottom: 2px;
  font-size: 28px;
  font-weight: 700;
}

.mo-dtl-table__info .mo-stock-info p.status {
  font-size: 16px;
}

.mo-stock_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mo-stock_list li:last-child {
  margin-bottom: 0;
}

.mo-stock_list li span.mo-stock_label {
  font-size: 14px;
  color: #505050;
}

.mo-stock-info__tbl {
  margin-top: 20px;
}

.mo-stock-info_ul {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #E5E5EC;
}

.mo-stock-info_ul:first-child {
  border-top: 1px solid #E5E5EC;
}

.mo-stock-info_ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 11px 0;
}

.mo-stock-info_ul li span {
  font-size: 14px;
  color: #505050;
}

.mo-stock-info_ul li b {
  font-weight: 500;
  font-size: 16px;
  color: #111;
}

.mo-stock_wave {
  margin-top: 20px;
}

.mo-stock_wave .wave_tit p {
  font-size: 14px;
  color: #505050;
  margin-bottom: 4px;
}

.mo-stock_wave .wave_tit h1 {
  font-size: 24px;
  font-weight: 700;
}

.mo-stock_wave .wave_tit span.contrast {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}

.mo-stock_wave .wave_chart {
  width: 100%;
  height: 150px;
  margin-top: 20px;
}

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

.stock-dtl__tabs .tabs__link {
  display: inline-block;
  width: auto;
  height: 41px;
  line-height: 41px;
  color: #999;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 100px;
  background-color: #F1F1F5;
}

.stock-dtl__tabs .tabs__link.on {
  background-color: #111;
  color: #fff;
}

.daily-weekly__tab {
  margin-top: 40px;
}

.daily-weekly-tab__content {
  margin-top: 20px;
  display: none;
}

.daily-weekly-tab__content.on {
  display: block;
}

.daily-weekly__img {
  width: 100%;
  height: auto;
  min-height: 925px;
}

.daily-weekly__img img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.system-info__tab {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #111111;
}

.stock_primary {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 40px;
}

.stock_primary h2 {
  font-size: 24px;
  font-weight: 600;
  color: #111;
}

.system-tab__content {
  display: none;
  margin-top: 20px;
}

.system-tab__content.on {
  display: block;
}

.system-tab__content .tbl_signal_dtl thead th,
.system-tab__content .tbl_signal_dtl tbody th,
.system-tab__content .tbl_signal_dtl tbody td {
  padding: 0 19px;
}

/* .wave_chart canvas {
  width: 150px !important;
  height: 80px !important;
} */
/* ?�호발생종목 */
.generation__inner {
  padding-top: 80px;
  padding-bottom: 120px;
}

.signal-tab {
  margin-top: 40px;
}

.signal-tab .tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.signal-tab .tabs .tabs__link {
  display: inline-block;
  width: 200px;
  height: 49px;
  line-height: 49px;
  border-radius: 8px;
  background-color: #F1F1F5;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: #999;
}

.signal-tab .tabs .tabs__link.on {
  background-color: #111;
  color: #fff;
}

.signal-tab__content {
  display: none;
}

.signal-tab__content.on {
  display: block;
}

.signal__table {
  margin-top: 40px;
}

.tbl_signal .btn_sort span {
  padding-right: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  position: relative;
}

.tbl_signal .btn_sort.up span::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 7px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/_img/icon/icon_gnb_arrow.svg) no-repeat center center / contain;
}

.tbl_signal .title:hover {
  font-weight: 600;
  color: var(--color-brand);
}

.stock_red {
  color: #FF0000;
  font-weight: 500;
  line-height: 1.4;
}

.stock_blue {
  color: var(--color-brand);
  font-weight: 500;
  line-height: 1.4;
}

.signal_badge {
  display: inline-block;
  width: auto;
  padding: 0 8px;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  background-color: #E9EAF2;
  color: #555;
}

.signal_badge.round {
  height: 38px;
  line-height: 38px;
  border-radius: 800px;
  padding: 0 10px;
}

.signal_badge em {
  padding-left: 16px;
  font-style: normal;
  position: relative;
}

.signal_badge.buy_up {
  background-color: #E92929;
  color: #fff;
}

.signal_badge.buy_up em:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 6px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/_img/icon/icon_arrow_up_white.svg) no-repeat center / contain;
}

.signal_badge.buy_remain {
  background-color: #FDEAEA;
  color: #E92929;
}

.signal_badge.buy_remain em::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/_img/icon/icon_buy_remain.svg) no-repeat center / contain;
}

.signal_badge.sell_remain {
  background-color: #E9F1FD;
  color: #2470EB;
}

.signal_badge.sell_remain em::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/_img/icon/icon_sell_remain.svg) no-repeat center / contain;
}

.signal_badge.sell_down {
  background-color: #2470EB;
  color: #fff;
}

.signal_badge.sell_down em:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 6px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/_img/icon/icon_arrow_down_white.svg) no-repeat center / contain;
}

/* ?�익�??�위종목 */
.top-profit__inner {
  padding-top: 80px;
  padding-bottom: 120px;
}

.top-profit-dtl__inner {
  padding-top: 80px;
  padding-bottom: 120px;
}

.top-profit-dtl__inner .container {
  max-width: 1120px;
}

.profit-tab .tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profit-tab .tabs .tabs__link {
  display: inline-block;
  width: auto;
  height: 38px;
  line-height: 38px;
  border-radius: 100px;
  background-color: #F1F1F5;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  padding: 0 16px;
  cursor: pointer;
}

.profit-tab .tabs .tabs__link.on {
  background-color: #111111;
  color: #fff;
}

.profit-dtl__image {
  width: 100%;
  min-height: 925px;
}

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

.tbl_signal_dtl {
  margin-top: 40px;
  border-bottom: 1px solid #111;
}

.tbl_signal_dtl table:before {
  height: 1px;
}

.tbl_signal_dtl thead th,
.tbl_signal_dtl tbody th,
.tbl_signal_dtl tbody td {
  border: 1px solid #E5E5EC;
}

.tbl_signal_dtl thead th:nth-child(1),
.tbl_signal_dtl tbody th:nth-child(1),
.tbl_signal_dtl tbody td:nth-child(1) {
  border-left: none;
}

.tbl_signal_dtl thead th:last-child,
.tbl_signal_dtl tbody th:last-child,
.tbl_signal_dtl tbody td:last-child {
  border-right: none;
}

.profit-tab__content {
  margin-top: 20px;
  display: none;
}

.profit-tab__content.on {
  display: block;
}

@media screen and (max-width:767px) {
  .analysis__inner section {
    padding: 40px 0;
  }

  .form_search_analysis {
    margin-top: 20px;
  }

  .analysis__title {
    margin-bottom: 20px;
  }

  .form_search_analysis .input_analysis {
    flex-direction: column;
    align-items: flex-start;
  }

  .form_search_analysis .input_analysis .btn_search {
    width: 100%;
  }

  .section_analysis .analysis__img {
    height: 140px;
  }

  .section_system .reason__list .reason__item {
    width: 100%;
  }

  .section_direction .example-review__list .thum {
    aspect-ratio: 8 / 5;
  }

  .signal__table {
    margin-top: 20px;
  }

  /* 매매?�호 > 공통 ?�세?�이지 */
  .stock-dtl__inner {
    padding: 40px 0;
  }

  .stock-dtl__title {
    display: none;
  }

  .stock-dtl__inner .form_search_analysis {
    display: none;
  }

  .daily-weekly__tab {
    display: none;
  }

  .stock-dtl__tabs .tabs__link {
    height: 38px;
    line-height: 38px;
    font-size: 16px;
  }

  .stock-dtl__info {
    border-top: 6px solid #F1F1F5;
  }

  .stock_primary {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 6px solid #F1F1F5;
  }

  .stock_primary h2 {
    font-size: 18px;
  }

  /* ?�호발생종목 */
  .generation__inner {
    padding: 40px 0;
  }

  .signal-tab {
    margin-top: 20px;
  }

  .signal-tab .tabs {
    gap: 8px;
  }

  .signal-tab .tabs .tabs__link {
    width: 100%;
    flex: 1;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
  }

  /* ?�익�??�위종목 */
  .top-profit__inner {
    padding: 40px 0;
  }

  .top-profit-dtl__inner {
    padding: 40px 0;
  }

  .top-profit-dtl__inner .table__top {
    row-gap: 20px;
  }

  .profit-dtl__image {
    min-height: 150px;
  }

  .tbl_signal_dtl {
    margin-top: 20px;
  }

  .tbl_signal colgroup col:nth-child(1),
  .tbl_signal thead th:nth-child(1),
  .tbl_signal tbody td:nth-child(1) {
    display: none;
  }

  .tbl_signal colgroup col:nth-child(3),
  .tbl_signal thead th:nth-child(3),
  .tbl_signal tbody td:nth-child(3) {
    display: none;
  }

  .tbl_signal colgroup col:nth-child(4),
  .tbl_signal thead th:nth-child(4),
  .tbl_signal tbody td:nth-child(4) {
    display: none;
  }

  .tbl_signal colgroup col:nth-child(6),
  .tbl_signal thead th:nth-child(6),
  .tbl_signal tbody td:nth-child(6) {
    display: none;
  }

  .tbl_signal colgroup col:nth-child(7),
  .tbl_signal thead th:nth-child(7),
  .tbl_signal tbody td:nth-child(7) {
    display: none;
  }

  .tbl_signal colgroup col:nth-child(8),
  .tbl_signal thead th:nth-child(8),
  .tbl_signal tbody td:nth-child(8) {
    display: none;
  }
}

/* #### 고객?��? #### */
.example__inner {
  overflow: hidden;
}

.example__inner section {
  padding: 120px 0;
}

section.example__intro {
  padding-top: 80px;
  background-color: #CED8F0;
}

.example-intro__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  max-width: 1248px;
}

.example-intro__box .intro_title {
  flex: 0.8;
}

.example-intro__box .intro_title h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
  margin-bottom: 16px;
}

.example-intro__box .intro_title p {
  font-size: 18px;
  line-height: 1.5;
  color: #111;
  margin-bottom: 40px;
}

.example-intro__box .thum {
  max-width: 700px;
  flex: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
}

.example-intro__box .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.example__reason {
  background-color: #F5F7FC;
}

.example_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.example_badge span {
  display: inline-block;
  width: auto;
  height: 34px;
  line-height: 34px;
  border-radius: 50px;
  color: #fff;
  text-align: center;
  padding: 0 16px;
  font-weight: 600;
}

.reason__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1080px;
  margin: 40px auto 0
}

.reason__list .reason__item {
  align-self: stretch;
  width: calc(50% - 12px);
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
  padding: 20px;
}

.reason__item .icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.reason__item .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reason__item h3 {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.35;
}

.reason__item p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  min-height: 72px;
}

.example-review__list {
  max-width: 1080px;
  margin: 80px auto 0;
}

.example-review__item {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 80px;
}

.example-review__item:last-child {
  margin-bottom: 0;
}

.example-review__item .thum {
  flex: 1;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
}

.example-review__item .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.example-review__item .desc {
  flex: 1.3;
}

.example-review__item .review-reg__info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.review-reg__info .reg_thumb {
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
}

.review-reg__info .reg_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-reg__info .reg_name {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.35;
}

.example-review__item .review__cnts h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: #111;
  margin-bottom: 16px;
}

.example-review__item .review__cnts p {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
}

@media screen and (min-width: 768px) and (max-width:1200px) {
  .example-intro__box .intro_title h1 {
    font-size: 34px;
  }

  .example-intro__box .intro_title p {
    font-size: 16px;
  }
}

@media screen and (max-width:767px) {
  .example__inner section {
    padding: 40px 0;
  }

  .example-intro__box {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .example-intro__box .intro_title {
    width: 100%;
  }

  .example-intro__box .intro_title h1 {
    font-size: 28px;
    margin-bottom: 8px;
  }

  .example-intro__box .intro_title p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .example_badge span {
    height: 25px;
    font-size: 12px;
    line-height: 25px;
  }

  .reason__list {
    flex-direction: column;
    gap: 20px;
    margin: 20px auto 0
  }

  .reason__list .reason__item {
    width: 100%;
    padding: 12px;
  }

  .reason__item h3 {
    margin-top: 8px;
    font-size: 18px;
  }

  .reason__item p {
    margin-top: 8px;
    font-size: 14px;
    min-height: 63px;
  }

  .example-review__list {
    margin-top: 40px;
  }

  .example-review__item {
    flex-direction: column;
    margin-bottom: 40px;
    gap: 20px;
  }

  .example-review__item:nth-child(2n) {
    flex-direction: column-reverse;
  }

  .example-review__item .thum {
    width: 100%;
    aspect-ratio: 32 / 21;
    flex: none;
  }

  .example-review__item .desc {
    flex: none;
    width: 100%;
  }

  .example-review__item .review-reg__info {
    gap: 8px;
    margin-bottom: 8px;
  }

  .review-reg__info .reg_thumb {
    width: 32px;
    height: 32px;
  }

  .review-reg__info .reg_name {
    font-size: 18px;
  }

  .example-review__item .review__cnts h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .example-review__item .review__cnts p {
    font-size: 14px;
  }

  .example-review__item .review__cnts p br {
    display: none;
  }
}

/* #### ?�사?�개 #### */
.company__inner .intro_bg {
  margin-top: 8px;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  height: 320px;
}

.company__inner .intro_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company__inner .intro__title {
  margin-top: 80px;
  text-align: center;
}

.company__inner .intro__title h2 {
  font-size: 28px;
  font-weight: 700;
  color: #999;
  margin-bottom: 8px;
}

.company__inner .intro__title h2:nth-child(2) {
  color: #505050;
}

.company__inner .intro__title h2:nth-child(3) {
  color: #111;
  margin-bottom: 0;
}

.company__inner .intro__box {
  margin-top: 80px;
}

.company__inner .intro__box h3.title {
  margin-bottom: 32px;
}

.intro_solution {
  text-align: center;
  padding: 40px 0;
}

.intro_solution img {
  width: 100%;
  max-width: 856px;
  margin: 0 auto;
  object-fit: contain;
}

.intro_organization {
  background-color: #F7F7FB;
  border-radius: 16px;
  padding: 40px;
}

.intro_organization img {
  width: 100%;
  object-fit: contain;
}

.intro_missions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.intro_missions .mission {
  align-self: stretch;
  flex: 1;
  padding: 16px;
  border-radius: 8px;
  min-width: 240px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.1);
}

.intro_missions .mission h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #111;
}

.intro_missions .mission p {
  margin-top: 8px;
  font-weight: 500;
  color: #505050;
}

.intro_company-info {
  padding-top: 32px;
  border-top: 1px solid #F1F1F5;
}

.intro_company-info .company_info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.intro_company-info .company_info span.tit {
  display: inline-block;
  width: 140px;
  line-height: 28px;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

.intro_company-info .company_info p {
  flex: 1;
  max-width: 200px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #505050;
}

.intro_company-info .company_info p:last-of-type {
  max-width: 100%;
}

/* ?�혁 */
.history__inner {
  padding-top: 40px;
  max-width: 658px;
  margin: 0 auto;
}

.history-tab .tabs {
  display: flex;
  align-items: center;
  gap: 29px;
}

.history-tab .tabs li.tabs__link {
  flex: 1;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
  background-color: #F1F1F5;
  font-size: 20px;
  font-weight: 700;
  color: #999;
  cursor: pointer;
}

.history-tab .tabs li.tabs__link.on {
  background-color: #17234A;
  color: #fff;
}

.history-tab__content {
  display: none;
  margin-top: 56px;
}

.history-tab__content.on {
  display: block;
}

.history__content {
  position: relative;
}

.history__content::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 5px;
  z-index: -1;
  background-color: #F1F1F5;
}

.history__box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 35px;
  margin-bottom: 80px;
}

.history__box span.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #999999;
}

.history__box.active span.dot {
  background-color: #17234A;
}

.history__box h3.history_year {
  font-size: 28px;
  font-weight: 700;
  color: #17234A;
}

.history__box ul.history_info li {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
}

.history__box ul.history_info li:last-child {
  margin-bottom: 0;
}

/* ?�휴관�?*/
.relationship__inner {
  padding-top: 40px;
  max-width: 764px;
  margin: 0 auto;
}

.relationship__inner .relation {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.relationship__inner .relation:first-child {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #F1F1F5;
}

.relationship__inner .relation h3 {
  width: 260px;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  padding-right: 19px;
  color: #111;
}

.relationship__inner .relation__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  gap: 20px 8px;
}

.relation__list .relation__item {
  width: calc((100% / 3) - 8px);
  height: 80px;
  background-color: #f4f4F4;
}

.relation__list .relation__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map__inner {
  padding-top: 40px;
}

.map__inner .map {
  width: 100%;
  height: 420px;
  background-color: #fafafa;
}

.map__inner .map__info {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 40px;
}

.map__info .map-info_box {
  align-self: stretch;
}

.map__info .map-info_box:first-child {
  padding-right: 40px;
  border-right: 1px solid #F1F1F5;
}

.map__info .map-info_box h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #111;
  margin-bottom: 20px;
}

.map__info .map-info_box p {
  line-height: 1.6;
  color: #505050;
}

.map__info .map-info_box ul li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.map__info .map-info_box ul li:last-child {
  margin-bottom: 0;
}

.map__info .map-info_box ul li span {
  font-weight: 500;
  line-height: 1.5;
  color: #333;
  width: 56px;
  flex-shrink: 0;
}

@media screen and (max-width:767px) {
  .company__inner .intro_bg {
    margin-top: 20px;
    height: 180px;
  }

  .company__inner .intro__title {
    margin-top: 40px;
  }

  .company__inner .intro__title h2 {
    font-size: 18px;
  }

  .company__inner .intro__box {
    margin-top: 40px;
  }

  .company__inner .intro__box h3.title {
    margin-bottom: 8px;
  }

  .intro_solution {
    padding: 0;
    text-align: center;
  }

  .intro_solution img {
    max-width: 320px;
  }

  .intro_organization {
    padding: 12px;
  }

  .intro_organization img {
    max-width: 320px;
    margin: 0 auto;
  }

  .intro_missions {
    gap: 8px;
  }

  .intro_missions .mission {
    padding: 12px;
    min-width: calc(50% - 8px);
  }

  .intro_missions .mission h4 {
    font-size: 16px;
    line-height: 24px;
  }

  .intro_missions .mission p {
    font-size: 14px;
    line-height: 20px;
  }

  .intro_missions .mission .logo {
    width: 94px;
    height: 20px;
  }

  .intro_company-info {
    padding-top: 8px;
  }

  .intro_company-info .company_info {
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 12px;
    margin-bottom: 12px;
  }

  .intro_company-info .company_info span.tit {
    width: 110px;
    font-size: 16px;
    color: #333;
  }

  .intro_company-info .company_info p {
    flex: none;
    max-width: 100%;
    width: calc(100% - 110px);
    font-size: 14px;
  }

  .history__inner {
    padding-top: 20px;
  }

  .history-tab .tabs {
    flex-direction: column;
    gap: 8px;
  }

  .history-tab .tabs li.tabs__link {
    flex: none;
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
  }

  .history-tab__content {
    margin-top: 20px;
  }

  .history__box {
    gap: 15px;
    margin-bottom: 56px;
  }

  .history__box h3.history_year {
    font-size: 18px;
  }

  .history__box ul.history_info li {
    font-size: 14px;
  }

  .relationship__inner {
    padding-top: 20px;
  }

  .relationship__inner .relation {
    flex-direction: column;
    gap: 12px;
  }

  .relationship__inner .relation:first-child {
    margin-bottom: 20px;
    padding-bottom: 0%;
    border-bottom: none;
  }

  .relationship__inner .relation h3 {
    width: 100%;
    font-size: 16px;
    padding-right: 0;
  }

  .relationship__inner .relation__list {
    gap: 12px;
    width: 100%;
  }

  .relation__list .relation__item {
    width: 100%;
    height: 100px;
  }

  .map__inner {
    padding-top: 20px;
  }

  .map__inner .map {
    height: 240px;
  }

  .map__inner .map__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
  }

  .map__info .map-info_box {
    align-self: auto;
  }

  .map__info .map-info_box:first-child {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid #F1F1F5;
  }

  .map__info .map-info_box h4 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .map__info .map-info_box p {
    font-size: 14px;
  }

  .map__info .map-info_box ul li {
    margin-bottom: 8px;
  }

  .map__info .map-info_box ul li span {
    width: 46px;
    font-size: 14px;
  }
}

/* #### 고객 문의 #### */
.contact__header {
  text-align: center;
  width: 100%;
  padding: 56px 20px;
  border-radius: 16px;
  overflow: hidden;
  background: url(/_img/sub/contact_bg.png) no-repeat center / cover;
}

.contact__header>span {
  display: inline-block;
  width: auto;
  padding: 0 16px;
  height: 34px;
  line-height: 34px;
  border-radius: 50px;
  background-color: #fff;
  text-align: center;
  font-weight: 700;
  color: var(--color-brand);
}

.contact__header h2,
.contact-type2__header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #111;
  margin: 8px 0;
}

.contact__header p,
.contact-type2__header p {
  font-size: 18px;
  line-height: 1.5;
  color: #111;
}

.contact__header .btns {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.contact__header .btns .btn {
  height: 46px;
  line-height: 46px;
  font-weight: 600;
}

.contact__content {
  margin-top: 40px;
}

.contact__content>h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-brand);
}

.contact__list {
  margin-top: 40px;
}

.contact__list .contact__item {
  padding: 20px 0;
  border-bottom: 1px solid #F1F1F5;
}

.contact__list .contact__item:first-child {
  padding-top: 0;
}

.contact__list .contact__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contact__list .contact__item p {
  font-size: 18px;
  line-height: 1.5;
  color: #111;
  margin-bottom: 12px;
}

.contact__list .contact__item h3 {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  line-height: 1.5;
}

.contact-type2 {
  max-width: 600px;
  margin: 0 auto;
}

.contact-type2__header {
  text-align: center;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #F1F1F5;
}

.contact-type2__header>span {
  display: inline-block;
  width: auto;
  padding: 0 16px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
}

.contact_agree {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.contact__btn {
  margin-top: 40px;
}

@media screen and (max-width:767px) {
  .contact__header {
    padding: 20px;
  }

  .contact__header>span {
    height: 25px;
    line-height: 25px;
    font-size: 12px;
  }

  .contact__header h2,
  .contact-type2__header h2 {
    font-size: 20px;
  }

  .contact__header p,
  .contact-type2__header p {
    font-size: 14px;
  }

  .contact__header .btns {
    margin-top: 20px;
    flex-direction: column;
    gap: 8px;
  }

  .contact__header .btns .btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .contact__content {
    margin-top: 20px;
  }

  .contact__content>h3 {
    font-size: 18px;
  }

  .contact__list {
    margin-top: 20px;
  }

  .contact__list .contact__item {
    padding: 12px 0;
  }

  .contact__list .contact__item p {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .contact__list .contact__item h3 {
    font-size: 16px;
  }

  .contact-type2__header {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .contact-type2__header>span {
    height: 25px;
    line-height: 25px;
    font-size: 12px;
  }

  .contact_agree {
    justify-content: flex-start;
    margin-top: 20px;
  }

  .contact__btn {
    margin-top: 20px;
  }

  .contact__btn .btn {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
  }
}