@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url("//cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

html,
body {
  font-size: 16px;
  line-height: 1.285;
  color: #222;
}
@keyframes upDown {
  0% {
    top: 35%;
  }
  50% {
    top: 25%;
  }
  100% {
    top: 35%;
  }
}

@keyframes upDown2 {
  0% {
    top: 45%;
  }
  50% {
    top: 35%;
  }
  100% {
    top: 45%;
  }
}

@keyframes txtLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* 고정 버튼 */
.ch_fixed_btn {
  z-index: 2;
  position: fixed;
  bottom: 70px;
  right: 70px;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .8)
}

.ch_fixed_btn svg {
  fill: #aaa;
  
}

.sj_goTop {
  position: relative;
  
}

.sj_goTop::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: #e1e1e1;
}

.sj_goTop,
.sj_goDown {
  text-align: center;
  display: flex;
  align-items: center;
  padding: 14px;
  
}

@media screen and (max-width:1919px) {
  .sj_header.on .k_logo.on .logo-fixed {
    height: 30px;
  }

  .k_logo.on .logo-default {
    height: 30px;
  }
}

@media screen and (max-width:1600px) {
  .ch_fixed_btn {
    left: unset;
    right: 40px;
    bottom: 40px;
  }
}

@media screen and (max-width:1480px) {
  .ch_fixed_btn {
    right: 20px;
    bottom: 40px;
  }
}

@media screen and (max-width:480px) {
  .ch_fixed_btn {
    display: none;
  }
}

.je_container {
  width: 95%;
  margin: 0 auto;
  max-width: 1480px;
}

.sj_container {
  width: 95%;
  max-width: 1480px;
  margin: 0 auto;
  height: 100%;
}

.sj_section {
  padding: 80px 0;
}

@keyframes upDown {
  0% {
    top: 35%;
  }

  50% {
    top: 25%;
  }

  100% {
    top: 35%;
  }
}

@keyframes upDown2 {
  0% {
    top: 45%;
  }

  50% {
    top: 35%;
  }

  100% {
    top: 45%;
  }
}

@keyframes txtLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.sj_header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 11;
  transition: .6s;
}

.sj_header .sj_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sj_header .sj_container h1 {
  width: 85px;
  height: 42px;
  
}

.sj_header .sj_container h1 a {
  background: url("../img/dfix_logo-ww.png") center/cover;
  
}

.sj_header .sj_container .sj_hdrRight {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}

.sj_header .sj_container .sj_hdrRight .sj_topNav .sj_navWrap {
  display: flex;
}

.sj_header .sj_container .sj_hdrRight .sj_topNav .sj_navWrap .sj_navList {
  padding: 40px 40px;
  position: relative;
  
}

.sj_header .sj_container .sj_hdrRight .sj_topNav .sj_navWrap .sj_navList .sj_navSub {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  text-align: center;
}

.sj_header .sj_container .sj_hdrRight .sj_topNav .sj_navWrap .sj_navList .sj_navSub .sj_navSubList {
  margin-top: 20px;
}

.sj_header .sj_container .sj_hdrRight .sj_topNav .sj_navWrap .sj_navList.on {
  background-color: #111;
  color: #fff;
}

.sj_header .sj_container .sj_hdrRight .sj_topNav .sj_navWrap .sj_navList.on .sj_navSub {
  display: block;
  background-color: #111;
}

