@charset "utf-8"; @import url("/css/board.css"); /* 테이블 가로스크롤 */ @media only screen and (max-width:768px) { .guide-scroll{ display:block; margin:-5px 0 5px; text-align:right} .guide-scroll img,.guide-scroll span{ display:inline-block; vertical-align:middle; font-size:14px; color:#202020} .guide-scroll img{ margin-right:5px; width:26px} .table-scroll{ overflow:auto; margin:15px 0} .table-scroll table{ width:1000px ! important} } @media all and (max-width:360px){ .guide-scroll img{ margin-right:3px; width:18px} .guide-scroll span{ font-size:13px} } /* 레이어팝업 */ .layer-popup { position:absolute; z-index:10050; height:0; color:#666; background-color:#fff} .layer-popup .popup-style{ position:relative; margin:0 auto; height:100%} .layer-popup .popup-style>div{ text-align:center; overflow:hidden; border:1px solid #1d99d6; background-color:#fff} .layer-popup .popup-style img{ display:block; width:100%; height:100%; object-fit:cover} .layer-popup .popup-style span, .layer-popup .popup-style .swiper-slide a{ display:block} .layer-popup .popup-style .swiper-slide{ display:flex; justify-content:center; align-items:flex-start} .layer-popup .check-group{ position:absolute; z-index:20} .layer-popup .check-group label, .layer-popup .check-group input[type=button], .layer-popup .check-group label{ display:inline-block; vertical-align:middle; padding:0 5px 0 0; color:#333; font-weight:400; cursor:pointer} .layer-popup .check-group input[type=button]{ border:0; border-radius:0; background:transparent url(/images/common/close-dark.png) 50% 50% no-repeat; cursor:pointer; text-indent:-9999px} /* Daum Map */ #map-zoom > h3 { margin:45px 0 15px 0; padding:0; font-size:16px; font-weight:500} #map-zoom strong { font-size:14px; font-weight:400} #map-zoom .point { margin-top:35px; line-height:24px} #map-zoom > span { display:block; margin-bottom:4px; font-size:12px; color:#FE4940; letter-spacing:0.02em; line-height:1.5; border-bottom:1px dotted #afb2b9; padding-bottom:12px} #map-zoom code { background:#f1f1f1; border:1px solid #e9e9e9; padding:1px 4px; border-radius:4px} #d-roadview { display:none; margin-top:5px} #map { height:250px} .map-wrap { position:relative; overflow:hidden; border:1px solid #e3e3e3} .map-wrap .custom-typecontrol{ z-index:50; position:absolute; top:10px; left:10px; float:left; height:40px; overflow:hidden; font-size:12px} .map-wrap .custom-typecontrol a{ float:left; display:inline-block; text-decoration:none; border:1px solid #aab3c3; border-right:0; padding:0.4em 0.8em; border-radius:6px 0 0 6px; text-shadow:0 1px #aab3c3; background:#f6f5f5; color:#535965} .map-wrap .custom-typecontrol a#btnSkyview{ border-right:1px solid #aab3c3; border-left:0; border-radius:0 6px 6px 0} .map-wrap .custom-typecontrol a.selected-btn{ background:#6c737e; color:#fff} .map-wrap .custom-zoomcontrol{ z-index:50; position:absolute; top:50px; left:-5px; float:left; margin-left:20px} .map-wrap .custom-zoomcontrol a{ display:inline-block; padding:4px; -webkit-box-shadow:0 0 3px #717885; -moz-box-shadow:0 0 3px #717885; box-shadow:0 0 3px #717885; border-radius:50%; background:#fff; text-align:center; cursor:pointer; -webkit-transition:all 0.4s; transition:all 0.4s} .map-wrap .custom-zoomcontrol a:focus, .map-wrap .custom-zoomcontrol a:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); transform:scale(1.1)} .map-wrap .custom-zoomcontrol a:active{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); transform:scale(0.9)} .map-wrap .custom-zoomcontrol a img{ float:left; width:15px; height:15px; border:none} .map-wrap .custom-zoomcontrol a:first-child{ margin-bottom:2px; margin-left:-2px} .map-infobox { padding:6px 0 10px; text-align:center; color:#333} .map-infobox a,.map-infobox img{ display:inline-block; vertical-align:middle; color:#333; font-weight:400} .map-infobox span { display:block} .map-infobox span a { color:#fff} /* Membership Form */ .membership h1.section-title{ color:#000; font-weight:400; text-align:center} .membership h3.form-title { position:relative; color:#333; font-weight:500} .membership h3.form-title span, .membership h3.form-title span label{ display:inline-block; vertical-align:middle} .membership h3.form-title span label{ cursor:pointer; font-weight:400} .membership p.section-subtitle{ text-align:center} .login, .signup-guidance { margin:0 auto} .login label { display:inline-block; position:absolute; top:-9999px; vertical-align:middle; text-indent:-9999px} .login span { display:block} .login span:first-child{ margin-top:0} .login span input[type=text], .login span input[type=tel], .login span input[type=email], .login span input[type=submit], .login span input[type=password]{ width:100%; text-align:center} .login span input[type=submit]{ background:#1d99d6; border:0; color:#fff; font-weight:500; cursor:pointer} .signup-guidance .join, .signup-guidance .find, .signup-guidance .join span, .signup-guidance .find span, .signup-guidance .join span a, .signup-guidance .find span a{ display:inline-block; vertical-align:top; text-align:center; background:#f8f6f9} .signup-guidance .join span a, .signup-guidance .find span a{ margin:0 1px; width:100%; height:100%; color:#fff; font-weight:500; background:#808080} .signup-guidance .join span, .signup-guidance .find span { background:none} .find-result { text-align:center} .find-result strong { display:block; font-weight:500} .find-result .btn-login a{ display:inline-block; color:#fff; font-weight:700; background:#1d99d6} ul.signup-step { text-align:right} ul.signup-step li, ul.signup-step li img{ display:inline-block; vertical-align:middle} ul.signup-step li span{ font-weight:700} ul.signup-step li.active span{ color:#1d99d6} ul.signup-step li.step1, ul.signup-step li.step2{ background:url(/images/membership/signup-step.png) 0 0 no-repeat} ul.signup-form { padding:1px 0; border-bottom:1px solid #808080} ul.signup-form li { position:relative; margin:-1px 0; border:1px solid #e3e3e3; border-left:0; border-right:0} ul.signup-form li:after{ content:""; display:block; clear:both} ul.signup-form li:first-child{ border-top:2px solid #808080} ul.signup-form li label{ background:#f8f6f9; cursor:pointer} ul.signup-form li span label, ul.signup-form li span span{ float:none; vertical-align:middle; padding:0; width:auto; height:auto; line-height:normal; border:0; background:none} ul.signup-form li span span{ color:#aaa} ul.signup-form li.email-form span span{ border:1px solid #e3e3e3} ul.signup-form li input[type=button]{ color:#fff; font-weight:700; border:0; background:#808080; cursor:pointer; vertical-align:middle} ul.signup-form li #idmasage, ul.signup-form li #passmasage, ul.signup-form li #email_massage{ color:#d00000} ul.signup-form li.email-form #email_massage{ border:0} ul.signup-form li img{ display:inline-block; vertical-align:middle; margin:0 2px; width:13px} .terms-agree ul { padding:1px 0} .terms-agree ul li { position:relative; margin:-1px 0; border:1px solid #e3e3e3; border-left:0; border-right:0} .terms-agree ul li:after{ content:""; display:block; clear:both} .terms-agree ul li strong{ background:#f8f6f9; cursor:pointer} .terms-agree ul li span span{ display:inline-block; float:none; vertical-align:middle; padding:0; width:auto; border:0; background:none} .captcha img,.captcha a,.captcha span,.captcha input{ display:inline-block; vertical-align:top} .captcha a { border:1px solid #e3e3e3; background:url(/images/common/refresh.png) 50% 50% no-repeat; background-size:contain; text-indent:-9999px} .sign-up-complete { text-align:center} .sign-up-complete span{ display:block} .sign-up-complete .complete-title{ font-weight:700} .sign-up-complete .btn-guidance span{ display:inline-block; vertical-align:middle; margin:0; color:#fff; font-weight:700; background:#808080} .sign-up-complete .btn-guidance a:first-child span{ background:#1d99d6} .privacy-agree label{ cursor:pointer} .privacy-agree .privacy-item{ border:1px solid #e3e3e3} .privacy-agree .privacy-item strong, .privacy-agree .privacy-item span{ display:block} .privacy-agree .privacy-item strong{ font-weight:400} .privacy-agree .privacy-item .privacy-close{ display:none} section.terms h1.title-clause,section.terms h2.title-clause{ color:#202020; font-weight:400} section.terms .clause{ text-align:justify} section.sub-content.terms{ min-height:560px} /* Mypage */ .mypage .my-info { position:relative; margin:0 auto; border:1px solid #e3e3e3; background:#f4f4f4} .mypage .user-activity span, .mypage .user-info strong, .mypage .user-info span{ display:inline-block; vertical-align:middle} .mypage .user-info strong{ font-weight:500} .mypage .user-activity span{ color:#fff; text-align:center} .mypage .user-activity span.btn-out{ background:#808080} .mypage .user-activity span.btn-edit{ background:#1d99d6} .mypage .user-activity span.btn-out a, .mypage .user-activity span.btn-edit a{ color:#fff} .mypage .user-activity span.volunteer-application, .mypage .user-activity span.online-counsel, .mypage .user-activity span.booking-visit{ background:#fff; border:1px solid #aaa} .mypage .user-activity span.volunteer-application{ border-color:#1d99d6} .mypage .user-activity span.volunteer-application a, .mypage .user-activity span.online-counsel a, .mypage .user-activity span.booking-visit a{ color:#666} .mypage .user-activity span a{ display:block; width:100%; height:100%} .mypage .my-link { margin:0 auto} ul.inline-type li { display:inline-block; position:relative; float:left; border:1px solid #e3e3e3; vertical-align:top} ul.inline-type li strong, ul.inline-type li span{ display:block} ul.inline-type li strong{ color:#333; font-weight:500} /* 서브 콘텐츠 */ .content-hgroup h2.head{ color:#333; font-weight:700} .content-hgroup h2.head img, .content-hgroup h2.head strong{ display:inline-block; vertical-align:middle} .content-hgroup p{ display:block; word-break:keep-all} ul.dotlist li { background:url(/images/kcva/dot-grey.png) no-repeat} /* 연혁 */ #past-history,#past-history1,#past-history2,#past-history3,#past-history4{ display:none} .history-map h3,.history-map>div{ position:relative} .history-map, .history-map.back-grey{ background:url(/images/kcva/history-line.png) repeat-y} .history-map .year-historyL h3.history-pointer, .history-map .year-historyR h3.history-pointer{ color:#1d99d6; font-weight:500} .history-map ul.left-alignment li:after, .history-map ul.right-alignment li:after{ content:""; display:block; clear:both} .history-map ul.left-alignment li:first-child, .history-map ul.right-alignment li:first-child{ margin-top:0} .history-map ul.left-alignment li strong, .history-map ul.right-alignment li strong{ color:#333} .history-map ul.left-alignment li span, .history-map ul.right-alignment li span{ word-break:keep-all} .history-map ul.inline-type li{ float:none; font-size:0; line-height:0; border:0; margin:0 1px} .business-introduction .block-wrap li{ background-position:50% 50%; background-repeat:no-repeat; background-size:cover} .business-introduction .block-wrap li span, .business-introduction .block-wrap li ul{ display:inline-block; vertical-align:middle} .business-introduction .block-wrap li li{ float:none; background-image:none !important; background-color:transparent !important; padding:0; width:auto !important; height:auto !important} .business-introduction .block-wrap li span em, .business-introduction .block-wrap li span strong, .business-introduction .block-wrap li li span, .business-introduction .block-wrap li li strong{ display:block; width:auto} .business-introduction .block-wrap li strong{ color:#222; font-weight:700} .business-introduction .block-wrap li li strong{ color:#1d99d6; font-weight:400} .business-introduction .block-wrap li li span{ background:url(/images/kcva/dot-blue.png) no-repeat} .business-introduction .block-wrap li li:first-child strong, .business-introduction .block-wrap li li span:first-child{ margin-top:0} .business-introduction .block-wrap ul.back-grey1 li:first-child{ background:#f8f6f9} .business-introduction .block-wrap ul.back-grey2 li:first-child{ background:#f1f5f7} .business-introduction .block-wrap ul.back-grey1 li:nth-child(2){ background-image:url(/images/business/business-1.jpg)} .business-introduction .block-wrap ul.back-grey2 li:nth-child(2){ background-image:url(/images/business/business-3.jpg)} .business-introduction .block-wrap ul.back-white li:nth-child(2){ background-image:url(/images/business/business-2.jpg)} .business-introduction .block-wrap.block2 ul.back-grey1 li:nth-child(2){ background-image:url(/images/business/business-4.jpg)} .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(2){ background-image:url(/images/business/business-5.jpg)} .support-procedure div{ position:relative} .support-procedure div em, .support-procedure div strong{ display:inline-block; vertical-align:middle; font-weight:700} .support-procedure div em{ font-size:0; line-height:0} .support-procedure div span{ display:block} .support-procedure div span.procedure1, .support-procedure div span.procedure5{ background:#1d99d6} .support-procedure div span.procedure2{ background:#f7b0c0} .support-procedure div span.procedure3{ background:#fff} .support-procedure div span.procedure4{ background:#6db8d8} .support-procedure div span.procedure1, .support-procedure div span.procedure2, .support-procedure div span.procedure4, .support-procedure div span.procedure5{ color:#fff} .support-procedure div span.procedure3{ color:#1d99d6} .support-procedure p{ text-align:right} /* 일정표 */ .kcva-schedule .month-year{ text-align:center} .kcva-schedule .month-year strong{ display:inline-block; font-family:'Nanum Gothic'; color:#454545; font-weight:400} .kcva-schedule .month-year strong span{ display:inline-block} .kcva-schedule .month-year img, .kcva-schedule .month-year strong{ vertical-align:middle} ul.remarks li { float:left} ul.remarks li span { color:#454545} ul.remarks li img { vertical-align:middle} ul.cal-head { border-top:1px solid #e3e3e3; border-radius:7px 7px 0 0} ul.cal-head li { color:#454545; text-align:center; font-weight:400} ul.cal-head li img, ul.cal-body li img, ul.cal-body li em, ul.cal-body li span strong{ display:inline-block; vertical-align:middle; font-size:0; font-weight:400} ul.cal-head li, ul.cal-body li { position:relative; float:left; margin:0; width:14.5%; border:1px solid #e3e3e3; border-left:0; border-top:0; background:#fff} ul.cal-head li.sun { background:#f7e4e4} ul.cal-head li.sat { background:#e1eef9} ul.cal-head .first-col1, ul.cal-body .first-col1{ width:13%; border-left:1px solid #e3e3e3} ul.cal-head .first-col1{ border-radius:7px 0 0 0} ul.cal-head .last-col7 { border-radius:0 7px 0 0} ul.cal-body .first-col1.col1, ul.cal-body li:nth-child(36){ border-radius:0 0 0 7px} ul.cal-body .last-col7, ul.cal-body li:last-child{ border-radius:0 0 7px 0} ul.cal-body li, ul.cal-body li span strong{ color:#454545; font-weight:400} ul.cal-body li>strong{ display:block; font-family:'Nanum Gothic'; font-weight:700} ul.cal-body li.sun { color:#ff4f42} ul.cal-body li.sat { color:#0091db} ul.cal-body li.select-today{ border:2px solid #1d99d6} ul.cal-body li.empty{ background:#f8f6f9} /* 전국센터찾기 */ .center-find { border:1px solid #e3e3e3; border-top-color:#aaa} .center-find .image-map, .center-find .select-area{ vertical-align:top} .center-find .find-title{ border-bottom:1px solid #e3e3e3; text-align:left; background:#faf8fb} .center-find .image-map{ text-align:center} .center-find .image-map .map-holder, .center-find .find-title span, .center-find .find-title img, .center-find .find-title strong{ display:inline-block; vertical-align:middle} .center-find .find-title strong{ color:#000; font-weight:400} .center-find .find-title img{ width:13px} .center-find .find-descrip span, .center-find .area-search span{ display:block} .center-find .area-search span:first-child{ margin-top:0} .center-find .find-descrip span{ color:#888} .center-find .area-search p{ color:#888; border-top:1px solid #e3e3e3} .center-find .area-search.searchForm label{ clip-path:circle(100%); float:left; display:inline-block; position:static; top:auto; vertical-align:middle; margin:0; width:auto; height:auto; color:#1d99d6; font-weight:400} .center-find .find-descrip{ text-align:center} .center-list p strong{ color:#1d99d6; font-weight:500} ul.center-infomation{ border-bottom:1px solid #808080} ul.center-infomation li{ border-top:1px solid #e3e3e3} ul.center-infomation li:first-child{ border-top:2px solid #808080} ul.center-infomation li span, ul.center-infomation li img, ul.center-infomation li strong{ display:inline-block; vertical-align:middle} ul.center-infomation li strong{ color:#666; font-weight:400} /* 요건확인및지역 */ .requisite-area ul { border-bottom:1px solid #e3e3e3} .requisite-area li span, .requisite-area li strong{ display:block} .requisite-area li label, .requisite-area li span span{ display:inline-block; vertical-align:middle} .requisite-area li label{ margin-left:3px; cursor:pointer} .requisite-area li strong{ color:#222; font-weight:400; background:#f8f6f9; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3} .requisite-area .relevant-center>div{ background:#f8f6f9} .requisite-area .relevant-center span, .requisite-area .relevant-center strong{ display:block; font-weight:400} .requisite-area .relevant-center a{ display:inline-block; color:#fff; font-weight:400; background:#1d99d6} /* 법령검색 */ section.searching-statutes .searching-subtitle{ color:#303030; text-align:center} section.searching-statutes .searching-subtitle strong{ color:#1d99d6; font-weight:400} section.searching-statutes .searchForm.searching{ text-align:center} ul.searching-list { margin:1px 0} ul.searching-list li{ position:relative; margin:-1px 0; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3} ul.searching-list li span, section.searching-statutes .searching-result span{ display:block} ul.searching-list li strong{ color:#000; font-weight:400} ul.searching-list li strong, ul.searching-list li span span, section.searching-statutes .searching-result span.legal-item span{ display:inline-block; vertical-align:middle} ul.searching-list li span.searching-item{ color:#999} section.searching-statutes .searching-result .legal-item{ text-align:center} section.searching-statutes .searching-result span.legal-item span{ color:#666} section.searching-statutes .searching-result .legal-contents{ text-align:justify; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3} /* 유관기관 */ .related-help ul li,.related-organization ul li{ float:left} .related-help ul li span, .related-help ul li span strong, .related-organization ul li span, .related-organization ul li strong{ display:block; text-align:center} .related-help ul li span, .related-organization ul li span{ font-size:0; line-height:0; border:1px solid #e3e3e3} .related-help ul li span strong, .related-organization ul li strong{ color:#202020; font-weight:400} .related-help ul li span img{ display:inline-block; max-width:100%} .related-organization ul li span img{ display:block; width:100%; height:100%; object-fit:cover} .related-help ul li span span img{ display:inline-block; vertical-align:middle} .related-help ul li span span, .related-help ul li span strong{ text-align:left} .related-help ul li span span{ border:0} .related-help ul li span.details{ border-top:0} .related-help ul li span.details span{ padding:0; background-repeat:no-repeat} .related-help ul li span strong, .related-help ul li span.details span{ line-height:normal} .related-help ul li a{ color:#666} .related-help ul li span.details span.memo-descrip{ background-image:url(/images/btn/descrip.png)} .related-help ul li span.details span.tel-help{ background-image:url(/images/btn/tel-help.png)} .related-help ul li span.details span.home-link{ background-image:url(/images/btn/home-link.png)} /* 2021.02.16 법령검색 추가 */ section.searching-statutes.link-type ul.searching-list li strong{ font-family:'Noto Sans CJK KR'; font-weight:400} section.searching-statutes.link-type ul.searching-list li span.searching-item span:last-child{ margin-right:0} section.searching-statutes.link-type ul.searching-list li span.searching-item .button a{ padding:0; text-align:center} /* 공모전(희망수기) */ .competition-info { padding:20px 0; text-align:center} .competition-info a { display:inline-block; padding:7px 15px; color:#fff; font-weight:400; background:#565457} .competition-info strong{ font-weight:700; color:#222; text-decoration:underline} .competition-info span{ display:block; margin-bottom:10px} .competition .user-contact span, .competition .user-contact input[type=text]{ float:left} .competition .user-contact input[type=text]{ width:30%} .competition .user-contact span{ width:5%; text-align:center} .sns-scrap { margin:0 auto; width:100%; text-align:center; background:#e5df95} .sns-scrap strong { display:block; color:#222; font-weight:700} .sns-scrap>div { margin:0 auto; width:100%} ul.scrap { margin:0 auto; width:100%; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3} ul.scrap li span { float:left} ul.scrap li label { display:none} ul.scrap li input[type=password], ul.scrap li input[type=submit], ul.scrap li input[type=text], ul.scrap li input[type=tel], ul.scrap li input[type=url]{ width:100%; line-height:normal} .event-wrap { position:relative; text-align:center; background-position:0 0; background-repeat:no-repeat} .event-wrap span { display:block} .event-wrap strong { display:inline-block; vertical-align:middle; font-weight:700} .event-wrap .gift-image{ position:absolute} .event-wrap.event-1 strong{ color:#f44b00; border-bottom:1px solid #f44b00} .event-wrap.event-2 strong{ color:#f44b00; border-bottom:1px solid #f44b00} ul.event { margin:0 auto} ul.event li { text-align:left} ul.event li:after { content:""; display:block; clear:both} .event-wrap span, .event-wrap strong, ul.event li span, ul.event li strong { font-family:'Noto Sans CJK KR'; color:#222} .event-wrap.event-1 ul.event li strong, .event-wrap.event-2 ul.event li strong{ color:#222} ul.event li span { float:left} ul.event li strong { font-weight:700; border:0 !important} ul.word-list li { position:relative; margin:-1px 0; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3} ul.word-list li:after{ content:""; display:block; clear:both} ul.word-list li span{ float:left} ul.word-list li button{ display:inline-block; vertical-align:middle; color:#fff; border:1px solid; cursor:pointer} ul.word-list li button.delete{ background:#172c67; border-color:#172c67} ul.word-list li button.modify{ background:#9a989b; border-color:#9a989b} .hope-intro h2.head span,.hope-intro h2.head strong{ display:block} .hope-intro h2.head mark{ font-style:normal; font-weight:700; background:transparent} .hope-intro h2.head strong{ font-weight:400} .hope-intro h2.head span{ color:#1d99d6; font-weight:700} .hope-intro h2.head mark,.hope-intro h2.head strong{ color:#303030} .hope-intro .default table th.align-center, .hope-intro .default table td.align-center{ text-align:center; padding-left:0; padding-right:0} .hope-intro .default thead th{ border-top-color:#1d99d6; border-bottom:1px solid #1d99d6; background:#f8f9f9} .hope-intro .default thead th:first-child{ border-left-color:#1d99d6} .hope-intro .default thead th:last-child{ border-right:1px solid #1d99d6} .hope-intro .default tbody th{ background:#f8f9f9} .hope-intro .default.cap table{ border-top:1px solid #1d99d6} .hope-intro .default p{ text-align:right} .hope-intro .reception-period{ background:#1d99d6; border-radius:50px} .hope-intro .reception-period span, .hope-intro .reception-period strong{ display:inline-block; vertical-align:middle; color:#fff} .hope-intro .reception-period strong{ font-weight:700} ul.dot-list li { background:url(/images/kcva/dot-grey.png) no-repeat} ul.dot-list li mark { font-style:normal; background:transparent} ul.dot-list li span, ul.dot-list li strong{ display:inline-block; vertical-align:middle} ul.dot-list li strong,ul.dot-list li mark{ color:#1d99d6; font-weight:400} .contents-competition .application-method .post, .contents-competition .application-method .online{ color:#fff} .contents-competition .application-method .post, .contents-competition .application-method .online, .contents-competition .application-method ul.dot-list{ display:inline-block; vertical-align:middle} .contents-competition .application-method .post{ background:url(/images/kcva/back-post.png) 0 0 no-repeat} .contents-competition .application-method .online{ background:url(/images/kcva/back-online.png) 0 0 no-repeat} .poster-down { text-align:center} .poster-down button { color:#fff; font-weight:700; border:0; border-radius:5px; background:#e59cba; cursor:pointer} ul.overview { margin:0 auto} ul.overview li em, ul.overview li span { float:left} ul.overview li em { background:#6db8d8; text-align:center; font-size:0} ul.overview li span { border:1px solid #e3e3e3} ul.overview li span span, ul.overview li span strong{ display:block; float:none} ul.overview li span span, ul.overview li span span em{ width:auto; height:auto; padding:0; border:0} ul.overview li span strong{ color:#6db8d8; font-weight:700} ul.overview li span span em{ display:inline-block; vertical-align:middle; float:none; background:transparent; line-height:0} ul.overview li.fl-l { float:left} ul.overview li.fl-r { float:right} .event-end { color:#303030; font-weight:700; text-align:center} .default .button.blue.confirm{ margin:0; height:40px} .default .button.blue.confirm input[type=submit], .default .button.blue.confirm input[type=button]{ padding:0 20px; height:40px; line-height:40px; font-size:14px} .contents-competition{ position:relative} .contents-competition h3{ color:#333; font-weight:700} .contents-competition h4{ color:#333; font-weight:500} .contents-competition .competition-poster{ text-align:center} .contents-competition .competition-poster .poster-image{ font-size:0; line-height:0; border:1px solid #d2d2d4} .contents-competition .competition-poster .poster-image img{ display:block; max-width:100%} .contents-competition .competition-poster a{ display:inline-block; color:#fff; font-weight:400; background:#1d99d6; border-radius:5px} .contents-competition .competition-descrip{} .contents-competition .competition-descrip mark{ color:#333; font-style:normal; font-weight:400; background:transparent} .contents-competition .doc-submitted{ position:relative} .contents-competition .doc-submitted span{ display:block} .contents-competition .doc-submitted a{ display:inline-block; color:#fff; font-weight:400; background:#1d99d6; border-radius:5px} .contents-competition.nickname .doc-submitted span,.contents-competition.nickname .doc-submitted a{ display:inline-block; vertical-align:middle} .contents-competition .host em,.contents-competition .sponsoring-organ em{ display:inline-block; vertical-align:middle; font-size:0; line-height:0} .contents-competition .host em img,.contents-competition .sponsoring-organ em img{ display:block; height:30px} /* 지원사업 */ .business-support>div{ position:relative} .business-support .support-title{ position:absolute; bottom:0} .business-support .support-title h3{ color:#333; font-weight:700} .business-support .support-title span{ display:block; color:#777} .business-support .icon-symbol{ overflow:hidden; display:flex; justify-content:flex-start; align-items:center} .business-support .icon-symbol span{ display:flex; justify-content:center; align-items:center; background:#f1f1f1; border-radius:100%} .business-support .icon-symbol span:first-child{ margin-left:0} .business-support .icon-symbol span img{ display:block; max-width:100%} .business-support .support-title ul li{ color:#1d99d6; font-weight:400; background:url(/images/contents/dot-blue.png) no-repeat} .business-support .support-title ul li:first-child{ margin-top:0} .business-support .swiper-slide img{ display:block; width:100%; height:100%; object-fit:cover} .business-support .fullwidth{ width:100%; font-size:0; line-height:0; text-align:center} .business-support .fullwidth img{ display:inline-block; max-width:100%} /* 심리테스트 */ .checklist { position:relative} .checklist>img { position:absolute} .checklist h3 { color:#333; font-weight:700} .checklist .button { text-align:left} .checklist .button.blue button{ background-image:url(/images/contents/back-result.png); background-repeat:no-repeat} .checklist .default th strong{ display:block; color:#333; font-weight:400; text-align:left} .checklist .default td{ text-align:center} .checklist .default td:first-child{ text-align:left} .checklist .default label{ position:absolute; margin:-1px; overflow:hidden; clip-path:polygon(0 0, 0 0, 0 0); width:1px; height:1px} .checklist .default input[type=radio]{ margin:0} .checklist .frm-radio{ display:inline-block; vertical-align:top; width:30px} .alram-box { overflow:hidden; display:flex; justify-content:flex-start; align-items:center; background:#f1f1f1; text-align:left} .alram-box img,.alram-box span{ display:inline-block; vertical-align:middle} .self-check img,.self-check strong{ display:inline-block; vertical-align:middle; font-weight:500} .self-check mark { color:#1d99d6; font-weight:500; background:transparent} .self-check p { font-weight:400} /* 후원안내 */ .support-guide .goal{ overflow:hidden; display:flex; justify-content:flex-start; align-items:center; background:url(/images/contents/back-support.jpg) 0 0 no-repeat} .support-guide .goal h3{ color:#fff; font-weight:700} .support-guide .goal span{ display:block; color:#fff} .support .dotbox { overflow:hidden; float:left; text-align:center; border:2px dotted #b1b2b2; border-radius:10px} .support .dotbox h4 img,.support .dotbox h4 strong{ display:inline-block; vertical-align:middle} .support .dotbox h4 strong{ color:#333; font-weight:700} .support .dotbox a { display:inline-block; color:#1d99d6; font-weight:400} .support .dotbox span,.support .dotbox strong{ display:block; font-weight:400} .support .dotbox strong{ color:#1d99d6} .support .dotbox .alram-box{ border-radius:0} .support-guide .summary.support strong{ color:#333; font-weight:400} /* 후원자소개 */ .sponsor { background:url(/images/contents/back-sponsor.png) 100% 0 no-repeat} .sponsor h3 { color:#333; font-weight:700} .sponsor .support .dotbox h4 strong{ display:block; font-weight:400} .sponsor .support .dotbox span{ font-weight:300} /* 홍보대사 */ .ambassadors { position:relative; background:url(/images/contents/back-ambassadors.png) 100% 0 no-repeat} .ambassadors .ambassador{ position:relative; background:#f1f1f1; border:1px solid #e3e3e3} /*.ambassadors .ambassador span{ display:block; font-size:0; line-height:0} .ambassadors .ambassador span img{ display:inline-block; max-width:100%} .ambassadors .ambassador div{ position:absolute}*/ .ambassadors .ambassador div h3{ background:url(/images/contents/article-line.png) 25% 0 no-repeat} .ambassadors .ambassador div h3 span,.ambassadors .ambassador div h3 strong{ display:inline-block; vertical-align:middle} .ambassadors .ambassador div h3 span{ background:#1d99d6} .ambassadors .ambassador div h3 strong{ color:#1d99d6; font-weight:400} .ambassadors .support .dotbox{ float:none; text-align:left; background:#fff} .ambassadors .support .dotbox h4 strong{ font-weight:400} .ambassadors .support .dotbox li{ background:url(/images/contents/dot-blue.png) no-repeat} .ambassadors .support .dotbox li:nth-child(odd){ float:left} .ambassadors .support .dotbox li:nth-child(even){ float:right} .ambassadors .ambassador-list{ display:flex; justify-content:space-between; align-items:center} .ambassadors .ambassador-list div{ position:relative} .ambassadors .ambassador-list div span,.ambassadors .ambassador-list div strong,.ambassadors .ambassador-list div button{ display:block} .ambassadors .ambassador-list div img{ display:block; max-width:100%} .ambassadors .ambassador-list div strong{ position:relative; color:#1d99d6; font-weight:400; text-align:center} .ambassadors .ambassador-list div button{ position:absolute; margin:0; padding:0; border:0; border-radius:100%; background:#1d99d6 url(/images/main/more.png) 50% 100% no-repeat; cursor:pointer; text-indent:-9999px} .ambassadors .ambassador-list div p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:100%} /* 지원절차 */ .application-process>div{ overflow:hidden; position:relative; display:flex; justify-content:start; align-items:center; width:100%; border:2px dotted #b8b9b9; border-radius:30px; background:0 0 no-repeat} .application-process>div.process1{ background-image:url(/images/contents/back-process1.jpg)} .application-process>div.process2,.application-process>div.process4{ background-color:#f9f9f5} .application-process>div.process3,.application-process>div.process5{ background-color:#f5f5f5} .application-process img{ display:block; max-width:100%} .process-info .process-title h3,.process-info .process-title strong{ display:inline-block; vertical-align:baseline} .process-info .process-title h3{ color:#333; font-weight:700} .process-info .process-title strong,.process-info .process-title mark{ color:#1d99d6; font-weight:400} .process-info .process-title mark{ background:transparent; font-weight:500} .process1-1 { position:absolute} .process-info ul li { float:left} .process-info ul li strong,.process-info ul li span{ display:block} .process-info ul li strong{ color:#005b9a; font-weight:400} .process-info ul li span span{ background:url(/images/contents/dot-blue.png) no-repeat} .process-info a,.process-info button{ display:inline-block; background:#1d99d6 url(/images/contents/download.png) no-repeat; color:#fff; font-weight:400; border:0; cursor:pointer} .process-info .form-center img,.process-info .form-center a,.process-info .form-center span,.process-info .form-center button{ display:inline-block; vertical-align:middle} .process-info .form-center .form{ float:left} .process-info .form-center .find{ float:right} .process-info .form-center span span{ color:#005b9a; font-weight:400} /* 지원현황 */ .status-support .chart-hide{ display:block; position:absolute; z-index:1000; left:0; bottom:0; width:60px; height:25px; background:#fff}/* 그래프 로고 숨김 */ .status-support .bar-graph,.status-support .vertical-graph{ position:relative} .status-support .detail-support{ position:relative} .status-support .detail-support>img{ position:absolute} .detail-support .support-box{ overflow:hidden; display:flex; justify-content:flex-start; align-items:center; border-radius:10px} .detail-support .support-box.number{ float:left; background-color:#1d99d6} .detail-support .support-box.amount{ float:right; background-color:#0d5c9c} .detail-support .support-box em{ overflow:hidden; display:flex; justify-content:center; align-items:center; border:2px solid #fff; border-radius:100%} .detail-support .support-box mark{ font-weight:400; background:transparent} .detail-support .support-box span,.detail-support .support-box strong{ display:inline-block; vertical-align:baseline} .detail-support .support-box span{ color:#fff} .detail-support .support-box mark,.detail-support .support-box strong{ color:#e8fec6} /* 인사말 */ .greeting,.summary,.greeting .say-hello{ position:relative} .summary strong,.greeting .say-caption strong{ display:block; color:#333; font-weight:400} .summary strong { color:#1d99d6} .greeting .content-hgroup p{ color:#333; font-weight:400} .summary p,.say-caption p{ word-break:keep-all} .greeting .say-hello .ceo-caption{ position:absolute} .greeting .say-hello .ceo-caption span, .greeting .say-hello .ceo-caption span span, .greeting .say-hello .ceo-caption strong{ display:block; text-align:right} .greeting .say-hello .ceo-caption span strong, .greeting .say-hello .ceo-caption span strong mark{ display:inline-block; vertical-align:baseline; color:#333; font-weight:400} .greeting .say-hello .ceo-caption span strong mark{ background:transparent} .greeting .say-hello .ceo-caption .ceo-image{ font-size:0; line-height:0} .greeting .say-hello .ceo-caption .ceo-image img{ max-width:100%} .greeting ul li { float:left; border-left:1px solid #e3e3e3} .greeting ul li:after{ content:""; display:block; clear:both} .greeting ul li:first-child{ margin-left:0; border-left:0} .greeting ul li>div { overflow:hidden; display:flex; justify-content:center; align-items:center} .greeting ul li>div img,.greeting ul li>div strong{ display:inline-block; vertical-align:middle} .greeting ul li>div strong{ color:#333; font-weight:700} .greeting ul li span,.greeting ul li mark{ display:block; text-align:center; font-weight:400} .greeting ul li mark{ color:#1d99d6; background:transparent} /* 설립목적 */ .introduce { position:relative} .introduce .introduceL{ float:left} .introduce .introduceL img,.introduce .introduceR img{ display:block} .introduce .introduceL .button-find{ display:inline-block; color:#fff; font-weight:400; background:#1d99d6} .introduce .introduceL .content-hgroup p{ font-weight:400} .introduce .introduceL .summary strong{ color:#333} .introduce .introduceR{ float:right} .introduce .introduceR img{ max-width:100%} ul.help-item { text-align:center} ul.help-item li { display:inline-block; vertical-align:top; border:2px dotted #a7a8a8; text-align:center; border-radius:100%} ul.help-item li span{ overflow:hidden; display:flex; justify-content:center; align-items:center; width:100%; height:100%; background:#f1f1f1; border-radius:100%} ul.help-item li strong{ display:inline-block; font-weight:400} /* 심볼안내 */ .symbol { position:relative} .symbol .summary strong{ text-align:center; color:#333} .symbol img,.slogan img{ max-width:100%} .symbol .conceptL { float:left} .symbol .conceptR { float:right} .symbol .symbol-box { overflow:hidden; display:flex; justify-content:center; align-items:center; border:1px solid #e3e3e3; border-radius:10px} .symbol .symbol-concept ul li{ float:left} .symbol .symbol-concept ul li:first-child{ margin:0} .symbol .color-system span{ overflow:hidden; display:flex; justify-content:center; align-items:center; color:#fff} .symbol .color-system span:first-child{ margin-top:0; background-color:#00adeb} .symbol .color-system span:last-child{ background-color:#636466} .slogan h3 { color:#1d99d6; font-weight:700} .symbol .symbol-concept.download{ text-align:center} .symbol .symbol-concept.download a{ display:inline-block; vertical-align:middle; color:#505050; font-weight:400; border:2px solid #1d99d6} /* 조직도 */ .organization { text-align:center} .organization p { position:absolute; margin:-1px; overflow:hidden; clip-path:polygon(0 0, 0 0, 0 0); width:1px; height:1px} .organization img { display:inline-block; max-width:100%} /* 오시는길 */ ul.info-address li:first-child{ margin:0} ul.info-address li em,ul.info-address li img,ul.info-address li span,ul.info-address li strong{ display:inline-block; vertical-align:middle; font-style:normal} ul.info-address li strong,ul.info-address li span{ text-transform:uppercase} ul.info-address li strong{ font-weight:400} .kcva-info { background:#f8f9f9; border-radius:10px} .kcva-info span { display:block} .kcva-info>div strong{ color:#333; font-weight:400; background:url(/images/kcva/dot-grey.png) no-repeat} ul.info-address li .kcva-info div em{ width:auto} .map-wrap { margin-top:20px} /* 센터위원회소개 */ .committee-wrap .subcommittee-image{ font-size:0; line-height:0} .committee-wrap .subcommittee-image img{ display:inline-block; max-width:100%} .committee-wrap .subcommittee-image.R{ text-align:right} .committee-wrap .subcommittee .subcommittee-title h3{ color:#333; font-weight:700} .committee-wrap .subcommittee .subcommittee-title p{ color:#333} .committee-wrap .subcommittee .subcommittee-title p mark{ color:#333; font-weight:400; background:transparent} .committee-wrap .subcommittee .subcommittee-title ul li{ background:url(/images/contents/dot-blue.png) no-repeat} .committee-wrap .subcommittee .subcommittee-title ul li:first-child{ margin-top:0} .committee-wrap .subcommittee.subcommittee.halfL, .committee-wrap .subcommittee.L,.committee-wrap .subcommittee-image.L{ float:left} .committee-wrap .subcommittee.subcommittee.halfR, .committee-wrap .subcommittee.R,.committee-wrap .subcommittee-image.R{ float:right} @media all and (min-width:300px) and (max-width:750px){ /* 게시판 테이블 모바일버전 */ .default.exhibition tr:nth-of-type(even){ background:#f8f8f8} /* Force table to not be like tables anymore */ .default.exhibition table,.default.exhibition thead,.default.exhibition tbody,.default.exhibition th,.default.exhibition td,.default.exhibition tr{ display:block} /* Hide table headers (but not display: none;, for accessibility) */ .default.exhibition thead tr{ position:absolute; top:-9999px; left:-9999px} .default.exhibition tr{ margin-top:10px; border:1px solid #e3e3e3; border-bottom:0} .default.exhibition tr:first-child{ margin-top:0} /* Behave like a "row" */ .default.exhibition td{ border:0; border-bottom:1px solid #eee; position:relative; text-align:left !important} .default.exhibition td:before{ /* Now like a table header */ display:inline-block; /* Top/left values mimic padding */ width:20%; white-space:nowrap; text-align:left} /* 게시판 리스트 */ .default.exhibition td:nth-of-type(1):before{ content: "접수자"} .default.exhibition td:nth-of-type(2):before{ content: "연락처"} .default.exhibition td:nth-of-type(3):before{ content: "Email"} .default.exhibition td:nth-of-type(4):before{ content: "첨부파일(수정하실 경우에만 올려주세요)"} .default.exhibition td:nth-of-type(5):before{ content: "수정확인"} .default.exhibition td:nth-of-type(4):before{ padding-bottom:10px; width:100%} .default .button.blue.confirm{ display:inline-block; text-align:left; height:30px} .default .button.blue.confirm input[type=submit]{ height:30px; line-height:30px} } /* Mobile */ #d-map, #d-roadview { height:300px} .map-infobox { width:150px; font-size:15px; line-height:20px} .map-infobox a { font-size:15px; line-height:20px} .map-infobox img { margin:0 3px; width:auto; height:25px} /* Membership Form */ .membership h1.section-title{ margin-bottom:10px; font-size:16px} .membership h3.form-title{ margin-bottom:7px; font-size:13px} .membership h3.form-title span{ margin:-3px 0 0 10px} .membership h3.form-title span label{ font-size:12px} .membership p.section-subtitle{ margin-bottom:20px; font-size:14px; line-height:18px} .login span { margin-top:5px} .login span input[type=text], .login span input[type=tel], .login span input[type=email], .login span input[type=submit], .login span input[type=password]{ height:40px; font-size:12px} .login span input[type=submit]{ font-size:16px} .signup-guidance { margin-top:20px} .signup-guidance .join, .signup-guidance .find{ padding:15px 0; width:100%} .signup-guidance .find{ margin-top:5px} .signup-guidance .join img, .signup-guidance .find img{ width:35px} .signup-guidance .join p, .signup-guidance .find p{ margin:10px 0 15px 0} .signup-guidance .join span a, .signup-guidance .find span a{ width:110px; height:35px; line-height:35px; font-size:13px} .find-result, .find-result .btn-login{ margin-top:40px} .find-result .result-title{ font-size:18px} .find-result strong { margin-top:15px; font-size:16px} .find-result .btn-login a{ width:100%; height:40px; line-height:40px; font-size:16px} ul.signup-step { margin-bottom:15px} ul.signup-step li { height:17px; line-height:17px} ul.signup-step li span{ font-size:13px} ul.signup-step li img{ margin:0 10px; width:10px} ul.signup-step li.step1, ul.signup-step li.step2{ padding-left:20px; background-size:174px 34px} ul.signup-step li.step1{ background-position:0 0} ul.signup-step li.step2{ background-position:-157px 0} ul.signup-step li.active.step1{ background-position:0 -17px} ul.signup-step li.active.step2{ background-position:-157px -17px} ul.signup-form li label, ul.signup-form li span{ display:block; padding:8px 10px} ul.signup-form li span label{ display:inline-block} ul.signup-form li span span{ margin-top:5px; font-size:11px} ul.signup-form li input[type=button]{ padding:0 5px; height:30px; line-height:30px; font-size:11px} ul.signup-form li input[type=text], ul.signup-form li select, ul.signup-form li input[type=password]{ width:100%} ul.signup-form li input#zipcode, ul.signup-form li input[type=tel]{ width:30%} ul.signup-form li input.email, ul.signup-form li input[type=email]{ width:47%} ul.signup-form li #idmasage, ul.signup-form li #passmasage, ul.signup-form li #email_massage{ } ul.signup-form li select.time{ width:25%} ul.signup-form li input.booking{ width:40%} .terms-agree .agree-descrip { margin-top:7px} .terms-agree ul li span, .terms-agree ul li strong{ display:block; padding:8px 10px} .terms-agree ul li span span{ margin-right:5px} .captcha { margin:15px 0; padding:0 10px} .captcha input { width:150px} .captcha input[type=button]{ width:auto} span#rslt, .captcha input, .captcha input[type=button]{ height:30px; line-height:30px} .captcha a { margin:0 5px; width:30px; height:30px} .captcha img { width:100px; height:30px} .sign-up-complete .complete-title{ font-size:18px} .sign-up-complete .end-message{ margin-bottom:30px} .sign-up-complete .end-message img{ width:50px} .sign-up-complete span{ margin-top:10px} .sign-up-complete .btn-guidance{ margin-top:30px} .sign-up-complete .btn-guidance span{ padding:0 15px; height:40px; line-height:40px} .privacy-agree { margin-top:15px} .privacy-agree .privacy-item{ margin-top:7px; padding:10px; font-size:14px; line-height:24px} section.terms { line-height:24px} section.terms h1.title-clause{ margin-bottom:8px; font-size:15px} section.terms h2.title-clause{ margin-bottom:8px; font-size:14px} section.terms .clause{ margin-bottom:15px; font-size:14px; line-height:24px} /* Mypage */ .mypage .my-info { padding:10px 10px 20px} .mypage .user-info, .mypage .user-activity{ width:100%} .mypage .user-info strong, .mypage .user-info span{ font-size:16px} .mypage .user-info strong{ margin-right:5px} .mypage .user-info ul{ margin:10px 0} .mypage .user-info li span{ font-size:14px} .mypage .user-info li span.item-title{ width:70px} .mypage .user-activity span{ margin-right:3px} .mypage .user-activity span.btn-out, .mypage .user-activity span.btn-edit{ height:35px; font-size:13px; line-height:34px} .mypage .user-activity span.btn-out{ width:70px} .mypage .user-activity span.btn-edit{ width:90px} .mypage .user-activity span.volunteer-application, .mypage .user-activity span.online-counsel, .mypage .user-activity span.booking-visit{ width:90px; height:35px; font-size:13px; line-height:34px} .mypage .user-activity div{ margin-top:15px; font-size:14px} .mypage .user-activity div p{ margin-top:10px} .mypage .my-link { margin-top:15px} ul.inline-type.my-link li:first-child{ margin-left:0} ul.inline-type.my-link li{ margin-top:-1px; padding:15px 30px; width:100%; text-align:center} ul.inline-type.my-link li strong{ margin:10px 0; padding-bottom:10px; font-size:16px; border-bottom:1px solid #e3e3e3} ul.inline-type.my-link li span{ font-size:15px; line-height:20px} ul.inline-type.my-link li span a{ display:inline-block; margin-top:15px; padding:0 20px; color:#fff; font-size:13px; line-height:35px; background:#1d99d6} ul.inline-type.my-link li span img{ width:40px} /* 연혁 */ #past-history1,#past-history2{ display:none} .history-map { padding:30px 0} .history-map, .history-map.back-grey{ background-position:15px 0} .history-map.back-grey{ padding-left:0; padding-right:0; background-color:#f1f1f1} .history-map .year-historyL h3.history-pointer, .history-map .year-historyR h3.history-pointer{ font-size:20px; line-height:22px} .history-map .year-historyL h3.history-pointer img, .history-map .year-historyR h3.history-pointer img{ display:inline-block; vertical-align:middle; margin-left:-15px; margin-right:10px; width:32px} .history-map .summary-history, .history-map .year-historyL, .history-map .year-historyR { padding-left:25px; padding-right:10px; width:100%} .history-map ul.right-alignment li, .history-map ul.left-alignment li{ margin-top:8px} .history-map ul.left-alignment, .history-map ul.right-alignment{ margin-top:20px} .history-map ul.inline-type { margin-top:20px} .history-map ul.left-alignment li span, .history-map ul.left-alignment li strong, .history-map ul.right-alignment li span, .history-map ul.right-alignment li strong{ float:left; font-size:15px; line-height:20px} .history-map ul.left-alignment li strong, .history-map ul.right-alignment li strong{ width:15%} .history-map ul.left-alignment li span, .history-map ul.right-alignment li span{ width:85%} .history-map ul.inline-type li img{ width:90px} .business-introduction .block-wrap li{ padding:10px} .business-introduction .block-wrap li ul{ width:73%} .business-introduction .block-wrap li span{ width:25%} .business-introduction .block-wrap li span em img{ width:35px} .business-introduction .block-wrap li strong{ margin-top:5px; font-size:16px} .business-introduction .block-wrap li li strong{ margin:10px 0 5px 0; font-size:15px} .business-introduction .block-wrap li li span{ margin-top:5px; padding-left:7px; line-height:18px; background-position:0 8px; background-size:2px} .business-introduction .block-wrap ul.back-grey1 li:nth-child(2), .business-introduction .block-wrap ul.back-grey2 li:nth-child(2), .business-introduction .block-wrap ul.back-white li:nth-child(2){ height:100px} .support-procedure div em img{ width:25px} .support-procedure div span{ padding:20px 90px} .support-procedure div strong{ margin-left:5px; line-height:18px} .support-procedure p{ margin-top:7px} ul.remarks { float:right; padding-bottom:10px} ul.remarks li span { margin-left:10px} ul.remarks li img { margin-right:5px; margin-top:-2px} .kcva-schedule .month-year{ margin-bottom:10px} .kcva-schedule .month-year img{ width:30px} .kcva-schedule .month-year strong{ margin:0 10px; font-size:14px} .kcva-schedule .month-year strong span{ margin:0 0 0 5px} ul.cal-head li { height:35px; font-size:11px; line-height:32px} ul.cal-body li { padding:5px; height:125px} ul.cal-body li>strong{ margin-bottom:6px} ul.cal-body li em img{ width:15px} ul.cal-body li span { display:inline-block; vertical-align:middle; margin-bottom:3px} ul.cal-body li span strong{ display:none} .center-find .image-map{ display:none} .center-find .find-title{ padding:10px 15px} .center-find .area-search{ margin:15px 15px} .center-find .area-search span{ margin-top:5px} .center-find .area-search p{ margin-top:15px; padding-top:10px; font-size:14px; line-height:20px} .center-find .area-search.searchForm{ margin-bottom:15px} .center-find .area-search.searchForm label{ margin-bottom:5px; width:100%; text-align:left} .center-find .area-search.searchForm select{ margin:0; width:40%} .center-find .area-search.searchForm input[type=submit]{ width:20%} .center-find .area-search.searchForm input[type=text]{ width:80%} .center-find .find-descrip{ display:none} .center-list { margin-top:20px} .center-list p { margin-bottom:5px} ul.center-infomation{ margin-top:20px} ul.center-infomation li{ padding:10px 0} ul.center-infomation li img{ width:18px} ul.center-infomation li span{ margin-right:7px} ul.center-infomation li span.center-tel, ul.center-infomation li span.center-fax{ display:block; margin:0} ul.center-infomation li span.center-fax{ margin-top:10px; padding-top:10px; border-top:1px solid #e3e3e3} ul.center-infomation li strong{ width:88%} .requisite-area li span,.requisite-area li strong{ padding:15px 10px; line-height:18px} .requisite-area li label,.requisite-area li strong{ font-size:15px} .requisite-area li span{ margin-right:15px} .requisite-area li span span{ padding:0} .requisite-area .relevant-center{ margin-top:25px} .requisite-area .relevant-center>div{ margin:10px 0; padding:15px 15px} .requisite-area .relevant-center strong{ font-size:16px} .requisite-area .relevant-center span{ margin-top:7px} .requisite-area .relevant-center a{ margin-top:15px; padding:7px 15px} section.searching-statutes .searching-subtitle{ font-size:15px} section.searching-statutes .searchForm.searching{ margin:20px 0} section.searching-statutes .searchForm.searching span{ display:block; margin-top:5px} section.searching-statutes .searchForm.searching span:first-child{ margin-top:0} section.searching-statutes .searchForm.searching .sbOptions, section.searching-statutes .searchForm.searching .sbHolder, section.searching-statutes .searchForm.searching .sbSelector{ width:300px} section.searching-statutes .searchForm.searching input[type=text]{ width:275px} ul.searching-list li{ padding:15px 0} ul.searching-list li span{ font-size:12px; line-height:20px} ul.searching-list li strong{ margin-bottom:10px; font-size:13px} ul.searching-list li span.searching-item{ margin-bottom:15px} ul.searching-list li span.searching-item span{ margin-right:15px; font-size:11px} section.searching-statutes .searching-result .legal-item{ margin:20px 0} section.searching-statutes .searching-result span.legal-item span{ margin:0 10px; line-height:18px} section.searching-statutes .searching-result .legal-contents{ padding:15px 10px; line-height:20px} .related-organization ul li{ margin-left:2%; margin-top:2%; width:49%} .related-organization ul li span{ margin-bottom:10px} .related-organization ul li strong{ height:50px; font-size:15px; line-height:20px; word-break:break-word} .related-organization ul li:nth-child(1), .related-organization ul li:nth-child(3), .related-organization ul li:nth-child(5), .related-organization ul li:nth-child(7), .related-organization ul li:nth-child(9), .related-organization ul li:nth-child(11), .related-organization ul li:nth-child(13), .related-organization ul li:nth-child(15), .related-organization ul li:nth-child(17), .related-organization ul li:nth-child(19), .related-organization ul li:nth-child(21), .related-organization ul li:nth-child(23), .related-organization ul li:nth-child(25), .related-organization ul li:nth-child(27){ margin-left:0} .related-organization ul li:nth-child(1), .related-organization ul li:nth-child(2), .related-organization ul li:nth-child(3), .related-organization ul li:nth-child(4){ margin-top:0} .related-help ul li { margin-top:10px; width:100%} .related-help ul li:first-child{ margin-top:0} .related-help ul li span{ padding:15px 0} .related-help ul li span.details{ padding:10px} .related-help ul li span strong{ font-size:16px} .related-help ul li span.details span{ margin-top:9px; font-size:14px} .related-help ul li span strong{ padding-bottom:10px} .related-help ul li span img{ max-width:auto; width:200px} .related-help ul li span.details span.memo-descrip, .related-help ul li span.details span.tel-help, .related-help ul li span.details span.home-link{ padding-left:20px; background-position:0 5px; background-size:13px} /* 공모전(희망수기) */ .competition .user-contact span{ margin-top:10px} .sns-scrap { margin-top:20px; padding:20px} .sns-scrap strong { margin-bottom:10px; font-size:16px} .sns-scrap>div { width:255px} ul.scrap { margin-top:10px} ul.scrap li { padding:10px} ul.scrap li span { width:49%} ul.scrap li span:first-child{ margin-right:2%} ul.scrap li span:last-child{ margin-top:10px; width:100%} .event-wrap { padding-top:110px; height:365px; background-size:cover} .event-wrap.event-1 { background-image:url(/images/kcva/back-m-sns.jpg)} .event-wrap.event-2 { background-image:url(/images/kcva/back-m-message.jpg)} .event-wrap.event-1 .gift-image{ right:20px; bottom:25px} .event-wrap.event-2 .gift-image{ right:0; bottom:0} .event-wrap .gift-image img{ width:100px} .event-wrap strong { font-size:15px} ul.event { margin-top:20px; width:80%} ul.event li span { width:75%} ul.event li span.item-title{ width:25%} ul.event li strong { margin-top:-5px} ul.scrap.cheerful { margin-top:20px} ul.scrap.cheerful li span{ margin-left:2%; width:32%} ul.scrap.cheerful li span:first-child{ margin:0} ul.scrap.cheerful li span:last-child{ margin:0 0 0 2%} ul.scrap.cheerful li:last-child{ padding-top:0} ul.scrap.cheerful li:last-child span:first-child{ margin:0; width:75%} ul.scrap.cheerful li:last-child span:last-child{ width:23%} ul.scrap.cheerful li input[type=submit]{ height:30px; color:#fff; border:0; background:#172c67; cursor:pointer} .cheerful-word { margin-top:20px} ul.word-list li { padding:10px 0} ul.word-list li .user-name{ width:25%; color:#035b9b} ul.word-list li .cheerful-message{ margin-top:10px; width:100%} ul.word-list li .entry-date{ width:45%} ul.word-list li .delete-modify{ width:30%} ul.word-list li .entry-date, ul.word-list li .delete-modify{ text-align:right} ul.word-list li .delete-modify button{ padding:3px 7px; font-size:12px} ul.word-list li .cheerful-message input[type=text]{ margin-bottom:5px; width:100%} ul.word-list li .cheerful-message input[type=text], ul.word-list li .cheerful-message input[type=password]{ line-height:normal} ul.word-list li .cheerful-message button{ padding:3px 7px; font-size:12px; background:#000} ul.word-list li .cheerful-message button.cancel{ background:#666} .hope-intro h2.head { margin-bottom:20px} .hope-intro h2.head span{ margin-top:0; font-size:20px} .hope-intro h2.head strong{ font-size:22px} .hope-intro .default.center th, .hope-intro .default.center td{ padding:10px 0} .hope-intro .default p{ margin-top:10px; font-size:14px; line-height:18px} .hope-intro .reception-period{ padding:10px 0; text-align:center} .hope-intro .reception-period em{ display:block; margin-bottom:5px} .hope-intro .reception-period em img{ width:20px} .hope-intro .reception-period strong{ margin-top:-2px; font-size:15px} ul.dot-list li { margin:8px 0; padding-left:10px; background-position:0 10px; background-size:2px} ul.dot-list li,ul.dot-list li span,ul.dot-list li strong{ line-height:22px} .contents-competition .application-method{ margin-bottom:10px} .contents-competition .application-method .post, .contents-competition .application-method .online, .contents-competition .application-method ul.dot-list{ width:100%} .contents-competition .application-method .post, .contents-competition .application-method .online{ padding-left:10px; background-size:114px; height:40px; line-height:40px} .poster-down { margin:20px 0} .poster-down button { padding:10px 20px; font-size:16px} ul.overview li { margin-top:10px; width:100%; height:110px} ul.overview li em, ul.overview li span { height:110px} ul.overview li em { width:20%; line-height:140px} ul.overview li span { padding:10px 15px; width:80%; line-height:20px} ul.overview li span strong{ margin-bottom:8px} ul.overview li span span em{ margin-right:10px} .event-end { margin:30px 0; font-size:16px; line-height:26px} .competition ul.tab-menu li{ margin-left:2%; width:49%} .competition ul.tab-menu li:first-child{ margin-left:0} .contents-competition h3{ margin:20px 0 10px; font-size:18px} .contents-competition h3.first{ margin-top:0} .contents-competition h4{ margin-bottom:7px; font-size:16px} .contents-competition .competition-poster{ margin-bottom:20px} .contents-competition .competition-poster .poster-image{ margin-bottom:15px; padding:10px 10px 0} .contents-competition.nickname .competition-poster .poster-image{ padding:10px} .contents-competition .competition-poster a{ padding:8px 20px; font-size:14px} .contents-competition .competition-descrip.info{ margin-bottom:10px} .contents-competition .competition-descrip mark{ line-height:22px} .contents-competition .doc-submitted a{ margin-top:10px; padding:8px 15px; font-size:14px} .contents-competition.nickname .doc-submitted span{ margin-right:20px} .contents-competition.nickname .doc-submitted a{ margin-top:-1px} .contents-competition .receipt .post,.contents-competition .sponsoring-organ{ margin-top:5px} .contents-competition .receipt .online,.contents-competition .receipt .post, .contents-competition .host,.contents-competition .sponsoring-organ{ width:100%} .contents-competition .host em,.contents-competition .sponsoring-organ em{ margin-right:10px} /* 동행 v11 ebook(2020.07.29) */ /* 2021.02.16 법령검색 추가 */ section.searching-statutes.link-type ul.searching-list{ margin-top:20px} section.searching-statutes.link-type ul.searching-list li strong{ font-size:16px} section.searching-statutes.link-type ul.searching-list li span.searching-item{ margin-bottom:0} section.searching-statutes.link-type ul.searching-list li span.searching-item span{ font-size:14px} section.searching-statutes.link-type ul.searching-list li span.searching-item span:first-child{ display:block; margin-bottom:10px} section.searching-statutes.link-type ul.searching-list li span.searching-item .button a{ padding:0 15px; font-size:15px} @media all and (min-width:370px){ ul.cal-body li em img{ width:auto} } /* Mobile Landscape */ @media all and (min-width:460px) and (max-width:767px){ .event-wrap { padding-top:180px; height:500px} .event-wrap.event-1 .gift-image{ right:50px; bottom:35px} .event-wrap.event-2 .gift-image{ right:40px; bottom:5px} .event-wrap .gift-image img{ width:150px} .event-wrap strong { margin:5px 0} ul.event { margin-top:20px; width:80%} ul.event li { padding:5px 0} ul.event li span { width:80%} ul.event li span.item-title{ width:20%} ul.event li strong { margin:-5px 0 0 0} ul.scrap.cheerful li:last-child span:first-child{ width:78%} ul.scrap.cheerful li:last-child span:last-child{ width:20%} ul.overview li span span em { margin-right:20px} } @media all and (min-width:550px){ ul.cal-body li { height:100px} section.terms .clause{ font-size:16px; line-height:26px} } @media all and (min-width:560px) and (max-width:767px){ .thumb-list.view div.board-content.letter-paper{ background-position:100% 100%} .thumb-list.view div.board-content.letter-paper{ padding:40px 100px 30px 30px} .thumb-list.view .add-file a{ width:100px} .editor.letter-paper textarea{ height:240px} .next-prev li span { display:inline-block} .album-box.albumblock{ height:240px} .album-box.albumblock .image-caption{ height:160px} ul.center-infomation li span.center-tel, ul.center-infomation li span.center-fax{ width:50%} ul.center-infomation li span.center-tel{ float:left} ul.center-infomation li span.center-fax{ float:right} ul.center-infomation li span.center-fax{ margin-top:0; padding-top:0; border:0} .photo-slide .title-image img{ width:100%} .photo-slide .slide-image{ height:350px} .hope-intro .reception-period em{ display:inline-block; vertical-align:middle; margin-bottom:0; margin-right:10px} ul.overview li, ul.overview li em, ul.overview li span { height:90px} ul.overview li em { line-height:120px} } /* iPad Portrait */ @media all and (min-width:768px){ #d-map, #d-roadview { height:365px} .map-infobox img { margin:0 5px; height:auto} /* Membership Form */ .membership h1.section-title{ margin-bottom:20px; font-size:18px} .membership h3.form-title{ margin-bottom:10px; font-size:15px} .membership h3.form-title span{ margin:-4px 0 0 15px} .membership h3.form-title span label{ font-size:13px} .membership p.section-subtitle{ margin-bottom:60px; font-size:15px; line-height:24px} .login, .signup-guidance { width:600px} .login span { margin-top:10px} .login span input[type=text], .login span input[type=tel], .login span input[type=email], .login span input[type=submit], .login span input[type=password]{ height:60px; font-size:16px} .login span input[type=submit]{ font-size:24px} .signup-guidance { margin-top:60px} .signup-guidance .join{ margin-right:10px} .signup-guidance .find{ margin-top:0} .signup-guidance .join, .signup-guidance .find{ padding:35px 0; width:295px} .signup-guidance .join img, .signup-guidance .find img{ width:auto} .signup-guidance .join p, .signup-guidance .find p{ margin:15px 0 25px 0} .signup-guidance .join span a, .signup-guidance .find span a{ height:40px; line-height:40px; font-size:14px} .find-result, .find-result .btn-login{ margin-top:70px} .find-result .result-title{ font-size:24px} .find-result strong { margin-top:35px; font-size:22px} .find-result .btn-login a{ width:600px; height:60px; line-height:60px; font-size:28px} ul.signup-step { margin-bottom:30px} ul.signup-step li { height:34px; line-height:34px} ul.signup-step li span{ font-size:18px} ul.signup-step li img{ margin:0 25px; width:auto} ul.signup-step li.step1, ul.signup-step li.step2{ padding-left:45px; background-size:auto} ul.signup-step li.step1{ background-position:0 0} ul.signup-step li.step2{ background-position:-315px 0} ul.signup-step li.active.step1{ background-position:0 -34px} ul.signup-step li.active.step2{ background-position:-315px -34px} ul.signup-form li label, ul.signup-form li span{ float:left} ul.signup-form li label, ul.signup-form li span{ padding:0 20px; height:60px; line-height:60px} ul.signup-form li label{ padding-right:0; width:20%; border-right:1px solid #e3e3e3} ul.signup-form li span{ width:80%} ul.signup-form li span label, ul.signup-form li span span{ display:inline-block} ul.signup-form li span span{ margin-left:7px; font-size:14px} ul.signup-form li input[type=button]{ margin-left:2px; padding:0 10px; height:40px; line-height:40px; font-size:14px} ul.signup-form li input[type=text], ul.signup-form li input[type=password]{ width:350px} ul.signup-form li select, ul.signup-form li input.email, ul.signup-form li input[type=email]{ width:250px} ul.signup-form li input#zipcode, ul.signup-form li input[type=tel]{ width:110px} ul.signup-form li input.address{ width:100%} ul.signup-form li input.short1{ width:80px} ul.signup-form li #idmasage, ul.signup-form li #passmasage, ul.signup-form li #email_massage{ } ul.signup-form li.email-form label, ul.signup-form li.email-form span{ padding:10px 20px; height:110px; line-height:45px} ul.signup-form li #email_massage, ul.signup-form li.email-form span label, ul.signup-form li.email-form span span{ padding:0; height:auto; line-height:normal} ul.signup-form li select.time{ width:20%} ul.signup-form li input.booking{ width:25%} ul.signup-form li img{ margin:0 10px; width:auto} .terms-agree .agree-descrip{ margin-top:15px} .terms-agree ul li span, .terms-agree ul li strong{ float:left; padding:0 20px; height:60px; line-height:60px} .terms-agree ul li strong{ padding-right:0; width:20%; border-right:1px solid #e3e3e3} .terms-agree ul li span{ width:80%} .terms-agree ul li span span{ margin-right:10px} .captcha { margin:35px 0; padding:0; text-align:center} .captcha input { width:150px} span#rslt, .captcha input, .captcha input[type=button]{ height:40px; line-height:40px} .captcha a { width:40px; height:40px} .captcha img { width:150px; height:40px} .sign-up-complete .complete-title{ font-size:24px} .sign-up-complete .end-message{ margin-bottom:60px} .sign-up-complete .end-message img{ width:auto} .sign-up-complete span{ margin-top:25px} .sign-up-complete .btn-guidance{ margin-top:60px} .sign-up-complete .btn-guidance span{ padding:0 35px; height:50px; line-height:50px} .privacy-agree { margin-top:30px} .privacy-agree .privacy-item{ margin-top:15px; padding:20px} section.terms { line-height:24px} section.terms h1.title-clause{ margin-bottom:10px; font-size:18px} section.terms h2.title-clause{ margin-bottom:10px; font-size:16px} section.terms .clause{ margin-bottom:20px} /* Mypage */ .mypage .my-info { padding:30px} .mypage .user-info, .mypage .user-activity{ width:auto} .mypage .user-info ul{ margin:32px 0 0 0} .mypage .user-info strong, .mypage .user-info span{ font-size:20px} .mypage .user-info li{ margin-top:7px} .mypage .user-info li:first-child{ margin-top:0} .mypage .user-info li span{ font-size:16px} .mypage .user-info li span.item-title{ width:90px} .mypage .user-activity{ text-align:right} .mypage .user-activity span{ margin-left:5px; margin-right:0} .mypage .user-activity span.btn-out, .mypage .user-activity span.btn-edit{ height:40px; font-size:15px; line-height:38px} .mypage .user-activity span.btn-out{ width:90px} .mypage .user-activity span.btn-edit{ width:120px} .mypage .user-activity span.volunteer-application, .mypage .user-activity span.online-counsel, .mypage .user-activity span.booking-visit{ width:120px; height:40px; font-size:15px; line-height:38px} .mypage .user-activity div{ margin-top:30px; font-size:16px} .mypage .user-activity div p{ margin-top:15px} .mypage .my-link { margin-top:50px} ul.inline-type.my-link li{ margin-left:2%; padding:30px; width:49%} ul.inline-type.my-link li strong{ margin:20px 0; padding-bottom:20px; font-size:24px} ul.inline-type.my-link li span{ font-size:16px; line-height:26px} ul.inline-type.my-link li span a{ margin-top:35px; padding:0 30px; font-size:14px; line-height:40px} ul.inline-type.my-link li span img{ width:auto} /* 연혁 */ .history-map { padding:40px 0} .history-map,.history-map.back-grey{ background-position:30px 0} .history-map .year-historyL h3.history-pointer, .history-map .year-historyR h3.history-pointer{ font-size:26px; line-height:24px} .history-map .year-historyL h3.history-pointer img, .history-map .year-historyR h3.history-pointer img{ margin-left:-62px; width:auto} .history-map .year-historyL h3.history-pointer, .history-map .year-historyR h3.history-pointer{ padding-left:25px} .history-map .summary-history,.history-map .year-historyL,.history-map .year-historyR{ padding-left:60px} .history-map ul.right-alignment li,.history-map ul.left-alignment li{ margin-top:12px} .history-map ul.left-alignment li span, .history-map ul.left-alignment li strong, .history-map ul.right-alignment li span, .history-map ul.right-alignment li strong{ font-size:16px; line-height:24px} .history-map ul.left-alignment li strong, .history-map ul.right-alignment li strong{ width:10%} .history-map ul.left-alignment li span, .history-map ul.right-alignment li span{ width:90%} .history-map ul.inline-type{ margin-top:40px} .history-map ul.inline-type li img{ width:auto} .business-introduction .block-wrap li{ padding:20px} .business-introduction .block-wrap li ul{ width:83%} .business-introduction .block-wrap li span{ width:15%} .business-introduction .block-wrap li span em img{ width:45px} .business-introduction .block-wrap li strong{ margin-top:10px; font-size:18px} .business-introduction .block-wrap li li strong{ margin:15px 0 10px 0; font-size:16px} .business-introduction .block-wrap li li span{ margin-top:8px; padding-left:10px; line-height:22px; background-position:0 9px; background-size:auto} .business-introduction .block-wrap ul.back-grey1 li:nth-child(2), .business-introduction .block-wrap ul.back-grey2 li:nth-child(2), .business-introduction .block-wrap ul.back-white li:nth-child(2){ height:130px} .support-procedure .back-procedure{ background:url(/images/business/back-support-procedure.jpg) 50% 0 no-repeat; background-size:contain} .support-procedure div.fl-left, .support-procedure div.fl-right{ width:50%} .support-procedure div span.procedure1{ float:right} .support-procedure div span.procedure5{ position:absolute; right:0; bottom:0} .support-procedure div em img{ width:30px} .support-procedure div span{ padding:33px 0 0 0; width:50%; height:117px} .support-procedure div strong{ line-height:24px} .support-procedure p{ margin-top:10px} .support-procedure div span.procedure1{ padding-left:5px} .support-procedure div span.procedure2, .support-procedure div span.procedure3, .support-procedure div span.procedure4, .support-procedure div span.procedure5{ padding-left:13px} ul.remarks { float:left; padding-bottom:0} ul.remarks li span { margin-right:5px; margin-left:0} .searchForm .data-result ul.remarks li span{ font-size:12px} .kcva-schedule { padding-top:20px} .kcva-schedule .month-year{ margin-bottom:30px} .kcva-schedule .month-year strong{ margin:0 20px; font-size:22px} .kcva-schedule .month-year strong span{ margin:0 0 0 15px} ul.cal-head li { height:45px; font-size:13px; line-height:43px} ul.cal-body li { padding:10px; height:225px} ul.cal-body li>strong{ margin-bottom:10px} ul.cal-body li span { display:block; margin-bottom:5px} ul.cal-body li span strong{ display:inline-block; font-size:13px; width:73%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .thumb-list.center .center-address{ margin-bottom:0} .thumb-list.center .center-map,.thumb-list.center .center-link{ position:absolute; top:28%} .thumb-list.center .center-map{ right:105px; margin-right:0} .thumb-list.center .center-link{ right:0} .center-find .image-map,.center-find .select-area{ width:50%} .center-find .image-map{ display:block; padding-bottom:30px; border-right:1px solid #e3e3e3} .center-find .find-title{ padding:15px 40px} .center-find .find-title span{ margin-right:10px} .center-find .image-map .map-holder, .center-find .area-search{ margin:35px 40px} .center-find .area-search span{ margin-top:10px; text-align:left} .center-find .area-search p{ margin-top:25px; padding-top:10px; font-size:13px; line-height:20px} .center-find .area-search.searchForm{ margin-bottom:20px} .center-find .area-search.searchForm.searchForm select, .center-find .area-search.searchForm input[type=text]{ margin-right:-4px} .center-find .find-descrip{ display:block} .center-find .find-descrip span{ line-height:24px} .center-list { margin-top:40px} .center-list p { margin-bottom:10px} ul.center-infomation{ margin-top:30px} ul.center-infomation li{ padding:15px 0} ul.center-infomation li img{ width:auto} ul.center-infomation li span{ margin-right:20px} ul.center-infomation li span.center-tel, ul.center-infomation li span.center-fax{ width:50%} ul.center-infomation li span.center-tel{ float:left} ul.center-infomation li span.center-fax{ float:right} ul.center-infomation li span.center-fax{ margin-top:0; padding-top:0; border:0} ul.center-infomation li strong{ width:auto} .requisite-area li span, .requisite-area li strong{ padding:20px 20px; line-height:24px} .requisite-area li label,.requisite-area li strong{ font-size:16px} .requisite-area li span{ margin-right:25px} .requisite-area .relevant-center{ margin-top:50px} .requisite-area .relevant-center>div{ margin:20px 0; padding:30px 30px} .requisite-area .relevant-center strong{ padding-bottom:10px; font-size:18px} .requisite-area .relevant-center span{ margin-top:10px} .requisite-area .relevant-center a{ margin-top:25px; padding:10px 20px} section.searching-statutes .searching-subtitle{ font-size:20px} section.searching-statutes .searchForm.searching{ margin:30px 0} section.searching-statutes .searchForm.searching span{ display:inline-block; vertical-align:middle; margin-top:0} section.searching-statutes .searchForm.searching .sbOptions, section.searching-statutes .searchForm.searching .sbHolder, section.searching-statutes .searchForm.searching .sbSelector, section.searching-statutes .searchForm.searching input[type=text]{ width:310px} ul.searching-list li{ padding:20px 0} ul.searching-list li span{ font-size:13px; line-height:22px} ul.searching-list li strong{ font-size:15px} ul.searching-list li span.searching-item span{ font-size:13px} section.searching-statutes .searching-result .legal-item{ margin:35px 0} section.searching-statutes .searching-result span.legal-item span{ margin:0 15px; line-height:normal} section.searching-statutes .searching-result .legal-contents{ padding:20px 20px; line-height:28px} .related-organization ul li{ margin-top:4%; width:23.5%} .related-organization ul li strong{ height:40px; font-size:16px} .related-organization ul li:nth-child(3), .related-organization ul li:nth-child(7), .related-organization ul li:nth-child(11), .related-organization ul li:nth-child(15), .related-organization ul li:nth-child(19), .related-organization ul li:nth-child(23), .related-organization ul li:nth-child(27){ margin-left:2%} .related-help ul li { margin-top:15px; margin-left:2%; width:49%} .related-help ul li:nth-child(1), .related-help ul li:nth-child(3), .related-help ul li:nth-child(5), .related-help ul li:nth-child(7), .related-help ul li:nth-child(9), .related-help ul li:nth-child(11){ margin-left:0} .related-help ul li:nth-child(2){ margin-top:0} .related-help ul li span{ padding:25px 0} .related-help ul li span.details{ padding:20px; height:230px} .related-help ul li span.details span{ margin-top:15px; line-height:20px} .related-help ul li span strong{ padding-bottom:15px} .related-help ul li span img{ width:auto} .related-help ul li span.details span.memo-descrip, .related-help ul li span.details span.tel-help, .related-help ul li span.details span.home-link{ padding-left:30px; background-position:0 2px; background-size:auto} /* 공모전(희망수기) */ .competition .user-contact span{ margin-top:18px} .sns-scrap { margin-top:30px; padding:30px} .sns-scrap strong { margin-bottom:15px; font-size:18px} ul.scrap { margin-top:20px} .event-wrap { padding-top:280px; height:600px} .event-wrap.event-1 .gift-image{ right:50px; bottom:5px} .event-wrap.event-2 .gift-image{ right:10px; bottom:5px} .event-wrap .gift-image img{ width:200px} .event-wrap strong { margin:10px 0; font-size:18px} ul.event { width:70%} ul.event li { padding:5px 0} ul.event li span { width:80%} ul.event li span.item-title{ width:20%} ul.scrap.cheerful li:last-child span:first-child{ width:78%} ul.scrap.cheerful li:last-child span:last-child{ width:20%} ul.scrap.cheerful li input[type=submit]{ height:40px} ul.word-list li .entry-date{ width:55%} ul.word-list li .delete-modify{ width:20%} ul.word-list li .delete-modify button{ padding:5px 10px; font-size:13px} .hope-intro h2.head { margin-bottom:30px} .hope-intro h2.head span{ margin-top:5px; font-size:28px} .hope-intro h2.head strong{ font-size:30px} .hope-intro .default.center th, .hope-intro .default.center td{ padding:15px 0} .hope-intro .reception-period{ padding:10px 30px; width:480px; text-align:left} .hope-intro .reception-period em{ display:inline-block; vertical-align:middle; margin-bottom:0; margin-right:10px} .hope-intro .reception-period strong{ margin-top:0; font-size:18px} .contents-competition h3{ margin-bottom:15px; font-size:18px} ul.dot-list li { margin:10px 0; padding-left:13px; background-position:0 13px; background-size:auto} ul.dot-list li, ul.dot-list li span, ul.dot-list li strong{ line-height:26px} .contents-competition .application-method{ margin-bottom:15px} .contents-competition .application-method .post, .contents-competition .application-method .online{ padding-left:20px; background-size:auto; height:63px; line-height:63px} ul.overview li, ul.overview li em, ul.overview li span { height:110px} ul.overview li span { padding:15px 20px; line-height:24px} ul.overview li em { line-height:140px} ul.overview li span span em{ margin-right:30px} .event-end { margin:40px 0; font-size:18px; line-height:28px} .competition ul.tab-menu{ margin:0 auto; margin-bottom:60px; width:410px} .competition ul.tab-menu li{ margin-left:10px; width:200px} .contents-competition h3{ margin:30px 0 12px; font-size:20px} .contents-competition .competition-poster{ margin-bottom:25px} .contents-competition .competition-poster .poster-image{ margin-bottom:20px} .contents-competition .competition-descrip.info{ margin-bottom:15px} .contents-competition .competition-descrip mark{ font-size:18px; line-height:26px} .contents-competition .doc-submitted span{ line-height:26px} .contents-competition .doc-submitted a{ margin-top:15px} .contents-competition .sponsoring-organ{ margin-top:0} .contents-competition .host,.contents-competition .sponsoring-organ{ width:50%} .contents-competition .host em,.contents-competition .sponsoring-organ em{ margin-right:15px} /* 2021.02.16 법령검색 추가 */ section.searching-statutes.link-type ul.searching-list{ margin-top:50px} section.searching-statutes.link-type ul.searching-list li strong{ font-size:20px} section.searching-statutes.link-type ul.searching-list li span.searching-item span{ font-size:16px} section.searching-statutes.link-type ul.searching-list li span.searching-item span:first-child{ display:inline-block; margin-bottom:0} section.searching-statutes.link-type ul.searching-list li span.searching-item .button a{ padding:0 25px; font-size:16px} } /* Tablet & Desktop */ @media all and (min-width:1024px){ #d-map,#d-roadview { height:500px} /* Membership Form */ /* Mypage */ .business-introduction .block-wrap li{ float:left; padding:32px 5px 32px 20px; width:70%} .business-introduction .block-wrap ul.back-grey1 li:nth-child(2), .business-introduction .block-wrap ul.back-grey2 li:nth-child(2), .business-introduction .block-wrap ul.back-white li:nth-child(2){ width:30%; overflow:hidden} .business-introduction .block-wrap ul.back-white li:nth-child(1), .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(1){ float:right; width:70%} .business-introduction .block-wrap ul.back-white li:nth-child(1) li, .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(1) li{ float:none; width:auto} .business-introduction .block-wrap ul.back-grey1 li:nth-child(1), .business-introduction .block-wrap ul.back-grey1 li:nth-child(2){ height:264px} .business-introduction .block-wrap ul.back-grey2 li:nth-child(1), .business-introduction .block-wrap ul.back-grey2 li:nth-child(2){ height:359px} .business-introduction .block-wrap ul.back-white li:nth-child(1), .business-introduction .block-wrap ul.back-white li:nth-child(2){ height:286px} .business-introduction .block-wrap.block2 ul.back-grey1 li:nth-child(1), .business-introduction .block-wrap.block2 ul.back-grey1 li:nth-child(2){ height:329px} .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(1), .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(2){ height:367px} .support-procedure .back-procedure{ background-size:cover} .support-procedure div span{ padding:53px 0 0 0; height:155px} .support-procedure div strong{ margin-left:10px} .support-procedure div span.procedure1{ padding-left:30px} .support-procedure div span.procedure2, .support-procedure div span.procedure3, .support-procedure div span.procedure4, .support-procedure div span.procedure5{ padding-left:43px} ul.remarks li span { margin-right:10px} .center-find .area-search.searchForm{ padding:20px} .searchForm .data-result ul.remarks li span{ font-size:14px} .related-help ul li { margin-top:20px} /* 공모전(희망수기) */ section.sub-content.membership.competition article{ width:800px} section.sub-content.membership.competition ul.signup-form li input.email{ width:100px} section.sub-content.membership.competition ul.signup-form li select{ width:150px} section.sub-content.membership.competition ul.signup-form li.email-form label, section.sub-content.membership.competition ul.signup-form li.email-form span{ height:auto} section.sub-content.membership.competition ul.signup-form #email_massage{ display:inline-block} ul.scrap li span { width:20%} ul.scrap li span, ul.scrap li span:first-child{ margin-right:1%} ul.scrap li span:last-child { margin-top:0; margin-right:0; width:58%} .event-wrap { padding-top:250px; height:545px} .event-wrap.event-1 { background-image:url(/images/kcva/back-sns.jpg)} .event-wrap.event-2 { background-image:url(/images/kcva/back-message.jpg)} .event-wrap.event-1 .gift-image{ right:10px; bottom:75px} .event-wrap.event-2 .gift-image{ right:10px; bottom:0} .event-wrap .gift-image img{ width:250px} .event-wrap strong { font-size:20px} ul.event { width:60%} ul.event li { padding:7px 0} ul.event li span { width:70%} ul.event li span.item-title{ width:15%} ul.scrap.cheerful { margin-top:30px} ul.scrap.cheerful li span{ margin-right:0} ul.scrap.cheerful li span:last-child{ width:32%} ul.scrap.cheerful li:last-child span:first-child{ width:78%} ul.scrap.cheerful li:last-child span:last-child{ width:20%} .cheerful-word { margin-top:30px} ul.word-list li { padding:15px 0} ul.word-list li .entry-date{ width:60%} ul.word-list li .delete-modify{ width:15%} ul.word-list li .delete-modify button{ padding:5px 13px; font-size:14px} .hope-intro .reception-period em img{ width:auto} .contents-competition .application-method .post, .contents-competition .application-method .online{ width:20%} .contents-competition .application-method ul.dot-list{ width:76%} ul.overview li { width:47%; height:115px} ul.overview li, ul.overview li em, ul.overview li span { height:115px} ul.overview li em { width:20%; line-height:145px} ul.overview li span { width:80%} ul.overview li span span em{ margin-right:10px} .event-end { margin:50px 0; font-size:22px; line-height:34px} .contents-competition .host{ width:45%} .contents-competition .sponsoring-organ{ width:55%} /* 2021.02.16 법령검색 추가 */ section.searching-statutes.link-type ul.searching-list li{ padding:40px 0} } /* Desktop */ @media all and (min-width:1200px){ .thumb-list.center .center-map,.thumb-list.center .center-link{ top:32%} .center-find .area-search.searchForm{ margin-bottom:35px} .center-find .area-search p{ padding-top:15px; font-size:14px; line-height:22px} /* 공모전(희망수기) */ ul.word-list li .cheerful-message button{ padding:5px 10px; font-size:13px} .hope-intro .default img{ height:auto} .hope-intro h2.head { margin-bottom:50px} .hope-intro h2.head span{ font-size:36px} .hope-intro h2.head strong{ font-size:40px} ul.overview li span span em{ margin-right:30px} .contents-competition .competition-poster{ position:absolute; right:0; top:0; margin:0; width:350px} .contents-competition .competition-descrip.info,.contents-competition ul.dot-list.info{ width:55%} .contents-competition .doc-submitted span{ display:inline-block; vertical-align:middle; margin-right:15px} .contents-competition .receipt .online{ padding-right:50px} .contents-competition .receipt .online,.contents-competition .receipt .post, .contents-competition .host,.contents-competition .sponsoring-organ{ width:50%} .contents-competition .host em,.contents-competition .sponsoring-organ em{ margin-right:25px} .contents-competition .host em img,.contents-competition .sponsoring-organ em img{ height:auto} /* 2021.02.16 법령검색 추가 */ section.searching-statutes.link-type ul.searching-list li strong{ margin-bottom:0} section.searching-statutes.link-type ul.searching-list li span.searching-item{ position:absolute; top:30%; right:0; margin-bottom:0} section.searching-statutes.link-type ul.searching-list li span.searching-item span{ margin-right:50px} } @media all and (min-width:1300px){ /* 공모전(희망수기) */ .contents-competition .doc-submitted a{ display:block; position:absolute; top:-1px; right:0; margin:0} .contents-competition.nickname .doc-submitted a{ display:inline-block; position:static; top:auto; right:auto} /* 동행 v11 ebook(2020.07.29) */ /*.ebook.ebook-pc{ display:inline-block} .ebook.ebook-mobile{ display:none}*/ ul.cal-body li span strong{ font-size:14px; width:80%} ul.cal-body li.select-today span strong{ width:79%} } @media all and (min-width:1400px){ /* Membership Form */ .membership h1.section-title{ font-size:20px} .membership h3.form-title{ font-size:16px} .membership h3.form-title span{ margin:-6px 0 0 15px} .membership h3.form-title span label{ font-size:14px} .membership p.section-subtitle{ font-size:16px; line-height:28px} .find-result, .find-result .btn-login{ margin-top:100px} ul.signup-form li label, ul.signup-form li span, .terms-agree ul li span, .terms-agree ul li strong{ padding:0 30px} ul.signup-step { margin-bottom:40px} ul.signup-form li input[type=text], ul.signup-form li input[type=password]{ width:400px} ul.signup-form li select{ width:270px} ul.signup-form li input.email, ul.signup-form li input[type=email]{ width:200px} ul.signup-form li input#zipcode{ width:180px} ul.signup-form li input.address{ width:100%} ul.signup-form li.email-form label, ul.signup-form li.email-form span{ padding:0 30px; height:60px; line-height:60px} ul.signup-form li select.time{ width:20%} ul.signup-form li input.booking{ width:25%} .captcha input { width:250px} .captcha img { width:200px} section.terms { line-height:28px} section.terms h1.title-clause{ margin-bottom:15px; font-size:20px} section.terms h2.title-clause{ margin-bottom:15px; font-size:17px} section.terms .clause{ margin-bottom:30px; line-height:28px} /* Mypage */ .mypage .my-info, .mypage .my-link { width:1000px} .mypage .user-info strong, .mypage .user-info span{ font-size:24px} .mypage .user-info li span, .mypage .user-activity div{ font-size:16px} .mypage .user-activity div{ margin-top:43px} ul.inline-type.my-link li{ margin-left:4%; width:48%} ul.inline-type.my-link li span a{ padding:0 35px} /* 연혁 */ .history-map { padding:60px 0} .history-map,.history-map.back-grey{ background-position:60px 0} .history-map .year-historyL h3.history-pointer, .history-map .year-historyR h3.history-pointer{ font-size:30px; line-height:26px} .history-map .year-historyL h3.history-pointer img, .history-map .year-historyR h3.history-pointer img{ margin-left:-97px; width:auto} .history-map .year-historyL h3.history-pointer, .history-map .year-historyR h3.history-pointer{ padding-left:30px} .history-map .summary-history,.history-map .year-historyL,.history-map .year-historyR{ padding-left:120px} .history-map ul.right-alignment li,.history-map ul.left-alignment li{ margin-top:15px} .history-map ul.left-alignment li span, .history-map ul.left-alignment li strong, .history-map ul.right-alignment li span, .history-map ul.right-alignment li strong{ line-height:26px} .history-map ul.left-alignment li strong, .history-map ul.right-alignment li strong{ width:7%} .history-map ul.left-alignment li span, .history-map ul.right-alignment li span{ width:93%} /*.history-map ul.inline-type { margin-top:80px}*/ .history-map ul.inline-type{ position:absolute; bottom:0; right:0; margin-top:0; width:320px; text-align:right} .history-map ul.inline-type li{ margin:0 0 0 2px} .history-map ul.inline-type li:first-child{ margin:0 0 5px; width:100%} .business-introduction .block-wrap li{ padding-left:45px; padding-right:10px; width:75%; height:300px} .business-introduction .block-wrap li ul{ width:80%} .business-introduction .block-wrap li span{ width:18%} .business-introduction .block-wrap li span em img{ width:auto} .business-introduction .block-wrap li strong{ font-size:24px} .business-introduction .block-wrap li li strong{ margin:15px 0; font-size:18px} .business-introduction .block-wrap li li span{ padding-left:13px; line-height:24px; background-position:0 9px} .business-introduction .block-wrap ul.back-grey1 li:nth-child(2), .business-introduction .block-wrap ul.back-grey2 li:nth-child(2), .business-introduction .block-wrap ul.back-white li:nth-child(2){ width:25%} .business-introduction .block-wrap ul.back-white li:nth-child(1), .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(1){ float:right; width:75%} .business-introduction .block-wrap ul.back-grey1 li:nth-child(1), .business-introduction .block-wrap ul.back-grey1 li:nth-child(2), .business-introduction .block-wrap ul.back-grey2 li:nth-child(1), .business-introduction .block-wrap ul.back-grey2 li:nth-child(2), .business-introduction .block-wrap ul.back-white li:nth-child(1), .business-introduction .block-wrap ul.back-white li:nth-child(2), .business-introduction .block-wrap.block2 ul.back-grey1 li:nth-child(1), .business-introduction .block-wrap.block2 ul.back-grey1 li:nth-child(2){ height:300px} .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(1), .business-introduction .block-wrap.block2 ul.back-grey2 li:nth-child(2){ height:360px} .business-introduction .block-wrap ul.back-grey1 li{ padding-top:50px} .business-introduction .block-wrap ul.back-grey2 li, .business-introduction .block-wrap.block2 ul.back-grey1 li, .business-introduction .block-wrap.block2 ul.back-grey2 li{ padding-top:25px} .business-introduction .block-wrap ul.back-white li{ padding-top:40px} .business-introduction .block-wrap ul.back-grey1 li li, .business-introduction .block-wrap ul.back-grey2 li li, .business-introduction .block-wrap.block2 ul.back-grey1 li li, .business-introduction .block-wrap.block2 ul.back-grey2 li li, .business-introduction .block-wrap ul.back-white li li{ padding-top:0} .support-procedure .back-procedure{ background-size:auto} .support-procedure div em img{ width:auto} .support-procedure div span{ padding:70px 0 0 0; height:193px} .support-procedure div strong{ line-height:26px} .support-procedure p{ margin-top:20px} .support-procedure div span.procedure1{ padding-left:50px} .support-procedure div span.procedure2, .support-procedure div span.procedure3, .support-procedure div span.procedure4, .support-procedure div span.procedure5{ padding-left:63px} .kcva-schedule .month-year{ margin-bottom:30px} .kcva-schedule .month-year strong{ margin:0 20px; font-size:22px} .kcva-schedule .month-year strong span{ margin:0 0 0 15px} ul.cal-head li { font-size:14px} ul.cal-body li span em{ margin-right:3px} .thumb-list.center .center-map{ right:130px} ul.center-infomation{ margin-top:40px} ul.center-infomation li{ padding:28px 30px} ul.center-infomation li span{ margin-right:30px} ul.center-infomation li span.center-tel{ width:35%} ul.center-infomation li span.center-fax{ width:65%} .requisite-area li span,.requisite-area li strong{ padding:25px 30px; line-height:28px} .requisite-area li strong{ font-size:18px} .requisite-area li span{ margin-right:50px} .requisite-area .relevant-center>div{ padding:40px 40px} .requisite-area .relevant-center strong{ font-size:24px} .requisite-area .relevant-center a{ margin-top:30px; padding:12px 30px} section.searching-statutes .searching-subtitle{ font-size:26px} section.searching-statutes .searchForm.searching{ margin:50px 0} ul.searching-list li{ padding:30px 30px} ul.searching-list li span{ font-size:14px; line-height:24px} ul.searching-list li strong{ margin-bottom:25px; font-size:16px} ul.searching-list li span.searching-item{ position:absolute; top:25px; right:30px; margin-bottom:0} ul.searching-list li span.searching-item span{ margin-left:30px; margin-right:0; font-size:14px} section.searching-statutes .searching-result .legal-item{ margin:50px 0} section.searching-statutes .searching-result span.legal-item span{ margin:0 20px} section.searching-statutes .searching-result .legal-contents{ padding:30px 30px; line-height:32px} .related-organization ul li{ margin-top:5%} .related-organization ul li span{ margin-bottom:20px} .related-help ul li { margin-top:40px; margin-left:3.5%; width:48.25%} .related-help ul li span.details{ padding:30px; height:260px} .related-help ul li span strong{ font-size:18px} .related-help ul li span.details span{ font-size:16px; line-height:24px} /* 일정프린트 */ .month-print{ margin:0 auto; width:750px} .month-print h1{ font-weight:500; color:#333; font-size:24px; text-align:center} .month-print table th,.month-print table td{ padding:5px 0; font-size:14px} .month-print table td{ padding:0} .month-print table td span{ width:100%; text-align:center} .month-print td div h2, .month-print td div p, .month-print td span{ display:inline-block; vertical-align:top; line-height:24px} .month-print td div{ vertical-align:top; border-top:1px solid #eee; padding:7px 0 7px 10px} .month-print td div:first-child{ border-top:0} .month-print td div h2{ font-weight:500; color:#333; font-size:15px; width:35%} .month-print td div span{ color:#555; width:10%; text-align:left} .month-print td div p{ width:53%} /* 공모전(희망수기) */ .sns-scrap { margin-top:40px; padding:40px} .sns-scrap strong { margin-bottom:20px; font-size:20px} ul.scrap { margin-top:30px} .event-wrap { padding-top:240px; background-size:auto} .event-wrap.event-1 .gift-image{ right:65px; bottom:-10px} .event-wrap .gift-image img{ width:auto} .event-wrap span { font-size:18px} .event-wrap strong { font-size:22px} ul.event { width:55%} ul.event li { padding:5px 0} ul.event li span { width:70%} ul.event li span.item-title{ width:15%} ul.event li strong { margin-top:-8px; font-size:26px} .hope-intro .reception-period{ width:550px} .hope-intro .reception-period strong{ font-size:20px} .poster-down { margin:30px 0} .poster-down button { padding:15px 30px; font-size:20px} ul.overview li { margin-top:30px} .contents-competition .doc-submitted span{ margin-right:30px} } /* 레이어팝업 */ .layer-popup { top:150px; right:100px} .layer-popup .popup-style{ width:600px} .layer-popup .popup-style>div{ padding-top:0; min-height:200px} .layer-popup .check-group{ bottom:10px; right:15px; padding:0 10px 0} .layer-popup .check-group label{ font-size:16px} .layer-popup .check-group input[type=button]{ padding:0; width:30px; height:30px} .layer-popup .check-group input[type=checkbox]{ width:15px; height:15px} @media only screen and (max-width:768px) { .layer-popup{ left:50%; top:70px; right:auto; margin-left:-45%; width:90%} .layer-popup .popup-style{ width:100%} } @media only screen and (max-width:550px) { .layer-popup .popup-style img{ max-width:100%; height:auto; object-fit:contain} .layer-popup .check-group label{ font-size:15px} .layer-popup .check-group input[type=button]{ width:20px; height:20px; background-size:15px} } /* 서브 콘텐츠 */ .content-hgroup { margin-bottom:45px} .content-hgroup h2.head{ font-size:24px; line-height:36px} .content-hgroup p{ margin-top:20px; line-height:28px} ul.dotlist { margin:20px 0} ul.dotlist li { padding-left:12px; line-height:28px; background-position:0 13px} @media only screen and (max-width:1200px) { .content-hgroup h2.head{ font-size:20px; line-height:30px} } @media only screen and (max-width:1024px) { .content-hgroup{ margin-bottom:30px} } @media only screen and (max-width:768px) { .content-hgroup h2.head{ font-size:18px; line-height:28px} .content-hgroup p{ margin-top:15px; font-size:15px; line-height:24px} ul.dotlist li{ padding-left:10px; font-size:15px; line-height:24px; background-position:0 11px} } @media only screen and (max-width:400px) { .content-hgroup{ margin-bottom:20px} .content-hgroup h2.head{ font-size:17px; line-height:26px} } /* 지원사업 */ .business-support .support-title{ width:38%} .business-support .support-title h3{ font-size:24px} .business-support .support-title p{ margin-top:10px; line-height:26px} .business-support .support-title span{ margin-top:10px; font-size:15px; line-height:22px} .business-support .icon-symbol{ margin-top:25px} .business-support .icon-symbol span{ margin:0 5px; padding:5px; width:56px; height:56px} .business-support .support-title ul{ margin-top:25px} .business-support .support-title ul li{ margin-top:5px; padding-left:10px; font-size:17px; background-position:0 12px} .business-support .fullwidth{ margin-top:80px} .edu-support .edu, .campaign-support .campaign, .facilities-support .facilities, .organizations-support .organizations, .network-support .network, .economical-support .economical, .psychological-support .psychological, .legal-support .legal, .housing-support .housing, .other-support .other{ width:57%} .edu-support,.organizations-support,.network-support,.psychological-support,.legal-support,.housing-support,.other-support{ margin-top:100px} .campaign-support .support-title, .facilities-support .support-title, /*.network-support .support-title,*/ .economical-support .support-title, .legal-support .support-title, .other-support .support-title{ right:0} .network-support .support-title, .edu-support .support-title, .organizations-support .support-title, .psychological-support .support-title, .housing-support .support-title{ left:0} .business-support .swiper-button-prev1,.swiper-button-prev12,.swiper-button-prev13,.swiper-button-prev14,.swiper-button-prev15{ left:auto !important; right:49px !important} .business-support .swiper-button-next1,.swiper-button-next12,.swiper-button-next13,.swiper-button-next14,.swiper-button-next15{ right:0 !important} @media only screen and (max-width:1200px) { .business-support .support-title h3{ font-size:20px} .business-support .support-title p{ font-size:15px; line-height:24px} .business-support .icon-symbol span{ width:45px; height:45px} .business-support .support-title span{ font-size:14px} .business-support .support-title ul li{ font-size:16px} } @media only screen and (max-width:768px) { .business-support .support-title{ position:static} .business-support .support-title h3{ margin-top:20px} .business-support .fullwidth{ margin-top:40px} .business-support .support-title, .edu-support .edu, .campaign-support .campaign, .facilities-support .facilities, .organizations-support .organizations, .network-support .network, .economical-support .economical, .psychological-support .psychological, .legal-support .legal, .housing-support .housing, .other-support .other{ width:100%} .campaign-support .support-title, .facilities-support .support-title, .network-support .support-title, .economical-support .support-title, .legal-support .support-title, .other-support .support-title{ right:auto} .network-support .support-title, .edu-support .support-title, .organizations-support .support-title, .psychological-support .support-title, .housing-support .support-title{ left:auto} .edu-support,.organizations-support,.network-support,.psychological-support,.legal-support,.housing-support,.other-support{ margin-top:50px} .business-support .support-title ul{ margin-top:15px} .business-support .icon-symbol{ margin-top:15px} } @media only screen and (max-width:550px) { .business-support .support-title h3{ margin-top:10px; font-size:18px} .business-support .support-title ul li{ margin-top:5px; font-size:15px; background-position:0 10px} .edu-support,.organizations-support,.network-support,.psychological-support,.legal-support,.housing-support,.other-support{ margin-top:30px} .business-support .icon-symbol span{ width:40px; height:40px} } /* 심리테스트 */ .checklist>img { top:-100px; right:0} .checklist h3 { font-size:24px; line-height:20px} .checklist p { margin-top:30px; line-height:26px} .checklist .button.blue button{ padding:0 60px 0 30px; background-position:80% 50%; border-radius:40px} .checklist .default { margin:50px 0 0} .checklist .default th strong{ padding:10px 25px; font-size:24px} .checklist .default td{ padding:20px 15px} .checklist.depression .default th{ padding:10px 5px} .alram-box { margin-top:50px; padding:20px 30px; border-radius:10px} .alram-box img { margin-right:10px} .alram-box span { line-height:26px} .self-check { margin-top:30px} .self-check img { margin-right:15px} .self-check strong { font-size:22px} .self-check mark { font-size:30px} .self-check p { margin-top:30px; line-height:28px} .layer-body .alram-box{ margin-top:30px} @media only screen and (max-width:1350px) { .checklist>img{ top:-90px; width:150px} .checklist .default th strong{ font-size:21px} } @media only screen and (max-width:1200px) { .checklist>img{ width:130px} .checklist h3{ font-size:22px} .checklist .default{ margin:30px 0 0} .checklist .default th strong{ font-size:18px} .alram-box{ margin-top:30px; padding:20px 20px} } @media only screen and (max-width:900px) { .checklist>img{ display:none} .checklist p{ margin-top:20px} .checklist .default{ margin:20px 0 0} .alram-box{ margin-top:20px} .alram-box span{ font-size:15px; line-height:20px} } @media only screen and (max-width:768px) { .checklist h3{ font-size:20px; line-height:18px} .checklist .default th strong{ padding:5px 15px; font-size:17px} .checklist .default td{ padding:15px 15px} .alram-box{ padding:15px 20px} .self-check{ margin-top:15px} .self-check img{ margin-right:10px} .self-check strong{ font-size:18px} .self-check mark{ font-size:26px} .self-check p{ margin-top:20px; font-size:15px; line-height:24px} .layer-body .alram-box{ margin-top:20px} } @media only screen and (max-width:550px) { .checklist p{ font-size:15px; line-height:20px} .checklist .default th strong{ font-size:16px} } @media only screen and (max-width:400px) { .self-check img{ margin-right:5px; width:25px} .self-check strong{ font-size:16px} .self-check mark{ font-size:20px} } /* 후원안내 */ .support-guide p { line-height:28px} .support-guide .goal{ margin-bottom:45px; padding:0 70px; height:300px} .support-guide .goal h3{ font-size:24px; line-height:36px} .support-guide .goal span{ margin-top:20px; font-size:17px; line-height:28px} .support-guide .support{ margin-top:45px} .support .dotbox{ margin-left:3.5%; padding:35px 0; width:31%} .support .dotbox:first-child{ margin-left:0; margin-top:0} .support .dotbox:nth-child(2){ margin-top:40px} .support .dotbox h4{ margin-bottom:20px} .support .dotbox h4 img{ margin-right:10px} .support .dotbox h4 strong{ font-size:24px} .support .dotbox a,.support .dotbox span,.support .dotbox strong{ font-size:17px; line-height:30px} .support-guide .dotbox .alram-box{ margin-top:10px; padding:10px 15px} .support-guide .dotbox .alram-box span{ font-size:14px; line-height:20px} .support-guide .summary.support{ margin-top:60px} .support-guide .summary.support strong{ font-size:24px} .support.col2 .dotbox{ width:48.25%} .support.col2 .dotbox:nth-child(2){ padding-bottom:35px; margin-top:0} @media only screen and (max-width:1200px) { .support .dotbox{ padding:20px 0} .support .dotbox h4{ margin-bottom:10px} .support .dotbox h4 img{ margin-right:7px; width:40px} .support .dotbox h4 strong{ font-size:20px} .support .dotbox a,.support .dotbox span,.support .dotbox strong{ font-size:16px; line-height:28px} .support.col2 .dotbox:nth-child(2){ padding-bottom:20px} .support-guide .summary.support strong{ font-size:20px} } @media only screen and (max-width:768px) { .support-guide p{ font-size:15px; line-height:24px} .support-guide .goal{ margin-bottom:25px; padding:0 40px; height:200px; background-size:cover; background-position:50% 50%} .support-guide .goal h3{ font-size:20px; line-height:30px} .support-guide .goal span{ margin-top:15px; font-size:15px; line-height:22px} .support-guide .support{ margin-top:25px} .support .dotbox{ margin-left:0; margin-top:15px; width:100%} .support .dotbox:nth-child(2){ margin-top:15px} .support .dotbox h4 img{ width:30px} .support .dotbox h4 strong{ font-size:18px} .support .dotbox a,.support .dotbox span,.support .dotbox strong{ font-size:15px; line-height:24px} .support-guide .summary.support{ margin-top:30px} .support-guide .summary.support strong{ font-size:18px; line-height:26px} .support.col2 .dotbox:nth-child(2){ margin-left:3.5%} } @media only screen and (max-width:550px) { .support.col2 .dotbox,.support.col2 .dotbox:nth-child(2){ margin-left:0; width:100%} .support.col2 .dotbox:nth-child(2){ margin-top:15px} } @media only screen and (max-width:400px) { .support-guide .goal{ margin-bottom:20px; padding:0 20px; height:180px} .support-guide .goal h3{ font-size:18px; line-height:28px} .support-guide .summary.support strong{ font-size:17px} } /* 후원자소개 */ .sponsor h3 { margin-bottom:20px; font-size:24px; line-height:26px} .sponsor p { width:60%; line-height:28px} .sponsor .support { margin-top:45px} .sponsor .support .dotbox{ margin-left:5%; margin-top:5%; padding:35px 20px; width:47.5%; height:360px} .sponsor .support .dotbox:first-child{ margin-left:0; margin-top:0} .sponsor .support .dotbox:nth-child(odd){ margin-left:0} .sponsor .support .dotbox:nth-child(2){ margin-top:0} .sponsor .support .dotbox h4 img{ margin-right:0} .sponsor .support .dotbox h4 strong{ margin-top:30px} @media only screen and (max-width:1200px) { .sponsor .support .dotbox{ padding:20px; height:330px} .sponsor .support .dotbox h4 img{ width:250px} .sponsor .support .dotbox h4 strong{ margin-top:20px} } @media only screen and (max-width:768px) { .sponsor{ background-position:100% 50px; background-size:220px} .sponsor h3{ font-size:20px; line-height:30px} .sponsor p{ width:70%; font-size:15px; line-height:24px} .sponsor .support{ margin-top:25px} .sponsor .support .dotbox{ margin-top:20px; width:100%; height:auto} .sponsor .support .dotbox:nth-child(2){ margin-top:20px; margin-left:0} .sponsor .support .dotbox:nth-child(odd),.sponsor .support .dotbox:nth-child(even){ margin-left:0} } @media only screen and (max-width:550px) { .sponsor{ background-image:none} .sponsor p{ width:100%} } @media only screen and (max-width:400px) { .sponsor h3{ font-size:18px; line-height:28px} .sponsor .support .dotbox h4 img{ width:200px} } /* 홍보대사 */ #ambassador1,#ambassador2,#ambassador3,#ambassador4{ display:none} .ambassador>button { display:block; position:absolute; right:40px; width:25px; height:25px; border:0; background:transparent url(/images/common/close-dark.png) 50% 50% no-repeat; text-indent:-9999px; cursor:pointer} .ambassadors .content-hgroup p{ width:70%} .ambassadors .ambassador{ position:absolute; z-index:900; left:0; padding:30px 50px} .ambassadors #ambassador1.ambassador{ bottom:-140px} .ambassadors #ambassador2.ambassador{ bottom:-60px} .ambassadors #ambassador3.ambassador{ bottom:-85px} .ambassadors #ambassador4.ambassador{ bottom:-470px} /*.ambassadors .ambassador span{ width:48%} .ambassadors .ambassador div{ right:0; bottom:0; width:47%}*/ .ambassadors .ambassador div h3{ padding-top:43px; height:75px} .ambassadors #ambassador4.ambassador div h3{ background-position:45% 0} .ambassadors .ambassador div h3 span{ margin-right:10px; width:4px; height:25px} .ambassadors .ambassador div h3 strong{ font-size:24px} .ambassadors .ambassador div p{ margin-top:20px; line-height:28px} .ambassadors .support{ margin-top:45px} .ambassadors .support .dotbox{ margin:0; padding:25px 35px; width:100%} .ambassadors .support .dotbox li{ margin-top:10px; padding-left:13px; line-height:24px; background-position:0 13px} .ambassadors .support .dotbox li:nth-child(1),.ambassadors .support .dotbox li:nth-child(2){ margin-top:0} .ambassadors .support .dotbox li:nth-child(odd){ width:58%} .ambassadors .support .dotbox li:nth-child(even){ width:40%} .ambassadors .ambassador-list{ flex-wrap:wrap; margin-bottom:300px} .ambassadors .ambassador-list .ambassador4{ margin-top:60px} .ambassadors .ambassador-list div{ width:calc(33.33% - 54px)} .ambassadors .ambassador-list div p{ margin-top:30px; line-height:1.6em; height:3.2em} .ambassadors .ambassador-list div strong{ margin:-30px 0 0; padding-right:25px; font-size:20px; line-height:18px} .ambassadors .ambassador-list .ambassador4 strong{ padding-right:65px} .ambassadors .ambassador-list div button{ bottom:-5px; right:28%; width:28px; height:28px} @media only screen and (max-width:1350px) { .ambassadors .content-hgroup p{ width:65%} } @media only screen and (max-width:1300px) { .ambassadors #ambassador1.ambassador{ bottom:-180px} .ambassadors #ambassador2.ambassador{ bottom:-80px} .ambassadors #ambassador3.ambassador{ bottom:-155px} .ambassadors .ambassador-list div strong{ padding-left:0} .ambassadors .ambassador div h3{ background-position:30% 0} } @media only screen and (max-width:1200px) { .ambassadors{ background-position:100% 50px; background-size:280px} .ambassadors .ambassador{ margin-top:30px} /*.ambassadors .ambassador{ padding-top:70px} .ambassadors .ambassador span{ width:40%} .ambassadors .ambassador div{ width:55%}*/ .ambassadors .ambassador div h3{ padding-top:23px; height:55px; background-size:180px} .ambassadors .ambassador div h3 span{ height:20px} .ambassadors .ambassador div h3 strong{ font-size:22px} .ambassadors .ambassador-list div p{ margin-top:15px; font-size:15px; line-height:1.4em; height:2.8em} .ambassadors .ambassador-list div strong{ font-size:18px; line-height:16px} .ambassadors .ambassador-list div button{ bottom:-1px; width:20px; height:20px; background-size:20px} } @media only screen and (max-width:1100px) { .ambassadors{ background-image:none} .ambassadors .content-hgroup p{ width:100%} /*.ambassadors .ambassador{ padding-top:0} .ambassadors .ambassador span,.ambassadors .ambassador div{ width:100%} .ambassadors .ambassador div{ margin-top:30px; position:static; right:auto; bottom:auto}*/ .ambassadors .ambassador div h3{ background-position:35% 0} .ambassadors .ambassador-list div{ width:calc(34% - 40px)} } @media only screen and (max-width:1024px) { .ambassadors .ambassador div h3{ background-position:28% 0} .ambassadors .ambassador-list div strong{ font-size:17px} .ambassadors .ambassador-list div button{ right:31%} } @media only screen and (max-width:768px) { .ambassadors #ambassador1.ambassador,.ambassadors #ambassador2.ambassador{ bottom:auto; top:200px} .ambassadors #ambassador3.ambassador,.ambassadors #ambassador4.ambassador{ bottom:-30px} .ambassador>button{ right:20px} .ambassadors .ambassador{ padding:20px 20px} .ambassadors .ambassador div h3{ background-position:35% 5px; background-size:150px} .ambassadors .ambassador div p{ margin-top:15px; font-size:15px; line-height:24px} .ambassadors .support{ margin-top:30px} .ambassadors .support .dotbox{ padding:25px} .ambassadors .support .dotbox li{ padding-left:10px; font-size:15px; background-position:0 12px} .ambassadors .ambassador-list{ margin-bottom:30px} .ambassadors .ambassador-list div{ width:calc(50% - 50px)} .ambassadors .ambassador-list div span{ text-align:center} .ambassadors .ambassador-list div img{ display:inline-block} .ambassadors .ambassador-list div.ambassador3,.ambassadors .ambassador-list div.ambassador4{ margin-top:50px} } @media only screen and (max-width:670px) { .ambassadors #ambassador4.ambassador div h3{ background-image:none} } @media only screen and (max-width:550px) { .ambassadors .ambassador div h3{ padding-top:10px; height:40px; background-position:38% 0; background-size:130px} .ambassadors .ambassador div h3 span{ height:15px} .ambassadors .ambassador div h3 strong{ font-size:20px} .ambassadors .support .dotbox li:nth-child(2){ margin-top:10px} .ambassadors .support .dotbox li:nth-child(odd),.ambassadors .support .dotbox li:nth-child(even){ width:100%} .ambassadors .ambassador-list div{ width:calc(50% - 30px)} .ambassadors .ambassador-list div.ambassador3,.ambassadors .ambassador-list div.ambassador4{ margin-top:30px} } @media only screen and (max-width:480px) { .ambassadors #ambassador2.ambassador{ top:400px} .ambassadors .ambassador div h3{ background-position:50% 0} .ambassadors .ambassador-list div{ width:calc(100% - 0px)} .ambassadors .ambassador-list div.ambassador2{ margin-top:30px} .ambassadors .ambassador-list div button{ right:38%} } @media only screen and (max-width:400px) { .ambassadors .ambassador div h3{ background-position:70% 0} .ambassadors .support .dotbox{ padding:20px} .ambassadors .ambassador-list div button{ right:35%} } /* 지원절차 */ .application-process>div{ margin:40px 0 0; padding:45px} .application-process>div.process2 .process-info,.application-process>div.process3 .process-info,.application-process>div.process5 .process-info{ width:100%} .application-process>div.process1{ margin-top:0} .application-process>div.process3{ padding:45px 0} .process-info .process-title{ margin-bottom:40px} .process-info .process-title h3{ font-size:24px} .process-info .process-title mark{ font-size:34px} .process-info .process-title strong{ margin-right:30px; font-size:24px} .process-info p { line-height:28px} .process1-1 { top:0; right:0} .process1-2 { margin-top:55px} .process-info ul { margin-bottom:20px} .process-info ul li { margin-left:2%; width:26%} .process-info ul li:first-child{ margin-left:0; width:44%} .process-info ul li strong{ margin-bottom:15px; font-size:19px} .process-info ul li span span{ padding-left:10px; line-height:28px; background-position:0 13px} .application-process>div.process1 .process1-m, .application-process>div.process2 .process2-m, .application-process>div.process3 .process-info .process3-m{ display:none} .application-process>div.process3 .process-info{ text-align:center} .application-process>div.process3 .process-info img{ display:inline-block} .application-process>div.process3 .process-info .process-title{ padding:0 45px; text-align:left} .application-process>div.process3 .alram-box{ margin-top:30px; padding:0 45px; background:transparent} .application-process>div.process4 .process-info ul{ margin-bottom:40px} .application-process>div.process4 .process-info ul li, .application-process>div.process4 .process-info ul li:first-child{ margin-left:0; width:100%} .process-info a,.process-info button{ padding:0 50px 0 20px; height:45px; line-height:42px; border-radius:25px; background-position:90% 48%} .application-process>div.process5 a,.application-process>div.process5 button{ padding:0 20px; font-size:16px; background-image:none} .process-info .form-center span span{ margin:0 10px} .default.online-form th,.default.online-form td{ padding:5px 10px; font-size:14px; text-align:left} .default.online-form th{ padding:5px 20px} .default.online-form td input[type=text],.default.online-form td textarea{ width:100%; font-size:14px} @media only screen and (max-width:1300px) { .application-process>div.process1 .process1-1{ width:380px} .process1-2{ margin-top:40px; width:450px} .application-process>div.process3{ padding:45px} .application-process>div.process3 .process-info .process-title,.application-process>div.process3 .alram-box{ padding:0} .application-process>div.process4 .process1-1{ width:300px} } @media only screen and (max-width:1200px) { .application-process>div{ padding:30px} .process-info .process-title{ margin-bottom:25px} .process-info .process-title h3{ font-size:20px} .process-info .process-title mark{ font-size:30px} .process-info .process-title strong{ margin-right:20px; font-size:20px} .process-info p,.process-info ul li span span{ font-size:15px; line-height:24px} .process-info ul li strong{ margin-bottom:10px; font-size:17px} .process-info ul li span span{ background-position:0 10px} .application-process>div.process1 .process1-1{ width:350px} .application-process>div.process3{ padding:30px} .application-process>div.process3 .process-info .process-title,.application-process>div.process3 .alram-box{ padding:0} .application-process>div.process4 .process1-1{ width:250px} .application-process>div.process3 .alram-box span{ font-size:15px; line-height:24px} .process-info .form-center span span{ font-size:15px} .process-info .form-center img{ width:25px} } @media only screen and (max-width:1100px) { .process-info p br, .application-process>div.process1 .process1-1,.application-process>div.process1 .process1-2{ display:none} .application-process>div.process1{ background-size:cover} .application-process>div.process1 .process1-m{ display:inline-block; margin-top:40px} .application-process>div.process3 .process-info .process3-p{ display:none} .application-process>div.process3 .process-info .process3-m{ display:inline-block} .process-info ul li:first-child{ margin-left:0; width:58%} .process-info ul li:nth-child(2){ width:40%} .process-info ul li:nth-child(3){ margin-left:0; margin-top:30px; width:100%} .application-process>div.process4 .process-info ul{ margin-bottom:20px} .application-process>div.process4 .process1-1{ display:none} .process-info a,.process-info button{ padding:0 45px 0 15px; height:40px; line-height:37px; font-size:14px; border-radius:18px; background-position:90% 47%; background-size:19px} .application-process>div.process5 a,.application-process>div.process5 button{ padding:0 15px; font-size:14px} } @media only screen and (max-width:768px) { .application-process>div.process2 img{ display:none} .application-process>div.process2 .process2-m{ display:block} .process-info ul li:first-child,.process-info ul li:nth-child(2){ margin-left:0; width:100%} .process-info ul li:nth-child(2),.process-info ul li:nth-child(3){ margin-top:20px} .process-info ul li strong{ font-size:16px} .process-info .form-center .form,.process-info .form-center .find{ width:100%} .process-info .form-center .find{ margin-top:15px} } @media only screen and (max-width:550px) { .application-process>div{ margin:20px 0 0; padding:20px} .process-info .process-title h3{ font-size:18px} .process-info .process-title mark{ font-size:26px} .process-info .process-title strong{ font-size:18px} .application-process>div.process3{ padding:20px} .application-process>div.process3 .process-info .process-title,.application-process>div.process3 .alram-box{ padding:0} } @media only screen and (max-width:400px) { .application-process>div.process5 a,.application-process>div.process5 button{ display:block; margin-top:10px} .application-process>div.process5 a{ width:105px} } /* 지원현황 */ .status-support .bar-graph{ margin-bottom:50px; width:73%; height:260px} .status-support .vertical-graph{ height:320px} .status-support .detail-support{ margin-bottom:70px} .status-support .detail-support>img{ right:0; bottom:90px} .status-support .no-data{ padding:35px; text-align:center; background:#f8f8f8; border:1px solid #e3e3e3; border-radius:10px} .detail-support .support-box{ padding:35px 15px 35px 35px; width:49%} .detail-support .support-box em{ margin-right:20px; width:55px; height:55px} .detail-support .support-box mark{ margin:0 3px; font-size:26px} .detail-support .support-box span,.detail-support .support-box strong{ font-size:20px} .detail-support .support-box strong{ margin-left:10px} .detail-support .support-box.number mark:last-child{ margin-left:20px} @media only screen and (max-width:1350px) { .status-support .bar-graph{ width:80%} .status-support .detail-support>img{ width:200px} .detail-support .support-box{ padding:35px 20px} .detail-support .support-box em{ margin-right:15px; width:45px; height:45px} .detail-support .support-box em img{ width:20px} .detail-support .support-box mark{ font-size:24px} .detail-support .support-box span,.detail-support .support-box strong{ font-size:18px} } @media only screen and (max-width:1200px) { .status-support .bar-graph{ width:78%} .status-support .detail-support>img{ bottom:110px} .detail-support .support-box{ padding:30px 30px} .detail-support .support-box mark{ margin-left:0} .detail-support .support-box mark{ font-size:21px} .detail-support .support-box span,.detail-support .support-box strong{ font-size:17px} .detail-support .support-box strong{ display:block; margin-left:0} } @media only screen and (max-width:1024px) { .status-support .bar-graph{ width:80%} .status-support .detail-support>img{ bottom:80px} .detail-support .support-box{ padding:30px 15px} .detail-support .support-box em{ width:40px; height:40px} .detail-support .support-box em img{ width:15px} .detail-support .support-box mark{ font-size:20px} .detail-support .support-box span,.detail-support .support-box strong{ font-size:16px} .detail-support .support-box strong{ display:inline-block; margin-left:10px} } @media only screen and (max-width:800px) { .status-support .bar-graph{ margin-bottom:30px} .status-support .detail-support{ margin-bottom:40px} .status-support .detail-support>img{ width:150px} .detail-support .support-box mark{ font-size:18px} .detail-support .support-box span,.detail-support .support-box strong{ font-size:15px} } @media only screen and (max-width:768px) { .status-support .no-data{ padding:30px 10px; font-size:15px} .status-support .bar-graph{ width:100%} .status-support .detail-support>img{ bottom:20px} .detail-support .support-box{ padding:20px 30px; width:100%} } @media only screen and (max-width:550px) { .status-support .bar-graph{ margin-bottom:20px} .status-support .detail-support{ margin-bottom:30px} .status-support .detail-support>img{ display:none} } @media only screen and (max-width:390px) { .detail-support .support-box{ padding:20px 15px} .detail-support .support-box mark{ font-size:17px} .detail-support .support-box span,.detail-support .support-box strong{ font-size:14px} } /* 인사말 */ .greeting .content-hgroup p span{ display:block} .summary p,.greeting .say-caption p{ line-height:28px} .summary strong,.greeting .say-caption strong{ margin-bottom:30px; font-size:24px; line-height:34px} .greeting .say-hello .ceo-caption{ bottom:0; right:0; width:40%} .greeting .say-hello .ceo-caption span span, .greeting .say-hello .ceo-caption span strong{ margin-top:15px; font-size:18px} .greeting .say-hello .ceo-caption span strong mark{ margin-left:15px; font-size:24px} .greeting .say-hello .say-caption{ width:60%} .greeting ul { margin:100px 0} .greeting ul li { width:33%} .greeting ul li:nth-child(2){ width:34%} .greeting ul li>div img{ margin-right:10px} .greeting ul li>div strong{ font-size:24px} .greeting ul li span,.greeting ul li mark{ font-size:18px; line-height:30px} .greeting ul li span{ margin-top:30px} @media only screen and (max-width:1200px) { .summary strong,.greeting .say-caption strong{ font-size:20px; line-height:30px} .greeting .say-hello .ceo-caption{ width:30%} .greeting .say-hello .say-caption{ width:65%} .greeting ul{ margin:70px 0} .greeting ul li>div img{ width:45px} .greeting ul li>div strong{ font-size:22px} .greeting ul li span,.greeting ul li mark{ font-size:17px; line-height:28px} } @media only screen and (max-width:1024px) { .summary strong,.greeting .say-caption strong{ margin-bottom:20px} .greeting .say-hello .ceo-caption{ width:26%} .greeting .say-hello .ceo-caption span span, .greeting .say-hello .ceo-caption span strong{ margin-top:10px; font-size:16px} .greeting .say-hello .ceo-caption span strong mark{ font-size:20px} .greeting ul li span{ margin-top:20px} .greeting ul li span,.greeting ul li mark{ font-size:16px; line-height:26px} } @media only screen and (max-width:768px) { .greeting .content-hgroup p span{ display:inline-block} .summary strong,.greeting .say-caption strong{ font-size:18px; line-height:28px} .summary p,.greeting .say-caption p{ font-size:15px; line-height:24px} .greeting .say-hello .ceo-caption span span, .greeting .say-hello .ceo-caption span strong{ font-size:15px} .greeting .say-hello .ceo-caption span strong mark{ font-size:18px} .greeting ul{ margin:40px 0} .greeting ul li{ padding:20px} .greeting ul li,.greeting ul li:nth-child(2){ width:100%; border:1px solid #e3e3e3; border-top:0} .greeting ul li:nth-child(1){ border-top:1px solid #e3e3e3; border-left:1px solid #e3e3e3} .greeting ul li span,.greeting ul li mark{ display:inline-block; vertical-align:top; font-size:15px; line-height:24px; text-align:left} .greeting ul li span{ float:left; margin:5px 0 0; width:65%} .greeting ul li mark{ margin-left:10px} .greeting ul li>div{ float:left; justify-content:start; width:35%} .greeting ul li>div img{ width:30px} .greeting ul li>div strong{ font-size:20px} } @media only screen and (max-width:550px) { .greeting .say-hello .ceo-caption{ float:left; position:static; bottom:auto; right:auto; margin-top:30px; width:55%; text-align:left} .greeting .say-hello .say-caption{ float:right; width:100%} .greeting .say-hello .ceo-caption span, .greeting .say-hello .ceo-caption span span, .greeting .say-hello .ceo-caption strong{ display:inline-block; text-align:left} .greeting .say-hello .ceo-caption span span, .greeting .say-hello .ceo-caption span strong{ font-size:14px} .greeting .say-hello .ceo-caption span strong{ margin-left:5px} .greeting .say-hello .ceo-caption span strong mark{ margin-left:8px; font-size:16px} .greeting ul li span{ width:55%} .greeting ul li mark{ display:block; margin-left:0} .greeting ul li>div{ width:45%} .greeting ul li>div strong{ font-size:18px} } @media only screen and (max-width:400px) { .summary strong,.greeting .say-caption strong{ font-size:17px; line-height:26px} .greeting .say-hello .ceo-caption{ width:70%} .greeting ul li{ padding:15px 10px} .greeting ul li>div strong{ font-size:16px} } @media only screen and (max-width:360px) { .greeting .say-hello .ceo-caption{ width:80%} } /* 설립목적 */ .introduce .content-hgroup h2.head span{ display:block} .introduce .last { margin-top:45px} .introduce .introduceL{ width:30%} .introduce .introduceL .button-find{ padding:10px 25px 13px; border-radius:25px} .introduce .introduceR{ width:62%} .introduce .introduceR img{ margin:45px 0} ul.help-item { margin:40px 0 0} ul.help-item li { padding:10px; margin:0 6px; width:140px; height:140px} ul.help-item li span{ padding:30px 20px} ul.help-item li strong{ font-size:18px; line-height:26px} @media only screen and (max-width:1350px) { ul.help-item{ margin-top:30px; padding:0 100px} ul.help-item li{ margin:10px 10px} ul.help-item li span{ padding:20px} } @media only screen and (max-width:1200px) { .introduce .last{ margin-top:30px} .introduce .introduceL img{ width:200px} .introduce .introduceR img{ margin:30px 0} ul.help-item{ padding:0 50px} ul.help-item li strong{ font-size:17px; line-height:24px} } @media only screen and (max-width:1024px) { .introduce .introduceR{ width:64%} ul.help-item{ padding:0 65px} ul.help-item li strong{ font-size:16px; line-height:22px} } @media only screen and (max-width:768px) { .introduce .last{ margin-top:20px} .introduce .content-hgroup h2.head span{ display:inline-block; width:5px} .introduce .last .introduceL .summary strong{ display:inline-block; vertical-align:top; margin-right:30px} .introduce .introduceL,.introduce .introduceR{ width:100%} .introduce .introduceL img{ margin-bottom:30px} ul.help-item{ padding:0 17%} ul.help-item li strong{ font-size:15px; line-height:20px} } @media only screen and (max-width:550px) { ul.help-item{ padding:0 12%} } @media only screen and (max-width:450px) { ul.help-item{ padding:0} ul.help-item li{ width:130px; height:130px} } /* 심볼안내 */ .symbol .symbol-concept.last{ margin-top:70px} .symbol .content-hgroup p{ width:65%} .symbol .conceptL { width:57.5%} .symbol .conceptR { width:25%} .symbol .symbol-box { height:220px} .symbol .symbol-concept ul li{ margin-left:4%; width:48%} .symbol .color-system span{ margin-top:20px; height:70px} .slogan h3 { font-size:50px; line-height:70px} .slogan h3 span { display:block} .symbol .conceptL .symbol-box.center strong{ margin-left:15px; font-size:24px; line-height:30px; font-weight:700} .symbol .conceptL ul li .symbol-box.center>div{ text-align:center} .symbol .conceptL ul li .symbol-box.center strong{ display:block; margin:10px 0 0; font-size:18px; line-height:22px} .symbol .symbol-concept.download a{ margin:0 10px; padding:15px 30px 18px} @media only screen and (max-width:1350px) { .symbol .conceptR{ width:27%} .slogan h3{ font-size:48px; line-height:64px} .symbol .symbol-box{ padding:0 30px} .symbol .symbol-concept.last .symbol-box{ padding:0 15px} } @media only screen and (max-width:1200px) { .symbol .symbol-concept.last{ margin-top:50px} .symbol .conceptR{ width:30%} .slogan h3{ font-size:40px; line-height:60px} .symbol .symbol-concept.download a{ margin:0 5px; padding:13px 15px 16px; font-size:15px} } @media only screen and (max-width:768px) { .symbol .symbol-concept.last{ margin-top:30px} .symbol .conceptL{ width:60%} .slogan h3{ font-size:36px; line-height:50px} .symbol .conceptL .symbol-box.center img{ width:90px} .symbol .conceptL .symbol-box.center strong{ font-size:22px; line-height:28px} .symbol .conceptL ul li .symbol-box.center strong{ font-size:16px; line-height:20px} .symbol .symbol-concept.download a{ display:block; margin:0 auto; width:70%} .symbol .symbol-concept.download a:first-child{ margin-bottom:10px} } @media only screen and (max-width:550px) { .symbol .content-hgroup p, .symbol .conceptL,.symbol .conceptR{ width:100%} .symbol .conceptR{ margin-top:30px} .symbol .symbol-concept.last .symbol-box{ padding:15px} .symbol .symbol-box{ height:180px} .symbol .color-system span{ margin-top:0; width:48%} .symbol .color-system span:first-child{ float:left} .symbol .color-system span:last-child{ float:right} .slogan h3 span{ display:inline-block; width:10px} .slogan h3{ font-size:30px; line-height:40px} .symbol .symbol-concept.download a{ width:90%} } @media only screen and (max-width:400px) { .symbol .symbol-box{ height:150px} .slogan h3{ font-size:26px; line-height:36px} .symbol .symbol-concept.download a{ width:100%} } /* 조직도 */ /* 오시는길 */ ul.info-address li { margin-top:10px} ul.info-address li em,ul.info-address li img,ul.info-address li span,ul.info-address li strong{ line-height:28px} ul.info-address li em{ width:110px} ul.info-address li em img{ margin-right:13px} .kcva-info { margin-top:10px; margin-left:45px; padding:10px 25px} .kcva-info>div { margin:10px 0} .kcva-info>div strong{ padding-left:10px; width:80px; background-position:0 13px} @media only screen and (max-width:1200px) { .kcva-info>div .last{ width:85%} } @media only screen and (max-width:768px) { .kcva-info{ padding:5px 15px} ul.info-address li em,ul.info-address li img,ul.info-address li span,ul.info-address li strong{ font-size:15px; line-height:24px} ul.info-address li em{ width:100px} ul.info-address li strong{ width:75%} ul.info-address li .kcva-info>div strong{ display:block; width:auto; background-position:0 11px} .kcva-info>div .last{ width:100%} } @media only screen and (max-width:450px) { ul.info-address li{ margin-top:7px} ul.info-address li strong{ width:70%} } @media only screen and (max-width:400px) { ul.info-address li strong{ width:63%} } /* 센터위원회소개 */ .committee .committee-wrap{ margin-top:100px} .committee .committee-wrap.first{ margin-top:0} .committee-wrap .subcommittee{ width:50%} .committee-wrap .subcommittee.full{ width:100%} .committee-wrap .subcommittee-image{ width:45%} .committee-wrap .subcommittee.subcommittee.halfL,.committee-wrap .subcommittee.subcommittee.halfR{ width:48%} .committee-wrap .subcommittee .subcommittee-title{ margin-top:30px} .committee-wrap .subcommittee .subcommittee-title:first-child{ margin-top:0} .committee-wrap .subcommittee .subcommittee-title h3{ font-size:24px} .committee-wrap .subcommittee .subcommittee-title p{ margin-top:10px; font-size:17px; line-height:28px} .committee-wrap .subcommittee .subcommittee-title ul{ margin-top:15px} .committee-wrap .subcommittee .subcommittee-title ul li{ margin-top:5px; padding-left:10px; background-position:0 12px} .committee-wrap .subcommittee .default thead th, .committee-wrap .subcommittee .default tfoot th, .committee-wrap .subcommittee .default th{ color:#505050; font-weight:300; background-color:#fff} @media only screen and (max-width:1200px) { .committee .committee-wrap{ margin-top:60px} .committee-wrap .subcommittee{ width:55%} .committee-wrap .subcommittee-image{ width:38%} .committee-wrap .subcommittee .subcommittee-title h3{ font-size:20px} .committee-wrap .subcommittee .subcommittee-title p{ font-size:16px; line-height:26px} } @media only screen and (max-width:768px) { .committee .committee-wrap{ margin-top:40px} .committee-wrap .subcommittee-image{ margin-top:15px} .committee-wrap .subcommittee-image.R{ text-align:left} .committee-wrap .subcommittee,.committee-wrap .subcommittee-image{ width:100%} .committee-wrap .subcommittee .subcommittee-title p{ font-size:15px; line-height:24px} .committee-wrap .subcommittee .subcommittee-title ul li{ margin-top:5px; font-size:15px; background-position:0 10px} } @media only screen and (max-width:550px) { .committee-wrap .subcommittee .subcommittee-title h3{ font-size:18px} .committee-wrap .subcommittee.subcommittee.halfL,.committee-wrap .subcommittee.subcommittee.halfR{ width:100%} } /* 2023.12.15 개인정보처리방침 추가 */ ul.labeling{ display:flex; flex-wrap:wrap; justify-content:space-between} ul.labeling li,ul.labeling li:first-child strong{ display:flex; justify-content:center; align-items:center; width:calc(33.333% - 0px); height:180px; border-bottom:1px solid #e3e3e3; border-left:1px solid #e3e3e3} ul.labeling li:first-child,ul.labeling li:first-child strong{ width:100%; height:50px; text-align:center; border:0} ul.labeling li:nth-child(2),ul.labeling li:nth-child(5){ border-left:0} ul.labeling li:first-child strong{ font-weight:500; color:#202020; background:#f5f5f5; border-top:1px solid #1b4bba; border-bottom:1px solid #e3e3e3} ul.labeling figure{ margin:0; width:100%; text-align:center} ul.labeling figure figcaption{ margin-top:5px} ul.labeling.list{ margin:40px 0} ul.labeling.list li{ padding:20px 0; width:100%; height:auto} ul.labeling.list li:first-child{ padding:0} ul.labeling.list li ul.list-item{ display:flex; flex-wrap:wrap; width:80%} ul.labeling.list li ul.list-item li{ justify-content:flex-start; padding:0; height:40px; border:0} ul.labeling.list li ul.list-item li:nth-child(odd){ width:50%} ul.labeling.list li ul.list-item li:nth-child(even){ width:50%} ul.labeling.list li ul.list-item li:last-child{ width:100%} ul.labeling.list li ul.list-item li a{ color:#505050; line-height:20px; text-decoration:none} section.terms .summary.label{ display:flex; align-items:center; margin-bottom:15px} section.terms .summary.label h4{ margin:0} section.terms .summary.label img{ margin-right:10px; width:40px} section.terms ul li{ padding-left:0; background-image:none} section.terms ul li a{ color:#202020; text-decoration:underline} section.terms .summary.label h1{ margin:0} section.terms .default{ margin:20px 0} section.terms .default thead th{ border-top:1px solid #1d99d6; text-align:center} section.terms .default th,section.terms .default td{ border:1px solid #e3e3e3; text-align:left} section.terms .default.center th,section.terms .default.center td{ text-align:center} .open-url{ display:inline-block; vertical-align:middle; width:20px; height:20px; background:#fff url(/images/common/open-url.png) center no-repeat; text-indent:-9999px} @media only screen and (max-width:1024px) { ul.labeling.list{ margin:30px 0} ul.labeling.list li ul.list-item{ width:90%} section.terms .default th,section.terms .default td{ font-size:14px ! important; line-height:22px ! important} } @media only screen and (max-width:768px) { ul.labeling figure{ padding:0 15px} ul.labeling figure img{ width:65px} ul.labeling li{ height:160px} ul.labeling li:first-child,ul.labeling li:first-child strong{ height:40px} ul.labeling.list li{ height:auto} ul.labeling.list li ul.list-item{ width:100%} ul.labeling.list li ul.list-item li{ height:30px} } @media only screen and (max-width:550px) { section.terms p,ul.labeling p{ font-size:14px; line-height:18px} ul.labeling li{ width:calc(50% - 0px)} ul.labeling li:nth-child(4),ul.labeling li:nth-child(6){ border-left:0} ul.labeling li:nth-child(5){ border-left:1px solid #e3e3e3} ul.labeling.list li ul.list-item li:nth-child(odd), ul.labeling.list li ul.list-item li:nth-child(even){ width:100%} ul.labeling.list li ul.list-item li a{ font-size:14px; line-height:22px} section.terms .summary.label img{ width:30px} } /* 일정프린트(인쇄용) */ @media print and (max-width: 800px) { html { background: #fff !important; } body { color: #555 !important; } a { color: inherit; } /* a:not(#google-new-logo)::after { content: ' (' attr(href) ')'; text-decoration: none; } */ abbr::after, acronym::after { content: ' (' attr(title) ')'; } caption { overflow: auto; position: static; clip: auto; width: auto; height: auto; margin: auto; padding: auto; border: auto; } .month-print{ margin:0 auto; width:750px} .month-print h1{ font-weight:700; color:#333; font-size:24px; text-align:center} .month-print table th,.month-print table td{ padding:5px 0; font-size:14px} .month-print table td{ padding:0} .month-print table td span{ width:100%; text-align:center} .month-print td div h2, .month-print td div p, .month-print td span{ display:inline-block; vertical-align:top; line-height:24px} .month-print td div{ vertical-align:top; border-top:1px solid #eee; padding:7px 0 7px 10px} .month-print td div:first-child{ border-top:0} .month-print td div h2{ font-weight:700; color:#333; font-size:15px; width:35%} .month-print td div span{ color:#555; width:10%; text-align:left} .month-print td div p{ width:53%} }