/* section01 */
#section01{ width: 100%; height: 100vh; position: relative;}
#section01 h3{ display: inline-block; font-size: 60px; line-height: 64px; z-index: 10; padding-left: 50px;}
#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 0; overflow: hidden; font-size: 0;}
#section02 .wrap1620{ position: relative;}
#section02 .tit{ width: 100%; padding-bottom: 55px;}
#section02 .tit h3{ position: relative; font-size: 70px; padding-bottom: 40px; letter-spacing: 0.04em; }
#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 .left{ width: 596px;}
#section02 .left p{ font-size: 13px; line-height: 28px; padding-bottom: 25px;}
#section02 .left p.deco{ font-size: 12px; line-height: 24px; padding-bottom: 50px; opacity: .5;}
#section02 .left a{border: 1px solid #ccc; color: #444; transition: .3s;}
#section02 .left a:hover{ border: 1px solid #133e6e; color: #fff;}
#section02 .right{ width: calc(100% - 596px); height: 1080px; position: relative; margin-top: 60px; margin-bottom: 100px;}
#section02 .right .bg-img{ box-shadow: 2px 0 8px rgba(0,0,0,.2); position: absolute;}
#section02 .right .img01{ width: 560px; height: 550px; top: 0; left: 0;}
#section02 .right .img02{ width: 500px; height: 625px; top: 397px; left: -290px;}
#section02 .right .img03{ width: 900px; height: 600px; top: 157px; left: 276px; z-index: -1;}
#section02 .right .text-wrap{ position: absolute; left: 276px; bottom: 0;}
#section02 .right .text-wrap p{ font-size: 16px; padding-bottom: 15px; letter-spacing: 0.04em;}
#section02 .right .text-wrap h3{ font-size: 50px; line-height: 54px; padding-bottom: 40px;}
#section02 .right .text-wrap p.deco{ font-size: 12px; line-height: 28px; letter-spacing: normal;}
#section02 .line02{ position: absolute; right: 0; bottom: 0;}
#section02 .line02:after{ left: unset; right: 0; top: 0; z-index: 1;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
  #section02{ padding: 6.02vw 0 0;}
  #section02 .left{ width: 35.90vw;}
  #section02 .right{ width: calc(100% - 35.90vw); height: 65.06vw; margin-top: 3.61vw; margin-bottom: 6.02vw;}
  #section02 .right .img01{ width: 33.73vw; height: 33.13vw; }
  #section02 .right .img02{ width: 30.12vw; height: 37.65vw; top: 23.92vw; left: -17.47vw;}
  #section02 .right .img03{ width: 54.22vw; height: 36.14vw; top: 9.46vw; left: 16.63vw;}
  #section02 .right .text-wrap{ left: 16.63vw; bottom: 0;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section02{ padding: 60px 0; overflow: hidden; font-size: 0;}
  #section02 .tit{ padding-bottom: 35px;}
  #section02 .tit h3{ font-size: 50px; padding-bottom: 25px; }
  #section02 .line:after{ width: 34px; }
  #section02 .flex-wrap{ flex-direction: column}
  #section02 .left{ width: 100%;}
  #section02 .left p{ font-size: 13px; line-height: 24px; padding-bottom: 20px; word-break: keep-all;}
  #section02 .left p.deco{ font-size: 12px; line-height: 20px; padding-bottom: 35px; opacity: .5;}
  #section02 .left a{border: 1px solid #133e6e; background-color: #133e6e; color: #fff; transition: .3s;}
  #section02 .right{ width: 100%; height: calc(177.07vw + 136px); margin-top: 10.67vw; margin-bottom: 0;}
  #section02 .right .img01{ width: 63.47vw; height: 62.40vw; top: 0; left: unset; right: -4.00vw;}
  #section02 .right .img02{ width: 56.80vw; height: 70.93vw; top: 45.60vw; left: 0;}
  #section02 .right .img03{ width: calc(100% + 8.00vw); height: 70.93vw; top: 96.80vw; left: -4.00vw; z-index: -1;}
  #section02 .right .text-wrap{ left: 0; }
  #section02 .right .text-wrap h3{ font-size: 35px; line-height: 37px; padding-bottom: 20px;}
  #section02 .right .text-wrap p.deco{ font-size: 11px; line-height: 19px; letter-spacing: normal;}
  #section02 .line02{ position: absolute; right: 15px; bottom: -60px;}

}



/* section03 */
#section03{ padding: 100px 0; position: relative;}
#section03 .decobox{ height: 480px; width: 100%; position: absolute; bottom: 0; left: 0; background-color: #f8f8f8; background-image: url(../img/landscape/03-bg.png); background-size: 611px 427px; background-position: right bottom; background-repeat: no-repeat;}
#section03 .flex-wrap{ align-items: flex-start;}
#section03 #map{ width: 1080px; height: 500px; box-shadow: 2px 0 8px rgba(0,0,0,.2); background-color: #444;}
#section03 .text-wrap{ width: calc(100% - 1080px); padding-left: 60px;}
#section03 .text-wrap h3{ font-size: 34px; line-height: 44px; padding-bottom: 80px;}
#section03 .text-wrap p{ font-size: 14px; line-height: 32px;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
  #section03{ padding: 6.02vw 0; }
  #section03 .decobox{ height: 28.92vw; background-size: 36.81vw 25.72vw; }
  #section03 #map{ width: 65.06vw; height: 30.12vw; }
  #section03 .text-wrap{ width: calc(100% - 65.06vw); padding-left: 3.61vw;}
  #section03 .text-wrap h3{ font-size: 2.05vw; line-height: 2.65vw; padding-bottom: 4.82vw;}
  #section03 .text-wrap p{ font-size: 0.84vw; line-height: 1.93vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section03{ padding: 60px 0; position: relative;}
  #section03 .decobox{ height: 105.07vw; background-size: 281px 188px; }
  #section03 .flex-wrap{ flex-direction: column;}
  #section03 #map{ width: 100%; height: 105.07vw; margin-bottom: 40px; }
  #section03 .text-wrap{ width: 100%; padding-left: 0;}
  #section03 h3{ font-size: 27px; line-height: 32px; padding-bottom: 25px;}
  #section03 .text-wrap p{ font-size: 14px; line-height: 24px;}
  
}











