css 최신화

src/main/webapp/WEB-INF/views/web/mypage/MypageCustPwdModifyFormWeb.html

@@ -31,27 +31,27 @@
 				</div>
 				<div class="form_field">
 					<label class="input_label">신규 비밀번호</label>
-					<div class="input_wrap form_full">
+					<div class="input_wrap">
 						<input type="password" id="passwd" name="passwd" placeholder="신규 비밀번호를 입력해주세요.(8~20자 영문, 숫자, 특수문자 중 2가지 이상 조합)" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="신규 비밀번호"/>
 						<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
 						<div class="help_block">
 							<!-- 사용불가 비밀번호일경우 -->
-							<p class="mt10">
+							<p>
 								<span id="firstFailed" class="c_gray">
-									<i class="ico ico_check gray mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
+									<i class="ico ico_check gray"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)
 								</span>
 								<span id="secondFailed" class="c_gray">
-									<i class="ico ico_check gray mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br>
+									<i class="ico ico_check gray"></i>4개이상 연속되거나 동일한 문자/숫자 제외
 								</span>
 								<span id="thirdFailed" class="c_gray">
-									<i class="ico ico_check gray mr5"></i>아이디 제외
+									<i class="ico ico_check gray"></i>아이디 제외
 								</span>
 							</p>
 							<!-- //사용불가 비밀번호일경우 -->
 							<!-- 사용가능한 비밀번호일경우 -->
-							<p id="avlPwd" class="mt10 hide">
+							<p id="avlPwd" class="hide">
 								<span class="c_black2">
-									<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
+									<i class="ico ico_check black"></i>사용 가능한 비밀번호입니다
 								</span>
 							</p>
 							<!-- //사용가능한 비밀번호일경우 -->
@@ -61,18 +61,22 @@
 				</div>
 				<div class="form_field">
 					<label class="input_label">신규 비밀번호 확인</label>
-					<div class="input_wrap form_full">
+					<div class="input_wrap">
 						<input type="password" id="confirmPassword" name="confirmPassword" placeholder="신규 비밀번호를 다시 입력해주세요." class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="신규 비밀번호 확인"/>
 						<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
 						<div class="help_block">
 							<!-- 비밀번호확인 틀렸을경우 -->
-							<p id="misPwd" class="t_err hide">
-								비밀번호가 일치하지 않습니다.
+							<p id="misPwd" class="hide">
+								<span class="t_err">
+									새 비밀번호가 일치하지 않습니다.
+								</span>
 							</p>
 							<!-- //비밀번호확인 틀렸을경우 -->
 							<!-- 비밀번호 일치할경우 -->
-							<p id="avlConPwd" class="mt10 hide">
-								<span class="c_black2"><i class="ico ico_check black mr5"></i>비밀번호가 일치합니다.</span>
+							<p id="avlConPwd" class=" hide">
+								<span class="c_black2">
+									<i class="ico ico_check black mr5"></i>새 비밀번호가 일치합니다.
+								</span>
 							</p>
 							<!-- //비밀번호 일치할경우 -->
 						</div>

src/main/webapp/ux/pc/css/common.css

@@ -750,25 +750,28 @@ content: "〉";font-size: 12px;padding-left: 8px;
 .itemsGrp::after{content: "";display: table;clear: both;}
 
 /* row type */
