@import url("reset.css");

html {
  background-color: #f5f5f5;
  font-family: "Malgun Gothic";
  font-style: normal;
  font-weight: 400;
}

#wrapper {
  max-width: 1440px;
  min-width: 210px;
  width: 100%;
  margin: 0 auto;
  padding: 128px 0;
  background: url(../../media/images/img_mainbg.png) no-repeat;
  background-size: 100%;
}

/* Header Start */
#header {
  width: 1184px;
  margin: 0 auto;
  text-align: center;
}

#header .ass_logo {
  display: none;
}

#header h1 {
  font-size: 4.5rem;
  font-weight: 700;
}

#header p.txt {
  font-size: 1.75rem;
  line-height: 46px;
  margin-top: 32px;
  word-break: keep-all;
}

/* Header END */

/* nav 서비스 목록 Start */
#shortcutArea {
  margin-top: 64px;
}

#shortcutArea .shortcut_list {
  display: flex;
  justify-content: center;
  align-items: center;
}

#shortcutArea .shortcut_list .shortcut_item {
  position: relative;
  display: flex;
  padding: 32px 64px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  border: 2px solid #E8E8E8;
  background: rgba(255, 255, 255, 0.60);
}

#shortcutArea .shortcut_list .shortcut_item:nth-child(2) {
  margin: 0 32px;
}

#shortcutArea .shortcut_list .shortcut_item .service_name {
  color: #4E4E4E;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 28px;
}

#shortcutArea .shortcut_list .shortcut_item .service_link {
  display: block;
  text-align: center;
}

#shortcutArea .shortcut_list .shortcut_item span {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: -0.42px;
  color: #6E6E6E;
}

#shortcutArea .shortcut_list .shortcut_item .service_name::before {
  content: "";
  display: block;
  margin: 0 auto;
  margin-bottom: 8px;
  background-size: 96px;
  background-repeat: no-repeat;
  width: 96px;
  height: 96px;
}

#shortcutArea .shortcut_list .shortcut_item .service_name.type_hwp::before {
  background-image: url("../../media/images/ico_hwp.svg");
}

#shortcutArea .shortcut_list .shortcut_item .service_name.type_hcell::before {
  background-image: url("../../media/images/ico_hcell.svg");
}

#shortcutArea .shortcut_list .shortcut_item .service_name.type_faq::before {
  background-image: url("../../media/images/ico_faq.svg");
}

#shortcutArea .shortcut_list .shortcut_item .service_go::after {
  content: "";
  display: inline-block;
  margin-left: 16px;
  background-image: url("../../media/images/ico_arrow.svg");
  background-repeat: no-repeat;
  width: 7px;
  height: 11px;
}

#mainContainer {
  display: flex;
  margin: 128px auto;
  width: 1184px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#mainContainer .headline_contents {
  display: flex;
  padding: 0px;
  margin-bottom: 64px;
  align-items: center;
  align-self: stretch;
}

#mainContainer .headline_contents .guide_content_img {
  display: flex;
  width: 360px;
  height: 360px;
  margin-right: 32px;
  align-items: center;
  flex-shrink: 0;
}

#mainContainer .headline_contents .guide_content_img .guide_img {
  width: 100%;
}

#mainContainer .headline_contents .guide_item .guide_item_tit {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 32px;
  color: #242424;
  line-height: 48px;
  letter-spacing: -1.08px;
}

#mainContainer .headline_contents .guide_item .guide_item_tit span {
  color: inherit;
}

#mainContainer .headline_contents.contents_faq .guide_item_tit span {
  color: #930aff;
}

#mainContainer .headline_contents.contents_hwp .guide_item_tit span {
  color: #0096fa;
}

#mainContainer .headline_contents.contents_hCell .guide_item_tit span {
  color: #1cad95;
}

#mainContainer .headline_contents .guide_item .guide_item_con {
  color: #4e4e4e;
  line-height: 32px;
  font-size: 18px;
  letter-spacing: -0.54px;
}

/* Footer Start */
#footer {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0px;
  left: 0;
  right: 0;
  background: #4E4E4E;
  align-self: stretch;
}

