@charset "utf-8";
/*2016.11.03*/
* { margin:0; padding:0; box-sizing:border-box; }
::-webkit-input-placeholder { color:#000; }
a{ text-decoration: none;}
html, body { min-height:100%;  overflow-x: hidden;}
body { font-size:0; line-height: 0; font-family:'Helvetica Neue',HelveticaNeue,Helvetica;}
.viewport {}

img { position:relative; width:100%;}

footer { padding:20px 12.5%; background-color: #FF5B6E; line-height: 0; font-size: 0; }
footer img { width:100%;}

.top-module{ position: relative;}
    .top-module section{ position: absolute; width: calc(55000%/750); top: calc(54400%/750);left: 50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); text-align: center;}
    .top-module section h3{ font-size: 4vw; line-height: 1.5; color: #4c4647; margin-bottom: 5px;}
    .top-module section p{ font-size: 3.4vw; line-height: 1.5; color: #4c4647; margin-top: 5px;}
    .top-module section h3 span{ margin-left: 3px; margin-right: 3px;}
    .input-col{ position: relative; height: calc(7000vw/750); width: calc(49000vw/750); margin:0 auto; }
    .input-col input{ position: absolute; height: calc(7000vw/750);  left: 0; top: 0; width: 100%; padding-left: 3vw; line-height:calc(7000vw/750); font-size: 4vw; border: 1px solid #ff6173; border-radius: 0; }
    .input-col button{ position: absolute; height:calc(7000vw/750); right: 0; top: 0; color: #fff; line-height:calc(6900vw/750); font-size: 4vw; padding: 0 2vw; background: #ff6173;border: 1px solid #ff6173; }
    
    input[placeholder]{ color:#000;}
    ::-webkit-input-placeholder { color:#b5b5b5;}
    :-moz-placeholder{ color:#b5b5b5;}
    ::-moz-placeholder { color:#b5b5b5;}
    :-ms-input-placeholder { color:#b5b5b5;}
    input, input:focus,  button, button:focus{outline:none; }
    
    .top-module section:before{ position: absolute; content: ""; height:4px; width:4px; border-left: 1px solid #4c4749; border-bottom: 1px solid #4c4749;  top:-15px; left: 50%; -webkit-transform:rotate(-45deg) translate(-50%,0); transform:rotate(-45deg) translate(-50%,0); margin-left:-1px ; }
    
    .top-module section:after{position: absolute; content: ""; height:13px; width:13px; border: 1px solid #4c4749; border-radius: 50%; top:-17px; left: 50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }


.app-top-module section{ top:0}
    .app-top-module .input-col{ width: calc(38700%/550); height: auto; }
    .app-top-module .input-col .button{ display: block; text-align: center; background: #ff6173; color: #fff; font-size: 7vw; line-height: normal; padding: 5px 0; margin-bottom:10px; letter-spacing: 5px;}
    .app-top-module section p a{ display: inline-block; position: relative; color: #4c4749;font-size: 3.8vw; padding: 0 2px;}
    .app-top-module section p a:after{ position:absolute; content: ""; height: 1px; width: 100%; background: #4c4749; bottom: -2px; left: 0;}


.avatar-billboard-list{ position: relative; background:#FFEEF5 url(../images/app_img_2.png) no-repeat 0 0; background-size: 100% auto;}
    .avatar-billboard-list h3{  text-align: center; color: #fff; font-size: 4vw; line-height: normal; font-weight: normal;}
    .avatar-billboard-list ul, .avatar-billboard-list li{ list-style: none; font-size: 3.2vw; color: #333333;}
    .avatar-billboard-list ul {  padding:0; margin: 0; max-height:135px !important; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
    .avatar-billboard-list li{ position: relative; height: 40px; margin:0 auto 5px; width: calc(65000%/750);line-height: 1;}
    .avatar-billboard-list li span.avartar{ height:35px; width:35px; position: relative;}
    .avatar-billboard-list li span.avartar img{ position: absolute; top:0; left: 0; width:35px; height:35px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; background-color: #9895C0;}
    .avatar-billboard-list li span.id{ position: absolute; left: 40px; height: 40px; top:10px; }
    .avatar-billboard-list li span.text{position: absolute; height: 40px; top:10px; min-width:calc(64% - 40px); right: 0;}

.billboard-list{ position: relative; background:#FFEEF5; padding-bottom: 15px;}
    .billboard-list img{ position: relative; width: 99%; margin: 0 auto;}
    .billboard-list h3{  text-align: center; color: #000; margin-bottom:15px ; font-size: 4vw; line-height: normal; font-weight: normal;}
    .billboard-list ol, .billboard-list li{ font-size: 3.2vw; color: #333333;}
    .billboard-list ol {  padding:0; margin: 0; max-height:245px !important; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
    .billboard-list li{ position: relative; margin:0 auto; padding: 5px 0; width: calc(60000%/750);line-height: 1; margin-bottom: 3px;}
    .billboard-list li span.id{ }
    .billboard-list li span.text{ position: absolute; right: 0; min-width:58%; }
    .billboard-list li:after{position: absolute; content: ""; clear: both; float: none;}
    



.link-rules{ position: absolute; right: calc(4200%/1080); top:3%; color: #333; background: rgba(255,255,255,.8); border-radius: 25px; padding: 5px 18px 5px 10px; font-size: 3.4vw; line-height: 1;}
    .link-rules:before{position: absolute; content: ""; border-right: 1px solid #333; border-bottom: 1px solid #333; width: 4px; height: 4px; right:10px; top: 50%; -webkit-transform:rotate(-45deg) translate(0,-50%); transform:rotate(-45deg) translate(0,-50%);}


.popWin-mod{position:fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); -webkit-background: rgba(0,0,0,0.7); z-index: 10; text-align: center; font-weight:normal; line-height: 0; font-size: 0; }
    .popWin-mod [class*="popWin-col"]{position: fixed;left: 50%; top: 50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: calc(60000%/750); max-width: 990px; }
    .popWin-mod [class*="popWin-col"]>img:first-of-type{border-radius: 10px;}
    .close-button{ position: absolute; width: calc(5400%/600); top:105%; left: 50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); border: 1px solid #fff; border-radius: 50%; }
    .close-button:before{position: absolute; content: "+";  color: #fff; -webkit-transform: rotate(-45deg) translate(-50%,-50%); transform: rotate(-45deg) translate(-50%,-50%); left:32.5%; top:24.5%; font-size:7vw; }
    
    .friends-popWin-col ul, .friends-popWin-col li{ list-style: none;}
    .friends-popWin-col ul{ position: absolute; width: 100%; height: calc(52000%/918); overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; top:calc(30000%/918);left: 50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0);}
    .popWin-mod li{ position: relative;  width: calc(50000%/600); margin: 0 auto 8px; font-size: 3.4vw; line-height: 1.5; text-align: justify; }
    .friends-popWin-col li span{ margin-right:4%;}
    .friends-popWin-col li span:last-child{ margin-right: 0;}
    
    .rules-popWin-col ol{ position: absolute; width: 100%; height: calc(73000%/1103); overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; top:calc(30000%/1103);left: 50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); list-style-position: inside}
    .rules-popWin-col li{ line-height: 1.2; margin-bottom:2.4%;}
    
    
    .popWin-mod .words-col{ width: calc(49000%/600); height: calc(12500%/600); left: calc(5500%/600); }
    .popWin-mod .words-col, .popWin-mod .download-button{position: absolute;text-align: center;
 display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	-webkit-box-orient: vertical; -webkit-box-direction: normal;
	-webkit-flex-direction: column; flex-direction: column; }
    .popWin-mod .words-col h3{ font-size: 4.2vw; color: #333; line-height: 1.3;}	
    .popWin-mod .download-button{ background: #ff576c; width: calc(31800%/600); left: 50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0);}
    .popWin-mod .download-button span{ color: #fff; font-size: 4.2vw; line-height: normal;}
    
    .success-popWin-col p{ position: absolute; top:calc(51900%/600); width: calc(50000%/600); left: calc(5000%/600); font-size: 3vw; color: #4c4648; line-height: 1.3; text-align: center;}
    .success-popWin-col p strong{ margin-left: 2px; margin-right: 2px;}
    
    .success-popWin-col .words-col{ top:calc(30000%/600);}
    .success-popWin-col .download-button{  top:calc(43300%/600);height: calc(6200%/600); }

    .received-popWin-col .words-col{ top:calc(23000%/600);}
    .received-popWin-col .download-button{  top:calc(43300%/600);height: calc(6200%/450); }










.overlay { position:fixed; left:0; right:0; top:0; bottom:0; z-index:10; background:rgba(0,0,0,.8); }
    .share-weChat {  position: relative;}
    .share-weChat img{position:fixed; top:5%; right:10%; z-index: 11; width:50%;}


.hide{display: none;}
.hideShow{ visibility: hidden;}