@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

@media all and ( min-width: 768px ){
	.contentbg_m {display:none;}
	.myofficeUserWrap_m {display:none;}

	.memberBg_m {display:none;}
	.MyInfoWrap_m {display:none;}
	.myofficePayWrap_m {display:none;}
	.CustomerInfoBox_m {display:none;}
	.myOfficeOrderWrap_m {display:none;}
	.InputWrap_m {display:none;}
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,  article, aside,
canvas, details, embed, figure, figcaption,  footer, header, hgroup, menu, nav, output, ruby,  section, summary,time, mark,  audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

button {font-family:"Pretendard", "Poppins", sans-serif !important; outline: none; cursor:pointer;}

ul, ol, menu {
	list-style: none;
}

html {
  font-size: 10px;
}

body {
  font-family: "Pretendard", "Poppins", sans-serif !important;
  font-size: 15px;
  word-break: keep-all;
  background: #fff;
  outline: none;
}

label {cursor:pointer;}

.InputWrapBox {
	display:flex;
	justify-content:center;
	margin-bottom:20px;
}
.purchaseDesc {
	font-size:14px;
	line-height:20px;
	font-weight:600;
	color:#999;
	margin:20px 0 0 0;
}
.InputWrapTxt {
	line-height:4rem;
	text-align:center;
	font-size:22px;
	font-weight:800;
	color:#333;
}
.between {
	justify-content:space-between !important;
}
.start {
	justify-content:flex-start !important;
}
.around {
	justify-content:space-around !important;
}
.center {
	justify-content:center !important;
}
.right {
	justify-content:right !important;
}
.wrap {flex-wrap:wrap !important;}
.floatL {float:left;}
.floatR {float:right;}
.InputWrap {
	width:100%;
	margin:0 0 20px 0;
}
.input {
	font-family:"Pretendard", "Poppins", sans-serif !important;
	width:100%;
	outline:none;
	border:1px solid #e5e5e5;
	font-size:1.4rem;
	color:#555;
	font-weight:700;
	height:6rem;
	line-height:6rem;
	border-radius:0.8rem;
	padding:0 1rem;
	-webkit-appearance : none;
	-moz-appearance: none;
	appearance: none;
}
input::placeholder {
  font-family:"Pretendard", "Poppins", sans-serif !important;
  font-size:1.4rem;
  font-weight:700;
  color:#999;
}
.inputDate {
	position:relative;
	border:1px solid #0098b7 !important;
}
.prdInput {
	font-family:"Pretendard", "Poppins", sans-serif !important;
	width:100%;
	outline:none;
	border:1px solid #e5e5e5;
	font-size:1.4rem;
	color:#222;
	font-weight:700;
	height:6rem;
	line-height:6rem;
	text-align:center;
	padding:0 10px;
	-webkit-appearance : none;
	-moz-appearance: none;
	appearance: none;
}
.prdInput::placeholder {
  font-family:"Pretendard", "Poppins", sans-serif !important;
  font-size:1.4rem;
  font-weight:700;
  color:#222;
}
.checkBox {
	border:2px solid #999;
	width:20px;
	height:20px;
	border-radius:4px;
	vertical-align:middle;
	margin:0 auto !important;
}
.form-group {
	position:relative;
	height:6rem;
}
.form-group:before {
	font-family:xeicon;
	content:'\e9a0';
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:20px;
	font-size:2.4rem;
	color:#0098b7;
	font-weight:800;
	z-index:1;
}
.searchBtn {
	border:1px solid #0098b7;
	border-radius:10px;
	width:6rem;
	height:6rem;
	text-align:center;
	margin-left:20px;
	background:#fff;
}
.searchBtn i {
	display:block;
	width:6rem;
	height:6rem;
	line-height:6rem;
	font-size:2.4rem;
	color:#0098b7;
	font-weight:800;	
}
.searchBtn:hover {
	background:#0098b7;
}
.searchBtn i:hover {
	color:#fff;
}
select {
	font-family:"Pretendard", "Poppins", sans-serif !important;
	-webkit-appearance : none;
	-moz-appearance: none;
	appearance: none;
}

.txt-l {text-align:left !important;}
.txt-r {text-align:right !important;}
.txt-c {text-align:center !important;}

.width_2 {width:2% !important;}
.width_4 {width:4% !important;}
.width_5 {width:5% !important;}
.width_10 {width:10% !important;}
.width_15 {width:15% !important;}
.width_20 {width:20% !important;}
.width_21 {width:21% !important;}
.width_22 {width:22% !important;}
.width_235 {width:23.5% !important;}
.width_24 {width:24% !important;}
.width_25 {width:25% !important;}
.width_30 {width:30% !important;}
.width_33 {width:33% !important;}
.width_35 {width:35% !important;}
.width_40 {width:40% !important;}
.width_45 {width:45% !important;}
.width_465 {width:46.5% !important;}
.width_475 {width:47.5% !important;}
.width_48 {width:48% !important;}
.width_485 {width:48.5% !important;}
.width_50 {width:50% !important;}
.width_60 {width:60% !important;}
.width_65 {width:65% !important;}
.width_70 {width:70% !important;}
.width_80 {width:80% !important;}
.width_85 {width:85% !important;}
.width_90 {width:90% !important;}
.width_95 {width:95% !important;}
.width_100 {width:100% !important;}

.width500 {width:500px !important; margin:0 auto;}
.width800 {width:800px !important; margin:0 auto;}
.width1000 {width:1000px !important; margin:0 auto;}
.width1300 {width:1300px !important; margin:0 auto;}

.mg0 {margin:0 !important;}
.mgt0 {margin:0px auto !important;}
.mgt10 {margin:10px auto !important;}
.mgt20 {margin:20px auto !important;}
.mgt30 {margin:30px auto !important;}
.mgt50 {margin:50px auto !important;}
.mgt70 {margin:70px auto !important;}
.mgt80 {margin:80px auto !important;}
.mgt100 {margin:100px auto !important;}

.mglr5 {margin:0 5px !important;}
.mglr10 {margin:0 10px !important;}
.mglr50 {margin:0 50px !important;}
.mglr80 {margin:0 80px !important;}
.mglr100 {margin:0 100px !important;}

.mgr5 {margin:0 5px 0 0 !important;}
.mgl5 {margin:0 0 0 5px !important;}
.mgr10 {margin:0 10px 0 0 !important;}
.mgr20 {margin:0 20px 0 0 !important;}
.mgr30 {margin:0 30px 0 0 !important;}
.mgr50 {margin:0 50px 0 0 !important;}
.mgl10 {margin:0 0 0 10px !important;}
.mgl20 {margin:0 0 0 20px !important;}
.mgl100 {margin:0 0 0 100px !important;}
.magt50 {margin:50px 0 0 0 !important;}
.magt40 {margin:40px 0 0 0 !important;}
.magt35 {margin:35px 0 0 0 !important;}
.magt30 {margin:30px 0 0 0 !important;}
.magt20 {margin:20px 0 0 0 !important;}
.magt10 {margin:10px 0 0 0 !important;}
.magl10 {margin:0 10px 0 0 !important;}
.maglb35 {margin:0 10px 10px 0 !important;}
.magtr35 {margin:35px 10px 0 0 !important;}
.magtl35 {margin:35px 0 0 10px !important;}
.magtl3510 {margin:35px 0 0 10px !important;}
.magtl3520 {margin:35px 0 0 20px !important;}
.magtl4510 {margin:45px 0 0 10px !important;}

.mgtb1000 {margin:10px auto 0 auto !important;}
.mgtb2000 {margin:20px auto 0 auto !important;}
.mgtb3000 {margin:30px auto 0 auto !important;}
.mgtb5000 {margin:50px auto 0 auto !important;}
.mgtb7000 {margin:70px auto 0 auto !important;}
.mgtb9000 {margin:90px auto 0 auto !important;}
.mgtb0010 {margin:0 auto 10px auto !important;}
.mgtb0015 {margin:0 auto 15px auto !important;}
.mgtb0020 {margin:0 auto 20px auto !important;}
.mgtb0030 {margin:0 auto 30px auto !important;}
.mgtb0050 {margin:0 auto 50px auto !important;}
.mgtb3010 {margin:30px auto 10px auto !important;}
.mgtb3020 {margin:30px auto 20px auto !important;}
.mgtb5020 {margin:50px auto 20px auto !important;}
.magl1015 {margin:0 0 10px 15px !important;}
.magb10 {margin:0 0 10px 0 !important;}
.magb20 {margin:0 0 20px 0 !important;}
/*.magb10 {padding:0 0 10px 0 !important;}*/
.magb30 {padding:0 0 30px 0 !important;}

.pd0 {padding:0 !important;}
.padb30 {padding:0 0 30px 0 !important;}

.border0 {border:0 !important;}
.borderB {border-bottom:1px solid #e5e5e5 !important;}
.purchaseBorder {border:2px solid #0098b7; border-radius:20px;}

.relative {position:relative;}
.fixed {position:fixed; top:0; right:0;}
.absolute {position:absolute; top:120px; right:50px;}

.hidden {color:#f9f9f9 !important;}

.officebg {background:#f9f9f9; padding:100px 0;}
.contentbg {background:#fff; box-shadow: 0px 0px 50px 20px #f5f5f5; padding:70px 50px; border-radius:30px;}
.contentbg_m_popup {
		width: 90%;
		background: #fff;
		box-shadow: 0px 0px 50px 20px #f5f5f5;
		padding: 50px 50px;
		margin: 0 auto;
		border-radius: 20px;
	}

.emailselect {
	width:100%;
	height:6rem;
	line-height:6rem;
	border-radius:0.8rem;
	font-size:1.4rem;
	color:#555;
	font-weight:700;
	border:1px solid #e5e5e5;
	cursor:pointer;
	outline:none;
	padding:0 15px;
	background: #fff url(../../../images/myoffice/type2/arrow_down.png) no-repeat 97% 50%;
}
.emailselect option {
	font-size:1.4rem;
	color:#a3a3a3;
	font-weight:600;
}
.emailselectBox {
	width:20%;
}
.deliTxtSelect {
	width:100%;
	height:6rem;
	line-height:6rem;
	border-radius:0.8rem;
	font-size:16px;
	color:#999;
	font-weight:700;
	border:1px solid #e5e5e5;
	cursor:pointer;
	outline:none;
	padding:0 15px;
	background: #fff url(../../../images/myoffice/type2/arrow_down.png) no-repeat 98% 50%;
}
.deliTxtSelect option {
	font-size:16px;
	color:#a3a3a3;
	font-weight:600;
}
.bankBtn {
	font-family:"Pretendard", "Poppins", sans-serif !important;
	width:100%;
	height:6rem;
	line-height:6rem;
	display:block;
	border:1px solid #0098b7;
	color:#0098b7;
	border-radius:50px;
	font-size:16px;
	font-weight:800;
	padding:0 2rem;
	cursor:pointer;
	background:#fff;
	transition:all 0.3s;
}
.bankBtn:hover {
	color:#fff;
	background:#0098b7;
}
.agreeBtn {
	border:1px solid #0098b7;
	border-radius:30px;
	color:#0098b7;
	padding:8px 35px;
	font-size:13px;
	font-weight:700;
}
.agreeBtn:hover {
	background:#0098b7;
	color:#fff;
}

.inline {display:inline-block;}
.flex {display:flex; justify-content:center;}

.clr {clear:both;}

a {text-decoration:none; transition:all 0.3s;}

/****************** 버튼/라인 ******************/
.MyOfficeBtn_bg {
	width:100%;
	height:6rem;
	line-height:6rem;
	display:block;
	background:#0098b7;
	color:#fff;
	border-radius:50px;
	font-size:1.125rem;
	font-weight:800;
	text-align:center;
	margin:0 10px;
}
.MyOfficeBtn_bg:hover {
	background:#006b81;
}
.MyOfficeBtn_line {
	width:100%;
	height:6rem;
	line-height:6rem;
	display:block;
	border:1px solid #0098b7;
	background:#fff;
	color:#0098b7;
	border-radius:50px;
	font-size:1.6rem;
	font-weight:800;
	text-align:center;
	margin:0 10px;
}
.MyOfficeBtn_line:hover {
	background:#0098b7;
	color:#fff;
}
.MyOfficeRuleBtn_line {
	width:100%;
	line-height:2.6rem;
	padding:2rem 0;
	display:block;
	border:1px solid #0098b7;
	background:#fff;
	color:#0098b7;
	border-radius:50px;
	font-size:1.9rem;
	font-weight:800;
	text-align:center;
	margin:0 10px;
}
.MyOfficeRuleBtn_line:hover {
	background:#0098b7;
	color:#fff;
}
.treeBtnBox {
	display:flex;
	gap:10px;
	padding:10px;
}
.treeDescBox {
	font-size:13px;
	font-weight:700;
	line-height:18px;
	padding:0 10px;
}
.MyOfficeTreeBtn_line {
	width:90px;
	padding:6px 0;
	display:inline-block;
	border:1px solid #0098b7;
	background:#fff;
	color:#0098b7;
	border-radius:50px;
	font-size:1.2rem;
	font-weight:600;
	text-align:center;
}
.MyOfficeTreeBtn_line:hover {
	background:#0098b7;
	color:#fff;
}
.MyOfficePayBtn_line {
	width:100%;
	height:2.3rem;
	line-height:2.3rem;
	display:block;
	border:1px solid #0098b7;
	color:#0098b7;
	border-radius:50px;
	font-size:15px;
	font-weight:800;
	text-align:center;
	margin:0 10px;
}
.MyOfficePayBtn_line:hover {
	background:#0098b7;
	color:#fff;
}
.MyOfficeRegiBtn_line {
	width:100%;
	height:3.3rem;
	line-height:3.3rem;
	display:block;
	border:1px solid #222;
	color:#222;
	border-radius:50px;
	font-size:18px;
	font-weight:800;
	text-align:center;
	margin:0 10px;
}
.MyOfficeRegiBtn_line:hover {
	background:#0098b7;
	border:1px solid #0098b7;
	color:#fff;
}
.MyOfficePayBtn_bg {
	width:100%;
	height:2.3rem;
	line-height:2.3rem;
	display:block;
	background:#0098b7;
	color:#fff;
	border-radius:50px;
	font-size:15px;
	font-weight:800;
	text-align:center;
	margin:0 10px;
}
.MyOfficePayBtn_bg:hover {
	background:#006b81;
	color:#fff;
}
.MyOfficedetailBtn_line {
	width:100%;
	border:1px solid #0098b7;
	color:#0098b7;
	padding:7px 0;
	border-radius:50px;
	font-size:13px;
	font-weight:700;
	text-align:center;
}
.MyOfficedetailBtn_line:hover {
	background:#0098b7;
	color:#fff;
}
.MyOfficeBg {
	border-radius:30px;
	background:#fff;
	box-shadow: 5px 5px 5px 5px #efefef;
}
.DashLine {
	border:2px dashed #0098b7;
	border-radius:30px;
}
.DottedLine {
	border:2px dotted #0098b7;
	border-radius:30px;
}
/****************** 버튼/라인 ******************/
h2.MyOfficeTit {
	font-size:3.6rem;
	font-weight:800;
	text-align:center;
	color:#222;
	margin:0 0 35px 0;
}
/****************** 회원가입 ******************/
.memberBg {
	position:relative;
	width:100%;
	height:100vh;
	background: url(../../../images/myoffice/type2/member_img.jpg);
	background-repeat:no-repeat;
	background-size:cover;
    position: relative;
    isolation: isolate;
}
.memberBg::after {
  content: '';
  position: absolute;
  background: white;
  z-index: -1;
  inset: 0;
  opacity: 0.3;
}
.memberBg .memberPos {
	width:1100px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.memberBg .memberPos .memberPosBox {
	display:flex;
	justify-content:space-between;
}
.memberBg .memberPos h2 {
	display:block;
	text-align:center;
	font-size:4.6rem;
	font-weight:800;
	color:#222;
	margin-bottom:30px;
}
.memberBg .sellerBox, .buyBox {
	border:5px solid rgba(255, 255, 255, .3);
	border-radius:30px;
	padding:55px 35px;
	background:rgba(255, 255, 255, .2);
}
.memberBg .sellerBox .sellerBtnBox {
	display:flex;
	gap:1rem;
}
.memberBg .sellerBox .sellerBtnBox a {
	margin:0;
}
.memberPos h3 {
	text-align:center;
	font-size:3.6rem;
	font-weight:800;
	color:#222;
	margin-bottom:30px;
}
.memberBg .sellerBox p, .buyBox p {
	font-size:1.6rem;
	font-weight:700;
	line-height:30px;
	color:#222;
	text-align:center;
}
/****************** 회원가입 ******************/

/****************** 로그인 ******************/

.InputWrap .txt-l em {
	color:#c03636;
}
.InputWrap .answer {
	font-size:16px;
	font-weight:700;
	color:#333;
	margin:10px 0;
	text-align:center;
}
.LoginTabs {
  position: relative;
  color: #666666;
  width: 100%;
  height:570px;
  font-size: 1rem;
  margin: 100px auto;  
}
.LoginTabs h2 {
	font-size:3rem;
	font-weight:800;
	text-align:center;
	color:#222;
	margin:0 0 35px 0;
}
.LoginTab label {
  position: relative;
  cursor:pointer;
  padding: 10px 0;
  color: #c1c1c1;
  font-size:20px;
  font-weight:800;
  letter-spacing:-1px;
}
.LoginTab [type="radio"] {
  display: none;
}
.LoginBox {
  width:100%;
  height:350px;
  position: absolute;
  top: 180px;
  left: 50%;
  transform:translateX(-50%);
  border-radius: 15px;
  background: #ffffff;
}
[type="radio"]:checked ~ label {
  color:#222;
  border-bottom:3px solid #222;
  z-index: 0;
}
[type="radio"]:checked ~ label ~ .LoginBox {
  z-index: 1;
  width:100%;
  height:100%;
  position: absolute;
  top: 180px;
  left: 50%;
  transform:translateX(-50%)
}
.LoginTab .LoginPanel a {
	position:relative;
	font-size:14px;
	font-weight:700;
	color:#888;
	margin:0 20px;
}
.LoginTab .LoginPanel a:hover {
	color:#0098b7;
}
.LoginTab .LoginPanel a:nth-child(2):before {
	content:'';
	position:absolute;
	top:4px;
	left:-20px;
	width:2px;
	height:14px;
	background:#ccc;
}
.LoginTab .LoginPanel a:nth-child(3):before {
	content:'';
	position:absolute;
	top:4px;
	left:-20px;
	width:2px;
	height:14px;
	background:#ccc;
}
.LoginCheck {
	display:flex;
}
.LoginCheck input {
	display: block;
	width:18px;
	height:18px;
	border:2px solid #c1c1c1;
	border-radius:5px;
	outline:none;
	vertical-align:middle;
}
.LoginCheck label {
	color:#777;
	font-size:14px;
	line-height:33px;
	font-weight:600;
	padding: 0 15px 0 3px;
	border:0;
}
.LoginCheck label:nth-child(1) {
	width:100px;
}
.MyOfficeBtn_Box {
	margin:20px 0;
}
/****************** 로그인 ******************/

/****************** 아이디/비번 찾기 ******************/
.FindWrap {
  width:500px !important;
  position: relative;
  color: #666666;
  width: 100%;
  font-size: 1rem;
  margin: 100px auto;  
}
.FindWrap .compleIcon {
	font-family:xeicon;
	display:block;
	width:100px;
	height:100px;
	line-height:100px;
	color:#fff;
	font-size:100px;
	text-align:center;
	border-radius:50px;
	background:#0098b7;
	margin:30px auto;
}
.compleColor {
	color:#0098b7;
}
/****************** 아이디/비번 찾기 ******************/

/****************** 수신동의 ******************/
h3.memberAgreeTitle {
	font-size:20px;
	font-weight:800;
	color:#0098b7;
	margin-bottom:15px;
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 0.3em;
  cursor: pointer;
  display: flex;
  outline: none;
  align-items: center;
  justify-content: center;
 margin:6px 5px 0 0;
}
input[type="checkbox"]:after {
 font-family:xeicon;
  content: "\e929";
  font-weight: 900;
  font-size: 1.4em;
  color: #ffffff;
  display: none;
}
input[type="checkbox"]:checked {
  background-color: #0098b7;
  border:1px solid #0098b7;
}
input[type="checkbox"]:checked:after {
  display: block;
}

/****************** 수신동의 ******************/

/****************** 내 정보관리 ******************/
.MyInfoWrap {
	position: relative;
	width: 100%;
}

.MyInfoWrap .CustomerInfoBox dl dt {
	width:130px;
	height:130px;
	border-radius:30px;
	background: #0098b7 url(../../../images/myoffice/type2/customer_img.png) no-repeat center center;
}
.MyInfoWrap .CustomerInfoBox dl dd {
	text-align:center;
}
.MyInfoWrap .CustomerInfoBox dl dd p {
	font-size:3rem;
	font-weight:800;
	margin:40px 0 15px 0;
}
.MyInfoWrap .CustomerInfoBox dl dd span {
	display:block;
	width:250px;
	padding:15px 0;
	font-size:16px;
	font-weight:700;
	color:#0098b7;
	border-radius:50px;
	border:2px solid #0098b7;
}

.CustomerInfoTxt {
	display:flex;
}
.CustomerInfoTxt ul {
	width:50%;
}
.CustomerInfoTxt ul li {
	width:95%;
	padding:15px 2.5%;
	font-size:1.4rem;
	color:#444;
	font-weight:600;
	border-bottom:1px solid #eaeaea;
}
.CustomerInfoTxt ul li span {
	display:inline-block;
	width:15rem;
	background:#f9f9f9;
	padding:15px 20px;
	font-weight:700;
	text-align:center;
	margin-right:20px;
	border-radius:0.5rem;
}
.agreeBox {
	margin-top:30px;
}
.agreeBox p {
	padding:15px 30px;
	font-size:1.4rem;
	font-weight:600;
	color:#444;
}
.agreeBox p span {
	display:inline-block;
	width:17rem;
}
.emailat {
	display:inline-block;
	height:4rem;
	line-height:4rem;
	font-size:20px;
	font-weight:700;
	color:#aeaeae;
	text-align:center;
}
/****************** 내 정보관리 ******************/

/****************** 회원등록증 ******************/
.memberCardBox {
	position:relative;
	width:550px;
	background:#fff;
	border-radius:20px;
	border:2px dashed #222;
	padding:50px;
	font-size:14px;
	font-weight:500;
}
.memberCardBox span {
	position:absolute;
	top:60px;
	right:50px;
	font-size:38px;
	font-weight:800;
	letter-spacing:-2px;
	color:rgba(0, 0, 0, .1)
}
.memberCardBox img {
	width:170px;
}
.memberCardBox dl {
	position:relative;
	height:27px;
	margin:10px 0;
}
.memberCardBox dl dt {
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	width:100px;
	border-radius:30px;
	color:#fff;
	background:#0098b7;
	text-align:center;
	padding:5px 0;
}
.memberCardBox dl dd {
	line-height:26px;
	padding-left:110px;
}
.memberCardBox p {
	text-align:center;
	line-height:22px;
}
/****************** 회원등록증 ******************/

/****************** 자가소비 확인서 ******************/
.confirmBox {
	position:relative;
	width:550px;
	background:#fff;
	border-radius:20px;
	border:2px dashed #222;
	padding:50px;
	font-size:14px;
	font-weight:500;
}
.confirmBox span {
	display:block;
	font-size:38px;
	font-weight:800;
	color:#222;
}
.confirmBox img {
	display:block;
	width:120px;
}
.confirmBox dl {
	margin:10px 0;
}
.confirmBox dl dt {
	display:inline-block;
	width:100px;
	border-radius:30px;
	color:#fff;
	background:#0098b7;
	text-align:center;
	padding:5px 0;
	margin-right:20px;
}
.confirmBox dl dd {
	line-height:28px;
}
.confirmBox p {
	font-size:16px;
	font-weight:700;
	line-height:32px;
	text-align:left;
}
.confirmBox .issueDate {
	font-size:14px;
	font-weight:500;
}
.confirmBox p.ceo {
	position:relative;
}
.confirmBox p.ceo img.stampImg {
	position:absolute;
	top:-35px;
	right:0;
	width:70px;
}
/****************** 자가소비 확인서 ******************/

/****************** 마이오피스 메뉴(셀렉트박스) ******************/

.MyOfficeMenuBox {
	width:100%;
	margin:0 auto;
}
.MyOfficeMenuBox ul.menu-dropdown li {
	margin:10px;
	font-size:16px;
	line-height:40px;
	font-weight:700;
	color:#999;
}
.MyOfficeMenuBox ul.menu-dropdown li:hover {
	color:#333;
	background:#ebebeb;
	border-radius:8px;
}
.menu {
  display: block;
  position: relative;
  cursor: pointer;
}

.menu-title {
  position:relative;
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size:18px;
  color: #555;
  border:1px solid #e5e5e5;
  border-radius:8px;
  box-shadow: 0 0 15px #e7e7e7;
  font-weight: 800;
  background:#fff;
  text-transform: uppercase;
  transition: 0.3s background-color;
  text-indent:30px;
}
.menu-title:after {
	content:'';
	display:block;
	width:14px;
	height:8px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:30px;
	background: url(../../../images/myoffice/type2/arrow_down.png) no-repeat;
}

.menu-title:hover:after {
	background: url(../../../images/myoffice/type2/arrow_up.png) no-repeat;
}

.menu-dropdown {
  min-width: 100%;
  padding: 15px 0;
  position: absolute;
  background: #fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  box-shadow:0 0 15px #e7e7e7;
  z-index: 100;
  transition: 0.3s padding, 0.3s background;
}

.menu-dropdown:after {
  content: "";
  display: block;
  height: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101;
}

.menu:not(:hover) > .menu-dropdown {
  padding: 0;
  border:0;
  background: #fff;
  z-index: 99;
}

.menu-dropdown > * {
  overflow: hidden;
  height: 40px;
  padding: 0 20px;
  white-space: nowrap;
  transition: 0.3s;
}


.menu:not(:hover) > .menu-dropdown > * {
  visibility: hidden;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  color: #999;
  transition: 0.3s;
  z-index: 99;
}

.hList > * {
  float: left;
}

.hList > * + * {
  margin-left: 30px;
}

/****************** 마이오피스 메뉴(셀렉트박스) ******************/

/****************** 주문검색 ******************/
.myOfficeOrderWrap {
	width:1300px;
	margin:0 auto 80px auto;
}
.myOfficeOrderWrap ul {
	justify-content:space-between;
}
.myOfficeOrderWrap ul li {
	position:relative;
	width:31%;
	background:#fff;
	text-align:center;
	padding:35px 0;
	border-radius:30px;
	box-shadow:0px 0px 50px 5px #ebebeb;
}
.myOfficeOrderWrap ul li p span {
	display:inline-block;
	background:#0098b7;
	border-radius:8px;
	font-size:2.2rem;
	color:#fff;
	padding:10px;
	margin-right:10px;
}
.myOfficeOrderWrap ul li .myOfficeOrderTit {
	font-size:2.4rem;
	font-weight:800;
}
.myOfficeOrderWrap ul li .myOfficeBorder {
	position:absolute;
	top:4%;
	left:2%;
	width:95%;
	height:90%;
	border-radius:25px;
	border:2px dashed #0098b7;
}
.myOfficeOrderWrap ul li .myOfficeOrderTot {
	font-size:3.2rem;
	font-weight:800;
	margin-top:10px;
}
.myOfficeOrderWrap ul li .myOfficeOrderTot em {
	font-size:2.4rem;
}
.myOfficeOrderWrap ul li:last-child {
	color:#fff;
	background:#0098b7;
}
.myOfficeOrderWrap ul li:last-child .myOfficeBorder {
	border:2px dashed #fff;
}
.myOfficeOrderWrap ul li:last-child p span {
	display:inline-block;
	background:#fff;
	border-radius:8px;
	font-size:2.2rem;
	color:#0098b7;
	padding:10px;
	margin-right:10px;
}
/****************** 주문검색 ******************/

/****************** 리스트/테이블 ******************/
.listTable {width:100%;}
.listTable tbody tr th, td {text-align:center; color:#222; padding:25px 0; border-bottom:1px solid #eaeaea;}
.listTable tbody tr th {font-size:1.4rem; font-weight:600; background:#f7f7f7;}
.listTable tbody tr td {font-size:1.4rem; font-weight:500;}
.listTable tbody tr td a.listTableBtn {border:1px solid #0098b7; font-size:1.2rem; font-weight:600; color:#0098b7; padding:5px 15px; border-radius:30px;}
.listTable tbody tr td a.listTableBtn:hover {background:#0098b7; color:#fff;}
/****************** 리스트/테이블 ******************/

/****************** 리스트/테이블 ******************/
.receiptBox {width:1300px; background:#fff; padding:50px;}
.receiptBox .receiptTit {font-size:34px; font-weight:700;}
.receiptBox .receiptTit span {display:inline-block; width:22px; height:22px; margin-right:15px;}
.receiptBox .receiptTit .squareBg {background:#ccc; border:2px solid #555;}
.receiptBox .receiptTit .squareBorder {border:2px solid #555;}
.receiptBox .receiptSubTit li {font-size:24px; font-weight:400; margin-right:35px;}
.receiptBox .receiptSubTit li span {display:inline-block; width:14px; height:14px; margin-right:15px;}
.receiptBox .receiptSubTit li span.squareSubBg {background:#ccc; border:2px solid #555;}
.receiptBox .receiptSubTit li span.squareSubBorder {border:2px solid #555;}
.receiptBox .payDate {font-weight:600; margin:0 0 20px 0;}
.receiptTable {width:100%; border-spacing:0; border-collapse:collapse; margin-top:-1px;}
.receiptTable tbody tr td {height:57px; text-align:left; font-size:14px; font-weight:500; color:#222; padding:20px; border:1px solid #e3e3e3; vertical-align:middle;}
.receiptTable tbody tr td a.listTableBtn {border:1px solid #0098b7; font-size:12px; font-weight:600; color:#0098b7; padding:5px 15px; border-radius:30px;}
.receiptTable tbody tr td a.listTableBtn:hover {background:#0098b7; color:#fff;}
.th {text-align:center !important; background:#f7f7f7;}
.th2 {text-align:center !important; background:#f5fcfd;}

.receiptBox div {font-size:18px; font-weight:500; margin:20px 0;}
.receiptDate ul li {margin:0 35px;}
.receiptDate ul li:first-child {margin-left:0;}
.receiptDate ul li:last-child {margin-right:0;}
.receiptDate ul li span {font-size:32px; font-weight:700; margin-right:10px;}
/****************** 리스트/테이블 ******************/

/* -------- 공통 :: BOARD PAGING -------- */
.list_board_paging {display:flex; justify-content:center; width:100%; text-align:center; margin:50px 0 0 0; flex-wrap:wrap;}
.list_board_paging a {position:relative;display:block;width: 4rem;height: 4rem;line-height: 4rem;margin:0 7px;border:1px solid #ddd;text-align:center;font-size:1.4rem; font-weight:700;color:#868686;border-radius: 50%;background-color:#fff; transition:all 0.3s;}
.list_board_paging a:first-child {margin-right:10px;}
.list_board_paging a:last-child {margin-left:10px;}
.list_board_paging a.paging_hover {color:#fff; background:#0098b7; border:1px solid #0098b7;}
.list_board_paging a:hover {color:#fff; background:#0098b7; border:1px solid #0098b7;}
.list_board_paging a.angle {border:none;}
.list_board_paging a.angle:hover {color:#333; border:none; background:none;}
.list_board_paging a.angle i {font-weight:800; line-height:40px;}

@media screen and (max-width: 768px) {

	.list_board_paging a {width:3rem; height:3rem; line-height:3rem; font-size:1.2rem; margin:0 5px;}
	.list_board_paging a.angle i {line-height: 3rem;}
	
}
/* -------- 공통 :: BOARD PAGING -------- */

/****************** 마이오피스 리스트 팝업 ******************/
.taTabs {
  width: 100%;
  height:55vh;
  overflow:auto;
}
.taTabs__navWap {
  list-style: none;
  display: flex;
  background-color: #fff;
  color: #ffffff;
  border-bottom:1px solid #0098b7;
}
.taTabs__nav {
  flex: 1;
  padding: 20px 10px;
  text-align: center;
  cursor: pointer;
  font-size:20px;
  font-weight:800;
  color:#999;
  background:#fff;
}
.taTabs__nav i {
font-size:18px;
}
.taTabs__nav--active {
  background-color: #0098b7;
  color: #ffffff;
  border-radius:20px 20px 0 0;
}
.taTabs__contentWrap {
  margin: 30px 0 0 0;
}
.taTabs__contentWrap img {
	max-width:100%;
}
.taTabs__content {
  display: none;
}
.taTabs__content--active {
  display: block;
}
table.popupListTable {
	width:100%;
}

.popupListTit {
	position:relative;
	font-size:28px;
	line-height:45px;
	font-weight:800;
	color:#0098b7;
	margin-bottom:50px;
	padding:20px 0;
	border-bottom:3px solid #0098b7;
}
.popupListTit span {
	display:inline-block;
	font-size:14px;
	height:40px;
	line-height:40px;
	border:2px solid #0098b7;
	border-radius:50px;
	padding:0 25px;
	vertical-align:top;
	margin-left:10px;
}
.popupListTit a {
	display:block;
	color:#0098b7;
	position:absolute;
	top:22px;
	right:0;
	font-weight:800;
}

table.popupListTable {border:1px solid #eaebf0; border-radius:20px; overflow:hidden;}
table.popupListTable tbody tr {border-bottom:1px solid #eaebf0;}
table.popupListTable tbody tr th, td {text-align:center; color:#222; padding:20px 0;}
table.popupListTable tbody tr th {font-size:16px; font-weight:700; background:#f0f2f8;}
table.popupListTable tbody tr td {font-size:14px; font-weight:500;}
table.popupListTable tbody tr:last-child {border-bottom:0;}
/****************** 마이오피스 리스트 팝업 ******************/

/****************** 마이오피스 로그인 이용약관 ******************/
.loginRule {
	font-size:19px;
	line-height:26px;
	font-weight:600;
	text-align:center;
}
.loginRule p {
	font-size:31px;
	font-weight:800;
}
.loginRule p span {
	position:relative;
	color:#0098b7;
}
.loginRule p span:before {
	content:'';
	position:absolute;
	bottom:-3px;
	width:100%;
	height:3px;
	background:#0098b7;
}

@media screen and (max-width: 768px) {
	.loginRule {
		font-size:16px;
		line-height:24px;
		font-weight:600;
		text-align:center;
	}
	.loginRule p {
		font-size:24px;
		line-height:36px;
		font-weight:800;
	}
	.loginRule p span {
		position:relative;
		color:#0098b7;
	}
	.loginRule p span:before {
		content:'';
		position:absolute;
		bottom:-3px;
		width:100%;
		height:3px;
		background:#0098b7;
	}
	.MyOfficeRuleBtn_line {
		font-size:1.6rem;
		line-height:2rem;
		padding:1.5rem 0;
	}
}
/****************** 마이오피스 로그인 이용약관 ******************/

/****************** 마이오피스 직급달성 ******************/
.gradeNowWrap dl {position:relative;}
.gradeNowWrap dl dt span {display:inline-block; position:absolute; top:20px; left:20px; padding:7px 20px; font-size:14px; font-weight:700; color:#222; background:#fff; border-radius:20px;}
.gradeNowWrap dl dd {position:absolute; top:90px; left:300px; font-size:42px; font-weight:800; color:#222;}
.gradeNowWrap dl:first-child dt {width:575px; height:206px; background: url(../../../images/myoffice/type2/grade_diamond.jpg) no-repeat;}
.gradeNowWrap dl:last-child dt {width:575px; height:206px; background: url(../../../images/myoffice/type2/grade_emerald.jpg) no-repeat;}

ul.gradeList li {padding:35px 70px; border-bottom:1px solid #eaeaea;}
ul.gradeList li:last-child {border:0;}
ul.gradeList li span {line-height:52px;}
ul.gradeList li span.gradeName {font-size:32px; font-weight:800;}
ul.gradeList li span.gradeDate {font-size:16px;  font-weight:500;}
/****************** 마이오피스 직급달성 ******************/

/****************** 마이오피스 선결제 ******************/
.myofficePayWrap {width:1300px; position:relative; background:#0098b7; border-radius:100px;}
.myofficePayWrap ul{position:relative; padding:65px 0;}
.myofficePayWrap ul li {font-size:34px; font-weight:800; color:#fff;}
.myofficePayWrap ul li:first-child:before {
	content:'';
	position:absolute;
	top:50%;
	right:50%;
	transform:translate(-50%, -50%);
	width:4px;
	height:50px;
	background:#fff;
}
.myofficePayBorder {
	position:absolute;
	top:5%;
	left:0.7%;
	width:98.4%;
	height:88%;
	border-radius:100px;
	border:2px dashed #fff;
	z-index:1
}
/****************** 마이오피스 선결제 ******************/

/****************** 마이오피스 선결제 어코디언 ******************/
.myoffice_container {
  width: 100%;
  text-align:center;
}
.myoffice_accordion-item {
	margin:20px 0;
}
.myoffice_accordion-item:last-child {
	margin-bottom:0;
}
.myoffice_accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  padding:0;
  border: none;
  background: none;
  outline: none;
}
.myoffice_accordion button:hover, .myoffice_accordion button:focus {
  cursor: pointer;
  color: #03b5d2;
}
.myoffice_accordion button:hover::after, .myoffice_accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.myoffice_accordion button .myoffice_accordion-title {
  padding: 1em 1.5em 1em 0;
}
.myoffice_accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 17px;
  right: 60px;
  width: 22px;
  height: 22px;
}
.myoffice_accordion button .icon::before {
  font-family:xeicon;
  display: block;
  position: absolute;
  content: "\e941";
  top: 5px;
  left: 5px;
  font-size:16px;
  font-weight:800;
}
.myoffice_accordion button[aria-expanded=true] {
  color: #03b5d2;
}
.myoffice_accordion button[aria-expanded=true] .icon::after {
  font-family:xeicon;
  display: block;
  position: absolute;
  content: "\e944";
  top: 5px;
  left: 5px;
  font-size:16px;
  font-weight:800;
}
.myoffice_accordion button[aria-expanded=true] .icon::before {
  display:none;
}
.myoffice_accordion button[aria-expanded=true] + .myoffice_accordion-content {
  opacity: 1;
  max-height: 50em;
  transition: all 300ms linear;
  will-change: opacity, max-height;
}
.myoffice_accordion .myoffice_accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.myoffice_accordion .myoffice_accordion-content .myofficePayDetail {
  font-size: 1rem;
  font-weight: 300;
  margin: 1em 0;
  padding: 2em 0;
  border:2px solid #0098b7;
  border-radius:30px;
}
.myofficePayDetail ul {
	margin-bottom:20px
}
.myofficePayDetail ul li h5 {
	font-size:22px;
	font-weight:700;
	text-align:left;
	margin:20px 0;
}
.myofficePayDetail ul li div {
	position:relative;
	height:60px;
	padding:15px 0;
	font-size:14px;
	font-weight:600;
	border-bottom:1px solid #0098b7;
}
.myofficePayDetail ul li div a {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:0;
}
.myofficePayDetail ul li div:last-child {
	border:0;
}
.myofficePayDetail ul li div em {
	display:inline-block;
	width:120px;
	padding:7px 0;
	font-weight:700;
	color:#fff;
	background:#0098b7;
	border-radius:20px;
}
.myofficePayDetail ul li div span {
	color:#006175;
	padding:7px 0;
}
.myofficePayDetail ul li:nth-child(3) {
	width:100%;
}
/****************** 마이오피스 선결제 어코디언 ******************/

/****************** 마이오피스 보너스 ******************/
.myofficeTotalWrap {
	position:relative;
	background:#0098b7;
	border-radius:20px;
	padding:55px 0;
}
.myofficeTotalWrap .myOfficeBonusBorder {
	position:absolute;
	top:4%;
	left:0.7%;
	width:98.3%;
	height:90.6%;
	border-radius:15px;
	border:2px dashed #fff;
}
.myofficeTotalWrap div {
	font-size:28px;
	font-weight:700;
	color:#fff;
	letter-spacing:-1px;
}
.myofficeTotalWrap div:nth-child(2) {
	position:relative;
}
.myofficeTotalWrap div:nth-child(2):after {
	content:'\e91a';
	font-family:xeicon;
	position:absolute;
	top:22px;
	left:-70px;
	font-size:23px;
	font-weight:700;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #fff;
	color: #0098b7;
	border-radius: 50%;
}
.myofficeTotalWrap div:nth-child(2):before {
	content:'\e960';
	font-family:xeicon;
	position:absolute;
	top:22px;
	right:-77px;
	font-size:30px;
	font-weight:800;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #fff;
	color: #0098b7;
	border-radius: 50%;
}
.myofficeTotalWrap div p {
	font-size:16px;
	font-weight:700;
	color:#fff;
	padding:10px 0;
}
ul.bonusWrap li {
	position:relative;
	background:#f9f9f9;
	padding:20px 25px;
	border-radius:10px;
	border:1px solid  #b2e0e9;
	font-size:20px;
	line-height:30px;
	font-weight:800;
	color:#222;
}
ul.bonusWrap li:last-child {
	position:relative;
	padding:0;
	border:0;
	background:none;
}
ul.bonusWrap li:last-child span {
	color:#fff;
	background:#0098b7;
	border:1px solid #0098b7;
	border-radius:10px;
	padding:0;
	height:100%;
	line-height:102px;
	transition:all 0.3s;
}
ul.bonusWrap li:last-child span:hover {
	background:#006b81;
}
.myoffice_accordion button .bonusIcon {
  display: inline-block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 22px;
  text-align:center;
}
/*
.myoffice_accordion button .bonusIcon::before {
  font-family:xeicon;
  display: block;
  position: absolute;
  content: "\e941";
  top: 0;
  left: 50%;
  transform:translateX(-50%);
  font-size:26px;
  font-weight:800;
}
*/
.myoffice_accordion button[aria-expanded=true] {
  color: #03b5d2;
}
/*
.myoffice_accordion button[aria-expanded=true] .bonusIcon::after {
  font-family:xeicon;
  display: block;
  position: absolute;
  content: "\e944";
  top: 0;
  left: 50%;
  transform:translateX(-50%);
  font-size:26px;
  font-weight:800;
}
*/
.myoffice_accordion button[aria-expanded=true] .bonusIcon::before {
  display:none;
}
ul.bonusWrap li:nth-child(3), ul.bonusWrap li:nth-child(4) {
	color:#0098b7;
}
ul.bonusWrap li span {
	display:block;
	font-size:15px;
	font-weight:800;
	color:#999;
}
.myofficeBonusDetail {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
  padding: 2em 0;
  border:2px solid #0098b7;
  border-radius:20px;
}
.myofficeBonusDetail ul {
	margin-bottom:20px
}
.myofficeBonusDetail h5.myofficeTilte {
	font-size:22px;
	font-weight:700;
	text-align:left;
	margin:20px 0;
}
.myofficeBonusDetail ul li div {
	position:relative;
	height:60px;
	padding:15px 0;
	font-size:14px;
	font-weight:600;
	border-bottom:1px solid #0098b7;
}
.myofficeBonusDetail ul li:first-child div:before {
	font-family:xeicon;
	content:"\ea79";
	display:block;
	position:absolute;
	top:15px;
	left:0;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:18px;
	color:#fff;
	border-radius:6px;
	background:#0098b7;
}
.myofficeBonusDetail ul li:last-child div:before {
	font-family:xeicon;
	content:"\ea6f";
	display:block;
	position:absolute;
	top:15px;
	left:0;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:14px;
	color:#fff;
	border-radius:6px;
	background:#d91414;
}
.myofficeBonusDetail ul li div a {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:0;
	padding:0;
	height:30px;
	line-height:30px;
}
.myofficeBonusDetail ul li div:last-child {
	border:0;
}
.myofficeBonusDetail ul li div em {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:40px;
	display:inline-block;
	padding:7px 0;
	font-weight:700;
	color:#222;
	border-radius:20px;
	text-align:center;
}
.myofficeBonusDetail ul li div span {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:100px;
	color:#006175;
	padding:7px 0;
}
.myofficeBonusDetail ul li:last-child div span {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:0;
	color:#d91616;
	padding:7px 0;
}
.myofficeBonusDetail ul li:nth-child(3) {
	width:100%;
}
/****************** 마이오피스 보너스 ******************/

/****************** 마이오피스 회원탈퇴하기 ******************/
.withdrawalWrap {font-size:34px; font-weight:700; line-height:48px; text-align:center;}
.withdrawalWrap span {color:#0098b7;}
/****************** 마이오피스 회원탈퇴하기 ******************/

/****************** 마이오피스 레그별 주문검색 ******************/
.myofficeRegOrderWrap {position:relative; border-radius:100px;}
.myofficeRegOrderWrap ul{position:relative; padding:35px 0;}
.myofficeRegOrderWrap ul li {position:relative; line-height:80px;  font-size:34px; font-weight:800; color:#222;}
.myofficeRegOrderWrap ul li span i {height:80px; line-height:80px;}
.myofficeRegOrderWrap ul li span em {font-size:20px;}
.myofficeRegOrderWrap ul li:first-child {margin-left:100px;}
.myofficeRegOrderWrap ul li:last-child {margin-right:100px;}
/* .myofficeRegOrderWrap ul li .regAmount:before {
	content:'';
	position:absolute;
	top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	width:4px;
	height:25px;
	background:#608a98;
} */
.myofficeRegOrderWrap ul li .regLine {
	display:inline-block;
	width:80px;
	height:80px;
	text-align:center;
	color:#fff;
	font-size:34px;
	border-radius:50px;
}
.myofficeRegOrderALine {border:3px dotted #1e5c6d;}
.myofficeRegOrderBLine {border:3px dotted #1d2d71;}
.myofficeRegOrderEtcLine {border:3px dotted #222;}

.GradientALine {background: linear-gradient(115deg, #184e68, #57ca85);}
.GradientBLine {background: linear-gradient(115deg, #182368, #578aca);}
.GradientEtcLine {background: linear-gradient(115deg, #292929, #929292);}
/****************** 마이오피스 레그별 주문검색 ******************/

/****************** 마이오피스 뉴 레그별 주문검색 ******************/
.regOrderBox {display:flex; justify-content:space-between;}
.regOrderBox .regOrderBoxLine {display:flex; justify-content:center; width:32%; border-radius:20px; padding:30px 0;}
.regOrderBox .regOrderBoxLine ul li {position:relative; font-size:28px; font-weight:700; color:#222;}
.regOrderBox .regOrderBoxLine ul li .regTotal {display: inline-block; width: 100%; font-size:24px; font-weight:700; line-height:40px; text-align: center;}
.regOrderBox .regOrderBoxLine ul li:first-child {margin-bottom:20px;}
.regOrderBox .regOrderBoxLine ul li .regLine {
	display:inline-block;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	color:#fff;
	font-size:32px;
	font-weight:700;
	border-radius:50px;
}
.regOrderBox .regOrderBoxLine:nth-child(1) {border:2px dotted #1e5c6d;}
.regOrderBox .regOrderBoxLine:nth-child(2) {border:2px dotted #1d2d71;}
.regOrderBox .regOrderBoxLine:nth-child(3) {border:2px dotted #222;}
/****************** 마이오피스 뉴 레그별 주문검색 ******************/

/****************** 마이오피스 좌우 실적검색 ******************/
.myofficeRegResultWrap {position:relative; border-radius:20px;}
.myofficeRegResultWrap ul{position:relative; line-height:60px; padding:35px 0; text-align:center;}
.myofficeRegResultWrap ul li {position:relative; font-size:28px; font-weight:800; color:#222;}
.myofficeRegResultWrap ul li span i {height:60px; line-height:60px;}
.myofficeRegResultWrap ul li span em {font-size:18px;}

.myofficeRegResultWrap ul li .regLine {
	display:inline-block;
	width:60px;
	height:60px;
	text-align:center;
	color:#fff;
	font-size:34px;
	border-radius:50px;
}
/****************** 마이오피스 좌우 실적검색 ******************/

/****************** 마이오피스 직추천 실적검색 ******************/
.GradientMy {background: linear-gradient(115deg, #184e68, #57ca85);}
.GradientLv1 {background: linear-gradient(115deg, #63628c, #603970);}
.GradientLv2 {background: linear-gradient(115deg, #cb49cc, #837bdf);}
/****************** 마이오피스 직추천 실적검색 ******************/

/****************** 마이오피스 산하직급달성 ******************/
.underGradeList {padding:30px 50px; border-bottom:1px solid #eaeaea;}
.underGradeList:last-child {border:0;}
.underGradeList ul li { font-size:3rem; line-height:7rem; font-weight:700; color:#222;}
.underGradeList ul li img {margin-right:50px; vertical-align:middle;}

.underGradeList ul li:last-child span {position:relative; margin-left:150px;}
.underGradeList ul li:last-child span.underGradeLeft em {
	position:absolute; top:8px; left:-40px;
	display:inline-block; width:32px; height:32px; line-height:32px; border-radius:50px; background:#0098b7; color:#fff; text-align:center;
	font-size:20px;
}
.underGradeList ul li:last-child span.underGradeRight em {
	position:absolute; top:8px; left:-40px;
	display:inline-block; width:32px; height:32px; line-height:32px; border-radius:50px; background:#b278c9; color:#fff; text-align:center;
	font-size:20px;
}
/****************** 마이오피스 산하직급달성 ******************/

/****************** 마이오피스 환불 및 취소 현황 ******************/
ul.refundWrap {
	margin:10px 0;
}
ul.refundWrap li {
	width:23%;
	position:relative;
	background:#f9f9f9;
	padding:15px 10px;
	border-radius:20px;
	border:1px solid  #b2e0e9;
	font-size:20px;
	line-height:30px;
	font-weight:700;
	color:#222;
	text-align:center;
}
ul.refundWrap li span {
	display:block;
	font-size:16px;
	font-weight:600;
	color:#999;
}
ul.refundWrap li:last-child {
	position:relative;
	background:#f9f9f9;
	padding:15px 10px;
	border-radius:20px;
	border:1px solid  #b2e0e9;
	font-size:20px;
	line-height:30px;
	font-weight:800;
	color:#0098b7;
	text-align:center;
}
ul.refundWrap li:last-child span {
	color:#999;
}
/****************** 마이오피스 환불 및 취소 현황 ******************/

/****************** 마이오피스 관심회원 등록 ******************/
ul.concernUserWrap {
	margin-bottom:20px;
	cursor:pointer;
}
ul.concernUserWrap li {
	position:relative;
	background:#f9f9f9;
	padding:30px;
	border-radius:20px;
	border:1px solid  #b2e0e9;
	font-size:20px;
	line-height:30px;
	font-weight:800;
	color:#222;
	text-align:center;
}
ul.concernUserWrap li span {
	display:block;
	font-size:16px;
	font-weight:800;
	color:#999;
}
ul.concernUserWrap li:first-child {
	line-height:62px;
}
ul.concernUserWrap li:last-child {
	position:relative;
	background:#fff;
	border:0;
	padding:0;
	font-size:24px;
	line-height:30px;
	font-weight:800;
	color:#fff;
	text-align:center;
}
ul.concernUserWrap li:last-child a.delBtn {
	display:block;
	color:#fff;
	background:#0098b7;	
	text-align:center;
	border-radius:50px;
	margin-top:35px;
}
ul.concernUserWrap li:last-child a.delBtn:hover {
	background:#006b81;
}
ul.concernUserWrap li:last-child a.delBtn i {
	width:52px;
	height:52px;
	line-height:52px;
	font-size:22px;
	font-weight:800;
}
/****************** 마이오피스 관심회원 등록 ******************/

/****************** 마이오피스 소비자 주문 등록 ******************/
.myofficePrdWrap .delivery_txt {font-size:14px; font-weight:700; color:#555; padding:10px 0; text-align:center; background:#f1f1f1; border-radius:20px; margin-bottom:40px;}
.myofficePrdWrap ul li {position:relative;}
.myofficePrdWrap ul li a .prd_img img {width:150px; height:150px; border:1px solid #e5e5e5; border-radius:20px; overflow:hidden;}
.myofficePrdWrap ul li a .prd_img img:hover {
	transform:scale(1, 1);
	-webkit-transform:scale(1, 1)
	transition:all 0.3s  ease-in-out;
	-webkit-transition:all 0.3s  ease-in-out;
}
.myofficePrdWrap .prd_infoarea h2.prd_name {height:6rem; font-size:2rem; line-height:2.8rem; font-weight:700; color:#222;}

.myofficePrdWrap .prd_infoarea {width:100%; margin:5px 30px 0 30px;}
/* .myofficePrdWrap .prd_infoarea .txt_box {margin:30px 0 0 0;} */
.myofficePrdWrap .prd_infoarea .txt_box dl {height:2.7rem; line-height:2.7rem;}
.myofficePrdWrap .prd_infoarea .txt_box dl dt {font-size:16px; font-weight:600; color:#777;}
.myofficePrdWrap .prd_infoarea .txt_box dl dd {font-size:20px; font-weight:700; color:#d21818; letter-spacing:-1px;}
.myofficePrdWrap .prd_infoarea .txt_box dl dd.prd_price2 {font-size:26px;}
.myofficePrdWrap .prd_infoarea .txt_box dl dd.prd_pv {font-size:20px; font-weight:700; color:#333;}
.myofficePrdWrap .prd_infoarea .txt_box dl dd em {font-size:15px; font-weight:700; color:#777; margin-left:2px;}

.myofficePrdWrap .prd_number_spinner {align-items:center;}
.myofficePrdWrap .prd_number_spinner .btn-minus, .btn-plus {
	width: 6rem; height:6rem; border:1px solid #e5e5e5; background:#fff; font-size:24px; font-weight:800; color:#555;
}
.myofficePrdWrap .prd_number_spinner .btn-minus {
	border-right:0;
	border-radius:6px 0 0 6px;
}
.myofficePrdWrap .prd_number_spinner .btn-plus {
	border-left:0;
	border-radius:0 6px 6px 0;
}
/****************** 마이오피스 소비자 주문 등록 ******************/

/****************** 마이오피스 소비자현황 ******************/
.myofficeUserWrap {position:relative; background:#0098b7; border-radius:100px;}
.myofficeUserWrap ul{position:relative; padding:65px 0;}
.myofficeUserWrap ul li {width:33.333%; font-size:34px; font-weight:800; text-align:center; color:#fff;}
.myofficeUserWrap ul li:nth-child(2) {position:relative;}
.myofficeUserWrap ul li:nth-child(2):before {
	content:'';
	position:absolute;
	top:50%;
	left:-2px;
	transform:translateY(-50%);
	width:4px;
	height:50px;
	background:#fff;
}
.myofficeUserWrap ul li:nth-child(2):after {
	content:'';
	position:absolute;
	top:50%;
	right:-2px;
	transform:translateY(-50%);
	width:4px;
	height:50px;
	background:#fff;
}
.myofficeUserWrap ul li p {
	font-size:18px;
	margin-bottom:5px;
	color:rgba(255, 255, 255, .7);
}
.myofficeUserBorder {
	position:absolute;
	top:5%;
	left:0.7%;
	width:98.4%;
	height:88%;
	border-radius:100px;
	border:2px dashed #fff;
	z-index:1
}
/****************** 마이오피스 소비자현황 ******************/

/****************** 마이오피스 정기구매 신청 ******************/
.myofficePurchaseWrap ul li {position:relative;}
.myofficePurchaseWrap ul li a .prd_img img {width:150px; height:150px; border:1px solid #e5e5e5; border-radius:20px; overflow:hidden;}

.myofficePurchaseWrap .prd_infoarea h2.prd_name {height:60px; font-size:24px; font-weight:700; color:#222;}

.myofficePurchaseWrap .prd_infoarea {width:600px; margin:5px 70px 0 70px;}
.myofficePurchaseWrap .prd_infoarea .txt_box {margin:30px 0 0 0;}
.myofficePurchaseWrap .prd_infoarea .txt_box dl {margin:5px 0 0 0;}
.myofficePurchaseWrap .prd_infoarea .txt_box dl dt {font-size:16px; font-weight:600; color:#777;}
.myofficePurchaseWrap .prd_infoarea .txt_box dl dd {font-size:20px; font-weight:700; color:#d21818; letter-spacing:-1px;}
.myofficePurchaseWrap .prd_infoarea .txt_box dl dd.prd_pv {font-size:20px; font-weight:700; color:#333;}
.myofficePurchaseWrap .prd_infoarea .txt_box dl dd em {font-size:15px; font-weight:700; color:#777; margin-left:2px;}

.myofficePurchaseWrap .prd_number_spinner {align-items:center;}
.myofficePurchaseWrap .prd_number_spinner .btn-minus, .btn-plus {
	width: 50px; height:50px; border:1px solid #e5e5e5; background:#fff; font-size:24px; font-weight:800; color:#555;
}
.myofficePurchaseWrap .prd_number_spinner .btn-minus {
	border-right:0;
	border-radius:6px 0 0 6px;
}
.myofficePurchaseWrap .prd_number_spinner .btn-plus {
	border-left:0;
	border-radius:0 6px 6px 0;
}
/****************** 마이오피스 정기구매 신청 ******************/

/****************** 마이오피스 정기구매 배송지 변경 ******************/

.pay_delivery_table {
  width: 100%;
}
.pay_delivery_table  h4 {
  font-size:1.8rem;
  font-weight:800;
}
.pay_delivery_table .pay_delivery_box {
  display:flex;
  align-items:center;
  gap:1rem;
}
.pay_delivery_table .pay_delivery_box .pay_delivery input[type=radio] {
  display:none;
}
.pay_delivery_table .pay_delivery_box .pay_delivery label {
  display: block;
  cursor: pointer;
  font-size:1.3rem;
  font-weight:700;
  text-align:center;
  padding:0.7rem 2.3rem;
  border:1px solid #ddd;
  border-radius:50px;
  color:#555;
  transition: all 0.3s;
}
.pay_delivery_table .pay_delivery_box .pay_delivery input[type=radio]:checked ~ label {
  background:#0098b7;
  border:1px solid #0098b7;
  color:#fff;
}
/****************** 마이오피스 정기구매 배송지 변경 ******************/

/* -------- 보상플랜 -------- */
.benefitBox {
	width:98%;
	margin:0 auto;
}
.benefitBox h4 {
	font-size:22px;
	font-weight:800;
}
.benefitBox table {
	width:100%;
	margin:20px 0 50px 0;
	border-collapse:collapse;
}
.benefitBox table thead tr th,
.benefitBox table tbody tr th {
	font-size:14px;
	font-weight:700;
	border:1px solid #eee;
	background:#f9f9f9;
	padding:15px 0;
	line-height:24px;
	text-align:center;
	vertical-align:middle;
}
.benefitBox table thead tr td,
.benefitBox table tbody tr td {
	font-size:14px;
	line-height:24px;
	font-weight:500;
	padding:15px;
	border:1px solid #eee;
	vertical-align:middle;
}
.benefitgray {background:#f9f9f9;}

/* -------- 보상플랜 -------- */

/* -------- 보상플랜 모바일 -------- */
@media screen and (max-width: 768px) {
	
	.benefitBox {
		width:96%;
	}
	.benefitBoxTable {
		overflow-x:scroll;
	}
	.benefitBoxTable table {
		width:700px;
	}
	
}
/* -------- 보상플랜 모바일 -------- */

/****************** 마이오피스 자율재구매 ******************/
.autoshipTypeBox {
	width:100%;
}
.autoshipTypeBox ul {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:3rem;
}
.autoshipTypeBox ul li {
	width:40%;
	font-size:30px;
	font-weight:800;
	color:#0098b7;
	text-align:center;
	border:1px solid #008fd7;
	border-radius:25px;
	padding:30px;
}
.autoshipTypeBox ul li span {
	height:100px;
	display:block;
	font-size:15px;
	color:#555;
	line-height:22px;
	font-weight:600;
	margin-top:30px;
}
/****************** 마이오피스 자율재구매 ******************/

/******** 쇼핑몰 약관 ********/
.memRules p {
	font-size:15px;
	line-heighit:25px;
	font-weight:600;
}
.memRules dl dt {
	position:relative;
	font-size:18px;
	font-weight:800;
	margin:20px 0;
	text-indent:15px;
}
.memRules dl dt:before {
	content:'';
	position:absolute;
	top:9px;
	transform:translateY(-50%);
	left:0;
	width:10px;
	height:10px;
	background:#222;
}
.memRules dl dd {
	font-size:14px;
	line-height:22px;
	font-weight:500;
	margin:10px 15px;
}
.memRules dl dd p {
	font-weight:800;
}
.memRules span,
.memRules dl,
.memRules ul li {
	line-height:20px;
	margin:10px 0;
	text-align:left;
}
.memRules dl dd ul {
	margin-left:10px;
}
.memRules dl dd ul li ol {
	margin-left:15px;
}
.memRules dl dd .memTable table {
	width:100%;
	margin:10px 0;
	border-collapse:collapse;
}
.memRules dl dd .memTable table tr td {
	font-size:14px;
	text-align:center;
	padding:15px 10px;
	border:1px solid #ebebeb;
	vertical-align:middle;
}
.memRules dl dd .memTable table thead tr td {
	background:#eee;
	font-weight:700;
}

@media (max-width: 768px) {

	.memRules dl dt {
		font-size:16px;
	}
	.memRules dl dd {
		font-size:13px;
		line-height:20px;
	}
	.memRules dl dd .memTable {
		overflow-x:scroll;
	}
	.memRules dl dd .memTable table {
	width:1000px;
	}
	.memRules dl dd .memTable table tr td {
		font-size:13px;
	}
	
}
/******** 쇼핑몰 약관 ********/