@charset "UTF-8";


body {
	box-sizing: border-box;
	position: relative;
	font-family: 'Pretendard-Regular','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif;
	color: #787878;
	word-break: keep-all;
	top: 0px !important;
}

body h1 {
	font-size: 8.4rem;
	letter-spacing: -0.3rem;
}
body h2 {
	font-size: 4.8rem;
	letter-spacing: -0.18rem;
}
body h3 {
	font-size: 4.2rem;
	letter-spacing: -0.15rem;
}
body h4 {
	font-size: 3rem;
	letter-spacing: -0.1rem;
}
body h5 {
	font-size: 2.4rem;
}
body h6 {
	font-size: 2.2rem;
}
body p,
body li,
body dt,
body a,
body th,
body td  {
	font-size: 1.8rem;
	line-height: 160%;
	word-break: keep-all;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Pretendard-Bold','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif;
	line-height: 160%;
	color: #333;
	font-weight: 700;
}
.bigP {
	font-size: 1.9rem;	
}
.txtCenter {
    text-align: center;
}
.txtRight {
	text-align: right;	
}
.txtLeft {
	text-align: left;	
}
.blockCenter {
	margin: 0rem auto;
}
.lightblueTxt {
	color: #4391ed;
}
.greyTxt {
	color: #999 !important;
}
.lightgreyTxt {
	color: #aaa;	
}
.redTxt {
	color: #e2007e !important;	
}
.blueTxt {
	color: #0066b3 !important;	
}
.greyTxt {
	color: #999 !important;
}
.Myeongjo {
	font-family: 'Nanum Myeongjo';
}


