﻿@charset "UTF-8";

html     {width:100%;  padding:0px; margin:0px; }
#wrap    {width:100%; float:left; }
.main_wrap {width:1200px; margin:0 auto;}

/*헤더
#header   { position:absolute; top:0; left:0; width:100%; min-width:1200px; float:left; height:105px; z-index:9999999999;
border-bottom:0px solid rgba(255,255,255,0.7); }/* box-shadow:5px 5px 10px rgba(0,0,0,0.3); }

.header_in {width:100%; max-width:1200px; margin:0 auto; z-index:9999999;}*/


/*헤더
#header   {position:relative; z-index:999999; width:100%; border-bottom:0px solid #ddd; float:left; position:relative; color:#fff; background:#013978; }
 .header_in  {width:1200px; margin:0 auto; position:relative; }
*/

/* 유틸 */
.util_wrap {width:100%; float:left;  background:#fff; height:80px; }
.util_wrap_box {width:1200px; margin:0 auto; }
.util_num_wrap {width:100%; float:left; }


.bottomBtn .fixed_top {width:60px; font-size:13.5px;  border-radius:5px;line-height:60px; background-color:#f1f1f1; color:#333;  text-align:center; flaot:right; position:fixed; bottom:5%; right:3%; letter-spacing:0.5px;}


.box_100 {width:100%; float:left;}
.box_100 ul li.col-4 {width:24.25%; float:left; margin-right:1%; border:1px solid #ddd; box-sizing:border-box;}
.box_100 ul li.col-4:last-child {float:right; margin-right:0%;}

.box_100 ul li.col-5 {width:20%; float:left; border:1px solid #ddd; box-sizing:border-box;}
.box_100 ul li.col-5:last-child {float:right; margin-right:5px;}

.box_60 {width:60%; float:left;}



.page_bt_wrap {position:fixed; right:3%; top:40%; width:125px; height:200px; background:rgba(0,0,0,0.3); padding:15px; box-sizing:border-box; }
.page_bt_wrap li .squ_bt{width:20px; height:20px; border:4px solid #ddd; box-sizing:border-box; cursor:pointer; float:left; margin-right:6px;}
.page_bt_wrap li a {color:#ddd; font-size:16px; line-height:1.3em; font-weight:300; display:block;  margin-bottom:10px;}

.page_bt_wrap {position:fixed; right:3%; top:40%;}
.page_bt_wrap li .squ_bt:hover{width:20px; height:20px; border:0; background:#003399; box-sizing:border-box; cursor:pointer; float:left; margin-right:6px;}
.page_bt_wrap li a:link		{text-decoration:none; color:#ddd;}
.page_bt_wrap li a:visited	{text-decoration:none; color:#ddd;}
.page_bt_wrap li a:hover	{text-decoration:none; color:#003399;}
.page_bt_wrap li a:active	{text-decoration:none; color:#003399;}


h2,h3,h4,h5   { margin:0px; padding-bottom:5px; color:#333; }
h2  		{font-weight:800;  font-size:2em;   line-height:1.2em; }
h3  		{font-weight:600;  font-size:1.5em; line-height:1.3em; }
h4  		{font-weight:600;  font-size:1.5em; line-height:1.3em; }
h5  		{font-weight:600;  font-size:1.3em; line-height:1.3em; padding-bottom:0px;}




/* ￿￿￿￿￿￿￿leftmenu */
#leftmenu	{width:245px;float:left;box-sizing:border-box; }

.mn_title      		{width:245px;  padding:30px 0 30px 20px; box-sizing:border-box;  border-left:1px solid #ddd; border-right:1px solid #ddd; background:#333;}
.mn_title span		{font-size:15px; font-weight:400; color:#999; text-align:left; letter-spacing:1px;}
.mn_title h2			{font-size:22px; font-weight:600; color:#fff; text-align:left; margin-top:5px;}


/*#leftmenu ul			{background-color:#f6f6f6; border-top:1px solid #012a7e; border-bottom:1px solid #012a7e; margin-top:20px;}
#leftmenu li			{font-size:14px; color:#585858; line-height:50px; border-bottom:1px solid #e1e1e1; }
#leftmenu a				{display:block; padding-left:20px;}
#leftmenu a:hover		{background:#012a7e; color:#fff;}
*/

#leftmenu ul,
#leftmenu ul li,
#leftmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


#leftmenu > ul	{   border:1px solid #ddd;}
#leftmenu ul ul { display: none;}

#leftmenu > ul > li.active2 > ul {display: block;}
.align-right {float: right;}

#leftmenu > ul > li > a {
  padding: 20px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  letter-spacing:-1px;
  text-decoration: none;
  color: #666;
  background: #fff;
  border-bottom:1px solid #e1e1e1;
  -webkit-transition: color .1s ease;
  -o-transition: color .1s ease;
  transition: color .1s ease;
}

#leftmenu > ul > li > a:hover {
  color: #333 !important ;
  background: url('/common/img/board/left_menu_arr.png') no-repeat center right 20px;  }

#leftmenu > ul > li >  a:hover		{ color:#333 !important;  }
#leftmenu > ul > li >  a:link			{text-decoration:none;  }
#leftmenu > ul > li >  a:active		{background:#fff; text-decoration:none;  color:#333 !important; font-weight:600; }
#leftmenu > ul > li >  a:visited	{text-decoration:none; color:#666; }

#leftmenu > ul > li.ov >  a:hover		{background:url('/common/img/board/left_menu_arr.png') no-repeat center right 20px;  text-decoration:none; color:#333 !important; }
#leftmenu > ul > li.ov >  a:link		  {background:#fff url('/common/img/board/left_menu_arr.png') no-repeat center right 20px;  text-decoration:none;  color:#333 !important;  }
#leftmenu > ul > li.ov >  a:active		{ text-decoration:none; color:#333; font-weight:500; }
#leftmenu > ul > li.ov >  a:visited		{background:#fff;text-decoration:none; color:#333; }



#leftmenu ul > li.has-sub2 > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #efefef;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}


#leftmenu ul > li.has-sub2 > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #efefef;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#leftmenu ul > li.has-sub2.open > a:after,
#leftmenu ul > li.has-sub2.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}


#leftmenu > ul > li.active3 > ul {display: block;}

#leftmenu ul > li.has-sub3 > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ddd;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#leftmenu ul > li.has-sub3 > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ddd;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#leftmenu ul > li.has-sub3.open > a:after,
#leftmenu ul > li.has-sub3.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}


#leftmenu ul ul li a {
  padding: 14px 32px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  border-bottom:1px solid #e2e2e2;
  color: #777;
    background:#fff;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#leftmenu ul ul ul li a { padding-left: 32px;}

/* ￿: ￿*/
#leftmenu > ul  > li > ul > li a:hover			{ color:#333 !important;  background:#f7f7f7;}
#leftmenu > ul  > li > ul > li a:link			{text-decoration:none;  }
#leftmenu > ul  > li > ul > li a:active			{background:#f7f7f7; text-decoration:none; color:#333; font-weight:600; }
#leftmenu > ul  > li > ul > li a:visited		{text-decoration:none; color:#777; }

#leftmenu > ul > li > ul > li.ov  a:hover		{background:#f7f7f7; text-decoration:none;  color:#66cccc !important; }
#leftmenu > ul > li > ul > li.ov  a:link		{background:#f7f7f7; text-decoration:none; color:#333; }
#leftmenu > ul > li > ul > li.ov  a:active		{background:#f7f7f7; text-decoration:none; color:#333; font-weight:500; }
#leftmenu > ul > li > ul > li.ov  a:visited		{background:#f7f7f7; text-decoration:none; color:#333; }

#leftmenu ul ul li a:hover {color: #ffffff; }


/* ￿￿CSS */

#leftmenu .menu a {
  display: block;
  padding: 10px 15px;
}

#leftmenu .drop-down a {
  min-width: 90px;
}

#leftmenu .drop-down-menu {
  display: block;
}

#leftmenu .menu-title {
  cursor: pointer;
  display:block;
  padding: 12px 20px;
  font-weight:400 !important;
}

#leftmenu .activate {
  display: none;
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 40px;
  margin: 0 0 0 -15px;
  opacity: 0;
}

/* Skin */
#leftmenu .menu a, .drop-down-menu {
  background: #fff;
  color:#666;

}

#leftmenu .menu a:hover, .drop-down-menu:hover {
  color: #66cccc;
}

#leftmenu .drop-down a {
  background: #fff;
  border:none;
  padding:9px 18px;
}

#leftmenu .drop-down a:hover {
  color: #66cccc;
}

#leftmenu .menu  {
	font-size:16px;
}

:checked ~ .menu-title {
  color:#66cccc;
  background:#f7f7f7 url('/../common/img/sub/left_menu_arr.png') no-repeat center right 20px;
}

#leftmenu .drop-down {
  max-height: 0;
  overflow: hidden;
}

#leftmenu .drop-down a {
  background: #fff;
  font-size:15px;

}

#leftmenu .activate:checked ~ .drop-down {
  max-height:500px;
}

