@charset "utf-8";

/*-------------------------------------------------
Author : WEB,Seo
Create date : 2025. 01. 17
Last update : 
-------------------------------------------------*/

/* ========== import ========== */
@import url('/resources/css/assets/fonts.css');
@import url('/resources/css/assets/mixin.css');

/* ========== default setting ========== */
html {
  font: 300 15px/1.2 'Paperlogy', sans-serif;
}

body {
  font-family: 'Paperlogy', sans-serif;
  /* letter-spacing: -0.02em; */
  letter-spacing: -0.2px;
  word-break: keep-all;
  overflow-y: scroll;
  overflow-x: clip;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-thumb {
    width: 10px;
    background: rgba(0, 0, 0, 0.3); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

br.none {
  display: none;
}

/* ========== //default setting ========== */


/* ========== main ========== */
.main {
  overflow: hidden;
  padding-top: 5em;
}
.visual {
  width: 100%;
  padding-top: 7.3334em;
  padding-bottom: 18.66em;
}

.visual .step_1 {
  justify-content: space-between;
  padding-bottom: 4em;
}

.main .step_1 .txt {
  padding-bottom: 15px;
  font-size: 2.33em;
  font-weight: 600;
}

.main .step_1 .title {
  position: relative;
  z-index:3;
  font-weight: 600;
  font-size: 3.33em;
  background: linear-gradient(0deg,rgba(243, 236, 227, 1) 40%, rgba(255, 255, 255, 1) 40%);
}



.main .step_1 .item-wrap {
  gap: 2.666em;
  padding-top: 2.666em
}


.main .step_1 .item-wrap .btn {
  font-size: 1.1334em;
  align-items: center;
  gap: 15px;
  font-weight: 400;
}

.main .step_1 .item-wrap .item .img-wrap{
  position: relative;
  z-index: 99;
  width: 2.352em;
  
}

.main .step_1 .item-wrap .item img{
  position: relative;
  z-index: 1;
}

.main .step_1 .item-wrap .item .img-wrap::after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-10%, -40%);
  border-radius: 9999px;
  width: 2.33em;
  height: 2.33em;
  background-color: #F3ECE3;
}

.main .step_1 .line_wrap {
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transform: translateY(-3.6em);
}

.main .step_1 .customer_txt {
  writing-mode: vertical-rl;
  color: #999999;
  font-weight: 600;
  transform: rotate(180deg);
}

.main .step_1  .line {
  display: inline-block;
  width: 1px;
  height: 6.3334em;
  background: #999;
}

.main .step_2 .img-wrap {
  width: 50%;
  height: 64.6667em;
}

.main .step_2 .img-wrap .img {
  height: 100%;
  object-fit: cover;
}

.main .step_2 .txt-wrap {
  align-items: center;
  justify-content: center;
  gap: 0.666em;
  width: 50%;
  height: 64.6667em;
  background: #E5D3BF url("/resources/images/visual.png")no-repeat center;
  background-size: cover;
}

.main .step_2 .txt-wrap .eng {
  font-size: 4.6667em;
  font-weight: 700;
}

.main .step_2 .txt-wrap .ko {
  font-size: 3.3334em;
  font-weight: 300;
}


.main .step_3 {
  background: #2D2F44 url("/resources/images/visual_bg2.svg")no-repeat center top;
}

.main .step_3 .item-wrap {
  gap: 4.66em;
  justify-content: space-between;
  padding-bottom: 3.3334em;
  transform: translateY(6.66em);
}



.main .step_3 .item {
  width: calc((100% - 4.666em )/2);
  height: 23.3334em;
  background-color: #fff;
}

.main .step_3 .item .btn {
  height: calc(100% - 2.3em);
  padding-top: 2.3em;
  gap: 5.6667em;
}

.main .step_3 .item .txt-wrap {
  height: 100%;
  justify-content: space-between;
}

.main .step_3 .item .txt {
  margin-left: 2em;
  gap: 1em;
}

.main .step_3 .item .txt .title {
  width: 7em;
  height: 2.33em;
  background-color: #BAB5B2;
  color: #fff;
  border-radius: 19px;
  font-weight: 400;
}

.main .step_3 .item .txt .desc {
  font-size: 1.6em;
  font-weight: 500;
}


.main .step_3 .go {
  width: 13.3em;
  height: 6.33em;
  padding-left: 2.6667em;
  background-color: #BAB5B2;
  align-items: center;
  gap: 1em;
  border-radius: 0 29px 0 0;
  transition: gap 0.3s;
}


.main .step_3 .item:hover .go {
  gap: 1.5em;
  transition: gap 0.3s;
}


.main .step_3 .go_txt {
  font-size: 1.33em;
  font-weight: 500;
}

.main .step_3 .img-wrap {
  overflow: hidden;
  width: 31.6em;
  height: 100%;
}
.main .step_3 .img-wrap .img {
  height: 100%;
  object-fit: cover;
  border-radius: 21px 0 0 0;
}

.main .step_3 .item:hover .img {
  width: 110%;
  height: 110%;
}

/* ========== 협력사 ========== */
.main .step2 {
  border-bottom: 1px solid #EAEAEA;
  margin-bottom: 10em;
}
.main .step2 .title {
  position: relative;
  text-align: center;
}

.main .step2 .title::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 1px;
  left: calc(100% + 10em);
  top: 50%;
  transform: translate(-50%);
  background-color: #EAEAEA;
}

.main .step2 .title::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 1px;
  right: 10em;
  top: 50%;
  transform: translate(-50%);
  background-color: #EAEAEA;
}

.main .step2 .img-wraps {
  padding-bottom: 5em;
}

