@charset "utf-8";

/* Banner */
#banner {
	width:100%;
	margin-top:4rem;
	padding:0 3rem;
	display:flex;
	justify-content:center;
}
#banner .bannerBox {
	position:relative;
	width:1400px;
	height:520px;
	background-color:#fafafa;
	border-radius:1.3rem;
	overflow:hidden;
	display:flex;
}
#banner .bannerBox .btn_admin {
	position:absolute;
	top:1rem;
	right:1rem;
	min-width:80px;
	height:35px;
	font-size:1rem;
	font-weight:400;
	color:#fff;
	line-height:35px;
	margin-left:5px;
	background-color:#F20000;
	border:1px solid transparent;
	border-radius:5px;
	vertical-align:middle;
	text-align:center;
	text-decoration:none;
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:1;
}

/* Quick Link */
#quickLink {
	width:100%;
	margin-top:1.2rem;
	padding:0 3rem;
	display:flex;
	justify-content:center;
}
#quickLink ul {
	width:100%;
	max-width:calc(1400px + 0.5rem);
	margin:0 -0.25rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#quickLink ul li {
	width:25%;
	margin:0 0.25rem;
}
#quickLink ul li a {
	width:100%;
	height:80px;
	font-family: "Freesentation";
	padding:0 1.8rem;
	background-color:#f9f7f6;
	background-size:auto 48px;
	background-position:86% 50%;
	background-repeat:no-repeat;
	border-radius:10px;
	transition:all 0.15s ease-in-out;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
}
#quickLink ul li:nth-of-type(1) a { background-image:url("../img/make_guide.png"); }
#quickLink ul li:nth-of-type(2) a { background-image:url("../img/document_size.png"); }
#quickLink ul li:nth-of-type(3) a { background-image:url("../img/free_design.png"); }
#quickLink ul li:nth-of-type(4) a { background-image:url("../img/spine_calculator.png"); }
#quickLink ul li a:hover { box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15); }
#quickLink ul li a.noonnu {
	flex-direction:row;
	align-items:center;
}
#quickLink ul li a em {
	font-size:0.96rem;
	color:#424242;
	font-weight:400;
	font-style:normal;
	word-break:keep-all;
	margin-top:0.3rem;
}
#quickLink ul li a p {
	font-size:1.2rem;
	color:#1b1b1b;
	font-weight:600;
}
#quickLink ul li a.noonnu b {
	position:relative;
	min-width:6rem;
	font-size:2.3rem;
	color:#1b1b1b;
	font-weight:900;
	text-align:center;
	z-index:1;
}
#quickLink ul li a.noonnu b:before {
	content:"";
	position:absolute;
	left:0.5rem;
	right:0.5rem;
	bottom:0.15rem;
	height:40%;
	background-color:#ffd951;
	z-index:-1;
}

/* Service */
#service {
	width:100%;
	margin-top:3rem;
	padding:3rem;
}
#service .serviceBox {
	width:100%;
	max-width:1400px;
	margin:0 auto;
}
#service .sectionTitle {
	font-family:"Paperlogy";
	font-size:1.5rem;
	color:#000;
	font-weight:600;
}
#service .cardList {
	width:100%;
	margin-top:2rem;
	display:flex;
	justify-content:space-between;
}
#service .cardList li {
	position:relative;
	width:400px;
	margin-right:100px;
}
#service .cardList li:last-of-type { margin:0; }
#service .cardList li img {
	width:100%;
	height:auto;
	border-radius:10px;
}
#service .cardList .labelWrap {
	position:absolute;
	top:20px;
	left:-5px;
	width:100px;
	height:40px;
	filter:drop-shadow(0 2px 4px rgba(0,0,0, 0.3));
	z-index:1;
}
#service .cardList .labelWrap:before {
	content:"";
	position:absolute;
	left:0;
	bottom:-5px;
	width:5px;
	height:5px;
	background-color:#b92727;
	clip-path:polygon(100% 0, 3% 0, 100% 100%);
}
#service .cardList .label {
	width:100px;
	height:40px;
	font-family:"Paperlogy";
	font-size:1.1rem;
	color:#fff;
	font-weight:700;
	padding-right:0.5rem;
	background:#FC6767;
	background:linear-gradient(90deg,rgba(252, 103, 103, 1) 0%, rgba(236, 0, 140, 1) 100%);
	clip-path:polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
	display:flex;
	align-items:center;
	justify-content:center;
}
#service .cardInfo {
	margin-top:1rem;
	display:flex;
}
#service .cardInfo dt {
}
#service .cardInfo dt:last-of-type {
	min-width:100px;
	margin-left:auto;
}
#service .cardInfo dt span {
	font-size:1rem;
	color:#616161;
	font-weight:400;
}
#service .cardInfo dt p {
	font-size:1.5rem;
	color:#1b1b1b;
	font-weight:700;
}
#service .cardInfo dt a {
	font-size:0.96rem;
	color:#fff;
	font-weight:400;
	margin-top:1rem;
	padding:0.5rem 1rem;
	background-color:#616161;
	border-radius:3px;
	transition:all 0.25s ease-in-out;
	text-align:center;
	display:block;
}
#service .cardInfo dt a:hover { background-color:#212121; }

