.product-form {position:relative;display:flex;padding:60px 0;margin:10px 0;border-radius:6px;overflow:hidden;border:1px solid #fff;box-sizing:border-box;background:#fff;box-shadow:0px 5px 15px 0px rgba(0,0,0,0.1);}
.product-form::before {position:absolute;top:0;left:0;content:'';width:500px;height:500px;background:#f7f7ff;border-radius:300px 200px;z-index:1;transform:translate(-25%,-25%);}
.product-form::after {position:absolute;right:0;bottom:0;content:'';width:300px;aspect-ratio:1 / 1.1;background:#fffbf4;border-radius:300px 200px;z-index:1;transform:translate(0%,50%);}
.product-img {position:relative;z-index:2;display:flex;padding:0 70px;flex-direction:column;align-items:center;}
.product-img .product {display:block;width:200px;aspect-ratio:1;border-radius:20px;overflow:hidden;}
.product-img .remind {margin:30px 0;width: 100%;}
.product-img .remind ul{display: flex;}
.product-img .remind li{position: relative;flex: 1;    justify-content: center;display: flex;font-size: 14px;}
.product-img .remind .tick{width: 21px;height: 21px;border: 2px solid #2196F3;border-radius: 31px;text-align: center;}
.product-img .remind .tick::before {content: '';position: absolute;width: 5px;height: 9px;color: #2196F3;border-bottom: 2px solid;border-right: 2px solid;top: 7px;transform-origin: center;transform: translate(-50%, -30%) rotate(45deg);-webkit-transform: translate(-50%, -30%) rotate(45deg);}
.product-img .remind span{padding-left:5px;color:#666}

.buy-setting {position:relative;z-index:5;flex:1;margin:0 70px 0 0;}
.buy-setting h1 {font-size:18px;font-weight:bold;color:#000;}
.subtitle {font-size:14px;color:red;}
.form-lists li {display:flex;margin:25px 0;min-height:45px;}
.form-lists .title {flex:80px 0 0;margin:10px 10px 0 0;line-height:2;font-size:14px;color:#7d7d7d;}
.grid-area {display:grid;width:100%;gap:20px;/* background-color:beige;*/  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.grid-item {padding:5px;position:relative;display:inline-flex;min-height:45px;align-items:center;justify-content:center;color:#777;text-align:center;font-size:14px;box-sizing:border-box;border-radius:6px;border:1px solid #dedede;cursor:pointer;transition:color .3s,border-color .3s,background-color .3s;}
.grid-item:hover {color:#ea641c;border-color:#fbb92a;}
.grid-item.selected {font-weight:bold;color:#ea641c;border-color:#fbb92a;background:#fcf3de;}
.grid-item .custom-int {appearance:none;width:100%;height:100%;border:none;color:inherit;text-align:center;font-size:inherit;background:transparent;outline:none;}
.grid-item .tips {position:absolute;top:0;right:0;transform:translate(0,-50%);}
.grid-item .tips i {padding:0 5px;font-size:12px;font-weight:normal;color:#fff;background:#f9394a;border-radius:0 5px;}
.grid-item .tips i + i {margin-left:3px;}
.input-number {width:180px;height:100%;display:flex;border:1px solid #dedede;border-radius:6px;background:#fff;}
.input-number:hover {border-color:#fbb92a;}
.input-number .fa {display:inline-flex;width:40px;color:#333;font-size:14px;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;}
.input-number .fa-minus {border-radius:6px 0 0 6px;}
.input-number .fa-plus {border-radius:0 6px 6px 0;}
.input-number .fa:hover {color:#ea641c;background-color:#fcf3de;}
.input-number .fa.disabled {color:#777;cursor:not-allowed;}
.input-number .fa.disabled:hover {background:#f5f5f5;}
.input-number .int {flex:1;overflow:hidden;}
.input-number .int input {width:100%;height:100%;text-align:center;color:#000;font-size:14px;border:none;outline:none;}
/* Chrome,Safari,Edge,Opera */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
/* Firefox */input[type=number] {-moz-appearance:textfield;}
.now-price {font-size:25px;color:#000;}
.origin-price {font-size:15px;color:#838383;text-decoration:line-through;}
.payment-price {display:inline-block;width:350px;font-size:22px;font-weight:bold;color:#000;}
.price-value {color:#ff522e;}
.pay-btn {margin:0;width:240px;line-height:70px;font-size:24px;font-weight:bold;color:#333;text-align:center;background:#fbb92a;border-radius:40px;border:none;transition:background-color .3s;}
.pay-btn:hover {background:#f9cd6d;}
.pay-btn:active {background:#e39c03;transition:background-color .1s;}
/** footer **/.footer {display:flex;gap:40px;margin:40px 0;background:transparent;}
.footer aside {display:block;width:315px;padding:0;margin:0;border-radius:6px;box-sizing:border-box;background:#fff;box-shadow:0px 5px 15px 0px rgba(0,0,0,0.1);}
.aside-header {display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 20px;color:#000;font-size:16px;font-weight:bold;}
.aside-header a {float:right;font-size:12px;color:#616161;text-decoration:none;vertical-align:bottom;}
.aside-header a:hover {color:#fbb92a;}
.pd-list {display:grid;margin:20px 0 30px;gap:30px 20px;grid-template-columns:repeat(3,1fr);padding:0 20px;}
.pd-list li {text-align:center;overflow:hidden;}
.pd-list li a {display:block;font-size:14px;text-decoration:none;}
.pd-list li a p {margin:10px 0 0 0;}
.pd-list li img {width:100%;aspect-ratio:1;border-radius:6px;}
.footer-main {flex:1;}
.product-info {padding:0;margin:0;border-radius:6px;box-sizing:border-box;background:#fff;box-shadow:0px 5px 15px 0px rgba(0,0,0,0.1);}
.product-info--header {display:flex;align-items:center;height:50px;color:#333;font-size:20px;line-height:50px;background:#f5f5f5;}
.product-info--header > div {height:100%;padding:0 20px;border-top:2px solid transparent;cursor:pointer;}
.product-info--header > div:hover {color:#fbb92a;}
.product-info--header .active {color:#fbb92a;background:#fff;border-top-color:currentColor;}
.justify-content-end{padding-top:12px}
.pr-des-inner {min-height:500px;padding:45px;}
.pr-des-inner p{padding-top:8px;}
.pr-des-inner img {width: auto;border-radius: 10px; margin-top: 10px; max-width: 100%;box-shadow: 0px -2px 13px 0px #f1f1f1;}
.pr-des-inner a{color: #199bf4;}
.game-recommend .title {margin:40px 0 20px;font-size:20px;color:#000;font-weight:bold;}
.game-recommend .list {display:grid;gap:0px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
.game-recommend a {display:block;font-size:14px;text-align:center;}
.game-recommend a img {width:70px;height:70px;border-radius:10px;}
.game-recommend p {margin:10px 0;text-align:center;}
.pr-comment-box {display:none;padding:40px;min-height:500px;}
.pr-comment li {display:flex;padding:0 0 10px;margin:0 0 15px;border-bottom:1px solid #eee;}
.pr-comment li:last-child {border:none;margin:0;padding:0;}
.comment-info {flex:1;}
.user-info {display:flex;margin:0 0 15px;}
.usr-inner {display:flex;flex:1;}
.usr-left {flex:1;}
.usr-ico {width:50px;height:50px;margin:0 15px 0 0;border-radius:100%;background:#eee center / 100% 100% no-repeat;}
.usr-name {color:#333;font-size:14px;margin:0 0 5px;}
.usr-score i {font-size:12px;color:#eee;}
.usr-score i.light {color:#e39c03;}
.evaluation-time {color:#9d9fb8;font-size:12px;}
.usr-comment {margin:10px 0;font-size:14px;color:#333;}
.comment-reply {padding:10px;border-radius:10px;background:#eee;}
.comment-reply .reply-user {margin:0 0 5px;font-size:12px;color:#333;}
.comment-reply .reply-content {color:#41435d;font-size:14px;}
.on-pro {min-height:300px;display:flex;align-items:center;justify-content:center;opacity:0.6;}
.on-pro img {width:100px;}
.on-pro p {font-size:18px;padding-left:12px}

.prc-activity{padding:70px;background:linear-gradient(180deg,#ffffff5c,#dbe9f85c);border: 1px solid #dbe9f8;border-radius: 20px;position: relative;}
.prc-activity .vj-pic{position: absolute;top: 0;left: 0;width: 100%;border-radius: 20px;}

@media screen and (max-width:1200px) {
.payment-price {width:100%;}
.pay-btn {width:100%;margin:10px 0 0;}
}
@media screen and (max-width:992px) {
  .product-img .product {width:150px;}
.product-img .remind {width:250px;}
.footer aside {width:200px;}
.product-img .remind li{font-size: 12px;}
.product-img{padding:0px 8px}
.product-form {padding: 27px 0;}
.footer {margin: 15px 0;gap: 15px;}
}
@media screen and (max-width:820px) {
.product-form {margin:10px 15px;padding:15px 0;flex-direction:column;}
.product-img .product {width:100px;}
.product-img .remind {width:304px;}
.buy-setting {margin:0 15px;}
.buy-setting h1 {font-size:20px;text-align:center;}
.subtitle {text-align:center;}
.form-lists li {flex-direction:column;margin:10px 0;}
.form-lists .title {flex:1;}
.grid-area {grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
.payment-info {position:fixed;width:100%;bottom:0;left:0;padding:10px;background:#fff;border-top:1px solid #eee;}
@supports (backdrop-filter:initial) {.payment-info {backdrop-filter:saturate(180%) blur(20px);background:rgba(255,255,255,.85);}
}
.payment-price {width:50%;}
.payment-price span:nth-child(1) {display:none;}
.pay-btn {margin:10px 0 0;width:100%;font-size:16px;line-height:2.5;}
li.number {position:fixed;right:0;width:40%;bottom:40px;padding:10px;z-index:10;}
li.number .title {display:none;}
.input-number {width:100%;height:35px;border:none;}
.footer {padding:0 15px;}
.footer aside {display:none;}
.pr-comment-box {padding:20px;}
.pr-des-inner {padding:30px;}
.pagination {justify-content:center!important;}
.pagination li:nth-last-child(1),.pagination li:nth-last-child(2),.pagination li:nth-last-child(3),.pagination li:nth-child(1),.pagination li:nth-child(2) {display:none;}
}

/* mobile */
@media screen and (max-width:768px){
.header-top{display:none;}
.com-nav{display: block;}
.container .mt-3{display:none;}
.product-form::before,
.product-form::after{display: none;}
.product-form {margin: 0;padding: 15px 0;flex-direction: column;border: 0px solid #fff;background:#fff;box-shadow: none;border-radius: initial;}
.buy-setting { margin: 0;}
.product-img {position: relative;z-index: 2;display: flex;padding: 0 15px;flex-direction: column;align-items: flex-start;border-bottom: 10px solid #f2f4f5;}
.product-img .product {width: 60px; height: 60px;}
.buy-setting h1 {font-size: 17px;text-align: left;position: absolute;top: -155px;height: 60px;padding-left: 92px; padding-right: 18px;width: 100%;align-items: center; display: flex;}
.product-img .remind {border-top: 1px solid #ddd;padding-top: 18px;width: 100%;    margin: 20px 0;}
.form-lists {padding:0px 15px}
.form-lists .price{display: none;}
.form-lists .title {margin: 0px 10px 4px 0;font-size: 14px; color: #333;}
.grid-area{gap: 6px;}
.subtitle{display: none;}
.footer {padding: 0 0px;margin-top: 10px;}
.product-info--header{font-size: 16px;display: flex;height: 38px;line-height: 36px;}
.product-info--header > div{flex: 1;    text-align: center;}
.payment-info {box-shadow: 0px 0px 10px rgb(34 25 25 / 20%);}
.input-number .int input{    background: #f5f5f5;}
.input-number .fa-minus{background: #f5f5f5;}
.input-number .fa-plus{background: #f5f5f5;}
.pr-des-inner {padding: 15px;font-size: 14px;}
.game-recommend{display: none;}
.product-info{padding-bottom: 50px;box-shadow:none;border-radius: 0;}
.product-img .remind li{font-size: 12px;}
}