이미지 추가

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

@@ -295,8 +295,8 @@ textarea {background-color:transparent; border:1px solid #d7d7d7; width:99%; ove
 .btn {
   display: inline-block;
   margin-bottom: 0;
-  padding: 14px 34px;
-  font-size: 14px;
+  padding: 13px 41px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 20px;
   text-align: center;
@@ -429,10 +429,12 @@ background-color: #fe970a;border-color: #fe970a;color:#ffffff;
 .ico_trash::before {content: ""; width:13px; height:16px; background:url(/images/pc/ico_trash.png) no-repeat 50% 50%;}
 .ico_trash_wh::before {content: ""; width:13px; height:16px; background:url(/images/pc/ico_trash_white.png) no-repeat 50% 50%;}
 .ico_like::before {content: ""; width: 19px; height:16px;background: url(/images/pc/ico_like.png) no-repeat 0% 50%; background-size:cover;}
-.active .ico_like::before {background-position:100% 50%;}
+.ico_like2::before {content: ""; width: 16px; height:14px;background: url(/images/pc/ico_like2.png) no-repeat 0% 50%; background-size:cover;}
+.active .ico_like::before,
+.active .ico_like2::before {background-position:100% 50%;}
 .ico_star::before {content: ""; width: 17px; height:17px;background: url(/images/pc/ico_star.png) no-repeat 0% 50%; background-size:cover;}
 .active .ico_star::before {background-position:100% 50%;}
-.ico_saletag::before {content: ""; width:36px;height:16px;background: url(/images/pc/ico_saletag.png) no-repeat 50% 50%; background-size:cover;}
+.ico_saletag::before {content: ""; width:34px;height:17px;background: url(/images/pc/ico_saletag.png) no-repeat 50% 50%; background-size:cover;}
 .ico_calender::before {content: ""; width:15px;height:16px;background: url(/images/pc/ico_calender.png) no-repeat 50% 50%; background-size:cover;}
 .ico_snslogin::before {content: ""; background-image: url(/images/pc/ico_snslogin.png); background-size:auto 100%;}
 .ico_snslogin.kakao::before {width:20px; height:22px; background-position:0 0;}
@@ -444,6 +446,7 @@ background-color: #fe970a;border-color: #fe970a;color:#ffffff;
 .ico_check.gray::before {content: ""; background-position:0px -16px;}
 .ico_phone::before {content: ""; width:22px; height:30px; background:url(/images/pc/ico_join_bg.png) no-repeat 0 0; background-size:auto 100%;}
 .ico_ipin::before {content: ""; width:30px; height:30px; background:url(/images/pc/ico_join_bg.png) no-repeat -30px 0; background-size:auto auto;}
+.ico_close1::before {content: ""; width:12px;height:12px;background: url(/images/pc/ico_close1.png) no-repeat 50% 50%; background-size:cover;}
 
 /* btn linktext */
 a[class*="link"]::after, .btn_link span::after {
@@ -918,23 +921,23 @@ select,
 .form_field input[type="checkbox"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
 .form_field input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:26px; cursor:pointer; font-size: 14px; line-height: 1.5;font-weight: 300;letter-spacing: 0;} 
 .form_field input[type="checkbox"] + label:before{ 
-  content:''; position:absolute; left:0; top:3px; width:18px; height:18px; text-align:center; background:#fff; border:1px solid #ccc; border-radius: 100%; box-sizing:border-box; 
+  content:''; position:absolute; left:0; top:3px; width:20px; height:20px; text-align:center; background:#fff; /*border:1px solid #ccc;*/ border-radius: 100%; box-sizing:border-box; 
   background: url('/images/pc/ico_chk_rdi.png') no-repeat;
-  background-position: -1px -2px;
+  background-position: 0px 0px;
 } 
 .form_field input[type="checkbox"]:Disabled + label, 
 .form_field input[type="radio"]:Disabled + label{cursor: default;opacity: .45;} 
 
 .form_field input[type="checkbox"]:checked + label:after{ 
-  content: ''; position:absolute; top:3px; left:0; width:18px; height:18px; background-color: #fd4800; 
+  content: ''; position:absolute; top:3px; left:0; width:20px; height:20px; background-color: #fd4800; 
   background: url('/images/pc/ico_chk_rdi.png') no-repeat;
-  background-position: -21px -1px;
+  background-position: -20px 0px;
 }
 
 .form_field input[type="checkbox"]:Disabled + label:after{ 
-  content: ''; position:absolute; top:3px; left:0; width:18px; height:18px; background-color: #fd4800; 
+  content: ''; position:absolute; top:3px; left:0; width:20px; height:20px; background-color: #fd4800; 
   background: url('/images/pc/ico_chk_rdi.png') no-repeat;
-  background-position: 0px -1px;
+  background-position: -40px 0px;
   /* background-position: -42px -1px; */
 }
 
@@ -947,22 +950,22 @@ select,
 .form_field input[type="radio"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
 .form_field input[type="radio"] + label{ display:inline-block; position:relative; padding-left:26px; cursor:pointer; font-size: 16px;line-height: 1.5;font-weight: 300;letter-spacing: 0;} 
 .form_field input[type="radio"] + label:before{ 
-  content:''; position:absolute; left:0; top:3px; width:20px; height:20px; text-align:center; background:#fff; border:1px solid #ccc; border-radius: 100%; box-sizing:border-box; 
+  content:''; position:absolute; left:0; top:3px; width:20px; height:20px; text-align:center; background:#fff; /*border:1px solid #ccc;*/ border-radius: 100%; box-sizing:border-box; 
   background: url('/images/pc/ico_chk_rdi.png') no-repeat;
-  background-position: -64px -1px;
+  background-position: -60px 0px;
 } 
 
 /* 보여질 부분의 스타일을 추가하면 된다. */ 
 .form_field input[type="radio"]:checked + label:after{ 
   content: ''; position:absolute; top:3px; left:0; width:20px; height:20px; background-color: #fd4800; 
   background: url('/images/pc/ico_chk_rdi.png') no-repeat;
-  background-position: -84px 0px;
+  background-position: -80px 0px;
 }
 
 .form_field input[type="radio"]:Disabled + label:after{ 
   content: ''; position:absolute; top:3px; left:0; width:20px; height:20px; background-color: #fd4800; 
   background: url('/images/pc/ico_chk_rdi.png') no-repeat;
-  background-position: -105px 0px;
+  background-position: -100px 0px;
 }
 
 
@@ -1061,13 +1064,15 @@ input[type="file"] {
 
 /* header */
 #header {-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;} 
+#header .common_header .nav > ul.btn_home {display:none;}
 #header.minify {position: fixed; top:0; left:0; right:0; z-index:100;}
 #header.minify .common_header .hd_top_banner {display:none;}
 #header.minify .common_header > .area {height:auto; padding:20px 40px 10px}
-#header.minify .common_header > .gnb {height:auto; padding:10px 40px 20px}
+#header.minify .common_header > .gnb {height:auto; padding:30px 40px 30px}
 #header.minify .common_header .logo {margin-top:0}
 #header.minify .common_header .logo .ico_logo:before {width:118px; height:18px}
 #header.minify .common_header .util_group {margin-top:2px}
+#header.minify .common_header .nav > ul.btn_home {display:inline-block;}
 #header.minify .common_header .nav > ul > li > a {font-size:17px}
 #header.minify .common_header .search > .area {width:300px; border-bottom-width:1px;}
 #header.minify .common_header .search .search_input {font-size:15px;}
@@ -1363,15 +1368,6 @@ input[type="file"] {
 
 
 
-
-
-
-
-
-
-
-
-
 /* slide custom */
 .slick-dots {position: absolute;bottom: 25px;display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;
 }
@@ -1384,7 +1380,7 @@ color: transparent;border: 0;outline: none;background: transparent; background:
 /* End of slide custom */
 
 
-/* Alert Custom */
+/* Mesage, Toast, Alert Custom */
 .alert {
 	padding: 15px;border: 1px solid transparent; border-radius: 4px;margin-bottom: 10px;line-height: 21px;
 	background-color: #dddddd;color: #666666;border-color: #dddddd;
@@ -1394,6 +1390,335 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 .alertCls:hover, .alertCls:focus {color: #000;text-decoration: none;cursor: pointer;filter: alpha(opacity=50);opacity: .5;}
 
 
+/* ALERT, CONFIRM Plugin custom  */
+.dialog-mobile-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 19;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	-ms-transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+/*alert confirm*/
+.dialog-mobile {
+	padding: 0 40px 40px 40px;
+	text-align:center;
+	position: fixed;
+	top: 50%;
+	left: 0;
+	z-index: 20;
+	min-width:200px;
+	background-color: #FFFFFF;
+	border-radius: 0px;
+	-ms-transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.dialog-mobile .dialog-title {
+    padding: 0.8em 1em 0.5em;
+    text-align: center;
+    color: #333333;
+	font-size: 18px;
+    font-weight: 500;
+    border-radius: 5px 5px 0 0;
+}
+.dialog-mobile .dialog-content {
+	position: relative;
+	padding:50px 0 40px 0;
+	line-height: 2em;
+	text-align: left;
+	color: #000;
+	font-size:15px;
+	text-align:center;
+}
+.dialog-mobile .dialog-content em {
+	color:#df6400
+}
+.dialog-mobile .dialog-button,
+.dialog-mobile .dialog-sure-button,
+.dialog-mobile .dialog-cancel-button {
+	display:inline-block;
+	position: relative;
+	margin:0 5px;
+	padding:0 30px;
+	min-width: 70px;
+	height: 38px;
+	line-height: 38px;
+	text-align: center;
+	font-size:14px;
+	cursor:pointer;
+	border-radius:0px;
+}
+.dialog-mobile .dialog-button{
+	color: #fff;
+	background:#000;
+	border:1px solid #000;
+	min-width:100px;
+}
+.dialog-mobile .dialog-cancel-button {
+	color: #000;
+	background: #fff;
+	border:1px solid #999;
+	min-width:100px;
+}
+.dialog-mobile .dialog-sure-button{
+	color: #fff;
+	background:#000;
+	border:1px solid #000;
+	min-width:100px;
+}
+.dialog-mobile button[i='1']{
+	color: #000 !important;
+	background:#fff !important;
+	border:1px solid #777;
+	min-width:100px;
+}
+
+/* 닫기 아이콘 */
+.dialog-close-btn {
+	position:absolute;
+	top:0;
+	right:0;
+	padding:20px;
+	width: 17px;
+	height: 17px;
+	cursor:pointer;
+	background:url('/images/btn_top_close.png') no-repeat 50% 50%;
+}
+
+/*bottom dialog*/
+.dialog-mobile-bottom {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	z-index: 10001;
+	width: 100%;
+	color: #333333;
+	background-color: #EEEEEE;
+}
+.dialog-mobile-bottom .bottom-btn-item {
+	text-align: center;
+}
+.bottom-btn-item .dialog-item-btn {
+	background: #FFFFFF;
+	padding: 0.5em 0;
+	border-bottom: 1px solid #EEEEEE;
+}
+.bottom-btn-item .dialog-item-btn:last-child {
+	border-bottom: none;
+}
+.dialog-mobile-bottom .dialog-cancel-btn {
+	margin-top: 0.6em;
+	text-align: center;
+	background: #FFFFFF;
+	padding: 0.5em 0;
+}
+/*toast*/
+.dialog-mobile-toast {
+	position: fixed;
+	bottom: 5em;
+}
+.dialog-mobile-toast .toast-content {
+	padding: 0.5em 1em;
+	color: #FFFFFF;
+	border-radius: 2px;
+	background-color: #333333;
+}
+/*loading*/
+.mobile-loading-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10000;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.mobile-loading {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10001;
+	min-width: 2em;
+	min-height: 2em;
+	padding: 0.8em 1.6em;
+	text-align: center;
+	border-radius: 2px;
+	color: #FFFFF0;
+	background-color: #0A0A0A;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+/*animation*/
+.animation-zoom-in, .animation-zoom-out,
+.animation-bottom-in, .animation-bottom-out,
+.animation-bg-fadeIn {
+	-webkit-animation-duration: 0.3s;
+	-webkit-animation-fill-mode: both;
+	animation-duration: 0.3s;
+	animation-fill-mode: both;
+}
+.animation-fade-in, .animation-fade-out {
+	-webkit-animation-duration: 1s;
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-fill-mode: both;
+	animation-duration: 1s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: both;
+}
+.animation-zoom-in {
+	-webkit-animation-name: zoomIn;
+	animation-name: zoomIn;
+}
+.animation-zoom-out {
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut;
+}
+.animation-fade-in {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+.animation-fade-out {
+	-webkit-animation-name: fadeOut;
+	animation-name: fadeOut;
+}
+.animation-bottom-in {
+	-webkit-animation-name: bottomIn;
+	animation-name: bottomIn;
+}
+.animation-bottom-out {
+	-webkit-animation-name: bottomOut;
+	animation-name: bottomOut;
+}
+.animation-bg-fadeIn {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+
+@-webkit-keyframes zoomIn {
+	from{
+		opacity: 0;
+		-webkit-transform: scale(0, 0);
+	}
+	to{
+		opacity: 1;
+		-webkit-transform: scale(1, 1);
+	}
+}
+@-webkit-keyframes zoomOut {
+	from{
+		opacity: 1;
+		-webkit-transform: scale(1, 1);
+	}
+	90%{
+		-webkit-transform: scale(0.3, 0.3);
+	}
+	to{
+		opacity: 0;
+		-webkit-transform: scale(0, 0);
+	}
+}
+@keyframes zoomIn {
+	from{
+		opacity: 0;
+		transform: scale(0, 0);
+	}
+	to{
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+}
+@keyframes zoomOut {
+	from{
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+	90%{
+		transform: scale(0.3, 0.3);
+	}
+	to{
+		opacity: 0;
+		transform: scale(0, 0);
+	}
+}
+@-webkit-keyframes fadeIn {
+	from{
+		opacity: 0;
+	}
+	to{
+		opacity: 1;
+	}
+}
+@-webkit-keyframes fadeOut {
+	from{
+		opacity: 1;
+	}
+	30%{
+		opacity: 0.3;
+	}
+	to{
+		opacity: 0;
+	}
+}
+@keyframes fadeIn {
+	from{
+		opacity: 0;
+	}
+	to{
+		opacity: 1;
+	}
+}
+@keyframes fadeOut {
+	from{
+		opacity: 1;
+	}
+	30%{
+		opacity: 0.3;
+	}
+	to{
+		opacity: 0;
+	}
+}
+@-webkit-keyframes bottomIn {
+	from{
+		bottom: -1000px;
+	}
+	to{
+		bottom: 0;
+	}
+}
+@-webkit-keyframes bottomOut {
+	from{
+		bottom: 0;
+	}
+	to{
+		bottom: -1000px;
+	}
+}
+@keyframes bottomIn {
+	from{
+		bottom: -1000px;
+	}
+	to{
+		bottom: 0;
+	}
+}
+@keyframes bottomOut {
+	from{
+		bottom: 0;
+	}
+	to{
+		bottom: -1000px;
+	}
+}
+
+
 /*  modal popup  */
 .blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:999999;padding:0px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center;}
 .blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}