.ham_bg {position: fixed !important;}

#making .sub_lt h1 {font-size: 65px; transform: rotate(-90deg) translateX(-108px); display: inline-block; width: 255px;}
#making .sub_rt .making {border-bottom: 1px solid #111;}
#making .sub_rt .making1 {padding-bottom: 50px;}
#making .sub_rt .making2 {padding: 50px 0;}
#making .sub_rt .making3 {padding: 50px 0 80px 0;}
#making .sub_rt .making .title {font-size: 24px; margin-bottom: 35px; font-family: 'S-CoreDream-7ExtraBold';}
#making .sub_rt .sel_circle_wrap {display: flex; justify-content: space-between;}
#making .sub_rt .sel_circle {display: flex; flex-direction: column; align-items: center; justify-content: center; background: #dadada; color: #111; width: 180px; height: 180px; border-radius: 50%; cursor: pointer;}
#making .sub_rt .sel_circle.active {color: #fff; background: linear-gradient(135deg, #5151cf, #47089a);}
#making .sub_rt .sel_circle.active .making_icon img.hover_icon {opacity: 1;}
#making .sub_rt .sel_circle:hover {color: #fff; background: linear-gradient(135deg, #5151cf, #47089a);}
#making .sub_rt .sel_circle:hover .making_icon img.hover_icon {opacity: 1;}
#making .sub_rt .sel_circle .making_icon {margin-bottom: 25px;}
#making .sub_rt .sel_circle .making_icon > div {position: relative; width: 62px; height: 57px;}
#making .sub_rt .sel_circle .making_icon img {width: 100%; position: absolute; top: 0; left: 0;}
#making .sub_rt .sel_circle .making_icon img.hover_icon {opacity: 0; transition: all 0.2s;}
#making .sub_rt .sel_circle .making_name {font-size: 20px;}
#making table {width: 100%; text-align: left;}
#making table th {font-size: 20px; font-style: italic; color: #111; width: 15%; text-align: left;}
#making table th span {color: #5012b3; margin-left: 3px;}
#making table td {width: 75%;}
#making table td.radio_td {padding: 40px 0; display: inline-flex; justify-content: flex-start; align-items: center; width: 100%;}
#making table td label {display: inline-flex; align-items: center; position: relative;}
#making table td label i {position: absolute;}
#making table td label:before { content:'✔'; position:absolute; left: 9px; top: 0; text-align:center; color: #ddd;}
#making table td label:not(:nth-child(1)):before { content:'✔'; position:absolute; left: 48px; top: 0; text-align:center;}
#making table td label input {width: 30px; height: 30px; border-radius: 50%; display: inline-block; padding: 0; margin-right: 10px; margin-left: 40px; margin-bottom: 0; border: 2px solid #ddd;}

#making table td label input.first {margin-left: 0;}
#making table td label input:checked {background: #5f30b8; border: 1px solid #5f30b8;}
#making table td label input:checked::before {color: #5f30b8;}
#making table td input, #making table td textarea {font-family: 'S-CoreDream-3Light'; background: #fff; border: 1px solid #ddd; padding: 20px 30px; width: 100%; margin-bottom: 5px; font-size: 20px;}
#making table td input:focus, #making table td textarea:focus { border: 1px solid #7a5ac1;}
#making table td input::placeholder {color: #acacac; font-size: 20px; font-style: italic;}
#making table .plus_btn {width: 40px; height: 40px; border-radius: 50%; background: #5f30b8; color: #fff; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; /* margin: 0 20px; */ margin: 0 10px;}
#making table .plus_btn.plus {background: #5f30b8;}
#making table .plus_btn.org {background: #ccc;}
#making table td.no_lineheight {line-height: 160%; padding: 4px 0 20px;}


