@charset "utf-8";


@keyframes scroll{
	0%{bottom:50%;}
	50%{bottom:7%;}
	100%{bottom:50%;}
}

@keyframes mvBgScale {
	0% { transform: scale(1.15); }
	100% { transform: scale(1); }
}
@keyframes mvTxt {
	0% { transform:translateY(50px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}

@keyframes mv_progress {
  0% { stroke-dashoffset: 125.664px; }
  90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -125.664px; }
}
@keyframes bouncing { 	
	0% {  transform:translate(0,-5px); }
	100% { transform:translate(0,5px); }
}
@keyframes play_a {
	0% { opacity: 0; }
	50% { opacity: 0; top:70%; }
  100% { opacity: 1; top:50%; }
}

.txt_under {position: relative; display: inline-block;z-index: 1;}
.txt_under:after {content:''; display: block; width: calc(100% + 10px); height: 28px; background-color: #f7eebc; position: absolute; bottom: 0; left: -5px; z-index: -1;}


/* 최상단 */
#header {position: fixed; top: 0; left: 0; width: 100%; background-color: #e9e6d8; z-index: 98; transition:.25s;}
#header.stiky {box-shadow:0 0 5px rgba(0,0,0,0.2);}
#header .inner {display: flex; align-items:center; justify-content:space-between}
#header #logo {margin-right: 50px; }
#header #logo a {display: inline-block;   line-height: 75px;}
#header #logo img {vertical-align: middle;}
#header #logo img:nth-child(2) {display: none;}
#header #gnb_wrap {position: relative; }
#header #gnb_wrap .dep1_wrap {}
#header #gnb_wrap .dep1_con {float: left; position: relative; line-height: 75px;	}
#header #gnb_wrap .dep1_con .dep1 {display: inline-block; margin: 0 10px; padding: 0 10px;font-size: 18px; color: #321c4a; font-weight: 600; line-height: 35px; transition:.25s;}
#header #gnb_wrap .dep1_con .dep1:hover{color:#000; }
#header #gnb_wrap .dep1_con .dep1.active{color:#000; }
#header #gnb_wrap .dep1_con .dep1_1 {padding: 0 20px; border-radius:50px; background-color: #321c4a; color: #e9e6d8;}
#header #gnb_wrap .dep1_con .dep1_1:hover {background-color: #000; color: #fff;}

#header #gnb_wrap .dep2_wrap { display: none; position: absolute; top: calc(100% - 10px); left: 50%; transform:translateX(-50%); background-color: #321c4a; border-radius:10px;  padding: 15px 0;  z-index: 1;}
#header #gnb_wrap .dep2_con {width: 10em; padding:7px 0; line-height: 1;	}
#header #gnb_wrap .dep2_con .dep2 {display: block; padding: 0.2em 1.3em; font-size: 16px; color: #ddd; transition:.5s;}
#header #gnb_wrap .dep2_con .dep2:hover,
#header #gnb_wrap .dep2_con .dep2.active {color: #fff; padding-left: 1.75em; font-weight:400;}


#header .top_util {position: absolute; top:40px; right:7%;  font-family: 'Montserrat', sans-serif; }
#header .top_util li {display: inline-block; padding: 0 7px; text-align: center; position: relative;    z-index:2; letter-spacing:-0.5px;}
#header .top_util a {display:  inline-block;  transition:.25s; z-index:9999; color:#fff;}
#header .top_util a:hover { opacity: 1;}

.all_menu_btn {display: none; position: fixed ; top: 0; right: 50%; margin-right: -900px; padding: 25px; z-index: 1050; background: rgba(255,255,255,0); transition: background 0.4s;}
.all_menu_btn.active {position: fixed; z-index: 9999;}
.all_menu_btn .menu_btn {cursor: pointer; background: none; border: none; position: relative; display: block; margin: 0 0 0 auto; width: 50px; height: 45px; overflow: hidden; transition: height 0.8s;}
.all_menu_btn .menu_btn span {position: absolute; display: block; height: 4px; background: #321c4a;}
.all_menu_btn .menu_btn span.ham_top {top: 0; right: 0; width: 100%; transition: top 0.6s, transform 0.6s, background 0.6s;}
.all_menu_btn .menu_btn span.ham_btm {top: 0.7rem; right: 0; width: 70%; transition: top 0.6s, transform 0.6s, width 0.4s, background 0.6s;}
.all_menu_btn .menu_btn:hover .ham_btm {width: 100%;}
.all_menu_btn .menu_btn:before,
.all_menu_btn .menu_btn:after {position: absolute; bottom: 0; right: 0; font-family: 'Pretendard'; font-size: 13px; color: #321c4a; letter-spacing: -0.5px; transition: all 0.6s;}
.all_menu_btn .menu_btn:before {content: '전체메뉴'; }
.all_menu_btn .menu_btn:after {content: '메뉴닫기';  transform: translate(0,-100%);  opacity: 0;}
.all_menu_btn.active {}
.all_menu_btn.active {}
.all_menu_btn.active span {}
.all_menu_btn.active span.ham_top {top: 1rem;  transform: rotate(45deg);}
.all_menu_btn.active span.ham_btm {top: 1rem; width: 100%; transform: rotate(-45deg);}
.all_menu_btn.active .menu_btn {height: 65px;}
.all_menu_btn.active .menu_btn:before {opacity: 1; transform: translate(0,100%);}
.all_menu_btn.active .menu_btn:after {opacity: 1; transform: translate(0,0);}


.all_menu_btn.stiky {position: fixed; }
.all_menu_btn.stiky .menu_btn span {background: #321c4a;}
.all_menu_btn.stiky .menu_btn:before,
.all_menu_btn.stiky .menu_btn:after {color: #321c4a;}
.all_menu_btn.stiky.active  {background-color: transparent;}
/* .all_menu_btn.stiky.active .menu_btn span {background: #fff;}
.all_menu_btn.stiky.active .menu_btn:before,
.all_menu_btn.stiky.active .menu_btn:after {color: #fff;}
 */
/* 전체메뉴 */
.all_menu_wrap {visibility:hidden; opacity: 0; position: fixed; top: 0; left: 25%; right: 0; bottom: 0; overflow-x:hidden;overflow-y:auto; z-index: 999; background-color: #e9e6d8;box-shadow:-1px 0px 5px rgba(0,0,0,.3); transition:.25s;}
.all_menu_wrap .all_menu_logo {position: absolute; top: 4%; left: 8%;}
.all_menu_wrap #all_menu {width: 70%; margin: 130px auto 30px; }
.all_menu_wrap .dep1_con {display:flex;  margin-bottom: 30px; transition:.25s;}
.all_menu_wrap .dep1_con:hover {opacity: 1;}
.all_menu_wrap .dep1_con .dep1 {color: #321c4a; font-size: 21px; margin-right: 15px; font-weight: 600; word-break: keep-all; line-height: 1.2;}
.all_menu_wrap .dep2_wrap {display:flex; align-items:end; flex-wrap:wrap;}
.all_menu_wrap .dep2_con {}
.all_menu_wrap .dep2_con .dep2 {color: #321c4a; font-size: 18px; margin: 0 15px;line-height: 1.52; font-weight: 500; position: relative;}
.all_menu_wrap .dep2_con .dep2:after {content:''; display: block; width: 100%; height: 2px; background-color: transparent; position: absolute; bottom: -3px; left: 0; transition:.25s;}
.all_menu_wrap .dep2_con .dep2:hover {color: #e9e6d8;}
.all_menu_wrap .dep2_con .dep2:hover:after {background-color: #e9e6d8;}
.all_menu_wrap .all_menu_bottom {width: 70%; margin: 0 auto 20px;}
.all_menu_wrap .all_menu_bottom p {color: #fff;  font-family: 'Montserrat'; opacity: .2; font-weight: 200; letter-spacing:0;}

.dim {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 9; display: none;}



.scroll_down{position: absolute;bottom:45px;left:50%;transform:translate(-47%); cursor:pointer; z-index: 1;}
.scroll_down span{display: block;position: relative;font-size:16px;color:#fff;font-weight:400;font-family:"Roboto", serif;padding-bottom:95px;letter-spacing:0.02em;}
.scroll_down span:before{width:1px;height:115px;content:"";background: #fff;position: absolute;bottom:-45px;left:calc(50% - 1px);}
.scroll_down span:after{width:7px;height:7px;content:"";box-sizing:border-box;border-radius:100%;background: #fff;position: absolute;left:49%;bottom:20%;transform:translate(-50%);animation:scroll 2s ease-in Infinite Alternate;}


/* 하단 */
#footer {position: relative; z-index: 1;background-color: #321c4a; color: #fff;}
#footer .inner {display: flex;}
#footer .inner > div {width: 50%;}
#footer .ft_top {padding: 120px 0 60px; border-bottom: 1px solid #4a395d;}
#footer .ft_top .tit {font-weight: 600; color: #f7eebc;}
#footer .ft_top .f_gnb {}
#footer .ft_top .f_gnb li {}
#footer .ft_top .f_gnb li a {display: block; font-weight: 600; line-height: 1.5; transition:.25s;}
#footer .ft_top .f_gnb li a:hover {color: #f7eebc;}
#footer .ft_bot {padding: 60px 0 120px;}
#footer .ft_bot .f_logo {}
#footer .ft_bot .f_info_wrap {display: flex;flex-wrap:wrap; font-weight: 400;}
#footer .ft_bot .f_info_wrap .f_tit {width: 100%; margin-bottom: 15px; color: #e9e6d8;}
#footer .ft_bot .f_info_wrap .f_info {width: 325px;}
#footer .ft_bot .f_info_wrap .f_info p {line-height: 1.5; }
#footer .ft_bot .f_info_wrap .f_menu {}
#footer .ft_bot .f_info_wrap .f_menu a {display: block; line-height: 1.5; transition:.25s;}
#footer .ft_bot .f_info_wrap .f_menu a:hover {text-decoration: underline; text-underline-offset:2px;}
#footer .ft_bot .f_info_wrap .f_copyr {margin-top: 30px;width: 100%;font-weight: 300; opacity: .5;}


#top { position: fixed;bottom: -100%; right: 50%; margin-right: -900px; z-index: 9;cursor: pointer; transition:.5s;}
#top.stiky {bottom: 15px;}
#top img {display: inline-block; animation:bouncing 1s infinite alternate; }



@media all and (max-width:1830px){
	.all_menu_btn {right: 0; margin-right: 0;}
	#top {right: 15px; margin-right: 0;}
}

@media all and (max-width:1230px){ 
	.txt_under:after {height: 20px;}
	#header #gnb_wrap {display: none;}
	.all_menu_btn {display: block;padding: 18px 25px;}
	.all_menu_wrap {left: 5%; width: 95%;}
	.all_menu_wrap .dep1_con {margin-bottom: 25px;}
	.all_menu_wrap #all_menu,
	.all_menu_wrap .all_menu_bottom  {width: 100%; padding: 0 10%;}
	.all_menu_wrap .dep1_con .dep1 {display: block; width: 150px;}
	.all_menu_wrap .dep2_con .dep2 {}

}
@media all and (min-width:821px){
	.all_menu_wrap .dep2_wrap {display: flex !important; margin: 0!important; padding: 0!important; height: auto !important;}
}
@media all and (max-width:820px){ 
	#header #logo img {width: 200px;}
	.all_menu_btn {top: 5px; padding: 15px;}
	.all_menu_btn .menu_btn {width: 45px; height: 40px;}
	.all_menu_btn.active .menu_btn {height: 55px;}
	.all_menu_btn .menu_btn:before, .all_menu_btn .menu_btn:after {font-size: 13px;}
	.all_menu_wrap .all_menu_logo {top: 15px; left: 15px;}
	.all_menu_wrap .all_menu_logo img {width: 200px;}
	.all_menu_wrap #all_menu,
	.all_menu_wrap .all_menu_bottom {padding: 0 20px;}
	.all_menu_wrap #all_menu {margin-top: 100px; padding-bottom: 20px;}

	.all_menu_wrap .dep1_con {flex-wrap:wrap; margin-bottom: 0; opacity: 1;}
	.all_menu_wrap .dep1_con .dep1 {width: 100%;  line-height: 45px; padding: 0 15px; font-size: 18px; position: relative; margin: 0;}
	.all_menu_wrap .dep1_con .dep1_more:after,
	.all_menu_wrap .dep1_con .dep1_more:before {content: ''; position: absolute; top: 50%; right: 15px; width: 0.8em; height: 1px; background: #777b7d; transition: background 0.5s, transform 0.5s;}
	.all_menu_wrap .dep1_con .dep1_more:after {transform: translate(0,-50%) rotate(90deg);}
	.all_menu_wrap .dep1_con .dep1_more:before {transform:translate(0,-50%);}
	.all_menu_wrap .dep1_con.active .dep1_more:after,
	.all_menu_wrap .dep1_con.active .dep1_more:before {background: #fff; height: 1px;}
	.all_menu_wrap .dep1_con.active .dep1_more:after {transform: translate(0,-50%) rotate(0);}
	.all_menu_wrap .dep1_con.active .dep1 {color: #fff;background-color: #321c4a;}
	.all_menu_wrap .dep2_wrap {display: none; width: 100%; padding: 15px; background-color: #f7f4e8; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
	.all_menu_wrap .dep2_wrap.active {/* height: auto !important; */ padding: 15px !important; flex-wrap:wrap; }
	.all_menu_wrap .dep2_con {width: 100%;}
	/* .all_menu_wrap .dep2_wrap.active .dep2_con .dep2, */
	.all_menu_wrap .dep2_con .dep2 {display: block; width: 100%; line-height: 35px; font-size: 16px; margin: 0; color: #333;}
	.all_menu_wrap .dep2_con:hover .dep2 {color: #e9e6d8;}
	.all_menu_wrap .dep2_con .dep2:after {display: none;}

	
	
	.m { display:block;}	
	.pc { display:none;}

	.scroll_down {bottom: 40px;}
	.scroll_down span {font-size: 14px; padding-bottom: 70px;}
	.scroll_down span:before {height: 100px;}
	@keyframes scroll{
		0%{bottom:50%;}
		50%{bottom:20%;}
		100%{bottom:50%;}
	}

	#footer .ft_top {padding: 60px 0 30px;}
	#footer .ft_bot {padding: 30px 0 60px;}
	#footer .ft_bot .inner {flex-direction:column;}
	#footer .ft_bot .inner > div {width: 100%;}
	#footer .ft_bot .f_logo {margin-bottom: 30px;}

	#top {width: 40px;}
	
}
@media all and (max-width:520px){
	.txt_under:after {height: 15px; left: -2px; width: calc(100% + 4px);}
	#footer .ft_top .f_gnb li a {font-size: 17px;}
	#footer .ft_bot .f_logo img {width: 200px;}
	#footer .ft_bot .f_info_wrap .f_tit {margin-bottom: 10px;}
	#footer .ft_bot .f_info_wrap,
	#footer .ft_bot .f_info_wrap .f_menu {font-size: 13px;}
	#footer .ft_bot .f_info_wrap .f_info {width:-webkit-fill-available; padding-right: 0; padding-bottom: 10px;}
	#footer .ft_bot .f_info_wrap .f_menu {width: 100px;}
}