@charset "utf-8";
/* 
|----------------------
|   footer
|----------------------
*/
.footer{ padding-top: 50px; padding-bottom: 30px; width: 100%;}


.backTop{ position: absolute; top: 0; right: 15px; width: 40px; height: 40px; border-radius: 999px; background-color: rgba(255,255,255,.8); color:var(--lab-green); align-items: center; justify-content: center; cursor: pointer;}
.backTop i{display: inline-block; transform: rotate(90deg);}

.footer-logo{text-align: center;}
.footer-callme{ margin-top: 30px; text-align: center;}
.footer-callme p{font-size: 24px; color: #fff;}

/*  */
.footer-media{margin-top: 40px;}
.footer-media ul{align-items: center; justify-content: center;}
.footer-media ul li {padding: 0 7px;}
.footer-media ul li a{position: relative; display: block;}
.footer-media ul li a i{ display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #fff; font-size: 24px; color: #fff;}
.footer-media ul li a:hover{color: var(--lab-green);}

.footer-media-qrcode{position: absolute; bottom: 60px; left: 50%; margin-left: -100px; width: 200px; padding: 10px; transform: translateY(10px); background-color: #fff; filter: drop-shadow( 0 0 10px rgba(0,0,0,.1)); opacity: 0; visibility: hidden; transition: .3s;}
.footer-media-qrcode::before{position: absolute; bottom: -10px; left: 50%; content: ''; margin-left: -5px; border-top: 10px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent;}
.footer-media-qrcode img{width: 100%;}

.footer-media-wx:hover .footer-media-qrcode{ transform: translateY(0); opacity: 1; visibility: visible;}

/*  */
.footer-bottom{margin-top: 50px; align-items: center;}

.copyright,
.footer-patch,
.comma{width: 33.33%; text-align: center;}
/*  */
.copyright{padding-right: 40px;}
.copyright p{ text-align: left; font-size: 14px; color: rgba(255,255,255,.7);}
.copyright p a{ color: rgba(255,255,255,.7);}
.copyright p a:hover{ color: rgba(255,255,255,1);}
/*  */
.footer-patch ul{justify-content: center;}
.footer-patch ul li{padding: 0 10px;}
.footer-patch ul li a{ font-size: 14px; color: rgba(255,255,255,.7);}
.footer-patch ul li a:hover{ color: rgba(255,255,255,1);}
/*  */
.comma p{font-size: 14px; color: rgba(255,255,255,.7);}
.comma p a{ color: rgba(255,255,255,.7);}
.comma p a:hover{ color: rgba(255,255,255,1);}

@media (max-width:1200px) {
	.footer-bottom{margin-top: 60px; align-items: center;}
	
	.copyright,
	.footer-patch,
	.comma{width: 100%; text-align: center;}
	
	.copyright{padding-right: 0;}
	.copyright p{ text-align: center;}

	.footer-patch{margin: 15px 0;}
}


@media (max-width:768px) {
	.footer{padding-top: 50px; padding-bottom: 50px;}

	.footer-callme{ margin-top: 15px;}
	.footer-callme p{font-size: 24px;}

	.footer-media ul li a i{ width: 40px; height: 40px; font-size: 18px;}
}

@media (max-width:640px) {}


/* 
|----------------------
|   comma sign
|----------------------
*/
/* .commaLink { display: flex; align-items: center; font-size: 12px; line-height: 14px; color:#C1C1C1;}
.commaLink span { padding-right: 5px;}
.commaLink svg { width: 14px;}
.commaLink svg circle {fill: none;}
.commaLink svg path {fill: #C1C1C1 ;}

.commaLink:hover span{ color:#fff;}
.commaLink:hover svg circle{fill: #E40010;}
.commaLink:hover svg path {fill: #fff ;} */