@charset "UTF-8"; @import url('reset_mo.css'); @import url('fonts.css'); /* @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .swiper-container{width: 545px !important; overflow: hidden;} .swiper-slide{width: 59px; margin-left: 0 !important;} } */ body{min-width: 320px} .hoverLine{position: relative;} .hoverLine:before{width: 0; position: absolute; bottom: -2px; left: 50%; height: 1px; background-color: #019cb6;display: block; content: '' } /*a:hover .hoverLine:before{width: 100%; transition: 0.5s ease; left: 0;}*/ .hoverLines{background-image: linear-gradient(transparent calc(100% - 1px), #019cb6 1px); background-repeat: no-repeat; background-size: 0% 100%; transition: 0.5s; } /*a:hover .hoverLines:{background-size: 100% 100%;}*/ .hd-top-banner {width: 100%; height: 54px; background: url('../img/mobile/common/mo-top-bn_bg.jpg') no-repeat center/cover; text-align: left; position: relative; z-index: 102;} .hd-top-banner .inner {position: relative; height: 100%;} .hd-top-banner .hd-top-bn_ct {height: 54px; line-height: 54px; font-size: 0;} .hd-top-banner .hd-top-bn_ct img {vertical-align: middle;} .hd-top-bn_close-box {display: flex; align-items: center; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 1; gap: 0 5px;} .hd-top-bn_close-box .chk-box {display: flex; align-items: center; justify-content: center; gap: 0 2px; font-weight: 300; font-size: 14px; color: #000;} #hd-top-today-close + label {font-size: 12px; font-weight: 400; color: #000;} .hd-top-bn_close {display: block; font-size: 0; border: none; background-color: transparent; width: 12px; height: 12px;} .hd-top-bn_close img {max-width: 100%;} /* header */ .hidden{display: none;} .pc{display: none !important;} .logo{float: left; } .BtnMenu{display: inline-block; width: 2.9rem; height: 2.2rem; background: url(../img/mobile/common/icon-common.png) no-repeat 0 0; float: right; font-size: 0; margin-top: 13px; background-size: 20rem 20rem} .m_gnb{position:fixed; right: -6000px; top: 0; background-color: #f6f6f6; width: 100%; z-index: 20; overflow-y: auto; height: 100vh; } .gnbTop{background-color: #353740; padding: 2rem 3rem; position: relative;} .BtnClose{position: absolute; right: 3rem; top: 2rem; background:url(../img/mobile/common/icon-BtnClose.png) no-repeat 0 0; display: inline-block; font-size: 0; width: 2.6rem; height: 2.9rem; cursor: pointer; background-size: 2.6rem 2.9rem;} .logIn, .consulting{color: #fff;font-size: 2.2rem; padding-left: 4rem; position: relative; background-color: rgba(0,0,0,0); } .logIn:focus , .consulting:focus{text-decoration: underline} .logIn{margin-right: 5.5rem;} .logIn:before{width: 3rem; height: 3.2rem; display: block; content: ''; background: url(../img/mobile/common/login.png) no-repeat 0 0; position: absolute; left: 0; top: -1px; background-size: 3rem 3.2rem;} .logIn span{position: relative;} .logInspan:before{background-color: #019cb6; left: 50%; content: ''; position: absolute; bottom: -2px; height: 1px; width: 0; transition: 0.5s ease} .consulting:before{width: 2.8rem; height: 3.3rem; display: block; content: ''; background: url(../img/mobile/common/icon-common.png) no-repeat 0 -7.2rem; position: absolute; left: 0; top: -1px; background-size: 20rem 20rem;} .mobileMenu{padding: 3rem;} .mobileMenu > li{border-bottom: 1px solid #e2e2e2; float: none; ; padding: 4rem 0;} .mobileMenu > li:first-of-type{padding-top: 0;} .mobileMenu > li > a{color: #019cb6; font-weight: 700; font-size: 2.5rem; line-height: 2.5rem; display: block; width: 100%; } .mobileMenu > li > a >span{display: block;width: 100%;} .gnbList{width: 100%; margin-top: 3rem;display: flex ; flex-wrap: wrap} .gnbList > li{width: 25%; margin-top: 3rem; position: relative;} .gnbList > li:nth-of-type(1), .gnbList > li:nth-of-type(2), .gnbList > li:nth-of-type(3), .gnbList > li:nth-of-type(4){margin-top: 0} .gnbList > li > a{font-size: 1.8rem; display: block; width: 100%; line-height: 2rem;} .gnbList > li > a >span{line-height: 1.8rem;} .gnbList > li > a >span:before{content: ''; left: 50%; width: 0; display: block; height: 1px; background-color: #019cb6; transition: 0.5s ease} .gnbList > li.on >a{color: #019cb6; } .gnbList > li.on a >span:before{left: 0; width: 100%; } .gnbList02{background-color: #fff; border-radius: 10px; border: 1px solid #666; position: absolute; left: -9999px; margin-top: 1.1rem; width: 90%; z-index: 1; padding: 1rem 1.5rem; display: none;} .gnbList > li.on .gnbList02{left: 0;} .gnbList02 > li{} .gnbList02 > li > a{color: #333; font-size: 1.6rem} .gnbList02 > li > a span{} .gnbList02 > li > a span:before{content: '-'; margin-right: 5px;} .inner{padding: 0 3rem; position: relative; } .inner.inner-shadow{padding: 0 3rem 2rem 3rem;;} .m_header{border-bottom: 1px solid #353740; overflow: hidden; padding-bottom: 1.6rem;} .m_header.fixed{position: fixed; z-index:20; top: 0; left: 0; width: 100%; background-color: #fff; border-bottom: none; box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); } .m_header.fixed .inner{overflow: visible} .m_header .inner{padding: 1.9rem 3rem 1.8rem 3rem; } .dim{position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 3; width: 100%; height: 100vh; position: fixed; display: none;} .dim100{position: absolute; left: 0; top:0; background-color: rgba(0,0,0,0.5); z-index: 100; width: 100%; height: 100vh; position: fixed; display: none;} /* main */ .main{} .main section.sec01{margin: 0; } .main section > div{margin-bottom: 8rem} .main section > div.inner.inner-shadow{margin-bottom:0rem} .main section > div.secBg{margin-bottom: 0rem} .hoverBd{border: 2px solid rgba(0,0, 0, 0); box-sizing: border-box;} /*.hoverBd:hover{border: 2px solid rgba(0,163, 192, 1); transition: 0.5s ease}*/ h2{color:#010101; font-size: 2.7rem; font-weight: 700; } h2 + p{color:#353740; font-size: 1.6rem; margin-top: 1rem;} .sec01{overflow: hidden; background-color: #fff;} .main section.sec01 > div{margin-bottom: 0;} .main section.sec01 > div.inner{padding: 0 0 0 3rem;} .mainSearch *{vertical-align: middle;} .mainSearch{ width: 100%; max-width: 564px; position: relative; margin: 9rem auto 6.5rem auto; padding-right: 3rem;} .mainSearch form{width: 100%; max-width: 564px; display: block; } .mainSearch input[type="text"]{border: 0; width: calc(100% - 6.8rem); background: none; height: 6.2rem; padding: 0.8rem 0; padding-left: 2rem; font-size: 1.9rem; color:#000; font-weight: 300; border: 4px solid #353740; border-radius: 15px; } .mainSearch input[type="text"]::placeholder{font-size: 2.5rem; color:#b4b4b4 ;} .mainSearch .btnSrc{background-color: #353740; width: 6.2rem; height: 6.2rem; border-radius: 15PX; font-size: 0; position: relative; position: absolute; right: 3rem; top: 0; } .mainSearch .btnSrc:before{background: url(../img/mobile/main/icon.png) no-repeat -6rem -3rem; width: 2.3rem; height: 2.3rem; content:''; display: block; position: absolute; top: 50%; left: 50%; margin-top: -1.15rem; margin-left: -1.15rem; background-size: 50rem 50rem;} .hashtag {margin-top: 0.7rem; padding-left: 1.5rem;} .hashtag a{color:#969696 ; font-size: 1.5rem; display: inline-block; position: relative; padding-bottom: 3px; margin-right: 3.5rem;} .hashtag a:last-of-type{ margin-right:0;} /*.hashtag a:hover{color:#019cb6}*/ /* 2023긴급돌봄지원사업 */ .main section.sec01 > div.inner .flex {display:flex; flex-wrap:wrap;} a.mainBannerRight {margin-top:4rem; width:calc(100% - 3rem); height:138px; border-radius:10px; border:1px solid #eee; padding:1.5rem 2.7rem; transition:.3s; background:#DEEBF7;} a.mainBannerRight:hover {box-shadow:0px 0px 8px 1px rgba(0,0,0,0.01);} a.mainBannerRight h3 {font-size:2.3rem; color:#1f2129;} /* 2023긴급돌봄지원사업 이미지*/ a.mainBannerRight {background-image: url(../img/sub/img_sub111.png) ; background-position: 105% 90%; background-repeat:no-repeat; background-size: 55%;} .careServise .localList {display:flex; flex-wrap:wrap; margin:-6px; margin-bottom:15px;} .careServise .localList li {width: 50%;padding:6px;} /* 230405 */ .careServise .localList li button {display:block; width:100%; padding:11px 5px; font-size:1.8rem; color:#353740; font-weight:500; text-align:center; border-radius:12px; border:1px solid #E8EBF2; background:#fff; transition:ease .3s;} .careServise .localList li button span {position:relative;} .careServise .localList li.active button /* 221227 */, .careServise .localList li:hover button {border:1px solid #007D7D; color:#007D7D} .sub100 .botm > dl >dd > .localList > li:before {display:none;} .sub100 .botm > dl >dd > .localList > li {padding:6px;} /* //2023긴급돌봄지원사업 */ .rollingWrap{padding-bottom: 1rem;position: relative;margin-top: 5.8rem;padding-right: 3rem;} /* 221221 */ .swiper1 {margin-bottom:3rem;} /* 221222 */ .swiper-container {margin: 3.5rem 0 7rem 0; } /* 221222 */ .swiper1 .swiper-wrapper{ display: flex; width: 100%;} .swiper1 .swiper-slide{border-radius: 10px; background-position: 10px 100%; background-repeat:no-repeat ; background-color: #f2f3f7; position: relative; width: 30.9rem ; font-size: 1rem ; margin-right:0; height: 27.7rem; border: 1px solid #e0e2eb ; background-size: auto 11.5rem; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.04);} /* 221222 */ .swiper1 .swiper-slide > a{position: relative; width: 100% ; height: 100%; font-size: 1rem ; display: block; width: 100%; padding: 2.7rem; position: relative; border-radius: 10px;} .swiper1 .swiper-slide > a{} .swiper1 .swiper-slide > a p{color: #1f2129; font-weight: 400; font-size: 1.6rem; margin-top: 1rem; } .swiper1 .swiper-slide p > .more{display: none;} .swiper1 .swiper-slide.rolling04{background-size: auto 11rem;} /*.swiper1 .swiper-slide p > span *{vertical-align: middle;} */ /*.swiper1 .swiper-slide p > .more span{position: relative; padding-left: 3rem;}*/ /*.swiper1 .swiper-slide p > .more span:before{content: ''; background: url(../img/mobile/main/rolling-arrow.png) no-repeat 0 0; display: inline-block; width: 2.8rem; height: 2.9rem; position: absolute; left: 0; top: 0;}*/ /* .swiper1 .swiper-slide:nth-of-type(2) a p, .swiper1 .swiper-slide:nth-of-type(4) a p{background-color: #feede4;} .swiper1 .swiper-slide:nth-of-type(3) a p{background-color: #e7f2f4;;} .swiper1 .swiper-slide:nth-of-type(1) a p, .swiper1 .swiper-slide:nth-of-type(5) a p{background-color: #f4e8f3;;} */ .swiper-slide:last-of-type{ margin-right: 0;} .swiper-slide h3{ color:#1f2129; font-size: 2.6rem;} .swiper-slide a .rollTxt {text-align: left;} .swiper-slide.rolling00{background-image: url(../img/mobile/main/rolling_00.png) ; background-position: 90% 100%;} .swiper-slide.rolling01{background-image: url(../img/mobile/main/rolling_01.png) ; background-position: 90% 100%;} .swiper-slide.rolling02{background-image: url(../img/mobile/main/rolling_02.png) ; background-position:90% 100%;} .swiper-slide.rolling03{background-image: url(../img/mobile/main/rolling_03.png) ;background-position:101% 100%;} .swiper-slide.rolling04{background-image: url(../img/mobile/main/rolling_04.png) ; background-position:90% 100%;} .swiper-slide.rolling05{background-image: url(../img/mobile/main/rolling_05.png) ; background-position:90% 100%; background-size: auto 10rem ;} /*.rollTxt{width: calc( 100% - 20rem)}*/ .rollTxt p {font-size: 1.6rem;} /*.swiper1 .swiper-slide > a{ display: block; width: 100%; padding: 2.5rem 3rem; height: 100%; position: relative; }*/ .swiper2 .swiper-slide{} .swiper-pagination{position: absolute; right: 20px !important; top: 0.9rem; left: none;} .rollingBtn{position: absolute; right: 0; top: 1.3rem;} .rollingBtn > a{font-size: 0; display: inline-block; width: 8px; height: 8px;} .rollingBtn a.pause{background: url(../img/mobile/main/controller.png) no-repeat 0 0; border: 0; width: 6px; border-radius: 0; display: block;} .rollingBtn a.play{background: url(../img/mobile/main/controller.png) no-repeat -10px 0; height: 10px; border: 0; border-radius: 0; width: 6px; display: none; } .main{background-color: #f2f4f5; width: 100%; padding-bottom:2rem; } .sec{margin: 0 10px;} .sec .sec02{position: relative; margin: 3rem 0 0 0 ; } .sec02 .inner{padding: 0 0 0 3rem; } .sec02 .inner .btnMore{right: 3rem; } /*.sec02 > h2{margin-top: 2rem;}*/ .sec02.sec{padding-top: 4.7rem; margin: 0 0 0 10px;} /*.noticeWrap{margin-top: 3rem; overflow: hidden; margin-right:3rem;} /* 221222 */ .noticeWrap{ overflow: hidden; margin-right:3rem;} /* 221222 */ .noticeWrap .swiper-slide{margin-bottom: 1rem; width:100% !important;} /* 221222 */ .noticeWrap a{display: block;height: 28rem;; width: auto; border: 2px solid #fff;background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.04); padding: 3.1rem 2.2rem 2.9rem 2.2rem; position: relative;;} .noticeWrap a:last-of-type{margin-right: 0;} .noticeWrap a > .new{color: #019cb6; text-transform: uppercase; font-size: 1.5rem; margin-top: -0.5rem; display: inline-block; word-break: keep-all; font-weight: 400; position: absolute; right: 2.5rem; top: 3.7rem} .sub .noticeWrap a > .new{top: 3.1rem;} .noticeWrap a > span, .tagWrap > span{ text-align: center; min-width: 6.5rem; border-radius: 10px 10px 10px 0 ; display: inline-block; font-size: 1.4rem; padding: 0.3rem 1.5rem; margin-right: 3px; line-height: 1.9rem;} .noticeWrap a > span.date{position: absolute; right: 0; bottom: 2.1rem;} .noticeWrap a > span.category, span.category{background-color: #353740; color:#fff; margin-bottom: 1rem; } .noticeWrap a > span.lock, span.lock{background: url(../img/mobile/sub/icon_lock.png) no-repeat 0 0 ; width: 1.6rem; height: 1.7rem; font-size: 0; border-radius: 0; margin-left: 2px; display: inline-block; background-size: 1.5rem 1.7rem; min-width: 1.6rem; padding-right: 0; margin-top: -0.5rem;} .noticeWrap a > span.district, span.district{border: 1px solid #353740; background-color: #fff; color:#6c6e75; margin-bottom: 1rem;} .noticeWrap a > p{color:#000000; font-size: 2.1rem; ; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:5; -webkit-box-orient: vertical; font-weight: 500; margin-bottom: 2rem; line-height: 3.1rem} .noticeWrap a > p > span{word-break: break-all; ; line-height: 2rem; } /*.noticeWrap a:hover > p > span{background-size: 100% 100%}*/ .noticeWrap a > p *{vertical-align: middle;} .noticeWrap a > p em{color: #019cb6; margin-left: 5px; text-transform: uppercase; font-size: 1.3rem; margin-top: -0.5rem; display: inline-block; word-break: keep-all; font-weight: 400;} .btnMore{position: absolute; top: 0.5rem; right: 10px; /**/ min-height: 20px; /*position: relative;*/} .btnMore a{display: block; width: 100%; position: relative; padding-left: 25px; font-size: 1.6rem;} .btnMore a:before{ content: ''; position: absolute; bottom: -0.1rem; width: 21px; height: 21px; display: block; background: url(../img/mobile/main/more.png) no-repeat 0 50%; left: 0; } .secBg{background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.04); padding: 5rem 4.7rem ; } a.goTop{background-color: #f26922; color:#fff; border-radius: 100%; width: 7rem; height: 7rem; display: block; text-align: center; position: absolute; bottom: 60px; right: 3VW; padding-bottom: 10px; box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.26); position: fixed; z-index: 1; } a.goTop span{font-size: 1.2rem; } a.goTop span:before{content: ''; display: block; background: url(../img/mobile/common/icon-common.png) no-repeat -130px 0; width: 2.3rem; height: 2.7rem; margin: 1.5rem auto 0 auto;} .sec03{;} .regionLink{background: #fff; border-radius: 50px; color: #353740; font-size: 1.7rem; position: relative;z-index: 2; margin-top: 2.5rem; overflow: hidden; } .regionLink.on{overflow: visible} .regionLink.on ul{ top: 3rem;} .regionLink > p{position: relative;padding: 1.6rem 4rem 2rem 4rem; background-color: #fff; position: relative; z-index: 2; border-radius: 50px; border: 2px solid #e1e7ea; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.07); cursor: pointer} .regionLink > p:before{content: '' ; display: block; width: 1.8rem; height: 1.3rem; background: url(../img/mobile/main/icon.png) no-repeat -16rem 0; position: absolute; top: 50%; right: 3rem; margin-top: -0.6rem; transition: 0.5s ease; background-size: 50rem 50rem;} .regionLink.on > p:before{transform: rotate(180deg);transition: 0.5s ease } .regionLink ul{width: 100%; border-radius: 0 0 10px 10px ; position: absolute; left: 0; z-index: 1; padding: 6rem 2rem 3rem 2rem; max-height: 44rem; overflow-y: auto; background: #fff; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.04); top: -500px; border: 2px solid #e1e7ea;} .regionLink ul li {text-align: center;} .regionLink ul li a{color: #353740; font-size: 1.9rem; line-height: 4rem; } .regionLink ul li a:active{ background-color: #e8ebf2; border-radius: 50px; padding: 0.2rem 5.5rem; } .sec03 .left{margin-bottom: 7rem;} .sec03 .right{width: 100%; overflow: hidden;} .sec03 .right h2 + p{margin-bottom: 2.5rem;} .sec03 .right .center{border-radius:20px; height: 27rem; border:1px solid #fdc2a4; box-shadow: 3px 3px 15px rgba(0,0,0,0.2); background: url(../img/mobile/main/sec03_bg.png) no-repeat 90% 100% #fff; background-color: #ffdece; margin-bottom: 2.4rem;} /* 221222 */ .sec03 .right .center a{ padding: 2.8rem 3rem 0 3rem; display: block; width: 100%; height: 100%;} .sec03 .right .center a h3{font-size: 2.1rem; font-weight: 700; } /* 221222 */ .sec03 .right .center a h3 span{ color: #353740; background-image: linear-gradient(transparent calc(100% - 1px), #019cb6 1px); background-repeat: no-repeat; background-size: 0% 100%; transition: 0.8s;; font-weight: 500;} .sec03 .right .linkList{ } .sec03 .right .linkList > li{border-radius: 10px; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.2);} /* 221222 */ .sec03 .right .linkList > li.linkList01{background-color: #deedf0; margin-bottom: 1.5rem; border:1px solid #c3d4d8;} /* 221222 */ .sec03 .right .linkList > li.linkList02{background-color: #f0e2ef; border:1px solid #d4c6d8;} /* 221222 */ .sec03 .right .linkList > li a{color: #353740; font-size: 2.1rem; display: block; width: 100%; font-weight: 500; position: relative; padding: 3rem 3.5rem 0 3.5rem; height: 14rem; line-height: 2.8rem; letter-spacing: -0.15rem; } .sec03 .right .linkList > li a:before{content: ''; width: 3.5rem; height: 3.3rem; display: block; position: absolute; right: 2.8rem; bottom: 2.8rem; background: url(../img/mobile/main/icon.png) no-repeat 0 -25rem; background-size: 50rem 50rem; } .sec03 .right .linkList > li.linkList02 a:before{ background: url(../img/mobile/main/icon.png) no-repeat -4rem -25rem; background-size: 50rem 50rem; width: 2.5rem;} .sec.sec04{margin-bottom: 10px; ;} .secBg{background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.04); padding: 5.5rem 4.4rem; overflow: hidden; } .sec04 .secBg > div{float: none; width: 100%; margin:0 0 5.1rem 0; padding-top: 0;} .sec04 .secBg > div:last-of-type{margin-bottom: 0;} .sec04 .secBg > div h2{margin-bottom: 2rem;} .sec04 .secBg > div dl{} .sec04 .secBg > div dl dt{font-size: 1.9rem; color:#353740; border-bottom: 1px solid #353740; padding: 0 0 1.6rem 0; margin-bottom: 1.6rem; } .sec04 .secBg > div dl dd{font-size:2rem; overflow: hidden; margin-bottom: 0.1rem; font-weight: 500; color: #000;} .sec04 .secBg > div dl dd:last-of-type{ margin-bottom: 0 } .sec04 .secBg > div dl dd > .tel{float: right; } .s04C.s04C1 {} .s04C.s04C1 dl dt {;} .sec04 .secBg > .s04C2{overflow: hidden; border-top:1px solid #e8ebf2 ; border-bottom:1px solid #e8ebf2 ; padding: 5.5rem 0;} .sec04 .secBg > .s04C2 h2, .s04C .sns{float: left; margin-bottom: 0;} .s04C .sns{margin-left: 2rem; overflow: hidden;} .s04C.s04C1 dl dt{width: auto;} .s04C.s04C3 a p{max-width: none;} .s04C .sns li{width: 3.9rem; height: 3.9rem; float: left; margin-left: 2.5rem;} .s04C .sns li:first-of-type{margin-left: 0;} .s04C .sns li > a{display: block; width: 100%; height: 100%; font-size: 0; } .s04C .sns li.facebook > a{width: 100%; display: block; background: url(../img/mobile/main/icon_facebook.png) no-repeat 0 0; background-size: 3.9rem;} .s04C .sns li.youtube > a{background: url(../img/mobile/main/icon_youtube.png) no-repeat 0 0; background-size: 3.9rem;} .sec04 .secBg > div.s04C3{margin-right: 0; } .s04C.s04C3 a { display: block; width: 100%; } .s04C.s04C3 a p{line-height: 2.6rem; font-size: 1.7rem; color: #5b5b5b;} .s04C.s04C3 a p .hoverLines{; padding-bottom: 0.2rem;} .s04C.s04C3 a h2{position: relative;} .s04C.s04C3 a h2 .arrow{display: inline-block; font-size: 1.6rem; position: relative;width: 10rem; position: absolute; top: 0.7rem; left: 11rem;} .s04C.s04C3 a h2 .arrow:before{display: block; background: url(../img/mobile/main/icon.png) no-repeat 0 -16.5rem; width: 37px; height: 20px; font-size: 1.6rem; position: absolute; right: -1rem; top: 0; content: ''; top: 0.17rem; background-size: 50rem 50rem;} .rightTop {; background: url(../img/mobile/main/sec03_bg.png) no-repeat 105% 0%; border: 0; } .rightTop > a{display: block; width: 100%; padding: 3.4rem 4.5rem; position: relative; overflow: hidden; border-radius: 10px; } .rightTop a p{font-size: 2.1rem; position: relative; padding-left: 5rem;} .rightTop p:before{content: ''; background: url(../img/mobile/main/icon.png) no-repeat 0 -60px; width: 3.3rem; height: 3.3rem; display: block; position: absolute; left: 0; top: 0; z-index: 2;} .rightTop p:after{content: ''; background: url(../img/mobile/main/icon.png) no-repeat 0 -60px; width: 3.8rem; height: 3.3rem; display: block; position: absolute; left: 0; top: 0; z-index: 2;} /* 팝업 */ .popup{background-color: #fff; border-radius: 10px;position: absolute; position: fixed; z-index: 102; top: 30%; left: 50%; padding: 3.5rem 4rem ; min-width: 54rem; margin-left: -27rem; display: none;} .popup.pw .pageCon{padding: 3.5rem 7rem 0 7rem;} .popup.pw .pageCon input[type="password"]{margin-bottom: 3.5rem} .popup .title{border-bottom: 2px solid #000; padding-left: 1.6rem;} .popup .title h3{color:#000; font-size: 2.5rem; font-weight: 700;margin-bottom: 0.6rem;} .popup table{margin: 2.5rem 0 2.5rem 0; border-top: 0; } .popup tr{border-bottom: 0;} .popup th{width: 12.5rem; text-align: left; padding-left: 1.5rem; font-weight: 500;} .btnDate{display: inline-block; background: url(../img/mobile/common/icon-common.png) no-repeat -8rem -2.4rem; width: 2.75rem; height: 2.8rem; margin-left: 0.6rem; font-size: 0; background-size: 20rem 20rem;} .popup td input[type="text"], .popup td input[type="password"]{width: 25rem;} .popup td *{vertical-align: middle;} .popup .btnWrap{margin: 0 auto;} /* footer */ .footer{background-color: #ffffff; position: relative; padding-top: 3rem; border-top: 1px solid #e8e9e9;} .footerTop {overflow: hidden; padding: 0 0 2.5rem 0;} .footerTop > ul{text-align: center; margin-bottom: 2.5rem} .footerTop > ul > li{display: inline-block; float: none; margin-right: 4rem} .footerTop > ul > li:last-of-type{margin-right: 0;} .footerTop > ul > li > a{padding: 0; font-size: 1.6rem; color:#353740; position: relative; display: block; font-weight: 500;} .footerTop > ul > li > a:before{width: 0; position: absolute; bottom: 0; left: 50%; height: 1px; background-color: #019cb6;display: block; content: '' } .footerTop .link{ width: 100%; text-align: center;} .footerTop .link > div{margin-left: 0; display: inline-block; overflow: visible; width: 100%; margin-right: 1rem; max-width: 55rem} .footerTop .link > div:last-of-type{margin-right:0} .footerTop .link .selectBox{color:#242427; cursor: pointer; display: inline-block; position: relative; overflow: visible; padding-top: 3px; width: 78%; z-index: 3; display: inline-block;} .footerTop .link .selectBox .selected{ border: 1px solid #333; font-size: 1.4rem; z-index: 10; display: inline-block; background: url(../img/common/footer-select.png) no-repeat 92% 50% #fff; border-radius: 20px ; padding: 1rem 1rem 1rem 1.8rem; text-align: left; width: 100%; } .footerTop .link div > ul{position: absolute; top: -14.4rem; background-color: #eff3f5; height: 22rem; border-radius: 10px 10px 20px 20px; border: 1px solid #d8dce4; padding: 2rem; overflow-y: auto; display: none;z-index: 2; text-align: left; width: 43rem; } .footerTop .link div > ul.on{display: block;} .footerTop .link div > ul >li{margin-bottom: 0.5rem;} .footerTop .link div > ul >li > a .hoverLine:before{ background-color: #22757e;} .footerTop .link div > ul >li > a{ color:#303134; font-size: 1.5rem;} .footerTop .link > div .btnGO{ border-radius: 20px; display: inline-block; width: 21%; text-align: center; padding: 1rem 0; border-radius: 50px; font-size: 1.4rem; color:#fff; background-color: #242427; width: 21.5%;} .footerbotm{ padding: 2.5rem 0 3.5rem 0 } .footerbotm p{color:#353740; font-size: 1.4rem; line-height: 2.7rem; letter-spacing: -0.05rem;} /* sub */ .sub{} .sub .location{padding: 1.2rem 0;} .sub .location ul{overflow: hidden;} .sub .location ul > li{float: left; position: relative; padding-right: 2.5rem; margin-right: 1.5rem;} .sub .location ul > li > a{display: block; width: 100%; font-size: 1.5rem; } .sub .location ul > li.home a{background: url(../img/mobile/sub/icon_home.png) no-repeat 0 60%; width: 1.7rem; font-size: 0; height: 2.1rem; background-size: 1.7rem 1.6rem;} .sub .location ul > li:last-of-type:before{display: none;} .sub .location ul > li:before{content: ''; background: url(../img/mobile/sub/icon_loca.png) no-repeat 0 0; display: block; width: 0.7rem; height: 1.2rem; position: absolute; right: 0; top: 50%; margin-top: -0.5rem; background-size: 0.7rem; } .sub .contents{padding-bottom: 7rem;} .sub .contents .inner{overflow: visible} .sub .contents .pageTit{text-align: center; margin: 3rem 0 6rem 0;} .sub .contents .pageTit > h2{font-weight: 700; font-size: 4rem;} .sub .contents .pageTit > h2 + p{font-size: 1.7rem;} .pageSch{background-color: #f9f9f9; border: 1px solid #e8ebf2; padding: 2.7rem 4.2rem 2.3rem 4.2rem; margin-bottom: 2rem; overflow: hidden; } .cateBox{padding-top: 0.4rem;} .cate{overflow: hidden; text-align: center; margin-bottom: 2.5rem;} .cate > li{display: inline-block; padding: 0 0.5rem; position: relative; } .cate > li:last-of-type:before{display: none;} .cate > li > a{color:#000; font-size: 1.5rem; padding: 0.5rem 2rem ; display: block; } .cate > li:before{content: ''; display: block; width: 1px; height: 1.5rem; background-color: #b4b4b4; position: absolute; right: 0; top: 1rem;} .cate > li.on > a, .cate > li:hover > a{color:#fff; border-radius: 50px; background-color: #353740; transition: 0.5s ease; font-weight: 400;} .localBtn{width: 100%; border-radius: 10px; margin-bottom: 2.5rem;border-bottom: 1px solid #f2f3f7;} .localBtn > a{padding: 1.5rem 0 ;cursor: pointer; text-align: center; font-size: 1.5rem; border-top: 1px solid rgba(0,0,0,0); border-bottom: 1px solid rgba(0,0,0,0); border-left: 1px solid rgba(0,0,0,0); width: calc(100% / 8); display: inline-block; border-left: 1px solid #f2f3f7; border-top: 1px solid #f2f3f7; margin-left: -0.13rem;} .localBtn > a.on{color: #fff; background-color: #019cb6; border: 1px solid #019cb6; } /*.localBtn > a.on:hover{color: #fff; }*/ .localBtn > a:first-of-type{border-radius: 10px 0 0 0 ;} .localBtn > a:nth-of-type(8){border-radius: 0 10px 0 0 } .localBtn > a:nth-of-type(17){border-radius: 0 0 0 10px } .localBtn > a:nth-of-type(8n){border-right: 1px solid #f2f3f7;} .localBtn > a:last-of-type{border-radius: 0 0 10px 0 ;;} .localBtn > a span{position: relative;} .localBtn > a span:before{content: ''; display: block; left: 50%; position: absolute; bottom: -5px; border-radius: 50px; background-color: #bcdfe9 ; width: 0; height: 2px;} .result{border-bottom: 1px solid #e2e2e2; padding-bottom: 1rem; margin-bottom: 3.4rem; overflow: hidden;} .result > p{padding-left: 0.8rem; position: relative; font-size: 1.8rem; color: #000; float: left;} .result > p:before{content: ''; display: block; width: 0.4rem; height: 0.4rem; background-color: #000; border-radius: 50px; position: absolute; left: 0; top: 50%; margin-top: -0.2rem;} .result > .bdBtn{float: right;} .result > .bdBtn a{display: inline-block; padding: 0.5rem 2.2rem; font-size: 1.5rem; color: #333; border-radius: 50px; border: 1px solid #5b5b5b; background-color: #fff; position: relative;} .result > .bdBtn a span {position: relative; padding-left: 1.5rem;} .result > .bdBtn a span:before {display: block; content: ''; width: 1.1rem; height: 1.3rem; background: url(../img/mobile/sub/icon.png) no-repeat -6rem -6.8rem; position: absolute; left: 0; top: 0.45rem; } .result > .bdBtn a span:before {display: block; content: ''; width: 1.1rem; height: 1.3rem; background: url(../img/mobile/sub/icon.png) no-repeat -6rem -6.8rem; position: absolute; left: 0; top: 0.45rem; background-size: 10rem 10rem} .result > .bdBtn a.write{background-color: #353740; margin-left: 0.5rem; color: #fff;} .result > .bdBtn a.write span {padding-left: 1.8rem;} .result > .bdBtn a.write span:before {background-position: -6rem -8.5rem; width: 1.4rem; height: 1.4rem;} /* 새소식 */ .sub .noticeWrap{} .sub .noticeWrap > a {border: 1px solid #e8ebf2; transition: 0.5s ease; margin-bottom: 2.8rem; height: 19.5rem; position: relative;} .sub .noticeWrap > a:last-of-type {margin-bottom: 0;} .sub .noticeWrap a > p{font-size: 2.2rem; height: 7rem; -webkit-line-clamp:2; margin-bottom: 2.5rem; line-height: 3.2rem; margin-top: 2rem;} .sub .noticeWrap a > span.date{display: block; text-align: right; padding-right: 0; line-height: 1.3rem; padding: 0; right: 2rem; bottom: 2rem; font-size: 1.5rem;} .schBox{ text-align: center; width: 100%; max-width: 60rem; margin: 0 auto; color: #a3a2a2; position: relative; padding-right: 4rem; } .schBox select{border-bottom: 2px solid #000; width: 30%; background: url(../img/mobile/sub/icon_select.png) no-repeat 100% 50%; padding: 4px 7px 11px 7px; margin-right: 10px; font-size: 1.6rem; background-size: 1.6rem auto;} .schBox select:focus{border-bottom: 3px solid #000; } .schBox .inp{; border-bottom: 2px solid #000; display: inline-block; position: relative;text-align: left; width: 64.5%;} .schBox input[type="text"]{border: none; padding: 4px 7px 11px 7px; background: none; position: relative; width: 78%; font-size: 1.6rem; ;} .schBox input[type="text"]::placeholder{color:#b4b4b4 !important} .schBox .btnSrc{border-radius: 50px; width: 3.9rem; height: 3.9rem; background-color: #019cb6; position: relative; font-size: 0; position: absolute; bottom: 5px; right: 0;} .schBox .btnSrc:before{display: block; background: url(../img/mobile/sub/icon_sub_sch.png) no-repeat 0 0; content: ''; position: absolute; left: 50%; top: 50%; width: 1.8rem; height: 1.8rem; margin-left: -0.9rem; margin-top: -0.9rem; background-size: 1.8rem 1.8rem ; } .schBox .btnSrc:focus{outline: 1px solid #019cb6;} .schBox .btnRefsh{border-radius: 50px; width: 3.9rem; height: 3.9rem; background-color: #353740; position: relative; font-size: 0; margin-left: 1rem; position: absolute; right: 0rem; bottom: 0.8rem; } .schBox .btnRefsh:focus{outline: 1px solid #353740;} .schBox .btnRefsh:before{display: block; background: url(../img/mobile/sub/icon.png) no-repeat -2rem -2.2rem; content: ''; position: absolute; left: 50%; top: 48%; width: 1.8rem; height: 1.8rem; margin-left: -0.9rem; margin-top: -0.7rem; background-size: 10rem 10rem;} /* 페이징 */ .pageBtom {position: relative; text-align: right;} .pageList {text-align: center; margin-top: 3rem;} .pageList * {vertical-align: middle;} .pageList a{font-size: 1.7rem; padding: 0 1.2rem ; height: 3.7rem; line-height: 3.1rem; } .pageList a:hover, .pageList .on{color: #26adc7;} .pageList a.btnPPrev, .pageList a.btnPrev, .pageList a.btnNext, .pageList a.btnNNext{ width: 3.7rem; border-radius: 100%; background-color: #fff; border: 1px solid #e2e2e2;} .pageList a{ display: inline-block; margin-right: 5px;} .pageList a.btnPPrev span{background: url(../img/mobile/sub/icon.png) no-repeat 0 0; display: inline-block; width: 1.1rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem;} .pageList a.btnPrev span{background: url(../img/mobile/sub/icon.png) no-repeat -1.5rem 0; display: inline-block; width: 0.8rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem} .pageList a.btnNext span{background: url(../img/mobile/sub/icon.png) no-repeat -3rem 0; display: inline-block; width: 0.6rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem} .pageList a.btnNNext span{background: url(../img/mobile/sub/icon.png) no-repeat -4.5rem 0;display: inline-block; width: 1.1rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem} .writeBtn{color:#fff;background-color: #019cb6; border-radius: 50px; font-weight: 400; font-size: 1.7rem; text-align: center; padding: 0.8rem 4rem 1.2rem 4rem; margin-right: 1rem; width: 14rem ; display: inline-block; margin-top: 1.5rem;} .writeBtn > span{ position: relative; padding-left: 2.3rem;} .writeBtn > span:before{ content: ''; display: inline-block; position: absolute; left: 0; background: url(../img/mobile/sub/icon.png) no-repeat -6rem 100%; top: 0.2rem; height: 2.1rem; width: 1.9rem; background-size: 10rem 10rem;} /* 새소식 보기 */ .viewTitle{border-top: 1px solid #353740; } .viewTop{background-color: #f9f9f9; padding: 2.4rem 2.5rem 1.4rem 2.5rem; overflow: hidden;} .tag{text-align: center;} .tag > span{display: inline-block; border-radius: 10px 10px 10px 0; font-size: 1.3rem; padding: 0.3rem 2.4rem; margin-right: 0.5rem;} .tag > span.category{ background-color: #353740; color:#fff; border: 1px solid #353740;} .tag > span.district{ border: 1px solid #353740; color:#353740; background-color: #fff;} .viewTop .title{text-align: center; color:#000; font-size: 2.8rem; font-weight: 700; margin: 1.5rem 0 1.9rem 0;} .viewbotm{border-bottom: 1px solid #e2e2e2; padding: 1.9rem 2.4rem ;} .viewCon{border-top: 1px solid #e2e2e2; padding: 3rem 2.4rem 2.4rem 2.4rem ; font-size: 1.5rem;} .shareBox{display: inline-block; float: right; } .shareBox *{vertical-align: middle;} .shareBox > dl:first-of-type{margin-left: 0;} .shareBox > dl{display: inline-block; color:#5b5b5b; font-size: 1.5rem; margin-left: 4rem;} .shareBox > dl > dt, .shareBox > dl > dd{display: inline-block;} .share{margin-top: 0.5rem; display: inline-block;} .share > span{display: inline-block;width: 3rem; height: 3.5rem; background: url(../img/mobile/sub/icon.png) no-repeat 0 -3.9rem ; font-size: 0; cursor: pointer; margin-right: 1rem; background-size: 10rem 10rem ;} /*20221024 icon_font_link추가*/ .share > span.link{display: inline-block;width: 3rem; height: 5.5rem; background: url(../img/mobile/sub/icon_font_link.png) no-repeat ; font-size: 0; cursor: pointer; margin-right: 1rem; background-size: 75%; background-position: center;} .share > span.facebook{background-position: -3rem -3.9rem;} .files{text-align: left;width: 100%; } .files * {font-size: 1.5rem; } .files dt{vertical-align: top; margin-right: 2.5rem; color:#000; display: inline-block; padding: 0.2rem 0; font-weight: 500;} .files dd{width: 100%; display: inline-block; } .files dd ul >li {display: block; position: relative; padding-left: 2rem; overflow: hidden;} .files dd ul >li:before{content: ''; display: block; width: 1.6rem; height: 1.6rem; background: url(../img/mobile/sub/icon-files.png) no-repeat 0 0; position: absolute; left: 0; top: 0.7rem; color: #5b5b5b; background-size: 1.6rem 1.6rem; } .files dd ul >li a{display: block; color: #5b5b5b; overflow: hidden; width: 100%; padding: 0.2rem 0;} .files dd ul >li a .toe{height: 100%; padding: 0.2rem 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; float: left; } .files dd ul >li a .hoverLine:before{display: block; content: ''; width: 0; height: 1px; background-color: #019cb6; bottom: -2px;} .files dd ul >li a .size{float: right; position: relative; display: block; padding: 0.2rem 0;} .files dd ul >li a .size:before{display: block; content: ''; width:0; height: 1px; background-color: #019cb6; bottom: 0px;position: absolute; left: 50%;} /*.files dd ul >li a:hover .size:before{left: 0; width: 100%; transition: 0.5s ease}*/ .viewCon{text-align: left; border-bottom: 1px solid #e2e2e2;} .viewCon > p{font-size: 1.6rem; color:#000; font-weight: 400; line-height: 2.8rem; margin-bottom: 3rem;} .btnWrap{text-align: center; margin: 3rem 0; display: flex; justify-content:center; align-items:center;} .btnWrap > a{display: inline-block; color:#fff;background-color: #353740; border-radius: 50px; font-weight: 400; font-size: 1.7rem; text-align: center; padding: 0.7rem 2.5rem 1.1rem 2.5rem; margin-right: 1rem; width: 13rem} .btnWrap > a *{vertical-align: middle;} .btnWrap > a span { position: relative; padding-left: 2.5rem; } .btnWrap > a span:before {content: ''; display: block; position: absolute; left: 0; top: 0.4rem; width: 1.6rem; margin-right: 0.5rem; background-size: 1.6rem 1.6rem} .btnWrap > a span *{vertical-align: middle; } .btnWrap > a:last-of-type{margin-right: 0;} .btnWrap > a.list span{} .btnWrap > a.list span:before{content: ''; display: inline-block; height: 1.6rem; background: url(../img/mobile/sub/icon_list.png) no-repeat 0 0; top: 0.7rem } .btnWrap > a.cancle {background-color: #fff; color: #353740; border: 1px solid #353740; } .btnWrap > a.check span:before{ height: 1.6rem; background: url(../img/mobile/sub/icon_check.png) no-repeat 0 0; top: 0.6rem; background-size: 1.6rem 1.6rem } .btnWrap > a.cancle span:before{height: 1.9rem; background: url(../img/mobile/sub/icon_cancle.png) no-repeat 0 0;background-size: 1.7rem 1.6rem; width: 1.7rem; top: 0.5rem;} .btnWrap > a.search span:before{ height: 1.75rem; background: url(../img/mobile/sub/icon.png) no-repeat -4rem 100%; background-size: 10rem 10rem;} .btnWrap > a.edit span:before{ height: 1.7rem; background: url(../img/mobile/sub/icon.png) no-repeat -6rem -8.5rem; width: 1.7rem; background-size: 10rem 10rem; top: 0.5rem;} .btnWrap > a.edit span{padding-left: 1.8rem;} .loginWrap .btnWrap > a.ipin{background-color: #019cb6; } .btnWrap > a.replyBtn span:before{ height: 1.6rem; background: url(../img/mobile/sub/icon.png) no-repeat -2.1rem -6.9rem; width: 1.7rem; top: 0.5rem; background-size: 10rem 10rem;} .loginWrap .btnWrap > a span:before{ height: 1.9rem; background: url(../img/mobile/sub/icon.png) no-repeat -8.5rem 0; } .btnWrap > .refresh {background-color: #5b5b5b ; display: inline-block; color:#fff; border-radius: 50px; font-weight: 400; font-size: 1.7rem; text-align: center; padding: 0.8rem 4rem 1.2rem 4rem; margin-right: 1rem; } .btnWrap > a.refresh span:before{ height: 1.6rem; background: url(../img/mobile/sub/icon.png) no-repeat -2rem -2.2rem; width: 1.7rem; top: 0.5rem; background-size: 10rem 10rem;} .viewList{border-top: 1px solid #e2e2e2 ;} .viewList > dl * {vertical-align: middle;} .viewList > dl{border-bottom: 1px solid #e2e2e2 ; font-size: 1.5rem; padding: 1.4rem 2rem;} .viewList > dl dt{color: #353740; border-right: 1px solid #dadfeb; padding-right: 2rem; width: 10%; text-align: center; font-weight: 500;} .viewList > dl dt, .viewList > dl dd{display: inline-block;} .viewList > dl dd {width: 88%;;} .viewList > dl dd > a{display: block; width: 100%; color:#5b5b5b; padding-left: 3rem ;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*.viewList > dl dd > a:hover{color: #019cb6;}*/ table{width: 100%; display: table; border-top: 1px solid #353740; border-collapse: collapse} /**20230405 긴급돌봄 필수값체크 추가*/ .write th{padding:8px 5px 8px 20px;} .write .strong{background-image:url(../img/bullet_import.png);background-repeat:no-repeat; background-position:left 20px;} /*.tbody{display:;}*/ tbody{display: table-row-group} tr{display: table-row; border-bottom: 1px solid #e2e2e2; width: 100%; padding: 0.4rem 0; } th{font-weight: 500; font-size: 1.5rem; text-align: center; width: 20%;} th, td{display: table-cell; vertical-align: middle; height: 5rem; padding: 0.5rem 0;} td input[type="text"], td input[type="password"], input[type="password"]{border-radius: 5px; border: 1px solid #b4b4b4; height: 4rem; padding: 0 1rem; width: 100%; font-size: 1.5rem;} td input[type="text"]:focus, td input[type="password"]:focus, tr .writeBox:focus{border: 1px solid #019cb6; box-shadow: 0 0 0 1px #019cb6 inset } td input[type="password"] + span{font-size: 1.4rem; display: block;} td input[type="password"]{font-size: 3rem;} td input[type="password"]{} td input.maxw{max-width: 31rem; margin-right: 1rem;} tr .writeBox{border: 1px solid #d1d1d1 ; width: 100%; margin: 0 5px; padding: 1rem; font-size: 1.5rem;} input[type="radio"] + label{font-size: 1.5rem; color: #333; font-weight: 400;} .fileBox{position: relative;} .fileBox input[type="file"]{ position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;} .fileBox *{vertical-align: middle;} .fileBox .upload-name{display: inline-block; vertical-align: middle; border: 2px dashed #92aab0; text-align: center;width: calc(100% - 100px);} .fileBox label{display: inline-block; color: #fff; background-color: #353740; border-radius: 50px; font-size: 1.3rem; padding: 0.5rem 1.8rem ; margin: 0 0 0 1rem ; cursor: pointer} .radioWrap{display: inline-block; position: relative; margin-right: 4rem; } .radioWrap *{vertical-align: middle;} .radioWrap input[type="radio"]{position: absolute; width: 1.9rem; height:1.9rem; overflow: hidden; background: url(../img/mobile/common/icon-radio.png) no-repeat 0 0; background-size: 1.9rem 5.7rem; z-index: 3; -webkit-appearance: none; position: relative; cursor: pointer; -moz-appearance: none;; appearance:none; ; top: 0; left: 0;} .radioWrap + .radioWrap {margin-left: 3rem;} .radioWrap input[type="radio"]:focus + label{ color: #019cb6;} .radioWrap input[type="radio"]:focus + label:before{width: 100%; left: 0;} .radioWrap input[type="radio"] + label{position: absolute; z-index: 2; left: 2.4rem; top: -0.1rem; cursor: pointer} .radioWrap input[type="radio"] + label:before{content: ''; background-color: #019cb6; height: 1px; width: 0; transition: 0.5s ease; position: absolute; bottom: 0; left: 50%;} .radioWrap input[type="radio"]:checked{background-position: 0 -1.9rem; z-index: 1;} /* 서식 */ .noticeWrap.sub302 a{height: auto} /* 센터자료 */ .topNt{background-color: #f6f6f6; font-size: 1.6rem; color:#353740; padding: 2rem ; margin-bottom: 2rem; border-radius: 10px 10px 10px 0;} .topNt ul{background: url(../img/mobile/sub/icon_topnt.png) no-repeat 0 0; padding-left: 7rem; width: 100%; margin: 0 auto; background-size: 5rem} .topNt ul li{line-height: 2.4rem; font-weight: 400; font-size: 1.5rem; margin-bottom: 0.5rem;} .topNt ul li:last-of-type{margin-bottom: 0;} /* 유용한 정보 */ .acodian-wrap.sub203 .acodian-q p, .acodian-wrap.sub203 .acodian-a p{padding-left: 0.8rem;} .acodian-wrap.sub203 .acodian-q p:before, .acodian-wrap.sub203 .acodian-a p:before{display: none;} .acodian-box{; font-size: 1.6rem; border-radius: 10px; border: 1px solid #e6e9f0; box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.08) ; margin-bottom: 6px; display: block;} /*.acodian-box:hover,*/ .acodian-box.on {border: 1px solid #019cb6; } /*.acodian-box:hover .acodian-q{color: #019cb6; }*/ .acodian-q{cursor: pointer; font-weight: 500} .acodian-a, .acodian-q{padding: 2.1rem 2.6rem 2.3rem 2rem; border-radius: 10px;} .acodian-q p:after{content: ''; display: block; width: 1.6rem; height: 0.8rem; position: absolute; right: 0; top: 50%; margin-top: -0.5rem; background: url(../img/mobile/sub/icon_upDown.png) no-repeat 0 0; background-size: 1.6rem 2.4rem;} /*.acodian-q:hover p:after{background-position: 0 -16px;}*/ .acodian-box.on .acodian-q p{background-position: 0 -8px; color: #019cb6; background-size: 1.6rem 2.4rem} .acodian-box.on .acodian-q p:after{background-position: 0 -0.8rem;} .acodian-q > P{; position: relative; padding-left: 3.5rem; padding-right: 3rem; } .acodian-a > p{; position: relative; padding-left: 3.5rem; } .acodian-q p:before{content: 'Q'; position: absolute;left: 0; top: 0; color: #019cb6; font-weight: 700; } .acodian-a .ans:before{content: 'A'; position: absolute;left: 0; top: 0; color: #019cb6; font-weight: 700; } .acodian-a{background-color: #f9f9f9; border-top: 1px solid #e2e2e2; border-radius: 0 0 10px 10px ; display: none;} /* 용어사전 */ .wordBox{background-color: #f5f7f8; border-radius: 10px; border: 1px solid #e8ebf2; text-align: center; padding: 4rem 7.5rem; margin-bottom: 3.5rem;} .wordBox .schBox .btnRefsh{position: inherit} .wordBox .schBox .inp{max-width: 500px; padding-top: 1.5rem;} .wordBox .schBox{float: none; text-align: center; display: inline-block; padding-right: 0;} .selected-word{color:#fff; font-weight: 700; font-size: 1.9rem; text-align: center; border-radius: 50px; background-color: #019cb6; padding: 1.35rem 0; margin-bottom: 1.5rem;} .words{ margin-top: 4.5rem; text-align: left;} .words > span.korean, .words > span.english{background-color: #353740; color: #fff; border: 1px solid #353740; display: block; border-radius: 50px; font-size: 1.4rem; text-align: center; padding: 0.9rem 0; margin-bottom: 5px;} .words > a{display: inline-block; background-color: #fff; border-radius: 50px; font-weight: 500; font-size: 1.4rem; color: #333; box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.08) ; text-align: center;border: 1px solid #e8ebf2; padding: 0.8rem 0 ; margin-right: 2px; margin-top: 5px; /*max-width: 60px; */ text-align: center; width: calc( 100% / 15); } .words > a:hover{border: 1px solid #019cb6; transition: 0.5s ease; color:#019cb6} .words > a.active{background-color: #019cb6; color: #fff; border: 1px solid #019cb6;} /* 로그인 */ .loginWrap{background-color: #f5f7f8; border: 1px solid #e8ebf2; border-radius: 10px; font-size: 1.7rem; padding: 6rem 3rem;} .loginWrap .text{text-align: center; font-weight: 400;} .loginWrap .table{ border-spacing: 2rem; margin-top: 6rem;} .loginWrap .table .text{text-align: left;} .loginWrap .table .td{ background-color: #fff; border: 1px solid #e8ebf2; border-radius: 10px; padding: 3rem 4rem; margin-bottom: 1rem; text-align: left;} .loginWrap .table .td .text{ background: url(../img/mobile/sub/icon_log.png) no-repeat 0 0; padding-left: 8.3rem; line-height: 2.6rem; background-size: 6.8rem auto} .loginWrap .table .td > h4{margin-bottom: 2rem; color: #000000;position: relative; padding-left: 8px; } .loginWrap .table .td > h4:before{content: ''; display: block; width: 4px; height:4px; background-color: #000000; position: absolute; top: 50%; left: 0; border-radius: 10px; margin-top: -2px; } .table .td p{ font-size: 1.5rem; } .table .td p.ref{ font-size: 1.4rem; } .hiperLink{text-align: right; margin-top: 3.5rem;} .hiperLink > a{display: inline-block; text-align: center; color: #019cb6; border: 1px solid #019cb6; border-radius: 50px; font-size: 1.5rem; padding: 0.3rem 1.5rem;} .loginWrap .tar{font-size: 1.4rem; color: #333333; font-weight: 400; margin-right: 2rem;} /* 기타 */ /*.tab{ width: 100%; margin-bottom: 4rem; border-bottom: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; background-color: #f7f7f7;}*/ /*.tab >div{background-color: #f7f7f7; text-align: center; display: inline-block; font-weight: 500; color: #5b5b5b; font-size: 1.4rem; padding:2rem; cursor: pointer; border-top: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2; border-bottom: 2px solid #1a9ccb; width: 33.25%; margin-left: -1px;}*/ .tab >div:first-of-type{ border-left: 1px solid #e2e2e2; } .tab >div.on{color: #1a9ccb; border: 1px solid #1a9ccb; background-color: #fff; } .tabCon{font-size: 1.6rem ; color: #333;} .tabCon .graybox{border-radius: 10px 10px 10px 0; background-color: #f6f6f6; padding: 3rem; font-weight: 400; margin-bottom: 3rem; line-height: 2.5rem;} .blu{color: #1a9ccb;} .tabCon .con{} .tabCon .con:last-of-type{border-bottom: 0;} .tabCon .con{border-bottom: 1px solid #e8ebf2 ; margin-bottom: 3rem; padding-bottom: 3rem; } .tabCon .con h3{background: url(../img/mobile/sub/icon_tit.png) no-repeat 0 0.65rem; padding-left: 1.5rem; margin-bottom: 1rem; font-size: 1.9rem;} .tabCon .con p + p{margin-top: 1rem;} .tabCon .con p + h3, .tabCon .con ul + h3{margin-top: 5rem;} .tabCon .con dl{margin-top: 3rem;} .tabCon .con dl dt{color: #019cb6; margin-bottom: 5px;} .tabCon .con dl dd{} .tabCon .con .org >span{color: #eb6a2a; margin-right: 2rem; } .tabCon .con .ref{color:#666; font-size: 1.5rem} .tabCon .con .tita{display: inline-block; width:8.2rem} .tabCon .con .mt30{margin-top: 3rem;} .stepWrap{margin-top: 5rem; text-align: center;} .steps{text-align: center; margin-top: 1.8rem; max-width: 70rem;} .steps > span{color: #fff; background: #01bace; height: 5.5rem; display: inline-block; line-height: 5.5rem; width: 20rem; position: relative; margin-right: 5px; padding-left: 28px;} .steps > span:before{ content: ''; border-top:28px solid transparent; border-bottom:28px solid transparent; border-right: 38px solid none ; border-left: 28px solid #fff; z-index: 1; position: absolute; top: 0; left: 0;} .steps > span:after{content: ''; position: absolute; right: -28px; top: -1px; border-top:28px solid transparent; border-bottom:28px solid transparent; border-right: 38px solid none ; border-left: 28px solid #01bace ; z-index:2; } .steps > span:nth-of-type(2):After{ border-left: 28px solid #018f98;} .steps > span:nth-of-type(3):After{ border-left: 28px solid #575b63;} .steps > span:nth-of-type(4):After{ border-left: 28px solid #002e52;} .steps> span:nth-of-type(2){background: #018f98; ;} .steps> span:nth-of-type(3){background: #575b63; ;} .steps> span:nth-of-type(4){background: #002e52; ;} .stepWrap .arrow{background: url(../img/mobile/sub/bg_arrow.png) no-repeat 15px 50%; display: block; width: 873px; margin: 18px auto 0 auto;} .stepWrap .arrow > em{background-color: #fff; display: inline-block; padding: 0 2rem ;} /* 기관찾기 */ /* 기관찾기 */ .checkWrap{display: inline-block; position: relative; margin-right: 4rem; } .checkWrap *{vertical-align: middle;} .checkWrap input[type="checkbox"]{position: absolute; width: 1.9rem; height:1.9rem; overflow: hidden; background: url(../img/mobile/common/icon-radio.png) no-repeat 0 0; background-size: 1.9rem 5.7rem; z-index: 3; -webkit-appearance: none; position: relative; cursor: pointer; -moz-appearance: none;; appearance:none; ; top: 0; left: 0;} .checkWrap + .checkWrap {margin-left: 3rem;} .checkWrap input[type="checkbox"]:focus + label{ color: #019cb6;} .checkWrap input[type="checkbox"]:focus + label:before{width: 100%; left: 0;} .checkWrap input[type="checkbox"] + label{position: absolute; z-index: 2; left: 2.4rem; top: -0.1rem; cursor: pointer; font-size: 1.5rem; line-height: 2.8rem;} .checkWrap input[type="checkbox"] + label:before{content: ''; background-color: #019cb6; height: 1px; width: 0; transition: 0.5s ease; position: absolute; bottom: 0; left: 50%;} .checkWrap input[type="checkbox"]:checked{background-position: 0 -1.9rem; z-index: 1; background-size: 1.9rem 5.7rem;} .noticeWrap.sub201{} .noticeWrap.sub201 a > p{height: 10rem; font-size: 2.2rem; -webkit-line-clamp:3; } .noticeWrap.sub201 > a{ margin-bottom: 25px; padding: 3rem; height: 33rem; ;} /*.noticeWrap.sub201 > a:hover span.detail{border: 1px solid #019cb6; transition: 0.5s ease; background-color: #019cb6; color: #fff;}*/ /*.noticeWrap.sub201 > a:hover span.region{color: #019cb6;;}*/ /*.noticeWrap.sub201 > a:hover span.region:before{background-color: #019cb6;;}*/ /*.noticeWrap.sub201 > a:nth-of-type(3n){margin-right: 0;}*/ /*.noticeWrap.sub201 > a:nth-of-type(4n){margin-right: 30px;}*/ .noticeWrap.sub201 a > span.detail{display: block; text-align: center; width: 100%; border-radius: 10px; font-size: 1.6rem; font-weight: 400; background-color: #f2f3f7; border: 1px solid #e8ebf2; padding: 1.5rem 0;} .noticeWrap.sub201 a > span.region:before{display: block; content: ''; width: 3px; height: 3px; background-color: #333; position: absolute; left: 0; top: 0.8rem; } .noticeWrap.sub201 a > span.region{display: block; text-align: center; width: 100%; font-size: 1.6rem; width: 100%; margin-bottom: 2rem; text-align: left; font-size: 1.5rem; padding: 0; position: relative; padding-left: 0.8rem; margin-top: 1.7rem;} .srcTit{font-size: 1.8rem; color: #000; font-weight: 600; display: block; margin-bottom: 1.8rem; } .srcTit:before{content: ''; display: inline-block; background-color: #f5f7f8; width: 0.6rem; height: 0.5rem; border-radius: 50px; border: 5px solid #019cb6; margin-right: 2px;} .pageSch .checkWrap{position: absolute; right: 7rem ; top: 5.2rem} .sub202 .pageSch{padding: 5rem 4.9rem 1.7rem 4.9rem ; position: relative; border-radius: 10px; background-color: #f5f7f8;} .sub202 .btnWrap {margin-top: 3rem;} .sub202 .btnWrap a{width: 21rem;} .s202{overflow: hidden;;} .s202 li{ border: 1px solid #e8ebf2; float: left; border-radius: 10px; background-color: #fff; width: 32%; text-align: center; margin-right: 2%; margin-bottom: 0.7rem;} .s202 li:nth-of-type(3n){ margin-right: 0} .s202 li.active, .s202 li:hover{border: 1px solid #019cb6; ; box-shadow: 0 0 0 1px #019cb6 inset} .s202 li.active a, .s202 li:hover a{color: #019cb6;} .s202 li.active a span:before{width: 100%; left: 0;} .s202 li br{display: none;} .s202 li > a{font-size: 1.6rem; display: block; width: 100%; font-weight: 400; padding: 1.1rem 0;} .srcDiv{font-size: 1.6rem; } .srcDiv:nth-of-type(2){margin-top: 3rem; padding-bottom: 3rem; border-bottom: 2px solid #353740;} .srcDiv select, .srcDiv input[type="text"]{border: 1px solid #e8ebf2; background-color: #fff; border-radius: 10px; font-size: 1.6rem; }.srcDiv select:focus, .srcDiv input[type="text"]:focus{border: 1px solid #019cb6; } .srcDiv select{width: 49.2%; margin-right: 0.5%; background: url(../img/mobile/sub/icon_select.png) no-repeat 97% 50% #fff ; padding: 1.1rem 1rem; background-size: 1.4rem;} /* 221222 */ .srcDiv input[type="text"]{padding: 0.9rem 1rem; width: 100%; margin-top: 1rem} .srcDiv input[type="text"]::placeholder{color:#b4b4b4 ;} :-ms-input-placeholder { color: #b4b4b4 !important} .tagWrap{margin-top: 2.9rem;} .viewUp{border-color: #000; border-radius: 10px; border: 1px solid #e2e2e2; padding: 4rem; overflow: hidden; margin-bottom: 4.8rem;} .viewDown{ overflow: hidden;} .viewDown .tar{font-size: 1.6rem; color: #333; margin-bottom: 1.2rem;} .viewL{background-color: #f5f7f8; border-radius: 10px; border: 1px solid #e8ebf2 ; padding: 2.8rem 3.4rem; min-height: 23rem; margin-bottom: 2rem; text-align: center;} .viewL:last-of-type{margin-right: 0;} .viewL dt{ font-size: 2rem; font-weight: 500; color: #000; padding-left: 2rem; position: relative; height:5rem; padding-left: 8rem; padding-bottom: 1rem; text-align: center; display: inline-block; margin: 0 auto;} .viewL dt *{vertical-align: middle;} .viewL dt:before{content: ''; background: url(../img/mobile/sub/icon_201_01.png) no-repeat 0 0; width: 4.7rem; height: 4.2rem; display: inline-block; position: absolute; left: 2rem; top: -0.7rem; background-size: 4.7rem;} .viewL:nth-of-type(2) dt:before{ background: url(../img/mobile/sub/icon_201_02.png) no-repeat 0 0; background-size: 4.7rem; background-size: 4.7rem;} .viewL:nth-of-type(3) dt:before{ background: url(../img/mobile/sub/icon_201_03.png) no-repeat 0 0; background-size: 4.7rem; height: 4.8rem;} .viewL dd{padding-top: 2.7rem; text-align: left; border-top: 1px solid #353740;} .viewL dd ul{} .viewL dd ul li{color: #333333; font-size: 1.7rem; position: relative; padding-left: 8px; line-height: 2.5rem; margin-bottom: 0.5rem;} .viewL dd ul li:before{content: ''; width: 3px; height: 3px; background-color: #333; display: block; position: absolute; left: 0; top: 1.2rem;} .viewTopD{} .viewTopD .left{} .tagWrap{margin-bottom:1rem;} .viewTopD .left p.fir{font-size: 1.7rem; color: #333; padding-top: 1.9rem;} .viewTopD .left .title{color: #000; font-size: 3rem; font-weight: 600; line-height: 3rem; margin: 1.8rem 0 2.3rem 0;} .viewTopD .left p{font-size: 1.6rem; color: #666;} .viewTopD .right{ margin-top: 0.5rem; overflow: hidden; display: flex} .viewTopD .right .circle{border-radius: 50px; background-color: #f5f7f8; text-align: center; color: #353740; font-size: 1.5rem; padding: 1.3rem 0;width: 49.5%; margin-right: 1%; font-weight: 500; } .viewTopD .right .circle > span{line-height: 1.5rem;} .viewTopD .right .circle:last-of-type{ margin-right: 0;} .viewTopD .right .circle * {vertical-align: middle;} .viewTopD .right .circle > span img{height: 2.4rem; margin-right: 0.5rem;} .viewTopD .right .circle p{font-size: 1.7rem; margin-top: 1.3rem;} /* 상담 */ .viewCon.replyCon{border-top: 0;} .reply{margin-bottom: 2.2rem;} .reply > span{color: #fff; font-size: 1.5rem; text-align: center; display: inline-block; padding: 0.5rem 3.5rem; background-color: #019cb6; border-radius: 20px; margin-left: 1rem; } .replyCon .files{border-top: 1px solid #e2e2e2; padding: 1.2rem 0;} .pwWrap{background-color: #fff; border-radius: 10px; } /* 기타 */ .tab{display: table; table-layout: fixed; width: 100%; margin-bottom: 4rem; } .tab >div{background-color: #f7f7f7; text-align: center; display: table-cell; font-weight: 500; color: #5b5b5b; font-size: 1.6rem; padding: 1.2rem; cursor: pointer; border-top: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; border-bottom: 2px solid #1a9ccb;} .tab >div:first-of-type{ border-left: 1px solid #e2e2e2; } .tab >div.on{color: #1a9ccb; border-top: 2px solid #1a9ccb; border-left: 2px solid #1a9ccb; border-right: 2px solid #1a9ccb; background-color: #fff;border-bottom: none; } .tabCon{font-size: 1.6rem ; color: #333;} .tabCon .graybox{border-radius: 10px 10px 10px 0; background-color: #f6f6f6; padding: 3rem; font-weight: 400; margin-bottom: 3rem; line-height: 2.5rem;} .blu{color: #1a9ccb;} .tabCon .con{} .tabCon .con:last-of-type{border-bottom: 0;} .tabCon .con{border-bottom: 1px solid #e8ebf2 ; margin-bottom: 3rem; padding-bottom: 3rem; } .tabCon .con > img{width: 100%; max-width: 70rem; display: block ; margin: 25px auto 0 auto} .tabCon .con h3{background: url(../img/mobile/sub/icon_tit.png) no-repeat 0 0.65rem; padding-left: 1.5rem; margin-bottom: 1rem; font-size: 1.9rem;} .tabCon .con p + p{margin-top: 1rem;} .tabCon .con p + h3, .tabCon .con ul + h3{margin-top: 5rem;} .tabCon .con dl{margin-top: 3rem;} .tabCon .con dl dt{color: #019cb6; margin-bottom: 5px;} .tabCon .con dl dd{} .tabCon .con .org >span{color: #eb6a2a; margin-right: 2rem; } .tabCon .con .ref{color:#666; font-size: 1.5rem} .tabCon .con .tita{display: inline-block; width:8.2rem} .tabCon .con .mt30{margin-top: 3rem; max-width: 70rem;} .stepWrap{margin-top: 5rem;} .steps{text-align: center; margin-top: 1.8rem; margin: 1rem auto; text-align: center; } .steps *{vertical-align: middle; } .steps > span{color: #fff; background: #01bace; height: 5.5rem; display: inline-block; line-height: 5.5rem; width: 44%; position: relative; margin-right: 1%; padding-left: 2.8rem; margin-bottom: 0.5rem;} .steps > span:before{ content: ''; border-top:2.8rem solid transparent; border-bottom:2.8rem solid transparent; border-right: 1rem solid none ; border-left: 2.8rem solid #fff; z-index: 1; position: absolute; top: 0; left: 0;} .steps > span:after{content: ''; position: absolute; right: -2.8rem; top: -1px; border-top:2.8rem solid transparent; border-bottom:2.8rem solid transparent; border-right: 1rem solid none ; border-left: 2.8rem solid #01bace ; z-index:2; } .steps > span:nth-of-type(1):After{ right: -2.8rem;} .steps > span:nth-of-type(2):After{ border-left: 2.8rem solid #018f98;} .steps > span:nth-of-type(3):After{ border-left: 2.8rem solid #575b63;} .steps > span:nth-of-type(4):After{ border-left: 2.8rem solid #002e52;} .steps> span:nth-of-type(2){background: #018f98; ;} .steps> span:nth-of-type(3){background: #575b63; ;} .steps> span:nth-of-type(4){background: #002e52; ;} .stepWrap img{width: 100%; } .stepWrap .arrow{background: url(../img/mobile/sub/bg_arrow.png) no-repeat 15px 50%; display: block; width: 100%; margin: 18px auto 0 auto; background-size: 100% auto; text-align: center; max-width: 70rem;} .stepWrap .arrow > em{background-color: #fff; display: inline-block; padding: 0 2rem ; text-align: center;} /* 통합검색 */ .totalSch{border: 1px solid #e2e2e2; text-align: center; padding: 3rem; margin-bottom: 4.5rem;} .totalSch .schBox .btnSrc{background-color: #353740; width: 4.7rem; height: 4.7rem; position: static ; position: relative; display: inline-block; border-radius: 15px; bottom: 0; right: -0.5rem;} .totalSch .schBox input[type="text"]{font-size: 2rem; padding: 5px 7px 7px 2rem; border: 3px solid #353740; width: calc(100% - 7rem); border-radius: 15px;} .totalSch .schBox .inp{max-width: 57rem; border-bottom: 0; width: 100%; } .totalSch .schBox .inp * {vertical-align: middle;} .totalSch .schBox .inp{max-width: 530px; } .totalSch .hashtag {padding-left: 0; margin-left: -3rem;} .totalSch .hashtag a{color: #5b5b5b; background-color: #e2e2e2; border-radius: 50px; padding: 0.7rem 2rem; margin-right: 0.3rem ; transition: 0.4s ease; font-size: 1.4rem; margin-bottom: 0.5rem;} .totalSch .hashtag a:hover{color: #fff; background-color: #019cb6; transition: 0.4s ease;} .totalSch .schBox{float: none; width: 100%; max-width: 63rem; padding-right: 0;} .totalTxt{font-weight: 500; font-size: 2.2rem; text-align: center; margin-bottom: 4rem;} .totalTxt > strong{color: #019cb6; font-weight: 500; } .totalWrap .tab {overflow: hidden; border-top: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2;} .totalWrap .tab > div{padding: 1.6rem 0; width: 50%; display: block; float: left; border: 0 ; border-bottom: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2;} .totalWrap .tab > div.on{box-shadow: 0 0 0 2px #019cb6 inset;} .tab > div .count{ font-size: 1.4rem;} .resultBox{margin-bottom: 4rem; position: relative;} .resultBox .result{border-bottom: 1px solid #353740; margin-bottom: 0;} .resultBox .result > p{font-size: 1.8rem; font-weight: 500;} .resultBox .result > p > em{color: #5b5b5b;} .resultList{;} .resultList > div{border-bottom: 1px solid #e2e2e2;} .resultList > div:hover{background-color: #f7f7f7;} .resultList > div:hover a, .resultList > div:hover .date{color: #019cb6;} .resultList > div:hover .lock{background: url(../img/mobile/sub/icon_lock_on.png) no-repeat 0 0; background-size: 1.5rem 1.7rem;} .resultList > div a{display: block; width: 100%; padding: 1.1rem; font-size: 1.6rem; font-weight: 500; overflow: hidden; height:5rem;} .resultList > div a > .hoverLine{display: inline-block; width: auto ; font-size: 1.6rem; font-weight: 500; overflow: hidden; height:2.5rem; white-space: nowrap; text-overflow: ellipsis; float: left; max-width: calc(100% - 9rem);} .resultList > div a *{vertical-align: middle;} .resultList > div .date{font-size: 1.4rem; color: #5b5b5b; float: right;} a.btnMore{background: url(../img/mobile/sub/icon.png) no-repeat -6.1rem 0; width: 2rem; height: 2rem; display: block; font-size: 0; transform: rotate(0deg); transition: 0.5s ease; right: 0; background-size: 10rem 10rem;} a.btnMore:hover{transition: 0.3s ease; transform: rotate(90deg)} /* 미션 비전 */ .sub501{} .btit{color: #000; font-size: 3.8rem; font-weight: 600; text-align: center;} .btit + p{color: #000; font-size: 1.8rem; margin: 5.5rem 0; line-height: 3rem; } .hub_bg{ background: url(../img/mobile/sub/img_sub501_01.png) no-repeat 50% 0; background-size: 100%; padding:8rem 0 0 0 ;} .hub{ width: 100%; margin: 0 auto; text-align: center; background: url(../img/mobile/sub/img_sub501_02.png) no-repeat 100% 100%; background-size: 23rem} /*.hub_bg{background: no-repeat 100% 100%}*/ .hub > p{color: #353740;font-size: 3rem; font-weight: 500; margin-bottom: 3rem; line-height: 4rem; } .hub > dl{border: 4px solid #e9ebf2; border-radius: 50px; overflow: hidden; padding: 1.2rem 4rem; width: 52rem; margin-bottom: 0.7rem;background-color: #ffffff;} .hub > dl *{vertical-align: middle;} .hub > dl dt, .hub > dl dd{float: left; font-size: 1.7rem;} .hub > dl dt{color: #000000; padding-right: 1rem; overflow: hidden;} .hub > dl dd:before{width: 1px; height: 60%; content: ''; background-color: #000; display: inline-block; position: absolute; top: 25%; left: 0; } .hub > dl dd{color: #666666; padding-left: 2rem; position: relative;} /* 설립배경 */ .sub502{font-size: 1.7rem; color: #000;} .sub502 .btit + p{margin-bottom: 0;} .txtbg{background: url(../img/mobile/sub/img_sub502.png) no-repeat 50% 0; padding:40rem 0 0 0; line-height: 2.8rem; } .txtbg + p{line-height: 2.8rem;} /* BI */ .sub503> img{ display: block; margin: 0 auto; width: 100%; max-width: 740px} .BI{border-top: 1px solid #000; border-bottom: 1px solid #000; margin-top: 4rem; } .BI + .btnWrap{margin-top: 4rem; } .BI > dl{border-bottom: 1px solid #e8ebf2; overflow: hidden; padding:3rem 2.4rem 3rem 2.4rem; text-align: center;} .BI > dl dt{width: auto; margin-bottom: 1.5rem;} .BI > dl dt > strong{font-weight: 600; font-size: 3rem; color: #000; display: block; } .BI > dl dt > span{color: #353740; font-size: 1.7rem; display: block; text-align: center; margin-top: 5px;} .BI > dl dd{ font-size: 1.6rem; color: #333; width: 87rem; text-align: justify; } .BI > dl dt > img{ margin: 0 auto; display: block;width: 15rem; } .btnWrap > a.down{background-color: #019cb6; width: 21rem;} .btnWrap > a.down span:before{content: ''; display: inline-block; height: 1.7rem; background: url(../img/mobile/sub/icon_down.png) no-repeat 0 0; top: 0.5rem; width: 2.2rem; left: -0.5rem;background-size: 2.2rem 1.7rem; } .btnWrap > a.down span{padding-left: 2.5rem;} /* 업무담당자 안내 */ .sub504{} .contact{font-size: 1.6rem;} .contact .body{font-size: 1.6rem;} .contact .body > div{ border: 1px solid #e6e9f0; border-radius: 10px; padding: 2.6rem 2.4rem; margin-bottom: 1.5rem; box-shadow: 0 0 5px 0 rgba(0,0,0,0.11);} .contact .body > div *{vertical-align: middle;} .contact .body > div > span{margin-right: 1rem;} .contact .body > div > span.name{font-size:2.4rem; color: #000; font-weight: 500;} .contact .body > div > span:nth-of-type(2), .contact .body > div > span:nth-of-type(3){font-size: 1.8rem;} .contact .body > div > span:nth-of-type(4){display: block; margin-top: 2.4rem} /*.contact .head{background-color: #e8ebf2; border-radius: 10px; font-weight: 500; padding: 0.8rem 1%; margin-bottom: 5px;}*/ /* .contact .head > span, .contact .body > div > span{display: inline-block; text-align: center; vertical-align: top;} .contact .head > span:first-of-type, .contact .body > div > span:first-of-type{width: 11%; font-weight: 500;} .contact .head > span:nth-of-type(2), .contact .body > div > span:nth-of-type(2){width: 12%;} .contact .head > span:nth-of-type(3), .contact .body > div > span:nth-of-type(3){width: 18%;} .contact .head > span:nth-of-type(4), .contact .body > div > span:nth-of-type(4){text-align: left;margin-left: 10%; } .contact .body{} .contact .body > div { ;} */ /* 오시는 길 */ .mapWrap{border: 1px solid #e2e2e2; border-radius: 10px; margin-bottom: 15px} .mapWrap .map{width: 100%; height: 53.567vw;max-height: 550px; border-radius: 10px 10px 0 0 ; background-size: cover} .mapWrap .map > img{width: 100%; display: block;} .mapWrap .route{padding: 3.5rem 3rem;} .mapWrap .route > span{font-size: 1.7rem; margin-right: 5rem; overflow: hidden; display: inline-block; position: relative; padding-left: 8rem;} .mapWrap .route > span:first-of-type{display: block; margin-bottom: 2rem; float: none } .mapWrap .route > span:last-of-type{margin-bottom: 0;} .mapWrap .route > span strong *{ vertical-align: top;} .mapWrap .route > span strong:before{content: ''; background: url(../img/mobile/sub/icon.png) no-repeat -8rem -1.9rem ; width: 2.1rem; height: 2rem; display: inline-block; position: absolute; top: 0.4rem; left: 0; background-size: 10rem 10rem;} .mapWrap .route > span:nth-of-type(2) strong:before{background-position: -8rem -4rem;} .mapWrap .route > span:nth-of-type(3) strong:before{background-position: -8.2rem -6rem; width: 2.5rem;} .mapWrap .route > span > strong{font-size: 1.9rem; color: #000; margin-right: 1.5rem; position: relative; padding-left: 2.8rem;font-weight: 400; position: absolute; left: 0; top: -0.1rem;} /*.mapWrap .route > span > em{display: block; float: left;width: calc(100% - 7.6rem);}*/ .sub505 .table{table-layout: auto; border-spacing: 0; font-size: 1.6rem;} .sub505 .table .tr{border: 1px solid #e2e2e2; display: block; border-radius: 10px; padding: 2.5rem 1rem; margin-bottom: 15px;} .sub505 .table .td:first-of-type{width: 100%; min-width: 60px; text-align: center; border-bottom: 0; padding: 0; } .sub505 .table .td{padding: 1.5rem 1.5rem; vertical-align: top; } .sub505 .table .td{border-bottom: 1px solid #e8ebf2; } .sub505 .table .td:last-of-type{border-bottom: 0; padding-bottom: 0;} .sub505 .table .td dl {color: #333;font-size: 1.6rem; } .sub505 .table .td dl dt{font-size: 1.7rem; font-weight: 500; margin-bottom: 1rem;} .sub505 .table .td dl dd{font-size: 1.5rem;} .sub505 .table .td .title{font-weight: 500; position: relative; height: 6rem; display: inline-block; padding-left: 6.5rem; line-height: 4rem; text-align: center; margin: 0 auto; text-align: center;} .sub505 .table .td .title:before{content: ''; background: url(../img/mobile/sub/icon_sub505.png) no-repeat 0 0; width: 6rem; height: 6rem; display: block; position: absolute; top: 0; left: 0; background-size: 6rem 17rem;} .sub505 .table .td .title.bus:before{background-position: 0 -6rem;} .sub505 .table .td .title.car:before{background-position: 0 -12rem;} .sub505 .table .td .title.car:before{background-position: 0 -12rem;} .sub505 .table .line01{color: #1a5b9e;} .sub505 .table .line05{color: #4d1caf;} .sub505 .table .line09{color: #99511d;} .sub505 .table .gbus{color: #317106;} .sub505 .table .rbus{color: #ff0000;} .sub505 .table .ybus{color: #bd7d01;} .sub505 .table .kbus{color: #686868;} em.bb{color: #0c4380; font-weight: 500; margin-right: 5px;} em.gg{color: #317106; font-weight: 500; margin-right: 5px;} em.mm{color: #E2565F; font-weight: 500; margin-right: 5px;} em.aa{color: #b16d79; font-weight: 500; margin-right: 5px;} em.rr{color: #ff0000; font-weight: 500; margin-right: 5px;} em.yy{color: #bd7d01; font-weight: 500; margin-right: 5px;} em.ggi{color: #686868; font-weight: 500; margin-right: 5px;} /* 센터사업 */ .sub100 {margin-top: 4.5rem;} .sub100 .swiper-wrapper{display: block; overflow: hidden; padding-top: 10px; overflow: hidden;} .sub100 .swiper-slide{ height: 24rem; margin-bottom: 4rem; border: 1px solid #f2f3f7; box-shadow: 2px 0 8px 1px rgba(0,0,0,0.1); border-radius: 10px; background-color: #f2f3f7; width: calc( 50% - 1.8rem) ; background-repeat: no-repeat; float: left; margin-left: 0.5rem; background-size: auto 13rem; height: 24rem;} .sub100 .swiper-slide:nth-of-type(2n-1){margin-right: 2.5rem;} .sub100 .swiper-slide:nth-of-type(2n){margin-left: 0;} .sub100 .swiper-slide a{text-align: left; padding: 3.5rem 4.5rem; display: block; width: 100%; height: 100%;} .sub100 .swiper-slide a .rollTxt {text-align: left;} .sub100 .swiper-slide.rolling00{background-image: url(../img/mobile/sub/img_subMain_01.png) ; background-position: 100% 100%;} .sub100 .swiper-slide.rolling01{background-image: url(../img/mobile/sub/img_subMain_01.png) ; background-position: 100% 100%;} .sub100 .swiper-slide.rolling02{background-image: url(../img/mobile/sub/img_subMain_02.png) ; background-position:90% 100%;} .sub100 .swiper-slide.rolling03{background-image: url(../img/mobile/sub/img_subMain_03.png) ;background-position:90% 100%;} .sub100 .swiper-slide.rolling04{background-image: url(../img/mobile/sub/img_subMain_04.png) ; background-position:100% 100%;} .sub100 .swiper-slide.rolling05{background-image: url(../img/mobile/sub/img_subMain_05.png) ; background-position:100% 100%;} .sub100 .swiper-slide.rolling06{background-image: url(../img/mobile/sub/img_subMain_06.png) ; background-position:90% 100%;} .sub100 .swiper-slide.rolling07{background-image: url(../img/mobile/sub/img_subMain_07.png) ; background-position:90% 100%;} .sub100 .swiper-slide.rolling08{background-image: url(../img/mobile/sub/img_subMain_08.png) ; background-position:90% 100%;} .sub100 .swiper-slide.rolling09{background-image: url(../img/mobile/sub/img_subMain_09.png) ; background-position:90% 100%;} .sub100 .swiper-slide.rolling10{background-image: url(../img/mobile/sub/img_subMain_10.png) ; background-position:90% 100%; background-size:90%;} .sub100 .swiper-slide.rolling11{background-image: url(../img/mobile/sub/img_subMain_11.png) ; background-position:90% 100%; background-size:90%;} .sub100 .swiper-slide.rolling12{background-image: url(../img/mobile/sub/img_subMain_12.png) ; background-position:90% 100%; background-size:100%;} /* .sub100 .swiper-slide a{padding: 30px 35px 35px 35px;} */ .sub100 .swiper-slide h3{font-size: 2.5rem; color: #353740;} .sub100 .swiper-slide p{display: none;} .sub100 .swiper-slide a .more *{vertical-align: middle; padding-right: 2.3rem; position: relative;} .sub100 .swiper-slide a .more:after{content: ''; display: inline-block; width: 1.8rem; height: 1.1rem; background: url(../img/mobile/sub/icon.png) no-repeat 100% 100%; margin-left: 0.8rem; position: absolute; right: 0; top: 1.1rem} /* .sub100 .swiper-slide:nth-of-type(1) a p, .sub100 .swiper-slide:nth-of-type(6) a p, .sub100 .swiper-slide:nth-of-type(8) a p{background-color: #feede4;} .sub100 .swiper-slide:nth-of-type(2) a p, .sub100 .swiper-slide:nth-of-type(4) a p, .sub100 .swiper-slide:nth-of-type(9) a p{background-color: #e7f2f4;;} .sub100 .swiper-slide:nth-of-type(3) a p, .sub100 .swiper-slide:nth-of-type(5) a p, .sub100 .swiper-slide:nth-of-type(7) a p{background-color: #f4e8f3;;} */ /* 센터사업 자세히 */ .sub101 {} .sub100 .top{text-align: center; } .sub100 .top > img{display: block; width:85%; margin: 5.8rem auto; max-width: 660px} /*.sub100 .imgBox{background-image: url(../img/mobile/sub/img_sub102.png); background-repeat: no-repeat; background-position: 50% 100%; height:30rem; background-size: 100%; width: 90%; max-width: 560px; margin: 0 auto;} */ /*.sub100.sub101 .top p:after{content: ''; display: block; width: 90%; background-image: url(../img/mobile/sub/img_sub101.png); margin: 3rem auto 0 auto; background-repeat: no-repeat; background-position: 0 0; padding-top: 65%; background-size: 100%; max-width:536px; background-color: pink; max-height: 360px}*/ /*.sub100.sub101 .top p:after{content: ''; display: block; width: 90%; background-image: url(../img/mobile/sub/img_sub101.png); margin: 3rem auto 0 auto; background-repeat: no-repeat; background-position: 0 0; padding-top: 65%; background-size: 100%; max-width:536px; background-color: pink; max-height: 360px}*/ /* .sub100.sub102 .imgBox{background-image: url(../img/mobile/sub/img_sub102.png) } .sub100.sub103 .imgBox{background-image: url(../img/mobile/sub/img_sub103.png) } .sub100.sub104 .imgBox{background-image: url(../img/mobile/sub/img_sub104.png) } .sub100.sub105 .imgBox{background-image: url(../img/mobile/sub/img_sub105.png) } .sub100.sub106 .imgBox{background-image: url(../img/mobile/sub/img_sub106.png) } .sub100.sub107 .imgBox{background-image: url(../img/mobile/sub/img_sub107.png) } .sub100.sub108 .imgBox{background-image: url(../img/mobile/sub/img_sub108.png) } .sub100.sub109 .imgBox{background-image: url(../img/mobile/sub/img_sub109.png) } */ .sub100 .top > h3{color: #000; font-size: 4rem; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: -0.15rem;} .sub100 .top > h3 + p{color: #5b5b5b; font-size: 1.7rem; font-weight: 400;} /*.sub100 .botm{margin-top: 4.2rem;}*/ .sub100 .botm > dl{ width: 100%; border-bottom: 1px solid #303134; padding: 1.7rem 0 4.2rem 0;} .sub100 .botm > dl:first-of-type {border-top: 2px solid #303134;} .sub100 .botm > dl >dt{color: #000000; font-size: 2.7rem; font-weight: 600;; margin-bottom: 1.4rem;} .sub100 .botm > dl >dd{color: #333333; font-size: 1.6rem; position: relative; line-height: 2.5rem;} .sub100 .botm > dl >dt, .sub100 .botm > dl >dd{ padding: 0 1.5rem;} .sub100 .botm > dl >dd ul{} .sub100 .botm > dl >dd ul + ul{margin-top: 1rem;} .sub100 .botm > dl >dd > ul > li{position: relative; padding-left: 0.8rem;} .sub100 .botm > dl >dd > ul > li > strong{font-weight: 500;} .sub100 .botm > dl >dd > ul > li > em{font-weight: 500;} .sub100 .botm > dl >dd > ul > li:before{content: ''; width: 3px; height: 3px; background-color: #333; border-radius: 50px; position: absolute; left: 0; top: 1rem;} .sub100 .botm > dl >dd > ul > li a:hover{text-decoration: underline;} .sub100 .botm > dl >dd .link{color: #353740; font-size: 1.3rem; border-radius: 20px; border: 1px solid #353740; padding: 0.1rem 2rem;position: absolute; right: 0; top: 0; } .sub100 .botm > dl >dd > h3{color: #019cb6; font-size: 1.7rem; font-weight: 500; margin-top: 1rem;} .sub100 .botm > dl >dd > h3:first-of-type{margin-top: 0;} .ref{font-size: 1.5rem; color: #666; padding-left: 0;} /* No Page */ .noPage{width: 80%; margin: 14rem auto; border-radius: 10px 10px 10px 0; background-color: #f6f6f6; text-align: center; display: flex; justify-content: center; align-items: center; padding: 6.5rem 2rem;} .noPage > p > strong{ font-weight: 500; color: #000; font-size: 2.1rem; display: block; margin-bottom: 3px;} .noPage > p{ color: #353740; font-size: 1.6rem; text-align: center;} .noPage > p:before{display: inline-block; background:url(../img/mobile/common/icon_noPage.png) no-repeat 0 0; content: ''; width: 7.5rem; height: 7.3rem; margin-bottom: 1.4rem; background-size: 7.5rem} /* 자격인증 */ table caption{position: absolute; left: -9999px;} .certInfo{} .certInfo table th, .certInfo table td{color: #333; font-size: 1.5rem;} .certInfo table th{background: #f7f7f7; text-align: left; padding-left: 2.5rem; width: 15rem; border-right: 1px solid #e2e2e2;} .certInfo table th:nth-of-type(2n){border-left: 1px solid #e2e2e2;} .certInfo table td{padding-left: 1rem; width: 49rem;} .certInfo table .result{padding: 0; border: 0; margin: 0; color: #e74d00; font-weight: 500;} .certres{background-color: #f7f7f7; border: 1px solid #e2e2e2; font-weight: 500; color: #333333; font-size: 1.5rem; margin-top: 2.5rem; padding: 2.4rem 3.4rem;} .certres p{position: relative; padding-left: 1rem; } .certres p:before{position: absolute; display: block; width: 4px; height: 4px; background-color: #000; border-radius: 50px; content: ''; top: 0.9rem; left: 1px;} .certInfo h3{font-size: 1.9rem; color: #000; font-weight: 600; display: block; margin-bottom: 1.6rem; } .certInfo h3:before{content: ''; display: inline-block; background-color: #f5f7f8; width: 0.6rem; height: 0.5rem; border-radius: 50px; border: 5px solid #019cb6; margin-right:5px;} @media all and (max-width:1400px) { a.goTop{display: none;} .swiper1 .swiper-slide br{display: none;} } @media all and (max-width:1024px) { .sec03 .left ul br{display: block;} .words > a{padding: 0.8rem 2.7vw ; width: auto;} } @media all and (max-width:768px) { html{ font-size: 9px; } .sec03 .left ul br{display: none;} .loginWrap .btnWrap > a span:before{ background-position: -9.5rem 0;} .footerTop .link > div{ width: 40rem;} .footerTop .link > div > ul{width: calc( 40rem * 0.78 ) ; } .sec03 .right .center{background-size: 28rem;} .wordBox{padding: 4rem;} .hub{background: none;} .hub > dl{margin: 0 auto 0.7rem auto;} .words > a{padding: 0.8rem 3vw } } @media all and (max-width:700px) { .txtbg{background-size: 100%; padding: 55vw 0 0 0; } .swiper1 .swiper-slide{background-size: auto 10.5rem;} /* .swiper1 .swiper-slide br{display: none;}*/ } @media all and (max-width:600px) { /* 메인 */ .sec03 .right .linkList > li a{padding: 2.2rem 3rem;} .sec03 .right .center a h3 span br{ display: block;} .secBg{padding: 5.5rem 3rem;} .regionLink > p{padding: 1.6rem 3rem 2rem 3rem;} .gnbList > li{width: 33.333%;} .gnbList > li:nth-of-type(4){margin-top:3rem} .gnbList > li > a{font-size: 1.8rem; display: block; width: 100%; line-height: 2rem;} .gnbList > li > a >span{line-height: 1.8rem;} .swiper1 .swiper-slide{background-size: auto 12rem;width: 100%;} /* 221222 */ .swiper1 .swiper-slide.rolling05{background-size: auto 10rem;} .swiper1 .swiper-slide.rolling05 br{display: none;} .viewList > dl dt{width: 10%;} .viewList > dl dd{width: 88%;} .viewList > dl dd > a{padding-left: 1rem; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viewList > dl{padding: 1.4rem 1rem;} .cate > li > a{padding: 0.5rem 1.5rem;} .popup{min-width: 1px; width: 86%;left: 7%; margin-left: 0; padding:3.5rem 3rem} .viewUp{padding: 4rem 3rem;} /* 기관 찾기 */ .viewTopD .right .circle{width: auto; padding: 1.3rem 1rem;} .words > a{width: calc(100% / 7.5);} .noPage{width: 90%;} .sub100 .swiper-slide{background-size: auto 11rem;} .swiper1 .swiper-slide > a p br{display: none;} } @media all and (max-width:530px) { } @media all and (max-width:500px) { .sec02 + .inner.inner-shadow{padding: 2rem;} /* .inner.inner-shadow{padding: 2rem;}*/ /* .sec02 .inner .btnMore{top: 2.5rem;}*/ html{ font-size: 8px; } /* .swiper1 .swiper-slide{ background-size: 18rem;}*/ .swiper1 .swiper-slide > a p{width: 100%;} .loginWrap{padding: 6rem 2rem;} .mainSearch .btnSrc:before{background-size: 55rem 55rem; background-position: -6.6rem -3.3rem;} .btnWrap > a span{padding-left: 2.45rem;} .loginWrap .btnWrap > a span:before{ background-position: -10.7rem 0; width: 1.9rem; height: 2.1rem; } .localBtn{width: 100%; border-radius: 10px; margin-bottom: 2.5rem;border-bottom: 1px solid #f2f3f7; } .localBtn > a{width: calc(99.9% /6); } .localBtn > a:nth-of-type(8){border-radius: 10px 0 0 0;} .localBtn > a:nth-of-type(8), .localBtn > a:nth-of-type(17), .localBtn > a:nth-of-type(8n){border-right:0; border-radius: 0;} .localBtn > a:nth-of-type(6n){border-right: 1px solid #f2f3f7 ;} .localBtn > a:nth-of-type(6){ border-radius: 0 10px 0 0;} .localBtn > a:nth-of-type(6){ border-radius: 0 10px 0 0;} .localBtn > a:nth-of-type(19){ border-radius: 0 0 0 10px;} .localBtn > a:last-of-type{border-radius: 0 0 10px 0 ;;} .pageList a{font-size: 1.7rem; padding: 0 1.2rem ;} .blank{display: none;} .footerTop > ul > li{margin-right: 3rem;} .BtnMenu{top: 2rem;} /* .rollTxt{width: calc( 100% - 10rem);}*/ .swiper1 .swiper-slide > a:after{margin-top: 1.5rem;} /* 기관찾기 */ .sub202 .pageSch{padding: 4rem 2.5rem 1rem 2.5rem;} .pageSch .checkWrap{right: 9rem; top: 4rem; margin-right: 0;} .checkWrap{margin-right: 3rem; margin-top: 0.3rem;} .srcTit{width: 15rem;} .sub202 .btnWrap a{width: 18rem;} /* 상담 */ .popup.pw .pageCon{padding: 3.5rem 3rem 0 3rem;} .popup .btnWrap > a{padding: 0.7rem 2rem 1.1rem 2rem} .hub > dl {width: 100%;} .words > a{padding: 0.8rem 0; width: calc(100% / 6.5); } /* .sub100 .swiper-slide{background-size: 21rem;}*/ } @media all and (max-width:480px) { .sec03 .right .linkList{display: block; height: auto} .sec03 .right .linkList > li a{display: block; height: 10rem} .sec03 .right .linkList li{width: 100%;margin-bottom: 1.5rem;} .sec03 .right .linkList li:last-of-type{margin-bottom: 0;} .sec03 .right .linkList > li.linkList02 br{display: block;} .sec03 .right .center{background-size: 24rem;} /* .footerTop .link > div{width: 100%;} .footerTop .link div > ul{width: 17rem;} */ .sub100 .swiper-slide a{padding: 3.5rem 3rem;} .sub100 .swiper-slide h3{font-size: 2.3rem;} /* 미션비전 */ .hub > dl{padding: 1.2rem 2rem ; display: flex;} .hub > dl dt{width: 8%; margin: 0; padding: 0; float: none} .hub > dl dd{width: 92%; padding: 0 0 0 1rem; text-align: left; float: none} .hub > dl dd:before{top: 0.8rem; display: none;} /*기타*/ .tabCon .con .org >span{display: block; line-height: 2.6rem;} /* 오시는 길 */ .mapWrap .route > span{display: block; margin-bottom: 2rem; margin-right: 0;} } @media all and (max-width:410px) { .totalWrap .tab > div{padding: 1rem 0;} .BtnMenu{margin-top: 1rem;} .logo{width: 190px;} .logo > a, .logo img{display: block; width: 100%;} .gnbList > li{width: 50%;} .gnbList > li:nth-of-type(3){margin-top:3rem} .swiper1 .swiper-slide br{display: none;} .swiper1 .swiper-slide.rolling05{background-size: auto 9.2rem;} .sec03 .right .center{background-size: 21.4rem;} .sec04 .secBg > div dl dd > .tel{float: none} .sec04 .secBg > div dl dd > .tel:before{content: ': ';} .sec04 .secBg > div dl dd:last-of-type {margin-top: 0.5rem;} .loginWrap .table .td .text{padding-left: 0; background: none;} .cate > li > a{padding: 0.5rem 0.79rem;} .pageList a{font-size: 1.5rem; padding: 0 1rem ;} .footerTop > ul > li{margin-right: 1.1rem;} .footerTop .link > div .list{top:-21.5rem; width: calc( 32rem * 0.78 ); margin-left: 0.5rem;} .footerTop .link div > ul {padding: 2rem 2rem 4rem 2rem ; height: 30rem; } .footerTop .link > div{ width: 32rem; margin-right: 0; margin-bottom: 1rem;} .footerTop .link > div:last-of-type .list{top:-22rem; z-index: 3;} .footerTop .link > div:last-of-type .selectBox {z-index: 4;} .btnWrap > a{display: inline-block; color:#fff;background-color: #353740; border-radius: 50px; font-weight: 400; font-size: 1.7rem; text-align: center; padding:0.7rem 3vw 1.1rem 3vw; margin-right: 0.8rem;} .pageSch{padding: 2.7rem 2rem 2.3rem 2rem;} /* 기관찾기 */ .s202{display: flex; flex-direction : row;flex-wrap : wrap; vertical-align: middle;} .s202 li{ float: none;display: flex; justify-content:center; align-items:center; padding: 0 0.5rem; } .s202 li br{ display: block; } .viewTopD .right{display: block;} .viewTopD .right .circle{width: auto; padding: 0.8rem 2rem; display: inline-block; margin-bottom: 5px;} /*통합검색*/ .totalWrap .tab > div .count{ font-size: 1.4rem; display: block;} .btnWrap > a.down{width: 18rem; padding: 0.7rem 2.4rem 1.1rem 2.3rem} .footerTop .link > div .btnGO{width:5.65rem;} /* 로그인 */ .loginWrap .tar{text-align: left; padding-left: 1rem;} .words > a{padding: 0.8rem 0; width: calc(100% / 5.5); } /* 센터사업 */ .sub100 .swiper-slide{background-size: auto 10rem;} .sub100 .swiper-slide a{padding: 3rem 3.5rem;} } /** 2023 긴급돌봄 모달창*/ .modal-content {border-radius:10px; border:none} .modal {display:none;} .modal {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;} .modal button {opacity:1; background:transparent;} .modal .modal-content {width:500px; margin:0 auto; border-radius:10px; border:none; background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,.1);} .modal .modal-header {display:flex; justify-content:space-between; padding:1.4rem; border-bottom:1px solid #eee;} .modal .modal-title {font-weight:bold; font-size:2rem;} .modal .modal-body {text-align:center; padding:2rem 1rem 3rem;} .modal .modal-body p {margin-top:2rem; font-size:1.6rem;} .modal .modal-body .close {margin-top:2rem; float:none; display:inline-block; text-align:center; background:#222; color:#fff; padding:13px 30px; font-size:1.6rem; font-weight:400; border-radius:5px;} @media screen and (max-width:768px) { .modal .modal-content {width:80%;} } /*//2023긴급돌봄 모달창*/ @media all and (max-width:350px) { .footerTop > ul > li{margin-right: 1rem;} .footerTop > ul > li a{font-size: 1.45rem;} .viewList > dl dt{width: 15%;} .viewList > dl dd{width: 83%;} .cate > li > a{padding: 0.5rem 0.65rem;} .footerTop .link > div .list{top:-21rem;} .footerTop .link > div:last-of-type .list{top: -22rem;} .pageSch{padding: 2.7rem 2rem 2.3rem 2rem;} .words > a{padding: 0.8rem 0; width: calc(100% / 4.5); } .srcTit{width: 13rem;} .srcDiv input[type="text"]{width: 45%;} .loginWrap .table .td{padding: 3rem 2.5rem;} .pageList a.first span{background: url(../img/mobile/sub/icon.png) no-repeat 0 0; display: inline-block; width: 1.1rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem;} .pageList a.prev span{background: url(../img/mobile/sub/icon.png) no-repeat -1.5rem 0; display: inline-block; width: 0.8rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem} .pageList a.next span{background: url(../img/mobile/sub/icon.png) no-repeat -3rem 0; display: inline-block; width: 0.6rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem} .pageList a.last span{background: url(../img/mobile/sub/icon.png) no-repeat -4.5rem 0;display: inline-block; width: 1.1rem; height: 1.1rem; display: block; margin: 1.2rem auto; font-size: 0; background-size: 10rem 10rem} .pageList a{margin-right: 0.45rem;} .viewCon{padding: 3rem 2rem 0 2rem;} .viewbotm{padding: 1.9rem 2rem;} /* 센터사업 */ .sub100 .swiper-slide a{padding: 2.5rem 3.5rem;} .noPage{width: 100%;} .wordBox{padding: 4rem 2.5rem;} .sub100 .swiper-slide{width: 96.5%; height: 18rem; background-size: auto 11rem;} } /* 221221 */ .swiper1, .swiper2 {position:relative;} .swiper-button-prev:after, .swiper-button-next:after {display:none;} .swiper-button-next {display:block; position:absolute; top:0; bottom:0; left:auto; right:2rem; margin:auto; width:5rem; height:5rem; border-radius:50%; background:rgba(255,255,255,.6) url(../img/main/next_b.png) no-repeat center; border:.1rem solid #ddd;} .swiper-button-prev {display:block; position:absolute; top:0; bottom:0; right:auto; left:2rem; margin:auto; width:5rem; height:5rem; border-radius:50%; background:rgba(255,255,255,.6) url(../img/main/prev_b.png) no-repeat center; border:.1rem solid #ddd;} .rollingWrap .swiper-button-prev {left:-1rem;} /* 긴급돌봄 이용신청 230405 */ @media screen and (max-width:1024px) { table.write.mTable .fileBox * {display:block; width:100% !important;} .selectBoxType1 {width:100%; height:4rem; border:1px solid #b4b4b4; border-radius:5px; padding:0 1rem; font-size:1.5rem;} .selectBoxType1 {background-size:1.2rem auto;} } @media screen and (max-width:768px) { table.write.mGrid {table-layout:fixed;} table.write.mGrid tr {display:grid;} table.write.mGrid th {display:grid; width:100%; line-height:5rem; text-align:left;} table.write.mTable {table-layout:fixed;} table.write.mTable {display:table;} table.write.mTable textarea {width:100% !important;} table.write.mTable th {width:30%} table.write.mTable td {width:70%} }