@font-face
{
  font-family: 'DMSans';
  src: url('../font/DMSans/DMSans-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face
{
  font-family: 'DMSans';
  src: url('../font/DMSans/DMSans-Medium.woff') format('woff');
  font-style: normal;
  font-weight: 500;
}
@font-face
{
  font-family: 'DMSans';
  src: url('../font/DMSans/DMSans-Bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
}


*,*::after,*::before
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'DMSans';
  font-weight: 400;
}

body{
  overflow-x: hidden;
  background: #F7F7F7;
  flex-direction: column;
}

a{
  text-decoration: none;
}

ul{
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.button{
  outline: 0;
  border: none;
  width: 188px;
  height: 60.65px;
  border-radius: 10.11px;
  overflow: hidden;
  text-align: center;
  font-size: 20.22px;
  color: #ffffff;
  cursor: pointer;
  background: rgb(0,105,202);
  background: linear-gradient(35deg, rgba(0,105,202,1), rgba(107,215,255,1), rgba(107,215,255,1), rgba(0,105,202,1));
  background-size: 300%;
  background-position: left;
  transition: background-position 1s ease-in-out;
}

.button:hover{
  background-position: right;
}

/* navigation */

header{
  width: 100%;
  position: fixed;
  top: 0;
  background: #ffffff;
  z-index: 99;
}

header .wrap{
  width: 1200px;
  max-width: 100%;
  padding: 0.5em 0;
  display: flex;
  align-items: flex-start;
  margin: 0 2em;
}

header .wrap .item{
  gap: 1em;
}


header img{
  width: 40px;
}

header span{
  display: inline-block;
  color: #262E3A;
  text-transform: uppercase;
  font-size: 32.02px;
  font-weight: 700;
}

header span em{
  font-style: normal;
  color: #00ACEC;
}

/* end of navigation */

/* section 1 */

.sec1{
  width: 100%;
  height: 100vh;
  background: #ffffff;
}

.sec1Wrapper{
  width: 1200px;
  max-width: 100%;
  margin: 3em 2em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 1em;
}

.sec1 h1{
  color: #194587;
  font-size: 100.18px;
  font-weight: 700;
  width: 79%;
}

.sec1 .container{
  width: 744px;
  overflow: hidden;
}

.sec1 .des{
  font-size: 24px;
  height: 100%;
}

.sec1 .des:first-child{
  height: 100%;
}

.sec1 .hyperlink{
  font-size: 20.53px;
  color: #00ACEC;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.sec1 .hyperlink i{
  transition: all .2s ease;
}

.sec1 .hyperlink:hover i{
  margin-left: 15px;
}

/* end of section 1 */

/* section 2 */

.sec2{
  width: 100%;
}

.sec2Wrapper{
  width: 1200px;
  max-width: 100%;
  margin: 7em 2em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 1em;
}

.sec2 h2{
  font-size: 30px;
  font-weight: 500;
}

.sec2 p{
  font-size: 24px;
  width: 80%;
}

/* end of section 2 */

/* section 3 */

.sec3{
  width: 100%;
}

.sec3Wrapper{
  width: 1200px;
  max-width: 100%;
  margin: 0 2em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 2em;
}

.sec3 h2{
  font-size: 30px;
  font-weight: 500;
}

.sec3 .boxes{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2.5em;
}

.sec3 .boxes .box{
  width: 100%;
  height: 384px;
  background: #ffffff;
  padding: 3em 1em 0 1em;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1em;
}

.sec3 .boxes .box .item{
  width: 100px;
  height: 100px;
  border-radius: 15px;
  overflow: hidden;
  background: rgb(0,105,202);
  background: linear-gradient(53deg, rgba(0,105,202,1) 19%, rgba(107,215,255,1) 95%);
}

.sec3 .boxes .box .item i{
  font-size: 50px;
  color: #ffffff;
}

.sec3 .boxes .box h3{
  font-size: 20px;
  font-weight: 500;
}

.sec3 .boxes .box p{
  font-size: 18px;
  width: 94%;
}

/* end of section 3 */

/* section 4 */

.sec4{
  width: 100%;
}

.sec4Wrapper{
  width: 1200px;
  max-width: 100%;
  margin: 5em 2em;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 3em;
}

.sec4 h2{
  font-size: 30px;
  font-weight: 500;
}

.sec4 .rectangle{
  width: 100%;
  height: 362px;
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.sec4 .img{
  width: 30%;
  height: 100%;
}

.sec4 .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec4 .item{
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 2em;
  padding: 2em 3em;
}

.sec4 .item h3{
  font-size: 30px;
  font-weight: 500;
}

.sec4 .item p{
  font-size: 24px;
  color: #4B4D52;
  width: 91%;
}

/* end of section 4 */

/* section 5 */

.sec5{
  width: 100%;
  background: #ECEEF1;
}

.sec5Wrapper{
  width: 1200px;
  max-width: 100%;
  margin: 6em 2em;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 2.5em;
}

.sec5 h2{
  font-size: 30px;
  font-weight: 500;
}

.sec5 form{
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: #ffffff;
  gap: 2em;
  flex-direction: column;
  padding: 4em 5em;
}

.sec5 .container{
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 2em;
}

.sec5 .container .left{
  width: 30%;
  height: 230px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 1.5em;
}

.sec5 .container .left .wrap{
  width: 100%;
  height: 100%;
}

.sec5 .container .right{
  width: 70%;
  height: 100%;
}

.sec5 form label{
  font-size: 16px;
}

.sec5 input, .sec5 textarea{
  outline: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #D9D9D9;
  padding: 1em;
}

.sec5 input{
  width: 100%;
  height: 60px;
}

.sec5 textarea{
  width: 100%;
  height: 187px;
  resize: none;
}

.button.two{
  width: 136px;
  height: 60px;
  padding: 0;
  border: 0;
}

.sec5 ul{
  gap: 2em;
}

.sec5 ul li{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.sec5 ul li i{
  color: #ffffff;
  font-size: 28.7px;
}

.sec5 ul .fb{
  background: #1877F2;
}

.sec5 ul .ig{
  background-image: url('../img/pic/img2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sec5 ul .li{
  background: #0077BB;
}

.sec5 ul .yt{
  background: #FF0000;
}

ul .yt i{
  margin-left: -8px;
}
/* end of section 5 */

/* footer */

footer{
  width: 100%;
  height: 109px;
  background: #262E3A;
}

footer ul{
  width: 1200px;
  max-width: 100%;
  gap: 1.8em;
}

footer ul li a{
  color: #8796AB;
  font-size: 20px;
}

/* end of footer */

@media only screen and (max-width: 1200px){

  /* section 1 */
  header span {
    font-size: 28px;
  }

  .sec1 h1 {
    font-size: 75px;
    width: 62%;
  }

  .sec1 .container{
    width: 58%;
  }

  .sec1 .des {
    font-size: 21px;
  }

  .sec1 .hyperlink {
    font-size: 16.5px;
  }
  /* end of section 1 */

  /* section 2 */
  .sec2 p {
    font-size: 21px;
    width: 77%;
  }
  /* end of section 2 */

  /* section 3 */
  .sec3 .boxes .box {
    height: 357px;
  }

  .sec3 .boxes .box p {
    font-size: 16px;
    width: 90%;
  }
  /* end of section 3 */

  /* section 4 */
  .sec4 .item h3 {
    font-size: 28px;
  }

  .sec4 .item p {
    font-size: 20px;
    width: 88%;
  }

  .button {
    width: 175px;
    height: 56px;
    font-size: 18.5px;
  }
  /* end of section 4 */

  /* section 5 */
  .sec5 form label {
    font-size: 14.5px;
  }

  .button.two {
    width: 134px;
    height: 59px;
  }

  .sec5 ul li {
    width: 50px;
    height: 50px;
  }

  .sec5 ul li i {
    font-size: 24px;
  }
  /* end of section 5 */

  /* footer */
  footer ul li a {
    font-size: 18px;
  }
  /* end of footer */

}

@media only screen and (max-width: 900px){

  /* navigation */
  header img {
    width: 39.93px;
  }

  header span {
    font-size: 23.95px;
  }
  /* end of navigation */

  /* section 1 */
  .sec1 h1 {
    font-size: 54.83px;
    width: 380px;
  }

  .sec1 .container{
    width: 552px;
  }

  .sec1 .des {
    font-size: 18px;
  }

  .sec1 .hyperlink {
    font-size: 13.38px;
  }
  /* end of section 1 */

  /* section 2 */
  .sec2 p {
    font-size: 18px;
    width: 89%;
  }
  /* end of section 2 */

  /* section 3 */
  .sec3 .boxes {
    gap: 1em;
  }

  .sec3 .boxes .box p {
    font-size: 14px;
    width: 100%;
  }
  /* end of section 3 */

  /* section 4 */
  .sec4 .item h3 {
    font-size: 25.86px;
  }

  .sec4 .item p {
    font-size: 15.52px;
    width: 100%;
  }

  .button {
    width: 162.07px;
    height: 52.28px;
    font-size: 17.43px;
  }
  /* end of section 4 */

  /* section 5 */
  .sec5 form label {
    font-size: 13.03px;
  }

  .button.two {
    width: 132px;
    height: 58.06px;
  }

  .sec5 ul li {
    width: 39.64px;
    height: 39.64px;
  }

  .sec5 ul li i {
    font-size: 11.54px;
  }

  ul .yt i {
    margin-left: -3px;
  }
  /* end of section 5 */

  /* footer */
  footer ul li a {
    font-size: 15.74px;
  }
  /* end of footer */

}

@media only screen and (max-width: 600px){
  /* navigation */
  header {
    background: #ECEEF1;
  }
  /* end of navigation */

  /* section 1 */
  .sec1 {
    background: #ECEEF1;
  }

  .sec1 h1 {
    width: 264px;
  }

  

  .sec1 .container {
    width: 100%;
  }
  /* end of section 1 */

  /* section 2 */
  .sec2 p {
    width: 100%;
  }
  /* end of section 2 */

  /* section 3 */
  .sec3 .boxes {
    flex-direction: column;
  }
  /* end of section 3 */

  /* section 4 */
  .sec4 .rectangle {
    height: auto;
    flex-direction: column;
  }

  .sec4 .img {
    width: 100%;
    height: 50%;
  }

  .sec4 .item {
    width: 100%;
    height: 50%;
    gap: 1em;
    padding: 2em 1em;
  }
  /* end of section 4 */

  /* section 5 */
  .sec5 .container {
    flex-direction: column;
    gap: 1.5em;
  }

  .sec5 form {
    padding: 3em 1em;
  }

  .sec5 .container .left {
    width: 100%;
    height: 200px;
  }

  .sec5 .container .right {
    width: 100%;
  }

  .sec5 ul {
    gap: 1em;
  }
  /* end of section 5 */

  /* footer */
  footer ul {
    gap: 1em;
    flex-flow: wrap;
  }
  /* end of footer */
}