.main .step2 .img-wraps .img-wrap {
    width: 50%;
  }


/* ========== //협력사 ========== */

/* ========== 제품소개 ========== */


.main .step3 {
  background-color: #F8F9FB;
}

.main .step3 .inner-wrap {
  padding: 10em 0;
}

.main .step3 .item-wrap {
  gap: 2.66em;
  width: 100%;
}

.main .step3 .title .br {
  display: none;
}

.main .step3 .item {
  width: calc((100% - (2.66em * 4 ))/ 5);
  height: 23.33em;
  background-color: #fff;
  /* border: 1px solid #CFCFCF; */
}

.main .step3 .item .btn {
  height: 100%;
  justify-content: space-between;
}

.main .step3 .item .txt-wrap {
  gap: 2em;
  padding: 3.3334em  2.6667em 0 2.6667em;
}

.main .step3 .item .title {
  font-size: 1.466em;
  font-weight: 600;
}

.main .step3 .item .desc {
  font-size: 1.06em;
  font-weight: 500;
}

.main .step3 .icon-wrap {
  width: 2.8667em;
  margin: 0 2.6667em 2.3334em auto;
}



.main .step3 .item:hover {
  color: #fff;
  border-radius: 0 0 0 100px;
  transition: all 0.3s;
}

.main .step3 .item_1:hover {
  background: url("/resources/images/main_product_01.jpg")no-repeat center;
  background-size: cover;
}

.main .step3 .item_2:hover {
  background: url("/resources/images/main_product_02.jpg")no-repeat center;
  background-size: cover;
}
.main .step3 .item_3:hover {
  background: url("/resources/images/main_product_03.jpg")no-repeat center;
  background-size: cover;
}
.main .step3 .item_4:hover {
  background: url("/resources/images/main_product_04.jpg")no-repeat center;
  background-size: cover;
}
.main .step3 .item_5:hover {
  background: url("/resources/images/main_product_05.jpg")no-repeat center;
  background-size: cover;
}


.main .step3 .item:hover a {
  opacity: 1;
}

.main .step3 .item:hover .icon-wrap .plus{
  filter: brightness(10);
}

/* ========== //제품소개 ========== */


/* ========== 소개 ========== */
.main .step4 {
  gap: 6.66em;
  align-items: center;
  padding: 10em 0;
}

.main .step4 .item {
  width: calc((100% - 6.66em) / 2);
}

.main .step4 .img-wrap {
  height: 38em;
}

.main .step4 .item img {
  height: 100%;
  object-fit: cover;
}

.main .step4 .inner-wrap {
  padding-left: 1.2em;
  gap: 0.3334em;
}

.main .step4 .desc {
  color: #E5D3BF;
  font-weight: 700;
  font-size: 1.2em;
}

.main .step4 .txt-wrap {
  gap: 1.210em;
  padding-bottom: 2.66em;
}

.main .step4 .txt_1 {
  font-size: 1.2666em;
  font-weight: 500;
  width: fit-content;
  background: linear-gradient(0deg,rgba(243, 236, 227, 1) 40%, rgba(255, 255, 255, 1) 40%);
}

.main .step4 .txt {
  font-size: 1.1334em;
  line-height: 1.6;
  font-weight: 400;
}

.main .step4 .go {
  width: 13.57em;
  height: 3.571em;
  background-color: #2D2F44;
  color: #fff;
  gap: 1em;
  font-size: 0.933em;
  border-radius: 5px;
  font-weight: 400;
}

.main .step4 .go .icon-wrap {
  filter: brightness(10);
}
/* ========== //소개 ========== */

/* ========== 사업소개 ========== */

.main .step5 {
  background: linear-gradient(0deg,rgba(45, 47, 68, 1) 50%, rgba(255, 255, 255, 1) 50%);
  padding-bottom: 10em;
}

.main .step5 .item-wrap {
  gap: 2.6em;
}

.main .step5 .item {
  position: relative;
  width: calc((100% - (2.6em * 3)) / 4);
  height: 21.3em;
}

.main .step5 .item .btn {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.main .step5 .item .txt-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10.3em;
  height: 4em;
  background-color: #fff;
  gap: 0.6em;
  font-weight: 500;
  border-radius: 29px 0 0 0 ;
}
.main .step5 .item .icon {
  width: 1.3em;
}

.main .step5 .item_1 {
  background: url("/resources/images/main_item01.jpg")no-repeat center;
  background-size: cover;
}
.main .step5 .item_2 {
  background: url("/resources/images/main_item02.jpg")no-repeat center;
  background-size: cover;
}
.main .step5 .item_3 {
  background: url("/resources/images/main_item03.jpg")no-repeat center;
  background-size: cover;
}
.main .step5 .item_4 {
  background: url("/resources/images/main_item04.jpg")no-repeat center;
  background-size: cover;
}

/* ========== //사업소개 ========== */
/* ========== 자료 ========== */
.main .step6 {
  background-color: #2D2F44;
  color: #fff
}

.main .step6 .step_wrap {
  gap: 2.6em;
  padding-bottom: 10em;
}

.main .step6 .inner-wrap {
  width: calc((100% - 2.6em) / 2 );

}

.main .step6 .txt-wrap {
  padding-bottom: 1.42em;
}

.main .step6 .title {
  font-size: 2.3em;
  font-weight: 500;
}
.main .step6 .view-all {
  font-weight: 300;
}

.main .step6 .list + .list {
  border-top: 1px solid #fff;
}

.main .step6 .list:nth-last-child(1) {
  border-bottom: 1px solid #fff;
}

.main .step6  .item {
  padding: 2em 0;
  font-weight: 600;
}

/* ========== //자료 ========== */
/* ========== //main ========== */


