@charset "utf-8";
/* 공통 */
.subtit { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2em; color: #242424; margin-bottom: 25px;}

/* 인사말 */
.gt { display: flex; align-items: flex-start; position: relative;}
.gt::after { content: ""; position: absolute; right: -27%; width: 100%; height: 610px; background: #f7f7f7; bottom: -25px; border-radius: 0 0 0 100px; z-index: -1;}
.gt img { border-radius: 100px 0 100px 0;}
.gt .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 85px;}
.gt .txtbox h2 { font-size: 24px; line-height: 1.556em; color: #242424; letter-spacing: -.03em; font-weight: 600; margin-bottom: 80px;}
.gt .txtbox h2 span { color: #034387;}
.gt .txtbox p { font-size: 19px; letter-spacing: -.03em; line-height: 1.666em; color: #454545; font-weight: 300; margin-bottom: 30px;}
.gt .txtbox h3 { font-size: 22px; font-weight: 300; letter-spacing: -.03em; line-height: 1.556em; color: #242424; margin-bottom: 30px;}
.gt .txtbox h3 span { color: #034387; font-weight: 600; }

/* 기관소개 및 연혁 */
.hst p { text-align: center; font-size: 20px; font-weight: 300; letter-spacing: -.03em; line-height: 1.3em; color: #242424; margin-bottom: 90px;}
.group { display: flex; align-items: flex-start; margin-bottom: 60px;}
.group:last-child { margin-bottom: 0;}
.group .period { font-size: 55px; font-weight: 600; color: #242424; letter-spacing: -.03em; line-height: 1.2em; width: 31%; position: relative; height: 100%; }
.group .txtbox { padding-left: 70px; width: 69%; padding-bottom: 30px; position: relative; border-left: 2px solid #ddd;}
.group .txtbox .inbox { padding: 30px 0; border-bottom: 1px solid #ddd; display: flex; }
.group .txtbox .inbox .year { width: 90px; font-size: 26px; line-height: 1em; font-weight: 600; letter-spacing: -.03em; color: #034387; padding-top: 4px;}
.hst-list { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 40px;}
.hst-list li { display: flex; }
.hst-list li .month { font-size: 19px; line-height: 1.8em; font-weight: 600; letter-spacing: -.03em; color: #242424; width: 55px;}
.hst-list li .txt { font-size: 19px; font-weight: 300; line-height: 1.8em; letter-spacing: -.03em; color: #454545; flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 30px;}
.hst-list2 li .month { width: 115px;}

/* 조직도 */
.org { margin-bottom: 100px;}
.org.mg { margin-bottom: 0;}
.org h2 { padding-bottom: 25px; border-bottom: 1px solid #ddd; }
.org-box { display: flex; }
.org .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 75px; padding-top: 110px;}
.org-tbl { border-collapse: collapse; width: 100%; border-radius: 8px; overflow: hidden; text-align: center; position: relative;}
.org-tbl::after { content: ""; position: absolute; border-radius: 8px; left: 0; right: 0; top: 0;bottom: 0; margin: auto; border: 1px solid #ddd;}
.org-tbl tr { border-bottom: 1px solid #ddd;}
.org-tbl tr th { border-right: 1px solid #ddd; line-height: 1em; font-size: 18px; font-weight: 500; letter-spacing: -.03em; color: #242424; padding: 15px 5px; background: #f2f5f9;}
.org-tbl tr th:last-child { border-right: none;}
.org-tbl tr td { border-right: 1px solid #ddd; line-height: 1.3em; font-size: 18px; font-weight: 300; letter-spacing: -.03em; color: #454545; padding: 12px 5px; }
.org-tbl tr td:last-child { border-right: none;}

/* 주요사업 */
.bs { display: flex; flex-wrap: wrap; gap: 50px; }
.bsbox { width: calc(100%/2 - 25px); }
.bsbox .imgbox { position: relative;}
.bsbox .imgbox img { transition: .5s;}
.bsbox .imgbox .img-wrap { overflow: hidden; border-radius: 20px;}
.bsbox .imgbox .img-wrap:hover > img { transform: scale(1.05);}
.bsbox .imgbox .tit { position: absolute; left: 20px; bottom: -25px; display: inline-block; color: #fff; border-radius: 25px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.3em; padding: 11px 25px; background: #034387;}
.bsbox p { font-size: 19px; font-weight: 300; line-height: 1.556em; letter-spacing: -.03em; color: #454545; padding-top: 50px; padding-left: 20px;}

/* 회원가입 안내 */
.join-box { border: 1px solid #ddd; padding: 30px; border: 1px solid #ddd; border-radius: 20px; padding-top: 50px;}
.join-list { display: flex; flex-wrap: wrap; gap: 20px;}
.join-list li { width: calc(100%/4 - 15px);}
.join-list li .tit { width: 100%; border-radius: 35px; background: #034387; color: #fff; text-align: center; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; padding: 32px 0 15px; position: relative;}
.join-list li .circle { position: absolute; left: 0; right: 0; margin: auto; top: -20px; background: #034387; width: 40px; height: 40px; border-radius: 100%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 700; line-height: 1em; letter-spacing: -.03em; }
.join-list li .txtbox { padding-left: 30px; padding-top: 15px;}
.join-list li .txtbox p { position: relative; font-size: 19px; line-height: 1.666em; letter-spacing: -.03em; color: #454545; font-weight: 300; padding-left: 15px;}
.join-list li .txtbox p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 100%; top: 13px; background: #949393;}

/* 통역신청 안내 */
.sub2-box { margin-bottom: 100px;}
.sub2-box.mg { margin-bottom: 0;}
.sign-list { display: flex; flex-wrap: wrap; gap: 30px;}
.sign-list li { width: calc(100%/2 - 15px); position: relative; border-radius: 18px; padding: 60px 50px; display: flex;  overflow: hidden;}
.sign-list li.clr1 { background: #e2ecf7;}
.sign-list li.clr2 { background: #fddcdf;}
.sign-list li .tit { width: 90px; font-size: 26px; font-weight: 600; line-height: 1.4em; letter-spacing: -.03em; }
.sign-list li.clr1 .tit { color: #034387;}
.sign-list li.clr2 .tit { color: #b75e66;}
.sign-list li .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 45px;}
.sign-list li .txtbox p { font-size: 19px; line-height: 1.885em; letter-spacing: -.03em; color: #454545; font-weight: 300; }
.sign-list li .txtbox p span { color: #242424; font-weight: 400;}
.sign-list li img{ position: absolute; right: 0; bottom: 0;}
.sign-list li.clr2 img { bottom: -30px; right: 8px;}
.sign-list2 { display: flex; gap: 21px; flex-wrap: wrap;}
.sign-list2 li { width: calc(100%/7 - 18px); text-align: center; border: 5px solid #e2ecf7; border-radius: 10px; padding: 35px 0;}
.sign-list2 li .tit { line-height: 1em; margin-top: 18px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: #242424;}
.sign-list3 { border-top: 2px solid #034387; border-bottom: 1px solid #ddd; padding: 50px 0; display: flex; flex-wrap: wrap;}
.sign-list3 li { border-right: 1px solid #ddd; width: calc(100%/3); text-align: center; padding: 25px 0;}
.sign-list3 li:last-child { border-right: none;}
.sign-list3 li .tit { line-height: 1em; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #034387; margin-bottom: 30px;}
.sign-list3 li .txt { line-height: 1.6em; letter-spacing: -.03em; color: #454545; font-weight: 300; font-size: 19px;}
.sign-txtbox { margin-top: 20px; border-radius: 12px; background: #f8f8f8; padding: 35px 5px; line-height: 1.4em; font-weight: 400; letter-spacing: -.03em; color: #454545; text-align: center;}
.sub2-fx {display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; flex-wrap: wrap;}
.sub2-fx .subtit { margin-bottom: 0; }
.sub2-fx p { font-size: 18px; font-weight: 300; letter-spacing: -.03em; color: #454545; line-height: 1.3em;}
.sub2-tbl-wrap { overflow: auto;}
.sub2-tbl { margin-bottom: 30px; border-collapse: collapse; width: 100%; border-top: 2px solid #034387; border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
.sub2-tbl tr { border-bottom: 1px solid #ddd;}
.sub2-tbl tr th { font-size: 18px; line-height: 1em; letter-spacing: -.03em; color: #242424; font-weight: 500; padding: 18px 5px; border-right: 1px solid #ddd; background: #f2f5f9;}
.sub2-tbl tr th:last-child { border-right: none;}
.sub2-tbl tr td { text-align: center; border-right: 1px solid #ddd; font-size: 18px; line-height: 1.4em; color: #454545; letter-spacing: -.03em; color: #454545; font-weight: 300; padding: 12px 5px;}
.sub2-tbl tr td:last-child { border-right: none;}
.sub2-tbl tr td.left { text-align: left; padding-left: 20px;}
.sub2-tbl tr td.fw { font-weight: 500; color: #242424; line-height: 1.666em;}
.sub2-tbl tr td p { position: relative; padding-left: 14px; margin-bottom: 12px;}
.sub2-tbl tr td p::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: #e0e7f1;}
.sub2-tbl tr td p:last-child { margin-bottom: 0;}
.sub2-tbl tr td.bd { border-right: 1px solid #ddd;}
.sub2-tbl tr td.clr { background: #f2f5f9;}

/* 이동지원 신청안내 */
.mv { display: flex; align-items: center; padding: 0 120px; justify-content: space-between;}
.mv-left { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 25px;}
.mv-list li { display: flex; margin-bottom: 10px;}
.mv-list li .tit { width: 105px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; background: #034387; font-size: 19px; font-weight: 500; line-height: 1em; letter-spacing: -.03em; }
.mv-list li .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 20px; font-size: 19px; line-height: 1.666em; letter-spacing: -.03em; color: #454545; padding-top: 5px;}
.mv-box { margin:40px 0; }
.mv-box h3 { font-size: 19px; line-height: 1em; letter-spacing: -.03em; color: #242424; font-weight: 500; margin-bottom: 15px;}
.mv-tbl { margin-bottom: 30px; border-collapse: collapse; width: 100%; border-top: 2px solid #034387; border-left: 1px solid #ddd;border-right: 1px solid #ddd; max-width: 720px;}
.mv-tbl tr { border-bottom: 1px solid #ddd;}
.mv-tbl tr th { font-size: 19px; line-height: 1em; letter-spacing: -.03em; color: #242424; font-weight: 500; padding: 18px 5px; border-right: 1px solid #ddd; background: #f2f5f9;}
.mv-tbl tr th:last-child { border-right: none;}
.mv-tbl tr td { text-align: center; border-right: 1px solid #ddd; font-size: 19px; line-height: 1.4em; color: #454545; letter-spacing: -.03em; color: #454545; font-weight: 300; padding: 12px 5px;}
.mv-tbl tr td.left { text-align: left; padding-left: 20px;}
.mv-tbl tr td p { padding-left: 11px; margin-bottom: 5px; position: relative;}
.mv-tbl tr td p:last-child { margin-bottom: 0;}
.mv-tbl tr td p::before { content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; background: #454545; }
.mv .phone{ transition: .5s;}
.mv .phone:hover { transform: scale(1.05);}

/* 오시는 길 */
.lct { display: flex; flex-wrap: wrap; margin: 50px 0 30px; align-items: flex-start;}
.lct>div { width: calc(100%/2); }
.lct-box { display: flex; align-items: center;}
.lct-box.fx { align-items: flex-start;}
.lct-box .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 20px;}
.lct-box .txtbox h2 { line-height: 1em; font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: #242424;}
.lct-box .txtbox p { font-size: 18px; font-weight: 300; letter-spacing: -.03em; line-height: 1.6em; color: #242424; margin-top: 5px;}
.lct-box .txtbox p strong { font-weight: 500;}
.lct-box .txtbox p span { display: inline-block; padding-left: 72px;}
.lct-box.fx .txtbox { padding-top: 8px;}
.lct-tbl { width: 100%; border-collapse: collapse; margin-top: 30px; border-top: 2px solid #242424;}
.lct-tbl tr { border-bottom: 1px solid #ddd;}
.lct-tbl tr th { font-size: 18px; line-height: 1em; letter-spacing: -.03em; color: #242424; font-weight: 500; padding: 25px 5px; background: #f4f4f4;}
.lct-tbl tr td { text-align: left; font-size: 18px; line-height: 1.4em; color: #454545; letter-spacing: -.03em; color: #454545; font-weight: 300; padding: 18px 5px; padding-left: 30px;}
.lct-tbl tr td .name { color: #fff; margin-right: 10px; font-size: 19px; width: 48px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: #1e9121;  text-align: center;}

/* 농인의 이해 */
.df-txtfx { display: flex; border-bottom: 1px solid #ddd; padding-bottom: 42px; flex-wrap: wrap; margin-bottom: 60px;}
.df-txtfx>div { width: calc(100%/2);}
.df-txtfx h2 { font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1.3em; color: #242424; }
.df-txtfx h2 span { color: #034387; font-weight: 600; }
.df-txtfx p { font-size: 19px; font-weight: 300; letter-spacing: -.03em; line-height: 1.7em; color: #454545;}
.df-imgwrap { height: 300px; border-radius: 20px; background: url(../images/sub/sub4-1-big.jpg) center no-repeat; background-size: cover; color: #fff; padding: 55px 60px;}
.df-imgwrap h2 { font-size: 32px; font-weight: 700; line-height: 1.2em; margin-bottom: 17px; letter-spacing: -.03em; font-weight: 700; }
.df-imgwrap p { font-size: 19px; line-height: 1.7em; letter-spacing: -.03em; font-weight: 300; }
.df-list1 { margin-bottom: 25px;}
.df-list1 li { border-bottom: 1px solid #ddd; display: flex; padding: 50px 0; }
.df-list1 li .tit { width: 300px; height: 65px; border-radius: 33px; display: flex; align-items: center; justify-content: center; border: 3px solid #034387; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.3em; color: #242424;}
.df-list1 li .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 190px;}
.df-list1 li .txt p { position: relative; padding-left: 32px; font-size: 19px; font-weight: 300; letter-spacing: -.03em; color: #454545; line-height: 1.3em; margin-bottom: 18px;}
.df-list1 li .txt p:last-child { margin-bottom: 0;}
.df-list1 li .txt p::before { content: ""; position: absolute; left: 0; width: 23px; height: 20px; background-size: contain; background: url(../images/sub/chk.png) center no-repeat;}
.df-span { line-height: 1.6em; color: #454545; font-size: 18px; font-weight: 300; letter-spacing: -.03em; display: block;}
.df-imgbox { position: relative; margin-bottom: 220px;}
.df-imgbox img { border-radius: 30px;}
.df-imgbox .txtbox { border-radius: 20px 0 0 20px; padding: 55px; padding-left: 60px; background: #fff; position: absolute; right: 0; bottom: -180px; width: 85%;}
.df-imgbox .txtbox h3 { font-size: 28px; font-weight: 500; color: #242424; letter-spacing: -.03em; line-height: 1.3em; margin-bottom: 25px;}
.df-imgbox .txtbox h3 span { font-weight: 600; color: #034387;}
.df-imgbox .txtbox p { line-height: 1.7em; letter-spacing: -.03em; font-size: 19px; font-weight: 300; color: #454545;}
.df-qabox {margin-bottom: 10px; border: 1px solid #9ab4cf; border-radius: 20px; padding: 15px 40px;}
.df-qabox:last-child { margin-bottom: 0; }
.df-qabox .fx { display: flex; padding: 20px 0;}
.qa-top { border-bottom: 1px solid #034387;}
.df-qabox .fx .circle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100%; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; }
.df-qabox .fx .circle.q { background: #034387;}
.df-qabox .fx .circle.a { background: #999999;}
.df-qabox .fx h3 { font-size: 20px; font-weight: 500; line-height: 1.3em; letter-spacing: -.03em; color: #242424; flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 14px; padding-top: 6px;}
.df-qabox .fx p { font-size: 17px; line-height: 1.666em; letter-spacing: -.03em; color: #454545; font-weight: 300; flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 14px; padding-top: 6px;}
.relate { display: flex; margin-bottom: 20px; padding: 50px 0; border: 6px solid #b3c6db; border-radius: 20px; align-items: center;}
.relate.mg { margin-bottom: 0;}
.relate-left { width: 23%; text-align: center;}
.relate-left h3 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #242424; margin-top: 28px;}
.relate-right { width: 77%; padding-left: 55px; border-left: 1px solid #ddd; }
.relate-right p { font-size: 19px; line-height: 1.6em; letter-spacing: -.03em; font-weight: 300; color: #454545; position: relative; padding-left: 15px; margin-bottom: 3px;}
.relate-right p:last-child { margin-bottom: 0;}
.relate-right p::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: #454545;}
.relate-right h4 { font-size: 22px; font-weight: 500; color: #242424; letter-spacing: -.03em; line-height: 1.3em; margin: 30px 0 20px;}

/* 안산시 수어사전 */
.mapbox { text-align: center;  position: relative; height: 600px;}
.map1, .map2 { opacity: 0; position: absolute; left: 0; top: 0; right: 0; margin: auto; transition: .5s;}
.map1.active, .map2.active { display: block; opacity: 1; z-index: 1;}
.map1:hover { transform: scale(1.05);}
.map2:hover { transform: scale(1.05);}
.map-tab {display: flex; justify-content: center; margin-top: 60px; margin-bottom: 35px;}
.map-tab li { font-size: 30px; width: 160px; height: 60px; border-bottom: 1px solid #034387; font-weight: 700; letter-spacing: -.03em; color: #242424; line-height: 1em; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.map-tab li.active { border-radius: 10px 10px 0 0; color: #fff; background: #034387;}
.map-tab li:last-child.active { background: #2f8441; border-bottom: 1px solid #2f8441;}
.map-tab li.border-change { border-bottom: 1px solid #2f8441; }
[data-tab-content] { display: none;}
[data-tab-content].active { display: block; }
.map-list { display: flex; flex-wrap: wrap; gap: 50px 10px; padding: 0 250px;}
.map-list>li { width: 100px; text-align: center; }
.map-list>li>a { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1em; height: 45px; display: flex; align-items: center; justify-content: center; width: 100%; color: #242424; border-radius: 23px;}
.map-list>li>a:hover { background: #034387; color: #fff; }
.map-list>li .listsub { margin-top: 13px;}
.map-list>li .listsub li { margin-bottom: 6px;}
.map-list>li .listsub li:last-child { margin-bottom: 0;}
.map-list>li .listsub li a { font-size: 18px; font-weight: 400; color: #454545; letter-spacing: -.03em; line-height: 1em; }
.map-list>li .listsub li a:hover { text-decoration: underline; text-underline-position: under;}
.map-list2 { padding: 0 200px;}
.map-list2>li>a:hover { background: #2f8441; }
.map-view { width: 200px; height: 55px; color: #fff; display: flex; align-items: center; justify-content: center; background: #034387; margin: 40px auto 0; font-size: 16px; font-weight: 400; letter-spacing: -.03em; line-height: 1em; }

/* 후원안내 */
.sp-list { display: flex; flex-wrap: wrap; gap: 30px;}
.sp-list li { width: calc(100%/3 - 20px); text-align: center; border-radius: 16px; border: 5px solid #e2ecf7; text-align: center; padding: 60px 5px;}
.sp-list li .tit { margin: 20px 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; line-height: 1em; color: #242424;}
.sp-list li .txt { font-size: 18px; font-weight: 300; color: #454545; letter-spacing: -.03em; line-height: 1.5em;}
.sp-list2 li { display: flex; align-items: center; justify-content: center;}
.sp-txtbox { padding: 28px 50px; background: #f1f7fd; border-radius: 20px; display: flex; align-items: center; margin-top: 30px;}
.sp-txtbox .circle { width: 85px; height: 85px; border-radius: 100%; background: #fff; display: flex; align-items: center; justify-content: center; }
.sp-txtbox p { font-size: 18px; font-weight: 300; letter-spacing: -.03em; color: #242424; line-height: 1.4em; flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 30px;}