@charset "utf-8";

/* skip 
=============================================================== */
.skip_nav { 
	& a { 
		position: absolute; 
		top: -30px; left: 0; 
		width: 100%; height: 30px; 
		background: #000; 
		font-size: 1.2rem; text-align: center; line-height: 30px; color: #fff; 
		padding: 0 6px; z-index: 99;
		&:focus,
		&:active { border: 0; top: 0; }
	}
}

/* Header 
=============================================================== */
.wrap { 
	position: relative; 
	min-height: 100%; 
	.header_top {
		/* top_로그인 */
		width: 100%; height: 40px;
		background: #ededed;
		> .inner {
			display: -webkit-box; display: -ms-flexbox; display: flex;
			height: inherit;
			align-items: center;
			justify-content: flex-end;
			> .item {
				padding: 4px 10px;
				text-align: center;
				border-radius: 4px;
				&:hover {
					color: var(--hl-white);
					background-color: var(--hl-primary-70);
					border-color: var(--hl-primary-70);
				}
				&:active {
					color: var(--hl-white);
					background-color: var(--hl-primary-80);
					border-color: var(--hl-primary-80);
				}
				&:focus {
					color: var(--hl-white);
					outline-offset: -0.4rem;
					background-color: var(--hl-primary-80);
					outline: 2px solid rgba(255, 255, 255, 0.9);
				}
				&:not(:last-child) { margin-right: 10px; }
			}
		}
		@media screen and (max-width:1024px) {
			display: none;
		}
	}
	
	.header { 
		position: relative; 
		width: 100%; 
		margin:0 auto; 
		z-index: 10; 
		.gnb_body { 
			background: #fff; 
			border-bottom: 1px solid #d9e3ef; 
			.gnb_top { 
				height: 80px; 
				display: -webkit-box; display: -ms-flexbox; display: flex; 
				-webkit-box-align: center; -ms-flex-align: center; align-items: center; 

				/* 로고 */
				.flex_left { 
					width: 20%;
					.logo {
						> a { 
							display: block;
							height: 80px; 
							padding: 12px;
							> img { 
								width: 172px; height: 50px;
							}
						}
					}
					.logo_dt {
						> a { 
							display: block;
							height: 80px; 
							padding: 12px;
							> img { 
								width: 191px; height: 50px;
							}
						}
					}
				}

				/* Header - 메인 메뉴 */
				.flex_right { 
					width: 80%;
					display: -webkit-box; display: -ms-flexbox; display: flex; 
					-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
					-webkit-box-align: center; -ms-flex-align: center; align-items: center;

					.gnb { 
						width: 100%; height: inherit;  
						margin: 0 auto; 
					
						> ul { 
							display: -webkit-box; display: -ms-flexbox; display: flex; 
							-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; 
							-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; 
					
							> li {
								position: relative; 
								width: calc(100%/4); text-align: center; 
								transition: all 0.3s;
								> a {
									display: inline-flex; width: 100%; height: 80px;
									align-items: center;
									justify-content: center;
									font-size:2.0rem; font-weight:600;
									
									&::after {
										position: absolute;
										content: '';
										display: block;
										bottom: 0; left: 50%;
										width: 10px; height: 4px;
										opacity: 0; z-index: -1px;
										background: var(--hl-primary);
										transition: all 0.3s;
									}
									&:hover { 
										color: var(--hl-primary); 
										&::after {
											opacity: 1;
											left: 0;
											width: 100%;
										}
									}
									> span {
										display: block; 
										color: var(--hl-gray-70); 
										transition: all 0.3s;
										border-right: 1px solid rgba(221,221,221,0.5); 
										&:hover { 
											color: var(--hl-primary);
										}
									}
								}
							}
							> li:last-child {
								> a {
									> span { border-right: 0 none; }
								}
							}
						}
					}
				}

				@media screen and (max-width:1024px) {
					display: none;
				}
			}
		}
	}

	.inner { 
		width: 1280px; 
		margin: 0 auto;
		@media screen and (max-width:1280px) {
			width: 100%;
			padding: 0 20px;
		}
		@media screen and (max-width:500px) {
			padding: 0 14px;
		}
	}
}

