@charset "utf-8";
/* 
|----------------------
|   footer
|----------------------
*/
.footer-bg{padding: 50px 0; background-color: #F2F7FA;}

.footer-wrapper{justify-content: space-between;}

.footer-left{width: 400px;}
.footer-left img{max-width: 100%;}
.footer-info{padding-top: 25px;}
.footer-info ul li{padding-top: 15px; font-size: 16px; color: #666;}
.footer-info ul li p i{margin-right: 5px; display: inline-block; vertical-align: middle; color: var(--default); }
.footer-info ul li p span{flex: 1;}

.footer-arr i{position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-top: 1px solid var(--default); border-right: 1px solid var(--default); transform: rotate(45deg) translateY(-50%); transition: .3s;}

.footer-product{flex: 1; padding: 0 100px; }

.footer-product h3{position: relative; padding-bottom: 15px; margin-bottom: 20px;color: var(--default);font-weight: bold; border-bottom: 1px solid #ddd;}
.footer-product h3 i{top: 11px;}
.footer-product ul li{ position: relative; width: 50%; margin-top: 10px; padding-left: 18px;}

.footer-nav ul li { position: relative; margin-bottom: 25px; padding-left: 18px;}

.footer-nav ul li a{font-weight: bold;color: var(--default);}

@media (max-width: 1200px) {
	.footer-left{width: 100%;}
	
	.footer-product{ margin-top: 25px; width: 100%; padding: 0;}
	
	.footer-nav{ margin-top: 25px; width: 100%;}
	.footer-nav ul{display: flex; flex-wrap: wrap;}
	.footer-product ul li,
	.footer-nav ul li { width: auto; margin-bottom: 10px; margin-right: 15px;}
}

@media (max-width: 768px) {
	.footer-left img{max-width: 50%;}
	 .footer-product ul li,
	 .footer-nav ul li { width: 100%; padding-bottom: 10px; margin-bottom: 0; margin-right: 15px; border-bottom: 1px solid #ccc;}
}

/* 
|----------------------
|   copyright
|----------------------
*/
.copyright-bg{padding: 25px; background-color: #F2F7FA;}
.copyright-bg .container{ align-items: center; justify-content: space-between; }
.copyright{ display: flex; color: #666;}
.copyright p{margin-right: 10px;}
.copyright a{color: #999;}
.copyright a:hover{color: #333;}
@media (max-width:768px) {
	.copyright-bg .container{margin: 0 -15px;}
}
@media (max-width:768px) {
    .copyright-bg{padding: 0 15px 25px;}
    .copyright{  flex-direction: column; }
    
    .copyright p{margin-right:0; font-size:12px;}
    .copyright a{font-size:12px;}
}
/* 
|----------------------
|   comma sign
|----------------------
*/
.commaLink { display: flex; align-items: center; font-size: 12px; line-height: 14px; color:#999;}
.commaLink span { padding-right: 5px;}
.commaLink svg { width: 14px;}
.commaLink svg circle {fill: none;}
.commaLink svg path {fill: #999 ;}

.commaLink:hover span{ color:#666;}
.commaLink:hover svg circle{fill: #E40010;}
.commaLink:hover svg path {fill: var(--default) ;}