.ui.button.blue {
	background-color: #0066b3;
}
.ui.button.grey {
	background-color: #999;
}
.img {
	display: block;	
}
.img img {
	width: 100%;	
}
.bgImg {
	background-position: center center;
	background-repeat: no-repeat;	
}
.blind {
	display: none;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex-first {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-align-center {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
ul.num {
	list-style: decimal;
	padding-left: 2rem;
}
.dot li {
	position: relative;
	display: block;
	line-height: 140%;
	margin-bottom: 0.8rem;
	padding-left: 1.8rem;
	word-break: keep-all;
}
.dot.bigP li {
	font-size: 1.9rem;
	color: #333 !important;
}
.dot li:before {
	position: absolute;
	display: block;
	left: 0;
	top: 0;	
}
.dot li:before {
	content: "";
	top: 0.8rem;
	left: 0.4rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #999;
}
.bar li {
	position: relative;
	color: #787878;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}
.bar li:before {
	content: "";
	position: absolute;
	display: block;
	left: 0.3rem;
	top: 1.3rem;
	width: 0.7rem;
	height: 0.2rem;
	background-color: #999;	
}
.ui.button {
	font-size: 1.5rem;
	line-height: 140%;
	padding: 0.8rem 2rem;
	border-radius: 0.3rem;
}
/*.icon:before,
.k-icon:before {
	display: block;
}*/

.swiper-button-next:after,
.swiper-button-prev:after {
	content: '' !important;
}
.bar {
	position: relative;
	padding-top: 2rem;
}
.bar:before {
	content: "";
	position: absolute;
	display: block;
	width: 5rem;
	height: 0.4rem;
	top: 0;
	left: 0;
	background-color: #333;
}
.k-checkbox {
	width: 2.5rem;
    height: 2.5rem;
	border-radius: 0.3rem;
	margin-right: 0.2rem;
}
.k-checkbox::before {
	display: block;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2.5rem;
	background-color: #f26238;
}
.eng {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0;	
}
.inner1 {
	max-width: 172rem;	
}
.inner2 {
	max-width: 150rem;	
}
.inner3 {
	max-width: 128rem;	
}
:root {
    --kendo-color-primary: #cce2ff !important;
}


/******* HDTOP CSS ********/
header {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;	
}
#hdTop {
	width: 100%;
}
#hdTop .inner1 {
	position: relative;
	height: 18.5rem;
	padding: 3rem 0;
	overflow: visible;
}
.logo {
	display: block;
	overflow: hidden;
	padding: 2rem;
	width: 24.2rem;
	height: 12.5rem;
}


/******* MENU CSS ********/

nav {
	width: 94rem;
	position: relative;
	display: inline-block;
	z-index: 10;
}

nav .gnb > li {
	float: left;
	position: relative;
	text-align: center;
	padding: 0;
}
nav .gnb > li > a {
	font-family: 'Pretendard-Bold';
	font-size: 2.7rem;
    color: #333;
	position: relative;
	width: auto;
	height: 12.5rem;
	word-break: keep-all;
	/*overflow: hidden;*/
	display: flex;
    align-items: center;
	justify-content: center;
	padding: 0 4rem;
}
nav .gnb > li > a:hover {
	text-decoration: none;
}
nav .gnb > li > a:after {
	content: "";
	width: 0;
	height: 0.5rem;
	background: #1b4dff;
	display: block;
	position: absolute;
	left: 0;
	bottom: -3rem;
	transition: all 0.6s;
	-moz-transition: all 0.6s;
	-webkit-transition: all 0.6s;
	-o-transition: all 0.6s;
	-ms-transition: all 0.6s;
}
nav .gnb > li:hover > a:after {
	width: 100%;
}
nav .gnb > li:hover > .depth2 li {
	animation-duration: .3s;
	animation-name: Fadein;
}

nav .gnb > li > .depth2 {
	position: absolute;
	width: 100%;
	height: 32rem;
	padding: 3rem 0;
	display: none;
	cursor: pointer;
	left: 0;
	top: 15.5rem;
	background-color: rgba( 0, 0, 0, 0);
	border-right: 1px solid rgba(0, 0, 0, 0.05);
}
nav .gnb > li:hover > .depth2,
nav .gnb > li > .depth2:hover {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	background-color: #f9f9f9;
	-webkit-transition: background-color 0.6s ease;
	-moz-transition: background-color 0.6s ease;
	-o-transition: background-color 0.6s ease;
	transition: background-color 0.6s ease;
}
nav .gnb > li > .depth2:hover:after {
	width: 100%;
}
nav .gnb > li:first-child > .depth2:before {
    width: 0.1rem;
    background-color: rgba(0, 0, 0, 0.05);
	height: 100%;
    display: block;
    position: absolute;
    content: "";
    z-index: 1;
    top: 0px;
    left: 0px;
}
nav .gnb > li > .depth2 > li {
	text-align: left;
	padding: 1rem 2.5rem;
}
nav .gnb > li > .depth2 > li:last-child {
	margin: 0;
}
nav .gnb > li > .depth2 > li > a {
    font-size: 1.8rem;
	line-height: 140%;
    color: #333;
	word-break: keep-all;
	display: inline-block;
	border-bottom: 1px solid rgba(0, 0, 0, 0);
}
nav .gnb > li > .depth2:hover > li > a:hover,
nav .gnb > li > .depth2:hover > li .depth3 > li > a:hover {
	text-decoration: underline;
}
nav .gnb > li > .depth2 > li .depth3 > li {
	position: relative;
	padding-left: 1.5rem;	
}
nav .gnb > li > .depth2 > li .depth3 > li:before {
	content: "";
	position: absolute;
	display: block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	top: 1.2rem;
	left: 0.5rem;
	background-color: #666;
}
nav .gnb > li > .depth2 > li .depth3 > li > a {
	color: #666;
    padding: 0.4rem 0rem;
    position: relative;
    font-size: 1.5rem;
	font-weight: 400;
	display: inline-block;
}

.menu_btn {
	position: absolute;
	display: block;
	width: 3rem;
	height: 2.4rem;
	right: 6rem;
	top: 50%;
	margin: 0px;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	z-index: 11;
}
.menu_btn button {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../main/images/mobile_menu.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	border: none;
	margin: 0;
}


/******* MENU BG CSS ********/
.gnbBg {
	position: absolute;
	height: 0;
	background-color: #fff;
	z-index: 1;
	width: 100%;
	/*top: 16.5rem;*/
	top: 0rem;
	transition: all 0.6s;
	-moz-transition: all 0.6s;
	-webkit-transition: all 0.6s;
	-o-transition: all 0.6s;
	-ms-transition: all 0.6s;
	
}
.gnbBg.on {
	position: absolute;
	/*height: 50rem;*/
	height: 0rem;
	display: block;
	border-top: 0.1rem solid rgba(0, 0, 0, 0.15);
	border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
}
header:hover {
	background-color: #fff;
	-webkit-transition: background-color 0.6s ease;
	-moz-transition: background-color 0.6s ease;
	-o-transition: background-color 0.6s ease;
	transition: background-color 0.6s ease;
	border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
}


/******* Mobile MENU CSS ********/
header nav .top,
#menuBar .joinMenu {
	display: none;
}
header nav .top .img img {
	width: 140px;
}
#menuBar .joinMenu {
	overflow: hidden;
	border-top: 1px solid rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
#menuBar .joinMenu a {
	float: left;
	display: block;
	font-size: 1.7rem;
	line-height: 4.8rem;
	color: #fff;
	text-align: center;
	width: 50%;
	border-right: 0.1rem solid rgba(256, 256, 256, 0.1);
	background-color: #999;
}
#menuBar .joinMenu a:hover {
	background-color: #0066b3;
	-webkit-transition: background-color 0.6s ease;
	-moz-transition: background-color 0.6s ease;
	-o-transition: background-color 0.6s ease;
	transition: background-color 0.6s ease;
}
#menuBar .joinMenu a:last-child {
	border-right: none;	
}


