@media screen and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    background: #fff;
    margin: 0 auto;
  }
  .coverPage {
    width: 100%;
    height: 100%;
    background: url('../images/cover_bg.jpg') no-repeat;
    background-size: cover;
    z-index: 9999999999999;
    position: absolute;
  }
  .coverPage .cover_btn {
    background: url('../images/cover_btn.png') no-repeat center bottom;
    background-size: 55%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0.1rem;
  }
  .swiper-button-prev {
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .swiper-button-next {
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 9999999;
    top: 0;
    right: 0;
    opacity: 0;
  }
  .anniversary_content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: url(../images/bg.jpg) no-repeat;
    background-size: cover;
  }
  .anniversary_content .login_content {
    width: 6.93rem;
    height: 4.345rem;
    background: url(../images/envelope.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .anniversary_content .login_content .cat {
    width: 1.078rem;
    height: 1.001rem;
    background: url(../images/cat.png) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.55rem;
    right: 0.825rem;
  }
  .anniversary_content .login_content .main {
    width: 2.2rem;
    position: absolute;
    width: 6.93rem;
    height: 4.345rem;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    padding-top: 0.715rem;
    box-sizing: border-box;
  }
  .anniversary_content .login_content .main .slogan {
    width: 3.223rem;
    height: 0.88rem;
    background: url(../images/slg.png) no-repeat center;
    background-size: contain;
    margin: 0 auto 0.22rem;
  }
  .anniversary_content .login_content .main .login {
    width: 2.277rem;
    position: relative;
    margin: 0 auto;
  }
  .anniversary_content .login_content .main .login .login_item {
    width: 2.277rem;
    height: 0.396rem;
    background: url(../images/input-box.png) no-repeat;
    background-size: contain;
    margin-bottom: 0.11rem;
    line-height: 0.396rem;
  }
  .anniversary_content .login_content .main .login .login_item .label {
    width: 0.66rem;
    height: 0.396rem;
    text-align: center;
    font-size: 0.121rem;
    color: #cc5e49;
  }
  .anniversary_content .login_content .main .login .login_item .select1 {
    width: 1.54rem;
    height: 0.396rem;
    border: none;
    background: none;
    outline: none;
    text-align: center;
    line-height: 0.35rem;
  }
  .anniversary_content .login_content .main .login .login_item .uuid {
    width: 1.54rem;
    height: 0.396rem;
    display: inline-block;
    background: none;
    outline: none;
    border: none;
    text-align: center;
    line-height: 0.35rem;
  }
  .anniversary_content .login_content .main .login .login_item .server_list {
    position: relative;
    width: 1.54rem;
    height: 0.396rem;
    display: inline-block;
    user-select: none;
    margin: 0 auto;
    color: #cc5e49;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_toggle {
    cursor: pointer;
    text-align: center;
    line-height: 0.396rem;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 1000;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu li {
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    border-bottom: 1px solid #eee;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu li:last-child {
    border-bottom: none;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu li:hover {
    background-color: #e6f3ff;
  }
  .anniversary_content .login_content .main .submit_btn {
    width: 1.749rem;
    margin: 0 auto;
    margin-top: 0.275rem;
  }
  .anniversary_content .swiper-container,
  .anniversary_content .swiper-container1 {
    width: 6.93rem;
    height: 4.345rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .anniversary_content .swiper-container .logo,
  .anniversary_content .swiper-container1 .logo {
    width: 0.792rem;
    height: 0.297rem;
    background: url(../images/logo.png) no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 9999999;
    right: 0.825rem;
    top: 0.44rem;
  }
  .anniversary_content .swiper-container .swiper-slide,
  .anniversary_content .swiper-container1 .swiper-slide {
    width: 100%;
    height: 100%;
    background: url(../images/envelope.png) no-repeat;
    background-size: cover;
  }
  .anniversary_content .swiper-container .swiper-slide .role,
  .anniversary_content .swiper-container1 .swiper-slide .role {
    width: 3.3rem;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .anniversary_content .swiper-container .swiper-slide .role1,
  .anniversary_content .swiper-container1 .swiper-slide .role1 {
    width: 3.322rem;
    height: 4.125rem;
    background: url('../images/jpg3-7_bg.png') no-repeat;
    background-size: contain;
    position: absolute;
    left: -0.22rem;
    bottom: 0;
    overflow: hidden;
  }
  .anniversary_content .swiper-container .swiper-slide .role1 img,
  .anniversary_content .swiper-container1 .swiper-slide .role1 img {
    width: 66%;
    position: absolute;
    left: 0%;
    right: 0%;
    margin: 0 auto;
    top: -0.11rem;
    transform: rotate(5deg);
  }
  .anniversary_content .swiper-container .swiper-slide .text_box,
  .anniversary_content .swiper-container1 .swiper-slide .text_box {
    position: absolute;
    left: 2.64rem;
    width: 3.52rem;
    top: 40%;
    transform: translateY(-50%);
    letter-spacing: -1px;
    color: #7d4237;
  }
  .anniversary_content .swiper-container .swiper-slide .text_box p,
  .anniversary_content .swiper-container1 .swiper-slide .text_box p {
    margin-bottom: 0.055rem;
    font-size: 0.143rem;
    line-height: 0.1925rem;
  }
  .anniversary_content .swiper-container .swiper-slide .text_box1,
  .anniversary_content .swiper-container1 .swiper-slide .text_box1 {
    width: 3.41rem;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    left: 2.86rem;
    color: #7d4237;
    letter-spacing: -1px;
  }
  .anniversary_content .swiper-container .swiper-slide .text_box1 p,
  .anniversary_content .swiper-container1 .swiper-slide .text_box1 p {
    margin-bottom: 0.055rem;
    font-size: 0.143rem;
    line-height: 0.165rem;
  }
  .anniversary_content .swiper-container .swiper-slide .cat,
  .anniversary_content .swiper-container1 .swiper-slide .cat {
    width: 2.068rem;
    position: absolute;
    right: 0rem;
    bottom: 0;
    color: #cc5e49;
  }
  .anniversary_content .swiper-container .swiper-slide .cat .cat_text,
  .anniversary_content .swiper-container1 .swiper-slide .cat .cat_text {
    width: 2.684rem;
    height: 0.814rem;
    background: url(../images/dialog-box.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -2.31rem;
    top: 0.33rem;
    padding: 0.055rem 0.275rem;
    padding-top: 0.1375rem;
    box-sizing: border-box;
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
  }
  .anniversary_content .swiper-container .swiper-slide .cat1,
  .anniversary_content .swiper-container1 .swiper-slide .cat1 {
    width: 1.078rem;
    height: 1.001rem;
    background: url(../images/cat.png) no-repeat;
    background-size: contain;
    position: absolute;
    right: 0.44rem;
    bottom: 0.99rem;
    color: #cc5e49;
  }
  .anniversary_content .swiper-container .swiper-slide .cat1 .cat_text,
  .anniversary_content .swiper-container1 .swiper-slide .cat1 .cat_text {
    width: 2.684rem;
    height: 0.814rem;
    background: url(../images/dialog-box.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -2.695rem;
    top: 0.11rem;
    padding-left: 0.3025rem;
    padding-right: 0.22rem;
    padding-top: 0.11rem;
    box-sizing: border-box;
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
  }
  .anniversary_content .swiper-container .swiper-slide .cat_text1,
  .anniversary_content .swiper-container1 .swiper-slide .cat_text1 {
    width: 2.684rem;
    height: 0.924rem;
    background: url(../images/dialog-box_big.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -2.695rem;
    top: 0.11rem;
    padding-left: 0.3025rem;
    padding-right: 0.165rem;
    padding-top: 0.253rem;
    box-sizing: border-box;
  }
  .anniversary_content .swiper-container .slide21 .share_content,
  .anniversary_content .swiper-container1 .slide21 .share_content {
    width: 7.19026rem !important;
    height: 4.03172rem !important;
    background: url('../images/share_bg.png') no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    font-size: 0.121rem;
    color: #7d4237;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_title,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_title {
    width: 2.398rem;
    height: 0.693rem;
    background: url('../images/share_box.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 0rem;
    right: 0.2rem;
    z-index: 9999999;
    font-size: 0.121rem;
    padding-top: 0.22rem;
    padding-left: 0.25rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_title p,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_title p {
    margin-left: 0.2rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info {
    position: absolute;
    left: 3.3rem;
    top: 0.66rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info p,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info p {
    margin-bottom: 0.0275rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .info2,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .info2 {
    display: none;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .purple1,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .purple1 {
    font-size: 0.176rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text1,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text1 {
    margin-bottom: 0.0825rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text2,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text2 {
    margin-bottom: 0.11rem;
    margin-top: 0.055rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text2 span,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text2 span {
    float: left;
    display: inline-block;
    width: 1.221rem;
    height: 0.275rem;
    background: url('../images/label.png') no-repeat;
    background-size: contain;
    line-height: 0.275rem;
    text-align: center;
    font-size: 0.143rem;
    color: #fff;
    margin-right: 0.165rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text2 .active,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text2 .active {
    background: url('../images/label_click.png') no-repeat;
    background-size: contain;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .getName .prefix_name,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .getName .prefix_name {
    width: 1.332rem;
    height: 0.3rem;
    background: url('../images/label_click.png') no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 0.12rem;
    color: #fff;
    line-height: 0.3rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .getName .edit,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .getName .edit {
    width: 0.192rem;
    height: 0.192rem;
    background: url('../images/edit.png') no-repeat;
    background-size: contain;
    margin-top: 0.05rem;
    margin-left: 0.1rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .fb,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .fb {
    width: 0.2912rem;
    height: 0.2912rem;
    background: url('../images/fb.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.672rem;
    left: 4.816rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .x,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .x {
    width: 0.2912rem;
    height: 0.2912rem;
    background: url('../images/Twitter.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.672rem;
    left: 5.376rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .line,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .line {
    width: 0.2912rem;
    height: 0.2912rem;
    background: url('../images/line.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.672rem;
    left: 5.936rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .share_btn,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .share_btn {
    width: 1.596rem;
    height: 0.5152rem;
    background: url('../images/reward.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.672rem;
    left: 3.63rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .copy-link-btn,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .copy-link-btn {
    width: 0.5152rem;
    height: 0.5152rem;
    background: url('../images/copy-link.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.672rem;
    right: 0.672rem;
    cursor: pointer;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .save-btn,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .save-btn {
    width: 0.5152rem;
    height: 0.5152rem;
    background: url('../images/save.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.672rem;
    right: 1.344rem;
    cursor: pointer;
  }
  .anniversary_content .swiper-container .slide22 .share_content .share_info,
  .anniversary_content .swiper-container1 .slide22 .share_content .share_info {
    position: absolute;
    left: 3.5rem;
    top: 1rem;
  }
  .anniversary_content .swiper-container .slide22 .share_content .getName,
  .anniversary_content .swiper-container1 .slide22 .share_content .getName {
    margin-bottom: 0.22rem !important;
  }
  .anniversary_content .swiper-container .one_text,
  .anniversary_content .swiper-container1 .one_text {
    line-height: 0.44rem;
    text-align: center;
  }
  .anniversary_content .swiper-container .slide8 .text_box,
  .anniversary_content .swiper-container1 .slide8 .text_box {
    left: 3.025rem;
    width: 3.3rem;
  }
  .anniversary_content .swiper-container .slide11 .text_box,
  .anniversary_content .swiper-container1 .slide11 .text_box {
    top: 43%;
  }
  .anniversary_content .swiper-container .slide11 .cat_text,
  .anniversary_content .swiper-container1 .slide11 .cat_text {
    top: 0.66rem !important;
  }
  .anniversary_content .swiper-container .slide14 .text_box,
  .anniversary_content .swiper-container1 .slide14 .text_box,
  .anniversary_content .swiper-container .slide17 .text_box,
  .anniversary_content .swiper-container1 .slide17 .text_box,
  .anniversary_content .swiper-container .slide20 .text_box,
  .anniversary_content .swiper-container1 .slide20 .text_box,
  .anniversary_content .swiper-container .slide16 .text_box,
  .anniversary_content .swiper-container1 .slide16 .text_box {
    top: 43%;
  }
  .anniversary_content .swiper-container .slide14 .cat_text,
  .anniversary_content .swiper-container1 .slide14 .cat_text,
  .anniversary_content .swiper-container .slide17 .cat_text,
  .anniversary_content .swiper-container1 .slide17 .cat_text,
  .anniversary_content .swiper-container .slide20 .cat_text,
  .anniversary_content .swiper-container1 .slide20 .cat_text,
  .anniversary_content .swiper-container .slide16 .cat_text,
  .anniversary_content .swiper-container1 .slide16 .cat_text {
    top: 0.66rem !important;
  }
  .anniversary_content .swiper-container .slide14 .cat_text1,
  .anniversary_content .swiper-container1 .slide14 .cat_text1,
  .anniversary_content .swiper-container .slide17 .cat_text1,
  .anniversary_content .swiper-container1 .slide17 .cat_text1,
  .anniversary_content .swiper-container .slide20 .cat_text1,
  .anniversary_content .swiper-container1 .slide20 .cat_text1,
  .anniversary_content .swiper-container .slide16 .cat_text1,
  .anniversary_content .swiper-container1 .slide16 .cat_text1 {
    top: 0.66rem !important;
    left: -2.2rem !important;
  }
  .anniversary_content .swiper-container .slide20 .cat_text1,
  .anniversary_content .swiper-container1 .slide20 .cat_text1 {
    font-size: 11px !important;
    top: 0.66rem !important;
    left: -2.2rem !important;
  }
  .title_mosk {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
  }
  .title_mosk .title_box {
    z-index: 9999999999999999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 6.468rem;
    height: 4.092rem;
    background: url('../images/bg_box.png') no-repeat;
    background-size: contain;
    padding: 0.5rem 0.45rem;
    box-sizing: border-box;
  }
  .title_mosk .title_box .list_item {
    width: 100%;
  }
  .title_mosk .title_box .list_item .title {
    font-size: 0.168rem;
    color: #7d4237;
    margin-bottom: 0.2rem;
  }
  .title_mosk .title_box .list_item ul .tab_item {
    float: left;
    width: 0.996rem;
    height: 0.228rem;
    background: url('../images/label.png') no-repeat;
    background-size: contain;
    font-size: 0.132rem;
    text-align: center;
    line-height: 0.228rem;
    color: #fff;
    margin-right: 0.11rem;
    margin-bottom: 0.1rem;
  }
  .title_mosk .title_box .list_item ul .active {
    background: url('../images/label_click.png') no-repeat;
    background-size: contain;
  }
  .title_mosk .title_box .btn {
    width: 1.032rem;
    height: 1.164rem;
    background: url('../images/ok.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.3rem;
    right: 0.2rem;
  }
}
@media screen and (orientation: portrait) {
  html,
  body {
    width: 100%;
    height: 100%;
    background: #fff;
    margin: 0 auto;
  }
  .coverPage {
    width: 100%;
    height: 100%;
    background: url('../images/cover_bg.jpg') no-repeat;
    background-size: cover;
    z-index: 9999999999999;
    position: absolute;
  }
  .coverPage .cover_btn {
    background: url('../images/cover_btn.png') no-repeat center bottom;
    background-size: 55%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0.1rem;
  }
  .swiper-button-prev {
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .swiper-button-next {
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 9999999;
    top: 0;
    right: 0;
    opacity: 0;
  }
  .anniversary_content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: url(../images/bg.jpg) no-repeat;
    background-size: cover;
  }
  .anniversary_content .login_content {
    width: 12.6rem;
    height: 7.9rem;
    background: url(../images/envelope.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .anniversary_content .login_content .cat {
    width: 1.96rem;
    height: 1.82rem;
    background: url(../images/cat.png) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
  }
  .anniversary_content .login_content .main {
    width: 4rem;
    position: absolute;
    width: 12.6rem;
    height: 7.9rem;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    padding-top: 1.3rem;
    box-sizing: border-box;
  }
  .anniversary_content .login_content .main .slogan {
    width: 5.86rem;
    height: 1.6rem;
    background: url(../images/slg.png) no-repeat center;
    background-size: contain;
    margin: 0 auto 0.4rem;
  }
  .anniversary_content .login_content .main .login {
    width: 4.14rem;
    position: relative;
    margin: 0 auto;
  }
  .anniversary_content .login_content .main .login .login_item {
    width: 4.14rem;
    height: 0.72rem;
    background: url(../images/input-box.png) no-repeat;
    background-size: contain;
    margin-bottom: 0.2rem;
    line-height: 0.72rem;
  }
  .anniversary_content .login_content .main .login .login_item .label {
    width: 1.2rem;
    height: 0.72rem;
    text-align: center;
    font-size: 0.22rem;
    color: #cc5e49;
  }
  .anniversary_content .login_content .main .login .login_item .select1 {
    width: 2.8rem;
    height: 0.72rem;
    border: none;
    background: none;
    outline: none;
    text-align: center;
  }
  .anniversary_content .login_content .main .login .login_item .uuid {
    width: 2.8rem;
    height: 0.72rem;
    display: inline-block;
    background: none;
    outline: none;
    border: none;
    text-align: center;
  }
  .anniversary_content .login_content .main .login .login_item .server_list {
    position: relative;
    width: 2.8rem;
    height: 0.72rem;
    display: inline-block;
    user-select: none;
    margin: 0 auto;
    color: #cc5e49;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_toggle {
    cursor: pointer;
    text-align: center;
    line-height: 0.72rem;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 1000;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu li {
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    border-bottom: 1px solid #eee;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu li:last-child {
    border-bottom: none;
  }
  .anniversary_content .login_content .main .login .login_item .server_list_menu li:hover {
    background-color: #e6f3ff;
  }
  .anniversary_content .login_content .main .submit_btn {
    width: 3.18rem;
    margin: 0 auto;
    margin-top: 0.5rem;
  }
  .anniversary_content .swiper-container,
  .anniversary_content .swiper-container1 {
    width: 12.6rem;
    height: 7.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .anniversary_content .swiper-container .logo,
  .anniversary_content .swiper-container1 .logo {
    width: 1.44rem;
    height: 0.54rem;
    background: url(../images/logo.png) no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 9999999;
    right: 1.5rem;
    top: 0.8rem;
  }
  .anniversary_content .swiper-container .swiper-slide,
  .anniversary_content .swiper-container1 .swiper-slide {
    width: 100%;
    height: 100%;
    background: url(../images/envelope.png) no-repeat;
    background-size: contain;
  }
  .anniversary_content .swiper-container .swiper-slide .role,
  .anniversary_content .swiper-container1 .swiper-slide .role {
    width: 6rem;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .anniversary_content .swiper-container .swiper-slide .role1,
  .anniversary_content .swiper-container1 .swiper-slide .role1 {
    width: 6.04rem;
    height: 7.5rem;
    background: url('../images/jpg3-7_bg.png') no-repeat;
    background-size: contain;
    position: absolute;
    left: -0.4rem;
    bottom: 0;
    overflow: hidden;
  }
  .anniversary_content .swiper-container .swiper-slide .role1 img,
  .anniversary_content .swiper-container1 .swiper-slide .role1 img {
    width: 66%;
    position: absolute;
    left: 0%;
    right: 0%;
    margin: 0 auto;
    top: -0.2rem;
    transform: rotate(5deg);
  }
  .anniversary_content .swiper-container .swiper-slide .text_box,
  .anniversary_content .swiper-container1 .swiper-slide .text_box {
    position: absolute;
    left: 4.8rem;
    width: 6.4rem;
    top: 40%;
    transform: translateY(-50%);
    letter-spacing: -1px;
    color: #7d4237;
  }
  .anniversary_content .swiper-container .swiper-slide .text_box p,
  .anniversary_content .swiper-container1 .swiper-slide .text_box p {
    margin-bottom: 0.1rem;
    font-size: 0.26rem;
    line-height: 0.35rem;
  }
  .anniversary_content .swiper-container .swiper-slide .text_box1,
  .anniversary_content .swiper-container1 .swiper-slide .text_box1 {
    width: 6.2rem;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    left: 5.2rem;
    color: #7d4237;
    letter-spacing: -1px;
  }
  .anniversary_content .swiper-container .swiper-slide .text_box1 p,
  .anniversary_content .swiper-container1 .swiper-slide .text_box1 p {
    margin-bottom: 0.1rem;
    font-size: 0.26rem;
    line-height: 0.3rem;
  }
  .anniversary_content .swiper-container .swiper-slide .cat,
  .anniversary_content .swiper-container1 .swiper-slide .cat {
    width: 3.76rem;
    position: absolute;
    right: 0rem;
    bottom: 0;
    color: #cc5e49;
  }
  .anniversary_content .swiper-container .swiper-slide .cat .cat_text,
  .anniversary_content .swiper-container1 .swiper-slide .cat .cat_text {
    width: 4.88rem;
    height: 1.48rem;
    background: url(../images/dialog-box.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -4.2rem;
    top: 0.8rem;
    padding: 0.25rem 0.5rem 0.1rem;
    box-sizing: border-box;
    font-size: 0.24rem;
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
  }
  .anniversary_content .swiper-container .swiper-slide .cat1,
  .anniversary_content .swiper-container1 .swiper-slide .cat1 {
    width: 1.96rem;
    height: 1.82rem;
    background: url(../images/cat.png) no-repeat;
    background-size: contain;
    position: absolute;
    right: 0.8rem;
    bottom: 1.8rem;
    color: #cc5e49;
  }
  .anniversary_content .swiper-container .swiper-slide .cat1 .cat_text,
  .anniversary_content .swiper-container1 .swiper-slide .cat1 .cat_text {
    width: 4.88rem;
    height: 1.48rem;
    background: url(../images/dialog-box.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -4.9rem;
    top: 0.2rem;
    padding-left: 0.55rem;
    padding-right: 0.4rem;
    padding-top: 0.2rem;
    box-sizing: border-box;
    font-size: 0.24rem;
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
  }
  .anniversary_content .swiper-container .swiper-slide .cat_text1,
  .anniversary_content .swiper-container1 .swiper-slide .cat_text1 {
    width: 4.88rem;
    height: 1.68rem;
    background: url(../images/dialog-box_big.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -4.9rem;
    top: 0.2rem;
    padding-left: 0.55rem;
    padding-right: 0.3rem;
    padding-top: 0.46rem;
    box-sizing: border-box;
    font-size: 0.24rem;
  }
  .anniversary_content .swiper-container .slide21,
  .anniversary_content .swiper-container1 .slide21 {
    background: none;
  }
  .anniversary_content .swiper-container .slide21 .share_content,
  .anniversary_content .swiper-container1 .slide21 .share_content {
    width: 13.34rem !important;
    height: 7.48rem !important;
    background: url('../images/share_bg.png') no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    font-size: 0.22rem;
    color: #7d4237;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_title,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_title {
    width: 4.36rem;
    height: 1.26rem;
    background: url('../images/share_box.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 0rem;
    right: 0.3rem;
    z-index: 9999999;
    font-size: 0.21rem;
    padding-top: 0.38rem;
    padding-left: 0.35rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_title p,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_title p {
    margin-left: 0.2rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info {
    position: absolute;
    left: 6rem;
    top: 1.2rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info p,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info p {
    margin-bottom: 0.05rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .info2,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .info2 {
    display: none;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .purple1,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .purple1 {
    font-size: 0.32rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text1,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text1 {
    margin-bottom: 0.15rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text2,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text2 {
    margin-bottom: 0.2rem;
    margin-top: 0.1rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text2 span,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text2 span {
    float: left;
    display: inline-block;
    width: 2.22rem;
    height: 0.5rem;
    background: url('../images/label.png') no-repeat;
    background-size: contain;
    line-height: 0.5rem;
    text-align: center;
    font-size: 0.26rem;
    color: #fff;
    margin-right: 0.3rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .text2 .active,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .text2 .active {
    background: url('../images/label_click.png') no-repeat;
    background-size: contain;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .getName .prefix_name,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .getName .prefix_name {
    width: 2.22rem;
    height: 0.5rem;
    background: url('../images/label_click.png') no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 0.2rem;
    color: #fff;
    line-height: 0.5rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_info .getName .edit,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_info .getName .edit {
    width: 0.192rem;
    height: 0.192rem;
    background: url('../images/edit.png') no-repeat;
    background-size: contain;
    margin-top: 0.05rem;
    margin-left: 0.1rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .fb,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .fb {
    width: 0.52rem;
    height: 0.52rem;
    background: url('../images/fb.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1.2rem;
    left: 8.6rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .x,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .x {
    width: 0.52rem;
    height: 0.52rem;
    background: url('../images/Twitter.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1.2rem;
    left: 9.6rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .line,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .line {
    width: 0.52rem;
    height: 0.52rem;
    background: url('../images/line.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1.2rem;
    left: 10.6rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .share_btn,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .share_btn {
    width: 2.85rem;
    height: 0.92rem;
    background: url('../images/reward.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1.2rem;
    left: 6.6rem;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .copy-link-btn,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .copy-link-btn {
    width: 0.92rem;
    height: 0.92rem;
    background: url('../images/copy-link.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1.2rem;
    right: 1.2rem;
    cursor: pointer;
  }
  .anniversary_content .swiper-container .slide21 .share_content .share_btn_box .save-btn,
  .anniversary_content .swiper-container1 .slide21 .share_content .share_btn_box .save-btn {
    width: 0.92rem;
    height: 0.92rem;
    background: url('../images/save.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1.2rem;
    right: 2.4rem;
    cursor: pointer;
  }
  .anniversary_content .swiper-container .slide22 .share_content .share_info,
  .anniversary_content .swiper-container1 .slide22 .share_content .share_info {
    position: absolute;
    left: 6.5rem;
    top: 1.8rem;
  }
  .anniversary_content .swiper-container .slide22 .share_content .share_info .getName,
  .anniversary_content .swiper-container1 .slide22 .share_content .share_info .getName {
    margin-bottom: 0.4rem;
  }
  .anniversary_content .swiper-container .one_text,
  .anniversary_content .swiper-container1 .one_text {
    line-height: 0.8rem;
    text-align: center;
  }
  .anniversary_content .swiper-container .slide8 .text_box,
  .anniversary_content .swiper-container1 .slide8 .text_box {
    left: 5.5rem;
    width: 6rem;
  }
  .anniversary_content .swiper-container .slide11 .text_box,
  .anniversary_content .swiper-container1 .slide11 .text_box {
    top: 43%;
  }
  .anniversary_content .swiper-container .slide11 .cat_text,
  .anniversary_content .swiper-container1 .slide11 .cat_text {
    top: 1.2rem !important;
  }
  .anniversary_content .swiper-container .slide14 .text_box,
  .anniversary_content .swiper-container1 .slide14 .text_box,
  .anniversary_content .swiper-container .slide17 .text_box,
  .anniversary_content .swiper-container1 .slide17 .text_box,
  .anniversary_content .swiper-container .slide20 .text_box,
  .anniversary_content .swiper-container1 .slide20 .text_box {
    top: 43%;
  }
  .anniversary_content .swiper-container .slide14 .cat_text,
  .anniversary_content .swiper-container1 .slide14 .cat_text,
  .anniversary_content .swiper-container .slide17 .cat_text,
  .anniversary_content .swiper-container1 .slide17 .cat_text,
  .anniversary_content .swiper-container .slide20 .cat_text,
  .anniversary_content .swiper-container1 .slide20 .cat_text {
    top: 1.2rem !important;
  }
  .anniversary_content .swiper-container .slide14 .cat_text1,
  .anniversary_content .swiper-container1 .slide14 .cat_text1,
  .anniversary_content .swiper-container .slide17 .cat_text1,
  .anniversary_content .swiper-container1 .slide17 .cat_text1,
  .anniversary_content .swiper-container .slide20 .cat_text1,
  .anniversary_content .swiper-container1 .slide20 .cat_text1 {
    top: 1.2rem !important;
    left: -4rem !important;
  }
  .anniversary_content .swiper-container .slide20 .cat_text1,
  .anniversary_content .swiper-container1 .slide20 .cat_text1 {
    font-size: 0.2rem !important;
    top: 1.2rem !important;
    left: -4rem !important;
  }
  .title_mosk {
    position: fixed;
    z-index: 9999999999999999;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
  }
  .title_mosk .title_box {
    width: 10.78rem;
    height: 6.82rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background: url('../images/bg_box.png') no-repeat;
    background-size: cover;
    padding: 0.6rem 0.8rem;
    box-sizing: border-box;
  }
  .title_mosk .title_box .list_item {
    width: 100%;
  }
  .title_mosk .title_box .list_item .title {
    font-size: 0.28rem;
    color: #7d4237;
    margin-bottom: 0.2rem;
  }
  .title_mosk .title_box .list_item ul .tab_item {
    float: left;
    width: 1.66rem;
    height: 0.38rem;
    background: url('../images/label.png') no-repeat;
    background-size: contain;
    font-size: 0.22rem;
    text-align: center;
    line-height: 0.38rem;
    color: #fff;
    margin-right: 0.11rem;
    margin-bottom: 0.2rem;
  }
  .title_mosk .title_box .list_item ul .active {
    background: url('../images/label_click.png') no-repeat;
    background-size: contain;
  }
  .title_mosk .title_box .btn {
    width: 1.72rem;
    height: 1.94rem;
    background: url('../images/ok.png') no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0.6rem;
    right: 0.3rem;
  }
}
.tips {
  min-width: 150px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  z-index: 99999999;
  display: none;
  color: #fff;
  line-height: 50px;
  text-align: center;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.time {
  color: #e9862f;
}
.role_name {
  color: #dc71c2;
}
.num {
  color: #62b1a9;
}
.num1 {
  color: #5fbf7c;
}
.role_name1 {
  color: #4d6ccf;
}
.pink {
  color: #f69cec;
}
@media (min-width: 1100px) and (orientation: landscape) {
  .cat_text,
  .cat_text1 {
    font-size: 0.12rem;
  }
}
/*# sourceMappingURL=index.css.map */