#leftmenu .drop-down,
#leftmenu .menu a, .drop-down-menu {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#leftmenu .drop-down-menu {border-bottom:1px solid #ddd;}


#leftmenu .drop-down ul li:first-child{padding-top:6px}
#leftmenu .drop-down ul li:last-child{padding-bottom:6px}



/* 탑사이트맵 */
.top-sitemap{max-width:1100px;margin:0 auto;}
.top-sitemap .dep01 > li{display:inline-block;width:22%;text-align:left;vertical-align:top;}
.top-sitemap .dep01 > li:last-child{width:12%;}
.top-sitemap .dep01 > li + li{margin-left:-4px;}

.top-sitemap .dep01 > li > strong{display:block;font-weight:500;color:#333; font-size:20px;}
.top-sitemap .dep01 > li > strong a{position:relative;}
.top-sitemap .dep01 > li > strong a::after{content:"";position:absolute;bottom:0;left:0;width:0%;height:1px;transition-duration:.3s;}
.top-sitemap .dep01 > li > strong a:focus::after,
.top-sitemap .dep01 > li > strong a:hover::after{width:100%;}

.top-sitemap .dep01 > li .dep02{margin-top:30px;}
.top-sitemap .dep01 > li .dep02 > li{margin-top:15px;}
.top-sitemap .dep01 > li .dep02 > li > a{display:inline-block;position:relative;padding-bottom:2px;color:#555; font-size:17px;}
.top-sitemap .dep01 > li .dep02 > li > a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;transition-duration:.3s;}

.top-sitemap .dep01 > li .dep02 > li > a:hover{color:#d4b666; text-decoration:underline;}
.top-sitemap .dep01 > li .dep02 > li > a:focus::after,
.top-sitemap .dep01 > li .dep02 > li > a:hover::after{width:100%; }


/* footer */
#footer       	   		{position:relative; float:left; width:100%; min-width:1200px; background-color:#333; margin:0 auto;}
#footer  .footer_in  	{width:1200px; margin:0 auto;  padding:30px 0; box-sizing:border-box;}
#footer  .box  			{float:left;  box-sizing:border-box;  }


#footer  .foot_txt 	{box-sizing:border-box;	color:rgba(255,255,255,0.7); font-size:15px !important; margin-top:10px; line-height:22px; font-weight:400;}
#footer  .foot_logo {float:left; margin-top:42px; }

.topBtn {position:fixed;bottom: 30px; right:14%; opacity: 1; display: block;}