@charset "UTF-8";

@import url('//fonts.googleapis.com/earlyaccess/nanumbrushscript.css');

.intro{position: relative; height: 100vh;}
.intro video{width: 100%; height: 100%; object-fit: cover;}
.intro a{position: absolute; bottom: 25%; width: 206px; height: 55px; border-radius: 40px; background: var(--color); left: 0; right: 0; margin: 0 auto; text-align: center; line-height: 55px; font-size: 1.8rem; font-weight: 600; color: #fff; overflow: hidden; }
.intro a span{font-weight: 600; font-size: 1.8rem; position: relative; z-index: 5; color: #fff;}
.intro a:hover span{color: var(--color);}
.btn-1:before {content: "";position: absolute;top: 0;right: -50px;bottom: 0;left: 0;border-right: 50px solid transparent;border-bottom: 80px solid #fff;transform: translateX(-100%);transition: 0.5s all;z-index: 1;}
.btn-1:hover {color: #d3d1d0;}
.btn-1:hover:before {transform: translateX(0);}

.top_contact{padding: 12px 22px; background: var(--color); border-radius: 30px; color: #fff; font-weight: 600; white-space: nowrap;}

.main {width: 100%; height: 930px; overflow: hidden; position: relative;}
.main .img{width: 100%; height: 100%;}
.main .img img{width: 100%; height: 100%; object-fit: cover;}
.main .width{position: absolute; height: 100%; display: flex; align-items: center; top: 0; left: 0; right: 0; margin: 0 auto;}
.main .text h2{color: #fff; font-size: 5.2rem; line-height: 130%;}
.scroll_down{position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto;}
.scroll_down .scroll{width: 26px; height: 44px; border: 2px solid #fff; border-radius: 25px; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.scroll_down .scroll .scroll_dot{width: 5px; height: 5px; border-radius: 50%; background: #fff; display: block; animation: scroll 1.15s linear infinite;}

@keyframes scroll {
    0%{
        opacity: 0;
        transform: translateY(-1rem);
    }
    100%{
        opacity: 1;
        transform: translateY(1rem);
    }
}


.m1{background-image: url("../img/bg1.png"); background-position: 105% 45%; background-repeat: no-repeat; }
.m1 .box{display: flex;justify-content: space-between; gap: 25px 0; align-items: center; margin-top: 200px;}
.m1 .box:first-child{margin-top: 0px;}
.m1 .box:last-child{flex-direction: row-reverse;}
.m1 .box .img{width: 44%;}
.m1 .box .img img{width: 100%;}
.m1 .box .text{width: 50%; padding-left: 2%;}
.m1 .box .text h2{font-size: 4.0rem; font-weight: bold; line-height: 135%; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #c8c8c8;}
.m1 .box .text h2 b{color: var(--color);}
.m1 .box .text p{font-size: 1.9rem; line-height: 140%; margin-top: 25px;}

.m2{background: url("../img/bg2.png")no-repeat; background-position: center; background-attachment: fixed; background-size: cover;}
.m2 h2{text-align: center; line-height: 140%; font-size: 4.8rem; color: #fff; margin-bottom: 40px;}
.m2 h2 b{text-shadow: 0px 0px 40px rgba(34,69,57,0.65);}
.m2 .box_wrap{display: flex; gap: 12px 2%; justify-content: space-between; max-width: 950px; margin: 0 auto;}
.m2 .box{background: #fff; border-radius: 10px; padding: 35px 5px; width: 32%; text-align: center;}
.m2 .box h3{font-size: 1.8rem; font-weight: 600; margin-top: 10px; margin-bottom: 15px;}
.m2 .box p{color: var(--color); font-size: 2.0rem; font-weight: bold;}
.m2 .box p b{font-size: 3.8rem;}

.m3 .text{position: relative; padding-bottom: 65px;}
.m3 .text h3{color: var(--color); font-size: 2.4rem; font-weight: bold; margin-bottom: 3px;}
.m3 .text h2{font-size: 5.0rem; font-weight: bold; line-height: 135%; margin-bottom: 10px;}
.m3 .text h2 b{color: var(--color);}
.m3 .text p{font-weight: 500; font-size: 2.0rem;}
.m3 .text .on{position: absolute; right: 0; bottom: 0;}
.m3 .box_wrap{display: flex; justify-content: space-between; gap: 12px 0;}
.m3 .swiper-slide{overflow: hidden; border-radius: 20px; box-shadow: 0 0 20px rgba(116,116,116,0.4);}
.m3 .swiper-slide img{width: 100%;}
.m3 .swiper-wrapper{padding: 20px 0px;}
.m3 .swiper{overflow: initial;}

.m4{background: #f6f6f6;}
.m4 h2{font-size: 5.0rem; font-weight: bold; margin-bottom: 40px;}
.m4 h2 b{color: var(--color);}
.m4 h3{margin-bottom: 45px; max-width: 515px; width: 70%; }
.m4 h3 img{width: 100%;}

#ft{background: #008b58;}
#ft ul{display: flex; gap: 0px 1%; justify-content: center;}
#ft ul li{color: #fff; font-size: 1.5rem; font-weight: 500; line-height: 135%;}
#ft ul a{color: #fff; font-size: 1.5rem; font-weight: 500; line-height: 135%;}
#ft .copyright span{display: block; margin-top: 10px; color: #84bfa9; font-size: 1.4rem; margin-bottom: 20px;}
#ft .ft_ser a{color: #fff; font-size: 1.5rem; font-weight: 500; line-height: 135%;}

.sub_visual .width .img{width: 100%; height: 100%;}
.sub_visual .width .img img{width: 100%; height: 100%; object-fit: cover;}
.sub_visual .text{position: absolute; z-index: 4; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; padding-left: 7%; padding-top: 70px;}
.sub_visual .text h2{font-size: 4.0rem; font-weight: bold; line-height: 135%; color: #fff; margin-bottom: 15px;}
.sub_visual .text p{font-size: 2.0rem; font-weight: 500; color: #fff;}

.ptitle h2{font-size: 4.0rem; font-weight: bold; line-height: 135%;}
.ptitle h2 b{color: var(--color);}

.p1-1{background-image: url("../img/bg3.png"); background-repeat: no-repeat; background-position: 103% 63%;}
.p1-1 .ptitle{text-align: center; margin-bottom: 110px;}
.p1-1 .ptitle h3{color: var(--color); font-size: 2.0rem; font-weight: bold; margin-bottom: 45px;}
.p1-1 .box_wrap{display: flex; align-items: flex-start; position: relative; max-width: 1200px; margin: 0 auto;  position: relative;}
.p1-1 .box_wrap:before{content: ''; width: 200%; height: 1px; background: #c8c8c8; position: absolute; left: 0; top: 0;}
.p1-1 .box_wrap .box{width: 33.333333%; padding-top: 105px; padding-left: 30px;position: relative;}
.p1-1 .box_wrap .box:before{content: ''; width: 18px; height: 137px; background: url("../img/point.png")no-repeat;  position: absolute; left: 0; top: -10px;}
.p1-1 .box_wrap .box h3{font-size: 3.0rem; font-weight: bold; line-height: 135%;}
.p1-1 .box_wrap .box h3 b{color: #36ba84;}

.p1-2{background: url("../img/bg4.png")no-repeat; background-size: cover; background-attachment: fixed; background-position: center;}
.p1-2 .ptitle{text-align: center;}
.p1-2 .ptitle h2{color: #fff; font-size: 4.8rem; margin-bottom: 20px;}
.p1-2 .ptitle p{color: #fff; font-size: 2.4rem; font-weight: 500;}

.p1-3 .ptitle{text-align: center; margin-bottom: 50px;}
.p1-3 .ptitle h2{font-weight: 400; margin-top: 60px;}
.p1-3 .box_wrap1{display: flex; gap: 15px 2%; margin-bottom: 110px;}
.p1-3 .box_wrap1 .box{width: 49%; position: relative; }
.p1-3 .box_wrap1 .box img{width: 100%;}
.p1-3 .box_wrap1 .box .text{position: absolute; z-index: 4; left: 0; width:100%; bottom: 0; padding: 40px 45px; display: flex; gap: 0px 6px; align-items: center;}
.p1-3 .box_wrap1 .box .text span{width: 9px; height: 34px; background: #83bba7; display: inline-block; margin-right: 10px;}
.p1-3 .box_wrap1 .box .text h2{font-size: 3.0rem; font-weight: bold; color: #fff;}
.p1-3 .box_wrap2{background: url("../img/bg5.png")no-repeat; background-position: center; background-size: cover; border-radius: 10px; overflow: hidden; padding: 100px 0 140px 0; margin-bottom: 100px;}
.p1-3 .box_wrap2 .text{width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-left: 55px;}
.p1-3 .box_wrap2 .text h2{font-size: 2.8rem; line-height: 135%; margin-top: 20px; font-weight: bold;}
.p1-3 .box_wrap3{display: flex; align-items: center; justify-content: space-between; gap: 25px 0;}
.p1-3 .box_wrap3 h2{text-align: left; font-weight: bold; margin-bottom: 40px;}
.p1-3 .box_wrap3 p{text-align: left; font-weight: 500; font-size: 2.2rem; line-height: 135%;}
.p1-3 .box_wrap3 .img{border-radius: 30px; overflow: hidden;}
.p1-3 .box_wrap3 .img img{width: 100%;}

.p2-1{position: relative; padding-top: 95px;}
.p2-1 .box_wrap{display: flex; align-items: center; gap: 25px 0; justify-content: space-between; position: relative; z-index: 3;}
.p2-1 .box_wrap .img{width: 50%; text-align: center;}
.p2-1 .box_wrap .img .img{width: 100%; max-width: 394px;}
.p2-1 .text{width: 50%; padding-left: 3%;}
.p2-1 .text .ptitle h3{font-size: 2.0rem; font-weight: 800; color: var(--color); text-transform: uppercase; margin-bottom: 5px;}
.p2-1 .text .ptitle{margin-bottom: 42px;}
.p2-1 .bg{position: absolute; z-index: 0; width: 100%; height: 428px; left: 0; bottom: 0; background: url("../img/bg6.png") no-repeat; background-size: cover; background-position: center;}
.p2-1 ul h2{font-size: 2.0rem; font-weight: bold; color: #666;}
.p2-1 ul li{display: flex; align-items: center; gap: 0px 6px; font-size: 1.8rem; line-height: 130%; margin-top: 6px;}
.p2-1 .text h3{margin-top: 35px; font-size: 1.8rem;}
.p2-1 .text h3 b{font-size: 4.2rem; font-family: 'NanumBrush'; font-weight: initial; margin-left: 20px;}

.p2-2 .ptitle{padding-left: 3%; margin-top: -15px; margin-bottom: 48px;}
.p2-2 .ptitle h3{font-size: 3.0rem; font-weight: 500; margin-bottom: 20px;}
.p2-2 .ptitle h2{font-size: 4.6rem; border-bottom: 3px solid #333; display: inline-block; line-height: 100%;}
.p2-2 .bg{width: 100%; height: 400px; background: url("../img/p2-3.png")no-repeat; background-size: cover; background-position: center; margin-bottom: 55px;}
.p2-2 .text{padding-left: 3%;}
.p2-2 .text h2{font-size: 2.8rem; font-weight: 600; margin-bottom: 40px;}
.p2-2 .text p{font-size: 1.8rem; line-height: 135%; margin-top: 30px; color: #666;}
.p2-2 .text p b{color: #333; border-bottom: 1px solid #333;}

.p3-1{margin-top: 50px;}
.p3-1 .box_wrap{margin-top: 20px; border: 1px solid var(--color); border-radius: 35px; display: flex;}
.p3-1 .box_wrap .box{display: flex; align-items: center; padding: 50px; width: 50%;gap: 0px 8%;}
.p3-1 .box_wrap .box:first-child{border-right: 1px solid var(--color);}
.p3-1 .box_wrap .box .text h3{font-size: 2.0rem; font-weight: bold; color: var(--color); display: inline-block; border-bottom: 2px solid var(--color); margin-bottom: 15px;}
.p3-1 .box_wrap .box .text h2{font-size: 2.4rem; font-weight: bold; line-height: 130%; margin-bottom: 10px;}
.p3-1 .box_wrap .box .text p{font-size: 1.8rem; font-weight: 400; line-height: 135%;}
.p3-2{background: url("../img/bg7.png") no-repeat; background-position: top center; background-size: cover; text-align: center;}
.p3-2 .point{margin-bottom: 35px;}
.p3-2 .plogo{margin-bottom: 60px;}
.p3-2 .ptitle h2{font-size: 4.8rem; margin-bottom: 20px;}
.p3-2 .ptitle p{font-size: 3.0rem; font-weight: 500;}

.sub_bg{background: #f6f6f6}

.p4-1{margin-top: 60px; padding-bottom: 140px;}


@media all and (max-width: 1400px){}
@media all and (max-width: 1200px){
    #header .head_menu .main_menu .dept1{margin-right: 40px;}
    .m1 .box .text h2{font-size: 3.4rem; padding-bottom: 15px; margin-bottom: 15px;}
    .m1 .box .text p{font-size: 1.7rem;}
    .m1 .box .text p{margin-top: 12px;}
    .m1{background-size: 300px;}
    .m1 .box{margin-top: 130px;}
    .m2 h2{font-size: 3.4rem;}
    .m3 .text h3{font-size: 2.0rem;}
    .m3 .text h2{font-size: 3.4rem;}
    .m3 .text p{font-size: 1.7rem;}
    .m4 h2{font-size: 3.4rem;}
}
@media all and (max-width: 1024px){
    .main .text h2{font-size: 4.0rem;}
    .main{height: 720px;}
    .m1 .box .text h2{font-size: 2.8rem;}
    .m3 .text .on img{width: 300px;}
    .sub_visual{margin-top: 80px; height: initial;}
    .sub_visual .width .img{height: 240px;}
    .sub_visual .text h2{font-size: 3.0rem;}
    .sub_visual .text p{font-size: 1.7rem;}
    .sub_visual .width{border-radius: 10px;}
    .p1-1 .ptitle h3{font-size: 1.8rem; margin-bottom: 25px;}
    .ptitle h2{font-size: 3.0rem;}
    .p1-1 .ptitle{margin-bottom: 70px;}
    .p1-1{background-size: 250px;}
    .p1-1 .box_wrap .box h3{font-size: 2.4rem;}
    .p1-2 .ptitle h2{font-size: 3.0rem; margin-bottom: 10px;}
    .p1-2 .ptitle p{font-size: 2.0rem;}
    .p1-2{padding: 100px 0;}
    .p1-3 .box_wrap1 .box .text h2{font-size: 2.4rem;}
    .p1-3 .box_wrap1 .box .text span{width: 6px; height: 25px;}
    .p1-3 .ptitle h2{font-size: 2.6rem;}
    .p2-1 .box_wrap .img img{width: 70%;}
    .p2-1 .bg{height: 380px;}
    .p2-2 .point img{width: 90px;}
    .p2-2 .ptitle h3{font-size: 2.2rem; margin-bottom: 10px;}
    .p2-2 .ptitle h2{font-size: 3.6rem; line-height: 140%;}
    .p2-2 .bg{height: 300px; margin-bottom: 30px;}
    .p2-2 .text h2{font-size: 2.4rem; margin-bottom: 20px;}
    .p2-2 .text p{font-size: 1.7rem; margin-top: 17px;}
    .p3-1 .box_wrap .box .text h2{font-size: 2.1rem;}
    .p3-1 .box_wrap .box .text p{font-size: 1.7rem;}
    .p3-1 .box_wrap .box{padding: 30px;}
    .p3-1 .box_wrap .box .img img{width: 110px;}
    .p3-2 .ptitle h2{font-size: 3.8rem;}
    .p3-2 .ptitle p{font-size: 2.2rem;}
    .p3-2 .plogo{margin-bottom: 40px;}
    .bo_kakao .box_wrap .text h2{font-size: 3.2rem;}
    .bo_kakao .box_wrap .text img{width: 280px;}
    .bo_kakao .box_wrap .text p{font-size: 1.7rem;}
    .bo_kakao .box_wrap .img img{width: 70%;}
}
@media all and (max-width: 900px){
    .p2-1 .box_wrap{flex-direction: column; padding-bottom: 30px;}
    .p2-1 .bg{height: 500px;}
    .p2-1 .box_wrap .img{width: 100%;}
    .p2-1 .text{width: 100%; }
    .p3-1 .box_wrap{flex-direction: column;}
    .p3-1 .box_wrap .box{width: 100%; border-right: 0px; gap: 0 3%;}
    .p3-1 .box_wrap .box:first-child{border-bottom: 1px solid var(--color); border-right: 0px;}
}
@media all and (max-width: 850px){
    .m1 .box{flex-direction: column;}
    .m1 .box .text{padding-left: 0px; width: 70%;}
    .m1 .box .img{width: 70%;}
    .m1 .box:last-child{flex-direction: column;}
}
@media all and (max-width: 768px){
    .main{height: 580px;}
    .main .text h2{font-size: 3.0rem; letter-spacing: -0.08em;}
    .m2 .box_wrap{flex-direction: column; align-items: center;}
    .m2 .box{width:80%;}
    .m1 .box .text p br{display: none;}
    .m1 .box .text h2{font-size: 2.4rem;}
    .m2 h2{font-size: 2.8rem;}
    .m3 .text .on img{width: 220px;}
    .m3 .box_wrap{flex-direction: column; gap: 20px 0; align-items: center;}
    .m3 .box_wrap span{width: 80%;}
    .m4 h2{font-size: 2.8rem; letter-spacing: -0.06em}
    #formmail-write .form-group{flex-direction: column;}
    .privacy .pri_text{margin-bottom: 10px; height: 120px;}
    #ft ul{flex-direction: column;}
    #formmail-write{padding: 25px;}
    .p1-2{background-attachment: initial;}
    .p1-3 .box_wrap2 .text img{width: 180px;}
    .p1-3 .box_wrap2 .text h2{font-size: 2.0rem;}
    .p1-3 .box_wrap2{padding: 60px 0;}
    .sub_visual .text{padding-top: 0px; padding-left: 3%;}
    .sub_visual .text h2{font-size: 2.0rem; letter-spacing: -0.08em;}
    .sub_visual .text p{font-size: 1.6rem;}
    .ptitle h2{font-size: 2.6rem; letter-spacing: -0.06em}
    .p1-1 .box_wrap{flex-direction: column; gap: 100px 0;}
    .p1-1 .box_wrap .box{width: 100%; padding: 0; padding-left: 40px;}
    .p1-1 .box_wrap:before{width: 1px; height: 100%;}
    .p1-1 .box_wrap .box:before{width: 39px; height: 14px; background: url("../img/mpoint.png"); top: 7px; left: -5px;}
    .p1-3 .box_wrap1{flex-direction: column;}
    .p1-3 .box_wrap1 .box{width: 100%;}
    .p1-3 .box_wrap1 .box .text{padding: 25px;}
    .p1-3 .box_wrap2 .text{padding-left: 25px;}
    .p1-3 .box_wrap3{flex-direction: column-reverse;}
    .p1-3 .ptitle{width: 100%;}
    .p1-3 .box_wrap3 .img{width: 100%;}
    .p1-3 .box_wrap3 h2{margin-top: 0px; margin-bottom: 20px;}
    .p2-2 .ptitle h2{font-size: 2.8rem; border-bottom: 0px; text-decoration: underline;}
    .p2-2 .text p br{display: none;}
    .p3-2 .ptitle h2{font-size: 3.2rem;}
    .bo_kakao{padding-top: 45px;}
    .bo_kakao .box_wrap{flex-direction: column; gap: 30px 0;}
    .bo_kakao .box_wrap .text{width: 100%; padding-top: 0; text-align: center;}
    .bo_kakao .box_wrap .img{width: 100%;}
}
@media all and (max-width: 650px){
    .m1 .box .img{width: 100%;}
    .m1 .box .text{width: 100%;}
    .p3-1 .box_wrap .box{flex-direction: column; }
    .p3-1 .box_wrap .box .text{width: 100%;}
    .p3-1 .box_wrap .box .img img{width: 80px;}
}