#contact{ position: relative; width: 100%; height: 100%; margin: 0 auto;}


#contact>.content{position: absolute;z-index: 50; left: 10%;top: 50%; transform: translateY(-50%); box-sizing: border-box;padding: 50px 80px; text-align: left; background: rgba(255,255,255,.9);box-shadow: 4px 3px 20px rgba(0,0,0,.1);}
#contact>.content>.title{ position: relative; padding-bottom: 20px; font-size: 3.2rem;font-weight: bold; color: #333;}
#contact>.content>.title:after{position: absolute;z-index: 1;  left: 0;bottom: 0;width: 50px;height: 2px;background: #42a73f; content: '';}
#contact>.content>.box{ padding: 30px 0;}
#contact>.content>.box>.row{ margin-bottom:10px;font-size: 1.6rem; color: #333;}
#contact>.content>.box>.row>a{ position: relative; display: inline-block;color: #333; transition: all .35s;}
#contact>.content>.box>.row>a:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 0;height: 1px; background: #666;content: '';opacity: 0; transition: all .35s;}
#contact>.content>.box>.row>a:hover:after{ width: 100%;opacity: 1;}
#contact>.content>.box>.hotline{text-align: left; margin-top: 50px;}
#contact>.content>.box>.hotline>h3{font-size: 1.6rem; font-weight: normal;}
#contact>.content>.box>.hotline>p{font-size: 4.6rem;color: #42a73f; font-weight: bold;}

#division{margin: 0 auto;}
#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;}


#myMap{ width: 100%; height: 100%;resize:both;}
#myMap .content-window-card { position: relative; box-shadow: none; bottom: 0; left: 0;  width: auto; padding: 0;}
#myMap .content-window-card p {  height: 2rem;}
#myMap .custom-info { border: solid 1px silver; background: #fff;}
#myMap div.info-top {position: relative; background: #fff;}
#myMap div.info-top div {  display: inline-block; color: #333333; font-size: 16px; font-weight: bold; line-height: 31px;  padding: 0 10px;}
#myMap div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s;}
#myMap div.info-top img:hover { box-shadow: 0 0 5px #000;}
#myMap div.info-middle { display: flex; justify-content: space-between;align-items: center; margin: 0 auto;padding: 20px; }
#myMap div.info-middle>.img{ display:inline-block; width: 200px; text-align: left;}
#myMap div.info-middle>.img>img{width: 100%;height: auto;}
#myMap div.info-middle>.box{display: inline-block; flex-grow: 1; padding-left: 30px; text-align: left; }
#myMap div.info-middle>.box>.title{font-size: 1.8rem;font-weight: bold;}
#myMap div.info-middle>.box>.con{ padding: 10px 0;}
#myMap div.info-middle>.box>.con>p{ display: block;padding: 5px 0;font-size: 1.4rem; color: #666;}
#myMap div.info-middle>.box>.con a{display: inline-block; color: #42a73f; text-decoration: underline;}
#myMap div.info-bottom { height: 0; width: 100%; clear: both; text-align: center;}
#myMap div.info-bottom img { position: relative; z-index: 104;}
#myMap span { margin-left: 5px; font-size: 11px;}



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


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

}


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



    #contact{height: auto;}
    #contact>.content{position: relative; left: 0;top: 0; transform: translateY(0); padding-top: 150px;}
    #myMap{display: none;}

    #division>.display .row>.img{ float: none; width: 100%;}
    #division>.display .row>.content{ float: none; width:100%;padding:50px;}


}


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


    #contact>.content>.title{ font-size: 2.4rem;}
    #contact>.content>.box>.row{ font-size: 1.4rem; }
    #contact>.content>.box>.hotline>h3{font-size: 1.4rem;}
    #contact>.content>.box>.hotline>p{font-size: 3.6rem;}

    #division>.display .row>.content>.title{font-size: 2.4rem; }
    #division>.display .row>.content>.text{ font-size: 1.4rem; line-height: 2.4rem;}
}

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

    #contact>.content{padding: 100px 50px 50px 50px;}
    #contact>.content>.title{ font-size: 2rem;}
    #contact>.content>.box>.hotline>p{font-size: 3rem;}

    #division>.display .row>.content>.title{font-size: 2rem; }


}