@charset "UTF-8";

/* 메인 */
body{position: relative;background: #000;color:#fff}
body::after{content: '';position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;background: url(../images/bg_footer.png) no-repeat bottom 268px center;background-size: 100%;z-index: -1;}

.wrap{min-width: 1840px;max-width: 1920px;overflow: hidden;margin: 0 auto;padding-top: 100px;}

header{position: fixed;top:0;left:0;right:0;display: flex;align-items: center;height: 100px;padding:0 85px;background: #000;box-sizing: border-box;z-index: 10;}
header h1 { display: flex;align-items: center;justify-content: center;} 
header h1 a { display: block;width: 120px;height: 40px; background: url(../images/logo.png) no-repeat center; font-size: 0;background-size: 120px;} 
header .btn_menu{margin-left: auto;font-size: 0;display: inline-block;width: 40px;height: 40px;background: url(../images/btn_menu.png) no-repeat center;background-size: 40px;}

section{box-sizing: border-box;}
.sec_inner{position: relative;padding: 0 85px;}

.sec01{padding-bottom: 130px;background: url(../images/bg_sec01.webp) no-repeat top right;/*border-bottom: 2px solid #C7DA01;*/}
.sec01 .sec_inner{padding-top: 400px;}
.sec01 .img_sec01{margin-top: 30px;width: 362px;height: 107px;}
.sec01 .txt_main{font-size: 100px;font-weight: 900;line-height: 130px;}
.sec01 .txt_sub{margin-top: 90px;font-size: 32px;font-weight: 600;line-height: 60px;}

.sec02{padding-top: 176px;}
.sec02 h2{font-size: 64px;font-weight: 900;line-height: 110px;}
.sec02 h2 strong{color:#C7DA01;font-weight: 900;}
.sec02 .txt_sub{margin-top: 100px;font-size: 32px;font-weight: 600;line-height: 60px;}
.sec02 .grp_sec02{position: relative;margin-top: 54px;text-align: right;}
.sec02 .grp_sec02 .img_sec02-1{position: relative;margin-right: -70px;z-index: 1;}
.sec02 .sec_inner:first-child{z-index: 2;}
.sec02 .sec_inner + .sec_inner{margin-top: 380px;}
.sec02 .sec_inner + .sec_inner::before{content:'';position: absolute;top:-520px;right:150px;width: 1102px;height: 1022px;background: url(../images/bg_sec02.png) no-repeat top right;}
.sec02 .sec_inner + .sec_inner h2{line-height: 67px;}

.sec02 .box_ad{position: relative;margin-top: 130px;overflow: hidden;}
.sec02 .ad_sub{position: absolute;top:0;left:0;width: 400px;height: 611px;padding-top: 74px;border: 2px solid #C7DA01;text-align: center;box-sizing: border-box;z-index: 1;}
.sec02 .ad_sub::after{content:'';position: absolute;top:0;left:calc(100% + 1px);border-top:2px solid #C7DA01;width: 400px;transform: rotate(75deg);transform-origin: 0px;}
.sec02 .ad_sub.offline{left: auto;right: 0;}
.sec02 .ad_sub.offline::after{left:auto;right:calc(100% + 1px);transform: rotate(-75deg);transform-origin: 100%;}
.sec02 .ad_sub .tit{font-size: 40px;font-weight: 900;}
.sec02 .ad_sub ul{margin-top: 40px;}
.sec02 .ad_sub ul li{font-size: 28px;font-weight: 600;margin-bottom: 20px;}
.sec02 .ad_main{position: relative;margin: 300px auto 0;width: 1040px;height: 1080px;background: #C7DA01;z-index: 2;text-align: center;padding-top: 200px;box-sizing: border-box;}
.sec02 .ad_main::before{content: '';position: absolute;top: -20px;left: -20px;width: 616px;height: 182px;background: url(../images/img_sec02_tit.png) no-repeat center;}
.sec02 .ad_main .tit{font-size: 64px;font-weight: 900;color: #000;}
.sec02 .ad_main ul{margin-top: 52px;}
.sec02 .ad_main ul li{width: 762px;margin:0 auto 42px;border:2px solid #000;display: flex;align-items: center;justify-content: center;height: 71px;font-weight: 600;font-size: 32px;color:#000;transition: all 0.3s;}
.sec02 .ad_main ul li:hover{background: #000;color:#C7DA01}
.sec02 .grp_btn{padding: 0 85px;text-align: right;margin-top: 70px;}
.sec02 .btn_sec02{position: relative;font-size: 80px;font-weight: 900;background: transparent;color:#fff;padding-right: 76px;}
.sec02 .btn_sec02::before{content: '';position: absolute;left:-124px;top:-30px;width: 120px;height: 53px;background: url(../images/btn_arrow.png) no-repeat center;}
.sec02 .btn_sec02::after{content: '';position: absolute;right:0;top:-14px;width: 50px;height: 50px;border-radius: 50%;background: #C7DA01;}
.box_ani{width: 1900px;margin-top: 200px;animation: text_ani 6s linear infinite;display: flex;}
.txt_ani + .txt_ani{margin-left: 123px;}
.txt_ani{width: 1900px;font-size: 128px;font-weight: 900;-webkit-text-stroke: 3px #C7DA01;color:transparent;white-space: nowrap;}
@keyframes text_ani {
    to {
        transform: translate3d(-100%, 0, 0);
        /* filter: hue-rotate(0); */
    }
    from {
        transform: translate3d(0, 0, 0);
        /* filter: hue-rotate(360deg); */
    }
}

.sec03{position: relative;padding-top: 290px;}
.sec03::after{content: '';position: absolute;top:0;right: 212px;width: 485px;height: 526px;background: url(../images/bg_sec03.png) no-repeat center;}
.sec03 h2{position: relative;font-size: 75px;font-weight: 900;line-height: 67px;}
.sec03 h2::before{content: '';position: absolute;top:-30px;left: 179px;width: 33px;height: 38px;background: url(../images/ico_h2.png) no-repeat center;}
.sec03 h2 strong{color:#C7DA01;font-weight: 900;}
.sec03 ul{margin: 102px -85px 0;border-top: 2px solid #C7DA01;}
.sec03 ul li{display: flex;height: 650px;padding: 126px 220px 0;box-sizing: border-box;border-bottom: 2px solid #C7DA01;}
.sec03 ul li .tit{position: relative;width: 530px;flex:none;font-size: 48px;font-weight: 900;line-height: 70px;padding-left: 90px;box-sizing: border-box;}
.sec03 ul li .tit::before{content: '';position: absolute;left:0;top:10px;width: 50px;height: 50px;border-radius: 50%;background: #C7DA01;}
.sec03 ul li .txt{font-size: 24px;font-weight: 600;line-height: 40px;}
.sec03 ul li:nth-child(1){background: url(../images/bg_sec03_list01.webp) no-repeat left 296px bottom 10px;}
.sec03 ul li:nth-child(2){background: url(../images/bg_sec03_list02.png) no-repeat right 325px bottom -3px;}
.sec03 ul li:nth-child(3){background: url(../images/bg_sec03_list03.webp) no-repeat left 284px bottom -2px;}
.sec03 ul li:nth-child(4){background: url(../images/bg_sec03_list04.png) no-repeat left 427px bottom -17px;}


.sec04{position: relative;margin-top: 190px;}
.sec04 h2{position: relative;font-size: 64px;font-weight: 900;line-height: 67px;}
.sec04 h2 strong{color:#C7DA01;font-weight: 900;}
.sec04 ul{margin-top: 131px;display: grid;grid-template-columns: repeat(5, 1fr);gap:60px 10px}
.sec04 ul li{position: relative;overflow: hidden;padding-bottom: 10px;}
.sec04 ul li:before{position: absolute;top: 50%;left: 50%;z-index: 2;display: block;content: '';width: 0;height: 0;background: rgba(255,255,255,.2);border-radius: 100%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);opacity: 0;}
.sec04 ul li:hover::before {-webkit-animation: circle .75s;animation: circle .75s;}
.sec04 ul li p{font-size: 16px;font-weight: 600;margin-top: 10px;}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

.sec05{margin-top: 255px;padding-top: 173px;border-top: 2px solid #C7DA01;}
.sec05 h2{position: relative;font-size: 64px;font-weight: 900;line-height: 67px;}
.sec05 h2 strong{color:#C7DA01;font-weight: 900;}
.sec05 .box_system{width: 1029px;height: 685px;padding: 41px 51px;margin: 111px auto 0;background: url(../images/bg_sec05.png) no-repeat center;box-sizing: border-box;}

.sec06 {position: relative;margin-top: 228px;padding-top: 90px;border-top:2px solid #C7DA01;z-index: 1;}
.sec06 .txt_ani span{display: inline-block;vertical-align: top;margin: 10px;}
.sec06 .txt_ani span::before{content: '';display: inline-block;top:-30px;width: 120px;height: 53px;background: url(../images/btn_arrow.png) no-repeat center;}
.sec06 .grp_img{margin-top: 15px;text-align: right;}
.sec06 .box_form{margin-top: 232px;text-align: center;}
.sec06 .box_form h2{font-size: 100px;font-weight: 900;line-height: 120px;}
.sec06 .box_form .sub_tit{font-size: 32px;font-weight: 500;margin-top: 30px;}
.sec06 .box_form ul{width: 520px;margin: 112px auto 0;}
.sec06 .box_form ul li{display: flex;align-items: center;}
.sec06 .box_form ul li + li{margin-top: 31px;}
.sec06 .box_form ul li .tit{width: 136px;flex:none;text-align: left;font-size: 24px;font-weight: 500;}
.sec06 .box_form ul li select,
.sec06 .box_form ul li input,
.sec06 .box_form ul li textarea{width: 100%;background: #C7DA01;padding:0 19px;box-sizing: border-box;font-size: 24px;font-weight: 500;color:#000;}
.sec06 .box_form ul li select{height: 70px;appearance: none;background:#C7DA01 url(../images/ico_select.png) no-repeat center right 19px;}
.sec06 .box_form ul li input{height: 70px;}
.sec06 .box_form ul li textarea{padding: 19px;resize: none;}
.sec06 .box_form ul li:last-child{justify-content: center;}
.sec06 .box_form .grp_check{padding-left: 136px;}
.sec06 .box_form .grp_check input[type="checkbox"] { display: none; } 
.sec06 .box_form .grp_check label { position: relative; display:inline-flex; align-items: center; /*padding-left: 25px;*/ font-size: 18px; color:#fff; cursor: pointer;} 
.sec06 .box_form .grp_check label:before { content:''; flex:none; display: inline-block;margin-right: 15px; width:34px; height: 34px; border:1px solid #ccc; border-radius: 9px; box-sizing: border-box; background: #F3F4F6; } 
.sec06 .box_form .grp_check label:after { content: ''; position: absolute; left: 8px; top: 50%;margin-top: -8px; width: 16px; height: 8px; border: 3px solid #DEE2E6; border-width: 0 0 4px 4px; transform: rotate(-45deg); } 
.sec06 .box_form .grp_check label a{font-size: 16px;font-weight: 700;color:#ADB5BD;margin-left: 10px;}
.sec06 .box_form .grp_check input[type="checkbox"]:checked + label:before{background: #C7DA01;border-color: #C7DA01;}
/* .sec06 .box_form .grp_check input[type="checkbox"]:checked + label:after{border-color: #C7DA01;} */
.sec06 .btn_sec06{margin: 74px 0 0 136px;position: relative;font-size: 80px;font-weight: 900;background: transparent;color:#fff;padding-right: 76px;}
.sec06 .btn_sec06::after{content: '';position: absolute;right:0;top:-14px;width: 50px;height: 50px;border-radius: 50%;background: #C7DA01;}

footer{position: relative;margin-top: -200px;padding: 1000px 85px 82px;}
footer .footer_inner{max-width: 1920px;margin: 0 auto;}
footer h2{display: block;width: 159px;height: 47px;background: url(../images/logo_footer.png) no-repeat center;}
footer .grp_footer{display: flex;align-items: flex-start;margin-top: 36px;}
footer .grp_footer .left p{font-weight: 500;font-size: 20px;line-height: 40px;}
footer .grp_footer .right{margin-left: auto;display: inline-flex;align-items: center;gap: 50px;}
footer .grp_footer .right a{font-weight: 600;font-size: 20px;color:#fff;text-decoration: none;}
footer .txt_sub{margin-top: 60px;;font-weight: 500;font-size: 14px;line-height: 30px;color:#8C8C8C}
footer .txt_sub .gap{margin-left: 30px;}
footer .grp_copy{display: flex;align-items: center;margin-top: 30px;}
footer .grp_copy .left{font-size: 20px;color:#fff;font-weight: 500;}
footer .grp_copy .left a{color:#fff;font-size: 20px;font-weight: 500;margin-left: 10px;}
footer .grp_copy .right{margin-left: auto;font-weight: 600;font-size: 14px;color:#8C8C8C}


.popup { display: none; width: 540px; position: fixed; left: 50%; top: 50%; background: #fff; z-index: 10001;box-shadow: 0px 4px 30px 10px rgba(0, 0, 0, 0.1); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 10px; overflow: hidden; } 
.popup .pop_header { position: relative; padding:30px 20px 0;box-sizing: border-box;flex:none} 
.popup .pop_header h2 { color: #212529; font-size: 18px; text-align: center;font-weight: 700;line-height: 140%;padding-bottom: 15px;border-bottom: 1px solid #E9ECEF;} 
.popup .pop_cont { overflow: auto; padding: 15px 30px 30px; box-sizing: border-box; font-size: 16px;line-height: 24px;flex:1;overflow: auto;} 
.popup .pop_cont .txt{color:#000;font-size: 15px;}
.popup .pop_footer { height: 64px; padding:0; box-sizing: border-box; display: flex; align-items: center;justify-content: center;flex:none} 
.popup .pop_footer > button {flex:1;height: 64px;border-radius: 0;font-size: 18px;font-weight: 700;background: #C7DA01;}
.dim { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2000; background: rgba(0, 0, 0, 0.5); } 
.popup.on { display: flex;flex-direction: column;max-height: 88vh;} 
.popup.on ~ .dim { display: flex;flex-direction: column;} 


/* mobile */
.mob.wrap{max-width: 500px;min-width:374px;padding-top: 60px;}

.mob header{height: 60px;padding: 0 20px;}
.mob header h1 a{width: 92px;height: 30px;background-size: contain;}
.mob header .btn_menu{width: 30px;height: 30px;background-size: contain;}

.mob .sec_inner{padding: 0 20px;}

.mob .sec01{padding-bottom: 450px;border-bottom: 2px solid #C7DA01;}
.mob .sec01 .sec_inner{padding-top: 50px;}
.mob .sec01 .txt_main{font-size: 36px;line-height: 45px;}
.mob .sec01 .img_sec01{margin-top: 15px;width: 149px;height: 44px;}
.mob .sec01 .txt_sub{margin-top: 34px;font-size: 16px;line-height: 20px;}
.mob .sec01{background: url(../images/bg_sec01.webp) no-repeat bottom center;background-size: 444px;}

.mob .sec02{padding-top: 71px;}
.mob .sec02 h2{font-size: 24px;line-height: inherit;}
.mob .sec02 .txt_sub{margin-top: 40px;font-size: 16px;line-height: 20px;}
.mob .sec02 .grp_sec02{text-align: center;margin:55px -20px 0; }
.mob .sec02 .grp_sec02 .img_sec02-1{margin: 0 auto;width: 295px;}
.mob .sec02 .grp_sec02 .img_sec02-2{margin-top:50px;width: 100%;}
.mob .sec02 .sec_inner + .sec_inner{margin-top: 80px;}
.mob .sec02 .sec_inner + .sec_inner::before{top:-50px;right:-80px;width: 374px;background-size: contain;z-index: -1;}
.mob .sec02 .sec_inner + .sec_inner h2{font-size: 24px;line-height: 30px;}
.mob .sec02 .sec_inner + .sec_inner .txt_sub{margin-top: 29px;font-size: 18px;}
.mob .sec02 .box_ad{margin-top: 70px;overflow: visible;}
.mob .sec02 .ad_sub{width: 162px;height: 248px;padding-top: 30px;background: #000;}
.mob .sec02 .ad_sub .tit{font-size: 16px;}
.mob .sec02 .ad_sub ul{margin-top: 14px;}
.mob .sec02 .ad_sub ul li{font-size: 14px;margin-bottom: 8px;}
.mob .sec02 .ad_sub::after{width: 91px;height: 247px;background: url(../images/mo_bg_sec02_ad.svg) no-repeat center;transform: rotate(0);border: 0;top:-1px;}
.mob .sec02 .ad_sub.offline{top:140px}
.mob .sec02 .ad_sub.offline::after{transform: scaleX(-1);right: calc(100% + 92px);}
.mob .sec02 .ad_main{margin: 0 -20px 0;width: calc(100% + 40px);height: 430px;;top: 386px;padding-top: 68px;}
.mob .sec02 .ad_main::before{top:-8px;left: 20px;width: 245px;height: 72px;background-size: contain;}
.mob .sec02 .ad_main .tit{font-size: 24px;margin-top: 16px;}
.mob .sec02 .ad_main ul{margin-top: 17px;padding: 0 20px;}
.mob .sec02 .ad_main ul li{width: 100%;margin-bottom: 17px;height: 28px;font-size: 14px;}
.mob .sec02 .box_ani{margin-top: 440px;}
.mob .box_ani{width: 700px;animation: text_ani 3s linear infinite;margin-top: 0;}
.mob .txt_ani{width: auto;font-size: 48px;-webkit-text-stroke: 2px #C7DA01;}
.mob .txt_ani +.txt_ani{margin-left: 36px;}
.mob .sec02 .grp_btn{padding: 0 20px;margin-top: 20px;}
.mob .sec02 .btn_sec02{font-size: 40px;padding-right: 30px;}
.mob .sec02 .btn_sec02::before{width: 51px;height: 22px;background-size: contain;left:-55px;top:0px}
.mob .sec02 .btn_sec02::after{width: 20px;height: 20px;top:-5px}

.mob .sec03{padding-top: 110px;}
.mob .sec03::after{top:88px;right:0;width: 144px;height: 157px;background-size: contain;}
.mob .sec03 h2{font-size: 24px;line-height: inherit;}
.mob .sec03 h2::before{width: 12px;height: 14px;top:-7px;left:56px;background-size: contain;}
.mob .sec03 ul{margin: 51px -20px 0;}
.mob .sec03 ul li{display: block;height: auto;padding: 40px 20px 226px;}
.mob .sec03 ul li .tit{width: auto;font-size: 20px;line-height: 35px;display: flex;flex-direction: column;padding: 0;}
.mob .sec03 ul li .tit::before{width: 13px;height: 13px;position: static;margin-bottom: 30px;}
.mob .sec03 ul li .tit br,
.mob .sec03 ul li .txt br{display: none;}
.mob .sec03 ul li .txt{margin-top: 51px;font-size: 14px;line-height: 25px;letter-spacing: -1px;}
.mob .sec03 ul li:nth-child(1){background: url(../images/mo_bg_sec03_list01.webp) no-repeat center bottom ;background-size: 344px;}
.mob .sec03 ul li:nth-child(2){background: url(../images/mo_bg_sec03_list02.svg) no-repeat center bottom ;}
.mob .sec03 ul li:nth-child(3){background: url(../images/mo_bg_sec03_list03.webp) no-repeat center bottom ;background-size: 344px;}
.mob .sec03 ul li:nth-child(4){background: url(../images/mo_bg_sec03_list04.svg) no-repeat right 20px bottom -8px;}

.mob .sec04{margin-top: 63px;}
.mob .sec04 h2{font-size: 24px;line-height: inherit;}
.mob .sec04 ul{margin-top: 63px;grid-template-columns: repeat(3, 1fr);gap: 13px 5px;}
.mob .sec04 ul li{padding-bottom: 5px;}
.mob .sec04 ul li img{width: 100%;}
.mob .sec04 ul li p{font-size: 10px;margin-top: 5px;}

.mob .sec05{margin-top: 63px;padding-top: 63px;}
.mob .sec05 h2{font-size: 24px;line-height: inherit;}
.mob .sec05 .box_system{width: 334px;height: 222px;padding: 13px 17px;margin-top: 44px;background: url(../images/mo_bg_sec05.png) no-repeat center;}

.mob .sec06{margin-top: 81px;}
.mob .sec06 .grp_img{margin-top: 10px;}
.mob .sec06 .grp_img img{width: 200px;height: 60px;background-size: contain;}
.mob .sec06 .box_ani{width: 710px;animation: text_ani 3s linear infinite;}
.mob .sec06 .txt_ani{width: auto;}
.mob .sec06 .txt_ani span::before{width: 45px;height: 21px;background-size: contain;}
.mob .sec06 .box_form{margin-top: 132px;}
.mob .sec06 .box_form h2{font-size: 32px;line-height: inherit;}
.mob .sec06 .box_form .sub_tit{margin-top: 20px;font-size: 14px;}
.mob .sec06 .box_form ul{margin-top: 51px;width: 100%;}
.mob .sec06 .box_form ul li{flex-direction: column;align-items: flex-start;}
.mob .sec06 .box_form ul li .tit{width: auto;font-size: 14px;margin-bottom: 10px;}
.mob .sec06 .box_form ul li + li{margin-top: 20px;}
.mob .sec06 .box_form ul li select,
.mob .sec06 .box_form ul li input,
.mob .sec06 .box_form ul li textarea{padding: 0 10px;font-size: 14px; -webkit-appearance: none;appearance: none;}
.mob .sec06 .box_form ul li select{height: 55px;background-size: 12px;}
.mob .sec06 .box_form ul li input{height: 55px;}
.mob .sec06 .box_form ul li textarea{padding: 10px;}
.mob .sec06 .box_form ul li:last-child{align-items: center;}
.mob .sec06 .box_form .grp_check{padding-left: 0;}
.mob .sec06 .box_form .grp_check label:before{width: 24px;height: 24px;border-radius: 4px;}
.mob .sec06 .box_form .grp_check label:after{left: 3px;margin-top: -7px;width: 14px;height: 6px;}
.mob .sec06 .box_form .grp_check label{font-size: 14px;}
.mob .sec06 .box_form .grp_check label a{font-size: 12px;}
.mob .sec06 .btn_sec06{margin: 38px auto 0;font-size: 40px;padding-right: 28px;}
.mob .sec06 .btn_sec06::after{width: 20px;height: 20px;top:-7px}

.mob footer{margin-top: 0;padding: 180px 20px 20px;background-size: 100%;}
.mob footer h2{width: 82px;height: 27px;background-size: contain;}
.mob footer .grp_footer{margin-top: 20px;flex-direction: column;}
.mob footer .grp_footer .left p{font-size: 12px;line-height: 20px;}
.mob footer .grp_footer .right{gap: 0;margin: 20px auto 0;justify-content: space-between;width: 100%;}
.mob footer .grp_footer .right a{font-size: 11px;}
.mob footer .txt_sub{font-size: 12px;line-height: 20px;letter-spacing: -1px;margin-top: 20px;}
.mob footer .txt_sub .gap{margin-left: 15px;}
.mob footer .grp_copy{flex-direction: column;align-items: flex-start;}
.mob footer .grp_copy .left{font-size: 11px;margin-bottom: 5px;}
.mob footer .grp_copy .left a{font-size: 11px;}
.mob footer .grp_copy .right{font-size: 10px;font-weight: 400;margin-left: 0;}