@charset "utf-8";
@import url(font.css);
@import url(default.css);
@import url(layout.css);
@import url(swiper.min.css);

#header {position:relative; text-align:center; padding:30px 0 30px; border-bottom:1px solid #e8e8e8;}
#header .kakao {display:none;}

.inner {max-width:1200px; margin:0 auto;}

#mainCont {}
#mainCont h3 {font-family:'Noto Sans B'; font-size:40px; text-align:center; margin-bottom:30px;}
#mainCont .network {display:none;}
#mainCont .network {background:#ddf3f9 url(../images/sample2.png) no-repeat; padding:8% 0; padding-left:7%; background-position:right -20px bottom; background-size:60%;}
#mainCont .network a {display:block;}
#mainCont .network b {display:block; font-size:22px; margin:5px 0;}
#mainCont .network span {display:block; color:#555; font-size:14px; line-height:140%; font-family:'Noto Sans L';}
#mainCont .network2 {padding:30px 20px 30px;}
#mainCont .network2 .network2_srch {margin-bottom:20px;}
#mainCont .network2 .network2_srch .tit {width:100%; background:#275b97;}
#mainCont .network2 .network2_srch .tit h4 {position: relative; color: #fff; text-align: center; padding: 4% 3% 4% 8%; font-size: 15px;}
#mainCont .network2 .network2_srch .tit h4:before {content: ''; display: inline-block; background: url(../images/ico_hospital.png) left center no-repeat; background-size: 100%; width: 28px; height: 25px; position: absolute; top: 50%; margin-top: -13px; left: 50%; margin-left: -65px;}
#mainCont .network2 .network2_srch .cont {background: #fafafa; border: 1px solid #ddd; width: 100%; padding: 3%;}
#mainCont .network2 .network2_srch .cont select {width: 49.5%; height: 40px; float: left; background: url(../images/blt_selete.png) no-repeat right 10px center; display: inline-block;}
#mainCont .network2 .network2_srch .cont select:last-of-type {float: right;}
#mainCont .network2 .network2_srch .cont input {display: inline-block; width: 77%; height: 40px; padding: 10px; background: #fff; border: 1px solid #dedede; margin-top: 0.8%;}
#mainCont .network2 .network2_srch .cont a {float: right; text-align: center; margin-top: 0.8%; background: #275b97; color: #fff; font-size: 14px; width: 22%; height: 40px; line-height: 40px; display: inline-block;}
#mainCont .video {}
#mainCont .video #video-background {width:100%;}
#mainCont .hospital {height:auto; margin-bottom:100px;}
#mainCont .hospital .swiper-container {width:100%; height:100%;}
#mainCont .hospital .swiper-slide {text-align:center; background:#fff; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#mainCont .hospital .swiper-pagination {display:none;}
#mainCont .hospital span {display:block;}
#mainCont .hospital span.imgArea img {width:100%; height:187px; max-height:100%;}
#mainCont .hospital span.txtArea {
    font-size: 14px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 12px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    letter-spacing: 0;
}
.premium {display:block; position:absolute; top:7px; right:7px;}
.noitem {float:none; width:calc(100% - 23px) !important; background:#f3f3f3 url(../images/noitem.png) no-repeat center top 35%; text-align:center; margin:0 !important; padding:10% 0 5% !important; color:#a0a0a0;}
#mainCont .visual {position:relative; width:100%; height:auto; overflow:hidden;}
#mainCont .visual .txtBox {position:absolute; width:100%; height:100%; text-align:center;}
#mainCont .visual .txtBox .inner2 {width:auto; position:absolute; top:50%; transform:translateY(-50%); right:13%; margin:0 auto;}
#mainCont .visual .txtBox p {font-family:'Noto Sans L'; font-size:36px; margin-top:25px;}
#mainCont .visual .txtBox p span {font-family:'Noto Sans B';}
#mainCont .visual .txtBox a {display:inline-block; background:#3177b9; font-family:'Noto Sans R'; font-size:25px; color:#fff; padding:13px 38px; margin-top:30px;}
#mainCont .visual2 {position:relative; width:100%; height:auto; overflow:hidden;}
#mainCont .visual2 .txtBox {position:absolute; width:100%; height:100%;}
#mainCont .visual2 .txtBox .inner2 {width:auto; position:absolute; top:10%; left:13%; margin:0 auto;}
#mainCont .visual2 .txtBox .inner2 p {color:#fff;}
#mainCont .visual2 .txtBox .inner2 p:first-child {font-family:'S-CoreDream-4Regular'; font-size:40px; margin-top:20px;}
#mainCont .visual2 .txtBox .inner2 p:last-child {font-family:'S-CoreDream-8Heavy'; font-size:98px;}
#mainCont .comment {padding:5% 0;}
#mainCont .comment p {color:#555; font-size:20px; line-height:150%; font-family:'Noto Sans L'; text-align:center;}
#mainCont .comment a {display:block; background:#275b97; margin:40px auto 0; width:250px; text-align:center; padding:18px 0; color:#fff; font-size:18px;}
#mainCont .event {position:relative; background:#346eb2 url(../images/event.png) no-repeat right 7%; width:100%; height:auto;}
#mainCont .event .inner {position:relative;}
#mainCont .event .inner:after {content:''; display:block; clear:both;}
#mainCont .event .fl {
    width: 60%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#mainCont .event .fr {width:40%; text-align:right; padding-top:40px;}
#mainCont .event .fr > img {width:80%; margin-right:0;}
#mainCont .event p {font-family:'Noto Sans L'; color:#fefefe; letter-spacing:-1px;}
#mainCont .event .txt1 {font-size:20px; font-style:italic;}
#mainCont .event .txt2 {font-size:50px; line-height:1; margin-left:-5px;}
#mainCont .event .txt2 span {color:#f8d850;}
#mainCont .event .txt2 span em {font-family:'Roboto'; font-weight:600; font-size:1.4em;}
#mainCont .event .txt3 {font-size:22px; margin:14px 0 28px;}
#mainCont .event .txt3 em {font-family:'Roboto'; font-weight:500; font-size:1.4em;}
#mainCont .event ul {background:#275285; width:50%; border-radius:10px; padding:15px 30px;}
#mainCont .event li {background:url(../images/bullet.png) no-repeat center left; padding-left:25px; font-size:17px; font-family:'Noto Sans L', 'dotum', sans-serif; color:#fff; margin-bottom:10px;}
#mainCont .event li:last-child {margin-bottom:0;}
#mainCont .reservation {padding:60px 0 80px;}
#mainCont .reservation .reservationTap {width:100%;height:60px; border-bottom:1px solid #dedede;}
#mainCont .reservation .reservationTap ul {display: table; margin:0 auto}
#mainCont .reservation .reservationTap ul:after {content:''; display:block; clear:both;}
#mainCont .reservation .reservationTap li {float:left;}
#mainCont .reservation .reservationTap li a {display:block; text-align:center; font-weight:400; padding:0 25px; height:58px; line-height:60px; font-size:1.2em; color:#777; font-family:'Noto Sans L', 'dotum', sans-serif;}
#mainCont .reservation .reservationTap li.on {border-bottom:3px solid #00bff3;}
#mainCont .reservation .reservationTap li.on a {color:#00bff3; font-weight:600; font-size:1.5em;}
#mainCont .reservation .reservationTap_sub {width: 100%; background: #f1f1f1; margin: 0 0 20px;}
#mainCont .reservation .reservationTap_sub ul {padding: 12px 0; margin: 0 auto; display: table; width: 50%; table-layout: fixed;}
#mainCont .reservation .reservationTap_sub li {display:table-cell; vertical-align:middle; text-align:center;}
#mainCont .reservation .reservationTap_sub li a {font-size:1.1em; color:#888; font-family:'Noto Sans L', 'dotum', sans-serif;}
#mainCont .reservation .reservationTap_sub li.on a {color:#000; font-family:'Noto Sans M';}
#mainCont .reservationList {position:relative; width:calc(100% + 23px);}
#mainCont .reservationList:after {content:''; clear:both; display:block;}
#mainCont .reservationList div {position:relative; float:left; margin:0 23px 30px 0; width:calc(25% - 23px); min-height:1px;}
#mainCont .reservationList a {display:block;}
#mainCont .reservationList > img {width:100%; height:198px; max-height:100%;}
#mainCont .reservationList span {display:block;}
#mainCont .reservationList .imgArea {position:relative; overflow:hidden; width:100%; height:100%; border:1px solid #dedede;}
#mainCont .reservationList .imgArea > img {width:100%; height: 197px; max-height: 100%;}
#mainCont .reservationList .imgArea img {transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transition:all 0.3s ease-in-out;/* 부드러운 모션을 위해 추가 */}
#mainCont .reservationList .imgArea img:hover {transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2);}
#mainCont .reservationList .txtArea {margin-top:3px; font-size:17px; color:#555; text-align:center;}
#mainCont .information {background:#eee; padding:25px 0;}
#mainCont .information ul {max-width:1200px; margin:0 auto;}
#mainCont .information ul:after {content:''; display:block; clear:both;}
#mainCont .information ul li {float:left; width:33.333%; height:83px; background-repeat:no-repeat; background-size:83px; padding-left:103px;}
#mainCont .information ul li:nth-child(1) {background-image:url(../images/information01.png);}
#mainCont .information ul li:nth-child(2) {background-image:url(../images/information02.png);}
#mainCont .information ul li:nth-child(3) {background-image:url(../images/information03.png);}
#mainCont .information ul li h4 {font-family:'Noto Sans M'; font-weight:normal; font-size:22px; margin-bottom:6px;}
#mainCont .information ul li span {font-family:'Noto Sans L'; font-size:17px; line-height:1;}
#mainCont .information ul li:nth-child(1) span {font-family:'Roboto'; font-weight:bold; font-size:38px;}

#footer {width:100%; background-color:#383838;}
#footer .footCont {max-width:1200px; margin:0 auto; padding:50px 0 70px;}
#footer .footCont:after {content:''; display:block; clear:both;}
#footer .footlogo {float:left; width:15%; margin-right:5%;}
#footer .footAddr {float:left; width:75%;}
#footer .footAddr p.name {font-family:'Noto Sans B'; color:#d5d5d5;}
#footer .footAddr address {margin-top:12px; font-style:normal;}
#footer .footAddr address span {position:relative; display:block; font-family:'Noto Sans L'; font-size:14px; color:#d5d5d5;}
#footer .footAddr p.copy {margin-top:13px; font-size:13px; color:#d5d5d5;}
 
.quick_wrap {position:fixed; top:25%; right:0; z-index:1; width:120px;}
.quick_wrap .quick_top {background:#222222; color:#fff; text-align:center; font-size:22px; font-family:'Roboto'; padding:25px 0;}
.quick_wrap .quick_cont {background:#fff; border:1px solid #d7d7d7; text-align:center; border-bottom:5px solid #222;}
.quick_wrap .quick_cont .btn {padding:15px 0;}
.quick_wrap .quick_cont .btn a {display:block;}
.quick_wrap .quick_cont .btn span {display:block; padding-top:10px; font-size:16px;}
.quick_wrap .quick_cont .btn span.quick_call {font-family:'Roboto'; color:#0b07a2; font-weight:600; font-size:17px;}

/* 문자상담팝업 */
#pop_wrap2 {width:50%; height:auto; background:transparent; border:0; position:fixed; top:20%; left:50%; transform:translateX(-50%); z-index:11; display:none;}
#pop_wrap2 .pop_cont {height:490px;}
#mask2 {width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.7) repeat; top:0; left:0; z-index:10; display:none;} 
.pop_tit {line-height:1; padding:15px; border-radius:5px 5px 0 0; background-color:#111; font-size:15px; color:#fff;}
.pop_cont {padding:20px; height:260px; overflow-y:scroll; background:#fff; border-radius:0 0 5px 5px;}
.pop_cont .policy .join_title {font-size:14px !important; font-family:'Noto Sans M';}
.pop_cont .policy p {font-size:14px; margin-bottom:10px;}
.pop_btn {position:absolute; top:13px; right:15px; width:20px; height:20px; background:url(../images/btn_popX.png) no-repeat; border:0 none; cursor:pointer; text-indent:-9999em;}
.smsCont .infoBox li {margin-bottom:10px;}
.smsCont .infoBox .phone:after {content:""; display:block; clear:both;}
.smsCont .infoBox .phone select {float:left; width:32%; margin-right:2%;}
.smsCont .infoBox .phone input {float:left; width:32%; margin-right:2%;}
.smsCont .infoBox .phone input:last-child {margin-right:0;}

@media (max-width: 1400px) {
#mainCont .hospital span.imgArea img {height:157px;}
#mainCont .visual .txtBox .inner2 > img {width:400px;}
#mainCont .visual .txtBox p {font-size:33px;}
#mainCont .visual2 .txtBox .inner2 {left:7%;}
}

@media (max-width: 1200px) {
#mainCont .visual2 .txtBox .inner2 {left:3%;}
#mainCont .visual2 .txtBox .inner2 p {margin-bottom:20px;}
#mainCont .visual2 .txtBox .inner2 p:nth-child(1) img {width:580px;}
#mainCont .visual2 .txtBox .inner2 p:nth-child(2) img {width:230px;}
#mainCont .event {padding-left:30px; padding-right:30px; background-position:center right -310px;}
#mainCont .reservation {padding:40px 30px 50px;}
#mainCont .reservationList .imgArea > img {height:167px;}
#footer .footCont {padding:50px 30px 70px;}
}

@media (max-width: 1000px) {
#mainCont .visual .txtBox .inner2 {top:50%; transform:translateY(-50%); right:6%;}
#mainCont .visual .txtBox .inner2 > img {width:300px;}
#mainCont .visual .txtBox p {font-size:28px;}
#mainCont .visual2 .txtBox .inner2 p {margin-bottom:0;}
#mainCont .visual2 .txtBox .inner2 p:first-child {font-size:30px; margin-top:10px;}
#mainCont .visual2 .txtBox .inner2 p:last-child {font-size:48px;}
#mainCont .event .txt1 {font-size:20px;}
#mainCont .event .txt2 {font-size:30px;}
#mainCont .event .txt2 span em {font-size:70px;}
#mainCont .event .txt3 {font-size:22px; margin:10px 0 20px;}
#mainCont .event ul {width:80%;}
#mainCont .reservationList > img {height:158px;}
#mainCont .reservationList .imgArea > img {height:147px;}
}

@media (max-width: 900px) {
#mainCont .event .txt1 {font-size:17px;}
#mainCont .event .txt2 {font-size:30px;}
#mainCont .event .txt2 span em {font-size:50px;}
#mainCont .event .txt3 {font-size:20px;}
#mainCont .reservation .reservationTap_sub ul {width: 70%;}
#mainCont .information {padding:25px; margin-bottom:50px;}
#mainCont .information ul {max-width:none; width:fit-content;}
#mainCont .information ul li {float:none; width:100%;}
#mainCont .information ul li + li {margin-top:25px;}
#pop_wrap2 {width:80%; top:8%;}
}

@media (max-width: 800px) {
#header .kakao {display:inline-block; position:absolute; top:50%; transform:translateY(-50%); right:30px;}
#mainCont h3 {font-size:33px; margin-bottom:25px;}
#mainCont .hospital {margin-bottom:70px;}
#mainCont .visual .txtBox .inner2 img {width:270px;}
#mainCont .visual .txtBox p {font-size:25px;}
#mainCont .visual .txtBox a {font-size:18px; padding:8px 32px; margin-top:20px;} 
#mainCont .visual2 .txtBox .inner2 p {margin-bottom:15px;}
#mainCont .visual2 .txtBox .inner2 p:nth-child(1) img {width:430px;}
#mainCont .visual2 .txtBox .inner2 p:nth-child(2) img {width:170px;}
#mainCont .event {background-position: right 105% center; padding: 30px;}
#mainCont .event .fl {width: 100%; float: none !important; position: relative; top: 0; transform: none;}
#mainCont .event .fr {display: none;}
#mainCont .reservation .reservationTap {border:0; height:100%; position:relative; margin-bottom:15px; overflow:hidden;}
#mainCont .reservation .reservationTap ul {width:100%; display:block; border:1px solid #dedede;}
#mainCont .reservation .reservationTap li {width:50%; background:#fff; border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
#mainCont .reservation .reservationTap li:last-child {border-bottom:none;}
#mainCont .reservation .reservationTap li:nth-child(even) {border-right:none;}
#mainCont .reservation .reservationTap li a {text-align:center; font-weight:400; font-size:16px; display:block; width:100%; height:50px; line-height:50px; padding:0;}
#mainCont .reservation .reservationTap li.on {border-bottom:1px solid #dedede; display:block; background:#00bff3; overflow:hidden;}
#mainCont .reservation .reservationTap li.on a {font-size:15px; color:#fff;}
#mainCont .reservation .reservationTap_sub ul {width:80%;}
#mainCont .reservation .reservationTap_sub li a {font-size:unset;}
#mainCont .reservationList {width:calc(100% + 18px);}
#mainCont .reservationList div {margin:0 18px 23px 0; width:calc(33.333% - 18px);}
#mainCont .reservationList .txtArea {text-align:center;}
#footer .footCont {text-align:center; padding:20px 20px;}
#footer .footlogo {display:none;}
#footer .footAddr {float:none; width:100%;}
#footer .footAddr address {margin-top:8px;}
.noitem {padding:15% 0 5% !important;}
}


@media (max-width: 700px) {
#mainCont .hospital {margin-top:15px; margin-bottom:50px;}
#mainCont .visual .txtBox .inner2 img {width:220px;}
#mainCont .visual .txtBox p {font-size:20px; margin-top:10px;}
.quick_wrap {width:16%; right:0;}
.quick_wrap .quick_top {font-size:16px;}
.quick_wrap .quick_cont .btn span {font-size:14px;}
.quick_wrap .quick_cont .btn span.quick_call {font-size:14px;}
}

@media (max-width: 540px) {
#header {text-align:left; padding:20px 20px 20px;}
#header > img {width:130px;}
#header .kakao {right:20px;}
#header .kakao img {width:100px;}
#mainCont h3 {font-size:20px; margin-bottom:18px;}
#mainCont .network {display:block;}
#mainCont .hospital span.imgArea img {height: 137px;}
#mainCont .visual .txtBox .inner2 > img {width:150px;}
#mainCont .visual .txtBox p {font-size:15px; margin-top:10px;}
/* #mainCont .visual2 {display:none;} */
#mainCont .comment p {font-size:15px;}
#mainCont .comment a {margin:20px auto 0; width:200px; padding:10px 0; font-size:14px;}
#mainCont .event {padding:20px;}
#mainCont .event .txt1 {font-size:15px;}
#mainCont .event .txt2 {margin: 10px 0 5px;}
#mainCont .event .txt2 span em {font-size: 40px;}
#mainCont .event .txt3 {font-size: 17px; margin: 0 0 20px;}
#mainCont .event li {padding-left:25px; font-size:15px; color:#fff; margin-bottom:8px;}
#mainCont .reservation {padding:30px 20px 30px;}
#mainCont .reservation .reservationTap li a {font-size:15px;}
#mainCont .reservationList {width:calc(100% + 13px);}
#mainCont .reservationList div {margin:0 13px 23px 0; width:calc(50% - 13px);}
#mainCont .reservationList .txtArea {font-size:15px;}
#mainCont .information {margin-bottom:20px;}
#mainCont .information ul li {height:auto; background-size:25px; padding-left:30px;}
#mainCont .information ul li + li {margin-top:0;}
#mainCont .information ul li h4 {font-size:15px; margin-bottom:3px;}
#mainCont .information ul li span {font-size:14px;}
#mainCont .information ul li:nth-child(1) span {font-size:26px;}
#mainCont .information ul li:nth-child(2) {background:none; margin-bottom:15px;}
#mainCont .information ul li:nth-child(2) h4 {display:none;}
#mainCont .information ul li:nth-child(3) span em {display:none;}
#footer .footAddr p.name {font-family:'Noto Sans L'; font-size:14px;}
#footer .footAddr p.copy {font-size:12px;}
.noitem {padding:15% 0 5% !important; background-size: 10% !important; font-size: 13px;}
}

@media (max-width: 414px) {
.quick_wrap {display:none;}
/* .quick_wrap {width:21%; top:15%;}
.quick_wrap .quick_cont .btn img {width:33%;} */
#mainCont .reservationList > img {height:124px;}
}

@media (max-width: 375px) {
#header > img {width:130px;}
.premium img {width: 55px;}
}

@media (max-width: 330px) {
#mainCont .reservationList .txtArea {font-size:13px;}
#header > img {width:130px;}
}


/* 이벤트페이지 검색 */
.searchBox {margin-bottom:30px;}
.searchBox:after {content:""; display:block; clear:both;}
.searchBox > div {float:right; width:30%;}
.searchBox > div > input {float:left; width:84%; margin-right:1%;}
.searchBox > div > a {float:left; width:15%; text-align:center; display:block; padding:10px; background:#333 url(../images/ico_search.png) no-repeat center; text-indent:-9999em; background-size:45%;}
@media (max-width: 800px) {
.searchBox > div {width:50%;}
}
@media (max-width: 414px) {
.searchBox {margin-bottom:10px;}
.searchBox > div {width:100%;}
.searchBox > div > a {background-size:35%;}
}

/* page */
.paging {position:relative; margin:20px auto 10px;}
.paging p {margin:0 auto; padding:0; text-align:center; zoom:1;}
.paging p a {display:inline-block; margin:0 0; padding:0 5px; width:32px; height:32px; line-height:30px; color:#333; vertical-align:middle; border:1px solid #d5d5d5;}
.paging p a:hover, .paging p a:focus, .paging p a:active {color:#000; border:1px solid #333;}
.paging p a.checkOn {font-family:'Noto Sans M'; color:#fff; background:#2dbbec; border:1px solid #2dbbec;}
.paging p a.pre {width:32px; margin:0px 0 0; padding:0; background:url(../images/pagingIcon.png) 0 0 no-repeat;}
.paging p a.pre:hover, .paging p a.pre:focus, .paging p a.pre:active {background-position:-38px 0;}
.paging p a.first {width:32px; margin:0px 0 0; padding:0; line-height:32px; background:url(../images/pagingIcon.png) -76px 0 no-repeat;}
.paging p a.first:hover, .paging p a.first:focus, .paging p a.first:active {background-position:-114px 0;}
.paging p a.next {width:32px; margin:0px 0 0; padding:0; background:url(../images/pagingIcon.png) 0 -38px no-repeat;}
.paging p a.next:hover, .paging p a.next:focus, .paging p a.next:active {background-position:-38px -38px;}
.paging p a.last {width:32px; margin:0px 0 0; padding:0; background:url(../images/pagingIcon.png) -76px -38px no-repeat;}
.paging p a i {line-height:32px;}
.paging p a.last:hover, .paging p a.last:focus, .paging p a.last:active {background-position:-114px -38px;}
.paging p a.pre span, .paging p a.first span, .paging p a.next span, div.paging p a.last span {display:none;}