@charset "utf-8";

/***************************************************************************/
/*		           회원가입/로그인/아이디비번찾기/비회원주문	                             /
/***************************************************************************/

.form-wrapper {width:36%;margin:80px auto;display:block;}
.form-wrapper .fw-tit {font-size:1.35rem;letter-spacing:-0.5px;font-weight:500;margin-top:30px;margin-bottom:20px; border-bottom: 2px solid #333; padding-bottom:10px;}
.form-wrapper .fw-txt {font-size:0.8rem;line-height:1.5;color:#898989;padding-bottom:20px;font-weight:500;}
.form-wrapper .fw-txt span {color:#e30303;}
.form-wrapper .fw-row {width:100%;padding:5px 0;}
.form-wrapper .fw-row label {width:100%;font-weight:400;font-size:0.82rem;}
.form-wrapper .fw-row input {width:100%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;margin-top:2px;}
.form-wrapper .fw-id-row {width:100%;padding:5px 0;display:flex;justify-content:space-between;flex-wrap: wrap;}
.form-wrapper .fw-id-row label {width:100%;font-weight:400;font-size:0.82rem;}
.form-wrapper .fw-id-row input {width:80%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;border-right:none;border-radius:2px 0 0 2px;margin-top:2px;}
.form-wrapper .fw-id-row button {width:20%;height:36px;line-height:34px;font-size:0.8rem;padding:0;text-align:center;background:#3f4251;color:#fff;border: 1px solid #3f4251;cursor: pointer;border-radius:0 2px 2px 0;margin-top:2px;}
.form-wrapper .fw-email-row {width:100%;padding:5px 0;display:flex;flex-direction: row;flex-wrap: wrap;}
.form-wrapper .fw-email-row label {width:100%;font-weight:400;font-size:0.82rem;}
.form-wrapper .fw-email-row input {width:45%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;margin-top:2px;}
.form-wrapper .fw-email-row span {width:10%;text-align:center;display: flex;align-items:center;justify-content: center;font-size:0.9rem;}
.btn-confirm {margin-top:20px;width:100%;height:54px;line-height:54px;background:#e30303;color:#fff;text-align:center;font-size:1rem;font-weight:400;}
.btn-fast-join {margin-top:10px;width:100%;height:54px;line-height:54px;background:#eee;text-align:center;font-size:1rem;font-weight:400;}
.btn-join-3sec {margin-top:10px;width:100%;height:54px;line-height:54px;background:#3f4251;color:#fff;text-align:center;font-size:1rem;font-weight:400;}
.btn-login-confirm {margin-top:10px;width:100%;height:54px;line-height:54px;background:#e30303;color:#fff;text-align:center;font-size:1rem;font-weight:400;}
.form-bottom-btnwrap {margin-top:30px;padding:10px 0;border-top:1px solid #e1e1e1;}

.login-menu-wrapper { width: 100%; display: block;padding: 10px 0; }
.login-menu-wrapper > ul {width:100%;display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.login-menu-wrapper > ul li { line-height:22px; font-size: 0.86rem; letter-spacing: -0.5px;text-align: center; padding: 0 15px; position: relative; cursor:pointer;}
.login-menu-wrapper > ul li a { color: #222; white-space: nowrap;}
.login-menu-wrapper > ul li:not(:last-child)::after { content: '|'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #ccc; font-size: 0.6rem; }

.form-term-wrap {margin-top:20px;padding:20px 0 0 0;border-top:1px solid #e1e1e1;}
.agreement-item {position: relative;width:80%;margin:0 auto;display: flex;align-items: center;margin-bottom: 15px;}
.btn-term-more {position:absolute;right:0;top:0;height:26px;line-height:25px;background-color: #f7f7f7;border:1px solid #ccc;padding:0 10px;cursor: pointer;font-size:0.76rem;}
.agreement-item input[type="checkbox"] {display: none;}
.agreement-item input[type="checkbox"] + label::before {content: '';display: inline-block;width: 20px;height: 20px;border: 1px solid #ccc;margin-right:7px;vertical-align: middle;background-color: #fff;background-repeat: no-repeat;background-position: center;background-size: 80%; /* 아이콘 크기 조절 */}
.agreement-item input[type="checkbox"]:checked + label::before {background-color: #fff;border-color: #e30303;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e30303'%3E%3Cpath d='M9.5 17.5L4.5 12.5L3.08 13.92L9.5 20.34L20.92 8.92L19.5 7.5L9.5 17.5Z'/%3E%3C/svg%3E");
/* 참고: %231a5198는 #1a5198 색상의 URL 인코딩 값*/}
.agreement-item label {font-size:0.8rem;color: #4b4b4b;cursor: pointer;display: flex;align-items: center;}
.agreement-text-label { margin:2px 15px 0 0;font-weight:700;}


/***************************************************************************/
/*					                      모바일 (최대 479px)			                             /
/***************************************************************************/
@media (max-width: 479px) {

/* 아이폰 둥근모서리 제거 */
input[type="text"] {-webkit-appearance: none; /* iOS Safari 기본 스타일 제거 */border-radius: 2px; box-shadow: none;}

.form-wrapper {width:80%;margin:30px auto 40px;display:block;}
.form-wrapper .fw-tit {font-size:1.1rem;letter-spacing:-0.5px;font-weight:500;margin-top:20px;margin-bottom:10px;border-bottom: 2px solid #333;padding:0;}
.form-wrapper .fw-txt {font-size:0.8rem;line-height:1.4;color:#898989;padding-bottom:15px;font-weight:500;}
.form-wrapper .fw-row {width:100%;padding:4px 0;}
.form-wrapper .fw-row label {width:100%;font-weight:500;font-size:0.86rem;}
.form-wrapper .fw-row input {width:100%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;margin-top:2px;}
.form-wrapper .fw-id-row {width:100%;padding:4px 0;display:flex;justify-content:space-between;flex-wrap: wrap;}
.form-wrapper .fw-id-row label {width:100%;font-weight:500;font-size:0.86rem;}
.form-wrapper .fw-id-row input {width:72%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;border-right:none;border-radius:2px 0 0 2px;margin-top:2px;}
.form-wrapper .fw-id-row button {width:28%;height:36px;line-height:36px;font-size:0.82rem;padding:0;text-align:center;background:#3f4251;color:#fff;border: 1px solid #3f4251;cursor: pointer;border-radius:0 2px 2px 0;margin-top:2px;}
.form-wrapper .fw-email-row {width:100%;padding:4px 0;display:flex;flex-direction: row;flex-wrap: wrap;}
.form-wrapper .fw-email-row label {width:100%;font-weight:400;font-size:0.86rem;}
.form-wrapper .fw-email-row input {width:45%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;margin-top:2px;}
.form-wrapper .fw-email-row span {width:10%;text-align:center;display: flex;align-items:center;justify-content: center;font-size:0.9rem;}
.btn-confirm {margin-top:15px;width:100%;height:46px;line-height:46px;background:#e30303;color:#fff;text-align:center;font-size:1.05rem;font-weight:400;}
.btn-fast-join {margin-top:6px;width:100%;height:46px;line-height:46px;background:#eee;text-align:center;font-size:0.9rem;font-weight:400;}
.btn-join-3sec {margin-top:6px;width:100%;height:46px;line-height:46px;background:#3f4251;color:#fff;text-align:center;font-size:0.9rem;font-weight:400;}
.btn-login-confirm {margin-top:15px;width:100%;height:46px;line-height:46px;background:#e30303;color:#fff;text-align:center;font-size:1.05rem;font-weight:400;}
.form-bottom-btnwrap {margin-top:20px;padding:5px 0;border-top:1px solid #e1e1e1;}

.login-menu-wrapper { width: 100%; display: block;padding: 5px 0; }
.login-menu-wrapper > ul {width:100%;display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.login-menu-wrapper > ul li { line-height:22px; font-size: 0.86rem; letter-spacing: -0.5px;text-align: center; padding: 0 15px; position: relative; cursor:pointer;}
.login-menu-wrapper > ul li a { color: #222; white-space: nowrap;}
.login-menu-wrapper > ul li:not(:last-child)::after { content: '|'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #ccc; font-size: 0.6rem; }

.form-term-wrap {margin-top:15px;padding:20px 0 0 0;border-top:1px solid #e1e1e1;}
.agreement-item {position: relative;width:98%;margin:0 auto;display: flex;align-items: center;margin-bottom: 10px;}
.btn-term-more {position:absolute;right:0;top:0;height:26px;background-color: #f7f7f7;border:1px solid #ccc;padding:0 10px;cursor: pointer;font-size:0.8rem;line-height:26px;}
.agreement-item input[type="checkbox"] {display: none;}
.agreement-item input[type="checkbox"] + label::before {content: '';display: inline-block;width: 20px;height: 20px;border: 1px solid #ccc;margin-right:5px;vertical-align: middle;background-color: #fff;background-repeat: no-repeat;background-position: center;background-size: 80%; /* 아이콘 크기 조절 */}
.agreement-item input[type="checkbox"]:checked + label::before {background-color: #fff;border-color: #e30303;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e30303'%3E%3Cpath d='M9.5 17.5L4.5 12.5L3.08 13.92L9.5 20.34L20.92 8.92L19.5 7.5L9.5 17.5Z'/%3E%3C/svg%3E");}
.agreement-item label {font-size:0.86rem;color: #4b4b4b;cursor: pointer;display: flex;align-items: center;}
.agreement-text-label { margin:2px 15px 0 0;font-weight:500;}

}

/***************************************************************************/
/*					             기준 -일반 모바일 (480px ~ 767px)		   	             /
/***************************************************************************/
@media (min-width: 480px) and (max-width: 767px) {

.form-wrapper {width:54%;margin:80px auto;display:block;}
.form-wrapper .fw-id-row input {width:70%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;border-right:none;border-radius:2px 0 0 2px;margin-top:2px;}
.form-wrapper .fw-id-row button {width:30%;height:36px;line-height:34px;font-size:0.8rem;padding:0;text-align:center;background:#3f4251;color:#fff;border: 1px solid #3f4251;cursor: pointer;border-radius:0 2px 2px 0;margin-top:2px;}
.agreement-item {position: relative;width:100%;margin:0 auto;display: flex;align-items: center;margin-bottom: 15px;}

}

/***************************************************************************/
/*					             기준-태블릿 (768px ~ 1023px)		   	                     /
/***************************************************************************/
@media (min-width: 768px) and (max-width: 1023px) {

.form-wrapper {width:54%;margin:80px auto;display:block;}
.form-wrapper .fw-id-row input {width:70%;height:36px;line-height:36px;font-size:1rem;font-weight:400;padding: 8px;border:1px solid #ccc;border-right:none;border-radius:2px 0 0 2px;margin-top:2px;}
.form-wrapper .fw-id-row button {width:30%;height:36px;line-height:34px;font-size:0.8rem;padding:0;text-align:center;background:#3f4251;color:#fff;border: 1px solid #3f4251;cursor: pointer;border-radius:0 2px 2px 0;margin-top:2px;}
.agreement-item {position: relative;width:100%;margin:0 auto;display: flex;align-items: center;margin-bottom: 15px;}

}

/***************************************************************************/
/*					            노트북 (1024px ~ 1199px)		   	                             /
/***************************************************************************/
@media (min-width: 1024px) and (max-width: 1199px) {

.form-wrapper {width:46%;margin:80px auto;display:block;}

}