@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600");
@import url("fontawesome-all.min.css");

/*
	Helios by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
	*/

	html, body, div, span, applet, object,
	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, abbr, acronym, address, big, cite,
	code, del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b,
	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody,
	tfoot, thead, tr, th, td, article, aside,
	canvas, details, embed, figure, figcaption,
	footer, header, hgroup, menu, nav, output, ruby,
	section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;}

		article, aside, details, figcaption, figure,
		footer, header, hgroup, menu, nav, section {
			display: block;}

			body {
				line-height: 1;
			}

			ol, ul {
				list-style: none;
			}

			blockquote, q {
				quotes: none;
			}

			blockquote:before, blockquote:after, q:before, q:after {
				content: '';
				content: none;
			}

			table {
				border-collapse: collapse;
				border-spacing: 0;
			}

			body {
				-webkit-text-size-adjust: none;
			}

			mark {
				background-color: transparent;
				color: inherit;
			}

			input::-moz-focus-inner {
				border: 0;
				padding: 0;
			}

			input, select, textarea {
				-moz-appearance: none;
				-webkit-appearance: none;
				-ms-appearance: none;
				appearance: none;
			}

			/* Basic */

			html {
				box-sizing: border-box;
			}

			*, *:before, *:after {
				box-sizing: inherit;
			}




/* index_test.html 페이지 슬라이드 배경 회색 적용 안되서 수정한 코드들  */

/* 추가 코드 중 꼭 들어가야 할 코드  */

			body {
  background: #fff;   /* 모든 페이지는 기본 흰색 */
  color: #5b5b5b;
  font-size: 15pt;
  line-height: 1.85em;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
}

body.homepage {
  background: #f4f4f4;   /* index.html (홈)만 회색 */
}

/* 여기까진 추가 코드 중 꼭 들어가야 할 코드  */



/* 인덱스(index.html) 전용 */
body.homepage #banner {
  background: #fff; /* 배너는 흰색 */
}


/* 캐러셀 전체 영역 = 연회색-나중에 지울것 필요없음 */
body.homepage .carousel {
  background:#f4f4f4;   /* 원하는 회색 */
}

/* 슬라이드 카드(article)는 흰색 유지- 나중에 지울것 필요없음*/
body.homepage .carousel article {
  background:#fff;             /* 카드 자체는 흰색 */
  
}

body.homepage #page-wrapper .carousel {
  background: #f0f4f4 !important;  /* 인덱스에서만 회색 */
}

body.homepage #page-wrapper .carousel::before,
body.homepage #page-wrapper .carousel::after {
  background: #f0f4f4 !important;  /* 가상요소도 회색 */
}


/* 여기까지 index_test.html 페이지 슬라이드 배경 회색 적용 안되서 수정한 코드들  */




			body.is-preload *, body.is-preload *:before, body.is-preload *:after {
				-moz-animation: none !important;
				-webkit-animation: none !important;
				-ms-animation: none !important;
				animation: none !important;
				-moz-transition: none !important;
				-webkit-transition: none !important;
				-ms-transition: none !important;
				transition: none !important;
			}

			input, textarea, select {
				font-size: 15pt;
				line-height: 1.85em;
				font-family: 'Source Sans Pro', sans-serif;
				font-weight: 300;
			}

			h1, h2, h3, h4, h5, h6 {
				font-weight: 400;
				color: #483949;
				line-height: 1.25em;
			}

			h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
				color: inherit;
				text-decoration: none;
				border-bottom-color: transparent;
			}

			h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
				font-weight: 600;
			}

			h2 {
				font-size: 2.85em;
			}

			h3 {
				font-size: 1.25em;
			}

			h4 {
				font-size: 1em;
				margin: 0 0 0.25em 0;
			}
