:root { 
    /* font-family */
    --font-zenDots: "Zen Dots", cursive;
    --font-pretendard: "Pretendard Variable";
    --font-nanumPen: "Nanum Pen Script", cursive;

    /* font-size */
    --font-size-xx-large: 6.4rem;
    --font-size-x-large: 4.8rem;
    --font-size-large: 3.8rem;
    --font-size-larger: 2.8rem;
    --font-size-medium: 2.4rem;
    --font-size-small: 1.6rem;
    --font-size-micro: 1.2rem;

    /* color */
    --color-backGround: #e6e6e9 ;
    --color-black: #1A1A1E;
    --color-dimGray: #504f56;
    --color-darkGray: #7D7B8B;
    --color-lightGray: #a8a8ac;
    --color-white: #F2F2F2;
    --color-darkBlue: #2E2B3D;
    --color-deepGreen: #496355;
    --color-green: #339862;
    --color-lightGreen: #79BF7B;
    --color-yellow: #F5B95B;
    --color-lightYellow: rgb(226, 226, 153);

    /* comon */
    --wind: wind 2s ease 0s infinite alternate;
}

/* COMMON
==================================================================*/
html { font-size: 62.5%; font-weight: 400; line-height: 1.5; scroll-behavior: smooth; }
body { overflow-x: hidden; box-sizing: border-box; font-family: "Pretendard Variable", sans-serif; color: var(--color-black); background-color: var(--color-black); }
body::-webkit-scrollbar { display: none; }
html,body { width: 100%; height: 100%; }
section { width: 100%; height: 100vh; }
.absol img { position: absolute; }
#texture { position: fixed; top: 0; width: 100%; z-index: 9998; opacity: 0.5; mix-blend-mode: overlay; }
.container { position: relative; width: 100%; height: 200vh; background-color: var(--color-backGround); background-image: url(../img/wavy_bot.svg); background-repeat: no-repeat; background-position: 0 101%; background-size: 102%; }
.container::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/wavy_top.svg); background-repeat: no-repeat; background-position: 0 -0.5%; background-size: 101%; }
h1.contentTitle { font-family: var(--font-zenDots); font-size: var(--font-size-larger); letter-spacing: 0.05em; color: var(--color-darkBlue); }
h1.green { color: var(--color-green); }

/* HEADER
==================================================================*/
header { position: fixed; z-index: 9999; top: 0; width: 100%; height: 80px; background: linear-gradient( to top, rgba(44, 71, 62, .0), rgba(26, 26, 30, 0.5)); backdrop-filter: blur(10px); }
header .progress-bar { width: 0; height: 3px; background-color: rgba(51, 152, 98, 0.5); border-radius: 10px; }
header h1#logo { float: left; margin-left: 16rem; line-height: 80px; vertical-align: middle; font-size: var(--font-size-larger); color: var(--color-white);  }
header h1#logo:hover { cursor: pointer; color: var(--color-backGround) }
header h1#logo > img { margin-right: 1.6rem; width: 0.75em; }
header nav { width: 100%; height: 80px; font-size: var(--font-size-small); }
header nav ul { float: right; margin-right: 16rem; }
header nav ul li { float: left; line-height: 80px; vertical-align: middle; }
header nav ul li a { margin-left: 2.5em; display: block; color: var(--color-white); font-weight: 100; }
header nav ul li a:hover { color: var(--color-creamCan); }

