*{margin:0;padding:0;box-sizing: border-box;}
html{font-size: 10px;height:100%;}
body{height:100%;}

#wrap{height: 100%;position:relative;}
footer{position: relative;transform: translateY(-100%);}

/* -----section------------ */
section{width:100%;height:100vh;position:relative;margin:0 auto;overflow: hidden;background:linear-gradient(150deg,#031735, #728eb7);background-repeat: no-repeat ;}
/* section1 */
.section1{width:100%;height:100%; margin: auto;display:flex;justify-content: space-around;border-bottom: 1px solid rgba(130,130,130,0.3);}
.s1-frame{width:62.5%;height:100%; margin: auto;display:flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.s1-c1{flex-basis: 40%;color:white;}
.s1-c1-item1{width:100%;font-size:2.61vw;line-height:3vw;font-weight: 600;}
.s1-c1-item2{width:100%; font-size:1.05vw;padding-top: 8.9vh;}
.s1-c2{flex-basis: 50%; display:flex;}
.s1-c2 img{width:85.17%;text-align: end;float:right}

/* section2 */
.section2{position: absolute;width:62.5%;top:55%;left:50%;transform: translate(-50%,-50%);}
.s2-1-frame{height:100%;margin:0 auto;}
.s2-1-frame p,.s2-2-frame p{font-size: 1vw;font-weight: bold;color:white;padding-bottom: 7.8vh;margin-bottom: 0;}
.s2-1-frame{height:100%; display:flex;flex-wrap: wrap;justify-content: space-between;}
.s2-1-frame img{width:100%;}
.s2-1-frame-1,.s2-2-frame-1 {flex-basis:65%;}
.s2-1-frame-2, .s2-2-frame-2{display: block;flex-basis:25%;position:relative;}
.s2-1-frame-2 p, .s2-2-frame-2 p{position: relative; top: 54%;}
.s2-2-frame{height:auto;padding-top:11.1vh;display:flex;flex-wrap: wrap;justify-content: space-between;}
.s2-2-frame img{width:100%;}
#ti{font-size: 1.5vw;}
/* section3 */
.section3{border-top: 1px solid rgba(130,130,130,0.3); height:80%;position:relative;width:100%;overflow: hidden;}
.s3-frame{width:62.5%;position: absolute;top:60%;left:50%;transform: translate(-50%,-50%);}
.section3 .result{font-weight: bold; text-align:left;font-size:1.5vw;color:white;padding-top: 20vh;position: absolute;left: 19%;}
.s3-img-box{width:100%;height:30%;display: flex;flex-wrap: wrap;justify-content: space-between;}
.s3-img-box div{flex-basis: 20%;text-align: center;position: relative;}
.s3-img-box div p {flex-basis: 20%;padding-top:3vh;font-size: 0.8334vw;font-weight: 400;color: white;}
.s3-img-box div img{width:90%;height:14.2vmax;}

.arrow{display:none;}



/* 테블릿 가로 (해상도 774px ~ 1023px)*/ 
@media all and (min-width:480px) and (max-width:1230px) { 
  /* -----section------------ */
  section{width:100%;height:100vh;margin-left: auto;margin-right: auto;}
  /* section1 */
  .section1{width:100%;height:100%; margin: auto;display:flex;justify-content: space-around;border-bottom: 1px solid rgba(130,130,130,0.3);}
  .s1-c1{flex-basis: 100%;color:white;}
  .s1-c1-item1{width:100%;font-size:6vw;line-height:6vw;font-weight: 600;}
  .s1-c1-item2{width:100%; font-size:2vw;padding-top: 8.9vh;}
  .s1-c2{flex-basis: 50%; display:none;}
  .s1-c2 img{width:85.17%;text-align: end;float:right}

  /* section2 */

/* section2 */
.section2{position: absolute;width:75%;top:55%;left:50%;transform: translate(-50%,-50%);}
.s2-1-frame{height:100%;margin:0 auto;}
.s2-1-frame p,.s2-2-frame p{font-size: 2vw;font-weight: bold;color:white;padding-bottom: 7.8vh;margin-bottom: 0;}
#ti{font-size: 3vw;}
.s2-1-frame{height:100%; display:flex;flex-wrap: wrap;justify-content: space-between;}
.s2-1-frame img{width:100%;}
.s2-1-frame-1,.s2-2-frame-1 {flex-basis:100%;}
.s2-1-frame-2, .s2-2-frame-2{display: flex;flex-basis:100%;position:relative;justify-content: space-around;}
.s2-1-frame-2 p, .s2-2-frame-2 p{position: relative; top: 40%;}
.s2-2-frame{height:auto;padding-top:11.1vh;display:flex;flex-wrap: wrap;justify-content: space-between;}
.s2-2-frame img{width:100%;}

  /* section3 */
  .section3{border-top: 1px solid rgba(130,130,130,0.3); height:100%;position:relative;width:100vw; margin:auto;}
  .section3 .result{font-weight: bold; text-align:left;font-size:4vw;color:white;position: relative;top:-10%;}
  .s3-frame{width:80%;overflow:hidden;position: absolute;top:45%;left:50%;transform: translate(-50%,-50%);}
  .s3-img-box{width:400%;height:30%;display: flex;flex-wrap: nowrap;transition-property: transform; /* transform 속성에대해, js코드에 의해 transform 스타일 추가된다*/
    transition-duration: 1s; /* transition 지속시간 */}
  .s3-img-box div{text-align: center;width:100%;position:relative;}
  .s3-img-box div p {flex-basis: 90%;padding-top:2vh;font-size: 3vw;font-weight: 400;color: white;}
  .s3-img-box div img{width:70%;height:85%;}
  .arrow{text-align: center;position:relative;top:100%;font-size: 5vw;display: block;}
  .prev{margin-right:5%;text-decoration: none;color:white;}
  .next{margin-left:5%;text-decoration: none;color:white;}


  
  } 

  /* 모바일 세로 (해상도 ~ 479px)*/ 
  @media all and (max-width:479px) {
  /* -----section------------ */
  section{width:100%;height:800px;margin-left: auto;margin-right: auto;}
  /* section1 */
  .section1{width:100%;height:100%; margin: auto;display:flex;justify-content: space-around;border-bottom: 1px solid rgba(130,130,130,0.3);}
  .s1-frame{width:80%;height:100%; }
  .s1-c1{flex-basis: 100%;color:white;}
  .s1-c1-item1{width:100%;font-size:4rem;line-height:5rem;font-weight: 600;}
  .s1-c1-item2{width:100%; font-size:2rem;padding-top: 8.9%;}
  .s1-c2{flex-basis: 50%; display:none;}
  .s1-c2 img{width:85.17%;text-align: end;float:right}

  /* section2 */

/* section2 */
.section2{position: absolute;width:85%;top:55%;left:50%;transform: translate(-50%,-50%);}
.s2-1-frame{height:100%;margin:0 auto;}
.s2-1-frame p,.s2-2-frame p{font-size: 3vw;font-weight: bold;color:white;padding-bottom: 7.8vh;margin-bottom: 0;}
#ti{font-size: 5vw;}
.s2-1-frame{height:100%; display:flex;flex-wrap: wrap;justify-content: space-between;}
.s2-1-frame img{width:100%;}
.s2-1-frame-1,.s2-2-frame-1 {flex-basis:100%;}
.s2-1-frame-2, .s2-2-frame-2{display: flex;flex-basis:100%;position:relative;justify-content: space-around;}
.s2-1-frame-2 p, .s2-2-frame-2 p{position: relative; top: 40%;}
.s2-2-frame{height:auto;padding-top:11.1vh;display:flex;flex-wrap: wrap;justify-content: space-between;}
.s2-2-frame img{width:100%;}

  /* section3 */
  .section3{border-top: 1px solid rgba(130,130,130,0.3); height:100%;position:relative;width:100vw; margin:auto;}
  .section3 .result{font-weight: bold; text-align:left;font-size:5vw;color:white;position: relative;top:0%;}
  .s3-frame{width:80%;overflow:hidden;position: absolute;top:45%;left:50%;transform: translate(-50%,-50%);}
  .s3-img-box{width:400%;height:30vh;display: flex;flex-wrap: nowrap;transition-property: transform; /* transform 속성에대해, js코드에 의해 transform 스타일 추가된다*/
    transition-duration: 1s; /* transition 지속시간 */}
  .s3-img-box div{text-align: center;width:100%;position:relative;}
  .s3-img-box div p {flex-basis: 90%;padding-top:3vh;font-size: 1.1rem;font-weight: 400;color: white;}
  .s3-img-box div img{width:70%;height:80%;}
  .arrow{text-align: center;position:relative;top:100%;font-size: 6vw;display: block;}
  .prev{margin-right:5%;text-decoration: none;color:white;}
  .next{margin-left:5%;text-decoration: none;color:white;}
  }