@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  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");
}

@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");
}

@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");
}

/* 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,
b,
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;

  --TEXT-sub: #777;
}

/* 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: 60px;
  /* 136.364% */
  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: 48px;
  /* 126.316% */
  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: 44px;
  /* 137.5% */
  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;
  /* 142.857% */
  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;
  /* 141.667% */
  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: 30px;
  /* 150% */
  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: 30px;
  /* 166.667% */
  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: 26px;
  /* 162.5% */
  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: 22px;
  /* 146.667% */
  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: 24px;
  /* 171.429% */
  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: 24px;
  /* 171.429% */
  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: 400;
  line-height: 32px;
  /* 160% */
  letter-spacing: -0.2px;
}

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

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

.body15 {
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 160% */
  letter-spacing: -0.15px;
}

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

.body13 {
  color: var(--text-black, #111);
  /* PC/body_13 */
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 153.846% */
  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);
}

.color777 {
  color: var(--TEXT-sub);
}

.textEn {
  color: var(--TEXT-B, #111);
  font-family: Montserrat;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 42px;
  /* 105% */
}

.hideText {
  text-indent: -9999px;
  font-size: 0;
  color: transparent;
}

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

.layoutWrap {
  box-sizing: border-box;
  width: 1280px;
  margin: 0 auto;
}

header {
  position: absolute;
  z-index: 1000;
  width: 100%;
}

.headerWrap {
  display: flex;
  justify-content: space-between;
  padding: 64px 0 0;
}

header .logoWrap {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

header .leftSide {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

header .logo {
  color: #fff;
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1.44px;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  /* width: 508px; */
  /* height: 101px; */
}

.seoulShinmun {
  width: 50px;
  height: 72px;
}

header .dDay {
  box-sizing: border-box;
  color: var(--text-black);
  font-family: Montserrat;
  font-size: 55px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  padding: 6px 37px 7px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
  min-width: 200px;
}

.koreaRank {
  color: #d7ff02;
  font-family: Pretendard;
  font-size: 38px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px;
  /* 126.316% */
  letter-spacing: -0.38px;
}

.koreaRank .num {
  color: #d7ff02;
  font-family: Montserrat;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.mainTop {
  position: relative;
  height: 1062px;
  overflow: hidden;
}

.sec01-wave {
  z-index: 10;
  position: absolute;
  width: 100%;
  bottom: 30px;
}

.sec02-top-wave {
  width: 100%;
  position: absolute;
  top: -50px;
}

.sec02-bottom-wave {
  width: 100%;
  position: absolute;
  bottom: -1px;
}

.waveTop,
.waveBottom {
  position: relative;
}

.waveTop:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: -86px;
  left: 0;
  width: 100%;
  height: 280px;
  background: url("https://img.seoul.co.kr/img/2024Paris/wave-bottom.png") no-repeat center;
}

.waveBottom:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 280px;
  background: url("https://img.seoul.co.kr/img/2024Paris/wave.png") no-repeat center;
  background-size: contain;
}

.topArticleListWrap {
  position: relative;
  height: 1000px;
  display: flex;
  align-items: center;
}

.mainTopBG {
  height: 1062px;
}

.mainTopBG .bgImage {
  position: absolute;
  left: 0;
  top: 0;
  /* height: 100vh; */
  min-height: 1062px;
  width: 100%;
}

.mainTopBg .bgImage li {
  width: 100%;
  height: 100%;
}

.mainTopBG .bgImage .image01 {
  background: url("https://img.seoul.co.kr/img/2026Milano/topBg/bg01.png") no-repeat center fixed;
  background-size: cover;
  height: 1000px;
}

.mainTopBG .bgImage .image02 {
  background: url("https://img.seoul.co.kr/img/2026Milano/topBg/bg02.png") no-repeat center fixed;
  background-size: cover;
  height: 1000px;
}

.mainTopBG .bgImage .image03 {
  background: url("https://img.seoul.co.kr/img/2026Milano/topBg/bg03.png") no-repeat center fixed;
  background-size: cover;
  height: 1000px;
}

#mainTopArticle {
  position: relative;
  z-index: 999;
}

.topArticleList {
  padding-top: 224px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.topArticleList.owl-carousel {
  width: 600px;
}

.topArticleList .articleBox {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topArticleList .articleBox .articleImage {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 126px;
  border-radius: 8px;
  overflow: hidden;
}

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

/* parisNews */
.secTitleWrap {
  position: relative;
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.moreBtn {
  display: flex;
  align-items: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
  letter-spacing: -0.35px;
  color: #777;
}

.moreBtn .arrow {
  display: block;
  width: 14px;
  height: 14px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon.png") no-repeat;
  background-size: 1115px;
  background-position: 2px -249px;
}

.sec02 {
  position: relative;
  margin-bottom: 90px;
}

.sec02 .bgWrap {
  background: url("https://img.seoul.co.kr/img/2024Paris/wave_bg.png") no-repeat center;
  padding: 32px 0 313px;
}

.sec02 .layoutWrap {
  position: relative;
}

.parisNewsList {
  position: relative;
  margin-top: 95px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 60px 20px;
}

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

.parisNewsList .articleBox {
  width: 305px;
}

.parisNewsList .articleBox .articleImage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 305px;
  height: 203px;
  border-radius: 12px;
  overflow: hidden;
}

/*
.footerWrap {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
*/
.footerWrap {
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  background: #000;
}

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

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

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

.outer {
  margin: 40px 0;
}

.textAreaWrap {
  margin: 40px 0 60px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.textAreaWrap .textArea {
  width: calc(100% - 62px);
}

.textAreaWrap .icon {
  flex-shrink: 0;
  display: block;
  width: 50px;
  height: 50px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon.png") no-repeat;
  background-size: 1115px;
  background-position: -187px -231px;
}

#parisPhoto .articleImage {
  transition: all 0.3s ease;
}

#parisPhoto .active.center .articleImage {
  box-sizing: border-box;
  border: 10px solid #3f9eb3;
}

.owl-theme .owl-nav [class*="owl-"] {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#textArea.owl-theme {
  position: relative;
}

/* #parisPhoto */

.sec03-top-wave {
  display: none;
}

#parisPhoto {
  height: 486px;
}

#parisPhoto .item {
  /* padding: 80px 0px; */

  text-align: center;
  height: 560px;
  width: auto;
  overflow: hidden;
}