/****** slide CSS *******/
#slide {
	position: relative;
	background-color: #f6f3f2;
}
#slide .mainSlide {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
#slide .swiper-slide {
	position: relative;
	display: flex;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}
#slide .swiper-slide .inner1 {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 0 2rem;
	display: flex;
	align-items: center;
}
#slide .swiper-slide .inner1 div {
	display: block;
	text-align: left;
}
#slide .swiper-slide .inner1 h1 {
	font-size: 7.2rem;
	font-family: 'GmarketSansBold';
	font-weight: 700;
	line-height: 120%;
}
#slide .swiper-slide .inner1 h4 {
	margin-top: 2rem;
	font-family: 'Pretendard-Medium';
	font-weight: 500;
}
#slide .swiper-slide .img img {
	display: block;	
}
#slide .swiper-slide.swiper-slide-visible.swiper-slide-active .inner1 h1 {
	animation-duration: .6s;
	animation-name: smFadeDown;
}
#slide .swiper-slide.swiper-slide-visible.swiper-slide-active .inner1 h4 {
	animation-duration: .6s;
	animation-name: BigFadein;
}

#slide .mainSlide .slideCon {
	position: absolute;
	display: block;
	width: 15rem;
	right: 50%;
	margin-right: -86rem;
	top: 50%;
	z-index: 11;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
#slide .mainSlide .swiper-button-prev,
#slide .mainSlide .swiper-button-next {
	display: block;
	width: 5.4rem;
	height: 5.4rem;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	border: 0.1rem solid rgba(0, 0, 0, 1);
}
#slide .mainSlide .swiper-button-prev {
	background-image: url(../main/images/slidePreIcon.png);
}
#slide .mainSlide .swiper-button-next {
	background-image: url(../main/images/slideNextIcon.png);
}

main {
	position: relative;	
}

/****** subject CSS ******/
#subject {
	padding: 14rem 0;
}
.titWrap {
	text-align: center;
	margin-bottom: 6rem;
}
.titWrap h6 {
	 font-family: 'Pretendard-ExtraLight';
	 font-weight: 200;	
}
.diagnosis {
	background-color: #dbedef;
	border-radius: 10rem;
	overflow: hidden;
}
.diagnosis .start {
	width: 54rem;
}
.diagnosis .start .div img {
	display: block;
	margin: 0 auto;
}
.diagnosis .start .div .ui.button.blue {
	display: block;
	width: 30rem;
	padding: 2rem 3rem;
	font-size: 2.2rem;
	line-height: 100%;
	margin: 3rem auto 0 auto;
	border-radius: 3rem;
	background-color: #0e6bf7;
}
.diagnosis .result {
	width: calc(100% - 54rem);
	display: block;
	padding-top: 3rem;
	text-align: center;
	background-color: #f9f9f9;
	border-radius: 10rem 0 0 10rem;
}
.diagnosis .result img {
	margin: 0 auto;	
}


