* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  color: #111111;
  font-family: 'MyCustomFont';
  word-break: keep-all;
  font-weight: 300;
  /* overflow-wrap: break-work; */
  max-width: 100%;
  /* overflow-x: hidden; */
  line-height: 154%;
  /* 35px */
  letter-spacing: -1.25px;
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
  font-style: normal;
}

@import url("https://font.elice.io/css?family=Elice+Digital+Baeum");

@font-face {
  font-family: 'eliceR';
  src: url('./fonts/EliceDigitalBaeum_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'eliceB';
  src: url('./fonts/EliceDigitalBaeum_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

html,
body {
  overflow-x: hidden;
  /* 가로 스크롤 방지 */
  max-width: 100%;
  /* 가로 크기 제한 */
  scroll-behavior: smooth;
}

img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

li,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  display: block;
  background-color: #fff;
  border: none;
  cursor: pointer;
}

section {
  width: 100%;
  margin: 0 auto;
}

article {
  width: 1200px;
  margin: 0 auto;
  padding: 120px 0;
}

h1 {
  font-family: 'eliceB', 'Elice Digital Baeum';
  font-size: 50px;
  color: #002F7B;
  text-align: center;
}

h5 {
  font-size: 26px;
  text-align: center;
  font-weight: 400;
  margin-top: 12px;
}

.con2,
.con3 {
  background-color: #fff;
}

.mo {
  display: none;
}

@media (max-width: 1200px) {
  article {
    width: 90%;
  }
}

@media all and (max-width: 768px) {
  .pc {
    display: none;
  }

  .mo {
    display: block;
  }

  article {
    width: 90%;
  }

  h1 {
    font-size: 28px;
  }

  h1 span {
    font-size: 28px;
  }

  h5 {
    font-size: 18px;
  }

  article {
    padding: 40px 0;
  }

  article .mo {
    margin-top: 40px;
  }
}

/* ============== header ============== */
#header {
  width: 100%;
  margin: 0 auto;
  position: relative;
  /* 초기 상태는 일반 흐름으로 설정 */
  background-color: #fff;
  z-index: 1000;
}

#header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header ul {
  width: 1200px;
  padding: 16px 0;
  display: flex;
  margin: 0 auto;
  align-items: center;
}

header ul .logo {
  width: 180px;
  overflow: hidden;
}

header ul .menuList {
  width: 100%;
  display: flex;
  justify-content: center;

}

header ul .menuList a {
  width: 136px;
  max-height: 37px;
  padding: 6px 20px;
  cursor: pointer;
  text-align: center;
}

header ul .menuList a:hover {
  font-weight: 600;
  color: #002F7B;
}

.menuList .menu-item.active {
  color: #002F7B;
  /* 활성화된 항목 색상 */
  font-weight: 600;
}

/* ============== main ============== */
.main {
  height: auto;
  background: url(./img/dcu_mainbg.webp) bottom center / cover no-repeat;
  background-color: #000;
}

/* .mainWrap ul.pc {width: 42%;} */
.main article li.logo {
  width: 120px;
  margin-bottom: 16px;
}

.main article ul {
  width: 50%;
}

.main article .first h1 {
  font-size: 60px;
  font-weight: 600;
  line-height: 94%;
  /* 5.425rem */
  color: #fff;
  text-align: left;
  margin-bottom: 16px;
}

.main article .first h1 span {
  font-family: 'eliceB', 'Elice Digital Baeum';
  font-size: 60px;
  font-weight: 600;
  line-height: 124%;
  /* 5.425rem */
  color: #FABE00;
  text-align: left;
}

.main article li h2 {
  font-family: 'eliceB', 'Elice Digital Baeum';
  font-size: 35px;
  line-height: 148%;
  /* 5.425rem */
  color: #fff;
  margin-bottom: 8px;
}

.main article li:last-child p {
  width: 83%;
  font-size: 20px;
  line-height: 148%;
  color: #fff;
}

.main article div button {
  padding: 0.9rem 1.75rem;
  border-radius: 3.125rem;
  border: 1px solid #fff;
  background-color: transparent;
  font-weight: 600;
  margin: 80px 0 0;
  color: #fff;
  font-size: 18px;
}

.main article div button:hover {
  background-color: #FABE00;
  border: 1px solid #FABE00;
  color: #002F7B;
}

/* ============== day ============== */
.day {
  background-color: #002F7B;
}

.day article {
  padding: 30px 0;
}

.day article ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.day article li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.day article li:nth-child(2) {display: none;}
.day article span {
  color: #fff;
  font-weight: 700;
  margin-right: 8px;
  text-align: center;
  font-size: 18px;
}

.day article p {
  font-size: 16px;
  color: #fff;
  text-align: center;
}

/* ============== con1 ============== */
.con1 {
  position: relative;
  overflow: hidden;
}

.con1 .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./img/dcu_con1bg.jpeg");
  background-size: cover;
  background-position: center center;
  transform: translateZ(0);
  will-change: transform;
  z-index: -1;
}

.con1 .dim {
  background: rgba(0, 40, 106, 0.90);
}

.con1 article h1 {
  color: #fff;
  text-align: center;
}