/* ========== 회사소개 ==========  */
.company .sub-header {
  gap: 2.6667em;
  padding-bottom: 3.3334em;
}

.company .sub-header .title {
  font-size: 2.3334em;
  font-weight: 500;
}

.company .sub-header .txt-wrap {
  position: relative;
}

.company .sub-header .txt-wrap::after {
  content: '';
  display: inline-block;
  position: absolute;
  left: -1.3334em;
  top:50%;
  transform: translateY(-50%);
  width: 1px;
  height: 100%;
  background-color: #CCC; 
}

.company .sub-header .txt-wrap .desc-title {
  font-size: 1.1334em;
  color: #0063F2;
  font-weight: 800;
}
.company .sub-header .txt-wrap .desc {
  color: #686868;
  font-size: 1.06em;
  font-weight: 500;
}


/* ========== 인사말 ==========  */
.company .step1 .inner-wrap .img-wrap img{
  border-radius: 20px;
}
.company .step1 .inner-wrap {
  position: relative;
  margin-bottom: 28.3334em;
}

.company .step1 .inner-wrap .txt-wrap {
  position: absolute;
  transform: translate(10em , -10em);
  width: 100%;
  border-radius: 2em;
  padding: 6.66em;
  gap: 4.66em;
  background-color: #fff;
}

.company .step1 .inner-wrap .txt-wrap .title {
  font-size: 2em;
  font-weight: 500;
}

.company .step1 .inner-wrap .txt-wrap .title .blue {
  color: #0063F2;
  font-weight: 600;
}


.company .step1 .inner-wrap .txt-wrap .desc  {
  font-size: 1.2em;
  line-height: 1.6;
  font-weight: 400;
}


/* ========== //인사말 ==========  */

/* ========== 경영철학 ==========  */
.company .step2 {
  padding: 10em 0;
  background-color: #F8F9FB;
}
.company .step2 .item-wrap {
  gap: 3.3334em;
}

.company .step2 .item-wrap .item {
  position: relative;
  width: calc((100% - (3.3334em * 2)  ) / 3);
  height: 36.66em;
  border-radius: 0.667em;
  color: #fff;
}

.company .step2 .item-wrap .item1 {
  background: url("/resources/images/company_item01.jpg")no-repeat center;
  background-size: cover;
}

.company .step2 .item-wrap .item2 {
  background: url("/resources/images/company_item02.jpg")no-repeat center;
  background-size: cover;
}

.company .step2 .item-wrap .item3 {
  background: url("/resources/images/company_item03.jpg")no-repeat center;
  background-size: cover;
}


.company .step2 .item-wrap .icon_wrap {
  position: absolute;
  left: 3.667em;
  bottom: 3.667em;
}

.company .step2 .item-wrap .icon_wrap .img-wrap {
  width: 4em;
  margin-bottom: 2em;
}

.company .step2 .item-wrap .icon_wrap .title {
  font-size: 1.334em;
  padding-bottom: 1em;
}

/* ========== //경영철학 ==========  */

/* ========== 연혁 ==========  */
.company .step3 {
  overflow: hidden;
  padding: 10em 0;
}

.company .step3 .item-wrap::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 20px;
  left: -3em;
  transform: translateX(-50%);
  width: 2px;
  height: 99%;
  background-color: #000;
}

.company .step3 .item-wrap {
  position: relative;
  left: 4em;
}

.company .step3 .item-wrap::after {
  content: '';
  display: inline-block;
  position: absolute;
  left: -3em;
  transform: translateX(-50%);
  width: 0.6667em;
  height: 0.6667em;
  border-radius: 9999px;
  background-color: #000;
}


.company .step3 .title::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: -2em;
  transform: translateY(50%);
  width: 0.6667em;
  height: 0.6667em;
  background-color: #F3ECE3;
  border: 5px solid #000;
  border-radius: 9999px;

}

.company .step3 .item {
  gap: 3.6667em;
}
.company .step3 .item + .item {
  padding-top: 3em;
}

.company .step3 .item .title {
  position: relative;
  font-size: 2em;
  font-weight: 700;
}



.company .step3 .item .history_wrap {
  width: calc(100% - 3.6667em - 2em);
}
.company .step3 .item .desc {
  gap: 0.666em;
  width: calc(100% - 3.6667em - 2em);
}

.company .step3 .item .history_wrap .desc {
  width: 100%;
}

.company .step3 .item .history_wrap .desc + .desc {
  padding-top: 2em; 
}

.company .step3 .item .month {
  font-weight: 700;
  font-size: 1.4667em;
}

.company .step3 .item .day {
  display: inline-flex;
  align-items: center;
  padding: 0.7223em 1.1112em ;
  width: 100%;
  background-color: #F8F8F8;
  font-size: 1.2em;
  line-height: 1.3;
  font-weight: 400;
}

/* ========== //연혁 ==========  */

/* ========== 오시는길 ==========  */
.company .step4 {
  background-color: #2D2F44;
  color: #fff;
  padding: 10em 0;
}
.company .step4 .sub-header .txt-wrap .desc-title {
  color: #E5D3BF;
}
.company .step4 .sub-header .txt-wrap .desc {
  color: #fff;
}

.company .step4 .inner-wrap {
  gap: 5.6667em;
  align-items: center;
}

.company .step4 .step_1 {
  width: 48em;
  height: 35em;
}

.company .step4 .step_2 {
  width: calc(100% - 5.6667em - 48em);
  height: 35em;
  padding-right: 9em;
}

.company .step4 .map-wrap .iframe {
  width: 100%;
  height: 100%;
}

.company .step4 .item-wrap {
  height: calc(100% - 6em);
  flex-wrap: wrap;
  gap: 1em;
}

