.font-64 {font-size: 4rem;}
.font-96 {font-size: 6rem;}
.pt-75 {padding-top: 4.6875rem}
.pt-160 {padding-top: 10rem;}
.pb-120 {padding-bottom: 7.5rem;}
.lh-11 {line-height: 1.1}

@media (max-width: 990px) {
    .font-16 {font-size: 1.500rem;}
    .font-32 {font-size: 2.500rem; }
    .font-20, .font-24 { font-size: 1.875rem;}
    .font-96 {font-size: 7.5rem;}    
}
@media (max-width: 768px) {
    .section {padding: 100px 0;}
    .font-96 {font-size: 6rem;}    
}

@media (max-width: 480px) {
    .font-16 {font-size: 1.25rem;}
    .font-32 {font-size: 2.000rem; }
    .font-20, .font-24 { font-size: 1.500rem;}
    .font-48 {font-size: 2.625rem;}
    .font-80 {font-size: 4.375rem;}
    .font-96 {font-size: 5rem;}  
}
@media (max-width: 390px) {
    .font-16 {font-size: 1.125rem;}
}
@media (max-width: 360px) {
    .font-16 {font-size: 1rem;}
    .font-80 {font-size: 4.0625rem;}
}

.link {position: relative; width: max-content;}
.link::after {content: ''; position: absolute; width: 0; height: 2px;    background-color: #fff; bottom: -0.625rem; transition: 1.3s ease-in-out; transition-delay: 1s; }
.link p {letter-spacing: -.3px; position: relative;}
.link.aos-animate::after {width: 100%;}
.link:hover img {transform: translateX(0); animation: link .9s  linear infinite;}

.keyword {opacity: 0; transition: 1.3s ease-in-out; transition-delay: .3s;}
.aos-animate .keyword {opacity: 1;}

@keyframes link {
    0% {transform: translateX(0);}
    50% {transform: translateX(.25rem);}
    100% {transform: translateX(0);}
}    

section {overflow: hidden;}

/* carousel */
#naver-carousel{position: absolute;width: 100%;top:300px;padding:40px 0;}
#naver-carousel h2{font-size:28px;font-weight:700;margin-bottom:24px;line-height:1.3;}
#naver-carousel .gallery{display:flex;gap:5px;padding:0;margin:0;list-style:none;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#naver-carousel .gallery::-webkit-scrollbar{display:none;}
#naver-carousel .item{min-width: 140px;}
#naver-carousel .item a{display:block;text-decoration:none;color:#111;}
#naver-carousel .item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;display:block;}
#naver-carousel .item strong{display:block;margin-top:14px;font-size:18px;font-weight:700;line-height:1.4;word-break:keep-all;}
@media (max-width:768px){
    #naver-carousel{padding:30px 0;}
    #naver-carousel h2{font-size:22px;margin-bottom:18px;}
    #naver-carousel .item{min-width:220px;}
    #naver-carousel .item strong{font-size:16px;}
}

/*mainslide*/
#mainslide {width: 100%;height: 100vh; position: relative; min-height: 950px; }
#mainslide .swiper {width: 100%; height: 100%;}
#mainslide .swiper .swiper-slide {overflow: hidden;}
#mainslide .swiper .swiper-slide .inner {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; transform: scale(1.1); transition: 2s transform; position: relative;}
#mainslide .swiper .swiper-slide-active .inner {transform: scale(1);}
#mainslide .swiper .slide01 .inner {background-image: url(/img/renewal/mainslide.jpg); background-position: 90% 0;}

#mainslide .swiper .slide01 .text {height: 82.5%;}
#mainslide .swiper .slide01 .inner_left .box {width: 100%; max-width: 20.625rem; position: relative;}
#mainslide .swiper .slide01 .inner_left .box::after {content: ''; background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 100%); width: 100%; height: 100%; position: absolute; top: -50%; left: 0; mix-blend-mode: overlay; z-index: -1; transition: 1.3s; opacity: 0;}
#mainslide .swiper .slide01 .inner_left .box.aos-animate::after {top:0; opacity: 1;}

#mainslide #scroll {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; cursor: pointer; filter: blur(30px); opacity: 0; transition: 1.3s; transition-delay: .3s;}
#mainslide.aos-animate #scroll {filter: blur(0); opacity: 1;}
#mainslide #scroll .line {width: 2px; height: 100px; background-color: rgba(255,255,255,0.5); position: relative; overflow: hidden;} 
#mainslide #scroll .line p {width: 100%; height: 33%; position: relative; background-color: #fff; animation: scrolling 2.3s  ease-out infinite; max-height: calc( 100px / 3);}

@keyframes scrolling {
0% {opacity: 1; transform: translateY(-10%);}
80% {opacity: 1; transform: translateY(calc(100px - 100%));}
100% {opacity: 0; transform: translateY(calc(100px - 100%));}
}

@media (max-width: 1920px) {
    #mainslide .swiper .slide01 .inner {background-position: 40% 0;}
}
@media (max-width: 1240px) {
    #mainslide .swiper .slide01 .width40 {width: 45%;}
}
@media (max-width: 990px) {
    #mainslide .swiper .slide01 .inner {background-image: url(/img/renewal/mainslide_m.jpg); background-position: 40% 90%;}
    #mainslide .swiper .slide01 .text {justify-content: flex-start; }
    #mainslide .swiper .slide01 .width40 {width: 65%;  padding-left: 5%; justify-content: flex-start;}
    #mainslide .swiper .slide01 .inner_left {padding-top: 11.875rem; height: 55%; }
    #mainslide .swiper .slide01 .inner_left .box { padding-bottom: 0; max-width: 30.375rem; justify-content: flex-start;}
    #mainslide .swiper .slide01 .inner_left .box::after { width: 130%; top:0; left: -30%; background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 100%); transform: translateX(-100%);}
    #mainslide .swiper .slide01 .inner_left .box.aos-animate::after {transform: translateX(0);}
    #mainslide .swiper .slide01 .inner_left .box .text_wrap {text-align: left;}
    #mainslide .swiper .slide01 .inner_right {align-items: flex-start; padding-top: 5.625rem; height: 45%;}
    #mainslide .swiper .slide01 .aos-animate .link::after {width: 100%;}

    #mainslide #scroll .line {height: 8.6875rem;}    
    #mainslide #scroll img {width: 17px;}   
    #mainslide #scroll .line p {max-height: calc( 8.6875rem / 3);} 

    @keyframes scrolling {
        0% {opacity: 1; transform: translateY(-10%);}
        80% {opacity: 1; transform: translateY(calc(8.6875rem - 100%));}
        100% {opacity: 0; transform: translateY(calc(8.6875rem - 100%));}
    }
}
@media (max-width: 500px) {
    #mainslide .swiper .slide01 .inner {background-position: 40% 100%;}
}
@media (max-width: 480px) {
    #mainslide {min-height: 665px; }               
    #mainslide .swiper .slide01 .inner_left {padding-top: 25%; max-height: calc(30rem + 20px);} 
    #mainslide .swiper .slide01 .inner_right {padding-top: 10%;}
}
@media (max-width: 400px) {
    #mainslide #scroll .line {height: 5.9375rem;}
    #mainslide #scroll img {width: 14px;}
    #mainslide #scroll .line p {max-height: calc( 5.9375rem / 3);} 
    
    @keyframes scrolling {
        0% {opacity: 1; transform: translateY(-10%);}
        80% {opacity: 1; transform: translateY(calc(5.9375rem - 100%));}
        100% {opacity: 0; transform: translateY(calc(5.9375rem - 100%));}
    } 
}

#business {position: relative;}
#business::after {content: ''; position: absolute; bottom: 0; left: 0; width: 47.5%;  height: 70%; max-width: 54.25rem; max-height: 56rem; background-color: #1a1a1a; z-index: -1; transition: 1.3s linear; opacity: 0; transform: translateY(10%);} 
#business.aos-animate::after { opacity: 1;  transform: translateY(0);}

#business .tit .width60 {padding-right: 5%;}
#business .link::after {width: 100%;}

#business .slide {position: relative;}
#business .slide::after {content: ''; position: absolute; left: -9.3125rem; top: 50%; transform: translateY(-50%); width: 4.625rem; height: 46rem; background-image: url(/img/renewal/business_text.png); background-repeat: no-repeat; z-index: 1; filter: brightness(20) blur(30px); opacity: 0; transition: 1.3s; transition-delay: .3s;}
#business .slide.aos-animate::after {filter:brightness(1) blur(0); opacity: 1;}
#business .swiper {overflow: visible;}

#business .swiper .swiper-slide {height: 45.9375rem; opacity: 1; transition: .3s ease; background-position: center; background-size: cover; background-repeat: no-repeat;}
#business .swiper .swiper-slide.swiper-slide-prev {opacity: 0;}
#business .swiper .swiper-slide.swiper-slide-active {transform: translateY(-5rem);}
#business .swiper .slide01 {background-image: url(/img/renewal/business_img01.jpg);}
#business .swiper .slide02 {background-image: url(/img/renewal/business_img02.jpg);}
#business .swiper .slide03 {background-image: url(/img/renewal/business_img03.jpg);}
#business .swiper .slide04 {background-image: url(/img/renewal/business_img04.jpg);}
#business .swiper .slide05 {background-image: url(/img/renewal/business_img05.jpg);}
#business .swiper .slide06 {background-image: url(/img/renewal/business_img06.jpg);}
#business .swiper .slide07 {background-image: url(/img/renewal/business_img07.jpg);}
#business .swiper .slide08 {background-image: url(/img/renewal/business_img08.jpg);}

#business .swiper .swiper-slide .inner {width: 100%; height: 100%; padding: 10.879%;}
#business .swiper .swiper-slide .inner .font-48 {transform: translateX(-0.3125rem); text-wrap: balance;}
#business .swiper .swiper-slide .inner .num {padding-bottom: 15.879%; opacity: .5; transition: 0.3s ease;}
#business .swiper .swiper-slide.swiper-slide-active .inner .num {padding-bottom: 10.879%; }

#business .swiper-scrollbar {max-width: 1365px;  width: 80%; margin: 0 auto; bottom: 10rem; left: auto; right: -7.5%; border-radius: 0; height: 3px; background: rgba(255,255,255,0.5)}
#business .swiper-scrollbar-drag {background: #fff; border-radius: 0;}

@media (min-width:1921px) {
    #business::after { max-width: none;}
    #business .swiper-scrollbar {left: 50%; right: auto; transform: translateX(-50%);}
}
@media (max-width:1600px) {
    #business .swiper-scrollbar {right: 0;}
}
@media (max-width:1440px) {
    #business .swiper .swiper-slide .inner {padding: 10.879% 8.625%;}
}
@media (max-width:1280px) {
    #business .swiper .swiper-slide .inner {padding: 10.879% 5%;}
}
@media (max-width: 990px) {
    #business::after,
    #business .slide::after  {display: none;}

    #business .slide {padding-top: 22.625rem;}
    #business .slide::before {content: ''; background-color: #1a1a1a; width: 105%; height: 100%; position: absolute; z-index: -1; transition: .9s linear; left: -10%; bottom: 0; opacity: 0; transform: translateY(10%);}
    #business .slide .point_text {position: absolute; top: 0; height: calc(100% - 50.9375rem); display: flex !important; width: 90%;  filter: brightness(20) blur(30px); opacity: 0;}
    #business .slide .point_text .text_wrap {width: 100%;}
    #business .slide .point_text p {font-size: 2rem; text-wrap: nowrap;}
    #business .slide .point_text .point_line {padding: 0 2.75% 1.125rem 2%;}
    #business .slide .point_text .point_line span {background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(252,195,170,1) 44%, rgba(230,99,40,1) 88%); height: .25rem; width: 0; transition: 1.3s ease-in-out; transition-delay: .3s; display: block;}
    #business .slide .point_text.aos-animate {filter:brightness(1) blur(0); opacity: 1;}
    #business .slide .point_text.aos-animate .point_line span {width: 100%;}
    #business .slide.aos-animate::before { opacity: 1; transform: translateY(0); }
    #business .tit {align-items: flex-start; opacity: 1;}
    #business .tit .width60 {padding-right: 0;} 
}
@media (max-width: 480px) {
    #business .slide .point_text { height: calc(100% - 42.5rem); }
    #business .swiper .swiper-slide {height: 38.5rem;}
}

#point {position: relative;}
#point::after {content: ''; position: absolute; left: 0; bottom: 0; height: 72.5%; width: 100%; background-color: #1a1a1a; z-index: -1; }
#point .tit .width60 {padding-right: 5%;}
#point .tit .width60 .img {max-width: max-content;}
#point .tit .width60 p {height: 35px; line-height: 35px;}

#point .list ul {gap: 0; position: relative;}
#point .list ul::after {content: ''; top: 0; left: 0; width: 107.5%; background-color: #313131; height: 1px; position: absolute;}
#point .list li {position: relative; width: calc((70% - 10rem) / 3); margin-right: 5rem;}
#point .list li::before {content: ''; top: -5rem; left: 0; position: absolute; background-repeat: no-repeat; background-size: cover; height: 5rem; width: 0; max-width: 138px; transition: 1.8s linear; }
#point .list.aos-animate li::before {width: 100%;}

#point .list li .inner p {text-wrap: nowrap;}
#point .list li:nth-child(1) {width: 30%; margin-right: 0; padding-right: 1.5rem; }
#point .list li:nth-child(1) .inner {gap: 1.500rem;}
#point .list li:nth-child(1) .inner p {line-height: 1;}
#point .list li:nth-child(1) .inner p.font-32 {line-height: 1.5; opacity: 0; transition-delay: .3s;}
#point .list li:nth-child(1) .inner p.font-32.aos-animate {opacity: 1; }
#point .list li:nth-child(4) {margin-right: 0;}

#point .list li:nth-child(2)::before {background-image: url(/img/renewal/point01.png); max-width: 119px;}
#point .list li:nth-child(3)::before {background-image: url(/img/renewal/point02.png);}
#point .list li:nth-child(4)::before {background-image: url(/img/renewal/point03.png);}

#point .list.aos-animate li:nth-child(3)::before {transition-delay: .3s;}
#point .list.aos-animate li:nth-child(4)::before {transition-delay: .6s;}

@media (max-width: 990px) {
    #point .tit {flex-direction: column-reverse;}
    
    #point .list ul {align-items: flex-start;}
    #point .list li {width: 100%; }

    #point .list ul::after {display: none;}
    #point .list li::before {position: relative; display: block; top: 0; background-size: contain; width: auto; transform: translateX(-10%); opacity: 0;transition: 0 !important;  transition-delay: 0 !important;}
    #point .list.aos-animate li::before {transform: translateX(0); opacity: 1;}

    #point .list li .inner {padding-top: 1.5625rem; border-top: 1px solid #313131;}
    
    #point .list li:nth-child(1)::before {display: none;}
    #point .list li:nth-child(1) .inner {padding-top: 0; border: 0;}

    #point .container .text:last-child {justify-content: flex-start;}
}

#point2 {height: 51.5625rem; background-image: url(/img/renewal/point_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
#point2 .typingText {width: 16.875rem; display: inline-block; text-align: center;}

@media (max-width: 990px) {
    #point2 {height: 58.5rem;  background-image: url(/img/renewal/point_m_bg.jpg);}
    #point2 .typingText {width: 20.875rem;}
}
@media (max-width: 768px) {
    #point2 .typingText {width: 16.875rem;}
}
@media (max-width: 480px) {
    #point2 .typingText {width: 14.875rem;}
}


#portfolio .container a {width: auto;}
#portfolio .container a .arrow {width: 3.75rem;  background-image: url(/img/renewal/portfolio_arrow.png); height: 2rem; background-position: center; background-position-x: 0%; transition: 1s all; background-size: cover;}
#portfolio .container a:hover .arrow {background-position-x:3.75rem;}

#portfolio .container a h1 {position: relative;}
#portfolio .container a h1:after {content: ''; transition: 1s width; width: 0; position: absolute; z-index: -1; bottom: 1rem; height: 0.625rem;background-color: var(--pointcolor); left: 0;}
#portfolio .container a:hover h1:after {width: 100%;}

@media (max-width: 990px) {
    /* #portfolio .container .visible-sm {display: flex!important;} */
}

#contact .inner {height: 35rem; position: relative;}
#contact .inner::after { content: ''; background-position: 100% 0; background-repeat: no-repeat;    background-size: auto; background-image: url(/img/renewal/contact.jpg);     max-width: 17.5rem;    max-height: 26.875rem;    width: 50%;    height: 90%;    z-index: -1;    position: absolute;    left: 47.5%;    transform: translateX(-50%); top: 0; transition: 1.3s; opacity: 0; filter: blur(30px);     background-size: cover; background-position: center;}
#contact .inner.aos-animate::after {opacity: 1; filter: blur(0);}
#contact .inner>.width60 {position: relative;}
#contact .inner>.width40 h1 {margin-left: -.5rem;}
#contact .inner a {background-color: #1a1a1a; width: 130%; max-width: 25rem; height: 30%;  max-height:  10.1875rem; gap: 1.250rem;}
#contact .inner a:hover img {transform: translateX(0); animation: link2 .9s  linear infinite;}
@keyframes link2 {
    0% {transform: translateX(0);}
    50% {transform: translateX(.75rem);}
    100% {transform: translateX(0);}
}   

@media (max-width: 1240px) {
    #contact .inner {width: 65%;}
}
@media (max-width: 990px) {
    #contact .inner {width: 70%; height: 34rem;}
    #contact .inner::after  {left: 50%;}
    #contact .inner a { width: 100%; gap: 0.625rem;}
    #contact .inner>.width60 {width: 40%; text-wrap: nowrap;}
    #contact .inner>.width60 p,
    #contact .inner>.width60 h1 {text-wrap: nowrap;}
    #contact .inner>.width60::after {right: -75%;}
    #contact .inner>.width40 {width: 60%; align-items: flex-end;}
    #contact .inner>.width40 a img {max-height: 1.875rem;}
}
@media (max-width: 768px) {
    #contact .inner {width: 100%;}
}
@media (max-width: 480px) {
    #contact .inner>.width60 {width: 47.5%;}
    #contact .inner>.width40 {width: 52.5%;}
    #contact .inner a {width: 120%;}
}


#location .tit .underline {position: relative;}
#location .tit .underline::after {content: ''; position: absolute; background-color: var(--pointcolor);  transition: 1.3s ease-in-out; width: 0; height: 0.625rem; left: 0; bottom: 0;}
#location .tit .aos-animate .underline::after {width: 100%;}

#location .root_daum_roughmap {width: 100% !important;}
#location .root_daum_roughmap .wrap_map {height: 25rem;}
#location .root_daum_roughmap .wrap_controllers,
#location .root_daum_roughmap .wrap_btn_zoom,
#location .root_daum_roughmap .map_border { display: none; }



/* 서비스 소개 : 공통 */
.commonBottom .box { position: relative; aspect-ratio: 1/1; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; transition: transform .4s; }
.commonBottom .box a { position: relative; display: block; width: 100%; height: 100%; }
/* .commonBottom .box:hover { transform: translateY(-1rem); } */
.commonBottom .box a > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.commonBottom .box a .off { opacity: 1; transition: opacity .6s; }
.commonBottom .box a .on { opacity: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(5px); transition: opacity .6s; }
.commonBottom .box a .on > * { opacity: 0; transform: translateX(50%); transition: .5s; }
.commonBottom .box:hover .off { opacity: 0; }
.commonBottom .box:hover .on { opacity: 1; transition-delay: .4s; }
.commonBottom .box:hover .on > * { opacity: 1; transform: translateX(0); }
.commonBottom .box:hover .on > h6 { transition-delay: .6s; }
.commonBottom .box:hover .on > h4 { transition-delay: .8s; }
.commonBottom .box:hover .on > p { transition-delay: 1s; }
.commonBottom .box:hover .on > small { transition-delay: 1.2s; }
.commonBottom .box a h4, .commonBottom .box a p { z-index: 5; }
.commonBottom .box a small { text-decoration: underline; text-underline-offset: .5rem; }
.commonBottom .box:nth-child(1)
{ background-image: url(/img/renewal/sub/business/img_common_1.jpg); }
.commonBottom .box:nth-child(2)
{ background-image: url(/img/renewal/sub/business/img_common_2.jpg); }
.commonBottom .box:nth-child(3)
{ background-image: url(/img/renewal/sub/business/img_common_3.jpg); }
.commonBottom .box:nth-child(4)
{ background-image: url(/img/renewal/sub/business/img_common_4.jpg); }
.commonBottom .box:nth-child(5)
{ background-image: url(/img/renewal/sub/business/img_common_5.jpg); }
.commonBottom .box:nth-child(6)
{ background-image: url(/img/renewal/sub/business/img_common_6.jpg); }
@media (max-width:768px){
    .commonBottom .box { aspect-ratio: 5/3; background-size: 100%; }
    .commonBottom .box:hover { transform: none; }
    .commonBottom .box:hover .off { opacity: 1; }
    .commonBottom .box:hover .on { opacity: 0; }
    .commonBottom .box:hover .on > * { opacity: 0; }
    .commonBottom .box:nth-child(1)
{ background-image: url(/img/renewal/sub/business/img_common_1_m.jpg); }
.commonBottom .box:nth-child(2)
{ background-image: url(/img/renewal/sub/business/img_common_2_m.jpg); }
.commonBottom .box:nth-child(3)
{ background-image: url(/img/renewal/sub/business/img_common_3_m.jpg); }
.commonBottom .box:nth-child(4)
{ background-image: url(/img/renewal/sub/business/img_common_4_m.jpg); }
.commonBottom .box:nth-child(5)
{ background-image: url(/img/renewal/sub/business/img_common_5_m.jpg); }
.commonBottom .box:nth-child(6)
{ background-image: url(/img/renewal/sub/business/img_common_6_m.jpg); }
}
@media (max-width:768px){
    .commonBottom .box a small { font-size: 1.25rem; font-weight: 700; }
}