@charset "utf-8";

/*============ Invitation ============*/
/*.main{padding-bottom: 3.3rem;}*/
.Invitation{
	width: 100%;
	overflow: hidden;
}
/*=== Invit-banner ===*/
.Invit-banner{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.Invit-banner img{width: 100%;}
.Invit-banner .active-btn{width: 6.3rem;height: 2.2rem;line-height: 2.3rem;background: url(../images/invit3/hd-btn.png) no-repeat;background-size: 100% 100%; font-size:1rem;color: #fff;text-align: center;
position: absolute;top:1rem;right: -0.5rem;border-radius: 15px 0 0 15px;}
.Invit-banner .ck-btn{width: 12rem;height: 2rem;position: absolute;bottom:2.5rem;right: 6rem;}
.Invit-banner .p-text{font-size: 0.8rem;color:#fff;text-align: center;position: absolute;bottom:0.8rem;right:7rem;}


.send{width: 100%;height:7rem;position: absolute;bottom:6.5rem;right: 0;overflow:hidden;}
.express{width: 92%;height: 7rem;overflow: hidden;margin: auto;border-radius: 2rem;}
.express li{color: #fff;font-size: 0.8rem;line-height: 1.4rem;text-align: center;
	/*background-color: rgba(101,172,252,0.5);*/
}

.slie-box{width: 100%; background: url(../images/invit3/bg1.jpg) no-repeat;background-size: 100% 100%;padding-bottom: 4rem;}
.slie-1{padding-top: 2rem;}
.slie-2{padding-top: 1rem;}
.slie .tlt{margin: auto;line-height: 4.5rem;}
.slie .tlt img{width: 100%;}
.slie-1 .tlt{width: 60%;}
.slie-2 .tlt{width: 70%;}
.slie-3{width: 100%; background: url(../images/invit3/bg2.jpg) no-repeat;background-size: 100% 100%;}
.slie-3 .tlt{width: 32%;line-height: 2.5rem;margin-bottom: 1rem;}
.slie .slie-main{width: 74%;margin: auto;}
.slie .slie-main img{width: 100%;}
.slie-2 .ck-btn{width: 8rem;height: 2rem;display: block;margin: auto;margin-top: 1rem;}
.slie-2 .ck-btn img{width: 100%;height: 100%;}
.slie-3 .slie-main{width: 90%;}
.slie-3 .sl3-text{font-size: 0.8rem;color:#fff;text-align: center;line-height: 3rem;}

.main .modal-title{color: #1376e4;text-align: center;font-size: 1.6rem;margin-left: 3rem;}
.main .close{font-size: 3.5rem;font-weight: 100;}
.main .modal-header {background: #f5f5f5;padding: 8px;border-radius: 10px 10px 0 0;}
.main .modal-header .close{margin-top: -10px;}
.main .modal-body{width: 100%; height: 20rem;overflow-y: scroll;}
.main .modal-dialog{margin: 20px;margin-top: 10rem;}
/*=== fixed-btns ===*/
.fixed-btns{
	width: 100%;
	height: 3.333333rem;
}
.fixed-wrap{
	position: fixed;
	bottom: 3.35rem;
	/*bottom: 0;*/
	left: 0;
	width: 100%;
	height: 3.333333rem;
	text-align: center;
}
.fixed-wrap a{
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 50%;
    height: 3.333333rem;
    line-height: 3.333333rem;
    text-align: center;
    font-size: 1rem;
    color: #fff;         
}
.fixed-wrap a:nth-of-type(1){
	background: #39afec;
}
.fixed-wrap a:nth-of-type(2){
	background: #47d2eb;
}
.fixed-wrap a:nth-of-type(2) img{
	width: 70%;
	height: 35%;
}
/*分享链接二维码弹窗*/
.modal3{ top:15%;}
.modal3 .modal-content{border-radius:8px;}
.modal3 .modal-header {border-bottom: none;background: #5276e9;height: 116px;border-top-left-radius: 6px;border-top-right-radius: 6px;}
.modal3 .modal-title {text-align: center;color: #fff;line-height: 100px;font-size: 30px;}
.modal3 .close {color: #fff;opacity: 1;font-size: 28px;}
.modal3 .close:focus,
.modal3 .close:hover {color: #9a191d;filter: alpha(opacity=100); opacity: 1;}
.modal3 .textarea{overflow:hidden;white-space:norma;width: 350px;height: 150px;background: #f5f5f5;display: block;border: 1px solid #ddd;padding: 20px;border-radius:6px;}
.modal3 .aside-form-con{display: inline-block;width: 350px;height: 245px;vertical-align: top;}
.modal3 .code-w{display: inline-block;width: 150px;height: 245px;vertical-align: top;margin-left: 50px;}
.modal3 .code-w .qrcode{width: 150px;height: 150px; border: 1px solid #ddd;}
.modal3 .code-w .qrcode img{width: 100%;}
.modal3 .code-w p{font-size: 18px;text-align: center;color: #333;line-height: 46px;}
.modal3 .aside-btn{width: 100%;margin-top: 15px;}
.modal3 .aside-btn a{margin-bottom: 10px;display: block;width: 100%;height: 56px;line-height: 56px;text-align: center;font-size: 24px;color: #fff;background: #5276e9;border-radius: 5px;}
.modal3 .aside-btn a:hover{background: #3d62d1;}
@media (max-width: 1200px){
	.modal-dialog{width: 76%;}
}
@media screen and (max-width: 768px) {
	.modal-dialog {width: auto;}
	.modal3{top:25%;}
	.modal3 .modal-header {border-bottom: none;background: #5276e9;height: 4rem;border-top-left-radius: 6px;border-top-right-radius: 6px;}
	.modal3 .modal-title {text-align: center;color: #fff;line-height: 3rem;font-size: 1.2rem;}
	.modal3 .close {color: #fff;opacity: 1;font-size: 1.6rem;}
	.modal3 .close:focus,
	.modal3 .close:hover {color: #9a191d;filter: alpha(opacity=100); opacity: 1;}
	.modal3 .modal-body{padding: 1rem;}
	.modal3 .textarea{overflow:hidden;white-space:norma;width: 100%;height: 8rem;background: #f5f5f5;display: block;border: 1px solid #ddd;padding: 1rem;border-radius:6px;}
	.modal3 .aside-form-con{display: inline-block;width: 60%;height: 13rem;vertical-align: top;}
	.modal3 .code-w{display: inline-block;width: 32%;height: 13rem;vertical-align: top;margin-left: 1rem;}
	.modal3 .code-w .qrcode{width: 7rem;height: 7rem; border: 1px solid #ddd;}
	.modal3 .code-w .qrcode img{width: 100%;}
	.modal3 .code-w p{font-size: 0.8rem;text-align: center;color: #333;line-height: 2.2rem;}
	.modal3 .aside-btn{width: 80%;margin: auto; margin-top: 1rem;}
	.modal3 .aside-btn a{margin-bottom: 1rem;display: block;width: 100%;height: 3rem;line-height: 3rem;text-align: center;font-size: 1rem;color: #fff;background: #5276e9;border-radius: 5px;}
	.modal3 .aside-btn a:hover{background: #3d62d1;}
}
@media screen and (max-width: 680px) {
	.modal3 .modal-dialog {width: auto;}
}