/****** greyBg CSS *******/
#greyBg {
    background-color: #f9f9f9;
	padding: 14rem 0;
}
.numTit {
	position: relative;
	padding-top: 18rem;
	padding-left: 4rem;
}
.numTit.one {
	margin-bottom: 20rem;	
}
.numTit:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 18rem;
	letter-spacing: -0.5rem;
	line-height: 100%;
	font-family: 'Pretendard-Regular';
	font-weight: 400;
	color: #e5e5e5;
	z-index: 1;
}
.numTit.one:before {
	content: "01";
}
.numTit.two:before {
	content: "02";
}
.numTit.three:before {
	content: "03";
	color: #cadbdd;
}
.numTit .txt {
	position: absolute;
	z-index: 2;
	top: 12rem;
}
.numTit.one h2 + p {
	margin-top: 2rem;
	color: #000;
}
.numTit.two h2 + p,
.numTit.three h2 + p {
	margin-left: 6rem;
	color: #000;
}
.developer.swiper {
	width: 75rem;
	padding-left: 4rem;
	margin: 0;
}
.developer.swiper .swiper-slide {
	position: relative;
	cursor: pointer;	
}
.developer.swiper .swiper-slide.swiper-slide-thumb-active:before {
	content: "";
	position: absolute;
	display: block;
	width: 	1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: #0035a3;
}
.developer.swiper .swiper-slide h5 {
	padding: 3rem 0;
	margin-bottom: 3rem;
	border-bottom: 0.1rem solid #555;
	color: #999;
	font-family: 'Pretendard-Bold';
	font-weight: 700;
}
.developer.swiper .swiper-slide p {
	color: #999;
}
.developer.swiper .swiper-slide.swiper-slide-thumb-active h5,
.developer.swiper .swiper-slide.swiper-slide-thumb-active p {
	color: #000;	
}
.memSlide {
	position: absolute;
	right: 8rem;
	bottom: 0rem;
	display: block;
	width: 44.5rem;
	height: 44.5rem;
	overflow: hidden;
	border-radius: 50%;
}
.memSlide .swiper-slide:nth-child(1) {
	background-color: #e0f0f1;
}
.memSlide .swiper-slide:nth-child(2) {
	background-color: #fff;
}
.memSlide .swiper-slide:nth-child(3) {
	background-color: transparent;
}


/****** importance CSS *******/
#importance {
	padding: 14rem 0;
}
.importanceWrap,
.howToWrap {
	margin-top: 9rem;
	padding: 0 14rem;
}
.importanceWrap .item {
	width: 34.2rem;
	height: 46.9rem;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 10rem;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	-webkit-transition: transform .4s;
    transition: transform .4s;
}
.importanceWrap .item:hover {
	transform: translateY(-1rem);	
}
.importanceWrap .item:nth-child(1) {
	background-image: url(../main/images/mainImg_01.jpg)	
}
.importanceWrap .item:nth-child(2) {
	background-image:url(../main/images/mainImg_02.jpg)	
}
.importanceWrap .item:nth-child(3) {
	background-image:url(../main/images/mainImg_03.jpg)	
}
.importanceWrap .item h3,
.importanceWrap .item h5 {
	color: #fff;
	line-height: 140%;
}
.importanceWrap .item h5 {
	font-weight: 300;	
}

/****** howTo CSS *******/
#howTo {
    background-color: #dbedef;
	padding: 14rem 0;
}
.howToWrap .item {
	width: 36.9rem;
	height: 36.9rem;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	background-color: #fff;
	-webkit-transition: transform .4s;
    transition: transform .4s;
}
.howToWrap .item:hover {
	transform: translateY(-1rem);	
}
.howToWrap .item h3 {
	font-family: 'Pretendard-Regular';
	font-weight: 400;
}
.howToWrap .item h1 {
	line-height: 130%;	
}
.howToWrap .item h1 b {
	display: inline-block;
	color: #cd26bb;
}
.howToWrap .item h1 .txt {
	display: inline-block;
	font-size: 3rem;
	font-family: 'Pretendard-Regular';
	font-weight: 400;
	line-height: 100%;
	padding-top: 5.4rem;
}

/****** footerMenu CSS *******/
#footerMenu {
	background-color: #292f78;
	padding: 3rem 0;
}
#footerMenu .menu {
	max-width: 72rem;
	margin: 0 auto;
}
#footerMenu .menu li {
	position: relative;
	text-align: center;
}
#footerMenu .menu li:before {
	content: "";
	position: absolute;
	display: block;
	top: 0.5rem;
	right: -3rem;
	width: 0.1rem;
	height: 1.8rem;
	background-color: rgba(256, 256, 256, 0.3);	
}
#footerMenu .menu li:last-child:before {
	display: none;	
}
#footerMenu .menu li a {
	color: #fff;
	font-size: 1.8rem;
	line-height: 2.4rem;
}

