/* 메인 */
.section { width:100%; position:relative;}

#main .section .inner {position:relative;}


#visual .swiper {width: 100%; height: 100vh; color: #fff;}
#visual .swiper-slide {width: 100%; height: 100%; background-position: center; background-size: cover; padding-top: 9.8rem; }
#visual .swiper-slide h1 {opacity: .6;}
#visual .visual1 {background-image: url(images/visual.jpg);}

#visual .scroll {    transform: rotate(-90deg);
    display: inline-block;
    position: absolute;
    bottom: 4rem;
    left: 50%;
    font-size: 0.8rem;
    color: #fff;
    letter-spacing: 0.05rem !important;
    z-index: 10;
    margin-left: -15.5rem;}
#visual .scroll::before {content: ""; width: 0.3rem; height: 0.3rem; border-radius: 100%; background-color: #fff; position: relative; top:0.55rem; z-index: 100; display: block; margin-top: 0.25rem; animation: scroll 1s infinite ease-in-out;}
@-webkit-keyframes scroll{
  0% {
    left:-1rem;
    opacity: 1;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    left:-1.75rem;
    opacity: 0;
  }
}

#visual .swiper-pagination {position: absolute !important; bottom: 2rem !important; top: auto !important; pointer-events: all !important;}
#visual .swiper-pagination-bullet {width: 0.9rem !important; height: 0.9rem !important; background-color: #fff !important; opacity: 0.7 !important; border: 0 !important; border-radius: 0.9rem !important; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; pointer-events: all !important;}
#visual .swiper-pagination-bullet-active {width: 2rem !important; background-color: #fff !important; opacity: 1 !important;}


/* .swiper-button-next,.swiper-button-prev {opacity: 0.3; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
.swiper-button-next {right: 1.5rem !important;}
.swiper-button-prev {left: 1.5rem !important;}
.swiper-button-next:hover,.swiper-button-prev:hover {opacity: 1;} */



.link {padding: 0.9rem 1.2rem; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; position: relative; display: inline-block; text-align: center; border: 1px #0e5099 solid; color: #0e5099; font-size: 0.9rem;}
.link:hover {background-color: #fff; color: #000 !important; box-shadow: 0.2rem 0.2rem 0.5rem rgba(0,0,0,0.2); transform: translate(-0.2rem,-0.2rem); font-weight: 600;}
.link::after {content: "\2192"; margin-left: 2rem;}
.link.white {border-color: #fff; color: #fff;}



#section1 {position: relative; padding: 9rem 0; background: url(images/process_bg.png) left -3rem no-repeat; background-size: 25.65rem auto;}
#section1 .process {position: relative;}
#section1 .process .border {position: absolute; width: 0.1rem; height: 100%; left: 50%; z-index: -1; background: linear-gradient(180deg, #e0e0e0 0%, #0e5099 10%, #e0e0e0 20%); background-size: 250% 250%; animation: gradientBorder 3s infinite ease-in;}
@keyframes gradientBorder {
    0% {
     background-position: 0 50%;
    }
    10% {
     background-position: 0 50%;
    }
    100% {
     background-position: 0 -60%;
    }
}
#section1 .process .inner2 {display: flex; flex-direction: column; justify-content: space-around; align-items: center; gap: 3rem;}
#section1 .process .step {display: flex; justify-content: center; gap: 1rem; width: 100%;}
#section1 .process .step > div {flex: 1; display: flex; flex-direction: column; justify-content: center; }
#section1 .process .step > div.right {align-items: flex-end;}
#section1 .process .step .icon {background-position: center; background-repeat: no-repeat; width: 7.5rem !important; height: 7.5rem; border-radius: 100%; background-color: #fff; display: block;}

#section1 .process .step.step1 .icon {background-image: url(images/process_icon1.png); background-size: 2.95rem auto; background-color: #0e5099;}
#section1 .process .step.step2 .icon {background-image: url(images/process_icon2.png); background-size: 2.75rem auto; border: 0.5rem #0e5099 solid;}
#section1 .process .step.step3 .icon {background-image: url(images/process_icon3.png); background-size: 3rem auto; border: 0.5rem #0e5099 solid;}
#section1 .process .step.step4 .icon {background-image: url(images/process_icon4.png); background-size: 2.95rem auto; background-color: #0e5099;}


#section2 {padding-bottom: 7rem;}
#section2 .inner2 .title {width: 100%; display: flex; flex-direction: column; justify-content: flex-start;}

#section2 .swiper-pagination {display: flex; gap: 3rem; position: relative; margin-top: 2rem; margin-bottom: 1.5rem; margin-left: 2.5rem; text-align: left; }
#section2 .swiper-pagination::before {content: ""; width: 100%; height: 0.05rem; background-color: #d0d0d0; position: absolute; left: 0.25rem; top: 0.75rem; z-index: -10;}

#section2 .swiper-pagination * {-webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}

#section2 .swiper-pagination-bullet {width: auto; height: auto; background-color: transparent !important; cursor: pointer; opacity: 1; margin: 0.5rem 0; position: relative;}
#section2 .swiper-pagination-bullet h4 {position: relative; width: auto; top: 1.5rem; left: -0.25rem; line-height: 1.2;}
#section2 .swiper-pagination-bullet h5 {opacity: 0; display: none; top: 5rem;  left: -0.25rem; position: fixed; width: 27rem;}

#section2 .swiper-pagination-bullet::before {content: ""; width: 0.5rem; height: 0.5rem; display: block; border-radius: 1rem; background-color: #333; position: absolute; left: 0; top:0; z-index: 10; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}

#section2 .swiper-pagination-bullet-active h4 {font-size: 1.4rem !important; color: #0e5099; }
#section2 .swiper-pagination-bullet-active h5 {opacity: 1; display: block;}
#section2 .swiper-pagination-bullet-active::before {transform: scale(1.5) translateY(0.015rem); background-color: #0e5099; }

#section2 .swiper {max-width: 30rem; margin: 0;}
#section2 .swiper .swiper-slide img {width: 100%;}



#section3 {}
#section3 .inner2 {border-top: 1px #e0e0e0 solid;}
#section3 .inner2 h1 {font-size: 2.25rem; letter-spacing: 0; font-weight: 400;}
#section3 .tel {background: url(images/contact_tel.png) center 3.5rem no-repeat; background-size: 2.5rem auto; padding-top: 7rem; margin-bottom: 3.5rem;}

#section3 .contact {background: url(images/contact_bg.jpg) bottom center no-repeat #0e5099; background-size: 100% auto; padding: 5rem 0; color: #fff;}




@media only screen and (max-width:640px) {
    .root_daum_roughmap {height: 70.3125vw; zoom: 0.618;}
    .swiper-button-prev,.swiper-button-next {zoom: 0.618;}
}