<html lang="ko">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>고객센터 연결 안내</title>
<!-- 폰트 URL 선언 -->
<style>
@font-face {
font-family: 'HeirofLightBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/HeirofLightBold.woff') format('woff');
}
html, body {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nXi0ItGf3ki5g3I2AkiRGDIwTO6XjC4pYM6lxU79segpiP7qAPc52-SkRXzUUMeAqWRW3VKy7q8RhqcwF6zssR8HJDOeynHNGHBKVDbqTWjkP3FX-IsvLNH0cxvhyphenhyphenKm23K0EXvSTQCJxqp0gchD5Ww_APWsBemeFC-lVkGn3wiKJu5yMhV7uOk-1Pko/s16000/woods.webp') no-repeat center center fixed;
background-size: cover;
}
/* 영상 섹션 */
.video-section {
position: relative;
max-width: 1200px;
margin: 0 auto 10px;
overflow: hidden;
background: #000;
}
.custom-video {
width: 100%;
height: 280px;
object-fit: cover;
object-position: 0 -290px;
}
.video-top-text,
.video-center-text,
.video-bottom-text {
font-family: 'HeirofLightBold';
font-weight: bold;
}
.video-top-text {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
font-size: 40px;
color: #2cf5ab;
}
.video-center-text {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 27px;
color: #fff;
text-align: center;
}
.video-bottom-text {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
font-size: 23px;
background-image: linear-gradient(#2cf5ab, #2cf5ab);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 고객센터 안내 박스 */
.extra_area.center-info {
border: 1px solid #616161;
border-radius: 0;
background-color: #292929;
font-size: 16px;
font-weight: bold;
color: #2cf5ab;
text-align: center;
margin: 10px auto;
padding: 20px;
max-width: 1200px;
}
.text-container {
color: white;
font-size: 20px;
text-align: center;
}
/* 연락처 리스트 */
.contact-wrapper {
display: flex;
align-items: center;
background-color: #292929;
border: 1px solid #616161;
padding: 10px 15px;
margin: 10px auto;
max-width: 1140px;
width: 100%;
color: white;
}
.contact-image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
position: relative;
top: 10px;
left: 2px;
}
.contact-info {
flex-grow: 1;
transform: translateX(25px);
text-align: left;
}
.contact-info .name {
font-weight: bold;
font-size: 1.4rem;
margin-bottom: 5px;
}
.contact-info p {
margin: 0;
font-size: 1rem;
color: #2cf5ab;
}
.contact-button {
padding: 10px 25px;
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #dcdcdc;
border-radius: 6px;
font-size: 1.6rem;
font-weight: bold;
color: #666;
text-decoration: none;
box-shadow: inset 0px 1px 0px 0px #ffffff;
text-shadow: 0px 1px 0px #ffffff;
white-space: nowrap;
}
.contact-button:hover {
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
}
.center-title {
font-size: 40px;
font-weight: bold;
margin-bottom: 10px;
}
/* 모바일 반응형 */
@media (max-width: 1210px) {
.contact-image {
width: 80px !important;; /* 모바일 화면에서만 50px로 변경 */
height: 80px !important;;
top: 5px; /* 이미지 위치 조정 (선택사항) */
}
@media (max-width: 768px) {
.custom-video {
height: 200px;
object-position: center center;
transform: scale(1);
}
.video-top-text {
top: 30px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
text-align: center;
}
.video-center-text {
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
padding: 0;
}
.video-bottom-text {
bottom: 20px;
font-size: 13px;
}
.contact-wrapper {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
padding: 10px;
}
.contact-info {
transform: none;
margin: 0;
}
.contact-info .name {
font-size: 1rem;
}
.contact-info p {
font-size: 0.9rem;
}
.contact-button {
font-size: 12px;
padding: 6px 12px;
}
.extra_area.center-info div {
font-size: 24px; /* 고객센터 안내 제목 크기 줄이기 */
}
.text-container {
font-size: 14px !important;
}
.contact-wrapper {
max-width: 95%;
padding: 8px;
}
.contact-image {
width: 50px !important;
height: 50px !important;
margin-right: 10px;
}
.contact-info .name {
font-size: 1.1rem;
}
.contact-info p {
font-size: 0.9rem;
}
.contact-button {
font-size: 0.9rem;
padding: 6px 12px;
}
}
</style>
</head>
<body>
<!-- 영상 + 텍스트 영역 -->
<div class="video-section">
<video autoplay="" class="custom-video" loop="" muted="" playsinline="">
<source src="https://cdn.jsdelivr.net/gh/j2-design/videos@main/fox_Loop.mp4" type="video/mp4"></source>
브라우저가 비디오 태그를 지원하지 않습니다.
</video>
<div class="video-top-text">고객센터</div>
<div class="video-center-text">애프터서버에 오신 걸 환영합니다.</div>
<div class="video-bottom-text">Lineage 2.0: 애프터 서버</div>
</div>
<!-- 고객센터 안내 박스 -->
<div class="extra_area center-info">
<div class="center-title">📞 애프터서버 고객센터 안내 📞</div>
<div class="text-container">
💬 바로가기를 클릭하여 고객센터로 이동합니다.
</div>
</div>
<!-- 연락처 리스트 -->
<div class="contact-wrapper">
<img alt="카카오톡 상담" class="contact-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhaF0hWHCTqAOw_ty6UNjOkPZmq3k2AJZfZcN2fw7CxMXOjSnaXwzrwGwjak-buRZs0wN_rlV0K8lxv1aAAqh3-_MAhejJQ_qLNMeoChAwDKywvIwR6Bewsdc_MiiCiTEV2bl7Rx-sglmvvWH6CtHUvQm8myjyE05OdbD3MMU6cUVcFnIJgpwonN__cHw/s1600/%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1%20png.png" />
<div class="contact-info">
<div class="name">애프터서버1대1문의</div>
<p>바로가기를 클릭하시면 "카카오톡"1대1문의 페이지로 이동됩니다.</p>
</div>
<a class="contact-button" href="https://open.kakao.com/o/sz1gpkbi" target="_blank">바로가기</a>
</div>
<div class="contact-wrapper">
<img alt="텔레그램 공지" class="contact-image"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhaF0hWHCTqAOw_ty6UNjOkPZmq3k2AJZfZcN2fw7CxMXOjSnaXwzrwGwjak-buRZs0wN_rlV0K8lxv1aAAqh3-_MAhejJQ_qLNMeoChAwDKywvIwR6Bewsdc_MiiCiTEV2bl7Rx-sglmvvWH6CtHUvQm8myjyE05OdbD3MMU6cUVcFnIJgpwonN__cHw/s1600/%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1%20png.png" />
<div class="contact-info">
<div class="name">애프터서버 공지방</div>
<p>바로가기를 클릭하시면 카카오톡 공지방 페이지로 이동됩니다.</p>
</div>
<a class="contact-button" href="https://open.kakao.com/o/gIuti7bi" target="_blank">바로가기</a>
</div>
</body>
</html>