.highlight {
  color: #b22c61;
  font-weight: bold; /* 굵게 표시 */
}

			strong, b {
				font-weight: 400;
				color: #483949;
			}

			em, i {
				font-style: italic;
			}

			a {
				color: inherit;
				border-bottom: solid 1px rgba(128, 128, 128, 0.15);
				text-decoration: none;
				-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
				-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
				-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
				transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
			}

			a:hover {
				color: #ef8376;
				border-bottom-color: transparent;
			}

			sub {
				position: relative;
				top: 0.5em;
				font-size: 0.8em;
			}

			sup {
				position: relative;
				top: -0.5em;
				font-size: 0.8em;
			}

			blockquote {
				border-left: solid 0.5em #ddd;
				padding: 1em 0 1em 2em;
				font-style: italic;
			}

			p, ul, ol, dl, table {
				margin-bottom: 1em;
			}

			p {
				text-align: justify;
			}

			br.clear {
				clear: both;
			}

			hr {
				position: relative;
				display: block;
				border: 0;
				top: 4.5em;
				margin-bottom: 9em;
				height: 6px;
				border-top: none;
				border-bottom: none;
			}

			hr:before, hr:after {
				content: '';
				position: absolute;
				top: -8px;
				display: block;
				width: 1px;
				height: 21px;
				background: rgba(255, 255, 255, 0.6);
			}

			hr:before {
				left: -1px;
			}

			hr:after {
				right: -1px;
			}

			.timestamp {
				color: rgba(128, 128, 128, 0.75);
				font-size: 0.8em;
			}

			/* Container */

			.container {
				margin: 0 auto;
				max-width: 100%;
				width: 1400px;
			}

			@media screen and (max-width: 1680px) {

				.container {
					width: 1200px;
				}

			}

			@media screen and (max-width: 1280px) {

				.container {
					width: 100%;
				}

			}

			@media screen and (max-width: 960px) {

				.container {
					width: 100%;
				}

			}

			@media screen and (max-width: 840px) {

				.container {
					width: 100%;
				}

			}

			@media screen and (max-width: 736px) {

				.container {
					width: 100%;
				}

			}

			/* Row */

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

			.row > * {
				box-sizing: border-box;
			}

			.row.gtr-uniform > * > :last-child {
				margin-bottom: 0;
			}

			.row.aln-left {
				justify-content: flex-start;
			}

			.row.aln-center {
				justify-content: center;
			}

			.row.aln-right {
				justify-content: flex-end;
			}

			.row.aln-top {
				align-items: flex-start;
			}

			.row.aln-middle {
				align-items: center;
			}

			.row.aln-bottom {
				align-items: flex-end;
			}

			.row > .imp {
				order: -1;
			}

			.row > .col-1 {
				width: 8.33333%;
			}

			.row > .off-1 {
				margin-left: 8.33333%;
			}

			.row > .col-2 {
				width: 16.66667%;
			}

			.row > .off-2 {
				margin-left: 16.66667%;
			}

			.row > .col-3 {
				width: 25%;
			}

			.row > .off-3 {
				margin-left: 25%;
			}

			.row > .col-4 {
				width: 33.33333%;
			}

			.row > .off-4 {
				margin-left: 33.33333%;
			}

			.row > .col-5 {
				width: 41.66667%;
			}

			.row > .off-5 {
				margin-left: 41.66667%;
			}

			.row > .col-6 {
				width: 50%;
			}

			.row > .off-6 {
				margin-left: 50%;
			}

			.row > .col-7 {
				width: 58.33333%;
			}

			.row > .off-7 {
				margin-left: 58.33333%;
			}

			.row > .col-8 {
				width: 66.66667%;
			}

			.row > .off-8 {
				margin-left: 66.66667%;
			}

			.row > .col-9 {
				width: 75%;
			}

			.row > .off-9 {
				margin-left: 75%;
			}

			.row > .col-10 {
				width: 83.33333%;
			}

			.row > .off-10 {
				margin-left: 83.33333%;
			}

			.row > .col-11 {
				width: 91.66667%;
			}

			.row > .off-11 {
				margin-left: 91.66667%;
			}

			.row > .col-12 {
				width: 100%;
			}

			.row > .off-12 {
				margin-left: 100%;
			}

			.row.gtr-0 {
				margin-top: 0px;
				margin-left: 0px;
			}

			.row.gtr-0 > * {
				padding: 0px 0 0 0px;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0px;
			}

			.row.gtr-0.gtr-uniform > * {
				padding-top: 0px;
			}

			.row.gtr-25 {
				margin-top: -10px;
				margin-left: -10px;
			}

			.row.gtr-25 > * {
				padding: 10px 0 0 10px;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -10px;
			}

			.row.gtr-25.gtr-uniform > * {
				padding-top: 10px;
			}

			.row.gtr-50 {
				margin-top: -20px;
				margin-left: -20px;
			}

			.row.gtr-50 > * {
				padding: 20px 0 0 20px;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -20px;
			}

			.row.gtr-50.gtr-uniform > * {
				padding-top: 20px;
			}

			.row {
				margin-top: -40px;
				margin-left: -40px;
			}

			.row > * {
				padding: 40px 0 0 40px;
			}

			.row.gtr-uniform {
				margin-top: -40px;
			}

			.row.gtr-uniform > * {
				padding-top: 40px;
			}

			.row.gtr-150 {
				margin-top: -60px;
				margin-left: -60px;
			}

			.row.gtr-150 > * {
				padding: 60px 0 0 60px;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -60px;
			}

			.row.gtr-150.gtr-uniform > * {
				padding-top: 60px;
			}

			.row.gtr-200 {
				margin-top: -80px;
				margin-left: -80px;
			}

			.row.gtr-200 > * {
				padding: 80px 0 0 80px;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -80px;
			}

			.row.gtr-200.gtr-uniform > * {
				padding-top: 80px;
			}

			@media screen and (max-width: 1680px) {

				.row {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					align-items: stretch;
				}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-wide {
					order: -1;
				}

				.row > .col-1-wide {
					width: 8.33333%;
				}

				.row > .off-1-wide {
					margin-left: 8.33333%;
				}

				.row > .col-2-wide {
					width: 16.66667%;
				}

				.row > .off-2-wide {
					margin-left: 16.66667%;
				}

				.row > .col-3-wide {
					width: 25%;
				}

				.row > .off-3-wide {
					margin-left: 25%;
				}

				.row > .col-4-wide {
					width: 33.33333%;
				}

				.row > .off-4-wide {
					margin-left: 33.33333%;
				}

				.row > .col-5-wide {
					width: 41.66667%;
				}

				.row > .off-5-wide {
					margin-left: 41.66667%;
				}

				.row > .col-6-wide {
					width: 50%;
				}

				.row > .off-6-wide {
					margin-left: 50%;
				}

				.row > .col-7-wide {
					width: 58.33333%;
				}

				.row > .off-7-wide {
					margin-left: 58.33333%;
				}

				.row > .col-8-wide {
					width: 66.66667%;
				}

				.row > .off-8-wide {
					margin-left: 66.66667%;
				}

				.row > .col-9-wide {
					width: 75%;
				}

				.row > .off-9-wide {
					margin-left: 75%;
				}

				.row > .col-10-wide {
					width: 83.33333%;
				}

				.row > .off-10-wide {
					margin-left: 83.33333%;
				}

				.row > .col-11-wide {
					width: 91.66667%;
				}

				.row > .off-11-wide {
					margin-left: 91.66667%;
				}

				.row > .col-12-wide {
					width: 100%;
				}

				.row > .off-12-wide {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

				.row.gtr-0 > * {
					padding: 0px 0 0 0px;
				}

				.row.gtr-0.gtr-uniform {
					margin-top: 0px;
				}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

				.row.gtr-25 {
					margin-top: -10px;
					margin-left: -10px;
				}

				.row.gtr-25 > * {
					padding: 10px 0 0 10px;
				}

				.row.gtr-25.gtr-uniform {
					margin-top: -10px;
				}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 10px;
				}

				.row.gtr-50 {
					margin-top: -20px;
					margin-left: -20px;
				}

				.row.gtr-50 > * {
					padding: 20px 0 0 20px;
				}

				.row.gtr-50.gtr-uniform {
					margin-top: -20px;
				}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 20px;
				}

				.row {
					margin-top: -40px;
					margin-left: -40px;
				}

				.row > * {
					padding: 40px 0 0 40px;
				}

				.row.gtr-uniform {
					margin-top: -40px;
				}

				.row.gtr-uniform > * {
					padding-top: 40px;
				}

				.row.gtr-150 {
					margin-top: -60px;
					margin-left: -60px;
				}

				.row.gtr-150 > * {
					padding: 60px 0 0 60px;
				}

				.row.gtr-150.gtr-uniform {
					margin-top: -60px;
				}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 60px;
				}

				.row.gtr-200 {
					margin-top: -80px;
					margin-left: -80px;
				}

				.row.gtr-200 > * {
					padding: 80px 0 0 80px;
				}

				.row.gtr-200.gtr-uniform {
					margin-top: -80px;
				}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 80px;
				}

			}

			@media screen and (max-width: 1280px) {

				.row {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					align-items: stretch;
				}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-normal {
					order: -1;
				}

				.row > .col-1-normal {
					width: 8.33333%;
				}

				.row > .off-1-normal {
					margin-left: 8.33333%;
				}

				.row > .col-2-normal {
					width: 16.66667%;
				}

				.row > .off-2-normal {
					margin-left: 16.66667%;
				}

				.row > .col-3-normal {
					width: 25%;
				}

				.row > .off-3-normal {
					margin-left: 25%;
				}

				.row > .col-4-normal {
					width: 33.33333%;
				}

				.row > .off-4-normal {
					margin-left: 33.33333%;
				}

				.row > .col-5-normal {
					width: 41.66667%;
				}

				.row > .off-5-normal {
					margin-left: 41.66667%;
				}

				.row > .col-6-normal {
					width: 50%;
				}

				.row > .off-6-normal {
					margin-left: 50%;
				}

				.row > .col-7-normal {
					width: 58.33333%;
				}

				.row > .off-7-normal {
					margin-left: 58.33333%;
				}

				.row > .col-8-normal {
					width: 66.66667%;
				}

				.row > .off-8-normal {
					margin-left: 66.66667%;
				}

				.row > .col-9-normal {
					width: 75%;
				}

				.row > .off-9-normal {
					margin-left: 75%;
				}

				.row > .col-10-normal {
					width: 83.33333%;
				}

				.row > .off-10-normal {
					margin-left: 83.33333%;
				}

				.row > .col-11-normal {
					width: 91.66667%;
				}

				.row > .off-11-normal {
					margin-left: 91.66667%;
				}

				.row > .col-12-normal {
					width: 100%;
				}

				.row > .off-12-normal {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

				.row.gtr-0 > * {
					padding: 0px 0 0 0px;
				}

				.row.gtr-0.gtr-uniform {
					margin-top: 0px;
				}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

				.row.gtr-25 {
					margin-top: -9px;
					margin-left: -9px;
				}

				.row.gtr-25 > * {
					padding: 9px 0 0 9px;
				}

				.row.gtr-25.gtr-uniform {
					margin-top: -9px;
				}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 9px;
				}

				.row.gtr-50 {
					margin-top: -18px;
					margin-left: -18px;
				}

				.row.gtr-50 > * {
					padding: 18px 0 0 18px;
				}

				.row.gtr-50.gtr-uniform {
					margin-top: -18px;
				}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 18px;
				}

				.row {
					margin-top: -36px;
					margin-left: -36px;
				}

				.row > * {
					padding: 36px 0 0 36px;
				}

				.row.gtr-uniform {
					margin-top: -36px;
				}

				.row.gtr-uniform > * {
					padding-top: 36px;
				}

				.row.gtr-150 {
					margin-top: -54px;
					margin-left: -54px;
				}

				.row.gtr-150 > * {
					padding: 54px 0 0 54px;
				}

				.row.gtr-150.gtr-uniform {
					margin-top: -54px;
				}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 54px;
				}

				.row.gtr-200 {
					margin-top: -72px;
					margin-left: -72px;
				}

				.row.gtr-200 > * {
					padding: 72px 0 0 72px;
				}

				.row.gtr-200.gtr-uniform {
					margin-top: -72px;
				}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 72px;
				}

			}

			@media screen and (max-width: 960px) {

				.row {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					align-items: stretch;
				}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-narrow {
					order: -1;
				}

				.row > .col-1-narrow {
					width: 8.33333%;
				}

				.row > .off-1-narrow {
					margin-left: 8.33333%;
				}

				.row > .col-2-narrow {
					width: 16.66667%;
				}

				.row > .off-2-narrow {
					margin-left: 16.66667%;
				}

				.row > .col-3-narrow {
					width: 25%;
				}

				.row > .off-3-narrow {
					margin-left: 25%;
				}

				.row > .col-4-narrow {
					width: 33.33333%;
				}

				.row > .off-4-narrow {
					margin-left: 33.33333%;
				}

				.row > .col-5-narrow {
					width: 41.66667%;
				}

				.row > .off-5-narrow {
					margin-left: 41.66667%;
				}

				.row > .col-6-narrow {
					width: 50%;
				}

				.row > .off-6-narrow {
					margin-left: 50%;
				}

				.row > .col-7-narrow {
					width: 58.33333%;
				}

				.row > .off-7-narrow {
					margin-left: 58.33333%;
				}

				.row > .col-8-narrow {
					width: 66.66667%;
				}

				.row > .off-8-narrow {
					margin-left: 66.66667%;
				}

				.row > .col-9-narrow {
					width: 75%;
				}

				.row > .off-9-narrow {
					margin-left: 75%;
				}

				.row > .col-10-narrow {
					width: 83.33333%;
				}

				.row > .off-10-narrow {
					margin-left: 83.33333%;
				}

				.row > .col-11-narrow {
					width: 91.66667%;
				}

				.row > .off-11-narrow {
					margin-left: 91.66667%;
				}

				.row > .col-12-narrow {
					width: 100%;
				}

				.row > .off-12-narrow {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

				.row.gtr-0 > * {
					padding: 0px 0 0 0px;
				}

				.row.gtr-0.gtr-uniform {
					margin-top: 0px;
				}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

				.row.gtr-25 {
					margin-top: -8px;
					margin-left: -8px;
				}

				.row.gtr-25 > * {
					padding: 8px 0 0 8px;
				}

				.row.gtr-25.gtr-uniform {
					margin-top: -8px;
				}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 8px;
				}

				.row.gtr-50 {
					margin-top: -16px;
					margin-left: -16px;
				}

				.row.gtr-50 > * {
					padding: 16px 0 0 16px;
				}

				.row.gtr-50.gtr-uniform {
					margin-top: -16px;
				}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 16px;
				}

				.row {
					margin-top: -32px;
					margin-left: -32px;
				}

				.row > * {
					padding: 32px 0 0 32px;
				}

				.row.gtr-uniform {
					margin-top: -32px;
				}

				.row.gtr-uniform > * {
					padding-top: 32px;
				}

				.row.gtr-150 {
					margin-top: -48px;
					margin-left: -48px;
				}

				.row.gtr-150 > * {
					padding: 48px 0 0 48px;
				}

				.row.gtr-150.gtr-uniform {
					margin-top: -48px;
				}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 48px;
				}

				.row.gtr-200 {
					margin-top: -64px;
					margin-left: -64px;
				}

				.row.gtr-200 > * {
					padding: 64px 0 0 64px;
				}

				.row.gtr-200.gtr-uniform {
					margin-top: -64px;
				}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 64px;
				}

			}

			@media screen and (max-width: 840px) {

				.row {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					align-items: stretch;
				}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-narrower {
					order: -1;
				}

				.row > .col-1-narrower {
					width: 8.33333%;
				}

				.row > .off-1-narrower {
					margin-left: 8.33333%;
				}

				.row > .col-2-narrower {
					width: 16.66667%;
				}

				.row > .off-2-narrower {
					margin-left: 16.66667%;
				}

				.row > .col-3-narrower {
					width: 25%;
				}

				.row > .off-3-narrower {
					margin-left: 25%;
				}

				.row > .col-4-narrower {
					width: 33.33333%;
				}

				.row > .off-4-narrower {
					margin-left: 33.33333%;
				}

				.row > .col-5-narrower {
					width: 41.66667%;
				}

				.row > .off-5-narrower {
					margin-left: 41.66667%;
				}

				.row > .col-6-narrower {
					width: 50%;
				}

				.row > .off-6-narrower {
					margin-left: 50%;
				}

				.row > .col-7-narrower {
					width: 58.33333%;
				}

				.row > .off-7-narrower {
					margin-left: 58.33333%;
				}

				.row > .col-8-narrower {
					width: 66.66667%;
				}

				.row > .off-8-narrower {
					margin-left: 66.66667%;
				}

				.row > .col-9-narrower {
					width: 75%;
				}

				.row > .off-9-narrower {
					margin-left: 75%;
				}

				.row > .col-10-narrower {
					width: 83.33333%;
				}

				.row > .off-10-narrower {
					margin-left: 83.33333%;
				}

				.row > .col-11-narrower {
					width: 91.66667%;
				}

				.row > .off-11-narrower {
					margin-left: 91.66667%;
				}

				.row > .col-12-narrower {
					width: 100%;
				}

				.row > .off-12-narrower {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

				.row.gtr-0 > * {
					padding: 0px 0 0 0px;
				}

				.row.gtr-0.gtr-uniform {
					margin-top: 0px;
				}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

				.row.gtr-25 {
					margin-top: -8px;
					margin-left: -8px;
				}

				.row.gtr-25 > * {
					padding: 8px 0 0 8px;
				}

				.row.gtr-25.gtr-uniform {
					margin-top: -8px;
				}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 8px;
				}

				.row.gtr-50 {
					margin-top: -16px;
					margin-left: -16px;
				}

				.row.gtr-50 > * {
					padding: 16px 0 0 16px;
				}

				.row.gtr-50.gtr-uniform {
					margin-top: -16px;
				}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 16px;
				}

				.row {
					margin-top: -32px;
					margin-left: -32px;
				}

				.row > * {
					padding: 32px 0 0 32px;
				}

				.row.gtr-uniform {
					margin-top: -32px;
				}

				.row.gtr-uniform > * {
					padding-top: 32px;
				}

				.row.gtr-150 {
					margin-top: -48px;
					margin-left: -48px;
				}

				.row.gtr-150 > * {
					padding: 48px 0 0 48px;
				}

				.row.gtr-150.gtr-uniform {
					margin-top: -48px;
				}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 48px;
				}

				.row.gtr-200 {
					margin-top: -64px;
					margin-left: -64px;
				}

				.row.gtr-200 > * {
					padding: 64px 0 0 64px;
				}

				.row.gtr-200.gtr-uniform {
					margin-top: -64px;
				}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 64px;
				}

			}

			@media screen and (max-width: 736px) {

				.row {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					align-items: stretch;
				}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-mobile {
					order: -1;
				}

				.row > .col-1-mobile {
					width: 8.33333%;
				}

				.row > .off-1-mobile {
					margin-left: 8.33333%;
				}

				.row > .col-2-mobile {
					width: 16.66667%;
				}

				.row > .off-2-mobile {
					margin-left: 16.66667%;
				}

				.row > .col-3-mobile {
					width: 25%;
				}

				.row > .off-3-mobile {
					margin-left: 25%;
				}

				.row > .col-4-mobile {
					width: 33.33333%;
				}

				.row > .off-4-mobile {
					margin-left: 33.33333%;
				}

				.row > .col-5-mobile {
					width: 41.66667%;
				}

				.row > .off-5-mobile {
					margin-left: 41.66667%;
				}

				.row > .col-6-mobile {
					width: 50%;
				}

				.row > .off-6-mobile {
					margin-left: 50%;
				}

				.row > .col-7-mobile {
					width: 58.33333%;
				}

				.row > .off-7-mobile {
					margin-left: 58.33333%;
				}

				.row > .col-8-mobile {
					width: 66.66667%;
				}

				.row > .off-8-mobile {
					margin-left: 66.66667%;
				}

				.row > .col-9-mobile {
					width: 75%;
				}

				.row > .off-9-mobile {
					margin-left: 75%;
				}

				.row > .col-10-mobile {
					width: 83.33333%;
				}

				.row > .off-10-mobile {
					margin-left: 83.33333%;
				}

				.row > .col-11-mobile {
					width: 91.66667%;
				}

				.row > .off-11-mobile {
					margin-left: 91.66667%;
				}

				.row > .col-12-mobile {
					width: 100%;
				}

				.row > .off-12-mobile {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

				.row.gtr-0 > * {
					padding: 0px 0 0 0px;
				}

				.row.gtr-0.gtr-uniform {
					margin-top: 0px;
				}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

				.row.gtr-25 {
					margin-top: -5px;
					margin-left: -5px;
				}

				.row.gtr-25 > * {
					padding: 5px 0 0 5px;
				}

				.row.gtr-25.gtr-uniform {
					margin-top: -5px;
				}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 5px;
				}

				.row.gtr-50 {
					margin-top: -10px;
					margin-left: -10px;
				}

				.row.gtr-50 > * {
					padding: 10px 0 0 10px;
				}

				.row.gtr-50.gtr-uniform {
					margin-top: -10px;
				}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 10px;
				}

				.row {
					margin-top: -20px;
					margin-left: -20px;
				}

				.row > * {
					padding: 20px 0 0 20px;
				}

				.row.gtr-uniform {
					margin-top: -20px;
				}

				.row.gtr-uniform > * {
					padding-top: 20px;
				}

				.row.gtr-150 {
					margin-top: -30px;
					margin-left: -30px;
				}

				.row.gtr-150 > * {
					padding: 30px 0 0 30px;
				}

				.row.gtr-150.gtr-uniform {
					margin-top: -30px;
				}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 30px;
				}

				.row.gtr-200 {
					margin-top: -40px;
					margin-left: -40px;
				}

				.row.gtr-200 > * {
					padding: 40px 0 0 40px;
				}

				.row.gtr-200.gtr-uniform {
					margin-top: -40px;
				}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 40px;
				}

			}

			/* Sections/Article */

			section, article {
				margin-bottom: 3em;
			}

			section > :last-child, section:last-child, article > :last-child, article:last-child {
				margin-bottom: 0;
			}

			section.special > header, section.special > footer, article.special > header, article.special > footer {
				text-align: center;
			}

			.row > section, .row > article {
				margin-bottom: 0;
			}

			header {
				margin: 0 0 1em 0;
			}

			header > p {
				display: block;
				font-size: 1.5em;
				margin: 1em 0 2em 0;
				line-height: 1.5em;
				text-align: inherit;
			}

			footer {
				margin: 2.5em 0 0 0;
			}

			/* Image */

			.image {
				position: relative;
				display: inline-block;
				border: 0;
				outline: 0;
			}

			.image img {
				display: block;
				width: 100%;
			}

			.image.fit {
				display: block;
				width: 100%;
			}

			.image.featured {
				display: block;
				width: 100%;
				margin: 0 0 1em 0;
			}


