/* font */ @import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); /*font-family: 'Cormorant Unicase', serif; font-family: 'Lora', serif;*/ @font-face { font-family: 'SEBANG_Gothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SEBANG_Gothic'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'ROEHOE-CHAN'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff') format('woff'); font-weight: normal; font-style: normal; } #mWhat2 {width:100%; height:180px;background:#f9f9f9;display:table;margin-top:50px;} #mWhat2 > div {display:table-cell; text-align:center; vertical-align:middle; box-sizing:border-box; padding:0 2%;} #mWhat2 .en {font-size:0.6em; color:#007ad8; letter-spacing:-0.5px; font-weight:500; text-transform:uppercase;} #mWhat2 h2 {font-size:3.2em; color:#fff; font-weight:200; margin:15px 0 30px;} #mWhat2 h2 span {font-weight:700;} #mWhat2 .t1 {font-size:1.2em; color:#333; line-height:1.2em; margin-bottom:20px;font-weight:500;} #mWhat2 ul li {display:inline-block; width:250px; line-height:60px; background:#fff; margin:0 3px;} #mWhat2 ul li a {font-size:1.8em; color:#4b4b4b; font-weight:500;background:#000} #mWhat2 ul li:nth-child(1) {background:#000} #mWhat2 ul li:nth-child(1) a {color:#fff;} #mWhat2 ul li:nth-child(2) {background:#000} #mWhat2 ul li:nth-child(2) a {color:#fff;} @media screen and (max-width:1399px){ #mWhat2 {height:500px;} } @media screen and (max-width:976px){ #mWhat2 {height:auto; padding:11% 0} #mWhat2 h2 {font-size:2.5em; margin:3% 0 4%} #mWhat2 .t1 {font-size:1em; margin-bottom:8%} #mWhat2 ul li {width:200px; line-height:50px;} #mWhat2 ul li a {font-size:1em;} } @media screen and (max-width:550px){ #mWhat2 {padding:15% 0} #mWhat2 ul li {width:40%; line-height:45px; margin:0;} } .imgList1 {width:100%; overflow:hidden; margin-top:50px;} .imgList1 > li {margin-bottom:70px;} .imgList1 > li:last-child {margin-bottom:0;} .imgList1 dl {position:relative; box-sizing:border-box; padding:10px 0 10px 53%; min-height:350px;} .imgList1 dl:before {content:''; display:block; width:50%; height:100%; position:absolute; left:0; top:0; background-repeat:no-repeat; background-position:center center; background-size:cover;} .imgList1 dl dt {font-size:1.6em; color:#212121; font-weight:700; margin-bottom:25px; line-height:30px;} .imgList1 dl dt span {font-size:0.8em; color:#fff; display:inline-block; width:38px; border-radius:5px; background:#347ed3; text-align:center; margin-right:10px;} .imgList1 > li:nth-child(even) dl {padding-left:0; padding-right:53%} .imgList1 > li:nth-child(even) dl:before {left:auto; right:0;} .imgList1 > li p {margin-top:10px;} .imgList2 {width:100%; overflow:hidden;} .imgList2 > li {float:right; width:calc(50% - 20px); margin-top:30px;} .imgList2 > li:nth-child(odd) {float:left; clear:both;} .imgList2 > li:first-child, .imgList2 > li:nth-child(2) {margin-top:0;} .imgList2 > li img {width:100%;} .imgList3 {width:100%; overflow:hidden;} .imgList3 > li {float:left; width:calc(25% - 15px); margin-right:20px;border:1px solid #e9e9e9;padding:10px 10px;margin-bottom:20px;} .imgList3 > li:nth-of-type(4n) {margin-right:0;} .imgList3 > li img {width:100%;} .imgList4 {width:100%; overflow:hidden;} .imgList4 > li {float:left; width:calc(33.33% - 20px); margin-right:20px;margin-bottom:20px;} .imgList4 > li:nth-of-type(3n) {margin-right:0;} .imgList4 > li img {width:100%;} .imgList5 {width:100%; overflow:hidden;} .imgList5 > li {float:left; width:calc(25% - 10px); margin-right:13px;} .imgList5 > li:nth-of-type(4n) {margin-right:0;} .imgList5 > li img {width:100%;} .imgList1 dl.disease1_img3:before {background-image:url(../images/sub/disease1_img3.jpg)} .imgList1 dl.disease1_img4:before {background-image:url(../images/sub/disease1_img4.jpg)} .imgList1 dl.disease2_img2:before {background-image:url(../images/sub/disease2_img2.jpg)} .imgList1 dl.disease2_img3:before {background-image:url(../images/sub/disease2_img3.jpg)} .imgList1 dl.disease2_img4:before {background-image:url(../images/sub/disease2_img4.jpg)} .imgList1 dl.disease2_img5:before {background-image:url(../images/sub/disease2_img5.jpg)} .imgList1 dl.disease3_img2:before {background-image:url(../images/sub/disease3_img2.jpg)} .imgList1 dl.disease3_img3:before {background-image:url(../images/sub/disease3_img3.jpg)} .imgList1 dl.disease4_img5:before {background-image:url(../images/sub/disease4_img5.jpg)} .imgList1 dl.disease4_img6:before {background-image:url(../images/sub/disease4_img6.jpg)} .imgList1 dl.disease5_img6:before {background-image:url(../images/sub/disease5_img6.jpg)} .imgList1 dl.disease5_img7:before {background-image:url(../images/sub/disease5_img7.jpg)} .imgList1 dl.disease5_img8:before {background-image:url(../images/sub/disease5_img8.jpg)} .imgList1 dl.disease6_img2:before {background-image:url(../images/sub/disease6_img2.jpg)} .imgList1 dl.disease6_img3:before {background-image:url(../images/sub/disease6_img3.jpg)} .imgList1 dl.disease6_img4:before {background-image:url(../images/sub/disease6_img4.jpg)} .imgList1 dl.disease6_img5:before {background-image:url(../images/sub/disease6_img5.jpg)} .imgList1 dl.disease6_img6:before {background-image:url(../images/sub/disease6_img6.jpg)} .imgList1 dl.disease6_img7:before {background-image:url(../images/sub/disease6_img7.jpg)} .imgList1 dl.disease8_img2:before {background-image:url(../images/sub/disease8_img2.jpg)} .imgList1 dl.disease8_img3:before {background-image:url(../images/sub/disease8_img3.jpg)} .imgList1 dl.disease8_img4:before {background-image:url(../images/sub/disease8_img4.jpg)} .imgList1 dl.disease9_img2:before {background-image:url(../images/sub/disease9_img2.jpg)} .imgList1 dl.disease9_img3:before {background-image:url(../images/sub/disease9_img3.jpg)} .imgList1 dl.disease9_img4:before {background-image:url(../images/sub/disease9_img4.jpg)} .imgList1 dl.disease9_img5:before {background-image:url(../images/sub/disease9_img5.jpg)} .imgList1 dl.disease9_img6:before {background-image:url(../images/sub/disease9_img6.jpg)} .imgList1 dl.disease9_img7:before {background-image:url(../images/sub/disease9_img7.jpg)} .imgList1 dl.disease9_img8:before {background-image:url(../images/sub/disease9_img8.jpg)} .imgList1 dl.disease10_img3:before {background-image:url(../images/sub/disease10_img3.jpg)} .imgList1 dl.disease10_img4:before {background-image:url(../images/sub/disease10_img4.jpg)} .imgList1 dl.disease10_img5:before {background-image:url(../images/sub/disease10_img5.jpg)} .imgList1 dl.disease10_img6:before {background-image:url(../images/sub/disease10_img6.jpg)} .imgList1 dl.general1_img2:before {background-image:url(../images/sub/general1_img2.jpg)} .imgList1 dl.general1_img3:before {background-image:url(../images/sub/general1_img3.jpg)} .imgList1 dl.general1_img4:before {background-image:url(../images/sub/general1_img4.jpg)} .imgList1 dl.check1_img2:before {background-image:url(../images/sub/check1_img2.jpg)} .imgList1 dl.check1_img3:before {background-image:url(../images/sub/check1_img3.jpg)} .imgList1 dl.check1_img4:before {background-image:url(../images/sub/check1_img4.jpg)} .imgList1 dl.check1_img5:before {background-image:url(../images/sub/check1_img5.jpg)} .imgList1 dl.check4_img2:before {background-image:url(../images/sub/check4_img2.jpg)} .imgList1 dl.check4_img3:before {background-image:url(../images/sub/check4_img3.jpg)} .imgList1 dl.check4_img4:before {background-image:url(../images/sub/check4_img4.jpg)} .imgList1 dl.check4_img5:before {background-image:url(../images/sub/check4_img5.jpg)} @media screen and (max-width:1024px){ .imgList1 {margin-top:30px;} .imgList2 > li {width:calc(50% - 10px);} } @media screen and (max-width:767px){ .imgList1 {margin-top:4%;} .imgList1 > li {margin-bottom:7%} .imgList1 dl {padding-left:0; min-height:0;} .imgList1 dl:before {width:100%; height:55vw; position:relative; margin-bottom:5%} .imgList1 dl dt {font-size:1.5em; line-height:30px; margin-bottom:3%} .imgList1 dl dt span {width:30px;} .imgList1 > li:nth-child(even) dl {padding-right:0;} .imgList1 > li p {margin-top:1%} .imgList2 > li {float:none !important; width:100%; margin-bottom:4%;} .imgList2 > li:last-child {margin-bottom:0;} .imgList3 > li {width:49%; margin-right:2%; margin-bottom:4%;} .imgList3 > li:nth-of-type(even) {margin-right:0;} .imgList4 > li {width:49%; margin-right:2%; margin-bottom:4%;} .imgList4 > li:nth-of-type(3n) {margin-right:2%;} .imgList4 > li:nth-of-type(even) {margin-right:0;} .imgList5 > li {width:49%; margin-right:2%; margin-bottom:4%;} .imgList5 > li:nth-of-type(3n) {margin-right:2%;} .imgList5 > li:nth-of-type(even) {margin-right:0;} } .orderList1 > li {font-size:1.05em; color:#686868; line-height:1.3em; margin:8px 0; position:relative; padding-left:12px;} .orderList1 > li:before {content:''; display:block; width:3px; height:3px; background:#003777; position:absolute; left:0; top:11px;} .orderList2 > li {position:relative; counter-increment:number; padding-left:45px; margin-bottom:10px;} .orderList2 > li:before {content:counter(number, decimal-leading-zero); position:absolute; left:0; top:0; display:block; width:30px; line-height:30px; border-radius:3px; background:#347ed3; font-size:0.95em; color:#fff; text-align:center; font-weight:700} .orderList2 > li p {font-size:1.1em; color:#343434; font-weight:500; line-height:30px;} .orderList2.border > li {margin-bottom:15px; padding-bottom:15px; border-bottom:1px dashed #dedede} .orderList2.w-50 {overflow:hidden; width:100%;} .orderList2.w-50 > li {float:left; width:49%;} .orderList2.w-50 > li:nth-child(even) {float:right;} .orderList2.w-50 > li:nth-child(even) + li {clear:both;} .orderList2p > li {position:relative; counter-increment:number; padding-left:45px; margin-bottom:10px;} .orderList2p > li:before {content:counter(number, decimal-leading-zero); position:absolute; left:0; top:0; display:block; width:30px; line-height:30px; border-radius:3px; background:#347ed3; font-size:0.95em; color:#fff; text-align:center; font-weight:700} .orderList2p > li p {font-size:1.1em; color:#343434; font-weight:500; line-height:30px;} .orderList25 > li {position:relative; counter-increment:number; padding-left:45px; margin-bottom:10px;} .orderList25 > li:before {position:absolute; left:0; top:0; display:block; width:30px; line-height:30px;} .orderList25 > li p {font-size:1.1em; color:#343434; font-weight:500; line-height:30px;} .orderList25.border > li {margin-top:20px;margin-bottom:15px; padding:0 20px 15px;border-bottom:2px solid #444;margin-left:40px;margin-right:40px;} .orderList26 > li {position:relative; counter-increment:number; padding-left:45px; margin-bottom:10px;} .orderList26 > li:before {position:absolute; left:0; top:0; display:block; width:30px; line-height:30px;} .orderList26 > li p {font-size:1.1em; color:#343434; font-weight:500; line-height:30px;} .orderList26.border > li {margin-top:20px;margin-bottom:15px; padding:0 0 15px;border-bottom:2px solid #444;} .orderList3 > li {position:relative; counter-increment:number; padding-left:45px; margin-bottom:10px;} .orderList3 > li:before {content:counter(number, decimal-leading-zero); position:absolute; left:0; top:0; display:block; width:30px; line-height:30px; border-radius:3px; background:#347ed3; font-size:0.95em; color:#fff; text-align:center; font-weight:700} .orderList3 > li p {font-size:1em; color:#686868; font-weight:400; line-height:30px;} /* 테이블 레이아웃 */ .tb_tit{color:#8bc5c2; font-size:1.4em; font-weight:500; text-align:center; margin-bottom:1em;} .tb_tit span{border-bottom:2px solid #8bc5c2} .tb_st_01{width:100%;border:#e9e9e9 1px solid; } .tb_st_01 thead {border-bottom:#8bc5c2 2px solid; color:#232323;font-family:'Montserrat', 'S Dream',sans-serif;font-size:1.5em;} .tb_st_01 thead th {padding:20px;background:#f6f6f6;border:#e9e9e9 1px solid;font-weight:500;font-family:'Montserrat', 'S Dream',sans-serif;letter-spacing:-0.5px;font-size:1.5em;} .tb_st_01 tbody th{padding: 20px ;background:#fff;border:#e9e9e9 1px solid; color:#333; text-align:Center; font-weight:500;font-family:'Montserrat', 'S Dream',sans-serif;letter-spacing:-0.5px;font-size:1.5em;} .tb_st_01 tbody td {padding: 20px ;background:#fff;border:#e9e9e9 1px solid;color:#444;text-align:left; word-break:keep-all;font-weight:500;font-family:'Montserrat', 'S Dream',sans-serif;letter-spacing:-0.5px;font-size:1.5em;} .tb_st_01 tbody td.top{vertical-align:top} .tb_st_01.center tbody td{text-align:center} .tb_st_01 .n-bd{border-color:rgba(255,255,255,0); padding:0 !important;} .tb_st_01 .n-pd{padding:0 !important;} .tb_st_01 .n-bg{background:transparent;} .tb_st_01 .bg{background: #8bc5c2; color: #FFF; } .tb_st_01 .td-bg{background:#DDF4F6; border-color:#FFF} .tb_st_01.c-pd td, .tb_st_01.c-pd th{padding-left:3px !important; padding-right:3px !important;} .tb_st_01.left_th tbody th{background:#f6f6f6; border-right:2px solid #FCA184} .tb_st_01.first-bold th:first-child{font-weight:500; font-size:1.1em} .tb_st_01.first-bold td:first-child{font-weight:400; color:#000} @media all and (max-width:650px) { .tb_st_01{font-size:1.3em} .tb_st_01 thead th {padding:10px 5px;} .tb_st_01 tbody th{padding:10px 5px;} .tb_st_01 tbody td {padding:10px 5px; word-break:break-all;} } .tb_st_02 {width:100%; border-top:2px solid #b79e6b; background:#fff;} .tb_st_02 thead th {font-size:1.5em; color:#000; border-bottom:1px solid #ddd; padding:15px 0; background:#f2ede3; font-weight:500; border-left:1px solid #ddd} .tb_st_02 thead th:first-child {border-left:0;} .tb_st_02 tbody th {font-size:1.5em; font-weight:500; color:#212121; background:#f7f7f7; padding:15px 0; border-bottom:1px solid #ddd;} .tb_st_02 tbody td {font-size:1.5em; color:#212121; padding:15px 10px; text-align:center; border-bottom:1px solid #ddd; border-left:0px solid #ddd;} .tb_st_02 tbody td.bl {border-left:0;} .tb_st_02 .bg_step1 {background-color:#e9f3ff} .tb_st_02 .bg_step2 {background-color:#ffeade} .tb_st_02 .bg_step3 {background-color:#faffe6} .tb_st_02 .bg_step4 {background-color:#e5e7f8} .tb_st_02 .bg_step5 {background-color:#f6e5f8} .tb_st_02 .bg_step6 {background-color:#e5f8f6} .tb_st_03 {width:100%; border-top:2px solid #003777; background:#fff;} .tb_st_03 thead th {font-size:1.3em; color:#000; border-bottom:1px solid #ddd; padding:10px 0; background:#f7fbff; font-weight:500; border-left:0px solid #ddd; line-height:1.7em;} .tb_st_03 thead th:first-child {border-left:0;} .tb_st_03 tbody th {font-size:1em; font-weight:500; color:#212121; background:#f7f7f7; padding:10px 0; border-bottom:1px solid #ddd; line-height:1.7em;} .tb_st_03 tbody td {font-size:0.5em; color:#212121; line-height:1.7em; padding:10px 15px; text-align:center; border-bottom:1px solid #ddd; border-left:0px solid #ddd;} .tb_st_03 tbody td.bl {border-left:0;} @media screen and (max-width:767px){ .orderList1 > li {font-size:1em; margin:5px 0; padding-left:10px;} .orderList1 > li:before {top:8px; width:2px; height:2px;} .orderList2 > li {padding-left:35px; margin-bottom:5px;} .orderList2 > li:before {width:25px; line-height:25px;} .orderList2 > li p {font-size:1em; line-height:25px;} .orderList2.border > li {margin-bottom:10px; padding-bottom:10px;} .orderList3 > li {padding-left:35px; margin-bottom:5px;} .orderList3 > li:before {width:25px; line-height:25px;} .orderList3 > li p {font-size:1em; line-height:25px;} .tb_st_01 thead th {font-size:1.1em; padding:10px 0;} .tb_st_01 tbody td, .tb_st_01 tbody th {font-size:0.95em; padding:10px 3px;} .tb_st_03 thead th {font-size:1em; padding:13px 0;} .tb_st_03 tbody td, .tb_st_01 tbody th {font-size:0.8em; padding:13px 8px;} } #greeting {background:url(http://perfects.kr/images/02/30.jpg) no-repeat center center; box-sizing:border-box; padding:210px 50px 60px; background-size:cover;} #greeting h3 {font-size:4.2em; font-weight:800; color:rgba(255,255,255,0.4); line-height:1em; letter-spacing:0; font-family:'Barlow Condensed'; font-style:italic; text-indent:70px} #greeting div {width:100%; background:#fff; box-sizing:border-box; padding:80px 80px 60px; margin-top:-15px; letter-spacing:-0.07em;} #greeting div .t1 {font-size:2.1em; color:#12001f; font-weight:500; margin-bottom:25px;} #greeting div .t2 {font-size:1.3em; line-height:1.6em; color:#003777; font-weight:500; margin-bottom:35px;} #greeting div .t3 {font-size:1.05em; color:#686868; line-height:2em;} #greeting div .name {margin-top:25px; text-align:top; font-size:1em; color:#000; font-weight:500; text-align:right;} #greeting div .name span {font-size:2.3em; font-family:'JSArirangPPURI-Regular'; margin-left:5px;} #greeting div .name span.img { transform:translateY(-10px)} @media screen and (max-width:1024px){ #greeting {padding:120px 30px 40px;} #greeting div {padding:40px 35px} } @media screen and (max-width:767px){ #greeting {padding:16% 3% 4%} #greeting h3 {font-size:3.8em; text-indent:5%} #greeting div {padding:6% 5%;} #greeting div .t1 {font-size:1.8em; margin-bottom:4%} #greeting div .t2 {font-size:1.15em; margin-bottom:5%} #greeting div .t3 {font-size:1em; line-height:1.7em;} #greeting div .name {margin-top:4%} #greeting div .name span.img img {height:35px;} } #doctor {width:100%; position:relative;padding-bottom:500px } #doctor .img {width:30%; position:relative; z-index:100;} #doctor .img img {width:100%;margin-top:10%;} #doctor .txt_box {position:absolute; right:0; top:0; width:75%;box-sizing:border-box; padding:80px 40px 80px 80px; } #doctor .txt_box .en {font-size:0.6em; color:#003777; text-transform:uppercase; letter-spacing:0.3em; opacity:0.5; font-weight:500;} #doctor .txt_box h4 {font-size:1.3em; color:#212121; font-weight:600; margin-top:5px;} #doctor .txt_box h4 span {font-size:2.2em; color:#003777;} #doctor .txt_box h4:after {content:''; display:block; width:60px; height:2px; background:#003777; margin:3% 0 4%} @media screen and (max-width:1399px){ #doctor .txt_box {padding:5% 0 5% 10vw} } @media screen and (max-width:1024px){ #doctor {padding-bottom:0;} #doctor .img {width:100%} #doctor .txt_box {position:relative; width:100%; padding:10% 6%; background-size:50% auto} #doctor .txt_box h4 {margin-top:0; font-size:1.2em;} #doctor .txt_box h4:after {width:45px; height:1px; margin:2% 0 6%} } #doctor2 {width:100%; position:relative;padding:20px} #doctor2 .img {width:40%; position:relative; z-index:100;} #doctor2 .img img {width:100%;} #doctor2 .txt_box {position:absolute; right:0; top:0; width:65%;box-sizing:border-box; padding:80px 40px 80px 80px; } #doctor2 .txt_box .en {font-size:0.6em; color:#003777; text-transform:uppercase; letter-spacing:0.3em; opacity:0.5; font-weight:500;} #doctor2 .txt_box h4 {font-size:1.3em; color:#212121; font-weight:600; margin-top:5px;} #doctor2 .txt_box h4 span {font-size:2.2em; color:#003777;} #doctor2 .txt_box h4:after {content:''; display:block; width:60px; height:2px; background:#003777; margin:3% 0 4%} @media screen and (max-width:1399px){ #doctor2 .txt_box {padding:5% 0 5% 10vw} } @media screen and (max-width:1024px){ #doctor2 {padding-bottom:0;} #doctor2 .img {width:100%} #doctor2 .txt_box {position:relative; width:100%; padding:10% 6%; background-size:50% auto} #doctor2 .txt_box h4 {margin-top:0; font-size:1.2em;} #doctor2 .txt_box h4:after {width:45px; height:1px; margin:2% 0 6%} } #doctor3 {width:100%; position:relative;padding:20px} #doctor3 .img {width:30%; position:relative; z-index:100;} #doctor3 .img img {width:100%;} #doctor3 .txt_box {position:absolute; right:0; top:0; width:85%;box-sizing:border-box; padding:80px 40px 80px 80px; } #doctor3 .txt_box .en {font-size:0.6em; color:#003777; text-transform:uppercase; letter-spacing:0.3em; opacity:0.5; font-weight:500;} #doctor3 .txt_box h4 {font-size:1.3em; color:#212121; font-weight:600; margin-top:5px;} #doctor3 .txt_box h4 span {font-size:2.2em; color:#003777;} #doctor3 .txt_box h4:after {content:''; display:block; width:60px; height:2px; background:#003777; margin:3% 0 4%} @media screen and (max-width:1399px){ #doctor3 .txt_box {padding:5% 0 5% 10vw} } @media screen and (max-width:1024px){ #doctor3 {padding-bottom:0;} #doctor3 .img {width:100%} #doctor3 .txt_box {position:relative; width:100%; padding:10% 6%; background-size:50% auto} #doctor3 .txt_box h4 {margin-top:0; font-size:1.2em;} #doctor3 .txt_box h4:after {width:45px; height:1px; margin:2% 0 6%} } #map .map_box {width:100%; height:550px;} #map .map_box.root_daum_roughmap .wrap_map {height:100%;} #map .map_info {margin-top:50px;} #map .map_info .t1 {font-size:2em; color:#212121; font-weight:500;} #map .map_info .t2 {font-size:1.5em; color:#212121; margin-top:30px;font-weight:500;} @media screen and (max-width:767px){ #map .map_box {height:300px;} #map .map_info {margin-top:6%} #map .map_info .t1 {font-size:1.7em;} #map .map_info .t2 {font-size:0.95em; margin-top:1%;} } #guide {width:100%; overflow:hidden; position:relative} #guide:before {content:''; display:block; width:50%; height:100%; position:absolute; left:0; top:0; background:url(../images/sub/guideBG.jpg) no-repeat center center; background-size:cover} #guide div {float:right; width:50%; background:#347ed3 url(../images/sub/guide_img1.png) no-repeat 115% 115%; box-sizing:border-box; padding:70px 50px; color:#fff;} #guide div h3 {font-size:2.3em; border-bottom:2px solid rgba(255,255,255,0.8); padding-bottom:10px;} #guide div .time {margin-top:35px;} #guide div .time li {font-size:1.2em; line-height:2em; font-weight:500;} #guide div .time li:before {content:'·'; display:inline-block; margin-right:8px;} #guide div .num {margin:30px 0 10px;} #guide div .num li {font-size:1em; opacity:0.9; line-height:1.7em;} #guide div .sns {margin-bottom:30px;} #guide div .sns li {display:inline-block; margin:0 1px;} #guide div .info li {display:inline-block; box-sizing:border-box; padding:8px 35px; border:1px solid rgba(255,255,255,0.5); margin:3px 2px;} @media screen and (max-width:1024px){ #guide div {padding:60px 40px;} } @media screen and (max-width:767px){ #guide:before {position:relative; width:100%; height:350px;} #guide div {float:none; width:100%; padding:7% 5%; background-size:70% auto} #guide div h3 {padding-bottom:10px;} #guide div .time {margin-top:6%} #guide div .num {margin:3% 0 1%} #guide div .sns {margin-bottom:6%} #guide div .sns li {margin:0;} #guide div .sns li img {width:25px;} #guide div .info li {padding:6px 25px; margin:1px 0;} } .immunization_box {overflow-x:scroll; } .immunization_box .tb_st_02 {min-width:1200px;} .cln-top {display:table; width:100%; height:400px; background-repeat:no-repeat; background-position:center center; background-size:cover;} .cln-top div {display:table-cell; text-align:center; vertical-align:middle;} .cln-top h3 {font-size:3.1em; color:#f7fa02; font-weight:700; line-height:1em; margin:0 0 30px;} .cln-top h3:before {content:'HAPPYAN'; display:block; font-size:0.2em; color:rgba(255,255,255,0.3); letter-spacing:0.8em; font-weight:500; text-transform:uppercase;} .cln-top .t1 {font-size:1.1em; color:#fff; line-height:1.8em;} .internal1-top {background-image:url(../images/sub/internal1-top.jpg)} .internal2-top {background-image:url(../images/sub/internal2-top.jpg)} .disease1-top {background-image:url(../images/sub/disease1-top.jpg)} .disease2-top {background-image:url(../images/sub/disease2-top.jpg)} .disease3-top {background-image:url(../images/sub/disease3-top.jpg)} .disease4-top {background-image:url(../images/sub/disease4-top.jpg)} .disease5-top {background-image:url(../images/sub/disease5-top.jpg)} .disease6-top {background-image:url(../images/sub/disease6-top.jpg)} .disease7-top {background-image:url(../images/sub/disease7-top.jpg)} .disease8-top {background-image:url(../images/sub/disease8-top.jpg)} .disease9-top {background-image:url(../images/sub/disease9-top.jpg)} .disease10-top {background-image:url(../images/sub/disease10-top.jpg)} .general1-top {background-image:url(../images/sub/general1-top.jpg)} .general2-top {background-image:url(../images/sub/general2-top.jpg)} .general3-top {background-image:url(../images/sub/general3-top.jpg)} .general2-2-top {background-image:url(../images/sub/general2-2-top.jpg)} .general3-2-top {background-image:url(../images/sub/general3-2-top.jpg)} .general4-top {background-image:url(../images/sub/general4-top.jpg)} .general5-top {background-image:url(../images/sub/general5-top.jpg)} .check1-top {background-image:url(../images/sub/check1-top.jpg)} .check2-top {background-image:url(../images/sub/check2-top.jpg)} .check3-top {background-image:url(../images/sub/check3-top.jpg)} .check4-top {background-image:url(../images/sub/check4-top.jpg)} .check5-top {background-image:url(../images/sub/check5-top.jpg)} .check6-top {background-image:url(../images/sub/check6-top.jpg)} .clnSection {width:100%; box-sizing:border-box; border:1px solid #dedede} .cln-section {width:100%; box-sizing:border-box; padding:120px 50px;} .cln-section2 {width:100%; box-sizing:border-box; padding:20px 40px;} .s-tit1 {font-size:2.2em; color:#003777; font-weight:500; line-height:1.5em;font-family:'Montserrat', 'S Dream', sans-serif;} .s-tit2 {font-size:1.5em; color:#333; font-weight:600; line-height:2.5em;font-family:'Montserrat', 'S Dream', sans-serif;} .s-txt1 {font-size:1.05em; color:#686868; line-height:2.2em; margin-top:40px;} .s-txt2 {font-size:1.15em; color:#686868; line-height:2.2em; margin-top:10px;letter-spacing:-0.7px} .s-txt3 {font-size:0.95em; font-weight:400; color:#686868; line-height:1.6em;} .s-txt4 {font-size:1em; color:#222; line-height:1.6em; margin-top:20px;} .bg01 {background-color:#f5f5f5} .bg02 {background-color:#fff} .bd01 {box-sizing:border-box; border:5px solid #ededed; padding:15px 30px;} .bd01-2 {box-sizing:border-box; border:5px solid #ededed; padding:0px 10px 10px;height:310px;} .bd01-22 {box-sizing:border-box; border:5px solid #ededed; padding:0px 15px 15px;height:200px;} .bd01-23 {box-sizing:border-box; border:5px solid #ededed; padding:0px 8px 10px;height:230px;} .bd01-200 {box-sizing:border-box; border:5px solid #ededed; padding:0px 15px 15px;height:230px;} .bd01-2020 {box-sizing:border-box; border:5px solid #ededed; padding:0px 20px 20px;height:180px;} @media screen and (max-width:1399px){ .cln-section {padding:80px 40px} .cln-section2 {padding:40px 20px} } @media screen and (max-width:1024px){ .s-txt1 {margin-top:20px;} } @media screen and (max-width:767px){ .cln-top {height:310px;} .cln-top h3 {font-size:2.7em; margin:0 0 4%} .cln-top h3:before {font-size:0.15em;} .cln-top .t1 {font-size:1em;} .cln-section {padding:7% 4%} .s-tit1 {font-size:1.8em;} .s-tit2 {font-size:1.4em;} .s-txt1 {font-size:1em; margin-top:3%; line-height:1.8em;} .s-txt2 {font-size:1em; margin-top:2%;line-height:1.8em;} .s-txt3 {font-size:0.95em; line-height:1.8em;} .s-txt333 {font-size:0.95em; line-height:1.5em;} .s-txt4 {margin-top:2%;} .bd01 {border-width:4px; padding:2% 3%} .bd01-2 {border-width:4px; padding:2% 3%} .bd01-22 {border-width:4px; padding:2% 3%} .bd01-23 {border-width:4px; padding:2% 3%} } .zzCont {position:relative; overflow:hidden;} .zzCont:after {content:''; display:block; width:100%; height:100%; position:absolute; right:0; top:0; background-repeat:no-repeat; background-position:right center; background-size:contain;} .zzCont > div {width:60%; position:relative; z-index:10;} .zzCont.w-100:after {display:none;} .zzCont.w-100 > div {width:100%;} .zzCont.fl_r:after {background-position:left center;} .zzCont.fl_r > div {float:right;} .internal1_img1:after {background-image:url(../images/sub/internal1_img1.jpg)} .internal2_img1:after {background-image:url(../images/sub/internal2_img1.jpg)} .disease1_img1:after {background-image:url(../images/sub/disease1_img1.jpg); background-size:40% auto;} .disease1_img2:after {background-image:url(../images/sub/disease1_img2.jpg)} .disease1_img6:after {background-image:url(../images/sub/disease1_img6.jpg);} .disease1_img7:after {background-image:url(../images/sub/disease1_img7.jpg); background-color:#e3e7f0;} .disease2_img1:after {background-image:url(../images/sub/disease2_img1.jpg)} .disease2_img7:after {background-image:url(../images/sub/disease2_img7.jpg); background-color:#e3e7f0;} .disease3_img1:after {background-image:url(../images/sub/disease3_img1.jpg); background-color:#faf2f3;} .disease4_img1:after {background-image:url(../images/sub/h0.jpg);background-size:40%;background-position:95% 50%;} .disease4_img2:after {background-image:url(../images/sub/h1.jpg);background-size:40%;background-position:95% 50%;} .disease5_img1:after {background-image:url(../images/sub/disease5_img1.jpg); background-size:40% auto;} .disease5_img2:after {background-image:url(../images/sub/disease5_img2.jpg)} .disease5_img5:after {background-image:url(../images/sub/disease5_img5.jpg)} .disease6_img1:after {background-image:url(../images/sub/disease6_img1.jpg); background-size:40% auto; background-position:right bottom} .disease7_img1:after {background-image:url(../images/sub/disease7_img1.jpg); background-color:#dfe6eb;} .disease7_img3:after {background-image:url(../images/sub/disease7_img3.jpg);} .disease8_img1:after {background-image:url(../images/sub/disease8_img1.jpg); background-size:40% auto;} .disease9_img1:after {background-image:url(../images/sub/disease9_img1.jpg); background-color:#03010c} .disease9_img9:after {background-image:url(../images/sub/disease9_img9.jpg); background-color:#f8f8fa} .disease10_img1:after {background-image:url(../images/sub/disease10_img1.jpg); background-size:40% auto;} .disease10_img2:after {background-image:url(../images/sub/disease10_img2.jpg); background-color:#f4f4f4;} .general1_img1:after {background-image:url(../images/sub/general1_img1.jpg)} .general2_img1:after {background-image:url(../images/sub/general2_img1.jpg); background-color:#f1f1f6;} .general3_img1:after {background-image:url(../images/sub/general3_img1.jpg); background-size:40% auto;} .general2-2_img1:after {background-image:url(../images/sub/general2-2_img1.jpg);} .general3-2_img1:after {background-image:url(../images/sub/general3-2_img1.jpg);} .general5_img1:after {background-image:url(../images/sub/general5_img1.jpg); } .check1_img1:after {background-image:url(../images/sub/check1_img1.jpg)} .check2_img1:after {background-image:url(../images/sub/check2_img1.jpg)} .check3_img1:after {background-image:url(../images/sub/check3_img1.jpg); background-size:40% auto;} .check3_img3:after {background-image:url(../images/sub/check3_img3.jpg); background-size:40% auto; background-position:right bottom;} .check4_img1:after {background-image:url(../images/sub/check4_img1.jpg); background-color:#c8c8c8;} .check5_img1:after {background-image:url(../images/sub/check5_img1.jpg); background-size:40% auto;} .check6_img1:after {background-image:url(../images/sub/check6_img1.jpg);} @media screen and (max-width:767px){ .zzCont:after {width:100%; height:250px; position:relative; background-position:center center;} .zzCont > div {width:100%;} .zzCont.zzCont_mo:after {height:100%; position:absolute; opacity:0.2; background-size:cover;} .disease1_img1:after, .disease10_img1:after, .disease5_img1:after, .disease6_img1:after, .disease8_img1:after, .general3_img1:after, .check3_img1:after, .check3_img3:after, .check5_img1:after {background-size:contain;} } .imgList1 {width:100%; overflow:hidden; margin-top:50px;} .imgList1 > li {margin-bottom:70px;} .imgList1 > li:last-child {margin-bottom:0;} .imgList1 dl {position:relative; box-sizing:border-box; padding:10px 0 10px 53%; min-height:350px;} .imgList1 dl:before {content:''; display:block; width:50%; height:100%; position:absolute; left:0; top:0; background-repeat:no-repeat; background-position:center center; background-size:cover;} .imgList1 dl dt {font-size:1.6em; color:#212121; font-weight:700; margin-bottom:25px; line-height:30px;} .imgList1 dl dt span {font-size:0.8em; color:#fff; display:inline-block; width:38px; border-radius:5px; background:#347ed3; text-align:center; margin-right:10px;} .imgList1 > li:nth-child(even) dl {padding-left:0; padding-right:53%} .imgList1 > li:nth-child(even) dl:before {left:auto; right:0;} .imgList1 > li p {margin-top:10px;} .imgList2 {width:100%; overflow:hidden;} .imgList2 > li {float:right; width:calc(50% - 20px); margin-top:30px;} .imgList2 > li:nth-child(odd) {float:left; clear:both;} .imgList2 > li:first-child, .imgList2 > li:nth-child(2) {margin-top:0;} .imgList2 > li img {width:100%;} .imgList3 {width:100%; overflow:hidden;} .imgList3 > li {float:left; width:calc(25% - 15px); margin-right:20px;border:1px solid #e9e9e9;padding:10px 10px;margin-bottom:20px;} .imgList3 > li:nth-of-type(4n) {margin-right:0;} .imgList3 > li img {width:100%;} .imgList4 {width:100%; overflow:hidden;} .imgList4 > li {float:left; width:calc(33.33% - 10px); margin-right:15px;} .imgList4 > li:nth-of-type(3n) {margin-right:0;} .imgList4 > li img {width:100%;} .imgList5 {width:100%; overflow:hidden;} .imgList5 > li {float:left; width:calc(25% - 10px); margin-right:13px;} .imgList5 > li:nth-of-type(4n) {margin-right:0;} .imgList5 > li img {width:100%;} .imgList1 dl.disease1_img3:before {background-image:url(../images/sub/disease1_img3.jpg)} .imgList1 dl.disease1_img4:before {background-image:url(../images/sub/disease1_img4.jpg)} .imgList1 dl.disease2_img2:before {background-image:url(../images/sub/disease2_img2.jpg)} .imgList1 dl.disease2_img3:before {background-image:url(../images/sub/disease2_img3.jpg)} .imgList1 dl.disease2_img4:before {background-image:url(../images/sub/disease2_img4.jpg)} .imgList1 dl.disease2_img5:before {background-image:url(../images/sub/disease2_img5.jpg)} .imgList1 dl.disease3_img2:before {background-image:url(../images/sub/disease3_img2.jpg)} .imgList1 dl.disease3_img3:before {background-image:url(../images/sub/disease3_img3.jpg)} .imgList1 dl.disease4_img5:before {background-image:url(../images/sub/disease4_img5.jpg)} .imgList1 dl.disease4_img6:before {background-image:url(../images/sub/disease4_img6.jpg)} .imgList1 dl.disease5_img6:before {background-image:url(../images/sub/disease5_img6.jpg)} .imgList1 dl.disease5_img7:before {background-image:url(../images/sub/disease5_img7.jpg)} .imgList1 dl.disease5_img8:before {background-image:url(../images/sub/disease5_img8.jpg)} .imgList1 dl.disease6_img2:before {background-image:url(../images/sub/disease6_img2.jpg)} .imgList1 dl.disease6_img3:before {background-image:url(../images/sub/disease6_img3.jpg)} .imgList1 dl.disease6_img4:before {background-image:url(../images/sub/disease6_img4.jpg)} .imgList1 dl.disease6_img5:before {background-image:url(../images/sub/disease6_img5.jpg)} .imgList1 dl.disease6_img6:before {background-image:url(../images/sub/disease6_img6.jpg)} .imgList1 dl.disease6_img7:before {background-image:url(../images/sub/disease6_img7.jpg)} .imgList1 dl.disease8_img2:before {background-image:url(../images/sub/disease8_img2.jpg)} .imgList1 dl.disease8_img3:before {background-image:url(../images/sub/disease8_img3.jpg)} .imgList1 dl.disease8_img4:before {background-image:url(../images/sub/disease8_img4.jpg)} .imgList1 dl.disease9_img2:before {background-image:url(../images/sub/disease9_img2.jpg)} .imgList1 dl.disease9_img3:before {background-image:url(../images/sub/disease9_img3.jpg)} .imgList1 dl.disease9_img4:before {background-image:url(../images/sub/disease9_img4.jpg)} .imgList1 dl.disease9_img5:before {background-image:url(../images/sub/disease9_img5.jpg)} .imgList1 dl.disease9_img6:before {background-image:url(../images/sub/disease9_img6.jpg)} .imgList1 dl.disease9_img7:before {background-image:url(../images/sub/disease9_img7.jpg)} .imgList1 dl.disease9_img8:before {background-image:url(../images/sub/disease9_img8.jpg)} .imgList1 dl.disease10_img3:before {background-image:url(../images/sub/disease10_img3.jpg)} .imgList1 dl.disease10_img4:before {background-image:url(../images/sub/disease10_img4.jpg)} .imgList1 dl.disease10_img5:before {background-image:url(../images/sub/disease10_img5.jpg)} .imgList1 dl.disease10_img6:before {background-image:url(../images/sub/disease10_img6.jpg)} .imgList1 dl.general1_img2:before {background-image:url(../images/sub/general1_img2.jpg)} .imgList1 dl.general1_img3:before {background-image:url(../images/sub/general1_img3.jpg)} .imgList1 dl.general1_img4:before {background-image:url(../images/sub/general1_img4.jpg)} .imgList1 dl.check1_img2:before {background-image:url(../images/sub/check1_img2.jpg)} .imgList1 dl.check1_img3:before {background-image:url(../images/sub/check1_img3.jpg)} .imgList1 dl.check1_img4:before {background-image:url(../images/sub/check1_img4.jpg)} .imgList1 dl.check1_img5:before {background-image:url(../images/sub/check1_img5.jpg)} .imgList1 dl.check4_img2:before {background-image:url(../images/sub/check4_img2.jpg)} .imgList1 dl.check4_img3:before {background-image:url(../images/sub/check4_img3.jpg)} .imgList1 dl.check4_img4:before {background-image:url(../images/sub/check4_img4.jpg)} .imgList1 dl.check4_img5:before {background-image:url(../images/sub/check4_img5.jpg)} @media screen and (max-width:1024px){ .imgList1 {margin-top:30px;} .imgList2 > li {width:calc(50% - 10px);} } @media screen and (max-width:767px){ .imgList1 {margin-top:4%;} .imgList1 > li {margin-bottom:7%} .imgList1 dl {padding-left:0; min-height:0;} .imgList1 dl:before {width:100%; height:55vw; position:relative; margin-bottom:5%} .imgList1 dl dt {font-size:1.5em; line-height:30px; margin-bottom:3%} .imgList1 dl dt span {width:30px;} .imgList1 > li:nth-child(even) dl {padding-right:0;} .imgList1 > li p {margin-top:1%} .imgList2 > li {float:none !important; width:100%; margin-bottom:4%;} .imgList2 > li:last-child {margin-bottom:0;} .imgList3 > li {width:49%; margin-right:2%; margin-bottom:4%;} .imgList3 > li:nth-of-type(even) {margin-right:0;} .imgList4 > li {width:49%; margin-right:2%; margin-bottom:4%;} .imgList4 > li:nth-of-type(3n) {margin-right:2%;} .imgList4 > li:nth-of-type(even) {margin-right:0;} .imgList5 > li {width:49%; margin-right:2%; margin-bottom:4%;} .imgList5 > li:nth-of-type(3n) {margin-right:2%;} .imgList5 > li:nth-of-type(even) {margin-right:0;} } .cln-diagnosis {background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(http://perfects.kr/images/01/60.jpg); position:relative;} .cln-diagnosis:before {content:''; display:block; width:100%; height:100%;position:absolute; left:0; top:0;} .cln-diagnosis > div {position:relative; z-index:10;} .cln-diagnosis .t1 {font-size:1.05em; color:rgba(255,255,255,0.5); line-height:1.7em; margin-top:20px; } .cln-diagnosis .cont {width:100%; background:#fff; margin-top:50px; box-sizing:border-box; padding:50px; display:table;} .cln-diagnosis .cont .img {display:table-cell; width:40%; vertical-align:middle; text-align:center;} .cln-diagnosis .cont .img img {width:80%; max-width:380px;} .cln-diagnosis .cont .txt_box {display:table-cell; width:60%; vertical-align:middle;} .cln-diagnosis .cont .txt_box .s-txt2 {line-height:1.6em;} .cln-diagnosis .cont2 {background:#347ed3; width:100%; height:80px; display:table; box-sizing:border-box; padding:0 2%;} .cln-diagnosis .cont2 p {display:table-cell; text-align:center; vertical-align:middle; font-size:1.05em; color:#fff; line-height:1.6em;} @media screen and (max-width:1024px){ .cln-diagnosis .cont {padding:30px; margin-top:40px;} } @media screen and (max-width:767px){ .cln-diagnosis:before {background-size:60%} .cln-diagnosis .t1 {margin-top:2%; font-size:1em;} .cln-diagnosis .cont {margin-top:6%; padding:5%} .cln-diagnosis .cont .img {display:block; width:100%;} .cln-diagnosis .cont .txt_box {display:block; width:100%; margin-top:3%} .cln-diagnosis .cont2 {height:auto; padding:4% 2%} .cln-diagnosis .cont2 p {font-size:0.95em;} } .cln-cure {background:url(../images/sub/cureBG.jpg) no-repeat center center; background-size:cover;} /* br */ .br1399 {} @media screen and (max-width:1399px) { .br1399 {display:none;} } .br-976 {display:none;} @media screen and (max-width:976px) { .br-976 {display:block;} } #intro01 {background-image: url("/images/sub/intro01_img3.jpg");} #intro02 {background-image: url("/images/sub/intro02_img3.jpg");} .intro-top {overflow:hidden; padding-top:50px; background-repeat:no-repeat; background-position:right top; background-size:75% auto; } .intro-img img {float:left; width:25%;} .intro-tit {position:absolute; bottom:0; right:0; width:50%; text-align:center;} .intro-tit p {font-size:1.533em; font-weight:600; opacity:0.2;} .intro-cont {text-align:center; padding-top: 7% } .intro-cont h3 {font-size:2.0em; font-family: 'Nanum Myeongjo', serif; font-weight:500; letter-spacing:-0.06em; border-bottom: 1px solid #ddd; display:inline} .intro-cont p {font-size: 1.1em; line-height:1.5em; padding-bottom: 20px;} @media all and (max-width:976px) { .intro-top {padding-top:40px; } .intro-tit p {font-size:1.3em; } .intro01-cont img {width:30%} } @media all and (max-width:767px) { .intro-top {padding-top:30px; } .intro-tit p {font-size:1.05em; } } @media screen and (max-width:568px) { .intro-top {padding-top:20px; } } .intro02-con { padding:7% 0 5% 0;} .intro02-con img {} /*orderCircle*/ .orderCircle { overflow: hidden; text-align: center;} .orderCircle li { position: relative; counter-increment: number; vertical-align:top; display: inline-block; * zoom:1; * display:inline; overflow: hidden; font-size: 1.2em; width: 228px; height: 228px; max-width: 20%; max-height: 20vw; box-sizing: border-box; padding: 3% 1%; border-radius: 360px; margin: 0 -40px; color:#fff; margin: 0 -18px; } .orderCircle-bg1 { background:rgba(28,73,137,0.8)} .orderCircle-bg2 { background:rgba(41,131,206,0.8)} .orderCircle-bg3 { background:rgba(64,169,221,0.8)} .orderCircle-bg4 { background:rgba(124,195,134,0.8)} .orderCircle-bg5 { background:rgba(178,209,39,0.8)} .orderCircle li img {width:35%;} .orderCircle li p { padding-top: 20px; line-height: 1.6em;} @media screen and (max-width:1248px) { .orderCircle li { margin: 0 -10px; } } @media screen and (max-width:1024px) { .orderCircle li { font-size: 1.1em; max-width: 170px; max-height: 170px; margin: 0 -5px; } } @media screen and (max-width:976px) { .orderCircle { max-width: 800px; margin: 5% auto 0; } .orderCircle li { padding: 4% 1%; margin-bottom:2%; margin: 0 -10px; } .orderCircle li p { padding-top: 15px; } } @media screen and (max-width:640px) { .orderCircle { max-width: 90%; } .orderCircle li {font-size: 1.2em; max-width: 30vw; max-height: 30vw; padding: 7% 1%; } .orderCircle li:nth-child(4), .orderCircle li:nth-child(5) {margin: -18px -10px 10px -10px; } .orderCircle li p { padding-top: 10px; } } .intro03-con h3 { color:#232323; font-size: 2em; font-weight:500; line-height: 1.3em; padding:3% 0;} .intro03-con h3 span { padding:0 20px ;} @media screen and (max-width:976px) { .intro03-con h3 {padding-bottom:0; color:#1c4888; font-weight:700; margin-top:3%;} } /*colorBox*/ .colorBox {width:80%; margin:0 auto; position:relative; overflow:hidden;padding-bottom:4%;} /*subject*/ .subject {color:#232323; font-size: 2em; font-weight:500; text-align:center; line-height: 1.3em; padding:3% 0;} @media screen and (max-width:976px) { .subject {color:#1c4888; font-weight:700; margin-bottom:5%;} } @media screen and (max-width:676px) { .subject {font-size:2.0em; } } @media screen and (max-width:480px) { .subject {font-size:1.55em;} } /*stripeBox*/ .stripeBox {position:relative; overflow:hidden; width:60%; margin:0 auto;} .stripeBox li {float:left; width:calc(33.3333% - 13.3333px); background: url(/images/sub/bgbox.gif) repeat; box-sizing: border-box; margin-right:20px; padding:15px; text-align:center;} .stripeBox li:last-child {margin-right:0} .stripeBox li dl {padding: 0 15%; background:#fff;} .stripeBox li dd {font-size:2.0em; color:#232323; line-height:1.7em; font-weight:700;} @media screen and (max-width:676px) { .stripeBox {width:70%;} .stripeBox li {padding:10px;} } #vision { position: relative; overflow: hidden; } #vision dt { position: absolute; left: 0; width: 100%; top: 50%; margin-top: -218px; text-align: center; } #vision dd { width: 50%; float: left; color:#232323; font-size: 2em; font-weight:500; padding: 5% 0 5% 18%; line-height: 1.3em; box-sizing: border-box; } #vision dd:nth-child(even) { text-align: right;border-right: 1px solid #dedede; padding: 5% 18% 5% 0; } #vision dd img {float:left; padding:20px;} #vision dd:nth-child(even) img {float:right;} #vision dd:nth-child(2), #vision dd:nth-child(3) { border-bottom: 1px solid #dedede; } #vision dd .s-tit {font-size:0.7em; color:#ddd; font-weight:700; } #vision dd img {} @media screen and (max-width:1399px) { #vision dt { margin-top:-15vw; } #vision dt img { height: 30vw; } #vision dd { font-size: 1.8em; } #vision dd img {width:31%} } @media screen and (max-width:1199px) { #vision dt { margin-top:-12.5vw; } #vision dt img { height: 25vw; } #vision dd { padding: 5% 0 5% 20%; font-size: 1.7em; } #vision dd:nth-child(even) { padding: 5% 20% 5% 0; } #vision dd img {width:35%} } @media screen and (max-width:976px) { #vision dt { margin-top:-11.5vw; } #vision dt img { height: 23vw; } #vision dd { padding: 4% 0 4% 18%; font-size: 1.5em; } #vision dd:nth-child(even) { padding: 4% 18% 4% 0; } #vision dd img {padding:15px;} } @media screen and (max-width:767px) { #vision { border: 0; padding:0; } #vision dt { position: relative; margin-top: 0; border-bottom: 1px solid #e5e5e5; padding: 3% 0; } #vision dt img { height: auto; width: 50%; } #vision dd, #vision dd:nth-child(even) { font-size: 1.3em; width: 100%; padding: 3% 5%; text-align: left; border-right:0; border-bottom: 1px solid #e5e5e5; } #vision dd br { display: none; } #vision dd img {width:20%; padding:5px 15px 0 15px;} #vision dd:nth-child(even) img {float:left;} } .intro04 {width:100%; max-width:1122px; margin:0 auto;} .intro04 img {width:100%;} #sMap { position: relative; overflow: hidden; z-index:-1 } #sMap .root_daum_roughmap .wrap_map { height: 550px !important; } .wrap_controllers { display: none; } .map_border { display: none;} #sMap-info { position: relative; overflow: hidden; width: 92%; margin: -3vw auto 0; padding: 5%; border:1px solid #f4f4f4; border-right-color:#ccc; border-bottom-color:#ccc; background:#fff url("/images/sub/symbolBG.png") no-repeat 105% 20px; background-size: auto 110%; } #sMap-info .tit { float: left; width: 13%; border-right: 1px solid #e5e5e5; } #sMap-info .tit h4 { color:#285f44; font-size: 2.5em; line-height: 1.5em; font-weight:500; } #sMap-info .tit p { color:#999; font-size: 1.2em; line-height: 1.5em; } #sMap-info .txt { float: left; width: 85%; padding: 1% 0 0 5%; font-size: 1.4em; line-height: 1.5em; } #sMap-info .txt .fc-g3 { font-weight: 600;font-family:'Montserrat', 'S Dream',sans-serif } @media all and (max-width:1399px) { #sMap-info .tit { width: 35%; } #sMap-info .txt { width: 65%; } } @media all and (max-width:976px) { #sMap .root_daum_roughmap .wrap_map { height: 55vw !important; } .locaInfo dl { padding: 5% 0 5% 100px; background-size: 80px; font-size: 1.3em; } } @media all and (max-width:767px) { #sMap-info { background-position: 105% bottom; background-size: auto 80%; } #sMap-info .tit { width: 100%; border-right:0; border-bottom: 1px solid #e5e5e5; padding-bottom: 3%; margin-bottom: 3%; } #sMap-info .txt { width: 100%; padding-left:0; font-size: 1.3em; } #sMap-info .tit h4 { font-size: 2em;} } /* */ .int01_tit{overflow:hidden; font-size:2em; color:#666; font-weight:200; line-height:1.4em;} .int01_imbx{overflow:hidden} .int01_imbx>div{width:31%; float:left; margin-left:3.4%;} .int01_imbx>div img{width:100%;} .int01_imbx>div:first-child{margin-left:0;} .ing01_bgbx{margin-top:-5em; position:Relative; z-index:-1; background:url(/images/sub/sub0101_bg01.jpg) no-repeat center center; background-size:cover; padding:14em 0 8em} .ing01_bgbx .stxt{opacity:0.75; line-height:1.7em;} .int01_sign{font-weight:500; font-size:1.05em;} .int01_sign img{vertical-align:bottom} @media all and (max-width:850px) { .int01_wrap br.pc{display:none;} .int01_wrap br.mo{display:block;} .int01_tit{font-size:1.8em;} .int01_imbx>div{width:48%; margin-left:3.8%;} .int01_imbx>div:nth-of-type(2){display:none;} } @media all and (max-width:450px) { .int01_imbx>div{width:100%; margin-left:0%;} } #drWrap { overflow: hidden; } #drWrap .drProfile { float: left; width: calc(50% - 10px); border:1px solid #ddd; box-sizing: border-box; padding:3% 3%; background-size: 100% auto; background-position: right bottom; background-repeat: no-repeat; color:#484848;margin-bottom:2%} #drWrap .drProfile p.drPart { font-size: 1.25em; font-weight: 600; line-height: 1.3em; } #drWrap .drProfile h4 { font-size: 1.8em; font-weight:600; line-height: 1.3em; } #drWrap .drProfile ul { margin-top: 1em; } #drWrap .drProfile ul li { font-size: 1.125em; line-height: 1.9em; } #drWrap #doctor1.drProfile { background-image: url("/images/sub/doctor1.png"); } #drWrap #doctor2.drProfile { background-image: url("/images/sub/doctor2.png"); float: right; } @media screen and (max-width:1280px) { #drWrap .drProfile { min-height: 75vw; } #drWrap .drProfile ul { margin-top: 2em; } #drWrap .drProfile ul li { font-size: 1.05em; } } @media screen and (max-width:1080px) { #drWrap .drProfile { min-height: 85vw; } #drWrap .drProfile ul { margin-top: 1em; } } @media screen and (max-width:976px) { #drWrap .drProfile { width: 100%; min-height: 0; background-size: 70% auto; padding: 7% 6% } #drWrap .drProfile ul { margin-top: 2em; } #drWrap #doctor2.drProfile { margin-top: 1em; } } @media screen and (max-width:767px) { #drWrap .drProfile { background-size: 85% auto; } #drWrap .drProfile h4 { font-size: 3em; } } @media screen and (max-width:568px) { #drWrap .drProfile { background-size: 90% auto; border-width: 8px; } #drWrap .drProfile h4 { font-size: 2.8em; } } #drWrap2 { overflow: hidden; } #drWrap2 .drProfile { float: left; width: calc(33% - 10px); border:1px solid #f0f0f0; box-sizing: border-box; padding:3% 3%; background-size: 100% auto; background-position: right bottom; background-repeat: no-repeat; color:#484848;margin-bottom:2%} #drWrap2 .drProfile p.drPart { font-size: 1.25em; font-weight: 600; line-height: 1.3em; } #drWrap2 .drProfile h4 { font-size: 1.8em; font-weight:600; line-height: 1.3em; } #drWrap2 .drProfile ul { margin-top: 1em; } #drWrap2 .drProfile ul li { font-size: 1.125em; line-height: 1.9em; } @media screen and (max-width:1280px) { #drWrap2 .drProfile { min-height: 75vw; } #drWrap2 .drProfile ul { margin-top: 2em; } #drWrap2 .drProfile ul li { font-size: 1.05em; } } @media screen and (max-width:1080px) { #drWrap2 .drProfile { min-height: 85vw; } #drWrap2 .drProfile ul { margin-top: 1em; } } @media screen and (max-width:976px) { #drWrap2 .drProfile { width: 100%; min-height: 0; background-size: 70% auto; padding: 7% 6% } #drWrap2 .drProfile ul { margin-top: 2em; } #drWrap2 #doctor2.drProfile { margin-top: 1em; } } @media screen and (max-width:767px) { #drWrap2 .drProfile { background-size: 85% auto; } #drWrap2 .drProfile h4 { font-size: 3em; } } @media screen and (max-width:568px) { #drWrap2 .drProfile { background-size: 90% auto; border-width: 8px; } #drWrap2 .drProfile h4 { font-size: 2.8em; } } #mComm21 {margin-top:0px; margin-bottom:110px; overflow:hidden;} #mComm21 a {display:block; float:left; width:33.333%; box-sizing:border-box; border-right:1px solid #e5e5e5; padding:0 35px; text-align:center;} #mComm21 a:first-child {border-left:1px solid #e5e5e5} #mComm21 a img {width:100%;} #mComm21 dl {margin-top:25px;} #mComm21 dl dt {font-size:1.4em; font-weight:600;} #mComm21 dl .t1 {font-size:0.9em; color:#c5c5c5; letter-spacing:0.8em; margin:15px 0; text-transform:uppercase;} #mComm21 dl .t2 {font-size:1.2em; color:#999; font-weight:500; line-height:1.5em;text-align: justify; word-break: break-all} @media screen and (max-width:1399px){ #mComm21 a {padding:0 2%;} #mComm21 a:first-child {border-left:0} #mComm21 a:last-child {border-right:0} #mComm21 dl .t2 br {display:none;} } @media screen and (max-width:767px){ #mComm21 {margin-top:12%; margin-bottom:12%;} #mComm21 a {width:50%; border-right:0;} #mComm21 a:nth-child(2) ~ a {margin-top:5%;} #mComm21 dl {margin-top:8%} #mComm21 dl .t1 {margin:3.5% 0;} } #checkList ul {font-size: 1.4em; color: #555; font-weight: 600; overflow: hidden; } #checkList ul li {padding:0.7em 0;line-height: 1.2em; width: 49%; border-radius: 50px; display: inline-block; position: relative; margin: 0 3px 6px; background:#f9f9f9 url('/images/sub/check_bg.png') no-repeat 20px center;} #checkList ul li p {float: left; padding-left: 55px;} @media screen and (max-width:1060px) { #checkList ul {width:80%; margin:0 auto;} #checkList ul li { width: 100%; } } @media screen and (max-width:780px) { #checkList ul {width:96%;} } #checkList3 ul {font-size: 1.4em; color: #555; font-weight: 600; overflow: hidden; } #checkList3 ul li {padding: 0.7em 0; line-height: 1.2em; width: 100%; border-radius: 50px; display: inline-block; position: relative; margin: 0 3px 6px; background:#f9f9f9 url('/images/sub/check_bg.png') no-repeat 20px center;} #checkList3 ul li p {float: left; padding-left: 55px;} @media screen and (max-width:1060px) { #checkList3 ul {width:80%; margin:0 auto;} #checkList3 ul li { width: 100%; } } @media screen and (max-width:780px) { #checkList3 ul {width:96%;} } #checkList2 ul {font-size: 1em; color: #555; font-weight: 500; overflow: hidden; } #checkList2 ul li {padding: 1.3em 0; line-height: 1.2em; width: 32.5%; border-radius: 50px; display: inline-block; position: relative; margin: 0 3px 6px; background:#f9f9f9 url('/images/sub/check_bg.png') no-repeat 20px center;} #checkList2 ul li p {float: left; padding-left: 55px;} @media screen and (max-width:1060px) { #checkList2 ul {width:80%; margin:0 auto;} #checkList2 ul li { width: 100%; } } @media screen and (max-width:780px) { #checkList2 ul {width:96%;} } .s-tit1 {font-size:2.2em; color:#003777; font-weight:500; line-height:1.5em;font-family:'Montserrat', 'S Dream', sans-serif;} .s-tit2 {font-size:1.5em; color:#333; font-weight:600; line-height:2.5em;font-family:'Montserrat', 'S Dream', sans-serif;} .s-txt1 {font-size:1.05em; color:#686868; line-height:2.2em; margin-top:40px;} .s-txt2 {font-size:1.05em; color:#686868; line-height:2.2em; margin-top:20px;} .s-txt3 {font-size:0.95em; font-weight:400; color:#686868; line-height:1.6em;} .s-txt4 {font-size:1em; color:#222; line-height:1.6em; margin-top:20px;} .bg01 {background-color:#f5f5f5} .bg02 {background-color:#fff} .bd01 {box-sizing:border-box; border:5px solid #ededed; padding:15px 30px;} .bd01-2 {box-sizing:border-box; border:5px solid #ededed; padding:0px 10px 10px;height:310px;} .bd01-22 {box-sizing:border-box; border:5px solid #ededed; padding:0px 15px 15px;height:200px;} .bd01-23 {box-sizing:border-box; border:5px solid #ededed; padding:0px 8px 10px;height:230px;} .bd01-200 {box-sizing:border-box; border:5px solid #ededed; padding:0px 15px 15px;height:230px;} .bd01-2020 {box-sizing:border-box; border:5px solid #ededed; padding:0px 20px 20px;height:180px;} @media screen and (max-width:1399px){ .cln-section {padding:80px 40px} .cln-section2 {padding:40px 20px} } @media screen and (max-width:1024px){ .s-txt1 {margin-top:20px;} } @media screen and (max-width:767px){ .cln-top {height:310px;} .cln-top h3 {font-size:2.7em; margin:0 0 4%} .cln-top h3:before {font-size:0.15em;} .cln-top .t1 {font-size:1em;} .cln-section {padding:7% 4%} .s-tit1 {font-size:1.8em;} .s-tit2 {font-size:1.4em;} .s-txt1 {font-size:1em; margin-top:3%; line-height:1.8em;} .s-txt2 {font-size:1em; margin-top:2%;line-height:1.8em;} .s-txt3 {font-size:0.95em; line-height:1.8em;} .s-txt333 {font-size:0.95em; line-height:1.5em;} .s-txt4 {margin-top:2%;} .bd01 {border-width:4px; padding:2% 3%} .bd01-2 {border-width:4px; padding:2% 3%} .bd01-22 {border-width:4px; padding:2% 3%} .bd01-23 {border-width:4px; padding:2% 3%} } /* 연혁 */ #history { overflow: hidden; position: relative; } #history::before { content: ''; width:0px; height: 100%; background: #e5e5e5; position: absolute; left:20%; top:0; margin-left: -0.5px;} #history li { overflow: hidden; position: relative; margin-top: 0px;} #history li .img { float: left; padding: 30px 30px 30px 0; width: 30%; box-sizing: border-box; text-align: right; } #history li .img img { max-width: 75%; } #history li .txt { float: right; width: 90%; } #history li:nth-child(even) .img { float: right; text-align: left; } #history li .txt { padding: 4% 100px 0; } #history li .txt h4 { color: #2594ff; font-size: 3.125em; font-family: 'SEBANG_Gothic'; position: relative;line-height: 1.0em; font-weight:800; margin-bottom: 0em; letter-spacing: 0; } #history li .txt h4::before { content:''; width: 20px; height: 20px; display: block; position: absolute; left:-100px; top:50%; margin: -10px 0 0 -10px; border-radius: 100%; background: #2594ff; border: 6px solid #c4e1fc; z-index:2; } #history li .txt h4::after { content:''; width: 80px; height: 0px; display: block; background: #92c9ff; z-index:1; position: absolute; left:-100px; top:50%; margin-top: -0.5px;} #history li:nth-child(even) .txt h4::before, #history li .txt dl { font-size: 1.125em; margin-bottom: 0em; } #history li .txt dl dt { color:#212121;font-family:'Montserrat', 'S Dream',sans-serif;font-weight:600; margin-bottom: 0.5em; letter-spacing: 0;font-size: 1.6em;} #history li .txt dl dd {font-size: 1.3em; line-height: 1.4em;font-weight:500;color:#333;} #history li .txt dl dd .fs-s { font-size: 1.3em; color:#333;font-weight:400} @media all and (max-width:976px) { #history li .img { padding: 0 5%; } #history li .txt { padding:4% 80px; } #history li .txt h4::after { width: 50px; } #history li .txt h4::before, #history li .txt h4::after { left: -80px; } } @media all and (max-width:767px) { #history li:first-child .img img { max-width: 70%; } #history li .txt { padding:4% 7vw; } #history li .txt h4::after { width: 6vw; } #history li .txt h4::before, #history li .txt h4::after { left: -7vw; } #history li .txt h4 { font-size: 2.8em; } } @media all and (max-width:568px) { #history li .txt h4::before { width: 16px; height: 16px; margin: -12px 0 0 -10px; border-width: 5px; } #history li .txt h4 { font-size: 2.5em; } #history li .txt dl { font-size: 1em; } } /* 연혁 #history { overflow: hidden; position: relative; } #history::before { content: ''; width:1px; height: 100%; background: #e5e5e5; position: absolute; left:50%; top:0; margin-left: -0.5px;} #history li { overflow: hidden; position: relative; margin-top: 0px;} #history li:first-child { margin-top:0; } #history li .img { float: left; padding: 0 70px; width: 50%; box-sizing: border-box; text-align: right; } #history li .img img { max-width: 100%; } #history li .txt { float: right; width: 50%; } #history li:nth-child(even) .img { float: right; text-align: left; } #history li:nth-child(even) .txt { float: left; text-align: right; } #history li .txt { padding: 4% 100px; } #history li .txt h4 { color: #2594ff; font-size: 3.125em; font-family: 'SEBANG_Gothic'; position: relative;line-height: 1.0em; font-weight:800; margin-bottom: 1em; letter-spacing: 0; } #history li .txt h4::before { content:''; width: 20px; height: 20px; display: block; position: absolute; left:-100px; top:50%; margin: -10px 0 0 -10px; border-radius: 100%; background: #2594ff; border: 6px solid #c4e1fc; z-index:2; } #history li .txt h4::after { content:''; width: 80px; height: 1px; display: block; background: #92c9ff; z-index:1; position: absolute; left:-100px; top:50%; margin-top: -0.5px;} #history li:nth-child(even) .txt h4::before, #history li:nth-child(even) .txt h4::after { left: unset; right: -100px; } #history li:nth-child(even) .txt h4::before {margin: -10px -10px 0 0; } #history li .txt dl { font-size: 1.125em; margin-bottom: 2em; } #history li .txt dl dt { color:#212121;font-family:'Montserrat', 'S Dream',sans-serif;font-weight:600; margin-bottom: 0.5em; letter-spacing: 0;font-size: 1.6em;} #history li .txt dl dd {font-size: 1.3em; line-height: 1.8em;font-weight:500;color:#333;} #history li .txt dl dd .fs-s { font-size: 1.3em; color:#333;font-weight:400} @media all and (max-width:976px) { #history li .img { padding: 0 5%; } #history li .txt { padding:4% 80px; } #history li .txt h4::after { width: 50px; } #history li .txt h4::before, #history li .txt h4::after { left: -80px; } #history li:nth-child(even) .txt { padding-left:2%; } #history li:nth-child(even) .txt h4::before, #history li:nth-child(even) .txt h4::after { right: -80px; } #history li:nth-child(odd) .txt { padding-right:2%; } } @media all and (max-width:767px) { #history li:first-child .img img { max-width: 70%; } #history li .txt { padding:4% 7vw; } #history li .txt h4::after { width: 6vw; } #history li .txt h4::before, #history li .txt h4::after { left: -7vw; } #history li:nth-child(even) .txt h4::before, #history li:nth-child(even) .txt h4::after { right: -7vw; } #history li .txt h4 { font-size: 2.8em; } } @media all and (max-width:568px) { #history li .txt h4::before { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 5px; } #history li:nth-child(even) .txt h4::before {margin: -8px -8px 0 0; } #history li .txt h4 { font-size: 2.5em; } #history li .txt dl { font-size: 1em; } }*/