:root {
      --navy: #173b67;
      --navy-deep: #0d2b4f;
      --blue: #2b72d6;
      --blue-soft: #eaf3ff;
      --sky: #f4f8fd;
      --ink: #162333;
      --muted: #657487;
      --line: #dce5ef;
      --white: #fff;
      --radius: 18px;
      --shadow: 0 18px 42px rgba(23, 59, 103, .1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
      word-break: keep-all;
    }
    h1, h2, h3, p, ul, ol { margin-top: 0; }
    p { line-height: 1.85; }
    a { color: inherit; text-decoration: none; }
    .page {
      width: min(100%, 1200px);
      margin: 0 auto;
      overflow: hidden;
      background: var(--white);
      box-shadow: 0 0 40px rgba(13, 43, 79, .1);
    }
    .inner {
      width: min(100% - 80px, 1040px);
      margin: 0 auto;
    }

    .board_bg .cta h2 {
      color: #fff !important;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      color: var(--blue);
      font-size: 18px;
      font-weight: 400;
      letter-spacing: -.02em;
    }
    .eyebrow::before {
      width: 28px;
      height: 3px;
      border-radius: 999px;
      background: currentColor;
      content: "";
    }
    .section {
      padding: 92px 0;
    }
    .section--tint { background: var(--sky); }
    .section-head {
      max-width: 720px;
      margin: 0 auto 46px;
      text-align: center;
    }
    .section-head h2 {
      margin-bottom: 14px;
      color: var(--navy-deep);
      font-size: clamp(30px, 4vw, 42px);
      line-height: 1.25;
      letter-spacing: -.055em;
    }
    .section-head p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 17px;
    }

    .hero {
      position: relative;
      min-height: 610px;
      isolation: isolate;
      display: flex;
      align-items: center;
      background: url("/data/skin/beauty/board/JH/default01/image/bg_02.jpg")
    }

    .hero__content { width: min(560px, 54%); padding: 76px 0; }
    .hero__brand {
      margin-bottom: 19px;
      color: var(--navy);
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -.025em;
    }
    .hero__brand b { font-weight: 900; }
    .hero h1 {
      margin-bottom: 20px;
      color: var(--navy-deep);
      font-size: clamp(45px, 5.1vw, 66px);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -.075em;
    }
    .hero__lead {
      margin-bottom: 9px;
      color: #294b71;
      font-size: clamp(21px, 2.4vw, 27px);
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: -.04em;
    }
    .hero__desc {
      margin-bottom: 30px;
      color: var(--muted);
      font-size: 16px;
    }
    .hero__offer {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 18px;
      border: 1px solid #a8c8ee;
      border-radius: 9px;
      background: rgba(255,255,255,.88);
      color: var(--blue);
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 9px 25px rgba(43, 114, 214, .1);
    }
    .hero__offer::before {
      display: grid;
      width: 27px;
      height: 27px;
      place-items: center;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-size: 15px;
      content: "✔";
    }

    .intro {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: center;
    }
    .intro__title h2 {
      margin-bottom: 17px;
      color: var(--navy-deep);
      font-size: clamp(31px, 3.9vw, 44px);
      line-height: 1.26;
      letter-spacing: -.055em;
    }
    .board_bg .intro__title h2 strong {
      color: var(--blue);
      font-size: inherit !important;
      font-weight: 700;
      line-height: inherit !important;
      letter-spacing: inherit !important;
    }
    .intro__title p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }
    .intro__copy {
      padding: 35px 38px;
      border-left: 4px solid var(--blue);
      border-radius: 0 14px 14px 0;
      background: var(--sky);
    }
    .intro__copy p { font-size:16px;  margin-bottom: 18px; color: #43566c; }
    .intro__copy p:last-child { margin-bottom: 0; }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 42px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow);
    }
    .stat {
      position: relative;
      padding: 29px 18px;
      text-align: center;
    }
    .stat + .stat::before {
      position: absolute;
      top: 25%;
      bottom: 25%;
      left: 0;
      width: 1px;
      background: var(--line);
      content: "";
    }
    .stat b {
      display: block;
      margin-bottom: 7px;
      color: var(--blue);
      font-size: 32px;
      letter-spacing: -.04em;
    }
    .stat span { color: var(--muted); font-size: 15px; }

    .benefits {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .benefit {
      min-height: 260px;
      padding: 28px 25px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .benefit__icon {
      display: grid;
      width: 52px;
      height: 52px;
      margin-bottom: 24px;
      place-items: center;
      border-radius: 15px;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 21px;
      font-weight: 900;
    }
    .benefit h3 {
      margin-bottom: 13px;
      color: var(--navy-deep);
      font-size: 21px;
      line-height: 1.4;
      letter-spacing: -.04em;
    }
    .benefit p { margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }

    .print-strip {
      padding: 54px 0;
      background: linear-gradient(135deg, var(--navy-deep), #245b94);
      color: #fff;
    }
    .print-strip__row {
      display: grid;
      grid-template-columns: 1fr 2.1fr;
      gap: 48px;
      align-items: center;
    }
    .print-strip h2 {
      margin-bottom: 11px;
      color: #fff !important;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -.045em;
      text-shadow: 0 1px 2px rgba(0,0,0,.18);
    }
    .print-strip p {
      margin-bottom: 0;
      color: #e7f2ff !important;
      font-size: 16px;
      font-weight: 500;
    }
    .print-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .print-list li {
      padding: 15px 8px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 10px;
      background: rgba(255,255,255,.12);
      color: #fff !important;
      text-align: center;
      font-size: 16px;
      font-weight: 800;
      text-shadow: 0 1px 2px rgba(0,0,0,.16);
    }

    .case-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px 18px;
      counter-reset: cases;
    }
    .case {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 14px;
      align-items: center;
      min-height: 80px;
      padding: 16px 19px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
      color: #36495f;
      counter-increment: cases;
      font-size: 16px;
    }
    .case::before {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border-radius: 50%;
      background: var(--blue-soft);
      color: var(--blue);
      font-weight: 900;
      content: counter(cases, decimal-leading-zero);
    }

    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: process;
    }
    .process li {
      position: relative;
      min-height: 142px;
      padding: 60px 20px 20px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      color: #334860;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.3;
      text-align: center;
      counter-increment: process;
    }
    .process li::before {
      position: absolute;
      top: 30px;
      left: 50%;
      color: var(--blue);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .06em;
      transform: translateX(-50%);
      content: "STEP " counter(process, decimal-leading-zero);
    }
    .process-note {
      margin: 26px 0 0;
      padding: 18px 22px;
      border-radius: 11px;
      background: var(--blue-soft);
      color: var(--navy);
      font-weight: 700;
      text-align: center;
    }

    .quote {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      border-radius: 22px;
      overflow: hidden;
      background: var(--navy-deep);
      box-shadow: var(--shadow);
    }
    .quote__title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 45px 38px;
      color: #fff;
    }
    .quote__title h2 {
      margin-bottom: 14px;
      font-size: 34px;
      line-height: 1.3;
      letter-spacing: -.05em;
    }
    .quote__title p { margin-bottom: 0; color: #c8d8eb; }
    .quote__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 11px 24px;
      margin: 0;
      padding: 38px;
      background: #fff;
      list-style: none;
    }
    .quote__list li {
      position: relative;
      padding: 9px 0 9px 26px;
      color: #43566c;
      line-height: 1.5;
    }
    .quote__list li::before {
      position: absolute;
      top: 10px;
      left: 0;
      display: grid;
      width: 18px;
      height: 18px;
      place-items: center;
      border-radius: 50%;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 11px;
      font-weight: 900;
      content: "占쏙옙";
    }

    .faq { display: grid; gap: 10px; }
    .faq details {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }
    .faq summary {
      position: relative;
      padding: 21px 58px 21px 24px;
      color: var(--navy-deep);
      font-size: 17px;
      font-weight: 800;
      line-height: 1.5;
      cursor: pointer;
      list-style: none;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      position: absolute;
      top: 50%;
      right: 24px;
      color: var(--blue);
      font-size: 25px;
      transform: translateY(-50%);
      content: "+";
    }
    .faq details[open] summary::after { content: "占쏙옙"; }
    .faq details p {
      margin: 0;
      padding: 0 24px 23px;
      color: var(--muted);
      font-size: 15px;
    }

    .cta {
      width: calc(100% - 20px);
      margin: 32px auto 24px;
      padding: 32px 0 31px;
      border-radius: 14px;
      background: linear-gradient(110deg, #062451 0%, #07336f 55%, #0c468d 100%);
      color: #fff;
      text-align: center;
    }
    .cta h2 {
      margin-bottom: 17px;
      font-size: clamp(26px, 3vw, 32px);
      line-height: 1.3;
      letter-spacing: -.045em;
      font-weight: 600;
    }
    .cta p {
      margin: 17px 0 0;
      color: #dceaff;
      font-size: 17px;
      line-height: 1.75;
      letter-spacing: 0.5px;
      font-weight: 300;
    }
    .cta__links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    .cta__links a {
      min-width: 190px;
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      background: #fff;
      color: var(--navy-deep);
      font-size: 17px;
      font-weight: 800;
    }
    .cta__links a:first-child { background: #ffe500; }
    .cta__links a:last-child { color: var(--navy-deep); }

    @media (max-width: 820px) {
      .inner { width: min(100% - 40px, 1040px); }
      .section { padding: 70px 0; }
      .hero {
        min-height: auto;
        align-items: flex-start;
        background: #f7faff;
      }
      .hero::before {
        background-position: right bottom;
        background-size: auto 48%;
        background-repeat: no-repeat;
      }
      .hero::after {
        background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 54%, rgba(255,255,255,.38) 78%, rgba(255,255,255,.05) 100%);
      }
      .hero__content { width: 100%; padding: 52px 0; }
      .intro, .print-strip__row, .quote { grid-template-columns: 1fr; }
      .benefits { grid-template-columns: repeat(2, 1fr); }
      .print-list { grid-template-columns: repeat(5, minmax(105px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
      .process { grid-template-columns: repeat(3, 1fr); }
      .quote__title { padding: 36px 30px; }
    }

    @media (max-width: 560px) {
      body { word-break: normal; overflow-wrap: anywhere; }
      .inner { width: min(100% - 28px, 1040px); }
      .section { padding: 56px 0; }
      .section-head { margin-bottom: 32px; }
      .section-head p { font-size: 15px; }
      .hero { min-height: auto; }
      .hero::before { background-position: right bottom; background-size: auto 43%; }
      .hero__content { padding: 38px 0; }
      .hero__brand { font-size: 17px; }
      .hero h1 { font-size: 40px; }
      .hero__lead { font-size: 20px; }
      .hero__desc { font-size: 14px;  -webkit-text-stroke: 2px #e2eaf1;  paint-order: stroke fill;}
      .hero__offer { font-size: 15px; }
      .intro { gap: 29px; }
      .intro__copy { padding: 26px 24px; }
      .stats { grid-template-columns: 1fr; }
      .stat + .stat::before { top: 0; right: 20%; bottom: auto; left: 20%; width: auto; height: 1px; }
      .benefits, .case-grid, .quote__list { grid-template-columns: 1fr; }
      .process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .benefit { min-height: 0; }
      .print-strip__row { gap: 25px; }
      .print-list { grid-template-columns: repeat(5, 118px); }
      .process li {
        min-height: 132px;
        padding: 56px 10px 16px;
        font-size: 17px;
      }
      .quote__title, .quote__list { padding: 27px 22px; }
      .faq summary { padding-left: 19px; font-size: 16px; }
      .faq details p { padding-left: 19px; padding-right: 19px; }
      .cta {
        width: calc(100% - 20px);
        padding: 29px 14px 28px;
      }
      .cta p { font-size: 14px; }
      .cta__links { display: grid; }
      .cta__links a { width: 100%; min-width: 0; }
    }

    .main-contents{width:1200px !important;}
/* write */ 
/* 占쎌쥙�⒳펺�뗭삕�좎���옙醫묒삕 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎룞�� 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙袁る룵�좎룞�숋옙�용쐻�좑옙 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�덈㎜占쎌눨�앾옙��첓占쎈９�삼옙�용쐻�좑옙 */
table.info-table-style {border-collapse:collapse; border-top:1px solid #aaa; border-right:1px solid #dadada;}
table.info-table-style .its-th {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 28px; text-align:left; background-color:#f1f1f1; font-weight:normal;}
table.info-table-style .its-td {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 15px; line-height:180%; letter-spacing:0px;}
table.info-table-style .its-th-align {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 0; background-color:#f1f1f1; font-weight:normal;}
table.info-table-style .its-td-align {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 0; line-height:180%; letter-spacing:0px;}
table.info-table-style textarea {background-color:#f0f0f0;}
table.info-table-style textarea.input-box-default-text {color:#a5a5a5 !important}
/* @write */


/* view */
#boardview {margin-top: 40px;margin-bottom: 80px;}
#boardview {padding:20px 0 20px 0;line-height:160%;}
#boardview .attach {padding:10px 0 0 0;line-height:120%;}
#boardview .attach ul {padding:0;margin:0;}
#boardview .attach li {list-style-type:none;padding:0 0 0 15px;}
#boardview .attach li a {font-size:11px;font-family:dotum;color:#666;}
#boardview .attach li a:hover {text-decoration:underline;}
#boardview .attach li .size {font-size:11px;font-family:'Noto Sans KR',Dotum,AppleGothic,sans-serif;color:#999;}
#boardview .attach li .down {font-size:11px;font-family:'Noto Sans KR',Dotum,AppleGothic,sans-serif;color:#333;}
#boardview .scorebox {text-align:center;padding:20px 0 20px 0;}
#boardview .snsbox {padding:50px 0 0 0;text-align:right;}
#boardview .snsbox img {cursor:pointer;}
#boardview .bottom {padding:10px 0 0 0;text-align:right;}
#boardview .comment {padding:0 0 10px 0;color:#c0c0c0;}
#boardview .comment a {font-weight:bold;color:#3EA9CD;}
#boardview .comment .icon1 {position:relative;top:3px;}
#boardview .han {font-weight:bold;}
/* @view */
#ui-datepicker-div { z-index: 9999999; }
/* view */

.BoardPwCk {border:#dfdfdf solid 0px;width:350px;padding:0px 10px 0px 10px;margin:10px auto 10px auto;}
.BoardPwCk .msg {}
.BoardPwCk .msg h3 {margin:0;padding:0 0 9px 0;font-size:14px;font-weight:bold;font-family:"malgun gothic","dotum";border-bottom:#dfdfdf dashed 1px;}
.BoardPwCk .msg h3 img {position:relative;top:3px;}
.BoardPwCk .msg div {padding:10px 0 0 22px;color:#999;}
.BoardPwCk .ibox {padding:30px 0 10px 22px;}
.BoardPwCk .input {width:150px;}
.BoardPwCk .btnblue {width:80px;}

.goodsviewbox {padding-bottom: 15px; padding-left: 0px; padding-right: 0px; border-top: #efefef 0px solid; padding-top: 15px;}
.goodsviewbox .pic {width: 100px; float: left; vertical-align: top;}
.goodsviewbox .info {line-height: 140%; float: left; margin-left: 10px;}
.goodsviewbox .info .name {padding-bottom: 5px; padding-left: 0px; padding-right: 0px; color: #3c5899; font-weight: bold; padding-top: 0px;}
.goodsviewbox .info .cont {font-family: dotum; color: #333333;}

#cmtlist {margin:auto;padding-top:10px;}
.attach {padding:10px 0 0 0;line-height:120%;}
.attach ul {padding:0;margin:0;}
.attach li {list-style-type:none;padding:0 0 5px 15px;}
.attach li a {font-size:11px;font-family:dotum;color:#666;}
.attach li a:hover {text-decoration:underline;}
.attach li .size {font-size:11px;font-family:'Noto Sans KR',Dotum,AppleGothic,sans-serif;color:#999;}
.attach li .down {font-size:11px;font-family:'Noto Sans KR',Dotum,AppleGothic,sans-serif;color:#333;}

#ui-datepicker-div { z-index: 9999999; }

/*20191004 ADD*/
#bbslist {margin-bottom: 80px;color: #333;}
.board_bg{position:relative;width:1201px;display:inline-block;}
.board_bg:after{position:absolute;width:4000px;;content:'';left:-100%;top:0;height:201px;z-index:-1}
.board_bg h3{font-size:33px;font-weight:bold;color:#333;}

.board_bg2{position:relative;background:url(../../../images/board/LargePurchase.jpg);width:1201px;height:201px;display:inline-block;}
.board_bg2:after{position:absolute;width:4000px;;content:'';background:#f2f0f2;left:-100%;top:0;height:201px;z-index:-1}

.board_bg2 h3{font-size:25px;font-weight:bold;color:#222;margin-top:30px;}
.board_bg2 ul{line-height: 0.68; color:#444;}
.board_bg2 li{font-size:15px;margin-top:15px; font-weight:400;}
.board_bg2 b{font-size:18px; color: #ff1747; margin-left:6px;}
.board_bg2 span{color:#888; text-decoration-line: line-through;}

/* 20180621 占쎌쥙�⒳펺�뗭삕�섇뜝�⑸�占쎈맮�숋쭚�껋굲占썬꺂�ο쭪�λ쐻占쎌늿�� */
#bbslist { margin-bottom: 80px;font-size: 16px;color: #333; }
#bbslist .tab-box{ display: flex;flex-wrap: wrap;width: 100%;align-items: stretch;}
#bbslist .tab-box a.on,
#bbslist .tab-box a:hover
{  background-color: #f44336 !important;color: white;border-color: #f44336 !important;position: relative;z-index: 1;transition: background, border, color, 0.3s;  }
#bbslist .tab-box a:first-child ~ a {  margin-left: -1px; }
#bbslist .tab-box a { flex: 1; }
#bbslist .tab-box a {
    flex: 1 1 auto;padding: 0.8em 0;text-align: center;font-size: 16px;font-weight: 400;color: #333;border-left: 1px solid #e9ecef;border-top: 1px solid #e9ecef;border-right: 1px solid #e9ecef;transition: background, border, color, 0.3s;
}
#bbslist .sbj a {text-decoration:none;color:#333;}
#bbslist .sbj a:hover {text-decoration:underline;}
#bbslist .number .now {color: #f44336 !important;}
#bbslist .searchform {padding:30px 0 0 0;text-align:center;}
#bbslist .searchform .sch_text{ width: 20em;text-align: left;padding: 0 1em;border-bottom-left-radius: 3px;border-top-left-radius: 3px; }
#bbslist .searchform .sch_button,#bbslist .searchform .sch_text { font-size: 12px;height: 3em;line-height: 1.85;vertical-align: middle;box-sizing: border-box;border: 1px solid #cfd5da;box-shadow: 0px 1px 0px 0px #f2f3f4; }
#bbslist .searchform .sch_button { font-weight: 500;margin-left: -3px;text-align: center;padding: 0 1.5em;transition: background 0.3s;border-top-right-radius: 3px;border-bottom-right-radius: 3px;cursor:pointer;}
#bbslist .searchform .sch_button:hover {   background-color: #cfd5da;transition: background 0.3s; }	

table.bbslist_table_style {border-top: 2px solid #333;width: 100%;}
table.bbslist_table_style th,table.bbslist_table_style td { padding: 10px 0;border-bottom: 1px solid #f2f4f6;font-size: 13px;font-weight: 300;color: #333;text-align: center;}
table.bbslist_table_style tr.noticetr{  background-color: #faf9f5; }/*占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎럥踰⑨옙�낅꽞嚥▲꺃彛�옙醫롫짗占쏙옙 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎룞��*/
table.bbslist_table_style tr.noticetr a{  font-weight: bolder !important;color: #000; }	
table.bbslist_table_style td.sbj{ text-align: left;letter-spacing: 0.02em;padding-left: 0.5em; }
table.bbslist_table_style td.hit,table.bbslist_table_style td.number,table.bbslist_table_style td.cate{ color: #9eabbb;    color: #9eabbb; }
table.bbslist_table_style tr:hover td { background-color: #faf9f5; }

/* 占쎌쥙�⒳펺�뗭삕占쏙옙�뺝뜝�숈삕�닿엥�앾옙��첓占쎈９�삼옙�용쐻�좑옙:占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎룞�� */
#bbswrite {margin-bottom: 80px;}
#bbswrite table.simplelist-table-style {border-collapse:collapse;}
#bbswrite table.simplelist-table-style th {background:url('../images/common/th_bg_popup.gif') repeat-x; height:24px; line-height:24px; border:1px solid #c8c8c8; color:#666; font-weight:normal;}
#bbswrite table.simplelist-table-style td {padding:5px 0; border-bottom:1px solid #d7d7d7; color:#666}
#bbswrite .bbs_input_text{ border: 0;height: 35px;padding: 0 1em;font-size: 14px; font-weight: 500;color: #333;outline: none;font-family: 'Malgun Gothic', sans-serif; }
#bbswrite .back_type{ margin: 15px auto;display: flex;justify-content: center;align-items: center; border: 1px solid #cfd5da;box-shadow: 0px 2px 0px 0px #f2f3f4; padding: 0.4em;width: 400px;border-radius: 5em; }
#bbswrite .ui.radio.checkbox label:before,#bbswrite .ui.radio.checkbox label:after { top: 7px;left: 5px; }
.back_type span,
.back_type label {vertical-align: middle;font-size: 14px;font-weight: 300; height: 2em;padding: 0.3em;line-height: 1.4em;}
#bbswrite .back_type label { font-size:14px !important;display:inline-block; }
#bbswrite .bbs_order_btn{ width: 100px;height: 35px;line-height: 1.1;border: 1px solid #cfd5da;font-size: 14px;font-weight: 500;color: #9eabbb;padding: 0.3em;vertical-align: middle;box-shadow: 0px 2px 0px 0px #f2f3f4; outline: none; }
#bbswrite .bbs_order_btnn:hover { background-color: #f2f3f4;box-shadow: 0px 2px 0px 0px #f2f3f4, inset 2px 2px 0px white;color: #333; transition: color,background, 0.3s; }
#bbswrite .bbs_btn{ margin: 0 0.3em;padding: 0.7em 3em;height: 2.6em;line-height: 1.2;letter-spacing: 0.1em;background-color: #cfd5da;text-align: center;font-size: 13px;font-weight: 600;color: white;cursor:pointer; }
#bbswrite .write{ background-color: #f44336; }
#bbswrite .bbs_checkbox{ align-items: center;flex: 1;padding: 0.4em 1em;border-bottom: 1px solid #e9ecef;}
#bbswrite .bbs_checkbox label {  padding-left: 1.45em;vertical-align: middle;line-height: 1.1; }
table.bbswrite_table_style {border-collapse:collapse;border-top:2px solid #333;}
table.bbswrite_table_style th.cell,
table.bbswrite_table_style td.cell {text-indent:10px; text-align:left; height: 45px; padding-top:4px; padding-bottom:4px; border-bottom:1px solid #e9ecef;}
table.bbswrite_table_style th.cell {  min-height: 45px;font-size: 14px;font-weight: 600;vertical-align: middle;padding: 0 1em;border-right: 1px solid #e9ecef; background-color: #f2f4f6;} 
table.bbswrite_table_style td.cell {}
table.bbswrite_table_style tr th.cell:first-child {border-left:0px;}
table.bbswrite_table_style tr:first-child th.cell,
table.bbswrite_table_style tr:first-child td.cell {border-top:0px;}
/* 占쎌쥙�⒳펺�뗭삕占쏙옙�뺝뜝�숈삕�닿엥�앾옙��첓占쎈９�삼옙�용쐻�좑옙:占쎌쥙�⒳펺�귣쇀占쎈쵐�뺧옙醫묒삕 */

/* 占쎌쥙�⒳펺�뗭삕占썩뫖���좎럥占썸뤃轅⑤쐻占쎈슣履좑옙猷뱀돸占쎌눨�앭뜝占�: 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎룞�� */
#bbsview {margin-bottom: 80px;}
#bbsview .dotosbj{ font-size: 23px;font-weight: 600; }
#bbsview .view_list_btn{ line-height: 1.25em;font-size: 13px;font-weight: 500;padding: 0.43em 0.8em; }
#bbsview .view_list_btn:before {  content: '\f0c9';font-family: "Font Awesome 5 Free";font-weight: 900;margin-right: 0.5em; }
#bbsview .view_list_btn:hover { background-color: #333;color: white;box-shadow: inset 0px -2px 0 tomato;transition: 0.3s; }
table.bbsview_table_style { border-bottom: 2px solid #333;margin: 1em auto;}
table.bbsview_table_style td.cell {height: 3.8em;border-top:2px solid #333 }
table.bbsview_table_style tbody td.cell_bar {width:30px; text-align:center; color:#ccc;}

/* 占쎌쥙�⒳펺�뗭삕�용낌�뺝뜝�덈쐠�닿엥�앾옙��첓占쎈９�삼옙�용쐻�좑옙 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎럥踰⑨옙�낅꽞嚥▲꺃彛�옙醫롫짗占쏙옙 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�덈㎜占쎌눨�앾옙��첓占쎈９�삼옙�용쐻�좑옙 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎룞�� by_yong_180912 */
#bbsview .content img{width:auto; max-width:1200px !important;}
#bbsview .content p, #bbsview .content span{ font-family:'Malgun Gothic','Noto Sans KR', 'gulim','Apple Gohic', sans-serif !important; 
font-size:14px; line-height:1.6; letter-spacing:-0.025em; word-spacing:-0.045em; }


/* 占쎌쥙�⒳펺�뗭삕占썩뫖���좎럥占썸뤃轅⑤쐻占쎈슣履좑옙猷뱀돸占쎌눨�앭뜝占�: 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺧옙醫묒삕 */

/* 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궪�숅넫臾믪굲 : 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궍�앾옙��뱦�좎룞��*/
.comment input,
.comment textarea,
.comment div,
.comment span {font-family: 'Malgun Gothic','Noto Sans KR', 'gulim', sans-serif;font-size: 13px;font-weight: 400;line-height: 1.55;letter-spacing: -0.015em;}

table.commentlist_table_style tr.comment.str{   height: 3.5em;vertical-align: bottom; }
table.commentlist_table_style td .writer{font-weight: bold;}
table.commentlist_table_style td .writer:after{content: '';display: inline-block;width: 1px;height: 0.8em;background-color: #e9ecef;margin: 0 0.5em;}
table.commentlist_table_style td .date{color: #9eabbb;}

#cwrite textarea,#cmtlistlay textarea {  width: 100%;height: 65px;max-width: 100%;min-width: 100%;min-height: 65px;max-height: 100px;padding: 0.4em;border: 0;border-bottom: 2px solid #333;background-color: white;outline: none;resize: none;	}
#cwrite form,#cmtlistlay div.wbox { /*display: flex;flex-direction: column;*/padding: 20px;background-color: #f2f3f4; }
#cwrite .ui.checkbox label,#cmtlistlay .ui.checkbox label { margin:10px 10px 10px 10px;cursor:pointer;font-size: 12px;font-family: 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans Kr', sans-serif;font-weight: bold; }
#cwrite .ui.input > input,#cmtlistlay .ui.input > input{
	border-radius: 0; max-width: 150px; text-align: left; line-height: 1.21428571em;padding: 0.67857143em 1em;background: #FFFFFF; border: 1px solid #cfd5da; color: rgba(0, 0, 0, 0.87);
    height: 35px; margin-right: 5px;
}

#cmtlistlay .bbs_reply_btn {
    padding: 0.3em 0.6em;height: 1.8em;line-height: 1.25;vertical-align: bottom;text-align: center;background-color: #e9ecef;font-size: 12px;font-family: 'Malgun Gothic','Noto Sans KR', 'gulim', sans-serif;
    font-weight: 600; margin-left: 0.2em;color: #999;
}
#cmtlistlay .bbs_reply_btn:hover { color: white;background-color: #2979ff;transition: color, background, 0.3s; }


/* 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�뚯뒠占쎌궪�숅넫臾믪굲 : 占쎌쥙�⒳펺�귣쇀占쎈쵐�뺧옙醫묒삕*/

/*占쎌쥙�⒳펺�귣쇀占쎈쵐�뺝뜝�덈㎣獄�옙*/
.bbs_btn {  padding: 0 1em;height: 26px;background-color: #cfd5da !important;text-align: center;line-height: 26px;font-size: 13px;font-weight: 600;color: white;border: none;cursor:pointer; }
.bbs_btn.write_btn {position:absolute;right:0 }
.write { background-color: #f44336 !important; }
.bbs_comment_btn{  width: 71px;height: 35px;font-size: 14.3px;font-weight: 500;letter-spacing: 0.025em;color: white;background-color: #2979ff;border-radius: 3px;margin-left: auto;}
.bbs_comment_btn:hover { box-shadow: inset 0px -3px 0px 0px #2962ff; }


.acaInfo_wrap{display:none;}


/*占쎌쥙�⒳펺�뗭삕�섇뜝�⑸�占쎈맮�쇿뜝占� 占쎌쥙�ο옙占쎌삕占쎌뼚�뺝뜝�덈쐠�닿엥�앾옙��첓占쎈９�삼옙�뗭삕占썩뫗留띰옙醫롫윪占쎌슱�쇿뜝占�*/
.new_section{
	margin-top: 35px;
    background-color: #ace1d945;
    padding: 20px 20px 95px;
    border-radius: 15px;
	border: dashed;
    border-color: #aae5df;
}
.new_section_list h2{font-weight:bold; color: #3f5351;}
.new_section i{font-size:15px; text-decoration-line: line-through; font-style: normal; color: #3f5351;}
.new_section b{font-size:21px; color: #3f5351;}
.new_section .list_color_b{color:#ff1747;}
.new_section_list{    
	margin-left: 26%;
    padding: 15px;
    font-size: 18px;
	color: #3f5351;
	}

.btn_area{margin-left: 27%;}
.btn_area a{transition:all .3s;border-radius: 12px;display:block;height:65px;padding:0 70px;line-height:65px;text-align:left;font-weight:bold;font-size:28px; margin-bottom: 65px;}
.btn_area a{
	background:#fff;
	font-size:18px;
	width:30%;
	padding:0;
	text-align:center;
	float:left;
	 background-image:-webkit-linear-gradient( -90deg, rgba(179,179,179,0.6) 0%, rgba(179,179,179,0) 7%);
	background-image:-moz-linear-gradient( -90deg, rgba(93,183,255,0.6) 0%, rgba(93,183,255,0) 7%);
	background-image:-ms-linear-gradient( -90deg, rgba(93,183,255,0.6) 0%, rgba(93,183,255,0) 7%);
	color:#333;border:1px solid #666;
	}
.btn_area a:nth-child(1){margin-right:20px;}
.btn_area a:hover{
	background:#f5f5f5;
	font-size:21px;
	width:30%;
	padding:0;
	text-align:center;
	float:left;
	background-image:-webkit-linear-gradient( -90deg, rgba(179,179,179,0.6) 0%, rgba(179,179,179,0) 7%);
	background-image:-moz-linear-gradient( -90deg, rgba(93,183,255,0.6) 0%, rgba(93,183,255,0) 7%);
	background-image:-ms-linear-gradient( -90deg, rgba(93,183,255,0.6) 0%, rgba(93,183,255,0) 7%);
	color:#333;border:1px solid #666;
	}

/* �좎럥흮占쎈툋�㏆옙�ワ폁占쎌닂彛⒴뜝占� �좎럩瑗뤄옙醫묒��좑옙 �꾩룇瑗뤄옙�귥삕�좑옙 �곌랜�삼옙占� */
@media (max-width: 1220px) {
	.main-contents,
	#boardlayout,
	#bbslist {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.main-contents {
		width: 100% !important;
	}

	.board_bg {
		display: block;
		width: var(--board-available-width, calc(100% - 20px)) !important;
		max-width: var(--board-available-width, calc(100% - 20px)) !important;
		min-width: 0 !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0;
	}

	.board_bg .page {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		container-type: inline-size;
	}

	.board_bg .inner {
		width: calc(100% - 40px);
		max-width: 1040px;
		min-width: 0;
	}

	.board_bg .intro > *,
	.board_bg .benefit,
	.board_bg .case,
	.board_bg .process li,
	.board_bg .print-strip__row > *,
	.board_bg .quote > *,
	.board_bg .quote__list li {
		min-width: 0;
	}

	.board_bg .page h1,
	.board_bg .page h2,
	.board_bg .page h3,
	.board_bg .page p,
	.board_bg .page li {
		max-width: 100%;
		white-space: normal;
		overflow-wrap: break-word;
	}

	.board_bg .intro,
	.board_bg .print-strip__row,
	.board_bg .quote {
		grid-template-columns: minmax(0, 1fr);
	}

	.board_bg .benefits,
	.board_bg .case-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.board_bg .process {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.board_bg .print-list {
		grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
		overflow: visible;
		padding-bottom: 0;
	}
}

@container (max-width: 760px) {
	.board_bg .benefits,
	.board_bg .case-grid,
	.board_bg .quote__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.board_bg .process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.board_bg .print-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 560px) {
	.board_bg .inner {
		width: calc(100% - 28px);
	}

	.board_bg .process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.board_bg .process li {
		min-height: 132px;
		padding: 56px 10px 16px;
		font-size: 17px;
	}
}

@media (max-width: 820px) {
  .hero {
    height: auto !important;
    background-image: url("/data/skin/beauty/board/JH/default01/image/bg_02.jpg") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .hero__desc { -webkit-text-stroke: 2px #e2eaf1;  paint-order: stroke fill;}
}

@media (max-width: 560px) {
	.board_bg {
		width: var(--board-available-width, calc(100% - 12px)) !important;
		max-width: var(--board-available-width, calc(100% - 12px)) !important;
	}
}