/* Header - 서브메뉴 배경 
=============================================================== */
.gnb_view_div { 
	display: none; position: absolute; 
	top: 81px; right: 0; width: 100%; height: 320px; 
	background: #fff; 
	-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.2); 
	box-shadow: 0 10px 10px rgba(0,0,0,0.2); 
	z-index: 9; 
	&.kn { height: 150px; }
}
.gnb_view { 
	position: absolute; margin-top: 1px;
	left: 0; width: 100%; height: 320px; 
	z-index: 10; 
	background: #fff;
	&.kn { height: 150px; }
	&:hover { 
		background: var(--hl-gray-10); 
		/* border-top: 2px solid var(--hl-primary);  */
	}

	> ul {
		width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; 
		-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;

		> li {
			width: 100%; text-align: center;
			> a {
				display: block; padding: 8px 10px; transition: all 0.1s;
				&:hover {
					background: var(--hl-primary); color: #fff;
				}
			}
		}
	}
}			

/* Header - 모바일 메뉴
=============================================================== */
.menu,
.sidr { display: none; 
	@media screen and (max-width:1024px) {
		display: block;
	}
}
.bg_cover { position: fixed; top: 0; right: 0; width: 100%; height: 100%; visibility: hidden; background: rgba(0, 0, 0, 0.8); opacity: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; z-index: 100; }
.bg_cover.active { opacity: 1; right: 320px; visibility: visible; }
.gnb_mo { 
	display: none; 

	@media screen and (max-width:1024px) {
		display: block; position: fixed; top: 0; left: 0; width: 100%; background: #fff; height: 66px; 
		-moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
		box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);

		.logo a { display: inline-block; padding: 12px 15px; }
		.logo a img { width: 144px; height: 42px; }
		.logo_dt a { display: inline-block; padding: 12px 15px; }
		.logo_dt a img { width: 160px; height: 42px; }
		.menu { display: block; position: absolute; right: 0; top: 0; }
		.menu .side_top { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 50px; }
		.menu .side_top > li { width: 48%; }
		.menu .side_top .side_btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 10px; text-align: center; gap: 20px; background: #f3f4fc; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
		.menu .side_top .side_btn:active,
		.menu .side_top .side_btn:focus { background: var(--hl-point); color: #fff; box-shadow: none; outline: 2px solid var(--hl-white);}
		.menu .side_top .timer { padding: 4px 10px; border-radius: 4px; background: var(--hl-gray-30); }
		.menu .side_top .timer:active { color: #333; background: var(--hl-gray-40); }
		
		.menu .side_login > li { width: 100%; }
		.menu .side_top > li > .side_btn_01 { display: inline-flex; justify-content: center; width: 100%; padding: 10px; text-align: center; background: var(--hl-secondary-10); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
		.menu .side_top > li > .side_btn_01:active,
		.menu .side_top > li > .side_btn_01:focus { background: var(--hl-secondary); color: #fff; box-shadow: none; outline: 2px solid var(--hl-white);}
		
		.menu .right_menu { display: inline-block; cursor:pointer; }
		.menu .right_menu:active { background: #f0f0f0; }
		.menu .menu_btn { display: block; padding: 20px; background:url('../img/mobile_menu.png') center center no-repeat; color:transparent; text-overflow: ellipsis; }
		.menu .close_btn { position: absolute; display: inline-block; right: 10px; top: 5px; padding: 10px; }
		.menu .close_btn img { display: inline-block; }
		.menu .sidr { display: block; position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; overflow: auto; padding: 10px 20px; background: #fff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; z-index: 999; }
		.menu .sidr.active { right: 0; }
		.menu .sidr .side_menu:first-of-type { margin-top: 20px; }
		.menu .sidr .side_title { position: relative; display: block; padding: 15px 10px; border-bottom: 1px solid var(--hl-point-10); font-size: 1.8rem; }
		.menu .sidr .side_title.no::before { display: none; }
		.menu .sidr .side_title::before { position: absolute; content: '+'; top: 0; right: 10px; margin-top: 12px; font-size: 26px; color: var(--hl-point); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
		.menu .sidr .side_title.active::before { transform: rotate(-135deg); }
		.menu .sidr .side_list { display: none; }
		.menu .sidr .side_list > li { line-height: 2.0; }
		.menu .sidr .side_list > li a { display: block; width: 100%; margin-top: 5px; padding: 5px 5px 5px 10px; border-radius: 10px; }
		.menu .sidr .side_list > li:hover a,
		.menu .sidr .side_list > li:active a { background: var(--hl-point); color: #fff; }
	}
}

/* visual
=============================================================== */
.main_visual {
	width: 100%; /* height:340px; */
	background: linear-gradient(90deg, #DCF5FE 0%, #F0E5F8 100%);

	.visual_flex {
		display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px 0; gap: 20px;
		
		/* 진료협력센터 이용가이드 */
		> .left {
			width: 40%;
			display: -webkit-box; display: -ms-flexbox; display: flex; align-items: stretch;

			> .item_01 {
				width: 60%;
				border-radius: 10px 0 0 10px;
				overflow: hidden;
				> img { 
					width: 100%; 
					height: 100%;
				}
			}
			> .item_02 {
				display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center;
				width: 40%; height: 100%; padding: 10px;
				border-radius: 0 10px 10px 0;
				background: #fff;
				> img { 
					width: 100px; 
					margin-bottom: 40px; 
					transition: all 0.5s;
				}
				> p:nth-of-type(1) { 
					font-size: 2.0rem; color: #5386BF; 
					margin-left: -35px;
				}
				> p:nth-of-type(2) { 
					font-size: 2.4rem; font-weight: 600; line-height: 3.0rem;
					transition: all 0.3s;
				}
				&:hover {
					background: #ebfaff;
					> img {
						-webkit-filter: drop-shadow(2px 10px 10px rgba(37, 45, 66, 0.3)); 
						filter: drop-shadow(2px 10px 10px rgba(37, 45, 66, 0.3));
					}
					> p:nth-of-type(2) { margin-top: 10px; }
				}
			}
		}
		> .right { width: 60%;
			/* 이용안내 */
			> .item_01 {
				display: -webkit-box; display: -ms-flexbox; display: flex; align-items: flex-start; gap: 20px ;
				margin-bottom: 20px;
				> p { font-size: 3.4rem; line-height: 1.0; font-weight: 700; color: #5386BF; }
				> .hotline { 
					color: #fff; 
					padding: 4px 20px; 
					border-radius: 50px;  
					background: var(--hl-point); 
					&:hover, &:active {
						color: var(--hl-white);
						background-color: var(--hl-point-80);
						border-color: var(--hl-point-80);
					}
					&:focus {
						color: var(--hl-white);
						outline-offset: -0.4rem;
						outline: 2px solid rgba(255, 255, 255, 0.9);
					}
				}
			}
			> .item_02 {
				margin-bottom: 20px;
				> p { 
					display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; gap: 20px; 
					font-size: 3.4rem;
					&.cc { 
						font-size: 3.0rem; 
						> b > br { display: none; }
					} 
					> img { width: 30px; height: 30px; }
				}
			}
			> .item_04 {
				display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px;
				> a {
					display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; gap: 20px;
					height: 80px;
					min-width: 240px;
					font-weight: 500; text-align: left;
					padding: 0 20px;
					border-radius: 10px;
					background: #fff;
					&:hover  { 
						color: #fff;
						background: var(--hl-point); 
					}
					&:focus,
					&:active { 
						color: inherit; 
						background: var(--hl-white); 
					}
				}

				@media screen and (max-width: 1024px) {
					display: none;
				}
			}
			> .item_05_kn { 
				margin-bottom: 20px; word-break: keep-all;
				> li > p { 
					display: flex; align-items: center; 
					font-size: 2.2rem; margin-right: 10px; 
					img { margin-right: 10px; }
					br { display: none; }
				}
				.tit { font-size: 2.0rem; color: #5386BF; font-weight: bold; }
			}
		}
	}

	@media screen and (max-width: 1024px) {
		margin-top: 64px; height: auto;

		.visual_flex {
			align-items: flex-start;
			> .left {
				width: 30%;
				> .item_01 { 
					width: 100%;
					border-radius: 10px; 
					> img { width: 100%; }
				}
				> .item_02 { display: none; }
			}
			> .right {
				width: 70%;
				> .item_01 { flex-direction: column; }
				> .item_03 { display: none; }
			}
		}
	}
	@media screen and (max-width: 800px) {
		.visual_flex > .right {
			> .item_01 {
				> .hotline { display: none; }
			}
			> .item_02 {
				margin-bottom: 0;
				> p { 
					font-size: 2.4rem; 
					&.cc { 
						font-size: 2.4rem; 
						> b > br { display: block; }
					}
				}
			}
		}
	}
	@media screen and (max-width: 600px) {
		.visual_flex > .left { width: 230px; }
		.visual_flex > .right {
			> .item_01 > p { font-size: 2.6rem; }
			> .item_02 > p { 
				line-height: 1.3; 
				font-size: 1.8rem;
				margin-bottom: 10px;
				&.cc { font-size: 1.8rem; }
			}
		}
		/* 강남 */
		.visual_flex.kn { flex-direction: column; align-items: center; 
			> .right {
				width: 100%;
				> .item_05_kn {
					margin-bottom: 0;
					.tit { font-size: 1.8rem; }
					> li > p { font-size: 1.8rem; margin-bottom: 5px; }
				}
			}
		}
	}
	@media screen and (max-width: 400px) {
		.visual_flex { 
			flex-direction: column;
			> .left { margin: 0 auto; }
			> .right { width: 100%; }
		}
	}
	@media screen and (max-width: 360px) {
		.visual_flex.kn > .right > .item_05_kn {
			.tit { font-size: 1.6rem; }
			> li > p { font-size: 1.4rem; }
		}
	}
}

/* 진료의뢰조회 - 한림
=============================================================== */
.main_area_01 {
	> .flex {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		gap: 20px;
		padding: 20px 0;
		> div {
			padding: 20px;
			border-radius: 10px;
		}
		> .left {
			/* 진료의뢰 조회 */
			width: 40%;
			background: #EBF5F8;
			> .tab_menu { font-size: 2.4rem; font-weight: 700; margin-bottom: 20px; }
			> .flex_icon {
				display: -webkit-box; display: -ms-flexbox; display: flex;
				> a { 
					width: calc(100%/2);
					display: inline-flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 10px 0;
					&:hover {
						margin-top: -10px;
						filter: drop-shadow(2px 10px 10px rgba(104, 139, 139, 0.4));
					}
					> p:nth-of-type(1) { 
						display: inline-flex;
                        justify-content: center;
                        align-items: center;
						width: 100px; 
						height: 100px; 
						margin-bottom: 10px; 
						border-radius: 10px;
						background: #fff; 
						> img { width: 60px; height: auto; } 
					}
				}
			}
		}

		> .right {
			/* 언론보도 */
			width: 60%;
			background: #F1F5FF;

			> .tab_menu {
				font-size: 2.4rem;
				font-weight: 700;
			}	
			> .tab_cont {
				position: relative;
				width: 100%;
				margin-top: 20px;
			
				> .list > a {
					display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center;
					padding: 6px 10px 6px 0;
					.badge {
						font-size: 1.4rem;
						margin-right: 5px;
						border-radius: 4px;
						padding: 4px 10px;
						flex-shrink: 0;
						background: #d4e0ff;
					}
					.title {
						margin-right: 6px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						&:hover, 
						&:active {
							text-decoration: underline;
						}
					}
				}
				> .btn_more {
					position: absolute;
					top: -60px;
					right: -10px;
					padding: 10px;
					border-radius: 4px;
					&:hover { background: var(--hl-point-20); }
				}
			}
		}

		@media screen and (max-width: 1280px) {
			padding: 20px;
			/* > .left { width: 50%;  height: auto; }
			> .right { width: 50%; height: auto; } */
		}
		@media screen and (max-width: 800px) {
			flex-direction: column;
			> .left { width: 100%; }
			> .right { width: 100%; height: auto;}
		}
		@media screen and (max-width: 400px) {
			> .left {
				height: auto;
				> .flex_icon > a {
					> p:nth-of-type(1){
						width: 70px; height: 70px;
						> img { width: 40px; }
					}
					> p:nth-of-type(2){
						font-size: 1.4rem;
						letter-spacing: -1px;
					}
				}
			}
			> .left > .tab_menu, 
			> .right > .tab_menu { font-size: 2.0rem; } 
		}
	}
}

/* 진료의뢰조회 - 동탄
=============================================================== */
.main_area_01_dt {
	> .flex {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		gap: 20px; padding: 20px 0;
		> .left {
			/* 진료의뢰 조회 */
			padding: 20px; border-radius: 10px;
			width: 50%; background: #EBF5F8;
		}
		> .right {
			/* 병원소식, 행사안내 */
			padding: 20px; border-radius: 10px;
			width: 50%; background: #F1F5FF;
		}
		.tab_menu {
			width: 100%;
			color: #333; font-size: 2.4rem; font-weight: 700;
		}
		.tab_con {
			position: relative;
			width: 100%;
			margin-top: 20px;
			height: 164px;
			> .list > a {
				display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center;
				padding: 6px 10px 6px 0;
				.badge {
					font-size: 1.4rem;
					margin-right: 5px;
					border-radius: 4px;
					padding: 4px 10px;
					flex-shrink: 0;
					background: #d4e0ff;
				}
				.title {
					margin-right: 6px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					&:hover, 
					&:active {
						text-decoration: underline;
					}
				}
			}
			> .btn_more {
				position: absolute;
				top: -65px;
				right: -10px;
				padding: 10px;
				border-radius: 4px;
				&:hover { background: var(--hl-point-20); }
			}
		}
		
		@media screen and (max-width: 1280px) {
			padding: 20px;
		}
		@media screen and (max-width: 860px) {
			flex-direction: column;
			> .left, .right {
				width: 100%;
				.tab_con { height: auto; }
			}
		}
		@media screen and (max-width: 400px) {
			> .left > .tab_menu, 
			> .right > .tab_menu { font-size: 2.0rem; } 
		}
	}
}

/* 진료의뢰조회 - 강남
=============================================================== */
.main_area_01_kn {
	> .flex {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		gap: 20px; padding: 20px 0;
		> .left_kn {
			padding: 20px; border-radius: 10px; width: 20%;
			background: #efebf8;
			> .flex_icon > a {
				display: flex; flex-direction: column; align-items: center;
				margin-top: 15px;
				img { width: 70px; }
			}
		}
		> .left {
			/* 진료의뢰 조회 */
			padding: 20px; border-radius: 10px;
			width: 40%; background: #EBF5F8;
		}
		> .right {
			/* 병원소식, 행사안내 */
			padding: 20px; border-radius: 10px;
			width: 40%; background: #F1F5FF;
		}
		.tab_menu {
			width: 100%;
			color: #333; font-size: 2.4rem; font-weight: 700;
		}
		.tab_con {
			position: relative;
			width: 100%;
			margin-top: 20px;

			> .list > a {
				display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center;
				padding: 6px 10px 6px 0;
				&:hover, 
				&:active {
					text-decoration: underline;
				}
				.badge {
					font-size: 1.4rem;
					margin-right: 5px;
					border-radius: 4px;
					padding: 4px 10px;
					flex-shrink: 0;
					background: #d4e0ff;
				}
				.title {
					margin-right: 6px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			> .btn_more {
				position: absolute;
				top: -65px;
				right: -10px;
				padding: 10px;
				border-radius: 4px;
				&:hover { background: var(--hl-point-20); }
			}
		}
		
		@media screen and (max-width: 1280px) {
			padding: 20px;
		}
		@media screen and (max-width: 860px) {
			flex-wrap: wrap;
			> .left_kn { width: calc(30% - 20px); }
			> .left { width: 70%; }
			> .right { width: 100%; }
			> .left, .right {
				.tab_con { height: auto; }
			}
		}
		@media screen and (max-width: 600px) {
			> .left_kn { 
				width: 100%; 
				> .flex_icon { 
					flex-direction: row;
					display: flex;
					justify-content: space-evenly;
					a { margin-top: 0; }
					a > img { width: 50px; }
				}
			}
			> .left { width: 100%; }
		}
		@media screen and (max-width: 400px) {
			> .left > .tab_menu, 
			> .right > .tab_menu { font-size: 2.0rem; } 
		}
	}
}

/* 진료의뢰조회 - 탭메뉴 형식
=============================================================== */
.main_area_01_tab {
	> .flex {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		gap: 20px; padding: 20px 0;

		> div {
			padding: 20px;
			border-radius: 10px;
		}

		> .left {
			/* 진료의뢰 조회 */
			width: 40%;
			background: #EBF5F8;
			> .tab_menu { font-size: 2.4rem; font-weight: 700; margin-bottom: 20px; }
			> .flex_icon {
				display: -webkit-box; display: -ms-flexbox; display: flex;
				> a { 
					width: calc(100%/3);
					display: inline-flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 10px 0;

					&:hover {
						margin-top: -10px;
						filter: drop-shadow(2px 10px 10px rgba(104, 139, 139, 0.4));
					}

					> p:nth-of-type(1) { 
						display: inline-flex;
                        justify-content: center;
                        align-items: center;
						width: 100px; 
						height: 100px; 
						margin-bottom: 10px; 
						border-radius: 10px;
						background: #fff; 

						> img { width: 60px; height: auto; } 
					}
				}
			}
		}

		> .right {
			/* 병원소식, 행사안내 */
			width: 60%;
			background: #F1F5FF;
			.tab {
				width: 100%; height: 100%;
				> ul {
					position: relative;
					display: -webkit-box; display: -ms-flexbox; display: flex;
					> li {
						color: #bbb;
						&.active {
							width: 100%;
							color: #333;
						}
						> .tab_menu {
							position: absolute;
							font-size: 2.4rem;
							font-weight: 700;
							&.menu_01 { left: 0; }
							&.menu_02 { left: 100px; }
						}	
					}
				}
			
				.tab_cont {
					position: relative;
					width: 100%;
					margin-top: 50px;
					height: 164px;
					> .list > a {
						display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center;
						padding: 6px 10px 6px 0;

						&:hover, 
						&:active {
							text-decoration: underline;
						}

						.badge {
							font-size: 1.4rem;
							margin-right: 5px;
							border-radius: 4px;
							padding: 4px 10px;
							flex-shrink: 0;
							background: #d4e0ff;
						}
						.title {
							margin-right: 10px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					> .btn_more {
						position: absolute;
						top: -65px;
						right: -10px;
						padding: 10px;
						border-radius: 4px;
						&:hover { background: var(--hl-point-20); }
					}
				}
			}
		}

		@media screen and (max-width: 1280px) {
			padding: 20px;
			> .left { width: 50%;  height: auto;}
			> .right { width: 50%; height: auto; }
		}
		@media screen and (max-width: 860px) {
			flex-direction: column;
			> .left { width: 100%; }
			> .right { width: 100%; height: auto; }
		}
		@media screen and (max-width: 400px) {
			> .left {
				height: auto;
				> .flex_icon > a {
					> p:nth-of-type(1){
						width: 70px; height: 70px;
						> img { width: 40px; }
					}
					> p:nth-of-type(2){
						font-size: 1.4rem;
						letter-spacing: -1px;
					}
				}
			}
		}
	}
}

/* 퀵메뉴
=============================================================== */
.main_area_02 {
	> .inner .flex { 
		display: -webkit-box; display: -ms-flexbox; display: flex;
		justify-content: space-between;
		padding: 20px 0 40px 0;
		> .list {
			display: -webkit-box; display: -ms-flexbox; display: flex;
			flex-direction: column;
			align-items: center; word-break: keep-all;
			width: calc(100%/6);
			text-align: center;
			> p:nth-of-type(1) {
				display: -webkit-box; display: -ms-flexbox; display: flex;
				align-items: center;
				justify-content: center;
				width: 100px;
				height: 100px;
				margin-bottom: 14px;
				border-radius: 50%;
				background: #F3EEFF;
				&:hover { transform: rotateY(360deg); transition: all 0.5s; }
				> img { width: 46px; height: 46px; }
			}
		}
	}

	@media screen and (max-width: 860px) {
		> .inner .flex {
			flex-wrap: wrap; gap: 20px;
			> .list {
				width: calc(100%/3 - 15px);
				> p:nth-of-type(1) {
					width: 70px; height: 70px;
					> img { width: 50%; }
				}
			}
		}
	}
	@media screen and (max-width: 600px) {
		> .inner .flex > .list {
			width: calc(100%/3 - 15px);
			> p { font-size: 1.5rem; }
		}
	}
	@media screen and (max-width: 360px) {
		> .inner .flex > .list {
			width: calc(100%/2 - 10px);
		}
	}
}

/* footer
=============================================================== */
.footer_area {
	position: relative;
	width: 100%; height: 110px;
	color: #ddd; font-size: 1.2rem; font-weight: 400;
	padding: 20px 0 20px 0;
	background: #33384B;
	&.hg { height: 130px; }
	> .inner {
		display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between;
		> .left {
			width: 80%;
			.box_01 {
				margin-bottom: 10px;
				> a { 
					font-size: 1.4rem; color: #ddd; 
					margin-right: 20px; padding: 4px; border-radius: 4px;
					&:hover { background: var(--hl-point); }
				}
			}
			.box_02 {
				font-weight: 300;
			}
		}
		> .right {
			display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; gap: 10px;
			padding: 10px;
			> p {
				font-size: 1.4rem; font-weight: 400; line-height: 1.3; color: #ddd; 
			}
		}
	}
	@media screen and (max-width: 860px) {
		height: auto;
		> .inner > .left { 
			width: 100%;
			> .box_01 { display: none; }
		}
		> .inner > .right { display: none; }
	}
}