@charset "UTF-8";
:root{
	--color: #3079fa;

    --fs128: 12.8rem;
    --fs100: 10rem;
    --fs95: 9.5rem;
    --fs96: 9.6rem;
    --fs85: 8.5rem;
    --fs80: 8.0rem;
    --fs75: 7.5rem;
    --fs70: 7.0rem;
    --fs65: 6.5rem;
    --fs60: 6.0rem;
    --fs55: 5.5rem;
    --fs54: 5.4rem;
    --fs52: 5.2rem;
    --fs50: 5.0rem;
	--fs48: 4.8rem;
    --fs45: 4.5rem;
    --fs42: 4.2rem;
	--fs40: 4.0rem;
    --fs38: 3.8rem;
    --fs37: 3.7rem;
    --fs36: 3.6rem;
	--fs35: 3.5rem;
    --fs32: 3.2rem;
    --fs30: 3.0rem;
    --fs29: 2.9rem;
	--fs28: 2.8rem;
	--fs27: 2.7rem;
    --fs26: 2.6rem;
	--fs25: 2.5rem;
    --fs24: 2.4rem;
    --fs23: 2.3rem;
	--fs22: 2.2rem;
    --fs21: 2.1rem;
	--fs20: 2.0rem;
	--fs19: 1.9rem;
    --fs18: 1.8rem;
    --fs17: 1.7rem;
    --fs16: 1.6rem;
    --fs15: 1.5rem;
	--fs14: 1.4rem;
}

/* 공통 */
.box_wrap {display: flex; align-items: center;}

/* ########### 메인 페이지 ########### */
/* 공통 */
.pc {display: block !important;}
.mob {display: none !important;}
.title {text-align: center;}
.title h1 {font-size: var(--fs40); font-weight: 700; line-height: 1.5;}
.title h2 {font-size: var(--fs38); font-weight: 700; line-height: 1.5;}
.title h1 b {color: var(--color);}
.title h2 b {color: var(--color);}
.title p {font-size: var(--fs20); line-height: 1.4; color: #494949; margin-top: 30px;}
.title span {font-size: var(--fs20); color: #2084fe; display: inline-block; margin-bottom: 12px;  font-weight: 700; }

@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    .title h1 {font-size: var(--fs45);}
    .title h2 {font-size: var(--fs45);}
    .title p {font-size: var(--fs24);}
    .title span {font-size: var(--fs24); }
}
@media all and (max-width: 768px) {
    .pc {display: none !important;}
.mob {display: block !important;}
.title p br {display: none;}
}
@media all and (max-width: 600px) {
}
/* 공통 끝 */


.file_box {text-align: right;}
.file_box img {max-width: 374px; width: 60%; height: auto; position: relative; top: -5px;}

#section1 .common {padding-bottom: 120px;}
#section1 .title { padding-top: 130px; background: url(../img/section1_title.png)no-repeat; background-size: 50%; background-position: center top; }
#section1 .de_txt {padding-bottom: 180px;}
 #section1 .de_txt h6 {
    text-align: center; font-size: 9rem; font-weight: 700; background: url(../img/section1_txt.png) no-repeat center center; background-size: cover; background-attachment: fixed; /* 배경 픽스 효과 */ -webkit-background-clip: text; /* 텍스트에만 배경 클립 */-webkit-text-fill-color: transparent; /* 텍스트 투명 처리 */
  }
#section1 .box_wrap {margin: 0 auto; margin-top: 80px; max-width: 955px; gap: 15px 2%; flex-wrap: wrap;}
#section1 .box_wrap .box { background: #f3f8ff; border-radius: 4px; text-align: center; width: 49%;}
#section1 .box_wrap .box p {font-size: var(--fs32); font-weight: 700; color: #0c2a5f; line-height: 160px;}
#section1 .scroll-al {display: flex; flex-direction: column; align-items: center;   margin-top: 120px;}
#section1 .scroll-al .img1 {animation: fadein 1s linear infinite ;}
#section1 .scroll-al .img2 {animation: fadein 1s linear infinite ; animation-delay: 0.5s;}

/* 애니메이션 */
@keyframes fadein {
    0% {opacity: 1;}
    100% {opacity: 0;}
}


