body #wrap{padding-top: 0 !important;}
body #header {background: transparent;border-color: transparent; transition: all 0.3s;}
body #header .header-logo {filter: brightness(0) invert(1);transition: all 0.3s;}
body #header .icon-button,
body #header .menu-items > li > a {color: #fff;transition: all 0.3s;}
body #header.active {background: #fff;border-color: var(--color-neutral-2);}
body #header.active .header-logo {filter: none;}
body #header.active .icon-button,
body #header.active .menu-items > li > a {color: #000;}
body #footer { margin-top: 0; } 



/* common */
.main__title{line-height: 1.6;position: relative;margin-bottom: 33rem;}
.main__title h3{font-weight: 600;font-size: 34rem;margin-bottom: 10rem;color: var(--color-neutral-9);}
.main__title h3 a{display: flex;align-items: center;gap: 5rem;font-weight: 400;font-size: 16rem;color: var(--color-neutral-5);position: absolute;bottom: 0;right: 0;}
.main__title h3 a span{display: flex;align-items: center;justify-content: center;}
.main__title h3 a span svg{width: 18rem;height: 18rem;}
.main__title p{color: var(--color-neutral-7);font-size: 18rem;}

.main__footer .swiper-progress { width: 100%; margin-top: 55rem; } 
.main__footer .swiper-progress .progress-bar { position: relative; height: 2rem !important; background-color: var(--color-neutral-2); bottom: 0; position: relative; } 
.main__footer .swiper-progress .progress-bar > span { background: var(--color-neutral-7) !important; } 

@media all and (max-width:1440px) {
    .main__title h3{font-size: 28rem;margin-bottom: 8rem;}
    .main__title h3 a{font-size: 14rem;}
    .main__title p{font-size: 16rem;}
}

@media all and (max-width:767px) {
    .main__title{margin-bottom: 20rem;}
    .main__title h3{font-size: 24rem;display: flex;align-items: center;gap: 8rem;}
    .main__title h3 a{font-size: 0;position: static;gap: 0;}
    .main__title h3 a svg{width: 20rem;height: 20rem;}
    .main__title p{font-size: 14rem;}

    .main__footer .swiper-progress{margin-top: 30rem;}
}



/* 메인 비주얼 */
.main__visual{font-size: 0;}
.main__visual .swiper{position: relative; transition: height 0.6s ease-in-out;}
.main__visual .swiper .swiper-wrapper{}
.main__visual .swiper .swiper-wrapper .swiper-slide{}
.main__visual .swiper .swiper-wrapper .swiper-slide img{width: 100%;}
.main__visual .swiper .swiper-wrapper .swiper-slide .text-content{width: 1300rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);color: var(--color-neutral-1);text-align: center; line-height: 1.4;}
.main__visual .swiper .swiper-wrapper .swiper-slide .text-content span { display: block; font-size: 16rem; margin-bottom: 20rem; transition-delay: 0.2s; } 
.main__visual .swiper .swiper-wrapper .swiper-slide .text-content h3 { font-size: 52rem; font-weight: 600; margin-bottom: 18rem; transition-delay: 0.4s; } 
.main__visual .swiper .swiper-wrapper .swiper-slide .text-content p { font-size: 20rem; font-weight: 500; transition-delay: 0.6s; } 

.main__visual .swiper .swiper-wrapper .swiper-slide .text-content > * { opacity: 0; visibility: hidden; transform: translateY(10rem); transition: all 0.6s ease; } 
.main__visual .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .text-content > * { opacity: 1; visibility: visible; transform: translateY(0); } 
.main__visual .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .text-content span { transition-delay: 0.2s; } 
.main__visual .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .text-content h3 { transition-delay: 0.4s; } 
.main__visual .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .text-content p { transition-delay: 0.6s; } 

.main__visual .swiper .swiper-buttons { width: calc(100% - 200rem); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } 
.main__visual .swiper .swiper-buttons > div::after { border-color: var(--color-neutral-1); width: 25rem; height: 25rem; } 

.main__visual .swiper .swiper-pagination{}
.main__visual .swiper .swiper-pagination > span{border-radius: 0;width: 20rem;margin: 0;height: 2rem;}
.main__visual .swiper .swiper-pagination > span.swiper-pagination-bullet-active{width: 20rem;}

@media all and (max-width: 1640px){
    .main__visual .swiper .swiper-buttons { display: none; } 
}

