html {
  font-size: 62.5%;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}






/* header */
header {
  position: fixed;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 6rem;
}

.headerBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 86%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
}

.whiteHeaderBox {
  background-color: white;
  box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.4);
}

.whiteBoxLoge {
  display: none;
}

.menuBox {
  width: 36rem;
  height: 100%;
}

.menuBox ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
  color: white;
}

.menuBox a {
  color: white;
}

.menuLi {
  color: white;
  cursor: pointer;
}

.menuLi:hover {
  color: grey;
}

.BlackMenuLi {
  color: black;
  cursor: pointer;
}

.BlackMenuLi:hover {
  color: #0069D9;
}

.hembeger{
  display: none;
}
.hembegerMenuBox{
  position: absolute;
  z-index: 1000;
  top: 0;
  right: -100%;
  width: 100vw;
  height: 100vh;
  background-color: white;
  transition-duration: 0.3s;
}
.closeBtnBox{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 4rem;
  padding: 0 1.2rem;
  box-sizing: border-box;
}
.hembegerMenu{
  width: 100%;
  height: 25rem;
}
.hembegerMenu a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6rem;
  border-bottom: 0.1rem solid black;
}
.hembegerMenu a span{
  color: black;
  font-size: 1.6rem;
}




/*firstSection*/
.firstSection {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../../images/firstSectionBg.png);
}

.firstSectionArticle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 148rem;
  height: 53rem;
  transform: translate(-50%, -50%);
}

.firstSectionIntroBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-right: 4rem;
}

.ShortcutsBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20rem;
  height: 4.8rem;
  border: 0.1rem solid white;
  border-radius: 2.4rem;
  font-size: 2rem;
  color: white;
  margin-top: 6.8rem;
  cursor: pointer;
  transition-duration: 0.3s;
}

.ShortcutsBtn:hover {
  background-color: white;
  color: black;
  font-weight: 700;
}









/*seconedSection*/
.seconedSection {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../../images/secondSectionBg.png);
}

.seconedSectionIntroBox {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 148rem;
  height: 42rem;
  transform: translate(-50%, -50%);
}

.seconedSectionTitle {
  font-size: 5.2rem;
  font-weight: 700;
  font-family: "Roboto";
  color: #0069D9;
  margin-right: -1rem;
  opacity: 0;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.seconedSectionSubTitleRocate {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 9.6rem;
}

.seconedSectionSubTitle {
  position: absolute;
  bottom: -2rem;
  text-align: right;
  font-size: 2.4rem;
  font-family: "Roboto";
  color: #0069D9;
  line-height: 3.2rem;
  opacity: 0;
  transition-delay: 0.4s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.seconedSectionContentsRocate {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 16.8rem;
}

.seconedSectionContents {
  position: absolute;
  bottom: -2rem;
  text-align: right;
  font-size: 1.8rem;
  font-family: "Noto Sans CJK KR";
  color: black;
  line-height: 2.8rem;
  opacity: 0;
  transition-delay: 0.6s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}









/*thirdSection*/
.thirdSection {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../../images/thirdBg1.png);
}

.thirdSectionBg {
  position: absolute;
  top: 108%;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  transition-duration: 1.2s;
  transition-timing-function: ease;
  overflow: hidden;
}

.thirdMainTitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 0;
  height: 42rem;
  background-color: rgba(255, 255, 255, 0.8);
  transition-duration: 0.8s;
  transition-delay: 0.6s;
  transition-timing-function: ease;
}

.visibleFirst {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 3rem 0 8rem 0;
  box-sizing: border-box;
}

