/*contactbox*/
.contactbox {position:fixed; width:58px; right:32px; bottom:32px; z-index: 9;}
.contactbox * {margin:0; padding:0; word-break: break-all; word-wrap:break-word;}
/*circle*/
.circle {padding-bottom:100%; position:relative; background-color: #3E3E3E; border-radius:50%; overflow:hidden; cursor: pointer;}
.circle i {position:absolute; left:0; top:0; width:100%; height:100%; display: block; background: no-repeat 0 0; background-size:contain;}
.circle .open {background-image: url(../images/icon_open.png); opacity: 0; transform:scale(0;);}
.circle .close {background-image: url(../images/icon_close.png); opacity: 0; transform: rotate(-45deg);}
.circle .active {opacity: 1;transition:all .5s;z-index: 2;}
.circle .open.active { transform:scale(1); }
.circle .close.active { transform:rotate(0deg); }
/*infobox*/
.infobox {position:absolute; right:0; bottom:100%; margin-bottom: 0; border-radius:8px; width:250px; box-shadow:0px 0px 11px 0px rgba(39,55,66,0.66); overflow:hidden; opacity: 0; height:0; transition:all .5s;}
.infobox.show { opacity: 1; margin-bottom: 23px; height:auto;}
/*follow*/
.follow {font-size: 14px; text-align:center; color:#fff; line-height: 22px; background-color: #101010; padding:11% 5% 6%; position:relative; margin-bottom: -10px;}
.follow:after {content:''; display: block; position:absolute; top:100%; left:50%; border-top:10px solid #101010; border-left:15px solid transparent; border-right:15px solid transparent; margin-left:-15px;}
.follow img {display: block; width:124px; height: 124px; margin:0 auto;border:none;}
.follow p {padding:5px;}
.follow .qr {opacity: 0; transform:translateY(15px); transition:all 1s;}
.follow .show {opacity: 1; transform:translateY(0px);}

.infoText {background-color:#EEF0F1; padding-top: 20px;}
.infoText .top {position: relative; padding:12px 15px 17px;}
.infoText .list { opacity: 0; transform: translateY(15px); transition:all 1s;}
.infoText .show {opacity: 1; transform: translateY(0);}
.infoText ul {display: inline-block; position: relative; left:50%; transform:translateX(-50%); max-width: 100%;}
.infoText li {font-size:16px; line-height: 20px; padding:8px 0;list-style:none;}
.infoText li a {color:#2B2B2B; padding-left:28px; background:no-repeat left 1px; background-size:auto 18px; display: block;text-decoration:none;outline: none;}
.infoText li .tel {background-image: url(../images/icon_phone.png);}
.infoText li .mail {background-image: url(../images/icon_mail.png);}
.infoText li .qq {background-image: url(../images/icon_qq.png);}

.infoText .btm {margin:0 15px; border-top:1px solid #e4e4e4; text-align:center; letter-spacing:1px; font-size:14px; line-height: 20px; padding:20px 0;}
.infoText .btm a {color:#fff; background-color:#101010; border-radius: 5px; display: block; padding:5px 0; width: 6em; margin:0 auto; text-align: center;text-decoration:none;outline: none;}
.infoText .btm a:after {margin-left:7px;}

.infoText .btn {opacity: 0; transform: translateY(15px); transition:all 1s;}
.infoText .show {opacity: 1; transform: translateY(0);}
@media only screen and (max-width:768px){
	.contactbox {width:35px; right:15px; bottom: 15px;}
  	.infobox {width:200px;}
  	.infobox.show {margin-bottom: 10px;}
  	.follow {margin-bottom: -5px; font-size:12px; padding:7% 5% 3%;}
  	.follow::after {border-top-width: 5px; border-left-width:8px; border-right-width: 8px; margin-left:-8px;}
  	.follow p {padding:3px;}
  	.follow img {width:100px; height: 100px;}
  	.infoText .top {padding:5px 15px 10px;}
  	.infoText li {padding:3px 0; font-size:14px;}
  	.infoText li a {padding-left:25px; background-size:auto 14px; background-position: left 3px;}
  	.infoText .btm {padding:10px 0;}
  	.infoText .btm a {padding:3px 0;}
  	.infoText .btn {font-size:12px;}
}