@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    #section1 .common {padding-bottom: 60px;}
    #section1 .title {padding-top: 90px;}
    #section1 .de_txt {padding-bottom: 90px;}
    #section1 .de_txt h6 {font-size: 6rem;}
    #section1 .box_wrap {margin-top: 60px;}
    #section1 .scroll-al {margin-top: 60px;}
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 600px) {
    #section1 .box_wrap {gap: 5px 2%;}
    #section1 .title {padding-top: 70px; background-size: 80%;}
    #section1 .box_wrap .box p {font-size: var(--fs24); line-height: 80px;}
}

#section2 .common {padding-top: 0;}
#section2 .title {}
#section2 .title span {font-size: var(--fs38); color: #fff; background: var(--color); padding: 0 18px; line-height: 55px; font-weight: 700;}
#section2 .slide_box1 {margin-top: 80px;}
#section2 .slide_box2 {margin-top: 20px;}

#section3 .swiper-slide img {width: 100%; height: auto;}
#section3 .slide_box {margin-top: 80px;}

@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    #section2 .slide_box1 {margin-top: 60px;}
    #section3 .slide_box {margin-top: 60px;}
}
@media all and (max-width: 768px) {
    #section2 .title span {line-height: 40px; margin-bottom: 5px; padding: 0 10px;}
}
@media all and (max-width: 600px) {
}
#section4 .common {padding-bottom: 200px;}
#section4 .box_wrap {margin-top: 80px; justify-content: space-between; flex-wrap: wrap; gap: 60px 0; align-items: start;}
#section4 .box_wrap .box {width: 31%; text-align: center;}
#section4 .box_wrap .box img {width: 100%;  height: auto;}
#section4 .box_wrap .box span {font-size: var(--fs20); font-weight: 800; color: var(--color); padding-top: 25px; display: inline-block;}
#section4 .box_wrap .box h6 {font-size: var(--fs24); font-weight: 700; padding: 15px 0 10px 0;}
#section4 .box_wrap .box p {font-size: var(--fs18); line-height: 1.5; color: #a6a6a6; }

#section5 .common {padding: 200px 0;}
#section5 {background: #051b38;}
#section5 .title h1 {color: #fff;}
#section5 .box_wrap {margin-top: 80px; justify-content: space-between; flex-wrap: wrap;}
#section5 .box_wrap .box {width: 30%; display: flex; flex-direction: column; gap: 35px 0 ; align-items: start;}
#section5 .box_wrap .box img {width: 100%; height: auto;}

@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
    #section4 .box_wrap .box p br {display: none;}
}
@media all and (max-width: 1024px) {
    #section4 .common {padding-bottom: 120px;}
    #section4 .box_wrap {margin-top: 60px;} 
    #section5 .common {padding: 120px 0;}
    #section5 .box_wrap {margin-top: 60px;} 
}
@media all and (max-width: 900px) {
    #section4 .box_wrap .box {width: 49%;}
}
@media all and (max-width: 768px) {
    #section4 .box_wrap .box span {font-size: var(--fs28);}
    #section4 .box_wrap .box h6 {font-size: var(--fs30); padding: 5px 0 5px 0;}
    #section4 .box_wrap .box p {font-size: var(--fs24);}

    #section5 .box_wrap .box {width: 32%; gap: 15px 0;}

}
@media all and (max-width: 600px) {
    #section4 .box_wrap .box {width: 100%;}
    #section5 .box_wrap .box {width: 49%; gap: 8px 0;}
    #section5 .box_wrap .bot_box {flex-direction: row; justify-content: space-between; margin-top: 8px;}
    #section5 .box_wrap .bot_box img:first-child {margin-right: 8px;}
}


#banner .common {padding: 100px 0 0 0;}
#banner .title {text-align: left;}
#banner .box_wrap {justify-content: space-between;}
#banner .box_wrap .img_box {text-align: right;}
#banner .box_wrap .img_box img {max-width: 610px; width: 100%; height: auto;}
#banner .title .link_box {display: flex; align-items: center; gap: 0 10px; margin-top: 60px;}
#banner .title .link_box a{width: 130px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #333; color: #fff; font-size: 17px; font-weight: 600;}

