/* 인사말 */ .greeting{position:relative; max-width:1200px} .greeting .img{position:relative; height:324px; margin-top:110px; background:url(../img/bg_greeting.jpg) no-repeat 50%; background-size:cover} /*.greeting .img:before{content:''; display:block; position:absolute; bottom:0; left:135px; width:400px; height:400px; background:url(../img/bg_chairman.png) no-repeat}*/ .greeting .tit{position:absolute; top:370px; right:100px; width:514px; height:314px; background-color:#246eb9} .greeting .tit h3{position:relative; margin:0; padding:140px 20px 0 50px; color:#fff; font-size:22px; font-weight:100; line-height:1.6; word-break:keep-all; box-sizing:border-box; text-align:left; letter-spacing:-1px} .greeting .tit h3:before{content:''; display:block; position:absolute; top:-23px; left:50px; width:1px; height:144px; margin:0; background:#fff} .greeting .tit h3 span{display:block; font-weight:600} .greeting .colum{padding:80px 20px 70px 20px; max-width:1100px; margin:0 auto} .greeting .colum:after{clear:both; content:""; display:block} .greeting .colum .left{float:left; width:48%; text-align:left;} .greeting .colum .right{float:right; width:48%; text-align:left;} .greeting .sign{text-align:right; font-size:1.125em; font-weight:bold; color:#555; margin-top:60px; padding-right:20px; background-repeat:no-repeat; background-position:right center; line-height:50px} .greeting .sign .name{font-size:24px} @media all and (max-width:1000px){ .greeting .tit{position:relative; width:100%; padding-bottom:50px; padding-right:30px; height:auto; top:0; right:0} .greeting .tit h3{padding-top:80px; padding-left:30px; padding-right:0; font-size:22px; line-height:30px;} .greeting .tit h3:before{left:30px; height:85px;} /*.greeting .tit h3:br{display:none}*/ .greeting .img{height:253px} .greeting .img:before{left:50%; width:300px; height:310px; margin-left:-150px; background-size:cover} .greeting .colum{padding-top:40px; padding-bottom:40px;} .greeting .colum .left{clear:both; width:100%; text-align:left;} .greeting .colum .right{clear:both; width:100%; padding-top:20px; text-align:left;} } @media all and (max-width:640px){ .greeting .tit h3{font-size:18px; line-height:25px; font-weight:600;} .greeting .lead{font-size:17px; line-height:25px;} .greeting .sign{margin-top:30px;} .greeting .sign .name{font-size:22px;} } /*그룹소개*/ .company_info{width:100%; height:auto} /*.company_info .img_page{width:100%; height:550px; background-image:url(../img/company_info_bg_company.jpg); background-position:center; background-repeat:no-repeat} .company_info .txt_page{max-width:1200px; margin:0 auto; padding:20px} .company_info .txt_page h2{font-size:42px; line-height:1; font-weight:600; margin-bottom:44px; padding-top:100px; display:block}*/ .company_info .ideology{width:100%; /*padding-bottom:100px;*/} .company_info .ideology .inner{max-width:1240px; margin:auto; clear:both} .company_info .ideology .inner .ideology_title{font-size:36px;font-weight:bold;color:#000; letter-spacing:5px; text-align:center; padding:40px 0 50px 0} .company_info .ideology .inner .point{color:#06F} .company_info .ideology .inner .ideology_title:after{content:" ";display:block; margin:20px auto; width:40px; height:2px; background-color:#000; clear:both} .company_info .ideology dl{float:left; width:33.33%; padding:20px; text-align:center;} .company_info .ideology dl .web_icon{padding:0 0 20px 0; text-align:center; color:#ff4200} .company_info .ideology dl dt{font-size:18px; line-height:20px; font-weight:bold;} .company_info .ideology dl dd{margin-top:40px; font-size:16px; line-height:27px; font-weight:400; letter-spacing:-0.02em; color:#555} @media all and (max-width:800px){ .company_info .ideology dl{float:none; width:100%;} .company_info .ideology dl dd{margin-top:20px; padding-left:20px; padding-right:20px; word-break:keep-all;} .company_info .ideology dl dd br{display:none;} } .tl_title_box_wrap{width:100%; height:auto; padding:150px 20px; clear:both; background-image:url(../img/work_page_bg.jpg); background-position:center; background-repeat:no-repeat; background-size:cover} .tl_title_box_wrap li{position:relative; width:23.5%; min-height:400px; background-color:#fff; margin-left:2%; float:left; cursor:pointer; -webkit-transition:all 0.4s; transition:all 0.4s; background-position:center; background-size:cover; background-repeat:no-repeat} .tl_title_box_wrap li .bg{background-color:#2c3856; color:#fff; opacity:0; position:absolute; width:100%; height:100%; top:0;left:0; z-index:1} .tl_title_box_wrap li:hover .bg{opacity:1; -webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; } .tl_title_box_wrap li:hover{-webkit-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-ms-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-webkit-transform:translateY(-25px);transform:translateY(-25px)} .tl_title_box_wrap li .txt_wrap{width:100%;height:100%; position:absolute; top:0; left:0; box-sizing:border-box;overflow:hidden;padding:40px;color:#fff;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; opacity:1; display:table; z-index:2} .tl_title_box_wrap li:hover .txt_wrap{opacity:1; color:#fff} .tl_title_box_wrap li:hover .txt_wrap .cell I{color:#FFF} .tl_title_box_wrap li:hover .txt_wrap .cell h2{color:#FFF} .tl_title_box_wrap li:hover .txt_wrap .cell p{color:#fff} .tl_title_box_wrap li .txt_wrap .cell{text-align:center;width:100%;display:table-cell; vertical-align:middle} .tl_title_box_wrap li .txt_wrap .cell i{font-size:35px; padding-bottom:20px; color:#1a1a1a} .tl_title_box_wrap li .txt_wrap .cell h2{font-size:24px; color:#1a1a1a; margin:0; font-weight:bold} .tl_title_box_wrap li .txt_wrap .cell p{padding-top:50px} .tl_title_box_wrap li:nth-child(4n+1){margin-left:0} @media (max-width:960px){ .company_info .work_page ul li{width:47%; margin-bottom:20px; margin-right:0; margin-left:2%} .company_info .work_page ul li:last-child{margin-right:0} .company_info .work_page ul li:nth-child(2n+2){margin-right:0} .company_info .Ideology dl{width:100%; padding-bottom:30px; clear:both} } @media (max-width:640px){ .company_info .img_page{background-size:cover; height:300px} .company_info .tl_title_box_wrap li{width:100%; margin-left:0; margin-bottom:3%} } /*연혁*/ /*.history_area{position:relative;width:100%;padding-top:37px} .history_area .history_point{position:absolute;left:50%;top:0;margin-left:-5px;bottom:20px;width:8px;background-color:#f6f6f6;overflow:hidden} .history_area .history_point span{position:absolute;display:block;top:0;width:100%;height:200px; background-color:#039} .history_area dl{width:50%;padding-right:94px;padding-left:20px;box-sizing:border-box} .history_area div:nth-child(odd) dl{padding-right:20px;padding-left:94px} .history_area dt{margin-bottom:20px;font-size:46px;line-height:1.3;color:#555;font-weight:bold} .history_area dd strong{display:block;padding-bottom:12px;font-size:20px;line-height:1.6;color:#1a1a1a;font-weight:bold} .history_area dd p{display:block} .history_area dd .img_box{display:block;margin-top:39px} .right{text-align:right} .left{text-align:left} .fr{float:right} .img_box img{max-width:100%} @media (max-width:960px){ .history_area .history_point{left:10px;margin-left:0} .history_area dl{float:none !important;width:100%;padding-right:0;padding-left:50px;text-align:left} .history_area div:nth-child(odd) dl{padding-left:50px} .history_area div + div{margin-top:40px} .history_area div:nth-child(2){margin-top:0} .history_area dt{margin-bottom:20px;font-size:30px} .history_area dd p br{display:none} .history_area dd .img_box{margin-top:20px} }*/ /*오시는 길*/ .location_area .contact_address{width:100%;height:auto; line-height:1.7} .location_area .contact_address ul{padding:0 20px 20px 0px;border-bottom:1px solid #ddd} .location_area ul li{color:#555; font-size:16px; line-height:27px;} .contact_traffic .bus{width:100%;padding:0} .contact_traffic .subway{width:100%; padding-bottom:20px} .contact_traffic h3{margin-top:25px; padding-bottom:10px; text-align:left; color:#1a1a1a; font-size:20px; line-height:25px; font-weight:400; letter-spacing:-0.025em;} .map_info{width:283px;height:214px;background:#19cd61;position:absolute;right:0;top:0px;padding:30px 28px;font-size:15px;color:#f8969a;letter-spacing:0} .map_info span{display:block;font-size:20px;color:#fff; font-weight:bold; letter-spacing:-.25px} .map_info p{padding-top:20px; color:#f2f2f2; line-height:1.4} .map_btn{position:absolute;left:30px;bottom:30px} .map_btn a{display:inline-block; padding:7px 10px; height:41px;border:1px solid #f2f2f2;text-align:center; color:#FFF; letter-spacing:-0.5px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease} .map_btn a:hover{color:#000;background:#fff;border-color:#fff; text-decoration:none; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease} .map_btn a:first-child{margin-right:5px} .kakaomap{margin-top:25px} .kakaomap .root_daum_roughmap{width:100% !important} @media all and (max-width:640px){ .kakaomap .root_daum_roughmap{height:280px;} } /* content01 */ .content01 .box{position:relative; padding-bottom:80px; display:block} .content01 .box .img_right{float:right} .content01 .box .txt_wrap{position:absolute; right:0; top:45px; background:#fff; padding:50px; width:60%} .content01 .box .txt_wrap .half-round-tit{display:inline-block;margin-bottom:20px} .content01 .box .txt_wrap .half-round-tit strong{color:#1a1a1a; font-size:22px; font-weight:500; vertical-align:middle; line-height:1.6; letter-spacing:0; float:left} .content01 .box .txt_wrap .half-round-tit span{display:inline-block; width:35px; height:35px; line-height:35px; text-align:center; border-radius:50%; vertical-align:middle; color:#fff; font-size:16px} .content01 .box .txt_wrap .half-round-tit span{background:#8abd00; margin-right:10px; float:left} .content01 .box .txt_wrap p{text-align:justify} .content01 .box .txt_wrap02{position:absolute; left:0; top:45px; background:#fff; width:60%} @media screen and (max-width:960px){ .content01 .box .img{text-align:center; display:block; float:none; clear:both} .content01 .box .img img{width:100%} .content01 .box .txt_wrap{width:100%; padding:20px; display:block; position:relative; clear:both} } /* content02 */ .content02 ul li{width:50%; float:left} .content02 ul li .profile{float:left; padding-bottom:50px; width:48%} .content02 ul li .profile img{width:100%} .content02 ul li dl{float:left; padding:0 40px; width:52% } .content02 ul li dl dt{font-size:22px; font-weight:bold; text-align:left; padding-bottom:20px; color:#1a1a1a; letter-spacing:0} .content02 ul li dl dd{font-size:16px; color:#555; line-height:1.75; letter-spacing:-0.02em; text-align:left; display:block; clear:both} @media screen and (max-width:1210px){ .content02 ul li{width:49%; margin-left:2%; margin-bottom:6%} .content02 ul li:nth-child(2n+1){margin-left:0} .content02 ul li .profile{width:100%} .content02 ul li dl{width:100%; padding:0 20px} } @media screen and (max-width:640px){ .content02 ul li{width:100%; margin-left:0} } /* content03 */ .content03 .icon li{width:31.3333%; margin-right:3%; min-height:300px; float:left; text-align:justify} .content03 .icon li:nth-child(3n+3){margin-right:0} .content03 .icon li .web_icon{width:100px; height:100px; margin-bottom:20px; background-color:#c7c7c7; color:#fff; display:table; margin:0 auto} .content03 .icon li .web_icon i{text-align:center; font-size:40px; display:table-cell; vertical-align:middle; margin-bottom:20px} .content03 .icon li h2{font-size:22px;color:#000;display:block;clear:both;padding-bottom:10px; margin-top:30px; letter-spacing:0; text-align:center} .content03 .icon li p{text-align:center; word-break:keep-all} .content03 .icon li .icon_img{text-align:center;padding-top:20px;display:block} @media screen and (max-width:960px){ .content03 .icon li{width:50%; margin-right:0} .content03 .icon li p{max-width:300px; margin:0 auto} } @media screen and (max-width:640px){ .content03 .icon li{width:100%; margin-right:0} .content03 .icon li p{max-width:300px; margin:0 auto} } /* content_area04 */ .content04 .point{padding:0 20px 0 0} .content04 .point p{font-size:22px; font-weight:bold; padding-left:30px; color:#1a1a1a; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left center} .content04 .point h2{font-size:28px; font-weight:100; color:#f66120; text-align:left; padding:10px 0 0} .content04 .colum{max-width:1400px; margin:0 auto; padding:30px 0 } .content04 .colum .left{width:50%; float:left; border-right:1px solid #ddd; padding-right:50px} .content04 .colum .left h2{font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold} .content04 .colum .right{width:50%; float:left; padding-left:50px; line-height:1.8; text-align:left} .content04 .colum .right h2{font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold} .content04 .content_txt_box{width:100%; padding-top:50px; clear:both} .content04 .title_text{float:left; display:block; line-height:1.8; width:25%; color:#1a1a1a; font-size:22px; letter-spacing:0; text-align:left; font-weight:bold; margin:0; padding:0 0 0 30px; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left center; box-sizing:border-box} .content04 .sub_txt{float:right; width:75%} .content04 .sub_txt .h2{font-size:20px; } .content04 .content_sub_title .img{float:left; text-align:right; width:450px } @media screen and (max-width:960px){ .content04 .colum .left{width:100%; border:0; float:none; padding:0; clear:both} .content04 .colum .right{width:100%; padding:20px 0 0 } .content04 .title_text{width:100%; margin-bottom:20px; clear:both} .content04 .sub_txt{float:left; width:100%} } /* content_area05 */ .content05 .photo_box{margin-bottom:50px; background-color:#f9f9f9; clear:both} .content05 .photo_box .img{max-width:50%; float:left;display:block} .content05 .photo_box .img img{width:100%} .content05 .photo_box .txt{max-width:50%; float:left; padding:30px; background-color:#f9f9f9; display:block} .content05 .photo_box .txt h2{padding-top:20px; text-align:left; color:#246eb9; font-size:24px; line-height:28px; letter-spacing:-0.05em; font-weight:bold} .content05 .photo_box .txt .lead{padding-top:20px; color:#333; font-size:17px; line-height:28px; letter-spacing:-0.05em; word-break:keep-all} .content05 .photo_box .target{margin-top:13px; position:relative; padding-left:26px; color:#333; font-size:16px; line-height:22px; letter-spacing:-0.05em; font-weight:600; word-break:keep-all;} .content05 .photo_box .target:before{display:block; position:absolute; top:0; left:0; width:21px; height:21px; background:url('../img/photobox_icon1.png') no-repeat;} .content05 .photo_box .more{display:block; width:200px; margin-top:34px; padding-top:18px; padding-bottom:19px; background-color:#169ebf; text-align:center} .content05 .photo_box .more span{position:relative; padding-right:14px; color:#fff; font-size:16px; line-height:18px; letter-spacing:-0.025em; font-weight:600} .content05 .photo_box .more span:before{display:block; position:absolute; top:3px; right:0; width:8px; height:12px; background:url('../img/photobox_icon2.png') no-repeat;} .content05 .photo_box:nth-child(even) .txt h2{color:#169ebf} .content05 .photo_box:nth-child(odd) .more{background-color:#246eb9} @media screen and (max-width:960px){ .content05 .photo_box .img{max-width:100%; display:block} .content05 .photo_box .txt{max-width:100%} .content05 .photo_box .txt h2{font-size:24px; padding-top:0; font-weight:bold} } @media screen and (max-width:640px){ .content05 .photo_box .txt .lead{font-size:15px; line-height:20px;} .content05 .photo_box .target{font-size:15px;} .content05 .photo_box .more{width:170px; margin-top:20px; padding-top:13px; padding-bottom:13px;} .content05 .photo_box .more span{font-size:15px;} } /* content_area06 */ .content06 .thumb_box {width:31.3333%; margin-right:3%; display:block; float:left; } @media screen and (min-width:961px){ .content06 .thumb_box:nth-child(3n+3){margin-right:0} } .content06 .thumb_box .img{width:100%; min-height:300px; background-image:url(../img/rnd03_thumb01.jpg); background-repeat:no-repeat; background-size:cover; clear:both; overflow:hidden; position:relative} .content06 .thumb_box .txt{width:100%; padding:20px; text-align:left; clear:both} .content06 .thumb_box .txt h2{font-size:24px; text-align:center; letter-spacing:0; font-weight:bold} .content06 .thumb_box .txt p{padding:20px 0px; text-align:center; } @media screen and (max-width:960px){ .content06 .thumb_box{width:49%; margin-right:2% } .content06 .thumb_box:nth-child(2n+2){margin-right:0} } @media screen and (max-width:640px){ .content06 .thumb_box{width:100%; margin:0; clear:both; float:none} } /** 추가 **/ /* base */ :before,:after{display:none; content:''} [class*=" xi-"]:before, [class*=" xi-"]:after, [class^=xi-]:before, [class^=xi-]:after{display:block;} .blind{position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow:hidden} /*.content_wrap{margin-top:50px} .wrap{width:100%; max-width:1260px; margin-left:auto; margin-right:auto}**/ /* 템플릿 */ .h4{position:relative; margin-top:120px; padding-left:32px; color:#282828; font-size:28px; line-height:30px; letter-spacing:-0.025em; font-weight:600} .h4:before{display:block; position:absolute; top:3px; left:0; width:24px; height:24px; background:url('../img/h4_icon.png') no-repeat} .h4:first-child{margin-top:0} @media all and (max-width:1000px){ .h4{margin-top:60px; font-size:24px;} } table{width:100%; border-collapse:collapse; border-spacing:0} table caption{overflow:hidden; position:relative; top:0; left:0; width:1px; height:1px; background:0 0; color:transparent; font-size:0; line-height:0; text-indent:100%} .table{width:100%; margin-top:55px; background-color:#fff; border-top:2px solid #1b1b1b} .table td,.table th{border-left:1px solid #ccc; border-bottom:1px solid #ccc} .table th{height:58px; padding:10px; color:#282828; font-size:16px; line-height:22px; letter-spacing:-0.025em; font-weight:500; word-break:keep-all} .table td{height:60px; padding:10px 24px; color:#282828; font-size:16px; line-height:22px; letter-spacing:-0.025em} .table td:first-child,.table th:first-child{border-left:none} .table thead th{background-color:#f7f7f7} /* 텍스트 박스 */ .box.text{margin-top:16px} .box.text .box_subject{color:#f66120; font-size:24px; line-height:29px; letter-spacing:-0.025em} .box.text .box_subject span{font-weight:600} .box.text .box_text{margin-top:28px; color:#333; font-size:17px; line-height:28px; letter-spacing:-0.05em; word-break:keep-all;} .box.text .box_ul{margin-top:28px} .box.text .box_li{position:relative; margin-top:28px; padding-left:14px; font-size:17px; line-height:28px; letter-spacing:-0.05em} .box.text .box_li:first-child{margin-top:0} .box.text .box_li:before{display:block; position:absolute; top:11px; left:0; width:6px; height:6px; background-color:#f66120} @media all and (max-width:1000px){ .box.text .box_subject{font-size:19px; line-height:25px;} .box.text .box_text{margin-top:15px; font-size:16px; line-height:21px;} } @media all and (max-width:640px){ .box.text .box_subject span{display:block;} } /* 이미지 박스 */ .box.image{font-size:0; line-height:0} .box.image .box_image{width:100%; height:280px; margin-top:35px; background-color:#ccc; background-repeat:no-repeat;} .box.image .box_ul{margin-top:20px; margin-left:-22px} .box.image .box_li{display:inline-block; width:33.33%; height:245px; padding-left:22px; text-align:center; vertical-align:top} .box.image .box_inner{height:100%; padding-top:34px; padding-left:20px; padding-right:20px; border:10px solid #d3e2f1} .box.image .box_name{display:block; color:#246eb9; font-size:24px; line-height:26px; letter-spacing:-0.05em; font-weight:600} .box.image .box_text{margin-top:38px; color:#333; font-size:18px; line-height:30px; letter-spacing:-0.05em; word-break:keep-all;} .box.image .box_li:nth-child(even) .box_inner{border-color:#d0ecf2} .box.image .box_li:nth-child(even) .box_name{color:#169ebf} @media all and (max-width:1000px){ .box.image .box_ul{margin-left:0;} .box.image .box_li{width:100%; height:auto; padding-left:0;} .box.image .box_li + .box_li{margin-top:10px;} .box.image .box_inner{padding-top:20px; padding-bottom:20px; border-width:10px;} .box.image .box_name{font-size:22px; line-height:24px;} .box.image .box_text{margin-top:15px; word-break:keep-all;} } /* 리스트 */ .list{position:relative; text-align:left; font-size:0; line-height:0;} .list .list_ul:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 30px); box-sizing:border-box} .list .list_li{display:inline-block; position:relative; width:25%; padding-top:26px; vertical-align:top;} .list .list_inner{position:relative; padding-top:73px; padding-bottom:52px; text-align:center;} /*.list .list_inner:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 26px); box-sizing:border-box;}*/ .list .list_flag{display:block; position:absolute; top:-30px; left:0; right:0; width:80px; height:80px; margin-left:auto; margin-right:auto; padding-top:19px; background-color:#ccc; border-radius:50%; color:#fff; font-size:16px; line-height:18px; letter-spacing:-0.05em; font-weight:600} .list .list_flag span{display:block; font-size:24px; line-height:26px; letter-spacing:-0.05em} .list .list_name{display:block; position:relative; height:60px; padding-left:20px; padding-right:20px; color:#333; font-size:20px; line-height:25px; letter-spacing:0.025em; font-weight:600;} .list .list_name:before{display:block; position:absolute; top:0; left:0; width:1px; height:100%} .list .list_name:after{display:inline-block; height:100%; vertical-align:middle; content:''} .list .list_name span{display:inline-block; vertical-align:middle} .list .list_li:first-child .list_name:before{display:none} .list.length3 .list_li{width:33.33%} .list.length4 .list_li{width:25%} .list.length5 .list_li{width:20%} @media all and (max-width:1000px){ .list .list_flag{width:65px; height:65px; padding-top:16px; font-size:14px; line-height:16px;} .list .list_flag span{font-size:20px; line-height:22px;} .list .list_name{font-size:16px; line-height:21px;} } /* 리스트 :아이콘 */ .list.icon .list_ul:before{border:10px solid #d0ecf2;} .list.icon .list_li{position:relative;} .list.icon .list_li:before{display:block; position:absolute; top:0; left:0; right:0; z-index:2; width:80px; height:80px; margin-left:auto; margin-right:auto; padding-top:19px; background-color:#169ebf; border-radius:50%; background-repeat:no-repeat} .list.icon .list_name:before{background-color:#d0ecf2} .list.icon .list_li:nth-child(1):before{background-image:url('../img/medicalguide_icon1.png')} .list.icon .list_li:nth-child(2):before{background-image:url('../img/medicalguide_icon2.png')} .list.icon .list_li:nth-child(3):before{background-image:url('../img/medicalguide_icon3.png')} .list.icon .list_li:nth-child(4):before{background-image:url('../img/medicalguide_icon4.png')} .list.icon .list_li:nth-child(5):before{background-image:url('../img/medicalguide_icon5.png')} @media all and (max-width:750px){ .list.icon.length3 .list_li, .list.icon.length4 .list_li, .list.icon.length5 .list_li{width:50%;} .list.icon .list_ul{margin-left:-10px;} .list.icon .list_ul:before{display:none;} .list.icon .list_li{padding-left:10px; margin-top:10px;} .list.icon .list_inner{padding-top:44px; padding-bottom:15px; border:10px solid #d0ecf2;} } @media all and (max-width:480px){ .list.icon.length3 .list_li, .list.icon.length4 .list_li, .list.icon.length5 .list_li{width:100%;} .list.icon .list_ul{margin-left:0;} .list.icon .list_li{padding-left:0;} } /* 리스트 :포인트 */ @media all and (max-width:750px){ .list.point .list_li{width:50%;} .list.point .list_ul{margin-left:-10px;} .list.point .list_ul:before{display:none;} .list.point .list_li{padding-left:10px; margin-top:10px;} .list.point .list_inner{padding-top:44px; padding-bottom:15px;} .list.point .list_name:before{display:none;} } @media all and (max-width:480px){ .list.point .list_li{width:100%;} .list.point .list_ul{margin-left:0;} .list.point .list_li{padding-left:0;} } .list.type1.point .list_flag{background-color:#246eb9;} .list.type1.point .list_ul:before{background-color:#d3e2f1;} .list.type1.point .list_name:before{background-color:#e9f1f8;} @media all and (max-width:750px){ .list.type1.point .list_inner{background-color:#d3e2f1;} } .list.type2.point .list_flag{background-color:#169ebf} .list.type2.point .list_ul:before{border:10px solid #d0ecf2;} .list.type2.point .list_name:before{width:2px; background-color:#ccc} @media all and (max-width:750px){ .list.type2.point .list_inner{border:10px solid #d0ecf2;} } /* 리스트 스탭 */ .list.type1.steps .list_flag{background-color:#169ebf} .list.type1.steps .list_ul:before{background-color:#d0ecf2} .list.type1.steps .list_name:before{background-color:#e8f6f9} @media all and (max-width:750px){ .list.steps .list_inner{background-color:#d0ecf2;} .list.steps .list_li{width:50%;} .list.steps .list_ul{margin-left:-10px;} .list.steps .list_ul:before{display:none;} .list.steps .list_li{padding-left:10px; margin-top:10px;} .list.steps .list_inner{padding-top:44px; padding-bottom:15px;} .list.steps .list_name:before{display:none;} } @media all and (max-width:480px){ .list.steps .list_li{width:100%;} .list.steps .list_ul{margin-left:0;} .list.steps .list_li{padding-left:0;} } /* 스텝박스 */ .step{position:relative; font-size:0; line-height:0;} .step:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 30px); border:10px solid #d3e2f1; box-sizing:border-box} .step .step_ul{text-align:center} .step .step_li{display:inline-block; position:relative; width:25%; padding-top:30px; vertical-align:top;} .step .step_inner{padding-top:60px; padding-bottom:48px;} .step .step_flag{display:block; position:absolute; top:0; left:0; right:0; width:80px; height:80px; margin-left:auto; margin-right:auto; padding-top:19px; background-color:#246eb9; border-radius:50%; color:#fff; font-size:16px; line-height:18px; letter-spacing:-0.05em; font-weight:600} .step .step_flag span{display:block; font-size:24px; line-height:26px; letter-spacing:-0.05em} .step .step_name{display:block; position:relative; color:#484848; font-size:20px; line-height:22px; letter-spacing:-0.025em; font-weight:600} .step .step_name:before{display:block; width:55px; height:60px; /*background-color:#ccc;*/ margin-left:auto; margin-right:auto} .step .step_name span{display:block; margin-top:23px} .step .step_text{display:block; margin-top:2px; color:#484848; font-size:17px; line-height:22px; letter-spacing:-0.025em} .step.length3 .step_li{width:33.33%} .step.length4 .step_li{width:25%} .step.length5 .step_li{width:20%} @media all and (max-width:1000px){ .step .step_flag{width:65px; height:65px; padding-top:16px; font-size:14px; line-height:16px;} .step .step_flag span{font-size:20px; line-height:22px;} .step .step_name{font-size:16px; line-height:21px;} .step .step_text{padding-left:10px; padding-right:10px;} } @media all and (max-width:750px){ .step:before{display:none;} .step .step_li{width:50%;} .step .step_ul{margin-left:-10px;} .step .step_li{padding-left:10px; margin-top:10px;} .step .step_inner{padding-top:44px; padding-bottom:15px; border:10px solid #d3e2f1;} .step .step_name span{margin-top:0;} .step .step_name:before{display:none;} } @media all and (max-width:480px){ .step .step_li{width:100%;} .step .step_ul{margin-left:0;} .step .step_li{padding-left:0;} } /* 진료시간 안내 */ .cs{position:relative; height:590px; margin-top:109px} .cs .cs_image{display:block; position:absolute; top:0; bottom:0; left:0; width:100%; height:480px; margin-top:auto; margin-bottom:auto; background:url('../img/cs_bg.jpg') no-repeat;} .cs .cs_wrap{position:absolute; top:0; right:0; width:630px; padding:47px 74px; background-color:#246eb9} .cs .cs_title{color:#fff; font-size:32px; line-height:34px; font-weight:600} .cs .cs_content{position:relative; margin-top:45px; padding-top:49px; border-top:1px solid #fff} .cs .cs_content:first-child{margin-top:0; padding-top:0; border-top:none} .cs .cs_ul{margin-top:15px; display:grid; grid-template-columns:max-content max-content; column-gap:14px; row-gap:0} .cs .cs_li{display:contents} .cs .cs_dt{color:#fff; font-size:20px; line-height:32px; font-weight:600} .cs .cs_dd{margin-left:0; color:#fff; font-size:20px; line-height:32px; letter-spacing:0.02em} .cs .cs_holiday{position:absolute; top:15px; right:0; color:#fff; font-size:17px; line-height:19px; letter-spacing:-0.025em} .cs .cs_text{margin-top:15px; color:#fff; font-size:20px; line-height:32px} .cs .cs_text span{font-weight:600} .cs .cs_tel a{display:block; margin-top:12px; color:#fff; font-size:28px; line-height:34px; font-weight:600} @media all and (max-width:1000px){ .cs{height:auto;} .cs .cs_image, .cs .cs_wrap{position:static;} .cs .cs_image{height:320px;} .cs .cs_wrap{width:100%; padding:40px;} .cs .cs_title{font-size:24px; line-height:26px;} .cs .cs_content{margin-top:20px; padding-top:20px;} .cs .cs_ul{column-gap:12px} .cs .cs_dt{font-size:16px; line-height:28px;} .cs .cs_dd{font-size:16px; line-height:28px;} .cs .cs_text{font-size:16px; line-height:28px;} .cs .cs_tel a{font-size:22px; line-height:28px;} .cs .cs_holiday{position:static; margin-top:10px;} } @media all and (max-width:640px){ .cs .cs_image{background-position:top left -100px;} } @media all and (max-width:480px){ .cs .cs_image{background-position:top left -220px;} } /*하단에 진료시간 공통*/ .cs.type2{max-width:1260px; margin-left:auto; margin-right:auto; margin-top:80px;} .sub1_3 .cs.type2{display:none;} @media all and (max-width:640px){ .cs.type2{marign-top:60px;} } /* 의료진소개 */ .doctor{width:800px; margin-left:auto; margin-right:auto; font-size:0; line-height:0} .doctor .doctor_content+.doctor_content{margin-top:60px} .doctor .doctor_intro{position:relative; width:650px; min-height:325px; margin-left:auto; margin-right:auto; background-repeat:no-repeat;} .doctor .doctor_logo{position:absolute; top:66px; left:0; padding-left:120px; color:#246eb9; font-size:22px; line-height:115px; letter-spacing:-0.025em; font-weight:600} .doctor .doctor_logo:before{display:block; position:absolute; top:0; left:0; width:115px; height:115px; background:url('../img/doctor_logo.png') no-repeat 0 0 / 100% auto;} .doctor .doctor_eng{padding-top:154px; padding-bottom:75px; padding-left:107px; color:#246eb9; font-size:58px; line-height:48px; letter-spacing:-0.025em; font-weight:600; background:linear-gradient(to right, #246eb9 10%, #169ebf 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent} .doctor .doctor_eng span{display:block; padding-left:70px} .doctor .doctor_name{display:inline-block; position:absolute; bottom:15px; left:54px; color:#555; font-size:28px; line-height:30px; letter-spacing:initial; font-weight:600} .doctor .doctor_name span{position:relative; margin-left:23px; padding-left:21px; vertical-align:top; font-size:17px; font-weight:200; font-style:normal} .doctor .doctor_name span:before{display:block; position:absolute; top:0; left:0; width:1px; height:20px; background-color:#555} .doctor .doctor_ul{margin-top:42px; padding:50px 60px; border:10px solid #d3e2f1; background:url('../img/doctor_bg.jpg') no-repeat bottom right;} .doctor .doctor_li{display:inline-block; width:50%; position:relative; padding-left:9px; color:#555; font-size:17px; line-height:35px; letter-spacing:initial;} .doctor .doctor_li:before{display:block; position:absolute; top:0; bottom:0; left:0; width:3px; height:3px; margin-top:auto; margin-bottom:auto; background-color:#656565} .doctor .doctor_li.doctor_li_tit{width:100%; margin-top:18px; padding-left:0; color:#222; font-weight:700;} .doctor .doctor_li.doctor_li_tit:first-child{margin-top:0;} .doctor .doctor_li.doctor_li_tit:before{display:none;} .doctor .doctor_li.doctor_li_tit:after{display:block; width:100%; height:1px; margin-top:10px; background:rgba(0,0,0,0.08); content:"";} .doctor .doctor_li.doctor_li_sub{width:100%; margin-top:12px; padding-left:0; color:#444; font-size:15px; font-weight:600; line-height:28px;} .doctor .doctor_li.doctor_li_sub:before{display:none;} .doctor .doctor_content:nth-child(1) .doctor_intro{background-image:url('../img/doctor_photo1.jpg'); background-position:top right;} .doctor .doctor_content:nth-child(2) .doctor_ul{border-color:#d0ecf2;} .doctor .doctor_content:nth-child(2) .doctor_logo{left:auto; right:0; padding-left:auto; padding-right:120px} .doctor .doctor_content:nth-child(2) .doctor_logo:before{left:auto; right:0} .doctor .doctor_content:nth-child(2) .doctor_intro{background-image:url('../img/doctor_photo2.jpg'); background-position:top left;} .doctor .doctor_content:nth-child(2) .doctor_eng{padding-left:220px} .doctor .doctor_content:nth-child(2) .doctor_name{left:auto; right:15px} @media all and (max-width:850px){ .doctor{width:100%;} .doctor .doctor_li{width:100%;} } @media all and (max-width:680px){ .doctor .doctor_logo{display:none;} .doctor .doctor_content:nth-child(1) .doctor_intro{background-position:center; background-size:cover;} .doctor .doctor_content:nth-child(2) .doctor_intro{background-position:center; background-size:cover;} .doctor .doctor_intro{width:auto; height:360px; min-height:0; padding-top:0; border-radius:18px; overflow:hidden; border:1px solid rgba(0,0,0,0.10);} .doctor .doctor_eng{display:none;} .doctor .doctor_name{position:absolute; left:0; right:0; bottom:0; display:block; margin:0; padding:18px 16px; text-align:center; background:rgba(255,255,255,0.92); backdrop-filter:saturate(140%) blur(6px);} .doctor .doctor_content:nth-child(2) .doctor_name{left:0; right:0;} .doctor .doctor_name span:before{display:none;} .doctor .doctor_name span{margin-left:10px; padding-left:0;} .doctor .doctor_ul{padding:20px; border-width:7px; background-size:150px 191px;} } /* 섬네일 리스트 */ .thumbnail.type1{font-size:0; line-height:0} .thumbnail.type1 .thumbnail_ul{margin-top:37px; margin-left:-15px} .thumbnail.type1 .thumbnail_li{display:inline-block; position:relative; width:33.33%; padding-left:15px; text-align:center} .thumbnail.type1 .thumbnail_li:before{display:block; width:100%; height:258px; background-repeat:no-repeat; background-position:center center; background-color:#f6f6f6} .thumbnail.type1 .thumbnail_name{display:block; height:90px; margin-top:20px; border:10px solid #f6f6f6; color:#333; font-size:20px; line-height:22px; letter-spacing:-0.025em; font-weight:600} .thumbnail.type1 .thumbnail_name:after{display:inline-block; height:100%; vertical-align:middle; content:''} .thumbnail.type1 .thumbnail_name span{display:inline-block; vertical-align:middle} @media all and (max-width:1000px){ .thumbnail.type1 .thumbnail_li{width:100%;} .thumbnail.type1 .thumbnail_li + .thumbnail_li{margin-top:10px;} .thumbnail.type1 .thumbnail_name{height:80px; font-size:18px; line-height:20px;} } .thumbnail.type2{font-size:0; line-height:0} .thumbnail.type2 .thumbnail_ul{margin-left:-10px; margin-right:-10px} .thumbnail.type2 .thumbnail_li{display:inline-block; position:relative; width:25%; padding-left:10px; padding-right:10px; text-align:center; vertical-align:top; border-left:1px solid #898989} .thumbnail.type2 .thumbnail_li:first-child{border-left:none} .thumbnail.type2 .thumbnail_image{width:100%; height:240px; background-color:#ccc; background-repeat:no-repeat; background-position:top center; background-size:cover;} .thumbnail.type2 .thumbnail_name{display:block; margin-top:8px; color:#169ebf; font-size:22px; line-height:24px; letter-spacing:initial; font-weight:600} .thumbnail.type2 .thumbnail_text{height:140px; margin-top:11px; background-color:#eee; color:#282828; font-size:17px; line-height:28px; letter-spacing:-0.05em} .thumbnail.type2 .thumbnail_text:after{display:inline-block; height:100%; vertical-align:middle; content:''} .thumbnail.type2 .thumbnail_text span{display:inline-block; vertical-align:middle} @media all and (max-width:1000px){ .thumbnail.type2 .thumbnail_li{width:50%;} .thumbnail.type2 .thumbnail_li{border-left:none;} } @media all and (max-width:480px){ .thumbnail.type2 .thumbnail_li{width:100%;} .thumbnail.type2 .thumbnail_li + .thumbnail_li{margin-top:10px;} .thumbnail.type2 .thumbnail_text{height:100px;} } .thumbnail.type3{font-size:0; line-height:0} .thumbnail.type3 .thumbnail_ul{margin-top:37px; margin-left:-40px} .thumbnail.type3 .thumbnail_li{display:inline-block; position:relative; width:33.33%; padding-left:40px; text-align:center; vertical-align:top;} .thumbnail.type3 .thumbnail_info{position:relative; margin-top:33px; padding-left:50px; padding-right:50px} .thumbnail.type3 .thumbnail_info:before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:10px solid #c8dbed} .thumbnail.type3 .thumbnail_li:nth-child(even) .thumbnail_info:before{border-color:#c5e7ef} .thumbnail.type3 .thumbnail_image{width:100%; height:250px; background-color:#f1f1f1; background-repeat:no-repeat; background-position:top center;} .thumbnail.type3 .thumbnail_name{display:inline-block; position:absolute; top:-7px; left:50%; padding-left:20px; padding-right:20px; background-color:#fff; color:#333; font-size:20px; line-height:22px; letter-spacing:-0.025em; font-weight:600; transform:translateX(-50%)} .thumbnail.type3 .thumbnail_text{height:170px; color:#333; font-size:17px; line-height:28px; letter-spacing:-0.05em; word-break:keep-all} .thumbnail.type3 .thumbnail_text:after{display:inline-block; height:100%; vertical-align:middle; content:''} .thumbnail.type3 .thumbnail_text span{display:inline-block; vertical-align:middle} @media all and (max-width:1000px){ .thumbnail.type3 .thumbnail_ul{margin-top:20px; margin-left:-10px;} .thumbnail.type3 .thumbnail_li{width:50%; padding-bottom:10px; padding-left:10px;} .thumbnail.type3 .thumbnail_info{margin-top:20px;} .thumbnail.type3 .thumbnail_text{height:144px;} } @media all and (max-width:640px){ .thumbnail.type3 .thumbnail_info:before{border-width:7px;} .thumbnail.type3 .thumbnail_li{width:100%;} .thumbnail.type3 .thumbnail_image{height:220px;} .thumbnail.type3 .thumbnail_text{height:auto; padding-top:30px; padding-bottom:30px;} } .thumbnail.type4{margin-top:40px; font-size:0; line-height:0;} .thumbnail.type4 .thumbnail_ul{margin-left:-14px} .thumbnail.type4 .thumbnail_li{display:inline-block; position:relative; width:25%; padding-left:14px; text-align:center} .thumbnail.type4 .thumbnail_image{width:100%; height:278px; background-color:#f1f1f1; background-repeat:no-repeat; background-position:top center;} .thumbnail.type4 .thumbnail_name{display:block; height:50px; margin-top:8px; background-color:#246eb9; color:#fff; font-size:17px; line-height:22px; letter-spacing:-0.025em; font-weight:600} .thumbnail.type4 .thumbnail_name:after{display:inline-block; height:100%; vertical-align:middle; content:''} .thumbnail.type4 .thumbnail_name span{display:inline-block; vertical-align:middle} .thumbnail.type4 .thumbnail_li:nth-child(even) .thumbnail_name{background-color:#169ebf} @media all and (max-width:1000px){ .thumbnail.type4{margin-top:30px;} .thumbnail.type4 .thumbnail_li{width:50%; margin-bottom:14px;} } @media all and (max-width:640px){ .thumbnail.type4 .thumbnail_li{width:100%;} .thumbnail.type4 .thumbnail_image{height:240px;} } .thumbnail.type5{font-size:0; line-height:0} .thumbnail.type5 .thumbnail_ul{margin-top:37px; margin-left:-40px} .thumbnail.type5 .thumbnail_li{display:inline-block; position:relative; width:50%; padding-left:40px; text-align:center; vertical-align:top} /*.thumbnail.type5 .thumbnail_info{position:relative; margin-top:33px; padding-left:50px; padding-right:50px} .thumbnail.type5 .thumbnail_info:before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:10px solid #c8dbed} .thumbnail.type5 .thumbnail_li:nth-child(even) .thumbnail_info:before{border-color:#c5e7ef}*/ .thumbnail.type5 .thumbnail_text{position:relative; height:120px;} .thumbnail.type5 .thumbnail_text:before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:10px solid #c8dbed} .thumbnail.type5 .thumbnail_li:nth-child(even) .thumbnail_text:before{border-color:#c5e7ef} .thumbnail.type5 .thumbnail_text:after{display:inline-block; height:100%; vertical-align:middle; content:''} .thumbnail.type5 .thumbnail_text p{display:inline-block; vertical-align:middle; font-size:20px; line-height:25px; letter-spacing:-0.025em;} .thumbnail.type5 .thumbnail_text p span{font-weight:600;} .thumbnail.type5 .thumbnail_image{width:100%; height:250px; margin-top:20px; background-color:#f1f1f1; background-repeat:no-repeat; background-position:bottom center;} @media all and (max-width:1000px){ .thumbnail.type5 .thumbnail_li{width:100%;} .thumbnail.type5 .thumbnail_li + .thumbnail_li{margin-top:30px;} .thumbnail.type5 .thumbnail_text{height:80px;} .thumbnail.type5 .thumbnail_text p{padding-left:20px; padding-right:20px; font-size:18px; line-height:23px; word-break:keep-all;} } /* 배너 */ .banner.image{height:260px; margin-top:40px; padding-top:76px; padding-left:39px; padding-right:39px; background-color:#282828; background-repeat:no-repeat; background-position:top right;} .banner.image .banner_subject{color:#fff; font-size:24px; line-height:29px; letter-spacing:-0.025em} .banner.image .banner_subject span{font-weight:600} .banner.image .banner_text{margin-top:22px; color:#fff; font-size:20px; line-height:28px; letter-spacing:-0.025em} .banner.image .banner_text span{font-weight:600} @media all and (max-width:640px){ .banner.image{height:initial; margin-top:20px; padding-top:40px; padding-bottom:40px; background-size:cover;} .banner.image .banner_subject{font-size:20px; line-height:25px;} .banner.image .banner_text{font-size:16px; line-height:21px;} .banner.image .banner_text br{display:none;} } /* 사진 */ .photo.length2 .photo_li{width:50%} .photo.length3 .photo_li{width:33.33%} .photo{font-size:0; line-height:0} .photo.type1 .photo_ul{margin-left:-30px} .photo.type1 .photo_li{display:inline-block; padding-left:30px} .photo.type1 .photo_image{width:100%; height:380px; background-color:#f1f1f1; background-repeat:no-repeat; background-position:center center} @media all and (max-width:1000px){ .photo.type1.length2 .photo_li{width:100%;} .photo.type1.length2 .photo_li + .photo_li{margin-top:10px;} } @media all and (max-width:640px){ .photo.type1 .photo_image{height:260px;} } .photo.type2 .photo_ul{margin-top:-20px; margin-left:-20px} .photo.type2 .photo_li{display:inline-block; padding-top:20px; padding-left:20px; width:50%; vertical-align:top} .photo.type2 .photo_inner{width:100%; height:220px; padding-top:77px; padding-left:20px; padding-right:20px; background-color:#999; background-repeat:no-repeat; background-position:top center; text-align:center} .photo.type2 .photo_case{display:inline-block; height:30px; padding-left:15px; padding-right:15px; background-color:#169ebf; border-radius:30px; color:#fff; font-size:18px; line-height:30px; letter-spacing:-0.025em; font-weight:600} .photo.type2 .photo_text{margin-top:16px; color:#fff; font-size:18px; line-height:25px; letter-spacing:-0.025em; word-break:keep-all;} @media all and (max-width:640px){ .photo.type2 .photo_ul{margin-left:0;} .photo.type2 .photo_li{width:100%; padding-left:0;} .photo.type2 .photo_inner{padding-top:57px; height:200px;} .photo.type2 .photo_text{font-size:16px; line-height:23px;} } .photo.type3 .photo_content{position:relative; min-height:320px; padding-top:10px; padding-left:460px;} .photo.type3 .photo_image{position:absolute; top:0; left:0; width:420px; height:320px; background-color:#f1f1f1; background-repeat:no-repeat; background-position:top center;} .photo.type3 .photo_subject{display:block; color:#f66120; font-size:24px; line-height:26px; letter-spacing:-0.025em} .photo.type3 .photo_subject span{font-weight:600} .photo.type3 .photo_ul{margin-top:29px} .photo.type3 .photo_li{position:relative; margin-top:25px; padding-left:12px; vertical-align:top; color:#333; font-size:17px; line-height:28px; letter-spacing:-0.05em} .photo.type3 .photo_li:first-child{margin-top:0} .photo.type3 .photo_li:before{display:block; position:absolute; top:11px; left:0; width:6px; height:6px; background-color:#f66120} @media all and (max-width:1000px){ .photo.type3 .photo_content{padding-left:0;} .photo.type3 .photo_image{position:static; width:100%; height:260px;} .photo.type3 .photo_subject{margin-top:30px; font-size:20px; line-height:25px;} .photo.type3 .photo_li{margin-top:15px; font-size:16px; line-height:21px;} .photo.type3 .photo_li:before{top:8px;} } @media all and (max-width:540px){ /*.photo.type3 .photo_image{background-size:cover;}*/ } .photo.type4{position:relative;} .photo.type4 .photo_content{position:relative; min-height:320px; padding-top:10px} .photo.type4 .photo_image{position:absolute; top:0; right:0; width:300px; height:300px; background-color:#f1f1f1; background-repeat:no-repeat; background-position:top center;} .photo.type4 .photo_subject{color:#f66120; font-size:24px; line-height:36px; letter-spacing:-0.025em} .photo.type4 .photo_subject span{font-weight:600} .photo.type4 .photo_text{font-size:17px; line-height:28px; letter-spacing:-0.05em;} .photo.type4 .photo_ul{margin-top:40px; /*width:580px*/} .photo.type4 .photo_li{position:relative; padding-top:9px; padding-bottom:8px; padding-left:24px; vertical-align:top; border-bottom:1px solid #246eb9; color:#333; font-size:17px; line-height:22px; letter-spacing:-0.025em; word-break:keep-all;} .photo.type4 .photo_li:first-child{margin-top:0} .photo.type4 .photo_li:before{display:block; position:absolute; top:14px; left:0; width:11px; height:11px; border:2px solid #246eb9} /* 감각통합치료 기대효과 */ .effect{margin-top:57px; font-size:0; line-height:0; text-align:center;} .effect .effect_li{display:inline-block; position:relative; width:25%; padding-top:36px; padding-bottom:36px; background-color:#f6f6f6; vertical-align:top;} .effect .effect_li:before{display:block; width:76px; height:59px; margin-left:auto; margin-right:auto; background-repeat:no-repeat;} .effect .effect_li:after{display:block; position:absolute; top:62px; width:1px; height:100px; background-color:#d2d2d2;} .effect .effect_li:first-child:after{display:none;} .effect .effect_subject{display:block; margin-top:24px; color:#246eb9; font-size:22px; line-height:24px; letter-spacing:-0.025em; font-weight:600;} .effect .effect_text{margin-top:31px; color:#333; font-size:17px; line-height:28px; letter-spacing:-0.025em;} .effect .effect_li:nth-child(even) .effect_subject{color:#169ebf;} .effect .effect_li:nth-child(1):before{background-image:url('../img/sensory_icon1.png');} .effect .effect_li:nth-child(2):before{background-image:url('../img/sensory_icon2.png');} .effect .effect_li:nth-child(3):before{background-image:url('../img/sensory_icon3.png');} .effect .effect_li:nth-child(4):before{background-image:url('../img/sensory_icon4.png');} @media all and (max-width:1000px){ .effect{margin-top:30px;} .effect .effect_li{width:50%; padding-top:20px; padding-bottom:20px;} .effect .effect_li:after{display:none;} } @media all and (max-width:640px){ .effect .effect_li{width:100%; padding-top:15px; padding-bottom:15px;} .effect .effect_li + .effect_li{margin-top:10px;} .effect .effect_subject{margin-top:15px; font-size:20px; line-height:22px;} .effect .effect_text{margin-top:15px; padding-left:20px; padding-right:20px; font-size:15px; line-height:22px; word-break:keep-all;} .effect .effect_text br{display:none;} } /* 시설안내 */ .gallery{margin-top:38px; text-align:center; font-size:0; line-height:0;} .gallery .gallery_ul{margin-top:-50px; margin-left:-35px;} .gallery .gallery_li{display:inline-block; width:33.33%; padding-top:50px; padding-left:35px;} .gallery .gallery_image{display:block; width:100%; height:300px; background-color:#f9f9f9; background-repeat:no-repeat; background-position:top center;} .gallery .gallery_name{display:block; margin-top:22px; color:#f66120; font-size:24px; line-height:26px; letter-spacing:-0.025em; font-weight:600;} .gallery .gallery_text{margin-top:10px; color:#282828; font-size:17px; line-height:19px; letter-spacing:-0.025em;} @media all and (max-width:1000px){ .gallery .gallery_li{width:50%; padding-top:35px;} .gallery .gallery_image{height:250px;} } @media all and (max-width:640px){ .gallery .gallery_li{width:100%;} } .textlist{font-size:0; line-height:0;} .textlist .textlist_list{margin-left:-20px;} .textlist .textlist_item{display:inline-block; width:50%; padding-left:20px;} .textlist .textlist_inner{position:relative; padding-top:30px; padding-bottom:26px; padding-left:20px;} .textlist .textlist_inner:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 30px); border:10px solid #d0ecf2;} .textlist .textlist_item:nth-child(even) .textlist_inner:before{border-color:#d3e2f1;} .textlist .textlist_item:nth-child(even) .textlist_title{background-color:#246eb9;} .textlist .textlist_ul{position:relative; margin-top:54px;} .textlist .textlist_ul:before{display:block; position:absolute; top:0; left:50%; width:1px; height:100%; background-color:#b5b5b5;} .textlist .textlist_li{display:inline-block; width:50%;} .textlist .textlist_title{position:absolute; top:0; left:0; right:0; margin-left:auto; margin-right:auto; width:300px; padding-top:22px; padding-bottom:21px; margin-left:auto; margin-right:auto; background-color:#169ebf; border-radius:20px; text-align:center; color:#fff; font-size:20px; line-height:22px; letter-spacing:-0.025em; font-weight:600;} .textlist .textlist_text{height:140px; text-align:center;} .textlist .textlist_text:after{display:inline-block; height:100%; vertical-align:middle; content:'';} .textlist .textlist_text p{display:inline-block; padding-left:20px; padding-right:20px; vertical-align:middle; color:#555; font-size:17px; line-height:28px; letter-spacing:-0.025em; word-break:keep-all;} @media all and (max-width:1000px){ .textlist .textlist_item{width:100%;} .textlist .textlist_item + .textlist_item{margin-top:20px;} } @media all and (max-width:640px){ .textlist .textlist_inner:before{height:calc(100% - 22px);} .textlist .textlist_title{width:250px; padding-top:15px; padding-bottom:15px;} .textlist .textlist_ul{margin-top:40px;} .textlist .textlist_ul:before{display:none;} .textlist .textlist_li{position:relative; width:100%;} .textlist .textlist_li:before{display:block; position:absolute; top:11px; left:0; width:3px; height:3px; background-color:#999; border-radius:50%;} .textlist .textlist_text{height:auto; text-align:left;} .textlist .textlist_text p{padding-left:10px;} } .program{font-size:0; line-height:0;} .program .program_ul{margin-top:53px; text-align:center;} .program .program_li{display:inline-block; vertical-align:top; text-align:center; margin-top:10px; margin-right:10px; padding-right:42px;} .program .program_inner{position:relative; width:200px; height:200px; padding-top:73px; padding-bottom:78px;} .program .program_inner:before{display:block; position:absolute; top:0; left:0; width:200px; height:200px; border-radius:50%; border-bottom-right-radius:0; transform:rotate(-45deg);} .program .program_inner:after{display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:160px; height:160px; margin:auto; background-color:#fff; border-radius:50%;} .program .program_text{position:relative; z-index:10; color:#282828; font-size:17px; line-height:28px; letter-spacing:-0.025em;} .program .program_name{position:relative; z-index:10; display:block; margin-top:5px; font-size:24px; line-height:26px; letter-spacing:-0.025em; font-weight:600;} .program .program_li:nth-child(1) .program_inner:before{background-color:#18688d;} .program .program_li:nth-child(1) .program_name span{color:#18688d;} .program .program_li:nth-child(2) .program_inner:before{background-color:#3fa1c6;} .program .program_li:nth-child(2) .program_name span{color:#18688d;} .program .program_li:nth-child(3) .program_inner:before{background-color:#51c2d4;} .program .program_li:nth-child(3) .program_name span{color:#51c2d4;} .program .program_li:nth-child(4) .program_inner:before{background:linear-gradient(135deg, #54c4d0, #67cfb3);} .program .program_li:nth-child(4) .program_name span{color:#18688d;} .program .program_li:last-child{margin-right:0; padding-right:0;} .program .program_li:last-child .program_inner:before{background-color:#67ceb4; border-radius:50%;} .program .program_li:last-child .program_inner:after{display:none;} .program .program_li:last-child .program_text{color:#fff; font-size:24px; line-height:28px; letter-spacing:-0.025em; font-weight:600;} @media all and (max-width:1300px){ .program{width:750px; margin-left:auto; margin-right:auto;} } @media all and (max-width:800px){ .program{width:508px;} .program .program_li:last-child{padding-right:42px;} } @media all and (max-width:540px){ .program{width:200px;} .program .program_ul{margin-top:30px;} .program .program_li{margin-top:10px; margin-right:0; padding-bottom:42px; padding-right:0;} .program .program_li:last-child{padding-bottom:0; padding-right:0;} .program .program_li:last-child .program_text{font-size:22px; line-height:26px;} .program .program_inner{width:180px; height:180px; padding-top:60px;} .program .program_inner:before{width:180px; height:180px;} .program .program_inner:after{width:140px; height:140px;} .program .program_inner:before{transform:rotate(45deg);} .program .program_text{font-size:15px;} .program .program_name{font-size:22px; line-height:24px;} } /* 도수치료 스탭 */ .manual{margin-top:34px; text-align:center; font-size:0; line-height:0;} .manual .manual_li{display:inline-block;} .manual .manual_flag{position:relative; font-size:16px; line-height:18px; letter-spacing:-0.05em; font-weight:600;} .manual .manual_flag span{display:block; position:relative; padding-bottom:16px; font-size:24px; line-height:26px;} .manual .manual_flag span:before{display:block; position:absolute; bottom:0; left:50%; width:30px; height:1px; background-color:#555; transform:translate(-50%);} .manual .manual_text{position:relative; margin-top:18px; color:#555; font-size:20px; line-height:22px; letter-spacing:-0.025em; font-weight:600;} .manual .manual_inner{position:relative; width:250px; height:250px; padding-top:63px; /*padding-bottom:63px;*/ border-radius:50%;} .manual .manual_inner:before{display:block; position:absolute; top:50%; left:50%; width:210px; height:210px; background-color:#fff; border-radius:50%; transform:translate(-50%, -50%);} .manual .manual_li:nth-child(1) .manual_inner{background-color:#6dd2aa; border-bottom-left-radius:0;} .manual .manual_li:nth-child(2) .manual_inner{background-color:#51c2d4;} .manual .manual_li:nth-child(3) .manual_inner{background-color:#3fa1c6;} .manual .manual_li:nth-child(4) .manual_inner{background-color:#18688d; border-top-right-radius:0;} @media all and (max-width:1040px){ .manual{width:500px; margin-left:auto; margin-right:auto;} } @media all and (max-width:500px){ .manual{width:auto;} .manual .manual_inner{width:200px; height:200px; padding-top:40px;} .manual .manual_inner:before{width:160px; height:160px;} .manual .manual_flag{font-size:14px; line-height:16px;} .manual .manual_flag span{font-size:20px; line-height:22px;} .manual .manual_text{font-size:17px; line-height:19px;} } /* 병원소개 > 진료안내 */ .sub1_3 .list.icon{margin-top:127px} /* 통증클리릭 > 물리치료 */ .sub2_1 .photo_box{margin-top:55px} @media all and (max-width:1000px){ .sub2_1 .photo_box{margin-top:30px; margin-bottom:0;} } /* 통증클리릭 > 주사치료 */ .sub2_2 .list.point{margin-top:42px;} .sub2_2 .photo.type3{margin-top:15px;} .sub2_2 .photo.type3 .photo_content{min-height:290px; padding-left:0; padding-right:600px;} .sub2_2 .photo.type3 .photo_image{left:auto; right:0; width:580px; height:280px; background-image:url('../img/nerveblock_image.jpg');} .sub2_2 .box.image .box_image{background-image:url('../img/injection_image.jpg');} .sub2_2 .thumbnail.type1 .thumbnail_li:nth-child(1):before{background-image:url(../img/ivnt_image1.jpg)} .sub2_2 .thumbnail.type1 .thumbnail_li:nth-child(2):before{background-image:url(../img/ivnt_image2.jpg)} .sub2_2 .thumbnail.type1 .thumbnail_li:nth-child(3):before{background-image:url(../img/ivnt_image3.jpg)} @media all and (max-width:1000px){ .sub2_2 .box.text .box_subject span{display:initial;} .sub2_2 .photo.type3 .photo_content{padding-right:0;} .sub2_2 .photo.type3 .photo_image{margin-top:20px; width:initial;} } @media all and (max-width:580px){ .sub2_2 .photo.type3 .photo_image{height:164px; background-size:340px 164px;} } /* 통증클리릭 > 수기치료 */ .sub2_3 .photo{margin-top:20px;} .sub2_3 .photo .photo_image{background-image:url('../img/manualtherapy_image1.jpg');} .sub2_3 .thumbnail.type2{margin-top:36px;} .sub2_3 .thumbnail.type2 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/manualtherapy_thum1.jpg');} .sub2_3 .thumbnail.type2 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/manualtherapy_thum2.jpg');} .sub2_3 .thumbnail.type2 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/manualtherapy_thum3.jpg');} .sub2_3 .thumbnail.type2 .thumbnail_li:nth-child(4) .thumbnail_image{background-image:url('../img/manualtherapy_thum4.jpg');} .sub2_3 .banner.image{background-image:url('../img/manualtherapy_banner1.jpg');} @media all and (max-width:1000px){ .sub2_3 .banner.image{margin-top:20px;} .sub2_3 .thumbnail.type2{margin-top:20px;} } /* 통증클리릭 > 입원실 */ .sub2_4 .thumbnail.type5 .thumbnail_image{height:380px;} .sub2_4 .thumbnail.type5 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/hospital_photo1.jpg');} .sub2_4 .thumbnail.type5 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/hospital_photo2.jpg');} .sub2_4 .photo.type4{margin-top:30px; background:url('../img/hospital_bg.jpg') no-repeat bottom right;} .sub2_4 .photo.type4 .photo_ul{width:500px;} .sub2_4 .step{margin-top:36px;} .sub2_4 .step .step_li:nth-child(1) .step_name:before{background-image:url('../img/hospital_icon1.png');} .sub2_4 .step .step_li:nth-child(2) .step_name:before{background-image:url('../img/hospital_icon2.png');} .sub2_4 .step .step_li:nth-child(3) .step_name:before{background-image:url('../img/hospital_icon3.png');} .sub2_4 .step .step_li:nth-child(4) .step_name:before{background-image:url('../img/hospital_icon4.png');} .sub2_4 .gallery .gallery_li:nth-child(1) .gallery_image{background-image:url('../img/hospital_gallery1.jpg');} .sub2_4 .gallery .gallery_li:nth-child(2) .gallery_image{background-image:url('../img/hospital_gallery2.jpg');} .sub2_4 .gallery .gallery_li:nth-child(3) .gallery_image{background-image:url('../img/hospital_gallery3.jpg');} .sub2_4 .gallery .gallery_li:nth-child(4) .gallery_image{background-image:url('../img/hospital_gallery4.jpg');} .sub2_4 .gallery .gallery_li:nth-child(5) .gallery_image{background-image:url('../img/hospital_gallery5.jpg');} .sub2_4 .gallery .gallery_li:nth-child(6) .gallery_image{background-image:url('../img/hospital_gallery6.jpg');} @media all and (max-width:1000px){ .sub2_4 .thumbnail.type5 .thumbnail_image{height:320px;} } @media all and (max-width:800px){ .sub2_4 .photo.type4{margin-top:20px; background:none;} .sub2_4 .photo.type4 .photo_ul{width:100%;} } @media all and (max-width:640px){ .sub2_4 .photo.type4 .photo_subject br{display:none;} .sub2_4 .thumbnail.type5 .thumbnail_text p span{display:block;} .sub2_4 .thumbnail.type5 .thumbnail_image{height:320px;} } @media all and (max-width:480px){ .sub2_4 .thumbnail.type5 .thumbnail_image{height:280px;} } /* 도수치료센터 > 도수치료 */ .sub3_1 .photo.type1{margin-top:60px;} .sub3_1 .photo.type1 .photo_image{background-image:url('../img/manualtherapy_photo1.jpg');} .sub3_1 .thumbnail.type2{margin-top:36px;} .sub3_1 .thumbnail.type2 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/manual_thum1.jpg');} .sub3_1 .thumbnail.type2 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/manual_thum2.jpg');} .sub3_1 .thumbnail.type2 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/manual_thum3.jpg');} .sub3_1 .thumbnail.type2 .thumbnail_li:nth-child(4) .thumbnail_image{background-image:url('../img/manual_thum4.jpg');} .sub3_1 .thumbnail.type4 .thumbnail_li{width:33.33%;} .sub3_1 .thumbnail.type4 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/together_thum1.jpg');} .sub3_1 .thumbnail.type4 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/together_thum2.jpg');} .sub3_1 .thumbnail.type4 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/together_thum3.jpg');} .sub3_1 .banner.image{background-image:url('../img/manual_banner1.jpg');} @media all and (max-width:1000px){ .sub3_1 .thumbnail.type4 .thumbnail_li{width:50%;} } @media all and (max-width:640px){ .sub3_1 .photo.type1{margin-top:40px;} .sub3_1 .photo.type1 .photo_image{height:241px; background-size:800px 241px;} .sub3_1 .thumbnail.type4 .thumbnail_li{width:100%;} } /* 도수치료센터 > 운동치료 */ .sub3_2 .thumbnail.type2{margin-top:36px;} .sub3_2 .thumbnail.type2 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/exercise_thum1.jpg');} .sub3_2 .thumbnail.type2 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/exercise_thum2.jpg');} .sub3_2 .thumbnail.type2 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/exercise_thum3.jpg');} .sub3_2 .thumbnail.type2 .thumbnail_li:nth-child(4) .thumbnail_image{background-image:url('../img/exercise_thum4.jpg');} @media all and (max-width:640px){ .sub3_2 .box.text .box_subject span{display:initial;} } /* 도수치료센터 > 수술 후 재활 */ .sub3_3 .photo.type1{margin-top:60px;} .sub3_3 .photo.type1 .photo_image{background-image:url('../img/rehabilitation_photo1.jpg');} .sub3_3 .thumbnail.type3 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/rehabilitation_thum1.jpg');} .sub3_3 .thumbnail.type3 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/rehabilitation_thum2.jpg');} .sub3_3 .thumbnail.type3 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/rehabilitation_thum3.jpg');} @media all and (max-width:640px){ .sub3_3 .photo.type1 .photo_image{height:240px; background-position:center center;} } /* 도수치료센터 > 척추 측만증 */ .sub3_4 .photo.type2{margin-top:52px;} .sub3_4 .photo.type2 .photo_li:nth-child(1) .photo_inner{background-image:url('../img/scoliosis_photo1.jpg');} .sub3_4 .photo.type2 .photo_li:nth-child(2) .photo_inner{background-image:url('../img/scoliosis_photo2.jpg');} .sub3_4 .photo.type2 .photo_li:nth-child(3) .photo_inner{background-image:url('../img/scoliosis_photo3.jpg');} .sub3_4 .photo.type2 .photo_li:nth-child(4) .photo_inner{background-image:url('../img/scoliosis_photo4.jpg');} .sub3_4 .photo.type3{margin-top:60px;} .sub3_4 .photo.type3 .photo_image{background-image:url('../img/schroth_photo1.jpg');} @media all and (max-width:1000px){ .sub3_4 .photo.type2{margin-top:30px;} .sub3_4 .photo.type3{margin-top:20px;} } /* 아동발달센터 > 언어치료/인지치료 */ .sub4_1 .photo.type1{margin-top:60px;} .sub4_1 .photo.type1.language .photo_image{background-image:url('../img/language_photo1.jpg');} .sub4_1 .photo.type1.cognitive .photo_li:nth-child(1) .photo_image{background-image:url('../img/sensory_photo1.jpg');} .sub4_1 .photo.type1.cognitive .photo_li:nth-child(2) .photo_image{background-image:url('../img/sensory_photo2.jpg');} .sub4_1 .photo.type2{margin-top:52px;} .sub4_1 .photo.type2 .photo_li:nth-child(1) .photo_inner{background-image:url('../img/cognitive_thum1.jpg');} .sub4_1 .photo.type2 .photo_li:nth-child(2) .photo_inner{background-image:url('../img/cognitive_thum2.jpg');} .sub4_1 .photo.type2 .photo_li:nth-child(3) .photo_inner{background-image:url('../img/cognitive_thum3.jpg');} .sub4_1 .photo.type2 .photo_li:nth-child(4) .photo_inner{background-image:url('../img/cognitive_thum4.jpg');} .sub4_1 .photo.type4{margin-top:30px; background:url('../img/language_bg.jpg') no-repeat bottom right;} .sub4_1 .photo.type4 .photo_ul{width:500px;} @media all and (max-width:1000px){ .sub4_1 .photo.type1{margin-top:30px;} .sub4_1 .photo.type2{margin-top:20px;} } @media all and (max-width:800px){ .sub4_1 .photo.type4{background:none;} .sub4_1 .photo.type4 .photo_ul{width:100%;} } @media all and (max-width:640px){ .sub4_1 .box.text .box_subject span{display:initial;} .sub4_1 .photo.type1 .photo_image{height:240px; background-position:center center;} } /* 아동발달센터 > 물리치료/놀이치료 */ .sub4_2 .banner.image{background-image:url('../img/child_banner1.jpg');} .sub4_2 .thumbnail.type3 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/child_thum1.jpg');} .sub4_2 .thumbnail.type3 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/child_thum2.jpg');} .sub4_2 .thumbnail.type3 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/child_thum3.jpg');} .sub4_2 .thumbnail.type4 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/child_photo1.jpg');} .sub4_2 .thumbnail.type4 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/child_photo2.jpg');} .sub4_2 .thumbnail.type4 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/child_photo3.jpg');} .sub4_2 .thumbnail.type4 .thumbnail_li:nth-child(4) .thumbnail_image{background-image:url('../img/child_photo4.jpg');} .sub4_2 .photo.type1{margin-top:55px;} .sub4_2 .photo.type1 .photo_image{background-image:url('../img/sensory_photo3.jpg');} /*.sub4_2 .photo.type1 .photo_li:nth-child(1) .photo_image{background-image:url('../img/sensory_photo1.jpg');} .sub4_2 .photo.type1 .photo_li:nth-child(2) .photo_image{background-image:url('../img/sensory_photo2.jpg');}*/ @media all and (max-width:1000px){ .sub4_2 .photo.type1{margin-top:30px;} } @media all and (max-width:640px){ .sub4_2 .box.text .box_subject span{display:initial;} .sub4_2 .photo.type1 .photo_li:nth-child(2) .photo_image{background-position:center left;} } @media all and (max-width:480px){ .sub4_2 .photo.type1 .photo_li:nth-child(1) .photo_image{background-position:top -100px right -50px;} } /* 미술치료 */ .sub4_3 .photo.type4{margin-top:30px; background:url('../img/child_bg1.jpg') no-repeat bottom right;} .sub4_3 .photo.type4 .photo_ul{width:500px;} .sub4_3 .photo.type1{margin-top:55px;} .sub4_3 .photo.type1 .photo_image{background-image:url('../img/cognitive_photo1.jpg');} /*growth_photo2*/ @media all and (max-width:1000px){ .sub4_3 .banner.image{margin-top:20px;} } @media all and (max-width:800px){ .sub4_3 .photo.type4{background:none;} .sub4_3 .photo.type4 .photo_ul{width:100%;} } /* 아동발달센터 > 전산화인지 */ .sub4_4 .photo.type2{margin-top:52px;} .sub4_4 .photo.type2 .photo_li:nth-child(1) .photo_inner{background-image:url('../img/computer_thum1.jpg');} .sub4_4 .photo.type2 .photo_li:nth-child(2) .photo_inner{background-image:url('../img/computer_thum2.jpg');} .sub4_4 .photo.type2 .photo_li:nth-child(3) .photo_inner{background-image:url('../img/computer_thum3.jpg');} .sub4_4 .photo.type2 .photo_li:nth-child(4) .photo_inner{background-image:url('../img/computer_thum4.jpg');} .sub4_4 .box.image .box_image{height:401px; background-image:url('../img/computer_photo.jpg'); background-position:top center; background-color:#fff;} @media all and (max-width:1000px){ .sub4_4 .box.image .box_image{background-position:top left 25px;} } @media all and (max-width:640px){ .sub4_4 .photo.type2{margin-top:30px;} } /* 영유야검진 > 전산화인지 */ .sub5_1 .list.steps{margin-top:20px;} .sub5_1 .photo.type1{margin-top:52px;} .sub5_1 .photo.type1 .photo_image{height:280px; background-image:url('../img/health_photo.jpg');} @media all and (max-width:1000px){ .sub5_1 .photo.type1{margin-top:30px;} .sub5_1 .table{margin-top:30px;} } /* 영유야검진 > 발달평가 */ .sub5_2 .photo.type1{margin-top:55px;} .sub5_2 .photo.type1 .photo_li:nth-child(1) .photo_image{background-image:url('../img/growth_photo1.jpg');} .sub5_2 .photo.type1 .photo_li:nth-child(2) .photo_image{background-image:url('../img/growth_photo2.jpg');} .sub5_2 .photo.type3{margin-top:52px;} .sub5_2 .photo.type3 .photo_image{height:330px; background-image:url('../img/growth_book.jpg');} @media all and (max-width:1000px){ .sub5_2 .photo.type1{margin-top:30px;} .sub5_2 .photo.type3{margin-top:20px;} } @media all and (max-width:640px){ .sub5_2 .photo.type3 .photo_image{height:267px; background-size:340px 267px;} } /* 비만치료센터 > 시너지관라 */ .sub6_1 .photo.type1{margin-top:55px;} .sub6_1 .photo.type1 .photo_image{height:280px; background-image:url('../img/synergy_photo.jpg');} .sub6_1 .list.point{margin-top:20px;} .sub6_1 .textlist{margin-top:57px;} .sub6_1 .photo.type4{margin-top:57px;} .sub6_1 .photo.type4 .photo_content{padding-top:0; padding-left:675px;} .sub6_1 .photo.type4 .photo_image{left:0; right:auto; width:630px; height:350px; background-image:url('../img/synergy_bg.jpg');} @media all and (max-width:1100px){ .sub6_1 .photo.type4 .photo_content{padding-left:485px;} .sub6_1 .photo.type4 .photo_image{width:450px;} } @media all and (max-width:1000px){ .sub6_1 .photo.type4 .photo_content{padding-left:0;} .sub6_1 .photo.type4 .photo_image{position:static; width:100%; height:280px;} .sub6_1 .photo.type4 .photo_text{margin-top:20px;} .sub6_1 .photo.type4 .photo_ul{margin-top:20px;} } /* 비만치료센터 > 맞춤약 처방 */ .sub6_2 .box.image .box_image{background-image:url('../img/prescription_photo1.jpg');} .sub6_2 .photo.type4{margin-top:57px;} .sub6_2 .photo.type4 .photo_content{padding-top:0; padding-left:675px;} .sub6_2 .photo.type4 .photo_image{left:0; right:auto; width:630px; height:350px; background-image:url('../img/prescription_photo2.jpg');} .sub6_2 .thumbnail.type4 .thumbnail_li:nth-child(1) .thumbnail_image{background-image:url('../img/prescription_thum1.jpg');} .sub6_2 .thumbnail.type4 .thumbnail_li:nth-child(2) .thumbnail_image{background-image:url('../img/prescription_thum2.jpg');} .sub6_2 .thumbnail.type4 .thumbnail_li:nth-child(3) .thumbnail_image{background-image:url('../img/prescription_thum3.jpg');} .sub6_2 .thumbnail.type4 .thumbnail_li:nth-child(4) .thumbnail_image{background-image:url('../img/prescription_thum4.jpg');} @media all and (max-width:1100px){ .sub6_2 .photo.type4 .photo_content{padding-left:485px;} .sub6_2 .photo.type4 .photo_image{width:450px;} } @media all and (max-width:1000px){ .sub6_2 .photo.type4 .photo_content{padding-left:0;} .sub6_2 .photo.type4 .photo_image{position:static; width:100%; height:280px;} .sub6_2 .photo.type4 .photo_text{margin-top:20px;} .sub6_2 .photo.type4 .photo_ul{margin-top:20px;} } /**/ .caution{margin-top:10px; color:#999; font-size:12px; line-height:14px;} /*개인정보처리방침*/ .rule{margin-top:40px; color:#3d3d3d;font-weight:400;line-height:1.4; text-align:left;} .rule hr{display:block;height:15px;border:none;margin:0;} .rule .number{margin:5px 0;} .rule .number li{position:relative;margin:5px 0;color:#3d3d3d;font-size:14px;font-weight:400;counter-increment: list-number;padding-left:20px;} .rule .number li::after{position:absolute;left:0;top:0;content:counter(list-number)'.';} .rule p{font-size:14px;color:#3d3d3d;line-height:1.4;} .rule p.bold{font-weight:600;} .rule h2{margin-bottom:5px;font-size:16px;font-weight:600;} .rule h3{font-weight:600;} .rule .box{padding:15px;background:#f7f7f7;} /*게시판*/ .tbl_head01 td, .table td{font-size:16px; font-weight:400;} @media screen and (max-width: 640px) { .tbl_head01 td, .table td{font-size:14px;} } /*비급여*/ .price_table{} .price_table .tbl{border-top:1px solid #ccc; border-left:1px solid #ccc;} .price_table .tbl th, .price_table .tbl td{padding:7px 10px; font-size:15px; line-height:1.4; border-bottom:1px solid #ccc; border-right:1px solid #ccc; text-align:center;} .price_table .tbl th{padding-top:10px; padding-bottom:10px; font-size:18px; background:#6d6d6d; color:#fff; font-weight:600;} .price_table .tbl td.bg{background:#f9f9f9;} .price_table .comment{margin-top:20px; font-size:16px; color:#5d5d5d; font-weight:600; text-align:center;} @media screen and (max-width: 640px) { .price_table .tbl th, .price_table .tbl td{font-size:14px;} .price_table .tbl th{font-size:15px;} } /*도수치료*/ .manual_treat .top_box{margin-bottom:20px; padding:20px 20px; background:#f8f8f8;} .manual_treat .top_box .desc{font-size:24px; color:#1a5c97; text-align:center; font-weight:600; line-height:1.4; word-break: keep-all;} .manual_treat .con_list{margin-bottom:120px;} .manual_treat .con_list .ul{display:flex;} .manual_treat .con_list .li{width:calc((100% - 60px) /3); max-width:300px; margin-right:20px; text-align:center;} .manual_treat .con_list .li:last-child{margin-right:0;} .manual_treat .con_list .li .image{margin-bottom:15px;} .manual_treat .con_list .li .image img{display:block; margin:0 auto; max-width:100%;} .manual_treat .con_list .li .subject{margin-bottom:15px; font-size:22px; font-weight:600; color:#2d2d2d; line-height:1.5; word-break: keep-all;} .manual_treat .con_list .li .desc{width:80%; margin-left:auto; margin-right:auto; font-size:18px; line-height:1.4; color:#3d3d3d; word-break: keep-all;} .manual_treat .image_box{padding:65px 0 65px 60px; background:url('../img/manual_txt_bg.jpg') no-repeat center right / cover; text-align:left;} .manual_treat .image_box .desc{margin-bottom:35px; font-size:20px; color:#3d3d3d; line-height:1.6; word-break: keep-all;} .manual_treat .image_box .desc strong{color:#1a5c97;} .manual_treat .image_box .desc:last-child{margin-bottom:0;} @media screen and (max-width: 1200px) { } @media screen and (max-width: 1000px) { .manual_treat .top_box .desc{font-size:22px;} .manual_treat .con_list{margin-bottom:80px;} .manual_treat .con_list .ul{flex-wrap: wrap; justify-content: center;} .manual_treat .con_list .li{width:calc((100% - 20px) /2); margin-bottom:40px;} .manual_treat .con_list .li:nth-child(even){margin-right:0;} .manual_treat .con_list .li .image{margin-bottom:10px;} .manual_treat .con_list .li .subject{margin-bottom:10px; font-size:20px;line-height:1.3;} .manual_treat .con_list .li .desc{font-size:15px;} .manual_treat .image_box{padding:50px 0 50px 50px;} .manual_treat .image_box .desc{font-size:18px;} } @media screen and (max-width: 640px) { .manual_treat .top_box .desc{font-size:18px;} .manual_treat .con_list{width:90%; margin-left:auto; margin-right:auto; margin-bottom:60px;} .manual_treat .con_list .li .subject{font-size:17px;} .manual_treat .con_list .li .desc{width:95%; font-size:15px;} .manual_treat .image_box{padding:30px 0 30px 35px; background-position:left 70% center;} .manual_treat .image_box .desc{width:70%; margin-bottom:15px; font-size:16px;} .manual_treat .image_box .desc br{display:none;} } @media screen and (max-width: 400px) { .manual_treat .image_box{background-position:left 65% center;} .manual_treat .image_box .desc{width:80%;} } /* 문제성발관리 신규메뉴 추가_250331 */ /* 01손발톱진균증 */ .new_box1 {word-break: keep-all;} .new_box1 .mt40 {margin-top:40px;} .new_box1 .box.top {display:flex;flex-direction:column;justify-content:center;height:389px;padding:0 75px;background: url("http://www.sungmoplusclinic.kr/theme/smp/img/new/bg_top.jpg") no-repeat left top / cover;color:#fff;} .new_box1 .box.top .sttit {font-size:50px;font-weight: 500;} .new_box1 .box.top .sttit em {font-style:normal;font-size:60px;font-weight: 700;} .new_box1 .box.top .logo {margin-top:75px;} .new_box1 .box.top .logo img {filter: brightness(0) saturate(100%) invert(94%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(105%) contrast(105%);} .new_box1 .box.tab {display: flex;} .new_box1 .box.tab .li {position:relative;display:grid;place-items:center;width:50%;background-repeat: no-repeat;background-position: left top;background-size:cover;text-align: center;aspect-ratio: 2/1;} .new_box1 .box.tab .li strong {position:relative;z-index:1;display:block;font-size:30px;font-weight:400;color:#fff;} .new_box1 .box.tab .li strong img {display: block;margin:10px auto 0 auto;} .new_box1 .box.tab .li:nth-child(1) {background-image: url("http://www.sungmoplusclinic.kr/theme/smp/img/new/bg_img01.jpg");} .new_box1 .box.tab .li:nth-child(2) {background-image: url("http://www.sungmoplusclinic.kr/theme/smp/img/new/bg_img02.jpg");} .new_box1 .box.tab .li.on:after {content:"";display:block;position: absolute;left:0;top:0;width: 100%;height: 100%;background: #00a1ff;opacity: 0.35;} .new_box1 .box.tab .li.on strong {font-size:50px;font-weight:700;} @media screen and (max-width:1000px){ .new_box1 .mt40 {margin-top:20px;} .new_box1 .box.top {height:309px;padding:0 55px;} .new_box1 .box.top .sttit {font-size:30px;} .new_box1 .box.top .sttit em {font-size:45px;} .new_box1 .box.top .logo {margin-top:55px;} .new_box1 .box.tab .li strong {font-size:20px;} .new_box1 .box.tab .li.on strong {font-size:35px;} } @media screen and (max-width:640px){ .new_box1 .box.top {height:260px;padding:0 35px;} .new_box1 .box.top .sttit {font-size:30px;} .new_box1 .box.top .sttit em {font-size:35px;} .new_box1 .box.top .logo {margin-top:25px;} .new_box1 .box.tab .li strong {font-size:18px;} .new_box1 .box.tab .li strong img {width: 10px;} .new_box1 .box.tab .li.on strong {font-size:25px;} } /* 무좀이란? */ .new_box1 .foot_box .foot_ul {position:relative;display: flex;gap:78px;} .new_box1 .foot_box .foot_ul:before {content:"";position: absolute;left:50%;top:50%;display:block;width: 10px;height: 46px;background: #d0ecf2;transform: translate(-50%,-50%);} .new_box1 .foot_box .foot_ul:after {content:"";position: absolute;left:50%;top:50%;display:block;width: 46px;height: 10px;background: #d0ecf2;transform: translate(-50%,-50%);} .new_box1 .foot_box .foot_ul .foot_li {width: 50%;} .new_box1 .foot_box .foot_ul .foot_li .box_inner {padding:50px;border:10px solid #d0ecf2;} .new_box1 .foot_box .foot_ul .foot_li .box_inner .box_name {font-size:24px;font-weight: 600;color:#f66120;} .new_box1 .foot_box .foot_ul .foot_li .photo_ul {margin-top:15px;} .new_box1 .foot_box .foot_ul .foot_li .photo_ul .photo_li {margin-top:15px;font-size:17px;text-align: left;} .new_box1 .foot_box .foot_ul .foot_li .photo_ul .photo_li span {font-weight: 600;} .new_box1 .foot_box .foot_ul .foot_li .photo_ul .photo_li span.cr_red {color:#ff0000;} @media screen and (max-width:1000px){ .new_box1 .foot_box .foot_ul {flex-direction:column;gap:78px;} .new_box1 .foot_box .foot_ul .foot_li {width: 100%;} .new_box1 .foot_box .foot_ul .foot_li .box_inner {padding:35px;} } @media screen and (max-width:640px){ .new_box1 .foot_box .foot_ul .foot_li .box_inner {padding:35px 25px;} } /* 손발톱진균증 */ .new_box1 .foot_box2 {display:flex;background-color:#f6f6f6;padding:60px 0;} .new_box1 .foot_box2 > li {width:33.3%;padding:25px 50px;border-right: 1px solid #d2d2d2;} .new_box1 .foot_box2 > li:last-child {border-right: 0;} .new_box1 .foot_box2 > li .foot_subject {font-size:24px;color:#246eb9;} .new_box1 .foot_box2 > li .foot_subject span {display: block;margin-top:20px;font-weight: 600;} .new_box1 .foot_box2 > li .foot_text {} .new_box1 .foot_box2 > li .foot_text .photo_ul {margin-top:10px;} .new_box1 .foot_box2 > li .foot_text .photo_ul .photo_li {margin-top:5px;} @media screen and (max-width:1000px){ .new_box1 .foot_box2 {padding:40px 0;} .new_box1 .foot_box2 > li {width:33.3%;padding:15px 30px;} .new_box1 .foot_box2 > li .foot_text .photo_ul .photo_li {margin-top:3px;} } @media screen and (max-width:640px){ .new_box1 .foot_box2 {flex-direction:column;padding:0;} .new_box1 .foot_box2 > li {width:100%;padding:30px;border-right:0;border-bottom: 1px solid #d2d2d2;} } /* 손발톱진균증 사례 */ .new_box1 .thumbnail.type5 .thumbnail_image {height: auto;} .new_box1 .thumbnail.type5 .thumbnail_image img {width: 100%;} .new_box1 .thumbnail.type5 .thumbnail_text {display:flex;align-items:center;justify-content:center;padding:10px;height: auto;min-height: 120px;} .new_box1 .thumbnail.type5 .thumbnail_text:after {display: none;} .new_box1 .thumbnail.type5 .thumbnail_text p span {display: block;} /* 진균증 치료방법 */ .new_box1 .thumbnail.type2 .thumbnail_li {width: 33.3%;} .new_box1 .thumbnail.type2 .thumbnail_li:nth-child(4) {border-left:0;} .new_box1 .thumbnail.type2 .thumbnail_li:nth-child(n+4) {margin-top:40px;} .new_box1 .thumbnail.type2 .thumbnail_image {height: auto;} .new_box1 .thumbnail.type2 .thumbnail_image img {width: 100%;} .new_box1 .thumbnail.type2 .photo.type3 {padding:30px;} .new_box1 .thumbnail.type2 .photo.type3 .photo_ul {margin-top:0;} .new_box1 .thumbnail.type2 .photo.type3 .photo_li {margin-top:0;text-align: left;} @media screen and (max-width:1000px){ .new_box1 .thumbnail.type2 .thumbnail_li {width: 50%;} .new_box1 .thumbnail.type2 .thumbnail_li:nth-child(n+3) {margin-top:40px;} } @media screen and (max-width:640px){ .new_box1 .thumbnail.type2 .thumbnail_text {height: auto;} .new_box1 .thumbnail.type2 .thumbnail_text:after {display: none;} .new_box1 .thumbnail.type2 .thumbnail_li {width: 100%;margin-top:40px;} .new_box1 .thumbnail.type2 .thumbnail_li:first-child {margin-top:0;} } /* 진균증 레이저 */ .new_box1 .photo_box{margin-bottom:50px; background-color:#f9f9f9; clear:both} .new_box1 .photo_box .img{width:50%; float:left;display:block} .new_box1 .photo_box .img img{width:100%} .new_box1 .photo_box .txt{width:50%; float:left; padding:30px; background-color:#f9f9f9; display:block} .new_box1 .photo_box .txt h2{padding-top:20px; text-align:left; color:#169ebf; font-size:24px; line-height:28px; letter-spacing:-0.05em; font-weight:bold} .new_box1 .photo_box .txt h2 span{color:#222222;} .new_box1 .photo_box .txt .lead{padding-top:20px; color:#333; font-size:17px; line-height:28px; letter-spacing:-0.05em; word-break:keep-all} .new_box1 .photo_box .target{margin-top:13px; position:relative; padding-left:26px; color:#333; font-size:16px; line-height:22px; letter-spacing:-0.05em; font-weight:600; word-break:keep-all;} .new_box1 .photo_box .target:before{display:block; position:absolute; top:0; left:0; width:21px; height:21px; background:url('http://www.sungmoplusclinic.kr/theme/smp/img/photobox_icon1.png') no-repeat;} .new_box1 .photo_box:nth-child(even) .txt h2{color:#169ebf} @media screen and (max-width:960px){ .new_box1 .photo_box .img{width:100%; display:block;float: none;} .new_box1 .photo_box .txt{width:100%} .new_box1 .photo_box .txt h2{font-size:24px; padding-top:0; font-weight:bold} } @media screen and (max-width:640px){ .new_box1 .photo_box .txt .lead{font-size:15px; line-height:20px;} .new_box1 .photo_box .target{font-size:15px;} .new_box1 .photo_box .more{width:170px; margin-top:20px; padding-top:13px; padding-bottom:13px;} .new_box1 .photo_box .more span{font-size:15px;} } /* 02내성발톱 */ /* 내성발톱 */ .new_box2 .foot_box2 > li {width:50%;padding:25px 50px;} .new_box2 .foot_box2 > li .foot_text .photo_ul {display: flex;flex-wrap: wrap;} .new_box2 .foot_box2 > li .foot_text .photo_ul .photo_li {width: 50%;} @media screen and (max-width:1000px){ .new_box2 .foot_box2 > li {width:100%;padding:25px 30px;} .new_box2 .foot_box2 > li .foot_text .photo_ul .photo_li {width: 100%;} } /* 내성발톱 치료 방법 */ .new_box2 .photo_box .txt .lead_red {display:inline-block;line-height:1.2;color:#ff0000;box-shadow: inset 0 -12px 0 #ffe7e7;} .new_box2 .photo.type4{background:url('http://www.sungmoplusclinic.kr/theme/smp/img/new/img2_0102.jpg') no-repeat bottom right;} .new_box2 .photo.type4 .photo_ul{width:500px;} .new_box2 .photo.type4 .photo_content {padding-left:0;} @media screen and (max-width:800px){ .new_box2 .photo.type4{margin-top: 0;background:none;} .new_box2 .photo.type4 .photo_ul{width:100%;} } /* 발각질 */ .mt10 {margin-top:1rem;} .mt30 {margin-top:3rem;} .ml20 {margin-left:2rem;} html:has(.sub7_3) {font-size:10px;} .sub7_3 .txtCon {font-weight:300;font-size:1.7rem;} .sub7_3 .txtCon * {letter-spacing:-0.01em;} .sub7_3 .txtCon img {max-width:100%;} .sub7_3 *:not(.h4,.photo_li,.list_ul):before, .sub7_3 *:not(.h4,.photo_li,.list_ul):after {content:none;} .sub7_3 em {font-style:normal;} .sub7_3 .txtCon .point {color:#ff0000;font-size:1.8rem;} .sub7_3 .txtCon .ri-error-warning-fill:before {display:inline-block;content:"\eca0";} .sub7_3 .txtCon .list_etc > li:not(:last-child) {margin-bottom:.5rem;} .sub7_3 .txtCon .list_etc > li:before {display:inline-block;content:"※";margin-right:.5rem;} .sub7_3 .txtCon .infolist {display:grid;grid-template-columns:1fr 1fr;grid-gap:2.5rem 5rem;margin-top:2rem;} .sub7_3 .txtCon .infolist > li {background:#eee;padding:3rem;display:flex;gap:1rem;} .sub7_3 .txtCon .infolist > li em {font-weight:600;font-size:2.2rem;line-height:1.3;} .sub7_3 .txtCon .infolist > li .item {margin-top:1rem;line-height:1.4;word-break:keep-all;} .sub7_3 .txtCon .ri-chat-check-fill:before {display:inline-block;content:"\eb54";font-size:3rem;color:#246eb9;} .sub7_3 .txtCon .photo_box {margin-top:2rem;} .sub7_3 .txtCon .photo_box li {display:flex;justify-content:space-between;} .sub7_3 .txtCon .photo_box li:not(:last-child) {margin-bottom:5rem;} .sub7_3 .txtCon .photo_box li:nth-child(even) {flex-direction:row-reverse;} .sub7_3 .txtCon .photo_box li > div {flex:1 1 0;} .sub7_3 .txtCon .photo_box li .photo_txt {padding:5rem 3rem;} .sub7_3 .txtCon .photo_box li .photo_txt .photo_tit {color:#246eb9;font-size:2.4rem;padding-bottom:1rem;} .sub7_3 .txtCon .photo_box li .photo_txt .target{margin-top:1.5rem;position:relative;padding-left:26px;font-size:1.7rem;line-height:1.6;word-break:keep-all;} .sub7_3 .txtCon .photo_box li .photo_txt .target:before{display:block;content:""; position:absolute; top:.2rem; left:0; width:21px; height:21px; background:url('../img/photobox_icon1.png') no-repeat;} .sub7_3 .txtCon .photo_box li .photo_txt .target b {font-weight:600;} .sub7_3 .txtCon .photo_ul {margin-top:0;} .sub7_3 .txtCon .photo_content {display:flex;justify-content:space-between;align-items:center;min-height:auto;padding-top:0;margin-top:2rem;} .sub7_3 .txtCon .box.image .box_li {width:50%;height:auto;} .sub7_3 .txtCon .box.image .box_text {margin-top:1.5rem;} .sub7_3 .txtCon .box.image .box_inner {padding:5rem 2rem;} .sub7_3 .txtCon .list_ul .list_li {width:20%;} .sub7_3 .txtCon .list_ul .list_li .list_name span {display:block;font-weight:400;font-size:1.6rem;line-height:1.3;} @media only screen and (max-width:1023px){ html:has(.sub7_3) {font-size:9.5px;} .sub7_3 .txtCon .infolist {grid-gap:2.5rem;} .sub7_3 .txtCon .photo_box li .photo_txt {padding:3rem;} .sub7_3 .txtCon .photo_content {flex-direction:column-reverse;gap:1rem;} .sub7_3 .txtCon .box.image .box_li {width:100%;} .sub7_3 .txtCon .list_ul .list_li {width:33.333%;} .sub7_3 .txtCon .list .list_inner {padding:5rem 0 3rem;} } @media only screen and (max-width:767px){ html:has(.sub7_3) {font-size:9px;} .sub7_3 .txtCon .infolist {grid-template-columns:1fr;grid-gap:2rem;} .sub7_3 .txtCon .photo_box li {flex-direction:column-reverse !important;} .sub7_3 .txtCon .photo_box li:not(:last-child) {margin-bottom:2rem;} .sub7_3 .txtCon .photo_box li .photo_txt {padding:2rem 1rem;} .sub7_3 .txtCon .box.image .box_inner {padding:3rem 1rem;} .sub7_3 .txtCon .list_ul .list_li {width:100%;} .sub7_3 .txtCon .list_ul .list_li .list_name {height:auto;} }