/* 쁘띠 보톡스 부분 이미지 클래스 */
			.image.featured.custom-img img {
  max-width: 650px; /* PC에서 최대 너비 제한 */
  width: 100%;      /* 모바일에서는 화면 폭에 맞게 줄어듦 */
  height: auto;
  margin: 0 auto;   /* 가운데 정렬 */
}
/* 모바일: 화면 폭의 60% 크기로 */
@media screen and (max-width: 768px) {
  .image.featured.custom-img img {
    width: 50%;
    max-width: none;  /* PC용 제한 해제 */
    margin: 0 auto;   /* 가운데 정렬 */
  }
}


			.image.hires img {
				max-width: 100%;       /* intro 하단 인테리어 사진 큰 것을 작게, 선명하게 */
				height: auto;
				display: block;
			}

			.image.left {
				float: left;
				margin: 0 2em 2em 0;
			}

			.image.centered {
				display: block;
				margin: 0 0 2em 0;
			}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}
/* images 추가코드 텍스트와 이미지 왼쪽 선 맞추기 */
.treatment-gallery{
  display:flex;
  flex-wrap:wrap;
  gap:16px;                 /* 사이트 기본 여백 값 맞춰 조정 */
  justify-content:flex-start; /* 왼쪽 정렬 */
  align-items:flex-start;     /* 텍스트 상단 라인과 맞춤 */
  margin:0;                  /* 외곽 여백 제거로 라인 맞춤 */
}