-.itemsGrp.rowtype .item_prod {width: 49.43%; margin-bottom: 1.12%; height: 420px; border:1px solid #ddd; overflow: hidden;}
-.itemsGrp.rowtype .item_prod:nth-child(2n) {margin-right: 0;}
-.itemsGrp.rowtype .item_prod .itemBadge, .itemsGrp.rowtype .item_prod .itemcolorchip {display: none;}
-.itemsGrp.rowtype .item_prod .item_state {display: table; padding-left: 330px; padding-right: 50px; padding-bottom: 0; height: 420px; width: 100%;}
-.itemsGrp.rowtype .item_prod .itemLink {display: table-cell; position: static; vertical-align: middle;}
-.itemsGrp.rowtype .item_prod .itemLike {z-index: 99;}
+.itemsGrp.rowtype .item_prod {width:calc((100% - 20px)/2); margin-top:20px; margin-right:20px; height:420px; border:1px solid #ddd; overflow:hidden;}
+.itemsGrp.rowtype .item_prod:nth-child(2n) {margin-right:0;}
+.itemsGrp.rowtype .item_prod .itemBadge,
+.itemsGrp.rowtype .item_prod .itemcolorchip {display: none;}
+.itemsGrp.rowtype .item_prod .item_state {display:table; width:100%; padding:0;}
+.itemsGrp.rowtype .item_prod .itemLink {display:table-cell; position: relative;vertical-align: middle;width: 100%;height: 420px;padding-left: 330px;padding-right: 50px;}
+.itemsGrp.rowtype .item_prod .itemLike {left:240px; z-index:99;}
 .itemsGrp.rowtype .item_prod .itemPic {position: absolute; top: 0; left: 0; margin-bottom: 0; padding-top: 0; width: 280px; height: 420px;}
 .itemsGrp.rowtype .item_prod .itemPic .shape {z-index: 89;}
 .itemsGrp.rowtype .item_prod .itemPic::after {background: #f5f5f5; opacity:1; z-index: 87;}
 .itemsGrp.rowtype .item_prod .itemPic .pd_img {z-index: 88;}
-.itemsGrp.rowtype .item_state.soldout .itemPic:before {content:'SOLD OUT'; position: absolute; top: 50%; left: 50%; font-size: 20px; color:#fff; background: rgba(0,0,0,.5); width: 100%; height: 100%; transform:translate(-50%, -50%); line-height: 420px; z-index: 89; text-align: center;}
-.itemsGrp.rowtype .item_prod .itemBrand {margin:0px 6px 65px; font-size: 16px; font-weight: 300;}
-.itemsGrp.rowtype .item_prod .itemComment {position: absolute; left: 340px; top: 150px; font-size: 16px; font-weight: 300; margin:0;}
-.itemsGrp.rowtype .item_prod .itemName {margin:0px 6px 40px; font-size: 30px; font-weight: 200; line-height: 1.2; max-height:70px; height: 70px;}
-.itemsGrp.rowtype .item_prod .itemPrice {font-size: 30px; line-height: 1; font-weight: 500;}
+.itemsGrp.rowtype .item_state.soldout .itemPic:before {content:'SOLD OUT'; position:absolute; top:50%; left:50%; color:#fff; font-size:28px; font-weight:500; background:rgba(0,0,0,.7); width:100%; height:100%; transform:translate(-50%, -50%); line-height: 420px; z-index: 89; text-align:center;}
+.itemsGrp.rowtype .item_prod .itemBrand {margin:0px; font-size: 16px; font-weight: 300;}
+.itemsGrp.rowtype .item_prod .itemComment {position:relative; top:-80px; font-size: 16px; font-weight: 300; margin:0;}
+.itemsGrp.rowtype .item_prod .itemName {margin:10px 0px 60px; font-size:24px; font-weight: 200; line-height:34px; max-width:100%; max-height:68px; height:auto;}
+.itemsGrp.rowtype .item_prod .itemPrice {font-size: 30px; line-height: 1; font-weight:500; margin-left:0; margin-right:0;}
 .itemsGrp.rowtype .item_prod .itemPrice_original {font-size: 20px; font-weight: 200;}
-.itemsGrp.rowtype .item_prod .itemPercent {font-size: 42px; line-height: 0.8;}
-
-
+.itemsGrp.rowtype .item_prod .itemPercent {font-size: 42px; font-weight:300; line-height: 0.8;}
+.itemsGrp.rowtype .item_prod .shopBagBtn {margin-top:30px;}
+.itemsGrp.rowtype .item_prod .shopBagBtn .btn {width:178px; height:52px; border-color:#a7a7a7; color:#222; font-weight:300;}
+.itemsGrp.rowtype .item_prod .shopBagBtn .btn span {position:relative; padding-left:25px; line-height:1;}
+.itemsGrp.rowtype .item_prod .shopBagBtn .btn span::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:15px; height:18px; background: url('/images/pc/ico_shopbag.png') no-repeat 50% 50%;}
 
 .item_prod {width: 20%;display: inline-block;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.2px;}
 .item_state {position: relative; padding: 0px 10px 60px; box-sizing: border-box;}
@@ -949,7 +952,7 @@ select,
 }
 
 /*input */
-.help_block {display: block;margin-top: 5px;margin-bottom: 0px;width: 100%;text-indent: 10px;position: relative;}
+.help_block {display: block; position:relative; margin-top:5px; margin-bottom:0px; width:100%; text-indent:10px; font-size:14px;}
 .help_block p[class*="t_"] span {display:inline-block;}
 
 /* 체크박스 */
@@ -1249,7 +1252,7 @@ input[type="file"] {
 .quick_menu_group .area > div:first-child span:first-child a{margin-left:0}
 .quick_menu_group .area > div:first-child span:first-child a:after{display:none}
 .quick_menu_group .area > div:first-child span a:after{position:absolute;top:13px;left:0;width:1px;height:13px;background:#959596;content:''}
-.quick_menu_group .inr a{margin-left:16px;color:#eeeeee;}*/
+.quick_menu_group .inr a{margin-left:16px;color:#eeeeee;}