header .logo1{height:3rem;content:url(../img/logo-dark.png);}
.header1 a{color:black;}
#siteMap a i{color:black;}
*{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{overflow:hidden;width:100%;height:100vh;background-color: #fadada;}

/* section1 */
.section1{width:100%;height:100%;  margin: auto;display:flex;justify-content: space-around;position:relative;}
.s1-frame{width:61.36vw;height:fit-content;display:flex;justify-content: space-between;flex-wrap: wrap;position:absolute;top:50%;transform: translate(0%,-50%);}
.s1-c1{flex-basis: 40%;height:fit-content; margin: auto 0;}
.s1-c1-item1 img{width:40%}
.s1-c1-item2 img{padding-top: 10vh;width:100%;}
.s2-c1{flex-basis: 40%;}
.s2-c1 img{width:74.6%;text-align: end;float:right}

/* section2 */
.section2{width:100%;height:100vh;background-color: white;position:relative; }
.s2-frame{width:55vw;height:auto;margin: auto;position:absolute;top:55%;left:50%;transform: translate(-50%,-50%);}
.s2-frame .result{font-size: 1.56vw;font-weight: 600;padding-bottom:6vh;}
.s2-frame .s2-imgBox{display:flex;flex-wrap: wrap;justify-content: space-between;height:51vh;}
.s2-frame .s2-imgBox div{flex-basis: 45%;align-items: center;}
.s2-frame .s2-imgBox img{width:100%;height:100%;object-fit: contain;}

/* section3 */
.section3{width:100%;height:100%;background-color: white;position:relative;}
.s3-frame{width:55vw;height:auto;margin: auto;position:absolute;top:55%;left:50%;transform: translate(-50%,-50%);}
.s3-frame .result{font-size: 1.56vw;font-weight: 600;padding-bottom:6vh;margin-bottom: 0;}
.s3-frame img{width:100%;height:auto;}


/* section4 */
.section4{border-top: 1px solid rgba(130,130,130,0.3); height:80%;position:relative;width:100%;overflow: hidden;}
.s4-frame{width:62.5%;position: absolute;top:60%;left:50%;transform: translate(-50%,-50%);}
.section4 .result{font-weight: bold; text-align:left;font-size:1.56vw;font-weight: 600;color:black;padding-top: 20vh;position: absolute;left: 19%;}
.s4-img-box{width:100%;height:100%;display: flex;flex-wrap: wrap;justify-content: space-between;}
.s4-img-box div{flex-basis: 20%;text-align: center;position: relative;}
.s4-img-box div img{width:100%;height:auto;}

.arrow{display:none;}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:480px) and (max-width:1023px) { 
  section{overflow:visible;width:100%;height:100%;background-color: #fadada;}
/* section1 */
.section1{width:100%;height:100%;  margin: auto;display:flex;justify-content: space-around;position:relative;}
.s1-frame{width:61.36vw;height:fit-content;display:flex;justify-content: center;flex-wrap: wrap;position:absolute;top:50%;transform: translate(0%,-50%);}
.s1-c1{flex-basis: 100%;height:fit-content; margin: auto 0;text-align: center;}
.s1-c1-item1 img{width:80%}
.s1-c1-item2 img{padding-top: 10vh;width:100%;}
.s2-c1{display: none;}

/* section2 */
.section2{width:100%;height:100vh;background-color: white;position:relative; }
.s2-frame{width:90vw;height:auto;margin: auto;position:absolute;top:55%;left:50%;transform: translate(-50%,-50%);}
.s2-frame .result{font-size: 4vw;font-weight: 600;padding-bottom:6vh;}
.s2-frame .s2-imgBox{display:flex;flex-wrap: wrap;justify-content: space-around;}
.s2-frame .s2-imgBox div{flex-basis: 50%;align-items: center;}
.s2-frame .s2-imgBox img{width:100%;height:100%;object-fit: contain;}

/* section3 */
.section3{width:100%;height:100%;background-color: white;position:relative;}
.s3-frame{width:90vw;height:auto;margin: auto;position:absolute;top:55%;left:50%;transform: translate(-50%,-50%);}
.s3-frame .result{font-size:4vw;font-weight: 600;padding-bottom:6vh;margin-bottom: 0;}
.s3-frame img{width:100%;height:auto;}

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

}

  
  /* 모바일 세로 (해상도 ~ 479px)*/ 
  @media all and (max-width:479px) {
    section{overflow:visible;width:100%;height:100%;background-color: #fadada;}
/* section1 */
.section1{width:100%;height:100%;  margin: auto;display:flex;justify-content: space-around;position:relative;}
.s1-frame{width:61.36vw;height:fit-content;display:flex;justify-content: center;flex-wrap: wrap;position:absolute;top:50%;transform: translate(0%,-50%);}
.s1-c1{flex-basis: 100%;height:fit-content; margin: auto 0;text-align: center;}
.s1-c1-item1 img{width:80%}
.s1-c1-item2 img{padding-top: 10vh;width:100%;}
.s2-c1{display: none;}

/* section2 */
.section2{width:100%;height:100vh;background-color: white;position:relative; }
.s2-frame{width:90vw;height:auto;margin: auto;position:absolute;top:55%;left:50%;transform: translate(-50%,-50%);}
.s2-frame .result{font-size: 4vw;font-weight: 600;padding-bottom:6vh;}
.s2-frame .s2-imgBox{display:flex;flex-wrap: wrap;justify-content: space-around;}
.s2-frame .s2-imgBox div{flex-basis: 50%;align-items: center;}
.s2-frame .s2-imgBox img{width:100%;height:100%;object-fit: contain;}

/* section3 */
.section3{width:100%;height:100%;background-color: white;position:relative;}
.s3-frame{width:90vw;height:auto;margin: auto;position:absolute;top:55%;left:50%;transform: translate(-50%,-50%);}
.s3-frame .result{font-size:4vw;font-weight: 600;padding-bottom:6vh;margin-bottom: 0;}
.s3-frame img{width:100%;height:auto;}

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

  }