@charset "UTF-8"; .tabDepth>a, .lastDepth>a, .depth3>a, .depth3>a>span:before, .faq_list>li .q, .faq_list>li .q>.bul, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii, #mVisual .iconMenu .inConts>a, .swiper-button, .swiper-pagination-bullet, .m-tab>a, #quick-right>a, .store-area>.store-map .thumb .finding-map-link, .store-area>.store-map .thumb .finding-map-link:after, /*#quick-right,*/ #quick-social, #main-program .program-list>li>a, #mainStrengths .swiper-wrapper .swiper-slide .strengths-text>.btns>button{transition: all .3s ease-out; transform-origin: 50% 50%;} .historyArea .history_box>.logo>span, .historyArea .history_box>.list:before, #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #mainVisual .vTxt .ii{transition: all .7s ease-out; transform-origin: 50% 50%;} #mVisual .visualRoll .slider .photoBox p{transition: all 1s ease-out; transform-origin: 50% 50%;} #mainVisual .visualRoll .swiper-slide>img{transition: all 2s ease-out; transform-origin: 50% 50%;} /*[s] All Style */ .wideFrame{height: 60rem; position: relative;} .wideFrame :where(video, iframe, .g-box){width: 100%; height: 100%; position: absolute; left: 0; top: 0;} ._star>li{padding-left:1.1rem; font-size:1.7rem; line-height:1.3; color: #555; position: relative;} ._star>li:before{content: "*"; position:absolute; left: 0; top:0;} ._star>li+li{margin-top:0.5rem;} .starB>li{padding-left:2rem; font-size:1.6rem; line-height:1.3; color: #555; position: relative;} .starB>li:before{content: "※"; position:absolute; left: 0; top:0;} .starB>li+li{margin-top:0.5rem;} .bul-check>li{padding-left:4rem; font-size:2.4rem; line-height:4rem; color: #000; position: relative;} .bul-check>li:before{content: ""; width:3rem; height:3.1rem; background:url('/images/bul_30.png') no-repeat left center/3rem; position:absolute; left: 0; top:0.4rem;} .bul-check>li+li{margin-top:0.5rem;} .bul-check2>li{padding-left:2.3rem; font-size:2rem; line-height:3rem; color: #000; position: relative;} .bul-check2>li:before{content: ""; width:1.5rem; height:1rem; background:url('/images/bul_15.png') no-repeat left center/cover; position:absolute; left: 0; top:1rem;} .bul-check2>li+li{margin-top:0.8rem;} .bul-check2.blue>li:before{filter: brightness(0) saturate(100%) invert(18%) sepia(17%) saturate(7219%) hue-rotate(181deg) brightness(94%) contrast(101%);} .check-list{display: flex; flex-flow: row wrap; gap:1rem;} .check-list>li{background-color: #fff; border:1px solid #e6e6e6; font-weight: 500; font-size:2.2rem; line-height:3rem; color: #000; position: relative; display: flex; align-items: center; border-radius:1rem; overflow: hidden;} .check-list>li:before{content: ""; width:3.9rem; height:100%; background: var(--point) url('/images/bul_16_white.png') no-repeat center center/1.6rem;} .check-list>li>div{padding:1.3rem;} .check-list.two>li{flex:1 1 calc((100% - 1rem) / 2);} .num-box{margin-top:1rem; counter-reset:item;} .num-box>li{padding:3rem 0 3rem 4rem; font-weight: 600; font-size:2rem; line-height:1.3; color: #000; position: relative;} .num-box>li .small{font-weight: 400; color: #555; display:inline-block;} .num-box>li br+.small{margin-top:0.3rem;} .num-box>li:before{counter-increment: item; content: counter(item); width:3rem; height:2.5rem; background-color: #848d96; font-weight: bold; font-size:1.7rem; line-height:1; color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; position: absolute; left:0; top:3rem; border-radius:0.3rem; overflow: hidden;} .num-box>li+li{border-top:1px solid #e6e6e6;} .num-box.title>li{padding:0 0 0 4rem; font-size:2.5rem; line-height:1;} .num-box.title>li:before{background-color: var(--point2); top:0;} .num-box.title>li+li{margin-top:7.5rem; border-top:none;} .flex{display: flex !important; gap:0 0.5rem;} .flex :where(i, em, b){font-weight: normal; font-style: normal;} .flex>*{flex:1;} .flex .hold{flex:0 1 auto;} .flex.in{display: inline-flex !important;} .box-num{padding:4rem 0; background-color: #fff; counter-reset:item; border-radius:1rem; display: flex;} .box-num>li{flex:1 1 33.333%;padding:0 4rem; font-weight: 500; font-size:2.2rem; line-height:3.2rem; color: #000; position: relative; display: flex; align-items: start; justify-content: center; gap:1rem;} .box-num>li:before{counter-increment: item; content: counter(item); width:3rem; min-width:3rem; height:2.5rem; margin-top:0.3rem; background-color: var(--point2); font-weight: bold; font-size:1.7rem; line-height:1; color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; border-radius:0.3rem; overflow: hidden;} .box-num>li+li{border-left:1px solid #e6e6e6;} .box-num.gray{background-color: #f4f6f8;} .caution{padding:2.5rem 1.2rem; background-color: #daf1ff; font-size:2.2rem; line-height:1.3; color: var(--point2); display: flex; flex-flow: row wrap; align-items: center; border-radius:1rem; overflow: hidden;} .caution>dt{width:20.4rem; height:3rem; border-right:1px solid #9abdd2; font-weight: 600; display: flex; align-items: start; justify-content: center; gap:0.8rem;} .caution>dt figure{} .caution>dt figure img{position: relative; top:-0.4rem;} .caution>dd{flex:1; padding-left:4rem;} .caution.full{padding:2.5rem 4rem;} .caution.full>dt{width:100%; border-right:none; justify-content: start;} .caution.full>dd{flex:auto; margin-top:1rem; padding-left:0;} .layout-PT{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap:3rem 7rem;} .layout-PT .layout-PT_photo{width:calc(50% - 3.5rem);} .layout-PT .layout-PT_photo img{width:100%; max-width:none; height:100%; object-fit: cover;} .layout-PT .layout-PT_conts{flex:1; font-size:2.4rem; line-height:3.4rem; color: #000;} .layout-PT.reverse .layout-PT_photo{order:2;} .layout-PT.reverse .layout-PT_conts{order:1;} ._bul>li{padding-left:1.4rem; font-size:2rem; line-height:3rem; color: #555; position: relative;} ._bul>li:before{content: "-"; position:absolute; left: 0; top:0;} .obul>li{padding-left:1rem; font-size:2rem; line-height:3rem; color: #555; position: relative;} .obul>li:before{content: "·"; position:absolute; left: 0; top:0;} .sticky-table{width:100%; font-size:0; line-height:0;} .sticky-table>table{width:100%; border-spacing:0; border-collapse: collapse; table-layout : fixed;} .sticky-table>table th, .sticky-table>table td{padding:1.6rem; background-color: #fff; border-bottom:1px solid #ddd; font-size:2rem; line-height:1.45; color:#666; text-align:center; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .sticky-table>table tr.line>*+*, .sticky-table>table tr>*+td{border-left:1px solid #ddd;} .sticky-table>table>thead>tr>th{background-color: #848d96; font-weight: 600; color: #fff; position:sticky; top:0;} .sticky-table>table>thead>tr>th .small, .sticky-table>table>tbody>tr>th .small{font-weight: normal; font-size:0.9em; color: #848d96;} .sticky-table>table>thead>tr>th:first-child{left:0; z-index:2;} .sticky-table>table>thead>tr>th.bg01{background-color: var(--point);} .sticky-table>table>thead>tr>th.bg02{background-color: var(--point2);} .sticky-table>table>thead>tr>th.bg0{background-color: #f4f6f8;} .sticky-table th.bf{background-color: #fff;} .sticky-table>table>tbody>tr>th{background-color:#f4f6f8; font-weight: 500; color: #111; position:sticky; left:0; z-index:1;} .sticky-table p.state{width:8rem; height:4.2rem; margin:0 auto; background-color: var(--point2); border:1px solid var(--point2); font-weight: 500; font-size:1.8rem; line-height:1; color: #fff; border-radius:99px; display: flex; align-items: center; justify-content: center;} .sticky-table p.state.no{background-color: #fff; color: var(--point2);} .sticky-table p.state.off{background-color: #f4f6f8; border-color: #f4f6f8; color: #848d96;} html[lang="en"] .sticky-table p.state{min-width:8rem; width:auto; padding:0 1.5rem; display: inline-flex;} .sticky-table.black>table th, .sticky-table.black>table td{color:#000;} .tab-three{width:100%; margin:12rem 0 7rem; font-size:0; line-height:0; text-align: center; overflow:hidden; display: flex; justify-content: center; gap:0 1rem;} .tab-three>a{width:100%; max-width:20rem; height:7rem; background-color:#848d96; font-size:2.5rem; line-height:1.3; color: #fff; border-radius:2.5rem; display: flex; align-items: center; justify-content: center} html[lang="en"] .tab-three>a{max-width:24rem;} .tab-three>a:is(:hover, .active){background-color: #0075c2; font-weight: bold;} .tab-three-conts{display:none;} /*[e] All Style */ /*[s] Main Popup Style */ #hd_pop {z-index:101;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops{width:auto !important; max-width:100%; height:auto !important; background-color:#fff; position:absolute; display:block; border-radius: 1rem; overflow:hidden; box-sizing:border-box; box-shadow:0 0 3rem rgba(0,0,0,0.5);} .hd_pops img{width:100%} .hd_pops_con{} .hd_pops_footer{display: flex; gap: 1rem; justify-content: space-between; padding: 15px 2rem; font-size: 0; line-height: 0; color:#888; text-align:left;position:relative} .hd_pops_footer.white{background-color: #fff;} .hd_pops_footer.black{background-color: #000;} .hd_pops_footer .hd_pops_reject {position: relative; font-size: 14px; line-height: 1; color: #888; padding: 0 0 0 20px;} .hd_pops_footer .hd_pops_reject::before{position: absolute; content: ''; width: 14px; height: 14px; top: 0; left: 0; border: 1px solid #888; background-color: #fff;} .hd_pops_footer .hd_pops_reject::after{position: absolute; content: ''; width: 10px; height: 10px; top: 2px; left: 2px; background-image: url('/img/icon_check.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;} .hd_pops_footer .hd_pops_close{width: 14px; height: 14px;/* background-image: url('/img/icon_close.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; */} /* black */ .hd_pops_footer.black .hd_pops_reject {color: #fff;} .hd_pops_footer.black .hd_pops_reject::before{border: 1px solid #fff;} /* .hd_pops_footer.black .hd_pops_reject::after{filter: brightness(0) saturate(100%) invert(100%);} */ .hd_pops_footer.black .hd_pops_close{filter: brightness(0) saturate(100%) invert(100%);} #popLayer{width:100%; height:100%; font-size:0; line-height:0; position:fixed; left:0; top:0; z-index:99; overflow:hidden; overflow-y:auto;} #popLayer.disNone{display:none !important;} #popLayer #moPopArea{width:100vw; height:100vh; padding:10rem 3rem; box-sizing: border-box; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; -ms-flex-align:center;} #popLayer #moPopArea .moPop{width:100%; max-width:50rem; margin:0; position: relative;} #popLayer #moPopArea #moPopRoll{background-color: #fff; border-radius:2rem; overflow:hidden; box-shadow:0 2rem 4rem rgba(0,0,0,0.3);} #popLayer .slider{width:100%; border-radius:2rem 2rem 0 0; box-sizing:border-box; overflow:hidden;} #popLayer .slider img{width:100%; vertical-align: top;} #popLayer .slider .HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider .HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} #popLayer .layerPopClose{width:3rem; height:3rem; margin:0; padding:0; font-size:0; line-height:0; position: absolute; right:1.5rem; top:1.5rem; z-index:6; transform:rotate(45deg);} #popLayer .layerPopClose:before, #popLayer .layerPopClose:after{content: ""; background-color: #222; display: block; position:absolute; left: 50%; top:50%;} #popLayer .layerPopClose:before{width: 100%; height: 2px; margin:-1px 0 0 -1.5rem;} #popLayer .layerPopClose:after{width: 2px; height: 100%; margin:-1.5rem 0 0 -1px;} #popLayer .moPopClose{width:100%; border-radius:0 0 2rem 2rem; display: flex; justify-content: space-between; overflow:hidden;} #popLayer .moPopClose>*{flex:1 1 50%; height:6rem; font-size:1.6rem; line-height:1; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} #popLayer .moPopClose button{background-color: #878896; border:none; color: #dcdeea; position: relative;} /*#popLayer .moPopClose button:before{content: "X"; width: 1.8rem; height: 1.8rem; background-color: rgba(255,255,255,0.3); border:1px solid #000; font-family: dotum; font-weight: bold; font-size:1.6rem; line-height:1.6rem; color: #000;display: inline-block; position:absolute; top:0; box-sizing: border-box;} #popLayer .moPopClose button.toDay_close{padding-left:2.5rem;} #popLayer .moPopClose button.toDay_close:before{left:0;}*/ #popLayer .moPopClose button.close{padding-right:2.5rem} #popLayer .moPopClose button.close:before{right:0;} #popLayer .moPopClose a{background-color: #3617cd; color:#fff} #popLayer .slick-dots{width:100%; padding:0; text-align: center; position: absolute; left:0; bottom:7rem; z-index:7;} #popLayer .slick-dots>li{margin:0 0.7rem; display:inline-block; vertical-align: top;} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.4rem; height:1.4rem; padding:0; background-color:#d4d7d9; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:999px; overflow:hidden; transition: all .3s ease-out;} #popLayer .slick-dots>li.slick-active button{width:30px; background-color: #333;} #popLayer #moPopArea #moPopRoll{opacity: 0; visibility: hidden; transition: opacity 1s ease;} #popLayer #moPopArea #moPopRoll.open, #popLayer #moPopArea #moPopRoll.slick-initialized{visibility: visible; opacity: 1;} /*[e] Main Popup Style */ /*[s] Main Style */ a:not(.no) .thumb{overflow:hidden;} a:not(.no) .thumb img{transition: all .7s ease-out; transform-origin: 50% 50%;} a:not(.no):hover .thumb img{transform: scale(1.1);} .mGroup{width:100%; margin-bottom:3.5rem; padding:1.3rem 0; text-align: center; position: relative;} .mGroup:before{content: attr(data-title); font-weight: bold; font-size:26rem; line-height:0.6; color: #eaeff5; letter-spacing: 25px !important; position:absolute; left: 50%; top:0px; white-space: nowrap; transform: translateX(-49%);} .mGroup :where(p, h2, div){position: relative; z-index:2;} .mGroup>p{font-weight: 600; font-size:2rem; line-height:1.5; color: var(--point);} .mGroup>h2{font-weight: 800; font-size:6rem; line-height:1; color: #000;} .mGroup>p+h2{margin-top:1rem;} .mGroup>div{font-size:2.2rem; line-height:1.4; color: #666;} .mGroup>h2+div{margin-top:2rem;} #mainVisual{width:100%; position: relative; overflow:hidden;} #mainVisual .visualRoll{display: flex; flex-flow: row nowrap;} #mainVisual .visualRoll .swiper-slide{min-width:100%; width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mainVisual .visualRoll .swiper-slide>img{width:100%; max-width:none; height:96rem; object-fit: cover; object-position: center center; transform:scale(1.1);} #mainVisual .vTxtArea{width:100%; height:100%; max-width:172rem; margin-left:-86rem; padding:0 2rem; text-align: center; position: absolute; left:50%; top:0; z-index:2; display: flex; align-items: center; justify-content: center;} #mainVisual .vTxt{} #mainVisual .vTxt .ii{line-height:1.4; color: #fff; top:50px; text-align: center; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word; white-space: normal;} #mainVisual .vTxt .i01{transition-delay: 1.3s;} #mainVisual .vTxt .i02{transition-delay: 1.35s;} #mainVisual .vTxt .i03{transition-delay: 1.4s;} #mainVisual .vTxt .i04{transition-delay: 1.45s;} #mainVisual .vTxt .i05{transition-delay: 1.5s;} #mainVisual .vTxt .i06{transition-delay: 1.55s;} #mainVisual .vTxt .i07{transition-delay: 1.6s;} #mainVisual .vTxt .ii.cate{font-weight: 600; font-size:2.2rem; line-height:1; color: var(--point);} #mainVisual .vTxt .ii.title{margin-top:2.5rem; font-weight: 800; font-size:8rem; line-height:1;} #mainVisual .vTxt .ii.text{margin-top:1.5rem; font-weight: 400; font-size:3rem;} #mainVisual .vTxt .ii.btn{margin-top:4rem; display: flex; align-items: center; justify-content: center;} #mainVisual .vTxt .ii.btn>a{width:20rem; height:6rem; background-color: var(--point); font-size:1.8rem; color: #fff; border-radius:0.5rem; display: flex; align-items: center; justify-content: center} #mainVisual .swiper-option{width:100%; max-width:178rem; margin-left:-89rem; padding:0 3rem; text-align: left; position: absolute; left:50%; bottom:12.234%; z-index:5; display:none !important;} #mainVisual .swiper-option-in{width:6rem; display: flex; align-items: center; justify-content: space-between;} #mainVisual .swiper-option-in img{height:1.2rem;} #mainVisual .swiper-button{cursor: pointer; z-index:7; opacity: 0.6;} #mainVisual .swiper-button-prev{left:0;} #mainVisual .swiper-button-prev img{transform:rotate(180deg);} #mainVisual .swiper-button-next{right:0;} #mainVisual .swiper-button:hover{opacity:1;} #mainVisual .swiper-pagination{width:100%; max-width:172rem; margin-left:-86rem; padding:0 2rem; text-align: center; position: absolute; left:50%; top:auto; bottom:12rem; z-index:7;} #mainVisual .swiper-pagination-bullet{width:17px; height:17px; margin:0 7px; background-color:#fff; border-radius:99px; display: inline-block; vertical-align: top; cursor: pointer; opacity: 0.5;} #mainVisual .swiper-pagination-bullet.swiper-pagination-bullet-active{width:54px; background-color: var(--point2); opacity: 1;} #mainVisual .swiper-number{width:100%; max-width:156rem; margin-left:-78rem; padding:0 3rem; font-size:3.2rem; line-height:1; color: #fff; text-align: right; position: absolute; left:50%; bottom:6rem; z-index:6;} #mainVisual .swiper-number .n{top:-1.5rem; position: relative;} #mainVisual .swiper-number .l{top:-0.3rem; position: relative;} #mainVisual .swiper-number .t{} #mainVisual .swiper-slide-active .vTxt .ii{top:0px; opacity:1;} #mainVisual .visualRoll .swiper-slide.swiper-slide-active>img{transform:scale(1);} #mainQlink{background-color:#f4f6f8;} #mainQlink>.inConts{max-width: 128rem; padding:0; display: flex; flex-flow: row wrap;} #mainQlink .mainQlink-swiper{width:100%; position: relative;} #mainQlink .mainQlink-swiper .swiper-wrapper{width: 100%; height: 100%; display: flex; box-sizing: content-box;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide{width:calc(100% / 5); min-width:calc(1024px / 5); height:calc(14rem + 1px); padding-top:1.4rem; border-right:1px solid #e2e2e2; text-align: center; position: relative; transition: all .7s ease-out;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:before{content: ""; width: 0; height: 0.3rem; background-color: var(--point); position:absolute; left: 50%; top:0px; transition: all .3s ease-out;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:after{content: ""; width: 100%; height: 1px; background-color: #e2e2e2; position:absolute; left: 0; bottom:0; transition: all .3s ease-out;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:first-child{border-left:1px solid #e2e2e2;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure{width:100%; height:8rem; display: flex; align-items: center; justify-content: center; position: relative;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img.ov{display:none;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img[src*="/images/main/icon_q01"]{width:5.1rem;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img[src*="/images/main/icon_q02"]{width:4.2rem;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img[src*="/images/main/icon_q03"]{width:4.6rem;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img[src*="/images/main/icon_q04"]{width:6rem;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img[src*="/images/main/icon_q05"]{width:4.9rem;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide span{font-size:2rem; line-height:1; color: #848d96; text-align: center;} #wrap[data-device="pc"] #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:hover{background-color: #fff;} #wrap[data-device="pc"] #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:hover:before{width:100%; left: 0%;} #wrap[data-device="pc"] #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:hover:after{width:0; left: 50%;} #wrap[data-device="pc"] #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:hover figure img{display:none;} #wrap[data-device="pc"] #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:hover figure img.ov{display:block;} #wrap[data-device="pc"] #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:hover span{font-weight: 600; font-size:2.2rem; color: #000;} html[lang="en"] #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide{height:auto; padding-bottom:2.4rem;} #mainCenter{padding:13rem 0 0;} #mainCenter .mainCenter-swiper{display: flex; /*flex-flow: row wrap;*/ counter-reset:item;} #mainCenter .mainCenter-swiper{width:100%; position: relative;} #mainCenter .mainCenter-swiper .swiper-wrapper{width: 100%; height: 100%; display: flex; box-sizing: content-box;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide{width:16vw; height:76rem; background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all .3s ease-out; position: relative;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:before{content: ""; width: 100%; height: 50%;position: absolute; left:0; bottom:0; opacity: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,02283f+100&0+0,1+100 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(2,40,63,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide.bg01{background-image: url('/images/main/bg_mCenter01.jpg');} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide.bg02{background-image: url('/images/main/bg_mCenter02.jpg');} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide.bg03{background-image: url('/images/main/bg_mCenter03.jpg');} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide.bg04{background-image: url('/images/main/bg_mCenter04.jpg');} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide.bg05{background-image: url('/images/main/bg_mCenter05.jpg');} #mainCenter .out-box{min-height:100%; text-align: center; display: flex; flex-flow: row wrap; align-items: center; position: relative;} #mainCenter .out-box .num{width:100%; font-size:6rem; line-height:1; color: rgba(255,255,255,0.07); position: absolute; left:0; top:15rem;} #mainCenter .out-box dl{width:100%;} #mainCenter .out-box dl>dt{font-size:4.5rem; line-height:1; color: rgba(255,255,255,0.6);} #mainCenter .out-box dl>dd{margin-top:1.5rem; font-size:2rem; line-height:1; color: rgba(255,255,255,0.3); text-transform:uppercase;} #mainCenter .over-box{display:none; min-height:100%; align-items: center; justify-content: center; position: relative; z-index:2; animation:mc_over 0.3s cubic-bezier(.25,.46,.45,.94) both 0.2s} @keyframes mc_over { 0% {opacity: 0;} 100% {opacity: 1;} } #mainCenter .over-in{width:100%; max-width:48rem;} #mainCenter .over-box .mGroup{margin-bottom:4.5rem; padding:0; text-align: left;} #mainCenter .over-box .mGroup>p{font-weight: bold; font-size:2.5rem; line-height:1; text-transform:uppercase;} #mainCenter .over-box .mGroup>h2{font-weight: bold; color: #fff;} #mainCenter .over-box .mGroup>div{margin-top:2rem; font-weight: 500; font-size:2.5rem; line-height:1.35; color: #fff;} #mainCenter .over-box .link-box{width:100%; min-height:24rem; display: flex; flex-flow: row wrap; align-content: flex-start; gap:0 2rem;} #mainCenter .over-box .link-box>a{flex:1 1 calc(50% - 1rem);/* width:calc((100% - 2rem) / 2); */height:8rem; font-weight: 500; font-size:2.2rem; line-height:1.3; color: rgba(255,255,255,0.3); display: flex; align-items: center; position: relative; transition: all .3s ease-out;} #mainCenter .over-box .link-box>a:before{content: ""; width: 12px; height: 100%; background: url('/images/main/arr_mCenter.png') no-repeat center center; display:block; position:absolute; right: 0; top:0px; opacity: 0; transition: all .3s ease-out;} #mainCenter .over-box .link-box>a:after{content: ""; width: 100%; height: 1px; background-color:rgba(255,255,255,0.2); display:block; position:absolute; left: 0; bottom:0; transition: all .3s ease-out;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:nth-child(1) .over-box .link-box>a:is(:nth-last-child(2)):after{opacity: 0;} #mainCenter .over-box .link-box>a:is(:last-child):after{opacity: 0;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:is(:hover, .active){width:38vw;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:is(:hover, .active):before{opacity: 1;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:is(:hover, .active) .out-box{display:none;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:is(:hover, .active) .over-box{display:flex;} #mainCenter .over-box .link-box>a:hover{font-weight: bold; color: #fff;} #mainCenter .over-box .link-box>a:hover:before{opacity:1;} #mainCenter .over-box .link-box>a:hover:after{height: 2px; background-color:#fff; opacity: 1 !important;} html[lang="en"] #mainCenter .out-box dl>dt{font-size:2.5rem;} #mainPromise{padding:15rem 0 18rem; background: url('/images/main/bg_mPromise.jpg') no-repeat center center / cover;} #mainPromise .promise-circle{overflow: visible;} #mainPromise .promise-circle .promise-circle-slick{margin-top:8rem;} #mainPromise .promise-circle .promise-circle-slick .slick-list{overflow: visible;} #mainPromise .promise-circle .promise-circle-slick .slick-track{}/* transition: all 0.s linear !important; transform-origin: 50% 50%; */ #mainPromise .promise-circle .promise-circle-slick .slick-slide{width:34rem; min-width:34rem; aspect-ratio:1/1; margin:0 -12px; padding:0; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius:999px; display: inline-flex; flex-flow: row wrap; align-items: center; justify-content: center; box-shadow:1rem 1rem 2rem rgba(0,0,0,0.1);} #mainPromise .promise-circle .promise-circle-slick .slick-slide dl{font-weight: 600; font-size:3rem; line-height:4rem; color: #555; text-align: center;} #mainPromise .promise-circle .promise-circle-slick .slick-slide dl>dt{font-weight: bold; font-size:2rem; line-height:1; color: #848d96;} #mainPromise .promise-circle .promise-circle-slick .slick-slide dl>dt>span{color: var(--point);} #mainPromise .promise-circle .promise-circle-slick .slick-slide dl>dd{margin-top:1.5rem;} #mainPromise .promise-circle .promise-circle-slick .slick-slide.slick-center{margin:0 -12px; background: url('/images/main/bg_promise_circle.png') no-repeat center center / cover; position: relative; z-index:3; transform: scale(1.24)} #mainPromise .promise-circle .promise-circle-slick .slick-slide.slick-center dl{font-size:4rem; line-height:5rem; color: #fff; } #mainPromise .promise-circle .promise-circle-slick .slick-slide.slick-center dl>dt{font-size:2.5rem; color: #fff;} #mainPromise .promise-circle .promise-circle-slick .slick-slide.slick-center dl>dt>span{color: #fff !important;} .slick-starts{opacity: 0; visibility: hidden; transition: opacity 1s ease;} .slick-starts.slick-initialized{visibility: visible; opacity: 1;} html[lang="en"] #mainPromise .promise-circle .promise-circle-slick .slick-slide{width:40rem; min-width:40rem;} html[lang="en"] #mainPromise .promise-circle .promise-circle-slick .slick-slide dl{font-size:2.6rem; line-height:3.6rem;} html[lang="en"] #mainPromise .promise-circle .promise-circle-slick .slick-slide.slick-center dl{font-size:3.5rem; line-height:4.5rem;} #mainNews{padding:15rem 0;} #mainNews .main-news-swiper{width:100%; margin-top:5rem; position: relative;} #mainNews .main-news-swiper .swiper-wrapper{width: 100%; height: 100%; display: flex; box-sizing: content-box;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide{flex-shrink: 0; width:39rem; margin-right:4rem; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide:last-child {margin-right:0;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .thumb{aspect-ratio:390/260; overflow: hidden;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .thumb>img{width:100%; height:100%; object-fit: cover; display:block;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .text-box{min-height:22rem; padding:3rem; background-color: #f4f6f8;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .cate{font-weight: bold; font-size:1.8rem; line-height:1;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .title{min-height:6rem; margin:1.2rem 0; font-weight: 600; font-size:2.2rem; line-height:3rem; color: #000; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .data{font-size:2rem; line-height:1; color: #999;} #mainNews .main-news-swiper .more{font-size:1.8rem; line-height:1; color: #555; position: absolute; right:0; top:-5.5rem;} #mainNews .main-news-swiper .more>span{font-size:1.5rem;} #mainReservation{padding:11rem 0 0; background: url('/images/main/bg_mReservation.jpg') no-repeat center top / cover; overflow: hidden;} #mainReservation>.inConts{padding:4rem 2rem 0; background: url('/images/main/text_Reservation.png') no-repeat center top / calc(100% - 4rem); display: flex; align-items: start;} #mainReservation .mGroup{margin-bottom:4.5rem; padding:0; text-align: left;} #mainReservation .mGroup>p{font-weight: bold; font-size:2.5rem; line-height:1; color: var(--point2);} #mainReservation .mGroup>h2{line-height:1.2; color: #000;} #mainReservation .mGroup>p+h2{margin-top:2rem;} #mainReservation .mGroup>div{color: #000;} #mainReservation .mainReservation-left{width:calc(50% + 3rem); padding:15rem 3rem 3rem 0; text-align: left; overflow: hidden;} #mainReservation .quick-link-swiper{width:100%; position: relative;} #mainReservation .quick-link-swiper .swiper-wrapper{width: 100%; height: 100%; display: flex; box-sizing: content-box;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide{flex:1; height:12rem; margin-right:1rem; padding-top:1.6rem; background-color: #fff; text-align: center; position: relative; overflow:hidden; display:inline-block; vertical-align: top; border-radius:1rem; box-shadow:1rem 1rem 2rem rgba(0,0,0,0.1);} /* #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide{flex-shrink: 0; width:16rem; height:12rem; margin-right:1rem; padding-top:1.6rem; background-color: #fff; text-align: center; position: relative; overflow:hidden; display:inline-block; vertical-align: top; border-radius:1rem; box-shadow:1rem 1rem 2rem rgba(0,0,0,0.1);} */ #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide:last-child {margin-right:0;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide figure{width:100%; height:5.7rem; display: flex; align-items: center; justify-content: center; overflow: hidden;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide figure>img{display:block;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide strong{font-weight: 500; font-size:1.8rem; line-height:1; color: #4f565d;} #mainReservation .mainReservation-right{padding-left:12rem; display: flex; justify-content: start; position: relative;} .phone-form{width:45rem; padding:5.6rem 3.7rem 8.5rem; background-color: #fff; border:2rem solid #f4f5f7; border-radius:8rem; box-shadow:0 2rem 3rem rgba(0,0,0,0.15); position: relative;} .phone-form.no{border-bottom:none; border-radius:8rem 8rem 0 0;} .phone-form:before{content: ""; width: 0.4rem; height: 24.2rem; background:url('/images/main/bg_simple_form_left.png') no-repeat center center/cover; position:absolute; left: -2.4rem; top:11.8rem;} .phone-form:after{content: ""; width: 0.4rem; height: 11rem; background:url('/images/main/bg_simple_form_right.png') no-repeat center center/cover; position:absolute; right:-2.4rem; top:25rem;} .phone-form .logo{padding-bottom:2rem; display: flex; justify-content: center;} .phone-form .logo img{height:6.4rem; display:block;} .phone-form .text-box{padding-bottom:2rem; border-bottom:1px solid #eee; font-size:2rem; line-height:1.3; color: #000;} .phone-form .phone-fild{margin-top:3rem; display: flex; flex-flow: column nowrap; gap:1rem;} .phone-form .phone-fild-re{position: relative;} .phone-form .phone-fild-re .placeholder{width:100%; height:100%; padding-left:3.5rem; font-size:2rem; line-height:1.5; color:#666; display: flex; align-items: center; position: absolute; left:0; top:0; cursor: pointer;} .phone-form .phone-fild-re .placeholder:before{content: "*"; color: var(--point); display: flex; align-items: center; position:absolute; left: 2rem; top:0; bottom:0;} .phone-form .phone-fild-re .placeholder>strong{font-weight: 500; color: var(--point);} .phone-form .phone-fild-re textarea + .placeholder, .phone-form .phone-fild-re textarea + .placeholder:before{padding-top:1.5rem; align-items: start;} .phone-form .tit-line{padding-bottom:1rem; font-weight: 600; font-size:2.2rem; line-height:1; color: #000; display: flex; align-items: center; gap:1rem;} .phone-form .tit-line:before{content: ""; width: 0.8rem; height: 2.8rem; background-color: var(--point2); border-radius:0.3rem;} .phone-form input[type=button], .phone-form input[type=text], .phone-form input[type=password], .phone-form input[type=file], .phone-form input[type=submit], .phone-form select, .phone-form textarea{width:100%; height:6.4rem; padding:0 3.5rem; background-color:#f8f8f8; border:1px solid #dedede; font-weight: 400; font-size:2rem; line-height:1.5; color:#666; display: flex; align-items: center; border-radius:1rem; outline:none; select-dummy: expression(this.hideFocus=true);} .phone-form select{padding-right:4rem; background:#f8f8f8 url('/images/bg_select.svg') no-repeat calc(100% - 1rem) center; background-size:1.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .phone-form select::-ms-expand{display:none;} .phone-form textarea{height:14.4rem; padding:1.5rem 3.5rem; line-height:1.45;} .phone-form input[type=text]:valid, .phone-form input[type=file]:valid, .phone-form select:valid{color: #111 !important;} .phone-form *::-webkit-input-placeholder, .phone-form *::placeholder{color: #666;} .phone-form .title{font-weight: 500; font-size:1.8rem; line-height:1; color: #333;} .phone-form .title>span{color: var(--point); display:inline-block; vertical-align: top; position: relative; top:-0.3rem;} .phone-form .security-code{margin-top:0.8rem; background-color:#f8f8f8; border:1px solid #dedede; font-weight: 300; font-size:1.8rem; line-height:1.5; color:#666; display: flex; border-radius:1rem; overflow: hidden;} .phone-form .security-code>p{width:10.4rem; background-color:var(--point2); font-weight: bold; color:#fff; display: flex; align-items: center; justify-content: center;} .phone-form .security-code input[type=text]{flex:1; border:none; border-radius:0;} .phone-form .phone-fild-check{margin-top:0.2rem; display: flex; align-items: center; justify-content: space-between;} .phone-form .phone-fild-check>a{width:10rem; height:3.6rem; background-color: #848d96; font-weight: 400; font-size:1.6rem; line-height:1; color:#fff; text-align: center; border-radius:1rem; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;} .phone-form .phone-fild-check>a>span{vertical-align: top;} .phone-form .check-new input[type=checkbox]+label, .phone-form .check-new input[type=radio]+label{font-size:2rem; line-height:2rem;} .phone-form .check-new input[type=checkbox]+label>.graphic, .phone-form .check-new input[type=checkbox]+label>.graphic:before{width: 2rem; height: 2rem; border-color:#999; border-radius:0;} .phone-form .check-new input[type=checkbox]+label>.graphic:before{} .phone-form .check-new input[type=checkbox]:checked+label>.graphic{border-color: #222 !important;} .phone-form .m-btn{width:100%; height:7rem; margin-top:3rem; background-color: var(--point2); font-weight: 600; font-size:2.2rem; line-height:1; color:#fff; text-align: center; border-radius:1rem; overflow: hidden; display: flex; align-items: center; justify-content: center;} .phone-fild-re:focus-within .placeholder, .phone-fild-re:has(input:required:valid) .placeholder{opacity:0; visibility:hidden;} .security-code:focus-within, .phone-form :where(select, textarea, input):is(:focus, :required:valid){background-color: #fff; border-color: #0075c2 !important; font-weight: 500; color: #222; box-shadow:0.3rem 0.3rem 0.7rem rgba(8,8,8,0.07)} #mainLocation{padding:15rem 0;} #mainLocation>.inConts{display: flex; align-items: center;} #mainLocation .mainLocation-left{width:40rem; text-align: left;} #mainLocation .mGroup{margin-bottom:4rem; padding:0; text-align: left;} #mainLocation .mGroup>h2{color: #000;} #mainLocation .mGroup>div{color: #000; display: flex; align-items: center; gap:0 0.8rem;} #mainLocation .link{width:100%; max-width:30rem;display: flex; flex-flow: column nowrap; gap:1.5rem 0;} #mainLocation .link>a{width:100%; height:6.4rem; background-color: #fae100; font-size:2rem; line-height:1; color: #000; display: flex; align-items: center; border-radius:999px; overflow: hidden; box-shadow:0.3rem 0.3rem 1rem rgba(0,0,0,0.15); gap: 0 1rem;} #mainLocation .link>a img{width:5.3rem; display:block;} #mainLocation .link>a strong{font-weight: 600;} #mainLocation .link>a.location{background-color: #004067; color: #fff;} #mainLocation .mainLocation-right{flex:1; height:66rem; border-radius:6rem; overflow: hidden;} #mainLocation .mainLocation-right :where(.root_daum_roughmap, .wrap_map, iframe){width:100%; height:100%;} #mainLocation .mainLocation-right .root_daum_roughmap :where(.wrap_controllers, .cont, .map_border){display:none;} #mainPartner{} #mainPartner>.inConts{height:42rem; background: url('/images/main/bg_partner.png') no-repeat right -2rem top; display: flex; align-items: center;} #mainPartner .mainPartner-left{width:43rem;} #mainPartner .mGroup{margin-bottom:0; padding:0; text-align: left;} #mainPartner .mGroup>h2{color: #000; display: flex; align-items: start; gap:0 1.2rem;} #mainPartner .mGroup>h2 figure{position: relative; top:-3.3rem;} #mainPartner .mainPartner-right{width:calc(100% - 43rem); overflow: hidden; position: relative;} #mainPartner .partner-swiper-controll{width:12rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; position: absolute; right:0; top:0; z-index:7;} #mainPartner .partner-swiper-controll img{width:5rem;} #mainPartner .partner-swiper-controll span{width:1px; height:1.4rem; background-color: #cfd1d4;} #mainPartner .partner-swiper-controll .swiper-button{cursor: pointer;} #mainPartner .partner-swiper-controll .swiper-button.swiper-button-disabled{opacity: 0.3; cursor: default;} #mainPartner .partner-swiper-controll .swiper-button:not(.swiper-button-disabled):hover img{filter: brightness(0) saturate(100%) invert(18%) sepia(17%) saturate(7219%) hue-rotate(181deg) brightness(94%) contrast(101%);} #mainPartner .partner-swiper{width:100%; padding:5rem 0; position: relative;} #mainPartner .partner-swiper .swiper-wrapper{width: 100%; height: 100%; display: flex; box-sizing: content-box;} #mainPartner .partner-swiper .swiper-wrapper .swiper-slide{flex-shrink: 0; width:28rem; height:12rem; margin-right:2rem; background-color: #fff; border:1px solid #e6e6e6; text-align: center; position: relative; overflow:hidden; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; border-radius:1rem; box-shadow:1rem 1rem 2rem rgba(0,0,0,0.1);} #mainPartner .partner-swiper .swiper-wrapper .swiper-slide:last-child{margin-right:0;} #mainPartner .partner-swiper .swiper-wrapper .swiper-slide img{max-width:85%; max-height:85%;} html[lang="en"] #mainPartner .mainPartner-left{width:45rem;} html[lang="en"] #mainPartner .mGroup>h2{font-size:5rem;} html[lang="en"] #mainPartner .mainPartner-right{width:calc(100% - 45rem);} #mainInfo{padding:5rem 0; background-color: #f3f6f9;} #mainInfo>.inConts{display: flex; align-items: center; justify-content: space-between;} #mainInfo .mainInfo-re{width:calc(100% / 3); display: flex; align-items: start; position: relative;} #mainInfo .mainInfo-re .mainInfo-in{width:100%; display: flex; align-items: start; position: relative;} #mainInfo .mainInfo-re .mainInfo-in>figure{width:9rem;} #mainInfo .mainInfo-re .mainInfo-in>.cont-box{flex:1;} #mainInfo .mainInfo-re .title{font-weight: 600; font-size:2.5rem; line-height:1; color: #041c2a;} #mainInfo .mainInfo-re .title>strong{padding-bottom:0.5rem; font-weight: bold; font-size:2rem; color: var(--point); display:block;} #mainInfo .mainInfo-re .time{margin-top:1.5rem; display: flex; flex-flow: column wrap; gap:1rem 0;} #mainInfo .mainInfo-re .time>dl{font-weight: 500; font-size:1.8rem; line-height:1; color: #000; display: flex; align-items: center; gap:0 2.5rem;} #mainInfo .mainInfo-re .time>dl>dt{width:7.5rem; font-weight: bold; color: var(--point2); display: flex; align-items: center; justify-content: space-between;} #mainInfo .mainInfo-re .time>dl>dd{flex:1;} #mainInfo .mainInfo-re .mainInfo-in>.cont-box+figure{width:auto; position: absolute; right:13%; bottom:0.6rem;} #mainInfo .mainInfo-re .tel{margin-top:1rem;} #mainInfo .mainInfo-re .tel>dt{font-weight: bold; font-size:5rem; line-height:1; color: var(--point);} #mainInfo .mainInfo-re .tel>dd{margin-top:1.5rem; font-size:1.8rem; line-height:1; color: #000;} #mainInfo .mainInfo-re .text{margin-top:1rem; font-size:1.8rem; line-height:2.8rem; color: #000;} #mainInfo .mainInfo-re + .mainInfo-re{border-left:1px solid #ddd; justify-content: center;} #mainInfo .mainInfo-re + .mainInfo-re .mainInfo-in{width:auto;} html[lang="en"] #mainInfo>.inConts{flex-wrap: wrap; gap:4rem 0;} html[lang="en"] #mainInfo .mainInfo-re{width:calc(100% / 2);} html[lang="en"] #mainInfo .mainInfo-re.emergency{width:100%; padding-top:4rem; border-top:1px solid #ddd; border-left:none;} html[lang="en"] #mainInfo .mainInfo-re .time>dl>dt{width:10rem;} /*[e] Main Style */ /*[s] Sub Style */ .shGoup{text-align: center;} .shGoup .title{font-weight: bold; font-size:4rem; line-height:1.3; color: #000;} .shGoup .text{margin-top:1rem; font-size:3rem; line-height:4rem; color: #000;} .shGoup .text>strong{font-weight: 600;} .shGoup .text .line{text-decoration: underline; text-underline-position:under;} .shGoup .box{display: flex; justify-content: center; } .shGoup .box>p{min-width:30rem; height:7.6rem; padding:0 3rem; background-color: var(--point2); font-weight: bold; font-size:3rem; line-height:1; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; border-radius:2.5rem; overflow: hidden;} .shGoup :where(.box, .classification-list)+.text{margin-top:2rem !important; font-size:2.4rem !important; line-height:3.4rem !important; color: #000 !important;} .shGoup.small .text{margin-top:1.5rem; font-size:2.2rem; line-height:3.2rem; color: #555;} .shGoup.small .text>strong{font-weight: 600;} .shGoup.white :where(.title, .text){color: #fff !important;} .visual-radius{border-radius:3rem; display:flex; overflow: hidden;} .cause-list{counter-reset:item; display: flex; flex-flow: row wrap; gap:2.8rem;} .cause-list>li{width:calc((100% - 8.4rem) / 4); min-height:32rem; padding:4rem 1.5rem; background-color: #fff; text-align: center; border-radius:1rem; overflow: hidden;} .cause-list>li:before{counter-increment: item; content: counter(item); font-weight: bold; font-size:1.8rem; line-height:1; color: #555;} .cause-list>li:nth-child(-n+9)::before{content: "0"counter(item);} .cause-list>li figure{height:11.3rem; display: flex; align-items: end; justify-content: center;} .cause-list>li dl{margin-top:2rem;} .cause-list>li dl>dt{font-weight: 600; font-size:2.2rem; line-height:1.2; color: #000;} .cause-list>li dl>dt:before{counter-increment: item; content: counter(item); padding-right:0.3rem; font-weight: bold; font-size:2.2rem; line-height:1.3; color: #555; display:none;} .cause-list>li:nth-child(-n+9) dl>dt::before{content: "0"counter(item);} .cause-list>li dl>dd{font-size:2rem; line-height:2.8rem; color: #555;} .cause-list>li dl>dt+dd{margin-top:1rem;} .cause-list>li dl>dd.tal>strong{font-weight: 500; color: #000;} .cause-list.gray>li{background-color: #f4f6f8;} .cause-list.white{gap:0;} .cause-list.white>li{width:calc(100% / 4); min-height:auto; padding:0 1.5rem; background-color: transparent; border-radius:0;} .cause-list.white>li:before{color: #fff;} .cause-list.white>li figure{height:21rem;} .cause-list.white>li figure img{width:18.1rem;} .cause-list.white>li dl{margin-top:2rem;} .cause-list.white>li dl>dt, .cause-list.white>li dl>dd{color: #fff;} .cause-list:not(.white).two>li{width:calc((100% - 2.8rem) / 2);} .cause-list:not(.white).three>li{width:calc((100% - 5.6rem) / 3);} .cause-list:not(.white).five{gap:2rem;} .cause-list:not(.white).five>li{width:calc((100% - 8rem) / 5);} .cause-list:not(.white).six{gap:2rem;} .cause-list:not(.white).six>li{width:calc((100% - 10rem) / 6);} .cause-list:not(.white).six-two{gap:4rem;} .cause-list:not(.white).six-two>li{width:calc((100% - 8rem) / 3);} .cause-list.white.two>li{width:calc(100% / 2);} .cause-list.white.three>li{width:calc(100% / 3);} .cause-list.white.five>li{width:calc(100% / 5);} .cause-list.white.six>li{width:calc(100% / 6);} .cause-list.no>li{min-height:auto;} .cause-list.no>li:before, .cause-list.no>li dl>dt:before{display:none !important;} .cause-list.no>li figure{height:7.3rem;} .cause-list-step{counter-reset:item; display: flex; flex-flow: row wrap; gap:2rem;} .cause-list-step>li{width:calc((100% - 8rem) / 5); padding:0 1.5rem; background-color: #f4f6f8; text-align: center;} .cause-list-step>li:before{counter-increment: item; content: counter(item); font-weight: bold; font-size:1.8rem; line-height:1; color: #555;} .cause-list-step>li:nth-child(-n+9)::before{content: "STEP 0"counter(item);} .cause-list-step>li figure{padding-top:1.5rem; display: flex; align-items: end; justify-content: center; position: relative;} .cause-list-step>li figure:before{content: ""; width:3rem; height:100%; background:url('/images/arr_progress_step.png') no-repeat center center/3rem; position:absolute; right: -4rem; top:1rem;} .cause-list-step>li:last-child figure:before{display:none;} .cause-list-step>li figure img{width:100%; max-width:16rem;} .cause-list-step>li dl{margin-top:2rem;} .cause-list-step>li dl>dt{font-weight: 600; font-size:2.2rem; line-height:1.2; color: #000;} .cause-list-step>li dl>dt:before{counter-increment: item; content: counter(item); padding-right:0.3rem; font-weight: bold; font-size:2.2rem; line-height:1.3; color: #555; display:none;} .cause-list-step>li:nth-child(-n+9) dl>dt::before{content: "STEP 0"counter(item);} .cause-list-step>li dl>dd{font-size:2rem; line-height:2.8rem; color: #555;} .cause-list-step>li dl>dt+dd{margin-top:1rem;} .cause-list-step>li dl>dd.tal>strong{font-weight: 500; color: #000;} .cause-list-step.white>li{background-color: #fff;} .cause-list-step.four>li{width:calc((100% - 6rem) / 4);} .treatment-method{display: flex; flex-flow: row wrap; gap:8rem;} .treatment-method>li{width:calc((100% - 8rem) / 2);} .treatment-method>li figure{aspect-ratio:600/360; display: flex;} .treatment-method>li figure img{width:100%; max-width:none; height:100%; object-fit: cover;} .treatment-method>li>dl{margin-top:3.5rem; color: #000;} .treatment-method>li>dl>dt{font-weight: bold; font-size:3.5rem; line-height:1.3; display: flex; align-items: baseline; gap:0 1.5rem;} .treatment-method>li>dl>dt strong{font-weight: bold;} .treatment-method>li>dl>dt span[data-font="Play"]{font-weight: 400; font-size:2.2rem; line-height:1; color: #848d96;} .treatment-method>li>dl>dd{margin-top:1rem; font-size:2rem; line-height:3rem;} .treatment-method>li ._bul>li{margin-top:0.3rem; font-weight: 400; font-size:2rem; line-height:1.3; color: #555;} ol.treatment-method{counter-reset:item;} ol.treatment-method>li{display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} ol.treatment-method>li figure{width:100%; position: relative;} ol.treatment-method>li figure:before{counter-increment: item; content: counter(item); width:8rem; height:7rem; background-color: var(--point2); font-weight: bold; font-size:2.5rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; left:0; bottom:0;} ol.treatment-method>li dl{flex:1; width:100%; margin-top:0; padding:3.5rem 3rem 5.5rem; background-color: #fff;} ol.treatment-method>li dl>dt{font-size:3rem;} .treatment-method.gray>li{display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .treatment-method.gray>li figure{width:100%; position: relative;} .treatment-method.gray>li dl{flex:1; width:100%; margin-top:0; background-color: #f4f6f8; padding:3.5rem 3rem 4.5rem;} .necessity-need{display: flex; flex-flow: row wrap; align-items: start; gap:4rem;} .necessity-need>li{width:calc((100% - 8rem) / 3);} .necessity-need>li figure{aspect-ratio:400/260; display: flex; border-radius:1rem; overflow: hidden;} .necessity-need>li figure img{width:100%; max-width:none; height:100%; object-fit: cover;} .necessity-need>li .txt{margin-top:2.5rem; font-weight: 500; font-size:2.2rem; line-height:3.2rem; color: #000;} .necessity-need>li .title{margin-top:2.5rem; font-weight: bold; font-size:2.5rem; line-height:3.5rem; color: #000;} .necessity-need>li .text{margin-top:1rem; font-size:2rem; line-height:3rem; color: #555;} .necessity-need>li strong.c0{font-weight: 500; color: #000;} .necessity-need.four{gap:4rem 2rem;} .necessity-need.four>li{width:calc((100% - 6rem) / 4);} .necessity-need.four>li figure{aspect-ratio:305/200;} .necessity-need.five{gap:4rem 2rem;} .necessity-need.five>li{width:calc((100% - 8rem) / 5);} .purpose-list{counter-reset:item; display: flex; flex-flow: row wrap; gap:2.5rem;} .purpose-list>li{width:calc((100% - 5rem) / 3); min-height:24rem; padding:1.5rem; background-color: #f4f6f8; text-align: center; border-radius:1rem; overflow: hidden;} .purpose-list>li figure{height:13rem; display: flex; align-items: center; justify-content: center;} .purpose-list>li .txt{font-weight: 500; font-size:2.2rem; line-height:3rem; color: #555;} .cause-swiper{width:100%; display: flex; counter-reset:item; position: relative;} .cause-swiper .swiper-wrapper{width: 100%; height: 100%; display: flex; box-sizing: content-box;} .cause-swiper .swiper-wrapper .swiper-slide{width:20rem; height:46rem; background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all .3s ease-out; position: relative;} .cause-swiper .swiper-wrapper .swiper-slide:before{content: ""; width: 100%; height: 100%; background-color: #000; position: absolute; left:0; bottom:0; opacity:0.5;} /*.cause-swiper .swiper-wrapper .swiper-slide.bg01{background-image: url('/images/sub/img_cartilage02_01.jpg'); background-position: right center;}*/ .cause-swiper .out-box{min-height:100%; padding-top:17.5rem; color: #fff; text-align: center; display: flex; flex-flow: column nowrap; justify-content: start; position: relative; opacity: 0.5;} .cause-swiper .out-box .num{width:100%; font-size:2rem; line-height:1;} .cause-swiper .out-box .title{margin-top:1.5rem; font-size:3.5rem; line-height:4rem;} .cause-swiper .over-box{display:none; min-height:100%; align-items: center; justify-content: center; position: relative; z-index:2; animation:mc_over 0.3s cubic-bezier(.25,.46,.45,.94) both 0.2s} .cause-swiper .over-in{width:100%; max-width:38rem;} .cause-swiper .over-box .mGroup{margin-bottom:0; padding:0; text-align: left;} .cause-swiper .over-box .mGroup>p{font-weight: 400; font-size:2rem; line-height:1; text-transform:uppercase;} .cause-swiper .over-box .mGroup>h2{margin-top:3.5rem; font-weight: bold; font-size:4.5rem; line-height:1; color: #000;} .cause-swiper .over-box .mGroup>div{margin-top:1.5rem; font-weight: 500; font-size:2.2rem; line-height:3rem; color: #000;} .cause-swiper .swiper-wrapper .swiper-slide:nth-child(1) .over-box .link-box>a:is(:nth-last-child(2)):after{opacity: 0;} .cause-swiper .swiper-wrapper .swiper-slide:is(:hover, .active){width:48rem;} .cause-swiper .swiper-wrapper .swiper-slide:is(:hover, .active):before{opacity: 0;} .cause-swiper .swiper-wrapper .swiper-slide:is(:hover, .active) .out-box{display:none;} .cause-swiper .swiper-wrapper .swiper-slide:is(:hover, .active) .over-box{display:flex;} .before-after-box{display: flex; align-items: center;} .before-after-box figure{aspect-ratio:640/500; display: flex; overflow: hidden;} .before-after-box figure img{width:100%; max-width:none; height:100%; object-fit: cover;} .before-after-box>div{flex:1; position: relative;} .before-after-box>div:before{content: ""; width: 100%; height: 9rem; font-size:2.5rem; line-height:1; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; position:absolute; left: 0; bottom:0px; z-index:2;} .before-after-box .before:before{content: "수술 전"; background-color: rgba(132,141,150,0.95);} .before-after-box .after:before{content: "수술 후"; background-color: rgba(0,64,103,0.95); font-weight: bold;} html[lang="en"] .before-after-box .before:before{content: "Before surgery";} html[lang="en"] .before-after-box .after:before{content: "After surgery";} .classification-list{display: flex; flex-flow: row wrap; gap:2.8rem;} .classification-list>li{flex:1; min-height:14rem; padding:2rem 2rem 2rem 0; background-color: #f4f6f8; text-align: left; display: flex; align-items: center; border-radius:1rem; overflow: hidden;} .classification-list>li figure{width:13rem; display: flex; align-items: center; justify-content: center;} .classification-list>li dl{} .classification-list>li dl>dt{font-weight: 600; font-size:2.2rem; line-height:1.2; color: #000;} .classification-list>li dl>dd{font-size:2rem; line-height:2.8rem; color: #555;} .classification-list>li dl>dt+dd{margin-top:0.5rem;} .how-step{display: flex; align-items: center;} .how-step figure{aspect-ratio:427/241; display: flex; overflow: hidden;} .how-step figure img{width:100%; max-width:none; height:100%; object-fit: cover;} .how-step>li{flex:1; position: relative;} .how-step>li:after{content: attr(data-title); width: 100%; height: 9rem; background-color: #8a939b; font-weight: 600; font-size:2.5rem; line-height:1; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center;} .how-step>li:nth-of-type(2):after{background-color: var(--point2);} .how-step>li:nth-of-type(3):after{background-color: var(--point);} .how-step.no>li:after{display:none;} .how-step.tsa figure{aspect-ratio:640/383;} .how-step.ingrown figure{aspect-ratio:640/500;} .progress_step{counter-reset:item; display: flex; flex-flow: row wrap; gap:10rem;} .progress_step>li{width:calc((100% - 20rem) / 3); padding:4rem 1.5rem 4.5rem; background-color: #f4f6f8; text-align: center; border-radius:1rem; position: relative;} .progress_step>li+li:before{content: ""; width:10rem; height:100%; background:url('/images/arr_progress_step.png') no-repeat center center/3.8rem; position:absolute; left: -10rem; top:0;} .progress_step>li p:before{counter-increment: item; content: counter(item); font-weight: bold; font-size:1.8rem; line-height:1; color: #555;} .progress_step>li:nth-child(-n+9) p::before{content: "0"counter(item);} .progress_step>li dl{margin-top:2.5rem;} .progress_step>li dl>dt{font-weight: 600; font-size:2.2rem; line-height:1.2; color: #000;} .progress_step>li dl>dd{font-size:2rem; line-height:2.8rem; color: #555;} .progress_step>li dl>dt+dd{margin-top:1rem;} .progress_step[step]>li figure{margin:4rem 0 2.5rem;} .progress_step[step]>li p:before{content: "STEP 0"counter(item);} .progress_step[step]>li:nth-child(-n+9) p::before{content: "STEP 0"counter(item);} /* 관절센터 > 무릎 > 연골재생술 */ figure img[src*="icon_cartilage01_01"]{width:8.1rem;} figure img[src*="icon_cartilage01_02"]{width:8rem;} figure img[src*="icon_cartilage01_03"]{width:8.1rem;} figure img[src*="icon_cartilage01_04"]{width:6.2rem;} figure img[src*="icon_cartilage02_01"]{width:7.3rem;} figure img[src*="icon_cartilage02_02"]{width:6.1rem;} figure img[src*="icon_cartilage02_03"]{width:7.2rem;} .cause-swiper .swiper-wrapper .swiper-slide.bg01{background-image: url('/images/sub/img_cartilage02_01.jpg'); background-position: right center;} .cause-swiper .swiper-wrapper .swiper-slide.bg02{background-image: url('/images/sub/img_cartilage02_02.jpg'); background-position: 60% center;} .cause-swiper .swiper-wrapper .swiper-slide.bg03{background-image: url('/images/sub/img_cartilage02_03.jpg'); background-position: 20% center;} .cause-swiper .swiper-wrapper .swiper-slide.bg04{background-image: url('/images/sub/img_cartilage02_04.jpg'); background-position: right center;} .cause-swiper .swiper-wrapper .swiper-slide.bg05{background-image: url('/images/sub/img_cartilage02_05.jpg'); background-position: 90% center;} /* 관절센터 > 무릎 > 십자인대 재건술 */ figure img[src*="icon_acl01_01"]{width:9.6rem;} figure img[src*="icon_acl01_02"]{width:7.1rem;} figure img[src*="icon_acl01_03"]{width:6.8rem;} figure img[src*="icon_acl01_04"]{width:6.7rem;} figure img[src*="icon_acl01_05"]{width:5.2rem;} .acl01{padding:12rem 0; background:url('/images/sub/bg_acl01.jpg') no-repeat center center/cover; } /* 관절센터 > 무릎 > 연골판 봉합 및 절제술 */ .meniscus01{padding:12rem 0; background:url('/images/sub/bg_meniscus01.jpg') no-repeat center center/cover; } /* 관절센터 > 무릎 > 근위경골절골술 */ figure img[src*="icon_hto01_01"]{width:3.8rem;} figure img[src*="icon_hto01_02"]{width:8rem;} figure img[src*="icon_hto01_03"]{width:6.4rem;} figure img[src*="icon_hto02_01"]{width:8rem;} figure img[src*="icon_hto02_02"]{width:8.1rem;} figure img[src*="icon_hto02_03"]{width:8rem;} figure img[src*="icon_hto02_04"]{width:6.5rem;} .hto01{padding:12rem 0; background:url('/images/sub/bg_hto01.jpg') no-repeat center center/cover; } /* 관절센터 > 무릎 > 인공관절 수술 */ .tka01{padding:12rem 0; background:url('/images/sub/bg_tka01.jpg') no-repeat center center/cover; } /* 관절센터 > 어깨 > 회전근개 봉합 */ figure img[src*="icon_rc-repair01_01"], figure img[src*="icon_rc-repair01_02"], figure img[src*="icon_rc-repair01_03"], figure img[src*="icon_rc-repair01_04"]{width:7rem;} figure img[src*="icon_rc-repair02_01"]{width:8.1rem;} figure img[src*="icon_rc-repair02_02"]{width:7.6rem;} figure img[src*="icon_rc-repair02_03"]{width:8rem;} figure img[src*="icon_rc-repair02_04"]{width:6.4rem;} .rc-repair01{padding:12rem 0; background:url('/images/sub/bg_rc-repair01.jpg') no-repeat right center/cover; } /* 관절센터 > 어깨 > 인공관절 수술 */ figure img[src*="icon_tsa01_01"]{width:6.1rem;} figure img[src*="icon_tsa01_02"]{width:7.7rem;} figure img[src*="icon_tsa01_03"]{width:9.7rem;} figure img[src*="icon_tsa01_04"]{width:8.2rem;} .frozen01{padding:12rem 0; background:url('/images/sub/bg_rc-repair01.jpg') no-repeat right center/cover; } /* 관절센터 > 어깨 > 오십견 수술 */ figure img[src*="icon_frozen01_01"]{width:5.6rem;} figure img[src*="icon_frozen01_02"]{width:5.5rem;} figure img[src*="icon_frozen01_03"]{width:5.2rem;} .visual-radius.frozen{display: flex; flex-flow: row wrap;} .visual-radius.frozen figure{flex:1;} .frozen01{padding:12rem 0; background:url('/images/sub/bg_frozen01.jpg') no-repeat right center/cover; } /* 관절센터 > 어깨 > 석회 제거술 */ figure img[src*="icon_calc-removal01_01"]{width:5.8rem;} figure img[src*="icon_calc-removal01_02"]{width:6rem;} figure img[src*="icon_calc-removal01_03"]{width:7.8rem;} figure img[src*="icon_calc-removal01_04"]{width:7.6rem;} .calc-removal01{padding:12rem 0; background:url('/images/sub/bg_calc-removal01.jpg') no-repeat right center/cover; } /* 관절센터 > 팔꿈치 > 테니스엘보 골프엘보 관절경 수술 */ figure img[src*="icon_elbow-scope01_01"]{width:6rem;} figure img[src*="icon_elbow-scope01_02"]{width:6.4rem;} figure img[src*="icon_elbow-scope01_03"]{width:8.5rem;} figure img[src*="icon_elbow-scope01_04"]{width:6.8rem;} .elbow-scope01{padding:12rem 0; background:url('/images/sub/bg_elbow-scope01.jpg') no-repeat center center/cover; } /* 관절센터 > 팔꿈치 > 척골 신경이전술 */ figure img[src*="icon_ulnar-trans01_01"]{width:8.3rem;} figure img[src*="icon_ulnar-trans01_02"]{width:5.4rem;} figure img[src*="icon_ulnar-trans01_03"]{width:7.6rem;} figure img[src*="icon_ulnar-trans01_04"]{width:6.8rem;} .ulnar-trans01{padding:12rem 0; background:url('/images/sub/bg_ulnar-trans01.jpg') no-repeat center center/cover; } /* 관절센터 > 손목/손가락 > 손목터널증후군 수술 */ figure img[src*="icon_cts01_01"]{width:4.8rem;} figure img[src*="icon_cts01_02"]{width:7.8rem;} figure img[src*="icon_cts01_03"]{width:9.5rem;} figure img[src*="icon_cts01_04"]{width:8.1rem;} .cts01{padding:12rem 0; background:url('/images/sub/bg_cts01.jpg') no-repeat center center/cover; } /* 관절센터 > 손목/손가락 > 방아쇠수지 수술 */ figure img[src*="icon_trigger01_01"]{width:6.6rem;} figure img[src*="icon_trigger01_02"]{width:6rem;} figure img[src*="icon_trigger01_03"]{width:6.5rem;} .trigger01{padding:12rem 0; background:url('/images/sub/bg_trigger01.jpg') no-repeat center center/cover; } /* 관절센터 > 손목/손가락 > 척골충돌증후군 수술 */ figure img[src*="icon_ulnar01_01"]{width:6rem;} .ulnar01{padding:12rem 0; background:url('/images/sub/bg_ulnar01.jpg') no-repeat center center/cover; } /* 관절센터 > 손목/손가락 > TFCC 관절경봉합술 */ figure img[src*="icon_tfcc01_01"]{width:8.6rem;} figure img[src*="icon_tfcc01_02"]{width:7.5rem;} figure img[src*="icon_tfcc01_03"]{width:8.5rem;} figure img[src*="icon_tfcc01_04"]{width:9.1rem;} .tfcc01{padding:12rem 0; background:url('/images/sub/bg_tfcc01.jpg') no-repeat center center/cover; } /* 관절센터 > 고관절 > 인공관절 수술 */ .tha01{padding:12rem 0; background:url('/images/sub/bg_tha01.jpg') no-repeat 80% center/cover; } /* 관절센터 > 발목 > 발목인대봉합술 */ figure img[src*="icon_ligament01_01"]{width:6.5rem;} figure img[src*="icon_ligament01_02"]{width:7.9rem;} figure img[src*="icon_ligament01_03"]{width:7.6rem;} .ligament01{padding:12rem 0; background:url('/images/sub/bg_ligament01.jpg') no-repeat center center/cover; } /* 관절센터 > 발목 > 관절경 연골재생술 */ figure img[src*="icon_kcartilage01_01"]{width:4.1rem;} figure img[src*="icon_kcartilage01_02"]{width:9.1rem;} figure img[src*="icon_kcartilage01_03"]{width:5.7rem;} figure img[src*="icon_kcartilage01_04"]{width:7.6rem;} .kcartilage01{padding:12rem 0; background:url('/images/sub/bg_kcartilage01.jpg') no-repeat center center/cover; } /* 관절센터 > 발목 > 수면 내향성발톱 제거술 */ figure img[src*="icon_ingrown01_01"]{width:8.7rem;} figure img[src*="icon_ingrown01_02"]{width:8.7rem;} figure img[src*="icon_ingrown01_03"]{width:7.3rem;} figure img[src*="icon_ingrown01_04"]{width:6.2rem;} .ingrown01{padding:12rem 0; background:url('/images/sub/bg_ingrown01.jpg') no-repeat center center/cover; } /* 척추센터 > 경막외신경성형술 */ figure img[src*="icon_epidural-neuroplasty01_01"]{width:4.6rem;} figure img[src*="icon_epidural-neuroplasty01_02"]{width:8.7rem;} figure img[src*="icon_epidural-neuroplasty01_03"]{width:6.6rem;} figure img[src*="icon_epidural-neuroplasty01_04"]{width:11.1rem;} .epidural-neuroplasty01{padding:12rem 0; background:url('/images/sub/bg_epidural-neuroplasty01.jpg') no-repeat center center/cover; } /* 척추센터 > 척추내시경수술 */ figure img[src*="icon_endoscopic01_01"]{width:5.3rem;} figure img[src*="icon_endoscopic01_02"]{width:4.7rem;} figure img[src*="icon_endoscopic03_01"]{width:5.3rem;} figure img[src*="icon_endoscopic03_02"]{width:7.5rem;} figure img[src*="icon_endoscopic03_03"]{width:5.5rem;} figure img[src*="icon_endoscopic03_04"]{width:7.1rem;} .endoscopic01{padding:12rem 0; background:url('/images/sub/bg_endoscopic01.jpg') no-repeat center center/cover; } /* 척추센터 > 최소침습척추유합술 */ figure img[src*="icon_mis-fusion01_01"]{width:7.4rem;} figure img[src*="icon_mis-fusion01_02"]{width:6.4rem;} figure img[src*="icon_mis-fusion01_03"]{width:5.6rem;} figure img[src*="icon_mis-fusion01_04"]{width:7.6rem;} figure img[src*="icon_mis-fusion01_05"]{width:7.6rem;} .mis-fusion01{padding:12rem 0; background:url('/images/sub/bg_mis-fusion01.jpg') no-repeat center center/cover; } /* 척추센터 > 척추체성형술 */ .vertebroplasty01{padding:12rem 0; background:url('/images/sub/bg_vertebroplasty01.jpg') no-repeat center center/cover; } /* 척추센터 > 경추유합술/인공디스크치환술 */ figure img[src*="icon_cervical-fusion01_01"]{width:4.9rem;} figure img[src*="icon_cervical-fusion01_02"]{width:6.5rem;} figure img[src*="icon_cervical-fusion01_03"]{width:6.1rem;} .visual-radius.cervical-fusion{display: flex; flex-flow: row wrap;} .visual-radius.cervical-fusion figure{flex:1;} .cervical-fusion01{padding:12rem 0; background:url('/images/sub/bg_cervical-fusion01.jpg') no-repeat center center/cover; } /* 골절외상센터 > 골절 */ figure img[src*="icon_fracture01_01"]{width:6.8rem;} figure img[src*="icon_fracture01_02"]{width:9.6rem;} figure img[src*="icon_fracture01_03"]{width:9.7rem;} figure img[src*="icon_fracture01_04"]{width:7rem;} .fracture01{padding:12rem 0; background:url('/images/sub/bg_fracture01.jpg') no-repeat center center/cover; } /* 골절외상센터 > 불유합 */ figure img[src*="icon_nonunion01_01"]{width:5.7rem;} figure img[src*="icon_nonunion01_02"]{width:7rem;} figure img[src*="icon_nonunion01_03"]{width:6.6rem;} figure img[src*="icon_nonunion01_04"]{width:6.6rem;} figure img[src*="icon_nonunion01_05"]{width:6.6rem;} figure img[src*="icon_nonunion01_06"]{width:6.6rem;} .nonunion01{padding:12rem 0; background:url('/images/sub/bg_nonunion01.jpg') no-repeat center center/cover; } /* 골절외상센터 > 감염(골수염) */ figure img[src*="icon_infection01_01"]{width:7.5rem;} figure img[src*="icon_infection01_02"]{width:6.6rem;} figure img[src*="icon_infection01_03"]{width:5.7rem;} figure img[src*="icon_infection01_04"]{width:7.1rem;} figure img[src*="icon_infection01_05"]{width:7.3rem;} .infection01{padding:12rem 0; background:url('/images/sub/bg_infection01.jpg') no-repeat center center/cover; } /* 응급의학센터 > 응급의학센터 */ figure img[src*="icon_er-center02_01"]{width:7rem;} figure img[src*="icon_er-center02_02"]{width:6rem;} figure img[src*="icon_er-center02_03"]{width:8.1rem;} figure img[src*="icon_er-center02_04"]{width:8.5rem;} figure img[src*="icon_er-center02_05"]{width:6rem;} /* 재활치료센터 > 도수치료 */ .manual01{padding:12rem 0; background:url('/images/sub/bg_manual01.jpg') no-repeat center center/cover; } /* 재활치료센터 > 운동/물리치료 */ figure img[src*="icon_exercise01_01"]{width:7.1rem;} figure img[src*="icon_exercise01_02"]{width:5.5rem;} figure img[src*="icon_exercise01_03"]{width:5.9rem;} figure img[src*="icon_exercise02_01"]{width:7.2rem;} figure img[src*="icon_exercise02_02"]{width:6.2rem;} figure img[src*="icon_exercise02_03"]{width:7.8rem;} /* 재활치료센터 > 슬링운동치료 */ figure img[src*="icon_sling01_01"]{width:7rem;} figure img[src*="icon_sling01_02"]{width:6.1rem;} figure img[src*="icon_sling01_03"]{width:5.9rem;} /* 재활치료센터 > 체외충격파 */ figure img[src*="icon_eswt01_01"]{width:7.1rem;} figure img[src*="icon_eswt01_02"]{width:7.1rem;} figure img[src*="icon_eswt01_03"]{width:7rem;} figure img[src*="icon_eswt01_04"]{width:6.1rem;} /* 재활치료센터 > CPM치료 */ figure img[src*="icon_cpm01_01"]{width:6.2rem;} figure img[src*="icon_cpm01_02"]{width:6.7rem;} figure img[src*="icon_cpm01_03"]{width:4.6rem;} figure img[src*="icon_cpm01_04"]{width:7.7rem;} /* 강서K병원 > 병원소개 */ .bg-text{max-width:100%; font-weight: bold; font-size:26rem; line-height:1; color: #eaeff5; letter-spacing: 25px !important; text-align: center; white-space: nowrap; position: absolute; left:0; top:3.2rem; overflow: hidden;} .bg-text>span{display:inline-block; vertical-align: top; position: relative;} .bg-text>span:before{content: attr(data-title); width: 100%; position:absolute; left: 0; top:73%; transform:rotateX(180deg); background: -moz-linear-gradient(top, rgba(228,234,241,0) 0%, rgba(228,234,241,0) 20%, rgba(228,234,241,0.4) 60%, rgba(228,234,241,0.1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(228,234,241,0) 0%,rgba(228,234,241,0) 20%,rgba(228,234,241,0.4) 60%,rgba(228,234,241,0.1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(228,234,241,0) 0%,rgba(228,234,241,0) 20%,rgba(228,234,241,0.4) 60%,rgba(228,234,241,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e5e9ed', endColorstr='#1ae5e9ed',GradientType=0 ); /* IE6-9 */ color:transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; } .about-intro{padding-top:0 !important; background:#f4f6f8 url('/images/sub/bg_intro01.jpg') repeat-x left top; position: relative;} .about-intro>.inConts{z-index:2;} .about-intro .photo{display: flex; align-items: center; justify-content: center;} .about-intro .cate{font-weight: bold; font-size:2.2rem; line-height:1; color: var(--point);} .about-intro .title{font-size:4rem; line-height:5rem; color: #000;} .about-intro .text{font-size:2rem; line-height:3rem; color: #555; display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between; position: relative;} .about-intro .text:before{content: ""; width: 1px; height: 100%; background-color: #ddd; display: inline-block; position:absolute; left: 50%; top:0px; transform: translateX(-50%);} .about-intro .text>li{width:calc((100% - 8rem) / 2);} .about-intro .text>li p+p{margin-top:2.5rem;} .about-intro .text>li p.name{font-weight: 600; font-size:2.5rem; color: #000;} .intro-hash{display: flex; flex-flow: column wrap; gap:1rem;} .intro-hash>dl{display: flex; flex-flow: row wrap; align-items: start; gap:1rem;} .intro-hash>dl>dt{min-width:6rem; height:3.2rem; padding:0 1rem; background-color: #e6ecf0; font-weight: 500; font-size:1.7rem; line-height:1; color: var(--point2); white-space: nowrap; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; border-radius:99px; overflow: hidden;} .intro-hash>dl>dd{flex:1; margin-top: 0.2rem; font-size: 1.8rem; line-height: 2.8rem; color: #555;} .intro-hash>dl.br{gap:0 1rem;} .intro-hash>dl.br>dd{flex:1 1 100%; margin:0; height:1rem; font-size: 0; line-height:0;} html[lang="en"] .intro-hash>dl>dt{min-width:9rem;} .history-flex{height:100vh; padding:15rem 2rem 17rem; background:url('/images/sub/bg_intro02.jpg') no-repeat left top/cover;} .history-flex>.inConts{padding:0; position: relative;} .history-flex .history-year{line-height:1; color: #fff; position: absolute; left:0; top:0;} .history-flex .history-year>dl{padding-bottom:7rem;} .history-flex .history-year>dl>dt{font-weight: bold; font-size:2.5rem;} .history-flex .history-year>dl>dd{margin-top:1.5rem; font-size:2rem; color: #848d96;} .history-flex .history-year>strong{font-weight: 800; font-size:12rem; display:block; position: relative;} .history-flex .history-year>strong>span{position: absolute;left:0; top:0; opacity: 0;} .history-flex .history-textarea{width:54%; padding:0 0 32rem; position: absolute; right:0; top:0;} .history-flex .history-textarea:before{content: ""; width: 1px; height: 100%; background-color: #234253; position:absolute; left: -19%; top:-15rem; display:block;} .history-flex .history-textarea .line{width: 1px; height: 0; background-color: var(--point); position:absolute; left: -19%; top:-15rem; display:block;} .history-flex .history-text{} .history-flex .history-text+.history-text{margin-top:15rem;} .history-flex .history-text .hide-year{margin-bottom:3rem; font-weight: bold; font-size:6rem; line-height:1; color: #fff; display:none;} .history-flex .history-text dl{font-weight: 500; font-size:3rem; line-height:4rem; color: #fff; display: flex; opacity:0.1; transition: all .3s ease-out;} .history-flex .history-text dl>dt{width:9rem;} .history-flex .history-text dl>dd{flex:1;} .history-flex .history-text dl+dl{margin-top:2rem;} .history-flex .history-text.on dl{opacity:1;} /* 강서K병원 > 의료진소개 */ *[onclick]{cursor: pointer;} .doctor-list{display: flex; flex-flow: row wrap; justify-content: space-between; gap:6rem;} .doctor-list>li{width:calc((100% - 6rem) / 2); padding:3rem 3rem 4rem; background-color: #f4f6f8; border:1px solid #e2e2e2; border-top:2px solid var(--point2);display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between;} .doctor-list>li figure{width:18rem;} .doctor-list>li .info-conts{flex:1; padding-left:3.5rem;} .doctor-list>li .info-conts .name{font-weight: 600; font-size:3rem; line-height:1.3; color: #000;} .doctor-list>li .info-conts .cate{margin-top:0.5rem; font-weight: 600; font-size:2rem; line-height:1.3; color: var(--point2);} .doctor-list>li .info-conts .info{margin-top:1.5rem; padding-top:2.5rem; border-top:1px solid #dbdddf;} .doctor-list>li .info-conts .info>dt{width:8rem; height:3rem; background-color:var(--point2); font-weight: 500; font-size:1.7rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:0.3rem;} .doctor-list>li .info-conts .info>dd{margin-top:1rem; font-weight: 500; font-size:1.8rem; line-height:2.8rem; color: #555;} html[lang="en"] .doctor-list>li .info-conts .info>dt{width:15rem;} /* 강서K병원 > 병원 둘러보기 */ .tour-tab{margin-bottom:6rem; display: flex; position: relative;} .tour-tab:before{content: ""; width: 100%; height: 1px; background-color: #000; display:block; position:absolute; left: 0; bottom:0; z-index:2;} .tour-tab :where(button, a){flex:1; height:7rem; background-color: #f4f6f8; border:1px solid #dedede; font-size:2rem; line-height:1; color: #666; display: flex; align-items: center; justify-content: center; position: relative;} .tour-tab :where(button, a):before{content: ""; width: 100%; height: 1px; background-color: #fff; position:absolute; left: 0; bottom:-1px; display:none;} .tour-tab :where(button, a)+:where(button, a){margin-left:-1px;} .tour-tab :where(button, a):is(:hover, .active){background-color: #fff; border-color:#000; font-weight: 600; color: #000; z-index:3;} .tour-tab :where(button, a):is(:hover, .active):before{display:block;} .bigSwiper{width:100%; position: relative; overflow:hidden;} .bigSwiper .swiper-wrapper{display: flex; flex-flow: row nowrap;} .bigSwiper .swiper-wrapper .swiper-slide{min-width:100%; width:100%; font-size:0; line-height:0; position: relative; overflow:hidden; display:flex; vertical-align: top;} .bigSwiper .swiper-wrapper .swiper-slide figure{aspect-ratio:1280/760;} .bigSwiper .swiper-wrapper .swiper-slide img{width:100%; height:100%; max-width:none; object-fit: cover;} .bigSwiper .tour-text{width:100%; display: flex; flex-flow: row wrap; position: absolute; left:0; bottom:0; z-index:7;} .bigSwiper .tour-text>dt{width:25rem; background-color: var(--point2); font-weight: bold; font-size:3rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; position: relative;} .bigSwiper .tour-text>dt:before{content: ""; width: 0; height: 0; margin-top:-1rem; border:0 solid transparent; border-left:1rem solid var(--point2); border-top-width:1rem; border-bottom-width:1rem; display: inline-block; position:absolute; right: -1rem; top:50%;} .bigSwiper .tour-text>dd{flex:1; min-height:10rem; padding:2rem 5rem; background-color: rgba(0,0,0,0.3); font-weight: 500; font-size:2.2rem; line-height:3.2rem; color: #fff; display: flex; align-items: center;} .bigSwiper .swiper-button{margin-top:-2.5rem; cursor: pointer; position: absolute; top:50%; z-index:7;} .bigSwiper .swiper-button-prev{left:2rem;} .bigSwiper .swiper-button-next{right:2rem;} .bigSwiper .swiper-pagination{width:100%; text-align: center; position: absolute; left:0; top:auto; bottom:14rem; z-index:7;} .bigSwiper .swiper-pagination-bullet{width:16px; height:16px; margin:0 0.7rem; background-color:#fff; border-radius:99px; display: inline-block; vertical-align: top; cursor: pointer; opacity: 0.5;} .bigSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active{width:55px; background-color: var(--point2); opacity: 1;} .smallSwiper{width:100%; margin-top:2rem; position: relative; overflow:hidden;} .smallSwiper .swiper-wrapper{width: 100%; height: 100%; display: flex; box-sizing: content-box;} .smallSwiper .swiper-wrapper .swiper-slide{flex-shrink: 0; width:36.6rem; margin-right:2rem; font-size:0; line-height:0; position: relative; overflow:hidden; display:flex; vertical-align: top;} .smallSwiper .swiper-wrapper .swiper-slide:before{content: ""; width: 100%; height: 100%; background-color:var(--point2); display: inline-block; position:absolute; left: 0; top:0px; opacity: 0.6;} .smallSwiper .swiper-wrapper .swiper-slide:last-child {margin-right:0;} .smallSwiper .swiper-wrapper .swiper-slide figure{aspect-ratio:366/244;} .smallSwiper .swiper-wrapper .swiper-slide img{width:100%; height:100%; max-width:none; object-fit: cover;} .smallSwiper .swiper-wrapper .swiper-slide.swiper-slide-active:before{opacity: 0;} /* 강서K병원 > 찾아오시는길 */ figure img[src*="icon_location01"]{width:2.7rem;} figure img[src*="icon_location02_01"], figure img[src*="icon_location03_01"], figure img[src*="icon_location04_01"], figure img[src*="icon_location05_01"]{width:18.1rem;} figure img[src*="icon_location02_02"]{width:2.6rem;} .location-title{display: flex; align-items: start; justify-content: center; gap:0 0.8rem;} .location-title>strong{font-weight: bold; font-size:4rem; line-height:1; color: #000;} .location-title>figure{} .location-title>figure img{min-width:2.7rem; display:block;} .location-layout{width:100%; display: flex; justify-content: space-between; gap:0 3rem;} .location-layout>.left{width:18.1rem; text-align: center;} .location-layout>.left>dt{font-weight: bold; font-size:3.5rem; line-height:4.5rem; color: #000; white-space: nowrap;} .location-layout>.left>dd{margin-top:2rem;} .location-layout>.right{margin-top:-3.7rem; flex:1; max-width:75%; counter-reset:item;} .location-layout>.right>li{padding:4rem 0;} .location-layout>.right>li+li{border-top:1px solid #dedede;} .location-layout>.right>li>p{padding-left:4rem; font-weight: bold; font-size:2.5rem; line-height:1.3; color: #000; position: relative;} .location-layout>.right>li>p:before{counter-increment: item; content: counter(item); width:3rem; height:2.5rem; background-color: var(--point2); font-weight: bold; font-size:1.7rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; left:0; top:0.3rem; border-radius:0.3rem; overflow: hidden;} .location-layout .car-navi{height:6rem; padding:0 2.5rem 0 3.5rem; font-size:2.2rem; line-height:3.2rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius:999px; gap:0 0.4rem; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009aff+0,0078c7+100 */ background: linear-gradient(to bottom, rgba(0,154,255,1) 0%,rgba(0,120,199,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .location-layout .car-navi>strong{font-weight: 600;} .location-layout .car-location{margin-top:1.3rem; display: flex; flex-flow: row wrap; align-items: start; gap:1rem;} .location-layout .car-location+.car-location{margin-top:0.6rem;} .location-layout .car-location>dt{width:13rem; height:3.4rem; background-color: #e6ecf0; font-weight: 500; font-size:1.8rem; line-height:1; color: var(--point2); white-space: nowrap; display: flex; align-items: center; justify-content: center; border-radius:99px;} .location-layout .car-location>dd{flex:1; padding-top:0.2rem; font-size:2rem; line-height:3rem; color: #555;} .location-layout .color-location{margin-top:1.5rem; font-size:2rem; line-height:3rem; color: #555;} .location-layout .color-location>dt{display: flex; flex-flow: row wrap; align-items: start; gap:1.5rem;} .location-layout .color-location>dt+dt{margin-top:1rem;} .location-layout .color-location>dt>p{display: flex; flex-flow: row wrap; align-items: start; gap:1rem;} .location-layout .color-location>dt>p>strong{padding-top:0.2rem; font-weight: 500; color: #000;} .location-layout .color-location>dt .marker{width:7rem; height:3.5rem; background-color: #848d96; font-weight: 600; font-size:1.7rem; line-height:1; color: #fff; white-space: nowrap; display: flex; align-items: center; justify-content: center; border-radius:99px;} .location-layout .color-location>dt .marker+.marker{margin-left:-0.5rem;} .location-layout .color-location>dt .marker.line-1{background-color: #263c96;} .location-layout .color-location>dt .marker.line-2{background-color: #3cb44a;} .location-layout .color-location>dt .marker.line-5{background-color: #8936e0;} .location-layout .color-location>dt .marker.line-a{background-color: #69afdf;} .location-layout .color-location>dt .marker.line-j{background-color: #5ac537;} .location-layout .color-location>dt .marker.line-g{background-color: #2c7ec6;} .location-layout .color-location>dd{padding-top:0.7rem;} html[lang="en"] .location-layout .car-location{gap:0.5rem 0;} html[lang="en"] .location-layout .car-location>dt{width:auto; padding:0 1.5rem;} html[lang="en"] .location-layout .car-location>dd{flex:auto; width:100%;} html[lang="en"] .location-layout .car-location+.car-location{margin-top:2rem;} html[lang="en"] .location-layout .color-location>dt .marker{width:13.2rem;} /* 이용안내 > 진료시간표 */ .timetable-area{} .timetable-area .timetable-re{width:100%; padding-left:25%; display: flex; flex-flow: row wrap; justify-content: space-between; position: relative;} .timetable-area .timetable-re+.timetable-re{margin-top:8rem;} .timetable-area .timetable-re>figure{width:22%; max-width:28rem; height:34rem; aspect-ratio:280/340; background-color: #f4f6f8; border-radius:1rem; display: flex; align-items: center; justify-content: center; position: relative; position: absolute; left:0; top:0;} .timetable-area .timetable-re>figure img{max-width:85%; max-height:85%; object-fit: cover;} .timetable-area .timetable-re>figure p{width:100%; height:6.5rem; font-weight: 600; font-size:2.5rem; line-height:1.3; color: #000; position: absolute; left:0; bottom:0; display: flex; align-items: center; justify-content: center; gap:0.4rem; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009aff+0,f4f6f8+50,f4f6f8+100&0+0,0.9+50,1+100 */ background: linear-gradient(to bottom, rgba(0,154,255,0) 0%,rgba(244,246,248,0.9) 40%,rgba(244,246,248,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .timetable-area .timetable-re .timetable-conts{} .timetable-area .timetable-re .timetable-two{width:100%;} .timetable-area .timetable-re .timetable-two .name{margin-top:-0.5rem; display: flex; flex-flow: row wrap; align-items: end; gap:1rem 2rem;} .timetable-area .timetable-re .timetable-two .name>dt{font-weight: 800; font-size:4rem; line-height:5rem; color: #000;} .timetable-area .timetable-re .timetable-two .name>dd{font-weight: 600; font-size:2.5rem; line-height:3.5rem; color: #222;} .timetable-area .timetable-re .timetable-two .reservation-btn{margin-top:-5.5rem; position: relative; top:0rem; z-index:2;} .timetable-area .timetable-re .timetable-three{width:100%;} .timetable-area .timetable-re .timetable-three .sticky-table{margin-top:1.6rem; border-top:2px solid #555;} figure img[src*="icon_hospital2"]{width:7.5rem;} figure img[src*="icon_tel"]{width:5.8rem;} .timetable-info{height:24rem; margin-top:11rem; padding:4.3rem 0; background-color: #f3f6f9; display: flex; flex-flow: row wrap; align-items: center; border-radius:1rem;} .timetable-info>div{width:calc(100% / 3); display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; text-align: center;} .timetable-info>div+div{border-left:1px solid #ddd;} .timetable-info .title{font-weight: bold; font-size:3rem; line-height:1; color: #000;} .timetable-info .time{} .timetable-info .time .title{margin-bottom:1.5rem;} .timetable-info .time>dl{font-weight: 500; font-size:1.8rem; line-height:2.8rem; color: #000; display: flex; align-items: center; gap:0 1rem;} .timetable-info .time>dl>dt{width:7.5rem; color: var(--point2);display: flex; justify-content: space-between;} .timetable-info .time>dl>dd{} .timetable-info figure{height:9rem; display: flex; align-items: start; justify-content: center;} .timetable-info figure+dl>dt{font-weight: 500; font-size:2.2rem; line-height:1; color: var(--point2);} .timetable-info figure+dl>dd{margin-top:1rem;} /* 이용안내 > 간호간병통합서비스 */ figure img[src*="icon_nursecare01_01"]{width:6rem;} figure img[src*="icon_nursecare01_02"]{width:6.5rem;} figure img[src*="icon_nursecare01_03"]{width:6.5rem;} figure img[src*="icon_nursecare01_01"]{width:5rem;} figure img[src*="icon_nursecare01_02"]{width:5.7rem;} figure img[src*="icon_nursecare01_03"]{width:5.8rem;} .nursecare01{padding:12rem 0; background:url('/images/sub/bg_nursecare01.jpg') no-repeat center center/cover; } .nursecare01 .bul-check{display: flex; flex-flow: row wrap; justify-content: center; gap:0 2rem;} .nursecare01 .bul-check>li+li{margin-top:0;} /* 이용안내 > 입퇴원안내 */ figure img[src*="icon_admission03_01"]{width:10rem;} figure img[src*="icon_admission03_02"]{width:13.8rem;} figure img[src*="icon_admission03_03"]{width:10rem;} .admission-info{display: flex; flex-flow: column nowrap; gap:5.5rem 0;} .admission-info>li{display: flex; flex-flow: row wrap; gap:0 2rem; position: relative;} .admission-info>li+li{padding-top:5.5rem; border-top:1px solid #ddd;} .admission-info>li>figure{width:24rem; display: flex; align-items: start; justify-content: center;} .admission-info>li>.conts{flex:1;} .admission-info>li .title{font-weight: bold; font-size:3rem; line-height:4rem; color: #000;} .admission-info>li .title>figure{display:none;} .admission-info>li .text{font-weight: 500; font-size:2.2rem; line-height:3.2rem; color: #000;} .admission-info>li .txt{font-size:2rem; line-height:3rem; color: #555;} /* 이용안내 > 서류발급안내 */ figure img[src*="icon_document01_01"]{width:6rem;} figure img[src*="icon_document01_02"]{width:6rem;} figure img[src*="icon_document01_03"]{width:6.6rem;} figure img[src*="icon_document02_01"]{width:17rem;} figure img[src*="icon_document02_02"]{width:17rem;} figure img[src*="icon_document03_01"]{width:4.6rem;} figure img[src*="icon_document03_02"]{width:2rem;} .document-issue-btn{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap:4rem;} .document-issue-btn>a{width:calc((100% - 4rem) / 2); background-color: #f4f6f8; display: flex; align-items: center; justify-content: space-between; border-radius:3rem; overflow: hidden;} .document-issue-btn>a figure{width:17rem; background-color: var(--point2);} .document-issue-btn>a[kakao] figure{background-color: #ffeb00;} .document-issue-btn>a dl{flex:1; padding:0 4rem; font-size:2rem; line-height:3rem; color: #555;} .document-issue-btn>a dl>dt{font-weight: 500; color: #000;} .document-down-btn{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap:4rem;} .document-down-btn>a{width:calc((100% - 8rem) / 3); min-height:14rem; background-color: #f4f6f8; display: flex; align-items: center; justify-content: center; border-radius:3rem; overflow: hidden;} .document-down-btn>a figure{} .document-down-btn>a dl{padding:0 1.7rem; font-size:1.6rem; line-height:2.6rem; color: #000;} .document-down-btn>a dl>dt{font-weight: 600; font-size:2rem; line-height:3rem;} .sticky-table.document{margin-top:2.5rem; border-top:2px solid #555;} .sticky-table.document td.point.tar strong{font-weight: 600;} /* .pg-visual{display:flex; position: relative;} .pg-visual>p{width:100%; padding:5rem 2rem 0; font-weight: bold; font-size:6rem; line-height:1.3; color: #fff; text-align: center; position: absolute; left:0; top:0;} .overview-info{display: flex; flex-flow: row wrap; justify-content: space-between;} .overview-info>li{width:27.1429%; display: flex; flex-flow: column nowrap;} .overview-info>li>dl{width:100%; font-weight: 500; font-size:2.2rem; line-height:3.2rem; color: #333; display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between;} .overview-info>li>dl>dt{} .overview-info>li>dl>dd{flex:1; text-align: right; font-weight: bold; color: #111;} .overview-info>li>dl>dd>p{font-weight: 300; font-size:1.8rem; line-height:2.8rem; color: #222;} .overview-info>li>dl+dl{margin-top:4.5rem; padding-top:4.5rem; border-top:2px solid #e6e6e6;} html[lang="en"] .overview-info>li>dl>dt{width:100%;} html[lang="en"] .overview-info>li>dl>dd{text-align:left;} .location-top{margin-top:4.5rem; display: flex; flex-flow: row wrap; justify-content: space-between;} .location-top img[src*="icon_marker"]{width:2.2rem;} .location-top img[src*="icon_tel"]{width:5.4rem;} .location-top img[src*="icon_fax"]{width:5.5rem;} .location-top .location-info{flex:1; display: flex; flex-flow: row wrap; gap:2.5rem 4rem;} .location-top .location-info>dl{display: flex; flex-flow: row wrap; align-items: center; gap:0 1rem;} .location-top .location-info>dl>dt{} .location-top .location-info>dl>dd{flex:1; font-weight: 500; font-size:2rem; line-height:1.3; color: #222;} .location-top .location-info>dl.juso{width:100%; align-items: start; gap:0 1.3rem;} .location-top .location-info>dl.juso>dt{padding-top:0.4rem;} .location-top .location-info>dl.juso>dd{font-size:3rem;} .location-top .location-btns{width:37.8571%; display: flex; gap:1rem;} .location-top .location-btns>a{width:100%; max-width:26rem; height:7rem; padding:2rem; background-color: #f6f6f6; border:1px solid #e6e6e6; font-weight: 500; font-size:2rem; line-height:1.3; color: #666; display: flex; align-items: center; justify-content: space-between; border-radius:0.5rem;} .location-top .location-btns>a img{width:1.2rem;} .location-top .location-btns>a:hover{background-color: var(--point); border-bottom-color:var(--point); color: #fff;} .location-top .location-btns>a:hover img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .location-top.en_pg{gap:3rem 0} .location-top.en_pg .location-btns{width:100%; justify-content:flex-end;} .location-traffic{display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between;} .location-traffic img[src*="icon_walking"]{width:2.7rem;} .location-traffic img[src*="icon_car"]{width:5rem;} .location-traffic img[src*="icon_bus"]{width:5rem;} .location-traffic>dl{width:48%; padding-left:7.6rem; position: relative;} .location-traffic>dl>dt{display: flex; align-items: center; font-weight: 500; font-size:3rem; line-height:1.3; color: #222;} .location-traffic>dl>dt .icon{width:7.6rem; margin-left:-7.6rem; display: flex; align-items: center; justify-content: center;} .location-traffic>dl>dd{margin-top:0.5rem; font-size:2rem; line-height:3rem; color: #666;} .location-traffic>dl.one{width:100%; margin-top:3.5rem; padding-top:3.5rem; border-top:1px solid #e6e6e6;} */ /* store */ .store-area{margin-bottom:4rem; display: flex; align-items: center; justify-content: space-between;} .store-area>*{width:50%;} .store-area>.store-map{padding:0 3rem; text-align: center; order:1;} .store-area>.store-map .thumb{display:inline-block; position: relative;} .store-area>.store-map .thumb .finding-map-link{width:76px; height:28px; background-color: #999; font-family:"Pretendard GOV"; font-weight: 600; font-size:14px; line-height:1; color: #fff; position: absolute; left:50%; top:50%; display: flex; align-items: center; justify-content: center; border-radius:99px;} .store-area>.store-map .thumb .finding-map-link:after{content: ""; width: 48px; height: 49px; margin-left:-24px; background: url('/images/sub/img_map_pin.png') no-repeat center top / cover; position:absolute; left: 50%; bottom:calc(100% + 9px); opacity: 0; display:none;} .store-area>.store-map .thumb .finding-map-link[data-val="10"]{margin:-55.4% 0 0 -16.2%;} /* 서울 */ .store-area>.store-map .thumb .finding-map-link[data-val="1"]{margin:-48.6% 0 0 -45.9%;} /* 인천 */ .store-area>.store-map .thumb .finding-map-link[data-val="2"]{margin:-62.7% 0 0 18.3%;} /* 강원 */ .store-area>.store-map .thumb .finding-map-link[data-val="9"]{margin:-39.7% 0 0 -8.6%;} /* 경기 */ .store-area>.store-map .thumb .finding-map-link[data-val="7"]{margin:22.9% 0 0 3.8%;} /* 경남 */ .store-area>.store-map .thumb .finding-map-link[data-val="4"]{margin:-15.7% 0 0 20.4%;} /* 경북 */ .store-area>.store-map .thumb .finding-map-link[data-val="6"]{margin:41.7% 0 0 -26.2%;} /* 전남 */ .store-area>.store-map .thumb .finding-map-link[data-val="5"]{margin:7.5% 0 0 -30.5%;} /* 전북 */ .store-area>.store-map .thumb .finding-map-link[data-val="8"]{margin:64.7% 0 0 -49.7%;} /* 제주 */ .store-area>.store-map .thumb .finding-map-link[data-val="3"]{margin:-19.2% 0 0 -34.3%;} /* 충남 */ .store-area>.store-map .thumb .finding-map-link[data-val="11"]{margin:-26.9% 0 0 -3.2%;} /* 충북 */ .store-area>.store-map .thumb .finding-map-link[data-val="16"]{margin:36.1% 0 0 26.8%;} /* 부산 */ .store-area>.store-map .thumb .finding-map-link[data-val="13"]{margin:5.1% 0 0 22.8%;} /* 대구 */ .store-area>.store-map .thumb .finding-map-link[data-val="14"]{margin:27.1% 0 0 -42.2%;} /* 광주 */ .store-area>.store-map .thumb .finding-map-link[data-val="12"]{margin:-11.9% 0 0 -9.2%;} /* 대전 */ .store-area>.store-map .thumb .finding-map-link[data-val="15"]{margin:22.1% 0 0 36.8%;} /* 울산 */ .store-area>.store-map .thumb .finding-map-link:is(:hover, .active){background-color: var(--point); z-index:2;} .store-area>.store-map .thumb .finding-map-link.active:after{height: 58px; opacity: 1;} .store-area>.store-inj{padding-right:3rem; order:2;} .store-area>.store-inj>dl{} .store-area>.store-inj>dl>dt{font-weight: bold; font-size:3.2rem; line-height:1; color:var(--point);} .store-area>.store-inj>dl>dd{margin-top:2rem; font-family:"Pretendard GOV"; font-weight: 500; font-size:2.1rem; line-height:1.2; color: #254737;} .store-area .store-inj-box{height:20.5rem; margin-top:2.5rem; padding:0 3rem; background-color: #f8fbfa; display: flex; align-items: center; justify-content: center; gap:2rem; border-radius:1rem;} .store-area .store-inj-box img{width:14rem; min-width:14rem;} .store-area .store-inj-box>dl{} .store-area .store-inj-box>dl>dt{font-family:"Pretendard GOV"; font-weight: bold; font-size:2.3rem; line-height:1; color:#1b1b1b;} .store-area .store-inj-box>dl>dd{margin-top:1rem; font-family:"Pretendard GOV"; font-weight: 500; font-size:1.8rem; line-height:1.4; color: #254737;} .store-area .store-inj-btn{margin-top:2.5rem; display: flex; justify-content: flex-end;} .store-area .store-inj-btn>a{font-weight: 700; font-size:1.6rem; line-height:1.2; color: #333; display: flex; align-items: center; gap:0.5rem;} .store-area .store-inj-btn>a img{height:0.8rem;} .store-table{width:100%; border-top:2px solid #666; overflow: hidden;} .store-table>table{width:100%; border-spacing:0;} .store-table>table th, .store-table>table td{height:7rem; padding:1.5rem 2rem; background-color: #fff; border-bottom:1px solid #ddd; font-size:1.6rem; line-height:1.6; color:#666; text-align:center; border-collapse:collapse; empty-cells:show; word-break:break-all;} .store-table>table th{background-color: #fdfdfe;} .store-table>table>thead>tr>th{font-weight: 700; font-size:1.7rem; color: #111;} .store-table>table .tit{font-weight: 700; color: #111;} .store-table>table .btn{width:9rem; height:3.7rem; margin:0 auto; background-color: #808080; border:1px solid #707070; font-weight: 700; font-size:1.5rem; line-height:1.2; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:0.5rem;} .store-online-top{height:32rem; background: url('/images/sub/bg_store.jpg') no-repeat center center / cover; display: flex; align-items: center; justify-content: center;} .store-online-top>dl{width:100%; padding-left:10%;color: #fff;} .store-online-top>dl>dt{font-size:3.4rem; line-height:5.2rem;} .store-online-top>dl>dd{margin-top:3rem; font-size:2.2rem; line-height:1;} .store-online-btm{margin-top:5.5rem;} .store-online-btm .text{font-size:2.1rem; line-height:3.8rem; color: #333;} .store-online-btm .text>strong{font-weight: 700; color: var(--point);} /* etc */ .etc_clause{width:90%; margin:0 auto; font-size:0; line-height:0; text-align: center; box-sizing:border-box; position: relative; overflow: visible !important;} .etc_clause:before, .etc_clause:after{content:"";position:absolute;top:2%;bottom:0;left:10px;right:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-border-radius:100px / 10px; border-radius:0 7rem 0 7rem;} .etc_clause:after{right:10px;left:auto;-webkit-transform:skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg);-ms-transform:skew(8deg) rotate(3deg);-o-transform:skew(8deg) rotate(3deg);transform:skew(8deg) rotate(3deg);} .etc_clause .etc_clause_in{padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; border-radius:0 7rem 0 7rem; position: relative; z-index:2;} .etc_clause .logo{margin:0;} .etc_clause .logo img{} .etc_clause .txt{padding:30px 0 55px; font-weight: 300; font-size:2rem; line-height:1; color: #666;} .etc_clause .txt>span{font-weight: 500; color: #000;} .clause-style{} .clause-style .logo img{height:6rem;} .clause-style .scroll{max-height:30rem; font-size:1.8rem; line-height:1.45; color: #666; overflow: hidden; overflow-y: auto;} .clause-style .scroll{text-align: left;} .clause-style .scroll>p{margin:4rem 0 1rem;} .clause-style .scroll>p:first-child{margin-top:0rem;} .clause-style .scroll>p>strong{font-weight: 700; font-size:1.2em; color: #000; display:inline-block;} .clause-style .scroll *+p>strong{} .clause-style .scroll ol{margin-top:1rem;} .clause-style .scroll ol>li{padding-left:2rem; text-indent: -2rem;} .clause-style .scroll ol>li>ol{margin-top:0rem;} .clause-style .scroll ol ul, .clause-style .scroll ol ol{margin:0.3rem 0 1rem;} .clause-style .scroll ul>li{padding-left:1.2rem; text-indent: -1.2rem;} .clause-style .scroll .kr>li{padding-left:2.2rem; text-indent: -2.2rem;} .clause-style .scroll .kr>li>strong{font-weight: 600; color:#333;} .clause-style .scroll .kr.mt>li+li{margin-top:2rem;} .clause-style .scroll .num>li{padding-left:1.8rem; text-indent: -1.8rem;} .etc_select{width:90%; margin:0 auto 2rem; text-align: right;} .etc_select select.base{width:auto;} /* search */ .search-area{} .search-area .search-result{font-weight: bold; font-size:2.6rem; line-height:1.2; color: #111; text-align: center;} .search-area .search-result>strong{color: #cc0000;} .search-area .search-re{margin-top:5rem; border-top:2px solid #111;} .search-area .search-re+.search-re{margin-top:10rem;} .search-area .search-re .search-re-tit{padding:3rem 0 0 3rem; display: flex; align-items: center; gap:1rem;} .search-area .search-re .search-re-tit strong{font-weight: 600; font-size:3rem; line-height:1; color: #111;} .search-area .search-re .search-re-tit span{height:3rem; padding:0 1.5rem; background-color:var(--point); font-weight: 600; font-size:1.8rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:99px;} .search-area .search-re-list{} .search-area .search-re-list>li{border-bottom:1px solid #ddd;} .search-area .search-link{padding:2.5rem 3rem; display:block;} .search-area .search-link .tit{font-weight: bold; font-size:2.2rem; line-height:1.3; color: #000;} .search-area .search-link .tit>strong{color: #cc0000;} .search-area .search-link .txt{margin-top:1rem; font-weight: 500; font-size:1.6rem; line-height:1.4; color: var(--point);} .search-area .search-re .search-more{margin-top:6rem; display: flex; justify-content: center;} .search-area .search-re .search-more>a{height:4.1rem; padding:0 2.7rem; border:1px solid #666; font-weight: bold; font-size:1.8rem; line-height:1; color: #555; display: flex; align-items: center; justify-content: center; border-radius:0.5rem;} .search-area .result-group{margin-top:5rem; border-top:2px solid #111;} .search-area .result-group dl{border-bottom:1px solid #ddd; display: flex; align-items: center;} .search-area .result-group dl dt{width:15rem; height:15rem; margin-right:2rem; border:1px solid #ddd; overflow:hidden; position:relative;} .search-area .result-group dl dt img{max-width:100%;position:absolute;width:auto; height:auto;margin:auto;top:0; bottom:0; left:0; right:0;} .search-area .result-group dl dd{width:calc(100% - 17rem);} .search-area .result-group dl dd div {} .search-area .result-group dl dd div.title{display: flex; align-items: center; gap:0 1rem;} .search-area .result-group dl dd div.title a{font-weight: bold; font-size:2.2rem; line-height:1.3; color: #000;} .search-area .result-group dl dd div.title a>h2 {} .search-area .result-group dl dd div.title a[target="_blank"]{height:3rem; padding:0 1.5rem; background-color:var(--point); font-weight: 400; font-size:1.6rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:99px;} .search-area .result-group dl dd div.cont{max-height: 4.8rem; margin-top:1rem; font-weight: 400; font-size:1.8rem; line-height:2.4rem; color: #999; display: -webkit-box; text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow:hidden;} /* .search-area .result-group dl dd div.cont{ max-height: 72px; display: -webkit-box; text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow:hidden;} .search-area .result-group dl dd div.date {color:#999;} */ .search-area .result-group dl dd div.navi, .result-group dl dd div.navi a {margin-top:1.5rem; font-weight: 500; font-size:1.6rem; line-height:1.4; color: var(--point);} .result-group .more {text-align:right;} .result-group .more a {font-size:13px; color:#7d7d7d; text-decoration:underline;} /*[e] Sub Style */ /*[s] Plugin Style */ .fancybox__slide{padding:40px 6rem !important;} .layer-base.fancybox__content>.carousel__button.is-close{width:4rem; height:4rem; background-color: var(--point2); top:0rem !important; right:0rem; border-radius:0 1rem 0 1rem; overflow: hidden;} .layer-base.fancybox__content>.carousel__button.is-close svg{width:50%; height:50%; stroke-width:2; filter:none; color: #fff;} .layer-base.fancybox__content>.carousel__button.is-back{width:3.6rem; height:3.6rem; position: absolute; left:0; top:0; display:none;} .layer-base.fancybox__content>.carousel__button.is-back img{display:block;} .layer-base{padding:0 !important; background-color: transparent !important; font-size:0; line-height:0; display:none;} .layer-base .layer-in{} .layer-base h2{padding-bottom:2rem; border-bottom:2px solid #555; font-weight: bold; font-size:3.5rem; line-height:1.3; color: #000;} .layer-base h2>strong{font-weight: bold;} .layer-base *+h2{margin-top:7.5rem;} .layer-base .etc_clause{width:100%;} .layer-base .etc_clause .etc_clause_in {border-radius: 1rem;} #priPop-lay{max-width:102.4rem;} .lay-doctor{width:100%; max-width:128rem;} .lay-doctor .layer-in{padding:0; background-color: #fff; border-radius:1rem; overflow: hidden;} .lay-doctor .lay-doctor-top{padding:7rem 6rem 0; background-color: #f4f6f8; border-radius:1rem; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: space-between; gap:0 5%;} .lay-doctor .lay-doctor-top>figure{width:42%; max-width:42rem; display: flex; align-items:end; justify-content: center;} .lay-doctor .lay-doctor-top .info-conts{width:53%; padding-bottom:7rem;} .lay-doctor .lay-doctor-top .info-conts .name{display: flex; flex-flow: row wrap; align-items: end; gap:1rem 2rem;} .lay-doctor .lay-doctor-top .info-conts .name>dt{font-weight: 800; font-size:5rem; line-height:6rem; color: #000;} .lay-doctor .lay-doctor-top .info-conts .name>dd{font-weight: 600; font-size:2.2rem; line-height:3.2rem; color: #222;} html[lang="en"] .lay-doctor .lay-doctor-top .info-conts .name>dd{width:100%;} .lay-doctor .lay-doctor-top .info-conts .department{margin-top:3.5rem; padding-top:5rem; border-top:2px solid #000; display: flex; flex-flow: column nowrap; gap:1.5rem;} .lay-doctor .lay-doctor-top .info-conts .department>dt{font-weight: bold; font-size:2.5rem; line-height:3.5rem; color: var(--point2);} .lay-doctor .lay-doctor-top .info-conts .department>dd{display: flex; flex-flow: row wrap; gap:1rem;} .lay-doctor .lay-doctor-top .info-conts .department>dd>p{height:4.2rem; padding:0 2rem; background-color: #e6ecf0; font-weight: 500; font-size:1.8rem; line-height:1; color: var(--point2); white-space: nowrap; display: flex; align-items: center; justify-content: center; border-radius:99px;} .reservation-btn{display: flex; flex-flow: row wrap; gap:1rem;} .reservation-btn>a{min-width:18rem; height:5.5rem; padding:0 3rem; background-color: var(--point2); font-weight: 500; font-size:1.8rem; line-height:1; color: #fff; white-space: nowrap; display: flex; align-items: center; gap:1rem; border-radius:1rem;} .reservation-btn>a figure img{width:2.2rem;} .reservation-btn>a.naver{background-color: #00c13a;} .reservation-btn.end{justify-content: end;} .lay-doctor .lay-doctor-top .info-conts .reservation-btn{margin-top:6rem;} .lay-doctor .lay-doctor-conts{padding:7.5rem 6rem;} /*[e] Plugin Style */ @media only screen and (max-width : 1720px){ /*[s] Main Style */ #mainVisual .vTxtArea, #mainVisual .swiper-pagination{margin-left:0; left:0;} /*[e] Main Style */ } @media only screen and (max-width : 1580px){ #mainInfo .mainInfo-re .mainInfo-in>.cont-box+figure{right:3%;} } @media only screen and (max-width : 1440px){ /*[s] Main Style */ #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide{width:72rem; min-width:72rem;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:before{opacity: 1;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide .out-box{display:none;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide .over-box{display:flex;} #mainReservation .mainReservation-left{width:calc(60% + 3rem);} #mainReservation .mainReservation-right{padding-left:6rem;} html[lang="ko"] #mainInfo>.inConts{flex-wrap: wrap; gap:4rem 0;} html[lang="ko"] #mainInfo .mainInfo-re{width:calc(100% / 2);} html[lang="ko"] #mainInfo .mainInfo-re:first-child{width:100%; padding-bottom:4rem; border-bottom:1px solid #ddd;} html[lang="ko"] #mainInfo .mainInfo-re:nth-child(2){border-left:none;} html[lang="ko"] #mainInfo .mainInfo-re .time{margin-top:1.5rem; padding-right:9rem; flex-flow: row wrap; gap:1rem 3rem;} html[lang="ko"] #mainInfo .mainInfo-re .mainInfo-in>.cont-box+figure{right:0; bottom:0rem;} /*[e] Main Style */ } @media only screen and (max-width : 1320px){ .cause-swiper .swiper-wrapper .swiper-slide{width:48rem; min-width:48rem;} .cause-swiper .swiper-wrapper .swiper-slide:before{opacity: 0;} .cause-swiper .swiper-wrapper .swiper-slide .out-box{display:none;} .cause-swiper .swiper-wrapper .swiper-slide .over-box{display:flex;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide{width:72rem; min-width:72rem;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide:before{opacity: 1;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide .out-box{display:none;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide .over-box{display:flex;} } @media only screen and (max-width : 1280px){ html[lang="en"] .sticky-table:not(.document){padding-bottom:2rem; overflow-x:auto; -webkit-overflow-scrolling:touch; /*touch-action: pan-x;*/} html[lang="en"] .sticky-table:not(.document)>table{min-width:1024px;} /*[s] Main Style */ #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:first-child{border-left:none;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide:last-child{border-right:none;} #mainReservation .mainReservation-right{padding-left:0;} /*[e] Main Style */ /*[s] Sub Style */ .visual-radius{width:calc(100% + 4rem); margin:0 -2rem; border-radius:0;} .treatment-method{gap:4rem;} .treatment-method>li{width:calc((100% - 4rem) / 2);} .necessity-need{gap:2rem;} .necessity-need>li{width:calc((100% - 4rem) / 3);} .doctor-list{gap:3rem;} .doctor-list>li{width:calc((100% - 3rem) / 2);} .doctor-list>li figure{width:16rem;} .document-issue-btn{gap:2rem;} .document-issue-btn>a{width:calc((100% - 2rem) / 2);} .document-issue-btn>a dl{padding:0 3rem;} .document-down-btn{gap:1rem;} .document-down-btn>a{width:calc((100% - 2rem) / 3.1);} .document-down-btn>a:last-child{width:calc((100% - 2rem) / 2.9);} /*[e] Sub Style */ /*[s] Layer Style */ /*[e] Layer Style */ } @media only screen and (max-width : 1024px){ /*[s] All Style */ .scroll_info{display:block;} .scrollTb{width:100%; padding-bottom:2rem; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb img{max-width:none;} .scrollTb>*{width:1024px !important;} .layout-PT{} .layout-PT .layout-PT_photo{width:100%;} .layout-PT .layout-PT_conts{flex:auto; width:100%;} .layout-PT.reverse .layout-PT_photo{order:1;} .layout-PT.reverse .layout-PT_conts{order:2;} .sticky-table:not(.document){padding-bottom:2rem; overflow-x:auto; -webkit-overflow-scrolling:touch; /*touch-action: pan-x;*/} .sticky-table:not(.document)>table{min-width:1024px;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{position: absolute; left:2rem !important; top:2rem !important;} .hd_pops_con{width:auto !important;} /*[e] Main Popup Style */ /*[s] Main Style */ #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide {} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide :before{display:none;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide :after{width: 100%; left:0;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img{display:none;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure img.ov{display:block;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide span{font-weight: 600; font-size:2.2rem; color: #000;} #mainReservation>.inConts{flex-wrap: wrap; overflow: visible; gap:8rem 0;} #mainReservation .mainReservation-left{width:100%; padding:0 0 0 0; text-align: left; overflow: visible;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide{flex:auto; flex-shrink: 0; width:16rem;} #mainReservation .mainReservation-right{width:100%; justify-content: center;} #mainLocation>.inConts{flex-wrap: wrap; gap:4.5rem 0; overflow: visible;} #mainLocation .mainLocation-left{width:100%;} #mainLocation .link{width:100%; max-width:none;display: flex; flex-flow: row nowrap; gap:1rem;} #mainLocation .link>a{max-width:27rem;} #mainLocation .mainLocation-right{flex:auto; width:calc(100% + 4rem); margin:0 -2rem; height:auto; aspect-ratio:16/9; border-radius:0;} #mainPartner{} #mainPartner>.inConts{height:auto; padding-bottom:15rem; align-items: start; flex-wrap: wrap; align-content: flex-start;} #mainPartner .mainPartner-left{width:100%; padding-top:3.3rem;} #mainPartner .mainPartner-right{width:100%; overflow: visible; position: static;} #mainPartner .partner-swiper-controll{right:2rem; top:1rem;} #mainPartner .partner-swiper{padding:5rem 0 0 0; } html[lang="en"] #mainPartner .mainPartner-left, html[lang="en"] #mainPartner .mainPartner-right{width:100%;} html[lang="en"] #mainInfo{padding:10rem 0; } html[lang="en"] #mainInfo>.inConts{gap:5rem 0;} html[lang="en"] #mainInfo .mainInfo-re{width:100% !important; padding:0 !important; border:none !important;} html[lang="en"] #mainInfo .mainInfo-re .mainInfo-in{width:100% !important;} /*[e] Main Style */ /*[s] Sub Style */ .cause-list:not(.white){gap:2rem;} .cause-list:not(.white)>li{flex:1 1 calc((100% - 2rem) / 2); min-height:auto; padding:4rem 2rem 4rem 0; display: flex; align-items: center;} .cause-list:not(.white)>li:before{display:none;} .cause-list:not(.white)>li figure{height:auto; width:14rem; align-items: center;} .cause-list:not(.white)>li dl{margin-top:0; flex:1; text-align: left;} .cause-list:not(.white)>li dl>dt{} .cause-list:not(.white)>li dl>dt:before{display:inline-block;} .cause-list:not(.white)>li dl>dd{margin-top:0.5rem;} .cause-list.white{gap:4rem 0 !important;} .cause-list.white>li{width:calc(100% / 2) !important; padding:0;} html[lang="en"] .cause-list.white>li{padding:0 1.5rem;} .cause-list:not(.white).six-two{gap:2rem;} .cause-list-step{gap:5rem 2rem; justify-content: center;} .cause-list-step>li{width:calc((100% - 4rem) / 3);} .cause-list-step>li:nth-of-type(3) figure:before{display:none;} .cause-list-step.four>li{width:calc((100% - 2rem) / 2);} .cause-list-step.four>li:nth-of-type(2) figure:before{display:none;} .cause-list-step.four>li:nth-of-type(3) figure:before{display:block;} .treatment-method{gap:5rem;} .treatment-method>li{width:100%;} .necessity-need{gap:5rem 3rem !important;} .necessity-need>li{width:100%;} .necessity-need>li .txt{margin-top:1.5rem;} .necessity-need>li{width:calc((100% - 3rem) / 2) !important;} .purpose-list{gap:2rem;} .purpose-list>li{flex:1 1 calc((100% - 2rem) / 2); min-height:auto; padding:4rem 2rem 4rem 0; display: flex; align-items: center;} .purpose-list>li figure{height:auto; width:14rem;} .purpose-list>li .txt{text-align: left;} .box-num{padding:4rem 3rem; flex-wrap: wrap; justify-content: start; gap:3rem 0;} .box-num>li{flex:1 1 100%; padding:0 0; justify-content: start;} .box-num>li:before{} .box-num>li+li{padding-top:3rem; border-top:1px solid #e6e6e6; border-left:none;} .classification-list{gap:2rem;} .classification-list>li{flex:1 1 calc((100% - 2rem) / 2);} .classification-list>li br{display:none;} .how-step{flex-wrap: wrap;} .how-step>li{flex:1 1 100%;} .progress_step{gap:5rem;} .progress_step>li{width:calc((100% - 10rem) / 3);} .progress_step>li+li:before{width:5rem; left: -5rem;} .intro-hash>dl.br{gap:1rem;} .intro-hash>dl.br>dd{display:none;} .history-flex{height:auto;} .history-flex .history-year{display:none;} .history-flex .history-textarea{width:100%; padding-bottom:0; position: relative;} .history-flex .history-textarea:before, .history-flex .history-textarea .line{display:none;} .history-flex .history-text .hide-year{display:block;} .history-flex .history-text+.history-text{margin-top:8rem;} .history-flex .history-text dl{opacity:1;} .doctor-list>li{width:100%;} .doctor-list>li figure{width:18rem;} .bigSwiper .swiper-button{display:none;} .bigSwiper .tour-text{position: static;} .location-layout{} .location-layout>.left{display:none;} .location-layout>.right{margin-top:-6rem; max-width:100%;} .timetable-area .timetable-re{padding-left:0; gap:2rem 4rem;} .timetable-area .timetable-re>figure{width:28rem; position: relative;} .timetable-area .timetable-re .timetable-two{width:calc(100% - 32rem); display: flex; flex-flow: column nowrap; justify-content:center;} .timetable-area .timetable-re .timetable-two .reservation-btn{margin-top:3rem; justify-content: start;} .timetable-info>div{width:calc(100% / 3.5);} .timetable-info .time{width:calc(100% / 2.5)} .document-down-btn>a{width:calc((100% - 2rem) / 3); min-height:20rem; flex-flow: column wrap; text-align: center; gap:1rem;} .document-down-btn>a dl{height:5.6rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;} .document-down-btn>a:last-child{width:calc((100% - 2rem) / 3);} /* store */ .store-area{display: block;} .store-area>*{width:100%;} .store-area>.store-inj{padding:0 0 7rem 0 ;} .store-table{} .store-table>table{} .store-table>table, .store-table>table tbody, .store-table>table tr, .store-table>table td, .store-table>table th{height:auto; padding:0; background-color: #fff; border:none; display:block;} .store-table>table>thead{display:none;} .store-table>table tr{padding:3rem 0; border-bottom:1px solid #ddd;} .store-table>table th, .store-table>table td{margin-bottom:1rem; text-align: left; position: relative; display: flex; align-items: center; justify-content: flex-start;} .store-table>table .bo_tit{justify-content: flex-start;} .store-table>table th:before, .store-table>table td:before{width:14rem; min-width:14rem; content: attr(data-title); padding-right:2rem; font-weight: 700; color: #222; text-align: justify;} .store-table>table th:after, .store-table>table td:after{content:""; width:1px; height:1.6rem; background-color: #ccc; font-size:0; position: absolute; left:11.5rem; top:50%; transform: translateY(-50%);} .store-table>table .btn{margin:0;} /* search */ .search-area .result-group dl dd div.title a[target="_blank"]{display:none;} /*[e] Sub Style */ /*[s] Plugin Style */ .fancybox__slide{padding:40px 2rem 8px !important;} #find-expert-lay .list{gap:4rem 2rem;} #find-expert-lay .list>li{width:calc((100% - 4rem) / 3);} #success-detail-lay .find-expert-view .success-detail-view h3{font-size:2.2rem;} #success-detail-lay .find-expert-view .success-detail-view h5{font-size:1.7rem;} /*.lay-doctor .lay-doctor-top>figure{width:30rem; height:30rem; margin:0 auto; padding-top:5rem; border-radius:999px; overflow: hidden; align-items:start; box-shadow:1rem 1rem 2rem rgba(0,0,0,0.2);}*/ .lay-doctor .lay-doctor-top>figure{width:100%; max-width:none; justify-content: end; margin-bottom: -9.5rem;} .lay-doctor .lay-doctor-top>figure img{width:25rem;} .lay-doctor .lay-doctor-top .info-conts{width:100%; padding-bottom:7rem;} /*[e] Plugin Style */ } @media only screen and (max-width : 840px){ /*[s] All Style */ .wideFrame{height: 0; padding-bottom: 56.25%;} .nTxt-area{font-size:2.4rem; line-height:3.6rem;} .nTxt-area .title{font-size:2.8rem; line-height:4rem;} h4{font-size:3.2rem;} ._star>li{padding-left:1.7rem;} ul.bul->li{padding-left:1.7rem; font-size:2.4rem; line-height:3.4rem;} .nTable>table th, .nTable>table td{font-size:2.2rem;} .nTable.rnd>table th, .nTable.rnd>table td{font-size:2.4rem;} .nTable.rnd>table td{padding:2rem 3rem;} .depth-three{gap:1rem;} .depth-three>a{max-width:none; height:8rem; font-size:2.4rem;} .depth-three.four{flex-wrap: wrap; } .depth-three.four>a{width:calc((100% - 1rem) / 2); max-width:none; height:8rem; font-size:2.4rem;} .bul-check>li:before{top:0.2rem;} .bul-check2>li{padding-left:2.7rem;} .bul-check2>li:before{width:1.8rem; height:1.3rem;} .bul-check2>li+li{margin-top:1rem;} .check-list.two>li{flex:1 1 100%;} .num-box{margin-top:1rem; counter-reset:item;} .location-layout>.right>li>p, .num-box>li, .num-box.title>li{padding-left:5rem;} .num-box>li:before, .location-layout>.right>li>p:before, .box-num>li:before{width:4rem; min-width:4rem; height:3.1rem; font-size:2.2rem; top:3.1rem;} .box-num>li:before{margin-top:0.2rem;} .num-box.title>li:before{top:0.2rem;} .caution{padding:3rem 2rem; justify-content: center; text-align: center;} .caution>dt{width:20.4rem; height:auto; border-right:none;} .caution>dt figure img{width:2.8rem;} .caution>dd{flex:auto; width:100%; padding:1rem 0 0 0rem;} .caution.full{padding:2.5rem;} .caution.full>dt{} .caution.full>dd{text-align: left;} .sticky-table:not(.document)>table{min-width:840px;} .sticky-table>table th, .sticky-table>table td{padding:2rem 1.5rem; font-size:2.6rem; line-height:3.6rem;} .sticky-table p.state{width:10rem; height:4.5rem; font-size:2.2rem;} .sticky-table.document>table{} .sticky-table.document>table tr>*:nth-of-type(1){width:35rem;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{left:2rem !important; right:2rem !important;} .hd_pops_con{} #popLayer{} #popLayer #moPopArea{} #popLayer #moPopArea .moPop{max-width:90%;} #popLayer #moPopArea #moPopRoll{} #popLayer .slider{} #popLayer .slider img{} /* #popLayer .slider#HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider#HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} */ #popLayer .layerPopClose{width:4rem; height:4rem; right:2rem; top:2rem;} #popLayer .layerPopClose:before{margin:-1px 0 0 -2rem;} #popLayer .layerPopClose:after{margin:-2rem 0 0 -1px;} #popLayer .moPopClose{} #popLayer .moPopClose>*{height:8rem; font-size:2rem;} /* #popLayer .moPopClose button{font-size:1.8rem; line-height:2.4rem;} #popLayer .moPopClose button:before{width: 2.4rem; height: 2.4rem; font-size:1.8rem; line-height:2.6rem;} #popLayer .moPopClose button.toDay_close{padding-left:3.2rem;} #popLayer .moPopClose button.close{padding-right:3.2rem} */ #popLayer .slick-dots{bottom:10rem;} #popLayer .slick-dots>li{} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.8rem; height:1.8rem;} #popLayer .slick-dots>li.slick-active button{} /*[e] Main Popup Style */ /*[s] Main Style */ .mGroup{padding:2rem 0;} .mGroup:before{font-size:30rem; letter-spacing: 12px !important; transform: translateX(-49.5%);} .mGroup>p{font-size:2.4rem;} .mGroup>h2{font-size:5.5rem;} .mGroup>p+h2{margin-top:1.5rem;} .mGroup>div{font-size:2.8rem; line-height:1.3;} #mainVisual{} #mainVisual .visualRoll .swiper-slide{} #mainVisual .visualRoll .swiper-slide>img{height:106rem;} #mainVisual .vTxtArea, #mainVisual .vTxt .ii{text-align: left;} #mainVisual .vTxt .ii.cate{font-size:2.4rem;} #mainVisual .vTxt .ii.title{margin-top:2rem; font-size:7rem;} #mainVisual .vTxt .ii.text{margin-top:2.5rem;} #mainVisual .vTxt .ii.btn{margin-top:4rem; justify-content: start;} #mainVisual .vTxt .ii.btn>a{width:24rem; height:7rem; font-size:2.4rem;} #mainVisual .swiper-pagination{bottom:7rem; z-index:7;} #mainVisual .swiper-pagination-bullet{width:2rem; height:2rem; margin:0 1rem;} #mainVisual .swiper-pagination-bullet.swiper-pagination-bullet-active{width:6.8rem;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide{min-width:calc(640px / 5); height:calc(18rem + 1px); padding-top:2.5rem; } #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide figure{height:8.8rem;} #mainQlink .mainQlink-swiper .swiper-wrapper .swiper-slide span{font-size:2.4rem;} #mainCenter .mainCenter-swiper .swiper-wrapper .swiper-slide{width:50rem; min-width:50rem; height:60rem;} #mainCenter .over-in{max-width:46rem;} #mainCenter .over-box .mGroup{margin-bottom:4.5rem; padding:0; text-align: left;} #mainCenter .over-box .mGroup>p{font-size:2.2rem;} #mainCenter .over-box .mGroup>h2{font-size:4.5rem;} #mainCenter .over-box .mGroup>div{font-size:2.8rem;} #mainCenter .over-box .link-box{} #mainCenter .over-box .link-box>a{font-size:2.4rem;} #mainCenter .over-box .link-box>a:before{width: 14px; height: 100%;} html[lang="en"] #mainCenter .over-box .mGroup>h2{font-size:4rem;} html[lang="en"] #mainCenter .over-box .mGroup>div{font-size:2.4rem;} html[lang="en"] #mainCenter .over-box .link-box>a{font-size:2.2rem;} #mainPromise{} html[lang="en"] #mainPromise .promise-circle .promise-circle-slick .slick-slide{} html[lang="en"] #mainPromise .promise-circle .promise-circle-slick .slick-slide dl{font-size:2.4rem; line-height:3.4rem;} html[lang="en"] #mainPromise .promise-circle .promise-circle-slick .slick-slide.slick-center dl{font-size:3.2rem; line-height:4.2rem;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide{width:46rem;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .text-box{min-height:25.5rem; padding:3.5rem 2rem;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .cate{font-size:2.4rem;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .title{min-height:7.6rem; font-size:2.8rem; line-height:3.8rem;} #mainNews .main-news-swiper .swiper-wrapper .swiper-slide .data{font-size:2.4rem;} #mainNews .main-news-swiper .more{width:22rem; height:8rem; margin:6rem auto 0; background-color: var(--point2); font-size:2.4rem; line-height:1; color: #fff; position: static; border-radius:2.5rem; display: flex; align-items: center; justify-content: center; gap:1rem;} #mainNews .main-news-swiper .more>span{font-size:1.8rem; color: #fff !important;} #mainReservation>.inConts{background-position: 2rem top; background-size:560px;} #mainReservation .mGroup{} #mainReservation .mGroup>p{font-size:2.4rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide{width:18rem; height:14rem; padding-top:1.3rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide figure{height:7.4rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide img[src*="icon_naver"]{width:3.8rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide img[src*="icon_blog"]{width:4.8rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide img[src*="icon_customer"]{width:4.2rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide img[src*="icon_youtube"]{width:4.7rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide img[src*="icon_review"]{width:3.4rem;} #mainReservation .quick-link-swiper .swiper-wrapper .swiper-slide strong{font-size:2.4rem;} .phone-form{width:calc(100% - 8rem); padding:4.8rem 4.5rem 15rem; border-width:2.5rem;} .phone-form:before{content: ""; width: 0.4rem; height: 24.2rem; background:url('/images/main/bg_simple_form_left.png') no-repeat center center/cover; position:absolute; left: -2.9rem; top:11.8rem;} .phone-form:after{content: ""; width: 0.4rem; height: 11rem; background:url('/images/main/bg_simple_form_right.png') no-repeat center center/cover; position:absolute; right:-2.9rem; top:25rem;} .phone-form .logo{padding-bottom:2.5rem; display: flex; justify-content: center;} .phone-form .logo img{height:7.2rem;} .phone-form .text-box{padding-bottom:2.5rem; font-size:2.4rem;} .phone-form .phone-fild-re .placeholder{font-size:2.4rem;} .phone-form input[type=button], .phone-form input[type=text], .phone-form input[type=password], .phone-form input[type=file], .phone-form input[type=submit], .phone-form select, .phone-form textarea{height:7.2rem; font-size:2.4rem;} .phone-form textarea{height:16rem;} .phone-form .phone-fild-check{} .phone-form .phone-fild-check>a{width:14rem; height:4rem; font-size:2.2rem;} .phone-form .check-new input[type=checkbox]+label, .phone-form .check-new input[type=radio]+label{font-size:2.2rem; line-height:2.2rem;} .phone-form .check-new input[type=checkbox]+label>.graphic, .phone-form .check-new input[type=checkbox]+label>.graphic:before{width: 2.2rem; height: 2.2rem;} .phone-form .m-btn{height:9rem; font-size:3rem;} #mainLocation>.inConts{} #mainLocation .link>a{height:8rem; max-width:28rem; font-size:2.4rem;} #mainLocation .link>a img{width:auto; height:6.5rem;} #mainLocation .link>a strong>span{display:none;} #mainLocation .mainLocation-right{aspect-ratio:1/1;} #mainPartner{} #mainPartner>.inConts{background-size: contain;} #mainPartner .mGroup>h2 img{width:3.3rem;} #mainPartner .partner-swiper-controll{width:14.5rem;} #mainPartner .partner-swiper-controll img{width:6rem;} #mainPartner .partner-swiper-controll span{height:1.6rem;} #mainPartner .partner-swiper .swiper-wrapper .swiper-slide{margin-right:1rem;} #mainPartner .partner-swiper .swiper-wrapper .swiper-slide:last-child{margin-right:0;} #mainInfo{padding:10rem 0; } #mainInfo>.inConts{gap:5rem 0;} #mainInfo .mainInfo-re{width:100% !important; padding:0 !important; border:none !important;} #mainInfo .mainInfo-re .mainInfo-in{width:100% !important;} #mainInfo .mainInfo-re .mainInfo-in>figure{width:10rem;} #mainInfo .mainInfo-re .mainInfo-in>figure img[src*="icon_time"]{width:6.1rem;} #mainInfo .mainInfo-re .mainInfo-in>figure img[src*="icon_time2"]{width:7.1rem;} #mainInfo .mainInfo-re .mainInfo-in>figure img[src*="icon_tel"]{width:5.8rem;} #mainInfo .mainInfo-re .mainInfo-in>figure img[src*="icon_hospital"]{width:6.2rem;} #mainInfo .mainInfo-re .title{font-size:3rem;} #mainInfo .mainInfo-re .title>strong{padding-bottom:1rem; font-size:2.6rem;} #mainInfo .mainInfo-re .time{display: flex; flex-flow: column nowrap; gap:1rem 0;} #mainInfo .mainInfo-re .time>dl{font-size:2.2rem; gap:0 2.5rem;} #mainInfo .mainInfo-re .time>dl>dt{width:9rem;} #mainInfo .mainInfo-re .mainInfo-in>.cont-box+figure{width:auto; right:12%; bottom:0.6rem;} #mainInfo .mainInfo-re .tel>dt{font-size:4.5rem;} #mainInfo .mainInfo-re .tel>dd{font-size:2.4rem;} #mainInfo .mainInfo-re .text{font-size:2.4rem; line-height:3.4rem;} html[lang="en"] #mainInfo .mainInfo-re .time>dl>dt{width:12.5rem;} html[lang="en"] #mainInfo .mainInfo-re .mainInfo-in>figure img[src*="icon_time2_en"]{width:9.5rem;} /*[e] Main Style */ /*[s] Sub Style */ .bul-check>li, .bul-check2>li, .num-box>li, .box-num>li, .obul>li, .caution, .shGoup .text, .shGoup :where(.box, .classification-list)+.text, .shGoup.small .text, .cause-list>li:before, .cause-list>li dl>dt, .cause-list>li dl>dt:before, .cause-list>li dl>dd, .cause-list-step>li:before, .cause-list-step>li dl>dt, .cause-list-step>li dl>dt:before, .cause-list-step>li dl>dd, .treatment-method>li dl>dd, .necessity-need>li .txt, .necessity-need>li .title, .necessity-need>li .text, .purpose-list>li .txt, .cause-swiper .over-box .mGroup>p, .cause-swiper .over-box .mGroup>div, .before-after-box>div:before, .classification-list>li dl>dt, .classification-list>li dl>dd, .check-list>li, .layout-PT .layout-PT_conts, ._bul>li, .treatment-method>li ._bul>li, .progress_step>li dl>dt, .progress_step>li dl>dd, .about-intro .cate, .about-intro .text, .intro-hash>dl>dd, .history-flex .history-text dl, .lay-doctor .lay-doctor-top .info-conts .name>dd, .lay-doctor .lay-doctor-top .info-conts .department>dt, .location-layout>.right>li>p, .location-layout .car-navi, .timetable-area .timetable-re>figure p, .timetable-info figure+dl>dt, .admission-info>li .text, .document-issue-btn>a dl, .document-down-btn>a dl>dt{font-size:2.6rem !important; line-height:3.6rem !important;} .progress_step>li p:before, .timetable-info .time>dl, .admission-info>li .txt, .document-down-btn>a dl dd{font-size:2.4rem; line-height:3.4rem;} .necessity-need>li{width:100% !important;} .cause-list:not(.white){} .cause-list:not(.white)>li{flex:1 1 100%;} .cause-list:not(.white)>li figure{width:17.5rem;} .cause-list.white{width:calc(100% + 4rem); margin:0 -2rem;} .cause-list.white>li figure{height:19rem;} .cause-list-step{justify-content: start;} .cause-list-step>li{width:calc((100% - 2rem) / 2);} .cause-list-step>li figure img{max-width:22rem;} .cause-list-step>li:nth-of-type(2) figure:before, .cause-list-step>li:nth-of-type(4) figure:before{display:none;} .cause-list-step>li:nth-of-type(3) figure:before{display:block;} .treatment-method>li dl>dt span[data-font="Play"]{font-size:2.4rem;} ol.treatment-method{} ol.treatment-method>li{} ol.treatment-method>li figure{} ol.treatment-method>li figure:before{} ol.treatment-method>li dl{padding:3.5rem 2rem 5.5rem;} .purpose-list{} .purpose-list>li{flex:1 1 100%;} .purpose-list>li figure{width:17.5rem;} .before-after-box{flex-wrap: wrap;} .before-after-box>div{flex:auto; width:100%;} .classification-list>li{flex:1 1 100%;} .progress_step{gap:1rem;} .progress_step>li{width:100%;} .progress_step>li+li:before{display:none;} /* 관절센터 > 무릎 > 십자인대 재건술 */ .visual-radius.acl img{width:100%; height:34rem; object-fit: cover;} /* 관절센터 > 무릎 > 연골판 봉합 및 절제술 */ .visual-radius.meniscus img{width:100%; height:48rem; object-fit: cover; object-position: 54% center;} /* 관절센터 > 무릎 > 근위경골절골술 */ .visual-radius.hto img{width:100%; height:35rem; object-fit: cover; object-position: 37% center;} /* 관절센터 > 무릎 > 인공관절 수술 */ .visual-radius.tka img{width:100%; height:46rem; object-fit: cover; object-position: center center;} .visual-radius.tka2 img{width:100%; height:43rem; object-fit: cover; object-position: 67% center;} html[lang="en"] .visual-radius.tka2 img{object-position: 84% center;} /* 관절센터 > 어깨 > 회전근개 봉합 */ .visual-radius.rc-repair img{width:100%; height:46rem; object-fit: cover; object-position: right center;} /* 관절센터 > 어깨 > 인공관절 수술 */ .visual-radius.tsa img{width:100%; height:36rem; object-fit: cover; object-position: center center;} /* 관절센터 > 어깨 > 오십견 수술 */ .visual-radius.frozen figure{flex:1 1 100%;} .visual-radius.frozen figure img{width:100%;} /* 관절센터 > 팔꿈치 > 테니스엘보 골프엘보 관절경 수술 */ .visual-radius.elbow-scope img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 관절센터 > 팔꿈치 > 척골 신경이전술 */ .visual-radius.ulnar-trans img{width:100%; height:46rem; object-fit: cover; object-position: 63% center;} /* 관절센터 > 손목/손가락 > 손목터널증후군 수술 */ .visual-radius.cts img{width:100%; height:46rem; object-fit: cover; object-position: 67% center;} /* 관절센터 > 손목/손가락 > 방아쇠수지 수술 */ .visual-radius.trigger img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 관절센터 > 손목/손가락 > 척골충돌증후군 수술 */ .visual-radius.ulnar img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 관절센터 > 손목/손가락 > TFCC 관절경봉합술 */ .visual-radius.tfcc img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 관절센터 > 고관절 > 인공관절 수술 */ .visual-radius.tha img{width:100%; height:40rem; object-fit: cover; object-position: 40% center;} /* 관절센터 > 발목 > 발목인대봉합술 */ .visual-radius.ligament img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 관절센터 > 발목 > 관절경 연골재생술 */ .visual-radius.kcartilage img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 관절센터 > 발목 > 수면 내향성발톱 제거술 */ .visual-radius.ingrown img{width:100%; height:36rem; object-fit: cover; object-position: 40% center;} /* 척추센터 > 경막외신경성형술 */ .visual-radius.epidural-neuroplasty img{width:100%; height:46rem; object-fit: cover; object-position: 58% center;} /* 척추센터 > 척추내시경수술 */ .visual-radius.endoscopic img{width:100%; height:46rem; object-fit: cover; object-position: 70% center;} /* 척추센터 > 최소침습척추유합술 */ .visual-radius.mis-fusion img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 척추센터 > 척추체성형술 */ .visual-radius.vertebroplasty img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 척추센터 > 경추유합술/인공디스크치환술 */ .visual-radius.cervical-fusion figure{flex:1 1 100%;} .visual-radius.cervical-fusion figure img{width:100%;} /* 골절외상센터 > 골절 */ .visual-radius.fracture img{width:100%; height:46rem; object-fit: cover; object-position: 66% center;} /* 골절외상센터 > 불유합 */ .visual-radius.nonunion img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 골절외상센터 > 감염(골수염) */ .visual-radius.infection img{width:100%; height:46rem; object-fit: cover; object-position: 24% center;} /* 응급의학센터 > 응급의학센터 */ .visual-radius.er-center img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 재활치료센터 > 도수치료 */ .visual-radius.manual img{width:100%; height:46rem; object-fit: cover; object-position: 12% center;} /* 재활치료센터 > 운동/물리치료 */ .visual-radius.exercise01 img{width:100%; height:46rem; object-fit: cover; object-position: center center;} .visual-radius.exercise02 img{width:100%; height:46rem; object-fit: cover; object-position: center center;} /* 재활치료센터 > 슬링운동치료 */ .visual-radius.sling img{width:100%; height:46rem; object-fit: cover; object-position: 0 center;} /* 재활치료센터 > 체외충격파 */ .visual-radius.eswt img{width:100%; height:46rem; object-fit: cover; object-position: 85% center;} /* 재활치료센터 > CPM치료 */ .visual-radius.cpm img{width:100%; height:46rem; object-fit: cover; object-position: 70% center;} /* 강서K병원 > 병원소개 */ .bg-text{font-size:30rem; letter-spacing: 12px !important; top:13.3rem;} .about-intro .text:before{display:none;} .about-intro .text>li{width:100%;} .about-intro .text>li p.name{font-size:3rem;} .intro-hash>dl>dt{min-width:6rem; height:4rem; padding:0 2rem; font-size:2.4rem;} /* 강서K병원 > 의료진소개 */ .doctor-list>li{padding:3rem 2rem 4rem;} .doctor-list>li figure{width:16rem;} .doctor-list>li .info-conts{padding-left:2.5rem;} .doctor-list>li .info-conts .name{font-size:3.2rem;} .doctor-list>li .info-conts .info>dt{width:9rem; height:4rem; font-size:2rem;} html[lang="en"] .doctor-list>li .info-conts .info>dt{width:17rem;} .doctor-list>li .info-conts .cate, .doctor-list>li .info-conts .info>dd{font-size:2.4rem; line-height:3.4rem;} /* 강서K병원 > 병원 둘러보기 */ .tour-tab :where(button, a){font-size:2.6rem;} .bigSwiper{} .bigSwiper .swiper-pagination-bullet{width:2.4rem; height:2.4rem;} .bigSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active{width:7rem;} .bigSwiper .tour-text{} .bigSwiper .tour-text>dt{width:13rem;} .bigSwiper .tour-text>dd{padding:1rem 2rem 1rem 3rem; font-size:2.4rem; line-height:3.4rem;} html[lang="en"] .bigSwiper .swiper-pagination{top:4rem; bottom:auto;} /* 강서K병원 > 찾아오시는길 */ .location-layout>.right>li>p:before{top:0.2rem;} .location-layout .car-navi{font-size:2.6rem; line-height:3.6rem;} .location-layout .car-location{margin-top:2rem;} .location-layout .car-location+.car-location{margin-top:2rem;} .location-layout .car-location>dt{width:20rem; height:5rem; font-size:2.4rem;} .location-layout .car-location>dd{flex:none; width:100%; padding-top:0; font-size:2.6rem; line-height:3.6rem;} .location-layout .color-location{margin-top:2rem; font-size:2.6rem; line-height:3.6rem;} .location-layout .color-location+.color-location{margin-top:3rem;} .location-layout .color-location>dt{gap:1rem;} .location-layout .color-location>dt .marker{width:10rem; height:4rem; font-size:2.2rem;} .location-layout .color-location>dd{padding-top:1rem;} html[lang="en"] .location-layout .color-location>dt .marker{width:17rem;} /* 이용안내 > 진료시간표 */ .timetable-info{height:auto; margin-top:11rem; padding:4.3rem 3rem; gap:4.3rem 0;} .timetable-info>div{flex:1 1 50%; width:auto;} .timetable-info>.time+div{border-left:0;} .timetable-info .time{flex:1 1 100%; padding-bottom:4.3rem; border-bottom:1px solid #ddd;} /* 이용안내 > 입퇴원안내 */ .admission-info>li>figure{display:none;} .admission-info>li .title{} /* 이용안내 > 서류발급안내 */ .document-issue-btn{} .document-issue-btn>a{width:100%;} .document-issue-btn>a dl{padding:0 4rem;} .document-down-btn{gap:2rem;} .document-down-btn>a{width:100% !important; min-height:14rem; flex-flow: row wrap;} .document-down-btn>a figure{} .document-down-btn>a dl{width:70%; height:auto; padding:0 2rem; text-align: left; align-items: start;} .document-down-btn>a dl>dt{} /* .pg-visual>p{font-size:5rem;} .location-top .location-info>dl{width:100%;} .location-top .location-info>dl>dd{font-size:2.4rem;} .location-top .location-info>dl.juso>dd{font-size:2.8rem;} .location-top .location-btns{} .location-top .location-btns>a{font-size:2.4rem;} .location-traffic>dl>dd{font-size:2.4rem; line-height:3.6rem;} */ /* store */ .store-area>.store-inj{} .store-area>.store-inj>dl{} .store-area>.store-inj>dl>dt{} .store-area>.store-inj>dl>dd{font-size:2.3rem;} .store-area .store-inj-box{height:23.5rem;} .store-area .store-inj-box img{width:14rem; min-width:14rem;} .store-area .store-inj-box>dl{} .store-area .store-inj-box>dl>dt{font-size:2.4rem; } .store-area .store-inj-box>dl>dd{font-size:2.2rem;} .store-area .store-inj-btn{} .store-area .store-inj-btn>a{font-size:2rem;} .store-table{} .store-table>table{} .store-table>table th, .store-table>table td{font-size:2rem; line-height:1.5;} .store-table>table th{} .store-table>table th:before, .store-table>table td:before{font-size:2.2rem;} .store-table>table .btn{width:12rem; height:4rem; margin:0; font-size:1.8rem;} /* etc */ .etc_clause{width:100%; margin:0 auto;} .etc_clause .etc_clause_in{padding:5rem 3rem; border-radius:1rem;} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:2rem 0 6rem; font-size:2.6rem;} .etc_clause .scroll{font-size:2rem;} .clause-style .scroll{font-size:2.2rem;} .clause-style .scroll ol>li{padding-left:2.3rem; text-indent: -2.3rem;} .clause-style .scroll .kr>li{padding-left:2.7rem; text-indent: -2.7rem;} .clause-style .scroll ul>li{padding-left:1.4rem; text-indent: -1.4rem;} .etc_select{width:100%;} .etc_select select.base{width:22rem;} /* search */ .search-area{} .search-area .search-re .search-re-tit span{height:4rem; padding:0 2rem; font-size:2rem;} .search-area .search-re .search-re-list .search-link .tit{font-size:2.4rem;} .search-area .search-re .search-re-list .search-link .txt{font-size:2rem;} .search-area .search-re .search-more>a{height:5.1rem; padding:0 3.7rem; font-weight: 600; font-size:2rem;} .search-area .result-group{} .search-area .result-group dl{} .search-area .result-group dl dt{display:none;} .search-area .result-group dl dd{width:100%;} .search-area .result-group dl dd div {} .search-area .result-group dl dd div.title{} .search-area .result-group dl dd div.title a{font-size:2.4rem;} .search-area .result-group dl dd div.title a>h2 {} .search-area .result-group dl dd div.cont{max-height: 5.6rem; margin-top:1rem; font-weight: 400; font-size:2rem; line-height:2.8rem;} .search-area .result-group dl dd div.navi, .result-group dl dd div.navi a{font-size:2rem;} /*[e] Sub Style */ /*[s] Plugin Style */ .layer-base.fancybox__content>.carousel__button.is-close, .layer-base.fancybox__content>.carousel__button.is-back{width:5rem; height:5rem;} #find-expert-lay .scroll{height:100rem;} #find-expert-lay .text-box{font-size:3rem; line-height:4.4rem;} #find-expert-lay .list{gap:4rem 3rem;} #find-expert-lay .list>li{width:calc((100% - 3rem) / 2);} #find-expert-lay .list>li .cate{font-size:2.2rem;} #find-expert-lay .list>li .name{font-size:2.6rem;} #find-expert-lay .find-expert-view .photo-box{width:100%; max-width:none; display: flex; gap:3rem;} #find-expert-lay .find-expert-view .photo-box>dt{max-width:50%;} #find-expert-lay .find-expert-view .photo-box>dd{margin-top:0; font-size:2.4rem; flex-flow: column wrap; justify-content: center;} #find-expert-lay .find-expert-view .photo-box>dd>strong{width:100%; margin-top:1rem;} #find-expert-lay .find-expert-view .history-info{width:100%; height:54.77rem; margin-top:5rem;} #find-expert-lay .find-expert-view .history-info *+h5.bul{margin-top:4rem;} #find-expert-lay .find-expert-view .history-info .txt{font-size:2.4rem;} #success-detail-lay .scroll{height:100rem;} #success-detail-lay .find-expert-view .success-detail-view h3{font-size:3rem;} #success-detail-lay .find-expert-view .success-detail-view h5{font-size:2.6rem;} #success-detail-lay .find-expert-view .success-detail-view p{font-size:2.2rem;} #success-detail-lay .find-expert-view .success-detail-view .txt{font-size:2.4rem;} .add-form-lay .layer-in .text{font-size:2.2rem;} .lay-alert{max-width:90%;} .lay-alert .layer-in .logos img{height:8rem;} .lay-alert .layer-in .text{font-size:2.4rem; line-height:3.6rem;} .lay-doctor .lay-doctor-top{padding:5rem 3rem 0;} .lay-doctor .lay-doctor-top>figure{margin-bottom:-14.3rem;} .lay-doctor .lay-doctor-top>figure img{width:20rem;} .lay-doctor .lay-doctor-top .info-conts .name>dt{width:100%;} .lay-doctor .lay-doctor-top .info-conts .department>dd>p{height:5rem; font-size:2.2rem;} .reservation-btn>a{min-width:auto; height:6rem; font-size:2.2rem;} .lay-doctor .lay-doctor-conts{padding:7.5rem 3rem;} /*[e] Plugin Style */ } @media only screen and (max-width : 640px){ .sticky-table:not(.document)>table{min-width:640px;} .timetable-area .timetable-re .timetable-two .name>dt{width:100%;} } @media only screen and (max-width : 480px){ .sticky-table.document{padding-bottom:2rem; overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action: pan-x;} .sticky-table.document>table{min-width:540px;} #find-expert-lay .find-expert-view .history-info{height:53.884rem;} .lay-alert{max-width:100%;} } @media only screen and (max-width : 400px){ #find-expert-lay .find-expert-view .history-info{height:61.27rem;} } /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-flow: row wrap; align-items: center; justify-content: center; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; flex-flow: column wrap; align-content: center; justify-content: space-between; justify-content: space-around; flex-wrap: wrap; transform:rotate(180deg); transform: translateY(-50%); transform: scale(1) filter:blur(3px); filter:grayscale(100%); -webkit-filter:grayscale(100%); backdrop-filter:blur(50px); transition: all .5s linear; transition: all .5s ease-out; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all; //두줄 감추기 active border-radius:2px; width:calc(100% / 6); box-shadow:0 0 1rem rgba(0,0,0,0.2); */