#footer .contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#footer .contents .main {
  padding: 0;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#footer .contents .link_content {
  display: inline-block;
}

#footer .contents .link_content .title {
  margin-bottom: 5px;
  color: #FFF;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
}

#footer .contents .link_content .title::before {
  content: '|';
  margin: 0 8px;
}

#footer .contents .link_content .title:first-child::before {
  content: '';
  margin: 0;
}

#footer .contents p {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.42px;
  opacity: 0.6;
}

/* Footer END */

.swiper-pagination {
  height: 40px;
  bottom: 0;
  line-height: 40px;
  position: relative;
}

.swiper-button {
  position: relative;
}

.forWeb {
  display: block;
}

.forMobile {
  display: none;
}

.goLink {
  display: none;
}

p {
  color: #242424;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.48px;
}

.br {
  display: block;
  margin-bottom: 24px;
}

/********************************************************************************************
  서브페이지
**********************************************************************************************/
.subWrapper {
  padding: 0 128px !important;
  min-height: 100%;
  height: 100%;
  background: none !important;
}

.subWrap {
  display: flex;
  min-height: 100%;
}

.subWrap .navWrap {
  padding-right: 16px;
  position: relative;
  padding: 64px 0;
}

.subWrap .navWrap:after {
  content: '';
  border-right: 1px solid #e8e8e8;
  min-height: 100%;
  width: 1px;
  position: absolute;
  right: 0;
  top: 0px;
  height: 100%;
}

.subWrap .conWrap {
  padding-left: 32px;
  width: 100%;
  padding-top: 64px;
  padding-bottom: 64px;
}

