@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
*{
	margin: 0px;
	padding: 0px;
}
body {
	font-family:'Noto Sans KR', ng;
	font-size:0.85em;
	margin:0 auto;
	background-position:50% 0%;
}	

h1,h2,h4,h3,h5,h6
{
	font-family:'Noto Sans KR', ng; color:#666;font-size:14px;
}
h1
{
	font-size:18px;
}
pre
{
	font-family:'Noto Sans KR', ng;
	font-size:0.85em;
}
img,a
{
	border:0;
	outline:none;
	cursor: pointer;
}
/*a:activity
{
	border:none;
}*/
#tnb a
{
	padding:0 0px;
}
nav span
{
	font-weight:bold;	
	
}

.no-wrap li {
    white-space: nowrap;
}

#header
{
	width:100%;
    z-index: 1;
    margin: 0 auto;	
	background:#4b545e;
	height:140px;
}
#header #top
{
	width:100%;
	height: 20px;
}
#header #contents
{
	width:1170px;
    margin: 0 auto;	
	background:#4b545e;
	height:140px;
}
#header #contents .logo
{
	display: block;
	width:250px;
	height: 98px;
	float:left;
	margin-top: 20px;
}
#header #contents .banner
{
	display: block;
	width:583px;
	height: 140px;
	float:right;
}
#top_contents2_wrp
{
	float:right;
	width:270px;
}

#text_size
{
	display:block;
	top:7px;
	left:660px;
	position:absolute;

}
#site_image_wrp
{
	clear: both;
	position: relative;
	padding: 0;
	top:0px;
	width: 1170px;
	height: 325px;
    margin:0 auto; /*center-aligned*/
}
/*footer*/
#footer
{
	padding: 0;
	border-top: 1px solid #c4c6d4;
	margin: 0 auto;
	width: 100%;
/*	position: absolute;*/
	background: #e7e8ef;
	}
	#footer span {font-size:12px;color:#999;display: inline-flex;}
	#footer span a {font-size:14px;color: #666;font-weight: 600;padding: 0 10px;}
#footer span p {padding:0 0 0 30px}
#footer .customer {float: right;}
#footer .customer li{float: left;display: block;border: 1px solid #D1D1D1;padding: 10px;text-align: center;color: #999;border-radius: 82px;height: 62px;margin: -14px 0 13px 20px;}
#footer .customer .tel {width: 65px;font-size: 14px;}
#footer .customer .tel span {
    font-size: 20px;
}
#footer .customer .mail {font-size: 18px;}

#footer #menu
{
	background: #e7e8ef;
	margin:0 auto;
	display: table;
	width: 1183px;
	padding-top:10px;
}
#footer #copy_wrp
{
	width: 1180px;
	display: block;
	margin:0 auto;
	background-color: #e7e8ef;
}
#footer #copy_wrp div
{
	width: 1186px;
	padding-left: 10px;
}
#footer #copy_wrp p
{
	height:50px;
	float:left;
	font-size: 12px;
	display:block;
	color: #666;
	padding-top:20px;
}
#footer #copy_wrp .logo
{
	display: block;
	width:252px;
	height: 98px;
	background:url("./images/logo2.png") no-repeat;
	float:left;

}


/* common */
.wrap
{
	position:relative;
	margin:0 auto;
	width:1100px;
	overflow:hidden;
}
.wrap_contents
{
	position:relative;
	margin:0 auto;
	width:1100px;
	overflow:hidden;
	margin-bottom:80px;
}
.fwrap
{
	width:100%;
	margin:0 auto;
	background-color:#ebecf1;
	height:auto;

}


.fwrap2
{
	width:100%;
	margin:0 auto;
	background-color:#f6f7fb;
	height:auto;

}
.sns_link
{
	float:right;
	width:150px;
	height:50px;
	padding-top:15px;
}
.sns_link a
{
	display:block;
	width:49px;
	height:48px;
	float:left;
}
.sns_link .one
{
	background:url("./images/img02.png");
}
.sns_link .two
{
	background:url("./images/img03.png");
}
.sns_link .three
{
	background:url("./images/img04.png");
}
a:hover, a:focus, a:active {
    color: #4b545e;
    text-decoration: none;
}
/*상단 메뉴 고정을 위해 추가*/
.navbar {
	/*overflow: hidden;*/
	background-color: #fff;
	position: fixed;
	top: 0;
	width: 100%;
	z-index:9;
}
.main {
}




