body{overflow-x: hidden;}
.sub-nav{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #F4F4F4;
  border: 1px solid #ddd;
  padding: 10px 0;
  transition: all .5s;
  z-index: 90;
}
/*.sub-nav.scroll-down {
  transform: translateY(-100%);
  transition: all .5s;
}*/
  .sub-nav > .con-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sub-nav .page-list{
    display: flex;
    align-items: center;
  }
  .sub-nav .page-list li{
    padding: 0 12px;
    position: relative;
  }
  .sub-nav .page-list li:not(:last-child)::after{
    content: '';
    display: inline-block;
    width: 1px;
    height: 60%;
    background: #aaa;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .sub-nav .page-list li a{
      display: flex;
      align-items: center;
  }
  .sub-nav .page-list li a span{
    font-size: 14px;
    letter-spacing: -0.02em;
    line-height: 20px;
    transition: .15s;
  }
  .sub-nav .page-list li.on a span, .sub-nav .page-list li:hover a span{
    color: #ED1C24;
    border-bottom: 1px solid #ED1C24;
    font-weight: 600;
  }
  .sub-nav .page-list li a img{
      width: 24px;
      height: 24px;
      margin-right: 4px;
      filter: saturate(0%);
      transition: .15s;
  }
  .sub-nav .page-list li.on a img, .sub-nav .page-list li:hover a img{filter: saturate(100%);}
  .sub-nav .lang-list li, .sub-nav .lang-list li .select-info{
    display: flex;
    align-items: center;
  }
  .sub-nav .lang-list li .select-custom{margin-top: 0;}
  /*기능에 대한 여부 확인 중이라 잠시 가려두겠습니다.*/
  .lang-list > li:not(:last-child){margin-right: 20px; display: none;}
  .lang-list > li .select-info{
    font-size: 14px;
    margin-right: 10px;
  }
  .lang-list > li .select-info img{
    width: 16px;
    display: block;
    margin-right: 10px;
  }
  .hd-language > .con-box{justify-content: flex-end;}
  .select-custom .select_tit::after {background: url(../../../images/select-arrow.png) no-repeat center / contain;}
  .select-custom.lang-select .select_tit.KOR::before,
.select-custom.lang-select .select-custom-list > li.KOR::before{background-image: url(../../../images/gnb/icon/kor-icon.png);}
.select-custom.lang-select .select_tit.CZE::before,
.select-custom.lang-select .select-custom-list > li.CZE::before {background-image: url(../../../images/gnb/icon/cze-icon.png);}
.select-custom.lang-select .select_tit.CHN::before,
.select-custom.lang-select .select-custom-list > li.CHN::before {background-image: url(../../../images/gnb/icon/chn-icon.png);}
.select-custom.lang-select .select_tit.DEU::before,
.select-custom.lang-select .select-custom-list > li.DEU::before {background-image: url(../../../images/gnb/icon/deu-icon.png);}
.select-custom.lang-select .select_tit.ENG::before,
.select-custom.lang-select .select-custom-list > li.ENG::before {background-image: url(../../../images/gnb/icon/eng-icon.png);}
.select-custom.lang-select .select_tit.ESP::before,
.select-custom.lang-select .select-custom-list > li.ESP::before {background-image: url(../../../images/gnb/icon/esp-icon.png);}
.select-custom.lang-select .select_tit.FRA::before,
.select-custom.lang-select .select-custom-list > li.FRA::before {background-image: url(../../../images/gnb/icon/fra-icon.png);}
.select-custom.lang-select .select_tit.ITA::before,
.select-custom.lang-select .select-custom-list > li.ITA::before {background-image: url(../../../images/gnb/icon/ita-icon.png);}
.select-custom.lang-select .select_tit.JPN::before,
.select-custom.lang-select .select-custom-list > li.JPN::before {background-image: url(../../../images/gnb/icon/jpn-icon.png);}
.select-custom.lang-select .select_tit.HUN::before,
.select-custom.lang-select .select-custom-list > li.HUN::before {background-image: url(../../../images/gnb/icon/hun-icon.png);}
.select-custom.lang-select .select_tit.POL::before,
.select-custom.lang-select .select-custom-list > li.POL::before {background-image: url(../../../images/gnb/icon/pol-icon.png);}
.select-custom.lang-select .select_tit.PRT::before,
.select-custom.lang-select .select-custom-list > li.PRT::before {background-image: url(../../../images/gnb/icon/prt-icon.png);}
.select-custom.lang-select .select_tit.RUS::before,
.select-custom.lang-select .select-custom-list > li.RUS::before {background-image: url(../../../images/gnb/icon/rus-icon.png);}
.select-custom.lang-select .select_tit.THA::before,
.select-custom.lang-select .select-custom-list > li.THA::before {background-image: url(../../../images/gnb/icon/tha-icon.png);}
.select-custom.lang-select .select_tit.VNM::before,
.select-custom.lang-select .select-custom-list > li.VNM::before {background-image: url(../../../images/gnb/icon/vnm-icon.png);}
.select-custom.lang-select .select_tit.TUR::before,
.select-custom.lang-select .select-custom-list > li.TUR::before {background-image: url(../../../images/gnb/icon/tur-icon.png);}


  .board-search { 
    width: 100%;
    display: flex;
    align-items: center;
  }
  .str_hd-pc{
    /* margin-top: 58px; */
    position: fixed;
    top: 66px;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 89;
  }
  .str_hd-m{display: none;margin-top: 58px;}
