.iconFlag {
    width: 24px; 
    height: 24px;
    background: url('csprites.png') no-repeat;
    display: inline-block;
	margin-right: 12px;
}

.bg-flag_01 {background-position: -10px -10px;}
.bg-flag_02 {background-position: -54px -10px;}
.bg-flag_03 {background-position: -98px -10px;}
.bg-flag_04 {background-position: -142px -10px;}
.bg-flag_05 {background-position: -186px -10px;}
.bg-flag_06 {background-position: -230px -10px;}
.bg-flag_07 {background-position: -274px -10px;}
.bg-flag_08 {background-position: -318px -10px;}
.bg-flag_09 {background-position: -362px -10px;}
.bg-flag_10 {background-position: -406px -10px;}
.bg-flag_11 {background-position: -450px -10px;}
.bg-flag_12 {background-position: -494px -10px;}
.bg-flag_13 {background-position: -538px -10px;}
.bg-flag_14 {background-position: -10px -48px;}
.bg-flag_15 {background-position: -55px -48px;}
.bg-flag_16 {background-position: -99px -48px;}
.bg-flag_17 {background-position: -143px -48px;}
.bg-flag_18 {background-position: -185px -48px;}

.iconMedia {
    width: 24px; 
    height: 24px;
    background: url('csprites.png') no-repeat;
    display: inline-block;
}

.bg-media_01 {background-position: -10px -88px;}
.bg-media_02 {background-position: -54px -88px;}
.bg-media_03 {background-position: -98px -88px;}
.bg-media_04 {background-position: -142px -88px;}
.bg-media_05 {background-position: -186px -88px;}
.bg-media_06 {background-position: -230px -88px;}

.iconStar {
    width: 150px; 
    height: 24px;
    background: url('csprites.png') no-repeat;
    display: inline-block;
}

.bg-star_00 {background-position: -5px -128px;}
.bg-star_01 {background-position: -5px -152px;}
.bg-star_02 {background-position: -155px -128px;}
.bg-star_03 {background-position: -155px -152px;}
.bg-star_04 {background-position: -305px -128px;}
.bg-star_05 {background-position: -305px -152px;}
.bg-star_06 {background-position: -455px -128px;}


.product_listMain .layer2 .layer2Right .form-submit {
    border: none;
    display: block;
    text-align: center;
    width: 173px;
    height: 44px;
    line-height: 28px;
    font-size: 14px;
    color: #fff;
    border-radius: 22px;
    color: #fff;
    background: #0071e3;
}

.respForm {
    padding: 3.125em;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 5px 5px 15px -1px rgba(0, 0, 0, 0.75);
    background-color: #eff7fc;
    width: 260px;
}


#overlay {
    position: fixed; /* 固定定位，覆盖整个页面 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    z-index: 999; /* 确保遮罩层在其他内容上方 */
  }
  
  /* 表单容器样式 */
  #form-popup {
    position: fixed; /* 固定定位，方便居中 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 将元素的中心点移动到屏幕中心 */
    background-color: white; /* 表单背景颜色 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
    z-index: 1000; /* 确保表单在遮罩层上方 */
  }


/* 定义一个表单容器 */
.form_container {
  width: 450px; /* 宽度自适应内容 */
  height: 700px; /* 高度自适应内容 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  gap: 15px; /* 定义子元素之间的间距 */
  padding: 50px 40px 20px 40px; /* 内边距 */
  
  box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
    0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 11px; /* 添加圆角 */
  font-family: "Inter", sans-serif; /* 使用字体 */
  
  background-color:#eff7fc;
}

/* 定义一个标题容器 */
.title_container {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  gap: 10px; /* 定义子元素之间的间距 */
  min-width:280px;
}

/* 定义标题 */
.title {
  margin: 0; /* 外边距 */
  font-size: 20px; /* 字体大小 */
  font-weight: 700; /* 字体粗细 */
  color: #212121; /* 字体颜色 */
}

/* 子标题样式 */
.subtitle {
  font-size: 18px;
  max-width: 80%;
  text-align: center;
  line-height: 1.1rem;
  color: #8B8E98; /* 文字颜色 */
}

/* 输入框容器样式 */
.input_container {
    margin-top: 20px;

  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 子元素之间的间隔 */
}

/* 输入框标签样式 */
.input_label {
  font-size: 18px;
  color: #8B8E98; /* 文字颜色 */
  font-weight: 600;
}

/* 输入框样式 */
.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 10px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5; /* 边框颜色 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */
          drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 过渡效果 */
}

/* 输入框获取焦点时的样式 */
.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424; /* 阴影 */
  background-color: transparent;
}


.messageBox{
  width: auto;
  height: 80px;
  padding: 10px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5; /* 边框颜色 */
  filter: drop-shadow(0px 1px 0px #efefef) /* 阴影 */
          drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* 过渡效果 */
}

/* 登录按钮样式 */
.sign-in_btn {
  margin-top:15px;
  width: 60%;
  height: 40px;
  border: 0;
  margin-left: 20%;
  background: #115DFC; /* 背景颜色 */
  border-radius: 7px;
  outline: none;
  color: #ffffff; /* 文字颜色 */
  cursor: pointer;
}