.fileBox .fileName {display:inline-block;width:190px;height:30px;padding-left:10px;margin-right:5px;line-height:30px;border:1px solid #aaa;background-color:#fff;vertical-align:middle}
.fileBox .btn_file {display:inline-block;border:1px solid #000;width:100px;height:30px;font-size:0.8em;line-height:30px;text-align:center;vertical-align:middle}
.fileBox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

#making table .plus_btn i {font-size: 35px;}
#making .per_info {width: 100%; height: 145px; padding: 25px; overflow-y: scroll; background: #fff; border: 1px solid #ddd; color: #888; font-size: 14px; line-height: 1.5rem;}
#making .per_info_chk {display: inline-flex; justify-content: flex-end; width: 100%; align-items: center; margin-top: 20px;}
#making .per_info_chk button {color: #111; font-size: 15px;}
#making .per_info_chk button.active {color: #5f30b8;}
#making .per_info_chk i {width: 30px; height: 30px; line-height: 30px; background: #fff; color: #ddd; border: 2px solid #ddd; border-radius: 50%; margin-right: 10px; font-size: 25px; vertical-align: middle;  cursor: pointer;}
#making .per_info_chk i.active {background: #5f30b8; border: 2px solid #5f30b8; color: #fff;}
#making .per.detail_btn {width: 115px; height: 30px; background: #111; color: #fff; line-height: 30px; text-align: center; margin-left: 25px; cursor: pointer;}
#making .making3 {border-bottom: 0 !important;}

.file {display: inline-flex; width: calc(100% - 80px) !important; align-items: center; margin-bottom: 5px;}
.file input {margin-bottom: 0 !important;}
.file button {display: inline-block; width: calc(15% - 5px); height: 100%; border: 0; background: #111; color: #fff; font-size: 20px; text-align: center; outline: 0; height: 66px; cursor: pointer;}
.tr_info td {font-size: 15px; color: #818181;}

#making_end {height: 100vh;}
#making_end .content {height: calc(100vh - 475px); text-align: center; display: flex; justify-content: center; align-items: center;}
#making_end .title {font-size: 30px; line-height: 3rem; margin-bottom: 60px;}
#making_end .sub_lt h1 {font-size: 65px; transform: rotate(-90deg) translateX(-108px); display: inline-block; width: 255px;}

.home_btn {width: 350px; height: 65px; line-height: 65px; text-align: center; background: #111; color: #fff; position: relative; border-radius: 50px; font-size: 20px; margin: 0 auto 130px auto; display: block; cursor: pointer; overflow: hidden;}
.home_btn p {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.home_btn::before {position: absolute; top: 0; left: 0; z-index: 0; content: ""; display: block; width: 100%; height: 0%; background: #5f30b8; transition: all 0.2s;}
.home_btn::after {position: absolute; bottom: 0; left: 0; z-index: 0; content: ""; display: block; width: 100%; height: 0%; background: #5f30b8; transition: all 0.2s;}
.home_btn::before,
.home_btn::after {left: 0;	width: 100%;	height: 0;	background-color: #5f30b8;}
.home_btn:hover {color: #fff;}
.home_btn:hover::before {height: 50%;}
.home_btn:hover::after {height: 50%;}

#making .making_info {padding-top: 50px; display: flex; align-items: center; column-gap: 20px;}
#making .making_info .txt {font-family: "Pretendard", sans-serif; letter-spacing: -0.02em;}
#making .making_info p {font-size: 15px; line-height: 1.5;}
#making .making_info p.grey {font-size: 12px; opacity: 0.5; margin-top: 5px; line-height: 1.35;}
#making .making_info p br.br_1420,
#making .making_info p br.br_540 {display: none;}

@media screen and (max-width: 1420px) {
  #making .sub_lt h1 {font-size: 50px; transform: rotate(-90deg) translateX(-47px) translateY(-40px);}
  #making_end .sub_lt h1 {font-size: 50px; transform: rotate(-90deg) translateX(-47px) translateY(-40px);}
  #making .sub_rt .sel_circle .making_name {font-size: 16px;}
  #making .sub_rt .sel_circle {width: 140px; height: 140px;}
  #making .sub_rt .sel_circle .making_icon {margin-bottom: 5px;}
  #making .sub_rt .sel_circle .making_icon > div {width: 52px; height: 47px;}
  #making table th {font-size: 18px;}
  #making table td input {font-size: 18px; padding: 15px 25px;}
  #making table td textarea {font-size: 18px; padding: 15px 25px;}
  #making table td input::placeholder {font-size: 18px;}
  #making table td label:before {left: 7px; font-size: 14px;}
  #making table td label:not(:nth-child(1)):before {left: 7px;}
  .file button {height: 56px;}
  #making table td.radio_td {flex-wrap: wrap;}
  #making table td label {flex: 33.3333% 0 0; font-size: 16px;}
  #making table td label input {width: 25px; height: 25px; margin-left: 20px; margin-left: 0; font-size: 14px !important;}
  #making .per.detail_btn {font-size: 14px;}

  #making .making_info p br.br_1420 {display: block;}
}

@media screen and (max-width: 1220px) {
  #making .sub_rt .sel_circle {height: 120px; width: 120px;}
  #making .sub_rt .sel_circle .making_icon > div {width: 44px; height: 39px;}
  #making .sub_rt .making .title {margin-bottom: 20px;}
  /* #making .sub_rt .making1 {padding-bottom: 30px;} */

}

@media screen and (max-width: 1024px) {
  #making .sub_lt h1 {font-size: 50px;}
  #making_end .sub_lt h1 {font-size: 50px;}
  #making .sub_rt .sel_circle {width: 100px; height: 100px;}
  #making .sub_rt .sel_circle .making_icon > div {width: 32px; height: 27px;}
  #making .sub_rt .sel_circle .making_name {font-size: 14px;}
  #making table th {font-size: 14px;}
  #making table td input {font-size: 14px; padding: 10px 20px;}
  #making table td textarea {font-size: 14px; padding: 10px 20px;}
  #making table td input::placeholder {font-size: 14px;}
  #making table td.radio_td {padding: 25px 0;}
  #making .per.detail_btn {font-size: 12px;}
  #making .per_info {font-size: 14px; padding: 20px; line-height: 1.5rem;}
  #making .per_info_chk button {font-size: 13px;}
  #making table .plus_btn {width: 32px; height: 32px; margin: 0 5px; /* margin: 0 10px; */}
  #making table .plus_btn i {font-size: 25px;}
  #making table .plus_btn.plus {width: 32px; height: 32px; margin: 0 5px;/* margin: 0 10px; */}
  #making table td label {flex: 50% 0 0; font-size: 14px;}
  .file {width: calc(100% - 53px) !important;}
  .file button {height: 39px; font-size: 14px; width: 20%;}
  .tr_info td {font-size: 12px; padding-top: 0;}

  #making .making_info {column-gap: 15px;}
  #making .making_info p {font-size: 14px;}
  #making .making_info p.grey {font-size: 12px;}
}

@media screen and (max-width: 768px) {
  #making .sub_lt h1 {font-size: 25px; transform: rotate(-90deg) translateX(-13px) translateY(-80px);}
  #making_end .sub_lt h1 {font-size: 25px; transform: rotate(-90deg) translateX(-13px) translateY(-80px);}
  #making .sub_rt .making .title {margin-bottom: 10px; font-size: 18px;}
  #making .sub_rt .sel_circle {width: 80px; height: 80px;}
  #making .sub_rt .sel_circle .making_icon > div {width: 27px; height: 20px;}
  #making .sub_rt .sel_circle .making_name {font-size: 12px;}
  #making .sub_rt .making1 {padding: 0 0 15px 0;}
  #making table th {width: 100%; display: block; text-align: left;}
  #making table td {width: 100%; display: block; margin-bottom: 10px;}
  #making table tr.tr_site td, #making table tr.tr_file td {margin-bottom: 0;}
  .tr_info td {font-size: 10px;}
  #making .sub_rt .making2 {padding: 30px 0;}
  #making table td input {font-size: 12px;}
  #making table td textarea {font-size: 12px; height: 200px;}
  #making table td input::placeholder {font-size: 11px;}
  .file {display: inline-flex !important; width: calc(100% - 52px) !important;}
  #making table td.radio_td {padding: 0;}
  #making table td label {font-size: 12px;}
  .file button {font-size: 10px; height: 37px; width: calc(27% - 5px);}
  #making .sub_rt .making3 {padding: 30px 0;}
  #making table td label input {width: 20px; height: 20px;}
  #making table td label:before {font-size: 12px; left: 5px;}
  #making table td label:not(:nth-child(1)):before {left: 6px;}
  #making table td.no_lineheight {padding: 5px 0 10px; word-break: keep-all;}
  #making .per_info {font-size: 12px; padding: 15px; line-height: 1.25rem;}
  #making .per_info_chk {margin-top: 10px;}
  #making .per_info_chk i {width: 20px; height: 20px; line-height: 20px; font-size: 20px;}
  #making .per_info_chk button {font-size: 12px;}
  #making .per.detail_btn {font-size: 10px; width: 60px; margin-left: 5px;}
  #making .per.detail_btn.plus {font-size: 10px; width: 60px; margin-left: 5px;}
  .per.popup {width: 85%; height: 70vh; padding: 25px; font-size: 12px; line-height: 1.325rem;}
  .pop.x_btn {font-size: 45px; top: 50px; right: 20px;}
  #making_end .title {font-size: 24px; line-height: 2.5rem; margin-bottom: 40px;}

  #making .making_info {padding-top: 30px;}
  #making .making_info img {width: 75px;}
  #making .making_info p {font-size: 13px;}
  #making .making_info p.grey {font-size: 11px;}
}

@media screen and (max-width: 560px) {
  #making .sub_rt .sel_circle_wrap {flex-wrap: wrap;}
  #making .sub_rt .sel_circle {width: 90px; height: 90px; flex: 21.3333% 0 0; margin: 2% 5%;}
  #making .per_info_chk i {width: 15px; height: 15px; line-height: 15px; font-size: 17px; margin-right: 5px;}
  #making .per_info {font-size: 10px;}
  .per.popup {font-size: 11px;}
  #making_end .title {font-size: 20px; line-height: 2.25rem; margin-bottom: 30px;}
  .home_btn {width: 250px; font-size: 18px; height: 55px; line-height: 55px;}

  .sub .sub_rt {padding: 0 25px;}
  #making .making_info {flex-direction: column; row-gap: 12px; align-items: flex-start;}
  #making .making_info p {font-size: 13px;}
  #making .making_info p.grey {margin-top: 7px;}
  #making .making_info p br.br_1420 {display: none;}
  #making .making_info p br.br_540 {display: block;}
}

@media screen and (max-width: 475px) {
  #making .sub_rt .sel_circle {flex: 25.3333% 0 0; margin: 2% 3%;}
}

@media screen and (max-width: 410px) {
  #making .sub_rt .sel_circle {flex: 30.3333% 0 0; margin: 2% 0%;}
}