* {
  margin: 0;
  padding: 0;
  color: #222222;
  --primary-color: #FF374D;
}
body {
  background-color: #f6f6f6;
}
.top-announce {
	display: none !important;
}
.header {
	top: 0  !important;
}
label {
margin-bottom: 0;
}
.calculator_container {
	margin-top: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  backdrop-filter: blur(40px) saturate(100%);
background: #f6f6f6;
}
.calculator_form {
  width: 1440px;
  padding: 32px;
  border-radius: 16px;
  background-color: #FFFFFF;
}
.calculator_form .cal_title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 2px solid #F9F9F9;
}
.calculator_form .cal_title .title {
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
}
.calculator_form .cal_title .desc {
  font-size: 14px;
  line-height: 22px;
  color: #666666;
}

.form_container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}
.form_container  .form_item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.form_item .label-col {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: 22px;
  width: 93px;
}
.label-col .require {
  color: var(--primary-color);
}
.search_container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* width: 264px; */
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: #F8F8F8;
}
.input-warp {
  width: 100%;
}
.input-warp input {
  width: calc(100% - 16px) !important;
}
.calculator_container .calculator_form .form_container input {
  background-color: #f8f8f8;
}
.selecticon {
  height: 16px;
  width: 16px;
  display: block;
}
.hide {
  display: none;
}

.country_select_dropdown,.city_select_dropdown,.second_dropdown {
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  max-height: 300px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 .2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
  overflow: hidden;
}
.country_select_list,.city_select_list {
  max-height: 300px;
  overflow-y: auto;
}
.country_option,.city_option {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country_select_dropdown.active {
  display: block;
}

.arrow {
  position: absolute;
  z-index: 999;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  display: none;
}
.arrow.active {
  display: block;
}
.country_option:hover {
  background-color: #f5f7fa;
}


.second_dropdown {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 11;
  left: 216px;
}

.city_select_dropdown.active {
  display: block;
}
.second_dropdown.active {
  display: block;
}

.second_list {
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
}

.second_dropdown {
  background-color: #fff;
  border-radius: 8px;
  width: 200px;
}

.city_option:hover {
  background-color: #f5f7fa;
}

.country_option.selected {
  color: var(--primary-color);
  font-weight: 600;
  background-color: #f5f7fa;
}
.city_option.selected {
  color: var(--primary-color);
  font-weight: 600;
  background-color: #f5f7fa;
}




.form_item .weight_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 264px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: #F8F8F8;
}
.volume_list {
  display: flex;
  align-items: center;
  gap: 16px;
}
.volume_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 160px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: #F8F8F8;
}
.volume_container input {
  width: 108px;
}
.volume_list .mul {
  font-size: 14px;
  line-height: 18px;
}
.def_vol .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
.def_vol .title .tip {
  font-size: 14px;
  line-height: 18px;
  color: var(--primary-color);
}