.str_hd-inner{
  min-height: 138px;
  padding: 20px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.str_hd-inner > div:first-child{
  display: flex;
  width: 46%;
  gap: 24px;
}
.str_hd-inner > div:first-child .logo {margin-top: 6px;}
.str_hd-inner > div:last-child{width: 40%;}
.str_hd-top .logo{
  width: 86px;
}
.str_hd-btnWrap{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.str_hd-btnWrap a{
  display: inline-block;
  margin-left: 20px;
}
.str_hd-btnWrap a span{
  font-size: 14px;
  border-bottom: 1px solid #000;
}
.str_hd-btnWrap a img{
  display: inline;
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}
.str_hd-inner .select-custom {max-width: 200px; margin: 0 8px 0 0 ;}
.str-tit{
  font-size: 32px;
  font-weight: bold;
  font-family: 'Play', sans-serif;  
}
.str_hd-bottom{margin-top: 10px;}
.str_hd-sub{
  width: 100%;
  height: 80px;
  background: #656565;
  overflow: hidden;
  /* margin-bottom: 40px; */
}
.str-options{
  width: 100%;
  height: 80px;
  display: flex;
  position: relative;
}
.str-options > li{
  /* width: calc(100% / 3); */
  flex: 1;
  height: 100%;
  color: #fff;
  display: flex;
  justify-content: space-between;
  /*position: relative;*/
  text-align: left;
}
.str-options > li:not(:first-child) {
  margin-left: -27px;
}

.str-options > li:not(:first-child) .str-info {padding-left: 54px;}

.str-options > li:first-child.active::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #ED1C24;
  top: 0;
  left: calc(-100% + 26px);
  z-index: 1;
}

.str-options > li:last-child.active::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #ED1C24;
  top: 0;
  right: calc(-100% + 25px);
  z-index: 1;
}

.str-options > li:last-child .str-info::after {display: none;}
.str-options > li:nth-child(n + 2) .str-info {
  background: #fff;clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%)
} 
.str-options > li:last-child .str-info {
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
  background: linear-gradient(to right, #fff, #656565);
}
.str-options > li .str-info::before {content: ''; width: calc(100% - 4px);height: 100%; clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%); background: #656565; position: absolute;top: 0; left: 2px;}
.str-options > li.active .str-info {
  /* background: #fff; */
  clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%)
}

.str-options > li.active .str-info::before {content: ''; width: calc(100% - 4px);height: 100%; clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%); background: #ED1C24; position: absolute;top: 0; left: 2px;}
.str-options > li:last-child .str-info::before {clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);left: 2px;
  width: calc(100% - 2px);}
