@charset "UTF-8";

/*
  WaveDividers
  https://shapedividers.com/
======================================== */

header,header .desc,footer,
#mainContent .contentsWrap:nth-child(odd),
#subContent .contentsWrap:nth-child(odd) {
  position: relative;
  overflow: hidden;
}

header::after,header .desc::after,footer::before,
#mainContent .contentsWrap:nth-child(odd)::before,
#subContent .contentsWrap:nth-child(odd)::before,
#mainContent .contentsWrap:nth-child(odd)::after,
#subContent .contentsWrap:nth-child(odd)::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
}



/* Header Description
---------------------------------------- */
header .desc {
  padding-bottom: 48px;
}

header .desc::after {
  background-image: url(../images/waveDivid/header-desc.svg);
  background-position: 50% 100%;
  background-size: 300% 50px;
}



/* Main Section
---------------------------------------- */
#mainContent .contentsWrap:nth-child(odd)>.contentsInner,
#subContent .contentsWrap:nth-child(odd)>.contentsInner {
  background-color: var(--color_offwhite);
}

#mainContent .contentsWrap:nth-child(odd),
#subContent .contentsWrap:nth-child(odd) {
  padding-top: 98px;
  padding-bottom: 98px;
}

/* Main Section - Top */
#mainContent .contentsWrap:nth-child(odd)::before,
#subContent .contentsWrap:nth-child(odd)::before {
  background-image: url(../images/waveDivid/mainSection-top.svg);
  background-position: 50% 0%;
  background-size: 300% 100px;
}

/* Main Section - Bottom */
#mainContent .contentsWrap:nth-child(odd)::after,
#subContent .contentsWrap:nth-child(odd)::after {
  background-image: url(../images/waveDivid/mainSection-bottom.svg);
  background-position: 50% 100%;
  background-size: 300% 100px;
}


/* Header Footer - Navigation
---------------------------------------- */
header {
  padding-bottom: 98px;
}

header::after {
  background-image: url(../images/waveDivid/header-bottom.svg);
  background-position: 50% 100%;
  background-size: 300% 100px;
  transform: scale(-1, 1);
}

footer {
  padding-top: 48px;
}

footer::before {
  background-image: url(../images/waveDivid/footer-top.svg);
  background-position: 50% 0%;
  background-size: 300% 50px;
}