.def_vol_container {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.def_vol_container .def_vol_item {
  position: relative;
  width: 332px;
  height: 104px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: -4px -4px 8px 0px #FFFFFF,2px 2px 10px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.def_img {
  height: 80px;
  width: 80px;
}
.vol_des {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vol_des .size {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}
.vol_des .des {
  font-size: 14px;
  line-height: 18px;
  color: #666666
}
.vol_des .des .num {
  color: var(--primary-color);
  margin: 0 4px;
}
.def_vol_item .selected {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 52px;
  height: 44px;
}
.def_vol_item .selected img{
  height: 100%;
  width: 100%;
}

.more_info {
  display: flex;
  flex-direction: column;
}
.more_info .title-col {
  display: flex;
  align-items: center;
  gap: 4px;
} 
.more_info .title-col .title {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
.more_info .title-col .icon {
  height: 12px;
  width: 12px;
}
.more_info .title-col .icon img{
  height: 100%;
  width: 100%;
  display: block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.more_info .title-col .icon .active {
  transform: rotate(180deg);
}

.more_form {
  /* 保持布局但初始隐藏，通过 max-height + opacity 动画展开 */
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px 16px;
}
.more_form.active {
  /* 设置为比实际内容略大的值以确保能完全展开；如果内容高度不固定，可增大此值 */
  margin-top: 24px;
  display: flex !important; 
}

.more_form .more_item {
  width: 448px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.more_item_special {
  gap: 16px !important;
}
.more_form .more_item .label{ 
  font-size: 14px;
  line-height: 22px;
  color: #666666;
}
.more_form .price_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 252px;
  height: 40px;
  padding: 0px 12px;
  gap: 8px;
  border-radius: 8px;
  background: #F8F8F8;
}

.more_form .battery_container {
  display: flex;
  align-items: center;
  gap: 48px;
}
.more_form .battery_container .battery_item{ 
  display: flex;
  align-items: center;
  gap: 4px;
}

.calculator_container .more_item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #aaa;
  border-radius: 50%;
  position: relative;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  background-color: #fff;
}
.calculator_container .more_item input[type="radio"]:checked {
  border-color: var(--primary-color);
}
.calculator_container .more_item input[type="radio"]:checked:after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--primary-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.calculator_container .calculator_form .more_item .radio_lab {
  width: auto; 
  cursor: pointer;
}
.favorite_title {
  display: flex;
  align-items: center;
  gap: 4px;
}
.favorite_title img{ 
  height: 16px;
  width: 16px;
  display: block;
}
.more_item .favorite_container {
  display: flex;
  align-items: center;
  gap: 40px;
}
.favorite_item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal_submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal_submit .buttom {
  width: 160px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #F74054;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
}

.cal_res { 
  display: none;
  width: 1440px;
  background-color: #fff;
  flex-direction: column;
  padding: 32px;
  gap: 32px;
  border-radius: 16px;
}
.cal_res.active{
  display: flex;
} 
.cal_res .res_title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal_res .res_title .title{
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
}
.cal_res .res_title .desc{
  font-size: 14px;
  line-height: 14px;
  color: #666666;
}
.best_container {
  display: none;
  flex-direction: column;
}
.best_container.active {
  display: flex;
}
.best_container .best_title {
  display: flex;
  align-items: center;
  gap: 4px;
}
.best_container .best_title .title{
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #FF374D;
}
.best_container .best_title img{
  height: 20px;
  width: 20px;
}
.best_container .res_item {
  display: flex;
  flex-direction: column;
  padding: 0px 24px;
  background: #F9F9F9;
  border-radius: 12px;
  margin-top: 16px;
}
.base_info {
  display: flex;
  align-items: center;
  padding: 16px 0;
  gap: 16px;
}
.base_info .item_logo {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 400px;
}
.base_info .item_logo img{
  height: 60px;
  width: 60px;
  display: block;
}
.base_info .item_logo .item_name {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 316px;
}
.item_logo .item_name .item_title{
  font-size: 14px;
  line-height: 18px;
  color: #999999;
}
.item_logo .item_name .item_value{
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #222222;
  display: flex;
  align-items: center;
  gap: 8px;
}
.item_name .item_value .sub {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 16px;
  color: #FFFFFF;
  border-radius: 4px;
  background: #1D8DF6;
}

.base_info .item_time {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 160px;
}
.base_info .item_time .item_title {
  font-size: 14px;
  line-height: 18px;
  color: #999999;
}
.base_info .item_time .item_value {
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #222222;
}
.item_time .item_value .unit {
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #222222;
}
.base_info .item_fee {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 656px;
}
.base_info .item_fee .item_title {
  font-size: 14px;
  line-height: 18px;
  color: #AAAAAA;
  display: flex;
  align-items: center;
}
.base_info .item_fee .item_title img{
  height: 12px;
  width: 12px;
  transition: transform 0.3s ease;
}
.item_title .active {
  transform: rotate(180deg);
}

.base_info .item_fee .item_value {
  display: flex;
  align-items: center;  
  gap: 4px;
}
.jpnum {
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #222222;
}
.jpunit {
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #222222;
}
.equal {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  color: #999999;
}
.zhnum {
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #FF374D;
}
.zhunit {
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #FF374D;
}
.base_info .item_score {
  width: 64px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}
.base_info .item_score .item_title {
  font-size: 14px;
  line-height: 18px;
  color: #222222;
}
.base_info .item_score .item_value {
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #FF374D;
}

.detail_info {
  display: none;
}
.detail_info.active {
  display: block;
}
.detail_info .white_line { 
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}
.detail_info .item_detail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 0;
  gap: 48px;
}
.detail_info .item_detail .fee {
  font-size: 14px;
  line-height: 18px;
}
.item_detail .fee .label {
  color: #999999;
}
.other_container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.other_container .res_item {
  background: #F9F9F9;
  padding: 0 24px;
}


.none_res {
  display: none;
}


.cal_description {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc(100vw - 48px);
  background-color: #fff;
  border-radius: 16px;
  padding: 32px 16px;
}
.cal_description .title {
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #FF374D;
}
.cal_description .cal_main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal_description .cal_main .item {
  font-size: 14px;
  line-height: 22px;
  color: #222222;
}
.cal_description .cal_main .item a {
  color: #FF374D;
  word-break: break-all;
}
@media (min-width: 1920px) {
  .search_container {
    width: 264px;
  }
  .second_dropdown {
    left: 280px;
  }
  .cal_description { 
    width: 1440px;
  }
}
@media (min-width: 1440px) and (max-width:1919px){
  .calculator_form { 
    width: clamp(1392px, calc(1392px + (100vw - 1440px) * 48 / 479), 1440px);
  }
  .search_container {
    width: 264px;
  }
  .second_dropdown {
    left: 280px;
  }
  .def_vol_container .def_vol_item {
    width: clamp(320px, calc(320px + (100vw - 1440px) * 12 / 479), 332px);
  }
  .more_form .more_item {
    width: clamp(432px, calc(432px + (100vw - 1440px) * 16 / 480), 448px);
  }
  .cal_description { 
    width: clamp(1392px, calc(1392px + (100vw - 1440px) * 48 / 480), 1440px);
  }
  .cal_res {
    width: clamp(1392px, calc(1392px + (100vw - 1440px) * 48 / 480), 1440px);
  }
}
@media (min-width: 1280px) and (max-width:1439px){
  .calculator_form { 
    width: clamp(1232px, calc(1232px + (100vw - 1280px) * 160 / 159), 1392px);
  }
  .search_container {
    width: 264px;
  }
  .second_dropdown {
    left: 280px;
  }
  .def_vol_container .def_vol_item {
    width: clamp(280px, calc(280px + (100vw - 1280px) * 40 / 159), 320px);
  }
  .more_form .more_item {
    width: clamp(378px, calc(378px + (100vw - 1280px) * 54 / 160), 432px);
  }
  .cal_res {
    width: clamp(1232px, calc(1232px + (100vw - 1280px) * 160 / 160), 1392px);
  }
}
@media (min-width: 1024px) and (max-width:1279px){
  .calculator_form { 
    width: clamp(976px, calc(976px + (100vw - 1024px) * 256 / 255), 1232px);
  }
  .search_container {
    width: 264px;
  }
  .second_dropdown {
    left: 280px;
  }
  .def_vol_container .def_vol_item {
    width: 293px;
  }
  .more_form .more_item {
    width: 448px;
  }
  .cal_res {
    width: clamp(976px, calc(976px + (100vw - 1024px) * 256 / 256), 1232px);
  }
  .best_container .res_item {
    padding: 0px clamp(16px, calc(16px + (100vw - 1024px) * 8 / 256), 24px);
  }
  .other_container .res_item {
    padding: 0px clamp(16px, calc(16px + (100vw - 1024px) * 8 / 256), 24px);
  }
  .base_info {
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .base_info .item_logo {
    display: flex;
    align-items: center;
    gap: 24px;
    width: clamp(800px, calc(800px + (100vw - 1024px) * 156 / 255), 956px);
    order: 1;
  }
  .base_info .item_time {
    width: 120px;
    order: 3;
  }
  .base_info .item_fee {
    width: clamp(744px, calc(744px + (100vw - 1024px) * 100 / 255), 844px);
    order: 4;
    align-items: end;
  }
  .item_score {
    order: 2;
  }
  .detail_info .item_detail {
    gap: 24px;
  }
}

@media (min-width: 960px) and (max-width:1023px){
  .calculator_form { 
    width: clamp(912px, calc(912px + (100vw - 960px) * 64 / 63), 976px);
  }
  .search_container {
    width: 264px;
  }
  .second_dropdown {
    left: 280px;
  }
  .def_vol_container .def_vol_item {
    width: clamp(272px, calc(272px + (100vw - 960px) * 21 / 64), 293px);
  }
  .more_form .more_item {
    width: clamp(416px, calc(416px + (100vw - 960px) * 32 / 64), 448px);
  }

  .cal_res {
    width: clamp(912px, calc(912px + (100vw - 960px) * 64 / 64), 976px);
  }
  .best_container .res_item {
    padding: 0px 16px;
  }
  .other_container .res_item {
    padding: 0px 16px;
  }
  .base_info {
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .base_info .item_logo {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 736px;
    order: 1;
  }
  .base_info .item_time {
    width: 120px;
    order: 3;
  }
  .base_info .item_fee {
    width: 680px;
    order: 4;
    align-items: end;
  }
  .item_score {
    order: 2;
  }
  .detail_info .item_detail {
    gap: 24px;
  }
}

@media (min-width: 840px) and (max-width:959px){
  .calculator_form { 
    width: clamp(792px, calc(792px + (100vw - 840px) * 120 / 119), 912px);
  }
  .search_container {
    width: clamp(210px, calc(210px + (100vw - 840px) * 54 / 120), 264px);
  }
  .second_dropdown {
    left: clamp(216px, calc(216px + (100vw - 840px) * 64 / 120), 280px);
  }
  .form_item .weight_container {
    width: clamp(210px, calc(210px + (100vw - 840px) * 54 / 120), 264px);
  }
  .def_vol_container .def_vol_item {
    width: 356px;
  }
  .more_form .more_item {
    width: clamp(356px, calc(356px + (100vw - 840px) * 60 / 120), 416px);
  }

  .cal_res {
    width: clamp(792px, calc(792px + (100vw - 840px) * 120 / 120), 912px);
  }
  .best_container .res_item {
    padding: 0px 16px;
  }
  .other_container .res_item {
    padding: 0px 16px;
  }
  .base_info {
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .base_info .item_logo {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 616px;
    order: 1;
  }
  .base_info .item_time {
    width: 120px;
    order: 3;
  }
  .base_info .item_fee {
    width: 560px;
    order: 4;
    align-items: end;
  }
  .item_score {
    order: 2;
  }
  .detail_info .item_detail {
    gap: 24px;
  }
}

/* 768px - 平板竖向 */
@media (min-width: 768px) and (max-width:839px){
  .calculator_form { 
    width: clamp(720px, calc(720px + (100vw - 768px) * 72 / 71), 792px);
    padding: clamp(24px, calc(24px + (100vw - 768px) * 8 / 71), 32px);
  }
  .calculator_form .cal_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .second_dropdown {
    width: clamp(150px, calc(150px + (100vw - 768px) * 50 / 72), 200px);
  }
  .form_item .weight_container {
    width: 210px;
  }
  .def_vol_container .def_vol_item {
    width: clamp(328px, calc(328px + (100vw - 768px) * 28 / 72), 356px);
  }
  .more_form .more_item {
    width: clamp(328px, calc(328px + (100vw - 768px) * 28 / 72), 356px);
  }

  .cal_res {
    width: clamp(720px, calc(720px + (100vw - 768px) * 72 / 72), 792px);
    padding: clamp(24px, calc(24px + (100vw - 768px) * 8 / 72), 32px);
  }
  .res_title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .best_container .res_item {
    padding: 0px 16px;
  }
  .other_container .res_item {
    padding: 0px 16px;
  }
  .base_info {
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .base_info .item_logo {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 560px;
    order: 1;
  }
  .base_info .item_time {
    width: 120px;
    order: 3;
  }
  .base_info .item_fee {
    width: 504px;
    order: 4;
    align-items: end;
  }
  .item_score {
    order: 2;
  }
  .detail_info .item_detail {
    gap: 24px;
  }
}

/* 600px - 大型手机 */
@media (min-width: 600px) and (max-width:767px){
  .calculator_form { 
    width: clamp(552px, calc(552px + (100vw - 600px) * 168 / 167), 720px);
    padding: 24px;
  }
  .calculator_form .cal_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .form_container  .form_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .search_container {
    width: calc(100vw - 96px) !important;
  }
  .second_dropdown {
    left: calc( (100vw - 96px) / 2);
    width: calc( (100vw - 96px) / 2 ) !important;
  }
  .city_select_dropdown {
    width: calc( (100vw - 96px) / 2 ) !important;
  }
  .form_item .weight_container {
    width: calc(100vw - 96px) !important;
  }
  .volume_container { 
    width: clamp(140px, calc(140px + (100vw - 600px) * 20 / 167), 160px);
  }
  .volume_container input {
    width: clamp(98px, calc(98px + (100vw - 600px) * 10 / 167), 108px);
  }
  .def_vol_container .def_vol_item {
    width: calc(100vw - 96px)
  }
  .more_form .more_item {
    width: calc(100vw - 96px)
  }

  .cal_res {
    width: clamp(552px, calc(552px + (100vw - 600px) * 168 / 168), 720px);
    padding: 24px;
  }
  .res_title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .best_container .res_item {
    padding: 0px 16px;
  }
  .other_container .res_item {
    padding: 0px 16px;
  }
  .base_info {
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .base_info .item_logo {
    display: flex;
    align-items: center;
    gap: 24px;
    width: calc( 100vw - 96px - 16px - 32px - 64px);
    order: 1;
  }
  .base_info .item_time {
    width: 120px;
    order: 3;
  }
  .base_info .item_fee {
    width: calc( 100vw - 96px - 16px - 32px - 120px);
    order: 4;
    align-items: end;
  }
  .item_score {
    order: 2;
  }
  .detail_info .item_detail {
    gap: 16px 24px;
    flex-wrap: wrap;
  }
}

/* 480px - 普通手机 */
@media (min-width: 480px) and (max-width:599px){
.base_info .item_score .item_value {
font-size:16px;
line-height: 22px;
}
  .calculator_form { 
    width: clamp(448px, calc(448px + (100vw - 480px) * 104 / 119), 552px);
    padding: clamp(16px, calc(16px + (100vw - 480px) * 8 / 119), 24px);
  }
  .calculator_form .cal_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .form_container  .form_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .search_container {
    width: calc(100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 119), 96px)) !important;
  }
  .second_dropdown {
    left: calc( (100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 119), 96px)) / 2);
    width: calc( (100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 119), 96px)) / 2 ) !important;
  }
  .city_select_dropdown {
    width: calc( (100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 119), 96px)) / 2 ) !important;
  }
  .form_item .weight_container {
    width: calc(100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 119), 96px)) !important;
  }
  .volume_container { 
    width: clamp(120px, calc(120px + (100vw - 480px) * 20 / 119), 140px);
  }
  .volume_container input {
    width: clamp(80px, calc(80px + (100vw - 480px) * 18 / 119), 98px);
  }
  .volume_list {
    gap: clamp(8px, calc(8px + (100vw - 480px) * 4 / 119), 16px);
  }
  .def_vol_container .def_vol_item {
    width: calc(100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 120), 96px));
  }
  .more_form .more_item {
    width: calc(100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 120), 96px));
  }
  .cal_description { 
    width: calc(100vw - clamp(32px, calc(32px + (100vw - 480px) * 16 / 120), 48px));
  }

  .cal_res {
    width: clamp(448px, calc(448px + (100vw - 480px) * 104 / 120), 552px);
    padding: clamp(16px, calc(16px + (100vw - 480px) * 8 / 120), 24px);
  }
  .res_title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .best_container .res_item {
    padding: 0px 16px;
  }
  .other_container .res_item {
    padding: 0px 16px;
  }
  .base_info {
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .base_info .item_logo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: clamp(292px, calc(292px + (100vw - 480px) * 50 / 120), 342px);
    order: 1;
  }
  .item_logo .item_name .item_value{
    font-size: clamp(16px, calc(16px + (100vw - 480px) * 8 / 120), 24px);
    line-height: clamp(22px, calc(22px + (100vw - 480px) * 10 / 120), 32px);
  }
  .base_info .item_time {
    width: 120px;
    order: 3;
  }
  .base_info .item_fee {
    width: clamp(236px, calc(236px + (100vw - 480px) * 80 / 120), 316px);
    order: 4;
    align-items: end;
  }
  .item_score {
    order: 2;
  }
  .detail_info .item_detail {
    gap: 16px 24px;
    flex-wrap: wrap;
  }
}

