@charset "UTF-8";
#contents .contents_head {
  border-bottom: 1px solid #ddd;
  position: relative;
  z-index: 8888;
  padding-top: 13rem;
  background: url("../images/sub/sub_title.jpg") no-repeat center center/cover;
}
#contents .contents_head .contents_title {
  width: 100%;
  max-width: 124rem;
  padding: 0 2rem;
  margin: 0 auto;
  height: 25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
#contents .contents_head .contents_title h2 {
  font-size: 4.2rem;
  font-weight: 800;
}
#contents .contents_head .contents_title span {
  opacity: 0.35;
}
#contents .contents_head .contents_location .container {
  position: relative;
  max-width: 120rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#contents .contents_head .contents_location .container .cont_nav {
  display: flex;
  align-items: center;
}
#contents .contents_head .contents_location .container .cont_nav .home a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 100%;
  border-bottom: none;
  background-color: #02419b;
}
#contents .contents_head .contents_location .container .cont_nav .home a i {
  color: #989898;
  font-size: 2rem;
}
#contents .contents_head .contents_location .container .cont_nav .home a:hover i {
  color: #3186ff;
}
#contents .contents_head .contents_location .container .cont_nav .home::before {
  content: "";
  display: block;
  width: 30vw;
  height: 5rem;
  right: 5rem;
  background-color: #0852bc;
  top: 0;
  position: absolute;
}
#contents .contents_head .contents_location .container .cont_nav > li {
  position: relative;
  height: 5rem;
}
#contents .contents_head .contents_location .container .cont_nav > li span {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-left: none;
  border-bottom: none;
  width: 27rem;
  height: 100%;
  background-color: #f8f8f8;
  padding: 0 2rem;
  font-weight: 500;
}
#contents .contents_head .contents_location .container .cont_nav > li span:hover {
  background-color: #fff;
  color: #333;
}
#contents .contents_head .contents_location .container .cont_nav > li > ul {
  display: none;
  position: absolute;
  z-index: 10;
  top: 5rem;
  left: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
  width: calc(100% + 1px);
}
#contents .contents_head .contents_location .container .cont_nav > li > ul > li {
  border-bottom: 1px solid #ddd;
}
#contents .contents_head .contents_location .container .cont_nav > li > ul > li a {
  width: 100%;
  height: 5rem;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#contents .contents_head .contents_location .container .cont_nav > li > ul > li a:hover {
  background-color: #f4f4f4;
  color: #333;
}
#contents .contents_head .contents_location .container .cont_nav > li > ul > li a:hover i {
  background-image: url("../images/common/i_angle_black.png");
}
#contents .contents_head .contents_location .container .cont_nav > li > ul > li:last-child span {
  border-bottom: none;
}
#contents .contents_head .contents_location .container .cont_nav > li:last-child span {
  background-color: #fff;
  color: #333;
}
#contents .contents_body .container {
  width: 100%;
  max-width: 124rem;
  padding: 0 2rem;
  margin: 0 auto;
  padding: 4rem 2rem 10rem 2rem;
  min-height: 600px;
}
#contents .contents_body .container .container_inner {
  max-width: 124rem;
  margin: 0 auto;
  width: 100%;
}

.page_intro .intro_visual {
  display: flex;
  align-items: center;
  padding:1rem 0 6rem 0;
  border-bottom: 1px solid #9A9A9A;
  margin-bottom: 4rem;
}
.page_intro .intro_visual > div { 
  width: 100%;
  max-width: 60rem;
  margin-right: 10rem;
}
.page_intro .intro_visual > div .logo {
  display: block;
  margin-bottom: 6rem;
  width: 43rem;
  height: 6.8rem; 
  background: url("../images/sub/sub_intro_logo.jpg") no-repeat center center/contain;
}
.page_intro .intro_visual > div > p {
  display: block;
  line-height: 1.5;
  word-break: keep-all;
  font-size: 1.8rem;
}
.page_intro .about {
  width: 100%;
}
.page_intro .about li {
  width: 100%;
  display: flex;
  align-items: center;
}
.page_intro .about li span {
  display: block;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 2rem;
}
.page_intro .about li:nth-of-type(1) { margin-bottom: 2rem;}
.page_intro .about li:nth-of-type(2) { transform: translateX(-1.5rem);}
.page_intro .about li:nth-of-type(3) { margin-bottom: 1rem; transform: translateX(-9.5rem);}
.page_intro .about li:nth-of-type(4) { transform: translateX(-18rem);}

