@charset "utf-8";


/*************************************
	민선9기 핵심가치
**************************************/

.value-list {display: block; position: relative; text-align: center; font-family:'Pretendard',"Arial","Helvetica","AppleGothic","Sans-serif";  z-index:1;}
.value-list:before { content: ''; display: block; position: absolute; top: 0; bottom:0; left: -1rem; right:-1rem; border-radius: 10rem 10rem 5rem 5rem; background:url(../img/main/bak_stat.jpg); z-index:0; opacity:0.5}
.value-list .value-top{ font-size:4rem; color: #16243f; padding:6rem 0 0; line-height: 1.5; position:relative; }
.value-list .value-top span {font-size:5.5rem; color: #367FFC; font-weight:800; margin-top:2rem;}
.value-list .value-top .eng {display:block; color:#bcc4d0; font-weight:700; letter-spacing:0.3rem; font-size:1.8rem; margin-bottom:1rem;}
.value-list .value-top p {font-size:1.8rem; color:#515252; margin-top:3rem;}
.value-bottom {display:flex; position:relative; margin:5rem 4rem; padding:0 0 8rem;}
.value-bottom .part {font-size:1.6rem; color:#54657d; background: #fff; border-radius: 20px; box-shadow: 10px 10px 30px rgba(27,86,168,0.12); margin:1em; }
.value-bottom .part {-webkit-transition:background .3s, -webkit-transform .6s; transition:background .3s, transform .6s; -webkit-transform-style:preserve-3d; transform-style:preserve-3d;}
.value-bottom .part:hover,
.value-bottom .part:focus { -webkit-transform:translateY(-1rem); transform:translateY(-1rem);}
.value-bottom .part .cell {padding:4rem 2rem; vertical-align:middle; text-align:center;}
.value-bottom .part .cell,
.value-bottom .part .cell p {line-height:1.2;}
.value-bottom .part .thumb {padding:0; max-width:500px; width:100%; text-align:left; position: relative; }
.value-bottom .part .thumb img {max-width:100%; border-radius: 20px;}
.value-bottom .part .cell .tit {font-size: 3.4rem; font-weight:800; margin-bottom:2rem;}
.value-bottom .part .cell p { font-size:2rem; color: #54657d; line-height:3rem;}

.value-bottom .part .thumb span{position: absolute; left:2rem; top:2rem; font-size:1.3rem; border-radius:1rem 2rem; width:8rem; padding:14px 5px; display: block; text-align: center; }
.value-bottom .part .thumb span em{ font-size:3rem; color:#fff; display: block; font-weight:800;}

.value-bottom .part.p01 .thumb span { background:#367ffc; color: #dcefff; }
.value-bottom .part.p02 .thumb span { background:#1c5aa7; color: #cfe2fb; }
.value-bottom .part.p03 .thumb span { background:#0a2961; color: #d4ddf3; }

.value-bottom .part.p01 .cell .tit { color: #367ffc;}
.value-bottom .part.p02 .cell .tit {color: #1c5aa7;}
.value-bottom .part.p03 .cell .tit { color: #0a2961;}

@media all and (max-width:768px) {
	.value-list:before {border-radius:5rem 5rem 0 0; }
	.value-bottom {display:block; margin:4rem 1rem;}
	.value-bottom .part .thumb {max-width:100%;}
	.value-bottom .part .thumb img {width:100%;}
}

@media all and (max-width:430px) {
	.value-list .value-top {font-size:3rem;}
	.value-list .value-top span {font-size:4.5rem;}
}

/*************************************
	시정비전 및 시정목표
**************************************/

.slider .swiper-slide {width:100%;}
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%;}

.fix-scroll .swiper-container {display:block; position:relative;}
.fix-scroll .swiper-wrapper {display:block !important; transform:none !important; -webkit-transform:none !important; height:100% !important; overflow:auto; white-space:nowrap;}
.fix-scroll .swiper-wrapper li {display:inline-block !important; vertical-align:top; transform:none !important; -webkit-transform:none !important; opacity:1 !important;}
.fix-scroll .swiper-wrapper li a {display:block; position:relative;}
.fix-scroll .swiper-wrapper li a:focus:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid rgba(0,0,0,.5); z-index:2;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

.vision {display:block; position:relative;}
.vision .control {display:flex; position:absolute; left:0; bottom:0em; width:28.888889em; justify-content:start; z-index:1; margin-left:40em;}
.vision .control > button {display:block; position:relative; width:1.777778em; height:1.333334em; overflow:hidden; text-indent:-9999px;}
.vision .control .prev {background:url(../img/sub02/0102_prev.svg) no-repeat center center;}
.vision .control .next {background:url(../img/sub02/0102_next.svg) no-repeat center center;}

.vision .control .pager {display:flex; width:auto; margin:0 1em; align-items:center; overflow:hidden;}
.vision .control .pager .swiper-pagination-current {color:#367FFC; font-weight:700;}
.vision .control .pager .bar {display:block; width:1em; height:1px; background:#ddd; margin:0 .5em;}
/* .vision .control .pager .swiper-pagination-bullet {display:block; width:17.777778em; height:13.333333em; border-radius:0 2.222222em 0 2.222222em; overflow:hidden; opacity:1;}
.vision .control .pager .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:3.5555556em;} */

.mycode .slider {display:block; position:relative; height:100%; overflow:hidden;}
.mycode .slider .swiper-container {}
.mycode .slider .swiper-container,
.mycode .slider .swiper-wrapper,
.mycode .slider .swiper-slide {height:100%;}
.mycode .slider .swiper-slide {}
.mycode .slider .swiper-slide > * {display:block;}

.vision .swiper-slide {position:relative; padding:4.444444em 0 0 35.555556em;}
.vision .swiper-slide:before {content:''; position:absolute; top:0; left:0; width:40em; height:44.444444em; border-radius:0 6.666667em 0 6.666667em; background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0; visibility:hidden;}
.vision .swiper-slide.vis01:before {background-image:url(../img/sub02/0102_img01.png);}
.vision .swiper-slide.vis02:before {background-image:url(../img/sub02/0102_img02.png);}
.vision .swiper-slide.vis03:before {background-image:url(../img/sub02/0102_img03.png);}
.vision .swiper-slide.vis04:before {background-image:url(../img/sub02/0102_img04.png);}
.vision .swiper-slide.vis05:before {background-image:url(../img/sub02/0102_img05.png);}
.vision .swiper-slide.swiper-slide-active:before {opacity:1; visibility:visible;}
.vision .txt {position:relative; height: 40em; background:#fff; border-radius:6.666667em 0 0; padding:4.444444em 4.444444em; box-shadow:-1em -1em 1em rgba(0, 0, 0, .05); z-index:1;}
.vision .txt * {word-break:keep-all;}
.vision .txt p {color:#555}
.vision .txt .title {font-size:2.5em; font-weight:700; color:#333; margin:0 0 .5em;}
.vision .txt .title strong {color:#367FFC; font-weight:800; line-height:1.2;}
.vision .txt .info {color:#666; font-weight:400; margin:.25em 0;}
.vision .txt span {display:block; margin:1.5em 0 1em; padding-top:1.5em; border-top:1px dashed #ddd; color:#bbb; font-size:.888889em; font-weight:700; letter-spacing:1em;}
.vision .txt strong {color:#367FFC; font-weight:800;}
.vision .txt .info strong {color:#666; font-weight:700;}
.vision .txt .s-title {margin:1em 0; font-size:1.333334em; font-weight:700; color:#333;}

@media all and (max-width:1600px) {
	.vision .swiper-slide {padding-left:50%;}
	.vision .swiper-slide:before {width:60%;}
	.vision .control {margin-left:60%;}
}

@media all and (max-width:1024px) {
	.vision .swiper-slide {padding:20.222222em 1.666667em 0;}
	.vision .swiper-slide:before  {width:100%; height:24.444444em;}
	.vision .txt {height:auto;}
	.vision .txt span,
	.vision .txt strong {display:inline-block;}
	.vision .txt .s-title {font-size:1.3333334em;}
	.vision .txt .s-title br {display:none;}
	
	.vision .control {margin-left:0;justify-content: center;width: 100%;position: relative;padding: 1em 0;}
}

@media all and (max-width:768px) {
	.vision .txt {padding:2.7778em;}
	.vision .txt .title {font-size:1.25em;}
}