@media all and (max-width: 1440px){
    .main__visual .swiper .swiper-wrapper .swiper-slide .text-content { width: 100%; padding: 0 30rem; } 
    .main__visual .swiper .swiper-wrapper .swiper-slide .text-content span{font-size: 16rem;margin-bottom: 15rem;}
    .main__visual .swiper .swiper-wrapper .swiper-slide .text-content h3{font-size: 40rem;margin-bottom: 15rem;}
    .main__visual .swiper .swiper-wrapper .swiper-slide .text-content p{font-size: 16rem;}
}

@media all and (max-width:1023px) {
    .main__visual .swiper .swiper-wrapper .swiper-slide .text-content span{font-size: 14rem;}
    .main__visual .swiper .swiper-wrapper .swiper-slide .text-content h3{font-size: 32rem;margin-bottom: 12rem;}
}



/* 업무분야 */
.main__field{padding-top: 120rem;}
.main__field .field-list{}
.main__field .field-list .field-item{display: block;}
.main__field .field-list .field-item .img-box{position: relative;border-radius: 10rem;overflow: hidden;}
.main__field .field-list .field-item .img-box img{display: block;width: 100%;transition: .3s;}
.main__field .field-list .field-item:hover .img-box img{transform: scale(1.1);}
.main__field .field-list .field-item .img-box span{position: absolute;bottom: 25rem;right: 22rem;display: flex;align-items: center;justify-content: center;}
.main__field .field-list .field-item .img-box span svg{width: 48rem;height: 48rem;}
.main__field .field-list .field-item .img-box span svg rect{color: var(--color-neutral-1);transition: .3s;}
.main__field .field-list .field-item:hover .img-box span svg rect{color: var(--color-primary);fill-opacity: 1;}
.main__field .field-list .field-item .img-box span svg path{color: var(--color-neutral-1);}
.main__field .field-list .field-item .text-content{margin-top: 18rem;line-height: 1.4;display: flex;align-items: center;gap: 12rem;}
.main__field .field-list .field-item .text-content h3{font-weight: 600;font-size: 28rem;}
.main__field .field-list .field-item .text-content p{color: var(--color-neutral-5);font-weight: 500;font-size: 18rem;}

@media all and (max-width:1440px) {
    .main__field .field-list .field-item .text-content h3{font-size: 20rem;}
    .main__field .field-list .field-item .text-content p{font-size: 14rem;}
    .main__field .field-list .field-item .img-box span{bottom: 17rem;right: 15rem;}
    .main__field .field-list .field-item .img-box span svg{width: 35rem;height: 35rem;}
}

@media all and (max-width:1023px) {
    .main__field{padding-top: 60rem;}
}

@media all and (max-width:767px) {
    .main__field .field-list .swiper-slide{display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 10px;}

    .main__field .field-list .field-item .img-box{border-radius: 5rem;}
    .main__field .field-list .field-item .text-content{margin-top: 10rem;flex-direction: column;gap: 5rem;align-items: flex-start;}
    .main__field .field-list .field-item .text-content h3{font-size: 18rem;}
    .main__field .field-list .field-item .text-content p{font-size: 14rem;}
    .main__field .field-list .field-item .img-box span{bottom: 10rem;right: 8rem;}
    .main__field .field-list .field-item .img-box span svg{width: 28rem;height: 28rem;}
    .main__field .field-list .field-item .img-box span svg rect{color: var(--color-primary);fill-opacity: 1;}
}


