@charset "utf-8";
#scroller { width: 100%; }
.section {}

.section1 { min-height: 170vh; height: 170vh; position: relative; overflow: hidden;}
.section1 .box { 
width: 100%; height: 100vh; 
/*background: url('../img/main/sec1_bg.png')center/cover no-repeat , url('../img/main/sec1_bg.jpg') center/cover no-repeat; */
background:url('../img/main/sec1_bg_n.jpg')center/cover no-repeat;
display: flex; align-items: center; }
.section1 .box.fixed { position: absolute !important; bottom: 0 !important; left: 0 !important; margin: 0 !important; top: auto; }
.section1 .box .inner { width: 47.9166vw; height: 13.5416vw; padding-left: 15.4166vw; opacity: 0; }
.section1 .box .inner img { width: 100%; }
.section1 .box .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: url('../img/main/sec1_over.png') center/cover no-repeat; }
.section1 > p { position: absolute; left: 50%; top: 90vh; z-index: 3; margin-left: -25px; }
.section1 .object {position: absolute;}

/* 작은 화면 (예: 모바일) */
@media (max-width: 768px) {
    .section1 .box { 
		width: 100%; height: 100vh; 
        background: url('../img/main/sec1_bg_mobile.png') center/cover no-repeat;
		display: flex; align-items: center; 
    }
}


.section1 .obj1 {top: 17%; left: 11%;}
/* @keyframes littleCircle {
  from { transform: scale(0.8) }
  to { transform: scale(1) }
} */
.section1 .obj2 {top: 62%; left: 3%;}
/* @keyframes bigCircle {
  from { transform: translateY(10%) rotate(-80deg) scale(0.8); }
  to { transform: translateY(0) rotate(0deg) scale(1); }
} */

.section1 .obj3 {top: 4%; left: 81%;}
/* @keyframes bigCircle2 {
  from { transform: scale(0.8) }
  to { transform: scale(1) }
} */

.section1 .obj4 {top: 68%; left: 83%;}
.section1 .obj4 img {transform-origin: 50% 50%;}

.section1 .obj5 {top: 55%; width:100%}

.section1 .obj5 img{
    display: block;
    margin:auto;
}

.section1 .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0.15;
}

.section1 .bg-video__content {
  height: 100%;
  width: 100%;
/*  object-fit: cover; // background-size: cover �� �����. (HTML ��� or ������ �۵�)*/
  
}

