/* include 공통 CSS */

/************************* 공통 시작*************************/
.sub_title_navi			{display:block; }
.sub_tab						{display:none;}

/* left menu 있을때... */
/*
.sub_left								{width:15%; max-width:200px; float:left;}
.sub_right						{width:82%; padding-right:1%; float:right; position:relative;}
*/

.sub_left								{display:none; }
.sub_right						{width:100%; position:relative;}

.content_title			{margin:15px 0; padding:15px 0; border-bottom:1px solid #dfdfdf; display: none;}
.content_title h1		{font-size:18px; font-weight:700; color:#000;}
.content_title p		{font-size:12px;}

.content_desc				{min-height:500px;}
.inner {max-width:1200px; width: 100%; display: block; margin: 0 auto;}

@media(max-width:1300px){
.inner {padding: 0 4%;}
}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
/**/
.header_t			{width:100%; margin:0 auto; padding: 0 5%; position:fixed; left:0; top:0px; z-index:99; display:flex; justify-content:space-between; align-items:center;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;}


/* 로고 */
.header_logo img			{width:100%; max-width:232px; height:auto; display: block;}
.header_logo img:last-child {display: none;}

/* 로그인버튼 */
.header_btn dl dd			{font-size:0.75rem; padding-top:5px;}

/* global navigation bar */
.gnb								{position:relative; z-index:999;}

/* gnb Common */
.menu								{position:relative;}
.menu .major > ul										{list-style:none; display:flex; justify-content:flex-end; width:100%;}
.menu .major > ul li								{position:relative;}
.menu .major > ul > li							{}
.menu .major > ul > li > a					{position:relative; padding:0; color:#fff;display:inline-block; margin:0 25px; padding:35px 0px; font-size:18px !important; }

/*대메뉴 포커스 효과 변경시 */
.menu .major > ul > li > a::after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 3px; background: #0066d0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }

.menu .major > ul > li > a:hover ,
.menu .major > ul > li > a:active ,
.menu .major > ul > li > a:focus,
.menu .major > ul > li.active > a,
.menu .major > ul > li.pactive > a {color: #0066d0;}

/*대메뉴 포커스 효과 변경시 */
.menu .major > ul > li > a:hover::after ,
.menu .major > ul > li > a:active::after ,
.menu .major > ul > li > a:focus::after,
.menu .major li.active > a::after,
.menu .major li.pactive > a::after { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: center; transform-origin: center; }

.menu .major > ul > li.pactive ul.sub{opacity:0;visibility:hidden;transform: translateY(-.5em);z-index: 1;}
/*대메뉴 포커스 효과 변경시 */

/* gnb 2depth */
.menu .major ul.sub {
	display:inline;
	position:absolute; 
	top:97px; 
	border:1px solid #dfdfdf; 
	background:#fff;
	visibility:hidden;
	opacity:0;
	z-index: -1;
	transform: translateY(-.5em);
	transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.01s;
}

.menu .major li.active ul.sub		{display:block; opacity:1; visibility:visible; transform: translateY(0%);z-index: 1;transition-delay: 0s, 0s, 0.3s;}
.menu .major ul.sub li					{clear:both; margin:0; padding:0;}
.menu .major ul.sub li a				{display:block; text-align:center; color:#555; font-size: 16px;transition: color 0.3s;padding: 15px 9px}
.menu .major ul.sub li a:hover	{color:#0066d0}

/* gnb 2depth  */
li.m1 ul.sub{width:220px;}
li.m2 ul.sub{width:220px;}
li.m3 ul.sub{width:220px;}
li.m4 ul.sub{width:220px;}
li.m5 ul.sub{width:220px;}
li.m6 ul.sub{width:220px;}


/* 햄벅 */
.mo_nav				{display:block; }
.mo_nav *{
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;}
.mo_nav .navbar-toggle {position: relative; background-color:transparent; background-image:none; border-radius:3px; border:0;}
.mo_nav .navbar-toggle:focus {outline: 0;}
.mo_nav .navbar-toggle .icon-bar {background:#fff; display:block; width:25px; height:2px;}
.mo_nav .navbar-toggle .icon-bar + .icon-bar {margin-top:6px; height:2px; width:25px; }
.mo_nav .navbar-toggle .icon-bar + .icon-bar + .icon-bar{margin-top:6px; width:25px; height:2px; }

.mo_nav:hover .navbar-toggle .icon-bar								{transform:translateX(5px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar		{transform:translateX(16px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar + .icon-bar		{transform:translateX(3px);}


@media(max-width:768px){
.header_t {padding: 20px 4%;}
.header_gnb_bg			{display:none;}
.header_btn					{display:none;}
}

/**/
.f-nav{background:#fff; border-bottom:1px solid #dfdfdf;}
.f-nav .header_logo img:last-child {display: block;}
.f-nav .header_logo img:first-child {display: none;}
.f-nav .menu .major > ul > li > a {color: #212121;}
.f-nav .mo_nav .navbar-toggle .icon-bar {background: #212121;}
/************************* header_inc 끝*************************/

/************************* main_inc 시작*************************/

/************************* main_inc 끝*************************/
/* 서브 공통 */
.sub_title {font-size: 26px; font-weight: 600; text-align: center; margin: 0 auto; color: #222;}
.s51 {padding: 100px 0;} 
.s61, .s62, .s63, .s64, .s65 {padding-top: 150px;}
.s65 {margin-bottom: 5%;}
.s61_title {text-align: center; margin: 0 auto; font-size: 36px; font-weight: 600; color: #222; margin-bottom: 5%;}

/* s51 */
.s51_a_flx {display: flex; align-items: flex-start; justify-content: space-between; margin: 90px 0 100px;}
.s51_a_flx li {width: 24%; height: 300px; padding: 30px; text-align: center; border: 1px solid #ddd; border-radius: 15px;}
.s51_a_flx figure {height: 100px;}
.s51_a_flx figure img {display: block; width: 100%; height: auto; margin: 0 auto;}
.s51_a_flx li:first-child img {max-width: 78px;}
.s51_a_flx li:nth-child(2) img {max-width: 83px;}
.s51_a_flx li:nth-child(3) img {max-width: 61px;}
.s51_a_flx li:last-child img {max-width: 75px;}
.s51_a_flx li h3 {font-size: 24px; font-weight: 600; color: #222; margin-bottom: 12px;}
.s51_a_flx li p {font-size: 18px; color: #555; line-height: 1.6;}

.s51_b > div {margin-bottom: 60px;}
.s51_b > div:last-child {margin-bottom: 0;}
.s51_b h2 {font-size: 24px; font-weight: 600; margin-bottom: 10px;}
.s51_b p {font-size: 18px; color: #555; position: relative; padding-left: 15px; font-weight: 400; line-height: 2;}
.s51_b p:before {content: ''; display: block; width: 8px; height: 1px; background: #555; position: absolute; left: 0; top: 16px;}

.s51_b_div2 p:before {width: 4px; height: 4px; border-radius: 50%; top: 16px;}
.s51_b_div2 p:nth-child(2) {padding-left: 0; font-weight: 500; color: #222; margin-bottom: 20px;}
.s51_b_div2 p:nth-child(2)::before {display: none;}
.s51_b_div2 p:nth-child(2) span {display: inline-block; margin-right: 12px;}

.s51_b_div3 .s51_down {background: #0066d0; color: #fff; padding: 20px 30px; font-size: 18px; border-radius: 15px; display: inline-block; margin-top: 30px;}

/* s61 */
.s61 figure img {max-width:1200px; width: 100%; display: block; margin: 0 auto;}
.s61 table {border-top: 2px solid #0066d0; width: 100%; margin-top: 40px;}
.s61 table tr {border-bottom: 1px solid #ddd;}
.s61 table tr th {font-size: 18px; font-weight: 500; color: #212121; padding: 15px 0; text-align: center; background: #f5f5f5;}
.s61 table tr td {font-size: 18px; color: #626262; padding: 15px;}

/* s62 */
.s62 {overflow: hidden;}
.history_box{position:relative;}
.history_box:before{position:absolute; content:''; clear:both; width:2px; background:#ddd; display:block; height:140%; z-index: 0; left: 11%; top: 10px;}
.history_wrap .year_inner {display: flex; margin-bottom: 30px;}
.history_wrap .year_inner strong {width: 10%; font-size: 30px; font-weight: 700;}
.history_wrap .year_inner ul {width: 90%; padding-left: 7%;}
.history_wrap .year_inner li {display: flex; position: relative; margin-bottom: 20px;}
.history_wrap .year_inner li::before {content: ''; width: 10px; height: 10px; background: #0066d0; border-radius:50%; display: block; position: absolute; top: 5px; 
	left: -7.6%;}
.history_wrap .year_inner li span {display: block; width: 8%; font-size: 18px; font-weight: 500;}
.history_wrap .year_inner li p {width: 92%; font-size: 17px; color: #626262; line-height: 1.6;}

/* s63 */
.s63 h2 {display: flex; align-items: center; justify-content: center;}
.s63 h2 img {display: block; max-width: 64px; width: 100%; height: auto; margin: 0}
.s63 h2 span {font-size: 27px; color: #222; font-weight: 600; margin-left: 12px;}
.s63 h2 + p {font-size: 24px; text-align: center; color: #222; margin: 20px 0 60px;}

.s63_txt {text-align: center; margin: 40px auto 0; display:  flex; align-items: flex-start; justify-content: center;}
.s63_txt li {position: relative; margin-right: 40px;}
.s63_txt li::after {content: ''; display: block; position: absolute; background: #ddd; right: -6.5%; top: 50%; transform: translate(0, -50%); width: 1px; height: 60%;}
/* .s63_txt li:last-child {margin-right: 30px;} */
.s63_txt li:last-child::after {display: none;}

.s63_txt h3 {font-size: 20px; font-weight: 600; color: #222;}
.s63_txt p {font-size: 18px; color: #222; font-weight: 400; line-height: 1.6; margin-top: 15px;}

.s63 figure img:first-child {max-width: 760px; display: block;}
.s63 figure img:last-child {max-width: 1000px; display: none;}

/* s64 */
.s64 img, .s63 img {width: 100%; height: auto; margin: 0 auto;}
.s64 img:first-child {max-width: 1200px; display: block;}
.s64 img:last-child {max-width: 1000px; display: none;}

/* s65 */
.s65 > div:last-child {margin-top: 5%;}
.s65 .root_daum_roughmap {width: 100%; height: 400px;}
.s65 .root_daum_roughmap .wrap_map {width: 100%; height: 100%;}
.s65 .root_daum_roughmap .wrap_controllers {display: none;}
.s65 .info {padding: 40px; background: #0066d0; color: #fff; display: flex; justify-content:center; align-items:center; width: 100%;}
.s65 .info h2 {margin-right: 55px; padding: 10px 55px 10px 0; border-right: 1px solid #ffffff50; font-size: 28px; font-weight: 700; display: none;}
.s65 .info .wrap {display: flex; align-items:center; flex-flow:row wrap;}
.s65 .info .wrap .ico {width: 40px; height: 40px; border-radius:50%; background: #fff; display: flex; justify-content:center; align-items:center;}
.s65 .info .wrap h3 {font-size: 20px; font-weight: 700; margin: 0 25px 0 20px;}
.s65 .info .wrap p {font-size: 18px; font-weight: 300;}

/* s11 */
.m_figure {padding: 100px 0;}
.m_figure img {display: block; max-width: 1200px; width: 100%; height: auto; margin: 0 autio;}
.tab-content {display: none;}
.tab-content.current {display: block;}

.tabs {display: flex; align-items: center; justify-content: center; flex-flow: row wrap; flex: 1; margin-top: 100px ;}
.tabs li {font-size: 16px; color: #212121; background: #fff; width: 20%; height: 3.5vw; padding: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer; border: 1px solid #ddd; text-align: center;}
/* .tabs li:last-child {border-right: none;} */
.tabs li.current {background: #0066d0; color: #fff;}


@media(max-width:1280px){
.sub_title {font-size: 22px;}
.s51 {padding: 85px 0;}
.s61, .s62, .s63, .s64, .s65 {padding-top: 100px;}

.tabs {margin-top: 80px;}
.tabs li {height: 4.5vw;}
.m_figure {padding: 80px 0;}

/* s51 */
.s51_a_flx {margin: 50px 0 70px;}
.s51_a_flx li h3 {font-size: 20px; margin-bottom: 8px;}
.s51_a_flx li p {font-size: 16px;}
.s51_a_flx li p br {display: none;}
.s51_b h2 {font-size: 20px;}
.s51_b > div {margin-bottom: 50px;}

/* s63 */
.s63 h2 span {font-size: 22px;}
.s63 h2 + p{font-size: 20px;}
}
@media(max-width:1080px){
.sub_title {font-size: 20px;}
.s51 {padding: 70px 0;}
.s61, .s62, .s63, .s64, .s65 {padding-top: 80px;}
.s61_title {font-size: 30px; margin-bottom: 3%;}

.tabs {margin-top: 70px;}
.tabs li {font-size: 14px; height: 6vw; width: auto;}
.m_figure {padding: 70px 0;}

/* s51 */
.s51_b > div {margin-bottom: 40px;}
.s51_b h2 {font-size: 18px;}
.s51_b p {font-size: 16px;}
.s51_b_div3 .s51_down {padding: 15px 25px; font-size: 16px; margin-top: 20px;}

/* s62 */

/* s63 */
.s63 h2 span {font-size: 20px;}
.s63 h2 + p, .s63_txt h3 {font-size: 18px;}
.s63_txt p {font-size: 16px;}

/* s65 */
.s65 .info {padding: 25px; display: block;}
.s65 .info h2 {margin-right: 0; padding: 10px 0; border-right: none; font-size: 20px;}
}
@media(max-width:980px){
.s51_a_flx  {flex-flow: row wrap; align-items: normal;}
.s51_a_flx li {width: 48%; height: auto; margin-bottom: 2%; padding: 30px 20px;}
.s51_a_flx li:first-child img {max-width: 55px;}
.s51_a_flx li:nth-child(2) img {max-width: 60px;}
.s51_a_flx li:nth-child(3) img {max-width: 48px;}
.s51_a_flx li:last-child img {max-width: 55px;}
.s51_a_flx figure {height: auto; margin-bottom: 5%;}

/* s63 */
.s63_txt {justify-content: space-between;}
.s63_txt li {width: 30%; margin-right: 0;}
.s63_txt p br {display: none;}
}
@media(max-width:768px){
.sub_title {font-size: 18px;}
.sub_title br {display: none;}
.s51 {padding: 50px 0;}
.s61, .s62, .s63, .s64, .s65 {padding-top: 50px;}
.s61_title {font-size: 20px; margin-bottom: 3%;}
.s61_quick {display: none;}

.tabs {margin-top: 50px;}
.tabs li {padding: 17px 10px;}
.m_figure {padding: 50px 0;}

/* s51 */
.s51_a_flx {margin: 40px 0;}
.s51_a_flx li h3 {font-size: 18px;}
.s51_a_flx li p {line-height: 1.5;}

/* s61 */
.s61 table {margin-top: 30px;}
.s61 table tr th {font-size: 14px; padding: 10px 0;}
.s61 table tr td {font-size: 14px; padding: 10px;}

/* s62 */
.history_box:before {left: 10.5vw;}
.history_wrap .year_inner li::before {width: 6px; height: 6px; left: -7.1%;}
.history_wrap .year_inner {margin-bottom: 40px;}
.history_wrap .year_inner strong {font-size: 20px; width: 13%;}
.history_wrap .year_inner ul {padding-left: 4%; width: 87%;}
.history_wrap .year_inner li {margin-bottom: 20px;}
.history_wrap .year_inner li span {font-size: 15px; width: 12%;}
.history_wrap .year_inner li p {font-size: 14px; width: 88%;}

/* s63 */
.s63 h2 span {font-size: 18px;}
.s63_txt {flex-direction: column;}
.s63_txt li {width: 100%; background: #f8f8f8; margin-bottom: 20px; padding: 20px;}
.s63_txt li::after {display: none;}
.s63_txt p {margin-top: 6px;}
.s63 h2 + p {margin: 15px 0 40px;}

/* s64 */
.s64 img:first-child, .s63 figure img:first-child  {display: none;}
.s64 img:last-child, .s63 figure img:last-child {display: block;}

/* s65 */
.s65 .root_daum_roughmap {height: 300px;}
.s65 .info {padding: 20px;}
.s65 .info h2 {font-size: 18px;}
.s65 .info .wrap .ico {width: 30px; height: 30px; }
.s65 .info .wrap .ico svg {width: 12px;}
.s65 .info .wrap h3 {font-size: 15px; margin: 0 30px 0;}
.s65 .info .wrap p {font-size: 14px; margin-top: 15px;}
}
@media(max-width:500px){
.sub_title {font-size: 16px;}
.s61_title {font-size: 18px;}

.history_box:before {left: 16.8vw;} 

/* s51 */
.s51_a_flx li {padding: 5% 4%;}
.s51_a_flx li h3 {font-size: 16px;}
.s51_a_flx li p {font-size: 14px;}
.s51_a_flx figure {margin-bottom: 7%;}
.s51_a_flx li:first-child img {max-width: 45px;}
.s51_a_flx li:nth-child(2) img {max-width: 50px;}
.s51_a_flx li:nth-child(3) img {max-width: 38px;}
.s51_a_flx li:last-child img {max-width: 45px;}

.s51_b > div {margin-bottom: 30px;}
.s51_b h2 {font-size: 16px;}
.s51_b p {font-size: 14px;}
.s51_b_div3 .s51_down {padding: 2% 5%; font-size: 14px; margin-top: 20px;}

/* s62 */
.history_wrap .year_inner {flex-direction: column;}
.history_wrap .year_inner strong {width: 100%;}
.history_wrap .year_inner ul {width: 100%; padding-top: 4%;}
.history_wrap .year_inner li::before {width: 4px; height: 4px; left: -12px; top: 9px;}
.history_wrap .year_inner li span {width: 15%;}
.history_wrap .year_inner li p {width: 85%;}
.history_box:before {display: none;}

/* s63 */
.s63 h2 img {max-width: 40px;}
.s63 h2 span {margin-left: 8px;}
.s63 h2 + p, .s63_txt h3 {font-size: 15px;}
.s63_txt p {font-size: 14px;}
}

/************************* title_navi 시작 *************************/
.navi_all {width:100%; margin:0 auto; background:#fff; height:50px; border-bottom:1px solid #ddd; }
.navi_in	{margin:0 auto; padding:0;max-width:1200px; margin:0 auto;}
.navi_in:after		{clear:both; content:''; display:block; width:100%;}

.home_btn_all						{float:left; width:10%; max-width: 55px;  border-right:1px solid #efefef;}
.home_btn_all a {display:flex; align-items: center; justify-content: center; height:50px; line-height:50px; text-align:center; background: #0066d0;}
.home_btn_all a i.xi-home {color: #fff; font-size: 16px;}

.navi_left					{float:left; width:90%; max-width:550px;}
.navi_left:after		{clear:both; content:''; display:block; width:100%;}
.navi_left div			{float:left;}

.navi_main		{width:50%; max-width:250px; padding:0 0 0 0; height:50px; position:relative; line-height:50px;  cursor:pointer; border-right:1px solid #efefef;}
.navi_title01	{padding:0 0 0 0; height:40px; width:100%; position:relative; line-height:50px; }
.navi_title01 h1 {color:#212121; font-size:16px; padding-left:10px; width:100%;}

.navi_main h1 { color:#212121; font-size:16px; padding-left:10px;}
.navi_main h1.sub_manu:hover, .navi_title01 h1.sub_menu:hover { color:#0066d0; }
.navi_main > .deco_right { float:right;  }

.navi_main >a.down_btn1	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn2	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn3	{position:absolute; right:10px; top:0px;}

.h1_focus	{color:#333 !important;;}

.navi_sub {width:50%; max-width:250px; padding:0; height:50px; line-height:50px; position:relative; cursor:pointer; border-right:1px solid #efefef;}
.navi_sub > h2						{ color:#212121; font-size:16px;  cursor:pointer; margin-left:10px;}
.navi_sub>a.down_btn4	{position:absolute; right:10px; top:0px; }

.navi_sub > p {float:right; }

.extend1 {position:relative; top:-1px; width:100%; }
.extend1 > ul {position:absolute;left:-1px; min-height:1px;width:100%;padding-left: 0px; padding:0px 0 10px 0; border-top:0;z-index: 999; background:#fff; border:1px solid #efefef; display:none;}
.extend1 > ul a { text-decoration:none; }


.extend2 {position:relative; top:-1px; width:100%;}
.extend2 > ul {position: absolute;left:-1px; min-height:1px; width:100%; padding-left:0px; z-index: 999; background:#fff; border:1px solid #efefef; display:none; padding:0px 0 10px 0; }
.extend2 > ul a { text-decoration:none; }
.extend2 h1 { }

/*
position:absolute; left:-20px; min-height:1px; width:256px; padding-left:20px;  border-top:1px solid #efefef; z-index:999; background:#ddd; 
*/

.extend > ul > li		{min-height:20px;}
.down_btn {cursor:pointer; }

@media(max-width:768px){
.navi_main h1, .navi_sub > h2, .navi_title01 h1 {font-size: 13px;}
}

/************************* title_navi 끝 *************************/


/************************* footer_inc 시작 *************************/
footer {padding: 50px 0; background: #212121; color: #fff; font-size: 16px; }
footer br {display: none;}
footer .f_top {display: flex; justify-content:space-between; align-items:center; margin-bottom: 25px;}
footer .f_top img {max-width:232px; width: 100%; display: block; opacity: 1;}
footer .f_top ul {display: flex;}
footer .f_top ul li:first-child {margin-right: 25px;}
footer .f_top ul li a {color: #ccc;}
footer .f_bottm {line-height: 1.6;}
footer .f_bottm p span {display: inline-block; color: #ccc; margin-left: 25px; font-weight: 500;}
footer .f_bottm p span:first-child {margin-left: 0;}
footer .f_bottm .copy {color: #ccc; margin-top: 15px;}

@media(max-width:1080px){
footer {padding: 35px 0; font-size: 14px;}
footer br {display: block;}
footer .f_top img {width: 80%;}
footer .f_top ul li:first-child {margin-right: 10px;}
footer .f_bottm {font-size: 13px;}
footer .f_bottm p span {margin-left: 15px;}
footer .f_bottm p .em {margin-left: 0;}
}
/************************* footer_inc 끝 *************************/



/************************* left_lnb_inc 시작 *************************/
.left_lnb		{  }
/************************* left_lnb_inc 끝 *************************/



/************************* ui.totop 시작 *************************/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url("./img/ui.totop6.png") no-repeat left top;
}

#toTopHover {
	background:url("./img/ui.totop6.png") no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}
/************************* ui.totop 끝 *************************/