.subWrap .conWrap .menu .theMenuBtn {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 12.5C20 12.2751 19.9184 12.0595 19.7732 11.9005C19.6281 11.7415 19.4311 11.6522 19.2258 11.6522H4.77419C4.56886 11.6522 4.37195 11.7415 4.22676 11.9005C4.08157 12.0595 4 12.2751 4 12.5C4 12.7249 4.08157 12.9405 4.22676 13.0995C4.37195 13.2585 4.56886 13.3478 4.77419 13.3478H19.2258C19.4311 13.3478 19.6281 13.2585 19.7732 13.0995C19.9184 12.9405 20 12.7249 20 12.5ZM20 6.84783C20 6.62297 19.9184 6.40732 19.7732 6.24832C19.6281 6.08932 19.4311 6 19.2258 6H4.77419C4.56886 6 4.37195 6.08932 4.22676 6.24832C4.08157 6.40732 4 6.62297 4 6.84783C4 7.07268 4.08157 7.28833 4.22676 7.44733C4.37195 7.60633 4.56886 7.69565 4.77419 7.69565H19.2258C19.4311 7.69565 19.6281 7.60633 19.7732 7.44733C19.9184 7.28833 20 7.07268 20 6.84783ZM20 18.1522C20 17.9273 19.9184 17.7117 19.7732 17.5527C19.6281 17.3937 19.4311 17.3043 19.2258 17.3043H4.77419C4.56886 17.3043 4.37195 17.3937 4.22676 17.5527C4.08157 17.7117 4 17.9273 4 18.1522C4 18.377 4.08157 18.5927 4.22676 18.7517C4.37195 18.9107 4.56886 19 4.77419 19H19.2258C19.4311 19 19.6281 18.9107 19.7732 18.7517C19.9184 18.5927 20 18.377 20 18.1522Z' fill='%23242424'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.subWrap .conWrap .menu .theMenuBtn.on {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6646 19.9999C14.5083 20.0004 14.3538 19.9705 14.2125 19.9124C14.0713 19.8543 13.9468 19.7696 13.8483 19.6644L7.23808 12.9243C7.08415 12.762 7 12.5585 7 12.3485C7 12.1385 7.08415 11.935 7.23808 11.7727L14.1463 5.32756C14.3239 5.14239 14.5792 5.02594 14.8559 5.00384C15.1327 4.98173 15.4082 5.05578 15.6219 5.20968C15.8357 5.36359 15.9701 5.58476 15.9956 5.82452C16.0211 6.06429 15.9356 6.30301 15.758 6.48818L9.40443 12.353L15.4809 18.5128C15.6089 18.6459 15.6902 18.808 15.7152 18.9799C15.7402 19.1518 15.7078 19.3262 15.6219 19.4827C15.5361 19.6391 15.4003 19.771 15.2306 19.8626C15.0609 19.9543 14.8645 20.0019 14.6646 19.9999Z' fill='%23242424'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

/* .dark .subWrap .conWrap .menu .theMenuBtn {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='39' height='39' viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.8984 19.498C31.8984 19.1175 31.771 18.7526 31.5441 18.4835C31.3173 18.2144 31.0096 18.0633 30.6888 18.0633H8.10811C7.78729 18.0633 7.4796 18.2144 7.25274 18.4835C7.02589 18.7526 6.89844 19.1175 6.89844 19.498C6.89844 19.8786 7.02589 20.2435 7.25274 20.5126C7.4796 20.7817 7.78729 20.9328 8.10811 20.9328H30.6888C31.0096 20.9328 31.3173 20.7817 31.5441 20.5126C31.771 20.2435 31.8984 19.8786 31.8984 19.498ZM31.8984 9.93283C31.8984 9.5523 31.771 9.18736 31.5441 8.91828C31.3173 8.64921 31.0096 8.49805 30.6888 8.49805H8.10811C7.78729 8.49805 7.4796 8.64921 7.25274 8.91828C7.02589 9.18736 6.89844 9.5523 6.89844 9.93283C6.89844 10.3134 7.02589 10.6783 7.25274 10.9474C7.4796 11.2164 7.78729 11.3676 8.10811 11.3676H30.6888C31.0096 11.3676 31.3173 11.2164 31.5441 10.9474C31.771 10.6783 31.8984 10.3134 31.8984 9.93283ZM31.8984 29.0633C31.8984 28.6827 31.771 28.3178 31.5441 28.0487C31.3173 27.7796 31.0096 27.6285 30.6888 27.6285H8.10811C7.78729 27.6285 7.4796 27.7796 7.25274 28.0487C7.02589 28.3178 6.89844 28.6827 6.89844 29.0633C6.89844 29.4438 7.02589 29.8087 7.25274 30.0778C7.4796 30.3469 7.78729 30.498 8.10811 30.498H30.6888C31.0096 30.498 31.3173 30.3469 31.5441 30.0778C31.771 29.8087 31.8984 29.4438 31.8984 29.0633Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
} */

.subWrap nav {
  width: 272px;
}

.subWrap nav ul {
  padding: 0;
}

.subWrap nav>ul {
  margin-right: 16px;
}

.subWrap nav #main_menu li {
  margin-bottom: 8px;
}

.subWrap nav #main_menu .sub_menu li {
  margin-bottom: 0;
}

.subWrap nav #main_menu li a {
  min-height: 48px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.subWrap nav #main_menu li:last-child {
  margin-bottom: 0;
}

.subWrap nav li {
  list-style: none;
  line-height: 34px;
}

.subWrap nav a {
  display: block;
  /* 중요 */
  color: #242424;
  border-radius: 8px;
}

.subWrap nav a.hasMenu {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='19' height='11' viewBox='0 0 11 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.40039 17.4001L9.20039 9.60015L1.40039 1.80015' stroke='%236E6E6E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' transform='rotate(90 5.5 9.5)'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center right 16px;
}

.subWrap nav a.hasMenu.selected {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='19' height='11' viewBox='0 0 11 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.40039 17.4001L9.20039 9.60015L1.40039 1.80015' stroke='%236E6E6E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' transform='rotate(270 5.5 9.5)'/%3E%3C/svg%3E%0A");
}

.subWrap nav a.selected {
  background-color: rgba(0, 0, 0, 0.04);
}

.subWrap nav a:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.subWrap nav a:active {
  background-color: #00000029;
}

.subWrap nav a:active {
  color: #000;
}

