/* 웹사이트의 진짜 본문 영역(#page #content #main div.pen_content_wrapper)에 해당하는 스타일 요소들 모음 */
/*********************/

/* 링크 밑줄 없애기: 문제는 그냥 a 태그 지정한 건 다른 css에 막혀서 작동이 안되고 있다. 필요 시 아래 클래스 추가하기 */
#page #content #main div.pen_content_wrapper a {
	text-decoration: none;
	color: black;
}
#page #content #main div.pen_content_wrapper a:hover,
#page #content #main div.pen_content_wrapper a:active {
	color: #005ce4;
}

/* #page #content #main div.pen_content_wrapper a { text-decoration: none; }
#page #content #main div.pen_content_wrapper .konz_cls_a_TextDecorationNone { text-decoration: none; } */

/* 글씨크기 설정: 원래는 기본값인 1.0em으로 설정되어 있지만, 폰트를 poor story로 변경하고 나서 글씨가 너무 작아져서 한 치수 키움 */
/* 일반적인 본문 글씨크기 설정 */
#page #content #main div.pen_content_wrapper h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Sans KR', Roboto, sans-serif;
}

#page #content #main div.pen_content_wrapper p, li {
	font-family: 'Poor Story', Roboto, sans-serif;
}

/* em코드: 원래는 이탤릭으로 표시되지만, i 코드와는 다르게 강조의 이미가 있으므로, 강조하는 의미가 부여되는 em 코드를 밑줄 긋는 코드로 사용 */
#page #content #main div.pen_content_wrapper em {
	font-style: normal;
	text-decoration: underline;
}

/* 폰트 크기, 줄간격, 여백설정 */
#page #content #main div.pen_content_wrapper hr {
	padding-top: 25px;
	padding-bottom: 25px;
	margin-top: 21px;
	margin-bottom: 21px;
}

#page #content #main div.pen_content_wrapper h2 {
	margin-top: 35px;
}
#page #content #main div.pen_content_wrapper h3 {
	margin-top: 20px;
}
#page #content #main div.pen_content_wrapper h4 {
	margin-top: 10px;
}

#page #content #main div.pen_content_wrapper p {
	font-size: 1.15rem;
	line-height: 180%;
	/* margin-top: 1.1rem; */
	/* margin: 10px auto; */
	/* padding-top: 15px; */
}


/* 이미지의 위 아래 기본 마진 지정 */
/* #page #content #main div.pen_content_wrapper figure.wp-block-image {
	margin-top: 	20px;
	margin-bottom:	20px;
} */


/* PDF EMBEDDER 의 위 아래 기본 마진 지정  */
#page #content #main div.pen_content_wrapper div.pdfemb-viewer {
	margin-top: 	20px;
	margin-bottom:	20px;
}




/* 간격을 많이 띄워야 하는 경우: 내용 다음에 완전히 다른 내용이 나오는 경우 */
/* 인접형제선택자: p바로 뒤에 p가 나온 경우 (그 뒤의 p를 선택) */
#page #content #main div.pen_content_wrapper p+p {
	margin-top: 1.2rem;
}

#page #content #main div.pen_content_wrapper p+h2 {
	margin-top: 3.0rem;
}
#page #content #main div.pen_content_wrapper p+h3 {
	margin-top: 2.2rem;
}
#page #content #main div.pen_content_wrapper p+h4 {
	margin-top: 2.0rem;
}

#page #content #main div.pen_content_wrapper ul+h2, ol+h2 {
	margin-top: 3.0rem;
}
#page #content #main div.pen_content_wrapper ul+h3, ol+h3 {
	margin-top: 2.2rem;
}
#page #content #main div.pen_content_wrapper ul+h4, ol+h4 {
	margin-top: 2.0rem;
}


/* 간격을 적게 띄워야 하는 경우: 제목 다음 그에 대한 내용이 바로 이어지는 경우 */
/* 인접형제선택자: h2바로 뒤에 p가 나온 경우 */
#page #content #main div.pen_content_wrapper h2+p {
	margin-top: 0.5rem;
}
#page #content #main div.pen_content_wrapper h3+p {
	margin-top: 0.3rem;
}


