/*
	�Ǻΰ� ������ ��Ÿ�� �߰� 2021-01-15
*/

#pageContents { 
	color: #6a6158; 
	word-break: keep-all; 
	font-size: 17px;
	position: relative;
	width: 100%;
}
#pageContents .docHeader {
	width: 100%;
	height: 55vh;
	position: relative;
}
#pageContents header { position: relative; }
#pageContents .docHeader-title {
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
	bottom: 50px;
	font-size: 70px;
	color: #d7af85;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	width: 1200px;
	margin: 0 auto;
}
#pageContents .bgContents {
	background-color: #efecf5;
	background-position: center top;
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
	top: 0;
	height: 900px;
	right: 0;
	left: 0;
}

#pageContents .goldBox-wrap {
	position: relative;
	width: 1200px;
	margin: 0 auto;
}
#pageContents .goldBox-wrap .goldBox {
	padding: 200px 100px 150px;
	background-color: #d7af85;
	color: #fff;
	line-height: 1.3;
	font-weight: 100;
	margin-bottom: -100px;
	margin-left: -100px;
	letter-spacing: -1px;
	overflow-x: hidden;
	width: 2000px;
}

#pageContents .goldBox-wrap .goldBox .goldBox-contents { 
	width: 1200px; 
	font-size: 36px;
}
#pageContents .goldBox-wrap .right-location {
	text-align: right;
	font-size: 16px; 
	opacity: 0.7;
	font-weight: 400;
	width: 1220px;
	position: absolute;
	top: 30px;
	letter-spacing: normal;
	padding-right: 10px;
	color: #ffddb9;
}
#pageContents .blueBox-wrap {
	position: relative;
	margin: 0 auto;
	width: 1200px;
}
#pageContents .blueBox-wrap .blueBox {
	width: 2000px;
	background-color: #dcf2f7;
	color: #d0975b;
	float: right;
	margin-right: -100px;
	overflow-x: hidden;
}
#pageContents .blueBox-wrap .blueBox .blueBox-contents { 
	width: 1200px;;
	float: right;
	line-height: 1.8;
	font-size: 17px;
	padding: 100px;
}
#pageContents .blueBox-wrap .blueBox .blueBox-contents h2 {
	float: left;
	width: 20%;
}
#pageContents .blueBox-wrap .blueBox .blueBox-contents p {
	float: right;
	width: 65%;
}
#pageContents .blueBox-wrap .blueBox h2,
#pageContents .blueBox-wrap .blueBox p { float: left; }
#pageContents .blueBox-wrap .blueBox h2 { width: 25%; font-weight: 900; font-size: inherit; text-transform: uppercase; }
#pageContents .blueBox-wrap .blueBox p { width: 75%; font-weight: normal; padding-right: 100px; }


/* contents structure */
#pageContents .docBody {
	width: 1400px;
	margin: 100px auto;
	padding: 0 100px;
	box-sizing: border-box;
	position: relative;
	background-color: #fff;
}
#pageContents .contents {
	float: left;
	width: 100%;
	box-sizing: border-box;
}
/*
#pageContents .pageAside {
	width: 180px;
	height: auto;
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
}
#pageContents .pageAside:after {
	display: block;
	content: '';
	clear: both;
}
#pageContents .aside-wrap {
	width: inherit;
	position: sticky;
	position: -webkit-sticky; 
	top: 100px;
}
#pageContents .aside-wrap a {
	display: block;
	color: #6a6158;
	font-size: 14px;
	line-height: 1.8;
	font-weight: 500;
	text-transform: uppercase;
}
#pageContents .aside-wrap span {
	display: block;
	border-bottom: 1px solid #cdcdcd;
	margin: 0.7rem 0;
}
#pageContents .aside-wrap a:hover { color: #d7af85; }
#pageContents .aside-wrap .aside-title { font-weight: 700; margin-bottom: 0.7rem; }
*/

/* cummon document */
#pageContents .subject { 
	font-weight: 100; 
	font-size: 46px; 
	line-height: 1.5; 
	letter-spacing: -1px; 
	margin-bottom: 60px;
}
#pageContents .subject span {
	border-bottom: 1px solid #6a6158;
	padding-bottom: 0.25rem;
}
#pageContents .docBody .paragraph { 
	margin: 30px 0;
	font-size: 30px;
}
#pageContents .docBody .p-explanation {
	color: #3fb5e7;
	font-size: 18px;
	font-weight: 400;
	margin: 30px 0; 
	width: 800px;
}
#pageContents .docBody p { line-height: 1.7;}
#pageContents .docBody .imgBox {
	display: block;
}
#pageContents .docBody .vCenter {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: left;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
#pageContents hr { width: 100%; display: block; border: 0; }
#pageContents .hr15 { height: 3vh; }
#pageContents .hr60 { height: 60px; }
#pageContents .hr90 { height: 90px; }
#pageContents .hr-p { height: 160px; }
#pageContents .column-02 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; column-gap: 40px; }
#pageContents .column-03 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 40px; }
#pageContents strong { font-weight: 700; }
#pageContents mark { background-color: transparent; color: #d7af85; text-decoration: underline; }
#pageContents .txtBlue { color: #3fb5e7; }
#pageContents .txtGold { color: #d7af85; }
#pageContents .docBody .imgBorder { border: 1px solid #cdcdcd; }