#service .srvice_slogan {
	width:100%;
	margin-top:5rem;
	display:flex;
	justify-content:center;
}
#service .srvice_slogan fieldset {
	position:relative;
	width:1400px;
	padding:5rem;
	border-radius:20px;
	text-align:center;
	overflow:hidden;
}
#service .srvice_slogan .bg_icon {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#f3faff;
	z-index:-1;
}
#service .srvice_slogan .bg_icon span {
	content:"";
	position:absolute;
	background-size:auto 100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
}
#service .srvice_slogan .bg_icon span:nth-of-type(1) {
	top:-3rem;
	left:1rem;
	width:10rem;
	height:10rem;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23B2EBF2' d='M411.1 299.9c-5.4 0-10.8.5-16 1.4-39.3 6.7-72.3-29.7-61.8-68.2 3.8-14 5.9-28.8 5.9-44.1 0-92-74.6-166.7-166.7-166.7C80.6 22.3 6 97 6 189s74.6 166.7 166.7 166.7c23.9 0 46.6-5.1 67.1-14.1 36.5-16.1 77.4 11.2 76.5 51.1 0 .7-.1 1.4-.1 2.1 0 52.4 42.5 94.9 94.9 94.9s94.9-42.5 94.9-94.9-42.5-94.9-94.9-94.9'/%3E%3C/svg%3E");
}
#service .srvice_slogan .bg_icon span:nth-of-type(2) {
	bottom:-3rem;
	left:8rem;
	width:13rem;
	height:13rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFF' d='M359.7 81.4c-79.5 0-144.2 63.5-146.2 142.5v-.1c-.9 34-38.2 54.2-67.2 36.5-14-8.6-30.5-13.6-48.2-13.6-50.8 0-92 41.2-92 92s41.2 92 92 92c44 0 80.7-30.9 89.8-72.1 7.4-33.2 47.9-45.9 72.9-23 26 23.9 60.8 38.5 98.9 38.5 80.8 0 146.3-65.5 146.3-146.3 0-80.9-65.5-146.4-146.3-146.4'/%3E%3C/svg%3E");
	transform:rotate(-15deg);
}
#service .srvice_slogan .bg_icon span:nth-of-type(3) {
	bottom:-2rem;
	right:3rem;
	width:15rem;
	height:15rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFECB3' d='M423.7 305.5c-12.8 0-24.9 2.9-35.8 8.2-50.5 23.6-110.2-3.9-125-57.7-3.3-12-8.2-23.3-14.6-33.6-17.3-28.5 4.6-64.7 37.9-62.6 1.2.1 2.5.1 3.7.1 32.6 0 58.9-26.4 58.9-58.9s-26.4-58.9-58.9-58.9c-32.6 0-58.9 26.4-58.9 58.9 0 5.6.8 10.9 2.2 16 9.1 32.1-21.7 61.2-53.3 50.2-13.5-4.7-28-7.3-43.1-7.3C64.6 159.8 6 218.4 6 290.6s58.6 130.8 130.8 130.8c29.7 0 57.1-9.9 79.1-26.6 44.6-33.9 109-19.3 134.6 30.6 13.7 26.5 41.3 44.7 73.2 44.7 45.4 0 82.3-36.8 82.3-82.3s-36.8-82.3-82.3-82.3'/%3E%3C/svg%3E");
	background-size:auto 100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
	z-index:0;
}
#service .srvice_slogan fieldset h1 {
	font-family:"Paperlogy";
	font-size:2.15rem;
	color:#1b1b1b;
	font-weight:700;
}
#service .srvice_slogan fieldset article { margin-top:1.5rem; }
#service .srvice_slogan fieldset article p {
	font-family:"Freesentation";
	font-size:1.25rem;
	color:#616161;
	font-weight:500;
	line-height:1.75rem;
}

/* New Book */
#newBook {
	width:100%;
	margin-top:3rem;
	padding:3rem;
	border-top:1px solid #eaeaea;
}
#newBook .newBookBox {
	width:100%;
	max-width:1400px;
	margin:0 auto;
}
#newBook .sectionHeader {
	width:100%;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
}
#newBook .sectionTitle {
	font-family:"Paperlogy";
	font-size:1.5rem;
	color:#000;
	font-weight:600;
}
#newBook .more {
	font-size:1rem;
	color:#000;
	font-weight:500;
	display:flex;
	align-items:center;
}
#newBook .more i {
	font-size:0.9rem;
	color:#000;
	margin-right:0.5rem;
}
#newBook .bookList { margin-top:3rem; }

