/*
    *************************** 공통 ****************************
*/
.pageOutWrap {width: 100%;}
.contentWrap {width: 100%; max-width: 1280px; margin: 0 auto; position: relative}
.grid{display: flex;flex-wrap: wrap;}
.gridCell{box-sizing: border-box;width: calc(100% / 4);border: 0 solid transparent;}

/*
    *************************** header ****************************
*/
.header {height: 85px; background: #fff; position: fixed;top: 0px;z-index: 100; box-sizing: border-box; box-shadow: 4px 4px 15px 0px rgba(189, 205, 209, 0.25);}
.headerWrap {display: flex; justify-content: space-between; max-width: 1200px; width: 100%; height: 100%; margin: 0 auto;}
.header .logo {display: flex; align-items: center;}
.header .headerMenu {display: flex; justify-content: space-around; background: #fff;}
.header .headerMenu a {display: flex; align-items: center; justify-content: center; font-family: "PoppinsM"; font-size: 18px; color: #202020; padding: 0 35px;}
.header .headerMenu a:last-child{padding-right: 0px}

/*
    *************************** footer ****************************
*/
.footer {display: flex; align-items: center; padding: 50px 0px;background: #071F27; overflow: hidden}
.footer .contentWrap {display: flex; align-items: center; gap: 70px; max-width: 1200px}
.footer .mainText{color: #30AFCC;font-family: "PoppinsM";font-size: 18px;}
.footer .subText{color: #EAEAEA;font-family: "PretendardM";font-size: 16px; opacity: 0.5;}
.footer .subText span{display: inline-block}
.footer .textWrap{display: flex;align-items: center;justify-content: flex-start;gap: 10px;}
.footer .line{width: 1px;height: 58px;opacity: 0.15;background: #FFF;}


/*
    *************************** 메인페이지 ****************************
*/

/*
    cl_mainVisual 메인 공통
*/
.cl_mainVisual {position: relative;}
.cl_mainVisual .mainVisual{background: url("../images/mainVisualbg.png") no-repeat top / cover;position: relative; overflow: hidden;padding: 102px 0 101px 0;box-sizing: border-box;margin-top: 85px;}

.mainVisualobject{position: absolute;}
.mainVisualobject1{left: 50.7%;animation-name: aniEvt-TopToBtm;animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
@keyframes aniEvt-TopToBtm { 0% { top:  -173px} 50% { top: -141.77px;} 100% { top: -173px;} }
.mainVisualobject2{left: 59.8%;animation-name: aniEvt-TopToBtm2;animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
@keyframes aniEvt-TopToBtm2 { 0% { top:  -47px} 50% { top: -75px;} 100% { top: -47px;} }

.cl_mainVisual .mainVisualText {margin-left: 40px; margin-bottom: 40px}
.cl_mainVisual .mainVisualText .mainVisualTopText{font-family: "PoppinsM"; font-size: 65px; color: #1A1A1A; line-height: 79px; margin-bottom: 20px; letter-spacing: 0px}
.cl_mainVisual .mainVisualText .mainVisualBotText{position: relative; font-family: "PretendardSB"; font-size: 24px; color: #000000; line-height: normal;letter-spacing: 0px}

.cl_mainVisual .scrollBtnWrap {display: flex; gap: 20px; margin-left: 40px; }

.cl_mainVisual .scrollBtnWrap .scrollBtn{font-family: "PoppinsM"; font-size: 18px; text-align: center;align-content: center; width: 170px; height: 50px; border-radius: 25px; box-sizing: border-box; line-height: 1; letter-spacing: 0px; cursor: pointer;}
.cl_mainVisual .scrollBtnWrap .scrollBtn.aboutUs{background-color: #30AFCC;color: #fff;}
.cl_mainVisual .scrollBtnWrap .scrollBtn.partners{border: 2px solid #30AFCC;color: #30AFCC;}

/*
    **************************** fullContentWrap content ****************************
*/
.fullContentWrap.content{width: 100%;background: url("../images/bg.png") no-repeat center;background-size: cover;}

/*
    **************************** Our Service ****************************
*/
.gridWrapper .grid .gridCell .mainText{font-size: 24px;line-height: 1;letter-spacing: 0px;font-family: "PoppinsSB";margin-bottom: 10px;}
.gridWrapper .grid .gridCell .subTextWrap .subText{position: relative;font-size: 18px;line-height: 26px;letter-spacing: 0px;font-family: "PoppinsM";}
.ourService .gridWrapper .grid .gridCell .subTextWrap .subText{margin-left: 15px; line-height: normal}

.fullContentWrap .contentWrap{padding-top: 120px;}
.fullContentWrap .contentWrap .cl_sectionTitle{display: flex;flex-direction: column;align-items: center;width: auto;text-align: center;line-height: 1;letter-spacing: 0px;margin-bottom: 60px;}
.fullContentWrap .contentWrap .cl_sectionTitle .mainText{font-size: 38px; line-height: 45px;margin-bottom: 20px;position: relative; font-family: "PoppinsSB"}
.fullContentWrap .contentWrap .cl_sectionTitle .mainText:after{content: '';position: absolute;top: 33px;left: 0px;z-index: -1;width: 100%;height: 10px;background: linear-gradient(90deg, #68DCFF 0%, #FFCEB2 100%);}
.fullContentWrap .contentWrap .cl_sectionTitle .subText{font-size: 18px;color: #8E9B9F; line-height: 26px; font-family: "PretendardM";}

.ourService .gridWrapper .grid{gap: 20px;flex-wrap: nowrap;flex-direction: row; padding: 0px 20px}
.ourService .gridWrapper .grid .gridCell{height: 400px;color: #fff;}
.ourService .gridWrapper .grid .gridCell .imgWrap{display: flex;flex-direction: column;justify-content: flex-end;border-radius: 25px; width: 100%; height: 100%}
.ourService .gridWrapper .grid .gridCell .imgWrap .textWrap{padding: 30px 20px;}
.ourService .gridWrapper .grid .gridCell:first-child .imgWrap{background: url("../images/main1_1.png") no-repeat; background-size: cover}
.ourService .gridWrapper .grid .gridCell:nth-child(2) .imgWrap{background: url("../images/main1_2.png") no-repeat; background-size: cover}
.ourService .gridWrapper .grid .gridCell:nth-child(3) .imgWrap{background: url("../images/main1_3.png") no-repeat; background-size: cover}
.ourService .gridWrapper .grid .gridCell:last-child .imgWrap{background: url("../images/main1_4.png") no-repeat; background-size: cover}
.ourService .subTextWrap .subText:before{content: '';width: 5px;height: 5px;border-radius: 100%;background-color: #FFF;position: absolute;top: 50%;left: -10px;transform: translateY(-50%);}

/*
    **************************** With Partners ****************************
*/
.withPartners{padding-bottom: 140px;}
.withPartners .gridWrapper .grid{justify-content: space-between; padding: 0px 40px}
.withPartners .gridWrapper .grid .gridCell{width: 385px; height: 280px; padding: 30px;display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;border-radius: 20px;background: #fff;box-shadow: 4px 4px 15px 0px rgba(189, 205, 209, 0.25);margin-bottom: 20px;}
.withPartners .gridWrapper .grid .gridCell .imgArea{display: flex;justify-content: space-between;width: 100%; height: 100px}
.withPartners .gridWrapper .grid .gridCell .imgArea>img{height: 100%;}
.withPartners .gridWrapper .grid .gridCell .imgArea .linkBtn{cursor: pointer;}
.withPartners .gridWrapper .grid .gridCell .mainText{font-family: 'PretendardSB'}
.withPartners .gridWrapper .grid .gridCell .subTextWrap .subText {font-family: 'PretendardM';letter-spacing: -0.5px; color: #575757}

/*
    *************************** Contact Form ****************************
*/
.fullContentWrap.contactForm{background: url("../images/contactform.png") no-repeat top / cover;padding: 67px 0;box-sizing: border-box;border-radius: 100px 0px 0px 0px;}
.fullContentWrap.contactForm .contentWrap{padding: 0px}
.fullContentWrap.contactForm .cl_sectionTitle .mainText:after{display: none;}
.fullContentWrap.contactForm .cl_sectionTitle{margin-bottom: 50px}
.fullContentWrap.contactForm .contentWrap .cl_sectionTitle .mainText {margin-bottom: 15px}
.fullContentWrap.contactForm .cl_sectionTitle, .fullContentWrap.contactForm .cl_sectionTitle .subText{color: #fff;}
.inputArea{display: flex;justify-content: space-between;margin: 0px auto 50px auto;max-width: 1200px;width: 100%;}
.inputArea .input input{color: #fff;}
.inputArea .input.left{display: flex;flex-direction: column;gap: 15px;width: 520px}
.inputArea .input.left input{width: 100%;height: 50px;padding: 20px; border-radius: 10px;background: rgba(255, 255, 255, 0.25);border: 1px solid rgba(255, 255, 255, 0.40);box-sizing: border-box;font-size: 16px;font-family: "PoppinsM";line-height: 24px;color: #fff;}
.inputArea .input.right{width: 660px;height: 180px;}
.inputArea .input.right textarea{width: 100%;height: 100%;padding: 20px;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.40);background: rgba(255, 255, 255, 0.25);box-sizing: border-box;font-size: 16px;font-family: "PoppinsM";line-height: 24px;color: #fff;}
.inputArea .input input::placeholder{color: #fff;}
.inputArea .input textarea::placeholder{color: #fff;}
.sendBtn{display: flex;justify-content: center;align-items: center;width: 200px;box-sizing: border-box;height: 50px;margin: 0 auto;border-radius: 100px;background: #071F27;cursor: pointer;}
.sendBtn .subText{font-size: 18px;font-family: "PoppinsM";color: #fff;}

@media(max-width:1280px){

    /*
        *************************** 공통 ****************************
    */
    .contentWrap {width: 100%; max-width: 700px; margin: 0 auto;}
    .fullContentWrap .contentWrap{padding-top: 80px;}
    .fullContentWrap .contentWrap .cl_sectionTitle .mainText {font-size: 30px;margin-bottom: 15px; line-height: normal}
    .fullContentWrap .contentWrap .cl_sectionTitle .mainText:after {top: 26px;}
    .fullContentWrap .contentWrap .cl_sectionTitle {margin-bottom: 50px;}
    .fullContentWrap.content{width: 100%;background: url("../images/bg_1280.png") no-repeat center;background-size: cover;}

    /*
        ************************ 헤더 *************************
    */
    .header {height: 70px;}
    .headerWrap {max-width: 700px; width: 100%; height: 100%; margin: 0 auto;}
    .header .headerMenu a {padding: 0 20px;}
    .header .logo {display: flex; align-items: center; width: 119px}
    .header .logo img{width: 100%;}

    /*
        ************************ 메인비주얼 *************************
    */
    .cl_mainVisual {position: relative;}
    .cl_mainVisual .mainVisual{background: url("../images/mainVisualbg_1280.png") no-repeat top / cover; padding: 72px 0px; margin-top: 70px;}
    .cl_mainVisual .mainVisualText {margin-left:  0px; margin-bottom: 30px}
    .cl_mainVisual .mainVisualText .mainVisualTopText{font-size: 50px; line-height: 60px; margin-bottom: 15px; letter-spacing: 0px}
    .cl_mainVisual .mainVisualText .mainVisualBotText{font-size: 18px; line-height: 26px; font-family: 'PretendardM'}

    .cl_mainVisual .scrollBtnWrap {gap: 15px; margin-left: 0px; }
    .cl_mainVisual .scrollBtnWrap .scrollBtn{font-size: 16px; width: 150px; height: 45px;line-height: 24px;}

    .mainVisualobject1{left: 55.4%;animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
    .mainVisualobject1 img{width: 341px;}
    @keyframes aniEvt-TopToBtm { 0% { top:  -52px} 50% { top: -58px;} 100% { top: -52px;} }
    .mainVisualobject2{left: 61.8%;animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
    .mainVisualobject2 img{width: 257px;}
    @keyframes aniEvt-TopToBtm2 { 0% { top: -29px} 50% { top: -11px;} 100% { top: -29px;} }

    /*
       ************************ Our Service *************************
    */
    .gridWrapper .grid .gridCell .mainText{font-size: 22px;margin-bottom: 10px;}

    .ourService .gridWrapper .grid{gap: 20px; padding: 0px; display: flex;flex-wrap: wrap; flex-direction: row;justify-content: center;}
    .ourService .gridWrapper .grid .gridCell{width: 340px; height: 260px;color: #fff;}
    .ourService .gridWrapper .grid .gridCell:first-child .imgWrap{background: url("../images/main1_1_1280.png") no-repeat; background-size: cover}
    .ourService .gridWrapper .grid .gridCell:nth-child(2) .imgWrap{background: url("../images/main1_2_1280.png") no-repeat; background-size: cover}
    .ourService .gridWrapper .grid .gridCell:nth-child(3) .imgWrap{background: url("../images/main1_3_1280.png") no-repeat; background-size: cover}
    .ourService .gridWrapper .grid .gridCell:last-child .imgWrap{background: url("../images/main1_4_1280.png") no-repeat; background-size: cover}
    .ourService .gridWrapper .grid .gridCell .imgWrap .textWrap {padding: 20px 15px;}

    /*
        **************************** With Partners ****************************
    */
    .withPartners{padding-bottom: 62px;}
    .withPartners .gridWrapper .grid{padding: 0px}
    .withPartners .gridWrapper .grid .gridCell{width: 340px; height: 250px;}
    .withPartners .gridWrapper .grid .gridCell .imgArea {height: 80px;}
    .withPartners .gridWrapper .grid .gridCell .imgArea>img{height: 100%;}
    .withPartners .gridWrapper .grid .gridCell .imgArea .linkBtn{cursor: pointer;}
    .withPartners .gridWrapper .grid .gridCell .subTextWrap .subText {font-size: 16px;letter-spacing: -0.8px;}

    /*
        *************************** Contact Form ****************************
    */
    .fullContentWrap.contactForm{background: url("../images/contactform_1280.png") no-repeat top / cover;padding-top: 67px;padding-bottom: 57px;}
    .fullContentWrap.contactForm .contentWrap .cl_sectionTitle {margin-bottom: 40px;}
    .inputArea {flex-direction: column;gap: 15px;margin-bottom: 30px;}
    .inputArea .input.left {width: 100%;}
    .inputArea .input.right {width: 100%;}

    /*
      ************************ footer *************************
    */
    .footer .contentWrap {flex-direction: column;gap: 30px;max-width: 700px;}
    .footer .textWrap {justify-content: center;flex-direction: column;margin-bottom: 20px;}
    .footer .textWrap:last-child{margin-bottom: 0px;}
    .footer .line {display: none;}
}



@media(max-width:768px){
    /*
       ************************ 공통 *************************
    */
    .contentWrap {max-width: 320px;}
    .fullContentWrap .contentWrap {padding-top: 70px;}
    .fullContentWrap .contentWrap .cl_sectionTitle {margin-bottom: 30px;}
    .fullContentWrap .contentWrap .cl_sectionTitle .mainText {font-size: 24px;}
    .fullContentWrap .contentWrap .cl_sectionTitle .mainText:after {top: 22px;}
    .fullContentWrap .contentWrap .cl_sectionTitle .subText {font-size: 14px;line-height: normal;}

    /*
        ************************ header *************************
    */
    .header {height: 70px;}
    .headerWrap {padding: 15px 20px; box-sizing: border-box; max-width: none}
    .header .plusMenu {gap: 10px;}
    .header .plusMenu .xi-plus {display: block; font-size: 23px;}
    .header .plusMenu img {zoom: 80%}
    .showBlockPc{display: none !important;}

    /*
        ****** headerMenu
    */
    .header .headerMenu_m {display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100%; background: #fff; z-index: 999;}
    .header .headerMenu_m .menuBar{display: flex; align-items: center;justify-content: space-between; box-sizing: border-box; padding: 15px 20px; box-shadow: 4px 4px 15px 0px rgba(189, 205, 209, 0.25);
        height: 70px; margin-bottom: 10px}
    .header .headerMenu_m .menuList a {display: block; border-bottom: 1px solid #F0F0F0; box-sizing: border-box}
    .header .headerMenu_m .menuList a {font-family: "PoppinsSB";font-size: 22px;line-height: normal;text-align: center;color: #212121; padding: 20px 0;}

    /*
        ************************ 메인비주얼 *************************
    */
    .cl_mainVisual {position: relative;}
    .cl_mainVisual .mainVisual{background: url("../images/mainVisualbg_m.png") no-repeat top / cover; padding: 248px 0px 80px 0px;}
    .cl_mainVisual .mainVisualText {margin-left:  0px; margin-bottom: 20px}
    .cl_mainVisual .mainVisualText .mainVisualTopText{font-size: 38px; line-height: 45px; text-align: center; font-family: 'PoppinsSB';}
    .cl_mainVisual .mainVisualText .mainVisualBotText{font-size: 18px; line-height: 26px; text-align: center;}
    .cl_mainVisual .scrollBtnWrap {justify-content: center;}

    .mainVisualobject1{left: 50%;transform: translateX(-50%);animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
    .mainVisualobject1 img{width: 268px;}
    @keyframes aniEvt-TopToBtm { 0% { top:  -240.5px} 50% { top: -230.5px;} 100% { top: -240.5px;} }
    .mainVisualobject2{left: 50%;transform: translateX(-50%);animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
    .mainVisualobject2 img{width: 197px;}
    @keyframes aniEvt-TopToBtm2 { 0% { top: -193.89px} 50% { top: -209.28px;} 100% { top: -193.89px} }

    /*
       ************************ Our Service *************************
    */
    .gridWrapper .grid .gridCell .mainText{font-size: 18px;font-family: "PoppinsM";margin-bottom: 5px; line-height: normal}
    .ourService .gridWrapper .grid .gridCell .subText{font-size: 14px; line-height: normal}
    .ourService .gridWrapper .grid .gridCell{width: 300px; height: 200px;color: #fff;}
    .ourService .gridWrapper .grid .gridCell .imgWrap{border-radius: 15px}
    .ourService .gridWrapper .grid .gridCell:first-child .imgWrap{background: url("../images/main1_1_m.png") no-repeat; background-size: cover}
    .ourService .gridWrapper .grid .gridCell:nth-child(2) .imgWrap{background: url("../images/main1_2_m.png") no-repeat; background-size: cover}
    .ourService .gridWrapper .grid .gridCell:nth-child(3) .imgWrap{background: url("../images/main1_3_m.png") no-repeat; background-size: cover}
    .ourService .gridWrapper .grid .gridCell:last-child .imgWrap{background: url("../images/main1_4_m.png") no-repeat; background-size: cover}

    /*
        **************************** With Parters ****************************
    */
    .withPartners.contentWrap{padding: 80px 0px; max-width: 300px}
    .withPartners .gridWrapper .grid {gap: 0px;padding: 0px;display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;}
    .withPartners .gridWrapper .grid .gridCell{height: 195px; padding: 20px; margin-bottom: 10px; border-radius: 15px}
    .withPartners .gridWrapper .grid .gridCell .imgArea{height: 60px !important}
    .withPartners .gridWrapper .grid .gridCell .imgArea .linkBtn{cursor: pointer;}
    .withPartners .gridWrapper .grid .gridCell .imgArea .linkBtn a img{width: 20px; height: 20px}
    .withPartners .gridWrapper .grid .gridCell .textWrap .mainText {font-size: 18px; margin-bottom: 10px;}
    .withPartners .gridWrapper .grid .gridCell .textWrap .subText {font-size: 14px;line-height: normal; letter-spacing: -0.8px;}

    /*
        *************************** Contact Form ****************************
    */
    .fullContentWrap.contactForm{background: url("../images/contactform_m.png") no-repeat top / cover;padding-top: 60px;padding-bottom: 75px; border-radius: 80px 0px 0px 0px}
    .fullContentWrap.contactForm .contentWrap{max-width: 300px;}
    .fullContentWrap.contactForm .contentWrap .cl_sectionTitle {margin-bottom: 25px;}
    .fullContentWrap.contactForm .contentWrap .cl_sectionTitle .mainText {margin-bottom: 10px;}
    .inputArea {flex-direction: column;gap: 10px;margin-bottom: 30px;}
    .inputArea .input.left{gap: 10px;}
    .inputArea .input.left input {font-size: 14px;line-height: normal;padding: 10px 16px;height: 45px;}
    .inputArea .input.right textarea {font-size: 14px;line-height: normal;padding: 10px;height: 180px;}
    .sendBtn {width: 150px;height: 45px;}
    .sendBtn .subText {font-size: 16px;line-height: 24px;}

    /*
        ************************ footer *************************
    */
    .footer {display: flex;align-items: center;padding: 35px 0px;background: #071F27;overflow: hidden;}
    .footer .contentWrap {gap: 0px;max-width: 300px;}
    .footer .logo_f{margin-bottom: 14px}
    .footer .textWrap {margin-bottom: 15px;}
    .footer .cont.left .textWrap:last-child {margin-bottom: 20px;}
    .footer .mainText {font-size: 14px;}
    .footer .subText {font-size: 14px;text-align: center;}
}



@media(max-width:360px) {
    .cl_mainVisual .mainVisual{padding: 255.5px 0px 72.5px 0px;}
    .cl_mainVisual .mainVisual {background: url(../images/mainVisualbg_sm.png) no-repeat top / cover;}

    .mainVisualobject1{left: 8.9%;transform: translateX(0%);animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
    @keyframes aniEvt-TopToBtm { 0% { top:  -240.5px} 50% { top: -230.5px;} 100% { top: -240.5px;} }
    .mainVisualobject2{left: 20%;transform: translateX(0%);animation-duration: 3s;animation-timing-function: linear;animation-iteration-count: infinite;}
    @keyframes aniEvt-TopToBtm2 { 0% { top: -188.89px} 50% { top: -204.82px;} 100% { top: -188.89px} }

    .fullContentWrap.content {background: url(../images/bg_sm.png) no-repeat center;}
    .fullContentWrap.contactForm {background: url(../images/contactform_sm.png) no-repeat top / cover; border-radius: 40px 0px 0px 0px;}
}