button, a { all: unset;}
a { cursor: pointer;}
article { transform: translateY(20px); opacity: 0; transition: all 1s;}

.common-typo-p1 { font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -1.2px; color: #444444; width: 100%; padding: 0 20px; box-sizing: border-box;}
.common-typo-h3 { font-size: 20px; font-weight: 700; line-height: 32px; letter-spacing: -1.4px; color: #111111; width: 100%; padding: 0 20px; box-sizing: border-box; padding-bottom: 8px;}
.common-typo-h2 { width: calc(100% - 40px); margin: 0 20px; box-sizing: border-box; font-size: 24px; font-weight: 700; line-height: 33.6px; letter-spacing: -1.4px; color: #111111; word-break: keep-all;}
.typo-color { color: #008689;}
.main { position: relative; width: 100%; max-width: 600px; margin: 0 auto; height: auto; font-family: "Pretendard";}
.header { position: sticky; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; box-sizing: border-box; background: #000000; z-index: 2;}
.button-wrap { display: flex; color: #FFFFFF; align-items: center; gap: 10px;}
.button-wrap p { cursor: pointer; transition: color 0.5s;}
.button-wrap p:hover { color: #008689;}
#link_copy { cursor: pointer; display: flex; align-items: center; justify-content: center;}
#link_copy path { transition: fill 0.5s;}
#link_copy:hover path { fill: #008689;}

.title { position: relative; width: 100%; height: calc(100vh - 56px); display: flex; flex-direction: column; align-items: center; color: #FFFFFF;}
.title .bg-vid { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.title .bg-vid video { width: 100%; height: 100%; -o-object-fit: cover;  object-fit: cover;}
.title .bg-vid video::-webkit-media-controls-enclosure { display: none !important; }
.title .center { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.title .center .bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px; opacity: 0; animation: float 1s 0.8s forwards;}
.title .center a { background: rgba(245, 245, 245, 0.2); border-radius: 50px; padding: 15px 102px; margin-bottom: 12px; font-size: 18px; font-weight: 600; line-height: 29.52px; cursor: pointer; transition: all 0.5s;}
.title .center a:hover { background: rgba(245, 245, 245, 0.5019607843); box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.4); text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);}
.title .center .bubble { position: relative; font-size: 12px; font-weight: 600; line-height: 19.2px; letter-spacing: -1px; text-align: center; color: #008689; background: #FFFFFF; padding: 3px 6px; border-radius: 3px; margin-bottom: 18px; box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2);}
.title .center .bubble::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-width: 6px 4px 0 4px; border-style: solid; border-color: #ffffff transparent transparent transparent;}
.title .center .look-more { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 22.96px; cursor: pointer;}
.title .center .look-more p { padding-bottom: 8px;}
.title-text { text-align: center; padding-top: 60px;}
.title-text h1 { font-size: 32px; font-weight: 800; line-height: 44.8px; letter-spacing: -1px; text-align: center; opacity: 0; animation: float 1s 0.5s forwards; text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1019607843);}
.title-text p { font-size: 24px; font-weight: 400; line-height: 38.4px; letter-spacing: -1.4px; opacity: 0; animation: float 1s 0.3s forwards; text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1019607843);}

.contents { padding-top: 40px; padding-bottom: 60px;}
.schedule h2 { padding-bottom: 12px;}
.chips { display: flex; align-items: center; justify-content: flex-start; gap: 4px; width: calc(100% - 40px); margin: 0 auto; padding-bottom: 20px;}
.chips p { font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: -1.2px; text-align: center; color: #444444; background: #F5F5F5; border-radius: 16px; width: initial; padding: 4px 8px;}

.timeline { padding-bottom: 80px;}
.timeline::after { content: "※서류 합격 발표일 및 사전 과제 기간, 면접일, 근무 시작일 등은 내부 사정에 따라 변동될 수 있습니다."; font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: -1px; display: block; color: #444444; width: 100%; padding: 0 20px; box-sizing: border-box; padding-top: 12px;}
.timeline > p { width: 100%; color: #111111; font-family: Pretendard; font-size: 14px; font-weight: 500; line-height: 22.4px; letter-spacing: -1px; padding-bottom: 20px;}
.timeline > p:nth-child(1).common-typo-p1 {width: 100%; color: white; background-color: #008689; font-weight: 500; font-size: 16px; line-height: 150%; letter-spacing: -1.2px; padding: 12px 20px;}
.timeline ul { width: 100%; padding: 0 20px; box-sizing: border-box;}
.timeline li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 0.7px solid #008689;}
.timeline li:nth-child(2) p:first-child { width: 500px;}
.timeline li p { padding: 0;}
.timeline li p:first-child { font-weight: 600; color: #008689;}
.timeline li p:last-child { text-align: right; letter-spacing: initial;}

.intro h2 { padding-bottom: 14px;}
.intro p:nth-child(2) { padding-bottom: 8px;}
.intro p:nth-child(2) span:nth-child(3) { font-weight: 600; color: #008689; }
.intro p:nth-child(2) span:nth-child(5) { font-weight: 600; }
.intro p:nth-child(3) { padding-bottom: 20px; margin-bottom: 40px;}

.team-introduce { padding-bottom: 40px;}
.team-introduce h2 { padding-bottom: 14px; border-bottom: 2px solid #008689; margin-bottom: 30px;}
.team-introduce > p { padding-bottom: 24px;}
.part-wrapper { width: 100%; height: 520px; padding: 20px 22px; background-color: black; border-radius: 24px;}
.part-wrapper:nth-child(2){ margin-bottom: 20px; background-image: url("https://image.donga.com/policy/hero/recruit/2025/images/interactive_part.jpg"); background-repeat: no-repeat; background-size: contain; background-position: bottom center;}
.part-wrapper:nth-child(3) {background-image: url("https://image.donga.com/policy/hero/recruit/2025/images/video_content_part.jpg"); background-repeat: no-repeat; background-size: cover; background-position: bottom center;}
.part-wrapper h3 {color: white; font-size: 20px; font-weight: 600; line-height: 150%; letter-spacing: -1.2px; margin-bottom: 10px;}
.part-wrapper > p {color: white; margin-bottom: 30px; font-weight: 400; font-size: 16px; line-height: 150%; letter-spacing: -1.2px;}
.part-wrapper button { cursor: pointer; margin-left: auto; display: flex; justify-content: center; align-items: center; padding: 16px 20px; border-radius: 32px; background: rgba(250, 250, 250, 0.20); color: white; font-weight: 600; font-size: 16px; line-height: 150%;}
.part-wrapper button img {width: 20px; margin-right: 10px;}
.part-wrapper > a { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 auto; padding: 14px 0px; box-sizing: border-box; font-size: 16px; font-weight: 600; line-height: 25.6px; border-bottom: 1px solid white; cursor: pointer; transition: all 0.5s;}
.part-wrapper > a img { width: 14.6px; height: 14.6px;}
.part-wrapper > a p { padding: 0; color: white; font-weight: 600; transition: color 0.5s;}
.part-wrapper > a:hover { border-bottom: 1px solid #008689;}
.part-wrapper > a:hover p { color: #008689;}

.job-introduce { padding-bottom: 60px;}
.job-introduce h2 { padding-bottom: 12px;}
.job-introduce h2:nth-child(1) { padding-bottom: 14px; border-bottom: 2px solid #008689; margin-bottom: 20px;}
.job-introduce .job-list { padding-bottom: 20px;}
.job-introduce .job-list li { padding-bottom: 8px; padding-left: 32px;}
.job-introduce .job-list li::before { content: "•"; position: absolute; left: 20px; color: #444444;}

.qna .mail { background: #F5F5F5; border-radius: 14px; width: calc(100% - 40px); margin: 0 auto; padding: 14px 42px; box-sizing: border-box;}
.qna .mail p { font-size: 14px; line-height: 21px; letter-spacing: -1.2px; padding: 0; position: relative; word-break: keep-all;}
.qna .mail p:first-child::before { content: url("https://image.donga.com/policy/hero/recruit/2025/images/info_icon.svg"); position: absolute; left: -24px;}
.qna .mail a { font-size: 14px; line-height: 21px; color: #111111; background: #EEEEEE; padding: 2px 10px; border-radius: 30px; cursor: pointer; transition: all 0.5s;}
.qna .mail a:hover { color: #ffffff; background: #008689;}
.qna .q-list { width: calc(100% - 40px); margin: 0 auto;}
.qna .q-tab { margin-bottom: 20px;}
.qna .q-tab .tab { display: flex; align-items: center; justify-content: space-between;}
.qna .q-tab .tab p { font-weight: 600; padding: 14px; text-align: center; cursor: pointer; transition: color 0.5s;}
.qna .q-tab .tab p:hover { color: #008689;}
.qna .q-tab .tab p.active { color: #008689;}
.qna .q-tab .bar { width: 100%; height: 4px; background: #F5F5F5; border-radius: 20px;}
.qna .q-tab .bar span { width: 50%; display: block; height: 100%; position: relative; background: #008689; border-radius: 20px; transition: transform 0.5s;}
.qna .a-tab { position: relative;}
.qna .a-list { opacity: 0; visibility: hidden; transition: opacity 1s; padding: 0; position: absolute; top: 0; left: 0;}
.qna .a-list p { padding: 0;}
.qna .a-list li { padding-bottom: 16px;}
.qna .a-list li p:first-child { color: #111111; font-weight: 600; padding-bottom: 8px;}
.qna .a-list:last-child { opacity: 0; visibility: hidden;}
.qna .a-list.active { position: relative; opacity: 1; visibility: visible;}

.banner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% - 180px); margin: 0 auto; background-image: url("https://image.donga.com/policy/hero/recruit/2025/images/banner_bg.jpg"); background-position: 50% 10%; background-repeat: no-repeat; background-size: cover; border-radius: 16px; text-align: center; padding: 20px 23px; box-sizing: border-box; margin-top: 70px;}
.banner p, .banner h2 { color: #FFFFFF; padding: 0;}
.banner p { font-size: 14px; font-weight: 500; line-height: 22.4px; letter-spacing: initial; padding-bottom: 4px;}
.banner img { width: 77%; margin-bottom: 10px;}
.banner a { color: #FFFFFF; background: rgba(245, 245, 245, 0.2); border-radius: 50px; padding: 15px 102px; font-size: 18px; font-weight: 600; line-height: 29.52px; cursor: pointer; transition: all 0.5s;}
.banner a:hover { background: rgba(245, 245, 245, 0.5019607843); box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.4); text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);}

@keyframes float {
  0% { transform: translateY(10px); opacity: 0;} 100% { transform: translateY(0px); opacity: 1;}
}

@media all and (max-width: 599px) {
  .banner {width: calc(100% - 40px);}
  .part-wrapper { width: calc(100% - 40px); margin: 0 auto;}
  .title .center a:hover, .banner a:hover { box-shadow: initial; text-shadow: initial; background: rgba(245, 245, 245, 0.2);} .qna .mail a:hover { color: initial; background: initial;} .button-wrap p:hover { color: #FFFFFF;} #link_copy:hover path { fill: #FFFFFF;} .team-introduce > a:hover { border-bottom: 1px solid #5a5a5a;} .team-introduce > a:hover p { color: #111111;}
}
@media all and (min-width: 600px) {
  .title .center .bubble { font-size: 14px; line-height: 22.4px; padding: 1.5px 12px;} .intro .common-typo-p1:nth-child(2) br:first-child { display: none;}
}