@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {font-family: 'Nanum Gothic', sans-serif;}

@media all and (min-width: 1065px) {

	#container {
		min-height: 657px;
	}
/*sub1*/
	.sub1_ul {
		display: inline-block;
		margin-bottom:50px;
	}
	.sub1_ul li {
		float: left;
		width: 384px;
		height: 230px;
		margin-right:24px;
		margin-bottom:45px;
	}
	.sub1_ul li img {
		width: 100%;
		height: 100%;
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
	}
  .sub1_ul li a {
    text-decoration: none;
  }
	.sub1_ul li:nth-child(3n) {
		margin-right:0;
	}
	.sub1_ul li img:hover {
    filter: none;
   -webkit-filter: grayscale(0);
	}
  .sub1_tit {
    color: #111;
    font-size: 12px;
    text-align: right;
    padding:3px 0 15px;
  }
  .sub1_tit p {
    font-size: 14px;
    color: #888;
    float: left;
  }

/*sub1_d*/
	.sub_h1 {
		font-size: 18px;
		font-weight: bold;
		padding-bottom:50px;
	}
	.slick_div {
		width: 1000px;
		margin:0 auto 100px;
	}
	.prev_view {
    z-index: 99;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    top: 55px;
    left: 0;
    position: absolute;
    bottom: 75px;
    display: block;
    width: 25px;
    height: 25px;
		border-radius: 30px;
    padding: 5px;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    cursor: pointer;
    color: #54a6ca;
		border:1px solid #54a6ca;
	}
	.next_view {
    z-index: 99;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    top: 55px;
    right: 0;
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
		border-radius: 30px;
    padding: 5px;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    cursor: pointer;
    color: #54a6ca;
		border:1px solid #54a6ca;
	}
	.slide1 {
		width:550px;
		height: 400px;
		float: left;
  	overflow: hidden;
	}
	.slide1 img {
  	max-height: 100%;
  	max-width: 550px !important;
	  display: block;
		outline: none;
	}
	.slide1_nav {
		width: 1000px;
		margin:0 auto;
		overflow: hidden;
		padding:20px 50px;
	}
	.slide1_nav img {
		width: 130px !important;
    height: 85px;
		max-height: 100%;
    margin: 10px;
	}
	.slick_ctt {
		width:400px;
		float: right;
		padding-top:15px;
	}
	.slick_ctt h1 {
		font-size: 14px;
		font-weight: 600;
		padding-bottom:17px;
	}
	.slick_ctt p {
		width:100%;
		border-bottom:1px solid #ccc;
		padding-bottom:5px;
		margin-bottom:20px;
		font-size: 12px;
		color: #555;
		font-weight: lighter;
	}

/*sub2*/
	section {
		padding-bottom:50px;
		overflow: hidden;
	}
	.s2_ctt {
		width:520px;
		float: left;
	}
	.s2_ctt p {
		padding-top:300px;
		float: right;
	}
	.s2_img {
		width: 600px;
		float: right;
	}
	.s2_history li {
		padding:15px 0;
		margin:0;
	}
	.s2_history li h1 {
		border-right:1px solid #ccc;
		width:110px;
		margin-right:40px;
		float: left;
		padding-bottom:30px;
	}

/*sub3*/
	.loc_ctt {
		overflow: hidden;
	}
	.loc_ctt h1 {
		font-size: 18px;
		font-weight: 600;
		padding-bottom:20px;
		width:100px;
		float: left;
	}
	.loc_ctt p {
		width:680px;
		float: left;
		overflow: hidden;
		border-bottom:1px solid #ccc;
		padding-bottom:8px;
		margin-bottom:20px;
		font-size: 14px;
		color: #555;
		font-weight: lighter;
	}
	.sub3_btn {
		width: 330px;
		height: 50px;
		line-height: 50px;
		border:1px solid #333;
		background: #fff;
		text-align: center;
		float: right;
		font-size: 18px;
		margin:30px 0;
	}
	.sub3_btn:hover {
		background: #333;
		color: #fff;
		transition-duration: .3s;
	}