.subWrap nav #main_menu .snd_menu li a {
  font-size: 13px;
  min-height: 32px;
  padding-left: 32px;
}

.subWrap nav #main_menu .trd_menu li a {
  padding-left: 48px;
}

.subWrap nav .sub_menu {
  display: none;
  margin-top: 8px;
}

/* 서브메뉴들 숨김 */
.subWrap .navWrap h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 32px;
}

.subWrap .conWrap .pageNav {
  font-size: 14px;
  color: #6e6e6e;
}

.subWrap .conWrap .pageNav span {
  padding: 0 4px;
}

.subWrap .conWrap .pageNav a {
  color: #6e6e6e;
}

.subWrap .conWrap .pageNav a.nowPage {
  color: #242424;
}

.subWrap .conWrap .content.guideContent {
  line-height: 180%;
}

.subWrap .conWrap .content h2 {
  font-size: 36px;
  font-weight: 700;
  padding: 32px 0;
}

.subWrap .conWrap .content h3 {
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 16px;
}

.subWrap .conWrap .content h4 {
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 8px;
  font-weight: 700;
}

.subWrap .conWrap .content li {
  padding-left: 18px;
  position: relative;
  padding-top: 8px;
}

.subWrap .conWrap .content ul li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  left: 6px;
  top: 14px;
}

.subWrap .conWrap .content ol {
  padding-left: 20px;
}

.subWrap .conWrap .content ol li {
  list-style: decimal;
  padding-left: 0px;
  line-height: 180%;
}

.subWrap .conWrap .content pre {
  white-space: break-spaces;
  line-height: 28px;
}

.subWrap .conWrap .content .media {
  margin-bottom: 32px;
}

.subWrap .conWrap .content .media img,
.subWrap .conWrap .content .media video {
  width: 100%;
}

/********************************************************************************************
  faq페이지
**********************************************************************************************/
.conWrap .content .content_title {
  border-bottom: 2px solid #4e4e4e;
}

.accordion {
  width: 100%;
}

.accordion .accordion-item {
  border-bottom: 1px solid #d7d7d7;
}

.accordion .accordion-item>div {
  padding: 18px 42px 15px;
}

.accordion .accordion-item:last-child {
  border-bottom: none;
}

.accordion .accordion-title {
  padding: 15px;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  position: relative;
}

.accordion .accordion-title:hover {
  background-color: #0000000f;
}

.accordion .accordion-title:active {
  background-color: #00000029;
}

.accordion .accordion-title::before {
  background-image: url(../../media/images/img_q.png);
  content: '';
  width: 24px;
  height: 36px;
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
  left: 2px;
  top: 16px;
}

.accordion .accordion-title.hwp-title::before {
  background-image: url(../../media/images/img_q_hwp.png);
}

.accordion .accordion-title.hcell-title::before {
  background-image: url(../../media/images/img_q_cell.png);
}

.accordion .accordion-title:after {
  background-image: url(../../media/images/ico_acc_down.svg);
  content: '';
  width: 24px;
  height: 14px;
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
  right: 8px;
  top: 20px;
}

.accordion .accordion-title.active:after {
  background-image: url(../../media/images/ico_acc_up.svg);
}

.accordion .content {
  border-top: 1px solid #6E6E6E;
  border-bottom: 1px solid #6E6E6E;
}

.accordion .accordion-content {
  display: none;
  padding: 15px;
  font-size: 15px;
  line-height: 26px;
  color: #242424;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

@media screen and (max-width: 1208px) {
  #wrapper {
    padding: 64px 0;
  }

  #header {
    width: 896px;
  }

  #header h1 {
    font-size: 3.875rem;
  }

  #header p.txt {
    font-size: 1.5rem;
    line-height: 40px;
  }

  #mainContainer {
    margin: 64px auto;
    width: 896px;
  }

  #footer {
    display: none;
  }

  .subWrap .conWrap .content h2 {
    font-size: 32px;
    line-height: 46px;
  }
}