.treatment-gallery img{
  display:block;            /* 이미지 아래 여백 제거 */
  width:calc((100% - 32px)/3); /* 3열: gap 16px * 2 고려 */
  height:auto;
}
/* images 와 아래 텍스트 사이 공간만들기*/ 

.treatment-gallery {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:flex-start;
  align-items:flex-start;
  margin:16px 0 30px; /* 위 16px, 아래 24px 여백 고정 */
}
.treatment-gallery + section {
  margin-top:45px; /* 원하는 값 */
}

/* 갤러리 안에 이미지가 1장일 때는 100% */
.treatment-gallery img:only-child{
  width:100%;
}
/* 2장일 경우 2열 */
.treatment-gallery img:nth-last-child(2):first-child,
.treatment-gallery img:nth-last-child(2):first-child ~ img {
  width:calc((100% - 16px)/2); /* gap이 16px일 때 */
}

/* 갤러리 자신이 아래 간격을 갖도록: 마진겹침 회피 */
article.special > .treatment-gallery{
  margin:0 !important;
  padding-bottom:45px !important;
}

/* 갤러리 다음 섹션은 상단 여백 0으로 통일 */
article.special > .treatment-gallery + section{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* 흉터모공페이지 후사진 가로로 정렬 */
.photo-row {
    display: flex;
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
}

.photo-item {
    text-align: left;
    flex: 1; /* 크기 균등 분배 */
}

.photo-item img {
	display: block; /* 인라인 간격 제거 */
    max-width: 100%;
    height: auto;
}




			/* List */

			ul {
				list-style: disc;
				padding-left: 1em;
			}

			ul li {
				padding-left: 0.5em;
			}

			ol {
				list-style: decimal;
				padding-left: 1.25em;
			}

			ol li {
				padding-left: 0.25em;
			}

			/* Actions */

			ul.actions {
				margin: 3em 0 0 0;
				list-style: none;
				padding-left: 0;
			}

			form ul.actions {
				margin-top: 0;
			}

			ul.actions li {
				display: inline-block;
				margin: 0 0.75em 0 0.75em;
				padding-left: 0;
			}

			ul.actions li:first-child {
				margin-left: 0;
			}

			ul.actions li:last-child {
				margin-right: 0;
			}

			/* Divided */

			ul.divided {
				list-style: none;
				padding-left: 0;
			}

			ul.divided li {
				border-top: solid 1px rgba(128, 128, 128, 0.2);
				padding-top: 1.5em;
				margin-top: 1.5em;
				padding-left: 0;
			}

			ul.divided li:first-child {
				border-top: 0;
				padding-top: 0;
				margin-top: 0;
			}

			/* Menu */

			ul.menu {
				height: 1em;
				line-height: 1em;
				list-style: none;
				padding-left: 0;
			}

			ul.menu li {
				display: inline-block;
				border-left: solid 1px rgba(255, 255, 255, 0.6);
				padding-left: 1.25em;
				margin-left: 1.25em;
			}

			ul.menu li:first-child {
				border-left: 0;
				padding-left: 0;
				margin-left: 0;
			}

			/* Icons */

			ul.icons {
				position: relative;
				background: rgba(128, 128, 128, 0.05);
				border-radius: 4em;
				display: inline-block;
				padding: 0.35em 0.75em 0.35em 0.75em;
				font-size: 1.25em;
				cursor: default;
				list-style: none;
			}

			ul.icons li {
				display: inline-block;
				padding-left: 0;
			}

			ul.icons li a {
				display: inline-block;
				background: none;
				width: 2.5em;
				height: 2.5em;
				line-height: 2.5em;
				text-align: center;
				border-radius: 100%;
				border: 0;
				color: inherit;
			}

			ul.icons li a:hover {
				color: #ef8376;
			}

			/* Form */

			form label {
				display: block;
				font-weight: 400;
				color: #483949;
				margin: 0 0 1em 0;
			}

			form input[type="text"],
			form input[type="email"],
			form input[type="password"],
			form select,
			form textarea {
				-webkit-appearance: none;
				display: block;
				border: 0;
				background: #fafafa;
				width: 100%;
				border-radius: 0.5em;
				border: solid 1px #E5E5E5;
				padding: 1em;
				-moz-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-webkit-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-ms-transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out;
			}

			form input[type="text"]:focus,
			form input[type="email"]:focus,
			form input[type="password"]:focus,
			form select:focus,
			form textarea:focus {
				background: #fff;
				border-color: #df7366;
			}

			form input[type="text"],
			form input[type="email"],
			form input[type="password"],
			form select {
				line-height: 1em;
			}

			form textarea {
				min-height: 9em;
			}

			form ::-webkit-input-placeholder {
				color: #555 !important;
			}

			form :-moz-placeholder {
				color: #555 !important;
			}

			form ::-moz-placeholder {
				color: #555 !important;
			}

			form :-ms-input-placeholder {
				color: #555 !important;
			}

			form ::-moz-focus-inner {
				border: 0;
			}

			/* Table */

			table {
				width: 100%;
			}

			table.default {
				width: 100%;
			}

			table.default tbody tr {
				border-top: solid 1px #e5e5e5;
			}

			table.default tbody tr:first-child {
				border-top: 0;
			}

			table.default tbody tr:nth-child(2n+1) {
				background: #fafafa;
			}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				text-align: left;
				font-weight: 400;
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default thead {
				border-bottom: solid 2px #e5e5e5;
			}

			table.default tfoot {
				border-top: solid 2px #e5e5e5;
			}

			/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				position: relative;
				display: inline-block;
				background: #df7366;
				color: #fff;
				text-align: center;
				border-radius: 0.5em;
				text-decoration: none;
				padding: 0.65em 3em 0.65em 3em;
				border: 0;
				cursor: pointer;
				outline: 0;
				font-weight: 300;
				-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
				-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
				-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
				transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
			}

			input[type="button"]:hover,
			input[type="submit"]:hover,
			input[type="reset"]:hover,
			button:hover,
			.button:hover {
				color: #fff;
				background: #ef8376;
			}

			input[type="button"].alt,
			input[type="submit"].alt,
			input[type="reset"].alt,
			button.alt,
			.button.alt {
				background: #b22c61;
			}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background: #3B353C;
			}

			/* Post */

			.post.stub {
				text-align: center;
			}

			.post.stub header {
				margin: 0;
			}

			/* Icons */

			.icon {
				text-decoration: none;
				text-decoration: none;
			}

			.icon:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 400;
			}

			.icon:before {
				line-height: inherit;
				font-size: 1.25em;
			}

			.icon > .label {
				display: none;
			}

			.icon.solid:before {
				font-weight: 900;
			}

			.icon.brands:before {
				font-family: 'Font Awesome 5 Brands';
			}

			.icon.circled {
				position: relative;
				display: inline-block;
				background: #b22c61;
				color: #fff;
				border-radius: 100%;
				width: 3em;
				height: 3em;
				line-height: 3em;
				text-align: center;
				font-size: 1.25em;
			}

			header .icon.circled {
				margin: 0 0 2em 0;
			}

			/* Wrapper */

			.wrapper {
				background: #fff;
				margin: 0 0 2em 0;
				padding: 6em 0 6em 0;
			}

			.wrapper.style2 {
				padding-top: 0;
			}

			/* Header */

			#header {
				position: relative;
				background-image: url("../../images/header.jpg");
				background-size: cover;
				background-position: center center;
				background-attachment: fixed;
				color: #fff;
				text-align: center;
				padding: 7.5em 0 2em 0;
				cursor: default;
				transition: background-image 1s ease-in-out; /* 부드러운 전환 */
			}


			#header:before {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 100%;
			}

			#header .inner {
				position: relative;
				z-index: 1;
				margin: 0;
				display: inline-block;
				vertical-align: middle;
			}

			#header header {
				display: inline-block;
			}

			#header header > p {
				font-size: 1.25em;
				margin: 0;
			}

			#header h1 {
				color: #fff;
				font-size: 3em;
				line-height: 1em;
			}

			#header h1 a {
				color: inherit;
			}

			#header .button {
				display: inline-block;
				border-radius: 100%;
				width: 4.5em;
				height: 4.5em;
				line-height: 4.5em;
				text-align: center;
				font-size: 1.25em;
				padding: 0;
			}

			#header hr {
				top: 1.5em;
				margin-bottom: 3em;
				border-bottom-color: rgba(192, 192, 192, 0.35);
				box-shadow: inset 0 1px 0 0 rgba(192, 192, 192, 0.35);
			}

			#header hr:before, #header hr:after {
				background: rgba(192, 192, 192, 0.35);
			}

			#header footer {
				margin: 1em 0 0 0;
			}

			body.homepage #header {
				height: 100vh;
				min-height: 40em;
			}

			body.homepage #header h1 {
				font-size: 4em;
			}

			body.homepage #header:after {
				content: '';
				background: #b22c61;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				-moz-transition: opacity 2.5s ease-in-out;
				-webkit-transition: opacity 2.5s ease-in-out;
				-ms-transition: opacity 2.5s ease-in-out;
				transition: opacity 2.5s ease-in-out;
				-moz-transition-delay: 0.5s;
				-webkit-transition-delay: 0.5s;
				-ms-transition-delay: 0.5s;
				transition-delay: 0.5s;
			}

			body.homepage.is-preload #header:after {
				opacity: 1;
			}

			/* Nav */

			#nav {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				text-align: center;
				padding: 1.5em 0 1.5em 0;
				z-index: 1;
				overflow: hidden;
				background-color: rgba(0, 0, 0, 0.5);  /* 반투명 검정 */
				backdrop-filter: blur(4px);           /* 유리 느낌 (선택) */
			}

			#nav > ul {
				line-height: 0px;
				position: relative;
				display: inline-block;
				margin: 0;
				height: 21px;
				border-left: none;
				border-right: none;
			}

			#nav > ul:before, #nav > ul:after {
				content: '';
				display: block;
				width: 300%;
				position: absolute;
				top: 50%;
				margin-top: -2px;
				height: 5px;
				border-top: none;
				border-bottom: none;
			}

			#nav > ul:before {
				left: 100%;
				margin-left: 1px;
			}

			#nav > ul:after {
				right: 100%;
				margin-right: 1px;
			}

			#nav > ul > li {
				display: inline-block;
				margin: -9px 0.5em 0 0.5em;
				border-radius: 0.5em;
				padding: 0.85em;
				border: solid 1px transparent;
				-moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
			}

			#nav > ul > li.active {
				border-color: rgba(192, 192, 192, 0.35);
			}

			#nav > ul > li > a, #nav > ul > li > span {
				display: block;
				color: inherit;
				text-decoration: none;
				border: 0;
				outline: 0;
			}

			/* 아래는 상단메뉴 커서 올렸을때 글씨 변화 */
			#nav > ul > li > a {
				color: rgba(255, 255, 255, 0.8);  /* 기본은 옅은 흰색 */
				transition: color 0.35s ease-in-out;
			}

			#nav > ul > li:hover > a {
				color: #ffffff;  /* hover 시 완전한 흰색으로 강조 */
			}
			/* 여기까지 상단메뉴 커서 올렸을때 글씨 변화 */

			#nav > ul > li > ul {
				display: none;
			}