/* Writer Review */
#writerReview {
	width:100%;
	margin-top:3rem;
	padding:3rem;
	background-color:#ecebe2;
}
#writerReview .reviewBox {
	width:100%;
	max-width:1400px;
	margin:0 auto;
}
#writerReview .sectionHeader {
	width:100%;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
}
#writerReview .sectionTitle {
	font-family:"Paperlogy";
	font-size:1.5rem;
	color:#000;
	font-weight:600;
	padding:0.5rem 0 0 2rem;
	background-image:url("../img/review.png");
	background-size:auto 32px;
	background-position:0 10%;
	background-repeat:no-repeat;
}
#writerReview .more {
	font-size:1rem;
	color:#000;
	font-weight:500;
	display:flex;
	align-items:center;
}
#writerReview .more i {
	font-size:0.9rem;
	color:#000;
	margin-right:0.5rem;
}
#writerReview .reviewList { margin-top:3rem; }

/* Notice & Info */
#noticeInfo {
	width:100%;
	padding:3rem;
	background-color:#fafafa;
}
#noticeInfo .noticeInfoBox {
	width:100%;
	max-width:1400px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}
#noticeInfo .sectionHeader {
	width:100%;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
}
#noticeInfo .sectionTitle {
	font-family:"Paperlogy";
	font-size:1.5rem;
	color:#000;
	font-weight:600;
}
#noticeInfo .more {
	font-size:1rem;
	color:#000;
	font-weight:500;
	display:flex;
	align-items:center;
}
#noticeInfo .more i {
	font-size:0.9rem;
	color:#000;
	margin-right:0.5rem;
}
#noticeInfo dt {
	margin-right:3rem;
	padding:2rem;
	background-color:#fff;
	border-bottom:1px solid #eaeaea;
}
#noticeInfo dt:nth-of-type(1) { width:680px; }
#noticeInfo dt:nth-of-type(2) { width:320px; }
#noticeInfo dt .customerInfo {
	margin-top:2rem;
	display:flex;
	flex-direction:column;
}
#noticeInfo dt .customerInfo h2 {
	font-family:"Freesentation";
	font-size:2rem;
	color:#000;
	font-weight:800;
}
#noticeInfo dt .customerInfo p {
	font-size:1rem;
	color:#212121;
	font-weight:400;
	margin-top:1rem;
}
#noticeInfo dt .customerInfo a.faq {
	font-size:1rem;
	color:#fff;
	font-weight:500;
	margin-top:3rem;
	padding:0.5rem 1rem;
	background-color:rgba(150,130,110,0.8);
	border-radius:5px;
	text-align:center;
	transition:all 0.25s ease-in-out;
	display:block;
}
#noticeInfo dt .customerInfo a.faq:hover { background-color:rgba(150,130,110,1); }
#noticeInfo article {
	width:320px;
	margin:0;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
#noticeInfo .account {
	margin-bottom:1rem;
	padding:2rem;
	background-color:#fff;
	border-bottom:1px solid #eaeaea;
}
#noticeInfo .account span {
	font-size:0.96rem;
	color:#7C7366;
	font-weight:600;
	margin-top:2rem;
	padding-left:120px;
	background-image:url("../img/kb_bank.svg");
	background-size:auto 18px;
	background-position:0 50%;
	background-repeat:no-repeat;
	display:block;
}
#noticeInfo .account p {
	font-family:"Freesentation";
	font-size:1.6rem;
	color:#000;
	font-weight:800;
	margin-top:0.5rem;
}
#noticeInfo .sns {
	margin-top:auto;
	padding:2rem 1.5rem;
	/*background-color:#fff;
	border-bottom:1px solid #eaeaea;*/
	display:flex;
	justify-content:center;
}
#noticeInfo .sns a {
	width:50px;
	height:50px;
	margin:0 0.5rem;
	background-size:auto 48px;
	background-position:50% 50%;
	background-repeat:no-repeat;
}
#noticeInfo .sns a:nth-of-type(1) { background-image:url("../img/sns_kakao.png"); }
#noticeInfo .sns a:nth-of-type(2) { background-image:url("../img/sns_blog.png"); }
#noticeInfo .sns a:nth-of-type(3) { background-image:url("../img/sns_instagram.png"); }
#noticeInfo .sns a:nth-of-type(4) { background-image:url("../img/sns_youtube.png"); }