ohplay_official/public/static/css/footerComponent.css

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2017-07-05 15:02:42
 * @version $Id$
 */

* {
	margin: 0;
	padding: 0;
}
a {
    color: #fff;
    text-decoration: none;
}
ul, ol {
	list-style-type: none;
}
.footer-wrap {
	width: 100%;
	height: 375px;
	background-color: #171717;
	// position: absolute;
	// bottom: -375px;
	position: relative;
	left: 0;
	text-align: center;
	font-family: "PingFang SC", "STXihei", "Microsoft YaHei";
}

.footer-main-wrap {
	width: 60%;
	margin: 0 20%;
	font-size: 0;
}

.footer-main-row {
	display: inline-block;
	width: 10%;
	vertical-align: top;
	margin-top: 50px;
	margin-left: 0;
	margin-right: 10%;
}

.footer-main-title {
	color: #999999;
	font-weight: normal;
	font-size: 16px;
	line-height: 30px;
}

.footer-main-item {
	color: #999999;
	opacity: 0.4;
	line-height: 24px;
	font-size: 12px;
	font-weight: 300;
	cursor: pointer;
}
.footer-main-item a {
	color: #999999;
}
.footer-main-item:hover {
	opacity: 1;
}
.footer-contact {
	width: 40%;
	display: inline-block;
	color: #999999;
	margin-top: 50px;
	text-align: right;
}
.footer-contact-phone {
	font-size: 24px;
}
.footer-contact-worktime {
	opacity: 0.5;
	font-size: 12px;
	line-height: 20px;
}
.footer-contact-online {
	margin: 10px 0 10px auto;
	width: 100px;
	border: 1px solid #999999;
	opacity: 0.5;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
}
.footer-contact-online:hover {
	opacity: 1;
}

.footer-sub-wrap {
	width: 60%;
	margin: 50px 20% 0 20%;
	padding-top: 20px;
	border-top: 1px solid #2F2F2F;
}
.footer-sub-copyright {
	display: inline;
	font-size: 12px;
	color: #444444;
	float: left;
}
.footer-sub-nation {
	display: inline;
	float: right;
	color: #999999;
	font-size: 12px;
}

.weixin-qr {
	display: none;
	width: 100%;
	height: calc(100vh + 375px);
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 102;
}
.weixin-qr img {
	width: 4rem;
	height: 4rem;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -2rem 0 0 -2rem;
}

@media (max-width: 1600px) {
	.footer-main-wrap {
		width: 70%;
		margin: 0 15%;
	}
	.footer-sub-wrap {
		width: 70%;
		margin: 50px 15% 0 15%;
	}
}

@media (max-width: 1280px) {
	.footer-main-wrap {
		width: 80%;
		margin: 0 10%;
	}
	.footer-sub-wrap {
		width: 80%;
		margin: 50px 10% 0 10%;
	}
}

@media (max-width: 960px) {
	.footer-main-wrap {
		width: 90%;
		margin: 0 5%;
	}
	.footer-sub-wrap {
		width: 90%;
		margin: 50px 5% 0 5%;
	}
}


@media (max-device-width: 1081px) {
    html {
        font-size: 585%;
    }
    .footer-main-wrap {
    	width: 100%;
    	margin: 0;
    }
    .footer-sub-wrap {
    	width: 100%;
    	margin: 0;
    	padding: 10px 0;
    }
    .footer-main-row {
    	width: 20%;
    	margin: 20px 5%;
    }
    .footer-contact {
    	display: block;
    	width: 90%;
    	text-align: right;
    	padding-right: 10%;
    	margin: 25px 0;
    }
    .footer-sub-nation {
    	display: none;
    }
}

@media (max-device-width: 720px) {
    html {
        font-size: 465%;
    }
}
@media (max-device-width: 660px) {
    html {
        font-size: 445%;
    }
}
@media (max-device-width: 600px) {
    html {
        font-size: 425%;
    }
}
@media (max-device-width: 540px) {
    html {
        font-size: 405%;
    }
}
@media (max-device-width: 480px) {
    html {
        font-size: 385%;
    }
}
@media (max-device-width: 420px) {
    html {
        font-size: 365%;
    }
}
@media (max-device-width: 360px) {
    html {
        font-size: 345%;
    }
}
@media (max-device-width: 240px) {
    html {
        font-size: 305%;
    }
}