@charset "utf-8";
.thanks {font-family: "pretendard", "malgungothic", "맑은고딕", "-apple-system","applegothic", "apple sd gothic neo", sans-serif;}
br.mo {display: none;}
.content.thanks .content_head .bg01 {display: block;}
.content.thanks .content_head .bg02 {display: none;}

/*메인 비주얼*/
.content.thanks .content_head {position: relative; width: 100%; display: flex;}
.content.thanks .content_head .bg01,
.content.thanks .content_head .bg02 {width: 100%;}
.content.thanks .content_head .btn {position: absolute; left: 50%; bottom: calc(8%); transform: translateX(-50%); display: inline-block; z-index: 1; max-width: 395px; width: 20%;}
.content.thanks .content_head .btn img {display: block; width: 100%; height: auto;}


/* 기능 */
.content.thanks .area_HR {width: 100%; padding: 200px 0 160px; background: #F6F0FF;}
.content.thanks .area_HR h3 {font-size: 50px; font-weight: 500; color: #1E1E1E; margin-bottom: 16px; text-align: center;}
.content.thanks .area_HR p {color: #878B8F; font-size: 28px; margin-bottom: 80px; text-align: center;}

.area_HR .cont_wrap {display: flex; flex-direction: column; width:100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; gap: 20px;}
.area_HR .card_wrap {display: flex; gap: 24px; justify-content: center; flex-wrap: nowrap; width: 100%;}
.area_HR .card {position: relative; background: #fff; border-radius: 32px; box-sizing: border-box; padding: 48px; text-align: left;}
.area_HR .card_wrap > .card:first-child {display: flex; flex: 0 0 40%; flex-direction: column; justify-content: flex-end; position: relative;}

.area_HR .card_vertical {display: flex; flex-direction: column; gap: 20px; flex: 0 0 60%;}
.area_HR .card_vertical .card {display: flex; flex-direction: row; justify-content: flex-start; gap: 32px;}

.area_HR .card .ico {width: 120px; height: 100px; margin: 0 0 32px;}
.area_HR .card_vertical .ico {width: 100px; height: 100px;}

.area_HR .card .tit {font-size: 30px; font-weight: 500; color: #603D7E; margin: 0 0 12px;}
.area_HR .card p.des {font-size: 20px; font-weight: 400; line-height: 148%; color: #999999; margin: 0;text-align: left;}

.area_HR .cont_wrap .box {display: block; width: 100%; background-color: #e6d8f9; color:#603D7E; box-sizing: border-box; border-radius: 24px; font-size: 30px; font-weight: 500; text-align: center; padding: 30px; box-sizing: border-box; max-width: 1200px;}


/* 특별 혜택 */
.area_benefit {padding: 120px 40px; text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 32px}
.content.thanks .area_benefit h3 {font-size: 50px; font-weight: 500; color: #1E1E1E; margin-bottom: 16px;}

.content.thanks .area_benefit .card_horizental {display: flex; gap: 32px; align-items: center; width: 100%; max-width: 1200px; margin: 64px auto 0; align-items: stretch;}
.content.thanks .area_benefit .card_horizental .card {width: 100%; max-width: 584px; display: flex; flex-direction: column; align-items: stretch; object-fit: cover;}
.content.thanks .area_benefit .card_horizental .card_img {width: 100%; height: auto; max-width: 584px; border-radius: 40px 40px 0 0; object-fit: cover;}
.content.thanks .area_benefit .card_horizental .card .text_wrap {display: flex; flex-direction:column; justify-content: flex-start; text-align: left; gap: 12px; background: #AF74D9; border-radius: 0 0 40px 40px; width: 100%; height: 100%; padding: 0 32px 60px; box-sizing: border-box;}
.content.thanks .area_benefit .card_horizental .card .text_wrap h4 {font-size: 40px; font-weight: 500; margin: 0; color: #fff; line-height: 143%;}
.content.thanks .area_benefit .card_horizental .card .text_wrap p {font-size: 24px; color: #ffffffd3; margin: 0}
.content.thanks .area_benefit .card_horizental .card .text_wrap .des {font-size: 24px; color: #ffffffbb; margin-bottom: auto; text-align: left;}

.content.thanks .area_benefit .card_horizental > .card:first-child .text_wrap {background: #E7E9F1}
.content.thanks .area_benefit .card_horizental > .card:first-child .text_wrap h4 {color: #1E1E1E;}
.content.thanks .area_benefit .card_horizental > .card:first-child .text_wrap p {color: #555;}
.content.thanks .area_benefit .card_horizental > .card:first-child .text_wrap .des {color: #1212126a;}


/* 참여 방법 */
.content.thanks .area_benefit .visual_text {display: block; flex-direction: column; gap: 24px; width: 100%; max-width: 1200px; background-color: #F1ECFF; border-radius: 24px; padding: 56px 64px; text-align: left;  justify-content: center;}

.content.thanks .area_benefit .visual_text h3 {font-size: 32px; font-weight: 500; margin: 0 0 24px; text-align: left;}
.content.thanks .area_benefit .visual_text dl {display: flex; gap: 12px; align-items: center; margin-bottom: 24px;}
.content.thanks .area_benefit .visual_text dt {font-weight: 400; padding: 8px; color: #fff; background-color: #AF74D9; width: 72px; height: 100%; border-radius: 8px; text-align: center;}
.content.thanks .area_benefit .visual_text dd {color: #373737; font-size: 24px; margin: 0;}

.content.thanks .area_benefit .btn {display: inline-block; width: 395px; height: 78px;}
.content.thanks .area_benefit .btn img {display: block; width: 100%; height: 100%; object-fit: cover;}


/* 유의사항 */
.content.thanks .area_benefit .area_notice {max-width: 1200px; width: 100%; margin: 0 auto; margin-top: 96px; padding: 56px 48px; text-align: left; background-color: #F6F7FB; border-radius: 24px;}
.content.thanks .area_benefit .area_notice h3 {font-size: 32px; font-weight: 500; margin-bottom: 16px; color: #4E4E4E; margin-bottom: 12px; text-align: left;}
.content.thanks .area_benefit .area_notice ul {text-align: left; font-weight: 400; font-size: 24px; color: #777777; line-height: 2;}

/*기능*/
.content.thanks .area_function .title_wrap {display:flex; flex-direction:column; align-items:flex-start; margin-bottom:36px;}
.content.thanks .area_function {padding: 100px 0; margin: 0 auto; width: 100%; max-width: 1200px;}
.content.thanks .area_function .title_wrap {text-align:center;}
.content.thanks .area_function .title_wrap .title p { display: block; width: 100%; margin: 0;}
.content.thanks .area_function .title_wrap .title {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom:32px;}
.content.thanks .area_function .title_wrap {display:flex; margin-bottom: 32px; flex-direction: column;}
.content.thanks .area_function .title_wrap .title {flex: 0 0 100%;}
.content.thanks .area_function .title_wrap .btn_wrap_link {order: 3; margin-left: auto; align-self: center; vertical-align: middle;}
.content.thanks .area_function .cont_wrap {margin-top:48px; width:100%;}
.content.thanks .tab_default {margin: 0;}

/*FAQ*/
.area_faq h2 {margin-bottom: 32px; text-align: left;}


/* 푸터 스타일 */
.function .content_foot .title_wrap h2 {text-align:center; color:#fff; font-weight:400; font-size:44px;}
.function .content_foot .title_wrap h2 .bold {font-weight:600;}
.function .content_foot span.sub {color:#fff;}
.function .content_foot {padding:80px 0 50px; margin: 0 auto; text-align:center; width: 100%; background:
    url("./images/img_footer_pc_01.png") no-repeat bottom center/cover,
    linear-gradient(to bottom right, #824EEB, #EBE7DB, #FBFFCF);
  color: #fff;
}

@media (max-width: 1200px) {
  .content.thanks h3 {font-size: 36px !important;}
  .content.thanks p {font-size: 24px !important; margin-bottom: 40px;}

  /*HR*/
  .area_HR .card .tit {font-size: 24px; margin: 0 0 12px;}
  .area_HR .card p.des {font-size: 18px !important; margin: 0;}

  /*특별혜택*/
  .content.thanks .area_benefit .card_horizental {margin-top: 24px !important;}
  .content.thanks .area_benefit .card_horizental h4 {font-size: 30px !important;}
  .content.thanks .area_benefit .card_horizental p {font-size: 24px !important; margin: 0 !important;}
}

@media (max-width: 959px) {
  .content_head {padding-inline: 0% !important; padding-block: 0% !important;}
/* 패딩 */
.function .content_body > div[class^="area_"] {padding-inline: 6% !important; padding-block: 10% !important;}
.function .tab_wrapper {position: relative; overflow: hidden; width: 100%;}

/* 탭 영역 시작 */
/* 탭 영역 화살표 추가 */
.tab_default {display:flex; overflow-x:auto; scroll-behavior:smooth; gap:8px; -ms-overflow-style:none; scrollbar-width:none; width:100%;}
.tab_default::-webkit-scrollbar {display: none;}
.tab_arrow {position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid #dadada; border-radius: 50%; background: #fff; font-size: 18px; line-height: 32px; text-align: center; color: #3a3a3a; cursor: pointer; user-select: none; z-index: 10;}
.tab_arrow.prev {left: 4px;}
.tab_arrow.next {right: 4px;}
.function .area_function .tab_wrapper .tab_arrow.prev::before { content: ""; display: block; width: 6px; height: 6px; border-left: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg); }
.function .area_function .tab_wrapper .tab_arrow.next::before { content: ""; display: block; width: 6px; height: 6px; border-right: 2px solid #333; border-top: 2px solid #333; transform: rotate(45deg); }
.function .title_wrap .tab_default .tablink {white-space: nowrap;}

/* 자세히보기 버튼 위치 중앙정렬 */
.function .area_function .title_wrap .btn_wrap_link {order: 3; margin: auto; align-self: center; vertical-align: middle; margin-top: 32px; padding: 8px 24px; border: #9a9b9c solid 1px; border-radius: 24px;}

/* 여백 조절 */
.function .area_function .title_wrap .title {display:flex; flex-direction:column; align-items:flex-start; gap: 8px; margin-bottom: 20px;}
.function .area_function .title_wrap {display:flex; flex-direction:column; align-items:left; margin-bottom:36px;}
.price .area_function .title_wrap {display:flex; flex-direction:column; align-items:flex-start; margin-bottom:36px;}}


@media (max-width: 800px) {
  .content.thanks .content_head .bg01 {display: none;}
  .content.thanks .content_head .bg02 {display: block;}
  .content.thanks .content_head .btn {width: 50%;}
  .content.thanks .content_head .btn img {display: block; width: 100%; height: auto;}
  .content.thanks .area_HR,
  .content.thanks .area_benefit, 
  .content.thanks .area_HR {padding: 60px 20px; width: 100%;}

  .area_HR .card_wrap {flex-direction: column; align-items: center;}

  .area_HR .card_wrap > .card:first-child,
  .area_HR .card_vertical {width: 100%; flex-direction: column; justify-content: flex-start; align-items: stretch;}
  .area_HR .card p.des {margin: 0 !important;}
  .area_HR .card_wrap > .card:first-child {flex-direction: row; gap: 32px;}
  .area_HR .card_wrap > .card:first-child .title_wrap {flex-direction: column;}
  .area_HR .card_wrap > .card:first-child .ico {width: 100px; height: 100%;}
  .area_HR .card {padding: 32px 24px;}
  .area_HR .cont_wrap .box {font-size: 24px;}
  .text_wrap {padding: 0 24px;}

  .content.thanks .area_benefit .card_horizental {margin-top: 24px !important; flex-direction: column;}
  .content.thanks .area_benefit .card_horizental h4 {font-size: 30px !important;}
  .content.thanks .area_benefit .card_horizental p {font-size: 20px !important; margin: 0 !important;}
}


@media (max-width: 768px) {
  /* 탭 */
	.tab_default {white-space: nowrap; overflow-x: auto; margin:0 0 40px;}
	.tab_default::-webkit-scrollbar {display: none;}
	.tab_default button {margin:0; padding:0 16px; height:auto; line-height:42px; vertical-align:top; font-size:14px; font-weight:500;}
  .tab_contents .thumb.pc {display:none;}
  .tab_contents .thumb.mo {display:block;}
  .tab_contents .thumb.mo p {font-size:18px;  margin:30px 0 0; text-align:center; color:#555; font-weight:500;}
  .tab_contents img {width: 100%;}
  .list_overview {width:100%; gap:40px; margin:0 auto 50px;}
  .list_overview li {width:calc(100% / 1);}
  .list_overview li .desc {font-size: 14px;}
  .list_func .inner_flex > div {flex: 100%;}
  .list_func {width:90%; margin:0 auto;}
  .list_func .item {padding:0;}
  .list_func .item_cont {padding-top:0px; margin:60px 0 20px;}
}

@media (max-width: 480px) {
  br {display: none;}
  .content.thanks h3 {font-size: 28px !important;}
  .content.thanks p {font-size: 20px !important;}

  br.mo {display:block}

  /*HR*/
  .area_HR .cont_wrap {padding: 0 24px; box-sizing: border-box; gap: 20px;}
  .area_HR .card_wrap > .card:first-child,
  .area_HR .card_vertical .card {flex-direction: column; gap: 16px;}
  .area_HR .card_wrap > .card:first-child .ico, .area_HR .card_vertical .card .ico {width: 80px; height: 100%; margin-bottom: 8px;}

  .area_HR .card .tit {font-size: 22px; margin: 0 0 12px;}
  .area_HR .card p.des {font-size: 16px !important; margin: 0;}

  /*특별 혜택 및 참여 방법*/
  .area_benefit {gap: 20px}
  .content.thanks .area_benefit .visual_text {padding: 40px 32px;}
  .content.thanks .area_benefit h3 {margin-bottom: 0px;}
  .content.thanks .area_benefit .visual_text h3 {font-size: 20px !important;}

  .content.thanks .area_benefit .visual_text dt {font-size: 14px; padding: 4px 6px; line-height: 1.3; width: 60px; height: 100%;}
  .content.thanks .area_benefit .visual_text dl {flex-direction: column !important; align-items: flex-start; gap: 6px; margin-bottom: 16px;}
  .content.thanks .area_benefit .visual_text dd {font-size: 18px;}
  .content.thanks .area_benefit .btn {width: 240px; height: 48px;}
  .content.thanks .area_benefit .btn img {border-radius: 8px;}


  /* 유의사항 */
  .content.thanks .area_benefit .area_notice {margin-top: 40px; padding: 40px 32px;}
  .content.thanks .area_benefit .area_notice h3 {font-size: 20px !important;}
  .content.thanks .area_benefit .area_notice ul {font-size: 18px; line-height: 1.6;}
  .content.thanks .area_benefit .area_notice li {margin-bottom: 8px;}

  /*기능 상세*/
  .content.thanks .function .area_function .title_wrap .title p.label.purple {margin-bottom: 8px;}
  .content.thanks .function .area_function {padding: 0 20px;}

  /*FAQ*/
  .content.thanks .area_faq {padding: 40px 20px;}
  .content.thanks .area_faq .box_qna p {margin-bottom: 0px !important;}

    /* 탭 및 버튼 리사이징 */
    .function .title_wrap .tab_default .tablink {font-size:15px; color:#9C9FA3; font-weight:600; padding:4px 8px; letter-spacing:-1px; margin: 0 4px;}
    .function .btn_link {font-size:15px; color:#888;}
  
    /* 푸터 스타일 */
    .function .content_foot {padding:140px 0; margin: 0 auto; text-align: center; width: 100%;
      background: linear-gradient(to top, #fff, #824EEB);
    /* 텍스트 색은 불투명하게 */ color: #fff;}
}