.suitablefor li {
	font-weight: 700;
	line-height: 1.2;
	position: relative;
	padding: 10px 50px;
}

.suitablefor .bullet  {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	background-color: #d7af85;
	position: absolute;
	top: 1rem;
	left: 0;
	border-radius: 50%;
}


.commonContents { 
	padding: 100px 0;
	background-color: #efebe6;
}
.commonContents .subject { 
	width: 1200px;
	margin: 0 auto;
	margin-bottom: 60px;
	color: #6a6158;
}
.commonContents .black-cover {
	background-color: #000;
	opacity: 0.4!important;
	filter: alpha(opacity=40);
	width: 100%;
	height: 100%;
}
.commonContents .swiper-container {
	width: 1400px;
	height: 100%;
}
.commonContents .swiper-slide {
	width: 40%;
	height: 32vh;
	background-size: cover;
	color: #fff;
}
.commonContents .swiper-container dl { 
	position: absolute;
	top: 3rem;
	bottom: 3rem;
	left: 3rem;
	right: 3rem;
	z-index: 1;
	box-sizing: border-box;
	text-align: left;
	color: #fff;
}
.commonContents .swiper-container dl dt {
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.5;
	display: block;
	margin-bottom: 1rem;
}
.commonContents .swiper-container dl dd {
	width: 100%;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}
.commonContents .swiper-container { padding-bottom: 2rem; }

/* swiper-scrollbar style */	
.commonContents .swiper-container-horizontal > .swiper-scrollbar {
	position: absolute;
	width: 1200px;
	left: 50%;
	margin-left: -600px;
	bottom: 0;
	z-index: 50;
	height: 7px;
	border-radius: 0px;
	-ms-touch-action: none;
}
.commonContents .swiper-scrollbar-drag {
	height: 100%;
	width: 100%;
	position: relative;
	background: rgba(193, 157, 119, 1);
	border-radius: 0px;
	left: 0;
	top: 0;
}
/*
.commonContents .swiper-scrollbar-cursor-drag { cursor: move; }
.commonContents .swiper-scrollbar-lock { display: none; }
*/




/* page */
.shiny .bgContents { 
	background-image: url('../image/dematology_shiny_main.jpg'); 
	
}
.shiny .solution { text-align: left; display: block; }
.shiny .solution2 { display: none; }
.shiny .solution .circle { 
	padding: 14%; 
	margin: 0.7rem;
	background-size: 120px;
	background-repeat: no-repeat;
	background-position: center 10rem;
}
.shiny .solution .circle dl { 
	margin: 2rem 3rem 0; 
	line-height: 1.5; 
}
.shiny .solution .circle dt { margin-bottom: 0.5rem; } 
.shiny .solution .circle dd {
	font-weight: 400;
	font-size: 14px;
}






.shiny .diffrent .diffrentBox { }
.shiny .diffrent .diffrentBox li {
	display: inline-block;
	line-height: 1.5;
	padding: 0 100px;
}
.shiny .diffrent .diffrentBox li:first-child { 
	border-right: 1px solid #cdcdcd; 
	padding-left: 0;
}
.shiny .diffrent .diffrentBox dt {
	font-weight: 200; 
	color: #d7af85;  
	font-size: 32px;
	line-height: 1.3;
	margin-bottom: 20px;
}
.shiny .diffrent .diffrentBox dt span {
	font-size: 26px;
	font-weight: 700;
}
.shiny .diffrent .diffrentBox dd {
	font-weight: 700;
	padding: 4px 0;
}





