@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;800&display=swap');

/* common */
html,body,div,ul,li,l,dl,dt,dd,ol,p,form {margin:0px; padding:0px; font-family: 'Noto Sans KR','malgun gothic','맑은 고딕','나눔고딕','Nanum',dotum, sans-serif;}
body, p,div		{font:normal Gulim, '굴림'; color:#666666; font-size:12px; line-height:18px;}
ul,li,ol.dl {list-style:none}
img 		{border:0; vertical-align:top}
a			{color:#666666; text-decoration:none;}
.dot		{float:left;}
body		{margin:0; padding:0; background-color:#f8f9fa;}
body, table, tr, td, textarea, input, div {font-family:굴림,Gulim,MS PGothic; font-size: 12px; color: #666666; line-height:18px; font-family: 'Noto Sans KR','malgun gothic','맑은 고딕','나눔고딕','Nanum',dotum, sans-serif;}


/* Wrap */
#wrap		{position:relative; margin:0 auto;}
#toparea	{position:relative; text-align:center; margin:50px 0 50px 0; box-shadow: 0 121px 264px 0px rgba(0, 0, 0, 0.05);}
#data		{position:relative; clear:both; margin:0 auto; z-index:100;}
#footer		{position:relative; text-align:center; clear:both; background:url(../img/e7e7e7.gif) 0 30px repeat-x; padding-top:30px}
#copyright	{position:relative; padding:25px 0 20px 0; text-align:center;}

#r_bn {margin: 0; padding: 0;  position: absolute; right: 10px !important; top: 50px; z-index:1; left: auto !important;}


/* toparea */
#toparea li	{display:inline}
#top		{position:relative;}
#bn_top		{position:relative; margin:0 0 20px 10px}
#bn_top img	{margin-right:10px}
#logo		{position:relative; margin: 10px 0 20px 0;}
#search		{position:relative; margin:0 auto; width: 40%; height: 58px; border: 1px solid transparent; border-radius: 40px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #B4E959 0%, #228FC4 100%); background-origin: border-box; background-clip: content-box, border-box;}
#search form {height: 33px; margin: auto auto; width: 96%; top: 10px; position: relative;}
#search form input {border: 0;}
#search form input.search-text{border: 0; height: 33px;  width: 80%; cursor:text; font-size: 18px; margin-right: 10px;}
#search form input.search-text::placeholder {color: #ddd;}
#search form input.search-icon{background: url(../img/search-icon.png) 0 0 no-repeat; width: 34px; height: 34px; background-size: 34px; top: -1px; font-size: 0; position: absolute;}
#best		{position:relative; margin:8px auto; padding-left:10px;}
#top_div	{position:relative; width:995px; height:30px; }
.fm_search	{border:#0973cc solid 4px; width:302px; height:17px; background:#FFFFFF; padding:5px;}


/* data */
.col-12 {margin-bottom: 20px;}
.tab li		{float:left; display:inline; height:100%; z-index:100}
.tab_box	{width:100%; height:100%; border-radius: 14px; background: #FFF; box-shadow: 4px 12px 30px 6px rgba(0,0,0,.09); padding: 25px;}
.tab_box li	{width:100%; padding: 14px 0; border-bottom: 1px solid #f3f3f3;}
.tab_box li a:link, .tab_box li a:visited {text-decoration: none; color: #222; font-size: 16px; font-weight: 500; }
.tab_box li a:hover {
  color: #005ee7;
  padding: 0 5px;
  transition: all .3s ease;
  background: url(../img/link.png) 0px 5px no-repeat;
    background-size: 16px;
    padding-left: 22px;
}
.tab_box ul	{padding:10px 5px 0 0}
.tab_title	{font-size: 18px; font-weight: 800; color: #000000;}
.tab_bg		{width: 100%; text-align: center; background: #eee; padding: 14px; color: #666; border-radius: 14px;}
.tab_bg table {width: 100%; text-align: center;}
.tab_bg	table td	{background: none !important;}

.bn		{position:relative; float:left; clear:both; width:100%; text-align:center; }
.bn li	{float:left; display:inline;}
.bn_box	{margin:10px 20px 10px 0;}

.tab_bg-1 .tab_bg {background-color: #f7f4e9 !important;}
.tab_bg-2 .tab_bg {background-color: #e4ecf7 !important;}
.tab_bg-3 .tab_bg {background-color: #ecf7f2 !important;}
.tab_bg-4 .tab_bg {background-color: #fdedee !important;}
.tab_bg-5 .tab_bg {background-color: #f0f7eb !important;}
.tab_bg-6 .tab_bg {background-color: #ebede4 !important;}
.tab_bg-7 .tab_bg {background-color: #fff3c9 !important;}
.tab_bg-8 .tab_bg {background-color: #e1f5df !important;}
.tab_bg-9 .tab_bg {background-color: #eae5f7 !important;}
.tab_bg-10 .tab_bg {background-color: #e5f7f3 !important;}
.tab_bg-11 .tab_bg {background-color: #e3e3e0 !important;}
.tab_bg-12 .tab_bg {background-color: #e4ebed !important;}
.tab_bg-13 .tab_bg {background-color: #f3e9f3 !important;}
.tab_bg-14 .tab_bg {background-color: #d4e8fb !important;}
.tab_bg-15 .tab_bg {background-color: #d4ede2 !important;}
.tab_bg-16 .tab_bg {background-color: #e2edd4 !important;}
.tab_bg-17 .tab_bg {background-color: #edded4 !important;}
.tab_bg-18 .tab_bg {background-color: #e9d4ed !important;}
.tab_bg-19 .tab_bg {background-color: #eeeff3 !important;}
.tab_bg-20 .tab_bg {background-color: #b8e9f1 !important;}
.tab_bg-21 .tab_bg {background-color: #f0f3ff !important;}
.tab_bg-22 .tab_bg {background-color: #e6ffe0 !important;}
.tab_bg-23 .tab_bg {background-color: #fff0e0 !important;}
.tab_bg-24 .tab_bg {background-color: #ffe0e0 !important;}
.tab_bg-25 .tab_bg {background-color: #eae0ff !important;}
.tab_bg-26 .tab_bg {background-color: #ebedf3 !important;}
.tab_bg-27 .tab_bg {background-color: #f2f3eb !important;}
.tab_bg-28 .tab_bg {background-color: #e3e3e3 !important;}
.tab_bg-29 .tab_bg {background-color: #ebe3ed !important;}
.tab_bg-30 .tab_bg {background-color: #e2efea !important;}
.tab_bg-31 .tab_bg {background-color: #fff2da !important;}



/* font */
.sp-1	{letter-spacing:-1px;}
.ft_bold	{font-weight:bold}
.ft11	{font-size:11px; font-family:돋움}
.ft12	{font-size:12px; font-family:gulim 굴림}
.ft15	{font-size:15px; font-family:gulim 굴림}


.ft_000000		{color:#000000}
.ft_000000 a	{color:#000000}
.ft_line18		{line-height:18px}
.link_deco:hover	{text-decoration:underline; color:#F00}



/**/
.line_e7e7e7	{position:relative; background:#e7e7e7}
.line_2b2b2b	{position:relative; background:#e7e7e7}
.line_dddddd	{position:relative; background:#dddddd}
.line_e0e0e0	{postion:relative; background:#e0e0e0}
.dot			{width:100%}


/*form*/

@media (max-width: 992px) {
    #search	 {width: 90%;}
  }

  @media (max-width: 768px) {
    #r_bn 	 {display: none;}
    #search form input.search-text{ width: 70%; float: left;  position: relative;  margin-left: 20px;}
    #search form input.search-icon {position: relative; }

  }