@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
    #banner .common {padding: 60px 0 0 0;}
}
@media all and (max-width: 1024px) {
    #banner .box_wrap {flex-wrap: wrap;}
    #banner .box_wrap .img_box {width: 100%; text-align: center; margin-top: 60px;}
    #banner .box_wrap .title {width: 100%; text-align: center;}
    #banner .title .link_box {justify-content: center; margin-top: 30px;}
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 600px) {
}

/* ########### 서브 페이지 ########### */
/* 회사소개 */
#intro .box_wrap {justify-content: space-between; padding: 55px 90px; background: #f9f9f9; border-radius: 19px;}
#intro .box_wrap .txt {width: 100%;}
#intro .box_wrap p {font-size: var(--fs22); line-height: 1.5; color: #333;     word-break: auto-phrase; text-align:center;}
#intro .box_wrap p b {color: var(--color);}
#intro .txt_box .title { padding-top: 130px; background: url(../img/section1_title.png)no-repeat; background-size: 50%; background-position: center top;  margin-top: 100px;}
#intro .txt_box .title p:first-child {margin-bottom: 20px;}
#intro .img_box {display: flex; justify-content: center; margin-top: 100px;}
#intro .img_box img {max-width: 1145px; width: 100%; height: auto;}


@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    #intro .box_wrap {padding: 50px 50px; flex-wrap: wrap;}
    #intro .box_wrap .line {display: none;}
    #intro .box_wrap .txt {width: 100%;}
    #intro .box_wrap .img {width: 100%; margin-bottom: 30px; text-align: center;}
    #intro .box_wrap p {text-align: center; font-size: var(--fs22); }
    #intro .box_wrap .img img { max-width: 306px; width: 65%;}

    #intro .txt_box .title { padding-top: 90px;}
    #intro .txt_box .title p br {display: none;}
    #intro .img_box {margin-top: 60px;}
    #intro .img_box img {width: 90%;}
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 600px) {
    #intro .box_wrap {padding: 30px 20px;}
    #intro .txt_box .title { padding-top: 70px; background-size: 80%;}
}
#ci .title p b {}
#ci .title p span {font-weight: 700; color: var(--color);}
#ci .img_box {margin-top: 50px;}
#ci .img_box .top_img {text-align: center; background: #f7f7f7; border: 1px solid #d9d9d9; line-height: 269px; margin-bottom: 32px;}
#ci .img_box .top_img img {max-width: 319px; width: 100%; height: auto;}
#ci .img_box .box_wrap {justify-content: space-between; padding: 40px 50px;  border: 1px solid #d9d9d9;}
#ci .img_box .box_wrap .box {width: 29%;}
#ci .img_box .box_wrap .box .color {height: 110px;}
#ci .img_box .box_wrap .box .color1 {background: #5ec7fe;}
#ci .img_box .box_wrap .box .color2 {background: #2f79fb;}
#ci .img_box .box_wrap .box .color3 {background: #1235aa;}
#ci .img_box .box_wrap .box .txt {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
#ci .img_box .box_wrap .box .txt p {font-weight: 700; font-size: var(--fs22);}
#ci .img_box .box_wrap .box .txt span {font-weight: 500; color: #999999; font-size: var(--fs16); display: inline-block;}
#ci .img_box .logo_box {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 40px;}
#ci .img_box .logo_box .box {width: 49.6%; text-align: center;}
#ci .img_box .logo_box .box img {width: 100%; height: auto;}
#ci .img_box .logo_box .box p {font-weight: 500; color: #686868; font-size: var(--fs20); margin-top: 30px;}

@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    #ci .img_box .top_img {line-height: 200px;}
    #ci .img_box .top_img img {max-width: 200px;}
    #ci .img_box .box_wrap {padding: 25px 20px;}
}
@media all and (max-width: 768px) {
    #ci .img_box .box_wrap .box .color {height: 60px;}
}
@media all and (max-width: 600px) {
    #ci .img_box .box_wrap {padding: 15px;}
    #ci .img_box .top_img {line-height: 150px;}
    #ci .img_box .box_wrap .box {width: 31%;}
    #ci .img_box .box_wrap .box .color {height: 45px;}
    #ci .img_box .logo_box {flex-wrap: wrap; gap: 30px 0;}
    #ci .img_box .logo_box .box {width: 100%;}
    #ci .img_box .logo_box .box p {margin-top: 15px;}
}

