@charset "utf-8";

#contact{ position: relative; margin: 0 auto;}
#contact>.display{margin: 100px auto;}
#contact>.display .title>h3{ position: relative;display: inline-block; padding-bottom: 20px; font-size: 3.2rem;font-weight: bold; color: #333; text-transform: uppercase;}
#contact>.display .title>h3:after{position: absolute;z-index: 1;  left: 0;bottom: 0;width: 50px;height: 2px;background: #39a162; content: '';}
#contact>.display .info{ display: flex; justify-content: space-between; margin: 0 auto; padding: 50px 0;}
#contact>.display .info>.rows{  display: inline-block; flex: auto; margin-right: 50px; background: #fff; border-radius: 16px;box-sizing: border-box;padding: 30px;  transition: all .35s;}
#contact>.display .info>.rows:last-child{margin-right: 0;}
#contact>.display .info>.rows>i{display: block;font-size: 5rem; color: #39a162;}
#contact>.display .info>.rows>p{ display: block; font-size: 1.6rem; color: #333; margin: 10px auto 5px auto;}
#contact>.display .info>.rows>a, #contact>.display .info>.rows>span{display: block; color: #999; font-size: 1.4rem; transition: all .35s;}
#contact>.display .info>.rows>a:hover{text-decoration: underline; color: #39a162;}
#contact>.display .info>.rows:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.1);}
#contact>.display .info>.rows:hover p{color: #39a162;}
#contact>.display .map{ position: relative; margin: 0 auto; border-radius: 16px;overflow: hidden; transition: all .35s;}
#contact>.display .map>img{width: 100%; height: auto; object-fit: cover;}
#contact>.display .map>.locate{ position: absolute;z-index: 12; top: 34.3%; left: 44.3%; display: inline-block;}
#contact>.display .map>.locate>a{position: relative; display: flex; align-content: center; align-items: center; justify-content: center; background: rgba(57,161,98,.8); box-shadow: 0 2px 6px rgba(0,0,0,.1); padding: 12px 20px; border-radius: 10px; transition: all .35s;}
#contact>.display .map>.locate>a>i{ display: inline-flex;align-items: center; align-content: center; border-radius: 100px; background: #fff; padding: 6px; color: #39a162; font-size: 2.4rem; transition: all .35s; }
#contact>.display .map>.locate>a>span{display: inline-block; font-size: 1.6rem; color: #fff; margin-left: 15px; transition: all .35s;}
#contact>.display .map>.locate>a:hover{background: #333; transform: scale(1.1);}
#contact>.display .map>.locate>a:hover>i{background: #39a162; color: #fff;}
#contact>.display .map:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.1);}

#division{margin: 0 auto; display: none;}
#division>.display{margin: 0 auto;}
#division>.display .row{display: block;margin: 0 auto; background: #fff; transition: all .35s;}
#division>.display .row>.img{ float: left; width: 50%; text-align: left;}
#division>.display .row>.img>img{width: 100%;height: auto;}
#division>.display .row>.content{ float: right; width: 50%; text-align: left; box-sizing: border-box;padding:100px 0 0 100px;}
#division>.display .row>.content>.title{font-size: 3rem; color: #333;}
#division>.display .row>.content>.text{ padding-top: 30px; font-size: 1.6rem; line-height: 2.8rem; color: #666;}
#division>.display .row>.content>.text a{ position: relative; display: inline-block; color: #666;transition: all 0.35s;}
#division>.display .row>.content>.text a:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 0;height: 1px; background: #666;content: '';opacity: 0; transition: all .35s;}
#division>.display .row>.content>.text a:hover:after{ width: 100%;opacity: 1;}
#division>.display .row:hover{background: #fff7f7;}
#division>.display .row:hover>.content>.title{color: #d70d19;}
#division>.display .row:nth-child(even) .img{ float: right;}
#division>.display .row:nth-child(even) .content{ float: left;}



@media only screen and (max-width: 1280px){

    #contact>.display .title>h3{ font-size: 3rem;}

}

@media only screen and (max-width: 1080px){

    #contact>.display .info{display: block; padding-bottom: 0;}
    #contact>.display .info>.rows{ flex: 0; float: right; width: 48%; position: relative;margin-right: 0; margin-bottom: 30px;}
    #contact>.display .info>.rows:nth-child(even){float: left;}
    #contact>.display .info>.rows:first-child{ float: none; clear: both; width: 100%; margin-right: 0;}
    #contact>.display .info>.rows>i{font-size: 4.6rem;}
    #contact>.display .map>.locate>a{ padding: 10px 18px;}

    #contact>.display .map{ height: 400px;}
    #contact>.display .map>img{width: auto; height: 100%;}



}


@media only screen and (max-width: 860px){

    #contact>.display .map{ height: 320px;}


}

@media only screen and (max-width: 640px){

    #contact>.display{margin: 50px auto;}
    #contact>.display .title>h3{font-size: 2.6rem;}
    #contact>.display .info>.rows{ float: none; width: 100%;}
    #contact>.display .info>.rows:nth-child(even){float: none;}
    #contact>.display .info>.rows>i{font-size: 4rem;}
    #contact>.display .map{ height: 280px;}
    #contact>.display .map>.locate>a>i{ font-size: 2rem;}
    #contact>.display .map>.locate>a>span{font-size: 1.4rem;}

}

@media only screen and (max-width: 520px){

    #contact>.display .title>h3{font-size: 2.2rem;}

}