@charset "utf-8";
/*	
	-----------------------------------------------
	* sub.css
	-----------------------------------------------
*/

.ctn_area h1.depth_tle {margin:15px 0 0;color:#3b3a3a;font-size: 24px;font-weight:800;line-height:1.3;}
.ctn_area h1.depth_tle:before {display:block; margin:0 0 0.4em; width:20px; height:4px; background:#3589d8; content:'';}

.ctn_area .depth_01 {margin:20px 0 0;}
.ctn_area .depth_01 li:before {display:inline-block;margin: 4px 8px 0 0;width:10px;height:10px;background:rgb(79,210,237);background: linear-gradient(135deg, rgba(79,210,237,1) 50%, rgba(57,57,185,1) 50%);vertical-align: top;content:'';}
.ctn_area .depth_01 li {padding:0 0 0 0.8em;margin:0 0 1em;color:#3b3a3a;font-size: 17px;font-weight:700;}
.ctn_area .depth_01 li:after{content:''; display:block; clear:both;}
.ctn_area .depth_01 ol.list_num{margin-top:10px;}
.ctn_area .depth_01 ol.list_num li{font-size:15px; font-weight:400; color:#757575; background:none;}

.ctn_area h2 {padding: 0 0 0 1.5em;margin: 2.3em 0 1em; color:#3b3a3a; font-size:21px; font-weight:700;}
.ctn_area .depth_02 {margin:13px 0 0 15px;}
.ctn_area .depth_02 li:before {display:inline-block; width:3px; height:3px; margin:0 0.3em 0 0; background:rgb(79,210,237); vertical-align:middle; content:'';}
.ctn_area .depth_02 li {padding:0;margin: 0 0 4px;background:none;color:#757575;font-size:14px;font-weight:400;}
.ctn_area .depth_02 li strong {color:#1b6094;}

.ctn_area .depth_03 {margin:10px 0 8px !important;}
.ctn_area .depth_03 li {padding:0; margin:0 0 10px 12px; background:none; color:#a5a5a5; font-size:14px; font-weight:300;}
.ctn_area .depth_03 li:before {display:inline-block; width:4px; height:1px; margin:0 0.3em 0 0; background:#a5a5a5; vertical-align:middle; content:'';}

.ctn_area .depth_none {padding:0; margin:5px 0 0 17px; background:none; color:#757575; font-size:14px; font-weight:400;}

/* 공통 */
body{font-size: 14px;}
.hb1.h3{position: relative; margin: 1.333em 0 0.666em;font-size: 1.3em; padding: 0 0 0 1.3em; color: #154383;}
.hb1.h3:before{content:""; display: block; width: 18px; height: 18px; border: 4px solid #6295e3; border-radius: 50%; position: absolute; top: 5px; left: 0;}
.hb1.h4{font-size:1.3em;padding:0 0 0 1.3em;background:url('../img/sub/h4bg.png') no-repeat 3px 4px;color:#333;}
.hb1.h5{font-size:1.2em;background:url(../img/sub/h5bg.png) no-repeat 0 .291em;color:#089;}
.hb1.h6{font-size:1.1em;background:url(../img/sub/h6bg.png) no-repeat 0 .366em;}
.text-center {text-align: center;}
.bg01{background:#f3f8fd;}
.bg02{background:#f3f8fd; border:1px solid #d2dde8;}
.bg03{background:#f7f7f7; border:1px solid #ddd;}
.bg04{background:#fff8d2;}
.bd01{border:1px solid #d2dde8;}
.pd1em{padding:1em !important; margin:0.666em 0;}
.pd2em{padding:2em !important; margin:0.666em 0;}
.bgNone{background:none;}
.txt_box{width:100%; height:300px; padding:10px; overflow-y:scroll; border:1px solid #a9a9a9; margin-top:1em; background:#fff;}
.w100{width:100%;}
.w80{width:80%;}
.w70{width:70%;}
.w50{width:50%;}
.circle1{display:inline-block; width:21px; height:21px; text-align:center; color:#fff; background:#fc6630; border-radius:25px; margin-right:5px;}


#conts h4:before{display: none;}
#conts h4:not(.blind){margin-top: 0;}

/* 인사말 */
.greetings{margin: 15px 0 0 15px; background-color: #216ed0;}
.greetings_in{padding: 30px 50px 50px 50px; background-image:url(../img/sub/greeting_bg.png); background-repeat: no-repeat;background-position: top -30px right 20px; transform: translate(-15px, -15px);background-color: #f8f8f8;}
.greetings .txt1{position:relative; margin-bottom: 20px; font-size: 25px;font-weight: 600;}
.greetings .txt2{font-size: 17px;}

/* 상징물 */
.symbol {width:100%; margin:0 0 30px 0; padding-bottom:30px; border-bottom:1px dashed #ddd;}
.symbol .img_Symbol {float:left; width:calc(30% - 20px)!important;  margin:0 20px 0 0; padding:0;}
.symbol .img_Symbol img{width:100%;}
.symbol dl.Symbol_Txt {float:right; width:calc(70% - 20px); margin-left:20px;}
.symbol dl.Symbol_Txt dt {font-size:18px; color: #2876ae; height:30px; margin:0 0 10px;  }
.symbol dl.Symbol_Txt dd{font-size: 14px;}
.symbol dl.Symbol_Txt dt span {color:#797979; font-size:15px; margin-left:5px;}
.symbol ul.btn_down { margin:0; padding:0; }
.symbol ul.btn_down li { float:left; margin:0 10px 0 0; padding:0; }
.mascot img{ border: 1px solid #ddd; margin:auto;}

/*해뜨미*/
.mascot-bx{width:100%;margin:0 auto;padding:15px;overflow:hidden;background:#fff;border-radius:20px;}
.mascot-bx ul li:after{content:""; display: block; clear: both;}
.mascot-bx ul li{float:left;display:block;color:#000;margin:5px 0px;font-size: 14px;}
.mascot-bx ul li .tit{width:160px;float:left;padding:5px 0px;text-align:center;border-radius:20px;background:#437fc1;color:#fff;}
.mascot-bx ul li .ph{float:left;width:600px;padding:5px 0px 5px 15px;}

/* 연혁 */
.history_wrap{overflow:hidden; margin:30px 0; font-size:1.1em;}
.history_wrap .history_title{float:left;width:200px; min-height:200px; background:#008341; padding:20px !important; color:#fff; line-height:2.0em;}
.history_wrap .history_title.bgcolor2{background:#007b76}
.history_title p{font-size:25px; font-weight:400; letter-spacing:-2px;word-break: keep-all;}
.history_wrap .history_title span{color:#999; font-size:1.5em; font-weight:400;}
.history_wrap .history_title img{margin-top:30px;} 
.history_wrap .history_con{float:left; margin-left:50px; width:calc(100% - 250px);}
.history_wrap .list_1st{float:left;position:relative; padding-left:14px; /* width:calc(100% - 200px); */width:100%;}
.history_wrap .list_1st:before{content:"";display:block;position:absolute;left:20px;top:30px;;width:1px;height:calc(100% - 100px);background:#ddd;}
.history_wrap .list_1st li{position:relative;padding-top:20px;padding-bottom:15px;background:none;overflow:hidden}
.history_wrap .list_1st li:after{display:block;position:absolute;left:30px;bottom:0; content:"";width:100%;height:1px;border-bottom:1px dashed #ddd}
.history_wrap .list_1st li p{margin:10px 0 10px 30px;}
.history_wrap .list_1st li span{clear:both; display:inline-block; width:100%;}
.history_wrap .list_1st li span.year{padding-left:33px; font-size:20px;color:#006ac3; font-weight:bold}
.history_wrap .list_1st li span.year_st{font-size:20px;color:#006ac3; font-weight:bold}
.history_wrap .list_1st li span.year_st:before{display:inline-block;content:""; width:15px; height:15px; border:4px solid #146ed8; background:#fff; border-radius:50%; vertical-align:middle; margin-right:10px;}
.history_wrap .list_1st li span.con{margin-top:10px;margin-left:10px;padding-left:5%; width:95%;line-height:28px; letter-spacing:-1px;}
.history_wrap .list_1st li span.con em{display:block}
.history_wrap .list_1st li dl{margin:20px 0 20px 20px;}
.history_wrap .list_1st li dl dt{display:block; font-size: 16px; font-weight:bold;background:url('../img/sub/li2bg.png') no-repeat 5px 9px; padding-left:15px; margin:10px 0 5px 0;}
.history_wrap .list_1st li dl dd{display:block; font-size: 14px; padding-left:15px;}

/* Directions */
#map {position: relative;}
#map a {position:absolute; left: -10000000000px; top:0; width: 100%; border:1px solid #fff; color: #fff; font-size:1.2em; text-align: center; background: #146ed8; line-height: 45px; z-index:99999999;}
#map a:active, 
#map a:focus {left: 0;}
.root_daum_roughmap{width: 100% !important; height: 400px;}
.root_daum_roughmap .wrap_map{width: 100% !important; height: 100% !important;}

/* table */
table {width: 100%;border-top:1px solid #5f7082; word-break:break-all; background:#fff;}
table th, table td { border-bottom:1px solid #dadde0; }
table thead th{border-bottom:1px solid #aebfd2; background:#e9f3fd; font-weight:normal; color:#333; text-align:center;}
/* table tbody tr:nth-last-child(1) th, table tbody tr:nth-last-child(1) td {border-bottom:1px solid #dadde0;} */
table tbody th {background:#f8fbfe; font-weight:normal; color:#333; border-bottom:1px solid #c1d0e0; text-align:center}
table tbody tr:last-child th, table tbody tr:last-child td, table tbody th.btLine, table tbody td.btLine {border-bottom:1px solid #5f7082  !important;}
table td {padding-right:1em; padding-left:1em;}
table th.center, table td.center {padding-right:1em; padding-left:1em; text-align:center;}
table.center th, table.center td {padding:0.5em 0.3em; text-align:center;}
table.border th, table.border td {border-right:1px solid #dadde0; border-left:1px solid #dadde0;}
table .btline{border-bottom:1px solid #222;}
table.border2{border:1px solid #dadde0;}
table.border2 th, table.border2 td {border-left:1px solid #dadde0;}
table.border2 th:first-child, table.border2 td:first-child {border-left:0; border-top:0;}
table.border2 tr:last-child td, table.border2 tr:last-child th{border-bottom:0 !important;}
table.border td.vtop {vertical-align:top;}
.bgGreen th, .bgGreen td{background:#edfbf5;}
table.left th{text-align:left !important;}

a.border, button.border{border:1px solid #c4c4c4; color:#000; background-color:#efefef; padding-right:1.2em;}
a.border:hover, button.border:hover, a.border:active, button.border:active{background-color:#2f4b8c; color:#fff;transition: .2s ease-out;}

/* Sister cities */
.relation{overflow:hidden;}
.relation p{width:100%;}
.relation p img{width:250px;}
.relation div{float:left; margin-left:20px;}
.relHistory span.date{font-weight:bold; color:#e65700; font-size:1.1em; margin-right:10px;}
.line{width: 100%; height: 1px; background-color: #bcbcbc; margin: 30px 0;}

/* 탭 */
.tab ul{display:table; width:100%; table-layout:fixed;}
.tab li{display:table-cell; vertical-align:middle; background-color: #ececec;}
.tab li.active{background-color: #2a63ac;}
.tab li.active a{color: #fff;}
.tab li a{display: block; padding: 20px 0; text-align: center; color: #000; font-size: 16px;}
.tabcontent{display: none;}
.tabcontent.active{display: block;}

/* Recyclable Waste */
.waste_wrap {border:1px solid #ccc; border-top:2px solid #000; overflow:hidden;}
.waste_wrap li {padding:20px; text-align:center; color:#fff;}
.waste_wrap .red li {background:#feddc9;}
.waste_wrap .red li:first-child {background:#d12632;}
.waste_wrap .green li {background:#eaf1da;}
.waste_wrap .green li:first-child {background:#008341;}
.waste_wrap .R,.waste_wrap .L{float: left; width: 50%;}

/* 명소 */
.Attractions_img{padding: 15px; border: 1px solid #dfdfdf;}


/*****************************************/
@media screen and (max-width:1199px){
	.waste_wrap li:first-child {height:100px}
	
	
}

/*****************************************/
@media screen and (max-width:768px){
	/* 상징물 */
	.mascot-bx{position:relative;top:0;width:95%;margin:0 auto;padding:10px;overflow:hidden;background:#fff;border-radius:20px;}
	.mascot-bx ul li{width:100%;float:left;display:block;color:#000;margin:15px 0px;}
	.mascot-bx ul li .tit{float:left;padding:5px 0px;text-align:center;border-radius:20px;background:#437fc1;color:#ffff00;}
	.mascot-bx ul li .ph{float:left;width:100%;padding:5px 0px 5px 15px;}
}

/*****************************************/
@media screen and (max-width:640px){
	/* 인사말 */
	.greetings_in{background-position: top -30px right -120px;}
	
	/* 상징물 */
	.symbol .img_Symbol, .symbol dl.Symbol_Txt{width:100% !important; margin-left:0;}
	
	/* 연혁 */
	.history_wrap .history_title{width:100%; padding:40px 0;  background-size:43%; min-height:150px;}
	.history_wrap .history_title img{display:none;}
	.history_wrap .history_con{width:calc(100% - 20px); margin-left:20px;}
	
	/* Sister cities */
	.relation p, .relation div{width:100%; margin-left:0;}
	
	/* Recyclable Waste */
	.waste_wrap .R, .waste_wrap .L{float: none; width:100%}
}

/*****************************************/
@media screen and (max-width:480px){
	.relation p {text-align:center;}
	
}