*,
*:before,
*:after {
  position:relative;
  box-sizing:border-box;
}
#fullpage {
    position:relative;
    top:0px;
    z-index:9;
    width:100%;
    height:100%;
    background-color:#293240;
}
section:not(:first-child) {
    animation:2.5s 0s 1 sectFade;
    margin:0 auto;
}
@keyframes sectFade {
    0% {
        opacity:0;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.intro-section {
    text-align:center;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    animation:1s ease-in-out 0s 1 slideDownBtm;
}
.intro-section::after {
    content:'';
    width:100%;
    min-height:100vh;
    background:linear-gradient(-45deg, #014099, #099887);
	background-size:400% 400%;
	animation:gradient 5s ease infinite;
    position:absolute;
    z-index:-1;
    /*opacity:.5;*/
}
.outer-section {
    text-align:center;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
}
.outer-section::before {
    content:'';
    position:absolute;
    background-image:url(../imgs/dsp_outBg.jpg);
    background-size:cover;
    /*background-position:0 70%; */
    /*z-index:0;*/
    width:100%;
    height:100%;
    opacity:.2;
    /* Add the blur effect */
  filter: blur(1px);
  -webkit-filter: blur(1px);
}
.outer-section::after {
    content:'';
    width:100%;
    min-height:100vh;
    background:radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
    background:radial-gradient(circle, #2674c0, #1f4f96, #1b2949, #293240);
    background:radial-gradient(circle, #2674c0, #1f4f96, #1b2949, #000);
    background:radial-gradient(circle, #2674c0, #1f4f96, #1b2949);
    /*background:radial-gradient(circle, #1f4f96, #1b2949, #000);*/
    /*background:linear-gradient(-45deg, #0077ea, #000);*/
    background-size:500% 400%;
    animation:gradient 12s ease infinite;
    position:absolute;
    z-index:-1;
}
@keyframes slideDownBtm {
    0% {
        transform:translateY(-100%);
    }
    100% {
        transform:translateY(0);
    }
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.intro-section>p,
.intro-section>h1 {
    animation: 1.5s 0s 1 introFade;
    /*opacity:0;*/
}
@keyframes introFade {
    0% {
        opacity:0;
        transform:translateY(-100%);
    }
    50% {
        opacity:0;
        transform:translateY(-100%);
    }
    100% {
        opacity:1;
        transform:translateY(0);
    }
}
.intro-section>p:first-child {
    font-size:1.8em;
    font-size:2.8em;
    font-weight:700;
    margin-top:0;
}
.outer-section>p:first-child {
    font-size:5em;
    font-weight:600;
}
.intro-heading {
    margin-top:20px;
    font-size:3.8em;
    font-size:6.4em;
    font-weight:500;
    word-break:keep-all;
}
.intro-section>p {
    margin-top:35px;
    font-size:1.6em;
    font-size:1.8em;
    font-weight:300;
    line-height:1.4em;
    word-break:keep-all;
}
.outer-section>p.-pc {
    margin-top:35px;
    font-size:3.2em;
    font-weight:300;
    line-height:1.4em;
    word-break:keep-all;
}
.outer-section>p.-pc,
.intro-section>p.-pc {
    display:block;
}
.outer-section>p.-mo,
.intro-section>p.-mo,
.heading.-mo {
    display:none;
}

/*스크롤 아이콘*/
.icon-scroll {
    position: absolute;
    bottom:0;
    left:50%;
    width:1em;
    height:3.125em;
    transform:translate(-50%, -100%) scale(2);
    z-index:11;
}
.icon-arrows {
    display:none;
}
.icon-arrows::after,
.icon-arrows::before {
  content:'';
}
.icon-arrows span,
.icon-arrows::after,
.icon-arrows::before {
    display: block;
    width: 0.315em;
    height: 0.315em;
    border-right: 1px solid rgba(255,255,255,.8);
    border-bottom: 1px solid rgba(255,255,255,.8);
    margin: 0 0 0.125em 0.315em;
    transform: rotate(45deg);
    animation: mouse-scroll 1s infinite;
    animation-direction: alternate;
}

.icon-arrows::before {
	margin-top: 0.315em;
	animation-delay: .1s;
}

.icon-scroll span {
	animation-delay: .2s;
}

.icon-arrows::after {
	animation-delay: .3s;
}

.icon-scroll .mouse {
	height: 1.375em;
	width: .875em;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 2em;
}

.icon-scroll .wheel {
    position: relative;
    display: block;
    height: 0.1875em;
    width: 0.1875em;
    margin: 0.1875em auto 0;
    background: rgba(255,255,255,.8);
    animation: mouse-wheel 1.2s ease infinite;
    border-radius: 50%;
}

@keyframes mouse-wheel {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(.375em);
	}
}

@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}

.content-section {
  --scroll-length: 1.5;
  height: calc( var(--scroll-length) * 100vh );
  width: 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.content-section .content .subheading,
.content-section .content .paragraph {
  opacity: 1;
  opacity: calc( 1 + var(--viewport-y) );
}

.figure {
    width:100%;
    max-width:1200px;
    height:100vh;
    /*height:600px;*/
    margin:0;
    position:absolute;
    top:0;
    left:0;
   /* margin:0 auto;*/
}
.figure > img {
    display:block;
    width: auto;
    width: 100%;
    height: 100%;
    height: auto;
    /*max-width: 100%;*/
    -o-object-fit: cover;
     object-fit: cover;
    -o-object-position: center center;
     object-position: center center;
    /*transform:translateY(-50%);*/
}
.figure>ul {
    margin:0 0 0 auto;
    top:50%;
    right:0;
    transform:translateY(-60%);
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items:center;
    /*flex-wrap: wrap;*/
    align-content: center;
    width:73%;
    width:67%;
}
.figure>ul>li {
    width:80%;
}
.figure>ul>li>p {
    margin-top:4%;
    font-size:1.2vw;
    font-weight:300;
}
.figure>ul>li[data-scroll] {
    transition:opacity 1s;
    opacity:0;
}
.figure>ul>li[data-scroll="in"] {
    opacity:1;
    transform:translateX(0) scale(1);
}
.figure>ul>li:nth-child(even)[data-scroll="out"] {
    opacity:0;
    transform: translateX(-100%) scale(0.1);
}
.figure>ul>li:nth-child(odd)[data-scroll="out"] {
    opacity:0;
    transform:translateX(+100%) scale(0.1);
}
.figure>ul>li>img {
    display:block;
    width:100%;
    height:auto;
    /*max-width:100%;*/
    -o-object-fit:cover;
     object-fit:cover;
    -o-object-position:center center;
     object-position:center center;
}

.ssp2 .content-section:nth-child(2) .figure>ul>li {
    margin-top:-2%;
}
.content-section:nth-child(2) .figure>ul>li>img {
    transform:translateX(1.8%);
}
.content-section:nth-child(3) .figure>ul>li>img {
    transform:translateX(4%);
}
.content-section:nth-child(4) .figure>ul>li>img {
    transform:translateX(1.5%);
}
.ssp2 .content-section:nth-child(2) .figure>ul>li>img {
    transform:translateX(.5%);
}
.ssp2 .content-section:nth-child(3) .figure>ul>li>img {
    transform:translateX(1.5%);
}
.ssp2 .content-section:nth-child(4) .figure>ul>li>img {
    transform:translateX(4%);
}
.content {
    position:absolute;
    z-index:12345;
    top:0;
    left:50%;
    /*left:32vmin;*/
    width:100%;
    height:100%;
    max-width:35em;
    max-width:1200px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    color:#fff;
    /* padding: 2em;*/
    font-size: 2.5vmin;
    transform:translateX(-50%);
}
.content * {
    text-shadow:.1vmin .1vmin .6vmin rgb(0 0 0);
}
.content>.header {
    grid-row:1/2;
    /*grid-row-start: 1;*/
    /* grid-row-end: 3;*/
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    /*    flex-wrap: nowrap;*/
    padding-top:50vh;
    margin-top:50vh;
    padding-top:40vh;
    margin-top:40vh;
    /*margin-top: 150px;
    margin-top:300px;*/
}
.heading {
    font-size:2.75em;
    margin:0;
    font-weight:700;
}
.subheading {
    font-size:1.25em;
    font-weight:600;
    margin-bottom:0.5em;
    color:#15e4cd;
}
.subheading i {
    font-style:normal;
    display:inline-block;
    background:#15e4cd;
    color:#293240;
    border-radius:100%;
    width:1.2em;
    height:1.2em;
    text-align:center;
    text-shadow:none;
    font-size:.8em;
    margin-top:.15em;
    vertical-align:top;
    box-shadow:0.1vmin 0.1vmin 0.6vmin rgb(0 0 0);
}
/* ---------------------------------- */
.figure {
    --scale:calc( .8 + (.2 * var(--scroll-length) * var(--visible-y)) );
/*    --scale:calc( .6 + (.41 * var(--scroll-length) * var(--visible-y)) );
    --scale:calc( .6 + (.41 * var(--scroll-length) * var(--visible-y)) );*/
    position:sticky;
    top:0;
    top:111px;
    left:0;
    margin:0 auto;
    display:block;
    overflow:hidden;
    will-change:transform;
    transform:scale(var(--scale));
}
.figure:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* background-color: black;*/
    /*opacity: calc( var(--visible-y) );*/
    opacity:.4;
}
.figure > img {
    display: block;
    will-change:transform;
    /*transform:scale(calc(1 / var(--scale)));
    transform:scale(calc(1 / var(--scale)));*/
    transform:translateY(50%);
}

/* ---------------------------------- */
.char {
  display:inline-block;
  opacity:calc( 1 + ( ( var(--viewport-y) * 1.5 ) - var(--char-percent) ) );
}

.content-section:nth-child(3) .content>.header {
    padding-top:41.5vh;
    margin-top:41.5vh;
}
.ssp2 .content-section:nth-child(3) .content>.header {
    padding-top:37.5vh;
    margin-top:37.5vh;
}






/*
* 미디어쿼리 시작
*/
@media (min-width: 1280px) and (max-width:1366px) {
     /*랩탑용*/
    section:not(:first-child) {
        width:78%;
    }
    .content-section:nth-child(n+1) .figure>ul>li,
    .ssp2 .content-section:nth-child(n+1) .figure>ul>li {
        width:70%;
    }

}

@media all and (min-width:1024px) and (max-width:1279px) {
    /*//브라우저 창 width가 1023px보다 커지는 순간부터 적용 
	//태블릿 가로형*/
    .intro-section {
        padding:0 8%;
    }
    .content-section:not(:first-child) {
        padding:0 8%;
    }
    .content>.header {
        padding-left: 8%;
    }
    .ssp2 .content-section:nth-child(2) .figure>ul>li {
        width:78%;
    } 
        
}

@media all and (min-width:768px) and (max-width:1023px) {
    /*/////////////*/
    /*//브라우저 창 width가 767px보다 커지는 순간부터 적용 
	//태블릿 세로형*/
    .content-section {
        transform:translateY(-10%);
    }
    .intro-heading {
        word-break:keep-all;
        padding:0 7%;
    }
    .intro-section>p.-pc,
    .heading.-pc {
        display:none;
    }
    .intro-section>p.-mo,
    .heading.-mo {
        display:block;
    }
    .intro-section>p.-mo {
        word-break:keep-all;
        width:75%;
    }
    .figure>ul {
        width:100%;
        transform:translateY(0);
        justify-content:space-around;
        /*flex-direction:column;
        align-items:flex-end;*/
    }
    .content-section:nth-child(n+1) .figure>ul>li,
    .ssp2 .content-section:nth-child(n+1) .figure>ul>li {
        width:70%;
    }
    .content-section:nth-child(n+1) .figure>ul>li>img, 
    .ssp2 .content-section:nth-child(n+1) .figure>ul>li>img {
        transform:none;
    }
    .content-section:nth-child(n+1) .content>.header,
    .ssp2 .content-section:nth-child(n+1) .content>.header {
        text-align:center;
        padding-top:40vh;
        margin-top:40vh;
    }

}


/*@media (max-width: 820px) {*/
@media all and (max-width: 767px) {
    /*브라우저 창 width가 768px보다 작아지는 순간부터 적용*/
    section:not(:first-child) {
        animation:none;
    }
    .content-section {
        transform:translateY(-10%);
    }
    .content-section {
        /* --scroll-length: 1.5; */
        /*height: auto;*/
        height:100vh; 
        width:100%;
        transform:none;
    }
    .intro-section>p.-pc,
    .heading.-pc {
        display:none;
    }
    .intro-section>p.-mo,
    .heading.-mo {
        display:block;
    }
    .intro-section>p.-mo {
       /* width:80%;*/
    }
    .content-section:not(:first-child) {
        /*padding:0 8%;*/
    }
    .intro-section>p:first-child {
        font-size:6.8vw;
        font-weight:700;
    }
    .intro-heading {
        margin-top:2vh;
        font-size:10.8vw;
        font-weight:500;
    }
    .intro-section>p.-pc {
        display:none;
    }
    .intro-section>p.-mo {
        margin-top:5vh;
        font-size:4.6vw;
        display:block;
        padding:0 15%;
    }
    .content-section,
    .content {
        padding:0 6%;
    }
    .content {
        display:block;
    }
    .figure {
        height:calc(100vh - 71px);
        height:calc(100vh - 30vh);
        top:50vh;
        position:inherit;
        top:13vh;
        height:100vh;
        /*height:calc(100vh + 30vh);*/
    }
    .figure:before {
        display: none;
    }
    .figure>ul {
        margin:0 auto;
       /* text-align:right;*/
        /*position:relative;*/
        top:40%;
        top:60%;
        /*right:0;*/
        transform:translateY(-60%);
        display:flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        align-content:center;
        align-items:center;
        width:100%;
    }
    .figure>ul>li {
        margin-left:0;
        text-align:right;
        width:65%;
    }
    .figure>ul>li:not(:first-child) {
        /*margin-top:4%;*/
    }
    
    /*///////// 모바일 수정 ///////*/
    .figure>ul>li[data-scroll] {
        transition:none;
        opacity:1;
    }
    .figure>ul>li[data-scroll="in"] {
        opacity:1;
        transform:none;
    }
    .figure>ul>li:nth-child(even)[data-scroll="out"] {
        opacity:1;
        transform:none;
    }
    .figure>ul>li:nth-child(odd)[data-scroll="out"] {
        opacity:1;
        transform:none;
    }
    /*///////////////////////////*/
    
    .content-section:nth-child(2) .figure>ul>li:first-child,
    .content-section:nth-child(4) .figure>ul>li,
    .content-section:nth-child(5) .figure>ul>li {
       /* width:90%;*/
    }
    .content-section:nth-child(2) .figure>ul>li:last-child {
        /*display:none;*/
        width:100%;
        margin-left:0;
    }
    .figure>ul>li>img {
        width:100%;
        /*width:80%;*/
    }
    .content-section:nth-child(2) .figure>ul>li:last-child>img {
        /*width:80%;
        text-align:right;*/
    }
    
    .figure>ul {
        width:100%;
       /* transform:translateY(-60%);*/
    }
    .content-section>.figure>ul>li {
        /*width:100%;*/
    }
    .content-section:nth-child(n+1) .figure>ul>li {
        width:100%;
    }
    .content-section:nth-child(n+1) .figure>ul>li>img,
    .ssp2 .content-section:nth-child(n+1) .figure>ul>li>img {
        transform:none;
    }


    .content-section:nth-child(3) .content {
        /*top:-4vh;*/
    }
    /*.dsp2 .content-section:nth-child(5) .content>.header {
        padding-top:38.5vh;
        margin-top:38.5vh;
        padding-top:0vh;
        margin-top:0vh;
    }*/
/*    .content-section:nth-child(6) .content {
        top:-7vh;
    }*/
    .content>.header {
        /*transform:translateX(-40%);*/
        /*padding-left:8%;*/
        text-align:center;
        padding-top:40vh;
        margin-top:40vh;
        display:block;
        padding-top:0vh;
        margin-top:0vh;
        top:25vh;
    }
    .content-section:nth-child(2) .content>.header {
        padding-top:39.5vh;
        margin-top:39.5vh;
    }
    .content-section:nth-child(n+2) .content>.header {
        padding-top:38.3vh;
        margin-top:38.3vh;
        padding-top:0vh;
        margin-top:0vh;
    }
    .ssp2 .content-section:nth-child(2) .content>.header,
    .ssp2 .content-section:nth-child(3) .content>.header {
        padding-top:40.1vh;
        margin-top:40.1vh;
        padding-top:0vh;
        margin-top:0vh;
    }
    .ssp2 .content-section:nth-child(4) .content>.header {
        padding-top:38.3vh;
        margin-top:38.3vh;
        padding-top:0vh;
        margin-top:0vh;
    }
    .subheading {
        font-size:4.3vw;
        font-size:6vw;
    }
    .heading {
        font-size:8vw;
    }
    .content-section .content .subheading,
    .content-section .content .paragraph {
        opacity:1;
    }
 
}