.con1 article h5 {
  color: #fff;
  margin-bottom: 5vh;
}

/* -------------------- 원 디자인------------------ */
.con1 article .circle-container {
  position: relative;
  width: 80vw;
  max-width: 700px;
  height: 80vw;
  max-height: 700px;
  margin: 14vh auto 0;
}

.con1 article .ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px dashed #B3B3B3;
  z-index: 0;
  background: none;
}

.con1 article .ring-mid {
  position: absolute;
  width: 95%;
  height: 95%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid transparent;
  border-image: none;
  border-image-slice: 1;
  background-origin: border-box;
  background-clip: content-box, border-box;
  z-index: 1;
  background: rgba(0, 0, 0, 0.30);
}

.con1 article .ring-mid::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(to bottom, #16B9FF, #0055FF);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.con1 article .center {
  position: absolute;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.8vw;
  font-weight: bold;
  color: #FABE00;
  background: rgba(0, 0, 0, 0.30);
  z-index: 2;
  animation: pulse 2.5s ease-in-out infinite;
}

.con1 article .orbit-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  animation: rotate 30s linear infinite;
}

.con1 article .orbit-wrapper.pause,
.con1 article .orbit-wrapper:hover {
  animation-play-state: paused;
}

.con1 article .orbit-item {
  position: absolute;
  width: 22%;
  height: auto;
  cursor: pointer;
}

/* con1 popup */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.con1 article .con1popup {
  position: absolute;
  top: calc(50% - 54px);
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 400px;
  height: 322px;
  max-height: 90vh;
  max-width: 90vw;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 10;
  display: none;
  text-align: center;
  font-family: 'Elice Digital Baeum', sans-serif;
  flex-direction: column;
  align-items: center;
}

.con1 article .con1popup.show {
  display: flex;
}

.con1 article .con1popup .close {
  position: absolute;
  top: -52px;
  right: 2px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 11;
}

.con1 article #popup-alphabet {
  font-size: 64px;
  color: #FABE00;
  font-weight: 700;
  line-height: 100%;
}

.con1 article .con1popup .close:hover {
  background-color: #000;
}

.con1 article #popup-title {
  font-family: 'eliceB', 'Elice Digital Baeum';
  font-size: 24px;
  margin-bottom: 24px;
}

.con1 article #popup-text {
  font-size: 18px;
  word-break: break-all;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* ----------- // 원디자인 끝 ----------- */

.con1 article .feature {
  margin: 25vh auto 0;
}

.con1 article .feature h2 {
  font-family: 'eliceB', 'Elice Digital Baeum';
  font-size: 3.13vw;
  color: #FABE00;
  text-align: center;
  font-weight: 600;
  letter-spacing: -1.202px;
}

.con1 article .feature p {
  font-size: 25px;
  color: #fff;
  text-align: center;
  margin-top: 8px;
}

/* ============== con2 ============== */

.con2 h1 span {
  color: #002F7B;
}

.con2 article .pc {
  margin-top: 80px;
}

/* ============== con3 ============== */
.con3 article.pc {
  padding: 28px 0;
}

.con3 article ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.con3 article ul li {
  width: max-content;
  padding: 22px;
}

.con3 article ul hr {
  height: -webkit-fill-available;
  border: 1px solid #F3F1F1;
}

.con3 article ul li:last-child {
  border-right: none;
}

.con3 article ul li p {
  text-align: center;
}

.con3 article ul li p:first-child {
  margin-bottom: 16px;
  font-size: 18px;
}

.con3 article ul li p:last-child,.con3 article ul li p:nth-child(2) {
  font-size: 16px;
  color: #002F7B;
  font-weight: 600;
}

/* ============== add01 ============== */
.add01 article .mo {
  display: none;
}

.add01 {
  background-color: #F2F5F8;
}

.add01 h1 {
  margin-bottom: 48px;
}

.add01 article ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: stretch;
  /* 세로 정렬 맞춤 */
}

.add01 h6 {
  color: #7B7B7B;
  margin-top: 30px;
}