.section3 { padding-bottom: 140px; padding-top: 140px;}
.section3 .inner-wrap { text-align: center; width: 1370px;}
.section3 .scrollVisible > p > span { position: relative; display: inline-block; z-index: 0; }
.section3 .scrollVisible > p > span img { position: relative; z-index: 1; }
.section3 .scrollVisible > p > span::after { content: ''; position: absolute; left: -2%; bottom: -5px; width: 0; height: 20px; background: #ffffff; transition: all 1s ease-in-out; transition-delay: .6s; }
.section3 .scrollVisible > p.on > span::after { width: 104%; }

.section3 .inner-wrap > .box { padding-top: 10px; }
.section3 .inner-wrap > .box:nth-of-type(1) { padding-top: 50px; }
.section3 .inner-wrap > .box > ul { display: flex; justify-content: space-between; padding: 10px 40px 0; }
.section3 .inner-wrap > .box > ul > li {}
.section3 .inner-wrap > .box > ul > li > p { text-align: left; line-height: 1; }
.section3 .inner-wrap > .box > ul > li > p:first-child { width: 250px; min-height: 136px; background: rgba(0,0,0,0.2); cursor: pointer; }
.section3 .inner-wrap > .box > ul > li > p:nth-child(2) { color: #000; font-size: 19px; font-weight: 700; padding: 27px 0 10px; }
.section3 .inner-wrap > .box > ul > li > p:nth-child(3) { color: #030303; font-size: 16px; font-weight: 500; }


/* 생각 더하기 */
.section3_1 { 
    width: 100vw; 
    min-width: 320px; /* 최소 너비를 줄여 반응형 지원 */
    height: 100vh; /* 높이를 100vh로 설정하여 화면 높이에 맞춤 */
    position: relative; 
    background-image: url('../img/main/sec3_1/bg.png'); /* 배경 이미지 추가 */
    background-size: cover; /* 이미지가 전체 배경을 덮도록 설정 */
    background-position: center; /* 배경 이미지 중앙 정렬 */
    background-repeat: no-repeat; /* 배경 이미지 반복 없음 */
}

.section3_1 > div { 
    width: 100%; 
    max-width: 900px; 
    margin: 50px auto 20px; 
}

.section3_1 > div > video { 
    width: 100%; 
}

.section3_1 > p { 
    text-align: center; 
}

.section3_1 ul.inner { 
    position: relative; /* 상대 위치로 변경 */
    width: 90%; /* 너비를 90%로 조정 */
    max-width: 1400px; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin: 0 auto; /* 중앙 정렬 */
    padding-top: 50px; /* 텍스트와의 간격 조정 */
}

.section3_1 ul.inner > li { 
    flex: 1 1 200px; /* 최소 너비 200px */
    text-align: center; 
    line-height: 1; 
    margin: 10px; /* 위아래 간격 조정 */
}

.section3_1 ul.inner > li > p { 
    font-family: 'Anton', sans-serif !important; 
    color: #000 !important; 
}

.section3_1 ul.inner > li > p:first-child { 
    font-size: 75px; 
    margin-bottom: 15px; 
}

.section3_1 ul.inner > li > p:nth-child(2) { 
    font-size: 16px; 
}

.section3_1 p.logo {
    padding-top: 160px; 
}

.section3_1 p.text {
    padding-top: 60px; 
}

.section3_1 p.text img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 1400px) {
    .section3_1 ul.inner {
        width: 95%; /* 작은 화면에서 너비 조정 */
        bottom: 100px; /* 위치 조정 */
    }
}

@media (max-width: 600px) {
    .section3_1 ul.inner {
        flex-direction: column; /* 작은 화면에서 세로로 배치 */
        position: static; /* 작은 화면에서는 절대 위치 해제 */
        margin-left: 0; /* 작은 화면에서 가운데 정렬 해제 */
        transform: none; /* 작은 화면에서 가운데 정렬 해제 */
        bottom: 0; /* 작은 화면에서 위치 조정 */
        width: 100%; /* 작은 화면에서 전체 너비 사용 */
    }

    .section3_1 ul.inner > li {
        width: 100%; /* 작은 화면에서 전체 너비 사용 */
    }

    .section3_1 p.logo, .section3_1 p.text {
        padding-top: 20px; /* 작은 화면에서 패딩 조정 */
    }

    .section3_1 p.text img {
        width: 90%; /* 작은 화면에서 이미지 너비 조정 */
    }
}



/* 무한 슬라이드 */
.section6 {
    overflow: hidden;
    position: relative;
    background-color: #F5F5F5;
    height: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section6 > p:nth-of-type(1) {
    z-index: 2;
}

.slide-track {
    display: flex;
    width: calc(200% + 20px); /* Adjust width to include padding between elements */
}

.slide-left {
    display: flex;
    position: absolute;
    top: 1%;
    left: 0;
/*    margin-top: -110px;*/
    animation: scrollLeft 40s linear infinite;
}

.slide-right {
    display: flex;
    position: absolute;
    top: 83%;
    right: 0;
/*    margin-top: 40px;*/
    animation: scrollRight 40s linear infinite;
}

/* 애니메이션 정의 */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}


.section4 { padding: 140px 0 0px; }
.section4 .inner-wrap { text-align: center;}
.section4 .scrollVisible > p > span { position: relative; display: inline-block; z-index: 0; }
.section4 .scrollVisible > p > span img { position: relative; z-index: 1; }
.section4 .scrollVisible > p > span::after { content: ''; position: absolute; left: -2%; bottom: -5px; width: 0; height: 20px; background: #fff; transition: all 1s ease-in-out; transition-delay: .6s; }
.section4 .scrollVisible > p.on > span::after { width: 104%; }

.section4 .inner-wrap > ul { display: flex; flex-wrap: wrap; margin: 40px 0 60px; align-items: center; justify-content: center;}
.section4 .inner-wrap > ul > li { margin-top: 10px; position: relative; margin-left: 10px; }
.section4 .inner-wrap > ul > li .layer { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0); color: #fff; padding-top: 30px; box-sizing: border-box; transition: background 0.3s ease; }
.section4 .inner-wrap > ul > li .layer > p { color: #fff; transition: all 0.3s ease; opacity: 0; }
.section4 .inner-wrap > ul > li .layer > p:nth-of-type(1) { font-size: 30px; position: relative; transform: translateY(30px);}
.section4 .inner-wrap > ul > li .layer > p:nth-of-type(1)::after { content: ''; position: absolute; left: 50%; top: -40px; width: 1px; height: 20px; background: #36ffdf; }
.section4 .inner-wrap > ul > li .layer > p:nth-of-type(2) { font-size: 14px; margin: 5px 0 20px; transform: translateY(50px); }
.section4 .inner-wrap > ul > li .layer > p:nth-of-type(3) { border: 2px solid #36ffdf; width: 50px; height: 50px; border-radius: 50px;  display: flex; justify-content: center; align-items: center; padding-bottom: 2px; font-size: 14px; color: #fff; transform: translateY(70px); }

.section4 .inner-wrap > ul > li:hover .layer { background: rgba(0,0,0,0.8); }
.section4 .inner-wrap > ul > li:hover .layer > p { opacity: 1; transform: translateY(0); }

/* 맨 밑줄 로고 애니메이션 */
.section5 {
    width: 100%;
    padding-top: 0px;
    z-index: 2;
    height: 300px; /* 높이를 원하는 만큼 조정하세요 */
    background: #fff;
    position: relative;
}

.section5 .tscroll {
    position: relative;
    width: 100%;
    padding: 10px 0;
    font-size: 100px;
    z-index: 2;
    transition-duration: 0.1s;
}

.section5 .tscroll > p {
    text-align: center;
    transition-duration: 0.1s;
    transform: translateY(150px); /* 섹션 높이에 따라 조정하세요 */

}


.section5 .eyes {

    position: relative;
    left: 38%;
    transition: top 0.5s ease-in-out;

}


.videoBox { display: none; background: rgba(0,0,0,0.5); box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.videoview { position: relative; width: 900px; height: 600px; margin: 100px auto; background: #fff; border-radius: 15px; box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.3); }
.videoview div { overflow: hidden; padding: 45px 50px; }
.videoview ul { width: 100%; overflow:hidden; }
.videoview ul li {}
.videoview a { font-size: 3em; font-weight: normal; position: absolute; right: 15px; top: 15px; cursor: pointer; }



.txt1 { position: relative; left: 3%; bottom: 28%;  margin-left: 0px; width: 1920px; animation: shakeY 0.8s infinite alternate;}
.txt2 { position: relative; left: 82.5%; bottom: 28%; margin-left: 0px; width: 1920px; animation: shakeY 0.8s infinite alternate;}
@keyframes shakeY {
  0% { bottom: 28%; }
  100% { bottom: 29%; }
  }

 .content{
		width: 1648px;
		margin:auto;
		position: relative;
	}
	.section2{
	margin-top:150px;
	position:relative;
	display: flex;
	justify-content: space-between;
	width:80%;
   }

	.section2_bg{
	position: absolute;
	left:50px;
	bottom:0px;
	width: 584px;
	height: 614px;
	}

	.section2_bg .section2_bg_box{
	position:relative;
	width: 100%;
	height:100%;
	}

	.section2_bg .section2_visual{
	position:absolute;
	bottom:40px;
	width: 1920px;
    height: 926px;
	z-index:1;
	}

	.section2_bg .loop_box{
	position: relative;
	}
	
	.section2_bg .loop_box span{
	position: absolute;
	right:150px;
	top:-10px;
	display: block;
	width: 117px;
	height: 117px;
	background: url("/") center no-repeat;
	animation: rotate_image 14s linear infinite;transform-origin: 50% 50%;
	z-index:1;
	}

	@keyframes rotate_image{
	100% {
		transform: rotate(360deg);
	}
	}


	.menu_slide{
	overflow: hidden;
	margin-left:auto;
	width:1050px;
	padding-bottom:140px;
	}

	.content .menu_slide_btn{
	width: 1200px;
	height: 1px;
	position:absolute;
	right:-64px;
	top:293px;
	}

	.content.menu_slide .swiper-slide img{max-width:60%}

	.content.menu_slide_btn .swiper-button-next{
	width: 27px;
	height: 52px;
	background: url(<?php echo G5_THEME_IMG_URL ?>/main/test/section02_next.png) center no-repeat;
	}

	.content.menu_slide_btn .swiper-button-next::after{
	display: none;
	}

	.content.menu_slide_btn .swiper-button-prev{
	width: 27px;
	height: 52px;
	background: url(<?php echo G5_THEME_IMG_URL ?>/main/test/section02_prev.png) center no-repeat;
	}

	.content.menu_slide_btn .swiper-button-prev::after{
	display: none;
	}

	.mosonryHeader {
			text-align: center;
	}

/* 모든광고 */
		h2 .highlight {
			color: #00FFFF; /* 민트색 */
			font-size: 50px;
		}

        .section5_1 {
            background-color: #000;
            color: #fff;
            padding: 100px 0;
            text-align: center;
			
        }

		 .section5_1 .text{
			padding-bottom: 70px;
		 }

        .content-container-custom {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .content-container-custom h2 {
            color: white;
            font-size: 50px; /* 글씨 크기 키움 */
			margin-top: 60px;
        }

        .content-container-custom p {
            color: white;
            line-height: 1.6; /* 행간 조정 */
			padding: 30px;
			margin-bottom: 50px;
			font-size: 18px; 
        }

        .ad-cards-custom {
            display: flex;
            justify-content: center;
            position: relative; /* 겹치기 위해 부모 요소를 상대적으로 배치 */
            margin-top: 20px;
            transition: transform 1s ease, opacity 1s ease;
            height: 400px; /* 배경 높이 조절 */
        }

        .ad-card-custom {
            width: 250px; /* 박스 크기 키움 */
            height: 310px; /* 박스 크기 키움 */
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute; /* 절대 위치를 사용하여 겹치기 */
            transition: transform 1s ease, background-color 1s ease;
        }

        /* 각 박스의 초기 겹침 상태 설정 */
        .ad-card-custom:nth-child(1) { transform: translate(0, 0) rotate(-10deg); }
        .ad-card-custom:nth-child(2) { transform: translate(0, 0) rotate(5deg); }
        .ad-card-custom:nth-child(3) { transform: translate(0, 0) rotate(-5deg); }
        .ad-card-custom:nth-child(4) { transform: translate(0, 0) rotate(10deg); }
        .ad-card-custom:nth-child(5) { transform: translate(0, 0) rotate(-15deg); }

        /* 펼쳐질 때 위치와 회전 해제 */
        .ad-cards-custom.visible .ad-card-custom:nth-child(1) { transform: translate(-590px, -20px) rotate(0deg); }
        .ad-cards-custom.visible .ad-card-custom:nth-child(2) { transform: translate(-295px, 20px) rotate(0deg); }
        .ad-cards-custom.visible .ad-card-custom:nth-child(3) { transform: translate(0px, -20px) rotate(0deg); }
        .ad-cards-custom.visible .ad-card-custom:nth-child(4) { transform: translate(295px, 20px) rotate(0deg); }
        .ad-cards-custom.visible .ad-card-custom:nth-child(5) { transform: translate(590px, -20px) rotate(0deg); }

        .ad-card-custom h3 { margin: 0; font-size: 24px; color: #007bff; }
        .ad-card-custom p { margin: 10px 0 0; font-size: 18px; color: black; }


 /* 새로 배경 */
.section6_1 {
    background-color: #ffffff;
    padding: 50px 0;
    text-align: left;
    position: relative; /* 절대 위치를 위한 부모 요소 */
}

.why-daba-container {
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* 상단에 맞추기 */
    justify-content: space-between; /* 양쪽 끝 정렬 */
}

.why-daba-left {
    flex: 1;
    padding: 20px;
    position: sticky; /* 고정 위치 */
    top: 50px; /* 원하는 고정 위치 */
}

.why-daba-right {
    flex: 1;
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    justify-content: center;
    align-items: center;
}

.why-daba-right img {
    height: auto;
}

.why-daba-text {
    padding-left: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 왼쪽 정렬 */
    transition: transform -3s ease; /* 부드러운 이동을 위한 트랜지션 */
}

.why-daba-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-daba-image img {
    height: auto;
}

.why-daba-text .outer-logo {
    position: relative;
    width: 200px; /* 외부 로고 크기 */
    height: 200px; /* 외부 로고 크기 */
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
    margin-bottom: 20px; /* 아래에 간격 추가 */
}

.why-daba-text .logo7 {
    width: 100%; /* 외부 로고가 컨테이너를 채우도록 설정 */
    height: 100%;
    position: absolute; /* 회전하는 로고 */
    animation: rotate_image 14s linear infinite;
}

.why-daba-text .inner-logo {
    position: absolute;
    width: 100px; /* 내부 로고 크기 */
    height: 100px; /* 내부 로고 크기 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-daba-text .logo6 {
    width: 100%; /* 내부 로고가 컨테이너를 채우도록 설정 */
    height: 100%;
    position: absolute;
}

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

@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.why-daba-text.animate {
    animation: moveUpDown 2s infinite;
}

.section6_1 .text_2 { 
    padding-top: 30px;
    padding-bottom: 30px;
}

.section6_1 .text_3 {
    display: inline-block; /* 인라인 블록으로 설정하여 가운데 정렬에 영향을 받도록 함 */
    vertical-align: middle; /* 수직 정렬을 중간으로 설정 */
}

.section6_1 .scroll {
	padding-top: 30px;
    display: inline-block; /* 인라인 블록으로 설정하여 가운데 정렬에 영향을 받도록 함 */
    vertical-align: middle; /* 수직 정렬을 중간으로 설정 */

}

/* 애니메이션 정의 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 기본적으로 보이지 않도록 설정 */
.why-daba-left .animated {
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 애니메이션 클래스 */
.why-daba-left .fade-in-up {
    animation: fadeInUp 0.5s forwards;
}

.why-daba-left .fade-in-down {
    animation: fadeInDown 0.5s forwards;
}

/* 개별 애니메이션 지연 시간 */
.why-daba-left .text_1 {
    animation-delay: 0s;
}

.why-daba-left .text_2 {
    animation-delay: 0.5s;
}

.why-daba-left .text_3 {
    animation-delay: 1s;
}

.why-daba-left .scroll {
    animation-delay: 1.5s;
}


/* 첫 화면 슬라이드*/
#intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: introSlideLeft 2s forwards;
    animation-delay: 4s; /* 애니메이션 시작 전 대기 시간 */
}

#unique-slide-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 2s;
}

#unique-slide-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    opacity: 1;
    transition: transform 2s, opacity 2s;
}

#unique-slide-content .left {
    transform: translateX(-20%);
}

#unique-slide-content .right {
    transform: translateX(calc(15%));
}

#unique-slide-content.center .left {
    transform: translateX(0); /* 왼쪽 이미지가 더 왼쪽으로 이동 */
    opacity: 1;
}

#unique-slide-content.center .right {
    transform: translateX(-130px); /* 오른쪽 이미지는 정확히 중앙으로 이동 */
    opacity: 1;
}

.unique-horizontal-line {
    border-top: 1px solid gray;
    width: 100%;
    margin: 10px 0;
}



@keyframes introSlideLeft {
    0% { left: 0; }
    100% { left: -100%; }
}


.hidden {
    display: none !important;
}