/* VISUAL
==================================================================*/
.visual { overflow: hidden; position: relative; background: linear-gradient(to top, rgb(174, 194, 124), rgba(0, 0, 0, 0)), #85dad2; }
.visual #visual-title { z-index: 10; position: absolute; bottom: 45%; left: 16em; }
.visual #visual-title > h1 { animation: vs-title 2s ease-in-out 4s forwards; opacity: 0; font-family: var(--font-zenDots); font-size: var(--font-size-large); color: var(--color-white); letter-spacing: 0.05em; }
.visual #visual-title #visual-sub-title { animation: vs-title 2s ease-in-out 4.25s forwards; opacity: 0; font-family: var(--font-nanumPen); font-size: var(--font-size-larger); color: var(--color-lightGray); letter-spacing: 0.025em; }
/* img */
.visual #left-cloud { z-index: 9; width: 20%; bottom: 70%; left: 16%; animation: left-cloud 7s ease-in-out 0s forwards, cloud 3s linear 0s infinite alternate; opacity: 0; }
.visual #right-cloud { z-index: 9; width: 20%; bottom: 65%; right: 20%; animation: right-cloud 7.25s ease-in-out 0s forwards, cloudR 3s linear 0.5s infinite alternate; opacity: 0; }
.visual #grass { z-index: 8; width: 60%; bottom: 3%; left: 20%; animation: grass 1s ease-in-out 3s forwards; opacity: 0; }
.visual #left-pot01 { z-index: 7; width: 8%; bottom: 10%; left: 25%; animation: left-pot01 1s ease-in-out 2.9s forwards, var(--wind); transform-origin: bottom; opacity: 0; }
.visual #left-pot02 { z-index: 7; width: 10%; bottom: 8%; right: 20%; animation: left-pot02 0.75s ease-in-out 2.9s forwards, var(--wind); transform-origin: bottom; opacity: 0; }
.visual #left-pot { z-index: 6; width: 16%; bottom: 12%; left: 33%; animation: left-pot .5s ease-in-out 3.2s forwards; opacity: 0; }
.visual #right-pot { z-index: 6; width: 14%; bottom: 12%; right: 32%; animation: right-pot .5s ease-in-out 3.4s forwards; opacity: 0; }
.visual #rooftop { z-index: 5; width: 70%; bottom: -2%; left: 50%; animation: rooftop 3s ease-in-out 0s; transform: translateX(-50%); }
.visual #background { width: 100%; bottom: 0; left: 50%; z-index: 4; transform: translateX(-50%); opacity: 0; }
.visual #front-l-bilding { z-index: 3; width: 22%; bottom: -1%; left: 0; animation: front-l-bilding 1s ease-in-out 0.5s forwards; opacity: 0; }
.visual #front-r-bilding { z-index: 3; width: 32%; bottom: 0; right: 0; animation: front-r-bilding 1s ease-in-out 0.5s forwards; opacity: 0; }
.visual #back-l-bilding { z-index: 2; width: 35%; bottom: 0; left: 0; animation: back-l-bilding 1s ease-in-out 0s; }
.visual #back-r-bilding { z-index: 2; width: 35%; bottom: 0; right: 0; animation: back-r-bilding 1s ease-in-out 0s; }
.visual #left-building { z-index: 1; width: 30%; height: 100%; bottom: 0; left: 0; opacity: 0; }
.visual #right-building { z-index: 1; width: 30%; bottom: 0; right: 0; }
.visual #sun { width: 35%; bottom: 0%; left: 50%; animation: sun 2.25s ease-in-out 2s forwards; transform: translateX(-50%); opacity: 0; }
@keyframes grass { 0% { opacity: 0; transform: scale(0); } 50%{ opacity: 0; } 75% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes vs-title { 0% { opacity: 0; } 100% { opacity: 1; }  }
@keyframes left-pot01 { 0% { opacity: 0; transform: scale(0); } 50%{ opacity: 0; } 75% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes left-pot02 { 0% { opacity: 0; transform: scale(0); } 50%{ opacity: 0; } 75% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wind { from { transform: rotate(5deg); } to { transform: rotate(-5deg); } }
@keyframes cloud { from { transform: translateX(-15px); } to { transform: translateX(15px); } }
@keyframes cloudR { from { transform: translateX(15px); } to { transform: translateX(-15px); } }
@keyframes left-pot { 0% { opacity: 0; transform: scale(0); } 50%{ opacity: 0; } 75% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes right-pot { 0% { opacity: 0; transform: scale(0); } 50%{ opacity: 0; } 75% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rooftop { 0% { opacity: 0; bottom: -50%; } 50%{ opacity: 0; bottom: -3% } 75% { opacity: 1; bottom: -1% } 100% { opacity: 1; bottom: -2% } }
@keyframes front-l-bilding { from { left: -10%; opacity: 0; } to { left: -1%; opacity: 1; } }
@keyframes front-r-bilding { from { right: -10%; opacity: 0; } to { right: -1%; opacity: 1; } }
@keyframes back-l-bilding { from { left: -10%; opacity: 0; } to { left: 0; opacity: 1; } }
@keyframes back-r-bilding { from { right: -10%; opacity: 0; } to { right: 0; opacity: 1; } }
@keyframes left-cloud { 0% { opacity: 0; left: -50%; } 50%{ opacity: 0; } 75% { opacity: 1; left: 17%; } 100% { opacity: 1; left: 16% } }
@keyframes right-cloud { 0% { opacity: 0; right: -50%; } 50%{ opacity: 0; } 75% { opacity: 1; right: 21%; } 100% { opacity: 1; right: 20% } }
@keyframes left-building { from { bottom: -50%; opacity: 1; } }
@keyframes right-building { from { bottom: -50%; opacity: 1; } }
@keyframes sun { 0% { opacity: 0; bottom: -50%; } 50%{ opacity: 0; } 75% { opacity: 1; bottom: -8%; } 100% { opacity: 1; bottom: -10%; } }

/* ELEVATOR
==================================================================*/
.elevator { overflow: hidden; position: relative; width: 100%; height: 100vh; background: url(../img/elevator/ele_bg.svg) no-repeat center / cover; } 
.elevator .elevator-title { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--color-white); letter-spacing: 0.05em; line-height: 1.25; }
.elevator .elevator-title .ele-title { margin-bottom: 0.25em; font-size: var(--font-size-xx-large); font-family: var(--font-zenDots); letter-spacing: 0.05em; }
.elevator .elevator-title span { font-size: 2.2rem; color: var(--color-lightYellow); }
.elevator .eleLayout { width: 100%; height: 100%; box-sizing: border-box; }
.elevator .eleLayout > div { z-index: 4; position: absolute; background-color: var(--color-darkBlue); }
.elevator .eleLayout #top { width: 100%; height: 45px; top: 0; }
.elevator .eleLayout #bot { width: 100%; height: 10px; bottom: 0;}
.elevator .eleLayout #left { width: 8.5%; height: 100%; left: 0; }
.elevator .eleLayout #right { width: 8.5%; height: 100%; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.elevator .eleLayout #right > p { width: 74%; height: 40px; margin-bottom: 30px; text-align: center; line-height: 40px; font-size: 2.4rem; font-weight: 700; background-color: #060606; color: #bb0000; border: 3px solid #58555E; }
.elevator .eleLayout #right > .ele-btn { width: 64%; height: 316px; background-color: #232131; border: 3px solid #58555E; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 25px; }
.elevator .eleLayout #right > .ele-btn span { width: 38px; height: 38px; background-color: #ca9643; border: 8px solid #7a7a7a; border-radius: 50%; box-sizing: border-box; }
.elevator .eleLayout #right > .ele-btn span.active { background-color: #ffdc61; }
/* img */
.elevator .ele-bg { width: 100%; top: 0; left: 0; filter:brightness(80%); }
.elevator .left-door { display: block; z-index: 2; width: 100%; top: 50%; left: 0; transform: translate(-50%, -50%); transition: all 1.1s; }
.elevator .right-door { display: block; z-index: 2; width: 100%; top: 50%; right: -100%; transform: translate(-50%, -50%); transition: all 1.2s; }
.elevator #yello-light { z-index: 1; width: 8%; top: 6%; left: 50%; transform: translateX(-50%); }
.elevator #yellow-light { width: 16%; top: 25%; left: 50%; transform: translateX(-50%); }
.elevator #green-light { width: 10%; top: 5%; left: 30%; }
.elevator #blue-light { width: 10%; top: 5%; right: 30%; }
.elevator #leaf-bg { width: 85%; bottom: 0; left: 50%; transform: translateX(-50%); }
/* OVERVIEW TITLE */
.ele-content { position: relative; z-index: 10; width: 100%; height: 35vh; font-family: var(--font-pretendard); background-color: var(--color-darkBlue); color: var(--color-white); }
.ele-content .ele-content-box { position: absolute; left: 8.25%; }
.ele-content .ele-content-box h3 { padding-top: 1.5em; padding-bottom: 1em; font-size: 3.4rem; font-family: var(--font-zenDots); font-weight: 400; }
.ele-content .ele-content-box h1 { font-size: 4rem; font-weight: 700; }
.ele-content .ele-content-box p { font-weight: 300; }
.ele-content .ele-content-box p:nth-of-type(1) { font-size: var(--font-size-larger); margin-bottom: 1em; }
.ele-content .ele-content-box p:nth-of-type(2) { font-size: var(--font-size-medium); color: var(--color-darkGray); }

/* 1F OVERVIEW CONTENT */
.project-container { position: relative; width: 100%; height: 470vh; background-color: var(--color-backGround); background-image: url(../img/wavy_bot.svg); background-repeat: no-repeat; background-position: 0 101%; background-size: 102%; }
.project-container::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/wavy_top.svg); background-repeat: no-repeat; background-position: 0 -0.5%; background-size: 101%; }
.project-container .pj-content { position: absolute; top: 11% ; left: 8.25%; }
.project-container .pj-content .pj-img-box { position: relative; z-index: 1; margin-right: 13em; }
.project-container .pj-content .pj-img-box .pj-img-wrap { overflow: hidden; display: flex; justify-content: space-around; margin-right: 13em; }
.project-container .pj-content .pj-img-box .pj-img-wrap img { position: relative; top: 50px; width: 30%; padding-top: 6em; transition: all .5s; }
.project-container .pj-content .pj-img-box .pj-img-wrap img:nth-of-type(2) { transition: all .5s ease .25s; }
.project-container .pj-content .pj-img-box a { display: block; text-align: right; margin-right: 17em; margin-top: 2em; font-size: var(--font-size-small); color: var(--color-lightGray); letter-spacing: 0.05em; text-decoration: underline; cursor: pointer; }
.project-container .pj-content .pj-img-box h3 { font-family: var(--font-zenDots); font-size: var(--font-size-large); font-weight: 400; color: var(--color-green); letter-spacing: 0.05em; margin-top: 1em; }
.project-container .pj-content .pj-img-box h1 { font-size: var(--font-size-larger); margin-top: 0.75em; margin-bottom: 0.5em; color: var(--color-black); font-weight: 700; letter-spacing: 0.05em; }
.project-container .pj-content .pj-img-box p { font-size: var(--font-size-medium); font-weight: 500; line-height: 1.5; }
.project-container .pj-content .pj-img-box p > span { color: #339862; font-weight: 700; }
.project-container .pj-content .pj-img-box p > #namess { position: relative; color: var(--color-black); }
.project-container .pj-content .pj-img-box p > #namess::after { content: ''; z-index: -1; position: absolute; top: 3px; left: 0; display: inline-block; width: 100%; height: 25px; background: rgba(51, 152, 98, 0.4); }
.project-container .pj-content > img:nth-of-type(1) { width: 100%; margin-top: 20em; }
.project-container .pj-content > img:nth-of-type(2) { width: 100%; margin-top: 20em; }
/* user example */
.project-container .pj-content .box { overflow: hidden; display: flex; justify-content: flex-start; gap: 4.8rem; width: 100%; height: 100%; }
.project-container .pj-content .pj-user-box { transition: all 250ms ease-in-out; opacity: 0; margin-top: 3em; margin-bottom: 2em; position: relative; width: 30%; max-width: 504px; height: 30%; max-height: 248px; background-color: #fff; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25); border-radius: 25px; }
.project-container .pj-content .pj-user-box:nth-child(1) { top: 50px; }
.project-container .pj-content .pj-user-box:nth-child(2) { top: 50px; transition-duration: 0.5s; }
.project-container .pj-content .pj-user-box:nth-child(3) { top: 50px; transition-duration: 0.75s; }
.project-container .pj-content .pj-user-box img { width: 100%; padding: 5em 0; }

/* 1.9F PROJECT GOAL */
.ele-goal { width: 100%; height: 60vh; background-color: var(--color-darkBlue); display: grid; place-items: center; }
.ele-goal .ele-goal-box { text-align: center; color: var(--color-white); }
.ele-goal .ele-goal-box h3 { position: relative; z-index: 1; font-size: var(--font-size-large); font-family: var(--font-zenDots); margin-top: -2em; margin-bottom: 2em; letter-spacing: 0.1em; }
.ele-goal .ele-goal-box h1 { font-size: var(--font-size-large); font-weight: 600; margin-top: 2em; letter-spacing: 0.05em; }

/* 2F DESIGN CONTENT */
.app-container { position: relative; height: 200vh; background-color: var(--color-darkBlue); color: var(--color-white); }
.app-container img:nth-of-type(1) { position: absolute; top: -35%; width: 100%; height: 100%; }
.app-container h1 { position: absolute; top: 15%; left: 9%; font-family: var(--font-zenDots); font-size: var(--font-size-large); letter-spacing: 0.05em; }
.app-container img:nth-of-type(2) { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); width: 83%; }
/* 2F DESIGN FRAME CONTENT */
.frame-container { overflow: hidden; position: relative; width: 100%; height: 200vh; background-color: var(--color-backGround); background-image: url(../img/wavy_bot.svg); background-repeat: no-repeat; background-position: 0 101%; background-size: 102%; }
.frame-container::before { content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/bubble_gray.png); background-repeat: no-repeat; background-position: 0 30%; background-size: 100%; filter:contrast(75%); }
.frame-container::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/wavy_top.svg); background-repeat: no-repeat; background-position: 0 -0.5%; background-size: 101%; }
.frame-container h1 { position: absolute; top: 15%; left: 9%; }
.frame-container .frame-wrap { position: relative; top: 20%; left: 9%; }
.frame-container .frame-wrap .frame > img { position: absolute; transition: all .75s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; }
.frame-container .frame-wrap .frame > img:nth-child(1) { z-index: 5; left: 100px; }
.frame-container .frame-wrap .frame > img:nth-child(2) { z-index: 4; left: 350px; }
.frame-container .frame-wrap .frame > img:nth-child(3) { z-index: 3; left: 600px; }
.frame-container .frame-wrap .frame > img:nth-child(4) { z-index: 2; left: 850px; }
.frame-container .frame-wrap .frame > img:nth-child(5) { z-index: 1; left: 1100px; }
.frame-container .frame-wraps { position: relative; top: 53%; left: 9%;}
.frame-container .frame-wraps .frames > img { margin-right: 23em; position: absolute; transition: all .75s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; }
.frame-container .frame-wraps .frames > img:nth-child(1) { z-index: 5; right: 100px; }
.frame-container .frame-wraps .frames > img:nth-child(2) { z-index: 4; right: 350px; }
.frame-container .frame-wraps .frames > img:nth-child(3) { z-index: 3; right: 600px; }
.frame-container .frame-wraps .frames > img:nth-child(4) { z-index: 2; right: 850px; }
.frame-container .frame-wraps .frames > img:nth-child(5) { z-index: 1; right: 1100px; }

/* 3F ELEVATOR TEXT */
.third-text { width: 100%; height: 50vh; background-color: var(--color-darkBlue); display: grid; place-items: center; }
.third-text .third-text-box { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 2em; font-size: 6.4rem; color: var(--color-white); }
.third-text .third-text-box .text-title { flex: 1; display: flex; align-items: center; }
.third-text .third-text-box .text-title h1 { margin-left: 0.25em; margin-top: 0.25em; }
.third-text .third-text-box span { flex: 2; margin-left: 0.25em; padding-top: 2em; font-size: var(--font-size-medium); font-weight: 400; text-align: center; }
/* 3F SERVICES CONTENT */
.service-container { position: relative; width: 100%; height: 8200px; background-color: var(--color-backGround); background-image: url(../img/wavy_bot.svg); background-repeat: no-repeat; background-position: 0 101%; background-size: 102%; }
.service-container::before { content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/bubble.png); background-repeat: no-repeat; background-position: center 5%; background-size: 90%; filter:contrast(75%); }
.service-container::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/wavy_top.svg); background-repeat: no-repeat; background-position: 0 -0.5%; background-size: 101%; }
.service-container .service-content-boxs { width: 70%; height: auto; margin: 0 auto; padding-right: 5em; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 50px; }
.service-container .service-content-boxs img { transition: all .5s ease; display: block; position: relative; width: 100%; margin: 0 auto; padding-right: 6em; }
.service-container .service-content-boxs img:nth-of-type(1) { top: -10%; }
.service-container .service-content-boxs img:nth-of-type(2) { top: 10%; }
.service-container .service-content-boxs img:nth-of-type(3) { top: 30%; }
.service-container .service-content-boxs img:nth-of-type(4) { top: 0; }
.service-container .service-content-boxs img:nth-of-type(5) { top: 20%; }
.service-container .service-content-boxs img:nth-of-type(6) { top: 40%; }
.service-container .service-content-box { width: 100%; height: auto; margin: 0 auto; position: relative; z-index: 1; }
.service-container .service-content-box img { display: block; width: 100%; }
.service-container .service-content-box #content2 { padding-top: 30em; }
.service-container .service-content-box .home { transition: all 0.5s ease-in-out; position: relative; left: 9%; width: 20%; z-index: 2; border-radius: 70px; border: 13px solid var(--color-backGround); }
.service-container .service-content-box .home-text { transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .4s; opacity: 0; position: absolute; top: 30%; left: 52%; transform: translateY(-30%); width: 35%; }
.service-container .service-content-box #home-bg { position: absolute; width: 65%; bottom: -10%; z-index: 1; }

