/*
font-family: 'Pretendard';
font-family: 'NotoSerifKR';
font-family: 'NanumSquare';
font-family: 'Noto Sans KR', sans-serif;
*/
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
	font-family: 'NotoSerifKR';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

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

/*공통*/
.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;}

.color1{color: #0f1b30;}
.color2{color: #6fa088;}

/*헤더*/
.header{width: 100%; height: 80px; background: #fff; position: fixed; left: 0; top: 0; overflow: hidden; z-index: 70; transition: all 0.4s; z-index: 99;}
.header::after{content: ''; width: 100%; height: 1px; background: #d6d6d6; position: absolute; left: 0; top: 80px; opacity: 0; transition:  all 0.4s; z-index: -1;}
.header:hover::after{opacity: 1;}
.header:hover{height: 270px;}
.header .inner2{margin: 24px auto 0; font-size: 0;}
.header .inner2 > div{display: inline-block; vertical-align: top;}
.header .inner2 > div.h_logo{width: 140px;}
.header .inner2 > div.h_nav{width: calc(100% - 440px); margin-top: 11px; box-sizing: border-box; padding-left: 60px;}
.header .inner2 > div.h_etc{width: 300px; text-align: end; margin-top: 6px;}

.header .inner2 > div.h_logo img{width: 100%;}

.nav_main{width: 100%; font-size: 0;}
.nav_main > li{display: inline-block; vertical-align: top; width: 22%; text-align: center; position: relative;}
.nav_main > li::after{content: ''; width: 100%; height: 3px; background: #4ca585; opacity: 0; position: absolute; left: 0; top: 44px; z-index: 85; transition: all 0.4s;}
.nav_main > li:hover::after{opacity: 1;}
.nav_main > li a{font-size: 0.95rem; color: #333;}

.nav_sub{margin-top: 48px;}
.nav_sub > li{width: 90%; margin: auto;}
.nav_sub > li a{font-size: 0.9rem; word-break: keep-all; display: block; padding-bottom: 12px; transition: all 0.4s;}
.nav_sub > li a:hover{color: #4ca585;}

.sns_wrap{display: inline-block; vertical-align: top; width: 154px;}
.sns{width: 100%; font-size: 0; display: flex; justify-content: space-between; align-items: center;}
.sns > li{position: relative;}
.sns > li img{transition: all 0.4s;}
.sns > li img:nth-child(2){opacity: 0; position: absolute; left: 0; top: 0;}
.sns > li:hover img:nth-child(1){opacity: 0;}
.sns > li:hover img:nth-child(2){opacity: 1;}

.lang{display: inline-block; width: 70px; background: #b3b3b3; height: 26px; border-radius: 14px; margin: 0 10px 0 14px; overflow: hidden; box-sizing: border-box; padding: 5px 0; transition: all 0.4s;}
.lang:hover{overflow: visible; height: 104px; background: #4ca585;}
.lang > li a{display: block; text-align: center; font-size: 0.9rem; color: #fff; letter-spacing: 2px; font-weight: 700; padding-bottom: 8px;}
.lang > li:nth-last-child(1) a{padding-bottom: 0;}

.menu{display: inline-block; vertical-align: top; margin-top: -3px; position: relative; z-index: 99;}
.menu i{color: #b3b3b3; font-size: 1.8rem; transition: all 0.4s;}
.menu i.xi-close{opacity: 0; color: #fff; position: absolute; left: 0; top: 0;}
.menu i.xi-apps.is-none{opacity: 0;}
.menu i.xi-close.is-block{opacity: 1;}

.sitemap{width: 100%; height: 100vh; background: #4ca585; color: #fff; position: fixed; top: 0; transform: translateX(100%); transition: all 0.4s;}
.sitemap .inner{position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%);}
.sitemap .tit{font-size: 0.9rem; letter-spacing: 5px; font-weight: 600;}
.sitemap .s_logo{display: block; width: 160px; margin:1vh 0 6vh}
.sitemap .s_logo img{width: 100%;}
.sitemap .s_bg{position: absolute; right: 5%; bottom: 5%; width: 15%; opacity: 0.1;}

.s_ul{font-size: 0; display: flex;}
.s_ul > li{display: inline-block; vertical-align: top; width: 33.333%; font-size: 1rem; border-left: 1px solid rgba(255,255,255,0.4); box-sizing: border-box; padding-left: 3vw;}
.s_ul > li:nth-child(1){border-left: 0; padding-left: 0;}
.s_ul > li p.s_tit{font-size: 1.4rem; font-weight: 700; margin-bottom: 2vh; display: block;}
.s_ul > li a{display: block; margin-bottom: 1vh; font-weight: 300;}

.is-open{transform: none;}
.is-hidden{overflow: hidden;}

/*푸터*/
.footer_wrap{width: 100%; position: relative;}
.footer{width: 100%; background: #0f1b30; color: #fff; padding: 5vh 0;}
.footer .inner2{margin: auto;}
.f_logo{width: 140px; margin-bottom: 3vh;}
.f_logo img{width: 100%;}

.f_info{width: 100%; font-size: 0;}
.f_info > li{display: inline-block; vertical-align: top; width: 50%;}
.f_info > li .tit{font-size: 1.05rem; font-weight: 400; margin-bottom: 1.5vh; text-transform: uppercase;}
.f_info > li .info{font-size: 0.9rem; font-weight: 100; margin-bottom: 1vh;}
.f_info > li .copy{font-size: 0.9rem; font-weight: 200; margin-top: 2.5vh;}
.f_info > li .tit2{font-size: 0.9rem; font-weight: 300; margin-bottom: 6px;}
.f_info > li .more{font-size: 0.9rem; font-weight: 100; display: inline-block;}
.f_info > li .line::after{content:''; width: 105%; height: 2px; background: rgba(255,255,255,0.3); display: block; margin: 12px 0;}
.f_info > li .more img{display: inline-block; vertical-align: middle; width: 24px; margin-left: 6px; transition: all 0.4s;}
.f_info > li .more a:hover img{transform: translateX(4px);}

.contact{background: url(../img/f_bg.png) no-repeat center/cover; padding: 5vh 0;}
.contact .inner2{margin: auto; color: #fff;}
.contact span{display: inline-block; vertical-align: middle; margin-right: 80px; font-size: 0.9rem; font-weight: 100;}
.contact span.tit{font-size: 1.05rem; font-weight: 400; text-transform: uppercase;}

.topBtn{position: absolute; right: 10%; top: -25px; width: 48px; height: 48px; background: #4ca585; cursor: pointer;}
.topBtn i{display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 1.5rem;}

.shop_btn{position: fixed; right: 3%; bottom: 5%; width: 80px; height: 80px; background: #4ca585; border-radius: 50%; z-index: 999; transition: all 0.4s; box-sizing: border-box;}
.shop_btn a{display: block; width: 100%; height: 100%;}
.shop_btn p{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 0.9rem; color: #fff;}
.shop_btn p i{font-size: 1.6rem;}
.shop_btn:hover{box-shadow: 2px 2px 5px rgba(0,0,0,0.3);}

/*m1*/
.m1{overflow: hidden;}
.m1 .swiper-container{width: 100%; height: 100vh;}
.m1 .swiper-container .swiper-slide0{background: url(../img/main/m1_bg0.png) no-repeat center/cover;}
.m1 .swiper-container .swiper-slide1{background: url(../img/main/m1_bg1.png) no-repeat center/cover;}
.m1 .swiper-container .swiper-slide2{background: url(../img/main/m1_bg2.png) no-repeat center/cover;}
.m1 .swiper-container .swiper-slide3{background: url(../img/main/m1_bg3.png) no-repeat center/cover; background-color: #fff;}

.m1_con{max-width: 1000px; position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);}
.m1_con .txt1 img{width: 150px;}
.m1_con .txt2{font-size: 3.4rem; font-weight: 900; line-height: 1.1; margin: 1vh 0 3vh;}
.m1_con .txt3{color: #595959; line-height: 1.5; margin-bottom: 5vh;}
.m1_con .txt4{width: 45%; margin-top: 4vh;}
.m1_con .txt4 img{width: 100%;}
.m1_con .more a{background: #fff; color: #595959; font-size: 0.95rem; line-height: 1; padding: 4px 16px; transition: all 0.4s;}
.m1_con .more a span{display: inline-block; vertical-align: middle;}
.m1_con .more a span img{width: 30px; margin-left: 14px; margin-bottom: 2px; transition:  all 0.4s;}
.m1_con .more a:hover img{transform: translateX(6px);}

.swiper-slide0 .m1_con{position: relative;}
.swiper-slide0 .m1_con .txt2{font-size: 2.8rem;}
.swiper-slide0 .m1_con .txt2 span{color: #00cbcb;}
.swiper-slide0 .m1_con .txt5{width: 220px; position: absolute; right: -3vw; top: 8vh;}
.swiper-slide0 .m1_con .txt5 img{width: 100%;}

.m1_con2{top: 52%;}
.m1_con2 .more a{background: transparent; border: 1px solid #808080;}
.m1_con2 .more a:hover{border: 1px solid transparent; background: #fff;}

.m1_con3{top: 50%;}

.m1_control{width: 210px; position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); z-index: 70;}
.m1_control .swiper-pagination{display: inline-block; vertical-align: middle; text-align: left;}
.m1_control .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom: auto; left: auto;}
.m1_control .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet
{margin: 0 2px;}
.m1_control .swiper-pagination .swiper-pagination-bullet{width: 38px; height: 5px; display: inline-block; border-radius: 0; background: #8f8f8f; opacity: 1; overflow: hidden;}
.m1_control .swiper-pagination .swiper-pagination-bullet-active{opacity: 1; background: #8f8f8f; position: relative;}
.m1_control .swiper-pagination .swiper-pagination-bullet::before{content: ''; display: inline-block; position: absolute; width: 0; height: 5px; top: 0; right: 0; bottom: 0; left: 0;} 
.m1_control .swiper-pagination .swiper-pagination-bullet-active::before{background: #fff; animation: pag 4s cubic-bezier(.3,0,.3,1) forwards;}
.m1_control .swiper-pagination2{display: inline-block; vertical-align: middle; text-align: end; color: #333333;}
@keyframes pag {
	0% {		
	width: 0;
	}
	100% {		
  width: 38px;
	}
}

.m1_nav{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 80;}
.m1_nav i{font-size: 4rem; color: #adadad;}

/*m2*/
.m2{background: rgba(192,209,227,0.18); padding: 20vh 0;}
.m2_ul{width: 100%; font-size: 0;}
.m2_ul > li{display: inline-block; vertical-align: middle; width: 50%; box-sizing: border-box; overflow: hidden; position: relative;}
.m2_ul > li .swiper-container{width: 100%;}
.m2_ul > li .swiper-container .wiper-wrapper{width: 100%;}
.m2_ul > li .swiper-container .wiper-wrapper .swiper-slide{width: 100%;}

.m2_txt{width: 100%; box-sizing: border-box; padding-left: 25%;}
.m2_txt .txt1 img{width: 60px;}
.m2_txt .txt2{font-size: 3.4rem; font-weight: 900; text-transform: uppercase; line-height: 1; margin: 2.5vh 0 6vh;}
.m2_txt .txt3{font-size: 1.4rem; font-weight: 700; text-transform: uppercase;}
.m2_txt .txt4{font-size: 1.1rem; font-weight: 500; color: #4d4d4d; margin: 0.5vh 0 4vh;}
.m2_txt .txt5{font-size: 1rem; font-weight: 200; line-height: 1.6; color: #4d4d4d;}
.m2_txt .more{margin: 3vh 0;}
.m2_txt .more a{font-size: 1rem; color: #595959; border: 1px solid #a6a6a6; padding: 4px 16px; margin-top: 3vh; transition: all 0.4s;}
.m2_txt .more a span{display: inline-block; vertical-align: middle;}
.m2_txt .more a span img{width: 30px; margin-left: 14px; margin-bottom: 2px; transition:  all 0.4s;}
.m2_txt .more a span.img{position: relative;}
.m2_txt .more a span.img .arrow2{position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0;}
.m2_txt .more a:hover .img img{opacity: 0;}
.m2_txt .more a:hover .img .arrow2{opacity: 1;} 
.m2_txt .more a:hover{background: #6fa088; color: #fff; border: 1px solid transparent;}

.m2-swiper-img{align-items: center;}
.m2-swiper-img .swiper-wrapper{align-items: center;}
.m2-swiper-img .swiper-slide{display: flex; align-items: center; justify-content: center; opacity: 0.5;}
.m2-swiper-img .swiper-slide img{display: block; width: 45%;}
.m2-swiper-img .swiper-slide2 img{width: 70%;}
.m2-swiper-img .swiper-slide3 img{width: 60%;}
.m2-swiper-img .swiper-slide4 img{width: 60%;}
.m2-swiper-img .swiper-slide-active{opacity: 1;}

.m2_control{width: 60%; height: 30px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); z-index: 99;}
.swiper-button-next:after, .swiper-button-prev:after{display: none;}
.m2_control img{width: 24px;}

.m2_control2{width: 60%; height: 3vh; position: relative; margin-top: 5vh; box-sizing: border-box; padding-left: 30px;}
.m2_control2 .swiper-pagination span{font-size: 1rem; color: #666;}
.m2_control2 .swiper-pagination-current::after{content: ''; width: 80px; height: 1px; background: #666; display: inline-block; margin: 5px 10px;}

/*m3*/
.m3{padding: 20vh 0; background: url(../img/main/m3_bg.png) no-repeat; background-size: 70%; background-position: left top;}
.m3 .inner{margin: auto;}
.m3_con{width: 40%; margin-left: 60%;}
.m3_con > li{width: 100%; box-sizing: border-box; padding: 5vh 1%; border-bottom: 1px solid #d6d6d6;}
.m3_con > li:nth-last-child(1){border-bottom: 0;}

.m3_txt{width: 100%; font-size: 0;}
.m3_txt > li{display: inline-block; vertical-align: top;}
.m3_txt > li.left{width: 40%;}
.m3_txt > li.right{width: 60%;}

.m3_txt > li.left p{font-size: 1.6rem; line-height: 1.2; color: #4ca585; font-family: 'Noto Serif', 'NotoSerifKR', serif;}
.m3_txt > li.left p span{font-size: 0.95rem; font-family: 'Pretendard';}
.m3_txt > li.right p:nth-child(1){font-size: 4.4rem; color: #0f1b30; font-weight: 900; line-height: 1; letter-spacing: -2px; margin-bottom: 1.5vh; margin-top: -1vh;}
.m3_txt > li.right p:nth-child(2){font-size: 1rem; color: #666; line-height: 1.3; font-weight: 200;}
.m3_txt > li.right p.small{font-size: 3.6rem; letter-spacing: -2px;}

/*m4*/
.m4{padding: 18vh 0;}
.m4_bg{width: 100%; height: 100%; font-size: 0; position: absolute; left: 0; top: 0; z-index: -1;}
.m4_bg > li{display: inline-block; vertical-align: middle; width: 50%; height: 100%;}
.m4_bg > li.left{background: #0f1b30;}
.m4_bg > li.right{background: url(../img/main/m4_bg.png) no-repeat center/cover;}

.m4_ul{margin:auto; font-size: 0; color: #fff;}
.m4_ul > li{width: 50%; display: inline-block;}

.m4_ul .txt1 img{width: 150px;}
.m4_ul .txt2{font-size: 3.4rem; font-weight: 600; margin: 3vh 0 9vh;}
.m4_ul .txt3{font-size: 1.4rem; line-height: 1.3;}
.m4_ul .txt4{font-size: 1rem; font-weight: 100; margin: 2vh 0 10vh; line-height: 1.3;}
.m4_ul .more a{font-size: 1rem; color: #fff; border: 1px solid #fff; padding: 4px 16px; transition: all 0.4s;}
.m4_ul .more a span{display: inline-block; vertical-align: middle;}
.m4_ul .more a span img{width: 30px; margin-left: 14px; margin-bottom: 2px; transition:  all 0.4s;}
.m4_ul .more a span.img{position: relative;}
.m4_ul .more a span.img .arrow2{position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0;}
.m4_ul .more a:hover .img img{opacity: 0;}
.m4_ul .more a:hover .img .arrow2{opacity: 1;} 
.m4_ul .more a:hover{background: #fff; color: #595959; border: 1px solid transparent;}

/*m5*/
.m5{padding: 20vh 0;}
.m5_slide{width: 90%; margin-left: 10%; overflow: hidden;}
.m5_slide .swiper-container{width: 100%;}

.m5 .swiper-slide img{width: 100%;}
.m5 .txt1{color: #4ca585; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; margin: 3vh 0 0.5vh;}
.m5 .txt2{color: #717071; font-size: 1.1rem;}
.m5 .txt2::after{content: ''; display: block; width: 95%; height: 1px; background: #ccc; margin: 1.5vh 0;}
.m5 .txt3{color: #595757; font-size: 0.95rem;}
.m5 .txt3 img{display: inline-block; width: 34px; margin-right: 10px; vertical-align: middle;}

.m5 .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
	margin-top: 6vh; position: relative; left: auto; top: auto;}
.m5 .swiper-pagination-progressbar{background: #e5e5e5;}
.m5 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #bfbfbf;}

/*게시판*/
.board_top{height: 40vh; background: url(../img/board_top.png) no-repeat center/cover;}
.board_top .inner{position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); color: #fff;}
.board_top .tit{font-size: 4rem; font-weight: 700; margin-top: 2vh;}

.board_inner{margin: 14vh 0 20vh;}
.board_inner .inner{margin: auto;}
.login_div{margin-bottom: 4vh;}

.form_tit{width: 100%; display: flex; justify-content: space-between; box-sizing: border-box; padding-left: 20px;}
.form_tit p{font-size: 1.1rem; color: #404040; display: inline-block; vertical-align: middle; font-weight: 200;}
.form_tit p:nth-child(1){font-size: 2.8rem; font-weight: 700;}