@charset "utf-8";


/********************
	인사말
********************/
.greeting {position:relative;background: #f9f9f9 url(/gjmayor/img/sub/img_greeting_Bg.png) no-repeat; background-position: top right;padding: 2em 4em;}
.greeting::after{content:''; position:absolute; border:3px solid #fff; top:20px; left:20px; right:20px; bottom:20px; z-index:1;}

.greeting-top {position:relative;padding: 15% 10% 12.5% 10%; background:url(/gjmayor/img/sub/sub0101_img01.png) no-repeat center; background-size:contain;}
.greeting-top img {box-sizing:border-box;}

.greeting .greeting-bottom {position:relative; overflow:hidden; z-index:2;}
.greeting .greeting-bottom p {margin-top:20px;}
.greeting .greeting-bottom p.title {font-size:1.5rem; font-weight:bold; color:#0f2e67;}
.greeting .greeting-bottom p.title span {font-weight: 600;color:#e21e3a;}
.greeting .greeting-bottom .mayor-name {font-weight:bold; float:right; margin-top:50px;}
.greeting .greeting-bottom .mayor-name .signature {display: inline-block;width: 100px;text-indent:-9999px;box-sizing: border-box;background: url(/gjmayor/img/sub/sub0101_img03.png) no-repeat center;padding: 20px 0 10px;margin-left: 15px;}

@media all and (max-width:768px){
	.greeting-top {padding: 13% 5%;}
}

@media all and (max-width:640px){
	.greeting-top img {width:200px;}
	.greeting .greeting-bottom p br {display:none;}
	.greeting{padding: 1em 2em;}
	.greeting::after{top:5px; left:5px; right:5px; bottom:5px; }
}

@media all and (max-width:460px){
	.greeting-top {height: 220px; background-size:cover; background-position:right top;}
	.greeting-top img {width:170px;}
	.greeting .greeting-bottom p br {display:none;}
}


/********************
	프로필
********************/
.profile {position:relative; width:100%; box-sizing:border-box;background: url(/gjmayor/img/sub/sub0102_img02.png) no-repeat right bottom;padding: 50px; overflow:hidden;}
.profile:before {content:''; position:absolute; width:100%;height: 100%; background:#f5f5f5; top:0; left:0;z-index: -1;border-radius: 0 500px 0 0;}
.profile .profile-img {position:absolute;top: 0;right:0;}
.profile .profile-list {position:relative; box-sizing: border-box; padding-top:50px;}
.profile .profile-list:before {content:''; position:absolute; width:2px; height:95%; background:#e21a3a; top:80px; left:15px;}
.profile .profile-list:last-of-type:before {height:100%;}
.profile .profile-list .tit {position:relative; font-size:2rem; font-weight:bold; box-sizing:border-box; margin-bottom:30px; padding-left:40px;}
.profile .profile-list .tit:before {content:''; position:absolute; width:20px; height:20px; background:#fff; border:5px solid #e21e3a; border-radius:50px; top:3px; left:0;}
.profile .profile-list ul {box-sizing:border-box; padding-left:40px; }
.profile .profile-list ul li {margin-bottom:20px;}
.profile .profile-list ul li:last-child {margin-bottom:0;}
.profile .profile-top {box-sizing:border-box;border-bottom: 1px dashed #cdc8c8; padding-bottom:30px;}
.profile .profile-top > p {font-size:1.1rem;margin-bottom: 10px;}
.profile .profile-top > p:last-child {margin-bottom:0;}
.profile .profile-top span {display:inline-block; width:100px; font-weight:bold;text-align: center;color: #fff;box-sizing:border-box;border-radius: 10px;background: #0e2a68;margin-right:20px;padding: 13px 0;}

@media all and (max-width:960px){
	.profile:before {border-radius:0 300px 0 0;}
	.profile .profile-img {width:400px;}
}

@media all and (max-width:840px){
	.profile .profile-img {width:300px;}
}

@media all and (max-width:768px){
	.profile {background-size:80px;; padding-top:0;}
	.profile:before {top:200px;}
	.profile .profile-img {position:relative; width:400px; margin:0 auto; margin-bottom:50px;}
}

@media all and (max-width:640px){
	.profile {padding: 0 30px 50px}
	.profile:before {border-radius:0 200px 0 0;}
}

@media all and (max-width:460px){
	.profile:before {top:120px;}
	.profile .profile-img {width:100%;margin-bottom: 30px;}
	.profile .profile-top p {font-size: 1rem;text-align:center;margin-bottom: 15px;}
	.profile .profile-top p span {width:100%; margin-bottom:10px;}
	.profile .profile-list {padding-top:30px;}
	.profile .profile-list:before {top:60px;}
	.profile .profile-list .tit {font-size:1.7rem;}
	.profile .profile-list .tit:before {top:0;}
}

@media all and (max-width:380px){
	.profile {padding:0 10px 50px}
	.profile .profile-list ul li {font-size:0.9rem;}
}

/********************
	민선 시장
********************/
.mayor-tob-box {position: relative; min-height:240px; box-sizing:border-box; border:1px solid #7485b6;padding: 0 50px 40px;margin-top: 70px;margin-bottom: 80px;}
.mayor-tob-box:before {content:''; position:absolute; width:100%; height:1px; border-bottom:1px dashed #d5e0ff; bottom:-40px; left:0;}
.mayor-tob-box:after {content:''; display:block; clear:both;}
.mayor-tob-box .mayor-number {position: relative; width:90px; height:90px; text-indent:-9999px;  background:#0a287f;top: -45px;}
.mayor-tob-box .mayor-number:after {content:''; position:absolute; width:100%; height:100%; background:url(/gjmayor/img/sub/sub0401_img06.png) no-repeat center;top:0; left:0;}
.mayor-tob-box .mayor-detail {width:55%; float:left;}
.mayor-tob-box .mayor-detail div {box-sizing:border-box; background:#e9edf6;padding: 30px 20px;}
.mayor-tob-box .mayor-detail div ul {position:relative; overflow:hidden;}
.mayor-tob-box .mayor-detail div ul li {position:relative; width: 50%; font-size:1rem; box-sizing:border-box; padding-left:15px; float: left;}
.mayor-tob-box .mayor-detail div ul li:after {content:''; position:absolute; width:5px; height:5px; background:#7485b6; border-radius:10px;top: 11px; left:0;}
.mayor-tob-box .mayor-detail div ul li span {display:inline-block;width: 70px;color: #182747;font-weight:bold;}
.mayor-tob-box .mayor-img {position: absolute;width: 450px;height: 350px;top: -70px;right:0;}
.mayor-tob-box .mayor-detail p {font-size:1.5rem; font-weight:bold; box-sizing:border-box; border-bottom:1px solid #0a287f; padding-bottom:15px; margin-bottom:15px;}
.mayor-tob-box .mayor-detail p span{font-size:unset; font-weight:bold;}

.mayor-box {position:relative; box-sizing:border-box; border:1px solid #7485b6; border-top:2px solid #7485b6; padding:30px; overflow:hidden; margin-bottom:30px; overflow:hidden;}
.mayor-box.first {}
.mayor-box .mayor-img {width:20%; text-align:left; float:left;}
.mayor-box .mayor-img img {width:180px;}
.mayor-box .mayor-detail {width:80%; box-sizing:border-box; padding-top:20px;padding-left: 10px;float:left;}
.mayor-box .mayor-detail p {font-size:1.5rem; font-weight:bold; box-sizing:border-box; border-bottom:1px solid #0a287f; padding-bottom:15px; margin-bottom:15px;}
.mayor-box .mayor-detail p span{font-size:unset;  font-weight:bold;}
.mayor-box .mayor-detail div {position:relative; overflow:hidden;}
.mayor-box .mayor-detail div > ul {width:49%; float:left;margin-right:2%;}
.mayor-box .mayor-detail div > ul.detail-box {box-sizing:border-box; background:#e9edf6; padding:20px; }
.mayor-box .mayor-detail div > ul li {position:relative;width: 100%;font-size:1rem; box-sizing:border-box; padding-left:15px; margin-bottom:10px;float: left;}
.mayor-box .mayor-detail div > ul li:last-child {margin-bottom:0;}
.mayor-box .mayor-detail div > ul li:after {content:''; position:absolute; width:5px; height:5px; background:#7485b6; border-radius:10px;top: 11px; left:0;}
.mayor-box .mayor-detail div > ul li span {display:inline-block;width: 70px;color: #182747;font-weight:bold;}
.mayor-box .mayor-detail div > ul.mayor-prize {box-sizing:border-box;padding-left: 10px; margin-right:0;}
.mayor-box .mayor-detail div > ul.mayor-prize li {padding-left:20px;}
.mayor-box .mayor-detail div > ul.mayor-prize li:after {content:''; position:absolute; width:15px; height:18px; background:url(/gjmayor/img/sub/sub0401_prize_bul.png) no-repeat center;top: 6px;left: 0;}
.mayor_list_wrap dl{width: 24%;margin-bottom: 10px;float: left;border: 1px solid #7485b6;border-top: 3px solid #7485b6; box-sizing:border-box;padding: 10px;margin-right: 1%;}
.mayor_list_wrap dl.mr0_w25{width: 25%; margin-right: 0;}
.mayor_list_wrap dl:after{content: ''; display: block; clear: both;}
.mayor_list_wrap dl img{width: 140px; height: 178px; max-width: 100%;}
.mayor_list_wrap dl dt{margin: 0 auto 10px;padding: 20px;text-align: center;}
.mayor_list_wrap dl dd{margin: 0 auto; min-height: 195px;}
.mayor_list_wrap dl dd p {font-size:1.2rem; font-weight:bold; text-align:center;box-sizing: border-box;border-bottom: 1px solid #0a287f;margin-bottom: 20px;padding-bottom: 10px;}
.mayor_list_wrap dl dd p span {font-weight:bold;}
.mayor_list_wrap dl dd .num{background: #eee; border-radius:20px; font-weight: normal; font-size: 13px; display: inline-block; padding: 1px 10px;}
.mayor_list_wrap dl dd .name{font-size: 18px; font-weight: 600; display: inline-block; padding: 10px; color: #276bad;}
.mayor_list_wrap dl dd ul{margin-top: 10px;}
.mayor_list_wrap dl dd ul li{margin-bottom: 5px;}
.mayor_list_wrap dl dd > ul { float:left;margin-right:2%;}
.mayor_list_wrap dl dd > ul.detail-box {box-sizing:border-box; background:#e9edf6;padding: 20px 10px;}
.mayor_list_wrap dl dd > ul li {position:relative;width: 100%;font-size: 0.9rem; box-sizing:border-box; padding-left:15px; margin-bottom:10px;float: left;}
.mayor_list_wrap dl dd > ul li:last-child {margin-bottom:0;}
.mayor_list_wrap dl dd > ul li:after {content:''; position:absolute; width:5px; height:5px; background:#7485b6; border-radius:10px; top:6px; left:0;}
.mayor_list_wrap dl dd > ul li span:first-child {display:inline-block;width: 35%;color: #182747;font-weight:bold;float: left;}
.mayor_list_wrap dl dd > ul.mayor-prize {min-height: 110px;box-sizing:border-box; margin-right:0;padding-top: 10px;}
.mayor_list_wrap dl dd > ul.mayor-prize li {padding-left:20px;}
.mayor_list_wrap dl dd > ul.mayor-prize li:after {content:''; position:absolute; width:15px; height:18px; background:url(/gjmayor/img/sub/sub0401_prize_bul.png) no-repeat center; top:0; let:0;}
.mayor_list_wrap dl dd ul strong{display: inline-block; text-align: right; vertical-align: top; font-size: 13px; border-right: 1px solid #ddd; padding-right: 5px;}
.mayor_list_wrap dl dd ul span{display: inline-block;width: 60%;margin-left: 2%;}
.mayor_list_wrap dl dd .num span{font-weight: 600; color: #e04e09;}

.mayor_list_wrap.mayor-box-type2 dl dd {min-height: auto;}
.mayor_list_wrap.mayor-box-type2 dl dd p {border-bottom:0; margin-bottom:0; padding-bottom:20px;}

@media all and (max-width:1400px){
	.mayor-tob-box .mayor-img {width:40%; max-width:450px; top:auto;bottom: -30px;}
}

@media all and (max-width:1023px){
	.mayor-tob-box .mayor-detail {width:50%;}
	.mayor-tob-box .mayor-img {width:45%;}
	.mayor-tob-box .mayor-detail div {padding:20px;}
	.mayor-tob-box .mayor-detail div ul li {width:100%; margin-bottom:10px;}
	.mayor-tob-box .mayor-detail div ul li:last-child {margin-bottom:0;}

	.mayor_list_wrap dl{width: 32.3333% !important; margin-right: 1% !important;}
}

@media all and (max-width:840px){
	.mayor-box .mayor-img {width:100%; text-align:center; }
	.mayor-box .mayor-detail {width:100%;padding-left: 0;}
	.mayor-box .mayor-detail div ul {width:100%;}
	.mayor-box .mayor-detail div > ul.mayor-prize {margin-top:20px; padding-left:10px;}
	.mayor-box .mayor-detail p {text-align:center;}
	.mayor-tob-box .mayor-img {position:relative;max-width: 100%;height: auto;text-align:right;margin-top: -9%;margin-left: 5%;float:left;bottom: 0;}
}

@media all and (max-width:768px){
	.mayor-tob-box .mayor-img {margin-top:-5%;}

	.mayor_list_wrap dl{width: 49% !important;}
}

@media all and (max-width:640px){
	.mayor-tob-box {margin-bottom:30px;padding: 30px;}
	.mayor-tob-box:before {display:none;}
	.mayor-tob-box .mayor-detail p {text-align:center;}
	.mayor-tob-box .mayor-img {position:absolute; width:100%;text-align: center;margin-left: 9px;right:auto;top: -50px;left:0; float:none;z-index: 0;}
	.mayor-tob-box .mayor-detail {width: 100%;padding-top: 230px;}
	.mayor-tob-box .mayor-number {display: none;}
}

@media all and (max-width:460px){
	.mayor-box {padding:20px 10px;}
	.mayor-tob-box {padding:10px;}
	.mayor-tob-box .mayor-img {width:300px; left:50%; margin-left:-145px;}
	.mayor-tob-box .mayor-detail {padding-top: 150px;}
	.mayor-tob-box .mayor-detail p {font-size:1.2rem;}
	.mayor-tob-box .mayor-detail div > ul li span {width:65px;}
	.mayor-box .mayor-detail p {font-size:1.2rem;}
	.mayor-box .mayor-detail div > ul li span {width:65px;}

	.mayor_list_wrap dl{width: 100% !important;min-height: auto;padding-bottom: 30px;}
	.mayor_list_wrap dl dd {min-height:auto;}
	.mayor_list_wrap dl dd > ul.detail-box {width:100%;margin-top: 0;}
	.mayor_list_wrap dl dd > ul.mayor-prize {width:100%; height:auto; min-height:auto;}
	.mayor_list_wrap dl dd > ul li span:first-child {width:65px;}
	.mayor_list_wrap dl dd > ul li span br {display:none;}
	.mayor_list_wrap.mayor-box-type2 dl dd p {padding-bottom:0;}
}

/********************
	매니페스토란?
********************/
.manifesto-top {position:relative;box-sizing: border-box;background: #f0f1f4;padding: 40px 40px 50px;overflow:hidden;}
.manifesto-top:after {content:''; position:absolute;width: 462px;height: 292px; background:url(/gjmayor/img/sub/sub020205_img01.png) no-repeat center;right: -4px;bottom: -10px;}
.manifesto-top .manifesto-info {width: 52%;}
.manifesto-top .manifesto-info .tit {font-size: 50px;font-weight: 700;line-height: 1;color:#132988;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #132988;}
.manifesto-top .manifesto-info .tit span {font-size:20px; font-weight:700; letter-spacing:2px;}
.manifesto-top .manifesto-info .tit + p {line-height:1.6;}

.manifesto-box {margin: 45px 0;}
.manifesto-box .country-info {position:relative; overflow:hidden;}
.manifesto-box .country-img {width:20%; min-width:200px; float:left;}
.manifesto-box .country-name {width: 70%;padding-top: 10px;  padding-left:30px; float:left;}
.manifesto-box .country-name .tit {font-size:40px; font-weight:700;}
.manifesto-box .country-name .tit span {display:inline-block; font-size:22px; margin-left:15px;}
.manifesto-box .country-name .sub-tit {font-size:19px; font-weight:700; color:#132988;}
.manifesto-box .country-box {clear:both; background:#f3f7f9; padding:30px;margin-top: 20px;}

@media all and (max-width:1200px){
	.manifesto-top:after {display:none;}
	.manifesto-top .manifesto-info {width:100%;}
}

@media all and (max-width:1023px){
	.manifesto-top:after {display:block; width:350px; height:220px; background-size:contain;}
}

@media all and (max-width:840px){
	.manifesto-top:after {width:220px; height:160px; bottom:auto; top:14px; right:40px;}
	.manifesto-top .manifesto-info .tit + p br {display:none;}
}

@media all and (max-width:768px){
	.manifesto-box .country-img {width:100%; text-align:center; float:none;}
	.manifesto-box .country-name {width:100%; padding:0; text-align:center; margin-top:10px; float:none;}
}

@media all and (max-width:640px){
	.manifesto-top,
	.manifesto-box .country-box{padding:25px;}
	.manifesto-top .manifesto-info .tit,
	.manifesto-box .country-name .tit{font-size:2.5rem;}
	.manifesto-top:after {width:150px; height:100px; top:29px;}
}

@media all and (max-width:460px){
	.manifesto-top,
	.manifesto-box .country-box{padding:15px;}
	.manifesto-top .manifesto-info .tit,
	.manifesto-box .country-name .tit{font-size:2rem;}
	.manifesto-box .country-name .tit span {font-size:1.2rem;}
	.manifesto-top:after {display:none;}
}

/********************
	공직자의 자세
********************/
.attitude-wrap {position: relative;}
.attitude-wrap:after {content:''; display:block; clear:both;}
.attitude-wrap .attitude-box {width: 31%;margin-right: 3.5%;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; float:left;}
.attitude-wrap .attitude-box:nth-child(3n) {margin-right:0;}
.attitude-wrap .attitude-box:nth-child(n+4) {margin-top:30px;}
.attitude-wrap .attitude-box .text-box {position:relative; min-height: 280px; padding:40px;}
.attitude-wrap .attitude-box .text-box:before {content:''; position:absolute;width: 200px;height: 110px; background:url(/gjmayor/img/sub/sub020104_img01.png) no-repeat left top;z-index: -1;top: 40px;left: 30px;}
.attitude-wrap .attitude-box:nth-child(2) .text-box:before {background:url(/gjmayor/img/sub/sub020104_img02.png) no-repeat left top;}
.attitude-wrap .attitude-box:nth-child(3) .text-box:before {background:url(/gjmayor/img/sub/sub020104_img03.png) no-repeat left top;}
.attitude-wrap .attitude-box:nth-child(4) .text-box:before {background:url(/gjmayor/img/sub/sub020104_img04.png) no-repeat left top;}
.attitude-wrap .attitude-box:nth-child(5) .text-box:before {background:url(/gjmayor/img/sub/sub020104_img05.png) no-repeat left top;}
.attitude-wrap .attitude-box:nth-child(6) .text-box:before {background:url(/gjmayor/img/sub/sub020104_img06.png) no-repeat left top;}
.attitude-wrap .attitude-box .text-box .tit {font-size:1.8rem; font-weight:900; line-height:1.5; color:#000; margin-top:50px;}
.attitude-wrap .attitude-box .text-box .tit span {display:block; color:#0f318a;}
.attitude-wrap .attitude-box:nth-child(2) .text-box .tit span {color:#148154;}
.attitude-wrap .attitude-box:nth-child(3) .text-box .tit span {color:#e86b0f;}
.attitude-wrap .attitude-box:nth-child(4) .text-box .tit span {color:#ff3d3d;}
.attitude-wrap .attitude-box:nth-child(5) .text-box .tit span {color:#228f77;}
.attitude-wrap .attitude-box:nth-child(6) .text-box .tit span {color:#ad1f80;}
.attitude-wrap .attitude-box .text-box .exp {font-size: 1.1rem; line-height:1.4; margin-top:10px;}

@media all and (max-width:1023px){
	.attitude-wrap .attitude-box {width:32%; border:1px solid #efefef; margin-right:2%;}
	.attitude-wrap .attitude-box .text-box {padding:40px 20px;}
	.attitude-wrap .attitude-box .text-box:before {left:auto; right:0;}
}

@media all and (max-width:840px){
	.attitude-wrap .attitude-box {width:100%;margin-top: 30px;}
	.attitude-wrap .attitude-box .text-box {width:50%;padding: 30px 50px; float:left;}
	.attitude-wrap .attitude-box .img-box {width:50%; text-align:right; float:left;}
}

@media all and (max-width:768px){
	.attitude-wrap .attitude-box .text-box {min-height:auto;padding: 30px 10px 0 20px;}
	.attitude-wrap .attitude-box .text-box .tit {margin-top:20px;}
}

@media all and (max-width:640px){
	.attitude-wrap .attitude-box .text-box .tit {font-size: 1.4rem;margin-top:0;}
	.attitude-wrap .attitude-box .text-box .exp br {display:none;}
}

@media all and (max-width:460px){
	.attitude-wrap .attitude-box {width:90%;margin: 30px auto 0;float: none;}
	.attitude-wrap .attitude-box:first-child {margin-top:0;}
	.attitude-wrap .attitude-box .text-box:before {top:15px; right:20px; background-position:center;}
	.attitude-wrap .attitude-box:after {content:''; display:block; clear:both;}
	.attitude-wrap .attitude-box .text-box {width:100%;padding: 50px 10px 20px 20px;}
	.attitude-wrap .attitude-box .text-box .tit {font-size:1.6rem;}
	.attitude-wrap .attitude-box .text-box .tit span {display:inline-block;}
	.attitude-wrap .attitude-box .img-box {width:100%;overflow:hidden;}
	.attitude-wrap .attitude-box .img-box img {width:100%;}
}



/********************
	핵심가치
********************/
.value-wrap {max-width:900px; margin:0 auto;}
.value-wrap .value-top {position: relative;width: 70%; height:80px; font-size:1.1rem; font-weight:bold; text-align:center; color:#fff; border-radius:50px; background:#0d214e; padding:25px 20px 0;margin: 0 auto 70px;}
.value-wrap .value-top:after {content:''; position:absolute; width:5px; height:80px;background: url(/gjmayor/img/sub/sub020101_img04.png) no-repeat center;bottom: -75px; left:50%; margin-left:-2.5px;}
.value-wrap .value-bottom {position:relative; text-align:center;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius:250px;padding: 45px 30px; overflow:hidden;}
.value-wrap .value-bottom > div {position: relative;width:280px; height:280px;border: 3px solid transparent;border-radius: 50%;background-image: linear-gradient(#fff, #fff),  linear-gradient(to top, #015eea 0%,  #00c0fa 100%);background-origin: border-box;background-clip: content-box, border-box;float:left;}
.value-wrap .value-bottom > div.part1 {right: -30px;}
.value-wrap .value-bottom > div.part3 {left: -30px;}
.value-wrap .value-bottom > div div {width: 100%;height: 100%;text-align:center;padding: 50px 30px 30px;}
.value-wrap .value-bottom > div div span {display:inline-block; width:100%; height:40px;margin-bottom:20px;}
.value-wrap .value-bottom > div div p {color:#0653aa;}
.value-wrap .value-bottom > div div .tit {font-size:2rem; font-weight:700;}

.value-wrap-web {text-align:center;}
.value-wrap-mob {display:none; text-align:center;}

@media all and (max-width:1250px){
	.value-wrap .value-bottom > div {width:33%; height:250px;}
	.value-wrap .value-bottom > div div {padding-top:30px;}
}

@media all and (max-width:1023px){
	.value-wrap .value-bottom > div {width:280px; height:280px;;}
}

@media all and (max-width:960px){
	.value-wrap .value-bottom > div {width:33%; height:250px;}
}

@media all and (max-width:840px){
	.value-wrap .value-bottom > div {width:33%; height:250px;}
}

@media all and (max-width:768px){
	.value-wrap .value-bottom {width:80%; margin:0 auto;padding: 30px;}
	.value-wrap .value-bottom > div {width:280px; height:280px; margin:0 auto;float:none;}
	.value-wrap .value-bottom > div div .tit {font-size:1.8rem;}
	.value-wrap .value-bottom > div.part1 {right: 0; bottom:-30px;}
	.value-wrap .value-bottom > div.part3 {left: 0; top:-30px;}
}

@media all and (max-width:640px){
	.value-wrap .value-bottom {width:90%; padding:10px 30px;}
	.value-wrap .value-bottom > div {width: 260px;height: 260px;}
	.value-wrap .value-bottom > div div .tit {font-size:1.6rem;}

	.value-wrap-web {display:none;}
	.value-wrap-mob {display:block;}
}

@media all and (max-width:460px){
	.value-wrap .value-bottom {padding:0 15px;}
	.value-wrap .value-bottom > div {width: 240px;height: 240px;}
	.value-wrap .value-bottom > div div .tit {font-size:1.6rem;}
}

/********************
	시정목표
********************/
.goal-wrap {margin-top: 50px;}
.goal-wrap .tab-group {position:relative;background: #f4f4f4;border-radius: 0 50px;padding: 0;overflow:hidden;}
.goal-wrap .tab-group .tabs {position: relative;width: 35%;padding: 50px 40px 50px 40px;float:left;}
.goal-wrap .tab-group .tabs:after {content:''; position:absolute; width:2px; height:100%;background: #e1e1e1; top:0;left: 67px; z-index:0;}
.goal-wrap .tab-group .tab-content {width: 65%; background-size:cover;float:left;}

.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;}

.tab-group .tabs {}
.tab-group .tabs ul:after {content:""; display:block; clear:both;}
.tab-group .tabs li {width: 100%; float:left;}
.tab-group .tabs li button {position:relative; display:block;width: 100%;font-size: 1rem;padding: 0.8rem 1rem 0.8rem 2.5rem;  text-align:center; color:#777;}
.tab-group .tabs li button:after{content:''; position:absolute; width:15px; height:15px; background:url(/gjmayor/img/sub/sub020102_img03.png) no-repeat center;top: 20px;left: 20px;z-index: 1;}
.tab-group .tabs li button.on {color:#fff;background: #70207f; margin-right:1rem;border-radius: 50px;z-index: 1;}
.tab-group .tabs li button.on:after {background:url(/gjmayor/img/sub/sub020102_img03_on.png) no-repeat center;}
.tab-group .tabs li button span {font-size:1.2rem; font-weight:bold;}
.tab-group .tab-con {display:none;width: 65%;min-height: 370px;background: url(/gjmayor/img/sub/sub020102_img04.jpg) no-repeat center; background-size:cover; padding: 10px 50px 50px;}
.tab-group .tab-con.con01 {background-position: 80%;}
.tab-group .tab-con.con02 {background: url(/gjmayor/img/sub/sub020102_img05.jpg) no-repeat center;}
.tab-group .tab-con.con03 {background: url(/gjmayor/img/sub/sub020102_img06.jpg) no-repeat center;}
.tab-group .tab-con.con04 {background: url(/gjmayor/img/sub/sub020102_img07.jpg) no-repeat center;}
.tab-group .tab-con.con05 {background: url(/gjmayor/img/sub/sub020102_img08.jpg) no-repeat center;}
.tab-group .tab-con.on {display:block;width: 100%;}
#conts .tab-group .tab-con .tab-img .top {position:relative; box-sizing:border-box; margin-bottom:20px; padding-bottom:20px;}
#conts .tab-group .tab-con .tab-img .top:after {content:''; position:absolute; width:80px; height:1px; background:#fff;bottom: 0;left: 0;}
#conts .tab-group .tab-con .tab-img .top p {font-size:1.3rem; font-weight:bold; color:#dadada;}
#conts .tab-group .tab-con .tab-img .top p + p {font-size: 3rem; color:#fff;}
#conts .tab-group .tab-con .tab-img .bottom {font-size:1.1rem; color:#dadada;}

@media all and (max-width:1023px){
	.goal-wrap .tab-group .tabs {width:40%;padding: 50px 20px 50px 20px;}
	.goal-wrap .tab-group .tab-content {width:60%;}
	.goal-wrap .tab-group .tabs:after {left:47px;}
}

@media all and (max-width:840px){
	.goal-wrap .tab-group .tabs {width:50%;padding: 50px 20px 50px 20px;}
	.goal-wrap .tab-group .tabs:after {left:47px;}
	.goal-wrap .tab-group .tab-content {width:50%;}
	#conts .tab-group .tab-con .tab-img .bottom br {display:none;}
	#conts .tab-group .tab-con .tab-img .top p + p {font-size:2.4rem;}
}

@media all and (max-width:768px){
	.tab-group .tab-con {padding: 10px 30px 30px;}
}

@media all and (max-width:640px){
	.goal-wrap {margin-top:25px;}
	.goal-wrap .tab-group .tabs {width:100%;padding: 30px 20px 20px;}
	.goal-wrap .tab-group .tab-content {width:100%;}
	#conts .tab-group .tab-con .tab-img .bottom br {display:block;}
}

@media all and (max-width:460px){
	.goal-wrap .tab-group .tabs {padding:20px}
	#conts .tab-group .tab-con .tab-img .bottom br {display:none;}
}

/********************
	시정비전
********************/
.vision-wrap { text-align:center;background-size: contain;}
#conts .vision-wrap h4 {position:relative;max-width: 500px; font-size:32px; text-align:center; color:#333;margin: 0 auto;}
#conts .vision-wrap h4:before {content:''; display:block; position:absolute;width: 80px; height:1px;background: #ddd; left:0;top: 27px;}
#conts .vision-wrap h4:after {content:''; display:block; position:absolute;width: 80px; height:1px;background: #ddd; right:0;top: 27px;}
#conts .vision-wrap h4 span {position:relative;font-size:38px; font-weight:700; color:#685b9c; top:1px;}
#conts .vision-wrap .vision-img {margin-top: 50px;}
#conts .vision-wrap .vision-txt {position:relative; width:80%; font-size:1.2rem; font-weight:bold; padding:70px 0; margin:0 auto; top:-40px;}
#conts .vision-wrap .vision-txt:before {content:''; position:absolute; width:100%; height:100%;box-sizing: border-box;border:8px solid #f1f3ff; border-radius:40px;  top:0; left:0; z-index:-1;}
#conts .vision-wrap .vision-txt:after {content:''; position:absolute; width:80%; height:100px; background:#fff; left:10%; top:-50px; z-index:-1;}
#conts .vision-wrap .vision-txt .violet {font-size:1.5rem; font-weight:bold; color:#c21864;}

@media all and (max-width:840px){
	#conts .vision-wrap .vision-txt {width:100%;}
	#conts .vision-wrap .vision-txt:after {width:90%;left: 5%;}
}

@media all and (max-width:768px){
	#conts .vision-wrap .vision-txt {width:95%; top:0; margin-top:20px; padding:40px 20px;}
	#conts .vision-wrap .vision-txt:after {display:none;}
}

@media all and (max-width:580px){
	#conts .vision-wrap .vision-txt {width: 100%;font-size: 1.1rem;border-radius: 30px;background: #f1f3ff;padding: 25px 20px;}
	#conts .vision-wrap .vision-txt .violet {font-size:1.1rem;}
	#conts .vision-wrap h4,
	#conts .vision-wrap h4 span{font-size:1.5rem;}
	#conts .vision-wrap h4:before,
	#conts .vision-wrap h4:after {top:15px;}
	#conts .vision-wrap .vision-img {width:90%; margin:20px auto 0;}
}

@media all and (max-width:460px){
	#conts .vision-wrap .vision-txt br {display:none;}
	#conts .vision-wrap h4:before, #conts .vision-wrap h4:after {width:12%;}
}

/********************
	광주시에바란다
********************/
.topbox.epeople {border: 10px solid #e6efff; border-radius: 20px;}
.topbox.epeople{background: url(/gjmayor/img/sub/bg_ico01.png) no-repeat 35px 44px;}
@media (max-width: 518px){
	.topbox.epeople{background-position:center 33px;}
}

.suggestion_wrap {position:relative;background: #e6f3ff; border-radius:20px;padding: 70px;}
.suggestion_wrap:after {content:''; position:absolute;width: 495px;height: 327px; background:url(/gjmayor/img/sub/sub0301_img01.png) no-repeat center;background-size: contain;top: 126px;right: 50px;}
.suggestion_wrap .suggestion_cont .txt > * {color: #555;}
.suggestion_wrap .suggestion_cont .txt p:first-child {font-family:GmarketSansMedium;font-size:1.3rem;margin-bottom: 30px;}
.suggestion_wrap .suggestion_cont .txt p:first-child,
.suggestion_wrap .suggestion_cont .txt p:first-child strong,
#conts .suggestion_wrap .suggestion_cont .txt p:first-child span {font-family:GmarketSansMedium !important; font-size:2rem;line-height: 1.3;color: #122454;}
.suggestion_wrap .suggestion_cont .txt p .point1 {color: #2d59ce !important;}
.suggestion_wrap .suggestion_cont .txt p:last-child strong {color:#000;}
.suggestion_wrap .suggestion_cont .btn_box {margin-top:50px;}
.suggestion_wrap .suggestion_cont .btn_box .suggestion_btn {position:relative; display:inline-block;width: 250px;font-size: 1.2rem;font-weight: bold;text-align: center; color:#fff;border-radius: 10px;background: #1b44b3;padding: 25px;overflow: hidden;transition: all 0.3s;}
.suggestion_wrap .suggestion_cont .btn_box .suggestion_btn:hover {background: #092c87;}
.suggestion_wrap .suggestion_cont .btn_box .suggestion_btn:after {display:none;}

@media all and (max-width:1300px){
	.suggestion_wrap:after {right:0;}
}

@media all and (max-width:1200px){
	.suggestion_wrap:after {width:40%;}
}

@media all and (max-width:840px){
	.suggestion_wrap {padding: 300px 50px 50px;}
	.suggestion_wrap:after {top: -10px; right:auto; left:50%; margin-left:-20%;}
	.suggestion_wrap .suggestion_cont .txt p {text-align:center;}
	.suggestion_wrap .suggestion_cont .btn_box {text-align:center;}
}

@media all and (max-width:768px){
	.suggestion_wrap {padding: 300px 40px 30px;}
	.suggestion_wrap:after {width: 320px;height: 280px;top: 10px;margin-left: -160px;}
	.suggestion_wrap .suggestion_cont .txt p br {display:none;}
}

@media all and (max-width:640px){
	.suggestion_wrap .suggestion_cont .txt p:first-child, .suggestion_wrap .suggestion_cont .txt p:first-child strong, .suggestion_wrap .suggestion_cont .txt p:first-child span {font-size: 1.5rem !important;}
}

@media all and (max-width:460px){
	.suggestion_wrap {padding: 230px 20px 20px;}
	.suggestion_wrap:after {width: 260px;margin-left: -130px;top: -20px;}
	.suggestion_wrap .suggestion_cont .txt p,
	.suggestion_wrap .suggestion_cont .txt p strong {font-size:1.1rem;}
	.suggestion_wrap .suggestion_cont .btn_box {margin-top:30px;}
	.suggestion_wrap .suggestion_cont .btn_box .suggestion_btn {width:100%; font-size:1.1rem;text-align: center;padding: 20px;}
}

@media all and (max-width:380px){
	.suggestion_wrap .suggestion_cont .txt p:first-child,
	.suggestion_wrap .suggestion_cont .txt p:first-child strong,
	.suggestion_wrap .suggestion_cont .txt p:first-child span {font-size: 1.3rem !important;}
}


/********************
	인사말
********************/
.mayor_wrap{background: #f1f3f9;padding: 50px 50px 0 50px;}
.mayor_wrap .mayor_cont{border:20px solid #fff;border-bottom-width: 0;padding: 50px; position:relative; z-index:1;}
.mayor_wrap .mayor_cont:before{content:'GWANGJU'; position:absolute; color:#fff; font-size:120px;font-family:GmarketSansBold; z-index:-1; bottom:-80px;}
.mayor_wrap .mayor_cont .s-tit{font-family:GmarketSansBold;color:#000; font-size:50px;line-height: 1.2;}
.mayor_wrap .mayor_cont .s-tit span{display:block; color:#2749b0; font-family:GmarketSansBold;}
.mayor_wrap .mayor_cont .mayor_txt{color:#666; font-size:32px; font-weight:500;margin-top: 20px;}
.mayor_wrap .mayor_cont .mayor_txt span{color:#000; font-weight:600;}

.hello_wrap{position:relative;padding: 44px; z-index:1;}
.hello_wrap:before {content:''; position:absolute; width:100%;height: 200px; background:#8591b5;top: 0;left: 0;right: 0;}
.hello_wrap:after{content:''; width:438px; height:527px; position:absolute;top: -350px; right:50px;background:url('/gjmayor/img/sub/img_hello_mayor.png') no-repeat;clear: both;}
.hello_wrap .hello_bottom {position:relative; width:100%;background: #fafbff; margin:0 auto;padding: 70px;z-index: 1;}
.hello_wrap .hello_bottom:before {content:''; position:absolute; width:100%; height:100%; background:url(/gjmayor/img/sub/sub0105_img03.png) no-repeat top;top: 0;left: 0;opacity: 0.5;}
.hello_wrap .hello_bottom:after{content:''; clear:both; display:block; }
.hello_wrap .hello_bottom p {font-size:1.2rem; margin-bottom:30px;text-align: left;}
.hello_wrap .hello_bottom .mayor-name {font-weight:bold; float:right; margin-top:50px;margin-bottom: 0;}
.hello_wrap .hello_bottom .mayor-name .signature {display: inline-block;width: 100px;text-indent:-9999px;box-sizing: border-box;background: url(/gjmayor/img/sub/sub0101_img03.png) no-repeat center;padding: 20px 0 10px;margin-left: 15px;}

@media all and (max-width:1400px){
	.mayor_wrap{padding: 20px 20px 0 20px;}
	.mayor_wrap .mayor_cont{padding:30px;border:15px solid #fff; border-bottom-width:0;}
	.mayor_wrap .mayor_cont:before{font-size:80px; bottom:-40px;}
	.mayor_wrap .mayor_cont .s-tit{font-size:30px;}
	.mayor_wrap .mayor_cont .mayor_txt{font-size: 24px;}
	.hello_wrap{padding:30px;}
	.hello_wrap:after{width:270px; background-size:contain; top:-200px;}
	.hello_wrap .hello_bottom{padding:30px;}
}


@media all and (max-width:640px){
	.mayor_wrap .mayor_cont{padding-bottom:160px;}
	.mayor_wrap .mayor_cont:before{font-size:60px; left:0; bottom:-30px;; }
	.mayor_wrap .mayor_cont .s-tit{font-size:26px;}
	.mayor_wrap .mayor_cont p{text-align:center;}
	.hello_wrap {padding: 15px;}
	.hello_wrap:after{width:200px;right: 50%;margin-right: -100px; top:-160px;}
	.hello_wrap .hello_cont {padding: 15px;}
	.hello_wrap .hello_bottom p {font-size:1rem;}
}


/********************
	신년사
********************/
#new_year {box-sizing:border-box;background: #c9d1d0 url(/gjmayor/img/sub01/new_bg.png) no-repeat;background-size:100%;width: 100%;height:1200px;position: relative;padding-top: 50%;}
#new_year .moB{display:none}
.happynewyear {overflow-y: scroll;height: 85%;box-sizing: border-box;padding: 23px;color: #312929;width: 65%;margin: 0 auto;font-size: 18px;line-height: 1.5;}
.happynewyear strong{font-size:22px; }
.happynewyear .paragraph + .paragraph { margin-top: 30px;}
.happynewyear .paragraph p + p {margin-top:20px;}
.happynewyear .sign {margin-top:50px;}
.happynewyear .sign .name {font-size:24px;}

@media all and (max-width: 1024px){
	#new_year{height:1000px}
	#new_year .moB{display:block;font-size: 13px;text-align: right;padding: 0 160px;color: #555;}
	.happynewyear{width: 70%;}
}

@media all and (max-width: 1023px){
	.happynewyear{margin-top: 30px;}
}

@media all and (max-width: 768px){
	#new_year{height: 800px;}
	#new_year .moB{padding:0 80px;}	
	.happynewyear{width: 90%;height: 75%;font-size:14px}
	.happynewyear strong{font-size:18px}			
}