@charset "utf-8";
@import url(./contents.css);


/* 인사말 */
.greeting-wrap .right .img{background-image: url('/atec/img/sub/01/img_01.png');}
.greeting-wrap .left .tit strong{ color : #07927D;}
.greeting-wrap .left .eng{color: #079221;}


/* 연혁 */

.history-wrap01{ position:relative;}
.history-wrap01:before{content:'';position:absolute;border-left: 1px solid #ebebeb;width:1px;height:100%;display:block;top:20px;left: 5em;margin-left:0.5px;}
.history-wrap01 .top{position:relative;width: 100%;height: 12.5em;background: #f8fafc url(../img/sub/01/history_bg01.png) right top no-repeat;border-radius: 1.5em 5em 1.5em 1.5em;/* background-size: cover; */}
.history-wrap01 .top p{ font-family: 'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; font-size: 2em; padding-left: 2em; padding-top: 1.7em; line-height: 1.3;}
.history-wrap01 .top em{color: #07927d;font-size: 1.1em;}
.history-wrap01 .bottom{position: relative;margin-left: 2em;}
.history-wrap01 .bottom .tit{display: block;width: 4em;background: #005f88;color:#fff;font-size: 1.5em;line-height:4em;text-align:center;font-family: 'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif;border-radius: 50%;}
.history-wrap01 .bottom .box{position:relative;margin: 2em 1em 0 2.4em;padding-left:4em;}
.history-wrap01 .bottom .box::after{content:''; clear:both; display:block; }
.history-wrap01 .bottom .box:before{content:'';display:block;width: 1.4em;height: 1.4em;border: 6px solid #fff;background: #07927d;position:absolute;border-radius: 50px;left:0;top: 0.3em;box-shadow: 0px 0px 20px 0px rgb(7 146 125 / 12%);}
.history-wrap01 .bottom .box .years{font-family: 'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif;font-size: 1.5em;vertical-align:top;width: 6em;float: left;}
.history-wrap01 .bottom .box ul{padding-left:2em;margin:0;vertical-align:top;width: calc(100% - 9em);float: left;}
.history-wrap01 .bottom .box ul li{position: relative;margin-bottom: 0.5em;padding-left: 7em;}
.history-wrap01 .bottom .box ul li .date{display: block;width:7em;font-weight: 600;color: #016895;position: absolute;left: 0;}
.history-wrap01 .bottom .desc{padding: 0.4em 0.9em;margin-top: 0.5em;border-radius: 0.5em;background: #fafafa;font-size: 0.9em;color: #555;font-weight: 400;}

@media all and (max-width:1024px) {
    
    .history-wrap01 .top{background: #f8fafc;height: auto;}
    .history-wrap01 .top p{ text-align: center; padding: 1em 0.5em; font-size: 1.6em;}
    .history-wrap01:before{left:2.7em;}
    .history-wrap01 .bottom .tit{width: 6em;font-size: 1.8em;line-height: 2em;border-radius: 0.25em;}
    .history-wrap01 .bottom .box{padding:0;margin:0;padding-left:2em;padding-top: 3em;}
    .history-wrap01 .bottom .box:before{top: 3.4em;}
    .history-wrap01 .bottom .box .years{width: 3em;}
    .history-wrap01 .bottom .box ul{width: calc(100% - 5em);}
}

@media all and (max-width:540px) {
    .history-wrap01:before{display:none;}
    .history-wrap01 .bottom{margin-left:1em;}
    .history-wrap01 .bottom .box{padding: 2em 0 1em 2em;border-bottom: 1px solid #ddd;}
    .history-wrap01 .bottom .box:before{top: 2.4em;}
    .history-wrap01 .bottom .box .years{float: none; width:100%;}
    .history-wrap01 .bottom .box .years br{display:none;}
    .history-wrap01 .bottom .box ul{float:none;width: 100%;padding-left:0;margin-top: 0.5em;}
    .history-wrap01 .bottom .box ul li{padding-left:0;}
    .history-wrap01 .bottom .box ul li .date{display:block;position: relative;width: 100%;}
    
}

/* 주요시설 */

@media all and (min-width:1025px) {
	.box-descript {padding-left: 16em;}

}



/* 조직도 */
.org-wrap {margin:0 auto 4em;}
.org-wrap .top{padding: 3em 3em;border-radius:1em;border: 2px dotted #e5e5e5;}
.org-wrap .org-box {position:relative;margin:0 auto;padding: 0.5em 0.3em;width:10em;font-size: 1.4em;box-sizing:border-box;text-align:center;font-family: 'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif;border-radius: 0.25em; display:block;}
.org-wrap .org1 .org-box {color:#fff;background: linear-gradient(180deg, #00cc6a 0%, #07927D 100%);box-shadow: 0px 0px 20px 0px rgb(7 146 125 / 11%);}

.org-wrap .org1 .org-box:after {content:"";display:block;position:absolute;top: 100%;left:50%;width:1px;transform: translateX(-50%);height: 32px;background: #ddd;z-index: -1;}
.org-wrap .tabs {position:relative;margin-top: 4em;}
.org-wrap .tabs:after {z-index: -1;content:"";display:block;position:absolute;top: -36px;left: 50%;transform: translateX(-50%);width: 80%;height:1px;background: #ddd;}
.org-wrap .tabs li{position:relative;float:left;margin: 0.5%;width: calc(20% - 1%);}
.org-wrap .tabs li:after {content:"";display:block;position:absolute;top: -40px; left:50%;width:1px;height: 40px;background: #ddd;}
.org-wrap .tabs li.bd-none:after {display:none;}
.org-wrap .tabs li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.org-wrap .tabs li button.on .selected {display:block;}
.org-wrap .tabs .org-box {display:block;width:100%;color: #004d88;font-size: 1.15em;padding: 0.8em;border:1px solid #004d88;background:#fff;}
.org-wrap .tabs .org-box:hover, .org-wrap .tabs li.tab-active .org-box{color:#fff;background:#004d88;}
.org-wrap .tab-content{margin-top:2em;}
.org-wrap .tab-con {display:none;}
.org-wrap .tab-con.on {display:block;}
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}


@media all and (max-width:1024px) {
	.org-wrap .top{padding:2em;}
}
@media all and (max-width:768px) {
	.org-wrap {margin:0 auto 1.2em;}
	.org-wrap .top{padding:1em;}
	.org-wrap .org-box {width:100%;}
	.org-wrap .org1 .org-box:after {display:none;}
	.org-wrap .org2 {margin-top:1.2em;}
	.org-wrap .tabs {position:relative;margin-top:1.2em;}
	.org-wrap .tabs:after {display:none;}
	.org-wrap .tabs ul li {width:48%;}
	.org-wrap .tabs ul li:after {display:none;}
}


/* 찾아오시는길 */
.addrInfoMap > .info:after{background: #07927D!important;}
.addrInfoMap > .info:before{background: #ededed!important;}
.addrInfoMap > .info h4 {width:30%;}

@media (max-width: 980px){
	.addrInfoMap > .info h4 {width: 100%;}
}

/* 농업인단체 하위 - 연혁 */
.history-wrap:before{left:3em;top: 0;height: 100%;}
.history-wrap .tit{background: linear-gradient(180deg, #00cc6a 0%, #07927D 100%);}
.history-wrap .bottom{margin-left:0;padding: 0 0 2em;}
.history-wrap .top,
.history-wrap .bottom::after{background: #f2f2f2;border-radius: 0;height: 0.5em;}
.history-wrap .bottom .box:before{background: #07927d;border-radius: 50px;left:0;top: 0.3em;box-shadow: 0px 0px 20px 0px rgb(7 146 125 / 12%);}
.history-wrap .bottom .box .years{width: 6em;margin-bottom: 0.7em;}
.history-wrap .bottom .box ul{width: calc(100% - 11.5em);}
.history-wrap .bottom .box ul li{display:table;padding: 0;}
.history-wrap .bottom .box ul li .date{color:#004d88;width: 7.5em;}
.history-wrap .bottom .box ul li *{display:table-cell;}

@media all and (max-width:1024px) {
	.history-wrap:before{left:0.5em;}
	.history-wrap .top{padding:0;}
	.history-wrap .bottom .box {padding-left: 2em;}
	.history-wrap .bottom .box ul li,
	.history-wrap .bottom .box ul li *,
	.history-wrap .bottom .box ul{display:block;width:100%;padding: 0;}
	.history-wrap .bottom .box:before{top:1.4em;}
	
}


/* 링크박스 */
.link-wrap .list-box li a {background:#00927e;}
.link-wrap .list-box li:nth-child(2) a {background:#007092;}
.link-wrap .list-box li:nth-child(3) a {background:#09559a;}


/* 강우량 정보 */

.rainFall {background:#F4F7FE; border-radius:1em; padding:2em 2em; position:relative;}
.rainFall .tit {display:block; position:relative; margin-bottom:1.1em; overflow:hidden;}
.rainFall .tit strong {display:block; font-size:1.6em; color:#333; font-family:'TTWanjudaedunsancheB';}
.rainFall .tit span {display:block; position:relative; text-align:right; color:#888; font-size:1em; font-weight:400}
.rainFall .mapArea {position:relative; font-size:1.2em; width:30.9em; height:29.05em; margin-left:-1em; background:url(/safe/img/main/img_map.svg) no-repeat 0 0; background-size:contain; margin:auto;}
.rainFall .mapArea li {display:block; position:absolute; }
.rainFall .mapArea li[data-area='시내'] {top:18.75em; left:20.45em;}
.rainFall .mapArea li[data-area='구룡포읍'] {top:20.9em; left:27.75em;}
.rainFall .mapArea li[data-area='연일읍'] {top:20.35em; left:17.25em;}
.rainFall .mapArea li[data-area='오천읍'] {top:25em; left:21.9em;}
.rainFall .mapArea li[data-area='대송면'] {top:23.25em; left:19.1em;}
.rainFall .mapArea li[data-area='동해면'] {top:21.45em; left:24.65em;}
.rainFall .mapArea li[data-area='장기면'] {top:25.5em; left:25.5em;}
.rainFall .mapArea li[data-area='호미곶면'] {top:16.95em; left:28.35em;}
.rainFall .mapArea li[data-area='흥해읍'] {top:13.6em; left:18.35em;}
.rainFall .mapArea li[data-area='신광면'] {top:11.55em; left:14.75em;}
.rainFall .mapArea li[data-area='청하면'] {top:9.8em; left:18.1em;}
.rainFall .mapArea li[data-area='송라면'] {top:6em; left:18.3em;}
.rainFall .mapArea li[data-area='기계면'] {top:15.6em; left:11.9em;}
.rainFall .mapArea li[data-area='죽장면'] {top:8.5em; left:8.15em;}
.rainFall .mapArea li[data-area='기북면'] {top:11.5em; left:11.6em;}
.rainFall .mapArea span,
.rainFall .mapArea strong {display:block; position:absolute; white-space:nowrap; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.rainFall .mapArea span {font-size:.8em; color:#404662; line-height:1.5em; top:-1.7em; font-weight:600;}
.rainFall .mapArea strong {top:100%; margin-top:.2em; border-radius:9em; font-size:.7em; color:#fff; line-height:1.65em; height:1.65em; background:#114985; padding:0 1em; min-width:3.36em;}

@media all and (max-width:1024px) {
	.rainFall {position:relative; top:auto; bottom:auto; width:auto; overflow:hidden;}
	.rainFall .mapArea {margin:0 auto;font-size:1.2em;}
}
@media all and (max-width:640px) {
	.rainFall .mapScroll {margin:0 -1em; padding:1em 0; overflow:auto;}
}

.rain-tbl .tbl.fit th,
.rain-tbl .tbl.fit td {padding:.6em .2em; font-size:.9em!important;}
.rain-tbl > .guide {display:block; position:relative; top:auto;}
.rain-tbl .tbl-box {overflow:auto;}
.rain-tbl .tbl {width:80em;}
.rain-tbl .tbl-legend {width:100%;}
.rain-tbl .tbl-legend + .tbl {margin-top:0;}