@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; 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:0.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:.2s;} .swiper-button-prev{background:#f7f7f7 url('../images/ico_arrow_left_dark.png') no-repeat left 48% top 49% / 25%;} .swiper-button-next{background:#f7f7f7 url('../images/ico_arrow_right_dark.png') no-repeat right 48% top 49% / 25%;} .swiper-button-prev:focus, .swiper-button-prev:hover{background-color:#e4e4e4;} .swiper-button-next:focus, .swiper-button-next:hover{background-color:#e4e4e4;} .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{background-position:center bottom !important; opacity:1;} .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;} /* 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{clear:both; position:relative; width:100%; margin:0 auto; padding:0; background:#fff; overflow:hidden;} #mainContents .area01{margin:0 auto 3em;} #mainContents .area01 .flexW{display:flex; flex-wrap:wrap; gap:3em; overflow:hidden;} #mainContents .area01 .area01_1{flex:2.5698924731182795; position:relative; width:100%; width:100%; max-width:956px; height:537px; margin:0 auto; background:#fff; border-radius:2em; overflow:hidden;} #mainContents .area01 .area01_1:after{content:''; clear:both; display:block;} #mainContents .area01 .area01_1 .inner{height:100%; padding:0;} #mainContents .area01 .area01_1 .swiper-container{width:100%; height:100%; overflow:hidden;} #mainContents .area01 .area01_1 .swiper-container .imgW{position:absolute; width:100%; height:100%; top:0; left:0; border-bottom-left-radius:3em; overflow:hidden;} #mainContents .area01 .area01_1 .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;} #mainContents .area01 .area01_1 .swiper-container .txtW{display:inline-block; position:absolute; width:100%; top:0; left:0; padding:4.25em 4.5em; z-index:2;} #mainContents .area01 .area01_1 .swiper-container .txtW p{line-height:1.4; color:#333; text-align:left; word-break:keep-all;} #mainContents .area01 .area01_1 .swiper-container .txtW p.ti{margin:0 auto; font-size:3em; font-weight:700;} #mainContents .area01 .area01_1 .swiper-container .txtW p br{display:inline;} #mainContents .area01 .area01_1 .swiper-container .txtW p br.mobile{display:inline;} #mainContents .area01 .area01_1 .swiper-container .txtW p span.mini{display:inline-block; font-size:.58333em;} #mainContents .area01 .area01_1 .swiper-container .txtW p strong{} #mainContents .area01 .area01_1 .swiper-container .txtW p strong.blue{color:#0f67fe;} #mainContents .area01 .area01_1 .swiper-container .txtW p strong.pink{color:#fd3180;} #mainContents .area01 .area01_1 .swiper-slide-active .imgW.scale-down-center img{transform:translate(-50%,-50%) scale(1.0);} #mainContents .area01 .area01_1 .bgBox{display:inline-block; position:absolute; bottom:0; left:0; padding:1.5em 2em .75em 0; background:#fff; border-radius:0 2em 0 0; z-index:2;} #mainContents .area01 .area01_1 .bgBox:before, #mainContents .area01 .area01_1 .bgBox:after{content:''; display:block; position:absolute; width:2em; height:2em; background:url('../images/main/main_visual_overlay.png') no-repeat center / 100%;} #mainContents .area01 .area01_1 .bgBox:before{bottom:100%; left:0;} #mainContents .area01 .area01_1 .bgBox:after{right:-2em; bottom:0;} #mainContents .area01 .area01_1 .bgBox .flexW{display:flex; align-items:center; gap:0 1.5em;} #mainContents .area01 .area01_1 .bgBox .flexW .pager{} #mainContents .area01 .area01_1 .bgBox .flexW .pager .swiper-pagination{width:auto; bottom:auto; left:auto; text-align:left;} #mainContents .area01 .area01_1 .bgBox .flexW .pager .swiper-pagination span{display:inline-block; position:relative; color:#333; font-size:1em;} #mainContents .area01 .area01_1 .bgBox .flexW .pager .swiper-pagination span.current{width:1.25em; font-weight:700; text-align:center;} #mainContents .area01 .area01_1 .bgBox .flexW .pager .swiper-pagination span.total{color:#808080;} #mainContents .area01 .area01_1 .bgBox .flexW .pager .swiper-pagination span.total:before{content:'/'; display:inline-block; margin:0 .313em; font-weight:300;} #mainContents .area01 .area01_1 .bgBox .flexW .progressbar{} #mainContents .area01 .area01_1 .bgBox .flexW .progressbar .autoplay-progress{position:relative; top:auto; left:auto;} #mainContents .area01 .area01_1 .bgBox .flexW .progressbar .autoplay-progress svg{} #mainContents .area01 .area01_1 .bgBox .flexW .control{} #mainContents .area01 .area01_1 .bgBox .flexW .control .swiper-button-prev, #mainContents .area01 .area01_1 .bgBox .flexW .control .swiper-button-next{position:relative; top:auto; left:auto; margin:auto;} #mainContents .area01 .area01_1 .bgBox .flexW .control .swiper-button-prev{} #mainContents .area01 .area01_1 .bgBox .flexW .control .swiper-button-next{} #mainContents .area01 .area01_1 .swiper-slide.bg01 p.ti{margin-top:-.313em;} #mainContents .area01 .area01_2{flex:1;} #mainContents .area01 .area01_2 .checkingW{position:relative; width:100%; height:100%;} #mainContents .area01 .area01_2 .checkingW a{display:block; width:100%; height:100%; padding:3.75em 2.5em 2.5em; background:#0f67fe; border-radius:2em;} #mainContents .area01 .area01_2 .checkingW a:before{content:''; display:block; position:absolute; width:164px; height:260px; right:1.75em; bottom:3em; background:url('../images/main/bg_checking_doctor.png') no-repeat right bottom / 100%; z-index:0;} #mainContents .area01 .area01_2 .checkingW a .checking{display:flex; flex-direction:column; flex-wrap:wrap; justify-content:space-between; position:relative; width:100%; height:100%; z-index:1;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW{} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p{line-height:1; font-weight:700;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.mini{margin:0 auto 1em; color:#93eaf3; font-size:1.25em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.ti{line-height:1.4; color:#fff; font-size:3em;} #mainContents .area01 .area01_2 .checkingW a .checking .botW{display:flex; justify-content:space-between; align-items:center;} #mainContents .area01 .area01_2 .checkingW a .checking .botW span.object{display:inline-block; color:#96bdff; text-align:left; text-transform:uppercase; vertical-align:middle;} #mainContents .area01 .area01_2 .checkingW a .checking .botW i.ico.arrow.right{display:inline-block; position:relative; width:36px; height:36px; background:#fff url('../images/ico_arrow_right_dark.png') no-repeat right 48% top 49% / 25%; border-radius:16px; transition:.3s; vertical-align:middle;} #mainContents .area01 .area01_2 .checkingW a:focus, #mainContents .area01 .area01_2 .checkingW a:hover{background:#0d59da;} #mainContents .area02{} #mainContents .area02 .quickW{padding:3.375em 5em; background:#f3fbfd; background:linear-gradient(135deg, #f3fbfd 0%, #fff8fb 100%); border-radius:2em;} #mainContents .area02 .quickW ul.quick{display:flex; flex-wrap:wrap; justify-content:space-between; gap:0;} #mainContents .area02 .quickW ul.quick li{} #mainContents .area02 .quickW ul.quick li a{color:#333;} #mainContents .area02 .quickW ul.quick li a .imgW{margin:0 auto 2em; background:transparent; border-radius:2em; transition:.3s ease-in-out;} #mainContents .area02 .quickW ul.quick li a .imgW img{width:100%; max-width:fit-content;} #mainContents .area02 .quickW ul.quick li a .txtW{} #mainContents .area02 .quickW ul.quick li a .txtW p{color:inherit; font-size:1.125em; font-weight:500; text-align:center; word-break:keep-all;} #mainContents .area02 .quickW ul.quick li a:focus, #mainContents .area02 .quickW ul.quick li a:hover{color:#0f67fe;} #mainContents .area02 .quickW ul.quick li a:focus .imgW, #mainContents .area02 .quickW ul.quick li a:hover .imgW{background:rgba(255,255,255,.4); box-shadow:8px 8px 20px rgba(15,103,254,.08);} #mainContents .area02 .quickW ul.quick li.quick01{} #mainContents .area02 .quickW ul.quick li.quick02{} #mainContents .area02 .quickW ul.quick li.quick03{} #mainContents .area02 .quickW ul.quick li.quick04{} #mainContents .area02 .quickW ul.quick li.quick05{} @media all and (max-width:1740px){ } @media all and (max-width:1599px){ } @media all and (max-width:1440px){ } @media all and (max-width:1279px){ #mainContents{min-width:960px;} #mainContents .area01 .area01_1{flex:2;} #mainContents .area01 .area01_1 .swiper-container .txtW{padding:3.25em 3.5em;} #mainContents .area01 .area01_1 .swiper-container .txtW p.ti{font-size:2.75em;} #mainContents .area01 .area01_2 .checkingW a{padding:3.5em 2.25em 2em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.mini{font-size:1.063em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.ti{font-size:2.75em;} #mainContents .area01 .area01_2 .checkingW a .checking .botW span.object{font-size:.875em;} #mainContents .area02 .quickW{padding:2em 2.75em;} #mainContents .area02 .quickW ul.quick li a .imgW{max-width:120px; margin:0 auto 1.125em;} #mainContents .area02 .quickW ul.quick li a .txtW p{font-size:1.063em;} } @media all and (max-width:1023px){ #mainContents{min-width:100%;} #mainContents .area01{margin:0 auto 2.5em;} #mainContents .area01 .flexW{gap:2.5em;} #mainContents .area01 .area01_1{flex:1 1 100%; height:480px;} #mainContents .area01 .area01_1 .swiper-container .imgW img{max-height:100%;} #mainContents .area01 .area01_2{flex:1 1 100%;} #mainContents .area01 .area01_2 .checkingW a{padding:2.5em 3.5em 2em;} #mainContents .area01 .area01_2 .checkingW a:before{width:120px; height:192px; right:2.5em; bottom:1.5em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW{margin:0 0 1.5em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.ti br{display:none;} #mainContents .area02 .quickW{padding:1.5em 2em;} #mainContents .area02 .quickW ul.quick{justify-content:center; gap:1em 0;} #mainContents .area02 .quickW ul.quick li{flex:1 1 33%; max-width:33%;} } @media all and (max-width:768px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:auto;} .autoplay-progress{width:4em;} #mainContents .area01 .area01_1{height:400px;} #mainContents .area01 .area01_1 .swiper-container .txtW{padding:2.25em 2.5em;} #mainContents .area01 .area01_2 .checkingW a{padding:2.5em 2.5em 2em;} #mainContents .area01 .area01_2 .checkingW a:before{right:1.875em; bottom:1em;} #mainContents .area02 .quickW{padding:1.5em .5em 2em;} } @media all and (max-width:580px){ #mainContents .area01 .area01_1{height:320px;} #mainContents .area01 .area01_1 .swiper-container .txtW{padding:2em 2.25em;} #mainContents .area01 .area01_1 .swiper-container .txtW p.ti{font-size:2.25em;} #mainContents .area01 .area01_1 .bgBox{padding:.875em 1.5em .313em 0;} #mainContents .area01 .area01_2 .checkingW a{padding:2em 2.25em 1.5em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.ti{font-size:2.25em;} #mainContents .area02 .quickW ul.quick li a .imgW{max-width:100px;} } @media all and (max-width:480px){ .autoplay-progress{width:3em;} #mainContents .area01 .area01_1{height:280px;} #mainContents .area01 .area01_1 .swiper-container .txtW{padding:1.75em 2em;} #mainContents .area01 .area01_1 .swiper-container .txtW p.ti{font-size:1.875em;} #mainContents .area01 .area01_1 .swiper-container .txtW p br.mobile{display:none;} #mainContents .area01 .area01_1 .bgBox{padding:.875em 1em .313em 0;} #mainContents .area01 .area01_1 .bgBox .flexW{gap:0 .875em;} #mainContents .area01 .area01_1 .bgBox .flexW .pager .swiper-pagination span{font-size:.875em;} #mainContents .area01 .area01_1 .bgBox .flexW .pager .swiper-pagination span.total:before{margin:0 .25em;} #mainContents .area01 .area01_2 .checkingW a{padding:1.75em 2em 1.25em;} #mainContents .area01 .area01_2 .checkingW a:before{width:100px; height:160px; right:.875em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.ti{font-size:1.875em;} #mainContents .area01 .area01_2 .checkingW a .checking .txtW p.ti br{display:inline;} #mainContents .area02 .quickW{padding:1em 1em 1.5em;} #mainContents .area02 .quickW ul.quick{gap:1em;} #mainContents .area02 .quickW ul.quick li{flex:1 1 calc(33% - .667em); max-width:calc(33% - .667em);} #mainContents .area02 .quickW ul.quick li.quick01, #mainContents .area02 .quickW ul.quick li.quick02{flex:1 1 33%; max-width:33%;} #mainContents .area02 .quickW ul.quick li a .imgW{max-width:80px; margin:0 auto .75em;} #mainContents .area02 .quickW ul.quick li a .txtW p{font-size:.938em;} } @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){ }