#history .title {margin-bottom: 120px;}
#history .box_wrap {justify-content: space-between; align-items: start; margin-bottom: 80px;}
#history .box_wrap:last-child {margin-bottom: 0;}
#history .year_box {width: 48%;}
#history .txt_box {width: 51.65%; margin-top: 2%;}
#history .txt_box li {display: flex; align-items: start; margin-bottom: 80px;}
#history .txt_box li:last-child {margin-bottom: 0;}

#history .year_box {padding: 0 100px;}
#history .year_box span {font-weight: 700; font-size: var(--fs80); color: #f1f4fe;   -webkit-text-stroke: 1px #3079fa;  text-stroke: 1px #3079fa;  text-shadow: 1px 1px 0 #3079fa, -1px 1px 0 #3079fa,  1px -1px 0 #3079fa, -1px -1px 0 #3079fa; }
#history .txt_box li .num {width: 45px; text-align: center;}
#history .txt_box li .num span  {font-weight: 700; font-size: var(--fs32); color: #1234aa; }
#history .txt_box li .txt {}
#history .txt_box li .txt p  {font-weight: 500; font-size: var(--fs20); color: #494949; line-height: 1.7; }
#history .txt_box li .txt p:first-child {margin-bottom: 10px;}



#history .left .txt_box li {justify-content: right;}
#history .left .txt_box li .txt p {text-align: right;}
#history .left .txt {margin-right: 60px; }
#history .right li .txt {margin-left: 60px;}
#history .right .year_box {text-align: right;}

@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    #history .txt_box li .txt p { font-size: var(--fs22);}
}
@media all and (max-width: 768px) {
    #history .title {margin-bottom: 60px;}
    #history .box_wrap {margin-bottom: 60px; flex-wrap: wrap;}
    #history .year_box {width: 100%; text-align: center !important; order: 1;}
    #history .txt_box {width: 100%; margin-top: 40px; order: 2;}
    #history .txt_box li {margin: 0 auto; margin-bottom: 40px; max-width: 370px; width: 100%;}
    
    #history .year_box {padding: 0 0;}
    #history .txt_box li .num {margin-right: 15px; order: 1;}
    #history .txt_box li .txt {order: 2;}
    #history .left .txt_box li {justify-content: left;}
    #history .left .txt_box li .txt p {text-align: left;}
    #history .right li .txt {margin-left: 0;}
    #history .left .txt {margin-right: 0; }
}
@media all and (max-width: 600px) {
    #history .txt_box li .num {margin-right: 5px;}
    #history .txt_box li {margin-bottom: 10px;}
}
/* 서비스 소개 */
.layout01 .img_wrap {position: relative; height: 400px; margin: 60px 0 120px 0;}
.layout01 .img_wrap::before {content: ''; position: absolute; background: url(../img/service1_img1.png)no-repeat; left: 0; top: 0; background-position: center; background-size: cover; width: 100%; height: 100%; z-index: 1;}
.layout01 .img_wrap .logo_box {position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 0 60px; flex-wrap: wrap; height: 100%;}
.layout01 .img_wrap .logo_box img:last-child {margin-top: 25px;}
.layout01 .box_wrap {justify-content: space-between; flex-wrap: wrap;}
.layout01 .box_wrap .txt_box {width: 50%;}
.layout01 .box_wrap .img_box {width: 50%; text-align: right;}
.layout01 .box_wrap .txt_box span {font-size: var(--fs20); font-weight: 700; color: #2084fe; display: inline-block;}
.layout01 .box_wrap .txt_box h6 {font-size: var(--fs38); font-weight: 700; margin: 12px 0 25px 0; line-height: 1.3;}
.layout01 .box_wrap .txt_box p {font-size: var(--fs18); line-height: 1.6; color: #494949;}
.layout01 .box_wrap .img_box img {max-width: 610px; width: 100%; height: auto;}
#service2 .img_wrap::before {content: '';background: url(../img/service2_img1.png)no-repeat;position: absolute;  left: 0; top: 0; background-position: center; background-size: cover; width: 100%; height: 100%; z-index: 1; }
#service2 .box_wrap1 {margin-bottom: 80px;}
@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
.layout01 .box_wrap .txt_box {width: 100%; text-align: center;}
.layout01 .box_wrap .img_box {width: 100%; text-align: center; margin-top: 40px;
}
}
@media all and (max-width: 1024px) {
.layout01 .img_wrap {height: 300px; margin: 60px 0 60px 0;}
.layout01 .img_wrap .logo_box {flex-wrap: wrap; flex-direction: column; gap: 40px 0;}
.layout01 .img_wrap .logo_box img:last-child {margin-top: 0;}
.layout01 .box_wrap .txt_box span {font-size: var(--fs22); }
.layout01 .box_wrap .txt_box h6 {font-size: var(--fs45);}
.layout01 .box_wrap .txt_box p {font-size: var(--fs22);}
#service2 .box_wrap1 {margin-bottom: 60px;}
}

@media all and (max-width: 768px) {
}
@media all and (max-width: 600px) {
    .layout01 .img_wrap .logo_box img {height: auto ; width: 70%;}
    .layout01 .box_wrap .txt_box p br {display: none;}
}
@media all and (max-width: 450px) {
    .layout01 .box_wrap .txt_box p {text-align: left;}
}



#service3 .box_wrap{justify-content: space-between; flex-wrap: wrap; margin-top: 40px; flex-wrap: wrap;}
#service3 .box_wrap .img_box{width: 30%;}
#service3 .box_wrap .txt_box{text-align: center; width: 70%; display: flex; flex-wrap: wrap; gap: 15px 2%;}
#service3 .box_wrap .img_box img {max-width: 360px; width: 90%; height: auto;}
#service3 .box_wrap .txt_box .box {width: 49%; background: #f3f8ff; border-radius: 4px; padding: 30px 0;}
#service3 .box_wrap .txt_box h6 {font-size: var(--fs24); color: #0c2a5f; font-weight: 700; margin-bottom: 20px; }
#service3 .box_wrap .txt_box h6 img {margin-right: 10px; padding-bottom: 5px;}
#service3 .box_wrap .txt_box p {font-size: var(--fs20); font-weight: 500; line-height: 1.4; color: #686868;}

@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    #service3 .box_wrap .img_box{width: 100%; text-align: center;}
#service3 .box_wrap .txt_box{width: 100%; margin-top: 40px;}
#service3 .box_wrap .txt_box h6 {font-size: var(--fs30);}
#service3 .box_wrap .txt_box p {font-size: var(--fs22);}
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 600px) {
    #service3 .box_wrap .txt_box .box {width: 100%;}
}
#service4 .box_wrap {justify-content: space-between; flex-wrap: wrap; margin-top: 40px;}

