.screen {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  width : 100%;
  height: 2800px;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.screen .body-paints {
  position: absolute;
  width : 100%;
  height: 100%;
  top: 9px;
  left: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 24%) 0%, rgba(138, 187, 255, 0.526) 20%, rgb(168 191 251 / 50%) 50%, rgb(188 208 255) 80%, rgb(0 163 255 / 4%) 100%);
}

.screen .top-nav {
  display: flex;
  flex-direction: column;
  width : 1920px;;
  max-height: 110px;
  height: 99px;
  align-items: center;
  position: relative;
  background-color: #ffffffcc;
  backdrop-filter: blur(20px) brightness(100%);
  -webkit-backdrop-filter: blur(20px) brightness(100%);
}

.screen .title-container {
  flex-direction: column;
  max-width: 1024px;
  width: 1940px;
  padding: 0px 14px;
  margin-bottom: -11px;
  display: flex;
  height: 110px;
  align-items: flex-start;
  position: relative;
}

.screen .title-list {
  width: 996px;
  justify-content: space-between;
  padding: 0px 0.17px 0px 0px;
  display: flex;
  height: 110px;
  align-items: flex-start;
  position: relative;
}

.screen .logo-box {
  flex-direction: column;
  width: 120px;
  display: flex;
  height: 110px;
  align-items: flex-start;
  position: relative;
}

.screen .link-logo {
  display: flex;
  width: 120px;
  height: 110px;
  align-items: center;
  justify-content: center;
  padding: 0px 8px;
  position: relative;
}

.screen .logo-container {
  width: 100px;
  display: flex;
  height: 110px;
  align-items: flex-start;
  position: relative;
}

.screen .SVG {
  position: relative;
  width: 100px;
  height: 100px;
}

.screen .image-logo {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 8px;
  left: 5px;
  object-fit: cover;
}

.screen .empty-left {
  width: 180px;
  position: relative;
  height: 110px;
}

.screen .titlelogo-container {
  position: relative;
  width: 300px;
  height: 110px;
}

.screen .empty-right {
  width: 200px;
  position: relative;
  height: 110px;
}

.screen .wish {
  display: inline-flex;
  flex-direction: column;
  height: 110px;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.screen .wish-container {
  display: flex;
  flex-direction: column;
  width: 70px;
  height: 110px;
  align-items: flex-start;
  position: relative;
}

.screen .button-wishbag {
  position: relative;
  width: 50px;
  height: 110px;
  object-fit: cover;
}
  
.screen .main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding: 60px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background: linear-gradient(180deg, rgb(255 255 255 / 24%) 0%, rgba(138, 187, 255, 0.526) 20%, rgb(168 191 251 / 50%) 50%, rgb(188 208 255) 80%, rgb(0 163 255 / 4%) 100%);
}

.screen .top-button-list-box {
  display: flex;
  width: 1420px;
  height: 150px;
  align-items: center;
  justify-content: space-around;
  padding: 20px 300px;
  position: relative;
}


  
.screen .all-choose-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 108px;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  position: relative;
}
  
.screen .frame {
  position: relative;
  width: 180px;
  height: 48px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;

}

.screen .framea {
  position: relative;
  width: 145px;
  height: 48px;
  background-color: #ffffff;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
  
.screen .text-wrapper {
  position: absolute;
  width: 150px;
  top: 9px;
  left: 54px;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  color: #000000;
  align-items : center;
  font-size: var(--heading-font-size);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--heading-line-height);
  font-style: var(--heading-font-style);
}
  
.screen .div {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 12px;
  left: 18px;
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid;
  border-color: #000000;
}
  
.screen .text-wrapper-2 {
  position: absolute;
  width: 101px;
  top: 11px;
  left: 23px;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  color: #000000;
  font-size:  var(--heading-font-size);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--heading-line-height);
  font-style: var(--heading-font-style);
  text-align: center;
}
  
.screen .frame-2 {
  display: flex;
  flex-direction: column;
  width: 1920px;
  height: auto;
  align-items: center;
  gap: 10px;
  position: relative;
}
  
.screen .div-wrapper {
  display: flex;
  width: 180px;
  height: 58px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
  
.screen .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--title-page-font-family);
  font-weight: var(--title-page-font-weight);
  color: #000000;
  font-size: var(--title-page-font-size);
  text-align: center;
  letter-spacing: var(--title-page-letter-spacing);
  line-height: var(--title-page-line-height);
  white-space: nowrap;
  font-style: var(--title-page-font-style);
}
  
.screen .frame-3 {
  display: flex;
  width: 1920px;
  height: 402px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}
  
.screen .frame-4 {
  display: flex;
  width: 1900px;
  height: 382px;
  align-items: center;
  gap: 100px;
  padding: 10px 300px;
  position: relative;
  justify-content: center;
}
  
.screen .frame-5 {
  display: flex;
  flex-direction: column;
  width: 70px;
  height: 300px;
  align-items: center;
  gap: 10px;
  padding: 50px 10px;
  position: relative;
}
  
.screen .frame-6 {
  position: relative;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid;
  border-color: #000000;
}
  
.screen .choice-picture {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  border: 1px solid;
  border-radius: 5%;
  border-color: #020202;
}
  
.screen .choice-picture-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 280px;
  height: 280px;
}

.screen .choice-explain {
  width: 740px;
  height: 300px;
  border: 1px solid;
  border-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  border-radius: 5%;
  }
  
.screen .choice-explain-box {
  width: 720px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  padding: 10px;
  position: relative;
}
  
.screen .text-wrapper-4 {
  position: relative; 
  justify-content: start;
  align-items: start;
  width: 600px;
  height: 275px;
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: #191515;
  font-size: 28px;
  letter-spacing: 0;
  line-height: normal;
}

.button button {
  width : 50px;
  height : 45px;
  border-radius: 10px;
  border : 0.5px solid #757575;
}

.button button:hover {
  color : #0000ffcc;
  cursor:pointer;
}

.element {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: -1.00px;
  margin-bottom: 0px;
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 21.0px;
}

.choice-picture-box {
  width: 280px;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid;
  border-color: #d9d9d9;
}
  
.screen .frame-7 {
  display: flex;
  width: 1920px;
  height: 397px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
}
  
.screen .frame-8 {
  display: flex;
  width: 1900px;
  height: 382px;
  align-items: center;
  gap: 100px;
  padding: 10px 300px;
  position: relative;
  margin-top: -2.50px;
  margin-bottom: -2.50px;
}
  
.screen .footer {
  display: flex;
  flex-direction: column;
  width: 1920px;
  height: 180px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 25px 0px;
  position: relative;
  background-color: transparent;
}
  
.screen .all-choose-container-2 {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 130px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  position: relative;
}
  
.screen .frame-9 {
  display: flex;
  width: 120px;
  top: 9px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 32px;
  position: relative;
  background-color: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
}
  
.screen .text-wrapper-5 {
  position: relative;
  width: 93px;
  height: 29px;
  right: 5px;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  color: #000000;
  font-size: var(--heading-font-size);
  text-align: center; 
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--heading-line-height);
  white-space: nowrap;
  font-style: var(--heading-font-style);
}

.framea:hover {
  background-color: #f39ad2;
}
.frame-9:hover {
  background-color: #f39ad2;
}
.all-choose-container-2 a {
  text-decoration: none;
  color : black
} 
input {
  width: 30px;
  height: 30px;
  margin-top :10px;
  margin-left: 10px;
}

.text-wrapper input[type="checkbox"] {
  margin-right: 5px; /* 체크박스와 텍스트 사이에 간격 추가 */
}

.text-wrapper {
  margin-top :3px;
}