﻿/* 메인 컨테이너 */
/* #wrap {opacity:0; transition: opacity 1.25s ease-in-out;}
#wrap.fade-in {opacity: 1;} */
#container { position:relative; width:100%;}
.container { flex-wrap: wrap; max-width: 82rem; padding: 0 1rem;}

/* wrap */
.MC_wrap1 { position: relative; margin-top: 2.5rem; }
.MC_wrap3 { position: relative; margin: 3.5rem 0;}

.MC_wrap1 .container { display: flex; justify-content: space-between; }
.MC_wrap2 .container { display: flex; justify-content: space-between; }
.MC_wrap3 .container { display: flex; justify-content: space-between; position: relative; row-gap: 3.6rem;}
.MC_wrap3 .container::before { content: ""; width: 150%; height: calc(100% + 8rem); background: #f7f7f7; border-radius: 2.5rem 0 0; position: absolute; top: -3.25rem; left: -3rem; }

.conWrap { display: flex; flex-direction: column; justify-content: space-between; }
.MC_wrap1 .conWrap.left { width: calc(100% - 27rem); padding-right: 2.5rem; }
.MC_wrap1 .conWrap.right { width: 27rem; }
.MC_wrap3 .conWrap { width: calc(100% - 21.5rem); padding-right: 3rem; }

.MC_box1 { position: relative; width: 100%; height: auto; } /* 메인비주얼 */
.MC_box2 { position: relative; width: 100%; height: 13.5rem; } /* 바로가기 */
.MC_box3 { position: relative; width: 100%; } /* 서비스 */
.MC_box4 { position: relative; width: 100%; margin-top: 3.7rem; } /* 부서별 안내전화 */
.MC_box5 { position: relative; width: 100%; margin: 3.5rem 0; } /* 요양병원 방문이 처음이신가요? */
.MC_box6 { position: relative; width: 100%; margin-bottom: 3rem;} /* 의료진 소개 */
.MC_box7 { position: relative; width: 100%; height: 12.5rem; } /* 공지사항 A */
.MC_box8 { position: relative; width: 100%; height: 8rem; } /* 공지사항 B */
.MC_box9 { position: relative; width: 100%; } /* 자주하는 질문 */
.MC_box10 { position: relative; width: 21.5rem; height: 13.5rem; } /* 공지사항 B */

/* 애니메이션 */
@media screen and (min-width: 1921px) {
	.active .introduce .titWrap { transition-delay: 0.9s !important; }	
	.active #indroduceSlider { transition-delay: 1.1s !important; }	
}

/****** 반응형 *******/

@media screen and (max-width: 1640px) {
	.MC_box1 { height: auto; }
	.MC_box3 { margin-top: 2rem; }

	.MC_wrap3 .container::before { left: 0rem; }
}

@media screen and (max-width: 1540px) {
	.MC_wrap1 .container { flex-wrap: wrap; }

	.MC_wrap1 .conWrap.left { width: calc(100% - 18rem); padding: 0; flex-direction: row; order: 1; }
	.MC_wrap1 .conWrap.right { width: 100%; margin-top: 2rem; order: 3; }

	.MC_box1 { width: 100%; padding-right: 2rem; }
	.MC_box2 { height: auto; }
	.MC_box3 { height: auto; margin-top: 2rem; }
	.MC_box4 { width: 18rem; margin-top: 0; order: 2;}
}

@media screen and (max-width: 1440px) {
	.MC_wrap3 .conWrap { padding-right: 2rem; }
}

@media screen and (max-width: 1240px) {
	.MC_wrap3 { margin: 2rem 0 2.5rem; }

	.MC_box5 { margin: 1.25rem 0 2rem; }
	.MC_box8 { height: auto; }
}

@media screen and (max-width: 1150px) {
	.MC_wrap1 { margin-top: 1.5rem; }
	.MC_wrap1 .conWrap.left { width: 100%; flex-direction: column; }
	.MC_wrap1 .conWrap.right { margin-top: 1.5rem; }

	.MC_box1 { width: 100%; padding-right: 0; }
	.MC_box4 { width: 100%; margin-top: 1rem; }

	.MC_box7 { height: auto; }
}


@media screen and (max-width: 1024px) {
	/* header */
	#header {border-bottom:1px solid #ddd;}
}

@media screen and (max-width: 968px) {
	.MC_box6 { margin-bottom: 1.5rem; }
	.MC_box9 { margin-top: 2rem; }
	.MC_wrap3 .conWrap,
	.MC_box10 { width: 100%; padding: 0; }
	.MC_box10 { height: auto; }

	.MC_wrap3 .container { row-gap: 2rem; }
	.MC_wrap3 .container::before { border-radius: 1.5rem 0 0; top: -1rem; }
}

@media screen and (max-width: 480px) {
	.MC_box9 { margin-top: 1.5rem; } 
}

@media screen and (max-width: 380px) {
	.container { padding: 0 0.75rem; }

	.MC_wrap1 { margin-top: 0.75rem; }
	.MC_wrap1 .conWrap.right { margin-top: 1rem; }
	.MC_wrap3 { margin: 1rem 0 1.5rem; }

	.MC_box3  { margin-top: 1rem; }
	.MC_box4 { margin-top: 0.5rem; }
	.MC_box5 { margin: 1rem 0; }
	.MC_box9 { margin-top: 0.75rem; }
	.MC_box10 { margin-top: 1.25rem; }

	.MC_wrap3 .container { row-gap: 1rem; }
}