/* 서브 공통 박스1*/ .sub_com_box01 .sub_com_top {display:flex; flex-wrap:wrap; align-items:center; position:relative; z-index:2;} .sub_com_box01 .sub_com_top .img_box {width:50%; max-width:960px; height:500px; background-image:url("/thema/Basic/img/sub_top_img01.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover;} .sub_com_box01 .sub_com_top .txt_box { width:50%; background-color:#2d3b4d; color:#fff; height:400px; padding:100px 40px 100px 100px; margin:50px 0; background-image:url("/thema/Basic/img/sub_tit_bg.png"); background-repeat:no-repeat; background-position:right 40px bottom 40px; } .sub_com_box01 .sub_com_top .txt_box h3.sub_tit {font-size:38px; line-height:120%; margin-bottom:25px;} .sub_com_box01 .sub_com_top .txt_box p {font-size:18px; line-height:180%;} .sub_com_box01 .sub_content .sub_tit_box01 {margin-bottom:20px;} .sub_com_box01 .sub_content .sub_tit_box01 h4 {font-size:26px; line-height:120%; color:#2e4d74; font-weight:700;} .sub_com_box01 .sub_content .sub_cont_box01 {background-color:#fff; border-radius:15px; padding:35px 40px; box-shadow:10px 7px 18px rgba(0,0,0,0.07);} .sub_com_box01 .sub_content .sub_cont_box01 p {font-size:18px; line-height:160%;} /* 서브 공통 박스2*/ .sub_com_box_02 .sub_tit_box02 {text-align:center;} .sub_com_box_02 .sub_tit_box02 small {display:block; font-size:17px; line-height:130%; color:#002a90; font-weight:700; margin-bottom:10px;} .sub_com_box_02 .sub_tit_box02 h5 {font-size:32px; line-height:130%;} .sub_com_box_02 .sub_img_box {background-image:url("/thema/Basic/img/sub_img01.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; padding-top:23%;} /* 공통 스타일 */ .bg_wrap {background-color:#f5f5f5; padding:100px 0; position:relative;} .bg_wrap:before {content:''; position:absolute; top:-100px; left:0; background-color:#f5f5f5; width:100%; height:100px; z-index:1;} .bg_wrap:after {content:''; width:314px; height:345px; position:absolute; bottom:0; right:145px;background-image:url("/thema/Basic/img/sub_cont_bg.png"); background-repeat:no-repeat;} .bg_wrap2 {background-color:#2d3b4d; padding:90px 0;} /* .bg_wrap2 .sub_com_box_02 .sub_tit_box02 small {color:#267777;} */ .bg_wrap2 .sub_com_box_02 .sub_tit_box02 small {color:#c9fcff;} .bg_wrap2 .sub_com_box_02 .sub_tit_box02 h5 {color:#fff;} /* 서브 공통 리스트 */ .sub_list01 li {font-size:18px; line-height:160%; position:relative; padding-left:100px; margin-bottom:15px;} .sub_list01 li:last-child {margin-bottom:0;} .sub_list01 li b {position:absolute; top:0; left:0;} .sub_list02 {counter-reset:sub_list02;} .sub_list02 li {display:flex; flex-wrap:wrap; align-items:center; margin-bottom:20px;} .sub_list02 li:last-child {margin-bottom:0;} .sub_list02 li:before { content:"0"counter(sub_list02); counter-increment:sub_list02; display:inline-block; font-size:24px; width:94px; height:94px; line-height:94px; border-radius:15px; background-color:#003866; color:#fff; text-align:center; font-family: 'Montserrat'; font-weight:600; } .sub_list02 li .txt_box {width:calc(100% - 104px); margin-left:10px; border:1px solid #ddd; border-radius:15px; padding:34px 30px; font-size:18px; line-height:130%; position:relative; padding-left:170px;} .sub_list02 li .txt_box b {position:absolute; top:50%; left:30px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);} .sub_list02 li .txt_box p {display:inline-block;} .sub_list03 {counter-reset:sub_list03;} .sub_list03 li {font-size:18px; line-height:150%; background-color:#fff; border-radius:15px; padding:30px 40px; box-shadow:10px 7px 18px rgba(0,0,0,0.07); margin-bottom:20px; position:relative; padding-left:80px;} .sub_list03 li:last-child {margin-bottom:0;} .sub_list03 li:before { content:"0"counter(sub_list03); counter-increment:sub_list03; display:inline-block; font-family: 'Montserrat'; font-size:18px; line-height:130%; color:#2d3b4d; font-weight:700; position:absolute; top:34px; left:40px; } .sub_list04 {counter-reset:sub_list04; display:flex; flex-wrap:wrap;} .sub_list04 li {width:calc(33.333% - 10px); margin-right:15px; margin-top:15px; font-size:18px; line-height:130%; text-align:center; word-break:keep-all; border:1px solid #00b1bb; border-radius:15px; padding:30px 15px;} .sub_list04 li:nth-child(3n+3) {margin-right:0;} .sub_list04 li:nth-child(-n+3) {margin-top:0;} .sub_list04 li:nth-child(even) {background-color:#eef8f8;} .sub_list04 li strong:before {content:"0"counter(sub_list04); counter-increment:sub_list04; display:inline-block; font-family: 'Montserrat'; font-size:18px; line-height:130%; font-weight:600; margin-right:10px;} .sub_img_list01 {display:flex; flex-wrap:wrap;} .sub_img_list01 li {width:calc(50% - 15px); position:relative;} .sub_img_list01 li:first-child {margin-right:30px;} .sub_img_list01 li .img_box img {width:100%;} .sub_img_list01 li .txt_box {font-size:18px; background-color:#fff; border-radius:0 15px 0 0; width:45%; height:60px; line-height:60px; text-align:center; position:absolute; bottom:0; left:0;} .sub_img_list02 {display:flex; flex-wrap:wrap;} .sub_img_list02.item4 li {width:calc(25% - 30px); margin-right:40px;} .sub_img_list02.item4 li:last-child {margin-right:0;} .sub_img_list02.item5 li {width:calc(20% - 20px); margin-right:25px;} .sub_img_list02.item5 li:last-child {margin-right:0;} .sub_img_list02 li .img_box {border-radius:50%; margin-bottom:30px; background-repeat:no-repeat; background-position:center; background-size:cover; padding-top:100%;} .sub_img_list02 li strong {display:block; font-size:18px; line-height:160%; text-align:center; color:#fff; font-weight:500;} /* 공통 버튼 */ a.com_btn {display:block; font-size:18px; width:260px; height:65px; line-height:65px; text-align:center; background-color:#333; color:#fff; margin:60px auto 0; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;} a.com_btn:hover, a.com_btn:focus {color:#fff;/* background:linear-gradient(to left, #366bb3, #00b1bb); */ background-color:#002a90;} @media all and (max-width:1500px){ /* 서브 공통 박스1*/ .sub_com_box01 .sub_com_top .img_box {height:450px;} .sub_com_box01 .sub_com_top .txt_box {padding:100px 30px; height:360px; background-size:25%; margin:31px 0;} .sub_com_box01 .sub_com_top .txt_box h3.sub_tit {font-size:34px;} .sub_com_box01 .sub_com_top .txt_box p {font-size:17px;} /* 공동 스타일 */ .bg_wrap:after {background-size:80%; right:-60px; bottom:-70px;} } @media all and (max-width:1200px){ /* 서브 공통 박스1*/ .sub_com_box01 .sub_com_top .txt_box p br {display:none;} /* 공동 스타일 */ .bg_wrap:after {display:none;} } @media all and (max-width:1024px){ /* 서브 공통 박스1*/ .sub_com_box01 .sub_com_top .img_box {height:350px;} .sub_com_box01 .sub_com_top .txt_box {padding:60px 30px; height:290px; margin:17px 0;} .sub_com_box01 .sub_com_top .txt_box h3.sub_tit {font-size:26px; margin-bottom:20px;} .sub_com_box01 .sub_com_top .txt_box p {font-size:16px;} .sub_com_box01 .sub_content .sub_tit_box01 {margin-bottom:15px;} .sub_com_box01 .sub_content .sub_tit_box01 h4 {font-size:22px;} .sub_com_box01 .sub_content .sub_cont_box01 {padding:30px;} .sub_com_box01 .sub_content .sub_cont_box01 p {font-size:16px;} /* 서브 공통 박스2*/ .sub_com_box_02 .sub_tit_box02 small {font-size:15px; margin-bottom:5px;} .sub_com_box_02 .sub_tit_box02 h5 {font-size:28px;} /* 공통 스타일 */ .bg_wrap {padding:70px 0;} .bg_wrap2 {padding:60px 0;} /* 공통 리스트 */ .sub_list01 li {font-size:16px; padding-left:90px;} .sub_list02 li {margin-bottom:15px;} .sub_list02 li:before {width:80px; height:80px; line-height:80px; font-size:20px;} .sub_list02 li .txt_box {width:calc(100% - 90px); padding:27px 20px 27px 145px; font-size:16px;} .sub_list02 li .txt_box b {left:27px;} .sub_list03 li {padding:25px; font-size:16px; padding-left:60px; margin-bottom:15px;} .sub_list03 li:before {top:27px; left:25px; font-size:16px;} .sub_list04 li {width:calc(33.333% - 7px); font-size:16px; padding:20px; margin-top:10px; margin-right:10px;} .sub_list04 li strong:before {font-size:16px;} .sub_img_list01 li {width:calc(50% - 10px);} .sub_img_list01 li:first-child {margin-right:20px;} .sub_img_list01 li .txt_box {font-size:16px; height:50px; line-height:50px;} .sub_img_list02 li .img_box {margin-bottom:20px;} .sub_img_list02 li strong {font-size:16px;} /* 공통 버튼 */ a.com_btn {font-size:16px; width:210px; height:55px; line-height:55px; margin:40px auto 0;} } @media all and (max-width:768px){ /* 서브 공통 박스1*/ .sub_com_box01 .sub_com_top .img_box {width:100%; height:200px;} .sub_com_box01 .sub_com_top .txt_box {width:100%; height:100%; margin:0; padding:30px 20px; background-size:15%; background-position:center right 20px;} .sub_com_box01 .sub_com_top .txt_box h3.sub_tit {font-size:22px;} .sub_com_box01 .sub_com_top .txt_box p {font-size:14px;} .sub_com_box01 .sub_content .sub_tit_box01 h4 {font-size:18px;} .sub_com_box01 .sub_content .sub_cont_box01 {padding:15px 20px; border-radius:13px;} .sub_com_box01 .sub_content .sub_cont_box01 p {font-size:14px;} /* 서브 공통 박스2*/ .sub_com_box_02 .sub_tit_box02 small {font-size:13px; margin-bottom:2px;} .sub_com_box_02 .sub_tit_box02 h5 {font-size:22px;} /* 공통 스타일 */ .bg_wrap {padding:40px 0;} .bg_wrap2 {padding:40px 0;} /* 공통 리스트 */ .sub_list01 li {font-size:14px; padding-left:75px;} .sub_list02 li:before {width:60px; height:60px; line-height:60px; font-size:14px;} .sub_list02 li .txt_box {width:calc(100% - 65px); margin-left:5px; font-size:14px; padding:20px 20px 20px 115px;} .sub_list02 li .txt_box b {left:15px;} .sub_list03 li {font-size:14px; padding:20px; margin-bottom:10px; padding-left:50px;} .sub_list03 li:before {top:22px; left:20px; font-size:14px;} .sub_list04 li {width:calc(50% - 4px); font-size:14px; padding:12px; margin-right:7px;} .sub_list04 li:nth-child(3n+3) {margin-right:7px;} .sub_list04 li:nth-child(2n+2) {margin-right:0;} .sub_list04 li:nth-child(-n+2) {margin-top:0;} .sub_list04 li:nth-child(3) {margin-top:10px;} .sub_list04 li strong:before {font-size:14px;} .sub_img_list01 li {width:100%; margin-bottom:20px;} .sub_img_list01 li:first-child {margin-right:0;} .sub_img_list01 li:last-child {margin-bottom:0;} .sub_img_list01 li .txt_box {font-size:14px; height:45px; line-height:45px;} .sub_img_list02.item4 li, .sub_img_list02.item5 li {width:calc(33.333% - 20px); margin-right:20px; margin-bottom:20px;} .sub_img_list02.item5 li:last-child {margin-bottom:0;} .sub_img_list02 li strong {font-size:15px;} /* 공통 버튼 */ a.com_btn {width:180px; height:50px; line-height:50px; font-size:15px; margin:30px auto 0;} } @media all and (max-width:600px){ /* 공통 리스트*/ .sub_list02 li:before {width:40px; height:40px; line-height:40px; font-size:12px;} .sub_list02 li .txt_box {width:calc(100% - 45px); padding:15px;} .sub_list02 li .txt_box b {position:static; display:block; transform:none; margin-bottom:5px;} } @media all and (max-width:480px){ /* 서브 공통 박스1*/ .sub_com_box01 .sub_com_top .img_box {display:none;} .sub_com_box01 .sub_com_top .txt_box {background-image:none !important;} /* 공통 리스트*/ .sub_list01 li {padding-left:0;} .sub_list01 li b {position:static; display:block; margin-bottom:5px;} .sub_img_list01 li .txt_box {font-size:12px;} .sub_img_list02.item4 li, .sub_img_list02.item5 li {width:calc(50% - 10px);} .sub_img_list02.item4 li:nth-child(even), .sub_img_list02.item5 li:nth-child(even) {margin-right:0;} } /* 공통 END ************************************************************* ************************************************************************************************************************/ /* 건물위생 관리사업 */ #building .sub_com_box01 .sub_com_top .txt_box {background-color:#2d3b4d;} #building .sub_com_box_02 .sub_img_box {background-image:url("/thema/Basic/img/sub_img02.jpg");} #building #building_tab_01 .bg_wrap:after {width:328px; height:345px; background-image:url("/thema/Basic/img/sub_cont_bg4.png");} #building #building_tab_02 .bg_wrap:after {width:340px; height:331px; background-image:url("/thema/Basic/img/sub_cont_bg5.png");} #building #building_tab_03 .bg_wrap:after {width:325px; height:343px; background-image:url("/thema/Basic/img/sub_cont_bg6.png");} #building #building_tab_04 .bg_wrap:after {width:303px; height:357px; background-image:url("/thema/Basic/img/sub_cont_bg7.png");} /* 홈케어 서비스 */ #home_care .sub_com_box01 .sub_com_top .txt_box {background-color:#2d3b4d;} #home_care #home_tab_01 .bg_wrap:after {width:320px; height:315px; background-image:url("/thema/Basic/img/sub_cont_bg8.png");} #home_care #home_tab_02 .bg_wrap:after {width:376px; height:316px; background-image:url("/thema/Basic/img/sub_cont_bg9.png");} #home_care #home_tab_03 .bg_wrap:after {width:246px; height:315px; background-image:url("/thema/Basic/img/sub_cont_bg10.png");} /* 이미지 받으면 home_care.php 파일에 인라인 스타일로 배경이미지 작성 후 아래 내용 제거*/ #home_care #home_tab_02 .sub_img_list01 li .img_box, #home_care #home_tab_03 .sub_img_list01 li .img_box {background-color:#777; height:300px;} #home_care #home_tab_02 .sub_img_list02 li, #home_care #home_tab_03 .sub_img_list02 li {position:relative; } #home_care #home_tab_02 .sub_img_list02 li .img_box, #home_care #home_tab_03 .sub_img_list02 li .img_box {background-color:#fff; margin-bottom:0;} #home_care #home_tab_02 .sub_img_list02 li strong, #home_care #home_tab_03 .sub_img_list02 li strong {color:#333; width:100%; padding:0 15px;position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%);} /* 미래ZONE 방역서비스 */ #mirae #tab_02 .bg_wrap:after {width:324px; height:344px; background-image:url("/thema/Basic/img/sub_cont_bg2.png");} #mirae #tab_03 .bg_wrap:after {width:291px; height:346px; background-image:url("/thema/Basic/img/sub_cont_bg3.png");} /*오시는길*/ #location_con .root_daum_roughmap{ height:550px; width:100%; } #location_con .root_daum_roughmap .wrap_map{ height:100%;} #location_con .root_daum_roughmap .map_border{ display:none; } #location_con .at-container{ display:flex; flex-wrap:wrap; position:relative; z-index:1; margin-top:-40px; } #location_con .at-container > div{ border:1px solid #ddd; background:#fff; padding:40px 0; } #location_con .at-container .logo_box{ width:200px; margin-right:30px; text-align:center; } #location_con .at-container .content_box{ display:flex; flex-wrap:wrap; align-items:center; width:calc(100% - 230px); padding:40px 60px; background:#fff url('/thema/Basic/img/location_bak.png') no-repeat right bottom / auto 75%; } #location_con .at-container .content_box div{ width:100%;} #location_con .at-container .content_box ul{ display:flex; flex-wrap:wrap;} #location_con .at-container .content_box ul li{ width:50%; padding:10px 0 10px 85px; background-position:left top 5px; background-repeat:no-repeat; font-size:18px; line-height:1.4; } #location_con .at-container .content_box ul li.addr{ background-image:url('/thema/Basic/img/location_ico01.png'); padding-right:15px; } #location_con .at-container .content_box ul li.tel{ background-image:url('/thema/Basic/img/location_ico02.png');} #location_con .at-container .content_box ul li b{ display:block; color:#002a90; margin-bottom:5px; } @media all and (max-width:1500px){ /* 홈케어 서비스 */ #home_care .sub_com_box01 .sub_com_top .txt_box {background-size:35%;} #home_care #home_tab_02 .sub_com_box01 .sub_com_top .txt_box {background-size:20%;} #home_care #home_tab_03 .sub_com_box01 .sub_com_top .txt_box {background-size:20%;} } @media all and (max-width:1024px){ /*오시는길*/ #location_con .root_daum_roughmap{ height:400px; } #location_con .at-container > div{ padding:20px 0; } #location_con .at-container .logo_box{ width:100%; margin-right:0px; margin-bottom:15px; } #location_con .at-container .logo_box img{width:120px; } #location_con .at-container .content_box{ width:100%; padding:20px; } #location_con .at-container .content_box ul li{ width:100%; font-size:16px; word-break:keep-all; } /* 이미지 받으면 home_care.php 파일에 인라인 스타일로 배경이미지 작성 후 아래 내용 제거*/ #home_care #home_tab_02 .sub_img_list01 li .img_box, #home_care #home_tab_03 .sub_img_list01 li .img_box {height:220px;} } @media all and (max-width:768px){ /*오시는길*/ #location_con .root_daum_roughmap{ height:300px; } #location_con .at-container .logo_box img{width:100px; } #location_con .at-container .content_box ul li{ font-size:14px; background-size:55px; padding-left:65px; } #location_con .at-container .content_box ul li b{ font-size:16px; } /* 홈케어 서비스 */ #home_care #home_tab_02 .sub_com_box01 .sub_com_top .txt_box {background-size:10%;} #home_care #home_tab_03 .sub_com_box01 .sub_com_top .txt_box {background-size:10%;} /* 이미지 받으면 home_care.php 파일에 인라인 스타일로 배경이미지 작성 후 아래 내용 제거*/ #home_care #home_tab_02 .sub_img_list01 li .img_box, #home_care #home_tab_03 .sub_img_list01 li .img_box {height:200px;} #home_care #home_tab_02 .sub_img_list02 li strong, #home_care #home_tab_03 .sub_img_list02 li strong {font-size:14px;} } @media all and (max-width:480px){ /* 이미지 받으면 home_care.php 파일에 인라인 스타일로 배경이미지 작성 후 아래 내용 제거*/ #home_care #home_tab_02 .sub_img_list01 li .img_box, #home_care #home_tab_03 .sub_img_list01 li .img_box {height:150px;} } /* 추가 : 지도 포커스 */ #location_con #daumRoughmapContainer1665401341788 button:focus:not(:focus-visible) {outline:0;} #location_con #daumRoughmapContainer1665401341788 button:focus {outline:2px solid red; outline-offset:-3px;} #location_con #daumRoughmapContainer1665401341788 a:focus {outline-offset:2px;}