.container{width:100%; overflow:hidden; box-sizing:border-box}
.section{width:100%; overflow:hidden; padding:1em 0; box-sizing:border-box}
/* PC- 로그인 영역 */
.login_area{position:absolute;top:140px;left:40px;z-index:299;width:220px;padding:5px 10px;box-sizing:border-box;border:1px solid #333;background:rgba(255,255,255,.7);}
.login_area input[type="text"],.login_area h3,.login_area .btn{margin:4px 0;}
.login_area input[type="text"],.login_area input[type="password"],.login_area .btn {width:80%; height:30px; line-height:30px; color:#999; font-size:12px;}
.login_area .btn{color:#fff;}
.btn_wrap a{display:inline-block; margin:13px 0; font-size:13px; color:#666;}
.btn_wrap a:hover{color:#111; text-decoration:underline}

/* 메인 배너 슬라이더 영역 */
.maintop_bg{background:url(/hnh/images/bg1.jpg); background-size:cover; margin-top:55px; margin-bottom:1em; padding:0;}
.mainslide_wrap {position:relative; width:80%; float:left;}
.mainslide_wrap .lSPager {position:absolute; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); bottom:20px;}
.mainslide_wrap .lSSlideOuter .lSPager.lSpg > li a{background-color:#acacac}
.mainslide_wrap .lSSlideOuter .lSPager.lSpg > li:hover a, .mainslide_wrap .lSSlideOuter .lSPager.lSpg > li.active a{background-color:#272343}
#mainslider{height:360px;}
.slider_txt{position:absolute; top:0; right:30px; display:table; width:290px; height:100%; padding:0 15px; box-sizing:border-box; background:rgba(0,0,0,.4); color:#fff; line-height:1.5; text-shadow:1px 1px 2px #000;}
.slider_txt h5{font-size:20px;}
.slider_txt p{font-family:'Noto Sans KR', sans-serif; font-size:16px; padding:10px 0;}
.txt_wrap{display:table-cell; vertical-align:middle;}
.mainslider_quick{width:20%; height:360px; float:left; box-sizing:border-box;}
.mainslider_quick li{position:relative; width:50%; height:33.3%; float:left; box-sizing:border-box; background:#fffefe; border:1px solid #e6eaf9}
.mainslider_quick li:hover{background:#f5f7f9}
.mainslider_quick a{display:block; width:100%; height:100%; box-sizing:border-box; color:#666; text-align:center;}
.mainslider_quick i{display:inline-block; width:65px; height:65px; line-height:65px; box-sizing:border-box; color:#fff; background:#333; margin:12px 0 10px; border-radius:100%; font-size:25px;}
.mainslider_quick span{display:block; margin:0 auto}
.mainslider_quick a:hover i{animation:iconmove .38s ease-in Infinite Alternate; color:#333}
.mainslider_quick li:nth-of-type(1):hover i{background:#ffc1f0}
.mainslider_quick li:nth-of-type(2):hover i{background:#b0e1c7}
.mainslider_quick li:nth-of-type(3):hover i{background:#bda8dd}
.mainslider_quick li:nth-of-type(4):hover i{background:#fff4c7}
.mainslider_quick li:nth-of-type(5):hover i{background:#b3dfde}
.mainslider_quick li:nth-of-type(6):hover i{background:#FFB593}
@keyframes iconmove { 
	from{transform:translateY(0);} 
	to  {transform:translateY(4px);}
}
/* 메인 퀵메뉴 영역 */
.quick-menu {width:100%; overflow:hidden; padding-top:1em; text-align:center; box-sizing:border-box;}
.quick-menu>li {float:left; width:16.65%; box-sizing:border-box; background:#736e94; border:1px solid #272343; border-right:0;}
.quick-menu>li:last-child {width:16.75%; border-right:1px solid #272343;}
.quick-menu>li>a {display:block; height:76px; box-sizing:border-box; padding-top:17px; color:#fff; line-height:1; font-size:13px;}
.quick-menu>li:hover{background:#a09cbf}
.quick-menu>li>a>span {font-size:15px; display:inline-block; vertical-align:middle;}
/* 메인 타이틀 */
.main_title {display:inline-block; padding:8px 0; font-size:18px; text-shadow:0px 2px 2px rgba(0, 0, 0, 0.1); color:#555; text-align:center; letter-spacing:-0.1px;}

/* 메인 - 탭 게시판 영역 */
.main_bbs_wrap {position:relative; width:48%; height:330px; float:left; margin-right:2%; border:1px solid #acacac; box-sizing:border-box;}
.main_bbs_wrap>li:nth-child(1),.main_bbs_wrap>li:nth-child(2) {float:left; width:40%;}
.main_bbs_wrap h3 {line-height:45px; border-right:1px solid #acacac; border-bottom:1px solid #acacac; background:#ddd; color:#888; font-size:18px; text-align:center;}
.main_bbs_wrap .plus_btn {display:none; position:absolute; top:11px; right:7.5%; width:20px; height:20px;}
.main_bbs_wrap .plus_btn.on {display:block; background-size:18px;}
.plus_box {float:left; width:20%; height:45px; border-bottom:1px solid #acacac;}
.main_bbs_tbox {display:none; position:absolute; top:50px; left:0; width:100%; height:270px; overflow:hidden; box-sizing:border-box; padding:0 3%; margin:0 auto;}
.main_bbs_wrap>li.on .main_bbs_tbox {display:block;}
.main_bbs_wrap>li.on h3 {background:#fff; color:#333; border-bottom:0;}
.main_bbs_cent {clear:both; text-align:left; padding:15px 0;}
.bbs_subject {display:block; max-width:77%; float:left; white-space:nowrap; overflow:hidden; color:#666; letter-spacing:0px; text-align:left;}
.bbs_subject:hover {color:#272343; text-decoration:underline;}
.bbs_date {float:right; color:#646464;}
.main_bbs_left {width:100%; float:left; min-height:330px; margin-right:-330px; padding-right:330px; box-sizing:border-box;}
.main_bbs_right {position:relative; width:330px; float:right; min-height:330px;}

/* 메인 - 팝업존 영역 */
.popup_zone {height:330px; overflow:hidden;}
.main_photo img {width:330px; height:330px;}
.main_bbs_right .control_box {position:absolute; top:20px; right:20px; z-index:100;}
.control_box .btn_border {width:22px; height:22px; background:rgba(255,255,255,.8); border-color:#fff; font-size:10px; color:#444; float:left;}
.main_bbs_right .lSAction > .lSPrev, .main_bbs_right .lSAction > .lSNext {opacity:0; position:absolute; width:22px; height:22px; top:34px; z-index:101;}
.main_bbs_right .lSAction > .lSPrev {left:271px;}
.main_bbs_right .lSAction > a:hover {opacity:0; background-image:none;}
.main_photo_right .lSAction > .lSNext {right:0;}

/* 메인 협회일정표 영역 */
.schedule_table {width:100%; height:240px;}
.main_schedule_left {position:relative; display:block; z-index:10; float:left; width:355px; padding:10px 20px; background:#fff; border:1px solid #acacac; box-sizing:border-box;}
.main_schedule_left button {outline:none; font-size:16px;}
.calendar_date {display:block; width:52%; margin:0 auto; padding:10px 20px; font-weight:700; color:#333; font-size:15px;}
.schedule_table tr td {position:relative; box-sizing:border-box; font-size:13px;}
#calendar_week_top th {padding:5px 15px; font-size:.9em; vertical-align:middle; background:#f0f0f0;}
.calendar_today {position:absolute; top:32px; left:50%; margin-left:-14px; font-weight:700; font-size:10px; color:#bc4b10;}
.schedule_table .daily {position:absolute; top:5px; left:50%; display:block; width:28px; height:28px; margin-left:-20px; border:6px solid #fab95b; border-radius:50%; cursor:pointer;}
.schedule_table .daily:hover {border-color:#ff9234;}
.schedule_list {display:none; position:absolute; top:0; left:0; width:100%; height:100%; padding:50px 30px; background:#272343; box-sizing:border-box;}
.schedule_list h5{color:#ddd; font-size:18px; padding-bottom:20px;}
.schedule_list .close_btn {position:absolute; top:20px; right:20px; width:30px; height:30px; background-size:30px;}
.schedule_list .close_btn:hover{background-color:transparent;}
.schedule_time {width:18%; color:#ff1b1b;}
.schedule_txt {width:82%; color:#fff;}
.schedule_list ul li {clear:both; text-align:left; padding:25px 0; font-size:14px;}
.schedule_txt:hover {text-decoration:underline;}
.schedule_list ul li span {display:block; float:left;}

/* 메인 포토갤러리 영역 */
.main_gallery_box img{height:100%; width:100%}
.main_photo_right {position:relative; display:block; width:100%; float:left; box-sizing:border-box; padding-left:385px; margin-left:-355px;}
.section .main_photo_right .btn_border,.section .main_schedule_left .btn_border{width:28px; height:28px; padding:5px 10px; margin-top:-4px; vertical-align:middle; margin-right:-20px}
#gallery_slide {width:100%; margin:0 auto; padding-top:15px;}
#gallery_slide img{transition:all .45s ease-out;}
#gallery_slide img:hover{transform:scale(1.1);}
/* .main_photo_right .plus_btn:hover, .main_schedule_left .plus_btn:hover{background-color:#fff;} */
.main_gallery_box {width:32%; display:inline-block; padding-left:10px; box-sizing:border-box;}
.gallery_txtbox {width:100%; height:66px; overflow:hidden; padding:17px 10px; box-sizing:border-box; text-align:left; background:#efe4dc;}
.gallery_subject {width:100%; white-space:nowrap; overflow:hidden; letter-spacing:-1px; font-weight:700; font-size:14px; color:#333;}
.gallery_date {padding-top:6px; font-size:13px; color:#777;}
.main_photo_right .imgresizing {display:block; height:218px; overflow:hidden;}

.desktop {display: inline-block;}
.mobile {display: none;}

/* 광고배너 영역 */
#adbanner_slide img {height:100px;}
/* 관련 기관 영역 */
.rotat_banner_wrap{padding:24px 0;}
.rotat_banner_wrap h3{margin-top:-5px; margin-bottom:5px}
.rotat_banner_wrap .control_box{top:15px;}

.rotat_banner_wrap .control_box button{border-color:#ddd}
.rotat_title_wrap {width:20%; float:left; margin-top:11px}
.site_slide_wrap {width:80%; float:left; padding-top:2px;}
.rotat_banner_wrap .control_box {position:initial; width:88px; margin:0 auto;}
/* 관련 기관 영역 */
.link_area_wrap {width:100%; display:flex; display:-ms-flex; display:-webkit-flex; box-sizing:border-box;}
.link_area_wrap:after {content:""; display:block; clear:both;}
.familysite {position:relative; width:100%;  margin:0 5px; float:left; background:#222; box-sizing:border-box;}
.familysite button {width:100%; padding:13px 5px; color:#fff; cursor:pointer; font-size:15px; font-weight:700}
.familysite button:after {font-family:Fontawesome; content:"\f107"; position:absolute; right:12px;}
.familysite_list {display:none; position:absolute; bottom:41px; left:0; width:100%; background:#333; text-align:center; z-index:100;}
.familysite.on button:after {content:"\f106";}
.familysite_list a {display:block; width:100%; padding:13px 0; color:#fff; font-size:14px;}
.familysite_list a:hover {background:#444}
.family_srch {width:33%; float:right;}
.family_srch input[type="text"]{width:51%;}
.family_srch .btn{padding:0 11px}

/* popup */
.ui-widget.ui-widget-content{top:58px; left:200px; border:0}
.ui-dialog{padding:0;}
.ui-widget { /* font-family:ngeot,'돋움',Dotum!important; */ font-size:12px;}
.ui-widget-header{background-image:none; background-color:#272343; font-size:14px; border:0; border-radius:0}
.popupOneday{position:absolute; bottom:6px; left:10px;}
.popupOneday label:hover, .popupOneday input:hover {cursor:pointer; font-weight:700}
.ui-widget.ui-widget-content{box-shadow:1px 1px 4px 1px rgba(0,0,0,.4)}
.ui-dialog .ui-dialog-buttonpane button{margin:.2em}
.ui-dialog .ui-dialog-titlebar{padding:.5em 1em}
div.ui-dialog { z-index:2000; background-color:#fff;}
#divPopup { width:auto; height:auto; background:white;}
div.tab { line-height:18px; padding-top:15px;}
ul.tab { padding:0;	line-height:24px;}
ul.tab li {float:left; margin-right:4px; font-weight:bold;}
ul.tab a { display:block; color:#FFF; padding:2px 5px; border-radius:2px;}
a.unselect_tab{background:#999}
a.unselect_tab:hover{background:#ff954a}
a.select_tab {background:#ff954a}
div.tab {clear:both;}
.ui-dialog .ui-dialog-buttonpane{padding:0; border-radius:0}
.ui-dialog .ui-dialog-titlebar-close{right:0.6em}
.ui-button{background:none; border:0}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, 
.ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus, 
.ui-button .ui-icon, .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, 
.ui-button:focus .ui-icon{width:18px; height:18px; border:0; background:#272343 url(/hnh/images/icons/close_w.png)no-repeat center / cover}
.ui-widget-content{background-color:#e9e9e9}
.ui-dialog-buttonpane .ui-dialog-buttonset button{width:auto; height:auto; border:1px solid #bbb; background:#f7f7f7; color:#bd1313}
.ui-dialog-buttonpane .ui-dialog-buttonset button:hover{background:#fff}

/* 메인 - 태블릿 모바일 */
@media all and (max-width:1199px) {
	.maintop_bg{margin-top:0}
	.login_area{display:none;}
	.link_area_wrap{padding:15px 20px;}
	.familysite{width:32%}
	.family_srch {	width:99%; 	text-align:left; 	padding-top:10px;}
	.family_srch input[type="text"]{width:400px;}
}
@media all and (max-width:1023px) {
	.quick-menu>li,.quick-menu>li:last-child{width:33.32%;}
	.quick-menu>li>a {	height:65px; 	padding-top:13px;}
	.quick-menu>li:nth-child(4n){clear:both;}
	.quick-menu>li:nth-child(1),.quick-menu>li:nth-child(2){border-bottom:0}
	.quick-menu>li:nth-child(3){border-right:1px solid #272343; border-bottom:0}
	.quick-menu>li>a>span{font-size:14px;}
	.bbs_subject {	max-width:67%; 	font-size:13px;}
	.bbs_date{font-size:14px;}
	.main_bbs_wrap h3{font-size:15px;}
}
@media all and (max-width:920px) {
	.mainslider_quick li{width:100%; height:16.7%;}
	.mainslider_quick i{width:38px; height:38px; line-height:38px; margin-right:10px;}
	.mainslider_quick span{display:inline-block;}
}
@media all and (max-width:767px) {
	.container{height:100%;}
	.slider_txt{top:50%; right:0; width:100%; height:50%;}
	.slider_txt h5{font-size:18px;}
	.slider_txt p{font-size:14px; padding:5px 0;}
	.main_bbs_left {margin:0; padding:0 10px 20px;}
	.main_bbs_right{width:100%;}
	.main_schedule_left {width:100%; padding:10px 0; margin-bottom:30px;}
	.main_photo_right{padding:0 8px 0 0; margin:0;}
	.rotat_banner_wrap .control_box {position:absolute;	top:13px;right:20px; width:auto; margin:0;}
	.site_slide_wrap{width:100%;}
	.rotat_title_wrap{width:100%}
	.link_area_wrap{padding:15px 10px; flex-direction:column;}
	.familysite {width:100%;margin:0 0 5px 0;}
	.family_srch select {padding:8px 2px; font-size:12px;}
	.family_srch input[type="text"]{width:53%;}
	.family_srch .btn {	padding:0 8px; 	font-size:13px;}
}
@media all and (max-width:570px) {
	.mainslider_quick i{width:30px; height:30px; line-height:30px; margin-right:0; font-size:20px; margin:8px 0 4px;}
	.mainslider_quick span{display:block; font-size:12px;}
	.main_bbs_wrap{width:100%; margin-bottom:10px}
	.main_bbs_wrap h3{font-size:14px;}
	.desktop {display: none;}
	.mobile {display: inline-block;}

}
@media all and (max-width:414px) {
	.quick-menu>li>a {height:55px;padding-top:5px;}
	.quick-menu>li>a>span {display:block;padding:9px 7px;font-size:13px;}
	.quick-menu>li:nth-child(4)>a>span{padding-top:2px;}
	.quick-menu img{height:20px;}
	.bbs_subject{max-width:80%;}
}