/* variable */
:root {
	--bg:#F1F4F6; /* background color */
	--lh:40px; /* line height */
	--fss:12px;
	--fs:14px; /* font size */
	--fsl:16px;
}

* { background-origin:padding-box; box-sizing:border-box; font-size:var(--fs); font-family:verdana dotum; vertical-align:bottom; }
*::selection { background:#2B2B2B; color:#A8D5FF; }
*::placeholder { color:#B2B2B2; font-style:italic; }

a { text-decoration:none; }
html, body { background:var(--bg); font-size:var(--fs); }
button, input[type=password], input[type=text], select, textarea { background-color:#FFFFFF; border:1px solid #CBCBCB; padding:0 10px; }
button:hover, input[type=text]:hover, select:hover, textarea:hover {  }
ul { list-style:none; margin:0; padding:0; }


/* Common Style */
.sdw-all { box-shadow:rgba(0, 0, 0, 0.03) 0px 7.5px 35px 0px, rgba(0, 0, 0, 0.03) 0px 15px 22.5px 0px, rgba(0, 0, 0, 0.05) 0px 4px 8.5px 0px, rgba(0, 0, 0, 0.03) 0px 2px 3px 0px; }
.btn { background:#FFF; border:1px solid #A0A0A0; padding:0 20px; }

.btn-green { background:linear-gradient(to bottom, rgba(31, 177, 65, 0.7), rgba(31, 177, 65, 0.9)); border-color:rgba(31, 177, 65, 0.83); color:#FFF; }
.btn-green:focus, .btn-green:hover { background:linear-gradient(to bottom, rgba(31, 177, 65, 0.6), rgba(31, 177, 65, 0.8)); }
.btn-lgreen { background:linear-gradient(to bottom, rgba(103, 191, 41, 0.7), rgba(103, 191, 41, 0.9)); border-color:rgb(103, 191, 41); color:#FFF; }
.btn-lgreen:focus, .btn-lgreen:hover { background:linear-gradient(to bottom, rgba(103, 191, 41, 0.6), rgba(103, 191, 41, 0.8)); }
.btn-blue { background:linear-gradient(to bottom, rgba(46, 164, 232, 0.7), rgba(46, 164, 232, 0.9)); border-color:#2FA4E7; color:#FFF; }
.btn-blue:focus, .btn-blue:hover { background:linear-gradient(to bottom, rgba(46, 164, 232, 0.6), rgba(46, 164, 232, 0.8)); }
.btn-w { background:#FFF; border-color:#FFF; color:#000; }
.btn-w:focus, .btn-w:hover { }
.btn-gray { background:linear-gradient(to bottom, rgba(213, 217, 222, 0.8), rgba(213, 217, 222, 1)); border-color:rgba(213, 217, 222, 0.9); color:#FFF; }
.btn-gray:focus, .btn-gray:hover { background:linear-gradient(to bottom, rgba(213, 217, 222, 0.7), rgba(213, 217, 222, 0.9)); }
.btn-simple-blue { background:rgba(42, 117, 226, 0.9); border:1px solid #2A75E2; color:#FFF; }
.btn-simple-blue:focus, .btn-simple-blue:hover { background:rgba(42, 117, 226, 1); border:1px solid #2A75E2; }
.btn-simple-gray { background:#B2BADB; border:1px solid #B2BADB; color:#FFF; }
.btn-simple-gray:focus, .btn-simple-gray:hover { background:#9DA4C2; border:1px solid #9DA4C2; }
.btn-simple-green { background:rgba(32, 176, 65, 0.9); border:1px solid #20B041; color:#FFF; }
.btn-simple-green:focus, .btn-simple-green:hover { background:rgba(32, 176, 65, 1); border:1px solid #20B041; }

.btn-sm { border-radius:5px; font-size:0.9rem; line-height:20px; padding:0 10px; }
.btn-sm > i { background-position:center center; background-repeat:no-repeat; background-size:16px 16px; display:inline-block; height:20px; width:16px; }
.btn-m { border-radius:5px; font-size:1rem; line-height:30px; padding:0 20px; }
.btn-m > i { background-position:center center; background-repeat:no-repeat; background-size:20px 20px; display:inline-block; height:30px; width:20px; }
.btn-l { border-radius:8px; font-size:1.2rem; line-height:40px; padding:0 30px; }
.btn-l > i { background-position:center center; background-repeat:no-repeat; background-size:24px 24px; display:inline-block; height:40px; width:24px; }
i.btn-reg { background-image:url('/img/btn/register-white-24-01.png'); }
i.btn-con { background-image:url('/img/btn/confirm-white-24-01.png'); }
i.btn-rem { background-image:url('/img/btn/remove-white-24-01.png'); }
i.btn-larrow { background-image:url('/img/btn/left-arrow-white-24-02.png'); }

/* parts */
.parts { background:#FFF; border-radius:4px; box-shadow:rgba(0, 0, 0, 0.03) 0px 7.5px 35px 0px, rgba(0, 0, 0, 0.03) 0px 15px 22.5px 0px, rgba(0, 0, 0, 0.05) 0px 4px 8.5px 0px, rgba(0, 0, 0, 0.03) 0px 2px 3px 0px; margin:20px; }
.partsTitle { color:rgba(0, 0, 0, 0.7); font-weight:bold; padding:10px 20px; }
.partsContent { padding:10px 20px; }
.partsCell { padding:10px 0; }
.partsList { }


/* content area */
.contTitleArea { background:rgba(255, 255, 255, 0.55); display:flex; height:90px; justify-content:space-between; padding:20px; }
.contTitleArea > .cTALeft { display:flex; justify-content:left; }
.contTitleArea > .cTALeft > .cTALIcon { background:#FFF; border-radius:5px; box-shadow:rgba(0, 0, 0, 0.03) 0px 7.5px 35px 0px, rgba(0, 0, 0, 0.03) 0px 15px 22.5px 0px, rgba(0, 0, 0, 0.05) 0px 4px 8.5px 0px, rgba(0, 0, 0, 0.03) 0px 2px 3px 0px; margin-right:20px; padding:10px; }
.contTitleArea > .cTALeft > .cTALIcon > img { height:30px; width:30px; }
.contTitleArea > .cTALeft > .cTALTitle {  }
.contTitleArea > .cTALeft > .cTALTitle > .cTALTTitle { color:#495057; font-family:'Nanum Gothic'; font-size:1.5rem; line-height:30px; }
.contTitleArea > .cTALeft > .cTALTitle > .cTALTScript { color:#A0A4A8; font-family:'Nanum Gothic'; font-size:1rem; line-height:20px; }
.contTitleArea > .cTARight { align-items:center; display:flex; column-gap:5px; line-height:50px; }


/* form */
	.portraitForm {  }
	.portraitForm li { margin-bottom:10px; }
	.portraitForm li:last-child { padding-top:10px; }
	.portraitForm li input { background:rgba(0, 0, 0, 0.05); border:none; border-radius:4px; line-height:40px; padding:0 10px; transition:.3s; width:250px; }
	.portraitForm li input:focus { background:rgba(247, 140, 160, 0.1); }
	.portraitForm li label.fieldName { color:#495057; display:block; font-size:0.9rem; line-height:20px; margin-bottom:5px; }
	.portraitForm li button { background:rgba(247, 140, 160, 0.9); border:none; border-radius:4px; color:#FFF; line-height:40px; padding:0 10px; width:250px; }
	.portraitForm li button:hover,
	.portraitForm li button:focus { background:rgba(247, 140, 160, 0.7); }

	.landscapeForm {  }
	.landscapeForm li { display:flex; justify-content:flex-start; margin-bottom:10px; }
	.landscapeForm li.formButton { display:block; margin-left:110px; }
	.landscapeForm li:last-child { padding-top:10px; }
	.landscapeForm li input { background:rgba(0, 0, 0, 0.05); border:none; border-radius:4px; line-height:30px; padding:0 10px; transition:.3s; width:250px; }
	.landscapeForm li input:focus { background:rgba(247, 140, 160, 0.1); }
	.landscapeForm li label.fieldName { color:#495057; display:inline-block; font-size:0.9rem; line-height:30px; margin-right:10px; text-align:right; width:100px; }
	.landscapeForm li span.fieldMsg { display:block; font-size:0.9rem; line-height:30px; margin-left:10px; }
	.landscapeForm li button { background:rgba(247, 140, 160, 0.9); border:none; border-radius:4px; color:#FFF; line-height:40px; padding:0 10px; width:250px; }
	.landscapeForm li button:hover,
	.landscapeForm li button:focus { background:rgba(247, 140, 160, 0.7); }

/* list - common */
	.partFindForm { display:flex; justify-content:flex-start; padding:8px; }
	.partFindForm > * { margin-right:8px; }
	.partFindForm > *:last-child { margin-right:0; }
	.partFindForm input { background:rgba(0, 0, 0, 0.05); border:none; border-radius:4px; line-height:30px; padding:0 10px; transition:.3s; width:250px; }

	.partsList > ul { display:grid; grid-gap:5px; }
	.partsList > ul:nth-child(even) { background-color:#F7F7F7; }
	.partsList > ul > li { color:#495057; padding:8px; text-align:center; }
	.partsList > ul > li > * { }
	.partsList > ul > li.tal { text-align:left; }
	.partsList > ul > li.tar { text-align:right; }
	.partsList > ul.lTitle { border-bottom:1px solid #DFDFDF; }
	.partsList > ul.lTitle > li { font-size:14px; font-weight:bold; padding:14px 8px; }

	.userProfile { display:grid; grid-gap:8px; grid-template-columns:40px 1fr; }
	.userProfile > .uPImage { border-radius:20px; height:40px; width:40px; }
	.userProfile > .uPName > div { height:20px; line-height:20px; }
	.userProfile > .uPName > div:last-child { color:#495057; opacity:0.7; }

	.partsList > .lPagination { border-top:1px solid #DFDFDF; line-height:30px; padding:14px 8px; text-align:center; }
	.partsList > .noresult { line-height:150px; text-align:center; }

	.pagination { display:flex; flex-direction:row; justify-content:center; }
	.pagination > a { border:none; border-radius:5px; color:#495057; display:block; font-family:"arial"; font-size:1.2rem; font-weight:bold; height:30px; line-height:30px; margin:0 2px; min-width:30px; padding:0 8px; text-align:center; transition:0.3s; }
	.pagination > a.active { background:rgba(43, 66, 94, 0.2); color:#FF5338; }
	.pagination > a.arrowBox { padding:0; }
	.pagination > a.arrowBox  > img { height:24px; margin:3px; width:24px; }
	.pagination > a:hover { background:rgba(43, 66, 94, 0.2); }

/* list - common */
	.partsList > ul { grid-template-columns:100px 1fr 120px 120px; }