@charset "utf-8";

:root {
  /* 기본 색상 */
  --color-white: #fff;
  --color-black: #000;

  /* 기본 폰트 */
  --font-HIMaumR: "HIMaumR";
}

[class^="sec-"] {
  scroll-margin-top: 50px;
}

.header {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2000;
  transition: all 0.5s ease;
  background-color: #f9f9fb;
}

.header.active {
  top: -52px;
}

.header.passive {
  display: none;
}

.header .layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 0 20px;
}

.header .logo {
  display: block;
  width: 120px;
  height: 15px;
  background: url("../image/m_logo.png") no-repeat;
}

.header .menu-button {
  display: block;
  width: 28px;
  height: 28px;
  background: url("../image/m_icon_menu.png") no-repeat;
}

/* 햄버거 메뉴 영역 */
.hamburger-area {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  background-color: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.5s ease;
}

.hamburger-area.active {
  transform: translateX(0);
}

.hamburger-area .side-layout {
  position: relative;
  height: 100%;
  overflow-y: auto;
}

.hamburger-area .inner {
  position: relative;
}

.hamburger-area .side-header {
  padding: 32px;
  border-bottom: 12px solid #f9f9fb;
}

.hamburger-area .user-area {
  display: flex;
  justify-content: space-between;
}

.hamburger-area .user-area .login-title {
  background: url(../image/m_icon_hm_arr.png) no-repeat right;
  font-size: 20px;
  padding-right: 20px;
}

.hamburger-area .user-area .sign-up {
  color: #555557;
  text-decoration: underline;
  font-size: 14px;
}

.hamburger-area .icon-list {
  display: flex;
  margin-top: 24px;
}

.hamburger-area .icon-list .item {
  width: calc(100% / 4);
}

.hamburger-area .icon-list .link {
  display: block;
}

.hamburger-area .icon-list .icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f9f9fb;
}

.hamburger-area .icon-list .accident-icon {
  background-image: url(../image/m_icon_hm_accident.png);
}

.hamburger-area .icon-list .customer-icon {
  background-image: url(../image/m_icon_hm_customer.png);
}

.hamburger-area .icon-list .certification-icon {
  background-image: url(../image/m_icon_hm_certification.png);
}

.hamburger-area .icon-list .notice-icon {
  background-image: url(../image/m_icon_hm_notice.png);
}

.hamburger-area .icon-list .icon-text {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
}

.hamburger-area .side-nav {
  overflow: hidden;
  position: sticky;
  top: 52px;
  background-color: #fff;
}

.hamburger-area .side-nav .list {
  display: flex;
  padding: 18px 32px;
  white-space: nowrap;
}

.hamburger-area .side-nav .item {
  margin-right: 6px;
}

.hamburger-area .side-nav .link {
  display: block;
  padding: 6px 14px;
  color: #767678;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  background-color: #f5f5f7;
}

.hamburger-area.active .side-nav .link.active {
  color: #fff;
  background-color: #000;
}

.hamburger-area.active .side-nav .link.asd {
  border: 2px solid #000;
}

.hamburger-area .side-nav .link.orange {
  color: #ee5a00;
}

.hamburger-area .all-list {
  padding: 0 32px;
  border-bottom: 1px solid #efeff1;
}

.hamburger-area .all-list .title {
  display: block;
  padding: 36px 0 24px;
  font-size: 20px;
}

.hamburger-area .all-list .sub-title {
  color: #3f3f41;
  font-size: 14px;
  font-style: normal;
}

.hamburger-area .all-list a {
  display: block;
  padding: 12px 0;
  font-weight: 500;
}

.hamburger-area .contents-list > li {
  padding: 16px 0;
}

.hamburger-area .page-list {
  padding: 32px 32px 64px;
}

.hamburger-area .page-item a {
  display: block;
  padding: 16px 0;
}

.hamburger-area .page-item b {
  background: url(../image/m_icon_hm_tablink.png) no-repeat right / 24px auto;
  /* display: inline-block; */
  padding-right: 32px;
  font-size: 20px;
  font-weight: 700;
}

.hamburger-area .side-button {
  position: sticky;
  top: 0;
  /* position: absolute;
  top: 0;
  right: 0;
  left: 0; */
  background-color: #fff;
}

.hamburger-area .side-button .button-area {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 12px 0;
}

.hamburger-area .side-button button {
  width: 28px;
  height: 28px;
  margin: 0 3px;
  background-repeat: no-repeat;
  background-size: 28px auto;
  background-color: transparent;
}

.hamburger-area .side-button .search {
  background-image: url(../image/m_icon_search.png);
}

.hamburger-area .side-button .close {
  background-image: url(../image/m_icon_close.png);
}

.nav-link {
  display: none;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: #fff;
}