/*********************/
/* [본문, 리스트, 인용글] 바로 뒤에 [업로드한 이미지]가 나올 경우, 그 사이의 여백을 조정한다  */
#page #content #main div.pen_content_wrapper p+figure.wp-block-image, ul+figure.wp-block-image, ol+figure.wp-block-image, blockquote.wp-block-quote+figure.wp-block-image {
	margin-top: 2.0rem;
}
/* [본문, 리스트, 인용글] 바로 뒤에 [업로드한 PDF Embedder]가 나올 경우, 그 사이의 여백을 조정한다  */
#page #content #main div.pen_content_wrapper p+div.pdfemb-viewer, ul+div.pdfemb-viewer, ol+div.pdfemb-viewer, blockquote.wp-block-quote+div.pdfemb-viewer {
	margin-top: 2.0rem;
}






/*********************/

#page #content #main div.pen_content_wrapper ul, ol {
	margin-top: 0rem;
	margin-bottom: 0rem;
	/* margin-left: 10px; */
	line-height: 160%;
	/* padding-top: 10px; */
}

/* 각 요소별 간격. 일종의 리스트의 줄간격 */
#page #content #main div.pen_content_wrapper ul > li, ol > li {
	margin-top: 0.3rem;
}


#page #content #main div.pen_content_wrapper ul {
	font-size: 1.15rem;
	line-height: 160%;
	list-style-type: none;
	/* list-style-position: outside; */
	margin-left: 1.0rem;
}
#page #content #main div.pen_content_wrapper ul > li::before {
	content: "✔️";
	font-size: 0.8rem;
	display: inline-block;
	margin-right: 0.4rem;
	margin-left: -1.4rem;
}
#page #content #main div.pen_content_wrapper ul > li > ul {
	margin-top: 3px;
	/* list-style-position: outside; */
	margin-left: 0rem;
}
#page #content #main div.pen_content_wrapper ul > li > ul > li::before {
	/* content: "📍"; */
	content: "-";
	font-size: 0.8rem;
	margin-left: -0.5rem;
}
#page #content #main div.pen_content_wrapper ul > li > ul > li > ul {
	margin-top: 3px;
	/* list-style-position: outside; */
}
#page #content #main div.pen_content_wrapper ul > li > ul > li > ul > li::before {
	content: "▪";
	font-size: 0.6rem;
}

#page #content #main div.pen_content_wrapper ul ol {
	margin-top: 0rem;
	margin-bottom: 0rem;
	line-height: 160%;
	list-style-type: none;
}

#page #content #main div.pen_content_wrapper ol ol {
	margin-top: 0rem;
	margin-bottom: 0rem;
	line-height: 160%;
}

#page #content #main div.pen_content_wrapper ol > li {
	font-size: 1.0rem;
	line-height: 180%;
	/* margin-left: 2rem; */
	/* list-style-type: decimal; */
	list-style-type: none;
	counter-increment: steps;
}
#page #content #main div.pen_content_wrapper ol > li::before {
	content: counter(steps);
	margin-right: 0.5rem;
	background: #ff6f00;
	color: white;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	line-height: 1.2em;
}
#page #content #main div.pen_content_wrapper ol > li > ol > li {
	list-style-type: inherit;
	counter-increment: initial;
	margin-left: 1.8rem;
}
#page #content #main div.pen_content_wrapper ol > li > ol > li::before {
	content: none;
}
#page #content #main div.pen_content_wrapper ol > li > ol > li > ul > li {
	margin-left: 1rem;
}
#page #content #main div.pen_content_wrapper ol > li > ul > li {
	margin-left: 1.5rem;
}
#page #content #main div.pen_content_wrapper ol > li > ul > li::before {
	content: "✔️";
	font-size: 0.8rem;
	display: inline-block;
	margin-right: 0.4rem;
	margin-left: -1.45rem;
}
/* #page #content #main div.pen_content_wrapper ul ol li::before {
	content: "Step " counter(steps) ")";
}
 */

/* ul li::before {
	content: "✅";
	display: inline-block;
	margin-right: 0.2rem;
}
ul ol li::before {
	content: "📌";
} */

/* 🩹 */



/*********************/
/* 리스트(ul, ol)이긴 한데 마커 표시를 하지 않아야 하는 경우(내용 자체가 이미 넘버링이 충분히 되어 있는 경우 등) */
#page #content #main .konz_cls_ulol_NoMarker > li::before {
	content: "　" !important;
}
#page #content #main .konz_cls_ulol_NoMarker > li > ul > li::before {
	content: " " !important;
}
#page #content #main .konz_cls_ulol_NoMarker > li > ol > li::before {
	content: " " !important;
}

