@charset "utf-8";
.overflow-hidden {
overflow: hidden !important;
position: fixed;
width: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
h1, h2, h3 {
margin-bottom: 20px;
font-size: 28px;
line-height: 1;
text-transform: capitalize;
-webkit-text-transform: capitalize;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-webkit-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-family: "Oswald", sans-serif;
color:#ffffff;
letter-spacing: 1.2px;
-webkit-text-transform: uppercase;
text-transform: uppercase;
}
p {
font-size: 24px;
font-family: "NEXON Lv1 Gothic OTF","Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
font-weight: 200;
color:#ffffff;
}
.pinWrapper {
height: 100%;
width: 100%;
position: relative;
z-index: 11;
}
.scrollmagic-pin-spacer {
position: absolute !important;
clip: rect(auto, auto, auto, auto);
}
.event {
position: relative;
overflow: hidden;
height: 100svh;
width: 100vw;
z-index: 1;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.event::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#section1.event::before {
background-color: rgb(21 22 28 / 15%);
}
#section2.event::before {
background-color: rgb(21 22 28 / 34%);
}
#section3.event::before {
background-color: rgb(86 82 76 / 57%);
}
#section4.event::before {
background-color: rgb(120 115 103 / 58%);
}
#section1 {
background-image: url("/home/theme/basic/img/bg-living.jpg");
}
#section2 {
background-image: url("/home/theme/basic/img/bg-kitchen.jpg");
}
#section3 {
background-image: url("/home/theme/basic/img/bg-badroom.jpg");
}
#section4 {
background-image: url("/home/theme/basic/img/bg-office.jpg");
}
#section2 .image {
background-image: url("/home/theme/basic/img/bg-kitchen.jpg");
}
#section3 .image {
background-image: url("/home/theme/basic/img/bg-badroom.jpg");
}
#section4 .image {
background-image: url("/home/theme/basic/img/bg-office.jpg");
}
.image {
height: 100%;
width: 100%;
top: 0%;
left: 0%;
position: absolute;
background-size: cover;
background-position: center center;
transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
-webkit-box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%);
transform-origin: center;
-webkit-transform-origin: center;
z-index: 8888;
overflow: hidden;
border-radius: 0;
}
.image:not(#loaderVideo) {
top: -50%;
width: 480px;
height: 480px;
left: auto;
right: 100px;
position: absolute;
border-radius: 12px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
#section1 .image video {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center center;
position: absolute;
top: 0;
left: 0;
}
.text {
top: -50%;
left: 0;
position: absolute;
transform: translate(60px, -50%);
-webkit-transform: translate(60px, -50%);
width: 50%;
}
#section1 .text {
top: 50%;
}
/* Media Query */
@media screen and (max-width: 1399px) {
h2 {
font-size: 28px;
}
p {
font-size: 22px;
}
.image:not(#loaderVideo) {
width: 405px;
height: 405px;
position: absolute;
right: 80px;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
}
@media screen and (max-width: 1199px) {
h2 {
font-size: 24px;
}
p {
font-size: 20px;
}
.image:not(#loaderVideo) {
width: 360px;
height: 360px;
position: absolute;
right: 60px;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
}
@media screen and (max-width: 991px) {
h2 {
font-size: 20px;
}
p {
font-size: 18px;
}
.image:not(#loaderVideo) {
width: 270px;
height: 270px;
position: absolute;
right: 40px;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
}
@media screen and (max-width: 767px) {
h2 {
font-size: 18px;
}
p {
font-size: 16px;
}
.text {
top: -50%;
left: 0;
position: absolute;
transform: translate(40px, -50%);
-webkit-transform: translate(40px, -50%);
width: 48%;
}
.image:not(#loaderVideo) {
width: 220px;
height: 220px;
position: absolute;
right: 20px;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
}
@media screen and (max-width: 576px) {
h2 {
font-size: 18px;
}
p {
font-size: 14px;
}
.text {
top: -50%;
left: 0;
position: absolute;
transform: translate(15px, -50%);
-webkit-transform: translate(15px, -50%);
width: 48%;
}
.image:not(#loaderVideo) {
position: absolute;
top: -55%;
right: 20px;
width: 180px;
height: 180px;
transform: translate(0%, -25%);
-webkit-transform: translate(0%, -25%);
}
}
/**********arrow3d**************/
.scrollBtn.hidden {
opacity: 0;
}

.arrow {
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50% 50%;
transform: translate3d(-50%, -50%, 0);
}

.arrow-first {
-webkit-animation: arrow-movement 2s ease-in-out infinite;
animation: arrow-movement 2s ease-in-out infinite;
}

.arrow-second {
-webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
animation: arrow-movement 2s 1s ease-in-out infinite;
}

.arrow:before,
.arrow:after {
background: #fff;
content: "";
display: block;
height:5px;
position: absolute;
top: 45dvh;
left:-15px;
width: 30px;
}

.arrow:before {
transform: rotate(45deg) translateX(-5px);
transform-origin: top left;
}

.arrow:after {
transform: rotate(-45deg) translateX(5px);
transform-origin: top right;
}

@-webkit-keyframes arrow-movement {
0% {
opacity: 0;
top: 45%;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes arrow-movement {
0% {
opacity: 0;
top: 45%;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}