@charset "utf-8";

/* main-visual */
/* .main-visual{padding-top: 120px;} */
.main-visual .main_section{padding-top: 100px;background: rgb(251,112,20); position: relative;
background:
  radial-gradient(circle at top, rgba(255,255,255,0.9), transparent 60%),
  linear-gradient(to bottom, #ffffff, #fff3cc, #ffeab3); overflow: hidden;
height: 800px;/* border-radius: 70px 0 70px 70px; */}
.main-visual .main_section .w1600{height: 100%;align-items: center;justify-content: space-between;}


.main-visual .txt-area{color: #2f2a26;font-family: 'A2Z'; width: 100%; display: flex; flex-direction: column;align-items: center; margin-top: 50px; margin-bottom: 50px;}
.main-visual .txt-area .tit{font-size: 3.75rem;line-height: 1.2;margin-bottom: 30px;padding-right: 20px;word-break: keep-all; text-align: center;}
.main-visual .txt-area .tit b{word-break: keep-all;}
.main-visual .txt-area .txt{font-size: 1.375rem;font-weight: 300;}




.animate{animation: progress-bar 6s linear;}

@keyframes progress-bar {
    from{width: 0;}
    to{width:185px;}
}


.main-visual .img-area{position: absolute;width: 100%;}

/*메인비주얼 이미지요소*/
.main-visual .phone{position: absolute; z-index: 100;  left: 50%;
  transform: translateX(-50%);}
.main-visual .main_phone{position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateZ(0) !important;}
.main-visual .icon_box{display: flex; align-items:center; position: relative; z-index: 101; top: 115px; left: 0; width: 100%; overflow: hidden;}
.main-visual .icon_box .img_wrap{display: flex; width: max-content; animation: scroll-left 60s linear infinite;}
.main-visual .icon_box img{ width: 130px;height: 130px;flex-shrink: 0;display: block;}

@media screen and (max-width: 768px){
.main-visual .main_section{
padding-top: 0; height: 600px;}
.main-visual .txt-area{
margin-bottom: 0;}
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* .phone{top: 110px;left: 260px;} */
.icon1{animation: icon1 0.5s linear 0.3s both;}
@keyframes icon1 {
    0% {
        top: 230px;left: 340px;opacity: 0;
    }
    100% {
        top: 20px;left: 375px;opacity: 1;
    }
}
.icon2{animation: icon2 0.5s linear 0.6s both;}
@keyframes icon2 {
    0% {
        top: 230px;right: 320px;opacity: 0;
    }
    100% {
        top: 70px;right: 147px;opacity: 1;
    }
}
.icon3{animation: icon3 0.5s linear 0.9s both;}
@keyframes icon3 {
    0% {
        top: 230px;right: 290px;opacity: 0;
    }
    100% {
        top: 180px;right: 70px;opacity: 1;
    }
}
.icon4{animation: icon4 0.5s linear 0.3s both;}
@keyframes icon4 {
    0% {
        top: 230px;right: 300px;opacity: 0;
    }
    100% {
        top: 306px;right: 54px;opacity: 1;
    }
}
.icon5{animation: icon5 0.5s linear 0.6s both;}
@keyframes icon5 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 430px;right: 122px;opacity: 1;
    }
}
.icon6{animation: icon6 0.5s linear 0.9s both;}
@keyframes icon6 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 548px;right: 190px;opacity: 1;
    }
}
.icon7{animation: icon7 0.5s linear 0.6s both;}
@keyframes icon7 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 600px;right: 360px;opacity: 1;
    }
}
.icon8{animation: icon8 0.5s linear 0.3s both;}
@keyframes icon8 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 548px;right: 530px;opacity: 1;
    }
}
.icon9{animation: icon9 0.5s linear 0.9s both;}
@keyframes icon9 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 413px;right: 575px;opacity: 1;
    }
}
.icon10{animation: icon10 0.5s linear 0.3s both;}
@keyframes icon10 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 300px;right: 630px;opacity: 1;
    }
}
.icon11{animation: icon11 0.5s linear 0.6s both;}
@keyframes icon11 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 180px;right: 610px;opacity: 1;
    }
}
.icon12{animation: icon12 0.5s linear 0.9s both;}
@keyframes icon12 {
    0% {
        top: 230px;right: 350px;opacity: 0;
    }
    100% {
        top: 62px;right: 497px;opacity: 1;
    }
}