/****** footerInfo CSS *******/
#footerInfo {
	background-color: #1c1b1b;
	padding: 8rem 0;
}
#footerInfo .inner3 {
	text-align: center;	
}
#footerInfo .inner3 .footerLogo {
	display: block;
	margin: 0 auto 2rem auto;
}
#footerInfo .inner3 .footerLogo img {
	margin: 0 auto;	
}
#footerInfo .inner3 p {
	font-family: 'Pretendard-ExtraLight';
	font-weight: 200;
	color: rgba(256, 256, 256, 0.7);
}

@media (max-width: 1699px) {
	body h1 {
		font-size: 5.4rem;
		letter-spacing: -0.3rem;
	}
	body h2 {
		font-size: 3.4rem;
		letter-spacing: -0.18rem;
	}
	body h3 {
		font-size: 2.8rem;
		letter-spacing: -0.15rem;
	}
	body h4 {
		font-size: 2.3rem;
		letter-spacing: -0.1rem;
	}
	body h5 {
		font-size: 2.1rem;
	}
	body h6 {
		font-size: 1.9rem;
	}
	body p,
	body li,
	body dt,
	body a,
	body th,
	body td  {
		font-size: 1.6rem;
	}
	.inner1,
	.inner2,
	.inner3 {
		padding: 0 2rem;
	}
	#hdTop .inner1 {
		height: 13.2rem;
		padding: 3rem 0;
	}
	.logo {
		padding: 0 2rem;
		width: 21rem;
		height: auto;
	}
	.logo img {
		width: 100%;	
	}
	nav {
		width: auto;
		margin-right: 2rem;
	}
	nav .gnb > li > a {
		font-size: 2.2rem;
		height: 7.2rem;
		padding: 0 3rem;
	}
	#slide .swiper-slide .inner1 h1 {
		font-size: 5.8rem;
	}
	#slide .mainSlide .slideCon {
		right: -6rem;
		margin-right: 0;
	}
	.diagnosis {
		border-radius: 7rem;
	}
	.diagnosis .start {
		width: 48rem;
	}
	.diagnosis .start .div .ui.button.blue {
		display: block;
		width: 27rem;
		padding: 2rem;
		font-size: 2rem;
		margin: 2rem auto 0 auto;
		border-radius: 2.5rem;
	}
	.diagnosis .result {
		width: calc(100% - 48rem);
		padding-top: 3rem;
		border-radius: 7rem 0 0 7rem;
	}
	.diagnosis .result img {
		width: calc(100% - 10rem);	
	}
	#subject,
	#greyBg,
	#importance,
	#howTo {
		padding: 8rem 0;
	}
	#footerInfo {
		padding: 6rem 0;
	}
	.numTit.one {
		margin-bottom: 14rem;
	}
	.numTit:before {
		font-size: 15rem;
	}
	.numTit .txt {
		top: 8.4rem;
	}
	.developer.swiper {
		width: 67rem;
	}
	.memSlide {
		right: 4rem;
		width: 39rem;
		height: 39rem;
	}
	.memSlide img {
		width: 100%;	
	}
	.importanceWrap, .howToWrap {
		margin-top: 4rem;
		padding: 0 4rem;
	}
	.importanceWrap .item {
		width: 32rem;
		height: 43rem;;
		border-radius: 7rem;
	}
	.howToWrap .item {
		width: 33rem;
		height: 33rem;
	}
	.howToWrap .item h1,
	.howToWrap .item h3 {
		line-height: 130%;	
	}
	.howToWrap .item h1 .txt {
		font-size: 2.4rem;
		padding-top: 3rem;
	}
	#footerInfo .inner3 .footerLogo img {
		width: 21rem;	
	}

}
@media (max-width: 1299px) {
	h1, h2, h3, h4, h5, h6 {
		line-height: 140%;
	}
	body h1,
	#slide .swiper-slide .inner1 h1 {
		font-size: 4.4rem;
		letter-spacing: -0.2rem;
	}
	body h2 {
		font-size: 3rem;
		letter-spacing: -0.1rem;
	}
	body h3 {
		font-size: 2.7rem;
		letter-spacing: -0.1rem;
	}
	body h4 {
		font-size: 2.2rem;
		letter-spacing: 0rem;
	}
	body h5 {
		font-size: 2rem;
	}
	body h6 {
		font-size: 1.8rem;
	}
	body p,
	body li,
	body dt,
	body a,
	body th,
	body td  {
		font-size: 1.5rem;
	}
	.bigP {
		font-size: 1.7rem;
	}
	nav .gnb > li > a {
        font-size: 2rem;
    }
	#slide .swiper-slide .inner1 h4 {
		margin-top: 1rem;
		font-size: 1.65rem;	
	}
	
	#subject,
	#greyBg,
	#importance,
	#howTo {
		padding: 6rem 0;
	}
	#footerInfo {
		padding: 4rem 0;
	}
	.titWrap {
		margin-bottom: 4rem;
	}
	.diagnosis {
		border-radius: 5rem;
	}
	.diagnosis .start {
		width: 40rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.diagnosis .start .div img {
		width: calc(100% - 15rem);
		display: block;
		margin: 0 auto;
	}
	.diagnosis .start .div .ui.button.blue {
		width: 24rem;
		padding: 1.5rem;
		font-size: 1.8rem;
		margin: 2rem auto 0 auto;
		border-radius: 2.5rem;
	}
	.diagnosis .result {
		width: calc(100% - 40rem);
		padding-top: 2rem;
		border-radius: 5rem 0 0 5rem;
	}
	.numTit.one {
		margin-bottom: 10rem;
	}
	.numTit:before {
		font-size: 13rem;
	}
	.numTit .txt {
		top: 8rem;
	}
	.developer.swiper {
		width: 58rem;
	}
	.memSlide {
		right: 4rem;
		width: 32rem;
		height: 32rem;
	}

	.importanceWrap, .howToWrap {
        margin-top: 0rem;
        padding: 0 2rem;
    }
	.importanceWrap .item {
        width: 28rem;
        height: 36rem;
        border-radius: 5rem;
		background-size: 100%;
    }
	.howToWrap .item {
        width: 30rem;
        height: 30rem;
    }
	#footerMenu .menu {
		max-width: 54rem;
	}
	#footerMenu .menu li a {
		font-size: 1.6rem;
		line-height: 2.2rem;
	}
	#footerMenu .menu li:before {
		right: -2rem;
		height: 1.6rem;
	}
	 #footerInfo .inner3 .footerLogo img {
        width: 19rem;
    }
}
@media (max-width: 1023px) {
	body h1,
	#slide .swiper-slide .inner1 h1 {
		font-size: 3.6rem;
		letter-spacing: -0.1rem;
	}
	body h2 {
		font-size: 2.8rem;
		letter-spacing: -0.1rem;
	}
	body h3 {
		font-size: 2.4rem;
		letter-spacing: 0rem;
	}
	body h4 {
		font-size: 2.1rem;
	}
	body h5 {
		font-size: 1.9rem;
	}
	body h6 {
		font-size: 1.7rem;
	}
	body p,
	body li,
	body dt,
	body a,
	body th,
	body td  {
		font-size: 1.4rem;
	}
	.bigP {
		font-size: 1.6rem;
	}
	
	#hdTop .inner1 {
        height: 8.9rem;
        padding: 2rem 0;
    }
	.logo {
        padding: 0 2rem;
        width: 18rem;
    }
	 nav .gnb > li > a {
        font-size:1.8rem;
        height: 5.9rem;
        padding: 0 2rem;
    }
	nav .gnb > li > a:after {
		bottom: -1rem;
		height: 0.3rem;
	}
	#slide .swiper-slide .inner1 h4 {
        margin-top: 1rem;
        font-size: 1.2rem;
    }
	
	#subject,
	#greyBg,
	#importance,
	#howTo {
		padding: 4rem 0;
	}
	#footerInfo {
		padding: 3rem 0;
	}
	.titWrap {
		margin-bottom: 3rem;
	}
	
	.diagnosis {
		border-radius: 3rem;
	}
	.diagnosis .start {
		width: 30rem;
	}
	.diagnosis .start .div img {
		width: calc(100% - 12rem);
		display: block;
		margin: 0 auto;
	}
	.diagnosis .start .div .ui.button.blue {
		width: 18rem;
		padding: 1.2rem;
		font-size: 1.5rem;
		margin: 2rem auto 0 auto;
		border-radius: 2rem;
	}
	.diagnosis .result {
		width: calc(100% - 30rem);
		padding-top: 2rem;
		border-radius: 5rem 0 0 5rem;
	}
	.diagnosis .result img {
		width: calc(100% - 6rem);
		display: block;
		margin: 0 auto;
	}
	
	.numTit.one {
		margin-bottom: 2rem;
	}
	.numTit:before {
		font-size: 9rem;
	}
	.numTit .txt {
		top: 5rem;
	}
	.developer.swiper {
		width: 47rem;
	}
	.memSlide {
		right: 2rem;
		width: 22rem;
		height: 22rem;
	}
	.developer.swiper .swiper-slide.swiper-slide-thumb-active:before {
		width: 0.6rem;
		height: 0.6rem;
	}
	.developer.swiper .swiper-slide h5 {
		padding: 1.5rem 0;
		margin-bottom: 1.5rem;
	}
	.numTit.two h2 + p, .numTit.three h2 + p {
		width: 100%;
		margin-left: 0rem;
	}
	.numTit.one h2 + p {
		margin-top: 0.5rem;
	}
	.importanceWrap {
        padding: 0;
    }
	.importanceWrap .item {
        width: calc((100% / 3) - 1.5rem);
		height: auto;
		aspect-ratio: 1 / 1.2;
        border-radius: 3rem;
	}
	.howToWrap {
		padding: 0 3rem;
	}
	.howToWrap .item {
		width: calc((100% / 3) - 1.5rem);
		height: auto;
		aspect-ratio: 1 / 1;
	}
}
@media (max-width: 767px) {
	body h1,
	#slide .swiper-slide .inner1 h1 {
		font-size: 2.7rem;
		letter-spacing: -0.1rem;
	}
	body h2 {
		font-size: 2.2rem;
		letter-spacing: 0rem;
	}
	body h3 {
		font-size: 2rem;
		letter-spacing: 0rem;
	}
	body h4 {
		font-size: 1.9rem;
	}
	body h5 {
		font-size: 1.7rem;
	}
	body h6 {
		font-size: 1.5rem;
	}
	body p,
	body li,
	body dt,
	body a,
	body th,
	body td  {
		font-size: 1.3rem;
	}
	.bigP {
		font-size: 1.4rem;
	}
	
	header {
		position: relative;
	}
	#hdTop .inner1 {
		height: auto;
		padding: 2rem 2rem 0 2rem;
    }
	.logo {
        padding: 0;
        width: 12rem;
    }
	nav {
		margin-top: 1rem;
        width: 100%;
        margin-right: 0rem;
		padding: 1rem 0;
		border-top: 0.1rem solid rgba(0, 0, 0, 0.15);
    }
	nav .gnb.clearfix {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	nav .gnb > li > a {
        font-size: 1.5rem;
        height: 3.6rem;
        padding: 0 0.5rem;
    }
	
	#slide .mainSlide .slideCon {
		left: 6.5rem;
		top: 12rem;
		right: auto;
        margin: 0;
		width: 11rem;
		background-color: #f60;
	}
	#slide .mainSlide .swiper-button-prev,
	#slide .mainSlide .swiper-button-next {
		width: 4rem;
		height: 4rem;
	}
	#slide .swiper-slide .inner1 h1 br {
		display: none;	
	}
	#slide .swiper-slide .inner1 {
		display: flex	;
		align-items: flex-start;
		padding-top: 2rem;
	}
	#slide .swiper-slide .img img {
		min-width: 68rem;
	}
	#slide .swiper-slide .inner1 h4 {
        margin-top: 0rem;
        font-size: 1.2rem;
    }
	
	#subject,
	#greyBg,
	#importance,
	#howTo {
		padding: 3rem 0;
	}
	#footerInfo {
		padding: 2rem 0;
	}
	
	.diagnosis {
		border-radius: 2rem;
	}
	.diagnosis .start {
		width: 100%;
		padding: 3rem;
	}
	.diagnosis .start .div .ui.button.blue {
		width: 16rem;
		padding: 1.2rem;
		font-size: 1.3rem;
	}
	.diagnosis .result {
		width: 100%;
		padding-top: 2rem;
		border-radius: 5rem 5rem 0 0;
	}
	.diagnosis .result img,
	.diagnosis .start img {
		width: calc(100% - 3rem);
		display: block;
		margin: 0 auto;
	}
	#greyBg .inner2 {
		display: grid;	
	}
	.numTit.one {
        margin-bottom: 2rem;
		order: 1;
    }
	.numTit:before {
        font-size: 8rem;
    }
	
	.numTit {
		padding-top: 12rem;
		padding-left: 0.3rem;
	}
	.developer.swiper {
        width: 100%;
		padding-left: 0rem;
		order: 3;
    }
	.memSlide {
		position: relative;
        right: 0rem;
        width: 27rem;
        height: 27rem;
		margin: 2rem auto;
		order: 2;
    }
	.numTit.one h2 + p,
	.developer.swiper .swiper-slide p,
	.numTit.two h2 + p,
	.numTit.three h2 + p,
	.importanceWrap .item h5.eng,
	#footerInfo .inner3 p {
		line-height: 130%;	
	}
	.importanceWrap {
		margin-top: 2rem;
    }
	.importanceWrap .item {
        width: calc((100% / 3) - 0.3rem);
        height: auto;
        aspect-ratio: 1 / 1.2;
        border-radius: 0.8rem;
    }
	.numTit.three {
        padding-top: 15rem;
    }
	.importanceWrap .item h3 {
		font-size: 1.7rem;	
	}
	.importanceWrap .item h5 {
		font-size: 1.2rem;
		letter-spacing: 0;	
	}
	.howToWrap {
        padding: 0;
    }
	.howToWrap .item {
        width: 12rem;
		margin: 0.2rem;
    }
	.howToWrap .item h3 {
		font-size: 1.5rem;	
	}
	.howToWrap .item h1 {
		font-size: 2.3rem;	
	}
	.howToWrap .item h1 .txt {
        font-size: 1.3rem;
        padding-top: 1.2rem;
    }
	#footerMenu .menu li a {
        font-size: 1.4rem;
        line-height: 2rem;
    }
	#footerMenu .menu li:before,
	#footerMenu .menu li:nth-child(2) {
		display: none;	
	}
	#footerInfo .inner3 .footerLogo {
    	margin: 0 auto 1rem auto;
	}
	#footerInfo .inner3 .footerLogo img {
        width: 16rem;
    }
	#footerInfo .inner3 p + p {
		margin-top: 0.8rem;	
	}
	#footerMenu {
		padding: 2rem 0;	
	}
}
@media (max-width: 550px) {
	#slide .swiper-slide .img img {
		margin-left: -8rem;
	}
}