/*sub3-2*/
	.sub3_tb {
		border-top:1px solid #111;
		width: 100%;
		text-align: center;
		margin-bottom:15px;
	}
	.sub3_tb tr td {
		border-bottom:1px solid #ccc;
		padding:20px 0;
	}
	.sub3_tb tr td:first-child {
		padding-left:20px;
		text-align: left;
		font-size:16px;
		font-weight: normal;
		width: 65%;
	}
	.write_btn {
		width: 110px;
		height: 40px;
		line-height: 38px;
		border:1px solid #555;
		background: #555;
		text-align: center;
		float: right;
		font-size: 14px;
		margin-bottom:40px;
		color: #fff;
	}
	.write_btn:hover {
		background: #fff;
		color: #333;
		border:1px solid #333;
		transition-duration: .3s;
	}
	.number {
		width: 100%;
		text-align: center;
		margin:30px 0 100px 75px;
	}
	.number li {
		display: inline-block;
		width: 30px;
		height: 30px;
		line-height: 29px;
		font-size: 12px;
		color: #777;
		border:1px solid #ccc;
		margin:1px;
	}
	.number li.on {
		background: #555;
		color: #fff;
		font-weight: bold;
	}
	.number li a{
		color: #777;
		text-decoration: none;
	}
	.number li.on a{
		color:#fff;
		text-decoration: none;
	}
	.txt_ctt {
		border:none;
		width: 99%;
		outline: none;
	}
	.loc_ctt2 {
		overflow: hidden;
	}
	.loc_ctt2 h1 {
		font-size: 18px;
		font-weight: 600;
		padding-bottom:20px;
		width:100px;
		float: left;
	}
	.loc_ctt2 p {
		width:1098px;
		float: left;
		overflow: hidden;
		padding-bottom:8px;
		margin-bottom:20px;
		font-size: 14px;
		color: #555;
		font-weight: lighter;
	}
	.txt_area {
		border:1px solid #ccc;
		width: 98%;
		outline: none;
		resize: none;
		height: 300px;
		padding:10px;
	}
	.ok_btn {
		width: 110px;
		height: 40px;
		line-height: 40px;
		border:1px solid #57b7df;
		background: #57b7df;
		text-align: center;
		float: right;
		font-size: 14px;
		margin-bottom:30px;
		color: #fff;
	}
	.ok_btn:hover {
		background: #fff;
		color: #57b7df;
		border:1px solid #57b7df;
		transition-duration: .3s;
	}

/*sub4*/
	.media {
		padding-bottom:30px;
		display: inline-block;
	}
	.media p {
		width: 390px;
		height: 240px;
		overflow: hidden;
		margin-right:20px;
		float: left;
	}
	.media p img {
		max-width: 100%;
		height: auto;
	}
	.media_h1 {
		font-size: 14px;
		padding:10px 0 30px;
		font-weight: 400;
	}
	.media_h5 {
		font-size: 12px;
		color: #666;
		line-height: 24px;
		font-weight: lighter;
	}
	.media_h1:hover, .media_h5:hover {
		text-decoration: underline;
	}
	.media_d {
		font-size: 14px;
		color: #666;
		line-height: 24px;
		font-weight: lighter;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
		padding:20px 0 30px;
		margin-bottom:20px;
	}
	.media_d img {
		max-width: 100%;
	}

}