/* 여드름 치료 등으로 가는 스위치 */
.laser-nav{
  position: relative;   /* z-index가 먹도록 포지셔닝 */
  z-index: 1000;
}

.laser-nav ul{
  position: relative;
  z-index: 1001;
}

.laser-nav li a{
  display: inline-block;   /* 앵커 hitbox를 패딩만큼 확보 */
  line-height: 1;          /* 의도치 않은 라인박스 오차 방지 */
}

/* 여드름 적응증별 추천치료 간에 구분 및 공간 만들기 */
/* 기본(PC) 유지: 앞서 적용한 것 그대로 두세요 */
article.special .indication-block + .indication-block{
  border-top: 1px dashed #ccc;  /* 점선 구분 */
  padding-top: 35px;            /* 선과 타이틀 사이 여백 */
  margin-top: 32px;              /* 이전 블록과 간격 */
  margin-bottom: 48px;           /* 블록 하단 간격 */
}



/* 블록 내부 요소 간 기본 리듬 */
.treatment-title{ margin: 8px 0 12px; }
.treatment-gallery{ margin: 10px 0 14px; }  /* 이미지와 본문 사이 */
.bullets{ margin: 10px 0 0; padding-left: 18px; }




/* 여드름 치료부분에서 적응증, 장점, 주의 메뉴 */
.bullets{ margin:0; padding-left:18px; line-height:1.7; }


/* Nav에서 logo 추가 */