.board_box_one
{
	width:50%;

	float:left;
}
.board_box_two
{
	width:50%;
	float:right;

}
/* 상단 회원가입 등 링크 */
#tnb {
float:right;
margin:0;
height: 30px;
padding:0;
list-style:none;
}
#tnb:after {
display:block;visibility:hidden;clear:both;content:"";
}
#tnb li {
float:left;
padding: 2px 12px;
height: 32px;
color: #666;
}
#tnb a {
display:inline-block;
height: 39px;
color: #666;
letter-spacing:-0.1em;
line-height:2.4em;
}
#tnb a:focus, #tnb a:hover, #tnb a:active {text-decoration:none}
#tnb img {margin-right:3px}


/* index.php */
.wrap.index
{
}
#index_contents1_wrp
{
	height:104px;
	width: 1170px;
}
#index_contents1_wrp .banner li
{float:left;list-style:none;}
#index_contents1_wrp .banner li a 
{float:left;list-style:none;cursor: pointer;}

#index_contents1_wrp .banner li span
{color:#317be2;font-size:24px;font-weight:300;display:table;}
#index_contents1_wrp .banner
{
	float:left;
	width: 1170px;
	height:104px;
	background: #fff;
}
#banner2
{width: 163px;padding: 17px 0 10px 63px;
	background: url("images/banner2.png") no-repeat left;
}
#banner3
{width: 163px;padding: 17px 0 10px 63px;
	background : url("images/banner3.png") no-repeat;
}
#banner4
{width: 163px;padding: 17px 0 10px 63px;
	background : url("images/banner4.png") no-repeat;
}
#banner5
{width: 163px;padding: 17px 0 10px 63px;
	background : url("images/banner5.png") no-repeat;
}
.bus{height: 104px;width: 104px;text-align: center;border: 1px solid #c4c6d4;border-bottom:none;margin: 5px;padding: 10px 0 0 0;border-radius: 5px 5px 0 0;background:#e2e3ec;}
.bus a{height: 104px;background : url("images/main_arrow.png") no-repeat 14px 62px;font-size: 20px;width: 104px;line-height: 24px;padding: 8px 0 0 0;color:#173968;}
.bus a:hover{background : url("images/main_arrow_on.png") no-repeat 14px 62px;color:#ff7e00;}

.edu{text-align: center;height: 104px;width: 104px;border: 1px solid #c4c6d4;border-bottom:none;margin: 5px;padding: 10px 0 0 0; border-radius:5px;background:#e2e3ec
}
.edu a{height: 104px;background : url("images/main_arrow.png") no-repeat 14px 62px;font-size: 20px;width: 104px;line-height: 24px;padding: 8px 0 0 0;color:#173968;}
.edu a:hover{background : url("images/main_arrow_on.png") no-repeat 14px 62px;color:#ff7e00;}


#index_contents2_wrp
{
	height:85px;
	width: 1170px;
	margin:0 auto;
	font-size:1.3em;
	font-weight:bold	;
}
#index_contents2_wrp p
{
	padding-top:33px;
	float:left;
}
#index_contents2_wrp span
{

}
#index_contents2_wrp .icon
{
	padding-top:2px;
	background-image:url("./images/img01.png");
	width:80px;
	height:80px;
	border-style: none;
	
}

#index_contents2_wrp .title
{
	color:black;
}
#index_contents2_wrp .sub
{
	color:#173968;
	font-weight: normal;
	padding: 0 40px 0 20px;
}
#index_contents1_wrp #info
{
	border:inherit;
	float:right;
	width: 253px;
	height:224px;
	background:url("images/banner1.jpg") no-repeat;
	text-indent:-10000px;
}
#index_contents2_wrp h1
{
	background:url("images/m_title_photo.jpg") no-repeat;
	width: 300px;
	height:42px;
	margin:0 0 15px 0;
	text-indent:-10000px;
}
#index_contents3_wrp
{
	border:1px solid gray;
	float:left;
	width: 800px;
	height:150px;
	background: #fff;
	border-style: solid;
    border-color: #ddd;
    float:left;
}
#index_contents4_wrp
{
	border:inherit;
	float:left;
	width: 253px;
	height:224px;
}
#index_contents5_wrp
{
	border:inherit;
	float:left;
	width: 253px;
	height:224px;
}
.index_link
{
	display:block;
	width:216px;
	height:40px;
	cursor:pointer;
	text-indent:-10000px;
}
.index_link.one
{
	background:url("images/m_banner01.png") no-repeat;
}
.index_link.two
{
	background:url("images/m_banner02.png") no-repeat;
}
.banner8
{
	float:left;
	width: 177px;
	height: 57px;
	cursor:pointer;
	margin-right:17px;
}
.sub_page
{
}
.sub_page .menu
{
	height:150px;
	text-align: center;
	padding-top:10px;
}
.sub_page .menu h1
{
	color:#4b545e;
	margin:0 auto;
	text-align:center;
	border-bottom: 3px solid #4b545e;
	display: inline-block;
	line-height: 21px;
	padding-top:30px;
	font-weight: 300;
	padding-bottom:20px;
	font-size: 36px;
}
.sub_page .menu ul
{
	list-style : none;
	display: table;
	height: 100px;
	margin: 0 auto;
	padding-top:20px;
	font-size: 18px;
	color:#666666;
}
.sub_page .menu ul li
{
	list-style : none;
	float:left;
	padding: 0 10px;
}


.sub_page .title
{
	height: 78px;
}
.sub_page .title h1
{
	color: black;
	margin:0 auto;
	float:left;
	padding-top: 23px;
	padding-bottom:20px;
	font-size: 22px;
}
.sub_page .contents1
{
	display:block;
}
.sub_page .contents1 p
{
	display:block;
	font-size:1.2em;
	line-height: 1.7;
	padding: 20px 0;
}
.sub_page .contents2
{
	display:block;
	min-height: 400px;
	padding-top:30px;
}
.sub_page .contents2 table {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	border:none;
	font-size: 16px;
	color: #999;
	border-top: 2px solid #4b545e;
	margin:10px 0  30px 0;
	padding:5px;
	background:#fff;
}
.sub_page .contents2  th
{
	font-weight:bold;
	padding:5px;
	border-top: 2px solid #4b545e;
	border-bottom: 1px solid #4b545e;
	height:40px;
	color: #4b545e;
	text-align:left;
}
.sub_page .contents2  th:first-child
{
	text-align:left;
}
.sub_page .contents2  thead th
{
	font-weight:bold;
	padding:5px;
	border-top: 2px solid #4b545e;
	border-bottom: 1px solid #e3e3ed;
	height:30px;
	background:#fff;
}
.sub_page .contents2  td
{
	border-bottom: 1px solid #e3e3ed;
	padding:5px;
	height:40px;
}

.sub_page .contents2  td:first-child
{
	text-align:left;
	color:#000;
	font-weight:700;
}
.sub_page .contents2  td strong 
{
	font-size:16px;
	color:#5e981f;
}
.sub_page .contents2 strong.point 
{ 
	font-size:16px;
	color:#d27c00; 
}
.sub_page .contents2 .link1
{
	background:url("./images/img05.png");
	width:110px;
	height:35px;
}

.sub_page .contents3 table { 
	width:100%; 
	border-collapse:collapse; 
	border-spacing:0;
	border:none;
	border-top: 1px solid #4b545e;  
	margin:10px 0  30px 0; 
	padding:5px;

}
.sub_page .contents3  th
{
	font-weight:bold;
	text-align:left;
	padding:5px;
	border-top: 2px solid #4b545e;
	border-bottom: 2px solid #4b545e;
	height:30px;
}
.sub_page .contents3  td
{
	border-top: 2px solid #4b545e;
	border-bottom: 2px solid #4b545e;
	text-align:left; 
	padding:5px;
	height:30px;
}
.sub_page .contents3  td strong 
{
	font-size:16px;
	color:#5e981f;
}

.sub_page .contents4
{
	display:block;
	padding-top:30px;
	height:390px;
}
.sub_page .contents4 p
{
	display:block;

	font-size:1.2em;
	line-height: 1.7;
	width:600px;
	float:left;
}
.sub_page .contents4 p span
{
	font-weight:bold;
}
.sub_page .contents4 p .title
{
	font-size:1.5em;
	color: black;
	height:38px;
	font-weight: 300;
	display:block;
}
.sub_page .contents4 p .point
{
	font-size:1.5em;
	color:#ff4d6d;
}
.sub_page .contents4 img
{
	display:block;
	width:566px;
	float:right;
}



.point_yellow {color:#d27c00;}
.right {text-align:right;}

.view
{
	display:none;
}

.vline1
{
	width:100%;height:4px;background:#338afe;margin:0;padding:0;
}
.vline2
{
	width:100%;height:1px;background:#d2d2d2;margin:0;padding:0;
}
.customoverlay {position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url(http://i1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('http://i1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}

/* sub */
.fwrap-w {padding:40px 0}
.fwrap-w .Photo {float:left; width:400px; min-height:400px}
.fwrap-w .circle_photo {float:left; width:350px; min-height:250px}
.fwrap-w .contents1 {font-size:16px;color:#666;}
.bluebg {font-weight:200;background:#4b545e; color:#fff;font-size:22px;; line-height:38px}
.yellowbg {font-weight:200;background:#feb400d4; color:#fff;font-size:22px;; line-height:38px;padding:50;}
#sub_page_title {font-weight:bold;font-size:25px;; line-height:38px;padding:50;}

.sign {color:#4b545e; font-size:18px; }
.under01 {font-size:18px; color:#ff4d6d; text-decoration:underline}
.history {display:table; margin-bottom:20px}
.history .year {float:left; height:75px;width:100px;border:1px solid #4b545e; border-radius:100px; color:#4b545e; font-size:30px; text-align:center; padding:25px 0 0 0;margin-right:30px}
.history .list { float:right;}
.history .list li {padding-left:140px;width:800px; height:auto; list-style:none; padding:3px 0; font-size:16px}
.history .list li span {margin-right:20px; color:#999;}
.address {font-size:18px; margin-bottom:20px;}

.img_overlay_container {
  position: relative;
  margin: 0 auto;
  float :left;
  margin-right:10px;
}

.img_overlay_container img {vertical-align: middle;}

.img_overlay_container  .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width:100%;
  
}
.img_overlay_container h1{
	color:white;
	font-size: 24px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.title_box {
    padding: 8px 20px;
    box-shadow: none!important;
    text-align: center;
    background-color: #f2b705	;
    border-radius: 5px;
    padding: 10px 16px;
    margin: 20px 0;
    font-color:white;
}
.title_box h3 {font-weight:bold;font-size:20px;; line-height:38px;padding:50;}


#top-nav-bar {
    width: 100%;
    position: fixed;
    left: 0;
    top:0;
    background-color:#000;
    z-index: 100;
    
}
#main{
	margin-top: 90px
}
.flow_card{
	width:260px;
	position: relative;
	margin: 0 auto;
	float: left;
}

/*2024-09-24 추가*/

    /* 부모 요소가 화면을 넘지 않도록 설정 */
    .image-container {
        width: 100%;            /* 부모 요소의 가로 폭을 100%로 설정 */
        max-width: 100%;        /* 최대 폭을 100%로 제한 */
        padding: 10px;          /* 부모 요소에 여백 추가 */
        box-sizing: border-box;  /* 패딩을 포함한 전체 크기 계산 */
        overflow: hidden;       /* 넘치는 부분은 숨김 처리 */
    }

    /* 이미지가 부모 요소의 가로 폭에 맞춰지도록 설정 */
    .responsive-img {
        width: 100%;            /* 이미지가 부모 요소의 가로 폭에 맞추어 자동 조정 */
        height: auto;           /* 이미지 비율 유지하며 높이 자동 조정 */
        max-width: 100%;        /* 이미지의 최대 폭을 부모 요소의 100%로 제한 */
    }

    /* 작은 화면에서 이미지들이 가로로 배치되지 않고 세로로 쌓이도록 조정 */
    @media screen and (max-width: 768px) {
        #sub_page_contents div {
            float: none; /* 모바일에서는 가로 배치를 세로로 변경 */
            padding-left: 0; /* 좌측 여백 제거 */
            margin-bottom: 10px; /* 이미지 간격 추가 */
        }
    }
    
/* 서브페이지 */
/* 기본 스타일 */
.circle_photo img {
    width: 100%;
    max-width: 150px;
    border-radius: 50%;
}

.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flex-container > div {
    flex: 2 1 100px; /* 기본 크기는 300px */
    text-align: left;
    margin-left: 20px;
}
#contents1 {
    flex: 2 1 300px;
    margin-left: 20px;
    text-align: left;
}
#contents2 {
    flex: 2 1 300px;
    margin-left: 20px;
    text-align: left;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
        align-items: center;
    }
    
    .flex-container > div {
        flex: 1 1 150px; /* 기본 크기를 150px로 줄임 */
        margin-left: 10px; /* 여백도 줄임 */
        text-align: center; /* 모바일에서는 가운데 정렬 */
    }

    .circle_photo {
        margin-bottom: 20px;
        max-width: 150px;
    }

    #contents1 {
        margin-left: 0;
        text-align: center;
    }

    #sub_page_title {
        font-size: 1.2em;
    }

    h4 {
        font-size: 1em;
    }

    #sub_page_contents {
        font-size: 0.9em;
    }
}
h1,h2,h3,h4,p{
	 word-break: keep-all; 
	 white-space: normal;
}