/* 
 * 설명: 회원가입 페이지 CSS
 * 제작일: 2023-05-24
 */


.pg{max-width: 868px;}
.contents{position: relative;margin-top: 144px;width: 100%;}
.display_pc{display: block;}
.display_mo{display: none !important;}
span.span_r{color: #E20707 !important;}
.sectionbar{width: 100%; height: 1px;background-color: #D9D9D9;}
.btn.btn_b{background-color: #010100; color: #ffffff !important;}


h1{margin-bottom: 50px; font-style: normal; font-weight: 700; font-size: 42px; line-height: 57px; text-align: center; letter-spacing: -0.01em; color: #222222;}

.sns_join{margin-bottom: 80px; padding: 50px 96px; background-color: #ffffff; border: 1px solid #D9D9D9;}
.sns_join.alarm{padding:36.5px; text-align: center; font-style: normal; font-weight: 400; font-size: 18px; line-height: 150%; letter-spacing: -0.5px; color: #555555;}
.sns_join.alarm > span{font-family: 'Lato'; font-weight: 900;}
.sns_join h2{margin-bottom: 40px; text-align: center; font-style: normal; font-weight: 600; font-size: 20px; line-height: 150%; letter-spacing: -0.5px; color: #222222;}
.sns_join .wrap_flex{display: flex;align-items: center; justify-content: space-between;}
.sns_join .wrap_flex > a{display: flex; align-items: center; font-family: 'Pretendard','Noto Sans KR'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 20px; color: #555555;}
.sns_join .wrap_flex > a > img{margin-right: 12px; max-width: 100%; height: auto;}
.sns_join .wrap_flex i.divider{width: 1px; height: 24px; background-color: #e8e8e8;}

.join_wrap{margin-bottom: 100px;}
.join_wrap .join_frame{position: relative; display: flex;align-items: center; justify-content: space-between;}
.join_wrap .join_frame:nth-child(n+2){margin-top: 42px;}
.join_wrap .join_frame.alarm{margin-top: 16px;}
.join_wrap .join_frame > label{font-style: normal; font-weight: 900; font-size: 24px; line-height: 150%; letter-spacing: -0.5px; color: #222222;}
.join_wrap .join_frame > label > span{margin-left: 6px; font-family: 'Lato'; font-style: normal; font-weight: 900; font-size: 26px; line-height: 24px; letter-spacing: -0.5px; color: #E20707;}

.join_wrap .join_frame .frame_right{display: flex; justify-content: space-between; align-items: center; width: calc(100% - 199px); height: auto;}
.join_wrap .join_frame .frame_right.alarm{align-items: center; justify-content: flex-start; font-style: normal; font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: -0.02em; color: #777777;}
.join_wrap .join_frame .frame_right.alarm_r{color: #E20707;}
.join_wrap .join_frame .frame_right.alarm > img{margin-right: 6px;}
.join_wrap .join_frame .frame_right.hp > a{padding:24px; width: 100%; height: auto; font-style: normal; font-weight: 600; font-size: 20px; line-height: 20px; color: #010100; display: flex; align-items: center; justify-content: center; background-color: #FFFFFF; border: 2px solid #999999; border-radius: 2px;}
.join_wrap .join_frame .frame_right.hp > a > img{max-width: 100%; height: auto;}
.join_wrap .join_frame .frame_right.hp > a > img:nth-child(1){margin-right: 20px;}
.join_wrap .join_frame .frame_right.hp > a > img:nth-child(2){ margin-left: 12px;}

.join_wrap .join_frame .frame_right > input{padding:23px 20px; width: 100%; height: auto; font-style: normal; font-weight: 400; font-size: 18px; line-height: 20px; color: #777777; background-color: #F6F6F6; border: 1px solid #D9D9D9; border-radius: 2px;}

.join_wrap .join_frame .frame_right > input.fail{color: #E20707; background-color: #FFF2F3; border: 1px solid #E20707;}
.join_wrap .join_frame .frame_right > input.fail::placeholder{color: #E20707;}
.join_wrap .join_frame .frame_right > input.fail:focus{outline: 1px solid #E20707; border-radius: 2px;}

.join_wrap .join_frame .frame_right.with > input{width: calc(70% - 5px);}
.join_wrap .join_frame .frame_right > a.btn{padding: 23px; font-style: normal; font-weight: 700; font-size: 20px; line-height: 20px;}
.join_wrap .join_frame .frame_right.with > a.btn{width: calc(30% - 5px); height: 100%;}
.join_wrap .join_frame .frame_right .eye_icon{display: inline-block; background-image: url(../images/join/icon_blind_gray.png); background-position: center; background-size: cover; width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; cursor: pointer;}
.join_wrap .join_frame .frame_right .eye_icon.active {background-image: url(../images/join/icon_eye_gray.png);}

.join_wrap .join_frame .frame_right .sns_item{display: flex; align-items: center; justify-content: flex-start;}
.join_wrap .join_frame .frame_right .sns_item > input[type="checkbox"]{position: relative; min-width: 30px; width: 30px; height: 30px;}
.join_wrap .join_frame .frame_right .sns_item > input[type="checkbox"]:checked::after { position: absolute; content: ''; width: 30px; height: 30px; left: 50%; top: 50%;transform: translate(-50% , -50%);box-sizing: border-box;background-color: #E20707;background-image: url(../images/join/check.png);background-repeat: no-repeat;background-position: center;border-radius: 2px;}
.join_wrap .join_frame .frame_right .sns_item > label{margin-left: 18px; font-style: normal; font-weight: 500; font-size: 22px; line-height: 160%; letter-spacing: -1px; color: #010100;}

.join_wrap .join_frame .title3 {font-size:10px}
.join_wrap .join_frame .title3 .point_red{font-size:11px}

.join_sns_url {margin-top: 50px;display:flex; flex-direction:column;}
.join_sns_url .tit_sub1 {margin-bottom: 44px; font-style: normal; font-weight: 900; font-size: 24px; line-height: 150%; letter-spacing: -0.5px; color: #222222;}
.join_sns_url .tit_sub1 .span_r {margin-left: 6px; font-family:'Lato'; font-weight: 900;}
.join_sns_url .title3 {font-size: 17px; display:inline;}
.join_sns_url .prev_wrap {max-width:1320px}
.join_sns_url .sns_url {width:auto; font-size: 17px; padding-bottom:5px; height:auto;} 
.point_gray1 {color:gray;}
.join_sns_url .viewTable #idInstagramIdx {height: auto;}
/* .join_sns_url .viewTable #idYoutubeList .top_line {padding-top:20px;} */
.join_sns_url .viewTable .with_btn {width: calc(100% - 199px);}
.join_sns_url .viewTable .with_btn .numberOnly {margin-bottom:15px;}
.join_sns_url .viewTable .with_btn input[type="text"]{width: 60%; padding: 19px 20px; background-color:#F6F6F6; line-height:20px;border:1px solid #D9D9D9;}
.join_sns_url .viewTable input[type="text"]{width: 60%; padding: 19px 20px; background-color:#F6F6F6; line-height:20px;border:1px solid #D9D9D9;}
/* .btn {padding: 0; position:absolute; right:0; top:4px; width:40px; height:40px;background:#1c1c1c; color:#fff; text-align:center; vertical-align:middle;} */
.join_sns_url .viewTable .sns_name{font-size:20px; line-height:150%; letter-spacing:-0.5px; color:#222222; font-weight:900;font-style:normal;}
.join_sns_url .viewTable .join_etc {padding-bottom:15px;}
.join_sns_url .viewTable .join_etc input[type="text"]{width:100%;padding-bottom:15px;}

.join_agree{margin-top: 76px;}
.join_agree .tit_sub1{margin-bottom: 44px; font-family: 'Lato'; font-style: normal; font-weight: 900; font-size: 24px; line-height: 150%; letter-spacing: -0.5px; color: #222222;}
.join_agree .tit_sub1 span{margin-left: 6px; font-family: 'Lato'; font-style: normal; font-weight: 900; font-size: 26px; line-height: 24px; letter-spacing: -0.5px;}

.join_agree .body_sub1{margin-bottom: 80px;}
.join_agree .body_sub1 .body_frame{display: flex; align-items: flex-start; justify-content: flex-start;}
.join_agree .body_sub1 .body_frame:nth-child(n+2){margin-top: 30px;}
.join_agree .body_sub1 .body_frame.alarm{margin-top: 12px;}
.join_agree .body_sub1 .body_frame input[type="checkbox"]{position: relative; min-width: 30px; margin-top: 2.5px; width: 30px; height: 30px;}
.join_agree .body_sub1 .body_frame input[type="checkbox"]:checked::after { position: absolute; content: ''; width: 30px; height: 30px; left: 50%; top: 50%;transform: translate(-50% , -50%);box-sizing: border-box;background-color: #E20707;background-image: url(../images/join/check.png);background-repeat: no-repeat;background-position: center;border-radius: 2px;}
.join_agree .body_sub1 .body_frame .frame_r{display: flex; position: relative; margin-left: 18px; font-style: normal; font-weight: 500; font-size: 22px; line-height: 160%; letter-spacing: -1px; color: #010100;}
.join_agree .body_sub1 .body_frame .frame_r > div{position: relative; font-style: normal; font-weight: 500; font-size: 22px; line-height: 160%; letter-spacing: -1px; color: #010100;}
.join_agree .body_sub1 .body_frame.alarm > .frame_r{margin-left: 48px; font-style: normal; font-weight: 400; font-size: 16px; line-height: 160%; letter-spacing: -0.02em; color: #999999;}
.join_agree .body_sub1 .body_frame .frame_r span{margin-right: 10px; font-style: normal; font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -1px; color: #999999;}

.join_agree .body_sub1 .body_frame .frame_r > a{margin-left: 12px;display: flex; align-items: center;}
.join_agree .body_sub1 .body_frame .frame_r > a >img{margin-top: 4px; vertical-align: baseline; max-width: 100%; height: auto; }

/* #join .contents .body_sub1 .body_frame .frame_r::after {position: absolute; right: 0; top: 0; content: ''; width: 9px; height: 9px; border-top: 1.5px solid #000; border-right: 1.5px solid #000; transform: rotate(45deg);} */
#join .contents p.btns{margin-bottom: 180px;}
#join .contents p.btns >a.btn{padding: 30px; font-style: normal; font-weight: 700; font-size: 22px; line-height: 20px;}
#join .contents p.btns >a.btn:hover{color: #ffffff;}
#join .contents p.btns >a.sns_join{display: flex; align-items: center; justify-content: center; padding: 25px; font-style: normal; font-weight: 500; font-size: 22px; line-height: 20px; color: #010100; background-color: #ffffff; border: 1px solid #D9D9D9; border-radius: 2px;}
#join .contents p.btns >a.sns_join:hover{color: #010100;}
#join .contents p.btns >a.sns_join > img{margin-right: 16px;}

.contents.join_complete{text-align: center;}
.contents.join_complete > img{margin-bottom: 42px; max-width: 130px; height: auto;}
.contents.join_complete h1{margin-bottom: 24px; line-height:140%; letter-spacing: -0.04em; color: #010100;}
.contents.join_complete p.join_complete{margin-bottom: 60px; font-style: normal; font-weight: 500; font-size: 24px; line-height: 150%; letter-spacing: -0.04em; color: #555555;}
.contents.join_complete .complete_alarm{margin-bottom: 80px; padding: 31px; font-style: normal; font-weight: 400; font-size: 18px; line-height: 160%; letter-spacing: -0.5px; color: #555555; background: #F6F6F6; border-radius: 2px;}

@media (max-width: 900px) {
	.display_pc{display: none !important;}
    .display_mo{display: block !important;}
    .contents{margin-top: 38px;}
    
    h1{margin-bottom: 24px; font-size: 24px; line-height: 33px;}

    .sns_join{margin-bottom: 50px; padding:0px; background-color: #ffffff; border: none;}
    .sns_join.alarm{padding:17px; text-align: center; font-family: 'Lato'; font-style: normal; font-weight: 900; font-size: 12px; line-height: 150%; letter-spacing: -0.5px; border: 1px solid #D9D9D9; border-radius: 2px;}
    .sns_join.alarm > span{font-family: 'Lato'; font-style: normal; font-weight: 900; font-size: 12px; line-height: 150%; letter-spacing: -0.5px;}
    .sns_join h2{margin-bottom: 10px; font-weight: 700; font-size: 14px; color: #E20707;}
    .sns_join .wrap_flex{flex-wrap: wrap; justify-content: center; gap: 7px; margin:0 auto;}
    .sns_join .wrap_flex > a{padding: 14px; /*width: 100%;*/ justify-content: center; font-size: 14px; /*border: 1px solid #E8E8E8;*/ border-radius: 2px;}
    .sns_join .wrap_flex > a > img{/*margin-right: 6px;width: 14px; height: 14px;*/ margin-right: 0; max-width: 100%;}
    .sns_join .wrap_flex i.divider{width: 0; height: 0; background-color: transparent;}

    .join_wrap{margin-bottom: 50px;}
    .join_wrap .join_frame{flex-wrap: wrap;}
    .join_wrap .join_frame:nth-child(n+2){margin-top: 30px;}
    .join_wrap .join_frame.alarm{margin-top: 12px;}
    .join_wrap .join_frame > label{margin-bottom: 10px; font-size: 14px; letter-spacing: -0.2px;}
    .join_wrap .join_frame > label > span{margin-left: 4px; font-size: 14px; line-height: 10px; letter-spacing: -0.2px;}

    .join_wrap .join_frame .frame_right{width: 100%; height: auto;}
    .join_wrap .join_frame .frame_right.alarm{align-items: flex-start; font-size: 12px; line-height: 20px;}
    .join_wrap .join_frame .frame_right.alarm > img{margin-top: 3px; width: 14px; height: 14px;}
    .join_wrap .join_frame .frame_right.hp > a{padding:17.34px; font-size: 14px; border: 1px solid #999999;}
    .join_wrap .join_frame .frame_right.hp > a > img:nth-child(1){margin-right: 12px; width: 16px; height: 21px;}
    .join_wrap .join_frame .frame_right.hp > a > img:nth-child(2){margin-left: 8px; width: 4px; height: 8px;}

    .join_wrap .join_frame .frame_right > input{padding:10px 12px; font-size: 13px;}

    .join_wrap .join_frame .frame_right > input.fail{color: #E20707; background-color: #FFF2F3; border: 1px solid #E20707;}
    .join_wrap .join_frame .frame_right > input.fail::placeholder{color: #E20707;}
    .join_wrap .join_frame .frame_right > input.fail:focus{outline: 1px solid #E20707;}

    .join_wrap .join_frame .frame_right.with > input{width: calc(76% - 5px);}
    .join_wrap .join_frame .frame_right > a.btn{padding: 14.5px 10.5px; font-size: 11px; line-height: 11px;}
    .join_wrap .join_frame .frame_right.with > a.btn{width: calc(24% - 5px);}
    .join_wrap .join_frame .frame_right .eye_icon{width: 24px; height: 24px; right: 12px; top: 70%;}
    .join_wrap .join_frame .frame_right .eye_icon.active {background-image: url(../images/join/icon_eye_gray.png);}

    .join_wrap .join_frame .frame_right .sns_item{display: flex; align-items: center; justify-content: flex-start;}
    .join_wrap .join_frame .frame_right .sns_item > input[type="checkbox"]{position: relative; min-width: 16px; width: 16px; height: 16px;}
    .join_wrap .join_frame .frame_right .sns_item > input[type="checkbox"]:checked::after {background-size: 8px; width: 16px; height: 16px;}
    .join_wrap .join_frame .frame_right .sns_item > label{margin-left: 10px; font-weight: 400; font-size: 13px; line-height: 150%; letter-spacing: -0.5px;}

	.join_sns_url .tit_sub1 {margin-bottom: 30px; font-style: normal; font-weight: 900; font-size: 14px; line-height: 150%; letter-spacing: -0.5px; color: #222222;}
	.join_sns_url .title3 {font-size:12px; display:block;}
	.join_sns_url .sns_url {width:auto; font-size: 12px; padding-bottom:20px;} 
	.join_sns_url .viewTable .with_btn input[type="text"]{width:100%;}
	.join_sns_url .viewTable .join_etc input[type="text"]{width:100%; font-size:12px;}
	.join_sns_url .blog_url {width:100% !important;}
	
    .join_agree{margin-top: 50px;}
    .join_agree .tit_sub1{margin-bottom: 16px; font-size: 14px; letter-spacing: -0.2px;}
    .join_agree .tit_sub1 span{margin-left: 4px; font-size: 14px; line-height: 10px; letter-spacing: -0.2px;}

    .join_agree .body_sub1{margin-bottom: 40px;}
    .join_agree .body_sub1 .body_frame{display: flex; align-items: flex-start; justify-content: flex-start;}
    .join_agree .body_sub1 .body_frame:nth-child(n+2){margin-top: 12px;}
    .join_agree .body_sub1 .body_frame.alarm{margin-top: 8px;}
    .join_agree .body_sub1 .body_frame input[type="checkbox"]{min-width: 16px; margin-top: 2.5px; width: 16px; height: 16px;}
    .join_agree .body_sub1 .body_frame input[type="checkbox"]:checked::after {background-size: 8px; width: 16px; height: 16px;}
    .join_agree .body_sub1 .body_frame .frame_r{width: 100%; align-items: flex-start; justify-content: space-between; margin-left: 10px; font-weight: 400; font-size: 13px; line-height: 150%; letter-spacing: -0.5px;}
    .join_agree .body_sub1 .body_frame .frame_r > div{font-weight: 400; font-size: 13px; line-height: 150%; letter-spacing: -0.5px;}
    .join_agree .body_sub1 .body_frame.alarm > .frame_r{margin-left: 26px; font-size: 12px;}
    .join_agree .body_sub1 .body_frame .frame_r span{margin-right: 4px; font-weight: 400; font-size: 13px; line-height: 150%; letter-spacing: -0.5px;}

    .join_agree .body_sub1 .body_frame .frame_r > a{margin-left: 12px;}
    .join_agree .body_sub1 .body_frame .frame_r > a >img{vertical-align: baseline; min-width: 8px; width: 8px; max-width: 100%; height: auto; }

    /* #join .contents .body_sub1 .body_frame .frame_r::after {position: absolute; right: 0; top: 0; content: ''; width: 9px; height: 9px; border-top: 1.5px solid #000; border-right: 1.5px solid #000; transform: rotate(45deg);} */
    #join .contents p.btns{margin-bottom: 60px;}
    #join .contents p.btns >a.btn{padding: 18px; font-size: 15px; line-height: 20px;}
    #join .contents p.btns >a.sns_join{padding: 16px; font-size: 15px; line-height: 20px;}
    #join .contents p.btns >a.sns_join > img{margin-right: 6px; width: 20px; height: 20px;}

    
    .contents.join_complete{margin-top: 42px;}
    .contents.join_complete > img{margin-bottom: 22px; max-width: 80px;}
    .contents.join_complete h1{margin-bottom: 12px; letter-spacing: -0.03em; color: #222222;}
    .contents.join_complete p.join_complete{margin-bottom: 16px; font-size: 14px;}
    .contents.join_complete .complete_alarm{margin-bottom: 36px; padding: 14.5px; font-size: 12px; line-height: 140%;}

}