@charset "utf-8";

/* 인사말 */
.greetingWrap {width: 100%; margin-top: 200px;}
.greetingWrap .tit {font-family: 'GmarketSans'; font-size: 24px; color: #268c7f; line-height: 170%; margin-bottom: 50px; margin-left: 30px; word-break: keep-all;}
.greetingWrap .tit span {font-family: 'GmarketSans'; color: #e67316;}

.greetingWrap .txtBox {width: 100%; padding: 60px 50px; box-sizing: border-box; background-color: #f8f8f8; border-radius: 15px; position: relative;}
.greetingWrap .txtBox::before {content: ''; position: absolute; top: -304px; right: 0; background: url('/images/Farm/images/content/01/farmBg.png') no-repeat; background-size: 100%; width: 654px; height: 304px;}
.greetingWrap .txtBox .txt {font-family: 'NotoKrM'; color: #000; word-break: keep-all;}

@media screen and (max-width: 1600px) {
    .greetingWrap .txtBox::before {background-size: 80%; top: -242px; right: -105px;}
}

@media screen and (max-width: 1400px) {
    .greetingWrap {margin-top: 0;}
    .greetingWrap .tit {margin-bottom: 30px;}
    .greetingWrap .txtBox {padding: 40px 30px;}
    .greetingWrap .txtBox::before {display: none;}
}

@media screen and (max-width: 1025px) {
    .greetingWrap .tit {margin-bottom: 15px; font-size: 22px;}
    .greetingWrap .txtBox {padding: 25px 30px;}
}

@media screen and (max-width: 480px) {
    .greetingWrap .tit {font-size: 18px; margin-left: 10px;}
    .greetingWrap .txtBox {padding: 20px;}
}     

/* 농촌지도사업 */
.halfBox {width: 100%; display: flex; justify-content: space-between;}
.halfBox>div {width: 48%;}

@media screen and (max-width: 1025px) {
    .halfBox {flex-wrap: wrap;}
    .halfBox>div {width: 100%;}
}

/* 부서-직원현황 */
.departmentWrap {width: 100%; padding: 30px 100px; box-sizing: border-box;}
.departmentWrap .departmentBox {width: 100%; display: flex; flex-direction: column; align-items: center;}

.departmentWrap .title {position: relative; background-color: #268c7f; width: 190px; height: 190px; font-size: 16px; font-family: 'GmarketSansTTFLight'; line-height: 1.6; border-radius: 50%; box-sizing: border-box; margin-bottom: 130px; display: flex; align-items: center; justify-content: center;}
.departmentWrap .title a {color: #fff; margin-top: 28px; padding: 50px 20px; text-align: center;}
.departmentWrap .title::before {content: ''; width: 1px; height: 72px; position: absolute; bottom: -72px; left: 50%; background-color: #dbdbdb;}
.departmentWrap .title span {font-size: 22px; font-family: 'GmarketSansTTFMedium';}

.departmentWrap .list {position: relative; display: flex; justify-content: space-between;}
.departmentWrap .list::before {content: ''; display: block; position: absolute; top: -58px; left: 50%; transform: translateX(-50%);  width: 51%; height: 1px; background-color: #dbdbdb;}
.departmentWrap .list .first, .departmentWrap .list .second { width: 49%;} 
.departmentWrap .leader {position: relative; background-color: #555; border-radius: 10px; width: 100%; height: 53px; display: block; color: #fff; text-align: center; font-size: 16px; font-family: 'NotoKrR'; padding: 16px; margin-bottom: 25px; box-sizing: border-box;}
.departmentWrap .leader::before {content: ''; width: 1px; height: 58px; position: absolute; top: -58px; left: 50%; background-color: #dbdbdb;}
.departmentWrap .tabBtn {position: relative; background-color: #f4f4f4; border-radius: 10px; display: inline-block; width: calc(50% - 11px); margin-bottom: 20px; margin-right: 15px;}
.departmentWrap .tabBtn::before {content: ''; position: absolute; top: 50%; right: 18px; transform: translateY(-50%); background: url('/images/Farm/images/content/01/next-arrow-gray.png') no-repeat; width: 20px; height: 20px;}
.departmentWrap .tabBtn:nth-child(2n) {margin-right: 0;}
.departmentWrap .tabBtn a {font-size: 16px; font-family: 'NotoKrR'; color: #000; letter-spacing: -0.02em; line-height: 1; padding: 20px; display: block; white-space: nowrap;}

@media screen and (max-width: 1290px) {
    .departmentWrap {padding: 30px 50px;}
    .departmentWrap .list .first {margin-right: 25px;}
}
@media screen and (max-width: 780px) {
    .departmentWrap .list {flex-wrap: wrap;}
    .departmentWrap .list .first, .departmentWrap .list .second {width: 100%; margin-right: 0;}
    .departmentWrap .list .first {margin-bottom: 40px;}
    .departmentWrap .list::before, .departmentWrap .leader::before {display: none;}
    .departmentWrap .title {margin-bottom: 70px;}
}
@media screen and (max-width: 480px) {
    .departmentWrap {padding: 0;}
    .departmentWrap .title {margin-bottom: 55px;}
    .departmentWrap .list .first {margin-right: 0; margin-bottom: 20px;}
    .departmentWrap .tabBtn {margin-bottom: 15px; margin-right: 10px;}
    .departmentWrap .leader {margin-bottom: 20px;}
}
@media screen and (max-width: 360px) {
    .departmentWrap .title {margin-bottom: 45px;}
    .departmentWrap .leader, .departmentWrap .tabBtn {margin-bottom: 15px;}
    .departmentWrap .tabBtn {width: 100%;}
    .departmentWrap .leader::before {display: block; height: 36px; top: -36px;}
}



/* 연혁 및 기능 */
.farm_history {}
.farm_history ul {letter-spacing: -0.05em;}
.farm_history .year>ul {position: relative;}
.farm_history ul::before {content: ''; display: block; position: absolute; top: -24px; left: 93px; width: 1px; height: 100%; background-color: #268c7f;}
.farm_history ul li {display: flex; margin-bottom: 50px;}
.farm_history ul li.row>div {display: flex; flex-direction: column;}
.farm_history ul li.row>div p {display: inline-block;}
.farm_history ul li strong {font-size: 22px; color: #268c7f; font-family: 'jalnan'; margin-right: 75px;}
.farm_history ul li span {position: relative; font-size: 18px; color: #333; font-family: 'GmarketSans'; margin-right: 35px;}
.farm_history ul li span::before {content: ''; display: block; position: absolute; top: 4px; right: -19px; width: 1px; height: 11px; background-color: #d5d5d5;}
.farm_history ul li span::after {content: ''; display: block; position: absolute; top: 1px; left: -43px; width: 7px; height: 7px; border-radius: 50%; background-color: #fff; border: 5px solid #268c7f; z-index: 1;}
.farm_history ul li span.le42::after {left: -42px;}
.farm_history ul li span.le41::after {left: -41px;}
.farm_history ul li span.le44::after {left: -44px;}
.farm_history ul li span.le39::after {left: -39px;}
.farm_history ul li div {}
.farm_history ul li div p {font-size: 15px; font-family: 'NotoKrM'; margin-bottom: 20px; line-height: 1;}
.farm_history ul li div ul {}
.farm_history ul li div ul li {font-size: 15px;}

@media screen and (max-width: 879px) {
    .farm_history ul li {flex-direction: column;}
    .farm_history ul li span, .farm_history ul li div {margin-left: 128px;}
    .farm_history ul li span {margin-top: -21px; margin-bottom: 8px;}
    .farm_history ul li span::before {left: 100px;}
    .farm_history ul li.row div {margin-left: 0;}
    .farm_history ul li.row>div {margin-top: -25px;}
    .farm_history ul li span.le41::after, .farm_history ul li span.le44::after, .farm_history ul li span.le42::after, .farm_history ul li span.le39::after {left: -43px;}
}
@media screen and (max-width: 542px) {
    .farm_history ul li div p {line-height: 1.4;}
    .farm_history ul li.row p {margin-left: 128px;}
    .farm_history ul li.row span {margin-bottom: 8px;}
}

@media screen and (max-width: 360px) {
    .farm_history ul li span, .farm_history ul li div {margin-left: 105px;}
    .farm_history ul::before {left: 78px;}
    .farm_history ul li span::after,.farm_history ul li span.le41::after, .farm_history ul li span.le44::after, .farm_history ul li span.le42::after, .farm_history ul li span.le39::after {left: -35px;}
    .farm_history ul li span::before {display: none;}
}

/* 02 */
/* 과학영농종합분석실 */
.farm_top {display: flex; margin-bottom: 45px;}
.farm_imgWrap {margin-right: 35px; text-align: center; width: 50%; height: auto; object-fit: cover; overflow: hidden;  border-radius: 10px;}
.farm_imgWrap:last-child {margin-right: 0;}
.farm_imgWrap img {height: 350px; width: 100%; object-fit: cover;}
.farm_imgWrap.farm_img03 img {height: 100%;}
.farm_bottom {position: relative; background-color: #f8f8f8; padding: 55px 60px; margin-bottom: 100px;}
.farm_bottom::before {content: ''; display: block; position: absolute; bottom: -64px; right: 32px; background: url('/images/Farm/images/content/02/sub_img03.png') no-repeat right center; width: 483px; height: 291px;}

.farm_bottom02 {position: relative;}
.farm_bottom02::before {background: url('/images/Farm/images/content/03/sub_img06.png') no-repeat right center; width: 483px; height: 291px;}

.farm_bottom ul li {/* display: flex; */ font-size: 15px; color: #333; font-family: 'NotoKrR'; letter-spacing: -0.02em; margin-bottom: 19px; line-height: 1;}
.farm_bottom ul li span {position: relative; color: #268c7f; font-family: 'NotoKrM'; margin-right: 15px; display: inline-block; margin-bottom: 10px; width: 70px; flex-shrink: 0;}
.farm_bottom ul li span::before {content: ''; display: block; position: absolute; top: 2px; left: 70px; background-color: #d3d3d3; width: 1px; height: 11px;}
.farm_bottom .sub-img {position: absolute; top: 72px; right: 23px;}
.farm_bottom ul li p {display: inline-block; line-height: 1.4; vertical-align: top;}
.farm_bottom ul li ul {margin-top: 10px;}

@media screen and (max-width: 1400px) {
    .farm_bottom::before {display: none;}
    .farm_bottom {margin-bottom: 40px;}
}
@media screen and (max-width: 1280px) {.farm_imgWrap img {height: 295px;}}
@media screen and (max-width: 820px) {.farm_imgWrap img {height: 240px;}}
@media screen and (max-width: 680px) {
    .farm_top {flex-direction: column; margin-bottom: 0;}
    .farm_top .farm_imgWrap {margin-bottom: 15px; width: 100%;}
    .farm_top .farm_imgWrap:first-child {margin-right: 0;}
    .farm_bottom ul li ul {margin-left: 0 !important; margin-top: 10px;}
    .farm_bottom ul li p {display: flex;}
}
@media screen and (max-width: 480px) {.farm_bottom {padding: 60px 40px;}}
@media screen and (max-width: 360px) {
    .farm_bottom {padding: 40px 25px;}
    .farm_bottom ul li {line-height: 1.5;}
    .farm_bottom ul li span {margin-right: 15px;}
    .farm_bottom ul li span::before {left: 70px; top: 5px;}
    .farm_imgWrap img {height: 220px;}
}

/* 농기계사업단 운영 */
.farmLevel {display: flex; /* flex-wrap: wrap; */}
.farmLevel li {position: relative; width: 16%; margin-right: 55px; font-size: 15px; color: #000; font-family: 'GmarketSansTTFMedium'; font-weight: 600; vertical-align: top;}
.farmLevel li:last-child {margin-right: 0;}
.farmLevel li::before {content: ''; display: block; position: absolute; top: 45px; right: -37px; background: url('/images/Farm/images/content/03/next-arrow.png') no-repeat center; width: 19px; height: 17px; z-index: 1;}
.farmLevel li:last-child:before {display: none;}
.farmLevel li span {position: relative; padding: 25px; box-sizing: border-box; background-color: #f4f4f4; border-radius: 10px; width: 160px; height: 100px; display: flex; justify-content: center;}
.farmLevel li:nth-child(1) span::before {content: ''; display: block; background: url('/images/Farm/images/content/03/level-icon01.png') no-repeat center; width: 52px; height: 49px;}
.farmLevel li:nth-child(2) span::before {content: ''; display: block; background: url('/images/Farm/images/content/03/level-icon02.png') no-repeat center; width: 52px; height: 49px;}
.farmLevel li:nth-child(3) span::before {content: ''; display: block; background: url('/images/Farm/images/content/03/level-icon03.png') no-repeat center; width: 52px; height: 49px;}
.farmLevel li:nth-child(4) span::before {content: ''; display: block; background: url('/images/Farm/images/content/03/level-icon04.png') no-repeat center; width: 52px; height: 49px;}
.farmLevel li:nth-child(5) span::before {content: ''; display: block; background: url('/images/Farm/images/content/03/level-icon05.png') no-repeat center; width: 52px; height: 49px;}
.farmLevel li:nth-child(6) span::before {content: ''; display: block; background: url('/images/Farm/images/content/03/level-icon06.png') no-repeat center; width: 52px; height: 49px;}
.farmLevel li p {text-align: center; margin-top: 15px; line-height: 1.3; font-size: 15px;}

@media screen and (max-width: 1600px) {.farmLevel li span {width: 140px;}}
@media screen and (max-width: 1400px) {
    .farmLevel {flex-wrap: wrap;}
    .farmLevel li {margin-bottom: 25px; width: 19%;}
    .farmLevel li::before {right: -25px;}
    .farmLevel li span {width: 160px;}
}
@media screen and (max-width: 1290px) {
    .farmLevel li {width: 18%;}
    .farmLevel li::before {right: -37px;}
    .farmLevel li span {width: 100%;}
}
@media screen and (max-width: 835px) {
    .farmLevel li {width: 26%;}
}
@media screen and (max-width: 790px) {
    .farmLevel li {width: 40%;}
    .farmLevel li span {width: 95%;}
}
@media screen and (max-width: 580px) {
    .farmLevel li {width: 37%; margin-right: 40px;}
    .farmLevel li::before {right: -27px;}
}
@media screen and (max-width: 320px) {
    .farmLevel li p {font-size: 13px;}
    .farmLevel li {width: 36%;}
}



/* 토양정보시스템 */
.historyWrap {width: 100%; min-height: 365px; border-radius: 15px; text-align: center; padding-top: 60px;  background: url('/images/Farm/images/content/04/farmBg.png') bottom no-repeat #f4f4f4; background-size: 100%; position: relative;}

.historyWrap .textBox .tit {font-family: 'jalnan'; font-size: 24px; color: #5289c1; margin-bottom: 20px;}
.historyWrap .textBox .txt {font-family: 'GmarketSans'; font-size: 16px; color: #3d3d3d;}

.historyWrap a {position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: block; width: 334px; height: 238px; background: url('/images/Farm/images/content/04/farm_link.png') no-repeat; background-size: 100%; font-size: 0;}

@media screen and (max-width: 1400px) {
    .historyWrap {min-height: 300px;}
    .historyWrap a {width: 270px; height: 200px;}
}

@media screen and (max-width: 1200px) {
    .historyWrap {min-height: 250px;}
    .historyWrap a {width: 240px; height: 175px;}
}

@media screen and (max-width: 1025px) {
    .historyWrap {background-image: none;}
}

@media screen and (max-width: 680px) {
    .historyWrap {min-height: auto; padding: 30px; box-sizing: border-box;}
    .historyWrap .textBox .tit {font-size: 20px; margin-bottom: 15px;}
    .historyWrap .textBox .txt {font-size: 14px; margin-bottom: 15px;}
    .historyWrap a {position: static; margin: 0 auto; transform: translateX(0);}
}    

/* 가격동향 */
.farmPriceWrap {width: 100%; border-radius: 10px; background-color: #f4f4f4; padding: 75px 60px; box-sizing: border-box; position: relative;}
.farmPriceWrap::before {content: ''; position: absolute; bottom: 0; right: 0; background: url('/images/Farm/images/content/04/farmPrice.png') no-repeat; background-size: 100%; width: 661px; height: 277px;}

.farmPriceWrap .textBox {margin-bottom: 60px;}
.farmPriceWrap .textBox .tit {font-family: 'jalnan'; font-size: 24px; color: #5289c1; margin-bottom: 20px;}
.farmPriceWrap .textBox .txt {font-family: 'GmarketSans'; font-size: 16px; color: #3d3d3d;}

.farmPriceWrap .btnBox a {margin-right: 20px;}
.farmPriceWrap .btnBox a:last-child {margin-right: 0;}

@media screen and (max-width: 1600px) {
    .farmPriceWrap::before {width: 555px; height: 234px;}
}

@media screen and (max-width: 1400px) {
    .farmPriceWrap {padding: 50px 40px;}
    .farmPriceWrap::before {display: none;}
    .farmPriceWrap .textBox {margin-bottom: 30px;}
}

@media screen and (max-width: 1025px) {
    .farmPriceWrap {padding: 30px;}
    .farmPriceWrap .textBox {margin-bottom: 15px;}
    .farmPriceWrap .textBox .tit {font-size: 22px; margin-bottom: 15px;}
    .farmPriceWrap .textBox .txt {font-size: 15px;}
    .farmPriceWrap .btnBox a {margin-right: 10px;}
}

@media screen and (max-width: 480px) {
    .farmPriceWrap {padding: 30px 20px;}
    .farmPriceWrap .textBox .tit {font-size: 20px;}
    .farmPriceWrap .textBox .txt {font-size: 14px;}
}

/* 농업현황 */
.stateGraphWrap {width: 100%; padding: 65px 0; box-sizing: border-box; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 10px; overflow: hidden;}
.stateGraphWrap::before {content: ''; position: absolute; bottom: 0; left: 0; background: url('/images/Farm/images/content/01/farmState.png') no-repeat; background-size: 100%; width: 160px; height: 188px;}
.stateGraphWrap::after {content: ''; position: absolute; bottom: 0; right: 0; background: url('/images/Farm/images/content/01/farmState2.png') no-repeat; background-size: 100%; width: 257px; height: 188px;}
.stateGraphWrap .stateGraph {width: 80%; display: flex; position: relative; z-index: 1;}

.stateGraph .blue {width: 38%;}
.stateGraph .gold {width: 29%;}
.stateGraph .violet {width: 22%;}
.stateGraph .green {width: 11%;}

.stateGraph .con {height: 50px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
.stateGraph .blue .con {background-color: #228bef; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.stateGraph .gold .con {background-color: #fabf01;}
.stateGraph .violet .con {background-color: #a189f7;}
.stateGraph .green .con {background-color: #44acc2; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}

.stateGraph .tit {margin-bottom: 10px; font-family: 'jalnan'; font-size: 18px; color: #000000;}
.stateGraph .price {margin-bottom: 10px; font-family: 'NotoKrR'; font-size: 15px; color: #000000;}
.stateGraph .price span {font-family: 'NotoKrB';}

@media screen and (max-width: 1600px) {
    .stateGraph .blue {width: 35%;}
    .stateGraph .gold {width: 27%;}
    .stateGraph .violet {width: 22%;}
    .stateGraph .green {width: 16%;}
}

@media screen and (max-width: 1200px) {
    .stateGraphWrap::before {width: 145px; height: 170px;}
    .stateGraphWrap::after {width: 230px; height: 170px;}

    .stateGraph .con  {height: 40px;}
    .stateGraph .price span {display: block;}
}

@media screen and (max-width: 1025px) {
    .stateGraphWrap {padding: 40px 0;}
    .stateGraphWrap::before, .stateGraphWrap::after {display: none;}
    .stateGraphWrap .stateGraph {width: 90%;}
}

@media screen and (max-width: 480px) {
    .stateGraphWrap {padding: 30px 0; overflow-x: scroll; display: block;}
    .stateGraph .tit {font-size: 16px; margin-bottom: 5px;}
    .stateGraph .price {font-size: 14px;}
    .stateGraph .con {height: 35px;}
    .stateGraphWrap .stateGraph {width: 550px;}
}