body {
  background-color: #fff;
}

.footer {
  background-color: #fff;
  border-top: solid 1px var(--border-color);
  color: #404040;
  font-weight: 400;
}

.footer .addrInfo {
  border-bottom-color: var(--border-color);
}

.footer .addrInfo .tel {
  color: inherit;
  font-weight: 700;
}

.footer .copyright {
  background-image: url(/eng/img/foot_logo2.png);
}

.subHead {
  background-color: #FCFCFC;
  position: relative;
  z-index: 2;
}

.subHead>.container {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.subHead .path {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #666;
  font-weight: 400;
  letter-spacing: -.5px;
  font-size: 14px;
  position: relative;
  z-index: 2;
  width: 100%;
}

.subHead .path>* {
  position: relative;
  padding-right: 10px;
}

.subHead .path>*::after {
  content: "";
  display: inline-flex;
  width: 1px;
  height: 1em;
  background-color: var(--border-color);
  margin-left: 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.subHead .path>*:last-child::after {
  display: none;
}

.subHead .path a {
  display: block;
  align-items: center;
}

.subHead .path button {
  width: 100%;
}

.subHead .path button span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subHead .path i {
  font-size: 20px;
  line-height: 1;
}

.subHead .funcGroup {
  display: flex;
  gap: 5px;
}

.subHead .funcGroup a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  position: relative;
  z-index: 2;
  border: solid 1px transparent;
}

.subHead .funcGroup a::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
}

.subHead .icon_share.toggle::before {
  background: none;
  content: "\e922";
  font-family: 'xeicon';
  color: #888;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subHead .icon_share::before {
  background: url(/eng/img/icon_share.png) no-repeat 50% 50%;
}

.subHead .icon_clip::before {
  background: url(/eng/img/icon_clip.png) no-repeat 50% 50%;
}

.subHead .icon_print::before {
  background: url(/eng/img/icon_print.png) no-repeat 50% 50%;
}

.narrowArea {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.narrowArea.small {
  max-width: 500px;
}

#shareWrap .item {
  position: relative;
  z-index: 1;
}

#shareWrap #share {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  gap: 7px;
  transition: all .5s ease 0s;
  opacity: 0;
  display: flex;
  flex-direction: column;
  transform-origin: top;
  background: #fff;
  border: solid 1px #dcdcdc;
  padding: 10px 5px;
  border-radius: 30px;
  box-shadow: 5px 5px 5px rgba(100, 100, 100, .1);
  animation-name: showHideFlex;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

#shareWrap.active #share {
  opacity: 1;
  top: 5px;
  animation-name: showHideFlex;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-direction: normal;
}

#share a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  border-radius: 50%;
  width: 1em;
  height: 1em;
}

#share a::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-image: url(/eng/img/icon_header_sns.png);
  background-size: auto 1em;
}

#share .facebook a::after {
  background-position: 0 0;
}

#share .twitter a::after {
  background-position: -1.13em 0;
}

#share .band a::after {
  background-position: -2.27em 0;
}

#share .kakao a::after {
  background-position: -3.35em 0;
}

#share .wechat a::after {
  background-position: -4.45em 0;
}

#share .whats a::after {
  background-position: -5.55em 0;
}

@keyframes showHideFlex {
  0% {
    background: #ff0;
    transform: translateX(-50%) scaleY(0);
  }

  100% {
    transform: translateX(-50%) scaleY(1);
  }
}

.subHead .funcGroup a:hover,
.subHead .funcGroup a.toggle {
  border-color: var(--pointColor);
  box-shadow: 5px 5px 5px rgba(100, 100, 100, .2);
  background: #fff;
  border-radius: 10px;
  border: solid 1px #dcdcdc;
}

@media (max-width:780px) {
  .subHead {
    border-top: none;
  }

  .subHead>.container {
    justify-content: flex-end;
  }

  .subHead .path {
    display: none;
  }
}

.subContents {
  padding: 5rem 0;
}

