@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url('./humbleScroll.css');

@font-face {
  font-family: '나눔고딕';
  font-weight: normal;
  src: local('NanumGothicRegular.ttf'),
  url('../fonts/NanumGothic-Regular.ttf') format('truetype');
}

@font-face {
  font-family: '나눔고딕';
  font-weight: 700;
  src: local('NanumGothicBold.ttf'),
  url('../fonts/NanumGothic-Bold.ttf') format('truetype');
}

@font-face {
  font-family: '나눔고딕';
  font-weight: 900;
  src: local('NanumGothicExtraBold.ttf'),
  url('../fonts/NanumGothic-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: '나눔고딕';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NanumGothic-Regular.eot');
  src: url('../fonts/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/NanumGothic-Regular.woff2') format('woff2'),
  url('../fonts/NanumGothic-Regular.woff') format('woff'),
  url('../fonts/NanumGothic-Regular.ttf') format('truetype'),
}

@font-face {
  font-family: '나눔고딕';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/NanumGothic-Bold.eot');
  src: url('../fonts/NanumGothic-Bold.woff2') format('woff2'),
  url('../fonts/NanumGothic-Bold.woff') format('woff'),
  url('../fonts/NanumGothic-Bold.ttf') format('truetype'),
}

@font-face {
  font-family: '나눔고딕';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/NanumGothic-ExtraBold.eot');
  src: url('../fonts/NanumGothic-ExtraBold.woff2') format('woff2'),
  url('../fonts/fonts/NanumGothic-ExtraBold.woff') format('woff'),
  url('../fonts/fonts/NanumGothic-ExtraBold.ttf') format('truetype'),
}

* {font-family:'Pretendard Variable','나눔고딕',sans-serif;box-sizing:border-box;text-decoration:none;}


/* **************************************** *
* RESET FILES
* **************************************** */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,time,
figure,article,nav,header,footer,hgroup,video,audio,aside,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,
q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {padding:0; margin:0;box-sizing:border-box;font-weight: 400; word-break:keep-all;word-wrap:break-word}
p{padding:0; margin:0;}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;word-break:keep-all}
figure,section,article,header,footer,nav,hgroup,video,audio,aside,main{display:block}

