@charset "utf-8";


/* **************************************** *
 * SUB layout
* @description 서브단에서만 달라지는 header, footer 정의
 * **************************************** */
#container:has(.board-page) + #footer{margin-top: var(--gap)}
#header{}
#footer{margin-top: 150rem;}


#gnb .gnb-item > a{color: var(--b-01);}

@media (max-width:1200px){

}
@media all and (max-width:1023px){
 #footer{margin-top: 100rem;}
}

@media (max-width: 540px){
    #footer{margin-top: 64rem;}
}

/* **************************************** *
 * SUB common
 * **************************************** */
.sub-content{position:relative;padding-top:110rem;}
.sub-content:has(.board-page){padding-top: 120rem;}
body,h4,p{color: var(--b-01);}

@media (max-width:1200px){

}

@media all and (max-width:1023px){
    .sub-content,
	.sub-content:has(.board-page){padding-top:80rem;}
}

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

@media (max-width: 540px){
	.sub-content,
	.sub-content:has(.board-page){padding-top: 60rem;}
}

/* **************************************** *
 * SITE CUSTOM
 * **************************************** */

/* 회사소개 */
.about-wrap{justify-content: space-between;}
.about-wrap h4{color:var(--b-01)}
.about-wrap__desc{max-width: 734rem;}
.about-wrap__desc p{word-break: keep-all; color: var(--b-01);}
.about-wrap__desc p + p{margin-top: 30rem;}

.about-image--wrap{padding-top: 193rem; position: relative; overflow: hidden;}
.about-image--wrap strong{font-size: 248rem; font-weight: 700; color: rgba(51,51,51,.06); position: absolute; right: var(--wrap); top: -61rem;}
.about-image{width: 100%; height: 710rem; background: url(../img/sub/about01.jpg) no-repeat; background-size: cover; position: relative; z-index: 1;}

@media (max-width:1600px){
    .about-wrap__desc{max-width: 50%;} 
    .about-image--wrap strong{font-size: 200rem; top: -11rem;}
}

@media (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){

    .about-wrap{flex-direction: column; gap: 24rem;}
	.about-wrap__desc{max-width: 100%;}
    .about-wrap__desc p + p{margin-top: 24rem;}
    .about-image--wrap strong{font-size: 140rem; top: 23rem; right: 0;}
    .about-image--wrap{padding-top: 160rem;}
    .about-image{height: 430rem;}
}

@media (max-width: 540px){
    .about-image{height: 190rem;}
	.about-image--wrap{margin-left: 0 !important; padding-top: 75rem;}
    .about-image--wrap strong{font-size: 58rem; top: 15rem; font-weight: 800;}
}

.philosophy-page > div {position: relative;}
.philosophy-page > div > h4{position: absolute;}
.philo-grid{gap: 0;}
.philo-grid h5{color: var(--c-01); margin-bottom: 20rem;}
.philo-grid:not(:last-child) > div{height: 490rem;}
.philo-grid > div:nth-child(1){flex: 1;}
.philo-grid > div:nth-child(2){width: 891rem;}
.philo-grid img{width: 100%; height: 100%; object-fit: cover;}
.philo-grid:nth-of-type(1) .philo-grid__text{padding-left: 0;}
.philo-grid__text{flex-direction: column; display: flex; padding:47rem 42rem;  justify-content: flex-end;}

.philo-grid__text em{font-weight: 700;}
.philo-grid__sticky{padding-top: 200rem;}
.philo-grid__list{flex-direction: column; gap: 80rem; max-width: 514rem; width: 100%;}
.philo-grid__list .line{width: 100%; height: 1px; border-top: 1px solid var(--br-02);}
.philo-grid:last-child .philo-grid__image{position: sticky; top: 0;}

.philo-grid__item i{display: flex; width: 60rem; height: 60rem; border-radius: 100%; background-color: var(--b-01);  align-items: center; justify-content: center;}
.philo-grid__item em{display: block; font-weight: 700; margin-top: 36rem;}
.philo-grid__item p{margin-top: 8rem;}

@media (max-width:1800px){
   .philo-grid > div:nth-child(2){width: 50%}
}
@media (max-width:1480px){
  .philo-grid:not(:last-child) > div{height: 410rem;}
}

