@import "/css/reset.css";

html {
  font-size: 100%;  
}
@media (max-width: 1199px) {
 html {
    font-size: 60%; 
  }
}
@media (max-width: 743px) {
  html {
    font-size: 45%; 
  } 
}

* {
  box-sizing: border-box;
}

header{
  display: flex;
  padding: 0.5625rem 12.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid #DFDFDF;
  background: #FFFFFF;
  position: sticky;
  top:0;
  left: 0;
  width: 100%;
}
nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.logo__link{
  display: flex;
  width: 9.5625rem;
  height: 3.1875rem;
  padding: 0.3125rem 0.3125rem 0;
  justify-content: center;
  align-items: center;
  gap: 0.5375rem;
  text-decoration: none;
  outline: none;
}
.logo img{
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}
.logo__text{
  color: #3692FF;
  font-family: "ROKAF Sans";
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
body{
  margin:0;
}
/*생략가능 a 기본값이 포인터*/
a{
  cursor: pointer;
}
/* 세션스타일 */
section{
  width: 100%;
  min-height: 33.75rem;
  display: flex;
  justify-content: center;   
  align-items: center;
}

.section--1,
.section--5{
  background: #CFE5FF;
}

/* main */
section .main{
  display: flex;
  width: 100%;
  max-width: 120rem;
  min-width: 0;
  margin: 0 auto; 
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 9rem 20rem;
  gap: 4rem;
  background: #FCFCFC;
}
.section--1 .main{  
  gap: 0.5rem;
  padding: 12.5rem 0 0;  
  background: #CFE5FF;
}
.section--4 .main{  
  margin: 0 auto 20rem; 
}
.section--5 .main{  
  background: #CFE5FF;
  padding: 9rem 0 0; 
}

/* main__text */
section .main__text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;  
  gap: 0.75rem;
  min-width: 0;            
  max-width: 100%;  
}
.section--2 .main__text,
.section--3 .main__text,
.section--4 .main__text{
  flex: 3 1 20rem;
  min-width: 0;
}
.section--3 .main__text{
  align-items: flex-end;
  text-align: end;  
}

/* img */
section img{
  display: flex;
  width: 46.625rem;
  height: 21.25rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.section--1 img{

  padding-right: 0;
}
.section--2 img,
.section--3 img,
.section--4 img{
  flex: 1 3 46.625rem;
  max-width: 50rem;
  height: auto;
  min-width: 0;
}

/* h3스타일 */

h3 {
  color: #374151;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; 
  white-space: pre-line;
}

.section--2 h3 ,
.section--3 h3 ,
.section--4 h3 {
  letter-spacing: 0.05rem;
}

/* h5스타일 */
section h5{
  color: var(--Secondary-700, #374151);
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
}
.section--3 h5{
  text-align: right;
}

/* h6스타일 */
section h6{
  color: var(--Primary-100, #3692FF);
  font-family: Pretendard;
  font-size: 1,125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem; 
}
.section--3 h6{
  text-align: right;
}

/* 버튼  */
.btn{
  display: flex;  
  background: #3692FF;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  color : #ffffffff;
}
.btn--login{
  border-radius: 0.5rem;
  width: 8rem;
  height: 3rem;
  padding: 0.75rem 1.5rem;
  gap: 0.625rem;
}
.btn--item{
  border-radius: 2.5rem;
  height: 3.5rem;
  padding: 1rem 7.75rem;
  gap: 0.625rem;  

}

footer{
  display: flex;
  width: 100%;
  height: 10rem;
  padding: 2rem 12.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  background: #111827;
}
footer .footer__main{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
footer .footer__center{
  display: flex;          
  gap: 1.25rem;              
  justify-content: center; 
  align-items: center;
}
footer a, h6{
  color: #9CA3AF;
  text-align: center;
  font-family: Pretendard;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.sns__icon{
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.sns__icon--facebook{
  background-image: url(/img/ic_facebook.png);
}
.sns__icon--twitter{
  background-image: url(/img/ic_twitter.png);
}
.sns__icon--youtube{
  background-image: url(/img/ic_youtube.png);
}
.sns__icon--instagram{
  background-image: url(/img/ic_instagram.png);
}