* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Pretendard", sans-serif;
background-color: #fff;
color: #333;
line-height: 1.6;
}
img {
display: block;
width: 100%;
height: auto;
}
/* 1. 메인 버튼 스타일 */
.section_main {
position: relative;
}
.btn_container {
position: absolute;
bottom: 5vw; /* 이미지 위 적절한 위치로 조정하세요 */
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.main_btn {
display: inline-block;
background-color: #000; /* 예시 색상 */
color: #fff;
padding: 20px 60px;
border-radius: 50px;
text-decoration: none;
transition: background 0.3s;
width: 454px;
}
.main_btn .t1 {
font-size: 20px;
font-weight: 700;
font-family: "Pretendard", sans-serif;
margin-bottom: 5px;
}
.main_btn .t2 {
font-family: "Pretendard", sans-serif;
font-size: 28px;
font-weight: 700;
}
.main_btn .t2 img {
display: inline-block;
width: 26px;
height: 16px;
vertical-align: middle;
margin-left: 5px;
}
/* 2. 비디오 섹션 */
.section_video {
padding: 80px 0;
background-color: #f9f9f9;
text-align: center;
}
.section_title {
font-size: 40px;
font-weight: 800;
margin-bottom: 40px;
}
.video_inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
.iframe_wrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 비율 */
height: 0;
overflow: hidden;
}
.iframe_wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 4. 하단 버튼 그룹 */
.section_bottom_btns {
padding: 50px 0;
text-align: center;
}
.btn_group {
display: flex;
justify-content: center;
gap: 20px;
}
.sub_btn {
display: inline-block;
padding: 20px 40px;
font-size: 24px;
font-weight: 700;
text-decoration: none;
border-radius: 10px;
color: #fff;
}
.test_btn {
background-color: #ff9d00;
}
.download_btn {
background-color: #31a8cf;
}
/* 공통 섹션 이미지 */
.section_contents img {
margin: 0 auto;
}
p.t3 {
font-size: 32px;
color: #626262;
margin-bottom: 20px;
}
.sec03 {
max-width: 762px;
margin: 0 auto;
padding-top: 110px;
padding-bottom: 32px;
}
/* */
/* 버튼 컨테이너 및 정렬 */
.section_button_wrap {
padding: 0;
text-align: center;
}
.button_container {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
}
.btn_box {
display: flex;
flex-direction: column;
align-items: center;
}
.bubble_img {
margin-bottom: 10px;
width: 380px;
}
.bubble_img img {
width: 100%;
}
/* 핵심: 이미지 겹치기 로직 */
.img_hover_btn {
position: relative;
display: block;
width: 450px; /* PC 기본 사이즈 */
height: 120px; /* 이미지 높이에 맞춰 조정 필요 */
}
.img_hover_btn img {
position: absolute;
left: 0;
width: 100%;
transition: opacity 0.2s ease;
}
/* 1. 뒤에 깔리는 ON 이미지 (살짝 아래로 배치) */
.img_hover_btn .btn_on {
top: 5px; /* 기본 이미지보다 5px 아래에 위치해서 살짝 보이게 함 */
z-index: 1;
opacity: 1; /* 항상 보임 */
}
/* 2. 위에 겹쳐지는 기본 이미지 */
.img_hover_btn .btn_default {
top: 0;
z-index: 2;
opacity: 1;
}
/* 3. 호버 시: 위의 이미지만 투명하게 */
.img_hover_btn:hover .btn_default {
opacity: 0;
}
.sec6 {
padding: 28px 92px 0px 93px;
margin-bottom: 182px;
}
.sec6img {
max-width: 1735px;
}
.sec7 {
padding: 0px 195px;
margin-bottom: 292px;
}
/* */
.review_section {
max-width: 1920px;
margin: 190px auto;
overflow: hidden;
}
.review_header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 186px;
margin-bottom: 40px;
}
.review_title {
font-size: 40px;
font-weight: 700;
font-family: "Pretendard", sans-serif;
}
/* 화살표 버튼 이미지 설정 */
.nav_btn {
width: 32px;
height: 32px;
border: none;
cursor: pointer;
background: transparent no-repeat center / contain;
transition: background-image 0.2s;
}
/* 누를 수 없을 때 (기본) */
.prev_btn {
background-image: url("./images/leftarrow.png");
}
.next_btn {
background-image: url("./images/rightarrow.png");
}
/* 누를 수 있을 때 (active 클래스 추가 시) */
.prev_btn.active {
background-image: url("./images/leftarrow2.png");
}
.next_btn.active {
background-image: url("./images/rightarrow2.png");
}
/* 슬라이더 컨테이너: 드래그 방지를 위해 스크롤 숨김 */
.review_container {
padding-left: 186px;
overflow-x: hidden; /* 드래그 및 수동 스크롤 방지 */
user-select: none;
}
.review_wrapper {
display: flex;
gap: 30px;
padding-right: 186px;
transition: transform 0.5s ease-in-out; /* 부드러운 이동 효과 */
}
.review_card {
flex: 0 0 758px;
background: #fff;
padding: 50px 40px;
border-radius: 10px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
box-sizing: border-box;
}
/* 별점 규격: 29px x 19px, 간격 4px */
.review_card .star_wrap {
display: flex;
gap: 4px;
margin-bottom: 25px;
}
.review_card .star_wrap img {
width: 20px;
height: 19px;
}
.review_card .content {
font-size: 24px;
line-height: 1.4;
color: #333;
word-break: keep-all;
white-space: normal;
}
.review_card .author {
margin-top: 30px;
font-size: 15px;
color: #999;
}
.sec11 {
background-image: url(./images/section11_3_pc.png);
width: 100%;
aspect-ratio: 1920/886;
}
.sec11-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-left: 9.2%;
padding-right: 2.7%;
height: 100%;
align-content: center;
}
.section11_1-img {
width: 100%;
aspect-ratio: 1057/315;
}
.section11_1-img.mo_version {
aspect-ratio: unset;
}
.sec11-right img {
width: 100%;
aspect-ratio: 592/728;
}
.sec11-left {
width: 55%;
gap: 80px;
}
.sec11-right {
width: 30%;
aspect-ratio: 592/728;
}
.sec11-btnwrapper {
width: 72%;
display: flex;
justify-content: space-between;
margin-top: 80px;
}
.sec11-btnwrapper .sec11-btnwrapper-left,
.sec11-btnwrapper .sec11-btnwrapper-right {
width: 48%;
}
.sec11-btnwrapper .sec11-btnwrapper-left img,
.sec11-btnwrapper .sec11-btnwrapper-right img {
width: 80%;
margin: 0 auto;
}
.sec11-btnwrapper .sec11-btnwrapper-left a,
.sec11-btnwrapper .sec11-btnwrapper-right a {
width: 100%;
}
.sec11-btnwrapper .sec11-btnwrapper-left a img,
.sec11-btnwrapper .sec11-btnwrapper-right a img {
width: 100%;
}
/* 푸터 전체 컨테이너 */
.main_footer {
width: 100%;
/* 텍스트가 밝은 회색이므로 배경을 어둡게 처리했습니다.
이미지와 어우러지게 배경색을 맞춰주세요. */
background-color: #222;
background-image: url(./images/footer-img.png);
}
/* 1. 푸터 이미지 영역 */
.footer_img img {
width: 100%;
display: block;
max-width: 1920px; /* 전체 최대 너비 제한 (선택사항) */
margin: 0 auto;
}
/* 2. 푸터 텍스트 영역 */
.footer_info {
padding: 4% 9.4%; /* 상하 여백 */
text-align: left; /* 중앙 정렬 */
}
.info_inner {
max-width: 1400px;
margin: 0 auto;
}
.footer_info p {
color: #d8d8d8; /* 요청 컬러 */
font-size: 20px; /* 요청 폰트 사이즈 */
font-weight: 300; /* Light (300) */
line-height: 1.39; /* 행간 139% -> 1.39 */
letter-spacing: 0.02em; /* 자간 2% -> 0.02em */
font-family: "Pretendard", sans-serif;
word-break: keep-all; /* 단어 단위 줄바꿈 */
}
/* 구분선 스타일 (선택사항) */
.footer_info .bar {
margin: 0 5px;
opacity: 0.5;
}
/* 고객센터 부분 (간격 추가) */
.cs_info {
margin-top: 40px; /*
대신 마진으로 간격 조정 */
}