.service-container .service-oneday { position: relative; z-index: 2; width: calc(100% - 260px); height: 800px; margin-top: 10em; margin-left: 13rem; }
.service-container .service-oneday h3 { transform-origin: top left; transition: all .1s ease-out; font-size: var(--font-size-medium); color: var(--color-black); font-weight: 400; }
.service-container .service-oneday h1 { transform-origin: top left; transition: all .1s ease-out; font-size: var(--font-size-large); color: var(--color-darkBlue); margin-top: -0.25em; }
.service-container .service-oneday .slide { position: absolute; z-index: 1; width: 100%; height: 20vh; transition: all 1s; }
.service-container .service-oneday .slide figure { position: relative; text-align: center; }
.service-container .service-oneday .slide figure img { transition: all .75s; }
.service-container .service-oneday .slide figure img:nth-of-type(1) { position: relative; z-index: 2; width: 28%; }
.service-container .service-oneday .slide figure img:nth-of-type(2) { position: absolute; top: 40%; right: 10%; transform: translateY(-50%); }
.service-container .service-oneday .slide figure img:nth-of-type(3) { position: absolute; top: -10%; left: 50%; transform: translate(-50%, -50%); }
.service-container .service-oneday .slide figure img:nth-of-type(4) { position: absolute; top: 50%; left: 70%; transform: translate(-50%, -50%); }
.service-container .service-oneday .slide figure img:nth-of-type(5) { position: absolute; top: 15%; left: 79%; transform: translate(-50%, -50%); }
.service-container .service-oneday .slide figure img:nth-of-type(6) { position: absolute; top: 30%; left: 35%; transform: translate(-50%, -50%); }
.service-container .service-oneday .slide figure img:nth-of-type(7) { position: absolute; top: 40%; left: 10%; transform: translate(-50%, -50%); }
.service-container .service-oneday .slide figure img:nth-of-type(8) { position: absolute; top: 60%; left: 25%; transform: translate(-50%, -50%); }
.service-container .service-oneday .slide figure img:nth-of-type(9) { position: absolute; top: 80%; left: 85%; transform: translate(-50%, -50%); }
.service-container .service-oneday .slide figure figcaption { position: absolute; top: 0; right: -25%;  }

