@charset "utf=8";



#header .wrap01 {height:100rem;}
#footer {margin:0; border-radius:0;}

.control{display:flex; align-items:center; margin:40rem 0 0 10rem;}
.control a{display:block; background:url('../img/main/control2.png') no-repeat 0 0/400% auto; width:30rem; height:30rem; text-indent:-9999px; }
.control a.next{background-position-x:33.333%;}
.control a.stop{background-position-x:66.666%;}
.control a.play{background-position-x:99.999%; display:none;}

.sign {display:flex; align-items:center; color:#323232; margin-left:4rem; margin-top:40rem;}
.sign span {font-size:17rem;}
.sign strong {font-size:28rem; margin-left:10rem;}


.cont1 {position: relative;}
.cont1 .wrap01 {padding:0;}
.cont1 .wrap02 {max-width:100%; padding:0;}
.visual {aspect-ratio: 1720 / 648; position:relative; border-radius: 60rem 0 0 0; overflow:hidden;}

.vis_slide,
.vis_slide .slick-list,
.vis_slide .slick-track,
.vis_slide .slick-slide {height:100% !important;}
.vis_slide .slick-slide img {display:block;width:100%;height:100%;object-fit:cover;}

.vis_card,
.vis_txt {position:absolute; margin-left:50%; right:0; z-index:100;}

.vis_txt {color:#083b41; top:140rem; width:50%;}
.vis_txt .title br {display:none;}
.vis_txt .title {font-size:67rem; font-family:'GANGWONSTATE'; line-height:1.2; position:relative; transform:rotate(0.04deg);}
.vis_txt .title::before {position:absolute; content: ""; background:url('../img/main/quote2.png') no-repeat 0 0/contain; width:45rem; height:38rem; top:-60rem;}
.vis_txt .sign {margin-left:10rem;}
.vis_txt .text {color:#323232; font-size:19rem; margin-top:20rem; margin-left:6rem; font-family: 'GANGWONSTATE'; transform: rotate(0.04deg);}


.vis-btn a {background-position-y:100%;}
.vis-btn .stop {margin-left:30rem;}
.vis-btn .pager {display:flex; align-items:center; font-style:italic; width:80rem; height:40rem; position:relative; margin:0 30rem; }
.vis-btn .pager::before {position:absolute; content: ""; background: url('../img/main/vis_slash2.png') no-repeat 0 0/contain; margin-left:3rem; width:14rem; height:14rem; top:50%;left:50%; transform:translate(-50%, -50%);}
.vis-btn .pager span {display:block; position:absolute; line-height:1;}
.vis-btn .pager .current {font-size:26rem; font-weight:600; top:0; left:0;  }
.vis-btn .pager .total {font-size:20rem; right:0; bottom:0; }

.vis_card {bottom:80rem;  padding-right:200rem;}
.vis_card .link {display:flex; margin:-7rem; }
.vis_card .link a {display:block; background:#53481e; width:calc(50% - 14rem); padding:30rem; border-radius:20rem; margin:7rem; color:#fff; position:relative;}
.vis_card .link a::before {flex-shrink:0; flex-grow:0; content:''; position:absolute; top:50%; left:30rem; width:50rem; height:45rem; background:url('/design/mayor/img/main/link_icon03.png') no-repeat 0 0/200% auto; transform:translateY(-50%);}
.vis_card .link .box2 {background:#2c7937;}
.vis_card .link .box2::before {background-position:100% 0;}
.vis_card .link .tit,
.vis_card .link .txt { padding-left:80rem;}
.vis_card .link .tit {font-size:20rem; font-weight:600;}
.vis_card .link .txt { font-size:16rem; font-weight:300; line-height:1.5; margin:10rem 0 0 1rem;}
.vis_card .sign {display:none;}

@media all and (max-width:1840px){
    .vis_txt {top:60rem;}
    .vis_txt .title::before {display:none;}
    .vis_txt .title br {display:block;}
    .vis_txt .text {text-align:left; margin-left:7rem; margin-top:20rem;padding-right:0;}
    .vis_card {padding-right:60rem; bottom:60rem;}
}
@media all and (max-width:1740px){
    .vis_txt {top:100rem;}
    .vis_txt .sign {display:block; margin-top:40rem;}
    .vis-btn a {width:20rem; height:20rem;}
    .vis-btn .pager {width:auto; height:auto; margin:3rem 10rem;} 
    .vis-btn .pager::before {margin:-0rem 0 0 0; width:10rem; height:10rem;}
    .vis-btn .pager span {position:static; padding:0 15rem; font-style:normal;}
    .vis-btn .pager .current {font-size:17rem;}
    .vis-btn .pager .total {font-size:17rem;}
    .vis_card {margin-left:0; bottom:0; width:100%; padding-right:0; position:static;}
    .vis_card .link a {border-radius:0; width:50%; margin:0; padding:30rem 60rem;}
    .vis_card .link a::before {left:50rem;}
    .vis_card .sign {display:none;}
}

@media all and (max-width:1280px){
    .vis-btn {display:none;}
    .vis_txt .sign {margin-top:20rem; margin-left:7rem;}
    .vis_txt .text {display:none;}
}
@media all and (max-width:1023px){
    .vis_txt {top:60rem;}
    .vis_txt .title {font-size:50rem;}
    .vis_card .link {flex-wrap:wrap;}
    .vis_card .link a {width:100%;}
}
@media all and (max-width:768px){
    .vis_txt {top:40rem;}
    .vis_txt .title {font-size:36rem;}
}
@media all and (max-width:599px){
    .visual {min-height:200px; max-height:648px;}
    .visual {border-radius:0;}
    .vis_txt {margin-left:0; left:auto; right:25rem; top:130rem; width:auto;}
    .vis_txt .title {display:none;}
    .vis_txt .sign * {text-shadow:-2rem 0 white, 0 2rem white, 2rem 0 white, 0 -2rem white;}
    .vis_card .txt {display:none;}
}






/* 군수의 말과글, 링크 */
.vis_link {display: flex; align-items: center; color: #fff; background: #207583; border-radius: 0 0 70rem 0; position:relative;}
.vis_link .left {width: 506rem; height:220rem; background: #1a8a96; text-align: center; padding:38rem 20rem; margin-top:-45rem; border-radius:0 70rem 0 0; overflow:hidden;}
.vis_link .left p {font-family: 'GANGWONSTATE'; font-size: 17rem; letter-spacing: 1.8px;} 
.vis_link .left p strong{display: block; font-size: 31rem; font-weight: normal; letter-spacing: -0.8px;}
.vis_link .left a{display: inline-block; width: 190rem; color: #fff; font-size: 16rem; border: 1px solid #fff; padding: 7rem 20rem; margin-top: 20rem; text-align: left; position: relative;}
.vis_link .left a::before{position: absolute; content: ""; background: url('../img/main/more.png') no-repeat; width: 16rem; height: 16rem; right: 20rem; top: 50%; transform: translateY(-50%);}
.vis_link .left a span{font-weight: 600;}

.vis_link .right{width: calc(100% - 506rem); height: 180rem; display: flex; align-items: center;  position: relative; z-index: 3;}
.vis_link .right::before{position: absolute; content: ''; box-shadow: 0 0 70px #207583; border-radius: 0 0 184px 0; width: 90%; height: 24%; bottom: 0; left: 5%;}

.vis_link .right li{width: 50%; position: relative;}
.vis_link .right li:first-child::before{display:none; position: absolute; content: ""; width: 1rem; height: 94rem; background: rgba(255, 255, 255, 0.3); right: 0; top: 50%; transform: translateY(-50%);}

.vis_link .right li a{position: relative; display: block; color: #fff; padding: 10rem 20rem 10rem 200rem;}
.vis_link .right li a::before{position: absolute; content: ""; background: url('../img/main/link_icon01.png') no-repeat center center / 100%; left: 90rem; top: 50%; transform: translateY(-50%); width: 50rem; height: 47rem;}
.vis_link .right li:nth-child(2) a::before{background-image: url('../img/main/link_icon02.png');}

.vis_link .right li a strong{display: block; margin-bottom: 12rem; font-size: 23rem; font-weight: 700;}

@media all and (max-width:1600px){
    .vis_link .left{width: 380rem; height: 200rem;}
    .vis_link .left p{font-size: 16rem;}
    .vis_link .left p strong{font-size: 27rem;}
    .vis_link .left a{margin-top: 10rem; padding: 5rem 19rem;}
    .vis_link .right{width: calc(100% - 380rem); height: 120rem;}
    .vis_link .right li a{padding-left: 140rem; font-size: 16rem;}
    .vis_link .right li a strong{font-size: 21rem; margin-bottom: 7rem;}
    .vis_link .right li a::before{left: 50rem;}
}
@media all and (max-width:1260px){
    .vis_link .left{width: 360rem; height: 190rem; padding: 30rem;}
    .vis_link .right{width: calc(100% - 360rem);}
    .vis_link .right li a{padding-left: 120rem;}
    .vis_link .right li a::before{left: 45rem;}
    .vis_link .right li a span br{display: none;}
}
@media all and (max-width:1150px){
    .vis_link .left{width: 320rem; margin-top: -2rem;}
    .vis_link .left p span{margin-right: 20rem;}
    .vis_link .left p strong{font-size: 25rem; margin-right:20rem;}
    .vis_link .right{width: calc(100% - 320rem);}
    .vis_link .right li a{padding-left: 100rem; font-size: 15rem;}
    .vis_link .right li a::before{left: 28rem; width: 44rem;}
    .vis_link .right li a strong{font-size: 20rem;}
}
@media all and (max-width:970px){

    .vis_link{flex-wrap: wrap;}
    .vis_link .left, .vis_link .right{width: 100%; border-radius: 0;}
    .vis_link .left{display: flex; justify-content: space-between; align-items: center; height: auto; padding: 20rem;}
    .vis_link .left p{display: flex; align-items: center;}
    .vis_link .left a{margin-top: 0; width: 170rem;}
    .vis_link .right{height: auto; padding: 20rem;}
}

@media all and (max-width:580px){

    .vis_link{border-radius: 0 0 30rem 0;}
    .vis_link .left p span{display: none;}
    .vis_link .left p strong{font-size: 22rem;}
    .vis_link .right{flex-wrap: wrap; padding: 0 20rem;}
    .vis_link .right li{width: 100%; padding: 10rem 0;}
    .vis_link .right li:first-child::before{width: 100%; height: 1px; left: 0; bottom: 0; top: inherit;}
}






/* 민선8기 분야별 공약 */
.cont2{position: relative; background: #e7edee url('../img/main/mid_bg.png') no-repeat right top -100rem; padding-top: 77rem;}
.cont2::before{position: absolute; content: ""; background: #e7edee; left: 0; width: 100%; height: 220rem; top: -220px; z-index: -3;}
.plan_top{text-align: center; font-family: 'GANGWONSTATE'; }
.plan_top h2{font-size: 45rem;}
.plan_top h2 em{color: #034e81; position: relative; padding-top: 20rem;}
.plan_top h2 em::before{position: absolute; content: ""; background: #034e81; width: 4rem; height: 4rem; border-radius: 50rem; top: 0; left: 50%; transform: translateX(-50%);}
.plan_top p{font-size: 21rem; color: #7a7a7a;}

.plan_slide_wrap{position: relative; max-width: 1110rem; margin: 90rem auto 0 auto; padding-bottom: 80rem;}
.plan_slide_wrap > p{position: absolute; width: 116rem; height: 116rem; line-height: normal; top: -40rem; right: 80rem; background: linear-gradient(180deg, #2573a9,#004a7d); box-shadow: 4px 10px 20px rgb(92 131 159); border-radius: 50%; color: #fff; text-align: center; font-size: 15rem; padding-top: 23rem; z-index: 3;}
.plan_slide_wrap > p strong{display: block; font-size: 37rem; font-weight: 700;}

.plan_slide{height: 400rem;}
.plan_slide .slick-slide {margin: 0 60px;}
.plan_slide .slick-list{overflow: inherit; margin: 0 -60px;}


.p_item{height: 340rem; border-radius: 200rem; overflow: hidden; position: relative;}
.p_item::before{position: absolute; content: ""; width: 100%; height: 80%; bottom: 0; left: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.99)); opacity: 0;}
.p_item p{position: absolute; width: 80%; left: 14%; bottom: 14%; color: #fff; opacity: 0;}
.p_item p strong{display: inline-block; width: 28%; position: relative; font-size: 31rem; font-family: 'GANGWONSTATE'; font-weight: normal; line-height: 1.4; margin-right: 40rem;}
.p_item p span{display: inline-block; width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.p_item p strong::before{position: absolute; content: ""; display: block; text-indent: -9999px; background: url('../img/main/plan_num01.png') no-repeat center center / 100%; width: 90rem; height: 70rem; left: -44px; top: -47px;}
.p_item p strong.num02::before{background-image: url('../img/main/plan_num02.png');}
.p_item p strong.num03::before{background-image: url('../img/main/plan_num03.png');}
.p_item p strong.num04::before{background-image: url('../img/main/plan_num04.png');}
.p_item p strong.num05::before{background-image: url('../img/main/plan_num05.png');}
.p_item p strong.num06::before{background-image: url('../img/main/plan_num06.png');}
.p_item p strong.num07::before{background-image: url('../img/main/plan_num07.png');}
.p_item p strong.num08::before{background-image: url('../img/main/plan_num08.png');}
.p_item p strong.num09::before{background-image: url('../img/main/plan_num09.png');}
.p_item p strong.num10::before{background-image: url('../img/main/plan_num10.png');}
.p_item p strong.num11::before{background-image: url('../img/main/plan_num11.png');}

.plan_slide .p_item.slick-current{height: 412rem; margin-top: -36rem;}
.plan_slide .p_item.slick-current > p{opacity: 1;}
.plan_slide .p_item.slick-current::before{opacity: 1;}
.p_item img{width: 100%; height: 100%; object-fit: cover;}

/* 민선8기 컨트롤 */
.plan_btn{justify-content: space-between;}
.plan_btn a{background-position-y: -33px;}
.plan_btn a.prev{margin-right: 48rem; position: relative;}
.plan_btn a.prev::before{position: absolute; content: ""; right: -24rem; top: 0; width: 1rem; height: 25rem; background: #b8b8b8;}
.plan_btn .pn{display: flex; align-items: center; margin-left: 40rem;}
.progress{display: block; width: 87%; height: 5rem; overflow: hidden; background-color: #d9d9d9; background-image: linear-gradient(to right, #3c4298, #3c4298); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out; border-radius: 50rem; margin-left: 30rem;}
.sr-only {position: absolute; width: 1px; height: 5rem; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

@media all and (max-width:1600px){
    .cont1::before{top: inherit; bottom: 0; height: 155rem; width: 100%; background: #e7edee;}
    .cont2::before{display: none;}
}
@media all and (max-width:1300px){
    .plan_top h2{font-size: 38rem;}
    .plan_top p{font-size: 19rem;}
    .p_item{height: 280rem;}
    .plan_slide .p_item.slick-current{height: 300rem;}
    .plan_slide{height: 300rem;}
    .plan_btn{margin: 34rem 0 0 16rem;}
}
@media all and (max-width:1024px){
    .plan_slide_wrap > p{width: 100rem; height: 100rem; top: -30rem; right: 64rem;}
    .plan_slide_wrap > p strong{font-size: 28rem;}
    .p_item p strong{display: block; width: 100%;}
    .p_item p strong br{display: none;}
    .p_item p span{width: 100%; margin-top: 10rem;}
}
@media all and (max-width:820px){
    .cont2{padding-top: 65rem; background-size: 50%;}
    .plan_top h2{font-size: 33rem;}
    .plan_slide_wrap {margin-top: 40rem; padding-bottom: 50rem;}
    .plan_slide,
    .plan_slide .p_item.slick-current{height: 250rem; margin-top: 0;}
    .p_item p strong{font-size: 27rem;}
    .p_item p strong::before{width: 60rem; left: -23px; top: -36px;}
}
@media all and (max-width:767px){
    .plan_slide_wrap > p{display: none;}
    .plan_slide .slick-slide{margin: 0 10rem;}
    .plan_slide .slick-list{overflow: hidden; margin: 0 -10rem; padding: 0 !important;}
    .plan_btn a{margin-right: 0; width: 36px;}
}
@media all and (max-width:580px){
    .plan_top h2{font-size: 28rem;}
    .plan_top p{font-size: 17rem;}
    .p_item{border-radius: 30rem;}
    .progress{width: 48%;}
}


/* 생생 현장속으로 */
.cont3{position: relative; margin-bottom: 100rem; padding: 0 20rem;}
.cont3::before{position: absolute; content: ""; background: #e7edee; left: 0; top: 0; width: 100%; height: 50%; z-index: -1;}
.cont3 .wrap02{padding: 0; max-width: 1720rem; background: linear-gradient(90deg, #236fa3,#24638a, #054e7f); border-radius: 50rem 50rem 0 0;}
.cont3 .link{display: flex; align-items: center; justify-content: space-between;}
.cont3 .link li{width: calc(100% / 4); padding: 20rem 0; text-align: center; background: url('../img/main/dashed.png') no-repeat center right;}
.cont3 .link li:last-child{background: none;}
.cont3 .link li a{color: #fff; font-family: 'GANGWONSTATE'; font-size: 21rem; display: block;}
.cont3 .link li a span{padding-right: 46rem; background: url('../img/main/tab_arrow.png') no-repeat center right;}

.cont3 .news{background: #fff; border-radius: 50rem 50rem 0 0; padding-top: 50rem; position: relative;}
.cont3 .news::before{position: absolute; content: ""; background: #fff; box-shadow: 3px 10px 70px #093a4329; width: 100%; height: 80%; top: 0; z-index: -1;}
.news_tit{text-align: center; font-family: 'GANGWONSTATE'; margin-bottom: 50rem;}
.news_tit h2{font-size: 45rem;}
.news_tit h2 span{color: #034e81;}
.news_tit p{font-size: 21rem; color: #7a7a7a;}

.news_gal{position: relative;}
.gal_list{display: flex; justify-content: space-between;}
.gal_list > a{width: 27%; display: flex; align-items: center; position: relative; margin-bottom: 18rem;}
.gal_list > a .txt{width: calc(100% - 130rem); height: 100%; border-bottom: 1px solid #ddd; margin-left: -10rem; padding: 12rem 10rem 0 30rem;}
.gal_list > a .txt strong{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21rem; font-weight: 400;}
.gal_list > a .txt span{font-size: 16rem; color: #636363; font-weight: 300;}
.gal_list > a .img{border-radius: 16rem; position: relative; overflow: hidden; width: 110rem; height: 110rem;}
.gal_list > a .img img{width: 100%; height: 100%;}
.gal_list > a .img::before{position: absolute; content: ""; background: rgba(0,0,0,0.5) url('../img/main/gal_check.png') no-repeat center center; width: 100%; height: 100%; opacity: 0;}
.gal_list > a.on .img::before{opacity: 1;}
.gal_list > a.on strong{font-weight: 700;}

.gal_list .gal_cont{width: 70%; position: absolute; right: 0; top: 0; display: none;}
.gal_list > a.on + .gal_cont{display: block;}

.gal_list .gal_cont > p{position: relative; float: left; width: 633rem; height: 330rem; border-radius: 35rem; overflow: hidden; margin-right: 60rem;}
.gal_list .gal_cont > p::before{position: absolute; content: ""; width: 100%; height: 50%; bottom: 0; left: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.58));}
.gal_list .gal_cont > p img{width: 100%; height: 100%;}

.gal_list .gal_cont > div{width: calc(100% - 693rem); float: right; padding-right: 20rem;}
.gal_list .gal_cont > div h3{font-family: 'GANGWONSTATE'; font-size: 19rem; color: #207583; letter-spacing: 3px;}
.gal_list .gal_cont > div h4{font-size: 37rem;font-family: 'GANGWONSTATE'; line-height: 1.2; margin-top: 20rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word;}
.gal_list .gal_cont > div p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19rem; color: #7a7a7a; margin-top: 30rem;}
.gal_list .gal_cont > div a{width: 195rem; margin-top: 40rem; border: 1px solid #dedede; display: inline-block; padding: 9rem 20rem; font-size: 16rem; position: relative;}
.gal_list .gal_cont > div a span{font-weight: 600;}
.gal_list .gal_cont > div a::before{position: absolute; content: ""; background: url('../img/main/more.png') no-repeat; width: 16rem; height: 16rem; right: 20rem; top: 50%; transform: translateY(-50%); background-position-x: -16px;}

@media all and (max-width:1500px){
    .cont3 .news{padding-top: 35rem;}
    .news_tit h2{font-size: 36rem;}
    .news_tit p{font-size: 19rem;}
    .gal_list .gal_cont > div h4{font-size: 30rem;}
    .gal_list .gal_cont > p{width: 50%; margin-right: 0;}
    .gal_list .gal_cont > div{width: 45%;}
}
@media all and (max-width:1240px){
    .news_gal{display: flex; flex-wrap: wrap; justify-content: space-between;}
    .gal_list{display: flex;  width: 33%;  height: 450rem;}
    .gal_list > a{width: 100%; height: 100rem; justify-content: center;}
    .gal_list > a .img{width: 100rem; height: 90rem;}
    .gal_list > a .txt{width: calc(100% - 120rem);border-bottom: 0;}
    .gal_list > a .txt strong{font-size: 18rem;}
    .gal_list .gal_cont{width: 96%; top: 140rem; right: inherit; left: 20rem; padding: 30rem; background: #f9f9f9; border-radius: 50rem;}
    .gal_list .gal_cont > p{height: 280rem;}
}
@media all and (max-width:1120px){
    .cont3 .link li{padding: 15rem 0;}
    .cont3 .link li a{font-size: 18rem;}
}
@media all and (max-width:1023px){
    .cont3 .link{flex-wrap: wrap;}
    .cont3 .link li{width: 50%; text-align: left; padding: 15rem 18rem;}
    .cont3 .link li:nth-child(2){background: none;}
    .cont3 .link li:nth-child(3),
    .cont3 .link li:nth-child(4){padding-top: 3rem;}
    .cont3 .link li a span{display: block;}
}
@media all and (max-width:768px){
    .gal_list > a .txt{width: calc(100% - 100rem);}
    .gal_list > a .img{width: 90rem; height: 80rem;}
}
@media all and (max-width:750px){
    .news_tit{margin-bottom: 26rem;}
    .news_tit h2{font-size: 28rem;}
    .news_tit p{font-size: 17rem;}
    .gal_list{height: 200rem;}
    .gal_list > a{display: none;}
    .gal_list .gal_cont{top: 0;}
    .gal_list .gal_cont > p{height: 200rem;}
    .gal_list .gal_cont > div h4{font-size: 25rem;}
    .gal_list .gal_cont > div p{display: none;}
    .gal_list .gal_cont > div a{margin-top: 20rem;}
}
@media all and (max-width:580px){
    .cont3{margin-bottom: 50rem;}
    .cont3 .wrap02, .cont3 .news{border-radius: 30rem 30rem 0 0;}
    .gal_list .gal_cont{background: none; width: 100%; left: 0;}
    .cont3 .link li a{font-size: 16rem;}
    .cont3 .link li a span em{display: none;}
    .gal_list .gal_cont > p,
    .gal_list .gal_cont > p::before{width: 100%;}
    .gal_list{height: 400rem;}
    .gal_list .gal_cont > div{width: 100%; margin-top: 20rem; text-align: center; padding-right: 0;}
    .gal_list .gal_cont > div h3{font-size: 17rem;}
    .gal_list .gal_cont > div h4{margin-top: 10rem; font-size: 22rem;}
    .gal_list .gal_cont > div a{text-align: left;}
}