.main_form { width: 1100px; margin: 0px auto; }
.main_form_bg { background: #333; position: absolute; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; height: 100%; top: 0px; left: 0px; z-index: -1; }
.main_form_bg img { width: 100%; }
.login_logo { width: 100%; margin: 80px auto 0; }
.login_form_box { width: 100%; display: inline-block; }
.login_form { width: 360px; background: white; float: right; border-radius: 4px; }
.login_form .title { width: 100%; height: 60px; line-height: 60px; font-size: 22px; text-align: center; border-bottom: 1px #dddddd solid; }
.login_form .form { padding: 30px 40px; }
.login_form .form_value { margin-left: 0px; }
.login_form .rad_gender { display: inline-block; width: 100%; }
.login_form .radio { display: inline-block; }
.login_form .formimg { position: relative; }
.login_form .formimg .percent { position: absolute; width: 100%; text-align: center; height: 30px; line-height: 30px; top: 50%; margin-top: -15px; left: 0px; }
.login_form .img_head { width: 100px; height: 100px; }
.main_bg_nickname { font-size: 20px; position: absolute; right: 40px; bottom: 20px; color: white; }
.login_foot { position: absolute; overflow: hidden; bottom: 0px; left: 0px; }
.login_foot, .login_foot a, .login_foot p, .login_foot p a { color: white; }
.login_thrid { text-align: center; margin-top: 30px; }
.login_thrid a { width: 50px; height: 50px; display: inline-block; background: url(/Image/icon_login_thrid.png) no-repeat; margin: 0 20px; }
.login_thrid a.qq:hover { background-position: 0 -50px; }
.login_thrid a.weibo { background-position: -50px 0; }
.login_thrid a.weibo:hover { background-position: -50px -50px; }
.login_thrid a.weixin { background-position: -100px 0; }
.login_thrid a.weixin:hover { background-position: -100px -50px; }

/*im*/
.im_win_bg { position: absolute; width: 100%; height: 100%; }
.im_win_body { position: absolute; overflow: hidden; height: 100%; width: 100%; }
.im_win_body.notwin { top: 50%; left: 50%; }
.im_left { width: 250px; position: absolute; height: 100%; background: #e7e6e6; overflow: hidden; }
.im_left_in { position: relative; width: 100%; height: 100%; }
.im_left_in * { font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscaleFont type; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.im_left .search { width: 100%; height: 40px; background: white; }
.im_left .search input[type=text] { width: 90%; height: 90%; }
.im_left .state { background: #ffafaf; width: 250px; text-align: center; padding: 10px 0; color: white; position: absolute; top: 40px; left: 0px; z-index: 111; height: 20px; overflow: hidden; }
.im_left .state a { width: 100%; height: 100%; display: inline-block; text-align: center; line-height: 20px; }
.im_left .userlist_menu { height: 40px; width: 100%; background: #edeae8; }
.im_left .userlist_menu a { width: 50%; height: 38px; border-bottom: 2px #edeae8 solid; text-align: center; float: left; line-height: 40px; }
.im_left .userlist_menu a:hover, .im_left .userlist_menu a.active { border-bottom-color: #ff6699; }
.im_left .userlist_box, .im_left .customlist_box { overflow: hidden; height: calc(100% - 40px); }
.im_left .userlist, .im_left .customlist { width: 100%; }
.im_left .userlist li, .im_left .customlist li { padding: 12px; cursor: default; position: relative; }
.im_left .userlist li:hover, .im_left .customlist li:hover { background: #dbdad9; }
.im_left .userlist li.active { background: #c3c4c5; }
.im_left .userlist li img { width: 40px; height: 40px; border-radius: 3px; float: left; }
.im_left .userlist li .text { margin-left: 52px; height: 40px; }
.im_left .userlist li .text .nick { width: 120px; float: left; }
.im_left .userlist li .text .date { width: 54px; text-align: right; overflow: hidden; }
.im_left .userlist li .text .content { width: 130px; display: inline-block; }
.im_left .userlist li .noread { position: absolute; top: 3px; left: 40px; background: #ff3b30; color: white; border-radius: 20px; font-size: 12px; padding: 0px 5px; }
.im_left .customlist li img { width: 30px; height: 30px; border-radius: 3px; float: left; }
.im_left .customlist li .text { margin-left: 42px; height: 30px; line-height: 30px; }
.im_right { position: absolute; left: 250px; height: 100%; width: calc(100% - 250px); background: #f5f5f5; overflow: hidden; }
.im_right_null { background: #f5f5f5; position: relative; width: 100%; height: 100%; }
.im_right_null img { width: 200px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; }
.im_right_info { display: none; }
.im_right .title { margin: 0 20px; height: 50px; line-height: 50px; font-size: 16px; text-align: center; border-bottom: 1px #e3e3e3 solid; }
.im_right .newmessage { height: 116px; }
.im_right .newmessage .edit_box { height: 70px; width: calc(100% - 40px); margin: 10px 30px; overflow: hidden; }
.im_right .newmessage .edit_box .edit { min-height: 100%; width: 100%; }
.im_right .newmessage .send { float: right; margin-right: 30px; }
.im_right .tools { border-top: 1px #ececec solid; padding: 10px 0; height: 20px; }
.im_right .tools_icon { margin: 0 20px; height: 100%; }
.im_right .tools_icon a { width: 20px; height: 20px; line-height: 20px; cursor: pointer; display: inline-block; background: url("/Scripts/rong/image/icon.png") 0 0/50px no-repeat; margin-right: 12px; background-size: 44px; }
.im_right .tools_icon a.face { background-position: 0 -290px; }
.im_right .tools_icon a.face:hover { background-position: -23px -290px; }
.im_right .tools_icon a.pic { width: 23px; background-position: 0 -326px; }
.im_right .tools_icon a.pic:hover { background-position: -23px -326px; }
.im_right .tools_icon a.screenshot { background-position: 0 -356px; }
.im_right .tools_icon a.screenshot:hover { background-position: -23px -356px; }
.im_right .message_info_box { margin-left: 20px; padding: 20px 30px 10px 10px; overflow: hidden; }
.im_right .message_info_box .mi_noread { position: fixed; right: 10px; padding: 8px 12px; background: white; -webkit-box-shadow: 0 1px 3px 0 rgba(120,120,120,.3); -moz-box-shadow: 0 1px 3px 0 rgba(120,120,120,.3); box-shadow: 0 1px 3px 0 rgba(120,120,120,.3); border-radius: 2px; cursor: pointer; }
.im_right .message_info_box .mi_noread .line { height: 20px; border-left: 1px #e1e1e1 solid; padding-right: 10px; margin-left: 10px; }
.im_right .message_info_box .mi_noread .close { width: 9px; height: 9px; background: url(/im/widget/image/icon_close.png) no-repeat; display: inline-block; margin-left: 2px; }
.im_right .message_info { display: inline-block; width: 100%; }
.im_right .message_info .mess_one { display: inline-block; width: 100%; margin-top: 16px; }
.im_right .message_info .mess_one .face { width: 36px; border-radius: 3px; }
.im_right .message_info .mess_one .text { padding: 8px 20px; max-width: 400px; display: inline-block; position: relative; }
.im_right .message_info .mess_one .text pre { font-size: 14px; line-height: 18px; color: #333333; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: transparent; border: none; border-radius: 0; line-height: 24px; text-align: left; }
.im_right .message_info .mess_one .text * { }
.im_right .message_info .mess_one .text .pic { width: 120px; cursor: pointer; }
.im_right .message_info .mess_one .text .percent { position: absolute; z-index: 1000; left: 50%; top: 50%; width: 40px; height: 40px; line-height: 40px; text-align: center; margin: -20px 0 0 -20px; background: rgba(0,0,0,0.6); color: white; font-size: 12px; border-radius: 50%; }
.im_right .message_info .mess_one .text .audio { height: 20px; min-width: 30px; max-width: 240px; display: inline-block; }
.im_right .message_info .mess_one .text .audio i { float: left; display: inline-block; width: 4px; height: 26px; opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.im_right .message_info .mess_one .text .audio i { background-size: 170px; background-repeat: no-repeat; background-image: url(/im/widget/image/audioBg.png); cursor: pointer; }
.im_right .message_info .mess_one .product { background: white !important; border-radius: 6px !important; border: none; padding: 14px !important; }
.im_right .message_info .mess_one .product .propic { float: left; width: 70px; height: 70px; border-radius: 5px; }
.im_right .message_info .mess_one .product .info { overflow: hidden; margin-left: 80px; }
.im_right .message_info .mess_one .product .name { height: 16px; overflow: hidden; height: 36px; color: #333333 !important; line-height: 20px; }
.im_right .message_info .mess_one .product .price { color: #ff6699 !important; font-size: 16px; margin-top: 10px; float: left; }

.im_right .message_info .mess_one.left { text-align: left; }
.im_right .message_info .mess_one.left .face { float: left; }
.im_right .message_info .mess_one.left .text { margin-left: 10px; background: #e5e5e5; border-radius: 0 16px 16px 16px; }
.im_right .message_info .mess_one.left .text .audio i:nth-child(1) { background-position: 0px -40px; }
.im_right .message_info .mess_one.left .text .audio i:nth-child(2) { background-position: -7px -40px; }
.im_right .message_info .mess_one.left .text .audio i:nth-child(3) { background-position: -14px -40px; }
.im_right .message_info .mess_one.left .time { vertical-align: middle; display: inline-block; font-size: 12px; margin-left: 4px; }

.im_right .message_info .mess_one.right { text-align: right; }
.im_right .message_info .mess_one.right .face { float: right; }
.im_right .message_info .mess_one.right .text { margin-right: 10px; background: #ff6699; border-radius: 16px 0 16px 16px; float: right; }
.im_right .message_info .mess_one.right .text * { color: white; }
.im_right .message_info .mess_one.right .text .audio i:nth-child(1) { background-position: 0px -61px; }
.im_right .message_info .mess_one.right .text .audio i:nth-child(2) { background-position: -7px -61px; }
.im_right .message_info .mess_one.right .text .audio i:nth-child(3) { background-position: -14px -61px; }
.im_right .message_info .mess_one.right .time { vertical-align: middle; display: inline-block; font-size: 12px; margin: 16px 4px 0 0; }
.im_right .sendms { background: white; }
.emojilist_box { position: absolute; width: 480px; height: 240px; padding: 12px; background: white; left: 120px; bottom: 170px; z-index: 11; -webkit-box-shadow: 0 1px 3px 0 rgba(120,120,120,.3); -moz-box-shadow: 0 1px 3px 0 rgba(120,120,120,.3); box-shadow: 0 1px 3px 0 rgba(120,120,120,.3); display: none; }
.emojilist_box a { padding: 3px; cursor: pointer; display: inline-block; }
.emojilist_box a:hover { background: #e3e3e3; }