/* ===== NAV 최종본 (붙여넣기 전, 이전 nav/로고 관련 CSS는 모두 삭제하세요) ===== */

/* 설정값 */
:root{
  --header-h: 130px;   /* PC 상단바 높이 */
  --header-h-m: 56px;  /* 태블릿/모바일 상단바 높이 */
  --gap-x: 60px;       /* 로고-메뉴 간격 */
}

/* 반투명 검정 헤더 */
#nav{
  position: fixed; left: 0; right: 0; top: 0;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  overflow: visible; /* 드롭다운 잘림 방지 */
}

/* 공통 리셋 */
#nav ul, #nav li { list-style: none; margin: 0; padding: 0; }
#nav > ul:before, #nav > ul:after,
#nav .nav-inner > ul:before, #nav .nav-inner > ul:after { display: none !important; }

/* 본문 상단 빈칸 방지 */
body{ padding-top: 0 !important; }
body > *:first-child { margin-top: 0 !important; }

/* ===== 데스크톱(>=1024px): 로고 + 가로메뉴 ===== */
@media (min-width: 1024px){
  #nav{ height: var(--header-h); padding: 0 20px; text-align: initial; }

  /* 로고+메뉴 묶음을 중앙에 */
  #nav .nav-inner{
    height: 100%;
    display: flex;
    align-items: center;          /* 세로 중앙 */
    justify-content: center;      /* 가로 중앙 */
    gap: var(--gap-x);            /* 로고-메뉴 간격 */
    position: relative;
  }

  /* 로고 컨테이너: 라인박스 제거 + 살짝 왼쪽 치우침 */
  #nav .logo{
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding: 0 10px;
    line-height: 0;  /* 베이스라인 제거 */
    font-size: 0;    /* 공백 문자폭 제거 */
    margin-left: -8px; /* 필요시 0 ~ -12px로 조정 */
    background: transparent;
    overflow: hidden; /* 아티팩트 클립 */
  }
  /* 로고 이미지: 고정 크기 + 미세 상향(흰선 방지) */
  #nav .logo img{
    display: block;
    height: 54px;            /* 52~56px에서 미세 조정 */
    width: auto;
    transform: translateY(-0.5px); /* 필요 시 -1px */
  }

  /* 메뉴: 가로 배치 + 텍스트 세로 중앙 */
  #nav .nav-inner > ul{
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    line-height: var(--header-h);
  }
  #nav .nav-inner > ul > li { position: relative; }
  #nav .nav-inner > ul > li > a,
  #nav .nav-inner > ul > li > span{
    display: block;
    padding: 0 12px;
    line-height: var(--header-h);
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color .35s ease;
  }
  #nav .nav-inner > ul > li:hover > a{ color:#fff; }

  /* 드롭다운: 2차만 표시, 3차는 숨김 */
  #nav .nav-inner ul ul{ display: none; margin: 0; padding: 8px 0; }
  #nav .nav-inner > ul > li > ul{
    position: absolute; top: 100%; left: 0;
    min-width: 200px;
    background: rgba(0,0,0,0.9);
    border: 1px solid rgba(255,255,255,0.08);
  }
  #nav .nav-inner > ul > li:hover > ul{ display: block; } /* 2차만 */
  #nav .nav-inner > ul > li > ul > li:hover > ul{ display: none !important; } /* 3차 숨김 */

  #nav .nav-inner > ul > li > ul li a{
    display: block;
    padding: 10px 14px;
    line-height: 1.3;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    text-decoration: none;
  }
  #nav .nav-inner > ul > li > ul li a:hover{
    background: rgba(255,255,255,0.08);
    color: #fff;
  }
}

/* ===== 태블릿/모바일(<1024px): 기존 햄버거/오버레이 유지 ===== */
@media (max-width: 1023px){
  #nav{ height: var(--header-h-m); }
  /* 가로 메뉴/로고 숨김(오버레이만 사용). 모바일에서도 로고를 보이고 싶으면 아래 두 줄 주석 처리 */
  #nav .nav-inner > ul{ display: none !important; }
  #nav .logo{ display: none; }
}
/* 드롭다운이 다른 요소 위로 올라오게 */
@media (min-width:1024px){
  #nav{ z-index: 3000 !important; overflow: visible !important; } /* 잘림 방지 */
  #nav .nav-inner > ul > li{ position: relative; }
  #nav .nav-inner > ul > li > ul{
    position: absolute; top: 100%; left: 0;
    z-index: 4000; /* 스위치보다 확실히 위 */
  }
}

/* 스위치(상단 탭/버튼) 레이어 낮추기: 실제 클래스명으로 바꿔주세요 */
.switch-menu, .section-tabs, .page-switch {
  position: relative; 
  z-index: 1; /* nav보다 낮게 */
}

/* //Nav에서 logo 추가 */

/* ===== 모바일 전용 로고바 설정 ===== */
:root{
  --mobile-logo-h: 48px; /* 필요시 42~56px에서 조정 */
}

/* 기본은 숨김(PC) */
.mobile-logo-bar{ display:none; }

/* 모바일에서만 노출 */
@media (max-width:1023px){
  /* 상단 고정 로고바 */
  .mobile-logo-bar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--mobile-logo-h);
    display: flex !important;
    align-items: center;
    justify-content: center;         /* 좌측 배치 원하면 flex-start + padding-left */
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3000;                   /* nav(1000)보다 위 */
  }
  .mobile-logo-bar .mobile-logo-link img{
    height: 26px; width: auto; display:block;
  }

  /* nav(햄버거 바)를 로고바 아래로 내리기 */
  #nav{
    top: var(--mobile-logo-h) !important;
    height: var(--header-h-m);       /* 기존값 유지 */
    z-index: 2000 !important;
  }

  /* 기존 규칙이 로고/메뉴를 숨기더라도, nav 안 로고는 계속 숨김 유지(중복 노출 방지) */
  #nav .logo{ display: none !important; }
  #nav .nav-inner > ul{ display: none !important; } /* 기존처럼 오버레이만 사용 */
}

/* PC에서는 모바일 로고바 확실히 숨김 */
@media (min-width:1024px){
  .mobile-logo-bar{ display:none !important; }
}
/* ===== //모바일 전용 로고바 설정 ===== */




			.dropotron {
				background: rgba(255, 255, 255, 0.975);
				padding: 1em 1.25em 1em 1.25em;
				line-height: 1em;
				height: auto;
				text-align: left;
				border-radius: 0.5em;
				box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.25);
				min-width: 12em;
				margin-top: -1em;
				list-style: none;
			}

			.dropotron li {
				border-top: solid 1px rgba(128, 128, 128, 0.2);
				color: #5b5b5b;
				padding-left: 0;
			}

			.dropotron li:first-child {
				border-top: 0;
			}

			.dropotron li:hover {
				color: #ef8376;
			}

			.dropotron li a, .dropotron li span {
				display: block;
				border: 0;
				padding: 0.5em 0 0.5em 0;
				-moz-transition: color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out;
			}

			.dropotron.level-0 {
				margin-top: 2em;
				font-size: 0.9em;
			}

			.dropotron.level-0:before {
				content: '';
				position: absolute;
				left: 50%;
				top: -0.7em;
				margin-left: -0.75em;
				border-bottom: solid 0.75em rgba(255, 255, 255, 0.975);
				border-left: solid 0.75em rgba(64, 64, 64, 0);
				border-right: solid 0.75em rgba(64, 64, 64, 0);
			}

			/* Banner */

			#banner {
				background: #fff;
				text-align: center;
				padding: 4.5em 0 4.5em 0;
				margin-bottom: 0;
			}

			#banner header > p {
				margin-bottom: 0;
			}

			/* Content */

			#content > hr {
				top: 3em;
				margin-bottom: 6em;
			}

			#content > section {
				margin-bottom: 0;
			}

			/* Sidebar */

			#sidebar > hr {
				top: 3em;
				margin-bottom: 6em;
			}

			#sidebar > hr.first {
				display: none;
			}

			#sidebar > section {
				margin-bottom: 0;
			}

			/* Main */

			#main {
				margin-bottom: 0;
			}

			#main section:first-of-type {
				padding-top: 2em;
			}

			/* Footer */

			#footer {
				position: relative;
				overflow: hidden;
				padding: 2em 0 6em 0;
				background: #b22c61;
				color: #fff;
			}

			#footer .icon.circled {
				background: #fff;
				color: #b22c61;
			}

			#footer header {
				text-align: center;
				cursor: default;
			}

			#footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
				color: #fff;
			}

			#footer .contact {
				text-align: center;
			}

			#footer .contact p {
				text-align: center;
				margin: 0 0 3em 0;
			}
			/* 기존 푸터 전체 카피라이트 영역 스타일 */
			#footer .copyright {
				text-align: center;
				color: rgba(255, 255, 255, 0.6);
				font-size: 0.8em;
				cursor: default;
			}
			/* 병원 정보와 출처 링크 모두에 적용되는 기본 링크 색 */
			#footer .copyright a {
				color: rgba(255, 255, 255, 0.6);
			}
			/* 링크에 마우스를 올려도 색이 바뀌지 않도록 유지 */
			#footer .copyright a:hover {
				color: rgba(255, 255, 255, 0.6);
			}
			/* ▼ 추가된 부분 (HTML5 UP 출처 전용 스타일) */
