@charset "UTF-8";
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-family:'Noto Sans KR','Pretendard','malgun Gothic', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue',dotum,AppleGothic,arial,Helvetica, sans-serif; 
    letter-spacing: -1.5px;
}


/* --- 글로벌 --- */
/* 라인영역까지 박스사이징 */
*, *::before, *::after {box-sizing: border-box;}
button {background:none}
br.m {display:none;}
img.pc {display: block !important;}
img.mo {display: none;}
h1, h2, h3, h4 {word-break: keep-all;}
h4 b {display:block;}
body {overflow-x: hidden;}

/* -------- 2025 MAIN -------- */
.main .area_visual {padding:85px 0 0; margin:0 auto;}
.main .area_visual .inner {text-align:center; max-width:2000px;}
.main .area_visual .title_wrap {color:#111; margin-bottom:24px;}
.main .area_visual .title_wrap .sub {font-size:58px; font-weight:300; margin-bottom:2px; letter-spacing:-5px;}
.main .area_visual .title_wrap h2 {font-size:76px; font-weight:600; letter-spacing:-5px;}
.main .area_visual .visual_wrap {margin-top:60px;}
.main .area_visual .visual_wrap img {width:100%;}
.main .content_head {padding:90px 0 20px 0 !important;}

/*
.main .area_customer {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px 0 60px;}
.main .area_customer .marquee_container {overflow:hidden; width:100%; position:relative; height:104px;}
.main .area_customer .marquee_container .marquee_inner {width:200%; display:flex; position:absolute; top:0; animation:50s linear infinite; gap:40px;}
.main .area_customer .marquee_container .marquee_inner {animation-name:marqueeToLeft; left:0;}
.main .area_customer .marquee_container .marquee_inner .wrap {display:flex; gap:57px;}

@keyframes marqueeToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeToRight {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
*/

/*
.main .area_customer {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px 0px 80px;}
.main .area_customer .marquee_container {overflow:hidden; width:100%; position:relative; height:104px;}
.main .area_customer .marquee_container .marquee_inner {display:flex; position:absolute; top:0; left:0%; width:100%; animation:marqueeToLeft 30s linear infinite; gap:30px;}
.main .area_customer .marquee_container .marquee_inner .wrap {display:flex; gap:70px;}
.main .area_customer .marquee_container .marquee_inner .wrap img {max-width:fit-content; height:auto; display:inline-block;}

@keyframes marqueeToLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
  */

.main .area_overview {padding:80px 0; margin:0 auto; }
.main .area_overview .inner {max-width:1200px;}
.main .area_overview .cont_wrap {transition:all .4s; margin-top:30px;}
.main .area_overview .cont_wrap .box_wrap {display:flex; justify-content:space-between; border-radius:32px; background-color:#fff; border:1px solid #DEDEE2;} 
.main .area_overview .cont_wrap .box_cont {padding:50px 0 0 54px;}
.main .area_overview .cont_wrap .box_cont .title {margin-top:8px; text-align:left;}
.main .area_overview .cont_wrap .box_cont .title h4 {font-size:28px; margin-bottom:8px; font-weight:500; line-height:140%; letter-spacing:-3px;}
.main .area_overview .cont_wrap .box_cont .cont {display:flex; flex-direction:column; gap:34px; margin-top:50px; padding:0;}
.main .area_overview .cont_wrap .box_cont .cont li .listbox {text-align:left;}
.main .area_overview .cont_wrap .box_cont .cont li .listbox .titlebox {display:flex;}
.main .area_overview .cont_wrap .box_cont .cont li .listbox .ic_main {display:inline-block;}
.main .area_overview .cont_wrap .box_cont .cont li .tit {font-size:18px; color:#333; margin-left:6px; font-weight:500;}
.main .area_overview .cont_wrap .box_cont .cont li .des {font-size:16px; color:#888; margin-top:6px; font-weight:400;}
.main .area_overview .cont_wrap .box_thumb {display:flex;}
.main .area_overview .cont_wrap .ic_main_mint {width:24px; height:24px; background:url(../images/main/2025/ic_main_mint.svg); display:inline-block;}
.main .area_overview .cont_wrap .ic_main_mint.work {background-position:0 0;}
.main .area_overview .cont_wrap .ic_main_white {width:24px; height:24px; background:url(../images/main/2025/ic_main_white.svg); display:inline-block;}
.main .area_overview .cont_wrap .ic_main_white.work {background-position:0 0;}
.main .area_overview .tab_contents > div {display:none;}
.main .area_overview .tab_contents div.active {display:block;}
.main .area_overview .btn_wrap .btn_general_sub .link_arrow {width:24px; height:24px; background: url(../images/ic_main.svg) -274px -14px; display: inline-block; margin-left: 6px;}
.main .area_overview .link_normal {width:14px; height:24px; background: url(../images/ic_main.svg) -222px -58px; display: inline-block; margin-left: 6px; top:1px; position:relative;}

.main .area_detail {padding:40px 0 80px; margin:0 auto;}
.main .area_detail .inner {max-width:1200px;}
.main .area_detail .box_cont .box_line {display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:24px; margin-top:24px;}
.main .area_detail .box_cont .box_line .box {width:384px; box-sizing:border-box; cursor:pointer; background-color:#F5F6F8; border-radius:32px; border:2px solid transparent; transition:0.5s all;}
.main .area_detail .box_cont .box_line .box .hover {display:none;}
.main .area_detail .box_cont .box_line .box .title p {font-size: 24px;}
.main .area_detail .box_cont .box_line .box .normal {margin:32px 0 0; display:flex; flex-direction:column; gap:30px;}
.main .area_detail .box_cont .box_line .box .normal .txt {margin:0 40px;}
.main .area_detail .box_cont .box_line .box .normal .img {text-align:center;}
.main .area_detail .box_cont .box_line .box:hover .normal {display:none;}
.main .area_detail .box_cont .box_line .box:hover .title p {color:#7CF5FF;}
.main .area_detail .box_cont .box_line .box:hover {width:384px; background:linear-gradient(#222, #222) padding-box, linear-gradient(180.84deg, #7CF5FF 5.27%, #5DA9FF 91.1%, #FDE1FC 113.04%) border-box; border: 2px solid transparent; box-sizing:border-box; box-shadow: 0px 0px 12px 0px #2222234D;}
.main .area_detail .box_cont .box_line .box:hover .hover {margin:32px 40px 0; display:flex; flex-direction:column;}
.main .area_detail .box_cont .box_line .box:hover .hover a {padding:8px 0; width:100px; text-align:center; background:linear-gradient(#222, #222) padding-box, linear-gradient(180.84deg, #7CF5FF 5.27%, #5DA9FF 91.1%, #FDE1FC 113.04%) border-box;  border: 2px solid transparent; box-sizing:border-box; display:inline-block; border-radius:25px; color:#5FAEFF; margin-top:80px;}
.main .area_detail .box_cont .box_line .box:hover a .link {font-size:18px; color:#5FAEFF;}
.main .area_detail .box_cont .box_line .box:hover .hover .desc {margin-top:12px; line-height:180%; color:#fff;}
.main .area_detail .box_cont .box_line .box:hover .hover .tit {color:#4EE4FF;}
.main .area_detail .box_cont .box_line .tit {font-size:20px; font-weight:500; color:#333; display:flex;}
.main .area_detail .box_cont .box_line .desc {font-size:18px; color:#888; margin-top:12px;}
.main .area_detail .box_cont .box_line a {width:384px; box-sizing:border-box; cursor:pointer; background-color:#F5F6F8; border-radius:32px; border:2px solid transparent;}
.main .area_detail .box_cont .box_line a:hover {background-color:#edeff1;}
.main .area_detail .box_cont .box_line a .txt {margin:32px 40px 0;}
.main .area_detail .box_cont .box_line a .img {display:flex; justify-content:flex-end; margin:40px 20px 0 0;}
.main .area_detail .cont_wrap .link_gr {width:9px; height:13px; background:url(../images/ic_main.svg) -204px -69px; display:inline-block; margin-left:6px; position:relative; top:1px;}

.main .area_scale {padding:80px 0 140px; margin:0 auto; background-color:#FAFAFC;}
.main .area_scale .inner {max-width:1200px; display:flex; justify-content:space-between; flex-direction:column;}
.main .area_scale .title_wrap .desc {font-size:18px; color:#888; margin-top:16px; text-align:left;}
.main .area_scale .cont_wrap .box_cont {display:flex; gap:24px; grid-template-columns:repeat(3,1fr);}
.main .area_scale .cont_wrap .box_cont .box {border: 2px solid transparent; cursor:pointer; width:486px; display:flex; border-radius: 20px; background-color: #fff; background-color:#fff; padding:40px 45px; flex-direction:column; box-shadow: 0px 2px 13px 0px #6055A214;}
.main .area_scale .cont_wrap .box_cont .box:hover {background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #02B6D7 0%, #9F1AFF 100%) border-box; border: 2px solid transparent;}
.main .area_scale .cont_wrap .box_cont .box_list {display:inline-block;}
.main .area_scale .cont_wrap .box_cont .box_list .tag {padding:3px 10px; border-radius:10px; font-size:16px; background-color:#E1FBFF; color:#00C3E0;}
.main .area_scale .cont_wrap .box_cont .box_list .title {font-size:24px; color:#333; font-weight:500; line-height:140%; margin:16px 0;}
.main .area_scale .cont_wrap .box_cont .box_list .link {font-size:18px; color:#888;}
.main .area_scale .cont_wrap .box_cont .box_list .link img {position:relative; top:3px;}
.main .area_scale .cont_wrap .box_cont .box_thumb {text-align:right;}
.main .area_scale .cont_wrap .box_cont .box_thumb .ic_scale {width:104px; height:104px; background:url(../images/ic_main.svg); display:inline-block;}
.main .area_scale .cont_wrap .box_cont .box_thumb .ic_scale.free {background-position:-12px -395px;}
.main .area_scale .cont_wrap .box_cont .box_thumb .ic_scale.share {background-position:-139px -395px;}
.main .area_scale .cont_wrap .box_cont .box_thumb .ic_scale.single {background-position:-265px -395px;}

.main .area_review {padding:100px 0; background-color:#F1F2F4; overflow:hidden;}
.main .area_review .inner {max-width:1200px;}
.main .area_review .default li {border-radius:32px;}
.main .area_review .marquee_container {width:100%; position:relative; height:330px;}
.main .area_review .marquee_container .marquee_inner {display:flex; flex-direction:row; gap:24px; position:absolute; top:0; animation:25s linear infinite; animation-name:marqueeToLeft; left:-480px;}
.main .area_review .marquee_container .wrap {display:flex; flex-direction:row; box-sizing:border-box; cursor:pointer; box-shadow: 0px 4px 20px 0px #D3DCEC; border-radius:32px; transition:0.5s all;}
.main .area_review .marquee_container .wrap .default {display:block;}
.main .area_review .marquee_container .wrap .title p {font-size: 24px;}
.main .area_review .marquee_container .wrap .default {width:480px; height:310px; display:flex; flex-direction:column; gap:30px;}
.main .area_review .marquee_container .wrap:hover .default {display:none;}
.main .area_review .marquee_container .wrap .default-hover {display:none;}
.main .area_review .marquee_container .wrap:hover .default-hover {width:480px; height:310px; display:block; background-color:#fff; border-radius: 32px;}
.main .area_review .marquee_container .wrap .default-hover .area {padding:44px;}
.main .area_review .marquee_container .wrap .default-hover .wrap_avata {display:flex; gap:16px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata {width:64px; height:64px; display:inline-block; background: url(../images/ic_main.svg) 0 0;}
.main .area_review .marquee_container .wrap .default-hover .title {font-size:24px; color:#333; line-height:150%; font-weight:500;}
.main .area_review .marquee_container .wrap .default-hover .desc {font-size:20px; margin-top:16px; color:#6B6B6B; line-height:160%;}
.main .area_review .marquee_container .wrap .default-hover .btn_wrap_link {justify-content:left; margin:44px 0 0;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n01 {background-position: 615px -297px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n02 {background-position: 539px -297px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n03 {background-position: 463px -297px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n04 {background-position: -13px -297px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n05 {background-position: 615px -297px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n06 {background-position: 235px -297px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n07 {background-position: 82px -297px;}
.main .area_review .marquee_container .wrap .default-hover .ic_avata.n08 {background-position: 387px -297px;}

@keyframes marqueeToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeToRight {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}

.main .area_price {padding:80px 0 140px; margin:0 auto; background:linear-gradient(to top, #DBF8FF, #FFF);}
.main .area_price .inner {max-width:1200px;}
.main .area_price .title_wrap .btn_wrap_link {display:flex; justify-content:flex-end;}
.main .area_price .cont_wrap .info {text-align:left; font-size:16px; color:#868686;}
.main .area_price .cont_wrap .box_cont {display:flex; gap:24px; flex-direction:row; margin-bottom:20px;}
.main .area_price .cont_wrap .box_cont .box {display:flex; width:384px; flex-direction:column; box-sizing:border-box;}
.main .area_price .cont_wrap .box_cont .box .box_main {padding:40px 40px 0; background-color:#fff; border-radius:24px; box-shadow: 0px 0px 10px 0px #00000026;}
.main .area_price .cont_wrap .box_cont .box .box_main .tit {font-size:24px; font-weight:500; margin-bottom:8px; color:#333;}
.main .area_price .cont_wrap .box_cont .box .box_main .desc {font-size:16px; color:#6B6B6B;}
.main .area_price .cont_wrap .box_cont .box .box_main .box_txt {border-bottom:1px solid #F0F0F0; padding-bottom:16px;}
.main .area_price .cont_wrap .box_cont .box .box_main .box_num {color:#333; margin-top:24px;}
.main .area_price .cont_wrap .box_cont .box .box_main .box_num .num {font-size:42px; font-weight:500; margin-right:2px;}
.main .area_price .cont_wrap .box_cont .box .box_main .box_num .unit {font-size:36px; position:relative; top:-2px;}
.main .area_price .cont_wrap .box_cont .box .box_main .price {font-size:20px; color:#2F2F2F;}  
.main .area_price .cont_wrap .box_cont .box .box_desc {margin:32px 0 48px; gap:12px;  display:flex; flex-direction:column;}
.main .area_price .cont_wrap .box_cont .box .box_desc div {display:flex; gap:8px;}
.main .area_price .cont_wrap .box_cont .box .box_desc div .tag {color:#00BEEE; display:inline-block; font-size:15px; padding:0px 8px; border-radius:6px; border:1.5px solid #00BEEE;}
.main .area_price .cont_wrap .box_cont .box .box_desc div .desc {color:#333;}
.main .area_price .cont_wrap .box_cont .box:hover .box_main .tit,
.main .area_price .cont_wrap .box_cont .box.active .box_main .tit {color:#00BEEE;}
.main .area_price .cont_wrap .box_cont .box:hover .box_main,
.main .area_price .cont_wrap .box_cont .box.active .box_main {cursor: pointer; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #02B6D7 0%, #9F1AFF 100%) border-box; border: 2px solid transparent;}

/* 6.푸터 스타일 */
.function .content_foot .title_wrap h2 {text-align:center; color:#fff; font-weight:400;}
.function .content_foot .title_wrap h2 .bold {font-weight:600;}
.function .content_foot {padding:80px 0 50px; margin: 0 auto; text-align:center; width: 100%; background:
    url("../images/price/img_footer_pc_01.png") no-repeat bottom center/cover,
    linear-gradient(to bottom right, #824EEB, #EBE7DB, #FBFFCF);
  /* 텍스트 색은 불투명하게 */
  color: #fff;
}
.main .content_foot h2 {font-size: 48px; font-weight: 600; line-height: 140%; color: #333;}
.main .content_foot span.sub {font-size: 48px; font-weight: 300; line-height: 140%; color: #333;}


.main .btn_round_sub {display:inline-block; border-radius:35px; background-color:#F4F7F9; color:#555; font-size:20px; font-weight:500; width:80%; height:54px; text-align:center; line-height:250%;}
.main .btn_round_sub:hover,
.main .btn_round_sub.active,
.main .box.active .btn_round_sub.active {color:#fff; background-color:#333;}
.main .btn_general_sub {background-color:#262626; padding:16px 30px; border-radius:35px; color:#fff; font-size:20px;}
.main .btn_general_sub:hover {background-color:#2e2e2e;}
.main .btn_link {font-size:18px; color:#888;}
.main .btn_link img {position:relative; top:4px;}

.main .title_wrap .tab_default .tablink {font-size:18px; color:#9C9FA3; font-weight:600; padding:12px; letter-spacing:-1px;}
.main .title_wrap .tab_default .tablink:hover,
.main .title_wrap .tab_default .tablink.active {color:#333; border-bottom:3px solid #333;}
.main .title_wrap {margin-bottom:44px;}
.main .title_wrap .title {font-weight:400; margin-bottom:32px;}
.main .title_wrap .title .sub {font-size:24px; color:#6B3BE9; margin-bottom:12px;}
.main .title_wrap .title h4 {font-size:48px; font-weight:300; color:#333; line-height:140%; letter-spacing:-4px;}
.main .title_wrap .title h4 b {font-weight: 500;}

.box_line a .dada {width:200px; height:200px; display:inline-block; text-align:right;}
.box_cont a:hover {color:#888;}

.ic_arrowicon {width:28px; height:28px; background: url(../images/ic_main.svg) -205px -11px; margin-left:5px; display: inline-block; top:-3px; position:relative;}
.ic_main,
.ic_main_mint {width:28px; height:28px; background:url(../images/ic_main.svg); display:inline-block; top:0px; position:relative; margin-right:8px;}
.ic_main_mint.mail {background-position:-13px -61px;}
.ic_main_mint.payment {background-position:-53px -58px;}
.ic_main_mint.works {background-position:-91px -60px;}
.ic_main_mint.ai {background-position:-130px -60px;}
.ic_main_mint.messenger {background-position:-167px -60px;}
.ic_main_mint.human {background-position:-15px -147px;}
.ic_main_mint.expense {background-position:-53px -147px;}
.ic_main_mint.attendance {background-position:-91px -147px;}
.ic_main_mint.education {background-position:-129px -147px;}
.ic_main_mint.contract {background-position:-166px -147px;}
.ic_main_mint.card {background-position:-14px -223px;}
.ic_main_mint.receipt {background-position:-53px -223px;}
.ic_main_mint.vehicle {background-position:-90px -223px;}
.ic_main_mint.sales {background-position:-127px -223px;}
.ic_main_mint.tax {background-position:-165px -223px;}
.ic_main.mail {background-position:-13px -12px;}
.ic_main.payment {background-position:-53px -12px;}
.ic_main.works {background-position:-91px -12px;}
.ic_main.ai {background-position:-130px -12px;}
.ic_main.messenger {background-position:-167px -12px;}
.ic_main.human {background-position:-15px -109px;}
.ic_main.expense {background-position:-53px -109px;}
.ic_main.attendance {background-position:-91px -109px;}
.ic_main.education {background-position:-129px -109px;}
.ic_main.contract {background-position:-166px -109px;}
.ic_main.card {background-position:-14px -185px;}
.ic_main.receipt {background-position:-53px -185px;}
.ic_main.vehicle {background-position:-90px -185px;}
.ic_main.sales {background-position:-127px -185px;}
.ic_main.tax {background-position:-165px -185px;}


/* 중간배너 */
.area_bn {margin:80px 0 0;}
.area_bn .inner {max-width:auto;}
.area_bn .link_bn_pc {display: block; text-align: center;}
.area_bn .link_bn_pc img {width: 100%; max-width: 1480px; border-radius:10px;}
.area_bn .link_bn_mo {display:none;}

	/* ipad mini */	
  @media screen and (max-width: 768px) {	

    body {
      background-size: inherit;
      background-position: top right;
    }

  h2 {line-height:140%;}
  br.m {display:block;}
  em:not(.n) {display: block;}	
  .none {display: none;}	
  .body_container {position: relative;}	
  .body_container .top_popup.pc {display: none;}	
  .body_container .top_popup.m {display: flex;}	
  .body_container .mfloat_menu.on {display: flex;}	

  .main .title_wrap .title {margin:0;}
  .main .title_wrap .title .sub {font-size:18px; text-align:center;}
  .main .title_wrap .title h4 {font-size:28px; text-align:center;}
  .main .title_wrap .tab_default {text-align: center;}
  .main .btn_general_sub {width:60%;}

  .main .area_visual .title_wrap .sub {font-size:26px; letter-spacing:-1.5px;}
  .main .area_visual .title_wrap h2 {font-size:36px; letter-spacing:-1.5px;}

  .main .area_overview {padding:0 0 20px;}
  .main .area_overview .cont_wrap .box_cont .cont {margin:50px 0 30px; padding:0 40px;}
  .main .area_overview .cont_wrap .tablink {justify-content:space-between; flex-direction:column;}
  .main .area_overview .cont_wrap .box_thumb img {width:100%;}
  .main .area_overview .cont_wrap .box_cont {padding:30px 0 0;}
  .main .area_overview .box_cont a {text-align:center;}
  .main .area_overview .cont_wrap .box_cont .title {text-align:center;}
  .main .area_overview .cont_wrap .box_wrap {display:flex; flex-direction:column;}

  .main .area_detail {padding:60px 0;}
  .main .area_detail .box_cont .box_line {display:flex; flex-direction:column; align-items:center;}
  .main .area_detail .box_cont .box_line a,
  .main .area_detail .box_cont .box_line .box {width:100%;}
  .main .area_detail .box_cont .box_line .box:hover {width:100%; background-color:#f5f6f8;}
  .main .area_detail .box_cont .box_line .box .normal .img img {width:100%;}

  .main .area_scale {padding:80px 0;}
  .main .area_scale .cont_wrap .box_cont {flex-direction:column;}
  .main .area_scale .cont_wrap .box_cont .box {width:100%; padding:0; flex-direction:row; justify-content:space-between;}
  .main .area_scale .cont_wrap .box_cont .box_list {padding:24px;}
  .main .area_scale .cont_wrap .box_cont .box_list .title {font-size:16px;}
  .main .area_scale .cont_wrap .box_cont .box_thumb .ic_scale {width:80px; height:80px;}
  .main .area_scale .cont_wrap .box_cont .box_thumb {margin-right:24px; display:flex; align-items:center;}
  .main .area_scale .title_wrap .desc {text-align:center;}

  .main .area_review {padding:40px 0;}
  .main .area_review .inner {padding:0;}

  .main .area_price {padding:60px 0;}
  .main .area_price .title_wrap .btn_wrap_link {justify-content:center;}
  .main .area_price .cont_wrap .box_cont {flex-direction:column;}
  .main .area_price .cont_wrap .box_cont .box {width:100%;}

  @keyframes upAnimation {
    0% {
      transform: translateY(200vh);
    }
    100% {
      transform: translateY(-10vh);
    }
  }

    /* 푸터 스타일 */
  .function .content_foot {padding:140px 0; margin: 0 auto; text-align: center; width: 100%;
    background: linear-gradient(to top, #fff, #824EEB);
  /* 텍스트 색은 불투명하게 */
  color: #fff;}

}


@media screen and (max-width: 425px) {
  br.m {display:block;}

}

@media screen and (max-width: 375px) {
  br.m {display:block;}


}


/* galaxy fold */
@media all and (max-width:280px){
  br.m {display:block;}
  .link_bn_mo img {width:100%;}
}



/* -------- 2025 hr MAIN -------- */
/* 배너 */
.hr_top_banner {position: relative; overflow: hidden; background: #E8E3FF;}
.hr_top_banner .slides {display: flex; width: calc(100% * 2); transition: transform 0.7s ease;}
.hr_top_banner .banner_contents {display: flex; flex-direction: row; flex-shrink: 0; align-items: center; max-width: 980px; width: 100%; margin: 0 auto; height: 244px; justify-content: space-between;}
.hr_top_banner .banner_contents .banner_msg {width: 400px;}
.hr_top_banner .banner_contents .banner_msg p.sub {color: #9E5FE3; text-align: left;}
.hr_top_banner .banner_contents .banner_msg p.title {margin-top: 10px; font-size: 32px; text-align: left; line-height: 140%;}
.hr_top_banner .banner_contents img {max-height: 180px; height: 100%};
.hr_top_banner .banner_contents .banner_msg p.title > span.point {color: #875BE9 !important;}
.hr_top_banner .button_wrap .banner_nav {pointer-events: auto;}
.hr_top_banner > .button_wrap { position: absolute; top: 0; left: 50%; width: 100%; max-width: 980px; height: 100%; transform: translateX(-50%); }
.hr_top_banner > .button_wrap .banner_nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding:0; background: #fff; border-radius: 50%; border: 1px solid transparent; transition: border-color 0.2s ease-in-out; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); z-index: 10; cursor: pointer;}
.hr_top_banner > .button_wrap .banner_nav:hover {border-color: #bbbbbb;}
.hr_top_banner > .button_wrap .banner_prev { left: -80px; }
.hr_top_banner > .button_wrap .banner_next { right: -80px; }
.hr_top_banner > .button_wrap .banner_prev::before,
.hr_top_banner > .button_wrap .banner_next::before {content: ""; display: block; width: 10px; height: 10px; border-top: 2px solid #c5c5c5; border-right: 2px solid #c5c5c5; margin: auto;}
.hr_top_banner > .button_wrap .banner_prev::before {transform: rotate(-135deg);}
.hr_top_banner > .button_wrap .banner_next::before {transform: rotate(45deg);}


.main .content_head .btn_wrap {padding:0 6%;}
.main .content_head .sub {font-weight: 300;}
.main .content_head .btn_wrap .hr_icons {margin-right: 4px;}
.main .content_head .btn_wrap .hr_icons.ic_gift {background: url(/images/hr_icons.png) 0 0 no-repeat; background-size: 400px 400px;}
.main .content_head .btn_wrap a.btn_general b {margin-left: 4px; color: #FFF944;}
.main .content_head .btn_wrap a.btn_ghost:hover {background: #f3efff;}
.main .content_head .visual_wrap img {margin: 0 auto;}

.main .area_overview .slider-container .slider {display: flex; flex-direction: row; gap: 42px;}
.main .area_overview .slider-container .slider .slide .card_list {border: 1px solid #eee; border-radius: 24px;}
.main .area_overview .slider-container .slider .slide .card_list img {width: 370px;}
.main .area_overview .slider-container .slider .slide .card_list .content {padding: 30px 34px;}
.main .area_overview .slider-container .slider .slide .card_list .content p.des {margin-top: 14px;}
.main .area_overview .title_wrap {margin-bottom: 0;}

.main .area_overview .tab_contents .box_wrap .box_thumb img.img_pc {width: 854px; height: 592px;}
.main .area_overview .tab_contents .box_wrap .box_thumb img.img_m {display:none; width: 100%;}

.main .area_review {background: #FAF7FF;}
.main .area_review .review_inner {position: relative; margin: 0 auto; max-width: 1200px;}
.main .area_review .review_inner .title {text-align: center;}
.main .area_review .review_inner .title img {margin: 0 auto; height: 109px;}
.main .area_review .review_inner .title h3 {margin-top: 40px; text-align:center !important;}
.main .area_review .review_inner .title p {margin-top: 16px;}
.main .area_review .review_inner .review_navigation button {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; width: 48px; height: 48px; background: #fff; border-radius: 24px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.10); box-sizing: border-box;  transform: translateY(-50%);}
.main .area_review .review_inner .review_navigation button::after {display: inline-block; content:""; clear: both; width: 24px; height: 24px; background: url(/images/hr_icons.png) 0 0 no-repeat; background-size: 400px;}
.main .area_review .review_inner .review_navigation button:hover {border: 1px solid #aaa; transition: none;}
.main .area_review .review_inner .review_navigation button.btn_prev {left: 0;}
.main .area_review .review_inner .review_navigation button.btn_next {right: 0;}
.main .area_review .review_inner .review_navigation button.btn_prev::after {background-position: -100px 0;}
.main .area_review .review_inner .review_navigation button.btn_next::after {background-position: -150px 0;}

.slider-container button {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; width: 48px; height: 48px; background: #fff; border-radius: 24px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.10); box-sizing: border-box; font-size: 0; z-index: 100; transform: translateY(-50%);}
.slider-container button::after {display: inline-block; content:""; clear: both; width: 24px; height: 24px; background: url(/images/hr_icons.png) 0 0 no-repeat; background-size: 400px;}
.slider-container button:hover {border: 1px solid #aaa; transition: none;}
.slider-container button.btn_prev,
.slider-container button.prev {left: 0; transform: translateX(-150%) translateY(-50%);}
.slider-container button.btn_next,
.slider-container button.next {right: 0; transform: translateX(150%) translateY(-50%);}
.slider-container button.btn_prev::after,
.slider-container button.prev::after {background-position: -100px 0;}
.slider-container button.btn_next::after,
.slider-container button.next::after {background-position: -150px 0;}

.main .area_add_free {padding: 100px 0; background: #F5F6F8;}
.main .area_add_free h4 {font-size: 48px; font-weight: 300; color: #333; line-height: 140%; letter-spacing: -4px; text-align: center;}
.main .area_add_free h4 b {font-weight: 500;}
.main .area_add_free .slider-container {position: relative; margin: 80px auto 0; max-width: 1200px;}
.main .area_add_free .slider-container .slider-wrapper {overflow: hidden;}
.main .area_add_free .slider-container .slider {display: flex; flex-direction: row; flex-wrap: wrap; gap: 36px; justify-content: center;}
.main .area_add_free .slider-container .slide {min-width: 376px; padding: 30px 24px; background: #fff; text-align: center; border-radius: 16px;}
.main .area_add_free .slider-container .slide .card_item {display: flex; flex-direction: column; gap: 15px;}
.main .area_add_free .slider-container .slide .card_item .hr_icons {margin: 0 auto;}
.main .area_add_free .slider-container .slide .tit {color: #6B3BE9;}
.main .area_add_free .slider-container .slide .desc {color: #6B6B6B;}

.hr_icons                           {display: inline-block; background: url(/images/hr_icons.png) 0 0 no-repeat; background-size: 400px 400px;}
.hr_icons.ic_gift                   {width: 24px; height: 24px; background-position: 0 0;}
.hr_icons.ic_qa                     {width: 24px; height: 24px; background-position: -50px 0;}
.hr_icons.ic_setting2               {width: 28px; height: 28px; background-position: 0 -50px;}
.hr_icons.ic_octagon                {width: 28px; height: 28px; background-position: -50px -50px;}
.hr_icons.ic_mobile_check           {width: 28px; height: 28px; background-position: -100px -50px;}
.hr_icons.ic_clipboard_check        {width: 28px; height: 28px; background-position: 0 -50px;}
.hr_icons.ic_clock_check            {width: 28px; height: 28px; background-position: -50px -100px;}
.hr_icons.ic_layout_dashboard       {width: 28px; height: 28px; background-position: -100px -100px;}
.hr_icons.ic_sitemap                {width: 28px; height: 28px; background-position: 0 -150px;}
.hr_icons.ic_cash                   {width: 28px; height: 28px; background-position: -50px -150px;}
.hr_icons.ic_file_text              {width: 28px; height: 28px; background-position: -100px -150px;}
.hr_icons.ic_gps                    {width: 40px; height: 40px; background-position: 0 -200px;}
.hr_icons.ic_security               {width: 40px; height: 40px; background-position: -50px -200px;}
.hr_icons.ic_messenger              {width: 40px; height: 40px; background-position: -100px -200px;}
.hr_icons.ic_sign                   {width: 40px; height: 40px; background-position: -150px -200px;}
.hr_icons.ic_ip                     {width: 40px; height: 40px; background-position: -200px -200px;}
.hr_icons.ic_report_money           {width: 40px; height: 40px; background-position: -250px -200px;}


/* -------- 반응형 -------- */
/* 아이패드 & 모바일 */
@media (max-width: 1200px) {
  .main .area_overview .slider-container button.nav {display: block;}
  .hr_top_banner {padding: 40px 0;}
  .hr_top_banner .banner_contents {flex-direction: column; height: initial;}
  .hr_top_banner .banner_contents .banner_msg p.sub,
  .hr_top_banner .banner_contents .banner_msg p.title {text-align: center;}

  .hr_top_banner .banner_contents img {width: 320px; height: auto;}

  .main .area_overview .slider-container .slider {flex-wrap: wrap; gap: 20px;}
  .main .area_overview .slider-container .slider .slide {width: calc(50% - 10px)}
  .main .area_overview .slider-container .slider .slide .card_list img {width: 100%;}

  .main .area_add_free .slider-container .slide {min-width: initial; width: calc(50% - 18px);}
}

/* 모바일 */
@media (max-width: 768px) {
  /* 이미지 대응 */
  img.pc {display: none !important;}
  img.mo {display: block !important;}

  .hr_top_banner .banner_contents .banner_msg p.title b {display: block;}
  .hr_top_banner .banner_contents .banner_msg {width: 100%;}

  .hr_top_banner { width: 100% !important; max-width: none !important; margin: 0 auto; box-sizing: border-box !important; overflow: hidden !important;}
  .hr_top_banner .slides { width: 200% !important; display: flex; box-sizing: border-box; padding: 0; margin: 0;}
  .hr_top_banner .slides > .banner_contents {flex: 0 0 50%; width: 50%; max-width: 50%; box-sizing: border-box; padding: 32px; margin: 0;}
  .hr_top_banner .banner_contents img {display: block; width: 100%; max-width: 300px; margin: 18px 0 0 0; height: auto;}
  .hr_top_banner .banner_msg p.sub,
  .hr_top_banner .banner_msg p.title {font-size: 28px; text-align: center !important;}
  .hr_top_banner .banner_msg p.sub {font-size: 14px !important;}
  .hr_top_banner .banner_msg p.title {font-size: 20px; line-height: 1.3 !important;}
  .hr_top_banner > .button_wrap .banner_prev, .hr_top_banner > .button_wrap .banner_next {display: none !important;}
 
  .main .area_overview .slider-container .slider .slide {width: calc(100%)}
  .main .title_wrap .title h4 {margin-bottom: 32px;}
  .main .area_review .review_inner .title img {width: initial; height: 54px;}
  .main .area_overview .cont_wrap .box_wrap {flex-direction: column-reverse;}
  .main .area_overview .cont_wrap .box_cont {padding-top: 0;}
  .main .area_overview .cont_wrap .box_cont .title {display: none;}
  .main .area_overview .tab_contents .box_wrap .box_thumb img.img_pc {display: none;}
  .main .area_overview .tab_contents .box_wrap .box_thumb img.img_m {display: block; width: 100%; height: auto;}

  .main .area_add_free h4 {font-size: 28px;}
  .main .area_add_free .slider-container {margin-top: 40px;}
  .main .area_add_free .slider-container .slider {gap: 12px;}
  .main .area_add_free .slider-container .slide {width: 100%;}


  .main .function .area_work_system {margin: 0;}
  .function .area_work_system .inner .title_wrap .title h4 {margin-bottom: 0;}

  .function .area_mark .inner .tag_wrap {flex-direction: column !important; align-items: center;}
  .function .area_mark .inner .title_wrap{padding: 20px;}
  .function .area_mark {padding-top: 0 !important; padding-block: 0 !important; }
  .function .area_mark .inner {margin: 0 !important;}
  .function .area_work_system {margin: 32px 0 0 !important; }
}





/* 하단 스타일 */

.function .area_category .title p.label.purple {display: inline-block; width: auto; padding: 4px 8px; color: #C271F3 ;background-color: #F9F1FE; border-radius: 8px;line-height: 140%;}
.function .area_work_system {display: flex; align-items: center; margin: 100px 0 0 0;}
.function .area_work_system .inner .title_wrap {text-align: center;}
.function .area_work_system .inner .title_wrap .title h4 {text-align: center;}
.function .area_work_system .inner .title_wrap p {font-size: 20px; font-weight: 400; color: #888;  }
.function .area_mark .inner {max-width: 1200px; width: 100%; padding: 50px 0 32px; margin: 80px auto; background-color:#F5F6F8; border-radius: 32px; }
.function .area_mark .inner .tag_wrap { display: flex; flex-direction: row; margin-top: 16px; }
.function .area_mark .inner .tag_list {display: flex; flex-direction: row; gap: 8px; align-items: center; vertical-align: middle; }
.function .area_mark .inner .tag_list .tag {background-color: #E9E9E9; padding: 8px; border-radius: 8px; }
.function .area_mark {display: flex; align-items:center;  margin-bottom: 20px; }
.function .area_mark .inner .title_wrap {display: flex; flex-direction: column; text-align: center;}
.function .area_mark .inner .title_wrap img {max-width: 114px; width: 100%; height: auto; margin: 0 auto 12px; }
.function .area_mark .inner .title_wrap h2 {font-weight: 400;}
.function .area_mark .inner .title_wrap p { font-size: 18px; font-weight: 400; color: #888;}
.function .area_mark .tag_wrap {display: flex; flex-direction: row; gap: 24px; width: 100%; max-width: 1200px; margin: 0 auto; justify-content: center; }