.subContents .subContTitle {
  font-size: 2em;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.cont-tit-1 {
  font-size: 1.5em;
  font-weight: 700;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 3rem;
}

.cont-tit-1.center {
  justify-content: center;
}

.cont-tit-1::before {
  content: '';
  display: block;
  height: 1em;
  width: 3px;
  background: var(--primary);
}

.cont-tit-1.center::before {
  display: none;
}

.tit-line {
  position: relative;
  padding-top: 10px;
}

.tit-line::before {
  content: '';
  width: 1em;
  height: 3px;
  background: var(--primary);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* .process */
.process .stepList {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.process .stepList>li {
  display: grid;
  grid-template-columns: 230px auto;
  position: relative;
}

.process .stepList>li .cont {
  position: relative;
}

.process .stepList>li .cont::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 20px;
  height: 100%;
  width: 1px;
  background: var(--primary);
}

.process .stepList>li:last-child .cont::after {
  display: none;
}

.process .stepList>li .tit {
  font-weight: 500;
  display: flex;
  gap: 6px;
  position: relative;
  color: #000;
  align-items: flex-start;
  white-space: nowrap;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 40px;
  font-size: 1.1em;
}

.process .stepList>li .tit::after {
  content: '';
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: var(--primary);
  position: absolute;
  right: 6px;
  top: 6px;
}

.process .stepList>li .tit::before {
  content: '';
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: solid 1px var(--primary);
  position: absolute;
  right: 0;
  top: 0;
}

.process .stepList>li .tit .num {
  color: var(--primary);
  font-size: 1.1em;
  font-weight: 700;
  margin-top: -5px;
}

.process .stepList>li .cont {
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.process .stepList>li .item {
  border-bottom: dashed 1px #ededed;
  padding-bottom: 1rem;
}

.process .stepList>li:last-child .item:last-child {
  border-bottom: none;
}

.process .stepList>li .subj {
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 1rem;
}

.process .stepList>li .list li {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 1rem;
  position: relative;
}

.process .stepList>li .list li::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  position: absolute;
  top: .5em;
  left: 0;
}

.process .stepList>li .list .list{
  padding-left: 2rem;
  font-size: .95em;
  margin-bottom:1rem;
}

.process .stepList>li .list.column li{
  flex-direction: column !important;
  align-items: flex-start; 
  
}

.process .stepList>li .list .list li::before{
   background:#333
}

@media(max-width:780px) {
  .process .stepList>li .item:last-child {
    border-bottom: none;
  }

  .process .stepList>li {
    display: block;
    border: solid 1px #dcdcdc;
    border-radius: 5px;
  }

  .process .stepList>li .tit {
    align-items: center;
    flex-direction: row;
    padding-right: 0;
    font-weight: 700;
    border-bottom: solid 1px #ccc;
    padding: 2rem;
    background: #fafafa;
  }

  .process .stepList>li .cont {
    padding: 2rem;
  }

  .process .stepList>li .tit::after,
  .process .stepList>li .tit::before,
  .process .stepList>li .cont::after {
    display: none;
  }
}

/* remark */
.remark-box {
  padding: 2rem;
  background: #E7FDFD;
  border: solid 1px #03C4C4;
  border-radius: 8px;
}

/* tit-tab */
.tit-tab {
  display: grid;
  gap: 1rem;
  font-size: 1.2em;
  grid-auto-flow: column;
  max-width: 100%;
  overflow-y: auto;
/*  justify-content: center;*/
  margin-bottom: 5rem;
}

.tit-tab li {
  position: relative;
}

.tit-tab .active a {
  font-weight: 700;
}

.tit-tab a {
  display: flex;
  padding: 1rem;
  white-space: nowrap;
}

.tit-tab a::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - .5em);
  height: 3px;
  width: 1em;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
}

.tit-tab .active a::before,
.tit-tab a:hover::before {
  transform: scaleX(100%);
  transition: all .3s ease 0s;
}

@media(max-width:1280px) {
  .tit-tab {
    justify-content: normal;
  }

  .tit-tab::-webkit-scrollbar {
    height: 5px;
  }

  .tit-tab::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 5px;
  }

  .tit-tab::-webkit-scrollbar-track {
    background-color: #dcdcdc;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }
}



/* sitemap */
.sitemap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  padding-top: 4rem;
}

.sitemap .depth1 {
  flex-basis: 50%;
  border: solid 1px #dcdcdc;
  border-radius: 5px;
}

.sitemap .depth1_title {
  font-weight: 700;
  display: block;
  padding: 2rem;
  background: #fafafa;
  border-bottom: solid 1px #dcdcdc;
}

.sitemap .depth2 {
  font-size: .9em;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 2rem;
}

.sitemap .depth2 a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sitemap .depth2 a::before {
  content: '';
  display: inline-flex;
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background: var(--pointColor);
}

@media (max-width : 780px) {
  .sitemap {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* cardList */

.cardList {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cardList .item {
  border: solid 1px #dcdcdc;
  border-radius: 1rem;
  padding: 2rem;
}

.cardList .item .list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cardList .item .list>li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cardList .item .list>li .txt {
  display: flex;
  align-items: center;
}

.cardList .logo-img {
  max-height: 3em;
  border: solid 1px #dcdcdc;
  padding: .5rem;
}

.cardList .logo-img.dark {
  background-color: #404040;
}

.pharam {
  line-height: 1.5;
}

.contTitle {
  font-size: 1.3em;
  font-weight: 700;
  padding-top: 5px;
  margin-bottom: 2rem;
  position: relative;
}

.contTitle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: .7em;
  background-color: var(--pointColor);
}

.pointText {
  position: relative;
}

.pointText::before {
  content: '';
  background-color: rgb(40 184 175 / 20%);
  position: absolute;
  left: 0;
  bottom: -1px;
  display: inline-flex;
  width: 100%;
  height: .7em;
}

#srhForm .round-box.gray {
  position: sticky;
  top: 157px;
}

@media (max-width:1280px) {
  #srhForm .round-box.gray {
    top: 61px;
  }
}


/* #ERI-search */
#ERI-search .toggleBtn-wrap {
  display: none;
}

.scrollFix.fixed {
  position: sticky;
  left: 0;
}

#ERI-search.fixed .round-box {
  border-radius: 0;
  box-shadow: 0 0 10px rgba(100, 100, 100, .2);
}

@media (max-width:780px) {
  .subContents {
    padding-top: 2rem;
  }

  #ERI-search.fixed .round-box {
    display: none;
  }

  #ERI-search.open .round-box {
    display: flex;
  }

  #ERI-search.fixed .toggleBtn-wrap {
    display: flex;
    justify-content: center;
    border-bottom: solid 1px #ccc;
  }

  #ERI-search .toggleBtn-wrap .toggleBtn {
    display: block;
    background-color: #333;
    width: 100%;
    font-weight: 500;
    padding: 1.5rem;
    color: #fff;
  }

  #ERI-search .mbl-column {
    gap: 2rem;
  }

  .select-form .option .opt-item {
    padding: 2rem 0;
  }
}

.popCont-swiper-button-next,
.popCont-swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  z-index: 2;
  width: 40px;
  height: 50px;
  background-color: rgba(255, 255, 255, .5);
  border: solid 1px #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease 0s;
}

.popCont-swiper-button-next:hover,
.popCont-swiper-button-prev:hover {
  background-color: #fafafa;
}

.popCont-swiper-button-prev {
  left: 0;
}

.popCont-swiper-button-next {
  right: 0;
}

.swiper-button-disabled {
  display: none;
}