/*이사장 메시지*/ #a1 {display: flex; justify-content: space-between; align-items: center;} #a1 .imgwrap {width: 40%;} #a1 .imgwrap .pc_img {border-radius: 10px; margin-bottom: 40px; max-width: 1400px; width: 100%;} #a1 .imgwrap .mo_img {display: none;} #a1 .greetings {text-align: left; width: 55%;} #a1 .greetings h2 {font-size: 26px; line-height: 36px; margin-bottom: 30px; padding-bottom: 30px; position: relative;} #a1 .greetings h2::after {position: absolute; content: ''; width: 30px; height: 5px; bottom: 0; left: 0; background-color: #121212;} #a1 .greetings h2 span {color: #d33c31;} #a1 .greetings p {font-size: 18px; color: #121212; line-height: 30px; margin-bottom: 50px;} #a1 .greetings .ceo {text-align: right; font-size: 20px; font-weight: 500;} #a1 .greetings .ceo span {font-size: 24px; font-weight: 700; margin-left: 10px;} @media screen and (max-width: 960px) { #a1 {flex-direction: column;} #a1 .imgwrap {width: 100%;} #a1 .imgwrap .pc_img {display: none;} #a1 .imgwrap .mo_img {display: block; width: 100%; max-width: 960px; border-radius: 10px; margin-bottom: 40px;} #a1 .greetings {width: 100%;} #a1 .greetings h2 {font-size: 24px;} #a1 .greetings p {font-size: 16px; line-height: 28px;} #a1 .greetings .ceo {font-sizE: 18px;} #a1 .greetings .ceo span {font-size: 22px;} } @media screen and (max-width: 640px) { #a1 .imgwrap .mo_img {margin-bottom: 30px;} #a1 .greetings h2 {font-size: 20px; line-height: 30px;} #a1 .greetings p {font-size: 16px; line-height: 28px; margin-bottom: 40px;} #a1 .greetings .ceo {font-size: 18px;} #a1 .greetings .ceo span {font-size: 22px;} } /*이사장 메시지*/ /*설립목적 / 조직*/ #a2 .con {margin-bottom: 70px;} #a2 .con:last-child {margin-bottom: 0;} #a2 .con h2 {font-size: 30px; position: relative; padding-left: 30px; margin-bottom: 10px;} #a2 .con h2::after {position: absolute; content: ''; width: 20px; height: 20px; background-color: #fff; left: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-radius: 50%; background-origin: border-box; background-clip: content-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(to left, #d33c31 0%, #ff9766 100%);} #a2 .con p {font-size: 18px; color: #666; margin-bottom: 50px;} #a2 .con1 .incon {display: flex; align-items: flex-start; margin-bottom: 50px; position: relative;} #a2 .con1 .incon:last-child {margin-bottom: 0;} #a2 .con1 .incon h3 {font-size: 24px; margin-bottom: 50px; position: relative; padding-left: 15px; width: 20%;} #a2 .con1 .incon h3::after {position: absolute; content: ''; width: 4px; height: 80%; background-color: #8dc964; top: 50%; left: 0; transform: translateY(-50%);} #a2 .con1 .incon ul {width: 80%;} #a2 .con1 .incon ul li:first-child {font-size: 20px; font-weight: 600; margin-bottom: 15px;} #a2 .con1 .incon ul li:last-child {font-size: 18px; color: #555;} #a2 .con1 .incon:last-child ul {display: flex;} #a2 .con1 .incon:last-child ul li {width: 150px; height: 150px; font-size: 20px; font-weight: 600; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 20px;} #a2 .con1 .incon:last-child ul li:last-child {margin-right: 0;} #a2 .con1 .incon:last-child ul li:nth-child(1) {border: 5px solid #25ae5a; color: #25ae5a;} #a2 .con1 .incon:last-child ul li:nth-child(2) {border: 5px solid #f08c42; color: #f08c42;} #a2 .con1 .incon:last-child ul li:nth-child(3) {border: 5px solid #5086c6; color: #5086c6;} #a2 .con1 .incon:last-child ul li:nth-child(4) {border: 5px solid #ec7885; color: #ec7885;} #a2 .con2 .inconwrap {display: flex; justify-content: space-between; margin-bottom: 50px;} #a2 .con2 .inconwrap:last-child {margin-bottom: 0;} #a2 .con2 .inconwrap .incon {width: 49%;} #a2 .con2 .inconwrap .incon h3 {font-size: 24px; margin-bottom: 20px; position: relative; padding-left: 15px;} #a2 .con2 .inconwrap .incon h3::after {position: absolute; content: ''; width: 4px; height: 80%; background-color: #8dc964; top: 50%; left: 0; transform: translateY(-50%);} #a2 .con2 .inconwrap .incon table {width: 100%; border-collapse: collapse; border-top: 2px solid #6b964d; border-bottom: 2px solid #6b964d;} #a2 .con2 .inconwrap .incon table th {background-color: #eaf0e6; padding: 15px 0; font-size: 16px; border-bottom: 1px solid #fff; width: 30%} #a2 .con2 .inconwrap .incon table tr:last-child th {border-bottom: 0;} #a2 .con2 .inconwrap .incon table td {padding: 15px; font-size: 16px; width: 70%; border-bottom: 1px solid #ddd;} #a2 .con2 .inconwrap .incon table tr:last-child td {border-bottom: 0;} #a2 .con2 .inconwrap .incon2 {width: 100%;} #a2 .con2 .inconwrap .incon2 .inbox {display: flex; justify-content: space-between;} #a2 .con2 .inconwrap .incon2 .inbox .box {width:32.333%;} #a2 .con2 .inconwrap .incon2 .inbox .box h4 {font-size: 20px; text-align: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #679f40; color: #679f40;} #a2 .con2 .inconwrap .incon2 .inbox .box ul {text-align: center; font-size: 18px; font-weight: 500;} #a2 .con2 .inconwrap .incon2 .inbox .box ul li {margin-bottom: 10px;} #a2 .con2 .inconwrap .incon2 .inbox .box ul li:last-child {margin-bottom: 0;} @media screen and (max-width: 960px) { #a2 .con h2 {font-size: 24px;} #a2 .con p {font-size: 16px; margin-bottom: 40px;} #a2 .con1 .incon h3 {font-size: 20px;} #a2 .con1 .incon ul li:first-child {font-size: 18px;} #a2 .con1 .incon ul li:last-child {font-size: 16px; line-height: 26px;} #a2 .con1 .incon:last-child ul li {width: 130px; height: 130px; font-size: 18px;} #a2 .con2 .inconwrap .incon h3 {font-size: 20px;} #a2 .con2 .inconwrap .incon table th {font-size: 14px; padding: 10px 0;} #a2 .con2 .inconwrap .incon table td {font-size: 14px; padding: 10px;} #a2 .con2 .inconwrap .incon2 .inbox .box h4 {font-size: 18px; margin-bottom: 15px; padding-bottom: 15px;} #a2 .con2 .inconwrap .incon2 .inbox .box ul {font-size: 16px;} } @media screen and (max-width: 640px) { #a2 .con {margin-bottom: 50px;} #a2 .con h2 {font-size: 20px; padding-left: 25px;} #a2 .con h2::after {width: 17px; height: 17px; border: 4px solid transparent;} #a2 .con p {font-size: 14px; margin-bottom: 30px;} #a2 .con1 .incon {flex-direction: column; margin-bottom: 30px;} #a2 .con1 .incon h3 {font-size: 18px; margin-bottom: 20px; width: 100%;} #a2 .con1 .incon ul {width: 100%;} #a2 .con1 .incon ul li:first-child {font-size: 16px; margin-bottom: 5px;} #a2 .con1 .incon ul li:last-child {font-size: 14px; line-height: 24px;} #a2 .con1 .incon:last-child ul {flex-wrap: wrap; justify-content: space-between;} #a2 .con1 .incon:last-child ul li {width: 49%; height: auto; margin-right: 0; border-radius: 5px; padding: 10px 0; font-size: 14px; line-height: normal;} #a2 .con1 .incon:last-child ul li:nth-child(1) {border: 0; background-color: #e9fff2; color: #25ae5a; margin-bottom: 2%} #a2 .con1 .incon:last-child ul li:nth-child(2) {border: 0; background-color: #fff1e6; color: #f08c42; margin-bottom: 2%;} #a2 .con1 .incon:last-child ul li:nth-child(3) {border: 0; background-color: #e9f3ff; color: #5086c6;} #a2 .con1 .incon:last-child ul li:nth-child(4) {border: 0; background-color: #ffecee; color: #ec7885;} #a2 .con2 .inconwrap {flex-direction: column;} #a2 .con2 .inconwrap .incon {width: 100%;} #a2 .con2 .inconwrap .incon:first-child {margin-bottom: 20px;} #a2 .con2 .inconwrap .incon h3 {font-size: 18px;} #a2 .con2 .inconwrap .incon table th {font-size: 12px;} #a2 .con2 .inconwrap .incon table td {font-size: 12px;} #a2 .con2 .inconwrap .incon2 .inbox {flex-direction: column;} #a2 .con2 .inconwrap .incon2 .inbox .box {width: 100%; background-color: #f5f5f5; margin-bottom: 20px; padding: 20px;} #a2 .con2 .inconwrap .incon2 .inbox .box:last-child {margin-bottom: 0;} #a2 .con2 .inconwrap .incon2 .inbox .box h4 {font-size: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 0; position: relative;} #a2 .con2 .inconwrap .incon2 .inbox .box h4::after {position: absolute; content: ''; width: 20px; height: 3px; background-color: #6b964d; bottom: 0; left: 50%; transform: translateX(-50%);} #a2 .con2 .inconwrap .incon2 .inbox .box ul li {margin-bottom: 5px;} } /*설립목적 / 조직*/ /* 오시는길 */ #a4 .conwrap {display: flex; justify-content: space-between; align-items: flex-end;} #a4 .conwrap .leftcon {width: 55%; border: 1px solid #ddd;} #a4 .conwrap .leftcon .root_daum_roughmap .wrap_controllers {display: none;} #a4 .conwrap .leftcon .root_daum_roughmap .map_border {display: none;} #a4 .conwrap .rightcon {width: 40%;} #a4 .conwrap .rightcon h2 {font-size: 30px; display: flex; align-items: center; margin-bottom: 30px;} #a4 .conwrap .rightcon h2 img {height: 30px; margin-right: 10px;} #a4 .conwrap .rightcon ul li {font-size: 18px; margin-bottom: 20px; color: #666;} #a4 .conwrap .rightcon ul li:last-child {margin-bottom: 0;} #a4 .conwrap .rightcon ul li span {width: 100px; display: inline-block; font-weight: 700; color: #121212;} @media screen and (max-width: 960px) { #a4 .conwrap {flex-direction: column;} #a4 .conwrap .leftcon {width: 100%; margin-bottom: 50px;} #a4 .conwrap .rightcon {width: 100%;} #a4 .conwrap .rightcon h2 {font-size: 24px; margin-bottom: 20px;} #a4 .conwrap .rightcon h2 img {height: 24px;} #a4 .conwrap .rightcon ul li {font-size: 16px; margin-bottom: 15px;} } @media screen and (max-width: 640px) { #a4 .conwrap .leftcon .wrap_map {height: 400px !important;} #a4 .conwrap .rightcon h2 {font-size: 20px;} #a4 .conwrap .rightcon h2 img {height: 20px;} #a4 .conwrap .rightcon ul li {font-size: 14px; margin-bottom: 10px;} #a4 .conwrap .rightcon ul li span {width: 80px;} } /* 오시는길 */ /*우선구매인증 및 구매효과*/ #c1 {} #c1 p.subtit {font-size: 18px; text-align: center; font-weight: 500; color: #555; margin-bottom: 50px; padding-bottom: 20px; position: relative;} #c1 p.subtit::after {position: absolute; content: ''; width: 30px; height: 2px; background-color: #d33c31; bottom: 0; left: 50%; transform: translateX(-50%);} #c1 .con .incon {display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;} #c1 .con .incon:last-child {margin-bottom: 0;} #c1 .con .incon:nth-child(2n) {flex-direction: row-reverse;} #c1 .con .incon .imgwrap {width: 40%;} #c1 .con .incon .imgwrap img {width: 100%; border-radius: 20px;} #c1 .con .incon .txtwrap {width: 55%;} #c1 .con .incon .txtwrap h2 {font-size: 26px; margin-bottom: 5px;} #c1 .con .incon .txtwrap h3 {font-size: 20px; font-weight: 500; color: #555; margin-bottom: 20px;} #c1 .con .incon .txtwrap p {font-size: 18px; line-height: 28px; color: #888;} @media screen and (max-width: 960px) { #c1 p.subtit {font-size: 16px; margin-bottom: 40px;} #c1 .con .incon .imgwrap {width: 45%;} #c1 .con .incon .txtwrap {width: 50%;} #c1 .con .incon .txtwrap h2 {font-size: 24px;} #c1 .con .incon .txtwrap h3 {font-size: 18px;} #c1 .con .incon .txtwrap p {font-size: 16px; line-height: 26px;} } @media screen and (max-width: 640px) { #c1 p.subtit {font-size: 14px; line-height: 24px; margin-bottom: 30px;} #c1 .con .incon {flex-direction: column;} #c1 .con .incon .imgwrap {width: 100%; margin-bottom: 20px;} #c1 .con .incon:nth-child(2n) {flex-direction: column;} #c1 .con .incon .txtwrap {width: 100%; padding: 0 15px;} #c1 .con .incon .txtwrap h2 {font-size: 20px;} #c1 .con .incon .txtwrap h3 {font-size: 16px; margin-bottom: 10px;} #c1 .con .incon .txtwrap p {font-size: 14px; line-height: 24px;} } /*우선구매인증 및 구매효과*/ /*생산품 구매효과 / 경영평가 지표*/ #c2 {} #c2 p.subtit {font-size: 18px; text-align: center; font-weight: 500; color: #555; margin-bottom: 50px; padding-bottom: 20px; position: relative;} #c2 p.subtit::after {position: absolute; content: ''; width: 30px; height: 2px; background-color: #d33c31; bottom: 0; left: 50%; transform: translateX(-50%);} #c2 .con {margin-bottom: 70px;} #c2 .con:last-child {margin-bottom: 0;} #c2 .con h2 {font-size: 30px; position: relative; padding-left: 30px; margin-bottom: 30px;} #c2 .con h2::after {position: absolute; content: ''; width: 20px; height: 20px; background-color: #fff; left: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-radius: 50%; background-origin: border-box; background-clip: content-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(to left, #d33c31 0%, #ff9766 100%);} #c2 .con1 img {max-width: 800px; display: block; margin: 0 auto; width: 100%;} #c2 .con2 table {width: 100%; border-collapse: collapse; border-top: 2px solid #d33c31;} #c2 .con2 table th {background-color: #fff0ef; padding: 15px 0; width: 70%; font-size: 16px;} #c2 .con2 table th:first-child {border-right: 1px solid #fff;} #c2 .con2 table td {padding: 15px 0; border-bottom: 1px solid #eee; width: 30%; font-size: 16px; border-right: 1px solid #eee; text-align: center;} #c2 .con2 table td:last-child {border-right: 0;} @media screen and (max-width: 960px) { #c2 p.subtit {font-size: 16px; margin-bottom: 40px;} #c2 .con h2 {font-size: 24px;} #c2 .con2 table th {font-size: 14px;} #c2 .con2 table td {font-size: 14px;} } @media screen and (max-width: 640px) { #c2 p.subtit {font-size: 14px; line-height: 24px; margin-bottom: 30px;} #c2 .con {margin-bottom: 50px;} #c2 .con h2 {font-size: 20px; padding-left: 25px; margin-bottom: 10px;} #c2 .con h2::after {width: 17px; height: 17px; border: 4px solid transparent;} #c2 .con2 table th {font-size: 12px; padding: 10px 0;} #c2 .con2 table td {font-size: 12px; padding: 10px 0;} } /*생산품 구매효과 / 경영평가 지표*/ /* 생산품목 */ #c3 {} #c3 p.subtit {font-size: 18px; text-align: center; font-weight: 500; color: #555; margin-bottom: 50px; padding-bottom: 20px; position: relative;} #c3 p.subtit::after {position: absolute; content: ''; width: 30px; height: 2px; background-color: #d33c31; bottom: 0; left: 50%; transform: translateX(-50%);} #c3 .conwrap {display: flex; flex-wrap: wrap; justify-content: space-between;} #c3 .conwrap .con {width: 45%; margin-bottom: 10%; background-color: #f5f5f5; border-radius: 20px; position: relative; transition-duration: 0.5s;} #c3 .conwrap .con a {display: block; padding: 50px; height: 450px;} #c3 .conwrap .con h2 {font-size: 30px; margin-bottom: 20px; padding-bottom: 20px; position: relative; transition-duration: 0.5s;} #c3 .conwrap .con h2::after {position: absolute; content: ''; width: 20px; height: 4px; background-color: #121212; bottom: 0; left: 0; transition-duration: 0.5s;} #c3 .conwrap .con ul li {display: inline-block; position: relative; margin-right: 5px; padding-right: 10px; font-size: 16px; margin-bottom: 10px; font-weight: 500; color: #777; transition-duration: 0.5s;} #c3 .conwrap .con ul li:last-child {padding-right: 0; margin-right: 0;} #c3 .conwrap .con ul li::after {position: absolute; content: ''; width: 1px; height: 80%; background-color: #aaa; right: 0; top: 50%; transform: translateY(-50%); transition-duration: 0.5s;} #c3 .conwrap .con ul li:last-child::after {display: none;} #c3 .conwrap .con .morebtn {position: absolute; bottom: 50px; transform: rotateZ(0deg); transition-duration: 0.5s;} #c3 .conwrap .con .product {position: absolute; bottom: -50px; right: -100px;} /* hover */ #c3 .conwrap .con:hover {background-color: #d33c31; transition-duration: 0.5s;} #c3 .conwrap .con:hover h2 {color: #fff; transition-duration: 0.5s;} #c3 .conwrap .con:hover h2::after {background-color: #fff; transition-duration: 0.5s;} #c3 .conwrap .con:hover ul li {color: rgba(255,255,255,.8); transition-duration: 0.5s;} #c3 .conwrap .con:hover ul li::after {background-color: rgba(255,255,255,.6); transition-duration: 0.5s;} #c3 .conwrap .con:hover .morebtn {transform: rotateZ(180deg); transition-duration: 0.5s;} /* hover */ @media screen and (max-width: 960px) { #c3 p.subtit {font-size: 16px; margin-bottom: 40px;} #c3 .conwrap .con {width: 49%; margin-bottom: 2%;} #c3 .conwrap .con a {height: 380px; padding: 40px;} #c3 .conwrap .con h2 {font-size: 24px;} #c3 .conwrap .con ul li {font-size: 15px; margin-bottom: 5px;} #c3 .conwrap .con .product {display: none;} } @media screen and (max-width: 640px) { #c3 p.subtit {font-size: 14px; line-height: 24px; margin-bottom: 30px;} #c3 .conwrap {flex-direction: column;} #c3 .conwrap .con {width: 100%; margin-bottom: 3%;} #c3 .conwrap .con a {height: 300px;} #c3 .conwrap .con h2 {font-size: 20px;} #c3 .conwrap .con ul li {font-size: 14px;} #c3 .conwrap .con .morebtn img {height: 40px;} } /* 생산품목 */ /* 생산품 구매방법 */ #c4 p.subtit {font-size: 18px; text-align: center; font-weight: 500; color: #555; margin-bottom: 50px; padding-bottom: 20px; position: relative;} #c4 p.subtit::after {position: absolute; content: ''; width: 30px; height: 2px; background-color: #d33c31; bottom: 0; left: 50%; transform: translateX(-50%);} #c4 .con .imgwrap {display: flex; justify-content: space-between; max-width: 1000px; margin: 0 auto 50px;} #c4 .con .imgwrap li img {width: 100%;} #c4 .con .txtwrap {padding: 30px; background-color: #f5f5f5; border-radius: 20px;} #c4 .con .txtwrap li {font-size: 18px; font-weight: 400; color: #555; margin-bottom: 10px; text-align: center; font-weight: 500;} #c4 .con .txtwrap li:last-child {margin-bottom: 0;} @media screen and (max-width: 960px) { #c4 p.subtit {font-size: 16px; margin-bottom: 40px;} #c4 .con .imgwrap {justify-content: center; margin-bottom: 40px;} #c4 .con .imgwrap li {margin-right: 20px;} #c4 .con .imgwrap li:last-child {margin-right: 0;} #c4 .con .txtwrap li {font-size: 16px;} } @media screen and (max-width: 640px) { #c4 p.subtit {font-size: 14px; line-height: 24px; margin-bottom: 30px;} #c4 .con .imgwrap {margin-bottom: 30px;} #c4 .con .imgwrap li {margin-right: 10px;} #c4 .con .txtwrap li {font-size: 14px;} } /* 생산품 구매방법 */ /* 관련법령*/ #c5 {} #c5 .con {margin-bottom: 70px;} #c5 .con:last-child {margin-bottom: 0;} #c5 .con > h2 {font-size: 30px; position: relative; padding-left: 30px; margin-bottom: 30px;} #c5 .con > h2::after {position: absolute; content: ''; width: 20px; height: 20px; background-color: #fff; left: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-radius: 50%; background-origin: border-box; background-clip: content-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(to left, #d33c31 0%, #ff9766 100%);} #c5 .con .inconwrap .incon {display: flex; flex-direction: column; border: 1px solid #d33c31; padding: 30px; margin-bottom: 20px;} #c5 .con .inconwrap .incon:last-child {margin-bottom: 0;} #c5 .con .inconwrap .incon h3 {font-size: 24px; color: #d33c31; margin-bottom: 20px;} #c5 .con .inconwrap .incon ul {font-size: 18px; font-weight: 400; color: #666;} #c5 .con .inconwrap .incon ul li {margin-bottom: 10px; position: relative; padding-left: 15px;} #c5 .con .inconwrap .incon ul li:last-child {margin-bottom: 0;} #c5 .con .inconwrap .incon ul li::after {position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #d33c31; left: 0; top: 50%; transform: translateY(-50%);} #c5 .con2 .inconwrap {display: flex; flex-direction: column; border-top: 2px solid #121212; border-bottom: 2px solid #121212;} #c5 .con .inconwrap .incon2 {padding: 30px; border-bottom: 1px dashed #ddd;} #c5 .con .inconwrap .incon2:last-child {border-bottom: 0;} #c5 .con .inconwrap .incon2 > div {position: relative; font-size: 18px; margin-bottom: 20px; line-height: 28px;} #c5 .con .inconwrap .incon2 > div:last-child {margin-bottom: 0;} #c5 .con .inconwrap .incon2 > div h3 {color: #fff; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; float: left; margin-right: 20px;} #c5 .con .inconwrap .incon2 > div.qus h3 {background-color: #999;} #c5 .con .inconwrap .incon2 > div.ans h3 {background-color: #d33c31;} #c5 .con .inconwrap .incon2 > div p {display: flex; flex-direction: column;} #c5 .con .inconwrap .incon2 > div p span {display: flex; font-size: 16px; color: #888; margin-top: 5px;} @media screen and (max-width: 960px) { #c5 .con h2 {font-size: 24px;} #c5 .con .inconwrap .incon {padding: 25px;} #c5 .con .inconwrap .incon h3 {font-size: 20px; margin-bottom: 15px;} #c5 .con .inconwrap .incon ul {font-size: 16px;} #c5 .con .inconwrap .incon2 {padding: 25px;} #c5 .con .inconwrap .incon2 > div {font-size: 16px; line-height: 26px;} #c5 .con .inconwrap .incon2 > div h3 {width: 25px; height: 25px; line-height: 25px;} #c5 .con .inconwrap .incon2 > div p span {font-size: 14px;} } @media screen and (max-width: 640px) { #c5 .con {margin-bottom: 50px;} #c5 .con h2 {font-size: 20px; padding-left: 25px; margin-bottom: 10px;} #c5 .con h2::after {width: 17px; height: 17px; border: 4px solid transparent;} #c5 .con .inconwrap .incon h3 {font-size: 18px;} #c5 .con .inconwrap .incon ul {font-size: 14px;} #c5 .con .inconwrap .incon2 > div {font-size: 14px; line-height: 24px;} #c5 .con .inconwrap .incon2 > div h3 {width: 20px; height: 20px; line-height: 20px; margin-right: 10px;} #c5 .con .inconwrap .incon2 > div p span {font-size: 12px;} } /* 관련법령*/ /* 직업재활 */ #f1 .con {margin-bottom: 70px;} #f1 .con > h2 {font-size: 30px; position: relative; padding-left: 30px; margin-bottom: 10px;} #f1 .con > h2::after {position: absolute; content: ''; width: 20px; height: 20px; background-color: #fff; left: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-radius: 50%; background-origin: border-box; background-clip: content-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(to left, #d33c31 0%, #ff9766 100%);} #f1 .con > p {font-size: 18px; color: #666; margin-bottom: 50px;} #f1 .con .incon h3 {font-size: 24px; margin-bottom: 20px; position: relative; padding-left: 15px; width: 20%;} #f1 .con .incon h3::after {position: absolute; content: ''; width: 4px; height: 80%; background-color: #8dc964; top: 50%; left: 0; transform: translateY(-50%);} #f1 .con1 > ul > li {display: flex; align-items: center; background-color: #f7f7f7; margin-bottom: 40px;} #f1 .con1 > ul > li:last-child {margin-bottom: 0;} #f1 .con1 > ul > li .imgwrap {width: 39%;} #f1 .con1 > ul > li .imgwrap img {width: 100%;} #f1 .con1 > ul > li > ul {width: 61%; padding: 50px;} #f1 .con1 > ul > li > ul h3 {font-size: 24px; margin-bottom: 20px;} #f1 .con1 > ul > li > ul > li {font-size: 18px; color: #666; margin-bottom: 10px; font-weight: 500; position: relative; padding-left: 15px;} #f1 .con1 > ul > li > ul > li:last-child {margin-bottom: 0;} #f1 .con1 > ul > li > ul > li::after {position: absolute; content: ''; width: 3px; height: 3px; background-color: #666; border-radius: 50%; top: 50%; left: 0; transform: translateY(-50%);} #f1 .con2 h2 {margin-bottom: 50px;} #f1 .con2 ul {border-top: 2px solid #121212; border-bottom: 2px solid #121212;} #f1 .con2 ul li {padding: 40px 20px; border-bottom: 1px dashed #eee;} #f1 .con2 ul li:last-child {border-bottom: 0;} #f1 .con2 ul li h3 {font-size: 24px; margin-bottom: 10px; } #f1 .con2 ul li h3 span {width: 30px; height: 30px; background-color: #121212; color: #fff; display: inline-block; border-radius: 50%; text-align: center; line-height: 30px; margin-right: 10px; font-size: 20px;} #f1 .con2 ul li p {font-size: 18px; line-height: 28px; color: #666;} #f1 .con3 h2 {margin-bottom: 50px;} #f1 .con3 .incon {margin-bottom: 30px;} #f1 .con3 .incon:last-child {margin-bottom: 0;} #f1 .con3 .incon ul li {font-size: 18px; color: #666; margin-bottom: 10px; position: relative; padding-left: 15px;} #f1 .con3 .incon ul li:last-child {margin-bottom: 0;} #f1 .con3 .incon ul li::after {position: absolute; content: ''; width: 3px; height: 3px; background-color: #666; border-radius: 50%; top: 50%; left: 0; transform: translateY(-50%);} @media screen and (max-width: 960px) { #f1 .con > h2 {font-size: 24px; margin-bottom: 40px;} #f1 .con > p {font-size: 16px; margin-bottom: 40px; line-height: 26px;} #f1 .con1 > h2 {margin-bottom: 10px;} #f1 .con .incon h3 {font-size: 20px;} #f1 .con1 > ul > li > ul {padding: 40px;} #f1 .con1 > ul > li > ul h3 {font-size: 20px;} #f1 .con1 > ul > li > ul > li {font-size: 16px; padding-left: 10px; line-height: 26px;} #f1 .con2 ul li {padding: 30px 15px;} #f1 .con2 ul li h3 {font-size: 20px; margin-bottom: 10px;} #f1 .con2 ul li h3 span {font-size: 16px; width: 26px; height: 26px; line-height: 26px;} #f1 .con2 ul li p {font-size: 16px; line-height: 26px;} #f1 .con3 .incon ul li {font-size: 16px; padding-left: 10px;} } @media screen and (max-width: 640px) { #f1 .con {margin-bottom: 50px;} #f1 .con > h2 {font-size: 20px; padding-left: 25px;} #f1 .con > h2::after {width: 17px; height: 17px; border: 4px solid transparent;} #f1 .con > p {font-size: 14px; margin-bottom: 30px;} #f1 .con .incon h3 {font-size: 18px; margin-bottom: 20px; width: 100%;} #f1 .con1 > ul > li {flex-direction: column;} #f1 .con1 > ul > li .imgwrap {width: 100%;} #f1 .con1 > ul > li > ul {width: 100%; padding: 30px;} #f1 .con1 > ul > li > ul h3 {font-size: 18px;} #f1 .con1 > ul > li > ul > li {margin-bottom: 5px;} #f1 .con2 ul li {padding: 20px 15px;} #f1 .con2 ul li h3 {font-size: 18px;} #f1 .con2 ul li h3 span {font-size: 14px; width: 22px; height: 22px; line-height: 22px;} #f1 .con2 ul li p {font-size: 14px; line-height: 24px;} #f1 .con3 .incon ul li {font-size: 14px;} } /* 직업재활 */ /* 후원안내 */ #f2 > p {font-size: 18px; line-height: 28px; font-weight: 500; margin-bottom: 50px; text-align: center; background-color: #f7f7f7; border-radius: 10px; padding: 20px;} #f2 .con {margin-bottom: 70px;} #f2 .con:last-child {margin-bottom: 0;} #f2 .con h2 {font-size: 30px; position: relative; padding-left: 30px; margin-bottom: 30px;} #f2 .con h2::after {position: absolute; content: ''; width: 20px; height: 20px; background-color: #fff; left: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-radius: 50%; background-origin: border-box; background-clip: content-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(to left, #d33c31 0%, #ff9766 100%);} #f2 .con1 table {width: 100%; border-collapse: collapse; border-top: 2px solid #6b964d;} #f2 .con1 table th {background-color: #eaf0e6; padding: 20px; font-size: 16px; border-bottom: 1px solid #fff; width: 20%;} #f2 .con1 table td {width: 80%; padding: 20px; border-bottom: 1px solid #eee; font-size: 16px;} #f2 .con2 h4 {font-size: 20px; background-color: #fff3f3; padding: 20px; border-radius: 10px; font-weight: 600; margin-bottom: 10px;} #f2 .con2 p {font-size: 16px; color: #d33c31; text-align: right; font-weight: 500;} @media screen and (max-width: 960px) { #f2 > p {font-size: 16px; line-height: 26px; margin-bottom: 40px;} #f2 .con h2 {font-size: 24px;} #f2 .con1 table th {font-size: 14px; padding: 15px;} #f2 .con1 table td {font-size: 14px; padding: 15px;} #f2 .con2 h4 {font-size: 18px;} #f2 .con2 p {font-size: 15px;} } @media screen and (max-width: 640px) { #f2 > p {font-size: 14px; line-height: 24px; margin-bottom: 30px;} #f2 .con {margin-bottom:50px;} #f2 .con h2 {font-size: 20px; padding-left: 25px; margin-bottom: 20px;} #f2 .con h2::after {width: 17px; height: 17px; border: 4px solid transparent;} #f2 .con1 table th {font-size: 12px;} #f2 .con1 table td {font-size: 12px;} #f2 .con2 h4 {font-size: 16px;} #f2 .con2 p {font-size: 14px;} } /* 후원안내 */ /* 시설안내 */ #f3 p {font-size: 18px; background-color: #f7f7f7; padding: 20px; border-radius: 20px; line-height: 28px; text-align: center;} @media screen and (max-width: 960px) { #f3 p {font-size: 16px; line-height: 26px;} } @media screen and (max-width: 640px) { #f3 p {font-size: 14px; line-height: 24px;} } /* 시설안내 */