@media screen and (max-width: 1023px) {
  #wrapper {
    background: none;
  }

  #header {
    width: 640px;
  }

  #header h1 {
    font-size: 3.25rem;
  }

  #header p.txt {
    font-size: 1.25rem;
    line-height: 32px;
    letter-spacing: -0.6px;
  }

  #mainContainer {
    width: 640px;
  }

  #mainContainer .headline_contents {
    flex-direction: column;
    justify-content: center;
  }

  #mainContainer .headline_contents .guide_content_img {
    margin-right: 0;
  }

  .forWeb {
    display: none;
  }

  .forMobile {
    display: block;
  }

  .subWrapper {
    padding: 0 32px !important;
  }

  .subWrap {
    overflow: hidden;
  }

  .subWrap .navWrap {
    background: #f5f5f5;
    margin-left: -288px;
    position: absolute;
    min-height: 100%;
    top: 136px;
    transition: all 0.2s;
    padding-top: 0;
  }

  .subWrap .navWrap:after {
    display: none;
  }

  .subWrap .navWrap.on {
    left: 0;
    width: 100%;
    padding-left: 27px;
    margin-left: 0;
    transition: all 0.2s;
    z-index: 9;
  }

  .subWrap nav {
    width: 100%;
  }

  .subWrap .conWrap {
    padding-left: 0;
  }

  .subWrap .conWrap .menu {
    margin-bottom: 32px;
    display: flex;
  }

  .subWrap .conWrap .menu.forMobile>div {
    width: 38px;
    height: 38px;
  }

  .subWrap .conWrap .menu.forMobile>div img {
    width: 38px;
  }

  .subWrap .conWrap .menu.forMobile>div:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }

  .subWrap .conWrap .menu.forMobile>div:active {
    background-color: rgba(0, 0, 0, 0.16);
  }

  .subWrap .conWrap h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 38px;
    text-align: left;
    padding-left: 16px;
    height: 38px;
  }

  .subWrap .conWrap .content h2 {
    font-size: 24px;
    line-height: 36px;
  }

  .subWrap .conWrap .content h3 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media screen and (max-width: 767px) {
  #wrapper {
    padding: 32px 0;
  }

  #header {
    width: 454px;
  }

  #header h1 {
    font-size: 2rem;
  }

  #header p.txt {
    font-size: 0.9375rem;
    line-height: 26px;
    margin-top: 16px;
  }

  /* nav 서비스 목록 Start */
  #shortcutArea {
    margin-top: 32px;
  }

  #shortcutArea .shortcut_list .shortcut_item {
    padding: 32px;
    border-radius: 16px;
    border: 1px solid #E8E8E8;
  }

  #shortcutArea .shortcut_list .shortcut_item:nth-child(2) {
    margin: 0 16px;
  }

  #shortcutArea .shortcut_list .shortcut_item .service_name::before {
    background-size: 56px;
    width: 56px;
    height: 56px;
  }

  #shortcutArea .shortcut_list .shortcut_item span {
    font-size: 11px;
    line-height: 16px;
  }

  #mainContainer {
    margin: 32px auto;
    width: 454px;
  }

  #mainContainer .headline_contents {
    margin-bottom: 32px;
  }

  #mainContainer .headline_contents .guide_content_img {
    width: 240px;
    height: 240px;
  }

  #mainContainer .headline_contents .guide_item .guide_item_tit {
    font-size: 1.5rem;
    margin-bottom: 16px;
    line-height: 36px;
  }

  #mainContainer .headline_contents .guide_item .guide_item_con {
    font-size: 0.937rem;
    line-height: 26px;
  }

  .videoWrap {
    padding: 32px 0;
  }

  .subWrap .navWrap {
    top: 88px;
  }

  .subWrap .conWrap .content h2 {
    font-size: 24px;
    line-height: 28px;
    padding: 16px 0;
  }

  .accordion .accordion-title {
    font-size: 14px;
    line-height: 20px;
    padding-left: 36px !important;
  }

  .accordion .accordion-title::before {
    width: 20px;
    height: 28px;
  }

  .accordion .accordion-content {
    font-size: 12px;
    line-height: 18px;
  }

  .accordion .accordion-item .accordion-content {
    padding-top: 16px;
  }

  .subWrap .conWrap {
    padding-top: 32px;
  }

  .accordion .accordion-title:after {
    width: 12px;
    top: 50%;
    height: 7px;
    transform: translateY(-50%);
  }

  .accordion .accordion-title.active:after {
    top: 58%;
  }

  .subWrap .conWrap .menu {
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 800px) {
  .accordion {
    border-width: 1px;
  }
}

