/* ##Device = Desktops ##Screen = 1281px to higher resulution desktops ##Device = 데스크탑 ##Screen = 1281px 이상 해상도 데스크탑 */ #visual {background:#5172df;position: relative;height:460px;} #visual .wrap {position: relative; z-index:11;} #visual .sch {padding:30px 0 20px; position: relative;} #visual .sch:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #visual .sch > h2, #visual .sch .schArea { float: left; } #visual .sch .favorite { float: right; } #visual .sch > h2 {width:270px;} #visual .sch .schArea {width:calc(100% - 550px); text-align: center; padding-right: 20px;} #visual .sch .schArea .schbar {position: relative; width:100%;max-width:400px; height:45px; margin: 0 auto;} #visual .sch .schArea .schbar a {display: block; height: 30px; width:30px; position:absolute;top: 8px; right: 10px; padding: 5px 5px;} #visual .sch .schArea .schbar input {padding: 0px 42px 0 12px; background:#fff; border:3px solid #08498d;line-height:1rem; height: 45px;} #visual .sch .favorite {position:relative;width: 280px;height:45px;text-align:center;padding:12px 0 0 87px;background: #08498d; color: #fff;} #visual .sch .favorite h2 {position: absolute; top: 0; left: 0;background: #063465; display: inline-block; padding: 10px 16px; height: 45px; vertical-align: middle;} #visual .sch .favorite a {padding: 0 5px 0 12px; white-space: nowrap; font-size: 1rem; color:#fff; vertical-align: middle;} #visual .sch .favorite a.all {display:none;} #visual .sch .favorite a span {color:#f4d610; padding-left: 10px;} #visual .sch .favorite b {color:#5172df;} #subBar {border: 3px solid #09498d; border-top: none;} .ui-autocomplete {border: 3px solid #09498d; border-top: none;} #visual .local {height:350px;-webkit-box-shadow:0px 8px 8px -2px rgba(0,0,0,0.15);box-shadow:0px 8px 8px -2px rgba(0,0,0,0.15);} #visual .local:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #visual .local .localSelect, #visual .local .status {float:left; height:100%;} #visual .local .localSelect {min-height:50px;background:#1a3aa6; width:390px; color:#fff; padding: 35px 20px 35px 35px; position: relative;} #visual .local .localSelect h3 {position: absolute; top: 35px; left: 35px;} #visual .local .localSelect p {line-height: 1.4rem; font-size: 1rem; position: absolute; top: 140px; left: 35px;} #visual .local .localSelect .map {position: relative; float: right; /* width: 190px; height: 270px;*/ width:200px; height:280px; margin-right: -10px; } #visual .local .localSelect .map svg {width: 100%; height: 100%;} #visual .local .localSelect .map a {position: absolute; opacity:1; color: #fff; display: block; width:30px; height:20px; line-height:20px; white-space: nowrap; text-align: center; border-radius: 40px; font-size: 1rem;} /*23.06.21 웹 접근성 수정*/ #visual .local .localSelect .map a.on {background: #e9525a; opacity:1; width:40px; height:40px; line-height:40px;} #visual .local .localSelect .map a:hover, #visual .local .localSelect .map a:focus {/*background: #e9525a;*/ opacity:1;} /* 구버전 위치 */ /* #visual .local .localSelect .map a.seoul {top: 18%; left: 27%;} */ /* 서울 */ /* #visual .local .localSelect .map a.gyeonggi {top: 28%; left: 30%;} */ /* 경기 */ /* #visual .local .localSelect .map a.incheon {top: 24%; left: 3%;} */ /* 인천 */ /* #visual .local .localSelect .map a.gangwon {top: 18%; left: 54%;} */ /* 강원 */ /* #visual .local .localSelect .map a.chungbuk {top: 34%; left: 47%;} */ /* 충북 */ /* #visual .local .localSelect .map a.chungnam {top: 43%; left: 16%;} */ /* 충남 */ /* #visual .local .localSelect .map a.sejong {top: 39%; left: 32%;} */ /* 세종 */ /* #visual .local .localSelect .map a.daejeon {top: 50%; left: 39%;} */ /* 대전 */ /* #visual .local .localSelect .map a.gyeongbuk {top: 44%; left: 66%;} */ /* 경북 */ /* #visual .local .localSelect .map a.gyeongnam {top: 71%; left: 50%;} */ /* 경남 */ /* #visual .local .localSelect .map a.ulsan {top:67%; left: 82%;} */ /* 울산 */ /* #visual .local .localSelect .map a.busan {top: 74%; left: 72%;} */ /* 부산 */ /* #visual .local .localSelect .map a.daegu {top: 60%; left: 59%;} */ /* 대구 */ /* #visual .local .localSelect .map a.jeonbuk {top: 63%; left: 25%;} */ /* 전북 */ /* #visual .local .localSelect .map a.jeonnam {top: 83%; left: 17%;} */ /* 전남 */ /* #visual .local .localSelect .map a.gwangju {top: 75%; left: 15%;} */ /* 광주 */ /* #visual .local .localSelect .map a.jeju {top: 89%; left: 72%;} */ /* 제주 */ /* 울릉도,독도 추가 및 제주도 위치 수정 */ #visual .local .localSelect .map a.seoul {top: 18%; left: 18%;} /* 서울 */ #visual .local .localSelect .map a.gyeonggi {top: 26%; left: 25%;} /* 경기 */ #visual .local .localSelect .map a.incheon {top: 21%; left: 2%;} /* 인천 */ #visual .local .localSelect .map a.gangwon {top: 15%; left: 47%;} /* 강원 */ #visual .local .localSelect .map a.chungbuk {top: 32%; left: 38%;} /* 충북 */ #visual .local .localSelect .map a.chungnam {top: 41%; left: 10%;} /* 충남 */ #visual .local .localSelect .map a.sejong {top: 39%; left: 25%;} /* 세종 */ #visual .local .localSelect .map a.daejeon {top: 46%; left: 28%;} /* 대전 */ #visual .local .localSelect .map a.gyeongbuk {top: 40%; left: 60%;} /* 경북 */ #visual .local .localSelect .map a.gyeongnam {top: 65%; left: 44%;} /* 경남 */ #visual .local .localSelect .map a.ulsan {top:60%; left: 72%;} /* 울산 */ #visual .local .localSelect .map a.busan {top: 67%; left: 64%;} /* 부산 */ #visual .local .localSelect .map a.daegu {top: 54%; left: 53%;} /* 대구 */ #visual .local .localSelect .map a.jeonbuk {top: 57%; left: 20%;} /* 전북 */ /* #visual .local .localSelect .map a.jeonnam {top: 76%; left: 12%;} 전남 */ #visual .local .localSelect .map a.jeonnamgwangju {top: 72%; left: 10%;} /* 전남광주 */ #visual .local .localSelect .map a.jeju {top: 92%; left: 19%;} /* 제주 */ #visual .local .localSelect .map a.on {background: #e9525a; opacity: 1 !important; width: 40px; height: 40px; line-height: 40px; margin-top: -10px; margin-left: -5px;} #visual .local .localSelect a.location {width:108px;height:42px;padding:12px 20px;position: absolute; left: 35px; bottom: 35px; color: #fff; border: 1px solid #5f75c1;} #visual .local .localSelect a.location:hover {border-color:#fff;} #visual .local .localSelect a.location img {vertical-align:middle;margin-right:6px;} /* #visual .local .localSelect .img { position: absolute; bottom: 0; left: 0; margin-left: 10px; margin-bottom: -30px; } */ #visual .local .status {background:#fff; width:calc(100% - 390px);} #visual .status .tab, #visual .status .content {float:left;height: 100%;} #visual .status .tab {width:130px; padding: 30px 0; background:url(../images/bg-state.png) 6px 235px no-repeat; background-color:#edf1fe;} #visual .status .tab li {border-top:1px solid #d5dceb;border-bottom:1px solid #d5dceb;} #visual .status .tab li:hover {background: #dce4fd;} #visual .status .tab li a {display:block;height:45px; padding:0 20px; line-height:45px; color:#222; } #visual .status .tab .active {background:#5172df; border-color:#5172df;} #visual .status .tab li.active:hover {background: #5172df;} #visual .status .tab .active a {color:#fff;} #visual .status .content {width:calc(100% - 130px); /*overflow:hidden;*/} #visual .status .content .statusType {display:none; height:100%;} #visual .status .content .statusType:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #visual .status .content .statusType.active {display:block;} #visual .status .content h3 {line-height:1.3rem; height:50px; font-size:1rem; color:#666; border-bottom:1px solid #dae0f3; padding: 17px 15px; letter-spacing: -0.05rem;} #visual .status .content h3 b {font-size:1.3rem; font-weight:500; color:#5172df;} /* #visual .status .content h3 {font-size: 1.3rem; font-weight: 500; letter-spacing: -0.04rem; color: #5172df;} #visual .status .content h3 b {color:#000;} */ #visual .status .content p {white-space:nowrap;color: #666; font-size:1rem; font-weight: 200; margin-top: 8px; margin-bottom: 24px; letter-spacing: -0.04rem;} #visual .status .content .selectArea {margin-bottom:10px;height:34px;} #visual .status .content .selectBox {width:50%;background:#fff;float:left;margin:0;} #visual .status .content .selectBox + .selectBox {margin-left:-1px;} #visual .status .content .selectBox .select a {line-height:32px;height:34px;padding: 0 20px 0 12px;} #visual .status .content .selectBox .select:after {top:15px;} #visual .status .content .selectBox .options {max-height:300px;overflow:auto;} #visual .status .content .cont1, #visual .status .content .cont2 {float:left; width:50%; height:calc(100% - 50px); position:relative;} #visual .status .content .cont1 {border-right: 1px dotted #edf1fe; padding:30px 35px 0 30px;} #visual .status .content .cont1 span.arrow {position:absolute; top:50%; right:0; width:25px; height:25px; margin-top:-12px; margin-right:-12px; background:#edf1fe; border-radius:50%; color:#5172df;} #visual .status .content .cont1 span.arrow:after { content: ''; position: absolute; top: 0; left: -3px; right: 0; bottom: 0; margin: auto; width: 6px; height: 6px; border: 1px solid; border-color: #5172df #5172df transparent transparent; transform: rotate(45deg);} #visual .status .content .cont2 { padding: 80px 30px 0 35px; background: url(../../images/main-dash-img.png) no-repeat right 30px top 20px; background-size: 180px; } #visual .status .content .graph { width: 180px; height: 140px; margin: 18px auto 0; } #visual .status .content .graph .title {width: 100%; text-align: center; padding-top: 40px; line-height: 2em !important;} #visual .status .content .graph .title i {font-size: 1.6rem; color: #000;} #visual .status .content .graph .title p {line-height: 1; margin: 0;} /* #visual .status .content .graph .bar { width: 100%; height: 10px; background: #edf1fe; overflow: hidden;} #visual .status .content .graph .bar .estType1, #visual .status .content .graph .bar .estType2 { display:block; height: 10px; float:left;} #visual .status .content .graph .bar .estType1 {background: #5172df; border-right: 1px solid #fff;} #visual .status .content .graph .bar .estType2 {background: #e9525a;} #visual .status .content .graph > span.selected {color:#5172df;font-weight: 500;} #visual .status .content .graph > span.organType {color:#272727;font-weight: 500;} */ /* #visual .status .content .graph > p {margin: 10px 0;} #visual .status .content .graph i {color: #2b2b2b; font-size: 2rem; font-weight: 500;margin-right:3px;} #visual .status .content .graph i span {vertical-align: text-top;} */ #visual .status .content .cont1 .legend {margin-top:-10px;} #visual .status .content .cont2 .legend {display: none; margin-top:10px; } #visual .status .content .legend.active {display: block;} #visual .status .content .legend ul li { padding:10px 0; } #visual .status .content .cont2 .legend ul li { padding:8px 0; } #visual .status .content .legend ul li:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #visual .status .content .legend ul li a { display: block; font-size: 1rem; color: #2b2b2b; text-align: right; float: right; } #visual .status .content .legend ul li a span { display: block; font-weight:500; } #visual .status .content .legend ul li a span b { color: #666; font-weight:400; font-size: 0.9rem; padding-left: 3px; } #visual .status .content .legend ul li a span b img { margin-left: 10px; border: 1px solid #d1d9f1; padding: 3px 4px; vertical-align: bottom; } #visual .status .cont1 .legend ul li { padding-left: 14px; position: relative; } #visual .status .cont1 .legend ul li:after { content: "";display: block;height: 9px;width:9px;position:absolute;top:12px;left:0; visibility: visible;} #visual .status .cont1 .legend ul li.lg1:after {background:#5172df;} #visual .status .cont1 .legend ul li.lg2:after {background:#e9525a;} #visual .status .content .radio .custom-radio {width:50%;} .visual-bg {position:absolute; left:0; top:0; height:490px; width:100%; overflow:hidden;} #visual-bg1 {z-index:2;background:url(../images/visual-bg1.png) center 360px no-repeat;} #visual-bg2 {z-index:1;} .visual-bg ul { width: 1100px; margin: 0 auto; } .visual-bg ul li {position: absolute;} .visual-bg .img2 { bottom: 40px; margin-left: -130px; } .visual-bg .img2 img { width: 180px; } .visual-bg .img3 { right: 50%; bottom: 70px; margin-right: -650px } .visual-bg .img3 img { width: 120px; } .visual-bg .img4 { bottom: 65px; margin-left: -90px; } .visual-bg .img4 img { width: 110px; } .visual-bg .img5 { margin-left: -160px; bottom: 45px; } .visual-bg .img5 img { width: 60px; } .visual-bg .img6 { left: 100px; bottom: 40px; } .visual-bg .img6 img { width: 90px; } .visual-bg .img7 { right: 50%; bottom: 40px; margin-right: -930px; } .visual-bg .img7 img { width: 70px; } .visual-bg .img8 { right: 50%; bottom: 70px; margin-right: -640px; } .visual-bg .img8 img { width: 95px; } .visual-bg .img9 { right: 110px; bottom: 40px; } .visual-bg .img11 { top: 180px; margin-left: -240px; } .visual-bg .img12 { top: 190px; right: 50%; margin-right: -670px; } #shortcut {background:#fff; border-bottom:2px solid #b6c5f5; height:130px; padding:20px 0;position:relative;z-index:3;} #shortcut h2 { visibility: hidden; font-size: 0;} #shortcut ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #shortcut ul li {float:left; width:20%; height:80px; font-size:1rem;} #shortcut ul li a {line-height:1rem; display: block; text-align: center;} #shortcut ul li a p {color:#222; margin-top: 5px; font-weight:500;} #shortcut ul li a img {border-radius: 50%;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} #shortcut ul li a:hover img {transform: rotateY(180deg); border: 2px solid #a2b0de; width: 60px;} /* #shortcut ul li.menu1 a {background: url(../images/main-shortcuts1.png) center 0px no-repeat;} #shortcut ul li.menu2 a {background: url(../images/main-shortcuts2.png) center 0px no-repeat;} #shortcut ul li.menu3 a {background: url(../images/main-shortcuts3.png) center 0px no-repeat;} #shortcut ul li.menu4 a {background: url(../images/main-shortcuts4.png) center 0px no-repeat;} #shortcut ul li.menu5 a {background: url(../images/main-shortcuts5.png) center 0px no-repeat;} */ #theme {background:#edf1fe; padding:30px 0;} #theme .wrap {background:#fff; height: 100%; padding:40px 50px;} #theme .wrap:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #theme .title, #theme .slide {float:left; height: 220px; margin-top: -5px;} #theme .title {position: relative;z-index: 2;} #theme .title h2 {margin-bottom: 14px;} #theme .title p {font-size: 1rem; line-height: 1.4rem;} #theme .slideBtn {border:1px solid #dddddd; position: absolute; left:0; bottom:0; height:40px; padding:10px;} #theme .slideBtn > * {display: inline-block; vertical-align: middle;} #theme .slideBtn a.prev, #theme .slideBtn a.next {width:10px;height:13px;overflow:hidden;font-size: 0;margin:0 4px;opacity: 0.72;} #theme .slideBtn a.prev:hover, #theme .slideBtn a.next:hover {opacity: 1;} #theme .slideBtn a.prev {background:url(../images/slideBtn.jpg) 0px 0px no-repeat;} #theme .slideBtn a.next {background:url(../images/slideBtn.jpg) -10px 0px no-repeat;} #theme .slideBtn li {float:left; padding: 2px 4px;} #theme .slideBtn li a {font-size: 0;color: #aaa;display: block;width: 10px;height: 10px;background: #747474;border-radius: 10px;opacity: .8;} #theme .slideBtn li a:hover {opacity:1;} #theme .slideBtn li.active a {background-color:#5172df; color:#5172df; width:20px; opacity: 1;} #theme .slide {width: calc(100% - 420px); position: absolute; top: 45px; right: 45px; overflow:hidden;z-index: 1;} #theme .slide ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #theme .slide ul {width:1320px; height:100%; overflow:hidden;} #theme .slide ul li {float:left; width:220px; height:220px; text-align: center;position: relative;} #theme .slide ul li a { display: block; position: relative; width: 160px; height: 160px; overflow: hidden; background: #eaf1fe; border-radius: 50%; margin: 0 auto; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform:translate3d(0,0,0);} #theme .slide ul li a span {font-size:0;line-height:0;width:0;height:0;position:absolute;} /* #theme .slide ul li a:hover img {top:-20px;} */ #theme .slide ul li a img, #theme .slide ul li img { position: absolute; top: 0; left: 0; } #theme .slide ul li.theme1 img.img1 { width: 150px; height:108px; left: 10px; top: 60px; } #theme .slide ul li.theme1 img.img2 { top: 35px; z-index: 1; left: 23px; width: 23px; height: 31px; } #theme .slide ul li.theme1 img.img3 { top: 2px; z-index: 1; left: 50px; width: 20px; height: 24px; } #theme .slide ul li.theme1 img.img4 { width: 42px; height:45px; top: 41px; left: 23px; transform: rotate(0deg); } #theme .slide ul li.theme1 img.img5 { transform:rotate(10deg); top: 22px; left: 79px; width: 42px; height:46px; } #theme .slide ul li.theme1:hover img.img5 {animation: theme1-1 2s infinite ease-in-out; } #theme .slide ul li.theme1:hover img.img4 {animation: theme1-2 2s infinite ease-in-out; } #theme .slide ul li.theme1:hover img.img2 {animation: theme1-3 1s infinite ease-in-out; } #theme .slide ul li.theme1:hover img.img3 {animation: theme1-4 1s infinite ease-in-out; } #theme .slide ul li.theme2 img.img1 { width: 65px; height:146px; top: 25px; left: 76px; } #theme .slide ul li.theme2 img.img2 { width: 70px; height:82px; top: 47px; left: 17px; } #theme .slide ul li.theme2 img.img3 { top: 45px; left: 55px; width: 10px; height:23px; } #theme .slide ul li.theme2 img.img4 { top: 18px; left: 160px; width: 14px;height:16px; z-index: 1; } #theme .slide ul li.theme2 img.img5 { width: 20px;height:13px; z-index: 1; top: 39px; left: 169px; } #theme .slide ul li.theme2:hover img.img2 {animation: theme2-1 1.5s infinite ease-in-out; } #theme .slide ul li.theme2:hover img.img4 {animation: theme2-2 1s infinite ease-in-out; } #theme .slide ul li.theme2:hover img.img5 {animation: theme2-3 1s infinite ease-in-out; } #theme .slide ul li.theme3 img.img1 { width: 120px; height:172px; top: 25px; left: 28px; } #theme .slide ul li.theme3 img.img2 { top: 4px; left: 120px; width: 30px; height:23px; z-index: 1; } #theme .slide ul li.theme3 img.img3 { top: 38px; left: 34px; width: 32px; height:22px; z-index: 1; } #theme .slide ul li.theme3 img.img4 { width: 12px; height:7px; top: 13px; left: 152px; z-index: 1; } #theme .slide ul li.theme3 img.img5 { width: 11px; height:14px; top: 20px; left: 35px; z-index: 1; } #theme .slide ul li.theme3 img.img6 { width: 70px; height:67px; top: 125px; left: 3px; } #theme .slide ul li.theme3 img.img7 { width: 46px; height:69px; top: 24px; left: 87px; } #theme .slide ul li.theme3 img.img8 { width: 70px; height:69px; top: 125px; left:73px; } #theme .slide ul li.theme3:hover img.img6 {animation: theme3-1 2s infinite ease-in-out; } #theme .slide ul li.theme3:hover img.img8 {animation: theme3-1 2s infinite ease-in-out; } #theme .slide ul li.theme3:hover img.img7 {animation: theme3-2 2s infinite ease-in-out; } #theme .slide ul li.theme3:hover img.img3 {animation: theme3-3 1s infinite ease-in-out; } #theme .slide ul li.theme3:hover img.img2 {animation: theme3-4 1.5s infinite ease-in-out; } #theme .slide ul li.theme3:hover img.img4 {animation: theme3-3 1s infinite ease-in-out; } #theme .slide ul li.theme3:hover img.img5 {animation: theme3-4 1.5s infinite ease-in-out; } #theme .slide ul li.theme4 img.img1 {width: 150px; height:122px; top: 52px; left: 3px; } #theme .slide ul li.theme4 img.img2 { top: 2px; left: 67px; width: 28px; height:16px; z-index: 1; } #theme .slide ul li.theme4 img.img3 { top: 38px; left:35px; width: 25px; height:22px; transform: rotate(20deg); } #theme .slide ul li.theme4 img.img4 { width: 30px; height:23px; top: 56px; left: 95px; z-index: 1; } #theme .slide ul li.theme4 img.img5 { width: 24px; height:11px; top: 30px; left:80px; transform: rotate(15deg); } #theme .slide ul li.theme4:hover img.img2 {animation: theme4-1 1s infinite ease-in-out; } #theme .slide ul li.theme4:hover img.img3 {animation: theme4-2 1.2s infinite ease-in-out; } #theme .slide ul li.theme4:hover img.img4 {animation: theme4-1 1s infinite ease-in-out; } #theme .slide ul li.theme4:hover img.img5 {animation: theme4-3 1.5s infinite ease-in-out; } #theme .slide ul li.theme5 img.img1 { width: 140px; height: 93px; top: 40px; left: 10px; } #theme .slide ul li.theme5 img.img2 { width: 45px; height: 26px; top: 50px; left: 14px; } #theme .slide ul li.theme5 img.img3 { width: 40px; height: 32px; top: 43px; left: 59px; } #theme .slide ul li.theme5 img.img4 { width: 50px; height: 44px; top: 30px; left: 105px; } #theme .slide ul li.theme5:hover img.img1 {animation: theme5-1 3s infinite ease-in-out;} #theme .slide ul li.theme5:hover img.img2 {animation: theme5-2 3s infinite ease-in-out;} #theme .slide ul li.theme5:hover img.img3 {animation: theme5-3 3s infinite ease-in-out;} #theme .slide ul li.theme5:hover img.img4 {animation: theme5-4 3s infinite ease-in-out;} #theme .slide ul li.theme6 img.img1 { width: 140px; height: 101px; top: 45px; left: 40px; } #theme .slide ul li.theme6 img.img2 { width: 40px; height: 40px; top: 20px; left: 28px; transform: rotateY(0deg); } #theme .slide ul li.theme6 img.img3 { width: 4px; height:80px; top: 50px; left: 46px; } #theme .slide ul li.theme6:hover img.img1 {animation: theme6-1 3s infinite ease-in-out; } #theme .slide ul li.theme6:hover img.img2 {animation: theme6-2 3s infinite ease-in-out; } #theme .slide ul li h3 {font-size: 1.1rem; line-height: 1.8rem;color:#000000; font-weight: 500; margin-top: 5px;} #theme .slide ul li p {font-size: 1rem; line-height: 1.5rem;color:#5172df;} #theme .slide ul li p span {padding: 0 5px;} /* 211103 이미지 수정 */ #theme .slide ul li.theme1 img.tm1 {top: 20px;z-index: 1;left: 155px;} #theme .slide ul li.theme3 img.tm3 {top: 50px;z-index: 1;left: 20px;} #board {background:#fbfcfe; border-bottom:1px solid #edeff9; padding:30px 0;} #board:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} #board .boardList, #board .link, #board .customer {float:left; /* height:275px; */ margin-right: 20px;} #board .boardList, #board .customer {background:#fff; border:1px solid #dfe3f3;} #board .boardList {/*width:510px;*/width:46%;height: 295px;} #board .link {/*width:310px;*/width:calc(53% - 260px);} #board .link a {padding: 25px; display:block; border:1px solid #dfe3f3; height:140px;} #board .link p { color: #666; font-size: 0.9rem; line-height: 1.2rem; } #board .link svg { margin-top: 10px; opacity:.2; } #board .link a svg > * {stroke: #5172df;} #board .link a:hover svg {margin-left:20px; opacity:1;} /* #board .link a:hover svg > * {stroke: #5172df;} */ #board a.link1 {background:url(../images/bg-link1.jpg) right center no-repeat; background-color:#fff;} #board a.link2 {background:url(../images/bg-link2.jpg) right center no-repeat; background-color:#fff; margin-top: 15px;} #board .customer {width:230px;/* width: calc(25% - 40px); */margin:0;padding: 25px;font-size: 0;height: 295px;} #board .boardList h2 {font-size:0;} #board .link h2, #board .customer h2 {font-size: 1.2rem; font-weight: 500; color: #2f2f2f; margin-bottom: 10px;} #board .customer .call {margin-bottom:20px;} #board .customer h3 {font-size: 1rem;color: #383838;margin-bottom: 10px;margin-top: 20px;font-weight:500;} #board .customer i { font-size: 1.5rem; font-weight: 500; color: #2f4eb7; } #board .customer i ~ b { color: #373737; background: #edf1fe; border-radius: 20px; display: inline-block; width: 18px; height: 18px; line-height: 18px; font-size: 0.8rem; margin: 0 5px; font-weight: 500; text-align: center;} #board .customer i, #board .customer b, #board .customer img {vertical-align: middle;vertical-align: -webkit-baseline-middle;} #board .customer p {color: #666;font-size: 1rem;line-height: 1.8rem;} #board .customer b + p {margin-top:20px;} #board .boardList .menu { height: 50px; border-bottom: 1px solid #eff1f9; position: relative; overflow:hidden; padding-left:5px;} #board .boardList .menu li {float:left;margin: 0 15px; height: 49px;} #board .boardList .menu li a { line-height: 52px; font-size: 1.1rem; color: #666; } #board .boardList .menu li a:hover {color:#000;} #board .boardList .menu li.active {border-bottom: 4px solid #5172df;} #board .boardList .menu li.active a {font-weight:500;color:#000;} #board .boardList .menu a.more{text-align:center; position: absolute; margin-left:200px; top:10px; right:10px; width: 30px; height: 30px; background: #edf1fe; font-size:30px;} /*#board .boardList .menu a.more { position: absolute; top:10px; right:10px; width: 30px; height: 30px; background: #edf1fe; color: #95a5d8; font-size:0;} #board .boardList .menu a.more:before, #board .boardList .menu a.more:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } #board .boardList .menu a.more:before { width:16px; height: 2px; background: #95a5d8; } #board .boardList .menu a.more:after { width: 2px; height:16px; background: #95a5d8; } #board .boardList .menu a.more:hover { transform: rotate(90deg); }*/ #board .boardList .list {padding:20px;} #board .boardList .list ul {display:none;} #board .boardList .list ul.active {display:block;} #board .boardList .list li {padding: 13px 0 12px 10px;position: relative;} #board .boardList .list li:after {content: "·";display: block;position:absolute;top:11px;left:0px;} #board .boardList .list li a { display: inline-block;width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; position: relative; } #board .boardList .list li a, #board .boardList .list li span, #board .boardList .list li i {vertical-align: middle;} #board .boardList .list li img {width: 13px; vertical-align: text-top;} #board .boardList .list li span { text-align: right; display: inline-block; width: 100px; font-size: 1rem; color: #aaa; font-weight: 200; position: absolute; top: 10px; right: 0;} #board .boardList .list li i {margin-left:5px;position: absolute; top: 0;} #banners {background:#fff; height:100px;} #banners h2, #banners .btns {float:left;} #banners h2 { margin: 42px 0; font-weight: 500; } #banners .btns {width:88px; height:30px; background:#fff; margin: 34px 10px;} #banners .btns a {border: 1px solid #e1e1e1; display:block; width:30px; height:30px; float:left; margin-left:-1px; font-size: 0; opacity: .6;background: url(../images/banner-btns.jpg) -60px 0px no-repeat;} #banners .btns a:hover {opacity: 1;} #banners .btns a.prev {background: url(../images/banner-btns.jpg) 0px 0px no-repeat;} #banners .btns a.stop {background: url(../images/banner-btns.jpg) -30px 0px no-repeat;} #banners .btns a.next {background: url(../images/banner-btns.jpg) -90px 0px no-repeat;} #banners .list {position:relative;float:right; width:calc(100% - 180px); overflow:hidden; margin-top: 20px;} #banners .list ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} /* #banners .list ul {width:2000px;} */ #banners .list ul li { width: 180px; height: 60px; border: 1px solid #e1e1e1; float: left; margin-right: 5px; overflow: hidden; text-align: center; padding-top: 3px;} /* 20251023 웹표준 수정 */ #organName{ -webkit-ime-mode:active; -moz-ime-mode:active; -ms-ime-mode:active; ime-mode:active; } .pd0{ padding-top: 0px !important; } .pd1{ padding-top: 1px !important; } .pd2{ padding-top: 2px !important; } .pd3{ padding-top: 3px !important; } .pd4{ padding-top: 4px !important; } .headerTag h4{ position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; margin: -1px; } /* 2025.05.30 웹접근성으로 인한 추가 */ #visual .status .tab .active a{ text-decoration: underline; text-underline-offset : 3px; font-weight :500; text-decoration-thickness:2px; } #mainInfoTab ul li.active a{ text-decoration: underline; text-underline-offset : 3px; font-weight :500; text-decoration-thickness:2px; display:block; } /* ##Device = 랩탑, 데스크탑 ##Screen = 1025px 이상 */ @media (min-width: 1025px) { @keyframes theme1-1 { 0% { transform:rotate(10deg); } 80% { transform:rotate(0deg); } 100% { transform:rotate(10deg); } } @keyframes theme1-2 { 0% { transform:rotate(0deg); } 80% { transform:rotate(5deg); } 100% { transform:rotate(0deg); } } @keyframes theme1-3 { 0% { top:35px; } 50% { top:30px; } 100% { top:35px; } } @keyframes theme1-4 { 0% { top:2px; } 50% { top:6px; } 100% { top:2px; } } @keyframes theme2-1 { 0% { transform:rotate(0deg); top: 47px; } 80% { transform: rotate(-5deg); top: 49px; } 100% { transform:rotate(0deg);top: 47px; } } @keyframes theme2-2 { 0% { width:14px; } 50% { width:10px; } 100% { width:14px; } } @keyframes theme2-3 { 0% { width:20px; } 50% { width:24px; } 100% { width:20px; } } @keyframes theme3-1 { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } @keyframes theme3-2 { 0% { transform:rotate(0deg);top: 24px; } 50% { transform:rotate(10deg);top: 29px; } 100% { transform:rotate(0deg);top: 24px; } } @keyframes theme3-3 { 0% { transform:rotate(0deg); } 50% { transform:rotate(5deg); } 100% { transform:rotate(0deg); } } @keyframes theme3-4 { 0% { transform:rotate(0deg); } 50% { transform:rotate(10deg); } 100% { transform:rotate(0deg); } } @keyframes theme4-1 { 0% { transform:rotate(0deg); } 50% { transform: rotate(20deg); } 100% { transform:rotate(0deg); } } @keyframes theme4-2 { 0% { transform:rotate(20deg); } 50% { transform: rotate(0deg); } 100% { transform:rotate(20deg); } } @keyframes theme4-3 { 0% { transform:rotate(15deg); } 50% { transform: rotate(0deg); } 100% { transform:rotate(15deg); } } @keyframes theme5-1 { 0% { top:60px; } 20% { top:30px; } 30% { top:40px; } 100% { top:40px; } } @keyframes theme5-2 { 0% { top:70px; } 20% { top:30px; } 30% { top:50px; } 100% { top:50px; } } @keyframes theme5-3 { 0% { top:63px; } 20% { top:23px; } 30% { top:43px; } 100% { top:43px; } } @keyframes theme5-4 { 0% { top:50px; } 20% { top:10px; } 30% { top:30px; } 100% { top:30px; } } @keyframes theme6-1 { 0% { left:70px; } 50% { left:40px; } 100% { left:40px; } } @keyframes theme6-2 { 0% { transform: rotateY(0deg); } 25% { transform: rotateY(180deg);} 50% { transform: rotateY(0deg);} 100% { transform: rotateY(0deg); } } .statusType .mobileH3 { display : none; } } /* ##Device = 랩탑, 데스크탑 ##Screen = 1025px에서 1280px 사이 */ @media (max-width: 1280px) { /* #board .boardList {width:calc(100% - 515px);} #board .link { width: 260px;} #board .customer {width:215px;} */ .statusType .mobileH3 { display : none; } } /* ##Device = 태블릿, 아이패드(가로) ##Screen = 769px에서 1024px 사이 */ @media (max-width: 1024px) { html {font-size:15px;} #visual { height: auto; padding-bottom: 20px; } .visual-bg { display: none; } #visual .sch .schArea { width: calc(100% - 570px); padding-right: 0; } /* #visual .local .localSelect {width:250px;} */ #visual .local { height: 410px; } #visual .local .localSelect {width: 300px; padding: 20px;} #visual .local .localSelect h3 {top: 25px; left: 25px; overflow:hidden;} #visual .local .localSelect h3 img {margin-top:-25px; width: 120px;} #visual .local .localSelect p {display:none;} #visual .local .localSelect a.location { left: 0; bottom: 0; width: 100%; text-align: center; border-width: 1px 0 0; height: 47px; padding: 15px 20px; } #visual .local .localSelect a.location:hover { background: #0d2a8a;border-color:#5177df; } #visual .local .localSelect .map {top: 60px;float: none; margin: 0 auto;} #visual .local .status {width: calc(100% - 300px);} #visual .status .tab, #visual .status .content { float: none; width: 100%; height: auto; } #visual .status .tab { padding: 15px 15px 0; height: 60px; overflow: hidden; background: url(../images/bg-state.png) right -20px no-repeat; background-color: #edf1fe;} #visual .status .tab li { float: left;border:none; } /* #visual .status .content .cont1 { padding: 28px 24px 26px 30px; } #visual .status .content .cont2 { padding: 28px 30px 26px 24px; } */ #theme { padding: 20px 20px; } #theme .wrap { padding: 35px; } #theme .slide { width: calc(100% - 320px);} #board { padding: 20px 0; } #board .boardList { margin-right:10px; } #board .link {margin-right:10px; width: calc(53% - 242px);} #banners .list { width: calc(100% - 190px);} } /* 기타 */ @media (max-width: 920px) { #board .boardList {width:100%; margin: 0 0 10px 0;} #board .link { width: 100%; font-size:0; height: auto; margin-bottom: 10px; } #board .link a { width: calc(50% - 5px); display: inline-block; margin: 0; } #board .link a.link1 {margin-right:10px;} #board .customer { width: 100%; height: auto; } #board .customer h2 {margin-bottom:0;} #board .customer h3 { margin-top: 10px; display: inline-block; vertical-align: bottom; margin-right: 10px; width: 95px; text-align: right;} #board .customer .call { text-align:center; margin-bottom:10px; } #board .customer .call .kinder, #board .customer .call .baby { text-align: left; margin: 0 auto; width:300px; } #board .customer .open { text-align:center; } #board .customer .open p { line-height: 1.6rem; display:inline-block; margin:0 10px; } } @media (max-width: 840px) { #visual .sch { padding: 20px 0; } #visual .sch > h2 {display:none;} #visual .sch .schArea { width:calc(100% - 290px); } #visual .sch .schArea .schbar { margin:0; max-width:100%; } } /* ##Device = 저해상도 태블릿, 모바일(가로) ##Screen = 481px에서 768px 사이 */ @media (max-width: 768px) { #visual .local { height: auto; } #visual .local .localSelect, #visual .local .status {float:none;width:100%;} #visual .local .localSelect {overflow: hidden; margin-bottom: 20px;height:auto; padding-bottom: 70px;} #visual .local .localSelect h3 img {margin-top:0px;} #visual .local .localSelect p {display:block;} #visual .local .localSelect .map {top: 0; width: 250px; height: 350px;} #visual .local .localSelect a.incheon { top: 24%; left: 6%; } #visual .local .localSelect a.chungnam { top: 46%; left: 19%; } #visual .local .localSelect a.sejong { top: 42%; left: 32%; } #visual .local .localSelect a.gyeongbuk { top: 48%; left: 66%; } #visual .local .localSelect a.jeju { top: 90%; left: 73%; } #visual .status .content .cont1 { padding: 30px 35px 30px 30px } #visual .status .content .cont2 { padding: 80px 30px 30px 35px; } #theme .wrap { padding:0; } #theme .title { text-align: center; width: 100%; float: none; height: auto; padding:35px;} #theme .slide { position:relative;width: 100%; top: 0; left: 0;padding: 0 30px 0; min-height: 255px; overflow-x: auto;} #theme .slide ul li { margin: 0 -10px; } #theme .slideBtn { display:none; } /* #board .boardList { width: 100%; margin-bottom:10px; } #board .link { width: 52%; } #board .link p br {display:none;} #board .link a {height:110px;} #board a.link2 {margin-top:10px;} #board .customer { width:calc(48% - 10px);position: relative; } #board .customer h3 { display:inline-block; vertical-align: bottom; margin:20px 5px 0 0; } #board .link, #board .customer { height: 230px; } */ #banners .wrap { height:100%;padding:0; } #banners h2, #banners .btns { display: none; } #banners .list { width: 100%; overflow-x: auto; margin: 0; padding: 20px 0; height: 100px; float:none;} #banners .list > ul {margin:0 20px !important;} } /* ##Device = 대부분의 스마트폰 모바일 기기(세로) ##Screen = 480px 이하 */ @media (max-width: 480px) { #visual .sch { padding: 20px 0 10px; } #visual .sch .schArea { width:100%; margin:0; } #visual .sch .favorite { display:none; } #visual .local .localSelect p { display:none; } #visual .local .localSelect .map { margin: 90px auto 0; float: none; } #visual .status .content .cont1, #visual .status .content .cont2 { float: none; clear: both; width: 100%; height: auto; } #visual .status .content .cont2 { border-top: 1px dashed #dee2ef; } #visual .status .content .cont1 span.arrow {display:none;} #shortcut { height: auto; } #shortcut ul li { width: 50%; padding: 18px 0; height: auto; } #theme { padding: 10px 0px; } #theme .title { height: auto; float: none;text-align: center; } #theme .slideBtn { display: none; } #theme .slide { position: relative; float: none; width: 100%; height: auto; right: 0; margin-top: -30px;} #theme .slide ul { width: 100%; margin-bottom:20px; } /* #theme .slide ul li { margin: 15px auto; float:none; } */ #theme .slide ul li { width: 50%; height: auto; margin:10px 0; } #theme .slide ul li > img {display:none;} #theme .slide ul li a {width:150px; height:150px;} #theme .slide ul li p span { padding: 0; white-space: nowrap; display: block; } #board .boardList .menu li a {font-size:1rem;} #board .boardList .list li a { width: 100%; } #board .boardList .list li span { display: none; } #board .link h2 { font-size: 1.1rem; } #board .link a { width: 100%; display: block; } #board .link a.link1 {margin-bottom:10px;} #board .customer h2 { font-size: 1.1rem; } #board .customer h3 {text-align:left;display: block; margin-top: 20px;} #board .customer .call { text-align: left; margin-top: 10px; } #board .customer .call .kinder, #board .customer .call .baby { margin: 0 0 5px 0; } #board .customer .open { text-align: left; } #board .customer .open p {display:block; margin:0;} .statusType .deskTopH3 { display : none; } .statusType .mobileH3 { display : block; } } /* ##Device = 소형 모바일 기기(세로) ##Screen = 320px 이하 */ @media (max-width: 320px) { html {font-size: 13px;} #theme .slide ul li a { width: 120px; height: 120px; } #theme .slide ul li.theme1 img.img1 { left: 0; } #theme .slide ul li.theme1 img.img5 { left: 69px; } #theme .slide ul li.theme1 img.img4 { left: 13px; } #theme .slide ul li.theme2 img.img1 { left: 66px; } #theme .slide ul li.theme2 img.img2 { left: 7px; } #theme .slide ul li.theme2 img.img3 { left: 45px; } #theme .slide ul li.theme3 img.img1 { left: 18px; } #theme .slide ul li.theme3 img.img7 { left: 77px; } #theme .slide ul li.theme4 img.img1 { top: 32px; left: 19px; } #theme .slide ul li.theme4 img.img3 { top: 15px; left: 35px; } #theme .slide ul li.theme4 img.img5 { top: 25px; left: 70px; } #theme .slide ul li.theme5 img.img1 { top: 15px; left: -5px; } #theme .slide ul li.theme5 img.img2 { top: 28px; left: 0px; } #theme .slide ul li.theme5 img.img3 { top: 20px; left: 46px; } #theme .slide ul li.theme5 img.img4 { top: 8px; left: 93px; } #theme .slide ul li.theme6 img.img1 { top: 15px; left: 20px; } #theme .slide ul li.theme6 img.img2, #theme .slide ul li.theme6 img.img3 { display:none;} } #board .boardList a.more{text-align:center; position: absolute; margin-left:200px; top:10px; right:10px; width: 30px; height: 30px; background: #edf1fe; font-size:30px; line-height:1em;} #board .boardList{ position: relative;} /*260526 웹접근성 조치*/ /* 1. 부모 a 태그를 이미지 크기와 동기화 */ #banners .list ul li a { display: inline-block !important; /* 또는 block */ position: relative; outline: none; /* 브라우저 기본 아웃라인 일단 초기화 */ text-decoration: none; } /* 2. 안쪽 이미지는 부모 박스에 꽉 차게 설정 */ #banners .list ul li a img { width: 100% !important; height: 100% !important; display: block; border: 0; } /* 3. 키보드나 모바일 접근성 초점이 a 태그에 도달했을 때 (핵심) */ #banners .list ul li a:focus, #banners .list ul li a:focus-visible { outline: 2px solid #256ef4 !important; outline-offset: 2px !important; position: relative !important; z-index: 1000 !important; } #board .boardList .list li.headerTag{ padding: 0; position: absolute; }