.company .step4 .item-wrap  .item {
  width: calc((100% - (1em)) / 2 );
  height: calc((100% - (1em)) / 2);
  border-radius: 1em;
}

.company .step4 .item-wrap  .item_txt {
  border: 1px solid #C9C9C9;
  height: 100%;
  padding-left: 2.6667em;
}


.company .step4 .item-wrap  .item .title {
  display: inline-flex;
  gap: 1em;
  align-items: center;
  padding: 2.3334em 0 1.6667em 0;
}

.company .step4 .item-wrap  .item .desc {
  font-size: 1.1334em;
  font-weight: 400;
  line-height: 1.5;
}

.company .step4 .item-wrap  .item .title .span{
  font-size: 1.2em;
  font-weight: 700;
}


.company .step4 .item-wrap  .item i {
  color: #E5D3BF;
  font-size: 1.7em;
}

.company .step4 .item-wrap  .desc .br {
  display: none;
}

/* ========== //오시는길 ==========  */

/* ========== //회사소개 ==========  */


/* ========== 사업분야 ==========  */

.service .step1 {
  padding-bottom: 10em;
  gap: 6em;
}

.service1 .img_innerwrap {
  width: 47.3334em;
  height: 52.3334em;
}

.service3 .img_innerwrap {
  width: 47.3334em;
  height: 72.3334em;
}

.service4 .img_innerwrap {
  width: 47.3334em;
  height: 72.3334em;
}

.service:not(.product2,.product3,.product4,.product6) .img_innerwrap {
  border: 1px solid #E5E5E5;
  border-radius: 1em;
  background-color: #fff;
}

.service .img_innerwrap .title {
  height: 3.3334em;
  border-radius: 1em 1em 0 0 ;
  background-color: #2D2F44;
  color: #fff;
  font-weight: 500;
}

.service .step1 .txt-wrap {
  display: flex;
    flex-direction: column;
    justify-content: space-between;
  width: calc(100% - 6em - 47.3334em );
}

.service .img_innerwrap .img-wrap {
  width: 36.6667em;
  height: calc(52.33em - 3.33em);
  margin: auto;
}

.service3 .img_innerwrap .img-wrap {
  height: calc(72.3334em - 3.33em);
}

.service4 .img_innerwrap .img-wrap {
  height: calc(72.3334em - 3.33em);
}

.service:not(.file,.contact) .sub-header {
  padding-top: 4.3334em;
}

.service .sub-header .img-wrap {
  width: 2em;
}

.service .sub-header .title {
  font-size: 2.3334em;
  padding-bottom: 0.2858em;
  font-weight: 500;
}
.service .sub-header .sub_title {
  color: #0063F2;
  font-size: 1.1334em;
}

.service .sub-header .sub_title {
  color: #0063F2;
  font-size: 1.1333em;
  padding-bottom: 2.0588em;
  font-weight: 800;
}

.service .sub-header .desc {
  font-size: 1.0667em;
  line-height: 1.5625;
  font-weight: 500;
}

.service .sub-header .desc + .desc {
  padding-top: 0.9375em;
}

/* // 공통사항 */

.example {
  padding: 10em 0;
  background-color: #2D2F44;
}

.example .txt_wrap {

  padding-bottom: 3.333em;
}

.example .txt_wrap .sub_title {
  color: #E5D3BF;
  font-weight: 600;
  padding-bottom: 0.6667em;
}

.example .txt_wrap .title {
  color: #fff;
  font-size: 2em;
  font-weight: 500;
}

.example .item-wrap {
  flex-wrap: wrap;
  gap: 2em;
}

.example .item-wrap .item {
  width: calc((100% - (2em * 2)) / 3);
  height: 28em;
}

.example .item-wrap .item .title-wrap .img-wrap {
  height: 23.6667em;
}

.example .item-wrap .item .title-wrap .img-wrap img {
  height: 100%;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
}

.example .item-wrap .item .icon-wrap {
  height: 1.6666em;
}

.example .item-wrap .item .title-wrap .txt {
  align-items: center;
  gap: 0.6667em;
  height: 4.3334em;
  padding: 0 1.667em;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}

.example .item-wrap .item .title-wrap .txt .title {
  font-size: 1.1334em;
  font-weight: 600;
}

/* ========== //사업분야 ==========  */


/* ========== 제품소개 ==========  */
.product .step1 {
  background: url("/resources/images/product_bg.svg") left top no-repeat;
}

.product .step1 .__base-wrap {
  gap: 6em;
}


.product .sub-header {
  text-align: center;
}
.product .sub-header  .img-wrap {
  margin: 0 auto 5px;
}

.product1 .step1 .img_innerwrap {
  width: 47.3334em;
  height: 28.6667em;
}

.product1 .step1 .img_innerwrap .img-wrap {
  width: 37.6em;
  height: calc(28.6667em - 3.33em);
}


.product .step2 {
  padding: 10em 0;
  background-color: #F8F9FB;
}

.product .step2 .step_wrap {
  align-items: center;
  gap: 2em;
}

.product .step2 .step_1 {
  width: calc(100% - 2em - 45em);
}

.product .step2 .step_2 {
  width: 45em;
}

.product .step_title {
  font-size: 2em;
  /* padding-bottom: 1.5em; */
  padding-bottom: 1.6667em;
  font-weight: 600;
}

.product .step2 .num {
  width: 2em;
  height: 2em;
  border-radius: 9999px;
  color: #fff;
  background-color: #2D2F44;
  font-weight: 600;
  font-size: 1.0667em;
}
/* 
.product .step2 .item-wrap {
  padding-right: 2em;
} */