/* 병원 정보와 출처가 둘 다 .menu 클래스를 쓰기 때문에
두 번째 .menu만 선택해 출처 부분만 별도 스타일 지정 */
#footer .copyright .menu:nth-of-type(2) {
	font-size: 0.7em;                      /* 더 작게 */
	opacity: 0.8;                          /* 더 연하게 */
	font-weight: 300;                      /* 얇게 */
	color: rgba(255, 255, 255, 0.6);       /* 폰트 색도 밝은 회색 */
	margin-top: 4px;                       /* 병원 정보와 간격 확보 */
}

/* 출처 링크 자체에 hover/클릭 반응 없게 설정 */
#footer .copyright .menu:nth-of-type(2) a {
	color: rgba(255, 255, 255, 0.6);       /* 링크도 흐리게 */
	text-decoration: none;                /* 밑줄 제거 */
	
	cursor: pointer; /* 손가락 모양 나옴 */
}
#footer .copyright .menu:nth-of-type(2) a:hover {
  text-decoration: underline;
}
/* Carousel */

.carousel {
	position: relative;
	overflow: hidden;
	padding: 2em 0 2em 0;
	margin-bottom: 0;
}

.carousel .forward, .carousel .backward {
	position: absolute;
	top: 50%;
	width: 6em;
	height: 12em;
	margin-top: -6em;
	cursor: pointer;
}

.carousel .forward:before, .carousel .backward:before {
	content: '';
	display: block;
	width: 6em;
	height: 6em;
	border-radius: 100%;
	background-color: rgba(178, 44, 97, 0.5);
	position: absolute;
	top: 50%;
	margin-top: -3em;
	-moz-transition: background-color 0.35s ease-in-out;
	-webkit-transition: background-color 0.35s ease-in-out;
	-o-transition: background-color 0.35s ease-in-out;
	-ms-transition: background-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out;
	-webkit-backface-visibility: hidden;
}

.carousel .forward:after, .carousel .backward:after {
	content: '';
	width: 3em;
	height: 3em;
	position: absolute;
	top: 50%;
	margin: -1.5em 0 0 0;
	background: url("images/arrow.svg") no-repeat center center;
}

.carousel .forward:hover:before, .carousel .backward:hover:before {
	background-color: rgba(178, 44, 97, 0.8);
}

.carousel .forward {
	right: 0;
}

.carousel .forward:before {
	right: -3em;
}

.carousel .forward:after {
	right: -0.25em;
}

.carousel .backward {
	left: 0;
}

.carousel .backward:before {
	left: -3em;
}

.carousel .backward:after {
	left: -0.25em;
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1);
}

.carousel .reel {
	white-space: nowrap;
	position: relative;
	-webkit-overflow-scrolling: touch;
	padding: 0 2em 0 2em;
}

.carousel article {
	display: inline-block;
	width: 18em;
	background: #fff;
	text-align: center;
	padding: 0 1em 3em 1em;
	margin: 0 2em 0 0;
	white-space: normal;
	opacity: 1.0;
	-moz-transition: opacity 0.75s ease-in-out;
	-webkit-transition: opacity 0.75s ease-in-out;
	-ms-transition: opacity 0.75s ease-in-out;
	transition: opacity 0.75s ease-in-out;
}

.carousel article.loading {
	opacity: 0;
}

.carousel article .image {
	position: relative;
	left: -1em;
	top: 0;
	width: auto;
	margin-right: -2em;
	margin-bottom: 3em;
}

.carousel article p {
	text-align: left;
}







/* Wide */

@media screen and (max-width: 1680px) {

	/* Basic */

	body, input, textarea, select {
		font-size: 14pt;
		line-height: 1.75em;
	}

	/* Carousel */

	.carousel {
		padding: 1.5em 0 1.5em 0;
	}

	.carousel .reel {
		padding: 0 1.5em 0 1.5em;
	}

	.carousel article {
		width: 18em;
		margin: 0 1.25em 0 0;
	}

}

/* Normal */

@media screen and (max-width: 1280px) {

	/* Basic */

	body, input, textarea, select {
		font-size: 12pt;
		line-height: 1.5em;
	}

	/* Wrapper */

	.wrapper {
		padding-left: 2em;
		padding-right: 2em;
	}

	/* Header */

	#header {
		background-attachment: scroll;
	}

	#header .inner {
		padding-left: 2em;
		padding-right: 2em;
	}

	/* Banner */

	#banner {
		padding-left: 2em;
		padding-right: 2em;
	}

	/* Footer */

	#footer {
		padding-left: 2em;
		padding-right: 2em;
	}

}

/* Narrow */

/* Narrower */

@media screen and (max-width: 840px) {

	/* Basic */

	body, input, textarea, select {
		font-size: 13pt;
		line-height: 1.65em;
	}

	.tweet {
		text-align: center;
	}

	.timestamp {
		display: block;
		text-align: center;
	}

	/* Footer */

	#footer {
		padding: 4em 2em 4em 2em;
	}

	/* Carousel */

	.carousel {
		padding: 1.25em 0 1.25em 0;
	}

	.carousel article {
		width: 18em;
		margin: 0 1em 0 0;
	}

}
/* go top btn */
.go-top-wrapper {
	text-align: right;
	margin-top: 2em;
}

.go-top-wrapper a.button {
	background: #ffffff;                /* 흰 배경 */
	color: #333333;                     /* 짙은 회색 글씨 */
	border: 1px solid #999999;          /* 중간 회색 테두리 */
	padding: 0.5em 1.2em;
	border-radius: 2em;
	font-size: 0.85em;
	font-weight: 500;
	transition: all 0.3s ease;
	text-decoration: none;
}

.go-top-wrapper a.button:hover {
	background: #f5f5f5;                /* 살짝 회색으로 변화 */
	color: #000000;                     /* 더 진한 글씨 */
	border-color: #666666;
	cursor: pointer;
}


/* Mobile */

#navPanel, #titleBar {
	display: none;
}

