﻿body { background: url(/img/web/contact_theme_bg.jpg) top 100px center no-repeat; background-size: 100%; }

.map { display: flex; height: 480px; width: 100%; padding: 10px; background: #fff; box-sizing: border-box; }
.map .mapCon { width: 100%; height: 100%; }

.contact { padding: 60px; background: #ffffff66; background-size: cover; }
.contact > .info { font-size: 20px; margin-bottom: 60px; }
.contact > .info li { margin-bottom: 20px; text-align: center; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.contact > .info li::before { content: ''; display: inline-flex; height: 24px; width: 24px; background: none center center no-repeat; background-size: cover; margin-right: 6px; }
.contact > .info li.ico_loc::before { background-image: url(/img/web/ico/marker_black.svg); }
.contact > .info li.ico_tel::before { background-image: url(/img/web/ico/telephone_black.svg); }
.contact > .info li.ico_email::before { background-image: url(/img/web/ico/email_black.svg); }
.contact > .info li.org { font-size: 30px; font-weight: bold; }
.contact > .info li.org::before { display: none; }

.contact > .weixin { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 40px; }
.contact > .weixin > div { font-size: 30px; }
.contact > .weixin > div > h2 { font-weight: bold; font-family: 'HarmonySansCondensed'; margin-bottom: 10px; }
.contact > .weixin > div > p { font-size: 16px; }
.contact > .weixin > img { width: 200px; }

/*.qrList { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.qrList li { margin: 0 30px; }
.qrList li > h2 { font-weight: 600; font-family: 'MyriadPro'; margin-bottom: 6px; text-align: center; }
.qrList li > p { font-weight: 600; font-family: 'MyriadPro'; margin-bottom: 10px; text-align: center; }
.qrList li > img { display: inline-flex; width: 200px; }*/

.qrInfos { text-align: center; }
.qrInfos > table { margin: 0 auto; }
.qrInfos > table td { padding: 0 20px; }
.qrInfos > table td h2 { font-weight: 600; font-family: 'MyriadPro'; margin-bottom: 6px; text-align: center; }
.qrInfos > table td p { font-weight: 600; font-family: 'MyriadPro'; margin-bottom: 10px; text-align: center; font-size: 20px; }
.qrInfos > table td img { display: inline-flex; width: 220px; }