.product .step2 .item-wrap .item {
  gap: 1.0667em;
}

.product .step2 .item-wrap .item + .item {
  padding-top: 2em;
}


.product .step2 .txt-wrap {
  width: calc(100% - 2em - 1.0667em);
}

.product .step2 .txt-wrap .txt {
  font-size: 1.2em;
  line-height: 1.5625;
  font-weight: 500;
}

.product .step2 .txt-wrap .txt_desc {
  line-height: 1.5625;
  font-weight: 500;
  color: #2D457B;
  font-size: 1.1334em;
}

.product1 .step2 .step_2 {
  justify-content: center;
  width: 45.3334em;
  height: 40.6667em;
  background-color: #fff;
  border-radius: 1em;
  margin: 0 auto;
}


.product .step3 {
  padding: 10em 0;
}

.product1 .step3 .inner-wrap {
  gap: 2.6667em;
}

.product1 .step3 .img_innerwrap {
  width: calc((100% - 2.6667em)/2);
  height: 63em;
}

.product1 .step3 .img_innerwrap .img-wrap {
  width: 37.6em;
  height: calc(63em - 3.33em)
}





.product  .step1.half .item-wrap {
  width: 47.3334em;
  height: 28.6667em;
}
.product  .step1.half .item-wrap .item {
  width: 50%;
  border: 1px solid #E5E5E5;
  border-radius: 1em;
  background-color: #fff;
}

.product  .step1.half .item-wrap .item .img-wrap {
  width: 9.3334em;
  height: calc(28.6667em - 3.33em);
}

.product  .step1.half .item-wrap .step_1 {
  background-color: #fff;
}
.product  .step1.half .item-wrap .step_2 {
  color: #fff;
  background-color: #2D2F44;
}

.product  .step1.half .item-wrap .step_2 .list_wrap {
  padding: 4.6667em 4em;
}


.product  .step1.half .item-wrap .step_2 .list_wrap .list {
  position: relative;
  display: inline-flex;
  gap: 0.6667em;
  font-weight: 500;
}

.product  .step1.half .item-wrap .step_2 .list_wrap .list .icon {
  width: 1em;
}

.product  .step1.half .item-wrap .step_2 .list_wrap .list:nth-of-type(1) {
  margin-bottom: 1em;
}

.product  .step1.half .item-wrap .step_2 .list_wrap .list + .list {
  padding: 1em 0;
  border-top: 1px dashed #F3ECE3;
  
}

.product .half_02 {
  gap: 1.3334em;
}

.product .half_02 .item {
  width: 22.6667em;
  height: 35.3334em;
  justify-content: center;
  gap: 1.3334em;
  background-color: #fff;
  border-radius: 1em;
  border: 1px solid #E5E5E5;
}

.product .half_02 .item .title {
  /* width: 18.6667em;
  height: 3.3334em; */
  text-align: center;
  font-size: 1.067em;
  font-weight: 500;
  color: #fff;
  background-color: #2D2F44;
  border-radius: 0.6667em;


  /* /폰트 크기 키우고 두께 변경/ */

  width: 16.6667em;
    height: 3.056em;
    font-size: 1.2em;
}

.product .half_02 .item .txt {
  text-align: right;
  margin: 0 0 0 auto;
  margin-right: 2em;
  font-weight: 500;
  font-size: 1.1334em;
    color: #8f8f8f;
}

.product .half_02 .item .img-wrap {
  width: 18.6667em;
  padding-bottom: 1.3334em;
  border-bottom: 1px solid #D9D9DA;
}


.product2 .step3 .item-wrap {
  gap: 2em 1.667em;
}

.product2 .step3 .item {
  width: calc((100% - (1.6667em * 3))/ 4);
  height: 38em;
  border: 1px solid #2D2F44;
  border-radius: 2em;
}

.product2 .step3 .num {
  justify-content: center;
  width: 3em;
  background-color: #2D2F44;
  color: #fff;
  font-size: 1.0667em;
  line-height: 1.6875;
  font-weight: 500;
  border-radius: 2em;
  padding-top: 1.25em;
}

.product2 .step3 .txt-wrap {
  width: calc(100% - 3em);
  text-align: center;
}

.product2 .step3 .txt-wrap .item_title {
  font-size: 1.3334em;
  font-weight: 600;
  padding-bottom: 1em;
}

.product2 .step3 .txt-wrap .item_desc {
  padding: 0 0.667em 2em 0.667em;
  line-height: 1.467;
}

.product2 .step3 .txt-wrap .img-wrap {
  padding: 0 0.6667em;
}

.product2 .quater {
  padding: 10em 0;
  background-color: #F8F9FB;
}

.quater .item-wrap {
  flex-wrap: wrap;
  gap: 1.3334em;
}

.quater .item-wrap .item {
  gap: 1em;
  width: calc((100% - (1.3334em * 1)) / 2);
}

.quater .item-wrap .item .img-wrap {
  width: 25.6667em;
  height: 19.3334em;
}

.quater .item-wrap .item .img-wrap img {
  width: inherit;
  height: 100%;
  border-radius: 1em;
  object-fit: cover;
}


.quater .item-wrap .item .txt-wrap {
  width: calc(100% - 25.6667em);
  border-radius: 1em;
  background-color: #fff;
  justify-content: center;
  padding-left: 2.3334em;
  border: 1px solid #E5E5E5;
}

.quater .item-wrap .item .txt-wrap .item_subtitle {
  width: 7.6667em;
  height: 2em;
  color: #fff;
  border-radius: 2em;
  background-color: #2D457B;
  margin-bottom: 0.6667em;
  font-weight: 400;
}

.quater .item-wrap .item .txt-wrap .item_title {
  font-size: 1.3334em;
  font-weight: 600;
  padding-bottom: 0.75em;
}

