/* 공통 */
.container {background-color: #f5f5f5;}

.mypage_wrap { padding:60px 0; margin:0px auto 0; max-width:1200px; display: flex; align-items: flex-start; justify-content: space-between;}
.mypage_wrap .left_section .left_box,
.mypage_wrap .right_section .right_box {background-color: #fff; border-radius: 15px; padding: 25px;}
.mypage_wrap .right_section .right_box { padding: 25px 40px; }

.mypage_wrap .left_section {width: 20%;}
.mypage_wrap .right_section {width: 77%;}

.text_center {text-align: center;}

/* left_section */
.left_section .left_box {margin-bottom: 20px; overflow: hidden;}
.left_section .left_box hr {border: none; height: 1px; width: 100%; background-color: #e5e5e5; margin: 12px 0;}
.left_section .left_box h3.sup { text-align: left; color: #2ac1bb; font-weight: 600; font-size: 18px;}
.left_section .left_box .left_line { float: left; width: 2px; height: 37px; background-color: #ddd; margin-top: 15px;}
.left_section .left_box .right_box { float: left; margin-left: 10px; margin-top: 10px; text-align: left;}
.left_section .left_box .right_box  h4 { font-size: 28px; font-weight: 600;}
.left_section .left_box .right_box .right_p { margin-top: 10px; color: #bbb; font-size: 15px;}
.left_section .left_box .right_box .right_p span {color: #2ac1bb; }

.left_section .thumb { overflow: hidden; width: 91px; height: 91px; border: 1px solid #cecece; border-radius: 50%; margin: auto;}
.left_section .pro_edit_btn {float: right;	background-color: #8e8e8e; color: #fff; padding: 2px 5px; border-radius: 5px; font-size: 11px;}
.left_section .user_name {text-align: center; font-weight: bold; font-size: 15px; margin: 10px 0; clear: both;}
.left_section .user_name span {color: #008d8e; margin-right: 5px;}

/*.left_section .left_menu {display: flex; flex-wrap: wrap; text-align: center; width: 85%; margin: auto; justify-content: space-between;}
.left_section .left_menu li {width: 49%; background-color: #20314e; color: #fff; border-radius: 50px; cursor: pointer; font-size: 12px; padding: 6px 0;}
.left_section .left_menu li:nth-child(1),
.left_section .left_menu li:nth-child(2) {margin-bottom: 3px;}*/
.left_section .left_menu {margin-left: 10px;}
.left_section .left_menu li {cursor: pointer; transition:0.2s; font-weight: 500; line-height: 1.8;}
.left_section .left_menu li:hover {color: #2ac1bb;}

/* right_section */
.content_right_notice { width: 100%; padding: 30px 30px 10px!important; overflow: hidden; box-sizing: border-box;}
.content_right_notice h3 {color: #000; font-weight: 600; font-size: 22px; text-align: left;}
.content_right_notice .content_right_notice_wrap { width: 65%; text-align: left; position: relative; left: 100px; top: -21px; overflow: hidden; height: 20px;}
.content_right_notice .content_right_notice_wrap ul {position: absolute; left: 0; top: -5px;}
.content_right_notice .content_right_notice_wrap ul li a {font-size: 17px; color: #bebebe; transition: 0.3s;}

/* 마이페이지 메인 */
.main_wrap {display: flex;  justify-content: space-between;}
.main_wrap .main_box {width: 48.5%;}

.main_box>.title {display: flex; margin-bottom: 15px; align-items: center;}
.main_box>.title h3 {font-size: 18px;}
.main_box>.title a { margin-left: auto; font-size: 20px; font-weight: bold; padding: 5px;}
.main_box>table {width: 100%;}
.main_box>table title a {width: 100%;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.an_icon { display:inline-block; font-size:13px; padding:3px 5px; }

/* 문의사항 */
.right_section .contents_title {margin-top: 20px;}
.right_section .contents_title h2 {font-size: 25px;}

.table_1 tr.reply { display:none;  }
.table_1 tr.reply td { background-color: #f8f8f8; line-height: 20px; }

.table_1 tr.reply .inquiry_q { padding-left:80px; padding-right:30px; }
.table_1 tr.reply .inquiry_q .con {  margin-bottom: 20px; }
.table_1 tr.reply .inquiry_q .attach {  margin-bottom: 10px; display:block; text-align: right; }
.table_1 tr.reply .inquiry_q .attach:before { content: 'Attach file: '; }
.table_1 tr.reply .inquiry_q .attach a {  }

.table_1 tr.reply .inquiry_a { position:relative; border:1px solid #ccc; padding:20px; padding-left:80px;}
.table_1 tr.reply .inquiry_a::after { position:absolute; top:20px; left:20px; content: 'Reply: '; font-weight: 700;  }


/* 상품관리 */
.title_wrap {overflow: hidden;}
.img_wrap {padding: 2px; border: 1px solid #ccc; background-color: #fff; display: inline-block;}
.title_wrap p {display: inline-block; margin-left: 7px;	width: calc( 100% - 58px);  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.right_section .modify_table {border: 1px solid #eee; border-collapse: collapse; }
.right_section .modify_table tr th,
.right_section .modify_table tr td {border: 1px solid #eee; border-collapse: collapse; padding: 10px 15px; font-size: 14px;}
.right_section .modify_table tr th {background-color: #f5f5f5;}
.right_section .modify_table tr td {color: #666;}
.right_section .modify_table tr td b {color: #20314e;}
.right_section .modify_table tr td select {text-indent: 5px; border-radius: 3px; border: 1px solid #e1e1e1; cursor: pointer;}
.right_section .modify_table tr td label {cursor: pointer; margin-right: 10px;}
.right_section .modify_table tr td input[type="radio"] {margin-top: 2px;}
.right_section .modify_table tr td textarea {border-radius: 3px; height: 80px; margin-bottom: 0; padding: 5px;}
.right_section .modify_table tr th button,
.right_section .modify_table tr td button {color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 12px; margin-top: 3px;} 

.board_list.prod {  }
.board_list.prod > ul {   }
.board_list.prod > ul > li { position:relative; display:flex; justify-content: space-between; align-items:flex-start; cursor: pointer; padding:20px; border: 1px solid #eee; margin-bottom:10px; border-radius: 8px; }
.board_list.prod > ul > li:hover { border: 1px solid #c9c9c9; }
.board_list.prod > ul > li .img_wrap { width:150px; min-width: 150px; }
.board_list.prod > ul > li .img_wrap img { width:150px;  }
.board_list.prod > ul > li .info_box { padding-left: 30px; width: calc(100% - 150px) ; }
.board_list.prod > ul > li .info_box .no { position:absolute; top:20px; left:200px;  font-size:18px;}
.board_list.prod > ul > li .info_box .title { padding-left:30px; white-space: nowrap; overflow: hidden; font-size:15px; text-overflow: ellipsis; width: 100%; }
.board_list.prod > ul > li .info_box .price { padding-left:30px; font-size:18px; }
.board_list.prod > ul > li .info_box .show { position:absolute; bottom:20px; left:200px; font-size:18px; }
.board_list.prod > ul > li .info_box .com_info {margin-top: 15px; }
.board_list.prod > ul > li .info_box .com_info p {position: relative; padding-left: 100px; font-size: 13px; line-height: 2;}
.board_list.prod > ul > li .info_box .com_info p b {position: absolute; left: 0; top: 0; color: #aaa; font-weight: normal;}

.Product_img {margin-top: 10px; display: flex; column-gap:7px}
.Product_img img {max-height: 100px; }
 
/* 결제사항 
.right_section .info_textbox {padding: 25px; border: 1px solid #eee;}
.right_section .info_textbox h3 {font-weight: bold; margin-bottom: 10px; color: #445268; font-size: 16px;}
.right_section .info_textbox p {line-height: 1.7; margin-left: 5px; color: #5a5a5a; }

.right_section .payment_table {border: 1px solid #eee; border-collapse: collapse; }
.right_section .payment_table tr th,
.right_section .payment_table tr td {border: 1px solid #eee; border-collapse: collapse; padding: 10px 15px; font-size: 14px;}
.right_section .payment_table tr th {background-color: #f5f5f5;}
.right_section .payment_table tr td {color: #666;}
.right_section .payment_table tr td b {color: #20314e;}
.right_section .payment_table tr td select {text-indent: 5px; border-radius: 3px; border: 1px solid #e1e1e1; cursor: pointer;}

.payment_btn {text-align: center; margin-top: 20px;}
.payment_btn button {background-color: #008d8e; color: #fff; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;}
*/

/* 정보수정 */
.right_section .title_box {border-bottom:2px solid #333; padding-bottom:10px; margin-bottom: 20px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between;}
.right_section .title_box h5 { color:#333; font-weight: 700; font-size: 25px;}
.right_section .title_box button {border: 1px solid #757575; color: #757575; padding: 5px 10px; border-radius: 5px; transition: 0.2s;}
.right_section .title_box button:hover {background-color: #445268; border: 1px solid #445268; color: #fff;}

/*.basic_info { display:flex; flex-wrap: wrap; gap: 3%; margin-bottom: 40px;  }*/
.basic_info li { width:70%; margin:20px auto;}
.basic_info li .title { display:block; font-weight: 700; font-size: 16px; margin-bottom: 15px;}
.basic_info li input[type="text"] {width:100%; border-radius: 5px; color: #333; border: 1px solid #f4f4f6; line-height: 20px; height: 50px; padding: 18px 25px; font-size: 14px; background: #f4f4f6;}
.basic_info li select {width:100%; border-radius: 5px; color: #333; border: 1px solid #f4f4f6; line-height: 20px; height: 50px; padding: 10px 25px; font-size: 14px; background: #f4f4f6;}
.basic_info li input:active,  
.basic_info li input:focus,
.basic_info li select:active,  
.basic_info li select:focus{ border-color: #333; background: #fff; }

.basic_info .filebox { position:relative; }
.basic_info .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.basic_info .filebox label { position:absolute; top:0; left:0 ;  font-size: 13px;  font-weight: 600; line-height:20px; padding:14px 15px; display: inline-block; cursor: pointer; }
.basic_info .filebox .upload-name {width:100%; line-height:20px; padding:14px; padding-left:93px; font-size: 16px; display: inline-block; vertical-align: middle; background-color: #f5f5f5;  border: 1px solid #ebebeb; appearance: none; }

.basic_info .Withdrawal {display: flex; align-items: flex-end; justify-content: flex-end;}
.basic_info .Withdrawal button {padding: 7px 14px; border-radius: 3px; background-color: #445268; color: #fff;}

.Withdrawal_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99999; display: none;} 
.Withdrawal_wrap .Withdrawal_popup { position: absolute; left: 50%; top: 50%;  transform: translate(-50%, -50%); background-color: #fff; border-radius: 20px; padding: 30px 15px; text-align: center;}
.Withdrawal_wrap .Withdrawal_popup h3 {font-size: 18px; font-weight: bold;}
.Withdrawal_wrap .Withdrawal_popup p {font-size: 16px; margin-top: 10px; font-weight: 500;}
.Withdrawal_wrap .Withdrawal_popup button {margin-top: 10px;  padding: 8px 10px; border-radius: 4px; font-size: 15px; width: 280px; display: block;} 
.Withdrawal_wrap .Withdrawal_popup button:nth-child(3) {background-color: #445268; color: #fff; border: 1px solid #445268;}
.Withdrawal_wrap .Withdrawal_popup button:nth-child(4) {background-color: #f5f5f5; color: #333; border: 1px solid #ddd;}

.paging.small { margin-top: 60px; margin-bottom: 30px; }
.paging.small  > a { line-height: 30px; width: 30px; }

/* 추천인 현황 */
.invite_link {margin: 40px auto 30px; max-width: 1280px; padding: 20px 40px; border: 1px solid #e4e4e4; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); }
.invite_link h3 {font-weight: bold; color: #2ac1bb; font-size: 15px; display: inline-block;}
.invite_link p {display: inline-block; margin-left: 10px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite_link span {float: right; color: #445268; cursor: pointer;}

tfoot {border-bottom: 2px solid #000;}
tfoot  tr th {background-color: #f5f5f5;}

@media screen and (max-width: 1000px){ 
	.mypage_wrap {flex-direction: column;}
	.mypage_wrap .left_section,
	.mypage_wrap .right_section {width: 95%; margin: auto;}
	.mypage_wrap .left_section .left_box:nth-child(2) {display: none;}
}

@media screen and (max-width: 850px){
	.list_box ul li {width: 31.33%;}
	.list_box ul li:nth-child(n+7) {display: none;}
}

@media screen and (max-width: 790px){
	.table_fixed {overflow: auto;}
	.table_1 {table-layout:fixed; width: 680px;} 
	.right_section .contents_title h2 {font-size: 18px;}
} 

@media screen and (max-width: 730px){
	.main_wrap {flex-direction: column; row-gap:30px}
	.main_wrap .main_box {width: 100%;}
	.content_right_notice h3 {font-size: 18px;}
	.content_right_notice .content_right_notice_wrap ul li a {font-size: 15px;}

	.basic_info li {width: 80%;}
}

@media screen and (max-width: 710px){
	.invite_link p {width: 70%;}
}

@media screen and (max-width: 630px){
	.list_box ul li {width: 48%;}
	.list_box ul li:nth-child(n+5) {display: none;}
	.mypage_wrap .right_section .right_box {padding: 10px 20px;}

	.right_section .title_box h5 {font-size: 20px;}
	.basic_info li .title {font-size: 14px;}
	.basic_info li {width: 90%;}
}

@media screen and (max-width: 610px){
	.invite_link p {width: 60%;}
}

@media screen and (max-width: 540px){
	.right_section .modify_table colgroup col {width: 83px!important;}
}

@media screen and (max-width: 500px){
	.basic_info li {width: 100%;}
	.basic_info li .title {font-size: 12px;}
}

@media screen and (max-width: 450px){
	.invite_link p {width: 40%;}
}

@media screen and (max-width: 440px){
	.list_box ul li {width: 100%;}
	.list_box ul li:nth-child(n+3) {display: none;}
	.modify_table input[type=file] {width: 100%;}
	.Product_img {flex-wrap: wrap; row-gap:5px}
}