@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Thin.eot");
  src: local("Noto Sans Thin"), local("NotoSans-Thin"), url("../fonts/NotoSans-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Thin.woff") format("woff"), url("../fonts/NotoSans-Thin.ttf") format("truetype"), url("../fonts/NotoSans-Thin.svg#NotoSans-Thin") format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-ThinItalic.eot");
  src: local("Noto Sans ThinItalic"), local("NotoSans-ThinItalic"), url("../fonts/NotoSans-ThinItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-ThinItalic.woff") format("woff"), url("../fonts/NotoSans-ThinItalic.ttf") format("truetype"), url("../fonts/NotoSans-ThinItalic.svg#NotoSans-ThinItalic") format("svg");
  font-weight: 100;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-ExtraLight.eot");
  src: local("Noto Sans ExtraLight"), local("NotoSans-ExtraLight"), url("../fonts/NotoSans-ExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-ExtraLight.woff") format("woff"), url("../fonts/NotoSans-ExtraLight.ttf") format("truetype"), url("../fonts/NotoSans-ExtraLight.svg#NotoSans-ExtraLight") format("svg");
  font-weight: 200;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-ExtraLightItalic.eot");
  src: local("Noto Sans ExtraLightItalic"), local("NotoSans-ExtraLightItalic"), url("../fonts/NotoSans-ExtraLightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-ExtraLightItalic.woff") format("woff"), url("../fonts/NotoSans-ExtraLightItalic.ttf") format("truetype"), url("../fonts/NotoSans-ExtraLightItalic.svg#NotoSans-ExtraLightItalic") format("svg");
  font-weight: 200;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Light.eot");
  src: local("Noto Sans Light"), local("NotoSans-Light"), url("../fonts/NotoSans-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Light.woff") format("woff"), url("../fonts/NotoSans-Light.ttf") format("truetype"), url("../fonts/NotoSans-Light.svg#NotoSans-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-LightItalic.eot");
  src: local("Noto Sans LightItalic"), local("NotoSans-LightItalic"), url("../fonts/NotoSans-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-LightItalic.woff") format("woff"), url("../fonts/NotoSans-LightItalic.ttf") format("truetype"), url("../fonts/NotoSans-LightItalic.svg#NotoSans-LightItalic") format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Regular.eot");
  src: local("Noto Sans Regular"), local("NotoSans-Regular"), url("../fonts/NotoSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Regular.woff") format("woff"), url("../fonts/NotoSans-Regular.ttf") format("truetype"), url("../fonts/NotoSans-Regular.svg#NotoSans-Regular") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Italic.eot");
  src: local("Noto Sans Italic"), local("NotoSans-Italic"), url("../fonts/NotoSans-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Italic.woff") format("woff"), url("../fonts/NotoSans-Italic.ttf") format("truetype"), url("../fonts/NotoSans-Italic.svg#NotoSans-Italic") format("svg");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Medium.eot");
  src: local("Noto Sans Medium"), local("NotoSans-Medium"), url("../fonts/NotoSans-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Medium.woff") format("woff"), url("../fonts/NotoSans-Medium.ttf") format("truetype"), url("../fonts/NotoSans-Medium.svg#NotoSans-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-MediumItalic.eot");
  src: local("Noto Sans MediumItalic"), local("NotoSans-MediumItalic"), url("../fonts/NotoSans-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-MediumItalic.woff") format("woff"), url("../fonts/NotoSans-MediumItalic.ttf") format("truetype"), url("../fonts/NotoSans-MediumItalic.svg#NotoSans-MediumItalic") format("svg");
  font-weight: 500;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-SemiBold.eot");
  src: local("Noto Sans SemiBold"), local("NotoSans-SemiBold"), url("../fonts/NotoSans-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-SemiBold.woff") format("woff"), url("../fonts/NotoSans-SemiBold.ttf") format("truetype"), url("../fonts/NotoSans-SemiBold.svg#NotoSans-SemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-SemiBoldItalic.eot");
  src: local("Noto Sans SemiBoldItalic"), local("NotoSans-SemiBoldItalic"), url("../fonts/NotoSans-SemiBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-SemiBoldItalic.woff") format("woff"), url("../fonts/NotoSans-SemiBoldItalic.ttf") format("truetype"), url("../fonts/NotoSans-SemiBoldItalic.svg#NotoSans-SemiBoldItalic") format("svg");
  font-weight: 600;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Bold.eot");
  src: local("Noto Sans Bold"), local("NotoSans-Bold"), url("../fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Bold.woff") format("woff"), url("../fonts/NotoSans-Bold.ttf") format("truetype"), url("../fonts/NotoSans-Bold.svg#NotoSans-Bold") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-BoldItalic.eot");
  src: local("Noto Sans BoldItalic"), local("NotoSans-BoldItalic"), url("../fonts/NotoSans-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-BoldItalic.woff") format("woff"), url("../fonts/NotoSans-BoldItalic.ttf") format("truetype"), url("../fonts/NotoSans-BoldItalic.svg#NotoSans-BoldItalic") format("svg");
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-ExtraBold.eot");
  src: local("Noto Sans ExtraBold"), local("NotoSans-ExtraBold"), url("../fonts/NotoSans-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-ExtraBold.woff") format("woff"), url("../fonts/NotoSans-ExtraBold.ttf") format("truetype"), url("../fonts/NotoSans-ExtraBold.svg#NotoSans-ExtraBold") format("svg");
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-ExtraBoldItalic.eot");
  src: local("Noto Sans ExtraBoldItalic"), local("NotoSans-ExtraBoldItalic"), url("../fonts/NotoSans-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-ExtraBoldItalic.woff") format("woff"), url("../fonts/NotoSans-ExtraBoldItalic.ttf") format("truetype"), url("../fonts/NotoSans-ExtraBoldItalic.svg#NotoSans-ExtraBoldItalic") format("svg");
  font-weight: 800;
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Black.eot");
  src: local("Noto Sans Black"), local("NotoSans-Black"), url("../fonts/NotoSans-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Black.woff") format("woff"), url("../fonts/NotoSans-Black.ttf") format("truetype"), url("../fonts/NotoSans-Black.svg#NotoSans-Black") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-BlackItalic.eot");
  src: local("Noto Sans BlackItalic"), local("NotoSans-BlackItalic"), url("../fonts/NotoSans-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-BlackItalic.woff") format("woff"), url("../fonts/NotoSans-BlackItalic.ttf") format("truetype"), url("../fonts/NotoSans-BlackItalic.svg#NotoSans-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic;
  font-display: optional;
}