.quater .item-wrap .item .txt-wrap .item_desc {
  font-weight: 500;
  line-height: 1.6667;
  padding-right :2.3334em;
}





.product3 .step1.half .item-wrap .step_1 {
  width: 22.3334em;
}

.product3 .step1.half .item-wrap .step_2 {
  width: 29.6667em;
}

.product3 .step1.half .item-wrap .step_2 .list_wrap {
  padding: 2.6667em;
}

.product3 .step1.half .item-wrap .step_2 .list_wrap .last-list {
  align-items: flex-start;
}

.product3 .step3 .step_title {
  text-align: center;
}

.product3 .step3 .item-wrap {
  gap: 1em;
}

.product3 .step3 .item {
  width: calc((100% - (1em * 3))/ 4);
  background-color: #FAFAFA;
  border-radius: 1em;
  align-items: center;
}

.product3 .step3 .item .txt-wrap {
  padding: 2em 0;
}

.product3 .step3 .item .txt-wrap .num {
  width: 10.6667em;
  height: 3.6667em;
  color: #fff;
  border-radius: 1.8em;
  background-color: #2D2F44;
  margin: 0 auto 1.3334em;
}

.product3 .step3 .item .txt-wrap .num .item_title {
  font-size: 1.3334em;
  font-weight: 600;
}
.product3 .step3 .item .txt-wrap .item_desc {
  font-weight: 400;
  text-align: center;
  font-size: 1.0667em;
}

.product3 .step4 {
  padding: 10em 0;
  background-color: #F8F9FB;
}


.product3 .step4 .inner-wrap {
  gap: 6em;
  align-items: center;
}

.product3 .step4 .step_1 {
  width: 53.3334em;
  height: 39.3334em ;
  background-color: #fff;
}


.product3 .step4 .step_2 {
  width: calc(100% - 6em - 53.3334em);
}

.product3 .step4 .step_2 .item {
  align-items: center;
  gap: 1.0667em;
}

.product3 .step4 .step_2 .item + .item {
  padding-top: 1.3334em;
}

.product3 .step4 .step_2 .item_title {
  font-size: 2em;
  font-weight: 600;
  padding-bottom: 1.5em;
}

.product3 .step4 .step_2 .num {
  width: 2.3077em;
  height: 2.3077em;
  background-color: #2D2F44;
  border-radius: 9999px;
  color: #fff;
  font-size: 0.8667em;
  font-weight: 600;
}

.product3 .step4 .step_2 .txt {
  font-weight: 500;
  font-size: 1.2667em;
}

.product3 .step5 {
  padding: 10em 0;
}
.product3 .step5 .item-wrap {
  gap: 2em;
}

.graph .item-wrap .item .item_title {
  font-size: 1.3334em;
  font-weight: 500;
  padding-bottom: 1em;
}

.graph .table {
  text-align: center;
}

.product3 .step5 .item-wrap .item.step_1 {
  width: 28.6667em;
}


.product3 .step5 .item-wrap .item.step_2 {
  width: calc(100% - 2em - 28.6667em);
}

.graph .thead {
  background-color: #DFE6F5;
  border-top: 1px solid #000;
}
.graph .thead .th {
  font-size: 1.1334em;
  padding: 1em 0;
  text-align: center;
  font-weight: 500;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.18);;
}

.product3 .step5 .step_1 .thead .th {
  width: 50%;
}
.graph .step_1 .thead .th + .th {
  border-right: 0.5px solid rgba(0, 0, 0, 0.18);;
}

.product3 .step5 .step_1 .td {
  width: 50%;
}

.graph .td {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.18);
}

.graph .td {
  padding: 0.8em 0;
}

.graph .td .txt {
  font-weight: 500;
}

.product3 .step5 .table .it_title {
  width: 10em;
}

.graph  .table .it_title {
  background-color: #F8F9FB;
}




.product4 .step1 .item-wrap {
  gap: 1.3334em;
}
.product4  .half .item-wrap .item .img-wrap {
  width: 18em
}

.product4 .step3 .item-wrap {
  gap: 3.6667em;
}

.product4 .step3 .item {
  align-items: center;
  width: calc((100% - (3.6667em * 3))/4);
  height: 24em;
  border: 1px solid #EAEAEA;
  border-radius: 9999px;
}


.product4 .step3 .item .img-wrap {
  width: 6.6667em;
  padding-bottom: 2em;
}

.product4 .step3 .item_title {
  font-weight: 600;
  font-size: 1.3334em;
}

.product4 .step3 .item .txt-wrap::before {
  content: '';
  display: block;
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  width: 2.3334em;
  height: 1px;
  background-color: #E5E5E5;
}

.product4 .step3 .item .txt-wrap {
  position: relative;
  padding-top: 2em;
  text-align: center;
  font-weight: 400;
}


.product4 .step3 .item .item_desc {
  font-weight: 500;
  font-size: 1.0667em;
  color: #8f8f8f;
}

.product4 .step3 .item .txt-wrap .item_desc + .item_desc {
  padding-top: 0.3em;
}




.product5 .img_innerwrap  {
  width: 47.3334em;
}

.product5 .img_innerwrap .img-wrap {
  width: 28.3334em;
  height: calc(28.6667em - 3.33em);
}

.product5 .step2 .step_2 {
  justify-content: center;
  width: 45.3334em;
  height: 40.6667em;
  background-color: #fff;
  border-radius: 1em;
  margin: 0 auto;
}

.product6 .step1 .inner-wrap {
  gap: 6em;
}

.product6 .step1.half .item-wrap {
  width: 48.6667em;
  gap: 1.3334em;
}