.circleList { text-align: center; position: relative; }
.circleList .circle { 
	display: inline-block; 
	width: auto;
	height: auto;
	border: 1px solid #cfcfcf;
	overflow: hidden;
	text-align: center;
	position: relative;
	border-radius: 50%;
}
.circleList .circle .inner { 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 50%;
	padding: 1.3rem;
	color: #6a6158;
	font-weight: 700;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.circleList .circle .inner-none { 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 50%;
	padding: 1.3rem;
	color: #6a6158;
	font-weight: 700;
}
.circleList .inner-check {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: inherit;
	padding-top: 50%;
	line-height: 1.5;
	color: #6a6158;
	font-weight: 700;

	background-image: url('https://wonjinskin.com/Common/images/common/icon-check.svg');
	background-size: 3em;
	background-repeat: no-repeat;
	background-position: center 25%;
}















@media screen and (max-width:960px){
	#pageContents .hr-p { height: 30vh; }

	#pageContents { 
		color: #6a6158; 
		word-break: keep-all; 
		font-size: 1rem;
		position: relative;
		width: 100%;
	}
	#pageContents .docHeader {
		width: 100%;
		height: 55vh;
		position: relative;
	}
	#pageContents header { position: relative; }
	#pageContents .docHeader-title {
		position: absolute;
		bottom: 3vh;
		margin-left: 2rem;
		font-size: 2.5rem;
		color: #d7af85;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 1;
		width: 100%;
		box-sizing: border-box;
	}
	#pageContents .bgContents {
		background-color: #fff;
		background-position: 60% top;
		background-repeat: no-repeat;
		background-size: 330%;
		position: absolute;
		z-index: -1;
		top: 0;
		height: 100vh;
		right: 0;
		left: 0;
	}

	#pageContents .goldBox-wrap {
		position: relative;
		width: 100%;
	}
	#pageContents .goldBox-wrap .goldBox {
		padding: 6rem 2rem 10rem;
		background-color: #d7af85;
		color: #fff;
		line-height: 1.3;
		font-weight: 100;
		margin-bottom: -7rem;
		margin-left: 2rem;
		letter-spacing: -1px;
		overflow-x: hidden;
		width: inherit;
		box-sizing: border-box;
	}
	#pageContents .goldBox-wrap .goldBox .goldBox-contents { 
		width: inherit; 
		font-size: 1.3rem;
	}
	#pageContents .blueBox-wrap {
		position: relative;
		margin: 0 auto;
		width: inherit;
	}
	#pageContents .blueBox-wrap .blueBox {
		width: inherit;
		background-color: #dcf2f7;
		color: #d0975b;
		margin-right: 2rem;
		overflow-x: hidden;
	}
	#pageContents .blueBox-wrap .blueBox .blueBox-contents { 
		width: inherit;
		line-height: 1.5;
		font-size: inherit;
		padding: 4rem 4rem 4rem 2rem;
	}
	#pageContents .blueBox-wrap .blueBox .blueBox-contents h2 {
		float: left;
		width: inherit;
		width: 100%;
		font-weight: 900;
		text-transform: uppercase;
		margin-bottom: 1rem;
	}
	#pageContents .blueBox-wrap .blueBox .blueBox-contents p {
		float: left;
		width: inherit;
		font-weight: normal; 
		padding-right: 0; 
		font-size: 1rem;
	}



	/* contents structure */
	#pageContents .docBody {
		width: 100%;
		margin-top: 5rem;
		padding: 0 2rem;
		box-sizing: border-box;
		position: relative;
		background-color: #fff;
	}
	#pageContents .contents {
		float: left;
		width: 100%;
		box-sizing: border-box;
	}
	/* cummon document */
	#pageContents .subject { 
		font-weight: 100; 
		font-size: 2rem; 
		line-height: 1.5; 
		letter-spacing: -1px; 
		margin-bottom: 2rem;
	}
	#pageContents .subject span {
		border-bottom: 1px solid #6a6158;
		padding-bottom: 0.25rem;
	}
	#pageContents .docBody .paragraph { 
		margin: 30px 0;
		font-size: 30px;
	}
	#pageContents .docBody .p-explanation {
		color: #3fb5e7;
		font-size: inherit;
		font-weight: 400;
		margin: 1.5rem 0; 
		width: inherit;
	}
	#pageContents .docBody p { line-height: 1.7;}
	#pageContents .docBody .imgBox {
		display: block;
	}
	#pageContents .docBody .vCenter {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: left;
		justify-content: left;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	#pageContents hr { width: 100%; display: block; border: 0; }
	#pageContents .hr30 { height: 30px; }
	#pageContents .hr60 { height: 60px; }
	#pageContents .hr90 { height: 90px; }
	#pageContents .hr-p { height: 6rem; }
	#pageContents .column-02 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; column-gap: 40px; }
	#pageContents .column-03 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; column-gap: 40px; }
	#pageContents strong { font-weight: 700; }
	#pageContents mark { background-color: transparent; color: #d7af85; text-decoration: underline; }
	#pageContents .txtBlue { color: #3fb5e7; }
	#pageContents .txtGold { color: #d7af85; }
	#pageContents .docBody .imgBorder { border: 1px solid #cdcdcd; }


	.suitablefor li {
		font-weight: 700;
		line-height: 1.2;
		position: relative;
		padding: 10px 2rem;
	}

	.suitablefor .bullet  {
		display: block;
		width: 0.5rem;
		height: 0.5rem;
		background-color: #d7af85;
		position: absolute;
		top: 1rem;
		left: 0;
		border-radius: 50%;
	}


	.commonContents { 
		padding: 9vh 2rem;
		background-color: #efebe6;
	}
	.commonContents .subject { 
		color: #6a6158;
		width: 100%;
		padding-bottom: 3vh;
	}
	.commonContents .black-cover {
		background-color: #000;
		opacity: 0.4!important;
		filter: alpha(opacity=40);
		width: 100%;
		height: 100%;
	}
	.commonContents .swiper-container {
		width: 100%;
		height: 100%;
	}
	.commonContents .swiper-slide {
		width: 80%;
		height: 44vh;
		background-size: cover;
		color: #fff;
	}
	.commonContents .swiper-container dl { 
		position: absolute;
		top: 3rem;
		bottom: 3rem;
		left: 3rem;
		right: 3rem;
		z-index: 1;
		box-sizing: border-box;
		text-align: left;
		color: #fff;
	}
	.commonContents .swiper-container dl dt {
		font-weight: 700;
		font-size: 1.2rem;
		line-height: 1.3;
		display: block;
		margin-bottom: 1rem;
	}
	.commonContents .swiper-container dl dd {
		width: 100%;
		font-size: 0.8rem;
		font-weight: 500;
		line-height: 1.3;
		text-align: left;
	}
	.commonContents .swiper-container { padding-bottom: 2rem; }

	/* swiper-scrollbar style */	
	.commonContents .swiper-container-horizontal > .swiper-scrollbar {
		position: absolute;
		width: auto;
		left: 0;
		right: 0;
		margin-left: 0;
		bottom: 0;
		z-index: 50;
		height: 7px;
		border-radius: 0px;
		-ms-touch-action: none;
	}
	.commonContents .swiper-scrollbar-drag {
		height: 100%;
		width: 100%;
		position: relative;
		background: rgba(193, 157, 119, 1);
		border-radius: 0px;
		left: 0;
		top: 0;
	}


	/* page */
	.shiny .bgContents { 
		background-image: url('../image/dematology_shiny_main.jpg'); 
	}
	.shiny .solution { display: none; }
	.shiny .solution2 { display: block; position: relative; }
	.shiny .solution2 .circle { 
		padding: 48%; 
		margin-bottom: 2rem;
		background-size: 30vw;
		background-repeat: no-repeat;
		background-position: center 25vh;
		position: relative; 
	}
	.shiny .solution2 .circle dl { 
		margin: 2.7rem 2rem 0; 
		line-height: 1.5; 
	}
	.shiny .solution2 .circle dt { 
		margin-bottom: 0.5rem;
		font-size: 1.3rem;
	} 
	.shiny .solution2 .circle dd {
		font-weight: 400;
		font-size: 0.9rem;
	}
	.shiny .solution2 .swiper-container-horizontal > .swiper-scrollbar {
		position: absolute;
		width: auto;
		left: 0;
		right: 0;
		margin-left: 0;
		bottom: 0;
		z-index: 50;
		height: 7px;
		border-radius: 0px;
		-ms-touch-action: none;
	}
	.shiny .solution2 .swiper-scrollbar-drag {
		height: 100%;
		width: 100%;
		position: relative;
		background: rgba(193, 157, 119, 1);
		border-radius: 0px;
		left: 0;
		top: 0;
	}



	.shiny .diffrent .diffrentBox li {
		display: inline-block;
		line-height: 1.5;
		padding: 0;
		width: 45%;
	}
	.shiny .diffrent .diffrentBox li:first-child { 
		border-right: 0; 
		padding-left: 0;
		padding-bottom: 3rem;
	}
	.shiny .diffrent .diffrentBox dt {
		font-weight: 200; 
		color: #d7af85;  
		font-size: 1rem;
		line-height: 1.3;
		margin-bottom: 20px;
	}
	.shiny .diffrent .diffrentBox dt span {
		font-size: 26px;
		font-weight: 700;
	}
	.shiny .diffrent .diffrentBox dd {
		font-weight: 700;
		padding: 4px 0;
	}

	

	.circleList { text-align: center; position: relative; }
	.circleList .circle { 
		display: inline-block; 
		width: auto;
		height: auto;
		border: 5px solid #ededed;
		overflow: hidden;
		text-align: center;
		position: relative;
		border-radius: 50%;
	}
	.circleList .circle .inner { 
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 50%;
		padding: 1.3rem;
		color: #6a6158;
		font-weight: 700;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.circleList .circle .inner-none { 
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 50%;
		padding: 1.3rem;
		color: #6a6158;
		font-weight: 700;
	}

}