@media screen and (max-width: 517px) {
  #wrapper {
    padding: 16px 0;
  }

  #header {
    width: auto;
  }

  #header h1 {
    font-size: 1.25rem;
    line-height: 28px;
  }

  #header p.txt {
    font-size: 0.8125rem;
    margin-top: 16px;
    line-height: 20px;
    text-align: justify;
  }

  #shortcutArea .shortcut_list .shortcut_item {
    padding: 16px;
  }

  #shortcutArea .shortcut_list .shortcut_item .service_name {
    font-size: 0.875rem;
  }

  #mainContainer {
    width: auto;
  }

  #mainContainer .headline_contents .guide_content_img {
    width: 160px;
    height: 160px;
  }

  #mainContainer .headline_contents .guide_item .guide_item_tit {
    font-size: 1rem;
    margin-bottom: 16px;
    line-height: 36px;
  }

  #mainContainer .headline_contents .guide_item .guide_item_con {
    font-size: 0.75rem;
    line-height: 18px;
  }

  .paginationWrap {
    padding-top: 8px;
  }

  .goLink {
    display: block;
    width: 100%;
    height: 36px;
    border-radius: 8px;
    background-color: #0096fa;
    text-align: center;
    line-height: 38px;
  }

  .goLink a {
    font-size: 12px;
    color: #fff;
    display: block;
  }

  .goLink:hover {
    background-color: #008ae6;
  }

  .goLink:active {
    background-color: #007ed2;
  }

  .accordion {
    margin-bottom: 16px;
  }

  .subWrap .navWrap {
    top: 74px;
  }

  .subWrap .conWrap .content h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .subWrap .conWrap .content pre {
    font-size: 12px;
    line-height: 18px;
  }

  .accordion .accordion-title::before {
    width: 17px;
    height: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  .accordion .accordion-title.active::before {
    top: 60%;
  }

  .accordion .accordion-item .accordion-content {
    padding-left: 28px;
    padding-top: 8px !important;
  }

  .accordion .accordion-item .accordion-title {
    padding-left: 28px !important;
  }

  .subWrap .conWrap h1 {
    font-size: 16px;
    height: 24px;
    line-height: 24px;
    padding-left: 8px;
  }

  .subWrap .conWrap .menu.forMobile>div {
    width: 24px;
    height: 24px;
  }

  .subWrap .conWrap .menu.forMobile>div img {
    width: 24px;
  }

  .subWrap .conWrap .menu img {
    width: 24px;
    height: 24px;
  }

  .accordion .accordion-title {
    font-size: 12px;
  }

  .subWrap .conWrap .content h2 {
    font-size: 20px;
  }

  .subWrap .conWrap .content .media {
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 375px) {
  header h1 {
    font-size: 1.25rem;
  }

  /* nav 서비스 목록 Start */
  #shortcutArea {
    margin-top: 16px;
  }

  #shortcutArea .shortcut_list .shortcut_item {
    padding: 16px 8px;
    border-radius: 8px;
  }

  #shortcutArea .shortcut_list .shortcut_item:nth-child(2) {
    margin: 0 3px;
  }

  #shortcutArea .shortcut_list .shortcut_item .service_name {
    font-size: 0.75rem;
  }

  #shortcutArea .shortcut_list .shortcut_item .service_name::before {
    background-size: 32px;
    width: 32px;
    height: 32px;
  }

  #shortcutArea .shortcut_list .shortcut_item .service_go::after {
    margin-left: 3px;
    width: 5px;
    height: 9px;
    background-size: contain;
  }

  #mainContainer {
    margin-top: 16px;
  }

  #mainContainer .headline_contents {
    margin-bottom: 16px;
  }

  .header p.txt {
    font-size: 13px;
    line-height: 20px;
    margin-top: 8px;
  }

  .subWrap .conWrap {
    padding-top: 0;
    padding-bottom: 0;
  }

  .paginationWrap {
    max-width: 102px;
  }

  .paginationWrap .swiper-button {
    width: 18px;
    height: 18px;
  }

  .paginationWrap .swiper-button:hover {
    width: 18px;
    height: 18px;
  }

  .paginationWrap>div {
    height: 18px;
  }

  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }

  .subWrapper {
    padding: 16px !important;
  }

  .subWrap .conWrap h1 {
    font-size: 16px;
    line-height: 24px;
    padding-left: 8px;
    height: 24px;
    padding-top: 1px;
  }

  .subWrap .conWrap .menu img {
    width: 24px;
    height: 24px;
    padding-bottom: 2px;
  }

  .subWrap .conWrap .pageNav {
    font-size: 11px;
  }

  .subWrap .conWrap .menu {
    margin-bottom: 16px;
    height: 24px;
  }

  .subWrap .conWrap .content h3 {
    font-size: 16px;
    padding-bottom: 8px;
  }

  .subWrap .conWrap .content pre {
    font-size: 13px;
    line-height: 20px;
  }

  .subWrap .conWrap .content h4 {
    font-size: 12px;
    line-height: 16px;
  }

  .subWrap .conWrap .content li {
    font-size: 12px;
    line-height: 18px;
  }

  .subWrap .conWrap .content.guideContent p {
    font-size: 12px;
    line-height: 18px;
  }

  .subWrap .conWrap .content .goLink {
    margin-top: 48px;
  }
  
  .subWrap .navWrap {
    top: 56px;
    font-size: 13px;
  }

  .subWrap nav #main_menu li a {
    padding-left: 0;
  }

  .subWrap nav a.hasMenu {
    background-position: center right 0px;
  }

  .subWrap nav #main_menu .snd_menu li a {
    padding-left: 18px;
    font-size: 11px;
  }
}

