/*초기화*/
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body{width: 100%; height: auto; position: relative; font-family: 'Pretendard' !important; font-size: 17px; color: #1a1a1a; scroll-behavior: smooth; }
ul, li{list-style: none;}
a{text-decoration: none; color: inherit !important;}

/*공통*/
.pc{display: block;}
.tablet{display: none;}
.mob{display: none;}

.move{opacity: 0;}
.main{width: 100%; position: relative;}
.inner{width: 90%; max-width: 1200px;}
.inner2{width: 90%; max-width: 1400px;}
.inner3{width: 80%;}

/*헤더*/
.header_top{width: 100%; height: 40px; position: absolute; left: 0; top: 0; background: #185194; z-index: 99;}
.header_top .inner3{margin: auto; text-align: end; color: #fff;}
.login > li{display: inline-block; vertical-align: top; line-height: 40px; font-size: 0.9rem; padding: 0 14px; position: relative;}
.login > li:nth-last-child(1){padding: 0 0 0 14px;}
.login > li:nth-child(1)::before{opacity: 0;}
.login > li::before{content: ''; width: 1px; height: 35%; background: rgba(255,255,255,0.4); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

.header{width: 100%; height: 80px; background: #fff; position: absolute; left: 0; top: 40px; z-index: 20; overflow: hidden; transition: all 0.4s;}
.header::after{content: ''; width: 100%; height: 1px; background: #ddd; position: absolute; left: 0; top: 79px;}
.header:hover{height: 320px; box-shadow: 4px 4px 6px rgb(0 0 0 / 10%);}

.header .inner3{margin: 13px auto 0; font-size: 0;}
.header .inner3 > div{display: inline-block; vertical-align: top;}
.header .inner3 > div.logo{width: 240px; position: relative; z-index: 99; margin-top: 14px;}
.header .inner3 > div.nav{width: calc(100% - 300px); text-align: end; margin-top: 20px;}
.header .inner3 > div.etc{width: 60px; text-align: end; margin-top: 14px;}

.header .inner3 > div.logo img{width: 100%; transition: all 0.4s;}

.nav_main{width: 100%; font-size: 0; box-sizing: border-box; padding-right: 5%;}
.nav_main > li{display: inline-block; vertical-align: top; text-align: center; width: 17%; font-size: 1.1rem; font-weight: 600; line-height: 1; text-transform: uppercase;}
.nav_sub{margin-top: 50px; position: relative; width: 100%;}
.nav_sub::before{content: ''; width: 100%; height: 3px; background: #87B540; position: absolute; left: 0; top: -24px; z-index: 20; transition: all 0.4s; opacity: 0;}
.nav_sub:hover::before{opacity: 1;}
.nav_sub > li{padding-bottom: 18px; font-size: 1rem; word-break: keep-all; text-transform: uppercase; transition: all 0.4s;}
.nav_sub > li:hover{color: #87B540;}

.hambuger{width: 32px; height: 22px; display: inline-block; position: relative; z-index: 99;}
.hambuger span{width: 100%; height: 2px; background: #1a1a1a; position: absolute; right: 0; top: 0; transition: all 0.4s;}
.hambuger span:nth-child(1){top: 0; width: 100%;}
.hambuger span:nth-child(2){top: 50%; transform: translateY(-50%);}
.hambuger span:nth-child(3){top: auto; bottom: 0;}

.hambuger.is-active span:nth-child(1){width: 100%; top: 10px; transform: rotate(45deg);}
.hambuger.is-active span:nth-child(2){bottom: 10px; transform: rotate(-45deg);}
.hambuger.is-active span:nth-child(3){opacity: 0;}

.sitemap{width: 100%; height: 100vh; background: #fff; position: fixed; left: 0; top: 0; transform: translateY(-100%); transition: all 0.4s;}
.is-open{transform: none;}
.is-hidden{overflow: hidden;}
.is-event{pointer-events: none;}

.mob_nav{position: absolute; left: 50%; top: 40%; margin: 0; transform: translate(-50%, -50%); font-size: 0; text-align: center; text-transform: uppercase;}
.mob_nav > li{width: 20%; display: inline-block; vertical-align: top;}
.mob_nav .nav_tit{font-size: 1.2rem; font-weight: 700;}
.mob_sub{margin-top: 18px;}
.mob_sub > li{font-size: 1rem; padding: 8px 0; transition: all 0.4s;}
.mob_sub > li:hover{color: #87B540;}

/*푸터*/
.site{width: 100%; max-width: 980px; margin: auto; padding-bottom: 20px;}
.site .site_list{width: 100%; font-size: 0; text-align: center;}
.site .site_list > li{display: inline-block; vertical-align: middle; width: calc(100%/3);}
.site .site_list > li a{display: block; width: 100%;}
.site .site_list > li img{width: 100%; max-width: 214px;}

.footer{width: 100%; position: relative; background: #212121; padding:60px 0 20px;}
.footer .inner2{margin: auto; font-size: 0; color: #fff;}
.footer .inner2 > li{display: inline-block; vertical-align: top;}
.footer .inner2 > li.left{width: 60%;}
.footer .inner2 > li.right{width: 40%; text-align: end;}

.f_info{font-size: 0.95rem; font-weight: 100;}
.f_info img{width: 260px; margin-bottom: 4vh;}
.f_info .txt1{margin-bottom: 10px;}
.f_info .txt1 .bold{font-weight: 700; margin-right: 14px;}

.f_nav{font-size: 0;}
.f_nav > li{display: inline-block; vertical-align: top; padding-left: 40px; font-size: 0.95rem;}

.footer .inner2 .copy{text-align: end; font-weight: 100; margin-top: 70px; font-size: 0.95rem;}
.footer::after{content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.3); position: absolute; left: 0; bottom: 58px;}

.top_btn{width: 50px; height: 50px; background: #87B540; position: absolute; right: 5%; top: -25px; text-align: center;}
.top_btn i{font-size: 2rem; line-height: 50px; text-align: center; color: #fff;}

.family{display: inline-block;width: 100%;max-width: 240px;height: 40px;overflow: hidden;background: #fff;margin-top: 25px;text-align: center;transition: all 0.4s;}
.family .family_tit{width: 100%;font-size: 0;color: #212121;line-height: 40px;text-align: left;padding: 0 15px;border-bottom: 1px solid #ddd;}
.family .family_tit span{display: inline-block;vertical-align: middle;width: 90%;font-size: 0.9rem;text-align: l;}
.family .family_tit i{display: inline-block;vertical-align: middle;width: 10%;font-size: 1rem; transition: all 0.4s;}
.family .family_list{width: 100%; height: auto; padding: 5px 0; background: #fff;}
.family .family_list li{width: 100%;}
.family .family_list li a{display: block;font-size: 0.9rem;color: #333 !important;padding: 5px 15px;text-align: left; line-height: 1.3;}

.family:hover{height: 140px;overflow: visible;}
.family:hover .family_tit i{transform: rotate(180deg);}

/*m1*/
.m1 .mySwiper{width: 100%; height: 100vh; position: relative;}
.m1 .mySwiper .swiper-slide{width: 100%; height: 100%; position: relative; background: #fff;}
.m1_bg{height: 100%; position: absolute; top: -5%; right: -22%; z-index: -1;}
.m1_mask{height: 100%; position: absolute; right: -1px; top: 0; z-index: 1;} 
.m1_txtbox{position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); z-index: 2;}
.m1_txtbox p{text-shadow: 1px 1px 5px rgba(0,0,0,0.5);}
.m1_txtbox .txt1{font-size: 1rem; font-weight: 700; letter-spacing: 3px; color: #87B540;}
.m1_txtbox .txt2{font-size: 3rem; font-weight: 200; margin: 6px 0 34px; color: #fff;}
.m1_txtbox .txt2 span{font-weight: 700;}
.m1_txtbox .txt3{font-size: 1.1rem; line-height: 1.5; color: #fff;}
.m1_txtbox .txt4{color: #fff; font-size: 1rem; margin-top: 14px;}
.m1_txtbox .txt4 span{display: inline-block; vertical-align: middle; background: #87B540; border-radius: 20px; padding: 4px 20px; margin-right: 14px;}

.m1 .mySwiper .swiper-slide.ms1{background: url(../img/main/ms1_1.jpg) no-repeat center/cover;}
.m1 .mySwiper .swiper-slide.ms2{background: url(../img/main/ms1_2.jpg) no-repeat center/cover;}
.m1 .mySwiper .swiper-slide.ms3{background: url(../img/main/ms1_3.jpg) no-repeat center/cover;}
.m1 .mySwiper .swiper-slide.ms4{background: url(../img/main/ms1_4.jpg) no-repeat center/cover;}

.m1_anibox{position: absolute; left: -8%; bottom: -9%; width: 20%; z-index: 10;}
.m1_ani{
    -webkit-animation: balloon1 5s ease-in-out infinite;
    -moz-animation: balloon1 5s ease-in-out infinite;
    -o-animation: balloon1 5s ease-in-out infinite;
    animation: balloon1 5s ease-in-out infinite;}
.m1_anibox img{width: 100%;}

.m1_scroll{position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); z-index: 5; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.m1_scroll .mouse{width: 30px; height: 52px; border: 2px solid #ddd; border-radius: 100px; position: relative;}
.m1_scroll .mouse::after{content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ddd; position: absolute; left: 50%; transform: translateX(-50%); top: 10px;
    animation: mouse 2s linear infinite}
.m1_scroll p{margin-top: 10px; font-weight: 700; letter-spacing: 3px; color: #adadad; font-size: 0.9rem;}

@keyframes mouse {
    0% {
        scale: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        transform: translateX(-50%) translateY(20px) scale(0);
    }
}

@-webkit-keyframes balloon1 {
    0%, 100% {
        -webkit-transform: translateY(0) rotate(-6deg);
    }
    50% {
        -webkit-transform: translateY(-20px) rotate(8deg);
    }
}
@-moz-keyframes balloon1 {
    0%, 100% {
        -moz-transform: translateY(0) rotate(-6deg);
    }
    50% {
        -moz-transform: translateY(-20px) rotate(8deg);
    }
}
@-o-keyframes balloon1 {
    0%, 100% {
        -o-transform: translateY(0) rotate(-6deg);
    }
    50% {
        -o-transform: translateY(-20px) rotate(8deg);
    }
}
@keyframes balloon1 {
    0%, 100% {
        transform: translateY(0) rotate(-6deg);
    }
    50% {
        transform: translateY(-20px) rotate(8deg);
    }
}

/*m2*/
.m2{padding: 140px 0;}
.m2_bg{margin: auto; background: #185194; color: #fff; box-sizing: border-box; padding: 44px 80px; border-radius: 140px; overflow: hidden; position: relative;}
.m2_bg .txt1{font-size: 1.6rem; font-weight: 700;}
.m2_bg .txt2{font-size: 1.1rem; font-weight: 200; line-height: 1.5; margin-top: 24px;}

.m2_cir{position: absolute; right: -4%; bottom: -10vh; width: 400px; height: 400px; background: rgba(255,255,255,0.1); border-radius: 50%;}
.m2_cir2{position: absolute; right: 18%; bottom: -13vh; width: 200px; height: 200px; background: rgba(255,255,255,0.1); border-radius: 50%;}

.m2_more{position: absolute; right: 80px; bottom: 44px; z-index: 10;}
.m2_more a{display: inline-block; background: rgba(255,255,255,0.3); padding: 10px 24px; border-radius: 10px; color: #214268; transition: all 0.4s;}
.m2_more a:hover{background: rgba(255,255,255,0.5);}

.m2_icon{width: 160px; position: absolute; top: 69px; right: 21%; z-index: 1;}
.m2_icon img{width: 100%;}

/*m3*/
.m3{margin-bottom: 14vh;}
.m3 .inner{margin: auto; text-align: center;}
.m3 .s_tit{font-size: 1rem; font-weight: 700; letter-spacing: 3px; color: #87B540;}
.m3 .b_tit{font-size: 2.6rem; font-weight: 200; margin-top: 8px;}
.m3 .b_tit span{font-weight: 700;}
.m3 .video{width: 100%; margin: 8vh auto 0; position: relative;}
.m3 .video video{width: 100%; outline: 0; border: 0; margin-left: -1px;}
.m3 .video iframe{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

/*m4*/
.m4{background: #194E8D; padding: 14vh 0; overflow: hidden;}
.m4_bg1{width: 200px; height: 70%; background: #6685ab; border-radius: 100px; position: absolute; top: -80px; left: 5%; opacity: 0.3;}
.m4_bg2{width: 300px; height: 300px; border-radius: 50%; background: #6685ab; opacity: 0.3; position: absolute; left: 20%; bottom: -15%;}
.m4_ul{margin: auto; font-size: 0;}
.m4_ul > li{display: inline-block; vertical-align: middle;}
.m4_ul > li.left{width: 55%; color: #fff;}
.m4_ul > li.right{width: 45%;}
.m4_ul > li.left .txt1{font-size: 2.4rem; font-weight: 700;}
.m4_ul > li.left .txt2{font-size: 1.1rem; line-height: 1.5; font-weight: 200; margin: 3vh 0 6vh;}
.m4_btn{display: inline-block; font-size: 1rem; font-weight: 500; letter-spacing: 1px; padding: 8px 30px; border-radius: 30px; border: 1px solid #fff;}

.m4_icon{width: 100%; font-size: 0;}
.m4_icon > li{display: inline-block; vertical-align: middle; width: 33.333%;}
.m4_icon > li img{width: 70%; margin: auto; display: block;}

/*m5*/
.m5{padding: 16vh 0 0;}
.m5_ul{width: 87%; margin-left: 13%; font-size: 0;}
.m5_ul > li{display: inline-block; vertical-align: top;}
.m5_ul > li.gallery_tit{width: 23%;}
.m5_ul > li.gallery_tit .txt1{font-size: 0.95rem; font-weight: 700; color: #87B540; letter-spacing: 3px;}
.m5_ul > li.gallery_tit .txt2{font-size: 2.4rem; font-weight: 700; margin: 6px 0 0;}
.m5_ul > li.gallery_tit .txt3{text-align: end;}
.m5_ul > li.gallery_tit .txt3 img{width: 140px; display: inline-block; margin-right: 50px;}
.m5_ul > li.gallery_tit .m5_more{font-size: 0.9rem; font-weight: 500; display: inline-block; background: #194E8D; color: #fff; border-radius: 20px;
padding: 4px 10px; text-transform: uppercase; letter-spacing: 2px; margin: 2vh 0 12vh;}
.m5_ul > li.gallery_con{width: 77%; height: 100%; overflow: hidden;}

/*m6*/
.m6{padding: 16vh 0 20vh;}
.m6_ul{margin: auto; font-size: 0;}
.m6_ul > li{display: inline-block; vertical-align: top; width: 24%; margin-right: 1%;}
.m6_ul > li img{width: 100%;}
.m6_ul > li:last-child{margin-right: 0;}

/*m7*/
.m7{margin-top: 14vh; width: 100%; height: auto; padding: 10vh 0; background: #f7f7f7;}
.m7 .inner2{margin: auto; font-size: 0;}
.m7 .inner2 > div{display: inline-block; vertical-align: top; width: 50%;}
.m7 .inner2 > .m7_left{width: 45%; padding-right: 5%;}
.m7 .inner2 > .m7_right{width: 55%;}
.m7 .inner2 > div .txt1{font-size: 0.95rem; font-weight: 700; color: #87B540; letter-spacing: 3px;}
.m7 .inner2 > div .txt2{font-size: 2.4rem; font-weight: 700; margin: 6px 0 0;}
.m7 .inner2 > div > div{width: 100%; margin-top: 40px;}
.m7 .inner2 > .m7_right > div{width: 100%; overflow: hidden;}
.m7_tit{width: 100%; font-size: 0;}
.m7_tit > div{display: inline-block; vertical-align: baseline; width: 50%;}
.m7_tit .m7_tit_right{text-align: end;}
.m7_tit .m5_more{font-size: 0.9rem; font-weight: 500; display: inline-block; background: #194E8D; color: #fff; border-radius: 20px;
padding: 4px 10px; text-transform: uppercase; letter-spacing: 2px;}