/* section1 */
#section1 .text-wrap{ position: absolute; width: 235px; height: 80px; top: 45%; left: 0; right: 0; margin: 0 auto; z-index: 10; text-align: center; text-shadow: 2px 0 2px rgba(51,51,51,0.6);}
#section1 .text-wrap h3{ font-size: 50px; line-height: 50px;  }


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section1{ margin-top: 75px;}

    #section1 .text-wrap{ position: absolute; width: 175px; height: 30px; top: 37%; left: 0; right: 0; margin: 0 auto; z-index: 10; text-align: center; text-shadow: 2px 0 2px rgba(51,51,51,0.6);}
    #section1 .text-wrap h3{ font-size: 25px; line-height: 25px;}
}



/* section2 */
#section2{ padding: 80px 0; background-image: url(../img/about/section2-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
#section2 .deco{ position: absolute; font-size: 16px; transform: rotate(90deg); width: 100px; top: 130px; left: 60px;}

#section2 .wrap1200{ text-align: center;}
#section2 .wrap1200 h3.ha{ font-size: 50px; padding-bottom: 30px;}
#section2 .wrap1200 h4.c6{ font-size: 20px; padding-bottom: 35px;}
#section2 .wrap1200 p.cs{ font-size: 16px; line-height: 22px; padding-bottom: 50px; opacity: .6;}

#section2 .wrap1200 ul{overflow: hidden; display: inline-block;}
#section2 .wrap1200 ul li{ padding: 0 15px;}
#section2 .wrap1200 ul li a{ display: table; width: 200px; height: 200px; border: 5px solid #263a4f; border-radius: 20px; background-color: rgba(147,177,31,0); transition: .3s;}
#section2 .wrap1200 ul li a .inner{ display: table-cell; height: 200px; vertical-align: middle;}

#section2 .wrap1200 ul li a .inner i.fas{ font-size: 60px; padding-bottom: 15px; color: #263a4f; transition: .3s;}
#section2 .wrap1200 ul li a .inner p{ font-size: 16px; color: #263a4f; padding-bottom: 0 ; transition: .3s;}
#section2 .wrap1200 ul li a .inner i.far{ font-size: 30px; line-height: 0; color: #fff; opacity: 0; transition: .3s;}


#section2 .wrap1200 ul li a:hover{border: 5px solid rgba(147,177,31,1); border-radius: 20px; background-color: rgba(147,177,31,1); transition: .3s;}
#section2 .wrap1200 ul li a:hover .inner i.fas{ color: #fff; font-size: 40px;}
#section2 .wrap1200 ul li a:hover .inner p{ color: #fff; padding-bottom: 30px;}

#section2 .wrap1200 ul li a:hover .inner i.far{ font-size: 30px; line-height: 0; color: #fff; opacity: 1;}


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section2{ padding: 35px 0 40px; background-image: unset; }
    #section2 .deco{ position: absolute; font-size: 10px; width: 100px; top: 90px; left: -30px;}

    #section2 .wrap1200{ padding: 0 7.5px;}
    #section2 .wrap1200 h3.ha{ font-size: 40px; line-height: 40px; padding-bottom: 15px;}
    #section2 .wrap1200 h4.c6{ font-size: 16px; line-height: 16px; padding-bottom: 25px;}
    #section2 .wrap1200 p.cs{ font-size: 16px; line-height: 22px; padding-bottom: 25px;}

    #section2 .wrap1200 ul li{ padding: 0 7.5px;}
    #section2 .wrap1200 ul li a{ display: table; width: 105px; height: 105px; border: 3px solid #263a4f; border-radius: 20px; background-color: rgba(147,177,31,0); transition: .3s;}
    #section2 .wrap1200 ul li a .inner{ display: table-cell; height: 105px; vertical-align: middle;}
    
    #section2 .wrap1200 ul li a .inner i.fas{ font-size: 35px; padding-bottom: 10px; }
    #section2 .wrap1200 ul li a .inner p{ font-size: 10px; color: #263a4f; }
    #section2 .wrap1200 ul li a .inner i.far{ font-size: 15px;}

    #section2 .wrap1200 ul li a:hover{border: 3px solid rgba(147,177,31,1); }

    #section2 .wrap1200 ul li a:hover .inner i.fas{ color: #fff; font-size: 18px;}
    #section2 .wrap1200 ul li a:hover .inner p{ color: #fff; padding-bottom: 10px;}

    #section2 .wrap1200 ul li a:hover .inner i.far{ font-size: 15px; line-height: 0; color: #fff; opacity: 1;}

}


/* section3 */
#section3{ width: 100%; height: 500px; background-color: cornsilk;}
#section3 .map{ width: 100%; height: 100%;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section3{ height: 58.67vw;}
}


/* section4 */
#section4{ padding: 80px 0; text-align: left;}
#section4::after{ position: absolute; content: ''; width: calc(100% - 60px); left: 0; right: 0; margin: 0 auto; bottom: 0; height: 1px; background-color: #263a4f; opacity: .4;}

#section4 .wrap1200 h3{ font-size: 50px; padding-bottom: 30px;}
#section4 .wrap1200 h4{ font-size: 20px; padding-bottom: 30px;}
#section4 .wrap1200 p{ display: inline-block; font-size: 16px; opacity: .8;}
#section4 .wrap1200 i{ font-size: 16px; display: inline-block; padding-right: 10px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section4{ padding: 40px 0; text-align: center;}
    #section4::after{ position: absolute; content: ''; width: 100%; left: 0; right: 0; margin: 0 auto; bottom: 0; height: 1px; background-color: #263a4f; opacity: .4;}

    #section4 .wrap1200 h3{ font-size: 40px; padding-bottom: 15px;}
#section4 .wrap1200 h4{ font-size: 16px; padding-bottom: 25px;}
#section4 .wrap1200 p{ display: inline-block; font-size: 16px; opacity: .8;}
#section4 .wrap1200 i{ font-size: 16px; display: inline-block; padding-right: 5px;}
}