/* ============== add02 ============== */
.add02 {
  background-color: #fff;
  background-image: url(./img/dcu_add02_bg.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 50%;
}

.add02 h1 {
  margin-bottom: 12px;
}

.add02 h5 {
  margin-bottom: 48px;
}

.add02 article .bubble-list {
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.add02 article .bubble-item {
  display: flex;
  justify-content: flex-start;
}

.add02 article .bubble-item:first-child {
  justify-content: center;
}

.add02 article .bubble-item img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* 2, 3 / 4, 5번 - 나란히 */
.add02 article .bubble-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.add02 article .bubble-row li {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* 이미지 크기 제한 */
.add02 article .bubble-group img {
  max-width: 100%;
  height: auto;
  width: 250px;
  /* 필요 시 조정 */
}

.add02 article>div {
  width: 100%;
  background-color: #fff;
  padding: 30px 24px;
  border-radius: 1.25rem;
  margin: 80px auto 0;
}

.add02 article>div h2 {
  font-family: 'eliceB', 'Elice Digital Baeum';
  font-size: 32px;
  margin-bottom: 16px;
  color: #002F7B;
  text-align: center;
}

.add02 article>div p {
  font-size: 24px;
  text-align: center;
  font-weight: 400;
}

.add02 article>div p span {
  font-size: 20px;
}

.add02 article .bubble-list.pc {
  display: block;
}

.add02 article .bubble-list.mo {
  display: none;
}

/* ============== add7 ============== */
.add7 {
  background-color: #0045B3;
}

.add7 article {
  padding: 40px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.add7 article div:first-child {
  width: 60%;
}
.add7 article div:last-child {
  width: 30%;
}
/* ============== add3 ============== */
.add3 {
  background-color: #002F7B;
}

.add3 article {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add3 article div {
  width: 49%;
}

/* ============== add4 ============== */
.add4 {
  background-color: #F9F9F9;
}

.add4 h1 {
  color: #002F7B;
  margin-bottom: 12px;
}

.add4 h5 {
  margin-bottom: 48px;
}

.add4 article .circle {
  width: 12px;
  margin: 60px auto;
}

.add4 article p {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.add4 article h2 {
  font-size: 26px;
  font-weight: 600;
  text-align: center;
}

.add4 article h2 span {
  font-size: 26px;
  font-weight: 600;
  background-color: #FABE00;
}

/* ============== add5 ============== */
.add05 {
  background-color: #fff;
}

.add05 h1 {
  color: #002F7B;
  margin-bottom: 12px;
}

.add05 h5 {
  margin-bottom: 48px;
}

.add05 article .grid-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: stretch;
  /* 세로 정렬 맞춤 */
}

.add05 article div {
  width: 80px;
  margin: 0 auto;
  animation: circlemove 01.5s infinite linear;
}

@keyframes circlemove {

  /* 0%{transform:translate(0,0);}
   100%{transform:translate(0,20px);} */
  0%,
  100% {
    transform: translate(0%, 0%);
  }

  50% {
    transform: translate(0%, 40%);
  }


}

/* ============== con4 ============== */
.con4 .mo {
  display: none;
}

.con4 {
  background-color: #002F7B;
}

.con4 h1 {
  color: #fff;
  margin-bottom: 48px;
}

/* tab */
.con4 article .container {
  margin: 0 auto;
  display: flex;
}

.con4 article ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.con4 article ul.tabs li {
  background: none;
  padding: 1rem 1.25rem;
  cursor: pointer;
  border-radius: 0.9375rem;
  background-color: #1D4E9C;
  width: 15.1875rem;
  padding: 16px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 20px;
}

.con4 article ul.tabs li h6 {
  font-family: 'eliceB', 'Elice Digital Baeum';
}

.con4 article ul.tabs li h6 p {
  font-family: 'eliceB', 'Elice Digital Baeum';
}

.con4 article ul.tabs li p {
  font-weight: 500;
}

.con4 article ul.tabs li p,
.con4 article ul.tabs li h6,
.con4 article ul.tabs li h6 p {
  font-size: 20px;
  color: #153466;
  text-align: left;
  display: flex;
}

.con4 article ul.tabs li.current {
  background-color: #FABE00;
  color: #111;
  font-weight: 600;
}

.tab-content {
  display: none;
  width: 100%;
  margin-left: 20px;
}

.tab-content.current {
  display: inherit;
}

.tab-content ul {
  display: grid;
  grid-auto-flow: row;
  /* 항목을 세로로 쌓음 */
  grid-template-columns: 1fr;
  /* 가로 1칸만 */
  gap: 20px 0;
  /* li 간 간격 */
  width: fit-content;
  /* 내용만큼 넓이 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab-content li {
  width: 100%;
  /* 원하는 고정 넓이로 설정 가능 */
}

/* ============== con5 ============== */
.con5 .mo {
  display: none;
}

.con5 {
  background-color: #F8F8F8;
}

.con5 article h1 {
  margin-bottom: 48px;
}

.con5 .custom-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding-left: 10px
}

.con5 .slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.con5 .slide {
  flex: 0 0 85%;
  /* 슬라이드 너비 줄여서 오른쪽 살짝 보이게 */
  margin-right: 15px;
  box-sizing: border-box;
}

.con5 .slide ul,
.con5 .custom-slider ul {
  padding: 24px 20px;
  border-radius: 0.9375rem;
  background-color: #002F7B;
  width: 100%;
  list-style: none;
}
.con5 .slide .video {width: 100%;}

.con5 .slide .video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.con5 .slide .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con5 .slide .Proicon {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

.con5 .slide .text .title {
  font-size: 20px;
  font-weight: 500;
  margin: 18px 0 12px;
  color: #fff;
}

.con5 .slide .text .txt {
  font-size: 16px;
  word-break: break-word;
  color: #fff;
}

.con5 .custom-pagination {
  /* display: none; */
  justify-content: center;
  margin-top: 20px;
  display: flex;
}

.con5 .custom-pagination button {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
}

.con5 .custom-pagination button.active {
  background: #FABE00;
}
/* #con5 .video video { display: none !important; }
#con5 .video img { display: block !important; } */


/* ============== con6 ============== */
.con6 {
  background: var(--Linear, linear-gradient(270deg, #DFF4FF 0%, #FFF 49.04%, #DFF4FF 100%));
}

.con6 article h5 {
  margin-bottom: 48px;
}

/* tab */
.con6 article .container {
  margin: 0 auto;
}

.con6 article ul.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
}

.con6 article ul.tabs li {
  background: none;
  color: #111;
  cursor: pointer;
  padding: 16px 24px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  border: 1px solid #D2D2D2;
  background-color: #fff;
  border-radius: 3.125rem;
  margin-right: 16px;
  margin-bottom: 24px;
}

.con6 article ul.tabs li:last-child {
  margin-right: 0;
}

.con6 article .tab-content {
  display: none;
  width: 100%;
  margin-left: 0px;
}

.con6 article ul.tabs li.current {
  font-weight: 600;
  border: none;
  background-color: #FABE00;
}

/* 1차 프로젝트 탭 활성화 색 */



.con6 article .tab-content.current {
  display: inherit;
}

.con6 article .tab-content div {
  width: 100%;
  /* 원하는 고정 넓이로 설정 가능 */
}

.con6 article .imgs {
  display: flex;
  justify-content: flex-start;
  background-color: #FCFEFF;
  border: 1px solid #D2D2D2;
  border-top: 0px solid #D2D2D2;
  padding: 0 30px 30px;
  border-radius: 0 0 34px 34px;
  gap: 15px;
}

.con6 article .imgs div {
  width: calc(100%/3);
}

.con6 article .video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* 최신 브라우저 지원 시 이걸로 가능 */
  overflow: hidden;
}

.con6 article .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con6 article .imgs_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
  /* ✅ 줄 내 높이 자동 정렬 */
  border-radius: 0 0 34px 34px;
  background-color: #fff;
  border: 1px solid #D2D2D2;
  border-top: 0px solid #D2D2D2;
  padding: 0 30px 30px;

}

.con6 .mo {
  display: none;
}









/* ============== con7 ============== */
.con7 .pc {
  display: block;
}

.con7 .mo {
  display: none;
}

.con7 {
  background-color: #fff;
  background-image: url(./img/dcu_con7_bg.svg);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 25%;
}

.con7 article h1 {
  margin-bottom: 48px;
}
.con7 article .container {position: relative;}
.con7 article .swiper-wrapper {height: 100%;padding-bottom: 40px;}
.con7 article .swiper-slide {background-color: #fff;}
.container .innerWrap .swiper-button-next,
.container .innerWrap .swiper-button-prev {border: 1px solid red;position: static;}
.con7 .swiper-button-prev,
.con7 .swiper-button-next {
/*   position: static; */
/*   border: 1px solid orange; */
  background-color: rgba(234, 234, 234, 0.844);
  width: 50px; height: 50px;
  border-radius: 50px;
  margin: 0;
  transform: translateY(-50%);
}
.con7 .swiper-button-prev {
  left: 10px;
}
.pro-section .swiper-button-next {
  right: 10px;
}
.con7 .swiper-button-prev::after,
.con7 .swiper-button-next::after {
  display: none;
}
.con7 .arrow {
  font-size: 40px;
  color: #fff;
}
.con7 .swiper-button-next span,
.con7 .swiper-button-prev span {width: 60%;}
/* .con7 .swiper-button-next span {
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
}

.con7 .swiper-button-next span {background-image: url(./img/forward.svg);}
.con7 .swiper-button-prev span {background-image: url(./img/back.svg);} */
.con7 .swiper-button-next {right: var(--swiper-navigation-sides-offset,-30px);}
.con7 .swiper-button-prev {left: var(--swiper-navigation-sides-offset,-30px);}
/* ============== con8 ============== */
.con8 {
  background-color: #F9F9F9;
  background-image: url(./img/dcu_con8_bg.svg);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 25%;
}

.con8 article {
  display: flex;
  justify-content: space-between;
  padding: 0;
  height: auto;
}

.con8 article h1 {
  margin-bottom: 48px;
}

.con8 article .title-wrap {
  margin: 50px auto 0;
}

.con8 article .title-wrap div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.con8 article .title-wrap div p {
  padding: 10px 12px;
  border-radius: 3.125rem;
  background: #D1D1D1;
  font-size: 20px;
  font-weight: 600;
  color: #002F7B;
  text-align: center;
}

.con8 article .slide-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 600px !important;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.con8 article .slide-content02 li {
  margin-bottom: 14px;
}

.con01 {
  animation: weddinglery-vertical 60s linear infinite;
}

.con02 {
  margin-top: 50px;
  animation: weddinglery-vertical 60s linear reverse infinite;
}

.slide-content>li {
  width: 200px;
  margin-bottom: 12px;
}

/* keyframes */
@keyframes weddinglery-vertical {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

/* ============== con9 ============== */
.con9 {
  background-color: #F1FAFF;
}

.con9 article h1 {
  margin-bottom: 12px;
}

.con9 article h5 {
  margin-bottom: 48px;
}

.con9 article div {
  width: 100%;
  margin: 0 auto;
}

/* ============== con10 ============== */
.con10 {
  background-color: #000;
}

.con10 article {
  padding: 120px 0 0;
}

.con10 article h1 {
  margin-bottom: 12px;
  color: #FABE00;
}

.con10 article h2 {
  font-family: 'eliceB', 'Elice Digital Baeum';
  font-size: 30px;
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
}

.con10 article h5 {
  margin-bottom: 13rem;
  color: #fff;
}

.con10 .iconFlow {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: -6rem;
  padding-bottom: 120px;
}

.con10 .iconWRap {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  /* 이미지 전체가 들어가도록 */
  animation: weddinglery 130s linear infinite;
  height: 140px;
  min-width: 1200%;
  /* 6개 이미지 x 200% */
}

.con10 .iconWRap img {
  width: auto;
  height: 100%;
  display: block;
  flex-shrink: 0;
}

/* 그라데이션 양 옆 덮개 */
.iconGradient {
  position: absolute;
  top: 0;
  width: 80px;
  height: 140px;
  z-index: 10;
  pointer-events: none;
}

.iconGradient.left {
  left: 0;
  background: linear-gradient(to right, #000 0%, transparent 100%);
}

.iconGradient.right {
  right: 0;
  background: linear-gradient(to left, #000 0%, transparent 100%);
}

@keyframes weddinglery {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ============== con11 ============== */
.con11 {
  background-color: #F2F5F8;
  padding-bottom: 120px;

}

.con11 article {
  padding: 120px 0 48px;
}

.con11 article h1 {
  margin-bottom: 12px;
}

.con11 article h5 {
  margin-bottom: 48px;
}

/* .swiper.mySwiper {width: 275px;height: 291px;} */
.mySwiper .swiper-slide {
  border-radius: 15px;
}

.swiper {
  width: 100%;
  height: 291px;
}

.swiper-slide {
  width: 275px;
  height: 291px;
  text-align: center;
  font-size: 18px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-container-limited {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  /* ✅ 버튼이 밖으로 나가도 보이게 */
}

.swiper-container-limited .swiper-button-prev,
.swiper-container-limited .swiper-button-next {
  position: absolute;
  top: 57%;
  transform: translateY(-50%);
  width: calc(var(--swiper-navigation-size) / 30 * 27);
  z-index: 10;
}

.swiper-container-limited .swiper-button-next {
  background: url(./img/dcu_con11_next.svg) no-repeat;
  background-size: 100% auto;
  background-position: center;
  width: calc(var(--swiper-navigation-size) / 30 * 27);
  right: -60px;
}

.swiper-container-limited .swiper-button-prev {
  background: url(./img/dcu_con11_prev.svg) no-repeat;
  background-size: 100% auto;
  background-position: center;
  width: calc(var(--swiper-navigation-size) / 30 * 27);
  left: -60px;
}

.swiper-container-limited .swiper-button-next:hover {
  background: url(./img/dcu_con11_nextH.svg) no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-container-limited .swiper-button-prev:hover {
  background: url(./img/dcu_con11_prevH.svg) no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

/* 버튼 */
.con11 article .download {
  padding: 0.75rem 1.5rem;
  max-width: 300px;
  height: 65px;
  line-height: 65px;
  border-radius: 3.125rem;
  background-color: #01A982;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80px auto 0;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
}

.con11 article .download p {
  color: #fff;
  font-size: 18px;
}

.con11 article .download:hover {
  background-color: #009D79;
}

.con11 article .download span {
  width: 18px;
  margin-left: 8px;
}

/* ============== con12 ============== */
.con12 {
  background: var(--Linear, linear-gradient(270deg, #DFF4FF 0%, #FFF 49.04%, #DFF4FF 100%));
}

.con12 article h1 {
  margin-bottom: 12px;
}

.con12 article h5 {
  margin-bottom: 48px;
}

.con12 article ul li {
  width: 100%;
  margin-bottom: 80px;
}

.con12 article ul li:last-child {
  margin-bottom: 0px;
}

.con12 h5 br {
  display: none;
}

/* ============== con13 ============== */
.con13 {
  display: none;
  background: url(./img/dcu_con13_bg.png) top center / cover no-repeat;
}

.con13 article h1 {
  margin-bottom: 12px;
}

.con13 article h5 {
  margin-bottom: 80px;
}

.slide-wrapper {
  height: 410px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.slide-content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: weddinglery-vertical 10s linear infinite;
}

.slide-content>li {
  width: 200px;
  margin-bottom: 3vh;
}

/* keyframes */
@keyframes weddinglery-vertical {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

/* ============== add06 ============== */
.add06 {
  background-color: #fff;
}

.add06 h1 {
  margin-bottom: 48px;
}

.add06 article .curriculum-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.add06 article .curriculum-wrap .curriculum {
  width: 49%;
}

/* 질문 */
.que {
  position: relative;
  padding: 24px 16px;
  cursor: pointer;
  font-size: 18px;
  border: 0;
  background-color: #696969;
  border-radius: 10px;
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
}

.que span {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  display: block;
}

.que span:nth-child(2) {
  width: 93%;
}

.que .Q {
  color: #fff;
  margin-right: 5px;
}


/* 답변 */
.anw {
  display: none;
  overflow: hidden;
  font-size: 18px;
  line-height: 160%;
  letter-spacing: -0.05625rem;
  padding: 27px 16px;
}

.anw a {
  font-size: 18px;
  color: blue;
  border-bottom: 1px solid #111;
  overflow-wrap: anywhere;
}

.arrow-wrap {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translate(0, -50%);
  width: 22px;
}

.anw span {
  color: #111;
  font-size: 18px;
  word-break: keep-all;
}

/* on */
.anw {
  display: none;
  overflow: hidden;
}

.que.on+.anw {
  display: block;
}

.que .arrow-top {
  display: none;
}

.que.on .arrow-top {
  display: block;
}

.que.on .arrow-bottom {
  display: none;
}

.que.on>span {
  font-weight: bold;
}

/* ============== con14 ============== */
.con14 {
  background-color: #5B5A5A;
}

.con14 article ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.con14 article ul li h2 {
  font-size: 24px;
  color: #fff;
  font-weight: 600;
  text-align: left;
  margin-bottom: 22px;
}

.con14 article ul li p {
  color: #fff;
  font-size: 18px;
  text-align: left;
  letter-spacing: -0.025rem;
  margin-bottom: 12px;
}
.con14 article ul li a {
  font-size: 16px;
  color: #fff;
  text-decoration: underline;
  font-weight: 400;  
}













/* 탑버튼 */
.btn_gotop {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 999;
  outline: none;
  color: #fff;
  cursor: pointer;
  text-align: center;
}

.btn_gotop .glyphicon {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 70px;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.25);
}

.btn_gotop p {
  margin-top: 4px;
  font-size: 14px;
}

.btn_gotop .glyphicon:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ============ max-width: 1200px ============== */
@media (max-width: 1200px) {
  #header {
    width: 100%;
    background-color: #fff;
  }

  header ul {
    width: 90%;
  }

  .con7 {
    background-size: 50%;
  }

  .con7 article .innerWrap {
    grid-template-columns: repeat(1, 1fr);
  }

  .swiper-container-limited {
    width: 90%;
  }

  .con8 .swiper-container-limited {
    width: 100%;
  }
}

/* PC에서는 grid로 */
@media screen and (min-width: 1025px) {
  .con5 .custom-slider {
    overflow: visible;
  }

  .con5 .slider-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
    transform: none !important;
  }

  .con5 .slide {
    flex: none;
    padding: 0;
  }

  .con5 .slide ul,
  .con5 .custom-slider ul {
    padding: 30px 24px;
  }

  .con5 .custom-pagination {
    display: none;
  }

}

/* ============ max-width: 1024px) and (min-width: 526px ============== */
/* @media (max-width: 1024px) and (min-width: 526px) {
  .con5 article .grid-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
} */
@media (max-width: 1024px) {
  .main .pc {
    display: none;
  }

  .main .mo {
    display: block;
  }

  .main {
    background: url(./img/dcu_mainbg_mo.webp) center right / cover no-repeat;
    background-color: #000;
    overflow: hidden;
  }

  .main article ul {
    width: 100%;
    margin: 0 auto;
  }

  .main article li.logo {
    margin: 0 auto 24px;
  }

  .main article .mo {
    display: flex;
    justify-content: flex-end;
  }

  .main article .mo div {
    width: 80%;
    margin-top: 13%;
  }

  .main article .first h1 {
    font-size: 9vw;
    text-align: center;
  }

  .main article .first h1 span {
    font-size: 9vw;
    text-align: center;
  }

  .main article li h2 {
    font-size: 7vw;
    text-align: center;
  }

  .main article li:last-child p {
    display: none;
  }

  .main article div button {
    width: 70%;
    margin: 30px auto 0;
  }

  .add02 article .bubble-list.pc {
    display: none;
  }

  .add02 article .bubble-list.mo {
    display: block;
  }

  .add02 article .bubble-row {
    display: flex;
    justify-content: space-between;
    gap: 0px;
    margin-bottom: 0px;
    flex-direction: column;
  }

  .add02 article .bubble-row:last-child {
    flex-direction: column-reverse;
  }

  .add02 article>div {
    width: 100%;
    padding: 0;
  }

  .add02 article>div h2 {
    font-size: 20px;
  }

  .add02 article>div p {
    font-size: 18px;
  }

  .add02 article>div p span {
    font-size: 15px;
  }

  .con8 .slide-wrapper.pc {
    display: none;
  }

  .con8 .mo {
    display: block;
  }

  .con8 article {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 0;
  }

  .con8 .title-wrap>div {
    display: none !important;
  }

  .con8 article .title-wrap {
    padding: 0;
    width: 100%;
  }

  .con8 article h1 {
    margin-bottom: 40px;
  }

  .con8 article .mo {
    margin-top: 0;
  }

  .con4 article ul.tabs li p {
    display: none;
  }

  .con4 article ul.tabs li h6 {
    margin: 0 auto;
  }

  .con4 article ul.tabs li h6 p {
    display: none;
  }

  .con4 .mo {
    display: block;
    margin-top: 0px;
  }

  .con4 .pc {
    display: none;
  }

  .con4 article .container {
    flex-direction: column;
  }

  .con4 article ul.tabs {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .con4 article ul.tabs li {
    width: calc(100%/3);
    padding: 8px;
    text-align: center;
    border-radius: 5px;
    height: auto;
  }

  .con4 article .tabs p {
    display: none;
  }

  .tab-content {
    margin-left: 0;
  }

  .tab-content ul {
    gap: 8px 0;
  }

  .con4 article .tab-content h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0 24px;
    text-align: center;
  }

  .con4 article .tab-content .mo li {
    margin-bottom: 12px;
  }

  .con4 article .tab-content .mo li:last-child {
    margin-bottom: 0px;
  }

  .con4 .slider-wrap {
    overflow: hidden;
    position: relative;
  }

  .con4 .slider-wrap h2 {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
  }

  .con4 .slider-track {
    display: flex;
    /* gap: 15px; */
    transition: transform 0.5s ease-in-out;
    will-change: transform;
  }

  .con4 .slide {
    flex: 0 0 85%;
    /* 오른쪽 일부 보이게 */
    box-sizing: border-box;
    margin-right: 15px;
  }

  .con4 .slide img {
    width: 100%;
    display: block;
  }

  .con4 .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }

  .con4 .pagination button {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .con4 .pagination button.active {
    background: #FABE00;
  }

  .con7 article .pc {
    display: none;
  }

  .con7 article .mo {
    display: block;
  }

  .con7 article .mo li {
    margin-bottom: 12px;
  }

  .con7 article .mo li:last-child {
    margin-bottom: 0px;
  }

  /* 4. video가 16:9 비율 유지 */
  .con7 article .grid-wrap ul {
    list-style: none;
    height: 100%;
    /* 높이 자동 동기화 */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .con7 article ul li.video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .con7 article ul li.video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .btn_gotop {
    right: 20px;
  }

}

/* ============ max-width: 916px ============== */
@media (max-width: 916px) {
  #header {
    height: auto;
  }

  header ul {
    padding: 16px 0;
  }

  header ul .logo {
    width: auto;
  }

  header ul .menuList {
    width: 80%;
    margin-top: 0px;
    justify-content: flex-end;
  }

  header ul .menuList a {
    width: calc((100% / 3) - 10px);
    padding: 6px;
  }

  .con3 .mo {
    display: none;
  }

  .con3 .pc {
    display: none;
  }

  .con3 article div {
    display: flex;
    justify-content: center;
    gap: 0px;
    margin: 0px auto 0;
    flex-direction: column;
  }

  .con3 h1 {
    margin-bottom: 12px;
  }

  .con3 h5 {
    margin-bottom: 48px;
  }

  .con3 article div ul li {
    display: flex;
    align-items: center;
    width: max-content;
    margin-bottom: 24px;
  }

  .con3 article div ul:last-child li:first-child {
    align-items: flex-start
  }

  .con3 article div li>span {
    padding: 0.375rem 1.5rem;
    border-radius: 3.125rem;
    background: #3B3B3B;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    width: 109px;
    display: block;
    text-align: center;
  }

  .con3 article div li p {
    font-size: 18px;
    margin-left: 8px;
  }

  .con3 article div li p {
    font-size: 18px;
    margin-left: 8px;
  }

  .con3 article div li p>span {
    font-size: 18px;
    margin-right: 4px;
  }


  .add06 article .curriculum-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;

  }

  .custom-pagination {
    display: flex;
  }

  .add06 article .curriculum-wrap .curriculum {
    width: 100%;
  }

  .con8 .swiper-autoheight,
  .con8 .swiper-autoheight .swiper-slide {
    height: 45vw;

  }

  .con8 .swiper-slide {
    background-color: #fff;
  }

  .con8 .swiper-slide img {
    border-radius: 0.57156rem;
  }

  .con8 .swiper-button-next,
  .con8 .swiper-button-prev,
  .con11 .swiper-button-next,
  .con11 .swiper-button-prev {
    display: none;
  }

  .popup-overlay.show {
    display: block;
  }


  body.popup-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* ============ max-width: 768px ============== */
@media (max-width: 768px) {
  .day article ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .day article li {
    flex-direction: row;
    gap: 0;
  }
  .day article li:nth-child(2) {
    display: flex;
    flex-direction: row;
    gap: 0;
  }
  .day article li div {display: flex;flex-direction: column;}
  .day article p {
    text-align: left;
  }

  .day article span {
    font-size: 16px;
    padding: 0.375rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3.125rem;
    background-color: #fff;
    color: #002F7B;
    width: 78px;
  }

  .con1 .dim {
    background: rgba(0, 40, 106, 0.90);
    padding: 40px 0;
  }

  .con1 article .circle-container {
    margin: 8vh auto 0;
  }

  .con1 article .feature {
    margin: 13vh auto 0;
  }

  .con1 article .feature h2 {
    font-size: 6.13vw;
  }

  .con1 article .center {
    font-size: 6.13vw;
  }

  .con1 article .feature p {
    font-size: 20px;
  }

  .con2 h5 {
    margin-bottom: 40px;
  }

  .con3 {
    display: none;
  }

  .add7 article {
    flex-direction: column;
    padding: 40px 0;
    justify-content: center;
    gap: 20px;
  }

  .add7 article div,.add7 article div:last-child {
    width: 100%;
  }
  .add3 article {
    flex-direction: column;
    padding: 0 0 40px;
  }

  .add3 article div {
    width: 100%;
  }

  .add4 article p {
    font-size: 18px;
  }

  .add4 article h2 {
    font-size: 24px;
  }

  .add4 article h2 br {
    display: none;
  }

  .add4 article h2 span {
    font-size: 24px;
  }

  article .mo {
    margin-top: 8px;
  }

  .add05 article .grid-wrap {
    grid-template-columns: repeat(1, 1fr);
  }
  .add05 article .grid-wrap {gap: 6px;}

  .add01 h1 {
    margin-bottom: 40px;
  }

  .add01 article .mo {
    display: block;
  }

  .add01 article .pc {
    display: none;
  }

  .add01 article ul {
    display: block;
  }

  .add01 .mo .que {
    background-color: #002F7B;
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 18px;
  }

  .add01 .mo .que::before {
    display: none;
  }

  .add01 .mo .que .icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }

  .add01 .mo .que span {
    color: #FABE00;
    font-size: 18px;
    font-family: 'eliceB', 'Elice Digital Baeum';
  }

  .add01 .mo .anw h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .add01 .mo .anw p {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .add01 .mo .anw {
    padding-top: 0;
  }

  .con6 .mo {
    display: block !important;
  }

  .con6 .pc {
    display: none !important;
  }

  .con6 .box01 {
    background-color: #FCFEFF;
    border: 1px solid #D2D2D2;
    border-top: 0px solid #D2D2D2;
    padding: 0 30px 30px;
    border-radius: 0 0 34px 34px;
  }

  .con6 .mo {
    display: block;
    margin-top: 30px;
  }

  .con6 .slider-wrap {
    overflow: hidden;
    position: relative;
  }

  .con6 .slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .con6 .slide {
    flex: 0 0 85%;
    margin-right: 15px;
    box-sizing: border-box;
  }

  .con6 .slide video {
    width: 100%;
    display: block;
  }

  .con6 .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }

  .con6 .pagination button {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    border: none;
    cursor: pointer;
  }

  .con6 .pagination button.active {
    background: #FABE00;
  }

  /* .swiper {
      width: 100%;
      height: 100%;
      
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      
    }

    .swiper-slide {
      width: 80%;

    }
    .mySwiper03 .swiper-slide {width: 40%;}
.mySwiper03 .swiper-slide {
    aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
    }
.mySwiper03 .swiper-slide video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */
  .con6 article .imgs {
    flex-direction: column;
  }

  .con6 article .imgs div {
    width: 100%;
  }

  .con6 article ul.tabs li {
    padding: 16px;
  }

  .con6 article .container .mo {
    margin-top: 0;
  }

  .con6 article .imgs_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .con6 article .img {
    padding: 0 20px 30px;
  }


  .con8 article .mo {
    padding-top: 0;
  }

  .con10 article {
    padding-top: 40px;
  }
.con10 article h2 {font-size: 24px;margin-bottom: 20px;}
  .con10 .iconWRap {
    animation: weddinglery 40s linear infinite;
  }

  .con10 .iconFlow {
    padding-bottom: 40px;
  }

  /* .con10 article .box001 {padding: 0px 0;}
.con10 article .box001 ul li h2,
.con10 article .box001 ul li h3 {font-size: 40px;}
.con10 article .box001 p {font-size: 18px;} */

  /* .con12 article .mo {margin-top: 0;} */
  .con11 {
    padding-bottom: 40px;
  }

  .con11 article {
    padding: 40px 0 0;
  }

  .slide-content>li {
    width: 150px;
    margin-bottom: 12px;
  }

  .con12 h5 br {
    display: block;
  }

  .que {
    padding: 20px 16px;
    margin-top: 16px;
  }

  .que span {
    font-size: 19px;
  }

  .anw span {
    font-size: 17px;
  }

  .con14 h1 {
    margin-bottom: 40px;
  }

  .con14 article ul li div:first-child {
    width: 40px;
  }

  .con14 article ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .con14 article ul li h2 {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .con14 article ul li p {
    font-size: 16px;
  }
}

/* ============ max-width: 525px ============== */
/* 525px 이하일 때: 가로 1칸 */
@media (max-width: 525px) {
  .con5 article .grid-wrap {
    grid-template-columns: 1fr;
  }

  .que span:nth-child(2) {
    width: 90%;
  }
}

/* ============ max-width: 600px ============== */
@media (max-width: 600px) {
  .main article div button {
    width: 100%;
  }

  .con6 article ul.tabs li {
    font-size: 16px;
  }

  .con1 article .con1popup {
    height: 225px;
  }

  .con1 article #popup-alphabet {
    font-size: 45px;
  }

  .con1 article #popup-title {
    font-size: 20px;
    margin-bottom: 18px;
  }

  .con1 article #popup-text {
    font-size: 16px;
  }

  /* .con10 article .box001 ul {flex-direction: column;} */
  .con7 .swiper-button-prev,
.con7 .swiper-button-next {
  width: 40px; height: 40px;
}
.con7 .swiper-button-next {
    right: var(--swiper-navigation-sides-offset, -20px);
}
.con7 .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, -20px);
}
}

@media (max-width: 375px) {
  .con6 article ul.tabs li {font-size: 14px;}
}