@charset "UTF-8";
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; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

html, body {
  min-height: 100vh; }

body {
  line-height: 1;
  font-family: 'Noto Sans KR',sans-serif;
  font-size: 14px;
  color: #404040; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: none; }

a {
  text-decoration: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

address {
  font-style: normal; }

.clearfix:after {
  content: '';
  display: block;
  clear: both; }

@media screen and (min-width: 720px) {
  .layout {
    position: relative;
    margin: 0 auto;
    width: 1050px;
    height: inherit; }
  body > header {
    position: fixed;
    z-index: 5000;
    width: 100vw;
    height: 70px;
    background-color: rgba(33, 41, 49, 0.7); }
  body > header h1 {
    position: absolute;
    top: 20px; }
  body > header h1 > img {
    width: 142px; }
  body > header nav {
    position: absolute;
    right: -22px;
    top: 0; }
  body > header nav > a {
    display: block;
    float: left;
    padding: 0 22px;
    height: 70px;
    line-height: 70px;
    color: #fff;
    font-size: 12px; }
  div.section_1 {
    height: 1240px;
    background: url("images/banner-bg.jpg") center top no-repeat; }
  div.section_1 h2 {
    position: absolute;
    left: 70px;
    padding: 200px 0 0;
    width: 890px;
    height: 460px;
    background: url("images/banner-fg.png") right 125px no-repeat;
    background-size: 422px 548px; }
  div.section_1 h2 > img {
    width: 389px; }
  div.wrap_product {
    position: absolute;
    top: 620px; }
  div.wrap_product > a {
    display: block;
    float: left;
    box-sizing: border-box;
    margin: 0 0 6px 6px;
    padding: 40px;
    width: 346px;
    height: 270px;
    border-radius: 30px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
    color: #333; }
  div.wrap_product > a:nth-child(3n+1) {
    margin-left: 0; }
  div.wrap_product > a.corpreg {
    background: url(images/corpreg.png) center bottom no-repeat, #fff;
    background-size: contain; }
  div.wrap_product > a.trademark {
    background: url(images/trademark.png) center bottom no-repeat, #fff;
    background-size: contain; }
  div.wrap_product > a.inherit {
    background: url(images/inherit.png) center bottom no-repeat, #fff;
    background-size: contain; }
  div.wrap_product > a.rent {
    background: url(images/rent.png) center bottom no-repeat, #fff;
    background-size: contain; }
  div.wrap_product > a.blog {
    background: url(images/blog.png) center bottom no-repeat, #fff;
    background-size: contain; }
  div.wrap_product > a.info {
    background: url(images/info.png) center bottom no-repeat, #fff;
    background-size: contain; }
  div.wrap_product > a:hover {
    transform: scale(1.05);
    transition: all 0.2s ease;
    background: #0158A0;
    color: #fff; }
  div.wrap_product > a:hover:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 30px;
    right: 25px;
    width: 70px;
    height: 70px;
    background: url(images/go.png) center center no-repeat;
    background-size: 70px 70px; }
  div.wrap_product > a:nth-child(1):hover {
    transform-origin: bottom right; }
  div.wrap_product > a:nth-child(2):hover {
    transform-origin: bottom center; }
  div.wrap_product > a:nth-child(3):hover {
    transform-origin: bottom left; }
  div.wrap_product > a:nth-child(4):hover {
    transform-origin: top right; }
  div.wrap_product > a:nth-child(5):hover {
    transform-origin: top center; }
  div.wrap_product > a:nth-child(6):hover {
    transform-origin: top left; }
  div.wrap_product > a > h3 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: bold; }
  div.wrap_product > a > p {
    font-size: 18px;
    line-height: 1.7em; }
  div.section_2 {
    position: relative;
    height: 627px;
    background: url(images/lawyers-bg.png) center center no-repeat, #f5f5f5; }
  div.section_2:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 640px;
    height: 453px;
    background: url(images/lawyers-fg.png) center center no-repeat; }
  div.section_2 h2 {
    position: absolute;
    top: 80px;
    width: 100%;
    font-size: 30px;
    text-align: center; }
  div.section_2 h2 > strong {
    font-weight: bold; }
  div.section_2 div.lawyer {
    position: absolute;
    bottom: 110px;
    font-size: 12px; }
  div.section_2 div.lawyer h3 {
    margin-bottom: 20px; }
  div.section_2 div.lawyer li.main {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600; }
  div.section_2 div.lawyer li + li {
    margin-top: 10px; }
  div.section_2 div.lawyer.hypark {
    right: 0; }
  div.section_2 div.lawyer.hypark img {
    width: 178px; }
  div.section_2 div.lawyer.smlee {
    text-align: right; }
  div.section_2 div.lawyer.smlee img {
    width: 122px; }
  div.section_2 div.lawyer:before {
    content: '';
    position: absolute;
    bottom: -5px;
    width: 2px;
    height: 120px;
    background: #4283b7; }
  div.section_2 div.lawyer.hypark:before {
    left: -10px; }
  div.section_2 div.lawyer.smlee:before {
    right: -10px; }
  div.section_3 {
    height: 1100px; }
  div.section_3 h2 {
    margin: 0 auto;
    padding-top: 80px;
    font-size: 39px;
    font-weight: 400;
    text-align: center; }
  div.section_3 h2 > strong {
    position: relative;
    color: #00b4e3; }
  div.section_3 h2 > strong:before,
  div.section_3 h2 > strong:after {
    content: '';
    display: block;
    position: absolute;
    top: -0px;
    width: 6px;
    height: 6px;
    background: #00b4e3;
    border-radius: 50%; }
  div.section_3 h2 > strong:before {
    left: 17px; }
  div.section_3 h2 > strong:after {
    right: 17px; }
  div.section_3 a.youtube {
    display: block;
    position: relative;
    margin: 60px auto 0;
    box-sizing: border-box;
    padding: 30px 40px;
    width: 750px;
    height: 422px;
    background: url(images/hyo-video.png) center center no-repeat;
    background-size: 750px 422px;
    color: #fff;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: -0.5px; }
  div.section_3 div.wrap_news {
    margin-top: 90px;
    overflow: hidden;
    position: relative;
    height: 215px; }
  div.section_3 div.wrap_news div.news_panel {
    position: absolute;
    bottom: 0;
    transition: left 0.4s ease-out; }
  div.section_3 div.wrap_news article {
    position: relative;
    float: left;
    box-sizing: border-box;
    padding-top: 50px;
    margin-left: 150px;
    width: 450px;
    height: 205px; }
  div.section_3 div.wrap_news article h3 {
    overflow: hidden;
    margin-bottom: 30px;
    height: 76px;
    font-size: 25px;
    line-height: 38px;
    letter-spacing: -0.5px; }
  div.section_3 div.wrap_news article a {
    display: block;
    color: #404040; }
  div.section_3 div.wrap_news article p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    line-height: 1.7em; }
  div.section_3 div.wrap_news article footer {
    position: absolute;
    top: 0;
    width: inherit;
    height: 30px;
    border-bottom: 4px solid #333; }
  div.section_3 div.wrap_news article footer > img {
    position: absolute;
    left: 0;
    bottom: 0; }
  div.section_3 div.wrap_news article footer > img[alt="한국경제"] {
    width: 111px;
    bottom: -7px; }
  div.section_3 div.wrap_news article footer > img[alt="서울신문"] {
    width: 111px;
    bottom: 7px; }
  div.section_3 div.wrap_news article footer > img[alt="이뉴스투데이"] {
    width: 130px;
    bottom: 7px; }
  div.section_3 div.wrap_news article footer > img[alt="Legal Times"] {
    width: 130px;
    bottom: -12px; }
  div.section_3 div.wrap_news article footer > img[alt="매일경제"] {
    width: 115px;
    bottom: 3px; }
  div.section_3 div.wrap_news article footer > img[alt="Platum"] {
    width: 122px;
    bottom: -5px; }
  div.section_3 div.wrap_news article footer > img[alt="동아일보"] {
    width: 130px;
    bottom: -7px; }
  div.section_3 div.wrap_news article footer > img[alt="국민일보"] {
    width: 130px;
    bottom: -7px; }
  div.section_3 div.wrap_news article footer > span {
    position: absolute;
    right: 0;
    bottom: 7px;
    font-size: 16px; }
  div.section_3 div.news_btn {
    margin: 70px auto 0;
    text-align: center; }
  div.section_3 div.news_btn button {
    position: relative;
    top: 2px;
    width: 35px;
    height: 35px;
    background: url(images/btn-arrow.png) center center no-repeat;
    background-size: 35px 35px;
    border: none;
    cursor: pointer; }
  div.section_3 div.news_btn button:active {
    top: 3px;
    left: 1px; }
  div.section_3 div.news_btn button.left {
    margin-right: 10px; }
  div.section_3 div.news_btn button.right {
    margin-left: 10px;
    transform: rotate(180deg); }
  div.section_3 div.news_btn button:disabled {
    background: url(images/btn-arrow-gray.png) center center no-repeat;
    background-size: 35px 35px;
    cursor: not-allowed; }
  div.section_3 div.news_btn button:disabled:active {
    top: 2px;
    left: 0; }
  div.section_3 div.news_btn button.left:disabled {
    transform: rotate(180deg); }
  div.section_3 div.news_btn button.right:disabled {
    transform: rotate(0deg); }
  div.section_3 div.news_btn * {
    vertical-align: middle; }
  div.section_3 div.news_btn span {
    font-size: 35px;
    line-height: 35px; }
  div.section_3 div.news_btn span + span {
    margin-left: 5px; }
  body > footer {
    height: 280px;
    background: #404040; }
  body > footer > nav {
    height: 45px;
    border-bottom: 1px solid #58595b; }
  body > footer > nav > div.layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
  body > footer > nav a {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    line-height: 45px; }
  body > footer div {
    color: #b8b9bb;
    font-size: 12px; }
  body > footer div + div {
    margin-top: 15px; }
  body > footer address {
    display: inline; }
  body > footer a {
    color: #b8b9bb; }
  body > footer a.pop {
    margin-left: 7px;
    color: #4283b7; }
  body > footer div.about_helpme {
    box-sizing: border-box;
    padding: 50px 0 0 120px;
    height: 235px;
    background: url(images/logo-white.svg) 0 50px no-repeat;
    background-size: 88px 19px; }
  .termsList,
  .privacyTermList {
    column-count: 2;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-gap: 72px;
    -moz-column-count: 2;
    -moz-column-rule-style: solid;
    -moz-column-rule-width: 1px;
    -moz-column-gap: 72px;
    -webkit-column-count: 2;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    -webkit-column-gap: 72px; }
    .termsList.termsList,
    .privacyTermList.termsList {
      margin-top: 20px;
      padding: 22px 48px 16px;
      border: 1px solid #a2a3aa;
      background-color: #f2f2f2;
      border-radius: 4px;
      column-rule-color: #a2a3aa;
      -moz-column-rule-color: #a2a3aa;
      -webkit-column-rule-color: #a2a3aa; }
      .termsList.termsList a,
      .privacyTermList.termsList a {
        display: block;
        margin-top: 6px;
        color: #000;
        font-size: 16px;
        line-height: 1.38;
        letter-spacing: -0.32px; }
        .termsList.termsList a:first-child,
        .privacyTermList.termsList a:first-child {
          margin-top: 0; }
    .termsList.privacyTermList,
    .privacyTermList.privacyTermList {
      margin-top: 8px;
      column-rule-color: #cecfd8;
      -moz-column-rule-color: #cecfd8;
      -webkit-column-rule-color: #cecfd8; } }

@media screen and (max-width: 720px) {
  body > header {
    position: fixed;
    z-index: 5000;
    width: 100vw;
    height: 60px;
    background-color: rgba(22, 32, 42, 0.8); }
  body > header h1 {
    position: absolute;
    top: 15px;
    left: 20px; }
  body > header h1 > img {
    width: 142px; }
  body > header nav {
    display: none; }
  div.layout {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
    max-width: 640px; }
  div.section_1 {
    position: relative;
    background: url("images/banner-bg.jpg") left top no-repeat, #f5f5f5;
    background-size: auto 400px; }
  div.section_1:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 400px;
    background: url("images/banner-fg.png") center 100px no-repeat;
    background-size: 65%;
    box-shadow: inset 0 -10em 7em -1em rgba(0, 0, 0, 0.8); }
  div.section_1 h2 {
    position: relative;
    height: 400px; }
  div.section_1 h2 > img {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 70vw;
    max-width: 350px; }
  div.section_1 div.wrap_product {
    padding: 20px 10px; }
  div.section_1 div.wrap_product a {
    display: block;
    padding: 10px 40px;
    background: url(images/mobile_cta.svg) right 10px center no-repeat, #fff;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
    border-radius: 50px;
    color: #333; }
  div.section_1 div.wrap_product a + a {
    margin-top: 10px; }
  div.section_1 div.wrap_product a > h3 {
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: bold; }
  div.section_1 div.wrap_product a > p {
    color: #0158a0;
    font-size: 14px;
    line-height: 1.2em; }
  div.section_2 {
    box-sizing: border-box;
    padding: 50px 0;
    height: 628px;
    background: url(images/lawyers-bg-mobile.png) left bottom no-repeat;
    background-size: 100% 100%; }
  div.section_2 h2 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; }
  div.section_2 h2 > strong {
    display: block;
    font-weight: bold; }
  div.section_2 div.lawyer {
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40px 30px 0;
    max-width: 480px;
    width: 100%;
    height: 230px;
    font-size: 12px; }
  div.section_2 div.lawyer h3 {
    position: relative;
    top: -5px;
    margin-bottom: 10px; }
  div.section_2 div.lawyer li.main {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600; }
  div.section_2 div.lawyer li + li {
    margin-top: 10px; }
  div.section_2 div.lawyer.hypark {
    background: url(images/lawyer-hypark-mobile.png) right top no-repeat;
    background-size: 180px 226px; }
  div.section_2 div.lawyer.hypark h3 {
    left: -15px; }
  div.section_2 div.lawyer.hypark img {
    width: 140px; }
  div.section_2 div.lawyer.smlee {
    background: url(images/lawyer-smlee-mobile.png) left top no-repeat;
    background-size: 177px 227px;
    text-align: right; }
  div.section_2 div.lawyer.smlee h3 {
    right: -15px; }
  div.section_2 div.lawyer.smlee img {
    width: 106px; }
  div.section_2 div.lawyer:before {
    content: '';
    position: absolute;
    bottom: 50px;
    width: 2px;
    height: 108px;
    background: #4283b7; }
  div.section_2 div.lawyer.hypark:before {
    left: 20px; }
  div.section_2 div.lawyer.smlee:before {
    right: 20px; }
  div.section_3 h2 {
    margin: 0 auto;
    padding-top: 40px;
    font-size: 26px;
    font-weight: 400;
    text-align: center; }
  div.section_3 h2 > strong {
    position: relative;
    color: #00b4e3; }
  div.section_3 h2 > strong:before,
  div.section_3 h2 > strong:after {
    content: '';
    display: block;
    position: absolute;
    top: -0px;
    width: 6px;
    height: 6px;
    background: #00b4e3;
    border-radius: 50%; }
  div.section_3 h2 > strong:before {
    left: 10px; }
  div.section_3 h2 > strong:after {
    right: 10px; }
  div.section_3 a.youtube {
    display: block;
    position: relative;
    margin: 30px auto 0;
    box-sizing: border-box;
    padding: 15px 20px;
    width: 100%;
    height: 55vw;
    max-height: 370px;
    background: url(images/hyo-video.png) top center no-repeat;
    background-size: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: 200;
    line-height: 1.5em;
    letter-spacing: -0.5px; }
  div.section_3 div.wrap_news {
    position: relative;
    margin-bottom: 50px; }
  div.section_3 div.wrap_news article {
    position: relative;
    box-sizing: border-box;
    padding-top: 40px; }
  div.section_3 div.wrap_news article + article {
    margin-top: 40px; }
  div.section_3 div.wrap_news article h3 {
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.4em;
    letter-spacing: -0.5px; }
  div.section_3 div.wrap_news article a {
    display: block;
    color: #404040; }
  div.section_3 div.wrap_news article:nth-child(1n+4) {
    display: none; }
  div.section_3 div.wrap_news article p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.4em; }
  div.section_3 div.wrap_news article footer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    border-bottom: 4px solid #333; }
  div.section_3 div.wrap_news article footer > img {
    position: absolute;
    left: 0;
    bottom: 0; }
  div.section_3 div.wrap_news article footer > img[alt="한국경제"] {
    width: 111px;
    bottom: -7px; }
  div.section_3 div.wrap_news article footer > img[alt="서울신문"] {
    width: 111px;
    bottom: 7px; }
  div.section_3 div.wrap_news article footer > img[alt="이뉴스투데이"] {
    width: 130px;
    bottom: 7px; }
  div.section_3 div.wrap_news article footer > img[alt="Legal Times"] {
    width: 130px;
    bottom: -12px; }
  div.section_3 div.wrap_news article footer > img[alt="매일경제"] {
    width: 115px;
    bottom: 3px; }
  div.section_3 div.wrap_news article footer > img[alt="Platum"] {
    width: 122px;
    bottom: -5px; }
  div.section_3 div.wrap_news article footer > img[alt="동아일보"] {
    width: 130px;
    bottom: -7px; }
  div.section_3 div.wrap_news article footer > img[alt="국민일보"] {
    width: 130px;
    bottom: -7px; }
  div.section_3 div.wrap_news article footer > span {
    position: absolute;
    right: 0;
    bottom: 7px;
    font-size: 16px; }
  div.section_3 div.news_btn {
    display: none; }
  body > footer {
    background: #404040; }
  body > footer > nav {
    height: 45px;
    border-bottom: 1px solid #58595b; }
  body > footer > nav > div.layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
  body > footer > nav a {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    line-height: 45px; }
  body > footer div {
    color: #b8b9bb;
    font-size: 12px; }
  body > footer div + div {
    margin-top: 15px; }
  body > footer address {
    display: inline; }
  body > footer a {
    color: #b8b9bb; }
  body > footer a.pop {
    margin-left: 7px;
    color: #4283b7; }
  body > footer div.about_helpme {
    padding-top: 20px;
    padding-bottom: 40px;
    line-height: 1.1em;
    letter-spacing: -0.5px; }
  .termsList {
    margin-top: 20px;
    padding: 22px 48px 16px;
    border: 1px solid #a2a3aa;
    background-color: #f2f2f2;
    border-radius: 4px; }
    .termsList a {
      display: block;
      margin-top: 6px;
      color: #000;
      font-size: 16px;
      line-height: 1.38;
      letter-spacing: -0.32px; }
      .termsList a:first-child {
        margin-top: 0; }
  .privacyTermList {
    margin-top: 8px; } }