.product6 .step1 .txt-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 6em - 48.6667em);
}

.product6 .step1.half .item-wrap .item .img-wrap {
  height: 15em;
}

.product6 .step1.half .item-wrap .item .txt_wrap {
  border-top: 1px solid #E5E5E5;
  padding: 1.6667em
}

.product6 .step1.half .item-wrap .item .txt_wrap .txt {
  font-size: 1.0667em;
  font-weight: 400;
  padding-bottom: 0.9375em;

}

.product6 .step1.half .item-wrap .item .txt_wrap .txt + .txt {
  padding-top: 0.9375em;
  border-top: 1px dotted #E5E5E5
}


.product6 .step3 .item-wrap {
  justify-content: space-between;
  align-items: center;
}


.product6 .step3 .step_1 {
  width: 50%;
  height: 28.6667em;
  border: 1px solid #E5E5E5;
  border-radius: 1em;
}

.product6 .step3  .img_innerwrap .img-wrap {
  width: 36.6667em;
  height: unset;
  margin: auto;
  padding: 4.6667em 0 2em;
}

.product6 .step3 .item .txt {
  font-weight: 500;
  font-size: 1.06667em;
  text-align: center;
  color: #686868;

}

.product6 .step3 .step_2 {
  width: calc(100% - 50% - 6em);
}




.product6 .step3 .icon {
  width: 1em;
  margin-right: 0.6667em;
  vertical-align: bottom;
}

.product6 .step3 .list {
  font-size: 1.0667em;
  font-weight: 400;
  padding: 1em 0;
  border-bottom: 1px dotted #2D457B;
}

.product6 .step3 .list .desc {
  padding-left: 0.6667em;
}



.product6 .step5  {
  padding: 3.3334em 0 ;
  gap: 3.3334em;
}

.product6 .step5 .item-wrap {
  gap: 3.3334em;
}


.product6 .step5 .title {
  background-color: #CFDCF6;
}

.product6 .step5 .title .th {
  border-bottom: unset;
}

.product6 .step5 .th + .th {
  border-left: 0.5px solid rgba(0, 0, 0, 18%);
}
.product6 .step5  .td + .td {
  border-left: 0.5px solid rgba(0, 0, 0, 18%);
}


.product7 .img_innerwrap  {
  width: 47.3334em;
}

.product7 .img_innerwrap .img-wrap {
  width: 28.3334em;
  height: calc(28.6667em - 3.33em);
}

.product7 .step2 .step_2 {
  justify-content: center;
  width: 45.3334em;
  height: 40.6667em;
  background-color: #fff;
  border-radius: 1em;
  margin: 0 auto;
}


/* ========== //제품소개 ==========  */
/* ========== 공사실적 ==========  */

.work .work_step {
  padding-bottom: 10em;
}

.work .table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.work .thead {
  border-top: 1px solid #686868;
  border-bottom: 1px solid #686868;
}


.work .thead .th {
  padding: 1em 0;
}

.work .thead .txt {
  display: inline-block;
  font-size: 1.2667em;
  font-weight: 500;
}

.work .tr .td:nth-child(1){
  text-align: left;
}

.work .tr .td + .td {
  border-left: 1px solid #E5E5E5;
}

.work .td  {
  padding: 1em 0;
}

.work .name .txt  {
  padding-left: 1.7648em;
}

.work .td .txt {
  height: 3.3334em;
  font-size: 1.1334em;
}

.work .tr:nth-child(even) {
  background-color: #F6F6F6;
}


.work .name {
  width: 46.6667em;
}

.work .period {
  width: 31.3334em;
  /* width: calc(100% - 46.6667em - 28.6667em); */
}

.work .order {
  width: 28.6667em;
  width: calc(100% - 46.6667em - 31.3334em);
}

/* ========== //공사실적 ==========  */


/* ========== 자료실 ==========  */
.sub_visual2 .tab-wrap .tab.on {
  background-color: #fff;
  color: #0063F2;
}

.file .sub_visual2 .tab-wrap .tab {
  width: calc((100% - (1em * 1)) / 2);
}

.file .sub-header {
  padding-bottom: 3.3334em;
}

.download .download_step .item-wrap {
  flex-wrap: wrap;
  gap: 2em
}

.download .download_step .item {
  width: calc((100% - (2em * 2)) / 3);
}

.download .download_step .item:hover .down_btn{
  border: 1px solid #0063F2;
}

.download .download_step {
  padding-bottom: 10em;
}

.download .down_btn {
  width: 100%;
  height: calc(6.3334em - 2px);
  padding: 0 2.3334em;
  border: 1px solid #D8D8D8;
  border-radius: 0.6667em;
}

.download .download_step .item .img-wrap {
  width: 1.6667em;
  padding-right: 0.6667em;
}

.download .download_step .item .item_title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  width: calc(100% - 1.6667em);
  font-size: 1.1334em;
  font-weight: 600;
  color: #595959;
}

.download .download_step .txt-wrap {
  height: 4em;
  align-items: center;
}

.download .download_step .item .down_icon {
  width: 1.6667em;
  padding-left: 1.6667em;
  border-left: 1px solid #D8D8D8;
}




.patent .patent_step {
  padding-bottom: 10em;
}


.patent .patent_step .item-wrap {
  flex-wrap: wrap;
  gap: 1.6667em;
}

.patent .patent_step .item-wrap .img-wrap {
  width: 100%;
  border: 1px solid #E5E5E5;
}

.patent .patent_step .item .img-wrap:hover::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  width: 2.6667em;
  height: 2.6667em;
  background: url('/resources/images/patenet_icon.svg');
}