@media screen and (max-width: 999px) {
  .materials-header {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    overflow: hidden;
  }
}

.materials-header .h1 {
  font-family: "Noto Sans","Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4.84848vw;
  line-height: 4.84848vw;
  letter-spacing: -0.02em;
  padding: 5.07576vw 0vw 2.95455vw 0vw;
  z-index: 1;
  position: relative;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header .h1 {
    font-size: 8.42105vw;
    line-height: 8.42105vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .h1 {
    font-size: 20vw;
    line-height: 20vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header .h1 {
    font-size: 64px;
    line-height: 64px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header .h1 {
    font-size: 4.44444vw;
    line-height: 4.44444vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header .h1 {
    font-size: 71.26797px;
    line-height: 71.26797px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header .h1 {
    padding: 8.81579vw 0vw 5.13158vw 0vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .h1 {
    padding: 20.9375vw 0vw 12.1875vw 0vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header .h1 {
    padding-left: 0px;
    padding-top: 67px;
    padding-right: 0px;
    padding-bottom: 39px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header .h1 {
    padding: 4.65278vw 0vw 2.70833vw 0vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header .h1 {
    padding: 74.60865px 0px 43.42892px 0px;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .h1 {
    font-size: 12.5vw;
    line-height: 14.0625vw;
    padding: 10.625vw 0 8.75vw;
  }
}

.materials-header__desc {
  font-family: "Noto Sans","Arial", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.51515vw;
  line-height: 2.42424vw;
  letter-spacing: -0.02em;
  z-index: 1;
  position: relative;
  padding-bottom: 6.59091vw;
  width: 54.01515vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header__desc {
    font-size: 2.63158vw;
    line-height: 4.21053vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header__desc {
    font-size: 6.25vw;
    line-height: 10vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header__desc {
    font-size: 20px;
    line-height: 32px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header__desc {
    font-size: 1.38889vw;
    line-height: 2.22222vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header__desc {
    font-size: 22.27124px;
    line-height: 35.63398px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header__desc {
    padding-bottom: 11.44737vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header__desc {
    padding-bottom: 27.1875vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header__desc {
    padding-bottom: 87px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header__desc {
    padding-bottom: 6.04167vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header__desc {
    padding-bottom: 96.87989px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header__desc {
    width: 93.81579vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header__desc {
    width: 222.8125vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header__desc {
    width: 713px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header__desc {
    width: 49.51389vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header__desc {
    width: 793.96971px;
  }
}

@media screen and (max-width: 759px) {
  .materials-header__desc {
    font-size: 5.625vw;
    line-height: 8.75vw;
    padding: 0 0 14.6875vw;
    width: 100%;
  }
}

.materials-header .container {
  position: relative;
}

.materials-header .txt-bg {
  position: absolute;
  color: #F5F5F5;
  font-family: "Noto Sans","Arial", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 11.36364vw;
  line-height: 9.84848vw;
  letter-spacing: -0.02em;
  left: 7.04545vw;
  top: 0.68182vw;
  width: 51.51515vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header .txt-bg {
    font-size: 19.73684vw;
    line-height: 17.10526vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .txt-bg {
    font-size: 46.875vw;
    line-height: 40.625vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header .txt-bg {
    font-size: 150px;
    line-height: 130px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header .txt-bg {
    font-size: 10.41667vw;
    line-height: 9.02778vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header .txt-bg {
    font-size: 167.0343px;
    line-height: 144.76306px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header .txt-bg {
    left: 12.23684vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .txt-bg {
    left: 29.0625vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header .txt-bg {
    left: 93px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header .txt-bg {
    left: 6.45833vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header .txt-bg {
    left: 103.56127px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header .txt-bg {
    top: 1.18421vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .txt-bg {
    top: 2.8125vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header .txt-bg {
    top: 9px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header .txt-bg {
    top: 0.625vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header .txt-bg {
    top: 10.02206px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials-header .txt-bg {
    width: 89.47368vw;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .txt-bg {
    width: 212.5vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials-header .txt-bg {
    width: 680px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials-header .txt-bg {
    width: 47.22222vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials-header .txt-bg {
    width: 757.22216px;
  }
}

@media screen and (max-width: 759px) {
  .materials-header .txt-bg {
    font-size: 21.875vw;
    line-height: 17.5vw;
    left: 13.4375vw;
    width: 104.375vw;
  }
}

.materials__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -webkit-column-gap: 2.27273vw;
          column-gap: 2.27273vw;
  row-gap: 2.27273vw;
  margin-bottom: 10vw;
  padding-right: 2.27273vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__wrapper {
    -webkit-column-gap: 3.94737vw;
            column-gap: 3.94737vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__wrapper {
    -webkit-column-gap: 9.375vw;
            column-gap: 9.375vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__wrapper {
    -webkit-column-gap: 30px;
            column-gap: 30px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__wrapper {
    -webkit-column-gap: 2.08333vw;
            column-gap: 2.08333vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__wrapper {
    -webkit-column-gap: 33.40686px;
            column-gap: 33.40686px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__wrapper {
    row-gap: 3.94737vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__wrapper {
    row-gap: 9.375vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__wrapper {
    row-gap: 30px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__wrapper {
    row-gap: 2.08333vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__wrapper {
    row-gap: 33.40686px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__wrapper {
    margin-bottom: 17.36842vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__wrapper {
    margin-bottom: 41.25vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__wrapper {
    margin-bottom: 132px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__wrapper {
    margin-bottom: 9.16667vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__wrapper {
    margin-bottom: 146.99018px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__wrapper {
    padding-right: 3.94737vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__wrapper {
    padding-right: 9.375vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__wrapper {
    padding-right: 30px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__wrapper {
    padding-right: 2.08333vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__wrapper {
    padding-right: 33.40686px;
  }
}

@media screen and (max-width: 759px) {
  .materials__wrapper {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    padding-right: 0;
    -webkit-column-gap: 0;
            column-gap: 0;
    row-gap: 12.5vw;
    margin-bottom: 20.9375vw;
  }
}

@media screen and (min-width: 760px) and (max-width: 999px) {
  .materials__wrapper {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    padding-right: 0;
    -webkit-column-gap: 3.94737vw;
            column-gap: 3.94737vw;
    row-gap: 6.18421vw;
    margin-bottom: 10.52632vw;
  }
}

.materials__item {
  min-height: 31.21212vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item {
    min-height: 54.21053vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item {
    min-height: 128.75vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item {
    min-height: 412px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item {
    min-height: 28.61111vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item {
    min-height: 458.78754px;
  }
}

@media screen and (max-width: 999px) {
  .materials__item {
    min-height: 0;
  }
}

.materials__item::after {
  background: url("../img/svg/materials_plus.svg") no-repeat;
  content: '';
  position: absolute;
  margin-top: auto;
  background-size: cover;
  margin-bottom: auto;
  top: 0;
  bottom: 0;
  height: 2.00758vw;
  right: 1.28788vw;
  width: 2.00758vw;
  top: auto;
  bottom: 1.17424vw;
  opacity: 0;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item::after {
    height: 3.48684vw;
    right: 2.23684vw;
    width: 3.48684vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item::after {
    height: 8.28125vw;
    right: 5.3125vw;
    width: 8.28125vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item::after {
    height: 26.5px;
    right: 17px;
    width: 26.5px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item::after {
    height: 1.84028vw;
    right: 1.18056vw;
    width: 1.84028vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item::after {
    height: 29.50939px;
    right: 18.93055px;
    width: 29.50939px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item::after {
    bottom: 2.03947vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item::after {
    bottom: 4.84375vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item::after {
    bottom: 15.5px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item::after {
    bottom: 1.07639vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item::after {
    bottom: 17.26021px;
  }
}

.materials__item__img-wrapper {
  width: 100%;
  height: 16.06061vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item__img-wrapper {
    height: 27.89474vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item__img-wrapper {
    height: 66.25vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item__img-wrapper {
    height: 212px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item__img-wrapper {
    height: 14.72222vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item__img-wrapper {
    height: 236.07514px;
  }
}

@media screen and (max-width: 759px) {
  .materials__item__img-wrapper {
    height: 48.75vw;
  }
}

.materials__item__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.materials__item__wrapper {
  padding: 1.59091vw 4.92424vw 2.04545vw 0vw;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  -webkit-transition-property: padding;
  transition-property: padding;
  position: relative;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item__wrapper {
    padding: 2.76316vw 8.55263vw 3.55263vw 0vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item__wrapper {
    padding: 6.5625vw 20.3125vw 8.4375vw 0vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item__wrapper {
    padding-left: 0px;
    padding-top: 21px;
    padding-right: 65px;
    padding-bottom: 27px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item__wrapper {
    padding: 1.45833vw 4.51389vw 1.875vw 0vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item__wrapper {
    padding: 23.3848px 72.38153px 30.06617px 0px;
  }
}

@media screen and (max-width: 759px) {
  .materials__item__wrapper {
    padding: 4.375vw 0 0;
  }
}

@media screen and (min-width: 760px) and (max-width: 999px) {
  .materials__item__wrapper {
    padding: 2.36842vw 0 5.13158vw;
  }
}

.materials__item__title {
  font-family: "Noto Sans","Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.51515vw;
  line-height: 2.12121vw;
  letter-spacing: -0.02em;
  display: inline;
  border-bottom: 1px solid rgba(20, 39, 111, 0.3);
  border-width: 0.07576vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item__title {
    font-size: 2.63158vw;
    line-height: 3.68421vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item__title {
    font-size: 6.25vw;
    line-height: 8.75vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item__title {
    font-size: 20px;
    line-height: 28px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item__title {
    font-size: 1.38889vw;
    line-height: 1.94444vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item__title {
    font-size: 22.27124px;
    line-height: 31.17974px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item__title {
    border-width: 0.13158vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item__title {
    border-width: 0.3125vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item__title {
    border-width: 1px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item__title {
    border-width: 0.06944vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item__title {
    border-width: 1.11356px;
  }
}

@media screen and (max-width: 759px) {
  .materials__item__title {
    font-size: 5vw;
    line-height: 8.75vw;
  }
}

@media screen and (max-width: 999px) {
  .materials__item:hover {
    background: #fff !important;
  }
}

.materials__item:hover::after {
  opacity: 1;
}

@media screen and (max-width: 999px) {
  .materials__item:hover::after {
    opacity: 0;
  }
}

.materials__item:hover .materials__item__wrapper {
  padding: 1.59091vw 2.80303vw 2.04545vw 2.12121vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__item:hover .materials__item__wrapper {
    padding: 2.76316vw 4.86842vw 3.55263vw 3.68421vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__item:hover .materials__item__wrapper {
    padding: 6.5625vw 11.5625vw 8.4375vw 8.75vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__item:hover .materials__item__wrapper {
    padding-left: 28px;
    padding-top: 21px;
    padding-right: 37px;
    padding-bottom: 27px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__item:hover .materials__item__wrapper {
    padding: 1.45833vw 2.56944vw 1.875vw 1.94444vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__item:hover .materials__item__wrapper {
    padding: 23.3848px 41.20179px 30.06617px 31.17974px;
  }
}

@media screen and (max-width: 759px) {
  .materials__item:hover .materials__item__wrapper {
    padding: 4.375vw 0 0;
  }
}

@media screen and (min-width: 760px) and (max-width: 999px) {
  .materials__item:hover .materials__item__wrapper {
    padding: 2.36842vw 0 5.13158vw;
  }
}

.materials__item:hover .materials__item__title {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 999px) {
  .materials__item:hover .materials__item__title {
    color: #333333;
    border-color: rgba(20, 39, 111, 0.3);
  }
}

.materials__item.bg_blue:hover {
  background: #14276F;
}

.materials__item.bg_orange:hover {
  background: #F26522;
}

.materials__item.bg_red:hover {
  background: #C4161C;
}

.materials__nav-pages {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-bottom: 1px solid #E6E7E8;
  margin-bottom: 7.5vw;
  border-width: 0.07576vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__nav-pages {
    margin-bottom: 13.02632vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages {
    margin-bottom: 30.9375vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__nav-pages {
    margin-bottom: 99px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__nav-pages {
    margin-bottom: 6.875vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__nav-pages {
    margin-bottom: 110.24264px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__nav-pages {
    border-width: 0.13158vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages {
    border-width: 0.3125vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__nav-pages {
    border-width: 1px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__nav-pages {
    border-width: 0.06944vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__nav-pages {
    border-width: 1.11356px;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages {
    margin-bottom: 42.8125vw;
  }
}

.materials__nav-pages .page-numbers {
  font-family: "Noto Sans","Arial", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.27273vw;
  line-height: 2.65152vw;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #BDBDBD;
  padding-bottom: 0.22727vw;
  border-bottom: 3px solid #fff;
  border-width: 0.30303vw;
}

.materials__nav-pages .page-numbers:not(:last-child) {
  margin-right: 4.54545vw;
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__nav-pages .page-numbers:not(:last-child) {
    margin-right: 7.89474vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages .page-numbers:not(:last-child) {
    margin-right: 18.75vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__nav-pages .page-numbers:not(:last-child) {
    margin-right: 60px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__nav-pages .page-numbers:not(:last-child) {
    margin-right: 4.16667vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__nav-pages .page-numbers:not(:last-child) {
    margin-right: 66.81372px;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages .page-numbers:not(:last-child) {
    margin-right: 8.125vw;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__nav-pages .page-numbers {
    font-size: 3.94737vw;
    line-height: 4.60526vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages .page-numbers {
    font-size: 9.375vw;
    line-height: 10.9375vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__nav-pages .page-numbers {
    font-size: 30px;
    line-height: 35px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__nav-pages .page-numbers {
    font-size: 2.08333vw;
    line-height: 2.43056vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__nav-pages .page-numbers {
    font-size: 33.40686px;
    line-height: 38.97467px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__nav-pages .page-numbers {
    padding-bottom: 0.39474vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages .page-numbers {
    padding-bottom: 0.9375vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__nav-pages .page-numbers {
    padding-bottom: 3px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__nav-pages .page-numbers {
    padding-bottom: 0.20833vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__nav-pages .page-numbers {
    padding-bottom: 3.34069px;
  }
}

@media screen and (max-width: 999px) and (min-width: 760px) {
  .materials__nav-pages .page-numbers {
    border-width: 0.52632vw;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages .page-numbers {
    border-width: 1.25vw;
  }
}

@media screen and (min-width: 1320px) and (max-width: 1440px) {
  .materials__nav-pages .page-numbers {
    border-width: 4px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1599px) {
  .materials__nav-pages .page-numbers {
    border-width: 0.27778vw;
  }
}

@media screen and (min-width: 1600px) {
  .materials__nav-pages .page-numbers {
    border-width: 4.45425px;
  }
}

@media screen and (max-width: 759px) {
  .materials__nav-pages .page-numbers {
    font-size: 7.8125vw;
    line-height: 17.1875vw;
    padding-bottom: 0;
  }
}

.materials__nav-pages .page-numbers.current, .materials__nav-pages .page-numbers:hover {
  color: #393839;
  border-color: #F26522;
  cursor: auto;
}

.materials__nav-pages .page-numbers:hover {
  cursor: pointer;
}

.materials__nav-pages .page-numbers.dots {
  cursor: auto;
}
/*# sourceMappingURL=materials.css.map */