.custom { width: 100%; /*height: 600px;*/ box-sizing: border-box; padding: 30px 30px 30px 360px; position: relative; border: 1px solid #ddd; } .custom_left { position: absolute; left: 30px; top: 30px; width: 300px; height: 500px; background: url(../images/iphone1.png); background-size: 100% 100%; } .custom_left01 { text-align: center; color: white; line-height: 66px; font-size: 12px; } .custom_left02 { box-sizing: border-box; width: 100%; height: 36px; position: absolute; bottom: 4px; left: 0; display: flex; } .custom_left02_l { width: 48px; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; } .custom_left02_r { width: 320px; height: 100%; cursor: pointer; font-size: 12px; color: #c6c6c6; display: flex; justify-content: space-between; padding: 0 2px; } .custom_left02_r01,.custom_left02_r01_1,.custom_left02_create { height: 100%; flex: 1; text-align: center; line-height: 36px; box-sizing: border-box; border: 1px solid #ddd; margin-left: 2px; position: relative; } .custom_left02_r01_1{ position: absolute; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; left: -1px; top: -1px; } .custom_left02_create{ width: calc(100% + 2px); left: -1px; } /*.custom_left02_r02,.custom_left02_create2 {*/ /*width: 100%;*/ /*height: 100%;*/ /*text-align: center;*/ /*line-height: 36px;*/ /*box-sizing: border-box;*/ /*border: 1px solid #ddd;*/ /*margin-right: 1px;*/ /*position: absolute;*/ /*left: 0;*/ /*}*/ .custom_left02_r02,.custom_left02_r02_c,.custom_left02_create2,.custom_left02_r02_c_l{ width: 100%; height: 36px; left: -0.5px; text-align: center; line-height: 36px; box-sizing: border-box; border: 1px solid #ddd; position: absolute; } .custom_left02_r02_c{ width: calc(100% + 1px); margin-bottom: 2px; position: relative; font-size: 12px; left: 0; } .custom_left02_r02{ height: auto; border: none; bottom: 33px; } .custom_left02_r02_c_l{ width: calc(100% + 2px); bottom: -36px; font-size: 14px; left: 0; } .custom_left02_create2{ width: calc(100% + 2px); top: -39px; } .custom_left02_create2::selection,.custom_left02_create::selection{ background-color: transparent; } .custom_left02_r02>.custom_left02_r02_c{ margin-bottom: 3px; } .active{ box-sizing: border-box; border: 1px solid #009688; } .custom_right { width: 100%; height: 498px; border: 1px solid #ddd; } .custom_right01 { font-size: 16px; color: #666; box-sizing: border-box; padding: 0 15px; height: 45px; line-height: 45px; display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; } .custom_right01_del { color: #009688; cursor: pointer; } .custom_right02 { box-sizing: border-box; padding: 20px 15px; color: #666; font-size: 14px; } .custom_right03 { display: flex; box-sizing: border-box; margin: 20px 0; } .custom_right03_l { margin: 0 20px 0 70px; font-size: 16px; color: #666666; line-height: 32px; } .custom_right03_r { display: flex; flex-direction: column; } .custom_right03_r01 { height: 35px; width: 260px; } .custom_right03_r01 input { width: 100%; height: 100%; border: 1px solid #aaa; border-radius: 4px; color: #666; box-sizing: border-box; padding: 0 10px; } .custom_right03_r02 { margin-top: 6px; font-size: 12px; color: #aaa; } .custom_right04 { display: flex; justify-content: space-between; box-sizing: border-box; padding: 20px 15px; color: #666; font-size: 14px; } .custom_right0402 { color: #009688; cursor: pointer; } .custom_right05_box { width: 100%; height: 170px; box-sizing: border-box; } .custom_right05 { display: flex; align-items: center; } .custom_right05_inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 100px; box-sizing: border-box; } .custom_right05_inner span { margin-top: 10px; font-size: 14px; } .custom_right05_inner02 { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 100px; box-sizing: border-box; } .custom_right05_inner02 span { margin-top: 10px; font-size: 14px; } .custom_right05_inner04 { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 100px; box-sizing: border-box; } .custom_right05_inner04 span { margin-top: 10px; font-size: 14px; } .custom_right06 { margin-top: 10px; width: 100%; box-sizing: border-box; padding: 0 20px; display: flex; justify-content: flex-end; } .custom_right0601 { box-sizing: border-box; padding: 10px 20px; border: 1px solid #009688; border-radius: 5px; font-size: 16px; color: #009688; } .custom_right0601:hover { background: #009688; color: white; } .custom_right0602 { box-sizing: border-box; padding: 10px 20px; border: 1px solid #009688; border-radius: 5px; font-size: 16px; color: #009688; margin-left: 20px; } .custom_right0602:hover { background: #009688; color: white; } .cri0 { display: none; width: 500px; height: 160px; box-sizing: border-box; border: 1px solid #E3E3E3; margin-left: 50px; } .cri_a { width: 100%; height: 40px; border-bottom: 1px solid #E3E3E3; box-sizing: border-box; display: flex; align-items: center; } .cri_a01 { height: 100%; box-sizing: border-box; line-height: 40px; margin: 0 15px; border-bottom: 2px solid transparent; cursor: pointer; } .cri_a i { width: 0; height: 20px; border-right: 1px solid #E3E3E3; } .cri_a01:hover { color: #009688; border-bottom: 2px solid #009688; } .cri_cheak01 { color: #009688; border-bottom: 2px solid #009688; } .cri_b { width: 100%; height: 120px; box-sizing: border-box; padding: 10px 20px; display: flex; } .cri_b_left01 { color: #666; margin-top: 10px; } .cri_b_left02 { margin-top: 10px; display: flex; } #cri_b_right02 { margin-left: 10px; } .cri_b_right { width: 100px; height: 100px; margin-left: 20px; } .cri_b_right img { width: 100%; height: 100%; display: block; } .cri_c { display: none; } .cri1 { display: none; box-sizing: border-box; padding: 10px 20px; } .cri1_a_box{ width: 100%; height: 304px; } .cri1_a { width: 100%; height: 60px; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; color: #666; } .cri1_a01 { width: 20%; } .cri1_a02 { width: 10%; } .cri1_a03 { width: 20%; } .cri1_a04 { width: 40%; } .cri1_a05 { width: 10%; box-sizing: border-box; text-align: right; } .cri1_a05_span { border: 1px solid #009688; box-sizing: border-box; padding: 8px 0; width: 75px; text-align: center; display: block; border-radius: 5px; color: #009688; cursor: pointer; } .cri1_a05_cheak { background: #009688; color: white; } .cri1_b{ width: 100%; height: 60px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; } .cri1_b_l{ color: #009688; } .cri1_b_r{ display: flex; align-items: center; box-sizing: border-box; } .cri1_b_r01{ box-sizing: border-box; padding: 5px 10px; color: #797979; background-color: #fff; border: 1px solid #ddd; border-radius: 20px; margin: 0 2px; font-size: 14px; } .cri1_b_r02{ width: 31px; height: 31px; text-align: center; line-height: 31px; color: #797979; background-color: #ffeed1; border-color: #ddd; border-radius: 50%; font-size: 14px; } .cri2 { display: none; box-sizing: border-box; padding: 20px 0; } .cri2Box { display: flex; box-sizing: border-box; } .cri2_a { margin: 0 20px 0 70px; font-size: 16px; color: #666666; line-height: 32px; } .cri2_b { display: flex; flex-direction: column; } .cri2_b01 { height: 35px; width: 320px; } .cri2_b01 input { width: 100%; height: 100%; border: 1px solid #aaa; border-radius: 4px; color: #666; box-sizing: border-box; padding: 0 10px; } .selectcard{ display: none; width: 100%; height: 120px; box-sizing: border-box; padding: 0 30px; } .selectcard01{ width: 100%; height: 100%; border: 1px solid #979797; border-radius: 4px; display: flex; align-items: center; box-sizing: border-box; padding-left: 15px; } .selectcard01_l{ width: 182px; height: 86px; position: relative; background: url(../images/kaquan.png); background-size: 100% 100%; } .selectcard01_l00{ width: 40px; height: 40px; display: block; position: absolute; left: 10px; top: 10px; border-radius: 50%; } .selectcard01_l01{ color: white; font-size: 14px; position: absolute; left: 60px; top: 20px; } .selectcard01_l02{ font-size: 12px; color: #8A8A8A; position: absolute; left: 10px; bottom: 4px; } .selectcard01_r{ box-sizing: border-box; margin-left: 20px; } .selectcard01_r01{ font-size: 16px; margin-bottom: 10px; } .selectcard01_r02{ margin-bottom: 10px; } .cri3 { display: none; box-sizing: border-box; padding: 10px 20px; } .cri3_a_box{ width: 100%; height: 304px; } .cri3_a { width: 100%; height: 60px; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; color: #666; } .cri3_a01 { width: 20%; } .cri3_a02 { width: 70%; } .cri3_a03 { width: 10%; box-sizing: border-box; text-align: right; } .cri3_a03_span { border: 1px solid #009688; box-sizing: border-box; padding: 8px 0; width: 75px; text-align: center; display: block; border-radius: 5px; color: #009688; cursor: pointer; } .cri3_a03_cheak { background: #009688; color: white; } .selectlink{ display: none; width: 100%; height: 120px; box-sizing: border-box; padding: 0 30px; } .selectlink01{ width: 100%; height: 100%; border: 1px solid #979797; border-radius: 4px; display: flex; align-items: center; box-sizing: border-box; padding-left: 15px; } .selectlink01_l{ width: 80px; height: 80px; } .selectlink01_l00{ width: 100%; height: 100%; display: block; } .selectlink01_r{ box-sizing: border-box; margin-left: 20px; } .selectlink01_r01{ margin-bottom: 10px; }