/*=================================================================================================
// 명    칭 : 메인화면 스타일쉬트
// 처리내용 :
// 작 성 자 : 2013-09-06 강대인
//=================================================================================================*/
@import url("basic.css");

#container { width:100%; }

/*-----------------------------------------------------------------------------
 *  메인비쥬얼영역
 *----------------------------------------------------------------------------*/
.visual_wrap { overflow:hidden; }
.visual_wrap .visual_btn { position:relative; width:1280px; margin:0 auto; }
.visual_wrap .visual_btn  ul { position:absolute; bottom:50px; right:0; display:flex; z-index:999; }
.visual_wrap .visual_btn  ul li { position:relative; width:250px; height:250px; background:#0ba8e7; margin:0 20px 0 0; }
.visual_wrap .visual_btn  ul li:hover { background:#1146b3; transition: all 0.5s ease; }
.visual_wrap .visual_btn  ul li:last-child { margin:0; }
.visual_wrap .visual_btn  ul li a { display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:100%; }
.visual_wrap .visual_btn  ul li a .img { text-align:center; margin:0 0 15px 0; }
.visual_wrap .visual_btn  ul li a .img img { width:auto; }
.visual_wrap .visual_btn  ul li a p { color:#fff; font-size:28px; font-weight:700; }
.visual_wrap .visual_btn  ul li a span { position:absolute; bottom:20px; right:20px; color:#fff; }

.visual_wrap .swiper-button-prev,
.visual_wrap .swiper-button-next { width:50px; height:50px; }

.visual_wrap .swiper-button-prev:after { content:""; width:50px; height:50px; background:url("../img/main/btn_prev.png") no-repeat; }
.visual_wrap .swiper-button-next:after { content:""; width:50px; height:50px; background:url("../img/main/btn_next.png") no-repeat; }


.m_visual_wrap { display:none; }

@media screen and (max-width:1280px){
.visual_wrap .visual_btn { width:100%; margin:none; }
.visual_wrap .visual_btn  ul { bottom:50px; right:200px; }
.visual_wrap .visual_btn  ul li { width:150px; height:150px; }
.visual_wrap .visual_btn  ul li a p { font-size:18px; }
.visual_wrap .visual_btn  ul li a span { bottom:10px; right:10px; }
}

@media screen and (max-width:1200px){
.visual_wrap .visual_btn  ul { bottom:30px; right:150px; }
.visual_wrap .visual_btn  ul li { width:130px; height:130px; }
.visual_wrap .visual_btn  ul li a .img img { width:50%; }
}

@media screen and (max-width:768px){
.visual_wrap { display:none; }
.m_visual_wrap { display:block; overflow:hidden; }
.m_visual_wrap .visual_btn { display:none; }

.m_visual_wrap .swiper-button-prev,
.m_visual_wrap .swiper-button-next { width:50px; height:50px; }

.m_visual_wrap .swiper-button-prev:after { content:""; width:50px; height:50px; background:url("../img/main/btn_prev.png") no-repeat; }
.m_visual_wrap .swiper-button-next:after { content:""; width:50px; height:50px; background:url("../img/main/btn_next.png") no-repeat; }

}

/*-----------------------------------------------------------------------------
 *  메인 빠른서비스
 *----------------------------------------------------------------------------*/
.quick_service { position:relative; padding:150px 0 200px 0; }
.quick_service::before { content:""; position:absolute; bottom:0; left:0; width:100%; height:400px; background:#f4f7f9; }
.quick_service .main_inner { width:1280px; margin:0 auto; }
.quick_service .title { margin:0 0 50px 0; }
.quick_service .title p { font-size:100px; font-weight:900; color:#f1f3f8; line-height:100px; margin:0 0 -35px 0; }
.quick_service .title h2 { font-size:50px; font-weight:700; }
.quick_service .title .highlight { color:#009fe3; }
.quick_service .grid { display:flex; justify-content:space-between; }
.quick_service .grid .card { text-align:center; position:relative; overflow:hidden; width:400px; transition:transform 0.3s ease-in-out; }
.quick_service .grid .card::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(0deg, rgba(145,157,183,0.7) 0%, rgba(77,231,255,0.7) 100%); opacity:0; transition:opacity 0.3s ease-in-out; }
.quick_service .grid .card:hover::after { opacity:1; transition:transform 0.3s ease-in-out; }
.quick_service .grid .card:hover { transform:scale(1.05); box-shadow:0 4px 6px rgba(0, 0, 0, 0.3); transition:transform 0.3s ease-in-out; }
.quick_service .grid .card .bg_img { display:flex; width:100%; }
.quick_service .grid .card .bg_img img { width:100%; transition:transform 0.3s ease-in-out; }
.quick_service .grid .card .quick_con { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:999;}
.quick_service .grid .card .quick_con .quick_icon { margin:0 0 20px 0; z-index:1; }
.quick_service .grid .card .quick_con h3 { font-size:40px; color:#fff; font-weight:700; margin:0 0 20px 0; z-index:1; }
.quick_service .grid .card .quick_con .btn { z-index:1; }
.quick_service .grid .card .quick_con .btn a { display:inline-block; font-size:15px; padding:10px 20px; border:1px solid #fff; color:#fff; border-radius:30px; transition:transform 0.3s ease-in-out; box-sizing:border-box; }
.quick_service .grid .card:hover .quick_con .btn a { background:#253543; border:0; transition:transform 0.3s ease-in-out; box-sizing:border-box; }

@media screen and (max-width:1280px){
.quick_service { padding:100px 0 150px 0; }
.quick_service .main_inner { width:100%; padding:0 5%; }
.quick_service .grid .card { width:32%; }
.quick_service .title p { font-size:80px; line-height:80px; margin:0 0 -30px 0; }
.quick_service .title h2 { font-size:40px; }
.quick_service .grid .card .quick_con h3 { font-size:26px; }
}

@media screen and (max-width:1200px){
.quick_service::before { height:200px; }
.quick_service .grid .card { width:30%; height:250px; }
.quick_service .title p { font-size:70px; line-height:70px; margin:0 0 -25px 0; }
.quick_service .title h2 { font-size:40px; }
}

@media screen and (max-width:768px){
.quick_service { padding:50px 0; }
.quick_service::before { display:none; }
.quick_service .title { margin:0 0 20px 0; }
.quick_service .title p { text-align:center; font-size:26px; line-height:30px; margin:0 0 -15px 0; }
.quick_service .title h2 { text-align:center; font-size:26px; }
.quick_service .grid { flex-direction:column; }
.quick_service .grid .card { width:100%; height:250px; margin:0 0 10px 0; }
.quick_service .grid .card::after { display:none; }
.quick_service .grid .card:hover::after { display:none; }
.quick_service .grid .card:hover { transform:scale(1); box-shadow:none; transition:transform 0s ease-in-out; }
.quick_service .grid .card:first-child .quick_icon img { width:20%; }
.quick_service .grid .card .quick_con .quick_icon img { width:45%; }
.quick_service .grid .card .quick_con .btn a { font-size:14; }
.quick_service .grid .card .quick_con h3 { font-size:24px; }
.quick_service .grid .card:hover .quick_con .btn a { background:none; border:1px solid #fff; }
}


/*-----------------------------------------------------------------------------
 *  메인 전문진료센터
 *----------------------------------------------------------------------------*/
.medical_center { overflow:hidden; background:url("../img/main/medical_center_bg.jpg") no-repeat; background-size:cover; }
.medical_center .main_inner { width:1280px; margin:0 auto; padding:100px 0; }
.medical_center .title { position:relative; margin:0 0 50px 0; }
.medical_center .title::before { content:""; position:absolute; top:0; left:0; width:30px; height:30px; background:#c5d9e8; z-inex:9; }
.medical_center .title h2 { position:relative; font-size:40px; font-weight:700; margin:0 0 20px 0; padding:10px 0 0 10px; z-index:99; }
.medical_center .title p { font-size:20px; padding:0 0 0 10px; word-wrap:break-word; word-break:keep-all; }
.medical_center .center_list { position:relative; }
.medical_center .center_list ul {  }
.medical_center .center_list ul li { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width:300px; }
.medical_center .center_list ul li .center_img { display:flex; width:100%; }
.medical_center .center_list ul li .center_img img { width:100%; }
.medical_center .center_list ul li .center_con { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; width:100%; }
.medical_center .center_list ul li .center_con .center_icon { margin:0 0 15px 0; z-index:1; }
.medical_center .center_list ul li .center_con h3 { font-size:30px; font-weight:700; color:#fff; margin:0 0 15px 0; z-index:1; }
.medical_center .center_list ul li .center_con .btn { z-index:1; }
.medical_center .center_list ul li .center_con .btn a { display:inline-block; font-size:14px; padding:10px 20px; background:#fff; border-radius:30px; color:#333747; }


.medical_center .swiper-button-prev,
.medical_center .swiper-button-next { width:50px; height:50px; }

.medical_center .swiper-button-prev:after { content:""; width:50px; height:50px; background:url("../img/main/center_prev.png") no-repeat; }
.medical_center .swiper-button-prev:hover:after { background:url("../img/main/center_prev_ov.png") no-repeat; }
.medical_center .swiper-button-next:after { content:""; width:50px; height:50px; background:url("../img/main/center_next.png") no-repeat; }
.medical_center .swiper-button-next:hover:after { background:url("../img/main/center_next_ov.png") no-repeat; }

@media screen and (max-width:1280px){
.medical_center .main_inner { width:100%; padding:100px 5%; }
.medical_center .center_list ul li .center_con h3 { font-size:24px; }
}

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

}

@media screen and (max-width:768px){
.medical_center .main_inner { padding:50px 5%; }
.medical_center .title::before { display:none; }
.medical_center .title h2 { text-align:center; font-size:26px; padding:0; }
.medical_center .title p { text-align:center; font-size:18px; }
.medical_center .center_list ul { width:90%; margin:0 auto; }
.medical_center .center_list ul li { width:100%; }
}


/*-----------------------------------------------------------------------------
 *  메인 커뮤니티
 *----------------------------------------------------------------------------*/
.community_wrap { padding:150px 0; border-bottom:1px solid #e5e5e5; }
.community_wrap .community_inner { width:1280px; margin:0 auto; }
.community_wrap .title { text-align:center; margin:0 0 50px 0; }
.community_wrap .title h2 { font-size:40px; font-weight:700; margin:0 0 20px 0; }
.community_wrap .title h2 span { color:#1eaee8; }
.community_wrap .title p { font-size:18px; font-weight:700; color:#bbc0d2; letter-spacing:3px; }

.community_wrap .community_banner { display:flex; gap:20px; }
.community_wrap .community_banner .community_image { display:flex; align-items:center; overflow:hidden; width:100%; height:310px; border:2px solid #ddd; border-radius:20px; }
.community_wrap .community_banner .community_image img { width:100%; }
.community_wrap .community_banner .community_image.visible { display:block; }
.community_wrap .more-btn { text-align:center; display:none; }
.community_wrap .more-btn button { padding:18px 35px; border:1px solid #ddd; font-size:18px; font-weight:700; border-radius:10px; cursor:pointer; }

@media screen and (max-width:1280px){
.community_wrap { padding:100px 0; }
.community_wrap .community_inner { width:100%; padding:0 5%; }
.community_wrap .community_image {  }
.community_wrap .community_image img { width:100%; }
}

@media screen and (max-width:1200px){
.community_wrap .community_banner { flex-wrap:wrap; justify-content:space-between; gap:0; }
.community_wrap .community_banner .community_image { width:49%; height:320px; }
.community_wrap .community_banner .community_image:nth-child(1),
.community_wrap .community_banner .community_image:nth-child(2) { margin:0 0 10px 0; }
}

@media screen and (max-width:753px){
.community_wrap { padding:50px 0; }
.community_wrap .title { margin:0 0 30px 0; }
.community_wrap .title h2 { font-size:26px; }
.community_wrap .title p { font-size:16px; letter-spacing:0; }
.community_wrap .community_banner { flex-wrap:wrap; justify-content:space-between; gap:0; }
.community_wrap .community_banner .community_image { width:49%; height:200px; }
.community_wrap .community_banner .community_image:nth-child(1),
.community_wrap .community_banner .community_image:nth-child(2) { margin:0 0 10px 0; }
.community_wrap .more-btn button { padding:10px 20px; font-size:16px; }
}


/*-----------------------------------------------------------------------------
 *  메인 유튜브
 *----------------------------------------------------------------------------*/
.youtube_wrap { padding:150px 0; }
.youtube_wrap .youtube_inner { width:1280px; margin:0 auto; }
.youtube_wrap .title { text-align:center; margin:0 0 50px 0; }
.youtube_wrap .title h2 { font-size:40px; font-weight:700; margin:0 0 20px 0; }
.youtube_wrap .title h2 span { color:#e24a36; }
.youtube_wrap .title p { font-size:18px; font-weight:700; color:#bbc0d2; letter-spacing:3px; }
.youtube_wrap .youtube_banner { display:flex; gap:20px; }
.youtube_wrap .youtube_banner li { width:100%; }

@media screen and (max-width:1280px){
.youtube_wrap { padding:100px 0; }
.youtube_wrap .youtube_inner { width:100%; padding:0 5%; }
}

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

}

@media screen and (max-width:768px){
.youtube_wrap { padding:50px 0; }
.youtube_wrap .title { margin:0 0 30px 0; }
.youtube_wrap .title h2 { font-size:26px; }
.youtube_wrap .title p { font-size:16px; letter-spacing:0; }

.youtube_wrap .youtube_banner { flex-wrap:wrap; }
.youtube_wrap .youtube_banner li { width:100%; }
.youtube_wrap .youtube_banner li img { width:100%; }
}

/*-----------------------------------------------------------------------------
 *  메인 병원소식
 *----------------------------------------------------------------------------*/
.news_wrap { background:url("../img/main/news_bg.jpg") no-repeat; background-size:cover; padding:150px 0; }
.news_wrap .news_inner { width:1280px; margin:0 auto; }
.news_wrap .title { margin:0 0 50px 0; }
.news_wrap .title h2 { font-size:50px; font-weight:700; margin:0 0 30px 0; }
.news_wrap .title p { font-size:18px; font-weight:700; color:#aaa; letter-spacing:3px; }
.news_wrap .sub_tit { display:flex; align-items:center; justify-content:space-between; margin:0 0 30px 0; }
.news_wrap .sub_tit h3 { font-size:30px; font-weight:700; }
.news_wrap .sub_tit .more_btn { font-size:16px; font-weight:700; }
.news_wrap .sub_tit .more_btn a { display:flex; align-items:center; }
.news_wrap .sub_tit .more_btn a i { font-size:30px; margin:0 0 0 10px; }
.news_wrap .news_list { display:flex; flex-wrap:wrap; justify-content:space-between; }
.news_wrap .news_list li { position:relative; width:300px; min-height:320px; background:#fff; border:1px solid #fff; box-sizing:border-box; transition: all 0.5s ease; }
.news_wrap .news_list li:hover { border:1px solid #666; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); transition: all 0.5s ease; }
.news_wrap .news_list li a { display:block; width:100%; height:100%; padding:50px 40px; }
.news_wrap .news_list li .date { font-size:15px; font-weight:600; color:#888; margin:0 0 30px 0; }
.news_wrap .news_list li h4 { font-size:26px; font-weight:500; line-height:160%; word-wrap:break-word; word-break:keep-all; }
.news_wrap .news_list li .view_btn { position:absolute; bottom:30px; right:30px; }
.news_wrap .news_list li.no_data { width:100%; height:300px; line-height:300px; text-align:center; margin:0; border:0; }
.news_wrap .news_list li.no_data:hover { border:0; box-shadow:none; }

@media screen and (max-width:1280px){
.news_wrap { padding:100px 0; }
.news_wrap .news_inner { width:100%; padding:0 5%; }
.news_wrap .title h2 { font-size:40px; }
.news_wrap .sub_tit h3 { font-size:26px; }
.news_wrap .news_list li { width:24%; min-height:280px; }
.news_wrap .news_list li a { padding:30px 25px; }
.news_wrap .news_list li .date { margin:0 0 20px 0; }
.news_wrap .news_list li h4 { font-size:20px; }
}

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

}

@media screen and (max-width:768px){
.news_wrap { padding:50px 0; }
.news_wrap .title h2 { font-size:26px; margin:0 0 20px 0;}
.news_wrap .title p { font-size:16px; letter-spacing:1px; }
.news_wrap .sub_tit h3 { font-size:20px; }
.news_wrap .sub_tit .more_btn { font-size:14px; }
.news_wrap .news_list li { width:48%; min-height:200px; margin:0 0 20px 0; }
.news_wrap .news_list li:nth-child(3),
.news_wrap .news_list li:nth-child(4) { margin:0; }
.news_wrap .news_list li a { padding:20px; }
.news_wrap .news_list li .date { font-size:14px; }
.news_wrap .news_list li h4 { font-size:16px; }
.news_wrap .news_list li .view_btn { bottom:10px; right:10px; }
}