/* 메인 */ #content { width:100%; max-width: 1920px; margin: 0 auto; position:relative; } #content .paragraph { width:100%; display:inline-block; position:relative; padding: 120px 0; } #content .paragraph .inner { position:relative; } /* 메인 영상 */ /* .main_video { width: 611px; aspect-ratio: 650/365; overflow: hidden; position : absolute; top: 290px; right: 180px; z-index: 10; } */ .main_video { width: 32vw; aspect-ratio: 650/365; overflow: hidden; position : absolute; top: 290px; right: 170px; z-index: 10; } .main_video iframe { border-radius: 20px; } /* chapter1 */ #content #chapter1 { width: 100%; height: 930px; padding: 0; } #content #chapter1 .slide1 { position : relative; } #content #chapter1 .swiper-slide { height: 950px; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide { position : relative; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="0"] { background: url(images/main_bg01.jpg) center/cover no-repeat; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="1"] { background: url(images/main_bg02.jpg) center/cover no-repeat; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] { background: url(images/main_bg03.jpg) center/cover no-repeat; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="3"] { background: url(images/main_bg04.jpg) center/cover no-repeat; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] .doctors_img { position : absolute; bottom: 0; left: 10vw; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt { position : absolute; left: 10vw; top: 50%; transform: translateY(-50%); } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p { line-height: 1.4; color: #fff; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(1) { letter-spacing: 1.5rem; font-size: 1.8rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(2) { font-size: 10rem; margin-top: 4rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(3) { font-size: 6.3rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:last-child { font-size: 3rem; margin-top: 2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt .sky { color:#97eaff } /* chapter2 */ #chapter2 ul { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 5rem; } #chapter2 ul li { height: 280px; } #chapter2 ul li:nth-child(1) { background: url(images/sec2_box01.jpg) no-repeat center right 60% #bfe5f7; width: 48%; color: #014e9c; } #chapter2 ul li:nth-child(2) { background: url(images/sec2_box02.jpg) no-repeat center center; width: 23.3%; } #chapter2 ul li:nth-child(3) { background: url(images/sec2_box03.jpg) no-repeat center center; width: 23.3%; color: #fff; } #chapter2 ul li:nth-child(4) { background: url(images/sec2_box04.jpg) no-repeat center center; width: 23.3%; color: #fff; } #chapter2 ul li:nth-child(5) { background: url(images/sec2_box05.jpg) no-repeat center center; width: 23.3%; color: #fff; } #chapter2 ul li:nth-child(6) { background: url(images/sec2_box07.jpg) no-repeat center right 35% #e9dafd; width: 23.3%; color: #390a60; } #chapter2 ul li:nth-child(7) { background: url(images/sec2_box06.jpg) no-repeat center right 35% #c49574; width: 23.3%; color: #fff; } #chapter2 ul li a { position: relative; text-align: center; width: 100%; height: 100%; display: block; } #chapter2 ul li a h3, #chapter2 ul li a h4 { font-weight: 700; } #chapter2 ul li a h4 { font-size: 2.5rem; } #chapter2 ul li a p { font-size: 2rem; } #chapter2 ul li a .left_tit { position: absolute; top: 50%; left: 24%; transform: translate(-50%, -50%); text-align: left; } #chapter2 ul li a .left_tit h3 { margin-bottom: 1rem; } #chapter2 ul li a .tb_tit { display: flex; flex-direction: column; justify-content: space-between; height: 280px; padding: 30px 0; } /* chapter3 */ #chapter3 { background: #e2f8ff; } .more_flex { display: flex; align-items: center; gap: 30px; } #chapter3 .yt_slide img { width: 100%; height: auto; object-fit: cover; } /* chapter4 */ .view { position: relative; width: 100%; height: 100%; overflow: hidden; } .view .swiper-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 4.5rem 0; } .view .swiper-slide { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; justify-content: flex-end; gap: 30px; height: 440px; } .view .swiper-slide > div { width: 100%; height: 100%; overflow: hidden; background: #f5f5f5; } .view .swiper-slide > div > img { width: 100%; height: 100%; object-fit: cover; } .view .swiper-slide.slide_01 { width: 360px; padding-top: 100px; } .view .swiper-slide.slide_02 { width: 385px; height: 440px; } .view .swiper-slide.slide_03 { width: 360px; padding-bottom: 100px; } .view .swiper-slide.slide_04 { width: 385px; height: 440px; } /* chapter5 */ #chapter5 { background: url(images/logo_bg.png) no-repeat left -5% top -5% #005191; color: #fff; } #chapter5 .inner { display: flex; justify-content: space-between; } #chapter5 .inner .chap5_left .info_cont { display: flex; gap: 70px; } #chapter5 .inner .chap5_left .info_cont:last-child { margin-top: 8rem; } #chapter5 .inner .chap5_left .info_cont .info_desc .timetable { display: flex; gap: 25px; margin-top: 1rem; } #chapter5 .inner .chap5_left .info_cont .info_desc .timetable .column .day { text-align-last: justify; } #chapter5 .inner .chap5_left .info_cont .info_desc .timetable .column p, #chapter5 .chap5_left .info_cont .info_desc .holiday { font-size: 2.4rem; font-weight: 500; line-height: 4rem; } #chapter5 .inner .chap5_left .info_cont .info_desc .btns { display: inline-block; margin-top: 2rem; } #chapter5 .inner .chap5_left .info_cont .info_desc .btns a { padding: 12px 20px; font-weight: 700; display: inline-block; } #chapter5 .inner .chap5_left .info_cont .info_desc .btns a.naver { background: #08a800; color: #fff; margin-right: 1rem; } #chapter5 .inner .chap5_left .info_cont .info_desc .btns a.kakao { background: #fec044; color: #fff; } .root_daum_roughmap .cont { display: none; } .root_daum_roughmap .border1, .root_daum_roughmap .border3, .root_daum_roughmap .border4 { display: none; } #chapter5 .inner .chap5_right .map { max-width: 680px; width: 680px; } #chapter5 .inner .chap5_right .info_nav { margin-top: 4.5rem; } #chapter5 .inner .chap5_right .info_nav ul { display: flex; justify-content: space-around; } #chapter5 .inner .chap5_right .info_nav ul li { position: relative; text-align: center; } #chapter5 .inner .chap5_right .info_nav ul li:after { position: absolute; content: ""; top: 0; right: -3.5rem; width: 1px; height: 110px; background: #4d86b2; } #chapter5 .inner .chap5_right .info_nav ul li:last-child:after { display: none; } #chapter5 .inner .chap5_right .info_nav ul li p { font-size: 2.2rem; margin-top: 2rem; } /* 미디어쿼리 반응형 */ /* 메인 영상 */ @media (max-width: 1660px){ .main_video { width: 400px; top: 270px; } } @media (max-width: 1400px) { /* chapter5 */ #chapter5 { background-size: 50%; } #chapter5 .inner { flex-direction: column; gap: 50px; } #chapter5 .inner .chap5_left, #chapter5 .inner .chap5_right { max-width: 680px; width: 100%; margin: 0 auto; } } @media (max-width: 1300px) { /* chapter3 */ #chapter3 .chap5_cont .info { flex-wrap: wrap; justify-content: space-around; } #chapter3 .chap5_cont .info .icon { width: 100%; justify-content: center; margin-top: 50px; gap: 50px; } } /* @media (max-width: 1200px){ #content #chapter1 { height: calc(100vh - 83px); overflow: hidden; max-height:; } */ @media (max-width: 1200px){ #content #chapter1 { height: calc(100vh - 131px); overflow: hidden; } .main_video { max-width: 400px; top: 130px; left: 70%; transform: translateX(-50%); } #content #chapter1 .mySwiper1 .swiper-wrapper .txt { top: 55%; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(1) { font-size: 1.2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(2) { font-size: 8rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(3) { font-size: 5rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(4) { font-size: 2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] .doctors_img { left: auto; right: 0; width: 70vw; bottom: 200px; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] .doctors_img img { width: 100%; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 { top: 40%; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(1) { font-size: 1.2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(2) { font-size: 5rem; margin-top: 2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(3) { font-size: 3rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(4) { font-size: 2rem; } } @media (max-width: 1100px) { /* chapter2 */ #content #chapter1 .swiper1 .inner { height: 950px; } #chapter2 ul { max-width: 640px; margin: 3rem auto 0; } #chapter2 ul li:nth-child(1) { width: 100%; } /* #chapter2 ul li:nth-child(2), #chapter2 ul li:nth-child(3), #chapter2 ul li:nth-child(4), #chapter2 ul li:nth-child(5), #chapter2 ul li:nth-child(6), #chapter2 ul li:nth-child(7) { width: 48.3%; } */ #chapter2 ul li:not(:first-child) { width: calc(50% - 10px); } } @media (max-width: 1024px){ #content .paragraph { padding: 80px 0; } } @media (max-width: 960px){ .main_video { max-width: 360px; top: 100px; left: 50%; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 { top: 45%; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] .doctors_img { width: 600px; } } @media (max-width: 840px) { /* chapter5 */ #chapter5 .inner .chap5_left .info_cont { flex-direction: column; gap: 10px; align-items: center; } #chapter5 .inner .chap5_left .info_cont:last-child { margin-top: 4rem; } #chapter5 .inner .chap5_left .info_cont .info_desc .btns { display: flex; justify-content: center; } #chapter5 .inner .chap5_right .map { width: 100%; } } @media (max-width: 720px) { /* chapter2 */ .doctor_slide2 { position: static; max-width: 700px; margin: 0 auto; } .doctor_slide2 .swiper-slide { height: 420px; } .doctor_slide2 .swiper-slide .doc_info { padding: 90px 70px 0 0; } .doctor_slide2 .swiper-slide .doc_info .cate { font-size: 18px; } .doctor_slide2 .swiper-slide .doc_info h4 b { font-size: 30px; } .doctor_slide2 .swiper-slide .doc_info hr { margin: 20px 0; } .doctor_slide2 .swiper-slide .doc_info .clinic p { font-size: 16px; } .doctor_slide2 .swiper-button { width: 100%; } #chapter2 .btn a { font-size: 18px; padding: 20px 35px; } /* chapter4 */ .view .swiper-slide { height: 400px; gap: 20px; } .view .swiper-slide.slide_01 { padding-top: 30px; } .view .swiper-slide.slide_02 { height: 400px; } .view .swiper-slide.slide_03 { height: 400px; padding-top: 0px; padding-bottom: 40px; } .view .swiper-slide.slide_04 { height: 400px; } } @media (max-width: 640px) { #content #chapter1 { height:600px; } #content .paragraph { padding: 60px 0; } h2.tit { font-size: 3.8rem; line-height: 4rem; } .main_video { max-width: 360px; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] .doctors_img { width: 80%; bottom: 230px; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 { top: 45%; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(1) { font-size: 1.2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(2) { font-size: 7rem; margin-top: 2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(3) { font-size: 4rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(4) { font-size: 2rem; } /* chapter2 */ #chapter2 ul { gap: 10px; justify-content: space-around; } #chapter2 ul li { height: 240px; } #chapter2 ul li a .tb_tit { height: 240px; } /* #chapter2 ul li a .left_tit { left: 18%; } */ /* #chapter2 ul li:nth-child(2), #chapter2 ul li:nth-child(3), #chapter2 ul li:nth-child(4), #chapter2 ul li:nth-child(5) { width: 48.5%; } */ /* chapter3 */ .more_btn { width: 40px; height: 40px; } /* chapter5 */ #chapter5 .inner .chap5_right .info_nav ul li:after { display: none; } } @media (max-width: 600px) { /* chapter1 */ #content #chapter1 .mySwiper1 .swiper-wrapper .txt { width: 70%; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="0"] { background: url(images/main_bg01.jpg) 15%/cover no-repeat; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="1"] { background: url(images/main_bg02.jpg) 86%/cover no-repeat; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] { background: url(images/main_bg03.jpg) 66%/cover no-repeat; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="3"] { background: url(images/main_bg04.jpg) 27%/cover no-repeat; } /* chapter4 */ .view .swiper-slide { height: 320px; gap: 10px; } .view .swiper-slide.slide_01 { width: 300px; padding-top: 30px; } .view .swiper-slide.slide_02 { width: 300px; height: 320px; } .view .swiper-slide.slide_03 { width: 300px; height: 320px; padding-top: 0px; padding-bottom: 40px; } .view .swiper-slide.slide_04 { width: 300px; height: 320px; } } @media (max-width: 540px) { /* chapter2 */ .main_video { width: 90%; } .doctor_slide2 .swiper-slide { height: 300px; } .doctor_slide2 .swiper-slide .doc_info { padding: 68px 60px 0 0; } .doctor_slide2 .swiper-button { top: 50%; } #chapter2 .btn a { margin-top: 30px; } } @media (max-width: 480px) { /* chapter1 */ #content #chapter1 .mySwiper1 .swiper-wrapper .txt { top: 47%; left: 7vw; width: 80%; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(2) { font-size: 6rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt p:nth-child(3) { font-size: 3rem; margin-top: 1rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 { top: 42%; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(2) { font-size: 5rem; margin-top: 2rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(3) { font-size: 2.5rem; margin-top: .4rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .txt3 p:nth-child(4) { font-size: 1.7rem; margin-top: .4rem; } #content #chapter1 .mySwiper1 .swiper-wrapper .swiper-slide[data-swiper-slide-index="2"] .doctors_img { width: 90%; left: 50%; transform: translateX(-50%); bottom: 350px; } /* chapter2 */ #chapter2 ul li, #chapter2 ul li a .tb_tit { height: 180px; } #chapter2 ul li { background-size: cover !important; } #chapter2 ul li a .tb_tit { padding: 20px 0; } #chapter2 ul li a h3 { font-size: 3.5rem; } /* chapter5 */ /* #chapter5 .inner .chap5_right .info_nav ul li img { width: 70%; } */ #chapter5 .inner .chap5_right .info_nav ul li p { font-size: 1.8rem; } }