.sj_header .sj_container .sj_hdrRight .sj_icon {
  display: flex;
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList {
  position: relative;
  padding: 30px 10px;
  
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList .sj_langIcon .sj_langIconBtn {
  background: url("../img/header/img_lang.png") center/cover;
  width: 18px;
  height: 18px;
  
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList .sj_langIcon .sj_langList {
  display: none;
  position: absolute;
  bottom: -55%;
  left: -5%;
  text-align: center;
  padding: 40px 10px 16px 10px;
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #ddd;
  z-index: -1;
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList .sj_langIcon .sj_langList .sj_langJp {
  margin-top: 10px;
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList.on .sj_langIcon .sj_langIconBtn {
  background: url("../img/header/img_lang_on.png") center/cover;
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList.on .sj_langIcon .sj_langList {
  color: #111;
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList .sj_navBar .sj_stick {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #fff;
  
}

.sj_header .sj_container .sj_hdrRight .sj_icon .sj_iconList .sj_navBar .sj_stick:not(:first-of-type) {
  margin-top: 5px;
}

.sj_header.on {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.sj_header.on .sj_container h1 a {
  background: url("../img/dfix_logo-bb.png") center/cover;
}

.sj_header.on .sj_container .sj_hdrRight {
  color: #111;
}

.sj_header.on .sj_container .sj_icon .sj_iconList .sj_langIcon .sj_langIconBtn {
  background: url("../img/header/img_lang_on.png") center/cover;
}

.sj_header.on .sj_container .sj_icon .sj_iconList .sj_navBar .sj_stick {
  background-color: #111;
}

.sj_header .sj_slideMenu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 0;
  height: 100vh;
  overflow: hidden;
  transition: width .4s cubic-bezier(0.23, 1, 0.320, 1);
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.sj_header .sj_slideMenu .sj_logoBox {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%) translateX(-50px);
  opacity: 0;
  transition: all .6s cubic-bezier(0.23, 1, 0.320, 1) .4s;
}

.sj_header .sj_slideMenu.on .sj_logoBox {
  opacity: 1;
  /* transform: translateY(-50%) translateX(0); */
}

.sj_header .sj_slideMenu .sj_logoBox .sj_logo {
  background: url("/img/dfix_logo-ww.png") center/cover;
  width: 210px;
  height: 45px;
}

.sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo {
  margin-top: 20px;
  line-height: 1.6;
  width: 100%;
}

.sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList {
  font-size: 1rem;
  text-align: left;
  color: #fff;
  font-weight: 700;
}

.sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList span {
  font-weight: 700;
  margin-right: 20px;
  color: #fff;
}

.sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList.sj_sil02 {
  margin-top: 10px;
}

.sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList.sj_sil02 span {
  margin: 0 10px 0 0;
}

.sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList.sj_sil02 span:nth-child(1){
  margin-left: 0;
}
.sj_header .sj_slideMenu .sj_slideNav {
  position: absolute;
  left: calc(50% - 100px);
  top: 49%;
  transform: translateY(-50%);
  width: calc(50% + 100px);
  color: #666;
  opacity: 0;
  transition: opacity .6s ease .2s, transform .6s cubic-bezier(0.23, 1, 0.320, 1) .2s;
}

.sj_header .sj_slideMenu.on .sj_slideNav {
  opacity: 1;
  /* transform: translateY(-50%) translateX(0); */
}

.sj_header .sj_slideMenu .sj_slideNav .sj_navList {
  font-size: 2rem;
  transform: translateX(-50px);
  opacity: 0;
  transition: all .6s cubic-bezier(0.23, 1, 0.320, 1);
}

.sj_header .sj_slideMenu .sj_slideNav .sj_navList:not(:first-of-type) {
  margin-top: 25px;
}

.sj_header .sj_slideMenu.on .sj_navList {
  transform: translateX(0);
  opacity: 1;
}

.sj_header .sj_slideMenu.on .sj_navList:nth-child(1) { transition-delay: .3s; }
.sj_header .sj_slideMenu.on .sj_navList:nth-child(2) { transition-delay: .4s; }
.sj_header .sj_slideMenu.on .sj_navList:nth-child(3) { transition-delay: .5s; }
.sj_header .sj_slideMenu.on .sj_navList:nth-child(4) { transition-delay: .6s; }
.sj_header .sj_slideMenu.on .sj_navList:nth-child(5) { transition-delay: .7s; }
.sj_header .sj_slideMenu.on .sj_navList:nth-child(6) { transition-delay: .8s; }
.sj_header .sj_slideMenu.on .sj_navList:nth-child(7) { transition-delay: .9s; }

.sj_header .sj_slideMenu .sj_slideNav .sj_navList a {
  display: inline;
  font-weight: 900;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}



.sj_header .sj_slideMenu .sj_slideNav .sj_navList a:hover {
  color: #fff;
}

.sj_header .sj_slideMenu .sj_slideNav .sj_navList a:hover::before {
  left: 0;
}


.sj_header .sj_slideMenu .sj_slideCloseBtn {
  position: absolute;
  top: 4.5%;
  right: 2.5%;
  width: 30px;
  height: 30px;
  z-index: 10;
  opacity: 0;
  transform: scale(0.5) rotate(180deg);
  transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55) .3s;
}

.sj_header .sj_slideMenu.on .sj_slideCloseBtn {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.sj_header .sj_slideMenu .sj_slideCloseBtn button {
  color: #fff;
  font-size: 28px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sj_header .sj_slideMenu .sj_slideCloseBtn button:hover {
  transform: rotate(90deg) scale(1.1);
}

.sj_header .sj_slideMenu.on {
  width: 100vw;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  height: 100vh;
}

.sj_header .sj_slideMenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.03"/><circle cx="80" cy="80" r="1" fill="%23ffffff" opacity="0.03"/><circle cx="40" cy="60" r="1" fill="%23ffffff" opacity="0.03"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
  opacity: 0.1;
  z-index: -1;
}

.sj_main {
  position: relative;
  padding-bottom: 60px;
}

.sj_main .sj_bannerView {
  height: 900px;
  width: 100vw;
  position: relative;
}

.sj_main .sj_bannerView .sj_bannerGroup {
  width: 100%;
  height: 100%;
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem {
  position: relative;
  width: 100%;
  height: 100%;

}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_videoSec {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(1.1);
  overflow: hidden;
  transition: transform 2s linear;
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_videoSec.loaded {
  transform: scale(1.0);
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container {
  display: flex;
  align-items: center;
  height: 100%;

}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts {
  color: #fff;
  position: relative;
  top: -2.5%;
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerText {
  font-size: 56px;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerSubText {
  font-size: 24px;
  margin-top: 2.5%;
  text-align: center;
  color: #fff;
  font-weight: 400;
  line-height: 1.4;
  text-shadow: 2px 2px 5px #111;
  
}




.sj_main .sj_bannerView .sj_goDown {
  width: 70px;
  height: 70px;
  background-color: #fff;
  margin-top: -70px;
  z-index: 4;
  position: relative;
  
}

.sj_main .sj_bannerView .sj_goDown .sj_goDownBtn {
  width: 100%;
  height: 100%;
  position: relative;
}

.sj_main .sj_bannerView .sj_goDown .sj_goDownBtn i {
  font-size: 2.5rem;
  color: #333;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  animation: upDown2 1.3s infinite;
  
}

.sj_main .sj_bannerView .sj_goDown .sj_goDownBtn i:nth-of-type(2) {
  top: 30px;
  opacity: .5;
  animation: upDown 1.3s infinite;
}

.sj_main .sj_portfolio {
  position: relative;
  overflow: hidden;
}

.sj_main .sj_portfolio .sj_container {
  display: flex;
}

.sj_main .sj_portfolio .sj_secHdr {
  width: 50%;
  height: 620px;
  position: relative;
}

.sj_main .sj_portfolio .sj_secHdr h3 {
  font-size: 4.6875rem;
  font-weight: 100;
  
}

.sj_main .sj_portfolio .sj_secHdr h6 {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: 40px;
  
}

.sj_main .sj_portfolio .sj_secHdr .sj_btns {
  position: absolute;
  left: 0;
  bottom: 0;
}

.sj_main .sj_portfolio .sj_secHdr .sj_btns button {
  width: 88px;
  height: 88px;
  outline: 1px solid #aaa;
  
}

.sj_main .sj_portfolio .sj_secHdr .sj_btns button i {
  font-size: 4rem;
  
}

.sj_main .sj_portfolio .sj_secHdr .sj_btns button.sj_nextBtn {
  margin-left: 20px;
}

.sj_main .sj_portfolio .sj_swipe {
  position: absolute;
  left: 50%;
  display: flex;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView {
  width: 480px;
  overflow: hidden;
  background-color: #fff;
  position: absolute;
  left: -350px;
  bottom: -75px;
  z-index: 2;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup {
  display: flex;
  width: calc(100% * 7);
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem {
  width: calc(100% / 7);
  padding: 40px 50px;
  background-color: #666;
  color: #fff;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem h4 {
  font-size: 2.5rem;
  font-weight: 700;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem ul {
  margin-top: 40px;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem ul li {
  display: flex;
  justify-content: space-between;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 20px;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem ul li h5 {
  font-size: 1.6rem;
  font-weight: 700;
  width: calc(20% - 10px);
  opacity: .8;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem ul li p {
  font-size: 1.6rem;
  width: calc(80% - 10px);
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .5;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeImageView {
  overflow: hidden;
  cursor: pointer;
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeImageView .sj_swipeImageGroup {
  width: 1720px;
}

.sj_main .sj_portfolio .sj_swipe .sj_portPagi {
  top: auto;
  left: 7%;
  bottom: -15%;
  width: 380px;
  height: 1px;
}

.sj_main .sj_portfolio .sj_swipe .sj_portNum {
  position: absolute;
  bottom: -15%;
  left: 35%;
  z-index: 9;
  font-size: 5rem;
  line-height: 1;
  color: #f0f0f0;
  font-weight: 100;
}

.sj_main .sj_portfolio .sj_swipe .sj_portNum .sj_number .sj_cn01 {
  color: #ddd;
}

.sj_main .sj_portfolio .sj_swipe .sj_portNum .sj_txt {
  font-size: 2rem;
  color: #666;
  position: absolute;
  left: -20%;
  bottom: 0;
  background-color: #fff;
}

.sj_main .sj_portfolio .sj_swipe .sj_portNum .sj_number {
  display: flex
}

.sj_main .sj_portfolio .sj_swipe .sj_portNum .sj_cn02 {
  margin-top: -20px;
}

.sj_main .sj_portfolio .sj_swipe .sj_portPagi span {
  height: 3px;
  margin-top: -1px;
  background-color: #b50b14;
}

.sj_main .sj_subBanner .sj_container .sj_texts {
  text-align: center;
}

.sj_main .sj_subBanner .sj_container .sj_texts h2 {
  font-size: 1.5625rem;
  font-weight: 500;
  
}

.sj_main .sj_subBanner .sj_container .sj_texts p {
  font-size: 5rem;
  font-weight: 100;
  margin-top: 60px;
  line-height: 1;
  
}

.sj_main .sj_subBanner .sj_container .sj_bgi {
  width: 100%;
  height: 450px;
  background: url("../img/subBanner/bgi.jpg") center/cover;
  margin-top: -130px;
  transition: 1s;
}


.sj_main .sj_information .sj_secHdr h3 {
  font-size: 4.6875rem;
  font-weight: 100;
  
}

.sj_main .sj_information .sj_secHdr h6 {
  font-size: 1.25rem;
  margin-top: 40px;
  
}

.sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns {
  direction: rtl;
}

.sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns button {
  width: 70px;
  height: 70px;
  background-color: #f4f4f4;
  
}

.sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns button i {
  font-size: 4rem;
  
}

.sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns button.sj_infoNext {
  margin-left: 10px;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView {
  overflow: hidden;
  padding: 20px 10px;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem {
  border: 1px solid #ccc;
  padding: 45px 30px;
  transition: all .5s;
  position: relative;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem h5,
.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem h5 {
  font-size: 1.5625rem;
  font-weight: 700;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem p {
  font-size: 1rem;
  margin-top: 40px;
  height: 40px;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem p.time {
  margin-top: 60px;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem .plus {
  width: 0;
  height: 0;
  background-color: #b50c15;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -10px;
  right: -10px;
  transition: all .4s;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem .plus i {
  color: #fff;
  font-size: 2rem;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem:hover {
  background-color: #f4f4f4;
  border: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem:hover .plus {
  width: 80px;
  height: 80px;
}

.sj_sub .sj_container {
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  width: 95%;
}

.sj_sub .sj_section {
  padding: 0;
}

.sj_sub .sj_section .sj_ctSubTitle {
  font-weight: 700;
  font-size: 16px;
  color: #cb0f19;
  
}

.sj_sub .sj_section .sj_ctTitle {
  font-weight: 700;
  font-size: 4rem;
  letter-spacing: -0.05em;
  
}

.sj_sub .sj_section .sj_paragraph {
  color: #666;
  font-size: 1.6rem;
  line-height: 2;
  
}

.sj_sub .sj_section .mt {
  margin-top: 40px;
}

.sj_sub .sj_subBanner {
  background: url("../img/sub01_company/mnBanner01.jpg") center/cover;
  height: 650px;
  position: relative;
}

.sj_sub .sj_subBanner .sj_container {
  height: 100%;
  color: #fff;
}

.sj_sub .sj_subBanner .sj_container .sj_texts {
  position: absolute;
  left: 0;
  bottom: 45px;
  text-align: left;
}

.sj_sub .sj_subBanner .sj_container .sj_texts .sj_mnTitle {
  font-size: 8rem;
  font-weight: 400;
  
}

.sj_sub .sj_subBanner .sj_container .sj_texts .sj_subTitle {
  font-size: 1.8rem;
  margin-top: 20px;
  
}

.sj_sub .sj_subBanner .sj_container .sj_subNav {
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 253px;
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_subNavBtn {
  position: relative;
  width: 100%;
  text-align: left;
  height: 30px;
  border-bottom: 2px solid #f9f9f9;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_subNavBtn i {
  position: absolute;
  right: 0;
  
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_navWrap {
  position: absolute;
  width: 100%;
  top: 30px;
  border-bottom: 1px solid #ddd;
  display: none;
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_navWrap .sj_mnNav {
  display: none;
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_navWrap .sj_navList {
  position: relative;
  z-index: 2;
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_navWrap .sj_navList .sj_navSub .sj_navSubList {
  padding: 16px 20px;
  background-color: #fff;
  font-size: 16px;
  line-height: 14px;
  font-weight: 700;
  color: #555;
  transition: all .3s ease-in-out;
  border: 1px solid #ddd;
  border-width: 0 1px;
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_navWrap .sj_navList .sj_navSub .sj_navSubList:hover {
  background-color: #b50b14;
  border: 1px solid #b50b14;
}

.sj_sub .sj_subBanner .sj_container .sj_subNav .sj_navWrap .sj_navList .sj_navSub .sj_navSubList:hover a {
  color: #fff;
}

.sj_sub01Company .sj_companyBanner .sj_subNav .sj_navWrap .sj_navList .sj_navSub .sj_navSubList:nth-of-type(1) {
  background-color: #b50b14;
  border: 1px solid #b50b14;
  color: #fff;
}

.sj_sub01Company .sj_companyBanner .sj_subNav .sj_navWrap .sj_navList:not(:nth-of-type(1)) {
  display: none;
}

.sj_sub01Company .sj_thank {
  padding: 80px 0 170px 0;
  position: relative;
  z-index: -1;
}

.sj_sub01Company .sj_thank .sj_container .sj_dfix {
  font-size: 1.8rem;
  color: #222;
  font-weight: 700;
  
}

.sj_sub01Company .sj_thank .sj_logo {
  background: url("../img/dfix_logo-bb.png") center/cover;
  width: 85px;
  height: 42px;
  margin-top: 90px;
  
}

.sj_sub01Company .sj_thank::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1050px;
  height: 120%;
  z-index: -1;
  background: url("../img/sub01_company/bgImage01.png") center/cover;
  display: none;
}

.sj_sub01Company .sj_thank::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("../img/sub01_company/b_bg.jpg") center/cover;
  opacity: .3;

}

.sj_footer {
  background-color: #f1f1f1;
  padding: 30px 0 20px 0;
}

.sj_footer .sj_container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1760px;
  margin: 0 auto;
  width: 95%;
}

.sj_footer .sj_container .sj_goTop {
  width: 100px;
  height: 100px;
  background-color: #B50B14;
  position: absolute;
  left: 0;
  top: -65%;
  
}

.sj_footer .sj_container .sj_goTop .sj_goTopBtn {
  width: 100%;
  height: 100%;
  position: relative;
}

.sj_footer .sj_container .sj_goTop .sj_goTopBtn i {
  font-size: 3rem;
  color: #fff;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  animation: upDown 1.3s infinite;
  
}

.sj_footer .sj_container .sj_goTop .sj_goTopBtn i:nth-of-type(2) {
  top: 30px;
  opacity: .5;
  animation: upDown2 1.3s infinite;
}

.sj_footer .sj_container .sj_ftrLeft h1 {
  height: 45px;
  background: url("../img/dfix_logo-bb.png")no-repeat;
}

.sj_footer .sj_container .sj_ftrLeft h6 {
  font-size: 0.9375rem;
  margin-top: 25px;
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav {
  display: flex;
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList {
  font-size: 1.125rem;
  position: relative;
  margin-left: 30px;
  
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList .sj_familyList {
  position: absolute;
  bottom: 150%;
  right: 0;
  background-color: #666;
  padding: 20px;
  display: none;
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList .sj_familyList li {
  width: 100px;
  color: #fff;
  opacity: .3;
  font-size: 1.6rem;
  
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList .sj_familyList li:not(:first-of-type) {
  margin-top: 20px;
}

.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo {
  margin-top: 25px;
}

.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li {
  gap: 6px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li.mt20 {
  margin: 10px 0;
}



.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li h5 span {
  font-weight: 700;
}

.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li h5 span.mr10 {
  margin-right: 10px;
}

.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li h5.ml10 {
  margin-left: 10px;
}

/* Section 01 - In Situ TEM 섹션 */
.sj_section01 {
  padding: 120px 0 40px 0;
}

.sj_main .sj_section01_content {
  align-items: flex-start;
  background: url("/theme/jj_theme/img/index/insitu.png") 50% 50% / cover no-repeat;
  border-radius: 16px;
  padding: 50px 40px;
  transition: all 0.3s ease-out;
  transform: translateY(0) scale(1);
  position: relative;
  height: 480px;
  display: flex;
  align-items: flex-start;
}

.sj_main .sj_section01_content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  z-index: 0;
}

.sj_main .sj_section01_content:hover {
  box-shadow: #00000026 0 6px 12px 6px;
  transform: translateY(-10px) scale(1.0125);
}

.sj_section01_left {
  flex: 1;
  max-width: 100%;
  position: relative;
  z-index: 1;
  
}

.sj_section01_title {
  color: #FFF;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1px;
  
}

.sj_keyword_texts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px;
  margin-top: 40px;
  max-width: 33%;
}

.sj_keyword_text {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  font-family: 'Pretendard', sans-serif;
  white-space: nowrap;
  text-align: center;
  
}

@media (max-width: 1024px) {

  html,
  body {
    font-size: 16px;
  }

  .sj_header .sj_slideMenu .sj_slideNav {
    left: 50px;
    width: calc(100% - 100px);
    transform: translateY(0);
  }

  .sj_header .sj_slideMenu .sj_slideNav .sj_navList {
    font-size: 2.5rem;
  }

  .sj_header .sj_slideMenu .sj_slideNav .sj_navList:not(:first-of-type) {
    margin-top: 20px;
  }

  .sj_header .sj_slideMenu .sj_slideNav .sj_navWrap {
    text-align: left;
  }

  .sj_header .sj_slideMenu .sj_logoBox {
    left: 50px;
    top: auto;
    bottom: 50px;
    transform: translateY(0);
  }

  .sj_header .sj_slideMenu .sj_logoBox .sj_logo {
    width: 180px;
    height: 38px;
  }

  .sj_header .sj_slideMenu .sj_slideCloseBtn {
    top: 35px;
    right: 50px;
  }


  .sj_main .sj_bannerView .sj_goDown {
    width: 80px;
    height: 80px;
  }

  .sj_main .sj_portfolio .sj_secHdr {
    height: auto;
  }

  .sj_main .sj_portfolio .sj_secHdr h6 {
    margin-top: 20px;
  }

  .sj_main .sj_portfolio .sj_secHdr .sj_btns {
    position: static;
    margin-top: 20px;
  }

  .sj_main .sj_portfolio .sj_secHdr .sj_btns button {
    width: 50px;
    height: 50px;
  }

  .sj_main .sj_portfolio .sj_container {
    display: block;
  }

  .sj_main .sj_portfolio .sj_swipe {
    position: static;
    left: auto;
    margin-top: 20px;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_portPagi {
    bottom: 0;
    width: 120px;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_portNum {
    bottom: 0;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeTextView {
    left: auto;
    right: 0;
    width: 250px;
    bottom: 0;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem ul {
    margin-top: 20px;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem {
    padding: 20px 20px;
  }



  .sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem h4 {
    font-size: 3rem;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeImageView .sj_swipeImageGroup .sj_swipeImageItem {
    width: calc(100% / 4);
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeImageView .sj_swipeImageGroup .sj_swipeImageItem img {
    width: 100%;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeImageView .sj_swipeImageGroup .sj_swipeImageItem ul {
    margin-top: 20px;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeImageView .sj_swipeImageGroup .sj_swipeImageItem h4 {
    font-size: 3rem;
  }

  .sj_main .sj_subBanner .sj_container .sj_texts p {
    margin-top: 20px;
  }

  .sj_main .sj_subBanner .sj_container .sj_bgi {
    margin-top: -90px;
    height: 350px;
  }

  .sj_main .sj_information .sj_secHdr h6 {
    margin-top: 20px;
  }

  .sj_main .sj_information .sj_infoSwipe .sj_artView {
    margin-top: 20px;
  }

  .sj_footer .sj_container .sj_goTop {
    width: 80px;
    height: 80px;
  }

  .sj_sub .sj_subBanner {
    height: 500px;
  }

  .sj_sub .sj_subBanner .sj_container .sj_texts {
    left: 0;
    bottom: 25%;
    text-align: center;
    width: 100%;
    transform: translateY(-50%);
  }

  .sj_sub01Company .sj_thank::after {
    right: -370px;
  }

  /* Section01 */
  .sj_section01 {
    padding: 60px 0 20px 0;
  }

  .sj_main .sj_section01_content {
    padding: 40px 30px;
    height: 350px;
    min-height: 350px;
    background-position: 50% 50%;
    display: flex;
    align-items: flex-start;
  }

  .sj_main .sj_section01_content:hover {
    transform: translateY(-5px) scale(1.005);
  }

  .sj_section01_title {
    font-size: 32px;
  }

  .sj_keyword_texts {
    gap: 10px;
    margin-top: 25px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }

  .sj_keyword_text {
    font-size: 16px;
    padding: 10px 16px;
  }

  /* Section02-03 */
  .sj_section02_03 {
    padding: 0 0 60px 0;
  }

  .sj_section02_03_content {
    flex-direction: column;
    gap: 20px;
    min-height: auto;
  }

  .sj_section02_left,
  .sj_section03_right {
    padding: 40px 30px;
    height: 400px;
    display: flex;
    align-items: flex-start;
  }

  .sj_section02_left:hover,
  .sj_section03_right:hover {
    transform: translateY(-5px) scale(1.005);
  }

  .sj_section03_right {
    background: url(/theme/jj_theme/img/index/spectroscopy_full.png) no-repeat 50% 50% / cover;
  }

  .sj_section02_title,
  .sj_section03_title {
    font-size: 32px;
  }

  .sj_section02_left .sj_keyword_texts,
  .sj_section03_right .sj_keyword_texts {
    gap: 10px;
    margin-top: 30px;
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }

  .sj_section02_left .sj_keyword_text,
  .sj_section03_right .sj_keyword_text {
    font-size: 16px;
    padding: 10px 16px;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_portNum {
    bottom: 365px;
    right: 5%;
    left: unset;
  }

  .sj_main .sj_subBanner {
    margin-top: 80px;
  }
}

@media (max-width: 768px) {
  .sj_header .sj_container .sj_hdrRight .sj_topNav .sj_navWrap {
    display: none;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeTextView {
    width: 300px;
  }

  .sj_main .sj_subBanner .sj_container .sj_bgi {
    height: 320px;
    margin-top: -90px;
  }

  .sj_footer .sj_container {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .sj_footer .sj_container .sj_ftrLeft,
  .sj_footer .sj_container .sj_ftrRight {
    width: 100%;
  }

  .sj_footer .sj_container .sj_ftrLeft {
    margin-top: 25px;
  }

  .sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav {
    justify-content: center;
  }

  .sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li {
    justify-content: center;
  }

  .sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li {
    justify-content: center;
    text-align: center;
  }

  .sj_footer .sj_container .sj_ftrLeft h1 {
    margin: 0 auto;
    width: 140px;
    height: 30px;
    background-size: cover;
  }

  .sj_footer .sj_container .sj_ftrLeft h6 {
    text-align: center;
  }

  .sj_footer .sj_container .sj_goTop {
    top: -25%;
  }

  .sj_sub .sj_subBanner .sj_container .sj_subNav {
    width: 220px;
  }

  .sj_sub01Company .sj_thank::after {
    right: -420px;
  }
}




.sj_main {
  padding-bottom: 0;
}


html,
body {
  font-family: "Pretendard", sans-serif;
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerText {
  font-family: 'pretendard', sans-serif;
  font-weight: 600;
  letter-spacing: -1px;
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerText span {
  overflow: unset;
}

.sj_main .sj_portfolio .sj_secHdr h3 {
  font-family: 'pretendard', sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
  color: #333;
  
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView {
  width: 460px;
  
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem {
  background-color: #f8f8f8;
  
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem h4 {
  word-break: keep-all;
  color: #333;
  
}

.sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem p {
  font-size: 1.0625rem;
  margin-top: 30px;
  line-height: 1.5;
  word-break: keep-all;
  color: #333;
  
}

.sj_main .sj_portfolio .sj_swipe .sj_portNum .sj_txt {
  display: none;
  
}

.sj_main .sj_portfolio .sj_secHdr .sj_btns button {
  width: 60px;
  height: 60px;
  outline: 1px solid #e7e7e7;
  
}

.sj_main .sj_portfolio .sj_secHdr .sj_btns button.sj_nextBtn {
  margin-left: 10px;
}

.sj_main .sj_portfolio .sj_secHdr .sj_btns button i {
  font-size: 2rem;
  
}

.sj_main .sj_portfolio .sj_swipe .sj_portPagi {
  display: none;
  
}

.sj_section_wrap {
  background: url("/theme/jj_theme/img/index/main_bg.png")no-repeat center center /cover;

}


.sj_main .sj_subBanner {
  background: #f9f9f9;

}

.sj_main .sj_subBanner .sj_container .sj_texts h2 {
  color: #333;
  font-size: 1.5625rem;
  line-height: 1.4;
  word-break: keep-all;

}

.sj_main .sj_subBanner .sj_container .sj_bgi {
  height: auto;
  background: none;
  margin-top: 60px;

}

.sj_main .sj_subBanner .sj_container .sj_bgi ul {
  transition: 1s;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sj_main .sj_subBanner .sj_container .sj_bgi ul {
  width: 100%;
  transition: 1s;
}

.sj_main .sj_subBanner .sj_container .sj_bgi ul li {
  width: 23%;
  
}

.sj_main .sj_subBanner .sj_container .sj_bgi ul li p {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 15px rgb(0 0 0 / 10%);
  -webkit-box-shadow: 0 10px 15px rgb(0 0 0 / 10%);
  
}

.sj_main .sj_subBanner .sj_container .sj_bgi ul li p:hover img {
  transform: scale(1.0125);
  transition: transform .3s;
}

.sj_main .sj_subBanner .sj_container .sj_bgi ul li p img {
  display: block;
  width: 100%;
  transition: transform .3s;
}

.sj_main .sj_subBanner .sj_container .sj_bgi ul li span {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #2656f6;
  display: block;
  margin: 15px 0 8px 0;
  letter-spacing: 1px;
  
}

.sj_main .sj_subBanner .sj_container .sj_bgi ul li h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  word-break: keep-all;
  
}

.sj_main .sj_information .sj_secHdr h3 {
  font-family: 'Manrope', sans-serif;
  letter-spacing: -1px;
  font-weight: 800;
  color: #333;
  
}



.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem {
  background-color: #111;
  border: none;
  border-radius: 10px;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem h5 {
  color: #fff;
  
}

.sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns button {
  width: 60px;
  height: 60px;
  background-color: #fff;
  outline: 1px solid #e7e7e7;
  
}

.sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns button i {
  font-size: 2rem;
  
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem:hover {
  background-color: #fff;
  border: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem:hover .plus {
  width: 60px;
  height: 60px;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem:hover h5 {
  color: #333;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem p {
  color: rgba(255, 255, 255, .4);
  
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem:hover p {
  color: #333;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem .plus {
  background-color: #2656f6;
  overflow: hidden;
}

.sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem .plus i {
  color: #fff;
  
}

/* 240111 sj_goTop display:none */
.sj_footer .sj_container .sj_goTop {
  display: none;
  width: 70px;
  height: 70px;
  background-color: #fff;
  top: -80%;
  
}

.sj_footer .sj_container .sj_goTop .sj_goTopBtn i {
  font-size: 2.5rem;
  color: #333;
  
}

.sj_footer {
  background-color: #f7f8f9;
  border-top: 1px solid #dfdfdf;
  /* width: 95%; */
}

.sj_footer .sj_container .sj_ftrLeft h6 {
  font-size: 0.9375rem;
  color: #777;
  
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav {
  justify-content: end;
  
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList {
  font-size: 1rem;
  font-weight: 500;
  
}

/*.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList:last-child{font-family: 'Manrope', sans-serif;}*/
.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li h5 {
  font-size: 16px;
  line-height: 1.5;
  
}

.sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li h5 span {
  letter-spacing: 1px;
  font-family: 'Manrope', sans-serif;
  
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList .sj_familyList {
  border-radius: 10px;
  
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList .sj_familyList li {
  color: #e7e7e7;
  opacity: 1;
  
}

.sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList .sj_familyList li:hover {
  color: #fff;
  text-decoration: underline;
}


@media screen and (max-width:768px) {
  .sj_bannerItem 
	  {background: url(/theme/jj_theme/img/index/mnBanner/mnBanner01_m.jpg) no-repeat center / cover;}
  .sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav {
    justify-content: center;
  }

  .sj_footer .sj_container .sj_ftrRight nav .sj_ftrNav .sj_ftrNavList {
    margin: 0 10px;
  }
}



.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container {
  justify-content: center;
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerText {
  text-align: center;
}

.sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerSubText {
  text-align: center;
}


/*---2022.11.11 - new css---*/
/*---2022.11.11 - new css---*/
/*---2022.11.11 - new css---*/

/*---header---*/
#k_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 11;
}

#k_header::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 0;
  height: 1px;
  background: #eee;
  
}

.k_hd_con {
  width: 95%;
  max-width: 1760px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}


.k_hd_rgt {
  float: right;
  display: flex;
  height: 100%;
  
}

.k_hd_rgt ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 20px;
  height: 100%;
}

.k_hd_rgt ul li {
  color: #fff;
  
}

.k_hd_rgt ul li a {
  display: block;
  width: 100%;
  line-height: 100px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  
}

.k_hd_rgt ul li a:hover {
  color: #fff;
  text-decoration: underline;
}
.k_hd_rgt ul li a:active{
color: #fff;
}
#k_hd_btn {
  width: 25px;
  height: 100%;
  position: relative;
  cursor: pointer;
  z-index: 13;
  
}

#k_hd_btn span {
  position: absolute;
  top: 49px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FFF;
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
}

#k_hd_btn span:nth-child(1) {
  transform: translateY(-7px);
}

#k_hd_btn span:nth-child(2) {
  transform: translateY(7px);
}

#k_hd_btn:hover span:nth-child(1) {
  transform: translateY(-9px) rotate(-3deg);
}

#k_hd_btn:hover span:nth-child(2) {
  transform: translateY(9px) rotate(3deg);
}

/* 메뉴 열린 상태 */
#k_hd_btn.active span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

#k_hd_btn.active span:nth-child(2) {
  transform: translateY(0) rotate(-45deg);
}

#k_hd_btn.active:hover span:nth-child(1) {
  transform: translateY(0) rotate(45deg) scale(1.1);
}

#k_hd_btn.active:hover span:nth-child(2) {
  transform: translateY(0) rotate(-45deg) scale(1.1);
}

.k_hd_gnb {
  z-index: 2;
  
}

.k_hd_gnb>ul {
  display: flex;
  
}

.k_hd_gnb>ul>li {
  position: relative;
  
}

.k_hd_gnb>ul>li>a {
  display: block;
  width: 100%;
  font-size: 19px;
  padding: 0 16px;
  font-weight: 600;
  color: #fff;
  transition: color .2s ease;
  line-height: 1.3;
}
.sj_navList .sj_nl05 ._en > a{
white-space: normal;
}
.k_hd_gnb>ul>li>a>i {
  width: 100%;
  position: relative;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.k_hd_gnb>ul>li>a>i::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
  width: 0;
  height: 2px;
  background: #2656f6;
  transition: width .3s ease;
}

.k_hd_gnb>ul>li>ol {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 20px 0;
  display: none;
  
}

.k_hd_gnb>ul>li>ol>li>a {
  display: block;
  width: 100%;
  padding: 10px 0;
  padding-left: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  transition: padding-left .25s ease;
  line-height: 1.5;
  letter-spacing: -0.8px;
}

#gnb_bg {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 280px;
  background: #fff;
  z-index: 1;
  display: none;
  border-bottom: 1px solid #ddd;
  
}

/*on*/

#k_header.on #k_hd_btn span {
  background: #111;
  
}

#k_header.on #k_hd_btn.active span {
  background: #111;
  
}

#k_header.on .k_hd_gnb>ul>li>a {
  color: #111;
  
}

#k_header.on .k_hd_rgt ul li a {
  color: #555;
  
}

#k_header.on .k_hd_rgt ul li a:hover {
  color: #111;
}

#k_header.menu_open::after {
  width: 100%;
  
}

/*hover*/
#k_header .k_hd_gnb>ul>li:hover>a {
  color: #2656f6;
  
}

#k_header .k_hd_gnb>ul>li:hover>a>i::after {
  right: auto;
  left: 0;
  width: 100%;
  
}

.k_hd_gnb>ul>li>ol>li>a:hover {
  text-decoration: underline;
  
}

/*모바일 반응형형*/
.mo_login {
  display: none;
  
}

.sj_slideNav .sj_navSub {
  margin-top: 12px;
  display: none;
  
}

#k_header .sj_slideNav .sj_navSub li a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 1.25rem;
  padding: 10px 0;
  font-weight: 600;
  transition: color .2s ease;
}


#k_header .sj_slideNav .sj_navList.menu_on>a {
  color: #FFF;
  
}

@media screen and (min-width:1920px) {
  .k_hd_gnb>ul>li>a {
    display: block;
    width: 100%;
    font-size: 20px;
    padding: 0 16px;
    font-weight: 600;

  }
}

@media (max-width: 1480px) {


  .k_hd_gnb>ul>li>a {
    font-size: 0.925rem;
  }

  .k_hd_gnb>ul>li>ol>li>a {
    font-size: 0.875rem;
  }
}

@media (max-width: 1280px) {

  .k_hd_gnb {
    display: none;
  }

  .mo_login {
    display: flex;
    margin-left: 50px;
    margin-top: 50px;
  }

  .mo_login li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #FFF;
    font-size: 13px;
    padding-right: 20px;
    font-weight: 500;
    text-decoration: underline;
  }

  .sj_header .sj_slideMenu .sj_slideNav {
    left: 40px;
    width: calc(100% - 80px);
    transform: translateY(-75%) translateX(0);
  }

  .sj_header .sj_slideMenu .sj_slideNav .sj_navList {
    font-size: 1.8rem;
  }

  .sj_header .sj_slideMenu .sj_logoBox {
    top: 50%;
    left: 40px;
    bottom: 0;
    transform: translateY(50%) translateX(0);
  }

  .sj_header .sj_slideMenu .sj_slideCloseBtn {
    right: 40px;
  }
}

@media (max-width: 768px) {

  #k_header {
    height: 70px;
  }

  #k_header .k_logo {
    width: 120px;
    /* height: 30px; */
    /* margin-top: 20px; */
  }

  #k_header .k_logo a {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
  }

  #k_hd_btn span {
    top: 34px;
  }

  .sj_header .sj_slideMenu .sj_slideCloseBtn {
    top: 2.5%;
    right: 2.5%;
    width: 32px;
    height: 32px;
  }


  .sj_header .sj_slideMenu .sj_slideNav .sj_navList {
    font-size: 1rem;
  }
  .sj_header .sj_slideMenu .sj_slideNav {
    left: 30px;
    width: calc(100% - 60px);
    
    
    
  .sj_header .sj_slideMenu .sj_slideNav {
    left: 50px;
    width: calc(100% - 100px);
    top: 12%;
    transform: translateY(0);
  };
  }

  #k_header .sj_slideNav .sj_navSub li a {
    font-size: 1.1rem;
    padding: 8px 0;
  }

  .sj_header .sj_slideMenu .sj_logoBox {
    left: 30px;
    bottom: 40px;
  }

  .sj_header .sj_slideMenu .sj_logoBox .sj_logo {
    width: 150px;
    height: 32px;
  }

  .sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList {
    font-size: 0.875rem;
  }
.sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList :nth-child(1){
	display: flex;

}
  .sj_footer .sj_container .sj_ftrRight .sj_ftrInfo li h5 {
    font-size: 14px;
	line-height: 2;
  }

  .k_logo.on .logo-default {
    display: block;
    height: 30px;
  }

}

/*---visual---*/

@media (max-width: 1480px) {

  .sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerText {
    font-size: 3rem;
  }

  .sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerSubText {
    font-size: 1.1rem;
  }

  .sj_section01_content {
    background-position: 50% 50%;
  }

  .sj_section03_right {
    background-position: 50% 50%;
  }
}

/*---section 01 ---*/
.sj_main .sj_portfolio .sj_secHdr h6 {
  color: #444;
  
}

/*---팝업창, 모달창 관련 스타일일---*/
.add_pop_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  z-index: 9999;
  display: none;
}

.add_pop_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 94%;
  max-width: 800px;
  height: 600px;
  border-radius: 15px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(.9);
  transition: transform .3s ease;
}

.add_pop_wrap.active .add_pop_inner {
  transform: translate(-50%, -50%) scale(1);
}

.add_pop_tit {
  background: #2656f6;
  color: #FFF;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
}

.add_pop_tit h4 {
  font-size: 1.125rem;
  
}

.add_pop_close {
  width: 20px;
  height: 60px;
  position: relative;
  
}

.add_pop_close span {
  position: absolute;
  top: 29px;
  left: 0;
  width: 20px;
  height: 2px;
  background: #FFF;
  z-index: 1;
  transition: transform .3s ease;
}

.add_pop_close span:nth-child(1) {
  transform: rotate(45deg);
}

.add_pop_close span:nth-child(2) {
  transform: rotate(-45deg);
}

.add_pop_close:hover span {
  transform: rotate(0);
}

.add_pop_con {
  background: #FFF;
  padding: 22px 25px;
  overflow-y: scroll;
  height: calc(100% - 60px);
}

.add_pop_con h5 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
  
}

.add_pop_con p {
  font-size: 14px;
  line-height: 160%;
  margin-bottom: 25px;
  
}

@media (max-width: 768px) {

  .add_pop_con p {
    font-size: 12px;
  }
}

/*---new 서브네비게이션---*/
.n_sub_navi {
  display: flex;
  margin-top: -65px;
  position: relative;
  z-index: 10;
}

.n_sub_navi::before {
  content: "";
  position: absolute;
  top: 0;
  right: 99%;
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.n_sub_navi>div {
  width: 50%;
  position: relative;
}

.n_sub_navi>div>a {
  display: flex;
  width: 100%;
  line-height: 64px;
  padding: 0 25px;
  align-items: center;
  justify-content: center;
  font-size: 1.13rem;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  background: #f9f9f9;
}

.n_sub_navi .navi_box_01 {
 display: none;
  
}

.n_sub_navi .navi_box_03>a {
  border-bottom-color: #FFF;
  background: #fff;
  
}

.navi_box_02>ul,
.navi_box_03>ul>li>ol {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, .9);
  display: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  text-align: center;
}

/* 드롭다운 메뉴 기본 상태 */
.navi_box_02 ul,
.navi_box_03 ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, .9);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  text-align: center;
}

/* navi_box_02 드롭다운 활성화 */
.navi_box_02:has(ul[style*="display: block"]) ul {
  display: block !important;
}

/* navi_box_03 드롭다운 활성화 - 내부 ol이 display: block일 때 */
.navi_box_03:has(ol[style*="display: block"]) ul {
  display: block !important;
}

.navi_box_02>ul>li,
.navi_box_03>ul>li>ol>li {
  border-bottom: 1px solid #333;
  
}

.navi_box_02>ul>li>a,
.navi_box_03>ul>li>ol>li>a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 50px;
  color: #FFF;
  padding: 0 25px;
  font-weight: 500;
  
}

.navi_box_02>ul>li:hover,
.navi_box_03>ul>li>ol>li:hover {
  background: #252525;
}

/*1 - 2depth on*/
.navi_box_02>ul>li>ol {
  display: none;
}

.navi_box_03>ul>li>a {
  display: none;
}

/* navi_box_02 화살표 회전 - CSS만으로 해결 */
.navi_box_02:has(ul[style*="display: block"]) > a i {
  transform: rotate(180deg);
}

/* navi_box_03 화살표 회전 - 내부 ol이 display: block일 때 */
.navi_box_03:has(ol[style*="display: block"]) > a i {
  transform: rotate(180deg);
}

/* 브라우저 호환성을 위한 대체 방법 */
@supports not (selector(:has(*))) {
  .navi_box_02 > a i {
    transform: rotate(90deg);
  }
  .navi_box_03 > a i {
    transform: rotate(180deg);
  }
}

/* CSS만으로 드롭다운 구현 */
.navi_dropdown_btn {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}


/* navi_box_02 화살표 스타일 */
.navi_box_02 > a i {
  margin-left: 8px;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 6px solid currentColor !important;
  vertical-align: middle;
  font-style: normal !important;
  transition: all 0.3s ease;
}

/* navi_box_03 화살표 스타일 */
.navi_box_03 > a i {
  margin-left: 8px;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 6px solid currentColor !important;
  vertical-align: middle;
  font-style: normal !important;
  transition: all 0.3s ease;
}

/* 사이드바 하위 메뉴의 화살표 제거 */
.sj_navSubList i,
.sj_navSub i {
  display: none !important;
}



@media (max-width: 1480px) {

  .sv_txt_box {
    margin-top: 20px;
  }

  .n_sub_navi {
    margin-top: -55px;
  }

  .n_sub_navi>div>a {
    /* line-height: 55px; */
    font-size: 15px;
  }

}

@media (max-width: 768px) {

  .n_sub_navi {
    width: 100%;
    margin-top: -26px;
  }

  .n_sub_navi::before {
    display: none;
  }

  .n_sub_navi>div>a {
    padding: 0 6px;
  }


  .n_sub_navi .navi_box_01>a {
    padding: 0;
    justify-content: center;
  }



  .n_sub_navi .navi_box_02,
  .n_sub_navi .navi_box_03 {
    width: calc((100%) / 2);
  }
.n_sub_navi .navi_box_02>a, .n_sub_navi .navi_box_03>a {
    text-align: center;
	height: 48px;
	line-height: 25px;
  }

  .navi_box_02>ul>li>a,
  .navi_box_03>ul>li>ol>li>a {
    line-height: 1.5;
    padding: 10px 8px;
    letter-spacing: -0.2px;
    font-size: 14px;
  }
}





/* 반응형 미디어쿼리리 */
/* Section 02-03: Advanced TEM 섹션 */
.sj_section02_03 {
  padding: 0 0 120px 0;
}

.sj_section02_03_content {
  display: flex;
  gap: 40px;
  min-height: 480px;
  border-radius: 16px;
}


.sj_section02_left {
  flex: 1;
  padding: 50px 40px;
  color: #fff;
  position: relative;
  border-radius: 16px;
  background: url("/theme/jj_theme/img/index/advanced_tem_full.png")no-repeat 50% 50% / cover;
  transition: all 0.3s ease-out;
  transform: translateY(0) scale(1);
  height: 480px;
  display: flex;
  align-items: flex-start;
}

.sj_section02_left:hover {
  box-shadow: #00000026 0 6px 12px 6px;
  transform: translateY(-10px) scale(1.0125);
}

.sj_section02_title {
  color: #FFF;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1px;
  
}



/* 오른쪽 Advanced TEM 섹션 */
.sj_section03_right {
  flex: 1;
  padding: 50px 40px;
  color: #fff;
  position: relative;
  border-radius: 16px;
  background: url("/theme/jj_theme/img/index/spectroscopy_full.png")no-repeat 80% 30% / cover;
  transition: all 0.3s ease-out;
  transform: translateY(0) scale(1);
  height: 480px;
  display: flex;
  align-items: flex-start;
}

.sj_section03_right:hover {
  box-shadow: #00000026 0 6px 12px 6px;
  transform: translateY(-10px) scale(1.0125);
}

.sj_section03_title {
  color: #FFF;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1px;
  
}

/* 공통 키워드 섹션 */
.sj_section02_left .sj_keyword_texts,
.sj_section03_right .sj_keyword_texts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px;
  margin-top: 40px;
  max-width: 50%;
}

.sj_section02_left .sj_keyword_text,
.sj_section03_right .sj_keyword_text {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  font-family: 'Pretendard', sans-serif;
  white-space: nowrap;
  text-align: center;
  
}

/* 반응형 미디어쿼리 */
@media (max-width: 1024px) {
  .sj_section02_03 {
    padding: 0 0 60px 0;
  }

  .sj_section02_03_content {
    flex-direction: column;
    gap: 20px;
    min-height: auto;
  }

  .sj_section01_content {
    min-height: 350px;
  }

  .sj_section02_left,
  .sj_section03_right {
    padding: 40px 30px;
    min-height: 350px;
  }

  .sj_section03_right {
    background: url(/theme/jj_theme/img/index/spectroscopy_full.png) no-repeat 90% 90% / cover;
  }

  .sj_section02_title,
  .sj_section03_title {
    font-size: 32px;
  }

  .sj_section02_left .sj_keyword_texts,
  .sj_section03_right .sj_keyword_texts {
    gap: 10px;
    margin-top: 30px;
  }

  .sj_section02_left .sj_keyword_text,
  .sj_section03_right .sj_keyword_text {
    font-size: 18px;
    padding: 10px 18px;
  }
}

@media (max-width: 768px) {
  .sj_section01 {
    padding: 50px 0 25px 0;
  }

  .sj_main .sj_section01_content {
    padding: 35px 25px;
    height: 340px;
    min-height: 340px;
    background-position: 80% 50%;
    display: flex;
    align-items: flex-start;
  }

  .sj_section01_title {
    font-size: 26px;
  }

  .sj_keyword_texts {
    margin-top: 25px;
  }

  .sj_keyword_text {
    font-size: 15px;
    padding: 9px 14px;
  }

  .sj_section02_03 {
    padding: 0 0 50px 0;
  }

  .sj_section02_03_content {
    gap: 20px;
  }

  .sj_section02_left,
  .sj_section03_right {
    padding: 35px 25px;
    border-radius: 16px;
    height: 340px;
    display: flex;
    align-items: flex-start;
  }

  .sj_section02_title,
  .sj_section03_title {
    font-size: 26px;
  }

  .sj_section02_left .sj_keyword_texts,
  .sj_section03_right .sj_keyword_texts {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    margin-top: 25px;
  }

  .sj_section02_left .sj_keyword_text,
  .sj_section03_right .sj_keyword_text {
    font-size: 15px;
    padding: 9px 14px;
  }

  .sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerText {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {

  html,
  body {
    font-size: 16px;
  }

  .sj_header .sj_slideMenu .sj_slideCloseBtn {
    right: 5%;
    top: 20px;
    width: 22px;
    height: 22px;
  }


  .sj_header .sj_slideMenu .sj_slideNav {
    left: 20px;
    width: calc(100% - 40px);
  }

  .sj_header .sj_slideMenu .sj_slideNav .sj_navList:not(:first-of-type) {
    margin-top: 16px;
  }

  #k_header .sj_slideNav .sj_navSub li a {
    font-size: 0.9rem;
    padding: 6px 0;
  }

  .sj_header .sj_slideMenu .sj_logoBox {
    left: 20px;
    bottom: 17.5%;
  }

  .sj_header .sj_slideMenu .sj_logoBox .sj_logo {
    width: 120px;
    height: 26px;
  }

  .sj_header .sj_slideMenu .sj_logoBox .sj_slideInfo .sj_slideInfoList {
    font-size: 0.75rem;
    margin-top: 8px;
	line-height: 1.5;
	color: #fff;
  }

  .mo_login {
    margin-left: 20px;
    margin-top: 30px;
  }

  .mo_login li a {
    font-size: 11px;
    padding-right: 15px;
  }

  .sj_main {
    padding-bottom: 0;
  }

  .sj_main .sj_bannerView .sj_goDown {
    width: 50px;
    height: 50px;
    margin-top: -25px;
  }



  .sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerSubText {
    margin-top: 20px;
  }

  .sj_footer .sj_container .sj_goTop {
    width: 50px;
    height: 50px;
  }

  .sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns {
    text-align: center;
    margin-top: 20px;
  }

  .sj_main .sj_information .sj_infoSwipe .sj_infoSwipeBtns button {
    width: 50px;
    height: 50px;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_swipeTextView {
    width: 260px;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_portPagi {
    display: none;
  }

  .sj_main .sj_portfolio .sj_swipe .sj_portNum {
    left: 10%;
    font-size: 40px;
  }


  .sj_main .sj_portfolio .sj_swipe .sj_swipeTextView .sj_swipeTextGroup .sj_swipeTextItem {
    padding: 20px 20px;
  }

  .sj_main .sj_subBanner .sj_container .sj_bgi {
    height: 260px;
    margin-top: -80px;
  }

  .sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem h5 {
    font-size: 3.5rem;
  }

  .sj_main .sj_information .sj_infoSwipe .sj_artView .sj_artGroup .sj_infoItem p {
    font-size: 1.9rem;
  }

  .sj_sub .sj_section .sj_paragraph {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .sj_sub .sj_section .sj_paragraph br {
    display: none;
  }

  .sj_sub .sj_section .mt {
    margin-top: 20px;
  }

  .sj_sub01Company .sj_thank .sj_logo {
    margin-top: 40px;
  }

  .sj_sub01Company .sj_thank {
    padding: 40px 0 80px 0;
  }

  /* Section01 - Mobile only */
  .sj_section01 {
    padding: 40px 0 20px 0;
  }
  
  .sj_main .sj_section01_content {
    padding: 30px 22px;
    height: 260px;
    min-height: 260px;
    border-radius: 12px;
    background-position: 50% 50%;
    display: flex;
    align-items: flex-start;
  }

  .sj_main .sj_section01_content:hover {
    transform: translateY(0) scale(1);
  }

  .sj_section01_title {
    font-size: 22px;
  }

  .sj_keyword_texts {
    gap: 8px;
    margin-top: 24px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
  }

  .sj_keyword_text {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Section02-03 */
  .sj_section02_03 {
    padding: 0 0 40px 0;
  }
  
  .sj_section02_03_content {
    gap: 18px;
  }

  .sj_section02_left,
  .sj_section03_right {
    padding: 30px 22px;
    height: 260px;
    min-height: 260px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
  }

  .sj_section02_left:hover,
  .sj_section03_right:hover {
    transform: translateY(0) scale(1);
  }

  .sj_section03_right {
    background: url(/theme/jj_theme/img/index/spectroscopy_full.png) no-repeat 50% 50% / cover;
  }

  .sj_section02_title,
  .sj_section03_title {
    font-size: 22px;
  }

  .sj_section02_left .sj_keyword_texts,
  .sj_section03_right .sj_keyword_texts {
    margin-top: 24px;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
  }

  .sj_section02_left .sj_keyword_text,
  .sj_section03_right .sj_keyword_text {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Banner */
  .sj_main .sj_bannerView {
    height: 65vh;
  }

  .sj_main .sj_bannerView .sj_goDown {
    margin-top: -50px;
  }

  .sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerText {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  .sj_main .sj_bannerView .sj_bannerGroup .sj_bannerItem .sj_container .sj_texts .sj_bannerSubText {
    font-size: 16px;
    margin-top: 15px;
  }

  .sj_section01 {
    padding: 40px 0 12px 0;
  }

  .sj_main .sj_subBanner {
    padding: 80px 0 40px 0;
  }

  .sj_main .sj_subBanner .sj_container .sj_bgi ul li {
    width: 100%;
  }

  .sj_main .sj_subBanner .sj_container .sj_bgi ul li span {
    font-size: 12px;
  }

  .sj_main .sj_subBanner .sj_container .sj_bgi ul li h5 {
    font-size: 14px;
  }
  .n_sub_navi>div>a {font-size: 13px;letter-spacing: -0.5px;line-height: 25px;text-align: center;height: 40px;}
  
  /* 모바일에서 navi_box_02 화살표 스타일 */
  .navi_box_02 > a i {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 5px solid currentColor !important;
  }
  
  /* 모바일에서 navi_box_03 화살표 스타일 */
  .navi_box_03 > a i {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 5px solid currentColor !important;
  }
  
  /* 모바일에서도 사이드바 하위 메뉴 화살표 제거 */
  .sj_navSubList i,
  .sj_navSub i {
    display: none !important;
  }
  
}

.k_logo.on .logo-fixed {
  display: none;
  
}

.k_logo.on .logo-default {
  display: inline;
  
}

.sj_header.on .k_logo.on .logo-default {
  display: none;
  height: 30px;
  
}

.sj_header.on .k_logo.on .logo-fixed {
  display: inline;
  
}

.sj_header.on .k_hd_rgt ul li {
  color: #333;
  
}

.se2_inputarea {resize:none;}
#_en {flex:1;}

/* 언어 전환 버튼 스타일 */
.right_gnb ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 20px;
  height: 100%;
}

.right_gnb ul li {
  color: #fff;
}

.right_gnb ul li a {
  display: block;
  width: 100%;
  line-height: 100px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  transition: color 0.3s ease;
}

.right_gnb ul li a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 언어 버튼 기본 스타일 */
.k_hd_rgt .right_gnb ul li a {
  color: rgba(255, 255, 255, .5) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* 기본 페이지에서 KOR 활성화 (기본값) */
.k_hd_rgt .right_gnb ul li a[href="/"] {
  color: #fff !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: #fff !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* 영문 페이지에서만 ENG 활성화 */
html[lang="en"] .k_hd_rgt .right_gnb ul li a[href="/"] {
  color: rgba(255, 255, 255, .5) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html[lang="en"] .k_hd_rgt .right_gnb ul li a[href="/index_en.php"] {
  color: #fff !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: #fff !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* 스크롤 후에도 활성화된 버튼은 밑줄 유지 */
#k_header.on .k_hd_rgt .right_gnb ul li a {
  color: #999 !important;
}

/* 스크롤 후 기본 페이지에서 KOR 활성화 */
#k_header.on .k_hd_rgt .right_gnb ul li a[href="/"] {
  color: #111 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: #111 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* 스크롤 후 영문 페이지에서 ENG 활성화 */
html[lang="en"] #k_header.on .k_hd_rgt .right_gnb ul li a[href="/"] {
  color: #999 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

html[lang="en"] #k_header.on .k_hd_rgt .right_gnb ul li a[href="/index_en.php"] {
  color: #111 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: #111 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}