@charset "UTF-8"; /* include */ @import url('./popup.css'); /* common */ @media all and (min-width:769px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide, .swiper-wrapper{height:100% !important;} } .swiper-slide.hide{display:none;} .swiper-pagination{display:inline-block; position:relative; top:auto; right:auto; bottom:auto; left:auto; text-align:center;} .swiper-pagination-bullet{display:inline-block; position:relative; width:12px; height:12px; margin:0 4px; background:#ddd; border:none; border-radius:2px; opacity:1; vertical-align:middle; transition:.3s;} .swiper-button-prev:after, .swiper-button-next:after{font-family:inherit; font-size:0;} .swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{opacity:.8;} .swiper-pagination-bullet-active{background:#e4e4e4; opacity:1;} .swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{} .swiper-button-prev, .swiper-button-next{display:inline-block; position:absolute; width:36px; height:36px; top:50%; left:auto; right:auto; margin:0; margin-top:-18px; padding:0; border:none; border-radius:16px; transition:.3s;} .swiper-button-prev{background:transparent url('../images/ico_arrow_left_light.png') no-repeat left 48% top 49% / 25%;} .swiper-button-next{background:transparent url('../images/ico_arrow_right_light.png') no-repeat right 48% top 49% / 25%;} .swiper-button-prev:focus, .swiper-button-prev:hover{background-color:rgba(255,255,255,.25);} .swiper-button-next:focus, .swiper-button-next:hover{background-color:rgba(255,255,255,.25);} .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{background-position:center bottom !important; opacity:1;} .swiper-button-play, .swiper-button-pause{display:none; width:8px; height:14px; margin-left:5px; font-size:0; vertical-align:middle; opacity:1; cursor:pointer; transition:0.2s;} .swiper-button-play:focus, .swiper-button-pause:focus, .swiper-button-play:hover, .swiper-button-pause:hover{opacity:.6;} .swiper-button-play{background:url('../images/ico_play.png') no-repeat center;} .swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;} .swiper-button-play.active, .swiper-button-pause.active{display:inline-block;} .autoplay-progress{position:absolute; width:5em; height:2px; top:.75em; left:0; background-color:#ddd; z-index:10;} .autoplay-progress svg{--progress:0; position:absolute; width:100%; top:0; left:0; z-index:10; stroke-width:4px; stroke:#333; fill:none; stroke-dashoffset:calc(100 * (1 - var(--progress))); stroke-dasharray:100;} @keyframes marquee_origin{0%{transform:translateX(0);} 50%{transform:translateX(-100%);} 50.01%{transform:translateX(100%);} 100%{transform:translateX(0);}} @keyframes marquee_clone{0%{transform:translateX(0);} 100%{transform:translateX(-200%);}} .marquee.origin{animation:marquee_origin 80s linear 0s infinite normal forwards running;} .marquee.clone{animation:marquee_clone 80s linear 0s infinite normal none running;} .marqueeW:hover .marquee{animation-play-state:paused;} /* visual */ #mainVisual{position:relative; width:100%; width:100%; min-width:1200px; height:800px; max-height:calc(100vh - 108px); margin:0 auto; background:#000; overflow:hidden;} #mainVisual:after{content:''; clear:both; display:block;} #mainVisual .inner{height:100%; padding:0;} #mainVisual .swiper-container{width:100%; height:100%; overflow:hidden;} #mainVisual .swiper-container .imgW{position:absolute; width:100%; height:100%; top:0; left:0;} #mainVisual .swiper-container .imgW img{position:absolute; min-width:100%; height:auto; min-height:100%; top:50%; left:50%; object-fit:cover; transform:translate(-50%, -50%) scale(1.1); transition:4s ease;} #mainVisual .swiper-container .imgW:after{content:''; display:block; position:absolute; width:30em; height:30em; top:50%; left:50%; margin-top:-.75em; background:url('../images/symbol_nobino.svg') no-repeat center / contain; opacity:.05; pointer-events:none; transform:translate(-50%, -50%);} #mainVisual .swiper-container .txtW{display:inline-block; position:absolute; width:100%; top:50%; left:0; margin-top:-4em; text-align:center; transform:translateY(-50%); z-index:2;} #mainVisual .swiper-container .txtW p{position:relative; line-height:1.5; margin:0 auto; padding:0; color:#fff; font-weight:400; word-break:keep-all; overflow-wrap:anywhere;} #mainVisual .swiper-container .txtW p.ti{margin:0 auto .875em; font-size:3em;} #mainVisual .swiper-container .txtW p.info{display:inline-block; margin:-.5em auto 0; padding:.58333em 0 0; font-size:1.5em;} #mainVisual .swiper-container .txtW p.info:before{content:''; display:block; position:absolute; width:100%; height:1px; top:0; left:0; background:#fff;} #mainVisual .swiper-slide-active .imgW.scale-down-center img{transform:translate(-50%,-50%) scale(1.0);} #mainVisual .bgBox{z-index:2;} #mainVisual .bgBox .control{position:absolute; width:auto; max-width:fit-content; bottom:50%; left:50%; margin:0 auto -9.25em; text-align:center; transform:translate(-50%, -50%); z-index:1;} #mainVisual .bgBox .control .swiper-button-prev, #mainVisual .bgBox .control .swiper-button-next{display:inline-block; position:relative; width:8px; height:14px; margin-top:0; background-color:transparent; background-position:center; background-size:cover; border:none; vertical-align:middle;} #mainVisual .bgBox .pager{display:inline-block; position:relative; width:auto; margin:0 .75em; text-align:center; vertical-align:middle; z-index:11;} #mainVisual .bgBox .pager .swiper-pagination span{color:#fff; font-size:.938em; opacity:1;} #mainVisual .bgBox .pager .swiper-pagination span.current{font-weight:bold;} #mainVisual .bgBox .pager .swiper-pagination span.total{opacity:.6;} #mainVisual .bgBox .pager .swiper-pagination span.total:before{content:'/'; display:inline-block; margin:0 .5em;} /* contents */ #mainContents{clear:both; position:relative; width:100%; min-width:1224px; margin:0 auto; padding:0; background:transparent; z-index:1;} #mainContents .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04, #mainContents .area05{clear:both; position:relative; width:100%; margin:0 auto; padding:0; background:#fff; overflow:hidden;} #mainContents .felxW{display:flex; flex-wrap:wrap;} #mainContents .area01{width:100%; height:4em; line-height:4em; margin-top:-4em; background:transparent;} #mainContents .area01 .board.notice{display:inline-block; width:100%; height:100%; padding:0 2.5em; background:rgba(0,0,0,.6); border-radius:1.5em 1.5em 0 0;} #mainContents .area01 .board.notice .notice{padding:0;} #mainContents .area01 .board.notice p{display:inline-block; width:auto; color:#fff;} #mainContents .area01 .board.notice p.boardTitle{float:left; width:8em; padding:0 2.5em 0 0; border-right:1px solid rgba(255,255,255,.2);} #mainContents .area01 .board.notice p.boardTitle i.ico.notice{width:1.125em; height:1.125em; margin-right:.5em; background:url('../images/ico_notice.png') no-repeat center / 100% 100%; vertical-align:middle;} #mainContents .area01 .board.notice p.boardTitle span{display:inline-block; font-size:1.125em; font-weight:700; vertical-align:middle;} #mainContents .area01 .board.notice .swiper-container{float:left; display:inline-block; width:calc(100% - 8em - 11.5em); padding:0; vertical-align:middle; overflow:hidden;} #mainContents .area01 .board.notice .swiper-container ul.board{width:100%;} #mainContents .area01 .board.notice .swiper-container ul.board li{display:block; width:100%; padding:0 2.5em;} #mainContents .area01 .board.notice .swiper-container ul.board li a{display:inline-block; width:100%; line-height:1; color:#fff;} #mainContents .area01 .board.notice .swiper-container ul.board li a p{color:inherit; text-align:left; vertical-align:middle;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:auto; max-width:84%; font-size:1.125em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listDate{padding-left:1.75em; color:#ccc;} #mainContents .area01 .board.notice .swiper-container ul.board li a:focus, #mainContents .area01 .board.notice .swiper-container ul.board li a:hover{color:#f2d330;} #mainContents .area01 .board.notice .bgBox{float:right; display:inline-block; width:11.5em; vertical-align:top;} #mainContents .area01 .board.notice .bgBox .control{float:left; display:inline-block; position:relative; width:auto; max-width:fit-content; text-align:center; z-index:1;} #mainContents .area01 .board.notice .bgBox .control .swiper-button-prev, #mainContents .area01 .board.notice .bgBox .control .swiper-button-next{display:inline-block; position:relative; width:8px; height:14px; margin-top:0; background-color:transparent; background-position:center; background-size:cover; border:none; vertical-align:middle;} #mainContents .area01 .board.notice .bgBox .control .swiper-button-play, #mainContents .area01 .board.notice .bgBox .control .swiper-button-pause{margin:0 1em; font-size:1em;} #mainContents .area01 .board.notice .bgBox .btnW{float:right; display:inline-block;} #mainContents .area01 .board.notice .bgBox .btnW a.btn.more{padding:.48em 1.6063em; border-color:#666; color:#999;} #mainContents .area01 .board.notice .bgBox .btnW a.btn.more span{font-size:.875em;} #mainContents .area01 .board.notice .bgBox .btnW a.btn.more:focus, #mainContents .area01 .board.notice .bgBox .btnW a.btn.more:hover{background:rgba(255,255,255,.1); border-color:#999; color:#fff;} #mainContents .area02{padding:7.5em 0;} #mainContents .area02 .clinicW{position:relative; padding:0 7.5em;} #mainContents .area02 .clinicW .inner{max-width:100%; padding:0;} #mainContents .area02 .clinicW ul.clinic{display:flex; flex-wrap:wrap; gap:3.75em;} #mainContents .area02 .clinicW ul.clinic li{flex:1;} #mainContents .area02 .clinicW ul.clinic li a{} #mainContents .area02 .clinicW ul.clinic li a .imgW{position:relative; margin:0 auto 2em; padding:0 0 75%; border-radius:.5em; overflow:hidden; transition:.3s;} #mainContents .area02 .clinicW ul.clinic li a .imgW img{position:absolute; width:100%; height:100%; top:50%; left:50%; transform:translate(-50%, -50%); object-fit:cover;} #mainContents .area02 .clinicW ul.clinic li a .imgW:before, #mainContents .area02 .clinicW ul.clinic li a .imgW:after{content:''; display:block; position:absolute; width:100%; height:100%; bottom:0; left:0; border-radius:.5em; opacity:0; transition:.3s; z-index:1; box-sizing:border-box;} #mainContents .area02 .clinicW ul.clinic li a .imgW:before{border:1px solid transparent;} #mainContents .area02 .clinicW ul.clinic li a .imgW:after{background:rgba(242,211,48,.6); transform:scaleX(0); transform-origin:center center;} #mainContents .area02 .clinicW ul.clinic li a .txtW{} #mainContents .area02 .clinicW ul.clinic li a .txtW p{line-height:1.5; color:#808080; font-size:1.125em; font-weight:400; text-align:left; word-break:keep-all; overflow-wrap:anywhere;} #mainContents .area02 .clinicW ul.clinic li a .txtW p.ti{line-height:1; margin:0 auto .464285em; color:#333; font-size:1.75em; font-weight:700;} #mainContents .area02 .clinicW ul.clinic li a .txtW p.ti span{vertical-align:middle;} #mainContents .area02 .clinicW ul.clinic li a .txtW p.ti i.ico.arrow.right{display:inline-block; width:8px; height:14px; margin-left:.571428em; background:url('../images/ico_arrow_right_dark.png') no-repeat center / 100%; vertical-align:middle; opacity:0; transform:translateX(-1em); transition:.3s;} #mainContents .area02 .clinicW ul.clinic li a:focus, #mainContents .area02 .clinicW ul.clinic li a:hover{} #mainContents .area02 .clinicW ul.clinic li a:focus .imgW:before, #mainContents .area02 .clinicW ul.clinic li a:hover .imgW:before{border-color:#f2d330; opacity:1;} #mainContents .area02 .clinicW ul.clinic li a:focus .imgW:after, #mainContents .area02 .clinicW ul.clinic li a:hover .imgW:after{opacity:1; transform:scaleX(1);} #mainContents .area02 .clinicW ul.clinic li a:focus .txtW p.ti i.ico.arrow.right, #mainContents .area02 .clinicW ul.clinic li a:hover .txtW p.ti i.ico.arrow.right{opacity:1; transform:translateX(0);} #mainContents .area02 .clinicW ul.clinic li.quick01{} #mainContents .area02 .clinicW ul.clinic li.quick02{} #mainContents .area02 .clinicW ul.clinic li.quick03{} #mainContents .area03{overflow:inherit;} #mainContents .area03 .checkingW{position:relative; padding:0 3.75em;} #mainContents .area03 .checkingW .inner{max-width:100%; padding:0;} #mainContents .area03 .checkingW .btn{padding:0; color:inherit; font-size:1em; font-weight:inherit;} #mainContents .area03 .checkingW a.btn.kaidoc{display:block; width:100%; background:#0f67fe; border:none; border-radius:.5em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking{} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW{display:flex; justify-content:center; align-items:center; gap:3.75em; position:relative; z-index:1;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .imgW{position:relative; margin:-2.25em 0 0;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .imgW img{} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW{} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW p{text-align:left; word-break:keep-all; overflow-wrap:anywhere;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW p.ti{color:#fff; font-size:1.75em; font-weight:700;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW p.mini{margin:1.333em auto 0; color:#93eaf3; font-size:1.125em; font-weight:500;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .btnW{} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .btnW .btn.more{padding:.48em 1.6063em; border-color:#74a6fc; color:#fff; transition:.3s;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .btnW .btn.more span{font-size:.875em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW{position:absolute; width:100%; height:100%; top:0; left:0; padding:2em 2.5em 1.75em; z-index:0;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW .objectW{position:relative; width:100%; height:100%;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW .objectW span.object{position:absolute; color:#93eaf3; text-transform:uppercase;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW .objectW span.object.left{max-width:6.625em; line-height:1.25; top:0; left:0; font-size:1.75em; font-weight:500; text-align:left; opacity:.1;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW .objectW span.object.right{line-height:.725; right:0; bottom:0; font-size:7.5em; font-weight:700; text-align:right; opacity:.05;} #mainContents .area03 .checkingW a.btn.kaidoc:focus, #mainContents .area03 .checkingW a.btn.kaidoc:hover{/*background:#0d59da;*/} #mainContents .area03 .checkingW a.btn.kaidoc:focus .checking .flexW .btnW .btn.more, #mainContents .area03 .checkingW a.btn.kaidoc:hover .checking .flexW .btnW .btn.more{background:#fff; border-color:#fff; color:#0f67fe;} #mainContents .area04{background:#f3f3f3; background:linear-gradient(0deg, #f3f3f3 0, #fff 100%);} #mainContents .area04 .sloganW{position:relative; padding:13.75em 0;} #mainContents .area04 .sloganW .inner{max-width:712px; padding:0 1em;} #mainContents .area04 .sloganW .imgW{position:absolute; top:50%; left:50%; margin:0 auto; transform:translate(-50%, -50%); z-index:-1;} #mainContents .area04 .sloganW .imgW img.rotate-center{width:25em; height:25em; -webkit-animation:rotate-center 32s linear infinite both; animation:rotate-center 32s linear infinite both;} #mainContents .area04 .sloganW .txtW{display:flex; flex-direction:column; flex-wrap:wrap; position:relative; z-index:1;} #mainContents .area04 .sloganW .txtW p{flex:1 1 100%; width:100%; max-width:fit-content; word-break:keep-all; overflow-wrap:anywhere;} #mainContents .area04 .sloganW .txtW p.ti{align-self:flex-start; margin:0 0 1.625em; font-size:2em;} #mainContents .area04 .sloganW .txtW p.ti span.big{font-size:1.5em;} #mainContents .area04 .sloganW .txtW .detailW{align-self:flex-end;} #mainContents .area04 .sloganW .txtW .detailW p{line-height:1.75; color:#808080; font-size:1.5em;} #mainContents .area04 .sloganW .txtW .detailW p.detail01{} #mainContents .area04 .sloganW .txtW .detailW p.detail02{margin:.5em 0 0;} #mainContents .area05{} #mainContents .area05 .inner{max-width:100%; padding:0;} #mainContents .area05 .flexW{display:flex; flex-wrap:wrap; align-items:stretch; max-height:773px;} #mainContents .area05 .flexW .mapW{flex:1 1 60%; width:60%; background:#e3e3e3;} #mainContents .area05 .flexW .mapW .root_daum_roughmap_landing{width:100%; height:100%;} #mainContents .area05 .flexW .mapW .root_daum_roughmap .wrap_map{width:100%; height:100% !important;} #mainContents .area05 .flexW .mapW .wrap_controllers, #mainContents .area05 .flexW .mapW .root_daum_roughmap .cont{display:none;} #mainContents .area05 .flexW .infoW{flex:1 1 40%; width:40%; padding:7.5em 5em; word-break:keep-all; overflow-wrap:anywhere;} #mainContents .area05 .flexW .infoW ul{} #mainContents .area05 .flexW .infoW ul > li{margin:0 auto 3.75em;} #mainContents .area05 .flexW .infoW ul > li:last-child{margin:0 auto;} #mainContents .area05 .flexW .infoW ul > li > p{} #mainContents .area05 .flexW .infoW ul > li > p.ti{margin:0 auto 1.714285em; color:#808080; font-size:.875em;} #mainContents .area05 .flexW .infoW ul li.location{} #mainContents .area05 .flexW .infoW ul li.location p.address{margin:0 0 .888em; font-size:1.125em; font-weight:500;} #mainContents .area05 .flexW .infoW ul li.location p.mini{font-size:.875em;} #mainContents .area05 .flexW .infoW ul li.location p.mini i.ico.subway{display:inline-block; margin:0 .142857em; padding:.21428571em .571428em .285714em; background:#333; border-radius:5em; color:#fff; font-style:normal;} #mainContents .area05 .flexW .infoW ul li.location p.mini i.ico.subway:first-child{margin-left:0;} #mainContents .area05 .flexW .infoW ul li.location p.mini i.ico.subway.line3{background:#f06e00;} #mainContents .area05 .flexW .infoW ul li.location p.mini i.ico.subway.suinbundang{background:#eba900;} #mainContents .area05 .flexW .infoW ul li.location p.mini i.ico.subway.gtxa{background:#905a89;} #mainContents .area05 .flexW .infoW ul li.location p.mini span{display:inline-block; margin:0 0 0 .571428em;} #mainContents .area05 .flexW .infoW ul li.hours{} #mainContents .area05 .flexW .infoW ul li.hours ul{margin:0 auto 2em;} #mainContents .area05 .flexW .infoW ul li.hours ul li{display:flex; justify-content:flex-start; gap:2em; margin:0 auto 1.25em;} #mainContents .area05 .flexW .infoW ul li.hours ul li:last-child{margin:0 auto;} #mainContents .area05 .flexW .infoW ul li.hours ul li p{font-size:1.125em;} #mainContents .area05 .flexW .infoW ul li.hours ul li p.day{flex:0 1 3.5em;} #mainContents .area05 .flexW .infoW ul li.hours ul li p.time{font-weight:500;} #mainContents .area05 .flexW .infoW ul li.hours ul li p.time span.mini{display:inline-block; margin:0 0 0 .5em; color:#808080; font-size:.777em; vertical-align:middle; transform:translateY(-1px);} #mainContents .area05 .flexW .infoW ul li.hours ul li.weekday{} #mainContents .area05 .flexW .infoW ul li.hours ul li.lunch{} #mainContents .area05 .flexW .infoW ul li.hours ul li.saturday{} #mainContents .area05 .flexW .infoW ul li.hours p.point.star{margin:0 auto 1.12em; font-size:.875em;} #mainContents .area05 .flexW .infoW ul li.hours p.point.star:last-child{margin:0 auto;} #mainContents .area05 .flexW .infoW ul li.hours p.point.star:before{content:'*'; display:inline-block; margin:0 .25em 0 0;} #mainContents .area05 .flexW .infoW ul li.contact{} #mainContents .area05 .flexW .infoW ul li.contact p.tel{margin:0 auto 1.5em;} #mainContents .area05 .flexW .infoW ul li.contact p.tel a{font-size:2em; font-weight:500;} #mainContents .area05 .flexW .infoW ul li.contact p.tel a span{} #mainContents .area05 .flexW .infoW ul li.contact p.tel a:focus, #mainContents .area05 .flexW .infoW ul li.contact p.tel a:hover{color:inherit;} #mainContents .area05 .flexW .infoW ul li.contact ul.links{display:flex; flex-wrap:wrap; gap:.25em;} #mainContents .area05 .flexW .infoW ul li.contact ul.links li{flex:1 1 calc(50% - .125em); max-width:12.875em; margin:0;} #mainContents .area05 .flexW .infoW ul li.contact ul.links li a.btn.link{display:block; position:relative; width:100%; height:100%; padding:.438em 1.125em; text-align:center;} #mainContents .area05 .flexW .infoW ul li.contact ul.links li a.btn.link span{display:inline-block; position:relative; top:50%; margin-top:-1px; font-size:.875em; transform:translateY(-50%);} #mainContents .area05 .flexW .infoW ul li.contact ul.links li.online{} #mainContents .area05 .flexW .infoW ul li.contact ul.links li.kakao{} #mainContents .area05 .flexW .infoW ul li.contact ul.links li.kakao a.btn.link{background:#f2d330; border-color:#f2d330;} #mainContents .area05 .flexW .infoW ul li.contact ul.links li.kakao a.btn.link:focus, #mainContents .area05 .flexW .infoW ul li.contact ul.links li.kakao a.btn.link:hover{background:#f5e17f;} @media all and (max-width:1599px){ #mainContents .area05 .flexW .infoW ul li.location p.mini span{width:100%; margin:.5em auto 0;} } @media all and (max-width:1440px){ } @media all and (max-width:1279px){ #mainVisual{min-width:960px;} #mainContents{min-width:960px;} #mainContents .inner{min-width:auto;} #mainContents .area01 .board.notice{padding:0 2em;} #mainContents .area01 .board.notice p.boardTitle{width:7.5em; padding:0 2em 0 0;} #mainContents .area01 .board.notice .swiper-container{width:calc(100% - 7.5em - 11.5em);} #mainContents .area01 .board.notice .swiper-container ul.board li{padding:0 2em;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{max-width:76%;} #mainContents .area02 .clinicW{padding:0 2.5em;} #mainContents .area02 .clinicW ul.clinic{gap:2.5em;} #mainContents .area02 .clinicW ul.clinic li a .txtW p.ti{font-size:1.625em;} #mainContents .area03 .checkingW{padding:0 1.25em;} #mainContents .area05 .flexW .mapW{flex:1 1 50%; width:50%;} #mainContents .area05 .flexW .infoW{flex:1 1 50%; width:50%;} } @media all and (max-width:1023px){ #mainVisual{min-width:100%;} #mainVisual .swiper-container .txtW p.ti{font-size:2.75em;} #mainContents{min-width:100%;} #mainContents .area01 .board.notice{padding:0 1.5em;} #mainContents .area01 .board.notice p.boardTitle{width:6.5em; padding:0 1.5em 0 0;} #mainContents .area01 .board.notice p.boardTitle i.ico.notice{width:1em; height:1em;} #mainContents .area01 .board.notice p.boardTitle span{font-size:1em;} #mainContents .area01 .board.notice .swiper-container{width:calc(100% - 6.5em - 10em);} #mainContents .area01 .board.notice .swiper-container ul.board li{padding:0 1.5em;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{max-width:72%; font-size:1em;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listDate{padding-left:1em; font-size:.875em;} #mainContents .area01 .board.notice .bgBox{width:10em;} #mainContents .area01 .board.notice .bgBox .btnW a.btn.more{padding:.48em 1.25em;} #mainContents .area02 .clinicW ul.clinic{gap:3.75em;} #mainContents .area02 .clinicW ul.clinic li{flex:1 1 100%;} #mainContents .area02 .clinicW ul.clinic li a .imgW{padding:0 0 32%;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .imgW{margin:-2.25em 0 0 -0.5em;} #mainContents .area04 .sloganW .inner{width:80%; max-width:580px;} #mainContents .area04 .sloganW .txtW p.ti{font-size:1.75em;} #mainContents .area04 .sloganW .txtW .detailW p{font-size:1.25em;} #mainContents .area05 .flexW{max-height:inherit;} #mainContents .area05 .flexW .mapW{flex:1 1 100%; width:100%; height:100vh; max-height:768px; min-height:480px;} #mainContents .area05 .flexW .infoW{flex:1 1 100%; width:100%;} #mainContents .area05 .flexW .infoW ul li.location p.mini span{width:auto; margin:0 0 0 .571428em;} } @media all and (max-width:768px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:auto;} #mainVisual{height:768px;} #mainVisual .swiper-container .imgW:after{width:22.5em; height:22.5em; margin-top:-2.5em;} #mainVisual .swiper-container .txtW p.ti{font-size:2.25em;} #mainVisual .swiper-container .txtW p.info{font-size:1.25em;} #mainContents .area01{height:auto; line-height:1; margin-top:-7.063em;} #mainContents .area01 .board.notice{display:flex; flex-wrap:wrap; justify-content:space-between; padding:0;} #mainContents .area01 .board.notice p.boardTitle{order:1; width:auto; height:3em; line-height:3em; padding:0 1.5em; border-right:none;} #mainContents .area01 .board.notice .swiper-container{order:3; flex:1 1 100%; line-height:4em; border-top:1px solid rgba(255,255,255,.2)} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{max-width:82.5%;} #mainContents .area01 .board.notice .bgBox{order:2; width:auto; height:3em; line-height:3em; padding:0 1.5em;} #mainContents .area01 .board.notice .bgBox .btnW{margin:0 0 0 1.5em;} #mainContents .area02{padding:6.25em 0;} #mainContents .area02 .clinicW{padding:0 2.25em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW{gap:2em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .imgW img{max-width:112px;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW p.ti{font-size:1.625em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW p.mini{margin:.875em auto 0;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW{padding:1em 1.5em .75em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW .objectW span.object.left{font-size:1.25em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .botW .objectW span.object.right{font-size:3.75em;} #mainContents .area04 .sloganW{padding:10em 0;} #mainContents .area04 .sloganW .txtW p.ti{font-size:1.625em;} #mainContents .area04 .sloganW .txtW .detailW p{font-size:1.125em;} #mainContents .area04 .sloganW .txtW .detailW p br.pc{display:inline;} #mainContents .area04 .sloganW .imgW img.rotate-center{width:22.5em; height:22.5em;} #mainContents .area05 .flexW .mapW{max-height:580px; min-height:320px;} #mainContents .area05 .flexW .infoW{padding:6.25em 3.75em;} } @media all and (max-width:580px){ #mainVisual{height:580px;} #mainVisual .swiper-container .txtW p.ti{font-size:1.875em;} #mainVisual .swiper-container .txtW p.info{font-size:1.125em;} #mainVisual .bgBox .control{margin:0 auto -5em;} #mainVisual .swiper-container .imgW:after{width:64vw; height:64vw; margin-top:-3.75em;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{max-width:78.5%;} #mainContents .area02{padding:5em 0;} #mainContents .area02 .clinicW{padding:0 2em;} #mainContents .area02 .clinicW ul.clinic li a .imgW{padding:0 0 36%;} #mainContents .area02 .clinicW ul.clinic li a .txtW p{font-size:1.063em;} #mainContents .area02 .clinicW ul.clinic li a .txtW p.ti{font-size:1.5em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW{flex-wrap:wrap; gap:.75em 2.5em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .imgW{margin:-1.5em 0 -3.75em -3.75em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW{padding:1.5em 0 0;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW p.ti{font-size:1.5em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .btnW{flex:1 1 100%; padding:0 0 1.5em; text-align:center;} #mainContents .area04 .sloganW .imgW img.rotate-center{width:64vw; height:64vw;} #mainContents .area04 .sloganW .txtW p.ti{align-self:center; font-size:1.5em;} #mainContents .area04 .sloganW .txtW .detailW p{font-size:1.063em;} #mainContents .area05 .flexW .mapW{max-height:480px; min-height:360px;} #mainContents .area05 .flexW .infoW{padding:5em 2.5em;} #mainContents .area05 .flexW .infoW ul li.location p.mini span{width:100%; margin:.5em auto 0;} } @media all and (max-width:480px){ #mainVisual{height:480px;} #mainVisual .swiper-container .txtW{margin-top:-5.75em;} #mainVisual .swiper-container .txtW p.ti{font-size:1.75em;} #mainVisual .swiper-container .txtW p.info{font-size:1.063em;} #mainVisual .bgBox .control{margin:0 auto -3.75em;} #mainContents .area01{margin-top:-7.125em;} #mainContents .area01 .board.notice p.boardTitle{padding:0 1.125em;} #mainContents .area01 .board.notice p.boardTitle i.ico.notice{width:.813em; height:.813em;} #mainContents .area01 .board.notice p.boardTitle span{font-size:.938em;} #mainContents .area01 .board.notice .swiper-container{line-height:1;} #mainContents .area01 .board.notice .swiper-container ul.board li{padding:0 1.125em;} #mainContents .area01 .board.notice .swiper-container ul.board li a{padding:.875em 0;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{max-width:100%; font-size:.938em;} #mainContents .area01 .board.notice .swiper-container ul.board li a p.listDate{width:100%; padding-top:.75em; padding-left:0; font-size:.75em;} #mainContents .area01 .board.notice .bgBox{padding:0 1.125em;} #mainContents .area01 .board.notice .bgBox .btnW{margin:0 0 0 .75em;} #mainContents .area01 .board.notice .bgBox .btnW a.btn.more{padding:.48em .875em;} #mainContents .area01 .board.notice .bgBox .btnW a.btn.more{font-size:.813em;} #mainContents .area02 .clinicW ul.clinic li a .imgW{margin:0 auto 1.5em; padding:0 0 44%;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW{gap:1.5em;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .imgW{flex:1 1 100%; margin:-1.5em 0 -2.5em -1.75em; text-align:center;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .imgW img{max-width:80px;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW{flex:1 1 100%;} #mainContents .area03 .checkingW a.btn.kaidoc .checking .flexW .txtW p{text-align:center;} #mainContents .area04 .sloganW{padding:8em 0;} #mainContents .area04 .sloganW .txtW p.ti{font-size:5.625vw;} #mainContents .area04 .sloganW .txtW .detailW p{font-size:4.25vw;} #mainContents .area04 .sloganW .txtW .detailW p br.pc{display:none;} #mainContents .area05 .flexW .mapW{max-height:320px; min-height:280px;} #mainContents .area05 .flexW .infoW{padding:5em 2em;} #mainContents .area05 .flexW .infoW ul li.hours ul li p.time span.mini{width:100%; margin:.5em 0 0;} #mainContents .area05 .flexW .infoW ul li.contact ul.links li{flex:1 0 auto;} } @media all and (max-width:319px){ } /* ie hack */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){ }