@charset "utf-8"; html, body { background-color: white; } .wrap { width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; min-width: 320px; .center-wrap { width: 100%; max-width: 1400px; margin: 0 auto; } .sub-left-wrap { width: 25.2%; } .sub-right-wrap { width: 72%; } .topWrap { background: #fff; padding:25px 0;} .topWtap ul li .tel a { display: flex; align-items:center; gap:10px; padding:8px 15px; font-size:22px; font-weight:700; color:#000; text-decoration:none; border: 2px solid #bebdbb; border-radius:30px; } .mainbannerWrap { position: relative; } .mainMenuWrap { position: absolute; width:100%; z-index:9999; border-bottom: 1px solid rgba(255, 255, 255, 0.8); } .bannerWrap { height: auto; position: relative; overflow: hidden; } .mainBanner { width: 1920px; height: 700px; position: relative; left: 50%; transform: translateX(-50%); z-index: 0; } .contentsLInk { } .linkArea { margin:4% auto; } .linkWrap.flex { gap:2em; } .linkWrap li { border-radius:20px; background:#f4f4f4; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); } .col-7 > li { width:calc((100% - 12em) / 7); } .linkWrap li:nth-child(1) {background:#2053a9; } .linkWrap li:nth-child(2) {background:#3c76d7; } .linkWrap li:nth-child(1) div a p, .linkWrap li:nth-child(2) div a p { color:#fff; } .linkWrap li div { text-align:center; } .linkWrap li div a p { margin-top:15px; font-size:17px; font-weight:600; } .linkWrap li div a { color:#333; display: block; padding: 23px 10px; text-align:center; img { transition: transform 1s; } &:hover img { transform:rotateY(180deg); } } .contentsBanner { position: relative; background:url("/res/medoca_bg.jpg") no-repeat center; background-size:cover; } .medical_box { position: relative; z-index:0; padding: 4% 0; } .bg_logo { position: absolute; left:0; bottom:0; background:url("/res/medical_bg_logo.png") no-repeat bottom left; width:221px; height:288px; z-index:-1; } .medical_title { text-align:center; } .medical_title h2 { font-size:40px; font-weight:700; } .medical_title .txt { margin-top:10px; font-size:17px; } .medicalCon { margin-top:3%; position: relative; .swiper { padding-bottom: 45px; } .swiper-slide { width: 100%; box-sizing: border-box; border-radius: 12px; background: #f8f9fa; transition: transform 1s, background-color 1s; overflow: hidden; a { color:#333; text-decoration:none; } } .swiper-slide img { width: 100%; height: auto; border-radius: 12px; } .swiper-slide.swiper-slide-prev, .swiper-slide.swiper-slide-next { transform: scale(0.7) translateY(0%); background-color: transparent; .txt_box { opacity: 0; } } .txt_box { padding: 23px 20px; transition: opacity 1s; } .tit { font-size: 1.25rem; font-weight: bold; margin-bottom: 8px; } .controls { width: 58%; position: absolute; top: 43%; left: 50%; z-index: 1; transform: translate(-50%, -50%); .swiper-button-next, .swiper-button-prev { background: url(/res/medical_btn_next.png) no-repeat; width: 72px; height: 72px; } .swiper-button-prev { transform: scaleX(-1); } .swiper-button-next:after, .swiper-button-prev:after { display: none; } } .swiper-pagination { bottom: 0 !important; .swiper-pagination-bullet { transition: width .5s; border-radius: 4px; } .swiper-pagination-bullet-active { width: 26px; background-color: #f36f21; } } @media only screen and (max-width: 768px) { padding: 0 10px; .controls { display: none; } } } .contentsWrap3 { background:#d09a99; padding:5% 0; .contentsLeft { width:70%; } .contentsRight { width:26%; margin-left:4%; } } .contactWrap { display:flex; } .contactWrap .map { width:65%;} .contact_box { width:35%; background:#ff651f; padding:3%; } .contact_list > li:nth-child(2) { margin-top:20px; } .contact_list li h3 { font-size:24px; font-weight:700; margin-bottom:15px; } .contact_list li h3 img { margin-right:10px; } .contact_list li dl { margin:4px 0;} .contact_list li dl dt { border-radius:30px; background:#fff; display:inline-block; width:100px;text-align:center; } .contact_list li p {margin-top:10px; color:#ecfe22; font-size:16px; } .contact_list li dl dd { display:inline-block;margin-left:10px; } .contact_list li dl dd a { color:#fff; } .contact_list li ul li { color:#fff; } .noticWrap { background:#fff; border-radius:30px; padding:25px; } .noticWrap h3 { font-size:28px; margin-bottom:15px; border-bottom:3px solid #da440f; width:30px; } .noticWrap h3 a { color:#333; text-decoration:none; } .notic_list { margin-top:50px; } .notic_list ul li {margin:20px 0; border-bottom:1px solid #dcdcdc; padding-bottom:15px; } .notic_list ul li span { display:block; } .notic_list ul li span a {color:#333; } .notic_list ul li .date {color:#666; font-size:90%; } > .bottom-wrap { width: 100%; > .bottom { margin-top: 20px; } > .copyright { background:#383838; padding:0% 0; > .bottomArea { border-bottom:1px solid rgba(255, 255, 255, 0.5); padding-bottom:15px; } } } .banner_list { display:flex; justify-content:center; gap:5em; padding:22px 0; } .bottom_list { text-align:center; } .bottom_list > li { margin: 0 1em; display:inline-block;} .bottom_list > li a { color:#fff; } .footer { padding:30px 0; } .copy_add { margin-top:30px; color:#fff; } .copy_add p span { margin-left: 18px; } .copy_add a { color:#fff;} .contentsQuick { position: fixed; top:310px; right:0; z-index: 99999; } .quickWrap { background:#f36f21; border-radius:30px 0 0 30px; padding:20px 18px; } .quickWrap ul li { text-align:center; margin:20px 0;} .quickWrap ul li a { color:#fff; } .quickWrap ul li a p { margin-top:8px;font-size:16px; } .subBannerWrap { position: relative; .subBanner { width: 1920px; margin: 0 auto; position: relative; left: 50%; transform: translateX(-50%); z-index: 1; } } .mainTitle { position:absolute; width:100%; left:50%; top:54%; transform: translateX(-50%); font-size:27px; color:#fff; font-weight:600; text-align:center; z-index:999 } .subMenuWrap { background:#f1f1f1; border-bottom:1px solid #ccc; } .sub_menu .ezMenuContainer2 {display:flex; } .homeNavi { width:50px; display:flex; justify-content: center; align-items: center;background:#f36f21; } .contentsSubWrap { min-height: 450px; overflow: hidden; .contentsSubLeft { margin-top: 20px; } .contentsSub { margin: 4% auto 5%; } } .subtitle { margin-top:60px; font-size:30px; font-weight:800; text-align:center;} .subMenu-2 { display: flex; gap: 1em; > li { &._on > a { background-color: yellow; } } } .subMenu-3 { margin-bottom:50px; display: flex; justify-content: center; border-bottom: 1px solid #a4a4a4; > li { &._on > a { border-radius: 10px 10px 0 0; background-color: white; border: 1px solid #a4a4a4; border-bottom: none; padding: 7px 30px; color:#333; font-weight:600; } > a { border-radius: 10px 10px 0 0; border: 1px solid #a4a4a4; border-bottom: none; background-color: #ececec; padding: 7px 30px; color: #848484; } } } .label { font-weight: 500; } #mmenu-icon { display: none; } .hamburger-inner { background-color: #7d8289; &::before, &::after { background-color: #7d8289; } } nav.mobileMenu { height: calc(100dvh - 98px) !important; } .nav-title-wrap { background: #f36f21; } .ezMenuContainer > ul > li { margin-left: 0px; font-size:20px; } #mainSlider { [slogan-wrap] { position: absolute; z-index: 9993; top: 32%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; [slogan] { position: absolute; width: 100%; max-width: 100vw; left: 50%; transform: translateX(-50%); p { position: absolute; color: white; font-weight: bold; opacity: 0; margin-left: 10%; font-family: 'Hanamdaume', sans-serif; font-weight: 900 !improtant; line-height:1.4em; &.tit { font-size: 40px; color:#222121; } &.con { font-size: 40px; margin-top: 3.2em; color:#d05f0b; } } &.active { p { &.tit { animation: ani_mainSlider 6.0s ease-in-out 0.8s forwards; } &.con { animation: ani_mainSlider 5.2s ease-in-out 1.3s forwards; } } } } } } @media only screen and (max-width: 1400px) { .bannerWrap { overflow: visible; } .mainBanner { width: calc(1920 / 1400 * 100vw); height: auto; } .subBannerWrap { .subBanner { width: calc(1920 / 1400 * 100vw); height: auto; } } } @media only screen and (max-width: 1200px) { .contentsWrap3 { .contentsLeft { width:100%; } .contentsRight { width:100%; margin:3% 0 0 0; } } .notic_list { margin-top:50px; } .notic_list ul li { display:flex; justify-content: space-between; } .notic_list ul li span.ellipsis { width:calc(100% - 150px); } } @media only screen and (max-width: 1024px) { .center-wrap { padding:0 3%; } .subQuickWrap{ display:none; } .sub-left-wrap{ width: 100%; } .contentsSubLeft { display: none; } .sub-right-wrap { width: 100%; } #mmenu-icon { display: inline-block; color: #fff; background-color: none; position: relative; float: right; text-align: left; font-size: 1.0em; border-radius: 5px; margin: 10px 10px 0 0; } #mainMenu { display: none !important; } #subMenuMobile { display: block !important; } #subMenu { display: none !important; } .topWrap .flex li:nth-child(2) { width:100%; order: 1; text-align: center; margin-top:15px; } .topWtap ul li .tel a { gap:5px; padding:5px 15px; font-size:18px; line-height:1.4; img { width:21px; } } .mainMenuWrap { position: absolute; width:auto; right:0; border-bottom: none; top: -70px; } #mainSlider { [slogan-wrap] { [slogan] { p { &.tit { font-size: 25px; } &.con { font-size: 25px; } } } } } .linkWrap.flex { gap:2em; justify-content: flex-start; } .linkWrap.flex.col-7 > li { width:calc((100% - 6em) / 4); } .subMenu.center-wrap { padding: 0 0%;} .mainTitle { top:46%; transform: translateX(-50%); font-size:27px; color:#fff; font-weight:600; text-align:center; z-index:999 } } @media only screen and (max-width: 960px) { .contactWrap { flex-wrap:wrap; } .contactWrap .map { width:100%;} .contact_box { width:100%; } .contact_list { display:flex; justify-content: space-around; } .contact_list > li:nth-child(2) { margin-top:0px; } .contact_list li h3 { font-size:20px; } .contact_list li dl dt {width:80px; } .contact_list li p { font-size:14px; } .contact_list li ul li { font-size:16px; } } @media only screen and (max-width: 768px) { #mainSlider { [slogan-wrap] { [slogan] { p { &.tit { font-size: 20px; } &.con { font-size: 20px; } } } } } .linkWrap.flex.col-7 > li { width:calc((100% - 2em) / 2); } > .bottom-wrap { > .copyright { padding-bottom:100px; } } .banner_list { gap:3em; } .footer { padding:30px 0; } .copy_add { margin-top:30px; color:#fff; } .copy_add p span { margin-left: 0px; display:block; } .contentsQuick { position: fixed; bottom:0px; top:auto; width: 100%; } .quickWrap { border-radius:30px 30px 0 0px; padding:10px 18px; } .quickWrap ul {display:flex; justify-content:space-around; } .quickWrap ul li { margin:0px 0; } .medical_title h2 { font-size:25px; } .medical_title .txt { font-size:15px; padding:0 50px; word-break:keep-all; } .swiper-slide .txt_box br { display:none; } .mainTitle { top:43%;font-size:22px; } } @media only screen and (max-width: 540px) { .topWrap { padding:15px 0; } .topWrap .flex li:nth-child(1) { width:185px; } .topWtap ul li .tel a { padding:3px 8px; font-size:15px; line-height:1; img { width:16px; } } #mainSlider { [slogan-wrap] { top: 25%; left: 50%; [slogan] { p { line-height:1.2em; &.tit { font-size: 15px; } &.con { font-size: 15px; margin-top: 3em; } } } } } .notic_list ul li {display:block;} .notic_list ul li span.ellipsis { width:100%; } .contact_list { display:block; } .contact_list > li:nth-child(2) { margin-top:20px; } .contact_list li h3 { font-size:24px; } .contact_list li dl dt {width:100px; } .contact_list li p { font-size:16px; } .contact_list li ul li { font-size:18px; } .banner_list { gap:1em; } .homeNavi { width:40px; } .subMenu-3 { flex-wrap:wrap; margin-bottom:30px; > li { width:100%; &._on > a { display:block; } > a { display:block; } } } } @media only screen and (max-width: 540px) { .mainBanner { width: 100%; left: 0; transform: translateX(0); } } } body { padding-top: 0; &.menu-fixed { .mainMenuWrap { position: fixed; top: 0; margin-top: 0; width: 100%; max-width: 1920px; background-color: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(5px); box-shadow: 0px 1px 5px gray; z-index: 1039; .ezMenuContainer, .mainMenu { background: none; } .ezMenuContainer > ul > li > a { color: #333; } } .ez-subMenuBG { position: fixed !important; } @media only screen and (min-width: 1500px) { .mainMenuWrap { padding: 0 calc(50% - 750px); } } @media only screen and (min-width: 1920px) { .mainMenuWrap { padding: 0 210px; } } } } @keyframes ani_mainSlider { 0% { opacity: 0; top: 1em; } 20% { opacity: 1; top: 0; } 85% { opacity: 1; top: 0; } 100% { opacity: 0; top: 1em; } }