@media(max-width:990px) {
    .main {margin-top: 7rem; overflow: hidden;}
}

@media(max-width:768px) {
    .font-30 {font-size: 3.125rem;}   
    .font-20,
    .font-18 {font-size: 1.75rem;}  
    .font-16 {font-size: 1.5rem;} 
}

/* 슬라이드 - 공통 */
.swiper-button-next, .swiper-button-prev {position: inherit; width: fit-content; height: auto; margin-top: 0; color: #141414; z-index: 8;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}
.swiper-pagination {position: inherit;}
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled {opacity: 1;}

.swiperBtn-wrap {display: flex; align-items: center; gap: 2rem;}
.swiperBtn {display: flex; align-items: center;}

/* 일시정지 버튼 */
.playBtn {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 4; width: 100%; height: 100%;}
.playBtn > div {position: relative; width: 100%; height: 100%;}
.playBtn > div img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.playBtn .swiper-play {display: none;} 
.playBtn.on .swiper-play {display: block;} 
.playBtn .swiper-pause {display: block;} 
.playBtn.on .swiper-pause {display: none;}

/* 섹션 공통 */
.mainsection .tit .label {width: fit-content; padding: .375rem .5rem .125rem; border-radius: 4px;}

/* 메인슬라이드 */
#mainSlide .swiper-slide {overflow:hidden;-webkit-backface-visibility:hidden; backface-visibility:hidden;}
#mainSlide .swiperBtn-wrap {position: absolute; left: 50%; transform: translateX(-50%); bottom: 2rem; z-index: 2; width: 100%; justify-content: center;}
#mainSlide .swiperBtn {gap: 1.5rem; font-size: 1.125rem; font-weight: 600;}
#mainSlide .swiper-button-next, 
#mainSlide .swiper-button-prev { color: rgba(255,255,255,0.5);}
#mainSlide .swiper-button-next svg, 
#mainSlide .swiper-button-prev svg  {display: none;}

#mainSlide .swiper-pagination {color: rgba(255,255,255,0.5);}
#mainSlide .swiper-pagination .swiper-pagination-current {color: #fff;}

#mainSlide .control {position:relative}
#mainSlide .control .autoplay-progress {display:flex; align-items:center;justify-content:center; position:relative; width:46px; height:46px}
#mainSlide .control .autoplay-progress svg {z-index:3; width:100%; height:100%;stroke-width:2px; stroke:#fff; fill:none; stroke-dashoffset:calc(125.6 * (1 - var(--progress))); stroke-dasharray:125.6; transform:rotate(-90deg)}
#mainSlide .control .autoplay-progress .bg {position:absolute; width:42px; height:42px; border-radius:50%; border:3px solid rgba(255,255,255,.5)}

@media(max-width:768px) {
    #mainSlide .control {transform: scale(0.8);}
    #mainSlide .swiperBtn {font-size: 1.875rem; font-weight: 500;}
}

/* 인트로 */
#intro .tit img {width: 28.625rem;}

@media(max-width:768px) {
    #intro .font-30 {font-size: 2.625rem;}
}

@media(max-width:500px) {
    #intro .font-30 {font-size: 2rem;}
}

/* 뉴스 */
#news {overflow: hidden;}
#news .contBox {display: grid; grid-template-columns: repeat(2, 1fr);}

#news .cont {cursor: pointer; height: 37.5rem;}
#news .cont .txt {border: 1px solid #dddddd; padding: 2.25rem; position: relative;}
#news .cont .txt p {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
#news .cont .imgbox {overflow: hidden;}
#news .cont img {height: 100%; object-fit: cover; object-position: top; transition: 0.6s;}
#news .cont .date {position: absolute; left: 2.25rem; bottom: 2.25rem;}

#news .cont:hover img {transform: scale(1.05);}

#news .subtit {background-image: url("/img/main/news_titBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right bottom; color: #fff; padding: 2.25rem; display: flex; flex-direction: column; justify-content: space-between; cursor: auto;}

/* #news .mainCont > div,
#news .halfCont > div {height: 37.5rem;}  */

#news .halfCont > div > div {height: 50%;}
#news .halfCont .txt  {border-left: none;}

@media(max-width:990px) {
    #news .subtit {background-position: center 50%; aspect-ratio: 8 / 5;}
    #news .contBox {display: block;}
    #news .cont {flex-direction: column; width: 100%; height: auto;}
    #news .cont > div.width50 {width: 100%;}
    #news .cont .imgbox {aspect-ratio: 4/5;}
    #news .cont .date {position: initial; margin-top: 5rem;}
    #news .halfCont {flex-direction: column;}
    #news .halfCont > div > div {height: auto;}
}

@media(max-width:500px) {
    #news .subtit {background-position: 80% center;  aspect-ratio: 8 / 6;}
}

/* 유튜브 */
#ytb {overflow: hidden;}
#ytb .flow.aos-animate {animation: flowLeft 15s linear infinite; text-wrap: nowrap;}
#ytb h3 {padding-right: 2.5%;}
#ytb h3 span {display: inline-block; position: relative;}
#ytb h3 span:after {position: absolute; left: 50%; top: -2.5rem; transform: translateX(-50%); height: 100%; content: ""; background-repeat: no-repeat; background-size: contain;}
#ytb h3 span:nth-child(1):after {background-image: url("/img/main/txtPoint01.png"); width: 4.5rem;}
#ytb h3 span:nth-child(2):after {background-image: url("/img/main/txtPoint02.png"); width: 3.1875rem;}

#ytb .contBox {background-image: url("/img/main/ytbBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; margin-left: 2.5%; display: flex; align-items: center;}
#ytb .tit {padding-left : calc((97.5% - var(--layoutwidth)) / 2); width: 35%;}
#ytb .tit p {padding-left: 3rem; position: relative;}
#ytb .tit p:after {position: absolute; left: 0; top: 0; width: 2.125rem; height: 100%; background: url("/img/main/ytb_icon.png"); background-size: contain; background-repeat: no-repeat; content: "";}

#ytb .cont {width: 65%; color: #fff;}
#ytb .cont .swiper-slide {width: 20.5rem; cursor: pointer;}
#ytb .cont .swiper-slide:nth-child(odd) {margin-top: 3.75rem;}
#ytb .cont .imgbox {overflow: hidden; border-radius: 1.25rem; aspect-ratio: 32 / 57;}
#ytb .cont .imgbox img {height: 100%; object-fit: cover;}
#ytb .cont p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#ytb a {display: block; background: #e02f2f; color: #fff; padding: .625rem 1.5rem .5rem; border-radius: 4px; width: fit-content;}

@keyframes flowLeft {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media(min-width:1921px) {
    #ytb .tit  {padding-left: 10%;}
}

@media(max-width: 1880px) {
    #ytb .tit {padding-left: 7.5%;}
}

@media(max-width:990px) {
    #ytb .flow.aos-animate {animation: flowLeft 10s linear infinite;}
    #ytb .contBox {flex-direction: column; gap: 3.125rem; margin-left: 0;}
    #ytb .tit {width: 100%; text-align: center; padding-left: 0;}
    #ytb .tit p {padding-left: 0; padding-top: 3rem;}
    #ytb .tit p:after {left: 50%; transform: translateX(-50%); top: 0; width: 3rem;}
    #ytb a {margin: 1.5rem auto 0; padding: 1rem 1.5rem .5rem;}
    #ytb .cont {width: 100%; margin-left: 10%;}

    @keyframes flowLeft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
}

/* 블로그 */
#blog .contBox {display: flex; align-items: flex-start; padding-bottom: 3rem; margin-left: 2.5%;}
#blog .tit {padding-left : calc((97.5% - var(--layoutwidth)) / 2); width: 35%; position: relative; z-index: 1;}
#blog .cont {width: 65%; position: relative;}
#blog .cont:after {position: absolute; right: 0; top: 4rem; width: 115%; height: 26rem; background: #f2f4fa; content: ""; border-radius: 1.125rem 0 0 1.125rem;}
#blog .cont .imgbox {overflow: hidden; border-radius: 1.25rem; aspect-ratio: 1 / 1;}
#blog .cont .imgbox img {height: 100%; object-fit: cover;}
#blog .cont .swiper-slide {width: 20rem;}
#blog .cont p {padding-left: 2.5rem; position: relative; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
#blog .cont p:after {position: absolute; left: 0; top: 0; width: 1.625rem; height: 100%; background: url("/img/main/blog_icon.png"); background-repeat: no-repeat; background-size: contain; content: "";}

#blog .point {position: absolute; left: 0; top: 30%;}
#blog .point img {width: 10.5rem;}
#blog a {display: block; background: #32b15b; color: #fff; padding: .625rem 1.5rem .5rem; border-radius: 4px; width: fit-content;}

@media(min-width:1921px) {
    #blog .tit  {padding-left: 10%;}
    #blog .cont:after {width: 105%;}
}

@media(max-width:1880px) {
    #blog .point {top: 15%;}
    #blog .point img {width: 9rem;}
    #blog .tit {padding-left: 7.5%;}
}

@media(max-width: 1580px) {
    #blog .cont:after {width: 110%;}
}

@media(max-width:990px) {
    #blog .contBox {flex-direction: column; gap: 6.25rem; margin-left: 0; padding-bottom: 6rem;}
    #blog .cont:after {height: 30rem;}
    #blog .tit {width: 100%; text-align: center; padding-left: 0;}
    #blog .tit p {padding-left: 0; padding-top: 3rem;}
    #blog a {margin: 1.5rem auto 0; padding: 1rem 1.5rem .5rem;}
    #blog .cont {width: 100%; margin-left: 5%;}
    #blog .cont:after {border-radius: 0;}
}

@media(max-width:500px) {
    #blog .point {top: 10%;}
}

/* 함께한 순간들 */
#gallery .tit h2 span {background: url("/img/main/line.png"); background-repeat: no-repeat; background-position: center bottom; background-size: contain; display: inline-block;}
#gallery .flexList {--x-gap: 4px; --y-gap: 4px;}
#gallery .box {aspect-ratio: 1 / 1; overflow: hidden;}
#gallery .box img {width: 100%; height: 100%; object-fit: cover;}


/* 함께하는 한마디 */
#guest .contBox {max-width: 41rem; width: 100%; margin: 3.75rem auto 0; font-family: 'SUIT', sans-serif !important;}
#guest input,
#guest textarea {background: #ebebeb; padding: 1rem; border: none; box-shadow: none; font-family: 'SUIT', sans-serif !important;}
#guest input:focus,
#guest textarea:focus {box-shadow: none !important; border: none !important;}
#guest input::placeholder,
#guest textarea::placeholder {color: #8d8d8d;}

#guest .subBtn button {width: 100%; text-align: center; padding: 1.5rem 1rem 1rem; border: 2px solid var(--pointcolor); line-height: 1; color: var(--pointcolor);}
#guest form .subBtn button {background: var(--pointcolor); color: #fff;}

li.gb {background: #f7f7f7; padding: 2rem; border-radius: 2.125rem; letter-spacing: -.05em; font-weight: 500;}
li.gb button {margin-left: .5rem; margin-top: .25rem;}
li.gb button i {color: #000 !important;}

#lndMdl { position: fixed; display: none; width: 100%; height: 100vh; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 55; font-family: 'SUIT', sans-serif !important;}
#lndMdl.show { display: block; }
#lndMdl .cvr { position: absolute; width: inherit; height: inherit; background-color: rgba(0,0,0,0.5); }
#lndMdl .mdl { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 41rem; height: 100%; max-height: 80vh; overflow-y: scroll; border-radius: 1rem; z-index: 60; background: #fff;}
#lndMdl .mdl .mdlcls { position: absolute; top: .5rem; right: .75rem; transform: scale(1); cursor: pointer; }
#lndMdl .mdl::-webkit-scrollbar {display: none;}

.borderBtn { position: relative; display: inline-flex; padding: .75rem 1.5rem .5rem; border: 2px solid var(--pointcolor); border-radius: 2rem; overflow: hidden; }
.borderBtnLg { padding: 1.25rem 2rem 1rem; border-radius: 3rem; }
.borderBtn::before { position: absolute; content: ''; top: 0; left: 0; width: 0; height: 100%; border-radius: 0 1.5rem 1.5rem 0; background-color: var(--pointcolor); transition: .3s; z-index: 1; }
.borderBtn.point-bg::before { background-color: #fff; }
.borderBtn:hover::before { width: 100%; }
.borderBtn:hover span { color: #fff; z-index: 5; }
.borderBtn:hover svg { fill: #fff; z-index: 5; }
.borderBtn.point-bg:hover span { color: var(--pointcolor); }
.borderBtn.point-bg:hover svg { fill: var(--pointcolor); }

@media(max-width:990px) {
    #suggestion .tit-wrap, #suggestion img { width: 50%; }
}
@media(max-width:550px) {
    #suggestion .container .flex-between { flex-wrap: wrap; }
    #suggestion .tit-wrap, #suggestion img { width: 100%; }
    #suggestion img { margin-top: 3rem; }
}

/* 공략 */
#promise .wrap {display: flex; align-items: flex-end; gap: 2rem; margin-top: -13rem;}
#promise .swiperBtn {display: flex; align-items: center; justify-content: flex-end; width: fit-content; gap: 1.5rem; float: right;}
#promise .swiper-pagination {color: #a6a6a6; font-weight: 600;}
#promise .swiper-pagination .swiper-pagination-current {color: var(--pointcolor);} 
#promise .swiperBtn .arrow {font-size: 1.25rem; font-weight: 500; color: var(--pointcolor);}

#promise .swiper-slide img {width: 100%; height: 100%; object-fit: cover; border: 3px solid #0d3388; box-sizing: border-box;}

@media(max-width:1240px) {
    #promise .box.width65 {width: 55%;}
    #promise .box.width35 {width: 45%;}
}

@media(max-width:768px) {
    #promise .wrap {flex-direction: column; margin-top: 0; gap: 0;}
    #promise .box.width65 {width: 100%;}
    #promise .box.width35 {width: 100%; order: -1; margin-top: 3.5rem;}
    #promise .list {margin-top: 1rem; }
    #promise .list .swiper {display: flex; flex-direction: column;}
    #promise .swiperBtn {order: 2; margin: 2.5rem auto 0;}
    #promise .swiperBtn .arrow  {font-size: 1.75rem;}
}

/* 민선7기 */
#seven .wrap {display: flex; align-items: flex-end; gap: 2rem; margin-top: -13rem;}
#seven .tit {display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column;}
#seven .tit .label {width: fit-content; padding: .375rem .5rem .125rem; border-radius: 4px; }
#seven .swiperBtn {display: flex; align-items: center; justify-content: flex-end; width: fit-content; gap: 1.5rem; float: right;}
#seven .swiper-pagination {color: #a6a6a6; font-weight: 600;}
#seven .swiper-pagination .swiper-pagination-current {color: var(--pointcolor);} 
#seven .swiperBtn .arrow {font-size: 1.25rem; font-weight: 500; color: var(--pointcolor);}

#seven .swiper-slide img {width: 100%; height: 100%; object-fit: cover; border: 3px solid #0032af; box-sizing: border-box;}

@media(max-width:1240px) {
    #seven .box.width65 {width: 55%;}
    #seven .box.width35 {width: 45%;}
}

@media(max-width:768px) {
    #seven .tit {display: block; text-align: left;}
    #seven .wrap {flex-direction: column; margin-top: 0; gap: 0;}
    #seven .box.width65 {width: 100%;}
    #seven .box.width35 {width: 100%; order: -1; margin-top: 3.5rem;}
    #seven .list {margin-top: 1rem; }
    #seven .list .swiper {display: flex; flex-direction: column;}
    #seven .swiperBtn {order: 2; margin: 2.5rem auto 0;}
    #seven .swiperBtn .arrow  {font-size: 1.75rem;}

}

/* 서은숙 응원하기 */
#cheerUp .tit {display: flex; align-items: flex-end; justify-content: space-between; padding: 0 5%;}
#cheerUp .tit img {width: 17rem;}
#cheerUp .cont {background: #f2f4fa; padding: 5rem 10%; border-radius: 20px;}
#cheerUp .cont > .flex-between {gap: 3.5rem;}
#cheerUp .cont .img-box {border: 2px solid var(--pointcolor); padding: 2.5rem 5rem; border-radius: 1.25rem;}
#cheerUp .cont .img-box img {width: 13.5rem;}
#cheerUp a {width: 100%; background: var(--pointcolor); color: #fff; padding: 1.5rem 1rem 1rem; display: block; border-radius: 1.25rem; border: 2px solid var(--pointcolor); transition: .3s;}
#cheerUp a:hover {background: #fff; color: var(--pointcolor);}

@media(max-width:768px) {
    #cheerUp .cont {padding: 5rem 5%;}
    #cheerUp a {border-radius: 100px; font-size: 2.75rem;}
}

@media(max-width:500px) {
    #cheerUp .tit img {width: 15rem;}
}
#call119 > .container { max-width: 1840px; }
#call119 > .container > .flexList { --x-gap: .0125rem; --y-gap: .0125rem; }
#call119 > .container > .flexList > .box { position: relative; }
#call119 > .container > .flexList .box.left .content { position: absolute; left: 50%; top: 30%; transform: translate(-50%,-30%); z-index: 10; }
#call119 > .container > .flexList .box.left .content .tit { padding: 0 5rem; }
#call119 > .container > .flexList .box.left .content h2 { white-space: nowrap; }
#call119 > .container > .flexList .box.left .content h2 i { font-style: oblique; }
#call119 > .container > .flexList .box.right .content { position: absolute; min-width: 85%; left: 50%; bottom: 10%; transform: translate(-50%,10%); z-index: 10; }
#call119 .issueList { --x-gap: .5rem; --y-gap: .5rem; }
#call119 .issueList .box { padding: 2rem 1.5rem; background-color: #fff; border-radius: 1rem; aspect-ratio: 1/1; }
#call119 .issueList .box h3 { padding: 1rem 1rem .5rem 1rem; border-radius: .5rem; line-height: 1.2; background-color: #eff1ff; }
#call119 .processBox { white-space: nowrap; }
#call119 .processBox h3 { width: fit-content; padding: 1rem 1.5rem .5rem; background-color: var(--pointcolor); border-radius: 0 1rem 0 0; }
#call119 .processList { position: relative; background-color: #fff; border: 2px solid var(--pointcolor); border-radius: 0 1rem 1rem 1rem; }
#call119 .processList .box { position: relative; padding: 2rem 1.5rem; }
#call119 .processList .box h4 .num { margin-right: .5rem; padding: .5rem .25rem .25rem .25rem; line-height: 1; background-color: #eff1ff; border-radius: .5rem; }
#call119 .processList .box .step_arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-90deg); }
#call119 .processList .woman { position: absolute; right: 1rem; top: -200px; z-index: -1; }
@media(max-width:768px) {
    #call119 .font-50 { font-size: 2.95rem; }
    #call119 .font-24 { font-size: 1.75rem; }
    #call119 .font-20 { font-size: 1.6rem; }
    #call119 .font-18 { font-size: 1.5rem; }
    #call119 .font-15 { font-size: 1.15rem; }
    #call119 > .container { max-width: 95%; }
    #call119 > .container > .flexList .box.left .content { width: 90%; }
    #call119 > .container > .flexList .box.left .content .tit { padding: 0; text-align: left; }
    #call119 .issueList .box { display: flex; align-items: center; padding: 1rem; aspect-ratio: auto; }
    #call119 .issueList .box h3 { height: 100%; align-items: center; padding: 0 1rem; margin-right: 2rem; }
    #call119 .issueList .box h3 img { max-height: 16px; }
    #call119 .processList { padding: 3rem; }
    #call119 .processList .box { padding: .75rem 1.5rem; }
    #call119 .processList .woman { max-width: 100px; top: -110px; }
}