@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

/*로그인*/

/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px){ 
.login_wrap{width: 100%; float:left; height:auto;   display: flex;  justify-content: center;  align-items: center; padding: 50px 0px 100px}
.login_wrap .login_inbox{width: 950px!important; float:left; height:670px; border-radius: 30px; box-shadow:0px 0px 10px 10px rgba(26,26,26,0.02); display: grid; grid-template-columns:auto 45%;  background-color: #fff }
.login_wrap .login_inbox>div.login_bg{width: 100%; float:left; background: url("../../images/mypage/login_bg_small.png")no-repeat right center; background-size:cover; border-radius: 30px; }
.login_wrap .login_inbox>div.item_group{width: 100%; float:left; height: 100%;   display: flex; flex-direction: column; background-color: #fff; padding: 40px 60px 0px ; border-radius:0px 30px 30px 0px; }
    

.login_logo1 { width:100%; height:50px; float:left;   margin-bottom:20px; display: flex;  justify-content:flex-end!important;  align-items: center; flex-direction:row;	box-sizing: border-box; background: url("../../images/common/logo.png")no-repeat right center; background-size: 150px}

.title_type1 { width:100%; float:left; font-size:20px; font-family: 'Pretendard'; font-weight:700;  margin-bottom:30px; color:#000 }
.title_type2 { width:100%; float:left; font-size:17px; font-family: 'Pretendard'; font-weight:700;  margin-top:30px; color:#333; text-align: center }


.login_input {width:100%; position: relative; height:  var(--h-com); position: relative; margin-bottom: 10px; }
.login_input:before{ content: ""; width:0%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000;transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  z-index: 2}
.login_input:hover:before{content: ""; width:100%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000}
	

.login_input input[type=text] {width: 100%; height:  var(--h-com); padding: 0 10px 0px 50px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px 4px 0px 0px!important;}
.login_input input[type=text]:hover {border: none;border: 1px solid #ccc;  outline: none!important}
.login_input input[type=text]:focus{width:100%; position: relative; height: var(--h-com); padding: 0 10px 0 50px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px 4px 0px 0px!important;  border: 1px solid #333!important; position: relative;}
.login_input input[type=text]:focus:before{ content: ""; width:100%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000;transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  z-index: 2}

	
.login_input input[type=password]{width: 100%; height:  var(--h-com);  padding: 0 10px 0px 50px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px 4px 0px 0px!important;}
.login_input input[type=password]:hover {border: none;border: 1px solid #ccc;  outline: none!important}
.login_input input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0 10px 0 50px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px 4px 0px 0px!important;  border: 1px solid #333!important; position: relative;}
.login_input input[type=password]:focus:before{ content: ""; width:100%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000;transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  z-index: 2}


.item_input_bg1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' transform='translate(1 1)'%3E%3Cpath d='M16 18v-2a4 4 0 0 0-4-4H4a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8' cy='4' r='4'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: 17px 12px;
background-size: 5%; box-sizing: border-box;  }

.item_input_bg2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg data-name='Layer 5'%3E%3Cpath d='M9,28H23a3,3,0,0,0,3-3V17a3,3,0,0,0-3-3H12V10a4,4,0,0,1,8,0,1,1,0,0,0,2,0,6,6,0,0,0-12,0v4H9a3,3,0,0,0-3,3v8A3,3,0,0,0,9,28ZM8,17a1,1,0,0,1,1-1H23a1,1,0,0,1,1,1v8a1,1,0,0,1-1,1H9a1,1,0,0,1-1-1Z'/%3E%3Cpath d='M15,21.72V23a1,1,0,0,0,2,0V21.72A2,2,0,0,0,18,20a2,2,0,0,0-4,0A2,2,0,0,0,15,21.72Z'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: 10px 7px;
background-size: 9%; box-sizing: border-box;}


.item_group .btn { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #fff; font-size:16px; font-weight:600; font-family: 'Pretendard'; position: relative ; border-radius: 4px; background-color: var(--div-com2); margin-top: 20px; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); margin-bottom: 30px;cursor: pointer}  
.item_group .btn:hover {  background-color: var(--div-color1); }

.item_group .btn2 { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #333; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color: #fbe600; margin-top: 20px; transition: all 0.3s;  margin-bottom:50px;cursor: pointer}  
.item_group .btn2:before{content: "";   width:25px; height: 25px; background: url("../../images/svg_icon/kakao_icon2.svg")no-repeat left top; background-size: 25px; position: absolute; left:50%; top:12px; margin-left: -90px	}	

.item_group .sbtn_box {  width: 100%; float:left;  display: flex; flex-direction:column; justify-content:center; align-items: center; }	
	
.item_group .sbtn_box .btn_wrap{  width: 100%; float:left;  font-size: 14px;  color: #000; font-weight:500; font-family: 'Pretendard'; margin-bottom:5px; text-align: center}
.item_group .sbtn_box .btn_wrap a { color: var(--div-color1); text-decoration: underline ;  font-size: 14px;  font-weight:500; font-family: 'Pretendard'; }
}

/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.login_wrap{width: 100%; float:left; height:auto;   display: flex;  justify-content: center;  align-items: center; padding: 50px 0px 100px}
.login_wrap .login_inbox{width: 950px!important; float:left; height:670px; border-radius: 30px; box-shadow:0px 0px 10px 10px rgba(26,26,26,0.02); background-color: #fff }
.login_wrap .login_inbox>div.login_bg{display:none;width: 0%; float:left; background: url("../../images/mypage/login_bg_small.png")no-repeat right center; background-size:cover; border-radius: 30px; }
.login_wrap .login_inbox>div.item_group{width: 100%; float:left; height: 100%;   display: flex; flex-direction: column; background-color: #fff; padding: 40px 60px 0px ; border-radius:30px 30px 30px 30px; }
    

.login_logo1 { width:100%; height:50px; float:left;   margin-bottom:20px; justify-content:flex-end!important;  align-items: center; flex-direction:row;	box-sizing: border-box; background: url("../../images/common/logo.png")no-repeat right center; background-size: 150px; display:none;}

.title_type1 { width:100%; float:left; font-size:20px; font-family: 'Pretendard'; font-weight:700;  margin-bottom:30px; color:#000 }
.title_type2 { width:100%; float:left; font-size:17px; font-family: 'Pretendard'; font-weight:700;  margin-top:30px; color:#333; text-align: center }


.login_input {width:100%; position: relative; height:  var(--h-com); position: relative; margin-bottom: 10px; }
.login_input:before{ content: ""; width:0%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000;transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  z-index: 2}
.login_input:hover:before{content: ""; width:100%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000}
	

.login_input input[type=text] {width: 100%; height:  var(--h-com); padding: 0 10px 0px 50px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px 4px 0px 0px!important;}
.login_input input[type=text]:hover {border: none;border: 1px solid #ccc;  outline: none!important}
.login_input input[type=text]:focus{width:100%; position: relative; height: var(--h-com); padding: 0 10px 0 50px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px 4px 0px 0px!important;  border: 1px solid #333!important; position: relative;}
.login_input input[type=text]:focus:before{ content: ""; width:100%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000;transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  z-index: 2}

	
.login_input input[type=password]{width: 100%; height:  var(--h-com);  padding: 0 10px 0px 50px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px 4px 0px 0px!important;}
.login_input input[type=password]:hover {border: none;border: 1px solid #ccc;  outline: none!important}
.login_input input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0 10px 0 50px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px 4px 0px 0px!important;  border: 1px solid #333!important; position: relative;}
.login_input input[type=password]:focus:before{ content: ""; width:100%; position: absolute; bottom: 0px; left: 0px; height: 1px; background-color: #000;transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  z-index: 2}


.item_input_bg1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' transform='translate(1 1)'%3E%3Cpath d='M16 18v-2a4 4 0 0 0-4-4H4a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8' cy='4' r='4'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: 17px 12px;
background-size: 5%; box-sizing: border-box;  }

.item_input_bg2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg data-name='Layer 5'%3E%3Cpath d='M9,28H23a3,3,0,0,0,3-3V17a3,3,0,0,0-3-3H12V10a4,4,0,0,1,8,0,1,1,0,0,0,2,0,6,6,0,0,0-12,0v4H9a3,3,0,0,0-3,3v8A3,3,0,0,0,9,28ZM8,17a1,1,0,0,1,1-1H23a1,1,0,0,1,1,1v8a1,1,0,0,1-1,1H9a1,1,0,0,1-1-1Z'/%3E%3Cpath d='M15,21.72V23a1,1,0,0,0,2,0V21.72A2,2,0,0,0,18,20a2,2,0,0,0-4,0A2,2,0,0,0,15,21.72Z'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: 10px 7px;
background-size: 9%; box-sizing: border-box;}


.item_group .btn { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #fff; font-size:16px; font-weight:600; font-family: 'Pretendard'; position: relative ; border-radius: 4px; background-color: var(--div-com2); margin-top: 20px; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); margin-bottom: 30px;cursor: pointer}  
.item_group .btn:hover {  background-color: var(--div-color1); }

.item_group .btn2 { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #333; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color: #fbe600; margin-top: 20px; transition: all 0.3s;  margin-bottom:50px;cursor: pointer}  
.item_group .btn2:before{content: "";   width:25px; height: 25px; background: url("../../images/svg_icon/kakao_icon2.svg")no-repeat left top; background-size: 25px; position: absolute; left:50%; top:12px; margin-left: -90px	}	

.item_group .sbtn_box {  width: 100%; float:left;  display: flex; flex-direction:column; justify-content:center; align-items: center; }	
	
.item_group .sbtn_box .btn_wrap{  width: 100%; float:left;  font-size: 14px;  color: #000; font-weight:500; font-family: 'Pretendard'; margin-bottom:5px; text-align: center}
.item_group .sbtn_box .btn_wrap a { color: var(--div-color1); text-decoration: underline ;  font-size: 14px;  font-weight:500; font-family: 'Pretendard'; }


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/








/*회원가입 */

/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.join_wrap{width: 100%; float:left; height:auto;   display: flex;  justify-content: center;  align-items: center; padding: 50px 0px 100px}
.join_wrap .join_inbox{width: 600px!important; float:left;  border-radius: 30px; box-shadow:0px 0px 10px 10px rgba(17,17,17,0.02);  background-color: #fff }

.join_wrap .join_inbox .item_group2{width: 100%; float:left; height: 100%;   display: flex; flex-direction: column; background-color: #fff; padding: 40px 60px 40px ; border-radius:30px}     
    

.join_logo1 { width:100%; height:50px; float:left;   margin-bottom:20px; display: flex;  justify-content:flex-end!important;  align-items: center; flex-direction:row;	box-sizing: border-box; background: url("../../images/common/logo.png")no-repeat right center; background-size: 150px}

.join_title_type1 { width:100%; float:left; font-size:20px; font-family: 'Pretendard'; font-weight:700;  margin-bottom:30px; color:#000 }
.join_title_type2 { width:100%; float:left; font-size:17px; font-family: 'Pretendard'; font-weight:700;  margin-top:30px; color:#333; text-align: center }


.member_set {   float:left; width:100%; margin-bottom: 20px }
.member_set .member_tit { float:left; width:100%; font-family: 'Pretendard'; font-weight:600; font-size: 16px; margin-bottom: 10px;color:#333; letter-spacing: -1px}
.member_set .textfd_wrap{ float:left; width: 100%; display: grid; grid-template-columns:auto 110px; gap:5px;  }

	
.member_set2 {   float:left; width:100%; margin-bottom: 20px }
.member_set2 .member_tit2 { float:left; width:100%; font-family: 'Pretendard'; font-weight:600; font-size: 16px; margin-bottom: 10px;color:#333; letter-spacing: -1px}
.member_set2 .textfd_wrap2{ float:left; width: 100%;  }	
.member_set2 .textfd_wrap3{ float:left; width: 100%; display: grid; grid-template-columns:auto 45px; gap:5px;  }
	
.textfd_wrap input[type=text] {width: 100%; height:  var(--h-com); padding:  0px 10px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px !important;}
.textfd_wrap input[type=text]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap input[type=text]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap input[type=text]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}

	
.textfd_wrap input[type=password]{width: 100%; height:  var(--h-com);  padding: 0px 10px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px!important;}
.textfd_wrap input[type=password]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap input[type=password]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}

	
.textfd_wrap2 input[type=text] {width: 100%; height:  var(--h-com); padding:  0px 10px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px !important;}
.textfd_wrap2 input[type=text]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap2 input[type=text]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap2 input[type=text]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}

	
.textfd_wrap2 input[type=password]{width: 100%; height:  var(--h-com);  padding: 0px 10px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px!important;}
.textfd_wrap2 input[type=password]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap2 input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap2 input[type=password]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}	
	
.textfd_wrap2 input[type=number] {width: 100%; height:  var(--h-com); padding:  0px 10px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px !important;}
.textfd_wrap2 input[type=number]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap2 input[type=number]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap2 input[type=number]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}	
	
	
	
	
	
	
.textfd_wrap3 input[type=password]{width: 100%; height:  var(--h-com);  padding: 0px 10px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px!important;}
.textfd_wrap3 input[type=password]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap3 input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap3 input[type=password]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}		
	
	
	
.check_btn { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px 30px 0px 10px; box-sizing: border-box; color: #fff; font-size: 14px; font-weight:500; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color:#000; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%);cursor: pointer} 
.check_btn:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; right:4px; top:12px; }		


.check_btn_on { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px 30px 0px 10px; box-sizing: border-box; color: #fff; font-size: 14px; font-weight:500; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color:var(--div-color1); transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); cursor: pointer} 
.check_btn_on:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; right:4px; top:12px; }		
	

.check_btn2 { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px 10px; box-sizing: border-box; position: relative ;  border-radius: 4px; background-color:#000; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%);cursor: pointer} 
.check_btn2:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; left:12px; top:12px; }		


.check_btn2_on { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px  10px; box-sizing: border-box;  position: relative ;  border-radius: 4px; background-color:var(--div-color1); transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); cursor: pointer} 
.check_btn2_on:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; left:12px; top:12px; }			
	
	
	
	
.info_use { float:left; width:100%;  color: #ff0000; font-size:15px; line-height:100%;  font-weight:500; font-family: 'Pretendard'; position: relative; padding-left: 25px; margin: 15px 0px; }
.info_use:before{content: "";   width:20px; height: 20px; background: url("../../images/svg_icon/info_use_icon.svg")no-repeat left top; background-size: 20px; position: absolute; left:0px; top:-3px; 	}	

.item_group2 .btn { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ; border-radius: 4px; background-color: var(--div-com2); margin-top: 20px; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); margin-bottom: 30px;cursor: pointer}  

.item_group2 .btn:hover {  background-color: var(--div-color1); }

.item_group2 .btn2 { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #333; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color: #fbe600; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px;cursor: pointer}  
.item_group2 .btn2:before{content: "";   width:25px; height: 25px; background: url("../../images/svg_icon/kakao_icon2.svg")no-repeat left top; background-size: 25px; position: absolute; left:50%; top:12px; margin-left: -90px	}	

.item_group2 .sbtn_box2 {  width: 100%; float:left;  }	
	
.item_group2 .sbtn_box2 .btn_wrap2{  width: 100%; float:left;  font-size: 14px;  color: #000; font-weight:500; font-family: 'Pretendard'; margin-bottom:5px; text-align: center}
.item_group2 .sbtn_box2 .btn_wrap2 a { color: var(--div-color1); text-decoration: underline ;  font-size: 14px;  font-weight:500; font-family: 'Pretendard'; }

.email_input_send_button_container{ display: flex !important;     -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } 
.r_input_l_button{padding-top: .75rem !important; padding-bottom: .75rem !important;margin-left:1rem!important; }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.join_wrap{width: 100%; float:left; height:auto;   display: flex;  justify-content: center;  align-items: center; padding: 50px 0px 100px}
.join_wrap .join_inbox{width: 600px!important; float:left;  border-radius: 30px; box-shadow:0px 0px 10px 10px rgba(17,17,17,0.02);  background-color: #fff }

.join_wrap .join_inbox .item_group2{width: 100%; float:left; height: 100%;   display: flex; flex-direction: column; background-color: #fff; padding: 20px 30px 20px; border-radius:30px}     
    

.join_logo1 { width:100%; height:50px; float:left;   margin-bottom:20px; display: none;  justify-content:flex-end!important;  align-items: center; flex-direction:row;	box-sizing: border-box; background: url("../../images/common/logo.png")no-repeat right center; background-size: 150px}

.join_title_type1 { width:100%; float:left; font-size:20px; font-family: 'Pretendard'; font-weight:700;  margin-bottom:30px; color:#000 }
.join_title_type2 { width:100%; float:left; font-size:17px; font-family: 'Pretendard'; font-weight:700;  margin-top:30px; color:#333; text-align: center }


.member_set {   float:left; width:100%; margin-bottom: 20px }
.member_set .member_tit { float:left; width:100%; font-family: 'Pretendard'; font-weight:600; font-size: 16px; margin-bottom: 10px;color:#333; letter-spacing: -1px}
.member_set .textfd_wrap{ float:left; width: 100%; display: grid; grid-template-columns:auto 110px; gap:5px;  }

	
.member_set2 {   float:left; width:100%; margin-bottom: 20px }
.member_set2 .member_tit2 { float:left; width:100%; font-family: 'Pretendard'; font-weight:600; font-size: 16px; margin-bottom: 10px;color:#333; letter-spacing: -1px}
.member_set2 .textfd_wrap2{ float:left; width: 100%;  }	
.member_set2 .textfd_wrap3{ float:left; width: 100%; display: grid; grid-template-columns:auto 45px; gap:5px;  }
	
.textfd_wrap input[type=text] {width: 100%; height:  var(--h-com); padding:  0px 10px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px !important;}
.textfd_wrap input[type=text]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap input[type=text]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap input[type=text]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}

	
.textfd_wrap input[type=password]{width: 100%; height:  var(--h-com);  padding: 0px 10px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px!important;}
.textfd_wrap input[type=password]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap input[type=password]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}

	
.textfd_wrap2 input[type=text] {width: 100%; height:  var(--h-com); padding:  0px 10px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px !important;}
.textfd_wrap2 input[type=text]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap2 input[type=text]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap2 input[type=text]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}

	
.textfd_wrap2 input[type=password]{width: 100%; height:  var(--h-com);  padding: 0px 10px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px!important;}
.textfd_wrap2 input[type=password]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap2 input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap2 input[type=password]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}	
	
.textfd_wrap2 input[type=number] {width: 100%; height:  var(--h-com); padding:  0px 10px; line-height: var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1);  font-family: 'Pretendard'; font-weight:400; background-color: #ffffff!important; border-radius: 4px !important;}
.textfd_wrap2 input[type=number]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap2 input[type=number]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap2 input[type=number]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}	
	
	
	
	
	
	
.textfd_wrap3 input[type=password]{width: 100%; height:  var(--h-com);  padding: 0px 10px; line-height:  var(--h-com); color: #333; border: solid 1px #cccccc; font-size:var(--f-s1); font-family: 'Pretendard'; font-weight:400;  background-color: #ffffff!important; border-radius: 4px!important;}
.textfd_wrap3 input[type=password]:hover { border: 1px solid #ccc!important;  outline: none!important}
.textfd_wrap3 input[type=password]:focus{width:100%; position: relative; height: var(--h-com); padding: 0px 10px; line-height:  var(--h-com);; color: #333; font-size:14px; font-family: 'Pretendard'; font-weight:400;  background-color:#fff; border-radius:4px !important;  border: 1px solid #333!important; 
	position: relative; outline: none!important}
.textfd_wrap3 input[type=password]:focus:hover {border: 1px solid #333!important;  background-color: #fff!important;  box-shadow:1px 1px 10px rgba(24,43,255,0.1);outline: none!important}		
	
	
	
.check_btn { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px 30px 0px 10px; box-sizing: border-box; color: #fff; font-size: 14px; font-weight:500; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color:#000; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%);cursor: pointer} 
.check_btn:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; right:4px; top:12px; }		


.check_btn_on { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px 30px 0px 10px; box-sizing: border-box; color: #fff; font-size: 14px; font-weight:500; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color:var(--div-color1); transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); cursor: pointer} 
.check_btn_on:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; right:4px; top:12px; }		
	

.check_btn2 { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px 10px; box-sizing: border-box; position: relative ;  border-radius: 4px; background-color:#000; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%);cursor: pointer} 
.check_btn2:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; left:12px; top:12px; }		


.check_btn2_on { width: 100%; height:var(--h-com)!important; line-height: var(--h-com)!important; float:left; padding:0px  10px; box-sizing: border-box;  position: relative ;  border-radius: 4px; background-color:var(--div-color1); transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); cursor: pointer} 
.check_btn2_on:before{content: "";   width:30px; height:30px; background: url("../../images/svg_icon/check_icon.svg")no-repeat left top; background-size:20px; position: absolute; left:12px; top:12px; }			
	
	
	
	
.info_use { float:left; width:100%;  color: #ff0000; font-size:15px; line-height:100%;  font-weight:500; font-family: 'Pretendard'; position: relative; padding-left: 25px; margin: 15px 0px; }
.info_use:before{content: "";   width:20px; height: 20px; background: url("../../images/svg_icon/info_use_icon.svg")no-repeat left top; background-size: 20px; position: absolute; left:0px; top:-3px; 	}	

.item_group2 .btn { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ; border-radius: 4px; background-color: var(--div-com2); margin-top: 20px; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); margin-bottom: 30px;cursor: pointer}  

.item_group2 .btn:hover {  background-color: var(--div-color1); }

.item_group2 .btn2 { width: 100%; height: 50px!important; line-height: 50px!important; float:left; padding:0px 20px; box-sizing: border-box; color: #333; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius: 4px; background-color: #fbe600; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px;cursor: pointer}  
.item_group2 .btn2:before{content: "";   width:25px; height: 25px; background: url("../../images/svg_icon/kakao_icon2.svg")no-repeat left top; background-size: 25px; position: absolute; left:50%; top:12px; margin-left: -90px	}	

.item_group2 .sbtn_box2 {  width: 100%; float:left;  }	
	
.item_group2 .sbtn_box2 .btn_wrap2{  width: 100%; float:left;  font-size: 14px;  color: #000; font-weight:500; font-family: 'Pretendard'; margin-bottom:5px; text-align: center}
.item_group2 .sbtn_box2 .btn_wrap2 a { color: var(--div-color1); text-decoration: underline ;  font-size: 14px;  font-weight:500; font-family: 'Pretendard'; }

.email_input_send_button_container{ display:block; } 
.r_input_l_button{ width:100%; margin-top:10px; }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/










/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.agreement_outbox{width:100%;  float:left; display: flex;  justify-content: center;  align-items: center; flex-direction: column; padding:100px 0px 0px }
	
.agreement_box{width:70%;  float:left; margin-bottom:30px ; padding:50px 0px 50px 150px; border-top: 3px solid #000;  border-bottom: 1px solid #ccc; position: relative}
.agreement_box .icon{width:100px; height: 100px; position: absolute; left: 20px; top: 60px; }
.agreement_box .icon img{width:100px;}
	
	
.agreement_box .agreement_tit{ width:100%;  float:left;  font-size:16px;  color: #000; font-weight:500; font-family: 'Pretendard'; line-height: 130%; margin-bottom: 20px}
.agreement_box .agreement_txt{ width:100%;  float:left;  font-size:14px;  color: #ff0000; font-weight:500; font-family: 'Pretendard'; line-height: 130%;}
	
.agreement_set{width:70%;  float:left;  display: flex;
justify-content:flex-start;  align-items: center; flex-direction:row; box-sizing: border-box; gap:20px}		
.agreement_set2{width:70%!important;  float:left;  }		
.agreement_set2 .agreement_stit{width:100%;  float:left; font-size:20px;  color: #000; font-weight:700; font-family: 'Pretendard'; line-height: 100%; margin-bottom:50px ; text-align: center}	

	
.btn_box_r{width:50%; float:left;   display: flex;
justify-content:flex-end;  align-items: center; flex-direction:row; box-sizing: border-box; }		
	
.btn_box_r .next_btn{ width:auto;  padding:15px 60px 15px 20px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:5px; background-color:var(--div-color1) ; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; 
	position: relative} 	
.btn_box_r .next_btn:before{content: "";   width:30px; height: 30px; background: url("../../images/svg_icon/next_icon.svg")no-repeat left top; background-size:30px; position: absolute; right:20px; top:10px; 	}
	
.btn_box_r .save_btn{ width:auto;  padding:15px 30px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:5px; background-color:var(--div-color1) ; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; } 	
	
.btn_box_r .ad_btn{ width:auto;  padding:15px 30px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:5px; background-color:var(--div-color1) ; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; } 	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.agreement_outbox{width:100%;  float:left; display: flex;  justify-content: center;  align-items: center; flex-direction: column; padding:50px 00px }
.agreement_box{width:100%;  float:left; margin-bottom:30px ; padding:15px 0px 15px 80px; border-top: 3px solid #000;  border-bottom: 1px solid #ccc; position: relative;}
.agreement_box .icon{width:80px; height: 100px; position: absolute; left: 0px; top: 40px; }
.agreement_box .icon img{width:60px;}
	
	
.agreement_box .agreement_tit{ width:100%;  float:left;  font-size:13px;  color: #000; font-weight:500; font-family: 'Pretendard'; line-height: 130%; margin-bottom: 10px}
.agreement_box .agreement_txt{ width:100%;  float:left;  font-size:12px;  color: #ff0000; font-weight:500; font-family: 'Pretendard'; line-height: 130%;}
	
.agreement_set{width:100%;  float:left;  display: flex;
justify-content:flex-start;  align-items: center; flex-direction:row; box-sizing: border-box; gap:20px}		
.agreement_set2{width:100%!important;  float:left;  }		
.agreement_set2 .agreement_stit{width:100%;  float:left; font-size:16px;  color: #000; font-weight:700; font-family: 'Pretendard'; line-height: 100%; margin-bottom:20px ; text-align: center}	

	
.btn_box_r{width:50%; float:left;   display: flex;
justify-content:flex-end;  align-items: center; flex-direction:row; box-sizing: border-box; }		
	
.btn_box_r .next_btn{ width:auto;  padding:15px 60px 15px 20px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:5px; background-color:var(--div-color1) ; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; 
	position: relative} 	
.btn_box_r .next_btn:before{content: "";   width:30px; height: 30px; background: url("../../images/svg_icon/next_icon.svg")no-repeat left top; background-size:30px; position: absolute; right:20px; top:10px; 	}
	
.btn_box_r .save_btn{ width:auto;  padding:15px 30px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:5px; background-color:var(--div-color1) ; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; } 	
	
.btn_box_r .ad_btn{ width:auto;  padding:15px 30px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:5px; background-color:var(--div-color1) ; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; } 	


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/






/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.Dep03_Tabmenu { width: 100%;  float: left; display: grid; grid-template-columns: repeat(3, 1fr); gap:30px;   }	

.Dep03_Tabmenu>.tablinks { width: 100%;  float: left; border: 1px solid #ccc; padding:50px 20px ; border-radius: 20px; background-color: #fff;   box-shadow:3px 3px 30px rgba(51,102,204,0.1);transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s;  cursor: pointer; background-color: #fff
}		
.Dep03_Tabmenu>.tablinks.active2{ border: 1px solid #ccc; }	
.Dep03_Tabmenu>.tablinks:hover{ border: 1px solid  var(--div-color1);  box-shadow:6px 6px 10px 10px  rgba(51,102,255,0.07); }	


.citati_box{ width: 100%;  float: left;  display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box;    }	
.citati_box .citati_tit{ width: 100%;  float: left;   font-size: 24px;  color:#000; font-weight:600; font-family: 'Pretendard'; line-height: 100%; margin-bottom:50px ; text-align: center  }		
.citati_box .citati_icon01{ width:120px; height: 120px; position: relative ;  margin-bottom: 60px ; background: url("../../images/mypage/join_01.png")no-repeat left top; background-size:120px;}		
.citati_box .citati_icon02{ width:120px; height: 120px; position: relative ;  margin-bottom: 60px ;background: url("../../images/mypage/join_02.png")no-repeat left top; background-size:120px;}			
.citati_box .citati_icon03{ width:120px; height: 120px; position: relative ;  margin-bottom: 30px ;background: url("../../images/mypage/join_03.png")no-repeat left top; background-size:120px;}			
	
	
.citati_box .citati_txt{ width: 100%;  float: left;   font-size:15px;  color:#333; font-weight:500; font-family: 'Pretendard'; line-height: 130%; text-align: center;word-wrap: break-word;word-break: keep-all;  }	
	

}


/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	.Dep03_Tabmenu { width: 100%;  float: left; display: grid; grid-template-columns: repeat(3, 1fr); gap:10px;   }	
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.Dep03_Tabmenu { width: 100%;  float: left; display: grid; grid-template-columns: repeat(1, 1fr); gap:10px;   }	

.Dep03_Tabmenu>.tablinks { width: 100%;  float: left; border: 1px solid #ccc; padding: 20px ; border-radius: 20px; background-color: #fff}		
.Dep03_Tabmenu>.tablinks.active2{ border: 1px solid #ccc; }	
.Dep03_Tabmenu>.tablinks:hover{ border:1px solid  var(--div-color1);  box-shadow:6px 6px 10px 10px  rgba(51,102,255,0.07);}	

.citati_box{ width: 100%;  float: left;  display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box;   padding-left:70px ; position: relative}	
.citati_box .citati_tit{ width: 100%;  /*float: left;*/   font-size: 18px;  color:#000; font-weight:700; font-family: 'Pretendard'; line-height: 100%; margin-bottom:5px ;  }		
.citati_box .citati_icon01{ width:60px; height: 60px; position: relative ;  margin-bottom: 20px ; background: url("../../images/mypage/join_01.png")no-repeat left top; background-size:60px; position: absolute; left: 0px; top:-5px}		
.citati_box .citati_icon02{  width:60px; height: 60px; position: relative ;  margin-bottom: 20px ;background: url("../../images/mypage/join_02.png")no-repeat left top; background-size:60px; position: absolute; left: 0px; top:-5px}			
.citati_box .citati_icon03{  width:60px; height: 60px; position: relative ;  margin-bottom: 20px ;background: url("../../images/mypage/join_03.png")no-repeat left top; background-size:60px; position: absolute; left: 0px; top:-5px}			
	
	
.citati_box .citati_txt{ width: 100%;  /*float: left;*/   font-size:13px;  color:#333; font-weight:500; font-family: 'Pretendard'; line-height: 130%; text-align: center;word-wrap: break-word;word-break: keep-all;  text-align: left }	

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/







/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.tabcontent2	{ width: 100%;  float: left;  z-index: 3 ; margin: 0px auto}
.tabcontent2.w_65{ width:100%;  float: left;  padding: 0px 0% ; }
	
.tabcontent2 .member_inbox{ width:100%;  float: left;  padding: 30px ; background-color: #fff; border-top: 2px solid #000; border-bottom: 1px solid #ccc; margin-bottom: 30px}	
	
	
.citati_box2{ width:100%;  float: left;  display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box;    }	

.citati_box2 .citati_btn{  width:100%;   padding:20px 80px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:10px; background-color: var(--div-com2); margin-top: 20px; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); margin-bottom: 30px;cursor: pointer} 
.citati_box2 .citati_btn:hover {  background-color: var(--div-color1); }
	
	
.member_set2 {   float:left; width:100%; margin-bottom: 20px }
.member_set2 .input_div3 { float: left;  width: 100%;   display: grid;    grid-template-columns:repeat(3, 1fr);   grid-gap: 5px; }


.citati_box3 {   float:left; width:100%;  }	
.citati_box3 .citati_infotx {   float:left; width:100%; color: #333; font-size: 17px; font-weight:600; font-family: 'Pretendard';line-height: 130%; margin-bottom: 20px}		
.citati_box3 .citati_infotx2{   float:left; width:100%; color: #000; font-size: 17px; font-weight:700; font-family: 'Pretendard';line-height: 130%;  margin-bottom: 20px}		
	
.citati_filebox {float:left; width:100%;  height: 300px; color:#1f2651; font-size: 16px; font-weight:500; font-family: 'Pretendard';line-height: 130%; border-radius:0px; border: 1px solid #ccc; padding:180px 30px 50px 30px;  margin-bottom: 10px;display: flex;  justify-content: center;  align-items: center; background: url("../../images/mypage/drag.svg") no-repeat center 40%; background-size:80px; background-color: #f7f7f7; }	
	
	
.citati_filetxt {float:left; width:100%; color: #1f2651; font-size: 14px; font-weight:500; font-family: 'Pretendard';line-height: 130%; }	
	
}


/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.tabcontent2	{ width: 100%;  float: left;  z-index: 3 ; margin: 0px auto}
.tabcontent2.w_65{ width:100%;  float: left;  padding: 0px 0% ; }
	
.tabcontent2 .member_inbox{ width:100%;  float: left;  padding: 20px ; background-color: #fff; border: 1px solid #ccc; border-radius: 10px; margin-bottom: 20px;}	
	
	
.citati_box2{ width:100%;  float: left;  display: flex;
justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box;    }	

.citati_box2 .citati_btn{ width:100%; padding:20px 80px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:10px; background-color: var(--div-com2); transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); cursor: pointer} 
.citati_box2 .citati_btn:hover {  background-color: var(--div-color1); }
	
	
.member_set2 {   float:left; width:100%; margin-bottom: 0px }
.member_set2 .input_div3 { float: left;  width: 100%;   display: grid;    grid-template-columns:repeat(3, 1fr);   grid-gap: 5px; }


.citati_box3 {   float:left; width:100%;  }	
.citati_box3 .citati_infotx {   float:left; width:100%; color: #333; font-size: 17px; font-weight:600; font-family: 'Pretendard';line-height: 130%; margin-bottom: 20px}		
.citati_box3 .citati_infotx2{   float:left; width:100%; color: #000; font-size: 17px; font-weight:700; font-family: 'Pretendard';line-height: 130%;  margin-bottom: 20px}		
	
.citati_filebox {float:left; width:100%; color:var(--div-color1); font-size: 16px; font-weight:500; font-family: 'Pretendard';line-height: 130%; border-radius: 20px; border: 1px solid #ccc; padding: 30px;  margin-bottom: 10px; text-align: center}	
.citati_filetxt {float:left; width:100%; color: #666; font-size: 14px; font-weight:500; font-family: 'Pretendard';line-height: 130%; }	



}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/












/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.agreement_infobox{ width: 100%; float: left; padding:  50px; }
	
.agreement_infobox .agreement_tit { width: 100%; float: left;  color:#000; font-size:20px; font-weight:700; font-family: 'Pretendard'; margin-bottom: 40px; line-height: 100%}	
.agreement_infobox .agreement_tx { width: 100%; float: left;  color:#333; font-size:16px; font-weight:500; font-family: 'Pretendard';  margin-bottom: 20px; line-height: 120%}	
.agreement_infobox .agreement_tx2 { width: 100%; float: left;  color:#000; font-size:16px; font-weight:700; font-family: 'Pretendard'; margin-bottom: 10px; line-height: 100%}	
.agreement_infobox .agreement_intx	{ width: 100%; float: left;  color:#666; font-size:16px; font-weight:400; font-family: 'Pretendard'; line-height: 150%;  padding-left:5px; margin-bottom: 20px;}
.agreement_infobox .agreement_intx	em{  color:#666; font-size:16px; font-weight:400; font-family: 'Pretendard'; line-height: 150%;  padding-left:5px;}	
.agreement_infobox .agreement_tx3{ width: 100%; float: left;  color:#666; font-size:15px; font-weight:500; font-family: 'Pretendard';  line-height: 120%; margin-bottom: 20px;}		
.agreement_infobox .agreement_input{ width: 100%; float: left;   margin:10px 0px }	
} 
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.agreement_infobox{ width: 100%; float: left; padding:20px;  }	
.agreement_infobox .agreement_tit { width: 100%; float: left;  color:#000; font-size:16px; font-weight:700; font-family: 'Pretendard';margin-bottom: 40px; line-height: 100%}	
.agreement_infobox .agreement_tx{ width: 100%; float: left;  color:#333; font-size:14px; font-weight:500; font-family: 'Pretendard';  margin-bottom: 20px; line-height: 130%}		
.agreement_infobox .agreement_tx2{ width: 100%; float: left;  color:#000; font-size:14px; font-weight:700; font-family: 'Pretendard'; margin-bottom: 10px; line-height: 100%}			
.agreement_infobox .agreement_intx	{ width: 100%; float: left;  color:#666; font-size:14px; font-weight:500; font-family: 'Pretendard';  line-height: 150%;  padding-left:5px; margin-bottom: 20px;}
.agreement_infobox .agreement_tx3{ width: 100%; float: left;  color:#666; font-size:12px; font-weight:500; font-family: 'Pretendard'; line-height: 130%}		


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.certifi_pup{ width: 100%; float: left; padding:  0px;  display: flex; justify-content:center;  align-items: center; flex-direction:column; box-sizing: border-box;  	}
	
.certifi_pup .certifi_pup_icon { width:100px; height: 100px; position: relative ;  margin-bottom: 50px }		
.certifi_pup .certifi_pup_icon:before{content: "";  width:100px; height: 100px; background: url("../../images/svg_icon/certifi_icon.svg")no-repeat left top; background-size:100px; position: absolute; left:0px; top:0px; }
.certifi_pup .certifi_pup_icon02 { width:100px; height: 100px; position: relative ;  margin-bottom: 50px }		
.certifi_pup .certifi_pup_icon02:before{content: "";  width:100px; height: 100px; background: url("../../images/svg_icon/certifi_icon02.svg")no-repeat left top; background-size:100px; position: absolute; left:0px; top:0px; }	
.certifi_pup .certifi_pup_icon03 { width:100px; height: 100px; position: relative ;  margin-bottom: 50px }		
.certifi_pup .certifi_pup_icon03:before{content: "";  width:100px; height: 100px; background: url("../../images/svg_icon/certifi_icon03.svg")no-repeat left top; background-size:100px; position: absolute; left:0px; top:0px; }
.certifi_pup .certifi_pup_icon04 { width:100px; height: 100px; position: relative ;  margin-bottom: 50px }		
.certifi_pup .certifi_pup_icon04:before{content: "";  width:100px; height: 100px; background: url("../../images/svg_icon/certifi_icon04.svg")no-repeat left top; background-size:100px; position: absolute; left:0px; top:0px; }	
	
	
	
	
.certifi_pup .certifi_pup_tx { width: 100%; float: left;  color:#000; font-size:20px; font-weight:500; font-family: 'Pretendard';   line-height: 130%; margin-bottom: 30px; text-align: center}	
.certifi_pup .certifi_pup_tx2 { width: 100%; float: left;  color:#666; font-size:17px; font-weight:500; font-family: 'Pretendard';  line-height: 130%; border-radius: 10px; background-color: #f1f1f1; padding: 30px; margin-bottom: 0px}	
.certifi_pup .certifi_pup_tx2 em{  color:#333; font-size:20px; font-weight:700; font-family: 'Pretendard';  line-height: 100%; }		
	
.certifi_pup .pup_btn{ width: 100%;  padding:20px 40px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:10px; background-color: var(--div-color1); margin-top: 20px; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); 
	margin-bottom: 30px;cursor: pointer; } 
.certifi_pup .pup_btn2{ width:auto;  padding:20px 40px; box-sizing: border-box; color: var(--div-color1); font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:10px; background-color: #fff; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; 
	border: 3px solid var(--div-color1)} 

.certifi_pup .pup_btnbox{width: 100%; float: left;  display: flex; justify-content:center;  align-items: center; flex-direction:row; box-sizing: border-box; gap:10px} 	
.certifi_pup .pup_btnbox .pup_btn3{ width:auto;  padding:20px 40px; box-sizing: border-box; color: var(--div-color1); font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:10px; background-color: #fff; margin-top: 20px; transition: all 0.3s; margin-bottom: 30px; cursor: pointer; 
	border: 3px solid var(--div-color1)} 
	
} 
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.certifi_pup{ width: 100%; float: left; padding:20px;  }	
	
.certifi_pup .certifi_pup_icon { width:80px; height: 80px; position: relative ;  margin-bottom: 50px }		
.certifi_pup .certifi_pup_icon:before{content: "";  width:80px; height: 80px; background: url("../../images/svg_icon/certifi_icon.svg")no-repeat left top; background-size:80px; position: absolute; left:0px; top:0px; }	
.certifi_pup .certifi_pup_tx { width: 100%; float: left;  color:#000; font-size:20px; font-weight:500; font-family: 'Pretendard';  margin-bottom: 50px; line-height: 120%}	

.certifi_pup .citati_btn2{ width: 100%;  padding:20px 40px; box-sizing: border-box; color: #fff; font-size: 16px; font-weight:600; font-family: 'Pretendard'; position: relative ;  border-radius:10px; background-color: var(--div-color1); margin-top: 20px; transition: all 0.3s; box-shadow: 3px 3px 10px rgb(0 0 0 / 30%); margin-bottom: 30px;cursor: pointer} 

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/