header{ background-color: #839e38;}

#section1{ padding: 140px 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
#section1 .tit-wrap{ text-align: center;}
#section1 .tit-wrap h3{ font-size: 50px; line-height: 50px; padding-bottom: 30px;}
#section1 .tit-wrap span{ font-size: 18px; padding-bottom: 30px;}
#section1 .tit-wrap img{ display: block; left: 0; right: 0; margin: 30px auto; }
#section1 .tit-wrap p{ font-size: 12px; line-height: 24px; padding-bottom: 80px;}
#section1  .img-area{ display: flex; height: 497px; width: 100%; justify-content: space-between;}
#section1  .img-area .img-wrap{ position: relative; height: 100%;}
#section1  .img-area .w860{ width: 860px;}
#section1  .img-area .w540{ width: 540px;}


#btm-up1{ position: relative; transition: 1.2s; transition-delay: .3s; top: 100px; opacity: 0;}
#btm-up2{ position: relative; transition: 1.2s;  transition-delay: .8s; top: 100px; opacity: 0; }
#btm-up3{ position: relative; transition: 1.2s; transition-delay: 1.2s; top: 100px; opacity: 0;}

#btm-up1.up{ top: 0; opacity: 1;}
#btm-up2.up{ top: 0; opacity: 1;}
#btm-up3.up{ top: 0; opacity: 1;}

/* =================== 1023px =================== */
@media (max-width: 1023px) {
    #section1{ padding: 40px 0; background-image: url(../img/landscape/m-sec01-bg.jpg)!important;}
    
    #section1 .tit-wrap h3{ font-size: 25px; line-height: 25px; padding-bottom: 14px;}
    #section1 .tit-wrap span{ font-size: 11px; padding-bottom: 10px;}
    #section1 .tit-wrap img{ display: block; left: 0; right: 0; margin: 10px auto; width: 25px; object-fit: cover; }
    #section1 .tit-wrap p{ font-size: 11px; line-height: 19px; padding-bottom: 40px;}
    #section1  .img-area{ flex-wrap:wrap; height:auto; width: 100%;}
    #section1  .img-area .img-wrap{ position: relative; height: 61.33vw;}
    #section1  .img-area .w860{ width: 100%; margin-bottom: 15px;}
    #section1  .img-area .w540{ width: 100%;}

    #btm-up1{ top: 0; opacity: 1;}
    #btm-up2{ top: 0; opacity: 1;}
    #btm-up3{ top: 0; opacity: 1;}
}

#section2{padding: 140px 0;}
#section2 .tit-wrap h3{ font-size: 50px; line-height: 50px; padding-bottom: 30px;}
#section2 .tit-wrap span{ font-size: 18px; padding-bottom: 30px; padding-left: 15px;}
#section2  .map{ width: 100%; height: 580px; background-color: azure; position: relative; margin-bottom: 50px;}
#section2  .map .text{ position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 22px 0; background-color: rgba(0,0,0,.08);}
#section2  .map .text h3{ display: inline-block; width: 400px; border-right: 1px solid #505050; line-height: 42px;}
#section2  .map .text h3:last-child{ padding-left: 70px; border-right: unset;}
#section2  .map .text h3 img{ margin-right: 14px; position: relative; top: 7px;}
#section2  .map .text h3 span{ padding-right: 15px; letter-spacing: 0.035;}
#section2 .text-wrap h3{ font-size: 16px; padding-bottom: 30px;}
#section2 .text-wrap h3 img{ margin-right: 9px; position: relative; top: 4px;}
#section2 .text-wrap p{ font-size: 12px; line-height: 24px;}
#section2 .text-wrap .pb25{ padding-bottom: 25px;}
#section2 .text-wrap .pb80{ padding-bottom: 80px;}

#trigger3{ position: absolute; top: 150px;}

#btm-up4{ position: relative; transition: 1.2s; transition-delay: .3s; top: 100px; opacity: 0;}
#btm-up5{ position: relative; transition: 1.2s;  transition-delay: .8s; top: 100px; opacity: 0; }
#btm-up6{ position: relative; transition: 1.2s; transition-delay: .3s; top: 100px; opacity: 0;}

#btm-up4.up{ top: 0; opacity: 1;}
#btm-up5.up{ top: 0; opacity: 1;}
#btm-up6.up{ top: 0; opacity: 1;}
/* =================== 1023px =================== */
@media (max-width: 1023px) {
    #section2{padding: 40px 0; text-align: center;}
    #section2 .tit-wrap h3{ font-size: 25px; line-height: 25px; padding-bottom: 14px;}
    #section2 .tit-wrap span{ font-size: 11px; padding-bottom: 10px; padding-left: 0;}
    #section2  .map{ height: 77.07vw; margin-bottom: 25px; margin-top: 25px;}
    #section2  .map .text{padding:0; text-align: left;}
    #section2  .map .text h3{ display: inline-block; width: 100%; border-right: unset; line-height: 30px; font-size: 11px;}
    #section2  .map .text h3:last-child{ padding-left: 0; }
    #section2  .map .text h3 img{ width: 15px; object-fit: cover; margin-right: 8px; top: 3px;}
    #section2  .map .text h3 span{ padding-right: 9px; letter-spacing: 0.035;}
    #section2 .text-wrap{ text-align: left;}
    #section2 .text-wrap h3{ font-size: 11px; padding-bottom: 19px;}
    #section2 .text-wrap h3 img{ margin-right: 8px; position: relative; top: 2px; height: 10px; object-fit: cover;}
    #section2 .text-wrap p{ font-size: 11px; line-height: 19px;}
    #section2 .text-wrap .pb25{ padding-bottom: 19px;}
    #section2 .text-wrap .pb80{ padding-bottom: 40px;}

    #btm-up4{ top: 0; opacity: 1;}
    #btm-up5{ top: 0; opacity: 1;}
    #btm-up6{ top: 0; opacity: 1;}
}