/* ===================== */ /* === 작성자 : dj2 ======= */ /* ===================== */ @font-face { font-family: 'GothamBold'; src: url('../fonts/GothamBold.eot?#iefix') format('../fonts/embedded-opentype'), url('../fonts/GothamBold.woff') format('woff'), url('../fonts/GothamBold.ttf') format('truetype'), url('../fonts/GothamBold.svg#GothamBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham_mediumregular'; src: url('../fonts/gotham-medium-webfont.eot'); src: url('../fonts/gotham-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/gotham-medium-webfont.woff2') format('woff2'), url('../fonts/gotham-medium-webfont.woff') format('woff'), url('../fonts/gotham-medium-webfont.ttf') format('truetype'), url('../fonts/gotham-medium-webfont.svg#gotham_mediumregular') format('svg'); font-weight: normal; font-style: normal; } body {overflow-x: hidden;} .mb-max-only {display: none;} .gotham {font-family: 'GothamBold';} .gotham-m {font-family: 'gotham_mediumregular';} .tt24 {font-size:24px; color:#333; font-weight: normal; line-height: 38px; letter-spacing: -0.5px;} .tt16 {font-size:16px; letter-spacing: -0.5px; line-height: 28px;} .al-c {text-align: center;} .mt60 {margin-top: 60px;} .al-l {text-align: left;} .al-r {text-align: right;} .tt-red {color:#d23145;} #sub-container {min-height:500px; padding-top: 86px;} #sub-container > header { color:#fff; overflow:hidden;} #sub-container > header .inner {position: relative;padding-left: 30px; padding-top: 104px;} #sub-container > header .inner:after {position: absolute; display: block; content:''; width:8px; height:86px; background:#fff; top:104px; left:0;} #sub-container > header p {font-size:24px;line-height: 24px;} #sub-container > header h1 { font-size:48px; line-height: 48px; padding-top: 16px;} #sub-container > header h1 u:after {bottom:2px;} #sub-visuarl {height:298px;} #sub-visuarl.sub_top01 {background:url(../img/sub/sub_top01.jpg) no-repeat 50% 50%;} #sub-visuarl.sub_top02 {background:url(../img/sub/sub_top02.jpg) no-repeat 50% 50%;} #sub-visuarl.sub_top03 {background:url(../img/sub/sub_top03.jpg) no-repeat 50% 50%;} #sub-visuarl.sub_top04 {background:url(../img/sub/sub_top04.jpg) no-repeat 50% 50%;} #sub-visuarl.sub_top05 {background:url(../img/sub/sub_top05.jpg) no-repeat 50% 50%;} #sub-visuarl.sub_top06 {background:url(../img/sub/sub_top06.jpg) no-repeat 50% 50%;} #snb {background:#ededed; } #snb ul {text-align: center; font-size:0; max-width:1200px; margin:0 auto;} #snb ul li { display: inline-block;} #snb ul li a {display: table;vertical-align: middle; padding:20px 0; font-size:18px; width:100%; color:#555; } #snb.snb2 ul li a {font-size:16px; line-height: 26px;height:92px;} #snb.snb3 ul li a br.pc-only {display: none;} #snb ul li a span {display: table-cell; vertical-align: middle; position: relative;} #snb ul li a span:after {position: absolute; top:0; right:0; width:1px; height:100%; background:#cdcdcd; content:'';} #snb ul li:last-child a span:after {display: none;} #snb ul li a:hover {color:#d23145;} #snb ul li a:focus, #snb ul li a.current {color:#fff; background:#d23145;} #snb ul li a:focus span:after, #snb ul li a.current span:after {display: none;} #snb ul li a i {display:none !important;} #cnb {padding-top: 18px; font-size:0;} #cnb a {display: inline-block; font-size:13px; color:#666; vertical-align: middle; margin-bottom: 10px;} #cnb a.share, #cnb a.print {width:34px; height:34px; border-radius: 50%; background-image: url(../img/common/icon.png); background-repeat: no-repeat; color:transparent; text-indent: -9999px; overflow: hidden;} #cnb a.share {position: relative;overflow: visible;background-color:#444 ; background-position: 0 -900px; margin:0 12px 10px;} #cnb a.print {background-color:#d23145 ; background-position: -34px -900px;} #cnb a.cnbsub {background: url(../img/common/arrow.gif) no-repeat 10px 50%; padding-left: 26px;} #sub-content {padding-bottom: 100px; } #sub-content > header {text-align: center; padding:90px 0 60px; position:relative;} #sub-content > header:before {position:absolute; top:0; left:50%; width:1px; height:70px; background:#c1c1c1; content:''; display: block; margin-left: -1px;} #sub-content > header #page-title {font-size:38px; color:#333; word-break: keep-all;} #contents {color:#666;min-height: 500px;} #contents h3.stit {padding-bottom: 26px;} #contents p {padding-bottom: 26px;} /* 핵심가치 */ .mission_wrap {background-color: #efeeed;padding: 40px 20px;} h3.value_h3 {color: #d23145;font-size: 36px;text-align: center;position: relative; font-family: 'GothamBold';} h3.value_h3:after {content: "";position: relative;bottom: -6px;width: 42px;height: 1px;background-color: #d23145;display: block;margin: 0 auto;} span.value_small {color: #333;font-weight: bold;display: block;text-align: center;font-size: 24px;margin-top: 20px;padding-bottom: 40px;} .mission_box {display: inline-block;width: 100%;} .mission_wrap figure {text-align: center;width: 100%;float: none;} .mission_wrap figure img {max-width: 100%;} .m_b_right {text-align: center;word-break: keep-all;float: none;width: 100%;padding: 0;} #contents .mission_wrap p.sm_p {color: #666;padding-bottom: 10px;line-height: 24px;} #contents .mission_wrap p.sm_p span {color: #d23145;font-size: 18px;} #contents .mission_wrap p.md_p {color: #333;padding-bottom: 0;font-size: 24px;line-height: 34px;} .values_wrap {padding: 40px 0;} .values_box {list-style: none;border: 1px solid #cfcfcf;} .values_box li {position: relative;padding: 20px;border-bottom: 1px solid #cfcfcf;border-right: 0;float: none;width: 100%;} .values_box li:last-child {border-bottom: 0;border-right: 0;} .values_box li figure {display: table-cell;vertical-align: middle;min-width: 102px;text-align: center;min-height: auto;} .v_b_right {text-align: center;color: #333;display: table-cell;vertical-align: middle;padding-left: 30px;width: 100%;margin-top: 0;min-height: auto;} .v_b_title {font-weight: bold;display: block;font-size: 24px;padding-bottom: 10px;} .v_b_content {line-height: 20px;} .value_plus {position: absolute;background-color: #d23145;width: 30px;height: 30px;font-size: 28px;color: #fff;text-align: center;line-height: 30px;border-radius: 50%;bottom: -15px;left: 50%;margin-left: -15px;margin-bottom: 0;} @media screen and (min-width: 768px) { .values_box {display: inline-block;width: 100%;} .values_box li {padding: 40px 20px;float: left;width: 33.3%;border-bottom: 0;border-right: 1px solid #cfcfcf;} .values_box li:last-child {border-bottom: 0;border-right: 0;} .values_box li figure {display: block;width: 100%;min-height: 103px;} .v_b_right {display: block;padding-left: 0;margin-top: 20px;min-height: 74px;} .value_plus {left: auto;margin-left: 0;right: -15px;bottom: 50%;margin-bottom: -15px;} } @media screen and (min-width: 1280px) { .mission_wrap figure {width: 50%;float: left;text-align: right;} .mission_wrap figure img {max-width: 80%;} .m_b_right {text-align: left;float: left;width: 50%;padding: 40px 0 0 30px;} #contents .mission_wrap p.sm_p {font-size: 20px;line-height: 30px;} #contents .mission_wrap p.sm_p span {font-size: 22px;} #contents .mission_wrap p.md_p {font-size: 26px;line-height: 36px;} } /* 핵심가치 animation */ .v_animation {background:#fdf6d6 url(../img/sub/v_bg.jpg) no-repeat 50% 0; margin-top:40px; padding: 60px 0 40px; min-height:720px; } .v_animation .v_msgol {padding:24px 0 130px 90px; position: relative; } .v_animation .v_msgol ol {list-style: none; width:360px;} .v_animation .v_msgol ol li {background:#f5eaba; padding:30px; margin-bottom: 20px; position: relative; z-index:10; letter-spacing: -0.3px;} .v_animation .v_msgol ol li em {font-size:26px; color:#fff; display: inline-block; vertical-align: middle; clear: both; margin:auto 20px auto 0; background:#d23145; width:58px;height:58px; border-radius: 50%; font-family: 'GothamBold'; text-align: center; line-height: 58px; float: left;} .v_animation .v_msgol ol li h4 {color:#d23145; font-weight: 600; font-size:16px; line-height: 30px;} #contents .v_animation .v_msgol ol li p {color:#333; font-size:20px; line-height: 30px; padding-bottom: 0; font-weight: 600; } .v_animation .v_msgol ol li i.bullet, .v_animation .v_msgol ol li i.bullet:before {width:10px; height:10px;border-radius: 50%;display: block; position: absolute; z-index: 11;} .v_animation .v_msgol ol li i.bullet {top:43%; right:-11px; box-sizing: content-box; border:7px solid rgba(174,163,112,0.4);} .v_animation .v_msgol ol li i.bullet:before {top:0px; left:0px; background: #8c804a; content:'';} .v_animation .v_msgol ol li:before, .v_animation .v_msgol ol li:after {position: absolute; content: ''; display: block;} .v_animation .v_msgol ol li:before {width:316px; height: 1px; border-top:1px dashed #666; left:100%; top:64px;} .v_animation .v_msgol ol li:after {width:0; height:0; border:7px solid transparent; border-left:7px solid #666; left:100%; margin-left:316px; top:57px;} .v_animation .v_msgol ol li:last-child:before {width:184px;} .v_animation .v_msgol ol li:last-child:after {margin-left:184px;} /* 나무 */ .v_animation .v_img {background:url(../img/sub/tree.png) no-repeat; width:584px; height:616px; position: absolute; right:0; bottom:0;} .v_animation .v_msgol .v_img:after {position: absolute; top:0;left:0;width:100%;height:100%; background: url(../img/sub/treeover.png) no-repeat 0 0; content:''; display: block; z-index: 9;} @media screen and (max-width: 1259px) { .v_animation {text-align: center; background-position: 50% -90px; overflow:hidden;} .v_animation .v_msgol {padding:0px 560px 100px 30px;display: inline-block; } .v_animation .v_msgol ol {display: inline-block; text-align: left; width:250px;} .v_animation .v_msgol ol li em {display: none;} .v_animation .v_msgol .v_img {transform: scale(0.75);} .v_animation .v_msgol ol li:before {width:154px;} .v_animation .v_msgol ol li:after {margin-left:154px;} .v_animation .v_msgol ol li:last-child:before {width:64px;} .v_animation .v_msgol ol li:last-child:after {margin-left:64px;} } @media screen and (max-width: 800px) { .v_animation {background-position: 61% 46px; height:780px; margin-top: 0px;} .v_animation .v_msgol {padding:0px 16px 480px;} .v_animation .v_msgol ol {width:100%;} .v_animation .v_msgol ol li {padding:20px; margin-bottom: 8px;} .v_animation .v_msgol ol li h4 {margin-right:20px;} .v_animation .v_msgol ol li h4, .v_animation .v_msgol ol li p {display: inline-block; line-height: 1.2;} .v_animation .v_msgol ol li:before, .v_animation .v_msgol ol li:after, .v_animation .v_msgol ol li i {display: none !important;} #contents .v_animation .v_msgol ol li p {font-size:17px;} .v_animation .v_msgol .v_img {transform: scale(0.5); right:auto;left:-50%;} } /* 인사말 */ .profile-cob {position: relative; width:548px; height:498px; transform: translateZ(1000px); text-align: left; } .profile-cob:before {border:10px solid #fff; border-right:0; border-bottom:0; width:60px; height:60px; bottom:68px; right:68px; z-index: 9;} .profile-cob:after {border:10px solid #d23145; width:118px; height:118px; bottom:0; right:0; z-index: 8;} .profile-cob:after, .profile-cob:before {position: absolute; display: block; content:''; } .profile-cob:after {animation: boxani 6s 2s ease-in-out infinite;} .profile-cob img.fx {max-width:480px; position: relative; z-index: 4;} .profile-cob figcaption { text-align: right;padding: 30px 0 10px;} .profile-cob .cob-b {text-align: right; padding-right: 98px;max-width:480px;} /* 함께한 길 */ .history-area {border-top:2px solid #333; position: relative; margin-top: 20px; overflow: hidden; padding: 100px 0 30px;} .history-area span.line {position: absolute;left:50%; top:0; margin-left: -1px; width:1px; height:100%; bottom:0; background: #333} .history-area span.line:after {position: absolute;content:''; display: block; width:28px; height:1px; background: #333; left:50%; bottom:0; margin-left: -14px;} .history-line {overflow: visible; position: relative; margin: 0 auto; max-width:950px;} .history-line dl.left {padding-right: 106px;} .history-line dl li b {display: inline-block; width:30px;} .history-line dl.left li b {float: right;} .history-line dl.right {left:50%;margin-top: -90px;} .history-line dl.right {padding-left: 106px;} .history-line dl {position: relative;width:50%; padding-top: 45px; padding-bottom: 45px;} .history-line dl dt {font-size:26px; color:#333; font-family: 'GothamBold'; padding-bottom: 14px; display: block;} .history-line ul {list-style: none;} .history-line ul li {font-size:16px; line-height: 28px; letter-spacing: -0.5px;} .history-line ul li b {color:#d23145;font-family: 'GothamBold';} .history-line ul li .history_s {padding-left: 30px;} .history-line figure {padding-top: 20px; transition:all 0.2s ease-in-out;} .history-line i.bullet {position: absolute; top:45px;width:30px; height:30px; background: rgba(210,49,69,0); border-radius: 50%; z-index: 2; transition:background 0.5s 1s ease-in-out; } .history-line i.bullet:before, .history-line i.bullet:after {position: absolute;content:''; display: block;} .history-line i.bullet:before {width:12px;height:12px; background: #d23145; z-index: 4; top:9px; left:9px; border-radius: 50%; opacity: 0; transition:opacity 0.5s 1.3s ease-in-out;} .history-line i.bullet:after {width:0px; border-top:1px dashed #333; height:1px; top:15px; z-index: 3; transition:width 0.5s 1.5s ease-in-out;} .history-line dl.left i.bullet {right:-15px;} .history-line dl.right i.bullet {left:-15px;} .history-line dl.left i.bullet:after {right:15px; } .history-line dl.right i.bullet:after {left:15px; } .history-line dl.left {text-align: right;} .history-line dl.aos-animate i.bullet {background: rgba(210,49,69,0.1)} .history-line dl.aos-animate i.bullet:before {opacity: 1;} .history-line dl.aos-animate i.bullet:after {width:78px;} .history-line dl:last-child {margin-top: -160px;} /* 함께하는 사람들 */ #organization {position: relative; text-align: center;} #organization > h2 {font-size:38px; line-height: 44px; color:#bcbcbc; position: absolute; background: #fff;padding:10px 0; top:40px;left: 48px;display: inline-block; text-align:left;} #organization > h2 b {position: relative;z-index: 2;} #organization > h2:before {position: absolute; top:-42px;left:-48px; width:172px; height:172px; content:''; display: block; border:10px solid #eee; z-index: -1;} #organization > div {position: relative;} #organization h3 {font-size: 24px;text-align: left;position: absolute;top: 0;left: 0;padding-left: 10px;} #organization h3:before {content: "";position: absolute;height: 100%;left: 0;width: 3px;background-color: #d23145;top: 1px;} #organization h3 b.tt-red {font-size: 17px;vertical-align: top;} #organization span {display: inline-block; vertical-align: top; position: relative;} #organization span.circle {width:130px; height:130px; background: #1b1b1b; position: relative;border-radius: 50%; z-index: 1; color:#fff;font-size: 18px;font-weight: normal;padding: 40px 0;} #organization span.circle.redbox {background: #af071c;font-size: 14px;font-weight: normal;padding: 40px 0;} #organization span.circle em {display: block;line-height: 1;margin-top: 8px;font-size: 26px;font-weight: bold;} /*#organization span.circle em:after {position: absolute; top:44px;left:50%; margin-left: -11px; width:22px; content:''; display: block; height:3px; background: #fff;}*/ #organization span.circle.redbox em {display: block;line-height: 1;font-weight: bold;margin-bottom: 8px;font-size: 16px;} #organization span.circle.redbox em:after {display: none;} #organization span.circle:after, #organization span.square:after {position: absolute; top:0;left:0; width:100%; height:100%; content:''; display: block; z-index: 2;} #organization span.circle:after {border-radius:50%;background: url(../img/sub/overay2.png) no-repeat 50% 50%; background-size: cover;} #organization span.square:after {background: url(../img/sub/overay.png) no-repeat 50% 50%;background-size: cover;} #organization span.square {width:250px;height:56px;font-size:20px; font-weight: normal; color:#fff; line-height: 36px;text-align: left;padding: 10px 20px;} #organization span .more_pop {position: absolute;right: 15px;top: 50%;height: 24px;width: 24px;margin-top: -12px;z-index: 3;} #organization span .more_pop img {width: 100%;height: auto;} #organization div.card {width:386px; height:176px; background: #f7f7f7; display: inline-block; font-size:15px; line-height: 28px; text-align: left; letter-spacing: -1px; position: relative;;z-index: 3;} #organization div.card img {float: left; padding-right: 30px;} #organization div.card h3 {font-size:20px; font-weight: bold; padding:26px 0 18px; position: relative; text-indent: 14px; color:#333;} #organization div.card h3:before {content:''; display: block; position: absolute; width:4px; height:20px; left:186px; top:30px; background: #d23145;} #organization ul {list-style: none; text-align: left;} #organization ul li:before {content:'- '; line-height: 28px; font-size: 15px;} #organization div.card i.bullet {position: absolute; display: block; width:16px; height:16px; margin-left: -8px; margin-top: -8px; top:0; left:50%; background: rgba(51,51,51,0.3); border-radius: 50%; transition: all 0.2s ease-in-out;} #organization div.card i.bullet:after {position: absolute; display: block; content:'';top:4px;left:8px; width:8px; height:8px; margin-left: -4px; background: #333; opacity: 0.5; border-radius: 50%; transition: all 0.2s ease-in-out;} .redbox {background: #af071c;} .lightbluebox {background: #2c518a;} .bluebox {background: #193662;} .cyanbox {background: #465161;} .brownbox {background: #462121;} .orgaPopup {display: none;z-index: 1001;top: 0;left: 0;right: 0;bottom: 0;position: fixed;overflow-y: auto;overflow-x: hidden;} .orgaPopup .one_question_popup {max-width: 800px;} @media screen and (max-width: 840px) { .orgaPopup .one_question_popup {width: auto;margin: 10px;} } .orgaPopup .one_question_popup header {text-align: left;padding-left: 20px;} .orgaPopup.orgaPopup2 .one_question_popup header {background-color: #462121;} .orgaPopup.orgaPopup3 .one_question_popup header {background-color: #465161;} .orgaPopup .one_question_popup header:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';display: block;z-index: 2;background: url(../img/sub/overay.png) no-repeat 50% 50%;background-size: cover;} .orgaPopup .one_question_popup header a {z-index: 2;} .orgaPopup .one_question_popup .popup_subject {padding-bottom: 25px;margin-top: 0;padding-top: 25px;border: 4px solid #c34051;border-top: 0;} .orgaPopup2 .one_question_popup .popup_subject {padding-bottom: 25px;margin-top: 0;padding-top: 25px;border: 4px solid #513333;border-top: 0;} .orgaPopup3 .one_question_popup .popup_subject {padding-bottom: 25px;margin-top: 0;padding-top: 25px;border: 4px solid #465161;border-top: 0;} .orgaPopup .one_question_popup .popup_subject > form {border-top: 2px solid #333;border-bottom: 1px solid #333;display: inline-block;width: 100%;} .orgaPopup .one_question_popup .popup_subject > form .table_box {float: left;width: 50%;} .orgaPopup3 .one_question_popup .popup_subject > form .table_box {width: 100%;} .orgaPopup .one_question_popup .popup_subject > form:after {content: "";display: block;clear: both;} .orgaPopup .one_question_popup .popup_subject > form table.i-s-table {border-top: 0;border-bottom: 0;} .orgaPopup .one_question_popup .popup_subject > form table.i-s-table td {word-break: normal;padding: 0 20px;height: 72px;font-size: 14px;} .orgaPopup3 .one_question_popup .popup_subject > form table.i-s-table tr td {height: 72px;} .orgaPopup3 .one_question_popup .popup_subject > form table.i-s-table tr td:last-child {font-size: 0;height: 72px;} .grid_div {display: inline-block;width: 50%;font-size: 14px;height: 72px;line-height: 72px;vertical-align: top;} .grid_div div {height: 36px;line-height: 26px;word-break: break-all;} .grid_div div:first-child {padding-top: 10px;} .grid_div div a {color: #666;} .orgaPopup .one_question_popup .popup_subject > form table.i-s-table tbody tr td:first-child {text-align: center;padding-left: 10px;padding-right: 10px;width: 30%;word-break: keep-all;font-size: 14px;} #organization {font-size:0;} #organization .or-bold span.square {font-size:24px; font-weight: bold;} #organization .or-side {position: absolute;left:50%; margin-left: 156px;} #organization .or-side:before {position: absolute;display: block; content:''; left:0; margin-left:-31px;top:50%; height:1px; background: #c4c4c4; z-index: -1 !important; width:0;} #organization .or-side.aos-animate:before {width:31px;} #organization span.or-line {position: absolute; left:50%; top:0; display: block; width:1px; height:100%; background: #c4c4c4; margin-left: -0.5px; z-index: -1;} #organization .o-row {padding-top:30px ;} #organization .o-row-a {padding-top:40px; position: relative;} #organization .o-row-b {padding-top: 60px;} #organization .o-row-b .card {margin-right:20px;} #organization .o-row-b .card:last-child {margin-right: 0;} #organization .o-row-a:after {position: absolute; bottom:-30px; height:1px; background: #c4c4c4; left:50%; right:50%; content: ''; display: block} #organization .o-row-a.aos-animate:after {left:194px; right:193px;} #organization .o-row-b .o-c-line:before {position: absolute; top:-30px; left:50%; width:1px; height:0px; display: block; content: ''; background: #c4c4c4; margin-left: 0;} #organization .o-row-b .o-c-line:before {height:30px;} #organization .o-row-bot {margin-top: 30px;text-align: center;} #organization .o-row-bot ul {display: inline-block;text-align: center;font-size: 0;max-width: 100%;} #organization .o-row-bot ul li {width: 100px;padding: 10px 15px;border: 4px solid #d2d2d2;margin: 0 5px;height: 156px;position: relative;background-color: #fff;margin-bottom: 5px;display: inline-block;font-size: 16px;} #organization .o-row-bot ul li > div {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);left: 12px;} #organization .o-row-bot ul li:before{font-size: 0;line-height: 1;} .ov-bg7 {background: rgba(0,0,0,0.8);top: 0;left: 0;right: 0;height: 100%;z-index: 1000;position: fixed;display: none;} /* 오시는 길 */ #map {height:450px;} #map-address {padding-top:50px;height:450px;} #map-address table {border-top:1px solid #333; width:100%; position: relative; overflow: visible;} #map-address table:after {position: absolute; top:-1px; height:3px; content:''; display: block; width:200px; background: #d23145;} #map-address table .wth01 {width:200px;} #map-address table tr th, #map-address table tr td {border-bottom:1px solid #ddd; padding:34px; text-align: left;} #map-address table tr:last-child th, #map-address table tr:last-child td {border-bottom:1px solid #333;} #map-address table tr th {font-size:18px; color:#333; font-weight: bold;} #map-address table tr td {font-size:17px;} #map-address table tr td b {color:#333; font-weight: normal;} #map-address table tr td b:after {display: inline-block;content:''; width:4px; height:4px; background: #c6c6c6; border-radius: 50%; vertical-align: middle; margin: auto 10px;} #map-address table tr td span {margin-right:38px;} #map-address table tr td span:last-child {margin-right: 0;} #location-guide {padding:60px 0 40px;} #location-guide ul {list-style: none;} #location-guide aside {position: relative; background:#f7f7f7; margin-bottom: 24px;} #location-guide aside > header {width:232px; border:10px solid #eee; background:#fff; color:#333; position: absolute; left:0; top:0; bottom:0; padding:30px 0 30px 50px;} #location-guide aside > header p {font-weight: 600; padding-bottom: 8px; font-size:15px; padding} #location-guide aside > header h3 {font-size:24px; position: relative; letter-spacing: -0.5; font-weight: 400;} #location-guide aside > header h3:before {content:''; display:block; position:absolute; width:4px; height:46px; background: #d23145; left:-20px; bottom:0;} #location-guide aside .loc-con {padding:34px 34px 34px 272px;} #location-guide aside .loc-con i {clear: both; vertical-align: middle; margin-right: 20px;} #location-guide aside .loc-con dl {line-height: 28px; overflow:hidden;} #location-guide aside .loc-con dl:first-child {padding-bottom: 30px;} #location-guide aside .loc-con dt {font-size:18px; color:#333;} #location-guide aside .loc-con dd {font-size:15px; padding-left: 58px;overflow:hidden;} #location-guide aside .loc-con dd ul {width:420px; display: inline-block; vertical-align: top; clear: both; margin-left:-10px;overflow:hidden;} #location-guide aside .loc-con dd ul li {line-height: 28px; font-size:16px; letter-spacing: -0.25; width:100%;} #location-guide aside .loc-con dd ul li b {font-weight: normal; color:#333;} #location-guide aside .loc-con dd ul li b:after {display: inline-block;content:''; width:4px; height:4px; background: #c6c6c6; border-radius: 50%; vertical-align: middle; margin: auto 10px;} /* 희망드림 이음사업 */ #bs-top { overflow: hidden; position: relative;} #bs-top:before, #bs-top:after {clear: both; display: block;} #bs-top > .inner {overflow: hidden; } #bs-top .bs-top-con {background:#d23145; color:#fff; overflow: hidden; text-align: center; padding: 10px 52px 80px; position: relative; float: right;} #bs-top .bs-top-con h3 {padding:0px 0 24px; font-size:24px; line-height: 38px; letter-spacing: -0.04em;} #bs-top .bs-top-con i {width:120px; height:120px; transform: scale(0.7); background-color: #d23145; position: relative; z-index: 5;} #bs-top .bs-top-con span.line {position: absolute; left:52px; right:52px; height:1px; background:#fff; content:''; display: block; opacity: 0.2; top:74px; z-index: 1;} #bs-top .bs-top-con p {line-height: 28px; letter-spacing: -0.04em;} .bs-bg {position: absolute; top:0;left:0; bottom:0;right:0; z-index: -1; width:100%; overflow: hidden; background:#d23145 url(../img/sub/bs02.jpg) no-repeat 0 50%; background-size:contain;} .bs-bg1 {background-image: url(../img/sub/bs01.jpg)} .bs-bg2 {background-image: url(../img/sub/bs02.jpg)} .bs-bg3 {background-image: url(../img/sub/bs03.jpg)} .bs-bg4 {background-image: url(../img/sub/bs04.jpg)} .bs-bg5 {background-image: url(../img/sub/bs05_03.jpg)} .bs-bg6 {background-image: url(../img/sub/bs06_02.jpg)} .bs-bg7 {background-image: url(../img/sub/bs07_02.jpg)} .bs-bg8 {background-image: url(../img/sub/bs08.jpg)} #b-map {margin-top: 80px; position: relative;} #b-map > p {line-height: 28px;} #bs-step h2, #bs-bbs h2, #b-map h2 {font-size:24px; color:#333; padding-bottom: 30px; padding-left: 18px; position: relative; line-height: 30px;} #bs-step h2:before, #bs-bbs h2:before, #b-map h2:before {display:block; width:8px; height:8px; content:''; background:#d23145; margin-right: 10px; clear: both; vertical-align: middle; border-radius: 50%; position: absolute; top:9px;left:0;} #bs-step, #bs-bbs {padding-top: 80px;max-width:1200px; margin: 0 auto;} #bs-step ul, #bs-bbs ul {list-style: none;} #bs-step .bs-setp-box {background:#f7f7f7; overflow:hidden;} #bs-step ul {text-align: center; padding:40px; font-size:0; position: relative;} #bs-step ul:before, #bs-step ul:after {position: absolute; content:''; display: block;} #bs-step ul:before {top:209px; left:40px; right:40px; border-top:1px solid #333; height:1px;} #bs-step ul li {display: inline-block; margin:0 40px; line-height: 28px; vertical-align: top;font-size:16px;} #bs-step ul li h4 {color:#d23145; font-size:15px;} #bs-step ul li img {display: block; margin:0 auto;} #bs-step ul li i.bullet {width:10px; height:10px; display:inline-block; position: relative; margin-top:20px; background:#333; border-radius:50%; z-index: 3;} #bs-step ul li i.bullet:before, #bs-step ul li i.bullet:after {position: absolute; content:'';display: block;} #bs-step ul li i.bullet:before {left:50%; height:20px; width:1px; margin-left:-1px; border-left: 1px dotted #333; top:-20px;} #bs-step ul li i.bullet:after {width:24px;height:24px; opacity: 0.4;top:50%; left:50%; margin-left:-12px; margin-top:-12px; border-radius: 50%;} #bs-step ul li i.bullet.step01, #bs-step ul li i.bullet.step01:after {background-color:#cdb587;} #bs-step ul li i.bullet.step02, #bs-step ul li i.bullet.step02:after {background-color:#b79989;} #bs-step ul li i.bullet.step03, #bs-step ul li i.bullet.step03:after {background-color:#916d6d;} #bs-step ul li i.bullet.step04, #bs-step ul li i.bullet.step04:after {background-color:#604a4a;} #bs-step ul li i.bullet.step05, #bs-step ul li i.bullet.step05:after {background-color:#d23145;} #bs-step ul li i.bullet.step01a, #bs-step ul li i.bullet.step01a:after {background:#b79989;} #bs-bbs .page_wrap {padding-top: 20px;} #bs-bbs ul {border:1px solid #dfdfdf; border-bottom:0; overflow: hidden; width:100%;} #bs-bbs ul li {border-bottom:1px solid #dfdfdf; padding:34px 40px; position: relative; } #bs-bbs ul li h3 {color:#d23145; font-size:18px; font-weight: 600; padding-bottom: 16px;} #bs-bbs ul li h3:before {display: inline-block; content:''; width:3px; background:#d23145; height:18px; clear: both; vertical-align: bottom; margin-right: 6px;} #bs-bbs ul li .bbs-list-con {font-size:14px; line-height: 26px; padding:36px; border-top: 1px dashed #dfdfdf; margin-top: 36px; display: none;} #bs-bbs ul li .btn {width:150px; height:66px; line-height: 66px; font-size:16px; color:#fff; background:#d23145; display: inline-block; text-align: center; position: absolute; right:136px; top:30px;} #bs-bbs ul li .btn.com-a {background:#503e3e;} #bs-bbs ul li .btn.com-b {background:#444;} #bs-bbs ul li .more-btn {width:66px; height:66px; border:10px solid #eee; position: absolute; top:30px; right:40px; background:#fff url(../img/sub/plus.png) no-repeat 50% 50%; color:transparent;} #bs-bbs ul li.minus .more-btn {border:10px solid #a9a9a9; background:#a9a9a9 url(../img/sub/minus.png) no-repeat 50% 50%} #bs-bbs ul li b {font-weight: normal; color:#333;} #bs-bbs ul li b:after {display: inline-block; content:''; width:3px; height:3px; background:#d0d0d0; border-radius: 50%; clear: both; margin:auto 5px; vertical-align: middle;} #bs-bbs ul li span {margin-right: 20px;} #bs-bbs .bs-btn {background:#bea395; border:0; color:#fff; float: right; font-size:15px; margin-bottom: 20px; font-weight: normal;} #bs-bbs .bs-btn:hover, #bs-bbs .bs-btn:focus {background:#a18170;} #bs-bbs.ex-bbs {padding-top: 0;} #bs-bbs.ex-bbs h3 {padding: 20px 0; color:#333; font-weight: normal; font-size:20px;} #bs-bbs.ex-bbs h3:before {display: none;} #bs-bbs.ex-bbs ul {border:0; border-top:2px solid #333;} #bs-bbs.ex-bbs ul li.minus h3 {color:#d23145; font-weight: bold;} /* 내수살리기 */ .b-map-list {position: relative;} .b-map-con {border:4px solid #ddd; position: absolute; padding:18px 0 0px 18px; background:#fff; overflow: hidden; width:310px;} .b-map-con h3 {color:#d23145; font-size:18px; font-weight: bold; height:60px; float: left; padding-right:20px;} .b-map-con h3:before {display:inline-block; width:4px; height:18px; content:''; background:#d23145; margin-right: 8px; clear: both; vertical-align: middle;} .b-map-con > span {display: block; line-height: 24px; font-size:14px; letter-spacing: -0.5px;} .b-map-con > span b:after {display:inline-block; width:3px; height:3px; content:''; background:#ddd; margin:auto 4px; clear: both; vertical-align: middle; border-radius: 50%;} .b-map-con h3 span {} .b-map-id0 {top:4px;left:0; border-bottom:1px solid #ddd; z-index: 3;} .b-map-id1 {top:83px; left:0; border-top:4px solid #fff; z-index: 1} .b-map-id6 {top:183px; left:0;} .b-map-id5 {top:340px; left:0;} .b-map-id10 {top:451px; left:0;} .b-map-id4 {top:611px; left:0;} .b-map-id13 {top:774px; left:0;} .b-map-id8 {top:0;right:0;} .b-map-id12 {top:95px; right:0;} .b-map-id7 {top:191px; right:0;} .b-map-id9 {top:306px; right:0;} .b-map-id3 {top:404px; right:0;} .b-map-id2 {top:542px; right:0;} .b-map-id11 {top:638px; right:0;} .s-custom-seltect {position:absolute; top:0;right:0; width:150px; height:40px; line-height: 40px;} .s-custom-seltect label, .s-custom-seltect select {position:absolute; top:0;right:0; left:0; bottom:0; display: block;} .s-custom-seltect label {width:100%; height:100%;border:1px solid #ceccc3; padding-left: 10px; color:#999; background:#fff url(../img/common/select_triangle.png) no-repeat center right 10px;} .s-custom-seltect select#publicDate {opacity: 0; padding:10px; font-size:17px; line-height: 1.5; width:100%;} /* over effect 960px 이상에서만 */ @media screen and (min-width:960px) { } /* ===================== */ /* PC 공통 */ /* ===================== */ @media screen and (min-width:1260px) { #b-map .b-map-list {background:url(../img/sub/b_map.jpg) no-repeat 50% 0; height:904px;} #b-map #b-map-data table {display: none;} .pc-none {display: none !important;} /* 함께하는사람들 */ #organization .o-row-bot ul li:nth-child(1):before,#organization .o-row-bot ul li:nth-child(2):before, } @media screen and (max-width:1259px) { #left-link , #right-link {display: none;} } /* ===================== */ /* mobile,pad 공통 */ /* ===================== */ @media screen and (max-width:1259px) { #sub-container > header .inner {padding-left: 60px; padding-top: 104px;} #sub-container > header .inner:after {top:104px; left:30px;} .bs-bg {position: relative; top:auto;left:auto;right:auto;bottom:auto; width:100%;min-height:220px; background-size: 100%; background-position: 50% 0} #b-map-data {} #b-map-data table {border-spacing: 0; border-collapse: collapse; border-top:2px solid #333; width:100%; text-align: center;} #b-map-data table th, #b-map-data table td {border-bottom:1px solid #ddd; padding:22px;border-right: 1px solid #ddd;line-height: 18px;} #b-map-data table tr th:last-child, #b-map-data table tr td:last-child {border-right:0;} #b-map-data table th {font-size:18px; color:#333; background:#f8f8f8; } #b-map-data table td {font-size:16px;word-break: keep-all;} #b-map-data table tfoot th, #b-map-data table tfoot td {background:#fbf1f2; color:#d23145; font-weight: normal; font-size:16px;} /* 함께하는 사람들 */ .orgaPopup .one_question_popup .popup_subject > form table.i-s-table td {height: 109px;padding-right: 20px;padding-left: 20px;} } /* pad */ @media screen and (min-width:768px) and (max-width:1259px){ /* 확인용 #header {border-top:4px solid #556600;} */ .profile-cob {margin: 0 auto 100px;} #sub-content {padding-bottom: 20px;} #sub-content {padding:0 30px;} .u-pd {float:none; max-width:700px; margin: 0 auto;} /* pad 함께한 길 */ .history-line {width:708px;} .history-line figure {max-width:250px;} .history-line figure img {max-width:100%;} .history-line ul li {position: relative; padding-left: 30px;} .history-line dl.left ul li {padding-right: 30px; padding-left: 0;} .history-line ul li b {position: absolute; top:0px; left:0; float: none;} .history-line ul li .history_s {padding-left: 0;} .history-line dl.left ul li b {right: 0px; left: auto;} /* pad 함께하는 사람들 */ #organization .o-row-bot ul {max-width: 420px;} #organization span.square {width:178px;font-size: 16px;} #organization .or-bold span.square {font-size: 20px;} #organization .or-side {margin-left: 120px;} #organization .o-row-b div.card {width:auto; height:auto; margin-right: 10px; padding-bottom: 28px;} #organization .o-row-b div.card img{float: none; padding:30px 30px 0; margin:0 auto; display: block;} #organization .o-row-b div.card h3 {font-size:20px; font-weight: bold; text-indent: 14px; padding-left: 33px;} #organization .o-row-b div.card h3:before {left:33px; top:30px;} #organization .o-row-b div.card ul {padding-left: 30px;} #organization .o-row-a:after {width:0; left:50%;right:auto; margin-left: 0; transition: all 0.5s 1s ease-in-out;} #organization .aos-animate.o-row-a:after {width:453px; margin-left: -226px;left:50%; right:auto;} #organization .o-row-bot ul li:nth-child(1):before,#organization .o-row-bot ul li:nth-child(2):before,#organization .o-row-bot ul li:nth-child(3):before {content: "";position: absolute;width: 150%;left: 50%;top: -20px;height: 16px;border-left: 1px solid #ccc;border-top: 1px solid #ccc;z-index: -1;} #organization .o-row-bot ul li:nth-child(4):before {content: "";position: absolute;z-index: -1;width: 1px;top: -34px;height: 30px;background-color: #ccc;left: 50%;margin-left: -.5px;} #organization .o-row-bot ul li:nth-child(5):before,#organization .o-row-bot ul li:nth-child(6):before,#organization .o-row-bot ul li:nth-child(7):before {content: "";position: absolute;width: 150%;right: 50%;top: -20px;height: 16px;border-right: 1px solid #ccc;border-top: 1px solid #ccc;z-index: -1;} #organization .o-row-bot ul li:nth-child(8):before,#organization .o-row-bot ul li:nth-child(9):before,#organization .o-row-bot ul li:nth-child(10):before,#organization .o-row-bot ul li:nth-child(11):before,#organization .o-row-bot ul li:nth-child(12):before,#organization .o-row-bot ul li:nth-child(13):before {display: none;} /* pad 오시는길 */ #map-address table:after {width:100px; } #map-address table .wth01 {width:100px;} #map-address table tr td {font-size:16px;} #map-address table tr th, #map-address table tr td {padding:30px 20px; line-height: 1.4;} #location-guide aside .loc-con dd ul {width:auto; display: block;;} #location-guide aside .loc-con dd ul li {position: relative; padding-left: 52px;} #location-guide aside .loc-con dd ul li b {position: absolute; left:0;} .snb2 li {width:25% !important; border-bottom:1px solid #fff;} .snb2 li .pc-only {display: block !important;} /* 사업소개 */ .bs-bg {min-height:300px; background-size:cover;} #bs-bbs ul li span {line-height: 1.8;} #bs-step ul li {margin:0 -5px;} #bs-step ul li img {width:65%; margin: 0 auto;} #bs-step ul:before {top:159px;} } /*mobile */ @media screen and (max-width:783px) { #snbbtn {display: block; width:100%;padding:20px 30px; background:#d23145 url(../img/sub/snb_arrow.jpg) no-repeat 94% 50%; color:#fff; font-size:22px; border:0; text-align: left; font-weight: bold;} #snbbtn.on {background:#d23145 url(../img/sub/snb_arrow_on.jpg) no-repeat 94% 50%;} #snb ul {text-align: center; font-size:0; max-width:1200px; margin:0 auto;} #snb ul li { display: block; width:100% !important;} #snb ul li a {display: block; padding:20px 30px; font-size:18px; text-align: left; border-bottom:1px solid #ddd;} #snb ul li a span {display:inline; } #snb ul li a span:after {display: none;} #snb ul li:last-child a span:after {display: none;} #snb.snb2 ul li a {font-size:18px; line-height: 1.5;height:auto;} #snb ul li a:focus, #snb ul li a.current {color:#d23145; background:#ededed;} } @media screen and (max-width:767px) { #contents {min-height: 300px} .mb-max-only {display: block;} /* 확인용 #header {border-top:4px solid #0066ff;} */ .profile-cob {margin: 0 auto 10px; width:90%; text-align: center; height:auto;} .profile-cob:before {display: none;} .profile-cob:after {animation: none; position: absolute; bottom:163px; left:0;right:0; width:100%;margin:0 auto; border:0; background: #d23145; height:10px; max-width:480px;} .u-pd {float:none; max-width:100%; margin: 0 auto;} #sub-content {padding-bottom: 20px;} #sub-content {padding:0 20px;} .profile-cob figcaption { text-align: center;padding: 20px 0 10px;} .profile-cob .cob-b {text-align:center; padding-right: 0px;} #sub-visuarl {height:200px;} #sub-container > header p {font-size:18px; line-height: 18px;} #sub-container > header h1 {font-size:36px; line-height: 36px;} #sub-container > header .inner {padding-left:40px; padding-top: 60px;} #sub-container > header .inner:after {left:16px; top:60px; height:68px;} #sub-visuarl.sub_top01 {background:url(../img/sub/sub_top_mb01.jpg) no-repeat 50% 50%;background-size: cover;} #sub-visuarl.sub_top02 {background:url(../img/sub/sub_top_mb02.jpg) no-repeat 50% 50%;background-size: cover;} #sub-visuarl.sub_top03 {background:url(../img/sub/sub_top_mb03.jpg) no-repeat 50% 50%;background-size: cover;} #sub-visuarl.sub_top04 {background:url(../img/sub/sub_top_mb04.jpg) no-repeat 50% 50%;background-size: cover;} #sub-visuarl.sub_top05 {background:url(../img/sub/sub_top_mb05.jpg) no-repeat 50% 50%;background-size: cover;} #sub-visuarl.sub_top06 {background:url(../img/sub/sub_top_mb06.jpg) no-repeat 50% 50%;background-size: cover;} /* mobile 함께한 길 */ .history-area {padding:30px 0 30px;} .history-area span.line {left:0; margin-left: 14px;} .history-line {width:100%; padding-top: 20px; padding-bottom: 20px;} .history-line dl ul li {position: relative;} .history-line dl.left, .history-line dl.right {position: relative; left:auto; margin-top: 0;width:100%; padding-right: 0; padding-left: 56px;} .history-line dl.left {text-align: left;} .history-line dl ul li {padding-left: 30px;} .history-line dl ul li b {position:absolute; top:0; left:0; float: none; right:auto;} .history-line figure {width:100%;} .history-line figure img {max-width:100%;} .history-line i.bullet {right:auto; left:0;} .history-line dl.left i.bullet {right:auto;} .history-line dl.right i.bullet, .history-line dl.left i.bullet {left:0;} .history-line dl.left i.bullet:after {right:auto; } .history-line dl.right i.bullet:after, .history-line dl.left i.bullet:after {left:15px;} .history-line dl.aos-animate.right i.bullet:after, .history-line dl.aos-animate.left i.bullet:after {width:30px;} .history-line ul li .history_s {padding-left: 0;} /* mobile 함께하는 사람들 */ #organization h3 {position: relative;margin-bottom: 20px;} #organization > div > div {max-width: 280px;margin: 0 auto;} #organization > div.mt60 {margin-top: 60px;} #organization .o-row {text-align: left;} .al-c {text-align: left;} .al-c.tc {text-align: center;} #organization span.circle {text-align: center;width: 128px;height: 128px;padding: 38px 0;} #organization span.circle.redbox {margin-right: 0;} #organization span.square {width:128px; text-align: left;font-size: 14px;padding: 10px 11px;} #organization .or-bold span.square {font-size: 20px;} #organization .or-side {left:auto;right: auto;position: relative;margin-left:24px;} #organization .or-side:before {margin-left: -17px;} #organization .aos-animate.or-side:before {width:24px;margin-left: -24px;} #organization span.or-line {left:50%; margin-left: -77px; top:65px; height:440px;} #organization .o-row-a .card {margin-left:18px;} #organization .o-row-a:after {width:1px; height:0px; top:100%; bottom:auto; left:40px; right:auto;} #organization .aos-animate.o-row-a:after {left:41px; right:auto;height:486px; } #organization .o-row-b .card {margin-left: 60px; margin-right: 0;} #organization div.card {width:auto; height:auto; min-width:338px;} #organization div.card {padding-right: 20px;} #organization .o-row-a div.card img {width:164px;} #organization div.card h3 {font-size:18px; padding:18px 0 10px } #organization div.card h3:before {left: 164px; top:21px;} #organization .o-row-b .card img {width:150px; margin: 10px 0 10px 10px; padding-right: 20px;} #organization .o-row-b div.card h3 {padding:16px 0 8px 0;} #organization .o-row-b div.card h3:before {left: 158px; top:20px; } #organization .o-row-b {padding-top: 40px;} #organization .o-row-b .card {margin-bottom: 14px;} #organization .o-row-b .card li {line-height:20px; } #organization div.card i.bullet {top:50%; left:-18px; width:18px; height:1px; background:#c4c4c4; border-radius: 0; opacity: 1; margin: 0;} #organization div.card i.bullet:after {display: none;} #organization .o-row-b .o-c-line:before {display: none;} #organization .o-row-bot ul {max-width: 280px;} #organization .o-row-bot ul li {margin: 0 3px 5px;} #organization .o-row-bot ul li:nth-child(1):before,#organization .o-row-bot ul li:nth-child(2):before {content: "";position: absolute;width: 150%;left: 50%;top: -20px;height: 16px;border-left: 1px solid #ccc;border-top: 1px solid #ccc;z-index: -1;} #organization .o-row-bot ul li:nth-child(3):before {content: "";position: absolute;z-index: -1;width: 1px;top: -34px;height: 30px;background-color: #ccc;left: 50%;margin-left: -.5px;} #organization .o-row-bot ul li:nth-child(4):before,#organization .o-row-bot ul li:nth-child(5):before {content: "";position: absolute;width: 150%;right: 50%;top: -20px;height: 16px;border-right: 1px solid #ccc;border-top: 1px solid #ccc;z-index: -1;} #organization .o-row-bot ul li:nth-child(6):before,#organization .o-row-bot ul li:nth-child(7):before,#organization .o-row-bot ul li:nth-child(8):before,#organization .o-row-bot ul li:nth-child(9):before,#organization .o-row-bot ul li:nth-child(10):before,#organization .o-row-bot ul li:nth-child(11):before,#organization .o-row-bot ul li:nth-child(12):before,#organization .o-row-bot ul li:nth-child(13):before {display: none;} .orgaPopup .one_question_popup .popup_subject > form .table_box {float: none;width: 100%;} .orgaPopup .one_question_popup .popup_subject > form table.i-s-table td {height: auto;padding: 10px 20px;} .orgaPopup3 .one_question_popup .popup_subject > form table.i-s-table tr td {height: auto;} .orgaPopup .one_question_popup .popup_subject > form .table_box:first-child table.i-s-table tbody tr:last-child {border-bottom: 1px solid #ddd;} .grid_div {display:block;width: 100%;font-size: 14px;height: auto;line-height: 20px;} .grid_div div:first-child {padding-top: 0;} .grid_div div {height: auto;line-height: 20px;} /* mobile 오시는길 */ #map-address {height:225px;} #map-address table:after {width:80px; } #map-address table .wth01 {width:80px;} #map-address table tr th {font-size:16px;} #map-address table tr td {font-size:14px;} #map-address table tr th, #map-address table tr td {padding:20px 16px; line-height: 1.4;} #map-address table tr td span {display: block;} #map-address {padding-top:30px;} #location-guide {padding:30px 0 20px;} #location-guide aside > header {position: relative; top:auto;bottom:auto; left:auto; width:auto;} #location-guide aside .loc-con {padding: 20px;} #location-guide aside .loc-con dd ul {width:auto; display: block;;} #location-guide aside .loc-con dd ul li {position: relative; padding-left: 52px;} #location-guide aside .loc-con dd ul li b {position: absolute; left:0;} /* 사업소개 */ #b-map {margin-top: 40px;} .bs-bg {min-height:220px; background-size:cover;} #bs-top .bs-top-con {padding:10px 30px 40px;} .map-custom-seltect {position: relative; height:60px;} #bs-bbs ul li span {line-height: 1.5;} #bs-bbs ul li {padding:20px;} #bs-bbs ul li .more-btn {width:40px; height:40px; right:20px; top:20px; border:4px solid #f7f7f7;} #bs-bbs ul li .bbs-list-con {margin-top:20px; padding:20px;} #bs-bbs ul li h3 {width:80%; display: block; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} #bs-step, #bs-bbs {padding-top: 60px;} #bs-step ul {padding:30px 10px 0;} #bs-step ul:before {left:20px; right:20px; top:155px;} #bs-step ul:after {left:20px; right:20px; top:400px; height:1px; background:#333; z-index: 1} #bs-step ul li {margin:0 -5px 20px;} #bs-step ul li img {width:70%; margin: 0 auto;} } /*mobile min */ @media screen and (max-width:420px) { #sub-content > header {padding:60px 0 30px;} #sub-content > header:before {height:50px;} .mb-max-only {display: none;} /* 확인용 #header {border-top:4px solid #6688ee;} */ #sub-container {padding-top: 70px;} #snbbtn {padding:18px 30px; font-size:18px; background-size:18px auto;} #snbbtn.on {background-size:18px auto;} #snb ul li a {padding:15px 30px; font-size:16px;} #sub-content > header #page-title {font-size:32px; line-height: 40px;} #organization {overflow-y: hidden;} #b-map-data table th, #b-map-data table td {padding:12px;font-size: 14px;} #bs-step, #bs-bbs {padding-top: 40px;} } @media screen and (max-width:450px) { #bs-step ul li {margin:0 -16px 20px;} #bs-step ul li {font-size:14px; letter-spacing: -1px; line-height: 1.4;} #bs-step ul li img {width:50%; margin: 0 auto;} #bs-step ul:before {left:20px; right:20px; top:127px;} #bs-step ul:after {left:20px; right:20px; top:316px; height:1px; background:#333; z-index: 1} } @keyframes boxani { 30% {width:118px; height:118px; bottom:0; right:0;} 36% {width:68px; height:118px; bottom:0; right:50px;} 70% {width:68px; height:118px; bottom:0; right:50px;} 76% {width:118px; height:68px; bottom:50px; right:0px;} 94% {width:118px; height:68px; bottom:50px; right:0px;} 100% {width:118px; height:118px; bottom:0; right:0;} } @keyframes bullet{ 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} } @keyframes line{ 0% {transform: scaleX(1);} 50% {transform: scaleX(0);} 100% {transform: scaleX(1);} } /* 공유하기 레이어 */ #share-area {position: absolute;width: 142px;text-align: center;padding: 5px 10px;border: 1px solid #ddd;border-radius: 5px;background-color: #fff; left:50%; margin-left: -166px; margin-top: -18px;} #share-area:before {content: "";position: absolute;right: -10px;top: 14px;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 10px solid #ddd;width: 0;height: 0;} #share-area:after {content: "";position: absolute;right: -9px;top: 15px;border-top: 7px solid transparent;border-bottom: 7px solid transparent;border-left: 10px solid #fff;width: 0;height: 0;} #share-area ul {list-style: none; font-size:0; padding:0; text-indent: 0;} #share-area ul li {display: inline-block; margin:0 3px;} #share-area ul li a {display: block; width:34px;height:34px; border-radius: 50%; background: #ccc; overflow: hidden; text-indent: -9999px; margin-bottom: 0} #share-area ul li a.share_fb {background:#3b5a9a url(../img/sub/facebook.png) no-repeat 50% 50%;} #share-area ul li a.share_tw {background:#2aade3 url(../img/sub/twitter.png) no-repeat 50% 50%;} #share-area ul li a.share_url {background:#338984 url(../img/sub/url.png) no-repeat 50% 50%;} /* 위로가는 버튼 */ #top-btn-area {display: none; position: fixed; bottom:0; right:0; z-index: 1000;} #top-btn-area a {display: block; border:1px solid #cccccc; width:46px; height:46px; text-align: center; line-height: 60px; font-family: 'GothamBold'; color:#333; font-size: 12px; background: rgba(256,256,256,0.7) url(../img/sub/top.png) no-repeat 50% 50%;} #top-btn-area.fon {height:0; top:-270px; position: relative; left:0; bottom:0; right:0;} @media screen and (min-width:1421px) { #top-btn-area {bottom:50px; right:0px;} #top-btn-area a {position: absolute; top:-20px; right:50px;} } @media screen and (max-width:1420px) { #top-btn-area {height:46px; bottom:10px; left:0; right:0;} #top-btn-area a {position: absolute; right:auto; margin-left: 554px; left:50%; top:-20px;} } @media screen and (max-width:1259px) { #top-btn-area {bottom:1em; right:1em; height:46px; left:auto; top:auto;} #top-btn-area a {top:0; right:0; margin-left: 0; left:auto;} #top-btn-area.fon {position: fixed; display: block;height:46px; bottom:1em; right:1em; top:auto;left:auto;} } /* 개인정보처리방침 */ .info02_top {margin-bottom: 60px;} .info02_top h3 {line-height: 28px;margin-bottom: 30px;} .mb40 > li {margin-bottom: 40px;} .mb40 > li > ol {padding-left: 20px;} .info_t_wrap {} .info_t_wrap table { width: 100%; } .info_t_wrap caption {text-align: left; padding-left: 20px; font-weight: bold; margin-bottom: 10px;} .info_t_wrap tbody {border: 1px solid #ddd;} .info_t_wrap tr { text-align: center;} .info_t_wrap th, .info_t_wrap td {padding: 10px;} .info_t_wrap th {background-color: #ddd;} .info_t_wrap td {border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;} .info_t_wrap tr:last-child td {border-bottom: 0;} .info_t_wrap td:last-child {border-right: 0;} .info_t_wrap.rl tr td:last-child {text-align: left;} /*이용약관 */ .info01_wrap {line-height:1.5em;} .info01_wrap li {list-style:none;} #contents .info01_wrap p {padding-bottom:0;} #contents .info01_wrap p a {color: #666;} .info01_top {position:relative;border:10px solid #eee;padding:30px 0; margin-bottom:60px;} .info01_top:after {content:''; display:block; clear:both;} .info01_top ul {float:left; width:50%;} .info01_top ul li {margin:10px 35px;} .info01_top ul li a {color:#333; font-weight:bold;} .info01_txt h3 {position:relative;font-size:1.4em; color:#333333; margin-bottom:30px;} .info01_txt h3:before {content:''; display:inline-block; vertical-align:middle; margin-right:10px;background:#d23145; width:10px;height:10px;border-radius:5px;} .info01_txt > div {margin-bottom:60px;} .info01_txt > div h4 {margin-bottom:10px; color:#333333;} .info01_txt > div > ul, .info01_txt > div > p {padding-left:20px;} .info01_txt > div > ul > li {margin-bottom:30px;} .info01_txt > div > ul > li > div > ol.mgl_20 {margin-left:20px;} .info01_txt > div > ul > li > div > ol > li {padding-left:20px; text-indent:-20px;} .info01_txt > div > ul > li > div > ol > li > ol.ti_0 > li, .info01_txt > div > ul > li > div > ul > li > ol.ti_0 > li > ul > li {text-indent:0;} .info01_txt > div > ul > li > div > ul > li > ol.ti_0 > li {text-indent:20px;} .info018 table {width:100%; text-align:left; table-layout:fixed;border-bottom:1px solid #333333;} .info018 table th {color:#333; padding:20px 30px;word-break:keep-all; border-top:1px solid #dddddd;} .info018 table td {padding:35px 0;border-top:1px solid #dddddd; padding-left:40px;} .info018 table th.top { border-top:2px solid #d23145;} .info018 table td.top { border-top:1px solid #333;} .info018 table td a {color:#666;} .info018 table td span {display:inline-block;margin-right:30px;} .info018 table td span b {position:relative;} .info018 table td span b:after {content:'·';} @media screen and (max-width:767px) { .info01_wrap {font-size:0.9em;} .info01_top ul {float:none; width:100%;} .info01_txt > div > ul, .info01_txt > div > p {padding-left:0;} .info018 table th {padding:20px 10px;} .info018 table td {padding-left:30px;} } /*소득공제 안내 뿅뿅뿅 작성일:20170315/작성자:joo*/ .so_info {font-size:1em;} .so_info_top {background:#e6d7c6; padding:50px 40px; margin-bottom:60px;} #contents .so_info p {padding-bottom:0;} #contents .so_info p a {color: #666;} .so_info_top h3 { margin-bottom:15px; color:#333; font-size:1.3em;padding-left:10px;text-indent:-10px;line-height:1.5em;} .so_info_top h3:before {content:''; width:4px; height:20px; background:#d23145; display:inline-block;vertical-align:middle;margin-right:6px;} .so_info_top p {padding-left:10px;} .so_info_txt {border:1px solid #ddd;} .so_info_txt.bddd {border-top:none;} .so_info_txt {padding:40px;} .so_info_txt h3 { padding-left:10px;text-indent:-10px;line-height:1.5em; margin-bottom:10px;} .so_info_txt h3:before {content:''; width:4px; height:18px; background:#d23145; display:inline-block;vertical-align:middle;margin-right:6px;} .so_info_txt ul li {display:inline-block; margin-bottom:15px; line-height:1.5em;} .so_info_txt ul li:first-child {margin-right:20px; } .so_info_txt ul li b {color:#333;} .so_info_txt ul li b:after {content:'·'; color:#666;} .so_info_txt p {line-height:1.5em;} .so_info_mid > p {margin:20px 0 60px; line-height:1.5em;} .so_info_tbl table {width:100%; table-layout:fixed; text-align:left;border-bottom:1px solid #333;} .so_info_tbl table th {border-top:2px solid #d23145;padding-left:40px; color:#333;} .so_info_tbl table td {border-top:1px solid #333;padding:30px 0;} .so_info_tbl table td p {display:inline-block; padding:10px 0 10px 40px;line-height:1.5em;white-space:nowrap;} .so_info_tbl table td p b {} .so_info_tbl table td p b:after {content:'·'; color:#666;} @media screen and (max-width:767px) { .so_info {font-size:0.9em;} .so_info_top {padding:30px 20px; margin-bottom:30px;} .so_info_top p {line-height:1.5em;} .so_info_txt {padding:20px;} .so_info_mid > p {margin-bottom:30px;} .so_info_tbl table th {padding-left:10px;} } /* 재단사업 - 편견-ZERO캠페인 */ .bs-bg5 .bg_text_01 {width: 50%;text-align: right;margin: 1em 0;line-height: 20px;padding: 0 1em;color: #333;} .bs-bg5 .bg_text_01 strong {display: block;} .bs-bg5 .bg_text_02 {width: 50%;text-align: right;} .bs-bg5 .bg_text_02 img {max-width: 340px;} @media screen and (max-width: 1259px) { .bs-bg5 .bg_text_01 {width: auto;} .bs-bg5 .bg_text_02 {width: auto;margin-right: 1em;} } @media screen and (max-width: 420px) { .bs-bg5 .bg_text_02 {width: auto;margin-right: 0;text-align: center;padding-bottom: 1em;} .bs-bg5 .bg_text_02 img {width: 100%;} }