*{margin:0;padding:0;box-sizing: border-box;}
html{font-size: 10px;height:100%;}
body{height:100%;}
#wrap{height: 100%;position:relative;}
.content{overflow:hidden;height:100vh;}
footer{position: relative;transform: translateY(-100%);}

section{height:100vh}
/* -----section------------ */
.section1{ height:100%;width:100%; margin-left: auto;margin-right: auto; background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)), url(../img/이미지/가는길에/background.jpg); background-size: cover;background-repeat: no-repeat; background-position: center center;}
/* section1 */
.section1{width:100%; margin: auto;display:flex;justify-content: space-around;}
.s1-frame{width:60%;height:auto; margin: auto;display:flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.s1-c1{flex-basis: 40%; position: relative; top:0%}
.s1-c1 p:nth-child(1){font-size: 2rem;color: white;font-weight: 700;padding-bottom: 1vh;}
.s1-c1 p:nth-child(2){font-size: 3vw;color: white; font-weight: 700;margin-bottom: 0;}
.s1-c1 p:nth-child(3){font-size: 3vw;color: white;font-weight: 700;}

.s2-c1{flex-basis: 50%;}
.s2-c1 img{width:25.8vw;height:auto;text-align: end;float:right}

/* section2 */
.section2{width:100%; height:100%;background-color: white; text-align: center;position: relative;}
.s2-frame{width:70%;margin:0 auto;position: absolute;top:55%;left:50%;transform: translate(-50%,-50%);}
.section2 .result i{color:#E8D591;text-shadow: rgb(81, 81, 81) 1px 2px 5px;font-size: 1.5rem;}
.s2-p1{width: 100%;}
.s2-p1 p:nth-child(1){font-weight: 800;font-size: 2.61vw;}
.s2-p1 p:nth-child(2){font-weight: 400;font-size: 1.6vw;letter-spacing: -3px;padding-top: 3.5vh;}

.s2-p2{display: flex; justify-content: space-around; width: 100%;margin: 0 auto;padding-top:15.5vh}
.s2-p2-i1,.section2 .s2-p2-i2{flex-basis: 45%; font-size: 1.05vw; font-weight: 400;}
.s2-p2-i1 p:nth-child(1){font-size: 2.2vw; color:#FF6602; font-weight: 800;}
.s2-p2-i2 p:nth-child(1){font-size: 2.2vw;color:#AC63D9;font-weight: 800;}

section hr{}
/* section3 */
.section3{width:100%;height:100%;background-color: white;text-align: center;position: relative;}
.s3-frame{width:63vw;height:100%;margin: 0 auto;position:absolute;top:75%;left:50%;transform: translate(-50%,-50%);}

.s3-p1{display:flex; justify-content: space-between;padding-top:4vh;width:100%;}
.s3-p1-i1{ flex-basis:25%;font-weight: bold;position:relative;}
#customer{font-size: 2.1vw; color:#FF6602;text-decoration:underline;  text-underline-position : under;}
.s3-p1-i1-1{font-size: 2.1vw;margin-bottom: 4vw;line-height: 2.6vw;margin-top: 3vw;}
.s3-p1-i1-2{font-size: 1vw;margin-bottom: 0;line-height: 1.5vw;}

.s3-p1-i2{ flex-basis:70%;}
.s3-imgBox1{display:flex;align-items: end; justify-content:end;}
.s3-imgBox1 .s3-img:nth-child(2){flex-basis: 32%;}
.s3-img{flex-basis: 30%;}
.s3-img img{width:100%;}



/* section4 */
.section4{width:100%;height:100%;background-color: white;text-align: center;position: relative;}
.s4-frame{width:63%;height:100%;margin: 0 auto;position:absolute;top:75%;left:50%;transform: translate(-50%,-50%);}

.s4-p1{display:flex; justify-content: space-between;padding-top:4vh;width:100%;}
.s4-p1-i1{ flex-basis:25%;font-weight: bold;position:relative;}
#buddy{font-size: 2.1vw; color:#AC63D9;text-decoration:underline;  text-underline-position : under;}
.s4-p1-i1-1{font-size: 2.1vw;margin-bottom: 4vw;line-height: 2.6vw;margin-top: 3vw;}
.s4-p1-i1-2{font-size: 1vw;margin-bottom: 0;line-height: 1.5vw;}

.s4-p1-i2{ flex-basis:70%;}
.s4-imgBox1{display:flex;align-items: end;justify-content:end;}
.s4-imgBox1 .s4-img:nth-child(2){flex-basis: 32%;}
.s4-img{flex-basis: 30%;}
.s4-img img{width:100%;}

/* section5 */
.section5{width:100%;margin:0 auto;text-align: center;position: relative;}
.s5-frame{width:65%;margin:0 auto;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
.result{font-size: 1.5vw;font-weight: 700;text-align: left;position:absolute;top:-15%;left:14%;transform: translate(-50%,0%);}
.result i{color:#6A6A6A;text-shadow: rgb(81, 81, 81) 1px 2px 5px;}
.s5-p1{width:100%;display:flex;justify-content: space-between;margin-left:auto;height:55vh;}
.s5-p1-i1{flex-basis: 30%;}
.s5-p1-i1 img{height:78.3%;}
.s5-p1-i2{flex-basis: 59%;height:28vh;margin:auto 0;text-align: left;position: relative;}
.s5-p1-i2 p:nth-child(1){font-size:3vw; font-weight:700;}
.s5-p1-i2 p:nth-child(2){font-size:1.5vw; font-weight:400;position:absolute;bottom:0;letter-spacing: -2px;}


/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:480px) and (max-width:1230px) { 
/* section1 */
.section1{width:100%; margin: auto;display:flex;justify-content: space-around;}
.s1-frame{width:70vw;height:auto; margin: auto;display:flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.s1-c1{flex-basis: 100%; position: relative; top:10%;text-align: center;}
.s1-c1 p:nth-child(1){font-size: 2rem;color: white;font-weight: 700;padding-bottom: 3vh;}
.s1-c1 p:nth-child(2){font-size: 5vw;color: white; font-weight: 700;margin-bottom: 0;}
.s1-c1 p:nth-child(3){font-size: 5vw;color: white;font-weight: 700;}

.s2-c1{flex-basis:100%;text-align: center;padding-top: 4vh;}
.s2-c1 img{width:30vw;height:auto;float:inherit;}
/* section2 */
.section2{width:100%; height:100vh;background-color: white; text-align: center;position: relative;}
.s2-frame{width:75vw;margin:0 auto;position: absolute;top:65%;left:50%;transform: translate(-50%,-50%);}

.s2-p1{width: 100%;}
.s2-p1 p:nth-child(1){font-weight: 800;font-size: 4vw;}
.s2-p1 p:nth-child(2){font-weight: 400;font-size: 3vw;letter-spacing: -3px;padding-top: 3.5vh;}

.s2-p2{display: flex; justify-content: space-around; width: 100%;margin: 0 auto;padding-top:15.5vh}
.s2-p2-i1,.section2 .s2-p2-i2{flex-basis: 45%; font-size: 2vw; font-weight: 400;}
.s2-p2-i1 p:nth-child(1){font-size: 4vw; color:#FF6602; font-weight: 800;}
.s2-p2-i2 p:nth-child(1){font-size: 4vw;color:#AC63D9;font-weight: 800;}

/* section3 */
.section3{width:100%;height:100%;background-color: white;text-align: center;position: relative;}
.s3-frame{width:85vw;height:100%;margin: 0 auto;position:absolute;top:65%;left:50%;transform: translate(-50%,-50%);}

.s3-p1{display:flex; justify-content: space-between;padding-top:4vh;width:100%;flex-wrap: wrap;}
.s3-p1-i1{ flex-basis:100%;font-weight: bold;position:relative;display: flex;flex-wrap: wrap;}
#customer{font-size: 6vw; color:#FF6602;text-decoration:underline;  text-underline-position : under;width:30%;}
.s3-p1-i1-1{font-size: 5vw;margin-bottom: 4vw;line-height: 5vw;margin-top: 3vw;flex-basis: 70%;display: flex;}
.s3-p1-i1-2{font-size: 1.7vw;margin-bottom: 0;line-height: 1.5vw;flex-basis: 100%;display: flex;justify-content: center;}

.s3-p1-i2{ flex-basis:100%;}
.s3-imgBox1{display:flex;align-items: end; justify-content:end;padding-top: 5vh;}
.s3-imgBox1 .s3-img:nth-child(2){flex-basis: 32%;}
.s3-img{flex-basis: 30%;}
.s3-img img{width:100%;}

/* section4 */
.section4{width:100%;height:100%;background-color: white;text-align: center;position: relative;}
.s4-frame{width:85vw;height:100%;margin: 0 auto;position:absolute;top:65%;left:50%;transform: translate(-50%,-50%);}

.s4-p1{display:flex; justify-content: space-between;padding-top:4vh;width:100%;flex-wrap: wrap;}
.s4-p1-i1{ flex-basis:100%;font-weight: bold;position:relative;display: flex;flex-wrap: wrap;}
#buddy{font-size: 6vw; color:#AC63D9;text-decoration:underline;  text-underline-position : under;width:30%;}
.s4-p1-i1-1{font-size: 5vw;margin-bottom: 4vw;line-height: 5vw;margin-top: 3vw;flex-basis: 70%;display: flex;}
.s4-p1-i1-2{font-size: 1.7vw;margin-bottom: 0;line-height: 1.5vw;flex-basis: 100%;display: flex;justify-content: center;}

.s4-p1-i2{ flex-basis:100%;}
.s4-imgBox1{display:flex;align-items: end; justify-content:end;padding-top: 5vh;}
.s4-imgBox1 .s4-img:nth-child(2){flex-basis: 32%;}
.s4-img{flex-basis: 30%;}
.s4-img img{width:100%;}

/* section5 */
.section5{width:100%;margin:0 auto;text-align: center;position: relative;}
.s5-frame{width:80%;margin:0 auto;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
.result{font-size: 3vw;font-weight: 700;text-align: left;position:absolute;top:-15%;left:12%;transform: translate(-50%,0%);}
.result i{color:#6A6A6A;text-shadow: rgb(81, 81, 81) 1px 2px 5px;}
.s5-p1{width:100%;display:flex;justify-content: space-between;margin-left:auto;height:55vh;}
.s5-p1-i1{flex-basis: 30%;}
.s5-p1-i1 img{height:78.3%;}
.s5-p1-i2{flex-basis: 59%;height:20vh;margin:auto 0;text-align: left;position: relative;}
.s5-p1-i2 p:nth-child(1){font-size:4vw; font-weight:700;}
.s5-p1-i2 p:nth-child(2){font-size:2.5vw; font-weight:400;position:absolute;bottom:0%;letter-spacing: -2px;}

}
  


/* 모바일 세로 (해상도 ~ 540px)*/ 
@media all and (max-width:479px) {
  /* section1 */
.section1{width:100%; margin: auto;display:flex;justify-content: space-around;}
.s1-frame{width:70vw;height:auto; margin: auto;display:flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.s1-c1{flex-basis: 100%; position: relative; top:0%}
.s1-c1 p:nth-child(1){font-size: 3.5rem;color: white;font-weight: 700;padding-bottom: 3vh;}
.s1-c1 p:nth-child(2){font-size: 5vw;color: white; font-weight: 700;margin-bottom: 0;}
.s1-c1 p:nth-child(3){font-size: 5vw;color: white;font-weight: 700;}

.s2-c1{display: none;}
.s2-c1 img{width:50vw;height:auto;float:inherit;}
/* section2 */
.section2{width:100%; height:100vh;background-color: white; text-align: center;position: relative;}
.s2-frame{width:75vw;margin:0 auto;position: absolute;top:65%;left:50%;transform: translate(-50%,-50%);}

.s2-p1{width: 100%;}
.s2-p1 p:nth-child(1){font-weight: 800;font-size: 10vw;}
.s2-p1 p:nth-child(2){font-weight: 400;font-size: 5vw;letter-spacing: -3px;padding-top: 3.5vh;}

.s2-p2{display: flex; justify-content: space-around; width: 100%;margin: 0 auto;padding-top:15.5vh}
.s2-p2-i1,.section2 .s2-p2-i2{flex-basis: 45%; font-size: 2vw; font-weight: 400;}
.s2-p2-i1 p:nth-child(1){font-size: 6vw; color:#FF6602; font-weight: 800;}
.s2-p2-i2 p:nth-child(1){font-size: 6vw;color:#AC63D9;font-weight: 800;}

/* section3 */
.section3{width:100%;height:100%;background-color: white;text-align: center;position: relative;}
.s3-frame{width:85vw;height:100%;margin: 0 auto;position:absolute;top:65%;left:50%;transform: translate(-50%,-50%);}

.s3-p1{display:flex; justify-content: space-between;padding-top:4vh;width:100%;flex-wrap: wrap;}
.s3-p1-i1{ flex-basis:100%;font-weight: bold;position:relative;display: flex;flex-wrap: wrap;}
#customer{font-size: 8vw; color:#FF6602;text-decoration:underline;  text-underline-position : under;width:30%;}
.s3-p1-i1-1{font-size: 5vw;margin-bottom: 13vh;line-height: 5vw;margin-top: 3vw;flex-basis: 70%;display: flex;}
.s3-p1-i1-2{font-size: 2vw;margin-bottom: 0;line-height:2vw;flex-basis: 100%;display: flex;flex-wrap:wrap;justify-content: center;}

.s3-p1-i2{ flex-basis:100%;}
.s3-imgBox1{display:flex;align-items: end; justify-content:end;padding-top: 5vh;}
.s3-imgBox1 .s3-img:nth-child(2){flex-basis: 32%;}
.s3-img{flex-basis: 30%;}
.s3-img img{width:100%;}

/* section4 */
.section4{width:100%;height:100%;background-color: white;text-align: center;position: relative;}
.s4-frame{width:85vw;height:100%;margin: 0 auto;position:absolute;top:65%;left:50%;transform: translate(-50%,-50%);}

.s4-p1{display:flex; justify-content: space-between;padding-top:4vh;width:100%;flex-wrap: wrap;}
.s4-p1-i1{ flex-basis:100%;font-weight: bold;position:relative;display: flex;flex-wrap: wrap;}
#buddy{font-size: 8vw; color:#AC63D9;text-decoration:underline;  text-underline-position : under;width:30%;}
.s4-p1-i1-1{font-size: 5vw;margin-bottom: 13vh;line-height: 5vw;margin-top: 3vw;flex-basis: 70%;display: flex;}
.s4-p1-i1-2{font-size: 2vw;margin-bottom: 0;line-height:2vw;flex-basis: 100%;display: flex;flex-wrap:wrap;justify-content: center;}

.s4-p1-i2{ flex-basis:100%;}
.s4-imgBox1{display:flex;align-items: end; justify-content:end;padding-top: 5vh;}
.s4-imgBox1 .s4-img:nth-child(2){flex-basis: 32%;}
.s4-img{flex-basis: 30%;}
.s4-img img{width:100%;}

/* section5 */
.section5{width:100%;margin:0 auto;text-align: center;position: relative;}
.s5-frame{width:80%;margin:0 auto;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
.result{font-size: 5vw;font-weight: 700;text-align: left;position:absolute;top:-15%;left:20%;transform: translate(-50%,0%);}
.result i{color:#6A6A6A;text-shadow: rgb(81, 81, 81) 1px 2px 5px;}
.s5-p1{width:100%;display:flex;justify-content: space-between;margin-left:auto;height:55vh;}
.s5-p1-i1{flex-basis: 30%;}
.s5-p1-i1 img{height:78.3%;}
.s5-p1-i2{flex-basis: 59%;height:25vh;margin:auto 0;text-align: left;position: relative;}
.s5-p1-i2 p:nth-child(1){font-size:5vw; font-weight:700;}
.s5-p1-i2 p:nth-child(2){font-size:3vw; font-weight:400;position:absolute;bottom:0%;letter-spacing: -2px;}

}