@charset "utf-8";

/* common */
#wrap.main{}
#wrap.main section{min-height:100vh;/* min-height:calc(100vh - 100px); */overflow:hidden;}


/* section1 */
.main .sec1{    min-height: calc(100vh - 100px) !important;z-index:1;position:relative;display:flex;align-items:center;flex-direction:column;margin-top:100px;text-align:center;transition: .35s;}
.main .sec1::before{z-index:-1;position:absolute;display:block;width:100%;height:100%;content:'';background: url("../images/main/bg-sec1.png");background-size:cover;animation: bgAni 1.5s ease-in-out alternate;}
.main .sec1 .container{transform: translateY(178px);}
.main .sec1 .main-title1{margin-bottom:40px;color:#FFFFFF;font-size: 62px;font-weight: 700;line-height: 88px;}
.main .sec1 .main-title2{color:#98A2AC;font-size: 24px;font-weight: 700;line-height: 36px;}
.main .sec1 .circle-box{position: absolute;bottom: 4%;width:140px;height:140px;}
.main .sec1 .circle-box::before{width:100%;height:100%;display:block;background-image: url("../images/main/icon-ani-circle.svg");background-size:100%;content:'';animation:circleAni 8s linear infinite;}
.main .sec1 .circle-box i{position:absolute;top:50%;left:50%;transform:translate(-50% ,-50%);-webkit-transform:translate(-50% ,-50%);}

/* 공통 탑 bg ani */
@keyframes bgAni{
	0% {
		width:calc(100% - 60px);transform:translateY(30px);border-radius:50px;
	}
	100% {
		width:100%; transform:translateY(0px);border-radius:0;
	}
}
@keyframes circleAni{
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* section2 */
.main .sec2{z-index:1;height:100vh;display: flex;align-items: center;flex-direction: column;justify-content: center;position:relative;/* background: linear-gradient(180deg, #FFFFFF 0%, #DFF3FF 100%); */text-align: center;transition:all .3s;}
/* .main .sec2.sec2-bg{background: linear-gradient(180deg, #0F1126 0%, #5F67FF 100%);} */
.main .sec2::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;opacity:0.1;width:623px;height:563px;z-index:-1;background: url("../images/main/bg-sec2.png");content:'';background-size:100%;}
.main .sec2.sec2-bg::before{animation: sec2Ani 2s infinite alternate;opacity:1;}
.main .sec2 .main-title1{margin-bottom:40px;font-size: 62px;font-weight: 700;line-height: 88px;}
/* .main .sec2.sec2-bg .main-title1{color:#fff;} */
.main .sec2 .main-title2{color:#646D76;font-size: 24px;font-weight: 700;line-height: 36px;}
/* .main .sec2.sec2-bg .main-title2{color:#fff;} */

@keyframes sec2Ani {
	0% {transform: translate(-50%,-50%);}
	100% {transform: translate(-50%,-30%);}
   }

/* section3 */
.main .sec3{position:relative;z-index:1;padding:143px 0;background-color: #F4F9FF;}
.main .sec3::before{position:absolute;left:0;bottom:0;display:block;z-index: -1;width:369px;height:292px;background: url("../images/main/bg-sec3.png");content:'';    background-size: 100%;}
.main .sec3 .top-box{display:flex;justify-content:space-between;align-items: flex-end;margin-bottom:50px;}
.main .sec3 .top-box .top-title{font-size: 50px;font-weight: 700;line-height: 72px;}
.main .sec3 .bor-tab{display:flex;gap:10px;}

.main .sec3 .solution-list{display: flex;justify-content: space-between;}
.main .sec3 .solution-list .img{display:flex;align-items:center;justify-content:center;width:690px;height:500px;border-radius:100px 30px 30px 30px;background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #DDE3F0 93%);}
.main .sec3.sec3-bg .solution-list .img{-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);visibility: visible;transform: skewY(0);}

.main .sec3 .solution-list .text-box{display:flex;flex-direction:column;gap:5px;padding:50px 0 0;width: calc(100% - 860px);}
.main .sec3 .solution-list .text-box em{font-size: 20px;font-weight: 700;line-height: 30px;color:#434B53;}
.main .sec3 .solution-list .text-box strong{font-size: 62px;font-weight: 700;line-height: 88px;}
.main .sec3 .solution-list .text-box p{color:#646D76;font-size: 18px;font-weight: 500;line-height: 27px;}
.main .sec3 .btm-fix-text{position:absolute;z-index:-2;bottom:0;right:0;font-size: 200px;font-weight: 700;line-height: 120px;color:#EDF2FD;}
.main .sec3 .btn-view-more{display: flex;align-items: center;position:relative;margin-top:40px;padding-left:37px;font-size: 20px;font-weight: 700;line-height: 30px;}
.main .sec3 .btn-view-more::before{display:block;position:absolute;transition:transform .3s;left:0;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);z-index: -1;width:52px;height:52px;border-radius:100%;background:#44AFE3;content:'';}
.main .sec3 .btn-view-more:hover::before{transform: translateY(-50%) scale(1.65);/* animation:scaleAni 0.5s linear alternate infinite; */}
/*@keyframes scaleAni{
	0% {
		transform: translateY(-50%) scale(0.5);
	}
	50% {
		transform:translateY(-50%) scale(1);
	}
	100% {
		transform:translateY(-50%) scale(1.35);
	}
}*/


.main .sec3 .btn-view-more:hover .icon-view-more{transform:translateX(8px);}

/* section4 */
.main .sec4{padding:178px 0;position:relative;z-index:1;background: linear-gradient(0deg, #061530 0%, #12406E 99.03%);}
.main .sec4::before{position:absolute;z-index: -1;right:0;top:0;display:block;width:438px;height:273px;background: url("../images/main/bg-sec4.png");background-size: 100%;content:'';}
.main .sec4 >.container{display: flex;flex-direction: column;gap: 200px;}
.main .sec4 .top-box{display:flex;justify-content:space-between;align-items:flex-end;}
.main .sec4 .top-box .top-title{font-size: 50px;font-weight: 700;line-height: 72px;color:#fff;}
.main .sec4 .top-box .top-text{color:#B8BFC8;font-size: 20px;font-weight: 700;line-height: 30px;}
.main .sec4 .web-sol-list{display:flex;gap:70px;justify-content:space-between;}
.main .sec4 .web-sol-list li{flex:1;/* border:1px solid #1B7BEA; */border-radius:30px;/* background: linear-gradient(180deg, #09203D 0%, #1D4375 100%); */overflow:hidden;}
.main .sec4 .web-sol-list li a{position:relative;display:flex;flex-direction:column;height:280px;padding:30px;overflow:hidden;animation: opacityAni 5s linear alternate infinite}
.main .sec4 .web-sol-list li a strong{display:inline-block;margin-bottom:10px;transition:font .1s;font-size:32px;font-weight: 700;line-height:48px;color:#FFFFFF;}
.main .sec4 .web-sol-list li a em{color:#B8BFC8;}
.main .sec4 .web-sol-list li i.rotate{position:absolute;bottom:30px;right:30px;animation:sec4Ani 3s linear alternate infinite ;}
/* .main .sec4 .web-sol-list li .line{position:absolute;top:0;left:0;width:100%;height:100%;}
.main .sec4 .web-sol-list li .line .line-top {display: inline-block; position: absolute; left:0; top:0; width: 0; height: 3px; border-top:1px solid #1B7BEA;background: linear-gradient(180deg, #09203D 0%, #1D4375 100%); box-shadow: 0px 0px 20px 0px #0078FF;}
.main .sec4 .web-sol-list li .line .line-right {display: inline-block; position: absolute; top:0; right:0; width:3px; height:0; border-right:1px solid #1B7BEA;background: linear-gradient(180deg, #09203D 0%, #1D4375 100%);box-shadow: 0px 0px 20px 0px #0078FF; ;}
.main .sec4 .web-sol-list li .line .line-bottom {display: inline-block; position: absolute; right:0; bottom:0; width: 0; height: 3px; border-bottom:1px solid #1B7BEA;background: linear-gradient(180deg, #09203D 0%, #1D4375 100%);box-shadow: 0px 0px 20px 0px #0078FF;}
.main .sec4 .web-sol-list li .line .line-left {display: inline-block; position: absolute; bottom:0; left:0; width:3px; height:0px; border-left:1px solid #1B7BEA;background: linear-gradient(180deg, #09203D 0%, #1D4375 100%);box-shadow: 0px 0px 20px 0px #0078FF;}
.main .sec4.sec4-bg .web-sol-list li .line .line-top {animation:lineAni2 .85s  ease-out  forwards;}stroke-dasharray: 1000;stroke-dashoffset: 1000;animation:stroke .65s ease-out forwards;filter: drop-shadow(0px 3px 3px rgba(0, 120, 255, 1));
.main .sec4.sec4-bg .web-sol-list li .line .line-right {animation:lineAni1 .65s .65s ease-out  forwards;}
.main .sec4.sec4-bg .web-sol-list li .line .line-bottom {animation:lineAni2 .85s 1.3s ease-out  forwards;}
.main .sec4.sec4-bg .web-sol-list li .line .line-left{animation:lineAni1 .65s 1.95s ease-out  forwards;} */

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes lineAni1 {
	0% {height:0;}
	100% {height:100%;}
}

@keyframes lineAni2 {
	0% {width:0;}
	100% {width:100%;}
}

@keyframes sec4Ani {
	0% {transform: rotate(0deg) scale(0.6);}
	50% {transform: rotate(90deg) scale(1);}
	80% {transform: rotate(180deg) scale(1);}
	100% {transform:rotate(0) scale(0.6);}
  }

/* stroke ani */
.main .sec4 .item-box {position: relative;padding: 40px;border-radius: 30px;transition: background .2s ease-in-out,box-shadow .2s ease-in-out;box-shadow: 0 0 0 1px transparent, 0 2px 4px transparent, 0 12px 24px transparent;height: 100%;z-index: 1;}
.main .sec4 i.stroke {content: "";position: absolute;inset: 1px;padding: 1px;--border-size: 1px;--padding: 1px;--border-bg: conic-gradient(from 180deg at 50% 50%,#09203D 0deg,#1D4375 228.75deg,rgba(27,123,234,1) 360deg);
overflow: hidden;padding: calc(var(--padding) + 1px);border-radius: 30px;display: inline-block;z-index: 0;-webkit-backface-visibility: hidden;backface-visibility: hidden;perspective: 1000px;transform: translateZ(0);
-webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;z-index: -1;border-radius: 30px;}
.main .sec4 i.stroke::before {content: "";display: block;background: var(--border-bg);box-shadow: 0px 0px 20px 0px #0078FF;width: calc(100% * 1.41421356237);padding-bottom: calc(100% * 1.41421356237);position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 100%;z-index: -2;animation: rotateAni 5s linear infinite;}
@keyframes rotateAni {
	0% {transform: translate(-50%,-50%) rotate(360deg)}
	100% {transform: translate(-50%,-50%) rotate(0)}
}
@keyframes opacityAni {
	0% {filter: drop-shadow(0 0 5px rgba(0, 120, 255, 0));}
	100% {filter: drop-shadow(0 0 5px rgba(0, 120, 255, 0.6));}
}
	
/* inquiry-section */
.main .inquiry-section{padding:140px 0;color:#fff;text-align: center;background: url("../images/main/bg-inquiry.png")no-repeat 50% 100%;background-attachment: fixed;background-size: cover;}
.main .inquiry-section .container{display:flex;align-items:center;justify-content:center;flex-direction:column;}
.main .inquiry-section strong{display:inline-block;margin-bottom:10px;font-size: 50px;font-weight: 700;line-height: 72px;}
.main .inquiry-section p{margin-bottom:40px;font-size: 20px;font-weight: 700;line-height: 30px;}
.main .inquiry-section .btn{width:240px;height:56px;color:#0596DB;border-radius:56px;background-color: #fff;font-size: 18px;font-weight: 700;line-height: 27px;}
/* .main .inquiry-section .btn:hover{color:#fff;background-color: #057DB7;} */
.main .inquiry-section .btn:hover i{/* background:url("../images/main/icon-contact-w.svg") */;transform:translateX(-3px);}



/* ----------------------------------media -------------------*/

/* ----------------------------------media 1300px-------------------*/
@media (max-width: 1300px) { 
.main .sec3::before {width: 268px;height: 212px;}
.main .sec3 .top-box .top-title {font-size: 40px;line-height: 60px;}
.main .sec3 .solution-list .img{width: 550px;height: 420px;border-radius: 80px 25px 30px 30px;}
.main .sec3 .solution-list .text-box{width: calc(100% - 668px);}
.main .sec3 .bor-tab li a {padding: 14px 13px;font-size: 20px;line-height: 30px;}
.main .sec3 .btm-fix-text {font-size: 130px;line-height: 90px;}

}

/* ----------------------------------media 1024px-------------------*/
@media (max-width: 1024px) { 
#wrap.main section{;}

.main .sec1{margin-top:68px;}
.main .sec1 .container{padding: 0 5%;}
.main .sec1 .main-title1{font-size: 26px;line-height: 33px;}
.main .sec1 .main-title2{font-size: 18px;line-height: 26px;}
.main .sec1 .circle-box{width:90px;height:90px;}


/* 공통 탑 bg ani */
@keyframes bgAni{
	0% {
		width:calc(100% - 30px);transform:translateY(15px);border-radius:30px;
	}
	100% {
		width:100%; transform:translateY(0px);border-radius:0;
	}
}


.main .sec2::before {width: 380px;height: 343px;}
.main .sec2 .main-title1{font-size: 30px;line-height: 42px;}
.main .sec2 .main-title2{font-size:20px;line-height:32px;}

.main .sec3 .top-box{flex-direction: column;justify-content: center;align-items: center;gap:12px;text-align: center;}
.main .sec3 .top-box .top-title {font-size: 25px;line-height: 35px;}
.main .sec3 .solution-list{flex-wrap:wrap;}
.main .sec3 .solution-list .img {width: 100%;height: 240px;border-radius:20px;}
.main .sec3 .solution-list .text-box{width:100%;}
.main .sec3 .solution-list .text-box em{font-size: 17px;line-height: 25px;}
.main .sec3 .solution-list .text-box strong{font-size: 29px;line-height: 38px;}
.main .sec3 .solution-list .text-box p{font-size: 15px;line-height: 23px;}
.main .sec3 .solution-list .img img{height: 173px;}
.main .sec3 .btm-fix-text {font-size: 108px;line-height: 80px;}
.main .sec3 .btn-view-more{padding-left:22px;margin-top: 20px;font-size: 17px;line-height:40px;}
.main .sec3 .btn-view-more::before{width: 40px;height: 40px;}
.main .sec3 .btn-view-more:hover::before{transform: translateY(-50%) scale(1.4);}

/* section4 */
.main .sec4 {padding: 80px 0;}
.main .sec4 .top-box{flex-wrap: wrap;align-items: center;justify-content: center;text-align: center;gap:12px;}
.main .sec4 >.container {gap: 45px;}
.main .sec4::before {width: 320px;height: 180px;}
.main .sec4 .top-box .top-title{width: 100%;font-size:25px;line-height: 35px;}
.main .sec4 .top-box .top-text {font-size: 15px;line-height: 23px;}
.main .sec4 .web-sol-list{flex-wrap:wrap;gap:20px;}
.main .sec4 .web-sol-list li{flex: auto;width: 100%;}
.main .sec4 .web-sol-list li a{height: 220px;padding: 35px 15px 15px;}
.main .sec4 .web-sol-list li a strong{margin-bottom: 6px;font-size: 23px;line-height: 31px;}
.main .sec4 .web-sol-list li a i{bottom:20px;right:20px;}

.main .inquiry-section {padding: 60px 0;}
.main .inquiry-section strong {margin-bottom: 10px;font-size: 28px;line-height: 36px;}
.main .inquiry-section p {margin-bottom: 22px;font-size: 17px;line-height: 25px;}
.main .inquiry-section .btn {width: 240px;height: 50px;border-radius: 50px;font-size: 16px;line-height: 24px;}

}