/*********** 애니메이션 ***********/
@keyframes Fadein {
  0% {
    transform:translateY(1rem);
	-moz-transform:translateY(1rem);
	-webkit-transform:translateY(1rem);
	-o-transform:translateY(1rem);
	-ms-transform:translateY(1rem);
	opacity:0;
  }
  100% {
    transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
	opacity:1;
  }
}
@keyframes smFadein {
  0% {
    transform:translateY(10rem);
	-moz-transform:translateY(10rem);
	-webkit-transform:translateY(10rem);
	-o-transform:translateY(10rem);
	-ms-transform:translateY(10rem);
	opacity:0;
  }
  100% {
    transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
	opacity:1;
  }
}
@keyframes BigFadein {
  0% {
    transform:translateY(20rem);
	-moz-transform:translateY(20rem);
	-webkit-transform:translateY(20rem);
	-o-transform:translateY(20rem);
	-ms-transform:translateY(20rem);
	opacity:0;
  }
  100% {
    transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
	opacity:1;
  }
}

@keyframes smFadeDown {
  0% {
    transform:translateY(-10rem);
	-moz-transform:translateY(-10rem);
	-webkit-transform:translateY(-10rem);
	-o-transform:translateY(-10rem);
	-ms-transform:translateY(-10rem);
	opacity:0;
  }
  100% {
    transform:translateY(0);
	-moz-transform:translateY(0);
	-webkit-transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
	opacity:1;
  }
}
@keyframes imgloading {
	0% {
	  	transition: transform 3s ease-in-out, opacity 3s ease-in-out;
		transform: scale(1.2) rotate(0.003deg);
		opacity: .7;
	}
	100% {
		transform: scale(1) rotate(0.003deg);
		opacity: 1;
	}
}