#parisPhoto .articleImage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 560px;
  width: auto;
  overflow: hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

#parisPhoto.owl-carousel .owl-stage-outer {
  height: 486px;
}

#parisPhoto.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 60px;
}

#parisPhoto .articleImage {
  height: 486px;
}
#parisPhoto .item {
  height: 486px;
}

#parisPhoto .articleImage img {
  height: 100%;
  width: auto;
}

.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both;
}

#mainTopBg.owl-carousel .animated {
  animation-duration: 1500ms;
  animation-fill-mode: both;
}

#photoTitle.owl-carousel .animated {
  animation-duration: 150ms;
  animation-fill-mode: both;
}

.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease;
}

.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#parisPhoto.owl-theme {
  position: relative;
}

.ifrm {
  border: none;
  width: 100%;
  margin-top: 50px;
}

.subSection {
  margin: 160px 0 180px;
  height: 1230px;
  /* display: flex; */
  /* justify-content: space-between; */
  /* gap: 110px; */
}

.subSection .leftSide {
  overflow: hidden;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  max-width: 880px;
  width: calc(100% - 770px);
  max-height: 1300px;
}

.subSection .leftSideImage {
  position: relative;
  height: 1230px;
}

.subSection .leftSideImage img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: auto;
}

.ranking .secTitleWrap {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

.subSection .rightSide {
  padding: 46px 0 0;
  display: flex;
  flex-direction: column;
  width: 602px;
}

.rankTableWrap {
  margin: 40px 0 66px;
}

.ranking .rankTable {
  text-align: center;
  vertical-align: middle;
}

.ranking .rankTable thead {
  border-bottom: 1px solid #666;
}

.ranking .rankTable th {
  padding: 20px 0;
  color: #777;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  /* 166.667% */
  letter-spacing: -0.18px;
  text-align: center;
}

.ranking .rankTable th div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.ranking .rankTable td {
  padding: 15px 0;
}

.ranking .rankTable tr:first-child td {
  padding: 30px 0 15px;
}

.ranking .rankTable td.boldText {
  color: var(--text-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  /* 166.667% */
  letter-spacing: -0.18px;
}

.ranking .rankTable .nation {
  display: flex;
  gap: 8px;
  text-align: left;
}

.ranking .rankTable .flag {
  flex-shrink: 0;
  display: block;
  width: 27px;
  height: 18px;
}

.ranking .rankTable .flag img {
  width: 100%;
  height: 100%;
}

.ranking .rankTable .nation .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking .koreaRankTable {
  background: #3f9eb3;
}

.ranking .koreaRankTable td {
  color: #fff !important;
}

td:first-child,
th:first-child {
  border-radius: 12px 0 0 12px;
}

td:last-child,
th:last-child {
  border-radius: 0 12px 12px 0;
}

.medal {
  width: 40px;
  height: 40px;
}

.goldM {
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon.png") no-repeat;
  background-size: 1115px;
  background-position: -383px -236px;
}

.silverM {
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon.png") no-repeat;
  background-size: 1115px;
  background-position: -466px -236px;
}

.bronzeM {
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon.png") no-repeat;
  background-size: 1115px;
  background-position: -553px -236px;
}

.summaryWrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.subSection {
  display: flex;
  gap: 110px;
}

.sec04 {
  /* padding: 0 0 180px; */
  overflow: hidden;
}

.sec06 {
  overflow: hidden;
  padding: 0 0 174px;
}

.historyList {
  margin-top: 100px;
  display: flex;
  gap: 32px;
}

.historyList .owl-stage-outer {
  overflow: visible !important;
}

.historyBoxWrap {
  position: relative;
}

.historyBox {
  position: relative;
  width: 360px;
  height: 370px;
  border-radius: 12px;
  overflow: hidden;
}

.historyImage {
  width: 360px;
  height: 370px;
  border-radius: 12px;
  overflow: hidden;
}

.historyTitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: calc(100% - 50px);
}

.historyTitle:before {
  content: "";
  display: block;
  position: absolute;
  top: -62px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon.png") no-repeat;
  background-size: 1115px;
  background-position: -290px -234px;
}

.hoverBox {
  cursor: pointer;
  transition: all 0.3s;
  box-sizing: border-box;
  z-index: 100;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 360px;
  height: 370px;
  background: #3f9eb3;
  padding: 25px;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  text-align: center;
}
.hoverBox.show {
  opacity: 1;
}

.goHome {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 100px 0 0;
  justify-content: end;
}

.goHome .icon {
  display: block;
  width: 32px;
  height: 32px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon.png") no-repeat;
  background-size: 1115px;
  background-position: -634px -243px;
}

.fixedMenu {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding: 8px 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
}

.fixedMenu .navList {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.fixedMenu .navList li {
  width: 54px;
  height: 54px;
}

.fixedMenu .navList li .navBtn01 {
  display: block;
  width: 54px;
  height: 54px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
  background-size: 486px;
  background-position: 0 -208px;
}

.fixedMenu .navList li .navBtn02 {
  display: block;
  width: 54px;
  height: 54px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
  background-size: 486px;
  background-position: -100px -208px;
}

.fixedMenu .navList li .navBtn03 {
  display: block;
  width: 54px;
  height: 54px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
  background-size: 486px;
  background-position: -200px -208px;
}

.fixedMenu .navList li .navBtn04 {
  display: block;
  width: 54px;
  height: 54px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
  background-size: 486px;
  background-position: -300px -208px;
}

.fixedMenu .navList li .navBtn05 {
  display: block;
  width: 54px;
  height: 54px;
  background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
  background-size: 486px;
  background-position: -400px -208px;
}

.fixedMenu .navList li .navBtn06 {
  display: block;
  width: 54px;
  height: 54px;
  background: url("https://img.seoul.co.kr/img/2026Milano/milano2026-icon-mo.png") no-repeat;
  background-size: 486px;
  background-position: 1px -308px;
}

/* owl */

.owl-theme .owl-dots .owl-dot {
  pointer-events: none;
  position: relative;
}

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 24px;
}

.owl-theme .owl-dots .owl-dot span {
  margin: 5px 6px !important;
  background: rgba(17, 17, 17, 0.2) !important;
}

.owl-theme .owl-dots .owl-dot.active span {
  position: relative;
  background: var(--text-black) !important;
  opacity: 1;
  transition: all linear 0.3s;
  padding: 0 10px;
}

.owl-theme .owl-dots .owl-dot.active:hover span {
  background: var(--text-black) !important;
}

.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--text-black) !important;
}

