@charset "utf-8"; #mHospital.subAll {display:block} .m-Part {margin:60px 0} .just {text-align: justify; word-break: break-all !important} .p-Part {padding:130px 0} .p-Part2 {padding:10% 0} .s-Part {padding:50px 0} @media all and (max-width:1024px) { #halfWrap.health2.w2-4.s-Part {margin:0} } @media all and (max-width:976px) { .m-Part {margin:90px 0} .p-Part {padding:90px 0} .s-Part {margin:40px 0} } @media all and (max-width:640px) { .br6402{display: none;} } @media all and (max-width:480px) { .p-Part2 {padding:15% 0} .m-Part {margin:15vw 0} .p-Part {padding:15vw 0} .s-Part {margin:3vw 0} } #s-Title {margin-bottom:3em; text-align:center} #s-Title h3 { display:inline-block; font-size:45px; color:#222; font-weight:800; position:relative} #s-Title h3:before {content:''; width:0px; height:0px; background:#004487; position:absolute; left:-15px; top:-5px} #s-Title h2.off {font-size:45px; color:#0ca6ad; font-weight:800;} #s-Title h4 {font-size:30pxm; color:#0ca6ad; font-weight:400; margin-bottom: 50px;} #s-Title .t1 {margin-top:1em; font-size:20px; opacity:.7 ;} #s-Title .t2 {font-size:18px; line-height:1.6em; max-width:1024px; margin:1.5em auto 0} #s-Title .t3 {background: #e9eff3; padding: 80px 20px 60px;font-size:20px; margin-top: -40px; color: #212121;} #s-Title .t4 {font-size:21px; line-height:1.6em; max-width:1024px; margin:1.5em auto 0} #s-Title .lt1 {margin-top:2em; font-size:24px; font-weight:700 } #s-Title .lt2 {margin-top:2em; } #s-Title .lt2 span {font-size:23px; font-weight:700; background:#4a9ca0; border-radius:30px; color:#f6f785; padding:0.5em 2em; display:inline-block;} #s-Title .lt3 {margin-bottom:1.3em; font-size:23px; font-weight:700; color: #000;} #s-Title .lt3 span {font-weight: 400;} #s-Title .lt4 {margin-top:2em; font-size:2.8rem; font-weight:400 } #s-Title .lt4 span{margin-top:2em; font-size:3.5rem; font-weight:700 } .ptxt{ margin-top: 10px;font-size: 1.4rem;} #s-Title h3 br.br560 {display:none} @media all and (max-width:1024px) { #s-Title h3:before {display:none} #s-Title .t3 {padding: 70px 20px 50px; font-size:18px; margin-top: -30px;} } @media all and (max-width:640px) { #s-Title .t3 br{display: none;} } @media all and (max-width:560px) { #s-Title h3 br.br560 {display:block} #s-Title .lt2 span {border-radius:5px;} #s-Title .t1 {margin-top:1em; font-size:18px; opacity:.7 ;} #s-Title .t3 {padding: 60px 15px 40px;} #s-Title .t4 {font-size: 2rem;} #s-Title .lt4 {font-size:23px;} #s-Title .lt4 span{font-size:2.8rem;} .ptxt{ margin-top: 5px;} #s-Title h2.off {font-size:3.5rem;} #s-Title h4 {font-size:23px; margin-bottom: 25px;} } #sBtn {display:inline-block; padding:0 1.5em; line-height:50px; border-radius:5px; background:#004487 url('/images/sub/info1-arrow.png') no-repeat 90% center; } #sBtn p {padding-right:2em; color:#FFF; font-size:18px; font-weight:600} #sBtn:hover {background-color:#4a9ca0} #about1-1 {height:470px;background:url('/images/sub/about1-bg1.png') no-repeat center bottom; background-size:cover; position:relative; display:flex; align-items: center;} #about1-1:before {content:''; width: 502px; height: 28vw; background:url('/images/sub/about1-building.png') no-repeat right bottom; background-size:auto 100%; position:absolute; right:40px; bottom:0} #about1-1 .in-box {padding-left:8%; color:#FFF} #about1-1 p.t1 {font-size:2.0rem; font-weight:600;} #about1-1 h3 {margin:0.8em 0; font-size:5.0rem; font-weight:#600} #about1-1 h3 sup {font-size:26px} @media all and (max-width:1599px) { #about1-1:before {right:20px} } @media all and (max-width:1280px) { #about1-1 {height:400px;} #about1-1 .in-box {padding-left:5%} #about1-1 p.t1 {font-size:18px;} #about1-1 h3 {margin:0.5em 0; font-size:4.5rem} #about1-1 img {width:80px} } @media all and (max-width:1099px) { #about1-1 {margin-top:3em} #about1-1:before {height:40vw} #about1-1 h3 {width:440px; font-size:5.0rem;} } @media all and (max-width:976px) { #about1-1 {margin-top:0em} #about1-1:before {height:35vw} #about1-1 h3 {margin:1.2em 0; width:400px; font-size:4.5rem;} } @media all and (max-width:580px) { #about1-1 {padding:5em 0 50vw 0; height:auto; text-align:center; justify-content:center;} #about1-1:before {height:45vw} #about1-1 .in-box {padding-left:0} #about1-1 h3 {width:350px; margin:0.8em 0; } #about1-1 img {display:none} #about1-1:before {left:50%; transform:translateX(-50%); width:100%; background-position:center bottom } } @media all and (max-width:480px) { #about1-1 {padding:3em 0 50vw 0; } #about1-1:before {height:47vw} #about1-1 h3 { width:74vw } #about1-1 h3 sup {font-size:2.4rem} } #about1-2 h3 {font-size:4.8rem; color:#222; font-weight:400} #about1-2 .t1 {padding-top:1.5em; max-width:690px; font-size:18px; line-height:1.6em; margin:0 auto; text-align:center} #about1-3 ul li {display:flex; align-items: center;} #about1-3 ul li > div {} #about1-3 ul li:nth-child(even) {margin-top:10%;} #about1-3 ul li:nth-child(even) .imgWrap {order:2} #about1-3 ul li:nth-child(even) .txtWrap {order:1; text-align:right; padding-right:5%; padding-left:0} #about1-3 ul li .imgWrap {width:50%} #about1-3 ul li .imgWrap img {width:100%} #about1-3 ul li .txtWrap { width:50%; padding-left:5%} #about1-3 ul li .txtWrap dt { font-size:4.8rem; font-weight:400; color:#222} #about1-3 ul li .txtWrap dd {margin-top:1.5em; font-size:18px; line-height:1.6em} @media all and (max-width:1499px) { #about1-2 h3, #about1-3 ul li .txtWrap dt { font-size:4.0rem;} } @media all and (max-width:1280px) { #about1-3 ul li { align-items: start;} #about1-3 ul li .imgWrap {width:40%} #about1-3 ul li .txtWrap { width:60%;} } @media all and (max-width:1024px) { #about1-3 ul li { flex-wrap:wrap} #about1-3 ul li .imgWrap {width:100%} #about1-3 ul li .txtWrap { width:100%; padding-left:0; padding-top:2em} #about1-3 ul li:nth-child(even) .imgWrap {order:1} #about1-3 ul li:nth-child(even) .txtWrap {order:2; padding-right:0} } @media all and (max-width:658px) { .br658{display: none;} } @media all and (max-width:480px) { #about1-2 h3, #about1-3 ul li .txtWrap dt { font-size:3.5rem;} } #about1-4 {background:url('/images/sub/about1-4-bg.png') no-repeat center center} #about1-4 .s-inner {display:flex; justify-content:space-between; padding:6em 0} #about1-4 .s-inner div {text-align:center} #about1-4 .s-inner div dl dt { font-size: 26px; font-weight:800; color:#FFF} #about1-4 .s-inner div dl dd { margin-bottom:1em; font-size:16px; color:#FFF; font-weight:600; opacity:.4} #about1-4 .s-inner div .line {width:1px; height:40px; margin:1em auto; background:rgba(255,255,255,0.4)} #about1-4 .s-inner div h3 {font-size:26px; color:#FFF; font-weight:500; line-height:1.2em} #about1-4 .s-inner div h3 sup {font-size:16px} #about1-4 .s-inner div h3 span {font-size:18px} @media all and (max-width:1024px) { #about1-4 .s-inner div dl dt { font-size: 22px; } #about1-4 .s-inner div h3 {font-size:22px;} #about1-4 .s-inner div img {width:90px} #about1-4 .s-inner div .line {height:30px;} } @media all and (max-width:880px) { #about1-4 .s-inner {flex-wrap:wrap; justify-content:center; gap:50px 0} #about1-4 .s-inner div { width:50%} } @media all and (max-width:480px) { #about1-4 .s-inner div .line { height:20px;} } #about1-5 { text-align:center; position:relative } #about1-5:before {content:''; width:1px; height:100%; background:#f3f3f3; position:absolute; left:50%; top:0;z-index:-1} #about1-5:after {content:''; width:50%; height:100%; border-left:1px solid #f3f3f3; border-right:1px solid #f3f3f3; position:absolute; left:50%; top:0;z-index:-1; transform:translateX(-50%)} #about1-5 .eng {margin-bottom: 3em; font-size: 1.5rem; font-weight: 800; color: #a3a9c1;} #about1-5 h3 {margin-bottom:1em; font-size:4.8rem; color:#222; font-weight:400; line-height:1.4em; } #about1-5 h3 br.br840 {display:none} #about1-5 .in-box {display:flex} #about1-5 .in-box > div {padding:2em 2em 5em 2em;} #about1-5 .in-box > div img {width:100%} #about1-5 .in-box > div dl {margin-top:-30px} #about1-5 .in-box > div dl dt {font-size:22px; font-weight:600; line-height:60px; padding:0 1.5em; background:#1d2832; color:#FFF; display:inline-block} #about1-5 .in-box > div dl dd {padding-top:1em; font-size:18px; line-height:1.6em; } #about1-5 .in-box > div dl dd.w300 {max-width:300px; margin:0 auto} @media all and (max-width:1499px) { #about1-5 h3 { font-size:4.0rem;} #about1-5 .in-box > div dl dt {font-size:2.0rem; line-height:50px;} } @media all and (max-width:1399px) { #about1-5 .in-box > div {padding:1em 1em 3em 1em;} } @media all and (max-width:1280px) { #about1-5:after {display:none} #about1-5 .in-box { flex-wrap:wrap} #about1-5 .in-box > div {width:50%; padding:2em; border-top:1px solid #f3f3f3;} } @media all and (max-width:840px) { #about1-5 h3 br.br840 {display:block} } @media all and (max-width:767px) { #about1-5 .in-box > div {padding:1em 1em 2em 1em;} #about1-5 .in-box > div dl dt { line-height:40px;} #about1-5 .in-box > div dl {margin-top:-20px} } @media all and (max-width:580px) { #about1-5:before {display:none} #about1-5 .in-box > div {width:100%; padding:2em;} } @media all and (max-width:480px) { #about1-5 h3 { font-size:3.5rem; line-height:1.3em;} } .doctor_info{width: 100%; display: flex; flex-wrap: wrap; justify-content:center; gap:30px} .doctor_info > li {width:377px;} .doctor_info > li:nth-child(4n){margin-right: 0;} .doctor_info > li .img{width: 100%; background: #d7d8dd; overflow: hidden; transition: 0.5s; position: relative;} .doctor_info > li:hover .img img{transform: scale(1.1); transition: 0.5s;} .doctor_info > li .img img{width: 100%; max-width:377px; transition: 0.5s;} .doctor_info > li .txt {background:#004487; padding:1.2em 1.8em; color:#FFF; position:relative} .doctor_info > li .txt:before {content:'GO'; font-family:'Oswald'; font-size:18px; font-weight:500; width:63px; height:63px; color:#FFF; display:block; text-align:center; border-radius:100%; background:#257094; border:7px solid #0b518b; line-height:48px; position:absolute; right:1em; top:50%; transform:translateY(-50%)} .doctor_info > li a:hover .txt:before { background:#4a9ca0; border-color:#155d8e; transition: all 0.1s ease-out;} .doctor_info > li h4{font-size:1.5rem; font-weight:500; opacity:.7} .doctor_info > li h3{ font-size:26px; font-weight:700} .doctor_info > li h3 span{font-weight:400} .overlay { background-color: rgba(0, 0, 0, 0.7); display: none; bottom: 0; left: 0; opacity: 0; position: fixed; right: 0; top: 0;cursor: default; visibility: hidden; z-index: 999991; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;} .overlay:target {visibility: visible; opacity: 1; display: block;} .popup {background-color: #fff; left: 50%; opacity: 0; padding: 0; position: fixed; top: -100%; z-index: 999999; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%,-50%); transform: translate(-50%, -50%); -webkit-transition: opacity .8s, top .8s; -moz-transition: opacity .8s, top .8s; -ms-transition: opacity .8s, top .8s;-o-transition: opacity .8s, top .8s; transition: opacity .8s, top .8s;} .overlay:target+.popup { top: 50%; opacity: 1; visibility: visible;} .popup .close { background-color:#4a9ca0 ; width: 80px; height: 80px; line-height: 80px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0;} .popup .close:before { color: #fff; content: ''; background: url('/images/common/menu_on_close.webp') no-repeat center center; width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .popup .close:hover { background-color:#1d2832;} .popup { padding: 3%; width:90%; max-width:1110px; height: 620px; display:flex; flex-wrap:wrap} .popup .img-box {width:40%} .popup .img-box img { width: 90%; } .popup .img-box dl { width: 90%; background: #f6f7f9 url("/images/sub/symbol.png") no-repeat 105% center; padding: 2em; font-family: 'Poppins'; color:#7b8795; } .popup .img-box dl dt { font-size: 26px; font-weight: 700; } .popup .img-box dl dd { font-size: 1.3rem; opacity: 0.6; text-transform:uppercase} .popup .profile-box {width:60%; border-left:1px solid #ebedf3; padding-left:4%} .popup .profile-box dd {margin-bottom:0.3em; font-size: 2.0rem; color:#004487; font-weight: 700; } .popup .profile-box dt { font-size: 4.8rem; color: #222; font-weight: 800; } .popup .profile-box dt span { font-size:0.7em; font-weight: 500; } .popup .profile-box .line {margin:2em 0 2.5em; height:5px; background: url('/images/sub/slsline.png') repeat-x left bottom; } .popup .profile-box #dotList.about2-pop {height: 367px; overflow-y: auto;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar {width: 10px;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar-thumb {background-color: #7b8795; border-radius: 10px; background-clip: padding-box;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar-track {background-color: #e8ebf0 ; border-radius: 10px; box-shadow: inset 0px 0px 5px white;} .popup.scroll {overflow:hidden; } .popup.scroll h3 {font-size:32px; font-weight:300; color:#222; margin:0 auto 0.5em} .popup.scroll .t1 { width:100%; text-align:right; font-size:1.5rem; margin-top:0.5em; opacity:.7} .popup.scroll .in-box {height:400px; overflow-y: auto } .popup.scroll .in-box::-webkit-scrollbar {width: 10px;} .popup.scroll .in-box::-webkit-scrollbar-thumb {background-color: #7b8795; border-radius: 10px; background-clip: padding-box;} .popup.scroll .in-box::-webkit-scrollbar-track {background-color: #e8ebf0 ; border-radius: 10px; box-shadow: inset 0px 0px 5px white;} @media all and (max-width:1280px) { .popup { height: 600px} .popup .profile-box #dotList.about2-pop {height: 385px; } } @media all and (max-width:1024px) { .popup { height:500px} .popup .profile-box #dotList.about2-pop {height: 300px; } .popup.scroll .in-box {height:350px; } } @media all and (max-width:920px) { .popup .close { width: 40px; height: 40px; line-height: 40px; background-size:cover } .popup .close:before {width: 20px; height: 20px; background-size:cover} .popup {padding:20px 30px; height: auto} .popup .img-box {width:100%; text-align:center} .popup .img-box img {width:80%; max-width:300px; margin:0 auto} .popup .img-box dl {display:none} .popup .profile-box {width:100%; border-left:0; padding-left:0; margin-top:2em} .popup .profile-box #dotList.about2-pop {height:17vh; } .popup .profile-box dt { font-size: 3.8rem;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar {width: 8px;} } #dotList li {position:relative; margin-bottom:0.7em; } #dotList li.mt {margin-top:2em} #dotList li:before {content:''; width:3px; height:3px; border-radius:100%; background:#7b8795; position:absolute; left:0; top:0.6em} #dotList li p {padding-left:10px; font-size:1.7rem;} #about4 {display:flex} #about4 #tabWrap {width:370px} #about4 #contWrap {width:calc(100% - 370px)} #about4 #contWrap .swiper .swiper-slide img {width:100%} #about4 #contWrap .amazingslider-nav-1 {margin-top:-100px !important} .about4Swiper .swiper-pagination-bullet {width:10px; height:10px; background:#FFF; opacity:.5; margin:0 2px} .about4Swiper .swiper-pagination-bullet-active { background:#FFF; opacity:1} @media all and (max-width:1599px) { #about4 #tabWrap {width:25%} #about4 #contWrap {width:75%} } @media all and (max-width:1230px) { #about4 {flex-wrap:wrap} #about4 #tabWrap {width:100%; margin-bottom:1em} #about4 #contWrap {width:100%} #about4 #contWrap .amazingslider-nav-1 {margin-top:8px !important} } #about5 {display:flex; gap:30px; flex-wrap:wrap; justify-content:center;} #about5 li { border:1px solid #ebedf3 } @media all and (max-width:1567px) { #about5 { gap:20px} } @media all and (max-width:1280px) { #about5 { gap:10px} } @media all and (max-width:620px) { #about5 li { width:calc(50% - 10px) } #about5 li img { width:100%; } } #about5-1 {display:flex; gap:30px; flex-wrap:wrap; justify-content:center; margin-bottom: 20px; padding: 0 10px;} #about5-1 li { border:1px solid #ebedf3; width: 400px; } #about5-1 li img{width: 100%;} @media all and (max-width:1567px) { #about5-1 { gap:20px} } @media all and (max-width:1280px) { #about5-1 { gap:10px} } @media all and (max-width:620px) { #about5-1 {padding: 0 20px;} #about5-1 li { width:100%;} #about5-1 li img { width:100%; } } #mMap .root_daum_roughmap .wrap_map { height: 580px !important; } #mMapCont .addWrap {font-size:22px; border-bottom:1px solid #e9e9e9; height:120px; display:flex; justify-content:space-between;align-items: stretch;; background:#004487} #mMapCont .addWrap .txt {color:#FFF; font-weight:600; padding-left:1em; } #mMapCont .addWrap li {display:table; height:100%} #mMapCont .addWrap li p {display:table-cell; vertical-align:middle; height:100%} #mMapCont .addWrap .txt i {display:inline-block; width:46px; height:46px; line-height:46px; text-align:center; color:#FFF; margin-right:0.5em; font-size:18px; background:#102d49; border-radius:100%} #mMapCont .addWrap .txt p {padding-right:5em; } #mMapCont .addWrap .box {width:230px; color:#FFF; text-align:center} #mMapCont .addWrap .box.box1 { margin-left: auto; background:#4a9ca0; } #mMapCont .addWrap .box.box2 { background:#439469;} #mMapCont .traffic ul {padding:2em 1em; margin-bottom:1px; border-bottom:1px solid #e9e9e9; display:flex} #mMapCont .traffic ul li.tit { padding-left:0.5em; width:150px; font-size:20px; color:#102d49; font-weight:700; } #mMapCont .traffic ul li.tit i {padding-right:10px} #mMapCont .traffic ul li.cont { width:calc(100% - 150px); font-size:18px; } #mMapCont .traffic ul li.cont dl {padding-bottom:1em; margin-bottom:1em; display:flex; align-items: center; border-bottom:1px dotted #e9e9e9 } #mMapCont .traffic ul li.cont dl:last-child {padding-bottom:0; margin-bottom:0; border-bottom:0 } #mMapCont .traffic ul li.cont dl dt {width:250px; color:#222; line-height:1.8em; font-weight:500} #mMapCont .traffic ul li.cont dl dt span {display:none} #mMapCont .traffic ul li.cont dl dd {width:calc(100% - 250px)} #mMapCont .traffic ul li.cont dl dd span {display:inline-block; padding-right:2em;} @media all and (max-width:1599px) { #mMapCont .addWrap .txt i {width:40px; height:40px; line-height:40px;} #mMapCont .addWrap .txt p {padding-right:1em; } #mMapCont .addWrap .box {width:190px;} } @media all and (max-width:1420px) { #mMapCont .addWrap { flex-wrap:wrap; justify-content:center; height:auto; border-bottom:0; } #mMapCont .addWrap li.txt { padding:1.5em 0; } #mMapCont .addWrap li.box {width:50%; padding:1em 0} } @media all and (max-width:1280px) { #mMap .root_daum_roughmap .wrap_map { height: 500px !important; } #mMapCont .traffic ul li.tit { width:130px} #mMapCont .traffic ul li.cont { width:calc(100% - 130px);} #mMapCont .traffic ul li.cont dl dt {width:220px; } #mMapCont .traffic ul li.cont dl dd {width:calc(100% - 220px)} #mMapCont .traffic ul li.cont dl dd span { padding-right:1em;} } @media all and (max-width:1000px) { #mMap .root_daum_roughmap .wrap_map { height: 450px !important; } #mMapCont .addWrap li.txt {display:flex; flex-wrap:wrap; gap:10px 0; padding:1em } #mMapCont .addWrap li.txt .add {width:100%} } @media all and (max-width:767px) { #mMapCont .traffic ul li.cont dl { flex-wrap:wrap} #mMapCont .traffic ul li.cont dl dt {width:100%; } #mMapCont .traffic ul li.cont dl dt br {display:none} #mMapCont .traffic ul li.cont dl dt span {display:inline-block} #mMapCont .traffic ul li.cont dl dd {width:100%} } @media all and (max-width:580px) { #mMapCont .addWrap {font-size:18px; } #mMapCont .addWrap .txt i {width:30px; height:30px; line-height:30px; font-size:16px; } #mMapCont .traffic ul li.tit { width:100px} #mMapCont .traffic ul li.cont { width:calc(100% - 100px);} } @media all and (max-width:480px) { #mMap .root_daum_roughmap .wrap_map { height: 80vw !important; } #mMapCont .traffic ul {flex-wrap:wrap} #mMapCont .traffic ul li.tit {width:100%; font-size:22px} #mMapCont .traffic ul li.cont { padding:0.5em; width:100%} #mMapCont .traffic ul li.cont dl {padding-bottom:0.7em; margin-bottom:0.7em;} #mMapCont .traffic ul li.cont dl dt {margin-bottom:0.3em} } #halfWrap {display:flex; flex-wrap:wrap} #halfWrap #titWrap {width:300px;} #halfWrap #contWrap {width:calc(100% - 300px)} #halfWrap.about3 #titWrap {width:400px;} #halfWrap.about3 #titWrap h3 {font-size:4.2rem; color:#222; font-weight:800} #halfWrap.about3 #titWrap dl {margin-top:2.5em} #halfWrap.about3 #titWrap dl dt {margin-bottom:0.7em; font-size:2.4rem; color:#004487; font-weight:800; } #halfWrap.about3 #titWrap dl dd {font-size:1.7rem; margin-bottom:0.5em;} #halfWrap.about3 #contWrap {width:calc(100% - 400px)} #halfWrap.about3 #contWrap .imgCont {display:flex} #halfWrap.about3 #contWrap .imgCont li {width:49%} #halfWrap.about3 #contWrap .imgCont.w100 li {width:100%; text-align:center; background:#f0f0f0} #halfWrap.about3 #contWrap .imgCont li img {width:100%; max-width:600px;} #halfWrap.about3 #contWrap h4 {margin:2em 0 1em; font-size:26px; color:#222; font-weight:700} #halfWrap.about3 #contWrap .t1 {font-size:1.7rem; line-height:1.6em; padding-bottom:0.7em; margin-bottom:0.7em; border-bottom:1px dashed #e9e9e9} @media all and (max-width:1499px) { #halfWrap.about3 #titWrap {width:370px;} #halfWrap.about3 #contWrap {width:calc(100% - 370px)} } @media all and (max-width:1024px) { #halfWrap.about3 #titWrap h3 {font-size:5.0rem; } #halfWrap.about3 #titWrap {width:100%; text-align:center; margin-bottom:3em;} #halfWrap.about3 #contWrap {width:100%} #halfWrap.about3 #contWrap h4 {margin:1em 0 1em;} } @media all and (max-width:640px) { #halfWrap.about3 #contWrap .imgCont {flex-wrap:wrap} #halfWrap.about3 #contWrap .imgCont li {width:100%} } #halfWrap.health2 #titWrap .t1 {font-size:2.0rem; color:#004487; margin-bottom:0.6em; font-weight:700;} #halfWrap.health2 #titWrap h3 { font-size:4.0rem; font-weight:300; color:#222; line-height:1.2em} .health2 #contWrap .st1 {margin-top:1em; color:#FF0000} @media all and (max-width:1280px) { #halfWrap.health2 #titWrap {width:270px} #halfWrap.health2 #contWrap {width:calc(100% - 270px)} } @media all and (max-width:1024px) { #halfWrap.health2 #titWrap {width:100%; margin-bottom:2em} #halfWrap.health2 #titWrap h3 br {display:none} #halfWrap.health2 #contWrap {width:100%} } #halfWrap.health2.w2-4 #titWrap {border-top:2px solid #004487; width:460px; padding:3em 0} #halfWrap.health2.w2-4 #titWrap h3 { font-size:3.8rem} #halfWrap.health2.w2-4 #titWrap h3 br {display:none} #halfWrap.health2.w2-4 #titWrap h4 { font-size:3.0rem; color:#222; font-weight:500} #halfWrap.health2.w2-4 #titWrap .st { padding-top:2em; font-size:2.0rem;} #halfWrap.health2.w2-4 #contWrap {border-top:1px solid #dfe8f2; width:calc(100% - 460px); padding:3em 0; padding-left:3em} #halfWrap.health2.w2-4 #titWrap.last, #halfWrap.health2.w2-4 #contWrap.last {border-bottom:1px solid #dfe8f2} @media all and (max-width:1399px) { #halfWrap.health2.w2-4 #titWrap {width:350px; } #halfWrap.health2.w2-4 #contWrap {width:calc(100% - 350px);} } @media all and (max-width:1280px) { #halfWrap.health2.w2-4 #titWrap h3 br {display:block} #halfWrap.health2.w2-4 #titWrap { width:260px; } #halfWrap.health2.w2-4 #contWrap { width:calc(100% - 260px);} } @media all and (max-width:1024px) { #halfWrap.health2.w2-4 #titWrap h3 br {display:none} #halfWrap.health2.w2-4 #titWrap .st { padding-top:0.3em; } #halfWrap.health2.w2-4 #titWrap { margin-bottom:0; width:100%; border-top:0; padding:0} #halfWrap.health2.w2-4 #contWrap { margin:1em 0 5em; width:100%; padding:0; border-top:0; padding:2em; background:#f8fbfe; } #halfWrap.health2.w2-4 #titWrap.last, #halfWrap.health2.w2-4 #contWrap.last {border-bottom:0} } #halfWrap.info3 {padding-top:4em} #halfWrap.info3 #titWrap {border-top:2px solid #004487; width:380px; padding-top:3em} #halfWrap.info3 #titWrap h4 { font-size:32px; color:#222; font-weight:500} #halfWrap.info3 #contWrap {border-top:1px solid #dfe8f2; width:calc(100% - 380px); padding:3em 0 0 3em;} @media all and (max-width:1280px) { #halfWrap.info3 #titWrap { width:340px;} #halfWrap.info3 #contWrap { width:calc(100% - 340px);} } @media all and (max-width:1024px) { #halfWrap.info3 {padding-top:3em} #halfWrap.info3 #titWrap {width:100%; padding-top:2em} #halfWrap.info3 #contWrap { width:100%; padding:2em 0 0 0; border-top:0} } #health2-1 dl {display:flex;} #health2-1 dl dt {border-bottom:1px solid #44698c; width:260px; text-align:center; background:#004487; color:#FFF; font-size:18px; align-content: center; display:flex; justify-content:center; align-items: center; } #health2-1 dl dd {border-bottom:1px solid #e9e9e9; padding:25px 30px; width:calc(100% - 260px); ; font-size:18px } #health2-1 dl:first-child dt {border-top:1px solid #44698c;} #health2-1 dl:first-child dd {border-top:1px solid #e9e9e9;} @media all and (max-width:1499px) { #health2-1 dl dt { width:220px; } #health2-1 dl dd { width:calc(100% - 220px);} } @media all and (max-width:1024px) { #health2-1 dl dt { width:200px; } #health2-1 dl dd { width:calc(100% - 200px); padding:15px 20px; } } @media all and (max-width:767px) { #health2-1 dl dt { width:160px; } #health2-1 dl dd { width:calc(100% - 160px); } } @media all and (max-width:640px) { #health2-1 dl {flex-wrap:wrap;} #health2-1 dl dt { width:100%; padding:15px 10px; border-top:2px solid #004487;border-bottom:1px solid #e0e4e8; background:#f8fbfe; color:#204366; font-weight:600} #health2-1 dl dd { width:100%;border:0; padding:20px} #health2-1 dl:first-child dt {border-top:2px solid #004487} #health2-1 dl:first-child dd {border-top:0;} #health2-1 dl:last-child dd {;border-bottom:1px solid #e0e4e8;} } #circleList {display:flex; flex-wrap:wrap; /* justify-content:center*/;} #circleList li {width:calc(50% - 6px); margin:3px; padding:20px ;border-radius:50px; border:1px solid rgba(74,156,160,0.3); position:relative} #circleList li:before {content:''; width:21px; height:20px; background:url('/images/sub/circlecheck.png')no-repeat left center; position:absolute; left:20px; top:22px; } #circleList li p {padding-left:30px; font-size:19px; color:#4a9ca0; font-weight:500} #circleList.mri3 {justify-content:center;} #circleList.mri3 li {width: auto; margin:5px} @media all and (max-width:1220px) { #circleList li {width:100%; margin:3px 0 ; } } @media all and (max-width:1024px) { #circleList li {width:calc(50% - 6px); margin:3px; padding:15px } #circleList li:before {left:15px; top:17px;} } @media all and (max-width:767px) { #circleList li {width:100%; margin:3px 0 ; } } #circleList.health2-3 {justify-content:center; gap:5px 10px} #circleList.health2-3 li {width:auto; background:#004487; border:0; text-align:left;} #circleList.health2-3 li:before {background:url('/images/sub/circlecheck-w.png')no-repeat left center; } #circleList.health2-3 li p { color:#FFF; font-size:20px} #circleList.health2-3.w3 li {width:25%;} #circleList.official1 {width:100%; max-width:1280px; margin:0 auto} #circleList.official1 li {width:49%; background:#f5f9fb; border:0; text-align:left;} #circleList.official1 li:before {background:url('/images/circlecheck-b.png')no-repeat left center; } #circleList.official1 li p { color:#333; font-size:22px;font-weight:600} #circleList.official1.w3 li {width:calc(33.3333% - 6px) !important; } #circleList.official1.wauto {justify-content:center;} #circleList.official1.wauto li {width:auto} #circleList.official1.bg2 li { background:#004487; } #circleList.official1.bg2 li:before {background:url('/images/sub/circlecheck-w.png')no-repeat left center; } #circleList.official1.bg2 li p {color:#FFF} @media all and (max-width:1024px) { #circleList.official1 li {width:99%; } } @media all and (max-width:976px) { #circleList.official1.w3 li {width:calc(50% - 6px) !important; margin:3px } } @media all and (max-width:580px) { #circleList.official1.w3 li {width:100% !important; margin:3px 0 } } #declaration {display:flex; flex-wrap:wrap; /* justify-content:center*/;} #declaration li {width:calc(100% - 46px); margin:1% 0 ; padding:20px ;border-radius:50px; border:1px solid rgba(74,156,160,0.3); position:relative} #declaration li:before {content:''; width:21px; height:20px; background:url('/images/sub/circlecheck.png')no-repeat left center; position:absolute; left:20px; top:22px; } #declaration li p {padding-left:70px; font-size:19px; color:#4a9ca0; font-weight:500} #declaration.mri3 {justify-content:center;} #declaration.mri3 li {width: auto; margin:5px} @media all and (max-width:1220px) { #declaration li {width:100%; margin:3px 0 ; } } @media all and (max-width:1024px) { #declaration li {width:calc(50% - 6px); margin:3px; padding:15px } #declaration li:before {left:15px; top:17px;} } @media all and (max-width:767px) { #declaration li {width:100%; margin:3px 0 ; } } #declaration.health2-3 {justify-content:center; gap:5px 10px} #declaration.health2-3 li {width:auto; background:#004487; border:0; text-align:left;} #declaration.health2-3 li:before {background:url('/images/sub/circlecheck-w.png')no-repeat left center; } #declaration.health2-3 li p { color:#FFF; font-size:20px} #declaration.health2-3.w3 li {width:25%;} #declaration.official1 {width:100%; max-width:1280px; margin:0 auto;padding:0 3%} #declaration.official1 li {width:100%; background:#fff; border:0; text-align:left;} #declaration.official1 li:before {background:url('/images/circlecheck-b.png')no-repeat left center; } #declaration.official1 li p { color:#333; font-size:24px;font-weight:600} #declaration.official1.w3 li {width:calc(33.3333% - 6px) !important; } #declaration.official1.wauto {justify-content:center;} #declaration.official1.wauto li {width:auto} #declaration.official1.bg2 li { background:#004487; } #declaration.official1.bg2 li:before {background:url('/images/sub/circlecheck-w.png')no-repeat left center; } #declaration.official1.bg2 li p {color:#FFF} @media all and (max-width:1024px) { #declaration.official1 li {width:99%; } } @media all and (max-width:976px) { #declaration.official1.w3 li {width:calc(50% - 6px) !important; margin:3px } } @media all and (max-width:580px) { #declaration.official1.w3 li {width:100% !important; margin:3px 0 } } #info2-Title {font-size:26px; color:#222; font-weight:700; padding-left:0.7em; margin:1em 0; position:relative } #info2-Title:before {content:''; width:7px; height:7px; background:#004487; position:absolute; left:0; top:-5px} .scroll table{min-width: 923px;} .scroll2 table{min-width: 690px;} .tb-style1{width: 100%; border-top: 2px solid #004487; font-size: 16px; text-align: center; } .tb-style1 thead tr th{padding: 15px 10px; background-color: #fafafa; border-right: 1px solid #eee; font-size: 17px; font-weight: 500; border-bottom: 1px solid #eee; color: #212121; } .tb-style1 thead tr th.bg{background-color: #9aaec6; color: #fff;} .tb-style1 thead tr th:last-child{border-right: 0;} .tb-style1 thead tr th.last { border-right: 1px solid #eee} .tb-style1 tbody tr th{background-color: #f5f5f3; color: #000; font-weight: 500;border-bottom: 1px solid #dedede; border-right: 1px solid #eee;} .tb-style1 tbody tr td{padding: 12px 6px; border-bottom: 1px solid #dedede; border-right: 1px solid #eee; word-break: keep-all;} .tb-style1 tbody tr td.bg{background-color: #f6f7fa; color: #212121; font-weight: 500;} .tb-style1 tbody tr td:last-child{border-right: 0;} @media all and (max-width:1024px){ .scroll{overflow-x: scroll;} } @media all and (max-width:810px){ .scroll2{overflow-x: scroll;} } .tb-style2{width: 100%; border-top: 2px solid #004487; font-size: 16px; text-align: center; } .tb-style2 thead tr th{padding: 15px; background-color: #f8fbfe; border-right: 1px solid #e0e4e8; font-weight: 600; border-bottom: 1px solid #e0e4e8; color: #204366; font-size:18px; } .tb-style2 thead tr th.bg{background-color: #9aaec6; color: #fff;} .tb-style2 thead tr th:last-child{border-right: 0; } .tb-style2 thead tr th.last { border-right: 1px solid #e0e4e8} .tb-style2 tbody tr th {color:#222; background:#fbfbfb; border-right: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; font-size:18px; word-break: keep-all;} .tb-style2 tbody tr td{padding:20px; border-bottom: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; font-size:18px; word-break: keep-all;} .tb-style2 tbody tr td.bg{background-color: #f6f7fa; color: #212121; font-weight: 500;} .tb-style2 tbody tr td:last-child{border-right: 0;} .tb-style2 tbody tr td.last { border-right: 1px solid #e3e3e3 ;} .tb-style2 tbody tr th.big{padding: 15px; background-color: #f8fbfe; border-right: 1px solid #e0e4e8; font-weight: 600; border-bottom: 1px solid #e0e4e8; color: #204366; font-size:18px; } .tb-style2 tbody tr th:last-child{border-right: 0;} .tb-style2.bg2 {border-top: 2px solid #4a9ca0; } .tb-style2.bg2 thead tr th{background-color: #f6fafa; color:#428083; border-color:#dfe7e8} @media all and (max-width:1024px){ .tb-style2 thead tr th{padding: 15px 5px; } .tb-style2 tbody tr td{padding:20px 10px; } } @media all and (max-width:640px){ .tb-style2 tbody tr td{padding:20px 2px; font-size:16px;} } @media all and (max-width:450px){ .tb-style2 thead tr th{font-size: 16px; } .tb-style2 tbody tr td{padding:20px 5px; font-size:1.4rem;} .tb-style2 tbody tr th{font-size: 1.4rem;} } .tb-style3{width: 100%; border-top: 2px solid #004487; font-size: 16px; text-align: center; } .tb-style3 thead tr th{padding: 15px; background-color: #204366; border-right: 1px solid #e0e4e8; font-weight: 600; border-bottom: 1px solid #e0e4e8; color: #fff; font-size:18px; } .tb-style3 thead tr th.bg{background-color: #9aaec6; color: #fff;} .tb-style3 thead tr th:last-child{border-right: 0; } .tb-style3 thead tr th.last { border-right: 1px solid #e0e4e8} .tb-style3 tbody tr th {color:#222; background:#fbfbfb; border-right: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; font-size:18px; word-break: keep-all;} .tb-style3 tbody tr td{padding:20px; border-bottom: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; font-size:18px; word-break: keep-all;} .tb-style3 tbody tr td.bg{background-color: #f6f7fa; color: #212121; font-weight: 500;} .tb-style3 tbody tr td:last-child{border-right: 0;} .tb-style3 tbody tr td.last { border-right: 1px solid #e3e3e3 ;} .tb-style3.bg2 {border-top: 2px solid #4a9ca0; } .tb-style3.bg2 thead tr th{background-color: #f6fafa; color:#428083; border-color:#dfe7e8} @media all and (max-width:1024px){ .tb-style3 thead tr th{padding: 15px 5px; } .tb-style3 tbody tr td{padding:20px 10px; } } @media all and (max-width:640px){ .tb-style3 tbody tr td{padding:20px 2px; font-size:16px;} } #info1 {height:550px; display:flex; background:url('/images/sub/info1-bg.png') no-repeat left top; background-size:auto 100%; flex-direction: row-reverse; } #info1 #contWrap {background:#FFF; width:50%; display:flex; justify-content:center; align-items: center; } h3.info1-tit { font-size: 30px; font-weight:600; color:#222} .info1-t1 { margin-top:1em; margin-bottom:3em; font-size: 17px; line-height:1.5em } #info1 #contWrap .info1-t1 br {display:none} #info1 #contWrap .time {display:flex; border-top:1px solid #e9e9e9; margin-top:1.3em; padding-top:1.3em} #info1 #contWrap .time.last { border-bottom:1px solid #e9e9e9; margin-bottom:1.3em; padding-bottom:1.3em} #info1 #contWrap .time .tit {width:155px; font-size:20px; font-weight:700; color:#222 } #info1 #contWrap .time .cont {width:calc(100% - 155px); } #info1 #contWrap .time .cont dl {display:flex; font-size:18px; line-height:1.6em; } #info1 #contWrap .time .cont dl dt { width:80px; } #info1 #contWrap .time .cont dl dd { width:calc(100% - 80px); color:#222; font-weight:500 } /* #info1 #contWrap .time .cont dl dd br {display:none} */ #info1 #contWrap .t2 {padding-left:155px; font-size:16px; } #info1 #contWrap .tel { margin-top:1.5em; font-size:30px; font-weight:800; color:#004487} #info1 #contWrap .tel span {font-size:20px; padding-right:1em; font-weight:700; color:#222;} @media all and (max-width:1599px){ #info1 #contWrap {padding-right:5%; justify-content:right } #info1 #contWrap .time .cont dl dd br {display:block} } @media all and (max-width:1399px){ #info1 {height:500px;} #info1 #contWrap {padding-right:2%;} .info1-t1 { margin-bottom:2em; font-size:16px} #info1 #contWrap .time { margin-top:1.0em; padding-top:1.0em} #info1 #contWrap .time.last { margin-bottom:1.0em; padding-bottom:1.0em} #info1 #contWrap .tel { margin-top:1.0em;} } @media all and (max-width:1280px){ #info1 #contWrap {padding-right:3%;} #info1 #contWrap .info1-t1 br {display:block} } @media all and (max-width:1170px){ #info1 {padding-bottom:10%; height: auto; flex-wrap:wrap; flex-direction: unset; background-size:100% auto; background-color:#f8fafb;} #info1 #contWrap { width:80%; margin: 0 auto; margin-top:45vw; justify-content:center; padding-right:0; padding:5% 0} } @media all and (max-width:870px){ #info1 {padding-bottom:5%;} #info1 #contWrap { width:90%; margin-top:49vw; padding-top:5%} } @media all and (max-width:640px){ #info1 {padding-bottom:0;} #info1 #contWrap {width:100%; padding:5% 3%; background:#f8fafb} #info1 #contWrap .time .tit {width:130px;} #info1 #contWrap .time .cont {width:calc(100% - 130px); } #info1 #contWrap .time .cont dl dt { width:60px; } #info1 #contWrap .time .cont dl dd { width:calc(100% - 60px); } #info1 #contWrap .t2 {padding-left:130px} } @media all and (max-width:480px){ #info1 #contWrap { padding:8% 0} h3.info1-tit { font-size: 3.5rem} #info1 #contWrap .time .tit {width:26vw; font-size:2.0rem} #info1 #contWrap .time .cont {width:calc(100% - 26vw); } #info1 #contWrap .time .cont dl dt { width:12vw; } #info1 #contWrap .time .cont dl dd { width:calc(100% - 12vw); } #info1 #contWrap .t2 {padding-left:26vw} } #info1-2 .line { height:5px; background: url('/images/sub/slsline.png') repeat-x left bottom; } #info1-2 #contWrap {padding:4em 0; display:flex; justify-content: center; } #info1-2 #contWrap li {display:flex; align-items: start;width:25%;border-right:1px solid #e9e9e9} #info1-2 #contWrap li img {max-width:5vw} #info1-2 #contWrap li:nth-child(1) {padding:0 1%; border-right:1px solid #e9e9e9} #info1-2 #contWrap li:nth-child(2) {padding:0 1%; border-right:1px solid #e9e9e9} #info1-2 #contWrap li:nth-child(3) {padding:0 1%; border-right:1px solid #e9e9e9} #info1-2 #contWrap li:last-child {padding:0 1%;border-right:0px solid #e9e9e9;} #info1-2 #contWrap li dl {padding-left:2em; } #info1-2 #contWrap li dl dt {font-size:26px; color:#222; font-weight:700} #info1-2 #contWrap li dl dd {margin:0.5em 0 2em;font-size:16px;} #info1-2 #contWrap li #info1-2-btn {display:block; padding:0 1.5em; line-height:50px; border-radius:5px; background:#004487 url('/images/sub/info1-arrow.png') no-repeat 90% center; } #info1-2 #contWrap li #info1-2-btn.bg1 {background:#4a9ca0} #info1-2 #contWrap li #info1-2-btn p {color:#FFF; font-size:18px; font-weight:600} #info1-2 #contWrap li #info1-2-btn p.tel {font-size:2.4rem;} #info1-2 #contWrap li #info1-2-btn:hover {background-color:#4a9ca0} @media all and (max-width:1499px){ #info1-2 #contWrap {padding:3em 0; } #info1-2 #contWrap li img { width:100px} #info1-2 #contWrap li dl {padding-left:1em; } #info1-2 #contWrap li dl dd {margin:0.5em 0 1em;} } @media all and (max-width:1280px){ #info1-2 #contWrap li { flex-wrap:wrap;justify-content:center; } #info1-2 #contWrap li img {margin-bottom:10px; width:40%; max-width:100px} #info1-2 #contWrap li dl {text-align:center; width:100%; padding-left:0} #info1-2 #contWrap li dl dd {margin:0.5em 0 2em;} #info1-2 #contWrap li #info1-2-btn {width:80%; max-width:215px; text-align:left; margin:0 auto} } @media all and (max-width:1024px){ #info1-2 #contWrap {justify-content:space-between;} #info1-2 #contWrap li:nth-child(2) {margin:0; padding:0; border-left:0; border-right:0} #info1-2 #contWrap li #info1-2-btn p.tel {font-size:22px; text-align:center;} #info1-2 #contWrap li #info1-2-btn.bg1 {padding:0} } @media all and (max-width:767px){ #info1-2 #contWrap {flex-wrap:wrap} #info1-2 #contWrap li {width:100%} #info1-2 #contWrap li:nth-child(2) {margin:2em 0; padding:2em 0; border:1px solid #e9e9e9; border-left:0; border-right:0} #info1-2 #contWrap li dl {padding-left:8%; text-align:left; width:60%; max-width:280px } #info1-2 #contWrap li #info1-2-btn {width:100%; margin:0} } @media all and (max-width:480px){ #info1-2 #contWrap li img {max-width:18vw} #info1-2 #contWrap li dl dd {margin:0.5em 0 1.3em;} #info1-2 #contWrap li #info1-2-btn {line-height:12vw; } } #topheadWrap {height:29vw; display:flex; flex-wrap:wrap; justify-content:right; background-size:50% auto; background-repeat:no-repeat; background-position:left top} #topheadWrap.health2 {background-image:url('/images/sub/health2-top.png'); } #topheadWrap.health2-2 {background-image:url('/images/sub/health2-2-top.png'); } #topheadWrap.health2-3 {background-image:url('/images/sub/health2-3-top.png'); } #topheadWrap.health2-4 {background-image:url('/images/sub/health2-4-top.jpg'); } #topheadWrap.health2-5 {background-image:url('/images/sub/health2-5-top.png'); } #topheadWrap.health2-6 {background-image:url('/images/sub/health2-6-top.png'); } #topheadWrap.intervention1 {background-image:url('/images/sub/intervention1-top.png'); } #topheadWrap.intervention2 {background-image:url('/images/sub/intervention2-top.png'); } #topheadWrap.intervention3 {background-image:url('/images/sub/intervention3-top.png'); } #topheadWrap.intervention4 {background-image:url('/images/sub/intervention4-top.png'); } #topheadWrap.intervention5 {background-image:url('/images/sub/intervention5-top_240524.jpg'); } #topheadWrap.intervention6 {background-image:url('/images/sub/intervention6-top.png'); } #topheadWrap.intervention7 {background-image:url('/images/sub/intervention7-top.png'); } #topheadWrap.official1 {background-image:url('/images/sub/official1-top.png'); } #topheadWrap.official2 {background-image:url('/images/sub/official2-top.png'); } #topheadWrap.official3 {background-image:url('/images/sub/official3-top.png'); } #topheadWrap.official4 {background-image:url('/images/sub/official4-top.png'); } #topheadWrap.wave1 {background-image:url('/images/sub/wave1-top.png'); } #topheadWrap.wave2 {background-image:url('/images/sub/wave2-top.png'); } #topheadWrap.mri1 {background-image:url('/images/sub/mri1-top.png'); } #topheadWrap.mri2 {background-image:url('/images/sub/mri2-top.png'); } #topheadWrap.mri3 {background-image:url('/images/sub/mri3-top.png'); } #topheadWrap.mri4 {background-image:url('/images/sub/mri4-top.png'); } #topheadWrap.mri5 {background-image:url('/images/sub/mri5-top.png'); } #topheadWrap.ct1 {background-image:url('/images/sub/ct1-top.jpg'); } #topheadWrap.ct2 {background-image:url('/images/sub/ct2-top.png'); } #topheadWrap.ct3 {background-image:url('/images/sub/ct3-top.png'); } #topheadWrap.ct4 {background-image:url('/images/sub/ct4-top.png'); } #topheadWrap.ct5 {background-image:url('/images/sub/ct5-top.png'); } #topheadWrap.ct6 {background-image:url('/images/sub/ct6-top.png'); } #topheadWrap #contWrap {width:50%; background:url('/images/sub/tophead-bg.png') no-repeat center; background-size:cover; display:flex; justify-content:center; align-items: center; } #topheadWrap #contWrap .cont {width:80%; max-width:640px; color:#FFF} #topheadWrap #contWrap .t2 {margin-bottom:1.5em ; font-size:2.4rem; ; font-weight:600} #topheadWrap #contWrap h3 {font-size:5.0rem; font-weight:800} #topheadWrap #contWrap .eng { margin:0.8em 0 2.5em; font-size:1.5rem; opacity:.2; font-weight:800; font-family:'Montserrat'; letter-spacing:0.05em} #topheadWrap #contWrap p.t1 { font-size:18px; line-height:1.8em} @media all and (max-width:1280px){ #topheadWrap {height:36vw; background-size:auto 100%} #topheadWrap #contWrap p.t1 { line-height:1.6em} } @media all and (max-width:1024px){ #topheadWrap {width:100%; padding-top:50vw; height:auto; background-size:100% auto;} #topheadWrap #contWrap {width:90%; margin:0 auto} #topheadWrap #contWrap .cont {max-width:100%; padding:8% 0; } #topheadWrap.official4 {margin-bottom:60px} } @media all and (max-width:767px){ #topheadWrap { padding-top:60vw; } #topheadWrap #contWrap {width:100%;} #topheadWrap #contWrap .cont{ width:100%; padding:8%} #topheadWrap #contWrap .t2 {margin-bottom:1.0em; font-size:22px; } #topheadWrap #contWrap h3 {font-size:4.5rem;} #topheadWrap #contWrap .eng { margin:0.5em 0 2em;} } #health_link {font-size:1.5rem; border-radius:5px; background:#888; color:#FFF; padding:0.5em 1.0em; margin-top:0.5em; display:inline-block } #health_link.health2-3 {margin-left:1em; margin-top:0} #health_link:hover { background:#004487} @media all and (max-width:480px){ #health_link.health2-3 {margin-left:0.5em;} } #health1 {display:flex; flex-wrap:wrap} #health1 .imgwrap {width:50%} #health1 .imgwrap img {width:100%} #health1 .contwrap {padding:0 8%; width:50%; background:#f9f9f9; display:flex; justify-content:center; align-items: center; } #health1 .contwrap h3 {font-size:5.0rem; color:#222; font-weight:800} #health1 .contwrap .t1 {margin-top:1em; font-size:2.0rem; line-height:1.6em} @media all and (max-width:1499px){ #health1 .contwrap {padding:0 4%;} } @media all and (max-width:1212px){ #health1 .contwrap h3 {font-size:4.5rem;} #health1 .contwrap .t1 { font-size:19px; line-height:1.4em} } @media all and (max-width:1024px){ #health1 .imgwrap {width:100%} #health1 .contwrap {padding:8% 5%; width:100%; text-align:center} #health1 .contwrap h3 {font-size:5.0rem;} #health1 .contwrap .t1 {font-size:2.0rem; } } @media all and (max-width:480px){ #health1 .contwrap h3 {font-size:4.5rem; line-height:1.1em} #health1 .contwrap .t1 {font-size:19px; } } #health1-2 {display:flex; justify-content:center; } #health1-2 ul {width:360px; height:360px; border-radius:100%; text-align:center; color:#FFF; margin:0 -20px; display:flex; justify-content:center; align-items: center;} #health1-2 ul li .t1 { font-size:22px; font-weight:600} #health1-2 ul li .t2 { font-size:32px; font-weight:700;} #health1-2 ul li .line {width:1px; height:30px; background:rgba(255,255,255,0.1); margin:10px auto} #health1-2 ul li h3 {display:block; font-size:32px; color:#FFFF00; font-weight:700; font-style:italic} #health1-2 ul.bg1 {background:rgba(38,124,209,0.95)} #health1-2 ul.bg2 {background:rgba(0,134,158,0.95)} #health1-2 ul.bg3 {background:rgba(10,74,152,0.95)} #health1-2 ul.bg4 {background:rgba(65,182,143,0.95)} #health1-2 ul.bg5 {background:rgba(32,157,188,0.95)} #health1-2.intervention4 ul {width:280px; height:280px; } #health1-2.intervention4 ul li {padding:0 20%} #health1-2.intervention4 ul li .t2 { font-size:26px; } #health1-2.intervention3 {flex-wrap:wrap} #health1-2.intervention3 ul {width:250px; height:250px; margin:-10px -10px; } #health1-2.intervention3 ul li {padding-bottom:10%} #health1-2.intervention3 ul li .t1 { font-size:36px;line-height:150%;} #health1-2.intervention3 ul li .t1 span { font-size:19px; font-weight: 400;} #health1-2.intervention3 ul li .t2 { font-size:1.3rem;line-height:120% } #health1-2.intervention3 ul li .t2 span { font-size:1.1rem; font-weight: 400;} #health1-2.intervention3 ul li .t3 { font-size:1.5rem; font-weight:700; margin-top:0.3em; } #health1-2.mri2 {flex-wrap:wrap} #health1-2.mri2 ul {width:230px; height:230px; margin:-10px -10px; } #health1-2.mri2 ul li .t2 { font-size:26px; } #health1-2.mri2 ul li .t3 { font-size:32px; font-weight:700; margin-top:0.3em; } @media all and (max-width:1499px){ #health1-2.mri2 ul {width:200px; height:200px; } } @media all and (max-width:1280px){ #health1-2.intervention4 ul {width:230px; height:230px; } } @media all and (max-width:1140px){ #health1-2 ul {width:30vw; height:30vw; margin:0 -1.5vw; } #health1-2 ul li .line { height:3vw;} #health1-2 ul li h3 { font-size:3vw} } @media all and (max-width:976px){ #health1-2 ul {width:30vw; height:30vw; margin:0 -1.5vw; } #health1-2 ul li .t1 { font-size:18px;} #health1-2 ul li .t2 { font-size:2.8rem;} #health1-2 ul li h3 { font-size:3vw} #health1-2.intervention4 ul {width:24vw; height:24vw; } } @media all and (max-width:767px){ #health1-2.intervention3 ul {width:30vw; height:30vw; } } @media all and (max-width:720px){ #health1-2 {flex-wrap:wrap; } #health1-2 ul {width:43vw; height:43vw; } #health1-2 ul:last-child {margin-top:-7.5vw} #health1-2 ul li .t1 { font-size:2.8vw;} #health1-2 ul li .t2 { font-size:3.5vw;} #health1-2 ul li .line { height:4vw; margin:5px auto} #health1-2 ul li h3 { font-size:4.0vw} #health1-2.intervention4 ul {width:230px; height:230px; } #health1-2.intervention4 ul:nth-child(3), #health1-2.intervention4 ul:nth-child(4) {margin-top:-20px} #health1-2.intervention3 ul { margin:-20px -10px; } #health1-2.mri2 ul {width:180px; height:180px; } #health1-2.mri2 ul { margin:-20px -8px; } } @media all and (max-width:510px){ #health1-2.intervention4 ul {width:55vw; height:55vw; } #health1-2.intervention4 ul:nth-child(3), #health1-2.intervention4 ul:nth-child(4) {margin-top:-4vw} #health1-2.intervention3 ul {width:55vw; height:55vw; } } @media all and (max-width:480px){ #health1-2 ul li .t1 { font-size:3.2vw;} #health1-2 ul li .t2 { font-size:4.2vw;} #health1-2 ul li h3 { font-size:4.8vw} #health1-2.mri2 ul {width:30vw; height:30vw; margin: -10px -5px } #health1-2.mri2 ul li .t3 { font-size:2.8rem; margin-top:0} } #health1-2_ {display:flex; justify-content:center; width: 1000px; margin: 0 auto; flex-wrap:wrap; position: relative;} #health1-2_ h1{position: absolute; top: 46%; left: 50%; transform:translate(-50%, -50%);z-index: 999; text-align: center; color: #fff; font-size: 4rem; line-height: 4rem;} #health1-2_ h1 span{font-size: 3.5rem; font-family: 'GmarketSansLight';} #health1-2_ h1 span.ok{font-family: 'GmarketSansBold'; font-size: 5rem; line-height: 6rem;} #health1-2_ ul {width:580px; height:580px; border-radius:100%; text-align:center; color:#FFF; margin:0 -110px; display:flex; justify-content:center; align-items: center; position: relative;} #health1-2_ ul:last-child {margin-top:-30%} #health1-2_ ul li h2 {font-size:3.5rem; color:#FFF; font-weight:800;line-height: 4rem;} #health1-2_ ul li h2 span{font-family: 'GmarketSansLight';margin-top: 5px; display:inline-block; font-size: 3rem;} #health1-2_ ul.bg1_ li {position: absolute; left: 13%;top: 25%;} #health1-2_ ul.bg2_ li {position: absolute; right: 13%;top: 25%;} #health1-2_ ul.bg3_ li {position: absolute; left: 50%; bottom: 15%; transform:translatex(-50%); width: 100%;} #health1-2_ ul.bg1_ {background:#00a8b0} #health1-2_ ul.bg2_ {background:#003f7a; mix-blend-mode: multiply;} #health1-2_ ul.bg3_ {background:#3b8cd5; mix-blend-mode: multiply;} @media all and (max-width:1020px){ #health1-2_ {width: 95%;} #health1-2_ ul {width:58vw; height:58vw; margin: 0 -12vw;} #health1-2_ h1{font-size: 4vw; line-height: 4.5vw;} #health1-2_ h1 span{font-size: 3.5vw;} #health1-2_ h1 span.ok{font-size: 5vw; line-height: 6vw;} #health1-2_ ul li h2 {font-size:3.5vw; line-height: 4vw;} #health1-2_ ul li h2 span{font-size: 3vw;} } #health1-3 {} #health1-3 .boxWrap {padding:20px; display:flex; align-items: center; border:10px solid #f6fafd; margin-bottom:30px; position:relative} #health1-3 .boxWrap img { width:45%; } #health1-3 .num { font-size:130px; font-weight:800; color:#f6fafd; font-family:'Oswald'; text-align:center; position:absolute; right:-0.1em; top:-0.1em; } #health1-3 .txt {padding:0 5%} #health1-3 .txt h3 {margin-bottom:1em; font-size:3.0rem; color:#222; font-weight:800;} #dotList.health1 li { margin-bottom:0.7em} #dotList.health1 li:last-child {margin-bottom:0} #dotList.health1 li:before {top:0.7em} #dotList.health1 li p {font-size:18px; line-height:1.4em} @media all and (max-width:1024px){ #health1-3 .boxWrap {padding:10px; margin-bottom:20px;} #health1-3 .num { font-size:100px; } } @media all and (max-width:976px){ #health1-3 .boxWrap { flex-wrap:wrap; } #health1-3 .boxWrap img { width:100%; } #health1-3 .txt {width:100%; padding:3em 10px 2em } #health1-3 .num {top:unset; bottom: -0.1em} } @media all and (max-width:480px){ #health1-3 .txt h3 { font-size:26px; } } #halfImg55 ul {display:flex; align-items: center; margin-bottom:5%; } #halfImg55 ul #imgWrap {width:55%; } #halfImg55 ul #contWrap {width:45%; padding:3%; padding-left:5%; background:#FFF} #halfImg55 ul #contWrap dl dt {margin-bottom:1em; font-size:2.8rem; color:#222; font-weight:700} #halfImg55 ul #contWrap dl dd {margin-bottom:0.7em; font-size:1.7rem; line-height:1.6em;} #halfImg55 ul #contWrap .lt1 {margin-top:1em; font-size:18px; font-weight:700} #halfImg55 ul:nth-child(even) #imgWrap {order:2} #halfImg55 ul:nth-child(even) #contWrap {order:1; padding-left:0; padding-right:5% } @media all and (max-width:1280px){ #halfImg55 ul #imgWrap {width:50%;} #halfImg55 ul #contWrap {width:50%; } } @media all and (max-width:1080px){ #halfImg55 ul {flex-wrap:wrap} #halfImg55 ul #imgWrap {width:100%;} #halfImg55 ul #imgWrap img {width:100%} #halfImg55 ul #contWrap {width:100%; padding:5% 0 } #halfImg55 ul:nth-child(even) #imgWrap {order:1} #halfImg55 ul:nth-child(even) #contWrap {order:2;; padding:5% 0} } #numList {margin-top:1.5em} #numList li {position:relative; counter-increment: number; position:relative; margin-bottom:0.7em ;} #numList li:before {content: counter(number, decimal-leading); width:22px; line-height:22px; border-radius:100%; font-size:1.4rem; color:#FFF; background:#555; position:absolute; left:0; top:0; text-align:center; font-family:'Osward'; font-weight:700} #numList li p {padding-left:30px; font-size:18px; } #numList2 {position:relative} #numList2 li {margin:10px 0; padding-bottom:10px; border-bottom:1px dashed #e4eaf1; counter-increment: number; display:flex; align-items: center;} #numList2 li:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0} #numList2 li:before {content: counter(number); font-size:24px; font-family:'Oswald'; font-weight:700; width:60px; height:60px; line-height:60px; text-align:center; color:#FFF; display:inline-block ;background:#094d93 } #numList2 li p {width:calc(100% - 60px); padding-left:30px; font-size:18px; line-height:1.4em; word-break: keep-all;} @media all and (max-width:976px) { #numList2 li:before { width:50px; height:50px; line-height:50px; } #numList2 li p {width:calc(100% - 50px); padding-left:20px; } } #imgContWrap {display:flex; flex-wrap:wrap; justify-content:center; } #imgContWrap li {text-align:center; border:10px solid #e9eff3 } #imgContWrap.w2 {gap:30px} #imgContWrap.w2 li {width:480px;} #imgContWrap.w2 li.img100{width: 100%;} #imgContWrap.w2 li .img{width: 100%; display: flex;flex-wrap: wrap;} #imgContWrap.w2 li .img img{width: calc(100%/4);} #imgContWrap.w3 {max-width:1200px; gap:30px; margin:0 auto} #imgContWrap.w3 li {width:380px;} #imgContWrap.w30 li {width:31%; margin:1%} #imgContWrap.w4 li {width:24%; margin: 0.5%} #imgContWrap li img {width:100%} #imgContWrap li dl dt { padding:0.7em 0; font-size:22px; background:#094d93; color:#FFF; font-weight:600 } #imgContWrap li dl dt.bg2 {background:#555;} #imgContWrap li dl dd {padding:2em; font-size:18px; line-height:1.6em} #imgContWrap.w50 {width:100%; max-width:1280px; margin:0 auto} #imgContWrap.w50 li {width:48%; margin:1%;} @media all and (max-width:1350px){ #imgContWrap.w3 {width:100%; gap:0} #imgContWrap.w3 li {width:31.3333%; margin:1%} #imgContWrap.w30 li {width:32%; margin:0.5%} #imgContWrap.w30 li dl dd {padding:1em;} } @media all and (max-width:1120px){ #imgContWrap.w2 li {width:calc(50% - 30px);} #imgContWrap.w2 li dl dd {padding:1.5em; } } @media all and (max-width:1024px){ #imgContWrap.w50 {max-width:748px; margin:0 auto} #imgContWrap.w50 li {width:100%; margin:1% 0;} #imgContWrap.w4 li {width:49%; } } @media all and (max-width:976px){ #imgContWrap.w2 {gap:15px} #imgContWrap li {border-width:7px} #imgContWrap.w2 li {width:calc(50% - 15px);} #imgContWrap.w30 li {width:100%; max-width:700px; margin:0.5% auto} #imgContWrap.w30 li dl dd {padding:1.5em; } #imgContWrap.w2 li .img img{width: calc(100%/2);} } @media all and (max-width:680px){ #imgContWrap.w2 {gap:15px 0} #imgContWrap.w2 li {width:100%;} #imgContWrap.w3 li {width:49%; margin:0.5%} } #official2 { display:flex;align-items: center; padding:0.8em 0; } #official2 dt {width:150px; text-align:center; font-size:2.0rem; border-radius:30px; color:#FFF; padding:0.5em 0} #official2 dt.bg1 {background:#094d93 } #official2 dt.bg2 {background:#4a9ca0 } #official2 dd {width:calc(100% - 150px); margin-left:1em; font-size:18px; } #official2 dd span {display:inline-block; padding-right:1.5em; } @media all and (max-width:767px){ #official2 dt {width:130px} #official2 dd {width:calc(100% - 130px);} #official2 dd span { padding-right:1em; } } @media all and (max-width:580px){ #official2 {flex-wrap:wrap} #official2 dd {width:100%; margin-left:0; margin-top:0.5em;} } @media all and (max-width:480px){ #official2 dt {width:28vw} } #official3-img1 {width:90%; max-width:580px; margin:3em auto 0; display:block} @media all and (max-width:1024px){ #official3-img1 {padding-bottom:60px } } #halfImg.ct1 {max-width:1280px; margin:0 auto} #halfImg ul li {padding:3em 0; display:flex; align-items: center; border-top:6px solid #f1f9fd; } #halfImg ul li:last-child {border-bottom:6px solid #f1f9fd } #halfImg ul li .imgWrap {width:500px} #halfImg ul li .imgWrap img {width:100%; max-width:500px} #halfImg ul li .contWrap {width:calc(100% - 500px); padding-left:5%} #halfImg ul li .contWrap dl {margin-bottom:2.5em} #halfImg ul li .contWrap dl dt { font-size:2.8rem; color:#094d93; font-weight:800; } #halfImg ul li .contWrap dl dd { padding-top:1em; font-size:18px; line-height:1.6em;} #halfImg ul li:nth-child(odd) .imgWrap {order:2} #halfImg ul li:nth-child(odd) .contWrap {order:1; padding-right:5%; padding-left:0} #bdList h4 {font-size:2.4rem; color:#4a9ca0; font-weight:700; margin-bottom:0.5em} #bdList ul {display:flex; align-items: center; gap:5px; flex-wrap:wrap} #bdList ul li { font-size:18px; padding:1em 1.5em; border-radius:60px; color:#4a9ca0; background:#f5fbfe; border:0; line-height:1.0em; font-weight:600 } #bdList ul li:last-child {border:0;} @media all and (max-width:1280px){ #halfImg ul li .imgWrap {width:380px} #halfImg ul li .contWrap {width:calc(100% - 380px); } } @media all and (max-width:976px){ #halfImg ul li {flex-wrap:wrap} #halfImg ul li .imgWrap {width:100%; text-align:Center} #halfImg ul li .contWrap {width:100%; padding-left:0; margin-top:2em; } #halfImg ul li:nth-child(odd) .imgWrap {order:1} #halfImg ul li:nth-child(odd) .contWrap {order:2; padding-right:0;} } #intervention3 { background:#f8f9fb } #intervention3 .in-box {width:90%; max-width:1200px; margin:0 auto; padding:5% 0; display:flex; align-items: center; } #intervention3 .img {position:relative} #intervention3 .img:before {content:''; width:200px; height:320px; background:#094d93 ;position:absolute; left:-10px; top:-10px; z-index:1} #intervention3 .img:after {content:''; width:180px; height:180px; background:#4a9ca0 ;position:absolute; right:-10px; bottom:-10px; z-index:1} #intervention3 .img img {position:relative; z-index:3} #intervention3 .cont {padding-left:10%} #intervention3 h3 { font-size:32px; font-weight:800} #intervention3 .t2 { margin:1.3em 0 0.7em; font-size:22px; font-weight:700; color:#222; line-height:1.4em;} #intervention3 .t1 { font-size:1.7rem; line-height:1.6em} @media all and (max-width:1090px){ #intervention3 .img img {width:250px;} #intervention3 .cont {padding-left:5%} } @media all and (max-width:810px){ #intervention3 .in-box {flex-wrap:wrap} #intervention3 .img {width:100%; text-align:center} #intervention3 .img img {width:100%; max-width:300px} #intervention3 .cont {padding-left:0; margin-top:2em; text-align:center } } #dl-table { display:flex; flex-wrap:wrap; } #dl-table dl {width:49%; margin:0.5%; display:flex; align-content: center; min-height:90px ; background:#f5f9fb; } #dl-table dl dt {width:20%; background:#094d93; color:#FFF; text-align:center; font-size:22px; font-weight:700} #dl-table dl dd {width:80%; background:#f5f9fb; padding:1em; font-size:18px; line-height:1.4em; color:#222} #dl-table dl dt, #dl-table dl dd {display:table} #dl-table dl dt p, #dl-table dl dd p {display:table-cell; vertical-align:middle} #dl-table.ct2 {width:100%; max-width:1400px; margin:0 auto} #dl-table.ct2 dl {width:calc(50% - 10px); margin:5px} #dl-table.ct2 dl dt {width:135px;} #dl-table.ct2 dl dd {width:calc(100% - 135px); } #dl-table.ct2 dl dd p span {display:inline-block; margin:2px 10px } @media all and (max-width:1280px){ #dl-table dl {width:100%; margin:0.5% 0 } #dl-table.ct2 dl dt {width:95px;} #dl-table.ct2 dl dd {width:calc(100% - 95px); } } @media all and (max-width:976px){ #dl-table.ct2 dl {flex-wrap:wrap; align-content: start;} #dl-table.ct2 dl dt {width:100%; padding:0.5em 0} #dl-table.ct2 dl dd {width:100% } } @media all and (max-width:620px){ #dl-table dl dt {width:100px;} #dl-table dl dd {width:calc(100% - 100px); } #dl-table.ct2 dl {width:100%; margin:5px 0} } @media all and (max-width:480px){ #dl-table dl dt {width:22vw;} #dl-table dl dd {width:calc(100% - 22vw); } } #intervention1 {background:url('/images/sub/intervention1-bg1.webp') no-repeat center bottom; background-size:cover} #intervention1 #contWrap {padding:9vw 0; text-align:center; color:#FFF; position:relative} #intervention1 #contWrap:before {content:'SM RADIOLOGY CLINIC'; font-size:9.0rem; font-family:'Montserrat'; font-weight:900; position:absolute; left:0; bottom:-25px; letter-spacing:0.28em; opacity:.1 } #intervention1 #contWrap .eng {font-size:16px; opacity:.3; font-family:'Montserrat'; font-weight:700; text-transform:uppercase; letter-spacing:0.5em; } #intervention1 #contWrap h3 {margin:1.3em 0 0.5em; font-size:7.0rem; font-family: 'NEXON Lv1 Gothic OTF Bold'; } #intervention1 #contWrap .t1 {font-size:2.4rem; font-weight:600; line-height:1.6em} #intervention1 #contWrap .line {width:1px; height:80px; background:#FFF; opacity:.3; margin:30px auto} #intervention1 #contWrap h4 {font-size:5.0rem; font-weight:300} #intervention1 #contWrap h4 .point {color:#5ad9df; font-weight:700} #intervention1 #contWrap br {display:none} #intervention1 #contWrap br.br-block {display:block} @media all and (max-width:1599px){ #intervention1 #contWrap:before { font-size:5vw; bottom:-1.5vw;} #intervention1 #contWrap h4 {font-size:4.5rem; } } @media all and (max-width:1180px){ #intervention1 #contWrap .line { height:5vw;} #intervention1 #contWrap h4 { width:100%; max-width:810px; margin:0 auto} } @media all and (max-width:976px){ #intervention1 #contWrap:before { display:none} #intervention1 #contWrap h3 {margin:1.0em 0 0.3em; font-size:6.0rem;} #intervention1 #contWrap .t1 {font-size:22px;} #intervention1 #contWrap h4 {font-size:4.0rem; max-width:690px; } } @media all and (max-width:767px){ #intervention1 {background-position: right 30% bottom} #intervention1 #contWrap {padding:15vw 0;} #intervention1 #contWrap br {display:block} #intervention1 #contWrap .line {margin:20px auto} } @media all and (max-width:480px){ #intervention1 #contWrap br.br-block {display:none} #intervention1 #contWrap h3 {font-size:5.0rem;} #intervention1 #contWrap .t1 {font-size:2.0rem;} #intervention1 #contWrap h4 {font-size:3.0rem; } } #intervention-Title {} #intervention-Title h3 {font-size:6.0rem; font-weight:300; color:#222; line-height:1.2em } #intervention-Title .lt1 {margin:2em 0 1em; font-size:2.4rem; font-weight:700; line-height:1.6em; color:#4a9ca0} #intervention-Title .t1 {font-size:18px; line-height:1.8em} #intervention-Title span.big {font-size:8rem; line-height:9.5rem} .br640{display: none;} @media all and (max-width:976px){ #intervention-Title h3 {font-size:5.5rem;} #intervention-Title .lt1 { font-size:22px; line-height:1.4em } #intervention-Title .t1 { line-height:1.4em} #intervention-Title span.big {font-size:7rem; line-height:8.5rem} } @media all and (max-width:640px){ .br640{display: block;} } @media all and (max-width:480px){ #intervention-Title h3 {font-size:4.0rem; line-height:1.4em } #intervention-Title .lt1 { font-size:2.0rem; } #intervention-Title .t1 { font-size:1.7rem; line-height:1.4em} #intervention-Title span.big {font-size:6rem; line-height:7.5rem} } #intervention1-2 { background:url('/images/sub/intervention1-bg2.webp') no-repeat center top; background-size:100% auto;} #intervention1-2 img {display:block; margin:0 auto; padding-top:80px } @media all and (max-width:1699px){ #intervention1-2 {background-position:left top; background-size:cover} } @media all and (max-width:976px){ #intervention1-2 { background-size:auto 80%} } @media all and (max-width:767px){ #intervention1-2 img { width:40%; padding-top:10vw } } #intervention-Top {position:relative; } #intervention-Top:before {content:''; width:100%;background:#f7f8fa; position:absolute; left:0; bottom:0; } #intervention-Top .inner{ display:flex; flex-wrap:wrap;} #intervention-Top img {width:50%} #intervention-Top #contWrap {display:flex; flex-wrap:wrap; width:100%; margin:80px 0} #intervention-Top #contWrap #intervention-Title {width:50%} #intervention-Top #contWrap #circleNum {width:50%} @media all and (max-width:1499px){ #intervention-Top #contWrap #intervention-Title {width:670px} #intervention-Top #contWrap #circleNum {width:calc(100% - 670px)} } @media all and (max-width:1280px){ #intervention-Top:before { height:90%; } #intervention-Top #contWrap #intervention-Title {width:100%; text-align:center} #intervention-Top #contWrap #intervention-Title .t1 br {display:none} #intervention-Top #contWrap #circleNum {width:100%; margin-top:3em;} } @media all and (max-width:640px){ #intervention-Top img {width:100%} #intervention-Top #contWrap #intervention-Title .t1 br {display:block} } @media all and (max-width:480px){ #intervention-Top #contWrap { margin:13vw 0} } #circleNum li {position:relative; counter-increment: number; height:80px; display:flex; border-bottom:1px dotted #d9dee8} #circleNum li:before {content: counter(number, decimal-leading-zero); font-size:2.0rem; width:60px; height:60px; line-height:60px; position:absolute; left:0; top:10px; font-family:'Oswald'; color:#FFF; background:#004387; border-radius:100%; font-weight:700; text-align:center} #circleNum li p {padding-left:80px;align-content: center; font-size:2.0rem; color:#222; font-weight:500; display:flex; align-items: center; } @media all and (max-width:1310px){ #circleNum li { height:70px; } #circleNum li:before { width:50px; height:50px; line-height:50px; } #circleNum li p {padding-left:60px} } @media all and (max-width:1280px){ #circleNum {display:flex; flex-wrap:wrap} #circleNum li { width:49%; margin:0.5% } #circleNum li:before { width:50px; height:50px; line-height:50px; } #circleNum li p {padding-left:60px} } @media all and (max-width:640px){ #circleNum li { width:100%; margin:0.5% 0 } } @media all and (max-width:480px){ #circleNum li { height:15vw; } #circleNum li:before { width:10vw; height:10vw; line-height:10vw } #circleNum li p {padding-left:12vw} } #intervention-Step ul {display:flex; margin:7em 0} #intervention-Step ul .txtWrap {width:40%; padding-right:5%} #intervention-Step ul .txtWrap .num {font-size:18px; color:#094d93; font-weight:700; font-family:'Montserrat'} #intervention-Step ul .txtWrap h3 {margin:1.5em 0 1em; font-size:36px; color:#222; font-weight:800} #intervention-Step ul .txtWrap .t1 {width:100%; max-width:500px; font-size:18px; line-height:1.6em } #intervention-Step ul .imgWrap {width:60%; } #intervention-Step ul .imgWrap img {width:100%} #intervention-Step ul:nth-child(even) { margin: 0} #intervention-Step ul:nth-child(even) .txtWrap {order:2; padding-right:0; padding-left:5%} #intervention-Step ul:nth-child(even) .imgWrap {order:1; } @media all and (max-width:1280px){ #intervention-Step ul .txtWrap h3 {margin:1em 0 0.5em; } } @media all and (max-width:976px){ #intervention-Step ul {flex-wrap:wrap} #intervention-Step ul .txtWrap {width:100%; padding:0; order:2; margin-top:2em } #intervention-Step ul .txtWrap h3 {margin:0.5em 0 0.3em; } #intervention-Step ul .txtWrap .t1 {line-height:1.4em } #intervention-Step ul .imgWrap {width:100%; order:1 } #intervention-Step ul:nth-child(even) {margin:4em 0} #intervention-Step ul:nth-child(even) .txtWrap { padding:0} } @media all and (max-width:480px){ #intervention-Step ul { margin:13vw 0} #intervention-Step ul .txtWrap h3 {font-size:32px;} } #mem {border: 10px solid #e9eff3; padding:5%} #mem .t1 {font-size:18px; line-height:1.4em;} #mem .st1 {font-size:16px; color:#686868; margin-top:1em} #mem dl {margin:3em 0 1em} #mem dl dt {margin-bottom:1em; font-size:2.4rem; color:#094d93; font-weight:800} #mem dl dd {border-radius:5px; background:#f8f9fb; padding:20px; font-size:18px; color:#222} #mem h3 {padding-left:20px; margin:2em 0 1em; font-size:21px; color:#222; font-weight:700} #mem #dotList {padding-left:20px} #mem .num {font-size:18px; color:#222; margin-bottom:1em; } @media all and (max-width:480px){ #mem dl dd { padding:10px; } #mem h3, #mem #dotList {padding-left:5px} } #info3Down {padding:4%; background:#f8f9fb; border-top:2px solid #abb9cf; display:flex; justify-content:center; align-items: start; } #info3Down img {} #info3Down ul {margin-left:5%} #info3Down ul li.cont {display:flex; justify-content:space-between; flex-wrap:wrap; align-items: center; } #info3Down ul li.cont a {display:inline-block; border-radius:3px; padding:0.8em 1.5em; color:#FFF; margin:2px; } #info3Down ul li.cont a.bg1 {background:#094d93 } #info3Down ul li.cont a.bg2 {background:#4a9ca0 } #info3Down ul li.cont a:hover.bg1, #info3Down ul li.cont a:hover.bg2 {background:#4a9ca0} #info3Down ul li .t1 {font-sizE:18px; line-height:1.6em; color:#222; font-weight:600} #info3Down .line {padding-top:30px; margin-top:30px; border-top:1px solid #e0e2e7} @media all and (max-width:1430px){ #info3Down ul {margin-left:3%} } @media all and (max-width:1380px){ #info3Down ul {margin-left:5%} #info3Down ul li .t1 {width:100%; margin-bottom:1em;} #info3Down ul li .t1 br { display:none} } @media all and (max-width:978px){ #info3Down {flex-wrap:wrap;; text-align:Center; padding:2em} #info3Down img {width:30%} #info3Down ul {margin-left:0} #info3Down ul li .t1 {margin:1em 0} #info3Down ul li .t1 br { display:none} #info3Down ul li.cont .btn {margin:0 auto} #info3Down .line {padding-top:1.5em; margin-top:1.5em;} } #info3Wrap.line {margin-top:2em; padding-top:2em; border-top:1px dashed #e9e9e9} #info3Wrap dl {display:flex; flex-wrap:wrap; align-items:start; margin-bottom:10px} #info3Wrap dl dt {width:150px; font-size:18px; border-radius:30px; background:#094d93; padding:0.7em 1em; color:#FFF; text-align:center; font-weight:600} #info3Wrap dl dd {width:calc(100% - 150px); padding-left:2em; padding-top: 0.7em;} #info3Wrap dl dd .t1 {color:#222; padding-top:0.5em !important; font-weight:600; font-size:19px; } @media all and (max-width:1280px){ #info3Wrap dl dt {width:120px; } #info3Wrap dl dd {width:calc(100% - 120px);} } @media all and (max-width:1024px){ #info3Wrap.line {margin-top:1.5em; padding-top:1.2em;} #info3Wrap dl dt {padding:0.5em 0.8em; } #info3Wrap dl dd .t1 { padding-top:0.5em; } } @media all and (max-width:767px){ #info3Wrap dl dt {width:100px; } #info3Wrap dl dd {width:calc(100% - 100px); padding-left:1em; } } @media all and (max-width:580px){ #info3Wrap dl { margin-bottom:1em} #info3Wrap dl dt {margin-bottom:0.5em; } #info3Wrap dl dd .t1 { padding-top:0; } #info3Wrap dl dd {width:100%} } #info3-3 {margin-top:8%; padding:3em; background:#f9f9f9; border-radius:5px; display:flex; justify-content:center; align-items: center; } #info3-3 .t1 {font-size:18px; color:#222;} #info3-3 .t1 i {padding-right:5px;} #info3-3 dl {border-left:1px solid #e9e9e9; margin-left:2em; padding-left:2em; display:flex; align-items: center; } #info3-3 dl dt {background:#4a9ca0; border-radius:5px; color:#FFF; font-weight:700; font-size:19px; padding:0.5em 1em} #info3-3 dl dd {padding-left:0.5em; color:#4a9ca0; font-size:32px; font-weight:600; font-family: 'Oswald'; } @media all and (max-width:1180px){ #info3-3 {flex-wrap:wrap} #info3-3 .t1 {width:100%; text-align:Center} #info3-3 .t1 i {display:block; padding:0 0 0.5em 0; font-size:3.0rem;} #info3-3 dl {border-left:0; margin-left:0; padding-left:0; margin-top:1em} } @media all and (max-width:767px){ #info3-3 {padding:2em; } } #health1-4 {display:flex; flex-wrap:wrap; align-items:top; justify-content:center; } #health1-4 li {padding:3%; width:260px;height:260px; margin:3% 10px; background:#f8f9fb; text-align:Center;border-radius:50%;} #health1-4 li img { width:50%;} #health1-4 li dl {padding-top:2em} #health1-4 li dl dt {margin-bottom: 0; font-size: 24px; color: #222; font-weight: 700;} #health1-4 li dl dd {font-size:18px; line-height:1.4em;} @media all and (max-width:1024px){ #health1-4 li {width:48%; } } @media all and (max-width:640px){ #health1-4 li img { width:80px} } @media all and (max-width:580px){ #health1-4 li {padding:2em 8%; width:100%; margin:1% 0;} } #mri1-3 {background:#f8f9fb; text-align:Center} #mri1-3 img.pc {width:100%; max-width:860px} #mri1-3 img.mo { display:none; width:100%; max-width:470px; margin:0 auto} #mri1-3 img.mo.img2 {max-width:537px} @media all and (max-width:1024px){ #mri1-3 img.pc {display:none} #mri1-3 img.mo { display:block} } #mri-1-4 {display:flex; flex-wrap:wrap; align-items:top; justify-content:center; max-width:1280px; margin:0 auto } #mri-1-4 li {text-align:center; width:18%; margin:1%; position:relative} #mri-1-4 li .img {} #mri-1-4 li .img img {width:100%;} #mri-1-4 li p {font-size:2.0rem; font-weight:500; background:#094d93; color:#FFF; padding:0.7em 0; } @media all and (max-width:767px){ #mri-1-4 li { width:23%} } @media all and (max-width:480px){ #mri-1-4 li { width:31%} } #intervention5 {padding:130px 0; background:url('/images/sub/intervention5-bg1.png') no-repeat center center; background-size:cover; text-align:Center; } #intervention5 p {width:80%; margin:0 auto; font-size:36px; color:#FFF; line-height:1.6em; font-weight:300 } #intervention5 p .point {font-weight:700} #intervention5 .img {padding-top:50px; } @media all and (max-width:1230px){ #intervention5 {padding:15% 0; } #intervention5 p br {display:none} } @media all and (max-width:480px){ #intervention5 {padding:20vw 0; } #intervention5 p { font-size:32px; line-height:1.4em} #intervention5 .img {width:50%; margin:0 auto} } #mri2-img3 {width:100%; max-width:869px; padding:50px 0; margin:0 auto; display:block} #mri2 {width:fit-content; margin:0 auto} #mri2 dl { display:flex; margin-bottom:2px; } #mri2 dl dt { width:150px; padding:30px; background: #094d93; font-size:22px; font-weight:700; color:#FFF; display:flex; align-items: center; justify-content:center;} #mri2 dl dd { width:calc(100% - 150px); padding:30px; font-size:18px; background:#f8f9fb; display:flex; align-items: center; } @media all and (max-width:976px){ #mri2 dl dt { width:130px; padding:20px} #mri2 dl dd { width:calc(100% - 130px); padding:20px} } @media all and (max-width:680px){ #mri2 dl dt { width:90px; } #mri2 dl dd { width:calc(100% - 90px); } } @media all and (max-width:480px){ #mri2 dl { flex-wrap:wrap} #mri2 dl dt { width:100%; padding:10px } #mri2 dl dd { width:100% } } #mri2-2 {display:flex; gap:80px; justify-content:center;} @media all and (max-width:1499px){ #mri2-2 { gap:50px;} } @media all and (max-width:1024px){ #mri2-2 { gap:30px;} } @media all and (max-width:976px){ #mri2-2 { flex-wrap:wrap} #mri2-2 > div {width:100%; margin-bottom:2em;} } @media all and (max-width:480px){ #mri2-2 > div {margin-bottom:1em;} } #imghalfWrap {background-color:#DDD; background-repeat:no-repeat; background-size:auto 100%; background-position:left top; display:flex; flex-direction: row-reverse; } #imghalfWrap #contWrap {padding:3em 4em; width:50%; background:#FFF; border:1px solid #e9e9e9 } #imghalfWrap #contWrap dl {margin-bottom:1em; padding-bottom:1em; border-bottom:1px dashed #e9e9e9} #imghalfWrap #contWrap dl dt {font-size:22px; color:#222; font-weight:600; margin-bottom:0.5em; color:#2fac66} #imghalfWrap #contWrap dl dd {font-size:1.7rem; line-height:1.6em} #imghalfWrap.ct_public #contWrap {border:0} #imghalfWrap.mri2 {background-image:url('/images/sub/mri2-imghalf.png')} #imghalfWrap.ct_public {background-image:url('/images/sub/ct_public-imghalf.png')} #imghalfWrap.health2-6 {background-image:url('/images/sub/health2-6-imghalf.jpg')} @media all and (max-width:1399px){ #imghalfWrap { background-size:auto 100%;} } @media all and (max-width:1280px){ #imghalfWrap #contWrap {padding:2em 2em; } } @media all and (max-width:1024px){ #imghalfWrap { background-size:100% auto;} #imghalfWrap #contWrap {margin-top:55vw; width:100%} #imghalfWrap #contWrap dl:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0} #imghalfWrap #contWrap dl dd {font-size:16px;} #imghalfWrap #contWrap dl dt {font-size:2.0rem;} } @media all and (max-width:480px){ #imghalfWrap #contWrap { padding:1em; } } #ct_public { background:#f5f9fb } #mri3-2 {background:#f8f9fb; text-align:Center} #mri3-2 img.pc {max-width:1168px; width:100%} #mri3-2 img.mo {display:none; max-width:585px; width:100%; margin:0 auto} #mri3-2-mo {display:none; padding-top:2em} #mri3-2-mo ul { display:flex; flex-wrap:wrap } #mri3-2-mo ul li { width:49%; margin:0.5%; background:#FFF; ;} #mri3-2-mo ul li h3 {background:#004487;color:#FFF; font-size:22px; padding:0.5em; } #mri3-2-mo ul li dl {width:calc(100% - 150px;); text-align:center; padding:1em;} #mri3-2-mo ul li dl dt {font-size:18px; } #mri3-2-mo ul li dl dd {margin-top:0.5em; } #mri3-2-mo ul li dl dd span {display:inline-block; background:#ecf4fc; font-size:19px; color:#004487; padding:0.5em 1em; border-radius:30px; margin:2px; font-weight:600} @media all and (max-width:1024px){ #mri3-2 img.pc {display:none} #mri3-2 img.mo {display:block;} #mri3-2-mo {display:block} } @media all and (max-width:640px){ #mri3-2-mo ul li { width:100%; margin:0; margin-bottom:5px } } #mri3-3 {background:#004487; text-align:center; color:#FFF; padding:4em 2em} #mri3-3 p i {padding-bottom:0.5em; font-size:36px; } #mri3-3 p { font-size:32px; font-weight:300; line-height:1.4em; max-width:1040px; margin:0 auto} #mri3-3 p .point {font-weight:800} @media all and (max-width:767px){ #mri3-3 p i { font-size:3.0rem; } #mri3-3 p { font-size:2.8rem; line-height:1.2em} } #mri4-1 {display:flex; justify-content:center; gap:10px 30px} #mri4-1 p {color:#222; font-size:2.0rem} #mri4-1 p i {padding-right:0.2em; color:#686868} #mri4-2 {width:100%; max-width:1400px; margin: 0 auto} #mri4-2 .boxWrap {padding:20px; display:flex; align-items: center; border:10px solid #f6fafd; margin-bottom:30px; position:relative} #mri4-2 .boxWrap img { width:45%; } #mri4-2 dl {padding: 0 5%; } #mri4-2 dl dt {margin-bottom:1em; font-size:3.0rem; color:#222; font-weight:800;} @media all and (max-width:1024px){ #mri4-2 .boxWrap {padding:10px; margin-bottom:20px;} } @media all and (max-width:976px){ #mri4-2 .boxWrap {flex-wrap:wrap} #mri4-2 .boxWrap img {width:100%} #mri4-2 dl {padding:5% 3% 3% } #mri4-2 dl dt {margin-bottom:0.5em; } } @media all and (max-width:480px){ #mri4-2 dl dt { font-size:26px; } } #ct4-1 {display:flex; gap:5px; } #ct4-1 li img {width:100%} @media all and (max-width:1024px){ #ct4-1 {flex-wrap:wrap} #ct4-1 li {width:calc(50% - 10px)} } #ct5-4 {background:url('/images/sub/ct5-4-bg.webp') no-repeat center center; background-size:cover; color:#FFF} #ct5-4 .s-inner {max-width:1280px; display:flex;justify-content:center;} #ct5-4 .title h3 {font-size:5.0rem; font-weight:800} #ct5-4 .title h3 .point {color:#0992f1} #ct5-4 .title .t1 {margin-top:1em; opacity:.5; font-size:1.7rem;} #ct5-4 .cont { padding-left:8%} #ct5-4 .cont li {display:flex; border-bottom:1px dashed rgba(255,255,255,0.2); padding-bottom:1.5em; margin-bottom:1.5em } #ct5-4 .cont li i {width:40px; font-size:2.4rem; color:#65e4da } #ct5-4 .cont li p {width:calc(100% - 20px); line-height:1.4em} #ct5-4 .cont li p .point {color:#65e4da} #ct5-4 .cont .t1 {font-size:2.0rem; } @media all and (max-width:1340px){ #ct5-4 .cont li p br {display:none} } @media all and (max-width:1024px){ #ct5-4 .s-inner { flex-wrap:wrap} #ct5-4 .title {width:100%; text-align:center; margin-bottom:2em} #ct5-4 .title h3 br {display:none} #ct5-4 .cont {width:100%; padding:0} #ct5-4 .cont li {padding-bottom:1.0em; margin-bottom:1.0em } } @media all and (max-width:1024px){ #ct5-4 .title h3 br {display:block} } #ct6-img1 { width:100%; max-width:960px; margin-top:5%} .tabcontent{display: none;} .tabcontent.on{display: block;} .menu_tab{display: flex; justify-content: center; margin-bottom: 70px; gap: 10px;} .menu_tab li{width: 240px; line-height: 60px; text-align: center; border: 1px solid #ddd; margin-left: -1px; cursor: pointer;border-radius: 10px; font-size: 18px;} .menu_tab li.on{ background-color: #004387; color: #fff; font-weight: 600; border-radius: 10px;} @media all and (max-width:1400px){ .menu_tab{margin-bottom: 60px;} .menu_tab li{width: 220px; line-height: 56px;} } @media all and (max-width:976px){ .menu_tab{margin-bottom: 50px;} .menu_tab li{width: 200px; line-height: 54px;} } @media all and (max-width:640px){ .menu_tab{margin-bottom: 45px;} .menu_tab li{width: 190px; line-height: 52px;} } @media all and (max-width:480px){ .menu_tab{margin-bottom: 40px;} .menu_tab li{width: 170px; line-height: 50px;} } #sytest{width: 100%; display: flex;flex-wrap: wrap; justify-content: space-between;} #sytest li{width: 48%; background: #f8f9fb; margin: 1%; padding: 40px;} #sytest li:nth-child(even){background: #4a9ca024;} #sytest li dl{position: relative; padding-left: 30px;} #sytest li dl::after{content: ''; width: 21px; height: 20px; background: url(/images/sub/circlecheck.png) no-repeat left center; position: absolute; left: 0px; top: 3px;} #sytest li dt{font-weight: 600; font-size: 2.4rem; color: #222;} #sytest li dd{ font-size: 18px; margin-top: 10px;} @media all and (max-width:1280px){ #sytest li{padding: 30px;} #sytest li dt{font-size: 22px;} #sytest li dd{font-size: 1.7rem;} } @media all and (max-width:586px){ #sytest li{width: 100%;} #sytest li dt{font-size: 22px;} #sytest li dd{font-size: 1.7rem;} } #sytest2{width: 100%; display: grid; grid-template-columns: repeat(2, 48%);grid-gap:2%; margin-bottom: 5%;} #sytest2 li{width: 100%; background: #f8f9fb; margin: 1%; padding: 40px;} #sytest2 li:nth-child(even),#sytest2 li:nth-child(5){background: #4a9ca024;} #sytest2 li.ga{grid-column: 1 / 2;grid-row: 2 /4;} #sytest2 li dl{position: relative; padding-left: 30px;} #sytest2 li dl::after{content: ''; width: 21px; height: 20px; background: url(/images/sub/circlecheck.png) no-repeat left center; position: absolute; left: 0px; top: 3px;} #sytest2 li dt{font-weight: 600; font-size: 2.4rem; color: #222;} #sytest2 li dd{ font-size: 18px; margin-top: 10px; line-height: 30px;} #sytest2 li dd span{margin-left: 75px; display: inline-block;} @media all and (max-width:1280px){ #sytest2 li{padding: 30px;} #sytest2 li dt{font-size: 22px;} #sytest2 li dd{font-size: 1.7rem;} } @media all and (max-width:1000px){ #sytest2 li dd span{margin-left: 0px;} } @media all and (max-width:780px){ #sytest2{grid-template-columns: repeat(1, 100%); grid-gap:1%; margin-bottom: 10%;} #sytest2 li dt{font-size: 22px;} #sytest2 li dd{font-size: 1.7rem;} #sytest2 li.ga{grid-column: 1 / 1;grid-row: 3 /4;} #sytest2 li:nth-child(5){background: #f8f9fb;} } #info4_list{width: 100%;} #info4_list .s-inner{display: flex; flex-wrap: wrap; justify-content:space-between; padding:6em 0 0; align-items: center;} #info4_list .s-inner img{padding-top: 30px;} #info4_list .s-inner div {width: 31%; text-align:center; border-radius: 100px; border: 20px solid transparent;background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #094d93, #66b2ff); background-origin: border-box; background-clip: content-box, border-box;height:570px;} #info4_list .s-inner div dl{margin-top: 50px;} #info4_list .s-inner div dl dt { font-size: 4.6rem; font-weight:900; color:#094d93} #info4_list .s-inner div dl dd { margin: 2em auto 1em; border-bottom: 2px solid #094d93; width: 60%; } #info4_list .s-inner div .line {width:1px; height:40px; margin:1em auto; background:rgba(255,255,255,0.4)} #info4_list .s-inner div h3 {font-size:26px; color:#000; font-weight:600; line-height:1.2em; margin-bottom: 50px;} #info4_list .s-inner div h3 sup {font-size:16px} #info4_list .s-inner div h3 span {font-size:18px} #info4_list .s-inner .arrow{ font-size: 4rem; color: #094d93;} #info4_list .s-inner .cor{width: 100%; display: flex; justify-content: center; gap: 20px;} @media all and (max-width:1024px) { #info4_list .s-inner div {height:450px;} #info4_list .s-inner div dl dt { font-size: 36px; } #info4_list .s-inner div h3 {font-size:22px;} #info4_list .s-inner div img {width:90px} #info4_list .s-inner div .line {height:30px;} } @media all and (max-width:880px) { #info4_list .s-inner {flex-wrap:wrap; justify-content:center; gap:50px 0} #info4_list .s-inner div { width:100%; height: 100%;} #info4_list .s-inner .arrow{ font-size: 3rem; width: 100%; text-align: center; transform: rotate(90deg);} } @media all and (max-width:480px) { #info4_list .s-inner div .line { height:20px;} } .howto{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;} .howto li{ width: 48%; background: #deebf7; border-radius: 5px; display: flex; flex-wrap: wrap; padding: 30px; align-items: center; z-index: 10; counter-increment: chapter; } .howto li::before{content:counter(chapter); width:35px; height:35px; background-color:#0156b5; border-radius:50%; display:block; line-height:37px; text-align:center; float:left; margin-right:20px; color:#fff; font-weight:800; font-size: 18px;} .howto li p{color: #000; width: calc(100% - 60px); font-size: 18px;} .notice{text-align: center; width: 100%; margin-top: 50px;} .notice span{width: 60px; height: 60px; text-align: center; line-height: 60px; background: #e1f1f6; font-size: 4rem; color: #34b8cb; border-radius: 10px; margin-bottom: 20px;} .notice p{font-size: 18px; color: #000;} @media all and (max-width:976px){ .howto li{ width: 100%;} .howto li+li{margin-top: 20px;} } @media all and (max-width:640px){ .notice span{width: 40px; height: 40px; line-height: 40px;font-size: 2.5rem;} } .iview_info{width: 100%; display: flex; flex-wrap: wrap; justify-content:center; gap:30px} .iview_info > li {width:450px;border:0px solid #e9e9e9} .iview_info > li:nth-child(3n){margin-right: 0;} .iview_info > li .img{width: 100%; background: #fff; overflow: hidden; transition: 0.5s; position: relative;} .iview_info > li:hover .img img{transform: scale(1.1); transition: 0.5s;} .iview_info > li .img img{width: 100%; max-width:450px; transition: 0.5s;} .iview_info > li .txt {background:#fff; padding:1.5em 1.5em; color:#FFF; position:relative} .iview_info > li .txt:before {content:'GO'; font-family:'Montserrat'; font-size:18px; font-weight:500; width:50px; height:50px; color:#FFF; display:block; text-align:center; border-radius:100%; background:#257094; border:0px solid #0b518b; line-height:50px; position:absolute; right:1em; top:43%; transform:translateY(-50%)} .iview_info > li a:hover .txt:before { background:#4a9ca0; border-color:#155d8e; transition: all 0.1s ease-out;} .iview_info .cate_date{display: flex;justify-content: space-between;align-items: center;padding:20px 10px 0} .iview_info .cate_date .cate{background: #222222;color: #fff;font-size: 14px;height: 28px;font-weight: 500;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 0 12px 1px 12px;border-radius: 28px;} .iview_info .cate_date .cate1{background: #d9005f;} .iview_info .item .cate_date .date{font-size: 15px;color: #555;font-weight: 500;} .iview_info > li h4{font-size:17px; font-weight:500; color:#888;font-family: 'Montserrat','AritaDotum',sans-serif;padding:15px 0;} .iview_info > li h3{ font-size:22px; font-weight:800;color:#111;font-family: 'Montserrat','AritaDotum',sans-serif} .iview_info > li h3 span{font-weight:400;font-family: 'Montserrat','AritaDotum',sans-serif} .overlay { background-color: rgba(0, 0, 0, 0.7); display: none; bottom: 0; left: 0; opacity: 0; position: fixed; right: 0; top: 0;cursor: default; visibility: hidden; z-index: 999991; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;} .overlay:target {visibility: visible; opacity: 1; display: block;} .popup {background-color: #fff; left: 50%; opacity: 0; padding: 0; position: fixed; top: -100%; z-index: 999999; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%,-50%); transform: translate(-50%, -50%); -webkit-transition: opacity .8s, top .8s; -moz-transition: opacity .8s, top .8s; -ms-transition: opacity .8s, top .8s;-o-transition: opacity .8s, top .8s; transition: opacity .8s, top .8s;} .overlay:target+.popup { top: 50%; opacity: 1; visibility: visible;} .popup .close { background-color:#4a9ca0 ; width: 80px; height: 80px; line-height: 80px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0;} .popup .close:before { color: #fff; content: ''; background: url('/images/common/menu_on_close.webp') no-repeat center center; width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .popup .close:hover { background-color:#1d2832;} .popup { padding: 3%; width:90%; max-width:1110px; height: 620px; display:flex; flex-wrap:wrap} .popup .img-box {width:40%} .popup .img-box img { width: 90%; } .popup .img-box dl { width: 90%; background: #f6f7f9 url("/images/sub/symbol.png") no-repeat 105% center; padding: 2em; font-family: 'Poppins'; color:#7b8795; } .popup .img-box dl dt { font-size: 26px; font-weight: 700; } .popup .img-box dl dd { font-size: 1.3rem; opacity: 0.6; text-transform:uppercase} .popup .profile-box {width:60%; border-left:1px solid #ebedf3; padding-left:4%} .popup .profile-box dd {margin-bottom:0.3em; font-size: 2.0rem; color:#004487; font-weight: 700; } .popup .profile-box dt { font-size: 4.8rem; color: #222; font-weight: 800; } .popup .profile-box dt span { font-size:0.7em; font-weight: 500; } .popup .profile-box .line {margin:2em 0 2.5em; height:5px; background: url('/images/sub/slsline.png') repeat-x left bottom; } .popup .profile-box #dotList.about2-pop {height: 367px; overflow-y: auto;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar {width: 10px;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar-thumb {background-color: #7b8795; border-radius: 10px; background-clip: padding-box;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar-track {background-color: #e8ebf0 ; border-radius: 10px; box-shadow: inset 0px 0px 5px white;} .popup.scroll {overflow:hidden; } .popup.scroll h3 {font-size:32px; font-weight:300; color:#222; margin:0 auto 0.5em} .popup.scroll .t1 { width:100%; text-align:right; font-size:1.5rem; margin-top:0.5em; opacity:.7} .popup.scroll .in-box {height:400px; overflow-y: auto } .popup.scroll .in-box::-webkit-scrollbar {width: 10px;} .popup.scroll .in-box::-webkit-scrollbar-thumb {background-color: #7b8795; border-radius: 10px; background-clip: padding-box;} .popup.scroll .in-box::-webkit-scrollbar-track {background-color: #e8ebf0 ; border-radius: 10px; box-shadow: inset 0px 0px 5px white;} @media all and (max-width:1280px) { .popup { height: 600px} .popup .profile-box #dotList.about2-pop {height: 385px; } } @media all and (max-width:1024px) { .popup { height:500px} .popup .profile-box #dotList.about2-pop {height: 300px; } .popup.scroll .in-box {height:350px; } } @media all and (max-width:920px) { .popup .close { width: 40px; height: 40px; line-height: 40px; background-size:cover } .popup .close:before {width: 20px; height: 20px; background-size:cover} .popup {padding:20px 30px; height: auto} .popup .img-box {width:100%; text-align:center} .popup .img-box img {width:80%; max-width:300px; margin:0 auto} .popup .img-box dl {display:none} .popup .profile-box {width:100%; border-left:0; padding-left:0; margin-top:2em} .popup .profile-box #dotList.about2-pop {height:17vh; } .popup .profile-box dt { font-size: 3.8rem;} .popup .profile-box #dotList.about2-pop::-webkit-scrollbar {width: 8px;} }