/* section01 */
#section01{ width: 100%; height: 100vh; position: relative;}
#section01 .text-wrap{ text-align: center;}
#section01 p{ font-size: 30px; padding-bottom: 15px;}
#section01 h3{ display: inline-block; font-size: 60px; 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% - 100px); z-index: 10; left: 0; right: 0; margin: 0 auto;}
/* =================== 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;
  }
}


/* section02 */
#section02{ padding: 100px 0; overflow: hidden; font-size: 0;}
#section02 .tit{ width: 100%; padding-bottom: 55px; position: relative;}
#section02 .tit h3{ position: relative; font-size: 50px; padding-bottom: 15px; letter-spacing: 0.04em; }
#section02 .tit p{ font-size: 18px; padding-bottom: 50px;}
#section02 .tit  p.deco{ position: absolute; right: 0; bottom: 50px; font-size: 24px; letter-spacing: 0.1em;}
#section02 .line{ width: 200%; height: 1px; position: relative; background-color: rgba(34,34,34,.2);}
#section02 .line:after{ content: ''; position: absolute; background-color: #222; width: 68px; height: 1px; left: 0; top: 0; }
#section02 .flex-wrap{ align-items: flex-start;}
#section02 .flex-wrap .left{ padding-right: 270px;}
#section02 .flex-wrap .left li{ padding-bottom: 40px;}
#section02 .flex-wrap .left p.tit{ padding-bottom: 15px; font-size: 13px;}
#section02 .flex-wrap .left p.con{ padding-bottom: 0; font-size: 13px; line-height: 28px; word-break: keep-all;}
#section02 .flex-wrap .right{ padding-left: 120px;}
#section02 .flex-wrap .right p{ font-size: 13px; line-height: 28px; padding-bottom: 40px;}
#section02 .flex-wrap .right h4{ font-size: 15px; padding-bottom: 30px;}
#section02 .flex-wrap .right .a-wrap{ font-size: 0;}
#section02 .flex-wrap .right .a-wrap a{ background-color: #133e6e; color: #fff; transition: .3s; text-align: center; margin-right: 15px;}
#section02 .flex-wrap .right .a-wrap a p{ position: relative; z-index: 10; line-height: 50px; font-size: 14px; padding-bottom: 0;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
  
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section02{ padding: 60px 0; overflow: hidden; font-size: 0;}
  #section02 .tit{ width: 100%; padding-bottom: 40px; position: relative;}
  #section02 .tit h3{ font-size: 30px; padding-bottom: 10px; }
  #section02 .tit p{ font-size: 14px; padding-bottom: 30px;}
  #section02 .tit  p.deco{ position: relative; width: 100%; right: 0; bottom: unset; text-align: right; font-size: 16px; letter-spacing: 0.1em; padding-bottom: 20px;}
  #section02 .line:after{ width: 34px; }
  #section02 .flex-wrap{ flex-direction: column;}
  #section02 .flex-wrap .left{ padding-right: 0; border-bottom: 1px solid rgba(34,34,34,.2);}
  #section02 .flex-wrap .left li{ padding-bottom: 35px;}
  #section02 .flex-wrap .left p.tit{ padding-bottom: 10px; font-size: 12px;}
  #section02 .flex-wrap .left p.con{ font-size: 12px; line-height: 22px; }
  #section02 .flex-wrap .right{ padding-left: 0; padding-top: 35px;}
  #section02 .flex-wrap .right p{ font-size: 12px; line-height: 22px; padding-bottom: 40px;}
  #section02 .flex-wrap .right h4{ font-size: 14px; padding-bottom: 30px;}
  #section02 .flex-wrap .right .a-wrap{ width: 100%; display: flex; justify-content: space-between;}
  #section02 .flex-wrap .right .a-wrap a{ width: calc(50% - 5px); height: 45px; line-height: 43px; font-size: 12px; border: 1px solid #133e6e; background-color: #133e6e; color: #fff; transition: .3s; margin-right: 0;}
  #section02 .flex-wrap .right .a-wrap a:nth-child(1){ margin-right: 10px;}
  #section02 .flex-wrap .right .a-wrap a p{ position: relative; z-index: 10; line-height: 45px; font-size: 12px; padding-bottom: 0;}
  #section02 .flex-wrap .right a:hover{ border: 1px solid #133e6e; color: #fff;}
}



/* section03 */
#section03{ position: relative;}
#section03 > .bg-img{ width: 100%; height: 100vh;}
#section03 .wrap1620{ position: relative;}
#section03 .wrap1620 > .bg-img{ width: 100%; height: 750px; margin-bottom: 20px;}
#section03 .wrap1620 > div:last-child{ margin-bottom: 100px;}
#section03 .wrap1620 .flex-wrap .bg-img{ width: calc(50% - 10px); height: 480px; margin-bottom: 20px;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section03 > .bg-img{ width: 100%; height: 56.27vw;}
  #section03 .wrap1620 > .bg-img{ width: 100%; height: 45.33vw; margin-bottom: 10px;}
  #section03 .wrap1620 > div:last-child{ margin-bottom: 60px;}
  #section03 .wrap1620 .flex-wrap .bg-img{ width: calc(50% - 5px); height: 32.00vw; margin-bottom: 10px;}
  
}


#section04{ position: relative; padding: 100px 0; background-color: #f8f8f8;}
#section04 a{ width: calc(50% - 10px); position: relative;}
#section04 .img-area{ position: relative; width: 100%; height: 400px; overflow: hidden;}
#section04 .img-area .img{ transition: .3s; }
#section04 .img-area p{ position:absolute; width: 100%; text-align: center; bottom: 30px; font-size: 24px; letter-spacing: 0.1em;}
#section04 .text-wrap{ border: 1px solid #d3d3d3; padding: 30px; background-color: #fff;}
#section04 .text-wrap > p{ font-size: 16px;}
#section04 .text-wrap #btn_01{ border: 1px solid #ccc; color: #444;}
#section04 .text-wrap #btn_01 p{ transition: .3s; }
#section04 a:hover .img{ transform: scale(1.1);}
#section04 a:hover .btn-hover:after{ width: 100%;}
#section04 a:hover .btn-hover p{ color: #fff;}
@media (max-width: 1660px) {
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section04{ padding: 60px 0 30px; }
  #section04 .wrap1620{ flex-direction: column;}
  #section04 a{ width: 100%; padding-bottom: 30px; }
  #section04 .img-area{height: 46.13vw; }
  #section04 .img-area p{ bottom: 15px; font-size: 14px;}
  #section04 .text-wrap{ padding: 15px; flex-direction: column;}
  #section04 .text-wrap > p{ font-size: 14px; padding-bottom: 20px;}
  #section04 .text-wrap #btn_01{ border: 1px solid #133e6e; background-color: #133e6e; color: #fff;}
}