/* section01 */
#section01{ width: 100%; height: 100vh; position: relative;}
#section01 h3{ display: inline-block; font-size: 44px; line-height: 64px; z-index: 10; padding-left: 0;}
#section01 .scroll-down{ position: absolute; width: 34px; height: 23px; z-index: 10; bottom: 30px; left: 0; right: 0; margin: 0 auto;}
#section01 .swiper-horizontal>.swiper-pagination-bullets, #section01 .swiper-pagination-bullets.swiper-pagination-horizontal, #section01 .swiper-pagination-custom, .swiper-pagination-fraction{
  bottom: 80px;
}
#section01 .text-wrap{ position: absolute; top: calc(50% - 70px); z-index: 10; left: 0; right: 0; margin: 0 auto; text-align: center;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01{ margin-top: 50px; height: 56.27vw;}
  #section01 .swiper-horizontal>.swiper-pagination-bullets, #section01 .swiper-pagination-bullets.swiper-pagination-horizontal, #section01 .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 15px;
  }
  #section01 .text-wrap{ position: absolute; top: calc(50% - 70px); z-index: 10; left: 0; right: 0; margin: 0 auto; text-align: center;}
}


/* section02 */
#section02{ padding: 100px 0; width: 100%; overflow: hidden; font-size: 0;}
#section02 .wrap1620{ position: relative; text-align: center;}
#section02 .tit{ width: 100%; padding-bottom: 50px; border-bottom: 1px solid rgba(34,34,34,.2); position: relative;}
#section02 .tit h3{ font-size: 44px; padding-bottom: 10px;}
#section02 .tit p{ font-size: 16px; }
#section02 .tit:after{ content: ''; width: 68px; height: 1px; background-color: #222; bottom: -1px; left: 0; right: 0; margin: 0 auto; position: absolute;}
#section02 .content{ padding: 50px 0 100px; font-size: 13px; color: #777; line-height: 28px; word-break: keep-all;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ padding: 60px 0;}
    #section02 .tit{ padding-bottom: 30px; }
    #section02 .tit h3{ font-size: 30px; padding-bottom: 10px;}
    #section02 .tit p{ font-size: 14px; }
    #section02 .tit:after{ width: 34px; }
    #section02 .content{ padding: 30px 0 50px; font-size: 12px; line-height: 22px; }
}



/* section03 */
#section03 a{ text-align: center; padding: 20px; background-color: #f8f8f8;}
#section03 a:nth-child(2){ background-color: #133e6e;}
#section03 a > p{ width: 100%; text-align: right; font-size: 14px; color: #445a49; opacity: .6; padding-bottom: 60px;}
#section03 a:nth-child(2) > p{ color: #fff; opacity: .6;}
#section03 a .img-wrap{ width: 450px; height: 450px; background-color: #133e6e; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,.2); position: relative; left: 0; right: 0; margin: 0 auto 40px;}
#section03 a:nth-child(2) .img-wrap{ background-color: #fff; }
#section03 a .img-wrap .img{ transition: .3s;}
#section03 a .img-wrap i{ font-size: 28px; color: #fff; z-index: 10; opacity: 0; transition: .3s; position: absolute; top: calc(50% - 10px); left: 0; right: 0; margin: 0 auto; transition: .3s;}
#section03 a:nth-child(2) .img-wrap i{ color: #133e6e;}
#section03 a:hover .img-wrap .img{ opacity: .3;}
#section03 a:hover .img-wrap i{ opacity: 1;}
#section03 a h4{ font-size: 16px; padding-bottom: 10px;}
#section03 a h3{ font-size: 34px; padding-bottom: 30px;}
#section03 a h5{ font-size: 14px; padding-bottom: 40px;}
#section03 a:nth-child(2) h4, #section03 a:nth-child(2) h3, #section03 a:nth-child(2) h5{ color: #fff;}
#section03 a div#btn_01{ margin-bottom: 70px;}
#section03 a div#btn_01 p{ position: relative; z-index: 10;}
#section03 a:nth-child(2n - 1) div#btn_01{ border: 1px solid #ccc; color: #222; transition: .3s;}
#section03 a:nth-child(2n - 1):hover .btn-hover:after{ width: 100%;}
#section03 a:nth-child(2n - 1):hover div#btn_01{ border: 1px solid #133e6e; color: #fff;}
#section03 a:nth-child(2) div#btn_01{ border: 1px solid #fff; color: #fff; transition: .3s;}
#section03 a:nth-child(2):hover .btn-hover-3:after{ width: 100%;}
#section03 a:nth-child(2):hover div#btn_01{ color: #133e6e;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
  #section03 a .img-wrap{ width: 27.11vw; height: 27.11vw; background-color: #133e6e; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 1.20vw rgba(0,0,0,.2); position: relative; left: 0; right: 0; margin: 0 auto 2.41vw;}
}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section03 a{ padding: 60px 0;}
  #section03 a .img-wrap{ width: 66.67vw; height: 66.67vw; min-width: 250px; min-height: 250px; margin: 0 auto 30px;}
  #section03 a .img-wrap i{ font-size: 28px; color: #fff; z-index: 10; opacity: 0; transition: .3s; position: absolute; top: calc(50% - 10px); left: 0; right: 0; margin: 0 auto; transition: .3s;}
  #section03 a:hover .img-wrap .img{ opacity: .3;}
  #section03 a h4{ font-size: 12px; padding-bottom: 8px;}
  #section03 a h3{ font-size: 26px; padding-bottom: 25px;}
  #section03 a h5{ font-size: 12px; padding-bottom: 20px;}
  #section03 a div#btn_01{ width: 167px; margin-bottom:0;}
  #section03 a div#btn_01 p{ position: relative; z-index: 10;}
  #section03 a:nth-child(2n - 1) .btn-hover:after{ width: 100%;}
  #section03 a:nth-child(2n - 1) div#btn_01{ border: 1px solid #133e6e; color: #fff;}
  #section03 a:nth-child(2) .btn-hover-3:after{ width: 100%;}
  #section03 a:nth-child(2) div#btn_01{ color: #133e6e;}
}