@import url('reset.css'); .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;
}

.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 { 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 : relative; top : 0; left : 0; width : 100%; border-bottom: 1px solid #eee; top : 102px; transform : translate(0, -102px); 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.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; font-size : 18px !important }
header.mobile.rm .top_lang_wrap a:first-child { border-right : 1px solid #000 }


/* header nav div#topGmb > ul:hover:before,
header nav div#topGmb > ul.active:before { content : ''; width : 100%; height : 250px; background-color : #fff; position :fixed; top : 80px; left : 0 } 

header nav div#topGmb > ul:hover ul,
header nav div#topGmb > ul.active ul {display : block; position: absolute;top: 51px;left: 0;width: 100%;background-color: #fff;} 
 */
header nav div#topGmb > ul > li {display : inline-block;width : 120px;transition : width 0.5s ease-in-out; position: relative;} 
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 : none; } 
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 > a:before,
header nav div#topGmb > ul > li > a:after { content : ''; position : absolute; bottom : 0; width : 0; height : 3px; background-color : #7A563C; transition: width .3s ease-in-out; opacity : 0 } 
header nav div#topGmb > ul > li > a:before { left : 50%; } 
header nav div#topGmb > ul > li:hover > a,
header nav div#topGmb > ul > li.active > a { color : #7A563C } 
header nav div#topGmb > ul > li:hover > a:before,
header nav div#topGmb > ul > li.active > a:before { width : 50%; color : #7A563C;  opacity: 1 } 
header nav div#topGmb > ul > li > a:after { right : 50%; } 
header nav div#topGmb > ul > li:hover > a:after,
header nav div#topGmb > ul > li.active > a:after { width : 50%; color : #7A563C; opacity: 1 } 
header nav div#topGmb > ul ul { display : none; padding : 30px 0; height : 280px } 
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; z-index : 2 } 
header nav ul ul a:hover span { border-bottom : 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%; background-color :#fff; z-index : 10; border-left : 1px solid #eee; opacity : 0; z-index : 99 } 
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 } 

.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 : 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 } 
.login_wrap a.kakao_login { background-color : #ffe500 } 
.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 } 



#authorDetailModal .artSwiper {display : flex;align-items : center;width: 350px;height : 210px;overflow : hidden;position: relative;}
#authorDetailModal .swiper-slide { width : 350px; height : 210px }
#authorDetailModal .author_info { display : flex; flex-direction : column; justify-content: center; padding : 0 20px }
#authorDetailModal .author_info h2 { font-size : 26px }
#authorDetailModal .author_info h3 { color : #888; margin : 5px 0; font-size : 18px; font-weight: normal; }
#authorDetailModal .author_info span { display : inline-block; border : 1px solid #805f46; color : #805f46; padding : 5px; border-radius : 5px }
#authorDetailModal .swiper-button-next:after,
#authorDetailModal .swiper-rtl .swiper-button-prev:after,
#authorDetailModal .swiper-button-prev:after, 
#authorDetailModal .swiper-rtl .swiper-button-next:after {
    font-size: 20px;
    color: #bababa;
}
#authorDetailModal .swiper-pagination-progressbar {top: 206px;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background : #111; height : var(--swiper-pagination-progressbar-size, 3px) }



.modal_wrap { display : none; position : fixed;top : 0;left : 0;width : 100%;height : 100%;background-color : rgba(0, 0, 0, 0.5);z-index: 99}
.modal_wrap.active { display : block }

.modal_wrap .modal_inner {position : absolute;top : 50%;left : 50%;transform : translate(-50%, -50%);background-color : #fff;border-radius: 15px;overflow : hidden auto;min-width: 300px;max-width : 90%;min-height : 300px;height: 100%;max-width : 1200px;max-height: 70%;padding : 40px;width: auto;}
.modal_wrap .modal_inner .modal_close { position : absolute; top : 30px; right : 50px; opacity : 0.3; z-index : 2; padding : 10px 0  }
.modal_wrap .modal_inner .modal_close:hover { opacity : 1 }
.modal_wrap .modal_inner > .inner {height : calc(100% - 80px);padding-right : 10px;padding-bottom : 30px;border-bottom : 1px solid #aeaeae;overflow: auto;}
.modal_wrap .modal_title {position : relative;font-size: 20px;margin-bottom : 30px; padding-bottom: 20px;border-bottom: 1px solid #aeaeae; color : #876C4C }
.modal_wrap .modal_title span { position : absolute; bottom : 0; right : 0; font-weight: bold; }
.modal_wrap .modal_txt { line-height : 180%; }
.modal_wrap .modal_txt h4 { font-size : 600 }
.modal_wrap .modal_txt ul { margin : 0 0 10px 0 }
.modal_wrap .modal_txt ul li { position : relative; padding-left : 10px; }
.modal_wrap .modal_txt ul li:before { content : ''; position : absolute; top : 14px; left: 0; width : 5px; height : 5px; background-color : #000; border-radius : 100% }
.modal_wrap .modal_txt a { color : #608cba; text-decoration: underline; }

.modal_txt .author_txt a:before {content : '';display : inline-block;width : 5px;height : 5px;background-color : #121212;border-radius: 100%;margin : 0 5px 0 0;position: relative;top: -5px;}


.modal_inner .work_info h2 { font-size : 26px }
.modal_inner .work_info > p { font-size : 18px; color : #888; margin : 0 0 10px 0; font-weight: bold; }
.modal_inner .work_info .txt { padding : 20px 25px; background-color : #f2f2f2; border-radius : 5px }
.modal_inner .work_info .txt > p {color : #805f46;font-size: 16px;}
.modal_inner .work_info .txt > p i {display: inline-flex;width: 17px;height: 17px;border-radius : 100%;color : #fff;font-size : 11px;background-color : #805f46;align-items: center;justify-content: center;position: relative;top: -3px;text-align: center;padding-right: 1px;margin-right: 5px;}
.modal_inner .work_info .txt li { margin : 5px 0 }
.modal_inner .work_info .txt li,
.modal_inner .work_info .txt li b { font-size : 16px }
#WorkDetailModal .modal_inner > .inner,
#WorkDetailModal .modal_title,
#exhibitionDetailModal .modal_inner > .inner,
#exhibitionDetailModal .modal_title { border-bottom : none; padding-bottom : 0; }
.exhibition_title { font-size : 32px; margin-bottom : 40px }




@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; transition: none;} 
 header:hover { background : #fff} 
 header .mypage_icon { position : fixed; display : block; left : 0; top : 10px; } 
 header .mypage_icon a { padding : 15px !important } 
 header .top_lang_wrap:before { display : none } 
 #mainSearchTop .search_warp>a {font-size: 16px !important;}
 } 

@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 { margin-top : 10px } 
 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 } 
 }