@font-face {
  font-family: 'NanumSquare';
  src: url("./font/NanumSquareL.eot");
  src: url("./font/NanumSquareL.woff") format("woff"), url("./font/NanumSquareL.woff2") format("woff2");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'NanumSquare';
  src: url("./font/NanumSquareR.eot");
  src: url("./font/NanumSquareR.woff") format("woff"), url("./font/NanumSquareR.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'NanumSquare';
  src: url("./font/NanumSquareB.eot");
  src: url("./font/NanumSquareB.woff") format("woff"), url("./font/NanumSquareB.woff2") format("woff2");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'NanumSquare';
  src: url("./font/NanumSquareEB.eot");
  src: url("./font/NanumSquareEB.woff") format("woff"), url("./font/NanumSquareEB.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'notoSans';
  src: url("./font/NotoSans.eot");
  src: url("./font/NotoSans.woff") format("woff"), url("./font/NotoSans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'notoSans';
  src: url("./font/NotoSans-Bold.eot");
  src: url("./font/NotoSans-Bold.woff") format("woff"), url("./font/NotoSans-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'notoSansKR';
  src: url("./font/NotoSansKR-Light.eot");
  src: url("./font/NotoSansKR-Light.woff") format("woff"), url("./font/NotoSansKR-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'notoSansKR';
  src: url("./font/NotoSansKR-Medium.eot");
  src: url("./font/NotoSansKR-Medium.woff") format("woff"), url("./font/NotoSansKR-Medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'notoSansKR';
  src: url("./font/NotoSansKR-Bold.eot");
  src: url("./font/NotoSansKR-Bold.woff") format("woff"), url("./font/NotoSansKR-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'notoSansKR';
  src: url("./font/NotoSansKR-Black.eot");
  src: url("./font/NotoSansKR-Black.woff") format("woff"), url("./font/NotoSansKR-Black.woff2") format("woff2");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'NanumBarunGothic';
  src: url("./font/NanumBarunGothicLight.eot");
  src: url("./font/NanumBarunGothicLight.woff") format("woff"), url("./font/NanumBarunGothicLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'NanumBarunGothic';
  src: url("./font/NanumBarunGothic.eot");
  src: url("./font/NanumBarunGothic.woff") format("woff"), url("./font/NanumBarunGothic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'NanumBarunGothic';
  src: url("./font/NanumBarunGothicBold.eot");
  src: url("./font/NanumBarunGothicBold.woff") format("woff"), url("./font/NanumBarunGothicBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

.pc_dn {
  display: none; }

.mo_dn {
  display: block; }

.sr-only {
  width: 0;
  height: 0;
  font-size: 0;
  text-indent: -999999px; }

@media screen and (max-width: 960px) {
  .pc_dn {
    display: block; }
  .mo_dn {
    display: none; } }

html, body {
  width: 100%;
  height: auto;
  display: block;
  overflow-x: hidden; }

#wrap {
  width: 100%;
  height: auto;
  background: #fff;
  display: block;
  overflow: hidden; }

header {
  width: calc(100% - 100px);
  height: 100px;
  margin: 0 auto;
  padding: 20px 0; }
  header h1 {
    width: 335px;
    height: 32px;
    padding-top: 14px;
    float: left; }
  header h1 img {
    width: 100%; }
  header nav {
    width: calc(100% - 335px);
    height: 60px;
    float: left;
    position: relative; }
    header nav ul {
      width: 580px;
      height: 50px;
      padding: 5px 0;
      position: absolute;
      left: 50%;
      margin-left: -458px; }
      header nav ul li {
        width: auto;
        padding: 0 10px;
        margin: 0 15px;
        float: left; }
      header nav ul a.depth01 {
        font: 700 20px/50px "Noto Sans KR";
        color: #111;
        position: relative; }
        header nav ul a.depth01::after {
          position: absolute;
          display: block;
          content: "";
          width: 0;
          height: 2px;
          background: #0a7fb3;
          bottom: -2px;
          left: 50%;
          transform: translateX(-50%);
          -webkit-transform: translateX(-50%);
          transition: all .5s;
          -webkit-transition: all .5s; }
        header nav ul a.depth01:hover, header nav ul a.depth01.act {
          color: #0a7fb3; }
          header nav ul a.depth01:hover::after, header nav ul a.depth01.act::after {
            width: calc(100% + 20px);
            transition: all .5s;
            -webkit-transition: all .5s; }
    header nav dl {
      width: auto;
      height: auto;
      padding: 10px 0px;
      background: #fff;
      position: absolute;
      top: 0;
      margin-top: 80px;
      left: 0;
      z-index: 100;
      display: none; }
      header nav dl.depth02_02 {
        margin-left: 130px; }
      header nav dl.depth02_03 {
        margin-left: 300px; }
      header nav dl a {
        padding: 0 25px;
        font: 700 20px/50px "Noto Sans KR";
        color: #111;
        background: #fff; }
        header nav dl a:hover, header nav dl a.act {
          background: #3777bc;
          color: #fff; }
  header .btn_inquire {
    width: 165px;
    height: 60px;
    float: right;
    background: #0a7fb3;
    border-radius: 5px;
    color: #fff;
    font: 700 20px/60px "Noto Sans KR";
    text-align: center;
    transition: all 0.3s;
    -webkit-transition: all 0.3s; }
    header .btn_inquire:hover, header .btn_inquire.act {
      background: rgba(3, 45, 77, 0.8);
      transition: all 0.3s;
      -webkit-transition: all 0.3s; }

#top-btn {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-bottom: 50px;
  margin-right: 50px;
  z-index: 1000;
  display: none;
  background: url("/img/pages/icon-top.png") no-repeat;
  background-position: -60px 0; }
  #top-btn:hover {
    background-position: 0 0; }

footer {
  width: 100%;
  height: 250px;
  padding-top: 60px;
  background: #022e4d; }
  footer .footer {
    width: 1200px;
    height: auto;
    margin: 0 auto; }
  footer .foot_info {
    width: 640px;
    float: left;
    color: #fff; }
    footer .foot_info h5 {
      padding-bottom: 18px;
      font: 700 18px/28px "Noto Sans KR"; }
    footer .foot_info ul {
      width: 100%;
      display: inline-block; }
    footer .foot_info li {
      width: auto;
      margin-right: 40px;
      float: left;
      font: 400 15px/25px "Noto Sans KR";
      position: relative; }
      footer .foot_info li:last-of-type {
        margin-right: 0; }
      footer .foot_info li::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: -21px;
        margin-top: -5px;
        width: 2px;
        height: 10px;
        background: #fff; }
      footer .foot_info li.deco_none::after {
        display: none; }
    footer .foot_info p {
      width: 100%;
      display: block;
      padding-top: 2px;
      font: 400 13px/24px "Noto Sans KR"; }
    footer .foot_info p a {
      display: inline-block;
      color: #42657d;
      font-size: 8px; }
  footer .foot_logo {
    width: 500px;
    padding-top: 50px;
    float: right; }
    footer .foot_logo img {
      display: block;
      float: right; }

@media screen and (max-width: 1400px) and (min-width: 1201px) {
  header {
    width: calc(100% - 40px); }
    header h1 {
      width: 300px;
      height: 30px;
      padding-top: 15px; }
    header nav {
      width: calc(100% - 300px); }
    header nav ul {
      margin-left: -410px; }
    header .btn_inquire {
      height: 54px;
      margin-top: 3px;
      font: 700 20px/54px "Noto Sans KR"; }
  footer .footer {
    width: 1150px; } }

@media screen and (max-width: 1200px) and (min-width: 961px) {
  header {
    width: calc(100% - 20px);
    height: 72px;
    padding: 12px 0; }
    header h1 {
      width: 300px;
      height: 30px;
      padding-top: 10px; }
    header nav {
      width: calc(100% - 300px); }
      header nav ul {
        width: 406px;
        left: auto;
        right: 0;
        margin-right: 170px;
        padding: 0; }
        header nav ul li {
          padding: 0 4px;
          margin: 0 4px; }
        header nav ul a {
          font: 700 18px/50px "Noto Sans KR"; }
        header nav ul a:hover::after, header nav ul a.act::after {
          width: calc(100% + 8px); }
    header .btn_inquire {
      width: 150px;
      height: 50px;
      margin-top: 0;
      font: 700 18px/50px "Noto Sans KR"; }
  #top-btn {
    margin-bottom: 30px;
    margin-right: 30px; }
  footer .footer {
    width: 940px; }
  footer .foot_logo {
    width: 300px; }
  footer .foot_logo img {
    width: 100%; } }

@media screen and (max-width: 960px) {
  header {
    position: fixed;
    background: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 50; }
    header .call_btn {
      float: left; }
    header h1 {
      padding-top: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%); }
    header .menu_btn {
      display: block;
      float: right;
      position: relative;
      border-top: 2px solid #032d4d; }
      header .menu_btn::before, header .menu_btn::after {
        position: absolute;
        display: block;
        content: "";
        height: 2px;
        background: #032d4d;
        top: 0;
        right: 0; }
    header .menu_bg {
      display: none;
      width: 100vw;
      height: 100vh;
      background: rgba(20, 20, 20, 0.6);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 90; }
    header nav {
      width: 310px;
      height: 100vh;
      display: block;
      padding: 30px;
      float: none;
      background: #fff;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 100;
      margin-right: -310px; }
      header nav a.menu_close_btn {
        width: 40px;
        height: 40px;
        float: right;
        display: block;
        position: relative;
        background: #032d4d; }
        header nav a.menu_close_btn::before, header nav a.menu_close_btn::after {
          position: absolute;
          display: block;
          content: "";
          width: 2px;
          height: 24px;
          background: #fff;
          top: 50%;
          left: 50%; }
        header nav a.menu_close_btn::before {
          transform: rotateZ(45deg);
          -webkit-transform: rotateZ(45deg);
          margin-top: -11px; }
        header nav a.menu_close_btn::after {
          transform: rotateZ(-45deg);
          -webkit-transform: rotateZ(-45deg);
          margin-top: -11px; }
      header nav ul {
        width: 250px;
        height: auto;
        padding-top: 70px;
        position: static;
        left: auto;
        margin-left: 0; }
        header nav ul li {
          width: 100%;
          height: auto;
          padding: 0;
          margin: 0;
          display: block;
          float: none; }
        header nav ul a.depth01 {
          font: 700 18px/50px "Noto Sans KR"; }
          header nav ul a.depth01::before, header nav ul a.depth01::after {
            position: absolute;
            display: block;
            content: "";
            width: 2px;
            height: 10px;
            background: #000;
            bottom: 50%;
            left: auto;
            right: 0;
            transition: none;
            -webkit-transition: none;
            margin-right: 5px; }
          header nav ul a.depth01::before {
            transform: rotateZ(45deg);
            -webkit-transform: rotateZ(45deg);
            margin-bottom: -7px; }
          header nav ul a.depth01::after {
            transform: rotateZ(-45deg);
            -webkit-transform: rotateZ(-45deg);
            margin-bottom: -1px; }
          header nav ul a.depth01:hover, header nav ul a.depth01.act {
            color: #185e94; }
            header nav ul a.depth01:hover::before, header nav ul a.depth01:hover::after, header nav ul a.depth01.act::before, header nav ul a.depth01.act::after {
              width: 2px;
              height: 10px;
              background: #185e94;
              transition: none;
              -webkit-transition: none; }
      header nav dl {
        position: static;
        margin-top: 0; }
        header nav dl.depth02_02 {
          margin-left: 0; }
        header nav dl.depth02_03 {
          margin-left: 0; }
        header nav dl a {
          height: 36px;
          font: 700 18px/40px "Noto Sans KR"; }
          header nav dl a::before, header nav dl a::after {
            display: none; }
          header nav dl a:hover, header nav dl a.act_sub {
            background: #fff;
            color: #3777bc; }
      header nav .btn_inquire {
        width: 250px;
        height: 50px;
        margin-top: 50px;
        font: 700 18px/50px "Noto Sans KR"; }
  #top-btn {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 15px;
    margin-right: 15px;
    z-index: 1000;
    display: none;
    background: url("/img/pages/icon-top.png") no-repeat;
    background-position: -120px 0; }
    #top-btn:hover {
      background-position: -120px 0; }
  footer {
    width: 100%;
    height: auto;
    padding: 90px 20px 60px;
    background-image: linear-gradient(130deg, #022d4d 40%, #005074); }
    footer .footer {
      width: 100%;
      height: auto; }
    footer .foot_logo {
      padding-top: 0;
      padding-bottom: 65px;
      float: none; }
    footer .foot_logo img {
      float: none;
      margin: 0 auto; }
    footer .foot_info {
      float: none; }
    footer .foot_info p {
      padding-top: 35px; } }

@media screen and (max-width: 960px) and (min-width: 601px) {
  header {
    width: 100%;
    height: 80px;
    padding: 10px 15px; }
    header .call_btn {
      width: 60px;
      height: 60px;
      padding: 5px; }
    header .menu_btn {
      width: 50px;
      height: 32px;
      margin-top: 14px; }
      header .menu_btn::before {
        width: 40px;
        margin-top: 14px; }
      header .menu_btn::after {
        width: 30px;
        margin-top: 30px; }
  footer .foot_logo {
    width: 100%; }
  footer .foot_logo img {
    width: auto; }
  footer .foot_info li {
    margin-right: 20px; }
  footer .foot_info li::after {
    height: 2px;
    margin-top: -2px;
    right: -11px; } }

@media screen and (max-width: 600px) {
  header {
    width: 100%;
    height: 60px;
    padding: 10px 12px; }
    header .call_btn {
      width: 40px;
      height: 40px; }
    header .call_btn img {
      width: 100%; }
    header h1 {
      width: 210px;
      height: 20px; }
    header h1 img {
      width: 100%; }
    header .menu_btn {
      width: 32px;
      height: 30px;
      margin-top: 8px; }
      header .menu_btn::before {
        width: 27px;
        margin-top: 10px; }
      header .menu_btn::after {
        width: 22px;
        margin-top: 22px; }
    header nav {
      width: 260px; }
      header nav ul {
        width: 200px; }
      header nav .btn_inquire {
        width: 200px; }
  footer .foot_logo, footer .foot_info {
    width: 100%; }
  footer .foot_logo img {
    width: 100%; }
  footer .foot_info li {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 3px;
    font: 400 14px/22px "Noto Sans KR"; }
  footer .foot_info li::after {
    display: none; }
  footer .foot_info p {
    padding-top: 25px; }
  footer .foot_info p a {
    display: block; } }

@media screen and (max-width: 420px) {
  footer .foot_logo img {
    width: 270px; }
  footer .foot_info p {
    font-size: 12px; }
  footer .foot_info p a {
    display: block; } }