/* 메인 */ #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; } /* chapter1 */ #content #chapter1 { width: 100%; height: 800px; padding: 0; } #content #chapter1 .swiper-slide { height: 800px; } #content #chapter .slide1 { position : relative; z-index: -1; } /* #content #chapter1 .slide1 { background: url(images/main_bg.jpg) no-repeat top; background-size: cover; } */ #content #chapter1 .slide1 .swiper-wrapper .mainslide1 { background: url(images/mainslide/main_slide1.jpg) no-repeat center/cover } #content #chapter1 .slide1 .swiper-wrapper .mainslide2 { background: url(images/mainslide/main_slide2.jpg) no-repeat center/cover } #content #chapter1 .slide1 .swiper-wrapper .mainslide3 { background: url(images/mainslide/main_slide3.jpg) no-repeat center/cover } #content #chapter1 .slide1 .swiper-wrapper .mainslide4 { background: url(images/mainslide/main_slide4.jpg) no-repeat center/cover } @media screen and (max-width: 1300px) { #content #chapter1 .slide1 .swiper-wrapper .mainslide1 { background: url(images/mainslide/main_slide1.jpg) no-repeat 90%/110% } #content #chapter1 .slide1 .swiper-wrapper .mainslide2 { background: url(images/mainslide/main_slide2.jpg) no-repeat 90%/100% } #content #chapter1 .slide1 .swiper-wrapper .mainslide3 { background: url(images/mainslide/main_slide3.jpg) no-repeat 50%/140% } #content #chapter1 .slide1 .swiper-wrapper .mainslide4 { background: url(images/mainslide/main_slide4.jpg) no-repeat 90%/140% } } @media screen and (max-width: 1100px) { #content #chapter1 .slide1 .swiper-wrapper .mainslide1 { background: url(images/mainslide/main_slide1.jpg) no-repeat 50%/150% } #content #chapter1 .slide1 .swiper-wrapper .mainslide2 { background: url(images/mainslide/main_slide2.jpg) no-repeat 50%/130% } #content #chapter1 .slide1 .swiper-wrapper .mainslide3 { background: url(images/mainslide/main_slide3.jpg) no-repeat 55%/200% } #content #chapter1 .slide1 .swiper-wrapper .mainslide4 { background: url(images/mainslide/main_slide4.jpg) no-repeat 70%/150% } } @media screen and (max-width: 700px) { #content #chapter1 .slide1 .swiper-wrapper .mainslide1 { background: url(images/mainslide/main_slide1.jpg) no-repeat 50%/200% } #content #chapter1 .slide1 .swiper-wrapper .mainslide2 { background: url(images/mainslide/main_slide2.jpg) no-repeat 50%/180% } #content #chapter1 .slide1 .swiper-wrapper .mainslide3 { background: url(images/mainslide/main_slide3.jpg) no-repeat 55%/250% } #content #chapter1 .slide1 .swiper-wrapper .mainslide4 { background: url(images/mainslide/main_slide4.jpg) no-repeat 70%/200% } } @media screen and (max-width: 500px) { #content #chapter1 .slide1 .swiper-wrapper .mainslide1 { background: url(images/mainslide/main_slide1.jpg) no-repeat 40%/320%;} #content #chapter1 .slide1 .swiper-wrapper .mainslide2 { background: url(images/mainslide/main_slide2.jpg) no-repeat 50%/250% } #content #chapter1 .slide1 .swiper-wrapper .mainslide3 { background: url(images/mainslide/main_slide3.jpg) no-repeat 55%/380% } #content #chapter1 .slide1 .swiper-wrapper .mainslide4 { background: url(images/mainslide/main_slide4.jpg) no-repeat 70%/300% } } #content #chapter1 .slide1 .inner { position : absolute; max-width: 1400px; height: 800px; z-index: 5; left: 50%; transform: translateX(-50%); } #content #chapter1 .slide1 .main_tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 8rem; color: #fff; font-weight: 500; text-align: center; width: 100%; white-space: nowrap; } #content #chapter1 .slide1 .main_menu { position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); width: 100%; } #content #chapter1 .slide1 .main_menu ul { display: flex; gap: 10px; } #content #chapter1 .slide1 .main_menu ul li { flex: 1; } #content #chapter1 .slide1 .main_menu ul li a { display: flex; gap: 10%; justify-content: center; align-items: center; text-align: center; padding: 2rem; background: rgba(255,255,255,0.9); border-radius: 20px; } #content #chapter1 .slide1 .main_menu ul li a p { font-size: 2.6rem; } #content #chapter1 .slide1 .main_menu ul li.bg_1_6 a { background: url(images/main_icon_bg.png) no-repeat center / cover; opacity: .89; } #content #chapter1 .slide1 .main_menu ul li.bg_1_6 a p { margin-left: 45%; } @font-face { font-family: 'Pretendard'; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); } .call24 { position: fixed; top: 86px; right: 0; background: url(images/bg.png) 100% center/cover; width: 217px; height: 175px; padding: 12px 22px 12px 29px; box-sizing: border-box; color: #2f3035; font-family: 'Pretendard Variable', sans-serif; z-index: 10; } .call24 p:first-child, .call24 p:nth-child(2) { font-size: 20px; line-height: 1.2; letter-spacing: -1.5px; font-weight: 800; } .call24 p:nth-child(3) { font-size: 18px; font-weight: 600; } .call24 p:nth-child(4) { line-height: 1.1; } .call24 p:nth-child(4) a { font-size: 19px; color: red; font-weight: 800; } .call24 .light { position: absolute; top: 14px; right: 14px; } .call24 .closeBtn { position: absolute; display: none; width: 30px; height: 30px; background: #fff; border-radius: 50%; font-size: 18px; top: -10px; left: -5px; line-height: 27px; text-align: center; cursor: pointer; font-weight: bold; } @media screen and (max-width: 1300px){ .call24 { top: 71%; right: 109px; width: 160px; height: 130px; padding: 11px 23px } .call24 p:first-child, .call24 p:nth-child(2) { font-size: 16px; line-height: 1.2; letter-spacing: -1.5px; font-weight: 800; } .call24 p:nth-child(3) { font-size: 14px; font-weight: 600; line-height: 1.2; } .call24 p:nth-child(4) a { font-size: 15px; color: red; font-weight: 800; line-height: 1.1; } .call24 p:nth-child(4) { line-height: 1.1; } .call24 .closeBtn { display: block; } .call24 .light { top: 5px; right: 5px; transform: scale(.7); } @media screen and (max-width: 1200px){ .call24 { right: 0; top: 71%; } } } /* form */ .form { background: #303030; border-top: 2px solid #fabe00; margin-top: -2px; padding: .5rem 3.5rem; position: fixed; width: 100%; bottom: 0; z-index: 50; } .form .inner { display: flex; justify-content: space-around; align-items: center; } .form .form_tit h4 { font-size: 2.4rem; } .form .form_tit p { font-size: 1.6rem; margin-top: 0.8rem; line-height: 1.3; } .form_row { display: flex; align-items: center; justify-content: flex-end; gap: 2%; } .form_close { position: absolute; top: 15px; right: 20px; color: #fff; display: none; } /* chapter2 */ #content #chapter2 { background: url(images/sec1_bg.jpg) no-repeat top / contain; } #content #chapter2 .doc_slide { position: relative; margin-top: 65px; } #content #chapter2 .doc_slide .swiper-slide { background: #dddbd5; display: flex; width: 18.2%; height: 460px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; transition: .3s ease-in-out; overflow: hidden; } /* 추삼호 원장 */ #content #chapter2 .doc_slide .swiper-slide.csh { background: url(images/doctor_csh.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.csh.swiper-slide-active { background: url(images/doctor_csh.png) no-repeat bottom right -30% #fabe00; } /* 김훈철 원장 */ #content #chapter2 .doc_slide .swiper-slide.khc { background: url(images/doctor_khc.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.khc.swiper-slide-active { background: url(images/doctor_khc.png) no-repeat bottom right -30% #fabe00; } /* 유범석 원장 */ #content #chapter2 .doc_slide .swiper-slide.ybs { background: url(images/doctor_ybs.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.ybs.swiper-slide-active { background: url(images/doctor_ybs.png) no-repeat bottom right -30% #fabe00; } /* 이경근 원장 */ #content #chapter2 .doc_slide .swiper-slide.lgg { background: url(images/doctor_lgg.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.lgg.swiper-slide-active { background: url(images/doctor_lgg.png) no-repeat bottom right -30% #fabe00; } /* 오황균 원장 */ #content #chapter2 .doc_slide .swiper-slide.ohg { background: url(images/doctor_ohg.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.ohg.swiper-slide-active { background: url(images/doctor_ohg.png) no-repeat bottom right -30% #fabe00; } /* 김용현 원장 */ #content #chapter2 .doc_slide .swiper-slide.kyh { background: url(images/doctor_kyh.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.kyh.swiper-slide-active { background: url(images/doctor_kyh.png) no-repeat bottom right -30% #fabe00; } /* 김두환 원장 */ #content #chapter2 .doc_slide .swiper-slide.kdh { background: url(images/doctor_kdh.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.kdh.swiper-slide-active { background: url(images/doctor_kdh.png) no-repeat bottom right -30% #fabe00; } /* 홍복희 원장 */ #content #chapter2 .doc_slide .swiper-slide.hbh { background: url(images/doctor_hbh.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.hbh.swiper-slide-active { background: url(images/doctor_hbh.png) no-repeat bottom right -30% #fabe00; } /* 최일환 원장 */ #content #chapter2 .doc_slide .swiper-slide.clh { background: url(images/doctor_clh.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.clh.swiper-slide-active { background: url(images/doctor_clh.png) no-repeat bottom right -30% #fabe00; } /* 빙종현 원장 */ #content #chapter2 .doc_slide .swiper-slide.bjh { background: url(images/doctor_bjh.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.bjh.swiper-slide-active { background: url(images/doctor_bjh.png) no-repeat bottom right -30% #fabe00; } /* 이창형 원장 */ #content #chapter2 .doc_slide .swiper-slide.lch { background: url(images/doctor_lch.png) no-repeat bottom center #dedbd6; } #content #chapter2 .doc_slide .swiper-slide.lch.swiper-slide-active { background: url(images/doctor_lch.png) no-repeat bottom right -30% #fabe00; } #content #chapter2 .doc_slide .swiper-slide .doc_txt { display: none; padding-top: 10.2rem; padding-left: 5rem; color: #494949; } #content #chapter2 .doc_slide .swiper-slide .doc_txt .desc { margin: 1rem 0 2rem; } #content #chapter2 .doc_slide .swiper-slide .doc_txt .more_btn { display: inline-block; font-size: 1.8rem; padding: 1rem 1.5rem; color: #fff; border: 1px solid #fff; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide-active { width: calc(45% - 30px)!important; background: #fabe00; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide-active .doc_txt { display: block; } #content #chapter2 .doc_slide .swiper-slide .swiper-pagination .swiper-pagination-bullet { background: #4b4a48 !important; } /* chapter3 */ #chapter3 { background: url(images/sec2_bg.jpg) no-repeat top / cover; } #chapter3:after { position: absolute; bottom: 50%; left: 50%; background: url(images/bg_tit.png) no-repeat center; width: 1356px; height: 111px; display: block; } #chapter3 ul { display: flex; flex-wrap: wrap; gap: 2rem; } #chapter3 ul li { height: 280px; } #chapter3 ul li:nth-child(1) { background: url(images/sec2_box01.png) no-repeat right #339daf; width: 48%; border-top-left-radius: 50px; } #chapter3 ul li:nth-child(2) { background: url(images/sec2_box02.png) no-repeat center center; width: 24%; } #chapter3 ul li:nth-child(3) { background: url(images/sec2_box03.png) no-repeat center center; width: 24%; } #chapter3 ul li:nth-child(4) { background: url(images/sec2_box04.png) no-repeat center center #00294d; width: 48%; } #chapter3 ul li:nth-child(5) { background: url(images/sec2_box05.png) no-repeat center center; width: 24%; } #chapter3 ul li:nth-child(6) { background: url(images/sec2_box06.png) no-repeat right; width: 24%; border-bottom-right-radius: 50px; } #chapter3 ul li a { position: relative; text-align: center; width: 100%; height: 100%; display: block; } #chapter3 ul li a h3, #chapter3 ul li a h4 { font-weight: 400; color: #fff; } #chapter3 ul li:nth-child(2) a h3, #chapter3 ul li:nth-child(6) a h3 { color: #303030; } #chapter3 ul li a p { font-weight: 700; font-size: 1.8rem; color: #fabe00; } #chapter3 ul li a .left_tit { position: absolute; top: 50%; left: 24%; transform: translate(-50%, -50%); } #chapter3 ul li a .left_tit h3 { margin-bottom: 1rem; } #chapter3 ul li a .tb_tit { display: flex; flex-direction: column; justify-content: space-between; height: 280px; padding: 20px 0; } /* chapter4 */ .tit_flex { display: flex; align-items: center; justify-content: space-between; } .tit_flex .tit_left { display: flex; align-items: center; gap: 25px; } .more_btn { font-size: 1.8rem; color: #fabe00; font-weight: 700; } .yt_slide { margin-top: 5.5rem !important; } .yt_slide .swiper-slide { width: 100%; aspect-ratio: 16 / 9; background: #f5f5f5; } .yt_slide .swiper-slide a, .yt_slide .swiper-slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* chapter5 */ #chapter5 { padding-top: 0 !important; } /* chapter6 */ #chapter6 { background: #f3f1ea; } /* #chapter6 .cha6_flex { display: flex; } */ #chapter6 .cha6_flex .tit_left { padding-left: 8%; padding-right: 10rem; float: left; } #chapter6 .cha6_flex .tit_left .sub_tit { margin: 3rem 0; } #chapter6 .cha6_flex .tab_cont .tabs { display: flex; align-items: center; height: 6rem; max-width: 1050px; } #chapter6 .cha6_flex .tab_cont .tabs li a { padding: 15px 60px; color: #c0c0c0; } #chapter6 .cha6_flex .tab_cont .tabs li.active a { background: #4b4948; color: #fff; border-top-left-radius: 20px; border-bottom-right-radius: 20px; } #chapter6 .cha6_flex .tab_cont .tabs .more_btn { margin-left: auto; margin-right: 2rem; } .story_slide { margin: 6rem 0 !important; } .story_slide .swiper-slide img { width: 100%; height: 380px; /*aspect-ratio: 16 / 9; */ object-fit: cover; } .story_tit { background: #fff; padding: 2rem 3rem; } .story_tit .date { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #e0e0e0; color: #858585; font-size: 1.6rem; } .story_slide .swiper-pagination-progressbar { background: #fff; } /* chapter7 */ .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%; border-top-left-radius: 30px; border-bottom-right-radius: 30px; 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; } /* chapter8 */ #chapter8 { background: url(images/logo_bg.png) no-repeat left bottom #fabe00; } #chapter8 .inner { display: flex; justify-content: space-between; } #chapter8 .inner .chap8_left .info_cont { display: flex; gap: 70px; } #chapter8 .inner .chap8_left .info_cont:last-child { margin-top: 8rem; } #chapter8 .inner .chap8_left .info_cont .info_desc .timetable { display: flex; gap: 25px; margin-top: 1rem; } #chapter8 .inner .chap8_left .info_cont .info_desc .timetable .column .day { text-align-last: justify; } #chapter8 .inner .chap8_left .info_cont .info_desc .timetable .column p, #chapter8 .chap8_left .info_cont .info_desc .holiday { font-size: 2.4rem; font-weight: 500; line-height: 4rem; } #chapter8 .inner .chap8_left .info_cont .info_desc .btns { display: inline-block; margin-top: 2rem; } #chapter8 .inner .chap8_left .info_cont .info_desc .btns a { padding: 12px 20px; font-weight: 700; display: inline-block; } #chapter8 .inner .chap8_left .info_cont .info_desc .btns a.naver { border: 1px solid #08a800; color: #08a800; margin-right: 1rem; } #chapter8 .inner .chap8_left .info_cont .info_desc .btns a.kakao { border: 1px solid #4b4948; } .root_daum_roughmap .cont { display: none; } .root_daum_roughmap .border1, .root_daum_roughmap .border3, .root_daum_roughmap .border4 { display: none; } #chapter8 .inner .chap8_right .map { max-width: 680px; width: 680px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; } #chapter8 .inner .chap8_right .info_nav { margin-top: 4.5rem; } #chapter8 .inner .chap8_right .info_nav ul { display: flex; justify-content: space-around; } #chapter8 .inner .chap8_right .info_nav ul li { position: relative; text-align: center; } #chapter8 .inner .chap8_right .info_nav ul li:after { position: absolute; content: ""; top: 0; right: -3.5rem; width: 1px; height: 110px; background: #fcd24d; } #chapter8 .inner .chap8_right .info_nav ul li:last-child:after { display: none; } #chapter8 .inner .chap8_right .info_nav ul li p { font-size: 2.2rem; margin-top: 2rem; } #chapter8 .logo_slide { margin-top: 8rem; } /* 미디어쿼리 반응형 */ @media (max-width: 1400px) { /* chapter2 */ #content #chapter2 .doc_slide .swiper-slide.swiper-slide-active { width: calc(52% - 30px)!important; } /* chapter8 */ #chapter8 { background-size: 50%; } #chapter8 .inner { flex-direction: column; gap: 50px; } #chapter8 .inner .chap8_left, #chapter8 .inner .chap8_right { max-width: 680px; width: 100%; margin: 0 auto; } } @media (max-width: 1300px) { /* chapter1 */ #content #chapter1 .slide1 .main_tit { top: 40%; } #content #chapter1 .slide1 .main_menu { top: 65%; max-width: 740px; padding: 0 2rem; } #content #chapter1 .slide1 .main_menu ul { flex-wrap: wrap; } #content #chapter1 .slide1 .main_menu ul li { flex: 1 1 30%; } /* chapter5 */ #chapter5 .chap5_cont .info { flex-wrap: wrap; justify-content: space-around; } #chapter5 .chap5_cont .info .icon { width: 100%; justify-content: center; margin-top: 50px; gap: 50px; } } @media (max-width: 1200px) { /* chapter2 */ #content #chapter2 .doc_slide .swiper-slide { width: 15%; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide-active { width: calc(55% - 30px)!important; } /* chapter6 */ #chapter6 .cha6_flex .tit_left { float: unset; } #chapter6 .cha6_flex .tit_left .tit br { display: none; } /* .br_none { display: none; } */ #chapter6 .tab_cont { margin: 4rem auto 0; max-width: 1000px; padding: 0 20px; } } @media (max-width: 1100px) { /* chapter3 */ #chapter3 ul { max-width: 640px; margin: 0 auto; } #chapter3 ul li:nth-child(1), #chapter3 ul li:nth-child(4) { width: 100%; } #chapter3 ul li:nth-child(2), #chapter3 ul li:nth-child(3), #chapter3 ul li:nth-child(5), #chapter3 ul li:nth-child(6) { width: 48.3%; } } @media (max-width: 1024px){ #content .paragraph { padding: 80px 0; } /* chapter2 */ #content #chapter2 .doc_slide .swiper-slide { width: 15%; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide-active { width: calc(70% - 30px)!important; } } @media (max-width: 840px) { /* chapter2 */ #content #chapter2 .doc_slide .swiper-slide { width: 100%; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide-active { width: 100% !important; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide1.swiper-slide-active { background: url(images/doctor_white.png) no-repeat bottom right -10% #fabe00; } /* 추삼호 원장 */ #content #chapter2 .doc_slide .swiper-slide.csh.swiper-slide-active { background: url(images/doctor_csh.png) no-repeat bottom right -30% #fabe00; } /* 김훈철 원장 */ #content #chapter2 .doc_slide .swiper-slide.khc.swiper-slide-active { background: url(images/doctor_khc.png) no-repeat bottom right -30% #fabe00; } /* 유범석 원장 */ #content #chapter2 .doc_slide .swiper-slide.ybs.swiper-slide-active { background: url(images/doctor_ybs.png) no-repeat bottom right -10% #fabe00; } /* 이경근 원장 */ #content #chapter2 .doc_slide .swiper-slide.lgg.swiper-slide-active { background: url(images/doctor_lgg.png) no-repeat bottom right -30% #fabe00; } /* 오황균 원장 */ #content #chapter2 .doc_slide .swiper-slide.ohg.swiper-slide-active { background: url(images/doctor_ohg.png) no-repeat bottom right -30% #fabe00; } /* 김용현 원장 */ #content #chapter2 .doc_slide .swiper-slide.kyh.swiper-slide-active { background: url(images/doctor_kyh.png) no-repeat bottom right -30% #fabe00; } /* 김두환 원장 */ #content #chapter2 .doc_slide .swiper-slide.kdh.swiper-slide-active { background: url(images/doctor_kdh.png) no-repeat bottom right -30% #fabe00; } /* 홍복희 원장 */ #content #chapter2 .doc_slide .swiper-slide.hbh.swiper-slide-active { background: url(images/doctor_hbh.png) no-repeat bottom right -30% #fabe00; } /* 최일환 원장 */ #content #chapter2 .doc_slide .swiper-slide.clh.swiper-slide-active { background: url(images/doctor_clh.png) no-repeat bottom right -30% #fabe00; } /* 빙종현 원장 */ #content #chapter2 .doc_slide .swiper-slide.bjh.swiper-slide-active { background: url(images/doctor_bjh.png) no-repeat bottom right -30% #fabe00; } /* 이창형 원장 */ #content #chapter2 .doc_slide .swiper-slide.lch.swiper-slide-active { background: url(images/doctor_lch.png) no-repeat bottom right -30% #fabe00; } /* chapter8 */ #chapter8 .inner .chap8_left .info_cont { flex-direction: column; gap: 10px; align-items: center; } #chapter8 .inner .chap8_left .info_cont:last-child { margin-top: 4rem; } #chapter8 .inner .chap8_left .info_cont .info_desc .btns { display: flex; justify-content: center; } #chapter8 .inner .chap8_right .map { width: 100%; } } @media (max-width: 720px) { /* chapter1 */ #content #chapter1 .slide1 .main_tit { font-size: 5rem; top: 35%; } #content #chapter1 .slide1 .main_menu { max-width: 500px; } #content #chapter1 .slide1 .main_menu ul li { flex: 1 1 40%; } /* #content #chapter1 .slide1 .main_menu ul li a img { width: 100%; display: block; } */ /* chapter3 */ .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%; } #chapter3 .btn a { font-size: 18px; padding: 20px 35px; } /* chapter7 */ .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 .paragraph { padding: 60px 0; } h2.tit { font-size: 3.8rem; line-height: 4rem; } /* chapter2 */ #content #chapter2 .doc_slide { margin-top: 3rem; } #content #chapter2 .doc_slide .swiper-slide { height: 380px; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide1 { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.swiper-slide1.swiper-slide-active { background: url(images/doctor_white.png) no-repeat bottom right -20% / 60% #fabe00; } /* 추삼호 원장 */ #content #chapter2 .doc_slide .swiper-slide.csh { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.csh.swiper-slide-active { background: url(images/doctor_csh.png) no-repeat bottom right -20% / 60% #fabe00; } /* 김훈철 원장 */ #content #chapter2 .doc_slide .swiper-slide.khc { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.khc.swiper-slide-active { background: url(images/doctor_khc.png) no-repeat bottom right -20% / 60% #fabe00; } /* 유범석 원장 */ #content #chapter2 .doc_slide .swiper-slide.ybs { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.ybs.swiper-slide-active { background: url(images/doctor_ybs.png) no-repeat bottom right -20% / 60% #fabe00; } /* 이경근 원장 */ #content #chapter2 .doc_slide .swiper-slide.lgg { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.lgg.swiper-slide-active { background: url(images/doctor_lgg.png) no-repeat bottom right -20% / 60% #fabe00; } /* 오황균 원장 */ #content #chapter2 .doc_slide .swiper-slide.ohg { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.ohg.swiper-slide-active { background: url(images/doctor_ohg.png) no-repeat bottom right -20% / 60% #fabe00; } /* 김용현 원장 */ #content #chapter2 .doc_slide .swiper-slide.kyh { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.kyh.swiper-slide-active { background: url(images/doctor_kyh.png) no-repeat bottom right -20% / 60% #fabe00; } /* 김두환 원장 */ #content #chapter2 .doc_slide .swiper-slide.kdh { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.kdh.swiper-slide-active { background: url(images/doctor_kdh.png) no-repeat bottom right -20% / 60% #fabe00; } /* 홍복희 원장 */ #content #chapter2 .doc_slide .swiper-slide.hbh { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.hbh.swiper-slide-active { background: url(images/doctor_hbh.png) no-repeat bottom right -20% / 60% #fabe00; } /* 최일환 원장 */ #content #chapter2 .doc_slide .swiper-slide.clh { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.clh.swiper-slide-active { background: url(images/doctor_clh.png) no-repeat bottom right -20% / 60% #fabe00; } /* 빙종현 원장 */ #content #chapter2 .doc_slide .swiper-slide.bjh { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.bjh.swiper-slide-active { background: url(images/doctor_bjh.png) no-repeat bottom right -20% / 60% #fabe00; } /* 이창형 원장 */ #content #chapter2 .doc_slide .swiper-slide.lch { background-size: 60%; } #content #chapter2 .doc_slide .swiper-slide.lch.swiper-slide-active { background: url(images/doctor_lch.png) no-repeat bottom right -20% / 60% #fabe00; } #content #chapter2 .doc_slide .swiper-slide .doc_txt { padding-top: 7rem; padding-left: 3.5rem; } /* chapter3 */ #chapter3 ul { gap: 1rem; } #chapter3 ul li { height: 240px; } #chapter3 ul li a .tb_tit { height: 240px; } #chapter3 ul li:nth-child(2), #chapter3 ul li:nth-child(3), #chapter3 ul li:nth-child(5), #chapter3 ul li:nth-child(6) { width: 48.5%; } #chapter3 ul li a h3 { font-size: 3rem; } #chapter3 ul li a h4 { font-size: 2.2rem; } /* chapter4 */ .tit_flex { align-items: flex-end; } #chapter4 .tit_flex .tit_left { flex-direction: column; gap: 0px; align-items: baseline; } /* chapter5 */ #chapter5 .tit_flex .tit_left { flex-direction: column; gap: 0px; align-items: baseline; } /* chapter8 */ #chapter8 .inner .chap8_right .info_nav ul li:after { display: none; } .logo_slide img { max-width: 150px; width: 100%; margin: 0 auto; display: block; } } @media (max-width: 600px) { /* chapter2 */ #content #chapter2 .chap2_cont .chap2_box { height: 370px; } /* chapter7 */ .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) { /* chapter3 */ .doctor_slide2 .swiper-slide { height: 300px; } .doctor_slide2 .swiper-slide .doc_info { padding: 68px 60px 0 0; } .doctor_slide2 .swiper-button { top: 50%; } #chapter3 .btn a { margin-top: 30px; } } @media (max-width: 480px) { /* chapter1 */ #content #chapter1 { height: 700px; } #content #chapter1 .slide1 { height: 700px; } #content #chapter1 .slide1 .inner { height: 700px; } #content #chapter1 .slide1 .main_tit { top: 40%; } #content #chapter1 .slide1 .main_menu ul li a { justify-content: space-around; height: 85px; padding: 0 1.5rem; } #content #chapter1 .slide1 .main_menu ul li a .main_icon img { width: 100%; height: auto; } #content #chapter1 .slide1 .main_menu ul li a p { font-size: 2.2rem; } /* chapter2 */ #content #chapter2 .doc_slide { margin-top: 3rem; } #content #chapter2 .doc_slide .swiper-slide { height: 280px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; } #content #chapter2 .doc_slide .swiper-slide .doc_txt { padding-top: 5rem; padding-left: 3rem; } #content #chapter2 .doc_slide .swiper-slide .doc_txt .name h3 { font-size: 3.5rem; } #content #chapter2 .doc_slide .swiper-slide .doc_txt .desc p { font-size: 1.8rem; } /* chapter3 */ #chapter3 ul { justify-content: center } #chapter3 ul li, #chapter3 ul li a .tb_tit { height: 180px; } #chapter3 ul li:nth-child(1) { background: url(images/sec2_box01.png) no-repeat center bottom / 100% #339daf; } #chapter3 ul li:nth-child(2), #chapter3 ul li:nth-child(3), #chapter3 ul li:nth-child(5), #chapter3 ul li:nth-child(6) { width: 48.2%; background-size: 130%; } /* chapter6 */ #chapter6 .cha6_flex .tab_cont .tabs li a { padding: 15px 25px; } /* chapter8 */ /* #chapter8 .inner .chap8_right .info_nav ul li img { width: 70%; } */ #chapter8 .inner .chap8_right .info_nav ul li p { font-size: 1.8rem; } } @media (max-width: 400px) { /* chapter3 */ .doctor_slide2 .swiper-slide { height: 220px; } .doctor_slide2 .swiper-slide .doc_info { padding: 37px 40px 0 0; } .doctor_slide2 .swiper-slide .doc_info h4 b { font-size: 20px; } .doctor_slide2 .swiper-slide .doc_info h4 { font-size: 14px; } .doctor_slide2 .swiper-slide .doc_info .clinic p { font-size: 12px; } }