﻿.inner_wrap {padding-bottom: 0;}
.title-st-1 {padding-bottom: 100px;}
/*.title-st-1 {padding: 80px 0px 40px 50px; margin-bottom: 100px; background: url(/common/image/selfopen/guidetit.png) no-repeat; background-color: #f8f8f8; background-position: 90% bottom;}*/
.title-st-1 h1 {margin-bottom: 10px;}
.title-st-1 p {font-size: 20px; font-weight: 500; padding-left: 0px;}
.title-st-1 p strong {background: #cce5ff; vertical-align: 0px; font-weight: 500;}
h2.sub-title {font-size: 24px; margin-bottom: 20px;}


.guide_order {padding-bottom: 80px;}
.guide_order .order_list {overflow: hidden; padding-bottom: 3px;}
.guide_order .order_list li {float: left; width: calc(20% - 40px); height: 200px; padding-top: 140px; text-align: center; background: url(/common/image/selfopen/order1.png) center 30px no-repeat; background-size: 60px; background-color: #fff; border-radius: 12px; position: relative; border: 1px solid #e1e1e1; box-shadow: 3px 3px 0px #e1e1e1; margin-right: 49px;}
.guide_order .order_list li:last-child {margin-right: 0;}
.guide_order .order_list li:after {content: ''; display: block; width: 40px; height: 40px; position: absolute; top: 50%; right: -45px; background: url(/common/image/selfopen/arrow-chg.png) center center no-repeat; background-size: 20px; transform: rotate(-90deg) translateX(50%); opacity: 0.3;}
.guide_order .order_list li:last-child:after {display: none;}
.guide_order .order_list li:nth-child(2) {background-image: url(/common/image/selfopen/order5.png); background-size: 90px; background-position-y: 40px;}
.guide_order .order_list li:nth-child(3) {background-image: url(/common/image/selfopen/order2.png); background-size: 90px; background-position-y: 30px;}
.guide_order .order_list li:nth-child(4) {background-image: url(/common/image/selfopen/order4.png); background-position-y: 30px;}
.guide_order .order_list li:nth-child(5) {background-image: url(/common/image/selfopen/order3.png); background-size: 75px; background-position-y: 35px;}
.guide_order .order_list h3 {font-size: 22px;}
.guide_order .order_list li:hover {border-color: #cce5ff; box-shadow: 3px 3px 0px #cce5ff;}
.guide_order .order_list .btn_wrap {height: 40%; background: #fff; position: absolute; bottom:-100px; left:0; width: 100%; transition: bottom 0.3s; border-radius: 15px;}
.guide_order .order_list li:hover .btn_wrap {bottom: 0;}
.guide_order .order_list li .btn_wrap p {padding-bottom: 5px;}
.guide_order .order_list li .btn_wrap input[type=button] {width: 80%; height: 36px; background: #00f; color: #fff; border-radius: 5px; border: none; outline: none;}
.guide_order .order_list li:nth-child(2) .btn_wrap input[type=button], .guide_order .order_list li:nth-child(3) .btn_wrap input[type=button], .guide_order .order_list li:nth-child(4) .btn_wrap input[type=button] {margin-top: 20px;}


.guide_time {padding-bottom: 100px;}
.guide_time p {font-size: 20px;}
.guide_time p em {font-size: 14px;}
.guide_time p em strong {color: red; vertical-align: 0px; font-weight: 400;}

.guide_line {padding-bottom: 80px;}
.guide_line p b {vertical-align: -1px; font-size: 18px; font-weight: 500;}
.guide_line p {padding-bottom: 20px;}
.guide_line p em {color: red;}

.guide_slide {width: 100%; overflow: hidden; position: relative; padding-bottom: 30px;}
.guide_slide .swiper-slide {text-align: center;}
.guide_slide .swiper-slide>p {font-size: 18px; text-align: left; padding-left: 1px;}
.guide_slide .swiper-slide>p + p {padding-top: 5px;}
.guide_slide .swiper-slide img {width: 40%; margin-top: 20px; /*image-rendering: -webkit-optimize-contrast;*/}
.guide_slide .swiper-slide p span {display: inline-block; vertical-align: 0px; margin-right: 5px; width: 25px; line-height: 25px; background: #111; color: #fff; border-radius: 50%; text-align: center;}
.guide_slide .swiper-slide .add {position: absolute; top: 60%; right: 30px; text-align: left; width: 400px; font-size: 16px; background: rgba(255, 255, 255, 1); padding: 20px; box-shadow: -5px 5px 15px rgba(0,0,0,0.2);}
.guide_slide .swiper-slide .add p {font-size: 14px;}
.guide_slide .swiper-button-prev, .guide_slide .swiper-button-next {background: url(/common/image/selfopen/arrow2.png) center center no-repeat; background-size: 15px; background-color: #111; width: 50px; height: 50px;}
.guide_slide .swiper-button-prev {transform:rotate(-180deg);}
.guide_slide .swiper-pagination {display: inline-block; position: absolute; width: auto; top: 3px; bottom: initial; left: initial; right: 0;}
.guide_slide .swiper-pagination .swiper-pagination-bullet {width: 30px; height: 30px; line-height: 30px; border-radius: 0; color: #111; background: #efefef; opacity: 1;}
.guide_slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #00f; color: #fff;}

.content>.btn_wrap {text-align: center; padding-bottom: 120px;}
.content>.btn_wrap input[type=button] {width: 200px;}

.notice {background: #f8f8f8; padding-bottom: 80px; padding-top: 50px;}
.notice h2 {margin-bottom: 15px;}
.notice .red_txt {color: red;}
.notice h4 {padding-top: 10px;}

.modal_phone .modal_bg {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.3); z-index: 200;}
.modal_phone .modal_phone_inner {display: none; position: fixed; max-width: 1000px; width: 80%; height: 640px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 250;}
.modal_phone .modal_tit {background: #111; color: #fff; font-size: 20px; padding: 10px 15px; position: relative;}
.modal_phone .modal_tit .x-btn {position: absolute; top: 10px; right: 15px; width: 30px; height: 30px; background: url(/common/image/icon/xbtn.png) center center no-repeat; background-size: 15px; border: 0; outline: 0; color: #fff;}
.modal_phone .usim_size {padding: 20px 30px;}
.modal_phone div>p {padding-bottom:20px;}
.modal_phone div>p span {width: 20px; line-height: 20px; margin-right: 5px; background: #00f; display: inline-block; border-radius: 50%; text-align: center; color: #fff;}
.modal_phone .usim_size ul {overflow: hidden; width: 600px; margin: 0 auto; vertical-align:baseline;}
.modal_phone .usim_size ul li {display: inline-block; padding: 0 15px; text-align: center; height: 160px;}
.modal_phone .usim_size ul li p {padding-top: 5px;}
.modal_phone .usim_size ul li:nth-child(2) {padding-top: 25px; padding-left: 30px;}
.modal_phone .usim_size ul li:nth-child(3) {padding-top: 67px;}
.modal_phone .usim_size ul li:nth-child(4) {padding-top: 77px;}
.modal_phone .usim_insert {padding: 10px 30px;}
.modal_phone .usim_insert ul {margin: 0 auto; width: 600px; overflow: hidden; text-align: center;}
.modal_phone .usim_insert img {height: 230px; position: relative; z-index: 1;}
.modal_phone .usim_insert ul li {float: left; position: relative; width: 300px;}
.modal_phone .usim_insert ul li p {padding-top: 15px;}
.modal_phone .usim_insert ul li:before {content: ''; display: block; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: #cce5ff; width: 150px; height: 150px; border-radius: 50%;}






@media screen and (max-width: 1023px) {
    .title-st-1 p {font-size: 16px;}
    h2.sub-title {font-size: 18px;}

    .guide_order .order_list li {height: 140px; padding-top: 90px; background-size: 35px; background-position-y: 22px;}
    .guide_order .order_list li:nth-child(2) {background-size: 58px; background-position-y: 28px;}
    .guide_order .order_list li:nth-child(3) {background-size: 60px; background-position-y: 20px;}
    .guide_order .order_list li:nth-child(4) {background-size: 40px; background-position-y: 18px;}
    .guide_order .order_list li:nth-child(5) {background-size: 50px; background-position-y: 22px;}
    .guide_order .order_list li:after {width: 30px; height: 30px; right: -38px;}
    .guide_order .order_list h3 {font-size: 18px; font-weight: 500;}

    .guide_time p {font-size: 16px;}
    .guide_slide .swiper-slide>p {font-size: 16px;}
    .guide_slide .swiper-slide .add {top: 30%;}
    .guide_order .order_list li:hover .btn_wrap {bottom: 22px; background-color: rgba(255, 255, 255, 0.8);}
}


@media screen and (max-width: 768px) {
    .title-st-1 {padding-bottom: 50px;}
    .guide_order {padding-bottom: 50px;}
    .guide_order .order_list li {width: calc(50% - 40px); margin-right: 0; margin-bottom: 30px;}
    .guide_order .order_list li:nth-child(2n+1) {margin-right: 45px;}
    .guide_order .order_list .btn_wrap {display: none; bottom:0;}
    .guide_order .order_list li:hover .btn_wrap {display: block;}

    .guide_slide .swiper-slide .add {right: 50%; transform: translateX(50%); padding:10px; font-size: 14px; top: 90%; width: 90%;}
    .guide_slide .swiper-slide .add p {font-size: 12px;}
    .guide_slide .swiper-button-prev, .guide_slide .swiper-button-next {width: 30px; height: 30px; top: 60%; background-size: 10px;}
    .guide_slide .swiper-pagination .swiper-pagination-bullet {width: 20px;}
    .content>.btn_wrap {padding-bottom: 60px;}
    .guide_slide .swiper-slide img {width: 70%;}

    .guide_time p em {font-size: 12px;}
    .guide_line p {font-size: 13px;}
    .guide_line p b {font-size: 16px;}

    .modal_phone .usim_size {padding: 10px;}
    .modal_phone .usim_insert {padding: 10px;}
    .modal_phone .usim_size ul {width: 100%;}
    .modal_phone .usim_size ul li {height: 140px;}
    .modal_phone .usim_size ul li:first-child {width: 100%; height: auto; padding-bottom: 10px;}
    .modal_phone .usim_size ul li:nth-child(2) {padding: 10px 0 0; width: 34%;}
    .modal_phone .usim_size ul li:nth-child(3) {padding: 51px 0 0; width: 32%;}
    .modal_phone .usim_size ul li:nth-child(4) {padding: 61px 0 0; width: 30%;}
    .modal_phone .usim_size ul li img {width: auto;}
    .modal_phone .usim_size ul li:first-child img {width: 90%; max-width: 150px;}
    .modal_phone .usim_insert ul {width: 100%;}
    .modal_phone .usim_insert ul li {width: 50%;}
    .modal_phone .usim_insert img {height: auto; width: 50%; max-width: 180px;}
    .modal_phone .usim_insert ul li:first-child img {width: 75%; max-width: 190px;}
    .modal_phone .usim_insert ul li:before {width: 80%; height: 70%; top: 40%; max-width: 150px; max-height: 120px;}
    .modal_phone2 .usim_insert ul li:before {display: none;}
    .modal_phone .usim_insert ul li p {padding-top: 5px;}
}