.page_intro .about li:nth-of-type(1) span { width: 22rem; height: 22rem;}
.page_intro .about li:nth-of-type(2) span { width: 18rem; height: 18rem;}
.page_intro .about li:nth-of-type(3) span { width: 15rem; height: 15rem;}
.page_intro .about li:nth-of-type(4) span { width: 10rem; height: 10rem;}
.page_intro .about li span img {
  display: block;
  width: 100%;
}
.page_intro .about li dl {
}
.page_intro .about li dl dt {
  font-size: 2.2rem;
  font-weight: bold;
  color: #3186FF;
  margin-bottom: 1.5rem;
}
.page_intro .about li dl dd {
  font-size: 1.8rem;
}
.page_intro .about + strong {
  font-size: 3.6rem;
  font-weight: bold;
  color: #333333;
  text-align: center;
  display: block;
  margin-bottom: 3rem;
}
.page_intro .about + strong + p {
  display: block;
  width: 100%;
  line-height: 1.5;
  max-width: 95rem;
  margin: 0 auto;
  text-align: center;
  word-break: keep-all;
  font-size: 1.8rem;
}
.page_intro .history {
  display: flex;
  flex-flow: row wrap;
}
.page_intro .history li {
  width: 33%;
  border-bottom: 1px solid #ddd;
  padding: 2rem 0 3rem 0;
}
.page_intro .history li dl dt {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  display: block;
  font-weight: bold;
}
.page_intro .history li dl dd {
  padding: 0 1.5rem 0 0;
  font-size: 1.8rem;
  word-break: keep-all;
}
.page_intro .history li:first-child dl dt, .page_intro .history li:last-child dl dt {
  color: #3186FF;
}
.page_intro .award {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.page_intro .award li {
  margin-bottom: 3rem;
}
.page_intro .award li.dummy {
  width: 22rem;
  height: 32rem;
  margin-bottom: 3rem;
  opacity: 0;
}
.page_intro .award li span {
  display: block;
  overflow: hidden;
  width: 22rem;
  height: 32rem;
  border: 1px solid rgba(221, 221, 221, 0.8666666667);
  margin-bottom: 1rem;
}
.page_intro .award li span img {
  display: block;
  width: 100%;
}
.page_intro .award li small {
  font-size: 1.6rem;
  color: #656565;
  display: block;
  word-break: keep-all;
  max-width: 22rem;
}
.page_intro .partner {
  margin-bottom: 4rem;
  display: flex;
  flex-flow: row wrap;
}
.page_intro .partner li {
  margin: 0 2.5rem 2rem 0;
}
.page_intro .partner li a {
  display: block;
  width: 20.5rem;
  height: 11.8rem;
}

/*  */
.page_tech {}
.page_tech > div { margin-bottom: 5rem;}
.page_tech > div img { display: block; width: 100%; margin: 3rem 0;}
.page_tech > div ul { display: flex; height: 15rem; margin:4rem 0 3rem 0; }
.page_tech > div ul li { width: 33.333%; padding:1rem 2rem 1rem 2rem; font-size: 2rem; position: relative; display: flex; flex-flow: column; }
.page_tech > div ul li span { display: block; height: 1rem; width: 100%; margin-top:2rem; position: relative;}
.page_tech > div ul li span::before { content: ''; display: block; position: absolute; right:-2rem; width: 2.6rem; height: 3rem; background-repeat: no-repeat; background-position: center; background-size: contain; top:50%; transform: translateY(-50%);}

.page_tech > div ul li:nth-of-type(1) { border-right:1px dashed #0A9B17; color:#0A9B17;justify-content: flex-end;}
.page_tech > div ul li:nth-of-type(1) span { background-color:#0A9B17 ;}
.page_tech > div ul li:nth-of-type(1) span::before { background-image: url("../images/sub/arrw_green.png");}

.page_tech > div ul li:nth-of-type(2) { border-right:1px dashed #3186FF; color:#3186FF; justify-content: center;}
.page_tech > div ul li:nth-of-type(2) span { background-color:#3186FF ;}
.page_tech > div ul li:nth-of-type(2) span::before { background-image: url("../images/sub/arrw_blue.png"); }

.page_tech > div ul li:nth-of-type(3) { border-right:1px dashed #0852BC; color:#0852BC; justify-content: flex-start;}
.page_tech > div ul li:nth-of-type(3) span { background-color:#0852BC ;}
.page_tech > div ul li:nth-of-type(3) span::before { background-image: url("../images/sub/arrw_navy.png"); }

/*  */
.page_rnd { padding-top:2rem;}
.page_rnd .card_list { display: flex; justify-content: space-between; flex-flow: row wrap;}
.page_rnd .card_list .item  { max-width: 38rem; margin-bottom: 5rem; width: 32%;}
.page_rnd .card_list .item ul  {}
.page_rnd .card_list .item ul li { color:#656565; font-size: 1.8rem; margin-bottom: 1rem;}
.page_rnd .card_list .item ul li img { display: block; width: 100%;}
.page_rnd .card_list .item ul li:nth-of-type(1) { margin-bottom: 2rem; overflow: hidden;}
.page_rnd .card_list .item ul li:nth-of-type(2) { font-weight: bold; color:#333333;}
.page_rnd .card_list .item ul li:nth-of-type(3) { min-height: 4rem;}

.page_tester {}
.page_tester .ttr_visual { background-color: #F8F8F8; margin-bottom: 3rem;}
.page_tester .ttr_visual img {/* max-height: 40rem; */ display: block; margin:0 auto;}
.page_tester .ttr_visual + p { margin-bottom: 4rem; font-size: 1.8rem; color:#656565;}
.page_tester .ttr_thumb { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 4rem;}
.page_tester .ttr_thumb li { max-width: 38rem; width: 33%;}
.page_tester .ttr_thumb li img {  display: block; width: 100%;}
.page_tester .ttr_cont { display: flex; justify-content: space-between;}
.page_tester .ttr_cont div { width: 100%;  max-width: 55rem;}
.page_tester .ttr_cont div .table tr b { font-size: 1.8rem;}

/*  */
.contents_body hr { width: 100%; height: 1px; background: #bbb; margin: 4rem 0;}

@media (max-width: 1024px) {}

@media (max-width: 840px) {
  .page_intro .about { flex-flow: row wrap; max-width: 100%; position: relative; max-width: 55rem; margin:0 auto;}
  .page_intro .about::before { content: ''; display: block; position: absolute; left:10rem; top:0; width: 1px; height: 100%; background-color: #ddd;}
  .page_intro .about li { transform: translateX(0) !important; margin-bottom: 6rem !important;}
  .page_intro .about li:last-child { margin-bottom: 0 !important;}
  .page_intro .about li span { width: 18rem !important; height: 18rem !important; margin-right: 3.5rem;}

  .page_intro .intro_visual { flex-flow: row wrap;}
  .page_intro .intro_visual > div { width: 100%; margin-right: 0; max-width: 100%; margin-bottom: 5rem;}
  .page_intro .intro_visual > div p { text-align: center;}
  .page_intro .intro_visual > div .logo {margin:4rem auto 5rem auto; width: 32rem;}


}
@media (max-width: 768px) {

  .page_tester .ttr_cont {flex-flow: row wrap;}
  .page_tester .ttr_cont div {max-width:100%; margin-bottom: 2rem;}

  #contents .contents_head {
    padding-top: 8rem;
  }
  #contents .contents_head .contents_location {
    display: none;
  }
  .page_intro .history li {
    width: 49%;
  }
  .page_rnd .card_list .item  { max-width: 100%; width: 49%;}
}
@media (max-width: 620px) {
  .page_intro .award {
    justify-content: space-between;
    align-items: baseline;
  }
  .page_intro .award li {
    width: 49%;
    margin-right: 0;
  }
  .page_intro .award li span {
    width: 100%;
    height: 100%;
    border: none;
  }
  .page_intro .partner li {
    width: 49%;
  }
  .page_intro .partner li a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .page_intro .partner {
    justify-content: space-between;
  }
  .page_intro .partner li {
    margin-right: 0;
  }
}
@media (max-width: 550px) {
  .page_intro .award li.dummy { display: none;}
  .page_intro .logo {
    width: 32rem;
    height: 5rem;
  }
  .page_intro .history li {
    width: 100%;
  }
}
@media (max-width: 425px) {
  .page_intro .about li span { width: 12rem !important; height: 12rem !important; min-width: 12rem !important; min-height: 12rem !important; margin-right: 2rem !important;}
  .page_intro .about::before { left: 6rem;}
  .page_intro .intro_visual > div .logo { margin: 1rem auto 3rem auto; width: 28rem;}
  .page_rnd .card_list .item  { width: 100%;}

  .page_tech > div ul { flex-flow: column-reverse; height: auto;}
  .page_tech > div ul li { width: 100%; border-right: none !important;  padding:2rem 2rem 2rem 2rem; flex-flow: row-reverse; align-items: flex-start;}
  .page_tech > div ul li span { width: 1rem; height: 6rem; margin-right: 2rem; margin-top:0;}
  .page_tech > div ul li span::before { top:-2rem; left:-0.7rem; transform: rotate(-90deg);}

  .page_tech > div ul li:nth-of-type(1) { border-top: 1px dashed #0A9B17;}
  .page_tech > div ul li:nth-of-type(2) { border-top: 1px dashed #3186FF;}
  .page_tech > div ul li:nth-of-type(3) { border-top: 1px dashed #0852BC;}

  .page_tester .ttr_thumb { flex-flow: column;}
  .page_tester .ttr_thumb li { width: 100%; max-width: 100%; margin-bottom: .5rem;}
}


                        .flex_box { display: flex; flex-flow: row wrap; margin-bottom: 30px;}
                        .flex_box li { max-width: calc(16.6666% - 20px); margin-right: 20px; margin-bottom: 10px;}
                        .flex_box li:last-child { margin-right: 0;}
                        .flex_box li img { display: block; width: 100%;}
                        @media (max-width:768px) { 
                            .flex_box li { max-width: calc(25% - 15px); margin-right: 15px;}
                        }
                        @media (max-width:425px) { 
                            .flex_box li { max-width: calc(33.333% - 15px); }
                        }

/* ===== 2026-10-15 원본 오류 수정 (site-fixed 전용) ===== */
/* 하위 페이지 큰 제목이 두 줄 이상일 때 작은 글씨(SCALE-TRON)와 붙거나 겹치던 문제 */
#contents .contents_head .contents_title { height: auto; min-height: 25rem; padding-top: 3rem; padding-bottom: 3rem; }
#contents .contents_head .contents_title h2 { line-height: 1.2; word-break: keep-all; text-wrap: balance; }
#contents .contents_head .contents_title span { display: block; margin-top: 1.6rem; }
@media (max-width: 768px) {
  #contents .contents_head .contents_title { min-height: 20rem; padding-top: 2.4rem; padding-bottom: 2.4rem; }
  #contents .contents_head .contents_title h2 { font-size: 3rem; }
  #contents .contents_head .contents_title span { margin-top: 1.2rem; }
}