@import url('reset.css'); 
body { padding-top : 120px }
.absr { position: absolute; top: 0; right: 0; } 
.skip_menu a { overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: #000; color: #fff; text-align: center; transition: none; z-index: 101; } 
.skip_menu a:focus,
.skip_menu a:active { position: relative; width: 100%; height: auto; padding: 10px; color: #fff; } 

body { overflow-x : hidden } 
body.active { overflow : hidden } 
.absl { position: absolute; top: 0; left: 0; } 
.abbr { position: absolute !important; bottom: 0; right: 0; } 
i.arrow { border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 2px; position: relative; top: -2px; } 
i.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 
i.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } 
i.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } 
i.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } 
.flex { display: flex; justify-content: space-between; flex-direction: row; } 
.relative { position : relative } 
.btn { position : relative; display : inline-block; border : 1px solid #000; border-radius: 4px; padding : 0 30px; overflow : hidden; width : auto } 
.btn_normal { position : relative; display : inline-block; border-radius: 5px; overflow : hidden; } 
.btn_sm { display : inline-block; overflow : hidden; padding : 5px 12px; font-size : 15px } 
.btn_xs { display : inline-block; overflow : hidden; padding : 2px 12px; font-size : 15px } 
.btn_md { display : inline-block; overflow : hidden; padding : 10px 25px } 
.btn_brown { background-color: #F5F3EF; color : #7a563c } 
.btn_noborder { border : transparent }
.btn_go_list { display : inline-flex; align-items: center;  justify-content : space-between; line-height : 45px;  width : 130px; padding : 0 20px; font-size : 18px }
.btn_border { border-radius : 50px }
.btn_default { display : inline-block; line-height : 45px;  width : 130px; padding : 0 20px; font-size : 18px }
.btn_gray { color : #8D8D8D; border : 1px solid #8D8D8D }
.btn_bg_gray { background-color : #8D8D8D; color : #fff }
.btn_black { background-color : #121212 !important; color : #fff !important; }
.btn_white { background-color : #fff !important; border : 1px solid #121212 !important; color : #111 !important; }

.link_more_b {
	position: absolute !important;
	top: 0;
	right: 10px;
	display: inline-flex;
	align-items: center;
    background : transparent !important;
	transform: translateY(0);
}

.link_more_b em {
	position: relative;
	z-index: 1;
	font-size: 20px;
	color: #222;
	font-weight: 500;
	background: #fff;
}

.link_more_b .circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	font-size: 2.2rem;
	color: #886C4B;
	transform: translateX(10px);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
	background-image: url('../img/common/new_link_go.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px 12px;
}

.link_more_b .circle i {
	position: relative;
}

.link_more_b .circle:before {
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	transform: Translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	transition: all 0.4s ease-in-out;
	background-position : inherit;
}

.link_more_b:hover .circle {
	color: #fff;
	background-image: url('../img/common/new_link_go_on.png')
}

.link_more_b:hover .circle:before {
	transform: Translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-color: #886C4B;
	background-color: #886C4B;
	background-image: url('../img/common/new_link_go_on.png');
	background-position : center center;
	background-repeat : no-repeat;
	background-size : 12px 12px
}

.transition { transition: all .3s ease; } 
.tabcontent { display : none } 
.tabcontent:first-child { display : block } 

.hidden { display : block; opacity : 0; width : 0; height : 0; overflow : hidden } 
.overflow { overflow : hidden } 


.center { text-align : center !important } 

.color_brown { color : #7A563C } 

.bbs_paging { margin : 40px 0; text-align : center; display : flex; justify-content: center; align-items: center; } 
.paginate_input_wrap { display : flex }
.paginate_input_wrap input { display : inline-block; width : 60px; text-align: center; border : 1px solid #ccc; font-size : 18px }
.paginate_input_wrap button { display : inline-block; width : auto }
.paginate_input_wrap * { margin : 0 5px }
.bbs_paging a { position : relative; display : inline-block; font-size : 16px; padding : 0 10px; color : #707070; font-weight: 600; } 
.bbs_paging a.active,
.bbs_paging a:hover { color : #111 } 
.bbs_paging a.active:before { content : ''; width : 10px; height : 1px; background-color: #111; position : absolute; bottom : 0px; left: calc(50% - 4px) } 
.bbs_paging a.paging_btn { width : 38px; line-height : 38px; text-align : center; background-color : #f6f6f6; border-radius : 100%; margin : 0 10px } 
.bbs_paging a.paging_btn img { filter : brightness(70%) } 
.bbs_paging a.paging_btn:hover { background-color : #111 } 
.bbs_paging a.paging_btn:hover img { filter : brightness(100%) } 



#ui-datepicker-div { display : none; width : 300px; background : #fff } 
.ui-datepicker-header { position : relative; background-color : #7a563c; color : #fff; text-align : center; padding : 12px; } 
.ui-datepicker-header .ui-datepicker-prev { cursor : pointer; position : absolute; left : 0; top : 0; height : 100%; background : url('/resource/templete/manpa/img/common/ic_prev_w.png') no-repeat center center; color : transparent } 
.ui-datepicker-header .ui-datepicker-next { cursor : pointer; position : absolute; right : 0; top : 0; height : 100%; background : url('/resource/templete/manpa/img/common/ic_next_w.png') no-repeat center center; color : transparent } 
.ui-datepicker-header .ui-datepicker-month { font-size : 15px } 
.ui-datepicker-calendar thead { background-color : #663e22 } 
.ui-datepicker-calendar thead th { border : none; color : #fff; } 
.ui-datepicker-calendar thead th span { font-size : 14px } 
.ui-datepicker-calendar tbody tr td { border : 1px solid #ededed; width : 24px; text-align : center } 
.ui-datepicker-calendar tbody tr td a,
.ui-datepicker-calendar tbody tr td.ui-state-disabled { padding : 8px; font-weight: 300; font-size : 16px } 
.ui-datepicker-calendar tbody tr td.ui-state-disabled { opacity : 0.1 } 
.ui-datepicker-calendar tbody tr td a:hover,
.ui-datepicker-calendar tbody tr td .ui-state-active { background : #7a563c; color : #fff } 

.custom_link_01 span { position : relative; top : -2px; line-height : 50px; font-size : 20px; z-index : 1 } 
.custom_link_01:hover span { color : #fff } 
.custom_link_01 sub { position : relative; top : 1px; display : inline-block; padding-left : 15px; font-size : 30px; font-weight: 300; } 
.custom_link_01:before { content : ''; position : absolute; top : 0; left : 0; height : 100%; background-color : #000; width : 0; transition : all 900ms cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 0; } 
.custom_link_01:hover:before { width : 100% } 

#topinfo { position : fixed; top : 0; left : 0; width : 100%; background-color : #F9F9F7; text-align : Right;  }
#topinfo .container { padding : 0 20px !important }
#topinfo a { display : inline-block; font-size : 16px; color : #876C4C; line-height : 45px }
#topinfo a:first-child:after { content : ''; display : inline-block; width : 1px; height : 9px; background-color : #BFBFBF; margin : 0 15px 0 20px }

header { position : fixed; top : 45px; left : 0; width : 100%; border-bottom: 1px solid #eee; z-index : 12; background: #fff;  } 
header:hover { background : #fff url('../img/common/bg_nav.png') no-repeat top 100px right } 
header.rm { top : 0; transform : inherit } 
header.active { position : fixed; top: 0px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1); transform: translate(0, 0px); transition: transform 0.4s; z-index : 99 } 
header nav { position : relative; max-width: 1500px; margin: 0 auto; padding : 0 300px } 
header #logo { width : 150px; top : 15px; left : 20px } 
header #headerSeachWrap { top : 0; height : 80px; align-items: center;} 
header .top_lang_wrap { margin : 0 20px } 
header .top_lang_wrap a { display : inline-block; color : #ACACAC; padding : 0 5px } 
header .top_lang_wrap a.active,
header .top_lang_wrap a:hover { color : #000 }
header nav div#topGmb {display : flex;align-items: flex-start;justify-content: center;/* overflow : hidden; */} 

header nav div#topGmb > ul {display : flex;align-items: flex-start;justify-content: center;/* overflow : hidden; */} 
header nav div#topGmb > ul:hover:after,
header nav div#topGmb > ul.active:after { content : ''; width : 100%; height : 1px; background-color : #eee; position :fixed; top : 80px; left : 0 } 
header nav div#topGmb { display : flex; align-items: flex-start; justify-content: center; overflow : hidden } 
header nav div#topGmb > ul { display : flex; align-items: flex-start; justify-content: center; overflow : hidden } 
header nav div#topGmb > ul:hover:after,
header nav div#topGmb > ul.active:after { content : ''; width : 100%; height : 1px; background-color : #eee; position :fixed; top : 127px; left : 0 } 
header nav div#topGmb > ul:hover ul,
header nav div#topGmb > ul.active ul { display : block } 
header nav div#topGmb > ul > li { display : inline-block; width : 120px; transition : width 0.5s ease-in-out } 
header nav div#topGmb > ul:hover > li,
header nav div#topGmb > ul.active > li { width : 150px } 
header nav div#topGmb > ul ul a { position : relative; display : block; } 
header nav div#topGmb > ul > li > a { position : relative; font-size : 20px; line-height : 80px; text-align : center } 
#topSearchPanel { width : 100%; top : 101px; left : 0; background-color: #fff; border-bottom : 1px solid #eee; height : 0; opacity : 0; overflow : hidden; transition : all .3s ease } 
header nav div#topGmb > ul > li:hover > a,
header nav div#topGmb > ul > li.active > a { color : #7A563C } 

header nav div#topGmb > ul ul {display : none;padding: 10px 0;height: 240px;} 
header nav div#topGmb > li:last-child ul { border-right: 1px solid #eee } 
header nav ul ul a { position : relative; text-align : center } 
header nav ul ul a span { position : relative; display : inline-block; background-color : #fff; padding : 5px; font-size : 16px; border-bottom : 1px solid transparent; z-index : 2 } 
header nav ul ul a:hover span { border-bottom : 1px solid #000 }

header.active nav div#topGmb > ul:hover:after, header.active nav div#topGmb > ul.active:after { top : 80px }
header.mobile .top_lang_wrap { display: flex !important; position : fixed; bottom : 0; right : 0; width: 300px; justify-content: center; z-index: 99; border-top : 1px solid #000; background-color : #fff; right : -300px; transition : all .4s ease }
header.mobile.rm .top_lang_wrap {  right : 0 }
header.mobile.rm .top_lang_wrap a { width : 50%; text-align : center !important }
header.mobile.rm .top_lang_wrap a:first-child { border-right : 1px solid #000 }



#topSearchPanel.active { height : auto; opacity : 1; } 
.search_warp { max-width : 600px; margin : 0 auto; padding : 30px 0 } 
.search_warp p { border : 2px solid #000; border-radius: 5px; padding : 0 25px; margin-bottom : 10px } 
.search_warp p input { line-height : 70px; border : none; background : none } 
.search_warp p input::placeholder { font-size : 20px } 
.search_warp p button { width : 60px } 
.search_warp > a { display : inline-block; padding : 0 8px } 
#showTopSearchPanel { top : 5px; padding : 10px } 

.mobile_nav { display : none; position : absolute; padding : 10px; top : 23px; right : 10px; width : 41px; height : 38px; flex-direction: column; justify-content: space-between; } 
.mobile_nav span { width : 100%; height : 2px; background : #000; align-self: flex-end; } 
.mobile_close_btn { display : none; position : fixed; width : 50px; height : 50px; top : 0; right : -300px; background : #7A563C; z-index: 9; opacity : 0 } 
.mobile_close_btn.active { right : 300px; opacity : 1 } 
.mobile_close_btn span { display : block; position : absolute; width : 30px; height : 2px; top : 24px; left : 10px; background-color: #fff; } 
.mobile_close_btn span:first-child { transform : rotate(45deg) } 
.mobile_close_btn span:last-child { transform : rotate(-45deg) } 

header.mobile.active { top : 0; transform : inherit } 
header.mobile.active .mypage_icon { top : 10px }
header.mobile .mypage_area_wrap { right : inherit; left : 20px }
header.mobile .mypage_area_wrap a { text-align : center !important }
header.mobile #headerSeachWrap { right : 45px } 
header.mobile .mobile_nav { display : flex; cursor : pointer } 
header.mobile nav div#topGmb > ul { position : fixed; display : block; top : 0; right : -300px; width : 300px; height : 100%; padding-bottom : 80px; background-color :#fff; z-index : 10; border-left : 1px solid #eee; transition : all .3s ease-out; opacity : 0; z-index : 99; overflow : auto } 
header.mobile nav div#topGmb.active > ul { right : 0; opacity : 1 } 
header.mobile nav:before { content : ''; position : fixed; display : none; top : 0; left : 0; width : 100%; height : 100%; background-color : rgba(0, 0, 0, 0.5); opacity : 0 } 
header.mobile nav.active:before { display : block; opacity : 1; z-index : 1 } 
header.mobile nav div#topGmb > ul > li { display : block; width : 100% } 
header.mobile ul ul { height : 0 } 
header.mobile nav div#topGmb > ul:hover ol { display : none; height : 0; overflow : hidden } 
header.mobile nav div#topGmb > ul:hover:after { display : none } 
header.mobile nav a { text-align : left !important; padding : 5px 25px } 

header.mobile nav div#topGmb > ul > li > a { line-height : 55px } 
header.mobile nav div#topGmb > ul > li > a:before { display : none } 
header.mobile nav div#topGmb > ul > li > a:after { content:''; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.5' y1='2.18557e-08' x2='8.5' y2='16' stroke='%23DDDDDD'/%3E%3Cline x1='16' y1='7.5' x2='-4.37114e-08' y2='7.5' stroke='%23DDDDDD'/%3E%3C/svg%3E%0A"); width:16px; height: 16px; background-repeat: no-repeat; background-position: 50%; display:inline-block; position: absolute; right: 26px; top: 50%; margin-top: -8px; background-color : #fff } 
header.mobile nav div#topGmb > ul > li > a.active:after,
header.mobile nav div#topGmb > ul > li:hover > a:after { background-image: url("data:image/svg+xml,%3Csvg width='16' height='1' viewBox='0 0 16 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='16' y1='0.5' x2='-4.37114e-08' y2='0.499999' stroke='%23DDDDDD'/%3E%3C/svg%3E%0A"); } 
header.mobile nav div#topGmb > ul > li >a { border-bottom : 2px solid transparent } 
header.mobile nav div#topGmb > ul > li:hover > a { border-bottom : 2px solid #7A563C } 
header.mobile nav div#topGmb > ul > li { border-bottom : 1px solid #eee } 
header.mobile nav div#topGmb > ul > li.active > ul,
header.mobile nav div#topGmb > ul > li:hover > ul { display : none; height : auto; padding : 0 } 


header.mobile nav div#topGmb > ul:hover ul,
header.mobile nav div#topGmb > ul.active ul { position : static; } 
header.mobile nav div#topGmb > ul:hover:before,
header.mobile nav div#topGmb > ul.active:before { display: none;} 

header.mobile nav ul ul { padding : 0; background-color : #f9f9f9 } 
header.mobile nav ul ul a { padding : 10px 0 } 
header.mobile nav ul ul a:before,
header.mobile nav ul ul a:after { display : none } 
header.mobile ul ul span { background : transparent } 
header.mobile nav ul ul li { border-bottom : 1px solid #ddd } 
header.mobile nav div#topGmb > ul:hover ul { display : none } 
header.mobile nav div#topGmb > ul > li:hover ul { display : block; height : auto } 

.btn-default { background-color : #7a563c; color : #fff; border-radius : 0 10px; padding : 10px 20px; margin-left : 20px; font-size : 16px; border : none } 



.container { position : relative; max-width : 1500px; margin : 0 auto; padding : 0 20px } 

.multiline { text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } 

.center { text-align: center; } 
.mg0 { margin : 0 !important } 
.mgt10 { margin-top : 10px !important } 
.mgt20 { margin-top : 20px !important } 
.mgt30 { margin-top : 30px !important } 
.mgt40 { margin-top : 40px !important } 
.mgt50 { margin-top : 50px !important } 
.mgt60 { margin-top : 60px !important } 
.mgt70 { margin-top : 70px !important } 
.mgt80 { margin-top : 80px !important } 
.mgt90 { margin-top : 90px !important } 
.mgt100 { margin-top : 100px !important } 


footer { background : #EAE9E8; padding : 40px 0; color : #2B2B2B } 
footer .top { text-align : right; border-bottom : 1px solid rgba(255, 255, 255, 0.3); margin-bottom : 20px } 
footer ul { display : inline-block } 
footer ul li { display : inline-block } 
footer ul li a { color : #a3a3a3; padding : 30px 50px } 
footer ul li:last-child a { padding-right : 0 } 
footer .btm { position : relative; font-size : 16px; line-height : 200% } 
footer .btm a { display : inline-block } 
footer .btm a:first-child { margin-right : 20px } 


.login_wrap { position : relative; width : 100%; max-width : 400px; margin :200px auto; text-align: center; } 
.login_wrap h2 { font-size : 40px } 
.login_wrap p { margin : 40px 0; color : #333 } 
.login_wrap a { position : relative; line-height : 60px; border-radius : 10px; margin : 10px 0 } 

.login_content p { margin : 30px 0 }
.login_wrap a.kakao_login { background-color : #ffe500 } 
.login_wrap a.naver_login { background-color : #03C75A; color : #fff } 
.login_wrap a.google_login { border : 1px solid #9A9A9A } 
.login_wrap a img { position : absolute; top : 50%; left : 30px; transform : translateY(-50%) } 

.mypage_login_info { color : #663e22; font-size : 16px }
.mypage_btn_wrap { display : flex; justify-content: space-between;}
.mypage_btn_wrap a { width : 110px; border : 1px solid #111; color : #111; text-align : center }
.mypage_area_wrap {display : none;position : absolute;top : 90px;right : 0;border-radius : 10px;border : 1px solid #dbdbdb;background-color : #fff;text-align : center;padding: 50px 20px 30px 20px;width: 270px;} 
header .mypage_icon.active .mypage_area_wrap { display : block } 
.mypage_area_wrap p { display : inline-block; padding : 3px 13px; border-radius : 12px; background-color : #0033a5; color : #fff; font-size : 26px } 
.mypage_area_wrap h2 {font-size : 26px;margin: 10px 0;} 
.mypage_area_wrap b { color : #888; font-size : 14px } 
.mypage_area_wrap b img { position : relative; top : 3px; margin : 0 3px 0 0 } 
.mypage_area_wrap span { display : block; color : #7a563c; font-weight: bold; font-size : 16px; margin : 0 0 20px 0 } 
.mypage_area_wrap a { border : 1px solid #121212; font-size : 16px; padding : 5px; border-radius : 5px; color : #666 } 
.mypage_area_wrap a img { position : relative; top : 5px; margin : 0 7px 0 0 } 

.color_red { color : #CF2A2A } 

@keyframes topToBottom { 
 0% { opacity: 0; transform: rotateX(-90deg); } 
 100% { opacity: 1; transform: rotateX(0deg); } 
 } 


@media ( max-width : 1300px ) { 
 header nav { padding : 10px 200px 0 200px } 
 footer { 
padding: 30px 20px
 } 

footer ul li a { 
padding: 30px 20px
 } 

footer .btm { 
font-size: 16px; 
padding-right: 200px
 } 
 } 

@media ( max-width : 1100px ) { 
 .mobile_close_btn { display : block } 
 header #logo { top : 15px; left : calc(50% - 75px ); } 
 header #logo img { width : 120px; height : auto !important } 
 header nav { padding : 10px; height : 80px } 
 .mobile_nav { display : flex } 
 .top_lang_wrap a { padding : 10px !important } 
 #topSearchPanel.active { position : absolute; top : 80px; border-top : 1px solid #eee } 
 header #headerSeachWrap > div {margin : 0;padding : 0; } 
 header.mobile nav a { padding : 5px 10px } 
 header:hover { background : #fff} 
 header .mypage_icon { position : fixed; display : block; left : 0; top : 58px; } 
 header .mypage_icon a { padding : 15px !important } 
 header .top_lang_wrap:before { display : none } 
 #mainSearchTop .search_warp>a {font-size: 16px !important;}
 .mypage_login_info sub { display : none }
 } 

@media ( max-width : 900px ) { 
 .search_warp p input { line-height : 60px } 
 #topSearchPanel.active { height : auto } 
 #topSearchPanel .search_warp p input::placeholder { font-size : 17px } 
 header #headerSeachWrap > div.top_lang_wrap { display : none } 
 header .mypage_icon img { width : 20px } 
 footer {
    padding: 20px
}

footer ul {
    display: none
}

footer .absl,
footer .absr,
footer .absl a,
footer .btm {
    position: inherit;
    text-align: center;
    width: 100%;
}

footer .absl a {
    padding: 20px
}

footer .btm {
    padding: 0
}
footer .btm .absr { display : none }
 } 

@media ( max-width : 600px ) { 
 #topSearchPanel .search_warp { width : 85% } 
 .search_warp p input { line-height : 55px } 
 .search_warp > a { font-size : 15px } 
 }