/*4번째 리스트가 active일 경우*/
.str-options > li:last-child.active .str-info::after {
  display: none;
}
.str-options > li > img{
  position: absolute;
  display: none;
  height: 100%;
  top: 0;
}
img.step-arrow01{left: -21px;}
img.step-arrow02{right: 0;}
img.step-arrow01.active, img.step-arrow02.active{display: block;}
img.step-arrow01.active{background: #ED1C24;}
.step-tit{display: flex; z-index: 1;}
.str-options li:first-child .step-tit {margin-left: 20px;}
.str-info{
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  position: relative;
  z-index: 1;
}
.step-num ,.step-name{
  display: inline-block;
  color: #fff;
  font-size: 20px;
}
.step-num{white-space: nowrap;}
.step-num span{font-weight: 600;}
.step-name{
  font-weight: 600;
  margin-left: 22px;
}
.str-info .option{
  font-size: 20px;
  font-weight: bold;
  color: #fff; 
  margin-left: 20px;
}
.work-piece-wrap{display: flex;}
.option .work-piece{
  display: flex;
  align-items: center;
  margin: 0;
}
.option .work-piece > li{
  width: 24px;
  height: 24px;
  position: relative;
  margin-right: 5px;
}
.option .work-piece > li:not(:first-child){margin-left: 0;}
.option .work-piece > li > img{
  width: 100%;
  height: 100%;
  display: block;
}
/* ----------------- str_hd-mobile ----------------- */
.str_hd-m{
  width: 100%;
  background: #fff;
  padding-top: 40px;
}
.str_hd-m .logo{width: 72px;margin: 0 auto;}
.str_hd-m .logo a, .str_hd-m .logo img{width: 100%;}
.str_hd-top-info{
  background: url(../../images/e-catalog_hd-mBg.png) no-repeat right top -10px/ 136px; gap: 12px;
}
.str_hd-top-info, .str-tit{
  display: flex;
  align-items: center;
}
.str-tit{display:block;line-height: 1;}
.str-tit .select-custom{
  width: 100%;
  margin: 36px auto 0;
}
.str-tit strong{
  font-size: 20px;
  font-weight: bold;
  
}
.str-tit span {display: inline-block; margin-top: 10px;line-height: 24px;}
.dropdown-btn{
  margin-left: 5px;
  width: 24px;
  height: 24px;
  text-indent: -9999em;
  background: url(../../../../images/util-menu/dropdown-arrow.png) no-repeat center/ contain;
}
.dropdown-btn.active{transform: rotate(-180deg);}
.str_hd-m .board-search{width: 100%;margin-top: 12px;}
.str_hd-m .str_hd-btnWrap{
  display: none;
  padding: 10px 0;
}
.str_hd-m .str_hd-btnWrap.active{
  display: flex;
  justify-content: flex-start;
}
.str_hd-m .str_hd-btnWrap a:not(:first-child){margin-left: 10px;}
.str_hd-m .str_hd-btnWrap a {
  display: flex;
  align-items: center;
}
.str_hd-m .str_hd-btnWrap a span{
  font-size: 14px;
  border-bottom: 1px solid #000;
}
.str_hd-m .str_hd-btnWrap a img{
  display: inline-block;
  width: 12px;
  height: 12px;
}
.str_hd-m .str-options{width: calc(100% - 40px);}
.str_hd-m .step-tit{display: block;}
.str_hd-m .str-options li:first-child .step-tit {margin-left: 0;}
.str_hd-m .str-tit{align-items: flex-end;}
.str_hd-m .str_hd-btnWrap a{margin-left: 0;}
.str_hd-m .step-name{margin-left: 0;}
.str_hd-m .step-num, .str_hd-m .step-name{font-size: 14px;}
.str_hd-m .step-num{display: block;}
.str_hd-m .str-info{padding: 5px;}
.str_hd-m .str_hd-bottom{margin-top: 0;}
.str_hd-m .str_hd-sub{margin-top: 15px;}
@media (max-width: 1280px) {
  .str_hd-inner > div:first-child {
    width: 55%;
  }
}
@media (max-width: 1180px){#footer{padding: 35px 0 62px;}}
@media (max-width: 920px){
    .sub-nav .page-list li{padding: 0;}
    .sub-nav .page-list li:first-child{text-indent: -9999em;}
    .sub-nav .page-list li:not(:first-child), .sub-nav .lang-list li .select-info, .sub-nav .page-list li:not(:last-child)::after{display: none;}
  }
@media (max-width: 768px){
  .str_hd-pc{display: none;}
  .str_hd-m{display: block;}
  .str_hd{background: none;}
  .str_hd-btnWrap{margin-bottom: 0;}
  .str_hd-sub {
    margin-bottom: 40px;
  }
  /* .str-options > li .str-info::before {width: calc(100% - 9px); left: 4px;} */
  .str-options > li:first-child.active .str-info {clip-path: unset;background: #ed1c24;}
  .str-options > li:first-child.active::after {left: -100%;}
  .str-options > li:not(:first-child) {margin-left: -2%;}
  .str-options > li:not(:first-child) .str-info {padding-left: 20%;}
  .str-options > li:last-child .str-info { /*background: #656565;*/ clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);}
}