@media screen and (min-width: 234px) {
  .office div {
    width: 104px;
    padding: 14px 0px;
    margin: 0;
  }

  .office div.hwp {
    margin-right: 4px;
  }

  .office div.hCell {
    margin-right: 4px;
  }
}


.dark {
  background-color: #242424;
}

.dark h1,
.dark p,
.dark .office div p.tit,
.dark .offceScript .tit,
.dark .offceScript .con {
  color: #f5f5f5;
}

.dark .subWrap .conWrap .pageNav a,
.dark .subWrap .conWrap .pageNav span,
.dark h2,
.dark h3,
.dark h4,
.dark .subWrap .conWrap .content pre,
.dark .accordion .accordion-title,
.dark .accordion .accordion-content,
.dark .subWrap nav #main_menu li a,
.dark .subWrap .conWrap .content li {
  color: #f5f5f5;
}

.dark .subWrap .conWrap .content li::before {
  background-color: #f5f5f5;
}

.dark .subWrap .navWrap {
  background: #242424;;
}
.dark .subWrap .navWrap:after {
  border-color: #303030;
}

.dark #shortcutArea .shortcut_list .shortcut_item {
  border: 2px solid #4E4E4E;
  background: rgba(255, 255, 255, 0.06);
}

.dark #shortcutArea .shortcut_list .shortcut_item .service_link .service_name {
  color: #E8E8E8;
}

.dark #shortcutArea .shortcut_list .shortcut_item .service_link .service_go {
  color: #D7D7D7;
}

.dark #mainContainer .headline_contents .guide_item .guide_item_tit {
  color: #F5F5F5;
}

.dark #mainContainer .headline_contents .guide_item .guide_item_con {
  color: #E8E8E8;
}

.dark .office div {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(78, 78, 78, 1);
}

