/* 전체 스크롤바 스타일 */ ::-webkit-scrollbar { width: 6px; /* 세로 스크롤바 두께 */ height: 6px; /* 가로 스크롤바 두께 */ } /* 스크롤바 트랙(배경) */ ::-webkit-scrollbar-track { background: #f1f1f1; /* 트랙 배경 색상 */ border-radius: 10px; } /* 스크롤바 핸들(움직이는 부분) */ ::-webkit-scrollbar-thumb { background: #888; /* 핸들 색상 */ border-radius: 10px; } /* 스크롤바 핸들에 마우스 호버 시 */ ::-webkit-scrollbar-thumb:hover { background: #555; /* 어두운 색상으로 변경 */ } .mbskin {margin:var(--rbb-pd-bb) auto !important; max-width:640px; width:80%} body {font-family: var(--rbb-font),sans-serif !important; font-size:var(--rbb-fs-n); background:#fff; color:var(--rbb-text-dark1); -webkit-text-size-adjust:none;} h1,h2,h3,h4,h5,h6,p,input,textarea,label,select {font-family: var(--rbb-font) !important;word-break:keep-all;} img {max-width:100%} .linkbtn {width:30px;height:30px; color:#fff; border:1px solid #fff; border-radius:50%; display:inline-block; font-size:var(--rbb-fs-n); vertical-align:middle} .rbb-ui .rbbtn.long {margin:0 auto; width:40%; min-width:260px; display:block; font-size:var(--rbb-fs-nbb)} .tl-c {text-align:center; padding:var(--rbb-pd-b) 0; background: var(--rbb-color-sub2);margin-top:var(--rbb-pd-s)} .foottxt {display:inline-block; font-size:var(--rbb-fs-bb); text-align: center; position:relative; color:var(--rbb-color-main1); font-weight: 200} .foottxt span {position:absolute; top:10%;} .foottxt span.f {left:-50px} .foottxt span.l {right:-50px} .page30 {flex-wrap: wrap; justify-content:center; gap:var(--rbb-pd-b)} .vsimg { padding:var(--rbb-pd-bb); background:var(--rbb-color-sub2);text-align:center} .vsimg .flexarea > div {flex:50%; padding:var(--rbb-pd-b) ;border:1px solid #ddd; background:#fff;} .vsimg .flexarea > div:last-child {border-left:0;} .vsimg .con-img { display:block;} .vsimg .txt {padding:var(--rbb-pd-ss); font-size:var(--rbb-fs-nb); background: var(--rbb-color-main1); color:#fff; transform: translateY(-5px); border-radius:0 0 var(--rbb-br-n) var(--rbb-br-n)} .vsimg .con-img, .vsimg .txt {max-width:400px; margin:0 auto;} .header {position:fixed; top:0px;left:0;right:0; z-index:999; background:rgba(256,256,256,1); box-shadow: 0 4px 4px rgba(80,80,80,0.1);border-top:4px solid var(--rbb-color-main1); } .header .pageInner {position: relative; } .header .logoImg a {display:block} .header .logoImg {position:relative; width:340px; display:block; transition:all 0.2s ease} .header .logoImg img {width:100%} .flexarea {display:flex} .header .pageInner {max-width:100%} .header .pageInner .flexarea {justify-content:space-between; align-items:center} .commonNavi nav > ul {display:flex; padding-right:var(--rbb-pd-bb)} /*.commonNavi nav > ul > li {width:calc(100%/5);padding:var(--rbb-pd-n)}*/ .commonNavi nav > ul > li > a {font-weight:600;display:block; padding:var(--rbb-pd-nb) var(--rbb-pd-nb); text-align: center; font-size:var(--rbb-fs-nb)} /*.commonNavi nav > ul > li.current > a,*/ .commonNavi nav > ul > li:hover > a {color:var(--rbb-color-main2);} /*.commonNavi nav > ul > li:last-child > a {background:var(--rbb-color-main3); color:var(--rbb-text-light1); border-radius: var(--rbb-br-b)} .commonNavi nav > ul > li:last-child > a:hover {background:var(--rbb-color-main2); color:var(--rbb-text-light1)}*/ .commonNavi nav > ul > li {position:relative} .commonNavi nav > ul > li > span.bg {display:inline-block; background:url(/theme/hospModel/img/gnb_bg.gif) no-repeat 0 0; width:7px; height:4px; color:transparent; overflow:hidden; text-align:left; text-indent: -99px; position:absolute; top:55%; right:10px;} .commonNavi nav > ul > li ul {background:#fff; border-radius:var(--rbb-br-n); box-shadow:2px 2px 8px rgba(0,0,0,0.2); position:absolute; top:88%; left:-20px; right:-20px; padding:var(--rbb-pd-s); transform:scale(0)} .commonNavi nav > ul > li:hover ul {animation:gnbani 0.3s ease forwards;} .commonNavi nav > ul > li ul > li {display:block; font-size:var(--rbb-fs-ns); opacity:0;} .commonNavi nav > ul > li:hover ul > li:nth-child(0) {animation:gnbani 0.2s 0s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(1) {animation:gnbani 0.2s 0.05s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(2) {animation:gnbani 0.2s 0.1s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(3) {animation:gnbani 0.2s 0.15s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(4) {animation:gnbani 0.2s 0.2s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(5) {animation:gnbani 0.2s 0.25s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(6) {animation:gnbani 0.2s 0.3s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(7) {animation:gnbani 0.2s 0.35s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(8) {animation:gnbani 0.2s 0.4s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(9) {animation:gnbani 0.2s 0.45s ease forwards;} .commonNavi nav > ul > li:hover ul > li:nth-child(10) {animation:gnbani 0.2s 0.5s ease forwards;} .commonNavi nav > ul > li ul > li a {transition:all 0.2s ease; padding:var(--rbb-pd-s) var(--rbb-pd-n);display:block;border-radius:var(--rbb-br-n)} /*.commonNavi nav > ul > li ul > li.current a,*/ .commonNavi nav > ul > li ul > li:hover a {background:var(--rbb-color-main2);color:#fff;} @keyframes gnbani{ 0% {transform:translateY(-20px);opacity:0;} 100% {transform:translateY(0px);opacity:1;} } #mobileNavi {transform: translateX(100%);position:fixed;top:0;bottom:0; width:100%; max-width:460px; right:0; background:#fff; transition: transform 0.4s ease; z-index:9999; box-shadow:0 0 22px rgba(0,0,0,0.3);overflow-y:auto; } #mobileNavi.on {transform: translateX(0%);} #mobileNavi .movhd {border-bottom:1px solid #ddd;overflow:hidden; position:relative;border-top:4px solid var(--rbb-color-main1)} #mobileNavi .logoImg {display:block; text-align:center; padding:30px 100px 27px 0;} #mobileNavi .logoImg img {width:240px;} #mmnb {padding:var(--rbb-pd-n) var(--rbb-pd-b); } #mmnb > li > a {display:block; font-size:var(--rbb-fs-nb); color:#fff; padding:var(--rbb-pd-s) var(--rbb-pd-n); text-align:left;background:var(--rbb-color-main1);} #mmnb > li {margin-bottom:var(--rbb-pd-n)} #mmnb > li ul li > a {display:block; font-size:var(--rbb-fs-n); color:#222; padding:var(--rbb-pd-sss) var(--rbb-pd-s) var(--rbb-pd-s); text-align:left;} #mmnb > li ul li > a:before {content:''; display:inline-block; width:4px; height: 4px; border-radius:2px; background:var(--rbb-color-main2); vertical-align: 3px; margin-right:var(--rbb-pd-sss)} #mmnb > li ul {display:flex;flex-wrap: wrap} #mmnb > li ul li {flex:50%; width:100%} .mobileNaviBtn a, .mobileNaviBtnClose {display:block; font-size:var(--rbb-fs-b);color:#fff; padding:0 var(--rbb-pd-nb)} .mobileNaviBtn {display:flex; align-items:center; justify-content:center;height:100%;background:var(--rbb-color-main2);cursor: pointer;} .mobileNaviBtn, .mobileNaviBtnClose {position:absolute; top:0px; right:0px;} .mobileNaviBtnClose { background:var(--rbb-color-main2); padding:27px var(--rbb-pd-nb); cursor: pointer} .sub_topbar ul {} .sub_topbar ul li {border-radius:var(--rbb-br-n); margin-bottom:var(--rbb-pd-s);box-shadow:0 0 6px rgba(0,0,0,0.2); position:relative} .sub_topbar ul li .yicon {display:inline-block; width:40px; height:40px; margin-right: 8px; vertical-align:-14px;border-radius:var(--rbb-br-n); overflow:hidden} .sub_topbar ul li a {display:block; white-space: nowrap; cursor:pointer;position:relative;color:transparent;border-radius:var(--rbb-br-n);width:40px; height:40px; overflow: hidden;transition: width 0.3s ease;} .youtubeIconBtn .yicon {background:url(/theme/hospModel/img/youtube.png) no-repeat 50% 50%; background-size:100%;} .naverblogIconBtn .yicon {background:url(/theme/hospModel/img/blog.png) no-repeat 50% 50%; background-size:100%} .sub_topbar ul li a i {font-size:var(--rbb-fs-ss); opacity:0.3} .flex {display: flex} .pageInner {margin:0 auto; max-width: var(--rbb-inner); padding:0 var(--rbb-pd-b);} .pageInner2 {margin:0 auto; padding:0 var(--rbb-pd-b);} .hero-container .pageInner {margin:0 auto; max-width: var(--rbb-inner); padding:0 var(--rbb-pd-b);height:100% } .hero-container .pageInner .flexarea {height:100%; flex-wrap: wrap; align-items:center} .mainVisual-img01, .mainVisual-img02 {padding:var(--rbb-pd-bbb) 0; height: 100vh; align-items:center;} .mainVisual-img01 {background:var(--rbb-color-sub2) url(/theme/hospModel/img/main_vs01.jpg) no-repeat 100% 50%; background-size: cover;} .mainVisual-img02 {background:var(--rbb-color-sub2) url(/theme/hospModel/img/main_vs02.jpg) no-repeat 100% 50%; background-size: cover;} .hero-container .pageInner .flexarea {justify-content:center} .hero-container h1, .hero-container h2, .hero-container h3, .hero-container p {color:#fff; text-shadow: 2px 2px 2px rgba(0,0,0,0.2); word-break:keep-all;font-weight:200; text-align:center} .hero-container h1 {font-size:var(--rbb-fs-x); padding-bottom: var(--rbb-pd-s)} .hero-container p {font-size:var(--rbb-fs-sss); letter-spacing: 1.5rem; padding-left: 8px; opacity:0.7} .hero-container h2 {font-size:var(--rbb-fs-bbb); padding:var(--rbb-pd-s) 0; border-top:0px solid rgba(256,256,256,0.5);border-bottom:0px solid rgba(256,256,256,0.5); font-weight:400;} .hero-container h3 {border-top:1px solid rgba(256,256,256,0.5);border-bottom:1px solid rgba(256,256,256,0.5); font-size:var(--rbb-fs-b);padding:var(--rbb-pd-s) 0; letter-spacing: 1.6rem; padding-left: 4px} .hero-container { position: absolute; top: 0; left: 0; right: 0; height:100vh; z-index: 100; text-align: center; pointer-events: none; /* Swiper 버튼 클릭 가능하도록 */ } .hero--secondary { --mask: radial-gradient( circle at var(--x, 50%) var(--y, 50%), black var(--maskSize1, 0), transparent 0, transparent var(--maskSize2, 0), black var(--maskSize2, 0), black var(--maskSize3, 0), transparent 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:#fff; -webkit-mask-image: var(--mask); mask-image: var(--mask); opacity:0.1; } .into01 .flexarea {gap:2%; justify-content:center} .into01 .flexarea li {flex:30%; } .into01 .flexarea li a {display:block;position:relative; overflow:hidden; text-align:center; text-shadow:2px 2px 2px rgba(0,0,0,0.2);padding:100px 0;border-radius:var(--rbb-br-n);} .into01 .flexarea li .rbicon {display:block; width:80px;margin:0 auto} .into01 .flexarea li a h3 {color:#fff; font-size:var(--rbb-fs-bb);padding:var(--rbb-pd-n); text-shadow:2px 2px 4px rgba(0,0,0,0.2);font-weight:400} .into01 .flexarea li .rbimg {position:absolute; top:50%;left:50%; transform: translate(-50%,-50%) ; z-index:-1; display:block;width:100%;border-radius:var(--rbb-br-n);overflow:hidden } .into01 .flexarea li .rbimg:after { content:'';position: absolute; top:0;left:0;right:0;bottom:0;display:block; width:200%;backdrop-filter:blur(0) grayscale(0); background:rgba(0,0,0,0.4)} .into01 .flexarea li:hover .rbimg:after {backdrop-filter:blur(3px) grayscale(100%);} .section {padding:var(--rbb-pd-bbb) 0} .section h4 {font-size:var(--rbb-fs-b); color:var(--rbb-color-main2); word-break: keep-all; padding-bottom:var(--rbb-pd-s);letter-spacing: -0.03em; font-weight:400; text-align:center} .section h2 {font-size:var(--rbb-fs-x); color:var(--rbb-text-dark1); word-break: keep-all; line-height: 1.2;padding-bottom: var(--rbb-pd-bb); letter-spacing: -0.04em; font-weight: 200; text-align:center} .section h2.t-s {font-size:var(--rbb-fs-bbb);} .swiper-button-next, .swiper-button-prev {color:var(--rbb-color-main3) !important} .lightBg {background:#f8f8f8} .reversBg {background: rgb(42,145,201);background: linear-gradient(77deg, rgba(42,145,201,1) 21%, rgba(45,49,120,1) 71%); position: relative} /*.reversBg:before { background:url(/theme/hospModel/img/main-bg1.jpg) no-repeat 50% 50%; background-attachment: fixed; top:0;left:0;right:0;bottom:0; content:'';display:block;position:absolute;opacity: 0.2;z-index: 0}*/ .reversBg.section h4, .reversBg.section h2 {color:var(--rbb-text-light1)} .pb40 {padding-bottom:var(--rbb-pd-bb);} .main-p01 {position: relative} .main-p01.section h4, .main-p01.section h2 {color:var(--rbb-text-light1);position:relative;z-index:4;font-weight:200; text-shadow:0 0 12px rgba(0,0,0,0.2)} .main-p01:before {background:url(/theme/hospModel/img/allbg.jpg) no-repeat 50% 50%; background-size: cover; top:0;left:0;right:0;bottom:0; content:'';display:block;position:absolute;opacity:1;z-index: 0} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:var(--rbb-color-main3) !important} .clrArea .card {margin-top:var(--rbb-pd-n); border-radius:var(--rbb-br-n); border:1px solid #ddd; text-align:center; overflow: hidden; background:#fff;} .clrArea .card span {display:block; padding:var(--rbb-pd-n)} .clrArea.sm .card {background:#fff url(/theme/hospModel/img/smbg.jpg) no-repeat 0 100%; background-size:cover;padding:var(--rbb-pd-n); } .clrArea .card sub {display:block} .clrArea .card span.smimg {display:block; padding:var(--rbb-pd-n); background: #fff; border-radius:var(--rbb-pd-n); overflow: hidden;margin-bottom:var(--rbb-pd-n)} .clrArea .card span.smtxt {display:block; min-height:40px;padding:0 var(--rbb-pd-n) 0} .infoArea {} .infoArea ul {display:flex;border:1px solid rgba(256,256,256,0.3); border-radius: var(--rbb-br-n);background:rgba(256,256,256,0.1);backdrop-filter: blur(6px);} .infoArea ul li { text-align:left; border-right:1px solid rgba(256,256,256,0.3); padding:var(--rbb-pd-b); width:calc(100%/3);} .infoArea ul li:last-child {border-right:0} .infoArea ul li > span {padding:var(--rbb-pd-s) var(--rbb-pd-n);border:1px solid var(--rbb-text-light1); color:var(--rbb-text-light1); font-size: var(--rbb-fs-n); display:inline-block; border-radius:var(--rbb-br-b); margin-bottom:var(--rbb-pd-n)} .infoArea ul li > strong {font-size:var(--rbb-fs-bb); color:var(--rbb-text-light1); display: block;} .infoArea ul li > p {font-size:var(--rbb-fs-b); color:var(--rbb-text-light1); display: block;line-height:1.6;} .infoArea ul li a img {width:32px; height:32px; border-radius:5px; overflow:hidden; display:inline-block; margin-right:10px; vertical-align: middle} .infoArea ul li a {color:#fff} .getUnique {} .getUnique ul {display:flex;flex-wrap: wrap; gap: 2rem;} .getUnique ul li {flex:46%; padding:var(--rbb-pd-b); background:#fff; border:1px solid #ddd; border-radius: var(--rbb-br-n)} .getUnique ul li h3 {font-size:var(--rbb-fs-n);color:#fff; background:var(--rbb-color-main3);font-weight:400;padding:var(--rbb-pd-s) var(--rbb-pd-n); border-radius:var(--rbb-br-b);display:inline-block;} .getUnique ul li p {font-size:var(--rbb-fs-s);color:var(--rbb-text-dark2); word-break:keep-all;padding: var(--rbb-pd-n) 0} .rb-footer {padding:var(--rbb-pd-bb) var(--rbb-pd-b); background: var(--rbb-text-light1); color:var(--rbb-text-dark2);} .rb-footer .flex {justify-content: space-between;} .rb-footer span {display:inline-block; } .rb-footer span:after {content:'';display: inline-block; width:5px; height:5px; border-radius:50%; background:#000; opacity:0.3; vertical-align:middle;margin:0 var(--rbb-pd-s);} .fnb { border-bottom: 1px solid #ddd;} .fnb ul {} .fnb ul li {padding:var(--rbb-pd-n) 0} .fnb ul li a {padding:0 var(--rbb-pd-n);display:block; border-left:1px solid #ddd;} .fnb ul li:last-child a {border-right:1px solid #ddd;} #fixchat {position:fixed; bottom:20px; right:20px; background:var(--rbb-color-main2); border-radius:50%; width:80px; height:80px; display:block; z-index:990; animation:chatani 1s ease infinite; box-shadow:2px 2px 7px rgba(0,0,0,0.2)} #fixchat a {display:block; padding:14px} @keyframes chatani { 0% {transform:translateY(0);} 50% {transform:translateY(-8px);} 100% {transform:translateY(0);} } #top_btn_rb {position:fixed; bottom:10px; right:10px; z-index:997; width:40px; height:40px; border-radius:var(--rbb-br-n); background:var(--rbb-color-main3); color:#fff; font-size:var(--rbb-fs-n); border:0} #subTopArea {font-size:var(--rbb-fs-s); border-bottom: 1px solid #ddd;} #subTopArea span {display:block;padding:1rem var(--rbb-pd-n);color:var(--rbb-text-dark3)} #subTopArea a {color:var(--rbb-text-dark3)} .serviceGuide {padding:var(--rbb-pd-bb) 0 0} .serviceGuide .pageInner > div {background:url(/theme/hospModel/img/s01.jpg) no-repeat 100% 50%;background-size:430px;} .serviceGuide .pageInner > div ul {padding-right:40%; } .serviceGuide .pageInner > div ul li h3 {font-size:var(--rbb-fs-bb); color:var(--rbb-text-light1); letter-spacing: -0.03em; line-height: 1.8;padding-bottom: var(--rbb-pd-s); word-break: keep-all;background: rgb(42,145,201);background: linear-gradient(77deg, rgba(42,145,201,1) 21%, rgba(45,49,120,1) 71%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .serviceGuide .pageInner > div ul li p {font-size:var(--rbb-fs-s); word-break: keep-all} .serviceGuide .pageInner > div ul li {padding:var(--rbb-pd-n);} .serviceGuide .pageInner > div ul li i {font-size:var(--rbb-fs-b); color:var(--rbb-color-main3);line-height: 1.8;} .imgGallery .row { display: flex; flex-wrap: wrap; } .imgGallery .column { flex: 25%; max-width: 25%; padding: 4px; } .imgGallery .column img { margin-top: 8px; vertical-align: middle; } .ybg {background: var(--rbb-color-sub2)} #video-list .card {min-width:10px; min-height: 10px;margin-top: var(--rbb-pd-n);} #video-list .card a {display:block; border:1px solid #ddd; background:#fff; border-radius:var(--rbb-br-n); overflow: hidden; text-align:center;box-shadow:0 0 6px rgba(0,0,0,0.2)} #video-list .card p {padding:var(--rbb-pd-n); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .ytlist {padding:var(--rbb-pd-b) 0}