@charset "UTF-8";

@import url("https://img.seoul.co.kr/css/webfont_pretendard.css?ver=001");

/*
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-dynamic-subset.css');
*/

/*
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
	font-display: fallback;
    src: local('Pretendard Medium'), local('Pretendard-Regular'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'),
		url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
	font-display: fallback;
    src: local('Pretendard Bold'), local('Pretendard-Bold'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'),
		url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
}
*/

/* reset css */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

caption {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
}

ol,
li,
dl,
dt,
dd {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a,
a:hover,
a:active,
a:link,
a:visited {
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

a {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

img {
  width: 100%;
  vertical-align: middle;
}

:root {
  --bg-primary-100: #f26930;
  --bg-b-bg: #262323;
  --text-gray-100: #f8f8f8;
  --text-gray-200: #f4f4f4;
  --text-gray-300: #eee;
  --text-gray-400: #ddd;
  --text-gray-500: #999;
  --text-gray-600: #666;
  --text-gray-700: #444;
  --text-black: #111;
  --text-white: #fff;
  --etc-notice: #f00;
  --etc-notice-blue: #3a84ff;
  --dang-deo: #003b96;
  --dang-gukmin: #e61e2b;
  --dang-gaehyeok: #ff7210;
  --dang-joguk: #0073cf;
  --dang-jeongui: #ffd035;
  --dang-yeoseong: #6400aa;
  --dang-jayu: #e24a49;
  --dang-no: #a5a5a5;
  --dang-jinbo: #e60020;
  --dang-yeonhap: #ec008b;

  --dang-100: #003b96;
  --dang-200: #e61e2b;
  --dang-5070: #ff7210;
  --dang-5077: #0073cf;
  --dang-730: #ffd035;
  --dang-5046: #6400aa;
  --dang-3040: #e24a49;
  --dang-9999: #a5a5a5;
  --dang-5010: #e60020;  
  --dang-4080: #ec008b;      
}

/* 당컬러 */
.dang-deo {
  background: var(--dang-deo);
}

.dang-gukmin {
  background: var(--dang-gukmin);
}

.dang-gaehyeok {
  background: var(--dang-gaehyeok);
}

.dang-joguk {
  background: var(--dang-joguk);
}

.dang-jeongui {
  background: var(--dang-jeongui);
}

.dang-yeoseong {
  background: var(--dang-yeoseong);
}

.dang-jayu {
  background: var(--dang-jayu);
}

.dang-no {
  background: var(--dang-no);
}

.dang-jinbo {
  background: var(--dang-jinbo);
}

.dang-yeonhap {
  background: var(--dang-yeonhap);
}


/* 당컬러 id class  */
.dang-100 {
  background: var(--dang-100);
}

.dang-200 {
  background: var(--dang-200);
}

.dang-5070 {
  background: var(--dang-5070);
}

.dang-5077 {
  background: var(--dang-5077);
}

.dang-730 {
  background: var(--dang-730);
}

.dang-5046 {
  background: var(--dang-5046);
}

.dang-3040 {
  background: var(--dang-3040);
}

.dang-9999 {
  background: var(--dang-9999);
}

.dang-5010 {
  background: var(--dang-5010);
}

.dang-4080 {
  background: var(--dang-4080);
}


/* headline text */
.h44 {
  color: var(--text-black, #111);
  /* PC/H_44 */
  font-family: Pretendard;
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.44px;
}

.h38 {
  color: var(--text-black, #111);
  /* PC/H_38 */
  font-family: Pretendard;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.38px;
}

.h32 {
  color: var(--text-black, #111);
  /* PC/H_32 */
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.32px;
}

.h28 {
  color: var(--text-black, #111);
  /* PC/H_28 */
  font-family: Pretendard;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.28px;
}

.h24 {
  color: var(--text-black, #111);
  /* PC/H_24 */
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.24px;
}

.h20 {
  color: var(--text-black, #111);
  /* PC/H_20 */
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.2px;
}

.h18 {
  color: var(--text-black, #111);
  /* PC/H_18 */
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.18px;
}

.h16 {
  color: var(--text-black, #111);
  /* PC/H_16 */
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.16px;
}

.h15 {
  color: var(--text-black, #111);
  /* PC/H_15 */
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.15px;
}

.h14 {
  color: var(--text-black, #111);
  /* PC/H_14 */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.14px;
}

.e14 {
  color: var(--text-black, #111);
  /* PC/EN_14 */
  /*font-family: Montserrat;*/
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: -0.28px;
}

/* body text */
.body20 {
  color: var(--text-black, #111);
  /* PC/body_20 */
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: -0.2px;
}

.body19 {
  color: var(--text-black, #111);
  /* PC/body_18 */
  font-family: Pretendard;
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: -0.19px;
}

.body18 {
  color: var(--text-black, #111);
  /* PC/body_18 */
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: -0.18px;
}

.body16 {
  color: var(--text-black, #111);
  /* PC/body_16 */
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: -0.16px;
}

.body15 {
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: -0.15px;
}

.body14 {
  color: var(--text-black, #111);
  /* PC/body_14 */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: -0.14px;
}

.body13 {
  color: var(--text-black, #111);
  /* PC/body_13 */
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: -0.13px;
}

.colorPrimary {
  color: var(--bg-primary-100);
}

.colorRed {
  color: var(--etc-notice);
}

.color111 {
  color: var(--text-black);
}

.color000 {
  color: var(--bg-b-bg);
}

.colorFFF {
  color: var(--text-white);
}

.color700 {
  color: var(--text-gray-700);
}

.color600 {
  color: var(--text-gray-600);
}

.color500 {
  color: var(--text-gray-500);
}

.color400 {
  color: var(--text-gray-400);
}

.color300 {
  color: var(--text-gray-300);
}

.color200 {
  color: var(--text-gray-200);
}

.color100 {
  color: var(--text-gray-100);
}

.layoutWrap {
  margin: 0 auto;
  max-width: 1280px;
}

.marginLayout {
  margin: 80px auto;
}

.column2-layout {
  display: flex;
  gap: 40px;
  margin: 60px 0 80px;
}

.column2-layout .rightSide {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.column2-layout .leftSide .section,
.column2-layout .rightSide .section {
  margin: 0;
}

/* ---- header ---- */
header {
  background: linear-gradient(60deg, #282828 13.4%, #7d635c 86.6%), url("https://img.seoul.co.kr/img/election2026/header-bg.png");
  background-blend-mode: hard-light;
  background-repeat: no-repeat;
  background-position: 74% 0;
  border-bottom: 1px solid var(--text-gray-400);
  overflow: hidden;
}

.headerWrap {
  position: relative;
  height: 220px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1280px;
  justify-content: space-between;
}

.header {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 37px 0 23px;
}

.headerLogoWrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.headerlogo {
  display: block;
  width: 96px;
}

.headerTit {
  font-size: 50px;
  font-style: normal;
  font-weight: 800;
  line-height: 60px; /* 120% */
  letter-spacing: -0.5px;
  background: linear-gradient(270deg, #e5bd7f 12.02%, #c0945f 29%, #f0be79 47%, #ffebc3 57%, #f6dba6 76%, #bc8f57 93%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

nav .voteMenuList {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 80px;
  padding: 0 0 20px;
}
nav .voteMenuList li {
  flex-shrink: 0;
  position: relative;
}
nav .voteMenuList .menu:hover,
nav .voteMenuList .menu.on {
  transition: all 0.25s ease-in-out;
  position: relative;
  color: var(--bg-primary-100);
  font-weight: 700;
}

/* .bgImage {
  z-index: -1;
  z-index: 0;
  position: absolute;
  top: 0;
  right: -170px;
  width: 100%;
  height: 100%;
  background: url("https://img.seoul.co.kr/img/election2026/header-bg.png") no-repeat 70% center;
  background-blend-mode: overlay;
} */

.imageWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imageWrap img {
  width: 100%;
}
.dDayWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.dDayWrap .dDayTit {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-self: center;
  padding: 6px 18px;
  border-radius: 100px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    4px 3px 4px 4px rgba(0, 0, 0, 0.06),
    1px 2px 0px 0 rgba(255, 255, 255, 0.1) inset,
    -1px -2px 0px 0 rgba(255, 255, 255, 0.1) inset;
}
/* ---- header ---- */

section .layoutBorder {
  margin-bottom: 36px;
}

/* mainTop  */

.section-mainTop .articleList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section-mainTop .articleBox {
  position: relative;
  width: 410px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-mainTop li .articleImage {
  width: 410px;
  height: 273px;
  border-radius: 12px;
  overflow: hidden;
}

.section-mainTop .articleTime {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.section-mainTop .articleTime .icon {
  display: block;
  width: 18px;
  height: 18px;
  background: url("https://img.seoul.co.kr/img/election2026/iconset.png") no-repeat;
  background-position: -261px -45px;
}

.section-mainTop .articleTime:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 80px;
  content: "";
  display: block;
  height: 1px;
  width: 332px;
  background: var(--text-gray-400);
}

.section-mainTop li .articleTitle {
  line-height:  1.3em;
}
/* 최신뉴스 */

/* voteNewest */
.voteNewest {
  display: flex;
  flex-direction: column;
  width: 940px;
}

.voteNewest .articleBox {
  display: flex;
  gap: 40px;
}

.voteNewest .articleBox.noImage .articleContent {
  display: -webkit-box;
  margin-top: 12px;
  margin-bottom: 32px;
}

.voteNewest li {
  padding: 36px 0;
  border-bottom: 1px solid var(--text-gray-300);
}

.voteNewest li:first-child {
  padding-top: 0;
}

.voteNewest li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.voteNewest .articleImageWrap {
  flex-shrink: 0;
}
.voteNewest .articleBox .articleImage {
  width: 230px;
  height: 153px;
  overflow: hidden;
  border-radius: 12px;
}

.articleContentTop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voteNewest .articleContentWrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}

/* .voteNewest .articleTitle {
  overflow: unset;
  text-overflow: unset;
} */

.articleTitle { word-break: keep-all; }

.voteNewest .badge {
  display: inline-block;
  vertical-align: middle;
  padding-right: 12px;
}

.voteNewest .articleTitle .textTit {
  display: inline;
  vertical-align: middle;
}

.voteNewest .articleInfo {
  display: flex;
  gap: 25px;
}

.voteNewest .articleInfo span {
  display: block;
}
.voteNewest .articleInfo .writeDate {
  position: relative;
}

/* 포토뉴스 */

.slideWrap {
  position: relative;
}

#module-2-slide {
  width: 300px;
}
#module-2-slide li,
#module-2-slide .moduleContentBox {
  width: 300px;
}

#module-2-slide .moduleContentBox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#module-2-slide .owl-dots {
  display: none;
}

.module-2 .arrowBtnWrap {
  margin-top: 4px;
}

.module-2 .moduleImage {
  display: flex;
  align-items: center;
  justify-self: center;
  overflow: hidden;
  border-radius: 12px;
  width: 300px;
  height: 266px;
}
.module-2 .moduleImage img {
  height: 100%;
  width: auto;
}

#module-2-slide .owl-dots {
  display: none;
}

/* 주요일정 */

.section-schedule .sectionTit {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-b-bg);
  height: 50px;
  border-radius: 8px;
}
.section-schedule .wrap {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.timeline-item {
  display: flex;
  gap: 20px;
  position: relative;
  padding-bottom: 30px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #333;
  z-index: 0;
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-item .indicator {
  position: relative;
  z-index: 1;
}
.timeline-item .indicator .iconWrap,
.timeline-item .indicator .icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
.timeline-item:nth-child(2)::before {
  background-color: #ff6b35;
}

.timeline-item:nth-child(3) .iconWrap {
  background: var(--bg-primary-100);
}
*/

.timeline-item:nth-child(4)::before {
  background-color: #ff6b35;
}

.timeline-item:last-child .iconWrap {
  background: var(--bg-primary-100);
}


.timeline-item .iconWrap {
  background: var(--bg-b-bg);
}

.timeline-item .indicator .icon {
  display: block;
}

.timeline-item:nth-child(1) .icon,
.timeline-item:nth-child(2) .icon {
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: 0 0;
}

.timeline-item:nth-child(3) .icon {
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: -56px 0px;
}

.timeline-item:nth-child(4) .icon {
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: -112px 0px;
}

.timeline-item:nth-child(5) .icon {
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: -168px 0px;
}

.status-active .icon {
  background-color: #ff6b35;
}

.content-card {
  box-sizing: border-box;
  min-width: 242px;
  flex: 1;
  background: white;
  border: 1px solid var(--text-gray-400);
  border-radius: 8px;
  padding: 13px 18px;
}

.content-card .leftSide {
  display: flex;
  align-items: center;
  gap: 6px;
}

.content-card .leftSide .icon {
  display: block;
  width: 16px;
  height: 16px;
  background: url("https://img.seoul.co.kr/img/election2026/iconset.png") no-repeat;
  background-position: -10px -46px;
}

.status-active .content-card {
  border: 2px solid #ff6b35;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-done .state {
  display: block;
  width: 40px;
  height: 22px;
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: -45px -44px;
}

.status-active .state {
  display: block;
  width: 53px;
  height: 22px;
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: -92px -44px;
}

/* 시ㆍ도지사 후보자 정보 */

.areaBtn {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.areaBtn li {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: 1px solid var(--text-gray-400);
  border-radius: 6px;
  box-sizing: border-box;
  min-width: 140px;
}

.areaBtn li.focus {
  color: var(--text-white);
  background: var(--bg-b-bg);
}

.candidateWrap {
  position: relative;
  margin-top: 36px;
  margin-bottom: 10px;
}

.cadidateBox {
  width: 300px;
  border-radius: 12px;
  box-sizing: border-box;
}

.cadidateBox .topArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eff1f9;
  border: 1px solid #eff1f9;
  padding: 24px 0 20px;
  /* border-bottom: 5px solid #003b96; */
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}
.dangline {
  height: 5px;
  width: 100%;
}

.candidateWrap .personImage {
  /* width: 132px;
  height: 176px; */
  width: 120px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-gray-300);
  border-radius: 15px;
  overflow: hidden;
}

.candidateWrap .personImage img {
  /* width: 100%;
  height: auto; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.candidateWrap .dangTitle {
  display: inline-flex;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 1px 12px;
  height: 28px;
}

.candidateWrap .textInfo {
  margin-top: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.candidateWrap .contentArea {
  border: 1px solid var(--text-gray-400);
  border-top: 0;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.candidateWrap .contentArea ul {
  padding: 18px 18px 22px 9px;
  min-height: 258px;
}
.candidateWrap .contentArea ul li {
  position: relative;
  padding-left: 12px;
}
.candidateWrap .contentArea ul li:before {
  position: absolute;
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 5px;
  background: var(--bg-b-bg);
  top: 11px;
  left: 0;
}

/* 지난 지방선거 결과 */

.section-result2022 .sectionTit {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-b-bg);
  height: 54px;
  padding: 0 20px;
  border-radius: 8px;
}

.section-result2022 .sectionTit .icon {
  display: block;
  width: 20px;
  height: 20px;
  background: url("https://img.seoul.co.kr/img/election2026/iconset.png") no-repeat;
  background-position: -154px -44px;
}

.section-result2022 .sectionTit div:first-child {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lastResultChartList {
  display: flex;
  justify-content: space-between;
  padding: 60px 0 20px;
}
.lastResultChartList .chartImg {
  width: auto;
  height: 185px;
}

.lastResultChartList .chartImg img {
  height: 100%;
  width: auto;
}

.legendList {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 20px;
  border-top: 1px solid var(--text-gray-400);
  padding-top: 20px;
}

.legendBox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legendBox .dangColor {
  width: 18px;
  height: 18px;
  border-radius: 10px;
}

/* 여론조사 */

.section-poll .articleList {
  display: flex;
  justify-content: space-between;
}

.section-poll .articleBox {
  position: relative;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-poll li .articleImage {
  width: 300px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
}

.section-poll .articleTime {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.articleTime .icon {
  display: block;
  width: 18px;
  height: 18px;
  background: url("https://img.seoul.co.kr/img/election2026/iconset.png") no-repeat;
  background-position: -261px -45px;
}

.section-poll .articleTime:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60px;
  content: "";
  display: block;
  height: 1px;
  width: 236px;
  background: var(--text-gray-400);
}

/* 알쓸지잡 */
.bgColor {
  background: #eff1f9;
  padding: 50px 0 100px;
  width: 100%;
  overflow: hidden;
}
.cardBoxList {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}

.flip-card {
  cursor: pointer;
  background-color: transparent;
  width: 195px;
  height: 350px;
  perspective: 1000px; /* 3D 깊이감 유지 */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 가속도 */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  border-radius: 12px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotateX(0deg);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

.flip-card-front .cardBox:after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 27px;
  height: 27px;
  background: url("https://img.seoul.co.kr/img/election2026/iconset.png") no-repeat;
  background-position: -226px -5px;
}

.flip-card-back {
  background-color: var(--text-white);
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  border-radius: 12px;
  z-index: 1;
  overflow: hidden;
}
.flip-card-back .cardBox .answer {
  position: relative;
}
.flip-card-back .cardBox .answer:after {
  content: "";
  display: block;
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 32px;
  height: 30px;
  background: url("https://img.seoul.co.kr/img/election2026/iconset.png") no-repeat;
  background-position: -274px -5px;
}

.cardBox {
  box-sizing: border-box;
  width: 195px;
  height: 350px;
  border-radius: 12px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cardImg {
  width: 88px;
  height: auto;
}

.cardImg img {
  width: 100%;
  height: auto;
}

.cardBox .cardTitle {
  border-top: 1px solid rgba(255, 255, 255, 0.37);
  padding-top: 30px;
  margin-top: 30px;
}

/*
.cardBoxList li:nth-child(odd) .flip-card-front .cardBox {
  background: #374674;
}

.cardBoxList li:nth-child(even) .flip-card-front .cardBox {
  background: #00a5ad;
}
*/

.cardBoxList li:nth-child(3n+1) .flip-card-front .cardBox {
  background: #374674;
}

.cardBoxList li:nth-child(3n+2) .flip-card-front .cardBox {
  background: #00a5ad;
}

.cardBoxList li:nth-child(3n) .flip-card-front .cardBox {
  background: #1A6DBA;
}

.flip-card-back .cardBox {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.goMoreInfo {
  border-radius: 15px;
  padding: 4px 14px;
  background: var(--bg-b-bg);
}

/* 공통 */
.owl-btn-small-w {
  display: flex;
  align-items: center;
  gap: 12px;
}

.owl-btn-small-w .numcount span {
  vertical-align: sub;
}

.owl-btn-small-w .custom-prev,
.owl-btn-small-w .custom-next {
  cursor: pointer;
  width: 26px;
  height: 26px;
}
.owl-btn-small-w .custom-prev:before {
  content: "";
  opacity: 1;
  position: absolute;
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: -182px -39px;
  width: 30px;
  height: 30px;
}

.owl-btn-small-w .custom-next:before {
  content: "";
  opacity: 1;
  position: absolute;
  background: url(https://img.seoul.co.kr/img/election2026/iconset.png) no-repeat;
  background-position: -222px -39px;
  width: 30px;
  height: 30px;
}

.owl-btn-small-b .custom-prev:before {
  content: "";
  opacity: 1;
  position: absolute;
  background: url(https://img.seoul.co.kr/img/election2025/vote2025-icon.png) no-repeat;
  background-position: -72px -12px;
  width: 26px;
  height: 26px;
}

.owl-btn-small-b .custom-next:before {
  content: "";
  opacity: 1;
  position: absolute;
  background: url(https://img.seoul.co.kr/img/election2025/vote2025-icon.png) no-repeat;
  background-position: -107px -12px;
  width: 26px;
  height: 26px;
}

.owl-btn-large .owl-prev {
  border: 0;
  background: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: -80px;
  transform: translateY(-50%);
  transition: all 0.3s;
  width: 50px;
  height: 50px;
}

.owl-btn-large .owl-prev:before {
  content: "";
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://img.seoul.co.kr/img/election2025/vote2025-icon.png") no-repeat;
  background-position: -144px 0;
  width: 50px;
  height: 50px;
}

.owl-btn-large .owl-next {
  border: 0;
  background: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  right: -80px;
  width: 50px;
  height: 50px;
}

.owl-btn-large .owl-next:before {
  content: "";
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://img.seoul.co.kr/img/election2025/vote2025-icon.png") no-repeat;
  background-position: -206px 0;
  width: 50px;
  height: 50px;
}

.lineclamp1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4em;
}

.lineclamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 라인수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  /* max-height: 2.8em; */
  /* text-align:left; */
}

.lineclamp3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 라인수 */
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  /* max-height: 4.2em; */
  text-overflow: ellipsis;
}

.lineclamp4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 라인수 */
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* selectbox */

.labelBox {
  display: none;
}

.select-box {
  position: relative;
  width: 100%;
  user-select: none;
}

.select-box select {
  display: none;
}

.select-box.active {
  box-shadow: 0 8px 20px 0 rgba(0, 20, 55, 0.16);
}

.select-trigger {
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 145%;
  /* 20.3px */
  letter-spacing: -0.35px;
  color: var(--text-gray-500);
}

.select-trigger.selected {
  color: var(--text-black);
}

.select-trigger.disabled {
  background-color: var(--text-gray-300);
}

.select-box.active .select-trigger {
  border: 1px solid var(--text-gray-700);
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 1000;
  position: relative;
}

.select-trigger:after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  color: #999;
  transition: transform 0.3s;
  background: url("https://img.seoul.co.kr/img/company/subscribe/2026/arrow.png") calc(100% - 10px) center no-repeat;
  background-size: 20px;
  width: 40px;
  height: 40px;
}

.select-box.active .select-trigger:after {
  transform: translateY(-50%) rotate(0deg);
}

.select-options {
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: calc(100%);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--text-gray-700);
  border-radius: 6px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  z-index: 100;
  margin: 0;
  list-style: none;
  box-shadow: 0 8px 20px 0 rgba(0, 20, 55, 0.16);
  max-height: 150px;
  overflow-y: auto;
}

.select-options li {
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
  /* 20.3px */
  letter-spacing: -0.35px;
}

/* .select-options li:hover {
    background: #f8f9fa;
    color: var(--text-black);
} */

.select-options li:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.select-box.active .select-options {
  display: block;
  border-top: 1px solid #e5e5ec;
}

.onlyPC {
  display: block;
}

.onlyMO {
  display: none;
}

.beforeImg1,
.beforeImg2,
.beforeImg3,
.beforeImg4,
.ctgDragbox,
.navDragbox {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.beforeImg1::-webkit-scrollbar,
.beforeImg2::-webkit-scrollbar,
.beforeImg3::-webkit-scrollbar,
.beforeImg4::-webkit-scrollbar,
.ctgDragbox::-webkit-scrollbar,
.navDragbox::-webkit-scrollbar {
  display: none;
}

.beforeImg1.active,
.beforeImg2.active,
.beforeImg3.active,
.beforeImg4.active,
.ctgDragbox.active,
.navDragbox.active {
  cursor: grabbing;
}

/* 지방선거 A to Z */

/*아코디언 메뉴*/
.section-subPage .titleArea {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faqSection .infoText {
  margin-top: 50px;
}

.faqSection .titleArea {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  text-align: center;
  margin: 50px 0;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--bg-primary-100);
}
.section-subPage .sectionTitle,
.faqSection .sectionTitle {
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 62px; /* 129.167% */
  letter-spacing: -0.48px;
}
.faqSection .qnaCtgList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 50px 0;
}
.faqSection .qnaCtgList li {
  flex-shrink: 0;
  box-sizing: border-box;
  cursor: pointer;
  padding: 10px 64px;
  border-radius: 50px;
  border: 1px solid var(--text-gray-400);
}
.faqSection .qnaCtgList li.on {
  background: var(--bg-primary-100);
  color: var(--text-white);
  border: 1px solid var(--bg-primary-100);
}

.faqSection {
  margin: 60px auto 100px;
}

.faqSection .accordionList {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.faqSection .accordionList .item {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  /* 177.778% */
  letter-spacing: -0.18px;
}

.faqSection .questionAnswer {
  padding: 50px 32px 30px;
}

.faqSection .questionAnswer .answerWrap {
  display: flex;
  gap: 18px;
}

.faqSection .questionTit {
  box-sizing: border-box;
  border: 1px solid var(--text-gray-300);
  background: var(--text-white);
  border-radius: 18px;
  padding: 34px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.faqSection .questionTit:hover {
  transition: all 0.3s ease-in-out;
  border: 1px solid var(--text-gray-500);
}

.faqSection .questionTit .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url("https://img.seoul.co.kr/img/recruit/recruit-pc-set.png") center no-repeat;
  background-position: -38px -90px;
  transition: all 0.3s ease-in-out;
}

.faqSection .questionTit .icon.close {
  transform: rotate(180deg);
}

.faqSection .questionTit .leftSide {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}

.faqSection .questionAnswer {
  position: relative;
  z-index: -1;
  display: none;
  background: #f5f6f7;
  padding: 60px 32px 40px;
  margin-top: -20px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* 역대 지방선거 */

.section-lastChart {
  margin-bottom: 100px;
}
.section-lastChart .titleWrap {
  margin-top: 50px;
  margin-bottom: 40px;
}
.section-lastChart .sectionTitle {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.section-lastChart .graphList {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.section-lastChart .infoText {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}        

.mainTopBgColor {
  padding: 50px 0 50px;
}
/*
footer {
  display: flex;
  align-items: center;
  padding: 63px;
  background: var(--text-black);
}
*/
.voteFooter {
    display: flex;
    align-items: center;
    padding: 63px;
    background: var(--text-black);
}


@media screen and (max-width: 1450px) {
  body {
    min-width: 1280px;
  }

  .bgColor,
  header {
    width: 100%;
    min-width: 100%;
  }

  .owl-btn-large .owl-prev,
  .owl-btn-large .owl-next {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .layoutTitle {
    padding-top: 12px;
  }

  .layoutBorder:before {
    height: 3px;
  }

  /* icon */

  .section-mainTop .articleTime .icon {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -260px -45px;
    background-size: 308px;
  }

  .blockTitle a.arrowBg:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: url(https://imgmo.seoul.co.kr/img/n24/seoulIcon-mo.webp) no-repeat;
    background-position: -29px -90px;
    background-size: 772px;
    width: 11px;
    height: 20px;
  }

  .timeline-item:nth-child(1) .icon,
  .timeline-item:nth-child(2) .icon {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: 0 0;
    background-size: 308px;
  }

  .timeline-item:nth-child(3) .icon {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -57px 0;
    background-size: 308px;
  }

  .timeline-item:nth-child(4) .icon {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -112px 0;
    background-size: 308px;
  }

  .timeline-item:nth-child(5) .icon {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -168px 0;
    background-size: 308px;
  }

  .content-card .leftSide .icon {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -10px -45px;
    background-size: 308px;
  }

  .status-done .state {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -44px -43px;
    background-size: 308px;
  }

  .status-active .state {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -92px -43px;
    background-size: 308px;
  }

  .section-result2022 .sectionTit .icon {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -154px -45px;
    background-size: 308px;
  }

  .flip-card-front .cardBox:after {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -226px -4px;
    background-size: 308px;
  }

  .flip-card-back .cardBox .answer:after {
    background: url("https://img.seoul.co.kr/img/election2026/iconset-mo.png") no-repeat;
    background-position: -275px -4px;
    background-size: 308px;
  }

  .orderChange {
    display: flex;
    flex-direction: column;
  }

  .orderChange .marginLayout:nth-child(1) {
    order: 2;
  }

  .orderChange .marginLayout:nth-child(2) {
    order: 1;
    margin: 0 auto;
  }

  .onlyPC {
    display: none;
  }

  .onlyMO {
    display: block;
  }

  body {
    width: 100%;
    min-width: 100%;
  }

  .bgColor header {
    width: calc(100% - 37px);
  }

  .layoutWrap {
    width: calc(100% - 37px);
  }

  /* header */
  .headerLogoWrap {
    gap: 6px;
  }
  header {
    background-size: contain;
    background-position: 92% 0;
  }
  .header {
    padding: 20px 19px 0 18px;
  }

  .headerWrap {
    height: 144px;
  }
  .headerTit {
    font-size: 25px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 37.5px */
    letter-spacing: -0.25px;
  }
  nav .voteMenuList {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 162.5% */
    letter-spacing: -0.16px;
    gap: 24px;
    padding: 0 19px 10px 18px;
  }

  .dDayWrap {
    margin-top: 20px;
  }
  .dDaySub {
    display: none;
  }
  .dDayWrap .dDayTit {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 150% */
    letter-spacing: -0.2px;
    box-shadow:
      4px 3px 4px 4px rgba(0, 0, 0, 0.06),
      1px 1px 0px 0 rgba(255, 255, 255, 0.1) inset,
      -1px -1px 0px 0 rgba(255, 255, 255, 0.1) inset;
  }

  /* layout */

  .marginLayout {
    margin: 40px auto;
  }
  .column2-layout {
    flex-direction: column;
    margin: 0;
  }

  section .layoutBorder {
    margin-bottom: 24px;
  }

  .blockTitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 162.5% */
    letter-spacing: -0.16px;
  }

  /* 최신뉴스  */

  .voteNewest {
    width: 100%;
  }
  .voteNewest .articleBox {
    gap: 16px;
  }

  .voteNewest li {
    padding: 16px 0;
  }

  .voteNewest .articleTitle .textTit {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 166.667% */
    letter-spacing: -0.18px;
  }

  .voteNewest .articleBox .articleImage {
    width: 106px;
    height: 106px;
  }

  .voteNewest .articleBox .articleImage img {
    height: 100%;
    width: auto;
  }

  .voteNewest .articleContent {
    display: none;
  }

  .voteNewest .articleInfo .writeDate {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.13px;
  }

  .column2-layout .rightSide {
    width: 100%;
    gap: 40px;
  }

  /* 포토뉴스 */
  #module-2-slide {
    width: 400px;
    margin: 0 auto;
  }

  #module-2-slide h2 {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 150% */
    letter-spacing: -0.2px;
  }

  #module-2-slide li,
  #module-2-slide .moduleContentBox {
    width: 400px;
  }
  .module-2 .moduleImage {
    width: 400px;
  }

  .module-2 .moduleImage img {
    width: 100%;
    height: auto;
  }

  #module-2-slide .owl-dots {
    display: block;
  }

  #module-2-slide .owl-dots {
    margin-bottom: -8px;
  }

  .module-2 .arrowBtnWrap {
    display: none;
  }

  /* 지방선거 주요 일정 */

  .section-schedule .sectionTit {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 162.5% */
    letter-spacing: -0.16px;
  }

  .timeline-item {
    padading-bottom: 20px;
  }

  /* 여론조사 */

  .section-poll .articleList {
    flex-direction: column;
  }

  .section-poll .articleList li {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--text-gray-300);
  }

  .section-poll .articleList li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 0;
  }

  .section-poll .articleBox {
    width: 100%;
    flex-direction: row;
    gap: 20px;
  }

  .section-poll li .articleImage {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
  }

  .section-poll li .articleImage img {
    height: 100%;
    width: auto;
  }

  .section-poll .articleTime {
    display: none;
  }

  .section-poll h2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 175% */
    letter-spacing: -0.16px;
  }

  /* 시·도지사 후보자 정보 */

  .areaBtn {
    display: none;
  }

  .cadidateBox {
    width: 235px;
  }

  .candidateWrap {
    margin-top: 24px;
  }

  .candidateWrap .contentArea {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 171.429% */
    letter-spacing: -0.14px;
  }

  .candidateWrap .contentArea ul {
    padding: 16px 18px 20px 9px;
    min-height: 192px;
  }

  .cadidateBox .topArea {
    padding: 12px 0 6px;
  }

  .candidateWrap .personImage {
    width: 108px;
    height: 144px;
  }

  .candidateWrap .dangTitle {
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 153.846% */
    letter-spacing: -0.13px;
  }

  .candidateWrap .candidateName {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 166.667% */
    letter-spacing: -0.18px;
  }

  /* 지난 지방선거 결과(2022) */

  .section-result2022 .sectionTit div:first-child {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 162.5% */
    letter-spacing: -0.16px;
  }

  .lastResultChartList {
    flex-direction: column;
    align-items: center;
    padding: 28px 10px 20px;
  }

  .lastResultChartList li {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--text-gray-400);
  }

  .lastResultChartList li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  /* 알쓸지잡 */
  .section-dictionary .h18 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 162.5% */
    letter-spacing: -0.16px;
  }
  .section-dictionary .body18 {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -0.16px;
  }

  .cardBoxList {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 650px;
  }

  .flip-card,
  .cardBox {
    width: 160px;
    height: 230px;
  }

  .cardImg {
    width: 64px;
  }

  .cardBox .cardTitle {
    padding-top: 14px;
    margin-top: 14px;
  }

  .flip-card-back .h18 {
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.7em;
    letter-spacing: -0.15px;
  }

  .flip-card-back .cardBox {
    gap: 8px;
    padding: 34px 13px 13px 13px;
  }

  .flip-card-back .cardBox .answer:after {
    top: -35px;
  }

  .bgColor {
    padding: 40px 0 100px;
  }
  /* mainTop */

  .mainTopBgColor {
    padding: 30px 0 15px;
    margin: 0 0 40px;
  }

  .mainTopBgColor .layoutWrap {
    width: 100%;
  }

  .section-mainTop .articleBox .articleTime,
  .section-mainTop .articleBox .articleTitle {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    visibility: hidden;
  }

  .section-mainTop .articleBox .articleTitle {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.24px;
    margin-top: -8px;
  }

  .section-mainTop .owl-item.center .articleBox .articleTime,
  .section-mainTop .owl-item.center .articleBox .articleTitle {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  /* 지방선거 A to Z */

  .faqSection {
    margin: 30px auto 40px;
    width: 100%;
  }

  .section-subPage .titleArea,
  .faqSection .titleArea {
    width: calc(100% - 37px);
  }

  .faqSection .accordion {
    width: calc(100% - 37px);
    margin: 0 auto;
  }

  .faqSection .accordionList {
    gap: 26px;
  }

  .section-subPage .titleArea,
  .faqSection .titleArea {
    gap: 8px;
    margin: 30px auto;
    padding-bottom: 24px;
  }

  .section-subPage .sectionTitle,
  .faqSection .sectionTitle {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px; /* 141.667% */
    letter-spacing: -0.24px;
  }

  .section-subPage .subTitle,
  .faqSection .subTitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: -0.32px;
  }

  .faqSection .qnaCtgList {
    gap: 12px;
    margin: 30px 0 30px 18px;
    padding-right: 19px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 18.2px */
    letter-spacing: -0.35px;
  }

  .faqSection .qnaCtgList li {
    padding: 10px 18px;
  }

  .faqSection .questionTit {
    padding: 22px 14px;
    gap: 16px;
  }

  .faqSection .questionTit .leftSide .h20 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 162.5% */
    letter-spacing: -0.16px;
  }

  .faqSection .questionTit .leftSide {
    gap: 8px;
    align-items: flex-start;
  }

  .faqSection .questionAnswer {
    padding: 44px 16px 22px;
  }

  .faqSection .questionAnswer .answerWrap {
    gap: 8px;
  }
  .faqSection .questionAnswer .h20 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 162.5% */
    letter-spacing: -0.16px;
  }
  .faqSection .questionAnswer .answer {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: -0.16px;
  }

  .faqSection .infoText {
    margin: 26px auto 0;
    width: calc(100% - 37px);
  }

  .beforeImg img {
    height: 100%;
    width: auto;
  }

  /* 역대 지방선거 */
  .section-lastChart {
    margin-bottom: 40px;
  }

  .section-lastChart .graphList {
    gap: 50px;
  }

  .section-lastChart .blockTitle {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .beforeImg {
    cursor: grab;
  }

  .beforeImg1 {
    height: 350px;
    width: auto;
  }

  .beforeImg2 {
    height: 320px;
    width: auto;
  }

  .beforeImg3,
  .beforeImg4 {
    height: 330px;
    width: auto;
  }

  footer .layoutWrap {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.42px;
    text-align: center;
  }
}

.dragBox {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  will-change: transform;
  position: relative;
  perspective: 500px;
}

.dragBox.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

#owl-mainTop.owl-theme .owl-dots .owl-dot.active span,
#owl-mainTop.owl-theme .owl-dots .owl-dot:hover span {
  width: 24px;
  transition: all 0.3s;
}

@media screen and (max-width: 450px) {
  .section-mainTop .articleBox {
    width: 338px;
    height: auto;
  }

  .section-mainTop li .articleImage {
    width: 100%;
    height: auto;
  }
  
  .section-mainTop .articleTime:after {
    width: 259px;
  }  
}

@media screen and (max-width: 430px) {
  .header {
    gap: 8px;
  }
  .headerTit {
    font-size: 22px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: -0.24px;
    word-break: keep-all;
  }

  .legendList {
    gap: 10px;
  }

  .legendBox {
    gap: 6px;
  }

  #module-2-slide,
  .module-2 .moduleImage {
    width: calc(100vw - 37px);
    height: auto;
  }

  .lastResultChartList .chartImg {
    width: 100%;
    height: auto;
  }

  .lastResultChartList .chartImg img {
    height: auto;
    width: 100%;
  }

  .cardBoxList{
    gap:10px;
  }
}

@media screen and (max-width: 398px) {
  /* mainTop */
  .section-mainTop .articleBox {
    width: 298px;
  }

  .section-mainTop li .articleImage {
    width: 100%;
    height: auto;
  }
  
  .section-mainTop .articleTime:after {
    width: 218px;
  }
  
  .flip-card, .cardBox { width: 148px; height: 238px; }
}