.nav-link.active {
  display: block;
}

.nav-link .list {
  display: flex;
  width: max-content;
  padding: 0 20px;
}

.nav-link .list .item {
  margin-right: 20px;
}

.nav-link .list .link-text {
  display: block;
  padding: 15px 0;
  color: #767678;
  font-size: 14px;
}

.main {
  padding-top: 52px;
}

.main .inner {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 40px 0;
}

.bg-color-f9f9fb {
  background-color: #f9f9fb;
}

.footer {
  background-color: #f5f5f7;
}

.footer .inner {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 32px 0 100px;
}

.footer .info-area .list {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer .info-area .item + .item {
  position: relative;
  margin-left: 8px;
  padding-left: 8px;
}

.footer .info-area .item + .item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  transform: translateX(-50%);
  margin-top: -6px;
  background-color: #B7B7B9;
}

.footer .info-area a {
  display: block;
  color: #555557;
  font-size: 14px;
  font-weight: 500;
}

.footer .info-area .text-color {
  color: #dd5300;
}

.footer .info-area .color-black {
  color: #1f1f21;
}

.footer .info-area .fwb {
  font-weight: 700;
}

.footer address {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
  margin-top: 36px;
}

.footer address p {
  color: #555557;
  font-size: 12px;
  font-weight: 500;
}

.footer .copy {
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  margin-top: 8px;
  font-size: 12px;
}

.footer .sns-list {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.footer .sns-item + .sns-item {
  margin-left: 12px;
}

.footer .sns-item .link {
  display: block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}

.footer .sns-item:nth-child(1) .link {
  background-image: url(../image/m_icon_footer_naver.png);
}

.footer .sns-item:nth-child(2) .link {
  background-image: url(../image/m_icon_footer_blog.png);
}

.footer .sns-item:nth-child(3) .link {
  background-image: url(../image/m_icon_footer_hi.png);
}

.footer .sns-item:nth-child(4) .link {
  background-image: url(../image/m_icon_footer_youtube.png);
}

.footer .sns-item:nth-child(5) .link {
  background-image: url(../image/m_icon_footer_facebook.png);
}

.footer .telephone-list {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.footer .telephone-item {
  display: flex;
  position: relative;
  justify-content: center;
  width: calc((100% / 2) - 4px);
  padding: 12px 12px 12px 56px;
  border: 1px solid #e8e8ea;
  background-color: #fff;
  margin-right: 4px;
  border-radius: 16px;
}

.footer .telephone-item:last-child {
  margin-right: 0;
}

.footer .telephone-item .link {
  display: flex;
  flex-direction: column;
}

.footer .telephone-item .title {
  color: #dd5300;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.footer .telephone-item .phone {
  font-weight: 700;
  font-size: 18px;
}

.footer .telephone-item .icon {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  background-color: #efeff1;
  border-radius: 999px;
}

.footer .telephone-item .icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px auto;
}

.footer .telephone-item:nth-child(1) .icon::after {
  background-image: url(../image/m_icon_footer_chat.png);
}

.footer .telephone-item:nth-child(2) .icon::after {
  background-image: url(../image/m_icon_footer_user.png);
}

.dock-bar {
  position: sticky;
  bottom: 0;
  z-index: 1000;
  border-top: 1px solid #EFEFF1;
  background-color: #fff;
  box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.10);
}

.dock-bar .list {
  display: flex;
  justify-content: space-between;
  /* padding: 6px 72px 18px; */
  padding: 6px 32px 18px;
}

.dock-bar .item .link {
  display: block;
  background-repeat: no-repeat;
  background-size: 28px auto;
  background-position: center top;
  padding-top: 24px;
}

.dock-bar .item:nth-child(1) .link {
  background-image: url("../image/m_nav_bar1.png");
}

.dock-bar .item:nth-child(2) .link {
  background-image: url("../image/m_nav_bar2.png");
}

.dock-bar .item:nth-child(3) .link {
  background-image: url("../image/m_nav_bar3.png");
}

.dock-bar .item.on:nth-child(3) .link {
  background-image: url("../image/m_nav_bar3_on.png");
}

.dock-bar .item:nth-child(4) .link {
  background-image: url("../image/m_nav_bar4.png");
}

.dock-bar .item:nth-child(5) .link {
  background-image: url("../image/m_nav_bar5.png");
}

.dock-bar .item .text {
  color: #767678;
  font-size: 12px;
}

.dock-bar .item.on .text {
  color: #000;
}

.insurance-consult_icon {
  position: fixed;
  right: 8px;
  bottom: 80px;
  z-index: 1000;
  width: 52px;
  height: 52px;
  background: url(../image/m_icon_insurance-consult.png) no-repeat center / 52px auto;
}