.patent .patent_step .item .img-wrap:hover::after {
  content: '특허증 상세보기';
  display: inline-block;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  color: #fff;
  font-weight: 500;
  font-size: 1.06667em;
}

.patent .patent_step .item {
  position: relative;
  width: calc((100% - (1.6667em * 4))/ 5);
  gap: 1em;
}

.patent .patent_step .item .img-wrap {
  position: relative;
  cursor: pointer;
}

.patent .patent_step .item .img-wrap:hover img{
  filter: brightness(0.3);
}
.patent .item .title {
  font-weight: 500;
  font-size: 1.0667em;
}

.patent .item img {
  height: 100%;
}


.modal-wrap {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}



/* modal */
.modal-wrap {
  display: none;
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;

}

.modal-content {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 43.3334em;
  border-radius: 15px;
  box-sizing: border-box;
  overflow: hidden;
}

.modal-content header {
width: 100%;
height: 3.3334em;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #0063F2;
color: #fff;
padding: 0 2em;
box-sizing: border-box;
}



.modal-content header i {
  font-size: 2em;
  color: #fff;
}

.modal-content .close-btn {
  background-color: transparent;
}

.modal-content .scroll-wrap {
background-color: #fff;
max-height: 80vh;
padding: 2em;
overflow-y: scroll;
}

.modal-content .scroll-wrap::-webkit-scrollbar {
width: 8px;
}

.modal-content .scroll-wrap::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 10px;
background-clip: padding-box;
border: 2px solid transparent;
}
.modal-content .scroll-wrap::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
}


.modal-content .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6667em;
}

.modal-content .thum {
  display: flex;
      justify-content: center;
      align-items: center;
}




/* ========== //자료실 ==========  */
/* ========== 문의하기 ==========  */

.contact .sub-header {
  padding-bottom: 3.3334em;
  border-bottom: 1px solid #686868;
  margin-bottom: 3em;
}

.contact .contact_step {
  padding-bottom: 10em;
}


.contact .form-wrap {
  gap: 2em;
  flex-wrap: wrap;
  flex-direction: column;
  padding-bottom: 3em;
  border-bottom: 1px solid #686868;
  margin-bottom: 3em;
}

.contact .form-item {
  gap: 2em;
}

.contact .item-wrap {
  gap: 2em;
}

.contact .form-item .half {
  width: calc((100% - 2em)/ 2);
  align-items: center;

}

.contact .item-tit {
  width: 5.4783em;
  font-weight: 500;
  font-size: 1.5334em;

}

.contact .item-tit .__fc-black {
  color: #A1A1A1;
  font-size: 0.7273em;
}
.__fc-red {
  color: red;
}

.contact .item-tit .__fc-red {
  font-size: 0.7273em;
}


.contact .txt-input {
  width: calc(100% - 8.4em - 2em);
  border: 1px solid #D3D3D3;
}

.contact .textarea-input {
  width: calc(100% - 8.4em - 2em);
  height: 23.6667em;
  border: 1px solid #D3D3D3;
  padding: 1.3334em;
}

.contact .filebox {
  align-items: center;
  gap: 2em;
}

.contact .filebox .step_2 {
  width: calc(100% - 8.4em - 2em);
}


.upload_wrap {
  position: relative;
  width: 66.3334em;
}

.contact .filebox .txt-input {
  width: 100%;
}

.contact .filebox .btn_close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5em;
  height: 100%;
}

.contact .filebox .btn_close .img-wrap {
  width: 0.6667;
}


.contact .filebox .btn-wrap {
  gap: 2em;
  width: calc(100% - 2em - 66.3334em);
}

.contact .filebox .upload-button {
  width: calc((100% - 2em) / 2);
  height: 3.6667em;
  border: 1px solid #D3D3D3;
  border-radius: 2.6667em;
}

.contact .filebox .upload-button .btn_txt {
  font-weight: 500;
  font-size: 1.0667em;
  color: #707070;
  gap: 10px;
}

.contact .filebox .upload-button .btn_txt i {
  font-size: 1.4em;
}

.contact .filebox .upload-button.plus {
  background-color: #F6F7F9;
}



.contact .form_agree {
  padding-bottom: 3.3334em;
}


.contact .form_agree .agree {
  align-items: center;
  height: 5em;
  background: #F8F8F8;
}

.contact .form_agree .checkbox_all {
  padding-left: 1.6667em;
}

.contact .form_agree .checkbox {
  padding: 1.6667em;
  border-bottom: 1px solid #EAEAEA;
}

.contact .form_agree i {
  font-size: 1.68em;
}

.contact .form_agree .all_chk {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1em;
}

.contact .form_agree .all_chk .txt {
  font-weight: 500;
  font-size: 1.3334em;
}

.contact .agree_wrap .label-item {
  width: 100%;
  padding: 0 1em;
  opacity: 50%;
}

.contact .form_agree .checkbox .txt {
  font-size: 1.2em;
  font-weight: 500;
  white-space: nowrap;
}
.contact .form_agree .checkbox .txt .__fc-red {
  font-size: 0.9em;
  font-weight: 500;
}

.contact .form_agree .checkbox .form_more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.3334em;
  height: 1.6667em;
  border: 1px solid #EAEAEA;
  color: #535353;
  margin-left: 2em;
  font-size: 0.87em;
}

.contact .form_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23.6667em;
  height: 5.3334em;
  background-color: #0063F2;
  border-radius: 2.6667em;
  gap: 0.6667em;
  
  margin: 0 auto;
}

.contact .form_submit .submit {
  background-color: unset;
  color: #fff;
  font-size: 1.3334em;
  font-weight: 500;
}


/* ========== //문의하기 ==========  */


/* ========== 공사실적 ==========  */