@media all and (min-width: 768px) and (max-width: 1064px) {

		#container {
			min-height: 850px;
		}
	/*sub1*/
		.sub1_ul {
			display: inline-block;
			margin-bottom:50px;
		}
		.sub1_ul li {
			float: left;
			width: 30%;
			height: 230px;
			margin:0 1.5%;
			margin-bottom:45px;
		}
		.sub1_ul li img {
			width: 100%;
			height: 100%;
	    filter: gray; /* IE6-9 */
	    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
	    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
		}
	  .sub1_ul li a {
	    text-decoration: none;
	  }
		.sub1_ul li:nth-child(3n) {
			margin-right:0;
		}
		.sub1_ul li img:hover {
	    filter: none;
	   -webkit-filter: grayscale(0);
		}
	  .sub1_tit {
	    color: #111;
	    font-size: 14px;
	    text-align: right;
	    padding:5px 0 15px;
	  }
	  .sub1_tit p {
	    font-size: 12px;
	    color: #888;
	    float: left;
	  }

	/*sub1_d*/
		.sub_h1 {
			font-size: 20px;
			font-weight: bold;
			padding-bottom:40px;
		}
		.slick_div {
			width: 90%;
			margin:0 auto 100px;
		}
		.prev_view {
	    z-index: 99;
	    font-size: 18px;
	    line-height: 25px;
	    text-align: center;
	    top: 55px;
	    left: 0;
	    position: absolute;
	    bottom: 75px;
	    display: block;
	    width: 25px;
	    height: 25px;
			border-radius: 30px;
	    padding: 5px;
	    -webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	    transform: translate(0, 0);
	    cursor: pointer;
	    color: #54a6ca;
			border:1px solid #54a6ca;
		}
		.next_view {
	    z-index: 99;
	    font-size: 18px;
	    line-height: 25px;
	    text-align: center;
	    top: 55px;
	    right: 0;
	    position: absolute;
	    display: block;
	    width: 25px;
	    height: 25px;
			border-radius: 30px;
	    padding: 5px;
	    -webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	    transform: translate(0, 0);
	    cursor: pointer;
	    color: #54a6ca;
			border:1px solid #54a6ca;
		}
		.slide1 {
			width:46%;
			height: 400px;
			float: left;
	  	overflow: hidden;
		}
		.slide1 img {
	  	max-height: 100%;
	  	max-width: 100% !important;
		  display: block;
			outline: none;
		}
		.slick_ctt {
			width:50%;
			float: right;
			padding-top:15px;
		}
		.slick_ctt h1 {
			font-size: 18px;
			font-weight: 600;
			padding-bottom:10px;
		}
		.slick_ctt p {
			width:100%;
			border-bottom:1px solid #ccc;
			padding-bottom:5px;
			margin-bottom:10px;
			font-size: 14px;
			color: #555;
			font-weight: lighter;
		}
		.slide1_nav {
			width: 100%;
			margin:0 auto;
			overflow: hidden;
			padding:20px 50px;
		}
		.slide1_nav img {
	    height: 75px;
			max-height: 100%;
	    margin: 10px;
		}

	/*sub2*/
		section {
			padding-bottom:50px;
			overflow: hidden;
		}
		.s2_ctt {
			width:45%;
			float: left;
		}
		.s2_ctt p {
			padding-top:100px;
			float: right;
		}
		.s2_img {
			width: 50%;
			float: right;
		}
		.s2_img img {
			width: 100%;
		}
		.s2_history li {
			padding:15px 0;
			margin:0;
		}
		.s2_history li h1 {
			border-right:1px solid #ccc;
			width:110px;
			margin-right:40px;
			float: left;
			padding-bottom:30px;
		}

	/*sub3*/
		.root_daum_roughmap {
			width: 100% !important;
		}
		.loc_ctt {
			overflow: hidden;
		}
		.loc_ctt h1 {
			font-size: 18px;
			font-weight: 600;
			padding-bottom:20px;
			width:100px;
			float: left;
		}
		.loc_ctt p {
			width:680px;
			float: left;
			overflow: hidden;
			border-bottom:1px solid #ccc;
			padding-bottom:8px;
			margin-bottom:20px;
			font-size: 14px;
			color: #555;
			font-weight: lighter;
		}
		.sub3_btn {
			width: 330px;
			height: 50px;
			line-height: 50px;
			border:1px solid #333;
			background: #fff;
			text-align: center;
			float: right;
			font-size: 18px;
			margin:30px 0;
		}
		.sub3_btn:hover {
			background: #333;
			color: #fff;
			transition-duration: .3s;
		}
	/*sub3-2*/
		.sub3_tb {
			border-top:1px solid #111;
			width: 100%;
			text-align: center;
			margin-bottom:15px;
		}
		.sub3_tb tr td {
			border-bottom:1px solid #ccc;
			padding:20px 0;
		}
		.sub3_tb tr td:first-child {
			padding-left:20px;
			text-align: left;
			font-size:18px;
			font-weight: normal;
		}
		.write_btn {
			width: 110px;
			height: 40px;
			line-height: 40px;
			border:1px solid #555;
			background: #555;
			text-align: center;
			float: right;
			font-size: 14px;
			margin-bottom:40px;
			color: #fff;
		}
		.write_btn:hover {
			background: #fff;
			color: #333;
			border:1px solid #333;
			transition-duration: .3s;
		}
		.number {
			width: 100%;
			text-align: center;
			margin:30px 0 100px 75px;
		}
		.number li {
			display: inline-block;
			width: 30px;
			height: 30px;
			line-height: 29px;
			font-size: 12px;
			color: #777;
			border:1px solid #ccc;
			margin:1px;
		}
		.number li.on {
			background: #555;
			color: #fff;
			font-weight: bold;
		}
		.txt_ctt {
			border:none;
			width: 99%;
			outline: none;
		}
		.loc_ctt2 {
			overflow: hidden;
		}
		.loc_ctt2 h1 {
			font-size: 18px;
			font-weight: 600;
			padding-bottom:20px;
			width:100px;
			float: left;
		}
		.loc_ctt2 p {
			width:100%;
			float: left;
			overflow: hidden;
			padding-bottom:8px;
			margin-bottom:20px;
			font-size: 14px;
			color: #555;
			font-weight: lighter;
		}
		.txt_area {
			border:1px solid #ccc;
			width: 97%;
			outline: none;
			resize: none;
			height: 300px;
			padding:10px;
		}
		.ok_btn {
			width: 110px;
			height: 40px;
			line-height: 40px;
			border:1px solid #57b7df;
			background: #57b7df;
			text-align: center;
			float: right;
			font-size: 14px;
			margin-bottom:30px;
			color: #fff;
		}
		.ok_btn:hover {
			background: #fff;
			color: #57b7df;
			border:1px solid #57b7df;
			transition-duration: .3s;
		}

	/*sub4*/
		.media {
			padding-bottom:30px;
			display: inline-block;
		}
		.media p {
			width: 390px;
			height: 240px;
			overflow: hidden;
			margin-right:20px;
			float: left;
		}
		.media p img {
			max-width: 100%;
			height: auto;
		}
		.media_h1 {
			font-size: 20px;
			padding:10px 0 30px;
			font-weight: 400;
		}
		.media_h5 {
			font-size: 14px;
			color: #666;
			line-height: 24px;
			font-weight: lighter;
		}
		.media_h1:hover, .media_h5:hover {
			text-decoration: underline;
		}
		.media_d {
			font-size: 14px;
			color: #666;
			line-height: 24px;
			font-weight: lighter;
			border-top:1px solid #ccc;
			border-bottom:1px solid #ccc;
			padding:20px 0 30px;
			margin-bottom:20px;
		}
		.media_d img {
			max-width: 100%;
		}
}