@media screen and (max-width: 736px) {

	/* Basic */

	html, body {
		overflow-x: hidden;
	}

	body, input, textarea, select {
		font-size: 12.5pt;
		line-height: 1.5em;
	}

	h2 {
		font-size: 1.75em;
	}

	h3 {
		font-size: 1.25em;
	}

	hr {
		top: 3em;
		margin-bottom: 6em;
	}

	/* Section/Article */

	section, article {
		margin-bottom: 2em;
	}

	section:last-child, article:last-child {
		margin-bottom: 0;
	}

	.row > section, .row > article {
		margin-bottom: 2em;
	}

	header > p {
		font-size: 1.25em;
	}

	/* Image */

	.image.featured {
		margin: 0 0 2em 0;
	}

	.image.left {
		margin: 0 1em 1em 0;
	}

	.image.centered {
		margin: 0 0 1em 0;
	}

	/* Actions */

	form ul.actions {
		margin-top: 0;
	}

	ul.actions li {
		display: block;
		margin: 0.75em 0 0 0;
	}

	ul.actions li:first-child {
		margin-top: 0;
	}

	/* Menu */

	ul.menu {
		height: auto;
		text-align: center;
	}

	ul.menu li {
		display: block;
		border: 0;
		padding: 0.75em 0 0 0;
		margin: 0;
	}

	ul.menu li:first-child {
		padding-top: 0;
	}

	/* Icons */

	ul.icons {
		font-size: 1em;
		padding: 0.35em 0.5em 0.35em 0.5em;
	}

	ul.icons li a {
		width: 2.25em;
	}

	/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		display: block;
		padding: 0;
		line-height: 3em;
		width: 100%;
	}

	/* Nav */

	#page-wrapper {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		padding-bottom: 1px;
	}

	#navButton {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 44px;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10001;
	}

	#navButton .toggle {
		text-decoration: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border: 0;
		outline: 0;
	}

	#navButton .toggle:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
	}

	#navButton .toggle:before {
		text-decoration: none;
		font-style: normal;
		content: '\f0c9';
		color: #fff;
		color: rgba(255, 255, 255, 0.75);
		text-align: center;
		display: block;
		font-size: 14px;
		width: 80px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		left: 50%;
		margin-left: -40px;
		background: rgba(0,0,0,0.7);
		border-top: 0;
		border-radius: 0 0 0.35em 0.35em;
	}

	#navPanel {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translateY(-50vh);
		-webkit-transform: translateY(-50vh);
		-ms-transform: translateY(-50vh);
		transform: translateY(-50vh);
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 50vh;
		left: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10002;
		background: #1f1920;
		box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25);
		font-size: 1em;
	}

	#navPanel:before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url("images/overlay.png");
		background-size: 128px 128px;
	}

	#navPanel .link {
		position: relative;
		z-index: 1;
		display: block;
		text-decoration: none;
		padding: 0.5em;
		color: #ddd;
		border: 0;
		border-top: dotted 1px rgba(255, 255, 255, 0.05);
	}

	#navPanel .link:first-child {
		border-top: 0;
	}

	#navPanel .link.depth-0 {
		color: #fff;
		font-weight: 600;
	}

	#navPanel .indent-1 {
		display: inline-block;
		width: 1em;
	}

	#navPanel .indent-2 {
		display: inline-block;
		width: 2em;
	}

	#navPanel .indent-3 {
		display: inline-block;
		width: 3em;
	}

	#navPanel .indent-4 {
		display: inline-block;
		width: 4em;
	}

	#navPanel .indent-5 {
		display: inline-block;
		width: 5em;
	}

	#navPanel .depth-0 {
		color: #fff;
	}

	body.navPanel-visible #page-wrapper {
		-moz-transform: translateY(50vh);
		-webkit-transform: translateY(50vh);
		-ms-transform: translateY(50vh);
		transform: translateY(50vh);
	}

	body.navPanel-visible #navButton {
		-moz-transform: translateY(50vh);
		-webkit-transform: translateY(50vh);
		-ms-transform: translateY(50vh);
		transform: translateY(50vh);
	}

	body.navPanel-visible #navPanel {
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}

	/* Wrapper */

	.wrapper {
		padding: 3em 1em 3em 1em;
	}

	/* Header */

	#header {
		background-attachment: scroll;
		padding: 2.5em 0 0 0;
	}

	#header .inner {

		padding-top: 1.5em;
		padding-left: 1em;
		padding-right: 1em;
	}

	#header header > p {
		font-size: 1em;
	}

	#header h1 {
		font-size: 1.75em;
	}

	#header hr {
		top: 1em;
		margin-bottom: 2.5em;
	}

	body.homepage #header {
		min-height: 0;
		padding: 5.5em 0 5em 0;
		height: auto;
	}

	body.homepage #header:before {
		display: none;
	}

	body.homepage #header h1 {
		font-size: 2.5em;
	}

/*모바일로고 아래 메뉴버튼*/
@media (max-width:1023px){
  .mobile-logo-bar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 48px;
    display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.7);
    z-index: 10003;
  }
  .mobile-logo-bar img{ height:48px; width:auto; }

  /* 버튼: 로고바 밑에서 고정 */
  #navButton{
    position: fixed;
    top: 48px;       /* 로고바 높이 */
    left: 0; right: 0;
    height: 44px;
    z-index: 10002;
  }

 /* 메뉴 패널: 버튼 밑에서 내려옴 */
  #navPanel{
    position: fixed;
    top: 48px;       /* 로고바 + 버튼 */
    left: 0; right: 0;
    height: 50vh;
    transform: translateY(-100%);
    transition: transform .5s ease;
    z-index: 10001;
    background: #1f1920;
    overflow-y: auto;
  }
  body.navPanel-visible #navPanel{
    transform: translateY(0);
}

 /* 본문 여백 확보 */
  #page-wrapper{ padding-top:48px; }
}



	/* Nav */

	#nav {
		display: none;
	}

	/* Banner */

	#banner {
		padding: 3em 2em 3em 2em;
	}

	/* Sidebar */

	#sidebar > hr:first-of-type {
		display: block;
	}

	/* Main */

	#main > header {
		text-align: center;
	}

	/* Footer */

	#footer {
		padding-left: 1em;
		padding-right: 1em;
	}

	/* Carousel */

	.carousel {
		padding: 0.5em 0 0.5em 0;
	}

	.carousel .reel {
		padding: 0 0.5em 0 0.5em;
	}

	.carousel article {
		width: 14em;
		padding-bottom: 2em;
		margin: 0 0.5em 0 0;
	}

	.carousel article .image {
		margin-bottom: 2em;
	}

}


/* PC 전용: 원( .forward )이 잘리지도, 뒤로 깔리지도 않게 */
@media (min-width: 1024px){
  /* 1) 바깥으로 튀어나간 부분 안 잘리게 */
  /*.carousel,
  .carousel .photo-row,
  .carousel .photo-item,
  .carousel .photo-item a {
    position: relative;
    overflow: visible !important;
  }*/
/* PC에서 화살표를 원의 정확한 중앙으로 */
@media (min-width: 1024px){
  .carousel .forward:after { right: -0.3em; }   /* 원(지름 6em)의 중심이 컨테이너 경계(0)라서 -1.5em이면 정중앙 */
  .carousel .backward:after { left: -0.3em; }   /* 뒤로가기 버튼도 동일하게 중앙 보정 (필요할 때) */
}

  /* 2) 원 버튼을 최상단으로 */
  .carousel .forward{
    position: absolute;          /* 기존 구조 유지 */
    top: 50%;
    right: 0;                    /* 기존 위치 로직 유지 */
    margin-top: -6em;            /* 기존 값 유지 */
    z-index: 9999;               /* 이미지보다 확실히 높게 */
  }

  /* 3) 혹시 이미지에 z-index가 이미 높게 잡혀 있으면 낮춰줌 */
  .carousel .photo-item img{
    position: relative;
    z-index: 1;
  }
}

/* 기미/색소페이지 bbl도표 */
/* === 표 전용: 다른 스타일과의 충돌 방지용 === */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0; }

.responsive-compare{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:#fff;
  min-width:560px;                 /* 좁아지면 가로 스크롤 */
  border:1px solid #e0e0e0;
  table-layout:auto !important;    /* 전역 fixed 무력화 */
}

.responsive-compare caption{
  text-align:left; font-weight:700; color:#374151; margin:4px 0 10px;
}

/* 전역 display:block/inline-block 강제 무력화 */
.responsive-compare thead{ display:table-header-group !important; }
.responsive-compare tbody{ display:table-row-group !important; }
.responsive-compare tr   { display:table-row !important; }
.responsive-compare th,
.responsive-compare td   { display:table-cell !important; }

/* 셀 기본 스타일 */
.responsive-compare th,
.responsive-compare td{
  padding:12px 14px;
  border:1px solid #e0e0e0;
  text-align:center;
  vertical-align:middle;
  word-break:keep-all;             /* 한글 세로분해 방지 */
  white-space:normal;              /* 필요 시 줄바꿈 허용 */
}

/* 헤더 배경 */
.responsive-compare thead th{
  background:#f7f7f7;
  color:#111827;
  font-weight:700;
}

/* 첫 열(특징/항목) 가독성 */
.responsive-compare tbody th[scope="row"]{
  
  font-weight: bold;
  
}


/* 레이저제모페이지, 이미지 사이 원+화살표 */

/* 팝업 모바일 최적화 코드 */