/* 브랜드 */
.main__brand{padding-top: 120rem;}
.main__brand > div{position: relative;}
.main__brand .image-box{}
.main__brand .image-box img{display: block;width: 100%;}
.main__brand .text-box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;text-align: center;color: var(--color-neutral-1);}
.main__brand .text-box > h3{font-weight: 600;font-size: 42rem;margin-bottom: 30rem;line-height: 1.4;}
.main__brand .text-box > p{font-size: 18rem;margin-bottom: 60rem;line-height: 1.6;}
.main__brand .text-box > a{display: inline-flex;align-items: center;justify-content: center;gap: 5rem;font-size: 16rem;line-height: 1.2;border: 1px solid var(--color-neutral-1);border-radius: 25rem;background: #FFFFFF33;padding: 12rem 20rem 12rem 24rem;transition: .3s;}
.main__brand .text-box > a svg{width: 18rem;height: 18rem;}
.main__brand .text-box > a:hover{border-color: var(--color-primary);background: var(--color-primary);}

@media all and (max-width:1440px) {
    .main__brand .text-box > h3{font-size: 30rem;margin-bottom: 20rem;}
    .main__brand .text-box > p{font-size: 16rem;margin-bottom: 40rem;}
    .main__brand .text-box > a{font-size: 14rem;padding: 10rem 18rem 10rem 22rem;}
}

@media all and (max-width:1023px) {
    .main__brand{padding-top: 60rem;}
    .main__brand > div{padding: 0;}
}

@media all and (max-width:767px) {
    .main__brand .text-box{padding: 0 20rem;}
    .main__brand .text-box > h3{font-size: 28rem;}
    .main__brand .text-box > p br{display: none;}
    .main__brand .text-box > a{font-size: 12rem;}
    .main__brand .text-box > a svg{font-size: 14rem;height: 14rem;}
}



/* 주요 구성원 */
.main__member{margin-top: 50rem;padding-block: 120rem;background: #2B2B2B;}
.main__member .main__title h3{color: var(--color-neutral-1);}
.main__member .main__title p{color: var(--color-neutral-2);}
.main__member .main__title h3 a{color: var(--color-neutral-3);}
.main__member .member-list .member-item .img-box{border-radius: 10rem;overflow: hidden;}
.main__member .member-list .member-item .img-box img{display: block;width: 100%;}
.main__member .member-list .member-item .text-content{margin-top: 18rem;line-height: 1.4;display: flex;align-items: center;gap: 12rem;}
.main__member .member-list .member-item .text-content h3{font-weight: 600;font-size: 28rem;color: var(--color-neutral-1);}
.main__member .member-list .member-item .text-content p{color: var(--color-primary);font-weight: 500;font-size: 18rem;}
.main__member .main__footer .swiper-progress .progress-bar{background: #FFFFFF33;}
.main__member .main__footer .swiper-progress .progress-bar > span{background: var(--color-neutral-1) !important;}

@media all and (max-width:1440px) {
    .main__member .member-list .member-item .text-content h3{font-size: 20rem;}
    .main__member .member-list .member-item .text-content p{font-size: 15rem;}
}

@media all and (max-width:1023px) {
    .main__member{margin-top: 0;padding-block: 70rem;}
}

@media all and (max-width:767px) {
    .main__member .member-list{padding-right: 16rem;margin-right: -16rem;}
    .main__member .member-list .member-item .img-box{border-radius: 5rem;}
    .main__member .member-list .member-item .text-content{margin-top: 10rem;flex-direction: column;gap: 5rem;align-items: flex-start;}
    .main__member .member-list .member-item .text-content h3{font-size: 18rem;}
    .main__member .member-list .member-item .text-content p{font-size: 14rem;}
}



/* 업무사례 */
.main__case{padding-top: 120rem;}
.main__case .case-item{background: var(--color-neutral-1);border: 1px solid var(--color-neutral-2);border-radius: 10rem;padding: 30rem;height: -webkit-fill-available;transition: .3s;}
.main__case .case-item:hover{background: var(--color-bg-2);}
.main__case .case-item .tit{display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 42rem;line-height: 1.4;}
.main__case .case-item .tit span{display: flex;align-items: center;justify-content: center;font-size: 18rem;color: var(--color-neutral-1);background: #2b2b2b;border-radius: 10rem;padding: 10rem 15rem;font-weight: 500;}
.main__case .case-item .tit svg{width: 48rem;height: 48rem;}
.main__case .case-item .tit svg rect,
.main__case .case-item .tit svg path{transition: .3s;}
.main__case .case-item:hover .tit svg rect{fill: var(--color-primary);stroke: var(--color-primary);}
.main__case .case-item:hover .tit svg path{stroke: var(--color-neutral-1);}
.main__case .case-item .text-content{font-weight: 500;line-height: 1.4;}
.main__case .case-item .text-content h3{font-size: 18rem;color: var(--color-primary);margin-bottom: 12rem;font-weight: 500;}
.main__case .case-item .text-content p{font-size: 20rem;}

@media all and (max-width:1440px) {
    .main__case .case-item{padding: 20rem;}
    .main__case .case-item .tit{margin-bottom: 25rem;}
    .main__case .case-item .tit span{font-size: 14rem;padding: 7rem 13rem;}
    .main__case .case-item .tit svg{width: 35rem;height: 35rem;}
    .main__case .case-item .text-content h3{font-size: 16rem;margin-bottom: 7rem;}
    .main__case .case-item .text-content p{font-size: 16rem;}
}

@media all and (max-width:1023px) {
    .main__case{padding-top: 60rem;}
}

@media all and (max-width:767px) {
    .main__case .case-list{padding-right: 16rem;margin-right: -16rem;}
    .main__case .case-item .tit span{font-size: 12rem;border-radius: 5rem;}
    .main__case .case-item .tit svg{width: 28rem;height: 28rem;}
    .main__case .case-item .text-content h3{font-size: 14rem;}
}



/* 오시는 길 */
.main__map{margin-top: 120rem;padding-block: 120rem;background: var(--color-bg-2);}
.main__map > div{display: grid;grid-template-columns: repeat(12,minmax(0,1fr));gap: 0 20rem;}
.main__map .main__title{grid-column: 1/6;margin-bottom: 0;}
.main__map .main__title > h3{margin-bottom: 60rem;}
.main__map .main__title > ul{position: relative;display: flex;align-items: center;gap: 12rem;}
.main__map .main__title > ul > li{}
.main__map .main__title > ul > li > p{display: flex;align-items: center;justify-content: center;font-size: 18rem;line-height: 1.2;color: var(--color-neutral-4);border: 1px solid var(--color-neutral-2);background: var(--color-neutral-1);border-radius: 25rem;padding: 12rem 35rem;cursor: pointer;}
.main__map .main__title > ul > li.current > p{background: var(--color-primary);border-color: var(--color-primary);color: var(--color-neutral-1);}
.main__map .main__title > ul > li > ul{position: absolute;top: calc(100% + 30rem);left: 0;opacity: 0;visibility: hidden;/* transition: .3s; */ display: flex;flex-direction: column;gap: 5rem;}
.main__map .main__title > ul > li.current > ul{opacity: 1;visibility: visible;}
.main__map .main__title > ul > li > ul li{display: grid;grid-template-columns: 110rem auto;align-items: start;}
.main__map .main__title > ul > li > ul li h3{font-weight: 500;color: var(--color-primary);display: flex;align-items: center;gap: 10rem;font-size: 16rem;margin-bottom: 0;}
.main__map .main__title > ul > li > ul li h3 svg{width: 18rem;height: 18rem;}
.main__map .main__title > ul > li > ul li p{font-size: 16rem;}
.main__map .main__content{grid-column: 6/13;height: 620rem;}
.main__map .main__content .map-box{border-radius: 10rem;border: 1px solid var(--color-neutral-2);overflow: hidden;margin-bottom: 20rem;}
.main__map .main__content .map-box .root_daum_roughmap{width: 100%;}
.main__map .main__content .map-box .root_daum_roughmap .wrap_map{height: 620rem;}
.main__map .main__content .map-box .root_daum_roughmap .wrap_controllers,
.main__map .main__content .map-box .root_daum_roughmap .cont .section_address,
.main__map .main__content .map-box .root_daum_roughmap .map_border{display: none;}

@media all and (max-width:1440px) {
    .main__map .main__title > h3{margin-bottom: 40rem;}
    .main__map .main__title > ul > li > p{font-size: 16rem;padding: 10rem 25rem;}
    .main__map .main__title > ul > li > ul li{grid-template-columns: 95rem auto;}
    .main__map .main__title > ul > li > ul li h3{font-size: 14rem;}
    .main__map .main__title > ul > li > ul li h3 svg{width: 16rem;height: 16rem;}
    .main__map .main__title > ul > li > ul li p{font-size: 14rem;}
}

@media all and (max-width:1023px) {
    .main__map{margin-top: 60rem;padding-block: 60rem;}
    .main__map > div{display: block;}
    .main__map .main__title > ul{padding-bottom: 165rem;}
    .main__map .main__title > ul > li > ul{top: 65rem;}
    .main__map .main__content,
    .main__map .main__content .map-box .root_daum_roughmap .wrap_map{height: 400rem;}
}

@media all and (max-width:767px) {
    .main__map .main__title > h3{margin-bottom: 30rem;}
    .main__map .main__title > ul{gap: 8rem;}
    .main__map .main__title > ul > li > p{font-size: 14rem;padding: 10rem 20rem;}
    .main__map .main__content,
    .main__map .main__content .map-box .root_daum_roughmap .wrap_map{height: 200rem;}
}