/* 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; padding-left: 180px; max-width: 100%; height: 100%; top: 0; z-index: 10; left: 0; right: 0; margin: 0 auto; display: flex; align-items: flex-start; flex-direction: column; justify-content: center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+45&0.65+0,0+46 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.01) 45%, rgba(0,0,0,0) 46%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 45%,rgba(0,0,0,0) 46%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 45%,rgba(0,0,0,0) 46%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
#section01 .text-wrap p{ font-size: 20px; padding-bottom: 10px; padding-left: 50px;}
#section01 .text-wrap h3{ font-size: 34px; padding-bottom: 30px; }
#section01 .text-wrap p.deco{ font-size: 12px; line-height: 32px; opacity: .7; padding-left: 50px; padding-bottom: 0;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ margin-top: 50px; height: calc(56.27vw + 180px); padding-bottom: 180px;}
    #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{ display: block; height: max-content; top: unset; bottom: 0; opacity: 1!important; background: unset; padding-left: 15px;}
    #section01 .text-wrap p{ color: #444; font-size: 14px; padding-bottom: 15px; padding-left: 0; text-shadow: unset;}
    #section01 .text-wrap h3{ color: #222; font-size: 22px; padding-left: 0; text-shadow: unset; padding-bottom: 20px; }
    #section01 .text-wrap p.deco{ color: #777; font-size: 12px; line-height: 22px; opacity: .5; padding-left: 0; padding-bottom: 0;  text-shadow: unset;}
}


/* section02 */
#section02{ padding: 100px 0; overflow: hidden; font-size: 0;}
#section02 .flex-wrap{ align-items: flex-start;}
#section02 .left{ width: 750px; height: 500px;}
#section02 .right{ padding-top: 40px; padding-left: 80px; width: calc(100% - 750px);}
#section02 .right h3{ font-size: 20px; padding-bottom: 35px;}
#section02 .right p{ font-size: 13px; line-height: 28px; padding-bottom: 30px;}
#section02 .right p.deco{ font-size: 12px; line-height: 24px; padding-bottom: 60px;}
#section02 .right a{border: 1px solid #ccc; color: #444; transition: .3s;}
#section02 .right a:hover{ border: 1px solid #133e6e; color: #fff;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
    #section02 .left{ width: 45.18vw; height: 30.12vw;}
    #section02 .right{ padding-top: 2.41vw; padding-left: 4.82vw; width: calc(100% - 45.18vw);}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ padding: 60px 0; overflow: hidden; font-size: 0;}
    #section02 .flex-wrap{ flex-direction: column;}
    #section02 .left{ width: 100%; height: 61.33vw;}
    #section02 .right{ padding-top: 40px; padding-left: 0; width: 100%;}
    #section02 .right h3{ font-size: 18px; padding-bottom: 30px;}
    #section02 .right p{ font-size: 13px; line-height: 24px; padding-bottom: 25px;}
    #section02 .right p.deco{ font-size: 12px; line-height: 20px; padding-bottom: 35px;}
    #section02 .right a{border: 1px solid #133e6e; background-color: #133e6e; color: #fff; transition: .3s;}
}



/* section03 */
#section03{ padding: 100px 0; position: relative; background-color: #133e6e; text-align: center;}
#section03 .tit{ padding-bottom: 55px;}
#section03 .tit h3{ font-size: 34px; padding-bottom: 15px;}
#section03 .tit p{ font-size: 14px; opacity: .7;}
#section03 .img-area{ width: 100%; padding-bottom: 100px;}
#section03 .img-wrap{ height: 330px; background-color: #222; position: relative;}
#section03 .img-wrap .img{ opacity: 1; transition: .3s;}
#section03 .img-wrap:hover .img{ opacity: .3;}
#section03 .img-wrap .hover{ position: absolute; width: 100%; height: 100%; border: 0 solid rgba(255,255,255,.2); transition: .3s; display: flex; align-items: center; text-align: center; font-size: 28px; justify-content: center;}
#section03 .img-wrap .hover i{ opacity: 0; transition: .3s;}
#section03 .img-wrap:hover .hover{ border: 15px solid rgba(255,255,255,.2);}
#section03 .img-wrap:hover .hover i{ opacity: 1; }
#section03 .text-wrap h3{ font-size: 34px; padding-bottom: 55px; }
#section03 .text-wrap p{ font-size: 14px; line-height: 30px; padding-bottom: 60px; }
#section03 .text-wrap p span{ font-size: 16px;}
#section03 #map{ width: 1080px; height: 500px; background-color: #222; left: 0; right: 0; margin: 0 auto;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
    #section03{ padding: 6.02vw 0; }
    #section03 .img-wrap{ height: 19.88vw; background-color: #222; position: relative;}
}
/* =================== 1120px =================== */
@media (max-width: 1120px) {
    #section03 #map{ width: 96.43vw; height: 44.64vw; }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section03{ padding: 60px 0; position: relative;}
    #section03 .tit{ padding-bottom: 35px;}
    #section03 .tit h3{ font-size: 25px; padding-bottom: 15px;}
    #section03 .tit p{ font-size: 12px; line-height: 22px; opacity: .7;}
    #section03 .img-area{ padding-bottom: 60px;}
    #section03 .img-wrap{ height: 37.33vw; }
    #section03 .text-wrap h3{ font-size: 25px; padding-bottom: 35px; }
    #section03 .text-wrap p{ font-size: 14px; line-height: 25px; padding-bottom: 35px; }
    #section03 .text-wrap p span{ font-size: 16px;}
    #section03 #map{ width: 100%; height: 101.33vw; }
}