@CHARSET "UTF-8";

.container.joinmember { margin-bottom: 100px; }

.container.joinmember .content-wrap {position: relative; width: 1050px; margin: 50px auto 0;}
.container.joinmember .content-wrap .img-box {position: relative; width: 100%;}

.container.joinmember .content-wrap .step {position: relative; margin-top: 70px;}
.container.joinmember .content-wrap .step p {line-height: 100%; letter-spacing: -1px;}
.container.joinmember .content-wrap .step .title {font-size: 22px; color: #333333; font-weight: 700; margin-bottom: 20px;}
.container.joinmember .content-wrap .step .subdesc {font-size: 14px; color: #333333; font-weight: 400; margin-bottom: 20px;}

.container.joinmember .content-wrap .step1 p {margin-bottom: 15px; font-size: 15px; color: #666666;}
.container.joinmember .content-wrap .step1 p.br {margin-bottom: 8px;}
.container.joinmember .content-wrap .step1 p:last-of-type {margin-bottom: 0;}

.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn {float: left; box-sizing: border-box; width: 215px; height: 270px; border: 1px solid #e6e6e6; margin-right: 10px; text-align: center; color: #333333; font-size: 20px; line-height: 100%; padding-top: 200px; cursor: pointer;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn:last-child {margin-right: 0;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-01 {background: url("/img/sub_join/member_type_01_off.png") no-repeat top 30px center;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-01.active {background: url("/img/sub_join/member_type_01_on.png") no-repeat top 30px center; color: #6c5447; font-weight: 700;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-02 {background: url("/img/sub_join/member_type_02_off.png") no-repeat top 30px center;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-02.active {background: url("/img/sub_join/member_type_02_on.png") no-repeat top 30px center;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-03 {background: url("/img/sub_join/member_type_03_off.png") no-repeat top 30px center;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-03.active {background: url("/img/sub_join/member_type_03_on.png") no-repeat top 30px center;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-04 {background: url("/img/sub_join/member_type_04_off.png") no-repeat top 30px center;}
.container.joinmember .content-wrap .step2 .member_type_wrap .member_type_btn-04.active {background: url("/img/sub_join/member_type_04_on.png") no-repeat top 30px center;}
.container.joinmember .social-join-item { padding-top:80px;text-align:center; }

.container.joinmember .content-wrap .step .vl { border-left: 1px solid lightgray; height: 360px; margin-left: 30px; margin-right:30px; }

/* 간편(SNS)가입(jm_sns)페이지에서 사용할 스타일 시트 */
.container.sub_join .join_tab_wrap {width:100%;background-color:#f7f2ed;}
.container.sub_join .join_tab {width:1050px;margin:0 auto;text-align:center;}
.container.sub_join .join_tab table {width:100%;}
.container.sub_join .join_tab table tr td {width:525px;text-align:center;font-size:17px;padding:20px 0;color:#999390;background-color:#f7f2ed;cursor:pointer;}
.container.sub_join .join_tab table tr td.on {color:#fff;background-color:#827d79;}
.container.sub_join .linkForm {width:510px;margin:0 auto;border:1px solid #e6e6e6;background-color:#fafafa;padding:20px 0;}
.container.sub_join .linkForm table {margin:0 auto;}
.container.sub_join .linkForm table td {font-size:17px;text-align:left;color:#333;height:50px;letter-spacing:-1px;}
.container.sub_join .linkForm table td .tbl_input_xl {width:220px;font-size:15px;}
.container.sub_join .linkForm table td .button-01 {width:90px;height:90px;line-height:88px;font-size:20px;}
.container.sub_join #marketingOptions {display: none;}
.container.sub_join .btn-toggle-options {display: inline-block; position: relative; margin-left: 10px; cursor: pointer;}
.container.sub_join .btn-toggle-options img{width: 16px;}

/* 간편(SNS)인증 연동/연동해제 페이지에서 사용할 스타일 시트 */
.container.snsconn {}
.container.snsconn .connect-wrap {width:510px;margin:0 auto;border:1px solid #e6e6e6;padding:20px 0;}
.container.snsconn .connect-wrap table {margin:0 auto;}
.container.snsconn .connect-wrap table td {font-size:17px;text-align:center;color:#333;height:50px;letter-spacing:-1px;}
.container.snsconn .connect-wrap table td:first-child {text-align:left;}
.container.snsconn .connect-wrap table td:last-child {text-align:left;color:#7e8c8c;}
.container.snsconn .connect-wrap table td .button {border:1px solid #e6e6e6;padding:5px 10px;}

/* SK 회원인증 */
.container.skAuth .sk-01-wrap * {box-sizing: border-box;}
.container.skAuth .sk-01-wrap {position: relative; width: 1050px; padding: 50px 95px; margin: 0 auto; box-sizing: border-box;}
.container.skAuth .sk-01-wrap .title {font-size: 22px; line-height: 100%; font-weight: 500; color: #333333; letter-spacing: -0.5px; margin-bottom: 20px;}
.container.skAuth .sk-01-wrap .step {position: relative; width: 860px; height: 225px; background: #f9f5f2; padding: 30px;}
.container.skAuth .sk-01-wrap .step li {font-size: 15px; color: #666666; line-height: 100%; padding-bottom: 15px; letter-spacing: -0.5px;}
.container.skAuth .sk-01-wrap .step li:last-child {padding-bottom: 0;}
.container.skAuth .sk-01-wrap .input-wrap {position: relative; overflow: hidden; width: 860px; height: 190px; border: 1px solid #e6e6e6; margin-top: 50px;}
.container.skAuth .sk-01-wrap .input-wrap .input-table { width: 430px; height: 188px; padding: 30px; margin-left: 200px; }
.container.skAuth .sk-01-wrap .input-wrap .input-table table * {box-sizing: content-box;}
.container.skAuth .sk-01-wrap .input-wrap .input-table td {height: 35px; padding-bottom: 10px; font-size: 17px; letter-spacing: -0.5px;}
.container.skAuth .sk-01-wrap .input-wrap .input-table td input {height: 33px; border: 1px solid #cccccc; padding: 0 8px;}
.container.skAuth .sk-01-wrap .next-btn {width: 200px; margin: 50px auto;}

.container.skAuth .sk-02-wrap * {box-sizing: border-box;}
.container.skAuth .sk-02-wrap {position: relative; width: 1050px; padding: 50px 125px 100px; margin: 0 auto; box-sizing: border-box;}
.container.skAuth .sk-02-wrap .title {font-size: 22px; line-height: 100%; font-weight: 500; color: #333333; letter-spacing: -0.5px; margin-bottom: 20px;}
.container.skAuth .sk-02-wrap .notice-wrap {position: relative; padding: 70px 0; border: 1px solid #e6e6e6;}
.container.skAuth .sk-02-wrap .notice-wrap .top {font-size: 22px; color: #333333; font-weight: 500; margin-bottom: 30px; letter-spacing: -2px;}
.container.skAuth .sk-02-wrap .notice-wrap p {text-align: center; letter-spacing: -0.5px; color: #666666; font-size: 15px; line-height: 100%; margin-bottom: 10px;}
.container.skAuth .sk-02-wrap .notice-wrap .button {width: 200px; margin: 40px auto 0; height: 60px; line-height: 60px;}

/* 회원가입 기타 */
#id_check_msg { font-size:13px; }
#hpno_check_msg { font-size:13px; }

/* 마케팅수신동의 유도팝업*/
.modal#modalMarketing { display: none; overflow: hidden; outline: 0; z-index: 10401;} 
.modal#modalMarketing h2.wn-modal-header { text-align: center; margin: 15px 0 0; color: #6c5545 } 
.modal#modalMarketing .modal-info-marketing { color: #999; font-size: 16px; padding: 10px 10px 0 10px; letter-spacing: -0.2px; } 
.modal#modalMarketing .modal-dialog { position: relative; width: auto; pointer-events: none; } 
.modal#modalMarketing .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); height: 100%; } 
.modal#modalMarketing .modal-content { position: relative; display: flex; flex-direction: column; width: 370px; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 0; border-radius: 5px; outline: 0; max-width: 580px; margin-left: auto; margin-right: auto; } 
.modal#modalMarketing .wn-modal-body { text-align: left; padding: 16px; } 
.modal#modalMarketing .wn-modal-body img { width: 66%; max-width: 368px; } 
.modal#modalMarketing .wn-modal-body span { display: block; } 
.modal#modalMarketing .wn-modal-footer { display: flex; width: 100%; margin: 0 auto; } 
.modal#modalMarketing .wn-modal-footer button:nth-child(1) { width: 50%; border-bottom-left-radius: 5px; height: 50px; padding: 8px; border-top: 1px solid #cccccc; border-bottom: 0; border-left: 0; border-right: 0px; color: #000; text-align: center; background-color: #fff; -webkit-appearance: none; cursor: pointer; font-size: 18px; } 
.modal#modalMarketing .wn-modal-footer button:nth-child(2) { width: 50%; border-bottom-right-radius: 5px; border: 0; height: 50px; padding: 8px; color: #fff; text-align: center; background-color: #6C5545; -webkit-appearance: none; cursor: pointer; font-size: 18px; }