@media (max-width:860px){

    .philosophy-page{margin-right: var(--wrap);}
    .philosophy-page > div > h4{position: relative; margin-bottom: 32rem;}
    .philo-grid:not(.row-revers){flex-direction: column-reverse;}
    .philo-grid.row-revers{flex-direction: column;}
    .philo-grid.row-revers .philo-grid__text{padding-left: 0;}
    .philo-grid > div:nth-child(2){width: 100%;}
    .philo-grid__text{height: auto !important; padding: 27rem 0 56rem !important;}
    .philo-grid__sticky{padding-top: 52rem;}
    .philo-grid__list{max-width: 100%;}
}
@media (max-width: 540px){

    .philo-grid__text{padding: 24rem 0 44rem !important;}
    .philo-grid h5{margin-bottom: 12rem;}
    .philo-grid__list{gap: 40rem;}
    .philo-grid__item i{width: 50REM; height: 50rem;}
    .philo-grid__item em{margin-top: 22rem;}
}


 /* 연혁 */
/* .history-page{position: relative;} */
.history-line--wrap{display:block;position:absolute;/* overflow:hidden; */top:0;left: 773rem;/* width: 67rem; */height: 100%;}
.history-line{width:1rem;height:100%;background:#efefef;margin-top: 0 !important; display: block; position: absolute; left: 50%; top: 0; margin-left: -.5rem; border-radius: 7rem;}
.history-line__bar{display:block; position:absolute; top:0; left:0; z-index:999; width:100%; background:var(--c-01); border-radius: 7rem 7rem 0 0;}
.history-line__point{position: absolute; width: 9rem; left: 50%; margin-left: -4.5rem;}
.history-line__point span{ width: 9rem; height: 9rem; border-radius: 20rem; background-color: var(--c-01); position: absolute; left: 50%; margin-left: -4.5rem; bottom: 0;}
.history-line__point span::after{content: ""; width: 100%;height: 100%;position: absolute;transform: scale(1.5);background: var(--c-01);border-radius: 100%;opacity: 0.2;animation:zomm_out 2s ease 0s infinite;}

.history-item{display: flex; flex-direction: column;}
.history-item strong{font-weight:700;font-size:54rem; line-height: 1.29; display: block; color:#ADADAD; letter-spacing:-1.5rem; transition:var(--trans-01); margin-bottom: 10rem;}
.history-item.is_moved strong{color:var(--c-01);}
.history-list{display:grid; padding-left: 843rem; row-gap:100rem;}
.history-desc li em{margin-left:40rem; font-weight:700; color:var(--b-01); min-width:50rem;}
.history-desc li{display:flex; align-items:center; font-weight: 300;}
.history-desc li:not(:last-child){margin-bottom:18rem;}
.history-sect > .wrap{padding-left:140rem;}
.history-sect + .history-sect{margin-top:200rem;}
.history-img{position:absolute; right:0; border-radius:10rem;}
.history-img.img01{top:487rem;height: 421rem;}
.history-img.img02{top:1197rem;right:250rem;height: 302rem;}
.history-img.img03{bottom:0;height: 421rem;}
.history-page .wrap{padding-bottom:160rem;}


.history-image{width: 648rem;height: 100%;position: absolute;top: 0;left: 0; padding-top: 110rem;}
.history-image__view{width: 100%; height: 437rem; display: block; position: sticky;  top: 100rem; background-repeat: no-repeat; background-size: cover;} 

.his-img01{background-image:url(../img/sub/history01.jpg);}
.his-img02{background-image:url(../img/sub/history02.jpg);}
.his-img03{background-image:url(../img/sub/history03.jpg);}

@keyframes zomm_out{
    0%{transform: scale(1); opacity: 1;}
    90%, 100%{transform: scale(8); opacity: 0;}
}
      

@media (max-width:1480px){

    .history-item strong{font-size: 44rem;}
    .history-image{width: 580rem;}
    .history-image__view{height: 390rem;}
    .history-line--wrap{left: 700rem;}
    .history-list{padding-left: 750rem;}
}

@media (max-width:1200px){

    .history-image{width: 500rem;}
    .history-image__view{height: 340rem;}
    .history-line--wrap{left: 620rem;}
    .history-list{padding-left: 650rem;}
    .history-item strong{font-size: 40rem;}
    .history-list{row-gap: 70rem;}
}

@media (max-width:1023px){

    .history-image{width: 370rem;}
    .history-image__view{height: 250rem;}
    .history-line--wrap{left: 450rem;}
    .history-list{padding-left: 500rem;}
    .history-item strong{font-size: 34rem;}
    .history-desc li:not(:last-child){margin-bottom: 10rem;}
}
@media (max-width:860px){
    .history-image{width: 95%; opacity: 0.3;}
    .history-image__view{height: 400rem;}
    .history-line--wrap{left: 50rem;}
    .history-list{padding-left: 90rem; row-gap: 46rem;}
    .history-desc li{font-weight: 400;}
}

@media (max-width:540px){

    .history-line--wrap{display: none;}
    .history-list{padding-left: 0; row-gap: 40rem;}
    .history-item strong{font-size: 28rem;}
    .history-image{padding-top: 100rem;}
}

:root{
    --assure-width:412rem
}
.assure-intro{position: relative;}
.assure-intro__image{width: 100%; height: 711rem; background:  url(../img/sub/quality01.jpg) no-repeat; background-size: cover ; position: relative;}
.assure-intro__image > div{position: absolute; left: 103rem; width: 384rem; height: 100%; padding-top: 73rem; padding-bottom: 80rem;}
.assure-intro__image h3{color: var(--w); position: sticky; top: 100rem; left: 0;}
.assure-intro__image i{width: var( --assure-width); height: 178rem; position: absolute; bottom: 0; right: 0; display: block; background-color: var(--c-01);}
/* .assure-intro__image img{width: 100%; height: 100%; object-fit: cover; max-inline-size:100%; block-size: auto;} */
.assure-intro::before{content: ""; width: 100%; height: 380rem; bottom: 0; left: 0; background-color: var(--c-01); position: absolute;  }

.assurance-page h4{margin-bottom: 67rem;}
.assurance-page p + p{margin-top: 28rem;}
.assure-desc{ padding-right: 83rem;}
.assure-desc__text{background-color: var(--c-01); flex: 1; padding-top: 194rem; padding-left: var(--wrap); max-height: 661rem; padding-right: 80rem; }
.assure-desc__text *{color: var(--w);}
.assure-desc__bg{min-width: var( --assure-width); position: relative; height: 853rem; background-image: url(../img/sub/quality02.jpg); background-size: cover; background-repeat: no-repeat;}
.assure-desc__bg::before{content: ""; width: 100%; height: 100%; right: 0; top: 0; background-color: var(--c-01); position: absolute; z-index: 1; transition: var(--trans-02);}
.assure-desc__bg.is_moved::before{width: 0;}
.assure-desc__in{padding-left: 103rem; max-width: 1092rem;}
.assure-last__wrap{background-color: var(--bg-01);}

.assure-last__image{width: calc(100% - var(--assure-width)); position: relative;}
.assure-last__image img{width: 100%;}
.assure-last__image::before{content: ""; z-index: 1; position: absolute; width: 100%; height: 100%; background-color: var(--bg-01); right: 0; top: 0; transition: var(--trans-02);}
.assure-last__image.is_moved::before{width: 0;}
.assure-last__text{padding-left: 640rem; padding-top: 124rem; padding-right: 80rem;}

@media (max-width:1480px){
    .assure-desc{padding-right: var(--wrap);}
    .assure-last__text{padding-left: 30%;}
    
}
@media all and (max-width:1200px){
	:root{
        --assure-width:280rem
    }
    .assure-intro__image i{height: 148rem;}
    .assure-desc__bg{height: 790rem;}
    .assure-desc__text{padding-top: 140rem;}
    .assure-last__text,
    .assure-desc__in{padding-left: 50rem;}
    .assure-intro__image > div{left: 55rem;}
    .assure-intro::before{height: 50%;}
    
}
@media all and (max-width:1023px){
	
    .assure-intro__image{height: 500rem;}
    :root{
        --assure-width:180rem
    }
    .assure-desc{padding-right: 0;}
    .assure-desc__text{padding-top: 90rem; max-height: 580rem;}
    .assure-desc__bg{height: 670rem;}
    .assure-last__text{padding-top: 80rem;}
    
    
}
@media (max-width:860px){

    .assure-last__text, .assure-desc__in{padding-left: 0;}
    .assure-intro__image{height: 380rem; left: 44rem;}
    .assure-intro__image > div{padding-top: 34rem; padding-bottom: 50rem;}
    .assurance-page p + p{margin-top: 16rem;}
    .assurance-page h4{margin-bottom: 36rem;}
    .assure-last__text{padding-top: 50rem;}
    .assure-desc__text{max-height: 500rem;}
    .assure-desc__bg{height: 580rem;}
}
@media (max-width: 540px){

    :root{
        --assure-width:0
    }
    .assure-intro__image{height: 230rem; left: 0;}
    .assure-desc__text{padding-top: 40rem; max-height: max-content; padding-right: 20rem; padding-bottom: 54rem;}
    .assure-desc__bg{display: none;}
    .assure-last{margin-top: 34rem;}
    .assure-last__text{padding-right: 22rem; padding-top: 34rem;}
    .assure-intro__image > div{padding-top: 20rem; padding-bottom: 30rem; left: 20rem; max-width: max-content;}
    
}


/* 오시는길 */
.location-list{flex-direction: column; width: 100%; gap: 80rem;}
.location-list .line{width: 100%; display: block; height: 1px; background-color: var(--br-02);}
.location-list__map{width: 100%;position: relative;height: 400rem;margin-bottom: 67rem;overflow: hidden;}
.location-list__map iframe{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.location-list__hover{width: 176rem; height: 100%; transition: all .8s; position: absolute; right: -100%; top: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 8rem; background-color: var(--bg-01); z-index: 1;}
.location-list__hover a + span{font-size: 13rem; color: var(--b-01); font-weight: 400;}

.location-list__map:hover .location-list__hover{right: 0;}

.location-list__desc h4{color: var(--b-01); display: block;}
.location-list__desc p{font-size: 19rem;line-height: 1.58;color: var(--b-01);font-weight: 400;margin-top: 10rem;}
.location-loca{padding-left: 20rem; position: relative; margin-bottom: 50rem;}
.location-loca::before{content: ""; width: 9rem; height: 9rem; background-color: var(--c-02); position: absolute; left: 0; top: 10rem;}
.location-loca {gap: 32rem; align-items: baseline; display: flex;}
.location-loca *{color: var(--c-01); font-weight: 800;}
.location-loca strong{ font-size: 30rem; position: relative;}
.location-loca strong::after{content:"";width:  20rem;height: 1px;background-color: var(--c-01);transform: rotate(120deg);display: block;position: absolute;right: -27px;bottom: 16px;}
.location-loca span{font-size: 20rem; line-height: .085;}
.location-list__info {/* display: flex; */gap: 60rem;align-items: center;}
.location-list__desc {min-width: 40%;}

@media (max-width:1600px){
    .location-list__hover{width: 140rem;}
    .location-list__desc p{font-size: 20rem;}
}
@media (max-width:1200px){
	.location-list__map{height: 550rem;}
}
@media all and (max-width:1023px){
    .location-list__map{margin-bottom: 24rem; height: 480rem;}
	.location-loca strong{font-size: 24rem;}
    .location-loca span{font-size: 17rem;}
    .location-list{gap: 50rem;}
    .location-list__hover{right: 0; background-color: rgba(255,255,255,0.6); backdrop-filter: blur(2rem); width: 100rem;}
    .location-loca{margin-bottom: 30rem;}
    .location-list__desc p{font-size: 16rem;}
}

@media (max-width: 540px){
	.about-wrap__desc p + p{margin-top: 14rem;}
    .sub01_01 #footer{margin-top: 0;}
    .location-list__map{height: 330rem;}
    .location-list__desc h4{font-size: 20rem;}
    .location-list__desc p{font-size: 15rem;}
    .location-loca strong{font-size: 16rem;}
    .location-loca span{font-size: 13rem;}
    .location-loca strong::after{width: 13rem; right: -30rem; bottom: 13rem; }
    .location-loca::before{width: 6rem; height: 6rem; top: 6rem;}
    .location-loca{padding-left: 15rem;}
    .location-list__hover{display: none;}
	.location-list__info {gap: 0;    flex-direction: column;}
}

/* product */
p.p-01{font-size: 20rem; line-height: 1.65; word-break: keep-all;}
.product-intro{padding-bottom: 100rem;}
.product-intro .p-01{ max-width: 1265rem; width: 100%; color: var(--b-01);}
.product-intro p + p{margin-top: 12rem;}

.product-com{background-color: var(--bg-01); padding-top: 100rem; padding-bottom: var(--gap);}
.product-com__inn{justify-content: space-between; width: 100%;}
.product-com__inn .product-grid{gap: 22rem;}
.product-com__inn > div:has(.product-grid){width:49.2%;}

.product-grid li{background-color: var(--w);  position: relative; max-width: 388rem; min-height: 200rem; display: flex; flex-direction: column; justify-content: space-between;  padding: 40rem;}
.product-grid li span{font-size: 20rem;font-weight: 600;color: var(--b-02);font-size: 0;}
.product-grid li em{display: block;  font-weight: 400; color: var(--b-01);}
.product-grid li .hover{position: absolute; opacity: 0; visibility: hidden; transition: all .5s; width: 100%; height: 100%; left: 0; top: 0; background-color: var(--c-01); display: flex; padding: 40rem; align-items: center; justify-content: center;}
.product-grid li .hover p{color:var(--w);}
.product-gird--arrow > li > span::after{content:"";display:block;width: 15rem;height: 16rem;background: url(../img/common/arrow-basic.svg) repeat 0% 50%;background-size: 8rem;}

.caption{display: block; position: relative; padding-left: 20rem; font-size: 18rem; font-weight: 600; color: var(--b-01); margin-bottom: 18rem;}
.caption::before{content: ""; width: 8rem; height: 8rem; background-color: var(--c-01); position: absolute;  left: 0; top: 8rem;}

.product-com.white .product-grid li{background-color: var(--bg-01);}
.product-com.white{background-color: var(--w);}

.product-com__title{max-width: 610rem; padding-right: 60rem;}
.product-com__title > div{position: sticky; top: 40rem;}
.product-com__title *{color: var(--b-01);}
.product-com__title p{margin-top: 12rem;}

.proudct-com__pic{gap: 22rem; margin-top: 60rem;}
.proudct-com__pic img{width: 100%;}

.product-tab{display: flex;}
.product-tab__nav--wrap{width: 350rem; flex-shrink: 0;  background-color: var(--b-01);}
.product-tab__nav{ position: sticky; top: 0; width: 350rem; top: 0;}
.product-tab__nav *{color: var(--w);}
.product-tab__conts{flex: 1;}
.prdouct-tab__list li{color: var(--w); font-size: 15rem; gap: 15rem; display: flex; padding: 18rem 10rem 18rem 60rem; align-items: center;}
.prdouct-tab__list li i{width: 6rem; height: 6rem; background-color: var(--c-01);}
.prdouct-tab__list li.active{background-color: var(--c-01); color: var(--w);}
.prdouct-tab__list li.active i{background-color: var(--w);}
.product-tab__title{padding: 42rem 60rem; border-bottom: 1px solid rgba(255,255,255,0.2);}
.product-tab__title strong{font-size: 16rem; font-weight: 700; }

.product-tab__conts{padding: 130rem 180rem 140rem 80rem;}
.product-tab__tt{font-size: 27rem; font-weight: 700; display: block; margin-bottom: 33rem;}
.product-desc__image--list{display: flex; flex-direction: column; gap: 32rem;}
.product-desc__image--list img{width: 100%;}
.product-desc__image strong{display: block; margin-bottom: 8rem;}

.product-desc__text--list{flex: 1;  padding-right: 30rem;}
.product-desc__text--list > ul{position: sticky; top: 100rem;}
.product-desc.ver01 .product-desc__text--list{padding-left: 70rem;}
.product-desc.ver01 .product-desc__image--list{width: 751rem;}
.product-desc.ver02 .product-desc__image--list + .product-desc__text--list{margin-top: 50rem;}

.product-desc__text--list > ul > li::before{top:0rem; width:26rem; height:26rem; background:none; font-weight:800; text-align:center; border-radius:30rem;}
.product-desc__text--list > ul > li:nth-child(1)::before{content:"1";}
.product-desc__text--list > ul > li:nth-child(2)::before{content:"2";}
.product-desc__text--list > ul > li:nth-child(3)::before{content:"3";}
.product-desc__text--list > ul > li:nth-child(4)::before{content:"4";}
.product-desc__text--list > ul > li:nth-child(5)::before{content:"5";}
.product-desc__text--list > ul > li:nth-child(6)::before{content:"6";}
.product-desc__text--list > ul > li:nth-child(7)::before{content:"7";}
.product-desc__text--list > ul > li:nth-child(8)::before{content:"8";}
.product-desc__text--list > ul > li:nth-child(9)::before{content:"9";}
.product-desc__text--list > ul > li:nth-child(10)::before{content:"10";}
.product-desc__text--list > ul > li{padding-left:30rem;}

.sub-list{margin:11rem 0 24rem}
.sub-list li{font-size: 15rem;color: var(--b-01);}

.engineering-machine{padding-bottom: 60rem;}
.engineering-machine img{width: 100%; margin-top: 32rem;}
.engineering-machine h4{margin-bottom: 12rem;}
.engineering-machine img + p{margin-top: 46rem;}

.engineer-rebuild{padding-bottom: var(--gap);}
.engineer-rebuild ul{row-gap: 28rem; column-gap: 30rem; margin-top: 23rem;}
.engineer-rebuild ul li:last-child{background-color: var(--c-01); display: flex; flex-direction: column; padding: 40rem; justify-content: flex-end;}
.engineer-rebuild ul li:last-child *{color: var(--w);}
.engineer-rebuild h5{margin-top: 33rem;}
.engineer-rebuild h5 + p{margin-top: 12rem;}
.engineer-rebuild img{width: 100%;}

.sub02_02 .sub-content{padding-top: 0;}
.sub02_04 .product-com:last-child .product-com__inn{gap: 22rem; margin-top: 70rem;}
.sub02_03 .product-intro h4{margin-bottom: 14rem;}
.sub02_01 #footer,
.sub02_02 #footer,
.sub02_03 #footer,
.sub02_04 #footer{margin-top: 0;}

.sub02_04 .product-grid--wrap:first-child ul li {
    min-height: 200rem;
    padding: 23rem;
}

.sub02_04 .product-grid--wrap:first-child ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (hover: hover) and (pointer: fine){
    .proudct-com__wrap .product-grid li:hover .hover{opacity: 1; visibility: visible;}
}

@media (max-width:1800px){
    .product-desc.ver01 .product-desc__image--list{width: 50%;}

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

    p.p-01{font-size: 18rem;}
     .product-com__inn > div:has(.product-grid){width: 60%;}
  
}
@media (max-width:1480px){
   
    .product-grid li{height: 220rem;}
    .product-tab__conts{padding: 100rem 110rem 140rem 80rem;}
    .product-desc.ver01 .product-desc__image--list{width: 58%;}
    .product-tab__nav--wrap,
    .product-tab__nav{width: 300rem;}

}
@media all and (max-width:1200px){
	.product-com__inn > div:has(.product-grid){width: 60%;}
 
    .prdouct-tab__list li{padding: 18rem 10rem 18rem 40rem;}
    .product-tab__title{padding: 40rem;}

    .product-tab__nav--wrap, .product-tab__nav {width: 260rem;}
    .product-tab__conts{padding: 80rem 100rem 140rem 60rem;}
    .product-desc.ver01 .product-desc__text--list{padding-left: 50rem;}
    .product-desc.ver01 .product-desc__image--list{width: 48%;}

    .sub02_04 .product-com__inn{flex-direction: column; gap: 56rem;}
    /* .sub02_04 .product-com__inn .product-grid{grid-template-columns: 1fr 1fr 1fr 1fr;} */
    .sub02_04 .product-com__inn > div:has(.product-grid){width: 100%;}
    .sub02_04 .product-grid--wrap + .product-grid--wrap{margin-top: 40rem;}
    .sub02_04 .product-grid li{max-width: 100%;}
    

}
@media all and (max-width:1023px){
	p.p-01{font-size: 16rem;}
    .product-com__inn{flex-direction: column; gap: 24rem;}
    .product-com__inn > div:has(.product-grid){width: 100%;}
    .product-grid li{width: 100%; max-width: 100%;}
    .product-com__title{max-width: 100%; padding-right: 0;}
    .product-com{padding-top: var(--gap);}

    .product-tab__nav--wrap, .product-tab__nav {width: 200rem;}
    .prdouct-tab__list li{padding: 10rem; font-size: 14rem; gap: 8rem;}
    .prdouct-tab__list li i{width: 4rem; height: 4rem;}
    .product-tab__title{padding: 30rem 20rem;}
    .product-tab__conts{padding: 40rem; padding-bottom: var(--gap);}
    .product-desc__text--list li{font-size: 15rem;}
    .product-desc__text--list{padding-right: 0;}
    .product-desc.ver01 .product-desc__text--list{padding-left: 42rem;}
    .product-desc__image--list{gap: 24rem;}
    .product-tab__tt{font-size: 24rem; margin-bottom: 22rem;}
    

    .product-grid li{padding: 30rem;}
    .product-grid li .hover{position: relative; opacity: 1; visibility: visible; background-color: transparent; padding: 0; height: auto; justify-content: flex-start;}
    .product-grid li .hover p{color: var(--b-02);}
    .product-grid li span{display: block; margin-bottom: 30rem;}
    .product-grid li em{margin-bottom: 8rem;}
    .product-grid li{height: auto;}

    .engineer-rebuild ul{gap: 22rem;}
    .engineer-rebuild ul li:last-child{padding: 26rem;}
    .engineer-rebuild h5 + p{line-height: 1.4;}

    .proudct-com__pic{grid-template-columns: 1fr 1fr 1fr 1fr; margin-top: 40rem;}
    
}
@media (max-width:860px){

    p.p-01{font-size: 15rem;}
    .product-grid li{padding: 32rem;}

    .product-tab{flex-direction: column;}
    .product-tab{flex-direction: column;}
    .product-tab__nav--wrap, .product-tab__nav{width: 100%; position: relative; z-index: 1;}

    .product-tab__title::after{}
    .product-tab__title::after{content:"";position:absolute;right:20rem; top: 23rem; transition: all .3s; width:40rem;height:40rem;background-color:transparent;background-size: 8rem;background-position:50% 50%;background-image:url(../img/common/arrow-basic_w.svg);background-repeat:no-repeat;border-radius:100%;transform: rotate(90deg);}

    .prdouct-tab__list{width: 100%; background-color: var(--b-01);  position: absolute; z-index: -1; opacity: 0; visibility: hidden; transition: all .5s; }
    .prdouct-tab__list li{padding: 14rem 20rem;}
    .product-tab__title{padding: 0 20rem; height:84rem; display: flex; align-items: center;}
    .product-tab__nav.is-active .prdouct-tab__list{z-index: 10; opacity: 1; visibility: visible;}
    .product-tab__nav.is-active .product-tab__title::after{transform: rotate(-90deg);}

    .engineer-rebuild ul{grid-template-columns: 1fr;}

	.product-gird--arrow > li > span::after{transform: rotate(90deg);}
    
}
@media (max-width: 540px){

    .product-intro{padding-bottom: 54rem;}
    .product-com__inn .product-grid{grid-template-columns: 1fr;}
    .product-grid li{height: 130rem;padding: 22rem;min-height: 100rem;}
    .product-com__inn .product-grid{gap: 12rem;}
    .product-tab__title{height: 54rem;}
    .product-tab__title::after{top: 7rem; right: 10rem;}
    .product-tab__conts{padding: 40rem 20rem 60rem;}
    .product-desc{flex-direction: column;}
    .product-desc.ver01 .product-desc__image--list{width: 100%;}
    .product-desc.ver01 .product-desc__text--list{padding-left: 0; margin-top: 24rem;}
    .product-desc__image--list{gap: 12rem;}
    .product-tab__tt{font-size: 20rem; margin-bottom: 16rem;}

    .proudct-com__pic{grid-template-columns: 1fr 1fr; gap: 12rem;}

    .sub02_04 .product-com:last-child .product-com__inn{margin-top: 50rem;}
}

/* reference */
.reference-list{display: flex; width: 100%; flex-direction: column; gap: 142rem;}
.reference-list__box{gap: 60rem; align-items: center;}
.reference-list__box .line{width: 1px;  border-right: 1px dashed var(--b-02); display: block;   align-self: stretch;}
.reference-list__image{ aspect-ratio: 714 / 430; width: 100%; max-width: 718rem;}
.reference-list__image img{width: 100%; height: 100%; object-fit: cover;}
.reference-list__box ul{flex: 1;}
.reference-list__box ul > li{align-items: center;  padding:20rem 0;}
.reference-list__box ul > li + li{border-top: 1px solid var(--br-02);}
.reference-list__box ul > li > *{color: var(--b-01); font-size: 18rem; ;}
.reference-list__box ul > li .reference-title{font-weight: 600; min-width: 260rem; padding-left: 20rem; }
.reference-list__box ul > li .reference-desc{font-weight: 400; flex: 1;}


@media (max-width:1480px){
    .reference-list{gap: 122rem;}
    .reference-list__box{gap: 50rem;}
}
@media all and (max-width:1200px){
    .reference-list{gap: 100rem;}
    .reference-list__box{gap: 42rem;}
	.reference-list__box ul > li > *{font-size: 16rem;}
    .reference-list__box ul > li{padding: 12rem 0;}
    .reference-list__box ul > li .reference-title{padding-left: 0; min-width: 210rem;}
    .reference-list__image{height: auto; max-height: 320rem; aspect-ratio: 500 / 320; max-width: 500rem;}

}
@media all and (max-width:1023px){
	
    .reference-list__image{max-height: 280rem; aspect-ratio: 420 / 280; max-width: 420rem;}
}

@media all and (max-width:860px){
    .reference-list__box{flex-direction: column; gap: 22rem;}
    .reference-list__image{max-height: max-content; aspect-ratio: auto; max-width: 100%;}
    .reference-list__box .line{display: none;}
    .reference-list__box ul{flex: none; width: 100%;}
    .reference-list__box ul > li > *{font-size: 15rem;}
    .reference-list{gap: 54rem;}
}

.cs-form{justify-content: space-between;}
.cs-form__desc{min-width: 631rem;}
.cs-form__desc img{width: 100%;}
.cf-form__conts{flex: 1; padding-left: 94rem;}
.cs-form .cs-tt{width: 100%; display: block; margin-bottom: 32rem; font-size: 17rem;}
.cs-form .cs-line{width: 100%; height: 1px; display: block; border-top: 1px dashed var(--b-02); margin: 22rem 0 62rem}
.cs-form--wrap  .btn-wrap{margin-top: 122rem; display: flex; justify-content: center; align-items: center;}

.form-area:not(.require,.message,.agree-area){width: calc(50% - 13rem); margin-bottom: 40rem;}
.form-area:not(.require,.message)::before{}
.form-part .check-box label{padding-left:0 !important; min-width: 100rem; height: 43rem;  background-color: #f6f6f6; border-radius: 90rem; display: flex; align-items: center; justify-content: center;}  
.form-part .check-box label em{font-size: 14rem; color: var(--default);}
.form-part .check-box label:has([type="radio"]:checked){background-color: var(--c-01);}
.form-part .check-box label:has([type="radio"]:checked) em{color: var(--w);}

.require.form-area,.message.form-area{width: 100%; }
.require.form-area > em{font-size: 17rem; color: var(--b-01); margin-bottom: 40rem;} 
.require.form-area{border-bottom: 1px dashed var(--b-02); margin-bottom: 72rem; padding-bottom:32rem;}
.message.form-area{margin-bottom:40rem;}
.message.form-area + *{width:100% !important;}
.require.form-area > em.form-cap{position:absolute;bottom:-68px;left:0;font-weight:600;font-size:13rem;color:var(--b-01);display: flex;align-items: center;}
.require.form-area > em.form-cap > i{display:block; width:5rem; height:5rem; margin-right:6rem; background:var(--c-02); font-size:0;}

.form-area:not(.require) > em{padding-left: 13rem; position: relative;}
.form-area:not(.require) > em::before{content: ""; width: 5rem; height: 5rem; background-color: var(--c-01); position: absolute; left: 0; top: 8rem;}
.form-area:not(.require) > em:has(.mark)::before{background-color: var(--c-02);}

.agree-area.form-area{width: 100%; margin-top: 64rem; padding-top: 64rem; border-top: 1px dashed var(--b-02);}
.agree-area.form-area p{margin-bottom: 33rem;}
.agree-area em{font-size: 14rem; color: var(--default); }
.agree-area em b{color: var(--c-01); font-weight: 700;}

.cs-form__desc dl{position: relative; padding-left: 13rem; margin-top: 27rem;}
.cs-form__desc dl::before{content: ""; width: 5rem; height: 5rem; background-color: var(--c-02); position: absolute; top: 0; left: 0;}
.cs-form__desc dl div{display: flex; align-items: center;}
.cs-form__desc dl div + div{margin-top: 6rem;}
.cs-form__desc dt{font-weight: 700; color: var(--b-01); margin-right: 4rem;}
.cs-form__desc dd{color: var(--default);}

@media (max-width:1600px){
    .cs-form__info{width: 40%;}
	.cs-form__desc{min-width: fit-content; width: 100%;}
}
@media (max-width:1480px){

}
@media all and (max-width:1200px){
	/*화면 1024에 맞춰놓고 작업*/
}
@media all and (max-width:1023px){
	.cs-form--wrap{flex-direction: column;}
    .cf-form__conts{padding-left: 0; margin-top: 50rem;}
    .cs-form__info{width: 100%;}
}
@media (max-width:860px){

    .cs-form--wrap .btn-wrap{margin-top: 62rem;}
}
@media (max-width: 540px){
.form-area:not(.require,.message,.agree-area){width: 100%;}
.require.form-area > em{margin-bottom: 20rem;}
.form-part .check-box label{min-width: 84rem; height: 35rem;}

.cs-form .cs-line{margin-bottom: 42rem;}
.cs-form .cs-tt{margin-top: 22rem;}
.cs-form .cs-line + .cs-tt{margin-top: 0;}
.agree-area.form-area{padding-top: 44rem;}
.cs-form--wrap .btn-wrap{margin-top: 42rem;}
.require.form-area{padding-bottom: 24rem;}

.require.form-area > em.form-cap {bottom: -42px;}
.cf-form__conts {margin-top: 20rem;}
}

.main-partners__map ul{top: 78rem;}