@charset "utf-8";

/* 공통 */
#cnts_1,
#cnts_2,
#cnts_3,
#cnts_4 { background:#EEF5FB; position:relative; }

#cnts_1 { padding:0 137rem 0 0; }
#cnts_2 { padding:120rem 0; }
#cnts_4 { padding:120rem 0 120rem 137rem ; }
#cnts_5 { background:linear-gradient(0deg,  #fff 0%,#fff 80%,#EEF5FB 100% ); padding:120rem 0 230rem; }

button { overflow: visible; padding: 0; margin: 0; border: 0; cursor: pointer; background: none; font-family: 'Paperozi', sans-serif; }

/* 공통기능 */
.inner { padding:0 137rem; }
section .more { position: relative; text-align:end; font-size:15rem; display:flex; align-items:center; justify-content:end; }
section .more span { position: relative; display: inline-block; width:40rem; height:40rem; background:#000; border-radius:50%; margin-left:10rem; }
section .more span:before {  position:absolute; content:'';  width: 16rem; height: 4rem; background:url(/design/mayor2022/img/main2/schedule_more.png)no-repeat center/contain; top:50%; left:50%; transform:translate(-50%, -50%); }  


@media all and (max-width:1440px) {
	#cnts_1 { padding:0 30rem 0 0; }
	#cnts_2 { padding:80rem 0; }
	#cnts_4 { padding:80rem 30rem 80rem; }
	#cnts_5 { padding:80rem 0 130rem; }


	.inner { padding:0 30rem; }
}
@media all and (max-width:1024px) {
	#cnts_1 { padding:0 0 0 0; }
	#cnts_2 { padding:60rem 0; }
	#cnts_4 { padding:60rem 30rem; }
	#cnts_5 { padding:60rem 0 130rem; }

}
@media all and (max-width:600px) {
	#cnts_5 { padding:60rem 0 60rem; }

}



/* ---------- */
.visual_wrap { position:relative; height:100%; width:100%; display:flex; justify-content: space-between; gap: 80rem; }
.visual_wrap .visual .visual_txt { position:absolute; color:#fff; font-weight:700; font-size:70rem; line-height:1.2; left:90rem; top:52%; transform:translateY(-50%); text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);  }

/* 메인비주얼 */
.visual { position:relative; /* width:calc(100% - 660rem); */ border-radius:0 0 20rem 0; overflow:hidden; z-index: 1; height: 670rem;  }

.visual .visual_slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visual .control2 {position:absolute; left:0; bottom:-1px; width:100%; background:#fff; border-radius:20rem 20rem 0 0; border:1px solid #ddd; }
.visual .control_slide { float:left; width:calc(100% - 50rem); }
.visual .control_slide .slick-slide div a { position:relative; display:block !important; border-right:1px solid #ddd; padding:0 20rem; color:#666; line-height:55rem; height:55rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.visual .control_slide .slick-current div a { font-weight:600; color:#333;}
.visual .control_slide .slick-current div a::before {content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#333; }
.visual .control2 .all_view { position:relative; display:block; float:right; width:50rem; height:50rem; text-indent:-99999rem; border-left:1px solid #ddd; }
.visual .control2 .all_view::before {content:''; position:absolute; left:50%; top:50%; width:40rem; height:40rem; background:url('/design/ko2022/img/main/control.png') no-repeat 75% 100%/500% auto; transform:translate(-50%, -50%); }
.visual .slick-slider.fixed .slick-slide { width:50% !important; }

/* 컨트롤러 */
.visual .control { position:absolute; display: flex; left:100rem; bottom:90rem; z-index:100; }
.visual .control .count {display: block; width: 100%; height: 100%; object-fit: cover;}
.visual .control a { position:relative; display: flex;background-color:rgba(255,255,255,0.5); border-radius:10rem; margin-right:10rem; width:80rem; height:80rem; transform:rotate(45deg); font-size:0px; justify-content: center; align-items: center; z-index: 0; }
.visual .control a:hover { background:rgb(25 89 166 / 100%); z-index: 10; } 
.visual .control a:before { position:absolute; content:''; width:10rem; height:17rem; transform: rotate(-45deg); }
.visual .control a:nth-of-type(1):before { background:url(/design/mayor2022/img/main2/control_prev.png) no-repeat center/contain;  }
.visual .control a:nth-of-type(2):before { background:url(/design/mayor2022/img/main2/control_prev.png) no-repeat center/contain; transform: rotate(-225deg);}
.visual .control a:nth-of-type(1):hover:before { background:url(/design/mayor2022/img/main2/control_next.png) no-repeat center/contain; transform: rotate(-225deg);}
.visual .control a:nth-of-type(2):hover:before { background:url(/design/mayor2022/img/main2/control_next.png) no-repeat center/contain; transform: rotate(-45deg);}

.visual .visual_slide,
.visual .visual_slide .slick-list,
.visual .visual_slide .slick-track,
.visual .visual_slide .slick-slide,
.visual .visual_slide .slick-slide > div,
.visual .visual_slide .slick-slide > div > div,
.visual .visual_slide a { height: 100%;}

.visual .visual_slide .slick-slide > div > div { display: block !important;}


/* 시장실 */
.mayor_wrap { min-width:540px; min-height:630rem; max-width:640px; display: flex; flex-direction: column; justify-content: space-between; gap: 30rem; }

.mayor { position:relative; display:flex; align-items:end; flex-direction: column; }
.mayor .pic { position:absolute; width: 680rem; left: 0; }
.mayor .pic img{ transform: translate(-40px, 0); }

.mayor .txt { padding: 150rem 0 0 0; z-index:1; }
.mayor .txt .tit { display:flex; flex-direction: column; margin: 0 0 40rem 20rem }
.mayor .txt span { color:#1959A6; font-size:20rem; padding-bottom:10rem; font-weight: 500; }
.mayor .txt img { width:130rem; }
.mayor .txt p { font-size:36rem; line-height:1; font-family: 'Aggravo'; font-weight: 500; }

.mayor .txt ul { background:linear-gradient(145deg, #F8CF96 3%, #609EE9 15%, #1959A6 45% ); padding:20rem 30rem; border-radius:30rem; }
.mayor .txt ul li { position:relative; border-bottom:1px solid rgb(255 255 255 / 30%); min-width:170rem; padding:10rem 0; }
.mayor .txt ul li:last-child { border-bottom: none;}
.mayor .txt ul li:before { position:absolute; content:''; width:10rem; height:14rem; right:0; top:50%; transform:translateY(-50%); background:url(/design/mayor2022/img/main2/control_next.png) no-repeat center/contain; }
.mayor .txt ul li a {display: block; width:100%; height:100%; color:#fff; font-weight:600; }



/* 오늘 일정 */
.schedule_area { position: relative; display:flex; justify-content:space-between; width:100%; gap:30rem; margin-top: 40rem; }
.schedule_area .today {display: flex; flex-direction: column; align-items: center;}
.schedule_area .today strong { position: relative; display:flex; width:114px; flex-shrink:0; font-size:20rem; align-items:center;  }
.schedule_area .today strong:before { position:relative; content:''; display:block; width:24rem; height:22rem; background:url(/design/mayor2022/img/main2/schedule_icon.png) no-repeat center/contain; margin-right:10rem; }
.schedule_area .today .day { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top:10rem; padding:10rem; background:#fff; border-radius:10rem; width:60rem;  font-size:20rem; font-weight:700;color:#1A5AA7; }
.schedule_area .today .day span { font-size:14rem; font-weight:400; color:#000; line-height:1.2; }


.schedule_wrap { position: relative; padding-bottom: 30rem; flex:1; min-width:0;  }
.schedule_wrap .control {  position: absolute; display:flex; bottom:0; right:0; background:#000; border-radius:8rem; padding:10rem; }
.schedule_wrap .control a { position: relative;font-size:0; width:30rem; height:20rem; display: flex; align-items: center; justify-content: center; }
.schedule_wrap .control a:before { position:relative; content:''; display:block; width:10rem; height:14rem; background:url(/design/mayor2022/img/main2/control_next.png) no-repeat center/contain; }
.schedule_wrap .control a:nth-of-type(1):before { transform: rotate(-90deg); }
.schedule_wrap .control a:nth-of-type(2):before { transform: rotate(90deg); }
.schedule_wrap .control a:nth-of-type(3):before { width:16rem; height:4rem; background:url(/design/mayor2022/img/main2/schedule_more.png)no-repeat center/contain; }

.schedule_wrap .schedule_item a { display:flex; flex-direction:column; margin-bottom:10rem; min-width:0; }
.schedule_wrap .schedule_item a .title { font-weight:400; display:block;  width:100%;  overflow:hidden;  white-space:nowrap; text-overflow:ellipsis; }
.schedule_wrap .schedule_item a .date { font-size:13rem; color:#B78333; }

@media all and (max-width:1540px){
	.mayor_wrap { min-width: 500px; }
	.visual {  }
}

@media all and (max-width:1440px){
	.visual_wrap { gap:60rem; }
	.visual { width:calc(100% - 520rem); }
	.mayor_wrap { width: 490px; }
}
@media all and (max-width:1333px) {
	.visual_wrap { gap:30rem; }
	.visual { width:calc(100% - 370rem); }
	.mayor_wrap { min-width: 350px; }
	
	.mayor .txt img { width:120rem; }
	
	.mayor .pic img { transform: translate(-120px, 0); }
	.mayor .txt ul li { min-width: 130rem; }
	
	
	.schedule_area { flex-direction: column; gap: 10rem; margin-top:0;}
	.schedule_area .today,
	.schedule_area .today .day { flex-direction:row; margin-top:0; width: auto; gap: 20rem; padding: 6rem 10rem 6rem 0; }
	.schedule_area .today .day span { position: relative; display: flex; }
	.schedule_area .today .day span:before { position:relative; content:''; display:block; width:2px; height:14rem; right:-22rem; top:50%; background:#999;transform:translateY(6%); }
	
	.schedule_wrap .control { top: -78px; bottom:auto; }
}

@media all and (max-width:1024px) {
	.visual_wrap { flex-direction: column; }
	.visual { width:100%; height: auto;  }
	.mayor_wrap { min-width:100%; padding:0 30rem; width: auto; }
	
	.mayor { align-items: center; flex-direction: row; justify-content: center; }
	.mayor .pic { position: relative;  }
	.mayor .pic img { transform: translate(4%, 0); width: 600px; }
	.mayor .txt { position: absolute; left: calc(50% + 50rem); padding: 60rem 0 0 0; }
}

@media (min-width:768px) and (max-width:1024px) {
	.schedule_area { flex-direction: row; }
	.schedule_area .today {display: flex; flex-direction: column; align-items: center;}
	.schedule_area .today .day { display: flex; flex-direction: column;gap: 0; }
	.schedule_area .today .day span:before { display:none; }
	
	.schedule_wrap .control { bottom:0; top:auto;  }

}
@media all and (max-width:768px) {
	.visual_wrap { gap:0rem; }
	.visual_wrap .visual .visual_txt { left: 20rem; font-size: 46rem; }
	.visual .control { left: 20rem; bottom: 30rem; }
	
	.mayor_wrap {padding:0 25rem; width: auto; }
	
	.mayor .pic img { transform: translate(-10%, 0); width: 600px; max-width: 450px; }
	.mayor .txt { left: auto; right:0; }
	
	.visual .control a { width:50rem; height:50rem; }
	.visual_wrap .visual .visual_txt { font-size:30rem; top: 60%; }
	.schedule_area .today strong { font-size:28rem; width: auto; }
	.schedule_wrap .schedule_item a .title { font-size: 20rem; }
	.schedule_wrap .schedule_item a .date { font-size:16rem; }
	
	.schedule_wrap .control { top:-50px ; }
}
@media all and (max-width:425px) {
	.visual { overflow: visible; }
	.visual .control { left: 25rem; bottom: -25rem; }
	.visual .control a { background-color:rgba(255,255,255,1); }
	.visual .control a:hover { background:rgb(25 89 166 / 80%);}
	.visual .control a:nth-of-type(2) { margin-left: -5px;}
	.visual_wrap .visual .visual_txt { top: auto; bottom:30rem; }
	
	
	.mayor_wrap { gap:0; }
	.schedule_wrap .control { position: relative; top:0; margin-bottom:20rem; justify-content: center; padding: 0; overflow: hidden; }
	.schedule_wrap .control a { width: 33.3333%; height: 48rem; }
	.schedule_wrap .control a.prev,
	.schedule_wrap .control a.next { background: #083C7B; }
	.schedule_wrap .control a.prev:hover, .schedule_wrap .control a.prev:focus,
	.schedule_wrap .control a.next:hover, .schedule_wrap .control a.next:focus { background: #1959A6; }
	.schedule_wrap { padding-bottom:0; }
	.schedule_area .today, .schedule_area .today .day { justify-content: space-between; }
	
	.mayor .pic{ position:absolute; left:-36px; right:auto; top:-10px;}
	.mayor .pic img{ display:block; max-width:400px; transform:none;}
	
	.mayor .txt{ position: relative; display: flex; flex-direction: column; align-items: end; gap: 60rem; width: 100%; padding: 0 0 30rem ; }
	.mayor .txt .tit { margin: 90px 26px 20rem; }
	.mayor .txt ul { width: 100%; border-radius: 20rem; }
	.mayor .txt p {  font-size: 40rem;}
}

/* 현장스케치 */
.sketch_wrap .inner { position:relative; height:100%; width:100%; display:flex; justify-content: space-between; gap: 80rem; }

.sketch_wrap .sketch_txt { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-width:220rem; }
.sketch_wrap .sketch_txt:before { position:absolute; content:''; width:70rem; height:70rem; background:url(/design/mayor2022/img/main2/sketch_bg.png)no-repeat center/contain; right:0; }
.sketch_wrap .sketch_txt div { display:flex; flex-direction:column; }
.sketch_wrap .sketch_txt div strong { font-size:50rem; line-height:1.1; }
.sketch_wrap .sketch_txt div span { margin-top:24rem; color:#1959A6;font-size:21rem; line-height: 1.5; }


.sketch_wrap .sketch_list { width: calc(100% - 300rem); min-width:0; }
.sketch_wrap .sketch_list ul{ display:flex; justify-content: space-between; width:100%; gap:20rem; }
.sketch_wrap .sketch_list ul li { width:30%; }
.sketch_wrap .sketch_list ul li a { width:100%; display:flex; flex-direction:column;  } 
.sketch_wrap .sketch_list ul li a .pic { border-radius:20rem; overflow:hidden; max-height: 300rem; }
.sketch_wrap .sketch_list ul li a .pic img { width:100%; height:100%; object-fit:cover; }
.sketch_wrap .sketch_list ul li a .txt { padding-top:40rem; }
.sketch_wrap .sketch_list ul li a .txt p { display:block; width:100%; font-weight:500; font-size:20rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sketch_wrap .sketch_list ul li a .txt span { position: relative; font-size:15rem;display:flex; align-items:center;padding-top:10rem; color:#666; }
@media all and (max-width:768px) {
	.sketch_wrap .sketch_list ul li a .txt span { padding-top:5rem; }
}
.sketch_wrap .sketch_list ul li a .txt span:before { position:relative; content:''; display:block; width:16rem; height:16rem; background:url(/design/mayor2022/img/main2/time_icon.png)no-repeat center/contain; margin-right:10rem; }

.sketch_wrap .sketch_list ul li:nth-child(2) a .pic{ order:2; }
.sketch_wrap .sketch_list ul li:nth-child(2) a .txt{ order:1; padding-top:0;padding-bottom:20rem; }

@media all and (max-width:1440px) {
	
	.sketch_wrap .inner { flex-direction:column; gap: 40rem; }
	
	.sketch_wrap .sketch_txt { flex-direction:row; }
	.sketch_wrap .sketch_txt div { flex-direction:row; align-items: center; z-index: 1; }
	.sketch_wrap .sketch_txt div strong { font-size:40rem; }
	.sketch_wrap .sketch_txt div span { margin-top:0; margin-left:20rem; }
	.sketch_wrap .sketch_txt div br { display:none; }
	.sketch_wrap .sketch_txt:before { right:auto; left: -40px; top: -30rem; z-index:0;  }
	
	.sketch_wrap .sketch_list { width:100%; }
	.sketch_wrap .sketch_list ul li { width:30%; }
}

@media all and (max-width:768px) {
	.sketch_wrap .sketch_list ul { gap:40rem; }
	.sketch_wrap .sketch_txt div,
	.sketch_wrap .sketch_list ul { flex-direction:column; align-items: flex-start; }
	.sketch_wrap .sketch_list ul li { width:100%; }
	.sketch_wrap .sketch_txt:before { right:auto; left: 191rem; top: -44rem; z-index:0;  }
	
	.sketch_wrap .sketch_list ul li a .txt { padding-top:15rem; }
	.sketch_wrap .sketch_list ul li:nth-child(2) a .pic{ order:1; }
	.sketch_wrap .sketch_list ul li:nth-child(2) a .txt{ order:2; padding-top:15rem; padding-bottom:0rem; }
	.sketch_wrap .sketch_list ul li a .txt p { font-size:20rem; }
}
@media all and (max-width:425px) {
	.sketch_wrap .sketch_txt .more { position: absolute; right: 0; }
	.sketch_wrap .sketch_txt div strong { font-size: 32rem; }
	.sketch_wrap .sketch_txt:before { left: 151rem;  }
	.sketch_wrap .sketch_txt div span { margin-left:0rem; }
}



/* 시정활동 */
.tab-panel { display:none;}
.tab-panel.active { display:block;}

.activity_wrap { position:relative; }
/* .activity_wrap .inner > .tit,
.activity_wrap .tab-content .txt_wrap { margin-left:50%; } */

.activity_wrap .inner > .tit { position:absolute; left: 127rem; z-index:2;}
.activity_wrap .tab-menu { display: flex; background:#fff; border-radius:20rem; padding:10rem ; }
.activity_wrap .tab-menu .tab-btn { padding:10rem 20rem; border-radius:10rem; font-size:24rem; font-weight:500; }
.activity_wrap .tab-menu .tab-btn.active { background:#1959A6; color:#fff; font-weight:700; }

.activity_wrap .tit { display:flex; align-items:center; gap:20rem; }


.activity_wrap .tit .font { font-size: 28rem; font-weight:400; display: flex; flex-wrap: wrap;}
.activity_wrap .tit .font span { color:#1959A6; font-weight:700; }


.activity_wrap .tab-content { position:relative; }
.activity_wrap .tab-content .pic { position:absolute; width:calc(50% - 70rem); height:100%; right:0; border-radius:30rem; overflow:hidden;  border: 1px solid #fff; }
.activity_wrap .tab-content .pic a { width:100%; height:100%; display: block;  }
.activity_wrap .tab-content .pic a img { width:100%; height:100%; object-fit:cover; }

.activity_wrap .tab-content .control { position:absolute; bottom: 0; left: 0; display:flex; align-items:center; gap:20rem; }
@media all and (max-width:768px) {
	.activity_wrap .tab-content .control { right: 5rem; left: inherit; }
}
.activity_wrap .tab-content .control .arrow { font-size:0; width:15rem; height:14rem; background:url(/design/mayor2022/img/main2/control_arrow.png)no-repeat center/contain; transform: rotate(0deg); border: 0px; }
.activity_wrap .tab-content .control .arrow.next { transform:rotate(180deg); } 

.control .count{ display:flex; align-items:center; gap:10rem; font-size: 15rem; }
.control .count strong{ font-weight:700;}
.control .count span{ display:flex; align-items:center;}
.control .count span::before { content:"/"; margin-right:8rem; color:#999;}

.activity_wrap .tab-content .txt_wrap { position:relative; display:flex; flex-direction:column;  padding:110rem 0 60rem 30rem; margin-right: 50%;  }

.activity_wrap .tab-content .txt_wrap:before { position:absolute; content:''; width:1px; height:260rem; bottom:60rem; left:0; background:#ddd; }

.activity_wrap .tab-content .txt_wrap strong,
.activity_wrap .tab-content .txt_wrap .txt{ display:-webkit-box; display:box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}

.activity_wrap .tab-content .txt_wrap strong{ -webkit-line-clamp:2; font-size:26rem; font-weight:400; height: 85rem; }
.activity_wrap .tab-content .txt_wrap .txt{ -webkit-line-clamp:3; font-size:18rem; margin:30rem 0; color:#555; font-weight:300; height: 90rem; }
.activity_wrap .tab-content .txt_wrap .sub_txt { position:relative; display:flex; align-items:center; gap:26rem; }
.activity_wrap .tab-content .txt_wrap .sub_txt em { position:relative; display:flex; align-items:center; gap:6rem;color:#666; font-size:16rem; }
.activity_wrap .tab-content .txt_wrap .sub_txt em:before { position:relative; content:''; display:block; width:16rem; height:16rem; background:url(/design/mayor2022/img/main2/time_icon.png)no-repeat center/contain; }
.activity_wrap .tab-content .txt_wrap .sub_txt em:nth-of-type(2):before { background:url(/design/mayor2022/img/main2/view_icon.png)no-repeat center/contain; }

@media all and (max-width:1440px) {
	.activity_wrap .inner > .tit { left: 30px; }
}

@media all and (max-width:1024px) {
	.activity_wrap .inner > .tit { position:relative; margin:0 0 30rem 0; }
	.activity_wrap .tab-content .txt_wrap { padding:0 0 30rem 30rem;  }
}
@media all and (max-width:768px) {
	.activity_wrap .inner > .tit { left: 0px; }
	.activity_wrap .tab-content .pic { position:relative; width:100%;  height: 300rem;  }
	.activity_wrap .tab-content .txt_wrap { margin:27rem 0 0 0 ;  padding:0 0 55rem 0;}
	.activity_wrap .tab-content .txt_wrap:before { display:none; }
	.activity_wrap .tab-content .txt_wrap strong{ -webkit-line-clamp:1; height:33rem; font-size: 22rem; }
	
	.activity_wrap .tab-menu .tab-btn { padding: 10rem 8rem; }
	
	.activity_wrap .tab-content .txt_wrap .txt { height:auto; margin:10rem 0 15rem;}
}
@media all and (max-width:320px) {
	.activity_wrap .tab-menu .tab-btn { padding: 6rem 4rem; }
	.activity_wrap .tit .tab-menu { display: flex; font-size: 24rem; }

	.activity_wrap .tit .font { font-size: 24rem;}
}


/* 민선공약 */
.pledge_wrap { display:flex; justify-content:space-between; gap:110rem;     align-items: flex-end; }

.pledge_lft {position:relative; width:310rem; flex-shrink:0; display: flex; flex-direction: column; justify-content: space-between; gap: 60rem; }
.pledge_lft:before { content:''; position:absolute; bottom:0; right:0; background:radial-gradient( circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 25%,  #f7fafd59 60%, #EEF5FB 100%); width:300rem; height:300rem; }
.pledge_lft .top { position:relative; }
.pledge_lft .top:before { content:''; position:absolute; top:30rem; right:0; width:66%; height:1px; background:linear-gradient(90deg,#BB9F8D, #1959A6); } 
.pledge_lft .top .sub_txt { font-size:22rem; color:#1959A6; line-height:1.2; }
.pledge_lft .top .txt { display:flex; flex-direction:column; font-size:38rem; font-weight:700;}

.pledge_lft .top .txt span:nth-of-type(1) { display: flex;  align-items: center; }
.pledge_lft .top .txt span:nth-of-type(1) em { position:relative; font-size:100rem; margin-left:6rem; line-height: 1; display: inline-block; background: linear-gradient(135deg, #BB9F8D 30%, #1959A6 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; z-index:0; }
.pledge_lft .top .txt span:nth-of-type(1) em:before { content: ''; position: absolute;  left: 0; top: 0;  height: 100%;  width: 35rem; background: linear-gradient(90deg, #f0f5fc 0%, #f0f5fc 30%, transparent 100%);  z-index: 1;}
.pledge_lft .top .txt span:nth-of-type(2) em { background:linear-gradient(90deg,#BB9F8D, #1959A6); padding:6rem 10rem; border-radius:10rem; margin-right:10rem; }

.pledge_lft .pledge_inner { display:flex; flex-direction: column; gap:20rem; z-index: 1; min-width: 40%;  }
.pledge_lft .pledge_inner li { font-size:20rem; font-weight:500; display:flex; justify-content:space-between; align-items: center; }
.pledge_lft .pledge_inner li span { display:flex; justify-content:center; align-items:center; color:#fff; width:60rem; height:60rem; border-radius:50%;background:#E85F25; }
.pledge_lft .pledge_inner li:nth-child(2) span{background:#318AFF; }
.pledge_lft .pledge_inner li:nth-child(3) span{background:#00A651;}
.pledge_lft .pledge_inner li:nth-child(4) span {background:#676767;}
 





	/* 오른쪽 - 슬라이드 디자인 */
.pledge_rgt{ position:relative; flex:1; min-width:0; overflow: hidden; }
.pledge_rgt::before{ content:''; position:absolute; left:0; top:0; width:140rem; height:100%; background: radial-gradient(ellipse 20% 95% at left center, rgb(128 128 128 / 28%) 0%, rgb(162 162 162 / 10%) 45%, rgb(239 248 255 / 19%) 70%, rgba(238, 245, 251, 0) 100%); z-index:20; pointer-events:none;}

.pledge_slide li { background:#fff; border-radius:30rem;/*  width: 350rem !important; */ }
.pledge_slide li a { width:100%; height:100%; }

.pledge_slide .slick-list{ overflow:visible; padding: 30rem 80rem 50rem !important;}
.pledge_slide .slick-track{ display:flex; align-items:center;}
.pledge_slide .slick-slide{ padding:0 15rem; transform:scale(.82); transition:all .35s ease;}
.pledge_slide .slick-slide a{ position: relative; display:flex; flex-direction:column; justify-content:space-between; height:420rem; padding:35rem; border-radius:30rem; background:#fff; transition:.35s; width: 100%; }

	/* 컨트롤 */
.pledge .control { display:flex; align-items:center; gap:20rem; margin-left: 70rem; }
.pledge .control .arrow  { font-size:0; width:15rem; height:14rem; background:url(/design/mayor2022/img/main2/control_arrow.png)no-repeat center/contain; }
.pledge .control .arrow.next { transform:rotate(180deg); } 

.pledge .control .on { position:relative; border-radius:50px; background:#fff; width:30rem; height:30rem; font-size:0; }
.pledge .control .on:before { width:8rem; height:8rem; content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);  background:url(/design/mayor2022/img/main2/stop_icon.png)no-repeat center/contain; }
.pledge .control .on.play:before { background:#fff url(/design/mayor2022/img/main2/play_icon.png)no-repeat center/contain; } 

.pledge .control .count{ display:flex; align-items:center;}
.pledge .control .count .slick-dots{ display:flex; align-items:center; gap:10rem; }
.pledge .control .count .slick-dots li{ display: flex; align-items: center;}
.pledge .control .count .slick-dots li button{ width:10rem; height:10rem; border-radius:50%; background:#fff; border: 2px solid #D8D8D8; font-size:0; cursor:pointer; transition:.3s;}
.pledge .control .count .slick-dots li.slick-active button{ width:34rem; border-radius:999rem; background:#1959A6;  border: 2px solid #1959A6; }


.pledge_slide li a .more:before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:20rem; height:17rem; background:url(/design/mayor2022/img/main2/arrow_white.png)no-repeat center/contain; } 
.pledge_slide li a .more:after { content:''; position:absolute; width:24rem; height:24rem; background:url(/design/mayor2022/img/main2/more_bg.png)no-repeat center/contain;bottom:-24rem; right:0; } 
.pledge_slide li a .more{ position:absolute; right:0; top:-30rem; width:70rem; height:70rem; background:#202122; border-radius:30rem 30rem 0 30rem;opacity:0; visibility:hidden;transform:translateY(10rem); transition: opacity .35s ease, transform .35s ease,  visibility .35s; box-shadow: -10rem 10rem 10rem rgba(0, 0, 0, 0.1);}
.pledge_slide li a:hover .more{ opacity:1; visibility:visible; transform:translateY(0);}

.pledge_slide li .pic { position:relative; left:50%; transform:translateX(-50%); }
.pledge_slide li .pic:before { display:none; content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:url(/design/mayor2022/img/main2/pledge_img1.png)no-repeat center/contain; width:100rem; height:130rem; }

.pledge_slide li.type2 .pic:before { background:url(/design/mayor2022/img/main2/pledge_img2.png)no-repeat center/contain;  }
.pledge_slide li.type3 .pic:before { background:url(/design/mayor2022/img/main2/pledge_img3.png)no-repeat center/contain;  }
.pledge_slide li.type4 .pic:before { background:url(/design/mayor2022/img/main2/pledge_img4.png)no-repeat center/contain;  }
.pledge_slide li.type5 .pic:before { background:url(/design/mayor2022/img/main2/pledge_img5.png)no-repeat center/contain;  }


	/* 슬라이드 텍스트 */
.pledge_slide .txt_top { display:flex; flex-direction:column; font-size:30rem; line-height: 1.2; }
.pledge_slide .txt_top strong { font-size:36rem; }
.pledge_slide .txt_btm { display:flex; flex-direction:column; }


	/* 선택됨 */
.pledge_slide .slick-center{ transform:scale(1); z-index:10;}
.pledge_slide .slick-center a{ background:linear-gradient(140deg,#BAAF9B, #437BC0, #175095); color:#fff; width: 100%; }
.pledge_slide .slick-center *{ color:#fff;}

.pledge_slide .slick-center a .txt_top strong { color:#FFCF83;  }
.pledge_slide .slick-center a .txt_btm { flex-direction:row; gap:6rem; }
.pledge_slide .slick-center a .pic:before { display:block; } 


@media (max-width:1700px){
	.pledge_slide .slick-slide a { padding:24rem; }
	.pledge_slide .txt_top { font-size: 26rem; }
	.pledge_slide .txt_top strong { font-size: 30rem; }
}
@media (max-width:1200px){
	.pledge_wrap { flex-direction: column; align-items: center; gap: 40rem; }
	
	.pledge_lft,
    .pledge_rgt { width: 100%;}
	
	.pledge_lft { flex-direction:row; justify-content: center; }
	.pledge_lft .top { display: flex; flex-direction: column; justify-content: space-between; padding: 20rem 0 30rem; }
	
	.pledge_rgt::after { content:''; position:absolute; right:0; top:0; width:140rem; height:100%; background: radial-gradient(ellipse 20% 95% at right center, rgb(128 128 128 / 28%) 0%, rgb(162 162 162 / 10%) 45%, rgb(239 248 255 / 19%) 70%, rgba(238, 245, 251, 0) 100%); z-index:20; pointer-events:none;}
}
@media (max-width:674px){
	.pledge_lft {  flex-direction: column; gap: 10rem; }
	
	.pledge_slide .slick-list { padding: 30rem 40rem 50rem !important; }
	.pledge_slide .slick-slide { padding:0; }
}



/* 소통24시 */
.talk_wrap { position:relative; } 
.talk_wrap:before,
.talk_wrap:after { position:absolute; content:''; }

.talk_wrap:before { width:840rem; height:840rem; background:url(/design/mayor2022/img/main2/talk_bg3.png)no-repeat center/contain; bottom:50%; right:0; transform:translateY(50%); z-index:0; }
.talk_wrap:after {  width:600rem; height:600rem; background:url(/design/mayor2022/img/main2/talk_bg2.png)no-repeat center/contain; bottom:-110px; right:50%; transform:translateX(50%); z-index:0; }

.talk_wrap .talk_top { position:relative; display:flex; justify-content:space-between; align-items:center; margin-bottom:80rem; z-index:1; }

.talk_wrap .talk_top .lft { position:relative; display:flex; align-items:center; gap:20rem;}
@media (max-width:599px){
	.talk_wrap .talk_top .lft { gap:10rem;}
}
.talk_wrap .talk_top .lft:before { position:absolute; content:''; width:400rem; height:400rem; background:url(/design/mayor2022/img/main2/talk_bg1.png)no-repeat center/contain; top:-120rem; left:0; }
.talk_wrap .talk_top .lft .pic { width:120rem; height:120rem; z-index:1; }
@media (max-width:768px){
	.talk_wrap .talk_top .lft .pic { width:129rem;  background:url(/design/mayor2022/img/main2/talk_img_1_mo.png)no-repeat center/cover;}
}
.talk_wrap .talk_top .lft .pic img { width:100%; height:100%; object-fit:contain; }
@media (max-width:768px){
	.talk_wrap .talk_top .lft .pic img { display: none; }
}

.talk_wrap .talk_top .lft .txt { display:flex; flex-direction:column; width:120rem; padding-bottom:20rem; z-index:1; }
@media (max-width:768px){
	.talk_wrap .talk_top .lft .txt { padding-bottom:0rem; }
}
.talk_wrap .talk_top .lft .txt .txt_1 { display:flex; gap: 20rem; align-items: end; }
.talk_wrap .talk_top .lft .txt .txt_1 a { padding:6rem 10rem; border-radius:10rem; background:#222222; color:#fff; margin:0 0 10rem 10rem ; }

.talk_wrap .talk_top .lft .txt .txt_2 { font-size:24rem; font-weight:700; }
@media (max-width:768px){
	.talk_wrap .talk_top .lft .txt .txt_1 { display:flex; gap: 0rem; align-items: end; color:#fff;}
	.talk_wrap .talk_top .lft .txt .txt_1 a { padding:6rem 10rem; border-radius:10rem; background:#222222; color:#fff; margin:0 0 10rem 10rem ; }
	.talk_wrap .talk_top .lft .txt .txt_2 { color: #fff; margin-top: -3px;}
}

.talk_wrap .talk_top .ctr { text-align:center; font-size:54rem; font-weight:700; z-index: 1;}

.talk_wrap .talk_top .ctr span { position:relative; z-index:1; padding: 0 34rem; color:#FED6AD; }
.talk_wrap .talk_top .ctr span:before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:url(/design/mayor2022/img/main2/talk_tit_bg.png)no-repeat center/contain; width:150rem; height:120rem; z-index:-1;} 


.talk_wrap .talk_cnt { z-index: 1; position: relative; }
.talk_wrap .talk_cnt ul { display:flex; justify-content:space-between; gap:20rem; }
.talk_wrap .talk_cnt ul li { width:18%; display:flex; flex-direction:column; align-items:center; gap:20rem; }
.talk_wrap .talk_cnt ul li:nth-child(odd) { margin-top:30rem; }

.talk_wrap .talk_cnt ul li .txt_area { position:relative; background:#fff; border-radius:36rem; border:2px solid #000; padding:30rem; width: 100%; min-height: 220rem; }
.talk_wrap .talk_cnt ul li .txt_area:before { position:absolute; content:''; width:80rem; height:70rem; background:url(/design/mayor2022/img/main2/talk_balloon.png)no-repeat center/contain; bottom:-20rem; left:6rem; }

.talk_wrap .talk_cnt ul li .txt_area .year { display:flex; font-size:14rem; justify-content:space-between; color:#666666; padding-bottom:20rem; }
.talk_wrap .talk_cnt ul li .txt_area .year .badge { position:relative; display:flex; align-items:center; gap:6rem; }
.talk_wrap .talk_cnt ul li .txt_area .year .badge:before { position:relative; content:''; display:block; width:10rem; height:10rem; background:#F28F48; border-radius:50px; } 

.talk_wrap .talk_cnt ul li .txt_area .txt {display: -webkit-box;-webkit-box-orient: vertical;  -webkit-line-clamp: 3; overflow: hidden; font-weight:600; font-size:22rem; }
.talk_wrap .talk_cnt ul li .pic { display:flex; gap:20rem; align-items:center; }
.talk_wrap .talk_cnt ul li .pic span { font-size:16rem; padding:2rem 4rem; background:#E5E2DE; border-radius:10rem; }



@media (max-width:1280px){
	.talk_wrap .talk_cnt ul li .txt_area { padding: 20rem 20rem 40rem; }
}
@media (max-width:1024px){
	.talk_wrap .talk_cnt ul { flex-wrap:wrap; }
	.talk_wrap .talk_cnt ul li{ width: 48%; }
}
@media (max-width:768px){
	.talk_wrap .talk_top { flex-wrap:wrap; margin-bottom: 30rem; }
	.talk_wrap .talk_top .lft { width:100%; margin-bottom:60rem; background: #00A651; border-radius: 60rem; padding-left: 15rem; overflow: hidden; }
	
	.talk_wrap .talk_top .lft .txt .txt_1 a { position: absolute; right: 30rem; bottom: calc(50% - 30rem); }
}
@media (max-width:674px){
	.talk_wrap .talk_top .ctr {font-size:37rem;}
}
@media (max-width:561px){
	.talk_wrap .talk_cnt ul li{ width: 100%; margin-bottom:40rem; }
	.talk_wrap .talk_cnt ul li:nth-child(odd) { margin-top:0; }
	
	.talk_wrap .talk_top .ctr span:before { width: 120rem; }
	.talk_wrap .talk_top .ctr span { padding: 0 20rem; }
}
@media (max-width:425px){
	.talk_wrap .talk_top .ctr span:before { width: 110rem; }
}