/* table 태그 안에 td 태그 안에, 곧바로 텍스트가 나오는 것이 아니라, <p> 태그에 감싸진 텍스트가 출력되는 경우, 테이블보다는 p 태그의 영향을 받아 글씨가 너무 커지는 문제가 발생한다. 이러한 문제 해결을 위하여 그 안에 p 태그가 있는 경우 폰트크기를 감소시키도록 하였다. */
#page #content #main .konz_cls_table_ParagraphInsideTable td p {
	font-size: 0.7em;
}


/*********************/

/* h1: 글 자체의 제목 부분, h2:는 "입점품목입니다"와 같은 특수 강조 문구+상품명 표시, h3: 소제목, h4: 소제목 아래의 하위 제목 */
#page #content #main div.konz_cls_div_ContentHead_Title h1	{ font-size: 2.0rem; }

#page #content #main div.pen_content_wrapper h2				{ font-size: 1.65rem; margin-left: 2.7rem; }
#page #content #main div.pen_content_wrapper h2::before		{ font-size: 1.45rem; content: '💊'; font-weight: 100; margin-right: 0.7rem; margin-left: -2.7rem;}

#page #content #main div.pen_content_wrapper h3				{ font-size: 1.45rem; margin-left: 2.7rem; }
#page #content #main div.pen_content_wrapper h3::before		{ font-size: 1.2rem; content: '📌'; font-weight: 100; margin-right: 0.6rem; margin-left: -2.3rem; }

#page #content #main div.pen_content_wrapper h4				{ font-size: 1.35rem; margin-left: 2.9rem; }
#page #content #main div.pen_content_wrapper h4::before		{ font-size: 0.9rem; content: '🧪'; font-weight: 100; margin-right: 0.5rem; margin-left: -1.6rem; }

#page #content #main div.pen_content_wrapper h5				{ font-size: 1.2rem; margin-left: 3.2rem; }
#page #content #main div.pen_content_wrapper h5::before		{ font-size: 0.9rem; content: '📎'; font-weight: 100; margin-right: 0.5rem; margin-left: -1.1rem; }


/*********************/


/* 삽입한 이미지에 들어가는 캡션 영역 */
#page #content #main figcaption {
	font-size: 0.8rem;
	text-align: center;
	margin-top: 0px;
}


/*********************/

/* URL EMBED 영역이 왼쪽으로 치우쳐져있어서, 왼쪽에 약간 마진 줌 */
#page #content #main figure.wp-block-embed {
	margin-left: 1.5rem;
}


/*********************/
/* 검색 결과 페이지 - '더파머시 메디슨' 에서 검색하기  영역 */
/* #page #content #main .konz_cls_section_search {
	padding: 0 10%;
} */
#page #content #main .konz_cls_section_search h2				{ font-size: 1.65rem; margin-left: 2.7rem; }
#page #content #main .konz_cls_section_search h2::before		{ font-size: 1.45rem; content: '💊'; font-weight: 100; margin-right: 0.7rem; margin-left: -2.7rem;}
#page #content #main .konz_cls_section_search h2 a				{ color: white; text-decoration: none; }

#page #content #main .konz_cls_section_search form.search-form label {
	float: left;
	margin-bottom: 0;
	width: 65%;
}
#page #content #main .konz_cls_section_search form.search-form .search-field,
#page #content #main .konz_cls_section_search form.search-form .search-submit {
	display: block;
	font-size: 1em;
	font-weight: normal;
	height: 3rem;
	line-height: 1.5;
}
#page #content #main .konz_cls_section_search form.search-form .search-field {
	border-radius: 5px 0 0 5px !important;
	float: left;
	margin: 0 0 0.25rem;
	padding: 0.5rem 1rem;
	width: 100%;
	/* background: transparent !important; */
	border: 1px solid rgba(170,170,170,0.5) !important;
	color: #172033 !important;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25), 2px 2px 5px rgba(0,0,0,0.25) inset;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#page #content #main .konz_cls_section_search form.search-form .search-submit  {
	border-radius: 0 5px 5px 0 !important;
	float: right;
	margin: 0;
	padding: 0.5rem !important;
	text-align: center !important;
	text-decoration: none;
	min-width: auto !important;
	width: 35%;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.25);
}
/*********************/




/*********************/