/* 360px - 小屏手机 */
@media (max-width:479px){
.base_info .item_score .item_value {
font-size:16px;
line-height: 22px;
}
  .calculator_form { 
    width: clamp(328px, calc(328px + (100vw - 360px) * 120 / 119), 448px);
    padding: 16px;
  }
  .calculator_form .cal_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .form_container  .form_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .search_container {
    width: calc(100vw - 64px) !important;
  }
  .second_dropdown {
    left: calc( (100vw - 64px) / 2);
    width: calc( (100vw - 64px) / 2 ) !important;
  }
  .city_select_dropdown {
    width: calc( (100vw - 64px) / 2 ) !important;
  }
  .form_item .weight_container {
    width: calc(100vw - clamp(64px, calc(64px + (100vw - 480px) * 32 / 119), 96px)) !important;
  }
  .volume_container { 
    width: clamp(80px, calc(80px + (100vw - 360px) * 40 / 119), 120px);
  }
  .volume_container input {
    width: clamp(40px, calc(40px + (100vw - 360px) * 40 / 119), 80px);
  }
  .volume_list {
    gap: 8px;
  }
  .def_vol_container .def_vol_item {
    width: calc(100vw - 64px);
  }
  .more_form .more_item {
    width: calc(100vw - 64px);
  }
  .cal_description { 
    width: calc(100vw - 48px);
  }

  .cal_res {
    width: clamp(328px, calc(328px + (100vw - 360px) * 120 / 120), 448px);
    padding: 12px;
  }
  .res_title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .best_container .res_item {
    padding: 0px 16px;
  }
  .other_container .res_item {
    padding: 0px 16px;
  }
  .base_info {
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 24px 16px;
  }
  .base_info .item_logo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100vw - 88px - 16px - 64px);
    order: 1;
  }
  .item_logo .item_name .item_value{
    font-size: clamp(16px, calc(16px + (100vw - 480px) * 8 / 120), 24px);
    line-height: clamp(22px, calc(22px + (100vw - 480px) * 10 / 120), 32px);
		 flex-wrap: wrap;
  }
  .base_info .item_time {
    width: 90px;
    order: 3;
  }
  .base_info .item_fee {
    width: calc(100vw - 88px - 16px - 90px);
    order: 4;
    align-items: end;
  }
  .item_score {
    order: 2;
  }
  .detail_info .item_detail {
    gap: 16px 24px;
    flex-wrap: wrap;
  }
  .base_info .item_time .item_value {
    font-size: 16px;
    line-height: 22px;
  }
  .jpnum {
    font-size: 16px;
    line-height: 22px;
  }
  .jpunit {
    font-size: 14px;
    line-height: 18px;
  }
  .zhnum {
    font-size: 16px;
    line-height: 22px;
  }
  .zhunit {
    font-size: 14px;
    line-height: 18px;
  }
  .msg-mask .msg-cot {
    width: 312px !important;
  }
}


.msg-mask {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
    }
    .msg-mask .msg-cot {
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px;
        gap: 40px;
        border-radius: 16px;
        background: #FFFFFF;
        box-sizing: border-box;
    }
    .msg-mask .msg-cot .title {
        font-family: San Francisco Text;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: normal;
        color: #333333;
    }
    .msg-mask .msg-cot .msg {
        font-family: 苹方-简;
        font-size: 14px;
        font-weight: normal;
        line-height: 22px;
        text-align: center;
        letter-spacing: normal;
        color: #333333;
    }
    .msg-mask .msg-cot .btn {
        width: 132px;
        height: 40px;
        /* 自动布局 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px;

        border-radius: 20px;
        background: #F74054;

        font-size: 14px;
        font-weight: normal;
        line-height: normal;
        text-align: center;
        letter-spacing: normal;
        color: #FFFFFF;
        cursor: pointer;
    }