.bubble{background-color: #fff;padding: 10px 15px;color: #000;border-radius: 20px;box-shadow: 0px 3px 6px 0px #00000020;width: auto;position: absolute;text-align: center;opacity: 0;font-weight: 600;line-height: 1.2;z-index: 101;}
.bubble1{top: 273px;left: 160px;}
.bubble1::after{content: '';position: absolute;bottom: -10px;right: 50px;width: 22px;height: 14px;background: url(images/bubble1.png)no-repeat;background-size: contain;}
.bubble2{bottom: 245px;right: 173px;}
.bubble2::after{content: '';position: absolute;bottom: -10px;left: 80px;width: 22px;height: 14px;background: url(images/bubble2.png)no-repeat;background-size: contain;}

@keyframes show {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes pulse {	
	25% {
		opacity: 0.3;
	}
	100% {
		transform: scale(0.6);
	}
}

@keyframes pulse2 {	
	25% {
		opacity: 0.3;
	}
	100% {
		transform: scale(0.8);
	}
}

@keyframes pulse3 {	
	25% {
		opacity: 0.3;
	}
	100% {
		transform: scale(1);
	}
}
@media screen and (max-width:1280px){
	.main-visual .img-area{min-width: 580px;}
	.pulse {width: 500px;top: 80px;left: 50px;}

	.icon{width: 70px;}
	.phone{width: 200px;top: 160px;left: 200px;}

    .icon1{width: 60px !important;}
    @keyframes icon1 {
        0% {
            top: 230px;left: 340px;opacity: 0;
        }
        100% {
            top: 60px;left: 300px;opacity: 1;
        }
    }
    @keyframes icon2 {
        0% {
            top: 230px;right: 270px;opacity: 0;
        }
        100% {
            top: 120px;right: 100px;opacity: 1;
        }
    }
    @keyframes icon3 {
        0% {
            top: 230px;right: 270px;opacity: 0;
        }
        100% {
            top: 200px;right: 50px;opacity: 1;
        }
    }
    .icon4{width: 56px !important;}
    @keyframes icon4 {
        0% {
            top: 230px;right: 270px;opacity: 0;
        }
        100% {
            top: 320px;right: 50px;opacity: 1;
        }
    }
    .icon5{width: 45px !important;}
    @keyframes icon5 {
        0% {
            top: 230px;right: 270px;opacity: 0;
        }
        100% {
            top: 430px;right: 90px;opacity: 1;
        }
    }
    @keyframes icon6 {
        0% {
            top: 230px;right: 350px;opacity: 0;
        }
        100% {
            top: 530px;right: 145px;opacity: 1;
        }
    }
    .icon7{width: 50px !important;}
    @keyframes icon7 {
        0% {
            bottom: 230px;right: 280px;opacity: 0;
        }
        100% {
            bottom: 70px;right: 265px;opacity: 1;
        }
    } 
    .icon8{width: 50px !important;}
    @keyframes icon8 {
        0% {
            bottom: 230px;left: 280px;opacity: 0;
        }
        100% {
            bottom: 100px;left: 150px;opacity: 1;
        }
    }
    @keyframes icon9 {
        0% {
            bottom: 230px;left: 280px;opacity: 0;
        }
        100% {
            bottom: 200px;left: 70px;opacity: 1;
        }
    }
    @keyframes icon10 {
        0% {
            top: 230px;left: 300px;opacity: 0;
        }
        100% {
            top: 313px;left: 62px;opacity: 1;
        }
    }
    @keyframes icon11 {
        0% {
            top: 230px;left: 300px;opacity: 0;
        }
        100% {
            top: 200px;left: 85px;opacity: 1;
        }
    }
    @keyframes icon12 {
        0% {
            top: 250px;left: 120px;opacity: 0;
        }
        100% {
            top: 100px;left: 160px;opacity: 1;
        }
    }


	.bubble1{top: 250px;left: 120px;}
	.bubble2{bottom: 270px;right: 100px;}
}

@media screen and (max-width:1024px){
	.main-visual{margin-top: 100px;}
	.main-visual .w1600{flex-direction: column;padding: 60px 10px;}
	.main-visual .w1600 .txt-area{width: 100%;min-height: 235.25px;}

	.pulse {top: -20px;}
	.phone{top: 20px;}
	
	.icon1,.icon2,.icon7,.icon8{display: none;}

    @keyframes icon3 {
        0% {
            top: 230px;right: 270px;opacity: 0;
        }
        100% {
            top: 0px;right: 80px;opacity: 1;
        }
    }
    @keyframes icon4 {
        0% {
            top: 230px;right: 270px;opacity: 0;
        }
        100% {
            top: 90px;right: 30px;opacity: 1;
        }
    }
    @keyframes icon5 {
        0% {
            bottom: 150px;right: 250px;opacity: 0;
        }
        100% {
            bottom: 75px;right: 30px;opacity: 1;
        }
    }
    @keyframes icon6 {
        0% {
            bottom: 150px;right: 250px;opacity: 0;
        }
        100% {
            bottom: 0px;right: 85px;opacity: 1;
        }
    }

    @keyframes icon9 {
        0% {
            bottom: 150px;left: 250px;opacity: 0;
        }
        100% {
            bottom: 0px;left: 100px;opacity: 1;
        }
    }
    @keyframes icon10 {
        0% {
            top: 230px;left: 250px;opacity: 0;
        }
        100% {
            top: 180px;left: 60px;opacity: 1;
        }
    }
    @keyframes icon11 {
        0% {
            top: 230px;left: 250px;opacity: 0;
        }
        100% {
            top: 100px;left: 50px;opacity: 1;
        }
    }
    @keyframes icon12 {
        0% {
            top: 230px;left: 250px;opacity: 0;
        }
        100% {
            top: 10px;left: 140px;opacity: 1;
        }
    }



	.bubble1{top: 80px;left: 140px;}
	.bubble2{bottom: 90px;right: 100px;}
}

@media screen and (max-width:768px){
	.main-visual{margin-top: 70px;}
	.main-visual .swiper-slide{padding: 40px 0;}
	.main-visual .txt-area .tit{font-size: 3rem;margin-bottom: 10px;}
	.slide-controller{margin-top: 10px;}
	.main-visual .img-area{min-width: 350px;}

	.pulse {top: -50px;left: -70px;}
	.phone{top: 80px;left: 113px;width: 130px;}
	.icon{width: 60px;}

	@keyframes pulse {	
        25% {
            opacity: 0.3;
        }
        100% {
            transform: scale(0.4);
        }
    }
    @keyframes pulse2 {	
        25% {
            opacity: 0.3;
        }
        100% {
            transform: scale(0.6);
        }
    }
    @keyframes pulse3 {	
        25% {
            opacity: 0.3;
        }
        100% {
            transform: scale(0.8);
        }
    }

    @keyframes icon3 {
        0% {
            top: 150px;right: 150px;opacity: 0;
        }
        100% {
            top: 15px;right: 80px;opacity: 1;
        }
    }
    @keyframes icon4 {
        0% {
            top: 150px;right: 150px;opacity: 0;
        }
        100% {
            top: 80px;right: 0px;opacity: 1;
        }
    }
    @keyframes icon5 {
        0% {
            bottom: 150px;right: 150px;opacity: 0;
        }
        100% {
            bottom: 50px;right: 20px;opacity: 1;
        }
    }
    @keyframes icon6 {
        0% {
            bottom: 150px;right: 150px;opacity: 0;
        }
        100% {
            bottom: 0px;right: 100px;opacity: 1;
        }
    }
    @keyframes icon9 {
        0% {
            bottom: 150px;left: 150px;opacity: 0;
        }
        100% {
            bottom: 0px;left: 60px;opacity: 1;
        }
    }
    @keyframes icon10 {
        0% {
            top: 130px;left: 150px;opacity: 0;
        }
        100% {
            top: 250px;left: 0px;opacity: 1;
        }
    }
    @keyframes icon11 {
        0% {
            top: 130px;left: 150px;opacity: 0;
        }
        100% {
            top: 100px;left: 0px;opacity: 1;
        }
    }
    @keyframes icon12 {
        0% {
            top: 130px;left: 150px;opacity: 0;
        }
        100% {
            top: 20px;left: 70px;opacity: 1;
        }
    }


	.bubble1{top: 150px;left: 22px;}
	.bubble2{bottom: 130px;right: 10px;}
}

/* scroll-down */
.scroll-down{height: 115px;display: flex;justify-content: center;align-items: center;width: 100%;flex-direction: column;}
.mouse{max-width: 1.7rem; width: 100%; height: auto;}
.scroll-down span{color: #919191;margin-top: 14px;}

@keyframes scroll {
  0%, 20% {
  transform: translateY(0) scaleY(1);
  }
10% {
  opacity: 1;
  }
  100% {
  transform: translateY(36px) scaleY(2);
  opacity: 0.3;
  }
}

.scroll {
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform;
}

/* main-txt */
.main-txt{margin: 130px auto 200px;font-size: 3.4rem;font-family: 'A2Z';font-weight: 400;line-height: 1.4;text-align: center;letter-spacing: -3%;}
.main-txt .w1600{position: relative;}
.main-txt .w1600::before{content: '';width: 33px;height: 33px;background-color: #FFE9BF;border-radius: 50%;position: absolute;top: -70px;left: 20%;}
.main-txt .w1600::after{content: '';width: 40px;height: 40px;background-color: #FFAE18;border-radius: 50%;position: absolute;bottom: -80px;right: 10%;}



/* main-con */
.main-con{margin: 150px auto;/* background: url(images/main-con1.png) */ no-repeat left center;background-size: 800px;padding: 130px 0;overflow: hidden;}
.main-con .w1600{display: flex;justify-content: space-between;padding: 0 10px;}

.main-con .img-area{width: 45%;}
.main-con .txt-area{width: 40%;}
.main-con .txt-area .tit{font-family: 'A2Z';font-size: 4rem;line-height: 1.3;margin-bottom: 30px;font-weight: 400;}
.main-con .txt-area .txt{font-size: 1.7rem;margin-bottom: 50px;line-height: 1.2;}
.main-con .txt-area .btn-area a{background-color: #000;padding: 13px 25px;color: #fff;font-size: 1.25rem;font-weight: 500;border-radius: 10px;}
.main-con .txt-area .btn-area a:hover{background-color: #F2711C;}

.main-con1 .img-area{position: relative;}
.main-con1 .img-area img{position: absolute;}
.main-con1-1{top: -90px;left: 100px; width: 600px;}
.main-con1-2{top: -130px;left: 550px; width: 200px;}
.main-con1-3{top: -25px;left: 730px; width: 70px;}
.main-con1-4{top: 100px;left: 680px; width: 120px;}
.main-con1-5{top: 230px;left: 450px; width: 200px;}
.main-con1-6{top: 0px;left: 300px; width: 60px;}
.main-con1-7{top: 180px;left: 80px; width: 100px;}

.main-con2{/* background: url(images/main-con2.png) no-repeat right 15% center; */background-size: 500px;}
.main-con2 .txt-area{width: 46%;}
.main-con2 .img-area{position: relative;}
.main-con2 .img-area img{position: absolute;}
.main-con2-1{top: 0;right:33%; width: 50%;}
.main-con2-2{top: -5%;right: 10%; width: 34%;}

@media screen and (max-width:1280px){
	.main-con .txt-area{width: 45%;}
/* .main-con1-1{top: -90px;left: 100px; width: 400px;}
.main-con1-2{top: -120px;left: 430px; width: 150px;}
.main-con1-3{top: -50px;left: 580px; width: 80px;}
.main-con1-4{top: 100px;left: 530px; width: 100px;}
.main-con1-5{top: 130px;left: 300px; width: 140px;}
.main-con1-6{top: -50px;left: 220px; width: 40px;}
.main-con1-7{top: 150px;left: 120px; width: 80px;} */
.main-con1-1{top: 0%;left: 10%; width: 80%; min-width: 200px;}
.main-con1-2{top: -15%;left: 65%; width: 23%; min-width: 100px;}
.main-con1-3{top: 10%;left: 85%; width: 10%; min-width: 50px;}
.main-con1-4{top: 40%;left: 90%; width: 20%; min-width: 70px;}
.main-con1-5{top: 73%;left: 55%; width: 23%; min-width: 90px;}
.main-con1-6{top: 5%;left: 38%; width: 7%; min-width: 30px;}
.main-con1-7{top: 80%;left: 12%; width: 15%; min-width: 50px;}

	.main-con2 .txt-area{width: 55%;}
/* 	.main-con2-1{width: 300px;right:100px}
	.main-con2-2{width: 200px;top: -110px;right: 100px;}
	.main-con2-3{width: 140px;top: 20px;right: 20px;}
	.main-con2-4{width: 60px;top: 195px;right: 10px;}
	.main-con2-5{width: 70px;top: 227px;right: 60px;}
	.main-con2-6{width: 23px;top: 130px;right: 190px;}
	.main-con2-7{width: 25px;top: 200px;right: 350px;} */
}

@media screen and (max-width:1024px){
	.main-txt{margin: 130px auto 100px;}

	.main-con{margin: 0 auto;padding: 100px 0;background-size: 500px;}
	.main-con .w1600{flex-direction: column;gap: 30px;}
	.main-con .w1600 .img-area{/* width: 100%; */height: 300px; width: 50%; margin: 0 auto;}
	.main-con2 .w1600{align-items: center;}
	.main-con2 .w1600 .img-area{margin: 0 !important;}
	.main-con .w1600 .txt-area{width: 100%;text-align: center;}
	.main-con2 .w1600 .txt-area{/* text-align: left; */ margin-bottom: 1rem;}
}

@media screen and (max-width:768px){
	.main-txt{font-size: 3rem;}
	.main-con{background-size: 300px;}
	.main-con .w1600 .img-area{height: 230px;}
	.main-con .txt-area .tit{font-size: 3.3rem;}

/* 	.main-con1-1{width: 200px;top: 0;left: 50px;}
	.main-con1-2{width: 70px;top: 35px;left: 200px;}
	.main-con1-3{width: 50px;top: 0px;left: 250px;}
	.main-con1-4{width: 50px;top: 0;left: 20px;}
	.main-con1-5{width: 25px;top: 80px;left: 160px;}
	.main-con1-6{width: 28px;top: 105px;left: 70px;}
	.main-con1-7{width: 28px;left: 80px;top: 110px;}
	.main-con1-8{width: 80px;top: 138px;left: 2px;}
	.main-con1-9{width: 40px;bottom: 0px;left: 200px;} */

	.main-con.main-con2 .w1600 .img-area{height: 300px;}
/* 	.main-con2-1{width: 200px;right:70px}
	.main-con2-2{width: 120px;top: -10px;right: 90px;}
	.main-con2-3{width: 80px;top: 40px;right: 30px;}
	.main-con2-4{width: 40px;top: 150px;right: 20px;}
	.main-con2-5{width: 40px;top: 180px;right: 50px;}
	.main-con2-6{width: 18px;top: 100px;right: 130px;}
	.main-con2-7{width: 18px;top: 160px;right: 210px;} */
}

@media screen and (max-width: 600px){
.main-con .w1600 .img-area{/* width: 100%; */height: 300px; width: 80%; margin: 0 auto;}

.main-con1-1{left: 0;}
.main-con1-4{left: 80%}
.main-con1-5{top: 55%; left: 45%;}
.main-con1-7{top: 55%}
}

/* bot-txt */
.bot-txt{/* background: url(images/bot-txt-bg.png) no-repeat bottom center; */background:
  radial-gradient(circle at bottom, rgba(255,255,255,0.9), transparent 60%),
  linear-gradient(to top, #ffeab3, #fff3cc, #ffffff);height: 900px;text-align: center;position: relative;}
.bot-txt .txt-area{font-family: 'A2Z';font-size: 4.375rem;line-height: 1.3;margin-bottom: 60px;}
.bot-txt .btn-area a{background-color:#FFAE18 ;padding: 20px 65px;color: #fff;font-size: 1.5rem;font-weight: 500;border-radius: 10px;}
.bot-txt .btn-area a:hover{background-color:#000;}
.bot-img_wrap{display: flex; justify-content: center; align-items:center;}
.bot-txt img{position: absolute;}
.bot-phone{bottom: 0;left: 50%;transform: translateX(-50%);}
.location1{top: 32%;left: 10%;}
.location2{top: 45%;left: 23%;}
.location3{top: 41%;right: 24.5%;}
.location4{top: 33%;right: 5%;}

.bot_img1{top: 45%; left: 42%; transform: translateX(-50%); width: 15%; min-width: 100px;}
.bot_img2{top: 41%; left: 34%; transform: translateX(-50%); width: 15%; min-width: 100px;}

@media screen and (max-width:1280px){
	.bot-phone{width: 400px;}
	.location1{width: 60px;top: 32%;left: 10%;}
	.location2{width: 60px;top: 45%;left: 23%;}
	.location3{width: 60px;top: 41%;right: 24.5%;}
	.location4{width: 60px;top: 33%;right: 5%;}
}

@media screen and (max-width:768px){
	.bot-txt{height: 300px;}
	.bot-txt .txt-area{font-size: 3rem;}
	.bot-txt .btn-area a{padding: 15px 50px;}

	.bot-phone{width: 300px;}
	.location1,.location2,.location3,.location4{display: none;}

	.bot_img1, .bot_img2{display: none;}
}