.pt40 {padding-top:40px;}
.pb100 {padding-bottom:100px !important;}
.mt8 {margin-top: 8px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top:20px;}
.mt24 {margin-top: 24px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt100 {margin-top:100px;}
.mb80 {margin-bottom:80px;}
.ml6 {margin-left: 6px;}
.ml30 {margin-left: 30px;}
.mr30 {margin-right: 30px;}
.t36 {font-size: 36px;letter-spacing: -2.5px;color: #333;}
.t48 {font-size: 48px;letter-spacing: -1px;color: #333;word-break:keep-all;}
.t24b {font-size: 24px;letter-spacing: -1px;font-weight: 600;color: #000;padding:6px 0;}
.t36b {font-size: 36px;letter-spacing: -2px;font-weight: 600;color: #000;}
.t48b {font-size: 48px;letter-spacing: -2px;font-weight: 600;color: #000;padding:6px 0;}
.t60b {font-size: 60px;letter-spacing: -3px;font-weight: 600;color: #000;padding:6px 0;}
.t72b {font-size: 72px;letter-spacing: -1px;font-weight: 700;color: #000;}

/**** Logo Scroller : end ****/
#gototop {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 25px;
  z-index: 99;
  font-size: 13px;
  border: none;
  outline: none;
  background-color:rgba(24, 50, 74, .6);
  color: white;
  cursor: pointer;
  padding: 14px 15px;
  border-radius: 35px;
  animation:fadein ease 2s;
}
#gototop:hover {background-color: rgba(24, 50, 74, 1);}
/*본문 wrap*/
.wrapper {width:100%;background-color:#ffffff;margin: 0 auto;}/**/
/*각 영역*/
section {width:100%;/*max-width:1400px;*/margin:0 auto;box-sizing: border-box; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center;} /*width:100%; flex-direction:column-reverse;*/

/* GNB wrap */
.header {padding:30px 0 24px 0;justify-content:space-between;}
.header a.logo {width:100%;max-width:190px;height:42px;background: url(../img/header_logo.png) no-repeat;}
  /** Hamberger Menu : start **/
  #menu_toggle {opacity: 0;position:absolute;top:0;right:0;display:none;}
  #menu_toggle:checked ~ .btn_menu > span {transform: rotate(45deg);}
  #menu_toggle:checked ~ .btn_menu > span::before {top: 0;transform: rotate(0);}
  #menu_toggle:checked ~ .btn_menu > span::after {top: 0;transform: rotate(90deg);}
  #menu_toggle:checked ~ .menu_box, #menu_toggle:checked ~ .menu_bg {visibility: visible;right: 0;margin:0;}
  #menu_toggle .btn_menu.on {position: fixed;top: 119px;right: 30px;}

  .btn_menu {display:flex;align-items:center;position:relative;top:0px;right: 20px;width:24px;height:24px;cursor:pointer;z-index:99;}
  .btn_menu > span {display: block;position: absolute;width: 100%;height: 2px;background-color: #fff0;}
  .btn_menu > span::before,
  .btn_menu > span::after {display: block;position: absolute;width: 100%;height: 2px;background-color: #616161;transition-duration: .3s;}
  .btn_menu > span::before {content: '';top: -6px;}
  .btn_menu > span::after {content: '';top: 6px;}
  
  .menu_bg {position:fixed;visibility: hidden;top:90px;left:0;width:100vw;height:100vh;background-color:rgba(0, 0, 0, .6);z-index:97;}
  .menu_box {
    display: block;
    position: fixed;
    visibility: hidden;
    top: 90px;
    right: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    list-style: none;
    background-color: #FFFFFF;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
    transition-duration: .3s;
	  z-index:98;
  }
  .menu_box.custom_menu_box {display:none;}
  .menu_box li {display:block !important;height:auto !important;}
  .menu_item {
    display: block;
    padding: 0px 20px;
    color: #333;
    font-size: 20px;
    font-weight: 500 !important;
    text-decoration: none;
	border-bottom:1px solid #eaeaea;
    transition-duration: .3s;
  }
  .menu_box li ul {width:100%;padding:0;margin:0;background-color: #f4f6f7;}
  .menu_box li ul li {margin:0;}
  .menu_box li ul li a.menu_item {padding: 0px 40px;line-height: 42px;}
  .menu_box li.logo {width:200px;height:60px !important;margin-bottom: 10px;background:url(../img/header_logo.png) no-repeat left 87%;background-size:120px;}
  .menu_box li.logo > a {display:block;width:100%;height:100%;}
  /** Hamberger Menu :end **/

.header a, .header a:link,.header a:hover,.header a:visited.header a:active {color:#000;}
.header ul {display:inline-block; list-style:none;margin:0 40px 0 0;}
.header ul li {display:inline-block;font-size: 16px;font-weight: 600;height: 42px;line-height: 42px;margin:0 18px;}
.header ul li a,.header ul li a:visited {font-size: 16px;font-weight: 600;color:#000;text-decoration:none;}
.top_banner{position:fixed;top:0;left:0;right:0;z-index:999;min-height:40px;background-color:#252c32;display:flex;flex-direction:row;justify-content:center;align-items:center;}
.top_banner_content{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;padding:15px 0px;}
.top_banner_content > span{word-break: keep-all;}
.top_banner_content > .description{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;margin:0 30px 0 0;font-size:18px;color:#fff;}
.top_banner_content > .btns{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;}
.top_banner_content > .btns > .btn_banner{font-size:14px;font-weight:500;background-color:#fff;padding:7px 14px;border-radius:4px;color:#000;margin-left:10px;}
.top_banner_content > .btns > .btn_banner:first-child {background-color: #7aedff;}
.submenu{display:none;position: absolute; left: 190px; background-color: rgb(255, 255, 255); border-radius: 10px; box-shadow: rgba(96, 125, 139, 0.2) 0px 0px 20px 4px;z-index: 3;}
#submenu_services.submenu{left: 107px;}
/*도입문의 버튼*/
.btn_inquiry {display:inline-block;border:none;font-size: 16px;font-weight: 600;height: 42px;line-height: 42px;margin-left:10px;}
.btn_inquiry > a:before {
  content: '';
  display:inline-block;
  position:relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  margin:0px 6px 0px 0px;
  vertical-align:middle;
  background:url(../img/img_js@3x.png) no-repeat left center;
  background-size: 100% auto;
  cursor: pointer;
}
/* GNB 내 버튼 */
.btn_gbn {display:inline-block;border:2px solid #d2d4d4;background-color: #fff;padding:0 30px;font-size: 16px;font-weight: 600;height: 42px;line-height: 38px;border-radius: 40px;margin-left:10px;}
/*index 본문 도입문의,가입하기*/
.btn_keyv {display:inline-block;border:2px solid #d2d4d4;background-color: #fff;padding:0 30px;font-size: 21px;font-weight: 600;height: 56px;line-height: 52px;border-radius: 40px;margin-right:10px;}
/*index 본문 하단 도입문의*/
.btn_withpine {display:inline-block;width:700px;background:linear-gradient(90deg, #ae36ea, #5c80ea);color:#fff;font-size:40px;font-weight: 600;padding:30px;border-radius:40px;border:none;}

/*index keyvisual*/
.kleft {background-color:#fff;padding:20px 0px;margin-bottom:80px;word-break:keep-all;}
/*index keyvisual*/
.kright {background-color:#fff;}
/*index keyvisual 텍스트*/
.kleft .keyt1 {font-size:86px;font-weight:700;color:#000;line-height:90px;}
.kleft .keyt30 {font-size:30px;font-weight:300;color:#000;letter-spacing:-1px;margin:18px 0 18px 0;word-break:keep-all;}
.kleft .keyt36b {font-size:36px;font-weight:700;color:#000;letter-spacing:-1px;margin-bottom:30px;}
/*talk bubble  */
.bg_talk {background-color:#f79f48;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;}
.box_talk {text-align:center;/*flex:0 0 calc(100%/4);*/height:100vh;max-height:457px;width:100%;max-width:330px;margin:25px 10px;}
/*.box_talk.tlk01 {background:url(../img/talk01.png) no-repeat center; background-size:contain;}
.box_talk.tlk02 {background:url(../img/talk02.png) no-repeat center; background-size:contain;}
.box_talk.tlk03 {background:url(../img/talk03.png) no-repeat center; background-size:contain;}
.box_talk.tlk04 {background:url(../img/talk04.png) no-repeat center; background-size:contain;}*/

/*Pine Circle*/
.pinecircle {width:100%;text-align:center;padding: 96px 40px 800px;background: url(../img/img_pinecircle@2x.png) no-repeat center 160px; background-size:contain;}
/*card*/ 
.cardbox {position:relative;width:100%;min-height:800px;border-radius:30px;box-shadow:0px 0px 30px 0px #607d8b33;margin:10px 0px;/*padding:60px 40px 30px 100px;*/}
.card h1 {font-size:52px;font-weight:700;letter-spacing:-2px;color:#000;margin:0px;word-break:keep-all;}
.card h2 {font-size:26px;font-weight:600;letter-spacing:-2px;line-height:150%;word-break:keep-all;padding-top:40px;}
.card p {font-size:20px;font-weight:500;word-break:keep-all;line-height:150%;letter-spacing:-1px;word-break:keep-all;padding-top:20px;}
.card .name {position: absolute;bottom: 28px;left: 40px;font-size: 16px;font-weight: 500;letter-spacing:-0.3px;word-break:keep-all;}

.card01 h2 {color:#183dc9;}
.card01 p, .card04 p, .card06 p {max-width:550px;}
.card03 p {max-width:56%;}
.card05 p {max-width:600px;}
.card07 p:nth-child(4) {/*max-width:55vw;*/padding-top:10px;}
.card02 h2 {color:#f9a300; /*margin-top:27px;*/}
.card03 h2 {color:#fe8282; margin-top:45px;}
.card04 h2 {color:#19c4c2;}
.card05 h2 {color:#778eea;}
.card06 h2 {color:#7fcd39;}
.card07 h2 {color:#199ef3;}
.card01 {background:#fff url(../img/cardimg01@2x.png) no-repeat right bottom;background-size:contain;padding:100px;min-height:800px;/*padding-top:100px;padding-right:50%;*/}
.card02 {background:#fff url(../img/cardimg02@2x.png) no-repeat center bottom 60px;background-size:contain;padding:80px 100px;min-height:800px;}
.card03 {background:#fff url(../img/cardimg03@2x.png) no-repeat right bottom;background-size:contain;padding:80px 100px;min-height:800px;}
.card04 {background:#fff url(../img/cardimg04@2x.png) no-repeat right bottom;background-size:contain;padding:80px 100px;min-height:800px;}
.card05 {background:#fff url(../img/cardimg05@2x.png) no-repeat left bottom;background-size:contain;padding-left:700px;padding-top:155px;min-height:800px;}
.card06 {background:#fff url(../img/cardimg06@2x.png) no-repeat left bottom;background-size:contain;padding-left:440px;padding-top:115px;min-height:800px;}
.card07 {background:#fff url(../img/cardimg07_r@2x.png) no-repeat right bottom;background-size:50%;padding-left:100px;padding-top:115px;min-height:800px;}
/* reference 영역 */
.reference {width:100%;text-align:center;padding: 96px 0px 100px;}
.reference .boxwrapper {display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;margin: 115px 0 125px;}
.boxwrapper .box {height:152px;background-color:#fef7e5;padding:0 45px 0 38px;border-radius:100px;font-size:90px;font-weight:700;letter-spacing:-3px;color:#0f29a5; white-space:nowrap;margin:10px 0;}
.boxwrapper .box:before {
  /*content: "";*/
  display:inline-block;
  position:relative;
  z-index: 1;
  width: 72px;
  height: 100px;
  margin:16px 24px 50px 0;
  vertical-align:middle;
}
.boxwrapper .box:after {
  /*content: "";*/
  display:block;
  position:relative;
  z-index: 100;
  top:-3px; width:100%;height:30px;background:none;color:#000;font-size:clamp(25px, 3vw, 30px);letter-spacing:-0.8px; line-height:30px;
}
.boxwrapper .box > span {font-size:30px;color:#000;margin-left:10px;letter-spacing:0px;}
.patent:before {content: "";background: url(../img/ico_patent.png) no-repeat top left;}
.patent:after {content: "최다 특허 보유";}
.client:before {content: "";background: url(../img/ico_client.png) no-repeat top left;}
.client:after {content: "근태관리 전문 기술력";}
.pc:before {content: "";background: url(../img/ico_pc.png) no-repeat top left;}
.pc:after {content: "검증된 사용 경험";}
/*Client 영역*/
.bg_client {width:100%;background-color:#f4f4f4;display:block;text-align:center;padding:55px 0 70px;font-size: 16px;letter-spacing: -0.5px;color: #333;}
.logo-list li img {width:180px;}
/*withpine 영역*/
.withpine_wrap {width:100%;padding:100px 40px;text-align:center;}
.osinfo {font-size:14px;font-weight:500;line-height:150%;letter-spacing:-0.03rem;word-break:keep-all;}
.dwn {width:700px;display:flex;align-items:center;margin:70px auto 30px;}
.dwn a {display:inline-block;width:160px;height:50px;background-color:#252728;border:none;color:#fff;font-size:13px;border-radius:8px;margin:0 5px;padding:17px;text-decoration:none;text-align:center;}
.dwn a span:before {
  content: '';
  display:inline-block;
  position:relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin:-2px 8px 0px 0px;
  vertical-align:middle;
}
.dwn a.mac span:before {background: url(../img/ico_apple.png) no-repeat left;}
.dwn a.win span:before {background: url(../img/ico_win.png) no-repeat left;}
.dwn a.ios span:before {background: url(../img/ico_apple.png) no-repeat left;}
.dwn a.google span:before {background: url(../img/ico_google.png) no-repeat left;}
.dwn_pc {white-space: nowrap;margin-right: 10px;padding-top:40px;position:relative;}
.dwn_pc:before {content: "PC 앱 다운로드";position:absolute;top:0;left:calc(50% - 60px);font-weight:500;font-size:20px;}
.dwn_mobile {white-space: nowrap;margin-left: 10px;padding-top:40px;position:relative;}
.dwn_mobile:before {content: "Mobile 앱 다운로드";position:absolute;top:0;left:calc(50% - 75px);font-weight:500;font-size:20px;}

/* footer */
.footer {width:100%;background-color:#2d2d2d;padding:70px 20px 70px;display:flex;justify-content: center;}
.footer .logo {background:url(../img/footer_logo.png) no-repeat;background-size:contain;width:152px;height:30px;}
.footer img {vertical-align:top;}
.footer a, .footer a:visited {font-size:14px;font-weight:300;color:#c8c8c8}
.footer .info {width:60%;display:inline-block;font-size:14px;font-weight:300;color:#c8c8c8;line-height:170%;margin:0 0 0 75px;letter-spacing:0.5px;}
.footer .info span {margin-right:20px;font-weight: normal;}
.footer select {min-width:180px;background-color:#2d2d2d;color:#bbb;font-size:14px;border:1px solid #cccccc; padding:6px 10px;cursor:pointer;appearance:none;background:#2d2d2d url('../img/footer_selectarr.png') no-repeat right 10px top 10px;}

  /**** Text Gradation : start ****/
.tGRD {
  animation:tGRD 3s linear infinite alternate-reverse;
  animation-play-state:paused;
  background:linear-gradient(135deg,#fa00ff,#00e0ff 50%,#fa00ff);
  -webkit-background-clip:text;
  background-clip:text;
  background-size:500%;
  color:transparent;
}
.tGRD_b {
  animation:tGRD 3s linear infinite alternate-reverse;
  animation-play-state:paused;
  background:linear-gradient(135deg,#fa00ff,#00e0ff 50%,#fa00ff);
  -webkit-background-clip:text;
  background-clip:text;
  background-size:500%;
  color:transparent;
  /*font-size:34px;
  font-weight:300;*/
}
.tGRD:hover, .tGRD_b:hover {animation-play-state:running;color:#0000;}
@keyframes tGRD {
    0%{background-position:100% 0}
    to{background-position:12% 100%}
}
/**** Text Gradation : end ****/


/* //The Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /*background-color: rgba(255,255,255,0.4);/* rgba(0,9,16,0.5)*/
  backdrop-filter:blur(4px);
}

/* Modal Content */
.modal_cont {
  background-color: #fefefe;
  margin: auto;
  padding: 60px 20px;
  max-width:1000px;
  width: 96%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-60%);
  text-align:center;
  box-shadow:0px 0px 20px 7px rgb(0 0 0 / 15%);
}
.modal_cont table {max-width:900px;width:100%;margin:0 auto;margin-top:40px;}
.modal_cont .gr {background-image: linear-gradient(to left, #183dc9, #9f3eba, #f59b00);}
.modal_cont th {border-right:1px solid rgba(255,255,255, 0.6);color:#fff;padding:18px;text-align:center;font-size:14px;word-break:keep-all;}
.modal_cont th:last-child {border-right:none;}
.modal_cont td {border-right:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9; border-top:none;background-color:#fff;padding:18px;text-align:center;line-height:150%;vertical-align:middle;font-size:14px;word-break:keep-all;}
.modal_cont td:first-child {border-right:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9;border-left:1px solid #b9b9b9;border-top:none;}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 33px;
  display:inline-block;
  position:relative;
  top:-48px;
  right:0px;
}  
.close:hover,.close:focus {color: #0c1a26;text-decoration: none;cursor: pointer;}
/* The Modal // */

.div50 {
  display:inline-block;
  flex:1 1 auto;
  width:50%;
  box-sizing:border-box;
  margin:0;
  padding:30px 10px 30px 10px;
  text-align: center;
}
.div50 p.info {
  display:block;
  font-size:24px;
  font-weight:300;
  color:#666;
  letter-spacing:-2px;
  line-height:140%;
  text-decoration:none; word-break:keep-all;/*new-20240311*/
  /*vertical-align:top;*/
}
.div50 .t2 {
  color:#000;
  font-weight:600;
  font-size:33px;
  letter-spacing:-0.8px;
  margin:0 0 20px 0;
}

/* ************** Privacy ************** */
.policywrapper {width:100%;margin:0 auto;}
.policywrapper * {font-family:'나눔고딕','Pretendard Variable',sans-serif !important;}

.policywrapper > h1 {font-size:30px; font-weight:600;padding:40px 0; text-align:center;}
.policywrapper .cont {display: block;width: 100%;max-width: 1400px;padding:20px 20px 40px 20px;margin: 0 auto;}

.policywrapper select {padding:5px 8px;border:1px solid #cccccc;font-size:12px;margin-bottom: 20px;cursor: pointer;}
.policywrapper select.policy_select {padding-right: 30px;background-color:white;color:#000;appearance: none;-webkit-appearance: none;-moz-appearance:none;background-repeat: no-repeat;background-position: right 3px center;background-size: 15px;background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");}
.policywrapper .error-message {text-align: center;}

.policywrapper #policy_content * {all:revert;}
@supports (all: revert-layer) {
  .policywrapper #policy_content * {all:revert-layer;}
}
.policywrapper #policy_content img {max-width:100%!important;height:auto!important;}

.policywrapper #policy_content h1,
.policywrapper #policy_content h2,
.policywrapper #policy_content h3,
.policywrapper #policy_content span,
.policywrapper #policy_content p {line-height: normal;}

.policywrapper #policy_content code,
.policywrapper #policy_content p,
.policywrapper #policy_content span,
.policywrapper #policy_content pre {white-space:break-spaces;}

.policywrapper #policy_content table,
.policywrapper #policy_content table tr,
.policywrapper #policy_content table td {border: none !important;border-collapse: collapse !important;height: fit-content;}

.policywrapper #policy_content table {max-width: 100% !important;height: fit-content !important;table-layout: fixed !important;}
.policywrapper #policy_content table tr {border-top: 1px solid #000 !important;height: fit-content !important;}
.policywrapper #policy_content table tr:last-child {border-bottom: 1px solid #000 !important;}
.policywrapper #policy_content table td {border-left: 1px solid #000 !important;}
.policywrapper #policy_content table td:last-child {border-right: 1px solid #000 !important;}


.table_warp {width:100%;max-width:900px;display: flex;flex-direction: column; justify-content: flex-start;align-items: center;margin: 0 auto;}

.table_warp .table_label {width: 100%; font-size:16px;justify-content: flex-start;}
.table_warp table {max-width:900px;width:100%;margin-top:5px;}
.table_warp th {border-top:1px solid #b9b9b9;border-right:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9;color:#000;padding:18px;text-align:center;font-size:14px;transform : skew(-0.03deg);}
.table_warp th:first-child {border-left:1px solid #b9b9b9;}
.table_warp td {border-right:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9; border-top:none;background-color:#fff;padding:18px;text-align:center;line-height:150%;vertical-align:middle;font-size:14px;transform : skew(-0.03deg);}
.table_warp td:first-child {border-right:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9;border-left:1px solid #b9b9b9;border-top:none;}


/* ************** Guide, License ************** */
.guidewrapper {margin:0 auto; overflow:hidden;font-size:13px;font-family:'나눔고딕','Pretendard Variable',sans-serif !important;}
.guidewrapper * {font-family:'나눔고딕','Pretendard Variable',sans-serif !important;}
.guidewrapper .container {max-width:1400px;margin:0 auto;}
.guidewrapper .right {flex:1;margin:40px 0 60px;}
.guidewrapper a {color:#03a9f4;font-size:13px;text-decoration:none;font-size:13px;font-family:'나눔고딕','Pretendard Variable',sans-serif !important;}
.guidewrapper a:hover {text-decoration:underline;}
.guidewrapper a:visited {color:#03a9f4;font-size:13px;}
.guidewrapper .location {color:#03a9f4;margin-bottom:14px;font-family:'나눔고딕','Pretendard Variable',sans-serif;}
.guidewrapper t2 {font-size:30px;color:#0c1a26;display:block;letter-spacing:-1px;}
.guidewrapper t3 {font-size:24px;color:#0c1a26;display:block;letter-spacing:-1px;}
.guidewrapper .imgarea {margin-bottom:20px;text-align:left;/*background-color:#efefef;*/}
.guidewrapper p {line-height:150%;font-family:'나눔고딕','Pretendard Variable',sans-serif !important;}
.guidewrapper nav {display:flex;height:calc(100vh - 84px);width:230px;font-family:'나눔고딕','NanumSquare',sans-serif;padding:0 10px;border-right:1px solid #eee;overflow-y:auto;margin:60px 50px 0 0;}
.guidewrapper nav ul.dpth01 {}
.guidewrapper nav ul li {padding:0 0 0 0;line-height:160%;cursor:pointer;font-family:'나눔고딕','Pretendard Variable',sans-serif !important;}
.guidewrapper nav ul li:before {content: '>';position:relative;z-index:-1;padding:0 4px 0 0;font-size:12px;font-family:auto,'NanumSquare',sans-serif;}
.guidewrapper nav ul li:hover {color:#03a9f4;text-decoration:underline;}
.guidewrapper nav ul.dpth02, .guidewrapper nav ul.dpth03 {margin:0 0 0 12px;}
.guidewrapper nav ul.dpth03 li:before {content: '';position:absolute;z-index:-1;}

.licenseWrap {font-family:나눔고딕,'Nanum Gothic','NanumSquare',sans-serif !important;}/**/
.tit01 {font-family:나눔고딕,'Nanum Gothic','NanumSquare',sans-serif;font-size:24px;font-weight:600;color:#0c1a26;display:block;letter-spacing:-1px;}
.txt16 {font-size:16px;}
.lcsunit {margin:20px 0 0 0;}
.lcsname {font-size:16px;font-weight:600;padding-bottom:4px;}
.lcsname:before {content: "•";position:relative;z-index:-1;font-size:18px;/*padding:0 5px 0 0;*/}
.lcscont {padding-left:14px; line-height:140%;}
.lcscont > a, span {word-break: break-all;font-weight:500;}
.lcscont > a[target="_blank"] {}
.lcscont span {word-break: keep-all;}

.tabset {max-width: 870px;margin-top:20px;font-family:'나눔고딕','Pretendard Variable',sans-serif !important;}/*위치 변경하면 안됨*/
.tabset section {display:block;width:100%;}
.tabset > input[type="radio"] {position: absolute;left: -200vw;}
.tabset .tab-panel {display: none;width:100%;}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {display: block;} 
.tabset > label {position: relative;display: inline-block;padding: 10px 20px 10px;border: 1px solid #ccc;border-bottom: 0;cursor: pointer;font-size:16px; font-weight:600;width:180px;text-align:center;}
.tabset input:focus-visible + label {outline: 2px solid rgba(0,102,204,1);border-radius: 3px;}   
.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {color: #fff;background:#094c7d;border-color:#094c7d;}
.tabset > input:checked + label {border-color:#094c7d;margin-bottom: -1px;}
.tab-panel {padding: 20px 0;border-top: 1px solid #ccc;}

/* ************** with Pine(도입문의) ************** */
.bg_withpine {
  background:url(../img/keyv_bg.png) center top 200px no-repeat, url(../img/bg_blur.png) -360px 66% no-repeat, url(../img/bg_blur.png) 170% 180% no-repeat/**/;
  background-size:80vh,60%,80%;
}
.vertical_container{display: flex;flex-direction: column;padding:0 40px;}
.t_withpine {font-size:86px;font-weight:700;padding:80px 40px 0 40px;}
.subt {color:#000;font-size:34px;font-weight:300;letter-spacing:-1px;padding:20px 40px;line-height:140%;margin:0 auto;word-break:keep-all;}/*font-size:34px;*/
.subt strong {font-weight:600;word-break:keep-all;}/*800*/

.formfield {
  max-width:900px;
  width:96%;
  margin:0 auto;
  margin-top:120px;
  margin-bottom:120px;
  padding:30px 20px 50px 20px;
  background-color:rgba(255,255,255, .5);
  box-shadow:0px 0px 30px 10px rgba(4, 6, 60, 0.08);
  backdrop-filter:blur(6px);
}
.formfield .prcs {max-width:700px;text-align:left;margin:0 auto;font-size:15px; padding:40px 0;border-bottom:1px dotted #d4d4d4;word-break:keep-all;}
.formfield .prcs:last-child {border:none;}
.formfield .prcs .list {display:flex; align-items:baseline;width:100%;flex-wrap:nowrap;margin-bottom:10px;}
.formfield .prcs div {/*display:inline-block;margin:0px 10px 6px 0;*/word-break:keep-all;}
.num_bg1 {color:#fcb93f; font-size:18px;}/*9ea3a8*/
.num_bg2 {color:#00d26a; font-size:18px;}/*6d767d*/
.num_bg3 {color:#0074ba; font-size:18px;}
.formfield .prcs div.title {white-space:nowrap;padding-right:10px;min-width:130px;font-size:15px; font-weight:600;letter-spacing:-0.5px;}
.formfield .prcs div.info {letter-spacing:-0.4px;}
.formfield form div {margin-bottom:10px;}
.formfield form#frm div {text-align:center;}
.formfield form p {max-width:640px;width:100%; text-align:left;margin:0px auto 5px;color:#000;font-size:15px;font-weight:400;}
.formfield form p span {color:#f90505;}
.formfield label {display:none;}
.formfield input, .formfield textarea {
  max-width:640px;
  width:100%;
  margin-bottom:10px;
  padding:13px 18px;
  font-size:16px;
  font-weight:500;
  /*background-color:rgba(255,255,255, .6);*/
  border:1px solid #d4d4d4;
  box-sizing:border-box;
}
.formfield select {
  max-width:640px;
  width:100%;
  margin-bottom:10px;
  padding:13px 18px;
  font-size:15px;
  font-weight:600;
  border:1px solid #d4d4d4;
  appearance:none;
  background:url('../img/arrow.png') no-repeat right 16px center;
}
.formfield select option[value=""][disabled] {/*display: none;*/color:#999;font-weight:400;}
.formfield select:invalid {color:#999;font-weight:400;}
.formfield input::placeholder, .formfield textarea::placeholder {color:#999;font-weight:400;}
.formfield input:focus, .formfield select:focus, .formfield textarea:focus {outline:none;border: 1px solid #007d8f;}
.formfield input[type="checkbox"] {display:none;}
.formfield input[type="checkbox"] + label{
  display: inline-block;
  width: 21px;
  height: 21px;
  border:1px solid #b9b9b9;
  position: relative;
  vertical-align:middle;
  /*margin-right:8px;*/
}
.formfield input[type="checkbox"]:checked + label::after{ 
  content:'\2713';
  color:#fff;
  font-size: 14px;
  font-weight:bold;
  width: 21px;
  height: 21px;
  text-align: center;
  position: absolute;
  left: -1px;
  top:-1px;
  background-color: #4b99f8;
  border:1px solid #4b99f8;
  box-sizing:border-box;
}

.formfield p a {
  display:inline-block;
  padding:4px; 
  color:#199ef3;
  font-size:15px;
  text-decoration:underline;
  cursor:pointer;
}

.btn_wrap_center{text-align:center;}

.btn_04 {
  display:inline-block;
  background-color:#333;
  color:#fff;
  font-size:21px;
  font-weight:bold;
  padding:18px 60px 17px 60px; 
  border-radius:100px;
  white-space:nowrap;
  text-decoration:none;
  line-height:150%;
}

/* ************** Price(서비스 요금) ************** */
.bg_price {background:url(../img/keyv_bg.png) top right no-repeat;background-size:700px;}
.product_container {display:flex;margin:auto;width:100%;max-width:1180px;justify-content:space-between;margin:60px 0;flex-wrap:wrap;justify-content:center;}
.t_price {font-size:60px; font-weight:700;padding:80px 40px 0 40px;word-break:keep-all;text-align:center;}
.t_price + .subt {margin:20px 0 -10px 0;}
.product_intro_box {
  display: flex;
  flex-direction:column;align-items:center;
  position:relative;
  flex: 1 1 calc(100% /3);
  max-width: 31.6%;
  min-width: 289px;
  box-sizing: border-box;
  border: 2px solid #bde4e1;
  border-radius: 7px;
  padding: 50px 30px;background-color:#fff;margin:10px;
  /* box-shadow: 0px 0px 20px 3px #23a79d38; */
  }

.product_intro_box > * {width:100%;max-width:260px;}

.recommend {
  border: 2px solid #a2b3f5;box-shadow: 0px 0px 20px 3px #778eea70;
  & > .product_name{
  color: #183dc9;}
  }
.recommend_img {position: absolute;top: 27px;/*left: 30px;object-fit: contain;*/}

.product_name {
  color: #000;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
  
  .kor {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -1px;
    }
  }
.product_desc {font-size: 16px;line-height: 140%; color: #333;font-weight: 600;letter-spacing: -0.5px;word-break:keep-all;}

.month_price {font-size: 13px;color: #666;}
.price {font-size: 40px;font-weight: 700;color: #000;letter-spacing:-1.5px;}
.price_uint {font-size: 13px;color: #666;font-weight: 500;}

.btn_contract {
  background-color: #d3edeb;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  cursor: pointer;
  color: #000;
  &:hover { background-color: #23a79d; color:#fff; }
  }

.recommend_btn_contract {
  background-color: #fff;
  color: #333;
  border: 2px solid #758de9;
  &:hover { background-color: #758de9; color:#fff}
  }
.recommend_baseText {font-size:14px;color: #183dc9;font-weight: 600;}
.baseText {font-size:14px;color: #23a79d;font-weight: 600;}
.functions {font-size: 13px;color: #000;font-weight: 600;}
.functions_text{font-size: 14px;font-weight:500;color: #333;letter-spacing: -0.5px;}
.functions_text:before {
  content: '';
  display:inline-block;
  position:relative;
  z-index: 1;
  width: 15px;
  height: 11px;
  margin:0px 6px 0px 0px;
  vertical-align:middle;
  background:url(../icon/ico_check_mint.png) no-repeat left center;
  }
.functions_recomend_text:before {
  content: '';
  display:inline-block;
  position:relative;
  z-index: 1;
  width: 15;
  height: 11;
  margin:0px 6px 0px 0px;
  vertical-align:middle;
  background:url(../icon/ico_check_indigo.png) no-repeat left center;
  }

.dtltable_container {width:100%;max-width:1200px;position:relative;padding:0 20px;}
.btn_toggle {opacity: 0;position:absolute;top:0;width:100%;height:50px;margin:0;cursor:pointer;}
.btn_expand {background-color:#fff;border:1px solid #e7e9eb/*#4465e1*/;font-size:16px;font-weight:600;color:#183dc9;cursor:pointer;width:100%;height:50px;text-align:center;line-height:50px;}
.btn_expand:hover {background-color:#eff8f7;border:1px solid #23a79d;}
.btn_toggle:checked ~ .details_box {display:none;}
.btn_toggle:checked ~ .btn_expand > span:before {content: '▼';}
.btn_expand > span {background-color: #fff0;display:inline-block;}
.btn_expand > span:before {content: '▲';font-size:11px;margin-left:6px;color:#183dc9;}

.details_box > table {width:100%;border-left:1px solid #e7e9eb;}
.details_box {display:block;width:100%;}
.details_box > table .plan_title_box {position:sticky;top:60px;background: #fff;box-shadow:0px 3px 9px 3px #4f50543b;}
.details_box > table .plan_title_box > th {width:20%;min-height:80px;text-align:center;background: #fff;}
.details_box > table .plan_title_box > th:nth-child(1) {width:40%;}
.details_box > table .plan_title_box > th.product_name {
  color: #000;
  font-size:clamp(16px, 2vw, 21px);
  font-weight: 600;
  padding:36px 10px 20px 10px;
  letter-spacing: -1px;
  vertical-align:middle;
  line-height:90%;
  word-break:keep-all;/**/
  .kor {font-size: 13px;font-weight: 600;letter-spacing: -1px;word-break:keep-all;white-space:nowrap;}
  }
.details_box > table .plan_title_box > th.recommend {color: #183dc9;border:1px solid #183dc9;border-bottom:none;background:#fff url(../img/img_recmnd_s.png) no-repeat top 10px center;box-shadow:none;}
.details_box > table th {width:20%;background-color:#f5f5f5;border-bottom:1px solid #e7e9eb;padding:14px 20px;font-size:16px;font-weight:600;}
.details_box > table th:nth-child(1), .details_box > table td:nth-child(1) {width:40%;}
.details_box > table th:nth-child(3), .details_box > table td:nth-child(3) {border-left:1px solid #183dc9;border-right:1px solid #183dc9;}
.details_box > table tr:last-child td:nth-child(3) {border-bottom:1px solid #183dc9;}
.details_box > table tr:hover {background-color:#fffde8;}
.details_box > table td {/*background-color:#fff;*/border-right:1px solid #e7e9eb;border-bottom:1px solid #e7e9eb;padding:8px 10px;font-size:14px;font-weight:500;text-align:center;word-break:keep-all;}
.details_box > table td:nth-child(1) {text-align:left;}
.details_box > table td:nth-child(2), 
.details_box > table td:nth-child(4) {background:url(../icon/ico_check_mint.png) no-repeat center;}
.details_box > table td:nth-child(3) {background:url(../icon/ico_check_indigo.png) no-repeat center;}
.details_box > table td.N {background:url(../icon/ico_check_none.png) no-repeat center;}
.details_box > table td.Z {background:none;}
.planinfo {width:100%;padding:30px 20px;font-size:13px;font-weight:500;line-height:140%;word-break:keep-all;}
.planinfo span {display:flex;}
.planinfo span:before {content: '• '; margin-right:6px;}
.ptype_wrapper {position:relative;margin:60px 0 0 0;}
.ptype_wrapper .save {position:absolute;right:-50px;top:-36px;z-index:5;}

.switch {
  position: relative;
  display: block;
  width: 180px;
  height: 52px;
  background: #fff;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0px 0px 12px -5px #748492b5 inset;
}
.switch:before {
  content: "월간";
  color: #000;
  /*background: #edeff3;*/
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-5%, -50%);
  font-size: 1.2rem;
  font-weight:500;
  width: 50%;
  height: 90%;
  display: grid;
  place-items: center;
  border-radius: 30px;
  transition: all 250ms ease;
}
.switch:after {
  content: "연간";
  background:linear-gradient(115deg, rgba(119, 142, 234, 1) 0%, rgb(0 35 169) 100%);
  color: #fefefe;
  position: absolute;
  top: 50%;
  left: 95%;
  transform: translate(-95%, -50%);
  font-size: 1.2rem;
  width: 50%;
  height: 90%;
  display: grid;
  place-items: center;
  border-radius: 30px;
  transition: all 250ms ease;
}

#ptype {
  display: none;
}

#ptype:checked ~ .switch:before {
  left: 50%;
  content: "연간";/*"Matrix"*/
}

#ptype:checked ~ .switch:after {
  left: 50%;
  content: "월간";/*"Radial"*/
}

.faq_box {width:100%;padding:20px 20px 20px 54px;background:#eff8f7 url(../icon/ico_info.png) no-repeat left  20px top 20px;line-height:150%;}
.faq_box t2 {display:block;font-size:20px;font-weight:600;margin-bottom:6px;}
.faq_box a {display:flex;font-size:15px;font-weight:400;color:#23a79d;margin-left:-12px;word-break:keep-all;}
.faq_box a, .faq_box a:visited {color:#23a79d;}
.faq_box a:hover {color:#23a79d;text-decoration:underline;}
.faq_box a:before {content:'• ';margin-right:6px;}


.bg_dwn {background:url(../img/keyv_bg.png) bottom -250px right -260px no-repeat;background-size:800px;}

#loading{display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#fff;text-align:center;zoom:1;filter:alpha(opacity=60);opacity:0.6;z-index:9999}
#loading img{position:absolute;top:50%;left:45%;width:48px;height:48px;z-index:10000}

.strong {font-weight:600;}

/* ******************************************************************************** *
* 모바일 (320px < 가로 < 411px)
* ******************************************************************************** */
@media (min-width: 320px) and (max-width: 411px) {
  .card07 {background:#fff url(../img/cardimg07_r@2x.png) no-repeat center bottom 16px !important;background-size:100% !important;width:94vw;margin-left:3vw;height:108vh !important;min-height:650px !important; padding:12vw 10vw 8vh}
}

/* ******************************************************************************** *
* 가로모드 모바일 (가로 < 768px)
* ******************************************************************************** */
@media (max-width: 767px) {
  .wrapper{width:100%;}
  section{width:100%;}
  .vertical_container{display: flex;flex-direction: column;padding:0 40px;margin-top: -80px;}

  .header {padding:20px 10px 24px 20px;justify-content:space-between;}

  .kleft {padding:20px 40px 0 40px;margin-bottom: 40px;}
  .kleft .keyt1 {font-size:clamp(60px, 22vw, 86px);font-weight:700;color:#000;line-height:90px;letter-spacing:-0.4vw;word-break:keep-all;}
  .bg_dwn {background:url(../img/keyv_bg.png) bottom -250px right -260px no-repeat;}
  .btn_keyv {padding:0 18px;margin:0px 12px 10px -6px;}
  .btn_keyv:last-child {margin-right:0;}
  .btn_keyv span {word-break:keep-all;letter-spacing:-1px;font-size:clamp(16px, 5.5vw, 21px);}
  .kright img {width:100%;max-width:352px;}

  .box_talk img {width:100vw;max-width:330px;}

  /*.t72b {font-size:4em;letter-spacing:-1px;}*/
  .t36 {font-size:clamp(24px, 3vw, 36px);letter-spacing:-1px; word-break:keep-all;}
  .t48 {font-size:clamp(31px, 3vw, 48px);word-break:keep-all;}
  .t48b {font-size:clamp(31px, 3vw, 48px);word-break:keep-all;} 
  .t60b {font-size:clamp(45px, 9vw, 60px);word-break:keep-all;}
  .t72b {font-size:clamp(60px, 12vw, 72px);letter-spacing: -1px;font-weight: 700;color: #000;}

  /*Pine Circle*/
  .pinecircle {width:100%;text-align:center;padding: 60px 40px 87vh;background:url(../img/img_pinecircle@2x.png) no-repeat left 18vw top 17vh, url(../img/img_pinecircle@2x.png) no-repeat right 18vw top 55vh;background-size:96vh;}
  
  /*card*/ 
  .card__centent {border-radius:5vw;}
  .card h1 {font-size:clamp(25px, 3vw, 52px);}
  .card h2 {font-size:clamp(19px, 5.2vw, 24px);font-weight:600;letter-spacing:-2px;line-height:130%;word-break:keep-all;padding-top:20px;margin:0;}
  .card p {font-size:clamp(16px, 3vw, 20px); line-height:130%;}
  .card03 p {max-width:100%;}
  .card07 p:nth-child(4) {padding-top:10px;font-size:clamp(16px, 3vw, 20px);letter-spacing:-1.3px;}
  .card07 p:nth-child(5) {max-width:55vw;padding-top:0;}
  .card07 p:nth-child(6) {max-width:48vw;padding-top:10px;}
  .card .name {font-size:clamp(12px, 3vw, 16px);}
  .card01 {background:#fff url(../img/cardimg01@2x.png) no-repeat right bottom 30px;background-size:130%;width:94vw;margin-left:3vw;height:90vh;min-height:650px;padding:8vw 10vw 8vh;}
  .card02 {background:#fff url(../img/cardimg02ver@2x.png) no-repeat center bottom 49px;background-size:82vw;width:94vw;margin-left:3vw;height:90vh;min-height:650px;padding:8vw 10vw 8vh;}
  .card03 {background:#fff url(../img/cardimg03@2x.png) no-repeat right 10vw bottom 30px;background-size:110vw;width:94vw;margin-left:3vw;height:90vh;min-height:650px;padding:8vw 10vw 8vh;}
  .card04 {background:#fff url(../img/cardimg04@2x.png) no-repeat right bottom 25px;background-size:130vw;width:94vw;margin-left:3vw;height:90vh;min-height:650px;padding:8vw 10vw 8vh;}
  .card05 {background:#fff url(../img/cardimg05@2x.png) no-repeat left 13vw bottom 10px;background-size:140vw;width:94vw;margin-left:3vw;height:90vh;min-height:650px;padding:8vw 10vw 8vh;}
  .card06 {background:url(../img/cardimg06_l@2x.png) no-repeat left 20px bottom 50px, url(../img/cardimg06_r@2x.png) no-repeat right 30px bottom 50px;background-color:#fff;background-size:33vw, 50vw;width:94vw;margin-left:3vw;height:90vh;min-height:650px;padding:8vw 10vw 8vh;}
  .card07 {background:#fff url(../img/cardimg07_r@2x.png) no-repeat center bottom 16px;background-size:50vh;width:94vw;margin-left:3vw;height:94vh;min-height:650px;padding:8vw 10vw 8vh;}
  .bg_client {padding:55px 20px 70px;}
  
  .reference {width:100%;text-align:center;padding:120px 40px 100px;}
  .reference .boxwrapper {flex-direction:column;margin:20px 0;}
  .boxwrapper .box {width:100%;height:130px;margin:40px 0;padding:0;font-size:clamp(50px, 14vw, 80px);letter-spacing:-1vw;line-height:95px;}
  .boxwrapper .box:before {
    /*content: "";*/
    display:block;
    position:relative;
	top:20px;
    z-index: 1;
    width: 100%;
    height: 18px;
    margin:0px 0px 10px 0px;
    vertical-align:middle;background:none;color:#000;font-size:clamp(19px, 3vw, 30px);letter-spacing:-0.8px; line-height:24px;
  }
  .boxwrapper .box:after {
    /*content: "";*/
    display:block;
    position:relative;
    z-index: 100;
    top:16px; width:100%;height:30px;background:none;color:#000;font-size:clamp(25px, 3vw, 30px);letter-spacing:-0.8px; line-height:14px; font-weight:500;
  }
  .boxwrapper .box > span {font-size:clamp(12px, 5vw, 30px);color:#000;margin-left:10px;letter-spacing:0px;}
  .patent:before {content: "기술 특허";}
  /*.patent:after {content: "최다 특허 보유";}*/
  .client:before {content: "공급 기업";}
  /*.client:after {content: "근태관리 전문 기술력";}*/
  .pc:before {content: "사용 PC";}
  /*.pc:after {content: "검증된 사용 경험";}*/

  .btn_withpine {width:auto;height:auto;line-height:1.2em;padding:24px 30px; font-size: clamp(30px, 3vw, 40px); border-radius:30px;}
  .btn_withpine span {word-break:keep-all;}
  .dwn {width:100%;flex-direction:column;}
  .dwn a {width:140px;}
  .dwn_pc {margin:0;}
  .dwn_mobile {margin:20px 0 0 0;}
  
  /* With Pine */
  .t_withpine {font-size:clamp(40px, 5vw, 80px);padding:20px 0 0 0;text-align:center;margin:0 0 0 -30px;}
  .subt {text-align:center;line-height:130%;margin:20px 10px 20px -20px;padding:0;font-size:clamp(24px, 3vw, 34px);}
  .formfield {width:100vw; margin:40px 0 0 -40px;padding:20px 20px 50px 20px;}
  .formfield .prcs {padding:0px;margin-bottom:20px;}
  .prcs_mobile .list .info:last-child {display:none;}
  .prcs_mobile{display: inline-flex !important;width:100%;}
  .formfield .prcs .list {flex-direction:column;align-items:center;margin-bottom:20px;}
  .formfield .prcs div.title {font-size:13px;min-width: auto;}
  
  /* Price */
  .switch {height:45px;}
  .t_price {font-size:clamp(33px, 3vw, 60px);padding:20px 0 0 0;text-align:center;letter-spacing:-0.8px;}
  .product_container {margin:40px 0;flex-direction:column-reverse;}
  .product_intro_box {min-width:80vw;margin:10px 0;}
  .details_box > table th:nth-child(1), .details_box > table td:nth-child(1) {padding-left:10px;padding-right:10px;}

  /* Footer */
  .footer {display:flex;flex-direction:column;padding:70px 40px 70px;}
  .footer .info {width:100%;margin:0;padding:20px 10px;}
  .footer .info span {white-space:nowrap;}

  /* Policy */
  .policywrapper > h1 {font-size: clamp(24px, 4vw, 30px)}
}

/* ******************************************************************************** *
* PC (768px < 가로 < 1439px)
* ******************************************************************************** */
@media (min-width: 768px) and (max-width: 1439px){
  .wrapper{width:100%;}/*972px*/
  section{width:100%;}/*972px*/

  .header {padding: 30px 2vw 24px 2vw;}
  .header ul {margin-right: clamp(0px, 3vw, 40px);}
  .header ul li {margin: 0 clamp(5px, 3vw, 18px);}
  .header a.logo {width: 18vw;background-size: contain;background-position: center;}

  .btn_gbn {margin: 0;padding: 0 3vw;}

  .kleft .keyt1 {font-size:clamp(60px, 24vw, 86px);font-weight:700;color:#000;line-height:90px;letter-spacing:-0.4vw;}
  .btn_keyv {padding:0 20px;margin-left:8px;}
  .kright img {width:100%;max-width:352px;}

  /*.t72b {font-size:4em;letter-spacing:-1px;}*/
  .t36 {font-size:2em;letter-spacing:-1px; word-break:keep-all;}
  .t48 {font-size:clamp(42px, 4vw, 48px);word-break:keep-all;}
  .t48b {font-size:clamp(42px, 4vw, 48px);word-break:keep-all;}
  .t60b {font-size:clamp(45px, 13vw, 60px);word-break:keep-all;}

  .box_talk img {width:60vw;max-width:330px;}

  /*Pine Circle*/
  .pinecircle {width:100%;text-align:center;padding: 96px 40px 800px;background: url(../img/img_pinecircle@2x.png) no-repeat center 160px;background-size:contain;}

  /*card*/
  .card__centent {border-radius:5vw;}
  .card h1 {font-size:clamp(32px, 3vw, 52px);}
  .card h2 {font-size:clamp(14px, 5.5vw, 24px);font-weight:600;letter-spacing:-2px;line-height:130%;word-break:keep-all;padding-top:20px;margin:0;}
  .card p {font-size:clamp(18px, 3vw, 20px); line-height:130%;}
  .card03 p {max-width:52%;}
  .card07 p:nth-child(4) {padding-top:10px;}
  .card07 p:nth-child(5) {max-width:55vw;padding-top:0;}
  .card07 p:nth-child(6) {max-width:48vw;padding-top:10px;}
  .card .name {font-size:clamp(12px, 3vw, 16px);}
  .card01 {background:#fff url(../img/cardimg01@2x.png) no-repeat right bottom 0px;background-size:contain;width:94vw;margin-left:3vw;height:90vh;min-height:800px;padding:7vw 8vw 8vh;}
  .card02 {background:#fff url(../img/cardimg02@2x.png) no-repeat center bottom 60px;background-size:contain;width:94vw;margin-left:3vw;height:90vh;min-height:700px;padding:7vw 8vw 8vh;}
  .card03 {background:#fff url(../img/cardimg03@2x.png) no-repeat right bottom 0px;background-size:contain;width:94vw;margin-left:3vw;height:90vh;min-height:800px;padding:7vw 8vw 8vh}
  .card04 {background:#fff url(../img/cardimg04@2x.png) no-repeat right bottom 0px;background-size:contain;width:94vw;margin-left:3vw;height:90vh;min-height:800px;padding:7vw 8vw 8vh}
  .card05 {background:#fff url(../img/cardimg05@2x.png) no-repeat left 50vw bottom 0px;background-size:contain;width:94vw;margin-left:3vw;height:90vh;min-height:800px;padding:7vw 8vw 8vh}
  .card06 {background:url(../img/cardimg06_l@2x.png) no-repeat left 70px bottom 50px, url(../img/cardimg06_r@2x.png) no-repeat right 30px bottom 50px;background-size:27vh, 40vw; background-color:#fff; width:94vw;margin-left:3vw;height:90vh;min-height:800px;padding:7vw 7vw 8vh;}
  .card07 {background:#fff url(../img/cardimg07_r@2x.png) no-repeat right bottom 0px;background-size:50vw;width:94vw;margin-left:3vw;height:90vh;min-height:800px;padding:7vw 7vw 8vh}

  .bg_client {padding:55px 20px 70px;}

  .reference {width:100%;text-align:center;padding:96px 40px 100px;}
  .reference .boxwrapper {flex-direction:column;margin:80px 0;}
  .boxwrapper .box {min-width:590px;margin:40px 0;}
  .btn_withpine {width:auto;height:auto;line-height:1.2em;padding:30px 50px;}
  .btn_withpine span {word-break:keep-all;}
}


/* **************************************** *
* PC (가로 > 1200px)
* **************************************** */
@media (min-width: 1440px) {
  .wrapper{width:100%;}/*100%*/
  section{width:1400px;}/*1440px*/
}


/* ******************************************************************************** *
* 태블릿 (768px < 가로 < 1080px)
* ******************************************************************************** */
@media (min-width: 768px) and (max-width: 1080px){
  .header ul {margin-right: clamp(0px, 0.1vw, 40px);}
  .header ul li {margin: 0 clamp(5px, 1.3vw, 18px);}
}


/* **************************************** *
* GNB, 햄버거 메뉴 처리
* **************************************** */
@media (max-width: 768px) {
  .hamburger_menu {display:block;}
  .gbn {display:none;}
  .top_banner_content{width:390px;gap:9px 0;}
  .card {top: 100px;}
  .wrapper{padding-top:90px;}
  .details_box > table .plan_title_box{top:92px;}
}

@media (min-width: 768px) {
  .hamburger_menu {display:none;}
  .gbn {display:block;}
  .top_banner_content{width:100vw;}
  .card {top: 70px;}
  .wrapper{padding-top:50px;}
  .details_box > table .plan_title_box{top:60px;}
}

.ptype_wrapper .save::before{
  display: inline-block;
  background-image: url(/resource/img/img_10persave.png);
  background-size: 103px 39px;
  background-repeat: no-repeat;
  width:103px;height:39px;
  content: '';
}
@media only screen and (min-device-pixel-ratio: 2),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2) {
  .ptype_wrapper .save::before{
    background-image: url(/resource/img/img_10persave@2x.png);
  }
  .header a.logo {background: url(../img/header_logo@2x.png) no-repeat;background-size:contain;}
  .kright img {content:url(../img/keyv@2x.png);max-width:810px;}
  .box_talk.tlk01 img {content:url(../img/talk01@2x.png);max-width:330px;}
  .box_talk.tlk02 img {content:url(../img/talk02@2x.png);max-width:330px;}
  .box_talk.tlk03 img {content:url(../img/talk03@2x.png);max-width:330px;}
  .box_talk.tlk04 img {content:url(../img/talk04@2x.png);max-width:330px;}
  .dwn a.mac span:before {background: url(../img/ico_apple@2x.png) no-repeat left;background-size:contain;}
  .dwn a.win span:before {background: url(../img/ico_win@2x.png) no-repeat left;background-size:contain;}
  .dwn a.ios span:before {background: url(../img/ico_apple@2x.png) no-repeat left;background-size:contain;}
  .dwn a.google span:before {background: url(../img/ico_google@2x.png) no-repeat left;background-size:contain;}
  .footer .logo {background:url(../img/footer_logo@2x.png) no-repeat;background-size:contain;}
}
@media only screen and (min-device-pixel-ratio: 3),
    only screen and (-webkit-min-device-pixel-ratio: 3),
    only screen and (min-moz-device-pixel-ratio: 3),
    only screen and (-o-min-device-pixel-ratio: 3) {
      
  .ptype_wrapper .save::before{
    background-image: url(/resource/img/img_10persave@3x.png);
  }
  .header a.logo {background: url(../img/header_logo@3x.png) no-repeat;background-size:contain;background-size:contain;}
  .kright img { content:url(../img/keyv@3x.png);max-width:810px;}
  .box_talk.tlk01 img {content:url(../img/talk01@3x.png);max-width:330px;}
  .box_talk.tlk02 img {content:url(../img/talk02@3x.png);max-width:330px;}
  .box_talk.tlk03 img {content:url(../img/talk03@3x.png);max-width:330px;}
  .box_talk.tlk04 img {content:url(../img/talk04@3x.png);max-width:330px;}
  .dwn a.mac span:before {background: url(../img/ico_apple@3x.png) no-repeat left;background-size:contain;}
  .dwn a.win span:before {background: url(../img/ico_win@3x.png) no-repeat left;background-size:contain;}
  .dwn a.ios span:before {background: url(../img/ico_apple@3x.png) no-repeat left;background-size:contain;}
  .dwn a.google span:before {background: url(../img/ico_google@3x.png) no-repeat left;background-size:contain;}
  .footer .logo {background:url(../img/footer_logo@3x.png) no-repeat;background-size:contain;}
}

/* width에 따라 이미지 달라지는 경우 
@media (min-width: 768px) and (max-width: 1439px),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2) {
}
@media (max-width:767px), 
    only screen and (min-device-pixel-ratio: 2),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2) {
}
*/