@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-button-prev, .swiper-button-next{display:inline-block; position:relative; width:8px; height:14px; top:auto; left:auto; right:auto; margin:0; padding:0; vertical-align:middle; transition:.3s;} .swiper-button-prev{background:transparent url('../images/ico_arrow_left_dark.png') no-repeat center / 100%;} .swiper-button-next{background:transparent url('../images/ico_arrow_right_dark.png') no-repeat center / 100%;} .swiper-button-prev:after, .swiper-button-next:after{display:none;} .swiper-button-prev:focus, .swiper-button-prev:hover{opacity:.6;} .swiper-button-next:focus, .swiper-button-next:hover{opacity:.6;} .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{opacity:.4;} /*.autoplay-progress{position:absolute; width:64%; height:2px; top:.75em; left:18%; background-color:rgba(51,51,51,.4); border-radius:5em; overflow:hidden; z-index:10;} .autoplay-progress svg{--progress:0; position:absolute; width:100%; top:0; left:0; z-index:10;} .autoplay-progress svg line{stroke:#333; stroke-width:4px; fill:none; stroke-dashoffset:calc(100 * (1 - var(--progress))); stroke-dasharray:100; transition:stroke-dashoffset 0.1s linear;}*/ .swiper-button-play, .swiper-button-pause{display:none; position:relative; width:8px; height:14px; font-size:0; vertical-align:middle; opacity:1; transition:.3s; cursor:pointer; z-index:10;} .swiper-button-play:focus, .swiper-button-pause:focus, .swiper-button-play:hover, .swiper-button-pause:hover{opacity:.6;} .swiper-button-play{background:url('../images/ico_play.png') no-repeat center;} .swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;} .swiper-button-play.active, .swiper-button-pause.active{display:inline-block;} @keyframes marquee_origin{0%{transform:translateX(0);} 50%{transform:translateX(-100%);} 50.01%{transform:translateX(100%);} 100%{transform:translateX(0);}} @keyframes marquee_clone{0%{transform:translateX(0);} 100%{transform:translateX(-200%);}} .marquee.origin{animation:marquee_origin 80s linear 0s infinite normal forwards running;} .marquee.clone{animation:marquee_clone 80s linear 0s infinite normal none running;} .marqueeW:hover .marquee{animation-play-state:paused;} /* visual */ #mainVisual{position:absolute; width:100%; height:100vh; max-height:720px; min-height:510px; margin:0 auto; background:#001b30; overflow:hidden; z-index:1;} #mainVisual:before{content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background:#001b30; opacity:.68; z-index:2;} #mainVisual:after{content:''; clear:both; display:block;} #mainVisual .inner{height:100%; padding:0;} #mainVisual .swiper-container{width:100%; height:100%; overflow:hidden;} #mainVisual .swiper-container .imgW{position:absolute; width:100%; height:100%; top:0; left:0;} #mainVisual .swiper-container .imgW img{position:absolute; min-width:100%; height:auto; min-height:100%; top:50%; left:50%; object-fit:cover; transform:translate(-50%, -50%); transition:4s ease;} /* contents */ #mainContents{clear:both; position:relative; width:100%; margin:0 auto; padding:0; background:transparent; z-index:1;} #mainContents .flexW{display:flex;} #mainContents .conTitle{margin:0 auto 2.5em;} #mainContents .conTitle h3{font-size:2.25em; font-weight:600;} #mainContents .conTitle h3 span{display:block;} #mainContents .conTitle h3 span.mini{margin:0 auto 1.375em; padding:0 .125em; color:#005496; font-size:0.444em; letter-spacing:-.015em;} #mainContents .conTitle.alignCenter{text-align:center;} #mainContents .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04, #mainContents .area05{width:100%; overflow:hidden;} #mainContents .area02, #mainContents .area03, #mainContents .area04{padding:7.5em 0;} #mainContents .area01{padding:6.625em 0 0;} #mainContents .area01 .videoW{position:relative; width:100%; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden;} #mainContents .area01 .videoW iframe{position:absolute; width:100%; height:100%; top:0; left:0;} #mainContents .area02{background:#eaf6ff; background:linear-gradient(180deg, #feffff 0%, #eaf6ff 100%);} #mainContents .area02 .searchW{margin:0 auto 3em;} #mainContents .area02 .searchW div.flexW{justify-content:space-between;} #mainContents .area02 .searchW div.flexW ul.flexW{gap:.5em;} #mainContents .area02 .searchW div.flexW ul.flexW > li{} #mainContents .area02 .searchW div.flexW ul.flexW > li > label{width:100%;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW{width:100%;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW input[type="text"], #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW select{display:inline-block; height:2.5em; line-height:1; border:1px solid #ccc; border-radius:4px; box-sizing:border-box;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW input[type="text"]{width:100%; padding:.5em .875em; background:#fff;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW select{width:fit-content; padding:0 2.25em 0 .875em; background:#fff url('../images/ico_arrow_bottom_dark.png') no-repeat right .875em center / 12px 7px; color:#333; letter-spacing:-.035em; appearance:none;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW select option{padding:0;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist{} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul{display:flex; flex-wrap:wrap; gap:.25em; width:max-content;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul li{} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul li label{height:2.5em; margin:0; padding:.625em .875em; background:#fff; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; cursor:pointer;} #mainContents .area02 .searchW div.flexW ul.flexW > li.address{width:36%; max-width:368px;} #mainContents .area02 .searchW div.flexW ul.flexW > li.mname{width:20%; max-width:160px;} #mainContents .area02 .searchW div.flexW ul.flexW > li.time{} #mainContents .area02 .searchW div.flexW ul.flexW > li.checklist{} #mainContents .area02 .searchW div.flexW .btnBox{} #mainContents .area02 .searchW div.flexW .btnBox ul{display:flex; gap:.5em;} #mainContents .area02 .searchW div.flexW .btnBox ul li{} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn{height:2.5em; line-height:1; padding:0 1.125em; background:transparent; border:1px solid transparent; border-radius:5em; cursor:pointer;} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn span{display:inline-block;} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.search{background:#005496; border-color:#0071c9; color:#fff;} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.search i.ico.search{display:inline-block; width:.8125em; aspect-ratio:1; margin:0 -.125em 0 .5em; background:url('../images/main/ico_search.png') no-repeat center / 100%;} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.search:focus, #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.search:hover{background:#0071c9;} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.alllist{border-color:#333;} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.alllist:focus, #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.alllist:hover{background:rgba(51,51,51,.1);} #mainContents .area02 .maplistW{} #mainContents .area02 .maplistW .inner{max-width:1728px; padding:0 2.5em;} #mainContents .area02 .maplistW .flexW{flex-wrap:wrap; height:490px; border-radius:12px; box-shadow:0 4px 20px rgba(0,84,150,.1); overflow:hidden;} #mainContents .area02 .maplistW .flexW .maplist{flex:1 1 480px; display:block; width:100%; max-width:480px; height:100%;} #mainContents .area02 .maplistW .flexW .maplist > ul{width:100%; height:100%; overflow-y:auto;} #mainContents .area02 .maplistW .flexW .maplist > ul > li{display:inline-block; position:relative; width:100%; border-bottom:1px solid #e3e3e3;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place{display:block; width:100%; padding:1.625em 1.75em; background:#fff; text-align:left; cursor:pointer;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place p.ti{margin:0 auto .75em;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place p.ti strong{} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info{display:flex; justify-content:flex-start;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info li{display:inline-block; position:relative; width:fit-content; line-height:1.313; color:#888; font-size:.875em; overflow-wrap:anywhere; vertical-align:middle;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info li.doctor{flex:0 0 auto;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info li.doctor:after{content:''; display:inline-block; width:1px; height:.85em; margin:0 .5em; background:#888; vertical-align:middle;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info li.doctor p{display:inline-block; margin:0; padding:0;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info li.doctor p span{} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info li.doctor p strong{color:#333; font-weight:normal;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place ul.info li.address{flex:1 1 auto;} #mainContents .area02 .maplistW .flexW .maplist ul li button.modalOpen{display:inline-block; position:absolute; line-height:1; top:1.063em; right:1.25em; margin:0; padding:.25em .5em; background:#fff; border:1px solid #005496; border-radius:5em; color:#005496; text-align:center; cursor:pointer; z-index:1;} #mainContents .area02 .maplistW .flexW .maplist ul li button.modalOpen i.ico.member{display:inline-block; width:1em; height:1em; aspect-ratio:1; background:url('../images/ico_member.png') no-repeat center / 100%; border-radius:50%; vertical-align:middle; transform:translateY(-.1em);} #mainContents .area02 .maplistW .flexW .maplist ul li button.modalOpen span.txt{display:inline-block; margin-left:.125em; font-size:.813em; font-weight:600; vertical-align:middle;} #mainContents .area02 .maplistW .flexW .maplist ul li button.modalOpen span.reading{position:absolute;} #mainContents .area02 .maplistW .flexW .maplist ul li button.modalOpen:focus, #mainContents .area02 .maplistW .flexW .maplist ul li button.modalOpen:hover{border-color:#00b9ff; color:#00b9ff;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place:focus, #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place:hover{color:#e07e27;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place.active{background:#fef6ef;} #mainContents .area02 .maplistW .flexW .mapW{flex:1 1 calc(100% - 480px); position:relative;} #mainContents .area02 .maplistW .flexW .mapW iframe{width:100%; height:100%;} #mainContents .area02 .maplistW .modalWrap.profileW{} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW{width:auto; width:max-content; height:auto; left:50%; transform:translate(-50%, -50%);} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon{max-width:80vw; box-shadow:4px 4px 20px rgba(0,0,0,.2);} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con{} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW{align-items:center; gap:1.5em; height:auto; padding:0; border:none; border-radius:0; box-shadow:none; overflow:auto;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW{} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW img{width:100%; max-width:fit-content;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member{position:relative;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member .imgW{max-width:9em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member .imgW img{} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member .txtW{position:absolute; width:100%; bottom:.75em; left:0;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member .txtW p.year{color:#c42126; font-size:1.5em; font-weight:900; text-align:center; letter-spacing:-.055em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .nameW{flex:0 0 auto; max-width:12em; padding:0 1em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .nameW p.name{font-size:2em; font-weight:700;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist{flex:6;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul{display:flex; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-content:flex-start; gap:1em; height:4em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul.line2{height:9em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul li{max-width:4em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul li img{} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con p.nodata{text-align:center;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox{display:block; position:relative; margin:1.5em auto 0;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox ul.links{text-align:center;cursor:pointer} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox ul.links li{display:inline-block;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox ul.links li a.btn.link{display:inline-block; line-height:1; padding:.75em 1.75em; background:transparent; border:1px solid #333; border-radius:5em;cursor:pointer} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox ul.links li a.btn.link span{display:inline-block;cursor:pointer} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox ul.links li a.btn.link:focus, #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox ul.links li a.btn.link:hover{background:rgba(51,51,51,.1);} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .btnBox a {cursor:pointer} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalClose{} #mainContents .area02 .maplistW .modalWrap.profileW .modalBg{background:transparent;} #mainContents .area03{} #mainContents .area03 .flexW{flex-wrap:wrap; gap:5em;} #mainContents .area03 .flexW .board.columnW{flex:1 1 calc(50% - 2.5em); width:calc(50% - 2.5em);} #mainContents .area03 .flexW .board.columnW ul.column{display:flex; flex-wrap:wrap; gap:.75em 1.25em;} #mainContents .area03 .flexW .board.columnW ul.column li{position:relative;} #mainContents .area03 .flexW .board.columnW ul.column li a{display:block; width:100%; border:1px solid transparent; border-radius:12px; color:inherit; overflow:hidden;} #mainContents .area03 .flexW .board.columnW ul.column li a .imgW{position:relative; width:100%;} #mainContents .area03 .flexW .board.columnW ul.column li a .imgW img{width:100%; height:100%; object-fit:cover;} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW{position:absolute; width:100%;} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW p{line-height:1.5; color:inherit; font-size:1.25em; font-weight:500; word-break:keep-all;} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW p br{display:inline;} #mainContents .area03 .flexW .board.columnW ul.column li a i.ico{position:absolute; right:2.5em;} #mainContents .area03 .flexW .board.columnW.rectangle{} #mainContents .area03 .flexW .board.columnW.square{} #mainContents .area03 .flexW .board.columnW.square ul.column li a{border-color:#e3e3e3;} #mainContents .area03 .flexW .board.columnW ul.column li.type01{flex:1 1 100%; width:100%;} #mainContents .area03 .flexW .board.columnW ul.column li.type01 a .txtW{top:50%; left:0; padding:0 5.5em 0 10.5em; transform:translateY(-50%);} #mainContents .area03 .flexW .board.columnW ul.column li.type01 a i.ico{top:50%; transform:translateY(-50%);} #mainContents .area03 .flexW .board.columnW ul.column li.type02{flex:1 1 calc(50% - .625em); width:calc(50% - .625em);} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a .txtW{top:0; left:0; padding:2.5em;} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a i.ico{bottom:2.5em;} #mainContents .area03 .flexW .board.columnW ul.column li.light{color:#fff;} #mainContents .area03 .flexW .board.columnW ul.column li a:focus, #mainContents .area03 .flexW .board.columnW ul.column li a:hover{border-color:#333;} #mainContents .area03 .flexW .board.columnW .btnBox{position:absolute; top:3.5em; right:0; text-align:right;} #mainContents .area03 .flexW .board.columnW .btnBox a.btn.more{display:inline-block; position:relative; line-height:1; margin:0 auto; padding:.25em; border-radius:5em; transition:.3s;} #mainContents .area03 .flexW .board.columnW .btnBox a.btn.more span{display:inline-block;} #mainContents .area03 .flexW .board.columnW .btnBox a.btn.more i.ico.more{display:inline-block; margin:0 0 0 .5em;} #mainContents .area03 .flexW .board.columnW .btnBox a.btn.more:focus, #mainContents .area03 .flexW .board.columnW .btnBox a.btn.more:hover{/*background:rgba(51,51,51,.1);*/ opacity:.75;} #mainContents .area03 .flexW .board.boxW{flex:1 1 calc(50% - 2.5em); display:flex; flex-wrap:wrap; align-content:flex-start; gap:3.5em; width:calc(50% - 2.5em); margin:7em auto 0;} #mainContents .area03 .flexW .board.boxW .conTitle{margin:0 auto 1.75em;} #mainContents .area03 .flexW .board.boxW .conTitle h3{font-weight:500;} #mainContents .area03 .faqW{flex:1 1 100%;} #mainContents .area03 .faqW ul{display:flex; flex-wrap:wrap; gap:.5em;} #mainContents .area03 .faqW ul li{flex:0 1 auto; display:inline-block;} #mainContents .area03 .faqW ul li a{display:block; padding:.75em 1.75em; border:1px solid #333; border-radius:5em;} #mainContents .area03 .faqW ul li a i.ico.faq{display:inline-block; width:1.375em; aspect-ratio:1; margin-right:.5em; vertical-align:middle;} #mainContents .area03 .faqW ul li a i.ico.faq.faq01{background:url('../images/main/ico_faq_01.png') no-repeat center / 100%;} #mainContents .area03 .faqW ul li a i.ico.faq.faq02{background:url('../images/main/ico_faq_02.png') no-repeat center / 100%;} #mainContents .area03 .faqW ul li a i.ico.faq.faq03{background:url('../images/main/ico_faq_03.png') no-repeat center / 100%;} #mainContents .area03 .faqW ul li a i.ico.faq.faq04{background:url('../images/main/ico_faq_04.png') no-repeat center / 100%;} #mainContents .area03 .faqW ul li a i.ico.faq.faq05{background:url('../images/main/ico_faq_05.png') no-repeat center / 100%;} #mainContents .area03 .faqW ul li a p{display:inline-block; vertical-align:middle;} #mainContents .area03 .faqW ul li a i.ico.arrow{margin:0 0 0 1.75em; vertical-align:middle;} #mainContents .area03 .faqW ul li a:focus, #mainContents .area03 .faqW ul li a:hover{background:rgba(51,51,51,.1);} #mainContents .area03 .qnaW{flex:1 1 100%; position:relative;} #mainContents .area03 .qnaW ul{display:inline-block; width:100%;} #mainContents .area03 .qnaW ul li{border-bottom:1px dotted #ccc;} #mainContents .area03 .qnaW ul li:first-child{margin-top:-.5em;} #mainContents .area03 .qnaW ul li:last-child{border-bottom:none;} #mainContents .area03 .qnaW ul li a{display:block; padding:.5em;} #mainContents .area03 .qnaW ul li a .listInfo{display:flex; justify-content:space-between; align-items:center; gap:1em;} #mainContents .area03 .qnaW ul li a .listInfo p{} #mainContents .area03 .qnaW ul li a .listInfo p.listTitle{flex:1;} #mainContents .area03 .qnaW ul li a .listInfo p.listDoctor{flex:0 0 auto; display:inline-block; padding:.313em .5em; background:#fff; border:1px solid #005496; border-radius:5em; color:#005496; font-size:.75em; font-weight:600;} #mainContents .area03 .qnaW ul li a .listInfo p.listDoctor i.ico.member{display:inline-block; width:1.25em; aspect-ratio:1; margin-right:.125em; background:url('../images/ico_member.png') no-repeat center / 100%; vertical-align:middle;} #mainContents .area03 .qnaW ul li a .listInfo p.listDoctor span{vertical-align:middle;} #mainContents .area03 .qnaW ul li a .listInfo p.listDoctor.ready{background:transparent; border-color:#ccc; color:#767676; font-weight:500;} #mainContents .area03 .qnaW ul li a .listInfo p.listDoctor.ready i.ico.member{filter:grayscale(100%);} #mainContents .area03 .qnaW ul li a .listInfo p.listDoctor.finish{} #mainContents .area03 .qnaW ul li a:focus, #mainContents .area03 .qnaW ul li a:hover{background:rgba(51,51,51,.1);} #mainContents .area03 .qnaW .btnBox{position:absolute; top:0; right:0; text-align:right;} #mainContents .area03 .qnaW .btnBox a.btn.more{display:inline-block; position:relative; line-height:1; margin:0 auto; padding:.25em; border-radius:5em; transition:.3s;} #mainContents .area03 .qnaW .btnBox a.btn.more span{display:inline-block;} #mainContents .area03 .qnaW .btnBox a.btn.more i.ico.more{display:inline-block; margin:0 0 0 .5em;} #mainContents .area03 .qnaW .btnBox a.btn.more:focus, #mainContents .area03 .qnaW .btnBox a.btn.more:hover{/*background:rgba(51,51,51,.1);*/ opacity:.75;} #mainContents .area04{background:#f3f3f3 url('../images/pattern_01.png') repeat top left;} #mainContents .area04 .photonewsW{} #mainContents .area04 .photonewsW .swiper-main-board-photo{} #mainContents .area04 .photonewsW .swiper-main-board-photo ul{} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li{} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a{display:flex; flex-wrap:wrap; gap:.75em;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .imgW{flex:1 1 calc(50% - .375em); position:relative; max-width:calc(50% - .375em); height:auto; aspect-ratio:4 / 3; background:#cecece; border-radius:12px; overflow:hidden;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .imgW img{position:relative; width:100%; max-width:fit-content; height:100%; top:50%; transform:translateY(-50%); z-index:0; object-fit:cover;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo{flex:1 1 calc(50% - .375em); position:relative; max-width:calc(50% - .375em); padding:0 0 0 .75em;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p{line-height:1.5;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.listTitle{margin:-.25em auto .7em; color:#242528; font-size:1.25em; font-weight:500;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.listCon{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; max-height:6em; margin:0 auto 1.75em; color:#808080; overflow:hidden; text-overflow:ellipsis;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.btn.more{display:inline-block; position:absolute; line-height:1; bottom:0; padding:.75em 1.75em; border:1px solid #333; border-radius:5em; transition:.3s;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.btn.more span{display:inline-block;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.btn.more i.ico.more{display:inline-block; margin:0 0 0 .5em;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a:focus, #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a:hover{} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a:focus .listInfo p.btn.more, #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a:hover .listInfo p.btn.more{background:rgba(51,51,51,.1);} #mainContents .area04 .photonewsW .bgBox{position:absolute; width:fit-content; top:0; right:0;} #mainContents .area04 .photonewsW .bgBox .pager{display:inline-block;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination{width:auto; bottom:auto; left:auto;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination span{display:inline-block; vertical-align:middle;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination span.current{font-weight:700;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination span.total{opacity:.6;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination .progressW{display:inline-block; width:5em; height:2px; margin:0 .5em; background:rgba(51,51,51,.4); border-radius:5em; vertical-align:middle;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination .progressW .progressbar{display:block; width:0; height:100%; background:#333; border-radius:5em; transition:.3s;} #mainContents .area04 .photonewsW .bgBox .control{display:inline-block; margin:0 0 0 2em;} #mainContents .area04 .photonewsW .bgBox .control div{margin:0 0 0 1.25em;} #mainContents .area04 .photonewsW .bgBox .control .swiper-button-play{} #mainContents .area04 .photonewsW .bgBox .control .swiper-button-pause{} #mainContents .area04 .photonewsW .bgBox .control .swiper-button-prev{} #mainContents .area04 .photonewsW .bgBox .control .swiper-button-next{} #mainContents .area05{padding:5em 2.5em;} #mainContents .area05 ul.partners{display:flex; flex-wrap:wrap; gap:1.125em;} #mainContents .area05 ul.partners li{flex:1 1 calc(100% / 6 - 1.125em * 5 / 6);} #mainContents .area05 ul.partners li a{display:block; border-radius:12px; overflow:hidden;} #mainContents .area05 ul.partners li a img{position:relative; width:100%; max-width:fit-content; top:50%; translate:translateY(-50%);} #mainContents .area05 ul.partners li a:focus, #mainContents .area05 ul.partners li a:hover{opacity:.6;} @media all and (max-width:1599px){ #mainContents .area02 .maplistW .inner{padding:0 2em;} } @media all and (max-width:1279px){ #mainVisual{min-width:auto; max-height:580px;} #mainContents{min-width:960px;} #mainContents .area02 .searchW div.flexW{flex-wrap:wrap; justify-content:center; gap:.75em; width:100%;} #mainContents .area02 .searchW div.flexW ul.flexW{justify-content:center; width:100%;} #mainContents .area02 .searchW div.flexW .btnBox{width:100%;} #mainContents .area02 .searchW div.flexW .btnBox ul{justify-content:space-between;} #mainContents .area02 .searchW div.flexW .btnBox ul li:first-child{order:2;} #mainContents .area02 .searchW div.flexW .btnBox ul li:last-child{order:1;} #mainContents .area02 .searchW div.flexW .btnBox ul li .btn.search{padding:0 3em;} #mainContents .area02 .maplistW .inner{padding:0 1em;} #mainContents .area02 .maplistW .flexW .maplist{flex:1 1 360px; width:360px;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place{padding:1.438em 1.5em;} #mainContents .area02 .maplistW .flexW .mapW{flex:1 1 calc(100% - 360px);} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member .imgW{max-width:8em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member .txtW{bottom:.625em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.member .txtW p.year{font-size:1.438em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul{gap:.625em; height:4em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul.line2{height:8.625em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul li{max-width:4em;} #mainContents .area03 .flexW{gap:3em;} #mainContents .area03 .flexW .board.columnW{flex:1 1 calc(50% - 1.5em); width:calc(50% - 1.5em);} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW p{font-size:1.125em;} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW p br{display:none;} #mainContents .area03 .flexW .board.columnW ul.column li a i.ico{right:2em;} #mainContents .area03 .flexW .board.columnW ul.column li.type01 a .txtW{padding:0 4.5em 0 10.5em;} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a .txtW{padding:2em;} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a i.ico{bottom:2em;} #mainContents .area03 .flexW .board.boxW{align-items:center; gap:3em;} #mainContents .area03 .faqW ul li a{padding:.75em 1.5em;} #mainContents .area03 .faqW ul li a i.ico.faq{margin-right:.25em;} #mainContents .area03 .faqW ul li a i.ico.arrow{margin-left:1.25em;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a{align-items:flex-start;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.btn.more{position:relative;} #mainContents .area05{padding:5em 1em;} #mainContents .area05 ul.partners{gap:.5em;} #mainContents .area05 ul.partners li{flex:1 1 calc(100% / 6 - .5em * 5 / 6);} } @media all and (max-width:1023px){ #mainVisual{max-height:440px; min-height:auto;} #mainContents{min-width:100%;} #mainContents .conTitle h3 span.mini{margin:0 auto 1em;} #mainContents .area02, #mainContents .area03, #mainContents .area04{padding:5em 0;} #mainContents .area02 .searchW div.flexW{gap:1.5em;} #mainContents .area02 .searchW div.flexW ul.flexW{flex-wrap:wrap;} #mainContents .area02 .searchW div.flexW .btnBox ul{justify-content:center;} #mainContents .area02 .maplistW .flexW{height:auto;} #mainContents .area02 .maplistW .flexW .maplist{order:2; flex:1 1 100%; max-width:100%; height:240px;} #mainContents .area02 .maplistW .flexW .mapW{order:1; flex:1 1 100%; width:100%; height:360px;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW{justify-content:center;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist{flex:1 1 100%;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul{align-content:center; height:5em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul.line2{height:11em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul li{max-width:5em;} #mainContents .area03 .flexW .board.columnW{flex:1 1 100%; width:100%;} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW p br{display:inline;} #mainContents .area03 .flexW .board.columnW ul.column li.type01 a .txtW{padding:0 4.5em 0 25vw;} #mainContents .area03 .flexW .board.columnW .btnBox{top:2.875em;} #mainContents .area03 .flexW{margin:5em auto 0;} #mainContents .area03 .faqW{flex:1 1 100%;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .imgW{flex:1 1 calc(40% - .375em); max-width:calc(40% - .375em);} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo{flex:1 1 calc(60% - .375em); max-width:calc(60% - .375em);} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.listTitle{margin:0 auto .7em;} #mainContents .area05{padding:3em .875em;} #mainContents .area05 ul.partners{gap:.75em;} #mainContents .area05 ul.partners li{flex:1 1 calc(100% / 3 - .75em * 2 / 3);} } @media all and (max-width:768px){ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:auto;} #mainVisual{max-height:380px;} #mainContents .conTitle{margin:0 auto 1.5em;} #mainContents .conTitle h3{font-size:2em;} #mainContents .area02, #mainContents .area03, #mainContents .area04{padding:3em 0;} #mainContents .area01{padding:10em 0 0;} #mainContents .area02 .searchW div.flexW ul.flexW > li.address{width:48%;} #mainContents .area02 .searchW div.flexW ul.flexW > li.mname{width:30%;} #mainContents .area02 .maplistW .flexW .maplist{height:200px;} #mainContents .area02 .maplistW .flexW .mapW{height:320px;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul{height:4.5em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul.line2{gap:.625em; height:9.625em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul li{max-width:4.5em;} #mainContents .area03 .flexW .board.columnW ul.column{gap:.75em;} #mainContents .area03 .flexW .board.columnW .btnBox{top:2.5em;} #mainContents .area03 .flexW .board.boxW{margin:3em auto 0;} #mainContents .area05{padding:2.25em .875em;} } @media all and (max-width:580px){ #mainVisual{max-height:320px;} #mainContents .conTitle h3{font-size:1.5em;} #mainContents .area01{padding:15em 0 0;} #mainContents .area02 .searchW div.flexW ul.flexW > li.address{width:46.5%;} #mainContents .area02 .searchW div.flexW ul.flexW > li.mname{width:26.5%;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place{padding:1em 1.125em;} #mainContents .area02 .maplistW .flexW .maplist ul li article.btn.place p.ti{margin:0 auto .25em;} #mainContents .area02 .maplistW .flexW .maplist ul li button.modalOpen{position:relative; top:auto; right:auto; margin:.5em auto 0; padding:.5em 1.25em;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul, #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul.line2{flex-direction:row; justify-content:center; max-width:320px; height:auto; margin:0 auto;} #mainContents .area02 .maplistW .modalWrap.profileW .modalConW .modalCon .con .flexW .badgeW.edulist ul li{max-width:calc(33% - .416em);} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW p{line-height:1.313; font-size:.875em;} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a .txtW{padding:1.5em;} #mainContents .area03 .flexW .board.columnW .btnBox{top:1.5em;} #mainContents .area03 .faqW ul li{flex:1 1 100%;} #mainContents .area03 .faqW ul li a{position:relative;} #mainContents .area03 .faqW ul li a i.ico.arrow{position:absolute; margin:-1px 0 0 0; top:50%; right:1.25em; transform:translateY(-50%);} #mainContents .area03 .qnaW ul li a .listInfo p.listTitle{font-size:.875em;} #mainContents .area03 .qnaW ul li a .listInfo p.listDoctor i.ico.member{width:1em; margin-top:-.2em;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.listTitle{font-size:1.125em;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.listCon{font-size:.875em;} } @media all and (max-width:480px){ #mainVisual{max-height:280px;} #mainContents .area02 .searchW div.flexW ul.flexW > li.address, #mainContents .area02 .searchW div.flexW ul.flexW > li.mname{width:100%;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul{width:100%;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul li{font-size:.813em;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul li label{height:2.75em; padding:.75em;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul li label.btn.select input.pick ~ span.checkmark{width:1.063em; height:1.063em;} #mainContents .area02 .searchW div.flexW ul.flexW > li .inputW .labelW.checklist ul li label.btn.select input.pick ~ span.txt{padding-left:4px;} #mainContents .area03 .flexW .board.columnW ul.column li a .txtW p br{display:none;} #mainContents .area03 .flexW .board.columnW ul.column li a i.ico{right:1em;} #mainContents .area03 .flexW .board.columnW ul.column li.type01 a .imgW{aspect-ratio:3 / 1;} #mainContents .area03 .flexW .board.columnW ul.column li.type01 a .imgW img{position:relative; width:auto; left:-1em;} #mainContents .area03 .flexW .board.columnW ul.column li.type01 a .txtW{padding:0 2.5em 0 28.5vw;} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a .txtW{padding:1em;} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a .txtW p{-webkit-text-stroke:1px rgba(51,51,51,.1); text-shadow:-1px 0 8px #fff, 0 1px 8px #fff, 1px 0 8px #fff, 0 -1px 8px #fff;} #mainContents .area03 .flexW .board.columnW ul.column li.type02.light a .txtW p{-webkit-text-stroke:0; text-shadow:none;} #mainContents .area03 .flexW .board.columnW ul.column li.type02 a i.ico{bottom:1em;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .imgW{flex:1 1 100%; max-width:100%;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo{flex:1 1 100%; max-width:100%; padding:0;} #mainContents .area04 .photonewsW .swiper-main-board-photo ul li a .listInfo p.listTitle{margin:0 auto .25em;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination{font-size:.75em;} #mainContents .area04 .photonewsW .bgBox .pager .swiper-pagination .progressW{width:3.5em;} #mainContents .area04 .photonewsW .bgBox .control{margin:0 0 0 1.25em;} } @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){ }