 /* ==================
            布局
   ==================== */

 .playicon {
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }

 .phonebutton::after {
     border: none !important;
     padding: 0 !important;
     margin: 0 !important;
 }

 .phonebutton {
     background-color: transparent !important;
     padding: 0 !important;
     line-height: inherit !important;
     margin: 0 !important;
     width: auto !important;
     font-weight: 500 !important;
     border-radius: none !important;
 }

 .sexicon {
     width: 30px;
     height: 30px;
     border-radius: 15px;
 }

 image {
     display: flex;
 }

 .sharebutton::after {
     border: none !important;
     padding: 0 !important;
     margin: 0 !important;
 }

 .sharebutton {
     background-color: transparent !important;
     padding: 0 !important;
     line-height: inherit !important;
     margin: 0 !important;
     width: auto !important;
     font-weight: 500 !important;
     border-radius: none !important;
 }

 radio .wx-radio-input {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     /* 圆角 */
     /* border: 2px solid red; */

 }


 .bottomline {
     height: 1px;
     margin: 0 30px;
     border-bottom: solid 1px #F8F8F8;
 }

 .textline1 {

     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     word-wrap: break-word;
     white-space: normal !important;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
 }

 .textline2 {

     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     word-wrap: break-word;
     white-space: normal !important;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .width750 {
     width: 750px;
 }


 /*  -- flex弹性布局 -- */
 .flex {
     display: flex;
 }

 .flex-sub {
     flex: 1;
 }

 .flex-twice {
     flex: 2;
 }

 .flex-treble {
     flex: 3;
 }

 .flex-column {
     display: flex;
     flex-direction: column;
 }

 .flex-row {
     display: flex;
     flex-direction: row;
     align-items: center;
 }

 .flex-center {
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .flex-wrap {
     flex-wrap: wrap;
 }

 .flex-nowrap {
     flex-wrap: nowrap;
     overflow: hidden;
     /*超出部分隐藏*/
     white-space: nowrap;
     /*不换行*/
     text-overflow: ellipsis;
     /*超出部分文字以...显示*/
 }

 .align-start {
     align-items: flex-start;
 }

 .align-end {
     align-items: flex-end;
 }

 .align-center {
     align-items: center;
 }

 .align-stretch {
     align-items: stretch;
 }

 .self-start {
     align-self: flex-start;
 }

 .self-center {
     align-self: flex-center;
 }

 .self-end {
     align-self: flex-end;
 }

 .self-stretch {
     align-self: stretch;
 }

 .align-stretch {
     align-items: stretch;
 }

 .justify-start {
     justify-content: flex-start;
 }

 .justify-end {
     justify-content: flex-end;
 }

 .justify-center {
     justify-content: center;
 }

 .justify-between {
     justify-content: space-between;
 }

 .justify-around {
     justify-content: space-around;
 }

 .marginleft25 {
     margin-left: 25px;
 }

 .marginleft12 {
     margin-left: 12px;
 }

 .bg245 {
     background-color: rgba(245, 245, 245, 1);
 }

 /*  -- 内外边距 -- */

 .margin-0 {
     margin: 0 !important;
 }

 .margin-xs {
     margin: 10px;
 }

 .margin-sm {
     margin: 20px;
 }

 .margin {
     margin: 30px;
 }

 .margin-lg {
     margin: 40px;
 }

 .margin-xl {
     margin: 50px;
 }

 .margin-top-xs {
     margin-top: 10px;
 }

 .margin-top-sm {
     margin-top: 20px;
 }

 .margin-top {
     margin-top: 30px;
 }

 .margin-top-lg {
     margin-top: 40px;
 }

 .margin-top-xl {
     margin-top: 50px;
 }

 .margin-right-xs {
     margin-right: 10px;
 }

 .margin-right-sm {
     margin-right: 20px;
 }

 .margin-right {
     margin-right: 30px;
 }

 .margin-right-lg {
     margin-right: 40px;
 }

 .margin-right-xl {
     margin-right: 50px;
 }

 .margin-bottom-xs {
     margin-bottom: 10px;
 }

 .margin-bottom-sm {
     margin-bottom: 20px;
 }

 .margin-bottom {
     margin-bottom: 30px;
 }

 .margin-bottom-lg {
     margin-bottom: 40px;
 }

 .margin-bottom-xl {
     margin-bottom: 50px;
 }

 .margin-left-xs {
     margin-left: 10px;
 }

 .margin-left-sm {
     margin-left: 20px;
 }

 .margin-left {
     margin-left: 30px;
 }

 .margin-left-lg {
     margin-left: 40px;
 }

 .margin-left-xl {
     margin-left: 50px;
 }

 .margin-lr-xs {
     margin-left: 10px;
     margin-right: 10px;
 }

 .margin-lr-sm {
     margin-left: 20px;
     margin-right: 20px;
 }

 .margin-lr {
     margin-left: 30px;
     margin-right: 30px;
 }

 .margin-lr-lg {
     margin-left: 40px;
     margin-right: 40px;
 }

 .margin-lr-xl {
     margin-left: 50px;
     margin-right: 50px;
 }

 .margin-tb-xs {
     margin-top: 10px;
     margin-bottom: 10px;
 }

 .margin-tb-sm {
     margin-top: 20px;
     margin-bottom: 20px;
 }

 .margin-tb {
     margin-top: 30px;
     margin-bottom: 30px;
 }

 .margin-tb-lg {
     margin-top: 40px;
     margin-bottom: 40px;
 }

 .margin-tb-xl {
     margin-top: 50px;
     margin-bottom: 50px;
 }

 .padding-0 {
     padding: 0 !important;
 }

 .padding-xs {
     padding: 10px;
 }

 .padding-sm {
     padding: 20px;
 }

 .padding {
     padding: 30px;
 }

 .padding-lg {
     padding: 40px;
 }

 .padding-xl {
     padding: 50px;
 }

 .padding-top-xs {
     padding-top: 10px;
 }

 .padding-top-sm {
     padding-top: 20px;
 }

 .padding-top {
     padding-top: 30px;
 }

 .padding-top-lg {
     padding-top: 40px;
 }

 .padding-top-xl {
     padding-top: 50px;
 }

 .padding-right-xs {
     padding-right: 10px;
 }

 .padding-right-sm {
     padding-right: 20px;
 }

 .padding-right {
     padding-right: 30px;
 }

 .padding-right-lg {
     padding-right: 40px;
 }

 .padding-right-xl {
     padding-right: 50px;
 }

 .padding-bottom-xs {
     padding-bottom: 10px;
 }

 .padding-bottom-sm {
     padding-bottom: 20px;
 }

 .padding-bottom {
     padding-bottom: 30px;
 }

 .padding-bottom-lg {
     padding-bottom: 40px;
 }

 .padding-bottom-xl {
     padding-bottom: 50px;
 }

 .padding-left-xs {
     padding-left: 10px;
 }

 .padding-left-sm {
     padding-left: 20px;
 }

 .padding-left {
     padding-left: 30px;
 }

 .padding-left-lg {
     padding-left: 40px;
 }

 .padding-left-xl {
     padding-left: 50px;
 }

 .padding-lr-xs {
     padding-left: 10px;
     padding-right: 10px;
 }

 .padding-lr-sm {
     padding-left: 20px;
     padding-right: 20px;
 }

 .padding-lr {
     padding-left: 30px;
     padding-right: 30px;
 }

 .padding-lr-lg {
     padding-left: 40px;
     padding-right: 40px;
 }

 .padding-lr-xl {
     padding-left: 50px;
     padding-right: 50px;
 }

 .padding-tb-xs {
     padding-top: 10px;
     padding-bottom: 10px;
 }

 .padding-tb-sm {
     padding-top: 20px;
     padding-bottom: 20px;
 }

 .padding-tb {
     padding-top: 30px;
     padding-bottom: 30px;
 }

 .padding-tb-lg {
     padding-top: 40px;
     padding-bottom: 40px;
 }

 .padding-tb-xl {
     padding-top: 50px;
     padding-bottom: 50px;
 }

 .relative {
     position: relative;
 }

 .absolute {
     position: absolute;
 }

 /* -- 浮动 --  */

 .cf::after,
 .cf::before {
     content: " ";
     display: table;
 }

 .cf::after {
     clear: both;
 }

 .fl {
     float: left;
 }

 .fr {
     float: right;
 }