.owl-carousel.off {
  display: flex;
}

#section-menu {
  position: fixed;
  top: 50%;
  left: 2%;
  z-index: 1000;
  text-transform: uppercase;
  display: none;
  /* 처음에 숨김 */
  transform: translateY(-50%);
  -webkit-transition: all ease 0.1s;
  transition: all ease 0.1s;
}

#section-menu ul {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#section-menu a {
  position: relative;
  -webkit-transition: all ease 0.1s;
  transition: all ease 0.1s;
}

#section-menu .menuBox {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  color: #111;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 0px;
  /* 0% */
  letter-spacing: -0.2px;
}

#section-menu .dot {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid #b8b8b8;
  background: #fff;
  border-radius: 50%;
}

#section-menu li:not(:last-child) .dot:after {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  background: #e1e1e1;
}

#section-menu .menuTitle {
  opacity: 0;
  visibility: hidden;
}

#section-menu a.active .dot {
  background: #111;
  border: 2px solid #111;
}

#section-menu li:hover .menuTitle {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s;
}

.articleBox .articleTitle,
.articleBox img {
  transition: all 0.6s ease-in-out;
}

.articleBox:hover img {
  transform: scale(1.1);
}

.articleBox:hover .articleTitle {
  opacity: 0.5;
}

.dataListWrap {
  margin: 100px 0;
  display: flex;
  gap: 50px;
}

