/*@charset "utf-8";*/ :root { --main-color:#1074F5; --sub-color:#0ba2c1; --light-color:#89BCFA; --dark-color:#0B49CA; --point-color1:#00894a; --point-color2:#3F66B6; --basic-bg:#ECEEF2; --grd:linear-gradient(-90deg, #18aaff, #003caa); --btn-shadow:0 2px 3px rgba(0,0,0,0.1); --bx-shadow:0 10px 20px rgba(0,0,0,0.1); --more-shadow:0 2px 4px rgba(0,0,0,0.1); --color-shadow:0 5px 20px rgba(9,36,99,0.2); --all-ani:all cubic-bezier(0, 1, 0.5, 1) 0.2s; } body{font-size:17px;font-family:Pretendard;color:#333;} h1 {color:#2A1B38} h3 {} a {transition:all 0.3s;} .d_width {width:1600px;margin:0 auto;position:relative;transition:all 0.2s ease-out;} .c_width {width:1600px;margin:0 auto;animation:fadeInUp 0.5s cubic-bezier(.4,0,0,1) both 0.2s;} .board-cardnews-view .c_width{animation:none;} .va_mo {display:none;} .item-control a.ico-play:before{content:"\f04b";} .item-control{align-items:center;} .fwl {font-weight:100;} .mbp0{margin-bottom:0 !important;} em{font-weight:inherit;} em.new{width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:#FF6633;color:#fff;font-weight:700;font-size:12px;display:inline-block;vertical-align:text-bottom;} ol.list1 {counter-reset:num;} ol.list1 > li:before {display:inline-block;position:relative;top:-3px;color:#fff;background:var(--main-color);border-radius:50%;width:15px;line-height:15px;height:15px;text-align:center;font-size:.5rem;counter-increment:num;content:counter(num);margin-right:8px;} ol.list1 ul li {margin-left:10px;} ol.list1 ul li:before {content:'-';margin-right:5px;} .thumb.logo img{max-width:calc(100% - 10px);max-height:calc(100% - 10px);min-height:auto;min-width:auto;} .badge.num{background:#919191;border-color:#919191;font-weight:300;padding:0.12rem 0.2rem 0.05rem 0.2rem;margin-left:3px;letter-spacing:0;} a.on .badge.num, a.active .badge.num{background:var(--main-color);border-color:var(--main-color);} .ico-calendar:before {content:"\f133";} input:read-only{background:#f5f5f5;} [data-tooltip]:after{top:0;} /*input date 커스텀*/ .input-date {position:relative;} .input-date input.date {padding-right:20px;} input.date::-webkit-calendar-picker-indicator {background:transparent;z-index:1;} .input-date::after{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:block;} input[type="date"]::after, .input-date::after{content:"\f073";font-family:fontAwesome;font-size:.9rem;width:auto;height:auto;background:none;font-weight:200;} .form-control::placeholder{color:#555;font-weight:200;} .air-datepicker-global-container{left:-99999px !important;top:-99999px !important;} /*before/after wow 애니메이션*/ .wow.before, .wow.after{animation:none;} .animated.fadeIn.before:before, .animated.fadeIn.after:after{animation:fadeIn 1s ease both alternate;} .animated.fadeInUp.before:before, .animated.fadeInUp.after:after{animation:fadeInUp 1s ease both alternate;} .animated.fadeInDown.before:before, .animated.fadeInDown.after:after{animation:fadeInDown 1s ease both alternate;} /*기본 드롭다운박스 - 변경 가능*/ .bx-desc{border:1px solid #DFE1E2;border-radius:5px;overflow:hidden;} .bx-desc .stit{width:100%;display:flex;justify-content:space-between;align-items:center;border-radius:5px 5px 0 0;background:#F4FBFC;padding:20px 30px;} .bx-desc .stit:after{font-family:'Font Awesome 6 Pro';font-weight:400;content:"\f107";transition:0.3s;} .bx-desc.on .stit:after{transform:rotate(-180deg);} /* .bx-desc .cont{display:none;overflow:hidden;opacity:0;transition:0.3s;} .bx-desc.on .cont{display:block;opacity:1;} */ .bx-desc .cont .tit{width:calc(100% - 5px);display:inline-block;font-weight:500;color:#009EC1;} /*+ 모달 드롭박스*/ .ui-dialog .bx-desc, .modal-cont .bx-desc{border-color:#eaeaea;background:#FAFAFA;margin-bottom:20px;} .ui-dialog .bx-desc .stit, .modal-cont .bx-desc .stit{font-size:18px;font-weight:600;color:#333;background:none;border-bottom:1px solid #EAEAEA;padding:10px 20px;} .ui-dialog .bx-desc .stit:after, .modal-cont .bx-desc .stit:after{width:25px;height:25px;line-height:25px;font-size:14px;text-align:center;color:#fff;border-radius:50%;background:#919191;} .ui-dialog .bx-desc.on .cont, .modal-cont .bx-desc.on .cont{padding:20px;} .ui-dialog .bx-desc .cont .tit, .modal-cont .bx-desc .cont .tit{font-size:18px;font-weight:600;color:var(--main-color);margin-bottom:5px;} /*모달창*/ .ui-widget-overlay{background:rgba(0,0,0,0.75);opacity:1;} .ui-widget.ui-widget-content{border:none;border-radius:1rem;padding:0;overflow:hidden;font-family:Pretendard !important;} .ui-widget-header{border:none;} .ui-dialog .ui-dialog-titlebar{background:0;padding:1.2rem 1.2rem 0 !important;background:#fff !important;} .ui-dialog .ui-dialog-title{float:none;color:#121314 !important;font-size:1.5rem !important;font-weight:700 !important;} .ui-dialog .ui-dialog-titlebar-close{display:none;} .ui-dialog .ui-dialog-content{padding:0;} .ui-dialog .ui-dialog-buttonpane{padding:10px;} .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:none;text-align:center;} .ui-dialog .ui-dialog-buttonpane button{line-height:48px;padding:0 25px;margin:0 5px 0;} /*모달창-커스텀*/ #modal-wrap, #login-modal-wrap, #map-modal-wrap{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.75);z-index:9999;} .modal-cont{width:960px;max-width:calc(100% - 40px);position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:#fff;border-radius:10px;box-shadow:0 0 20px #0004;animation:fadeIn .8s .2s both alternate;} #modal-wrap .modal-cont .close{position:absolute;top:-20px;right: 40px;z-index:3;animation:fadeInUp .3s .5s both alternate;} #modal-wrap .modal-cont .close i{display:block;width: 50px;height: 50px;line-height: 52px;border-radius:50%;background:#fff;text-align:center;font-size:1rem;color:var(--dgray1);box-shadow: 5px 5px 20px #0003;position:relative;transition:all .3s;} #modal-wrap .modal-cont .close:before{content:"";position:absolute;top:50%;left:50%;width:70px;height:70px;background:radial-gradient(#1074F555, #fff2);-webkit-transform:translate(-50%, -50%) scale(0.1, 0.1); transform:translate(-50%, -50%) scale(0.1, 0.1);border-radius:50%;-webkit-animation:pulsate 1.5s ease-out;animation:pulsate 1.5s ease-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;opacity:0;z-index:-1;} #modal-wrap .modal-cont .close:hover i{background:var(--dgray1);color:#fff;transform:rotate(180deg);} .modal-cont .indent{max-height:calc(100vh - 100px);overflow-y:auto;} /*로그인 모달창, 현 위치에서 찾기 모달창*/ #login-modal-wrap .modal-cont, #map-modal-wrap .modal-cont{width:400px;overflow:hidden;} #login-modal-wrap .title, #map-modal-wrap .title{background:var(--main-color);text-align:left;padding:10px 20px;color:#fff;font-size:1.125rem;font-weight:500;} #login-modal-wrap h3.tit{margin:.6rem 0 1rem;} #map-modal-wrap h3.tit{font-size:1.25rem;margin:.6rem 0 1rem;} #login-modal-wrap h3.tit:before, #map-modal-wrap h3.tit:before{vertical-align:middle;margin-right:7px;animation:blink 1.5s infinite;} #map-modal-wrap .stit{margin:0 0 10px;font-weight:500;color:#121314;} #map-modal-wrap .txt{word-break:keep-all;} #login-modal-wrap .btn-wrap, #map-modal-wrap .btn-wrap{padding:0px 0 20px;} /*sns 아이콘*/ .sns-ico{display:inline-block;width:50px;height:50px;border-radius:50%;background:url(../img/sns-ico.png);} .sns-ico.ico-instagram{background-position-x:-60px;} .sns-ico.ico-facebook{background-position-x:-120px;} .sns-ico.ico-blog{background-position-x:-180px;} .sns-ico.sm-ico{width:36px;height:36px;background-size:auto 36px;} .sns-ico.sm-ico.ico-instagram{background-position-x:-44px;} .sns-ico.sm-ico.ico-facebook{background-position-x:-88px;} .sns-ico.sm-ico.ico-blog{background-position-x:-132px;} #wrap {min-width:1600px;position:relative;padding:0;margin:0;background:#fff;} #header {position:absolute;left:0;top:0;width:100%;z-index:99;transition:all 0.2s ease-out;animation:fadeInDown 1s;} #header.fix {position:fixed;left:0;top:0;width:100%;} #header.active {background:#fff;} #logo {position:absolute;top:23px;left:50px;z-index:1;margin:0;} #logo img {height:50px;} #header #logo .logo-w {display:none;} /* #header.fix #logo .logo-w, #header.active #logo .logo-w{display:none;} #header.fix #logo .logo-w, #header.active #logo .logo-w {display:inline-block;} */ /*gnb 스타일*/ #header .topwrap{height:50px;background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:flex-end;padding:0 50px;font-size:.875rem;} #header .topwrap a{display:block;margin-left:15px;position:relative;font-weight:600;} #header .topwrap a:after{content:"";display:inline-block;height:10px;border-left:1px solid #ccc;vertical-align:middle;margin-left:15px;} #header .topwrap a:last-child:after{display:none;} .kicce-logo img {height:25px;} .samsung-logo img {height:17px;} #gnb {/* width:100%;position:absolute;left:0;top:50px;z-index:99; */position:relative;} #gnb .topmn {position:absolute;top:29px;right:50px;text-align:center;} #gnb .topmn a {font-size:1rem;display:inline-block;} #header a.ico-sch{font-size:1.2rem;color:#121314;} #header a.ico-sch:hover{color:#fff;} #header a.ico-sch:before {content:"\f002";font-family:FontAwesome;font-weight:200;transition:all ease-out 0.2s;} #gnbmn {position:relative;width:100%;padding:0;margin:0;} #gnbmn a {position:relative;} #gnbmn a[target=_blank] > span:after {content:"\f08e";display:inline-block;margin-left:5px;font-family:fontAwesome;font-weight:200;font-size:.9rem;vertical-align:bottom;opacity:.5;} #gnbmn ul.depth1 {margin:0 300px;display:flex;justify-content:center;} #gnbmn ul.depth1 > li > a {display:block;height:100%;padding:38px 3rem 32px;font-size:1.5rem;line-height:1.25;letter-spacing:-0.0125rem;text-align:center;font-weight:900;color:#121314 !important;position:relative;} #gnbmn ul.depth1 > li > a > span {display:block;font-size:.8rem;margin:-13px 0 0;font-weight:500;} #gnbmn ul.depth1 > .List2 > a{background:var(--grd);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #gnbmn ul.depth1 > .List2 > a > span{-webkit-text-fill-color:initial;} #gnbmn ul.depth1 > li > a:after {content:"";display:block;position:absolute;bottom:0px;left:50%;transform:translateX(-50%);width:0%;height:3px;background-color:var(--main-color);transition:all 0.3s;} #gnbmn ul.depth1 > li > a:hover:after, #gnbmn ul.depth1 > li.on > a:after, #gnbmn ul.depth1 > li.active > a:after {width:100%;background:var(--grd);} #gnbmn ul.depth1 > li > a:hover, #gnbmn ul.depth1 > li.on > a, #gnbmn ul.depth1 > li.active > a {color:var(--main-color) !important;} #gnbmn .title {float:left;width:300px;padding:10px 20px 10px 0;word-break:keep-all;position:relative;color:#fff;} #gnbmn .tit {display:inline-block;font-size:2.25rem;font-weight:var(--font-exbold);line-height:1;margin:15px 0 30px;} #gnbmn .txt {font-size:1.3rem;font-weight:400;line-height:1.5;font-weight:300;} #gnbmn .txt em {color:#fff;background:var(--dark-color);padding:2px;font-weight:500;} #gnbmn .List2 .depth2 .tit > span {display:none;} #gnbmn .title:after {content:"";width:110px;height:110px;background-image:url(../img/gnb-ico01.png);background-size:cover;display:block;margin:20px 0 0;} #gnbmn .List2 .title:after {background-image:url(../img/gnb-ico03.png);} #gnbmn .List3 .title:after {background-image:url(../img/gnb-ico04.png);} #gnbmn .List4 .title:after {background-image:url(../img/gnb-ico02.png);} #gnbmn .List5 .title:after {background-image:url(../img/gnb-ico05.png);} #gnbmn .List2 .txt em {background:#0089A5;} #gnbmn .List3 .txt em {background:#077140;} #gnbmn .List4 .txt em {background:#294B93;} #gnbmn .List5 .txt em {background:#A03F7C;} #gnbmn div.depth2 {width:1600px;position:absolute;top:100px;left:50%;transform:translateX(-50%);padding:20px 0;text-align:left;z-index:9;visibility:hidden;opacity: 0;min-height:382px;} #gnbmn div.depth2.on {opacity: 1; visibility: visible; transition:all .6s;} #gnbmn .depth2 > ul {float:left;width:calc(100% - 300px);/* height:260px;overflow-y:auto; */padding:0 20px;} #gnbmn .depth2 > ul::-webkit-scrollbar{width: 5px;background-color: var(--main-color);} #gnbmn .depth2 > ul::-webkit-scrollbar-track{width:5px; background-color:#ccc;} #gnbmn .depth2 > ul::-webkit-scrollbar-thumb{width:5px; -webkit-box-shadow: none; background-color:var(--main-color);} #gnbmn .depth2 > ul:after {content:"";float:none;clear:both;} #gnbmn .depth2 > ul > li {float:left;width:25%;padding:10px 0 20px 10px;} #gnbmn .depth2 > ul > li:nth-child(4n+1) {clear:both;} #gnbmn .depth2 > ul > li > a {color:#222;font-weight:700;background:#F8F8F8;line-height:55px;font-size:1.1rem;padding:0 20px;margin:0 0 10px;border-radius:5px;overflow:hidden;transition:all .2s;display:flex;align-items:center;justify-content:space-between;} #gnbmn .depth2 > ul > li > a:after {content:"\f054";font-family:fontAwesome;color:#0003;font-size:.9rem;position:relative;} #gnbmn .depth2 > ul > li > a > span {position:relative;z-index:2;} #gnbmn .depth2 > ul > li > a > span > em{font-size:1.5rem;vertical-align:middle;} #gnbmn .depth2 > ul > li:hover > a, #gnbmn .depth2 > ul > li > a:hover, #gnbmn .depth2 > ul > li > a:focus, #gnbmn .depth2 > ul > li > a.on {font-weight:900;color:#fff !important;} #gnbmn .depth2 > ul > li > a:hover em, #gnbmn .depth2 > ul > li > a:focus em, #gnbmn .depth2 > ul > li > a.on em{color:#ffc !important;} #gnbmn .depth2 > ul > li:hover > a:after, #gnbmn .depth2 > ul > li > a:hover:after, #gnbmn .depth2 > ul > li > a:focus:after, #gnbmn .depth2 > ul > li > a.on:after{color:#fff;} #gnbmn .depth2 > ul > li:hover > a:before, #gnbmn .depth2 > ul > li > a:before{content:"";width:0%;height:100%;background:var(--main-color);position:absolute;top:0;left:0;transition:all .2s;} #gnbmn .depth2 > ul > li:hover > a:before, #gnbmn .depth2 > ul > li > a:hover:before, #gnbmn .depth2 > ul > li > a:focus:before, #gnbmn .depth2 > ul > li > a.on:before {width:100%;} #gnbmn ul.depth3>li>a{display:block;padding:2px 0;} #gnbmn ul.depth3>li>a:before{content:"-";display:inline-block;margin-right:5px;} #gnbmn ul.depth3>li>a > span{background:linear-gradient(to bottom, transparent 97%, var(--main-color) 0) left center no-repeat;background-size:0;transition:all .3s;} #gnbmn ul.depth3>li>a:hover > span, #gnbmn ul.depth3>li>a:focus > span, #gnbmn ul.depth3>li>a.on > span{background-size:100%;color:var(--main-color);} /*발달이정표*/ #gnbmn .List1 .depth2 > ul > li {float:none;width:100%;padding:10px 0 0;} #gnbmn .List1 .depth2 > ul > li > a{display:none;} #gnbmn .List1 .depth3{display:flex;flex-wrap:wrap;} #gnbmn .List1 .depth3>li{width:calc(100% / 6);margin:0 0 10px;text-align:center;} #gnbmn .List1 .depth3>li>a:before{content:"";width:115px;height:115px;display:block;border-radius:2rem;margin:0 auto 10px;background:#ccc;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;border:4px solid #fff;transition:all .3s;} #gnbmn .List1 .depth3>li>a:hover:before, #gnbmn .List1 .depth3>li>a:focus:before, #gnbmn .List1 .depth3>li>a.on:before{border-color:var(--main-color);} #gnbmn .List1 .depth3>li>a:hover, #gnbmn .List1 .depth3>li>a:focus, #gnbmn .List1 .depth3>li>a.on{font-weight:900;} #gnbmn .List1 .depth3>li>a:after{content:"\f058";font-family:fontAwesome;font-weight:900;font-size:2.5em;color:var(--main-color);position:absolute;top:40px;left:50%;transform:translateX(-50%);transition:all .3s;opacity:0;background:#fff;border-radius:50%;line-height:1;} #gnbmn .List1 .depth3>li>a:hover:after, #gnbmn .List1 .depth3>li>a:focus:after, #gnbmn .List1 .depth3>li>a.on:after{top:35px;opacity:1;} #gnbmn .List1 .depth3>li:nth-child(1)>a:before{background-image:url(../img/subm-age-img1-g.png);} #gnbmn .List1 .depth3>li:nth-child(2)>a:before{background-image:url(../img/subm-age-img2-g.png);} #gnbmn .List1 .depth3>li:nth-child(3)>a:before{background-image:url(../img/subm-age-img3-g.png);} #gnbmn .List1 .depth3>li:nth-child(4)>a:before{background-image:url(../img/subm-age-img4-g.png);} #gnbmn .List1 .depth3>li:nth-child(5)>a:before{background-image:url(../img/subm-age-img5-g.png);} #gnbmn .List1 .depth3>li:nth-child(6)>a:before{background-image:url(../img/subm-age-img6-g.png);} #gnbmn .List1 .depth3>li:nth-child(7)>a:before{background-image:url(../img/subm-age-img7-g.png);} #gnbmn .List1 .depth3>li:nth-child(8)>a:before{background-image:url(../img/subm-age-img8-g.png);} #gnbmn .List1 .depth3>li:nth-child(9)>a:before{background-image:url(../img/subm-age-img9-g.png);} #gnbmn .List1 .depth3>li:nth-child(10)>a:before{background-image:url(../img/subm-age-img10-g.png);} #gnbmn .List1 .depth3>li:nth-child(11)>a:before{background-image:url(../img/subm-age-img11-g.png);} /*발달체크도구*/ #gnbmn .List2 .depth2 > ul > li{padding:10px 0 20px 20px;} #gnbmn .List2 .depth2 > ul > li > a{height:300px;display:block;text-align:center;line-height:1.2;padding:40px;font-size:1.5rem;} #gnbmn .List2 a[target=_blank] > span:after{vertical-align:middle;} #gnbmn .List2 .depth2 > ul > li > a:before{position:static;background:none;width:100%;height:auto;display:block;font-weight:900;color:#789CD6;margin:0 0 7px;font-size:1.25rem;} #gnbmn .List2 .depth2 > ul > li > a:after{display:block;font-family:pretendard;font-weight:300;color:#555;margin:15px 0 0;line-height:1.5;font-size:.925rem;white-space: pre;transition:all .2s;} #gnbmn .List2 .depth2 > ul > li:nth-child(1) > a{background:#F6F8F9 url(../img/gnb-ico02-2.png) no-repeat center bottom 40px;} #gnbmn .List2 .depth2 > ul > li:nth-child(2) > a{background:#eff5ff url(../img/gnb-ico02-3.png) no-repeat center bottom 40px;} #gnbmn .List2 .depth2 > ul > li:nth-child(1) > a:before{content:"How to";} #gnbmn .List2 .depth2 > ul > li:nth-child(2) > a:before{content:"K-SIED";} #gnbmn .List2 .depth2 > ul > li:nth-child(1) > a:after{content:"K-SIED 영유아발달체크도구에 대한 \a 안내사항을 확인해보세요!";} #gnbmn .List2 .depth2 > ul > li:nth-child(2) > a:after{content:"영유아의 일상 행동을 관찰하고 \a 발달을 체크하세요!";} #gnbmn .List2 .depth2 > ul > li:hover > a, #gnbmn .List2 .depth2 > ul > li > a:hover, #gnbmn .List2 .depth2 > ul > li > a:focus, #gnbmn .List2 .depth2 > ul > li > a.on{background-color:var(--sub-color);border-color:var(--sub-color);background-blend-mode:screen;} #gnbmn .List2 .depth2 > ul > li:hover > a:before, #gnbmn .List2 .depth2 > ul > li:hover > a:after, #gnbmn .List2 .depth2 > ul > li > a:hover:before, #gnbmn .List2 .depth2 > ul > li > a:hover:after, #gnbmn .List2 .depth2 > ul > li > a:focus:before, #gnbmn .List2 .depth2 > ul > li > a:focus:after, #gnbmn .List2 .depth2 > ul > li > a.on:before, #gnbmn .List2 .depth2 > ul > li > a.on:after{color:#fff;} /*발달지원놀이 3뎁스 표출 디자인 - 이미지 가로형*/ #gnbmn .List3 .depth2 > ul > li {width: 100%;padding:20px 10px 0;margin:0 0 20px;} #gnbmn .List3 .depth2 > ul > li:before{content:"";width:120px;height:120px;border-radius:50%;background:#ccc;display:block;float:left;background-size:100%;background-position:50% 50%;border:3px solid #F7F9FA;transition:all .3s;} #gnbmn .List3 .depth2 > ul > li:nth-child(1):before{background-image:url(../img/gnb-img03-1.png);} #gnbmn .List3 .depth2 > ul > li:nth-child(2):before{background-image:url(../img/gnb-img03-2.png);} #gnbmn .List3 .depth2 > ul > li > a, #gnbmn .List3 .depth2 > ul > li > ul{width:calc(100% - 140px);margin-left:20px;float:left;} #gnbmn .List3 .depth2 > ul > li > a{background:none;text-align:left;border:none;padding:0 0 10px;border-bottom:1px solid #dadada;font-size:1.25rem;border-radius:0;line-height:1.2;} #gnbmn .List3 .depth3{display:flex;flex-wrap:wrap;} #gnbmn .List3 .depth3 > li{width:25%;} #gnbmn .List3 .depth2 > ul > li:hover:before{box-shadow:0 5px 10px #00894a44;border-color:var(--point-color1);} #gnbmn .List3 .depth2 > ul > li > a:before, #gnbmn .List3 .depth2 > ul > li > a:after{display:none;} #gnbmn .List3 .depth2 > ul > li:hover > a{color:var(--point-color1) !important;;border-color:var(--point-color1);} #gnbmn .List3 .depth2 > ul > li > a:hover, #gnbmn .List3 .depth2 > ul > li > a:focus, #gnbmn .List3 .depth2 > ul > li > a.on{color:var(--point-color1) !important;} /*우리 동네 지원정보 3뎁스 표출 디자인 - 가로형*/ #gnbmn .List4 .depth2 > ul >li{float:none;margin:0;width:100%;display:flex;border-bottom:1px solid #eaeaea;padding:10px 0 10px 10px;} #gnbmn .List4 .depth2 > ul >li:last-child{border-bottom:0;} #gnbmn .List4 .depth2 > ul >li>a{width:290px;height:100%;margin:0 20px 0 0;} #gnbmn .List4 .depth2 > ul >li:last-child > a{background:#eff5ff;} #gnbmn .List4 ul.depth3 {width:calc(100% - 310px);display:flex;flex-wrap:wrap;} #gnbmn .List4 ul.depth3>li{width:25%;} @media only screen and (max-width:1440px){ #gnbmn .List4 ul.depth2>li>a{width:160px;} } /*hover 색상 변경*/ #gnbmn .List3 .depth3 > li > a > span{background:linear-gradient(to bottom, transparent 97%, var(--point-color1) 0) left center no-repeat;background-size:0;} #gnbmn .List3 .depth3 > li > a:hover > span, #gnbmn .List3 .depth3 > li > a:focus > span, #gnbmn .List3 .depth3 > li > a.on > span{color:var(--point-color1);background-size:100%;} #gnbmn .List4 .depth2 > ul > li > a:before{background:var(--point-color2);} #gnbmn .List4 .depth3 > li > a > span{background:linear-gradient(to bottom, transparent 97%, var(--point-color2) 0) left center no-repeat;background-size:0;} #gnbmn .List4 .depth3 > li > a:hover > span, #gnbmn .List4 .depth3 > li > a:focus > span, #gnbmn .List4 .depth3 > li > a.on > span{color:var(--point-color2);background-size:100%;} #gnbmn .List5 .depth2 > ul > li > a:before{background:#CE6CA7;} #gnbmn .List5 .depth3 > li > a > span{background:linear-gradient(to bottom, transparent 97%, #CE6CA7 0) left center no-repeat;background-size:0;} #gnbmn .List5 .depth3 > li > a:hover > span, #gnbmn .List5 .depth3 > li > a:focus > span, #gnbmn .List5 .depth3 > li > a.on > span{color:#CE6CA7;background-size:100%;} #id_gnb_bg {position:absolute;width:100%;left:0;top:150px;z-index:-1;background:#fff;box-shadow:0px 2px 20px rgba(0,0,0,0.3);opacity:0;visibility:hidden;} #id_gnb_bg.on {opacity: 1; visibility: visible; transition:opacity .6s, visibility .6s;} .gnb_bg:before, .gnb_bg:after {content:"";position:absolute;left:0;top:0;display:block;width:calc(50% - 500px);height:100%;border-right:1px solid #eaeaea;} .gnb_bg:before {background:url(../img/mshort01.png) no-repeat 100% 50% / cover;} .gnb_bg:after {background:var(--main-color);opacity:.9;} .gnb_bg.bg2:before {background-image:url(../img/mshort02.png);} .gnb_bg.bg3:before {background-image:url(../img/mshort03.png);} .gnb_bg.bg4:before {background-image:url(../img/mshort04.png);} .gnb_bg.bg5:before {background-image:url(../img/mshort05.png);} .gnb_bg.bg2:after {background:var(--sub-color);} .gnb_bg.bg3:after {background:var(--point-color1);} .gnb_bg.bg4:after {background:var(--point-color2);} .gnb_bg.bg5:after {background:#CE6CA7;} #header.fix #gnb {top:0 !important;background:#fff;} #header.active #gnb{border-bottom:1px solid #dadada;} #header.fix .topwrap{display:none;} #header.active .topwrap{background:#f2f2f2;} #header.fix #gnb .topmn{top:15px;} #header.fix #logo {top:.8rem} #header.fix #logo img {height:45px;} #header.fix #gnb, #header.active #gnb{background: rgb(255 255 255 / 90%);backdrop-filter: blur(5px);border-bottom:1px solid #0003;} #header.fix #gnbmn ul.depth1 > li > a, #header.active #gnbmn ul.depth1 > li > a{color:#111} #header.fix #gnbmn ul.depth1 > li > a {display:flex;flex-direction:column;justify-content:center;padding:20px 3rem;font-size:1.375rem;font-weight:700;} #header.fix #gnbmn ul.depth1 > li > a > span {margin:0;} #header.fix #gnbmn .depth2, #header.fix #id_gnb_bg {top:83px;} #header.fix .gnb_bg:after{top:0;height:100%;shadow:0px 10px 10px rgba(0,0,0,0.3);} #mobile-navicon {display:none;width:80px;height:80px;line-height:80px;font-size:1.2rem;position:absolute;right:0;top:0;text-align:center;background:var(--main-color);z-index:999;color:#fff;} #header.fix #mobile-navicon {line-height:70px;height:70px;} .mm-menu.mm-current{z-index:1;overflow-y:scroll;} #mm-blocker{background:rgba(3, 2, 1, 0.8);z-index:0;} .mm-menu.mm-current .depth2 > .title{display:none;} .mm-menu.mm-vertical .mm-listview li.mm-opened > a.mm-next, .mm-menu.mm-vertical .mm-listview li.mm-opened > .mm-panel, .mm-menu .mm-listview li.mm-opened.mm-vertical > a.mm-next, .mm-menu .mm-listview li.mm-opened.mm-vertical > .mm-panel{background:rgba(0, 0, 0, 0.3);} @media only screen and (max-width:1800px){ .d_width{width:1400px;} #gnbmn ul.depth1 > li > a{padding:35px 2rem;} #gnbmn div.depth2{width:1400px;} .gnb_bg:before, .gnb_bg:after{width:calc(50% - 400px);} #gnbmn .List2 .depth2 > ul > li{width:33.33%;} } @media only screen and (max-height:1080px){ #gnbmn ul.depth1 > li > a{padding:35px 2rem;} #header.fix #gnbmn ul.depth1 > li > a{padding:20px 2rem;} } @media only screen and (max-width:1600px){ .d_width, .c_width {width:1200px;} #wrap {min-width:1200px;} #gnb {width:auto;} #gnbmn .title{width:250px;} #gnbmn .tit{font-size:1.8rem;} #gnbmn .txt{font-size:1rem;} #header .topwrap{height:40px;} .kicce-logo img{height:22px;} .samsung-logo img{height:15px;} #logo{top:18px;} #logo img{height:40px;} #gnb .topmn{top:25px;} .gnb_bg:before, .gnb_bg:after{width:calc(50% - 350px);} #gnbmn ul.depth1{margin:0 300px 0 230px;} #gnbmn ul.depth1 > li > a{font-size:1.3rem;padding:33px 2rem 28px;} #gnbmn div.depth2{width:1200px;min-height:350px;} #gnbmn .depth2 > ul{width:calc(100% - 250px);} #gnbmn .depth2 > ul > li{padding:5px 0 5px 10px;} #gnbmn .depth2 > ul > li > a{line-height:55px;font-size:1.1rem;} #gnbmn div.depth2{top:89px;} #id_gnb_bg{top:130px;} #header.fix #gnbmn ul.depth1 > li > a{padding:18px 1.5rem;font-size:1.2rem;} #header.fix #logo{top:.5rem;} #header.fix #logo img{height:35px;} #header.fix #gnbmn .depth2, #header.fix #id_gnb_bg{top:77px;} #gnbmn .List1 .depth3>li>a:before{width:90px;height:90px;} #gnbmn .List2 .depth2 > ul > li{width:50%;} #gnbmn .List2 .depth2 > ul > li > a{height:250px;padding:30px 20px;} #gnbmn .List2 .depth2 > ul > li:nth-child(1) > a, #gnbmn .List2 .depth2 > ul > li:nth-child(2) > a{background-position:center bottom 30px;background-size:65px;} #gnbmn .List4 .depth2 > ul > li > a{width:250px;} #gnbmn .List4 ul.depth3{width:calc(100% - 250px);} #gnbmn .List4 ul.depth3>li{width:50%;} } @media only screen and (max-width:1440px){ #gnbmn ul.depth1{margin:0 260px 0 230px;} #gnbmn ul.depth1 > li > a{font-size:1.2rem;padding:33px 1rem 28px;} #gnb .topmn a.btn-d{padding:0 10px;} #header.fix #gnbmn ul.depth1 > li > a{padding:18px 1.2rem;} #id_gnb_bg{top:129px;} } @media only screen and (max-width:1240px){ body{font-size:1rem;} .d_width, .c_width {width:960px;} #wrap {min-width:960px;} #gnbmn #menu-pc{display:none;} #logo {position:static;line-height:70px;top:2rem;} #logo img {display:inline-block;margin-right:5px;} #gnbmn{height:auto !important;} #gnb .topmn{top:55px;right:20px;} #header.fix #gnb .topmn{top:15px;right:20px;} #header.fix{border-bottom:0;} #header .topwrap{padding:0 20px;} #logo{text-align:center;} #header > .d_width, #gnb, #gnbmn{position:static;} #mobile-navicon {width:70px;height:70px;line-height:70px;display:block !important;position:absolute;left:0;top:40px;transition:none;} #header.fix #mobile-navicon{top:0;} h1 {font-size:2.5rem;} } @media only screen and (max-width:1023px){ .d_width, .c_width {width:740px;} #wrap {min-width:740px;} } @media only screen and (max-width:767px){ .va_mo {display:block;} .va_pc {display:none;} .d_width, .c_width {width:auto;margin:0 20px;} #wrap {min-width:320px;} #logo{line-height:52px;} #logo img{height:30px;margin:-7px 0 0;} #gnb .topmn{top:50px;} #mobile-navicon{width:60px;height:60px;line-height:60px;} #gnb .topmn a{background:none;border:0;color:#121314;font-size:1.125rem;padding:5px 8px;font-weight:500 !important;} #gnb .topmn a.ico-logout{color:var(--pink);} #gnb .topmn a.ico-login{color:var(--main-color);} #gnb .topmn a.ico-user{color:var(--dgray1);} #gnb .topmn a:hover{color:var(--main-color) !important;} #header .topwrap a:after, #header .topwrap a{margin-left:10px;} #header .topwrap a:not(.btn-d){font-size:.825rem;font-weight:300;} .kicce-logo img{height:20px;} .samsung-logo img{height:13px;} .h4, h4{font-size:1.125rem;} .btn-d.btn-xlg{padding:0 25px;line-height:45px;font-size:1.125rem;} .btn-d.btn-lg{padding:0 18px;line-height:40px;} .btn-d{padding:0 10px;line-height:32px;font-size:.925rem;} } @media only screen and (max-width:576px){ #header{position:relative;} #header .topwrap{display:none;} #mobile-navicon, #header.fix #mobile-navicon{width:50px;height:50px;line-height:50px;top:0;} #header.fix #logo img{height:25px;} #logo{line-height:50px;} #logo img{height:25px;} #gnb .topmn, #header.fix #gnb .topmn{top:9px;} #gnb .topmn a{font-size:1rem;padding:5px;} .board-write{padding:1rem;} .board-write table th, .board-write table td{padding:.3rem 0;} .board-write .form-control{max-width:100%;} } @media only screen and (max-width:415px){ .d_width, .c_width {margin:0 10px;} .board-write{padding:.5rem;} } /*footer*/ #footer {background:#fff;color:#333;word-break:keep-all;font-size:1rem;border-top:1px solid #dadada;} .ftop {border-bottom:1px solid #EAEAEA;padding:35px 0;} #flogo{margin-right:70px;} #flogo img{height:50px;} .footer-mn{margin:0 0 10px;} .footer-mn a {display:inline-block;margin-right:10px;font-weight:500;} #footer address{font-size:.9rem;color:#919191;} #footer #webwatch {position:absolute;right:0;top:0;} #footer #webwatch a {display:block;} #footer #webwatch img {height:77px;} .fbtm{padding:25px 0;justify-content:space-between;align-items:center;} #footer .copy{font-size:.725rem;color:#8B99B4;} .flogo-wrap .kicce-logo img{height:30px;} .flogo-wrap .samsung-logo img{height:21px;} .flogo-wrap a:before{content:"";display:inline-block;height:10px;border-left:1px solid #ccc;vertical-align:middle;margin:0 15px;} .flogo-wrap a:first-child:before{display:none;} /*btn-top*/ .btn-top{position:fixed;right:1rem;bottom:1rem;z-index:99;} .btn-top a{display:block;width:45px;height:45px;line-height:48px;text-align:center;} .btn-top a.top{background:#0009;color:#FFF;position:relative;border-radius:.3rem;} .btn-top a.top:hover{background:var(--main-color);} @media only screen and (max-width:1256px){ /* 960px */ #footer #webwatch img {height:60px;} } @media only screen and (max-width:768px){/*mobile-l*/ } /*faq-list 기본 스타일 (메인, 발달이정표 서브메인)*/ .faq-list{border-top:1px solid #666;} .faq-list > li{border-bottom:1px solid #F2F3F5;} .faq-list li .question{display:block;font-size:1.375rem;color:#121314;font-weight:700;padding:30px 50px 30px 20px;position:relative;} .faq-list li .question:hover{background:#F2F3F5;} .faq-list li em{font-weight:900;font-size:1.4rem;margin-right:5px;} .faq-list li .answer{font-size:1.125rem;margin:10px 20px 30px;padding:30px;background:#ECEEF2;/* display:none; */} /* .faq-list li.active .answer{display:block;} */ .faq-list li .question:after{content:"\f13a";font-family:fontAwesome;position:absolute;top:50%;right:20px;transform:translateY(-50%);color:var(--main-color);font-size:1.7rem;} .faq-list li.active .question:after{content:"\f139";color:#919191;} .faq-list li .answer em{color:#666;} .faq-list li .answer .tit{color:#121314;font-weight:500;font-size:1.25rem;} .faq-list li .answer .stit{color:#121314;font-weight:500;} .faq-list li .answer .bu li{padding-top:3px;padding-bottom:3px;} .faq-list li .answer > *{margin:0 0 20px;} .faq-list li .answer > *:last-child{margin:0;} /*메인 공통 [s]*/ /*발달영역별 뱃지, 버튼*/ .badge[class*="area-c"]{color:#333;font-weight:500;line-height:1;} .badge.area-c1, .btn-wh.area-c1.active{background:#FF9E7533;border-color:#FF9E75;color:#121314;} .badge.area-c2, .btn-wh.area-c2.active{background:#FEB77033;border-color:#FEB770;} .badge.area-c3, .btn-wh.area-c3.active{background:#65BD0D33;border-color:#65BD0D;} .badge.area-c4, .btn-wh.area-c4.active{background:#4AB99433;border-color:#4AB994;} .badge.area-c5, .btn-wh.area-c5.active{background:#4784CD33;border-color:#4784CD;} .badge.area-c6, .btn-wh.area-c6.active{background:#A25BC433;border-color:#A25BC4;} .badge.area-c7, .btn-wh.area-c7.active{background:#F56DB133;border-color:#F56DB1;} /*공통 타이틀*/ .main-container h2.tit, .main-container h3.tit, .main-container h4.tit{margin:0;} .mc-stit{font-size:1.5rem;font-weight:900;color:var(--main-color);} .mc-tit{font-size:3.75rem;font-weight:900;margin:30px 0 40px;line-height:1.1;} .mc-txt{font-size:1.125rem;color:#666;word-break:keep-all;} .mc-stit.wh, .mc-tit.wh{text-shadow:2px 2px 2px #0009;color:#fff;} .mc-txt.wh{text-shadow:1px 1px 1px #0009;color:#fff;} /*메인 섹션 높이*/ [id*="mc-cont"]{height:100vh;min-height:960px;} #mc-cont4{height:auto;} #mc-cont2 > .d_width, #mc-cont3 > .d_width{height:100%;} #mc-cont2 > .d_width > .center, #mc-cont3 > .d_width > .center{width:100%;padding:80px 0 150px;z-index:1;} /*메인 섹션 배경 오버레이*/ #mc-cont2, #mc-cont3{position:relative;} #mc-cont2:before, #mc-cont3:after{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(90deg, #0003, #0000);} /*메인 공통 [e]*/ /*메인비주얼*/ #main-visual{width:100%;position:relative;overflow:hidden;} #main-visual .mv-slide .d_width{height:100%;} #main-visual .swiper-slide {overflow: hidden;} .mv-slide {height:calc(100vh - 150px);min-height:960px;background-repeat:no-repeat;background-position: center; } .mv-slide:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background-repeat:no-repeat;background-size:cover;background-position:center;transform:scale(110%);} .mv-slide.bg1:before{background-image:url(../img/mv-bg01.png);} .mv-slide.bg2:before{background-image:url(../img/mv-bg02.png);} .active .mv-slide:before{animation:bg-scale 4s ease-out alternate both;} .mv-slide .mv-tit {width:100%;font-size:1.125rem;line-height:1.4;padding:16rem 0 23rem;} .mv-slide .mv-tit .slogan{font-size:2.625rem;font-weight:500;color:#121314;letter-spacing:-.0825rem;margin-left:-5px;} .mv-slide .mv-tit .tit{font-size:4.25rem;font-weight:900;margin:15px 0 25px -10px;line-height:1;color:var(--main-color);letter-spacing:-.0825rem;} .mv-slide .mv-tit > p{word-break:keep-all;} .mv-slide-ctrl{position:absolute;top:33rem;left:50%;transform:translateX(-50%);z-index:9;font-size:.9rem;} .mv-slide-ctrl .progress{display:inline-block;width:400px;height:2px;background:#0002;position:relative;margin:0 30px 0 0;} .mv-slide-ctrl .progress .progress-bar{position:absolute;left:0;width:0;height:100%;background:#000;} .mv-slide-ctrl .progress.active .progress-bar {opacity: 1;} .mv-slide-ctrl .progress.animate .progress-bar{transition: width linear; transition-delay: unset; width: 100%; transition-duration: 7.5s;} .mv-slide-ctrl a{color:#333;} .mv-slide-ctrl .ico-prev:before{content:"\f060";} .mv-slide-ctrl .ico-next:before{content:"\f061";} .mv-slide-ctrl .ico-pause, .mv-slide-ctrl .ico-play{margin:0 10px !important;} .mv-slide-ctrl .ico-pause:before, .mv-slide-ctrl .ico-play:before{font-size:inherit !important;} .mv-slide-ctrl .swiper-pagination{color:#0006;font-size:1.3rem;vertical-align:sub;} .mv-slide-ctrl .swiper-pagination em{color:#000;} .mv-slide-ctrl .pager{display:flex;margin-right:20px;} .mv-slide-ctrl .pager a{display:block;width:10px;height:7px;background:#0005;margin:0 3px;border-radius:0;} .mv-slide-ctrl .pager a.on{width: 30px;background:var(--main-color);} .mv-slide-ctrl .pager a:hover{background:var(--main-color);} /*swiper 컨트롤 커스텀*/ .swiper-button-next, .swiper-button-prev{background:none;position:static;margin:0;width:auto;height:auto;} .swiper-pagination{position:static;width:auto;} /* 메인 비주얼 :: 텍스트 :: active효과 */ .mv-slide .mv-tit p:not(.tit), .mv-slide .mv-tit p.tit span {opacity:0;display:block;} .mv-slide .mv-tit p.tit span {padding:4px 0;} .active .mv-slide .mv-tit .slogan, .active .mv-slide .mv-tit .txt, .active .mv-slide .mv-tit .tit span {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;} .active .mv-slide .mv-tit .tit span:nth-child(1){animation-delay:0.15s;} .active .mv-slide .mv-tit .tit span:nth-child(2){animation-delay:0.3s;} .active .mv-slide .mv-tit .txt{animation-delay:0.45s;} .active .mv-slide .mv-tit .tit em {max-width:100%;display:inline-block;position:relative;background:var(--main-color);color:#fff;padding:0 5px;animation:titFade 1s .6s cubic-bezier(.4,0,0,1) both;font-weight:600;} .active .mv-slide .mv-tit .tit em:before {content: "";display:inline-block;animation:titCover 1.3s .5s cubic-bezier(.4,0,0,1) both;position:absolute;width:100%;height:100%;top: 0px;left: 0;overflow: hidden;background:#fff;z-index:1;} /* 메인 비주얼 :: 텍스트 :: prev효과 */ .swiper-slide-prev .mv-slide .mv-tit .slogan, .swiper-slide-prev .mv-slide .mv-tit .tit span, .swiper-slide-prev .mv-slide .mv-tit .txt{ animation: text-active-animation-reverse 0.75s cubic-bezier(0.4, 0, 0.2, 1) both; } .swiper-slide-prev .mv-slide .mv-tit .slogan{animation-delay:0s;} .swiper-slide-prev .mv-slide .mv-tit .tit span:nth-child(1){animation-delay:0.05s;} .swiper-slide-prev .mv-slide .mv-tit .tit span:nth-child(2){animation-delay:0.1s;} .swiper-slide-prev .mv-slide .mv-tit .txt{animation-delay:0s;} @keyframes bg-scale { 0% {transform:scale(110%);} 100% {transform:scale(100%);} } @keyframes titCover{ 0%{transform:scaleX(0);transform-origin:left center;} 50%{transform:scaleX(1);transform-origin:left center} 51%{transform:scaleX(1);transform-origin:right center} 100%{transform:scaleX(0);transform-origin:right center} } @keyframes titFade{ 0%{opacity:0;} 50%{opacity:0;} 51%{opacity:1;} 100%{opacity:1;} } @keyframes text-active-animation { from { opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(100px); transform: translateX(100px); } to { opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes text-active-animation-reverse { from { opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateX(0); transform: translateX(0); } to { opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(-200px); transform: translateX(-200px); } } @keyframes text-fade-out { from { opacity:1.0;filter:Alpha(opacity=100); } to { opacity:0;filter:Alpha(opacity=0); } } .mv-sch{width:100%;position:absolute;bottom:260px;z-index:9;} .mv-sch .tit{font-size:1.5rem;font-weight:500;color:#121314;margin-bottom:10px;} .mv-sch .tit:before{content:"\f058";color:var(--main-color);font-family:fontAwesome;font-weight:900;vertical-align:middle;font-size:1.2rem;margin-right:10px;} .mv-sch .search-wrap{display:flex;position:relative;} .mv-sch .input-wrap{background:#fff;border-radius:.5rem;padding:20px 50px;font-size:1.5rem;color:#8a8a8a;font-weight:500;box-shadow:0 10px 20px #0003;border-radius:80px;margin-right:20px;} .mv-sch .input-date{color:var(--main-color);} .mv-sch input{width:250px;margin:0 10px;border:none;font-weight:700;border-bottom:2px solid var(--main-color);} .mv-sch input::placeholder{color:var(--main-color);} .mv-sch .btn-d{width:250px;font-size:1.3rem;font-weight:600 !important;position:relative;background:var(--dark-color);border-color:var(--dark-color);border-radius:80px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 10px 20px #0003;} .mv-sch .btn-d:after{content:"\f058";color:#fff;font-family:fontAwesome;font-weight:900;vertical-align:middle;font-size:1.1rem;margin-left:10px;} .mv-sch .btn-d:before{content:"";width:15px;height:15px;background:var(--dark-color);position:absolute;top:50%;left:-10px;transform:rotate(45deg) translateY(-50%);transition:all .2s;} .mv-sch .btn-d:hover{background:var(--dgray1);border-color:var(--dgray1);} .mv-sch .btn-d:hover:before{background:var(--dgray1);} .mv-sch .btn-d.changed, .mv-sch .btn-d.changed:before{animation:btnMainBlink .5s ease-in-out infinite alternate;} .mv-sch .balloon-tip{position:absolute;top:-30px;left:23.8%;} .balloon-tip{width:max-content;background:linear-gradient(90deg, #51BC1D, #1B9E52, #51BC1D);color:#fff;padding:8px 17px;border-radius:.5rem;font-size:.925rem;box-shadow:0 2px 5px rgba(0,0,0,0.2);background-size: 200% 100%;animation: shimmer 5s infinite linear, fadeInUp .3s .4s both;opacity:0;} .balloon-tip:before {content:"";position:absolute;bottom:-6px;left:27px;border-width:7px 7px 0 7px;border-style:solid;border-color:#37ae36 transparent transparent transparent;} .balloon-tip i{animation:blink 1.5s infinite;} .mv-sch-modal{width:1200px;} .mv-sch-modal .indent{padding:40px 30px;} .mv-sch-modal h2.tit{font-size:2rem;letter-spacing:-.1rem;margin:0 0 25px;} .mv-sch-modal p.tit{font-size:1.375rem;font-weight:500;color:#121314;margin:0 0 5px;} .mv-sch-modal p.tit span{color:var(--dark-color);font-weight:900;} .mv-sch-modal .rmd-play-list{position:relative;justify-content:space-between;margin:10px 0 0;overflow:hidden;} .mv-sch-modal .rmd-play-list:before{content:"";width:100%;height:100%;background:#fff;position:absolute;top:0;left:0;z-index:2;animation:loadingOut 1s 3.4s;visibility:hidden;} @keyframes loadingOut { 0%{left:0%;visibility:visible;} 100%{left:-100%;visibility:hidden;} } .mv-sch-modal .rmd-play-list a{width:calc(50% - 20px);padding:15px 20px;} .mv-sch-modal .rmd-play-list a:nth-child(n+3){border-top:0;} .rmd-play-list.num{counter-reset:num;} .rmd-play-list.num a{display:flex;border-bottom:1px solid #eaeaea;border-top:1px solid #eaeaea;align-items:center;} .rmd-play-list.num a:before{min-width:35px;display:inline-block;counter-increment:num;content:counter(num);font-size:1.75rem;font-weight:900;color:#000;} .rmd-play-list.num .cont{width:calc(100% - 150px);} .rmd-play-list.num .subject{margin-bottom:5px;} .rmd-play-list.num .thumb{width:140px;margin-left:10px;} .rmd-play-list.num .thumb .item{padding:3px 10px;font-size:.8rem;} .mv-sch-modal .chk-list{font-size:1rem;font-weight:300;position:flex;} .mv-sch-modal .chk-list li{position:Relative;padding:3px 0;} .mv-sch-modal .chk-list li:before{content:"";width:18px;height:18px;background:#fff;border:1px solid #dadada;margin:0 15px 0 0;display:inline-block;vertical-align:middle;} .mv-sch-modal .chk-list li:after{content:"\f00c";font-family:fontAwesome;color:#f66;font-size:1.125rem;position:absolute;top:0;left:5px;} /*맞춤형정보 모달창 로딩*/ .mv-sch-modal .load-wrap{position:relative;} .mv-sch-modal .load-wrapper{height:calc(100% + 20px);top:-10px;background:rgb(255 255 255 / 85%);backdrop-filter:blur(7px);justify-content:unset;} .mfix-nav{position:fixed;top:50%;right:40px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:end;z-index:10;color:#fff;font-size:.9rem;font-weight:500;} .mfix-nav a{padding:10px 0;position:relative;} .mfix-nav a .txt{display:inline-block;width:0;height:0;opacity:0;overflow:hidden;text-indent:-999px;padding:0;border-radius:40px;background:linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,44,123,.8), rgba(0,0,0,.6));background-size: 200% 100%;animation: shimmer 3s infinite linear;transition:all .3s;} .mfix-nav a.on .txt{position:absolute;right:40px;top:7px;width:max-content;height:auto;opacity:1;text-indent:0;padding:8px 20px;line-height:1.2;} .mfix-nav a .bullet{width:10px;height:10px;border-radius:50%;background:#0004;display:inline-block;margin-left:20px;position:relative;transition:all .2s;} .mfix-nav a.on .bullet{background:var(--main-color);} .mfix-nav a .bullet:before{content:"";width:40px;height:40px;border:1px solid #0000;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .2s;} .mfix-nav a.on .bullet:before{border-color:var(--main-color);} .mfix-nav a:not(.on) .bullet:hover{background:#0009;} .mfix-nav a:not(.on) .bullet:hover:before{border-color:#0003;} .mfix-nav a#nav_btn_2.on .bullet, .mfix-nav a#nav_btn_4.on .bullet{background:#fff;} .mfix-nav a#nav_btn_2.on .bullet:before, .mfix-nav a#nav_btn_4.on .bullet:before{border-color:#fff;} .mfix-nav a.on .bullet:after{content:"";position:absolute;top:50%;left:50%;width:55px;height:55px;background:radial-gradient(#1074F5cc, #fff5);-webkit-transform:translate(-50%, -50%) scale(0.1, 0.1); transform:translate(-50%, -50%) scale(0.1, 0.1);border-radius:50%;-webkit-animation:pulsate 1.5s ease-out;animation:pulsate 1.5s ease-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;opacity:0;z-index:-1; } .mfix-nav:before{content: "";height:calc(100% - 40px);width:2px;background:linear-gradient(180deg, #1074F555, #1074F5cc, #1074F555);position:absolute;right:4px;top:20px;animation:length 3s both infinite;} @-webkit-keyframes length{ 0%{height:0;opacity:1;} 50%{height:calc(100% - 40px);} 100%{height:calc(100% - 40px);opacity:0;} } @-webkit-keyframes pulsate{ 0%{ -webkit-transform:translate(-50%, -50%) scale(0.1, 0.1); transform:translate(-50%, -50%) scale(0.1, 0.1); opacity:0; } 50%{ -webkit-transform:translate(-50%, -50%) scale(1, 1); transform:translate(-50%, -50%) scale(1, 1); opacity:1; } 100%{ -webkit-transform:translate(-50%, -50%) scale(1.2, 1.2); transform:translate(-50%, -50%) scale(1.2, 1.2); opacity:0; } } @keyframes pulsate{ 0%{ -webkit-transform:translate(-50%, -50%) scale(0.1, 0.1); transform:translate(-50%, -50%) scale(0.1, 0.1); opacity:0; } 50%{ -webkit-transform:translate(-50%, -50%) scale(1, 1); transform:translate(-50%, -50%) scale(1, 1); opacity:1; } 100%{ -webkit-transform:translate(-50%, -50%) scale(1.2, 1.2); transform:translate(-50%, -50%) scale(1.2, 1.2); opacity:0; } } #mv-age{margin-top:-100px;position:relative;z-index:9;} .mv-age-list{background:#0003;color:#fff;font-weight:500;backdrop-filter:blur(5px);} .mv-age-list ul{display:flex;align-items:flex-end;text-align:center;font-size:1.25rem;line-height:1.2;} .mv-age-list ul li{flex:1;height:100px;position:relative;} .mv-age-list ul li a{height:100%;display:block;padding:35px 0;border-right:1px solid #fff4;} .mv-age-list ul li:first-child a{border-left:1px solid #fff4;} .mv-age-list ul li.active a{background:var(--main-color);} .mv-age-list ul li a:before{content:"\f058";width:100%;padding:30px 0 10px;color:#fff;font-family:fontAwesome;font-weight:900;vertical-align:middle;font-size:1rem;display:block;position:absolute;top:0;opacity:0;transition:all .2s;} .mv-age-list ul li:not(.active) a:hover:before, .mv-age-list ul li.active a:before{opacity:1;top:-25px;} .mv-age-list ul li.active a:before{background:var(--main-color);} .mv-age-list ul li:not(.active) a:hover:before{background:linear-gradient(180deg, #919191 50%, #0000);} .mv-age-list ul li:not(.active) a:hover{background:#919191;} .mv-age-list ul li.active a, .mv-age-list ul li:not(.active) a:hover{border:0;} .mv-age-list ul li a:after{content:"";width:20px;height:20px;background:var(--main-color);transform:rotate(45deg) translateX(-50%);position:absolute;bottom:-15px;left:50%;opacity:0;} .mv-age-list ul li.active a:after{opacity:1;} .mv-age-cont{background:var(--basic-bg);height:0px;overflow:hidden;transition:all .3s;} .mv-age-cont.active{height:auto;} .mv-age-cont > .d_width{padding:50px 0 30px;justify-content:space-between;} .mv-age-cont .tit-wrap{width:500px;} .mv-age-cont .tit-wrap .tit{font-size:2.125rem;color:#121314;font-weight:700;word-break:keep-all;line-height:1.4;} .mv-age-cont .tit-wrap .tit .badge{vertical-align:text-bottom;font-size:1.2rem;} .mv-age-cont .tit-wrap .txt{font-size:1.5rem;font-weight:700;line-height:1.3;margin:20px 0 30px;} .mv-age-cont .tit-wrap .txt em{font-weight:inherit;} .mv-age-cont .tit-wrap .info{font-size:1.1rem;color:#555;line-height:1.8;} .mv-age-cont .tit-wrap .info li:before{content:"\f00c";font-family:fontAwesome;font-size:.9rem;vertical-align:middle;color:var(--main-color);margin:0px 10px 0 0;font-weight:700;} .mv-age-cont .cont{width:calc(100% - 540px);} .mv-age-cont .cont > *{display:block;width:calc((100% / 3) - 20px);margin:10px;} /*.rmd-play-list 추천발달지원놀이*/ .rmd-play-list{display:flex;flex-wrap:wrap;margin:-10px;} .rmd-play-list .thumb{aspect-ratio:1/.58;border-radius:.5rem;margin:0 0 10px;} .rmd-play-list .thumb img{filter:brightness(.95);transition:all .8s;transform-origin:50% 50%;} .rmd-play-list:hover, .rmd-play-list a:hover{cursor:url('../img/link-cursor2.png') 36 36,pointer;} .rmd-play-list a:hover .thumb img{transform:scale(1.07) translate(-50%, -50%);filter:brightness(1.05);} .rmd-play-list .thumb .item{position:absolute;top:0;right:10px;display:inline-block;padding:5px 15px;border-radius:0 0 8px 8px;background:#919191;z-index:1;color:#fff;font-size:.9rem;} .rmd-play-list .thumb .item.c1{background:#272727;} .rmd-play-list .thumb .item.c2{background:#3C5379;} .rmd-play-list .subject{color:#121314;line-height:1.5;font-size:1.125rem;font-weight:500;} .rmd-play-list .subject .badge{height:100%;margin-right:5px;} .rmd-play-list a .subject > span:not(.badge){background:linear-gradient(to bottom, transparent 97%, var(--main-color) 0) left center no-repeat;background-size:0;transition:all .3s;} .rmd-play-list a:hover .subject > span:not(.badge){background-size:100%;color:var(--main-color);} /*.rmd-play-list 추천발달지원놀이*/ .mv-age-cont .btn-wrap{display:flex;background:#333;color:#fff;font-weight:700;font-size:1.25rem;text-align:center;} .mv-age-cont .btn-wrap a{flex:1;padding:25px 10px;border-right:1px solid #fff2;} .mv-age-cont .btn-wrap a:last-child{border:0;} .mv-age-cont .btn-wrap a em{color:var(--light-color);font-weight:inherit;} .mv-age-cont .btn-wrap a:hover{background:#3C5379;} /*스켈레톤 로딩*/ .skeleton-wrapper .bg{display:block;background:linear-gradient(90deg,#0002 25%,#0001 50%,#0002 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite linear;} @keyframes shimmer { 0% { background-position: -100%; } 100% { background-position: 100%; } } .mv-age-cont .skeleton-wrapper .tit{height:55px;} .mv-age-cont .skeleton-wrapper .txt{margin:20px 0 30px;} .mv-age-cont .skeleton-wrapper .txt .bg{height:30px;margin:3px 0;} .mv-age-cont .skeleton-wrapper .txt .bg:first-child{width:80%;} .mv-age-cont .skeleton-wrapper .info li{height:25px;margin:7px 0;width:60%;} .mv-age-cont .skeleton-wrapper .info li:before{content:"";} .mv-age-cont .skeleton-wrapper .subject .bg{height:25px;} .mv-age-cont .skeleton-wrapper .rmd-play-list{cursor:default;} .link-more-bx.skeleton-wrapper .cont{width:calc(100% - 300px);} .link-more-bx.skeleton-wrapper > .tit{width:calc(100% - 300px);height:33px} .link-more-bx.skeleton-wrapper .btn-wrap{width:240px;height:50px;border-radius:50px;} .link-more-bx.skeleton-wrapper .cont .tit{width:40%;height:33px;margin:0 0 5px;} .mv-sch-modal .skeleton-wrapper .chk-list li:before, .mv-sch-modal .skeleton-wrapper .chk-list li:after{display:none;} .mv-sch-modal .skeleton-wrapper .chk-list li{height:25px;margin:7px 0;} .mv-sch-modal .skeleton-wrapper .chk-list li:nth-child(1){width:70%;} .mv-sch-modal .skeleton-wrapper .chk-list li:nth-child(2){width:50%;} .mv-sch-modal .skeleton-wrapper .chk-list li:nth-child(3){width:30%;} #mv-age .item-control{position:relative;width:90px;height:90px;border-radius:50%;margin:40px 0 0;border:2px solid #0002;} #mv-age .item-control > a{display:flex;width:100%;height:100%;align-items:center;justify-content:center;position:absolute;top:0;left:0;margin:0;color:#0007;} #mv-age .item-control a.ico-pause:before{font-size:inherit;} #mv-age .item-control .circle-progress {position:absolute;top:-3px;left:-3px;width:92px;height:92px;/*stroke-dasharray:500;stroke-dashoffset:500;*/transform:rotate(-90deg);opacity:0;} #mv-age .item-control.play .circle-progress{/*animation:circleLine 5s both linear infinite;*/opacity:1;} @media only screen and (max-height:1080px) and (min-width:1800px){ .d_width{width:1400px;} .mv-slide{min-height:900px;} .mv-slide .mv-tit {font-size:1.1rem;padding:13.5rem 0 24rem;} .mv-slide .mv-tit .slogan{font-size:2.2rem;margin-left:5px;} .mv-slide .mv-tit .tit{font-size:3.8rem;margin:10px 0 20px;} .mv-slide-ctrl{top:28.7rem;} .mv-sch{bottom:180px;} #mv-age{margin-top:-80px;} .mv-age-list ul li{height:80px;font-size:1.125rem;} .mv-age-list ul li a{padding:30px 0;} .mv-age-list ul li a:before{padding:15px 0 0;} .mv-age-list ul li:not(.active) a:hover:before, .mv-age-list ul li.active a:before{top:-15px;} .mv-sch .tit{font-size:1.3rem;} .mv-sch .input-wrap, .mv-sch .btn-d{font-size:1.125rem;} } @media only screen and (max-width:1600px){ .mv-slide, [id*="mc-cont"]{height:auto;min-height:auto;} #mc-cont2 > .d_width > .center, #mc-cont3 > .d_width > .center{position:relative;top:unset;left:unset;transform:none;} .mv-slide .mv-tit {font-size:1.1rem;padding:12rem 0 24rem;} .mv-slide .mv-tit .slogan{font-size:2.2rem;margin-left:5px;} .mv-slide .mv-tit .tit{font-size:3.7rem;margin:15px 0 20px;} .mv-slide-ctrl{top:26rem;} .mv-sch{bottom:140px;} #mv-age{margin-top:-70px;} .mv-age-list ul li{height:70px;font-size:1.125rem;} .mv-age-list ul li a{padding:25px 0;} .mv-age-list ul li a:before{padding:15px 0 0;} .mv-age-list ul li:not(.active) a:hover:before, .mv-age-list ul li.active a:before{top:-15px;} .mv-sch .tit{font-size:1.3rem;} .mv-sch .input-wrap, .mv-sch .btn-d{font-size:1.125rem;} } /*메인콘텐츠*/ #mc-cont1{} #mc-cont1 .left-bx, #mc-cont1 .right-bx{position:relative;height:100%;} #mc-cont1 .left-bx article{width:50vw;height:100%;padding:10.41vh 7.8125vw;} #mc-cont1 .right-bx article{width:50vw;height:100%;padding:6.2vh 4.16vw;} #mc-cont1 .right-top-bx, #mc-cont1 .right-btm-bx{height:50%;position:relative;} #mc-cont1 .right-bx h3.tit{font-size:2.5rem;font-weight:900;margin:0 0 20px;} .mintro{background:url(../img/mc-bg01.png) no-repeat 50% 50% /cover;} .mage{background:url(../img/mc-bg01-2.png) no-repeat 50% 50% /cover;} .mksied{display:block;height:100%;background:url(../img/mc-bg01-3.png) no-repeat 50% 50% /cover;color:#fff;} .mage:before, .mksied:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;transition:all .2s;} .mage:before{background:#000;opacity:.05;} .mksied:before{background:#1074F5cc;} .mage .cont, .mksied .cont{position:relative;font-size:1.125rem;} .mintro .mc-tit{font-size:3.75rem;margin:30px 0 50px;} .mintro .mc-txt{font-weight:400;margin:0 0 50px;} .mintro .info li{padding:5px 0;} .mintro .info li:before{content:"\f058";font-family:fontAwesome;vertical-align:middle;color:var(--main-color);margin:0px 10px 0 0;font-weight:700;} .mage .txt{color:#7C7C7C;margin:0 0 40px;} .mage .btn-wrap{display:flex;margin:-5px;flex-wrap:wrap;} .mage .btn-wrap .btn-d{width:calc(25% - 10px);margin:5px;font-size:1.1rem;line-height:60px;color:#121314;} .mage .btn-wrap .btn-d:hover{color:#fff;} .mksied h3.tit{color:#fff;display:inline-block;transition:all .2s;} .mksied .txt{color:#E0EEFE;} .mksied .stit{margin: 50px 0 0;font-size:1.375rem;font-weight:900;} .mksied .info{font-size: 1.375rem;font-weight:200;line-height: 1.2;} .mksied .info span{font-size:3.125rem;} .mksied .more{display:block;width:60px;height:60px;font-size:2rem;font-weight:100;text-align:center;line-height:60px;background:#fff;color:var(--main-color);position:absolute;top:0;right:0;transition:all .3s;} .mksied .video-btn{font-size: 1.375rem;color:#fff;border-bottom:1px solid #fff;display:inline-block;padding:0 5px;position:relative;margin: 40px 0 0;} .mksied > a{display:block;} .mksied:hover:before{background:#fffc;} .mksied:hover{color:#333;} .mksied:hover h3.tit{color:#121314;} .mksied:hover .txt{color:#555;} .mksied:hover .video-btn{color:#121314;border-color:#121314;} .mksied .ksied-btn:hover .more{background:var(--dark-color);color:#fff;} .mksied .ksied-btn:hover h3.tit{background:var(--dark-color);color:#fff;} .mksied .ksied-btn:hover .txt{color:var(--dark-color);text-decoration:underline;} .mksied .video-btn:hover{background:var(--dark-color);color:#fff;font-weight:700;} /* animated */ .effect-box{position: relative;width:0;height:100%;transition:all 0.4s ease-in-out;overflow:hidden;} .effect-box.bg-effect:before{display: block; width: 100%; height: 100%; content: ''; position: absolute; top: 0; left: 0; background-color: var(--main-color); transform-origin: 0 50%; transition: transform .6s cubic-bezier(0.3, 0, 0.1, 1); transition-delay: 0s; z-index: 3;} .scroll_ani .effect-box{width:100%;} .scroll_ani .effect-box.bg-effect:before{transform: scale(0, 1); transition-delay: .6s; transform-origin: 100% 50%;} #mc-cont2{background:url(../img/mc-bg02.png) no-repeat 50% 50% /cover;} .msite-map{position:relative;justify-content:space-between;} .msite-map .col-1{width:350px;} .msite-map .col-2{width:400px;margin:0 20px;} .msite-map .col-3{width:calc(100% - 790px);max-width:600px;} .mmap-wrap{position:relative;} .mmap{width:100%;height:724px;position:relative;} .mmap:before{content:"";width:100%;height:100%;background:url(../img/mmap-bg.png);background-size:100%;position:absolute;top:0;left:0;} .mmap img{position:absolute;max-width:100%;top:0;left:0;display:none;} .mmap img.on{display:block;} .mmap a[class*="map"]{position:absolute;z-index:9;background:#626262;border:0;padding:0 1rem;font-size:.825rem;} .mmap a[class*="map"]:hover{background:#000;} .mmap a[class*="map"].on{background:#4ebf28;font-weight:700;} .mmap a.map01{top: 18%;left: 16%;} .mmap a.map02{bottom: 30%;right: 0%;} .mmap a.map03{bottom: 44%;right: 16%;} .mmap a.map04{top: 24%;left: 0%;} .mmap a.map05{bottom: 29%;left: 8%;} .mmap a.map06{top: 43%;left: 28%;} .mmap a.map07{bottom: 37%;right: 0;} .mmap a.map08{top: 37%;left: 25%;} .mmap a.map09{top: 24%;left: 26%;} .mmap a.map10{top: 12%;right: 23%;} .mmap a.map11{top: 31%;left: 43%;} .mmap a.map12{top: 36%;left: 4%;} .mmap a.map13{bottom: 43%;left: 13%;} .mmap a.map14{bottom: 23%;left: 17%;} .mmap a.map15{bottom: 55%;right: 12%;} .mmap a.map16{bottom: 34%;right: 30%;} .mmap a.map17{bottom: 2%;left: 0;} .mmap-result > div{margin-bottom:20px;} .mmap-result > div:last-child{margin-bottom:0;} .mmap-result .result{} .mmap-result .result .cont{height:560px;overflow-y:scroll;padding-right:20px;margin:0 0 20px;} .mmap-result .result .cont::-webkit-scrollbar {width: 5px;} .mmap-result .result .cont::-webkit-scrollbar-thumb {background:var(--main-color);} .mmap-result .result .cont::-webkit-scrollbar-track {background:#fff;} .mmap-result .result .cont li{background:#fff;border-radius:.5rem;margin:5px 0;padding:20px;transition:all .3s;} .mmap-result .result .cont li:not(.nodata):hover{background:#f6f6f6;} .mmap-result .result .cont li.nodata .subject{color:#808080;} .mmap-result .result .cont li.nodata .subject:before{color:#777;} .mmap-result .result .cont li.nodata .info{color:#919191;} .mmap-result .result .cont .subject{color:var(--main-color);font-size:1.125rem;margin-bottom:5px;font-weight:700;display:inline-block;line-height:1.2;} .mmap-result .result .cont a.subject{border-bottom:1px solid var(--main-color);} .mmap-result .result .cont a.subject:after{content:"\f08e";font-family:fontAwesome;font-size:.9rem;margin-left:10px;vertical-align:baseline;font-weight:300;} .mmap-result .result .cont .subject:before{font-family:fontAwesome;font-size:1rem;margin-right:10px;vertical-align:baseline;color:var(--dark-color);transition:all .2s;} .mmap-result .result .cont .subject.ico1:before{content:"\f0ac";} .mmap-result .result .cont .subject.ico2:before{content:"\f1ad";font-weight:300;} .mmap-result .result .cont li:not(.nodata) a.subject:hover, .mmap-result .result .cont li:not(.nodata) a.subject:hover:before{color:var(--sub-color);} .mmap-result .result .cont .info{font-size:.875rem;display:flex;flex-wrap:wrap;} .mmap-result .result .cont .info dt{width:50px;font-weight:500;} .mmap-result .result .cont .info dd{width:calc(100% - 50px);word-break:keep-all;} @media only screen and (max-height:1080px){ .mintro .mc-tit{font-size:3.3rem;} .msite-map .col-3{max-width:550px;} } #mc-cont3{background:#000;overflow:hidden;} #mc-cont3:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;opacity:1;background-image:url(../img/mc-bg03.png);background-size:cover;background-position:50% 50%;transition:opacity 0.6s ease-in-out;} /* #mc-cont3.bg1:before{background-image:url(../img/mc-bg03.png);animation:fadeIn1 2s both alternate;} #mc-cont3.bg2:before{background-image:url(../img/mc-bg03-2.png);animation:fadeIn2 2s both alternate;} #mc-cont3.bg3:before{background-image:url(../img/mc-bg03-3.png);animation:fadeIn3 2s both alternate;} #mc-cont3.bg4:before{background-image:url(../img/mc-bg03-4.png);animation:fadeIn4 2s both alternate;} #mc-cont3.fade:before{opacity:0;} @keyframes fadeIn1{from{opacity:.6;}to{opacity:1;scale:1.03;}} @keyframes fadeIn2{from{opacity:.6;}to{opacity:1;scale:1.03;}} @keyframes fadeIn3{from{opacity:.6;}to{opacity:1;scale:1.03;}} @keyframes fadeIn4{from{opacity:.6;}to{opacity:1;scale:1.03;}} */ .muse .btn-wrap a{display:block;font-size:1.5rem;font-weight:900;color:#fff;margin:5px 0;padding:20px;border-radius:1rem;} .muse .btn-wrap a [class*="ico"]{content:"";width:60px;height:60px;background:url(../img/muse-ico-wrap.png);display:inline-block;margin-right:40px;vertical-align:middle;opacity:.8;transition:all .3s;} .muse .btn-wrap a .ico2{background-position-x:-60px;} .muse .btn-wrap a .ico3{background-position-x:-120px;} .muse .btn-wrap a .ico4{background-position-x:-180px;} .muse .btn-wrap a .ico5{background-position-x:-240px;} /*faq 스타일 변경*/ .muse .faq-list{border-color:rgba(255,255,255,.24);min-height:581px;} .muse .faq-list > li{border-color:rgba(255,255,255,.24);} .muse .faq-list li .answer{background:#fff;margin:10px 0 30px;font-weight:300;border-radius:1rem;} .muse .faq-list li .answer > *{margin:0 0 15px;} .muse .faq-list li .answer > *:last-child{margin:0;} .muse .faq-list li .answer .tit{font-size:1.375rem;color:var(--main-color);font-weight:700;} .muse .faq-list li .answer .stit{font-size:1.25rem;} .muse .faq-list li .question:after{color:#fff;} .muse .faq-list li a:hover [class*="ico"], .muse .faq-list li.active a [class*="ico"]{opacity:1;} .muse .faq-list li.active a{background:var(--main-color);} .muse .faq-list li:not(.active) a:hover{background:rgba(0,0,0,.6);} #mc-cont4{} .mshort{display:flex;} .mshort a{width:25%;max-height:480px;aspect-ratio:1/.95;padding:60px;position:relative;background-color:#919191;background-size:cover;background-position:50% 50%;} .mshort a:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;opacity:.85;} .mshort a.bg1{background-image:url(../img/mshort01.png);} .mshort a.bg2{background-image:url(../img/mshort02.png);} .mshort a.bg3{background-image:url(../img/mshort03.png);} .mshort a.bg4{background-image:url(../img/mshort04.png);} .mshort a.bg1:before{background:var(--main-color);} .mshort a.bg2:before{background:var(--sub-color);} .mshort a.bg3:before{background:var(--point-color1);} .mshort a.bg4:before{background:var(--point-color2);} .mshort a p{position:relative;color:#fff;font-weight:700;} .mshort a p.item{font-size:1.5rem;color:#fffc;} .mshort a p.stit{font-size:1.25rem;font-weight:300;color:#ffffffe6;margin:20px 0 5px;} .mshort a p.tit{font-size:2.5rem;line-height:1.2;font-weight:900;} /* animated */ .mshort a:after{content: '';display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; transform-origin: 0 50%; transition: transform .6s cubic-bezier(0.3, 0, 0.1, 1); transition-delay: 0s; z-index:11;} .scroll_ani .mshort a:after{transform: scale(0, 1); transition-delay: .6s; transform-origin: 100% 50%;} .scroll_ani .mshort a:nth-child(1):after{transition-delay:.15s;} .scroll_ani .mshort a:nth-child(2):after{transition-delay:.3s;} .scroll_ani .mshort a:nth-child(3):after{transition-delay:.45s;} .scroll_ani .mshort a:nth-child(4):after{transition-delay:.6s;} /*cm-fill*/ @media all and (min-width:801px) { .cm-fill-btn .cm-fill {position: absolute;display: block;width: 0px;height: 0px;transform: translate(-50%,-50%);border-radius: 50%;background: var(--main-color);transition: width 0.5s ease-out, height 0.5s ease-out;} .cm-fill-btn:hover .cm-fill, .cm-fill-btn:focus .cm-fill{width: 40vw;height: 40vw;transition: width 0.5s ease-in 0.1s, height 0.5s ease-in 0.1s;} } @media all and (min-width:801px){ .mshort a{position: relative; overflow:hidden;} .mshort .cm-fill-btn .cm-fill{transition: width 0.3s ease-out, height 0.3s ease-out;} .mshort .cm-fill-btn:hover .cm-fill, .mshort .cm-fill-btn:focus .cm-fill{ width: 80vw; height: 80vw; transition: width 0.3s ease-in 0.1s, height 0.3s ease-in 0.1s;} .mshort a.bg1 .cm-fill{background:var(--dark-color);} .mshort a.bg2 .cm-fill{background:#0089a5;} .mshort a.bg3 .cm-fill{background:#077140;} .mshort a.bg4 .cm-fill{background:#294b93;} } .mnotice{background:var(--basic-bg);padding:90px 0 120px;} .mnotice .mc-tit{font-size:2.625rem;margin:20px 0 60px;} .mnotice h3.tit{margin:0 0 20px;} .mnotice .row{justify-content:space-between;} .mnotice .row > .col_d2{width:calc(50% - 30px);} .mnotice li a{display:block;padding:20px 50px 20px 0;border-bottom:1px solid rgba(0,0,0,.08);position:relative;} .mnotice li .subject{font-size:1.125rem;color:#121314;font-weight:500;} .mnotice li .date{color:#888;font-size:.875rem;font-weight:200;} .mnotice li a:after{content:"\2b";font-family:fontAwesome;font-size:2rem;color:rgba(0,0,0,.15);font-weight:100;position:absolute;top:50%;right:0;transform:translateY(-50%);transition:all .2s;transform-origin:100% 20%;} .mnotice li .subject .badge{margin-right:5px;} .mnotice-list{position:relative;} .mnotice-list .more{color:#376AA8;font-size:.9rem;font-weight:500;position:absolute;top:0;right:0;} .mnotice-list .more:hover{color:#121314;} .mnotice-list a .subject > span:not(.badge){background:linear-gradient(to bottom, transparent 97%, var(--main-color) 0) left center no-repeat;background-size:0;transition:all .3s;} .mnotice-list a:hover .subject > span:not(.badge){background-size:100%;color:var(--main-color);} .mnotice-list a:hover:after{transform:rotate(90deg);color:var(--light-color);} /*tab*/ .mmap-result .tab-btn a{color:#f6f6f6;background:#0005;} .subm-rmd-play .tab-btn a{background:#fff;color:#333;} .subm-rmd-play .tab-btn a.on{background:var(--main-color);color:#fff;} .tab-btn a{font-size:1.125rem;background:#f6f6f6;color:#808080;line-height:45px;border-radius:45px;padding:0 20px;margin:0 5px 0 0;} .tab-btn a.on{background:var(--dark-color);color:#fff;font-weight:700;} .tab-btn a:not(.on):hover{background:#0007;color:#fff;} .tab-txt{border-color:#E4E7EA;} .tab-txt a{background:#0000;position:relative;border:0;font-size:1.25rem;color:#555;border-bottom:4px solid #0000;} .tab-txt a.on{background:#0000;color:var(--main-color);font-weight:900;border-bottom:4px solid var(--main-color);} .tab-txt a:not(.on):hover{color:#121314;border-color:#dadada;} .tab-txt a:after{content:"";height:10px;border-right:1px solid #E4E7EA;position:absolute;top:50%;right:0;transform:translateY(-50%);} .tab-txt:after{border-color:#E4E7EA;} .tab-full:before, .tab-full:after{display:none;} .tab-full{gap:5px;} .tab-full a{min-width:calc(20% - 5px);/* max-width:calc(20% - 5px); */vertical-align:middle;} .tab-full a{display:block;background:#f5f5f5;color:#555;border:3px solid #f5f5f5;} .tab-full a.on{background:#FFF;border-color:var(--main-color);color:var(--main-color);font-weight:700;} .tab-full a:not(.on):hover{background-color:#FFF;border-color:#ccc;font-weight:500;} .tab-full::-webkit-scrollbar{width:100%;height:6px;background:rgba(0,0,0,0);} .tab-full::-webkit-scrollbar-thumb{background:var(--dark-color);} .tab-full::-webkit-scrollbar-track{width:100%;height:6px;background:#00000024;} .tab-idx{display:flex;position:relative;flex-wrap:nowrap;overflow-x:auto;} .tab-idx:before{content:"";width:100%;border-bottom:2px solid #87B9F9;position:absolute;bottom:0;left:0;} .tab-idx a{min-width:20%;flex:0 0 auto;padding:12px 15px;text-align:center;border:1px solid #DADADA;border-left-color:#0000;border-bottom:2px solid #87B9F9;position:relative;background:#fff;} .tab-idx a:first-child{border-left-color:#dadada;} .tab-idx a:last-child{border-right-color:#dadada;} .tab-idx a.active{border-width:2px;border-color:#87B9F9;border-bottom-color:#fff;color:var(--main-color);font-weight:700;} @media only screen and (max-width:1023px){ .tab-full{gap:2px;} .tab-full a{min-width:25%;max-width:25%;font-size:.9rem;} .tab-idx{font-size:.9rem;} .tab-idx a{padding:8px 10px;} } @media only screen and (max-width:767px){ .tab{margin:0 0 1.25rem;} .tab-full a{width:50%;min-width:unset;max-width:50%;} .tab-full a{padding:10px 0;} .tab-txt a{padding:.5rem 1rem;font-size:.925rem;} } @media only screen and (max-width:415px){ .tab-full a{flex:auto;width:100%;max-width:unset !important;} .tab-full a{padding:7px 0;} } /*테이블*/ .t3{border-top:2px solid #000;} .t3 tbody td, .t3 tbody th{border-right:1px solid #ccc;border-bottom:1px solid #ccc;} .t3 tbody td:last-child, .t3 tbody th:last-child{border-right:0;} .t3 tbody th{background:#1074F511;color:#121314;font-weight:500;} .t3 tbody td{color:#555;} /*서브: 공통 박스*/ .bg_wh, .bg_gr, .bx1_wh, .bx2_wh, .bx1_gr, .bx1_rd, .bg_sky, .bx1_sky{padding:20px;margin:25px 0;line-height:1.5;word-break:keep-all;} .bg_sky{background:#EAF2FF !important;} .bx1_sky{background:#f5f5f5;border:1px solid var(--main-color);} .ico-bx{display:flex;} .ico-bx [class*="ico"]{display:block;width:60px;margin-right:20px;height:60px;background-repeat:no-repeat;background-position:50% 50%;} .ico-bx .cont{width:calc(100% - 80px);} .ico-bx .ico1{background-image:url(../img/chk-time-ico.png);} /*발달이정표 - 연령별 발달은 왜 중요할까요 모달*/ /*서브: 공통 타이틀*/ .chk-tit{font-size:1.25rem;font-weight:600;color:var(--main-color);display:inline-block;padding:0 10px;margin:0 0 20px;border-bottom-width:2px;border-bottom-style:solid;} .chk-tit:before{content:"\f058";font-family:fontAwesome;margin-right:5px;font-weight:300;display:inline-block;/* animation:wobbleSm 1s both cubic-bezier(0.63, 0.08, 0.43, 0.88) infinite alternate; */} .title-text-lg{font-size:1.125rem;font-weight:500;color:#121314;margin:0 0 10px;} @keyframes wobbleSm { 0% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 30% { -webkit-transform: translateY(2px); transform: translateY(2px); } 60% { -webkit-transform: translateY(0); transform: translateY(0); } } @media only screen and (max-width:1800px){ } @media only screen and (max-width:1600px){ } @media only screen and (max-width:1440px){ } @media only screen and (max-width:1240px){ } @media only screen and (max-width:1023px){ } @media only screen and (max-width:767px){ .bg_wh, .bg_gr, .bx1_wh, .bx2_wh, .bx1_gr, .bx1_rd, .bg_sky, .bx1_sky{margin:15px 0;} .list-nodata{padding:1.5rem 2rem;} } @media only screen and (max-width:576px){ .list-nodata{padding:1rem 1.5rem;} } @media only screen and (max-width:415px){ } /*서브메인*/ .subm-tit, .sub-tit{margin-top:0;font-weight:500;} .subm-txt, .sub-txt{font-size:1.125rem;color:#555;font-weight:300;} h2.subm-tit:before{content:"";width:10px;height:10px;display:inline-block;border-radius:50%;background:var(--main-color);vertical-align:text-top;margin:0 5px 0 0;} h2.subm-tit{font-size:2.375rem;letter-spacing:-.0875rem;word-break:keep-all;margin-bottom:25px;} h3.subm-tit{font-size:1.875rem;color:var(--dark-color);font-weight:500;} .subm-stit{font-size:1.5rem;font-weight:300;color:#121314;line-height:1.4;margin-bottom:30px;} @media only screen and (max-height:1080px){ h2.subm-tit{font-size:2.125rem;} .subm-stit{font-size:1.25rem;} } /*서브*/ .sub-item{font-size:1.125rem;color:var(--main-color);font-weight:500;} h2.sub-tit{font-size:2.125rem;letter-spacing:-.0875rem;} .sub-tit.link:after{content:"\f061";font-family:fontAwesome;transform:rotate(-45deg);display:inline-block;margin-left:10px;font-size:1rem;color:#fff;text-align:center;width:32px;height:32px;line-height:32px;background:#121314;border-radius:50%;vertical-align:middle;transition:all .3s;} .sub-tit.link:hover{color:var(--main-color);} .sub-tit.link:hover:after{background:var(--main-color);transform:rotate(0deg);} /*서브: 공통*/ .blue-highlight{background:#1074F522;} .red-highlight{background:#f662;} .link-btn{font-weight:500;color:var(--main-color);border-bottom-width:1px;border-bottom-style:solid;} /*링크이동텍스트*/ .link-btn[target=_blank]:after{content:"\f08e";font-family:fontAwesome;display:inline-block;margin:0 5px;font-weight:200;font-size:.9rem;vertical-align:text-bottom;} .link-btn span.num{display:inline-block;text-align:center;padding:0 3px;min-width:16px;line-height:16px;font-size:.8rem;border-radius:16px;color:#fff;background:var(--main-color);font-weight:500;vertical-align:middle;transition:all .2s;} .link-btn:hover span.num{background:#000;} /*링크이동박스*/ .link-more-bx, .link-img-bx{padding:20px 30px;background:#f5f5f5;font-size:1.25rem;font-weight:500;color:#121314;display:flex;justify-content:space-between;align-items:center;} .link-more-bx .btn-d, .intro-img-bx .btn-d{line-height:52px;padding:0 40px;font-size:1rem;font-weight:300;} .link-more-bx .btn-d:after, .intro-img-bx .btn-d:after{content:"\f061";font-family:fontAwesome;display:inline-block;margin-left:20px;font-size:.925rem;} .link-more-bx.blue{background:var(--main-color);color:#fff;} .link-more-bx.blue .btn-d{background:var(--dark-color);border-color:var(--dark-color);} .link-more-bx.blue .btn-d:hover{background:#333;} .link-img-bx{background:#ECEEF2;} .link-img-bx .thumb{width:200px;height:120px;margin-left:40px;background:#fff;border-radius:.5rem;} .link-img-bx .thumb.logo img{height:48px;} /*텍스트 꾸밈*/ .ico-memo:before, .ico-alert:before, .ico-timer:before, .ico-local:before{font-family:'Font Awesome 6 Pro';display:inline-block;margin-right:5px;font-size:1rem;font-weight:400;} .ico-memo:before{content:"\f0f3";} .ico-alert:before{content:"\f06a";color:#F66;} .ico-timer:before{content:"\f34e";margin-right:10px;} .ico-local:before{content:"\f3c5";font-weight:700;} .ico-arrow-cross:before{content:"";width:16px;height:16px;background:url(../img/ico-arrow-cross.png);display:inline-block;margin-right:3px;vertical-align:middle;} .return-ico:before{content:"";display:inline-block;width:20px;height:20px;background:url(../img/icon_filter_reset.svg);background-size:cover;vertical-align:middle;transition:all .3s;} .red-highlight.ico-memo:before{color:#F66;} .ico-chk:before, .chk-bu li:before{content:"\f058";font-family:fontAwesome;vertical-align:middle;color:var(--main-color);margin:0px 10px 0 0;font-weight:700;} .sub-d-list > li:first-child{border-top:1px solid #dadada;} .sub-d-list > li{border-bottom:1px solid #dadada;padding:25px 30px;color:#121314;} .sub-d-list .tit{font-size:1.25rem;font-weight:500;margin-bottom:5px;} .sub-d-list .txt{font-size:1.125rem;font-weight:300;} /*[s] 서브메인*/ .smv-cont{position:absolute;right:calc(50% - 800px);bottom:-170px;z-index:1;opacity:0;animation-fill-mode:both;} @media only screen and (max-height:1080px){ .smv-cont{right:calc(50% - 700px);} } /*[s] 발달이정표 서브메인*/ /*모달창*/ .age-modal {width:660px;background:#d1e1f9;} .age-modal .indent{padding:40px 30px 50px;} .age-modal .bg_sky{margin:0 0 15px;} .age-modal .bg_sky .bx-desc{margin:20px 0 0;} .age-modal h2.tit{font-size:2.3rem;letter-spacing:-.1rem;text-align:center;margin-bottom:30px;} .smv-age{width:620px;background:#ECEEF2e6;z-index:9;} .smv-age > div{padding:27px 60px;text-align:center;} .smv-age .age-list .btn-wrap{text-align:left;} .smv-age .age-list a{width:calc(25% - 4px);margin:2px 0;color:#000;line-height:50px;position:relative;} .smv-age .age-list a:hover, .smv-age .age-list a:focus{background:var(--main-color);border-color:var(--main-color);color:#fff;} .smv-age .age-calc{/* background:var(--main-color) */;background:linear-gradient(90deg, #1074f5, #2ca3f7, #1074f5);background-size: 200% 100%;animation: shimmer 5s infinite linear;} .smv-age .age-calc .chk-tit{color:#fff;} .smv-age .age-calc .input-wrap{width:calc(100% - 100px);display:flex;justify-content:space-between;line-height:60px;background:#fff;border-radius:60px;} .smv-age .age-calc .input-date{width:calc(100% - 150px);} .smv-age .age-calc .input-wrap input{width:100%;border:none;color:#121314;font-weight:700;background:#0000;padding-left:40px;font-size:1.25rem;} .smv-age .age-calc .input-wrap input::placeholder{color:#121314;} .smv-age .age-calc .input-wrap a{line-height:60px;width:150px;background:var(--dark-color);border-color:var(--dark-color);vertical-align:bottom;box-shadow:1px 1px 0px var(--dark-color);} .smv-age .age-calc .input-wrap a.changed{animation:btnMainBlink .5s ease-in-out infinite alternate;} @keyframes btnMainBlink{ 0%{background:var(--dark-color);border-color:var(--dark-color);box-shadow:1px 1px 0px var(--dark-color);} 100%{background:#00184b;border-color:#00184b;box-shadow:1px 1px 0px #00184b;} } .smv-age .age-calc .input-wrap a:hover, .smv-age .age-calc .input-wrap a:focus{background:var(--dgray1) !important;border-color:var(--dgray1) !important;box-shadow:1px 1px 0px var(--dgray1) !important;} .smv-age .age-calc .cont{align-items:center;justify-content:space-between;} .smv-age .age-calc .txt{color:#fff;font-size:1.25rem;padding:0 10px;border-bottom:3px solid #fff;} .subm-age-sec1{margin:80px -10px!important;} .subm-age-sec2{margin:0 0 130px;} .subm-age-sec3{margin:0 0 -140px;} /*발달이정표/우리동네지원정보 공통*/ .img-btn-list > *{width:calc(25% - 20px);height:250px;background:#f5f5f5;background-size:cover;background-position:50% 50%;margin:10px;position:relative;} .img-btn-list a p{width:100%;padding:50px 30px 30px;font-size:1.5rem;font-weight:600;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(0deg, #000c, transparent);line-height:1.2;display:flex;flex-wrap:wrap;align-items:center;gap:5px;word-break:keep-all;/* transition:all .2s; */} .img-btn-list a p span{font-size:1rem;font-weight:300;} .img-btn-list .noimg:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background:url(../img/logo.svg) no-repeat 50% 50%/ 45%;filter:grayscale(1) opacity(.4);} /*발달이정표/우리동네지원정보 공통*/ .subm-age a.bg1{background-image:url(../img/subm-age-img1-g.png);} .subm-age a.bg2{background-image:url(../img/subm-age-img2-g.png);} .subm-age a.bg3{background-image:url(../img/subm-age-img3-g.png);} .subm-age a.bg4{background-image:url(../img/subm-age-img4-g.png);} .subm-age a.bg5{background-image:url(../img/subm-age-img5-g.png);} .subm-age a.bg6{background-image:url(../img/subm-age-img6-g.png);} .subm-age a.bg7{background-image:url(../img/subm-age-img7-g.png);} .subm-age a.bg8{background-image:url(../img/subm-age-img8-g.png);} .subm-age a.bg9{background-image:url(../img/subm-age-img9-g.png);} .subm-age a.bg10{background-image:url(../img/subm-age-img10-g.png);} .subm-age a.bg11{background-image:url(../img/subm-age-img11-g.png);} /*연령활성화*/ .smv-age .age-list a.active{color:#f66;} .smv-age .age-list a.active:hover, .smv-age .age-list a.active:focus{color:#fff;} .smv-age .age-list a.active:after, .subm-age a.active:after{content:"";width:100%;height:100%;border:13px solid #f66;position:absolute;top:0;left:0;animation:blink 1.5s infinite;} .smv-age .age-list a.active:after{border-width:5px;border-radius:50px;} /*hover*/ .img-btn-list a:hover p, .img-btn-list a:focus p{height:100%;display:flex;align-items:center;justify-content:center;font-size:2.3rem;background:#1074F5cc;} .img-btn-list a:hover p span, .img-btn-list a:focus p span{display:none;} .img-btn-list a:not(.active):after {top:0;left:0;border-top-style:solid;border-right-style:solid;} .img-btn-list a:not(.active):before {bottom:0;right:0;border-bottom-style:solid;border-left-style:solid;} .img-btn-list a:not(.active):before, .img-btn-list a:not(.active):after {content:"";position:absolute;width:0%;height:0%;z-index:1;border-color:#152964;border-width:0;} .img-btn-list a:not(.active):hover:after, .img-btn-list a:not(.active):hover:before {border-width:7px;width:100%;animation:aW_nH 0.5s, sW_aH 0.5s, sW_sH 0.8s infinite;animation-delay:0s, .3s, .8s;} @keyframes aW_nH{ from {width:0%;} to {width:100%;} } @keyframes sW_aH{ from{width:100%; height:0%;} to{width:100%; height:100%;} } @keyframes sW_sH{ from{width:100%; height:100%;} to{width:100%; height:100%;} } .sub-half-intro .intro-cont{background:#F5F5F5;} .sub-half-intro .intro-cont > div{width:50%;} .sub-half-intro .intro-cont .cont{width:800px;float:right;padding:100px 0;} @media only screen and (max-height:1080px){ .sub-half-intro .intro-cont .cont{width:700px;} } .sub-half-intro .intro-cont .col-2{background:var(--main-color);position:relative;} .sub-half-intro .intro-cont:nth-child(2n) .col-1{order:1;} .sub-half-intro .intro-cont:nth-child(2n+1) .cont{padding-right:80px;} .sub-half-intro .intro-cont:nth-child(2n) .cont{float:left;padding-left:80px;} .sub-half-intro .intro-cont .tit{font-size:2rem;color:#121314;font-weight:500;} .sub-half-intro .intro-cont .stit{font-size:1.375rem;color:#121314;font-weight:500;margin:20px 0 0;} .sub-half-intro .intro-cont .txt{font-size:1.125rem;font-weight:300;margin:30px 0 0;word-break:keep-all;} .sub-half-intro .intro-cont .txt li{padding-top:8px;padding-bottom:8px;} .sub-half-intro .intro-cont .btn-wrap{margin:20px 0 0;} .sub-half-intro .intro-cont .img{width:100%;height:100%;position:absolute;top:0;left:0;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;} .sub-half-intro .intro-cont.bg1 .img{background-image:url(../img/subm-age-intro1.png);} .sub-half-intro .intro-cont.bg2 .img{background-image:url(../img/subm-age-intro2.png);} .sub-half-intro .intro-cont.bg3 .img{background-image:url(../img/subm-age-intro3.png);} .point-nuri-t{color:#058fe1 !important;} .point-nuri-p{color:#56a315 !important;} .btn-nuri-t{background:#058fe1;border-color:#058fe1;} .btn-nuri-p{background:#56a315;border-color:#56a315;} [class*="btn-nuri"]:hover{background:var(--dgray1);border-color:var(--dgray1);} /*[e] 발달이정표 서브메인*/ /*[s] 발달체크도구 서브메인*/ .ksied-logo{width:200px;} .ksied-logo img{max-width:100%;} .btn-grd1, .btn-grd1:hover{background:linear-gradient(90deg, #5F738B, #435261);border-color:#0000;} .btn-grd2, .btn-grd2:hover{background:linear-gradient(90deg, #1884D1, #0B49CA);border-color:#0000;} .btn-grd3, .btn-grd3:hover{background:linear-gradient(90deg, #51BC1D, #1B9E52);border-color:#0000;} .smv-ksied-btn{width:calc(50% - 40px);right:0;bottom:0;} .smv-ksied-btn a{display:block;background:linear-gradient(90deg,#1884D1cc,#0016b3cc,#1884D1cc);background-size:200% 100%;animation:shimmer 5s infinite linear;color:#fff;padding:40px 0 40px 220px;position:relative;font-size:1.25rem;color:#fff;} .smv-ksied-btn a:before{content:"";width:212px;height:176px;background:url(../img/sv-ksied-ico.png);background-size:cover;position:absolute;left:-5px;bottom:-12px;animation:wobbleSm 1s both cubic-bezier(0.63, 0.08, 0.43, 0.88) infinite alternate;} .smv-ksied-btn .stit em{background-image: linear-gradient(90deg, #F7FF55, #2EEBEA);font-weight:700;background-clip: text;-webkit-background-clip: text;color: transparent;font-family:tvn;font-size:2rem;line-height:1;display:inline-block;} .smv-ksied-btn .tit{font-size:1.875rem;font-weight:700;} .smv-ksied-btn .tit span{background:linear-gradient(to bottom, transparent 97%, #fff 0) left center no-repeat;background-size:0;transition:all .3s;} .smv-ksied-btn a:hover .tit span{background-size:100%;} [id*="subm-ksied-cont"]{padding:110px 0;overflow:hidden;} [id*="subm-ksied-cont"]:last-child{padding-bottom:0;} [id*="subm-ksied-cont"] .col_d2{width:calc(50% - 40px);} [id*="subm-ksied-cont"] > .d_width.row{align-items:center;justify-content:space-between;} #subm-ksied-cont01{background:#F2F4F5;margin-top:-80px;} #subm-ksied-cont02{background:#ECEEF2;} #subm-ksied-cont03{background:#5E728A url(../img/subm-ksied-intro-bg3.png) no-repeat 100% 0/ contain;} #subm-ksied-cont04{} #subm-ksied-cont05{background:#ECEEF2;} #subm-ksied-cont06{background:#F2F4F5;} .info-card-list{display:flex;margin:-10px;flex-wrap:wrap;} .info-card-list > li{flex:1;min-width:calc(33.33% - 20px);margin:10px;padding:25px;background:rgba(0,0,0,.05);border:1px solid #ccc;} .info-card-list.d4 > li{min-width:calc(25% - 20px);max-width:calc(25% - 20px);} .info-card-list .tit{color:var(--main-color);font-weight:700;font-size:1.25rem;padding-bottom:10px;margin-bottom:20px;border-bottom:1px solid #ccc;text-align:center;} .info-card-list .txt:not(.bu){text-align:center;} [id*="subm-ksied-cont"] .img{position:relative;} [id*="subm-ksied-cont"] .img img{max-width:100%;position:relative;} [id*="subm-ksied-cont"] .img:before, [id*="subm-ksied-cont"] .img:after{content:"";background-size:cover;animation-delay:.3s !important;} .ksied-intro1 .img:before{width:190px;height:50px;background-image:url(../img/k-sied-logo.svg);position:absolute;left:0;bottom:0;} .ksied-intro1 .img:after{width:382px;height:332px;background-image:url(../img/subm-ksied-intro1-2.png);position:absolute;right:0;bottom:-10%;} .ksied-intro1 .subm-stit, .ksied-intro2 .subm-stit{margin-bottom:50px;} .ksied-intro2{padding:100px 0 110px;} .ksied-intro2 .img{bottom:-110px;} .ksied-intro2 .img:before{width:668px;height:529px;background-image:url(../img/subm-ksied-intro2-2.png);position:absolute;left:14%;bottom:0;} .ksied-intro2 .img:after{width:682px;height:394px;background-image:url(../img/subm-ksied-intro2-3.png);position:absolute;left:10%;top:-30%;} .ksied-intro2 .col_d2:first-child{display:flex;align-items:flex-end;} .ksied-intro3 .img{text-align:right;} .ksied-intro3 .img:after{width:300px;height:245px;background-image:url(../img/subm-ksied-intro3-2.png);position:absolute;left:-10%;bottom:0;animation-delay:.5s !important;} .ksied-intro3 h2.subm-tit, .ksied-intro3 .subm-stit{color:#fff;} .ksied-intro3 h2.subm-tit:before{background:#C2D500;} .ksied-intro3 .subm-txt{color:#CFD8DE;margin:40px 0;display:flex;} .ksied-intro4 h2.subm-tit{margin-bottom:50px;} .ksied-intro5 .ksied-logo{margin:0 0 50px;} .ksied-intro5 .subm-txt{word-break:keep-all;} .ksied-intro6 .title-text-lg{font-size:1.325rem;margin-top:60px;font-weight:700;} .ksied-intro6 > .d_width:first-child{margin-bottom:90px;} .ksied-intro6 .subm-txt.bu li {padding-top:5px;padding-bottom:5px;} .sub-half-info .info-cont{display:flex;justify-content:space-between;margin-bottom:50px;color:#121314;font-size:1.125rem;} .sub-half-info .info-cont:last-child{margin-bottom:0;} .sub-half-info .info-cont .col-1{width:calc(50% - 80px);} .sub-half-info .info-cont .col-2{width:50%;padding:40px;} .sub-half-info .thumb{width:100%;aspect-ratio:1/0.597;border-radius:1rem;} .sub-half-info .tit{font-size:2rem;font-weight:500;} .sub-half-info .stit{font-size:1.3rem;line-height:1.2;margin:20px 0 30px;font-weight:300;} .sub-half-info .txt{color:#333;} .sub-half-info .bu li{padding-top:3px;padding-bottom:3px;} .chk-ico-info li{padding:25px 30px 25px 80px;background:#fff;font-size:1.25rem;margin-bottom:20px;color:#121314;position:relative;font-weight:500;} .chk-ico-info li:last-child{margin-bottom:0;} .chk-ico-info li:before{content:"";background:url(../img/chk-circle-ico.png);width:35px;height:33px;position:absolute;top:25px;left:30px;} .ksied-bnr{padding:50px;background:#e7e7e7 url(../img/subm-ksied-intro6.png) no-repeat right 50px bottom 0;} .ksied-bnr .cont{width:calc(50% - 200px);word-break:keep-all;} .ksied-bnr .tit{font-size:1.125rem;font-weight:500;color:#121314;} .ksied-bnr .txt{color:#555;margin:20px 0 30px;} .intro-img-bx{padding:25px 40px;background:#EAF2FF;margin-bottom:30px;display:flex;justify-content:space-between;align-items:center;font-size:1.125rem;} .intro-img-bx:last-child{margin-bottom:0;} .intro-img-bx .thumb{width:340px;height:240px;background:#fff;} .intro-img-bx .thumb.logo img{max-width:calc(100% - 40px);max-height:70px;min-width:auto;min-height:auto;} .intro-img-bx .cont{width:calc(100% - 370px);position:relative;} .intro-img-bx .btn-wrap{position:absolute;top:0;right:0;display:flex;flex-direction:column;gap:5px;} .intro-img-bx .bu{margin:0 0 10px;} /*[e] 발달체크도구 서브메인*/ /*[s] 발달지원놀이 서브메인*/ .smv-play-info{width:720px;padding:30px 20px 40px;background:#ECEEF2cc;text-align:center;border-radius:2rem;} .smv-play-info:before, .smv-play-info:after{content:"";background-size:cover;position:absolute;bottom:-5px;} .smv-play-info:before{width:235px;height:147px;background-image:url(../img/smv-play-info1.png);left:-10%;animation:fadeInUp .6s .8s both alternate, walk 3.5s 1.5s ease-out both infinite;} .smv-play-info:after{width:129px;height:175px;background-image:url(../img/smv-play-info2.png);right:-8%;animation:fadeInUp .6s .8s both alternate, walk 3.5s 3s ease-out both infinite;} @keyframes walk { 7.5% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 15% { -webkit-transform: translateY(0px); transform: translateY(0px); } 22.5% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 30% { -webkit-transform: translateY(2px); transform: translateY(2px); } 40% { -webkit-transform: translateY(0); transform: translateY(0); } } .smv-play-info .chk-tit{margin:0 0 40px;} .smv-play-info .play-info{margin:-15px -10px;justify-content:center;} .smv-play-info .play-info li{width:calc(25% - 20px);margin:15px 10px;} .smv-play-info .play-info li a{display:block;} .smv-play-info .play-info .tit{position:relative;padding:10px 10px 10px 70px;color:#fff;font-weight:700;font-size:1rem;text-align:center;border-radius:5px 5px 0 0;background:#919191;} .smv-play-info .play-info .tit [class*="dev-ico"]{border:3px solid #fff;position:absolute;left:5px;bottom:5px;} .smv-play-info .play-info .tit.c1{background:#E65B2F;} .smv-play-info .play-info .tit.c2{background:#FD8A17;} .smv-play-info .play-info .tit.c3{background:#4A8B0A;} .smv-play-info .play-info .tit.c4{background:#3C9976;} .smv-play-info .play-info .tit.c5{background:#2D67A2;} .smv-play-info .play-info .tit.c6{background:#783A9E;} .smv-play-info .play-info .tit.c7{background:#EC288A;} .smv-play-info .play-info .txt{padding:20px;font-size:1rem;color:#555;background:#fff;border-radius:0 0 5px 5px;} .smv-play-info .play-info .txt .num{font-size:1.75rem;color:#121314;font-weight:900;line-height:1;} [class*="dev-ico"].sm{width:60px;height:60px;} [class*="dev-ico"].sm:before{width:50px;height:50px;background-size:auto 50px;} .dev-ico2.sm:before{background-position-x:-50px;} .dev-ico3.sm:before{background-position-x:-100px;} .dev-ico4.sm:before{background-position-x:-150px;} .dev-ico5.sm:before{background-position-x:-200px;} .dev-ico6.sm:before{background-position-x:-250px;} .dev-ico7.sm:before{background-position-x:-300px;} [class*="dev-ico"].xsm{width:30px;height:30px;} [class*="dev-ico"].xsm:before{width:30px;height:30px;background-size:auto 30px;} .dev-ico2.xsm:before{background-position-x:-30px;} .dev-ico3.xsm:before{background-position-x:-60px;} .dev-ico4.xsm:before{background-position-x:-90px;} .dev-ico5.xsm:before{background-position-x:-120px;} .dev-ico6.xsm:before{background-position-x:-150px;} .dev-ico7.xsm:before{background-position-x:-180px;} .subm-rmd-play{padding:50px 0;background:#f5f5f5;margin:80px 0 60px;} .subm-rmd-play h3.subm-tit{color:#121314;} .subm-rmd-play .rmd-play-list a{width:calc((100% / 6) - 20px);margin:10px;} .subm-rmd-play .rmd-play-list .subject{font-size:1rem;min-height:50px;} .detail-sch-bx{margin:0 0 60px;border:2px solid #87B9F9;} .detail-sch-bx .filter-bx{padding:35px 40px;} .detail-sch-bx .sch-bx{padding:15px 40px;background:#EAF2FF;} .detail-sch-bx dl{display:flex;flex-wrap:wrap;} .detail-sch-bx dt, .detail-sch-bx dd{padding:5px 0;} .detail-sch-bx dt{width:200px;font-size:1.25rem;color:#121314;font-weight:500;} .detail-sch-bx dd{width:calc(100% - 200px);} .detail-sch-bx .return-ico:before{margin-left:10px;} .detail-sch-bx .btn-wh{color:#121314;padding:0 1.5rem;margin:2px 0;} .detail-sch-bx .btn-wh:not(.active):hover, .detail-sch-bx .btn-wh:not(.active):focus{color:#fff;} .detail-sch-bx .btn-wh.active:not([class*="area-c"]){background:#1074F533;border-color:var(--main-color);color:var(--main-color);} .sm-sch .input-wrap .form-control{width:370px;height:45px;color:#333;} .sm-sch .ico-sch{display:inline-block;width:45px;height:45px;line-height:45px;border-radius:1rem;background:var(--main-color);color:#fff;text-align:center;margin-left:10px;} .sm-sch .ico-sch:hover{background:var(--dark-color);} .subm-play-list {margin:0 0 60px;} .subm-play-list:last-child{margin:0;} /*board-list 커스텀*/ .board-title{color:#121314;font-weight:500;margin:0 0 30px;} .board-title .row{align-items:center;} .board-title h3.subm-tit{color:#121314;margin:0;} .board-title h3.subm-tit:before{content:"";display:inline-block;vertical-align:text-top;width:8px;height:8px;margin-right:5px;border-radius:50%;background:var(--main-color);} .board-title .num{margin:0 20px;vertical-align:middle;} .board-title .sort-wrap a:after{content:"";display:inline-block;height:10px;border-left:1px solid #dadada;margin:0 10px;} .board-title .sort-wrap a:last-child:after{display:none;} .board-title .sort-wrap a:not(.active){color:#333;font-weight:300;} .board-title .sort-wrap a.active:before{content:"\f058";font-family:fontAwesome;margin-right:5px;font-weight:300;color:var(--main-color);} .board-title .sort-btn a.active{border-color:var(--main-color);color:var(--main-color);} .board-title .sort-btn a:hover{color:#fff;} .board-title .sort-btn a.active:hover{background:#fff;border-color:var(--main-color);color:var(--main-color);} .board-list .subject a{color:#121314;font-weight:500;font-size:1.25rem;display:block;} .board-list .subject:hover a{color:var(--main-color);} .board-list.custom1 thead th{background:#F2F3F5;color:#5A5E6A;font-size:1rem;} .board-more{background:#EAF2FF;border-color:#EAF2FF;color:var(--main-color);font-weight:500 !important;white-space:wrap;line-height:unset;padding:15px 0;margin:20px 0 0;} /*[e] 발달지원놀이 서브메인*/ /*[s] 우리 동네 지원정보 서브메인*/ .smv-local-bnr{width:760px;height:410px;} .smv-local-bnr > a, .smv-local-bnr.local-login .cont{border-radius:2rem;border:5px solid #4697ff;} .smv-local-bnr > a{display:block;width:100%;height:100%;padding:60px 50px 70px;background:#76b2ff url(../img/smv-local-bnr-bg.png) no-repeat 100% 50%;font-size:1.25rem;line-height:1.2;} .smv-local-bnr > a:after{content:"";width:307px;height:258px;background:url(../img/smv-local-bnr-img.png);background-size:cover;position:absolute;top:16%;right:20px;animation:fadeInUp 1s .8s both, walk 3.5s 3s ease-out both infinite;} .smv-local-bnr > a:hover .tit span{background-size:100%;} .smv-local-bnr > a:hover{background-color:#b7d4f9;box-shadow:10px 10px 25px #0002;} .smv-local-bnr > a:hover .d-txt, .smv-local-bnr > a:focus .d-txt{font-size:0;} .smv-local-bnr:not(.local-login) .stit{color:#062CBD;font-weight:500;letter-spacing:.2rem;} .smv-local-bnr:not(.local-login) .tit{color:#021428;font-weight:900;font-size:2.375rem;margin:10px 0 20px;} .smv-local-bnr:not(.local-login) .tit span{background:linear-gradient(to bottom, transparent 95%, #021428 0) left center no-repeat;background-size:0;transition:all .3s;} .smv-local-bnr:not(.local-login) .txt{color:#2F3846;margin-bottom:50px;} .smv-local-bnr .more{color:#121314;} .smv-local-bnr .more:before{content:"\f0a9";font-family:'Font Awesome 6 Pro';margin-right:5px;font-weight:400;} .smv-local-bnr .more span{display:inline-block;transition:all .3s;} .smv-local-bnr .hover-txt{font-size:0;background:#021428;color:#fff;} .smv-local-bnr > a:hover .hover-txt, .smv-local-bnr > a:focus .hover-txt{font-size:inherit;padding:0 5px;} /*로그인 후 인포그래픽 배너*/ .smv-local-bnr.local-login{color:#121314;} .smv-local-bnr.local-login .balloon-tip{position:absolute;top:-20px;right:50px;} .smv-local-bnr.local-login .cont{background:#F4F2F3;padding:30px 50px 40px;} .smv-local-bnr.local-login .tit{font-weight:700;font-size:1.5rem;margin:0 0 20px;} .smv-local-bnr .local-info{display:flex;margin:-5px;} .smv-local-bnr .local-info li{width:calc(25% - 10px);margin:5px;} .smv-local-bnr .local-info li > a{display:block;padding:20px;background:#fff;border:1px solid #E5E3E4;border-radius:.7rem;text-align:center;} .smv-local-bnr .local-info li > a:before{content:"";width:80px;height:60px;display:block;margin:0 auto;background-image:url(../img/smv-local-info-ico1.png);background-size:cover;} .smv-local-bnr .local-info li.ico2 > a:before{background-image:url(../img/smv-local-info-ico2.png);} .smv-local-bnr .local-info li.ico3 > a:before{background-image:url(../img/smv-local-info-ico3.png);} .smv-local-bnr .local-info li.ico4 > a:before{background-image:url(../img/smv-local-info-ico4.png);} .smv-local-bnr .local-info .txt{font-size:.9rem;margin:10px 0 5px;} .smv-local-bnr .local-info .num{font-size:1.875rem;color:#03487F;font-weight:900;line-height:1;} .info-ai-cmt{margin:10px 0 0;padding:20px 20px 20px 120px;border:1px solid #E5E3E4;border-radius:.7rem;display:flex;justify-content:space-between;align-items:center;background:#fff url(../img/ai-char.png) no-repeat 20px 15px;} .info-ai-cmt p{line-height:1.3;font-size:1.125rem;font-weight:500;} .info-ai-cmt .btn-d{font-weight:800 !important;} .local-select{margin:60px 0;} .local-select-bx{display:flex;justify-content:space-between;margin:0 0 20px;} .local-select-bx .select-wrap{width:calc(100% - 250px);background:linear-gradient(90deg, #1884D1, #0B49CA);border-radius:5rem;padding:30px;text-align:center;color:#D0E1FD;font-size:1.5rem;} .local-select-bx .select-wrap > span{font-size:1.125rem;color:#85C0FA;font-weight:700;margin:0 10px;} .local-select-bx .select-wrap select{width:220px;margin:0 10px;border:none;color:#fff;font-weight:700;border-bottom:2px solid #fff;background:#0000;padding-bottom:5px;} .local-select-bx .select-wrap option{color:#121314;} .local-select-bx .select-wrap .btn-d:hover .return-ico:before{filter:invert(1);} .local-select-bx .select-wrap .btn-d:hover .ico-local:before{color:#fff;} @media only screen and (max-height:1080px){ .local-select-bx .select-wrap{padding:30px 20px;font-size:1.25rem;} .local-select-bx .select-wrap select{width:170px;} } /*[s] 공통: 체크말풍선버튼*/ .btn-bubble{font-weight:500 !important;position:relative;background:#152964;border-color:#152964;border-radius:5rem !important;display:flex;align-items:center;justify-content:center;position:relative;} .btn-bubble:after{content:"\f058";color:#fff;font-size:.9rem;font-family:fontAwesome;font-weight:900;vertical-align:middle;margin-left:5px;} .btn-bubble:before{content:"";width:10px;height:10px;left:-8px;background:#152964;position:absolute;top:50%;transform:rotate(45deg) translateY(-50%);transition:all .2s;} .btn-bubble:hover{background:var(--dgray1);border-color:var(--dgray1);} .btn-bubble:hover:before{background:var(--dgray1);} /*[e] 공통: 체크말풍선버튼*/ .local-select-bx > .btn-bubble{width:230px;font-size:1.5rem;font-weight:700 !important;} .local-select-bx > .btn-bubble:after{content:"\f002";font-size:1.1rem;margin-left:10px;} .local-select-bx > .btn-bubble:before{width:20px;height:20px;left:-14px;} .detail-sch-bx .filter-bx .btn-bubble{margin-left:15px;} .subm-local-field{margin:60px -10px 0 !important;} .subm-local-field a.bg1{background-image:url(../img/subm-local-item1.png);} .subm-local-field a.bg2{background-image:url(../img/subm-local-item2.png);} .subm-local-field a.bg3{background-image:url(../img/subm-local-item3.png);} .subm-local-field a.bg4{background-image:url(../img/subm-local-item4.png);} .subm-local-field a:hover p, .subm-local-field a:focus p{background:#1074f5b3;} .subm-local-list {margin:0 0 60px;} .subm-local-list:last-child{margin:0;} .subm-local-list .board-title{margin:0 0 15px;} /*우리 동네 지도*/ #local-map-wrap{height:700px;position:relative;background:rgb(248, 249, 250);border:1px solid #BAC0C9;display:flex;} #mnb{width:270px;background:#fff;border-right:1px solid #DADADA;box-shadow:10px 0 10px #0001;} #mapDetail{width:calc(100% - 270px) !important;height:100% !important;position:relative;} .map-sch-btn{position:absolute;bottom:25px;left:50%;font-weight:500 !important;box-shadow:0 5px 5px #0002;} #mnb .locate-bx{padding:25px 20px;background:#F6F8F9;line-height:1.3;} #mnb .locate-bx p.tit{color:#121314;font-weight:700;font-size:1.125rem;margin:20px 0 10px;} #mnb .locate-bx p.txt{font-size:1rem;} #mnb .locate-bx .cont{position:relative;} #mnb .locate-bx .cont .btn-edit{position:absolute;top:0;right:0;line-height:20px;} #mnb .locate-bx .btn-sm{line-height:30px;margin:2px 0;} #mnb .locate-bx .btn-wh{color:#333;} #mnb .locate-bx .btn-wh:hover{color:#fff;} #mnb .locate-bx p.num{font-size:.925rem;color:#121314;font-weight:500;margin:15px 0 0;padding:15px 0 0;border-top:1px solid #dadada;} /*[s] 지원정보 분야별 마크*/ [class*="map-mark-"]{font-size:1rem;font-weight:700;position:relative;transition:all .2s;} [class*="map-mark-"]:before{content:"";width:30px;height:30px;background-image:url(../img/map-mark-badge.png);display:inline-block;vertical-align:middle;margin-left:-3px;margin-right:5px;transition:all .2s;} .map-mark-medi:before{background-position-x:-30px;} .map-mark-vou:before{background-position-x:-60px;} .map-mark-edu:before{background-position-x:-90px;} .map-mark-org:before{background-position-x:-120px;} .map-mark-fav:before{background-position-x:-150px;} .map-mark-all, .map-mark-all:hover{color:var(--main-color);} .map-mark-medi, .map-mark-medi:hover{color:#939;} .map-mark-vou, .map-mark-vou:hover{color:#26A46A;} .map-mark-edu, .map-mark-edu:hover{color:#2962D6;} .map-mark-org, .map-mark-org:hover{color:#B68729;} .map-mark-fav, .map-mark-fav:hover{color:#f63;} /*[e] 지원정보 분야별 마크*/ #mnb .cate-bx{padding:20px;} #mnb .cate-bx [class*="map-mark-"]{font-size:1rem;font-weight:500;} #mnb .cate-bx [class*="map-mark-"]:before{margin-right:15px;} #mnb .cate-bx li:not(.active) [class*="map-mark-"]{color:#666;font-weight:500;} #mnb .cate-bx li:not(.active) [class*="map-mark-"]:before{background-position-y:-30px;} #mnb .cate-bx li:not(.active) [class*="map-mark-"]:hover:before{background-position-y:0;} #mnb .cate-bx li.active [class*="map-mark-"]{font-weight:700;} #mnb .cate-bx li.active [class*="map-mark-"]:after{content:"\f058";font-family:fontAwesome;font-weight:900;position:absolute;left:20px;top:8px;background:#fff;line-height: 1;border-radius: 50%;font-size:.9rem;} #mnb .cate-bx li a{display:block;padding:10px 0;border-bottom:1px solid #0000;} #mnb .cate-bx li a:hover{border-color:#dadada;} #mnb .cate-bx li.active .map-mark-all .badge.num{background:var(--main-color);border-color:var(--main-color);} #mnb .cate-bx li.active .map-mark-medi .badge.num{background:#939;border-color:#939;} #mnb .cate-bx li.active .map-mark-vou .badge.num{background:#26A46A;border-color:#26A46A;} #mnb .cate-bx li.active .map-mark-edu .badge.num{background:#2962D6;border-color:#2962D6;} #mnb .cate-bx li.active .map-mark-org .badge.num{background:#B68729;border-color:#B68729;} #mnb .cate-bx li.active .map-mark-fav .badge.num{background:#f63;border-color:#f63;} #map_marker_area{position:absolute;width:420px;padding:25px;background:#fff;border-radius:.5rem;border:1px solid #666;} #map_marker_area:before{content:"";width:15px;height:15px;border-top:1px solid #666;border-right:1px solid #666;background:#fff;transform:rotate(135deg) translateX(-50%);position:absolute;bottom:-8px;left:50%;transform-origin:left center;} .map-detail{position:relative;} .map-detail .item{font-size:.925rem;vertical-align:middle;} .map-detail .item span:before{content:"\f054";font-family:fontAwesome;font-size:.5rem;font-weight:300;vertical-align:middle;display:inline-block;margin:0 7px 0 5px;} .map-detail .subject{display:block;font-size:1.25rem;font-weight:500;color:#121314;margin:10px 0 15px;line-height:1.2;} .map-detail a.subject:hover{text-decoration:underline;} /* .map-detail .subject em{font-size:.925rem;color:var(--dark-color);word-break:keep-all;white-space:nowrap;} */ .map-detail .btn-wrap{position:absolute;top:0;right:0;} .map-detail .btn-wrap .close{display:block;padding:0 5px 5px;} .map-detail .ico-bookmark:before{content:"\f005";font-family:fontAwesome;margin-right:8px;} .map-detail .ico-bookmark:hover, .map-detail .ico-bookmark.active{background:#fff;color:#F63;border-color:#F63;} .map-detail .ico-bookmark:hover:before, .map-detail .ico-bookmark.active:before{font-weight:900;} #map_marker_area .detail-wrap > li{padding:5px 0;} #map_marker_area .detail-wrap .address{color:#555;} #map_marker_area .detail-wrap .tel{color:#00894A;} #map_marker_area .detail-wrap .link a{color:var(--main-color);display:inline-block;} #map_marker_area .detail-wrap .link a:after{content:"";width:4px;height:4px;background:#DADADA;border-radius:50%;vertical-align:middle;display:inline-block;margin:0 10px;} #map_marker_area .detail-wrap .link a:last-child:after{display:none;} #map_marker_area .detail-wrap .link a:hover{text-decoration:underline;} #map_marker_area .ico-bookmark{margin-top:10px;} #map_marker_area .row{justify-content:space-between;} #map_marker_area .row:has(.thumb) .detail-wrap{width:calc(100% - 110px);} #map_marker_area .thumb{width:90px;height:90px;border:1px solid #eaeaea;} .local-modal{width:450px;} .local-modal h2.tit{font-size:1.5rem;margin:0 0 20px;} .local-modal .thumb{height:280px;margin:0 0 20px;border:1px solid #eaeaea;} .local-modal .thumb.logo{height:70px;} .local-modal .indent{padding:30px;} .local-modal .map-detail .subject{font-size:1.375rem;color:#121314;} .local-modal .detail-wrap {font-weight:300;} .local-modal h3.tit{font-size:1.125rem;margin:25px 0 10px;} .local-modal h3.tit.fst{padding-top:20px;border-top:1px solid #333;} .local-modal .table{font-size:.925rem;font-weight:300;} .local-modal .ico-bookmark{margin-top:20px;} #modal-wrap .modal-cont.local-modal .close{top:10px;right:10px;animation:none;} #modal-wrap .modal-cont.local-modal .close i{box-shadow:none;} #modal-wrap .modal-cont.local-modal .close:hover i{background:#fff;color:#000;transform:none;} #modal-wrap .modal-cont.local-modal .close:before{display:none;} /* table 테이블 유형*/ .table1 table{border-top:1px solid #999;border-bottom:1px solid var(--basic-border);} .table1 table tbody tr:first-child{border-top:0;} .table1 table tbody th{border-right:1px solid var(--basic-border);color:#2B4A80;font-weight:500;} .table1 table tbody td{border-right:1px solid var(--basic-border);} .table1 table tbody td:last-child{border-right:0} .table3 table{border-top:2px solid #222C68;} .table3 table thead th{color:#121314;border-bottom:1px solid #999;font-weight:500;background:#fff;} .table3 table tbody th{background:#F4F8FE;color:#2B4A80;} .table3 table tbody td{background:#fff;} /*리스트 유형*/ [class*="-list"].d3 li, [class*="-list"].d5 li, [class*="-list"].d4 li{width:auto;} [class*="-list"].d3, [class*="-list"].d5, [class*="-list"].d4{margin:-10px;} [class*="-list"].d5 > li {width:calc(20% - 20px);margin:10px;} [class*="-list"].d4 > li {width:calc(25% - 20px);margin:10px;} [class*="-list"].d3 > li {width:calc(33.33% - 20px);margin:10px;} [class*="-card-list"] li, [class*="-col-list"] li{position:relative;border:1px solid #0000;transition:all .3s;} [class*="-card-list"] .item, [class*="-col-list"] .item{color:var(--dark-color);font-weight:700;font-size:.925rem;} [class*="-card-list"] .subject, [class*="-col-list"] .subject{color:#000;font-size:1.25rem;font-weight:500;} /* [class*="-card-list"] > li > a:after, [class*="-col-list"] > li > a:after{content:"\f061";font-family:fontAwesome;width:45px;height:45px;line-height:45px;text-align:center;color:#fff;font-size:1.125rem;background:linear-gradient(90deg, #1884D1, #0B49CA);position:absolute;top:10px;right:0;z-index:9;opacity:0;transition:all .3s;}*/ [class*="-card-list"] > li:not(.nodata) > a:after, [class*="-col-list"] > li:not(.nodata) > a:after{content:"상세보기";padding:10px 20px;font-size:.9rem;font-weight:500;color:#fff;background:linear-gradient(90deg, #1884D1, #0B49CA);position:absolute;top:10px;right:0;z-index:9;opacity:0;transition:all .3s;} [class*="-card-list"] > li:not(.nodata) > a:hover:after, [class*="-card-list"] > li:not(.nodata):focus-within > a:after, [class*="-col-list"] > li:not(.nodata):hover > a:after, [class*="-col-list"] > li:not(.nodata):focus-within > a:after{top:0;opacity:1;} [class*="-card-list"] > li:not(.nodata):hover, [class*="-card-list"] > li:not(.nodata):focus-within, [class*="-col-list"] > li:not(.nodata):hover, [class*="-col-list"] > li:not(.nodata):focus-within{border-color:var(--main-color) !important;background:#fff;} [class*="-card-list"] > li:not(.nodata):focus-within > a, [class*="-col-list"] > li:not(.nodata):focus-within > a{outline:none;} /*nodata*/ [class*="-card-list"] li.nodata, [class*="-col-list"] li.nodata{color:#808080;} [class*="-card-list"] li.nodata .item, [class*="-col-list"] li.nodata .item{color:#777;} [class*="-card-list"] li.nodata .subject, [class*="-col-list"] li.nodata .subject{color:#555;} [class*="-card-list"] .list-nodata, [class*="-col-list"] .list-nodata{background:#fff !important;border:1px dashed #dadada;} [class*="-card-list"] .list-nodata:hover, [class*="-col-list"] .list-nodata:hover{border:1px dashed #dadada !important;} .detail-wrap{font-size:.925rem;line-height:1.3;word-break:keep-all;} .detail-wrap > li{display:flex;padding:3px 0;} .detail-wrap [class*="ico"]{flex-shrink:0;display:inline-block;margin-top:3px;} .detail-wrap [class*="ico"]:before{content:"";width:15px;height:15px;display:inline-block;margin-right:5px;background:url(../img/info-ico-line.png);vertical-align:baseline;} .detail-wrap .ico-tel:before{background-position-y:-15px;} .detail-wrap .ico-link:before{background-position-y:-30px;} .detail-wrap .ico-cert:before{background-position-y:-45px;filter:grayscale(1);} .detail-wrap .on .ico-cert:before{filter:none;} .detail-wrap .on{color:#A27C4D;} .img-card-list > li{background:#f5f5f5;} .img-card-list .thumb{width:100%;height:180px;} .img-card-list .thumb.logo{background:#fff;border:1px solid #eaeaea;} .img-card-list .cont{padding:20px 30px;} .img-card-list .detail-wrap{padding:0 30px 30px;} .name-card-list:not(.line) > li{background:#f5f5f5;} .name-card-list .cont{padding:30px;} .name-card-list .detail-wrap{padding:0 30px 30px;} .name-card-list .logo{width:70px;height:70px;position:Absolute;top:30px;right:30px;} .name-card-list .logo img{max-width:100%;max-height:100%;} .name-card-list .cont:has(.logo){padding-right:100px;} .name-card-list.line > li{border-color:#dadada;} .name-card-list.line > li:not(.list-nodata):before{content:"";width:100%;height:4px;position:absolute;bottom:0;left:0;background:var(--main-color);opacity:0;} .name-card-list.line > li:not(.nodata):hover:before, .name-card-list.line > li:not(.nodata):focus-within:before{opacity:1;} .name-col-list > li{background:#f5f5f5;margin:0 0 20px;} .name-col-list > li:last-child{margin:0;} .name-col-list > li > a{display:flex;} .name-col-list .logo{padding:35px 20px;width:200px;height:130px;position:relative;display:flex;align-items:center;justify-content:center;} .name-col-list .logo img{max-width:100%;max-height:100%;} .name-col-list .logo:before{content:"";height:calc(100% - 40px);border-left:1px solid #e4e4e4;position:absolute;top:50%;right:0;transform:translateY(-50%);} .name-col-list .cont{width:calc(100% - 200px);min-height:130px;padding:20px 40px;} .name-col-list .detail-wrap{display:flex;flex-wrap:wrap;position:absolute;left:240px;bottom:20px;} .name-col-list .detail-wrap li{margin-right:50px;} /*[e] 우리 동네 지원정보 서브메인*/ /*[e] 서브메인*/ /*[s] 발달이정표 서브*/ #age-dev > article{margin:0 0 70px;} #age-dev > article:first-child, #age-dev > article:last-child{margin:0;} #age-dev > .bg_sky{margin:40px 0 70px;} #age-dev h2.sub-tit.link{margin:0 0 40px;} .age-info{background:#f5f5f5;padding:40px;display:flex;justify-content:space-between;font-size:1.125rem;} .age-info .cont{width:calc(100% - 520px);} .age-info .thumb{width:480px;height:320px;border-radius:.5rem;} .age-info .tit{font-size:1.5rem;color:var(--main-color);font-weight:500;} .age-info .txt{color:#555;font-weight:300;margin:25px 0 30px;word-break:keep-all;} .age-info .chk-bu li{color:#121314;padding:2px 0;} .age-profile{display:flex;flex-wrap:wrap;/* margin:-10px; */margin:-5px;} .age-profile h2.sub-tit{font-size:2.375rem;} .age-profile > div{/* width:calc(33.33% - 20px);margin:10px; */width:100%;margin:5px;} .age-profile .tit-wrap{margin-bottom:20px;} .age-profile .area{background:#F6F8F9;/* padding:40px 20px; */padding:20px 30px;font-size:1.125rem;word-break:keep-all;color:#121314;font-weight:300;} .age-profile .area .tit{/*text-align:center;font-size:1.75rem; */font-size:1.5rem;font-weight:700; /*임시추가*/margin:0 0 10px;} .age-profile .area .tit a i{font-size:1.125rem;color:#0009;vertical-align:middle;} .age-profile .area .tit [data-tooltip]:before{left:0;transform:none;} .age-profile .area [class*="dev-ico"]{margin:20px auto 30px; /*임시추가*/display:none;} [class*="dev-ico"]{width:100px;height:100px;position:relative;background:#ccc;border-radius:50%;display:block;} [class*="dev-ico"]:before{content:"";width:80px;height:80px;background-image:url(../img/ico-report.png);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .dev-ico1{background:#FE7B50;} .dev-ico2{background:#FEB770;} .dev-ico3{background:#65BD0D;} .dev-ico4{background:#4AB994;} .dev-ico5{background:#4784CD;} .dev-ico6{background:#A25BC4;} .dev-ico7{background:#F56DB1;} .age-profile .dev-ico2:before{background-position-x:-160px;} .age-profile .dev-ico4:before{background-position-x:-320px;} .dev-ico2:before{background-position-x:-80px;} .dev-ico3:before{background-position-x:-160px;} .dev-ico4:before{background-position-x:-240px;} .dev-ico5:before{background-position-x:-320px;} .dev-ico6:before{background-position-x:-400px;} .dev-ico7:before{background-position-x:-480px;} .age-play .sub-d-list{margin:40px 0;} .age-dev-chk{padding:50px 40px;background:#ECEEF2;} .age-dev-chk .chk-wrap{border-radius:1rem;background:#fff;overflow:hidden;margin-top:40px;} .age-dev-chk .chk-wrap .cont{padding:40px;} .age-dev-chk .chk-wrap .title-text-lg{font-size:1.25rem;} .age-dev-chk .tv-checkbox{font-size:1.25rem;padding:5px 0;} .age-dev-chk .tv-checkbox input[type="checkbox"] + label::before{width:25px;height:25px;line-height:25px;margin-right:10px;} .age-dev-chk .tv-checkbox:hover{color:var(--main-color);} .age-dev-chk .tv-checkbox:hover input[type="checkbox"] + label::before{border-color:var(--main-color);} .age-dev-chk .btn-d:after{content:"";margin:0;} .blink-btn{position:relative;} .blink-btn:after{content:"" !important;width:calc(100% + 4px);height:calc(100% + 4px);border:2px solid #fffc;border-radius:50px;position:absolute;top:-2px;left:-2px;animation:blink 1.5s infinite;margin:0 !important;} /*[e] 발달이정표 서브*/ /*[s] 발달지원놀이 서브*/ .tab-txt.dev-factor a{font-size:17px;color:var(--dgray1);} .tab-txt.dev-factor a.on{color:var(--main-color);} .ico-summ-bx{background:#f5f5f5;padding:15px;display:flex;align-items:center;flex-wrap:wrap;color:#3D4551;margin:0 0 30px;} .ico-summ-bx:before{content:"";width:35px;height:35px;display:inline-block;margin-right:10px;} .ico-summ-bx.ico1:before{background:url(../img/ico-summ1.png) no-repeat 50% 50%/auto;} .ico-summ-bx .cont span:after{content:"";width:5px;height:5px;background:#ccc;border-radius:50%;vertical-align:middle;display:inline-block;margin:0 10px;} .ico-summ-bx .cont span:last-child:after{display:none;} .info-layout{justify-content:space-between;} .info-layout .cont-l{width:calc(100% - 460px);} .info-layout .cont-r{width:400px;} .detail-info-bx{font-size:1.125rem;} .detail-info-bx h2.tit{font-weight:700;padding-bottom:10px;border-bottom:1px solid #DFE1E2;font-size:1.875rem;} .detail-info-bx h3.tit{font-size:1.5rem;font-weight:500;} .detail-info-bx h3.tit:before{content:"\f058";font-family:fontAwesome;vertical-align:middle;color:var(--main-color);margin:0px 7px 0 0;font-weight:700;font-size:1.125rem;} .detail-info-bx > p.txt{margin:20px 0;font-weight:300;} .detail-info-bx .bu li{padding-top:5px;padding-bottom:5px;} .detail-info-bx .item-tit{font-size:1.25rem;color:#121314;font-weight:500;margin:30px 0 15px;} .detail-info-bx .tab-idx{margin:70px 0 0;} .detail-info-bx .tab-idx a.active{background:#F6F8F9;border-bottom-color:#F6F8F9;} .detail-info-bx .tab-idx-bx{background:#F6F8F9;padding:20px;} /* .detail-info-bx .tab-idx-bx .sub-d-list > li:first-child{border-top:0;} .detail-info-bx .tab-idx-bx .sub-d-list > li:last-child{border-bottom:0;} */ .detail-info-bx .tab-idx-bx .bu li{padding-top:3px;padding-bottom:3px;} .detail-info-bx .tab-idx-bx .bg_wh, .detail-info-bx .tab-idx-bx .bx1_wh, .detail-info-bx .tab-idx-bx .bg_gr, .detail-info-bx .tab-idx-bx .bx1_gr{margin:10px 0;} .detail-info-bx .tab-idx-bx .info-card-list > li{padding:15px;} .detail-info-bx .tab-idx-bx .info-card-list .tit{font-size:1.125rem;margin-bottom:15px;} .detail-info-bx .table{font-size:1rem;} .detail-info-bx .next-btn{border:1px solid #DFE1E2;display:flex;justify-content:space-between;align-items:center;font-size:1rem;margin:40px 0 0;} .detail-info-bx .next-btn .cont{padding:20px 30px;} .detail-info-bx .next-btn .cont .subject{font-size:1.5rem;font-weight:700;color:#121314;} .detail-info-bx .next-btn .more{width:110px;aspect-ratio:1/1;background:var(--grd);display:flex;justify-content:center;align-items:center;font-size:2rem;color:#fff;} .detail-info-bx .next-btn:hover{background:#F4F8FE;border-color:var(--main-color);} .detail-info-bx .next-btn .subject > span:not(.badge), .rmd-page-bx .rmd-list li a.subject > span:not(.badge), .rmd-page-bx .rel-list li a.subject > span:not(.badge){background:linear-gradient(to bottom, transparent 97%, var(--main-color) 0) left center no-repeat;background-size:0;transition:all .3s;} .detail-info-bx .next-btn:hover .subject > span:not(.badge), .rmd-page-bx .rmd-list li a.subject:hover > span:not(.badge), .rmd-page-bx .rel-list li a.subject:hover > span:not(.badge){background-size:100%;color:var(--main-color);} .detail-info-bx .info-img{display:flex;flex-wrap:wrap;margin:0 -15px -15px;} .detail-info-bx .info-img li{width:calc(100% / 3 - 30px);padding:0;margin:0 15px 15px;} .detail-info-bx .info-img li:before{display:none;} .detail-info-bx .info-img li:nth-child(n+4){max-width:calc(100% / 3 - 30px);} .detail-info-bx .info-img .img{height:180px;text-align:center;border:1px solid #DFE1E2;position:relative;background:#fff;} .detail-info-bx .info-img .img img{max-height:100%;max-width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .detail-info-bx .info-img .subject{font-size:1.125rem;color:var(--main-color);margin:20px 0 15px;} .detail-info-bx .info-img .txt{font-size:.925rem;color:#858585;word-break:keep-all;margin:10px 0 0;} .detail-info-bx .download{display:flex;justify-content:space-between;align-items:center;color:#0081A1;background:#F4FBFC;border-bottom:1px dashed #DFE1E2;padding:15px 20px;margin-top:15px;} .detail-info-bx .download .subject{font-size:1.125rem;} .detail-info-bx .download .subject .badge{line-height:20px;font-size:.8rem;color:#0081A1;background:transparent;border-color:#0081A1;padding:0 5px;margin-left:10px;} .detail-info-bx .download .ico-download{font-size:.925rem;} .detail-info-bx .download .ico-download:before{font-family:'Font Awesome 6 Pro';font-weight:400;content:"\f019";margin-right:5px;} .rmd-page-bx .rmd-list h4.tit{font-size:1.1rem;font-weight:500;padding:15px 0;border-bottom:1px solid #DFE1E2;margin:0;} .rmd-page-bx .rmd-list li a{display:block;padding:15px 0;border-bottom:1px solid #F2F3F5;} .rmd-page-bx .rmd-list li a.subject{font-size:1.25rem;font-weight:700;color:#121314;} .rmd-page-bx .rel-list{position:sticky;top:100px;} .rmd-page-bx .rel-list .cont{padding:20px;background:#F4F8FE;margin-top:40px;} .rmd-page-bx .rel-list h4.tit{font-size:1.1rem;font-weight:500;margin:0 0 10px;} .rmd-page-bx .rel-list ul li a{display:block;padding:8px 0;color:#121314;} .rmd-page-bx .rel-list a.more{display:block;background:var(--main-color);color:#fff;text-align:center;padding:15px;} .rmd-page-bx .rel-list a.more:hover{background:var(--dark-color);} /*[e] 발달지원놀이 서브*/ /*[s] 우리동네 지원정보 서브*/ .support-process {background:#fff;padding:30px;border-radius:1rem;text-align:center; word-break:keep-all;} .support-process h4{margin:0;} .support-process p { padding:10px 20px;font-weight:300;} .support-process > ul > li { display:flex; align-items:stretch; margin-bottom:30px; } .support-process > ul > li:last-child { margin-bottom:0; } .support-process > ul > li > .col-l { width:20%; } .support-process .tit_bx { position:relative; display:flex; align-items:center; justify-content:center; height:100%; background:#fff; border:3px solid #e7eaed; } .support-process .num { position:absolute; top:0; left:50%; width:23px; height:23px; transform:translate(-50%,-50%); border-radius:50%; background:var(--dark-color); font-size:1rem;color:#fff; display:flex; align-items:center; justify-content:center; } .support-process .tit { padding-top:20px; color:#2b4a80; font-size:1.125rem;line-height:1.2;} .support-process > ul > li > .col-r { position:relative; width:80%; padding-left:20px; } .support-process .txt_bx { position:relative; background:#fff; } .support-process .txt_bx p { position:relative; z-index:1; min-height:60px; display:flex; align-items:center; justify-content:center; } .support-process .txt_bx:after { content:"↓"; position:absolute; left:50%; transform:translateX(-50%); width:20px; height:30px; color:#718dbe; display:flex; align-items:center; justify-content:center; } .support-process > ul > li:last-child .txt_bx:after { display:none; } .support-process .txt_bx.long:after { height:200%; } .support-process .txt { background:#f4f8fe; color:#2b4a80; border-radius:10px; } .support-process .desc { background:#fff; color:#333; border-bottom:1px dashed #dadada; } .support-process .d2 { display:flex; justify-content:space-between; align-items:flex-start; } .support-process .d2 > div { width:calc(50% - 5px); } .support-process .d2 .txt_bx { height:auto; } .support-process .two > div.txt_bx { height:auto; } .support-process .two > div:nth-of-type(1) { margin-bottom:30px; } .support-process.ver2 .txt_bx > * { padding:10px 20px; background:#f4f8fe; color:#2b4a80; border-radius:10px; } .support-process.ver2 .d2 .bu li { width:100%; } .support-process.ver2 .d2 .txt_bx, .support-process.ver2 .d2 .txt_bx > div { height:100%; } .support-process.ver2 .d2 .txt_bx .desc { margin:10px 0; border:0; } @media screen and (max-width: 767px) { .tab-txt.dev-factor a{font-size:.925rem;} } @media screen and (max-width: 576px) { .support-process > ul > li > .col-r {padding: 0;width: 100%;} .support-process > ul > li > .col-l {width: 100%;margin-bottom: 10px;} .support-process .num {margin-right: 4px;position: relative;transform: none;left: auto;top: auto;width: 18px;height: 18px;font-size:.875rem;} .support-process .tit_bx {height: auto;padding: 10px;margin: 0;} .support-process .tit {padding: 0;} } /*[e] 우리동네 지원정보 서브*/ /*공통 케이씨드 아동 프로필 표현*/ .ksied-child{text-align:center;} .ksied-profile-img{width:80px;height:80px;background:#fff;border-radius:50%;margin:0 auto;} .ksied-child .name{font-size:1.5rem;font-weight:700;margin:15px 0 0;word-break:keep-all;} .ksied-child .name span{font-size:.9rem;font-weight:300;} /*공통 케이씨드 상태 뱃지/버튼 표현*/ .ksied-state-btn{min-width:160px;border-width:2px;font-weight:500 !important;} .ksied-state-btn.ing{color:#0081A1;border-color:#0081A1;} .ksied-state-btn.end{color:#555;border-color:#555;} .ksied-state-btn{background:#0000;} .ksied-state-btn:hover, .ksied-state-btn:focus{background:var(--dgray1);color:#fff;border-color:inherit;} .ksied-state{border-radius:40px;min-width:50px;font-weight:500;} .ksied-state.ing{color:#150035;background:#C2D500;border-color:#C2D500;} .ksied-state.end{background:#68A2B9;border-color:#68A2B9;color:#fff;} /*진행률 그래프*/ .ksied-progress > .txt{font-size:1rem;margin:0 0 10px;} .ksied-progress .graph-bar{position:relative;background:#fff;border-radius:8px;padding:3px;margin-right:10px;} .ksied-progress .graph-bar .bar{height:10px;background:linear-gradient(to right, #C2D500, #68A2B9, #0256CF);border-radius:5px;} .ksied-progress .graph-bar .line{width:100%;height:100%;position:absolute;left:0;top:0;display:flex; justify-content:space-evenly;border-left:1px dashed #00000020;border-right:1px dashed #00000020;} .ksied-progress .graph-bar .line span{height:100%;display:block;border-left:1px dashed #0003;} /*[s] 마이페이지*/ .sub-container.variant5{padding-bottom:0;} .sub-container.variant5 #my-content{padding-bottom:140px;} #mypage-wrap{display:flex;border-top:1px solid #eaeaea;} #my-snb{width:calc(50% - 510px);padding:50px 0;} #my-snb #snbmn{width:240px;margin-right:50px;float:right;position:sticky;top:120px;} #my-content{width:calc(50% + 510px);border-left:1px solid #eaeaea;} #my-content .c_width{width:1260px;margin-left:50px;float:left;} #my-snb .locate{font-size:1.125rem;color:#121314;} #my-snb .locate:before{content:"";width:23px;height:27px;background:url(../img/my-locate-ico.png);background-size:cover;display:inline-block;margin-right:10px;vertical-align:middle;} #my-snb #snbmn h2.tit{margin:20px 0 50px;font-size:2.625rem;color:#121314;font-weight:800;} #my-snb #snbmn li a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:1.25rem;word-break:keep-all;color:#121314;border-bottom:1px solid #EFEFEF;font-weight:500;} #my-snb #snbmn li a:after{content:"\f054";font-family:fontAwesome;font-size:.9rem;flex-shrink:0;margin-left:10px;color:#fff;} #my-snb #snbmn li:not(.active) a:hover{color:var(--dark-color);} #my-snb #snbmn li.active a{color:var(--main-color);border-color:var(--main-color);font-weight:700;} #my-snb #snbmn li.active a:after{color:var(--main-color);} #my-content.my-main article{margin-bottom:50px;position:relative;} #my-content.my-main article:last-child{margin-bottom:0;} #my-content.my-main article .more{position:absolute;top:0;right:0;color:#000;font-size:1rem;} #my-content.my-main article .more i{width:25px;height:25px;line-height:23px;background:#5D7188;color:#fff;text-align:center;border-radius:50%;font-size:.9rem;font-weight:400;margin-left:5px;transition:all .2s;} #my-content.my-main article .more:hover{color:var(--main-color);} #my-content.my-main article .more:hover i{background:var(--main-color);} #my-content.my-sub .c_width{padding-top:50px;} #my-content.my-sub h2{font-size:2.125rem;margin:0 0 40px;} .my-topwrap{padding:50px 0;background:#3082E4 url(../img/bg-pattern01.png) no-repeat 50% 70%;color:#fff;margin:0 0 40px;position:relative;z-index:1;} .my-topwrap > .row{justify-content:space-between;flex-wrap:nowrap;} .my-topwrap .col-1{width:350px;flex-shrink:0;} .my-topwrap .col-2{width:calc(100% - 910px);margin:0 40px;} .my-topwrap .col-3{width:480px;flex-shrink:0;} .my-topwrap .info-wrap .name{font-size:3.125rem;font-weight:700;margin:0 0 30px;line-height:1;} .my-topwrap .info-wrap .name .btn-d{background:#0006;border:none;padding:0 10px;margin-left:10px;} .my-topwrap .info-wrap .name .btn-d:hover{background:#000;} .my-topwrap .info-wrap .info{display:flex;flex-wrap:wrap;font-weight:300;line-height:1.2;word-break:keep-all;font-size:1rem;} .my-topwrap .info-wrap .info dt{padding:3px 0;width:100px;margin-right:10px;font-weight:100;flex-shrink:0;} .my-topwrap .info-wrap .info dd{padding:3px 0;width:calc(100% - 110px);} .my-topwrap .chk-tit{color:#fff;} .my-topwrap .chk-tit br{display:none;} #mypage-wrap.teacher .my-topwrap .chk-tit:before{display:none;} .my-topwrap .chk-tit .btn-ico-o{margin:0 0 3px 0;width:25px;line-height:23px;} .my-topwrap .child-list{position:relative;} .my-topwrap .child-list .btn-conv-list{right:auto;left:50%;top:45px;transform:translateX(-50%);} .my-topwrap .child-list .btn-conv-list ul li.active .ksied-profile-img{border-color:#fc6;} .my-topwrap .child-list .btn-conv-list ul li.active .name{color:#F63;} .my-topwrap .ksied-child-list{text-align:center;overflow-x:auto;overflow-y:hidden;padding-bottom:15px;white-space:nowrap;} .my-topwrap .ksied-child-list::-webkit-scrollbar {height:6px;} .my-topwrap .ksied-child-list::-webkit-scrollbar-thumb {background-color:var(--dgray1);border-radius:10px;} .my-topwrap .ksied-child-list::-webkit-scrollbar-track {background-color:#0002;border-radius:10px;} .my-topwrap .ksied-child-list li{display:inline-block;margin:0 10px;max-width:calc(33.33% - 20px);vertical-align:top;} .my-topwrap .ksied-child-list .name{font-size:inherit;font-weight:inherit;color:#DEE8EF;white-space:break-spaces;word-break:break-word;line-height:1.2;} .my-topwrap .ksied-child-list .plus{display:block;width:80px;height:80px;line-height:78px;background:#0003;border:2px solid #fff;color:#fff;border-radius:50%;font-size:2.2rem;position:relative;transform-origin:center;} .my-topwrap .ksied-child-list .plus i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .my-topwrap .ksied-child-list .plus:hover{transform:rotate(-90deg);background:#0009;} .my-recent-result{background:#0003;padding:20px 30px;display:flex;align-items:center;} .my-recent-result .ksied-child{width:130px;margin-right:30px;line-height:1;} .my-recent-result .cont{width:calc(100% - 160px);} .my-recent-result .cont > .tit{font-size:1.25rem;font-weight:700;margin:0 0 5px;} .my-recent-result .cont > .tit > .date{font-size:1rem;color:#fffc;font-weight:300;} .my-recent-result ul li{display:flex;font-size:.9rem;padding:2px 0;} .my-recent-result ul li .tit{margin: 4px 10px 0 0;display: inline-block;height:100%;flex-shrink:0;background:#fff;padding:0 10px;font-weight:700;border-radius:40px;} .my-recent-result ul li.state1 .tit{color:#13A164;} .my-recent-result ul li.state2 .tit{color:var(--sub-color);} .my-recent-result ul li.state3 .tit{color:var(--main-color);} .my-recent-result ul li[class*="state"] > div{width:calc(100% - 50px);display:flex;flex-wrap:wrap;} .my-recent-result [class*="dev-ico"]{background:#0006;margin:1px 2px;} .my-graph-wrap{display:flex;flex-wrap:wrap;height:100%;justify-content:end;margin:-10px;} .my-graph-wrap .graph-bx{height:100%;width:calc(50% - 20px);max-width:350px;max-height:175px;padding:20px 10px;background:#0003;flex:1 1 auto;margin:10px;text-align:center;} .my-graph-wrap .graph-bx .tit{font-weight:500;margin:0 0 15px;} .my-graph-wrap .graph-bx [class*="graph"] img{max-width:100%;} .my-graph-wrap .graph-bx .nodata{display:flex;align-items:center;justify-content:space-between;} .my-graph-wrap .graph-bx .nodata .no-graph{width:85px;height:85px;border-radius:50%;background:#ccc;position:relative;flex-shrink:0;} .my-graph-wrap .graph-bx .nodata .no-graph:before{content:"";width:38px;height:38px;border-radius:50%;background:#09829a;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .my-graph-wrap .graph-bx .nodata .cont{width:calc(100% - 100px);text-align:left;} .my-graph-wrap .graph-bx .nodata .txt{word-break:keep-all;line-height:1.2;font-size:1rem;color:#fffc;font-weight:300;} .my-graph-wrap .graph-bx .nodata .btn-d{line-height:28px;} .my-notice {background:#F7F8F9;} .my-notice .btn-wrap{height:100%;} .my-notice .top-wrap{padding:40px 40px 30px 100px;border-bottom:1px dashed #DFDFDF;color:#121314;display:flex;justify-content:space-between;position:relative;} .my-notice .top-wrap:before{content:"";width:6px;height:calc(100% - 70px);border-radius:6px;background:#0F4155;opacity:.2;position:absolute;left:50px;top:40px;transform:translateX(-50%);} .my-notice .top-wrap:after{content:"";width:40px;height:40px;background:url(../img/my-notice-ico.png) no-repeat 50% 50%, linear-gradient(90deg, #1884D1, #0B49CA);border-radius:50%;position:absolute;left:30px;} .my-notice .top-wrap .tit{font-size:1.75rem;font-weight:600;line-height:1.1;margin-bottom:20px;} .my-notice .btm-wrap{padding:30px 40px 30px 100px;} #mypage-wrap.teacher em{color:var(--sub-color);} #mypage-wrap.teacher #my-snb .locate:before{filter:hue-rotate(-30deg) brightness(1.3);} #mypage-wrap.teacher #my-snb #snbmn li.active a{color:var(--sub-color);border-color:var(--sub-color);} #mypage-wrap.teacher #my-snb #snbmn li.active a:after{color:var(--sub-color);} #mypage-wrap.teacher .my-topwrap{background-color:#0BA2C1;} #mypage-wrap.teacher .my-notice .top-wrap:after{filter:hue-rotate(-30deg) brightness(1.3);} #mypage-wrap.teacher .tab-txt.dev-factor a.on{color:var(--sub-color);border-color:var(--sub-color);} #mypage-wrap.teacher a.on .badge.num, #mypage-wrap.teacher a.active .badge.num{background:var(--sub-color);} #mypage-wrap.teacher .my-quick-info a .num{color:var(--sub-color);} #mypage-wrap.teacher .my-gra-bnr{background:linear-gradient(90deg, #51BC1D, #1B9E52);} #my-content.my-main .my-ksied-list{position:relative;margin-bottom:30px;} .ksied-progress-list > li{background:#F7F8F9;padding:20px 20px 25px;margin-bottom:10px;} .ksied-progress-list.group > li{background:#F0F5FD;} .ksied-progress-list > li > .row{justify-content:space-between;} .ksied-progress-list > li:last-child{margin-bottom:0;} .ksied-progress-list > li > .tit{font-size:1.125rem;font-weight:500;margin:0 0 15px;color:#121314;} .ksied-progress-list .col-1{width:110px;} .ksied-progress-list .col-2{width:calc(100% - 270px);} .ksied-progress-list .col-3{width:160px;} .ksied-progress-list .ksied-profile-img{width:70px;height:70px;} .ksied-progress-list.group .ksied-profile-img{border:1px solid #EAEAEA;} .ksied-progress-list .info{font-size:.925rem;display:flex;flex-wrap:wrap;} .ksied-progress-list .info dt{padding:2px 0;width:110px;color:#808080;font-weight:300;} .ksied-progress-list .info dd{padding:2px 0;width:calc(100% - 110px);color:#333F57;} .ksied-progress-list .bx-desc {background:#fff;margin:5px 0 0;font-size:.875rem;} .ksied-progress-list .bx-desc .stit{padding:5px 15px;background:none;} .ksied-progress-list .bx-desc .cont{padding:5px 15px;color:#919191;background:#fafafa;} .my-quick-info{display:flex;margin:-5px;} .my-quick-info a{flex:1;min-width:calc(25% - 10px);margin:5px;background:#fafafa;border:1px solid #EAEAEA;border-radius:.5rem;padding:25px 30px;} .my-quick-info a{display:flex;justify-content:space-between;align-items:center;} .my-quick-info a .stit{font-size:1rem;color:#808080;transition:all .2s;} .my-quick-info a .tit{font-size:1.5rem;color:#121314;font-weight:700;margin:5px 0 20px;line-height:1.1;} .my-quick-info a .num{font-size:1.5rem;color:var(--main-color);font-weight:900;} .my-quick-info a .num .locate{margin-left:5px;color:#4F78BB;border-bottom:1px solid #4F78BB;font-size:.925rem;font-weight:400;} .my-quick-info a .num .locate:before{content:"\f3c5";font-family:fontAwesome;margin-right:5px;} .my-quick-info a:after{content:"";display:block;width:110px;height:110px;background-image:url(../img/my-info-ico1.png);background-size:cover;flex-shrink:0;} .my-quick-info a.ico2:after{background-image:url(../img/my-info-ico2.png);} .my-quick-info a.ico3:after{background-image:url(../img/my-info-ico3.png);} .my-quick-info a.ico4:after{background-image:url(../img/my-info-ico5.png);} .my-quick-info a:hover{background:#EAF2FF;border-color:var(--main-color);} .my-quick-info a:hover .stit{color:var(--dark-color);} .my-gra-bnr{background:linear-gradient(90deg, #048CC6, #12C2C2);color:#fff;} .my-gra-bnr .top-wrap{padding:30px 40px 30px 100px;position:relative;} .my-gra-bnr .top-wrap:before{content:"";width:42px;height:40px;background:url(../img/my-target-ico.png) no-repeat 50% 50%/cover;position:absolute;left:40px;top:50%;transform:translateY(-50%);} .my-gra-bnr .btm-wrap{padding:10px 40px 10px 100px;background:#0003;display:flex;justify-content:space-between;align-items:center;} .my-gra-bnr .tit{font-size:1.875rem;font-weight:700;} .my-gra-bnr .tit span{font-size:1rem;color:#fffc;letter-spacing:.2rem;font-weight:400;margin-left:10px;display:inline-block;} .my-gra-bnr .txt{font-size:.9rem;font-weight:300;} .my-gra-bnr .btn-d{color:#121314;width:240px;font-weight:500 !important;} .my-gra-bnr .btn-d:hover{color:#fff;} @media only screen and (max-height:1080px) and (min-width:1800px){ #my-snb{width:calc(50% - 460px);} #my-snb #snbmn{width:200px;margin-right:40px;} #my-content{width:calc(50% + 460px);} #my-content .c_width{width:1120px;margin-left:40px;} /*공통*/ h3.subm-tit{font-size:1.75rem;} .ksied-profile-img, .my-topwrap .ksied-child-list .plus{width:70px;height:70px;} .ksied-child .name{font-size:1.3rem;margin:10px 0 0;} #my-snb #snbmn h2.tit{margin:10px 0 30px;font-size:2.5rem;} #my-snb #snbmn li a{font-size:1.125rem;} .my-topwrap .info-wrap .name{font-size:2.875rem;margin:0 0 30px;} .my-topwrap .info-wrap .info{font-size:.925rem;} .my-topwrap .info-wrap .info .txt-clamp{min-height:50px;} .my-topwrap .col-1{width:300px;} .my-topwrap .col-2{width:calc(100% - 770px);margin:0 20px;} .my-topwrap .col-3{width:430px;} .my-recent-result{padding:15px;} .my-recent-result .ksied-child{width:100px;margin-right:20px;} .my-recent-result .cont{width:calc(100% - 120px);} .my-recent-result .cont > .tit{font-size:1.125rem;} .my-recent-result .cont > .tit > .date{font-size:.925rem;} .my-notice .top-wrap .tit{font-size:1.625rem;} .my-quick-info a .tit{font-size:1.375rem;} .my-quick-info a:after{width:100px;height:100px;} .my-gra-bnr .tit{font-size:1.75rem;} } @media only screen and (max-width:1800px){ #my-snb{width:calc(50% - 460px);} #my-snb #snbmn{width:200px;margin-right:40px;} #my-content{width:calc(50% + 460px);} #my-content .c_width{width:1120px;margin-left:40px;} /*공통*/ h3.subm-tit{font-size:1.75rem;} .ksied-profile-img, .my-topwrap .ksied-child-list .plus{width:70px;height:70px;} .ksied-child .name{font-size:1.3rem;margin:10px 0 0;} #my-snb #snbmn h2.tit{margin:10px 0 30px;font-size:2.5rem;} #my-snb #snbmn li a{font-size:1.125rem;} .my-topwrap .info-wrap .name{font-size:2.875rem;margin:0 0 30px;} .my-topwrap .info-wrap .info{font-size:.925rem;} .my-topwrap .info-wrap .info .txt-clamp{min-height:50px;} .my-topwrap .col-1{width:300px;} .my-topwrap .col-2{width:calc(100% - 770px);margin:0 20px;} .my-topwrap .col-3{width:430px;} .my-recent-result{padding:15px;} .my-recent-result .ksied-child{width:100px;margin-right:20px;} .my-recent-result .cont{width:calc(100% - 120px);} .my-recent-result .cont > .tit{font-size:1.125rem;} .my-recent-result .cont > .tit > .date{font-size:.925rem;} .my-notice .top-wrap .tit{font-size:1.625rem;} .my-quick-info a .tit{font-size:1.375rem;} .my-quick-info a:after{width:100px;height:100px;} .my-gra-bnr .tit{font-size:1.75rem;} } @media only screen and (max-width:1600px){ #my-snb{width:calc(50% - 360px);} #my-content{width:calc(50% + 360px);} #my-content .c_width{width:920px;} #my-content.my-main article{margin-bottom:30px;} /*공통*/ h3.subm-tit{font-size:1.6rem;} .ksied-state-btn{line-height:40px !important;min-width:150px;} .my-topwrap > .row{flex-wrap:wrap;} .my-topwrap .col-1{width:300px;} .my-topwrap .col-2{width:calc(100% - 300px);margin:0;} .my-topwrap .col-3{width:100%;margin:20px 0 0;} .my-topwrap .info-wrap .name{width:300px;padding-right:20px;font-size:2.75rem;flex-shrink:0;margin:0;} .my-topwrap .info-wrap .info{display:none;} .my-topwrap .chk-tit br{display:block;} .my-topwrap .child-list{display:flex;margin:0;} .my-topwrap .child-list .chk-tit{width:120px;border:0;margin:4px 10px 10px 0;line-height:1.4;text-align:left;font-size:1.125rem;word-break:keep-all;padding:0;font-weight:500;} .my-topwrap .child-list .btn-conv-list{top:75px;left:0;transform:none;} .my-topwrap .ksied-child-list{width:calc(100% - 150px);text-align:left;} .my-topwrap .ksied-child-list li{text-align:center;} .my-topwrap .ksied-child-list .name{margin:3px 0 0;font-size:.9rem;} .my-topwrap .ksied-profile-img, .my-topwrap .ksied-child-list .plus{width:50px;height:50px;} .my-topwrap .ksied-child-list .plus{font-size:1.5rem;} .my-graph-wrap{margin:-10px;} .my-graph-wrap .graph-bx{max-width:unset;border-radius:.5rem;padding:10px;} .my-graph-wrap .graph-bx .tit{margin:0 0 10px;} .my-recent-result{padding:10px 15px;border-radius:.5rem;} .my-recent-result .ksied-child{width:150px;margin-right:20px;flex-shrink:0;display:flex;text-align:left;align-items:center;} .my-recent-result .ksied-child .name{font-size:1.125rem;margin:0;} .my-recent-result .ksied-child .ksied-profile-img{margin:0 15px 0 0;flex-shrink: 0;} .my-recent-result .cont > .tit{display:none;font-size:1rem;font-weight:500;margin:0;} .my-recent-result ul{display: flex;align-items: center;} .my-recent-result ul li{align-items:center;margin:0 15px 0 0;flex-shrink:0;} .my-recent-result ul li .tit{font-size: .825rem;font-weight: 500;margin: 0 5px 0 0;} .my-recent-result ul li[class*="state"] > div{width:auto;} .my-notice .top-wrap{padding:30px 30px 20px 80px;} .my-notice .btm-wrap{padding:20px 30px 30px 80px;} .my-notice .top-wrap .tit{font-size:1.5rem;margin-bottom:10px;} .my-notice .top-wrap:before{left:40px;} .my-notice .top-wrap:after{width:30px;height:30px;left:25px;background-size:60%, 100%;} .my-quick-info a{padding:20px;} .my-quick-info a .stit{display:none;} .my-quick-info a:after{width:70px;height:70px;} .my-quick-info a .tit{font-size:1.25rem;margin:5px 0 15px;} .my-quick-info a .num{font-size:1.25rem;} .my-gra-bnr .top-wrap:before{width:32px;height:30px;left:30px;} .my-gra-bnr .top-wrap{padding:20px 30px 20px 80px;} .my-gra-bnr .btm-wrap{padding:10px 30px 10px 80px;} .my-gra-bnr .tit span{font-size:.9rem;} .my-gra-bnr .btn-d{width:200px;} } @media only screen and (max-width:1440px){ #my-snb{padding:40px 0;} .my-topwrap{padding:40px 0;} .my-topwrap .child-list .btn-conv-list{top:72px;} } @media only screen and (max-width:1240px){ .sub-container.variant5 #my-content{padding-bottom:120px;} #my-snb{width:calc(50% - 260px);} #my-snb #snbmn{margin-right:30px;} #my-content{width:calc(50% + 260px);} #my-content .c_width{width:700px;margin-left:30px;} #my-content.my-main article .more i{width:20px;height:20px;line-height:19px;} /*공통*/ h3.subm-tit{font-size:1.4rem;} .ksied-state-btn{line-height: 35px !important;min-width: 140px;font-size: .925rem !important;} #my-snb .locate{font-size:1rem;} #my-snb .locate:before{width:17px;height:19px;} #my-snb #snbmn h2.tit{font-size:2.25rem;margin:10px 0 20px;} #my-snb #snbmn li a{font-size:1.1rem;padding:15px 0;} #my-snb #snbmn{top:100px;} .my-topwrap{margin:0 0 30px;} .my-topwrap .info-wrap .name{font-size:2.3rem;} .my-topwrap .info-wrap .name .btn-d{margin-left:0px;} .my-topwrap .child-list .chk-tit{font-size:1.1rem;} .my-topwrap .ksied-profile-img, .my-topwrap .ksied-child-list .plus{width:40px;height:40px;} .my-topwrap .col-3{margin:15px 0 0;} .my-notice .top-wrap{padding:20px 20px 15px 60px;} .my-notice .top-wrap:after{left:15px;} .my-notice .top-wrap:before{left:30px;} .my-notice .top-wrap .tit{font-size:1.3rem;} .my-notice .btm-wrap{padding:15px 20px 20px 60px;} .ksied-progress > .txt{font-size:.925rem;} .ksied-progress-list > li > .tit{display:none;} .ksied-progress-list .col-1{width:70px;} .ksied-progress-list .col-2{width:calc(100% - 210px);} .ksied-progress-list .col-3{width:140px;} .ksied-progress-list .info dt, .ksied-progress-list .info dd{padding:0;} .ksied-progress-list .ksied-profile-img{width:50px;height:50px;margin:0 20px 0 0;} .my-quick-info a{padding:15px 5px 15px 15px;min-width:calc(33.33% - 10px);} .my-quick-info a:after{width:60px;height:60px;} .my-quick-info a .tit{font-size:1.125rem;word-break:keep-all;} .my-quick-info a .num{word-break:keep-all;line-height:1.1;} .my-quick-info a .num .locate{display:inline-block;margin-left:0;font-size:.875rem;} .my-gra-bnr .top-wrap:before{display:none;} .my-gra-bnr .top-wrap, .my-gra-bnr .btm-wrap{padding:10px 20px;} .my-gra-bnr .tit{font-size:1.5rem;} .my-gra-bnr .txt{display:none;} .my-gra-bnr .btn-wrap{width:100%;} .my-gra-bnr .btn-d{width:100%;line-height:40px;} } @media only screen and (max-width:1023px){ .sub-container.variant5 #my-content{padding-bottom:90px;} #mypage-wrap{flex-wrap:wrap;} #my-snb{width:100%;background:#f5f5f5;padding:0;} #my-snb #snbmn{width:740px;padding:0;margin:0 auto;float:none;} #my-content{width:100%;padding:0;} #my-content .c_width{width:740px;margin:0 auto;float:none;} #my-snb .locate, #my-snb .tit{display:none;} #my-snb ul{display:flex;width:100%;overflow-x:auto;} #my-snb ul::-webkit-scrollbar {height:5px;} #my-snb ul::-webkit-scrollbar-thumb {background-color:var(--dark-color);border-radius:5px;} #my-snb ul::-webkit-scrollbar-track {background-color:#0002;border-radius:5px;} #my-snb ul > li{flex:0 0 auto;min-width:20%;} #my-snb #snbmn li a{padding:15px 10px;font-size:1rem;line-height:1.2;height:100%;border:0;font-weight:300;} #my-snb #snbmn li a:after{color:#0003;font-size:.6rem;} .my-topwrap .child-list .chk-tit{font-size:1rem;width:110px;margin:6px 10px 10px 0;} .my-topwrap{padding:30px 0;} } @media only screen and (max-width:767px){ #my-snb #snbmn, #my-content .c_width{width:auto;margin:0 20px;} #my-content.my-main article{margin-bottom:20px;} #my-content.my-main article .more{font-size:.9rem;} /*공통*/ h3.subm-tit{font-size:1.25rem;} .ksied-state-btn{line-height:30px !important;min-width:130px;font-size:.875rem !important;} .my-topwrap{margin:0 0 20px;padding:25px 0;} .my-topwrap .col-1{width:100%;} .my-topwrap .col-2{width:100%;margin:15px 0 0;} .my-topwrap .ksied-child-list, .my-topwrap .ksied-child-list li, .my-topwrap .ksied-child-list li a{display:flex;align-items:center;} .my-topwrap .ksied-child-list{width:calc(100% - 100px);} .my-topwrap .ksied-child-list li{max-width:unset;} .my-topwrap .ksied-child .ksied-profile-img, .my-topwrap .ksied-child .ksied-child-list .plus{width:35px;height:35px;margin-right:5px;} .my-topwrap .ksied-child .ksied-child-list .plus{font-size:1rem;border-width:1px;} .my-topwrap .ksied-child-list li, .my-topwrap .ksied-profile-img, .my-topwrap .ksied-child-list .plus, .my-topwrap .ksied-child-list .name{flex-shrink:0;} .my-recent-result{flex-wrap:wrap;} .my-recent-result .cont{width:100%;} .my-recent-result .ksied-child .ksied-profile-img{margin:0 5px 0 0;} .my-notice .top-wrap{flex-wrap:wrap;} .my-notice .btn-wrap{width:100%;margin:15px 0 0;} .my-notice .top-wrap .tit, .my-notice .top-wrap .txt{word-break:keep-all;} .my-notice .top-wrap .tit br{display:none;} .ksied-progress > .txt{margin:0 0 5px;} .ksied-progress-list > li{padding:15px 10px;} .ksied-progress-list .col-2{width:calc(100% - 70px);} .ksied-progress-list .col-3{width:100%;margin:10px 0 0;padding-left:70px;} .ksied-progress-list .info{font-size:.875rem;} .my-quick-info{flex-wrap:wrap;} .my-quick-info a{min-width:100%;} .my-gra-bnr .tit{font-size:1.3rem;} .my-gra-bnr .tit span{font-size:.825rem;} } @media only screen and (max-width:576px){ .my-topwrap{padding:20px 0;} .my-topwrap .info-wrap .name{font-size:2rem;} .my-topwrap .col-2{margin:20px 0 15px;} .my-topwrap .col-3{margin:0;} .my-topwrap .child-list .chk-tit{margin:0;} .my-graph-wrap{margin:-5px;} .my-graph-wrap .graph-bx .tit, .my-graph-wrap .graph-bx .nodata .txt{font-size:.925rem;} .my-graph-wrap .graph-bx{width:calc(50% - 20px);margin:5px;} .my-graph-wrap .graph-bx .nodata .btn-d{margin-top:5px !important;} .my-recent-result ul{flex-wrap:wrap;} .my-recent-result ul li .tit{font-size:.75rem;padding:0 5px;} .ksied-progress-list .info{display:flex;flex-wrap:wrap;align-items:center;} .ksied-progress-list .info dt{display:none;} .ksied-progress-list .info dd{width:auto;margin-right:10px;word-break:keep-all;} .ksied-progress-list .info dd.name{font-size:1rem;font-weight:700;color:#121314;} .ksied-progress-list .info dd.bx{width:100%;} .ksied-progress-list .bx-desc .stit, .ksied-progress-list .bx-desc .cont{padding:5px 10px;} .my-quick-info a{padding:10px 5px 10px 10px;} .my-quick-info a .tit{margin:0 0 10px;font-size:1rem;} .my-gra-bnr .tit{font-size:1.125rem;} .my-gra-bnr .tit span{letter-spacing:.1rem;} .my-gra-bnr .btn-d{line-height: 30px;font-size: .875rem;} } @media only screen and (max-width:415px){ .sub-container.variant5 #my-content{padding-bottom:60px;} #my-snb #snbmn, #my-content .c_width{margin:0 10px;} .my-graph-wrap .graph-bx{width:calc(100% - 10px);height:auto;} .my-notice .top-wrap .txt{font-size:.875rem;} .my-notice .btm-wrap{padding:10px;} .ksied-progress .graph-bar .line span{border-color:#0002;} .ksied-progress-list .col-1{width:45px;} .ksied-progress-list .col-2{width:calc(100% - 45px);} .ksied-progress-list .ksied-profile-img{width:35px;height:35px;} .ksied-progress-list .col-3{padding-left:45px;} .my-gra-bnr .tit span{display:none;} } /*[s] 서브: K-SIED 발달체크 현황*/ .my-info-wrap{position:relative;padding:30px;border-radius:.5rem;border:2px solid #87B9F9;} .my-info-wrap .balloon-tip{position:absolute;top:-20px;right:50px;} .my-info-wrap .info-list{display:flex;margin:-5px;flex-wrap:wrap;} .my-info-wrap .info-list.d4 li{width:calc(25% - 10px);} .my-info-wrap .info-list.d3 li{width:calc(33.33% - 10px);} .my-info-wrap .info-list.d2 li{width:calc(50% - 10px);} .my-info-wrap .info-list li{padding:15px 20px;display:flex;align-items:center;background:#F5F5F5;border-radius:1rem;margin:5px;} .my-info-wrap .info-list li:before{flex-shrink:0;content:"";display:block;width:110px;height:110px;margin-right:20px;background-image:url(../img/my-info-ico4.png);background-size:cover;} .my-info-wrap .info-list li.ico2:before{background-image:url(../img/my-info-ico5.png);} .my-info-wrap .info-list li.ico3:before{background-image:url(../img/my-info-ico6.png);} .my-info-wrap .info-list .tit{font-size:1.25rem;color:#121314;font-weight:500;margin:0 0 15px;line-height:1.1;} .my-info-wrap .info-list .num{font-size:1.5rem;color:var(--navy);font-weight:900;} .my-info-wrap .info-ai-cmt .btn-d{font-weight: 500 !important;} /*맞춤형 정보: ksied 결과*/ .my-info-wrap .ksied-result{text-align:center;margin:0 -30px;} .my-info-wrap .ksied-result [class*="dev-ico"]{margin:0 auto 10px;} .my-info-wrap .ksied-result li{border-right:1px solid #eaeaea;} .my-info-wrap .ksied-result li:last-child{border-right:0;} .my-info-wrap .ksied-result .tit{font-size:1.125rem;color:#666;font-weight:500;} .my-info-wrap .ksied-result .txt{font-size:1rem;font-weight:700;} .my-info-wrap .ksied-result li.state1 [class*="dev-ico"]{background:#13A164;} .my-info-wrap .ksied-result li.state1 .txt{color:#13A164;} .my-info-wrap .ksied-result li.state2 [class*="dev-ico"]{background:var(--sub-color);} .my-info-wrap .ksied-result li.state2 .txt{color:var(--sub-color);} .my-info-wrap .ksied-result li.state3 [class*="dev-ico"]{background:var(--main-color);} .my-info-wrap .ksied-result li.state3 .txt{color:var(--main-color);} .my-info-wrap .list-nodata{padding:0;border:0;} .ksied-progress-list.record{background:#F7F8F9;border-radius:.3rem;overflow:hidden;margin-bottom:20px;} .ksied-progress-list.record .title{padding:15px 20px;background:#3082E4;color:#fff;font-size:1.25rem;line-height:1.2;font-weight:500;} .ksied-progress-list.record .content{padding:30px 40px;} .ksied-progress-list.record .ksied-profile-img{margin:0;} .ksied-progress-list.record .info{font-size:inherit;} .ksied-progress-list.record .info dt, .ksied-progress-list.record .info dd{padding:0;} .ksied-progress-list.record .list{margin-top:20px;border-top:1px solid #dadada;font-size:.925rem;color:#333F57;} .ksied-progress-list.record .list li{padding:10px 0;border-bottom:1px dashed #dadada;} .my-ksied-wrap .intro-img-bx{margin-top:40px;border:1px solid #87B9F9;} .intro-img-bx.sm .thumb{width:200px;height:120px;border-radius:.5rem;} .intro-img-bx.sm .cont{width:calc(100% - 230px);padding-right:220px;} .intro-img-bx.sm h3.subm-tit{font-size:1.5rem;} .intro-img-bx.sm .txt{font-weight:300;line-height:1.4;font-size:1rem;} @media only screen and (max-width:1800px){ .my-info-wrap .info-list .tit{font-size:1.125rem;} .my-info-wrap .info-list li:before{width:100px;height:100px;} } @media only screen and (max-width:1600px){ .my-info-wrap{padding:20px;} .my-info-wrap .info-list .tit{font-size:1rem;margin:0 0 10px;} .my-info-wrap .info-list .num{font-size:1.25rem;} .my-info-wrap .info-list li:before{width:70px;height:70px;margin-right:10px;} .info-ai-cmt{padding:20px 20px 20px 100px;background-size:60px;} .info-ai-cmt p{font-size:1rem;font-weight:300;word-break:keep-all;padding-right:10px;} .info-ai-cmt p br{display:none;} .ksied-progress-list.record .title{font-size:1.125rem;padding:10px 15px;} .ksied-progress-list.record .content{padding:20px;} .my-info-wrap .balloon-tip{right:20px;} .my-info-wrap .balloon-tip:before{left:auto;right:30px;} /*공통*/ .balloon-tip{padding:5px 7px;border-radius:.3rem;font-size:.875rem;} .intro-img-bx{padding:20px 30px;} .link-more-bx .btn-d, .intro-img-bx .btn-d{padding:0 20px;line-height:42px;} .intro-img-bx.sm .cont{width:calc(100% - 170px);padding-right:200px;} .intro-img-bx.sm .thumb{width:150px;} .intro-img-bx.sm h3.subm-tit{font-size:1.325rem;} } @media only screen and (max-width:1440px){ /*공통*/ .intro-img-bx .btn-wrap{ position: relative;width: auto;top: auto;right: auto;margin-top: 20px;transform:none;} .intro-img-bx.sm .cont{padding-right:0;} } @media only screen and (max-width:1240px){ #my-content.my-sub h2{font-size:1.8rem;margin:0 0 30px;} .my-info-wrap .info-list li{padding:10px 15px 10px 5px;border-radius:.3rem;word-break:keep-all;} .my-info-wrap .info-list li:before{width:60px;height:60px;} .info-ai-cmt{padding: 20px 20px 20px 85px;background-size: 50px;background-position:20px 50%;} .info-ai-cmt p{font-size:.925rem;} .ksied-progress-list.record .title{font-size:1.05rem;} .ksied-progress-list.record .content{padding:10px 20px;} .ksied-progress-list.record .info{font-size:.925rem;} /*공통*/ .intro-img-bx.sm h3.subm-tit{font-size:1.125rem;word-break:keep-all;} .link-more-bx .btn-d, .intro-img-bx .btn-d{font-size:.925rem;} } @media only screen and (max-width:1023px){ #my-content.my-sub h2{font-size: 1.5rem;margin: 0 0 20px;} #my-content.my-sub .c_width{padding-top:30px;} .my-info-wrap .info-list .tit br{display:none;} .my-info-wrap .info-list.d3 li, .my-info-wrap .info-list.d4 li{width:calc(50% - 10px);flex:1 1 auto;} /*공통*/ .intro-img-bx.sm h3.subm-tit{font-size:1.05rem;} } @media only screen and (max-width:767px){ .info-ai-cmt{flex-wrap:wrap;padding: 10px 10px 10px 70px;background-size: 40px;background-position: 15px 11px;} .info-ai-cmt p{padding:0;} .info-ai-cmt .btn-wrap{width:100%;margin:10px 0 0;} .ksied-progress-list.record .title{font-size:1rem;} .ksied-progress-list.record .content{padding:10px;} .my-ksied-wrap .intro-img-bx{margin-top:20px;} /*공통*/ .intro-img-bx {padding: 20px;} .intro-img-bx.sm {flex-wrap:wrap;} .intro-img-bx.sm .thumb.logo{width:100%;margin-bottom:10px;height:50px;} .intro-img-bx.sm .thumb.logo img{max-height:30px;} .intro-img-bx.sm .cont{width:100%;} } @media only screen and (max-width:576px){ .my-info-wrap .info-list{margin:-2px;} .my-info-wrap .info-list.d2 li, .my-info-wrap .info-list.d3 li, .my-info-wrap .info-list.d4 li{width:calc(100% - 4px);margin:2px;} /*공통*/ h3{margin:1.5rem 0 .8rem;} .balloon-tip{max-width:calc(100% - 40px);line-height:1.2;word-break:keep-all;} } @media only screen and (max-width:415px){ .my-info-wrap{padding:20px 10px 10px;} /*공통*/ .intro-img-bx.sm h3.subm-tit{font-size:1rem;} .intro-img-bx{padding:10px;} .intro-img-bx.sm .cont{padding:0;} .intro-img-bx .btn-wrap{margin-top:10px !important;} } /*[e] 서브: K-SIED 발달체크 현황*/ /*[s] 서브: 영유아 관찰일지*/ .btn-conv{position:relative;display:inline-block;vertical-align:middle;} .btn-conv .ksied-profile-img{width:55px;height:55px;border:3px solid #fff;box-shadow:0 2px 5px #0005;background:#f5f5f5;margin:0;} .btn-conv .return-ico{width:20px;height:20px;background:var(--grd);border-radius:50%;position:absolute;bottom:-2px;right:-2px;z-index:1;display:flex;justify-content:center;align-items:center;transition:all .3s;} .btn-conv .return-ico:before{width:14px;height:14px;filter:invert(1);transition:all .3s;} .btn-conv:not(.active):hover .return-ico{background:#000;} .btn-conv:not(.active):hover .return-ico:before{transform:rotate(90deg);} .btn-conv.active .ksied-profile-img{border-color:var(--main-color);} .btn-conv-wrap{position:relative;} .btn-conv-list{width:500px;padding:15px 30px 20px 20px;border:1px solid #dadada;background:#F1F1F1;z-index:9;position:absolute;right:0;top:65px;border-radius:.5rem;box-shadow:0px 0px 15px #0002;} .btn-conv-list > .tit{color:#121314;margin:0 0 15px;font-size:1.125rem;font-weight:600;} .btn-conv-list ul{display:flex;flex-wrap:wrap;margin:-5px;text-align:center;max-height:200px;overflow-y:auto;} .btn-conv-list ul li{width:calc(20% - 10px);margin:5px;position:relative;} .btn-conv-list .ksied-profile-img{width:55px;height:55px;margin-bottom:10px;border:2px solid #fff;} .btn-conv-list .ico-bookmark{width:20px;height:20px;background:#fc6;font-size:.5rem;color:#f63;border:2px solid #f63;border-radius:50%;position:absolute;top:35px;right:10px;z-index:1;display:flex;justify-content:center;align-items:center;} .btn-conv-list .ico-bookmark:before{content:"\f005";font-family:fontAwesome;font-style:normal;font-weight:900;} .btn-conv-list li:not(.active) .ico-bookmark{display:none;} .btn-conv-list .plus{display:block;width:55px;height:55px;line-height:55px;background:#0003;border:2px solid #fff;color:#fff;border-radius:50%;font-size:1.5rem;position:relative;transform-origin:center;margin:0 auto;} .btn-conv-list .plus:hover{background:var(--main-color);} .btn-conv-list .name{font-size:.925rem;font-weight:500;line-height:1.2;color:#808080;} .btn-conv-list ul li:not(.active) a:hover .ksied-profile-img{border-color:var(--main-color);} .btn-conv-list ul li:not(.active) a:hover .name{text-decoration:underline;} .btn-conv-list ul li.active .ksied-profile-img{border:3px solid var(--main-color);background:#fff;} .btn-conv-list ul li.active .name{color:var(--main-color);font-weight:700;} .btn-conv-list .close{display:block;width:30px;height:30px;line-height:30px;border-radius: 50%;background:var(--dgray1);text-align:center;color:#fff;position:absolute;top:15px;right:15px;font-size:.875rem;} .btn-conv-list .close:hover{background:#000;} .active-profile-bx{padding:25px 30px;border-radius:.3rem;border:2px solid #87B9F9;display:flex;margin:0 0 30px;} .active-profile-bx .ksied-child{display:flex;text-align:left;align-items:center;} .active-profile-bx .ksied-child .ksied-profile-img{width:100px;height:100px;border:1px solid #eaeaea;margin:0 30px 0 0;flex-shrink:0;} .active-profile-bx .ksied-child .tit{margin:0 0 5px;color:#808080;} .active-profile-bx .ksied-child .name{margin:0 0 3px;font-size:1.75rem;line-height:1.2;} .active-profile-bx .ksied-child .date{color:#666;} .active-profile-bx .col-1{width:400px;} .active-profile-bx .col-2{width:calc(100% - 400px);} .active-profile-bx .info{display:flex;justify-content:space-between;align-items:center;} .active-profile-bx .info dt{font-size:1.125rem;font-weight:500;color:#121314;margin:0 0 10px;} .active-profile-bx .info .dday{background:#0081A1;border-color:#0081A1;} .active-profile-bx .info .num{font-size:1.75rem;font-weight:900;color:var(--main-color);line-height:1;} .active-profile-bx .info .date em{color:#0081A1;font-size:.925rem;} .active-profile-bx .info .nodata{color:#919191;} .active-profile-bx.history{background:#f5f5f5;border:1px solid #dadada;padding:15px 20px;} .active-profile-bx.history .ksied-child .ksied-profile-img{width:80px;height:80px;margin:0 20px 0 0;} .my-observe-list{position:relative;} ul.my-observe-list > li{background:#F7F8F9;padding:30px 20px 30px 90px;position:relative;margin-bottom:30px;} ul.my-observe-list:before{content:"";width:6px;height:100%;background:#CFD9DD;position:absolute;top:0;left:45px;} ul.my-observe-list > li:not(.list-nodata):after{content:"";width:40px;height:40px;background:url(../img/my-target-ico-sm.png) no-repeat 50% 50%, var(--grd);border-radius:50%;position:absolute;left:27px;top:-10px;box-shadow:0 10px 20px #1074F533;} .my-observe-list .date em{color:#0081A1;font-size:.925rem;} .my-observe-list .subject{font-size:1.5rem;color:#2B3A6A;font-weight:900;line-height:1.3;margin:10px 0 20px;} .my-observe-list li:not(.active) .content{display:flex;} .my-observe-list .content:has(.thumb-wrap) .cont{width:calc(100% - 120px);} .my-observe-list .thumb-wrap{width:90px;margin-right:30px;position:relative;} .my-observe-list .thumb-wrap .thumb{width:90px;height:90px;border:1px solid #dadada;} .my-observe-list .thumb-wrap .num{min-width:25px;line-height:23px;height:25px;padding:0 3px;text-align:center;font-size:0.925rem;font-weight:700;color:#fff;border-radius:3rem;display:block;background:var(--main-color);border:1px solid #fff;position:absolute;top:-2px;right:-10px;z-index:1;} .my-observe-list .cont > .txt{color:#333;font-weight:400;margin:0 0 10px;} .my-observe-list > li:not(.active) .cont > .txt{color:#666;font-weight:300;} .my-observe-list .more{color:var(--main-color);font-size:.925rem;font-weight:500;} .my-observe-list .more i{width:15px;line-height:15px;height:15px;text-align:center;background:var(--main-color);color:#fff;font-size:.6rem;border-radius:50%;vertical-align:text-bottom;margin-right:5px;} .my-observe-list .more.off {color:#949CB4;} .my-observe-list .more.off i{background:#949CB4;} .my-observe-list .more.off i:before{content:"\f068";} .my-observe-list .detail-info-bx{font-size:inherit;} .my-observe-list .detail-info-bx .info-img{margin-bottom:0;} .my-observe-list.view{background:#F7F8F9;padding:30px;margin-bottom:30px;} .my-observe-list.view .subject{border-bottom:1px solid var(--dgray1);border-top:2px solid var(--dgray1);padding:15px 0;margin:10px 0 30px;} /*마이페이지 list-nodata*/ .my-observe-list.view:has(.list-nodata){padding:0;} .my-observe-list .list-nodata{border:0;padding:35px;} .my-observe-list .list-nodata:before, .my-info-wrap .list-nodata:before{display:none;} .my-observe-list .list-nodata .ksied-profile-img, .my-info-wrap .list-nodata .ksied-profile-img{border:1px solid #dadada;} .my-observe-list .list-nodata .tit, .my-info-wrap .list-nodata .tit{margin:10px 0 15px;font-size:1.75rem;color:#121314;font-weight:600;} .my-observe-list .list-nodata .txt, .my-info-wrap .list-nodata .txt{color:#5C667B;font-weight:300;font-size:1.125rem;margin:0 0 30px;} .my-observe-list .list-nodata .btn-d, .my-info-wrap .list-nodata .btn-d{display:inline-block;} @media only screen and (max-width:1800px){ } @media only screen and (max-width:1600px){ } @media only screen and (max-width:1440px){ .my-observe-list .list-nodata .tit, .my-info-wrap .list-nodata .tit{font-size:1.5rem;margin:5px 0 10px;} .my-observe-list .list-nodata .txt, .my-info-wrap .list-nodata .txt{font-size:1rem;margin:0 0 20px;} } @media only screen and (max-width:1240px){ } @media only screen and (max-width:1023px){ .my-observe-list .list-nodata .tit, .my-info-wrap .list-nodata .tit{font-size:1.25rem;} .my-observe-list .list-nodata .txt, .my-info-wrap .list-nodata .txt{font-size:.925rem;margin:0 0 10px;} } @media only screen and (max-width:767px){ .my-observe-list .list-nodata .tit, .my-info-wrap .list-nodata .tit{font-size:1.125rem;margin:5px 0;} .my-observe-list .list-nodata .txt, .my-info-wrap .list-nodata .txt{font-size:.875rem;} } @media only screen and (max-width:576px){ } @media only screen and (max-width:415px){ } .observe-calendar .sc-schedule-bx {margin:30px 0 0;border:0;padding:0;} .observe-calendar .table-calendar{margin:40px 0;} .observe-calendar .list li{padding:5px;background:#1074F511;border:1px solid #87B9F9;border-radius:.3rem;margin:5px 0;transition:all .2s;} .observe-calendar .list li.active{background:var(--dark-color);border-color:var(--dark-color);} .observe-calendar .list li.active a{color:#fff;} .observe-calendar .list li.active a:before{background:#ff9;} .observe-calendar .list li:not(.active):hover{background:#1074F533;border-color:var(--main-color);} .observe-calendar .list a{font-size:.875rem;line-height:1.3;min-height:36px;color:#121314;} .observe-calendar .list a:before{content:"";width:5px;height:5px;display:inline-block;background:var(--main-color);border-radius:50%;margin:0 5px 0 0;vertical-align:middle;} .table-calendar thead th {width:calc(100%/7);padding:0.5rem 0;color:var(--black);border-top:1px solid #ddd;} .table-calendar tbody td {border:1px solid var(--basic-border);border-right:none;font-size:0.938rem;vertical-align:top;} .table-calendar tbody td:first-child {border-left:none;} .table-calendar tbody td:nth-child(7) {background:var(--bg-blue);} .table-calendar tbody td:nth-child(1) {background:var(--bg-red);} .table-calendar tbody td:nth-child(7) .day a{color:var(--blue);} .table-calendar tbody td:nth-child(1) .day a{color:var(--pink);} .table-calendar .day-cell {padding:0.5rem;min-height:90px;position:relative;} .table-calendar .day {display:inline-block;margin-bottom:0.5rem;} .table-calendar .day a {font-size:var(--font-base);color:#111;line-height:1.75rem;height:1.75rem;width:1.75rem;display:inline-block;text-align:center;border-radius:50%;margin-right:0.125rem} .table-calendar .day a:hover {background:var(--main-color);color:#fff !important;} .table-calendar .day span {font-size:var(--font-xsm);color:#999} .table-calendar .today {border:2px solid var(--main-color)} .table-calendar .day-off {background:#f7f7f7;} .table-calendar .day-holiday {color:var(--pink);background:var(--bg-red) !important;} .table-calendar .day-holiday .day a {color:var(--pink) !important;} .table-calendar .next-month, .table-calendar .prev-month{background:#fafafa;color:#888;font-weight:200;} .table-calendar .next-month .circle, .table-calendar .prev-month .circle{background:#999;} .table-calendar .sat .day-cell{color:var(--blue);} .table-calendar .sun .day-cell{color:var(--pink);} .profile-list.single{display:flex;flex-wrap:wrap;margin:-10px;} .profile-list.single > li{min-width:calc(100% / 3 - 20px);flex:1 1 0;margin:10px;min-height:250px;} .profile-list > li > a:not(.btn-d){display:block;padding:25px 30px;background:#F7F8F9;border-radius:.3rem;border:2px solid #F7F8F9;} .profile-list > li:not(.new) > a:not(.btn-d):hover{background:#EAF2FF;border-color:var(--main-color);} .profile-list > li:not(.new) > a:not(.btn-d):hover .btn-d{background:var(--main-color);border-color:var(--main-color);} .profile-list .ksied-child .name{margin:10px 0 0;} .profile-list .info{font-size:1rem;font-weight:300;margin:20px 0;} .profile-list .info em{color:#0081A1;font-weight:400;} .profile-list > li.new > a{height:100%;background:#fff;border:2px dashed #dadada;text-align:center;} .profile-list > li.new a{display:flex;flex-direction:column;justify-content:center;color:#555;font-size:1.25rem;font-weight:700;} .profile-list > li.new a:before{content:"\2b";display:block;width:60px;height:60px;line-height:60px;margin:0 auto 15px;background:#f5f5f5;border-radius:50%;text-align:center;font-size:2.3rem;font-weight:100;color:#919191;transition:all .2s;} .profile-list > li.new a:hover{border:2px solid var(--main-color);color:var(--main-color);} .profile-list > li.new a:hover:before{color:var(--main-color);} .profile-list > li.new{padding:0 !important;} /*관찰일지 작성*/ .observe-write .write {background:#F7F8F9;padding:30px;border-radius:.5rem;} .observe-write .write textarea {padding:10px;resize:vertical;min-height:300px;border-radius:.5rem;} .observe-write .write input::placeholder, .observe-write .write textarea::placeholder {color:#919191;} .observe-write .write input:focus, .observe-write .write textarea:focus {outline:1px dashed #000;box-shadow:none;} .observe-write .title {} .observe-write .title input {font-size:1.5rem;background:#fff;border:none;border:1px solid var(--basic-border);font-weight:600;color:#121314;padding:15px 10px;text-indent:0;letter-spacing:-1px;width:100%;border-radius:.5rem;} .observe-write .title input::placeholder {color:#121314;} .observe-write .edit-bx {position:relative;margin:20px 0;} .observe-write .img-bx {position:relative;margin:0 0 20px;} .observe-write .img-bx .btn-d.ico-delete{position:absolute;right:10px;top:10px;z-index:9;} .observe-write .img-bx .imgarea {height:200px;} .observe-write .img-bx .changeimg{filter:brightness(.6);position:absolute;left:0;top:0;width:100%;background:#fff;} .observe-write .img-bx input {width:500px;max-width:calc(100% - 40px);margin:0 auto;font-size:.925rem;position:relative;z-index:9;} .observe-write #noimg {height:100%;position:relative;overflow:hidden;z-index:2;background:#fff;border-radius:.3rem;text-align:center;color:#919191;} .observe-write #noimg label{width:100%;} .observe-write #noimg p {width:100%;padding:1.2rem 0;cursor:pointer;} .observe-write #noimg p:before {content:"\f03e";font-family:FontAwesome;display:block;font-size:3rem;padding:0;margin:0;} /*[e] 서브: 영유아 관찰일지*/ /*[s] 서브: 맞춤형 정보*/ .bookmark-list-bx{border-radius:.5rem;border:1px solid #dadada;} .bookmark-list-bx > li{padding:15px 15px 10px;border-bottom:1px dashed #eaeaea;align-items:center;transition:all .3s;} .bookmark-list-bx > li:last-child{border-bottom:0;} .bookmark-list-bx > li:hover{background:#F7F8F9;} .bookmark-list-bx .col-1{width:calc(100% - 80px);} .bookmark-list-bx .col-2{width:80px;text-align:right;} .bookmark-list-bx .subject{margin:0;font-size:1.125rem;} .bookmark-list-bx [class*="map-mark-"]:before{margin-left:0;} .bookmark-list-bx .ico-bookmark:before{margin-right:0;} .bookmark-list-bx .col-1 .detail-wrap{margin-left:30px;} .my-bookmark-list .tab{margin:0 0 15px;} .my-bookmark-list .tab-txt a{font-size:1.125rem;} .my-bookmark-list .board-more{margin:10px 0 0 ;padding:10px 0;} .my-bookmark-list .board-paging{margin:20px 0 0;} /*[e] 서브: 맞춤형 정보*/ /*[s] 나의 정보 관리*/ .my-child-list{text-align:center;display:flex;flex-wrap:wrap;font-size:.825rem;line-height:1.2;word-break:keep-all;} .my-child-list li{width:calc(12.5% - 10px);margin:5px;} .my-child-list .ksied-profile-img{width:50px;height:50px;margin-bottom:5px;} @media only screen and (max-width:1600px){ .my-child-list li{width:calc((100% / 6) - 10px);} } @media only screen and (max-width:1440px){ } @media only screen and (max-width:1240px){ .btn-conv-list{width:400px;} .btn-conv-list ul li{width:calc(33.33% - 10px);} .btn-conv-list > .tit{font-size:1rem;} .btn-conv-list .name{font-size:.875rem;} .btn-conv-list .ico-bookmark{right:20px;} .my-child-list li{width:calc(25% - 10px);} } @media only screen and (max-width:1023px){ .my-child-list li{width:calc((100% / 6) - 10px);} } @media only screen and (max-width:767px){ .btn-conv-list{width:auto;max-width:calc(100% - 20px);right:10px;left:10px;padding:10px 20px 15px 15px;} .btn-conv-list > .tit{text-align:left;} .btn-conv-list ul li{width:calc(20% - 10px);} .btn-conv-list .ico-bookmark{right:10px;} .btn-conv-list .close{width:25px;height:25px;line-height:25px;top:10px;right:10px;} .my-topwrap .child-list .btn-conv-list{top:60px;max-width:100%;} .profile-list > li.new a{padding:20px;} .profile-list > li.new a:before{margin:0;order:1;width:50px;height:50px;line-height:50px;} } @media only screen and (max-width:576px){ .btn-conv-list ul li{width:calc(25% - 10px);} .my-topwrap .child-list .btn-conv-list{top:50px;} .my-child-list li{width:calc(25% - 10px);} .profile-list > li.new a{padding:10px;} .profile-list > li.new a:before{width:45px;height:45px;line-height:45px;font-size:1.75rem;} } @media only screen and (max-width:415px){ .btn-conv-list ul li{width:calc(33.33% - 10px);} .my-child-list li{width:calc(33.33% - 10px);} } /*[e] 마이페이지*/