.fwlogo,.fw-m-logo {margin-top:40px;}
.fwlogo img {width:130px;height:72px;}

.memlogo div.co {width: 132px;height: 74px;border: 1px solid #f1f1f1;border-radius: 8px;}
.memlogo div.co img {max-width:130px;max-height:72px;object-fit:cover;flex-shrink:0;}
.memlogo div.pe {width: 82px;height: 102px;min-width: 82px;}
.memlogo div.pe img {max-width: 100%;height:102px;max-height: 102px;object-fit:cover;flex-shrink:0;}

.memlogo .camera {
position:absolute;
bottom:-8px;
right:-8px;
width:20px;
height:20px;
border-radius:50%;
background-image: url(//data.fashionwork.co.kr/icon/icon-camera-wh.png);
background-size: 26px;
background-repeat: no-repeat;
background-position: center;
}

.join-gub {margin-top:30px;}
.join-gub-tit {padding:15px 0;margin-top:5px;}
.join-gub-stit {padding-bottom:15px;}
.join-gub-btn {box-sizing:border-box;height:70px;color:#fff;cursor:pointer;}

.fw-j-terms .join-terms0 {gap:10px;}
.fw-j-terms .join-terms1 {width:calc(100% - 60px);}
.fw-j-terms .join-terms2 {width:60px;text-align:center;color:#666;}
.fw-j-terms .join-txt {padding:10px;background:#F5F5F5;line-height:20px;height:100px;overflow-y:auto;color:#a1a1a1;}
.fw-j-terms .join-txt.hide {display:none;}

.join-input {box-sizing:border-box;border:1px solid #dedede;padding:15px 10px;margin-top:0px;position:relative;}
.join-input input[type=text],.join-input input[type=password],textarea {border:0;outline:none;margin-top:15px;padding-left:0;width:100%;}
.join-input textarea {height:150px;overflow: auto;resize: none;}
.join-input.unused {background:#f5f5f5;}
.join-input.unused input {background:#f5f5f5;}

.join-input .join-tit {gap:5px;}
.join-input .join-tit .join-tit1 {width:auto;white-space: nowrap;}
.join-input .join-tit .join-tit2 {color:#ff0000;position:relative;top:3px;}

.join-input .double {margin-top:15px;gap:10px;}
.join-input .double div {width:50%;height:35px;}
.join-input .double div input[type="radio"] {display:none;}
.join-input .double div label {position: relative;width:100%;height:35px;border:1px solid #ccc;box-sizing: border-box;}
.join-input .double div input[type="radio"]:checked + label {background:#000;border-color:#000;color:#fff;}
.join-input .double div input[type="radio"]:checked + label::before {
  content: "";
  position: relative;
  width: 20px;
  height: 20px;
  background-image: url(//data.fashionwork.co.kr/icon/check-icon.png);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
  margin-left: -25px; /* 이미지를 왼쪽으로 이동 */
  top: 35%; /* 이미지를 수직 중앙 정렬 */
  transform: translateY(-50%); /* 이미지를 수직 중앙 정렬 */
}

.join-input-btn {box-sizing:border-box;height:70px;color:#fff;cursor:pointer;}

.join-ip-left {width:calc(100% - 120px);}
.join-ip-right {width:120px;position:absolute;top: 0;bottom: 0;right: 0;}
.join-ip-right .join-ip-right-btn {
    width: 100%;  
    background: #dedede;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
	color:#555;
}

.join-wrapper {width:100%;border:1px solid #dedede;padding:10px;box-sizing:border-box;margin-top:10px;} 
.join-wrapper .join-wrapper-sub {gap:10px;}
.join-wrapper div input[type="radio"] {display:none;}
.join-wrapper div label {position: relative;width:auto;height:30px;border:1px solid #ccc;box-sizing: border-box;padding:0px 20px;}
/*.join-wrapper .f-grade-sub label {width:calc(100% / 4);}*/
.join-wrapper div input[type="radio"]:checked + label {background:#000;border-color:#000;color:#fff;}
.join-wrapper div input[type="radio"]:checked + label::before {
  content: "";
  position: relative;
  width: 20px;
  height: 20px;
  background-image: url(//data.fashionwork.co.kr/icon/check-icon.png);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 2px;
  margin-left: -22px;
  top: 35%; 
  transform: translateY(-50%);
}

.brand-wrapper {gap:10px;margin-top:10px;}

.stWord {
width:auto;
height:20px;
padding:0 20px 0 6px;
background : #fff;
color:#222;
font-size:12px;
border-radius:50px;
position:relative;
}

.stWord:after{
content: '';
position: absolute;
top: -1px;
left: -1px;
height: calc(100% + 1px * 2);
width: calc(100% + 1px * 2);
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad);
border-radius: 17px;
z-index: -1;
-webkit-animation: gradientani 3s ease alternate infinite;
animation: gradientani 3s ease alternate infinite;
background-size: 300% 300%;
}

@-webkit-keyframes gradientani { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }

@keyframes gradientani { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }

.stWord span {
background-image:url(//data.fashionwork.co.kr/icon/m-close-icon.png);
background-size:8px;
background-repeat: no-repeat;
background-position: center;
width:12px;
height:12px;
position:absolute;
top:4px;
right:6px;
}


.floating-btn {
  position: fixed;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  background-color: #000;
  color: white;
  font-size:13px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.floating-btn.hides {
	animation-name: hideAnimation;
    animation-duration: 0.6s;
    animation-timing-function: ease;
	animation-fill-mode: forwards; 
}

.floating-btn.hide-f {display:none;}

@-webkit-keyframes hideAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}


@keyframes hideAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/*tui datepicker */
.join-input .birth-wrapper {z-index:3;margin-left:-10px;}

/*pretty checkbox 설정 */
.pretty {padding:10px 0;}
.pretty .state label:after, .pretty .state label:before {top:9px !important;}

.fw-switch {padding-top:0;width:auto;}
.fw-switch.pretty.p-switch .state:before {top:0;}
.fw-switch.pretty.p-switch .state:before {top:0;}
.fw-switch.pretty.p-switch .state label:after, .fw-switch.pretty.p-switch .state label:before {top:1px !important;}
.fw-switch.pretty.p-switch.p-fill input:checked~.state:before {border-color:#ff0000;background-color:#ff0000 !important;}