section {
  scroll-margin-top: 12px;
}

#mainTopArticle .articleTitle {
  width: 380px;
}

@media screen and (max-width: 1294px) {
  .layoutWrap {
    width: calc(100% - 37px);
  }

  .dataListWrap {
    margin: 40px 0;
  }
}
@media screen and (max-width: 1280px) {
  .subSection .leftSide {
    display: none;
  }

  /* .subSection .leftSideImage {
        display: none;
    } */
  .subSection .rightSide {
    padding: 0;
  }

  .ranking .rightSide {
    max-width: 1280px;
    width: calc(100% - 37px);
    margin: 0 auto;
  }

  .sec04 {
    padding: 0 0 76px;
  }

  .parisNewsList {
    margin-top: 40px;
  }

  .sec02 .bgWrap {
    padding: 32px 0 180px;
  }

  .parisNewsList li {
    width: calc(25% - 10px);
  }

  .parisNewsList {
    gap: 60px 0;
  }

  .parisNewsList .articleBox {
    width: 100%;
  }

  .parisNewsList .articleBox .articleImage {
    position: relative;
    width: 100%;
    height: auto;
  }

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

  #parisPhoto {
    height: 440px;
  }

  #parisPhoto.owl-carousel .owl-stage-outer {
    height: 440px;
  }

  #parisPhoto .articleImage {
    height: 440px;
  }

  .subSection {
    margin: 160px 0 56px;
  }

  .subSection .rightSide {
    width: 100%;
    max-width: calc(100% - 37px);
    margin: 0 auto;
  }

  .ranking .rightSide {
    width: 100%;
    max-width: 100%;
  }

  /* .sec04{
        padding: 0 0 120px;
    } */

  .rankTableWrap {
    margin: 40px 0 0;
  }

  .summaryWrap .secTitleWrap {
    justify-content: flex-start;
  }

  .summaryWrap {
    display: flex;
    align-items: flex-start;
    padding: 56px 18px 56px 19px;
    background-color: #ededed;
    margin: 0 -18px 0 -19px;
  }
}

