@charset "utf-8";


/* ===================================
	layout
 =================================== */

/* 공통 */
.wrap {position:relative; min-width:320px; overflow:hidden; background:#fefefe;}
.fx{display: flex; display: -ms-flex; display: -webkit-flex;}
.grid{max-width:1400px; width:100%; margin:0 auto;}
@media (max-width:1600px) {
	.grid{padding:0 40px;}
}
@media(max-width:768px){
	.grid{padding:0 5px;}
}


header{position: fixed; width:100%; height:100px; left:0; top:0;  z-index: 10000;}
header .h_container{position: relative; width:100%; height:100%; display: flex; display: -ms-flex; display: -webkit-flex; justify-content: space-between; align-items: center; padding:0 45px; transition: all .3s ease; }
header .h_container::before{position: absolute; left:50%; top:100%; transform: translate(-50%,0); content:''; width:100%; height:0; background:#fff; border-top:1px solid #ddd; opacity: 0; transition: all .3s ease;}
header .h_container .logo{left:140px; width:79px; height:43px; position: relative; transition: all .3s ease;}
header .h_container .logo span{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:100%; transition: all .3s ease;}
header .h_container .logo span:nth-child(1){opacity: 1;}
header .h_container .logo span:nth-child(2){opacity: 0;}

header .h_container nav{position: absolute; left:60%; top:50%; transform: translate(-50%,-50%); height:100%; max-width:1200px; width:100%; transition: all .3s ease;}
header .h_container nav > ul {display: flex; display: -ms-flex; display: -webkit-flex; width:100%; height:100%; transition: all .3s ease;}
header .h_container nav > ul > li{width:10%; height:100%; transition: all .3s ease;}
header .h_container nav > ul > li > a{display: flex; display: -ms-flex; display: -webkit-flex; width:100%; height:100%; align-items: center; justify-content: center; text-align: center; color:#fff; font-weight: 500; font-size:16px; transition: all .3s ease; position: relative; overflow: hidden;}
header .h_container nav > ul > li > a::before {position: absolute; left:50%; bottom:105%; transform: translate(-50%,0) rotate(15deg); content:''; width:170px; height:170px; border-radius: 100% 0% 100% 0% / 88% 15% 85% 15% ; background:#283890; transform-origin: left bottom;  opacity: 0; transition: all .3s ease;}

header .h_container nav > ul > li > ul{position: absolute; left:80px; top:100%;height:80px; max-width:850px; display: none; }
header .h_container nav > ul > li:nth-child(3) > ul{left:135px;}
header .h_container nav > ul > li:nth-child(4) > ul{left:110px;}
header .h_container nav > ul > li > ul > li {height:100%; padding: 0 20px;}
header .h_container nav > ul > li > ul > li > a{width:100%; height:100%; display: flex; display: -ms-flex; display: -webkit-flex; align-items: center; font-weight: 500; color:#a19683; transition: all .3s ease;font-size:15px;}

header .h_container .site_map_btn{width:24px; height:20px; position: relative; cursor: pointer;}
header .h_container .site_map_btn span{width:100%; height:2px; background:#fff; position: absolute; transform-origin: center; transition: all .3s ease;}
header .h_container .site_map_btn span:nth-child(1){left:50%; top:0; transform: translate(-50%,0);}
header .h_container .site_map_btn span:nth-child(2){left:50%; top:50%; transform: translate(-50%,-50%);}
header .h_container .site_map_btn span:nth-child(3){left:50%; bottom:0; transform: translate(-50%,0);}

header.sub{box-shadow: 0 10px 20px rgba(0, 0, 0, .1);}
header.sub .h_container{background:rgba(255, 255, 255, 1);}
header.sub .h_container nav > ul > li > a{color:#5c514b;}
header.sub .h_container .site_map_btn span{background:#222;}
header.sub .h_container .logo span:nth-child(1){opacity: 0;}
header.sub .h_container .logo span:nth-child(2){opacity: 1;}

/* hover */
header .h_container.on{background:#fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .2);}
header .h_container.on nav > ul > li > a{color:#5c514b;}
header .h_container.on nav > ul > li > ul {opacity: 1; height:80px; box-shadow:0 10px 20px rgb(55 55 255 / 10%); background:#fff;}
/*header .h_container.on::before{opacity: 1; height:80px; box-shadow:0 10px 20px rgb(0 0 0 / 10%); }*/
header .h_container.on nav > ul > li{color:#a19683;}
header .h_container nav > ul > li:hover > a{color:#283890; font-weight: 700; }
header .h_container nav > ul > li:hover > a::before{bottom:calc(100% - 20px); opacity: 1; }
header .h_container nav > ul > li:hover > ul{display: flex; display: -ms-flex; display: -webkit-flex; animation: fade_in .3s linear forwards; animation-timing-function:ease; }
@keyframes fade_in { from{opacity: 0;} to{opacity: 1;} }
header .h_container nav > ul > li > ul > li:hover > a{color:#283890;}
header .h_container.on .site_map_btn span{background:#a19683;}
header .h_container.on .logo span:nth-child(1){opacity: 0;}
header .h_container.on .logo span:nth-child(2){opacity: 1;}


/* site_map */
.site_map{position: fixed; left:50%; top:50%; transform: translate(-50%, -50%); width:100%; height:100vh; z-index: 50000; display: none; background:#fff;}
.site_map::before{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:5000px; height:5000px; border-radius: 100%; background:#666;  transition: all .3s ease;}
.site_map::after{position: absolute; right:0; bottom:0; content:''; background:url(../images/main/site_map_bg.png); width:549px; height:684px;}
.site_map .container{max-width:1400px; width:100%; height:100%; margin:0 auto; position: relative; overflow: hidden; display: flex; display: -ms-flex; display: -webkit-flex; flex-direction: column; justify-content: space-between; z-index: 100;}
.site_map .container *{box-sizing: border-box; transition: all .3s ease;}
.site_map .container .top{display: flex; display: -ms-flex; display: -webkit-flex; width:100%; height:150px; align-items: center; justify-content: space-between; padding:20px;}
.site_map .container .close{width:30px; height:30px; position: relative; cursor: pointer;}
.site_map .container .close span{position: absolute; left:50%; top:50%;  content:''; width:100%; height:2px; background:#fff;}
.site_map .container .close span:nth-child(1){transform: translate(-50%,-50%) rotate(-45deg);}
.site_map .container .close span:nth-child(2){transform: translate(-50%,-50%) rotate(45deg);}
.site_map .container > ul{width:100%; display: flex; display: -ms-flex; display: -webkit-flex;}
.site_map .container > ul > li{width:20%; padding:20px; position: relative;}
.site_map .container > ul > li > h2{font-size:36px; font-weight: 600; color:#fff; padding: 40px 0; border-bottom:1px solid #fff; overflow: hidden;}
.site_map .container > ul > li > h2 span{transform: translateY(-100%); vertical-align: baseline;}
.site_map .container > ul > li > ul{padding: 40px 0;}
.site_map .container > ul > li > ul > li{margin-bottom:40px; position: relative;}
.site_map .container > ul > li > ul > li:last-child{margin:0;}
.site_map .container > ul > li > ul > li > a{font-size: 20px; font-weight: 500; color:#fff; width:100%; opacity: .8; position: relative;}
.site_map .container > ul > li > ul > li > a::after{position: absolute; left:0; bottom:-10px; width:0; height:3px; background:#fff; content:''; transition: all .3s ease;}
.site_map .container .bottom{width:100%; border-top:1px solid rgba(255, 255, 255, .3); padding:40px 20px; margin-top:auto;}
.site_map .container .bottom ul{display: flex; display: -ms-flex; display: -webkit-flex;}
.site_map .container .bottom ul li{color:#fff; font-weight: 400; opacity: .8; margin-right:40px;}
.site_map .container .bottom ul li .desc1{width:40px; font-weight: bold;}

.site_map .container > ul > li:hover > h2 span{transform: translateY(0);}
.site_map .container > ul > li:hover > h2{color:#fff; border-bottom-color:#fff;}
.site_map .container > ul > li:hover > ul > li:hover a::after{width:100%;}
.site_map .container > ul > li:hover > ul > li > a{color:#fff;}
.site_map .container > ul > li:hover > ul > li:hover a{color:#fff; opacity: 1;}

.site_map.on::before{transform: translate(-50%, -50%) scale(0); animation: site_map_on 2000ms linear forwards; animation-timing-function:ease;}
@keyframes site_map_on { from{transform: translate(-50%, -50%) scale(0);} to{transform: translate(-50%, -50%) scale(1);} }
.site_map::after,
.site_map.on .container .top,
.site_map.on .container .bottom,
.site_map.on .container > ul > li > h2,
.site_map.on .container > ul > li > ul{animation: site_map_list_fade 1s linear  forwards; animation-delay: 800ms; animation-timing-function:ease; opacity: 0;}
@keyframes site_map_list_fade { from{opacity: 0;} to{opacity: 1;} }


@media(max-width:950px){
	.site_map .container .bottom ul li .desc1{width:50px; display: block;}

}

/* footer */
.footer .container{width:100%; height:100%; background:#112047;}
.footer .f_menu{display: block; background:#1f130f; position: relative;}
.footer .f_menu .top{position: fixed; width:60px; height:60px; right:40px; bottom:40px; background:#fff; box-shadow: 10px 10px 20px rgba(0, 0, 0, .2); z-index: 100; border-radius: 20px 0 20px 0;}
.footer .f_menu .top span{width:100%; height:100%;}
.footer .f_menu .top span::before{position: absolute; left:50%; top:calc(50% - 3px); transform: translate(-50%,0) rotate(45deg); content:''; width:14px; height:14px; border:2px solid #1c1c1c; transform-origin: center; border-bottom:transparent; border-right:transparent;}
.footer .f_menu ul{display: flex; display: -ms-flex; display: -webkit-flex; justify-content: center; padding:50px 0;  max-width:1400px; width:100%; margin:0 auto; transition: all .3s ease;}
.footer .f_menu ul li{margin-right:20px;}
.footer .f_menu ul li:last-child{margin:0;}
.footer .f_menu ul li a{color:#fff; font-size:18px; font-weight: 700; transition: all .3s ease;}
.footer .content_group{padding:50px 0;}
.footer .f_info{max-width:1400px; width:100%; margin:0 auto; display: flex; display: -ms-flex; display: -webkit-flex;}
.footer .f_info .logo_group{width:15%; display: flex; display: -ms-flex; display: -webkit-flex;}
.footer .f_info .logo,{padding: 0 10px; width:100%; text-align: center;}
.footer .f_info .info{width:85%; padding:0 20px;}
.footer .f_info .info p{font-weight: 400; font-size:16px; margin-bottom:40px; line-height: 1.4; color:#fff;}
.footer .f_info .info p .tel{margin-right:20px;}
.footer .f_info .info .cype{font-size:12px; font-weight: 300; margin:0;}

/* sub_visual */
.sub_visual{width:100%; height:500px; background:#09f; display: flex; display: -ms-flex; display: -webkit-flex; align-items: center; justify-content: center; transition: all .3s ease;}
.sub_visual .container{max-width:1400px; width:100%; margin:0 auto;}
.sub_visual h2{display: block; font-size:65px; text-align: center; font-weight: 600; color:#fff;padding-top:50px;}
.sub_visual h2 span{position: relative; z-index: 1; transition: all .3s ease;}
.lnb{max-width:1400px; width:100%; height:80px; margin:0 auto; display: flex; display: -ms-flex; display: -webkit-flex; align-items: center;  transform: translateY(-100%); transition: all .3s ease; z-index: 500; position: relative;}
.lnb .home{display: flex; display: -ms-flex; display: -webkit-flex; width:80px; height:80px; background:#fff; align-items: center; justify-content: center; border-radius: 0 0 0 0; position: relative; border-bottom:1px solid #ddd; border-right:1px solid #ddd; transition: all .3s ease;}
.lnb .home::before{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:27px; height:37px; background:url(../images/lnb_home_icon.png) no-repeat center / 100%;}
.lnb .menu_group{width:calc(100% - 80px); height:100%; background:#fff; border-radius: 0; border-bottom:1px solid #ddd; display: flex; display: -ms-flex; display: -webkit-flex;}
.lnb .menu_group > ul{display: flex; display: -ms-flex; display: -webkit-flex; height:100%; width:100%;}
.lnb .menu_group > ul > li{max-width:310px; width:100%; cursor: pointer; display: block; position: relative; border-right:1px solid #ddd;}
.lnb .menu_group > ul > li::after{position: absolute; right:35px; top:50%; transform: translate(0,-50%); content:''; width:12px; height:21px; background:url(../images/lnb_icon2.png) no-repeat center / 100%; transition: all .3s ease;}
/* .lnb .menu_group > ul > li:hover::after{transform: translate(0,-50%) rotateX(180deg);} */
.lnb .menu_group > ul > li > span{width:100%; height:100%; display: flex; display: -ms-flex; display: -webkit-flex; align-items: center; font-size:18px; font-weight: 500; color:#1c1c1c;  padding:0 35px;}
.lnb .menu_group > ul > li > ul {width:100%; background:#fff; box-shadow: 10px 20px 20px rgba(0, 0, 0, .1); border-top:1px solid #ddd; display: none; border-radius: 0; overflow: hidden; border-top:3px solid #1f130f; position: absolute; left:50%; top:100%; transform: translate(-50%,0); content:'';}
.lnb .menu_group > ul > li > ul > li{width:100%;}
.lnb .menu_group > ul > li > ul > li > a{display: block; padding:20px 35px; transition: all .3s ease; font-weight: 500;}
.lnb .menu_group > ul > li > ul > li:hover > a{background:#27b251; color:#fff; }
/* .lnb .menu_group > ul > li:hover > ul{animation: lnb_hover 700ms linear forwards; animation-timing-function:ease; display: block;}
@keyframes lnb_hover { from{opacity: 0;} to{opacity: 1;} } */
.lnb .menu_group > p{position: absolute; right:35px; top:50%; transform: translate(0,-50%); content:''; display: flex; display: -ms-flex; display: -webkit-flex; align-items: center; font-size:20px; font-weight: 500; color:#8b7f6e;}
.lnb .menu_group > p span{vertical-align: baseline; font-weight: 700;}
.lnb .menu_group > p i{margin-left:20px;}
.sub-container{margin-top:-80px;}
.sub_title{padding:80px 0; max-width:1400px; width:100%; margin:0 auto; font-weight: 600; font-size:50px; text-align: center; border-bottom:1px solid #ddd; color: #483a10;}

.sub_visual.nth-1 {background:url(../images/sub-top01.jpg) no-repeat center / cover;}
.sub_visual.nth-2 {background:url(../images/sub-top02.jpg) no-repeat center / cover;}
.sub_visual.nth-3 {background:url(../images/sub-top03.jpg) no-repeat center / cover;}
.sub_visual.nth-4 {background:url(../images/sub-top04.jpg) no-repeat center / cover;}
.sub_visual.nth-5 {background:url(../images/sub-top05.jpg) no-repeat center / cover;}
.sub_visual.nth-6 {background:url(../images/sub-top06.jpg) no-repeat center / cover;}
.sub_visual.nth-7 {background:url(../images/sub-top07.jpg) no-repeat center / cover;}
.sub_visual.nth-8 {background:url(../images/sub-top08.jpg) no-repeat center / cover;}
.sub_visual.nth-9 {background:url(../images/sub-top09.jpg) no-repeat center / cover;}
.sub_visual.nth-10 {background:url(../images/sub-top10.jpg) no-repeat center / cover;}
.sub_visual.nth-11 {background:url(../images/sub-top11.jpg) no-repeat center / cover;}



@media(max-width:1440px){
	header .h_container{padding:0 20px;}
	header .h_container nav{left:55%; max-width:750px;}
	header .h_container nav > ul > li > a{font-size:15px;}
	.site_map .container .top{height:100px;}
	.lnb{width:97%; height:70px;}
	.lnb .home{width:70px; height:70px;}
	.lnb .menu_group > p{font-size:18px;}
	.lnb .menu_group > ul > li{max-width:250px;}
	.lnb .menu_group > ul > li > span{padding:0 25px;}
	.sub_visual h2{font-size:55px;}
	.sub_title{font-size:40px;}
	.footer .f_menu ul{padding:20px 0;}
	.footer .f_menu ul li a{font-size:16px;}
}

@media (max-width:1200px) {
	header .h_container nav{left:60%;}
}
@media(max-width:1024px){
	header{height:100px;}
	header .h_container nav{display: none;}
	header .h_container .logo{left:-10px;}
	header.sub .h_container{background:#0a394d;}
	.site_map .container > ul{margin-top:80px;}
	.site_map .container > ul > li > h2{font-size:21px; padding:0 0 20px;}
	.site_map .container > ul > li > ul{padding:20px 0;}
	.site_map .container > ul > li > ul > li{margin-bottom:20px;}
	.site_map .container > ul > li > ul > li > a{font-size:16px;}
	.footer .f_info .logo1, .footer .f_info .logo2{padding:0 30px;}
}

@media (max-width:1000px) {
	.lnb .menu_group > p{display: none;}
	.lnb .menu_group > ul{width:100%;}
	.lnb .menu_group{ background: url(../images/common/lnb_icon3.png) #fff no-repeat right 20px center;}
}

@media(max-width:768px){	
	.site_map .container{padding:0 20px; justify-content: flex-start;}
	.site_map .container > ul{flex-direction: column;}
	.site_map .container > ul > li{display: flex; display: -ms-flex; display: -webkit-flex; width:100%; border-bottom:1px solid rgba(255, 255, 255, .15); padding:30px 0;}
	.site_map .container > ul > li:last-child{margin:0;}
	.site_map .container > ul > li > h2{padding:10px 0 0; max-width:130px; min-width:130px; margin-right:20px; border:0;}
	.site_map .container > ul > li > ul{width:calc(100% - 150px); display: flex; display: -ms-flex; display: -webkit-flex; padding:0; flex-wrap: wrap;}
	.site_map .container > ul > li > ul > li{width:25%; margin:10px;}
	.site_map .container > ul > li > ul > li:last-child{margin:10px;}
	.site_map .container > ul > li:hover > ul > li > a{display: block;}
	.site_map .container .bottom{display: none;}
	.site_map::after{width:350px;}
	.lnb{height:60px;}
	.lnb .home{width:60px; height:60px; border-radius: 0;}
	.lnb .menu_group{border-radius: 0; width:calc(100% - 60px);}
	.sub_visual h2{font-size:45px;}
	.sub_visual h2 span::after{width:46px; height:44px;}
	.sub_title{font-size:36px;}
	.sub_visual{height:400px;}
	.lnb .menu_group > ul > li > span{font-size:14px;}

	.footer .f_info {flex-direction: column; align-items: center;}
	.footer .f_info .logo_group{display:none;}
	.footer .f_info .info{width:80%; text-align: center;}
	.footer .f_info .logo1{border-left:0;}
	.footer .f_info .logo2{border-right:0;}
	.footer .f_info .logo1, .footer .f_info .logo2{padding:0; display: flex; display: -ms-flex; display: -webkit-flex; align-items: center; justify-content: center;}
}
@media (max-width:660px) {
	.lnb .menu_group{ background: #fff;}
	.lnb .menu_group > ul > li {max-width: 100%;}
	.lnb .menu_group > ul > li:last-child {border-right: 0;}
}
@media (max-width:640px) {
	.footer .f_info .info{padding:0;}
}

@media (max-width:550px) {
	.site_map .container{overflow: scroll; padding-bottom:240px;}
	.site_map .container .top{padding:20px 0; height:80px;}
	.site_map .container .top .logo{width:200px;}
	.site_map .container > ul{margin-top:0;}
	.site_map .container > ul > li{flex-direction: column; padding:20px 0;}
	.site_map .container > ul > li > h2{margin: 0 0 20px;}
	.site_map .container > ul > li > ul{width:100%;}
	.site_map .container > ul > li > ul > li{width:calc(33.3333% - 20px);}

}

@media (max-width:450px) {
	.footer .f_info .info{width:100%; padding:0 20px;}
	.footer .f_info .info p span{display: block; font-size:14px;}
	.footer .f_menu .top{right:20px; bottom:20px; width:40px; height:40px;}
	.footer .f_menu .top span::before{width:7px; height:7px;}
	.sub_visual h2{font-size:32px;padding-top:80px;}
}

@media(max-width:425px){
	header {height:100px;}
	header .h_container .logo{}
	header .h_container .site_map_btn{width:20px; height:16px;}
	header.sub .h_container{background:#0a394d;}
	.lnb{height:auto; display: block; position: relative; transform: translate(0, 0); width:100%; z-index: 100;}
	.lnb .home{width:100%; border-radius: 0; border-right:0; border-left:0; }
	.lnb .menu_group{width:100%; border-radius: 0;}
	.lnb .menu_group > ul{flex-direction: column;}
	.lnb .menu_group > ul > li{height:60px; max-width:100%; border-right:0; border-left:0; border-bottom:1px solid #ddd;}
	.lnb .menu_group > ul > li:nth-child(1){z-index: 5;}
	.lnb .menu_group > ul > li:nth-child(2){z-index: 2;}
	.sub-container{margin:0;}
	.sub_title{padding:60px 0;}
	.sub_visual{height:350px;}
	.footer .f_menu ul li a{font-size:13px;}
	.sub_visual h2 span::before{bottom:3px; height:10px;}
	.sub_title{font-size:26px;}

	.sub_visual.nth-1 {background:url(../images/sub-top01-mo.png) no-repeat center / cover;}
}