@charset "utf-8";

header,
footer{margin:0 auto;width:100%;box-shadow: 5px 5px 5px 5px #d9d9d9;background:#fff;}

/*---bottom Tab---*/
footer {display:none;}


/*--------------common_회원관련공통--------------*/
.user-container{margin:0 auto;}

/*--header--*/
header .user-container{position: relative;padding:15px 30px;max-width:780px;display:flex;}
header a.backUrl, header a.homeUrl{font-size:22px;font-weight:600;color:#000;width:max-content;display:inline-block;padding: 10px 10px 10px 30px;}
header a.backUrl{background:url('/images/member/arrow-back-outline.png') no-repeat 0 13px/19px;text-align: left;}
header a.homeUrl{margin-left:auto;background:url('/images/member/bx-home-alt.png') no-repeat 10px 13px/19px;}
header a.homeUrl span{font-size:0;text-indent:999}

/*--content--*/
#pik{position: relative;margin:0 auto;padding:20px 30px 60px 30px;width:100%;max-width:780px;background:#fff;min-height: calc(100vh - 75px);}

#content {margin:0 auto;width:100%;max-width:96%;}
#content h3.title{margin-bottom:2.5rem;padding:10px 0;font-size:30px;text-align:center;letter-spacing:-1px;color:#000;font-weight:600;}
#content h4.title{margin-bottom:2.5rem;font-size:24px;text-align:center;letter-spacing:-1px;color:#000;font-weight:600;line-height:1.8;}

#content.user-container{margin:30px auto;max-width:360px;/*position:absolute;left: 50%;top: 45%;transform: translate(-50%, -50%);*/}

/*content in logo*/
#content .loginLogo.user img{margin:0 auto 50px auto;max-width:270px;}
#content .loginLogo.join img{margin: 0 auto 30px auto;max-width: 160px;}

footer{display:none;}

/* 입력폼 기본 */
#content .box { position:relative; display: block; height: 54px; border: solid 1px #dadada;padding: 10px 12px; box-sizing: border-box; background: #fff;}
#content .box > span.text{font-size: 16px; display: block; padding: 15px 0px 0px;}
#content .box input { box-sizing:border-box; padding:15px 0 0; width:100%; height:100%; border:0 none; color:#595f63; outline:none;font-size:16px;font-weight:500;}
#content .box input::-moz-placeholder{display:none;color:transparent}
#content .box input::placeholder{display:none;color:transparent}
#content .box label { position:absolute; left:12px; bottom:12px; width:100%; height:100%;  text-align:left; pointer-events:none; }
#content .box label span { position:absolute; left:0; bottom:5px; transition:all .2s ease; }
#content .box > span.text + label span,
#content .box input:focus + label span,
#content .box input:not(:placeholder-shown) + label span { transform:translateY(-125%); font-size:12px; color:#5fa8d3;}
#content .box input:not(:-moz-placeholder-shown) + label span { transform:translateY(-125%); font-size:12px; color:#5fa8d3;}

/* 생일 */
.bir-wrap { display: flex; justify-content: space-between; align-items: center; }
.birth .bir { position: relative; display: inline-flex !important;  flex-direction: column; width: 32%; vertical-align: top; }
.birth .bir-yy{width: 34%;}

#content input.btn1{width:calc(100% - 85px);}
#content input.btn2{width:calc(100% - 60px);}

.step_url { position: absolute; top: 16px; right: 13px; font-size: 15px; color: #8e8e8e; }
.pswdImg { width: 18px; height: 20px; display: inline-block; position: absolute; top: 50%; right: 16px; margin-top: -10px; cursor: pointer; }

select { width: 100%; height:32px; font-size: 15px; background: #fff url(/images/member/sel_arr_2x.gif) 100% 50% no-repeat; background-size: 20px 8px; -webkit-appearance: none; display: inline-block; text-align: start; border: none; cursor: default; }

/*bottom q*/
.bottomMessage{margin-top:30px;padding-top:30px;border-top: 1px solid #d9d9d9;display:flex;}
.bottomMessage p{text-align:left;}
.bottomMessage a{margin-left:auto;padding-left:20px;text-align:right;color:#1A6DFF;font-weight:500;background: url('/images/member/bx-user.png') no-repeat 0 1px/13px;}
.bottomMessage.login a{padding-left:23px;background: url('/images/member/bx-user-plus.png') no-repeat 0 1px/19px;}

/*buttton*/
.btn_area {margin: 30px 0;}
.button {border:0 none;border-radius: 5px;background-color:#3fa9f5;width:100%;height: 50px;font-size: 20px;font-weight: 600;color:#fff;text-decoration: none;vertical-align: middle;cursor: pointer;transition: background-color .25s ease-in-out,box-shadow .25s ease-in-out;}
.button.active, .button:focus, .button:hover{border:2px solid #3fa9f5; text-decoration: none; color: #3fa9f5; background:#fff; opacity: 1; }

/*error & complete*/
.error_next_box{margin: 0.35rem 0 1rem; line-height: 1.36; font-size:12px;color: #e32d1b;display: none;}/*error*/
#alertTxt {position: absolute; top: 19px; right: 38px; font-size: 12px; color: #e32d1b; display: none;}/*chek*/

#recaptchaComplete{position: absolute;margin-top: 10px;padding: 15px 30px;width: 100%;border-radius: 5px;background: #fff;border: 1px solid #d9d9d9;display: none;}

/*custom chekbox*/
.keep_check{position:relative;text-align:left; margin:15px 0 5px 0;}
.keep_check .input_keep{position: absolute; top: 1px; left: 0; width: 15px; height: 15px;}
.keep_check .keep_text{display: inline-block; font-size: 14px; font-weight: 500; line-height: 18px;}

/*--------------login_메인--------------*/

.field_account{}
.field_account li{position: relative;margin-bottom:15px;} 
.field_account li .inButton{position: absolute;top:11px;right:10px;padding:8.5px 5px;background:/*#ff385c*/#acacac;color:#fff;font-size:12px;border:0 none;border-radius:3px}

.accountTab{margin-bottom:30px;width:100%;text-align:center;}
.accountTab li{padding:15px;width:49%;display:inline-block;border-bottom:1px solid #d9d9d9}
.accountTab li.on{border-bottom:2px solid #000;font-weight:600;}

.agreeBtn{margin-top:25px;}


/*--------------login_계정찾기--------------*/
/*find id/pw*/
.find_wrap,
.relogin_find_wrap{padding: 20px 0 35px; text-align: left }
.find_wrap li, .relogin_find_wrap li{position: relative; display: inline-block }
.find_wrap li+li, .relogin_find_wrap li+li{padding-left: 25px }
.find_wrap li+li::before, .relogin_find_wrap li+li::before{content: ''; position: absolute; top: 3px; left: 10px; width: 1px; height: 12px; border-radius: .5px; background-color: #dadada;}
.find_wrap a{color:#3fa9f5;}

.input-box {margin-bottom: 16px;}/*20230313_추가//제거해도 무방*/
.form-box {padding: 24px;padding-bottom: 80px;}/*20230313_추가//제거해도 무방*/

/*login sns_button*/
.snsLogin{display:flex;}
.snsLogin .leftBox{padding:15px 0;text-align:left;}
.snsLogin .rightbox{margin-left:auto; text-align:right; display: flex;}

.btn.sns {flex: none; width:50px; height: 50px; font-size: 0; text-indent: -999rem; border: none;}
.btn.sns.naver{background: url('/images/member/btn_naver_192x192.png') no-repeat 0 0/50px;}
.btn.sns.kakao{background: url('/images/member/btn_kakao_192x192.png') no-repeat 0 0/50px;}
.btn.sns.apple{background: url('/images/member/btn_apple_192x192.png') no-repeat 0 0/50px;}
.btn.sns+.btn.sns{margin-left: 10px;}

/*step-last*/
.find-end{margin:35px 0;padding:35px 10px;text-align:Center;background:#f5f5f5;}
.find-end p{width: 100%;font-weight:bold;color:#000}

/* 모달 스타일 */
.modal { display: none; /* 모달창 초기값 : 숨김 */ position: fixed; z-index: 50; left:0; top: 0;background-color: #333; width:100%;height:100%;text-align: center; opacity:.95}
.modal-background { display: none; position: fixed; z-index: 9998; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }
.modal-content{position: absolute;background-color: #fff;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: 600px;border-radius: 5px;}
.modal-content p{padding:50px 30px;text-align:Center;font-weight:600;}

/*--------------join1_회원가입 메인--------------*/

/* SNS 로그인 버튼 */
.sns-buttons { display: flex; flex-wrap: wrap; justify-content: center; }
.sns-button { display: flex; align-items: center; justify-content: center; width: 100%; margin: 5px 0; padding: 12px; border: 0 none; border-radius: 5px; font-weight: bold; color: #fff; transition: background-color 0.2s ease-in-out; cursor: pointer; }

.SNS_pikButton:hover { background-color: #ff8a3d33; color: #ff8a3d; }
.SNS_naverButton:hover { background-color: #1ec80033; color: #1ec800; }
.SNS_kakaoButton:hover { background-color: #ffeb30a6; color: #ffeb30; }

/* SNS 로그인 버튼 아이콘 */
.sns-icon { display: inline-block; margin-right: 10px; width: 28px; height: 28px; fill: currentColor; }

/* 투어픽 로그인 버튼 */
.sns-tourpik { background-color: #fff; border: 2px solid #3fa9f5; color: #3fa9f5; }

/* 네이버 로그인 버튼 */
.sns-naver { background-color: #00c63a; }

/* 카카오 로그인 버튼 */
.sns-kakao { background-color: #ffe812; color: #3D1F1D; }

/* 애플 로그인 버튼 */
.sns-apple {background-color: #000; color: #fff;}

/*--------------join2_회원약관--------------*/

#content.terms_wrap { margin: 30px auto; width: 100%; text-align: left; }
#content.terms_wrap h4 { margin: 0 0 2.5rem 0; font-size: 24px; color: #000; font-weight: 600; line-height: 1.4; }

.btn_wrap .btn_agree { justify-content: flex-start; padding: 20px 15px; width: 100%; border-radius: 5px; background: #fff; box-shadow: 0 2px 13px 0 rgba(17, 17, 17, .08); border: none; text-align: left; font-weight: bold; }

.terms_wrap ul { padding: 1.5rem 5px 2.5rem 5px; font-size: 14px; }
.terms_wrap li { padding: .6rem 0; display: flex; }
.terms_wrap li:nth-child(4) { margin-top: 15px; padding-top: 20px; border-top: 1px solid #efefef; }
.terms_wrap li label { margin-left: 5px; text-align: left; }
.terms_wrap li a { margin-left: auto; text-align: right; color: rgb(55, 165, 247); text-decoration: underline; }

.term { margin:1.5rem 15px 3rem 15px; line-height: 1.4;text-align: justify; }
.term h2{margin-bottom: 10px; font-size: 21px; color: #333; font-weight: 600; }
.term h3 { margin-bottom: 10px; font-size: 18px; color: #333; font-weight: 600; }

ul.term > li { margin-bottom: 30px; }
.term ol { margin: 10px 0 0 20px; }
.term ol li { margin-bottom: 10px; }
.term li > ul { margin-top: 15px; }
.term table { margin: 25px 0; width: 100%; text-align: center; border-top: 3px solid #3fa9f5;border-bottom: 1px solid #d9d9d9; border-collapse: separate; }
.term table caption { margin-bottom: 10px; text-align: left; color: #333; font-weight: 600; }
.term table td { border-bottom: 1px solid #d9d9d9;}
.term table td,
.term table th { padding: 15px; border-left: 1px solid #d9d9d9; vertical-align: middle; }
.term table td:first-child,
.term table th:first-child { border-left: 0 none; }
.term table th { background: #f3f3f3; color: #333; border-bottom: 1px solid #d9d9d9; font-weight: 600; }

.list-styleNone{list-style:none;}
.add__ li{list-style-type:circle}

/*--------------join3_입력폼--------------*/
.user_form { /* 전체 폼 스타일링 */ }

/* 입력필드 간격 설정 */ 
.user_form li { margin: 15px 0 8px; }

/* 상단 경계선 스타일링 */ 
.borderTop { margin-top: 20px; padding-top: 10px; border-top: 1px solid #efefef;}

/* legend 요소 숨김 */
.user_form legend {display: none;}

/* 입력 필드 설명*/ 
.description {margin-top: 5px; font-size: 12px; color: #e32d1b; line-height: 1.4;}
.direct-input{margin-left:5px;}

/* 성별 */
.gender { padding-bottom: 10px; display: flex; align-items: center; cursor: pointer; }
.gender label { position: relative; width: 50%; height: 46px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #666; cursor: pointer; }
.gender input { display: none; /* 실제로 체크박스를 보이지 않게 처리 */ }
.gender input:checked + label { background: #3fa9f5; color: #fff; border-color: #3fa9f5; font-weight: 500; /* 체크된 상태의 라벨 스타일링 */ }

/* 국가 */
.country { padding-bottom: 10px; }
.country_fild label { display: inline-block; margin-right: 16px; margin-bottom: 10px; }
.country_Box { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.country_Box label { display: block; margin-bottom: 10px; }
.country_Box select { margin-right: 8px; width: 28%; }
.country_Box input[type="text"] { width: 30%; }

/* 이메일 입력 */
.email { display: flex; flex-direction: row; align-items: center;}
.email .box { display: flex; flex-direction: column; width: 48%;}
.email .box input[type="text"],
.email .box select {width: 100%;}
.at {display: inline-block;width: 40px;text-align: center;font-weight: bold;/* 이메일 주소 @ */}

/* 이메일 수신동의*/
.email-agree {padding: 15px 0;}
.email_agree h5.title { font-weight: bold; }
.email-agree-options { margin: 15px 0; }
.email-agree-options label { margin-right: 20px; }
.email_agree p { margin-top: 10px; font-size: 12px; color:#e32d1b; line-height:1.4;}
.email_agree p:before{content:'※';}

/*보안번호*/
.captcha_box {margin-top:10px;padding:20px 0 10px 0;display: flex; align-items: center;  }
.captcha_box img {margin-right:10px;min-width: 200px; height: 50px; background: #eee;}
.captcha_box .description {font-size: 12px; color: #ff0000; margin: 0 0 0 10px;}

.submitBtn{display: flex; align-items: center; flex-wrap: nowrap;gap:1%;justify-content:center;}
.submitBtn button{width:49%;}
.submitBtn .btnCancle{background: none;color: #888;border: 2px solid #e5e5e5;}

/*---------디바이스 변경----------*/
@media screen and (max-width:779px){
	/*---bottom Tab---*/
	footer { position: fixed; width:100%; bottom:0; left:0; display:block; }
	footer .user-container { padding:15px 0; max-width:780px; position: relative; display:flex; }
	footer li { width:25%; align-items:center; text-align:center; }
	/*임시이미지 -사용이 확정되면 제작예정*/
	footer li a { display:block; height:30px;background: url('https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_home_house_shield_safe_protect-512.png') no-repeat 50%/35px;}
	footer li a span { display:none; }
}

@media screen and (max-width:480px){
	/* 레이아웃 공통 */
	#pik .user-container { max-width: 300px; }
	
	#pik .user-container h3.title { margin-bottom: 20px; font-size: 24px; }

	.user-container .loginLogo.user img { max-width: 250px; }
	.user-container .loginLogo.join img { margin: 20px auto; max-width: 120px; }

	/* find id/pw */
	.find_wrap, .relogin_find_wrap { text-align: center; }

	/* login sns_button */
	.snsLogin { display: block; border-bottom: none; margin-bottom: 40px; padding-bottom: 0; }
	.snsLogin .leftBox { display: none; }
	.snsLogin .rightbox { text-align: center; justify-content: center;}

	/* bottom q */
	.bottomMessage { display: block; }
	.bottomMessage p { text-align: center; }
	.bottomMessage a { margin: 5px auto; padding: 10px 25px; width: max-content; text-align: center; display: block; background: url('/images/member/bx-user-plus.png') no-repeat 0 10px/19px; }
	.bottomMessage.login a { background: url('/images/member/bx-user-plus.png') no-repeat 0 10px/19px; }

	.keep_check { margin-bottom: 20px; }
}

@media screen and (max-width:300px){
	#pik .user-container{max-width:260px;}
	header a{font-size:20px;}
	.user-container .loginLogo.user img{margin-bottom:30px;max-width:200px;}

}


.m_hidden_menu_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9000; display: none;}
.m_hidden_menu{width: 80%;height: 100%;background: #fff;position: fixed;top: 0;left: -320px;z-index: 9000;transition: 0.4s all;box-sizing: border-box;max-width: 320px; display: flex; -webkit-flex-direction: column; flex-direction: column;}
.m_hidden_menu .m_hidden_menu_close_btn{cursor: pointer;position: absolute;top: 27px;right: 20px;}
.m_hidden_menu > ul{flex: 1;}
.m_hidden_menu > ul > .d1{display:block;border-bottom:1px solid rgba(0,0,0,0.1);}
.m_hidden_menu > ul > .d1 > div.parent > a,
.m_hidden_menu > ul > .d1 > div.parent > a:link,
.m_hidden_menu > ul > .d1 > div.parent > a:visited{display: block;font-size: 16x;box-sizing: border-box; color:#333; padding: 15px 20px 15px 25px;font-weight: 500;}

.m_hidden_menu > ul > .d1 > div.parent{display: flex;}
.m_hidden_menu > ul > .d1 > div.parent > a{flex: 1;}
.m_hidden_menu > ul > .d1 > div.parent > span{width: 35%; background: url("/imgs/ico_side_arrow_off.png") no-repeat 80% 45%; background-size: 15px; cursor: pointer;}
.m_hidden_menu > ul > .d1 > .sub > ul > li > a{background:none;} 
.m_hidden_menu > ul > .d1 > div.parent.on > a{color: #39a0e2;}
.m_hidden_menu > ul > .d1 > div.parent.on > span{background: url("/imgs/ico_side_arrow.png") no-repeat 80% 45%; background-size: 15px;}

.m_hidden_menu > ul > .d1 > .sub{display:none; background:#fff}
.m_hidden_menu > ul > .d1 > .sub > ul > .d2{display:block}
.m_hidden_menu > ul > .d1 > .sub > ul > li > a{display:block; padding:12px 20px 5px 30px; font-size: 15px; color:#121212;}
.m_hidden_menu > ul > .d1 > .sub > ul > li > a::before{content: "-";  padding-right: 5px;}
.m_hidden_menu > ul > .d1 > .sub > ul > li:first-child > a{padding-top:12px;}
.m_hidden_menu > ul > .d1 > .sub > ul > li:last-child > a{padding-bottom:14px;}
div.m_hidden_menu ul{overflow-y: auto; height: 100%;}

.left_menu_new div{padding: 25px 20px 0 20px;height: 70px;}
.left_menu_new div span:not(.setBtn) {margin: 0 10px 0 5px;padding-left:40px;font-size:20px;font-weight:600;color:#39a0e2;vertical-align:middle;}
.left_menu_new div button{padding: 5px;border:0 none;vertical-align:middle;border-radius: 3px;}
.left_menu_new div button.login{background:none;font-size:20px;font-weight:600;}
.left_menu_new ul{display:flex; flex-wrap: nowrap; border-top: 1px solid #d1d4ff; border-bottom: 1px solid #d1d4ff; height: auto !important;}
.left_menu_new li{padding: 15px 10px;width: 100%;text-align: center; border-right: 1px solid #d1d4ff;}
.left_menu_new li:last-child{border-right: 0px;}
.left_menu_new li a{color: #1a2287; font-size: 15px; font-weight: bold;}
.left_menu_new div span.setBtn > img{width: 27px; opacity: 0.5; max-width: 100%; display: inline-block; vertical-align: top;}
.left_menu_new div span.login{background: url('/images/logged_icon.webp') no-repeat; background-size: contain;}
.left_menu_new div span.login.none{color: rgb(112, 112, 112); font-weight: 400; background: url('/images/login_icon.png') no-repeat; background-size: contain;}
.left_menu_new div span.login.none > b{color: #333;}
.left_menu_new div span.login.none::after{content: '>'; padding-left: 10px;}

		
/* 2024-07-16 여기부터 APP safe존 처리 */
header{
	padding-top: calc(var(--safeAreaTop2));
	padding-top: calc(var(--safeAreaTop1));
}

/* 앱 하단 영역 채움 */
section#pik div.appBinDiv{
	height: var(--safeAreaBottom2);
	height: var(--safeAreaBottom1);
}