@media screen and (max-width: 1024px) {
  /* header .logo {
    color: #fff;
    font-size: 56px;
  }

  header .logoWrap {
    gap: 0;
  }
*/
  header .logoWrap {
    gap: 0;
  }
  header .leftSide {
    gap: 4px;
  }
}
@media screen and (max-width: 850px) {
  section {
    scroll-margin-top: 0;
  }

  .rankingWrap .secTitleWrap {
    gap: 10px;
  }
  .textSub {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px; /* 153.846% */
    letter-spacing: -0.13px;
  }
  .dataListWrap {
    margin: 20px 0 56px;
    flex-direction: column;
    gap: 32px;
  }
  .headerWrap {
    align-items: flex-end;
    padding: 46px 0 0;
    max-width: 400px;
  }

  header .dDay {
    font-family: Montserrat;
    font-size: 19px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    padding: 2px 11px;
    min-width: auto;
  }

  header .logoWrap {
    gap: 0;
  }

  header .seoulShinmun {
    width: 18px;
    height: 25px;
  }

  header .leftSide {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  header .logo {
    /* width: 176px; */
    /* height: auto; */
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.6px;
  }

  .mainTop {
    height: 80vh;
    max-height: 580px;
  }

  .topArticleListWrap {
    height: auto;
    justify-content: center;
  }

  #mainTopBg .owl-item {
    filter: blur(1px);
  }

  .mainTopBG .bgImage .image01 {
    background-size: cover;
    background: url("https://img.seoul.co.kr/img/2026Milano/topBg-mo/bg01-mo.png") no-repeat 55% 0 fixed;
    height: 80vh;
  }

  .mainTopBG .bgImage .image02 {
    background-size: cover;
    background: url("https://img.seoul.co.kr/img/2026Milano/topBg-mo/bg02-mo.png") no-repeat 55% 0 fixed;
    height: 90vh;
  }

  .mainTopBG .bgImage .image03 {
    background-size: cover;
    background: url("https://img.seoul.co.kr/img/2026Milano/topBg-mo/bg03-mo.png") no-repeat 55% 0 fixed;
    height: 90vh;
  }

  .mainTopBG {
    height: 80vh;
  }

  .sec01-wave {
    bottom: -3px;
  }

  #mainTopArticle h2.articleTitle {
    z-index: 100;
    position: absolute;
    bottom: 28px;
    width: calc(100% - 28px);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 150% */
    letter-spacing: -0.2px;
  }

  #mainTopArticle li:hover h2 {
    opacity: 1;
  }

  .topArticleList {
    padding-top: 159px;
  }

  .topArticleList.owl-carousel {
    width: 100%;
    max-width: 400px;
    justify-content: center;
  }

  .mainTopArticle li {
    width: 400px;
  }

  .topArticleList .articleBox {
    flex-direction: column;
  }

  .topArticleList .articleBox .articleImage {
    max-width: 400px;
    width: 100%;
    height: auto;
  }

  .topArticleList .articleBox .articleImage:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 53.56%, rgba(0, 0, 0, 0.7) 100%);
    border-radius: 8px;
    overflow: hidden;
  }

  #parisPhoto {
    height: 300px;
  }

  #parisPhoto.owl-carousel .owl-stage-outer {
    height: 300px;
  }

  #parisPhoto .articleImage {
    height: 300px;
  }

  #parisPhoto .item {
    height: 300px;
  }

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

  .koreaRank .num {
    font-family: Montserrat;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.17px;
  }
}

