@charset "UTF-8";

main{height: 950px; background: url("/images/home/mainbg.png")no-repeat; background-position: center; background-size: cover; margin-top: 100px; position: relative; overflow: hidden;}
main .width{height: 100%; display: flex; align-items: center;}
main .text{padding-bottom: 20%;}
main .text h2{font-size: 6.0rem; font-weight: bold; color: var(--color); line-height: 90%;}
main .img{position: absolute; left: 0; bottom: -6px; max-width: 1920px; width: 100%; right: 0; margin: 0 auto;}
main .img img{width: 100%;}

.se1{padding: 285px 0 310px 0; background: #007ac3;}
.se1 h3{color: #fff; font-size: 2.4rem; font-weight: bold; margin-bottom: 40px;}
.se1 h2{color: #fff; font-size: 4.2rem; line-height: 135%;}
.se1 h2 b{font-weight: 800;}

.se2{padding: 80px 0;}
.se2 .box_wrap .width{display: flex; align-items: center; justify-content: space-between;}
.se2 .box_wrap:nth-child(even) .width{flex-direction: row-reverse;}
.se2 .box_wrap:nth-child(odd) .text{text-align: right;}
.se2 .box_wrap .img{width: 50%;}
.se2 .box_wrap .img img{width: 100%;}
.se2 .box_wrap .text h2{font-size: 6.0rem; color: #0080c5; margin-bottom: 42px;}
.se2 .box_wrap .text h3{font-size: 2.4rem; font-weight: 500; line-height: 155%;}
.se2 .box_wrap .text p{font-size: 2.0rem; margin-top: 35px;}
.se2 .box6{background: url("/images/home/se2-6bg.png") no-repeat; background-size: cover; padding-top: 0px; margin-top: 80px;}
.se2 .box1 .img{max-width: 564px;}
.se2 .box2 .img{max-width: 651px;}
.se2 .box3 .img{max-width: 621px;}
.se2 .box4 .img{max-width: 705px;}
.se2 .box5 .img{max-width: 588px;}
.se2 .box6 .img{max-width: 548px;}
.se2 .box7 .img{max-width: 505px;}

footer{background: #222; padding: 40px 0 30px 0;}
footer .ft_top{display: flex; gap: 0 40px; margin-bottom: 25px;}
footer .ft_top a{font-size: 1.5rem; color: #fff; border-bottom: 1px solid #fff;}
footer .ft_info h2{color: #fff; font-size: 1.5rem; font-weight: 500; margin-bottom: 5px;}
footer .ft_info ul{display: flex;}
footer .ft_info ul li{position: relative; color: #828282; font-size: 1.5rem; line-height: 150%; margin-right: 14px; padding-right: 14px;}
footer .ft_info ul a{position: relative; color: #828282; font-size: 1.5rem; line-height: 150%;}
footer .ft_info ul li:after{content: ''; width: 1px; height: 12px; background: #828282; position: absolute; right: 0; top: 18%;}
footer .ft_info ul li:last-child:after{display: none;}
footer .ft_info h6{margin-top: 22px; color: #828282; font-size: 1.5rem; font-weight: 300;}

.use_top{margin-top: 135px;}
.use_top .width{display: flex; align-items: center; justify-content: space-between;}
.use_top .text h3{font-size: 2.4rem; font-weight: 500; margin-bottom: 35px;}
.use_top .text h2{font-size: 6.0rem; font-weight: bold; line-height: 130%; color: #222;}
.use_top .text h2 b{color: var(--color2);}
.use_top .text h2 strong{color: var(--color);}
.use_top .img{width: 42%; text-align: center;}
.use_top .img img{max-width: 419px; width: 100%;}

.use_wrap .width{background: #f3f7f8; border-radius: 40px; padding: 80px; display: flex; align-items: center; justify-content: space-between;}
.use_wrap .img{width: 60%;}
.use_wrap .big_img{width: 54%;}
.use_wrap .big_img img{width: 100%;}
.use1 .img{display: flex; gap: 0px 5%; align-items: flex-end;}
.use1 .img .small_img{margin-bottom: 30px; width: 40%;}
.use1 .img .small_img img{width: 100%;}
.use_wrap .text_wrap{width: 35%;}
.use_wrap .text_com h2{display: inline-block; background: var(--color); border-radius: 22px; padding: 6px 20px 6px 6px; font-size: 2.6rem; font-weight: 600; color: #fff; margin-bottom: 14px;}
.use_wrap .text_com h2 span{display: inline-block; width: 35px; height: 35px; background: #fff; border-radius: 50%; text-align: center; line-height: 36px; font-size: 2.6rem; font-weight: 800; color: var(--color); margin-right: 3px;}
.use_wrap .text_com ul{margin-left: 24px;}
.use_wrap .text_com ul li{margin-top: 24px; display: flex; align-items: center; gap: 0px 10px; font-size: 2.2rem; font-weight: 500; line-height: 140%;}
.use_wrap .text_com ul li span{min-width: 32px; height: 32px; display: inline-block; text-align: center; line-height: 32px; background: var(--color); border-radius: 50%; font-size: 2.2rem; font-weight: 800; color: #fff;}
.use1{margin-bottom: 100px;}
.use2{margin-bottom: 100px;}
.use3{margin-bottom: 230px;}
.use1 .point_text{margin-top: 130px}
.use1 .point_text h2{font-size: 2.2rem; line-height: 160%; padding-top: 25px; margin-bottom: 75px; position: relative;}
.use1 .point_text h2:before{content: ''; width: 305px; height: 8px; background: url("/images/home/line.png")no-repeat; background-size: contain; position: absolute; left: -230px; top: 0;}
.use1 .point_text h3{font-size: 2.2rem; line-height: 160%; padding-top: 25px; position: relative;}
.use1 .point_text h3:before{content: ''; width: 305px; height: 8px; background: url("/images/home/line.png")no-repeat; background-size: contain; position: absolute; left: -230px; top: 0;}
.use2 .text_com ul li{align-items: initial;}
.use2 .img{display: flex; align-items: center; gap: 0px 8%; }
.use2 .img .small_img{display: flex; flex-direction: column;width: 33%; gap: 38px 0;}
.use2 .img .small_img img{width: 100%;}
.use3 .img{display: flex; align-items: center; gap: 0px 5%;}
.use3 .img .small_img{width: 38%;}
.use3 .img .small_img img{width: 100%;}
.use3 .text_com2{margin-top: 110px;}
.use3 .text_com2 ul li{align-items: initial;}
.use3 .text_com2 ul li b{font-weight: 600; color: var(--color2)}

.app_wrap{background: #f3f7f8; padding: 270px 0 205px 0; text-align: center;}
.app_wrap .text{margin-bottom: 40px;}
.app_wrap .text h3{font-size: 4.5rem; font-weight: bold; margin-bottom: 18px; color: #222;}
.app_wrap .text h3 b{color: var(--color2);}
.app_wrap .text h2{font-size: 6.0rem; font-weight: bold; color: #222;}
.app_wrap .text h2 b{color: var(--color);}
.app_wrap .app1{display: flex; gap: 0px 2%; justify-content: center; margin-bottom: 100px;}
.app_wrap .app1 span{border-radius: 15px; overflow: hidden;}
.app_wrap .app1 span:first-child{box-shadow: 5px 5px 20px rgba(0,0,0,0.1)}
.app_wrap .app_btn{display: flex; align-items: center; gap: 0px 10px; justify-content: center;}

.contact_wrap{padding-top: 240px; background: #f3f7f8; text-align: center;}
.contact_wrap .text h3{font-size: 4.5rem; font-weight: bold; margin-bottom: 15px;}
.contact_wrap .text h2{font-size: 7.0rem; font-weight: bold; margin-bottom: 70px;}
.contact_wrap .text h2 b{color: var(--color);}
.contact_wrap .text p{font-size: 2.6rem; margin-bottom: 75px; line-height: 150%;}
.contact_wrap .text a{width: 350px; height: 75px; border-radius: 37px; background: var(--color); display: flex; align-items: center; justify-content: center; margin: 0 auto 157px auto; font-size: 2.8rem; color: #fff; font-weight: bold;}
.contact_wrap .img{max-width: 683px; margin: 0 auto;}
.contact_wrap .img img{width: 100%;}

.mail_wrap{padding: 250px 0 185px 0; background:#f3f7f8; }
.mail_wrap .text{margin-bottom: 75px; text-align: center;}
.mail_wrap .text h3{font-size: 4.5rem; font-weight: bold; margin-bottom: 15px;}
.mail_wrap .text h2{font-size: 7.0rem; font-weight: bold;}
.mail_wrap .text h2 b{color: var(--color);}
.select_wrap{position: relative; width: 100%; max-width: 290px;}
.select_wrap select{height:50px; border:none; padding: 0 15px; color: #505050; background: #fff; width: 100%;  appearance: none; -webkit-appearance: none;-moz-appearance: none; position: relative; border-radius: 10px; border: 1px solid #dedede; }
.select_wrap::after { content:''; position: absolute;top: 50%;right: 20px;transform: translateY(-50%);pointer-events: none; background-image: url("/images/home/arrow.png"); width: 10px; height: 5px; background-repeat: no-repeat;}

.form_wrap{max-width: 1200px; margin: 0 auto;}
.form_wrap .form_bg{background: #fff; padding: 40px 45px; border-radius: 17px; box-shadow: 0px 0px 13px rgba(145,145,145,0.1)}
.form_wrap .input_box{margin-bottom: 20px;}
.form_wrap .input_box input[type=text]{width: 100%; height: 50px; border-radius: 10px; border: 1px solid #dedede; padding-left: 15px;}
.form_wrap .type1{display: flex; justify-content: space-between; gap: 20px 2%;}
.form_wrap .type1 .box{width: 50%;}
.form_wrap .input_box label{font-size: 1.8rem; font-weight: 500; color: #121212; display: block; margin-bottom: 10px;}
.form_wrap .input_box label span{color: var(--color);}
.form_wrap .type2 .box{display: flex; align-items: center; gap: 10px 2%; }
.form_wrap .type2 .box .mail{display: flex; gap: 0px 1%; align-items: center; width: 65%; justify-content: space-between;}
.form_wrap .type2 .box .mail span{color: #121212; font-size: 1.8rem; font-weight: 500;}
.form_wrap .type2 input{max-width: 420px;}
.form_wrap .type2 .box .mail input{max-width: 335px;}
.form_wrap .type3 textarea{padding: 15px; border-radius: 10px; border: 1px solid #dedede; height: 115px; resize: none; width: 100%;}
.form_wrap .input_box input::placeholder{color: #aeaeae;}
.form_wrap .input_box select{color: #aeaeae;}
.form_wrap .input_box textarea::placeholder{color: #aeaeae;}
.form_wrap .agree_wrap h2{font-size: 1.8rem; font-weight: 500; color: #121212; display: block; margin-bottom: 8px;}
.form_wrap .agree_wrap h2 span{color: var(--color);}
.form_wrap .agree_wrap p{font-size: 1.5rem; color: #666; line-height: 130%;}
.form_wrap .agree_text{border-radius: 10px; border: 1px solid #dedede; padding: 25px 28px; margin-top: 20px; display: flex; flex-direction: column; gap: 12px 0; margin-bottom: 20px;}
.form_wrap .agree_text p{color: #666;}
.form_wrap .agree_text p b{font-size: 1.8rem; color: #0080c5; border-bottom: 1px solid var(--color);}
.form_wrap .agree_wrap label{font-weight: 500; color: #666; display: flex; align-items: center; justify-content: flex-end;}
.form_wrap .agree_wrap input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 10px;}
.form_wrap .agree_wrap input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}
.form_wrap .agree_wrap input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 1; /* 필요에 따라 추가 */}
.form_wrap button{width: 210px; height: 64px; border-radius: 32px; background: #0080c5; border: none; color: #fff; font-size: 2.4rem; font-weight: bold; margin: 46px auto 0 auto; display: block; transition: 0.3s all;}
.form_wrap button:hover{background: #121212;}

/*.popup-bg {display: none;position: fixed;top: 0; left: 0; right: 0; bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 999;}*/
/*.popup {position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%);background: #fff;padding: 30px;border-radius: 10px;width: 300px;box-shadow: 0 0 10px rgba(0,0,0,0.3);text-align: center;}*/
/*.popup button {margin-top: 15px;margin-right: 10px;padding: 8px 15px;cursor: pointer;}*/

.popup-bg {position: fixed;top: 0; left: 0;  bottom: 0;z-index: 9999; display: flex; align-items: center; justify-content: center; width: 100%;}
.popup {background: white;text-align: center;max-width: 500px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); height: fit-content; width: 100%;}
.popup button {margin: 10px 5px;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}
.btn-close {background-color: #ccc;}
.btn-hide {background-color: #4CAF50;color: white;}
.popup a{width: 100%; display: block;}
.popup a img{width: 100%;}

@media all and (max-width: 1300px){
    .use_wrap .width{padding: 35px;}
    .use_wrap .text_com h2{font-size: 2.2rem;}
    .use_wrap .text_com ul li{font-size: 1.8rem; margin-top: 17px;}
    .use_top .text h2{font-size: 4.2rem;}
    .use_top .text h3{margin-bottom: 20px;}
    .use_wrap .text_com ul li{font-size: 1.8rem;}
    .use1 .point_text h2{font-size: 1.8rem;}
    .use1 .point_text h3{font-size: 1.8rem;}
    .use1 .point_text h2{margin-bottom: 62px;}
    .use1 .point_text{margin-top: 85px;}
    .use1 .point_text h2:before{width: 245px; left: -195px;}
    .use1 .point_text h3:before{width: 245px; left: -195px;}
}

@media all and (max-width: 1200px) {
    #header .head_menu .main_menu .dept1{padding: 25px 15px;}
    #header .head_menu .main_menu .dept1 > a{font-size: 1.8rem;}
    .use_wrap .width{padding: 100px 50px 0 50px;}
    .use1 .width{flex-direction: column;}
    .use_wrap .text_com{max-width: 768px; margin: 0 auto 90px auto; width: 100%; }
    .use_wrap .big_img{max-width: 480px; width: 100%;}
    .use_wrap .big_img{width: 100%;}
    .use1 .img{justify-content: center; margin-bottom: 110px;}
    .use1 .small_img{max-width: 768px; width: 100%;}
    .use1 .small_img img{width: 100%;}
    .use2 .width{flex-direction: column;}
    .use2 .big_img{margin-bottom: 90px;}
    .use2 .small_img{display: flex; gap: 0px 2%; max-width: 768px; width: 100%;}
    .use2 .small_img img{width: 50%;}
    .use3 .width{padding: 100px 50px 100px 50px; flex-direction: column;}
    .use3 .box{width: 100%; max-width: 768px;}
    .use3 .big_img{max-width: 480px; width: 100%; margin: 0 auto;}
    .use3 .big_img img{width: 100%;}
    .use3 .box1{margin-bottom: 160px;}
}

@media all and (max-width: 1024px) {
    .popup-bg{top: 80px;}
    main{margin-top: 79px; height: auto;}
    main .text{padding-bottom: 110px; padding-top: 120px;}
    main .width{align-items: flex-start; height: auto;}
    main .img{position: initial;}
    .se1{padding: 120px 0;}
    .se1 h3{font-size: 2.8rem; color: rgba(255,255,255,0.5); margin-bottom: 22px;}
    .se1 h2{font-size: 3.0rem;}
    .se2 .box_wrap .text h2{font-size: 4.6rem; margin-bottom: 25px;}
    .se2 .box_wrap .text h3{font-size: 2.0rem;}
    .use_top .img{display: none;}
    .use_top{margin-bottom: 55px;}
    .use_top .text{width: 100%;}
    .use_top .text h3{font-size: 2.8rem;}
    .use_top .text h2{font-size: 5.2rem;}
    .use_wrap .text_com h2{font-size: 3.0rem; padding: 12px 26px 12px 12px; border-radius: 40px;}
    .use_wrap .text_com ul li{font-size: 2.8rem; margin-top: 25px;}
    .app_wrap .text h2{font-size: 5.2rem;}
    .mail_wrap .text{margin-bottom: 60px;}
    .form_wrap .type2 input{max-width: 270px;}
}

@media all and (max-width: 900px) {
    .se2 .box_wrap .width{flex-direction: column-reverse;}
    .se2 .box_wrap:nth-child(even) .width{flex-direction: column-reverse;}
    .se2 .box_wrap:nth-child(odd) .text{text-align: left;}
    .se2 .box_wrap .text{width: 100%; margin-bottom: 100px;}
    .se2 .common{padding: 90px 0;}
    .form_wrap .type1{flex-direction: column;}
    .form_wrap .type1 .box{width: 100%;}
    .form_wrap .type2 input{max-width: initial; width: 33% !important;}
    .form_wrap .type2 .mail input{width: 48% !important;}
    .select_wrap{width: 48%;}
    .se1 h2{font-size: 2.4rem;}
    footer.ft_info h6{font-size: 1.3rem;}
    footer.ft_info ul li{font-size: 1.3rem;}
}

@media all and (max-width: 768px) {
    .se1 h2{letter-spacing: -0.08em}
    .se2{padding: 0px;}
    .se2 .box_wrap .text h2{font-size: 6.8rem;}
    .se2 .box_wrap .text h3{font-size: 3.0rem;}
    .se2 .box_wrap .text p{font-size: 2.6rem; color: #666;}
    .se2 .box_wrap .text{margin-bottom: 110px;}
    .se2 .box_wrap .img{width: 84%;}
    .se2 .box1 .img, .se2 .box2 .img, .se2 .box3 .img, .se2 .box4 .img, .se2 .box5 .img, .se2 .box6 .img, .se2 .box7 .img{max-width: initial;}
    footer .ft_info ul{flex-wrap: wrap;}
    footer .ft_info ul li:after{display: none;}
    .use3{margin-bottom: 120px;}
    .app_wrap .app1 span{width: 200px;}
    .app_wrap .app1 span img{width: 100%;}
    .app_wrap .app_btn a{width: 280px;}
    .app_wrap .app_btn a img{width: 100%;}
    .app_wrap{padding: 250px 0 205px 0;}
    .contact_wrap .text p{font-size: 3.4rem;}
    .contact_wrap .text a{width: 252px; }
    .mail_wrap{padding: 180px 0 180px 0;}
    .form_wrap .form_bg{padding: 50px 32px 120px 32px;}
    .form_wrap button{width: 250px; margin: 85px auto 0 auto;}
    .mail_wrap .text{margin-bottom: 55px;}
}

@media all and (max-width: 650px) {
    main .text h2{font-size: 4.0rem;}
    main .text img{width: 84%;}
    .se1 h2{font-size: 2.6rem; letter-spacing: -0.01em;}
    .se1 h2 br{display: none;}
    .se2 .box_wrap .text{margin-bottom: 60px;}
    .se2 .box_wrap .text h2{font-size: 3.0rem;}
    .se2 .box_wrap .text h3{font-size: 1.8rem;}
    .se2 .box_wrap .text h3 br{display: none;}
    .se2 .box_wrap .text p{font-size: 1.4rem;}
    .se2 .box_wrap .img{width: 100%; text-align: center;}
    .se2 .box_wrap .img img{width: 90%;}
    .se2 .box6 .img{background: url("/images/home/mse2-6bg.png")no-repeat; background-size: cover;}
    .se2 .box6 .img{max-width: initial; width: 108%; padding-bottom: 100px;}
    .se2 .box6 .img img{position: relative; right: -4%;}
    .se2 .box4 .img img{position: relative; right: -4%;}
    .use_top .text h3{font-size: 2.2rem;}
    .use_top .text h2{font-size: 2.8rem; letter-spacing: -0.08em;}
    .use_wrap .width{padding: 60px 25px 0 25px;}
    .use3 .width{padding: 60px 25px;}
    .use_wrap .text_com h2{font-size: 2.4rem; padding: 8px 18px 8px 8px;}
    .use_wrap .text_com ul li{font-size: 1.7rem; margin-top: 18px;}
    .use_wrap .text_com ul{margin-left: 0px;}
    .use_wrap .text_com ul li span{min-width: 26px; height: 26px; font-size: 1.8rem; line-height: 26px;}
    .app_wrap .text h3{font-size: 2.6rem; margin-bottom: 10px;}
    .app_wrap .text h2{font-size: 3.2rem;}
    .app_wrap .app1 span{width: 120px;}
    .app_wrap .app_btn a{width: 50%;}
    .contact_wrap .text h3{font-size: 3.0rem; margin-bottom: 8px;}
    .contact_wrap .text h2{font-size: 4.0rem; margin-bottom: 30px;}
    .contact_wrap .text p{font-size: 2.0rem; letter-spacing: -0.08em; margin-bottom: 45px;}
    .contact_wrap .text a{height: 55px; font-size: 2.2rem; width: 240px; margin: 0 auto 120px auto}
    .form_wrap .type2 .box{flex-direction: column;}
    .form_wrap .type2 .box .mail{width: 100%;}
    .form_wrap .type2 input{width: 100% !important;}
    .mail_wrap .text h3{font-size: 3.0rem; margin-bottom: 8px;}
    .mail_wrap .text h2{font-size: 4.0rem;}

}