.visibleFirst span:nth-child(1) {
  position: absolute;
  top: 6%;
  font-size: 4.6rem;
  font-family: "Segoe UI";
  font-weight: 700;
  color: #0069D9;
  opacity: 0;
  transition-delay: 1.2s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleFirst span:nth-child(2) {
  position: absolute;
  top: 26%;
  font-size: 2.4rem;
  font-family: "Segoe UI";
  font-weight: 500;
  color: #0069D9;
  opacity: 0;
  transition-delay: 1.2s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}


.visibleFirst img:nth-child(3){
  position: absolute;
  top: 52%;
  opacity: 0;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleFirst img:nth-child(4){
  display: none;
  position: absolute;
  top: 52%;
  opacity: 0;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}



/* 2 */
.visibleSecond {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: left;
  width: 100%;
  height: 100%;
}

.visibleSecondTitle {
  position: absolute;
  top: 16%;
  left: 22rem;
  transform: translate(0, -50%);
  display: flex;
  align-items: flex-end;
  width: 78rem;
  color: #0069D9;
  opacity: 0;
  transition-delay: 1.2s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleSecondTitle span:nth-child(1) {
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
}

.visibleSecondTitle span:nth-child(2) {
  font-size: 1.6rem;
  font-weight: 500;
  margin-left: 2rem;
}

.visibleSecondContents {
  position: absolute;
  top: 56%;
  left: 22rem;
  transform: translate(0, -50%);
  font-size: 2rem;
  font-family: "Noto Sans CJK KR";
  opacity: 0;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleSecondContents span {
  color: #0069D9;
}

/* 3 */
.visibleThird {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: left;
  width: 100%;
  height: 100%;
}

.visibleThirdTitle {
  position: absolute;
  top: 16%;
  left: 22rem;
  transform: translate(0, -50%);
  display: flex;
  align-items: flex-end;
  width: 78rem;
  color: #0069D9;
  opacity: 0;
  transition-delay: 1.2s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleThirdTitle span:nth-child(1) {
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
}

.visibleThirdTitle span:nth-child(2) {
  font-size: 1.6rem;
  font-weight: 500;
  margin-left: 2rem;
}

.visibleThirdContents {
  position: absolute;
  top: 56%;
  left: 22rem;
  transform: translate(0, -50%);
  font-size: 2rem;
  font-family: "Noto Sans CJK KR";
  opacity: 0;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleThirdContents span {
  color: #0069D9;
}

/* 4 */
.visibleFourth {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: left;
  width: 100%;
  height: 100%;
}

.visibleFourthTitle {
  position: absolute;
  top: 16%;
  left: 22rem;
  transform: translate(0, -50%);
  display: flex;
  align-items: flex-end;
  width: 78rem;
  color: #0069D9;
  opacity: 0;
  transition-delay: 1.2s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleFourthTitle span:nth-child(1) {
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
}

.visibleFourthTitle span:nth-child(2) {
  font-size: 1.6rem;
  font-weight: 500;
  margin-left: 2rem;
}

.visibleFourthContents {
  position: absolute;
  top: 56%;
  left: 22rem;
  transform: translate(0, -50%);
  font-size: 2rem;
  font-family: "Noto Sans CJK KR";
  opacity: 0;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleFourthContents span {
  color: #0069D9;
}

/* 5 */
.visibleFifth {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: left;
  width: 100%;
  height: 100%;
}

.visibleFifthTitle {
  position: absolute;
  top: 16%;
  left: 22rem;
  transform: translate(0, -50%);
  display: flex;
  align-items: flex-end;
  width: 78rem;
  color: #0069D9;
  opacity: 0;
  transition-delay: 1.2s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleFifthTitle span:nth-child(1) {
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
}

.visibleFifthTitle span:nth-child(2) {
  font-size: 1.6rem;
  font-weight: 500;
  margin-left: 2rem;
}

.visibleFifthContents {
  position: absolute;
  top: 56%;
  left: 22rem;
  transform: translate(0, -50%);
  font-size: 2rem;
  font-family: "Noto Sans CJK KR";
  opacity: 0;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleFifthContents span {
  color: #0069D9;
}

/* 6 */
.visibleSixth {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: left;
  width: 100%;
  height: 100%;
}

.visibleSixthTitle {
  position: absolute;
  top: 16%;
  left: 22rem;
  transform: translate(0, -50%);
  display: flex;
  align-items: flex-end;
  width: 78rem;
  color: #0069D9;
  opacity: 0;
  transition-delay: 1.2s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleSixthTitle span:nth-child(1) {
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
}

.visibleSixthTitle span:nth-child(2) {
  font-size: 1.6rem;
  font-weight: 500;
  margin-left: 2rem;
}

.visibleSixthContents {
  position: absolute;
  top: 56%;
  left: 22rem;
  transform: translate(0, -50%);
  font-size: 2rem;
  font-family: "Noto Sans CJK KR";
  opacity: 0;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}

.visibleSixthContents span {
  color: #0069D9;
}









/*fourthSection*/
.fourthSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0 22rem;
  box-sizing: border-box;
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(175, 212, 252, 1) 100%);
}

.fourthSectionArticle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 52.7rem;
}

.fourthSectionTitle {
  font-size: 4.6rem;
  font-weight: 700;
  color: #0069D9;
}

.fourthSectionSubTitle {
  font-size: 2.4rem;
  font-weight: 500;
  color: #0069D9;
}

.fourthSectionContents {
  font-size: 2rem;
  font-family: "Noto Sans CJK KR";
  line-height: 3.2rem;
  margin-top: 10rem;
}




/*footer*/
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 6.4rem;
  font-size: 1.2rem;
  color: white;
  background-color: #444;
}

footer div {
  margin: 0 1.8rem;
}