@media screen and (max-width: 660px) {
  .headerWrap {
    position: relative;
    flex-direction: column;
  }
  .headerWrap .rightSide {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  header .leftSide {
    width: 100%;
  }

  #section-menu {
    display: none !important;
  }

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

  .sec02-top-wave {
    display: none;
  }

  .moreBtn .arrow {
    display: block;
    width: 14px;
    height: 14px;
    background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
    background-size: 486px;
    background-position: 0px -132px;
  }

  .fixedMenu {
    display: none;
    opacity: 0;
    visibility: visible;
  }

  .fixedMenu.show {
    display: block;
    opacity: 1;
  }

  .sec02-bottom-wave {
    display: none;
  }

  .sec03-top-wave {
    position: absolute;
    top: -95px;
  }
  .sec03-top-wave:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: -25px;
    left: 0;
    background: #ededed;
  }

  #parisPhoto .active.center .articleImage {
    border: 6px solid #3f9eb3;
  }

  #parisPhoto {
    height: 300px;
  }

  #parisPhoto .articleImage {
    height: 300px;
  }

  #parisPhoto.owl-carousel .owl-stage-outer {
    height: 300px;
  }

  .photoTitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    /* 137.5% */
    letter-spacing: -0.16px;
  }

  .textAreaWrap .icon {
    width: 36px;
    height: 36px;
    background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
    background-size: 486px;
    background-position: -63px -122px;
  }

  .subSection {
    margin: 0;
    height: auto;
  }

  .subSection .rightSide {
    padding: 0;
  }

  .rankTable {
    margin-top: 20px;
  }

  .ranking .rankTable tr:first-child td {
    padding-top: 24px;
  }

  .ranking .rankTable th {
    padding: 0 0 12px;
  }

  .ranking .rightSide {
    padding: 56px 0 0;
  }

  .ranking .rankTable .nation .txt {
    max-width: 90px;
  }

  .topArticleList {
    padding-top: 159px;
  }

  .waveBottom:after {
    height: 190px;
    bottom: 0;
    /* background-size: cover; */
  }

  .sec02 .bgWrap {
    background: none;
    padding: 20px 0 0;
  }

  .textEn {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    /* 140% */
    letter-spacing: -0.5px;
  }

  .parisNewsList {
    margin-top: 20px;
    gap: 24px 10px;
  }

  .parisNewsList li {
    width: calc(50% - 10px);
  }

  .sec03 {
    padding: 56px 0;
    position: relative;
    background: #ededed;
  }

  .sec03-top-wave {
    display: block;
  }

  .sec03 .textAreaWrap {
    margin: 20px 0;
  }

  .sec04 {
    padding: 0 0 76px;
  }

  .rankTableWrap {
    margin: 0;
  }

  .ranking .leftSideImage {
    display: none;
  }

  .ranking .rankTable td,
  .ranking .rankTable th {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 171.429% */
    letter-spacing: -0.14px;
  }

  .ranking .rankTable td {
    padding: 20px 0;
  }

  .ranking .rankTable td.boldText {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    /* 171.429% */
    letter-spacing: -0.14px;
  }

  .ranking .rankTable .koreaRankTable td {
    padding: 10px 0;
    background: #3f9eb3;
    border-left: 1px solid #3f9eb3;
  }

  .ranking .rankTable .koreaRankTable td:first-child {
    border-left: 1px solid transparent;
  }

  .medal {
    width: 30px;
    height: 30px;
  }

  .goldM {
    background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
    background-size: 486px;
    background-position: -237px -124px;
  }

  .silverM {
    background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
    background-size: 486px;
    background-position: -315px -124px;
  }

  .bronzeM {
    background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
    background-size: 486px;
    background-position: -393px -124px;
  }

  .sec06 {
    padding: 56px 0 114px;
  }

  .historyList {
    margin-top: 20px;
  }

  .historyBox,
  .historyImage,
  .hoverBox {
    width: 270px;
    height: 285px;
  }

  .hoverBox {
    padding: 0 15px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 175% */
    letter-spacing: -0.16px;
  }

  .historyTitle {
    width: calc(100% - 30px);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    letter-spacing: -0.18px;
  }

  .historyTitle:before {
    top: -40px;
    height: 36px;
    width: 36px;
    background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
    background-size: 486px;
    background-position: -150px -122px;
  }

  .goHome {
    margin: 44px 0 0;
    gap: 4px;
  }

  .goHome .icon {
    width: 20px;
    height: 20px;
    background: url("https://img.seoul.co.kr/img/2024Paris/paris2024-icon-mo.png") no-repeat;
    background-size: 486px;
    background-position: -469px -131px;
  }

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

  .mainTopBG .bgImage .image01 {
    background-size: cover;
    background: url("https://img.seoul.co.kr/img/2026Milano/topBg/bg01.png") no-repeat 75% 39% fixed;
    height: 80vh;
  }

  .mainTopBG .bgImage .image02 {
    background-size: contain;
    background: url("https://img.seoul.co.kr/img/2026Milano/topBg/bg02.png") no-repeat 65% 30% fixed;
    height: 80vh;
  }

  .mainTopBG .bgImage .image03 {
    background-size: contain;
    background: url("https://img.seoul.co.kr/img/2026Milano/topBg/bg03.png") no-repeat 67% 45% fixed;
    height: 80vh;
  }
}

@media screen and (max-width: 500px) {
  #parisPhoto .item {
    max-width: 400px;
  }
}

@media screen and (max-width: 450px) {
  .sec03-top-wave {
    top: -70px;
  }

  /*
    #parisPhoto {
        width: calc(100% - 37px);
        margin: 0 auto;
        height: auto;
    }
	*/

  #parisPhoto {
    width: 100%;
    height: 100%;
  }

  #parisPhoto.owl-carousel .owl-stage-outer {
    height: auto;
    width: 100%;
    max-height: 200px;
  }

  #parisPhoto .articleImage {
    position: relative;

    width: 100%;
    height: 200px;
    max-height: 200px;
  }

  .fixedMenu .navList {
    justify-content: space-around;
    gap: 0;
  }
}

@media screen and (max-width: 375px) {
  .mainTop {
    max-height: 512px;
  }
}