@charset "utf-8";

.modal-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background:rgba(0,0,0,0.6);
	z-index:999;
}
.modal {
	position:absolute;
	top:50%; 
	left:50%; 
	width:980px; 
	padding:50px; 
	border-radius:20px; 
	background-color:#fff; 
	transform:translate(-50%, -50%);
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
}
.modal-popup-join {
	width:400px; 
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
}
.modal-cart-alim {
	width:400px; 
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
}
.modal-inquiry-popup {
	width:500px; 
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
}
.modal-leave-popup {
	width:400px; 
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
}
.modal-message-view-popup {
	width:500px; 
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
}
.modal-sale-success-popup {
	width:980px; 
	box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
}

.loading { position:fixed; top:50%; left:50%; font-size:0; line-height:0; padding:40px; border-radius:10px; background-color:#fff; transform:translate(-50%, -50%); z-index:999; }
.loading img { height:66px; }

h2.modal-h2 { font-size:24px; font-weight:700; color:#111; line-height:33px; }
h2.modal-h2-finish { position:relative; margin-top:45px; font-size:20px; font-weight:700; color:#111; line-height:29px; }
h2.modal-h2-finish em { display:inline-block; margin-left:20px; font-size:15px; font-weight:300; color:#999; line-height:29px; vertical-align:top; }
h2.modal-h2-finish em img { margin:7px 1px 0 1px; vertical-align:top; }
h2.modal-h2-finish em span { display:inline-block; margin:0 10px; padding-right:11px; font-weight:600; color:#333; vertical-align:top; background:url('../images/common/gnb_line.jpg') no-repeat right center; }

h3.modal-h3 { position:relative; font-size:20px; font-weight:700; color:#111; line-height:29px; text-align:left;  }
h3.modal-h3 a { position:absolute; top:5px; right:0; font-size:0; line-height:0; }

p.modal-guide { margin-top:10px; font-size:15px; font-weight:300; color:#555; line-height:24px; }
p.modal-care { margin-top:15px; font-size:14px; font-weight:300; color:#888; line-height:23px; }
p.modal-add { position:relative; margin-top:15px; padding-left:75px; }
p.modal-add span { position:absolute; top:0; left:0; font-size:15px; font-weight:600; color:#333; line-height:40px; }
p.modal-add input[type="text"], p.modal-add input[type="password"] { width:100%; height:40px; padding-left:15px; font-size:15px; font-weight:300; color:#555; border-radius:5px; border:1px solid #d5d5d5; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
p.modal-text { font-size:17px; color:#111; line-height:26px; text-align:center; }

div.modal-finish { font-size:0; line-height:0; text-align:center; }
div.modal-finish p { margin:45px 0; font-size:28px; font-weight:700; color:#111; line-height:37px; }
div.modal-finish a { display:inline-block; width:196px; margin:0 5px; font-size:18px; font-weight:700; color:#e55b10; line-height:53px; border-radius:10px; border:2px solid #e55b10; }
div.modal-finish a.on { color:#fff; background-color:#e55b10; }

div.modal-pp { position:relative; font-size:20px; font-weight:700; color:#111; line-height:60px; }
div.modal-pp span { overflow:hidden; display:inline-block; width:58px; height:58px; margin-right:10px; border-radius:50px; vertical-align:top; border:1px solid #6399ba; }
div.modal-pp span img { height:58px; vertical-align:top; }

div.modal-input { margin-top:20px; }
div.modal-input textarea { width:100%; height:200px; padding:15px 20px; font-size:16px; color:#333; line-height:25px; border-radius:10px; border:1px solid #d5d5d5; }
div.modal-input input[type="text"] { width:100%; height:55px; margin-top:20px; font-size:16px; font-weight:600; color:#333; text-align:center; border-radius:10px; border:1px solid #d5d5d5; }
div.modal-input p { margin-top:10px; font-size:15px; font-weight:300; color:#8a939b; line-height:24px; text-align:center; }

div.modal-closed { position:absolute; top:-35px; right:-35px; font-size:0; line-height:0; z-index:888; }
div.modal-closed a { display:block; padding:15px; opacity:0.4; }
div.modal-closed a:hover { opacity:1; }

div.modal-policy { overflow-y:scroll; max-height:606px; margin-top:30px; font-size:15px; color:#555; line-height:24px; text-align:left; }
div.modal-policy strong { display:block; margin:20px 0 10px 0; font-size:16px; font-weight:600; color:#333; line-height:25px; }
div.modal-policy strong.mgtop { margin-top:0; }

ul.modal-syntax { overflow:hidden; margin:5px -5px 0 -5px; }
ul.modal-syntax li { float:left; width:calc((100% - 20px) / 2); margin:10px 5px 0 5px; padding:10px 20px; font-size:14px; font-weight:300; color:#3074f0; line-height:23px; border-radius:5px; background-color:#f3f8fe; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

ul.modal-message li { position:relative; margin-top:10px; padding-left:70px; font-size:15px; font-weight:300; color:#555; line-height:24px; }
ul.modal-message li:first-child { margin-top:0; }
ul.modal-message li strong { position:absolute; top:0; left:0; font-weight:600; color:#111; }
ul.modal-message li.cont { margin-top:15px; padding:15px 0; border-top:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; overflow-y:auto; max-height:170px; }

ul.modal-product { overflow:hidden; margin:0 -10px 0 -10px; }
ul.modal-product li { position:relative; float:left; overflow:hidden; width:calc((100% - 81px) / 4); margin:25px 10px 0 10px; }
ul.modal-product li div.like { position:absolute; top:18px; right:18px; overflow:hidden; height:24px; font-size:0; line-height:0; z-index:111; }
ul.modal-product li div.like img { height:48px; }
ul.modal-product li div.like.on img, ul.modal-product li div.like:hover img { margin-top:-24px; }
ul.modal-product li a { display:block; }
ul.modal-product li a div.img { position:relative; overflow:hidden; font-size:0; line-height:0; border-radius:10px; }
ul.modal-product li a div.img img { width:100%; height:158px; }
ul.modal-product li a div.img span { position:absolute; top:18px; right:18px; overflow:hidden; height:24px; }
ul.modal-product li a div.img span img { height:48px; }
ul.modal-product li a div.img span.on img, #main ul.modal-product li a div.img span:hover img { margin-top:-24px; }
ul.modal-product li a p.expert { margin-top:15px; font-size:14px; font-weight:300; color:#777; line-height:23px; }
ul.modal-product li a p.expert em { position:absolute; top:0; right:0; }
ul.modal-product li a p.subject { margin-top:15px; font-size:15px; color:#555; line-height:22px; overflow:hidden; display:-webkit-box; white-space:initial; text-overflow: ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
ul.modal-product li a p.price { position:relative; min-height:25px; margin-top:10px; font-size:16px; color:#111; line-height:25px; text-align:right; }
ul.modal-product li a p.price span { display:inline-block; font-family:"NanumSquare"; font-weight:800; color:#3074f0; line-height:25px; vertical-align:0; }
ul.modal-product li a p.price em { position:absolute; top:4px; left:0; font-family:"NanumSquare"; font-size:14px; font-weight:700; color:#777; line-height:21px; vertical-align:0; }
ul.modal-product li a p.price em img { margin:2px 6px 0 0; vertical-align:top; }

div.modal-btn { margin-top:35px; text-align:center }
div.modal-btn a { display:inline-block; width:118px; margin:0 5px; font-size:14px; font-weight:700; color:#e55b10; line-height:41px; border-radius:50px; border:1px solid #e55b10; }
div.modal-btn a.on { color:#fff; background-color:#e55b10; }
div.modal-btn a.modal-syntax { width:100%; font-size:16px; color:#3074f0; line-height:55px; border-radius:5px; background-color:#f3f8fe; border:none; }
div.modal-btn a.modal-syntax:hover { color:#f3f8fe; background-color:#3074f0; }

div.modal-btn2 { margin-top:40px; font-size:0; line-height:0; text-align:center; }
div.modal-btn2 a { display:inline-block; width:118px; margin:0 5px; font-size:14px; font-weight:700; color:#e55b10; line-height:41px; border-radius:50px; border:1px solid #e55b10; }
div.modal-btn2 a.on { color:#fff; background-color:#e55b10; }

div.modal-btn-all { margin-top:35px; }
div.modal-btn-all a { display:block; font-size:20px; font-weight:700; color:#fff; line-height:59px; text-align:center; border-radius:10px; background-color:#e55b10; }

a.popup-agree1-button { display:block; margin-top:10px; font-size:18px; font-weight:700; color:#fff; line-height:57px; text-align:center; border-radius:10px; background-color:#c0c0c0; }
a.popup-agree2-button { display:block; margin-top:10px; font-size:18px; font-weight:700; color:#fff; line-height:57px; text-align:center; border-radius:10px; background-color:#c0c0c0; }
a.popup-agree3-button { display:block; margin-top:10px; font-size:18px; font-weight:700; color:#fff; line-height:57px; text-align:center; border-radius:10px; background-color:#c0c0c0; }
a.popup-agree1-button-on { background-color:#e55b10; }
a.popup-agree2-button-on { background-color:#e55b10; }
a.popup-agree3-button-on { background-color:#e55b10; }

@media screen and (max-width:980px) {
	.modal {
		width:750px; 
	}
	.modal-sale-success-popup {
		width:750px; 
	}
	ul.modal-product li a div.img img { height:115px; }
	ul.modal-product li a p.price { text-align:left; }
	ul.modal-product li a p.price em { position:static; display:block; margin-top:5px; }
}

@media screen and (max-width:768px) {
	.modal {
		width:480px; 
		padding:30px 20px 20px 20px; 
		border-radius:10px; 
	}
	.modal-popup-join {
		width:300px; 
		padding:20px; 
	}
	.modal-cart-alim {
		width:300px; 
		padding:25px 20px 30px 20px;
	}
	.modal-leave-popup {
		width:300px; 
		padding:25px 20px 30px 20px;
	}
	.modal-inquiry-popup {
		width:300px;
		padding:20px;
	}
	.modal-message-view-popup {
		width:300px;
		padding:20px; 
	}
	.modal-sale-success-popup {
		width:480px; 
		padding:25px 20px; 
	}
	.loading { padding:20px; border-radius:5px; }
	.loading img { height:46px; }

	h2.modal-h2 { font-size:18px; line-height:27px; }
	h2.modal-h2-finish { margin-top:25px; font-size:16px; line-height:25px; }
	h2.modal-h2-finish em { margin-left:10px; font-size:13px; line-height:25px; }
	h2.modal-h2-finish em span { margin:0 8px; padding-right:9px; background-size:1px 10px; }
	h3.modal-h3 { margin-top:-10px; font-size:15px; line-height:24px; }
	h3.modal-h3 a img { height:15px; }

	p.modal-text { font-size:14px; line-height:23px; }
	p.modal-guide { margin-top:5px; font-size:13px; line-height:20px; }
	p.modal-care { margin-top:10px; font-size:12px; line-height:19px; }
	p.modal-add { margin-top:10px; padding-left:60px; }
	p.modal-add span { font-size:13px; line-height:32px; }
	p.modal-add input[type="text"] { height:32px; padding-left:10px; font-size:13px; }

	div.modal-finish img { height:80px; }
	div.modal-finish p { margin:20px 0 25px 0; font-size:18px; line-height:25px; }
	div.modal-finish a { width:118px; margin:0 3px; font-size:14px; line-height:38px; border-radius:5px; border:1px solid #e55b10; }
	
	div.modal-pp { font-size:15px; line-height:40px; }
	div.modal-pp span { width:38px; height:38px; margin-right:8px; }
	div.modal-pp span img { height:38px; }

	div.modal-input { margin-top:15px; }
	div.modal-input textarea { height:150px; padding:5px 10px; font-size:13px; line-height:22px; border-radius:5px; }
	div.modal-input input[type="text"] { height:40px; margin-top:10px; font-size:13px; border-radius:5px; }
	div.modal-input input.upload-name { font-size:13px; }
	div.modal-input p { margin:8px 0 -3px 0; font-size:12px; line-height:17px; }
	div.modal-input p em { display:block; }

	div.modal-closed { top:0; right:0; }
	div.modal-closed a { padding:10px; }
	div.modal-closed a img { height:15px; }

	div.modal-policy { max-height:318px; margin-top:12px; font-size:12px; line-height:19px; }
	div.modal-policy strong { margin:12px 0 8px 0; font-size:13px; line-height:20px; }
	
	ul.modal-syntax { margin:8px -3px 0 -3px; }
	ul.modal-syntax li { width:calc((100% - 12px) / 2); margin:6px 3px 0 3px; padding:5px 15px; font-size:12px; line-height:21px; }

	ul.modal-message li { margin-top:5px; padding-left:60px; font-size:13px; line-height:22px; }
	ul.modal-message li.cont { margin-top:10px; padding:10px 0; line-height:20px; }

	ul.modal-product { margin:0 -8px 0 -8px; }
	ul.modal-product li { width:calc((100% - 33px) / 2); margin:15px 8px 0 8px; }
	ul.modal-product li:nth-child(3), ul.modal-product li:nth-child(4) { display:none; }
	ul.modal-product li div.like { top:10px; right:10px; height:18px; }
	ul.modal-product li div.like img { height:36px; }
	ul.modal-product li div.like.on img, ul.modal-product li div.like:hover img { margin-top:-18px; }
	ul.modal-product li a div.img { border-radius:5px; }
	ul.modal-product li a div.img img { height:150px; }
	ul.modal-product li a div.img span { top:10px; right:10px; height:18px; }
	ul.modal-product li a div.img span img { width:18px; height:36px; }
	ul.modal-product li a div.img span.on img, #popup2 ul.modal-product li a div.img span:hover img { margin-top:-18px; }
	ul.modal-product li a p.expert { margin-top:10px; font-size:12px; line-height:19px; }
	ul.modal-product li a p.subject { height:40px; margin-top:10px; font-size:13px; line-height:20px; }
	ul.modal-product li a p.price { min-height:20px; margin-top:5px; font-size:13px; line-height:20px; }
	ul.modal-product li a p.price span { font-size:14px; line-height:20px; }
	ul.modal-product li a p.price em { top:2px; font-size:13px; line-height:18px; }
	ul.modal-product li a p.price em img { height:12px; margin:2px 6px 0 0; }
	
	div.modal-btn { margin-top:20px; }
	div.modal-btn a { width:98px; margin:0 3px; font-size:12px; line-height:31px; }
	div.modal-btn a.modal-syntax { font-size:13px; line-height:40px; }

	div.modal-btn2 { margin-top:20px; }
	div.modal-btn2 a { width:98px; margin:0 3px; font-size:12px; line-height:31px; }
	div.modal-btn-all { margin-top:20px; }
	div.modal-btn-all a { font-size:14px; line-height:43px; border-radius:5px; }
	
	a.popup-agree1-button { font-size:14px; line-height:43px; border-radius:5px; }
	a.popup-agree2-button { font-size:14px; line-height:43px; border-radius:5px; }
	a.popup-agree3-button { font-size:14px; line-height:43px; border-radius:5px; }
}

@media screen and (max-width:480px) {
	.modal {
		width:320px; 
	}
	.modal-sale-success-popup {
		width:320px; 
	}
	ul.modal-product li a div.img img { height:90px; }
}