/* BASIC css start */
#preview_wrap { display:none}




.door { position:fixed; top: 50%;  RIGHT: 0px;   margin-top: -50px;   z-index:5;}
/* ===== ¾ÆÀÌÄÜ  ===== */
.side-r-box .r_icon { display:block; text-align:center;  width: 30px;  height: 30px; background:#D6D6D6;  border-radius: 0%; -webkit-border-radius: 0%; border-bottom:1px solid #fff }
.side-r-box .r_icon i { padding:0px !important; width:15px !important; color:#fff; line-height:30px;}
.side-r-box .r_icon:hover i{color:#333;}

.side-r-box .ka { display:block; text-align:center;  width: 30px;  height: 30px; background:#feed44;  border-radius: 0%; -webkit-border-radius: 0%; border-bottom:1px solid #fff }
.side-r-box .ka i { padding:0px !important; width:18px !important; color:#513921; line-height:30px;}
.side-r-box .ka:hover i{color:#333;}



/* ============= »ó´Ü¿µ¿ª =============== */


#header {position: relative; z-index:80; top:0; background:#fff; font-size:14px; width:100%; /*height:101px;*/height:50px; /*line-height:99px;*/line-height:50px; color:#000; border-bottom: 1px solid #000; -webkit-transition-duration: 0.3; transition-duration: 0.3s;}
#header a {text-decoration:none; transition-duration: 0.3s;}
#header a:hover{text-decoration:none; transition-duration: 0.3s;}
#header .inner {position: relative; padding: 0 2.5%; margin: 0 auto;}
.topbg {position:fixed; top:0; width:100%; margin:0 auto; -webkit-transition-duration: 0.7s; transition-duration: 0.7s;}
.topbg_back { display:none; position:absolute; top:0; z-index:-1; background:rgba(255,255,255,0); width:100%;height:100%;}


#header.fixed {position:fixed; /*height:101px;*/height:50px;}

#header .inner .logo { position: relative; float: left; width: 20%; margin-top:15px; text-align:center}
#header .inner .logo a { font-size: 22px; font-weight: bold;}
#header .inner .logo img {/*width:200px;*/width:170px;}
#header .inner .menu_list { position: relative; float: left; width: 40%}


#header .inner .member_list {display: inline-block; float: right; text-align: right; width:40%}



#header #topcarticon {float:right; margin-top:0; font-size:11px; margin-left:15px; cursor:pointer;}
#header #topcarticon img {margin-top:2px; margin-right:0}
#header #topcarticon svg {margin-top:-4px; margin-right:0; vertical-align:middle}

#header .top_search_bar {display: none; position: relative; width:100%; padding: 0px 10px 0 0; z-index: 999; background:#fff; padding:0;}
#header .top_search_bar img {position: relative; cursor:pointer; margin-left:3px; height:16px}
#header .top_search_bar fieldset {display:inline-block;}
#header .top_search_bar svg { cursor:pointer; margin-left:3px; height:16px}
#header .top_search_bar input[type=text] {height:20px; padding:0; font-size:12px; color:#000; width:0; border:none; border-bottom:1px solid #000; background:transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
#header .top_search_bar:hover input[type=text] {height:20px; padding:0; font-size:11px; color:#000; width:100px; border:none; border-bottom:1px solid #000; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}

#header #log {float:right; margin-top:0; font-size:11px}
#header #log a {margin-left:15px}

#menubar span { position: relative; text-decoration: none;}
#menubar span:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: -5px; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.17s ease-in-out 0s; transition: all 0.17s ease-in-out 0s;}
#menubar span:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1);}
#menubar nav a:hover{ color:#000; }
#menubar nav ul { margin: 0; padding: 0;}
#menubar nav ul li {display: inline-block;  position: relative;}
#menubar nav ul li > a { position: relative; color: #1b1b1b; display: block; font-size: 14px; font-weight: 500; letter-spacing: 1px; margin-right:45px; transition: 0.3s linear; z-index:101;}
#menubar nav ul li:hover {  }
#menubar nav ul li ul.board {bottom:-103px !important;} 
#menubar nav ul li ul { display: none; position: absolute; left: -25px; width: 220px; text-align: left; padding: 0px 10px 50px 0px; z-index: 999; background:#fff; border-top: 0; padding: 5px 0 15px 0;}
#menubar nav ul li ul li { display: block;}
#menubar nav ul li ul li:first-child {padding-top:5px}
#menubar nav ul li ul li:last-child {padding-bottom:5px}
#menubar nav ul li ul li a {color:#000}
#menubar nav ul li ul li a {display: block;font-size: 15px;line-height: 24px;margin: 0;padding: 0 25px;}

#menubar1 {height:50px;}
#menubar1 span { position: relative; text-decoration: none;}
#menubar1 span:before { content: ""; position: absolute; width:; height: 1px; bottom: -5px; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.17s ease-in-out 0s; transition: all 0.17s ease-in-out 0s;}
#menubar1 span:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1);}
#menubar1 nav {display: inline-block; }
#menubar1 nav a:hover{ color:#000; }
#menubar1 nav ul {display: inline-block; margin: 0; padding: 0;}
#menubar1 nav ul li {display: inline-block; margin-right:45px;}
#menubar1 nav ul li > a { color: #1b1b1b; display: block; font-size: 14px; font-weight: 500; letter-spacing: 1px; /*height:101px;*/height:50px; transition: 0.3s linear; z-index:101;}
#menubar1 nav ul li:last-child {margin-right:0;}
#menubar1 nav ul li:hover {  }
#menubar1 nav ul li ul { display: none; position: absolute; left:0px; width: 100%; height:120px; text-align: left; padding:0; z-index: 999; background:#f9f9f9; padding: 5px 0;}
#menubar1 nav ul li ul li { display: block;}
#menubar1 nav ul li ul li:first-child {padding-top:5px}
#menubar1 nav ul li ul li:last-child {padding-bottom:5px}
#menubar1 nav ul li ul li a {color:#000}
#menubar1 nav ul li ul li a {display: block;font-size: 15px;line-height: 24px;margin: 0;padding: 0 25px;}



.searchheader { width: 420px; margin:20px auto 0; padding:0; overflow:hidden; float:right; }
.searchheader fieldset { margin-top:0; width:100%; overflow:hidden; background:none;}
.searchheader input { width:80%; height:45px; padding:0 0 2px 5px; border:0; line-height:16px; background:#f9f9f9; font-size:18px; border-bottom:1px solid #000; color:#000; }
.searchheader .inputTypeText { width:400px; height:35px; border:0px solid #000;  background:none; color:#fff; }

.searchheader .search_btn {display:inline-block !important; padding:0 !important; }

/* Àαâ°Ë»ö¾î */
.searchheader .popular { width:420px; margin:30px auto 10px; padding:0 0 0 0px;text-align: center; line-height:18px; *zoom:1; }
.searchheader .popular li { display: inline-block; }
.searchheader .popular li a { margin:0 10px; font-size:12px; color:#fff!important;  letter-spacing: 1px;}
.searchheader .popular li a:hover { opacity:0.8;  color: #999 !important; }


@media all and (max-width: 1430px) {
.searchheader { width: 320px; margin:0 auto; padding:0; overflow:hidden; }
}  

@media all and (min-width: 1900px) {
.searchheader { width: 420px; margin:0 auto; padding:0; overflow:hidden; }
}  


.search_cate { width: 100%; margin:0 auto; padding:0; overflow:hidden; }
.search_cate fieldset { margin-top:0; width:100%; overflow:hidden; background:none;}
.search_cate .search_btn {display:inline-block;}
.search_cate .search_btn img {width:20px;}
.search_cate input { width: 90%; height: 18px; padding: 0 0 0 5px;  margin: 0 !important; border: 0; line-height: 12px; font-size: 12px; color: #000;}
.search_cate #keyword  { width:90%; height:18px; padding:0 0 0 5px; margin:0 !important; border:0; line-height:12px; font-size:12px;color:#000; }
.search_cate .inputTypeText { width:400px; height:35px; border:0px solid #000;  background:none; color:#fff; }

/*******************************
modal
*******************************/
	.modal.left .modal-dialog,
	.modal.right .modal-dialog {
		position: fixed;
		margin: auto;
		width: 400px;
		height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}

	.modal.left .modal-content,
	.modal.right .modal-content {
		height: 100%;
		overflow-y: auto;
	}

	.modal.left .modal-body {
		margin:30px 0 0;
        padding:0;
	}

/*Left*/
	.modal.left.fade .modal-dialog{
		left: -320px;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		        transition: opacity 0.3s linear, left 0.3s ease-out;
	}

	.modal.left.fade.in .modal-dialog{
		left: 0;
	}
        
/*Right*/
	.modal.right.fade .modal-dialog {
		right: -320px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
	}

	.modal.right.fade.in .modal-dialog {
		right: 0;
	}

/* ----- MODAL STYLE ----- */
	.modal-content {
		border-radius: 0;
		border: none;
	}

	.modal-header {height: 58px;border-bottom: 0;
	}
	.modal-header span {font-size:30px; visibility: inherit; font-family: "Noto Sans KR",malgun gothic,¸¼Àº°íµñ,NanumGothic,dotum,µ¸¿ò,sans-serif;}





.modal-body ul {margin:0;}
.modal-body ul li{display: block !important;
    font-size: 12px;
    color: #000;
    padding: 12px 0 12px 40px;
    cursor: pointer;
    transition-duration: 0.5s;}
	.modal-footer {
		position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    *border-top: 1px solid #1b1b1b;
    padding: 20px 0 20px 40px;
    background: #f4f4f4;
            text-align:left;
	}
.modal-body ul li a {color:#000; display:block; font-family: "Noto Sans KR",malgun gothic,¸¼Àº°íµñ,NanumGothic,dotum,µ¸¿ò,sans-serif; font-weight: 700; text-decoration: none;}
.modal-footer a {font-size: 12px;
    line-height: 23px;
    color: #1b1b1b;
    cursor: pointer;}
    
    
.modal-cate .modal__content, .modal-cate {
  position: absolute;
  left:0;
  top:0;
  width:100%;
}
.font-green {color:#55624d !important;}
.show-cate {
  display:block;
  cursor: pointer;
  color: #1b1b1b;
  transition-duration: 0.5s;
}
.show-cate:hover {
  color:#000;
}

.close-cate {
  position: absolute;
  cursor: pointer;
  padding: 10px;
  color:#1b1b1b;
  right: 5px;
  top: -77px;
  width:40px;
  height:40px;
  font-size:20px;
  font-weight: 700;
}

.mask-cate {
  background: rgba(255, 255, 255, 0);
  visibility: hidden;
  transition: 0.7s;
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 50;
  opacity: 0;
  left: 0;
  top: 0;
}

.modal-cate {
  transition: 0.5s ease-out;
  background:#fff;
  visibility: hidden;
  position: absolute;
  height:100%;
  width: 100%;
  z-index: 100;
  opacity: 1;
  top:0;
  left:-400px;
}
.active-cate {
  visibility: visible;
  opacity: 1;
}

.active-hide {display:none;}

.active-cate + .modal-cate {
  visibility: visible;
  opacity: 1;
  left:0;
}



.modal-body .menu-list {
    padding-left: 0;
    display: block;
    position: absolute;
    width: 100%;
    max-width: 450px;
    background: white;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    left:0;
}

.modal-body .menu-list .menu-submenu { padding-bottom:10px;}
.modal-body .menu-list .menu-submenu li a {font-weight: 400;}

.modal-body .menu-list li:first-of-type { border-top: 0;}
.accordion-toggle, .accordion-content { cursor: pointer; font-size: 16px; position: relative; letter-spacing: 1px;}
.accordion-content { display: none;}
.accordion-toggle a:before, .accordion-toggle a:after { content: ''; display: block; position: absolute; top: 50%; right: 30px; width: 9px; height: 1px; margin-top: -1px; background-color: #000; transform-origin: 50% 50%; transition: all 0.3s ease-out;}
.accordion-toggle a:before { transform: rotate(-90deg); opacity: 1; z-index: 2;}
.accordion-toggle a.active:before { transform: rotate(0deg); background: #000 !important;}
.accordion-toggle a.active:after { transform: rotate(180deg); background: #000 !important; opacity: 0;}

    

/* BASIC css end */