@media (max-width: 767px) {

		#container {
			min-height: 750px;
		}
	/*sub1*/
		.sub1_ul {
			display: inline-block;
			margin-bottom:50px;
		}
		.sub1_ul li {
			float: left;
			width: 47%;
			height: 180px;
			margin:0 1.5%;
			margin-bottom:50px;
		}
		.sub1_ul li img {
			width: 100%;
			height: 100%;
	    filter: gray; /* IE6-9 */
	    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
	    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
		}
	  .sub1_ul li a {
	    text-decoration: none;
	  }
		.sub1_ul li img:hover {
	    filter: none;
	   -webkit-filter: grayscale(0);
		}
	  .sub1_tit {
	    color: #111;
	    font-size: 14px;
	    text-align: right;
	    padding:5px 0 15px;
	  }
	  .sub1_tit p {
	    font-size: 12px;
	    color: #888;
	    float: left;
	  }

	/*sub1_d*/
		.sub_h1 {
			font-size: 20px;
			font-weight: bold;
			padding-bottom:30px;
		}
		.slick_div {
			width: 90%;
			margin:0 auto 100px;
		}
		.prev_view {
	    z-index: 99;
	    font-size: 18px;
	    line-height: 20px;
	    text-align: center;
	    top: 35px;
	    left: 0;
	    position: absolute;
	    bottom: 75px;
	    display: block;
	    width: 20px;
	    height: 20px;
			border-radius: 30px;
	    padding: 5px;
	    -webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	    transform: translate(0, 0);
	    cursor: pointer;
	    color: #54a6ca;
			border:1px solid #54a6ca;
		}
		.next_view {
	    z-index: 99;
	    font-size: 18px;
	    line-height: 20px;
	    text-align: center;
	    top: 35px;
	    right: 0;
	    position: absolute;
	    display: block;
	    width: 20px;
	    height: 20px;
			border-radius: 30px;
	    padding: 5px;
	    -webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	    transform: translate(0, 0);
	    cursor: pointer;
	    color: #54a6ca;
			border:1px solid #54a6ca;
		}
		.slide1 {
			width:100%;
			height: 250px;
			float: left;
	  	overflow: hidden;
		}
		.slide1 img {
	  	max-height: 100%;
	  	max-width: 100% !important;
		  display: block;
			outline: none;
		}
		.slick_ctt {
			width:100%;
			padding-top:15px;
		}
		.slick_ctt h1 {
			font-size: 18px;
			font-weight: 600;
			padding-bottom:10px;
		}
		.slick_ctt p {
			width:100%;
			border-bottom:1px solid #ccc;
			padding-bottom:5px;
			margin-bottom:10px;
			font-size: 14px;
			color: #555;
			font-weight: lighter;
		}
		.slide1_nav {
			width: 100%;
			margin:0 auto;
			overflow: hidden;
			padding:20px 50px;
		}
		.slide1_nav img {
	    height: 50px;
			max-height: 100%;
	    margin: 5px;
		}


	/*sub2*/
		section {
			padding-bottom:50px;
			overflow: hidden;
		}
		.s2_ctt {
			width:100%;
		}
		.s2_ctt p {
			padding-top:20px;
			float: right;
		}
		.s2_img {
			width: 100%;
			float: right;
			padding-top:10px;
		}
		.s2_img img {
			max-width: 100%;
		}
		.s2_history li {
			padding:15px 0;
			margin:0;
		}
		.s2_history li h1 {
			border-right:1px solid #ccc;
			width:90px;
			margin-right:20px;
			float: left;
			padding-bottom:30px;
		}

	/*sub3*/
		.root_daum_roughmap {
			width: 100% !important;
		}
		.root_daum_roughmap .wrap_map {
			height: 300px !important;
		}
		.loc_ctt {
			overflow: hidden;
		}
		.loc_ctt h1 {
			font-size: 18px;
			font-weight: 600;
			padding-bottom:10px;
			width:100px;
			float: left;
		}
		.loc_ctt p {
			width:100%;
			float: left;
			overflow: hidden;
			border-bottom:1px solid #ccc;
			padding-bottom:5px;
			margin-bottom:10px;
			font-size: 14px;
			color: #555;
			font-weight: lighter;
		}
		.sub3_btn {
			width: 40%;
			height: 40px;
			line-height: 40px;
			border:1px solid #333;
			background: #fff;
			text-align: center;
			float: right;
			font-size: 14px;
			margin:30px 0;
		}
		.sub3_btn:hover {
			background: #333;
			color: #fff;
			transition-duration: .3s;
		}
	/*sub3-2*/
		.sub3_tb {
			border-top:1px solid #111;
			width: 100%;
			text-align: center;
			margin-bottom:15px;
		}
		.sub3_tb tr td {
			border-bottom:1px solid #ccc;
			padding:20px 0;
			font-size:12px;
		}
		.sub3_tb tr td:first-child {
			padding-left:10px;
			text-align: left;
			font-weight: normal;
			font-size:14px;
		}
		.write_btn {
			width: 110px;
			height: 40px;
			line-height: 40px;
			border:1px solid #555;
			background: #555;
			text-align: center;
			float: right;
			font-size: 14px;
			margin-bottom:40px;
			color: #fff;
		}
		.write_btn:hover {
			background: #fff;
			color: #333;
			border:1px solid #333;
			transition-duration: .3s;
		}
		.number {
			width: 100%;
			text-align: center;
			margin:30px 0 100px 75px;
		}
		.number li {
			display: inline-block;
			width: 30px;
			height: 30px;
			line-height: 29px;
			font-size: 12px;
			color: #777;
			border:1px solid #ccc;
			margin:1px;
		}
		.number li.on {
			background: #555;
			color: #fff;
			font-weight: bold;
		}
		.txt_ctt {
			border:none;
			width: 99%;
			outline: none;
		}
		.loc_ctt2 {
			overflow: hidden;
		}
		.loc_ctt2 h1 {
			font-size: 18px;
			font-weight: 600;
			padding-bottom:20px;
			width:100px;
			float: left;
		}
		.loc_ctt2 p {
			width:100%;
			float: left;
			overflow: hidden;
			padding-bottom:8px;
			margin-bottom:20px;
			font-size: 14px;
			color: #555;
			font-weight: lighter;
		}
		.txt_area {
			border:1px solid #ccc;
			width: 94%;
			outline: none;
			resize: none;
			height: 300px;
			padding:10px;
		}
		.ok_btn {
			width: 110px;
			height: 40px;
			line-height: 40px;
			border:1px solid #57b7df;
			background: #57b7df;
			text-align: center;
			float: right;
			font-size: 14px;
			margin-bottom:30px;
			color: #fff;
			}
		.ok_btn:hover {
			background: #fff;
			color: #57b7df;
			border:1px solid #57b7df;
			transition-duration: .3s;
			}

	/*sub4*/
		.media {
			padding-bottom:30px;
			display: inline-block;
		}
		.media p {
			width: 90%;
			height: 240px;
			overflow: hidden;
			margin-right:20px;
			padding-bottom:10px;
		}
		.media p img {
			max-width: 100%;
			height: auto;
		}
		.media_h1 {
			font-size: 20px;
			padding:10px 0 15px;
			font-weight: 400;
		}
		.media_h5 {
			font-size: 12px;
			color: #666;
			line-height: 20px;
			font-weight: lighter;
		}
		.media_h1:hover, .media_h5:hover {
			text-decoration: underline;
		}
		.media_d {
		font-size: 14px;
		color: #666;
		line-height: 24px;
		font-weight: lighter;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
		padding:20px 0 30px;
		margin-bottom:20px;
		}
		.media_d img {
			max-width: 100%;
		}
	}