@charset "utf-8";
/* SG membership common */
/* header */
.membershipSection header {padding:30px 0 40px;margin:0 auto;width:100%;max-width:940px;text-align:center;box-sizing:border-box;}
.membershipSection header .detail-h {color:#444;font-size:26px;font-family: Theinhardt, NotoSans, sans-serif;font-weight:bold;}
/* contents */
.membershipSection header + article {margin:0 auto;width:100%;max-width:940px;box-sizing:border-box;}
.membershipSection .content-desc {padding:0 0 80px;margin:0 auto;max-width:720px;color:#767676;font-size:22px;font-family: Theinhardt, NotoSans, sans-serif;font-weight:700;text-align:center;letter-spacing:-1.1px;}
.membershipSection .membership-tab-area .membership-tab-con,
.membershipSection .membership-con {margin:0 auto;width:100%;max-width:940px;}
.membershipSection .form01,
.membershipSection .form03 {margin:0 auto;max-width:720px;}
.membershipSection .form02 {margin:0 auto;max-width:940px;border-top:1px solid #ccc;}
.membershipSection .form02 .form-terms-tit {display:block;padding-top:70px;margin:0 auto;width:100%;max-width:720px;font-size:26px;color:#8d5635;font-family: Theinhardt, NotoSans, sans-serif;font-weight:bold;box-sizing: border-box;}
.membershipSection .form02 .form-terms-txt {margin:22px auto;max-width:720px;color:#634c30;font-size:20px;font-family: Theinhardt, NotoSans, sans-serif;font-weight:700;}
.membershipSection .form02 .line {padding:0 20px;margin:0 auto;max-width:720px;box-sizing:border-box;}
.membershipSection .form02 .line:after,
.membershipSection .form03 .line:after {display:block;content:"";clear:both;}
.membershipSection .form02 .line + .line {margin-top:20px;}
.membershipSection .form02 .line .terms-con {display:block;float:left;padding-left:10px;width:calc(100% - 30px);margin:0 auto;color:#666;font-size:18px;cursor:default;}
.membershipSection .form03 .line {margin-top:30px;}
.membershipSection .form03 .line input[type="checkbox"] + label {float: left;margin:-2px 0 0 10px;width:calc(100% - 30px);color:#634c30;font-size:20px;font-family: Theinhardt, NotoSans, sans-serif;font-weight:700;cursor:default;}
.membershipSection .form03 .line .color-txt {color:#634c30;border-bottom:1px solid #634c30;}
.membershipSection .form03 .line .color-txt:hover,
.membershipSection .form03 .line .color-txt:visited {text-decoration:none;}
.membershipSection sup {color:#dd7f20;}
.membershipSection .input-box + .input-box {margin-top:40px;}
.membershipSection .check-user-code {display:none;position:absolute;right:40px;bottom:10px;color:#8d5635;font-size:14px;font-family:'NotoSans';font-weight:700;}/* 인증번호 입력 시 : display:inline-block; */
.membershipSection .check-user-code:after {display:inline-block;content:"";clear:both;margin-left:5px;width:13px;height:12px;background-image:url("/sg/en/resource/img/membership/img_20210223_ico_code_check.png");background-size:cover;background-position:center;}
.membershipSection .check-user-code.not:after {width:11px;background-image:url("/sg/en/resource/img/membership/img_20210223_ico_code_not_match.png");}/* 입력된 인증번호가 틀릴경우 */
.membershipSection .label-input-code.off {color:#bbb;}/* 인증번호 오류 시 해당 클래스 추가 */
/* input */
.membershipSection .container input[type="text"],
.membershipSection .container input[type="password"] {padding:5px 0;width:100%;height:40px;color:#767676;font-size:18px;border:none;box-sizing:border-box;border-bottom:1px solid #b3b3b3;outline:none;}
.membershipSection .container input[type="text"]::placeholder, 
.membershipSection .container input[type="password"]::placeholder {color:#767676;}
.membershipSection .container input[type="text"]:focus,
.membershipSection .container input[type="password"]:focus {outline:none;border-bottom:2px solid #b3b3b3;}
.membershipSection .container input[type="text"]:hover,
.membershipSection .container input[type="password"]:hover {outline:none;}
.membershipSection .form02 .line input[type="radio"] {padding:0 0;margin:5px auto 0;float:left;width:20px;height:20px;border:1px solid #ccc;border-radius:50%;box-sizing:border-box;}
.membershipSection .form03 .line input[type="checkbox"] {float:left;margin-top:6px;width:20px;height:20px;}
/* select */
.membershipSection select {display:block;width:100%;height:40px;color:#767676;font-size:18px;box-sizing:border-box;border-bottom:1px solid #b3b3b3;border-radius:0;text-align:left;outline:none;text-indent:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("/sg/en/resource/img/membership/img_20210223_select_arrow_01.jpg") no-repeat 95% 50%;background-size:16px 9px;}
.membershipSection select::-ms-expand {display:none;}
/* .btn */
.membershipSection .btn {display:block;margin:0 auto;padding:20px 0;width:400px;color:#fff;font-size:18px;font-family:'NotoSans';font-weight:700;text-align:center;background-color:#caa58e;border:none;outline:none;}
.membershipSection .btn.btn-check-code {position:absolute;margin:0 auto;top:-20px;right:0;padding:15px 0;width:180px;background-color:#caa58e;}
.membershipSection .btn.btn-check-code.time {background-color:#999;}/* 카운트 버튼 컬러 */
.membershipSection .btn.btn-check-code.done {background-color: #8d5635;cursor:default;}/* 인증완료 버튼 및 비활성화 */
.membershipSection .btn.btn-edit-email, 
.membershipSection .btn.btn-add-email, 
.membershipSection .btn.btn-edit-phone, 
.membershipSection .btn.btn-add-phone {position:absolute;margin:0 auto;top:-8px;right:0;padding:10px 0;width:120px;font-size:15px;background-color:#caa58e;}/* 이메일, 핸드폰 번호 입력 팝업 인증버튼 */
.membershipSection .btn.btn-submit {margin:10px auto 0;}
/* label */
.membershipSection .input-box .container {position:relative;}
.membershipSection .input-box .container label  {display:block;position:absolute;top:3px;left:0;width:100%;color:#767676;font-size:18px;font-family:'NotoSans';cursor:text;-webkit-transition:all .2s;transition:all .2s;pointer-events:none;-webkit-transform: translate3d(0, 3px, 0)scale(1);transform:translate3d(0, 3px, 0) scale(1);-webkit-transform-origin:left top;transform-origin:left top;}
.membershipSection .input-box .container label.off {color:#bbb;letter-spacing:-.2px;}
.membershipSection .input-box .container.focus label {top:-22px;color:#bbb;font-size:14px;}
.membershipSection .input-box .container .line.focus label {top:-22px;color:#bbb;font-size:14px;}
/* .error-txt */
.membershipSection .error-txt {display:none;padding:5px 0;width:100%;color:#e70300 !important;font-size:13px;font-family:'NotoSans';font-weight:400;}
.membershipSection .error-txt:before {display:inline-block;content:"";clear:both;margin-right:5px;width:11px;height:10px;background-image:url("/sg/en/resource/img/membership/img_20210223_ico_error.png");background-repeat:no-repeat;background-size:cover;background-position:center;}
/* alert */
.membershipSection .alert {display:none;position:fixed;top:calc(50vh - 200px);left:calc(50% - 200px);padding:30px 30px;width:400px;box-sizing:border-box;border:1px solid #ccc;text-align:center;background-color:#fff;z-index:100;}
.membershipSection .alert .alert-header {padding-bottom:20px;border-bottom:1px solid #ccc;}
.membershipSection .alert .alert-header .img-box {display:block;margin:0 auto;width:100%;max-width:131px;}
.membershipSection .alert .alert-header .img-box img {width:100%;}
.membershipSection .alert .alert-con .txt-box {padding:45px 0 50px;}
.membershipSection .alert .alert-con .txt-box .txt {margin:0 auto;font-size:18px;}
.membershipSection .alert .alert-con .txt-box .txt + .txt {margin-top:15px;}
.membershipSection .alert .alert-con .txt-box .txt.contact {margin-top:30px;color:#000;font-size:16px;}
.membershipSection .alert .alert-con .btn {margin:0 auto;width:100%;background-color:#8d5635;}
.membershipSection .alert .alert-con .btn-box {background-color:transparent;font-size:0;}
.membershipSection .alert .alert-con .btn-box .btn {display:inline-block;width:calc(50% - 4px);}
.membershipSection .alert .alert-con .btn-box .btn.btnW100 {display:block;width:100%;}
.membershipSection .alert .alert-con .btn-box .btn + .btn {margin-left:8px;}
.membershipSection .alert .alert-con .btn-box .btn-gray {background-color:#d1d1d1;}
.membershipSection .alert .alert-con .btn-box .btn-color {background-color:#99674a;}
.membershipSection .alert.input-error-alert,
.membershipSection .alert.input-end-alert {z-index:112;}
/* emil, phone 입력 팝업 */
.membershipSection .inner-popup {display:none;position:fixed;left:50%;top:18%;transform:translateX(-50%);width:100%;max-width:720px;padding:10px 40px 30px;box-sizing:border-box;border:1px solid #ccc;background-color:#fff;z-index:111;}    
.membershipSection .inner-popup .container {position:relative;}    
.membershipSection .inner-popup .pop-header {padding:20px 0 30px;border-bottom:1px solid #ccc;} 
.membershipSection .inner-popup .pop-header .detail-h {font-size:24px;}
.membershipSection .inner-popup .pop-contents {padding-top:70px;}   
.membershipSection .inner-popup .pop-contents .input-box input[type="text"] {border-color:#aaa;}
.membershipSection .inner-popup .pop-contents .input-box.input01 input[type="text"] {color:#bbb;border-bottom:2px dotted #aaa;}
.membershipSection .inner-popup .pop-contents .input-box.input03 input[type="text"] {color:#bbb;}
.membershipSection .inner-popup .check-user-code {right:24px;}
.membershipSection .inner-popup .pop-contents .btn-check-code {top:-10px;right:0;padding:10px 0;width:140px;}
.membershipSection .inner-popup .close-btn {display:block;position:absolute;right:0;top:20px;padding:0 0;width:24px;height:23px;background:url("/sg/en/resource/img/membership/img_20250601_btn_membership_popup_close.png") no-repeat left top;background-size:100% auto;text-indent:-9999em;}   
.membershipSection .inner-popup .btn-submit {margin:60px auto 0;}   
/* membershipAdrress */
.membershipSection .membership-adrress .container {padding:70px 0 0;text-align:center;border-top:1px solid #ccc;}
.membershipSection .membership-adrress .container .tit {color:#727272;font-size:18px;font-family: Theinhardt, NotoSans, sans-serif;font-weight:bold;}
.membershipSection .membership-adrress .container .txt {margin-top:20px;margin-bottom:0;color:#8c8c8c;font-size:14px;font-family:'NotoSans';font-weight:400;line-height:2;}
.membershipSection .membership-adrress .container .txt i {color:#333;border-bottom:1px solid #333;}

/* login.html */
.membershipSection.MembershiploginWrap .membership-tab-area {width:100%;}
.membershipSection.MembershiploginWrap .membership-tab-area .membership-tab-btn-wrap {width:100%;}
.membershipSection.MembershiploginWrap .membership-tab-area .membership-tab-btn-wrap:after {display:block;content:"";clear:both;}
.membershipSection.MembershiploginWrap .membership-tab-area .membership-tab-btn-wrap button {padding:25px 0;float:left;width:50%;color:#999;font-size:24px;font-family: Theinhardt, NotoSans, sans-serif;font-weight:600;border-bottom:1px solid #d1d1d1;box-sizing:border-box;text-align:center;outline:none;}
.membershipSection.MembershiploginWrap .membership-tab-area .membership-tab-btn-wrap button.on {color:#caa58e;border-bottom:3px solid #caa58e;}
.membershipSection.MembershiploginWrap .membership-tab-area .membership-tab-btn-wrap button:hover,
.membershipSection.MembershiploginWrap .membership-tab-area .membership-tab-btn-wrap button:visited {text-decoration:none;outline:none;}
.membershipSection.MembershiploginWrap .tab-con-login .login-form-wrap .input-box.check {margin-top:25px;color:#999;font-size:16px;}
.membershipSection.MembershiploginWrap .tab-con-login .login-form-wrap .input-box.check label {display:block !important;}
.membershipSection.MembershiploginWrap .tab-con-login .login-form-wrap .input-box.check input[type="checkbox"] {margin-right:10px;border:1px solid #a3a3a3;border-radius:0;}
.membershipSection.MembershiploginWrap .tab-con-register .register-form-wrap .form-desc {display:block;margin:0 auto 45px;max-width:720px;color:#999;font-size:16px;text-align:right;}
.membershipSection.MembershiploginWrap .content-desc {padding:65px 0 90px;}
.membershipSection.MembershiploginWrap .btn.btn-submit {margin:75px auto 0;}
.membershipSection.MembershiploginWrap .btn-link {display:inline-block;vertical-align:top;font-size:16px;line-height: 1;}
.membershipSection.MembershiploginWrap .btn-link:first-of-type{margin-right: 10px;padding-right: 10px;border-right: 1px solid #919191;}

/* temporary_pw.html */
.membershipSection.MembershipTemporaryPwWrap .con-reset-pw-code.reset-code .btn-txt {padding:5px 0;color:#767676;font-family:'NotoSans';font-weight:700;font-size:16px;border-bottom:1px solid #767676;text-align:center;}

/* password_setting.html */
.membershipSection.MembershipPwSetting .con-reset-pw .reset-pw-form-wrap .form-desc {display:block;margin:0 auto 25px;max-width:720px;color:#999;font-size:16px;text-align:right;}

/* update_profile.html */
.membershipSection.MembershipUpdateWrap .btn.btn-submit {margin:75px auto 0;}

.only-pc {display:block !important;}
.only-mo {display:none !important;}

@media only all and (max-width: 767px) {
	/* header */
	.membershipSection header {padding:40px 10px 20px;}
	.membershipSection header .detail-h {font-size:20px;}
	/* contents */
	.membershipSection header + article {padding:0 20px;}
	.membershipSection .content-desc {padding:0 15px 40px;font-size:14px;}
	.membershipSection .form01,
	.membershipSection .form02,
	.membershipSection .form03 {padding:0 15px;box-sizing:border-box;}
	.membershipSection .form02 {border-top:none;}
	.membershipSection .form02 .form-terms-tit {padding-top:60px;padding-left:12px;font-size:16px;text-indent:-13px;}
	.membershipSection .form02 .form-terms-txt {padding-left:12px;margin:20px 0 ;font-size:14px;}
	.membershipSection .form02 .line {padding:0 10px;}
	.membershipSection .form02 .line + .line {margin-top:15px;}
	.membershipSection .form02 .line .terms-con {font-size:12px;}
	.membershipSection .form03 .line {padding:0 10px;margin-top:20px;}
    .membershipSection .form03 .line input[type="checkbox"] + label {font-size:14px;}
    .membershipSection .check-user-code {right:0;bottom:5px;font-size:11px;}
    .membershipSection .check-user-code:after {width:11px;height:10px;}
	/* input */
	.membershipSection .container input[type="text"], 
    .membershipSection .container input[type="password"] {height:30px;font-size:13px;}
    .membershipSection .form02 .line input[type="radio"] {width:12px;height:12px;}
	.membershipSection .form03 .line input[type="checkbox"] {margin-top:0;width:12px;height:12px;}
    /* select */
	.membershipSection select {margin:0 auto;width:100%;height:30px;font-size:12px;background-size:10px 6px;background-position:100% 55%;}
    /* .btn */
	.membershipSection .btn {padding:13px 0;margin:30px auto 0;width:100%;max-width:150px;font-size:11px;}
	.membershipSection .btn.btn-check-code {top:-18px;padding:8px 0;margin:15px auto 0;width:70px;}
	.membershipSection .btn.btn-edit-email, 
    .membershipSection .btn.btn-add-email, 
    .membershipSection .btn.btn-edit-phone, 
    .membershipSection .btn.btn-add-phone {top:-18px;padding:6px 0;margin:15px auto 0;width:70px;font-size:11px;}
	.membershipSection .btn.btn-submit {margin:30px auto 0;}
	/* label */
	.membershipSection .input-box .container label {top:2px;font-size:12px;}
    .membershipSection .input-box .container.focus label {font-size:10px;}
    .membershipSection .input-box .container .line.focus label {font-size:10px;}
	/* .error-txt */
	.membershipSection .error-txt {font-size:11px;}
	.membershipSection .error-txt:before {width:10px;height:9px;}
	/* alert */
	.membershipSection .alert {padding:25px 20px;left:calc(50% - 125px);width:250px;}
    .membershipSection .alert .alert-header {padding-bottom:10px;}
    .membershipSection .alert .alert-header .img-box {max-width:85px;}
    .membershipSection .alert .alert-con .txt-box  {padding:20px 0;}
    .membershipSection .alert .alert-con .txt-box .txt {font-size:11px}
    /* .membershipSection .alert .alert-con .txt-box .txt br {display:none;} */
    .membershipSection .alert .alert-con .txt-box .txt + .txt {margin-top:0;}
    .membershipSection .alert .alert-con .btn {max-width:162px;font-size:12px;}
    .membershipSection .alert .alert-con .txt-box .txt.contact {margin-top:20px;font-size:10px}
    /* emil, phone 팝업 */
    .membershipSection .inner-popup {top:13%;padding:20px 20px 25px;width:calc(100% - 30px);max-width:580px;}    
    .membershipSection .inner-popup .pop-header {padding:0 0 20px;} 
    .membershipSection .inner-popup .pop-header .detail-h {font-size:18px;}   
    .membershipSection .inner-popup .pop-contents {padding-top:45px;}
    .membershipSection .inner-popup .pop-contents .input-box.input01 input[type="text"] {border-bottom:1px dotted #aaa;}
    .membershipSection .inner-popup .check-user-code {right:0;}
    .membershipSection .inner-popup .pop-contents .btn-check-code {top:-18px;padding:7px 0;margin:15px auto 0;width:70px;}
    .membershipSection .inner-popup .close-btn {top:-10px;right:-10px;width:12px;height:12px;}   
    .membershipSection .inner-popup .btn-submit {margin:30px auto 0;max-width:160px;}
    /* membershipAdrress */
	.membershipSection .membership-adrress .container {padding:30px 10px 20px;margin:0 -10px;}
	.membershipSection .membership-adrress .container .tit {font-size:12px;}
	.membershipSection .membership-adrress .container .txt {margin-top:10px;font-size:11px;letter-spacing:-.2px;}

	/* login.html */
	.membershipSection.MembershiploginWrap .membership-tab-area .membership-tab-btn-wrap button {padding:10px 0;font-size:12px;}
	.membershipSection.MembershiploginWrap .tab-con-login .login-form-wrap .input-box.check {margin-top:15px;}
    .membershipSection.MembershiploginWrap .tab-con-login .login-form-wrap .input-box.check {font-size:11px;}
	.membershipSection.MembershiploginWrap .tab-con-register .register-form-wrap .form-desc {padding:0 15px;margin:0 auto 10px;font-size:10px;box-sizing:border-box;}
	.membershipSection.MembershiploginWrap .content-desc {padding:24px 15px 62px;}
    .membershipSection.MembershiploginWrap .btn.btn-submit {margin:30px auto 0;}
    .membershipSection.MembershiploginWrap .btn-link {margin-top:10px;font-size:11px;}
    .membershipSection.MembershiploginWrap .btn-link:nth-of-type(2){line-height: normal;margin-top: 7px;}

	/* temporary_pw.html */
	.membershipSection.MembershipTemporaryPwWrap .con-reset-pw-code.reset-code .btn-txt {font-size:13px;}

	/* password_setting.html */
	.membershipSection.MembershipPwSetting .con-reset-pw .reset-pw-form-wrap .form-desc {font-size:10px;}

	/* update_profile.html */
	.membershipSection.MembershipUpdateWrap .btn.btn-submit {margin:30px auto 0;}

	.only-pc {display:none !important;}
    .only-mo {display:block !important;}
}

/* 20230413 추가 - 브랜드웹 멤버십관련 페이지 팝업화 제작 */
.membershipSection .btn.btn-cancel {position:relative; z-index:0; background:transparent; color:#666;}
.membershipSection .btn.btn-cancel:before {content:''; position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid;}
.membershipSection .btn-submit-wrap {display:block; margin:10px auto 0; text-align:center;}
.membershipSection .btn-submit-wrap .btn,
.membershipSection.MembershipUpdateWrap .btn-submit-wrap .btn {display:inline-block; width:300px; margin:0 0.277778em;}
@media only all and (max-width: 767px) {
  .membershipSection .btn-submit-wrap {display:flex; justify-content:center; margin-top:30px;}
  .membershipSection .btn-submit-wrap .btn {flex:1 1 0; width:145px;}
}
.membershipSection__header {position:relative; z-index:0;}
.membershipSection__header .util-top {position:absolute; top:-3.7rem; right:0;}
.membershipSection__header .util-top .btn-link {display:inline-block; font-size:1.3rem; color:#555; text-decoration:underline;}
@media (min-width: 60em) {
  .membershipSection__header .util-top .btn-link {font-size:1.5rem;}
}