.jiageBlock { min-height: 100vh; font-size: 0; position: relative; } .jiageBlock > img { width: 100%; height: 100vh; -o-object-fit: cover; object-fit: cover; } .jiageBlock .w1400 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 1080px; } .jiageBlock .w1400 > div { display: none; } .jiageBlock .w1400 .true { background-color: #ffffff; border-radius: 4px; line-height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 25px; font-size: 22px; color: #000; font-weight: bold; width: 110px; } .jiageBlock .w1400 .tit { position: relative; display: flex; line-height: 50px; font-size: 36px; color: #fff; font-weight: bold; } .jiageBlock .w1400 .tit span { display: block; line-height: 48px; width: 50px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); font-size: 36px; font-weight: bold; text-align: center; color: #fff; border-radius: 50%; position: absolute; left: -70px; } .jiageBlock .w1400 .win { text-align: center; } .jiageBlock .w1400 .win .titFirst { font-size: 38px; letter-spacing: 5px; font-weight: bold; color: #fff; margin-top: -10px; } .jiageBlock .w1400 .win .big { font-size: 80px; letter-spacing: 11px; font-weight: bold; color: #fff; margin-top: 10px; } .jiageBlock .w1400 .win .tips { font-size: 20px; letter-spacing: 1px; color: #fff; margin-top: 22px; } .jiageBlock .w1400 .win .moreBtn { width: 200px; padding: 0 40px; justify-content: space-between; border-color: #fff; background: #fff; color: #103051; font-weight: bold; margin: 0 auto; margin-top: 78px; } .jiageBlock .w1400 .win .moreBtn img { margin: 0; width: auto; height: auto; } .jiageBlock .w1400 .win2 { width: 100%; } .jiageBlock .w1400 .win2 .content { margin-top: 40px; display: flex; flex-wrap: wrap; } .jiageBlock .w1400 .win2 .content .list { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; width: 31.8518518519%; margin-left: 2.2222222222%; padding: 53px 21px 31px; cursor: pointer; position: relative; } .jiageBlock .w1400 .win2 .content .list:first-child { margin-left: 0; } .jiageBlock .w1400 .win2 .content .list.on::after { display: block; content: ""; width: 60px; height: 60px; position: absolute; right: -1px; top: -1px; background: url(../images/select.png) no-repeat center/cover; } .jiageBlock .w1400 .win2 .content .list.on p span { color: #000; background: #fff; background-color: #fff; font-weight: bold; } .jiageBlock .w1400 .win2 .content .list .img { font-size: 0; } .jiageBlock .w1400 .win2 .content .list .img img { width: 100%; height: auto; } .jiageBlock .w1400 .win2 .content .list p { font-size: 24px; color: #fff; line-height: 40px; display: flex; margin-top: 54px; } .jiageBlock .w1400 .win2 .content .list p span { display: block; width: 40px; line-height: 38px; border: 1px solid rgba(255, 255, 255, 0.8); text-align: center; margin-right: 10px; border-radius: 6px; } .jiageBlock .w1400 .win2 .true { margin-top: 40px; } .jiageBlock .w1400 .win3 .tips, .jiageBlock .w1400 .win4 .tips, .jiageBlock .w1400 .win6 .tips, .jiageBlock .w1400 .win7 .tips { font-size: 22px; line-height: 40px; color: #fff; opacity: 0.5; margin-top: 4px; } .jiageBlock .w1400 .win3 .content, .jiageBlock .w1400 .win4 .content, .jiageBlock .w1400 .win6 .content, .jiageBlock .w1400 .win7 .content { font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 31px; } .jiageBlock .w1400 .win3 .content img, .jiageBlock .w1400 .win4 .content img, .jiageBlock .w1400 .win6 .content img, .jiageBlock .w1400 .win7 .content img { width: 49.0740740741%; } .jiageBlock .w1400 .win3 .switch, .jiageBlock .w1400 .win4 .switch, .jiageBlock .w1400 .win6 .switch, .jiageBlock .w1400 .win7 .switch,.jiageBlock .w1400 .win8 .switch { font-size: 22px; line-height: 40px; color: #fff; background: none; width: 100%; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin-top: 20px; padding-bottom: 8px; margin-bottom: 30px; } .jiageBlock .w1400 .win3 .switch::-moz-placeholder, .jiageBlock .w1400 .win4 .switch::-moz-placeholder, .jiageBlock .w1400 .win6 .switch::-moz-placeholder, .jiageBlock .w1400 .win7 .switch::-moz-placeholder { opacity: 0.5; } .jiageBlock .w1400 .win3 .switch:-ms-input-placeholder, .jiageBlock .w1400 .win4 .switch:-ms-input-placeholder, .jiageBlock .w1400 .win6 .switch:-ms-input-placeholder, .jiageBlock .w1400 .win7 .switch:-ms-input-placeholder { opacity: 0.5; } .jiageBlock .w1400 .win3 .switch::placeholder, .jiageBlock .w1400 .win4 .switch::placeholder, .jiageBlock .w1400 .win6 .switch::placeholder, .jiageBlock .w1400 .win7 .switch::placeholder { opacity: 0.5; } .jiageBlock .w1400 .win5 .content, .jiageBlock .w1400 .win8 .content { font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; } .jiageBlock .w1400 .win5 .content img, .jiageBlock .w1400 .win8 .content img { width: 49.0740740741%; } .jiageBlock .w1400 .win5 .pick, .jiageBlock .w1400 .win8 .pick { display: flex; font-size: 0; margin-top: 38px; margin-bottom: 30px; } .jiageBlock .w1400 .win5 .pick a, .jiageBlock .w1400 .win8 .pick a { font-size: 22px; line-height: 48px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0 20px; min-width: 140px; display: flex; align-items: center; justify-content: space-between; color: #fff; border-radius: 4px; margin-right: 17px; } .jiageBlock .w1400 .win5 .pick a img, .jiageBlock .w1400 .win8 .pick a img { display: none; } .jiageBlock .w1400 .win5 .pick a.on, .jiageBlock .w1400 .win8 .pick a.on { border-color: #fff; } .jiageBlock .w1400 .win9 #form { padding-top: 30px; } .jiageBlock .w1400 .win9 #form input { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-size: 22px; line-height: 40px; color: #fff; padding-bottom: 11px; margin-top: 37px; } .jiageBlock .w1400 .win9 #form input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .jiageBlock .w1400 .win9 #form input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); } .jiageBlock .w1400 .win9 #form input::placeholder { color: rgba(255, 255, 255, 0.5); } .jiageBlock .w1400 .win9 #form .submit { display: block; width: 120px; line-height: 50px; text-align: center; font-weight: bold; font-size: 22px; color: #000; background: #fff; border-radius: 4px; margin-top: 60px; } .jiageBlock .w1400 .win10 { width: 647px; height: 647px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); justify-content: center; align-items: center; margin: 0 auto; } .jiageBlock .w1400 .win10 .content { width: 614px; height: 614px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; } .jiageBlock .w1400 .win10 .content .tit { font-size: 38px; line-height: 58px; color: #fff; font-weight: bold; justify-content: center; text-align: center; margin-bottom: 12px; } .jiageBlock .w1400 .win10 .content .price { font-size: 28px; color: #fff; font-weight: bold; text-align: center; margin-bottom: 17px; } .jiageBlock .w1400 .win10 .content .price span { font-size: 58px; font-weight: bold; } .jiageBlock .w1400 .win10 .content .tips { font-size: 20px; line-height: 2; color: #fff; opacity: 0.9; text-align: center; margin-bottom: 31px; } .jiageBlock .w1400 .win10 .content .moreBtn { color: #103051; border-color: #fff; background: #fff; font-weight: bold; margin: 0 auto; padding: 0 40px; } .jiageBlock .w1400 .win10 .content .moreBtn img { margin: 0; } .blackBg .tips { width: 90%; max-width: 400px; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; padding: 30px 0; border-radius: 10px; } .blackBg .tips p { text-align: center; font-size: 20px; line-height: 2; } .blackBg .tips .text { font-size: 16px; line-height: 1.5; padding: 0 30px; text-align: center; margin-top: 20px; } .blackBg .tips .close { display: block; margin: 0 auto; width: 100px; line-height: 36px; border: 1px solid #e6e6e6; text-align: center; border-radius: 6px; color: #333; margin-top: 30px; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } @media (max-width: 1280px) { .jiageBlock .w1400 { padding: 130px 0 80px 0; } .jiageBlock .w1400 .tit { padding-left: 70px; } .jiageBlock .w1400 .tit span { left: 0; } .jiageBlock .w1400 .win3, .jiageBlock .w1400 .win4, .jiageBlock .w1400 .win6, .jiageBlock .w1400 .win7 { margin-top: 20px; } } @media (max-width: 996px) { .jiageBlock { min-height: auto; } .jiageBlock > img { position: absolute; top: 0; left: 0; z-index: -1; height: 100%; } .jiageBlock .w1400 { position: initial; transform: translate(0, 0); min-height: 40vh; } .jiageBlock .w1400 .win .titFirst { font-size: 5vw; } .jiageBlock .w1400 .win .big { font-size: 8vw; margin: 20px 0 30px; } .jiageBlock .w1400 .win .tips { font-size: 4vw; } .jiageBlock .w1400 .win .moreBtn { margin-top: 50px; } .jiageBlock .w1400 .win2 .content { margin-top: 30px; flex-wrap: wrap; } .jiageBlock .w1400 .win2 .content .list { width: calc((100% - 20px) / 2); margin-left: 20px; margin-bottom: 20px; } .jiageBlock .w1400 .win2 .content .list:nth-child(2n+1) { margin-left: 0; } .jiageBlock .w1400 .win2 .content .list p { margin-top: 30px; } .jiageBlock .w1400 .win3 .tips, .jiageBlock .w1400 .win4 .tips, .jiageBlock .w1400 .win6 .tips, .jiageBlock .w1400 .win7 .tips { margin-top: 20px; } } @media (max-width: 750px) { .jiageBlock .w1400 .win .tips { font-size: 4vw; } .jiageBlock .w1400 .win10 { width: 90%; border: 0; } .jiageBlock .w1400 .win10 .content { background: none; width: 100%; } .jiageBlock .w1400 .win10 .content .tit { font-size: 5vw; line-height: 1.5; padding-left: 0; } } @media (max-width: 500px) { .jiageBlock .w1400 { padding-bottom: 50px; padding-top: 110px; } .jiageBlock .w1400 .tit { font-size: 22px; line-height: 30px; padding-left: 50px; } .jiageBlock .w1400 .tit span { width: 30px; height: 30px; font-size: 18px; line-height: 30px; } .jiageBlock .w1400 .win2 .content .list { width: 100%; margin-left: 0; } .jiageBlock .w1400 .win2 .content .list p { line-height: 32px; font-size: 16px; margin-top: 25px; } .jiageBlock .w1400 .win2 .content .list p span { width: 32px; line-height: 30px; font-size: 20px; } .jiageBlock .w1400 .win2 .content .list.on::after { width: 55px; height: 55px; } .jiageBlock .w1400 .win2 .true { margin-top: 20px; } .jiageBlock .w1400 .win3 .tips, .jiageBlock .w1400 .win4 .tips, .jiageBlock .w1400 .win6 .tips, .jiageBlock .w1400 .win7 .tips { font-size: 16px; margin-top: 20px; } .jiageBlock .w1400 .win3 .content img, .jiageBlock .w1400 .win4 .content img, .jiageBlock .w1400 .win6 .content img, .jiageBlock .w1400 .win7 .content img { width: 100%; margin-bottom: 30px; } .jiageBlock .w1400 .win3 .switch, .jiageBlock .w1400 .win4 .switch, .jiageBlock .w1400 .win6 .switch, .jiageBlock .w1400 .win7 .switch, .jiageBlock .w1400 .win8 .switch{ margin-top: -15px; font-size: 14px; } .jiageBlock .w1400 .win5 .content img, .jiageBlock .w1400 .win8 .content img { width: 100%; margin-bottom: 30px; } .jiageBlock .w1400 .win5 .pick, .jiageBlock .w1400 .win8 .pick { margin-top: 10px; } .jiageBlock .w1400 .win5 .pick a, .jiageBlock .w1400 .win8 .pick a { line-height: 40px; min-width: 100px; font-size: 16px; } .jiageBlock .w1400 .win9 #form input { font-size: 16px; line-height: 25px; margin-top: 20px; } .jiageBlock .w1400 .win9 #form .submit { margin-top: 40px; } .jiageBlock .w1400 .win10 { height: 500px; } .jiageBlock .w1400 .win10 .content { height: 500px; } .jiageBlock .w1400 .win10 .content .price span { font-size: 32px; margin-right: 1px; } .jiageBlock .w1400 .win10 .content .tips { font-size: 4vw; line-height: 1.8; } .jiageBlock .w1400 .true { line-height: 46px; width: 100px; padding: 0 15px; } }/*# sourceMappingURL=jiage.css.map */