/* section */ section { padding: 6vw 0; } section >* { z-index: 5 } section .title_box .title_box {position: relative;padding-left: 110px;font-style: normal;font-size: 20px;color: var(--secondary);letter-spacing: 2px;font-family: 'Lato',sans-serif;font-weight: 500;text-transform: uppercase} section .title_box .title_box::before {content: "";display: block;width: 88px;height: 1px;background: var(--secondary);position: absolute;top: 10px;left: 2px;} section .title_box .text {font-weight: 700;font-size: 42px;color: #4f4032;position: relative;font-family: 'Lato',sans-serif;line-height: 160%;text-transform: uppercase;margin: 20px 0;letter-spacing: 2px;} section .title_box .page_title {font-weight: 600;font-size: 28px;color: var(--secondary);position: relative;font-family: 'Lato',sans-serif;line-height: 110%;text-transform: uppercase;margin-bottom: 30px;display: flex;align-items: stretch;letter-spacing: 3px;} section .title_box .page_title svg { width: 31px; height: 28px; fill: var(--complement); margin-right: 10px } section .title_box p { line-height: 130%; letter-spacing: 0.5px; font-weight: 400; font-size: 20px; color: var(--complement); position: relative; } section.bg_box { background: no-repeat 50%/cover; padding: 3vw 0 3vw 0; } .more_btn { margin-top: 0px } .more_btn a { position: relative; overflow: hidden; width: 110px; padding: 10px 50px 10px 30px; display: inline-block; border-radius: 100px; } .more_btn font { font-size: 14px; position: relative; -webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit; color: #fff; text-transform: uppercase; text-align: left; font-weight: 500; letter-spacing: 1px; font-family: 'Lato',sans-serif; } .more_btn span::before { content: ""; position: absolute; top: calc(50% - 0px); right: 25px; width: 18px; height: 2px; background-color: currentColor; background: #fff } .more_btn span::after { content: ""; position: absolute; top: calc(50% - 5px); right: 25px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) } .more_btn a:before { content: ""; height: 100%; width: 100%; display: block; position: absolute; bottom: 0; left: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: linear-gradient(to right,#b4b4b4 0,#b4b4b4 60%,#b4b4b4 110%); } header #webmenu { opacity: 0 } header.scroll #webmenu { opacity: 1 } /* sideMenuBox */ .sideMenuBox { width: 320px; height: 460px; background: white; border-radius: 200px 200px 60px 60px; padding: 70px 20px 80px 20px; position: absolute; bottom: 0; z-index: 100; opacity: 1; top: 47%; left: 50%; transform: translate(-50%,-50%); -webkit-transition: all 0.9s 0.5s ease-in-out; transition: all 0.9s 0.5s ease-in-out } .sideMenuBox.scroll { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; top: 40% } .sideMenuBox.hide { left: -140px } .sideMenuBox .sideLogo { max-width: 220px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .sideMenuBox .sideLogo .side_Img {width: 120px;filter: saturate(50%);} .sideMenuBox .sideLogo .side_title { color: #575553; text-align: center; display: flex; flex-direction: column; margin-top: 10px; font-weight: 500; letter-spacing: 2px; word-spacing: 100vw; } .sideMenuBox .slideMenuTrigger { all: unset; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding-top: 30px; cursor: pointer } .sideMenuBox .telBox { padding: 40px 0 0px } .sideMenuBox .telBox a { display: flex; flex-direction: column; align-items: center } .sideMenuBox .telBox .txt .name { color: #595656; font-size: 18px; letter-spacing: 6px } .sideMenuBox .number { color: #78562a; font-size: 30px; font-family: 'Lato',sans-serif; display: flex; align-items: center } .sideMenuBox .telBox .number svg { width: 24px; height: 24px; fill: #78562a; margin-right: 10px } .sideMenuBox #webmenu nav ul { display: flex; justify-content: center } .sideMenuBox #webmenu nav ul li:first-child { border-left: 1px solid rgb(157 157 157/20%) } .sideMenuBox #webmenu nav ul li { border-right: 1px solid rgb(157 157 157/20%); padding: 0 10px } .sideMenuBox #webmenu nav ul li:hover { transform: translateY(-10%) } .sideMenuBox #webmenu nav ul li a svg { width: 30px; height: 20px; fill: #9cbc97; margin-bottom: 10px } .sideMenuBox #webmenu nav ul li a { writing-mode: vertical-lr; display: flex; flex-direction: row; align-items: center; font-size: 18px; letter-spacing: 8px; color: #4a4a4a } /* serviceArea */ .serviceArea {background-image: url(/images/39/img_service_BG.png);background-size: auto;background-position: 50% 40%;background-repeat: no-repeat;padding: 7vw 0;position: revert} .serviceArea .textBox { display: grid; grid-template-columns: 1fr 460px; gap: 10px 20px; align-items: center } .serviceArea .textBox.bottom {grid-template-columns: 1fr 50%;margin-top: 100px;} .serviceArea .textBox.bottom .stepItem {background:white;border: 5px solid rgb(133 119 107 / 50%);border-radius: 50px;padding: 35px 40px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 70px;} .serviceArea .textBox.bottom .stepItem .item{display:flex;flex-direction: column;align-items: center;white-space: initial;} .serviceArea .textBox.bottom .stepItem .item .Img{width: 75px;margin-bottom: 10px;} .serviceArea .textBox.bottom .stepItem .item .textBox{display:flex;flex-direction: column;align-items: center;gap: 5px;} .serviceArea .textBox.bottom .stepItem .item .textBox .stepTitle{text-align: center;t} .serviceArea .textBox.bottom .stepItem .item .textBox .stepText{text-align:center;letter-spacing: 1px;font-size: 17px;font-weight: 500;color: #8a7766;} .serviceArea .textBox .subtitle { position: absolute; right: -150px; top: -90px } .serviceArea .righttext { font-size: 19px; color: #54463b; letter-spacing: 2px; z-index: 10 } .serviceArea .wrap { max-width: 100%; overflow-x: clip } .serviceArea .serviceCircle { position: relative; max-width: 760px; margin: 0 auto } .serviceArea .inside { position: relative } .serviceArea .inside .serviceImg { position: relative; top: 0px; left: 0; display: block; width: 100%; height: 100%; pointer-events: none } .serviceArea .moreBtn3 { position: absolute; bottom: 0; left: 14%; z-index: 20 } .serviceArea .moreBtn3 a { width: 100px; height: 100px; background-color: #724f37; padding: 30px; border-radius: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center } .serviceArea .moreBtn3 a:hover svg { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: .2 } .serviceArea .moreBtn3 a:hover { background-color: #5a5757 } .serviceArea .moreBtn3 a span { font-size: 14px; color: #fff; font-family: 'Lato',sans-serif; margin-bottom: 10px } .serviceArea .moreBtn3 a svg { width: 30px; height: 20px; fill: #fff } .serviceArea .inside .serviceImg .dashCircle { -webkit-user-select: none; user-select: none; overflow: hidden; width: 68%; margin: auto } .serviceArea .inside .serviceImg .deliciousMeet { width: 100%; height: 100% } @keyframes rotate { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } } .serviceArea .inside .serviceImg .dashCircle img {width: 100%;display: block;aspect-ratio: 1/1;object-fit: cover;border-radius: 50%;} .serviceArea .inside .serviceImg .sloganTw { top: 60%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1; width: 100%; height: 100% } .serviceArea .inside .serviceImg .sloganTw img { margin: 0 auto } .serviceArea .inside .serviceImg .deliciousMeet { left: 0%; right: 23%; top: 59%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; margin: 0 auto; padding: 0; z-index: -10; width: 100%; height: 100% } .serviceArea .inside .serviceImg .deliciousMeet img { width: 100% } .serviceArea .inside .textBox { position: absolute; top: 58%; display: block; width: 100% } .serviceArea .inside .titleBox { margin-bottom: 10px } .serviceArea .inside .titleBox .subtitle { margin-bottom: 210px } .serviceArea .inside .titleBox .subtitle span { position: absolute; background: linear-gradient(to top,#dbba79 50%,#b48427 100%); background-size: cover; background-repeat: no-repeat; width: 5px; height: 120px; bottom: -20px; left: 50.1%; transform: translate(-50%,100%); overflow: hidden } .serviceArea .inside .titleBox .subtitle span::after { content: ""; position: absolute; top: -10px; right: 0; z-index: 1; width: 5px; height: 40px; background: linear-gradient(to top,#e6b96270 50%,#bc8f38 100%); background-size: cover; background-repeat: no-repeat; animation: scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite; -webkit-animation: scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite } @keyframes scrollarrow1 { 0% { transform: translateY(-150%) } 50% { transform: translateY(0%) } to { transform: translateY(500%) } } @-webkit-keyframes scrollarrow1 { 0% { -webkit-transform: translateY(-150%) } 50% { -webkit-transform: translateY(0%) } to { -webkit-transform: translateY(500%) } } .serviceArea .inside .subtitle img { display: block; margin: 0 auto } .serviceArea .outside .serviceStep { position: absolute; top: 0; display: block; width: 100%; height: 100% } .serviceArea .inside .titleBox .title { font-weight: bold; font-size: 38px; letter-spacing: 5px; color: #2b2b2b; text-align: center; margin: -24px 0 0 0 } .serviceArea .inside .titleBox .decoTitle { color: #82a2a2; font-size: 120px; line-height: 60%; text-transform: uppercase; font-family: "Cormorant Infant",serif; text-align: center; opacity: .3; letter-spacing: 5px } .serviceArea .outside .item { display: block } .serviceArea .outside .circleBox { position: relative; z-index: 10; display: inline-block } .serviceArea .outside .item:hover .circleBox span { top: 48%; width: 140px; height: 140px } .serviceArea .outside .item:hover .circleBox .circle { width: 100px; height: 100px } .serviceArea .outside .item:hover .circleBox .Img { opacity: 1 } .serviceArea .outside .circleBox span {position: absolute;top: 60%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);display: block;width: 20px;height: 20px;width: 110px;height: 110px;border-radius: 100%;background: #85776b;opacity: 0.5} .serviceArea .outside .circleBox .circle { position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: inline-block; width: 100px; height: 100px; border-radius: 100%; background: #fff } .serviceArea .outside .circleBox .Img { position: absolute; top: 50%; z-index: 2; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 50px; height: 50px; opacity: 1 } .serviceArea .outside .circleBox .Img img { margin: 0 auto; display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain } .serviceArea .outside .textBox { position: absolute; top: 50%; right: 95px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 200px; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: end; align-items: flex-end } .serviceArea .outside .textBox .stepTitle, .serviceArea .textBox.bottom .stepItem .item .textBox .stepTitle {font-size: 22px;color: #5f4a3a;letter-spacing: 1px;font-weight: 600;letter-spacing: 2px} .serviceArea .outside .textBox .stepText {color: #8a7766;text-align: end;letter-spacing: 1px;font-size: 17px;font-weight: 500} /* fly-could */ #fly-could { transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; -ms-transition: unset } .fly-out {position: absolute;z-index: 9;width: 245px;height: 295px;bottom: 250px;right: -130px;} .fly-out img { -webkit-animation: butterfly 4s -2.8s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation: butterfly 4s -2.8s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite } .fly-out02 {position: absolute;z-index: 13;width: 224px;height: 170px;bottom: 80px;left: -12%;} .fly-out02 img { -webkit-animation: butterfly 8s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation: butterfly 8s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite } .fly-out03 {position: absolute;z-index: 9;width: 190px;height: 178px;bottom: -26%;right: 47%;display: none;} .fly-out03 img { -webkit-animation: butterfly 6s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation: butterfly 6s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; } .fly-out04 { position: absolute; z-index: 10; width: 45px; height: 38px; top: 70px; right: 170px } .fly-out04 img { -webkit-animation: butterfly 12s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; animation: butterfly 12s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite; } #fly-could img,#fly-could02 img,#fly-could03 img,#fly-could04 img,#fly-could05 img { width: auto; height: auto; transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; -ms-transition: unset } @-webkit-keyframes butterfly { 0%,32%,64%,100% { -webkit-transform: translateY(0); transform: translateY(0) } 16%,48%,80% { -webkit-transform: translate(5px,-5px) scaleX(0.88) rotateY(20deg); transform: translate(5px,-5px) scaleX(0.88) rotateY(20deg) } } @keyframes butterfly { 0%,32%,64%,100% { -webkit-transform: translateY(0); transform: translateY(0) } 16%,48%,80% { -webkit-transform: translate(5px,-5px) scaleX(0.88) rotateY(20deg); transform: translate(5px,-5px) scaleX(0.88) rotateY(20deg) } } /* mainArea */ #mainArea { background-color: #f8f6f3; position: relative } /* photo_area */ #photo_area { padding: 20px 0; } #photo_area .track {width: 100vw;max-width: 100%;white-space: nowrap} #photo_area .track p {animation: marquee 30s linear infinite;display: flex;gap: 110px;} #photo_area .track p img {aspect-ratio: 1/1;object-fit: cover;width: 430px;border-radius: 0 410px 410px 0;box-shadow: 30px 40px 60px rgb(177 177 177 / 50%);} #photo_area .track p img:nth-child(2n){border-radius: 410px 410px 0 0;} #photo_area .track p img:nth-child(3n){border-radius: 0 0 0 220px;} #photo_area .track p img:nth-child(4n){border-radius: 220px 0 0 0;} @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* about_area */ #wrap { position: relative } #about_area {padding: 5vw 0;position: relative} @keyframes circle { 0% { transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0) } 100% { transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg) } } #about_area::after {content: '';position: absolute;height: 100%;width: 100%;bottom: -250px;right: 0;background-image: url(/images/39/img-ab-04.png);background-repeat: no-repeat;background-size: cover;opacity: 1;z-index: 3} #about_area .aboutArea .textBox {display: grid;grid-template-columns: 1fr 55%;gap: 20px;margin-bottom: 130px;} #about_area .aboutArea .content_box { padding: 20px 40px; color: #3a2618; letter-spacing: 0px; line-height: 190% } #about_area .areaTitle .title_box h2 { margin-bottom: 20px; color: var(--white); text-align: center; font-size: 72px } #about_area .areaTitle .title_box p { font-size: 18px; color: var(--white); text-align: center; width: 600px; margin: auto; line-height: 170%; position: relative; padding-top: 30px; margin-top: 30px } #about_area .areaTitle .title_box p:before { content: ""; width: 80px; height: 1px; background: #ffffff70; display: block; position: absolute; top: 0px; left: 50%; transform: translate(-50%,-50%) } #about_area .aboutArea .schedule{background:white;border-radius: 50px;} #about_area .aboutArea .schedule #Outpatient8x4 .pc { overflow: hidden; } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list {overflow: hidden;font-size: 18px;border-top: 1px solid rgb(228 224 218);display: flex;padding: 0 20px;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .mother { border-top: 0; } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list .con {float: left;width: calc((100% - 60px) / 7);text-align: center;display: inline-flex;position: relative;align-items: center;justify-content: center;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list.mother .con p { color: #54463b; } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list .con:first-child p {font-family: "Nunito Sans", sans-serif;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p {text-align: center;padding: 20px 0;color: #54463b;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 10px;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p span a{position: relative;display: block;color: #ffa126;text-align: center;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p span.blue a, #about_area .aboutArea .schedule .doctor p span.blue a{color: #558ddd;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p span.blow a, #about_area .aboutArea .schedule .doctor p span.blow a{color: #318436;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p span.blueness, #about_area .aboutArea .schedule .doctor p span.blueness{background: #89b9b3;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p span.green a, #about_area .aboutArea .schedule .doctor p span.green a{color: #6f4aa3;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p span.orange a, #about_area .aboutArea .schedule .doctor p span.orange a{color: #f35caf;} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list .con:last-child p { border: none; } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p.gray { display: flex; align-items: center; } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p.gray span { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list p.gray span::before {} #about_area .aboutArea .schedule #Outpatient8x4 .pc .list .con:first-child {width: 60px;} #about_area .aboutArea .schedule .infotxt {color: #54463b;border-top: 1px solid rgb(228 224 218);margin-bottom: 20px;padding: 10px 20px 0;font-size: 15px;} #about_area .aboutArea .schedule .doctor{display: grid;grid-template-columns: 1fr 1fr;padding: 0 20px 20px;} #about_area .aboutArea .schedule .doctor p {font-size: 14px;display: flex;align-items: center;gap: 3px;color: #555252;} #about_area .aboutArea .schedule .doctor p span{width:0.75rem;aspect-ratio: 1/1;border-radius: 50px;background: var(--info);} #about_area .about_logo { text-align: center; margin-top: 60px } #about_area .about_icon * { transition: unset; -webkit-transition: unset } #about_area .title_box .pageh1 {word-spacing: 100vw;font-weight: 700;font-size: 42px;color: #4f4032;position: relative;font-family: Lato, sans-serif;line-height: 160%;text-transform: uppercase;letter-spacing: 5px;margin: 20px 0px;word-break: keep-all;} #about_area .title_box p { color: #3a2618; word-spacing: 100vw; letter-spacing: 2px; line-height: 170%; margin-top: 50px } #about_area .schedule_box { background-color: #fff; padding: 20px 50px; border-radius: 30px } #about_area .schedule_box .item { display: grid; grid-template-columns: 130px 1fr; gap: 20px 60px; align-items: start; } #about_area .schedule_box .item .noteBox { display: flex; justify-content: space-around; width: 270px; letter-spacing: 5px; margin-bottom: 10px } #about_area .schedule_box .ttll { background-color: #f7e7d2; display: flex; justify-content: center; gap: 8px } #about_area .schedule_box .txt { display: flex; flex-direction: column; align-items: flex-start; align-content: space-around } #about_area .schedule_box .txt font { font-family: 'Lato',sans-serif; font-size: 20px; color: #787878 } #about_area .schedule_box .txt font span { margin: 0 20px } #about_area .aboutProtectArea { display: grid; grid-template-columns: 440px 1fr 330px; gap: 20px 20px } #about_area .aboutProtectArea >div:first-child{transform: translateX(-75px);} #about_area .aboutProtectArea >div:first-child img{aspect-ratio:3/4;object-fit: cover;border-radius: 65px;} #about_area .aboutProtectArea .areaTitle { display: flex; flex-direction: column; align-items: center; margin-right: 70px; margin-top: 50px } #about_area .aboutProtectArea .areaTitle .areaTitle_box { position: revert } #about_area .aboutProtectArea .areaTitle_box h2:before { content: ''; position: absolute; height: 17px; width: 23px; top: -30px; left: -20px; background-image: url(/images/39/img-ab-icon-l.png); background-repeat: no-repeat; background-size: cover } #about_area .aboutProtectArea .areaTitle_box h2:after { content: ''; position: absolute; height: 17px; width: 23px; bottom: -30px; right: -20px; background-image: url(/images/39/img-ab-icon-r.png); background-repeat: no-repeat; background-size: cover } #about_area .aboutProtectArea .areaTitle .text {text-align: center;line-height: 220%;letter-spacing: .5px;} #about_area .aboutProtectArea .areaTitle_box h2 { text-align: center; font-size: 28px; color: #724f37; font-weight: 400; letter-spacing: 3px; position: relative } #about_area .aboutProtectArea .areaTitle_box p {text-align: center;margin: 30px;opacity: 0;} #about_area .aboutProtectArea .bottom { margin-top: 130px } #about_area .aboutProtectArea .bottom img{border-radius: 65px;height: 460px;object-fit: cover;} #about_area .about_icon { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1 } /* news_area */ #news_area {padding: 3vw 0 5vw 0;position: relative} #news_area .title_box .title_box {color: #4f4032;} #news_area .title_box .page_title { margin-top: 20px } #news_area .title_box .title_box::before {background: #4f4032;} #news_area #imglist { display: grid; grid-template-columns: 55% 35%; gap: 80px; width: 100%; align-items: end; margin-top: 70px } #news_area #imglist .left ul { -webkit-box-shadow: 10px 20px 55px 0px rgba(0,0,0,0.15); box-shadow: 10px 20px 55px 0px rgba(0,0,0,0.15); background-color: #fff; } #news_area #imglist .left li { background-color: #fff } #news_area #imglist .left li .leftItem { display: grid; grid-template-columns: 400px 1fr; gap: 0px } #news_area .right { position: relative } #news_area li .img_scale img { aspect-ratio: 1/1; width: 100% } #news_area .img_box li .item { padding: 50px 30px; gap: 20px; display: flex; flex-direction: column; justify-content: space-between } #news_area .img_box li .item .info_box .time { display: flex; flex-direction: column; align-items: center; width: 50px; color: var(--secondary); font-family: 'Lato',sans-serif; margin-bottom: 30px } #news_area .img_box li .item .info_box .time b { font-size: 40px; font-family: 'Lato',sans-serif; font-weight: 400; color: var(--secondary); line-height: 90% } #news_area li .item .Txt h3 { color: #54463b; font-size: 20px; letter-spacing: 1px; margin-bottom: 10px; -webkit-line-clamp: 2; height: auto; font-weight: 500 } #news_area li .item .Txt article { color: #848484; font-size: 18px } #news_area .img_nav li .item .Txt h3 { -webkit-line-clamp: 1; height: auto; margin-bottom: 20px; font-size: 19px } #news_area .img_nav li .row { padding: 0 15px } #news_area .img_nav li { border-bottom: 1px solid #dddddd; margin-bottom: 30px } #news_area .img_nav li .info_box { margin-bottom: 5px } #news_area .img_nav li .info_box .Ntxt { background: #e5e4e1; padding: 2px 18px; border-radius: 100px } #news_area .img_nav li .info_box .time { font-weight: 500; font-size: 14px; color: #666666; margin-right: 20px; letter-spacing: .5px; font-family: 'Lato',sans-serif } #imglist .img_nav { width: 100%; right: 0 } #imglist .img_nav .img_show { margin: 0 10px 0 } #imglist .img_nav img { width: 140px; aspect-ratio: 4/3; object-fit: cover } .newsbtn { display: flex; justify-content: space-between; align-items: center; position: absolute; top: 60px; right: 40px; } #news_prev { -webkit-transform: scaleX(-1); transform: scaleX(-1); position: relative } #news_prev,#news_next {-webkit-box-shadow: 8px 9px 20px 1.4px rgb(192 192 192/50%);box-shadow: 8px 9px 20px 1.4px rgb(192 192 192/50%);border-radius: 150px;margin: 0 7px;padding: 0;} #news_prev svg,#news_next svg {width: 30px;height: 30px;fill: var(--secondary);display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: var(--white);border-radius: 150px;padding: 20px} #news_next svg { background-color: var(--secondary); fill: var(--white) } @media screen and (max-width:1440px) { #about_area .aboutProtectArea{grid-template-columns: 370px 1fr 280px;} .serviceArea .textBox.bottom .stepItem .item .textBox .stepTitle{font-size: 20px;letter-spacing: 1px;} } @media (max-width:1350px) { .serviceArea .serviceCircle { max-width: 600px; } .serviceArea .inside .textBox { top: 40% } .serviceArea .outside .stepList .stepItem:nth-of-type(4) .textBox,.serviceArea .outside .stepList .stepItem:nth-of-type(6) .textBox,.serviceArea .outside .stepList .stepItem:last-of-type .textBox { left: 50px } .serviceArea .outside .circleBox:hover span { width: 90px; height: 90px } .serviceArea .outside .circleBox:hover .circle { width: 70px; height: 70px } .serviceArea .outside .circleBox .Img { width: 40px; height: 40px } .serviceArea .outside .textBox { right: 80px; } #about_area .aboutProtectArea { grid-template-columns: 260px 1fr 180px; } } @media screen and (min-width:1281px) { .more_btn.white a:hover font { color: #ffffff } .more_btn.white a:hover { width: 150px } } @media screen and (max-width:1440px) { section .title_box .text, #about_area .title_box .pageh1{font-size: 35px;} section .title_box .page_title{font-size: 23px;} } @media screen and (max-width:1280px) { .sideMenuBox { padding: 70px 20px 40px 20px; top: 50%; } .sideMenuBox #webmenu nav ul li a { letter-spacing: 2px; font-size: 17px; } section .title_box { margin-bottom: 0px } #news_area #imglist .left li .leftItem { grid-template-columns: 320px 1fr; } #news_area .img_box li .item { padding: 20px 20px; } #news_area .img_nav li { margin-bottom: 10px; } } @media (max-width:1200px) { #about_area .aboutProtectArea >div:first-child { transform: translateX(0); } #about_area .aboutProtectArea >div:first-child img { aspect-ratio: 4.5/3 } #imglist .img_nav { position: relative } #news_area::after { width: 100%; height: 45% } #about_area .about_logo { margin: 50px auto; width: 200px } .more_btn a { padding: 6px 30px 6px 20px } .serviceArea .textBox { grid-template-columns: 1fr; margin-bottom: 50px; } .serviceArea .textBox .subtitle { right: 0; } .serviceArea .textBox.bottom .stepItem .item .textBox { margin-bottom: 0 } .serviceArea .textBox.bottom { grid-template-columns: 1fr } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list,#about_area .aboutArea .schedule .infotxt,#about_area .aboutArea .schedule .doctor {padding-left: 20px;padding-right: 20px;} } @media (max-width:1180px) { .sideMenuBox { display: none } } @media screen and (min-width:1181px) { .serviceArea .outside .stepList .stepItem { position: absolute; display: inline-block } .serviceArea .outside .stepList .stepItem:first-of-type,.serviceArea .outside .stepList .stepItem:nth-of-type(2),.serviceArea .outside .stepList .stepItem:nth-of-type(3),.serviceArea .outside .stepList .stepItem:nth-of-type(4) { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .serviceArea .outside .stepList .stepItem:nth-of-type(5),.serviceArea .outside .stepList .stepItem:nth-of-type(6),.serviceArea .outside .stepList .stepItem:nth-of-type(7),.serviceArea .outside .stepList .stepItem:last-of-type { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } .serviceArea .outside .stepList .stepItem:nth-of-type(5) .stepText, .serviceArea .outside .stepList .stepItem:nth-of-type(4) .stepText, .serviceArea .outside .stepList .stepItem:last-of-type .stepText { text-align: justify } .serviceArea .outside .stepList .stepItem:nth-of-type(5) .textBox, .serviceArea .outside .stepList .stepItem:nth-of-type(4) .textBox, .serviceArea .outside .stepList .stepItem:last-of-type .textBox { left: 75px; right: auto; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start } .serviceArea .outside .stepList .stepItem.move:first-of-type {top: 15%;left: -25px;} .serviceArea .outside .stepList .stepItem.move:first-of-type .item { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s } .serviceArea .outside .stepList .stepItem.move:nth-of-type(2) {top: 46%;left: -25px;} .serviceArea .outside .stepList .stepItem.move:nth-of-type(2) .item { opacity: 1; -webkit-transition-delay: 0.4s; transition-delay: 0.4s } .serviceArea .outside .stepList .stepItem.move:nth-of-type(4) {top: 15%;right: 1%;} .serviceArea .outside .stepList .stepItem.move:nth-of-type(3) .item { opacity: 1; -webkit-transition-delay: 1.6s; transition-delay: 1.6s } .serviceArea .outside .stepList .stepItem.move:nth-of-type(5) { top: 46%; right: 1%; } .serviceArea .outside .stepList .stepItem.move:nth-of-type(4) .item { opacity: 1; -webkit-transition-delay: 1.4s; transition-delay: 1.4s } .serviceArea .outside .stepList .stepItem.move:nth-of-type(3) {top: 77%;left: -25px;} .serviceArea .outside .stepList .stepItem.move:nth-of-type(5) .item { opacity: 1; -webkit-transition-delay: 1.2s; transition-delay: 1.2s } .serviceArea .outside .stepList .stepItem.move:last-of-type {top: 77%;right: 1%;} .serviceArea .outside .stepList .stepItem.move:last-of-type .item { opacity: 1; -webkit-transition-delay: 1s; transition-delay: 1s } } @media (max-width:1180px) { .serviceArea { background-position: 30% 50%; } .serviceArea .outside .stepList { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px 20px; margin-top: 40px; } .serviceArea .outside .circleBox { position: absolute; top: 35%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin: 0 auto; display: none; } .serviceArea .outside .circleBox:hover span { width: 20px; height: 20px } .serviceArea .outside .circleBox:hover .circle { width: 6px; height: 6px } .serviceArea .outside .circleBox:hover .Img { opacity: 0 } .serviceArea .outside .textBox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; position: static; -webkit-transform: translateY(0); transform: translateY(0); width: 100%; max-width: 210px } .serviceArea .outside .textBox .stepTitle { padding-top: 20px; white-space: nowrap } .serviceArea .outside .textBox .stepText,.serviceArea .outside .stepList .stepItem:last-of-type .stepText { text-align: center } .serviceArea .inside .textBox { top: auto; position: relative; margin-top: 0 } .serviceArea .inside .titleBox .subtitle { margin-bottom: 0; position: absolute; top: -230%; left: 10%; width: 80%; } .serviceArea .inside .titleBox .title { font-size: 30px } .serviceArea .inside .titleBox .subtitle span { height: 100px; display: none } .serviceArea .outside .serviceStep { position: relative } .serviceArea .serviceCircle { max-width: 100%; margin: 0 auto 70px } .serviceArea .serviceCircle { margin: 0 auto 20px; } #about_area .aboutArea .textBox { grid-template-columns: 1fr; gap: 40px; } #about_area .title_box p { margin-top: 20px; font-size: 18px; } #about_area .aboutProtectArea .bottom { display: none; } #about_area .aboutProtectArea { grid-template-columns: 1fr; } #about_area .aboutProtectArea .ImgCenter .Img { text-align: center; } #about_area .aboutProtectArea .areaTitle { margin: 0; margin-top: 50px; } } @media screen and (max-width:1024px) { #news_area #imglist { display: flex; flex-direction: column; gap: 20px; justify-content: center; margin-bottom: 30px; } #news_area #imglist .left { order: 1; width: 100% } #news_area #imglist .right .img_nav,.serviceArea .textBox .subtitle { display: none } #news_area .img_box li .item { padding: 40px 20px; } #news_area li .more_btn.white font { display: none } #news_area li .more_btn a { width: 40px; padding: 20px 10px 20px 10px } #photo_area .track p img { width: 320px; } #photo_area .track p { gap: 70px; } .newsbtn { right: 0; top: 80px; } #news_prev svg,#news_next svg { width: 30px; height: 30px; padding: 15px; } #news_area #imglist .left li .leftItem { grid-template-columns: 1fr; } #news_area li .img_scale img { aspect-ratio: 4/2.7; } } @media (max-width:960px) { #news_area { padding: 10vw 0 16vw 0; } #about_area .areaTitle .title_box p { width: 90% } .serviceArea .inside .titleBox .subtitle { left: 10%; top: -208%; width: 80%; } section .title_box .title_box { font-size: 16px; } section .title_box .text,#about_area .title_box .pageh1 { font-size: 24px; } section .title_box .page_title { font-size: 20px; margin-bottom: 20px; } section .title_box .page_title svg { width: 26px; height: 20px; } .serviceArea .inside .serviceImg .dashCircle { width: 90%; } .serviceArea .inside .serviceImg .sloganTw { top: 50%; width: 90%; height: 90%; } .serviceArea .moreBtn3 a { width: 90px; height: 90px; padding: 20px; } .serviceArea .moreBtn3 { left: 1%; } #about_area .schedule_box .item { gap: 10px; } #about_area .schedule_box { padding: 30px 20px; display: flex; flex-direction: column; gap: 10px; } #about_area .aboutArea .content_box { padding: 20px 20px; } #about_area .aboutProtectArea .areaTitle_box h2 { font-size: 20px; } .fly-out { width: 155px; height: 155px; right: -70px; bottom: 340px; } .fly-out02 { width: 134px; height: 90px; left: -23%; } } @media screen and (max-width:640px) { #about_area .aboutArea .schedule #Outpatient8x4 .pc { overflow-x: scroll; } #Outpatient8x4 .list { grid-template-columns: 72px repeat(7,105px); min-width: 807px; } #Outpatient8x4 .con p,#about_area .aboutArea .schedule #Outpatient8x4 .pc .list p span { font-size: 14px; } #about_area .aboutArea .textBox { display: flex; flex-direction: column; } #about_area .aboutArea .schedule { border-radius: 35px } #about_area .aboutArea .schedule #Outpatient8x4 .pc .list,#about_area .aboutArea .schedule .infotxt,#about_area .aboutArea .schedule .doctor {padding-left: 15px;padding-right: 15px;} #about_area .aboutArea .schedule .doctor { grid-template-columns: 1fr } .serviceArea .textBox.bottom .stepItem { gap: 30px; padding: 25px 35px; } .serviceArea .outside .textBox .stepText,.serviceArea .textBox.bottom .stepItem .item .textBox .stepText { font-size: 15px; } .serviceArea .righttext { font-size: 16px; } #product_next::after { top: 6px; } .serviceArea { padding: 9vw 0 0vw 0; } .serviceArea .inside .titleBox .subtitle { left: 25%; top: -190%; width: 50%; } .serviceArea .inside .titleBox .decoTitle { font-size: 80px } #photo_area .track p img { width: 200px; margin: 0 -10px; } #about_area .schedule_box .item .noteBox { width: auto; padding: 0 40px; } #about_area .schedule_box .item { grid-template-columns: 1fr; } #about_area .schedule_box .txt { width: 100%; display: flex; align-items: center; } #about_area .schedule_box .txt font { font-size: 17px; } #news_area .img_box li .item { padding: 30px 20px; } #news_area .img_box li .item .info_box .time { margin-bottom: 10px; } #news_area li .item .Txt h3 { font-size: 17px; } } @media screen and (max-width:550px) { .serviceArea .inside .titleBox .subtitle { left: 35%; top: -110%; width: 30%; } }