.dark .office div:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark .paginationWrap .swiper-button-next {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='11' height='19' viewBox='0 0 11 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.40039 17.4001L9.20039 9.60015L1.40039 1.80015' stroke='%23d7d7d7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.dark .paginationWrap .swiper-button-prev {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='11' height='19' viewBox='0 0 11 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.40039 17.4001L9.20039 9.60015L1.40039 1.80015' stroke='%23d7d7d7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  transform: rotate(180deg);
}

.dark .paginationWrap .swiper-pagination-bullet-active {
  background-color: #d7d7d7;
}

.dark .swiper-pagination-bullet {
  background-color: #6e6e6e;
}

.dark .subWrap nav a.selected,
.dark .subWrap nav a:active {
  background: rgba(255, 255, 255, 0.16);
}

.dark .subWrap .conWrap .menu.forMobile>div:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.dark .subWrap .conWrap .menu.forMobile>div:active {
  background-color: rgba(255, 255, 255, 0.16);
}

.dark .subWrap .conWrap .menu .theMenuBtn {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='39' height='39' viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.8984 19.498C31.8984 19.1175 31.771 18.7526 31.5441 18.4835C31.3173 18.2144 31.0096 18.0633 30.6888 18.0633H8.10811C7.78729 18.0633 7.4796 18.2144 7.25274 18.4835C7.02589 18.7526 6.89844 19.1175 6.89844 19.498C6.89844 19.8786 7.02589 20.2435 7.25274 20.5126C7.4796 20.7817 7.78729 20.9328 8.10811 20.9328H30.6888C31.0096 20.9328 31.3173 20.7817 31.5441 20.5126C31.771 20.2435 31.8984 19.8786 31.8984 19.498ZM31.8984 9.93283C31.8984 9.5523 31.771 9.18736 31.5441 8.91828C31.3173 8.64921 31.0096 8.49805 30.6888 8.49805H8.10811C7.78729 8.49805 7.4796 8.64921 7.25274 8.91828C7.02589 9.18736 6.89844 9.5523 6.89844 9.93283C6.89844 10.3134 7.02589 10.6783 7.25274 10.9474C7.4796 11.2164 7.78729 11.3676 8.10811 11.3676H30.6888C31.0096 11.3676 31.3173 11.2164 31.5441 10.9474C31.771 10.6783 31.8984 10.3134 31.8984 9.93283ZM31.8984 29.0633C31.8984 28.6827 31.771 28.3178 31.5441 28.0487C31.3173 27.7796 31.0096 27.6285 30.6888 27.6285H8.10811C7.78729 27.6285 7.4796 27.7796 7.25274 28.0487C7.02589 28.3178 6.89844 28.6827 6.89844 29.0633C6.89844 29.4438 7.02589 29.8087 7.25274 30.0778C7.4796 30.3469 7.78729 30.498 8.10811 30.498H30.6888C31.0096 30.498 31.3173 30.3469 31.5441 30.0778C31.771 29.8087 31.8984 29.4438 31.8984 29.0633Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.dark .subWrap .conWrap .menu .theMenuBtn.on {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='39' height='39' viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.3212 31.4979C24.0779 31.4986 23.8376 31.4508 23.6179 31.3579C23.3982 31.265 23.2046 31.1294 23.0513 30.9611L12.7688 20.1769C12.5293 19.9173 12.3984 19.5917 12.3984 19.2556C12.3984 18.9196 12.5293 18.594 12.7688 18.3344L23.5149 8.02214C23.7912 7.72587 24.1883 7.53956 24.6188 7.50419C25.0493 7.46882 25.4779 7.58729 25.8103 7.83354C26.1428 8.0798 26.3519 8.43366 26.3915 8.81728C26.4312 9.2009 26.2983 9.58287 26.022 9.87914L16.1387 19.2629L25.591 29.1186C25.79 29.3315 25.9165 29.5909 25.9554 29.8659C25.9942 30.1408 25.9439 30.42 25.8103 30.6703C25.6767 30.9206 25.4655 31.1316 25.2016 31.2782C24.9377 31.4249 24.6322 31.5011 24.3212 31.4979Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center;
 cursor: pointer;
}