#service4 .box_wrap .img_box {width: 100%; height: auto;}
#service4 .box_wrap .box {text-align: center; width: 32%; border-radius: 4px; border: 1px solid #f0f1f2; box-shadow: 0 11px 18px rgba(150, 150, 150, 0.15);}
#service4 .box_wrap .img_box img {width: 100%}
#service4 .box_wrap .txt_box {padding: 30px 0;}
#service4 .box_wrap .txt_box span{font-size: var(--fs18); color: #a6a6a6;}
#service4 .box_wrap .txt_box p{font-size: var(--fs24); margin-top: 10px; font-weight: 700;}


@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
    #service4 .box_wrap .txt_box span{font-size: var(--fs22);}
#service4 .box_wrap .txt_box p{font-size: var(--fs30);}
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 600px) {
    #service4 .title h2 b {display: block;}
    #service4 .box_wrap {gap: 20px 0;}
    #service4 .box_wrap .box {width: 100%;}
    #service4 .box_wrap .txt_box {padding: 20px;}
}

/* 퀵배너  */
.quick_banner {position: fixed; right: 60px; bottom: 60px; z-index: 999;}
#top_btn {border: none; background: none;}
@media all and (max-width: 1320px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 1024px) {
}
@media all and (max-width: 768px) {
    .quick_banner {right: 20px; bottom: 20px;}
    .quick_banner a {margin-bottom: 10px;}
}
@media all and (max-width: 600px) {
}

/* wow 애니메이션 커스텀 */
@keyframes clipR {
    0% {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
    100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}

.clipR {
    animation-name: clipR;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}