.service-container .service-row { position: relative; z-index: 2; width: calc(100% - 260px); height: 100vh; margin-left: 13rem; margin-bottom: 20em; }
.service-container .service-row .slides { position: absolute; z-index: 1; width: 100%; height: 100vh; padding-top: 10em; }
.service-container .service-row .slides h3 { transform-origin: top left; transition: all .25s ease-out .15s; font-size: var(--font-size-medium); color: var(--color-black); font-weight: 400; line-height: normal; }
.service-container .service-row .slides h1 { transform-origin: top left; transition: all .25s ease-out; font-size: var(--font-size-large); color: var(--color-darkBlue); margin-top: -0.25em; }
.service-container .service-row .slides .row-img-wrap { display: flex; justify-content: flex-end; margin-top: 3em; }
.service-container .service-row .slides .row-img-wrap img { position: absolute; z-index: 2; transition: all 1.25s; }

/* MOCKUP */
.mockup-container { position: relative; height: 120vh; background-color: var(--color-darkBlue); }
.mockup-container img { position: absolute; top: 0; right: -10%; width: 100%; }
/* VIDEO */
.video-container { position: relative; height: 0; padding-bottom: 56.25%; background-color: var(--color-darkBlue); }
.video-container video { position: absolute; width: 80%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* PROFILE */
.profil { position: relative; width: 100%; height: 120vh; background-color: var(--color-backGround); background-image: url(../img/wavy_bot.svg); background-repeat: no-repeat; background-position: 0 101%; background-size: 102%; }
.profil::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/wavy_top.svg); background-repeat: no-repeat; background-position: 0 -0.5%; background-size: 101%; }
.profiles { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; }
.profiles .content { width: 100%; display: grid; place-items: center; text-align: center; list-style-type: none; }
.profiles .content .icon { overflow: hidden; position: relative; width: 240px; height: 240px; background-color: #fff; border-radius: 50%; }
.profiles .content .icon img { display: block; width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -42%); }
.profiles .content li { font-size: var(--font-size-small); font-weight: 700; color: #565360; }
.profiles .content li:nth-of-type(2) { margin-top: 2em; }
.profiles .content li:nth-of-type(3) { margin-top: 1em; }
/* FOOTER
==================================================================*/
footer { z-index: 9999; position: relative; bottom: 8%; width: 100%; text-align: center; }
footer small { color: #565360; font-size: var(--font-size-small); }